From 5766f74bb36176a89153f9d3658c59d82ca0a8c2 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 13 Mar 2026 11:57:31 +0100 Subject: [PATCH 1/7] [design-system] init new package with tokens --- CONTRIBUTING.md | 2 +- package.json | 4 +- pnpm-lock.yaml | 20 +- semcore/design-system/.npmignore | 4 + semcore/design-system/CHANGELOG.md | 9 + semcore/design-system/README.md | 37 + semcore/design-system/package.json | 23 + .../src/theme => design-system/src}/dark.json | 0 .../theme => design-system/src}/light.json | 0 .../theme => design-system/src}/processor.ts | 41 +- .../src/theme => design-system/src}/utils.ts | 0 semcore/design-system/tsconfig.json | 4 + .../style/design-tokens/design-tokens.json | 1633 +++-------------- 13 files changed, 368 insertions(+), 1409 deletions(-) create mode 100644 semcore/design-system/.npmignore create mode 100644 semcore/design-system/CHANGELOG.md create mode 100644 semcore/design-system/README.md create mode 100644 semcore/design-system/package.json rename semcore/{core/src/theme => design-system/src}/dark.json (100%) rename semcore/{core/src/theme => design-system/src}/light.json (100%) rename semcore/{core/src/theme => design-system/src}/processor.ts (87%) rename semcore/{core/src/theme => design-system/src}/utils.ts (100%) create mode 100644 semcore/design-system/tsconfig.json diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2b587c5ee7..7d451256e4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,7 +2,7 @@ First of all, thank you for your interest in the library. We'd love to accept yo ## Prerequisites -1. Install the latest LTS version of [Node.js](https://nodejs.org/en). +1. Install the latest LTS (min 24) version of [Node.js](https://nodejs.org/en). 2. Install [pnpm](https://pnpm.js.org) globally by running: `npm i -g pnpm@10`. 3. Set up commit signing for your contributions. Follow these steps: - [Generate a GPG key](https://docs.github.com/en/authentication/managing-commit-signature-verification/generating-a-new-gpg-key) diff --git a/package.json b/package.json index 0171778e61..9e344a9a61 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "packageManager": "pnpm@10.11.1", + "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be", "scripts": { "dev": "pnpm storybook", "start": "pnpm storybook", "build": "pnpm run clean && pnpm --filter @semcore/core run build && pnpm build:icons && pnpm build:illustration && pnpm --filter @semcore/base-components run build && pnpm --filter @semcore/dropdown run build && pnpm --filter @semcore/* --filter !@semcore/icon --filter !@semcore/core --filter !@semcore/base-components --filter !@semcore/illustration --filter !@semcore/dropdown --filter !@semcore/ui run build", - "process-theme": "tsm --require=./.ci/tsm-filter-warnings.js semcore/core/src/theme/processor.ts", + "process-theme": "pnpm --filter @semcore/design-system build", "typecheck": "pnpm --filter @semcore/* --filter !@semcore/babel-plugin-root --filter !@semcore/babel-plugin-styles --filter !@semcore/babel-plugin-react-semcore --filter !@semcore/babel-preset-ui --filter !@semcore/testing-utils --filter !@semcore/email --filter !@semcore/icon-transform-svg --filter !@semcore/shadow-loader exec tsc --noEmit", "install-n-test": "pnpm install && pnpm test", "install-n-browser-test": "pnpm install && pnpm browser-test", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4cdd9f4f4f..cb4843f30c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -954,6 +954,18 @@ importers: specifier: workspace:* version: link:../../tools/testing-utils + semcore/design-system: + devDependencies: + colorjs.io: + specifier: 0.4.3 + version: 0.4.3 + postcss: + specifier: 8.4.33 + version: 8.4.33 + postcss-value-parser: + specifier: 4.1.0 + version: 4.1.0 + semcore/divider: dependencies: '@semcore/base-components': @@ -2965,7 +2977,7 @@ importers: version: 0.14.29 vitest-axe: specifier: 0.1.0 - version: 0.1.0(vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.18.8)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0)) + version: 0.1.0(vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.18.8)(@vitest/browser@3.0.6(@types/node@18.16.15)(playwright@1.48.0)(typescript@5.8.3)(vite@6.3.5(@types/node@18.16.15)(less@3.13.1)(sass@1.93.2)(sugarss@5.0.1(postcss@8.4.38))(terser@5.44.0)(yaml@2.8.0))(vitest@3.0.9)(webdriverio@8.24.3(typescript@5.8.3)))(@vitest/ui@3.0.6(vitest@3.0.9))(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0)) website: dependencies: @@ -27556,7 +27568,7 @@ snapshots: - typescript - universal-cookie - vitest-axe@0.1.0(vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.18.8)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0)): + vitest-axe@0.1.0(vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.18.8)(@vitest/browser@3.0.6(@types/node@18.16.15)(playwright@1.48.0)(typescript@5.8.3)(vite@6.3.5(@types/node@18.16.15)(less@3.13.1)(sass@1.93.2)(sugarss@5.0.1(postcss@8.4.38))(terser@5.44.0)(yaml@2.8.0))(vitest@3.0.9)(webdriverio@8.24.3(typescript@5.8.3)))(@vitest/ui@3.0.6(vitest@3.0.9))(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0)): dependencies: aria-query: 5.3.2 axe-core: 4.9.1 @@ -27564,7 +27576,7 @@ snapshots: dom-accessibility-api: 0.5.16 lodash-es: 4.17.21 redent: 3.0.0 - vitest: 3.0.9(@types/debug@4.1.12)(@types/node@22.18.8)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0) + vitest: 3.0.9(@types/debug@4.1.12)(@types/node@22.18.8)(@vitest/browser@3.0.6(@types/node@18.16.15)(playwright@1.48.0)(typescript@5.8.3)(vite@6.3.5(@types/node@18.16.15)(less@3.13.1)(sass@1.93.2)(sugarss@5.0.1(postcss@8.4.38))(terser@5.44.0)(yaml@2.8.0))(vitest@3.0.9)(webdriverio@8.24.3(typescript@5.8.3)))(@vitest/ui@3.0.6(vitest@3.0.9))(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0) vitest@3.0.9(@types/debug@4.1.12)(@types/node@18.16.15)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@18.16.15)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.4.38))(terser@5.44.0)(yaml@2.8.0): dependencies: @@ -27609,7 +27621,7 @@ snapshots: - tsx - yaml - vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.18.8)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0): + vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.18.8)(@vitest/browser@3.0.6(@types/node@18.16.15)(playwright@1.48.0)(typescript@5.8.3)(vite@6.3.5(@types/node@18.16.15)(less@3.13.1)(sass@1.93.2)(sugarss@5.0.1(postcss@8.4.38))(terser@5.44.0)(yaml@2.8.0))(vitest@3.0.9)(webdriverio@8.24.3(typescript@5.8.3)))(@vitest/ui@3.0.6(vitest@3.0.9))(happy-dom@9.20.3)(jsdom@22.1.0)(less@3.13.1)(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0): dependencies: '@vitest/expect': 3.0.9 '@vitest/mocker': 3.0.9(msw@2.11.3(@types/node@22.18.8)(typescript@5.8.3))(vite@6.3.5(@types/node@22.18.8)(less@3.13.1)(sass@1.93.2)(sugarss@5.0.1(postcss@8.5.6))(terser@5.44.0)(yaml@2.8.0)) diff --git a/semcore/design-system/.npmignore b/semcore/design-system/.npmignore new file mode 100644 index 0000000000..229b5c941a --- /dev/null +++ b/semcore/design-system/.npmignore @@ -0,0 +1,4 @@ +node_modules +__tests__ +src +tsconfig.json \ No newline at end of file diff --git a/semcore/design-system/CHANGELOG.md b/semcore/design-system/CHANGELOG.md new file mode 100644 index 0000000000..37dcdb990b --- /dev/null +++ b/semcore/design-system/CHANGELOG.md @@ -0,0 +1,9 @@ +# Changelog + +CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/). + +## [1.0.0] - 2026-03-16 + +### Added + +- Release package with themes. diff --git a/semcore/design-system/README.md b/semcore/design-system/README.md new file mode 100644 index 0000000000..83a30441c1 --- /dev/null +++ b/semcore/design-system/README.md @@ -0,0 +1,37 @@ +# @semcore/design-system + +[![version](https://img.shields.io/npm/v/@semcore/design-system.svg)](https://www.npmjs.com/@semcore/design-system) +[![downloads](https://img.shields.io/npm/dt/@semcore/design-system.svg)](https://www.npmjs.com/package/@semcore/design-system) +[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) + +> This component is part of the Intergalactic Design System + +[//]: # '### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/design-system/)' + +### 🏠 [Design system](https://developer.semrush.com/intergalactic/) + +## Install + +```sh +npm install @semcore/design-system +``` + +## 👤 Author + +[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) +and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors) + +## 🤝 Contributing + +Contributions, issues and feature requests are welcome! + +Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at +the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md). + +## Show your support + +Give a ⭐️ if this project helped you! + +## 📝 License + +This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed. diff --git a/semcore/design-system/package.json b/semcore/design-system/package.json new file mode 100644 index 0000000000..f89b24a1d0 --- /dev/null +++ b/semcore/design-system/package.json @@ -0,0 +1,23 @@ +{ + "name": "@semcore/design-system", + "description": "Semrush Design System package", + "version": "1.0.0", + "author": "UI-kit team ", + "license": "MIT", + "type": "module", + "scripts": { + "build": "node --experimental-transform-types src/processor.ts" + }, + "dependencies": {}, + "peerDependencies": {}, + "repository": { + "type": "git", + "url": "https://github.com/semrush/intergalactic.git", + "directory": "semcore/design-system" + }, + "devDependencies": { + "colorjs.io": "0.4.3", + "postcss": "8.4.33", + "postcss-value-parser": "4.1.0" + } +} diff --git a/semcore/core/src/theme/dark.json b/semcore/design-system/src/dark.json similarity index 100% rename from semcore/core/src/theme/dark.json rename to semcore/design-system/src/dark.json diff --git a/semcore/core/src/theme/light.json b/semcore/design-system/src/light.json similarity index 100% rename from semcore/core/src/theme/light.json rename to semcore/design-system/src/light.json diff --git a/semcore/core/src/theme/processor.ts b/semcore/design-system/src/processor.ts similarity index 87% rename from semcore/core/src/theme/processor.ts rename to semcore/design-system/src/processor.ts index cfe2e7cb1f..c654b43475 100644 --- a/semcore/core/src/theme/processor.ts +++ b/semcore/design-system/src/processor.ts @@ -7,7 +7,8 @@ import glob from 'fast-glob'; import postcss from 'postcss'; import valuesParser from 'postcss-value-parser'; -import { processTokens, tokensToCss, tokensToJs, tokensToJson } from './utils'; +// @ts-ignore +import { processTokens, tokensToCss, tokensToJs } from './utils.ts'; type Token = { name: string; @@ -15,14 +16,18 @@ type Token = { description?: string; }; -export const writeIfChanged = async (path: string, content: string) => { +export const writeIfChanged = async (relativePath: string, content: string) => { try { - const originalContent = await fs.readFile(path, 'utf-8'); + const originalContent = await fs.readFile(resolvePath(packageDirname, relativePath), 'utf-8'); if (originalContent.replace(/[\s\n]/g, '') === content.replace(/[\s\n]/g, '')) { return; } - } catch {} - await fs.writeFile(path, content); + } catch (err: unknown) { + if (!(err instanceof Error) || !('code' in err) || err.code !== 'ENOENT' || !err.message.startsWith('ENOENT: no such file')) { + throw err; + } + } + await fs.writeFile(resolvePath(packageDirname, relativePath), content); }; const defaultTheme = 'light'; @@ -30,14 +35,14 @@ const themes = ['light', 'dark']; const warning = !process.argv.includes('--no-warning'); -const dirname = resolvePath(fileURLToPath(import.meta.url), '..'); +const packageDirname = resolvePath(fileURLToPath(import.meta.url), '..', '..'); const autoTheme: Record = {}; for (const theme of themes) { const prefix = 'intergalactic'; const { base, tokens, featureHighlight } = JSON.parse( - await fs.readFile(resolvePath(dirname, `./${theme}.json`), 'utf-8'), + await fs.readFile(resolvePath(packageDirname, 'src', `${theme}.json`), 'utf-8'), ); const processed = processTokens( base, @@ -49,17 +54,17 @@ for (const theme of themes) { const { processedTokens } = processed; await writeIfChanged( - `./semcore/core/src/theme/themes/${theme}.css`, + `lib/${theme}.css`, tokensToCss(processedTokens), ); - await writeIfChanged(`./semcore/core/src/theme/themes/${theme}.ts`, tokensToJs(processedTokens)); + await writeIfChanged(`lib/${theme}.ts`, tokensToJs(processedTokens)); if (highlightsTokens.length > 0) { await writeIfChanged( - `./semcore/core/src/theme/themes/highlights-${theme}.css`, + `lib/highlights-${theme}.css`, tokensToCss(highlightsTokens), ); - await writeIfChanged(`./semcore/core/src/theme/themes/highlights-${theme}.ts`, tokensToJs(highlightsTokens)); + await writeIfChanged(`lib/highlights-${theme}.ts`, tokensToJs(highlightsTokens)); } autoTheme[theme] = processedTokens; @@ -67,17 +72,17 @@ for (const theme of themes) { const usages: { [tokenName: string]: string[] } = {}; if (theme === defaultTheme) { await writeIfChanged( - './semcore/core/src/theme/themes/default.css', + 'lib/default.css', tokensToCss(processedTokens), ); - await writeIfChanged('./semcore/core/src/theme/themes/default.ts', tokensToJs(processedTokens)); + await writeIfChanged('lib/default.ts', tokensToJs(processedTokens)); const projectCssPaths = ( await glob('./semcore/*/src/**/*.shadow.css', { ignore: ['node_modules', 'lib'], }) ).filter((path) => { - if (path.split('/').some((pathPart) => ['chart', 'email', 'table'].includes(pathPart))) { + if (path.split('/').some((pathPart) => ['design-system', 'chart', 'email', 'table'].includes(pathPart))) { return false; } return true; @@ -282,11 +287,11 @@ for (const theme of themes) { } await writeIfChanged( - resolvePath(dirname, '../../../../website/docs/style/design-tokens/design-tokens.json'), + resolvePath(packageDirname, '../../website/docs/style/design-tokens/design-tokens.json'), JSON.stringify(designTokensDocumentation, null, 2) + '\n', ); await writeIfChanged( - resolvePath(dirname, '../../../../website/docs/style/design-tokens/base-tokens.json'), + resolvePath(packageDirname, '../../website/docs/style/design-tokens/base-tokens.json'), JSON.stringify(baseTokensDocumentation, null, 2) + '\n', ); } @@ -298,10 +303,10 @@ for (const theme in autoTheme) { autoThemeLines.push(tokensToCss(autoTheme[theme], selector)); } -await writeIfChanged('./semcore/core/src/theme/themes/auto.css', autoThemeLines.join('\n')); +await writeIfChanged('lib/auto.css', autoThemeLines.join('\n')); execSync('pnpm lint:css --fix', { encoding: 'utf-8', - cwd: resolvePath(dirname, '../../../../'), + cwd: resolvePath(packageDirname, '../../'), stdio: ['inherit', 'inherit', 'inherit'], }); diff --git a/semcore/core/src/theme/utils.ts b/semcore/design-system/src/utils.ts similarity index 100% rename from semcore/core/src/theme/utils.ts rename to semcore/design-system/src/utils.ts diff --git a/semcore/design-system/tsconfig.json b/semcore/design-system/tsconfig.json new file mode 100644 index 0000000000..596e2cf729 --- /dev/null +++ b/semcore/design-system/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src"] +} diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 24a2edc59e..a30287ff73 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -5,33 +5,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Primary background of the interface which contains the main data and information.", - "components": [ - "base-components", - "base-trigger", - "bulk-textarea", - "card", - "checkbox", - "color-picker", - "counter", - "d3-chart", - "data-table", - "drag-and-drop", - "dropdown", - "feature-highlight", - "fullscreen-modal", - "inline-input", - "input", - "modal", - "pills", - "radio", - "select", - "side-panel", - "slider", - "switch", - "tag", - "textarea", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-neutral-hover", @@ -39,10 +13,7 @@ "rawValue": "{gray.50}", "computedValue": "#f4f5f9", "description": "Hover state of the primary background of the interface which contains the main data and information.", - "components": [ - "base-trigger", - "pills" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-neutral-active", @@ -50,9 +21,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Active (selected) state of the primary background of the interface which contains the main data and information.", - "components": [ - "flags" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-info", @@ -60,11 +29,7 @@ "rawValue": "{blue.400}", "computedValue": "#008ff8", "description": "Accent background of the message with regular information.", - "components": [ - "base-trigger", - "counter", - "notice-global" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-success", @@ -72,9 +37,7 @@ "rawValue": "{green.400}", "computedValue": "#009f81", "description": "Accent background of the message or banner with information about the successful result.", - "components": [ - "notice-global" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-critical", @@ -82,11 +45,7 @@ "rawValue": "{red.400}", "computedValue": "#ff4953", "description": "Accent background of a message or a banner with a critical information.", - "components": [ - "counter", - "notice-bubble", - "notice-global" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-warning", @@ -94,10 +53,7 @@ "rawValue": "{orange.400}", "computedValue": "#ff642d", "description": "Accent background of a message or a banner with a warning information.", - "components": [ - "counter", - "notice-global" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-highlight", @@ -121,9 +77,7 @@ "rawValue": "{gray.500}", "computedValue": "#6c6e79", "description": "Accented muted background for a message with regular information.", - "components": [ - "notice-global" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-invert", @@ -131,9 +85,7 @@ "rawValue": "{gray.800}", "computedValue": "#191b23", "description": "Inverted version of the primary background of the interface that contains the main data and information.", - "components": [ - "notice-bubble" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-invert-hover", @@ -149,9 +101,7 @@ "rawValue": "{gray.600}", "computedValue": "#484a54", "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.", - "components": [ - "drag-and-drop" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-neutral", @@ -159,16 +109,7 @@ "rawValue": "{gray.50}", "computedValue": "#f4f5f9", "description": "Secondary background of the interface which contains the main data and information.", - "components": [ - "accordion", - "bulk-textarea", - "d3-chart", - "drag-and-drop", - "input", - "notice", - "textarea", - "time-picker" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-neutral-hover", @@ -176,10 +117,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Hover state of the secondary background of the interface which contains the main data and information.", - "components": [ - "accordion", - "time-picker" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-neutral-active", @@ -187,10 +125,7 @@ "rawValue": "{gray.200}", "computedValue": "#c4c7cf", "description": "Active (selected) state of the secondary background of the interface which contains the main data and information.", - "components": [ - "flags", - "time-picker" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-info", @@ -198,9 +133,7 @@ "rawValue": "{blue.50}", "computedValue": "#e9f7ff", "description": "Secondary background of a message with regular information.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-info-hover", @@ -224,9 +157,7 @@ "rawValue": "{green.50}", "computedValue": "#dbfee8", "description": "Secondary background of the message with success information you want to accent.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-success-hover", @@ -250,10 +181,7 @@ "rawValue": "{red.50}", "computedValue": "#fff0f7", "description": "Secondary background of the message with critical information you want to accent.", - "components": [ - "bulk-textarea", - "notice" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-critical-hover", @@ -277,9 +205,7 @@ "rawValue": "{orange.50}", "computedValue": "#fff3d9", "description": "Secondary background of the message with warning information you want to accent.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-warning-hover", @@ -359,10 +285,7 @@ "rawValue": "rgba({blue.400}, 0.2)", "computedValue": "rgba(0, 143, 248, 0.2)", "description": "Focusing values in the input.", - "components": [ - "date-picker", - "time-picker" - ] + "components": [] }, { "name": "--intergalactic-text-primary", @@ -370,42 +293,7 @@ "rawValue": "{gray.800}", "computedValue": "#191b23", "description": "Primary text.", - "components": [ - "accordion", - "base-components", - "base-trigger", - "breadcrumbs", - "bulk-textarea", - "button", - "card", - "checkbox", - "d3-chart", - "data-table", - "date-picker", - "dropdown", - "dropdown-menu", - "errors", - "feature-popover", - "format-text", - "fullscreen-modal", - "inline-input", - "input", - "input-mask", - "modal", - "notice", - "pagination", - "pills", - "product-head", - "radio", - "side-panel", - "switch", - "tab-line", - "tab-panel", - "textarea", - "time-picker", - "tooltip", - "typography" - ] + "components": [] }, { "name": "--intergalactic-text-secondary", @@ -413,27 +301,7 @@ "rawValue": "{gray.500}", "computedValue": "#6c6e79", "description": "Secondary text.", - "components": [ - "breadcrumbs", - "bulk-textarea", - "button", - "card", - "counter", - "d3-chart", - "date-picker", - "dropdown", - "dropdown-menu", - "flags", - "format-text", - "fullscreen-modal", - "pills", - "slider", - "switch", - "tab-panel", - "time-picker", - "typography", - "widget-empty" - ] + "components": [] }, { "name": "--intergalactic-text-placeholder", @@ -441,14 +309,7 @@ "rawValue": "{gray.400}", "computedValue": "#8a8e9b", "description": "Placeholder text only.", - "components": [ - "base-trigger", - "bulk-textarea", - "inline-input", - "input", - "input-mask", - "textarea" - ] + "components": [] }, { "name": "--intergalactic-text-success", @@ -488,18 +349,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Inverted version of the primary text.", - "components": [ - "button", - "date-picker", - "dot", - "feature-highlight", - "feature-popover", - "notice-bubble", - "notice-global", - "tag", - "tooltip", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-text-secondary-invert", @@ -515,15 +365,7 @@ "rawValue": "{blue.500}", "computedValue": "#006dca", "description": "Link text.", - "components": [ - "base-trigger", - "button", - "format-text", - "link", - "pagination", - "tab-panel", - "typography" - ] + "components": [] }, { "name": "--intergalactic-text-link-hover-active", @@ -531,14 +373,7 @@ "rawValue": "{blue.600}", "computedValue": "#044792", "description": "Hover and active states for the link text.", - "components": [ - "base-trigger", - "button", - "format-text", - "link", - "tab-panel", - "typography" - ] + "components": [] }, { "name": "--intergalactic-text-link-invert", @@ -546,9 +381,7 @@ "rawValue": "{blue.200}", "computedValue": "#8ecdff", "description": "Inverted version of the link text. Use on dark background only.", - "components": [ - "notice-bubble" - ] + "components": [] }, { "name": "--intergalactic-text-link-invert-hover", @@ -564,10 +397,7 @@ "rawValue": "{violet.500}", "computedValue": "#8649e1", "description": "Visited link text.", - "components": [ - "button", - "link" - ] + "components": [] }, { "name": "--intergalactic-text-hint", @@ -575,11 +405,7 @@ "rawValue": "{gray.500}", "computedValue": "#6c6e79", "description": "Hint link text.", - "components": [ - "button", - "d3-chart", - "format-text" - ] + "components": [] }, { "name": "--intergalactic-text-hint-hover-active", @@ -587,11 +413,7 @@ "rawValue": "{gray.600}", "computedValue": "#484a54", "description": "Hover and active states of the hint link text.", - "components": [ - "button", - "format-text", - "typography" - ] + "components": [] }, { "name": "--intergalactic-text-hint-invert", @@ -615,9 +437,7 @@ "rawValue": "{gray.300}", "computedValue": "#a9abb6", "description": "Secondary text. Use with font-size ≥20px.", - "components": [ - "typography" - ] + "components": [] }, { "name": "--intergalactic-text-large-info", @@ -625,9 +445,7 @@ "rawValue": "{blue.400}", "computedValue": "#008ff8", "description": "Link text with font-size ≥20px.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-text-large-info-hover-active", @@ -683,31 +501,7 @@ "rawValue": "{gray.200}", "computedValue": "#c4c7cf", "description": "Neutral primary border.", - "components": [ - "base-trigger", - "bulk-textarea", - "button", - "checkbox", - "counter", - "d3-chart", - "date-picker", - "divider", - "dropdown", - "feedback-form", - "fullscreen-modal", - "inline-input", - "input", - "pills", - "radio", - "select", - "side-panel", - "slider", - "spin", - "tab-line", - "tab-panel", - "textarea", - "time-picker" - ] + "components": [] }, { "name": "--intergalactic-border-secondary", @@ -715,17 +509,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Subtle secondary border.", - "components": [ - "card", - "color-picker", - "d3-chart", - "data-table", - "date-picker", - "dropdown", - "notice", - "slider", - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-border-info", @@ -733,9 +517,7 @@ "rawValue": "{blue.200}", "computedValue": "#8ecdff", "description": "Subtle secondary border in the informational message.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-border-info-active", @@ -743,20 +525,7 @@ "rawValue": "{blue.500}", "computedValue": "#006dca", "description": "Active border in focused input filed.", - "components": [ - "base-trigger", - "bulk-textarea", - "checkbox", - "color-picker", - "feedback-form", - "inline-input", - "input", - "input-tags", - "pills", - "radio", - "tab-line", - "textarea" - ] + "components": [] }, { "name": "--intergalactic-border-success", @@ -764,9 +533,7 @@ "rawValue": "{green.200}", "computedValue": "#59ddaa", "description": "Subtle secondary border in the successful message and input field.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-border-success-active", @@ -774,13 +541,7 @@ "rawValue": "{green.500}", "computedValue": "#007c65", "description": "Active border in the focused input field with valid state.", - "components": [ - "base-trigger", - "bulk-textarea", - "inline-input", - "input", - "textarea" - ] + "components": [] }, { "name": "--intergalactic-border-critical", @@ -788,9 +549,7 @@ "rawValue": "{red.200}", "computedValue": "#ffaeb5", "description": "Subtle secondary border in the critical message and invalid input field.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-border-critical-active", @@ -798,16 +557,7 @@ "rawValue": "{red.500}", "computedValue": "#d1002f", "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state.", - "components": [ - "base-trigger", - "bulk-textarea", - "checkbox", - "inline-input", - "input", - "radio", - "textarea", - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-border-warning", @@ -815,9 +565,7 @@ "rawValue": "{orange.200}", "computedValue": "#ffb26e", "description": "Subtle secondary border in the warning message.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-border-warning-active", @@ -833,11 +581,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background.", - "components": [ - "button", - "divider", - "spin" - ] + "components": [] }, { "name": "--intergalactic-border-secondary-invert", @@ -853,9 +597,7 @@ "rawValue": "{gray.500}", "computedValue": "#6c6e79", "description": "Border of the Tooltip with dark theme.", - "components": [ - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-border-table-accent", @@ -863,9 +605,7 @@ "rawValue": "{gray.300}", "computedValue": "#a9abb6", "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-border-date-picker-range-comparison", @@ -881,12 +621,7 @@ "rawValue": "repeating-linear-gradient(315deg, rgba($border.critical-active, 1) 0, rgba($border.critical-active, 1) 2px, transparent 0, transparent 50%)", "computedValue": "repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%)", "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.", - "components": [ - "base-components", - "bulk-textarea", - "radio", - "textarea" - ] + "components": [] }, { "name": "--intergalactic-control-switch-bg", @@ -894,9 +629,7 @@ "rawValue": "{gray.300}", "computedValue": "#a9abb6", "description": "Subtle background of the Switch control.", - "components": [ - "switch" - ] + "components": [] }, { "name": "--intergalactic-control-primary-info", @@ -904,16 +637,7 @@ "rawValue": "{blue.400}", "computedValue": "#008ff8", "description": "Background of the regular primary control.", - "components": [ - "button", - "checkbox", - "dropdown", - "feature-highlight", - "radio", - "select", - "slider", - "switch" - ] + "components": [] }, { "name": "--intergalactic-control-primary-info-hover", @@ -921,10 +645,7 @@ "rawValue": "{blue.500}", "computedValue": "#006dca", "description": "Hover state of the regular primary control.", - "components": [ - "button", - "slider" - ] + "components": [] }, { "name": "--intergalactic-control-primary-info-active", @@ -932,9 +653,7 @@ "rawValue": "{blue.600}", "computedValue": "#044792", "description": "Active (selected) state of the regular primary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-success", @@ -942,10 +661,7 @@ "rawValue": "{green.400}", "computedValue": "#009f81", "description": "Background of the primary control with successful theme.", - "components": [ - "button", - "switch" - ] + "components": [] }, { "name": "--intergalactic-control-primary-success-hover", @@ -953,9 +669,7 @@ "rawValue": "{green.500}", "computedValue": "#007c65", "description": "Hover state of the primary control with successful theme.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-success-active", @@ -963,9 +677,7 @@ "rawValue": "{green.600}", "computedValue": "#055345", "description": "Active (selected) state of the primary control with successful theme.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-critical", @@ -973,10 +685,7 @@ "rawValue": "{red.400}", "computedValue": "#ff4953", "description": "Background of the primary control with danger theme.", - "components": [ - "button", - "checkbox" - ] + "components": [] }, { "name": "--intergalactic-control-primary-critical-hover", @@ -984,9 +693,7 @@ "rawValue": "{red.500}", "computedValue": "#d1002f", "description": "Hover state of the primary control with danger theme.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-critical-active", @@ -994,9 +701,7 @@ "rawValue": "{red.600}", "computedValue": "#8e0016", "description": "Active (selected) state of the primary control with danger theme.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-brand", @@ -1004,9 +709,7 @@ "rawValue": "{orange.400}", "computedValue": "#ff642d", "description": "Background of the primary brand colored control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-brand-hover", @@ -1014,9 +717,7 @@ "rawValue": "{orange.500}", "computedValue": "#c33909", "description": "Hover state of the primary brand colored control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-brand-active", @@ -1024,9 +725,7 @@ "rawValue": "{orange.600}", "computedValue": "#8b1500", "description": "Active state of the primary brand colored control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-advertising", @@ -1034,9 +733,7 @@ "rawValue": "{violet.600}", "computedValue": "#5925ab", "description": "Background of the advertising primary control.", - "components": [ - "wizard" - ] + "components": [] }, { "name": "--intergalactic-control-primary-advertising-hover", @@ -1044,9 +741,7 @@ "rawValue": "{violet.700}", "computedValue": "#421983", "description": "Hover state of the advertising primary control.", - "components": [ - "wizard" - ] + "components": [] }, { "name": "--intergalactic-control-primary-advertising-active", @@ -1054,9 +749,7 @@ "rawValue": "{violet.500}", "computedValue": "#8649e1", "description": "Active (selected) state of the advertising primary control.", - "components": [ - "wizard" - ] + "components": [] }, { "name": "--intergalactic-control-primary-invert", @@ -1064,9 +757,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Inverted background of the primary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-invert-hover", @@ -1074,9 +765,7 @@ "rawValue": "{gray.50}", "computedValue": "#f4f5f9", "description": "Hover state of the inverted primary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-primary-invert-active", @@ -1084,9 +773,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Active (selected) state of the inverted primary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-neutral", @@ -1094,9 +781,7 @@ "rawValue": "rgba({gray.400}, 0.1)", "computedValue": "rgba(138, 142, 155, 0.1)", "description": "Background of the regular secondary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-neutral-hover", @@ -1104,9 +789,7 @@ "rawValue": "rgba({gray.400}, 0.2)", "computedValue": "rgba(138, 142, 155, 0.2)", "description": "Hover state of the regular secondary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-neutral-active", @@ -1114,9 +797,7 @@ "rawValue": "rgba({gray.400}, 0.3)", "computedValue": "rgba(138, 142, 155, 0.3)", "description": "Active (selected) state of the regular secondary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-info", @@ -1124,11 +805,7 @@ "rawValue": "rgba({blue.400}, 0.1)", "computedValue": "rgba(0, 143, 248, 0.1)", "description": "Background of the accent secondary control.", - "components": [ - "base-trigger", - "button", - "pills" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-info-hover", @@ -1136,10 +813,7 @@ "rawValue": "rgba({blue.400}, 0.2)", "computedValue": "rgba(0, 143, 248, 0.2)", "description": "Hover state of the accent secondary control.", - "components": [ - "base-trigger", - "button" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-info-active", @@ -1147,10 +821,7 @@ "rawValue": "rgba({blue.400}, 0.3)", "computedValue": "rgba(0, 143, 248, 0.3)", "description": "Active (selected) state of the accent secondary control.", - "components": [ - "base-trigger", - "button" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-invert", @@ -1158,9 +829,7 @@ "rawValue": "rgba({gray.white}, 0.05)", "computedValue": "rgba(255, 255, 255, 0.05)", "description": "Background of the inverted version of the secondary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-invert-hover", @@ -1168,9 +837,7 @@ "rawValue": "rgba({gray.white}, 0.1)", "computedValue": "rgba(255, 255, 255, 0.1)", "description": "Hover state of the inverted version of the secondary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-invert-active", @@ -1178,9 +845,7 @@ "rawValue": "rgba({gray.white}, 0.3)", "computedValue": "rgba(255, 255, 255, 0.3)", "description": "Active (selected) state of the inverted version of the secondary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-neutral", @@ -1188,9 +853,7 @@ "rawValue": "rgba({gray.400}, 0)", "computedValue": "rgba(138, 142, 155, 0)", "description": "Background of the regular tertiary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-neutral-hover", @@ -1198,10 +861,7 @@ "rawValue": "rgba({gray.400}, 0.2)", "computedValue": "rgba(138, 142, 155, 0.2)", "description": "Hover state of the regular tertiary control.", - "components": [ - "button", - "color-picker" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-neutral-active", @@ -1209,10 +869,7 @@ "rawValue": "rgba({gray.400}, 0.3)", "computedValue": "rgba(138, 142, 155, 0.3)", "description": "Active (selected) state of the regular tertiary control.", - "components": [ - "button", - "color-picker" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-info", @@ -1220,9 +877,7 @@ "rawValue": "rgba({blue.400}, 0)", "computedValue": "rgba(0, 143, 248, 0)", "description": "Background of the accent and link-lookalike tertiary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-info-hover", @@ -1230,9 +885,7 @@ "rawValue": "rgba({blue.400}, 0.2)", "computedValue": "rgba(0, 143, 248, 0.2)", "description": "Hover state of the accent and link-lookalike tertiary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-info-active", @@ -1240,9 +893,7 @@ "rawValue": "rgba({blue.400}, 0.3)", "computedValue": "rgba(0, 143, 248, 0.3)", "description": "Active (selected) state of the accent and link-lookalike tertiary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-invert", @@ -1250,9 +901,7 @@ "rawValue": "rgba({gray.white}, 0)", "computedValue": "rgba(255, 255, 255, 0)", "description": "Background of the inverted version of the tertiary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-invert-hover", @@ -1260,9 +909,7 @@ "rawValue": "rgba({gray.white}, 0.1)", "computedValue": "rgba(255, 255, 255, 0.1)", "description": "Hover state of the inverted version of the tertiary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-control-tertiary-invert-active", @@ -1270,9 +917,7 @@ "rawValue": "rgba({gray.white}, 0.3)", "computedValue": "rgba(255, 255, 255, 0.3)", "description": "Active (selected) state of the inverted version of the tertiary control.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-neutral", @@ -1280,17 +925,7 @@ "rawValue": "{gray.500}", "computedValue": "#6c6e79", "description": "Primary neutral icon.", - "components": [ - "accordion", - "base-trigger", - "carousel", - "drag-and-drop", - "feature-highlight", - "format-text", - "fullscreen-modal", - "notice", - "typography" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-neutral-hover-active", @@ -1298,11 +933,7 @@ "rawValue": "#565861", "computedValue": "#565861", "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.", - "components": [ - "feature-highlight", - "fullscreen-modal", - "notice" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-info", @@ -1326,9 +957,7 @@ "rawValue": "{green.400}", "computedValue": "#009f81", "description": "Primary success icon.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-success-hover-active", @@ -1336,9 +965,7 @@ "rawValue": "#037E68", "computedValue": "#037E68", "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-critical", @@ -1346,9 +973,7 @@ "rawValue": "{red.400}", "computedValue": "#ff4953", "description": "Primary critical icon.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-critical-hover-active", @@ -1356,9 +981,7 @@ "rawValue": "#CC3A42", "computedValue": "#CC3A42", "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-warning", @@ -1366,10 +989,7 @@ "rawValue": "{orange.400}", "computedValue": "#ff642d", "description": "Primary warning icon.", - "components": [ - "dot", - "notice" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-warning-hover-active", @@ -1377,9 +997,7 @@ "rawValue": "#CC5024", "computedValue": "#CC5024", "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color.", - "components": [ - "notice" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-invert", @@ -1387,9 +1005,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Inverted version of the primary icon.", - "components": [ - "carousel" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-invert-hover-active", @@ -1405,16 +1021,7 @@ "rawValue": "{gray.300}", "computedValue": "#a9abb6", "description": "Secondary neutral icon.", - "components": [ - "breadcrumbs", - "carousel", - "format-text", - "inline-input", - "input", - "input-number", - "switch", - "typography" - ] + "components": [] }, { "name": "--intergalactic-icon-secondary-neutral-hover-active", @@ -1422,12 +1029,7 @@ "rawValue": "#878992", "computedValue": "#878992", "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.", - "components": [ - "data-table", - "inline-input", - "input", - "input-number" - ] + "components": [] }, { "name": "--intergalactic-icon-secondary-info", @@ -1451,9 +1053,7 @@ "rawValue": "{green.300}", "computedValue": "#00c192", "description": "Secondary success icon.", - "components": [ - "inline-input" - ] + "components": [] }, { "name": "--intergalactic-icon-secondary-success-hover-active", @@ -1461,9 +1061,7 @@ "rawValue": "#049B75", "computedValue": "#049B75", "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color.", - "components": [ - "inline-input" - ] + "components": [] }, { "name": "--intergalactic-icon-secondary-critical", @@ -1575,9 +1173,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Default date-picker cell background.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-date-picker-cell-current", @@ -1585,9 +1181,7 @@ "rawValue": "{gray.400}", "computedValue": "#8a8e9b", "description": "Color for marking the cell with the current date, month or year in the date-picker.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-date-picker-cell-hover", @@ -1595,9 +1189,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Hover state of the default date-picker cell background.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-date-picker-cell-range", @@ -1605,9 +1197,7 @@ "rawValue": "{blue.100}", "computedValue": "#c4e5fe", "description": "Background for the cell which is included in the date range in the date-picker.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-date-picker-cell-range-hover", @@ -1615,9 +1205,7 @@ "rawValue": "{blue.200}", "computedValue": "#8ecdff", "description": "Hover state of the background for the cell which is included in the date range in the date-picker.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-date-picker-cell-active", @@ -1625,9 +1213,7 @@ "rawValue": "{blue.300}", "computedValue": "#2bb3ff", "description": "Active (selected) date-picker cell background.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-date-picker-cell-active-hover", @@ -1635,9 +1221,7 @@ "rawValue": "{blue.400}", "computedValue": "#008ff8", "description": "Hover for the active (selected) date-picker cell background.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-date-picker-cell-current-invert", @@ -1653,9 +1237,7 @@ "rawValue": "{violet.500}", "computedValue": "#8649e1", "description": "Active (selected) date-picker cell background for comparison periods.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-date-picker-cell-comparison-active-hover", @@ -1663,9 +1245,7 @@ "rawValue": "{violet.600}", "computedValue": "#5925ab", "description": "Hover for the active (selected) date-picker cell background for comparison periods.", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-dropdown-menu-item", @@ -1673,9 +1253,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Default background color for the list item in the dropdown-menu.", - "components": [ - "dropdown" - ] + "components": [] }, { "name": "--intergalactic-dropdown-menu-item-hover", @@ -1683,9 +1261,7 @@ "rawValue": "{gray.50}", "computedValue": "#f4f5f9", "description": "Hover state of the default background color for the list item in the dropdown-menu.", - "components": [ - "dropdown" - ] + "components": [] }, { "name": "--intergalactic-dropdown-menu-item-selected", @@ -1693,10 +1269,7 @@ "rawValue": "rgba({blue.100}, 0.7)", "computedValue": "rgba(196, 229, 254, 0.7)", "description": "Active (selected) state of the default background color for the list item in the dropdown-menu.", - "components": [ - "dropdown", - "select" - ] + "components": [] }, { "name": "--intergalactic-dropdown-menu-item-selected-hover", @@ -1704,10 +1277,7 @@ "rawValue": "{blue.100}", "computedValue": "#c4e5fe", "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu.", - "components": [ - "dropdown", - "select" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-bg", @@ -1715,9 +1285,7 @@ "rawValue": "{bg.primary.highlight}", "computedValue": "#fce081", "description": "Color of the FeaturePopover background with accent theme.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-dot-outer-border", @@ -1725,9 +1293,7 @@ "rawValue": "{feature-popover.bg}", "computedValue": "#fce081", "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-bg-neutral", @@ -1735,9 +1301,7 @@ "rawValue": "{violet.dusty.800}", "computedValue": "#1D113E", "description": "Color of the FeaturePopover background with neutral theme.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-dot-neutral", @@ -1745,9 +1309,7 @@ "rawValue": "{green.300}", "computedValue": "#00c192", "description": "Color of the FeaturePopover.Spot for FeaturePopover with neutral theme.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-dot-neutral-outer-border", @@ -1755,9 +1317,7 @@ "rawValue": "{feature-popover.dot-neutral}", "computedValue": "#00c192", "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-progress-bar-bg", @@ -1765,9 +1325,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Background color of the ProgressBar.", - "components": [ - "progress-bar" - ] + "components": [] }, { "name": "--intergalactic-progress-bar-bg-hover", @@ -1783,9 +1341,7 @@ "rawValue": "rgba({gray.white}, 0.2)", "computedValue": "rgba(255, 255, 255, 0.2)", "description": "Inverted version of the background color of the ProgressBar.", - "components": [ - "progress-bar" - ] + "components": [] }, { "name": "--intergalactic-progress-bar-bg-invert-hover", @@ -1801,9 +1357,7 @@ "rawValue": "linear-gradient(-45deg, rgba(0, 159, 129, 0.9) 25%, rgba(0, 159, 129, 1) 0%, rgba(0, 159, 129, 1) 50%, rgba(0, 159, 129, 0.9) 0%, rgba(0, 159, 129, 0.9) 75%, rgba(0, 159, 129, 1) 0%)", "computedValue": "linear-gradient(-45deg, rgba(0, 159, 129, 0.9) 25%, rgba(0, 159, 129, 1) 0%, rgba(0, 159, 129, 1) 50%, rgba(0, 159, 129, 0.9) 0%, rgba(0, 159, 129, 0.9) 75%, rgba(0, 159, 129, 1) 0%)", "description": "Value with gradient for the ProgressBar.", - "components": [ - "progress-bar" - ] + "components": [] }, { "name": "--intergalactic-progress-bar-pattern-gradient", @@ -1811,9 +1365,7 @@ "rawValue": "linear-gradient(-45deg, rgba(224, 225, 233, 0.9) 25%, rgba(224, 225, 233, 1) 0%, rgba(224, 225, 233, 1) 50%, rgba(224, 225, 233, 0.9) 0%, rgba(224, 225, 233, 0.9) 75%, rgba(224, 225, 233, 1) 0%)", "computedValue": "linear-gradient(-45deg, rgba(224, 225, 233, 0.9) 25%, rgba(224, 225, 233, 1) 0%, rgba(224, 225, 233, 1) 50%, rgba(224, 225, 233, 0.9) 0%, rgba(224, 225, 233, 0.9) 75%, rgba(224, 225, 233, 1) 0%)", "description": "Null value gradient for the ProgressBar.", - "components": [ - "progress-bar" - ] + "components": [] }, { "name": "--intergalactic-progress-bar-value-bg", @@ -1821,9 +1373,7 @@ "rawValue": "#000000", "computedValue": "#000000", "description": "Base value background for the ProgressBar. It is used to create gradients for the values.", - "components": [ - "progress-bar" - ] + "components": [] }, { "name": "--intergalactic-skeleton-bg", @@ -1831,9 +1381,7 @@ "rawValue": "rgba({gray.100}, 0.8)", "computedValue": "rgba(224, 225, 233, 0.8)", "description": "Default color for the Skeleton.", - "components": [ - "skeleton" - ] + "components": [] }, { "name": "--intergalactic-skeleton-bg-invert", @@ -1841,9 +1389,7 @@ "rawValue": "rgba({gray.white}, 0.3)", "computedValue": "rgba(255, 255, 255, 0.3)", "description": "Inverted version of the default color for the Skeleton.", - "components": [ - "skeleton" - ] + "components": [] }, { "name": "--intergalactic-slider-rating-normal", @@ -1851,9 +1397,7 @@ "rawValue": "{icon.secondary.neutral}", "computedValue": "#a9abb6", "description": "Icon color for the SliderRating component in its normal state.", - "components": [ - "feedback-form" - ] + "components": [] }, { "name": "--intergalactic-slider-rating-hover-active", @@ -1861,9 +1405,7 @@ "rawValue": "{yellow.200}", "computedValue": "#fdc23c", "description": "Icon color for the SliderRating component in its hovered and active states.", - "components": [ - "feedback-form" - ] + "components": [] }, { "name": "--intergalactic-table-th-primary-cell", @@ -1871,9 +1413,7 @@ "rawValue": "{gray.50}", "computedValue": "#f4f5f9", "description": "Background of the header cell in the primary Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-th-primary-cell-hover", @@ -1881,9 +1421,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Background of the hovered header cell in the primary Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-th-primary-cell-active", @@ -1899,9 +1437,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Background of the header cell in the secondary Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-th-gradient", @@ -1925,9 +1461,7 @@ "rawValue": "{gray.100} / lighten(0.5) / hsl", "computedValue": "#f0f0f4", "description": "Background of the default hovered cell in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-active", @@ -1935,9 +1469,7 @@ "rawValue": "{gray.100} / lighten(0.2) / hsl", "computedValue": "#e6e7ed", "description": "Background of the default active cell in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-unread", @@ -1945,9 +1477,7 @@ "rawValue": "{gray.50}", "computedValue": "#f4f5f9", "description": "Background of the unread cell in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-accordion", @@ -1955,9 +1485,7 @@ "rawValue": "{gray.50}", "computedValue": "#f4f5f9", "description": "Background of the cell inside an Accordion in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-selected", @@ -1965,9 +1493,7 @@ "rawValue": "{blue.50}", "computedValue": "#e9f7ff", "description": "Background of the selected cell in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-selected-hover", @@ -1975,9 +1501,7 @@ "rawValue": "{blue.100}", "computedValue": "#c4e5fe", "description": "Background of the hovered selected cell in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-selected-active", @@ -1985,9 +1509,7 @@ "rawValue": "{blue.100}", "computedValue": "#c4e5fe", "description": "Background of the active selected cell in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-new", @@ -1995,9 +1517,7 @@ "rawValue": "{green.50}", "computedValue": "#dbfee8", "description": "Background of the cell with new information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-new-hover", @@ -2005,9 +1525,7 @@ "rawValue": "{green.100}", "computedValue": "#9ef2c9", "description": "Background of the hovered cell with new information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-new-active", @@ -2015,9 +1533,7 @@ "rawValue": "{green.100}", "computedValue": "#9ef2c9", "description": "Background of the active cell with new information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-critical", @@ -2025,9 +1541,7 @@ "rawValue": "{red.50}", "computedValue": "#fff0f7", "description": "Background of the cell with critical information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-critical-hover", @@ -2035,9 +1549,7 @@ "rawValue": "{red.100}", "computedValue": "#ffd7df", "description": "Background of the hovered cell with critical information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-critical-active", @@ -2045,9 +1557,7 @@ "rawValue": "{red.100}", "computedValue": "#ffd7df", "description": "Background of the active cell with critical information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-warning", @@ -2055,9 +1565,7 @@ "rawValue": "{orange.50}", "computedValue": "#fff3d9", "description": "Background of the cell with warning information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-warning-hover", @@ -2065,9 +1573,7 @@ "rawValue": "{orange.100}", "computedValue": "#ffdca2", "description": "Background of the hovered cell with warning information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell-warning-active", @@ -2075,9 +1581,7 @@ "rawValue": "{orange.100}", "computedValue": "#ffdca2", "description": "Background of the active cell with warning information in the Table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-brand-primary", @@ -2173,9 +1677,7 @@ "rawValue": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 1px 2px 0px rgba({gray.800}, 0.12)", "computedValue": "0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12)", "description": "Default shadow of the Card.", - "components": [ - "card" - ] + "components": [] }, { "name": "--intergalactic-box-shadow-card-hover", @@ -2191,9 +1693,7 @@ "rawValue": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 12px 40px 0px rgba({gray.800}, 0.16)", "computedValue": "0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 12px 40px 0px rgba(25, 27, 35, 0.16)", "description": "Shadow for show that element are being drag-and-drop.", - "components": [ - "drag-and-drop" - ] + "components": [] }, { "name": "--intergalactic-box-shadow-modal", @@ -2201,9 +1701,7 @@ "rawValue": "0px 3px 8px 0px rgba({gray.800}, 0.2)", "computedValue": "0px 3px 8px 0px rgba(25, 27, 35, 0.2)", "description": "Default shadow if the Modal window.", - "components": [ - "modal" - ] + "components": [] }, { "name": "--intergalactic-box-shadow-popper", @@ -2211,13 +1709,7 @@ "rawValue": "0px 1px 12px 0px rgba({gray.800}, 0.15)", "computedValue": "0px 1px 12px 0px rgba(25, 27, 35, 0.15)", "description": "Default shadow of all Poppers, Dropdowns and Tooltips.", - "components": [ - "d3-chart", - "dropdown", - "feature-popover", - "side-panel", - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-keyboard-focus-outline", @@ -2233,15 +1725,7 @@ "rawValue": "{red.400}", "computedValue": "#ff4953", "description": "Color for keyboard focus outline styles for elements with invalid state.", - "components": [ - "base-trigger", - "bulk-textarea", - "checkbox", - "inline-input", - "input", - "radio", - "textarea" - ] + "components": [] }, { "name": "--intergalactic-keyboard-focus-invalid", @@ -2257,12 +1741,7 @@ "rawValue": "{green.400}", "computedValue": "#009f81", "description": "Color for keyboard focus outline styles for elements with valid state.", - "components": [ - "bulk-textarea", - "inline-input", - "input", - "textarea" - ] + "components": [] }, { "name": "--intergalactic-keyboard-focus-valid", @@ -2278,11 +1757,7 @@ "rawValue": "rgba({gray.white}, 0.8)", "computedValue": "rgba(255, 255, 255, 0.8)", "description": "Color for keyboard focus outline styles to use on the dark and color background.", - "components": [ - "base-components", - "carousel", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-keyboard-focus-invert", @@ -2298,10 +1773,7 @@ "rawValue": "0px 0px 0px 3px rgba({keyboard-focus.outline}, 0.5)", "computedValue": "0px 0px 0px 3px rgba(0, 143, 248, 0.5)", "description": "Default keyboard focus box-shadow styles.", - "components": [ - "input-tags", - "tag" - ] + "components": [] }, { "name": "--intergalactic-base", @@ -2317,11 +1789,7 @@ "rawValue": "117%", "computedValue": "117%", "description": "Use with font-size-800.", - "components": [ - "button", - "format-text", - "typography" - ] + "components": [] }, { "name": "--intergalactic-lh-700", @@ -2329,12 +1797,7 @@ "rawValue": "110%", "computedValue": "110%", "description": "Use with font-size-700.", - "components": [ - "button", - "errors", - "format-text", - "typography" - ] + "components": [] }, { "name": "--intergalactic-lh-600", @@ -2342,11 +1805,7 @@ "rawValue": "125%", "computedValue": "125%", "description": "Use with font-size-600.", - "components": [ - "button", - "format-text", - "typography" - ] + "components": [] }, { "name": "--intergalactic-lh-500", @@ -2354,13 +1813,7 @@ "rawValue": "117%", "computedValue": "117%", "description": "Use with font-size-500.", - "components": [ - "button", - "format-text", - "fullscreen-modal", - "modal", - "typography" - ] + "components": [] }, { "name": "--intergalactic-lh-400", @@ -2368,12 +1821,7 @@ "rawValue": "120%", "computedValue": "120%", "description": "Use with font-size-400.", - "components": [ - "button", - "format-text", - "product-head", - "typography" - ] + "components": [] }, { "name": "--intergalactic-lh-300", @@ -2381,27 +1829,7 @@ "rawValue": "150%", "computedValue": "150%", "description": "Use with font-size-300.", - "components": [ - "bulk-textarea", - "button", - "card", - "checkbox", - "d3-chart", - "dropdown", - "errors", - "feedback-form", - "format-text", - "pagination", - "radio", - "side-panel", - "switch", - "tab-line", - "tag", - "textarea", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-lh-200", @@ -2409,34 +1837,7 @@ "rawValue": "142%", "computedValue": "142%", "description": "Use with font-size-200.", - "components": [ - "base-trigger", - "breadcrumbs", - "bulk-textarea", - "button", - "checkbox", - "d3-chart", - "data-table", - "dropdown", - "format-text", - "fullscreen-modal", - "notice", - "notice-bubble", - "notice-global", - "pagination", - "product-head", - "radio", - "slider", - "switch", - "tab-line", - "tab-panel", - "tag", - "textarea", - "tooltip", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-lh-100", @@ -2444,16 +1845,7 @@ "rawValue": "133%", "computedValue": "133%", "description": "Use with font-size-100.", - "components": [ - "button", - "d3-chart", - "data-table", - "format-text", - "fullscreen-modal", - "switch", - "tag", - "typography" - ] + "components": [] }, { "name": "--intergalactic-semi-bold", @@ -2461,12 +1853,7 @@ "rawValue": "600", "computedValue": "600", "description": "Semi-bold font weight.", - "components": [ - "errors", - "modal", - "product-head", - "typography" - ] + "components": [] }, { "name": "--intergalactic-bold", @@ -2474,19 +1861,7 @@ "rawValue": "700", "computedValue": "700", "description": "Bold font weight.", - "components": [ - "card", - "color-picker", - "dropdown", - "feedback-form", - "flags", - "format-text", - "fullscreen-modal", - "side-panel", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-regular", @@ -2494,12 +1869,7 @@ "rawValue": "400", "computedValue": "400", "description": "Regular font weight.", - "components": [ - "accordion", - "base-trigger", - "date-picker", - "slider" - ] + "components": [] }, { "name": "--intergalactic-medium", @@ -2507,17 +1877,7 @@ "rawValue": "500", "computedValue": "500", "description": "Medium font weight.", - "components": [ - "badge", - "button", - "counter", - "format-text", - "tab-line", - "tab-panel", - "tag", - "time-picker", - "typography" - ] + "components": [] }, { "name": "--intergalactic-fs-50", @@ -2525,12 +1885,7 @@ "rawValue": "10px", "computedValue": "10px", "description": "Use only for text in Badge component.", - "components": [ - "badge", - "counter", - "d3-chart", - "dot" - ] + "components": [] }, { "name": "--intergalactic-fs-100", @@ -2538,148 +1893,56 @@ "rawValue": "12px", "computedValue": "12px", "description": "Use this font-size with caution for text in some additional messages. Always check its contrast and readability.", - "components": [ - "button", - "counter", - "d3-chart", - "data-table", - "format-text", - "fullscreen-modal", - "switch", - "tag", - "typography" - ] + "components": [] }, { "name": "--intergalactic-fs-200", "type": "fontSizes", "rawValue": "14px", "computedValue": "14px", - "components": [ - "badge", - "base-trigger", - "breadcrumbs", - "bulk-textarea", - "button", - "card", - "checkbox", - "counter", - "d3-chart", - "data-table", - "date-picker", - "dropdown", - "format-text", - "fullscreen-modal", - "input", - "notice", - "notice-bubble", - "notice-global", - "pagination", - "pills", - "product-head", - "radio", - "slider", - "switch", - "tab-line", - "tab-panel", - "tag", - "textarea", - "time-picker", - "tooltip", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-fs-300", "type": "fontSizes", "rawValue": "16px", "computedValue": "16px", - "components": [ - "base-trigger", - "bulk-textarea", - "button", - "card", - "checkbox", - "d3-chart", - "dropdown", - "errors", - "feedback-form", - "format-text", - "input", - "pagination", - "pills", - "radio", - "side-panel", - "switch", - "tab-line", - "tag", - "textarea", - "time-picker", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-fs-400", "type": "fontSizes", "rawValue": "20px", "computedValue": "20px", - "components": [ - "button", - "format-text", - "product-head", - "typography" - ] + "components": [] }, { "name": "--intergalactic-fs-500", "type": "fontSizes", "rawValue": "24px", "computedValue": "24px", - "components": [ - "button", - "format-text", - "fullscreen-modal", - "modal", - "typography" - ] + "components": [] }, { "name": "--intergalactic-fs-600", "type": "fontSizes", "rawValue": "32px", "computedValue": "32px", - "components": [ - "button", - "format-text", - "typography" - ] + "components": [] }, { "name": "--intergalactic-fs-700", "type": "fontSizes", "rawValue": "36px", "computedValue": "36px", - "components": [ - "button", - "errors", - "format-text", - "typography" - ] + "components": [] }, { "name": "--intergalactic-fs-800", "type": "fontSizes", "rawValue": "48px", "computedValue": "48px", - "components": [ - "button", - "format-text", - "typography" - ] + "components": [] }, { "name": "--intergalactic-compact", @@ -2703,9 +1966,7 @@ "rawValue": "{scale-indent}*5", "computedValue": "20px", "description": "Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions.", - "components": [ - "button" - ] + "components": [] }, { "name": "--intergalactic-form-control-m", @@ -2713,14 +1974,7 @@ "rawValue": "{scale-indent}*7", "computedValue": "28px", "description": "Default size of the controls.", - "components": [ - "button", - "input", - "input-tags", - "notice", - "pills", - "time-picker" - ] + "components": [] }, { "name": "--intergalactic-form-control-l", @@ -2728,13 +1982,7 @@ "rawValue": "{scale-indent}*10", "computedValue": "40px", "description": "Large size of the controls.", - "components": [ - "button", - "input", - "input-tags", - "pills", - "time-picker" - ] + "components": [] }, { "name": "--intergalactic-spacing-05x", @@ -2742,24 +1990,7 @@ "rawValue": "{scale-indent}*0.5", "computedValue": "2px", "description": "2px", - "components": [ - "accordion", - "base-trigger", - "bulk-textarea", - "checkbox", - "counter", - "data-table", - "dropdown", - "format-text", - "input-tags", - "link", - "notice", - "radio", - "select", - "slider", - "tag", - "typography" - ] + "components": [] }, { "name": "--intergalactic-spacing-1x", @@ -2767,37 +1998,7 @@ "rawValue": "{scale-indent}*1", "computedValue": "4px", "description": "4px", - "components": [ - "badge", - "base-components", - "base-trigger", - "bulk-textarea", - "button", - "card", - "carousel", - "color-picker", - "counter", - "d3-chart", - "data-table", - "dropdown", - "dropdown-menu", - "feature-popover", - "format-text", - "fullscreen-modal", - "inline-input", - "input-tags", - "link", - "notice", - "notice-bubble", - "pagination", - "product-head", - "side-panel", - "tag", - "textarea", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-spacing-2x", @@ -2805,47 +2006,7 @@ "rawValue": "{scale-indent}*2", "computedValue": "8px", "description": "8px", - "components": [ - "accordion", - "base-components", - "base-trigger", - "breadcrumbs", - "bulk-textarea", - "button", - "card", - "carousel", - "checkbox", - "d3-chart", - "data-table", - "date-picker", - "dropdown", - "feature-popover", - "feedback-form", - "format-text", - "fullscreen-modal", - "input", - "input-tags", - "modal", - "notice", - "notice-bubble", - "notice-global", - "pagination", - "pills", - "product-head", - "radio", - "select", - "side-panel", - "slider", - "switch", - "tab-line", - "tab-panel", - "tag", - "textarea", - "time-picker", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-spacing-3x", @@ -2853,35 +2014,7 @@ "rawValue": "{scale-indent}*3", "computedValue": "12px", "description": "12px", - "components": [ - "accordion", - "base-trigger", - "bulk-textarea", - "button", - "carousel", - "color-picker", - "d3-chart", - "data-table", - "date-picker", - "dropdown", - "errors", - "feedback-form", - "format-text", - "fullscreen-modal", - "input", - "modal", - "notice", - "notice-bubble", - "pagination", - "pills", - "side-panel", - "textarea", - "time-picker", - "tooltip", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-spacing-4x", @@ -2889,27 +2022,7 @@ "rawValue": "{scale-indent}*4", "computedValue": "16px", "description": "16px", - "components": [ - "bulk-textarea", - "carousel", - "color-picker", - "data-table", - "date-picker", - "errors", - "feature-popover", - "feedback-form", - "format-text", - "modal", - "notice", - "notice-global", - "pagination", - "product-head", - "side-panel", - "tab-line", - "typography", - "widget-empty", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-spacing-5x", @@ -2917,19 +2030,7 @@ "rawValue": "{scale-indent}*5", "computedValue": "20px", "description": "20px", - "components": [ - "bulk-textarea", - "card", - "data-table", - "errors", - "format-text", - "notice-bubble", - "pagination", - "product-head", - "slider", - "typography", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-spacing-6x", @@ -2937,16 +2038,7 @@ "rawValue": "{scale-indent}*6", "computedValue": "24px", "description": "24px", - "components": [ - "bulk-textarea", - "errors", - "format-text", - "fullscreen-modal", - "notice-bubble", - "product-head", - "side-panel", - "typography" - ] + "components": [] }, { "name": "--intergalactic-spacing-8x", @@ -2954,15 +2046,7 @@ "rawValue": "{scale-indent}*8", "computedValue": "32px", "description": "32px", - "components": [ - "bulk-textarea", - "errors", - "format-text", - "fullscreen-modal", - "notice-bubble", - "notice-global", - "typography" - ] + "components": [] }, { "name": "--intergalactic-spacing-10x", @@ -2970,16 +2054,7 @@ "rawValue": "{scale-indent}*10", "computedValue": "40px", "description": "40px", - "components": [ - "bulk-textarea", - "errors", - "feature-popover", - "feedback-form", - "fullscreen-modal", - "modal", - "side-panel", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-spacing-14x", @@ -2995,10 +2070,7 @@ "rawValue": "{scale-indent}*20", "computedValue": "80px", "description": "80px", - "components": [ - "errors", - "fullscreen-modal" - ] + "components": [] }, { "name": "--intergalactic-spacing-24x", @@ -3028,19 +2100,14 @@ "type": "borderRadius", "rawValue": "4px", "computedValue": "4px", - "components": [ - "checkbox" - ] + "components": [] }, { "name": "--intergalactic-rounded-medium", "type": "borderRadius", "rawValue": "6px", "computedValue": "6px", - "components": [ - "d3-chart", - "feedback-form" - ] + "components": [] }, { "name": "--intergalactic-rounded-large", @@ -3062,13 +2129,7 @@ "rawValue": "{rounded-small}", "computedValue": "4px", "description": "Use for rounding addons and small controls like Checkbox.", - "components": [ - "button", - "checkbox", - "dropdown", - "feature-highlight", - "select" - ] + "components": [] }, { "name": "--intergalactic-badge-rounded", @@ -3076,9 +2137,7 @@ "rawValue": "{rounded-medium}", "computedValue": "6px", "description": "Use for rounding Badge.", - "components": [ - "badge" - ] + "components": [] }, { "name": "--intergalactic-chart-rounded", @@ -3086,9 +2145,7 @@ "rawValue": "{rounded-extra-small}", "computedValue": "2px", "description": "Use for rounding big and small charts like bar, histogram and others.", - "components": [ - "mini-chart" - ] + "components": [] }, { "name": "--intergalactic-counter-rounded", @@ -3096,10 +2153,7 @@ "rawValue": "{rounded-large}", "computedValue": "12px", "description": "Use for rounding Counter.", - "components": [ - "counter", - "dot" - ] + "components": [] }, { "name": "--intergalactic-tag-rounded", @@ -3107,9 +2161,7 @@ "rawValue": "{rounded-extra-large}", "computedValue": "24px", "description": "Use for rounding Tag.", - "components": [ - "tag" - ] + "components": [] }, { "name": "--intergalactic-switch-rounded", @@ -3117,9 +2169,7 @@ "rawValue": "{rounded-extra-large}", "computedValue": "24px", "description": "Use for rounding Switch.", - "components": [ - "switch" - ] + "components": [] }, { "name": "--intergalactic-control-rounded", @@ -3127,22 +2177,7 @@ "rawValue": "{rounded-medium}", "computedValue": "6px", "description": "Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc.", - "components": [ - "base-components", - "base-trigger", - "bulk-textarea", - "button", - "date-picker", - "dropdown-menu", - "feature-highlight", - "input", - "pills", - "select", - "tab-panel", - "textarea", - "time-picker", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-progress-bar-rounded", @@ -3150,11 +2185,7 @@ "rawValue": "{rounded-medium}", "computedValue": "6px", "description": "Use for rounding bars: ProgressBar, SliderBar, etc.", - "components": [ - "mini-chart", - "progress-bar", - "slider" - ] + "components": [] }, { "name": "--intergalactic-surface-rounded", @@ -3162,14 +2193,7 @@ "rawValue": "{rounded-medium}", "computedValue": "6px", "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc.", - "components": [ - "card", - "carousel", - "d3-chart", - "date-picker", - "feedback-form", - "notice" - ] + "components": [] }, { "name": "--intergalactic-popper-rounded", @@ -3177,14 +2201,7 @@ "rawValue": "{rounded-medium}", "computedValue": "6px", "description": "Use for rounding all kinds of poppers and dropdowns.", - "components": [ - "base-components", - "d3-chart", - "dropdown", - "feature-popover", - "notice-bubble", - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-modal-rounded", @@ -3192,10 +2209,7 @@ "rawValue": "{rounded-large}", "computedValue": "12px", "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).", - "components": [ - "modal", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-disabled-opacity", @@ -3203,31 +2217,7 @@ "rawValue": "0.3", "computedValue": "0.3", "description": "Use for the disabled state of all kind of the controls and elements.", - "components": [ - "accordion", - "base-trigger", - "bulk-textarea", - "button", - "carousel", - "checkbox", - "date-picker", - "dropdown", - "inline-input", - "input", - "input-number", - "link", - "pills", - "radio", - "slider", - "switch", - "tab-line", - "tab-panel", - "tag", - "textarea", - "time-picker", - "typography", - "wizard" - ] + "components": [] }, { "name": "--intergalactic-screen-extra-small", @@ -3267,10 +2257,7 @@ "rawValue": "rgba({gray.800}, 0.7)", "computedValue": "rgba(25, 27, 35, 0.7)", "description": "Use for cover the content under the modal dialogs.", - "components": [ - "modal", - "side-panel" - ] + "components": [] }, { "name": "--intergalactic-overlay-secondary", @@ -3278,10 +2265,7 @@ "rawValue": "rgba({gray.800}, 0.4)", "computedValue": "rgba(25, 27, 35, 0.4)", "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs.", - "components": [ - "modal", - "spin-container" - ] + "components": [] }, { "name": "--intergalactic-overlay-limitation-primary", @@ -3297,28 +2281,21 @@ "rawValue": "rgba({gray.white}, 0.85)", "computedValue": "rgba(255, 255, 255, 0.85)", "description": "Use as a secondary cover of the content under the messages about limitations.", - "components": [ - "data-table", - "spin-container" - ] + "components": [] }, { "name": "--intergalactic-z-index-deep", "type": "other", "rawValue": "-999", "computedValue": "-999", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-z-index-overlay", "type": "other", "rawValue": "500", "computedValue": "500", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-z-index-modal", @@ -3361,9 +2338,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Default Tooltip background.", - "components": [ - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-tooltip-warning", @@ -3371,9 +2346,7 @@ "rawValue": "{red.100}", "computedValue": "#ffd7df", "description": "Warning Tooltip background.", - "components": [ - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-tooltip-invert", @@ -3381,9 +2354,7 @@ "rawValue": "{gray.800}", "computedValue": "#191b23", "description": "Inverted version of the default Tooltip background.", - "components": [ - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-neighbor-location-neutral", @@ -3407,10 +2378,7 @@ "rawValue": "linear-gradient(to right, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", "computedValue": "linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)", "description": "Left-to-right fade shadow for the ScrollArea.", - "components": [ - "base-components", - "data-table" - ] + "components": [] }, { "name": "--intergalactic-scroll-area-shadow-right", @@ -3418,10 +2386,7 @@ "rawValue": "linear-gradient(to left, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", "computedValue": "linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)", "description": "Right-to-left fade shadow for the ScrollArea.", - "components": [ - "base-components", - "data-table" - ] + "components": [] }, { "name": "--intergalactic-scroll-area-shadow-top", @@ -3429,9 +2394,7 @@ "rawValue": "linear-gradient(to bottom, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", "computedValue": "linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)", "description": "Top-to-bottom fade shadow for the ScrollArea.", - "components": [ - "base-components" - ] + "components": [] }, { "name": "--intergalactic-scroll-area-shadow-bottom", @@ -3439,9 +2402,7 @@ "rawValue": "linear-gradient(to top, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", "computedValue": "linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)", "description": "Bottom-to-top fade shadow for the ScrollArea.", - "components": [ - "base-components" - ] + "components": [] }, { "name": "--intergalactic-scroll-area-dropdown-menu-left", @@ -3449,9 +2410,7 @@ "rawValue": "linear-gradient(to right, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", "computedValue": "linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)", "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.", - "components": [ - "base-components" - ] + "components": [] }, { "name": "--intergalactic-scroll-area-dropdown-menu-right", @@ -3459,9 +2418,7 @@ "rawValue": "linear-gradient(to left, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", "computedValue": "linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)", "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.", - "components": [ - "base-components" - ] + "components": [] }, { "name": "--intergalactic-scroll-area-dropdown-menu-bottom", @@ -3469,9 +2426,7 @@ "rawValue": "linear-gradient(to top, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", "computedValue": "linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)", "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.", - "components": [ - "base-components" - ] + "components": [] }, { "name": "--intergalactic-scroll-area-dropdown-menu-top", @@ -3479,9 +2434,7 @@ "rawValue": "linear-gradient(to bottom, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", "computedValue": "linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)", "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.", - "components": [ - "base-components" - ] + "components": [] }, { "name": "--intergalactic-scroll-bar-background", @@ -3489,9 +2442,7 @@ "rawValue": "rgba({gray.800}, 0.3)", "computedValue": "rgba(25, 27, 35, 0.3)", "description": "Background color for ScrollBar.", - "components": [ - "base-components" - ] + "components": [] }, { "name": "--intergalactic-tag-primary-gray-normal", @@ -3611,9 +2562,7 @@ "rawValue": "{gray.white}, 0.15", "computedValue": "rgba(255, 255, 255, 0.15)", "description": "Primary white tag.", - "components": [ - "tag" - ] + "components": [] }, { "name": "--intergalactic-tag-primary-white-hover-active", @@ -3741,10 +2690,7 @@ "rawValue": "{blue.300}", "computedValue": "#2bb3ff", "description": "1 color in the default list of colors for charts.", - "components": [ - "d3-chart", - "mini-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-palette-order-2", @@ -3752,9 +2698,7 @@ "rawValue": "{green.200}", "computedValue": "#59ddaa", "description": "2 color in the default list of colors for charts.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-palette-order-3", @@ -3810,9 +2754,7 @@ "rawValue": "{blue.400}", "computedValue": "#008ff8", "description": "9 color in the default list of colors for charts.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-palette-order-10", @@ -3956,9 +2898,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Use it to show null value.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-line", @@ -3966,9 +2906,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Default chart grid line.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-x-axis", @@ -3976,9 +2914,7 @@ "rawValue": "{gray.200}", "computedValue": "#c4c7cf", "description": "X-axis line on the chart grid.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-y-accent-hover-line", @@ -3986,9 +2922,7 @@ "rawValue": "{gray.300}", "computedValue": "#a9abb6", "description": "Accent line for the hover state on the chart grid.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-text-label", @@ -3996,9 +2930,7 @@ "rawValue": "{gray.500}", "computedValue": "#6c6e79", "description": "Text label on the chart grid.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-bar-chart-hover", @@ -4006,9 +2938,7 @@ "rawValue": "rgba({gray.200}, 0.3)", "computedValue": "rgba(196, 199, 207, 0.3)", "description": "Background color for the hover state of a bar on the chart grid.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-bar-chart-base-bg", @@ -4016,10 +2946,7 @@ "rawValue": "{gray.100}", "computedValue": "#e0e1e9", "description": "Default background color of a bar in the BarChart.", - "components": [ - "d3-chart", - "mini-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-period-bg", @@ -4027,9 +2954,7 @@ "rawValue": "rgba({gray.200}, 0.2)", "computedValue": "rgba(196, 199, 207, 0.2)", "description": "Use for highlighting a period on the chart grid.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-period-pattern", @@ -4037,9 +2962,7 @@ "rawValue": "rgba({gray.800}, 0.15)", "computedValue": "rgba(25, 27, 35, 0.15)", "description": "Stripe color for diagonal pattern background.", - "components": [ - "d3-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-grid-border", @@ -4047,10 +2970,7 @@ "rawValue": "{gray.white}", "computedValue": "#ffffff", "description": "Border for distinguishing data sets and chart dots on the chart grid.", - "components": [ - "d3-chart", - "mini-chart" - ] + "components": [] }, { "name": "--intergalactic-chart-x-axis-accent-period-active", @@ -4137,9 +3057,7 @@ "rawValue": "500", "computedValue": "500", "description": "Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)", - "components": [ - "mini-chart" - ] + "components": [] }, { "name": "--intergalactic-duration-slow", @@ -4155,9 +3073,7 @@ "rawValue": "300", "computedValue": "300", "description": "Should be used for more complex effects (such as Modal)", - "components": [ - "date-picker" - ] + "components": [] }, { "name": "--intergalactic-duration-fast", @@ -4165,9 +3081,7 @@ "rawValue": "200", "computedValue": "200", "description": "Should be used for more complex effects (such as Dropdown or Accordion)", - "components": [ - "slider" - ] + "components": [] }, { "name": "--intergalactic-duration-extra-fast", @@ -4175,11 +3089,7 @@ "rawValue": "100", "computedValue": "100", "description": "Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)", - "components": [ - "data-table", - "drag-and-drop", - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-duration-switch", @@ -4187,9 +3097,7 @@ "rawValue": "{duration.extra-fast}", "computedValue": "100", "description": "Use for small controls like Switch or Slider.", - "components": [ - "switch" - ] + "components": [] }, { "name": "--intergalactic-duration-popper", @@ -4205,15 +3113,7 @@ "rawValue": "{duration.fast}", "computedValue": "200", "description": "Use for small controls like Checkbox or Radio.", - "components": [ - "checkbox", - "dropdown", - "feature-highlight", - "feedback-form", - "radio", - "slider", - "tab-line" - ] + "components": [] }, { "name": "--intergalactic-duration-modal", @@ -4229,10 +3129,7 @@ "rawValue": "{duration.fast}", "computedValue": "200", "description": "Use for Accordion.", - "components": [ - "accordion", - "data-table" - ] + "components": [] }, { "name": "--intergalactic-duration-counter", @@ -4256,9 +3153,7 @@ "rawValue": "linear-gradient(90deg, {violet.50}, {blue.50})", "computedValue": "linear-gradient(90deg, #f9f2ff, #e9f7ff)", "description": "Primary background for hover and active (selected) state of highlighted controls.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-bg-secondary-feature-highlight", @@ -4266,9 +3161,7 @@ "rawValue": "linear-gradient(90deg, {violet.50}, {blue.50})", "computedValue": "linear-gradient(90deg, #f9f2ff, #e9f7ff)", "description": "Secondary background for the highlighted message.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-border-feature-highlight", @@ -4276,9 +3169,7 @@ "rawValue": "linear-gradient(90deg, {violet.300}, {blue.300})", "computedValue": "linear-gradient(90deg, #c695ff, #2bb3ff)", "description": "Primary border for highlighted controls.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-border-feature-highlight-active", @@ -4286,9 +3177,7 @@ "rawValue": "linear-gradient(90deg, {violet.400}, {blue.400})", "computedValue": "linear-gradient(90deg, #ab6cfe, #008ff8)", "description": "Primary border for the active state of highlighted controls.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-border-feature-highlight-secondary", @@ -4296,9 +3185,7 @@ "rawValue": "linear-gradient(90deg, {violet.200}, {blue.200})", "computedValue": "linear-gradient(90deg, #dcb8ff, #8ecdff)", "description": "Secondary border for highlighted controls.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-primary-feature-highlight", @@ -4306,9 +3193,7 @@ "rawValue": "linear-gradient(90deg, {violet.400}, {blue.400})", "computedValue": "linear-gradient(90deg, #ab6cfe, #008ff8)", "description": "Background of the highlighted primary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-primary-feature-highlight-hover", @@ -4316,9 +3201,7 @@ "rawValue": "linear-gradient(90deg, {violet.500}, {blue.500})", "computedValue": "linear-gradient(90deg, #8649e1, #006dca)", "description": "Hover state of the highlighted primary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-primary-feature-highlight-active", @@ -4326,9 +3209,7 @@ "rawValue": "linear-gradient(90deg, {violet.600}, {blue.600})", "computedValue": "linear-gradient(90deg, #5925ab, #044792)", "description": "Active (selected) state of the highlighted primary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-feature-highlight", @@ -4336,9 +3217,7 @@ "rawValue": "linear-gradient(90deg, {violet.50}, {blue.50})", "computedValue": "linear-gradient(90deg, #f9f2ff, #e9f7ff)", "description": "Background of the highlighted secondary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-feature-highlight-hover", @@ -4346,9 +3225,7 @@ "rawValue": "linear-gradient(90deg, {violet.100}, {blue.100}) / lighten(0.3) / hsl", "computedValue": "linear-gradient(90deg, #f2e4ff, #d6edfe)", "description": "Hover state of the highlighted secondary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-feature-highlight-active", @@ -4356,9 +3233,7 @@ "rawValue": "linear-gradient(90deg, {violet.100}, {blue.100})", "computedValue": "linear-gradient(90deg, #edd9ff, #c4e5fe)", "description": "Active (selected) state of the highlighted secondary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-text-feature-highlight", @@ -4366,9 +3241,7 @@ "rawValue": "linear-gradient(90deg, {violet.500}, {blue.500})", "computedValue": "linear-gradient(90deg, #8649e1, #006dca)", "description": "Text for highlighted features.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-text-feature-highlight-hover-active", @@ -4376,9 +3249,7 @@ "rawValue": "linear-gradient(90deg, {violet.700}, {blue.700})", "computedValue": "linear-gradient(90deg, #421983, #002b5f)", "description": "Text for hover and active states of highlighted features.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-feature-highlight", @@ -4386,9 +3257,7 @@ "rawValue": "{violet.500}", "computedValue": "#8649e1", "description": "Primary highlighted icon.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-feature-highlight-hover-active", @@ -4396,9 +3265,7 @@ "rawValue": "#6B3AB4", "computedValue": "#6B3AB4", "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-keyboard-focus-feature-highlight-outline", @@ -4406,8 +3273,6 @@ "rawValue": "linear-gradient(90deg, {violet.400}, {blue.400})", "computedValue": "linear-gradient(90deg, #ab6cfe, #008ff8)", "description": "Color for keyboard focus outline styles for highlighted controls.", - "components": [ - "feature-highlight" - ] + "components": [] } ] From b05193328c240b288e15c2f2d30f5bb759036f40 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 13 Mar 2026 12:14:14 +0100 Subject: [PATCH 2/7] [website] fixed docs for new design-system package --- .../design-tokens-usage-development.md | 219 ------------------ .../docs/style/design-tokens/design-tokens.md | 2 +- 2 files changed, 1 insertion(+), 220 deletions(-) diff --git a/website/docs/style/design-tokens/design-tokens-usage-development.md b/website/docs/style/design-tokens/design-tokens-usage-development.md index b16113ef40..85ac85a11f 100644 --- a/website/docs/style/design-tokens/design-tokens-usage-development.md +++ b/website/docs/style/design-tokens/design-tokens-usage-development.md @@ -62,222 +62,3 @@ Design tokens are recommended when creating a custom component to ensure a consi ::: - -## Transforming JSON files - -Design token JSON-files [produced by Tokens Studio Figma plugin](https://www.figma.com/community/plugin/843461159747178978/tokens-studio-for-figma) can't be used as is in Frontend application. Use the following widgets to transform output of the Figma plugin to ready-to-import CSS file or ready-to-use JSON files. - -::: react-view - - - -::: diff --git a/website/docs/style/design-tokens/design-tokens.md b/website/docs/style/design-tokens/design-tokens.md index e08cffc22e..6873411599 100644 --- a/website/docs/style/design-tokens/design-tokens.md +++ b/website/docs/style/design-tokens/design-tokens.md @@ -20,7 +20,7 @@ Intergalactic Design System has: These sets form the default theme of the design system. ::: tip -For the complete JSON with all the token sets, refer to the [GitHub repository](https://github.com/semrush/intergalactic/blob/HEAD/semcore/core/src/theme/light.json). +For the complete JSON with all the token sets, refer to the [GitHub repository](https://github.com/semrush/intergalactic/blob/HEAD/semcore/design-system/src/light.json). ::: ## Stylelint plugin From e3e62f994cb870596d4bdefe587990064cbe38ac Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 27 Mar 2026 16:30:21 +0100 Subject: [PATCH 3/7] [chore] renamed design-system to theme --- semcore/{design-system => theme}/.npmignore | 0 semcore/{design-system => theme}/CHANGELOG.md | 2 +- semcore/{design-system => theme}/README.md | 10 +++++----- semcore/{design-system => theme}/package.json | 4 ++-- semcore/{design-system => theme}/src/dark.json | 0 semcore/{design-system => theme}/src/light.json | 0 .../{design-system => theme}/src/panda-processor.ts | 0 semcore/{design-system => theme}/src/processor.ts | 2 +- semcore/{design-system => theme}/src/utils.ts | 0 semcore/{design-system => theme}/tsconfig.json | 0 10 files changed, 9 insertions(+), 9 deletions(-) rename semcore/{design-system => theme}/.npmignore (100%) rename semcore/{design-system => theme}/CHANGELOG.md (82%) rename semcore/{design-system => theme}/README.md (73%) rename semcore/{design-system => theme}/package.json (87%) rename semcore/{design-system => theme}/src/dark.json (100%) rename semcore/{design-system => theme}/src/light.json (100%) rename semcore/{design-system => theme}/src/panda-processor.ts (100%) rename semcore/{design-system => theme}/src/processor.ts (99%) rename semcore/{design-system => theme}/src/utils.ts (100%) rename semcore/{design-system => theme}/tsconfig.json (100%) diff --git a/semcore/design-system/.npmignore b/semcore/theme/.npmignore similarity index 100% rename from semcore/design-system/.npmignore rename to semcore/theme/.npmignore diff --git a/semcore/design-system/CHANGELOG.md b/semcore/theme/CHANGELOG.md similarity index 82% rename from semcore/design-system/CHANGELOG.md rename to semcore/theme/CHANGELOG.md index 37dcdb990b..17d78144de 100644 --- a/semcore/design-system/CHANGELOG.md +++ b/semcore/theme/CHANGELOG.md @@ -6,4 +6,4 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel ### Added -- Release package with themes. +- Release package with theme. diff --git a/semcore/design-system/README.md b/semcore/theme/README.md similarity index 73% rename from semcore/design-system/README.md rename to semcore/theme/README.md index 83a30441c1..6c68936d0d 100644 --- a/semcore/design-system/README.md +++ b/semcore/theme/README.md @@ -1,19 +1,19 @@ -# @semcore/design-system +# @semcore/theme -[![version](https://img.shields.io/npm/v/@semcore/design-system.svg)](https://www.npmjs.com/@semcore/design-system) -[![downloads](https://img.shields.io/npm/dt/@semcore/design-system.svg)](https://www.npmjs.com/package/@semcore/design-system) +[![version](https://img.shields.io/npm/v/@semcore/theme.svg)](https://www.npmjs.com/@semcore/theme) +[![downloads](https://img.shields.io/npm/dt/@semcore/theme.svg)](https://www.npmjs.com/package/@semcore/theme) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) > This component is part of the Intergalactic Design System -[//]: # '### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/design-system/)' +[//]: # '### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/theme/)' ### 🏠 [Design system](https://developer.semrush.com/intergalactic/) ## Install ```sh -npm install @semcore/design-system +npm install @semcore/theme ``` ## 👤 Author diff --git a/semcore/design-system/package.json b/semcore/theme/package.json similarity index 87% rename from semcore/design-system/package.json rename to semcore/theme/package.json index 9fcb787328..e809a380ad 100644 --- a/semcore/design-system/package.json +++ b/semcore/theme/package.json @@ -1,5 +1,5 @@ { - "name": "@semcore/design-system", + "name": "@semcore/theme", "description": "Semrush Design System package", "version": "1.0.0", "author": "UI-kit team ", @@ -13,7 +13,7 @@ "repository": { "type": "git", "url": "https://github.com/semrush/intergalactic.git", - "directory": "semcore/design-system" + "directory": "semcore/theme" }, "devDependencies": { "colorjs.io": "0.4.3", diff --git a/semcore/design-system/src/dark.json b/semcore/theme/src/dark.json similarity index 100% rename from semcore/design-system/src/dark.json rename to semcore/theme/src/dark.json diff --git a/semcore/design-system/src/light.json b/semcore/theme/src/light.json similarity index 100% rename from semcore/design-system/src/light.json rename to semcore/theme/src/light.json diff --git a/semcore/design-system/src/panda-processor.ts b/semcore/theme/src/panda-processor.ts similarity index 100% rename from semcore/design-system/src/panda-processor.ts rename to semcore/theme/src/panda-processor.ts diff --git a/semcore/design-system/src/processor.ts b/semcore/theme/src/processor.ts similarity index 99% rename from semcore/design-system/src/processor.ts rename to semcore/theme/src/processor.ts index a2bcd6fb05..078af486fc 100644 --- a/semcore/design-system/src/processor.ts +++ b/semcore/theme/src/processor.ts @@ -94,7 +94,7 @@ for (const theme of themes) { cwd: semcorePath, }) ).filter((path) => { - if (path.split('/').some((pathPart) => ['design-system', 'chart', 'email', 'table'].includes(pathPart))) { + if (path.split('/').some((pathPart) => ['theme', 'chart', 'email', 'table'].includes(pathPart))) { return false; } return true; diff --git a/semcore/design-system/src/utils.ts b/semcore/theme/src/utils.ts similarity index 100% rename from semcore/design-system/src/utils.ts rename to semcore/theme/src/utils.ts diff --git a/semcore/design-system/tsconfig.json b/semcore/theme/tsconfig.json similarity index 100% rename from semcore/design-system/tsconfig.json rename to semcore/theme/tsconfig.json From ac49e2966a9a738b6873704193ceec444ec2404f Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 27 Mar 2026 16:32:26 +0100 Subject: [PATCH 4/7] [chore] renamed design-system to theme --- package.json | 2 +- pnpm-lock.yaml | 34 +++++++++---------- .../docs/style/design-tokens/design-tokens.md | 2 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 723e7c61d7..4f33b63307 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "dev": "pnpm storybook", "start": "pnpm storybook", "build": "pnpm run clean && pnpm --filter @semcore/core run build && pnpm build:icons && pnpm build:illustration && pnpm --filter @semcore/base-components run build && pnpm --filter @semcore/dropdown run build && pnpm --filter @semcore/* --filter !@semcore/icon --filter !@semcore/core --filter !@semcore/base-components --filter !@semcore/illustration --filter !@semcore/dropdown --filter !@semcore/ui run build", - "process-theme": "pnpm --filter @semcore/design-system build", + "process-theme": "pnpm --filter @semcore/theme build", "typecheck": "pnpm --filter @semcore/* --filter !@semcore/babel-plugin-root --filter !@semcore/babel-plugin-styles --filter !@semcore/babel-plugin-react-semcore --filter !@semcore/babel-preset-ui --filter !@semcore/testing-utils --filter !@semcore/email --filter !@semcore/icon-transform-svg --filter !@semcore/shadow-loader exec tsc --noEmit", "install-n-test": "pnpm install && pnpm test", "install-n-browser-test": "pnpm install && pnpm browser-test", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e6a648fcfd..28926d2e21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -954,21 +954,6 @@ importers: specifier: workspace:* version: link:../../tools/testing-utils - semcore/design-system: - devDependencies: - '@pandacss/dev': - specifier: ^1.9.0 - version: 1.9.0(jsdom@22.1.0)(typescript@5.9.3) - colorjs.io: - specifier: 0.4.3 - version: 0.4.3 - postcss: - specifier: 8.4.33 - version: 8.4.33 - postcss-value-parser: - specifier: 4.1.0 - version: 4.1.0 - semcore/divider: dependencies: '@semcore/base-components': @@ -2261,6 +2246,21 @@ importers: specifier: 3.1.3 version: 3.1.3 + semcore/theme: + devDependencies: + '@pandacss/dev': + specifier: 1.9.0 + version: 1.9.0(jsdom@22.1.0)(typescript@5.9.3) + colorjs.io: + specifier: 0.4.3 + version: 0.4.3 + postcss: + specifier: 8.4.33 + version: 8.4.33 + postcss-value-parser: + specifier: 4.1.0 + version: 4.1.0 + semcore/time-picker: dependencies: '@semcore/base-components': @@ -19746,7 +19746,7 @@ snapshots: autoprefixer@10.4.21(postcss@8.4.33): dependencies: - browserslist: 4.26.3 + browserslist: 4.28.1 caniuse-lite: 1.0.30001748 fraction.js: 4.3.7 normalize-range: 0.1.2 @@ -19756,7 +19756,7 @@ snapshots: autoprefixer@9.8.8: dependencies: - browserslist: 4.26.3 + browserslist: 4.28.1 caniuse-lite: 1.0.30001748 normalize-range: 0.1.2 num2fraction: 1.2.2 diff --git a/website/docs/style/design-tokens/design-tokens.md b/website/docs/style/design-tokens/design-tokens.md index 7c4571f73f..caf8d8eab3 100644 --- a/website/docs/style/design-tokens/design-tokens.md +++ b/website/docs/style/design-tokens/design-tokens.md @@ -20,7 +20,7 @@ Intergalactic Design System has: These sets form the default theme of the design system. ::: tip -For the complete JSON with all the token sets, refer to the [GitHub repository](https://github.com/semrush/intergalactic/blob/HEAD/semcore/design-system/src/light.json). +For the complete JSON with all the token sets, refer to the [GitHub repository](https://github.com/semrush/intergalactic/blob/HEAD/semcore/theme/src/light.json). ::: ## Stylelint plugin From ccebd057976723f8860a4587c870f7c2b147e406 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 27 Mar 2026 16:43:38 +0100 Subject: [PATCH 5/7] [website] added warning about themes in core package --- website/docs/style/design-tokens/design-tokens.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/website/docs/style/design-tokens/design-tokens.md b/website/docs/style/design-tokens/design-tokens.md index caf8d8eab3..85c3752b9c 100644 --- a/website/docs/style/design-tokens/design-tokens.md +++ b/website/docs/style/design-tokens/design-tokens.md @@ -8,6 +8,11 @@ tabs: Tokens('design-tokens'), Usage in design('design-tokens-usage'), Usage in Design tokens are available for use from **intergalactic@13.5.0** version. ::: +::: warning +You should use tokens from the **@semcore/theme** package instead of **@semcore/core**, +as they will be removed from the core package starting from **version 17**. +::: + ## Description Design tokens are variables that store visual design choices (colors, fonts, spaces, opacity, box-shadows, etc.). The most important thing is that tokens ensure the same style names and values are used in design files and code. From 1787585276bd0a5f51f69bfe5942770f97d8faf4 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 27 Mar 2026 16:48:07 +0100 Subject: [PATCH 6/7] [theme] moved test from core to theme --- pnpm-lock.yaml | 3 +++ semcore/{core => theme}/__tests__/token-processor.test.ts | 2 +- semcore/theme/package.json | 3 ++- 3 files changed, 6 insertions(+), 2 deletions(-) rename semcore/{core => theme}/__tests__/token-processor.test.ts (99%) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 28926d2e21..9577665823 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2251,6 +2251,9 @@ importers: '@pandacss/dev': specifier: 1.9.0 version: 1.9.0(jsdom@22.1.0)(typescript@5.9.3) + '@semcore/testing-utils': + specifier: workspace:* + version: link:../../tools/testing-utils colorjs.io: specifier: 0.4.3 version: 0.4.3 diff --git a/semcore/core/__tests__/token-processor.test.ts b/semcore/theme/__tests__/token-processor.test.ts similarity index 99% rename from semcore/core/__tests__/token-processor.test.ts rename to semcore/theme/__tests__/token-processor.test.ts index 1704ad12f8..3d506bd6cb 100644 --- a/semcore/core/__tests__/token-processor.test.ts +++ b/semcore/theme/__tests__/token-processor.test.ts @@ -1,6 +1,6 @@ import { expect, test, describe } from '@semcore/testing-utils/vitest'; -import { processTokens } from '../src/theme/utils'; +import { processTokens } from '../src/utils'; describe('Token Processor - processTokens', () => { describe('Basic token processing', () => { diff --git a/semcore/theme/package.json b/semcore/theme/package.json index e809a380ad..0d3d597ab1 100644 --- a/semcore/theme/package.json +++ b/semcore/theme/package.json @@ -19,6 +19,7 @@ "colorjs.io": "0.4.3", "postcss": "8.4.33", "postcss-value-parser": "4.1.0", - "@pandacss/dev": "1.9.0" + "@pandacss/dev": "1.9.0", + "@semcore/testing-utils": "workspace:*" } } From a06191bf6a7e4857ed0c16684b0c7262c8e48d08 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 27 Mar 2026 18:16:14 +0100 Subject: [PATCH 7/7] [chore] fixed tests --- semcore/theme/__tests__/token-processor.test.ts | 4 ++-- semcore/ui/__tests__/index.test.js | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/semcore/theme/__tests__/token-processor.test.ts b/semcore/theme/__tests__/token-processor.test.ts index 3d506bd6cb..829785c321 100644 --- a/semcore/theme/__tests__/token-processor.test.ts +++ b/semcore/theme/__tests__/token-processor.test.ts @@ -356,7 +356,7 @@ describe('Token Processor - processTokens', () => { const { resolve } = await import('node:path'); const lightThemeContent = await fs.readFile( - resolve(__dirname, '../src/theme/light.json'), + resolve(__dirname, '../src/light.json'), 'utf-8', ); const { base, tokens, featureHighlight } = JSON.parse(lightThemeContent); @@ -382,7 +382,7 @@ describe('Token Processor - processTokens', () => { const { resolve } = await import('node:path'); const darkThemeContent = await fs.readFile( - resolve(__dirname, '../src/theme/dark.json'), + resolve(__dirname, '../src/dark.json'), 'utf-8', ); const { base, tokens, featureHighlight } = JSON.parse(darkThemeContent); diff --git a/semcore/ui/__tests__/index.test.js b/semcore/ui/__tests__/index.test.js index 55da268dfb..e4189847e0 100644 --- a/semcore/ui/__tests__/index.test.js +++ b/semcore/ui/__tests__/index.test.js @@ -8,7 +8,8 @@ const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')); const semcorePackages = fs .readdirSync(path.resolve(__dirname, '../../')) - .filter((pkg) => !['ui', 'table', 'stylelint-plugin'].includes(pkg)) + // todo Brauer Ilia: remove 'table', 'stylelint-plugin' from 17 verison + .filter((pkg) => !['ui', 'table', 'stylelint-plugin', 'theme'].includes(pkg)) .map((pkg) => `@semcore/${pkg}`); const dependencyPackages = Object.keys(packageJson.dependencies || {}).filter((pkg) =>