From f4f65718f373fdcef30b96910079c49b41f52e76 Mon Sep 17 00:00:00 2001 From: Asuka109 Date: Sun, 22 Dec 2024 23:09:44 +0800 Subject: [PATCH 1/4] test(studio): add test case for park ui --- package.json | 3 +- .../__tests__/components/colors.test.tsx | 22 + .../fixtures/semantic-tokens-park-ui.json | 1820 +++++++++++++++++ packages/studio/package.json | 3 +- packages/studio/src/components/colors.tsx | 60 +- packages/studio/src/lib/use-color-docs.ts | 2 +- packages/studio/tsconfig.json | 2 +- pnpm-lock.yaml | 46 +- vitest.config.ts | 9 +- 9 files changed, 1935 insertions(+), 32 deletions(-) create mode 100644 packages/studio/__tests__/components/colors.test.tsx create mode 100644 packages/studio/__tests__/fixtures/semantic-tokens-park-ui.json diff --git a/package.json b/package.json index af8626168d..ae017a7888 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "@typescript-eslint/parser": "7.0.1", "eslint": "8.56.0", "eslint-config-prettier": "9.1.0", - "prettier": "3.2.5" + "prettier": "3.2.5", + "vite-plugin-virtual": "^0.3.0" }, "lint-staged": { "packages/**/*.{ts,tsx}": [ diff --git a/packages/studio/__tests__/components/colors.test.tsx b/packages/studio/__tests__/components/colors.test.tsx new file mode 100644 index 0000000000..7b57622923 --- /dev/null +++ b/packages/studio/__tests__/components/colors.test.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { describe, expect, it } from 'vitest' +import { render } from '@testing-library/react' +import type { TokenExtensions } from '@pandacss/token-dictionary' +import { SemanticToken } from '../../src/components/colors' +import rawSemanticTokens from '../fixtures/semantic-tokens-park-ui.json' + +const semanticTokens = rawSemanticTokens as [string, TokenExtensions][] + +describe('SemanticToken', () => { + it('should render semantic tokens without base token', () => { + const { container } = render( + <> + {semanticTokens.map(([name, token]) => ( + + ))} + , + ) + + expect(container.firstChild).toMatchInlineSnapshot() + }) +}) diff --git a/packages/studio/__tests__/fixtures/semantic-tokens-park-ui.json b/packages/studio/__tests__/fixtures/semantic-tokens-park-ui.json new file mode 100644 index 0000000000..225273c85f --- /dev/null +++ b/packages/studio/__tests__/fixtures/semantic-tokens-park-ui.json @@ -0,0 +1,1820 @@ +[ + [ + "bg.canvas", + { + "_light": { "value": "var(--colors-gray-1)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-1)", "_dark": "var(--colors-gray-1)" }, + "prop": "bg.canvas", + "var": "--colors-bg-canvas", + "varRef": "var(--colors-bg-canvas)", + "colorPalette": "bg", + "colorPaletteRoots": [["bg"]], + "colorPaletteTokenKeys": [["canvas"]] + }, + "_dark": { "value": "var(--colors-gray-1)", "isReference": false } + } + ], + [ + "bg.default", + { + "_light": { "value": "white", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "white", "_dark": "var(--colors-gray-2)" }, + "prop": "bg.default", + "var": "--colors-bg-default", + "varRef": "var(--colors-bg-default)", + "colorPalette": "bg", + "colorPaletteRoots": [["bg"]], + "colorPaletteTokenKeys": [["default"]] + }, + "_dark": { "value": "var(--colors-gray-2)", "isReference": false } + } + ], + [ + "bg.subtle", + { + "_light": { "value": "var(--colors-gray-2)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-2)", "_dark": "var(--colors-gray-3)" }, + "prop": "bg.subtle", + "var": "--colors-bg-subtle", + "varRef": "var(--colors-bg-subtle)", + "colorPalette": "bg", + "colorPaletteRoots": [["bg"]], + "colorPaletteTokenKeys": [["subtle"]] + }, + "_dark": { "value": "var(--colors-gray-3)", "isReference": false } + } + ], + [ + "bg.muted", + { + "_light": { "value": "var(--colors-gray-3)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-3)", "_dark": "var(--colors-gray-4)" }, + "prop": "bg.muted", + "var": "--colors-bg-muted", + "varRef": "var(--colors-bg-muted)", + "colorPalette": "bg", + "colorPaletteRoots": [["bg"]], + "colorPaletteTokenKeys": [["muted"]] + }, + "_dark": { "value": "var(--colors-gray-4)", "isReference": false } + } + ], + [ + "bg.emphasized", + { + "_light": { "value": "var(--colors-gray-4)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-4)", "_dark": "var(--colors-gray-5)" }, + "prop": "bg.emphasized", + "var": "--colors-bg-emphasized", + "varRef": "var(--colors-bg-emphasized)", + "colorPalette": "bg", + "colorPaletteRoots": [["bg"]], + "colorPaletteTokenKeys": [["emphasized"]] + }, + "_dark": { "value": "var(--colors-gray-5)", "isReference": false } + } + ], + [ + "bg.disabled", + { + "_light": { "value": "var(--colors-gray-5)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-5)", "_dark": "var(--colors-gray-6)" }, + "prop": "bg.disabled", + "var": "--colors-bg-disabled", + "varRef": "var(--colors-bg-disabled)", + "colorPalette": "bg", + "colorPaletteRoots": [["bg"]], + "colorPaletteTokenKeys": [["disabled"]] + }, + "_dark": { "value": "var(--colors-gray-6)", "isReference": false } + } + ], + [ + "border.default", + { + "_light": { "value": "var(--colors-gray-7)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-7)", "_dark": "var(--colors-gray-7)" }, + "prop": "border.default", + "var": "--colors-border-default", + "varRef": "var(--colors-border-default)", + "colorPalette": "border", + "colorPaletteRoots": [["border"]], + "colorPaletteTokenKeys": [["default"]] + }, + "_dark": { "value": "var(--colors-gray-7)", "isReference": false } + } + ], + [ + "border.muted", + { + "_light": { "value": "var(--colors-gray-6)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-6)", "_dark": "var(--colors-gray-6)" }, + "prop": "border.muted", + "var": "--colors-border-muted", + "varRef": "var(--colors-border-muted)", + "colorPalette": "border", + "colorPaletteRoots": [["border"]], + "colorPaletteTokenKeys": [["muted"]] + }, + "_dark": { "value": "var(--colors-gray-6)", "isReference": false } + } + ], + [ + "border.subtle", + { + "_light": { "value": "var(--colors-gray-4)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-4)", "_dark": "var(--colors-gray-4)" }, + "prop": "border.subtle", + "var": "--colors-border-subtle", + "varRef": "var(--colors-border-subtle)", + "colorPalette": "border", + "colorPaletteRoots": [["border"]], + "colorPaletteTokenKeys": [["subtle"]] + }, + "_dark": { "value": "var(--colors-gray-4)", "isReference": false } + } + ], + [ + "border.disabled", + { + "_light": { "value": "var(--colors-gray-5)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-5)", "_dark": "var(--colors-gray-5)" }, + "prop": "border.disabled", + "var": "--colors-border-disabled", + "varRef": "var(--colors-border-disabled)", + "colorPalette": "border", + "colorPaletteRoots": [["border"]], + "colorPaletteTokenKeys": [["disabled"]] + }, + "_dark": { "value": "var(--colors-gray-5)", "isReference": false } + } + ], + [ + "border.outline", + { + "_light": { "value": "var(--colors-gray-a9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-a9)", "_dark": "var(--colors-gray-a9)" }, + "prop": "border.outline", + "var": "--colors-border-outline", + "varRef": "var(--colors-border-outline)", + "colorPalette": "border", + "colorPaletteRoots": [["border"]], + "colorPaletteTokenKeys": [["outline"]] + }, + "_dark": { "value": "var(--colors-gray-a9)", "isReference": false } + } + ], + [ + "border.error", + { + "_light": { "value": "var(--colors-red-9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-9)", "_dark": "var(--colors-red-9)" }, + "prop": "border.error", + "var": "--colors-border-error", + "varRef": "var(--colors-border-error)", + "colorPalette": "border", + "colorPaletteRoots": [["border"]], + "colorPaletteTokenKeys": [["error"]] + }, + "_dark": { "value": "var(--colors-red-9)", "isReference": false } + } + ], + [ + "red.1", + { + "_light": { "value": "var(--colors-red-light-1)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-1)", "_dark": "var(--colors-red-dark-1)" }, + "prop": "red.1", + "var": "--colors-red-1", + "varRef": "var(--colors-red-1)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["1"]] + }, + "_dark": { "value": "var(--colors-red-dark-1)", "isReference": false } + } + ], + [ + "red.2", + { + "_light": { "value": "var(--colors-red-light-2)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-2)", "_dark": "var(--colors-red-dark-2)" }, + "prop": "red.2", + "var": "--colors-red-2", + "varRef": "var(--colors-red-2)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["2"]] + }, + "_dark": { "value": "var(--colors-red-dark-2)", "isReference": false } + } + ], + [ + "red.3", + { + "_light": { "value": "var(--colors-red-light-3)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-3)", "_dark": "var(--colors-red-dark-3)" }, + "prop": "red.3", + "var": "--colors-red-3", + "varRef": "var(--colors-red-3)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["3"]] + }, + "_dark": { "value": "var(--colors-red-dark-3)", "isReference": false } + } + ], + [ + "red.4", + { + "_light": { "value": "var(--colors-red-light-4)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-4)", "_dark": "var(--colors-red-dark-4)" }, + "prop": "red.4", + "var": "--colors-red-4", + "varRef": "var(--colors-red-4)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["4"]] + }, + "_dark": { "value": "var(--colors-red-dark-4)", "isReference": false } + } + ], + [ + "red.5", + { + "_light": { "value": "var(--colors-red-light-5)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-5)", "_dark": "var(--colors-red-dark-5)" }, + "prop": "red.5", + "var": "--colors-red-5", + "varRef": "var(--colors-red-5)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["5"]] + }, + "_dark": { "value": "var(--colors-red-dark-5)", "isReference": false } + } + ], + [ + "red.6", + { + "_light": { "value": "var(--colors-red-light-6)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-6)", "_dark": "var(--colors-red-dark-6)" }, + "prop": "red.6", + "var": "--colors-red-6", + "varRef": "var(--colors-red-6)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["6"]] + }, + "_dark": { "value": "var(--colors-red-dark-6)", "isReference": false } + } + ], + [ + "red.7", + { + "_light": { "value": "var(--colors-red-light-7)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-7)", "_dark": "var(--colors-red-dark-7)" }, + "prop": "red.7", + "var": "--colors-red-7", + "varRef": "var(--colors-red-7)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["7"]] + }, + "_dark": { "value": "var(--colors-red-dark-7)", "isReference": false } + } + ], + [ + "red.8", + { + "_light": { "value": "var(--colors-red-light-8)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-8)", "_dark": "var(--colors-red-dark-8)" }, + "prop": "red.8", + "var": "--colors-red-8", + "varRef": "var(--colors-red-8)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["8"]] + }, + "_dark": { "value": "var(--colors-red-dark-8)", "isReference": false } + } + ], + [ + "red.9", + { + "_light": { "value": "var(--colors-red-light-9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-9)", "_dark": "var(--colors-red-dark-9)" }, + "prop": "red.9", + "var": "--colors-red-9", + "varRef": "var(--colors-red-9)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["9"]] + }, + "_dark": { "value": "var(--colors-red-dark-9)", "isReference": false } + } + ], + [ + "red.10", + { + "_light": { "value": "var(--colors-red-light-10)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-10)", "_dark": "var(--colors-red-dark-10)" }, + "prop": "red.10", + "var": "--colors-red-10", + "varRef": "var(--colors-red-10)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["10"]] + }, + "_dark": { "value": "var(--colors-red-dark-10)", "isReference": false } + } + ], + [ + "red.11", + { + "_light": { "value": "var(--colors-red-light-11)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-11)", "_dark": "var(--colors-red-dark-11)" }, + "prop": "red.11", + "var": "--colors-red-11", + "varRef": "var(--colors-red-11)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["11"]] + }, + "_dark": { "value": "var(--colors-red-dark-11)", "isReference": false } + } + ], + [ + "red.12", + { + "_light": { "value": "var(--colors-red-light-12)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-12)", "_dark": "var(--colors-red-dark-12)" }, + "prop": "red.12", + "var": "--colors-red-12", + "varRef": "var(--colors-red-12)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["12"]] + }, + "_dark": { "value": "var(--colors-red-dark-12)", "isReference": false } + } + ], + [ + "red.a1", + { + "_light": { "value": "var(--colors-red-light-a1)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a1)", "_dark": "var(--colors-red-dark-a1)" }, + "prop": "red.a1", + "var": "--colors-red-a1", + "varRef": "var(--colors-red-a1)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a1"]] + }, + "_dark": { "value": "var(--colors-red-dark-a1)", "isReference": false } + } + ], + [ + "red.a2", + { + "_light": { "value": "var(--colors-red-light-a2)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a2)", "_dark": "var(--colors-red-dark-a2)" }, + "prop": "red.a2", + "var": "--colors-red-a2", + "varRef": "var(--colors-red-a2)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a2"]] + }, + "_dark": { "value": "var(--colors-red-dark-a2)", "isReference": false } + } + ], + [ + "red.a3", + { + "_light": { "value": "var(--colors-red-light-a3)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a3)", "_dark": "var(--colors-red-dark-a3)" }, + "prop": "red.a3", + "var": "--colors-red-a3", + "varRef": "var(--colors-red-a3)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a3"]] + }, + "_dark": { "value": "var(--colors-red-dark-a3)", "isReference": false } + } + ], + [ + "red.a4", + { + "_light": { "value": "var(--colors-red-light-a4)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a4)", "_dark": "var(--colors-red-dark-a4)" }, + "prop": "red.a4", + "var": "--colors-red-a4", + "varRef": "var(--colors-red-a4)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a4"]] + }, + "_dark": { "value": "var(--colors-red-dark-a4)", "isReference": false } + } + ], + [ + "red.a5", + { + "_light": { "value": "var(--colors-red-light-a5)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a5)", "_dark": "var(--colors-red-dark-a5)" }, + "prop": "red.a5", + "var": "--colors-red-a5", + "varRef": "var(--colors-red-a5)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a5"]] + }, + "_dark": { "value": "var(--colors-red-dark-a5)", "isReference": false } + } + ], + [ + "red.a6", + { + "_light": { "value": "var(--colors-red-light-a6)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a6)", "_dark": "var(--colors-red-dark-a6)" }, + "prop": "red.a6", + "var": "--colors-red-a6", + "varRef": "var(--colors-red-a6)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a6"]] + }, + "_dark": { "value": "var(--colors-red-dark-a6)", "isReference": false } + } + ], + [ + "red.a7", + { + "_light": { "value": "var(--colors-red-light-a7)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a7)", "_dark": "var(--colors-red-dark-a7)" }, + "prop": "red.a7", + "var": "--colors-red-a7", + "varRef": "var(--colors-red-a7)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a7"]] + }, + "_dark": { "value": "var(--colors-red-dark-a7)", "isReference": false } + } + ], + [ + "red.a8", + { + "_light": { "value": "var(--colors-red-light-a8)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a8)", "_dark": "var(--colors-red-dark-a8)" }, + "prop": "red.a8", + "var": "--colors-red-a8", + "varRef": "var(--colors-red-a8)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a8"]] + }, + "_dark": { "value": "var(--colors-red-dark-a8)", "isReference": false } + } + ], + [ + "red.a9", + { + "_light": { "value": "var(--colors-red-light-a9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a9)", "_dark": "var(--colors-red-dark-a9)" }, + "prop": "red.a9", + "var": "--colors-red-a9", + "varRef": "var(--colors-red-a9)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a9"]] + }, + "_dark": { "value": "var(--colors-red-dark-a9)", "isReference": false } + } + ], + [ + "red.a10", + { + "_light": { "value": "var(--colors-red-light-a10)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a10)", "_dark": "var(--colors-red-dark-a10)" }, + "prop": "red.a10", + "var": "--colors-red-a10", + "varRef": "var(--colors-red-a10)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a10"]] + }, + "_dark": { "value": "var(--colors-red-dark-a10)", "isReference": false } + } + ], + [ + "red.a11", + { + "_light": { "value": "var(--colors-red-light-a11)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a11)", "_dark": "var(--colors-red-dark-a11)" }, + "prop": "red.a11", + "var": "--colors-red-a11", + "varRef": "var(--colors-red-a11)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a11"]] + }, + "_dark": { "value": "var(--colors-red-dark-a11)", "isReference": false } + } + ], + [ + "red.a12", + { + "_light": { "value": "var(--colors-red-light-a12)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a12)", "_dark": "var(--colors-red-dark-a12)" }, + "prop": "red.a12", + "var": "--colors-red-a12", + "varRef": "var(--colors-red-a12)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["a12"]] + }, + "_dark": { "value": "var(--colors-red-dark-a12)", "isReference": false } + } + ], + [ + "red.default", + { + "_light": { "value": "var(--colors-red-light-9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-9)", "_dark": "var(--colors-red-dark-9)" }, + "prop": "red.default", + "var": "--colors-red-default", + "varRef": "var(--colors-red-default)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["default"]] + }, + "_dark": { "value": "var(--colors-red-dark-9)", "isReference": false } + } + ], + [ + "red.emphasized", + { + "_light": { "value": "var(--colors-red-light-10)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-10)", "_dark": "var(--colors-red-dark-10)" }, + "prop": "red.emphasized", + "var": "--colors-red-emphasized", + "varRef": "var(--colors-red-emphasized)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["emphasized"]] + }, + "_dark": { "value": "var(--colors-red-dark-10)", "isReference": false } + } + ], + [ + "red.fg", + { + "_light": { "value": "white", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "white", "_dark": "white" }, + "prop": "red.fg", + "var": "--colors-red-fg", + "varRef": "var(--colors-red-fg)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["fg"]] + }, + "_dark": { "value": "white", "isReference": false } + } + ], + [ + "red.text", + { + "_light": { "value": "var(--colors-red-light-a11)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-light-a11)", "_dark": "var(--colors-red-dark-a11)" }, + "prop": "red.text", + "var": "--colors-red-text", + "varRef": "var(--colors-red-text)", + "colorPalette": "red", + "colorPaletteRoots": [["red"]], + "colorPaletteTokenKeys": [["text"]] + }, + "_dark": { "value": "var(--colors-red-dark-a11)", "isReference": false } + } + ], + [ + "gray.1", + { + "_light": { "value": "var(--colors-gray-light-1)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-1)", "_dark": "var(--colors-gray-dark-1)" }, + "prop": "gray.1", + "var": "--colors-gray-1", + "varRef": "var(--colors-gray-1)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["1"]] + }, + "_dark": { "value": "var(--colors-gray-dark-1)", "isReference": false } + } + ], + [ + "gray.2", + { + "_light": { "value": "var(--colors-gray-light-2)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-2)", "_dark": "var(--colors-gray-dark-2)" }, + "prop": "gray.2", + "var": "--colors-gray-2", + "varRef": "var(--colors-gray-2)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["2"]] + }, + "_dark": { "value": "var(--colors-gray-dark-2)", "isReference": false } + } + ], + [ + "gray.3", + { + "_light": { "value": "var(--colors-gray-light-3)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-3)", "_dark": "var(--colors-gray-dark-3)" }, + "prop": "gray.3", + "var": "--colors-gray-3", + "varRef": "var(--colors-gray-3)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["3"]] + }, + "_dark": { "value": "var(--colors-gray-dark-3)", "isReference": false } + } + ], + [ + "gray.4", + { + "_light": { "value": "var(--colors-gray-light-4)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-4)", "_dark": "var(--colors-gray-dark-4)" }, + "prop": "gray.4", + "var": "--colors-gray-4", + "varRef": "var(--colors-gray-4)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["4"]] + }, + "_dark": { "value": "var(--colors-gray-dark-4)", "isReference": false } + } + ], + [ + "gray.5", + { + "_light": { "value": "var(--colors-gray-light-5)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-5)", "_dark": "var(--colors-gray-dark-5)" }, + "prop": "gray.5", + "var": "--colors-gray-5", + "varRef": "var(--colors-gray-5)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["5"]] + }, + "_dark": { "value": "var(--colors-gray-dark-5)", "isReference": false } + } + ], + [ + "gray.6", + { + "_light": { "value": "var(--colors-gray-light-6)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-6)", "_dark": "var(--colors-gray-dark-6)" }, + "prop": "gray.6", + "var": "--colors-gray-6", + "varRef": "var(--colors-gray-6)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["6"]] + }, + "_dark": { "value": "var(--colors-gray-dark-6)", "isReference": false } + } + ], + [ + "gray.7", + { + "_light": { "value": "var(--colors-gray-light-7)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-7)", "_dark": "var(--colors-gray-dark-7)" }, + "prop": "gray.7", + "var": "--colors-gray-7", + "varRef": "var(--colors-gray-7)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["7"]] + }, + "_dark": { "value": "var(--colors-gray-dark-7)", "isReference": false } + } + ], + [ + "gray.8", + { + "_light": { "value": "var(--colors-gray-light-8)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-8)", "_dark": "var(--colors-gray-dark-8)" }, + "prop": "gray.8", + "var": "--colors-gray-8", + "varRef": "var(--colors-gray-8)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["8"]] + }, + "_dark": { "value": "var(--colors-gray-dark-8)", "isReference": false } + } + ], + [ + "gray.9", + { + "_light": { "value": "var(--colors-gray-light-9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-9)", "_dark": "var(--colors-gray-dark-9)" }, + "prop": "gray.9", + "var": "--colors-gray-9", + "varRef": "var(--colors-gray-9)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["9"]] + }, + "_dark": { "value": "var(--colors-gray-dark-9)", "isReference": false } + } + ], + [ + "gray.10", + { + "_light": { "value": "var(--colors-gray-light-10)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-10)", "_dark": "var(--colors-gray-dark-10)" }, + "prop": "gray.10", + "var": "--colors-gray-10", + "varRef": "var(--colors-gray-10)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["10"]] + }, + "_dark": { "value": "var(--colors-gray-dark-10)", "isReference": false } + } + ], + [ + "gray.11", + { + "_light": { "value": "var(--colors-gray-light-11)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-11)", "_dark": "var(--colors-gray-dark-11)" }, + "prop": "gray.11", + "var": "--colors-gray-11", + "varRef": "var(--colors-gray-11)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["11"]] + }, + "_dark": { "value": "var(--colors-gray-dark-11)", "isReference": false } + } + ], + [ + "gray.12", + { + "_light": { "value": "var(--colors-gray-light-12)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-12)", "_dark": "var(--colors-gray-dark-12)" }, + "prop": "gray.12", + "var": "--colors-gray-12", + "varRef": "var(--colors-gray-12)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["12"]] + }, + "_dark": { "value": "var(--colors-gray-dark-12)", "isReference": false } + } + ], + [ + "gray.a1", + { + "_light": { "value": "var(--colors-gray-light-a1)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a1)", "_dark": "var(--colors-gray-dark-a1)" }, + "prop": "gray.a1", + "var": "--colors-gray-a1", + "varRef": "var(--colors-gray-a1)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a1"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a1)", "isReference": false } + } + ], + [ + "gray.a2", + { + "_light": { "value": "var(--colors-gray-light-a2)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a2)", "_dark": "var(--colors-gray-dark-a2)" }, + "prop": "gray.a2", + "var": "--colors-gray-a2", + "varRef": "var(--colors-gray-a2)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a2"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a2)", "isReference": false } + } + ], + [ + "gray.a3", + { + "_light": { "value": "var(--colors-gray-light-a3)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a3)", "_dark": "var(--colors-gray-dark-a3)" }, + "prop": "gray.a3", + "var": "--colors-gray-a3", + "varRef": "var(--colors-gray-a3)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a3"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a3)", "isReference": false } + } + ], + [ + "gray.a4", + { + "_light": { "value": "var(--colors-gray-light-a4)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a4)", "_dark": "var(--colors-gray-dark-a4)" }, + "prop": "gray.a4", + "var": "--colors-gray-a4", + "varRef": "var(--colors-gray-a4)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a4"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a4)", "isReference": false } + } + ], + [ + "gray.a5", + { + "_light": { "value": "var(--colors-gray-light-a5)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a5)", "_dark": "var(--colors-gray-dark-a5)" }, + "prop": "gray.a5", + "var": "--colors-gray-a5", + "varRef": "var(--colors-gray-a5)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a5"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a5)", "isReference": false } + } + ], + [ + "gray.a6", + { + "_light": { "value": "var(--colors-gray-light-a6)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a6)", "_dark": "var(--colors-gray-dark-a6)" }, + "prop": "gray.a6", + "var": "--colors-gray-a6", + "varRef": "var(--colors-gray-a6)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a6"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a6)", "isReference": false } + } + ], + [ + "gray.a7", + { + "_light": { "value": "var(--colors-gray-light-a7)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a7)", "_dark": "var(--colors-gray-dark-a7)" }, + "prop": "gray.a7", + "var": "--colors-gray-a7", + "varRef": "var(--colors-gray-a7)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a7"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a7)", "isReference": false } + } + ], + [ + "gray.a8", + { + "_light": { "value": "var(--colors-gray-light-a8)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a8)", "_dark": "var(--colors-gray-dark-a8)" }, + "prop": "gray.a8", + "var": "--colors-gray-a8", + "varRef": "var(--colors-gray-a8)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a8"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a8)", "isReference": false } + } + ], + [ + "gray.a9", + { + "_light": { "value": "var(--colors-gray-light-a9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a9)", "_dark": "var(--colors-gray-dark-a9)" }, + "prop": "gray.a9", + "var": "--colors-gray-a9", + "varRef": "var(--colors-gray-a9)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a9"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a9)", "isReference": false } + } + ], + [ + "gray.a10", + { + "_light": { "value": "var(--colors-gray-light-a10)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a10)", "_dark": "var(--colors-gray-dark-a10)" }, + "prop": "gray.a10", + "var": "--colors-gray-a10", + "varRef": "var(--colors-gray-a10)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a10"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a10)", "isReference": false } + } + ], + [ + "gray.a11", + { + "_light": { "value": "var(--colors-gray-light-a11)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a11)", "_dark": "var(--colors-gray-dark-a11)" }, + "prop": "gray.a11", + "var": "--colors-gray-a11", + "varRef": "var(--colors-gray-a11)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a11"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a11)", "isReference": false } + } + ], + [ + "gray.a12", + { + "_light": { "value": "var(--colors-gray-light-a12)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-light-a12)", "_dark": "var(--colors-gray-dark-a12)" }, + "prop": "gray.a12", + "var": "--colors-gray-a12", + "varRef": "var(--colors-gray-a12)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["a12"]] + }, + "_dark": { "value": "var(--colors-gray-dark-a12)", "isReference": false } + } + ], + [ + "gray.default", + { + "_light": { "value": "black", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "black", "_dark": "white" }, + "prop": "gray.default", + "var": "--colors-gray-default", + "varRef": "var(--colors-gray-default)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["default"]] + }, + "_dark": { "value": "white", "isReference": false } + } + ], + [ + "gray.emphasized", + { + "_light": { "value": "var(--colors-gray-12)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-12)", "_dark": "var(--colors-gray-12)" }, + "prop": "gray.emphasized", + "var": "--colors-gray-emphasized", + "varRef": "var(--colors-gray-emphasized)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["emphasized"]] + }, + "_dark": { "value": "var(--colors-gray-12)", "isReference": false } + } + ], + [ + "gray.fg", + { + "_light": { "value": "white", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "white", "_dark": "black" }, + "prop": "gray.fg", + "var": "--colors-gray-fg", + "varRef": "var(--colors-gray-fg)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["fg"]] + }, + "_dark": { "value": "black", "isReference": false } + } + ], + [ + "gray.text", + { + "_light": { "value": "black", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "black", "_dark": "white" }, + "prop": "gray.text", + "var": "--colors-gray-text", + "varRef": "var(--colors-gray-text)", + "colorPalette": "gray", + "colorPaletteRoots": [["gray"]], + "colorPaletteTokenKeys": [["text"]] + }, + "_dark": { "value": "white", "isReference": false } + } + ], + [ + "neutral.1", + { + "_light": { "value": "var(--colors-neutral-light-1)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-1)", "_dark": "var(--colors-neutral-dark-1)" }, + "prop": "neutral.1", + "var": "--colors-neutral-1", + "varRef": "var(--colors-neutral-1)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["1"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-1)", "isReference": false } + } + ], + [ + "neutral.2", + { + "_light": { "value": "var(--colors-neutral-light-2)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-2)", "_dark": "var(--colors-neutral-dark-2)" }, + "prop": "neutral.2", + "var": "--colors-neutral-2", + "varRef": "var(--colors-neutral-2)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["2"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-2)", "isReference": false } + } + ], + [ + "neutral.3", + { + "_light": { "value": "var(--colors-neutral-light-3)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-3)", "_dark": "var(--colors-neutral-dark-3)" }, + "prop": "neutral.3", + "var": "--colors-neutral-3", + "varRef": "var(--colors-neutral-3)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["3"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-3)", "isReference": false } + } + ], + [ + "neutral.4", + { + "_light": { "value": "var(--colors-neutral-light-4)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-4)", "_dark": "var(--colors-neutral-dark-4)" }, + "prop": "neutral.4", + "var": "--colors-neutral-4", + "varRef": "var(--colors-neutral-4)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["4"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-4)", "isReference": false } + } + ], + [ + "neutral.5", + { + "_light": { "value": "var(--colors-neutral-light-5)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-5)", "_dark": "var(--colors-neutral-dark-5)" }, + "prop": "neutral.5", + "var": "--colors-neutral-5", + "varRef": "var(--colors-neutral-5)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["5"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-5)", "isReference": false } + } + ], + [ + "neutral.6", + { + "_light": { "value": "var(--colors-neutral-light-6)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-6)", "_dark": "var(--colors-neutral-dark-6)" }, + "prop": "neutral.6", + "var": "--colors-neutral-6", + "varRef": "var(--colors-neutral-6)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["6"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-6)", "isReference": false } + } + ], + [ + "neutral.7", + { + "_light": { "value": "var(--colors-neutral-light-7)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-7)", "_dark": "var(--colors-neutral-dark-7)" }, + "prop": "neutral.7", + "var": "--colors-neutral-7", + "varRef": "var(--colors-neutral-7)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["7"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-7)", "isReference": false } + } + ], + [ + "neutral.8", + { + "_light": { "value": "var(--colors-neutral-light-8)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-8)", "_dark": "var(--colors-neutral-dark-8)" }, + "prop": "neutral.8", + "var": "--colors-neutral-8", + "varRef": "var(--colors-neutral-8)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["8"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-8)", "isReference": false } + } + ], + [ + "neutral.9", + { + "_light": { "value": "var(--colors-neutral-light-9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-9)", "_dark": "var(--colors-neutral-dark-9)" }, + "prop": "neutral.9", + "var": "--colors-neutral-9", + "varRef": "var(--colors-neutral-9)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["9"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-9)", "isReference": false } + } + ], + [ + "neutral.10", + { + "_light": { "value": "var(--colors-neutral-light-10)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-10)", "_dark": "var(--colors-neutral-dark-10)" }, + "prop": "neutral.10", + "var": "--colors-neutral-10", + "varRef": "var(--colors-neutral-10)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["10"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-10)", "isReference": false } + } + ], + [ + "neutral.11", + { + "_light": { "value": "var(--colors-neutral-light-11)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-11)", "_dark": "var(--colors-neutral-dark-11)" }, + "prop": "neutral.11", + "var": "--colors-neutral-11", + "varRef": "var(--colors-neutral-11)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["11"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-11)", "isReference": false } + } + ], + [ + "neutral.12", + { + "_light": { "value": "var(--colors-neutral-light-12)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-12)", "_dark": "var(--colors-neutral-dark-12)" }, + "prop": "neutral.12", + "var": "--colors-neutral-12", + "varRef": "var(--colors-neutral-12)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["12"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-12)", "isReference": false } + } + ], + [ + "neutral.a1", + { + "_light": { "value": "var(--colors-neutral-light-a1)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a1)", "_dark": "var(--colors-neutral-dark-a1)" }, + "prop": "neutral.a1", + "var": "--colors-neutral-a1", + "varRef": "var(--colors-neutral-a1)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a1"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a1)", "isReference": false } + } + ], + [ + "neutral.a2", + { + "_light": { "value": "var(--colors-neutral-light-a2)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a2)", "_dark": "var(--colors-neutral-dark-a2)" }, + "prop": "neutral.a2", + "var": "--colors-neutral-a2", + "varRef": "var(--colors-neutral-a2)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a2"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a2)", "isReference": false } + } + ], + [ + "neutral.a3", + { + "_light": { "value": "var(--colors-neutral-light-a3)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a3)", "_dark": "var(--colors-neutral-dark-a3)" }, + "prop": "neutral.a3", + "var": "--colors-neutral-a3", + "varRef": "var(--colors-neutral-a3)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a3"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a3)", "isReference": false } + } + ], + [ + "neutral.a4", + { + "_light": { "value": "var(--colors-neutral-light-a4)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a4)", "_dark": "var(--colors-neutral-dark-a4)" }, + "prop": "neutral.a4", + "var": "--colors-neutral-a4", + "varRef": "var(--colors-neutral-a4)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a4"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a4)", "isReference": false } + } + ], + [ + "neutral.a5", + { + "_light": { "value": "var(--colors-neutral-light-a5)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a5)", "_dark": "var(--colors-neutral-dark-a5)" }, + "prop": "neutral.a5", + "var": "--colors-neutral-a5", + "varRef": "var(--colors-neutral-a5)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a5"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a5)", "isReference": false } + } + ], + [ + "neutral.a6", + { + "_light": { "value": "var(--colors-neutral-light-a6)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a6)", "_dark": "var(--colors-neutral-dark-a6)" }, + "prop": "neutral.a6", + "var": "--colors-neutral-a6", + "varRef": "var(--colors-neutral-a6)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a6"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a6)", "isReference": false } + } + ], + [ + "neutral.a7", + { + "_light": { "value": "var(--colors-neutral-light-a7)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a7)", "_dark": "var(--colors-neutral-dark-a7)" }, + "prop": "neutral.a7", + "var": "--colors-neutral-a7", + "varRef": "var(--colors-neutral-a7)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a7"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a7)", "isReference": false } + } + ], + [ + "neutral.a8", + { + "_light": { "value": "var(--colors-neutral-light-a8)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a8)", "_dark": "var(--colors-neutral-dark-a8)" }, + "prop": "neutral.a8", + "var": "--colors-neutral-a8", + "varRef": "var(--colors-neutral-a8)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a8"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a8)", "isReference": false } + } + ], + [ + "neutral.a9", + { + "_light": { "value": "var(--colors-neutral-light-a9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a9)", "_dark": "var(--colors-neutral-dark-a9)" }, + "prop": "neutral.a9", + "var": "--colors-neutral-a9", + "varRef": "var(--colors-neutral-a9)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a9"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a9)", "isReference": false } + } + ], + [ + "neutral.a10", + { + "_light": { "value": "var(--colors-neutral-light-a10)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a10)", "_dark": "var(--colors-neutral-dark-a10)" }, + "prop": "neutral.a10", + "var": "--colors-neutral-a10", + "varRef": "var(--colors-neutral-a10)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a10"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a10)", "isReference": false } + } + ], + [ + "neutral.a11", + { + "_light": { "value": "var(--colors-neutral-light-a11)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a11)", "_dark": "var(--colors-neutral-dark-a11)" }, + "prop": "neutral.a11", + "var": "--colors-neutral-a11", + "varRef": "var(--colors-neutral-a11)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a11"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a11)", "isReference": false } + } + ], + [ + "neutral.a12", + { + "_light": { "value": "var(--colors-neutral-light-a12)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-neutral-light-a12)", "_dark": "var(--colors-neutral-dark-a12)" }, + "prop": "neutral.a12", + "var": "--colors-neutral-a12", + "varRef": "var(--colors-neutral-a12)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["a12"]] + }, + "_dark": { "value": "var(--colors-neutral-dark-a12)", "isReference": false } + } + ], + [ + "neutral.default", + { + "_light": { "value": "black", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "black", "_dark": "white" }, + "prop": "neutral.default", + "var": "--colors-neutral-default", + "varRef": "var(--colors-neutral-default)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["default"]] + }, + "_dark": { "value": "white", "isReference": false } + } + ], + [ + "neutral.emphasized", + { + "_light": { "value": "var(--colors-gray-12)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-12)", "_dark": "var(--colors-gray-12)" }, + "prop": "neutral.emphasized", + "var": "--colors-neutral-emphasized", + "varRef": "var(--colors-neutral-emphasized)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["emphasized"]] + }, + "_dark": { "value": "var(--colors-gray-12)", "isReference": false } + } + ], + [ + "neutral.fg", + { + "_light": { "value": "white", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "white", "_dark": "black" }, + "prop": "neutral.fg", + "var": "--colors-neutral-fg", + "varRef": "var(--colors-neutral-fg)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["fg"]] + }, + "_dark": { "value": "black", "isReference": false } + } + ], + [ + "neutral.text", + { + "_light": { "value": "black", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "black", "_dark": "white" }, + "prop": "neutral.text", + "var": "--colors-neutral-text", + "varRef": "var(--colors-neutral-text)", + "colorPalette": "neutral", + "colorPaletteRoots": [["neutral"]], + "colorPaletteTokenKeys": [["text"]] + }, + "_dark": { "value": "white", "isReference": false } + } + ], + [ + "fg.disabled", + { + "_light": { "value": "var(--colors-gray-9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-gray-9)", "_dark": "var(--colors-gray-9)" }, + "prop": "fg.disabled", + "var": "--colors-fg-disabled", + "varRef": "var(--colors-fg-disabled)", + "colorPalette": "fg", + "colorPaletteRoots": [["fg"]], + "colorPaletteTokenKeys": [["disabled"]] + }, + "_dark": { "value": "var(--colors-gray-9)", "isReference": false } + } + ], + [ + "fg.error", + { + "_light": { "value": "var(--colors-red-9)", "isReference": false }, + "extensions": { + "condition": "_dark", + "category": "colors", + "conditions": { "_light": "var(--colors-red-9)", "_dark": "var(--colors-red-9)" }, + "prop": "fg.error", + "var": "--colors-fg-error", + "varRef": "var(--colors-fg-error)", + "colorPalette": "fg", + "colorPaletteRoots": [["fg"]], + "colorPaletteTokenKeys": [["error"]] + }, + "_dark": { "value": "var(--colors-red-9)", "isReference": false } + } + ], + [ + "fg.default", + { + "_dark": { "value": "rgba(255, 255, 255, 0.87)", "isReference": false }, + "extensions": { + "condition": "_light", + "category": "colors", + "conditions": { "_dark": "rgba(255, 255, 255, 0.87)", "_light": "rgba(0, 0, 0, 0.87)" }, + "prop": "fg.default", + "var": "--colors-fg-default", + "varRef": "var(--colors-fg-default)", + "colorPalette": "fg", + "colorPaletteRoots": [["fg"]], + "colorPaletteTokenKeys": [["default"]] + }, + "_light": { "value": "rgba(0, 0, 0, 0.87)", "isReference": false } + } + ], + [ + "fg.subtle", + { + "_dark": { "value": "rgba(255, 255, 255, 0.60)", "isReference": false }, + "extensions": { + "condition": "_light", + "category": "colors", + "conditions": { "_dark": "rgba(255, 255, 255, 0.60)", "_light": "rgba(0, 0, 0, 0.60)" }, + "prop": "fg.subtle", + "var": "--colors-fg-subtle", + "varRef": "var(--colors-fg-subtle)", + "colorPalette": "fg", + "colorPaletteRoots": [["fg"]], + "colorPaletteTokenKeys": [["subtle"]] + }, + "_light": { "value": "rgba(0, 0, 0, 0.60)", "isReference": false } + } + ], + [ + "fg.muted", + { + "_dark": { "value": "rgba(255, 255, 255, 0.38)", "isReference": false }, + "extensions": { + "condition": "_light", + "category": "colors", + "conditions": { "_dark": "rgba(255, 255, 255, 0.38)", "_light": "rgba(0, 0, 0, 0.38)" }, + "prop": "fg.muted", + "var": "--colors-fg-muted", + "varRef": "var(--colors-fg-muted)", + "colorPalette": "fg", + "colorPaletteRoots": [["fg"]], + "colorPaletteTokenKeys": [["muted"]] + }, + "_light": { "value": "rgba(0, 0, 0, 0.38)", "isReference": false } + } + ] +] diff --git a/packages/studio/package.json b/packages/studio/package.json index 2130e329a5..a9d56afee2 100644 --- a/packages/studio/package.json +++ b/packages/studio/package.json @@ -68,6 +68,7 @@ }, "devDependencies": { "@types/react": "18.2.55", - "@types/react-dom": "18.2.19" + "@types/react-dom": "18.2.19", + "@testing-library/react": "14.2.2" } } diff --git a/packages/studio/src/components/colors.tsx b/packages/studio/src/components/colors.tsx index 0ae9377b6b..86d7c10c23 100644 --- a/packages/studio/src/components/colors.tsx +++ b/packages/studio/src/components/colors.tsx @@ -1,4 +1,4 @@ -import type { Token } from '@pandacss/token-dictionary' +import type { Token, TokenExtensions } from '@pandacss/token-dictionary' import * as React from 'react' import { Grid, HStack, Stack, panda } from '../../styled-system/jsx' import { ColorWrapper } from '../components/color-wrapper' @@ -15,33 +15,37 @@ function getColorFromReference(reference: string) { return reference.match(/{colors\.(.*?)}/)?.[1] } +export interface SemanticTokenProps { + name: string + tokens: Record +} + +export function SemanticToken(props: SemanticTokenProps) { + const { name, tokens } = props + + return ( + + + + + + {name} + + ) +} + export default function Colors() { const { filterQuery, setFilterQuery, semanticTokens, hasResults, uncategorizedColors, categorizedColors } = useColorDocs() - const renderSemanticTokens = () => { - return semanticTokens.map(([name, colors], i) => { - return ( - - - - - - - {name} - - ) - }) - } - return ( @@ -60,7 +64,13 @@ export default function Colors() { - {!!semanticTokens.length && {renderSemanticTokens()}} + {!!semanticTokens.length && ( + + {semanticTokens.map(([name, colors], i) => ( + + ))} + + )} {!hasResults &&
No result found! 🐼
} diff --git a/packages/studio/src/lib/use-color-docs.ts b/packages/studio/src/lib/use-color-docs.ts index aa777ca42d..f57c702596 100644 --- a/packages/studio/src/lib/use-color-docs.ts +++ b/packages/studio/src/lib/use-color-docs.ts @@ -10,7 +10,7 @@ interface Color { path: string[] } -type ColorToken = Token & Color & TokenExtensions +export type ColorToken = Token & Color & TokenExtensions const UNCATEGORIZED_ID = 'uncategorized' as const diff --git a/packages/studio/tsconfig.json b/packages/studio/tsconfig.json index 345878332c..aab13fa42d 100644 --- a/packages/studio/tsconfig.json +++ b/packages/studio/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "astro/tsconfigs/strict", - "include": ["src"], + "include": ["src", "__tests__"], "compilerOptions": { "jsx": "preserve", "customConditions": ["source"] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e67b91b88..a80cc6be8c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -84,6 +84,9 @@ importers: prettier: specifier: 3.2.5 version: 3.2.5 + vite-plugin-virtual: + specifier: ^0.3.0 + version: 0.3.0(vite@5.4.11(@types/node@20.11.30)(less@4.2.0)(lightningcss@1.25.1)(terser@5.36.0)) packages/astro-plugin-studio: dependencies: @@ -663,6 +666,9 @@ importers: specifier: 5.4.11 version: 5.4.11(@types/node@22.9.0)(less@4.2.0)(lightningcss@1.25.1)(terser@5.36.0) devDependencies: + '@testing-library/react': + specifier: 14.2.2 + version: 14.2.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -16687,6 +16693,11 @@ packages: '@testing-library/jest-dom': optional: true + vite-plugin-virtual@0.3.0: + resolution: {integrity: sha512-TOtrWw6jKrJNXfxhGRUiQzfAP1gRkYkVzMkJNjHUJ8idLuxf8eeeDKZKZHhdeYfaCc/87rv+KvWE2iCy1QInWA==} + peerDependencies: + vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 + vite-plugin-vue-inspector@5.1.3: resolution: {integrity: sha512-pMrseXIDP1Gb38mOevY+BvtNGNqiqmqa2pKB99lnLsADQww9w9xMbAfT4GB6RUoaOkSPrtlXqpq2Fq+Dj2AgFg==} peerDependencies: @@ -28419,7 +28430,7 @@ snapshots: eslint: 8.56.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.56.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.56.0) eslint-plugin-react: 7.33.2(eslint@8.56.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0) @@ -28469,7 +28480,7 @@ snapshots: is-bun-module: 1.2.1 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.56.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node @@ -28587,6 +28598,33 @@ snapshots: - eslint-import-resolver-webpack - supports-color + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0): + dependencies: + array-includes: 3.1.8 + array.prototype.findlastindex: 1.2.5 + array.prototype.flat: 1.3.2 + array.prototype.flatmap: 1.3.2 + debug: 3.2.7 + doctrine: 2.1.0 + eslint: 8.56.0 + eslint-import-resolver-node: 0.3.9 + eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0) + hasown: 2.0.2 + is-core-module: 2.15.1 + is-glob: 4.0.3 + minimatch: 3.1.2 + object.fromentries: 2.0.8 + object.groupby: 1.0.3 + object.values: 1.2.0 + semver: 6.3.1 + tsconfig-paths: 3.15.0 + optionalDependencies: + '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.3.3) + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color + eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0): dependencies: '@babel/runtime': 7.26.0 @@ -37536,6 +37574,10 @@ snapshots: transitivePeerDependencies: - supports-color + vite-plugin-virtual@0.3.0(vite@5.4.11(@types/node@20.11.30)(less@4.2.0)(lightningcss@1.25.1)(terser@5.36.0)): + dependencies: + vite: 5.4.11(@types/node@20.11.30)(less@4.2.0)(lightningcss@1.25.1)(terser@5.36.0) + vite-plugin-vue-inspector@5.1.3(vite@5.4.11(@types/node@22.9.0)(less@4.2.0)(lightningcss@1.25.1)(terser@5.36.0)): dependencies: '@babel/core': 7.23.9 diff --git a/vitest.config.ts b/vitest.config.ts index dbe64307ca..d5001055c7 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -1,11 +1,18 @@ import { defineConfig } from 'vitest/config' import tsconfigPaths from 'vite-tsconfig-paths' +import virtual from 'vite-plugin-virtual' const resolve = (val: string) => new URL(val, import.meta.url).pathname +function virtualPanda() { + return virtual({ + 'virtual:panda': 'export const config = {}', + }) +} + export default defineConfig({ root: process.cwd(), - plugins: [tsconfigPaths()], + plugins: [tsconfigPaths(), virtualPanda()], test: { globals: true, setupFiles: ['tests-setup.ts'], From ebc8b11f0e7e8f50b7846569e4b7f70f09913a9f Mon Sep 17 00:00:00 2001 From: Asuka109 Date: Mon, 23 Dec 2024 00:06:15 +0800 Subject: [PATCH 2/4] feat(studio): sort and render arbitrary semantic tokens --- .../__tests__/components/colors.test.tsx | 29 ++++++++++++- packages/studio/src/components/colors.tsx | 43 +++++++++++++------ 2 files changed, 58 insertions(+), 14 deletions(-) diff --git a/packages/studio/__tests__/components/colors.test.tsx b/packages/studio/__tests__/components/colors.test.tsx index 7b57622923..a0aaaa4980 100644 --- a/packages/studio/__tests__/components/colors.test.tsx +++ b/packages/studio/__tests__/components/colors.test.tsx @@ -2,12 +2,37 @@ import React from 'react' import { describe, expect, it } from 'vitest' import { render } from '@testing-library/react' import type { TokenExtensions } from '@pandacss/token-dictionary' -import { SemanticToken } from '../../src/components/colors' +import { SemanticToken, sortSemanticTokens } from '../../src/components/colors' import rawSemanticTokens from '../fixtures/semantic-tokens-park-ui.json' const semanticTokens = rawSemanticTokens as [string, TokenExtensions][] +describe('sortSemanticTokens', () => { + it('should sort tokens', () => { + const tokens = ['c', '_dark', 'a', '_light', 'base', 'b'] + const expected = ['base', '_light', '_dark', 'a', 'b', 'c'] + expect(sortSemanticTokens(tokens)).toEqual(expected) + }) +}) + describe('SemanticToken', () => { + it('should render semantic tokens', () => { + const token = { + base: { value: '#fff' }, + dark: { value: '#000' }, + extensions: { + conditions: { + base: '#fff', + dark: '#000', + }, + }, + } as any + + const { container } = render() + + expect(container.textContent).toBe('base#fff dark#000 bg.default') + }) + it('should render semantic tokens without base token', () => { const { container } = render( <> @@ -17,6 +42,6 @@ describe('SemanticToken', () => { , ) - expect(container.firstChild).toMatchInlineSnapshot() + expect(container.firstChild?.textContent).toBe('lightvar(--colors-gray-1) darkvar(--colors-gray-1) bg.canvas') }) }) diff --git a/packages/studio/src/components/colors.tsx b/packages/studio/src/components/colors.tsx index 86d7c10c23..8ad75f92db 100644 --- a/packages/studio/src/components/colors.tsx +++ b/packages/studio/src/components/colors.tsx @@ -4,7 +4,7 @@ import { Grid, HStack, Stack, panda } from '../../styled-system/jsx' import { ColorWrapper } from '../components/color-wrapper' import { TokenContent } from '../components/token-content' import { TokenGroup } from '../components/token-group' -import { useColorDocs } from '../lib/use-color-docs' +import { useColorDocs, type ColorToken } from '../lib/use-color-docs' import { Input } from './input' import { SemanticColorDisplay } from './semantic-color' import { StickyTop } from './sticky-top' @@ -15,27 +15,46 @@ function getColorFromReference(reference: string) { return reference.match(/{colors\.(.*?)}/)?.[1] } +const SEMANTIC_TOKEN_PRIORITY = ['base', 'light', 'dark', '_light', '_dark'] + +export function sortSemanticTokens(tokens: string[]) { + const ret = tokens.slice() + ret.sort((a, b) => { + const _a = SEMANTIC_TOKEN_PRIORITY.indexOf(a) + const _b = SEMANTIC_TOKEN_PRIORITY.indexOf(b) + if (_a !== -1 && _b !== -1) return _a - _b + if (_a !== -1) return -1 + if (_b !== -1) return 1 + return a.localeCompare(b) + }) + + return ret +} + export interface SemanticTokenProps { name: string - tokens: Record + tokens: Record } export function SemanticToken(props: SemanticTokenProps) { const { name, tokens } = props + const conditions: string[] = [] + if (tokens.extensions.conditions) { + conditions.push(...sortSemanticTokens(Object.keys(tokens.extensions.conditions))) + } + return ( - - + {conditions.map((cond) => ( + + ))} {name} From 1c45566eb03466a837825c57ef97007172a814d8 Mon Sep 17 00:00:00 2001 From: Asuka109 Date: Mon, 23 Dec 2024 00:08:56 +0800 Subject: [PATCH 3/4] feat: adjust token priority --- packages/studio/src/components/colors.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/studio/src/components/colors.tsx b/packages/studio/src/components/colors.tsx index 8ad75f92db..4194599ef0 100644 --- a/packages/studio/src/components/colors.tsx +++ b/packages/studio/src/components/colors.tsx @@ -15,7 +15,7 @@ function getColorFromReference(reference: string) { return reference.match(/{colors\.(.*?)}/)?.[1] } -const SEMANTIC_TOKEN_PRIORITY = ['base', 'light', 'dark', '_light', '_dark'] +const SEMANTIC_TOKEN_PRIORITY = ['base', 'light', '_light', 'dark', '_dark'] export function sortSemanticTokens(tokens: string[]) { const ret = tokens.slice() From a245db80b86d6752e9d8fed6c13c1fdf8175b8ce Mon Sep 17 00:00:00 2001 From: Asuka109 Date: Mon, 23 Dec 2024 00:11:48 +0800 Subject: [PATCH 4/4] chore: add changeset --- .changeset/wild-lizards-look.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wild-lizards-look.md diff --git a/.changeset/wild-lizards-look.md b/.changeset/wild-lizards-look.md new file mode 100644 index 0000000000..64195a7d70 --- /dev/null +++ b/.changeset/wild-lizards-look.md @@ -0,0 +1,5 @@ +--- +'@pandacss/studio': patch +--- + +fix(studio): can't render semantic color token without base definition