From 91524988b8f37bd78955559025686ad23c58ebdb Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 19 Apr 2021 09:46:57 -0400 Subject: [PATCH] feat: move component instrumentation to loader --- .../instrument/src/babel/extract-component.ts | 43 +- core/instrument/src/index.ts | 3 - core/instrument/src/misc/jest-tests.ts | 131 +- .../test/esm-props-info-external.test.ts | 2 +- .../test/extract-props-info.test.ts | 2 +- core/instrument/test/jest-tests.test.ts | 295 +- core/instrument/test/loadTestFiles.ts | 5 +- core/jest-extract/package.json | 1 - core/jest-extract/src/run-tests.ts | 7 - core/loader/src/loader.ts | 9 +- core/loader/src/store.ts | 39 +- examples/simple/src/Component.docs.tsx | 2 +- .../src/components/GatsbyLayout.tsx | 2 +- ui/design-tokens/package.json | 12 +- .../src/Colors/Alta/AltaColor.test.ts | 26 - .../Alta/__snapshots__/AltaColor.test.ts.snap | 364 - .../AntdHorzColor/AntdHorzColor.test.ts | 26 - .../__snapshots__/AntdHorzColor.test.ts.snap | 362 - .../AntdVertColor/AntdVertColor.test.ts | 26 - .../__snapshots__/AntdVertColor.test.ts.snap | 408 - .../src/Colors/AnvilColor/AnvilColor.test.ts | 26 - .../__snapshots__/AnvilColor.test.ts.snap | 400 - .../AtlassianColor/AtlassianColor.test.ts | 26 - .../__snapshots__/AtlassianColor.test.ts.snap | 1396 -- .../Colors/AudiDSColor/AudiDSColor.test.ts | 26 - .../__snapshots__/AudiDSColor.test.ts.snap | 592 - .../BackpackColor/BackpackColor.test.ts | 26 - .../__snapshots__/BackpackColor.test.ts.snap | 534 - .../Colors/BaseWebColor/BaseWebColor.test.ts | 26 - .../__snapshots__/BaseWebColor.test.ts.snap | 322 - .../Colors/BeelineColor/BeelineColor.test.ts | 26 - .../__snapshots__/BeelineColor.test.ts.snap | 885 - .../src/Colors/BoltColor/BoltColor.test.ts | 26 - .../__snapshots__/BoltColor.test.ts.snap | 2391 -- .../Colors/CanvasColor/CanvasColor.test.ts | 26 - .../__snapshots__/CanvasColor.test.ts.snap | 220 - .../src/Colors/CedarColor/CedarColor.test.ts | 26 - .../__snapshots__/CedarColor.test.ts.snap | 421 - .../src/Colors/CometColor/CometColor.test.ts | 26 - .../__snapshots__/CometColor.test.ts.snap | 466 - .../src/Colors/DuetColor/DuetColor.test.ts | 26 - .../__snapshots__/DuetColor.test.ts.snap | 765 - .../Colors/ETradeColor/ETradeColor.test.ts | 26 - .../__snapshots__/ETradeColor.test.ts.snap | 275 - .../FinastraColor/FinastraColor.test.ts | 26 - .../__snapshots__/FinastraColor.test.ts.snap | 339 - .../FishTankColor/FishTankColor.test.ts | 26 - .../__snapshots__/FishTankColor.test.ts.snap | 162 - .../src/Colors/GovUKColor/GovUKColor.test.ts | 26 - .../__snapshots__/GovUKColor.test.ts.snap | 164 - .../HelpScoutColor/HelpScoutColor.test.ts | 26 - .../__snapshots__/HelpScoutColor.test.ts.snap | 322 - .../src/Colors/IBMDLColor/IBMDLColor.test.ts | 26 - .../__snapshots__/IBMDLColor.test.ts.snap | 303 - .../LightningColor/LightningColor.test.ts | 26 - .../__snapshots__/LightningColor.test.ts.snap | 501 - .../Colors/LiquidColor/LiquidColor.test.ts | 26 - .../__snapshots__/LiquidColor.test.ts.snap | 511 - .../MorningstarColor/MorningstarColor.test.ts | 26 - .../MorningstarColor.test.ts.snap | 287 - .../OPatternColor/OPatternColor.test.ts | 26 - .../__snapshots__/OPatternColor.test.ts.snap | 233 - .../Colors/PajamasColor/PajamasColor.test.ts | 26 - .../__snapshots__/PajamasColor.test.ts.snap | 339 - .../PatternFlyColor/PatternFlyColor.test.ts | 26 - .../PatternFlyColor.test.ts.snap | 195 - .../Colors/PhotonColor/PhotonColor.test.ts | 26 - .../__snapshots__/PhotonColor.test.ts.snap | 331 - .../Colors/PrimerColor/PrimerColor.test.ts | 26 - .../__snapshots__/PrimerColor.test.ts.snap | 325 - .../src/Colors/SeedsColor/SeedsColor.test.ts | 26 - .../__snapshots__/SeedsColor.test.ts.snap | 408 - .../src/Colors/SeekColor/SeekColor.test.ts | 26 - .../__snapshots__/SeekColor.test.ts.snap | 223 - .../Colors/SkylineColor/SkylineColor.test.ts | 26 - .../__snapshots__/SkylineColor.test.ts.snap | 765 - .../src/Colors/SolidColor/SolidColor.test.ts | 26 - .../__snapshots__/SolidColor.test.ts.snap | 231 - .../src/Colors/TableColor/TableColor.test.ts | 26 - .../__snapshots__/TableColor.test.ts.snap | 1930 -- .../Colors/UniformColor/UniformColor.test.ts | 26 - .../__snapshots__/UniformColor.test.ts.snap | 209 - .../Colors/VanillaColor/VanillaColor.test.ts | 26 - .../__snapshots__/VanillaColor.test.ts.snap | 159 - .../src/Colors/XColor/XColor.test.ts | 26 - .../XColor/__snapshots__/XColor.test.ts.snap | 471 - .../Colors/ZendeskColor/ZendeskColor.test.ts | 26 - .../__snapshots__/ZendeskColor.test.ts.snap | 279 - .../Fonts/LightningFont/LightningFont.test.ts | 26 - .../__snapshots__/LightningFont.test.ts.snap | 393 - .../component-controls.test.js.snap | 18844 ++++++++++++++++ .../tests/component-controls.test.js | 50 + 92 files changed, 19128 insertions(+), 20188 deletions(-) delete mode 100644 ui/design-tokens/src/Colors/Alta/AltaColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/Alta/__snapshots__/AltaColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/AntdHorzColor/__snapshots__/AntdHorzColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/AntdVertColor/__snapshots__/AntdVertColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/AnvilColor/AnvilColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/AnvilColor/__snapshots__/AnvilColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/AtlassianColor/__snapshots__/AtlassianColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/AudiDSColor/__snapshots__/AudiDSColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/BackpackColor/BackpackColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/BackpackColor/__snapshots__/BackpackColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/BaseWebColor/__snapshots__/BaseWebColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/BeelineColor/BeelineColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/BeelineColor/__snapshots__/BeelineColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/BoltColor/BoltColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/BoltColor/__snapshots__/BoltColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/CanvasColor/CanvasColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/CanvasColor/__snapshots__/CanvasColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/CedarColor/CedarColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/CedarColor/__snapshots__/CedarColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/CometColor/CometColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/CometColor/__snapshots__/CometColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/DuetColor/DuetColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/DuetColor/__snapshots__/DuetColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/ETradeColor/ETradeColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/ETradeColor/__snapshots__/ETradeColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/FinastraColor/FinastraColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/FinastraColor/__snapshots__/FinastraColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/FishTankColor/FishTankColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/FishTankColor/__snapshots__/FishTankColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/GovUKColor/GovUKColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/GovUKColor/__snapshots__/GovUKColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/HelpScoutColor/__snapshots__/HelpScoutColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/IBMDLColor/__snapshots__/IBMDLColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/LightningColor/LightningColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/LightningColor/__snapshots__/LightningColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/LiquidColor/LiquidColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/LiquidColor/__snapshots__/LiquidColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/MorningstarColor/__snapshots__/MorningstarColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/OPatternColor/OPatternColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/OPatternColor/__snapshots__/OPatternColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/PajamasColor/PajamasColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/PajamasColor/__snapshots__/PajamasColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/PatternFlyColor/__snapshots__/PatternFlyColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/PhotonColor/PhotonColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/PhotonColor/__snapshots__/PhotonColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/PrimerColor/PrimerColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/PrimerColor/__snapshots__/PrimerColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/SeedsColor/SeedsColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/SeedsColor/__snapshots__/SeedsColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/SeekColor/SeekColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/SeekColor/__snapshots__/SeekColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/SkylineColor/SkylineColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/SkylineColor/__snapshots__/SkylineColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/SolidColor/SolidColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/SolidColor/__snapshots__/SolidColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/TableColor/TableColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/TableColor/__snapshots__/TableColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/UniformColor/UniformColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/UniformColor/__snapshots__/UniformColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/VanillaColor/VanillaColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/VanillaColor/__snapshots__/VanillaColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/XColor/XColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/XColor/__snapshots__/XColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.test.ts delete mode 100644 ui/design-tokens/src/Colors/ZendeskColor/__snapshots__/ZendeskColor.test.ts.snap delete mode 100644 ui/design-tokens/src/Fonts/LightningFont/LightningFont.test.ts delete mode 100644 ui/design-tokens/src/Fonts/LightningFont/__snapshots__/LightningFont.test.ts.snap create mode 100644 ui/design-tokens/tests/__snapshots__/component-controls.test.js.snap create mode 100644 ui/design-tokens/tests/component-controls.test.js diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts index 697cbc830..04f537f67 100644 --- a/core/instrument/src/babel/extract-component.ts +++ b/core/instrument/src/babel/extract-component.ts @@ -14,26 +14,23 @@ import { analyze_components } from './analyze-component'; import { packageInfo } from '../misc/package-info'; import { readSourceFile } from '../misc/source-options'; import { LoadingDocStore, InstrumentOptions } from '../types'; +import { getComponentProps } from '../misc/props-info'; +import { getFileIinfo } from '../misc/file-info'; +import { extractTests } from '../misc/jest-tests'; -export interface ComponentParseData { +interface ComponentParseData { component?: Component; componentPackage?: PackageInfo; } -const globalCache: { - [filePath: string]: ComponentParseData; -} = {}; export const extractComponent = async ( componentName: string, filePath: string, source?: string, options?: InstrumentOptions, ): Promise => { - const cacheKey = `${filePath}-${componentName}`; - if (globalCache[cacheKey]) { - return globalCache[cacheKey]; - } const follow = followImports(componentName, filePath, source, options); - const { components, resolver: resolveOptions } = options || {}; + const { components, resolver: resolveOptions, propsLoaders = [], jest } = + options || {}; let component: Component; let componentPackage: PackageInfo | undefined; @@ -109,6 +106,31 @@ export const extractComponent = async ( component.request = follow.filePath; component.fileName = path.basename(follow.filePath); + const propsFile = component.propsInfoFile || component.request; + if (propsFile) { + const propsInfo = await getComponentProps( + propsLoaders, + propsFile, + component.name, + component.source, + ); + if (propsInfo) { + component.info = propsInfo; + } + } + const { fileInfo = true } = components || {}; + if (fileInfo && component.request) { + component.fileInfo = await getFileIinfo( + component.request, + component.source, + ); + } + if (jest !== false) { + const testResults = await extractTests([component.request], jest); + if (testResults) { + component.jest = testResults; + } + } const saveSource = readSourceFile( components?.sourceFiles, follow.source, @@ -140,8 +162,7 @@ export const extractComponent = async ( }; } - globalCache[cacheKey] = { component, componentPackage }; - return globalCache[cacheKey]; + return { component, componentPackage }; }; export const extractStoreComponent = async ( diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts index d9d83eb55..2d675ffab 100644 --- a/core/instrument/src/index.ts +++ b/core/instrument/src/index.ts @@ -38,9 +38,6 @@ import { } from './types'; export * from './types'; -export { getComponentProps } from './misc/props-info'; -export { getFileIinfo } from './misc/file-info'; -export { extractComponentTests } from './misc/jest-tests'; export { prettify }; diff --git a/core/instrument/src/misc/jest-tests.ts b/core/instrument/src/misc/jest-tests.ts index c2e416ef9..5645232ad 100644 --- a/core/instrument/src/misc/jest-tests.ts +++ b/core/instrument/src/misc/jest-tests.ts @@ -5,7 +5,7 @@ import { findJestConfig, getRelatedTests, } from '@component-controls/jest-extract'; -import { Components, JestTests } from '@component-controls/core'; +import { JestTests } from '@component-controls/core'; /** * Separates the files into projects and runs jest tests @@ -14,46 +14,30 @@ import { Components, JestTests } from '@component-controls/core'; * @returns return key/value pairs with test results and coverage associated with each file */ export const extractTests = async ( - files: Record, + files: string[], options?: JestConfig, -): Promise> => { - const tests = Object.keys(files).reduce( - (acc: Record, key) => { - const component = files[key]; - const projectFolder = findJestConfig(component); - if (!acc[projectFolder]) { - acc[projectFolder] = []; - } - acc[projectFolder].push({ key, files: [component] }); - return acc; - }, - - {}, - ); - const projects = Object.keys(tests); - const results: Record = {}; - for (const project of projects) { - const files = tests[project].reduce( - ( - acc: { - testFiles: Record; - coverageFiles: Record; - }, - component, - ) => { - results[component.key] = { results: [], coverage: {} }; - component.files.forEach(filePath => - getRelatedTests(filePath).forEach( - f => - (acc.testFiles[`.${path.sep}${path.relative(project, f)}`] = - component.key), - ), - ); - component.files.forEach(filePath => { - acc.coverageFiles[`.${path.sep}${path.relative(project, filePath)}`] = - component.key; - }); - /* const dateModified = fs.statSync(projectFolder).mtime; +): Promise => { + if (!files.length) { + return undefined; + } + const projectFolder = findJestConfig(files[0]); + const tests = files.reduce( + ( + acc: { + testFiles: string[]; + coverageFiles: string[]; + }, + component, + ) => { + acc.testFiles.push( + ...getRelatedTests(component).map( + f => `.${path.sep}${path.relative(projectFolder, f)}`, + ), + ); + acc.coverageFiles.push( + `.${path.sep}${path.relative(projectFolder, component)}`, + ); + /* const dateModified = fs.statSync(projectFolder).mtime; const fileHash = createHash('md5') .update(dateModified.toString()) @@ -72,61 +56,16 @@ export const extractTests = async ( coverage: cachedTest.coverage, }); } */ - return acc; - }, - { testFiles: {}, coverageFiles: {} }, - ); - if (Object.keys(files.testFiles).length) { - const testResults = await runProjectTests( - Object.keys(files.testFiles), - project, - { - collectCoverageOnlyFrom: Object.keys(files.coverageFiles), - ...options, - }, - ); - if (testResults.coverage) { - Object.keys(testResults.coverage).forEach(covFile => { - const componentKey = files.coverageFiles[`.${path.sep}${covFile}`]; - if (componentKey) { - results[componentKey].coverage[covFile] = - testResults.coverage[covFile]; - } - }); - } - if (testResults.results) { - testResults.results.forEach(r => { - const componentKey = files.testFiles[`.${path.sep}${r.testFilePath}`]; - if (componentKey) { - results[componentKey].results.push(r); - } - }); - } - } - } - return results; -}; - -/** - * runs the tests associated with the components and assign to field "jest" - * @param components key/Component list - * @param options jest runCLI options - */ -export const extractComponentTests = async ( - components: Components, - options?: JestConfig, -): Promise => { - const mapped = Object.keys(components).reduce( - (acc: Record, key) => ({ - ...acc, - [key]: components[key].request as string, - }), - {}, + return acc; + }, + { testFiles: [], coverageFiles: [] }, ); - const extracted = await extractTests(mapped, options); - Object.keys(extracted).forEach(key => { - if (components[key]) { - components[key].jest = extracted[key]; - } - }); + if (tests.testFiles.length) { + const testResults = await runProjectTests(tests.testFiles, projectFolder, { + collectCoverageOnlyFrom: tests.coverageFiles, + ...options, + }); + return testResults; + } + return undefined; }; diff --git a/core/instrument/test/esm-props-info-external.test.ts b/core/instrument/test/esm-props-info-external.test.ts index b6e4b3958..aca7b1bd5 100644 --- a/core/instrument/test/esm-props-info-external.test.ts +++ b/core/instrument/test/esm-props-info-external.test.ts @@ -1,6 +1,6 @@ import path from 'path'; import { fixtureToTest, TestCallback } from './loadTestFiles'; -import { getComponentProps } from '../src/index'; +import { getComponentProps } from '../src/misc/props-info'; const createTest = (fileName: string, callback: TestCallback) => fixtureToTest(['esm', 'props-info-external'], fileName, callback, { diff --git a/core/instrument/test/extract-props-info.test.ts b/core/instrument/test/extract-props-info.test.ts index 98431c52f..3e653037e 100644 --- a/core/instrument/test/extract-props-info.test.ts +++ b/core/instrument/test/extract-props-info.test.ts @@ -1,5 +1,5 @@ import * as path from 'path'; -import { getComponentProps } from '../src/index'; +import { getComponentProps } from '../src/misc/props-info'; import { ComponentInfo } from '@component-controls/core'; export type ComponentCallback = (component: ComponentInfo) => void; diff --git a/core/instrument/test/jest-tests.test.ts b/core/instrument/test/jest-tests.test.ts index f9ad5bccc..183d86c6b 100644 --- a/core/instrument/test/jest-tests.test.ts +++ b/core/instrument/test/jest-tests.test.ts @@ -6,166 +6,169 @@ describe('component-tests', () => { beforeAll(() => { setLogOptions({ logLevel: 'none' }); }); - it('jest extract', async () => { - const tests = await extractTests({ - '1': path.resolve( + it('Catalog', async () => { + const tests = await extractTests([ + path.resolve( __dirname, '../../../plugins/addon-catalog/src/Catalog/Catalog.tsx', ), - '2': path.resolve( + ]); + expect(tests).toMatchObject({ + results: [ + { + leaks: false, + memoryUsage: undefined, + testFilePath: 'src/Catalog/Catalog.test.ts', + testResults: [ + { + ancestorTitles: ['Catalog'], + failureDetails: [], + failureMessages: [], + fullName: 'Catalog overview', + location: null, + numPassingAsserts: 0, + status: 'passed', + title: 'overview', + }, + ], + }, + ], + coverage: { + 'src/Catalog/Catalog.tsx': { + lines: { + total: 9, + covered: 9, + skipped: 0, + pct: 100, + }, + functions: { + total: 1, + covered: 1, + skipped: 0, + pct: 100, + }, + statements: { + total: 10, + covered: 10, + skipped: 0, + pct: 100, + }, + branches: { + total: 0, + covered: 0, + skipped: 0, + pct: 100, + }, + }, + }, + }); + }, 100000); + it('ComponentCard', async () => { + const tests = await extractTests([ + path.resolve( __dirname, '../../../plugins/addon-catalog/src/ComponentCard/ComponentCard.tsx', ), - '3': path.resolve( - __dirname, - '../../../ui/components/src/Header/Header.tsx', - ), - }); + ]); expect(tests).toMatchObject({ - '1': { - results: [ - { - leaks: false, - memoryUsage: undefined, - testFilePath: 'src/Catalog/Catalog.test.ts', - testResults: [ - { - ancestorTitles: ['Catalog'], - failureDetails: [], - failureMessages: [], - fullName: 'Catalog overview', - location: null, - numPassingAsserts: 0, - status: 'passed', - title: 'overview', - }, - ], - }, - ], - coverage: { - 'src/Catalog/Catalog.tsx': { - lines: { - total: 9, - covered: 9, - skipped: 0, - pct: 100, + results: [ + { + leaks: false, + memoryUsage: undefined, + testFilePath: 'src/ComponentCard/ComponentCard.test.ts', + testResults: [ + { + ancestorTitles: ['ComponentCard'], + failureDetails: [], + failureMessages: [], + fullName: 'ComponentCard overview', + location: null, + numPassingAsserts: 0, + status: 'passed', + title: 'overview', }, - functions: { - total: 1, - covered: 1, - skipped: 0, - pct: 100, - }, - statements: { - total: 10, - covered: 10, - skipped: 0, - pct: 100, - }, - branches: { - total: 0, - covered: 0, - skipped: 0, - pct: 100, - }, - }, + ], }, - }, - '2': { - results: [ - { - leaks: false, - memoryUsage: undefined, - testFilePath: 'src/ComponentCard/ComponentCard.test.ts', - testResults: [ - { - ancestorTitles: ['ComponentCard'], - failureDetails: [], - failureMessages: [], - fullName: 'ComponentCard overview', - location: null, - numPassingAsserts: 0, - status: 'passed', - title: 'overview', - }, - ], + ], + coverage: { + 'src/ComponentCard/ComponentCard.tsx': { + lines: { + total: 20, + covered: 19, + skipped: 0, + pct: 95, }, - ], - coverage: { - 'src/ComponentCard/ComponentCard.tsx': { - lines: { - total: 20, - covered: 19, - skipped: 0, - pct: 95, - }, - functions: { - total: 1, - covered: 1, - skipped: 0, - pct: 100, - }, - statements: { - total: 21, - covered: 20, - skipped: 0, - pct: 95.24, - }, - branches: { - total: 44, - covered: 35, - skipped: 0, - pct: 79.55, - }, + functions: { + total: 1, + covered: 1, + skipped: 0, + pct: 100, + }, + statements: { + total: 21, + covered: 20, + skipped: 0, + pct: 95.24, + }, + branches: { + total: 44, + covered: 25, + skipped: 0, + pct: 56.82, }, }, }, - '3': { - results: [ - { - leaks: false, - memoryUsage: undefined, - testFilePath: 'src/Header/Header.test.ts', - testResults: [ - { - ancestorTitles: ['Header'], - failureDetails: [], - failureMessages: [], - fullName: 'Header overview', - location: null, - numPassingAsserts: 0, - status: 'passed', - title: 'overview', - }, - ], - }, - ], - coverage: { - 'src/Header/Header.tsx': { - lines: { - total: 2, - covered: 2, - skipped: 0, - pct: 100, - }, - functions: { - total: 1, - covered: 1, - skipped: 0, - pct: 100, - }, - statements: { - total: 6, - covered: 6, - skipped: 0, - pct: 100, - }, - branches: { - total: 0, - covered: 0, - skipped: 0, - pct: 100, + }); + }, 100000); + it('ComponentCard', async () => { + const tests = await extractTests([ + path.resolve(__dirname, '../../../ui/components/src/Header/Header.tsx'), + ]); + expect(tests).toMatchObject({ + results: [ + { + leaks: false, + memoryUsage: undefined, + testFilePath: 'src/Header/Header.test.ts', + testResults: [ + { + ancestorTitles: ['Header'], + failureDetails: [], + failureMessages: [], + fullName: 'Header overview', + location: null, + numPassingAsserts: 0, + status: 'passed', + title: 'overview', }, + ], + }, + ], + coverage: { + 'src/Header/Header.tsx': { + lines: { + total: 2, + covered: 2, + skipped: 0, + pct: 100, + }, + functions: { + total: 1, + covered: 1, + skipped: 0, + pct: 100, + }, + statements: { + total: 6, + covered: 6, + skipped: 0, + pct: 100, + }, + branches: { + total: 0, + covered: 0, + skipped: 0, + pct: 100, }, }, }, diff --git a/core/instrument/test/loadTestFiles.ts b/core/instrument/test/loadTestFiles.ts index 9b0d944ee..2b1a88551 100644 --- a/core/instrument/test/loadTestFiles.ts +++ b/core/instrument/test/loadTestFiles.ts @@ -25,7 +25,10 @@ export const fixtureToTest = ( const filePathName = path.join(folderName, fileName); const content = fs.readFileSync(filePathName, 'utf8'); it(fileName, async () => { - const parsed = await parseStories(filePathName, content, options); + const parsed = await parseStories(filePathName, content, { + jest: false, + ...options, + }); await callback(parsed); }); }; diff --git a/core/jest-extract/package.json b/core/jest-extract/package.json index a493c18ca..551d37a85 100644 --- a/core/jest-extract/package.json +++ b/core/jest-extract/package.json @@ -35,7 +35,6 @@ "license": "MIT", "dependencies": { "@component-controls/core": "^3.6.3", - "@component-controls/logger": "^2.10.4", "babel-jest": "^26.6.3", "fastq": "^1.11.0", "jest": "^26.4.2", diff --git a/core/jest-extract/src/run-tests.ts b/core/jest-extract/src/run-tests.ts index ba6319f5d..7f77418b8 100644 --- a/core/jest-extract/src/run-tests.ts +++ b/core/jest-extract/src/run-tests.ts @@ -2,7 +2,6 @@ import path from 'path'; import { runCLI } from 'jest'; import { Config } from '@jest/types'; import { findUpFile } from '@component-controls/core/node-utils'; -import { log } from '@component-controls/logger'; import { TestResult, AggregatedResult } from '@jest/test-result'; import { FileCoverage, CoverageSummaryData } from 'istanbul-lib-coverage'; import fastq from 'fastq'; @@ -136,11 +135,5 @@ export const runProjectTests = async ( queue = fastq.promise(runTestsWorker, 1); } const result = await queue.push({ testFiles, projectFolder, options }); - const maxFilesReport = 2; - const reportFiles = testFiles.slice(0, maxFilesReport); - if (testFiles.length > maxFilesReport) { - reportFiles.push(`...${testFiles.length - maxFilesReport} more`); - } - log(`tests ${projectFolder}`, reportFiles.join(', ')); return (result as unknown) as JestResults; }; diff --git a/core/loader/src/loader.ts b/core/loader/src/loader.ts index 4ef041bd8..91d9c8dda 100644 --- a/core/loader/src/loader.ts +++ b/core/loader/src/loader.ts @@ -18,7 +18,6 @@ async function loader(this: WebpackLoaderContext): Promise { const filePath = this.resource; const loaderOptions: InstrumentOptions = getOptions(this) || {}; const configOptions = globalStore?.buildConfig?.instrument || {}; - const ignore = globalStore?.buildConfig?.ignore || []; const basePath = path.basename(filePath).toLowerCase(); const source = fs.readFileSync(filePath, 'utf8'); @@ -33,7 +32,12 @@ async function loader(this: WebpackLoaderContext): Promise { if (store?.doc) { log('loaded: ', filePath); if (store.stories && store.components && store.packages) { - addStoriesDoc(options, filePath, this._compilation.records.hash, { + Object.keys(store.components).forEach(key => { + if (store.components?.[key]?.request) { + this.addDependency(store.components[key].request as string); + } + }); + addStoriesDoc(filePath, this._compilation.records.hash, { stories: store.stories, components: store.components, packages: store.packages, @@ -44,6 +48,7 @@ async function loader(this: WebpackLoaderContext): Promise { }); } } else { + log('removed: ', filePath); removeStoriesDoc(filePath); } return transformed; diff --git a/core/loader/src/store.ts b/core/loader/src/store.ts index 78c58bfd4..4416f861c 100644 --- a/core/loader/src/store.ts +++ b/core/loader/src/store.ts @@ -8,14 +8,7 @@ import { mergeConfig, defaultBuildConfig, } from '@component-controls/core'; - -import { - LoadingDocStore, - InstrumentOptions, - getComponentProps, - getFileIinfo, - extractComponentTests, -} from '@component-controls/instrument'; +import { LoadingDocStore } from '@component-controls/instrument'; import { loadConfiguration, @@ -67,8 +60,6 @@ export const store: LoadingStore = { }, }; -let instrumentOptions: InstrumentOptions = {}; - export const reserveStories = (filePaths: string[]): void => { if (store.stores.length === 0) { filePaths.forEach(filePath => store.stores.push({ filePath })); @@ -78,12 +69,10 @@ export const removeStoriesDoc = (filePath: string): void => { store.stores = store.stores.filter(s => s.filePath !== filePath); }; export const addStoriesDoc = ( - options: InstrumentOptions, filePath: string, hash: string, added: LoadingDocStore, ): void => { - instrumentOptions = options; const { components, packages, stories, doc } = added; if (!doc) { throw new Error(`Invalid store with no document ${filePath}`); @@ -112,32 +101,6 @@ export const addStoriesDoc = ( }; export const getSerializedStore = async (): Promise => { - const { propsLoaders = [], components, jest } = instrumentOptions; - const { fileInfo = true } = components || {}; - if (jest !== false) { - extractComponentTests(store.components); - } - for (const name in store.components) { - const component = store.components[name]; - const propsFile = component.propsInfoFile || component.request; - if (propsFile) { - const propsInfo = await getComponentProps( - propsLoaders, - propsFile, - component.name, - component.source, - ); - if (propsInfo) { - component.info = propsInfo; - } - } - if (fileInfo && component.request) { - component.fileInfo = await getFileIinfo( - component.request, - component.source, - ); - } - } return JSON.stringify(store); }; diff --git a/examples/simple/src/Component.docs.tsx b/examples/simple/src/Component.docs.tsx index 6ffcceeea..32f51368b 100644 --- a/examples/simple/src/Component.docs.tsx +++ b/examples/simple/src/Component.docs.tsx @@ -3,7 +3,7 @@ import { Document, Example } from '@component-controls/core'; import { Component, ComponentProps } from './Component'; export default { - title: 'Main story', + title: 'Component story', component: Component, } as Document; diff --git a/integrations/gatsby-theme-stories/src/components/GatsbyLayout.tsx b/integrations/gatsby-theme-stories/src/components/GatsbyLayout.tsx index b6e5364d1..311eb04a0 100644 --- a/integrations/gatsby-theme-stories/src/components/GatsbyLayout.tsx +++ b/integrations/gatsby-theme-stories/src/components/GatsbyLayout.tsx @@ -4,7 +4,7 @@ import { Layout, LayoutProps } from '@component-controls/base-integration'; import { store } from '@component-controls/base-integration/store'; import { GatsbyLink } from '../components/GatsbyLink'; -export type GatsbyLayoutProps = Omit; +export type GatsbyLayoutProps = Omit; export const GatsbyLayout: FC = props => { return ( diff --git a/ui/design-tokens/package.json b/ui/design-tokens/package.json index 39459113b..530fef2fb 100644 --- a/ui/design-tokens/package.json +++ b/ui/design-tokens/package.json @@ -18,7 +18,7 @@ "fix": "yarn lint --fix", "lint": "yarn eslint . --ext mdx,ts,tsx", "prepare": "yarn build", - "test:create": "cc-cli -g doc -c ./.config -w", + "test:create": "cc-cli -g store -c ./.config -w", "test": "yarn jest" }, "homepage": "https://github.com/ccontrols/component-controls", @@ -64,15 +64,7 @@ "Atanas Stoyanov" ], "jest": { - "preset": "ts-jest", - "globals": { - "ts-jest": { - "isolatedModules": true - } - }, - "roots": [ - "./src" - ] + "preset": "ts-jest" }, "gitHead": "e30d62f101e104711a16261fce04785d58cac1eb" } diff --git a/ui/design-tokens/src/Colors/Alta/AltaColor.test.ts b/ui/design-tokens/src/Colors/Alta/AltaColor.test.ts deleted file mode 100644 index b1328c920..000000000 --- a/ui/design-tokens/src/Colors/Alta/AltaColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './AltaColor.stories'; - -describe('AltaColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/Alta/__snapshots__/AltaColor.test.ts.snap b/ui/design-tokens/src/Colors/Alta/__snapshots__/AltaColor.test.ts.snap deleted file mode 100644 index d6e9d8543..000000000 --- a/ui/design-tokens/src/Colors/Alta/__snapshots__/AltaColor.test.ts.snap +++ /dev/null @@ -1,364 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AltaColor hsl 1`] = ` - -
-
-
-
-
-
- accent -
-
- HEX: #8c7873 -
-
- RGB: 140, 120, 115 -
-
-
- -`; - -exports[`AltaColor hsla 1`] = ` - -
-
-
-
-
-
- accent -
-
- HEX: #8c7873 -
-
- RGB: 140, 120, 115 -
-
-
- -`; - -exports[`AltaColor name 1`] = ` - -
-
-
-
-
-
- brand -
-
- HEX: #e95b54 -
-
- RGB: 233, 91, 84 -
-
-
- -`; - -exports[`AltaColor overview 1`] = ` - -
-
-
-
-
-
- #fbce4a -
-
- HEX: #fbce4a -
-
- RGB: 251, 206, 74 -
-
-
- -`; - -exports[`AltaColor palette 1`] = ` - -
-
-
-
-
-
-
- color-1 -
-
- HEX: #fbce4a -
-
- RGB: 251, 206, 74 -
-
-
-
-
-
-
-
-
- color-2 -
-
- HEX: #fcfbe8 -
-
- RGB: 252, 251, 232 -
-
-
-
-
-
-
-
-
- color-3 -
-
- HEX: #fff4d5 -
-
- RGB: 255, 244, 213 -
-
-
-
-
-
-
-
-
- color-4 -
-
- HEX: #f6cab7 -
-
- RGB: 246, 202, 183 -
-
-
-
-
-
-
-
-
- color-5 -
-
- HEX: #ec96ad -
-
- RGB: 236, 150, 173 -
-
-
-
-
-
-
-
-
- color-6 -
-
- HEX: #ca589d -
-
- RGB: 202, 88, 157 -
-
-
-
- -`; - -exports[`AltaColor rgb 1`] = ` - -
-
-
-
-
-
- text -
-
- HEX: #000000 -
-
- RGB: 0, 0, 0 -
-
-
- -`; - -exports[`AltaColor rgba 1`] = ` - -
-
-
-
-
-
- shadow -
-
- HEX: #000000 -
-
- RGB: 0, 0, 0, 0.1 -
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.test.ts b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.test.ts deleted file mode 100644 index f4dc5803b..000000000 --- a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './AntdHorzColor.stories'; - -describe('AntdHorzColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/__snapshots__/AntdHorzColor.test.ts.snap b/ui/design-tokens/src/Colors/AntdHorzColor/__snapshots__/AntdHorzColor.test.ts.snap deleted file mode 100644 index 8b75621c3..000000000 --- a/ui/design-tokens/src/Colors/AntdHorzColor/__snapshots__/AntdHorzColor.test.ts.snap +++ /dev/null @@ -1,362 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AntdHorzColor hsl 1`] = ` - -
-
-
-
- accent -
-
- #8c7873 -
-
-
-
- -`; - -exports[`AntdHorzColor hsla 1`] = ` - -
-
-
-
- accent -
-
- #8c7873 -
-
-
-
- -`; - -exports[`AntdHorzColor name 1`] = ` - -
-
-
-
- brand -
-
- #e95b54 -
-
-
-
- -`; - -exports[`AntdHorzColor overview 1`] = ` - -
-
-
-
- #cf1322 -
-
- 207, 19, 34 -
-
-
-
- -`; - -exports[`AntdHorzColor palette 1`] = ` - -
-
-
-
-
- red-1 -
-
- #fff1f0 -
-
-
-
-
-
-
-
- red-2 -
-
- #ffccc7 -
-
-
-
-
-
-
-
- red-3 -
-
- #ffa39e -
-
-
-
-
-
-
-
- red-4 -
-
- #ff7875 -
-
-
-
-
-
-
-
- red-5 -
-
- #ff4d4f -
-
-
-
-
-
-
-
- red-6 -
-
- #f5222d -
-
-
-
-
-
-
-
- red-7 -
-
- #cf1322 -
-
-
-
-
-
-
-
- red-8 -
-
- #a8071a -
-
-
-
-
- -`; - -exports[`AntdHorzColor rgb 1`] = ` - -
-
-
-
- text -
-
- #000000 -
-
-
-
- -`; - -exports[`AntdHorzColor rgba 1`] = ` - -
-
-
-
- shadow -
-
- #000000 -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.test.ts b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.test.ts deleted file mode 100644 index 14946eae2..000000000 --- a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './AntdVertColor.stories'; - -describe('AntdVertColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/AntdVertColor/__snapshots__/AntdVertColor.test.ts.snap b/ui/design-tokens/src/Colors/AntdVertColor/__snapshots__/AntdVertColor.test.ts.snap deleted file mode 100644 index fca7195d4..000000000 --- a/ui/design-tokens/src/Colors/AntdVertColor/__snapshots__/AntdVertColor.test.ts.snap +++ /dev/null @@ -1,408 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AntdVertColor hsl 1`] = ` - -
-
-
-
- accent -
-
- #8c7873 -
-
-
-
- -`; - -exports[`AntdVertColor hsla 1`] = ` - -
-
-
-
- accent -
-
- #8c7873 -
-
-
-
- -`; - -exports[`AntdVertColor name 1`] = ` - -
-
-
-
- brand -
-
- #e95b54 -
-
-
-
- -`; - -exports[`AntdVertColor overview 1`] = ` - -
-
-
-
- #cf1322 -
-
- 207, 19, 34 -
-
-
-
- -`; - -exports[`AntdVertColor palette 1`] = ` - -
-
-
-
-
- green-1 -
-
- #f6ffed -
-
-
-
-
-
-
-
- green-2 -
-
- #d9f7be -
-
-
-
-
-
-
-
- green-3 -
-
- #b7eb8f -
-
-
-
-
-
-
-
- green-4 -
-
- #95de64 -
-
-
-
-
-
-
-
- green-5 -
-
- #73d13d -
-
-
-
-
-
-
-
- green-6 -
-
- #52c41a -
-
-
-
-
-
-
-
- green-7 -
-
- #389e0d -
-
-
-
-
-
-
-
- green-8 -
-
- #237804 -
-
-
-
-
-
-
-
- green-9 -
-
- #135200 -
-
-
-
-
-
-
-
- green-10 -
-
- #092b00 -
-
-
-
-
- -`; - -exports[`AntdVertColor rgb 1`] = ` - -
-
-
-
- text -
-
- #000000 -
-
-
-
- -`; - -exports[`AntdVertColor rgba 1`] = ` - -
-
-
-
- shadow -
-
- #000000 -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.test.ts b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.test.ts deleted file mode 100644 index 000470a05..000000000 --- a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './AnvilColor.stories'; - -describe('AnvilColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/AnvilColor/__snapshots__/AnvilColor.test.ts.snap b/ui/design-tokens/src/Colors/AnvilColor/__snapshots__/AnvilColor.test.ts.snap deleted file mode 100644 index 69336e2f1..000000000 --- a/ui/design-tokens/src/Colors/AnvilColor/__snapshots__/AnvilColor.test.ts.snap +++ /dev/null @@ -1,400 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AnvilColor hsl 1`] = ` - -
-
-
-
-
-
-
-

- accent -

-
- HEX: #8c7873 -
-
-
- -`; - -exports[`AnvilColor hsla 1`] = ` - -
-
-
-
-
-
-
-

- accent -

-
- HEX: #8c7873 -
-
-
- -`; - -exports[`AnvilColor name 1`] = ` - -
-
-
-
-
-
-
-

- Critical -

-
- brand #f94d32 -
-
-
- -`; - -exports[`AnvilColor overview 1`] = ` - -
-
-
-
-
-
-
-

- Brand -

-
- Blue400 #2270ee -
-
-
- -`; - -exports[`AnvilColor palette 1`] = ` - -
-
-
-
-
-
-
-
-

- Critical -

-
- Red400 #f94d32 -
-
-
-
-
-
-
-
-
-
-

- Warning -

-
- Yellow400 #ffc902 -
-
-
-
-
-
-
-
-
-
-

- Success -

-
- Green500 #18a761 -
-
-
-
-
-
-
-
-
-
-

- Info -

-
- Blue400 #2270ee -
-
-
-
-
-
-
-
-
-
-

- Border -

-
- Neutral60 #dfe0e1 -
-
-
-
-
-
-
-
-
-
-

- Accent -

-
- Neutral40 #f5f5f5 -
-
-
-
- -`; - -exports[`AnvilColor rgb 1`] = ` - -
-
-
-
-
-
-
-

- text -

-
- HEX: #000000 -
-
-
- -`; - -exports[`AnvilColor rgba 1`] = ` - -
-
-
-
-
-
-
-

- shadow -

-
- HEX: #000000 -
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.test.ts b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.test.ts deleted file mode 100644 index 8522e716e..000000000 --- a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './AtlassianColor.stories'; - -describe('AtlassianColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/AtlassianColor/__snapshots__/AtlassianColor.test.ts.snap b/ui/design-tokens/src/Colors/AtlassianColor/__snapshots__/AtlassianColor.test.ts.snap deleted file mode 100644 index 3d9ae5391..000000000 --- a/ui/design-tokens/src/Colors/AtlassianColor/__snapshots__/AtlassianColor.test.ts.snap +++ /dev/null @@ -1,1396 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AtlassianColor hsl 1`] = ` - -
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
-
-
-
-
-
- NAME -
-
- accent -
-
-
-
-
- HEX -
-
- #8C7873 -
-
-
-
- RGB -
-
- 140, 120, 115 -
-
-
-
-
- -`; - -exports[`AtlassianColor hsla 1`] = ` - -
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
-
-
-
-
-
- NAME -
-
- accent -
-
-
-
-
- HEX -
-
- #8C7873 -
-
-
-
- RGB -
-
- 140, 120, 115 -
-
-
-
-
- -`; - -exports[`AtlassianColor name 1`] = ` - -
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
-
-
-
-
-
- NAME -
-
- brand - Critical -
-
-
-
-
- HEX -
-
- #F94D32 -
-
-
-
- RGB -
-
- 249, 77, 50 -
-
-
-
-
- -`; - -exports[`AtlassianColor overview 1`] = ` - -
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
-
-
-
-
-
- NAME -
-
- Blue400 -
-
-
-
-
- HEX -
-
- #2270EE -
-
-
-
- RGB -
-
- 34, 112, 238 -
-
-
-
-
- -`; - -exports[`AtlassianColor palette 1`] = ` - -
-
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
-
-
-
-
-
- NAME -
-
- R300 - Poppy surprise -
-
-
-
-
- HEX -
-
- #FF5630 -
-
-
-
- RGB -
-
- 255, 86, 48 -
-
-
-
-
-
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
- - A - - - FAIL - -
-
-
-
-
-
-
- NAME -
-
- Y300 - Golden state -
-
-
-
-
- HEX -
-
- #FFAB00 -
-
-
-
- RGB -
-
- 255, 171, 0 -
-
-
-
-
-
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
- - A - - - FAIL - -
-
-
-
-
-
-
- NAME -
-
- G300 - Fine pine -
-
-
-
-
- HEX -
-
- #36B37E -
-
-
-
- RGB -
-
- 54, 179, 126 -
-
-
-
-
-
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
- - A - - - FAIL - -
-
-
-
-
-
-
- NAME -
-
- T300 - Tamarama -
-
-
-
-
- HEX -
-
- #00B8D9 -
-
-
-
- RGB -
-
- 0, 184, 217 -
-
-
-
-
-
-
-
-
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
-
-
-
-
-
- NAME -
-
- P300 - Da' juice -
-
-
-
-
- HEX -
-
- #6554C0 -
-
-
-
- RGB -
-
- 101, 84, 192 -
-
-
-
-
-
-
-
-
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
- - A - - - FAIL - -
-
-
-
-
-
-
- NAME -
-
- Red400 - Critical -
-
-
-
-
- HEX -
-
- #F94D32 -
-
-
-
- RGB -
-
- 249, 77, 50 -
-
-
-
-
-
- -`; - -exports[`AtlassianColor rgb 1`] = ` - -
-
-
-
-
- - A - - - FAIL - -
-
- - A - - - FAIL - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
-
-
-
-
-
- NAME -
-
- text -
-
-
-
-
- HEX -
-
- #000000 -
-
-
-
- RGB -
-
- 0, 0, 0 -
-
-
-
-
- -`; - -exports[`AtlassianColor rgba 1`] = ` - -
-
-
-
-
- - A - - - FAIL - -
-
- - A - - - FAIL - -
-
- - A - - - PASS - -
-
- - A - - - PASS - -
-
-
-
-
-
-
- NAME -
-
- shadow -
-
-
-
-
- HEX -
-
- #000000 -
-
-
-
- RGB -
-
- 0, 0, 0, 0.1 -
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.test.ts b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.test.ts deleted file mode 100644 index 81f35c380..000000000 --- a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './AudiDSColor.stories'; - -describe('AudiDSColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/AudiDSColor/__snapshots__/AudiDSColor.test.ts.snap b/ui/design-tokens/src/Colors/AudiDSColor/__snapshots__/AudiDSColor.test.ts.snap deleted file mode 100644 index 072c124fc..000000000 --- a/ui/design-tokens/src/Colors/AudiDSColor/__snapshots__/AudiDSColor.test.ts.snap +++ /dev/null @@ -1,592 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AudiDSColor hsl 1`] = ` - -
-
-
-
-
-
-
- accent -
-
-
-
- RGB: 140/120/115 -
-
- HEX: #8c7873 -
-
- CMYK: 0/14/18/45 -
-
- Pantone 409C -
-
- RAL: 7048 -
-
-
-
- -`; - -exports[`AudiDSColor hsla 1`] = ` - -
-
-
-
-
-
-
- accent -
-
-
-
- RGB: 140/120/115 -
-
- HEX: #8c7873 -
-
- CMYK: 0/14/18/45 -
-
- Pantone 409C -
-
- RAL: 7048 -
-
-
-
- -`; - -exports[`AudiDSColor name 1`] = ` - -
-
-
-
-
-
-
- Critical -
-
-
-
- RGB: 249/77/50 -
-
- HEX: #f94d32 -
-
- CMYK: 0/69/80/2 -
-
- Pantone 171C -
-
- RAL: 3028 -
-
-
-
- -`; - -exports[`AudiDSColor overview 1`] = ` - -
-
-
-
-
-
-
- Brand -
-
-
-
- RGB: 34/112/238 -
-
- HEX: #2270ee -
-
- CMYK: 86/53/0/7 -
-
- Pantone 2726C -
-
- RAL: 5002 -
-
-
-
- -`; - -exports[`AudiDSColor palette 1`] = ` - -
-
-
-
-
-
-
-
- Poppy surprise -
-
-
-
- RGB: 255/86/48 -
-
- HEX: #ff5630 -
-
- CMYK: 0/66/81/0 -
-
- Pantone 171C -
-
- RAL: 2004 -
-
-
-
-
-
-
-
-
-
-
- Golden state -
-
-
-
- RGB: 255/171/0 -
-
- HEX: #ffab00 -
-
- CMYK: 0/33/100/0 -
-
- Pantone 137C -
-
- RAL: 1003 -
-
-
-
-
-
-
-
-
-
-
- Fine pine -
-
-
-
- RGB: 54/179/126 -
-
- HEX: #36b37e -
-
- CMYK: 70/0/30/30 -
-
- Pantone 339C -
-
- RAL: 6024 -
-
-
-
-
-
-
-
-
-
-
- Tamarama -
-
-
-
- RGB: 0/184/217 -
-
- HEX: #00b8d9 -
-
- CMYK: 100/15/0/15 -
-
- Pantone 3125C -
-
- RAL: 5012 -
-
-
-
-
-
-
-
-
-
-
- Da' juice -
-
-
-
- RGB: 101/84/192 -
-
- HEX: #6554c0 -
-
- CMYK: 47/56/0/25 -
-
- Pantone 2725C -
-
- RAL: 5002 -
-
-
-
-
-
-
-
-
-
-
- Critical -
-
-
-
- RGB: 249/77/50 -
-
- HEX: #f94d32 -
-
- CMYK: 0/69/80/2 -
-
- Pantone 171C -
-
- RAL: 3028 -
-
-
-
-
- -`; - -exports[`AudiDSColor rgb 1`] = ` - -
-
-
-
-
-
-
- text -
-
-
-
- RGB: 0/0/0 -
-
- HEX: #000000 -
-
- CMYK: 0/0/0/100 -
-
- Pantone 419C -
-
- RAL: 9005 -
-
-
-
- -`; - -exports[`AudiDSColor rgba 1`] = ` - -
-
-
-
-
-
-
- shadow -
-
-
-
- RGB: 0/0/0/0.1 -
-
- HEX: #000000 -
-
- CMYK: 0/0/0/100 -
-
- Pantone 419C -
-
- RAL: 9005 -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.test.ts b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.test.ts deleted file mode 100644 index b17a8057a..000000000 --- a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './BackpackColor.stories'; - -describe('BackpackColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/BackpackColor/__snapshots__/BackpackColor.test.ts.snap b/ui/design-tokens/src/Colors/BackpackColor/__snapshots__/BackpackColor.test.ts.snap deleted file mode 100644 index 1ebdcae20..000000000 --- a/ui/design-tokens/src/Colors/BackpackColor/__snapshots__/BackpackColor.test.ts.snap +++ /dev/null @@ -1,534 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BackpackColor hsl 1`] = ` - -
-
-
-
-
- accent -
-
-
-
- RGB 140, 120, 115 -
-
- HEX #8c7873 -
-
- CMYK: 0, 14, 18, 45 -
-
- PMS 409C -
-
-
-
-
-
-
- -`; - -exports[`BackpackColor hsla 1`] = ` - -
-
-
-
-
- accent -
-
-
-
- RGB 140, 120, 115 -
-
- HEX #8c7873 -
-
- CMYK: 0, 14, 18, 45 -
-
- PMS 409C -
-
-
-
-
-
-
- -`; - -exports[`BackpackColor name 1`] = ` - -
-
-
-
-
- Critical brand -
-
-
-
- RGB 249, 77, 50 -
-
- HEX #f94d32 -
-
- CMYK: 0, 69, 80, 2 -
-
- PMS 171C -
-
-
-
-
-
-
- -`; - -exports[`BackpackColor overview 1`] = ` - -
-
-
-
-
-
- Brand -
-
-
-
- light: Blue400 -
-
- dark: Blue800 -
-
-
-
-
-
-
- -`; - -exports[`BackpackColor palette 1`] = ` - -
-
-
-
-
-
- Poppy surprise R300 -
-
-
-
- RGB 255, 86, 48 -
-
- HEX #ff5630 -
-
- CMYK: 0, 66, 81, 0 -
-
- PMS 171C -
-
-
-
-
-
-
-
-
-
-
-
- Golden state Y300 -
-
-
-
- RGB 255, 171, 0 -
-
- HEX #ffab00 -
-
- CMYK: 0, 33, 100, 0 -
-
- PMS 137C -
-
-
-
-
-
-
-
-
-
-
-
- Fine pine G300 -
-
-
-
- RGB 54, 179, 126 -
-
- HEX #36b37e -
-
- CMYK: 70, 0, 30, 30 -
-
- PMS 339C -
-
-
-
-
-
-
-
-
-
-
-
-
- Tamarama -
-
-
-
- light: T300 -
-
- dark: #084eb2 -
-
-
-
-
-
-
-
-
-
-
-
- Da' juice P300 -
-
-
-
- RGB 101, 84, 192 -
-
- HEX #6554c0 -
-
- CMYK: 47, 56, 0, 25 -
-
- PMS 2725C -
-
-
-
-
-
-
-
-
-
-
-
- Critical Red400 -
-
-
-
- RGB 249, 77, 50 -
-
- HEX #f94d32 -
-
- CMYK: 0, 69, 80, 2 -
-
- PMS 171C -
-
-
-
-
-
-
-
- -`; - -exports[`BackpackColor rgb 1`] = ` - -
-
-
-
-
- text -
-
-
-
- RGB 0, 0, 0 -
-
- HEX #000000 -
-
- CMYK: 0, 0, 0, 100 -
-
- PMS 419C -
-
-
-
-
-
-
- -`; - -exports[`BackpackColor rgba 1`] = ` - -
-
-
-
-
- shadow -
-
-
-
- RGB 0, 0, 0, 0.1 -
-
- HEX #000000 -
-
- CMYK: 0, 0, 0, 100 -
-
- PMS 419C -
-
-
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.test.ts b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.test.ts deleted file mode 100644 index 0f8f2dc92..000000000 --- a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './BaseWebColor.stories'; - -describe('BaseWebColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/BaseWebColor/__snapshots__/BaseWebColor.test.ts.snap b/ui/design-tokens/src/Colors/BaseWebColor/__snapshots__/BaseWebColor.test.ts.snap deleted file mode 100644 index 4738595b9..000000000 --- a/ui/design-tokens/src/Colors/BaseWebColor/__snapshots__/BaseWebColor.test.ts.snap +++ /dev/null @@ -1,322 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BaseWebColor overview 1`] = ` - - - - - - - - - -
-
-
-
-
-
- cobalt400 -
- 		-
- #0E1FC1 -
-
- -`; - -exports[`BaseWebColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
- yellow50 -
- 		-
- #FFFAF0 -
-
-
-
-
-
-
- yellow100 -
- 		-
- #FFF2D9 -
-
-
-
-
-
-
- yellow200 -
- 		-
- #FFE3AC -
-
-
-
-
-
-
- yellow300 -
- 		-
- #FFCF70 -
-
-
-
-
-
-
- yellow400 -
- 		-
- #FFC043 -
-
-
-
-
-
-
- yellow500 -
- 		-
- #BC8B2C -
-
-
-
-
-
-
- yellow600 -
- 		-
- #997328 -
-
-
-
-
-
-
- yellow700 -
- 		-
- #674D1B -
-
- -`; diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.test.ts b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.test.ts deleted file mode 100644 index b8d48fa70..000000000 --- a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './BeelineColor.stories'; - -describe('BeelineColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/BeelineColor/__snapshots__/BeelineColor.test.ts.snap b/ui/design-tokens/src/Colors/BeelineColor/__snapshots__/BeelineColor.test.ts.snap deleted file mode 100644 index cf03c5061..000000000 --- a/ui/design-tokens/src/Colors/BeelineColor/__snapshots__/BeelineColor.test.ts.snap +++ /dev/null @@ -1,885 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BeelineColor hsl 1`] = ` - -
-
-
-
-
-
-
- accent -
-
-
-
-
- HEX: -
-
- #8c7873 -
-
-
-
- RGB: -
-
- rgb(140,120,115) -
-
-
-
- Pantone: -
-
- 409C: -
-
-
-
-
- -`; - -exports[`BeelineColor hsla 1`] = ` - -
-
-
-
-
-
-
- accent -
-
-
-
-
- HEX: -
-
- #8c7873 -
-
-
-
- RGB: -
-
- rgb(140,120,115) -
-
-
-
- Pantone: -
-
- 409C: -
-
-
-
-
- -`; - -exports[`BeelineColor name 1`] = ` - -
-
-
-
-
-
-
- Critical -
-
-
-
-
- HEX: -
-
- #f94d32 -
-
-
-
- RGB: -
-
- rgb(249,77,50) -
-
-
-
- Pantone: -
-
- 171C: -
-
-
-
-
- -`; - -exports[`BeelineColor overview 1`] = ` - -
-
-
-
-
-
-
- Brand -
-
-
-
-
- HEX: -
-
- #2270ee -
-
-
-
- RGB: -
-
- rgb(34,112,238) -
-
-
-
- Pantone: -
-
- 2726C: -
-
-
-
-
- -`; - -exports[`BeelineColor palette 1`] = ` - -
-
-
-
-
-
-
-
- Blue 5 -
-
-
-
-
- HEX: -
-
- #001b38 -
-
-
-
- RGB: -
-
- rgb(0,27,56) -
-
-
-
- Pantone: -
-
- 289C: -
-
-
-
-
-
-
-
-
-
-
-
- Blue Accessibility -
-
-
-
-
- HEX: -
-
- #0352a0 -
-
-
-
- RGB: -
-
- rgb(3,82,160) -
-
-
-
- Pantone: -
-
- 2945C: -
-
-
-
-
-
-
-
-
-
-
-
- Blue Primary -
-
-
-
-
- HEX: -
-
- #0575e6 -
-
-
-
- RGB: -
-
- rgb(5,117,230) -
-
-
-
- Pantone: -
-
- 2727C: -
-
-
-
-
-
-
-
-
-
-
-
- Blue 1 -
-
-
-
-
- HEX: -
-
- #4fa7ff -
-
-
-
- RGB: -
-
- rgb(79,167,255) -
-
-
-
- Pantone: -
-
- 279C: -
-
-
-
-
-
-
-
-
-
-
-
- Blue 2 -
-
-
-
-
- HEX: -
-
- #85dfff -
-
-
-
- RGB: -
-
- rgb(133,223,255) -
-
-
-
- Pantone: -
-
- 636C: -
-
-
-
-
-
-
-
-
-
-
-
- Blue 3 -
-
-
-
-
- HEX: -
-
- #ecf5ff -
-
-
-
- RGB: -
-
- rgb(236,245,255) -
-
-
-
- Pantone: -
-
- 656C: -
-
-
-
-
-
-
-
-
-
-
-
- Blue 4 -
-
-
-
-
- HEX: -
-
- #fbfdff -
-
-
-
- RGB: -
-
- rgb(251,253,255) -
-
-
-
- Pantone: -
-
- 656C: -
-
-
-
-
-
- -`; - -exports[`BeelineColor rgb 1`] = ` - -
-
-
-
-
-
-
- text -
-
-
-
-
- HEX: -
-
- #000000 -
-
-
-
- RGB: -
-
- rgb(0,0,0) -
-
-
-
- Pantone: -
-
- 419C: -
-
-
-
-
- -`; - -exports[`BeelineColor rgba 1`] = ` - -
-
-
-
-
-
-
- shadow -
-
-
-
-
- HEX: -
-
- #000000 -
-
-
-
- RGB: -
-
- rgb(0,0,0,0.1) -
-
-
-
- Pantone: -
-
- 419C: -
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/BoltColor/BoltColor.test.ts b/ui/design-tokens/src/Colors/BoltColor/BoltColor.test.ts deleted file mode 100644 index edd8162b2..000000000 --- a/ui/design-tokens/src/Colors/BoltColor/BoltColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './BoltColor.stories'; - -describe('BoltColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/BoltColor/__snapshots__/BoltColor.test.ts.snap b/ui/design-tokens/src/Colors/BoltColor/__snapshots__/BoltColor.test.ts.snap deleted file mode 100644 index d242c046b..000000000 --- a/ui/design-tokens/src/Colors/BoltColor/__snapshots__/BoltColor.test.ts.snap +++ /dev/null @@ -1,2391 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BoltColor overview 1`] = ` - -
-
-
-
-
- Brand -
-
- #2270ee -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-navy) -
- Text size - - Aa - - Aa -
- #ffffff (4.55) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
- #000000 (4.62) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
-
-
-
-
- -`; - -exports[`BoltColor palette 1`] = ` - -
-
-
-
-
-
- Navy -
-
- #001f5f -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-navy) -
- Text size - - Aa - - Aa -
- #ffffff (15.43) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
- #000000 (1.36) - -
-
- fail - -
-
- 		-
-
- fail - -
-
-
-
-
-
-
-
-
-
-
-
- Teal -
-
- #10a5ac -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-teal) -
- Text size - - Aa - - Aa -
- #ffffff (3.00) - -
-
- pass - -
-
- 		-
-
- fail - -
-
-
- #000000 (7.00) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
-
-
-
-
-
-
-
-
-
- Orange -
-
- #f76923 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-orange) -
- Text size - - Aa - - Aa -
- #ffffff (3.00) - -
-
- pass - -
-
- 		-
-
- fail - -
-
-
- #000000 (7.00) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
-
-
-
-
-
-
-
-
-
- Yellow -
-
- #ffc836 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-yellow) -
- Text size - - Aa - - Aa -
- #ffffff (1.55) - -
-
- fail - -
-
- 		-
-
- fail - -
-
-
- #000000 (13.57) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
-
-
-
-
-
-
-
-
-
- Wine -
-
- #661d34 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-wine) -
- Text size - - Aa - - Aa -
- #ffffff (11.73) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
- #000000 (1.79) - -
-
- fail - -
-
- 		-
-
- fail - -
-
-
-
-
-
-
-
-
-
-
-
- Pink -
-
- #e63690 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-pink) -
- Text size - - Aa - - Aa -
- #ffffff (3.97) - -
-
- pass - -
-
- 		-
-
- fail - -
-
-
- #000000 (5.29) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
-
-
-
-
-
-
-
-
-
- Berry -
-
- #ac1361 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-berry) -
- Text size - - Aa - - Aa -
- #ffffff (6.95) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
- #000000 (3.02) - -
-
- pass - -
-
- 		-
-
- fail - -
-
-
-
-
-
-
-
-
-
-
-
- Violet -
-
- #5f67b9 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-violet) -
- Text size - - Aa - - Aa -
- #ffffff (5.09) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
- #000000 (4.13) - -
-
- pass - -
-
- 		-
-
- fail - -
-
-
-
-
-
-
-
-
-
-
-
- Gray -
-
- #8d8e99 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-gray) -
- Text size - - Aa - - Aa -
- #ffffff (3.25) - -
-
- pass - -
-
- 		-
-
- fail - -
-
-
- #000000 (6.46) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
-
-
-
-
-
-
-
-
-
- Black -
-
- #151619 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-black) -
- Text size - - Aa - - Aa -
- #ffffff (18.09) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
- #000000 (1.16) - -
-
- fail - -
-
- 		-
-
- fail - -
-
-
-
-
-
-
-
-
-
-
-
- White -
-
- #ffffff -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- var(--bolt-color-white) -
- Text size - - Aa - - Aa -
- #ffffff (1.00) - -
-
- fail - -
-
- 		-
-
- fail - -
-
-
- #000000 (21.00) - -
-
- pass - -
-
- 		-
-
- pass - -
-
-
-
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.test.ts b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.test.ts deleted file mode 100644 index 0441297fe..000000000 --- a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './CanvasColor.stories'; - -describe('CanvasColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/CanvasColor/__snapshots__/CanvasColor.test.ts.snap b/ui/design-tokens/src/Colors/CanvasColor/__snapshots__/CanvasColor.test.ts.snap deleted file mode 100644 index e0cc47fed..000000000 --- a/ui/design-tokens/src/Colors/CanvasColor/__snapshots__/CanvasColor.test.ts.snap +++ /dev/null @@ -1,220 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CanvasColor overview 1`] = ` - -
-
-
-
- Primary -
-
-
-
-
- LORAX -
- #ff7a59 -
-
-
- $color-lorax -
-
-
-
-
- -`; - -exports[`CanvasColor palette 1`] = ` - -
-
-
-
-
- Primary -
-
-
-
-
- SORBET -
- #ff8f59 -
-
-
- $color-sorbet -
-
-
-
-
-
-
-
-
- Shade -
-
-
-
-
- SORBET_DARK -
- #e68250 -
-
-
- $color-sorbet-dark -
-
-
-
-
-
-
-
-
- Medium Tint -
-
-
-
-
- SORBET_MEDIUM -
- #ffc7ac -
-
-
- $color-sorbet-medium -
-
-
-
-
-
-
-
-
- Light Tint -
-
-
-
-
- SORBET_LIGHT -
- #fff3ee -
-
-
- $color-sorbet-light -
-
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/CedarColor/CedarColor.test.ts b/ui/design-tokens/src/Colors/CedarColor/CedarColor.test.ts deleted file mode 100644 index f62fbfcb0..000000000 --- a/ui/design-tokens/src/Colors/CedarColor/CedarColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './CedarColor.stories'; - -describe('CedarColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/CedarColor/__snapshots__/CedarColor.test.ts.snap b/ui/design-tokens/src/Colors/CedarColor/__snapshots__/CedarColor.test.ts.snap deleted file mode 100644 index 2b7c2a684..000000000 --- a/ui/design-tokens/src/Colors/CedarColor/__snapshots__/CedarColor.test.ts.snap +++ /dev/null @@ -1,421 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CedarColor overview 1`] = ` - - - - - - - - - -
-
-
-
-
-
-
-
-
- cdr-color-text-button-primary-hover -
-
- Text color for the hover state of primary buttons -
-
- 		-
- #225c4e -
-
- -`; - -exports[`CedarColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
- cdr-color-text-primary -
-
- The default, primary text color -
-
- 		-
- #0c0b08 -
-
-
-
-
-
-
-
-
-
- cdr-color-text-secondary -
-
- The secondary text color -
-
- 		-
- #423b2f -
-
-
-
-
-
-
-
-
-
- cdr-color-text-brand -
-
- Text set in our primary brand color -
-
- 		-
- #113731 -
-
-
-
-
-
-
-
-
-
- cdr-color-text-sale -
-
- The color of sale text -
-
- 		-
- #cc0000 -
-
-
-
-
-
-
-
-
-
- cdr-color-text-inverse -
-
- Text color on dark background -
-
- 		-
- #f9f8f6 -
-
-
-
-
-
-
-
-
-
- cdr-color-text-disabled -
-
- The color of text when it is disabled -
-
- 		-
- #d1cbbd -
-
-
-
-
-
-
-
-
-
- cdr-color-text-success -
-
- Color of success messages -
-
- 		-
- #2e6b34 -
-
-
-
-
-
-
-
-
-
- cdr-color-text-warning -
-
- Color of warning messages -
-
- 		-
- #854714 -
-
- -`; diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.test.ts b/ui/design-tokens/src/Colors/CometColor/CometColor.test.ts deleted file mode 100644 index 8bf68d25d..000000000 --- a/ui/design-tokens/src/Colors/CometColor/CometColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './CometColor.stories'; - -describe('CometColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/CometColor/__snapshots__/CometColor.test.ts.snap b/ui/design-tokens/src/Colors/CometColor/__snapshots__/CometColor.test.ts.snap deleted file mode 100644 index e60baaa3d..000000000 --- a/ui/design-tokens/src/Colors/CometColor/__snapshots__/CometColor.test.ts.snap +++ /dev/null @@ -1,466 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CometColor overview 1`] = ` - - - - - - - - - - -
-
- 40 -
- 		- $comet-color-emerald-40 - -
- #2F9D89 -
- 		-
-
- AA -
-
-
- -`; - -exports[`CometColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- 05 -
- 		- $comet-color-midnight-05 - -
- #020D17 -
- 		-
-
- AAA -
-
-
-
- 10 -
- 		- $comet-color-midnight-10 - -
- #041B2F -
- 		-
-
- AAA -
-
-
-
- 20 -
- 		- $comet-color-midnight-20 - -
- #08365E -
- 		-
-
- AAA -
-
-
-
- 30 -
- 		- $comet-color-midnight-30 - -
- #0C518D -
- 		-
-
- AAA -
-
-
-
- 40 -
- 		- $comet-color-midnight-40 - -
- #106CBC -
- 		-
-
- AA -
-
-
-
- 50 -
- 		- $comet-color-midnight-50 - -
- #1487EB -
- 		-
-
- AA -
-
-
-
- 60 -
- 		- $comet-color-midnight-60 - -
- #439FEF -
- 		-
-
- AAA -
-
-
-
- 70 -
- 		- $comet-color-midnight-70 - -
- #72B7F3 -
- 		-
-
- AAA -
-
-
-
- 80 -
- 		- $comet-color-midnight-80 - -
- #A1CFF7 -
- 		-
-
- AAA -
-
-
-
- 90 -
- 		- $comet-color-midnight-90 - -
- #D0E7FB -
- 		-
-
- AAA -
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/DuetColor/DuetColor.test.ts b/ui/design-tokens/src/Colors/DuetColor/DuetColor.test.ts deleted file mode 100644 index 65f00546a..000000000 --- a/ui/design-tokens/src/Colors/DuetColor/DuetColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './DuetColor.stories'; - -describe('DuetColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/DuetColor/__snapshots__/DuetColor.test.ts.snap b/ui/design-tokens/src/Colors/DuetColor/__snapshots__/DuetColor.test.ts.snap deleted file mode 100644 index 9073cce09..000000000 --- a/ui/design-tokens/src/Colors/DuetColor/__snapshots__/DuetColor.test.ts.snap +++ /dev/null @@ -1,765 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DuetColor overview 1`] = ` - - - - - - - - - - - -
-
-
-
-
- #004d80 -
-
- rgb(0, 77, 128) -
-
-
- Primary Blue Dark -
-

- Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background. -

- 		- - $color-primary-dark - - - var(--color-primary-dark) - - - - 8.85:1 - - - - -
- -`; - -exports[`DuetColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Example - - Description - - Token - - Contrast - - Status -
-
-
-
-
- #de2362 -
-
- rgb(222, 35, 98) -
-
-
- Status Danger -
-

- Danger red that is accessible with white. Only used in special cases like form validation and messaging. -

- 		- - $color-danger - - - var(--color-danger) - - - - 4.64:1 - - - - -
-
-
-
-
- #f7b228 -
-
- rgb(247, 178, 40) -
-
-
- Status Warning -
-

- Warning orange (non-accessible) is only used in special cases like form validation and messaging. -

- 		- - $color-warning - - - var(--color-warning) - - - - 1.85:1 - - - - -
-
-
-
-
- #00875a -
-
- rgb(0, 135, 90) -
-
-
- Status Success -
-

- Success green that is accessible with white. Only used in special cases like form validation and messaging. -

- 		- - $color-success - - - var(--color-success) - - - - 4.55:1 - - - - -
-
-
-
-
- #657787 -
-
- rgb(101, 119, 135) -
-
-
- Gray Darker -
-

- Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. -

- 		- - $color-gray-darker - - - var(--color-gray-darker) - - - - 4.62:1 - - - - -
-
-
-
-
- #909599 -
-
- rgb(144, 149, 153) -
-
-
- Gray Dark -
-

- Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. -

- 		- - $color-gray-dark - - - var(--color-gray-dark) - - - - 3.02:1 - - - - -
-
-
-
-
- #7a01c4 -
-
- rgb(122, 1, 196) -
-
-
- Data 01 -
-

- Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. -

- 		- - $color-data-01 - - - var(--color-data-01) - - - - 7.99:1 - - - - -
-
-
-
-
- #c21565 -
-
- rgb(194, 21, 101) -
-
-
- Data 06 -
-

- Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. -

- 		- - $color-data-06 - - - var(--color-data-06) - - - - 5.85:1 - - - - -
- -`; diff --git a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.test.ts b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.test.ts deleted file mode 100644 index 36d87612f..000000000 --- a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './ETradeColor.stories'; - -describe('ETradeColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/ETradeColor/__snapshots__/ETradeColor.test.ts.snap b/ui/design-tokens/src/Colors/ETradeColor/__snapshots__/ETradeColor.test.ts.snap deleted file mode 100644 index 027c3dabd..000000000 --- a/ui/design-tokens/src/Colors/ETradeColor/__snapshots__/ETradeColor.test.ts.snap +++ /dev/null @@ -1,275 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ETradeColor overview 1`] = ` - -
-
-
-
- Negative red -
-
- #cc0000 -
-
-
- $negative -
-
-
-
-
-
- Error state -
-
- Data trending down -
-
-
-
- -`; - -exports[`ETradeColor palette 1`] = ` - -
-
-
-
-
- Purple -
-
- #5627d8 -
-
-
- $link-color -
-
-
-
-
-
-
- Text links and other interactive elements -
-
-
-
-
-
-
-
- Negative red -
-
- #cc0000 -
-
-
- $negative -
-
-
-
-
-
- Error state -
-
- Data trending down -
-
-
-
-
-
-
-
- Positive green -
-
- #107a1b -
-
- .text-positive -
-
- $positive -
-
-
-
-
-
- Success state -
-
- Data trending up -
-
-
-
-
-
-
-
- Body gray -
-
- #242424 -
-
- .body-text-color -
-
- $body-text-color -
-
-
-
-
-
-
- Headers and body text -
-
-
-
-
-
-
-
- Background accent color -
-
- #f1ecff -
-
- .background-accent-color-1 -
-
- $background-accent-color-1 -
-
-
-
-
-
-
- Background color -
-
- - Not for text -
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.test.ts b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.test.ts deleted file mode 100644 index e601d9fbb..000000000 --- a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './FinastraColor.stories'; - -describe('FinastraColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/FinastraColor/__snapshots__/FinastraColor.test.ts.snap b/ui/design-tokens/src/Colors/FinastraColor/__snapshots__/FinastraColor.test.ts.snap deleted file mode 100644 index 0b83ebba4..000000000 --- a/ui/design-tokens/src/Colors/FinastraColor/__snapshots__/FinastraColor.test.ts.snap +++ /dev/null @@ -1,339 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FinastraColor overview 1`] = ` - -
-
-
-
- V -
-
-
-
-
- V 100 -
-
- #cf1322 -
-
-
- -`; - -exports[`FinastraColor palette 1`] = ` - -
-
-
-
-
- -
-
-
-
-
- C 100 - dark -
-
- #2d2d2d -
-
-
-
-
-
-
- C -
-
-
-
-
- C 100 -
-
- #414141 -
-
-
-
-
-
-
- -
-
-
-
-
- C 75 -
-
- #707070 -
-
-
-
-
-
-
- -
-
-
-
-
- C 50 -
-
- #9f9f9f -
-
-
-
-
-
-
- -
-
-
-
-
- C 25 -
-
- #cecece -
-
-
-
-
-
-
- -
-
-
-
-
- C 10 -
-
- #eaeaea -
-
-
-
-
-
-
- -
-
-
-
-
- C 2 -
-
- #fafafa -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.test.ts b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.test.ts deleted file mode 100644 index 3fbbd1333..000000000 --- a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './FishTankColor.stories'; - -describe('FishTankColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/FishTankColor/__snapshots__/FishTankColor.test.ts.snap b/ui/design-tokens/src/Colors/FishTankColor/__snapshots__/FishTankColor.test.ts.snap deleted file mode 100644 index 3fc79394e..000000000 --- a/ui/design-tokens/src/Colors/FishTankColor/__snapshots__/FishTankColor.test.ts.snap +++ /dev/null @@ -1,162 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FishTankColor overview 1`] = ` - -
-
-
-
- $color-selected-darkest -
-
- #0A7DAF -
-
-
-
- -`; - -exports[`FishTankColor palette 1`] = ` - -
-
-
-
-
- $color-highlight-1 -
-
- #FFF8B0 -
-
-
-
-
-
-
-
- $color-highlight-2 -
-
- #E3F7FF -
-
-
-
-
-
-
-
- $color-highlight-3 -
-
- #E0FFE0 -
-
-
-
-
-
-
-
- $color-action -
-
- #3DA774 -
-
-
-
-
-
-
-
- $color-warning -
-
- #FFB511 -
-
-
-
-
-
-
-
- $color-error -
-
- #E1483E -
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.test.ts b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.test.ts deleted file mode 100644 index b9e6bfb05..000000000 --- a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './GovUKColor.stories'; - -describe('GovUKColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/GovUKColor/__snapshots__/GovUKColor.test.ts.snap b/ui/design-tokens/src/Colors/GovUKColor/__snapshots__/GovUKColor.test.ts.snap deleted file mode 100644 index 929c18999..000000000 --- a/ui/design-tokens/src/Colors/GovUKColor/__snapshots__/GovUKColor.test.ts.snap +++ /dev/null @@ -1,164 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`GovUKColor overview 1`] = ` - - - - - - - - - -
-
-
-
-
-
- $govuk-brand-colour -
- 		-
- #1d70b8 -
-
- -`; - -exports[`GovUKColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
- $govuk-brand-colour -
- 		-
- #1d70b8 -
-
-
-
-
-
-
- $govuk-link-hover-colour -
- 		-
- #003078 -
-
-
-
-
-
-
- $govuk-link-visited-colour -
- 		-
- #4c2c92 -
-
-
-
-
-
-
- govuk-colour("red") -
- 		-
- #d4351c -
-
- -`; diff --git a/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.test.ts b/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.test.ts deleted file mode 100644 index cf89cc4ff..000000000 --- a/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './HelpScoutColor.stories'; - -describe('HelpScoutColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/HelpScoutColor/__snapshots__/HelpScoutColor.test.ts.snap b/ui/design-tokens/src/Colors/HelpScoutColor/__snapshots__/HelpScoutColor.test.ts.snap deleted file mode 100644 index 3dca1d0a5..000000000 --- a/ui/design-tokens/src/Colors/HelpScoutColor/__snapshots__/HelpScoutColor.test.ts.snap +++ /dev/null @@ -1,322 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`HelpScoutColor overview 1`] = ` - -
-
-
-
- LAVENDER -
-
-
- 500 -
-
- #9fa6ff -
-
-
-
-
- -`; - -exports[`HelpScoutColor palette 1`] = ` - -
-
-
-
-
- LAVENDER -
-
-
- 500 -
-
- #9fa6ff -
-
-
-
-
-
-
-
-
-
- 100 -
-
- #f9f9ff -
-
-
-
-
-
-
-
-
-
- 200 -
-
- #ebecff -
-
-
-
-
-
-
-
-
-
- 300 -
-
- #d9dcfd -
-
-
-
-
-
-
-
-
-
- 400 -
-
- #b9beff -
-
-
-
-
-
-
-
-
-
- 500 -
-
- #9fa6ff -
-
-
-
-
-
-
-
-
-
- 600 -
-
- #818aec -
-
-
-
-
-
-
-
-
-
- 700 -
-
- #6269c5 -
-
-
-
-
-
-
-
-
-
- 800 -
-
- #404996 -
-
-
-
-
-
-
-
-
-
- 900 -
-
- #232a5c -
-
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.test.ts b/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.test.ts deleted file mode 100644 index 55c0a713b..000000000 --- a/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './IBMDLColor.stories'; - -describe('IBMDLColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/IBMDLColor/__snapshots__/IBMDLColor.test.ts.snap b/ui/design-tokens/src/Colors/IBMDLColor/__snapshots__/IBMDLColor.test.ts.snap deleted file mode 100644 index 7b2262262..000000000 --- a/ui/design-tokens/src/Colors/IBMDLColor/__snapshots__/IBMDLColor.test.ts.snap +++ /dev/null @@ -1,303 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`IBMDLColor overview 1`] = ` - -
-
-
-
- Green 10 -
-
- defbe6 -
-
-
-
- -`; - -exports[`IBMDLColor palette 1`] = ` - -
-
-
    - - - - -
-
-
-
-
-
-
-
-
-
- Red 100 -
-
- 2d0709 -
-
-
-
-
-
-
-
- Red 90 -
-
- 520408 -
-
-
-
-
-
-
-
- Red 80 -
-
- 750e13 -
-
-
-
-
-
-
-
- Red 70 -
-
- a2191f -
-
-
-
-
-
-
-
- Red 60 -
-
- da1e28 -
-
-
-
-
-
-
-
- Red 50 -
-
- fa4d56 -
-
-
-
-
-
-
-
- Red 40 -
-
- ff8389 -
-
-
-
-
-
-
-
- Red 30 -
-
- ffb3b8 -
-
-
-
-
-
-
-
- Red 20 -
-
- ffd7d9 -
-
-
-
-
-
-
-
- Red 10 -
-
- fff1f1 -
-
-
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/LightningColor/LightningColor.test.ts b/ui/design-tokens/src/Colors/LightningColor/LightningColor.test.ts deleted file mode 100644 index e56e279fb..000000000 --- a/ui/design-tokens/src/Colors/LightningColor/LightningColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './LightningColor.stories'; - -describe('LightningColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/LightningColor/__snapshots__/LightningColor.test.ts.snap b/ui/design-tokens/src/Colors/LightningColor/__snapshots__/LightningColor.test.ts.snap deleted file mode 100644 index dbe9cba7d..000000000 --- a/ui/design-tokens/src/Colors/LightningColor/__snapshots__/LightningColor.test.ts.snap +++ /dev/null @@ -1,501 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LightningColor overview 1`] = ` - - - - - - - - - - - -
-
-
- $brand-accessible -
-

- Dark variant of BRAND that is accessible with white -

-
- 		-
-
-
-
-
- rgb(0, 77, 128) -
-
- #004d80 -
-
- BRAND_ACCESSIBLE -
-
-
-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- GA -
-
-
- -`; - -exports[`LightningColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Token - - Example - - Released - - Themeable - - Support -
-
-
- $brand-disabled -
-

- Disabled state of BRAND_A11Y -

-
- 		-
-
-
-
-
- rgb(201, 199, 197) -
-
- #c9c7c5 -
-
- BRAND_DISABLED -
-
-
-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- GA -
-
-
-
-
- $brand-header -
-

- Background color a branded app header -

-
- 		-
-
-
-
-
- rgb(255, 255, 255) -
-
- #ffffff -
-
- PALETTE_GRAY_1 -
-
-
-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- I -
-
-
-
-
- $brand-header-contrast -
-

- Variant of BRAND_HEADER that is accessible with BRAND_HEADER -

-
- 		-
-
-
-
-
- rgb(94, 94, 94) -
-
- #5e5e5e -
-
- BRAND_HEADER_CONTRAST -
-
-
-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- I -
-
-
-
-
- $brand-header-contrast-warm -
-

- Variant of BRAND_HEADER_CONTRAST that provides a warm color -

-
- 		-
-
-
-
-
- rgb(191, 2, 1) -
-
- #bf0201 -
-
- BRAND_HEADER_CONTRAST_WARM -
-
-
-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- I -
-
-
-
-
- $brand-primary -
-

- Primary brand color -

-
- 		-
-
-
-
-
- rgb(21, 137, 238) -
-
- #1589ee -
-
- BRAND_PRIMARY -
-
-
-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- GA -
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.test.ts b/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.test.ts deleted file mode 100644 index 1481c9bda..000000000 --- a/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './LiquidColor.stories'; - -describe('LiquidColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/LiquidColor/__snapshots__/LiquidColor.test.ts.snap b/ui/design-tokens/src/Colors/LiquidColor/__snapshots__/LiquidColor.test.ts.snap deleted file mode 100644 index a8d044843..000000000 --- a/ui/design-tokens/src/Colors/LiquidColor/__snapshots__/LiquidColor.test.ts.snap +++ /dev/null @@ -1,511 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LiquidColor overview 1`] = ` - -
-
-
-
- #503291 -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Rich Purple -
-
- RGB (80,50,145) -
-
-
- -`; - -exports[`LiquidColor palette 1`] = ` - -
-
-
-
-
- #EB3C96 -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Vibrant Magenta -
-
- RGB (235,60,150) -
-
-
-
-
-
-
- #0F69AF -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Rich Blue -
-
- RGB (15,105,175) -
-
-
-
-
-
-
- #2DBECD -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Vibrant Cyan -
-
- RGB (45,190,205) -
-
-
-
-
-
-
- #A5CD50 -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Vibrant Green -
-
- RGB (165,205,80) -
-
-
-
-
-
-
- #E61E50 -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Rich Red -
-
- RGB (230,30,80) -
-
-
-
-
-
-
- #FFC832 -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Vibrant Yellow -
-
- RGB (255,200,50) -
-
-
-
-
-
-
- #149B5F -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Rich Green -
-
- RGB (20,155,95) -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.test.ts b/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.test.ts deleted file mode 100644 index f974c8e50..000000000 --- a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './MorningstarColor.stories'; - -describe('MorningstarColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/MorningstarColor/__snapshots__/MorningstarColor.test.ts.snap b/ui/design-tokens/src/Colors/MorningstarColor/__snapshots__/MorningstarColor.test.ts.snap deleted file mode 100644 index 60f136c4f..000000000 --- a/ui/design-tokens/src/Colors/MorningstarColor/__snapshots__/MorningstarColor.test.ts.snap +++ /dev/null @@ -1,287 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MorningstarColor overview 1`] = ` - - - - - - - - - -
-
- Informational -
- 		-
- $mds-feedback-color-info -
- 		-
- #f2f2f2 -
-
- -`; - -exports[`MorningstarColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Name - - Constant - - Color -
-
- Informational -
- 		-
- $mds-feedback-color-info -
- 		-
- #c9c7c5 -
-
-
- Error -
- 		-
- $mds-feedback-color-error -
- 		-
- #ff0000 -
-
-
- Error Background -
- 		-
- $mds-feedback-color-error-background -
- 		-
- #ffe5e5 -
-
-
- Warning -
- 		-
- $mds-feedback-color-warning -
- 		-
- #f5c400 -
-
-
- Warning Background -
- 		-
- $mds-feedback-color-warning-background -
- 		-
- #fef9e5 -
-
-
- Success -
- 		-
- $mds-feedback-color-success -
- 		-
- #00af41 -
-
-
- Success Background -
- 		-
- $mds-feedback-color-success-background -
- 		-
- #e5f7eb -
-
-
- Active -
- 		-
- $mds-interactive-color-primary-active -
- 		-
- #004376 -
-
- -`; diff --git a/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.test.ts b/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.test.ts deleted file mode 100644 index dd415e4e8..000000000 --- a/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './OPatternColor.stories'; - -describe('OPatternColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/OPatternColor/__snapshots__/OPatternColor.test.ts.snap b/ui/design-tokens/src/Colors/OPatternColor/__snapshots__/OPatternColor.test.ts.snap deleted file mode 100644 index 431439c22..000000000 --- a/ui/design-tokens/src/Colors/OPatternColor/__snapshots__/OPatternColor.test.ts.snap +++ /dev/null @@ -1,233 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`OPatternColor overview 1`] = ` - - - - - - - - - - - -
-
-
- - $weather-color - - -
- #990099 -
- 		-
- 153, 0, 153 -
- 		- 0, 100, 0, 40 -
- -`; - -exports[`OPatternColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Color - - Variable - - Hex - - RGB - - CMYK -
-
-
- - $primary-color - - -
- #107CB2 -
- 		-
- 16, 124, 178 -
- 		- 91, 30, 0, 30 -
-
-
- - $primary-color-light - - - 30% of $primary-color -
-
-
- - $alert-color - - -
- #D8400F -
- 		-
- 216, 64, 15 -
- 		- 0, 70, 93, 15 -
-
-
- - $alert-color-light - - - 30% of $alert-color -
-
-
- - $weather-color - - -
- #990099 -
- 		-
- 153, 0, 153 -
- 		- 0, 100, 0, 40 -
- -`; diff --git a/ui/design-tokens/src/Colors/PajamasColor/PajamasColor.test.ts b/ui/design-tokens/src/Colors/PajamasColor/PajamasColor.test.ts deleted file mode 100644 index e2cb58013..000000000 --- a/ui/design-tokens/src/Colors/PajamasColor/PajamasColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './PajamasColor.stories'; - -describe('PajamasColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/PajamasColor/__snapshots__/PajamasColor.test.ts.snap b/ui/design-tokens/src/Colors/PajamasColor/__snapshots__/PajamasColor.test.ts.snap deleted file mode 100644 index f123ddafb..000000000 --- a/ui/design-tokens/src/Colors/PajamasColor/__snapshots__/PajamasColor.test.ts.snap +++ /dev/null @@ -1,339 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PajamasColor overview 1`] = ` - -
-
-
-
-
- $blue-50 -
-
- #e9f3fc -
-
-
-
-
- -`; - -exports[`PajamasColor palette 1`] = ` - -
-
-
-
-
-
- $orange-50 -
-
- #fdf1dd -
-
-
-
-
-
-
-
-
-
- $orange-100 -
-
- #f5d9a8 -
-
-
-
-
-
-
-
-
-
- $orange-200 -
-
- #e9be74 -
-
-
-
-
-
-
-
-
-
- $orange-300 -
-
- #d99530 -
-
-
-
-
-
-
-
-
-
- $orange-400 -
-
- #c17d10 -
-
-
-
-
-
-
-
-
-
- $orange-500 -
-
- #ab6100 -
-
-
-
-
-
-
-
-
-
- $orange-600 -
-
- #9e5400 -
-
-
-
-
-
-
-
-
-
- $orange-700 -
-
- #8f4700 -
-
-
-
-
-
-
-
-
-
- $orange-800 -
-
- #703800 -
-
-
-
-
-
-
-
-
-
- $orange-900 -
-
- #5c2900 -
-
-
-
-
-
-
-
-
-
- $orange-950 -
-
- #421f00 -
-
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.test.ts b/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.test.ts deleted file mode 100644 index c5943f8d9..000000000 --- a/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './PatternFlyColor.stories'; - -describe('PatternFlyColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/PatternFlyColor/__snapshots__/PatternFlyColor.test.ts.snap b/ui/design-tokens/src/Colors/PatternFlyColor/__snapshots__/PatternFlyColor.test.ts.snap deleted file mode 100644 index db8f4be45..000000000 --- a/ui/design-tokens/src/Colors/PatternFlyColor/__snapshots__/PatternFlyColor.test.ts.snap +++ /dev/null @@ -1,195 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PatternFlyColor overview 1`] = ` - -
-
-
-
-
-
-
- #1d70b8 -
-
- --pf-global--link--Color -
-
-
-
- -`; - -exports[`PatternFlyColor palette 1`] = ` - -
-
-
-
-
-
-
-
- #004080 (Hover) -
-
- --pf-global--primary-color--200 -
-
-
-
-
-
-
-
-
-
-
- #0066cc -
-
- --pf-global--primary-color--100 -
-
-
-
-
-
-
-
-
-
-
- #470000 (alert icon) -
-
- --pf-global--primary-color--100 -
-
-
-
-
-
-
-
-
-
-
- #a30000 (alert title) -
-
- --pf-global--danger-color--200 -
-
-
-
-
-
-
-
-
-
-
- #c9190b (alert icon background) -
-
- --pf-global--danger-color--100 -
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.test.ts b/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.test.ts deleted file mode 100644 index 9477f0aa1..000000000 --- a/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './PhotonColor.stories'; - -describe('PhotonColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/PhotonColor/__snapshots__/PhotonColor.test.ts.snap b/ui/design-tokens/src/Colors/PhotonColor/__snapshots__/PhotonColor.test.ts.snap deleted file mode 100644 index 0530b65dd..000000000 --- a/ui/design-tokens/src/Colors/PhotonColor/__snapshots__/PhotonColor.test.ts.snap +++ /dev/null @@ -1,331 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PhotonColor overview 1`] = ` - - - - - - - - - - -
-
-
-
- Orange 50 -
-
-
-
- - #ff9400 - -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
- -`; - -exports[`PhotonColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
- Teal 50 -
-
-
-
- - #00feff - -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
-
-
-
- Teal 60 -
-
-
-
- - #00c8d7 - -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
-
-
-
- Teal 70 -
-
-
-
- - #008ea4 - -
- 		-
-
- AA -
-
- 		-
-
- AA+ -
-
-
-
-
-
- Teal 80 -
-
-
-
- - #005a71 - -
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- Teal 90 -
-
-
-
- - #002d3e - -
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.test.ts b/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.test.ts deleted file mode 100644 index e192039ff..000000000 --- a/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './PrimerColor.stories'; - -describe('PrimerColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/PrimerColor/__snapshots__/PrimerColor.test.ts.snap b/ui/design-tokens/src/Colors/PrimerColor/__snapshots__/PrimerColor.test.ts.snap deleted file mode 100644 index f39f92e28..000000000 --- a/ui/design-tokens/src/Colors/PrimerColor/__snapshots__/PrimerColor.test.ts.snap +++ /dev/null @@ -1,325 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PrimerColor overview 1`] = ` - -
-
-
-
- Yellow -
-
-
- $yellow-500 -
-
- #ffd33d -
-
-
-
-
- -`; - -exports[`PrimerColor palette 1`] = ` - -
-
-
-
-
- Yellow -
-
-
- $yellow-500 -
-
- #ffd33d -
-
-
-
-
-
-
-
-
-
- $yellow-000 -
-
- #fffdef -
-
-
-
-
-
-
-
-
-
- $yellow-100 -
-
- #fffbdd -
-
-
-
-
-
-
-
-
-
- $yellow-200 -
-
- #fff5b1 -
-
-
-
-
-
-
-
-
-
- $yellow-300 -
-
- #ffea7f -
-
-
-
-
-
-
-
-
-
- $yellow-400 -
-
- #ffdf5d -
-
-
-
-
-
-
-
-
-
- $yellow-500 -
-
- #ffd33d -
-
-
-
-
-
-
-
-
-
- $yellow-600 -
-
- #f9c513 -
-
-
-
-
-
-
-
-
-
- $yellow-700 -
-
- #dbab09 -
-
-
-
-
-
-
-
-
-
- $yellow-800 -
-
- #b08800 -
-
-
-
-
-
-
-
-
-
- $yellow-900 -
-
- #735c0f -
-
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.test.ts b/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.test.ts deleted file mode 100644 index 46a455224..000000000 --- a/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './SeedsColor.stories'; - -describe('SeedsColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/SeedsColor/__snapshots__/SeedsColor.test.ts.snap b/ui/design-tokens/src/Colors/SeedsColor/__snapshots__/SeedsColor.test.ts.snap deleted file mode 100644 index 48ad68d65..000000000 --- a/ui/design-tokens/src/Colors/SeedsColor/__snapshots__/SeedsColor.test.ts.snap +++ /dev/null @@ -1,408 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SeedsColor overview 1`] = ` - -
-
-
-
-
- RGB: 12,167,80 -
-
- CMYK: 93,0,52,35 -
-
-
-
-
-
-
-
-
-
-
- green.700 -
-
-
-
-
-
-
- green.800 -
-
-
-
-

- Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication. -

-
-
-
- -`; - -exports[`SeedsColor palette 1`] = ` - -
-
-
-
-
-
- RGB: 111,94,211 -
-
- CMYK: 47,55,0,17 -
-
-
-
-
-
-
-
-
-
-
- purple.700 -
-
-
-
-

- Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two. -

-
-
-
-
-
-
-
-
- RGB: 0,40,56 -
-
- CMYK: 100,29,0,78 -
-
-
-
-
-
-
-
-
-
-
- aqua.1100 -
-
-
-
-

- Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text. -

-
-
-
-
-
-
-
-
- RGB: 7,151,174 -
-
- CMYK: 96,13,0,32 -
-
-
-
-
-
-
-
-
-
-
- aqua.600 -
-
-
-
-

- Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking. -

-
-
-
-
-
-
-
-
- RGB: 32,121,195 -
-
- CMYK: 84,38,0,24 -
-
-
-
-
-
-
- Primary CTA -
-
-
-
-
-
- cta.primary -
-
-
-
-
-
-
- blue.700 -
-
-
-
-

-

-
-
-
-
-
-
-
- RGB: 54,65,65 -
-
- CMYK: 17,0,0,75 -
-
-
-
-
-
-
- Secondary CTA -
-
-
-
-
-
- cta.scondary -
-
-
-
-
-
-
- neutral.800 -
-
-
-
-

-

-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/SeekColor/SeekColor.test.ts b/ui/design-tokens/src/Colors/SeekColor/SeekColor.test.ts deleted file mode 100644 index 6a983c119..000000000 --- a/ui/design-tokens/src/Colors/SeekColor/SeekColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './SeekColor.stories'; - -describe('SeekColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/SeekColor/__snapshots__/SeekColor.test.ts.snap b/ui/design-tokens/src/Colors/SeekColor/__snapshots__/SeekColor.test.ts.snap deleted file mode 100644 index e0ef5b4e8..000000000 --- a/ui/design-tokens/src/Colors/SeekColor/__snapshots__/SeekColor.test.ts.snap +++ /dev/null @@ -1,223 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SeekColor overview 1`] = ` - -
-
-
-
-
-
- #071d40 -
-
- @sk-blue-darker -
-
-
- -`; - -exports[`SeekColor palette 1`] = ` - -
-
-
-
-
-
-
- #001b38 -
-
- @sk-blue-darker -
-
-
-
-
-
-
-
-
- #042763 -
-
- @sk-blue-dark -
-
-
-
-
-
-
-
-
- #0d3880 -
-
- @sk-blue -
-
-
-
-
-
-
-
-
- #184da8 -
-
- @sk-blue-light -
-
-
-
-
-
-
-
-
- #2765cf -
-
- @sk-blue-lighter -
-
-
-
-
-
-
-
-
- #e60278 -
-
- @sk-pink -
-
-
-
-
-
-
-
-
- #157e00 -
-
- @sk-green -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.test.ts b/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.test.ts deleted file mode 100644 index 0364c3892..000000000 --- a/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './SkylineColor.stories'; - -describe('SkylineColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/SkylineColor/__snapshots__/SkylineColor.test.ts.snap b/ui/design-tokens/src/Colors/SkylineColor/__snapshots__/SkylineColor.test.ts.snap deleted file mode 100644 index 241bf72b6..000000000 --- a/ui/design-tokens/src/Colors/SkylineColor/__snapshots__/SkylineColor.test.ts.snap +++ /dev/null @@ -1,765 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SkylineColor overview 1`] = ` - - - - - - - - - - - -
-
- Gray 600 -
- 		-
- -
- Yes -
-
- 		-
- -
- No -
-
- 		-
- - get-gray(600) - -
- 		-
-
-
- #757575 -
-
-
-
- -`; - -exports[`SkylineColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Name - - Use on White - - Use on Gray 200 - - Scss - - Example -
-
- Green -
- 		-
- -
- Yes -
-
- 		-
- -
- Yes -
-
- 		-
- - get-hue(green) - -
- 		-
-
-
- #1a801b -
-
-
-
-
- Green Light -
- 		-
- -
- No -
-
- 		-
- -
- No -
-
- 		-
- - get-hue(green, light) - -
- 		-
-
-
- #f4fce3 -
-
-
-
-
- Yellow -
- 		-
- -
- No -
-
- 		-
- -
- No -
-
- 		-
- - get-hue(yellow) - -
- 		-
-
-
- #fcc419 -
-
-
-
-
- Yellow Light -
- 		-
- -
- No -
-
- 		-
- -
- No -
-
- 		-
- - get-hue(yellow, light) - -
- 		-
-
-
- #fff9db -
-
-
-
-
- Gray 500 -
- 		-
- -
- No -
-
- 		-
- -
- No -
-
- 		-
- - get-gray(500) - -
- 		-
-
-
- #8b8b8b -
-
-
-
-
- Gray 600 -
- 		-
- -
- Yes -
-
- 		-
- -
- No -
-
- 		-
- - get-gray(600) - -
- 		-
-
-
- #757575 -
-
-
-
-
- Gray 700 -
- 		-
- -
- Yes -
-
- 		-
- -
- Yes -
-
- 		-
- - get-gray(700) - -
- 		-
-
-
- #616161 -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/SolidColor/SolidColor.test.ts b/ui/design-tokens/src/Colors/SolidColor/SolidColor.test.ts deleted file mode 100644 index 703b1475c..000000000 --- a/ui/design-tokens/src/Colors/SolidColor/SolidColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './SolidColor.stories'; - -describe('SolidColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/SolidColor/__snapshots__/SolidColor.test.ts.snap b/ui/design-tokens/src/Colors/SolidColor/__snapshots__/SolidColor.test.ts.snap deleted file mode 100644 index f38d6d9a7..000000000 --- a/ui/design-tokens/src/Colors/SolidColor/__snapshots__/SolidColor.test.ts.snap +++ /dev/null @@ -1,231 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SolidColor overview 1`] = ` - -
-
-
-
- .fill-red -
-
-
- #ee3322, $fill-red -
-
-
-
- -`; - -exports[`SolidColor palette 1`] = ` - -
-
-
-
-
- .fill-red -
-
-
- #ee3322, $fill-red -
-
-
-
-
-
-
-
- .fill-red-lighter -
-
-
- #feebe9, $fill-red-lighter -
-
-
-
-
-
-
-
- .fill-pink -
-
-
- #e40c78, $fill-pink -
-
-
-
-
-
-
-
- .fill-blue -
-
-
- #0f65ef, $fill-blue -
-
-
-
-
-
-
-
- .fill-purple -
-
-
- #6645dd, $fill-purple -
-
-
-
-
-
-
-
- .fill-promoted-orange -
-
-
- #ffee00, $fill-yellow -
-
-
-
-
-
-
-
- .fill-twitter -
-
-
- #55acee, $fill-twitter -
-
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/TableColor/TableColor.test.ts b/ui/design-tokens/src/Colors/TableColor/TableColor.test.ts deleted file mode 100644 index 3e9939c2d..000000000 --- a/ui/design-tokens/src/Colors/TableColor/TableColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './TableColor.stories'; - -describe('TableColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/TableColor/__snapshots__/TableColor.test.ts.snap b/ui/design-tokens/src/Colors/TableColor/__snapshots__/TableColor.test.ts.snap deleted file mode 100644 index a710424ce..000000000 --- a/ui/design-tokens/src/Colors/TableColor/__snapshots__/TableColor.test.ts.snap +++ /dev/null @@ -1,1930 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TableColor legend 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Score - - Contrast ratio - - Result -
-
-
- AAA -
-
- 		- >= 7.0:1 - - Passes - - WCAG 2.0 - - AAA -
-
-
- AA -
-
- 		- >= 4.5:1 - - Passes - - WCAG 2.0 - - AA -
-
-
- AA+ -
-
- 		- >= 3.0:1 - - Passes - - WCAG 2.0 - - Large Text AA -
-
-
- F -
-
- 		- < 3.0:1 - - AA Test failed -
- -`; - -exports[`TableColor overview 1`] = ` - - - - - - - - - - - - -
-
-
-
- #5C6AC4 -
-
-
-
- #EFEFEF -
-
-
- 		-
- primary -
- 		-
-
- AA+ -
-
- 		-
-
- AA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
- -`; - -exports[`TableColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - AA color -
- color - - name - -
-
- #FFFFFF -
-
- 		-
-
- #000000 -
-
-
-
-
-
- #FAFAF9 -
-
-
- 		-
- background -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
-
-
-
- #B6DEE2 -
-
-
- 		-
- blue -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
-
-
-
- #247BA0 -
-
-
- 		-
- blueDark -
- 		-
-
- AA+ -
-
- 		-
-
- AA -
-
-
-
-
-
- #B2E4DC -
-
-
- 		-
- green -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
-
-
-
- #2D5948 -
-
-
- 		-
- greenDark -
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- RGBA(0,0,0,.1) -
-
-
- 		-
- muted -
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- #F25F5C -
-
-
- 		-
- primary -
- 		-
-
- AA -
-
- 		-
-
- AA+ -
-
-
-
-
-
- #B51916 -
-
-
- 		-
- primaryDark -
- 		-
-
- AA+ -
-
- 		-
-
- AA -
-
-
-
-
-
- #FCBAB1 -
-
-
- 		-
- primaryLight -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
- -`; - -exports[`TableColor paletteDark 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - AA color - - AA dark -
- color / dark - - name - -
-
- #FFFFFF -
-
- 		-
-
- #000000 -
-
- 		-
-
- #FFFFFF -
-
- 		-
-
- #000000 -
-
-
-
-
-
- #454F5B -
-
-
-
- #D3D4DB -
-
-
- 		-
- text -
- 		-
-
- F -
-
- 		-
-
- AAA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- #FFFFFF -
-
-
-
- #38404A -
-
-
- 		-
- background -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
-
-
-
- #5C6AC4 -
-
-
-
- #EFEFEF -
-
-
- 		-
- primary -
- 		-
-
- AA+ -
-
- 		-
-
- AA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- #006FBB -
-
-
-
- #B4E1FA -
-
-
- 		-
- secondary -
- 		-
-
- AA+ -
-
- 		-
-
- AA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- #E6E6E6 -
-
-
-
- #E6E6E6 -
-
-
- 		-
- muted -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- #69768C -
-
-
-
- #C9CACF -
-
-
- 		-
- mutedText -
- 		-
-
- AA -
-
- 		-
-
- AA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- #F49342 -
-
-
- 		-
- accent -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
- 		- -
-
-
-
- #00044C -
-
-
- 		-
- darken -
- 		-
-
- F -
-
- 		-
-
- AAA -
-
- 		- -
-
-
-
- #F6F6F6 -
-
-
-
- #4D5866 -
-
-
- 		-
- gray -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
-
-
-
- #F6F6F6 -
-
-
-
- #000000 -
-
-
- 		-
- sidebar -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
- 		-
-
- F -
-
-
-
-
-
- #D9F2F1 -
-
-
-
- #B7ECEC -
-
-
- 		-
- highlight -
- 		-
-
- AAA -
-
- 		-
-
- F -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- #3B817D -
-
-
-
- #D9F2F1 -
-
-
- 		-
- action -
- 		-
-
- AA -
-
- 		-
-
- AA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- #027AC5 -
-
-
-
- #B3D9FF -
-
-
- 		-
- selected -
- 		-
-
- AA -
-
- 		-
-
- AA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
-
-
-
- RGBA(0, 0, 0, 0.1) -
-
-
-
- RGBA(211, 212, 219, 0.1) -
-
-
- 		-
- shadow -
- 		-
-
- F -
-
- 		-
-
- AAA -
-
- 		-
-
- F -
-
- 		-
-
- AAA -
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/UniformColor/UniformColor.test.ts b/ui/design-tokens/src/Colors/UniformColor/UniformColor.test.ts deleted file mode 100644 index 6737e676a..000000000 --- a/ui/design-tokens/src/Colors/UniformColor/UniformColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './UniformColor.stories'; - -describe('UniformColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/UniformColor/__snapshots__/UniformColor.test.ts.snap b/ui/design-tokens/src/Colors/UniformColor/__snapshots__/UniformColor.test.ts.snap deleted file mode 100644 index 571991f4d..000000000 --- a/ui/design-tokens/src/Colors/UniformColor/__snapshots__/UniformColor.test.ts.snap +++ /dev/null @@ -1,209 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`UniformColor overview 1`] = ` - - - - - - - - - -
-
-
-
-
- - Weather - - -
- 153, 0, 153 -
-
- -`; - -exports[`UniformColor palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Color - - Name - - RGBA -
-
-
-
-
- - Primary - - -
- 16, 124, 178 -
-
-
-
-
-
- - PrimaryLight - - -
- 183, 216, 232 -
-
-
-
-
-
- - Alert - - -
- 216, 64, 15 -
-
-
-
-
-
- - AlertLight - - -
- 243, 198, 183 -
-
-
-
-
-
- - Weather - - -
- 153, 0, 153 -
-
- -`; diff --git a/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.test.ts b/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.test.ts deleted file mode 100644 index 73e43285c..000000000 --- a/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './VanillaColor.stories'; - -describe('VanillaColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/VanillaColor/__snapshots__/VanillaColor.test.ts.snap b/ui/design-tokens/src/Colors/VanillaColor/__snapshots__/VanillaColor.test.ts.snap deleted file mode 100644 index fa6eeac5a..000000000 --- a/ui/design-tokens/src/Colors/VanillaColor/__snapshots__/VanillaColor.test.ts.snap +++ /dev/null @@ -1,159 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`VanillaColor overview 1`] = ` - -
-
-
-
- $color-negative -
-
- #C7162B -
-
-
- -`; - -exports[`VanillaColor palette 1`] = ` - -
-
-
-
-
- $color-x-light -
-
- #FFF -
-
-
-
-
-
-
- $color-brand -
-
- #333 -
-
-
-
-
-
-
- $color-caution -
-
- #F99B11 -
-
-
-
-
-
-
- $color-negative -
-
- #C7162B -
-
-
-
-
-
-
- $color-positive -
-
- #0E8420 -
-
-
-
-
-
-
- $color-information -
-
- #06C -
-
-
-
-
-
-
- $color-navigation-background -
-
- #FFF -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/XColor/XColor.test.ts b/ui/design-tokens/src/Colors/XColor/XColor.test.ts deleted file mode 100644 index 58771f541..000000000 --- a/ui/design-tokens/src/Colors/XColor/XColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './XColor.stories'; - -describe('XColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/XColor/__snapshots__/XColor.test.ts.snap b/ui/design-tokens/src/Colors/XColor/__snapshots__/XColor.test.ts.snap deleted file mode 100644 index b6625a0a9..000000000 --- a/ui/design-tokens/src/Colors/XColor/__snapshots__/XColor.test.ts.snap +++ /dev/null @@ -1,471 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`XColor overview 1`] = ` - -
-
-
-
-
- Lady Black -
-
-
- HEX -
-
- 3C3C3B -
-
-
-
- RGB -
-
- 60,60,59 -
-
-
-
- CMYK -
-
- 0,0,2,76 -
-
-
-
- Pantone -
-
- 447C -
-
-
- -`; - -exports[`XColor palette 1`] = ` - -
-
-
-
-
-
- Dame Tangerine -
-
-
- HEX -
-
- FF5000 -
-
-
-
- RGB -
-
- 255,80,0 -
-
-
-
- CMYK -
-
- 0,69,100,0 -
-
-
-
- Pantone -
-
- 1655C -
-
-
-
-
-
-
-
- Señor Purple -
-
-
- HEX -
-
- 5F285A -
-
-
-
- RGB -
-
- 95,40,90 -
-
-
-
- CMYK -
-
- 0,58,5,63 -
-
-
-
- Pantone -
-
- 261C -
-
-
-
-
-
-
-
- Baron Von Teal -
-
-
- HEX -
-
- 1DE9B6 -
-
-
-
- RGB -
-
- 29,233,182 -
-
-
-
- CMYK -
-
- 88,0,22,9 -
-
-
-
- Pantone -
-
- 3385C -
-
-
-
-
-
-
-
- Agent Cyan -
-
-
- HEX -
-
- 18FFFF -
-
-
-
- RGB -
-
- 24,255,255 -
-
-
-
- CMYK -
-
- 91,0,0,0 -
-
-
-
- Pantone -
-
- 3252C -
-
-
-
-
-
-
-
- Madam Yellow -
-
-
- HEX -
-
- FFF500 -
-
-
-
- RGB -
-
- 255,245,0 -
-
-
-
- CMYK -
-
- 0,4,100,0 -
-
-
-
- Pantone -
-
- 3945C -
-
-
-
-
-
-
-
- Pastor Pink -
-
-
- HEX -
-
- FF96B4 -
-
-
-
- RGB -
-
- 255,150,180 -
-
-
-
- CMYK -
-
- 0,41,29,0 -
-
-
-
- Pantone -
-
- 183C -
-
-
-
-
-
-
-
- Brigadier Blue -
-
-
- HEX -
-
- 000A47 -
-
-
-
- RGB -
-
- 0,10,71 -
-
-
-
- CMYK -
-
- 100,86,0,72 -
-
-
-
- Pantone -
-
- 274C -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.test.ts b/ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.test.ts deleted file mode 100644 index 8b4c4ee0d..000000000 --- a/ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './ZendeskColor.stories'; - -describe('ZendeskColor', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Colors/ZendeskColor/__snapshots__/ZendeskColor.test.ts.snap b/ui/design-tokens/src/Colors/ZendeskColor/__snapshots__/ZendeskColor.test.ts.snap deleted file mode 100644 index 124b6a8e8..000000000 --- a/ui/design-tokens/src/Colors/ZendeskColor/__snapshots__/ZendeskColor.test.ts.snap +++ /dev/null @@ -1,279 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ZendeskColor overview 1`] = ` - -
-
-
-
-
-
- Rich Purple -
-
- #503291 -
-
-
- -`; - -exports[`ZendeskColor palette 1`] = ` - -
-
-
-
-
-
-
- support -
-
- #00a656 -
-
-
-
-
-
-
-
-
- message -
-
- #37b8af -
-
-
-
-
-
-
-
-
- explore -
-
- #30aabc -
-
-
-
-
-
-
-
-
- gather -
-
- #f6c8be -
-
-
-
-
-
-
-
-
- guide -
-
- #ff6224 -
-
-
-
-
-
-
-
-
- connect -
-
- #ff6224 -
-
-
-
-
-
-
-
-
- chat -
-
- #f79a3e -
-
-
-
-
-
-
-
-
- talk -
-
- #efc93d -
-
-
-
-
-
-
-
-
- sell -
-
- #c38f00 -
-
-
-
-
-
-
-
-
- 100 -
-
- #f8f9f9 -
-
-
-
- -`; diff --git a/ui/design-tokens/src/Fonts/LightningFont/LightningFont.test.ts b/ui/design-tokens/src/Fonts/LightningFont/LightningFont.test.ts deleted file mode 100644 index b43f9ce1d..000000000 --- a/ui/design-tokens/src/Fonts/LightningFont/LightningFont.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as path from 'path'; -import { loadConfigurations } from '@component-controls/config'; -import { renderDocument } from '@component-controls/test-renderers'; -import { render, act } from '@testing-library/react'; -import { renderErr } from '@component-controls/test-renderers'; - -import * as examples from './LightningFont.stories'; - -describe('LightningFont', () => { - const configPath = path.resolve(__dirname, '../../../.config'); - const config = loadConfigurations(configPath); - let renderedExamples: ReturnType = []; - act(() => { - renderedExamples = renderDocument(examples, config); - }); - if (!renderedExamples) { - renderErr(); - return; - } - renderedExamples.forEach(({ name, rendered }) => { - it(name, async () => { - const { asFragment } = render(rendered); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/ui/design-tokens/src/Fonts/LightningFont/__snapshots__/LightningFont.test.ts.snap b/ui/design-tokens/src/Fonts/LightningFont/__snapshots__/LightningFont.test.ts.snap deleted file mode 100644 index 3d15266ad..000000000 --- a/ui/design-tokens/src/Fonts/LightningFont/__snapshots__/LightningFont.test.ts.snap +++ /dev/null @@ -1,393 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LightningFont overview 1`] = ` - - - - - - - - - - - -
-
-
- $brand-accessible -
-

- Dark variant of BRAND that is accessible with white -

-
- 		-
-
- BRAND_ACCESSIBLE -
-
- 		-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- GA -
-
-
- -`; - -exports[`LightningFont palette 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Token - - Example - - Released - - Themeable - - Support -
-
-
- $brand-disabled -
-

- Disabled state of BRAND_A11Y -

-
- 		-
-
- BRAND_DISABLED -
-
- 		-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- GA -
-
-
-
-
- $brand-header -
-

- Background color a branded app header -

-
- 		-
-
- PALETTE_GRAY_1 -
-
- 		-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- I -
-
-
-
-
- $brand-header-contrast -
-

- Variant of BRAND_HEADER that is accessible with BRAND_HEADER -

-
- 		-
-
- BRAND_HEADER_CONTRAST -
-
- 		-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- I -
-
-
-
-
- $brand-header-contrast-warm -
-

- Variant of BRAND_HEADER_CONTRAST that provides a warm color -

-
- 		-
-
- BRAND_HEADER_CONTRAST_WARM -
-
- 		-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- I -
-
-
-
-
- $brand-primary -
-

- Primary brand color -

-
- 		-
-
- BRAND_PRIMARY -
-
- 		-
- 2.6.0 -
- 		-
- Yes -
- 		-
-
- GA -
-
-
- -`; diff --git a/ui/design-tokens/tests/__snapshots__/component-controls.test.js.snap b/ui/design-tokens/tests/__snapshots__/component-controls.test.js.snap new file mode 100644 index 000000000..52149725f --- /dev/null +++ b/ui/design-tokens/tests/__snapshots__/component-controls.test.js.snap @@ -0,0 +1,18844 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`component-controls generated Design Tokens/Colors/AltaColor hsl 1`] = ` + +
+
+
+
+
+
+ accent +
+
+ HEX: #8c7873 +
+
+ RGB: 140, 120, 115 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AltaColor hsla 1`] = ` + +
+
+
+
+
+
+ accent +
+
+ HEX: #8c7873 +
+
+ RGB: 140, 120, 115 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AltaColor name 1`] = ` + +
+
+
+
+
+
+ brand +
+
+ HEX: #e95b54 +
+
+ RGB: 233, 91, 84 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AltaColor overview 1`] = ` + +
+
+
+
+
+
+ #fbce4a +
+
+ HEX: #fbce4a +
+
+ RGB: 251, 206, 74 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AltaColor palette 1`] = ` + +
+
+
+
+
+
+
+ color-1 +
+
+ HEX: #fbce4a +
+
+ RGB: 251, 206, 74 +
+
+
+
+
+
+
+
+
+ color-2 +
+
+ HEX: #fcfbe8 +
+
+ RGB: 252, 251, 232 +
+
+
+
+
+
+
+
+
+ color-3 +
+
+ HEX: #fff4d5 +
+
+ RGB: 255, 244, 213 +
+
+
+
+
+
+
+
+
+ color-4 +
+
+ HEX: #f6cab7 +
+
+ RGB: 246, 202, 183 +
+
+
+
+
+
+
+
+
+ color-5 +
+
+ HEX: #ec96ad +
+
+ RGB: 236, 150, 173 +
+
+
+
+
+
+
+
+
+ color-6 +
+
+ HEX: #ca589d +
+
+ RGB: 202, 88, 157 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AltaColor rgb 1`] = ` + +
+
+
+
+
+
+ text +
+
+ HEX: #000000 +
+
+ RGB: 0, 0, 0 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AltaColor rgba 1`] = ` + +
+
+
+
+
+
+ shadow +
+
+ HEX: #000000 +
+
+ RGB: 0, 0, 0, 0.1 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdHorzColor hsl 1`] = ` + +
+
+
+
+ accent +
+
+ #8c7873 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdHorzColor hsla 1`] = ` + +
+
+
+
+ accent +
+
+ #8c7873 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdHorzColor name 1`] = ` + +
+
+
+
+ brand +
+
+ #e95b54 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdHorzColor overview 1`] = ` + +
+
+
+
+ #cf1322 +
+
+ 207, 19, 34 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdHorzColor palette 1`] = ` + +
+
+
+
+
+ red-1 +
+
+ #fff1f0 +
+
+
+
+
+
+
+
+ red-2 +
+
+ #ffccc7 +
+
+
+
+
+
+
+
+ red-3 +
+
+ #ffa39e +
+
+
+
+
+
+
+
+ red-4 +
+
+ #ff7875 +
+
+
+
+
+
+
+
+ red-5 +
+
+ #ff4d4f +
+
+
+
+
+
+
+
+ red-6 +
+
+ #f5222d +
+
+
+
+
+
+
+
+ red-7 +
+
+ #cf1322 +
+
+
+
+
+
+
+
+ red-8 +
+
+ #a8071a +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdHorzColor rgb 1`] = ` + +
+
+
+
+ text +
+
+ #000000 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdHorzColor rgba 1`] = ` + +
+
+
+
+ shadow +
+
+ #000000 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdVertColor hsl 1`] = ` + +
+
+
+
+ accent +
+
+ #8c7873 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdVertColor hsla 1`] = ` + +
+
+
+
+ accent +
+
+ #8c7873 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdVertColor name 1`] = ` + +
+
+
+
+ brand +
+
+ #e95b54 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdVertColor overview 1`] = ` + +
+
+
+
+ #cf1322 +
+
+ 207, 19, 34 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdVertColor palette 1`] = ` + +
+
+
+
+
+ green-1 +
+
+ #f6ffed +
+
+
+
+
+
+
+
+ green-2 +
+
+ #d9f7be +
+
+
+
+
+
+
+
+ green-3 +
+
+ #b7eb8f +
+
+
+
+
+
+
+
+ green-4 +
+
+ #95de64 +
+
+
+
+
+
+
+
+ green-5 +
+
+ #73d13d +
+
+
+
+
+
+
+
+ green-6 +
+
+ #52c41a +
+
+
+
+
+
+
+
+ green-7 +
+
+ #389e0d +
+
+
+
+
+
+
+
+ green-8 +
+
+ #237804 +
+
+
+
+
+
+
+
+ green-9 +
+
+ #135200 +
+
+
+
+
+
+
+
+ green-10 +
+
+ #092b00 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdVertColor rgb 1`] = ` + +
+
+
+
+ text +
+
+ #000000 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AntdVertColor rgba 1`] = ` + +
+
+
+
+ shadow +
+
+ #000000 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AnvilColor hsl 1`] = ` + +
+
+
+
+
+
+
+

+ accent +

+
+ HEX: #8c7873 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AnvilColor hsla 1`] = ` + +
+
+
+
+
+
+
+

+ accent +

+
+ HEX: #8c7873 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AnvilColor name 1`] = ` + +
+
+
+
+
+
+
+

+ Critical +

+
+ brand #f94d32 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AnvilColor overview 1`] = ` + +
+
+
+
+
+
+
+

+ Brand +

+
+ Blue400 #2270ee +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AnvilColor palette 1`] = ` + +
+
+
+
+
+
+
+
+

+ Critical +

+
+ Red400 #f94d32 +
+
+
+
+
+
+
+
+
+
+

+ Warning +

+
+ Yellow400 #ffc902 +
+
+
+
+
+
+
+
+
+
+

+ Success +

+
+ Green500 #18a761 +
+
+
+
+
+
+
+
+
+
+

+ Info +

+
+ Blue400 #2270ee +
+
+
+
+
+
+
+
+
+
+

+ Border +

+
+ Neutral60 #dfe0e1 +
+
+
+
+
+
+
+
+
+
+

+ Accent +

+
+ Neutral40 #f5f5f5 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AnvilColor rgb 1`] = ` + +
+
+
+
+
+
+
+

+ text +

+
+ HEX: #000000 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AnvilColor rgba 1`] = ` + +
+
+
+
+
+
+
+

+ shadow +

+
+ HEX: #000000 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AtlassianColor hsl 1`] = ` + +
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+
+
+
+
+
+ NAME +
+
+ accent +
+
+
+
+
+ HEX +
+
+ #8C7873 +
+
+
+
+ RGB +
+
+ 140, 120, 115 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AtlassianColor hsla 1`] = ` + +
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+
+
+
+
+
+ NAME +
+
+ accent +
+
+
+
+
+ HEX +
+
+ #8C7873 +
+
+
+
+ RGB +
+
+ 140, 120, 115 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AtlassianColor name 1`] = ` + +
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+
+
+
+
+
+ NAME +
+
+ brand - Critical +
+
+
+
+
+ HEX +
+
+ #F94D32 +
+
+
+
+ RGB +
+
+ 249, 77, 50 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AtlassianColor overview 1`] = ` + +
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+
+
+
+
+
+ NAME +
+
+ Blue400 +
+
+
+
+
+ HEX +
+
+ #2270EE +
+
+
+
+ RGB +
+
+ 34, 112, 238 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AtlassianColor palette 1`] = ` + +
+
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+
+
+
+
+
+ NAME +
+
+ R300 - Poppy surprise +
+
+
+
+
+ HEX +
+
+ #FF5630 +
+
+
+
+ RGB +
+
+ 255, 86, 48 +
+
+
+
+
+
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+ + A + + + FAIL + +
+
+
+
+
+
+
+ NAME +
+
+ Y300 - Golden state +
+
+
+
+
+ HEX +
+
+ #FFAB00 +
+
+
+
+ RGB +
+
+ 255, 171, 0 +
+
+
+
+
+
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+ + A + + + FAIL + +
+
+
+
+
+
+
+ NAME +
+
+ G300 - Fine pine +
+
+
+
+
+ HEX +
+
+ #36B37E +
+
+
+
+ RGB +
+
+ 54, 179, 126 +
+
+
+
+
+
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+ + A + + + FAIL + +
+
+
+
+
+
+
+ NAME +
+
+ T300 - Tamarama +
+
+
+
+
+ HEX +
+
+ #00B8D9 +
+
+
+
+ RGB +
+
+ 0, 184, 217 +
+
+
+
+
+
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+
+
+
+
+
+ NAME +
+
+ P300 - Da' juice +
+
+
+
+
+ HEX +
+
+ #6554C0 +
+
+
+
+ RGB +
+
+ 101, 84, 192 +
+
+
+
+
+
+
+
+
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+ + A + + + FAIL + +
+
+
+
+
+
+
+ NAME +
+
+ Red400 - Critical +
+
+
+
+
+ HEX +
+
+ #F94D32 +
+
+
+
+ RGB +
+
+ 249, 77, 50 +
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AtlassianColor rgb 1`] = ` + +
+
+
+
+
+ + A + + + FAIL + +
+
+ + A + + + FAIL + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+
+
+
+
+
+ NAME +
+
+ text +
+
+
+
+
+ HEX +
+
+ #000000 +
+
+
+
+ RGB +
+
+ 0, 0, 0 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AtlassianColor rgba 1`] = ` + +
+
+
+
+
+ + A + + + FAIL + +
+
+ + A + + + FAIL + +
+
+ + A + + + PASS + +
+
+ + A + + + PASS + +
+
+
+
+
+
+
+ NAME +
+
+ shadow +
+
+
+
+
+ HEX +
+
+ #000000 +
+
+
+
+ RGB +
+
+ 0, 0, 0, 0.1 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AudiDSColor hsl 1`] = ` + +
+
+
+
+
+
+
+ accent +
+
+
+
+ RGB: 140/120/115 +
+
+ HEX: #8c7873 +
+
+ CMYK: 0/14/18/45 +
+
+ Pantone 409C +
+
+ RAL: 7048 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AudiDSColor hsla 1`] = ` + +
+
+
+
+
+
+
+ accent +
+
+
+
+ RGB: 140/120/115 +
+
+ HEX: #8c7873 +
+
+ CMYK: 0/14/18/45 +
+
+ Pantone 409C +
+
+ RAL: 7048 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AudiDSColor name 1`] = ` + +
+
+
+
+
+
+
+ Critical +
+
+
+
+ RGB: 249/77/50 +
+
+ HEX: #f94d32 +
+
+ CMYK: 0/69/80/2 +
+
+ Pantone 171C +
+
+ RAL: 3028 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AudiDSColor overview 1`] = ` + +
+
+
+
+
+
+
+ Brand +
+
+
+
+ RGB: 34/112/238 +
+
+ HEX: #2270ee +
+
+ CMYK: 86/53/0/7 +
+
+ Pantone 2726C +
+
+ RAL: 5002 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AudiDSColor palette 1`] = ` + +
+
+
+
+
+
+
+
+ Poppy surprise +
+
+
+
+ RGB: 255/86/48 +
+
+ HEX: #ff5630 +
+
+ CMYK: 0/66/81/0 +
+
+ Pantone 171C +
+
+ RAL: 2004 +
+
+
+
+
+
+
+
+
+
+
+ Golden state +
+
+
+
+ RGB: 255/171/0 +
+
+ HEX: #ffab00 +
+
+ CMYK: 0/33/100/0 +
+
+ Pantone 137C +
+
+ RAL: 1003 +
+
+
+
+
+
+
+
+
+
+
+ Fine pine +
+
+
+
+ RGB: 54/179/126 +
+
+ HEX: #36b37e +
+
+ CMYK: 70/0/30/30 +
+
+ Pantone 339C +
+
+ RAL: 6024 +
+
+
+
+
+
+
+
+
+
+
+ Tamarama +
+
+
+
+ RGB: 0/184/217 +
+
+ HEX: #00b8d9 +
+
+ CMYK: 100/15/0/15 +
+
+ Pantone 3125C +
+
+ RAL: 5012 +
+
+
+
+
+
+
+
+
+
+
+ Da' juice +
+
+
+
+ RGB: 101/84/192 +
+
+ HEX: #6554c0 +
+
+ CMYK: 47/56/0/25 +
+
+ Pantone 2725C +
+
+ RAL: 5002 +
+
+
+
+
+
+
+
+
+
+
+ Critical +
+
+
+
+ RGB: 249/77/50 +
+
+ HEX: #f94d32 +
+
+ CMYK: 0/69/80/2 +
+
+ Pantone 171C +
+
+ RAL: 3028 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AudiDSColor rgb 1`] = ` + +
+
+
+
+
+
+
+ text +
+
+
+
+ RGB: 0/0/0 +
+
+ HEX: #000000 +
+
+ CMYK: 0/0/0/100 +
+
+ Pantone 419C +
+
+ RAL: 9005 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/AudiDSColor rgba 1`] = ` + +
+
+
+
+
+
+
+ shadow +
+
+
+
+ RGB: 0/0/0/0.1 +
+
+ HEX: #000000 +
+
+ CMYK: 0/0/0/100 +
+
+ Pantone 419C +
+
+ RAL: 9005 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BackpackColor hsl 1`] = ` + +
+
+
+
+
+ accent +
+
+
+
+ RGB 140, 120, 115 +
+
+ HEX #8c7873 +
+
+ CMYK: 0, 14, 18, 45 +
+
+ PMS 409C +
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BackpackColor hsla 1`] = ` + +
+
+
+
+
+ accent +
+
+
+
+ RGB 140, 120, 115 +
+
+ HEX #8c7873 +
+
+ CMYK: 0, 14, 18, 45 +
+
+ PMS 409C +
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BackpackColor name 1`] = ` + +
+
+
+
+
+ Critical brand +
+
+
+
+ RGB 249, 77, 50 +
+
+ HEX #f94d32 +
+
+ CMYK: 0, 69, 80, 2 +
+
+ PMS 171C +
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BackpackColor overview 1`] = ` + +
+
+
+
+
+
+ Brand +
+
+
+
+ light: Blue400 +
+
+ dark: Blue800 +
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BackpackColor palette 1`] = ` + +
+
+
+
+
+
+ Poppy surprise R300 +
+
+
+
+ RGB 255, 86, 48 +
+
+ HEX #ff5630 +
+
+ CMYK: 0, 66, 81, 0 +
+
+ PMS 171C +
+
+
+
+
+
+
+
+
+
+
+
+ Golden state Y300 +
+
+
+
+ RGB 255, 171, 0 +
+
+ HEX #ffab00 +
+
+ CMYK: 0, 33, 100, 0 +
+
+ PMS 137C +
+
+
+
+
+
+
+
+
+
+
+
+ Fine pine G300 +
+
+
+
+ RGB 54, 179, 126 +
+
+ HEX #36b37e +
+
+ CMYK: 70, 0, 30, 30 +
+
+ PMS 339C +
+
+
+
+
+
+
+
+
+
+
+
+
+ Tamarama +
+
+
+
+ light: T300 +
+
+ dark: #084eb2 +
+
+
+
+
+
+
+
+
+
+
+
+ Da' juice P300 +
+
+
+
+ RGB 101, 84, 192 +
+
+ HEX #6554c0 +
+
+ CMYK: 47, 56, 0, 25 +
+
+ PMS 2725C +
+
+
+
+
+
+
+
+
+
+
+
+ Critical Red400 +
+
+
+
+ RGB 249, 77, 50 +
+
+ HEX #f94d32 +
+
+ CMYK: 0, 69, 80, 2 +
+
+ PMS 171C +
+
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BackpackColor rgb 1`] = ` + +
+
+
+
+
+ text +
+
+
+
+ RGB 0, 0, 0 +
+
+ HEX #000000 +
+
+ CMYK: 0, 0, 0, 100 +
+
+ PMS 419C +
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BackpackColor rgba 1`] = ` + +
+
+
+
+
+ shadow +
+
+
+
+ RGB 0, 0, 0, 0.1 +
+
+ HEX #000000 +
+
+ CMYK: 0, 0, 0, 100 +
+
+ PMS 419C +
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BaseWebColor overview 1`] = ` + + + + + + + + + +
+
+
+
+
+
+ cobalt400 +
+ 		+
+ #0E1FC1 +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BaseWebColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ yellow50 +
+ 		+
+ #FFFAF0 +
+
+
+
+
+
+
+ yellow100 +
+ 		+
+ #FFF2D9 +
+
+
+
+
+
+
+ yellow200 +
+ 		+
+ #FFE3AC +
+
+
+
+
+
+
+ yellow300 +
+ 		+
+ #FFCF70 +
+
+
+
+
+
+
+ yellow400 +
+ 		+
+ #FFC043 +
+
+
+
+
+
+
+ yellow500 +
+ 		+
+ #BC8B2C +
+
+
+
+
+
+
+ yellow600 +
+ 		+
+ #997328 +
+
+
+
+
+
+
+ yellow700 +
+ 		+
+ #674D1B +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BeelineColor hsl 1`] = ` + +
+
+
+
+
+
+
+ accent +
+
+
+
+
+ HEX: +
+
+ #8c7873 +
+
+
+
+ RGB: +
+
+ rgb(140,120,115) +
+
+
+
+ Pantone: +
+
+ 409C: +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BeelineColor hsla 1`] = ` + +
+
+
+
+
+
+
+ accent +
+
+
+
+
+ HEX: +
+
+ #8c7873 +
+
+
+
+ RGB: +
+
+ rgb(140,120,115) +
+
+
+
+ Pantone: +
+
+ 409C: +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BeelineColor name 1`] = ` + +
+
+
+
+
+
+
+ Critical +
+
+
+
+
+ HEX: +
+
+ #f94d32 +
+
+
+
+ RGB: +
+
+ rgb(249,77,50) +
+
+
+
+ Pantone: +
+
+ 171C: +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BeelineColor overview 1`] = ` + +
+
+
+
+
+
+
+ Brand +
+
+
+
+
+ HEX: +
+
+ #2270ee +
+
+
+
+ RGB: +
+
+ rgb(34,112,238) +
+
+
+
+ Pantone: +
+
+ 2726C: +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BeelineColor palette 1`] = ` + +
+
+
+
+
+
+
+
+ Blue 5 +
+
+
+
+
+ HEX: +
+
+ #001b38 +
+
+
+
+ RGB: +
+
+ rgb(0,27,56) +
+
+
+
+ Pantone: +
+
+ 289C: +
+
+
+
+
+
+
+
+
+
+
+
+ Blue Accessibility +
+
+
+
+
+ HEX: +
+
+ #0352a0 +
+
+
+
+ RGB: +
+
+ rgb(3,82,160) +
+
+
+
+ Pantone: +
+
+ 2945C: +
+
+
+
+
+
+
+
+
+
+
+
+ Blue Primary +
+
+
+
+
+ HEX: +
+
+ #0575e6 +
+
+
+
+ RGB: +
+
+ rgb(5,117,230) +
+
+
+
+ Pantone: +
+
+ 2727C: +
+
+
+
+
+
+
+
+
+
+
+
+ Blue 1 +
+
+
+
+
+ HEX: +
+
+ #4fa7ff +
+
+
+
+ RGB: +
+
+ rgb(79,167,255) +
+
+
+
+ Pantone: +
+
+ 279C: +
+
+
+
+
+
+
+
+
+
+
+
+ Blue 2 +
+
+
+
+
+ HEX: +
+
+ #85dfff +
+
+
+
+ RGB: +
+
+ rgb(133,223,255) +
+
+
+
+ Pantone: +
+
+ 636C: +
+
+
+
+
+
+
+
+
+
+
+
+ Blue 3 +
+
+
+
+
+ HEX: +
+
+ #ecf5ff +
+
+
+
+ RGB: +
+
+ rgb(236,245,255) +
+
+
+
+ Pantone: +
+
+ 656C: +
+
+
+
+
+
+
+
+
+
+
+
+ Blue 4 +
+
+
+
+
+ HEX: +
+
+ #fbfdff +
+
+
+
+ RGB: +
+
+ rgb(251,253,255) +
+
+
+
+ Pantone: +
+
+ 656C: +
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BeelineColor rgb 1`] = ` + +
+
+
+
+
+
+
+ text +
+
+
+
+
+ HEX: +
+
+ #000000 +
+
+
+
+ RGB: +
+
+ rgb(0,0,0) +
+
+
+
+ Pantone: +
+
+ 419C: +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BeelineColor rgba 1`] = ` + +
+
+
+
+
+
+
+ shadow +
+
+
+
+
+ HEX: +
+
+ #000000 +
+
+
+
+ RGB: +
+
+ rgb(0,0,0,0.1) +
+
+
+
+ Pantone: +
+
+ 419C: +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BoltColor overview 1`] = ` + +
+
+
+
+
+ Brand +
+
+ #2270ee +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-navy) +
+ Text size + + Aa + + Aa +
+ #ffffff (4.55) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+ #000000 (4.62) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/BoltColor palette 1`] = ` + +
+
+
+
+
+
+ Navy +
+
+ #001f5f +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-navy) +
+ Text size + + Aa + + Aa +
+ #ffffff (15.43) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+ #000000 (1.36) + +
+
+ fail + +
+
+ 		+
+
+ fail + +
+
+
+
+
+
+
+
+
+
+
+
+ Teal +
+
+ #10a5ac +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-teal) +
+ Text size + + Aa + + Aa +
+ #ffffff (3.00) + +
+
+ pass + +
+
+ 		+
+
+ fail + +
+
+
+ #000000 (7.00) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+
+
+
+
+
+
+
+
+
+ Orange +
+
+ #f76923 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-orange) +
+ Text size + + Aa + + Aa +
+ #ffffff (3.00) + +
+
+ pass + +
+
+ 		+
+
+ fail + +
+
+
+ #000000 (7.00) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+
+
+
+
+
+
+
+
+
+ Yellow +
+
+ #ffc836 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-yellow) +
+ Text size + + Aa + + Aa +
+ #ffffff (1.55) + +
+
+ fail + +
+
+ 		+
+
+ fail + +
+
+
+ #000000 (13.57) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+
+
+
+
+
+
+
+
+
+ Wine +
+
+ #661d34 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-wine) +
+ Text size + + Aa + + Aa +
+ #ffffff (11.73) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+ #000000 (1.79) + +
+
+ fail + +
+
+ 		+
+
+ fail + +
+
+
+
+
+
+
+
+
+
+
+
+ Pink +
+
+ #e63690 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-pink) +
+ Text size + + Aa + + Aa +
+ #ffffff (3.97) + +
+
+ pass + +
+
+ 		+
+
+ fail + +
+
+
+ #000000 (5.29) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+
+
+
+
+
+
+
+
+
+ Berry +
+
+ #ac1361 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-berry) +
+ Text size + + Aa + + Aa +
+ #ffffff (6.95) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+ #000000 (3.02) + +
+
+ pass + +
+
+ 		+
+
+ fail + +
+
+
+
+
+
+
+
+
+
+
+
+ Violet +
+
+ #5f67b9 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-violet) +
+ Text size + + Aa + + Aa +
+ #ffffff (5.09) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+ #000000 (4.13) + +
+
+ pass + +
+
+ 		+
+
+ fail + +
+
+
+
+
+
+
+
+
+
+
+
+ Gray +
+
+ #8d8e99 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-gray) +
+ Text size + + Aa + + Aa +
+ #ffffff (3.25) + +
+
+ pass + +
+
+ 		+
+
+ fail + +
+
+
+ #000000 (6.46) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+
+
+
+
+
+
+
+
+
+ Black +
+
+ #151619 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-black) +
+ Text size + + Aa + + Aa +
+ #ffffff (18.09) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+ #000000 (1.16) + +
+
+ fail + +
+
+ 		+
+
+ fail + +
+
+
+
+
+
+
+
+
+
+
+
+ White +
+
+ #ffffff +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ var(--bolt-color-white) +
+ Text size + + Aa + + Aa +
+ #ffffff (1.00) + +
+
+ fail + +
+
+ 		+
+
+ fail + +
+
+
+ #000000 (21.00) + +
+
+ pass + +
+
+ 		+
+
+ pass + +
+
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/CanvasColor overview 1`] = ` + +
+
+
+
+ Primary +
+
+
+
+
+ LORAX +
+ #ff7a59 +
+
+
+ $color-lorax +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/CanvasColor palette 1`] = ` + +
+
+
+
+
+ Primary +
+
+
+
+
+ SORBET +
+ #ff8f59 +
+
+
+ $color-sorbet +
+
+
+
+
+
+
+
+
+ Shade +
+
+
+
+
+ SORBET_DARK +
+ #e68250 +
+
+
+ $color-sorbet-dark +
+
+
+
+
+
+
+
+
+ Medium Tint +
+
+
+
+
+ SORBET_MEDIUM +
+ #ffc7ac +
+
+
+ $color-sorbet-medium +
+
+
+
+
+
+
+
+
+ Light Tint +
+
+
+
+
+ SORBET_LIGHT +
+ #fff3ee +
+
+
+ $color-sorbet-light +
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/CedarColor overview 1`] = ` + + + + + + + + + +
+
+
+
+
+
+
+
+
+ cdr-color-text-button-primary-hover +
+
+ Text color for the hover state of primary buttons +
+
+ 		+
+ #225c4e +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/CedarColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+ cdr-color-text-primary +
+
+ The default, primary text color +
+
+ 		+
+ #0c0b08 +
+
+
+
+
+
+
+
+
+
+ cdr-color-text-secondary +
+
+ The secondary text color +
+
+ 		+
+ #423b2f +
+
+
+
+
+
+
+
+
+
+ cdr-color-text-brand +
+
+ Text set in our primary brand color +
+
+ 		+
+ #113731 +
+
+
+
+
+
+
+
+
+
+ cdr-color-text-sale +
+
+ The color of sale text +
+
+ 		+
+ #cc0000 +
+
+
+
+
+
+
+
+
+
+ cdr-color-text-inverse +
+
+ Text color on dark background +
+
+ 		+
+ #f9f8f6 +
+
+
+
+
+
+
+
+
+
+ cdr-color-text-disabled +
+
+ The color of text when it is disabled +
+
+ 		+
+ #d1cbbd +
+
+
+
+
+
+
+
+
+
+ cdr-color-text-success +
+
+ Color of success messages +
+
+ 		+
+ #2e6b34 +
+
+
+
+
+
+
+
+
+
+ cdr-color-text-warning +
+
+ Color of warning messages +
+
+ 		+
+ #854714 +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/CometColor overview 1`] = ` + + + + + + + + + + +
+
+ 40 +
+ 		+ $comet-color-emerald-40 + +
+ #2F9D89 +
+ 		+
+
+ AA +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/CometColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 05 +
+ 		+ $comet-color-midnight-05 + +
+ #020D17 +
+ 		+
+
+ AAA +
+
+
+
+ 10 +
+ 		+ $comet-color-midnight-10 + +
+ #041B2F +
+ 		+
+
+ AAA +
+
+
+
+ 20 +
+ 		+ $comet-color-midnight-20 + +
+ #08365E +
+ 		+
+
+ AAA +
+
+
+
+ 30 +
+ 		+ $comet-color-midnight-30 + +
+ #0C518D +
+ 		+
+
+ AAA +
+
+
+
+ 40 +
+ 		+ $comet-color-midnight-40 + +
+ #106CBC +
+ 		+
+
+ AA +
+
+
+
+ 50 +
+ 		+ $comet-color-midnight-50 + +
+ #1487EB +
+ 		+
+
+ AA +
+
+
+
+ 60 +
+ 		+ $comet-color-midnight-60 + +
+ #439FEF +
+ 		+
+
+ AAA +
+
+
+
+ 70 +
+ 		+ $comet-color-midnight-70 + +
+ #72B7F3 +
+ 		+
+
+ AAA +
+
+
+
+ 80 +
+ 		+ $comet-color-midnight-80 + +
+ #A1CFF7 +
+ 		+
+
+ AAA +
+
+
+
+ 90 +
+ 		+ $comet-color-midnight-90 + +
+ #D0E7FB +
+ 		+
+
+ AAA +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/DuetColor overview 1`] = ` + + + + + + + + + + + +
+
+
+
+
+ #004d80 +
+
+ rgb(0, 77, 128) +
+
+
+ Primary Blue Dark +
+

+ Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background. +

+ 		+ + $color-primary-dark + + + var(--color-primary-dark) + + + + 8.85:1 + + + + +
+ +`; + +exports[`component-controls generated Design Tokens/Colors/DuetColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Example + + Description + + Token + + Contrast + + Status +
+
+
+
+
+ #de2362 +
+
+ rgb(222, 35, 98) +
+
+
+ Status Danger +
+

+ Danger red that is accessible with white. Only used in special cases like form validation and messaging. +

+ 		+ + $color-danger + + + var(--color-danger) + + + + 4.64:1 + + + + +
+
+
+
+
+ #f7b228 +
+
+ rgb(247, 178, 40) +
+
+
+ Status Warning +
+

+ Warning orange (non-accessible) is only used in special cases like form validation and messaging. +

+ 		+ + $color-warning + + + var(--color-warning) + + + + 1.85:1 + + + + +
+
+
+
+
+ #00875a +
+
+ rgb(0, 135, 90) +
+
+
+ Status Success +
+

+ Success green that is accessible with white. Only used in special cases like form validation and messaging. +

+ 		+ + $color-success + + + var(--color-success) + + + + 4.55:1 + + + + +
+
+
+
+
+ #657787 +
+
+ rgb(101, 119, 135) +
+
+
+ Gray Darker +
+

+ Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. +

+ 		+ + $color-gray-darker + + + var(--color-gray-darker) + + + + 4.62:1 + + + + +
+
+
+
+
+ #909599 +
+
+ rgb(144, 149, 153) +
+
+
+ Gray Dark +
+

+ Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. +

+ 		+ + $color-gray-dark + + + var(--color-gray-dark) + + + + 3.02:1 + + + + +
+
+
+
+
+ #7a01c4 +
+
+ rgb(122, 1, 196) +
+
+
+ Data 01 +
+

+ Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. +

+ 		+ + $color-data-01 + + + var(--color-data-01) + + + + 7.99:1 + + + + +
+
+
+
+
+ #c21565 +
+
+ rgb(194, 21, 101) +
+
+
+ Data 06 +
+

+ Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. +

+ 		+ + $color-data-06 + + + var(--color-data-06) + + + + 5.85:1 + + + + +
+ +`; + +exports[`component-controls generated Design Tokens/Colors/ETradeColor overview 1`] = ` + +
+
+
+
+ Negative red +
+
+ #cc0000 +
+
+
+ $negative +
+
+
+
+
+
+ Error state +
+
+ Data trending down +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/ETradeColor palette 1`] = ` + +
+
+
+
+
+ Purple +
+
+ #5627d8 +
+
+
+ $link-color +
+
+
+
+
+
+
+ Text links and other interactive elements +
+
+
+
+
+
+
+
+ Negative red +
+
+ #cc0000 +
+
+
+ $negative +
+
+
+
+
+
+ Error state +
+
+ Data trending down +
+
+
+
+
+
+
+
+ Positive green +
+
+ #107a1b +
+
+ .text-positive +
+
+ $positive +
+
+
+
+
+
+ Success state +
+
+ Data trending up +
+
+
+
+
+
+
+
+ Body gray +
+
+ #242424 +
+
+ .body-text-color +
+
+ $body-text-color +
+
+
+
+
+
+
+ Headers and body text +
+
+
+
+
+
+
+
+ Background accent color +
+
+ #f1ecff +
+
+ .background-accent-color-1 +
+
+ $background-accent-color-1 +
+
+
+
+
+
+
+ Background color +
+
+ + Not for text +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/FinastraColor overview 1`] = ` + +
+
+
+
+ V +
+
+
+
+
+ V 100 +
+
+ #cf1322 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/FinastraColor palette 1`] = ` + +
+
+
+
+
+ +
+
+
+
+
+ C 100 - dark +
+
+ #2d2d2d +
+
+
+
+
+
+
+ C +
+
+
+
+
+ C 100 +
+
+ #414141 +
+
+
+
+
+
+
+ +
+
+
+
+
+ C 75 +
+
+ #707070 +
+
+
+
+
+
+
+ +
+
+
+
+
+ C 50 +
+
+ #9f9f9f +
+
+
+
+
+
+
+ +
+
+
+
+
+ C 25 +
+
+ #cecece +
+
+
+
+
+
+
+ +
+
+
+
+
+ C 10 +
+
+ #eaeaea +
+
+
+
+
+
+
+ +
+
+
+
+
+ C 2 +
+
+ #fafafa +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/FishTankColor overview 1`] = ` + +
+
+
+
+ $color-selected-darkest +
+
+ #0A7DAF +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/FishTankColor palette 1`] = ` + +
+
+
+
+
+ $color-highlight-1 +
+
+ #FFF8B0 +
+
+
+
+
+
+
+
+ $color-highlight-2 +
+
+ #E3F7FF +
+
+
+
+
+
+
+
+ $color-highlight-3 +
+
+ #E0FFE0 +
+
+
+
+
+
+
+
+ $color-action +
+
+ #3DA774 +
+
+
+
+
+
+
+
+ $color-warning +
+
+ #FFB511 +
+
+
+
+
+
+
+
+ $color-error +
+
+ #E1483E +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/GovUKColor overview 1`] = ` + + + + + + + + + +
+
+
+
+
+
+ $govuk-brand-colour +
+ 		+
+ #1d70b8 +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/GovUKColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ $govuk-brand-colour +
+ 		+
+ #1d70b8 +
+
+
+
+
+
+
+ $govuk-link-hover-colour +
+ 		+
+ #003078 +
+
+
+
+
+
+
+ $govuk-link-visited-colour +
+ 		+
+ #4c2c92 +
+
+
+
+
+
+
+ govuk-colour("red") +
+ 		+
+ #d4351c +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/HelpScoutColor overview 1`] = ` + +
+
+
+
+ LAVENDER +
+
+
+ 500 +
+
+ #9fa6ff +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/HelpScoutColor palette 1`] = ` + +
+
+
+
+
+ LAVENDER +
+
+
+ 500 +
+
+ #9fa6ff +
+
+
+
+
+
+
+
+
+
+ 100 +
+
+ #f9f9ff +
+
+
+
+
+
+
+
+
+
+ 200 +
+
+ #ebecff +
+
+
+
+
+
+
+
+
+
+ 300 +
+
+ #d9dcfd +
+
+
+
+
+
+
+
+
+
+ 400 +
+
+ #b9beff +
+
+
+
+
+
+
+
+
+
+ 500 +
+
+ #9fa6ff +
+
+
+
+
+
+
+
+
+
+ 600 +
+
+ #818aec +
+
+
+
+
+
+
+
+
+
+ 700 +
+
+ #6269c5 +
+
+
+
+
+
+
+
+
+
+ 800 +
+
+ #404996 +
+
+
+
+
+
+
+
+
+
+ 900 +
+
+ #232a5c +
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/IBMDLColor overview 1`] = ` + +
+
+
+
+ Green 10 +
+
+ defbe6 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/IBMDLColor palette 1`] = ` + +
+
+
    + + + + +
+
+
+
+
+
+
+
+
+
+ Red 100 +
+
+ 2d0709 +
+
+
+
+
+
+
+
+ Red 90 +
+
+ 520408 +
+
+
+
+
+
+
+
+ Red 80 +
+
+ 750e13 +
+
+
+
+
+
+
+
+ Red 70 +
+
+ a2191f +
+
+
+
+
+
+
+
+ Red 60 +
+
+ da1e28 +
+
+
+
+
+
+
+
+ Red 50 +
+
+ fa4d56 +
+
+
+
+
+
+
+
+ Red 40 +
+
+ ff8389 +
+
+
+
+
+
+
+
+ Red 30 +
+
+ ffb3b8 +
+
+
+
+
+
+
+
+ Red 20 +
+
+ ffd7d9 +
+
+
+
+
+
+
+
+ Red 10 +
+
+ fff1f1 +
+
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/LightningColor overview 1`] = ` + + + + + + + + + + + +
+
+
+ $brand-accessible +
+

+ Dark variant of BRAND that is accessible with white +

+
+ 		+
+
+
+
+
+ rgb(0, 77, 128) +
+
+ #004d80 +
+
+ BRAND_ACCESSIBLE +
+
+
+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ GA +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/LightningColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Token + + Example + + Released + + Themeable + + Support +
+
+
+ $brand-disabled +
+

+ Disabled state of BRAND_A11Y +

+
+ 		+
+
+
+
+
+ rgb(201, 199, 197) +
+
+ #c9c7c5 +
+
+ BRAND_DISABLED +
+
+
+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ GA +
+
+
+
+
+ $brand-header +
+

+ Background color a branded app header +

+
+ 		+
+
+
+
+
+ rgb(255, 255, 255) +
+
+ #ffffff +
+
+ PALETTE_GRAY_1 +
+
+
+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ I +
+
+
+
+
+ $brand-header-contrast +
+

+ Variant of BRAND_HEADER that is accessible with BRAND_HEADER +

+
+ 		+
+
+
+
+
+ rgb(94, 94, 94) +
+
+ #5e5e5e +
+
+ BRAND_HEADER_CONTRAST +
+
+
+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ I +
+
+
+
+
+ $brand-header-contrast-warm +
+

+ Variant of BRAND_HEADER_CONTRAST that provides a warm color +

+
+ 		+
+
+
+
+
+ rgb(191, 2, 1) +
+
+ #bf0201 +
+
+ BRAND_HEADER_CONTRAST_WARM +
+
+
+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ I +
+
+
+
+
+ $brand-primary +
+

+ Primary brand color +

+
+ 		+
+
+
+
+
+ rgb(21, 137, 238) +
+
+ #1589ee +
+
+ BRAND_PRIMARY +
+
+
+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ GA +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/LiquidColor overview 1`] = ` + +
+
+
+
+ #503291 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rich Purple +
+
+ RGB (80,50,145) +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/LiquidColor palette 1`] = ` + +
+
+
+
+
+ #EB3C96 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Vibrant Magenta +
+
+ RGB (235,60,150) +
+
+
+
+
+
+
+ #0F69AF +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rich Blue +
+
+ RGB (15,105,175) +
+
+
+
+
+
+
+ #2DBECD +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Vibrant Cyan +
+
+ RGB (45,190,205) +
+
+
+
+
+
+
+ #A5CD50 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Vibrant Green +
+
+ RGB (165,205,80) +
+
+
+
+
+
+
+ #E61E50 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rich Red +
+
+ RGB (230,30,80) +
+
+
+
+
+
+
+ #FFC832 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Vibrant Yellow +
+
+ RGB (255,200,50) +
+
+
+
+
+
+
+ #149B5F +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rich Green +
+
+ RGB (20,155,95) +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/MorningstarColor overview 1`] = ` + + + + + + + + + +
+
+ Informational +
+ 		+
+ $mds-feedback-color-info +
+ 		+
+ #f2f2f2 +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/MorningstarColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Name + + Constant + + Color +
+
+ Informational +
+ 		+
+ $mds-feedback-color-info +
+ 		+
+ #c9c7c5 +
+
+
+ Error +
+ 		+
+ $mds-feedback-color-error +
+ 		+
+ #ff0000 +
+
+
+ Error Background +
+ 		+
+ $mds-feedback-color-error-background +
+ 		+
+ #ffe5e5 +
+
+
+ Warning +
+ 		+
+ $mds-feedback-color-warning +
+ 		+
+ #f5c400 +
+
+
+ Warning Background +
+ 		+
+ $mds-feedback-color-warning-background +
+ 		+
+ #fef9e5 +
+
+
+ Success +
+ 		+
+ $mds-feedback-color-success +
+ 		+
+ #00af41 +
+
+
+ Success Background +
+ 		+
+ $mds-feedback-color-success-background +
+ 		+
+ #e5f7eb +
+
+
+ Active +
+ 		+
+ $mds-interactive-color-primary-active +
+ 		+
+ #004376 +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/OPatternColor overview 1`] = ` + + + + + + + + + + + +
+
+
+ + $weather-color + + +
+ #990099 +
+ 		+
+ 153, 0, 153 +
+ 		+ 0, 100, 0, 40 +
+ +`; + +exports[`component-controls generated Design Tokens/Colors/OPatternColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Color + + Variable + + Hex + + RGB + + CMYK +
+
+
+ + $primary-color + + +
+ #107CB2 +
+ 		+
+ 16, 124, 178 +
+ 		+ 91, 30, 0, 30 +
+
+
+ + $primary-color-light + + + 30% of $primary-color +
+
+
+ + $alert-color + + +
+ #D8400F +
+ 		+
+ 216, 64, 15 +
+ 		+ 0, 70, 93, 15 +
+
+
+ + $alert-color-light + + + 30% of $alert-color +
+
+
+ + $weather-color + + +
+ #990099 +
+ 		+
+ 153, 0, 153 +
+ 		+ 0, 100, 0, 40 +
+ +`; + +exports[`component-controls generated Design Tokens/Colors/PajamasColor overview 1`] = ` + +
+
+
+
+
+ $blue-50 +
+
+ #e9f3fc +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/PajamasColor palette 1`] = ` + +
+
+
+
+
+
+ $orange-50 +
+
+ #fdf1dd +
+
+
+
+
+
+
+
+
+
+ $orange-100 +
+
+ #f5d9a8 +
+
+
+
+
+
+
+
+
+
+ $orange-200 +
+
+ #e9be74 +
+
+
+
+
+
+
+
+
+
+ $orange-300 +
+
+ #d99530 +
+
+
+
+
+
+
+
+
+
+ $orange-400 +
+
+ #c17d10 +
+
+
+
+
+
+
+
+
+
+ $orange-500 +
+
+ #ab6100 +
+
+
+
+
+
+
+
+
+
+ $orange-600 +
+
+ #9e5400 +
+
+
+
+
+
+
+
+
+
+ $orange-700 +
+
+ #8f4700 +
+
+
+
+
+
+
+
+
+
+ $orange-800 +
+
+ #703800 +
+
+
+
+
+
+
+
+
+
+ $orange-900 +
+
+ #5c2900 +
+
+
+
+
+
+
+
+
+
+ $orange-950 +
+
+ #421f00 +
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/PatternFlyColor overview 1`] = ` + +
+
+
+
+
+
+
+ #1d70b8 +
+
+ --pf-global--link--Color +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/PatternFlyColor palette 1`] = ` + +
+
+
+
+
+
+
+
+ #004080 (Hover) +
+
+ --pf-global--primary-color--200 +
+
+
+
+
+
+
+
+
+
+
+ #0066cc +
+
+ --pf-global--primary-color--100 +
+
+
+
+
+
+
+
+
+
+
+ #470000 (alert icon) +
+
+ --pf-global--primary-color--100 +
+
+
+
+
+
+
+
+
+
+
+ #a30000 (alert title) +
+
+ --pf-global--danger-color--200 +
+
+
+
+
+
+
+
+
+
+
+ #c9190b (alert icon background) +
+
+ --pf-global--danger-color--100 +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/PhotonColor overview 1`] = ` + + + + + + + + + + +
+
+
+
+ Orange 50 +
+
+
+
+ + #ff9400 + +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/PhotonColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Teal 50 +
+
+
+
+ + #00feff + +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+
+
+
+ Teal 60 +
+
+
+
+ + #00c8d7 + +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+
+
+
+ Teal 70 +
+
+
+
+ + #008ea4 + +
+ 		+
+
+ AA +
+
+ 		+
+
+ AA+ +
+
+
+
+
+
+ Teal 80 +
+
+
+
+ + #005a71 + +
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ Teal 90 +
+
+
+
+ + #002d3e + +
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/PrimerColor overview 1`] = ` + +
+
+
+
+ Yellow +
+
+
+ $yellow-500 +
+
+ #ffd33d +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/PrimerColor palette 1`] = ` + +
+
+
+
+
+ Yellow +
+
+
+ $yellow-500 +
+
+ #ffd33d +
+
+
+
+
+
+
+
+
+
+ $yellow-000 +
+
+ #fffdef +
+
+
+
+
+
+
+
+
+
+ $yellow-100 +
+
+ #fffbdd +
+
+
+
+
+
+
+
+
+
+ $yellow-200 +
+
+ #fff5b1 +
+
+
+
+
+
+
+
+
+
+ $yellow-300 +
+
+ #ffea7f +
+
+
+
+
+
+
+
+
+
+ $yellow-400 +
+
+ #ffdf5d +
+
+
+
+
+
+
+
+
+
+ $yellow-500 +
+
+ #ffd33d +
+
+
+
+
+
+
+
+
+
+ $yellow-600 +
+
+ #f9c513 +
+
+
+
+
+
+
+
+
+
+ $yellow-700 +
+
+ #dbab09 +
+
+
+
+
+
+
+
+
+
+ $yellow-800 +
+
+ #b08800 +
+
+
+
+
+
+
+
+
+
+ $yellow-900 +
+
+ #735c0f +
+
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/SeedsColor overview 1`] = ` + +
+
+
+
+
+ RGB: 12,167,80 +
+
+ CMYK: 93,0,52,35 +
+
+
+
+
+
+
+
+
+
+
+ green.700 +
+
+
+
+
+
+
+ green.800 +
+
+
+
+

+ Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication. +

+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/SeedsColor palette 1`] = ` + +
+
+
+
+
+
+ RGB: 111,94,211 +
+
+ CMYK: 47,55,0,17 +
+
+
+
+
+
+
+
+
+
+
+ purple.700 +
+
+
+
+

+ Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two. +

+
+
+
+
+
+
+
+
+ RGB: 0,40,56 +
+
+ CMYK: 100,29,0,78 +
+
+
+
+
+
+
+
+
+
+
+ aqua.1100 +
+
+
+
+

+ Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text. +

+
+
+
+
+
+
+
+
+ RGB: 7,151,174 +
+
+ CMYK: 96,13,0,32 +
+
+
+
+
+
+
+
+
+
+
+ aqua.600 +
+
+
+
+

+ Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking. +

+
+
+
+
+
+
+
+
+ RGB: 32,121,195 +
+
+ CMYK: 84,38,0,24 +
+
+
+
+
+
+
+ Primary CTA +
+
+
+
+
+
+ cta.primary +
+
+
+
+
+
+
+ blue.700 +
+
+
+
+

+

+
+
+
+
+
+
+
+ RGB: 54,65,65 +
+
+ CMYK: 17,0,0,75 +
+
+
+
+
+
+
+ Secondary CTA +
+
+
+
+
+
+ cta.scondary +
+
+
+
+
+
+
+ neutral.800 +
+
+
+
+

+

+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/SeekColor overview 1`] = ` + +
+
+
+
+
+
+ #071d40 +
+
+ @sk-blue-darker +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/SeekColor palette 1`] = ` + +
+
+
+
+
+
+
+ #001b38 +
+
+ @sk-blue-darker +
+
+
+
+
+
+
+
+
+ #042763 +
+
+ @sk-blue-dark +
+
+
+
+
+
+
+
+
+ #0d3880 +
+
+ @sk-blue +
+
+
+
+
+
+
+
+
+ #184da8 +
+
+ @sk-blue-light +
+
+
+
+
+
+
+
+
+ #2765cf +
+
+ @sk-blue-lighter +
+
+
+
+
+
+
+
+
+ #e60278 +
+
+ @sk-pink +
+
+
+
+
+
+
+
+
+ #157e00 +
+
+ @sk-green +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/SkylineColor overview 1`] = ` + + + + + + + + + + + +
+
+ Gray 600 +
+ 		+
+ +
+ Yes +
+
+ 		+
+ +
+ No +
+
+ 		+
+ + get-gray(600) + +
+ 		+
+
+
+ #757575 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/SkylineColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Name + + Use on White + + Use on Gray 200 + + Scss + + Example +
+
+ Green +
+ 		+
+ +
+ Yes +
+
+ 		+
+ +
+ Yes +
+
+ 		+
+ + get-hue(green) + +
+ 		+
+
+
+ #1a801b +
+
+
+
+
+ Green Light +
+ 		+
+ +
+ No +
+
+ 		+
+ +
+ No +
+
+ 		+
+ + get-hue(green, light) + +
+ 		+
+
+
+ #f4fce3 +
+
+
+
+
+ Yellow +
+ 		+
+ +
+ No +
+
+ 		+
+ +
+ No +
+
+ 		+
+ + get-hue(yellow) + +
+ 		+
+
+
+ #fcc419 +
+
+
+
+
+ Yellow Light +
+ 		+
+ +
+ No +
+
+ 		+
+ +
+ No +
+
+ 		+
+ + get-hue(yellow, light) + +
+ 		+
+
+
+ #fff9db +
+
+
+
+
+ Gray 500 +
+ 		+
+ +
+ No +
+
+ 		+
+ +
+ No +
+
+ 		+
+ + get-gray(500) + +
+ 		+
+
+
+ #8b8b8b +
+
+
+
+
+ Gray 600 +
+ 		+
+ +
+ Yes +
+
+ 		+
+ +
+ No +
+
+ 		+
+ + get-gray(600) + +
+ 		+
+
+
+ #757575 +
+
+
+
+
+ Gray 700 +
+ 		+
+ +
+ Yes +
+
+ 		+
+ +
+ Yes +
+
+ 		+
+ + get-gray(700) + +
+ 		+
+
+
+ #616161 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/SolidColor overview 1`] = ` + +
+
+
+
+ .fill-red +
+
+
+ #ee3322, $fill-red +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/SolidColor palette 1`] = ` + +
+
+
+
+
+ .fill-red +
+
+
+ #ee3322, $fill-red +
+
+
+
+
+
+
+
+ .fill-red-lighter +
+
+
+ #feebe9, $fill-red-lighter +
+
+
+
+
+
+
+
+ .fill-pink +
+
+
+ #e40c78, $fill-pink +
+
+
+
+
+
+
+
+ .fill-blue +
+
+
+ #0f65ef, $fill-blue +
+
+
+
+
+
+
+
+ .fill-purple +
+
+
+ #6645dd, $fill-purple +
+
+
+
+
+
+
+
+ .fill-promoted-orange +
+
+
+ #ffee00, $fill-yellow +
+
+
+
+
+
+
+
+ .fill-twitter +
+
+
+ #55acee, $fill-twitter +
+
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/TableColor legend 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Score + + Contrast ratio + + Result +
+
+
+ AAA +
+
+ 		+ >= 7.0:1 + + Passes + + WCAG 2.0 + + AAA +
+
+
+ AA +
+
+ 		+ >= 4.5:1 + + Passes + + WCAG 2.0 + + AA +
+
+
+ AA+ +
+
+ 		+ >= 3.0:1 + + Passes + + WCAG 2.0 + + Large Text AA +
+
+
+ F +
+
+ 		+ < 3.0:1 + + AA Test failed +
+ +`; + +exports[`component-controls generated Design Tokens/Colors/TableColor overview 1`] = ` + + + + + + + + + + + + +
+
+
+
+ #5C6AC4 +
+
+
+
+ #EFEFEF +
+
+
+ 		+
+ primary +
+ 		+
+
+ AA+ +
+
+ 		+
+
+ AA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/TableColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + AA color +
+ color + + name + +
+
+ #FFFFFF +
+
+ 		+
+
+ #000000 +
+
+
+
+
+
+ #FAFAF9 +
+
+
+ 		+
+ background +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+
+
+
+ #B6DEE2 +
+
+
+ 		+
+ blue +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+
+
+
+ #247BA0 +
+
+
+ 		+
+ blueDark +
+ 		+
+
+ AA+ +
+
+ 		+
+
+ AA +
+
+
+
+
+
+ #B2E4DC +
+
+
+ 		+
+ green +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+
+
+
+ #2D5948 +
+
+
+ 		+
+ greenDark +
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ RGBA(0,0,0,.1) +
+
+
+ 		+
+ muted +
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ #F25F5C +
+
+
+ 		+
+ primary +
+ 		+
+
+ AA +
+
+ 		+
+
+ AA+ +
+
+
+
+
+
+ #B51916 +
+
+
+ 		+
+ primaryDark +
+ 		+
+
+ AA+ +
+
+ 		+
+
+ AA +
+
+
+
+
+
+ #FCBAB1 +
+
+
+ 		+
+ primaryLight +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/TableColor paletteDark 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + AA color + + AA dark +
+ color / dark + + name + +
+
+ #FFFFFF +
+
+ 		+
+
+ #000000 +
+
+ 		+
+
+ #FFFFFF +
+
+ 		+
+
+ #000000 +
+
+
+
+
+
+ #454F5B +
+
+
+
+ #D3D4DB +
+
+
+ 		+
+ text +
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ #FFFFFF +
+
+
+
+ #38404A +
+
+
+ 		+
+ background +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+
+
+
+ #5C6AC4 +
+
+
+
+ #EFEFEF +
+
+
+ 		+
+ primary +
+ 		+
+
+ AA+ +
+
+ 		+
+
+ AA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ #006FBB +
+
+
+
+ #B4E1FA +
+
+
+ 		+
+ secondary +
+ 		+
+
+ AA+ +
+
+ 		+
+
+ AA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ #E6E6E6 +
+
+
+
+ #E6E6E6 +
+
+
+ 		+
+ muted +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ #69768C +
+
+
+
+ #C9CACF +
+
+
+ 		+
+ mutedText +
+ 		+
+
+ AA +
+
+ 		+
+
+ AA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ #F49342 +
+
+
+ 		+
+ accent +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+ 		+ +
+
+
+
+ #00044C +
+
+
+ 		+
+ darken +
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+ 		+ +
+
+
+
+ #F6F6F6 +
+
+
+
+ #4D5866 +
+
+
+ 		+
+ gray +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+
+
+
+ #F6F6F6 +
+
+
+
+ #000000 +
+
+
+ 		+
+ sidebar +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+
+
+
+
+ #D9F2F1 +
+
+
+
+ #B7ECEC +
+
+
+ 		+
+ highlight +
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ #3B817D +
+
+
+
+ #D9F2F1 +
+
+
+ 		+
+ action +
+ 		+
+
+ AA +
+
+ 		+
+
+ AA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ #027AC5 +
+
+
+
+ #B3D9FF +
+
+
+ 		+
+ selected +
+ 		+
+
+ AA +
+
+ 		+
+
+ AA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+
+
+
+ RGBA(0, 0, 0, 0.1) +
+
+
+
+ RGBA(211, 212, 219, 0.1) +
+
+
+ 		+
+ shadow +
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+ 		+
+
+ F +
+
+ 		+
+
+ AAA +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/UniformColor overview 1`] = ` + + + + + + + + + +
+
+
+
+
+ + Weather + + +
+ 153, 0, 153 +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/UniformColor palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Color + + Name + + RGBA +
+
+
+
+
+ + Primary + + +
+ 16, 124, 178 +
+
+
+
+
+
+ + PrimaryLight + + +
+ 183, 216, 232 +
+
+
+
+
+
+ + Alert + + +
+ 216, 64, 15 +
+
+
+
+
+
+ + AlertLight + + +
+ 243, 198, 183 +
+
+
+
+
+
+ + Weather + + +
+ 153, 0, 153 +
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/VanillaColor overview 1`] = ` + +
+
+
+
+ $color-negative +
+
+ #C7162B +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/VanillaColor palette 1`] = ` + +
+
+
+
+
+ $color-x-light +
+
+ #FFF +
+
+
+
+
+
+
+ $color-brand +
+
+ #333 +
+
+
+
+
+
+
+ $color-caution +
+
+ #F99B11 +
+
+
+
+
+
+
+ $color-negative +
+
+ #C7162B +
+
+
+
+
+
+
+ $color-positive +
+
+ #0E8420 +
+
+
+
+
+
+
+ $color-information +
+
+ #06C +
+
+
+
+
+
+
+ $color-navigation-background +
+
+ #FFF +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/XColor overview 1`] = ` + +
+
+
+
+
+ Lady Black +
+
+
+ HEX +
+
+ 3C3C3B +
+
+
+
+ RGB +
+
+ 60,60,59 +
+
+
+
+ CMYK +
+
+ 0,0,2,76 +
+
+
+
+ Pantone +
+
+ 447C +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/XColor palette 1`] = ` + +
+
+
+
+
+
+ Dame Tangerine +
+
+
+ HEX +
+
+ FF5000 +
+
+
+
+ RGB +
+
+ 255,80,0 +
+
+
+
+ CMYK +
+
+ 0,69,100,0 +
+
+
+
+ Pantone +
+
+ 1655C +
+
+
+
+
+
+
+
+ Señor Purple +
+
+
+ HEX +
+
+ 5F285A +
+
+
+
+ RGB +
+
+ 95,40,90 +
+
+
+
+ CMYK +
+
+ 0,58,5,63 +
+
+
+
+ Pantone +
+
+ 261C +
+
+
+
+
+
+
+
+ Baron Von Teal +
+
+
+ HEX +
+
+ 1DE9B6 +
+
+
+
+ RGB +
+
+ 29,233,182 +
+
+
+
+ CMYK +
+
+ 88,0,22,9 +
+
+
+
+ Pantone +
+
+ 3385C +
+
+
+
+
+
+
+
+ Agent Cyan +
+
+
+ HEX +
+
+ 18FFFF +
+
+
+
+ RGB +
+
+ 24,255,255 +
+
+
+
+ CMYK +
+
+ 91,0,0,0 +
+
+
+
+ Pantone +
+
+ 3252C +
+
+
+
+
+
+
+
+ Madam Yellow +
+
+
+ HEX +
+
+ FFF500 +
+
+
+
+ RGB +
+
+ 255,245,0 +
+
+
+
+ CMYK +
+
+ 0,4,100,0 +
+
+
+
+ Pantone +
+
+ 3945C +
+
+
+
+
+
+
+
+ Pastor Pink +
+
+
+ HEX +
+
+ FF96B4 +
+
+
+
+ RGB +
+
+ 255,150,180 +
+
+
+
+ CMYK +
+
+ 0,41,29,0 +
+
+
+
+ Pantone +
+
+ 183C +
+
+
+
+
+
+
+
+ Brigadier Blue +
+
+
+ HEX +
+
+ 000A47 +
+
+
+
+ RGB +
+
+ 0,10,71 +
+
+
+
+ CMYK +
+
+ 100,86,0,72 +
+
+
+
+ Pantone +
+
+ 274C +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/ZendeskColor overview 1`] = ` + +
+
+
+
+
+
+ Rich Purple +
+
+ #503291 +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Colors/ZendeskColor palette 1`] = ` + +
+
+
+
+
+
+
+ support +
+
+ #00a656 +
+
+
+
+
+
+
+
+
+ message +
+
+ #37b8af +
+
+
+
+
+
+
+
+
+ explore +
+
+ #30aabc +
+
+
+
+
+
+
+
+
+ gather +
+
+ #f6c8be +
+
+
+
+
+
+
+
+
+ guide +
+
+ #ff6224 +
+
+
+
+
+
+
+
+
+ connect +
+
+ #ff6224 +
+
+
+
+
+
+
+
+
+ chat +
+
+ #f79a3e +
+
+
+
+
+
+
+
+
+ talk +
+
+ #efc93d +
+
+
+
+
+
+
+
+
+ sell +
+
+ #c38f00 +
+
+
+
+
+
+
+
+
+ 100 +
+
+ #f8f9f9 +
+
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Fonts/LightningFont overview 1`] = ` + + + + + + + + + + + +
+
+
+ $brand-accessible +
+

+ Dark variant of BRAND that is accessible with white +

+
+ 		+
+
+ BRAND_ACCESSIBLE +
+
+ 		+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ GA +
+
+
+ +`; + +exports[`component-controls generated Design Tokens/Fonts/LightningFont palette 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Token + + Example + + Released + + Themeable + + Support +
+
+
+ $brand-disabled +
+

+ Disabled state of BRAND_A11Y +

+
+ 		+
+
+ BRAND_DISABLED +
+
+ 		+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ GA +
+
+
+
+
+ $brand-header +
+

+ Background color a branded app header +

+
+ 		+
+
+ PALETTE_GRAY_1 +
+
+ 		+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ I +
+
+
+
+
+ $brand-header-contrast +
+

+ Variant of BRAND_HEADER that is accessible with BRAND_HEADER +

+
+ 		+
+
+ BRAND_HEADER_CONTRAST +
+
+ 		+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ I +
+
+
+
+
+ $brand-header-contrast-warm +
+

+ Variant of BRAND_HEADER_CONTRAST that provides a warm color +

+
+ 		+
+
+ BRAND_HEADER_CONTRAST_WARM +
+
+ 		+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ I +
+
+
+
+
+ $brand-primary +
+

+ Primary brand color +

+
+ 		+
+
+ BRAND_PRIMARY +
+
+ 		+
+ 2.6.0 +
+ 		+
+ Yes +
+ 		+
+
+ GA +
+
+
+ +`; diff --git a/ui/design-tokens/tests/component-controls.test.js b/ui/design-tokens/tests/component-controls.test.js new file mode 100644 index 000000000..dc3712be7 --- /dev/null +++ b/ui/design-tokens/tests/component-controls.test.js @@ -0,0 +1,50 @@ +const path = require('path'); +const { + loadConfigurations, + extractDocuments, + isMDXDocument, +} = require('@component-controls/config'); +const { renderExample } = require('@component-controls/test-renderers'); +const { render, act } = require('@testing-library/react'); +const { renderErr } = require('@component-controls/test-renderers'); + +describe('component-controls generated', () => { + const configPath = path.resolve(__dirname, '../.config'); + const config = loadConfigurations(configPath); + const documents = extractDocuments({ config, configPath }); + if (documents) { + documents + .filter(file => !isMDXDocument(file, config.instrument)) + .forEach(file => { + // eslint-disable-next-line global-require + const exports = require(file); + const doc = exports.default; + const examples = Object.keys(exports) + .filter(key => key !== 'default') + .map(key => exports[key]); + + if (examples.length) { + describe(doc.title, () => { + examples.forEach(example => { + it(example.name, async () => { + let rendered; + act(() => { + rendered = renderExample({ + example, + doc, + config, + }); + }); + if (!rendered) { + renderErr(); + return; + } + const { asFragment } = render(rendered); + expect(asFragment()).toMatchSnapshot(); + }); + }); + }); + } + }); + } +});