From 3775f2ad20047c49fed7e798924d09f65e97a63e Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sun, 27 Sep 2026 08:08:37 +0200 Subject: [PATCH 1/2] [Css] Add the CSS component | Q | A | -------------- | --- | Bug fix? | no | New feature? | yes | Deprecations? | no | Documentation? | yes | Issues | | License | MIT This PR adds a new package, `symfony/ux-css`. It gives Twig a `css()` function in the spirit of Panda CSS (https://panda-css.com/): you pass a hash of style properties and get back atomic class names built from design tokens. The hash is checked when Twig compiles the template, so a misspelled property or an unknown token shows up as a Twig syntax error pointing to the template line, not as a silent CSS bug. PHP writes one CSS file (`var/ux_css/styles.css`). There is no Node.js involved. AssetMapper serves the file directly, and Webpack Encore or Symfony Reprise can import it like any other stylesheet. Class names and generated CSS match what Panda CSS produces (a pinned version) for the supported syntax, checked against test cases recorded from Panda's own test suite. ```html+twig
``` This renders `class="p_md c_fg hover:c_primary md:p_lg"`. This is complementary to #3932 (Simon's "[DesignTokens] Add the Design Tokens component"), not competing with it. #3932 reads DTCG token files and exposes their values as CSS variables and PHP values. This PR is a styling API that consumes tokens. A later step could let `ux-css` read its tokens from `ux-design-tokens` instead of its own config. I open this as a draft so both approaches can be compared side by side. Most of the diff, about 64,000 of the 114,000 lines, is test fixtures recorded from Panda CSS: reviewers can skip `src/Css/tests/Fixtures/Panda/`. The package suite passes (5445 tests, 224 skipped because they cover Panda syntax we don't support), and PHP-CS-Fixer, Twig-CS-Fixer and DOCtor-RST all pass too. --- apps/bundler/assets/app-encore.js | 1 + apps/bundler/assets/app-reprise.ts | 1 + apps/bundler/composer.json | 1 + apps/bundler/config/bundles.php | 1 + apps/bundler/config/packages/ux_css.yaml | 4 + apps/bundler/config/reference.php | 19 + apps/bundler/config/reference_css.php | 1099 + apps/bundler/symfony.lock | 3 + apps/bundler/templates/base.html.twig | 2 +- apps/e2e/.gitignore | 1 + apps/e2e/composer.json | 1 + apps/e2e/config/bundles.php | 1 + apps/e2e/config/packages/ux_css.yaml | 12 + apps/e2e/src/Controller/CssController.php | 29 + apps/e2e/src/Repository/ExampleRepository.php | 1 + apps/e2e/src/UxPackage.php | 2 + apps/e2e/symfony.lock | 3 + apps/e2e/templates/ux_css/basic.html.twig | 15 + pnpm-lock.yaml | 2 + splitsh.json | 1 + src/Css/.gitattributes | 10 + src/Css/.gitignore | 6 + src/Css/.symfony.bundle.yaml | 3 + src/Css/CHANGELOG.md | 5 + src/Css/CONTRIBUTING.md | 103 + src/Css/LICENSE | 19 + src/Css/README.md | 24 + src/Css/assets/package.json | 19 + src/Css/assets/playwright.config.ts | 3 + src/Css/assets/test/browser/css.test.ts | 29 + src/Css/composer.json | 61 + src/Css/doc/alternatives.rst | 106 + src/Css/doc/bundlers.rst | 70 + src/Css/doc/conditions.rst | 174 + src/Css/doc/configuration.rst | 132 + src/Css/doc/css-function.rst | 144 + src/Css/doc/dynamic-styles.rst | 122 + src/Css/doc/editors.rst | 69 + src/Css/doc/getting-started.rst | 156 + src/Css/doc/index.rst | 104 + src/Css/doc/installation.rst | 56 + src/Css/doc/panda.rst | 57 + src/Css/doc/production.rst | 58 + src/Css/doc/tokens.rst | 207 + src/Css/doc/validation.rst | 88 + src/Css/phpbench.json | 16 + src/Css/phpunit.dist.xml | 38 + src/Css/resources/css-types.json | 28132 ++++++++++++++++ src/Css/resources/panda-preset.json | 2968 ++ src/Css/resources/panda-tokens.json | 1308 + .../src/CacheWarmer/StylesheetCacheWarmer.php | 44 + src/Css/src/CssGenerator.php | 81 + .../Compiler/ReferenceDumpPass.php | 56 + .../Compiler/TemplateIteratorPass.php | 42 + .../PandaConfigConverter.php | 326 + src/Css/src/Dumper/StylesheetDumper.php | 224 + src/Css/src/Dumper/TemplateScanner.php | 58 + src/Css/src/Engine/AtRuleSorter.php | 167 + src/Css/src/Engine/AtomicStyle.php | 36 + src/Css/src/Engine/Breakpoints.php | 115 + src/Css/src/Engine/ClassNameGenerator.php | 262 + src/Css/src/Engine/Condition.php | 57 + src/Css/src/Engine/ConditionParser.php | 83 + src/Css/src/Engine/Conditions.php | 156 + src/Css/src/Engine/Css/AtRule.php | 45 + src/Css/src/Engine/Css/Container.php | 168 + src/Css/src/Engine/Css/Declaration.php | 44 + src/Css/src/Engine/Css/MergeRules.php | 359 + src/Css/src/Engine/Css/Node.php | 61 + src/Css/src/Engine/Css/Optimizer.php | 178 + src/Css/src/Engine/Css/Root.php | 30 + src/Css/src/Engine/Css/Rule.php | 87 + src/Css/src/Engine/CssEscaper.php | 43 + src/Css/src/Engine/Engine.php | 149 + src/Css/src/Engine/JsValue.php | 155 + src/Css/src/Engine/PandaConfig.php | 43 + src/Css/src/Engine/Preset/BaseTransforms.php | 379 + src/Css/src/Engine/PropertyName.php | 31 + src/Css/src/Engine/PropertyPriority.php | 494 + src/Css/src/Engine/Selectors.php | 88 + src/Css/src/Engine/SortStyleRules.php | 183 + src/Css/src/Engine/StaticCss.php | 95 + src/Css/src/Engine/StyleDecoder.php | 191 + src/Css/src/Engine/StyleEncoder.php | 146 + src/Css/src/Engine/StyleEntry.php | 42 + src/Css/src/Engine/StyleStringifier.php | 163 + src/Css/src/Engine/Stylesheet.php | 78 + src/Css/src/Engine/SvgDataUri.php | 104 + src/Css/src/Engine/Token.php | 56 + src/Css/src/Engine/TokenCss.php | 224 + src/Css/src/Engine/Tokens.php | 1107 + src/Css/src/Engine/TransformArgs.php | 53 + src/Css/src/Engine/Unitless.php | 88 + src/Css/src/Engine/Units.php | 55 + src/Css/src/Engine/Utilities.php | 267 + src/Css/src/Engine/Utility.php | 33 + .../src/EventListener/StylesheetListener.php | 44 + src/Css/src/Exception/ExceptionInterface.php | 19 + .../Exception/InvalidArgumentException.php | 19 + .../src/Exception/InvalidStyleException.php | 21 + .../Exception/UnsupportedStyleException.php | 19 + src/Css/src/Reference/ReferenceDumper.php | 145 + src/Css/src/Twig/CssExpression.php | 61 + src/Css/src/Twig/CssExtension.php | 40 + src/Css/src/Twig/CssNodeVisitor.php | 516 + src/Css/src/Twig/CssRuntime.php | 101 + src/Css/src/Twig/CssSyntaxError.php | 25 + src/Css/src/UXCssBundle.php | 260 + src/Css/src/Validation/StyleValidator.php | 589 + src/Css/src/Validation/Suggestion.php | 43 + src/Css/tests/Benchmark/BenchProject.php | 96 + src/Css/tests/Benchmark/CompileBench.php | 71 + src/Css/tests/Benchmark/ContainerBench.php | 44 + src/Css/tests/Benchmark/GenerateBench.php | 79 + src/Css/tests/Benchmark/RuntimeBench.php | 89 + src/Css/tests/Benchmark/StylesheetBench.php | 82 + src/Css/tests/CssGeneratorTest.php | 130 + src/Css/tests/Engine/BreakpointsTest.php | 60 + .../tests/Engine/ClassNameGeneratorTest.php | 153 + src/Css/tests/Engine/ConditionsTest.php | 64 + src/Css/tests/Engine/Css/OptimizerTest.php | 128 + src/Css/tests/Engine/CssEscaperTest.php | 63 + src/Css/tests/Engine/PandaConfigTest.php | 63 + src/Css/tests/Engine/PropertyNameTest.php | 34 + src/Css/tests/Engine/StaticCssTest.php | 29 + src/Css/tests/Engine/StyleEncoderTest.php | 92 + src/Css/tests/Engine/StylesheetTest.php | 128 + src/Css/tests/Engine/TokensTest.php | 351 + src/Css/tests/Engine/UtilitiesTest.php | 121 + src/Css/tests/Fixtures/Panda/PANDA_COMMIT | 1 + ...es.core.__tests__.atomic-rule.test.ts.json | 795 + ...ages.core.__tests__.color-mix.test.ts.json | 1209 + ...s.core.__tests__.complex-rule.test.ts.json | 36 + ...es.core.__tests__.composition.test.ts.json | 289 + ...core.__tests__.custom-utility.test.ts.json | 308 + ...kages.core.__tests__.gradient.test.ts.json | 197 + ...ackages.core.__tests__.prefix.test.ts.json | 87 + ...core.__tests__.rule-processor.test.ts.json | 1604 + ...ges.core.__tests__.static-css.test.ts.json | 3110 ++ ...re.__tests__.template-literal.test.ts.json | 583 + ...ator.__tests__.generate-token.test.ts.json | 9096 +++++ ...ckages.parser.__tests__.css-2.test.ts.json | 26 + ...ges.parser.__tests__.css-prop.test.ts.json | 23 + ....__tests__.css-raw-edge-cases.test.ts.json | 724 + ...rser.__tests__.css-raw-spread.test.ts.json | 276 + ...er.__tests__.css-raw-variants.test.ts.json | 180 + ...ages.parser.__tests__.css-raw.test.ts.json | 35 + ...s.parser.__tests__.import-map.test.ts.json | 94 + ....parser.__tests__.jsx-pattern.test.ts.json | 55 + ...s.parser.__tests__.jsx-recipe.test.ts.json | 66 + ...packages.parser.__tests__.jsx.test.ts.json | 729 + ...es.parser.__tests__.namespace.test.ts.json | 119 + ...kages.parser.__tests__.output.test.ts.json | 2675 ++ ...ests__.pattern-raw-extraction.test.ts.json | 393 + ...ser.__tests__.preset-patterns.test.ts.json | 959 + ...s.parser.__tests__.static-css.test.ts.json | 201 + ...packages.parser.__tests__.sva.test.ts.json | 53 + ...kages.parser.__tests__.svelte.test.ts.json | 57 + ...packages.parser.__tests__.vue.test.ts.json | 128 + ...sandbox.codegen.__tests__.css.test.ts.json | 422 + ...sandbox.codegen.__tests__.cva.test.ts.json | 82 + ...ameworks.react.style-context.test.tsx.json | 253 + ...dbox.codegen.__tests__.recipe.test.ts.json | 141 + ...sts__.scenarios.format-names.test.tsx.json | 428 + ...narios.strict-property-values.test.ts.json | 554 + ...sts__.scenarios.strict-tokens.test.ts.json | 543 + ...en.__tests__.scenarios.strict.test.ts.json | 543 + ...codegen.__tests__.slot-recipe.test.ts.json | 101 + ...gen.__tests__.styled-factory.test.tsx.json | 590 + ...sandbox.codegen.__tests__.sva.test.ts.json | 138 + .../Panda/configs/codegen-format-names.json | 4628 +++ .../Fixtures/Panda/configs/codegen-react.json | 4627 +++ .../codegen-strict-property-values.json | 4628 +++ .../Panda/configs/codegen-strict-tokens.json | 4628 +++ .../Panda/configs/codegen-strict.json | 4629 +++ .../tests/Fixtures/Panda/configs/fixture.json | 4712 +++ src/Css/tests/Fixtures/Panda/expectations.php | 327 + src/Css/tests/Fixtures/Panda/tokens.json | 2360 ++ src/Css/tests/Fixtures/Panda/utilities.json | 5300 +++ .../Fixtures/Reference/reference_css.php | 1083 + src/Css/tests/Fixtures/Reference/usage.php | 28 + src/Css/tests/Fixtures/TestKernel.php | 115 + src/Css/tests/Fixtures/TestLogger.php | 38 + .../unknown_property.html.twig | 5 + src/Css/tests/Fixtures/templates/.gitkeep | 0 src/Css/tests/Golden/OutOfScopeException.php | 16 + src/Css/tests/Golden/PandaCase.php | 79 + src/Css/tests/Golden/PandaCaseLoader.php | 92 + src/Css/tests/Golden/PandaCaseLoaderTest.php | 82 + src/Css/tests/Golden/PandaCaseRunner.php | 121 + src/Css/tests/Golden/PandaCaseTest.php | 47 + .../tests/Golden/PandaDefaultTokensTest.php | 44 + src/Css/tests/Golden/PandaExpectations.php | 84 + .../tests/Golden/PandaExpectationsTest.php | 43 + src/Css/tests/Golden/PandaGoldenTest.php | 93 + src/Css/tests/Golden/PandaStaticCssTest.php | 42 + src/Css/tests/Golden/PandaTokensTest.php | 94 + src/Css/tests/Golden/PandaUtilitiesTest.php | 84 + src/Css/tests/Golden/PandaValidationTest.php | 91 + src/Css/tests/Golden/update-expectations.php | 54 + .../tests/Integration/ConfigurationTest.php | 223 + src/Css/tests/Integration/CssFunctionTest.php | 348 + .../tests/Integration/ReferenceFileTest.php | 116 + .../tests/Integration/StylesheetFileTest.php | 261 + .../tests/Reference/ReferenceDumperTest.php | 164 + .../tests/Validation/StyleValidatorTest.php | 132 + src/Css/tests/bootstrap.php | 12 + src/Css/tools/panda-golden/README.md | 9 + .../tools/panda-golden/hooks/codegen-setup.ts | 5 + .../tools/panda-golden/hooks/config-json.ts | 77 + .../panda-golden/hooks/dump-configs.test.ts | 53 + .../panda-golden/hooks/dump-css-types.test.ts | 41 + .../panda-golden/hooks/dump-tokens.test.ts | 24 + .../panda-golden/hooks/dump-utilities.test.ts | 53 + src/Css/tools/panda-golden/hooks/hooks.ts | 79 + src/Css/tools/panda-golden/hooks/record.ts | 52 + src/Css/tools/panda-golden/record.mjs | 367 + 217 files changed, 114303 insertions(+), 1 deletion(-) create mode 100644 apps/bundler/config/packages/ux_css.yaml create mode 100644 apps/bundler/config/reference_css.php create mode 100644 apps/e2e/config/packages/ux_css.yaml create mode 100644 apps/e2e/src/Controller/CssController.php create mode 100644 apps/e2e/templates/ux_css/basic.html.twig create mode 100644 src/Css/.gitattributes create mode 100644 src/Css/.gitignore create mode 100644 src/Css/.symfony.bundle.yaml create mode 100644 src/Css/CHANGELOG.md create mode 100644 src/Css/CONTRIBUTING.md create mode 100644 src/Css/LICENSE create mode 100644 src/Css/README.md create mode 100644 src/Css/assets/package.json create mode 100644 src/Css/assets/playwright.config.ts create mode 100644 src/Css/assets/test/browser/css.test.ts create mode 100644 src/Css/composer.json create mode 100644 src/Css/doc/alternatives.rst create mode 100644 src/Css/doc/bundlers.rst create mode 100644 src/Css/doc/conditions.rst create mode 100644 src/Css/doc/configuration.rst create mode 100644 src/Css/doc/css-function.rst create mode 100644 src/Css/doc/dynamic-styles.rst create mode 100644 src/Css/doc/editors.rst create mode 100644 src/Css/doc/getting-started.rst create mode 100644 src/Css/doc/index.rst create mode 100644 src/Css/doc/installation.rst create mode 100644 src/Css/doc/panda.rst create mode 100644 src/Css/doc/production.rst create mode 100644 src/Css/doc/tokens.rst create mode 100644 src/Css/doc/validation.rst create mode 100644 src/Css/phpbench.json create mode 100644 src/Css/phpunit.dist.xml create mode 100644 src/Css/resources/css-types.json create mode 100644 src/Css/resources/panda-preset.json create mode 100644 src/Css/resources/panda-tokens.json create mode 100644 src/Css/src/CacheWarmer/StylesheetCacheWarmer.php create mode 100644 src/Css/src/CssGenerator.php create mode 100644 src/Css/src/DependencyInjection/Compiler/ReferenceDumpPass.php create mode 100644 src/Css/src/DependencyInjection/Compiler/TemplateIteratorPass.php create mode 100644 src/Css/src/DependencyInjection/PandaConfigConverter.php create mode 100644 src/Css/src/Dumper/StylesheetDumper.php create mode 100644 src/Css/src/Dumper/TemplateScanner.php create mode 100644 src/Css/src/Engine/AtRuleSorter.php create mode 100644 src/Css/src/Engine/AtomicStyle.php create mode 100644 src/Css/src/Engine/Breakpoints.php create mode 100644 src/Css/src/Engine/ClassNameGenerator.php create mode 100644 src/Css/src/Engine/Condition.php create mode 100644 src/Css/src/Engine/ConditionParser.php create mode 100644 src/Css/src/Engine/Conditions.php create mode 100644 src/Css/src/Engine/Css/AtRule.php create mode 100644 src/Css/src/Engine/Css/Container.php create mode 100644 src/Css/src/Engine/Css/Declaration.php create mode 100644 src/Css/src/Engine/Css/MergeRules.php create mode 100644 src/Css/src/Engine/Css/Node.php create mode 100644 src/Css/src/Engine/Css/Optimizer.php create mode 100644 src/Css/src/Engine/Css/Root.php create mode 100644 src/Css/src/Engine/Css/Rule.php create mode 100644 src/Css/src/Engine/CssEscaper.php create mode 100644 src/Css/src/Engine/Engine.php create mode 100644 src/Css/src/Engine/JsValue.php create mode 100644 src/Css/src/Engine/PandaConfig.php create mode 100644 src/Css/src/Engine/Preset/BaseTransforms.php create mode 100644 src/Css/src/Engine/PropertyName.php create mode 100644 src/Css/src/Engine/PropertyPriority.php create mode 100644 src/Css/src/Engine/Selectors.php create mode 100644 src/Css/src/Engine/SortStyleRules.php create mode 100644 src/Css/src/Engine/StaticCss.php create mode 100644 src/Css/src/Engine/StyleDecoder.php create mode 100644 src/Css/src/Engine/StyleEncoder.php create mode 100644 src/Css/src/Engine/StyleEntry.php create mode 100644 src/Css/src/Engine/StyleStringifier.php create mode 100644 src/Css/src/Engine/Stylesheet.php create mode 100644 src/Css/src/Engine/SvgDataUri.php create mode 100644 src/Css/src/Engine/Token.php create mode 100644 src/Css/src/Engine/TokenCss.php create mode 100644 src/Css/src/Engine/Tokens.php create mode 100644 src/Css/src/Engine/TransformArgs.php create mode 100644 src/Css/src/Engine/Unitless.php create mode 100644 src/Css/src/Engine/Units.php create mode 100644 src/Css/src/Engine/Utilities.php create mode 100644 src/Css/src/Engine/Utility.php create mode 100644 src/Css/src/EventListener/StylesheetListener.php create mode 100644 src/Css/src/Exception/ExceptionInterface.php create mode 100644 src/Css/src/Exception/InvalidArgumentException.php create mode 100644 src/Css/src/Exception/InvalidStyleException.php create mode 100644 src/Css/src/Exception/UnsupportedStyleException.php create mode 100644 src/Css/src/Reference/ReferenceDumper.php create mode 100644 src/Css/src/Twig/CssExpression.php create mode 100644 src/Css/src/Twig/CssExtension.php create mode 100644 src/Css/src/Twig/CssNodeVisitor.php create mode 100644 src/Css/src/Twig/CssRuntime.php create mode 100644 src/Css/src/Twig/CssSyntaxError.php create mode 100644 src/Css/src/UXCssBundle.php create mode 100644 src/Css/src/Validation/StyleValidator.php create mode 100644 src/Css/src/Validation/Suggestion.php create mode 100644 src/Css/tests/Benchmark/BenchProject.php create mode 100644 src/Css/tests/Benchmark/CompileBench.php create mode 100644 src/Css/tests/Benchmark/ContainerBench.php create mode 100644 src/Css/tests/Benchmark/GenerateBench.php create mode 100644 src/Css/tests/Benchmark/RuntimeBench.php create mode 100644 src/Css/tests/Benchmark/StylesheetBench.php create mode 100644 src/Css/tests/CssGeneratorTest.php create mode 100644 src/Css/tests/Engine/BreakpointsTest.php create mode 100644 src/Css/tests/Engine/ClassNameGeneratorTest.php create mode 100644 src/Css/tests/Engine/ConditionsTest.php create mode 100644 src/Css/tests/Engine/Css/OptimizerTest.php create mode 100644 src/Css/tests/Engine/CssEscaperTest.php create mode 100644 src/Css/tests/Engine/PandaConfigTest.php create mode 100644 src/Css/tests/Engine/PropertyNameTest.php create mode 100644 src/Css/tests/Engine/StaticCssTest.php create mode 100644 src/Css/tests/Engine/StyleEncoderTest.php create mode 100644 src/Css/tests/Engine/StylesheetTest.php create mode 100644 src/Css/tests/Engine/TokensTest.php create mode 100644 src/Css/tests/Engine/UtilitiesTest.php create mode 100644 src/Css/tests/Fixtures/Panda/PANDA_COMMIT create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.atomic-rule.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.color-mix.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.complex-rule.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.composition.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.custom-utility.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.gradient.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.prefix.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.rule-processor.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.static-css.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.template-literal.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.generator.__tests__.generate-token.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-2.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-prop.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-edge-cases.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-spread.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-variants.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.import-map.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx-pattern.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx-recipe.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.namespace.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.output.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.pattern-raw-extraction.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.preset-patterns.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.static-css.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.sva.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.svelte.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.vue.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.css.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.cva.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.frameworks.react.style-context.test.tsx.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.recipe.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.format-names.test.tsx.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict-property-values.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict-tokens.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.slot-recipe.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.styled-factory.test.tsx.json create mode 100644 src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.sva.test.ts.json create mode 100644 src/Css/tests/Fixtures/Panda/configs/codegen-format-names.json create mode 100644 src/Css/tests/Fixtures/Panda/configs/codegen-react.json create mode 100644 src/Css/tests/Fixtures/Panda/configs/codegen-strict-property-values.json create mode 100644 src/Css/tests/Fixtures/Panda/configs/codegen-strict-tokens.json create mode 100644 src/Css/tests/Fixtures/Panda/configs/codegen-strict.json create mode 100644 src/Css/tests/Fixtures/Panda/configs/fixture.json create mode 100644 src/Css/tests/Fixtures/Panda/expectations.php create mode 100644 src/Css/tests/Fixtures/Panda/tokens.json create mode 100644 src/Css/tests/Fixtures/Panda/utilities.json create mode 100644 src/Css/tests/Fixtures/Reference/reference_css.php create mode 100644 src/Css/tests/Fixtures/Reference/usage.php create mode 100644 src/Css/tests/Fixtures/TestKernel.php create mode 100644 src/Css/tests/Fixtures/TestLogger.php create mode 100644 src/Css/tests/Fixtures/invalid_templates/unknown_property.html.twig create mode 100644 src/Css/tests/Fixtures/templates/.gitkeep create mode 100644 src/Css/tests/Golden/OutOfScopeException.php create mode 100644 src/Css/tests/Golden/PandaCase.php create mode 100644 src/Css/tests/Golden/PandaCaseLoader.php create mode 100644 src/Css/tests/Golden/PandaCaseLoaderTest.php create mode 100644 src/Css/tests/Golden/PandaCaseRunner.php create mode 100644 src/Css/tests/Golden/PandaCaseTest.php create mode 100644 src/Css/tests/Golden/PandaDefaultTokensTest.php create mode 100644 src/Css/tests/Golden/PandaExpectations.php create mode 100644 src/Css/tests/Golden/PandaExpectationsTest.php create mode 100644 src/Css/tests/Golden/PandaGoldenTest.php create mode 100644 src/Css/tests/Golden/PandaStaticCssTest.php create mode 100644 src/Css/tests/Golden/PandaTokensTest.php create mode 100644 src/Css/tests/Golden/PandaUtilitiesTest.php create mode 100644 src/Css/tests/Golden/PandaValidationTest.php create mode 100644 src/Css/tests/Golden/update-expectations.php create mode 100644 src/Css/tests/Integration/ConfigurationTest.php create mode 100644 src/Css/tests/Integration/CssFunctionTest.php create mode 100644 src/Css/tests/Integration/ReferenceFileTest.php create mode 100644 src/Css/tests/Integration/StylesheetFileTest.php create mode 100644 src/Css/tests/Reference/ReferenceDumperTest.php create mode 100644 src/Css/tests/Validation/StyleValidatorTest.php create mode 100644 src/Css/tests/bootstrap.php create mode 100644 src/Css/tools/panda-golden/README.md create mode 100644 src/Css/tools/panda-golden/hooks/codegen-setup.ts create mode 100644 src/Css/tools/panda-golden/hooks/config-json.ts create mode 100644 src/Css/tools/panda-golden/hooks/dump-configs.test.ts create mode 100644 src/Css/tools/panda-golden/hooks/dump-css-types.test.ts create mode 100644 src/Css/tools/panda-golden/hooks/dump-tokens.test.ts create mode 100644 src/Css/tools/panda-golden/hooks/dump-utilities.test.ts create mode 100644 src/Css/tools/panda-golden/hooks/hooks.ts create mode 100644 src/Css/tools/panda-golden/hooks/record.ts create mode 100644 src/Css/tools/panda-golden/record.mjs diff --git a/apps/bundler/assets/app-encore.js b/apps/bundler/assets/app-encore.js index f614bc0b16c..b89685a6f2e 100644 --- a/apps/bundler/assets/app-encore.js +++ b/apps/bundler/assets/app-encore.js @@ -10,6 +10,7 @@ import { registerReactControllerComponents } from '@symfony/ux-react'; // any CSS you import will output into a single css file (app.css in this case) import './styles/app.css'; +import '../var/ux_css/styles.css'; import { trans } from './translator.js'; registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/)); diff --git a/apps/bundler/assets/app-reprise.ts b/apps/bundler/assets/app-reprise.ts index 89e76308b58..5cb4cc28185 100644 --- a/apps/bundler/assets/app-reprise.ts +++ b/apps/bundler/assets/app-reprise.ts @@ -10,6 +10,7 @@ import { registerReactControllerComponents } from '@symfony/ux-react'; // any CSS you import will output into a single css file (app.css in this case) import './styles/app.css'; +import '../var/ux_css/styles.css'; import { trans } from './translator.js'; registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.{jsx,tsx}', { eager: true })); diff --git a/apps/bundler/composer.json b/apps/bundler/composer.json index 6c5c2dd2f67..8ed7c3888f3 100644 --- a/apps/bundler/composer.json +++ b/apps/bundler/composer.json @@ -17,6 +17,7 @@ "symfony/ux-autocomplete": "3.x-dev", "symfony/ux-chartjs": "3.x-dev", "symfony/ux-cropperjs": "3.x-dev", + "symfony/ux-css": "3.x-dev", "symfony/ux-dropzone": "3.x-dev", "symfony/ux-google-map": "3.x-dev", "symfony/ux-icons": "3.x-dev", diff --git a/apps/bundler/config/bundles.php b/apps/bundler/config/bundles.php index 59776722025..3f63f0020d4 100644 --- a/apps/bundler/config/bundles.php +++ b/apps/bundler/config/bundles.php @@ -7,6 +7,7 @@ Symfony\UX\Autocomplete\AutocompleteBundle::class => ['all' => true], Symfony\UX\Chartjs\ChartjsBundle::class => ['all' => true], Symfony\UX\Cropperjs\CropperjsBundle::class => ['all' => true], + Symfony\UX\Css\UXCssBundle::class => ['all' => true], Symfony\UX\Dropzone\DropzoneBundle::class => ['all' => true], Symfony\UX\Map\UXMapBundle::class => ['all' => true], Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true], diff --git a/apps/bundler/config/packages/ux_css.yaml b/apps/bundler/config/packages/ux_css.yaml new file mode 100644 index 00000000000..c62f5893309 --- /dev/null +++ b/apps/bundler/config/packages/ux_css.yaml @@ -0,0 +1,4 @@ +ux_css: + tokens: + colors: + brand: '#4f46e5' diff --git a/apps/bundler/config/reference.php b/apps/bundler/config/reference.php index 0890788f253..6ddbea3cd2b 100644 --- a/apps/bundler/config/reference.php +++ b/apps/bundler/config/reference.php @@ -704,6 +704,21 @@ * controller_paths?: list, * controllers_json?: scalar|Param|null, // Default: "%kernel.project_dir%/assets/controllers.json" * } + * @psalm-type UxCssConfig = array{ + * tokens?: array, + * semantic_tokens?: array, + * conditions?: array, + * breakpoints?: array, + * strict_tokens?: bool|Param, // Only accept tokens for properties bound to a token category; raw values must be written between brackets. // Default: true + * strict_property_values?: bool|Param, // Only accept the keywords of a property whose grammar is made of keywords. // Default: true + * static_css?: array{ // Values to write in the stylesheet even when no template uses them as is, for css() calls with dynamic values. + * css?: list>, + * conditions?: list, + * responsive?: bool|Param, // Also write each value for every breakpoint. // Default: false + * }>, + * }, + * } * @psalm-type UxMapConfig = array{ * renderer?: scalar|Param|null, // Default: null * google_maps?: array{ @@ -850,6 +865,7 @@ * framework?: FrameworkConfig, * webpack_encore?: WebpackEncoreConfig, * stimulus?: StimulusConfig, + * ux_css?: UxCssConfig, * ux_map?: UxMapConfig, * twig?: TwigConfig, * ux_icons?: UxIconsConfig, @@ -870,6 +886,7 @@ * framework?: FrameworkConfig, * webpack_encore?: WebpackEncoreConfig, * stimulus?: StimulusConfig, + * ux_css?: UxCssConfig, * ux_map?: UxMapConfig, * twig?: TwigConfig, * ux_icons?: UxIconsConfig, @@ -891,6 +908,7 @@ * framework?: FrameworkConfig, * webpack_encore?: WebpackEncoreConfig, * stimulus?: StimulusConfig, + * ux_css?: UxCssConfig, * ux_map?: UxMapConfig, * twig?: TwigConfig, * ux_icons?: UxIconsConfig, @@ -912,6 +930,7 @@ * framework?: FrameworkConfig, * webpack_encore?: WebpackEncoreConfig, * stimulus?: StimulusConfig, + * ux_css?: UxCssConfig, * ux_map?: UxMapConfig, * twig?: TwigConfig, * ux_icons?: UxIconsConfig, diff --git a/apps/bundler/config/reference_css.php b/apps/bundler/config/reference_css.php new file mode 100644 index 00000000000..568d1ed8a88 --- /dev/null +++ b/apps/bundler/config/reference_css.php @@ -0,0 +1,1099 @@ +, + * WebkitBorderBefore?: WebkitBorderBeforeValue|array, + * WebkitBorderBeforeColor?: WebkitBorderBeforeColorValue|array, + * WebkitBorderBeforeStyle?: WebkitBorderBeforeStyleValue|array, + * WebkitBorderBeforeWidth?: WebkitBorderBeforeWidthValue|array, + * WebkitBoxReflect?: WebkitBoxReflectValue|array, + * WebkitLineClamp?: WebkitLineClampValue|array, + * WebkitMask?: WebkitMaskValue|array, + * WebkitMaskAttachment?: WebkitMaskAttachmentValue|array, + * WebkitMaskClip?: WebkitMaskClipValue|array, + * WebkitMaskComposite?: WebkitMaskCompositeValue|array, + * WebkitMaskImage?: WebkitMaskImageValue|array, + * WebkitMaskOrigin?: WebkitMaskOriginValue|array, + * WebkitMaskPosition?: WebkitMaskPositionValue|array, + * WebkitMaskPositionX?: WebkitMaskPositionXValue|array, + * WebkitMaskPositionY?: WebkitMaskPositionYValue|array, + * WebkitMaskRepeat?: WebkitMaskRepeatValue|array, + * WebkitMaskRepeatX?: WebkitMaskRepeatXValue|array, + * WebkitMaskRepeatY?: WebkitMaskRepeatXValue|array, + * WebkitMaskSize?: WebkitMaskSizeValue|array, + * WebkitOverflowScrolling?: WebkitOverflowScrollingValue|array, + * WebkitTapHighlightColor?: WebkitBorderBeforeColorValue|array, + * WebkitTextFillColor?: ColorsToken|array, + * WebkitTextStroke?: WebkitTextStrokeValue|array, + * WebkitTextStrokeColor?: WebkitBorderBeforeColorValue|array, + * WebkitTextStrokeWidth?: WebkitTextStrokeWidthValue|array, + * WebkitTouchCallout?: WebkitTouchCalloutValue|array, + * WebkitUserModify?: WebkitUserModifyValue|array, + * WebkitUserSelect?: WebkitUserSelectValue|array, + * accentColor?: ColorsToken|array, + * alignContent?: AlignContentValue|array, + * alignItems?: AlignItemsValue|array, + * alignSelf?: AlignSelfValue|array, + * alignTracks?: AlignContentValue|array, + * alignmentBaseline?: AlignmentBaselineValue|array, + * all?: AllValue|array, + * anchorName?: WebkitMaskImageValue|array, + * anchorScope?: AnchorScopeValue|array, + * animation?: AnimationValue|array, + * animationComposition?: AnimationCompositionValue|array, + * animationDelay?: AllValue|array, + * animationDirection?: AnimationDirectionValue|array, + * animationDuration?: DurationsToken|array, + * animationFillMode?: AnimationFillModeValue|array, + * animationIterationCount?: AnimationIterationCountValue|array, + * animationName?: WebkitMaskImageValue|array, + * animationPlayState?: AnimationPlayStateValue|array, + * animationRange?: AnimationRangeValue|array, + * animationRangeEnd?: AnimationRangeValue|array, + * animationRangeStart?: AnimationRangeValue|array, + * animationState?: int|float|string|array, + * animationTimeline?: AnimationTimelineValue|array, + * animationTimingFunction?: EasingsToken|array, + * appearance?: AppearanceValue|array, + * aspectRatio?: AspectRatioValue|array, + * backdropBlur?: int|float|string|array, + * backdropBrightness?: int|float|string|array, + * backdropContrast?: int|float|string|array, + * backdropFilter?: BackdropFilterValue|array, + * backdropGrayscale?: int|float|string|array, + * backdropHueRotate?: int|float|string|array, + * backdropInvert?: int|float|string|array, + * backdropOpacity?: int|float|string|array, + * backdropSaturate?: int|float|string|array, + * backdropSepia?: int|float|string|array, + * backfaceVisibility?: BackfaceVisibilityValue|array, + * background?: ColorsToken|array, + * backgroundAttachment?: WebkitMaskAttachmentValue|array, + * backgroundBlendMode?: BackgroundBlendModeValue|array, + * backgroundClip?: BackgroundClipValue|array, + * backgroundColor?: ColorsToken|array, + * backgroundConic?: int|float|string|array, + * backgroundGradient?: GradientsToken|array, + * backgroundImage?: WebkitMaskImageValue|array, + * backgroundLinear?: GradientsToken|array, + * backgroundOrigin?: BackgroundOriginValue|array, + * backgroundPosition?: WebkitMaskPositionValue|array, + * backgroundPositionX?: BackgroundPositionXValue|array, + * backgroundPositionY?: BackgroundPositionYValue|array, + * backgroundRadial?: int|float|string|array, + * backgroundRepeat?: WebkitMaskRepeatValue|array, + * backgroundSize?: WebkitMaskSizeValue|array, + * baselineShift?: BaselineShiftValue|array, + * bg?: ColorsToken|array, + * bgAttachment?: WebkitMaskAttachmentValue|array, + * bgBlendMode?: BackgroundBlendModeValue|array, + * bgClip?: BackgroundClipValue|array, + * bgColor?: ColorsToken|array, + * bgConic?: int|float|string|array, + * bgGradient?: GradientsToken|array, + * bgImage?: WebkitMaskImageValue|array, + * bgLinear?: GradientsToken|array, + * bgOrigin?: BackgroundOriginValue|array, + * bgPosition?: WebkitMaskPositionValue|array, + * bgPositionX?: BackgroundPositionXValue|array, + * bgPositionY?: BackgroundPositionYValue|array, + * bgRadial?: int|float|string|array, + * bgRepeat?: WebkitMaskRepeatValue|array, + * bgSize?: WebkitMaskSizeValue|array, + * blockSize?: SizesToken|array, + * blur?: int|float|string|array, + * border?: WebkitBorderBeforeValue|array, + * borderBlock?: WebkitBorderBeforeValue|array, + * borderBlockColor?: ColorsToken|array, + * borderBlockEnd?: WebkitBorderBeforeValue|array, + * borderBlockEndColor?: ColorsToken|array, + * borderBlockEndStyle?: WebkitBorderBeforeStyleValue|array, + * borderBlockEndWidth?: WebkitBorderBeforeWidthValue|array, + * borderBlockStart?: WebkitBorderBeforeValue|array, + * borderBlockStartColor?: ColorsToken|array, + * borderBlockStartStyle?: WebkitBorderBeforeStyleValue|array, + * borderBlockStartWidth?: WebkitBorderBeforeWidthValue|array, + * borderBlockStyle?: WebkitBorderBeforeStyleValue|array, + * borderBlockWidth?: WebkitBorderBeforeWidthValue|array, + * borderBottom?: WebkitBorderBeforeValue|array, + * borderBottomColor?: ColorsToken|array, + * borderBottomLeftRadius?: WebkitTextStrokeWidthValue|array, + * borderBottomRadius?: int|float|string|array, + * borderBottomRightRadius?: WebkitTextStrokeWidthValue|array, + * borderBottomStyle?: WebkitBorderBeforeStyleValue|array, + * borderBottomWidth?: WebkitBorderBeforeWidthValue|array, + * borderCollapse?: BorderCollapseValue|array, + * borderColor?: ColorsToken|array, + * borderEnd?: WebkitBorderBeforeValue|array, + * borderEndColor?: ColorsToken|array, + * borderEndEndRadius?: WebkitTextStrokeWidthValue|array, + * borderEndRadius?: int|float|string|array, + * borderEndStartRadius?: WebkitTextStrokeWidthValue|array, + * borderEndWidth?: WebkitBorderBeforeWidthValue|array, + * borderImage?: BorderImageValue|array, + * borderImageOutset?: WebkitTextStrokeWidthValue|array, + * borderImageRepeat?: BorderImageRepeatValue|array, + * borderImageSlice?: WebkitTextStrokeWidthValue|array, + * borderImageSource?: WebkitMaskImageValue|array, + * borderImageWidth?: AspectRatioValue|array, + * borderInline?: WebkitBorderBeforeValue|array, + * borderInlineColor?: ColorsToken|array, + * borderInlineEnd?: WebkitBorderBeforeValue|array, + * borderInlineEndColor?: ColorsToken|array, + * borderInlineEndStyle?: WebkitBorderBeforeStyleValue|array, + * borderInlineEndWidth?: WebkitBorderBeforeWidthValue|array, + * borderInlineStart?: WebkitBorderBeforeValue|array, + * borderInlineStartColor?: ColorsToken|array, + * borderInlineStartStyle?: WebkitBorderBeforeStyleValue|array, + * borderInlineStartWidth?: WebkitBorderBeforeWidthValue|array, + * borderInlineStyle?: WebkitBorderBeforeStyleValue|array, + * borderInlineWidth?: WebkitBorderBeforeWidthValue|array, + * borderLeft?: WebkitBorderBeforeValue|array, + * borderLeftColor?: ColorsToken|array, + * borderLeftRadius?: int|float|string|array, + * borderLeftStyle?: WebkitBorderBeforeStyleValue|array, + * borderLeftWidth?: WebkitBorderBeforeWidthValue|array, + * borderRadius?: WebkitTextStrokeWidthValue|array, + * borderRight?: WebkitBorderBeforeValue|array, + * borderRightColor?: ColorsToken|array, + * borderRightRadius?: int|float|string|array, + * borderRightStyle?: WebkitBorderBeforeStyleValue|array, + * borderRightWidth?: WebkitBorderBeforeWidthValue|array, + * borderSpacing?: BackdropFilterValue|array, + * borderSpacingX?: int|float|string|array, + * borderSpacingY?: int|float|string|array, + * borderStart?: WebkitBorderBeforeValue|array, + * borderStartColor?: ColorsToken|array, + * borderStartEndRadius?: WebkitTextStrokeWidthValue|array, + * borderStartRadius?: int|float|string|array, + * borderStartStartRadius?: WebkitTextStrokeWidthValue|array, + * borderStartWidth?: WebkitBorderBeforeWidthValue|array, + * borderStyle?: WebkitBorderBeforeStyleValue|array, + * borderTop?: WebkitBorderBeforeValue|array, + * borderTopColor?: ColorsToken|array, + * borderTopLeftRadius?: WebkitTextStrokeWidthValue|array, + * borderTopRadius?: int|float|string|array, + * borderTopRightRadius?: WebkitTextStrokeWidthValue|array, + * borderTopStyle?: WebkitBorderBeforeStyleValue|array, + * borderTopWidth?: WebkitBorderBeforeWidthValue|array, + * borderWidth?: WebkitBorderBeforeWidthValue|array, + * borderX?: WebkitBorderBeforeValue|array, + * borderXColor?: ColorsToken|array, + * borderXWidth?: WebkitBorderBeforeWidthValue|array, + * borderY?: WebkitBorderBeforeValue|array, + * borderYColor?: ColorsToken|array, + * borderYWidth?: WebkitBorderBeforeWidthValue|array, + * bottom?: AspectRatioValue|array, + * boxAlign?: BoxAlignValue|array, + * boxDecorationBreak?: BoxDecorationBreakValue|array, + * boxDirection?: BoxDirectionValue|array, + * boxFlex?: WebkitTextStrokeWidthValue|array, + * boxFlexGroup?: WebkitTextStrokeWidthValue|array, + * boxLines?: BoxLinesValue|array, + * boxOrdinalGroup?: WebkitTextStrokeWidthValue|array, + * boxOrient?: BoxOrientValue|array, + * boxPack?: BoxPackValue|array, + * boxShadow?: WebkitMaskImageValue|array, + * boxShadowColor?: ColorsToken|array, + * boxSize?: SizesToken2|array, + * boxSizing?: BoxSizingValue|array, + * breakAfter?: BreakAfterValue|array, + * breakBefore?: BreakAfterValue|array, + * breakInside?: BreakInsideValue|array, + * brightness?: int|float|string|array, + * captionSide?: CaptionSideValue|array, + * caret?: CaretValue|array, + * caretColor?: ColorsToken|array, + * caretShape?: CaretShapeValue|array, + * clear?: ClearValue|array, + * clip?: DurationsToken|array, + * clipPath?: ClipPathValue|array, + * clipRule?: ClipRuleValue|array, + * color?: ColorsToken|array, + * colorInterpolation?: ColorInterpolationValue|array, + * colorInterpolationFilters?: ColorInterpolationValue|array, + * colorPalette?: ColorPaletteValue|array, + * colorRendering?: ColorRenderingValue|array, + * colorScheme?: ColorSchemeValue|array, + * columnCount?: AspectRatioValue|array, + * columnFill?: ColumnFillValue|array, + * columnGap?: SpacingToken|array, + * columnRule?: WebkitBorderBeforeValue|array, + * columnRuleColor?: WebkitBorderBeforeColorValue|array, + * columnRuleStyle?: WebkitBorderBeforeStyleValue|array, + * columnRuleWidth?: WebkitBorderBeforeWidthValue|array, + * columnSpan?: AnchorScopeValue|array, + * columnWidth?: AspectRatioValue|array, + * columns?: AspectRatioValue|array, + * contain?: ContainValue|array, + * containIntrinsicBlockSize?: WebkitLineClampValue|array, + * containIntrinsicHeight?: WebkitLineClampValue|array, + * containIntrinsicInlineSize?: WebkitLineClampValue|array, + * containIntrinsicSize?: WebkitLineClampValue|array, + * containIntrinsicWidth?: WebkitLineClampValue|array, + * container?: WebkitMaskImageValue|array, + * containerName?: WebkitMaskImageValue|array, + * containerType?: ContainerTypeValue|array, + * content?: ContentValue|array, + * contentVisibility?: ContentVisibilityValue|array, + * contrast?: int|float|string|array, + * cornerShape?: int|float|string|array, + * counterIncrement?: WebkitMaskImageValue|array, + * counterReset?: WebkitMaskImageValue|array, + * counterSet?: WebkitMaskImageValue|array, + * cursor?: CursorValue|array, + * cx?: WebkitTextStrokeWidthValue|array, + * cy?: WebkitTextStrokeWidthValue|array, + * d?: WebkitMaskImageValue|array, + * debug?: bool|string|array, + * direction?: DirectionValue|array, + * display?: DisplayValue|array, + * divideColor?: ColorsToken|array, + * divideStyle?: int|float|string|array, + * divideX?: int|float|string|array, + * divideY?: int|float|string|array, + * dominantBaseline?: DominantBaselineValue|array, + * dropShadow?: int|float|string|array, + * emptyCells?: EmptyCellsValue|array, + * end?: AspectRatioValue|array, + * fieldSizing?: FieldSizingValue|array, + * fill?: ColorsToken|array, + * fillOpacity?: WebkitTextStrokeWidthValue|array, + * fillRule?: ClipRuleValue|array, + * filter?: BackdropFilterValue|array, + * flex?: FlexValue|array, + * flexBasis?: SizesToken3|array, + * flexDir?: FlexDirectionValue|array, + * flexDirection?: FlexDirectionValue|array, + * flexFlow?: FlexFlowValue|array, + * flexGrow?: WebkitTextStrokeWidthValue|array, + * flexShrink?: WebkitTextStrokeWidthValue|array, + * flexWrap?: FlexWrapValue|array, + * float?: FloatValue|array, + * floodColor?: WebkitBorderBeforeColorValue|array, + * floodOpacity?: WebkitTextStrokeWidthValue|array, + * focusRing?: FocusRingValue|array, + * focusRingColor?: ColorsToken|array, + * focusRingOffset?: int|float|string|array, + * focusRingStyle?: int|float|string|array, + * focusRingWidth?: int|float|string|array, + * focusVisibleRing?: FocusRingValue|array, + * font?: FontValue|array, + * fontFamily?: FontsToken|array, + * fontFeatureSettings?: FontFeatureSettingsValue|array, + * fontKerning?: FontKerningValue|array, + * fontLanguageOverride?: FontFeatureSettingsValue|array, + * fontOpticalSizing?: AnimationTimelineValue|array, + * fontPalette?: ColorSchemeValue|array, + * fontSize?: FontSizesToken|array, + * fontSizeAdjust?: FontSizeAdjustValue|array, + * fontSmooth?: FontSmoothValue|array, + * fontSmoothing?: FontSmoothingValue|array, + * fontStretch?: FontStretchValue|array, + * fontStyle?: FontStyleValue|array, + * fontSynthesis?: FontSynthesisValue|array, + * fontSynthesisPosition?: AnimationTimelineValue|array, + * fontSynthesisSmallCaps?: AnimationTimelineValue|array, + * fontSynthesisStyle?: AnimationTimelineValue|array, + * fontSynthesisWeight?: AnimationTimelineValue|array, + * fontVariant?: FontVariantValue|array, + * fontVariantAlternates?: FontVariantAlternatesValue|array, + * fontVariantCaps?: FontVariantCapsValue|array, + * fontVariantEastAsian?: FontVariantEastAsianValue|array, + * fontVariantEmoji?: FontVariantEmojiValue|array, + * fontVariantLigatures?: FontVariantLigaturesValue|array, + * fontVariantNumeric?: FontVariantNumericValue|array, + * fontVariantPosition?: FontVariantPositionValue|array, + * fontVariationSettings?: FontFeatureSettingsValue|array, + * fontWeight?: FontWeightsToken|array, + * forcedColorAdjust?: ForcedColorAdjustValue|array, + * gap?: SpacingToken|array, + * glyphOrientationVertical?: AspectRatioValue|array, + * gradientFrom?: ColorsToken|array, + * gradientFromPosition?: int|float|string|array, + * gradientTo?: ColorsToken|array, + * gradientToPosition?: int|float|string|array, + * gradientVia?: ColorsToken|array, + * gradientViaPosition?: int|float|string|array, + * grayscale?: int|float|string|array, + * grid?: WebkitMaskImageValue|array, + * gridArea?: AspectRatioValue|array, + * gridAutoColumns?: GridAutoColumnsValue|array, + * gridAutoFlow?: GridAutoFlowValue|array, + * gridAutoRows?: GridAutoColumnsValue|array, + * gridColumn?: AspectRatioValue|array, + * gridColumnEnd?: AspectRatioValue|array, + * gridColumnGap?: WebkitTextStrokeWidthValue|array, + * gridColumnStart?: AspectRatioValue|array, + * gridGap?: WebkitTextStrokeWidthValue|array, + * gridRow?: AspectRatioValue|array, + * gridRowEnd?: AspectRatioValue|array, + * gridRowGap?: WebkitTextStrokeWidthValue|array, + * gridRowStart?: AspectRatioValue|array, + * gridTemplate?: WebkitMaskImageValue|array, + * gridTemplateAreas?: WebkitMaskImageValue|array, + * gridTemplateColumns?: GridTemplateColumnsValue|array, + * gridTemplateRows?: GridTemplateColumnsValue|array, + * h?: SizesToken|array, + * hangingPunctuation?: HangingPunctuationValue|array, + * height?: SizesToken|array, + * hideBelow?: BreakpointsToken|array, + * hideFrom?: BreakpointsToken|array, + * hueRotate?: int|float|string|array, + * hyphenateCharacter?: DurationsToken|array, + * hyphenateLimitChars?: AspectRatioValue|array, + * hyphens?: HyphensValue|array, + * imageOrientation?: ImageOrientationValue|array, + * imageRendering?: ImageRenderingValue|array, + * imageResolution?: ImageResolutionValue|array, + * imeMode?: ImeModeValue|array, + * initialLetter?: SpacingToken|array, + * initialLetterAlign?: InitialLetterAlignValue|array, + * inlineSize?: SizesToken2|array, + * inset?: BackdropFilterValue|array, + * insetBlock?: AspectRatioValue|array, + * insetBlockEnd?: AspectRatioValue|array, + * insetBlockStart?: AspectRatioValue|array, + * insetEnd?: AspectRatioValue|array, + * insetInline?: AspectRatioValue|array, + * insetInlineEnd?: AspectRatioValue|array, + * insetInlineStart?: AspectRatioValue|array, + * insetStart?: AspectRatioValue|array, + * insetX?: AspectRatioValue|array, + * insetY?: AspectRatioValue|array, + * interpolateSize?: InterpolateSizeValue|array, + * invert?: int|float|string|array, + * isolation?: IsolationValue|array, + * justifyContent?: JustifyContentValue|array, + * justifyItems?: JustifyItemsValue|array, + * justifySelf?: JustifySelfValue|array, + * justifyTracks?: JustifyContentValue|array, + * left?: AspectRatioValue|array, + * letterSpacing?: SpacingToken|array, + * lightingColor?: WebkitBorderBeforeColorValue|array, + * lineBreak?: LineBreakValue|array, + * lineClamp?: WebkitLineClampValue|array, + * lineHeight?: SpacingToken|array, + * lineHeightStep?: WebkitTextStrokeWidthValue|array, + * listStyle?: ListStyleValue|array, + * listStyleImage?: WebkitMaskImageValue|array, + * listStylePosition?: ListStylePositionValue|array, + * listStyleType?: WebkitMaskImageValue|array, + * m?: BackdropFilterValue|array, + * margin?: BackdropFilterValue|array, + * marginBlock?: BackdropFilterValue|array, + * marginBlockEnd?: BackdropFilterValue|array, + * marginBlockStart?: BackdropFilterValue|array, + * marginBottom?: BackdropFilterValue|array, + * marginEnd?: BackdropFilterValue|array, + * marginInline?: BackdropFilterValue|array, + * marginInlineEnd?: BackdropFilterValue|array, + * marginInlineStart?: BackdropFilterValue|array, + * marginLeft?: BackdropFilterValue|array, + * marginRight?: BackdropFilterValue|array, + * marginStart?: BackdropFilterValue|array, + * marginTop?: BackdropFilterValue|array, + * marginTrim?: MarginTrimValue|array, + * marginX?: BackdropFilterValue|array, + * marginY?: BackdropFilterValue|array, + * marker?: WebkitMaskImageValue|array, + * markerEnd?: WebkitMaskImageValue|array, + * markerMid?: WebkitMaskImageValue|array, + * markerStart?: WebkitMaskImageValue|array, + * mask?: MaskValue|array, + * maskBorder?: MaskBorderValue|array, + * maskBorderMode?: MaskBorderModeValue|array, + * maskBorderOutset?: WebkitTextStrokeWidthValue|array, + * maskBorderRepeat?: BorderImageRepeatValue|array, + * maskBorderSlice?: WebkitTextStrokeWidthValue|array, + * maskBorderSource?: WebkitMaskImageValue|array, + * maskBorderWidth?: AspectRatioValue|array, + * maskClip?: MaskClipValue|array, + * maskComposite?: MaskCompositeValue|array, + * maskImage?: WebkitMaskImageValue|array, + * maskMode?: MaskModeValue|array, + * maskOrigin?: MaskOriginValue|array, + * maskPosition?: WebkitMaskPositionValue|array, + * maskRepeat?: WebkitMaskRepeatValue|array, + * maskSize?: WebkitMaskSizeValue|array, + * maskType?: MaskBorderModeValue|array, + * masonryAutoFlow?: MasonryAutoFlowValue|array, + * mathDepth?: MathDepthValue|array, + * mathShift?: MathShiftValue|array, + * mathStyle?: MathShiftValue|array, + * maxBlockSize?: SizesToken|array, + * maxH?: SizesToken|array, + * maxHeight?: SizesToken|array, + * maxInlineSize?: SizesToken2|array, + * maxLines?: WebkitLineClampValue|array, + * maxW?: SizesToken2|array, + * maxWidth?: SizesToken2|array, + * mb?: BackdropFilterValue|array, + * me?: BackdropFilterValue|array, + * minBlockSize?: SizesToken|array, + * minH?: SizesToken|array, + * minHeight?: SizesToken|array, + * minInlineSize?: SizesToken2|array, + * minW?: SizesToken2|array, + * minWidth?: SizesToken2|array, + * mixBlendMode?: MixBlendModeValue|array, + * ml?: BackdropFilterValue|array, + * mr?: BackdropFilterValue|array, + * ms?: BackdropFilterValue|array, + * mt?: BackdropFilterValue|array, + * mx?: BackdropFilterValue|array, + * my?: BackdropFilterValue|array, + * objectFit?: ObjectFitValue|array, + * objectPosition?: WebkitMaskPositionValue|array, + * offset?: OffsetValue|array, + * offsetAnchor?: OffsetAnchorValue|array, + * offsetDistance?: WebkitTextStrokeWidthValue|array, + * offsetPath?: OffsetPathValue|array, + * offsetPosition?: OffsetPositionValue|array, + * offsetRotate?: OffsetRotateValue|array, + * opacity?: WebkitTextStrokeWidthValue|array, + * order?: WebkitTextStrokeWidthValue|array, + * orphans?: WebkitTextStrokeWidthValue|array, + * outline?: OutlineValue|array, + * outlineColor?: ColorsToken|array, + * outlineOffset?: WebkitTextStrokeWidthValue|array, + * outlineStyle?: OutlineStyleValue|array, + * outlineWidth?: WebkitBorderBeforeWidthValue|array, + * overflow?: OverflowValue|array, + * overflowAnchor?: AnimationTimelineValue|array, + * overflowBlock?: OverflowBlockValue|array, + * overflowClipBox?: OverflowClipBoxValue|array, + * overflowClipMargin?: OverflowClipMarginValue|array, + * overflowInline?: OverflowBlockValue|array, + * overflowWrap?: OverflowWrapValue|array, + * overflowX?: OverflowValue|array, + * overflowY?: OverflowValue|array, + * overlay?: AnimationTimelineValue|array, + * overscrollBehavior?: OverscrollBehaviorValue|array, + * overscrollBehaviorBlock?: OverscrollBehaviorValue|array, + * overscrollBehaviorInline?: OverscrollBehaviorValue|array, + * overscrollBehaviorX?: OverscrollBehaviorValue|array, + * overscrollBehaviorY?: OverscrollBehaviorValue|array, + * p?: WebkitTextStrokeWidthValue|array, + * padding?: WebkitTextStrokeWidthValue|array, + * paddingBlock?: WebkitTextStrokeWidthValue|array, + * paddingBlockEnd?: WebkitTextStrokeWidthValue|array, + * paddingBlockStart?: WebkitTextStrokeWidthValue|array, + * paddingBottom?: WebkitTextStrokeWidthValue|array, + * paddingEnd?: WebkitTextStrokeWidthValue|array, + * paddingInline?: WebkitTextStrokeWidthValue|array, + * paddingInlineEnd?: WebkitTextStrokeWidthValue|array, + * paddingInlineStart?: WebkitTextStrokeWidthValue|array, + * paddingLeft?: WebkitTextStrokeWidthValue|array, + * paddingRight?: WebkitTextStrokeWidthValue|array, + * paddingStart?: WebkitTextStrokeWidthValue|array, + * paddingTop?: WebkitTextStrokeWidthValue|array, + * paddingX?: WebkitTextStrokeWidthValue|array, + * paddingY?: WebkitTextStrokeWidthValue|array, + * page?: DurationsToken|array, + * pageBreakAfter?: PageBreakAfterValue|array, + * pageBreakBefore?: PageBreakAfterValue|array, + * pageBreakInside?: PageBreakInsideValue|array, + * paintOrder?: PaintOrderValue|array, + * pb?: WebkitTextStrokeWidthValue|array, + * pe?: WebkitTextStrokeWidthValue|array, + * perspective?: WebkitLineClampValue|array, + * perspectiveOrigin?: WebkitMaskPositionValue|array, + * pl?: WebkitTextStrokeWidthValue|array, + * placeContent?: AlignContentValue|array, + * placeItems?: AlignItemsValue|array, + * placeSelf?: AlignSelfValue|array, + * pointerEvents?: PointerEventsValue|array, + * pos?: PositionValue|array, + * position?: PositionValue|array, + * positionAnchor?: DurationsToken|array, + * positionArea?: PositionAreaValue|array, + * positionTry?: PositionTryValue|array, + * positionTryFallbacks?: PositionTryValue|array, + * positionTryOrder?: PositionTryOrderValue|array, + * positionVisibility?: PositionVisibilityValue|array, + * pr?: WebkitTextStrokeWidthValue|array, + * printColorAdjust?: PrintColorAdjustValue|array, + * ps?: WebkitTextStrokeWidthValue|array, + * pt?: WebkitTextStrokeWidthValue|array, + * px?: WebkitTextStrokeWidthValue|array, + * py?: WebkitTextStrokeWidthValue|array, + * quotes?: AnimationTimelineValue|array, + * r?: WebkitTextStrokeWidthValue|array, + * resize?: ResizeValue|array, + * right?: AspectRatioValue|array, + * ring?: OutlineValue|array, + * ringColor?: ColorsToken|array, + * ringOffset?: WebkitTextStrokeWidthValue|array, + * ringWidth?: WebkitBorderBeforeWidthValue|array, + * rotate?: RotateValue|array, + * rotateX?: int|float|string|array, + * rotateY?: int|float|string|array, + * rotateZ?: int|float|string|array, + * rounded?: WebkitTextStrokeWidthValue|array, + * roundedBottom?: int|float|string|array, + * roundedBottomLeft?: WebkitTextStrokeWidthValue|array, + * roundedBottomRight?: WebkitTextStrokeWidthValue|array, + * roundedEnd?: int|float|string|array, + * roundedEndEnd?: WebkitTextStrokeWidthValue|array, + * roundedEndStart?: WebkitTextStrokeWidthValue|array, + * roundedLeft?: int|float|string|array, + * roundedRight?: int|float|string|array, + * roundedStart?: int|float|string|array, + * roundedStartEnd?: WebkitTextStrokeWidthValue|array, + * roundedStartStart?: WebkitTextStrokeWidthValue|array, + * roundedTop?: int|float|string|array, + * roundedTopLeft?: WebkitTextStrokeWidthValue|array, + * roundedTopRight?: WebkitTextStrokeWidthValue|array, + * rowGap?: SpacingToken|array, + * rubyAlign?: RubyAlignValue|array, + * rubyMerge?: RubyMergeValue|array, + * rubyPosition?: RubyPositionValue|array, + * rx?: WebkitTextStrokeWidthValue|array, + * ry?: WebkitTextStrokeWidthValue|array, + * saturate?: int|float|string|array, + * scale?: BackdropFilterValue|array, + * scaleX?: int|float|string|array, + * scaleY?: int|float|string|array, + * scrollBehavior?: ScrollBehaviorValue|array, + * scrollMargin?: WebkitTextStrokeWidthValue|array, + * scrollMarginBlock?: WebkitTextStrokeWidthValue|array, + * scrollMarginBlockEnd?: WebkitTextStrokeWidthValue|array, + * scrollMarginBlockStart?: WebkitTextStrokeWidthValue|array, + * scrollMarginBottom?: WebkitTextStrokeWidthValue|array, + * scrollMarginInline?: WebkitTextStrokeWidthValue|array, + * scrollMarginInlineEnd?: WebkitTextStrokeWidthValue|array, + * scrollMarginInlineStart?: WebkitTextStrokeWidthValue|array, + * scrollMarginLeft?: WebkitTextStrokeWidthValue|array, + * scrollMarginRight?: WebkitTextStrokeWidthValue|array, + * scrollMarginTop?: WebkitTextStrokeWidthValue|array, + * scrollMarginX?: WebkitTextStrokeWidthValue|array, + * scrollMarginY?: WebkitTextStrokeWidthValue|array, + * scrollPadding?: AspectRatioValue|array, + * scrollPaddingBlock?: AspectRatioValue|array, + * scrollPaddingBlockEnd?: AspectRatioValue|array, + * scrollPaddingBlockStart?: AspectRatioValue|array, + * scrollPaddingBottom?: AspectRatioValue|array, + * scrollPaddingInline?: AspectRatioValue|array, + * scrollPaddingInlineEnd?: AspectRatioValue|array, + * scrollPaddingInlineStart?: AspectRatioValue|array, + * scrollPaddingLeft?: AspectRatioValue|array, + * scrollPaddingRight?: AspectRatioValue|array, + * scrollPaddingTop?: AspectRatioValue|array, + * scrollPaddingX?: AspectRatioValue|array, + * scrollPaddingY?: AspectRatioValue|array, + * scrollSnapAlign?: ScrollSnapAlignValue|array, + * scrollSnapCoordinate?: ScrollSnapCoordinateValue|array, + * scrollSnapDestination?: WebkitMaskPositionValue|array, + * scrollSnapMargin?: int|float|string|array, + * scrollSnapMarginBottom?: int|float|string|array, + * scrollSnapMarginLeft?: int|float|string|array, + * scrollSnapMarginRight?: int|float|string|array, + * scrollSnapMarginTop?: int|float|string|array, + * scrollSnapPointsX?: WebkitMaskImageValue|array, + * scrollSnapPointsY?: WebkitMaskImageValue|array, + * scrollSnapStop?: ScrollSnapStopValue|array, + * scrollSnapStrictness?: ScrollSnapStrictnessValue|array, + * scrollSnapType?: ScrollSnapTypeValue|array, + * scrollSnapTypeX?: ScrollSnapTypeXValue|array, + * scrollSnapTypeY?: ScrollSnapTypeXValue|array, + * scrollTimeline?: WebkitMaskImageValue|array, + * scrollTimelineAxis?: ScrollTimelineAxisValue|array, + * scrollTimelineName?: WebkitMaskImageValue|array, + * scrollbar?: ScrollbarValue|array, + * scrollbarColor?: ColorsToken|array, + * scrollbarGutter?: ScrollbarGutterValue|array, + * scrollbarWidth?: SizesToken4|array, + * sepia?: int|float|string|array, + * shadow?: WebkitMaskImageValue|array, + * shadowColor?: ColorsToken|array, + * shapeImageThreshold?: WebkitTextStrokeWidthValue|array, + * shapeMargin?: WebkitTextStrokeWidthValue|array, + * shapeOutside?: ShapeOutsideValue|array, + * shapeRendering?: ShapeRenderingValue|array, + * spaceX?: BackdropFilterValue|array, + * spaceY?: BackdropFilterValue|array, + * srOnly?: bool|string|array, + * start?: AspectRatioValue|array, + * stopColor?: WebkitBorderBeforeColorValue|array, + * stopOpacity?: WebkitTextStrokeWidthValue|array, + * stroke?: ColorsToken|array, + * strokeDasharray?: WebkitLineClampValue|array, + * strokeDashoffset?: WebkitTextStrokeWidthValue|array, + * strokeLinecap?: StrokeLinecapValue|array, + * strokeLinejoin?: StrokeLinejoinValue|array, + * strokeMiterlimit?: WebkitTextStrokeWidthValue|array, + * strokeOpacity?: WebkitTextStrokeWidthValue|array, + * strokeWidth?: WebkitTextStrokeWidthValue|array, + * tabSize?: WebkitTextStrokeWidthValue|array, + * tableLayout?: TableLayoutValue|array, + * textAlign?: TextAlignValue|array, + * textAlignLast?: TextAlignLastValue|array, + * textAnchor?: TextAnchorValue|array, + * textBox?: TextBoxValue|array, + * textBoxEdge?: TextBoxEdgeValue|array, + * textBoxTrim?: TextBoxTrimValue|array, + * textCombineUpright?: TextCombineUprightValue|array, + * textDecoration?: TextDecorationValue|array, + * textDecorationColor?: ColorsToken|array, + * textDecorationLine?: TextDecorationLineValue|array, + * textDecorationSkip?: TextDecorationSkipValue|array, + * textDecorationSkipInk?: TextDecorationSkipInkValue|array, + * textDecorationStyle?: TextDecorationStyleValue|array, + * textDecorationThickness?: TextDecorationThicknessValue|array, + * textEmphasis?: TextEmphasisValue|array, + * textEmphasisColor?: ColorsToken|array, + * textEmphasisPosition?: TextEmphasisPositionValue|array, + * textEmphasisStyle?: TextEmphasisStyleValue|array, + * textGradient?: GradientsToken|array, + * textIndent?: WebkitTextStrokeWidthValue|array, + * textJustify?: TextJustifyValue|array, + * textOrientation?: TextOrientationValue|array, + * textOverflow?: TextOverflowValue|array, + * textRendering?: TextRenderingValue|array, + * textShadow?: WebkitMaskImageValue|array, + * textShadowColor?: ColorsToken|array, + * textSizeAdjust?: AnimationTimelineValue|array, + * textSpacingTrim?: TextSpacingTrimValue|array, + * textTransform?: TextTransformValue|array, + * textUnderlineOffset?: AspectRatioValue|array, + * textUnderlinePosition?: TextUnderlinePositionValue|array, + * textWrap?: TextWrapValue|array, + * textWrapMode?: TextWrapModeValue|array, + * textWrapStyle?: TextWrapStyleValue|array, + * timelineScope?: WebkitMaskImageValue|array, + * top?: AspectRatioValue|array, + * touchAction?: TouchActionValue|array, + * transform?: WebkitMaskImageValue|array, + * transformBox?: TransformBoxValue|array, + * transformOrigin?: WebkitMaskPositionValue|array, + * transformStyle?: TransformStyleValue|array, + * transition?: TransitionValue|array, + * transitionBehavior?: TransitionBehaviorValue|array, + * transitionDelay?: AllValue|array, + * transitionDuration?: AllValue|array, + * transitionProperty?: TransitionPropertyValue|array, + * transitionTimingFunction?: EasingsToken|array, + * translate?: RotateValue|array, + * translateX?: SpacingToken2|array, + * translateY?: SpacingToken2|array, + * translateZ?: SpacingToken2|array, + * truncate?: bool|string|array, + * unicodeBidi?: UnicodeBidiValue|array, + * userSelect?: UserSelectValue|array, + * vectorEffect?: VectorEffectValue|array, + * verticalAlign?: VerticalAlignValue|array, + * viewTimeline?: WebkitMaskImageValue|array, + * viewTimelineAxis?: ScrollTimelineAxisValue|array, + * viewTimelineInset?: AspectRatioValue|array, + * viewTimelineName?: WebkitMaskImageValue|array, + * viewTransitionName?: ViewTransitionNameValue|array, + * visibility?: VisibilityValue|array, + * w?: SizesToken2|array, + * whiteSpace?: WhiteSpaceValue|array, + * whiteSpaceCollapse?: WhiteSpaceCollapseValue|array, + * widows?: WebkitTextStrokeWidthValue|array, + * width?: SizesToken2|array, + * willChange?: WillChangeValue|array, + * wordBreak?: WordBreakValue|array, + * wordSpacing?: SpacingToken|array, + * wordWrap?: WordWrapValue|array, + * writingMode?: WritingModeValue|array, + * x?: SpacingToken2|array, + * y?: SpacingToken2|array, + * z?: SpacingToken2|array, + * zIndex?: AspectRatioValue|array, + * zoom?: ZoomValue|array, + * '2xl'?: array, + * '2xlDown'?: array, + * '2xlOnly'?: array, + * '@/2xl'?: array, + * '@/3xl'?: array, + * '@/4xl'?: array, + * '@/5xl'?: array, + * '@/6xl'?: array, + * '@/7xl'?: array, + * '@/8xl'?: array, + * '@/lg'?: array, + * '@/md'?: array, + * '@/sm'?: array, + * '@/xl'?: array, + * '@/xs'?: array, + * _active?: array, + * _after?: array, + * _atValue?: array, + * _autofill?: array, + * _backdrop?: array, + * _before?: array, + * _checked?: array, + * _closed?: array, + * _complete?: array, + * _current?: array, + * _currentPage?: array, + * _currentStep?: array, + * _dark?: array, + * _default?: array, + * _disabled?: array, + * _dragging?: array, + * _empty?: array, + * _enabled?: array, + * _even?: array, + * _expanded?: array, + * _file?: array, + * _first?: array, + * _firstLetter?: array, + * _firstLine?: array, + * _firstOfType?: array, + * _focus?: array, + * _focusVisible?: array, + * _focusWithin?: array, + * _fullscreen?: array, + * _grabbed?: array, + * _groupActive?: array, + * _groupChecked?: array, + * _groupDisabled?: array, + * _groupExpanded?: array, + * _groupFocus?: array, + * _groupFocusVisible?: array, + * _groupFocusWithin?: array, + * _groupHover?: array, + * _groupInvalid?: array, + * _hidden?: array, + * _highContrast?: array, + * _highlighted?: array, + * _horizontal?: array, + * _hover?: array, + * _icon?: array, + * _inRange?: array, + * _incomplete?: array, + * _indeterminate?: array, + * _invalid?: array, + * _invertedColors?: array, + * _landscape?: array, + * _last?: array, + * _lastOfType?: array, + * _lessContrast?: array, + * _light?: array, + * _loading?: array, + * _ltr?: array, + * _marker?: array, + * _moreContrast?: array, + * _motionReduce?: array, + * _motionSafe?: array, + * _noscript?: array, + * _now?: array, + * _odd?: array, + * _only?: array, + * _onlyOfType?: array, + * _open?: array, + * _optional?: array, + * _osDark?: array, + * _osLight?: array, + * _outOfRange?: array, + * _overValue?: array, + * _peerActive?: array, + * _peerChecked?: array, + * _peerDisabled?: array, + * _peerExpanded?: array, + * _peerFocus?: array, + * _peerFocusVisible?: array, + * _peerFocusWithin?: array, + * _peerHover?: array, + * _peerInvalid?: array, + * _peerPlaceholderShown?: array, + * _placeholder?: array, + * _placeholderShown?: array, + * _portrait?: array, + * _pressed?: array, + * _print?: array, + * _rangeEnd?: array, + * _rangeStart?: array, + * _readOnly?: array, + * _readWrite?: array, + * _required?: array, + * _rtl?: array, + * _scrollbar?: array, + * _scrollbarThumb?: array, + * _scrollbarTrack?: array, + * _selected?: array, + * _selection?: array, + * _starting?: array, + * _target?: array, + * _today?: array, + * _topmost?: array, + * _unavailable?: array, + * _underValue?: array, + * _valid?: array, + * _vertical?: array, + * _visited?: array, + * lg?: array, + * lgDown?: array, + * lgOnly?: array, + * lgTo2xl?: array, + * lgToXl?: array, + * md?: array, + * mdDown?: array, + * mdOnly?: array, + * mdTo2xl?: array, + * mdToLg?: array, + * mdToXl?: array, + * sm?: array, + * smDown?: array, + * smOnly?: array, + * smTo2xl?: array, + * smToLg?: array, + * smToMd?: array, + * smToXl?: array, + * xl?: array, + * xlDown?: array, + * xlOnly?: array, + * xlTo2xl?: array, + * } + */ +final class CssReference +{ +} diff --git a/apps/bundler/symfony.lock b/apps/bundler/symfony.lock index 65b82bab306..272abadc1ac 100644 --- a/apps/bundler/symfony.lock +++ b/apps/bundler/symfony.lock @@ -186,6 +186,9 @@ "symfony/ux-cropperjs": { "version": "v2.23.0" }, + "symfony/ux-css": { + "version": "3.x-dev" + }, "symfony/ux-dropzone": { "version": "v2.23.0" }, diff --git a/apps/bundler/templates/base.html.twig b/apps/bundler/templates/base.html.twig index 4a88d08de6b..79e62fe5510 100644 --- a/apps/bundler/templates/base.html.twig +++ b/apps/bundler/templates/base.html.twig @@ -12,7 +12,7 @@ {{ reprise_entry_script_tags('app') }} {% endblock %} - + {% block body %}{% endblock %} diff --git a/apps/e2e/.gitignore b/apps/e2e/.gitignore index 87b5e91cc7d..a40fb0f11a7 100644 --- a/apps/e2e/.gitignore +++ b/apps/e2e/.gitignore @@ -6,6 +6,7 @@ composer.lock /.env.*.local /config/secrets/prod/prod.decrypt.private.php /config/reference.php +/config/reference_css.php /public/bundles/ /var/ /vendor/ diff --git a/apps/e2e/composer.json b/apps/e2e/composer.json index 55c0355785f..77ce99a66b6 100644 --- a/apps/e2e/composer.json +++ b/apps/e2e/composer.json @@ -47,6 +47,7 @@ "symfony/ux-calendar-link": "3.x-dev", "symfony/ux-chartjs": "3.x-dev", "symfony/ux-cropperjs": "3.x-dev", + "symfony/ux-css": "3.x-dev", "symfony/ux-dropzone": "3.x-dev", "symfony/ux-google-map": "3.x-dev", "symfony/ux-icons": "3.x-dev", diff --git a/apps/e2e/config/bundles.php b/apps/e2e/config/bundles.php index c004117ad86..9a40aa8b67e 100644 --- a/apps/e2e/config/bundles.php +++ b/apps/e2e/config/bundles.php @@ -27,4 +27,5 @@ Zenstruck\Foundry\ZenstruckFoundryBundle::class => ['all' => true], Symfony\UX\Native\UXNativeBundle::class => ['all' => true], Symfony\UX\CalendarLink\UXCalendarLinkBundle::class => ['all' => true], + Symfony\UX\Css\UXCssBundle::class => ['all' => true], ]; diff --git a/apps/e2e/config/packages/ux_css.yaml b/apps/e2e/config/packages/ux_css.yaml new file mode 100644 index 00000000000..25e6a6d96aa --- /dev/null +++ b/apps/e2e/config/packages/ux_css.yaml @@ -0,0 +1,12 @@ +ux_css: + tokens: + colors: + danger: '#dc2626' + primary: '#2563eb' + spacing: + '4': '1rem' + '8': '2rem' + static_css: + css: + - properties: + color: [danger, primary] diff --git a/apps/e2e/src/Controller/CssController.php b/apps/e2e/src/Controller/CssController.php new file mode 100644 index 00000000000..565f0649bfb --- /dev/null +++ b/apps/e2e/src/Controller/CssController.php @@ -0,0 +1,29 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App\Controller; + +use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; +use Symfony\Component\HttpFoundation\Request; +use Symfony\Component\HttpFoundation\Response; +use Symfony\Component\Routing\Attribute\Route; + +#[Route('/ux-css', name: 'app_ux_css_')] +final class CssController extends AbstractController +{ + #[Route('/basic', name: 'basic')] + public function basic(Request $request): Response + { + $tone = 'primary' === $request->query->get('tone') ? 'primary' : 'danger'; + + return $this->render('ux_css/basic.html.twig', ['tone' => $tone]); + } +} diff --git a/apps/e2e/src/Repository/ExampleRepository.php b/apps/e2e/src/Repository/ExampleRepository.php index 9ad168cd591..c932feef288 100644 --- a/apps/e2e/src/Repository/ExampleRepository.php +++ b/apps/e2e/src/Repository/ExampleRepository.php @@ -37,6 +37,7 @@ public function __construct() new Example(UxPackage::ChartJs, 'Pie chart with options', 'A pie chart with custom options to control the appearance and behavior.', 'app_ux_chartjs_pie_with_options'), new Example(UxPackage::Cropperjs, 'Image cropper', 'Crop an image with Cropper.js using default options.', 'app_ux_cropperjs_crop'), new Example(UxPackage::Cropperjs, 'Image cropper with aspect ratio', 'Crop an image with a fixed 16:9 aspect ratio constraint.', 'app_ux_cropperjs_crop_with_aspect_ratio'), + new Example(UxPackage::Css, 'Styles with css()', 'Padding, a responsive margin and a hover color from css(), and a color only known at runtime, kept by static_css.', 'app_ux_css_basic'), new Example(UxPackage::Dropzone, 'Single file upload', 'Upload one file, with a preview and a clear button.', 'app_ux_dropzone_single'), new Example(UxPackage::Dropzone, 'Multiple file upload', 'Upload several files at once: accumulate across picks, preview each, and remove individually.', 'app_ux_dropzone_multiple'), new Example(UxPackage::LiveComponent, 'Examples filtering', 'On this page, you can filter all examples by query terms, and observe how the UI and URLs update during and after processing.', 'app_home'), diff --git a/apps/e2e/src/UxPackage.php b/apps/e2e/src/UxPackage.php index 8161186953d..d5100b093bf 100644 --- a/apps/e2e/src/UxPackage.php +++ b/apps/e2e/src/UxPackage.php @@ -17,6 +17,7 @@ enum UxPackage: string case CalendarLink = 'UX CalendarLink'; case ChartJs = 'UX Chart'; case Cropperjs = 'UX Cropperjs'; + case Css = 'UX CSS'; case Dropzone = 'UX Dropzone'; case Icons = 'UX Icons'; case LiveComponent = 'UX LiveComponent'; @@ -41,6 +42,7 @@ public function getDocumentationUrl(): string self::CalendarLink => 'https://ux.symfony.com/calendar-link', self::ChartJs => 'https://ux.symfony.com/chartjs', self::Cropperjs => 'https://ux.symfony.com/cropperjs', + self::Css => 'https://ux.symfony.com/css', self::Dropzone => 'https://ux.symfony.com/dropzone', self::Icons => 'https://ux.symfony.com/icons', self::LiveComponent => 'https://ux.symfony.com/live-component', diff --git a/apps/e2e/symfony.lock b/apps/e2e/symfony.lock index 4c4a0514d02..2d5ac48dfd5 100644 --- a/apps/e2e/symfony.lock +++ b/apps/e2e/symfony.lock @@ -256,6 +256,9 @@ "symfony/ux-cropperjs": { "version": "v2.29.1" }, + "symfony/ux-css": { + "version": "3.x-dev" + }, "symfony/ux-dropzone": { "version": "v2.29.1" }, diff --git a/apps/e2e/templates/ux_css/basic.html.twig b/apps/e2e/templates/ux_css/basic.html.twig new file mode 100644 index 00000000000..f3ef9ca9a72 --- /dev/null +++ b/apps/e2e/templates/ux_css/basic.html.twig @@ -0,0 +1,15 @@ +{% extends 'example.html.twig' %} + +{% block stylesheets %} + +{% endblock %} + +{% block example %} +
+ Hover me +
+ +
+ This color comes from the query string +
+{% endblock %} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3dffd3db4d..c9df95c8c65 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -163,6 +163,8 @@ importers: specifier: ^4.1.0 version: 4.1.0(@types/node@25.3.0)(jsdom@26.1.0(supports-color@10.2.2))(msw@2.10.4(@types/node@22.19.11)(typescript@5.8.3))(vite@7.3.6(@types/node@22.19.11)(lightningcss@1.33.0)(terser@5.43.1)(tsx@4.20.3)) + src/Css/assets: {} + src/Dropzone/assets: devDependencies: '@hotwired/stimulus': diff --git a/splitsh.json b/splitsh.json index a75fd25bed8..39fa816e7f8 100644 --- a/splitsh.json +++ b/splitsh.json @@ -6,6 +6,7 @@ "ux-dropzone": "src/Dropzone", "ux-chartjs": "src/Chartjs", "ux-cropperjs": "src/Cropperjs", + "ux-css": "src/Css", "ux-icons": "src/Icons", "ux-image": { "prefixes": [{ "from": "src/Image", "to": "", "excludes": ["src/Bridge"] }] }, "ux-cloudflare-image": "src/Image/src/Bridge/Cloudflare", diff --git a/src/Css/.gitattributes b/src/Css/.gitattributes new file mode 100644 index 00000000000..198caef6722 --- /dev/null +++ b/src/Css/.gitattributes @@ -0,0 +1,10 @@ +/.git* export-ignore +/.symfony.bundle.yaml export-ignore +/assets/test export-ignore +/assets/playwright.config.ts export-ignore +/CONTRIBUTING.md export-ignore +/doc export-ignore +/phpbench.json export-ignore +/phpunit.dist.xml export-ignore +/tests export-ignore +/tools export-ignore diff --git a/src/Css/.gitignore b/src/Css/.gitignore new file mode 100644 index 00000000000..d097c7e0bde --- /dev/null +++ b/src/Css/.gitignore @@ -0,0 +1,6 @@ +/vendor/ +/composer.lock +/phpunit.xml +/.phpunit.cache +.DS_Store +/.phpbench diff --git a/src/Css/.symfony.bundle.yaml b/src/Css/.symfony.bundle.yaml new file mode 100644 index 00000000000..9e3566394b9 --- /dev/null +++ b/src/Css/.symfony.bundle.yaml @@ -0,0 +1,3 @@ +branches: ['3.x'] +maintained_branches: ['3.x'] +doc_dir: 'doc' diff --git a/src/Css/CHANGELOG.md b/src/Css/CHANGELOG.md new file mode 100644 index 00000000000..51c45de27a5 --- /dev/null +++ b/src/Css/CHANGELOG.md @@ -0,0 +1,5 @@ +# CHANGELOG + +## 3.6.0 + +- Add the component diff --git a/src/Css/CONTRIBUTING.md b/src/Css/CONTRIBUTING.md new file mode 100644 index 00000000000..eb0169acec5 --- /dev/null +++ b/src/Css/CONTRIBUTING.md @@ -0,0 +1,103 @@ +# Contributing + +The Symfony UX CSS package is a PHP port of Panda CSS's `css()` function for Twig. Its correctness is checked against Panda CSS itself, so the setup is a bit more involved than for other packages. Please follow the instructions below to set up your development environment. + +## Setting up the development environment + +First, ensure you have followed the [Symfony UX's Contribution Guide](https://github.com/symfony/ux/blob/3.x/CONTRIBUTING.md) to set up your fork of the main repository, install dependencies, etc. + +Then, install the UX CSS package dependencies: + +```shell +# src/Css +composer install +``` + +You can then run the tests with: + +```shell +# src/Css +php vendor/bin/phpunit +``` + +## Golden tests + +The package must produce exactly the same class names and CSS as Panda CSS. Rather than rewriting Panda's tests by hand, we run Panda's own test suite with a small instrumentation that records every `css()` call: the input, the Panda config it ran with, and the output Panda produced. These recordings are the "golden" files, reference outputs coming from the trusted implementation. The PHP engine replays each recorded input and must produce the same string, byte for byte. Panda is pinned to one commit, stored in `tests/Fixtures/Panda/PANDA_COMMIT`. + +## Where things live + +- `tests/Fixtures/Panda/cases/*.json`: one file per Panda test file, one entry per `css()` call, with its inputs, expected output, config name, and, for tests that use their own config, a patch on top of the base config. +- `tests/Fixtures/Panda/configs/*.json`: the Panda configs the cases run with (the test fixture config and the codegen scenarios). +- `tests/Fixtures/Panda/utilities.json`: what Panda's `utility.transform()` returns for every utility of the fixture config, with about ten values each. Replayed by `tests/Golden/PandaUtilitiesTest.php`, which has no ratchet: every recorded value must match, except Panda's text styles and layer styles, which are skipped as out of v1. +- `tests/Fixtures/Panda/tokens.json`: the views of Panda's token dictionary for the fixture config (CSS variable of each token, raw values, values by category, color palettes, CSS variables by condition). Replayed by `tests/Golden/PandaTokensTest.php`, which has no ratchet: every value must match. +- `tests/Fixtures/Panda/expectations.php`: the ratchet, see below. +- `tests/Golden/PandaGoldenTest.php`: replays the cases. +- `tools/panda-golden/`: the recorder script and the hooks it injects into Panda. + +## How a case can end + +Each case replayed by `PandaGoldenTest` ends in one of three ways: + +- it passes: the output is identical to Panda's; +- it is skipped, with a reason: either it was recorded as unsupported (the Panda test also used recipes, patterns, JSX, config hooks, etc.), or it is marked "Out of v1" for a Panda feature the package does not support on purpose, for example Panda's template literal syntax or hashed class names; +- it is incomplete: not ported yet, or the output differs from Panda's. This is only allowed for cases that never passed before. + +Some cases record the CSS of Panda's tokens layer (`generate-token.test.ts`). Those are compared after removing the whitespace and the last semicolon before each closing brace, because Panda re-parses that CSS several times and leaves random indentation there. Everything else must be identical. + +`tests/Fixtures/Panda/expectations.php` lists every case id that currently passes, and this list acts as a ratchet: once a case is listed, it must keep passing, or the test fails. After making more cases pass, update the list with: + +```shell +# src/Css +php tests/Golden/update-expectations.php +``` + +then commit the result. The script refuses to drop a case that used to pass; pass `--allow-regressions` to force it anyway. `expectations.php` also has a `skipped` map (case id to reason) to skip a case by hand. + +## Regenerating the golden files + +From the repository root, run: + +```shell +# repository root +node src/Css/tools/panda-golden/record.mjs +``` + +This needs Node 22, pnpm and git. On the first run, it clones Panda into `~/.cache/symfony-ux-css/panda` (override with the `PANDA_DIR` environment variable) and installs its dependencies. After that, a run takes about a minute. + +The script rewrites `cases/`, `configs/`, `utilities.json`, `tokens.json`, `PANDA_COMMIT` and `resources/panda-preset.json`, and it lists any case file that no longer matches a Panda test file: remove those with `git rm`. Unlike the other files, `resources/panda-preset.json` is not a test fixture: it is the default Panda preset shipped with the package (the conditions and utilities of `preset-base`, the breakpoints and container sizes of `preset-panda`, no tokens), and the bundle uses it at runtime. Then, from `src/Css`, run `php tests/Golden/update-expectations.php`, run the tests, and commit everything. + +## Moving to a newer Panda + +Change `PANDA_COMMIT` in `tools/panda-golden/record.mjs`, then run the recorder again. If Panda's code changed where the recorder injects its hooks, the script stops and prints the snippet it could not find: adapt the patch in `record.mjs` accordingly. Then update the expectations as above, and look at every case that stopped passing. + +## Measuring performance + +The benchmarks live in `tests/Benchmark/` and run with [PHPBench](https://phpbench.readthedocs.io/). They measure: + +- `css()` at runtime, for a flat hash, a hash with conditions, a responsive hash, and the dynamic part of a hash; +- loading the class name tables from the container; +- compiling a template with 100 `css()` calls, next to the same template without `css()`; +- generating the CSS of 1000 hashes; +- a dev request on a project of 200 templates, with no change and after one template changed; +- the cache warmup of the same project. + +Run them from `src/Css`: + +```shell +# src/Css +vendor/bin/phpbench run --report=css +``` + +Each benchmark has a budget, about ten times what it takes today. The run fails if a benchmark goes over its budget. A budget only catches a big regression, not a small one. To measure the effect of a change, record a reference before the change, then compare after it: + +```shell +# src/Css, before the change +vendor/bin/phpbench run --report=css --tag=before + +# src/Css, after the change +vendor/bin/phpbench run --report=css --ref=before +``` + +The report then shows, for each benchmark, how much it moved. Run both commands on the same machine, under the same conditions. + +`phpbench.json` turns on opcache as in production, including for files written just before a benchmark runs, such as the container, and turns off Xdebug. diff --git a/src/Css/LICENSE b/src/Css/LICENSE new file mode 100644 index 00000000000..94b768f8ae8 --- /dev/null +++ b/src/Css/LICENSE @@ -0,0 +1,19 @@ +Copyright (c) 2026-present Fabien Potencier + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/src/Css/README.md b/src/Css/README.md new file mode 100644 index 00000000000..c4947e934d1 --- /dev/null +++ b/src/Css/README.md @@ -0,0 +1,24 @@ +# Symfony UX CSS + +**EXPERIMENTAL** This bundle is currently experimental and is likely to change, possibly significantly, before its first stable release. + +Symfony UX CSS provides a `css()` Twig function in the spirit of [Panda CSS](https://panda-css.com/): it turns a hash of style properties into atomic class names, built from your design tokens and validated when templates compile. + +## Installation + +```bash +composer require symfony/ux-css +``` + +## Usage + +```twig +
+``` + +The attribute becomes `class="p_md c_fg hover:c_primary md:p_lg"`, and the bundle writes the matching rules to `var/ux_css/styles.css`. + +## Resources + +- [Documentation](doc/index.rst) +- [Report issues](https://github.com/symfony/ux/issues) and [send Pull Requests](https://github.com/symfony/ux/pulls) in the [main Symfony UX repository](https://github.com/symfony/ux) diff --git a/src/Css/assets/package.json b/src/Css/assets/package.json new file mode 100644 index 00000000000..1bd1589d032 --- /dev/null +++ b/src/Css/assets/package.json @@ -0,0 +1,19 @@ +{ + "name": "@symfony/ux-css", + "description": "Typed atomic CSS for Twig, driven by design tokens and validated at compile time.", + "private": true, + "license": "MIT", + "keywords": [ + "symfony-ux", + "css", + "atomic-css", + "design-tokens" + ], + "homepage": "https://ux.symfony.com/css", + "repository": "https://github.com/symfony/ux", + "type": "module", + "scripts": { + "test:browser": "playwright test", + "test:browser:ui": "playwright test --ui" + } +} diff --git a/src/Css/assets/playwright.config.ts b/src/Css/assets/playwright.config.ts new file mode 100644 index 00000000000..5f22dd6a69c --- /dev/null +++ b/src/Css/assets/playwright.config.ts @@ -0,0 +1,3 @@ +import baseConfig from '../../../playwright.config.base'; + +export default baseConfig; diff --git a/src/Css/assets/test/browser/css.test.ts b/src/Css/assets/test/browser/css.test.ts new file mode 100644 index 00000000000..62486107afb --- /dev/null +++ b/src/Css/assets/test/browser/css.test.ts @@ -0,0 +1,29 @@ +import { expect, test } from '@playwright/test'; + +test.describe('Css', () => { + test('Static css() calls get their styles from the generated stylesheet', async ({ page }) => { + await page.goto('/ux-css/basic'); + + const box = page.getByTestId('css-box'); + await expect(box).toHaveCSS('padding', '16px'); + await expect(box).toHaveCSS('color', 'rgb(220, 38, 38)'); + + await box.hover(); + await expect(box).toHaveCSS('color', 'rgb(37, 99, 235)'); + }); + + test('Breakpoints apply from their minimum width', async ({ page }) => { + await page.setViewportSize({ width: 500, height: 800 }); + await page.goto('/ux-css/basic'); + await expect(page.getByTestId('css-box')).toHaveCSS('margin-top', '0px'); + + await page.setViewportSize({ width: 1024, height: 800 }); + await expect(page.getByTestId('css-box')).toHaveCSS('margin-top', '32px'); + }); + + test('Dynamic css() calls get their styles from static_css', async ({ page }) => { + await page.goto('/ux-css/basic?tone=primary'); + + await expect(page.getByTestId('css-dynamic')).toHaveCSS('color', 'rgb(37, 99, 235)'); + }); +}); diff --git a/src/Css/composer.json b/src/Css/composer.json new file mode 100644 index 00000000000..e465c8914d0 --- /dev/null +++ b/src/Css/composer.json @@ -0,0 +1,61 @@ +{ + "name": "symfony/ux-css", + "type": "symfony-bundle", + "description": "Typed atomic CSS for Twig, driven by design tokens and validated at compile time", + "keywords": [ + "symfony-ux", + "css", + "atomic-css", + "design-tokens", + "twig" + ], + "homepage": "https://symfony.com", + "license": "MIT", + "authors": [ + { + "name": "Hugo Alliaume", + "email": "hugo@alliau.me" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "autoload": { + "psr-4": { + "Symfony\\UX\\Css\\": "src/" + }, + "exclude-from-classmap": [] + }, + "autoload-dev": { + "psr-4": { + "Symfony\\UX\\Css\\Tests\\": "tests/" + } + }, + "require": { + "php": ">=8.4", + "symfony/config": "^7.4|^8.0", + "symfony/dependency-injection": "^7.4|^8.0", + "symfony/http-kernel": "^7.4|^8.0", + "twig/twig": "^3.24|^4.0" + }, + "require-dev": { + "phpunit/phpunit": "^11.1|^12.0", + "symfony/framework-bundle": "^7.4|^8.0", + "symfony/yaml": "^7.4|^8.0", + "symfony/twig-bundle": "^7.4|^8.0", + "symfony/console": "^7.4|^8.0", + "symfony/asset-mapper": "^7.4|^8.0", + "phpbench/phpbench": "^1.7", + "symfony/error-handler": "^7.4.17|^8.1.5", + "phpstan/phpstan": "^2.1.39", + "symfony/process": "^7.4|^8.0" + }, + "extra": { + "thanks": { + "name": "symfony/ux", + "url": "https://github.com/symfony/ux" + } + }, + "minimum-stability": "dev" +} diff --git a/src/Css/doc/alternatives.rst b/src/Css/doc/alternatives.rst new file mode 100644 index 00000000000..c425207d86c --- /dev/null +++ b/src/Css/doc/alternatives.rst @@ -0,0 +1,106 @@ +Compared to other CSS tools +=========================== + +``css()`` is one of several ways to style Twig templates. This page explains +how it differs from the tools you may already use, and what those tools do +better. The facts about other tools come from their documentation, as of +September 2026. + +Tailwind CSS +------------ + +`Tailwind CSS`_ generates utility classes for the class names it finds in your +files. It reads the files as plain text, so: + +* a misspelled class, like ``bg-blu-500``, gets no CSS, and nothing reports + it; +* a class name built from pieces, like ``text-{{ color }}-600``, is not found, + and gets no CSS either. + +With ``css()``, styles are a hash that Twig parses. A misspelled property, +token or keyword is a Twig syntax error that points to the line, and +``lint:twig`` catches it in CI. Using a value that comes from a variable is +supported: see :doc:`dynamic-styles`. + +Tailwind declares design tokens in CSS, with the ``@theme`` directive, and +exposes them as CSS variables. ``css()`` declares them in the bundle +configuration, which is checked when the container is built, and exposes all +of them as CSS variables too. + +Tailwind needs a build step. Its standalone CLI runs without Node.js, and the +`TailwindBundle`_ of SymfonyCasts runs it for AssetMapper. With ``css()``, PHP +writes the CSS file: there is no binary to download and no watcher to start. + +What Tailwind does better: + +* editor support: the Tailwind CSS IntelliSense extension for VS Code, and + the Tailwind CSS plugin of PhpStorm, complete class names and preview their + CSS; +* a large ecosystem of documentation and ready-made components, including + the Shadcn and Flowbite kits of Symfony UX Toolkit; +* short class names that work in any file, including JavaScript. + +UnoCSS +------ + +`UnoCSS`_ is an atomic CSS engine. It generates the utilities it finds, from +presets: one of them follows the class names of Tailwind CSS, and another one +lets you write utilities as HTML attributes, like ``bg="blue-400"``. It runs +through Vite, Webpack, PostCSS or its CLI, which need Node.js. It can also run +through a runtime that generates the CSS in the browser. + +``css()`` produces the same kind of atomic CSS without Node.js, and checks the +styles when Twig compiles the template. + +What UnoCSS does better: its rules and presets are fully customizable, and it +works with any template language and any JavaScript framework. + +Bootstrap utilities +------------------- + +`Bootstrap`_ ships utility classes for spacing, display, flexbox, colors and +more, generated from Sass by its utility API. Only some utilities have +responsive variants, like ``.d-md-none``, and variants for states such as +``:hover`` must be enabled utility by utility. Adding or changing a utility +means compiling Bootstrap's Sass. Colors and other values are CSS variables +with the ``--bs-`` prefix. + +With ``css()``, every property works with every condition and breakpoint, and +the tokens are declared in YAML, without Sass. + +What Bootstrap does better: its components, such as navbars, modals and +dropdowns, their JavaScript, and their accessible defaults. + +Both can live in the same page. Bootstrap's CSS is not in a cascade layer, so +it wins over ``css()`` classes on the same property: see +:doc:`css-function` to change that. + +Hand-written CSS +---------------- + +Plain CSS, with custom properties for the design values, needs no tool and +gives full control. + +With ``css()``, the bundle writes the rules, once per style, for every +template. The file is built from the templates, so a style that no template +uses any more disappears from it. And since the tokens are CSS variables, both +work together: ``css()`` for most elements, and hand-written CSS with +``var(--colors-primary)`` for the rest. + +What hand-written CSS does better: complex selectors, ``@keyframes``, and +styles for HTML you do not write yourself, such as the output of a Markdown +parser or a third-party widget. + +Panda CSS +--------- + +`Panda CSS`_ generates atomic CSS from ``css()`` calls in JavaScript and +TypeScript, and checks them with generated TypeScript types. For the same +configuration, ``css()`` gives the same class names and the same CSS as Panda. +:doc:`panda` explains what differs. + +.. _`Tailwind CSS`: https://tailwindcss.com/ +.. _`TailwindBundle`: https://symfony.com/bundles/TailwindBundle/current/index.html +.. _`UnoCSS`: https://unocss.dev/ +.. _`Bootstrap`: https://getbootstrap.com/ +.. _`Panda CSS`: https://panda-css.com/ diff --git a/src/Css/doc/bundlers.rst b/src/Css/doc/bundlers.rst new file mode 100644 index 00000000000..0f68ea753f7 --- /dev/null +++ b/src/Css/doc/bundlers.rst @@ -0,0 +1,70 @@ +Loading the stylesheet +====================== + +The bundle writes one plain CSS file, ``var/ux_css/styles.css``. Any tool that +serves or bundles CSS can use it. + +AssetMapper +----------- + +The bundle registers ``var/ux_css/`` as an AssetMapper path under the +``ux_css`` prefix. Link the file from the base template: + +.. code-block:: html+twig + + {# templates/base.html.twig #} + {% block stylesheets %} + + {% endblock %} + +In dev, the bundle updates the file before Twig renders the page, so the link +always points to the current version. Its digest changes with its content, +so browsers never keep an old copy. + +In production, ``asset-map:compile`` copies the file to ``public/assets/``, +like any other asset. Run it after ``cache:warmup``: see :doc:`production`. + +Webpack Encore and Symfony Reprise +---------------------------------- + +Import the file from a JavaScript entry, next to your own styles: + +.. code-block:: javascript + + // assets/app.js + import './styles/app.css'; + import '../var/ux_css/styles.css'; + +The rules end up in the CSS file of the entry, which +``encore_entry_link_tags()`` or ``reprise_entry_link_tags()`` already loads. +This works with Webpack Encore and with Symfony Reprise on Vite or Rsbuild. + +With Webpack Encore, the file can also be an entry of its own: + +.. code-block:: javascript + + // webpack.config.js + Encore + // ... + .addStyleEntry('ux_css', './var/ux_css/styles.css') + ; + +.. code-block:: twig + + {# templates/base.html.twig #} + {{ encore_entry_link_tags('ux_css') }} + +In dev, the bundle rewrites the file during the request. Keep the watch mode or +the dev server of your bundler running, so it rebuilds when the file changes. + +The file must exist before the bundler runs. In dev, the first request writes +it. On a fresh checkout or in CI, run ``cache:warmup`` before the build: + +.. code-block:: terminal + + $ php bin/console cache:warmup + $ npm run build + +Minifiers may drop the ``@layer tokens, utilities;`` statement at the top of +the file. The two layers keep their order, since they appear in that order +anyway. diff --git a/src/Css/doc/conditions.rst b/src/Css/doc/conditions.rst new file mode 100644 index 00000000000..55c709ff734 --- /dev/null +++ b/src/Css/doc/conditions.rst @@ -0,0 +1,174 @@ +Conditions and breakpoints +========================== + +A condition applies styles in a given state: on hover, in dark mode, when an +input is invalid... A breakpoint applies them from a given screen width. Both +come from Panda CSS, with the same names and the same selectors. + +Writing a condition +------------------- + +In ``css()``, a condition starts with an underscore. There are two ways to +write it. Both give the same classes: + +.. code-block:: html+twig + + {# a hash of styles under the condition #} + + + {# a conditional value, with "base" for the default #} + + +The first form groups several properties under one condition. The second one +keeps all the values of one property together. ``base`` is only valid inside a +conditional value. + +Conditions can be nested. The class names show the chain: + +.. code-block:: html+twig + + + + TWIG; + } + + private function templatePath(int $i): string + { + return \sprintf('%s/templates/section_%d.html.twig', $this->dir, $i); + } +} diff --git a/src/Css/tests/Benchmark/CompileBench.php b/src/Css/tests/Benchmark/CompileBench.php new file mode 100644 index 00000000000..2bb7b65c0cb --- /dev/null +++ b/src/Css/tests/Benchmark/CompileBench.php @@ -0,0 +1,71 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Benchmark; + +use PhpBench\Attributes as Bench; +use Twig\Environment; + +#[Bench\BeforeMethods('setUp')] +#[Bench\AfterMethods('tearDown')] +#[Bench\Revs(20)] +#[Bench\Iterations(5)] +#[Bench\Warmup(1)] +#[Bench\OutputTimeUnit('milliseconds', precision: 3)] +final class CompileBench +{ + private const CSS_CALL = <<<'TWIG' +
+ TWIG; + + private const CALLS = 100; + + private const PLAIN_CALL = <<<'TWIG' +
+ TWIG; + + private BenchProject $project; + private Environment $twig; + + public function setUp(): void + { + $this->project = new BenchProject(); + $twig = $this->project->get('twig'); + \assert($twig instanceof Environment); + $this->twig = $twig; + + $this->project->writeTemplate('css.html.twig', str_repeat(self::CSS_CALL."\n", self::CALLS)); + $this->project->writeTemplate('plain.html.twig', str_repeat(self::PLAIN_CALL."\n", self::CALLS)); + } + + public function tearDown(): void + { + $this->project->remove(); + } + + #[Bench\Assert('mode(variant.time.avg) < 250 milliseconds')] + public function benchTemplateWithCssCalls(): void + { + $this->compile('css.html.twig'); + } + + #[Bench\Assert('mode(variant.time.avg) < 150 milliseconds')] + public function benchTemplateWithoutCssCalls(): void + { + $this->compile('plain.html.twig'); + } + + private function compile(string $name): void + { + $source = $this->twig->getLoader()->getSourceContext($name); + $this->twig->compileSource($source); + } +} diff --git a/src/Css/tests/Benchmark/ContainerBench.php b/src/Css/tests/Benchmark/ContainerBench.php new file mode 100644 index 00000000000..5a2493bc487 --- /dev/null +++ b/src/Css/tests/Benchmark/ContainerBench.php @@ -0,0 +1,44 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Benchmark; + +use PhpBench\Attributes as Bench; + +#[Bench\BeforeMethods('setUp')] +#[Bench\AfterMethods('tearDown')] +#[Bench\Revs(500)] +#[Bench\Iterations(5)] +#[Bench\Warmup(1)] +#[Bench\OutputTimeUnit('microseconds', precision: 2)] +final class ContainerBench +{ + private BenchProject $project; + private string $containerClass; + + public function setUp(): void + { + $this->project = new BenchProject(); + $this->containerClass = $this->project->containerClass(); + } + + public function tearDown(): void + { + $this->project->remove(); + } + + #[Bench\Assert('mode(variant.time.avg) < 30 microseconds')] + public function benchLoadTheClassNameGenerator(): void + { + $container = new $this->containerClass(); + $container->get('ux_css.class_name_generator'); + } +} diff --git a/src/Css/tests/Benchmark/GenerateBench.php b/src/Css/tests/Benchmark/GenerateBench.php new file mode 100644 index 00000000000..4a898401566 --- /dev/null +++ b/src/Css/tests/Benchmark/GenerateBench.php @@ -0,0 +1,79 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Benchmark; + +use PhpBench\Attributes as Bench; +use Symfony\UX\Css\CssGenerator; + +#[Bench\BeforeMethods('setUp')] +#[Bench\AfterMethods('tearDown')] +#[Bench\Revs(5)] +#[Bench\Iterations(5)] +#[Bench\Warmup(1)] +#[Bench\OutputTimeUnit('milliseconds', precision: 2)] +final class GenerateBench +{ + private const HASHES = 1000; + private const SPACING = ['1', '2', '4', '8']; + private const COLORS = ['gray.100', 'gray.900', 'blue.500']; + + private BenchProject $project; + private CssGenerator $generator; + + /** + * @var list> + */ + private array $hashes; + + public function setUp(): void + { + $this->project = new BenchProject(); + $generator = $this->project->get('ux_css.css_generator'); + \assert($generator instanceof CssGenerator); + $this->generator = $generator; + $this->hashes = self::hashes(self::HASHES); + } + + public function tearDown(): void + { + $this->project->remove(); + } + + #[Bench\Assert('mode(variant.time.avg) < 750 milliseconds')] + public function benchCompactStylesheet(): void + { + $this->generator->generate($this->hashes, true); + } + + /** + * @return list> + */ + private static function hashes(int $count): array + { + $hashes = []; + for ($i = 0; $i < $count; ++$i) { + $spacing = self::SPACING[$i % 4]; + $color = self::COLORS[$i % 3]; + + $hashes[] = [ + 'display' => 'flex', + 'p' => ['base' => $spacing, 'md' => self::SPACING[($i + 1) % 4]], + 'color' => $color, + '_hover' => ['bg' => self::COLORS[($i + 1) % 3]], + 'maxW' => \sprintf('[%drem]', $i % 50 + 10), + 'w' => \sprintf('[%dpx]', $i), + ]; + } + + return $hashes; + } +} diff --git a/src/Css/tests/Benchmark/RuntimeBench.php b/src/Css/tests/Benchmark/RuntimeBench.php new file mode 100644 index 00000000000..2e38af50210 --- /dev/null +++ b/src/Css/tests/Benchmark/RuntimeBench.php @@ -0,0 +1,89 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Benchmark; + +use PhpBench\Attributes as Bench; +use Symfony\UX\Css\Twig\CssRuntime; +use Twig\Environment; + +#[Bench\BeforeMethods('setUp')] +#[Bench\AfterMethods('tearDown')] +#[Bench\Revs(2000)] +#[Bench\Iterations(5)] +#[Bench\Warmup(1)] +#[Bench\OutputTimeUnit('microseconds', precision: 2)] +final class RuntimeBench +{ + private const FLAT = [ + 'display' => 'flex', + 'alignItems' => 'center', + 'gap' => '2', + 'p' => '4', + 'color' => 'gray.900', + 'bg' => 'gray.100', + 'rounded' => 'md', + ]; + + private const CONDITIONS = [ + 'color' => 'gray.900', + '_hover' => ['color' => 'blue.500', 'bg' => 'gray.100'], + '_dark' => ['color' => 'gray.100', '_hover' => ['bg' => 'gray.900']], + '_focusVisible' => ['outlineWidth' => '[2px]'], + ]; + + private const RESPONSIVE = [ + 'p' => ['2', '4', '8'], + 'fontSize' => ['base' => 'sm', 'md' => 'lg'], + 'display' => ['base' => 'block', 'lg' => 'flex'], + 'gap' => ['base' => '1', 'sm' => '2', 'xl' => '4'], + ]; + + private BenchProject $project; + private CssRuntime $runtime; + + public function setUp(): void + { + $this->project = new BenchProject(); + $twig = $this->project->get('twig'); + \assert($twig instanceof Environment); + $this->runtime = $twig->getRuntime(CssRuntime::class); + } + + public function tearDown(): void + { + $this->project->remove(); + } + + #[Bench\Assert('mode(variant.time.avg) < 50 microseconds')] + public function benchFlatHash(): void + { + $this->runtime->css(self::FLAT); + } + + #[Bench\Assert('mode(variant.time.avg) < 75 microseconds')] + public function benchConditions(): void + { + $this->runtime->css(self::CONDITIONS); + } + + #[Bench\Assert('mode(variant.time.avg) < 100 microseconds')] + public function benchResponsive(): void + { + $this->runtime->css(self::RESPONSIVE); + } + + #[Bench\Assert('mode(variant.time.avg) < 15 microseconds')] + public function benchDynamicPartOfAHash(): void + { + $this->runtime->append('d_flex ai_center p_4', ['color' => 'blue.500']); + } +} diff --git a/src/Css/tests/Benchmark/StylesheetBench.php b/src/Css/tests/Benchmark/StylesheetBench.php new file mode 100644 index 00000000000..8637dc3f3ec --- /dev/null +++ b/src/Css/tests/Benchmark/StylesheetBench.php @@ -0,0 +1,82 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Benchmark; + +use PhpBench\Attributes as Bench; +use Symfony\UX\Css\Dumper\StylesheetDumper; + +#[Bench\AfterMethods('tearDown')] +#[Bench\OutputTimeUnit('milliseconds', precision: 2)] +final class StylesheetBench +{ + private const TEMPLATES = 200; + + private BenchProject $project; + private StylesheetDumper $dumper; + + public function setUpDebug(): void + { + $this->boot(true); + } + + public function setUpDebugWithAChangedTemplate(): void + { + $this->boot(true); + $this->project->changeTemplate(0); + } + + public function setUpProduction(): void + { + $this->boot(false); + } + + public function tearDown(): void + { + $this->project->remove(); + } + + #[Bench\BeforeMethods('setUpDebug')] + #[Bench\Revs(50)] + #[Bench\Iterations(5)] + #[Bench\Warmup(1)] + #[Bench\Assert('mode(variant.time.avg) < 10 milliseconds')] + public function benchDevRequestWithoutChange(): void + { + $this->dumper->update(); + } + + #[Bench\BeforeMethods('setUpDebugWithAChangedTemplate')] + #[Bench\Revs(1)] + #[Bench\Iterations(10)] + #[Bench\Assert('mode(variant.time.avg) < 200 milliseconds')] + public function benchDevRequestAfterATemplateChanged(): void + { + $this->dumper->update(); + } + + #[Bench\BeforeMethods('setUpProduction')] + #[Bench\Revs(1)] + #[Bench\Iterations(5)] + #[Bench\Assert('mode(variant.time.avg) < 2500 milliseconds')] + public function benchCacheWarmup(): void + { + $this->dumper->dump(); + } + + private function boot(bool $debug): void + { + $this->project = new BenchProject(self::TEMPLATES, $debug); + $dumper = $this->project->get('ux_css.stylesheet_dumper'); + \assert($dumper instanceof StylesheetDumper); + $this->dumper = $dumper; + } +} diff --git a/src/Css/tests/CssGeneratorTest.php b/src/Css/tests/CssGeneratorTest.php new file mode 100644 index 00000000000..3fd390b78f5 --- /dev/null +++ b/src/Css/tests/CssGeneratorTest.php @@ -0,0 +1,130 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests; + +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\CssGenerator; +use Symfony\UX\Css\Engine\Engine; + +final class CssGeneratorTest extends TestCase +{ + private const PROJECT = [ + 'theme' => [ + 'tokens' => ['colors' => ['red' => ['value' => '#f00']], 'spacing' => ['md' => ['value' => '1rem']]], + 'semanticTokens' => ['colors' => ['primary' => ['value' => '{colors.red}']]], + 'breakpoints' => ['md' => '48rem'], + ], + ]; + + private const STYLES = [ + ['p' => 'md', 'color' => 'primary'], + ['color' => 'primary', 'md' => ['p' => 'md']], + ]; + + public function testReadableOutput(): void + { + $css = self::generator()->generate(self::STYLES); + + $this->assertSame(<<<'CSS' + @layer tokens, utilities; + + @layer tokens { + :where(:root, :host) { + --colors-red: #f00; + --spacing-md: 1rem; + --breakpoints-md: 48rem; + --sizes-breakpoint-md: 48rem; + --colors-primary: var(--colors-red); + } + } + + @layer utilities { + .p_md { + padding: var(--spacing-md); + } + + .c_primary { + color: var(--colors-primary); + } + + @media screen and (min-width: 48rem) { + .md\:p_md { + padding: var(--spacing-md); + } + } + } + + CSS, $css); + } + + public function testCompactOutput(): void + { + $css = self::generator()->generate(self::STYLES, compact: true); + + $this->assertSame( + '@layer tokens,utilities;@layer tokens{:where(:root, :host){--colors-red:#f00;--spacing-md:1rem;--breakpoints-md:48rem;--sizes-breakpoint-md:48rem;--colors-primary:var(--colors-red)}}@layer utilities{.p_md{padding:var(--spacing-md)}.c_primary{color:var(--colors-primary)}@media screen and (min-width: 48rem){.md\:p_md{padding:var(--spacing-md)}}}', + $css, + ); + } + + public function testCompactOutputKeepsImportantAndSelectorLists(): void + { + $generator = new CssGenerator(Engine::fromProjectConfig([])); + $styles = [ + ['color' => 'red !important'], + ['_hover' => ['color' => 'blue'], '_focus' => ['color' => 'blue']], + ]; + + $css = $generator->generate($styles, compact: true); + + $this->assertStringContainsString('.c_red\!{color:red!important}', $css); + $this->assertStringContainsString('.focus\:c_blue:is(:focus, [data-focus]),.hover\:c_blue:is(:hover, [data-hover]){color:blue}', $css); + } + + public function testARuleUsedInSeveralPlacesIsWrittenOnce(): void + { + $css = self::generator()->generate([...self::STYLES, ...self::STYLES]); + + $this->assertSame(1, substr_count($css, '.c_primary {')); + } + + public function testTokensAreWrittenEvenWhenNoStyleUsesThem(): void + { + $css = self::generator()->generate([]); + + $this->assertStringStartsWith("@layer tokens, utilities;\n\n@layer tokens {\n", $css); + $this->assertStringNotContainsString('@layer utilities {', $css); + } + + public function testBreakpointsAreTokensToo(): void + { + $generator = new CssGenerator(Engine::fromProjectConfig([])); + + $css = $generator->generate([]); + + $this->assertStringContainsString("--breakpoints-md: 768px;\n", $css); + } + + public function testNothingIsWrittenWithoutTokensNorStyles(): void + { + $generator = new CssGenerator(new Engine([])); + + $css = $generator->generate([]); + + $this->assertSame('', $css); + } + + private static function generator(): CssGenerator + { + return new CssGenerator(Engine::fromProjectConfig(self::PROJECT)); + } +} diff --git a/src/Css/tests/Engine/BreakpointsTest.php b/src/Css/tests/Engine/BreakpointsTest.php new file mode 100644 index 00000000000..50ab8acf5a4 --- /dev/null +++ b/src/Css/tests/Engine/BreakpointsTest.php @@ -0,0 +1,60 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Breakpoints; + +final class BreakpointsTest extends TestCase +{ + public function testKeysStartWithBaseAndFollowTheBreakpointValues(): void + { + $breakpoints = new Breakpoints(['md' => '768px', 'sm' => '640px', 'xl' => '1280px']); + + $this->assertSame(['base', 'sm', 'md', 'xl'], $breakpoints->keys); + } + + public function testBreakpointsWithTheSameIntegerPartKeepTheirOrder(): void + { + $breakpoints = new Breakpoints(['sm' => '40rem', 'md' => '40.5rem', 'lg' => '64rem']); + + $this->assertSame(['base', 'sm', 'md', 'lg'], $breakpoints->keys); + } + + public function testConditionNamesMatchPandaRuntime(): void + { + $breakpoints = new Breakpoints([ + 'sm' => '640px', + 'md' => '768px', + 'lg' => '1024px', + 'xl' => '1280px', + '2xl' => '1536px', + ]); + + $this->assertSame([ + 'sm', 'smOnly', 'smDown', + 'md', 'mdOnly', 'mdDown', + 'lg', 'lgOnly', 'lgDown', + 'xl', 'xlOnly', 'xlDown', + '2xl', '2xlOnly', '2xlDown', + 'smToMd', 'smToLg', 'smToXl', 'smTo2xl', 'mdToLg', 'mdToXl', 'mdTo2xl', 'lgToXl', 'lgTo2xl', 'xlTo2xl', + ], $breakpoints->getConditionNames()); + } + + public function testNoBreakpointsOnlyKeepBase(): void + { + $breakpoints = new Breakpoints([]); + + $this->assertSame(['base'], $breakpoints->keys); + $this->assertSame([], $breakpoints->getConditionNames()); + } +} diff --git a/src/Css/tests/Engine/ClassNameGeneratorTest.php b/src/Css/tests/Engine/ClassNameGeneratorTest.php new file mode 100644 index 00000000000..ed3dcf61447 --- /dev/null +++ b/src/Css/tests/Engine/ClassNameGeneratorTest.php @@ -0,0 +1,153 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\ClassNameGenerator; +use Symfony\UX\Css\Exception\InvalidArgumentException; +use Symfony\UX\Css\Exception\UnsupportedStyleException; + +final class ClassNameGeneratorTest extends TestCase +{ + private const CONFIG = [ + 'utilities' => [ + 'display' => ['className' => 'd'], + 'color' => ['className' => 'c'], + 'background' => ['className' => 'bg', 'shorthand' => 'bg'], + 'width' => ['className' => 'w', 'shorthand' => 'w'], + 'srOnly' => ['className' => 'sr', 'transform' => ['__function' => 'transform']], + 'opacity' => ['className' => 'op'], + 'zIndex' => ['className' => 'z'], + 'marginInline' => ['className' => 'mx', 'shorthand' => ['mx', 'marginX']], + ], + 'conditions' => ['hover' => '&:is(:hover, [data-hover])', 'dark' => '[data-theme=dark] &'], + 'theme' => ['breakpoints' => ['sm' => '640px', 'md' => '768px', 'lg' => '1024px']], + ]; + + public static function providePandaRuntimeCases(): iterable + { + yield 'native property' => [['display' => 'flex'], 'd_flex']; + yield 'token value' => [['color' => 'blue.300'], 'c_blue.300']; + yield 'utility with a transform' => [['srOnly' => true], 'sr_true']; + yield 'shorthand' => [['bg' => 'red'], 'bg_red']; + yield 'condition in the value' => [['bg' => ['_hover' => 'yellow.100']], 'hover:bg_yellow.100']; + yield 'condition as key' => [['_hover' => ['bg' => 'yellow.200']], 'hover:bg_yellow.200']; + yield 'nested conditions' => [['_hover' => ['_dark' => ['bg' => 'pink']]], 'hover:dark:bg_pink']; + yield 'arbitrary value' => [['color' => '#fff'], 'c_#fff']; + yield 'arbitrary selector' => [['&:data-panda' => ['display' => 'flex']], '[&:data-panda]:d_flex']; + yield 'breakpoint' => [['sm' => ['bg' => 'purple']], 'sm:bg_purple']; + yield 'responsive array' => [['width' => ['50px', null, '60px']], 'w_50px md:w_60px']; + yield 'important' => [['color' => 'red !important'], 'c_red!']; + yield 'base styles go last' => [['base' => ['color' => 'red'], 'display' => 'flex'], 'd_flex c_red']; + yield 'null ignored' => [['color' => null, 'display' => 'flex'], 'd_flex']; + yield 'whitespace collapsed' => [['display' => 'inline flex'], 'd_inline_flex']; + yield 'shorthand overrides its property' => [['width' => '1px', 'w' => '2px'], 'w_2px']; + yield 'conditional value' => [['color' => ['base' => 'red', 'md' => 'blue']], 'c_red md:c_blue']; + yield 'breakpoint then condition' => [['md' => ['_hover' => ['color' => 'red']]], 'md:hover:c_red']; + yield 'condition then breakpoint' => [['_hover' => ['md' => ['color' => 'red']]], 'hover:md:c_red']; + yield 'parent selector' => [['[dir=rtl] &' => ['color' => 'red']], '[[dir=rtl]_&]:c_red']; + yield 'arbitrary at-rule' => [['@media print' => ['color' => 'red']], '[@media_print]:c_red']; + yield 'numbers' => [['opacity' => 0.5, 'zIndex' => 10], 'op_0.5 z_10']; + yield 'bang inside a value' => [['content' => '"a!b"'], 'content_"ab"!']; + yield 'unknown nesting' => [['foo' => ['bar' => 'x']], 'bar:foo_x']; + yield 'negative number' => [['mx' => -2], 'mx_-2']; + } + + #[DataProvider('providePandaRuntimeCases')] + public function testGenerateMatchesPandaRuntime(array $styles, string $expected): void + { + $generator = ClassNameGenerator::fromPandaConfig(self::CONFIG); + + $this->assertSame($expected, $generator->generate($styles)); + } + + public static function provideJavaScriptValues(): iterable + { + yield 'double space' => [['display' => 'inline flex'], 'd_inline_flex']; + yield 'tab' => [['display' => "inline\tflex"], 'd_inline_flex']; + yield 'new line' => [['display' => "\"a b\"\n \"c d\""], 'd_"a_b"_"c_d"']; + yield 'no-break space' => [['display' => "a\u{A0}b"], 'd_a_b']; + yield 'byte order mark' => [['display' => "a\u{FEFF}b"], 'd_a_b']; + yield 'next line is not whitespace in JavaScript' => [['display' => "a\u{85}b"], "d_a\u{85}b"]; + yield 'integer' => [['opacity' => 10], 'op_10']; + yield 'float' => [['opacity' => 0.5], 'op_0.5']; + yield 'float needing 17 digits' => [['opacity' => 0.1 + 0.2], 'op_0.30000000000000004']; + yield 'integral float' => [['opacity' => 1.0], 'op_1']; + yield 'negative zero' => [['opacity' => -0.0], 'op_0']; + yield 'true' => [['opacity' => true], 'op_true']; + yield 'false' => [['opacity' => false], 'op_false']; + yield 'responsive list inside a condition' => [['_hover' => ['width' => ['10px', null, '30px']]], 'hover:w_10px hover:md:w_30px']; + yield 'null below the top level' => [['_hover' => ['color' => null, 'width' => '1px'], 'display' => null], 'hover:w_1px']; + yield 'nested conditions in both orders' => [['md' => ['_hover' => ['color' => 'red']], '_hover' => ['md' => ['color' => 'blue']]], 'md:hover:c_red hover:md:c_blue']; + } + + #[DataProvider('provideJavaScriptValues')] + public function testValuesAreWrittenLikePandaRuntime(array $styles, string $expected): void + { + $generator = ClassNameGenerator::fromPandaConfig(self::CONFIG); + + $this->assertSame($expected, $generator->generate($styles)); + } + + public static function provideRejectedValues(): iterable + { + yield 'exponent' => [['opacity' => 1e21], UnsupportedStyleException::class]; + yield 'infinity' => [['opacity' => \INF], UnsupportedStyleException::class]; + yield 'object' => [['display' => new \stdClass()], UnsupportedStyleException::class]; + yield 'invalid UTF-8 with whitespace' => [['color' => "a \xFF b"], InvalidArgumentException::class]; + yield 'invalid UTF-8 with a bang' => [['color' => "a\xFF!"], InvalidArgumentException::class]; + } + + #[DataProvider('provideRejectedValues')] + public function testInvalidValuesAreRejectedWithAnException(array $styles, string $exception): void + { + $generator = ClassNameGenerator::fromPandaConfig(self::CONFIG); + + $this->expectException($exception); + + $generator->generate($styles); + } + + public function testSeparatorIsConfigurable(): void + { + $generator = ClassNameGenerator::fromPandaConfig(['separator' => '-'] + self::CONFIG); + + $this->assertSame('d-flex', $generator->generate(['display' => 'flex'])); + } + + public function testPrefixIsAddedToTheClassNameButNotToTheConditions(): void + { + $generator = ClassNameGenerator::fromPandaConfig(['prefix' => 'pd'] + self::CONFIG); + + $classNames = $generator->generate(['display' => 'flex', '_hover' => ['color' => 'red']]); + + $this->assertSame('pd-d_flex hover:pd-c_red', $classNames); + } + + public function testTablesCanBeExportedAndReloaded(): void + { + $tables = ClassNameGenerator::fromPandaConfig(['prefix' => 'pd'] + self::CONFIG)->toArray(); + $reloaded = new ClassNameGenerator(...eval('return '.var_export($tables, true).';')); + + $classNames = $reloaded->generate(['display' => 'flex', '_hover' => ['color' => 'red'], 'p' => ['md' => 4]]); + + $this->assertSame('pd-d_flex hover:pd-c_red md:pd-p_4', $classNames); + } + + public function testHashedClassNamesAreNotSupported(): void + { + $this->expectException(UnsupportedStyleException::class); + + ClassNameGenerator::fromPandaConfig(['hash' => true] + self::CONFIG); + } +} diff --git a/src/Css/tests/Engine/ConditionsTest.php b/src/Css/tests/Engine/ConditionsTest.php new file mode 100644 index 00000000000..db5fdbf7161 --- /dev/null +++ b/src/Css/tests/Engine/ConditionsTest.php @@ -0,0 +1,64 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Breakpoints; +use Symfony\UX\Css\Engine\Conditions; + +final class ConditionsTest extends TestCase +{ + private Conditions $conditions; + + protected function setUp(): void + { + $this->conditions = new Conditions( + ['hover' => '&:is(:hover, [data-hover])', 'dark' => '[data-theme=dark] &'], + new Breakpoints(['sm' => '640px', 'md' => '768px']), + ['sm' => '24rem'], + ['sidebar'], + ['pastel' => []], + ); + } + + public static function provideKeys(): iterable + { + yield 'declared condition' => ['_hover', true]; + yield 'declared condition without underscore' => ['hover', false]; + yield 'breakpoint' => ['sm', true]; + yield 'breakpoint range' => ['smToMd', true]; + yield 'breakpoint down' => ['mdDown', true]; + yield 'container size' => ['@/sm', true]; + yield 'named container size' => ['@sidebar/sm', true]; + yield 'theme' => ['_themePastel', true]; + yield 'base' => ['base', true]; + yield 'arbitrary selector' => ['&:focus', true]; + yield 'arbitrary at-rule' => ['@media print', true]; + yield 'property' => ['color', false]; + } + + #[DataProvider('provideKeys')] + public function testIsCondition(string $key, bool $expected): void + { + $this->assertSame($expected, $this->conditions->isCondition($key)); + } + + public function testFinalizeStripsUnderscoresAndWrapsArbitraryConditions(): void + { + $keys = ['_hover', 'md', '&:focus', ' [dir=rtl] & ', '@media print', 'unknown']; + + $finalized = $this->conditions->finalize($keys); + + $this->assertSame(['hover', 'md', '[&:focus]', '[[dir=rtl]_&]', '[@media_print]', 'unknown'], $finalized); + } +} diff --git a/src/Css/tests/Engine/Css/OptimizerTest.php b/src/Css/tests/Engine/Css/OptimizerTest.php new file mode 100644 index 00000000000..92a0e91cd97 --- /dev/null +++ b/src/Css/tests/Engine/Css/OptimizerTest.php @@ -0,0 +1,128 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine\Css; + +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Css\AtRule; +use Symfony\UX\Css\Engine\Css\Declaration; +use Symfony\UX\Css\Engine\Css\Optimizer; +use Symfony\UX\Css\Engine\Css\Root; +use Symfony\UX\Css\Engine\Css\Rule; + +final class OptimizerTest extends TestCase +{ + public function testAnEmptyLayerPrintsNothing(): void + { + $root = self::root(); + + $css = new Optimizer()->toCss($root); + + $this->assertSame('', $css); + } + + public function testRulesWithIdenticalDeclarationsAreMergedLikePanda(): void + { + $root = self::root( + self::rule('.focus\:c_red:is(:focus, [data-focus])', ['color' => 'red']), + self::rule('.hover\:c_red:is(:hover, [data-hover])', ['color' => 'red']), + ); + + $css = new Optimizer()->toCss($root); + + $this->assertSame("@layer utilities {\n\n .focus\\:c_red:is(:focus, [data-focus]),.hover\\:c_red:is(:hover, [data-hover]) {\n color: red;\n}\n}", $css); + } + + public function testMediaQueriesWithTheSameParamsAreMerged(): void + { + $root = self::root( + self::rule('.c_red', ['color' => 'red']), + self::media('screen and (min-width: 48rem)', self::rule('.md\:bg_red', ['background' => 'red'])), + self::media('screen and (min-width: 48rem)', self::rule('.md\:c_red', ['color' => 'red'])), + ); + + $css = new Optimizer()->toCss($root); + + $this->assertSame("@layer utilities {\n .c_red {\n color: red;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:bg_red {\n background: red;\n}\n .md\\:c_red {\n color: red;\n}\n}\n}", $css); + } + + public function testMediaQueriesMoveAfterOtherNodesButSupportsDoesNot(): void + { + $root = self::root( + self::media('screen and (min-width: 48rem)', self::rule('.md\:c_green', ['color' => 'green'])), + self::rule('.bg_blue', ['background' => 'blue']), + new AtRule('supports', '(display: grid)', [self::rule('.supports', ['color' => 'red'])]), + ); + + $css = new Optimizer()->toCss($root); + + $this->assertSame("@layer utilities {\n .bg_blue {\n background: blue;\n}\n\n @supports (display: grid) {\n .supports {\n color: red;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:c_green {\n color: green;\n}\n}\n}", $css); + } + + public function testMediaQueriesAreSortedMobileFirst(): void + { + $root = self::root( + self::media('screen and (min-width: 64rem)', self::rule('.lg\:c_red', ['color' => 'red'])), + self::media('screen and (min-width: 40rem)', self::rule('.sm\:c_red', ['color' => 'blue'])), + ); + + $css = new Optimizer()->toCss($root); + + $this->assertSame("@layer utilities {\n @media screen and (min-width: 40rem) {\n .sm\\:c_red {\n color: blue;\n}\n}\n\n @media screen and (min-width: 64rem) {\n .lg\\:c_red {\n color: red;\n}\n}\n}", $css); + } + + public function testRulesWithSeveralDeclarationsKeepOneLinePerDeclaration(): void + { + $root = self::root( + self::rule('.sr_true', ['position' => 'absolute', 'width' => '1px']), + self::rule('.c_red', ['color' => 'red']), + ); + + $css = new Optimizer()->toCss($root); + + $this->assertSame("@layer utilities {\n .sr_true {\n position: absolute;\n width: 1px;\n}\n\n .c_red {\n color: red;\n}\n}", $css); + } + + public function testDuplicateRulesKeepTheLastOneLikePostcss(): void + { + $root = self::root( + self::rule('.c_red', ['color' => 'red']), + self::rule('.c_red', ['color' => 'red']), + ); + + $css = new Optimizer()->toCss($root); + + $this->assertSame("@layer utilities {\n\n .c_red {\n color: red;\n}\n}", $css); + } + + private static function root(Rule|AtRule ...$nodes): Root + { + return new Root([new AtRule('layer', 'utilities', $nodes)]); + } + + private static function media(string $params, Rule ...$rules): AtRule + { + return new AtRule('media', $params, $rules); + } + + /** + * @param array $declarations + */ + private static function rule(string $selector, array $declarations): Rule + { + $nodes = []; + foreach ($declarations as $property => $value) { + $nodes[] = new Declaration($property, $value); + } + + return new Rule($selector, $nodes); + } +} diff --git a/src/Css/tests/Engine/CssEscaperTest.php b/src/Css/tests/Engine/CssEscaperTest.php new file mode 100644 index 00000000000..11d2749b299 --- /dev/null +++ b/src/Css/tests/Engine/CssEscaperTest.php @@ -0,0 +1,63 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\CssEscaper; +use Symfony\UX\Css\Exception\InvalidArgumentException; + +final class CssEscaperTest extends TestCase +{ + public static function providePandaClassNames(): iterable + { + yield 'simple' => ['a0b', 'a0b']; + yield 'simple with underscore' => ['bg_red', 'bg_red']; + yield 'leading digit' => ['0a', '\30a']; + yield 'leading dash and digit' => ['-0a', '-\30a']; + yield 'breakpoint prefix' => ['2xl:bg_red', '\32xl\:bg_red']; + yield 'decimal' => ['m_0.5', 'm_0\.5']; + yield 'important' => ['m_0.5!', 'm_0\.5\!']; + yield 'invalid characters' => ['w:_$-1/2', 'w\:_\$-1\/2']; + yield 'css variable' => ['--a', '\--a']; + yield 'non ASCII kept' => ["\u{80}\x2D\x5F\u{A9}", "\u{80}-_\u{A9}"]; + yield 'space and bang' => ["\x20\x21\x78\x79", '\ \!xy']; + yield 'control characters' => ["\x01\x02\x1E\x1F", '\1\2\1e\1f']; + yield 'brackets' => ['decoration-[#ccc]', 'decoration-\[\#ccc\]']; + yield 'arbitrary at-rule' => ['[@media]:bg_red', '\[\@media\]\:bg_red']; + yield 'slash' => ['bg-red-500/50', 'bg-red-500\/50']; + yield 'arbitrary value' => ['p-[8px_4px]', 'p-\[8px_4px\]']; + yield 'fraction' => ['w_1/3', 'w_1\/3']; + yield 'url' => ["hover:bg-[url('https://github.com/img.png')]", "hover\\:bg-\\[url\\(\\'https\\:\\/\\/github\\.com\\/img\\.png\\'\\)\\]"]; + yield 'leading non ASCII digit' => ["\u{0663}xl:bg_red", "\u{0663}xl\\:bg_red"]; + yield 'leading fullwidth digit' => ["\u{FF11}a", "\u{FF11}a"]; + yield 'dash then non ASCII digit' => ["-\u{0663}a", "\\-\u{0663}a"]; + } + + #[DataProvider('providePandaClassNames')] + public function testEscapeMatchesPanda(string $className, string $expected): void + { + $this->assertSame($expected, CssEscaper::escape($className)); + } + + public function testCharactersOutsideTheBasicMultilingualPlaneAreKept(): void + { + $this->assertSame('c_👋', CssEscaper::escape('c_👋')); + } + + public function testInvalidUtf8IsRejected(): void + { + $this->expectException(InvalidArgumentException::class); + + CssEscaper::escape("c_\xFF"); + } +} diff --git a/src/Css/tests/Engine/PandaConfigTest.php b/src/Css/tests/Engine/PandaConfigTest.php new file mode 100644 index 00000000000..19a2e0fad31 --- /dev/null +++ b/src/Css/tests/Engine/PandaConfigTest.php @@ -0,0 +1,63 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\PandaConfig; + +final class PandaConfigTest extends TestCase +{ + public function testThePresetWithTheFixtureTokensAndConditionsIsTheFixtureConfig(): void + { + $json = file_get_contents(__DIR__.'/../Fixtures/Panda/configs/fixture.json'); + $fixture = json_decode($json, true, flags: \JSON_THROW_ON_ERROR); + $conditionNames = ['materialTheme', 'pastelTheme', 'dark', 'light']; + + $config = PandaConfig::create([ + 'conditions' => array_intersect_key($fixture['conditions'], array_flip($conditionNames)), + 'theme' => [ + 'tokens' => $fixture['theme']['tokens'], + 'semanticTokens' => $fixture['theme']['semanticTokens'], + ], + ]); + + $this->assertSame($fixture['utilities'], $config['utilities']); + $this->assertEqualsCanonicalizing($fixture['conditions'], $config['conditions']); + $this->assertSame($fixture['theme']['breakpoints'], $config['theme']['breakpoints']); + $this->assertSame($fixture['theme']['containerSizes'], $config['theme']['containerSizes']); + $this->assertSame($fixture['theme']['tokens'], $config['theme']['tokens']); + } + + public function testProjectConditionsAreAddedOrReplaceTheDefaultOnes(): void + { + $config = PandaConfig::create(['conditions' => ['dark' => '[data-theme=dark] &', 'print' => '@media print']]); + + $this->assertSame('[data-theme=dark] &', $config['conditions']['dark']); + $this->assertSame('@media print', $config['conditions']['print']); + $this->assertSame('&:is(:hover, [data-hover])', $config['conditions']['hover']); + } + + public function testProjectBreakpointsReplaceTheDefaultOnes(): void + { + $config = PandaConfig::create(['theme' => ['breakpoints' => ['tablet' => '48rem']]]); + + $this->assertSame(['tablet' => '48rem'], $config['theme']['breakpoints']); + $this->assertArrayHasKey('containerSizes', $config['theme']); + } + + public function testThereAreNoDefaultTokens(): void + { + $config = PandaConfig::create([]); + + $this->assertArrayNotHasKey('tokens', $config['theme']); + } +} diff --git a/src/Css/tests/Engine/PropertyNameTest.php b/src/Css/tests/Engine/PropertyNameTest.php new file mode 100644 index 00000000000..bf4cc6edc9a --- /dev/null +++ b/src/Css/tests/Engine/PropertyNameTest.php @@ -0,0 +1,34 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\PropertyName; + +final class PropertyNameTest extends TestCase +{ + public static function provideProperties(): iterable + { + yield 'lowercase' => ['color', 'color']; + yield 'camel case' => ['backgroundColor', 'background-color']; + yield 'vendor prefix' => ['WebkitTextFillColor', '-webkit-text-fill-color']; + yield 'microsoft prefix' => ['msOverflowStyle', '-ms-overflow-style']; + yield 'custom property' => ['--brandColor', '--brandColor']; + } + + #[DataProvider('provideProperties')] + public function testToCss(string $property, string $expected): void + { + $this->assertSame($expected, PropertyName::toCss($property)); + } +} diff --git a/src/Css/tests/Engine/StaticCssTest.php b/src/Css/tests/Engine/StaticCssTest.php new file mode 100644 index 00000000000..7810f976b5d --- /dev/null +++ b/src/Css/tests/Engine/StaticCssTest.php @@ -0,0 +1,29 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Engine; +use Symfony\UX\Css\Engine\StaticCss; + +final class StaticCssTest extends TestCase +{ + public function testTheWildcardOfAShorthandExpandsToTheValuesOfItsProperty(): void + { + $engine = Engine::fromProjectConfig(['theme' => ['tokens' => ['spacing' => ['sm' => ['value' => '0.5rem']]]]]); + $staticCss = new StaticCss($engine); + + $styles = $staticCss->styles([['properties' => ['p' => ['*']]]]); + + $this->assertSame([['p' => 'sm'], ['p' => '-sm']], $styles); + } +} diff --git a/src/Css/tests/Engine/StyleEncoderTest.php b/src/Css/tests/Engine/StyleEncoderTest.php new file mode 100644 index 00000000000..287a30fdda3 --- /dev/null +++ b/src/Css/tests/Engine/StyleEncoderTest.php @@ -0,0 +1,92 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Breakpoints; +use Symfony\UX\Css\Engine\Conditions; +use Symfony\UX\Css\Engine\StyleEncoder; +use Symfony\UX\Css\Engine\StyleEntry; +use Symfony\UX\Css\Engine\Utilities; +use Symfony\UX\Css\Exception\UnsupportedStyleException; + +final class StyleEncoderTest extends TestCase +{ + public static function providePandaEncoderCases(): iterable + { + yield 'flat' => [['display' => 'flex', 'whiteSpace' => 'nowrap'], [['display', 'flex', []], ['whiteSpace', 'nowrap', []]]]; + yield 'shorthand overrides its property' => [['width' => '50px', 'w' => '20px'], [['width', '20px', []]]]; + yield 'conditional value' => [['color' => ['base' => 'red', 'md' => 'blue']], [['color', 'red', []], ['color', 'blue', ['md']]]]; + yield 'nested conditions' => [['_hover' => ['color' => 'red', '_dark' => ['bg' => 'blue']]], [['color', 'red', ['_hover']], ['background', 'blue', ['_hover', '_dark']]]]; + yield 'breakpoint then conditions' => [['top' => ['sm' => ['_rtl' => '20px', '_hover' => '50px'], 'lg' => '120px']], [['top', '20px', ['sm', '_rtl']], ['top', '50px', ['sm', '_hover']], ['top', '120px', ['lg']]]]; + yield 'conditions then breakpoint' => [['ml' => ['_ltr' => ['sm' => '4'], '_rtl' => '-4']], [['marginLeft', '4', ['_ltr', 'sm']], ['marginLeft', '-4', ['_rtl']]]]; + yield 'responsive array' => [['width' => ['50px', null, '60px']], [['width', '50px', []], ['width', '60px', ['md']]]]; + yield 'null ignored' => [['color' => null, 'display' => 'flex'], [['display', 'flex', []]]]; + yield 'url ignored' => [['backgroundImage' => 'https://example.com/a.png', 'color' => 'red'], [['color', 'red', []]]]; + yield 'arbitrary selector and nested conditions' => [['& > p' => ['color' => 'red'], 'md' => ['_hover' => ['color' => 'blue']]], [['color', 'red', ['& > p']], ['color', 'blue', ['md', '_hover']]]]; + yield 'unknown nesting keeps the leaf property' => [['foo' => ['bar' => 'x']], [['bar', 'x', []]]]; + } + + /** + * @param list}> $expected + */ + #[DataProvider('providePandaEncoderCases')] + public function testEncodeMatchesPandaEncoder(array $styles, array $expected): void + { + $entries = self::encoder()->encode($styles); + $encoded = array_map( + static fn (StyleEntry $entry): array => [$entry->property, $entry->value, $entry->conditions], + $entries, + ); + + $this->assertSame($expected, $encoded); + } + + public function testIdenticalEntriesAreKeptOnce(): void + { + $styles = ['color' => ['base' => 'red', '_hover' => 'blue'], '_hover' => ['color' => 'blue']]; + + $entries = self::encoder()->encode($styles); + + $this->assertCount(2, $entries); + } + + public function testObjectsAreRejected(): void + { + $encoder = self::encoder(); + + $this->expectException(UnsupportedStyleException::class); + + $encoder->encode(['display' => new \stdClass()]); + } + + private static function encoder(): StyleEncoder + { + $utilities = new Utilities([ + 'width' => ['className' => 'w', 'shorthand' => 'w'], + 'background' => ['className' => 'bg', 'shorthand' => 'bg'], + 'marginLeft' => ['className' => 'ml', 'shorthand' => 'ml'], + ]); + $conditions = new Conditions( + [ + 'hover' => '&:is(:hover, [data-hover])', + 'dark' => '.dark &', + 'rtl' => '[dir=rtl] &', + 'ltr' => '[dir=ltr] &', + ], + new Breakpoints(['sm' => '640px', 'md' => '768px', 'lg' => '1024px']), + ); + + return new StyleEncoder($utilities, $conditions); + } +} diff --git a/src/Css/tests/Engine/StylesheetTest.php b/src/Css/tests/Engine/StylesheetTest.php new file mode 100644 index 00000000000..9ca0f68c4e3 --- /dev/null +++ b/src/Css/tests/Engine/StylesheetTest.php @@ -0,0 +1,128 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Breakpoints; +use Symfony\UX\Css\Engine\Conditions; +use Symfony\UX\Css\Engine\Css\Declaration; +use Symfony\UX\Css\Engine\Css\Rule; +use Symfony\UX\Css\Engine\StyleDecoder; +use Symfony\UX\Css\Engine\StyleEncoder; +use Symfony\UX\Css\Engine\Stylesheet; +use Symfony\UX\Css\Engine\Tokens; +use Symfony\UX\Css\Engine\Utilities; +use Symfony\UX\Css\Exception\InvalidArgumentException; + +final class StylesheetTest extends TestCase +{ + public static function providePandaCss(): iterable + { + yield 'nothing' => [[], '']; + yield 'merged selectors' => [['_hover' => ['color' => 'red'], '_focus' => ['color' => 'red']], "@layer utilities {\n\n .focus\\:c_red:is(:focus, [data-focus]),.hover\\:c_red:is(:hover, [data-hover]) {\n color: red;\n}\n}"]; + yield 'merged media queries' => [['color' => ['base' => 'red', 'md' => 'red'], 'bg' => ['md' => 'red']], "@layer utilities {\n .c_red {\n color: red;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:bg_red {\n background: red;\n}\n .md\\:c_red {\n color: red;\n}\n}\n}"]; + yield 'supports before media' => [['@supports (display: grid)' => ['color' => 'red'], 'bg' => 'blue', 'md' => ['color' => 'green']], "@layer utilities {\n .bg_blue {\n background: blue;\n}\n\n @supports (display: grid) {\n .\\[\\@supports_\\(display\\:_grid\\)\\]\\:c_red {\n color: red;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:c_green {\n color: green;\n}\n}\n}"]; + yield 'conditions sorted by pseudo class' => [['color' => 'red', '_hover' => ['color' => 'blue', 'bg' => 'green']], "@layer utilities {\n .c_red {\n color: red;\n}\n\n .hover\\:bg_green:is(:hover, [data-hover]) {\n background: green;\n}\n\n .hover\\:c_blue:is(:hover, [data-hover]) {\n color: blue;\n}\n}"]; + yield 'nested at-rules' => [['@supports (display: grid)' => ['md' => ['color' => 'red']]], "@layer utilities {\n @supports (display: grid) {\n @media screen and (min-width: 48rem) {\n .\\[\\@supports_\\(display\\:_grid\\)\\]\\:md\\:c_red {\n color: red;\n}\n}\n}\n}"]; + yield 'numbers get px' => [['width' => 42, 'opacity' => 1, 'zIndex' => 0], "@layer utilities {\n .op_1 {\n opacity: 1;\n}\n\n .z_0 {\n z-index: 0;\n}\n\n .w_42 {\n width: 42px;\n}\n}"]; + } + + public function testBreakpointAtRulesBecomeMediaQueries(): void + { + $breakpoints = new Breakpoints(['sm' => '640px', 'md' => '768px']); + $utilities = new Utilities( + ['hideFrom' => ['className' => 'hide', 'transform' => ['__function' => 'transform']]], + '_', + null, + ['hideFrom' => static fn (string $value): array => ['@breakpoint '.$value => ['display' => 'none']]], + ); + $conditions = new Conditions([], $breakpoints); + $entries = new StyleEncoder($utilities, $conditions)->encode(['hideFrom' => 'md']); + $decoder = new StyleDecoder($utilities, $conditions); + + $css = new Stylesheet($breakpoints)->render($decoder->decode($entries)); + + $this->assertSame("@layer utilities {\n @media screen and (min-width: 48rem) {\n .hide_md {\n display: none;\n}\n}\n}", $css); + } + + public function testTheTokensLayerComesBeforeTheUtilitiesLayer(): void + { + $utilities = new Utilities(['color' => ['className' => 'c']]); + $conditions = new Conditions([], new Breakpoints([])); + $tokens = [new Rule(':where(html)', [new Declaration('--colors-red', '#f00')])]; + $entries = new StyleEncoder($utilities, $conditions)->encode(['color' => 'red']); + $decoder = new StyleDecoder($utilities, $conditions); + $stylesheet = new Stylesheet(); + + $css = $stylesheet->render($decoder->decode($entries), $tokens); + $cssWithoutUtilities = $stylesheet->render([], $tokens); + + $this->assertSame("@layer tokens {\n :where(html) {\n --colors-red: #f00;\n}\n}\n\n@layer utilities {\n .c_red {\n color: red;\n}\n}", $css); + $this->assertSame("@layer tokens {\n :where(html) {\n --colors-red: #f00;\n}\n}", $cssWithoutUtilities); + } + + public function testTokensAreResolvedInAtRules(): void + { + $tokens = new Tokens(['sizes' => ['sm' => ['value' => '24rem']]]); + $utilities = new Utilities(['color' => ['className' => 'c']], '_', $tokens); + $conditions = new Conditions([], new Breakpoints([])); + $styles = ['@media (min-width: token(sizes.sm))' => ['color' => 'red']]; + $entries = new StyleEncoder($utilities, $conditions)->encode($styles); + $decoder = new StyleDecoder($utilities, $conditions); + + $css = new Stylesheet()->render($decoder->decode($entries)); + + $this->assertSame("@layer utilities {\n @media (min-width: 24rem) {\n .\\[\\@media_\\(min-width\\:_token\\(sizes\\.sm\\)\\)\\]\\:c_red {\n color: red;\n}\n}\n}", $css); + } + + public function testUnknownBreakpointAtRuleIsRejected(): void + { + $breakpoints = new Breakpoints(['sm' => '640px']); + $utilities = new Utilities( + ['hideFrom' => ['className' => 'hide', 'transform' => ['__function' => 'transform']]], + '_', + null, + ['hideFrom' => static fn (string $value): array => ['@breakpoint '.$value => ['display' => 'none']]], + ); + $conditions = new Conditions([], $breakpoints); + $entries = new StyleEncoder($utilities, $conditions)->encode(['hideFrom' => 'xl']); + $decoder = new StyleDecoder($utilities, $conditions); + + $this->expectException(InvalidArgumentException::class); + $this->expectExceptionMessage('No "xl" breakpoint found.'); + + new Stylesheet($breakpoints)->render($decoder->decode($entries)); + } + + #[DataProvider('providePandaCss')] + public function testRenderMatchesPanda(array $styles, string $expected): void + { + $utilities = new Utilities([ + 'color' => ['className' => 'c'], + 'background' => ['className' => 'bg', 'shorthand' => 'bg'], + 'width' => ['className' => 'w', 'shorthand' => 'w'], + 'opacity' => ['className' => 'op'], + 'zIndex' => ['className' => 'z'], + ]); + $conditions = new Conditions( + ['hover' => '&:is(:hover, [data-hover])', 'focus' => '&:is(:focus, [data-focus])'], + new Breakpoints(['sm' => '640px', 'md' => '768px', 'lg' => '1024px']), + ); + $entries = new StyleEncoder($utilities, $conditions)->encode($styles); + $decoder = new StyleDecoder($utilities, $conditions); + + $css = new Stylesheet()->render($decoder->decode($entries)); + + $this->assertSame($expected, $css); + } +} diff --git a/src/Css/tests/Engine/TokensTest.php b/src/Css/tests/Engine/TokensTest.php new file mode 100644 index 00000000000..41613c94313 --- /dev/null +++ b/src/Css/tests/Engine/TokensTest.php @@ -0,0 +1,351 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Tokens; +use Symfony\UX\Css\Exception\InvalidArgumentException; +use Symfony\UX\Css\Exception\UnsupportedStyleException; + +final class TokensTest extends TestCase +{ + public static function provideVars(): iterable + { + yield 'nested token' => ['colors.red.300', 'var(--pd-colors-red-300)']; + yield 'DEFAULT is dropped from the name' => ['colors.red', 'var(--pd-colors-red)']; + yield 'camel case becomes dash case' => ['colors.fooBar', 'var(--pd-colors-foo-bar)']; + yield 'dots are escaped' => ['spacing.1.5', 'var(--pd-spacing-1\.5)']; + yield 'semantic token' => ['colors.primary', 'var(--pd-colors-primary)']; + yield 'negative spacing' => ['spacing.-4', 'calc(var(--pd-spacing-4) * -1)']; + yield 'negative semantic spacing' => ['spacing.-gutter', 'calc(var(--pd-spacing-gutter) * -1)']; + yield 'breakpoint' => ['breakpoints.md', 'var(--pd-breakpoints-md)']; + yield 'breakpoint size' => ['sizes.breakpoint-sm', 'var(--pd-sizes-breakpoint-sm)']; + yield 'virtual color palette' => ['colors.colorPalette.300', 'var(--pd-colors-color-palette-300)']; + yield 'no negative zero' => ['spacing.-0', null]; + yield 'empty token' => ['empty.gone', null]; + yield 'unknown token' => ['colors.nope', null]; + } + + #[DataProvider('provideVars')] + public function testGetVar(string $name, ?string $expected): void + { + $tokens = self::createTokens(); + + $this->assertSame($expected, $tokens->getVar($name)); + } + + public function testGetCategoryValues(): void + { + $tokens = self::createTokens(); + + $this->assertSame([ + '0' => 'var(--pd-spacing-0)', + '4' => 'var(--pd-spacing-4)', + '1.5' => 'var(--pd-spacing-1\.5)', + 'px' => 'var(--pd-spacing-px)', + 'gutter' => 'var(--pd-spacing-gutter)', + '-4' => 'calc(var(--pd-spacing-4) * -1)', + '-1.5' => 'calc(var(--pd-spacing-1\.5) * -1)', + '-px' => 'calc(var(--pd-spacing-px) * -1)', + '-gutter' => 'calc(var(--pd-spacing-gutter) * -1)', + ], $tokens->getCategoryValues('spacing')); + $this->assertSame([ + 'red.300' => 'var(--pd-colors-red-300)', + 'red' => 'var(--pd-colors-red)', + 'fooBar' => 'var(--pd-colors-foo-bar)', + 'ghost' => 'var(--pd-colors-ghost)', + 'alias' => 'var(--pd-colors-alias)', + 'primary' => 'var(--pd-colors-primary)', + 'text' => 'var(--pd-colors-text)', + 'mixed' => 'var(--pd-colors-mixed)', + 'colorPalette.300' => 'var(--pd-colors-color-palette-300)', + 'colorPalette' => 'var(--pd-colors-color-palette)', + ], $tokens->getCategoryValues('colors')); + $this->assertNull($tokens->getCategoryValues('nope')); + } + + public static function provideValues(): iterable + { + yield 'plain value' => ['colors.red.300', '#f00']; + yield 'number' => ['opacity.half', 0.5]; + yield 'font list' => ['fonts.sans', 'Inter, sans-serif']; + yield 'easing list' => ['easings.snappy', 'cubic-bezier(0.4, 0, 0.2, 1)']; + yield 'composite shadow' => ['shadows.sm', '0px 1px 2px 0px black']; + yield 'shadow list' => ['shadows.many', '0 1px red, inset 1px 2px 3px 4px blue']; + yield 'composite border with a reference' => ['borders.thin', '1px solid var(--pd-colors-red-300)']; + yield 'gradient' => ['gradients.sunset', 'linear-gradient(to right, red, blue)']; + yield 'gradient with positions' => ['gradients.stops', 'radial-gradient(circle, red 0px, blue 100px)']; + yield 'url asset' => ['assets.logo', 'url("/logo.svg")']; + yield 'color mixed in a token' => ['colors.ghost', 'color-mix(in srgb, var(--pd-colors-red-300) 50%, transparent)']; + yield 'reference' => ['colors.alias', 'var(--pd-colors-red-300)']; + yield 'semantic token keeps its last condition' => ['colors.primary', 'var(--pd-colors-foo-bar)']; + yield 'semantic token with one value' => ['colors.text', 'var(--pd-colors-red-300)']; + yield 'semantic color mix' => ['colors.mixed', 'color-mix(in srgb, var(--pd-colors-red-300) 50%, transparent)']; + yield 'negative spacing' => ['spacing.-px', 'calc(var(--pd-spacing-px) * -1)']; + yield 'virtual token' => ['colors.colorPalette.300', 'colors.colorPalette.300']; + yield 'empty token' => ['empty.gone', '']; + yield 'unknown token' => ['colors.nope', null]; + } + + #[DataProvider('provideValues')] + public function testGetValue(string $name, string|int|float|null $expected): void + { + $tokens = self::createTokens(); + + $this->assertSame($expected, $tokens->getValue($name)); + } + + public static function provideSvgAssets(): iterable + { + yield 'panda example' => ['', 'url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 16 16\'%3e%3cpath stroke=\'white\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M4 8h8\'/%3e%3c/svg%3e")']; + yield 'byte order mark, whitespace and color names' => ["\u{FEFF}\n ", 'url("data:image/svg+xml,%3csvg fill=\'red\' stroke=\'white\'%3e %3cpath d=\'M0 0\'/%3e %3c/svg%3e")']; + yield 'characters left as is by encodeURIComponent' => ['héllo (1) & *ok* ~!', 'url("data:image/svg+xml,%3csvg%3e%3ctext%3eh%c3%a9llo (1) %26 *ok* ~!%3c/text%3e%3crect fill=\'black\' stroke=\'%230fff0\'/%3e%3c/svg%3e")']; + yield 'first matching color name' => ['', 'url("data:image/svg+xml,%3csvg fill=\'aqua\' a=\'lime\' b=\'%23ffffff1\'/%3e")']; + } + + #[DataProvider('provideSvgAssets')] + public function testSvgAssetsBecomeDataUris(string $svg, string $expected): void + { + $tokens = new Tokens(['assets' => ['icon' => ['value' => ['type' => 'svg', 'value' => $svg]]]]); + + $this->assertSame($expected, $tokens->getValue('assets.icon')); + } + + public function testGetVars(): void + { + $vars = self::createTokens()->getVars(); + + $this->assertSame(['base', '_dark', 'lg'], array_keys($vars)); + $this->assertSame(['--pd-colors-primary' => 'var(--pd-colors-foo-bar)'], $vars['_dark']); + $this->assertSame(['--pd-spacing-gutter' => 'var(--pd-spacing-px)'], $vars['lg']); + $this->assertSame([ + '--pd-colors-red-300' => '#f00', + '--pd-colors-red' => 'red', + '--pd-colors-foo-bar' => 'blue', + '--pd-colors-ghost' => 'color-mix(in srgb, var(--pd-colors-red-300) 50%, transparent)', + '--pd-colors-alias' => 'var(--pd-colors-red-300)', + '--pd-spacing-0' => '0rem', + '--pd-spacing-4' => '1rem', + '--pd-spacing-1\.5' => '0.375rem', + '--pd-spacing-px' => '1px', + '--pd-opacity-half' => 0.5, + '--pd-opacity-seven' => 0.07, + '--pd-fonts-sans' => 'Inter, sans-serif', + '--pd-easings-snappy' => 'cubic-bezier(0.4, 0, 0.2, 1)', + '--pd-shadows-sm' => '0px 1px 2px 0px black', + '--pd-shadows-many' => '0 1px red, inset 1px 2px 3px 4px blue', + '--pd-borders-thin' => '1px solid var(--pd-colors-red-300)', + '--pd-gradients-sunset' => 'linear-gradient(to right, red, blue)', + '--pd-gradients-stops' => 'radial-gradient(circle, red 0px, blue 100px)', + '--pd-sizes-sm' => '24rem', + '--pd-sizes-breakpoint-sm' => '640px', + '--pd-sizes-breakpoint-md' => '768px', + '--pd-assets-logo' => 'url("/logo.svg")', + '--pd-breakpoints-sm' => '640px', + '--pd-breakpoints-md' => '768px', + '--pd-colors-primary' => 'var(--pd-colors-red-300)', + '--pd-colors-text' => 'var(--pd-colors-red-300)', + '--pd-colors-mixed' => 'color-mix(in srgb, var(--pd-colors-red-300) 50%, transparent)', + '--pd-spacing-gutter' => 'var(--pd-spacing-4)', + ], $vars['base']); + } + + public function testConditionsOfAColorMixedSemanticTokenAreKept(): void + { + $tokens = new Tokens( + ['colors' => ['red' => ['value' => '#f00'], 'blue' => ['value' => '#00f']]], + ['colors' => ['overlay' => ['value' => ['base' => '{colors.red/50}', '_dark' => '{colors.blue}']]]], + ); + + $this->assertSame(['--colors-overlay' => 'var(--colors-blue)'], $tokens->getVars()['_dark']); + } + + public function testHas(): void + { + $tokens = self::createTokens(); + + $this->assertTrue($tokens->has('breakpoints.sm')); + $this->assertTrue($tokens->has('empty.gone')); + $this->assertFalse($tokens->has('breakpoints.xl')); + } + + public function testGetColorPalette(): void + { + $tokens = self::createTokens(); + + $this->assertSame([ + '--pd-colors-color-palette-300' => 'var(--pd-colors-red-300)', + '--pd-colors-color-palette' => 'var(--pd-colors-red)', + ], $tokens->getColorPalette('red')); + $this->assertSame([ + '--pd-colors-color-palette' => 'var(--pd-colors-foo-bar)', + ], $tokens->getColorPalette('fooBar')); + $this->assertSame( + ['red', 'fooBar', 'ghost', 'alias', 'primary', 'text', 'mixed'], + $tokens->getColorPaletteNames(), + ); + $this->assertNull($tokens->getColorPalette('nope')); + } + + public static function provideReferences(): iterable + { + yield 'curly reference' => ['{colors.red.300}', 'var(--pd-colors-red-300)']; + yield 'token function' => ['token(colors.red.300)', 'var(--pd-colors-red-300)']; + yield 'missing token with a fallback' => ['token(colors.nope, blue)', 'blue']; + yield 'nested fallback' => ['token(colors.red.300, token(colors.fooBar, red))', 'var(--pd-colors-red-300, var(--pd-colors-foo-bar, red))']; + yield 'reference inside a value' => ['1px solid {colors.red.300}', '1px solid var(--pd-colors-red-300)']; + yield 'missing token is escaped' => ['token(spacing.4) token(spacing.nope)', 'var(--pd-spacing-4) spacing\.nope']; + yield 'color mix with an opacity token' => ['token(colors.red.300/half)', 'color-mix(in srgb, var(--pd-colors-red-300) 50%, transparent)']; + yield 'color mix with a percentage' => ['{colors.red.300/40}', 'color-mix(in srgb, var(--pd-colors-red-300) 40%, transparent)']; + yield 'no reference' => ['a.b', 'a.b']; + yield 'css variable fallback' => ['token(colors.red.300, var(--x, var(--y, red)))', 'var(--pd-colors-red-300, var(--x, var(--y, red)))']; + } + + #[DataProvider('provideReferences')] + public function testExpandReferences(string $value, string $expected): void + { + $tokens = self::createTokens(); + + $this->assertSame($expected, $tokens->expandReferences($value)); + } + + public static function provideResolvedReferences(): iterable + { + yield 'curly reference' => ['{sizes.sm}', '24rem']; + yield 'token function' => ['token(spacing.4)', '1rem']; + yield 'missing token with a fallback' => ['token(spacing.nope, 2px)', 'var(spacing\.nope, \32px)']; + yield 'inside a media query' => ['(min-width: token(breakpoints.md))', '(min-width: 768px)']; + yield 'number' => ['{opacity.half}', '0.5']; + yield 'missing token is escaped' => ['{nope.x} and {colors.red.300}', 'nope\.x and #f00']; + yield 'reference to a reference' => ['token(colors.alias, red)', 'var(--pd-colors-red-300, red)']; + yield 'no reference' => ['no ref', 'no ref']; + } + + #[DataProvider('provideResolvedReferences')] + public function testResolveReferences(string $value, string $expected): void + { + $tokens = self::createTokens(); + + $this->assertSame($expected, $tokens->resolveReferences($value)); + } + + public function testExpandReferencesRejectsInvalidColorMix(): void + { + $tokens = self::createTokens(); + + $this->expectException(InvalidArgumentException::class); + $this->expectExceptionMessage('Invalid color mix at colors.red.300/abc: colors.red.300'); + + $tokens->expandReferences('{colors.red.300/abc}'); + } + + public static function provideColorMixes(): iterable + { + yield 'opacity token' => ['red.300/half', ['invalid' => false, 'color' => 'var(--pd-colors-red-300)', 'value' => 'color-mix(in srgb, var(--pd-colors-red-300) 50%, transparent)']]; + yield 'float opacity token' => ['red.300/seven', ['invalid' => false, 'color' => 'var(--pd-colors-red-300)', 'value' => 'color-mix(in srgb, var(--pd-colors-red-300) 7.000000000000001%, transparent)']]; + yield 'percentage' => ['red.300/40', ['invalid' => false, 'color' => 'var(--pd-colors-red-300)', 'value' => 'color-mix(in srgb, var(--pd-colors-red-300) 40%, transparent)']]; + yield 'decimal percentage' => ['fooBar/12.5', ['invalid' => false, 'color' => 'var(--pd-colors-foo-bar)', 'value' => 'color-mix(in srgb, var(--pd-colors-foo-bar) 12.5%, transparent)']]; + yield 'zero' => ['red.300/0', ['invalid' => false, 'color' => 'var(--pd-colors-red-300)', 'value' => 'color-mix(in srgb, var(--pd-colors-red-300) 0%, transparent)']]; + yield 'unknown color' => ['nope/50', ['invalid' => false, 'color' => 'nope', 'value' => 'color-mix(in srgb, nope 50%, transparent)']]; + yield 'no opacity' => ['red.300', ['invalid' => true, 'value' => 'red.300']]; + yield 'invalid opacity' => ['red.300/abc', ['invalid' => true, 'value' => 'red.300']]; + yield 'no color' => ['/50', ['invalid' => true, 'value' => '']]; + } + + #[DataProvider('provideColorMixes')] + public function testColorMix(string $value, array $expected): void + { + $tokens = self::createTokens(); + + $this->assertSame($expected, $tokens->colorMix($value)); + } + + public function testWithoutPrefix(): void + { + $tokens = new Tokens(['colors' => ['red' => ['value' => 'red']]]); + + $this->assertSame('var(--colors-red)', $tokens->getVar('colors.red')); + } + + public function testTokensReferencingEachOtherAreRejected(): void + { + $this->expectException(InvalidArgumentException::class); + $this->expectExceptionMessage('The "colors.a" token references itself.'); + + new Tokens(['colors' => ['a' => ['value' => '{colors.b}'], 'b' => ['value' => '{colors.a}']]]); + } + + public function testHashedVariablesAreNotSupported(): void + { + $this->expectException(UnsupportedStyleException::class); + + new Tokens(hash: true); + } + + private static function createTokens(): Tokens + { + $tokens = [ + 'colors' => [ + 'red' => ['300' => ['value' => '#f00'], 'DEFAULT' => ['value' => 'red']], + 'fooBar' => ['value' => 'blue'], + 'ghost' => ['value' => '{colors.red.300/50}'], + 'alias' => ['value' => '{colors.red.300}'], + ], + 'spacing' => [ + '0' => ['value' => '0rem'], + '4' => ['value' => '1rem'], + '1.5' => ['value' => '0.375rem'], + 'px' => ['value' => '1px'], + ], + 'opacity' => ['half' => ['value' => 0.5], 'seven' => ['value' => 0.07]], + 'fonts' => ['sans' => ['value' => ['Inter', 'sans-serif']]], + 'easings' => ['snappy' => ['value' => [0.4, 0, 0.2, 1]]], + 'shadows' => [ + 'sm' => ['value' => ['offsetX' => 0, 'offsetY' => 1, 'blur' => 2, 'spread' => 0, 'color' => 'black']], + 'many' => ['value' => [ + '0 1px red', + [ + 'offsetX' => 1, + 'offsetY' => 2, + 'blur' => 3, + 'spread' => '4px', + 'color' => 'blue', + 'inset' => true, + ], + ]], + ], + 'borders' => ['thin' => ['value' => ['width' => 1, 'style' => 'solid', 'color' => '{colors.red.300}']]], + 'gradients' => [ + 'sunset' => ['value' => ['type' => 'linear', 'placement' => 'to right', 'stops' => ['red', 'blue']]], + 'stops' => ['value' => [ + 'type' => 'radial', + 'placement' => 'circle', + 'stops' => [['color' => 'red', 'position' => 0], ['color' => 'blue', 'position' => 100]], + ]], + ], + 'sizes' => ['sm' => ['value' => '24rem']], + 'assets' => ['logo' => ['value' => ['type' => 'url', 'value' => '/logo.svg']]], + 'empty' => ['gone' => ['value' => '']], + ]; + $semanticTokens = [ + 'colors' => [ + 'primary' => ['value' => ['base' => '{colors.red.300}', '_dark' => '{colors.fooBar}']], + 'text' => ['value' => '{colors.red.300}'], + 'mixed' => ['value' => '{colors.red.300/half}'], + ], + 'spacing' => ['gutter' => ['value' => ['base' => '{spacing.4}', 'lg' => '{spacing.px}']]], + ]; + + return new Tokens($tokens, $semanticTokens, ['sm' => '640px', 'md' => '768px'], 'pd'); + } +} diff --git a/src/Css/tests/Engine/UtilitiesTest.php b/src/Css/tests/Engine/UtilitiesTest.php new file mode 100644 index 00000000000..00ddf3a09a9 --- /dev/null +++ b/src/Css/tests/Engine/UtilitiesTest.php @@ -0,0 +1,121 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Engine; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Tokens; +use Symfony\UX\Css\Engine\TransformArgs; +use Symfony\UX\Css\Engine\Utilities; +use Symfony\UX\Css\Exception\UnsupportedStyleException; + +final class UtilitiesTest extends TestCase +{ + private Utilities $utilities; + + protected function setUp(): void + { + $this->utilities = new Utilities([ + 'display' => ['className' => 'd'], + 'background' => ['className' => 'bg', 'shorthand' => 'bg', 'values' => 'colors'], + 'insetInlineEnd' => ['className' => 'inset-e', 'shorthand' => ['insetEnd', 'end']], + 'srOnly' => ['className' => 'sr', 'transform' => ['__function' => 'transform']], + ]); + } + + public function testShorthandsResolveToTheirProperty(): void + { + $this->assertSame('background', $this->utilities->resolveShorthand('bg')); + $this->assertSame('insetInlineEnd', $this->utilities->resolveShorthand('insetEnd')); + $this->assertSame('insetInlineEnd', $this->utilities->resolveShorthand('end')); + $this->assertSame('color', $this->utilities->resolveShorthand('color')); + } + + public function testClassNameComesFromTheUtility(): void + { + $this->assertSame('d', $this->utilities->getClassName('display')); + $this->assertSame('bg', $this->utilities->getClassName('bg')); + $this->assertSame('inset-e', $this->utilities->getClassName('end')); + } + + public function testClassNameFallsBackToTheHyphenatedProperty(): void + { + $this->assertSame('white-space', $this->utilities->getClassName('whiteSpace')); + } + + public static function provideTransforms(): iterable + { + yield 'token category' => ['p', 4, ['className' => 'p_4', 'styles' => ['padding' => 'var(--spacing-4)']]]; + yield 'negative token' => ['p', '-4', ['className' => 'p_-4', 'styles' => ['padding' => 'calc(var(--spacing-4) * -1)']]]; + yield 'unknown value' => ['p', '10px', ['className' => 'p_10px', 'styles' => ['padding' => '10px']]]; + yield 'spaces become underscores' => ['p', '1px 2px', ['className' => 'p_1px__2px', 'styles' => ['padding' => '1px 2px']]]; + yield 'reference' => ['p', '{spacing.4}', ['className' => 'p_{spacing.4}', 'styles' => ['padding' => 'var(--spacing-4)']]]; + yield 'arbitrary value' => ['p', '[4]', ['className' => 'p_[4]', 'styles' => ['padding' => 'var(--spacing-4)']]]; + yield 'function values' => ['margin', 'auto', ['className' => 'm_auto', 'styles' => ['margin' => 'auto']]]; + yield 'function values with a token' => ['margin', '4', ['className' => 'm_4', 'styles' => ['margin' => 'var(--spacing-4)']]]; + yield 'object values' => ['fontSmoothing', 'subpixel-antialiased', ['className' => 'font-smoothing_subpixel-antialiased', 'styles' => ['fontSmoothing' => 'auto']]]; + yield 'color mix' => ['bg', 'red.300/40', ['className' => 'bg_red.300/40', 'styles' => ['--mix-background' => 'color-mix(in srgb, var(--colors-red-300) 40%, transparent)', 'background' => 'var(--mix-background, var(--colors-red-300))']]]; + yield 'color token without mix' => ['bg', 'red.300', ['className' => 'bg_red.300', 'styles' => ['background' => 'var(--colors-red-300)']]]; + yield 'custom transform' => ['srOnly', true, ['className' => 'sr_true', 'styles' => ['position' => 'absolute']]]; + yield 'css variable resolves tokens' => ['--size', 'spacing.4', ['className' => '--size_spacing.4', 'styles' => ['--size' => 'var(--spacing-4)']]]; + yield 'color palette' => ['colorPalette', 'red', ['className' => 'color-palette_red', 'styles' => ['--colors-color-palette-300' => 'var(--colors-red-300)']]]; + yield 'layer' => ['display', 'flex', ['className' => 'd_flex', 'styles' => ['display' => 'flex'], 'layer' => 'base']]; + } + + #[DataProvider('provideTransforms')] + public function testTransform(string $property, string|int|float|bool $value, array $expected): void + { + $tokens = new Tokens([ + 'spacing' => ['4' => ['value' => '1rem']], + 'colors' => ['red' => ['300' => ['value' => '#f00']]], + ]); + $config = [ + 'display' => ['className' => 'd', 'layer' => 'base'], + 'padding' => ['className' => 'p', 'shorthand' => 'p', 'values' => 'spacing'], + 'margin' => [ + 'className' => 'm', + 'values' => [ + '__function' => 'values', + 'probe' => ['auto' => 'auto', '__category:spacing' => 'spacing'], + ], + ], + 'fontSmoothing' => ['values' => ['antialiased' => 'antialiased', 'subpixel-antialiased' => 'auto']], + 'background' => [ + 'className' => 'bg', + 'shorthand' => 'bg', + 'values' => 'colors', + 'transform' => ['__function' => 'transform', 'colorMix' => 'background'], + ], + 'srOnly' => [ + 'className' => 'sr', + 'values' => ['type' => 'boolean'], + 'transform' => ['__function' => 'transform'], + ], + ]; + $transforms = [ + 'srOnly' => static fn (bool $value, TransformArgs $args): array => [ + 'position' => $value ? 'absolute' : 'static', + ], + ]; + $utilities = new Utilities($config, '_', $tokens, $transforms); + + $this->assertSame($expected, $utilities->transform($property, $value)); + } + + public function testTransformWithoutImplementationIsUnsupported(): void + { + $this->expectException(UnsupportedStyleException::class); + $this->expectExceptionMessage('The "srOnly" utility relies on a transform, which is not supported yet.'); + + $this->utilities->transform('srOnly', true); + } +} diff --git a/src/Css/tests/Fixtures/Panda/PANDA_COMMIT b/src/Css/tests/Fixtures/Panda/PANDA_COMMIT new file mode 100644 index 00000000000..1a6c085ec1f --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/PANDA_COMMIT @@ -0,0 +1 @@ +e917ab86b1b2285640ccd73550f8857973737c89 diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.atomic-rule.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.atomic-rule.test.ts.json new file mode 100644 index 00000000000..d4b783e3443 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.atomic-rule.test.ts.json @@ -0,0 +1,795 @@ +{ + "source": "packages/core/__tests__/atomic-rule.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > respect color mode::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > respect color mode", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "color": { + "_light": "red", + "_dark": "green" + }, + "opacity": { + "_dark": "slate400" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "light\\:c_red", + "dark\\:c_green", + "dark\\:op_slate400" + ], + "css": "@layer utilities {\n [data-theme=light] .light\\:c_red,.light .light\\:c_red,.light\\:c_red.light,.light\\:c_red[data-theme=light] {\n color: red;\n}\n\n [data-theme=dark] .dark\\:c_green,.dark .dark\\:c_green,.dark\\:c_green.dark,.dark\\:c_green[data-theme=dark] {\n color: green;\n}\n\n [data-theme=dark] .dark\\:op_slate400,.dark .dark\\:op_slate400,.dark\\:op_slate400.dark,.dark\\:op_slate400[data-theme=dark] {\n opacity: slate400;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > respect important syntax::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > respect important syntax", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "color": "red !important", + "fontSize": "30px!" + } + ], + "options": null, + "expected": { + "classNames": [ + "c_red", + "fs_30px" + ], + "css": "@layer utilities {\n .c_red\\! {\n color: red !important;\n}\n\n .fs_30px\\! {\n font-size: 30px !important;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should resolve responsive array with gaps::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should resolve responsive array with gaps", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "width": [ + "50px", + null, + "60px" + ] + } + ], + "options": null, + "expected": { + "classNames": [ + "w_50px", + "md\\:w_60px" + ], + "css": "@layer utilities {\n .w_50px {\n width: 50px;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:w_60px {\n width: 60px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should resolve responsive array::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should resolve responsive array", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "width": [ + "50px", + "60px" + ] + } + ], + "options": null, + "expected": { + "classNames": [ + "w_50px", + "sm\\:w_60px" + ], + "css": "@layer utilities {\n .w_50px {\n width: 50px;\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:w_60px {\n width: 60px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should resolve shorthand::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should resolve shorthand", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "width": "50px", + "w": "20px" + } + ], + "options": null, + "expected": { + "classNames": [ + "w_20px" + ], + "css": "@layer utilities {\n .w_20px {\n width: 20px;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should resolve shorthand::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should resolve shorthand", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "width": { + "base": "50px", + "md": "60px" + }, + "w": "70px" + } + ], + "options": null, + "expected": { + "classNames": [ + "w_70px" + ], + "css": "@layer utilities {\n .w_70px {\n width: 70px;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should skip `_` notation::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should skip `_` notation", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "left": { + "base": "20px", + "md": "40px" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "left_20px", + "md\\:left_40px" + ], + "css": "@layer utilities {\n .left_20px {\n left: 20px;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:left_40px {\n left: 40px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should work with basic::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should work with basic", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "bg": "red.300" + } + ], + "options": null, + "expected": { + "classNames": [ + "bg_red\\.300" + ], + "css": "@layer utilities {\n .bg_red\\.300 {\n background: var(--colors-red-300);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should work with inner responsive::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should work with inner responsive", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "ml": { + "_ltr": { + "sm": "4" + }, + "_rtl": "-4" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "rtl\\:ml_-4", + "ltr\\:sm\\:ml_4" + ], + "css": "@layer utilities {\n :where([dir=rtl], :dir(rtl)) .rtl\\:ml_-4 {\n margin-left: calc(var(--spacing-4) * -1);\n}\n\n @media screen and (min-width: 40rem) {\n :where([dir=ltr], :dir(ltr)) .ltr\\:sm\\:ml_4 {\n margin-left: var(--spacing-4);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should work with negative tokens::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should work with negative tokens", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "mx": -2 + } + ], + "options": null, + "expected": { + "classNames": [ + "mx_-2" + ], + "css": "@layer utilities {\n .mx_-2 {\n margin-inline: calc(var(--spacing-2) * -1);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should work with outer responsive::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with basic style object > should work with outer responsive", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "top": { + "sm": { + "_rtl": "20px", + "_hover": "50px" + }, + "lg": "120px" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "sm\\:rtl\\:top_20px", + "sm\\:hover\\:top_50px", + "lg\\:top_120px" + ], + "css": "@layer utilities {\n @media screen and (min-width: 40rem) {\n :where([dir=rtl], :dir(rtl)) .sm\\:rtl\\:top_20px {\n top: 20px;\n}\n .sm\\:hover\\:top_50px:is(:hover, [data-hover]) {\n top: 50px;\n}\n}\n\n @media screen and (min-width: 64rem) {\n .lg\\:top_120px {\n top: 120px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > outlier: should work with basic::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with direct nesting > outlier: should work with basic", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "all": "unset", + "backgroundColor": "red", + "border": "none", + "padding": "$3 $3", + "borderRadius": "$button", + "fontSize": "$xsmall", + "cursor": "pointer", + "& + span": { + "marginLeft": "$2" + }, + "&:focus, &:hover": { + "boxShadow": "none" + }, + ".test &": { + "backgroundColor": "blue" + }, + "& .my-class": { + "color": "red" + }, + ":focus > &": { + "color": "white" + }, + "@media (min-width: 768px)": { + "backgroundColor": "green", + "fontSize": "$small", + "&:hover": { + "backgroundColor": "yellow" + } + }, + "& span": { + "color": "red" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "all_unset", + "bd_none", + "p_\\$3_\\$3", + "bdr_\\$button", + "bg-c_red", + "fs_\\$xsmall", + "cursor_pointer", + "\\[\\.test_\\&\\]\\:bg-c_blue", + "\\[\\&_\\.my-class\\]\\:c_red", + "\\[\\&_span\\]\\:c_red", + "\\[\\&_\\+_span\\]\\:ml_\\$2", + "\\[\\&\\:focus\\,_\\&\\:hover\\]\\:bx-sh_none", + "\\[\\:focus_\\>_\\&\\]\\:c_white", + "\\[\\@media_\\(min-width\\:_768px\\)\\]\\:bg-c_green", + "\\[\\@media_\\(min-width\\:_768px\\)\\]\\:fs_\\$small", + "\\[\\@media_\\(min-width\\:_768px\\)\\]\\:\\[\\&\\:hover\\]\\:bg-c_yellow" + ], + "css": "@layer utilities {\n .all_unset {\n all: unset;\n}\n\n .bd_none {\n border: var(--borders-none);\n}\n\n .p_\\$3_\\$3 {\n padding: $3 $3;\n}\n\n .bdr_\\$button {\n border-radius: $button;\n}\n\n .bg-c_red {\n background-color: red;\n}\n\n .fs_\\$xsmall {\n font-size: $xsmall;\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .test .\\[\\.test_\\&\\]\\:bg-c_blue {\n background-color: blue;\n}\n\n .\\[\\&_\\.my-class\\]\\:c_red .my-class,.\\[\\&_span\\]\\:c_red span {\n color: red;\n}\n\n .\\[\\&_\\+_span\\]\\:ml_\\$2 + span {\n margin-left: $2;\n}\n\n .\\[\\&\\:focus\\,_\\&\\:hover\\]\\:bx-sh_none:focus,.\\[\\&\\:focus\\,_\\&\\:hover\\]\\:bx-sh_none:hover {\n box-shadow: none;\n}\n\n :focus > .\\[\\:focus_\\>_\\&\\]\\:c_white {\n color: var(--colors-white);\n}\n\n @media (min-width: 768px) {\n .\\[\\@media_\\(min-width\\:_768px\\)\\]\\:bg-c_green {\n background-color: green;\n}\n .\\[\\@media_\\(min-width\\:_768px\\)\\]\\:fs_\\$small {\n font-size: $small;\n}\n .\\[\\@media_\\(min-width\\:_768px\\)\\]\\:\\[\\&\\:hover\\]\\:bg-c_yellow:hover {\n background-color: yellow;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > responsive helpers::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with direct nesting > responsive helpers", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "hideFrom": "sm" + } + ], + "options": null, + "expected": { + "classNames": [ + "hide_sm" + ], + "css": "@layer utilities {\n @media screen and (min-width: 40rem) {\n .hide_sm {\n display: none;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > responsive helpers::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with direct nesting > responsive helpers", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "hideBelow": "lg" + } + ], + "options": null, + "expected": { + "classNames": [ + "show_lg" + ], + "css": "@layer utilities {\n @media screen and (max-width: 63.9975rem) {\n .show_lg {\n display: none;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > should sort mobile first::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with direct nesting > should sort mobile first", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "@media screen and (max-width: 640px)": { + "margin": "8" + }, + "@media screen and (min-width: 980px)": { + "margin": "3" + }, + "@media screen and (max-width: 980px)": { + "margin": "6" + }, + "@supports (display: grid)": { + "backgroundColor": "red" + }, + "@media screen and (max-width: 768px)": { + "margin": "7" + }, + "@media screen and (min-width: 640px)": { + "margin": "1" + }, + "@supports not (display: grid)": { + "backgroundColor": "green" + }, + "@media screen and (min-width: 1280px)": { + "margin": "4" + }, + "@supports (display: flex)": { + "backgroundColor": "blue" + }, + "@media screen and (min-width: 768px)": { + "margin": "2" + }, + "@media screen and (max-width: 1280px)": { + "margin": "5" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "\\[\\@media_screen_and_\\(min-width\\:_640px\\)\\]\\:m_1", + "\\[\\@media_screen_and_\\(min-width\\:_768px\\)\\]\\:m_2", + "\\[\\@media_screen_and_\\(min-width\\:_980px\\)\\]\\:m_3", + "\\[\\@media_screen_and_\\(min-width\\:_1280px\\)\\]\\:m_4", + "\\[\\@media_screen_and_\\(max-width\\:_1280px\\)\\]\\:m_5", + "\\[\\@media_screen_and_\\(max-width\\:_980px\\)\\]\\:m_6", + "\\[\\@media_screen_and_\\(max-width\\:_768px\\)\\]\\:m_7", + "\\[\\@media_screen_and_\\(max-width\\:_640px\\)\\]\\:m_8", + "\\[\\@supports_\\(display\\:_flex\\)\\]\\:bg-c_blue", + "\\[\\@supports_\\(display\\:_grid\\)\\]\\:bg-c_red", + "\\[\\@supports_not_\\(display\\:_grid\\)\\]\\:bg-c_green" + ], + "css": "@layer utilities {\n @supports (display: flex) {\n .\\[\\@supports_\\(display\\:_flex\\)\\]\\:bg-c_blue {\n background-color: blue;\n}\n}\n\n @supports (display: grid) {\n .\\[\\@supports_\\(display\\:_grid\\)\\]\\:bg-c_red {\n background-color: red;\n}\n}\n\n @supports not (display: grid) {\n .\\[\\@supports_not_\\(display\\:_grid\\)\\]\\:bg-c_green {\n background-color: green;\n}\n}\n\n @media screen and (min-width: 640px) {\n .\\[\\@media_screen_and_\\(min-width\\:_640px\\)\\]\\:m_1 {\n margin: var(--spacing-1);\n}\n}\n\n @media screen and (min-width: 768px) {\n .\\[\\@media_screen_and_\\(min-width\\:_768px\\)\\]\\:m_2 {\n margin: var(--spacing-2);\n}\n}\n\n @media screen and (min-width: 980px) {\n .\\[\\@media_screen_and_\\(min-width\\:_980px\\)\\]\\:m_3 {\n margin: var(--spacing-3);\n}\n}\n\n @media screen and (min-width: 1280px) {\n .\\[\\@media_screen_and_\\(min-width\\:_1280px\\)\\]\\:m_4 {\n margin: var(--spacing-4);\n}\n}\n\n @media screen and (max-width: 1280px) {\n .\\[\\@media_screen_and_\\(max-width\\:_1280px\\)\\]\\:m_5 {\n margin: var(--spacing-5);\n}\n}\n\n @media screen and (max-width: 980px) {\n .\\[\\@media_screen_and_\\(max-width\\:_980px\\)\\]\\:m_6 {\n margin: var(--spacing-6);\n}\n}\n\n @media screen and (max-width: 768px) {\n .\\[\\@media_screen_and_\\(max-width\\:_768px\\)\\]\\:m_7 {\n margin: var(--spacing-7);\n}\n}\n\n @media screen and (max-width: 640px) {\n .\\[\\@media_screen_and_\\(max-width\\:_640px\\)\\]\\:m_8 {\n margin: var(--spacing-8);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > should work for inline media::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with direct nesting > should work for inline media", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "@media (min-width: 768px)": { + "backgroundColor": "green" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "\\[\\@media_\\(min-width\\:_768px\\)\\]\\:bg-c_green" + ], + "css": "@layer utilities {\n @media (min-width: 768px) {\n .\\[\\@media_\\(min-width\\:_768px\\)\\]\\:bg-c_green {\n background-color: green;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > simple nesting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with direct nesting > simple nesting", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "& kbd": { + "color": "red" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "\\[\\&_kbd\\]\\:c_red" + ], + "css": "@layer utilities {\n .\\[\\&_kbd\\]\\:c_red kbd {\n color: red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > with custom formatTokenName and formatCssVar::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with direct nesting > with custom formatTokenName and formatCssVar", + "line": 6 + }, + "unsupported": "config hooks" + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with grouped conditions styles > multiple scopes::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with grouped conditions styles > multiple scopes", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "@media base": { + "&:hover": { + "left": "40px", + "textAlign": { + "sm": "left" + } + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "\\[\\@media_base\\]\\:\\[\\&\\:hover\\]\\:left_40px", + "\\[\\@media_base\\]\\:\\[\\&\\:hover\\]\\:sm\\:ta_left" + ], + "css": "@layer utilities {\n @media base {\n .\\[\\@media_base\\]\\:\\[\\&\\:hover\\]\\:left_40px:hover {\n left: 40px;\n}\n}\n\n @media base {\n @media screen and (min-width: 40rem) {\n .\\[\\@media_base\\]\\:\\[\\&\\:hover\\]\\:sm\\:ta_left:hover {\n text-align: left;\n}\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with grouped conditions styles > nested > nested > property::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with grouped conditions styles > nested > nested > property", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "_hover": { + "_disabled": { + "bg": { + "sm": "red.300" + } + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "hover\\:disabled\\:sm\\:bg_red\\.300" + ], + "css": "@layer utilities {\n @media screen and (min-width: 40rem) {\n .hover\\:disabled\\:sm\\:bg_red\\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {\n background: var(--colors-red-300);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with grouped conditions styles > nested > property::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with grouped conditions styles > nested > property", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "_hover": { + "bg": { + "sm": { + "_dark": "red.300" + } + }, + "color": "pink.400" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "hover\\:c_pink\\.400", + "hover\\:sm\\:dark\\:bg_red\\.300" + ], + "css": "@layer utilities {\n .hover\\:c_pink\\.400:is(:hover, [data-hover]) {\n color: var(--colors-pink-400);\n}\n\n @media screen and (min-width: 40rem) {\n [data-theme=dark] .hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]),.dark .hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]),.hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]).dark,.hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover])[data-theme=dark] {\n background: var(--colors-red-300);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with grouped conditions styles > simple::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with grouped conditions styles > simple", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "_hover": { + "bg": "pink.400" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "hover\\:bg_pink\\.400" + ], + "css": "@layer utilities {\n .hover\\:bg_pink\\.400:is(:hover, [data-hover]) {\n background: var(--colors-pink-400);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with nesting scope > [@media] should work with nested selector::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with nesting scope > [@media] should work with nested selector", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "@media base": { + "left": "40px", + "textAlign": { + "sm": "left" + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "\\[\\@media_base\\]\\:left_40px", + "\\[\\@media_base\\]\\:sm\\:ta_left" + ], + "css": "@layer utilities {\n @media base {\n .\\[\\@media_base\\]\\:left_40px {\n left: 40px;\n}\n}\n\n @media base {\n @media screen and (min-width: 40rem) {\n .\\[\\@media_base\\]\\:sm\\:ta_left {\n text-align: left;\n}\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with nesting scope > [parent selector] should work with nested selector::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with nesting scope > [parent selector] should work with nested selector", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "input:hover &": { + "bg": "red400", + "fontSize": { + "sm": "14px", + "lg": "18px" + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "\\[input\\:hover_\\&\\]\\:bg_red400", + "\\[input\\:hover_\\&\\]\\:sm\\:fs_14px", + "\\[input\\:hover_\\&\\]\\:lg\\:fs_18px" + ], + "css": "@layer utilities {\n input:hover .\\[input\\:hover_\\&\\]\\:bg_red400 {\n background: red400;\n}\n\n @media screen and (min-width: 40rem) {\n input:hover .\\[input\\:hover_\\&\\]\\:sm\\:fs_14px {\n font-size: 14px;\n}\n}\n\n @media screen and (min-width: 64rem) {\n input:hover .\\[input\\:hover_\\&\\]\\:lg\\:fs_18px {\n font-size: 18px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with nesting scope > [pseudo] should work with nested selector::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with nesting scope > [pseudo] should work with nested selector", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "& > p": { + "left": { + "base": "20px", + "md": "40px" + }, + "bg": { + "_light": "red400", + "_dark": "green500" + }, + "font": { + "_rtl": "sans", + "_ltr": { + "_dark": { + "sm": { + "_hover": "serif" + } + } + } + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\>_p\\]\\:left_20px", + "\\[\\&_\\>_p\\]\\:light\\:bg_red400", + "\\[\\&_\\>_p\\]\\:dark\\:bg_green500", + "\\[\\&_\\>_p\\]\\:rtl\\:font_sans", + "\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif", + "\\[\\&_\\>_p\\]\\:md\\:left_40px" + ], + "css": "@layer utilities {\n .\\[\\&_\\>_p\\]\\:left_20px > p {\n left: 20px;\n}\n\n [data-theme=light] .\\[\\&_\\>_p\\]\\:light\\:bg_red400 > p,.light .\\[\\&_\\>_p\\]\\:light\\:bg_red400 > p,.\\[\\&_\\>_p\\]\\:light\\:bg_red400 > p.light,.\\[\\&_\\>_p\\]\\:light\\:bg_red400 > p[data-theme=light] {\n background: red400;\n}\n\n [data-theme=dark] .\\[\\&_\\>_p\\]\\:dark\\:bg_green500 > p,.dark .\\[\\&_\\>_p\\]\\:dark\\:bg_green500 > p,.\\[\\&_\\>_p\\]\\:dark\\:bg_green500 > p.dark,.\\[\\&_\\>_p\\]\\:dark\\:bg_green500 > p[data-theme=dark] {\n background: green500;\n}\n\n :where([dir=rtl], :dir(rtl)) .\\[\\&_\\>_p\\]\\:rtl\\:font_sans > p {\n font: sans;\n}\n\n @media screen and (min-width: 40rem) {\n [data-theme=dark] :where([dir=ltr], :dir(ltr)) .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover]),.dark :where([dir=ltr], :dir(ltr)) .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover]),:where([dir=ltr], :dir(ltr)) .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p.dark:is(:hover, [data-hover]),:where([dir=ltr], :dir(ltr)) .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p[data-theme=dark]:is(:hover, [data-hover]) {\n font: serif;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .\\[\\&_\\>_p\\]\\:md\\:left_40px > p {\n left: 40px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with nesting scope > [selector] should work with nested selector::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/atomic-rule.test.ts", + "test": "atomic / with nesting scope > [selector] should work with nested selector", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "&::placeholder": { + "left": "40px", + "bg": "red400", + "textAlign": { + "sm": "left" + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "\\[\\&\\:\\:placeholder\\]\\:bg_red400", + "\\[\\&\\:\\:placeholder\\]\\:left_40px", + "\\[\\&\\:\\:placeholder\\]\\:sm\\:ta_left" + ], + "css": "@layer utilities {\n .\\[\\&\\:\\:placeholder\\]\\:bg_red400::placeholder {\n background: red400;\n}\n\n .\\[\\&\\:\\:placeholder\\]\\:left_40px::placeholder {\n left: 40px;\n}\n\n @media screen and (min-width: 40rem) {\n .\\[\\&\\:\\:placeholder\\]\\:sm\\:ta_left::placeholder {\n text-align: left;\n}\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.color-mix.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.color-mix.test.ts.json new file mode 100644 index 00000000000..e2e61a5f390 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.color-mix.test.ts.json @@ -0,0 +1,1209 @@ +{ + "source": "packages/core/__tests__/color-mix.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > config token color::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > config token color", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red.300/30" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\.300\\/30" + ], + "css": "@layer utilities {\n .bg_red\\.300\\/30 {\n --mix-background: color-mix(in srgb, var(--colors-red-300) 30%, transparent);\n background: var(--mix-background, var(--colors-red-300));\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > decimal opacity::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > decimal opacity", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red/0.33" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\/0\\.33" + ], + "css": "@layer utilities {\n .bg_red\\/0\\.33 {\n --mix-background: color-mix(in srgb, red 0.33%, transparent);\n background: var(--mix-background, red);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > in token fn::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > in token fn", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "token(colors.pink.400/30)" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_token\\(colors\\.pink\\.400\\/30\\)" + ], + "css": "@layer utilities {\n .bg_token\\(colors\\.pink\\.400\\/30\\) {\n background: color-mix(in srgb, var(--colors-pink-400) 30%, transparent);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > in token reference with curly brackets::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > in token reference with curly brackets", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "color": "{colors.pink.400/30}" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "c_\\{colors\\.pink\\.400\\/30\\}" + ], + "css": "@layer utilities {\n .c_\\{colors\\.pink\\.400\\/30\\} {\n color: color-mix(in srgb, var(--colors-pink-400) 30%, transparent);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > inside var::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > inside var", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "gradientFrom": "red/33" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "from_red\\/33" + ], + "css": "@layer utilities {\n .from_red\\/33 {\n --mix---gradient-from: color-mix(in srgb, red 33%, transparent);\n --gradient-from: var(--mix---gradient-from, red);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > invalid number format::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > invalid number format", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red/0..,4" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\/0\\.\\.\\,4" + ], + "css": "@layer utilities {\n .bg_red\\/0\\.\\.\\,4 {\n background: red/0..,4;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > native CSS color::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > native CSS color", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red/30" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\/30" + ], + "css": "@layer utilities {\n .bg_red\\/30 {\n --mix-background: color-mix(in srgb, red 30%, transparent);\n background: var(--mix-background, red);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > native CSS color::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > native CSS color", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red/30" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\/30" + ], + "css": "@layer utilities {\n .bg_red\\/30 {\n --mix-background: color-mix(in srgb, red 30%, transparent);\n background: var(--mix-background, red);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > opacity token::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > opacity token", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red/half" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\/half" + ], + "css": "@layer utilities {\n .bg_red\\/half {\n --mix-background: color-mix(in srgb, red 50%, transparent);\n background: var(--mix-background, red);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > percent opacity::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > percent opacity", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red/33" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\/33" + ], + "css": "@layer utilities {\n .bg_red\\/33 {\n --mix-background: color-mix(in srgb, red 33%, transparent);\n background: var(--mix-background, red);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > WebkitTextFillColor with color token::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > WebkitTextFillColor with color token", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "WebkitTextFillColor": "red.300" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "wktf-c_red\\.300" + ], + "css": "@layer utilities {\n .wktf-c_red\\.300 {\n -webkit-text-fill-color: var(--colors-red-300);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > wrong format::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > wrong format", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "xx1x//30" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_xx1x\\/\\/30" + ], + "css": "@layer utilities {\n .bg_xx1x\\/\\/30 {\n background: xx1x//30;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > wrong number format::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > wrong number format", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red/0,4" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\/0\\,4" + ], + "css": "@layer utilities {\n .bg_red\\/0\\,4 {\n background: red/0,4;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/color-mix.test.ts::color-mix > wrong opacity::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/color-mix.test.ts", + "test": "color-mix > wrong opacity", + "line": 38 + }, + "userConfig": { + "utilities": { + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "gradientFrom": { + "className": "from", + "values": "colors", + "transform": { + "__function": "anonymous" + } + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "anonymous" + } + } + }, + "theme": { + "extend": { + "tokens": { + "opacity": { + "half": { + "value": 0.5 + } + } + } + } + } + }, + "inputs": [ + { + "bg": "red/abc" + } + ], + "configPatch": { + "theme": { + "tokens": { + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + } + }, + "utilities": { + "background": { + "group": null + }, + "gradientFrom": { + "group": null, + "className": { + "$value": "from" + } + }, + "WebkitTextFillColor": { + "group": null + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg_red\\/abc" + ], + "css": "@layer utilities {\n .bg_red\\/abc {\n background: red/abc;\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.complex-rule.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.complex-rule.test.ts.json new file mode 100644 index 00000000000..dc175fc71ea --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.complex-rule.test.ts.json @@ -0,0 +1,36 @@ +{ + "source": "packages/core/__tests__/complex-rule.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/complex-rule.test.ts::complex-rule > should process complex rule::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/complex-rule.test.ts", + "test": "complex-rule > should process complex rule", + "line": 6 + }, + "userConfig": null, + "inputs": [ + { + "color": { + "_dark": { + "base": "green500", + "sm": { + "md": "red200" + } + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "dark\\:c_green500", + "dark\\:sm\\:md\\:c_red200" + ], + "css": "@layer utilities {\n [data-theme=dark] .dark\\:c_green500,.dark .dark\\:c_green500,.dark\\:c_green500.dark,.dark\\:c_green500[data-theme=dark] {\n color: green500;\n}\n\n @media screen and (min-width: 40rem) {\n @media screen and (min-width: 48rem) {\n [data-theme=dark] .dark\\:sm\\:md\\:c_red200,.dark .dark\\:sm\\:md\\:c_red200,.dark\\:sm\\:md\\:c_red200.dark,.dark\\:sm\\:md\\:c_red200[data-theme=dark] {\n color: red200;\n}\n}\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.composition.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.composition.test.ts.json new file mode 100644 index 00000000000..655c7983097 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.composition.test.ts.json @@ -0,0 +1,289 @@ +{ + "source": "packages/core/__tests__/composition.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/composition.test.ts::compositions > should resolve animation styles::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/composition.test.ts", + "test": "compositions > should resolve animation styles", + "line": 26 + }, + "userConfig": { + "theme": { + "animationStyles": { + "scale-fade-in": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-in, fade-in" + } + }, + "scale-fade-out": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-out, fade-out" + } + } + } + } + }, + "inputs": [ + { + "animationStyle": "scale-fade-in" + } + ], + "configPatch": { + "theme": { + "animationStyles": { + "$value": { + "scale-fade-in": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-in, fade-in" + } + }, + "scale-fade-out": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-out, fade-out" + } + } + } + }, + "$order": [ + "animationStyles", + "keyframes", + "breakpoints", + "tokens", + "textStyles", + "containerSizes", + "semanticTokens", + "recipes", + "slotRecipes" + ] + } + }, + "options": null, + "expected": { + "classNames": [ + "animationStyle_scale-fade-in" + ], + "css": "@layer utilities {\n @layer compositions {\n .animationStyle_scale-fade-in {\n transform-origin: var(--transform-origin);\n animation-name: scale-in, fade-in;\n}\n }\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/composition.test.ts::compositions > should resolve DEFAULT::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/composition.test.ts", + "test": "compositions > should resolve DEFAULT", + "line": 26 + }, + "userConfig": { + "theme": { + "animationStyles": { + "scale-fade-in": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-in, fade-in" + } + }, + "scale-fade-out": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-out, fade-out" + } + } + } + } + }, + "inputs": [ + { + "textStyle": "headline" + } + ], + "configPatch": { + "theme": { + "animationStyles": { + "$value": { + "scale-fade-in": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-in, fade-in" + } + }, + "scale-fade-out": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-out, fade-out" + } + } + } + }, + "$order": [ + "animationStyles", + "keyframes", + "breakpoints", + "tokens", + "textStyles", + "containerSizes", + "semanticTokens", + "recipes", + "slotRecipes" + ] + } + }, + "options": null, + "expected": { + "classNames": [ + "textStyle_headline" + ], + "css": "@layer utilities {\n @layer compositions {\n .textStyle_headline {\n font-size: 1.5rem;\n font-weight: var(--font-weights-bold);\n}\n }\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/composition.test.ts::compositions > should respect the layer::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/composition.test.ts", + "test": "compositions > should respect the layer", + "line": 26 + }, + "userConfig": { + "theme": { + "animationStyles": { + "scale-fade-in": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-in, fade-in" + } + }, + "scale-fade-out": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-out, fade-out" + } + } + } + } + }, + "inputs": [ + { + "textStyle": "headline.h1" + } + ], + "configPatch": { + "theme": { + "animationStyles": { + "$value": { + "scale-fade-in": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-in, fade-in" + } + }, + "scale-fade-out": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-out, fade-out" + } + } + } + }, + "$order": [ + "animationStyles", + "keyframes", + "breakpoints", + "tokens", + "textStyles", + "containerSizes", + "semanticTokens", + "recipes", + "slotRecipes" + ] + } + }, + "options": null, + "expected": { + "classNames": [ + "textStyle_headline\\.h1" + ], + "css": "@layer utilities {\n @layer compositions {\n .textStyle_headline\\.h1 {\n font-size: 2rem;\n font-weight: var(--font-weights-bold);\n}\n }\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/composition.test.ts::compositions > should respect the layer::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/composition.test.ts", + "test": "compositions > should respect the layer", + "line": 26 + }, + "userConfig": { + "theme": { + "animationStyles": { + "scale-fade-in": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-in, fade-in" + } + }, + "scale-fade-out": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-out, fade-out" + } + } + } + } + }, + "inputs": [ + { + "textStyle": "headline.h2" + } + ], + "configPatch": { + "theme": { + "animationStyles": { + "$value": { + "scale-fade-in": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-in, fade-in" + } + }, + "scale-fade-out": { + "value": { + "transformOrigin": "var(--transform-origin)", + "animationName": "scale-out, fade-out" + } + } + } + }, + "$order": [ + "animationStyles", + "keyframes", + "breakpoints", + "tokens", + "textStyles", + "containerSizes", + "semanticTokens", + "recipes", + "slotRecipes" + ] + } + }, + "options": null, + "expected": { + "classNames": [ + "textStyle_headline\\.h2" + ], + "css": "@layer utilities {\n @layer compositions {\n .textStyle_headline\\.h2 {\n font-size: 1.5rem;\n font-weight: var(--font-weights-bold);\n}\n\n @media screen and (min-width: 64rem) {\n .textStyle_headline\\.h2 {\n font-size: 2rem;\n}\n}\n }\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.custom-utility.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.custom-utility.test.ts.json new file mode 100644 index 00000000000..35a499387ac --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.custom-utility.test.ts.json @@ -0,0 +1,308 @@ +{ + "source": "packages/core/__tests__/custom-utility.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/custom-utility.test.ts::custom utility > multiple shorthand + no className::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/custom-utility.test.ts", + "test": "custom utility > multiple shorthand + no className", + "line": 60 + }, + "userConfig": { + "utilities": { + "extend": { + "coloredBorder": { + "shorthand": [ + "cbd", + "cbxxp" + ], + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform" + } + } + } + } + }, + "inputs": [ + { + "coloredBorder": "red" + } + ], + "configPatch": { + "utilities": { + "coloredBorder": { + "$value": { + "shorthand": [ + "cbd", + "cbxxp" + ], + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform", + "custom": true + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "cbd_red" + ], + "css": "@layer utilities {\n .cbd_red {\n border: 1px solid red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/custom-utility.test.ts::custom utility > multiple shorthand + no className::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/custom-utility.test.ts", + "test": "custom utility > multiple shorthand + no className", + "line": 60 + }, + "userConfig": { + "utilities": { + "extend": { + "coloredBorder": { + "shorthand": [ + "cbd", + "cbxxp" + ], + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform" + } + } + } + } + }, + "inputs": [ + { + "cbd": "red" + } + ], + "configPatch": { + "utilities": { + "coloredBorder": { + "$value": { + "shorthand": [ + "cbd", + "cbxxp" + ], + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform", + "custom": true + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "cbd_red" + ], + "css": "@layer utilities {\n .cbd_red {\n border: 1px solid red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/custom-utility.test.ts::custom utility > multiple shorthand + no className::3", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/custom-utility.test.ts", + "test": "custom utility > multiple shorthand + no className", + "line": 60 + }, + "userConfig": { + "utilities": { + "extend": { + "coloredBorder": { + "shorthand": [ + "cbd", + "cbxxp" + ], + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform" + } + } + } + } + }, + "inputs": [ + { + "cbxxp": "red" + } + ], + "configPatch": { + "utilities": { + "coloredBorder": { + "$value": { + "shorthand": [ + "cbd", + "cbxxp" + ], + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform", + "custom": true + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "cbd_red" + ], + "css": "@layer utilities {\n .cbd_red {\n border: 1px solid red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/custom-utility.test.ts::custom utility > shorthand + no className::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/custom-utility.test.ts", + "test": "custom utility > shorthand + no className", + "line": 23 + }, + "userConfig": { + "utilities": { + "extend": { + "coloredBorder": { + "shorthand": "cb", + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform" + } + } + } + } + }, + "inputs": [ + { + "coloredBorder": "red" + } + ], + "configPatch": { + "utilities": { + "coloredBorder": { + "$value": { + "shorthand": "cb", + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform", + "custom": true + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "cb_red" + ], + "css": "@layer utilities {\n .cb_red {\n border: 1px solid red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/custom-utility.test.ts::custom utility > shorthand + no className::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/custom-utility.test.ts", + "test": "custom utility > shorthand + no className", + "line": 23 + }, + "userConfig": { + "utilities": { + "extend": { + "coloredBorder": { + "shorthand": "cb", + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform" + } + } + } + } + }, + "inputs": [ + { + "cb": "red" + } + ], + "configPatch": { + "utilities": { + "coloredBorder": { + "$value": { + "shorthand": "cb", + "values": [ + "red", + "green", + "blue" + ], + "transform": { + "__function": "transform", + "custom": true + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "cb_red" + ], + "css": "@layer utilities {\n .cb_red {\n border: 1px solid red;\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.gradient.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.gradient.test.ts.json new file mode 100644 index 00000000000..e11a117746d --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.gradient.test.ts.json @@ -0,0 +1,197 @@ +{ + "source": "packages/core/__tests__/gradient.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/gradient.test.ts::gradient utilities > bgGradient with direction shortcut::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/gradient.test.ts", + "test": "gradient utilities > bgGradient with direction shortcut", + "line": 20 + }, + "userConfig": { + "theme": { + "extend": { + "tokens": { + "gradients": { + "primary": { + "value": "linear-gradient(to right, #ff0000, #0000ff)" + } + } + } + } + } + }, + "inputs": [ + { + "bgGradient": "to-r" + } + ], + "configPatch": { + "theme": { + "tokens": { + "gradients": { + "$value": { + "primary": { + "value": "linear-gradient(to right, #ff0000, #0000ff)" + } + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg-grad_to-r" + ], + "css": "@layer utilities {\n .bg-grad_to-r {\n --gradient-stops: var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));\n --gradient-position: to right;\n background-image: linear-gradient(var(--gradient-stops));\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/gradient.test.ts::gradient utilities > bgGradient with gradient token::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/gradient.test.ts", + "test": "gradient utilities > bgGradient with gradient token", + "line": 20 + }, + "userConfig": { + "theme": { + "extend": { + "tokens": { + "gradients": { + "primary": { + "value": "linear-gradient(to right, #ff0000, #0000ff)" + } + } + } + } + } + }, + "inputs": [ + { + "bgGradient": "primary" + } + ], + "configPatch": { + "theme": { + "tokens": { + "gradients": { + "$value": { + "primary": { + "value": "linear-gradient(to right, #ff0000, #0000ff)" + } + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg-grad_primary" + ], + "css": "@layer utilities {\n .bg-grad_primary {\n background-image: var(--gradients-primary);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/gradient.test.ts::gradient utilities > bgGradient with token references::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/gradient.test.ts", + "test": "gradient utilities > bgGradient with token references", + "line": 20 + }, + "userConfig": { + "theme": { + "extend": { + "tokens": { + "gradients": { + "primary": { + "value": "linear-gradient(to right, #ff0000, #0000ff)" + } + } + } + } + } + }, + "inputs": [ + { + "bgGradient": "linear-gradient({colors.red.200}, {colors.blue.300})" + } + ], + "configPatch": { + "theme": { + "tokens": { + "gradients": { + "$value": { + "primary": { + "value": "linear-gradient(to right, #ff0000, #0000ff)" + } + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "bg-grad_linear-gradient\\(\\{colors\\.red\\.200\\}\\,_\\{colors\\.blue\\.300\\}\\)" + ], + "css": "@layer utilities {\n .bg-grad_linear-gradient\\(\\{colors\\.red\\.200\\}\\,_\\{colors\\.blue\\.300\\}\\) {\n background-image: linear-gradient(var(--colors-red-200), var(--colors-blue-300));\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/gradient.test.ts::gradient utilities > textGradient with token references::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/gradient.test.ts", + "test": "gradient utilities > textGradient with token references", + "line": 20 + }, + "userConfig": { + "theme": { + "extend": { + "tokens": { + "gradients": { + "primary": { + "value": "linear-gradient(to right, #ff0000, #0000ff)" + } + } + } + } + } + }, + "inputs": [ + { + "textGradient": "linear-gradient({colors.red.200}, {colors.blue.300})" + } + ], + "configPatch": { + "theme": { + "tokens": { + "gradients": { + "$value": { + "primary": { + "value": "linear-gradient(to right, #ff0000, #0000ff)" + } + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "txt-grad_linear-gradient\\(\\{colors\\.red\\.200\\}\\,_\\{colors\\.blue\\.300\\}\\)" + ], + "css": "@layer utilities {\n .txt-grad_linear-gradient\\(\\{colors\\.red\\.200\\}\\,_\\{colors\\.blue\\.300\\}\\) {\n background-image: linear-gradient(var(--colors-red-200), var(--colors-blue-300));\n -webkit-background-clip: text;\n color: transparent;\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.prefix.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.prefix.test.ts.json new file mode 100644 index 00000000000..401988277a1 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.prefix.test.ts.json @@ -0,0 +1,87 @@ +{ + "source": "packages/core/__tests__/prefix.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/prefix.test.ts::atomic-rule / prefix > should product consistent hash::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/prefix.test.ts", + "test": "atomic-rule / prefix > should product consistent hash", + "line": 9 + }, + "userConfig": { + "prefix": "tw", + "hash": { + "className": true, + "cssVar": true + } + }, + "inputs": [ + { + "color": "red" + } + ], + "configPatch": { + "prefix": { + "$value": "tw" + }, + "hash": { + "$value": { + "className": true, + "cssVar": true + } + } + }, + "options": null, + "expected": { + "classNames": [ + "tw-wxtrg" + ], + "css": "@layer utilities {\n .tw-wxtrg {\n color: red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/prefix.test.ts::atomic-rule / prefix > should product consistent hash::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/prefix.test.ts", + "test": "atomic-rule / prefix > should product consistent hash", + "line": 9 + }, + "userConfig": { + "prefix": "tw", + "hash": { + "className": true, + "cssVar": true + } + }, + "inputs": [ + { + "color": { + "sm": "red" + } + } + ], + "configPatch": { + "prefix": { + "$value": "tw" + }, + "hash": { + "$value": { + "className": true, + "cssVar": true + } + } + }, + "options": null, + "expected": { + "classNames": [ + "tw-eIFrkw" + ], + "css": "@layer utilities {\n @media screen and (min-width: 40rem) {\n .tw-eIFrkw {\n color: red;\n}\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.rule-processor.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.rule-processor.test.ts.json new file mode 100644 index 00000000000..5b4f6ecd83c --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.rule-processor.test.ts.json @@ -0,0 +1,1604 @@ +{ + "source": "packages/core/__tests__/rule-processor.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > at-rules + mixed conditions sorting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > at-rules + mixed conditions sorting", + "line": 9 + }, + "userConfig": { + "conditions": { + "mixedSm": [ + "@media screen and (min-width: 40em)", + "&[data-attr=\"custom\"]" + ], + "mixedSupportSm": [ + "@media screen and (min-width: 40em)", + "@support (display: flex)", + "&[data-attr=\"custom\"]" + ], + "mixedMd": [ + "@media screen and (min-width: 48em)", + "&[data-attr=\"custom\"]" + ], + "mixedSupportMd": [ + "@media screen and (min-width: 48em)", + "@support (display: flex)", + "&[data-attr=\"custom\"]" + ] + } + }, + "inputs": [ + { + "md": { + "color": "3px" + }, + "_mixedSupportMd": { + "color": "yellow" + }, + "sm": { + "width": "1px" + }, + "_mixedMd": { + "color": "blue" + }, + "xl": { + "width": "4px" + }, + "_mixedSupportSm": { + "color": "green" + }, + "lg": { + "color": "2px" + }, + "_mixedSm": { + "color": "red" + } + } + ], + "configPatch": { + "conditions": { + "mixedSm": { + "$value": [ + "@media screen and (min-width: 40em)", + "&[data-attr=\"custom\"]" + ] + }, + "mixedSupportSm": { + "$value": [ + "@media screen and (min-width: 40em)", + "@support (display: flex)", + "&[data-attr=\"custom\"]" + ] + }, + "mixedMd": { + "$value": [ + "@media screen and (min-width: 48em)", + "&[data-attr=\"custom\"]" + ] + }, + "mixedSupportMd": { + "$value": [ + "@media screen and (min-width: 48em)", + "@support (display: flex)", + "&[data-attr=\"custom\"]" + ] + } + } + }, + "options": null, + "expected": { + "classNames": [ + "mixedSm\\:c_red", + "mixedSupportSm\\:c_green", + "sm\\:w_1px", + "mixedMd\\:c_blue", + "mixedSupportMd\\:c_yellow", + "md\\:c_3px", + "lg\\:c_2px", + "xl\\:w_4px" + ], + "css": "@layer utilities {\n @media screen and (min-width: 40em) {\n .mixedSm\\:c_red[data-attr=\"custom\"] {\n color: red;\n}\n}\n\n @media screen and (min-width: 40em) {\n @support (display: flex) {\n .mixedSupportSm\\:c_green[data-attr=\"custom\"] {\n color: green;\n}\n}\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:w_1px {\n width: 1px;\n}\n}\n\n @media screen and (min-width: 48em) {\n .mixedMd\\:c_blue[data-attr=\"custom\"] {\n color: blue;\n}\n}\n\n @media screen and (min-width: 48em) {\n @support (display: flex) {\n .mixedSupportMd\\:c_yellow[data-attr=\"custom\"] {\n color: yellow;\n}\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:c_3px {\n color: 3px;\n}\n}\n\n @media screen and (min-width: 64rem) {\n .lg\\:c_2px {\n color: 2px;\n}\n}\n\n @media screen and (min-width: 80rem) {\n .xl\\:w_4px {\n width: 4px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > at-rules conditions sorting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > at-rules conditions sorting", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "md": { + "color": "3px" + }, + "sm": { + "width": "1px" + }, + "xl": { + "width": "4px" + }, + "lg": { + "color": "2px" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "sm\\:w_1px", + "md\\:c_3px", + "lg\\:c_2px", + "xl\\:w_4px" + ], + "css": "@layer utilities {\n @media screen and (min-width: 40rem) {\n .sm\\:w_1px {\n width: 1px;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:c_3px {\n color: 3px;\n}\n}\n\n @media screen and (min-width: 64rem) {\n .lg\\:c_2px {\n color: 2px;\n}\n}\n\n @media screen and (min-width: 80rem) {\n .xl\\:w_4px {\n width: 4px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > at-rules pseudo conditions sorting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > at-rules pseudo conditions sorting", + "line": 9 + }, + "userConfig": { + "conditions": { + "custom": "&[data-attr=\"custom\"]" + } + }, + "inputs": [ + { + "sm": { + "_focus": { + "width": "22px" + }, + "_custom": { + "width": "33px" + }, + "_active": { + "width": "44px" + }, + "_hover": { + "width": "11px" + } + } + } + ], + "configPatch": { + "conditions": { + "custom": { + "$value": "&[data-attr=\"custom\"]" + } + } + }, + "options": null, + "expected": { + "classNames": [ + "sm\\:custom\\:w_33px", + "sm\\:focus\\:w_22px", + "sm\\:hover\\:w_11px", + "sm\\:active\\:w_44px" + ], + "css": "@layer utilities {\n @media screen and (min-width: 40rem) {\n .sm\\:custom\\:w_33px[data-attr=\"custom\"] {\n width: 33px;\n}\n .sm\\:focus\\:w_22px:is(:focus, [data-focus]) {\n width: 22px;\n}\n .sm\\:hover\\:w_11px:is(:hover, [data-hover]) {\n width: 11px;\n}\n .sm\\:active\\:w_44px:is(:active, [data-active]) {\n width: 44px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > color mix::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > color mix", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "bg": "red.300/40", + "color": "white" + } + ], + "options": null, + "expected": { + "classNames": [ + "bg_red\\.300\\/40", + "c_white" + ], + "css": "@layer utilities {\n .bg_red\\.300\\/40 {\n --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);\n background: var(--mix-background, var(--colors-red-300));\n}\n\n .c_white {\n color: var(--colors-white);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > ignores declarations with null::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > ignores declarations with null", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "color": null, + "background": false + } + ], + "options": null, + "expected": { + "classNames": [ + "bg_false" + ], + "css": "" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > issue 3462 - mixed condition (array format) with child selector::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > issue 3462 - mixed condition (array format) with child selector", + "line": 9 + }, + "userConfig": { + "conditions": { + "hover": [ + "&:hover" + ] + } + }, + "inputs": [ + { + "_hover": { + "& > :where(svg)": { + "color": "green" + } + } + } + ], + "configPatch": { + "conditions": { + "hover": { + "$value": [ + "&:hover" + ] + } + } + }, + "options": null, + "expected": { + "classNames": [ + "hover\\:\\[\\&_\\>_\\:where\\(svg\\)\\]\\:c_green" + ], + "css": "@layer utilities {\n .hover\\:\\[\\&_\\>_\\:where\\(svg\\)\\]\\:c_green:hover > :where(svg) {\n color: green;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > issue 3462 - mixed condition with at-rule should still sort correctly::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > issue 3462 - mixed condition with at-rule should still sort correctly", + "line": 9 + }, + "userConfig": { + "conditions": { + "hoverMedia": [ + "@media (hover: hover)", + "&:hover" + ] + } + }, + "inputs": [ + { + "_hoverMedia": { + "& > :where(svg)": { + "color": "blue" + } + } + } + ], + "configPatch": { + "conditions": { + "hoverMedia": { + "$value": [ + "@media (hover: hover)", + "&:hover" + ] + } + } + }, + "options": null, + "expected": { + "classNames": [ + "hoverMedia\\:\\[\\&_\\>_\\:where\\(svg\\)\\]\\:c_blue" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n .hoverMedia\\:\\[\\&_\\>_\\:where\\(svg\\)\\]\\:c_blue:hover > :where(svg) {\n color: blue;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > mixed conditions sorting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > mixed conditions sorting", + "line": 9 + }, + "userConfig": { + "conditions": { + "custom": [ + "&[data-attr=\"custom\"]" + ], + "supportHover": [ + "@media (hover: hover) and (pointer: fine)", + "@supports (display: table-cell)", + "&:hover" + ], + "smHover": [ + "@media screen and (min-width: 40em)", + "@supports (display: grid)", + "&:hover" + ], + "mdHover": [ + "@media screen and (min-width: 48em)", + "@supports (display: flex)", + "&:hover" + ] + } + }, + "inputs": [ + { + "width": { + "_supportHover": "6px", + "base": "0px", + "_mdHover": "8px", + "sm": "4px", + "md": "4.5px", + "_smHover": "7px", + "_hover": { + "base": "2px", + "md": "5px", + "_focus": "3px" + }, + "_dark": "1px" + }, + "_suppportHover": { + "_custom": { + "color": "red" + } + }, + "_hover": { + "_custom": { + "color": "blue" + } + } + } + ], + "configPatch": { + "conditions": { + "custom": { + "$value": [ + "&[data-attr=\"custom\"]" + ] + }, + "supportHover": { + "$value": [ + "@media (hover: hover) and (pointer: fine)", + "@supports (display: table-cell)", + "&:hover" + ] + }, + "smHover": { + "$value": [ + "@media screen and (min-width: 40em)", + "@supports (display: grid)", + "&:hover" + ] + }, + "mdHover": { + "$value": [ + "@media screen and (min-width: 48em)", + "@supports (display: flex)", + "&:hover" + ] + } + } + }, + "options": null, + "expected": { + "classNames": [ + "w_0px", + "custom\\:c_red", + "dark\\:w_1px", + "hover\\:w_2px", + "hover\\:custom\\:c_blue", + "hover\\:focus\\:w_3px", + "smHover\\:w_7px", + "sm\\:w_4px", + "mdHover\\:w_8px", + "md\\:w_4\\.5px", + "hover\\:md\\:w_5px", + "supportHover\\:w_6px" + ], + "css": "@layer utilities {\n .w_0px {\n width: 0px;\n}\n\n .custom\\:c_red[data-attr=\"custom\"] {\n color: red;\n}\n\n [data-theme=dark] .dark\\:w_1px,.dark .dark\\:w_1px,.dark\\:w_1px.dark,.dark\\:w_1px[data-theme=dark] {\n width: 1px;\n}\n\n .hover\\:w_2px:is(:hover, [data-hover]) {\n width: 2px;\n}\n\n .hover\\:custom\\:c_blue:is(:hover, [data-hover])[data-attr=\"custom\"] {\n color: blue;\n}\n\n .hover\\:focus\\:w_3px:is(:hover, [data-hover]):is(:focus, [data-focus]) {\n width: 3px;\n}\n\n @media screen and (min-width: 40em) {\n @supports (display: grid) {\n .smHover\\:w_7px:hover {\n width: 7px;\n}\n}\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:w_4px {\n width: 4px;\n}\n}\n\n @media screen and (min-width: 48em) {\n @supports (display: flex) {\n .mdHover\\:w_8px:hover {\n width: 8px;\n}\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:w_4\\.5px {\n width: 4.5px;\n}\n .hover\\:md\\:w_5px:is(:hover, [data-hover]) {\n width: 5px;\n}\n}\n\n @media (hover: hover) and (pointer: fine) {\n @supports (display: table-cell) {\n .supportHover\\:w_6px:hover {\n width: 6px;\n}\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > mixed vs at-rule sorting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > mixed vs at-rule sorting", + "line": 9 + }, + "userConfig": { + "conditions": { + "mdHover": [ + "@media screen and (min-width: 48em)", + "@supports (display: flex)", + "&:hover" + ] + } + }, + "inputs": [ + { + "width": { + "_mdHover": "6px", + "md": "4.5px", + "_hover": { + "md": "5px" + } + } + } + ], + "configPatch": { + "conditions": { + "mdHover": { + "$value": [ + "@media screen and (min-width: 48em)", + "@supports (display: flex)", + "&:hover" + ] + } + } + }, + "options": null, + "expected": { + "classNames": [ + "mdHover\\:w_6px", + "md\\:w_4\\.5px", + "hover\\:md\\:w_5px" + ], + "css": "@layer utilities {\n @media screen and (min-width: 48em) {\n @supports (display: flex) {\n .mdHover\\:w_6px:hover {\n width: 6px;\n}\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:w_4\\.5px {\n width: 4.5px;\n}\n .hover\\:md\\:w_5px:is(:hover, [data-hover]) {\n width: 5px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > more specific should always be last (red then blue)::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > more specific should always be last (red then blue)", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "backgroundColor": "blue", + "background": "red", + "_hover": { + "background": "red", + "backgroundColor": "blue" + }, + "_focus": { + "background": "red", + "backgroundColor": "blue" + }, + "_dark": { + "backgroundColor": "blue", + "background": "red" + }, + "md": { + "backgroundColor": "blue", + "background": "red", + "_light": { + "backgroundColor": "blue", + "background": "red", + "_hover": { + "backgroundColor": "blue", + "background": "red" + }, + "_focus": { + "background": "red", + "backgroundColor": "blue" + }, + "_active": { + "bgColor": "blue", + "bg": "red" + } + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "bg_red", + "bg-c_blue", + "dark\\:bg_red", + "dark\\:bg-c_blue", + "focus\\:bg_red", + "focus\\:bg-c_blue", + "hover\\:bg_red", + "hover\\:bg-c_blue", + "md\\:bg_red", + "md\\:bg-c_blue", + "md\\:light\\:bg_red", + "md\\:light\\:bg-c_blue", + "md\\:light\\:focus\\:bg_red", + "md\\:light\\:focus\\:bg-c_blue", + "md\\:light\\:hover\\:bg_red", + "md\\:light\\:hover\\:bg-c_blue", + "md\\:light\\:active\\:bg_red", + "md\\:light\\:active\\:bg-c_blue" + ], + "css": "@layer utilities {\n .bg_red {\n background: red;\n}\n\n .bg-c_blue {\n background-color: blue;\n}\n\n [data-theme=dark] .dark\\:bg_red,.dark .dark\\:bg_red,.dark\\:bg_red.dark,.dark\\:bg_red[data-theme=dark] {\n background: red;\n}\n\n [data-theme=dark] .dark\\:bg-c_blue,.dark .dark\\:bg-c_blue,.dark\\:bg-c_blue.dark,.dark\\:bg-c_blue[data-theme=dark] {\n background-color: blue;\n}\n\n .focus\\:bg_red:is(:focus, [data-focus]) {\n background: red;\n}\n\n .focus\\:bg-c_blue:is(:focus, [data-focus]) {\n background-color: blue;\n}\n\n .hover\\:bg_red:is(:hover, [data-hover]) {\n background: red;\n}\n\n .hover\\:bg-c_blue:is(:hover, [data-hover]) {\n background-color: blue;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:bg_red {\n background: red;\n}\n .md\\:bg-c_blue {\n background-color: blue;\n}\n [data-theme=light] .md\\:light\\:bg_red,.light .md\\:light\\:bg_red,.md\\:light\\:bg_red.light,.md\\:light\\:bg_red[data-theme=light] {\n background: red;\n}\n [data-theme=light] .md\\:light\\:bg-c_blue,.light .md\\:light\\:bg-c_blue,.md\\:light\\:bg-c_blue.light,.md\\:light\\:bg-c_blue[data-theme=light] {\n background-color: blue;\n}\n [data-theme=light] .md\\:light\\:focus\\:bg_red:is(:focus, [data-focus]),.light .md\\:light\\:focus\\:bg_red:is(:focus, [data-focus]),.md\\:light\\:focus\\:bg_red.light:is(:focus, [data-focus]),.md\\:light\\:focus\\:bg_red[data-theme=light]:is(:focus, [data-focus]) {\n background: red;\n}\n [data-theme=light] .md\\:light\\:focus\\:bg-c_blue:is(:focus, [data-focus]),.light .md\\:light\\:focus\\:bg-c_blue:is(:focus, [data-focus]),.md\\:light\\:focus\\:bg-c_blue.light:is(:focus, [data-focus]),.md\\:light\\:focus\\:bg-c_blue[data-theme=light]:is(:focus, [data-focus]) {\n background-color: blue;\n}\n [data-theme=light] .md\\:light\\:hover\\:bg_red:is(:hover, [data-hover]),.light .md\\:light\\:hover\\:bg_red:is(:hover, [data-hover]),.md\\:light\\:hover\\:bg_red.light:is(:hover, [data-hover]),.md\\:light\\:hover\\:bg_red[data-theme=light]:is(:hover, [data-hover]) {\n background: red;\n}\n [data-theme=light] .md\\:light\\:hover\\:bg-c_blue:is(:hover, [data-hover]),.light .md\\:light\\:hover\\:bg-c_blue:is(:hover, [data-hover]),.md\\:light\\:hover\\:bg-c_blue.light:is(:hover, [data-hover]),.md\\:light\\:hover\\:bg-c_blue[data-theme=light]:is(:hover, [data-hover]) {\n background-color: blue;\n}\n [data-theme=light] .md\\:light\\:active\\:bg_red:is(:active, [data-active]),.light .md\\:light\\:active\\:bg_red:is(:active, [data-active]),.md\\:light\\:active\\:bg_red.light:is(:active, [data-active]),.md\\:light\\:active\\:bg_red[data-theme=light]:is(:active, [data-active]) {\n background: red;\n}\n [data-theme=light] .md\\:light\\:active\\:bg-c_blue:is(:active, [data-active]),.light .md\\:light\\:active\\:bg-c_blue:is(:active, [data-active]),.md\\:light\\:active\\:bg-c_blue.light:is(:active, [data-active]),.md\\:light\\:active\\:bg-c_blue[data-theme=light]:is(:active, [data-active]) {\n background-color: blue;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > nested conditions sorting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > nested conditions sorting", + "line": 9 + }, + "userConfig": { + "conditions": { + "custom": "&[data-attr=\"custom\"]" + } + }, + "inputs": [ + { + "md": { + "width": "3px" + }, + "_hover": { + "md": { + "width": "5px" + }, + "_focus": { + "width": "2px" + }, + "_custom": { + "color": "blue" + } + } + } + ], + "configPatch": { + "conditions": { + "custom": { + "$value": "&[data-attr=\"custom\"]" + } + } + }, + "options": null, + "expected": { + "classNames": [ + "hover\\:custom\\:c_blue", + "hover\\:focus\\:w_2px", + "md\\:w_3px", + "hover\\:md\\:w_5px" + ], + "css": "@layer utilities {\n .hover\\:custom\\:c_blue:is(:hover, [data-hover])[data-attr=\"custom\"] {\n color: blue;\n}\n\n .hover\\:focus\\:w_2px:is(:hover, [data-hover]):is(:focus, [data-focus]) {\n width: 2px;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:w_3px {\n width: 3px;\n}\n .hover\\:md\\:w_5px:is(:hover, [data-hover]) {\n width: 5px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > nested mixed conditions sorting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > nested mixed conditions sorting", + "line": 9 + }, + "userConfig": { + "conditions": { + "custom": "&[data-attr=\"custom\"]", + "mixed": [ + "&[data-attr=\"custom\"]" + ], + "mixedMd": [ + "@media screen and (min-width: 48em)", + "&[data-attr=\"custom\"]" + ] + } + }, + "inputs": [ + { + "_hover": { + "md": { + "width": "5px" + }, + "_mixed": { + "color": "green" + }, + "_mixedMd": { + "color": "6px" + }, + "_custom": { + "color": "blue" + } + } + } + ], + "configPatch": { + "conditions": { + "custom": { + "$value": "&[data-attr=\"custom\"]" + }, + "mixed": { + "$value": [ + "&[data-attr=\"custom\"]" + ] + }, + "mixedMd": { + "$value": [ + "@media screen and (min-width: 48em)", + "&[data-attr=\"custom\"]" + ] + } + } + }, + "options": null, + "expected": { + "classNames": [ + "hover\\:mixed\\:c_green", + "hover\\:custom\\:c_blue", + "hover\\:mixedMd\\:c_6px", + "hover\\:md\\:w_5px" + ], + "css": "@layer utilities {\n .hover\\:mixed\\:c_green:is(:hover, [data-hover])[data-attr=\"custom\"] {\n color: green;\n}\n\n .hover\\:custom\\:c_blue:is(:hover, [data-hover])[data-attr=\"custom\"] {\n color: blue;\n}\n\n @media screen and (min-width: 48em) {\n .hover\\:mixedMd\\:c_6px:is(:hover, [data-hover])[data-attr=\"custom\"] {\n color: 6px;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .hover\\:md\\:w_5px:is(:hover, [data-hover]) {\n width: 5px;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > parses declarations with !important::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > parses declarations with !important", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "borderColor": "red !important", + "color": "pink!", + "background": "white!IMPORTANT ", + "fontFamily": "A" + } + ], + "options": null, + "expected": { + "classNames": [ + "bg_white", + "bd-c_red", + "c_pink", + "ff_A" + ], + "css": "@layer utilities {\n .bg_white\\! {\n background: var(--colors-white) !important;\n}\n\n .bd-c_red\\! {\n border-color: red !important;\n}\n\n .c_pink\\! {\n color: pink !important;\n}\n\n .ff_A {\n font-family: A;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > preserves casing for css variable::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > preserves casing for css variable", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "--testVariable0": "0", + "--test-Variable-1": "1", + "--test-variable-2": "2" + } + ], + "options": null, + "expected": { + "classNames": [ + "\\--testVariable0_0", + "\\--test-Variable-1_1", + "\\--test-variable-2_2" + ], + "css": "@layer utilities {\n .\\--testVariable0_0 {\n --testVariable0: 0;\n}\n\n .\\--test-Variable-1_1 {\n --test-Variable-1: 1;\n}\n\n .\\--test-variable-2_2 {\n --test-variable-2: 2;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > pseudo conditions sorting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > pseudo conditions sorting", + "line": 9 + }, + "userConfig": { + "conditions": { + "custom": "&[data-attr=\"custom\"]" + } + }, + "inputs": [ + { + "_focus": { + "width": "2px" + }, + "_custom": { + "width": "3px" + }, + "_active": { + "width": "3px" + }, + "_hover": { + "width": "1px" + } + } + ], + "configPatch": { + "conditions": { + "custom": { + "$value": "&[data-attr=\"custom\"]" + } + } + }, + "options": null, + "expected": { + "classNames": [ + "custom\\:w_3px", + "focus\\:w_2px", + "hover\\:w_1px", + "active\\:w_3px" + ], + "css": "@layer utilities {\n .custom\\:w_3px[data-attr=\"custom\"] {\n width: 3px;\n}\n\n .focus\\:w_2px:is(:focus, [data-focus]) {\n width: 2px;\n}\n\n .hover\\:w_1px:is(:hover, [data-hover]) {\n width: 1px;\n}\n\n .active\\:w_3px:is(:active, [data-active]) {\n width: 3px;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > resolve property conflicts and order - border example::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > resolve property conflicts and order - border example", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "borderWidth": "1px", + "borderTopRadius": "0px", + "borderBottomWidth": "3px", + "overflow": "hidden", + "base": { + "borderWidth": "2px" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "bd-w_1px", + "ov_hidden", + "bd-w_2px", + "bdr-t_0px", + "bd-b-w_3px" + ], + "css": "@layer utilities {\n .bd-w_1px {\n border-width: 1px;\n}\n\n .ov_hidden {\n overflow: hidden;\n}\n\n .bd-w_2px {\n border-width: 2px;\n}\n\n .bdr-t_0px {\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n}\n\n .bd-b-w_3px {\n border-bottom-width: 3px;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > resolve property conflicts and order - padding example::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > resolve property conflicts and order - padding example", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "padding": "1px", + "paddingTop": "3px", + "paddingBottom": "4px", + "base": { + "padding": "2px" + } + } + ], + "options": null, + "expected": { + "classNames": [ + "p_1px", + "p_2px", + "pt_3px", + "pb_4px" + ], + "css": "@layer utilities {\n .p_1px {\n padding: 1px;\n}\n\n .p_2px {\n padding: 2px;\n}\n\n .pt_3px {\n padding-top: 3px;\n}\n\n .pb_4px {\n padding-bottom: 4px;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::js to css > unitless::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "js to css > unitless", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "--foo": 42, + "width": 42, + "opacity": 1, + "zIndex": 0 + } + ], + "options": null, + "expected": { + "classNames": [ + "\\--foo_42", + "op_1", + "z_0", + "w_42" + ], + "css": "@layer utilities {\n .\\--foo_42 {\n --foo: 42;\n}\n\n .op_1 {\n opacity: 1;\n}\n\n .z_0 {\n z-index: 0;\n}\n\n .w_42 {\n width: 42px;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > basic multi-block condition with two at-rule blocks::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "multi-block conditions (object syntax with @slot) > basic multi-block condition with two at-rule blocks", + "line": 9 + }, + "userConfig": { + "conditions": { + "hoverActive": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + }, + "inputs": [ + { + "_hoverActive": { + "background": "red" + } + } + ], + "configPatch": { + "conditions": { + "hoverActive": { + "$value": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "hoverActive\\:bg_red" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n .hoverActive\\:bg_red:is(:hover, [data-hover]) {\n background: red;\n}\n}\n\n @media (hover: none) {\n .hoverActive\\:bg_red:is(:active, [data-active]) {\n background: red;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > multi-block condition with multiple properties::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "multi-block conditions (object syntax with @slot) > multi-block condition with multiple properties", + "line": 9 + }, + "userConfig": { + "conditions": { + "hoverActive": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + }, + "inputs": [ + { + "_hoverActive": { + "background": "red", + "color": "white" + } + } + ], + "configPatch": { + "conditions": { + "hoverActive": { + "$value": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "hoverActive\\:bg_red", + "hoverActive\\:c_white" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n .hoverActive\\:bg_red:is(:hover, [data-hover]) {\n background: red;\n}\n .hoverActive\\:c_white:is(:hover, [data-hover]) {\n color: var(--colors-white);\n}\n}\n\n @media (hover: none) {\n .hoverActive\\:bg_red:is(:active, [data-active]) {\n background: red;\n}\n .hoverActive\\:c_white:is(:active, [data-active]) {\n color: var(--colors-white);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > multi-block emission preserves a deterministic at-rule order::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "multi-block conditions (object syntax with @slot) > multi-block emission preserves a deterministic at-rule order", + "line": 9 + }, + "userConfig": { + "conditions": { + "hoverActive": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + }, + "inputs": [ + { + "_hoverActive": { + "background": "red" + } + } + ], + "configPatch": { + "conditions": { + "hoverActive": { + "$value": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "hoverActive\\:bg_red" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n .hoverActive\\:bg_red:is(:hover, [data-hover]) {\n background: red;\n}\n}\n\n @media (hover: none) {\n .hoverActive\\:bg_red:is(:active, [data-active]) {\n background: red;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > multi-block stacked with a parent-nesting condition combines correctly::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "multi-block conditions (object syntax with @slot) > multi-block stacked with a parent-nesting condition combines correctly", + "line": 9 + }, + "userConfig": { + "conditions": { + "dark": ".dark &", + "hoverActive": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + }, + "inputs": [ + { + "_dark": { + "_hoverActive": { + "background": "red" + } + } + } + ], + "configPatch": { + "conditions": { + "dark": { + "$value": ".dark &" + }, + "hoverActive": { + "$value": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "dark\\:hoverActive\\:bg_red" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n .dark .dark\\:hoverActive\\:bg_red:is(:hover, [data-hover]) {\n background: red;\n}\n}\n\n @media (hover: none) {\n .dark .dark\\:hoverActive\\:bg_red:is(:active, [data-active]) {\n background: red;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > single-@slot object is equivalent to mixed-array form::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "multi-block conditions (object syntax with @slot) > single-@slot object is equivalent to mixed-array form", + "line": 9 + }, + "userConfig": { + "conditions": { + "anyHover": { + "@media (hover: hover)": { + "&:hover": "@slot" + } + } + } + }, + "inputs": [ + { + "_anyHover": { + "color": "blue" + } + } + ], + "configPatch": { + "conditions": { + "anyHover": { + "$value": { + "@media (hover: hover)": { + "&:hover": "@slot" + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "anyHover\\:c_blue" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n .anyHover\\:c_blue:hover {\n color: blue;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > single-@slot object is equivalent to mixed-array form::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "multi-block conditions (object syntax with @slot) > single-@slot object is equivalent to mixed-array form", + "line": 9 + }, + "userConfig": { + "conditions": { + "anyHover": [ + "@media (hover: hover)", + "&:hover" + ] + } + }, + "inputs": [ + { + "_anyHover": { + "color": "blue" + } + } + ], + "configPatch": { + "conditions": { + "anyHover": { + "$value": [ + "@media (hover: hover)", + "&:hover" + ] + } + } + }, + "options": null, + "expected": { + "classNames": [ + "anyHover\\:c_blue" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n .anyHover\\:c_blue:hover {\n color: blue;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > single-block object condition (backward compat)::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "multi-block conditions (object syntax with @slot) > single-block object condition (backward compat)", + "line": 9 + }, + "userConfig": { + "conditions": { + "anyHover": { + "@media (hover: hover)": { + "&:hover": "@slot" + } + } + } + }, + "inputs": [ + { + "_anyHover": { + "color": "blue" + } + } + ], + "configPatch": { + "conditions": { + "anyHover": { + "$value": { + "@media (hover: hover)": { + "&:hover": "@slot" + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "anyHover\\:c_blue" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n .anyHover\\:c_blue:hover {\n color: blue;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > stacking two multi-block conditions produces cartesian product of blocks::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "multi-block conditions (object syntax with @slot) > stacking two multi-block conditions produces cartesian product of blocks", + "line": 9 + }, + "userConfig": { + "conditions": { + "hoverActive": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + }, + "lightDark": { + "@media (prefers-color-scheme: light)": { + "&[data-mode=\"light\"]": "@slot" + }, + "@media (prefers-color-scheme: dark)": { + "&[data-mode=\"dark\"]": "@slot" + } + } + } + }, + "inputs": [ + { + "_hoverActive": { + "_lightDark": { + "background": "red" + } + } + } + ], + "configPatch": { + "conditions": { + "hoverActive": { + "$value": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + }, + "lightDark": { + "$value": { + "@media (prefers-color-scheme: light)": { + "&[data-mode=\"light\"]": "@slot" + }, + "@media (prefers-color-scheme: dark)": { + "&[data-mode=\"dark\"]": "@slot" + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "hoverActive\\:lightDark\\:bg_red" + ], + "css": "@layer utilities {\n @media (hover: hover) {\n @media (prefers-color-scheme: dark) {\n .hoverActive\\:lightDark\\:bg_red:is(:hover, [data-hover])[data-mode=\"dark\"] {\n background: red;\n}\n}\n\n @media (prefers-color-scheme: light) {\n .hoverActive\\:lightDark\\:bg_red:is(:hover, [data-hover])[data-mode=\"light\"] {\n background: red;\n}\n}\n}\n\n @media (hover: none) {\n @media (prefers-color-scheme: dark) {\n .hoverActive\\:lightDark\\:bg_red:is(:active, [data-active])[data-mode=\"dark\"] {\n background: red;\n}\n}\n\n @media (prefers-color-scheme: light) {\n .hoverActive\\:lightDark\\:bg_red:is(:active, [data-active])[data-mode=\"light\"] {\n background: red;\n}\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > css - boolean utility::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > css - boolean utility", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "truncate": false + } + ], + "options": null, + "expected": { + "classNames": [ + "trunc_false" + ], + "css": "" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > css - boolean utility::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > css - boolean utility", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "truncate": true + } + ], + "options": null, + "expected": { + "classNames": [ + "trunc_true" + ], + "css": "@layer utilities {\n .trunc_true {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > css::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > css", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "color": "red !important", + "border": "1px solid token(colors.red.100)", + "bg": "blue.300", + "textStyle": "headline.h1", + "w": [ + 1, + 2, + null, + null, + 3 + ], + "fontSize": { + "base": "xs", + "sm": "sm", + "_hover": { + "base": "md", + "md": "lg", + "_focus": "xl" + }, + "_dark": "2xl" + }, + "sm": { + "color": "yellow", + "backgroundColor": { + "base": "red", + "_hover": "green" + } + }, + "&[data-attr='test']": { + "color": "green", + "_expanded": { + "color": "purple", + ".target &": { + "color": { + "base": "cyan", + "_open": "orange", + "xl": "pink" + } + } + } + } + } + ], + "options": null, + "expected": { + "classNames": [ + "bd_1px_solid_token\\(colors\\.red\\.100\\)", + "bg_blue\\.300", + "c_red", + "textStyle_headline\\.h1", + "fs_xs", + "w_1", + "dark\\:fs_2xl", + "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:c_green", + "hover\\:fs_md", + "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:c_purple", + "hover\\:focus\\:fs_xl", + "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:c_cyan", + "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:open\\:c_orange", + "sm\\:fs_sm", + "sm\\:c_yellow", + "sm\\:bg-c_red", + "sm\\:w_2", + "sm\\:hover\\:bg-c_green", + "hover\\:md\\:fs_lg", + "xl\\:w_3", + "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:xl\\:c_pink" + ], + "css": "@layer utilities {\n @layer compositions {\n .textStyle_headline\\.h1 {\n font-size: 2rem;\n font-weight: var(--font-weights-bold);\n}\n}\n\n .bd_1px_solid_token\\(colors\\.red\\.100\\) {\n border: 1px solid var(--colors-red-100);\n}\n\n .bg_blue\\.300 {\n background: var(--colors-blue-300);\n}\n\n .c_red\\! {\n color: red !important;\n}\n\n .fs_xs {\n font-size: var(--font-sizes-xs);\n}\n\n .w_1 {\n width: var(--sizes-1);\n}\n\n [data-theme=dark] .dark\\:fs_2xl,.dark .dark\\:fs_2xl,.dark\\:fs_2xl.dark,.dark\\:fs_2xl[data-theme=dark] {\n font-size: var(--font-sizes-2xl);\n}\n\n .\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:c_green[data-attr='test'] {\n color: green;\n}\n\n .hover\\:fs_md:is(:hover, [data-hover]) {\n font-size: var(--font-sizes-md);\n}\n\n .\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:c_purple[data-attr='test']:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) {\n color: purple;\n}\n\n .hover\\:focus\\:fs_xl:is(:hover, [data-hover]):is(:focus, [data-focus]) {\n font-size: var(--font-sizes-xl);\n}\n\n .target .\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:c_cyan[data-attr='test']:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) {\n color: cyan;\n}\n\n .target .\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:open\\:c_orange[data-attr='test']:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]):is([open], [data-open], [data-state=\"open\"], :popover-open) {\n color: orange;\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:fs_sm {\n font-size: var(--font-sizes-sm);\n}\n .sm\\:c_yellow {\n color: yellow;\n}\n .sm\\:bg-c_red {\n background-color: red;\n}\n .sm\\:w_2 {\n width: var(--sizes-2);\n}\n .sm\\:hover\\:bg-c_green:is(:hover, [data-hover]) {\n background-color: green;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .hover\\:md\\:fs_lg:is(:hover, [data-hover]) {\n font-size: var(--font-sizes-lg);\n}\n}\n\n @media screen and (min-width: 80rem) {\n .xl\\:w_3 {\n width: var(--sizes-3);\n}\n .target .\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:xl\\:c_pink[data-attr='test']:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) {\n color: pink;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > mixed together::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > mixed together", + "line": 930 + }, + "userConfig": { + "theme": { + "extend": { + "recipes": { + "button": { + "className": "btn", + "base": { + "lineHeight": "1.2", + "_focusVisible": { + "boxShadow": "outline" + }, + "_disabled": { + "opacity": 0.4 + }, + "_hover": { + "_disabled": { + "bg": "initial" + } + }, + "display": "inline-flex", + "outline": "none", + "_focus": { + "zIndex": 1 + } + } + } + } + } + } + }, + "inputs": [ + { + "color": "blue.300", + "_hover": { + "color": "red.400" + } + } + ], + "configPatch": { + "theme": { + "recipes": { + "button": { + "$value": { + "className": "btn", + "base": { + "lineHeight": "1.2", + "_focusVisible": { + "boxShadow": "outline" + }, + "_disabled": { + "opacity": 0.4 + }, + "_hover": { + "_disabled": { + "bg": "initial" + } + }, + "display": "inline-flex", + "outline": "none", + "_focus": { + "zIndex": 1 + } + } + } + } + } + } + }, + "options": null, + "expected": { + "classNames": [ + "c_blue\\.300", + "hover\\:c_red\\.400", + "btn", + "bd_2px_solid_token\\(colors\\.green\\.100\\)", + "fs_12px", + "fs_14px", + "fs_16px" + ], + "css": "@layer recipes {\n @layer _base {\n .btn {\n outline: var(--borders-none);\n line-height: 1.2;\n display: inline-flex;\n}\n\n .btn:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {\n opacity: 0.4;\n}\n\n .btn:is(:focus-visible, [data-focus-visible]) {\n box-shadow: outline;\n}\n\n .btn:is(:focus, [data-focus]) {\n z-index: 1;\n}\n\n .btn:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {\n background: initial;\n}\n}\n}\n\n@layer utilities {\n .bd_2px_solid_token\\(colors\\.green\\.100\\) {\n border: 2px solid var(--colors-green-100);\n}\n\n .c_blue\\.300 {\n color: var(--colors-blue-300);\n}\n\n .fs_12px {\n font-size: 12px;\n}\n\n .fs_14px {\n font-size: 14px;\n}\n\n .fs_16px {\n font-size: 16px;\n}\n\n .hover\\:c_red\\.400:is(:hover, [data-hover]) {\n color: var(--colors-red-400);\n}\n}" + }, + "unsupported": "non-css calls (recipe, cva)" + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > simple - hash: true + custom toHash::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > simple - hash: true + custom toHash", + "line": 9 + }, + "unsupported": "config hooks" + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > simple - hash: true::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > simple - hash: true", + "line": 9 + }, + "userConfig": { + "hash": true + }, + "inputs": [ + { + "margin": 2, + "mx": "token(spacing.2)", + "my": "-2", + "color": "blue.300" + } + ], + "configPatch": { + "hash": { + "$value": true + } + }, + "options": null, + "expected": { + "classNames": [ + "AxiDH", + "hHAKfe", + "pWVwj", + "hDAFEs" + ], + "css": "@layer utilities {\n .AxiDH {\n margin: var(--ebuyxV);\n}\n\n .hHAKfe {\n margin-inline: var(--ebuyxV);\n}\n\n .pWVwj {\n margin-block: calc(var(--ebuyxV) * -1);\n}\n\n .hDAFEs {\n color: var(--bMEoOM);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > simple with formatTokenName::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > simple with formatTokenName", + "line": 9 + }, + "unsupported": "config hooks" + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > simple::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > simple", + "line": 9 + }, + "userConfig": null, + "inputs": [ + { + "margin": 2, + "mx": "token(spacing.2)", + "my": "-2", + "color": "blue.300" + } + ], + "options": null, + "expected": { + "classNames": [ + "m_2", + "mx_token\\(spacing\\.2\\)", + "my_-2", + "c_blue\\.300" + ], + "css": "@layer utilities {\n .m_2 {\n margin: var(--spacing-2);\n}\n\n .mx_token\\(spacing\\.2\\) {\n margin-inline: var(--spacing-2);\n}\n\n .my_-2 {\n margin-block: calc(var(--spacing-2) * -1);\n}\n\n .c_blue\\.300 {\n color: var(--colors-blue-300);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > token() with formatTokenName::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/rule-processor.test.ts", + "test": "rule processor > token() with formatTokenName", + "line": 9 + }, + "unsupported": "config hooks" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.static-css.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.static-css.test.ts.json new file mode 100644 index 00000000000..626301e0364 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.static-css.test.ts.json @@ -0,0 +1,3110 @@ +{ + "source": "packages/core/__tests__/static-css.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > all recipes::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > all recipes", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "recipes": "*" + } + ], + "expected": { + "styles": [ + { + "color": "ButtonHighlight" + } + ], + "css": "@layer recipes {\n @layer _base {\n .textStyle {\n font-family: var(--fonts-mono);\n}\n\n .textStyle > :not([hidden]) ~ :not([hidden]) {\n border-inline-start-width: 20px;\n border-inline-end-width: 0px;\n}\n\n [data-theme=dark] .tooltipStyle[data-tooltip],.dark .tooltipStyle[data-tooltip],.tooltipStyle[data-tooltip].dark,.tooltipStyle[data-tooltip][data-theme=dark],[data-theme=dark] .tooltipStyle [data-tooltip],.dark .tooltipStyle [data-tooltip],.tooltipStyle [data-tooltip].dark,.tooltipStyle [data-tooltip][data-theme=dark] {\n color: red;\n}\n\n .buttonStyle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .buttonStyle:is(:hover, [data-hover]) {\n background-color: var(--colors-red-200);\n font-size: var(--font-sizes-3xl);\n color: white;\n}\n}\n\n .textStyle--size_h1 {\n font-size: 5rem;\n line-height: 1em;\n font-weight: 800;\n}\n\n .textStyle--size_h2 {\n font-size: 3rem;\n line-height: 1.2em;\n font-weight: 700;\n letter-spacing: -0.03em;\n}\n\n .card--rounded_true {\n border-radius: 0.375rem;\n}\n\n .buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n\n .buttonStyle--variant_solid {\n background-color: blue;\n color: white;\n}\n\n .buttonStyle--variant_solid[data-disabled] {\n background-color: gray;\n color: black;\n font-size: var(--font-sizes-2xl);\n}\n\n .buttonStyle--variant_solid:is(:hover, [data-hover]) {\n background-color: darkblue;\n}\n\n .buttonStyle--size_sm {\n padding: 0 0.5rem;\n height: 2.5rem;\n min-width: 2.5rem;\n}\n\n .buttonStyle--variant_outline {\n border: 1px solid blue;\n background-color: transparent;\n color: blue;\n}\n\n .buttonStyle--variant_outline[data-disabled] {\n border: 1px solid gray;\n background-color: transparent;\n color: gray;\n}\n\n .buttonStyle--variant_outline:is(:hover, [data-hover]) {\n background-color: blue;\n color: white;\n}\n}\n\n@layer recipes.slots {\n @layer _base {\n .checkbox__root {\n gap: 2px;\n display: flex;\n align-items: center;\n}\n\n .checkbox__control {\n border-width: 1px;\n border-radius: var(--radii-sm);\n}\n\n .checkbox__label {\n margin-inline-start: 2px;\n}\n\n .badge__title {\n background: red.300;\n border-radius: var(--radii-sm);\n}\n}\n\n .checkbox__control--size_sm {\n font-size: 2rem;\n font-weight: var(--font-weights-bold);\n width: var(--sizes-8);\n height: var(--sizes-8);\n}\n\n .checkbox__label--size_sm {\n font-size: var(--font-sizes-sm);\n}\n\n .checkbox__control--size_md {\n width: var(--sizes-10);\n height: var(--sizes-10);\n}\n\n .checkbox__label--size_md {\n font-size: var(--font-sizes-md);\n}\n\n .checkbox__control--size_lg {\n width: var(--sizes-12);\n height: var(--sizes-12);\n}\n\n .checkbox__label--size_lg {\n font-size: var(--font-sizes-lg);\n}\n\n .badge__title--size_sm {\n padding-inline: var(--spacing-4);\n}\n\n .badge__body--size_sm {\n color: red;\n}\n\n .badge__title--raised_true {\n box-shadow: var(--shadows-md);\n}\n}\n\n@layer utilities {\n .c_ButtonHighlight {\n color: ButtonHighlight;\n}\n}" + }, + "unsupported": "static css for recipes" + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > arbitrary condition or selector::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > arbitrary condition or selector", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "css": [ + { + "properties": { + "fontSize": [ + "7xl", + "8xl" + ] + }, + "conditions": [ + "@media (min-width: 24rem)", + ".mobile &" + ] + } + ] + } + ], + "expected": { + "styles": [ + { + "fontSize": { + "base": "7xl", + "@media (min-width: 24rem)": "7xl", + ".mobile &": "7xl" + } + }, + { + "fontSize": { + "base": "8xl", + "@media (min-width: 24rem)": "8xl", + ".mobile &": "8xl" + } + } + ], + "css": "@layer utilities {\n .fs_7xl {\n font-size: var(--font-sizes-7xl);\n}\n\n .fs_8xl {\n font-size: var(--font-sizes-8xl);\n}\n\n .mobile .\\[\\.mobile_\\&\\]\\:fs_7xl {\n font-size: var(--font-sizes-7xl);\n}\n\n .mobile .\\[\\.mobile_\\&\\]\\:fs_8xl {\n font-size: var(--font-sizes-8xl);\n}\n\n @media (min-width: 24rem) {\n .\\[\\@media_\\(min-width\\:_24rem\\)\\]\\:fs_7xl {\n font-size: var(--font-sizes-7xl);\n}\n .\\[\\@media_\\(min-width\\:_24rem\\)\\]\\:fs_8xl {\n font-size: var(--font-sizes-8xl);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > container query::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > container query", + "line": 2177 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + }, + "containerNames": { + "$value": [ + "", + "pb" + ] + } + } + }, + "inputs": [ + { + "css": [ + { + "properties": { + "fontSize": [ + "7xl", + "8xl" + ], + "fontWeight": [ + "*" + ] + }, + "conditions": [ + "@pb/sm", + "@pb/md" + ] + } + ] + } + ], + "expected": { + "styles": [ + { + "fontSize": { + "base": "7xl", + "@pb/sm": "7xl", + "@pb/md": "7xl" + } + }, + { + "fontSize": { + "base": "8xl", + "@pb/sm": "8xl", + "@pb/md": "8xl" + } + }, + { + "fontWeight": { + "base": "thin", + "@pb/sm": "thin", + "@pb/md": "thin" + } + }, + { + "fontWeight": { + "base": "extralight", + "@pb/sm": "extralight", + "@pb/md": "extralight" + } + }, + { + "fontWeight": { + "base": "light", + "@pb/sm": "light", + "@pb/md": "light" + } + }, + { + "fontWeight": { + "base": "normal", + "@pb/sm": "normal", + "@pb/md": "normal" + } + }, + { + "fontWeight": { + "base": "medium", + "@pb/sm": "medium", + "@pb/md": "medium" + } + }, + { + "fontWeight": { + "base": "semibold", + "@pb/sm": "semibold", + "@pb/md": "semibold" + } + }, + { + "fontWeight": { + "base": "bold", + "@pb/sm": "bold", + "@pb/md": "bold" + } + }, + { + "fontWeight": { + "base": "extrabold", + "@pb/sm": "extrabold", + "@pb/md": "extrabold" + } + }, + { + "fontWeight": { + "base": "black", + "@pb/sm": "black", + "@pb/md": "black" + } + } + ], + "css": "@layer utilities {\n .fs_7xl {\n font-size: var(--font-sizes-7xl);\n}\n\n .fs_8xl {\n font-size: var(--font-sizes-8xl);\n}\n\n .fw_thin {\n font-weight: var(--font-weights-thin);\n}\n\n .fw_extralight {\n font-weight: var(--font-weights-extralight);\n}\n\n .fw_light {\n font-weight: var(--font-weights-light);\n}\n\n .fw_normal {\n font-weight: var(--font-weights-normal);\n}\n\n .fw_medium {\n font-weight: var(--font-weights-medium);\n}\n\n .fw_semibold {\n font-weight: var(--font-weights-semibold);\n}\n\n .fw_bold {\n font-weight: var(--font-weights-bold);\n}\n\n .fw_extrabold {\n font-weight: var(--font-weights-extrabold);\n}\n\n .fw_black {\n font-weight: var(--font-weights-black);\n}\n\n @container pb (min-width: 24rem) {\n .\\@pb\\/sm\\:fs_7xl {\n font-size: var(--font-sizes-7xl);\n}\n .\\@pb\\/sm\\:fs_8xl {\n font-size: var(--font-sizes-8xl);\n}\n .\\@pb\\/sm\\:fw_thin {\n font-weight: var(--font-weights-thin);\n}\n .\\@pb\\/sm\\:fw_extralight {\n font-weight: var(--font-weights-extralight);\n}\n .\\@pb\\/sm\\:fw_light {\n font-weight: var(--font-weights-light);\n}\n .\\@pb\\/sm\\:fw_normal {\n font-weight: var(--font-weights-normal);\n}\n .\\@pb\\/sm\\:fw_medium {\n font-weight: var(--font-weights-medium);\n}\n .\\@pb\\/sm\\:fw_semibold {\n font-weight: var(--font-weights-semibold);\n}\n .\\@pb\\/sm\\:fw_bold {\n font-weight: var(--font-weights-bold);\n}\n .\\@pb\\/sm\\:fw_extrabold {\n font-weight: var(--font-weights-extrabold);\n}\n .\\@pb\\/sm\\:fw_black {\n font-weight: var(--font-weights-black);\n}\n}\n\n @container pb (min-width: 28rem) {\n .\\@pb\\/md\\:fs_7xl {\n font-size: var(--font-sizes-7xl);\n}\n .\\@pb\\/md\\:fs_8xl {\n font-size: var(--font-sizes-8xl);\n}\n .\\@pb\\/md\\:fw_thin {\n font-weight: var(--font-weights-thin);\n}\n .\\@pb\\/md\\:fw_extralight {\n font-weight: var(--font-weights-extralight);\n}\n .\\@pb\\/md\\:fw_light {\n font-weight: var(--font-weights-light);\n}\n .\\@pb\\/md\\:fw_normal {\n font-weight: var(--font-weights-normal);\n}\n .\\@pb\\/md\\:fw_medium {\n font-weight: var(--font-weights-medium);\n}\n .\\@pb\\/md\\:fw_semibold {\n font-weight: var(--font-weights-semibold);\n}\n .\\@pb\\/md\\:fw_bold {\n font-weight: var(--font-weights-bold);\n}\n .\\@pb\\/md\\:fw_extrabold {\n font-weight: var(--font-weights-extrabold);\n}\n .\\@pb\\/md\\:fw_black {\n font-weight: var(--font-weights-black);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > recipe + compoundVariants::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > recipe + compoundVariants", + "line": 2097 + }, + "configPatch": { + "theme": { + "keyframes": null, + "breakpoints": null, + "tokens": null, + "textStyles": null, + "containerSizes": null, + "semanticTokens": null, + "slotRecipes": null, + "recipes": { + "withCompound": { + "$value": { + "className": "withCompound", + "base": { + "fontSize": "1px" + }, + "variants": { + "size": { + "sm": { + "fontSize": "2px" + } + } + }, + "compoundVariants": [ + { + "size": [ + "sm" + ], + "css": { + "fontSize": "3px", + "_hover": { + "fontSize": "4px", + "_dark": { + "fontSize": "5px" + } + } + } + } + ] + } + } + } + } + }, + "inputs": [ + { + "recipes": { + "withCompound": [ + "*" + ] + } + } + ], + "expected": { + "styles": [ + { + "fontSize": "3px" + }, + { + "_hover": { + "fontSize": "4px", + "_dark": { + "fontSize": "5px" + } + } + } + ], + "css": "@layer recipes {\n @layer _base {\n .withCompound {\n font-size: 1px;\n}\n}\n\n .withCompound--size_sm {\n font-size: 2px;\n}\n}\n\n@layer utilities {\n .fs_3px {\n font-size: 3px;\n}\n\n .hover\\:fs_4px:is(:hover, [data-hover]) {\n font-size: 4px;\n}\n\n [data-theme=dark] .hover\\:dark\\:fs_5px:is(:hover, [data-hover]),.dark .hover\\:dark\\:fs_5px:is(:hover, [data-hover]),.hover\\:dark\\:fs_5px:is(:hover, [data-hover]).dark,.hover\\:dark\\:fs_5px:is(:hover, [data-hover])[data-theme=dark] {\n font-size: 5px;\n}\n}" + }, + "unsupported": "static css for recipes" + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > simple pattern::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > simple pattern", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "patterns": { + "aspectRatio": [ + { + "properties": { + "ratio": [ + "4/3", + "16/9", + "1/1" + ] + } + }, + { + "properties": { + "ratio": [ + "1/4" + ] + }, + "conditions": [ + "md" + ] + } + ], + "spacer": [ + { + "properties": { + "size": [ + "sm", + "md", + "lg" + ] + } + } + ], + "circle": [ + { + "properties": { + "size": [ + "sm", + "md", + "lg" + ] + } + } + ], + "bleed": [ + { + "properties": { + "inline": [ + "*" + ] + } + } + ], + "divider": [ + { + "properties": { + "orientation": [ + "*" + ], + "thickness": [ + "*" + ] + } + } + ], + "float": [ + "*" + ] + } + } + ], + "expected": { + "styles": [], + "css": "@layer utilities {\n .\\--bleed-x_token\\(spacing\\.20\\,_20\\) {\n --bleed-x: var(--spacing-20, 20);\n}\n\n .\\--bleed-y_token\\(spacing\\.0\\,_0\\) {\n --bleed-y: 0;\n}\n\n .\\--bleed-x_token\\(spacing\\.40\\,_40\\) {\n --bleed-x: var(--spacing-40, 40);\n}\n\n .\\--bleed-x_token\\(spacing\\.60\\,_60\\) {\n --bleed-x: var(--spacing-60, 60);\n}\n\n .\\--bleed-x_token\\(spacing\\.auto\\,_auto\\) {\n --bleed-x: auto;\n}\n\n .\\--bleed-x_token\\(spacing\\.-20\\,_-20\\) {\n --bleed-x: calc(var(--spacing-20) * -1, -20);\n}\n\n .\\--bleed-x_token\\(spacing\\.-40\\,_-40\\) {\n --bleed-x: calc(var(--spacing-40) * -1, -40);\n}\n\n .\\--bleed-x_token\\(spacing\\.-60\\,_-60\\) {\n --bleed-x: calc(var(--spacing-60) * -1, -60);\n}\n\n .\\--thickness_1px {\n --thickness: 1px;\n}\n\n .\\--thickness_20 {\n --thickness: 20;\n}\n\n .\\--thickness_40 {\n --thickness: 40;\n}\n\n .\\--thickness_60 {\n --thickness: 60;\n}\n\n .\\--thickness_breakpoint-sm {\n --thickness: breakpoint-sm;\n}\n\n .\\--thickness_breakpoint-md {\n --thickness: breakpoint-md;\n}\n\n .\\--thickness_breakpoint-lg {\n --thickness: breakpoint-lg;\n}\n\n .\\--thickness_breakpoint-xl {\n --thickness: breakpoint-xl;\n}\n\n .\\--thickness_breakpoint-2xl {\n --thickness: breakpoint-2xl;\n}\n\n .flex_0_0_token\\(spacing\\.sm\\,_sm\\) {\n flex: 0 0 sm;\n}\n\n .flex_0_0_token\\(spacing\\.md\\,_md\\) {\n flex: 0 0 md;\n}\n\n .flex_0_0_token\\(spacing\\.lg\\,_lg\\) {\n flex: 0 0 lg;\n}\n\n .flex_0_0_auto {\n flex: 0 0 auto;\n}\n\n .bdr_9999px {\n border-radius: 9999px;\n}\n\n .mx_calc\\(var\\(--bleed-x\\,_0\\)_\\*_-1\\) {\n margin-inline: calc(var(--bleed-x, 0) * -1);\n}\n\n .my_calc\\(var\\(--bleed-y\\,_0\\)_\\*_-1\\) {\n margin-block: calc(var(--bleed-y, 0) * -1);\n}\n\n .pos_relative {\n position: relative;\n}\n\n .as_stretch {\n align-self: stretch;\n}\n\n .justify-self_stretch {\n justify-self: stretch;\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .bd-be-w_var\\(--thickness\\) {\n border-block-end-width: var(--thickness);\n}\n\n .bd-e-w_var\\(--thickness\\) {\n border-inline-end-width: var(--thickness);\n}\n\n .d_inline-flex {\n display: inline-flex;\n}\n\n .pos_absolute {\n position: absolute;\n}\n\n .inset-bs_0 {\n inset-block-start: 0;\n}\n\n .inset-be_auto {\n inset-block-end: auto;\n}\n\n .inset-s_auto {\n inset-inline-start: auto;\n}\n\n .inset-e_20 {\n inset-inline-end: var(--spacing-20);\n}\n\n .translate_50\\%_-50\\% {\n translate: 50% -50%;\n}\n\n .inset-e_40 {\n inset-inline-end: var(--spacing-40);\n}\n\n .inset-e_60 {\n inset-inline-end: var(--spacing-60);\n}\n\n .inset-e_-20 {\n inset-inline-end: calc(var(--spacing-20) * -1);\n}\n\n .inset-e_-40 {\n inset-inline-end: calc(var(--spacing-40) * -1);\n}\n\n .inset-e_-60 {\n inset-inline-end: calc(var(--spacing-60) * -1);\n}\n\n .inset-bs_20 {\n inset-block-start: var(--spacing-20);\n}\n\n .inset-e_0 {\n inset-inline-end: 0;\n}\n\n .inset-bs_40 {\n inset-block-start: var(--spacing-40);\n}\n\n .inset-bs_60 {\n inset-block-start: var(--spacing-60);\n}\n\n .inset-bs_-20 {\n inset-block-start: calc(var(--spacing-20) * -1);\n}\n\n .inset-bs_-40 {\n inset-block-start: calc(var(--spacing-40) * -1);\n}\n\n .inset-bs_-60 {\n inset-block-start: calc(var(--spacing-60) * -1);\n}\n\n .inset-bs_auto {\n inset-block-start: auto;\n}\n\n .inset-be_0 {\n inset-block-end: 0;\n}\n\n .translate_50\\%_50\\% {\n translate: 50% 50%;\n}\n\n .inset-s_0 {\n inset-inline-start: 0;\n}\n\n .inset-e_auto {\n inset-inline-end: auto;\n}\n\n .translate_-50\\%_50\\% {\n translate: -50% 50%;\n}\n\n .translate_-50\\%_-50\\% {\n translate: -50% -50%;\n}\n\n .inset-s_50\\% {\n inset-inline-start: 50%;\n}\n\n .inset-e_50\\% {\n inset-inline-end: 50%;\n}\n\n .inset-bs_50\\% {\n inset-block-start: 50%;\n}\n\n .inset-be_50\\% {\n inset-block-end: 50%;\n}\n\n .w_sm {\n width: sm;\n}\n\n .h_sm {\n height: sm;\n}\n\n .w_md {\n width: md;\n}\n\n .h_md {\n height: md;\n}\n\n .w_lg {\n width: lg;\n}\n\n .h_lg {\n height: lg;\n}\n\n .w_100\\% {\n width: 100%;\n}\n\n .h_100\\% {\n height: 100%;\n}\n\n .\\[\\&\\>\\*\\]\\:inset_0>* {\n inset: 0;\n}\n\n .\\[\\&\\>\\*\\]\\:ov_hidden>* {\n overflow: hidden;\n}\n\n .before\\:content_\\\"\\\"::before {\n content: \"\";\n}\n\n .before\\:d_block::before {\n display: block;\n}\n\n .\\[\\&\\>\\*\\]\\:d_flex>* {\n display: flex;\n}\n\n .\\[\\&\\>\\*\\]\\:jc_center>* {\n justify-content: center;\n}\n\n .\\[\\&\\>\\*\\]\\:ai_center>* {\n align-items: center;\n}\n\n .\\[\\&\\>\\*\\]\\:pos_absolute>* {\n position: absolute;\n}\n\n .\\[\\&\\>img\\,_\\&\\>video\\]\\:obj-f_cover>img,.\\[\\&\\>img\\,_\\&\\>video\\]\\:obj-f_cover>video {\n object-fit: cover;\n}\n\n .before\\:h_0::before {\n height: 0;\n}\n\n .before\\:pb_NaN\\%::before {\n padding-bottom: NaN%;\n}\n\n .\\[\\&\\>\\*\\]\\:w_100\\%>* {\n width: 100%;\n}\n\n .\\[\\&\\>\\*\\]\\:h_100\\%>* {\n height: 100%;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:pos_relative {\n position: relative;\n}\n .md\\:\\[\\&\\>\\*\\]\\:inset_0>* {\n inset: 0;\n}\n .md\\:\\[\\&\\>\\*\\]\\:ov_hidden>* {\n overflow: hidden;\n}\n .md\\:before\\:content_\\\"\\\"::before {\n content: \"\";\n}\n .md\\:before\\:d_block::before {\n display: block;\n}\n .md\\:\\[\\&\\>\\*\\]\\:d_flex>* {\n display: flex;\n}\n .md\\:\\[\\&\\>\\*\\]\\:jc_center>* {\n justify-content: center;\n}\n .md\\:\\[\\&\\>\\*\\]\\:ai_center>* {\n align-items: center;\n}\n .md\\:\\[\\&\\>\\*\\]\\:pos_absolute>* {\n position: absolute;\n}\n .md\\:\\[\\&\\>img\\,_\\&\\>video\\]\\:obj-f_cover>img,.md\\:\\[\\&\\>img\\,_\\&\\>video\\]\\:obj-f_cover>video {\n object-fit: cover;\n}\n .md\\:before\\:h_0::before {\n height: 0;\n}\n .md\\:before\\:pb_NaN\\%::before {\n padding-bottom: NaN%;\n}\n .md\\:\\[\\&\\>\\*\\]\\:w_100\\%>* {\n width: 100%;\n}\n .md\\:\\[\\&\\>\\*\\]\\:h_100\\%>* {\n height: 100%;\n}\n}\n}" + }, + "unsupported": "static css for patterns" + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > simple recipe::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > simple recipe", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "recipes": { + "buttonStyle": [ + { + "size": [ + "md" + ], + "conditions": [ + "md" + ] + } + ] + } + } + ], + "expected": { + "styles": [], + "css": "@layer recipes {\n @layer _base {\n .buttonStyle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .buttonStyle:is(:hover, [data-hover]) {\n background-color: var(--colors-red-200);\n font-size: var(--font-sizes-3xl);\n color: white;\n}\n}\n\n .buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n\n .buttonStyle--variant_solid {\n background-color: blue;\n color: white;\n}\n\n .buttonStyle--variant_solid[data-disabled] {\n background-color: gray;\n color: black;\n font-size: var(--font-sizes-2xl);\n}\n\n .buttonStyle--variant_solid:is(:hover, [data-hover]) {\n background-color: darkblue;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n}\n}" + }, + "unsupported": "static css for recipes" + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > slot recipe::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > slot recipe", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "recipes": { + "checkbox": [ + { + "size": [ + "lg" + ], + "conditions": [ + "lg" + ] + } + ] + } + } + ], + "expected": { + "styles": [], + "css": "@layer recipes.slots {\n @layer _base {\n .checkbox__root {\n gap: 2px;\n display: flex;\n align-items: center;\n}\n\n .checkbox__control {\n border-width: 1px;\n border-radius: var(--radii-sm);\n}\n\n .checkbox__label {\n margin-inline-start: 2px;\n}\n}\n\n .checkbox__control--size_sm {\n font-size: 2rem;\n font-weight: var(--font-weights-bold);\n width: var(--sizes-8);\n height: var(--sizes-8);\n}\n\n .checkbox__label--size_sm {\n font-size: var(--font-sizes-sm);\n}\n\n .checkbox__control--size_lg {\n width: var(--sizes-12);\n height: var(--sizes-12);\n}\n\n .checkbox__label--size_lg {\n font-size: var(--font-sizes-lg);\n}\n\n @media screen and (min-width: 64rem) {\n .lg\\:checkbox__control--size_lg {\n width: var(--sizes-12);\n height: var(--sizes-12);\n}\n .lg\\:checkbox__label--size_lg {\n font-size: var(--font-sizes-lg);\n}\n}\n}" + }, + "unsupported": "static css for recipes" + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > using * as RecipeRule::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > using * as RecipeRule", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "css": [], + "recipes": { + "buttonStyle": [ + "*" + ] + } + } + ], + "expected": { + "styles": [], + "css": "@layer recipes {\n @layer _base {\n .buttonStyle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .buttonStyle:is(:hover, [data-hover]) {\n background-color: var(--colors-red-200);\n font-size: var(--font-sizes-3xl);\n color: white;\n}\n}\n\n .buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n\n .buttonStyle--variant_solid {\n background-color: blue;\n color: white;\n}\n\n .buttonStyle--variant_solid[data-disabled] {\n background-color: gray;\n color: black;\n font-size: var(--font-sizes-2xl);\n}\n\n .buttonStyle--variant_solid:is(:hover, [data-hover]) {\n background-color: darkblue;\n}\n\n .buttonStyle--size_sm {\n padding: 0 0.5rem;\n height: 2.5rem;\n min-width: 2.5rem;\n}\n\n .buttonStyle--variant_outline {\n border: 1px solid blue;\n background-color: transparent;\n color: blue;\n}\n\n .buttonStyle--variant_outline[data-disabled] {\n border: 1px solid gray;\n background-color: transparent;\n color: gray;\n}\n\n .buttonStyle--variant_outline:is(:hover, [data-hover]) {\n background-color: blue;\n color: white;\n}\n}" + }, + "unsupported": "static css for recipes" + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > using * in CssRule and conditions list::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > using * in CssRule and conditions list", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "css": [ + { + "properties": { + "color": [ + "*" + ] + }, + "conditions": [ + "hover", + "focus" + ] + } + ] + } + ], + "expected": { + "styles": [ + { + "color": { + "base": "red.200", + "_hover": "red.200", + "_focus": "red.200" + } + }, + { + "color": { + "base": "blue.200", + "_hover": "blue.200", + "_focus": "blue.200" + } + }, + { + "color": { + "base": "green.200", + "_hover": "green.200", + "_focus": "green.200" + } + }, + { + "color": { + "base": "colorPalette.200", + "_hover": "colorPalette.200", + "_focus": "colorPalette.200" + } + } + ], + "css": "@layer utilities {\n .c_red\\.200 {\n color: var(--colors-red-200);\n}\n\n .c_blue\\.200 {\n color: var(--colors-blue-200);\n}\n\n .c_green\\.200 {\n color: var(--colors-green-200);\n}\n\n .c_colorPalette\\.200 {\n color: var(--colors-color-palette-200);\n}\n\n .focus\\:c_red\\.200:is(:focus, [data-focus]) {\n color: var(--colors-red-200);\n}\n\n .focus\\:c_blue\\.200:is(:focus, [data-focus]) {\n color: var(--colors-blue-200);\n}\n\n .focus\\:c_green\\.200:is(:focus, [data-focus]) {\n color: var(--colors-green-200);\n}\n\n .focus\\:c_colorPalette\\.200:is(:focus, [data-focus]) {\n color: var(--colors-color-palette-200);\n}\n\n .hover\\:c_red\\.200:is(:hover, [data-hover]) {\n color: var(--colors-red-200);\n}\n\n .hover\\:c_blue\\.200:is(:hover, [data-hover]) {\n color: var(--colors-blue-200);\n}\n\n .hover\\:c_green\\.200:is(:hover, [data-hover]) {\n color: var(--colors-green-200);\n}\n\n .hover\\:c_colorPalette\\.200:is(:hover, [data-hover]) {\n color: var(--colors-color-palette-200);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > using * in CssRule::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > using * in CssRule", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "css": [ + { + "properties": { + "margin": [ + "*" + ] + } + } + ] + } + ], + "expected": { + "styles": [ + { + "margin": "20" + }, + { + "margin": "40" + }, + { + "margin": "60" + }, + { + "margin": "auto" + }, + { + "margin": "-20" + }, + { + "margin": "-40" + }, + { + "margin": "-60" + } + ], + "css": "@layer utilities {\n .m_20 {\n margin: var(--spacing-20);\n}\n\n .m_40 {\n margin: var(--spacing-40);\n}\n\n .m_60 {\n margin: var(--spacing-60);\n}\n\n .m_auto {\n margin: auto;\n}\n\n .m_-20 {\n margin: calc(var(--spacing-20) * -1);\n}\n\n .m_-40 {\n margin: calc(var(--spacing-40) * -1);\n}\n\n .m_-60 {\n margin: calc(var(--spacing-60) * -1);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > using * in CssRule::2", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > using * in CssRule", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "css": [ + { + "properties": { + "padding": [ + "*" + ] + } + } + ] + } + ], + "expected": { + "styles": [ + { + "padding": "20" + }, + { + "padding": "40" + }, + { + "padding": "60" + }, + { + "padding": "-20" + }, + { + "padding": "-40" + }, + { + "padding": "-60" + } + ], + "css": "@layer utilities {\n .p_20 {\n padding: var(--spacing-20);\n}\n\n .p_40 {\n padding: var(--spacing-40);\n}\n\n .p_60 {\n padding: var(--spacing-60);\n}\n\n .p_-20 {\n padding: calc(var(--spacing-20) * -1);\n}\n\n .p_-40 {\n padding: calc(var(--spacing-40) * -1);\n}\n\n .p_-60 {\n padding: calc(var(--spacing-60) * -1);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css > works::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css > works", + "line": 40 + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "red.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "blue.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": { + "value": { + "$value": "green.200" + } + }, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "green" + ] + }, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "sizes": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": { + "value": { + "$value": "20px" + } + }, + "24": null, + "28": null, + "32": null, + "36": null, + "40": { + "value": { + "$value": "40px" + } + }, + "44": null, + "48": null, + "52": null, + "56": null, + "60": { + "value": { + "$value": "60px" + } + }, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "3xl": null, + "4xl": null, + "5xl": null, + "6xl": null, + "7xl": null, + "8xl": null, + "prose": null, + "full": null, + "min": null, + "max": null, + "fit": null + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + } + } + }, + "inputs": [ + { + "css": [ + { + "conditions": [ + "sm", + "md" + ], + "properties": { + "margin": [ + "20px", + "40px" + ], + "padding": [ + "20px", + "40px", + "60px" + ] + } + }, + { + "conditions": [ + "light", + "dark" + ], + "properties": { + "color": [ + "*" + ] + } + } + ], + "recipes": { + "buttonStyle": [ + { + "size": [ + "sm", + "md" + ], + "conditions": [ + "sm", + "md" + ] + }, + { + "variant": [ + "primary", + "secondary" + ] + } + ], + "tooltipStyle": [ + "*" + ] + } + } + ], + "expected": { + "styles": [ + { + "margin": { + "base": "20px", + "sm": "20px", + "md": "20px" + } + }, + { + "margin": { + "base": "40px", + "sm": "40px", + "md": "40px" + } + }, + { + "padding": { + "base": "20px", + "sm": "20px", + "md": "20px" + } + }, + { + "padding": { + "base": "40px", + "sm": "40px", + "md": "40px" + } + }, + { + "padding": { + "base": "60px", + "sm": "60px", + "md": "60px" + } + }, + { + "color": { + "base": "red.200", + "_light": "red.200", + "_dark": "red.200" + } + }, + { + "color": { + "base": "blue.200", + "_light": "blue.200", + "_dark": "blue.200" + } + }, + { + "color": { + "base": "green.200", + "_light": "green.200", + "_dark": "green.200" + } + }, + { + "color": { + "base": "colorPalette.200", + "_light": "colorPalette.200", + "_dark": "colorPalette.200" + } + } + ], + "css": "@layer recipes {\n @layer _base {\n .buttonStyle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .buttonStyle:is(:hover, [data-hover]) {\n background-color: var(--colors-red-200);\n font-size: var(--font-sizes-3xl);\n color: white;\n}\n\n [data-theme=dark] .tooltipStyle[data-tooltip],.dark .tooltipStyle[data-tooltip],.tooltipStyle[data-tooltip].dark,.tooltipStyle[data-tooltip][data-theme=dark],[data-theme=dark] .tooltipStyle [data-tooltip],.dark .tooltipStyle [data-tooltip],.tooltipStyle [data-tooltip].dark,.tooltipStyle [data-tooltip][data-theme=dark] {\n color: red;\n}\n}\n\n .buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n\n .buttonStyle--variant_solid {\n background-color: blue;\n color: white;\n}\n\n .buttonStyle--variant_solid[data-disabled] {\n background-color: gray;\n color: black;\n font-size: var(--font-sizes-2xl);\n}\n\n .buttonStyle--variant_solid:is(:hover, [data-hover]) {\n background-color: darkblue;\n}\n\n .buttonStyle--size_sm {\n padding: 0 0.5rem;\n height: 2.5rem;\n min-width: 2.5rem;\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:buttonStyle--size_sm {\n padding: 0 0.5rem;\n height: 2.5rem;\n min-width: 2.5rem;\n}\n .sm\\:buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:buttonStyle--size_sm {\n padding: 0 0.5rem;\n height: 2.5rem;\n min-width: 2.5rem;\n}\n .md\\:buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n}\n}\n\n@layer utilities {\n .m_20px {\n margin: 20px;\n}\n\n .m_40px {\n margin: 40px;\n}\n\n .p_20px {\n padding: 20px;\n}\n\n .p_40px {\n padding: 40px;\n}\n\n .p_60px {\n padding: 60px;\n}\n\n .c_red\\.200 {\n color: var(--colors-red-200);\n}\n\n .c_blue\\.200 {\n color: var(--colors-blue-200);\n}\n\n .c_green\\.200 {\n color: var(--colors-green-200);\n}\n\n .c_colorPalette\\.200 {\n color: var(--colors-color-palette-200);\n}\n\n [data-theme=light] .light\\:c_red\\.200,.light .light\\:c_red\\.200,.light\\:c_red\\.200.light,.light\\:c_red\\.200[data-theme=light],[data-theme=dark] .dark\\:c_red\\.200,.dark .dark\\:c_red\\.200,.dark\\:c_red\\.200.dark,.dark\\:c_red\\.200[data-theme=dark] {\n color: var(--colors-red-200);\n}\n\n [data-theme=light] .light\\:c_blue\\.200,.light .light\\:c_blue\\.200,.light\\:c_blue\\.200.light,.light\\:c_blue\\.200[data-theme=light],[data-theme=dark] .dark\\:c_blue\\.200,.dark .dark\\:c_blue\\.200,.dark\\:c_blue\\.200.dark,.dark\\:c_blue\\.200[data-theme=dark] {\n color: var(--colors-blue-200);\n}\n\n [data-theme=light] .light\\:c_green\\.200,.light .light\\:c_green\\.200,.light\\:c_green\\.200.light,.light\\:c_green\\.200[data-theme=light],[data-theme=dark] .dark\\:c_green\\.200,.dark .dark\\:c_green\\.200,.dark\\:c_green\\.200.dark,.dark\\:c_green\\.200[data-theme=dark] {\n color: var(--colors-green-200);\n}\n\n [data-theme=light] .light\\:c_colorPalette\\.200,.light .light\\:c_colorPalette\\.200,.light\\:c_colorPalette\\.200.light,.light\\:c_colorPalette\\.200[data-theme=light],[data-theme=dark] .dark\\:c_colorPalette\\.200,.dark .dark\\:c_colorPalette\\.200,.dark\\:c_colorPalette\\.200.dark,.dark\\:c_colorPalette\\.200[data-theme=dark] {\n color: var(--colors-color-palette-200);\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:m_20px {\n margin: 20px;\n}\n .sm\\:m_40px {\n margin: 40px;\n}\n .sm\\:p_20px {\n padding: 20px;\n}\n .sm\\:p_40px {\n padding: 40px;\n}\n .sm\\:p_60px {\n padding: 60px;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:m_20px {\n margin: 20px;\n}\n .md\\:m_40px {\n margin: 40px;\n}\n .md\\:p_20px {\n padding: 20px;\n}\n .md\\:p_40px {\n padding: 40px;\n}\n .md\\:p_60px {\n padding: 60px;\n}\n}\n}" + }, + "unsupported": "static css for recipes" + }, + { + "id": "fixture::packages/core/__tests__/static-css.test.ts::static-css caching > recipes: \"*\" should override individual recipe staticCss config::1", + "kind": "static-css", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/static-css.test.ts", + "test": "static-css caching > recipes: \"*\" should override individual recipe staticCss config", + "line": 2505 + }, + "configPatch": { + "theme": { + "recipes": { + "textStyle": null, + "tooltipStyle": null, + "cardStyle": null, + "buttonStyle": null, + "testRecipe": { + "$value": { + "className": "testRecipe", + "base": { + "display": "flex" + }, + "variants": { + "size": { + "sm": { + "fontSize": "12px" + }, + "md": { + "fontSize": "14px" + }, + "lg": { + "fontSize": "16px" + } + }, + "variant": { + "primary": { + "color": "blue" + }, + "secondary": { + "color": "gray" + } + } + }, + "staticCss": [ + { + "size": [ + "sm" + ] + } + ] + } + } + } + } + }, + "inputs": [ + { + "recipes": "*" + } + ], + "expected": { + "styles": [ + { + "color": "ButtonHighlight" + } + ], + "css": "@layer recipes {\n @layer _base {\n .testRecipe {\n display: flex;\n}\n}\n\n .testRecipe--size_sm {\n font-size: 12px;\n}\n\n .testRecipe--size_md {\n font-size: 14px;\n}\n\n .testRecipe--size_lg {\n font-size: 16px;\n}\n\n .testRecipe--variant_primary {\n color: blue;\n}\n\n .testRecipe--variant_secondary {\n color: gray;\n}\n}\n\n@layer recipes.slots {\n @layer _base {\n .checkbox__root {\n gap: var(--spacing-2);\n display: flex;\n align-items: center;\n}\n\n .checkbox__control {\n border-width: 1px;\n border-radius: var(--radii-sm);\n}\n\n .checkbox__label {\n margin-inline-start: var(--spacing-2);\n}\n\n .badge__title {\n background: var(--colors-red-300);\n border-radius: var(--radii-sm);\n}\n}\n\n .checkbox__control--size_sm {\n font-size: 2rem;\n font-weight: var(--font-weights-bold);\n width: var(--sizes-8);\n height: var(--sizes-8);\n}\n\n .checkbox__label--size_sm {\n font-size: var(--font-sizes-sm);\n}\n\n .checkbox__control--size_md {\n width: var(--sizes-10);\n height: var(--sizes-10);\n}\n\n .checkbox__label--size_md {\n font-size: var(--font-sizes-md);\n}\n\n .checkbox__control--size_lg {\n width: var(--sizes-12);\n height: var(--sizes-12);\n}\n\n .checkbox__label--size_lg {\n font-size: var(--font-sizes-lg);\n}\n\n .badge__title--size_sm {\n padding-inline: var(--spacing-4);\n}\n\n .badge__body--size_sm {\n color: red;\n}\n\n .badge__title--raised_true {\n box-shadow: var(--shadows-md);\n}\n}\n\n@layer utilities {\n .c_ButtonHighlight {\n color: ButtonHighlight;\n}\n}" + }, + "unsupported": "static css for recipes" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.template-literal.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.template-literal.test.ts.json new file mode 100644 index 00000000000..211627ff740 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.core.__tests__.template-literal.test.ts.json @@ -0,0 +1,583 @@ +{ + "source": "packages/core/__tests__/template-literal.test.ts", + "cases": [ + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& .box": { + "& p": { + "background-color": "red", + "@media (min-width: 700px)": { + "background-color": "blue" + } + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\.box\\]\\:\\[\\&_p\\]\\:background-color_red", + "\\[\\&_\\.box\\]\\:\\[\\&_p\\]\\:\\[\\@media_\\(min-width\\:_700px\\)\\]\\:background-color_blue" + ], + "css": "@layer utilities {\n .\\[\\&_\\.box\\]\\:\\[\\&_p\\]\\:background-color_red .box p {\n background-color: red;\n}\n\n @media (min-width: 700px) {\n .\\[\\&_\\.box\\]\\:\\[\\&_p\\]\\:\\[\\@media_\\(min-width\\:_700px\\)\\]\\:background-color_blue .box p {\n background-color: blue;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "color": "hotpink", + "& > .is": { + "color": "rebeccapurple", + "& > .awesome": { + "color": "deeppink" + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "color_hotpink", + "\\[\\&_\\>_\\.is\\]\\:color_rebeccapurple", + "\\[\\&_\\>_\\.is\\]\\:\\[\\&_\\>_\\.awesome\\]\\:color_deeppink" + ], + "css": "@layer utilities {\n .color_hotpink {\n color: hotpink;\n}\n\n .\\[\\&_\\>_\\.is\\]\\:color_rebeccapurple > .is {\n color: rebeccapurple;\n}\n\n .\\[\\&_\\>_\\.is\\]\\:\\[\\&_\\>_\\.awesome\\]\\:color_deeppink > .is > .awesome {\n color: deeppink;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::3", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& .demo": { + "& .triangle, .square": { + "opacity": "0.25", + "filter": "blur(25px)" + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\.demo\\]\\:\\[\\&_\\.triangle\\,_\\.square\\]\\:opacity_0\\.25", + "\\[\\&_\\.demo\\]\\:\\[\\&_\\.triangle\\,_\\.square\\]\\:filter_blur\\(25px\\)" + ], + "css": "@layer utilities {\n .\\[\\&_\\.demo\\]\\:\\[\\&_\\.triangle\\,_\\.square\\]\\:opacity_0\\.25 .demo .triangle,.\\[\\&_\\.demo\\]\\:\\[\\&_\\.triangle\\,_\\.square\\]\\:opacity_0\\.25 .demo .square {\n opacity: 0.25;\n}\n\n .\\[\\&_\\.demo\\]\\:\\[\\&_\\.triangle\\,_\\.square\\]\\:filter_blur\\(25px\\) .demo .triangle,.\\[\\&_\\.demo\\]\\:\\[\\&_\\.triangle\\,_\\.square\\]\\:filter_blur\\(25px\\) .demo .square {\n filter: blur(25px);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::4", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& :not(.pink)": { + "opacity": "0.25", + "filter": "blur(25px)" + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\:not\\(\\.pink\\)\\]\\:opacity_0\\.25", + "\\[\\&_\\:not\\(\\.pink\\)\\]\\:filter_blur\\(25px\\)" + ], + "css": "@layer utilities {\n .\\[\\&_\\:not\\(\\.pink\\)\\]\\:opacity_0\\.25 :not(.pink) {\n opacity: 0.25;\n}\n\n .\\[\\&_\\:not\\(\\.pink\\)\\]\\:filter_blur\\(25px\\) :not(.pink) {\n filter: blur(25px);\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::5", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& .one, #two": { + "& .three": { + "color": "red" + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\.one\\,_\\#two\\]\\:\\[\\&_\\.three\\]\\:color_red" + ], + "css": "@layer utilities {\n .\\[\\&_\\.one\\,_\\#two\\]\\:\\[\\&_\\.three\\]\\:color_red .one .three,.\\[\\&_\\.one\\,_\\#two\\]\\:\\[\\&_\\.three\\]\\:color_red #two .three {\n color: red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::6", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& .foo": { + "color": "blue", + "&": { + "padding": "2ch" + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\.foo\\]\\:color_blue", + "\\[\\&_\\.foo\\]\\:\\[\\&\\]\\:padding_2ch" + ], + "css": "@layer utilities {\n .\\[\\&_\\.foo\\]\\:color_blue .foo {\n color: blue;\n}\n\n .\\[\\&_\\.foo\\]\\:\\[\\&\\]\\:padding_2ch .foo {\n padding: 2ch;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::7", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& .foo": { + "color": "blue", + "&&": { + "padding": "2ch" + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\.foo\\]\\:color_blue", + "\\[\\&_\\.foo\\]\\:\\[\\&\\&\\]\\:padding_2ch" + ], + "css": "@layer utilities {\n .\\[\\&_\\.foo\\]\\:color_blue .foo {\n color: blue;\n}\n\n :is(.\\[\\&_\\.foo\\]\\:\\[\\&\\&\\]\\:padding_2ch .foo):is(.\\[\\&_\\.foo\\]\\:\\[\\&\\&\\]\\:padding_2ch .foo) {\n padding: 2ch;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::8", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& .foo": { + "& :is(.bar, &.baz)": { + "color": "red" + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\.foo\\]\\:\\[\\&_\\:is\\(\\.bar\\,_\\&\\.baz\\)\\]\\:color_red" + ], + "css": "@layer utilities {\n .\\[\\&_\\.foo\\]\\:\\[\\&_\\:is\\(\\.bar\\,_\\&\\.baz\\)\\]\\:color_red .foo :is(.bar, .\\[\\&_\\.foo\\]\\:\\[\\&_\\:is\\(\\.bar\\,_\\&\\.baz\\)\\]\\:color_red .foo.baz) {\n color: red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::9", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& figure": { + "margin": "0", + "& > figcaption": { + "background": "hsl(0 0% 0% / 50%)", + "& > p": { + "font-size": "0.9rem" + } + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_figure\\]\\:margin_0", + "\\[\\&_figure\\]\\:\\[\\&_\\>_figcaption\\]\\:background_hsl\\(0_0\\%_0\\%_\\/_50\\%\\)", + "\\[\\&_figure\\]\\:\\[\\&_\\>_figcaption\\]\\:\\[\\&_\\>_p\\]\\:font-size_0\\.9rem" + ], + "css": "@layer utilities {\n .\\[\\&_figure\\]\\:margin_0 figure {\n margin: 0;\n}\n\n .\\[\\&_figure\\]\\:\\[\\&_\\>_figcaption\\]\\:background_hsl\\(0_0\\%_0\\%_\\/_50\\%\\) figure > figcaption {\n background: hsl(0 0% 0% / 50%);\n}\n\n .\\[\\&_figure\\]\\:\\[\\&_\\>_figcaption\\]\\:\\[\\&_\\>_p\\]\\:font-size_0\\.9rem figure > figcaption > p {\n font-size: 0.9rem;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > deep native nested::10", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > deep native nested", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& .card": { + "inline-size": "40ch", + "aspect-ratio": "3/4", + "@layer support": { + "& body": { + "min-block-size": "100%" + } + } + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_\\.card\\]\\:inline-size_40ch", + "\\[\\&_\\.card\\]\\:aspect-ratio_3\\/4", + "\\[\\&_\\.card\\]\\:\\[\\@layer_support\\]\\:\\[\\&_body\\]\\:min-block-size_100\\%" + ], + "css": "@layer utilities {\n .\\[\\&_\\.card\\]\\:inline-size_40ch .card {\n inline-size: 40ch;\n}\n\n .\\[\\&_\\.card\\]\\:aspect-ratio_3\\/4 .card {\n aspect-ratio: 3/4;\n}\n\n @layer support {\n .\\[\\&_\\.card\\]\\:\\[\\@layer_support\\]\\:\\[\\&_body\\]\\:min-block-size_100\\% .card body {\n min-block-size: 100%;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > emits atomic css::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > emits atomic css", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "width": "500px", + "height": "500px", + "background": "red", + "@media (min-width: 700px)": { + "background": "blue" + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "background_red", + "width_500px", + "height_500px", + "\\[\\@media_\\(min-width\\:_700px\\)\\]\\:background_blue" + ], + "css": "@layer utilities {\n .background_red {\n background: red;\n}\n\n .width_500px {\n width: 500px;\n}\n\n .height_500px {\n height: 500px;\n}\n\n @media (min-width: 700px) {\n .\\[\\@media_\\(min-width\\:_700px\\)\\]\\:background_blue {\n background: blue;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > nesting combinators::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > nesting combinators", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& p + p": { + "color": "red" + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_p_\\+_p\\]\\:color_red" + ], + "css": "@layer utilities {\n .\\[\\&_p_\\+_p\\]\\:color_red p + p {\n color: red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > nesting combinators::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > nesting combinators", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "& p ~ p": { + "color": "red" + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\&_p_\\~_p\\]\\:color_red" + ], + "css": "@layer utilities {\n .\\[\\&_p_\\~_p\\]\\:color_red p ~ p {\n color: red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > nesting combinators::3", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > nesting combinators", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + ".box &": { + "background-color": "red" + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\[\\.box_\\&\\]\\:background-color_red" + ], + "css": "@layer utilities {\n .box .\\[\\.box_\\&\\]\\:background-color_red {\n background-color: red;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > should support native nesting::1", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > should support native nesting", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "color": "red", + "& p": { + "color": "blue" + }, + "& h1, h2, h3, h4": { + "color": "pink", + "font-weight": "bold", + "margin-bottom": "1rem" + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "color_red", + "\\[\\&_p\\]\\:color_blue", + "\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:color_pink", + "\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:font-weight_bold", + "\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:margin-bottom_1rem" + ], + "css": "@layer utilities {\n .color_red {\n color: red;\n}\n\n .\\[\\&_p\\]\\:color_blue p {\n color: blue;\n}\n\n .\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:color_pink h1,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:color_pink h2,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:color_pink h3,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:color_pink h4 {\n color: pink;\n}\n\n .\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:font-weight_bold h1,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:font-weight_bold h2,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:font-weight_bold h3,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:font-weight_bold h4 {\n font-weight: bold;\n}\n\n .\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:margin-bottom_1rem h1,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:margin-bottom_1rem h2,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:margin-bottom_1rem h3,.\\[\\&_h1\\,_h2\\,_h3\\,_h4\\]\\:margin-bottom_1rem h4 {\n margin-bottom: 1rem;\n}\n}" + } + }, + { + "id": "fixture::packages/core/__tests__/template-literal.test.ts::css template literal > should support native nesting::2", + "kind": "rule-processor", + "config": "fixture", + "source": { + "file": "packages/core/__tests__/template-literal.test.ts", + "test": "css template literal > should support native nesting", + "line": 7 + }, + "userConfig": { + "syntax": "template-literal" + }, + "inputs": [ + { + "justify-content": "center", + "--test": "4px", + "& :is(.content, footer)": { + "padding": "16px" + } + } + ], + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "options": null, + "expected": { + "classNames": [ + "\\--test_4px", + "justify-content_center", + "\\[\\&_\\:is\\(\\.content\\,_footer\\)\\]\\:padding_16px" + ], + "css": "@layer utilities {\n .\\--test_4px {\n --test: 4px;\n}\n\n .justify-content_center {\n justify-content: center;\n}\n\n .\\[\\&_\\:is\\(\\.content\\,_footer\\)\\]\\:padding_16px :is(.content, footer) {\n padding: 16px;\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.generator.__tests__.generate-token.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.generator.__tests__.generate-token.test.ts.json new file mode 100644 index 00000000000..0fd92f2585c --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.generator.__tests__.generate-token.test.ts.json @@ -0,0 +1,9096 @@ +{ + "source": "packages/generator/__tests__/generate-token.test.ts", + "cases": [ + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > [css] should generate css::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > [css] should generate css", + "line": 10 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --aspect-ratios-square: 1 / 1;\n --aspect-ratios-landscape: 4 / 3;\n --aspect-ratios-portrait: 3 / 4;\n --aspect-ratios-wide: 16 / 9;\n --aspect-ratios-ultrawide: 18 / 5;\n --aspect-ratios-golden: 1.618 / 1;\n --borders-none: none;\n --easings-default: cubic-bezier(0.4, 0, 0.2, 1);\n --easings-linear: linear;\n --easings-in: cubic-bezier(0.4, 0, 1, 1);\n --easings-out: cubic-bezier(0, 0, 0.2, 1);\n --easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --durations-fastest: 50ms;\n --durations-faster: 100ms;\n --durations-fast: 150ms;\n --durations-normal: 200ms;\n --durations-slow: 300ms;\n --durations-slower: 400ms;\n --durations-slowest: 500ms;\n --radii-xs: 0.125rem;\n --radii-sm: 0.25rem;\n --radii-md: 0.375rem;\n --radii-lg: 0.5rem;\n --radii-xl: 0.75rem;\n --radii-2xl: 1rem;\n --radii-3xl: 1.5rem;\n --radii-4xl: 2rem;\n --radii-full: 9999px;\n --font-weights-thin: 100;\n --font-weights-extralight: 200;\n --font-weights-light: 300;\n --font-weights-normal: 400;\n --font-weights-medium: 500;\n --font-weights-semibold: 600;\n --font-weights-bold: 700;\n --font-weights-extrabold: 800;\n --font-weights-black: 900;\n --line-heights-none: 1;\n --line-heights-tight: 1.25;\n --line-heights-snug: 1.375;\n --line-heights-normal: 1.5;\n --line-heights-relaxed: 1.625;\n --line-heights-loose: 2;\n --fonts-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --fonts-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --fonts-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --letter-spacings-tighter: -0.05em;\n --letter-spacings-tight: -0.025em;\n --letter-spacings-normal: 0em;\n --letter-spacings-wide: 0.025em;\n --letter-spacings-wider: 0.05em;\n --letter-spacings-widest: 0.1em;\n --font-sizes-2xs: 0.5rem;\n --font-sizes-xs: 0.75rem;\n --font-sizes-sm: 0.875rem;\n --font-sizes-md: 1rem;\n --font-sizes-lg: 1.125rem;\n --font-sizes-xl: 1.25rem;\n --font-sizes-2xl: 1.5rem;\n --font-sizes-3xl: 1.875rem;\n --font-sizes-4xl: 2.25rem;\n --font-sizes-5xl: 3rem;\n --font-sizes-6xl: 3.75rem;\n --font-sizes-7xl: 4.5rem;\n --font-sizes-8xl: 6rem;\n --font-sizes-9xl: 8rem;\n --shadows-2xs: 0 1px rgb(0 0 0 / 0.05);\n --shadows-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadows-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadows-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadows-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadows-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadows-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadows-inset-2xs: inset 0 1px rgb(0 0 0 / 0.05);\n --shadows-inset-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);\n --shadows-inset-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);\n --colors-current: currentColor;\n --colors-black: #000;\n --colors-white: #fff;\n --colors-transparent: rgb(0 0 0 / 0);\n --colors-rose-50: #fff1f2;\n --colors-rose-100: #ffe4e6;\n --colors-rose-200: #fecdd3;\n --colors-rose-300: #fda4af;\n --colors-rose-400: #fb7185;\n --colors-rose-500: #f43f5e;\n --colors-rose-600: #e11d48;\n --colors-rose-700: #be123c;\n --colors-rose-800: #9f1239;\n --colors-rose-900: #881337;\n --colors-rose-950: #4c0519;\n --colors-pink-50: #fdf2f8;\n --colors-pink-100: #fce7f3;\n --colors-pink-200: #fbcfe8;\n --colors-pink-300: #f9a8d4;\n --colors-pink-400: #f472b6;\n --colors-pink-500: #ec4899;\n --colors-pink-600: #db2777;\n --colors-pink-700: #be185d;\n --colors-pink-800: #9d174d;\n --colors-pink-900: #831843;\n --colors-pink-950: #500724;\n --colors-fuchsia-50: #fdf4ff;\n --colors-fuchsia-100: #fae8ff;\n --colors-fuchsia-200: #f5d0fe;\n --colors-fuchsia-300: #f0abfc;\n --colors-fuchsia-400: #e879f9;\n --colors-fuchsia-500: #d946ef;\n --colors-fuchsia-600: #c026d3;\n --colors-fuchsia-700: #a21caf;\n --colors-fuchsia-800: #86198f;\n --colors-fuchsia-900: #701a75;\n --colors-fuchsia-950: #4a044e;\n --colors-purple-50: #faf5ff;\n --colors-purple-100: #f3e8ff;\n --colors-purple-200: #e9d5ff;\n --colors-purple-300: #d8b4fe;\n --colors-purple-400: #c084fc;\n --colors-purple-500: #a855f7;\n --colors-purple-600: #9333ea;\n --colors-purple-700: #7e22ce;\n --colors-purple-800: #6b21a8;\n --colors-purple-900: #581c87;\n --colors-purple-950: #3b0764;\n --colors-violet-50: #f5f3ff;\n --colors-violet-100: #ede9fe;\n --colors-violet-200: #ddd6fe;\n --colors-violet-300: #c4b5fd;\n --colors-violet-400: #a78bfa;\n --colors-violet-500: #8b5cf6;\n --colors-violet-600: #7c3aed;\n --colors-violet-700: #6d28d9;\n --colors-violet-800: #5b21b6;\n --colors-violet-900: #4c1d95;\n --colors-violet-950: #2e1065;\n --colors-indigo-50: #eef2ff;\n --colors-indigo-100: #e0e7ff;\n --colors-indigo-200: #c7d2fe;\n --colors-indigo-300: #a5b4fc;\n --colors-indigo-400: #818cf8;\n --colors-indigo-500: #6366f1;\n --colors-indigo-600: #4f46e5;\n --colors-indigo-700: #4338ca;\n --colors-indigo-800: #3730a3;\n --colors-indigo-900: #312e81;\n --colors-indigo-950: #1e1b4b;\n --colors-blue-50: #eff6ff;\n --colors-blue-100: #dbeafe;\n --colors-blue-200: #bfdbfe;\n --colors-blue-300: #93c5fd;\n --colors-blue-400: #60a5fa;\n --colors-blue-500: #3b82f6;\n --colors-blue-600: #2563eb;\n --colors-blue-700: #1d4ed8;\n --colors-blue-800: #1e40af;\n --colors-blue-900: #1e3a8a;\n --colors-blue-950: #172554;\n --colors-sky-50: #f0f9ff;\n --colors-sky-100: #e0f2fe;\n --colors-sky-200: #bae6fd;\n --colors-sky-300: #7dd3fc;\n --colors-sky-400: #38bdf8;\n --colors-sky-500: #0ea5e9;\n --colors-sky-600: #0284c7;\n --colors-sky-700: #0369a1;\n --colors-sky-800: #075985;\n --colors-sky-900: #0c4a6e;\n --colors-sky-950: #082f49;\n --colors-cyan-50: #ecfeff;\n --colors-cyan-100: #cffafe;\n --colors-cyan-200: #a5f3fc;\n --colors-cyan-300: #67e8f9;\n --colors-cyan-400: #22d3ee;\n --colors-cyan-500: #06b6d4;\n --colors-cyan-600: #0891b2;\n --colors-cyan-700: #0e7490;\n --colors-cyan-800: #155e75;\n --colors-cyan-900: #164e63;\n --colors-cyan-950: #083344;\n --colors-teal-50: #f0fdfa;\n --colors-teal-100: #ccfbf1;\n --colors-teal-200: #99f6e4;\n --colors-teal-300: #5eead4;\n --colors-teal-400: #2dd4bf;\n --colors-teal-500: #14b8a6;\n --colors-teal-600: #0d9488;\n --colors-teal-700: #0f766e;\n --colors-teal-800: #115e59;\n --colors-teal-900: #134e4a;\n --colors-teal-950: #042f2e;\n --colors-emerald-50: #ecfdf5;\n --colors-emerald-100: #d1fae5;\n --colors-emerald-200: #a7f3d0;\n --colors-emerald-300: #6ee7b7;\n --colors-emerald-400: #34d399;\n --colors-emerald-500: #10b981;\n --colors-emerald-600: #059669;\n --colors-emerald-700: #047857;\n --colors-emerald-800: #065f46;\n --colors-emerald-900: #064e3b;\n --colors-emerald-950: #022c22;\n --colors-green-50: #f0fdf4;\n --colors-green-100: #dcfce7;\n --colors-green-200: #bbf7d0;\n --colors-green-300: #86efac;\n --colors-green-400: #4ade80;\n --colors-green-500: #22c55e;\n --colors-green-600: #16a34a;\n --colors-green-700: #15803d;\n --colors-green-800: #166534;\n --colors-green-900: #14532d;\n --colors-green-950: #052e16;\n --colors-lime-50: #f7fee7;\n --colors-lime-100: #ecfccb;\n --colors-lime-200: #d9f99d;\n --colors-lime-300: #bef264;\n --colors-lime-400: #a3e635;\n --colors-lime-500: #84cc16;\n --colors-lime-600: #65a30d;\n --colors-lime-700: #4d7c0f;\n --colors-lime-800: #3f6212;\n --colors-lime-900: #365314;\n --colors-lime-950: #1a2e05;\n --colors-yellow-50: #fefce8;\n --colors-yellow-100: #fef9c3;\n --colors-yellow-200: #fef08a;\n --colors-yellow-300: #fde047;\n --colors-yellow-400: #facc15;\n --colors-yellow-500: #eab308;\n --colors-yellow-600: #ca8a04;\n --colors-yellow-700: #a16207;\n --colors-yellow-800: #854d0e;\n --colors-yellow-900: #713f12;\n --colors-yellow-950: #422006;\n --colors-amber-50: #fffbeb;\n --colors-amber-100: #fef3c7;\n --colors-amber-200: #fde68a;\n --colors-amber-300: #fcd34d;\n --colors-amber-400: #fbbf24;\n --colors-amber-500: #f59e0b;\n --colors-amber-600: #d97706;\n --colors-amber-700: #b45309;\n --colors-amber-800: #92400e;\n --colors-amber-900: #78350f;\n --colors-amber-950: #451a03;\n --colors-orange-50: #fff7ed;\n --colors-orange-100: #ffedd5;\n --colors-orange-200: #fed7aa;\n --colors-orange-300: #fdba74;\n --colors-orange-400: #fb923c;\n --colors-orange-500: #f97316;\n --colors-orange-600: #ea580c;\n --colors-orange-700: #c2410c;\n --colors-orange-800: #9a3412;\n --colors-orange-900: #7c2d12;\n --colors-orange-950: #431407;\n --colors-red-50: #fef2f2;\n --colors-red-100: #fee2e2;\n --colors-red-200: #fecaca;\n --colors-red-300: #fca5a5;\n --colors-red-400: #f87171;\n --colors-red-500: #ef4444;\n --colors-red-600: #dc2626;\n --colors-red-700: #b91c1c;\n --colors-red-800: #991b1b;\n --colors-red-900: #7f1d1d;\n --colors-red-950: #450a0a;\n --colors-neutral-50: #fafafa;\n --colors-neutral-100: #f5f5f5;\n --colors-neutral-200: #e5e5e5;\n --colors-neutral-300: #d4d4d4;\n --colors-neutral-400: #a3a3a3;\n --colors-neutral-500: #737373;\n --colors-neutral-600: #525252;\n --colors-neutral-700: #404040;\n --colors-neutral-800: #262626;\n --colors-neutral-900: #171717;\n --colors-neutral-950: #0a0a0a;\n --colors-stone-50: #fafaf9;\n --colors-stone-100: #f5f5f4;\n --colors-stone-200: #e7e5e4;\n --colors-stone-300: #d6d3d1;\n --colors-stone-400: #a8a29e;\n --colors-stone-500: #78716c;\n --colors-stone-600: #57534e;\n --colors-stone-700: #44403c;\n --colors-stone-800: #292524;\n --colors-stone-900: #1c1917;\n --colors-stone-950: #0c0a09;\n --colors-zinc-50: #fafafa;\n --colors-zinc-100: #f4f4f5;\n --colors-zinc-200: #e4e4e7;\n --colors-zinc-300: #d4d4d8;\n --colors-zinc-400: #a1a1aa;\n --colors-zinc-500: #71717a;\n --colors-zinc-600: #52525b;\n --colors-zinc-700: #3f3f46;\n --colors-zinc-800: #27272a;\n --colors-zinc-900: #18181b;\n --colors-zinc-950: #09090b;\n --colors-gray-50: #f9fafb;\n --colors-gray-100: #f3f4f6;\n --colors-gray-200: #e5e7eb;\n --colors-gray-300: #d1d5db;\n --colors-gray-400: #9ca3af;\n --colors-gray-500: #6b7280;\n --colors-gray-600: #4b5563;\n --colors-gray-700: #374151;\n --colors-gray-800: #1f2937;\n --colors-gray-900: #111827;\n --colors-gray-950: #030712;\n --colors-slate-50: #f8fafc;\n --colors-slate-100: #f1f5f9;\n --colors-slate-200: #e2e8f0;\n --colors-slate-300: #cbd5e1;\n --colors-slate-400: #94a3b8;\n --colors-slate-500: #64748b;\n --colors-slate-600: #475569;\n --colors-slate-700: #334155;\n --colors-slate-800: #1e293b;\n --colors-slate-900: #0f172a;\n --colors-slate-950: #020617;\n --colors-deep-test-yam: %555;\n --colors-deep-test-pool-poller: #fff;\n --colors-deep-test-pool-tall: $dfdf;\n --blurs-xs: 4px;\n --blurs-sm: 8px;\n --blurs-md: 12px;\n --blurs-lg: 16px;\n --blurs-xl: 24px;\n --blurs-2xl: 40px;\n --blurs-3xl: 64px;\n --spacing-0: 0rem;\n --spacing-1: 0.25rem;\n --spacing-2: 0.5rem;\n --spacing-3: 0.75rem;\n --spacing-4: 1rem;\n --spacing-5: 1.25rem;\n --spacing-6: 1.5rem;\n --spacing-7: 1.75rem;\n --spacing-8: 2rem;\n --spacing-9: 2.25rem;\n --spacing-10: 2.5rem;\n --spacing-11: 2.75rem;\n --spacing-12: 3rem;\n --spacing-14: 3.5rem;\n --spacing-16: 4rem;\n --spacing-20: 5rem;\n --spacing-24: 6rem;\n --spacing-28: 7rem;\n --spacing-32: 8rem;\n --spacing-36: 9rem;\n --spacing-40: 10rem;\n --spacing-44: 11rem;\n --spacing-48: 12rem;\n --spacing-52: 13rem;\n --spacing-56: 14rem;\n --spacing-60: 15rem;\n --spacing-64: 16rem;\n --spacing-72: 18rem;\n --spacing-80: 20rem;\n --spacing-96: 24rem;\n --spacing-0\\.5: 0.125rem;\n --spacing-1\\.5: 0.375rem;\n --spacing-2\\.5: 0.625rem;\n --spacing-3\\.5: 0.875rem;\n --spacing-4\\.5: 1.125rem;\n --spacing-5\\.5: 1.375rem;\n --sizes-0: 0rem;\n --sizes-1: 0.25rem;\n --sizes-2: 0.5rem;\n --sizes-3: 0.75rem;\n --sizes-4: 1rem;\n --sizes-5: 1.25rem;\n --sizes-6: 1.5rem;\n --sizes-7: 1.75rem;\n --sizes-8: 2rem;\n --sizes-9: 2.25rem;\n --sizes-10: 2.5rem;\n --sizes-11: 2.75rem;\n --sizes-12: 3rem;\n --sizes-14: 3.5rem;\n --sizes-16: 4rem;\n --sizes-20: 5rem;\n --sizes-24: 6rem;\n --sizes-28: 7rem;\n --sizes-32: 8rem;\n --sizes-36: 9rem;\n --sizes-40: 10rem;\n --sizes-44: 11rem;\n --sizes-48: 12rem;\n --sizes-52: 13rem;\n --sizes-56: 14rem;\n --sizes-60: 15rem;\n --sizes-64: 16rem;\n --sizes-72: 18rem;\n --sizes-80: 20rem;\n --sizes-96: 24rem;\n --sizes-0\\.5: 0.125rem;\n --sizes-1\\.5: 0.375rem;\n --sizes-2\\.5: 0.625rem;\n --sizes-3\\.5: 0.875rem;\n --sizes-4\\.5: 1.125rem;\n --sizes-5\\.5: 1.375rem;\n --sizes-xs: 20rem;\n --sizes-sm: 24rem;\n --sizes-md: 28rem;\n --sizes-lg: 32rem;\n --sizes-xl: 36rem;\n --sizes-2xl: 42rem;\n --sizes-3xl: 48rem;\n --sizes-4xl: 56rem;\n --sizes-5xl: 64rem;\n --sizes-6xl: 72rem;\n --sizes-7xl: 80rem;\n --sizes-8xl: 90rem;\n --sizes-prose: 65ch;\n --sizes-full: 100%;\n --sizes-min: min-content;\n --sizes-max: max-content;\n --sizes-fit: fit-content;\n --sizes-breakpoint-sm: 640px;\n --sizes-breakpoint-md: 768px;\n --sizes-breakpoint-lg: 1024px;\n --sizes-breakpoint-xl: 1280px;\n --sizes-breakpoint-2xl: 1536px;\n --animations-spin: spin 1s linear infinite;\n --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --animations-bounce: bounce 1s infinite;\n --breakpoints-sm: 640px;\n --breakpoints-md: 768px;\n --breakpoints-lg: 1024px;\n --breakpoints-xl: 1280px;\n --breakpoints-2xl: 1536px;\n --colors-primary: var(--colors-red-500);\n --colors-secondary: var(--colors-red-800);\n --colors-complex: var(--colors-red-800);\n --colors-button-thick: #fff;\n --colors-button-card-body: #fff;\n --colors-button-card-heading: #fff;\n --spacing-gutter: var(--spacing-4);\n}\n\n :where([data-theme=dark], .dark) {\n --colors-primary: var(--colors-red-400);\n --colors-secondary: var(--colors-red-700);\n --colors-button-thick: #000;\n --colors-button-card-body: #000;\n --colors-button-card-heading: #000\n}\n\n [data-color=material] {\n --colors-surface: #m-b\n}\n\n [data-color=material]:where([data-theme=dark], .dark) {\n --colors-surface: #m-d\n }\n\n [data-color=pastel] {\n --colors-surface: #p-b\n}\n\n @media screen and (min-width: 48rem) {\n [data-color=pastel]:where([data-theme=dark], .dark) {\n --colors-surface: #p-d\n }\n }\n\n @media screen and (min-width: 64rem) {\n :where(html) {\n --spacing-gutter: var(--spacing-5)\n }\n }\n\n @media (forced-colors: active) {\n :where([data-theme=dark], .dark) {\n --colors-complex: var(--colors-red-700)\n }\n }\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > assets svg::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > assets svg", + "line": 10 + }, + "userConfig": { + "eject": true, + "theme": { + "tokens": { + "assets": { + "checkbox": { + "value": { + "type": "svg", + "value": "" + } + } + } + } + } + }, + "configPatch": { + "conditions": null, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "semanticTokens": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "colors": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "assets": { + "$value": { + "checkbox": { + "value": { + "type": "svg", + "value": "" + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --assets-checkbox: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > border widths::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > border widths", + "line": 10 + }, + "userConfig": { + "eject": true, + "theme": { + "tokens": { + "borderWidths": { + "sm": { + "value": "1px" + }, + "md": { + "value": "2px" + } + }, + "borders": { + "netural": { + "value": { + "width": "{borderWidths.sm}", + "color": "blue", + "style": "solid" + } + }, + "success": { + "value": { + "width": "{borderWidths.md}", + "color": "green", + "style": "solid" + } + } + } + } + } + }, + "configPatch": { + "conditions": null, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "semanticTokens": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "colors": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "borderWidths": { + "$value": { + "sm": { + "value": "1px" + }, + "md": { + "value": "2px" + } + } + }, + "borders": { + "none": null, + "netural": { + "$value": { + "value": { + "width": "{borderWidths.sm}", + "color": "blue", + "style": "solid" + } + } + }, + "success": { + "$value": { + "value": { + "width": "{borderWidths.md}", + "color": "green", + "style": "solid" + } + } + } + }, + "$order": [ + "borderWidths", + "borders" + ] + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --border-widths-sm: 1px;\n --border-widths-md: 2px;\n --borders-netural: var(--border-widths-sm) solid blue;\n --borders-success: var(--border-widths-md) solid green;\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > color-mix in semanticTokens conditions::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > color-mix in semanticTokens conditions", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "light": ".light &", + "dark": ".dark &" + }, + "theme": { + "tokens": { + "colors": { + "blue": { + "500": { + "value": "blue" + } + }, + "green": { + "500": { + "value": "green" + } + } + }, + "opacity": { + "half": { + "value": 0.5 + } + } + }, + "semanticTokens": { + "colors": { + "secondary": { + "value": { + "base": "red", + "_light": "{colors.blue.500/32}", + "_dark": "{colors.green.500/half}" + } + } + } + } + } + }, + "configPatch": { + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "osDark": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null, + "light": { + "$value": ".light &" + }, + "dark": { + "$value": ".dark &" + } + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "blue": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": { + "value": { + "$value": "blue" + } + }, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "green": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": { + "value": { + "$value": "green" + } + }, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + } + }, + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "complex": null, + "surface": null, + "button": null, + "secondary": { + "value": { + "base": { + "$value": "red" + }, + "_light": { + "$value": "{colors.blue.500/32}" + }, + "_dark": { + "$value": "{colors.green.500/half}" + }, + "$order": [ + "base", + "_light", + "_dark" + ] + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-blue-500: blue;\n --colors-green-500: green;\n --opacity-half: 0.5;\n --colors-secondary: red;\n}\n\n .light {\n --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent)\n}\n\n .dark {\n --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent)\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > color-mix::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > color-mix", + "line": 10 + }, + "userConfig": { + "eject": true, + "theme": { + "tokens": { + "colors": { + "pink": { + "value": "#ff00ff" + }, + "border": { + "value": "{colors.pink/30}" + }, + "ref": { + "value": "{colors.border/40}" + } + }, + "opacity": { + "half": { + "value": 0.5 + } + } + }, + "semanticTokens": { + "colors": { + "primary": { + "value": "{colors.blue.300/70}" + } + } + } + } + }, + "configPatch": { + "conditions": null, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "pink": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null, + "value": { + "$value": "#ff00ff" + } + }, + "border": { + "$value": { + "value": "{colors.pink/30}" + } + }, + "ref": { + "$value": { + "value": "{colors.border/40}" + } + } + }, + "opacity": { + "$value": { + "half": { + "value": 0.5 + } + } + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "primary": { + "value": { + "$value": "{colors.blue.300/70}" + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-pink: #ff00ff;\n --colors-border: color-mix(in srgb, var(--colors-pink) 30%, transparent);\n --colors-ref: color-mix(in srgb, var(--colors-border) 40%, transparent);\n --opacity-half: 0.5;\n --colors-primary: color-mix(in srgb, colors.blue.300 70%, transparent);\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > issue 769: Invalid CSS when extending theme with semanticTokens > should not extract nested tokens as `color-palette` css variables::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > issue 769: Invalid CSS when extending theme with semanticTokens > should not extract nested tokens as `color-palette` css variables", + "line": 10 + }, + "userConfig": { + "theme": { + "tokens": { + "colors": { + "single": { + "value": "#ef4444" + }, + "test": { + "50": { + "value": "#f9f9f9" + }, + "100": { + "value": "#f2f2f2" + } + }, + "deep": { + "test": { + "yam": { + "value": "%555" + }, + "pool": { + "poller": { + "value": "#fff" + }, + "tall": { + "value": "$dfdf" + }, + "palette": { + "50": { + "value": "#f9f9f9" + }, + "100": { + "value": "#f2f2f2" + }, + "200": { + "value": "#ebebeb" + } + } + } + } + } + } + }, + "semanticTokens": {}, + "breakpoints": {} + }, + "conditions": { + "dark": ".dark &" + } + }, + "configPatch": { + "conditions": { + "dark": { + "$value": ".dark &" + } + }, + "theme": { + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "single": { + "$value": { + "value": "#ef4444" + } + }, + "test": { + "$value": { + "50": { + "value": "#f9f9f9" + }, + "100": { + "value": "#f2f2f2" + } + } + }, + "deep": { + "test": { + "pool": { + "palette": { + "$value": { + "50": { + "value": "#f9f9f9" + }, + "100": { + "value": "#f2f2f2" + }, + "200": { + "value": "#ebebeb" + } + } + } + } + } + }, + "$order": [ + "single", + "test", + "deep" + ] + } + }, + "semanticTokens": { + "colors": null, + "spacing": null + }, + "breakpoints": { + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null + }, + "$order": [ + "tokens", + "semanticTokens", + "breakpoints", + "keyframes", + "textStyles", + "containerSizes", + "recipes", + "slotRecipes" + ] + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-single: #ef4444;\n --colors-test-50: #f9f9f9;\n --colors-test-100: #f2f2f2;\n --colors-deep-test-yam: %555;\n --colors-deep-test-pool-poller: #fff;\n --colors-deep-test-pool-tall: $dfdf;\n --colors-deep-test-pool-palette-50: #f9f9f9;\n --colors-deep-test-pool-palette-100: #f2f2f2;\n --colors-deep-test-pool-palette-200: #ebebeb;\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > issue 769: Invalid CSS when extending theme with semanticTokens > should not extract shadow array as a separate unnamed block for the custom dark condition::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > issue 769: Invalid CSS when extending theme with semanticTokens > should not extract shadow array as a separate unnamed block for the custom dark condition", + "line": 10 + }, + "userConfig": { + "theme": { + "tokens": {}, + "breakpoints": {}, + "semanticTokens": { + "shadows": { + "e1": { + "value": { + "base": [ + "0px 1px 2px rgba(0, 0, 0, 0.3)", + "0px 1px 3px 1px rgba(0, 0, 0, 0.15)" + ], + "_dark": [ + "0px 1px 3px 1px rgba(0, 0, 0, 0.15)", + "0px 1px 2px rgba(0, 0, 0, 0.3)" + ] + } + } + } + } + }, + "conditions": { + "dark": ".dark &" + } + }, + "configPatch": { + "conditions": { + "dark": { + "$value": ".dark &" + } + }, + "theme": { + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "colors": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null + }, + "breakpoints": { + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null + }, + "semanticTokens": { + "colors": null, + "spacing": null, + "shadows": { + "$value": { + "e1": { + "value": { + "base": [ + "0px 1px 2px rgba(0, 0, 0, 0.3)", + "0px 1px 3px 1px rgba(0, 0, 0, 0.15)" + ], + "_dark": [ + "0px 1px 3px 1px rgba(0, 0, 0, 0.15)", + "0px 1px 2px rgba(0, 0, 0, 0.3)" + ] + } + } + } + } + }, + "$order": [ + "tokens", + "breakpoints", + "semanticTokens", + "keyframes", + "textStyles", + "containerSizes", + "recipes", + "slotRecipes" + ] + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --shadows-e1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);\n}\n\n .dark {\n --shadows-e1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3)\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > multi-block stacked under a parent-nesting condition produces cartesian rules::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > multi-block stacked under a parent-nesting condition produces cartesian rules", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "dark": ".dark &", + "hoverActive": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + }, + "theme": { + "tokens": { + "colors": { + "red": { + "500": { + "value": "#f00" + } + }, + "blue": { + "500": { + "value": "#00f" + } + }, + "zinc": { + "700": { + "value": "#3f3f46" + } + } + } + }, + "semanticTokens": { + "colors": { + "accent": { + "value": { + "base": "{colors.red.500}", + "_dark": { + "_hoverActive": "{colors.zinc.700}" + } + } + } + } + } + } + }, + "configPatch": { + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "light": null, + "osDark": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null, + "dark": { + "$value": ".dark &" + }, + "hoverActive": { + "$value": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": { + "value": { + "$value": "#f00" + } + }, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": { + "value": { + "$value": "#00f" + } + }, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "zinc": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": null, + "600": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue", + "zinc" + ] + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "accent": { + "$value": { + "value": { + "base": "{colors.red.500}", + "_dark": { + "_hoverActive": "{colors.zinc.700}" + } + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-red-500: #f00;\n --colors-blue-500: #00f;\n --colors-zinc-700: #3f3f46;\n --colors-accent: var(--colors-red-500);\n}\n\n @media (hover: hover) {\n .dark:is(:hover, [data-hover]) {\n --colors-accent: var(--colors-zinc-700)\n }\n }\n\n @media (hover: none) {\n .dark:is(:active, [data-active]) {\n --colors-accent: var(--colors-zinc-700)\n }\n }\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > selector-only multi-block (darkTheme matches data-theme=dark or data-dark-theme) emits one rule per attr::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > selector-only multi-block (darkTheme matches data-theme=dark or data-dark-theme) emits one rule per attr", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "darkTheme": { + "&[data-theme=\"dark\"]": "@slot", + "&[data-dark-theme]": "@slot" + } + }, + "theme": { + "tokens": { + "colors": { + "zinc": { + "50": { + "value": "#fafafa" + }, + "700": { + "value": "#3f3f46" + } + } + } + }, + "semanticTokens": { + "colors": { + "surface": { + "value": { + "base": "{colors.zinc.50}", + "_darkTheme": "{colors.zinc.700}" + } + } + } + } + } + }, + "configPatch": { + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "dark": null, + "light": null, + "osDark": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null, + "darkTheme": { + "$value": { + "&[data-theme=\"dark\"]": "@slot", + "&[data-dark-theme]": "@slot" + } + } + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "gray": null, + "slate": null, + "deep": null, + "zinc": { + "100": null, + "200": null, + "300": null, + "400": null, + "500": null, + "600": null, + "800": null, + "900": null, + "950": null + } + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "button": null, + "surface": { + "value": { + "_materialTheme": null, + "_pastelTheme": null, + "base": { + "$value": "{colors.zinc.50}" + }, + "_darkTheme": { + "$value": "{colors.zinc.700}" + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-zinc-50: #fafafa;\n --colors-zinc-700: #3f3f46;\n --colors-surface: var(--colors-zinc-50);\n}\n\n [data-theme=\"dark\"],[data-dark-theme] {\n --colors-surface: var(--colors-zinc-700)\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > semantic tokens emit one rule per @slot path for multi-block conditions::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > semantic tokens emit one rule per @slot path for multi-block conditions", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "hoverActive": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + }, + "theme": { + "tokens": { + "colors": { + "red": { + "500": { + "value": "#f00" + } + }, + "blue": { + "500": { + "value": "#00f" + } + } + }, + "spacing": { + "1": { + "value": "0.25rem" + } + } + }, + "semanticTokens": { + "colors": { + "accent": { + "value": { + "base": "{colors.red.500}", + "_hoverActive": "{colors.blue.500}" + } + } + } + } + } + }, + "configPatch": { + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "dark": null, + "light": null, + "osDark": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null, + "hoverActive": { + "$value": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + } + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": { + "value": { + "$value": "#f00" + } + }, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": { + "value": { + "$value": "#00f" + } + }, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue" + ] + }, + "spacing": { + "0": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": null, + "24": null, + "28": null, + "32": null, + "36": null, + "40": null, + "44": null, + "48": null, + "52": null, + "56": null, + "60": null, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "accent": { + "$value": { + "value": { + "base": "{colors.red.500}", + "_hoverActive": "{colors.blue.500}" + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-red-500: #f00;\n --colors-blue-500: #00f;\n --spacing-1: 0.25rem;\n --colors-accent: var(--colors-red-500);\n}\n\n @media (hover: hover) {\n :is(:hover, [data-hover]) {\n --colors-accent: var(--colors-blue-500)\n }\n }\n\n @media (hover: none) {\n :is(:active, [data-active]) {\n --colors-accent: var(--colors-blue-500)\n }\n }\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > shadow semantic tokens::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > shadow semantic tokens", + "line": 10 + }, + "userConfig": { + "theme": { + "tokens": { + "shadows": { + "test1": { + "value": { + "offsetX": 0, + "offsetY": 0, + "blur": 0, + "spread": 4, + "color": "{colors.testPink}" + } + } + } + }, + "semanticTokens": { + "colors": { + "testPink": { + "value": "{colors.pink.900}" + } + }, + "shadows": { + "testBrokenShadow": { + "value": { + "offsetX": 0, + "offsetY": 0, + "blur": 0, + "spread": 4, + "color": "{colors.testPink}" + } + }, + "complexShadow": { + "value": { + "base": { + "offsetX": 0, + "offsetY": 0, + "blur": 0, + "spread": 4, + "color": "{colors.testPink}" + }, + "_dark": { + "offsetX": 2, + "offsetY": 8, + "blur": 30, + "spread": 4, + "color": "{colors.testPink}" + } + } + } + } + }, + "breakpoints": {} + }, + "conditions": { + "dark": ".dark &" + } + }, + "configPatch": { + "conditions": { + "dark": { + "$value": ".dark &" + } + }, + "theme": { + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "colors": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "shadows": { + "2xs": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "inset-2xs": null, + "inset-xs": null, + "inset-sm": null, + "test1": { + "$value": { + "value": { + "offsetX": 0, + "offsetY": 0, + "blur": 0, + "spread": 4, + "color": "{colors.testPink}" + } + } + } + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "testPink": { + "$value": { + "value": "{colors.pink.900}" + } + } + }, + "shadows": { + "$value": { + "testBrokenShadow": { + "value": { + "offsetX": 0, + "offsetY": 0, + "blur": 0, + "spread": 4, + "color": "{colors.testPink}" + } + }, + "complexShadow": { + "value": { + "base": { + "offsetX": 0, + "offsetY": 0, + "blur": 0, + "spread": 4, + "color": "{colors.testPink}" + }, + "_dark": { + "offsetX": 2, + "offsetY": 8, + "blur": 30, + "spread": 4, + "color": "{colors.testPink}" + } + } + } + } + } + }, + "breakpoints": { + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null + }, + "$order": [ + "tokens", + "semanticTokens", + "breakpoints", + "keyframes", + "textStyles", + "containerSizes", + "recipes", + "slotRecipes" + ] + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --shadows-test1: 0px 0px 0px 4px var(--colors-test-pink);\n --colors-test-pink: var(--colors-pink-900);\n --shadows-test-broken-shadow: 0px 0px 0px 4px var(--colors-test-pink);\n --shadows-complex-shadow: 0px 0px 0px 4px var(--colors-test-pink);\n}\n\n .dark {\n --shadows-complex-shadow: 2px 8px 30px 4px var(--colors-test-pink)\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > shadow tokens - composite::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > shadow tokens - composite", + "line": 10 + }, + "userConfig": { + "eject": true, + "theme": { + "tokens": { + "spacing": { + "3": { + "value": "1rem" + } + }, + "colors": { + "red": { + "value": "#ff0000" + } + }, + "shadows": { + "sm": { + "value": { + "offsetX": "{spacing.3}", + "offsetY": "{spacing.3}", + "blur": "1rem", + "spread": "{spacing.3}", + "color": "{colors.red}" + } + } + } + } + } + }, + "configPatch": { + "conditions": null, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "semanticTokens": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "blurs": null, + "sizes": null, + "animations": null, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": { + "value": { + "$value": "1rem" + } + }, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": null, + "24": null, + "28": null, + "32": null, + "36": null, + "40": null, + "44": null, + "48": null, + "52": null, + "56": null, + "60": null, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null + }, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null, + "value": { + "$value": "#ff0000" + } + } + }, + "shadows": { + "2xs": null, + "xs": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "inset-2xs": null, + "inset-xs": null, + "inset-sm": null, + "sm": { + "value": { + "$value": { + "offsetX": "{spacing.3}", + "offsetY": "{spacing.3}", + "blur": "1rem", + "spread": "{spacing.3}", + "color": "{colors.red}" + } + } + } + }, + "$order": [ + "spacing", + "colors", + "shadows" + ] + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --spacing-3: 1rem;\n --colors-red: #ff0000;\n --shadows-sm: var(--spacing-3) var(--spacing-3) 1rem var(--spacing-3) var(--colors-red);\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > shadow tokens::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > shadow tokens", + "line": 10 + }, + "userConfig": { + "eject": true, + "theme": { + "tokens": { + "colors": { + "primary": { + "value": "#f9a4d6" + }, + "secondary": { + "value": "{colors.primary/20}" + } + }, + "shadows": { + "test": { + "value": "0 4px 20px 0 {colors.primary/30}" + }, + "test2": { + "value": { + "blur": 2, + "spread": 2, + "color": "{colors.primary/20}", + "offsetX": 0, + "offsetY": 0 + } + } + }, + "borders": { + "test": { + "value": "2px solid {colors.primary/40}" + }, + "test2": { + "value": { + "width": "1px", + "style": "solid", + "color": "{colors.primary/40}" + } + } + } + } + } + }, + "configPatch": { + "conditions": null, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "semanticTokens": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "primary": { + "$value": { + "value": "#f9a4d6" + } + }, + "secondary": { + "$value": { + "value": "{colors.primary/20}" + } + } + }, + "shadows": { + "2xs": null, + "xs": null, + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "inset-2xs": null, + "inset-xs": null, + "inset-sm": null, + "test": { + "$value": { + "value": "0 4px 20px 0 {colors.primary/30}" + } + }, + "test2": { + "$value": { + "value": { + "blur": 2, + "spread": 2, + "color": "{colors.primary/20}", + "offsetX": 0, + "offsetY": 0 + } + } + } + }, + "borders": { + "none": null, + "test": { + "$value": { + "value": "2px solid {colors.primary/40}" + } + }, + "test2": { + "$value": { + "value": { + "width": "1px", + "style": "solid", + "color": "{colors.primary/40}" + } + } + } + }, + "$order": [ + "colors", + "shadows", + "borders" + ] + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-primary: #f9a4d6;\n --colors-secondary: color-mix(in srgb, var(--colors-primary) 20%, transparent);\n --shadows-test: 0 4px 20px 0 color-mix(in srgb, var(--colors-primary) 30%, transparent);\n --shadows-test2: 0px 0px 2px 2px color-mix(in srgb, var(--colors-primary) 20%, transparent);\n --borders-test: 2px solid color-mix(in srgb, var(--colors-primary) 40%, transparent);\n --borders-test2: 1px solid color-mix(in srgb, var(--colors-primary) 40%, transparent);\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > should reuse css variable in semantic token alias::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > should reuse css variable in semantic token alias", + "line": 10 + }, + "userConfig": { + "theme": { + "tokens": { + "colors": { + "red": { + "value": "#ef4444" + }, + "semanticRed": { + "value": "{colors.danger}" + } + }, + "borders": { + "red": { + "value": "1px solid {colors.red}" + }, + "semanticRed": { + "value": "{borders.danger}" + } + } + }, + "semanticTokens": { + "colors": { + "danger": { + "value": "{colors.red}" + } + }, + "borders": { + "danger": { + "value": "{borders.red}" + } + } + }, + "breakpoints": {} + }, + "conditions": { + "dark": ".dark &" + } + }, + "configPatch": { + "conditions": { + "dark": { + "$value": ".dark &" + } + }, + "theme": { + "tokens": { + "aspectRatios": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": null, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null, + "value": { + "$value": "#ef4444" + } + }, + "semanticRed": { + "$value": { + "value": "{colors.danger}" + } + } + }, + "borders": { + "none": null, + "red": { + "$value": { + "value": "1px solid {colors.red}" + } + }, + "semanticRed": { + "$value": { + "value": "{borders.danger}" + } + } + }, + "$order": [ + "colors", + "borders" + ] + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "danger": { + "$value": { + "value": "{colors.red}" + } + } + }, + "borders": { + "$value": { + "danger": { + "value": "{borders.red}" + } + } + } + }, + "breakpoints": { + "sm": null, + "md": null, + "lg": null, + "xl": null, + "2xl": null + }, + "$order": [ + "tokens", + "semanticTokens", + "breakpoints", + "keyframes", + "textStyles", + "containerSizes", + "recipes", + "slotRecipes" + ] + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-red: #ef4444;\n --colors-semantic-red: var(--colors-danger);\n --borders-red: 1px solid var(--colors-red);\n --borders-semantic-red: var(--borders-danger);\n --colors-danger: var(--colors-red);\n --borders-danger: var(--borders-red);\n}\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > themes - no staticCss::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > themes - no staticCss", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "osDark": "@media (prefers-color-scheme: dark)" + }, + "theme": { + "tokens": { + "colors": { + "text": { + "value": "blue" + } + } + }, + "semanticTokens": { + "colors": { + "body": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + }, + "themes": { + "primary": { + "tokens": { + "colors": { + "text": { + "value": "red" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.red.200}" + }, + "body": { + "value": { + "base": "{colors.red.600}", + "_osDark": "{colors.red.400}" + } + } + } + } + } + } + }, + "configPatch": { + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "dark": null, + "light": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "text": { + "$value": { + "value": "blue" + } + } + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "body": { + "$value": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + } + }, + "themes": { + "$value": { + "primary": { + "tokens": { + "colors": { + "text": { + "value": "red" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.red.200}" + }, + "body": { + "value": { + "base": "{colors.red.600}", + "_osDark": "{colors.red.400}" + } + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-text: blue;\n --colors-body: var(--colors-blue-600);\n}\n\n @media (prefers-color-scheme: dark) {\n :where(html) {\n --colors-body: var(--colors-blue-400)\n }\n }\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > themes - staticCss with *::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > themes - staticCss with *", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "osDark": "@media (prefers-color-scheme: dark)" + }, + "theme": { + "tokens": { + "colors": { + "text": { + "value": "blue" + } + } + }, + "semanticTokens": { + "colors": { + "body": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + }, + "themes": { + "primary": { + "tokens": { + "colors": { + "text": { + "value": "red" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.red.200}" + }, + "body": { + "value": { + "base": "{colors.red.600}", + "_osDark": "{colors.red.400}" + } + } + } + } + } + }, + "staticCss": { + "themes": [ + "*" + ] + }, + "outdir": "" + }, + "configPatch": { + "outdir": { + "$value": "" + }, + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "dark": null, + "light": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "text": { + "$value": { + "value": "blue" + } + } + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "body": { + "$value": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + } + }, + "staticCss": { + "$value": { + "themes": [ + "*" + ] + } + }, + "themes": { + "$value": { + "primary": { + "tokens": { + "colors": { + "text": { + "value": "red" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.red.200}" + }, + "body": { + "value": { + "base": "{colors.red.600}", + "_osDark": "{colors.red.400}" + } + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-text: blue;\n --colors-body: var(--colors-blue-600);\n}\n\n [data-panda-theme=primary] {\n --colors-text: red;\n --colors-muted: var(--colors-red-200);\n --colors-body: var(--colors-red-600)\n}\n\n @media (prefers-color-scheme: dark) {\n :where(html) {\n --colors-body: var(--colors-blue-400)\n }\n [data-panda-theme=primary] {\n --colors-body: var(--colors-red-400)\n }\n }\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > themes - staticCss with multiple themes ::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > themes - staticCss with multiple themes ", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "osDark": "@media (prefers-color-scheme: dark)" + }, + "theme": { + "tokens": { + "colors": { + "text": { + "value": "blue" + } + } + }, + "semanticTokens": { + "colors": { + "body": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + }, + "themes": { + "primary": { + "tokens": { + "colors": { + "text": { + "value": "red" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.red.200}" + }, + "body": { + "value": { + "base": "{colors.red.600}", + "_osDark": "{colors.red.400}" + } + } + } + } + }, + "primary-legacy": { + "tokens": { + "colors": { + "text": { + "value": "blue" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.blue.200}" + }, + "body": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + } + }, + "staticCss": { + "themes": [ + "primary" + ] + }, + "outdir": "" + }, + "configPatch": { + "outdir": { + "$value": "" + }, + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "dark": null, + "light": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "text": { + "$value": { + "value": "blue" + } + } + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "body": { + "$value": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + } + }, + "staticCss": { + "$value": { + "themes": [ + "primary" + ] + } + }, + "themes": { + "$value": { + "primary": { + "tokens": { + "colors": { + "text": { + "value": "red" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.red.200}" + }, + "body": { + "value": { + "base": "{colors.red.600}", + "_osDark": "{colors.red.400}" + } + } + } + } + }, + "primary-legacy": { + "tokens": { + "colors": { + "text": { + "value": "blue" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.blue.200}" + }, + "body": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-text: blue;\n --colors-body: var(--colors-blue-600);\n}\n\n [data-panda-theme=primary] {\n --colors-text: red;\n --colors-muted: var(--colors-red-200);\n --colors-body: var(--colors-red-600)\n}\n\n @media (prefers-color-scheme: dark) {\n :where(html) {\n --colors-body: var(--colors-blue-400)\n }\n [data-panda-theme=primary] {\n --colors-body: var(--colors-red-400)\n }\n }\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > themes - staticCss with name::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > themes - staticCss with name", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "osDark": "@media (prefers-color-scheme: dark)" + }, + "theme": { + "tokens": { + "colors": { + "text": { + "value": "blue" + } + } + }, + "semanticTokens": { + "colors": { + "body": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + }, + "themes": { + "primary": { + "tokens": { + "colors": { + "text": { + "value": "red" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.red.200}" + }, + "body": { + "value": { + "base": "{colors.red.600}", + "_osDark": "{colors.red.400}" + } + } + } + } + } + }, + "staticCss": { + "themes": [ + "primary" + ] + }, + "outdir": "" + }, + "configPatch": { + "outdir": { + "$value": "" + }, + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "dark": null, + "light": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "blue": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "red": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "text": { + "$value": { + "value": "blue" + } + } + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "body": { + "$value": { + "value": { + "base": "{colors.blue.600}", + "_osDark": "{colors.blue.400}" + } + } + } + } + } + }, + "staticCss": { + "$value": { + "themes": [ + "primary" + ] + } + }, + "themes": { + "$value": { + "primary": { + "tokens": { + "colors": { + "text": { + "value": "red" + } + } + }, + "semanticTokens": { + "colors": { + "muted": { + "value": "{colors.red.200}" + }, + "body": { + "value": { + "base": "{colors.red.600}", + "_osDark": "{colors.red.400}" + } + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-text: blue;\n --colors-body: var(--colors-blue-600);\n}\n\n [data-panda-theme=primary] {\n --colors-text: red;\n --colors-muted: var(--colors-red-200);\n --colors-body: var(--colors-red-600)\n}\n\n @media (prefers-color-scheme: dark) {\n :where(html) {\n --colors-body: var(--colors-blue-400)\n }\n [data-panda-theme=primary] {\n --colors-body: var(--colors-red-400)\n }\n }\n}" + } + }, + { + "id": "fixture::packages/generator/__tests__/generate-token.test.ts::generator > two stacked multi-block conditions produce N×M rules::1", + "kind": "token-css", + "config": "fixture", + "source": { + "file": "packages/generator/__tests__/generate-token.test.ts", + "test": "generator > two stacked multi-block conditions produce N×M rules", + "line": 10 + }, + "userConfig": { + "eject": true, + "conditions": { + "hoverActive": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + }, + "lightDark": { + "@media (prefers-color-scheme: light)": { + "&[data-mode=\"light\"]": "@slot" + }, + "@media (prefers-color-scheme: dark)": { + "&[data-mode=\"dark\"]": "@slot" + } + } + }, + "theme": { + "tokens": { + "colors": { + "red": { + "500": { + "value": "#f00" + } + }, + "blue": { + "500": { + "value": "#00f" + } + } + } + }, + "semanticTokens": { + "colors": { + "accent": { + "value": { + "base": "{colors.red.500}", + "_hoverActive": { + "_lightDark": "{colors.blue.500}" + } + } + } + } + } + } + }, + "configPatch": { + "conditions": { + "hover": null, + "focus": null, + "focusWithin": null, + "focusVisible": null, + "disabled": null, + "active": null, + "visited": null, + "target": null, + "readOnly": null, + "readWrite": null, + "empty": null, + "checked": null, + "enabled": null, + "expanded": null, + "highlighted": null, + "complete": null, + "incomplete": null, + "dragging": null, + "before": null, + "after": null, + "firstLetter": null, + "firstLine": null, + "marker": null, + "selection": null, + "file": null, + "backdrop": null, + "first": null, + "last": null, + "only": null, + "even": null, + "odd": null, + "firstOfType": null, + "lastOfType": null, + "onlyOfType": null, + "peerFocus": null, + "peerHover": null, + "peerActive": null, + "peerFocusWithin": null, + "peerFocusVisible": null, + "peerDisabled": null, + "peerChecked": null, + "peerInvalid": null, + "peerExpanded": null, + "peerPlaceholderShown": null, + "groupFocus": null, + "groupHover": null, + "groupActive": null, + "groupFocusWithin": null, + "groupFocusVisible": null, + "groupDisabled": null, + "groupChecked": null, + "groupExpanded": null, + "groupInvalid": null, + "indeterminate": null, + "required": null, + "valid": null, + "invalid": null, + "autofill": null, + "inRange": null, + "outOfRange": null, + "placeholder": null, + "placeholderShown": null, + "pressed": null, + "selected": null, + "grabbed": null, + "underValue": null, + "overValue": null, + "atValue": null, + "default": null, + "optional": null, + "open": null, + "closed": null, + "fullscreen": null, + "loading": null, + "hidden": null, + "current": null, + "currentPage": null, + "currentStep": null, + "today": null, + "unavailable": null, + "rangeStart": null, + "rangeEnd": null, + "now": null, + "topmost": null, + "motionReduce": null, + "motionSafe": null, + "print": null, + "landscape": null, + "portrait": null, + "dark": null, + "light": null, + "osDark": null, + "osLight": null, + "highContrast": null, + "lessContrast": null, + "moreContrast": null, + "ltr": null, + "rtl": null, + "scrollbar": null, + "scrollbarThumb": null, + "scrollbarTrack": null, + "horizontal": null, + "vertical": null, + "icon": null, + "starting": null, + "noscript": null, + "invertedColors": null, + "materialTheme": null, + "pastelTheme": null, + "hoverActive": { + "$value": { + "@media (hover: hover)": { + "&:is(:hover, [data-hover])": "@slot" + }, + "@media (hover: none)": { + "&:is(:active, [data-active])": "@slot" + } + } + }, + "lightDark": { + "$value": { + "@media (prefers-color-scheme: light)": { + "&[data-mode=\"light\"]": "@slot" + }, + "@media (prefers-color-scheme: dark)": { + "&[data-mode=\"dark\"]": "@slot" + } + } + } + }, + "theme": { + "keyframes": null, + "breakpoints": null, + "textStyles": null, + "containerSizes": null, + "recipes": null, + "slotRecipes": null, + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "colors": { + "current": null, + "black": null, + "white": null, + "transparent": null, + "rose": null, + "pink": null, + "fuchsia": null, + "purple": null, + "violet": null, + "indigo": null, + "sky": null, + "cyan": null, + "teal": null, + "emerald": null, + "green": null, + "lime": null, + "yellow": null, + "amber": null, + "orange": null, + "neutral": null, + "stone": null, + "zinc": null, + "gray": null, + "slate": null, + "deep": null, + "red": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": { + "value": { + "$value": "#f00" + } + }, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "blue": { + "50": null, + "100": null, + "200": null, + "300": null, + "400": null, + "500": { + "value": { + "$value": "#00f" + } + }, + "600": null, + "700": null, + "800": null, + "900": null, + "950": null + }, + "$order": [ + "red", + "blue" + ] + } + }, + "semanticTokens": { + "spacing": null, + "colors": { + "primary": null, + "secondary": null, + "complex": null, + "surface": null, + "button": null, + "accent": { + "$value": { + "value": { + "base": "{colors.red.500}", + "_hoverActive": { + "_lightDark": "{colors.blue.500}" + } + } + } + } + } + } + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [], + "expected": { + "css": "@layer tokens {\n :where(html) {\n --colors-red-500: #f00;\n --colors-blue-500: #00f;\n --colors-accent: var(--colors-red-500);\n}\n\n @media (hover: hover) {\n @media (prefers-color-scheme: light) {\n :is(:hover, [data-hover])[data-mode=\"light\"] {\n --colors-accent: var(--colors-blue-500)\n }\n }\n }\n\n @media (hover: hover) {\n @media (prefers-color-scheme: dark) {\n :is(:hover, [data-hover])[data-mode=\"dark\"] {\n --colors-accent: var(--colors-blue-500)\n }\n }\n }\n\n @media (hover: none) {\n @media (prefers-color-scheme: light) {\n :is(:active, [data-active])[data-mode=\"light\"] {\n --colors-accent: var(--colors-blue-500)\n }\n }\n }\n\n @media (hover: none) {\n @media (prefers-color-scheme: dark) {\n :is(:active, [data-active])[data-mode=\"dark\"] {\n --colors-accent: var(--colors-blue-500)\n }\n }\n }\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-2.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-2.test.ts.json new file mode 100644 index 00000000000..552f1a64a30 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-2.test.ts.json @@ -0,0 +1,26 @@ +{ + "source": "packages/parser/__tests__/css-2.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/css-2.test.ts::ast parser > issue #1022: should extract css when using spread syntax on the child::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-2.test.ts", + "test": "ast parser > issue #1022: should extract css when using spread syntax on the child", + "line": 591 + }, + "userConfig": null, + "inputs": [ + { + "color": "red.400", + "maxW": "1000px" + } + ], + "expected": { + "css": "@layer utilities {\n .c_red\\.400 {\n color: var(--colors-red-400);\n}\n\n .max-w_1000px {\n max-width: 1000px;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-prop.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-prop.test.ts.json new file mode 100644 index 00000000000..3b7d3fd036d --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-prop.test.ts.json @@ -0,0 +1,23 @@ +{ + "source": "packages/parser/__tests__/css-prop.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/css-prop.test.ts::ast parser / css prop > should parse::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-prop.test.ts", + "test": "ast parser / css prop > should parse", + "line": 16 + }, + "userConfig": null, + "inputs": [ + {} + ], + "expected": { + "css": "@layer utilities {\n .bg_red\\.200 {\n background: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-edge-cases.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-edge-cases.test.ts.json new file mode 100644 index 00000000000..605061d496c --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-edge-cases.test.ts.json @@ -0,0 +1,724 @@ +{ + "source": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw conditional spreading edge cases > handles logical AND spreading with css.raw::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw conditional spreading edge cases > handles logical AND spreading with css.raw", + "line": 1011 + }, + "userConfig": null, + "inputs": [ + { + "borderColor": "red.500", + "color": "red.700", + "backgroundColor": "red.50" + }, + { + "outline": "2px solid", + "outlineColor": "blue.500", + "outlineOffset": "2px" + }, + { + "border": "1px solid", + "borderColor": "gray.300", + "padding": "0.5rem", + "borderRadius": "0.25rem", + "outline": "2px solid", + "outlineColor": "blue.500", + "outlineOffset": "2px", + "_focus": { + "borderColor": "blue.500" + } + }, + { + "borderColor": "red.500", + "color": "red.700", + "backgroundColor": "red.50" + }, + { + "_focus": { + "borderColor": "red.500", + "color": "red.700", + "backgroundColor": "red.50" + } + } + ], + "expected": { + "css": "@layer utilities {\n .bd_1px_solid {\n border: 1px solid;\n}\n\n .p_0\\.5rem {\n padding: 0.5rem;\n}\n\n .bd-c_red\\.500 {\n border-color: var(--colors-red-500);\n}\n\n .ring_2px_solid {\n outline: 2px solid;\n}\n\n .bd-c_gray\\.300 {\n border-color: var(--colors-gray-300);\n}\n\n .bdr_0\\.25rem {\n border-radius: 0.25rem;\n}\n\n .c_red\\.700 {\n color: var(--colors-red-700);\n}\n\n .bg-c_red\\.50 {\n background-color: var(--colors-red-50);\n}\n\n .ring-c_blue\\.500 {\n outline-color: var(--colors-blue-500);\n}\n\n .ring-o_2px {\n outline-offset: 2px;\n}\n\n .focus\\:bd-c_blue\\.500:is(:focus, [data-focus]) {\n border-color: var(--colors-blue-500);\n}\n\n .focus\\:bd-c_red\\.500:is(:focus, [data-focus]) {\n border-color: var(--colors-red-500);\n}\n\n .focus\\:c_red\\.700:is(:focus, [data-focus]) {\n color: var(--colors-red-700);\n}\n\n .focus\\:bg-c_red\\.50:is(:focus, [data-focus]) {\n background-color: var(--colors-red-50);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw conditional spreading edge cases > handles ternary operator with css.raw::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw conditional spreading edge cases > handles ternary operator with css.raw", + "line": 933 + }, + "userConfig": null, + "inputs": [ + { + "backgroundColor": "blue.500", + "color": "white" + }, + { + "backgroundColor": "gray.200", + "color": "gray.800" + }, + { + "padding": "0.5rem 1rem", + "borderRadius": "0.25rem", + "backgroundColor": "blue.500", + "color": "white", + "_hover": { + "backgroundColor": "blue.500", + "color": "white", + "opacity": 0.9 + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_0\\.5rem_1rem {\n padding: 0.5rem 1rem;\n}\n\n .bdr_0\\.25rem {\n border-radius: 0.25rem;\n}\n\n .bg-c_blue\\.500 {\n background-color: var(--colors-blue-500);\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_gray\\.200 {\n background-color: var(--colors-gray-200);\n}\n\n .c_gray\\.800 {\n color: var(--colors-gray-800);\n}\n\n .hover\\:bg-c_blue\\.500:is(:hover, [data-hover]) {\n background-color: var(--colors-blue-500);\n}\n\n .hover\\:c_white:is(:hover, [data-hover]) {\n color: var(--colors-white);\n}\n\n .hover\\:op_0\\.9:is(:hover, [data-hover]) {\n opacity: 0.9;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw cross-file and runtime edge cases > handles css.raw mixed with native CSS properties::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw cross-file and runtime edge cases > handles css.raw mixed with native CSS properties", + "line": 1291 + }, + "userConfig": null, + "inputs": [ + { + "transition": "all 0.3s ease", + "transformOrigin": "center" + }, + { + "display": "block", + "position": "relative", + "transition": "all 0.3s ease", + "transformOrigin": "center", + "transform": "scale(1)", + "opacity": 1, + "_hover": { + "transition": "all 0.3s ease", + "transformOrigin": "center", + "transform": "scale(1.05)", + "boxShadow": "0 4px 8px rgba(0, 0, 0, 0.1)" + }, + "sm": { + "display": "flex", + "transition": "all 0.3s ease", + "transformOrigin": "center", + "transform": "scale(0.95)" + } + } + ], + "expected": { + "css": "@layer utilities {\n .trs_all_0\\.3s_ease {\n transition: all 0.3s ease;\n}\n\n .trf-o_center {\n transform-origin: center;\n}\n\n .d_block {\n display: block;\n}\n\n .pos_relative {\n position: relative;\n}\n\n .trf_scale\\(1\\) {\n transform: scale(1);\n}\n\n .op_1 {\n opacity: 1;\n}\n\n .hover\\:trs_all_0\\.3s_ease:is(:hover, [data-hover]) {\n transition: all 0.3s ease;\n}\n\n .hover\\:trf-o_center:is(:hover, [data-hover]) {\n transform-origin: center;\n}\n\n .hover\\:trf_scale\\(1\\.05\\):is(:hover, [data-hover]) {\n transform: scale(1.05);\n}\n\n .hover\\:bx-sh_0_4px_8px_rgba\\(0\\,_0\\,_0\\,_0\\.1\\):is(:hover, [data-hover]) {\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:trs_all_0\\.3s_ease {\n transition: all 0.3s ease;\n}\n .sm\\:d_flex {\n display: flex;\n}\n .sm\\:trf-o_center {\n transform-origin: center;\n}\n .sm\\:trf_scale\\(0\\.95\\) {\n transform: scale(0.95);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw cross-file and runtime edge cases > handles error scenarios and graceful degradation::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw cross-file and runtime edge cases > handles error scenarios and graceful degradation", + "line": 1373 + }, + "userConfig": null, + "inputs": [ + { + "color": "blue.500", + "fontSize": "16px" + }, + { + "padding": "1rem", + "margin": "0.5rem", + "_hover": { + "color": "blue.500", + "fontSize": "16px", + "opacity": 0.8 + }, + "color": "blue.500", + "fontSize": "16px" + } + ], + "expected": { + "css": "@layer utilities {\n .p_1rem {\n padding: 1rem;\n}\n\n .m_0\\.5rem {\n margin: 0.5rem;\n}\n\n .c_blue\\.500 {\n color: var(--colors-blue-500);\n}\n\n .fs_16px {\n font-size: 16px;\n}\n\n .hover\\:c_blue\\.500:is(:hover, [data-hover]) {\n color: var(--colors-blue-500);\n}\n\n .hover\\:fs_16px:is(:hover, [data-hover]) {\n font-size: 16px;\n}\n\n .hover\\:op_0\\.8:is(:hover, [data-hover]) {\n opacity: 0.8;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw cross-file and runtime edge cases > handles exported/imported css.raw simulation::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw cross-file and runtime edge cases > handles exported/imported css.raw simulation", + "line": 1189 + }, + "userConfig": null, + "inputs": [ + { + "fontFamily": "Inter, sans-serif", + "lineHeight": 1.5 + }, + { + "cursor": "pointer", + "border": "none", + "outline": "none" + }, + { + "fontFamily": "Inter, sans-serif", + "lineHeight": 1.5, + "fontSize": "16px", + "color": "gray.900" + }, + { + "fontFamily": "Inter, sans-serif", + "lineHeight": 1.5, + "fontSize": "16px", + "cursor": "pointer", + "border": "none", + "outline": "none", + "padding": "12px 24px", + "borderRadius": "8px", + "backgroundColor": "blue.500", + "color": "white", + "_hover": { + "cursor": "pointer", + "border": "none", + "outline": "none", + "backgroundColor": "blue.600" + } + } + ], + "expected": { + "css": "@layer utilities {\n .bd_none {\n border: var(--borders-none);\n}\n\n .p_12px_24px {\n padding: 12px 24px;\n}\n\n .ring_none {\n outline: var(--borders-none);\n}\n\n .bdr_8px {\n border-radius: 8px;\n}\n\n .ff_Inter\\,_sans-serif {\n font-family: Inter, sans-serif;\n}\n\n .lh_1\\.5 {\n line-height: 1.5;\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .fs_16px {\n font-size: 16px;\n}\n\n .c_gray\\.900 {\n color: var(--colors-gray-900);\n}\n\n .bg-c_blue\\.500 {\n background-color: var(--colors-blue-500);\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .hover\\:bd_none:is(:hover, [data-hover]) {\n border: var(--borders-none);\n}\n\n .hover\\:ring_none:is(:hover, [data-hover]) {\n outline: var(--borders-none);\n}\n\n .hover\\:cursor_pointer:is(:hover, [data-hover]) {\n cursor: pointer;\n}\n\n .hover\\:bg-c_blue\\.600:is(:hover, [data-hover]) {\n background-color: var(--colors-blue-600);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw cross-file and runtime edge cases > handles function returns with css.raw (limited static analysis)::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw cross-file and runtime edge cases > handles function returns with css.raw (limited static analysis)", + "line": 1102 + }, + "userConfig": null, + "inputs": [ + { + "padding": "1rem", + "border": "1px solid gray" + }, + { + "backgroundColor": "gray.800", + "color": "white" + }, + { + "backgroundColor": "white", + "color": "gray.800" + }, + { + "padding": "1rem", + "border": "1px solid gray", + "borderRadius": "0.5rem" + } + ], + "expected": { + "css": "@layer utilities {\n .p_1rem {\n padding: 1rem;\n}\n\n .bd_1px_solid_gray {\n border: 1px solid gray;\n}\n\n .bdr_0\\.5rem {\n border-radius: 0.5rem;\n}\n\n .bg-c_gray\\.800 {\n background-color: var(--colors-gray-800);\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_white {\n background-color: var(--colors-white);\n}\n\n .c_gray\\.800 {\n color: var(--colors-gray-800);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles computed property names with spread::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles computed property names with spread", + "line": 25 + }, + "userConfig": null, + "inputs": [ + { + "color": "red", + "fontSize": "14px" + }, + { + "color": "red", + "fontSize": "14px", + "_hover": { + "color": "red", + "fontSize": "14px", + "opacity": 0.8 + } + } + ], + "expected": { + "css": "@layer utilities {\n .c_red {\n color: red;\n}\n\n .fs_14px {\n font-size: 14px;\n}\n\n .hover\\:c_red:is(:hover, [data-hover]) {\n color: red;\n}\n\n .hover\\:fs_14px:is(:hover, [data-hover]) {\n font-size: 14px;\n}\n\n .hover\\:op_0\\.8:is(:hover, [data-hover]) {\n opacity: 0.8;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles conditional spreading::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles conditional spreading", + "line": 131 + }, + "userConfig": null, + "inputs": [ + { + "color": "blue", + "padding": "8px" + }, + { + "color": "blue", + "padding": "8px", + "_hover": { + "color": "blue", + "padding": "8px", + "opacity": 0.9 + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_8px {\n padding: 8px;\n}\n\n .c_blue {\n color: blue;\n}\n\n .hover\\:p_8px:is(:hover, [data-hover]) {\n padding: 8px;\n}\n\n .hover\\:c_blue:is(:hover, [data-hover]) {\n color: blue;\n}\n\n .hover\\:op_0\\.9:is(:hover, [data-hover]) {\n opacity: 0.9;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles css.raw in child selectors (Issue #1370)::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles css.raw in child selectors (Issue #1370)", + "line": 734 + }, + "userConfig": null, + "inputs": [ + { + "marginTop": "1rem", + "lineHeight": 1.6, + "color": "gray.800" + }, + { + "fontWeight": "bold", + "color": "gray.900", + "marginBottom": "0.5rem" + }, + { + "fontFamily": "system-ui", + "& p": { + "marginTop": "1rem", + "lineHeight": 1.6, + "color": "gray.800", + "fontSize": "1rem" + }, + "& h2": { + "fontWeight": "bold", + "color": "gray.900", + "marginBottom": "0.5rem", + "fontSize": "1.5rem" + }, + "& blockquote": { + "marginTop": "1rem", + "lineHeight": 1.6, + "color": "gray.800", + "fontStyle": "italic", + "borderLeft": "4px solid", + "paddingLeft": "1rem" + } + } + ], + "expected": { + "css": "@layer utilities {\n .lh_1\\.6 {\n line-height: 1.6;\n}\n\n .c_gray\\.800 {\n color: var(--colors-gray-800);\n}\n\n .fw_bold {\n font-weight: var(--font-weights-bold);\n}\n\n .c_gray\\.900 {\n color: var(--colors-gray-900);\n}\n\n .ff_system-ui {\n font-family: system-ui;\n}\n\n .mt_1rem {\n margin-top: 1rem;\n}\n\n .mb_0\\.5rem {\n margin-bottom: 0.5rem;\n}\n\n .\\[\\&_blockquote\\]\\:bd-l_4px_solid blockquote {\n border-left: 4px solid;\n}\n\n .\\[\\&_p\\]\\:lh_1\\.6 p {\n line-height: 1.6;\n}\n\n .\\[\\&_p\\]\\:c_gray\\.800 p {\n color: var(--colors-gray-800);\n}\n\n .\\[\\&_p\\]\\:fs_1rem p {\n font-size: 1rem;\n}\n\n .\\[\\&_h2\\]\\:fw_bold h2 {\n font-weight: var(--font-weights-bold);\n}\n\n .\\[\\&_h2\\]\\:c_gray\\.900 h2 {\n color: var(--colors-gray-900);\n}\n\n .\\[\\&_h2\\]\\:fs_1\\.5rem h2 {\n font-size: 1.5rem;\n}\n\n .\\[\\&_blockquote\\]\\:lh_1\\.6 blockquote {\n line-height: 1.6;\n}\n\n .\\[\\&_blockquote\\]\\:c_gray\\.800 blockquote {\n color: var(--colors-gray-800);\n}\n\n .\\[\\&_blockquote\\]\\:font-style_italic blockquote {\n font-style: italic;\n}\n\n .\\[\\&_p\\]\\:mt_1rem p {\n margin-top: 1rem;\n}\n\n .\\[\\&_h2\\]\\:mb_0\\.5rem h2 {\n margin-bottom: 0.5rem;\n}\n\n .\\[\\&_blockquote\\]\\:mt_1rem blockquote {\n margin-top: 1rem;\n}\n\n .\\[\\&_blockquote\\]\\:pl_1rem blockquote {\n padding-left: 1rem;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles css.raw spread inside another css.raw::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles css.raw spread inside another css.raw", + "line": 414 + }, + "userConfig": null, + "inputs": [ + { + "margin": 0, + "padding": 0, + "boxSizing": "border-box" + }, + { + "margin": 0, + "padding": 0, + "boxSizing": "border-box", + "fontFamily": "inherit", + "fontSize": "inherit" + }, + { + "margin": 0, + "padding": 0, + "boxSizing": "border-box", + "fontFamily": "inherit", + "fontSize": "inherit", + "cursor": "pointer", + "border": "none", + "borderRadius": "4px" + }, + { + "margin": 0, + "padding": 0, + "boxSizing": "border-box", + "fontFamily": "inherit", + "fontSize": "inherit", + "cursor": "pointer", + "border": "none", + "borderRadius": "4px", + "backgroundColor": "blue.500", + "color": "white", + "_hover": { + "margin": 0, + "padding": 0, + "boxSizing": "border-box", + "fontFamily": "inherit", + "fontSize": "inherit", + "cursor": "pointer", + "border": "none", + "borderRadius": "4px", + "backgroundColor": "blue.600" + } + } + ], + "expected": { + "css": "@layer utilities {\n .m_0 {\n margin: var(--spacing-0);\n}\n\n .p_0 {\n padding: var(--spacing-0);\n}\n\n .bd_none {\n border: var(--borders-none);\n}\n\n .bdr_4px {\n border-radius: 4px;\n}\n\n .bx-s_border-box {\n box-sizing: border-box;\n}\n\n .ff_inherit {\n font-family: inherit;\n}\n\n .fs_inherit {\n font-size: inherit;\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .bg-c_blue\\.500 {\n background-color: var(--colors-blue-500);\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .hover\\:m_0:is(:hover, [data-hover]) {\n margin: var(--spacing-0);\n}\n\n .hover\\:p_0:is(:hover, [data-hover]) {\n padding: var(--spacing-0);\n}\n\n .hover\\:bd_none:is(:hover, [data-hover]) {\n border: var(--borders-none);\n}\n\n .hover\\:bdr_4px:is(:hover, [data-hover]) {\n border-radius: 4px;\n}\n\n .hover\\:bx-s_border-box:is(:hover, [data-hover]) {\n box-sizing: border-box;\n}\n\n .hover\\:ff_inherit:is(:hover, [data-hover]) {\n font-family: inherit;\n}\n\n .hover\\:fs_inherit:is(:hover, [data-hover]) {\n font-size: inherit;\n}\n\n .hover\\:cursor_pointer:is(:hover, [data-hover]) {\n cursor: pointer;\n}\n\n .hover\\:bg-c_blue\\.600:is(:hover, [data-hover]) {\n background-color: var(--colors-blue-600);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles deeply chained css.raw spreads::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles deeply chained css.raw spreads", + "line": 532 + }, + "userConfig": null, + "inputs": [ + { + "fontFamily": "system-ui", + "lineHeight": 1.5 + }, + { + "fontFamily": "system-ui", + "lineHeight": 1.5, + "fontSize": "16px", + "color": "gray.900" + }, + { + "fontFamily": "system-ui", + "lineHeight": 1.5, + "fontSize": "16px", + "color": "gray.900", + "padding": "12px", + "border": "1px solid" + }, + { + "fontFamily": "system-ui", + "lineHeight": 1.5, + "fontSize": "16px", + "color": "gray.900", + "padding": "12px", + "border": "1px solid", + "borderRadius": "8px", + "boxShadow": "sm" + }, + { + "fontFamily": "system-ui", + "lineHeight": 1.5, + "fontSize": "16px", + "color": "gray.900", + "padding": "12px", + "border": "1px solid", + "borderRadius": "8px", + "boxShadow": "sm", + "backgroundColor": "white", + "_hover": { + "fontFamily": "system-ui", + "lineHeight": 1.5, + "fontSize": "16px", + "color": "gray.900", + "backgroundColor": "gray.50" + }, + "_focus": { + "fontFamily": "system-ui", + "lineHeight": 1.5, + "fontSize": "16px", + "color": "gray.900", + "padding": "12px", + "border": "1px solid", + "borderRadius": "8px", + "boxShadow": "sm", + "borderColor": "blue.500" + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_12px {\n padding: 12px;\n}\n\n .bd_1px_solid {\n border: 1px solid;\n}\n\n .bdr_8px {\n border-radius: 8px;\n}\n\n .ff_system-ui {\n font-family: system-ui;\n}\n\n .lh_1\\.5 {\n line-height: 1.5;\n}\n\n .fs_16px {\n font-size: 16px;\n}\n\n .c_gray\\.900 {\n color: var(--colors-gray-900);\n}\n\n .bx-sh_sm {\n box-shadow: var(--shadows-sm);\n}\n\n .bg-c_white {\n background-color: var(--colors-white);\n}\n\n .focus\\:p_12px:is(:focus, [data-focus]) {\n padding: 12px;\n}\n\n .focus\\:bd_1px_solid:is(:focus, [data-focus]) {\n border: 1px solid;\n}\n\n .focus\\:bdr_8px:is(:focus, [data-focus]) {\n border-radius: 8px;\n}\n\n .focus\\:bd-c_blue\\.500:is(:focus, [data-focus]) {\n border-color: var(--colors-blue-500);\n}\n\n .focus\\:ff_system-ui:is(:focus, [data-focus]) {\n font-family: system-ui;\n}\n\n .focus\\:lh_1\\.5:is(:focus, [data-focus]) {\n line-height: 1.5;\n}\n\n .focus\\:fs_16px:is(:focus, [data-focus]) {\n font-size: 16px;\n}\n\n .focus\\:c_gray\\.900:is(:focus, [data-focus]) {\n color: var(--colors-gray-900);\n}\n\n .focus\\:bx-sh_sm:is(:focus, [data-focus]) {\n box-shadow: var(--shadows-sm);\n}\n\n .hover\\:ff_system-ui:is(:hover, [data-hover]) {\n font-family: system-ui;\n}\n\n .hover\\:lh_1\\.5:is(:hover, [data-hover]) {\n line-height: 1.5;\n}\n\n .hover\\:fs_16px:is(:hover, [data-hover]) {\n font-size: 16px;\n}\n\n .hover\\:c_gray\\.900:is(:hover, [data-hover]) {\n color: var(--colors-gray-900);\n}\n\n .hover\\:bg-c_gray\\.50:is(:hover, [data-hover]) {\n background-color: var(--colors-gray-50);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles deeply nested conditions::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles deeply nested conditions", + "line": 78 + }, + "userConfig": null, + "inputs": [ + { + "padding": "10px" + }, + { + "padding": "10px", + "_hover": { + "padding": "10px", + "&:focus": { + "padding": "10px", + "outline": "2px solid blue" + } + } + } + ], + "expected": { + "css": "@layer utilities {\n\n .p_10px,.hover\\:p_10px:is(:hover, [data-hover]),.hover\\:\\[\\&\\:focus\\]\\:p_10px:is(:hover, [data-hover]):focus {\n padding: 10px;\n}\n\n .hover\\:\\[\\&\\:focus\\]\\:ring_2px_solid_blue:is(:hover, [data-hover]):focus {\n outline: 2px solid blue;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles function return with spread::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles function return with spread", + "line": 242 + }, + "userConfig": null, + "inputs": [ + { + "display": "flex", + "gap": "10px" + }, + { + "_hover": { + "display": "flex", + "gap": "10px", + "background": "gray.100" + } + } + ], + "expected": { + "css": "@layer utilities {\n .gap_10px {\n gap: 10px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .hover\\:bg_gray\\.100:is(:hover, [data-hover]) {\n background: var(--colors-gray-100);\n}\n\n .hover\\:gap_10px:is(:hover, [data-hover]) {\n gap: 10px;\n}\n\n .hover\\:d_flex:is(:hover, [data-hover]) {\n display: flex;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles nested selectors with css.raw references::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles nested selectors with css.raw references", + "line": 834 + }, + "userConfig": null, + "inputs": [ + { + "textDecoration": "none", + "color": "blue.600", + "transition": "color 0.2s" + }, + { + "padding": "0.5rem 1rem", + "borderRadius": "0.25rem", + "border": "none", + "cursor": "pointer" + }, + { + "& .nav": { + "display": "flex", + "gap": "1rem", + "& a": { + "textDecoration": "none", + "color": "blue.600", + "transition": "color 0.2s", + "_hover": { + "textDecoration": "none", + "transition": "color 0.2s", + "color": "blue.800" + } + }, + "& button": { + "padding": "0.5rem 1rem", + "borderRadius": "0.25rem", + "border": "none", + "cursor": "pointer", + "backgroundColor": "blue.500", + "color": "white", + "_hover": { + "padding": "0.5rem 1rem", + "borderRadius": "0.25rem", + "border": "none", + "cursor": "pointer", + "backgroundColor": "blue.600" + } + } + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_0\\.5rem_1rem {\n padding: 0.5rem 1rem;\n}\n\n .bd_none {\n border: var(--borders-none);\n}\n\n .td_none {\n text-decoration: none;\n}\n\n .trs_color_0\\.2s {\n transition: color 0.2s;\n}\n\n .bdr_0\\.25rem {\n border-radius: 0.25rem;\n}\n\n .c_blue\\.600 {\n color: var(--colors-blue-600);\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .\\[\\&_\\.nav\\]\\:gap_1rem .nav {\n gap: 1rem;\n}\n\n .\\[\\&_\\.nav\\]\\:d_flex .nav {\n display: flex;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:p_0\\.5rem_1rem .nav button {\n padding: 0.5rem 1rem;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:bd_none .nav button {\n border: var(--borders-none);\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_a\\]\\:td_none .nav a {\n text-decoration: none;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_a\\]\\:trs_color_0\\.2s .nav a {\n transition: color 0.2s;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:bdr_0\\.25rem .nav button {\n border-radius: 0.25rem;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_a\\]\\:c_blue\\.600 .nav a {\n color: var(--colors-blue-600);\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:cursor_pointer .nav button {\n cursor: pointer;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:bg-c_blue\\.500 .nav button {\n background-color: var(--colors-blue-500);\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:c_white .nav button {\n color: var(--colors-white);\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:hover\\:p_0\\.5rem_1rem .nav button:is(:hover, [data-hover]) {\n padding: 0.5rem 1rem;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:hover\\:bd_none .nav button:is(:hover, [data-hover]) {\n border: var(--borders-none);\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_a\\]\\:hover\\:td_none .nav a:is(:hover, [data-hover]) {\n text-decoration: none;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_a\\]\\:hover\\:trs_color_0\\.2s .nav a:is(:hover, [data-hover]) {\n transition: color 0.2s;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:hover\\:bdr_0\\.25rem .nav button:is(:hover, [data-hover]) {\n border-radius: 0.25rem;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_a\\]\\:hover\\:c_blue\\.800 .nav a:is(:hover, [data-hover]) {\n color: var(--colors-blue-800);\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:hover\\:cursor_pointer .nav button:is(:hover, [data-hover]) {\n cursor: pointer;\n}\n\n .\\[\\&_\\.nav\\]\\:\\[\\&_button\\]\\:hover\\:bg-c_blue\\.600 .nav button:is(:hover, [data-hover]) {\n background-color: var(--colors-blue-600);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles spreading undefined or null gracefully::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles spreading undefined or null gracefully", + "line": 347 + }, + "userConfig": null, + "inputs": [ + { + "color": "orange", + "fontSize": "18px" + }, + { + "color": "orange", + "fontSize": "18px", + "_hover": { + "color": "orange", + "fontSize": "18px", + "opacity": 0.7 + } + } + ], + "expected": { + "css": "@layer utilities {\n .c_orange {\n color: orange;\n}\n\n .fs_18px {\n font-size: 18px;\n}\n\n .hover\\:c_orange:is(:hover, [data-hover]) {\n color: orange;\n}\n\n .hover\\:fs_18px:is(:hover, [data-hover]) {\n font-size: 18px;\n}\n\n .hover\\:op_0\\.7:is(:hover, [data-hover]) {\n opacity: 0.7;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles spreading with array syntax::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles spreading with array syntax", + "line": 184 + }, + "userConfig": null, + "inputs": [ + { + "color": "green", + "fontSize": "16px" + }, + { + "color": "green", + "fontSize": "16px", + "_hover": [ + { + "color": "green", + "fontSize": "16px", + "opacity": 0.8 + } + ] + } + ], + "expected": { + "css": "@layer utilities {\n .c_green {\n color: green;\n}\n\n .fs_16px {\n font-size: 16px;\n}\n\n .hover\\:c_green:is(:hover, [data-hover]) {\n color: green;\n}\n\n .hover\\:fs_16px:is(:hover, [data-hover]) {\n font-size: 16px;\n}\n\n .hover\\:op_0\\.8:is(:hover, [data-hover]) {\n opacity: 0.8;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles spreading with multiple css.raw calls in same object::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles spreading with multiple css.raw calls in same object", + "line": 652 + }, + "userConfig": null, + "inputs": [ + { + "color": "red", + "padding": "10px" + }, + { + "margin": "5px", + "border": "1px solid black" + }, + { + "color": "red", + "padding": "10px", + "margin": "5px", + "border": "1px solid black", + "_hover": { + "color": "red", + "padding": "10px", + "margin": "5px", + "border": "1px solid black", + "opacity": 0.8 + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_10px {\n padding: 10px;\n}\n\n .m_5px {\n margin: 5px;\n}\n\n .bd_1px_solid_black {\n border: 1px solid black;\n}\n\n .c_red {\n color: red;\n}\n\n .hover\\:p_10px:is(:hover, [data-hover]) {\n padding: 10px;\n}\n\n .hover\\:m_5px:is(:hover, [data-hover]) {\n margin: 5px;\n}\n\n .hover\\:bd_1px_solid_black:is(:hover, [data-hover]) {\n border: 1px solid black;\n}\n\n .hover\\:c_red:is(:hover, [data-hover]) {\n color: red;\n}\n\n .hover\\:op_0\\.8:is(:hover, [data-hover]) {\n opacity: 0.8;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles spreading with renamed imports::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-edge-cases.test.ts", + "test": "css.raw edge cases with spreading > handles spreading with renamed imports", + "line": 291 + }, + "userConfig": null, + "inputs": [ + { + "color": "purple", + "fontWeight": "bold" + }, + { + "color": "purple", + "fontWeight": "bold", + "_active": { + "color": "purple", + "fontWeight": "bold", + "transform": "scale(0.98)" + } + } + ], + "expected": { + "css": "@layer utilities {\n .c_purple {\n color: purple;\n}\n\n .fw_bold {\n font-weight: var(--font-weights-bold);\n}\n\n .active\\:c_purple:is(:active, [data-active]) {\n color: purple;\n}\n\n .active\\:fw_bold:is(:active, [data-active]) {\n font-weight: var(--font-weights-bold);\n}\n\n .active\\:trf_scale\\(0\\.98\\):is(:active, [data-active]) {\n transform: scale(0.98);\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-spread.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-spread.test.ts.json new file mode 100644 index 00000000000..3b3c341c872 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-spread.test.ts.json @@ -0,0 +1,276 @@ +{ + "source": "packages/parser/__tests__/css-raw-spread.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles deeply nested spreading with conditions::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-spread.test.ts", + "test": "css.raw spreading in conditions > handles deeply nested spreading with conditions", + "line": 279 + }, + "userConfig": null, + "inputs": [ + { + "color": "text.primary", + "fontSize": "md" + }, + { + "color": "text.primary", + "fontSize": "md", + "cursor": "pointer", + "transition": "all 0.2s" + }, + { + "color": "text.primary", + "fontSize": "md", + "border": "1px solid", + "borderColor": "border.default", + "_hover": { + "color": "text.primary", + "fontSize": "md", + "cursor": "pointer", + "transition": "all 0.2s", + "borderColor": "border.hover", + "_dark": { + "color": "text.primary", + "fontSize": "md", + "cursor": "pointer", + "transition": "all 0.2s", + "borderColor": "border.dark.hover" + } + }, + "sm": { + "color": "text.primary", + "fontSize": "md", + "padding": "2", + "_hover": { + "color": "text.primary", + "fontSize": "md", + "cursor": "pointer", + "transition": "all 0.2s", + "padding": "3" + } + } + } + ], + "expected": { + "css": "@layer utilities {\n .bd_1px_solid {\n border: 1px solid;\n}\n\n .trs_all_0\\.2s {\n transition: all 0.2s;\n}\n\n .bd-c_border\\.default {\n border-color: border.default;\n}\n\n .c_text\\.primary {\n color: text.primary;\n}\n\n .fs_md {\n font-size: var(--font-sizes-md);\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .hover\\:trs_all_0\\.2s:is(:hover, [data-hover]) {\n transition: all 0.2s;\n}\n\n .hover\\:bd-c_border\\.hover:is(:hover, [data-hover]) {\n border-color: border.hover;\n}\n\n .hover\\:c_text\\.primary:is(:hover, [data-hover]) {\n color: text.primary;\n}\n\n .hover\\:fs_md:is(:hover, [data-hover]) {\n font-size: var(--font-sizes-md);\n}\n\n .hover\\:cursor_pointer:is(:hover, [data-hover]) {\n cursor: pointer;\n}\n\n [data-theme=dark] .hover\\:dark\\:trs_all_0\\.2s:is(:hover, [data-hover]),.dark .hover\\:dark\\:trs_all_0\\.2s:is(:hover, [data-hover]),.hover\\:dark\\:trs_all_0\\.2s:is(:hover, [data-hover]).dark,.hover\\:dark\\:trs_all_0\\.2s:is(:hover, [data-hover])[data-theme=dark] {\n transition: all 0.2s;\n}\n\n [data-theme=dark] .hover\\:dark\\:bd-c_border\\.dark\\.hover:is(:hover, [data-hover]),.dark .hover\\:dark\\:bd-c_border\\.dark\\.hover:is(:hover, [data-hover]),.hover\\:dark\\:bd-c_border\\.dark\\.hover:is(:hover, [data-hover]).dark,.hover\\:dark\\:bd-c_border\\.dark\\.hover:is(:hover, [data-hover])[data-theme=dark] {\n border-color: border.dark.hover;\n}\n\n [data-theme=dark] .hover\\:dark\\:c_text\\.primary:is(:hover, [data-hover]),.dark .hover\\:dark\\:c_text\\.primary:is(:hover, [data-hover]),.hover\\:dark\\:c_text\\.primary:is(:hover, [data-hover]).dark,.hover\\:dark\\:c_text\\.primary:is(:hover, [data-hover])[data-theme=dark] {\n color: text.primary;\n}\n\n [data-theme=dark] .hover\\:dark\\:fs_md:is(:hover, [data-hover]),.dark .hover\\:dark\\:fs_md:is(:hover, [data-hover]),.hover\\:dark\\:fs_md:is(:hover, [data-hover]).dark,.hover\\:dark\\:fs_md:is(:hover, [data-hover])[data-theme=dark] {\n font-size: var(--font-sizes-md);\n}\n\n [data-theme=dark] .hover\\:dark\\:cursor_pointer:is(:hover, [data-hover]),.dark .hover\\:dark\\:cursor_pointer:is(:hover, [data-hover]),.hover\\:dark\\:cursor_pointer:is(:hover, [data-hover]).dark,.hover\\:dark\\:cursor_pointer:is(:hover, [data-hover])[data-theme=dark] {\n cursor: pointer;\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:p_2 {\n padding: var(--spacing-2);\n}\n .sm\\:c_text\\.primary {\n color: text.primary;\n}\n .sm\\:fs_md {\n font-size: var(--font-sizes-md);\n}\n .sm\\:hover\\:p_3:is(:hover, [data-hover]) {\n padding: var(--spacing-3);\n}\n .sm\\:hover\\:trs_all_0\\.2s:is(:hover, [data-hover]) {\n transition: all 0.2s;\n}\n .sm\\:hover\\:c_text\\.primary:is(:hover, [data-hover]) {\n color: text.primary;\n}\n .sm\\:hover\\:fs_md:is(:hover, [data-hover]) {\n font-size: var(--font-sizes-md);\n}\n .sm\\:hover\\:cursor_pointer:is(:hover, [data-hover]) {\n cursor: pointer;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles nested spreading with identifiers::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-spread.test.ts", + "test": "css.raw spreading in conditions > handles nested spreading with identifiers", + "line": 193 + }, + "userConfig": null, + "inputs": [ + { + "display": "flex", + "gap": "10px" + }, + { + "background": "gray.100", + "cursor": "pointer" + }, + { + "display": "flex", + "gap": "10px", + "_hover": { + "background": "gray.100", + "cursor": "pointer", + "transform": "scale(1.05)" + }, + "_focus": { + "display": "flex", + "gap": "10px", + "outline": "2px solid blue" + } + } + ], + "expected": { + "css": "@layer utilities {\n .bg_gray\\.100 {\n background: var(--colors-gray-100);\n}\n\n .gap_10px {\n gap: 10px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .focus\\:gap_10px:is(:focus, [data-focus]) {\n gap: 10px;\n}\n\n .focus\\:ring_2px_solid_blue:is(:focus, [data-focus]) {\n outline: 2px solid blue;\n}\n\n .focus\\:d_flex:is(:focus, [data-focus]) {\n display: flex;\n}\n\n .hover\\:bg_gray\\.100:is(:hover, [data-hover]) {\n background: var(--colors-gray-100);\n}\n\n .hover\\:cursor_pointer:is(:hover, [data-hover]) {\n cursor: pointer;\n}\n\n .hover\\:trf_scale\\(1\\.05\\):is(:hover, [data-hover]) {\n transform: scale(1.05);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles spreading across multiple files::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-spread.test.ts", + "test": "css.raw spreading in conditions > handles spreading across multiple files", + "line": 450 + }, + "userConfig": null, + "inputs": [ + { + "fontFamily": "sans-serif", + "lineHeight": 1.5 + }, + { + "fontFamily": "sans-serif", + "lineHeight": 1.5, + "padding": "8px 16px", + "borderRadius": "4px" + }, + { + "fontFamily": "sans-serif", + "lineHeight": 1.5, + "padding": "8px 16px", + "borderRadius": "4px", + "backgroundColor": "blue.500", + "_hover": { + "fontFamily": "sans-serif", + "lineHeight": 1.5, + "padding": "8px 16px", + "borderRadius": "4px", + "backgroundColor": "blue.600" + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_8px_16px {\n padding: 8px 16px;\n}\n\n .bdr_4px {\n border-radius: 4px;\n}\n\n .ff_sans-serif {\n font-family: sans-serif;\n}\n\n .lh_1\\.5 {\n line-height: 1.5;\n}\n\n .bg-c_blue\\.500 {\n background-color: var(--colors-blue-500);\n}\n\n .hover\\:p_8px_16px:is(:hover, [data-hover]) {\n padding: 8px 16px;\n}\n\n .hover\\:bdr_4px:is(:hover, [data-hover]) {\n border-radius: 4px;\n}\n\n .hover\\:ff_sans-serif:is(:hover, [data-hover]) {\n font-family: sans-serif;\n}\n\n .hover\\:lh_1\\.5:is(:hover, [data-hover]) {\n line-height: 1.5;\n}\n\n .hover\\:bg-c_blue\\.600:is(:hover, [data-hover]) {\n background-color: var(--colors-blue-600);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles spreading css.raw in arbitrary selectors::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-spread.test.ts", + "test": "css.raw spreading in conditions > handles spreading css.raw in arbitrary selectors", + "line": 375 + }, + "userConfig": null, + "inputs": [ + { + "margin": 0, + "padding": 0, + "boxSizing": "border-box" + }, + { + "margin": 0, + "padding": 0, + "boxSizing": "border-box", + "listStyle": "none", + "& li": { + "margin": 0, + "padding": 0, + "boxSizing": "border-box", + "display": "block", + "&:hover": { + "margin": 0, + "padding": 0, + "boxSizing": "border-box", + "background": "gray.50" + } + }, + "[data-selected]": { + "margin": 0, + "padding": 0, + "boxSizing": "border-box", + "fontWeight": "bold" + } + } + ], + "expected": { + "css": "@layer utilities {\n .m_0 {\n margin: var(--spacing-0);\n}\n\n .p_0 {\n padding: var(--spacing-0);\n}\n\n .li-s_none {\n list-style: none;\n}\n\n .bx-s_border-box {\n box-sizing: border-box;\n}\n\n .fw_bold {\n font-weight: var(--font-weights-bold);\n}\n\n .\\[\\&_li\\]\\:m_0 li {\n margin: var(--spacing-0);\n}\n\n .\\[\\&_li\\]\\:p_0 li {\n padding: var(--spacing-0);\n}\n\n .\\[\\&_li\\]\\:bx-s_border-box li {\n box-sizing: border-box;\n}\n\n .\\[\\&_li\\]\\:d_block li {\n display: block;\n}\n\n .\\[\\&_li\\]\\:\\[\\&\\:hover\\]\\:m_0 li:hover {\n margin: var(--spacing-0);\n}\n\n .\\[\\&_li\\]\\:\\[\\&\\:hover\\]\\:p_0 li:hover {\n padding: var(--spacing-0);\n}\n\n .\\[\\&_li\\]\\:\\[\\&\\:hover\\]\\:bg_gray\\.50 li:hover {\n background: var(--colors-gray-50);\n}\n\n .\\[\\&_li\\]\\:\\[\\&\\:hover\\]\\:bx-s_border-box li:hover {\n box-sizing: border-box;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles variable assignment with spread::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-spread.test.ts", + "test": "css.raw spreading in conditions > handles variable assignment with spread", + "line": 133 + }, + "userConfig": null, + "inputs": [ + { + "color": "blue", + "fontSize": "16px" + }, + { + "color": "blue", + "fontSize": "16px", + "_hover": { + "color": "blue", + "fontSize": "16px", + "opacity": 0.9 + } + } + ], + "expected": { + "css": "@layer utilities {\n .c_blue {\n color: blue;\n}\n\n .fs_16px {\n font-size: 16px;\n}\n\n .hover\\:c_blue:is(:hover, [data-hover]) {\n color: blue;\n}\n\n .hover\\:fs_16px:is(:hover, [data-hover]) {\n font-size: 16px;\n}\n\n .hover\\:op_0\\.9:is(:hover, [data-hover]) {\n opacity: 0.9;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > spreads css.raw in pseudo selectors::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-spread.test.ts", + "test": "css.raw spreading in conditions > spreads css.raw in pseudo selectors", + "line": 23 + }, + "userConfig": null, + "inputs": [ + { + "color": "red", + "fontSize": "14px" + }, + { + "color": "red", + "fontSize": "14px", + "_hover": { + "color": "red", + "fontSize": "14px", + "opacity": 0.8 + } + } + ], + "expected": { + "css": "@layer utilities {\n .c_red {\n color: red;\n}\n\n .fs_14px {\n font-size: 14px;\n}\n\n .hover\\:c_red:is(:hover, [data-hover]) {\n color: red;\n}\n\n .hover\\:fs_14px:is(:hover, [data-hover]) {\n font-size: 14px;\n}\n\n .hover\\:op_0\\.8:is(:hover, [data-hover]) {\n opacity: 0.8;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > spreads css.raw in responsive conditions::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-spread.test.ts", + "test": "css.raw spreading in conditions > spreads css.raw in responsive conditions", + "line": 77 + }, + "userConfig": null, + "inputs": [ + { + "padding": "10px", + "margin": "5px" + }, + { + "sm": { + "padding": "10px", + "margin": "5px", + "width": "100%" + }, + "md": { + "padding": "10px", + "margin": "5px", + "width": "50%" + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_10px {\n padding: 10px;\n}\n\n .m_5px {\n margin: 5px;\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:p_10px {\n padding: 10px;\n}\n .sm\\:m_5px {\n margin: 5px;\n}\n .sm\\:w_100\\% {\n width: 100%;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:p_10px {\n padding: 10px;\n}\n .md\\:m_5px {\n margin: 5px;\n}\n .md\\:w_50\\% {\n width: 50%;\n}\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-variants.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-variants.test.ts.json new file mode 100644 index 00000000000..3c6dc84577d --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw-variants.test.ts.json @@ -0,0 +1,180 @@ +{ + "source": "packages/parser/__tests__/css-raw-variants.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/css-raw-variants.test.ts::css.raw spreading in variants > handles complex nested css.raw spreading in cva compound variants::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-variants.test.ts", + "test": "css.raw spreading in variants > handles complex nested css.raw spreading in cva compound variants", + "line": 528 + }, + "userConfig": null, + "inputs": [ + { + "border": "1px solid", + "borderRadius": "md", + "padding": "2" + }, + { + "borderColor": "red.500", + "color": "red.700", + "_focus": { + "borderColor": "red.600", + "boxShadow": "0 0 0 3px rgba(255, 0, 0, 0.1)" + } + } + ], + "expected": { + "css": "@layer utilities {\n .bd_1px_solid {\n border: 1px solid;\n}\n\n .p_2 {\n padding: var(--spacing-2);\n}\n\n .bdr_md {\n border-radius: var(--radii-md);\n}\n\n .bd-c_red\\.500 {\n border-color: var(--colors-red-500);\n}\n\n .ring_none {\n outline: var(--borders-none);\n}\n\n .bd-c_gray\\.300 {\n border-color: var(--colors-gray-300);\n}\n\n .c_red\\.700 {\n color: var(--colors-red-700);\n}\n\n .fs_sm {\n font-size: var(--font-sizes-sm);\n}\n\n .fs_md {\n font-size: var(--font-sizes-md);\n}\n\n .fs_lg {\n font-size: var(--font-sizes-lg);\n}\n\n .bg-c_gray\\.50 {\n background-color: var(--colors-gray-50);\n}\n\n .bg-c_red\\.50 {\n background-color: var(--colors-red-50);\n}\n\n .focus\\:bd-c_red\\.600:is(:focus, [data-focus]) {\n border-color: var(--colors-red-600);\n}\n\n .focus\\:bx-sh_0_0_0_3px_rgba\\(255\\,_0\\,_0\\,_0\\.1\\):is(:focus, [data-focus]) {\n box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);\n}\n}" + }, + "unsupported": "extracted non-css items (cva)" + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-variants.test.ts::css.raw spreading in variants > handles css.raw spreading in sva variant with conditional styles::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-variants.test.ts", + "test": "css.raw spreading in variants > handles css.raw spreading in sva variant with conditional styles", + "line": 792 + }, + "userConfig": null, + "inputs": [ + { + "transition": "all 0.3s ease", + "transform": "translateX(-100%)" + }, + { + "opacity": 0, + "visibility": "hidden" + } + ], + "expected": { + "css": "@layer utilities {\n .inset_0 {\n inset: var(--spacing-0);\n}\n\n .p_1rem {\n padding: 1rem;\n}\n\n .trs_all_0\\.3s_ease {\n transition: all 0.3s ease;\n}\n\n .trf_translateX\\(-100\\%\\) {\n transform: translateX(-100%);\n}\n\n .op_0 {\n opacity: 0;\n}\n\n .vis_hidden {\n visibility: hidden;\n}\n\n .pos_fixed {\n position: fixed;\n}\n\n .op_0\\.5 {\n opacity: 0.5;\n}\n\n .pos_relative {\n position: relative;\n}\n\n .trf_translateX\\(0\\) {\n transform: translateX(0);\n}\n\n .op_1 {\n opacity: 1;\n}\n\n .vis_visible {\n visibility: visible;\n}\n}" + }, + "unsupported": "extracted non-css items (sva)" + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-variants.test.ts::css.raw spreading in variants > handles SVA slots array spreading (Issue #2671)::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-variants.test.ts", + "test": "css.raw spreading in variants > handles SVA slots array spreading (Issue #2671)", + "line": 669 + }, + "userConfig": null, + "inputs": [ + { + "margin": 0, + "padding": 0 + } + ], + "expected": { + "css": "@layer utilities {\n .m_0 {\n margin: var(--spacing-0);\n}\n\n .p_0 {\n padding: var(--spacing-0);\n}\n\n .p_8px_16px {\n padding: 8px 16px;\n}\n\n .bd_1px_solid_gray {\n border: 1px solid gray;\n}\n\n .inset_0 {\n inset: var(--spacing-0);\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .bg-c_white {\n background-color: var(--colors-white);\n}\n\n .pos_fixed {\n position: fixed;\n}\n\n .bg-c_blackAlpha\\.600 {\n background-color: blackAlpha.600;\n}\n\n .w_300px {\n width: 300px;\n}\n\n .w_500px {\n width: 500px;\n}\n}" + }, + "unsupported": "extracted non-css items (sva)" + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-variants.test.ts::css.raw spreading in variants > spreads css.raw in cva base styles::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-variants.test.ts", + "test": "css.raw spreading in variants > spreads css.raw in cva base styles", + "line": 30 + }, + "userConfig": null, + "inputs": [ + { + "display": "flex", + "alignItems": "center", + "gap": "2" + } + ], + "expected": { + "css": "@layer utilities {\n .p_2 {\n padding: var(--spacing-2);\n}\n\n .gap_2 {\n gap: var(--spacing-2);\n}\n\n .bdr_md {\n border-radius: var(--radii-md);\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .fs_sm {\n font-size: var(--font-sizes-sm);\n}\n\n .fs_lg {\n font-size: var(--font-sizes-lg);\n}\n}" + }, + "unsupported": "extracted non-css items (cva)" + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-variants.test.ts::css.raw spreading in variants > spreads css.raw in cva variant styles::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-variants.test.ts", + "test": "css.raw spreading in variants > spreads css.raw in cva variant styles", + "line": 116 + }, + "userConfig": null, + "inputs": [ + { + "opacity": 0.8, + "transform": "scale(0.98)" + }, + { + "cursor": "pointer", + "transition": "all 0.2s" + } + ], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .trs_all_0\\.2s {\n transition: all 0.2s;\n}\n\n .bdr_lg {\n border-radius: var(--radii-lg);\n}\n\n .op_0\\.8 {\n opacity: 0.8;\n}\n\n .trf_scale\\(0\\.98\\) {\n transform: scale(0.98);\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .bg-c_blue\\.500 {\n background-color: var(--colors-blue-500);\n}\n\n .bg-c_gray\\.200 {\n background-color: var(--colors-gray-200);\n}\n\n .hover\\:op_0\\.8:is(:hover, [data-hover]) {\n opacity: 0.8;\n}\n\n .hover\\:trf_scale\\(0\\.98\\):is(:hover, [data-hover]) {\n transform: scale(0.98);\n}\n\n .hover\\:bx-sh_lg:is(:hover, [data-hover]) {\n box-shadow: var(--shadows-lg);\n}\n}" + }, + "unsupported": "extracted non-css items (cva)" + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-variants.test.ts::css.raw spreading in variants > spreads css.raw in sva slot styles::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-variants.test.ts", + "test": "css.raw spreading in variants > spreads css.raw in sva slot styles", + "line": 232 + }, + "userConfig": null, + "inputs": [ + { + "margin": 0, + "padding": 0, + "boxSizing": "border-box" + }, + { + "display": "flex", + "alignItems": "center" + } + ], + "expected": { + "css": "@layer utilities {\n .m_0 {\n margin: var(--spacing-0);\n}\n\n .p_0 {\n padding: var(--spacing-0);\n}\n\n .inset_0 {\n inset: var(--spacing-0);\n}\n\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .bdr_lg {\n border-radius: var(--radii-lg);\n}\n\n .bd-b_1px_solid {\n border-bottom: 1px solid;\n}\n\n .bd-c_gray\\.200 {\n border-color: var(--colors-gray-200);\n}\n\n .bx-s_border-box {\n box-sizing: border-box;\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .pos_fixed {\n position: fixed;\n}\n\n .bg-c_blackAlpha\\.600 {\n background-color: blackAlpha.600;\n}\n\n .bg-c_white {\n background-color: var(--colors-white);\n}\n\n .bx-sh_xl {\n box-shadow: var(--shadows-xl);\n}\n\n .max-w_md {\n max-width: var(--sizes-md);\n}\n\n .max-w_2xl {\n max-width: var(--sizes-2xl);\n}\n}" + }, + "unsupported": "extracted non-css items (sva)" + }, + { + "id": "fixture::packages/parser/__tests__/css-raw-variants.test.ts::css.raw spreading in variants > spreads css.raw in sva variant slots with conditions::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw-variants.test.ts", + "test": "css.raw spreading in variants > spreads css.raw in sva variant slots with conditions", + "line": 381 + }, + "userConfig": null, + "inputs": [ + { + "outline": "2px solid", + "outlineColor": "blue.500", + "outlineOffset": "2px" + }, + { + "opacity": 0.9, + "transform": "translateY(-1px)" + } + ], + "expected": { + "css": "@layer utilities {\n .ring_2px_solid {\n outline: 2px solid;\n}\n\n .bdr_md {\n border-radius: var(--radii-md);\n}\n\n .ring-c_blue\\.500 {\n outline-color: var(--colors-blue-500);\n}\n\n .ring-o_2px {\n outline-offset: 2px;\n}\n\n .op_0\\.9 {\n opacity: 0.9;\n}\n\n .trf_translateY\\(-1px\\) {\n transform: translateY(-1px);\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .bg-c_blue\\.500 {\n background-color: var(--colors-blue-500);\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_gray\\.100 {\n background-color: var(--colors-gray-100);\n}\n\n .fw_medium {\n font-weight: var(--font-weights-medium);\n}\n\n .w_4 {\n width: var(--sizes-4);\n}\n\n .h_4 {\n height: var(--sizes-4);\n}\n\n .focus\\:ring_2px_solid:is(:focus, [data-focus]) {\n outline: 2px solid;\n}\n\n .focus\\:ring-c_blue\\.500:is(:focus, [data-focus]) {\n outline-color: var(--colors-blue-500);\n}\n\n .focus\\:ring-o_2px:is(:focus, [data-focus]) {\n outline-offset: 2px;\n}\n\n .focus\\:ring-c_gray\\.500:is(:focus, [data-focus]) {\n outline-color: var(--colors-gray-500);\n}\n\n .hover\\:op_0\\.9:is(:hover, [data-hover]) {\n opacity: 0.9;\n}\n\n .hover\\:trf_translateY\\(-1px\\):is(:hover, [data-hover]) {\n transform: translateY(-1px);\n}\n\n .hover\\:bg-c_blue\\.600:is(:hover, [data-hover]) {\n background-color: var(--colors-blue-600);\n}\n}" + }, + "unsupported": "extracted non-css items (sva)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw.test.ts.json new file mode 100644 index 00000000000..66a8f0430b0 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.css-raw.test.ts.json @@ -0,0 +1,35 @@ +{ + "source": "packages/parser/__tests__/css-raw.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/css-raw.test.ts::{fn}.raw > using raw syntax works::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/css-raw.test.ts", + "test": "{fn}.raw > using raw syntax works", + "line": 40 + }, + "userConfig": null, + "inputs": [ + { + "mx": "3", + "paddingTop": "4", + "color": "amber.100" + }, + { + "mx": "10", + "pt": "6", + "color": "blue.950" + }, + { + "bg": "red.400" + } + ], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .buttonStyle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .buttonStyle:is(:hover, [data-hover]) {\n background-color: var(--colors-red-200);\n font-size: var(--font-sizes-3xl);\n color: var(--colors-white);\n}\n}\n\n .buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n\n .buttonStyle--variant_solid {\n background-color: blue;\n color: var(--colors-white);\n}\n\n .buttonStyle--variant_solid[data-disabled] {\n background-color: gray;\n color: var(--colors-black);\n font-size: var(--font-sizes-2xl);\n}\n\n .buttonStyle--variant_solid:is(:hover, [data-hover]) {\n background-color: darkblue;\n}\n\n .buttonStyle--size_sm {\n padding: 0 0.5rem;\n height: 2.5rem;\n min-width: 2.5rem;\n}\n}\n\n@layer utilities {\n .bg_red\\.400 {\n background: var(--colors-red-400);\n}\n\n .mx_3 {\n margin-inline: var(--spacing-3);\n}\n\n .mx_10 {\n margin-inline: var(--spacing-10);\n}\n\n .gap_8px {\n gap: 8px;\n}\n\n .c_amber\\.100 {\n color: var(--colors-amber-100);\n}\n\n .c_blue\\.950 {\n color: var(--colors-blue-950);\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .pt_4 {\n padding-top: var(--spacing-4);\n}\n\n .pt_6 {\n padding-top: var(--spacing-6);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-recipe, recipe, pattern)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.import-map.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.import-map.test.ts.json new file mode 100644 index 00000000000..c5fc8d07b85 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.import-map.test.ts.json @@ -0,0 +1,94 @@ +{ + "source": "packages/parser/__tests__/import-map.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/import-map.test.ts::config.importMap > multiple importMap::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/import-map.test.ts", + "test": "config.importMap > multiple importMap", + "line": 183 + }, + "userConfig": { + "importMap": { + "css": [ + "@acme/org/css", + "@foo/org/css" + ], + "recipes": [ + "@acme/org/recipes", + "@bar/org/recipes" + ], + "patterns": "@acme/org/patterns" + } + }, + "configPatch": { + "importMap": { + "$value": { + "css": [ + "@acme/org/css", + "@foo/org/css" + ], + "recipes": [ + "@acme/org/recipes", + "@bar/org/recipes" + ], + "patterns": "@acme/org/patterns" + } + } + }, + "inputs": [ + { + "color": "red" + } + ], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .buttonStyle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .buttonStyle:is(:hover, [data-hover]) {\n background-color: var(--colors-red-200);\n font-size: var(--font-sizes-3xl);\n color: var(--colors-white);\n}\n}\n\n .buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n\n .buttonStyle--variant_solid {\n background-color: blue;\n color: var(--colors-white);\n}\n\n .buttonStyle--variant_solid[data-disabled] {\n background-color: gray;\n color: var(--colors-black);\n font-size: var(--font-sizes-2xl);\n}\n\n .buttonStyle--variant_solid:is(:hover, [data-hover]) {\n background-color: darkblue;\n}\n}\n\n@layer utilities {\n .c_red {\n color: red;\n}\n}" + }, + "unsupported": "extracted non-css items (recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/import-map.test.ts::config.importMap > nested outdir + tsconfig.compilerOptions.baseUrl importMap behaviour::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/import-map.test.ts", + "test": "config.importMap > nested outdir + tsconfig.compilerOptions.baseUrl importMap behaviour", + "line": 38 + }, + "userConfig": { + "outdir": "src/styled-system", + "cwd": "app", + "importMap": "styled-system" + }, + "configPatch": { + "outdir": { + "$value": "src/styled-system" + }, + "importMap": { + "$value": "styled-system" + }, + "tsconfig": { + "$value": { + "compilerOptions": { + "baseUrl": "app/src" + } + } + } + }, + "inputs": [ + { + "flex": 2 + }, + { + "flex": 1 + } + ], + "expected": { + "css": "@layer utilities {\n .m_auto {\n margin: auto;\n}\n\n .mx_auto {\n margin-inline: auto;\n}\n\n .px_4 {\n padding-inline: var(--spacing-4);\n}\n\n .flex_2 {\n flex: 2;\n}\n\n .flex_1 {\n flex: 1 1 0%;\n}\n\n .pos_relative {\n position: relative;\n}\n\n .page_A4 {\n page: A4;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .max-w_8xl {\n max-width: var(--sizes-8xl);\n}\n\n .h_600px {\n height: 600px;\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:flex-d_row {\n flex-direction: row;\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:px_6 {\n padding-inline: var(--spacing-6);\n}\n}\n\n @media screen and (min-width: 64rem) {\n .lg\\:px_8 {\n padding-inline: var(--spacing-8);\n}\n}\n\n @media print {\n .print\\:flex-d_row {\n flex-direction: row;\n}\n .print\\:w_210mm {\n width: 210mm;\n}\n .print\\:h_297mm {\n height: 297mm;\n}\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx-pattern.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx-pattern.test.ts.json new file mode 100644 index 00000000000..fb910e99e55 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx-pattern.test.ts.json @@ -0,0 +1,55 @@ +{ + "source": "packages/parser/__tests__/jsx-pattern.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/jsx-pattern.test.ts::jsx pattern > custom jsx::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx-pattern.test.ts", + "test": "jsx pattern > custom jsx", + "line": 47 + }, + "userConfig": { + "patterns": { + "extend": { + "grid": { + "jsx": [ + "Form.Group", + "Grid" + ] + }, + "stack": { + "jsx": [ + "Form.Action", + "Stack" + ] + } + } + } + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_4 {\n gap: var(--spacing-4);\n}\n\n .gap_2 {\n gap: var(--spacing-2);\n}\n\n .d_grid {\n display: grid;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx, jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx-pattern.test.ts::jsx pattern > should extract::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx-pattern.test.ts", + "test": "jsx pattern > should extract", + "line": 18 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .mt_40px {\n margin-top: 40px;\n}\n\n .mb_42px {\n margin-bottom: 42px;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx-recipe.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx-recipe.test.ts.json new file mode 100644 index 00000000000..db7696858bb --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx-recipe.test.ts.json @@ -0,0 +1,66 @@ +{ + "source": "packages/parser/__tests__/jsx-recipe.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/jsx-recipe.test.ts::recipe jsx > jsx recipes matching with dot component that are not from a namespace::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx-recipe.test.ts", + "test": "recipe jsx > jsx recipes matching with dot component that are not from a namespace", + "line": 210 + }, + "userConfig": { + "theme": { + "extend": { + "slotRecipes": { + "tabs": { + "className": "tabs", + "slots": [ + "root", + "list", + "trigger", + "content", + "indicator" + ], + "base": { + "root": { + "display": "flex" + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "slotRecipes": { + "tabs": { + "$value": { + "className": "tabs", + "slots": [ + "root", + "list", + "trigger", + "content", + "indicator" + ], + "base": { + "root": { + "display": "flex" + } + } + } + } + } + } + }, + "inputs": [], + "expected": { + "css": "@layer recipes.slots {\n @layer _base {\n .tabs__root {\n display: flex;\n}\n }\n}" + }, + "unsupported": "extracted non-css items (jsx-recipe, jsx)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx.test.ts.json new file mode 100644 index 00000000000..be39ebb20ae --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.jsx.test.ts.json @@ -0,0 +1,729 @@ +{ + "source": "packages/parser/__tests__/jsx.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract *Css aliases in minimal mode::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract *Css aliases in minimal mode", + "line": 711 + }, + "userConfig": { + "jsxStyleProps": "minimal" + }, + "configPatch": { + "jsxStyleProps": { + "$value": "minimal" + } + }, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .c_red\\.200 {\n color: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract *Css prop aliases with array value::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract *Css prop aliases with array value", + "line": 648 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_blue\\.300 {\n color: var(--colors-blue-300);\n}\n\n .bg-c_green\\.300 {\n background-color: var(--colors-green-300);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract *Css prop aliases::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract *Css prop aliases", + "line": 614 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_red\\.200 {\n color: var(--colors-red-200);\n}\n\n .d_flex {\n display: flex;\n}\n\n .mb_4 {\n margin-bottom: var(--spacing-4);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract array css prop::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract array css prop", + "line": 547 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_blue\\.300 {\n color: var(--colors-blue-300);\n}\n\n .bg-c_green\\.300 {\n background-color: var(--colors-green-300);\n}\n\n .c_yellow\\.300 {\n color: var(--colors-yellow-300);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract babel compiled preact runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract babel compiled preact runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "preact" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract babel compiled react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract babel compiled react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract babel compiled solid runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract babel compiled solid runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "solid" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract babel compiled vue runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract babel compiled vue runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "vue" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract bundled preact local helper runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract bundled preact local helper runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "preact" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract bundled react runtime namespace css props::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract bundled react runtime namespace css props", + "line": 904 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled preact jsx helper calls::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled preact jsx helper calls", + "line": 1385 + }, + "userConfig": { + "jsxFramework": "preact" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bg_red\\.200 {\n background: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled preact jsxDEV helper calls::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled preact jsxDEV helper calls", + "line": 1606 + }, + "userConfig": { + "jsxFramework": "preact" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bg_red\\.200 {\n background: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled qwik _jsxC helper calls::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled qwik _jsxC helper calls", + "line": 2180 + }, + "userConfig": { + "jsxFramework": "qwik" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bg_red\\.200 {\n background: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled react automatic runtime css props::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled react automatic runtime css props", + "line": 793 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [ + {}, + { + "color": "white", + "backgroundColor": "AntiqueWhite" + }, + { + "color": "white", + "backgroundColor": "SteelBlue" + } + ], + "expected": { + "css": "@layer utilities {\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_AntiqueWhite {\n background-color: AntiqueWhite;\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled react classic runtime css props::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled react classic runtime css props", + "line": 1287 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory, jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled react jsxDEV runtime css props::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled react jsxDEV runtime css props", + "line": 1340 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory, jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled solid createComponent helper calls::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled solid createComponent helper calls", + "line": 2141 + }, + "userConfig": { + "jsxFramework": "solid" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bg_red\\.200 {\n background: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled vue createVNode helper calls::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled vue createVNode helper calls", + "line": 1645 + }, + "userConfig": { + "jsxFramework": "vue" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bg_red\\.200 {\n background: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract compiled vue h helper calls::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract compiled vue h helper calls", + "line": 1684 + }, + "userConfig": { + "jsxFramework": "vue" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bg_red\\.200 {\n background: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract esm namespace alias react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract esm namespace alias react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract esm namespace react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract esm namespace react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract mergeProps-wrapped compiled props::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract mergeProps-wrapped compiled props", + "line": 2224 + }, + "userConfig": { + "jsxFramework": "vue" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bg_red\\.200 {\n background: var(--colors-red-200);\n}\n\n .c_black {\n color: var(--colors-black);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract parcel bundled preact runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract parcel bundled preact runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "preact" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract parcel bundled react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract parcel bundled react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract parcel bundled vue runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract parcel bundled vue runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "vue" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract rolldown bundled react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract rolldown bundled react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract rolldown bundled solid runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract rolldown bundled solid runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "solid" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract rolldown bundled vue runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract rolldown bundled vue runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "vue" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract rollup bundled react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract rollup bundled react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract rspack bundled react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract rspack bundled react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract vite bundled react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract vite bundled react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract vite bundled solid runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract vite bundled solid runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "solid" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract vite bundled vue runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract vite bundled vue runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "vue" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract webpack bundled preact runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract webpack bundled preact runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "preact" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract webpack bundled react runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract webpack bundled react runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "react" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract webpack bundled solid runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract webpack bundled solid runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "solid" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should extract webpack bundled vue runtime output::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should extract webpack bundled vue runtime output", + "line": 6 + }, + "userConfig": { + "jsxFramework": "vue" + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_RebeccaPurple {\n background-color: RebeccaPurple;\n}\n\n .c_white {\n color: var(--colors-white);\n}\n\n .bg-c_SteelBlue {\n background-color: SteelBlue;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/jsx.test.ts::jsx > should handle css and *Css props together::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/jsx.test.ts", + "test": "jsx > should handle css and *Css props together", + "line": 679 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .c_red\\.200 {\n color: var(--colors-red-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.namespace.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.namespace.test.ts.json new file mode 100644 index 00000000000..e84aab5b0c6 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.namespace.test.ts.json @@ -0,0 +1,119 @@ +{ + "source": "packages/parser/__tests__/namespace.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - css::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/namespace.test.ts", + "test": "extract namespace > TS namespaces - css", + "line": 87 + }, + "userConfig": null, + "inputs": [ + { + "color": "red" + } + ], + "expected": { + "css": "@layer utilities {\n .c_red {\n color: red;\n}\n\n .c_blue {\n color: blue;\n}\n\n .c_green {\n color: green;\n}\n}" + }, + "unsupported": "extracted non-css items (cva, sva)" + }, + { + "id": "fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - ignore not from panda::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/namespace.test.ts", + "test": "extract namespace > TS namespaces - ignore not from panda", + "line": 232 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - ignore not from panda::2", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/namespace.test.ts", + "test": "extract namespace > TS namespaces - ignore not from panda", + "line": 292 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - JSX factory::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/namespace.test.ts", + "test": "extract namespace > TS namespaces - JSX factory", + "line": 245 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_red {\n color: red;\n}\n\n .c_blue {\n color: blue;\n}\n}" + }, + "unsupported": "extracted non-css items (cva, jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - jsx::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/namespace.test.ts", + "test": "extract namespace > TS namespaces - jsx", + "line": 158 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .c_red {\n color: red;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .c_blue {\n color: blue;\n}\n\n .d_grid {\n display: grid;\n}\n\n .c_green {\n color: green;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory, jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - patterns::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/namespace.test.ts", + "test": "extract namespace > TS namespaces - patterns", + "line": 12 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .mt_40px {\n margin-top: 40px;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - recipes::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/namespace.test.ts", + "test": "extract namespace > TS namespaces - recipes", + "line": 55 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer recipes {\n .card--rounded_true {\n border-radius: 0.375rem;\n}\n}" + }, + "unsupported": "extracted non-css items (recipe)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.output.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.output.test.ts.json new file mode 100644 index 00000000000..f9c37b771c8 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.output.test.ts.json @@ -0,0 +1,2675 @@ +{ + "source": "packages/parser/__tests__/output.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > arbitrary selectors::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > arbitrary selectors", + "line": 949 + }, + "userConfig": null, + "inputs": [ + { + ".closed > &": { + "color": "green.100", + "_dark": { + "color": "green.900" + } + }, + "& + &": { + "margin": "-2px", + "_hover": { + "margin": 0 + } + }, + "&[data-state='open']": { + "cursor": "pointer", + "_before": { + "content": "\"👋\"" + } + } + } + ], + "expected": { + "css": "@layer utilities {\n :is(.\\[\\&_\\+_\\&\\]\\:m_-2px) + :is(.\\[\\&_\\+_\\&\\]\\:m_-2px) {\n margin: -2px;\n}\n\n .closed > .\\[\\.closed_\\>_\\&\\]\\:c_green\\.100 {\n color: var(--colors-green-100);\n}\n\n .\\[\\&\\[data-state\\=\\'open\\'\\]\\]\\:cursor_pointer[data-state='open'] {\n cursor: pointer;\n}\n\n :is(.\\[\\&_\\+_\\&\\]\\:hover\\:m_0) + :is(.\\[\\&_\\+_\\&\\]\\:hover\\:m_0):is(:hover, [data-hover]) {\n margin: var(--spacing-0);\n}\n\n [data-theme=dark] .closed > .\\[\\.closed_\\>_\\&\\]\\:dark\\:c_green\\.900,.dark .closed > .\\[\\.closed_\\>_\\&\\]\\:dark\\:c_green\\.900,.closed > .\\[\\.closed_\\>_\\&\\]\\:dark\\:c_green\\.900.dark,.closed > .\\[\\.closed_\\>_\\&\\]\\:dark\\:c_green\\.900[data-theme=dark] {\n color: var(--colors-green-900);\n}\n\n .\\[\\&\\[data-state\\=\\'open\\'\\]\\]\\:before\\:content_\\\"👋\\\"[data-state='open']::before {\n content: \"👋\";\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > array syntax - conditional in middle::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > array syntax - conditional in middle", + "line": 2452 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .py_2 {\n padding-block: var(--spacing-2);\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:py_2 {\n padding-block: var(--spacing-2);\n}\n .sm\\:py_3 {\n padding-block: var(--spacing-3);\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:py_4 {\n padding-block: var(--spacing-4);\n}\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > array syntax - simple conditional::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > array syntax - simple conditional", + "line": 2405 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .pl_0 {\n padding-left: var(--spacing-0);\n}\n\n .pl_4 {\n padding-left: var(--spacing-4);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > array syntax - simple::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > array syntax - simple", + "line": 2368 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .pl_0 {\n padding-left: var(--spacing-0);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > array syntax within config recipes::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > array syntax within config recipes", + "line": 2657 + }, + "userConfig": { + "theme": { + "extend": { + "recipes": { + "card": { + "className": "card", + "base": { + "color": [ + "blue", + "red" + ] + }, + "variants": { + "size": { + "sm": { + "borderRadius": [ + "sm" + ], + "padding": [ + "2" + ], + "margin": "4" + } + } + }, + "defaultVariants": { + "size": "sm" + } + } + } + } + } + }, + "configPatch": { + "theme": { + "recipes": { + "card": { + "$value": { + "className": "card", + "base": { + "color": [ + "blue", + "red" + ] + }, + "variants": { + "size": { + "sm": { + "borderRadius": [ + "sm" + ], + "padding": [ + "2" + ], + "margin": "4" + } + } + }, + "defaultVariants": { + "size": "sm" + } + } + } + } + } + }, + "inputs": [ + { + "fontSize": [ + 2, + 5 + ] + } + ], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .card {\n color: blue;\n}\n\n @media screen and (min-width: 40rem) {\n .card {\n color: red;\n}\n}\n}\n\n .card--size_sm {\n padding: var(--spacing-2);\n margin: var(--spacing-4);\n border-radius: var(--radii-sm);\n}\n}\n\n@layer utilities {\n .fs_2 {\n font-size: 2px;\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:fs_5 {\n font-size: 5px;\n}\n}\n}" + }, + "unsupported": "extracted non-css items (recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > assets::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > assets", + "line": 3491 + }, + "userConfig": { + "theme": { + "tokens": { + "assets": { + "checkbox": { + "value": { + "type": "svg", + "value": "" + } + } + } + } + } + }, + "configPatch": { + "theme": { + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "colors": null, + "blurs": null, + "spacing": null, + "sizes": null, + "animations": null, + "assets": { + "$value": { + "checkbox": { + "value": { + "type": "svg", + "value": "" + } + } + } + } + }, + "$order": [ + "tokens", + "keyframes", + "breakpoints", + "textStyles", + "containerSizes", + "semanticTokens", + "recipes", + "slotRecipes" + ] + } + }, + "inputs": [ + { + "backgroundImage": "checkbox" + } + ], + "expected": { + "css": "@layer utilities {\n .bg-i_checkbox {\n background-image: var(--assets-checkbox);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > basic usage with multiple style objects::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > basic usage with multiple style objects", + "line": 239 + }, + "userConfig": null, + "inputs": [ + { + "mx": "3", + "paddingTop": "4" + }, + { + "mx": "10", + "pt": "6" + } + ], + "expected": { + "css": "@layer utilities {\n .mx_3 {\n margin-inline: var(--spacing-3);\n}\n\n .mx_10 {\n margin-inline: var(--spacing-10);\n}\n\n .pt_4 {\n padding-top: var(--spacing-4);\n}\n\n .pt_6 {\n padding-top: var(--spacing-6);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > basic usage::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > basic usage", + "line": 93 + }, + "userConfig": null, + "inputs": [ + { + "position": "relative", + "inset": 0, + "color": "blue.100", + "backgroundImage": "url(\"https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logo-colored@2x.png?raw=true\")", + "border": "1px solid token(colors.yellow.100)", + "--shadow": { + "base": "colors.orange.100", + "_dark": "colors.gray.800" + }, + "boxShadow": "0 0 0 4px var(--shadow)", + "outlineColor": "var(--colors-pink-200)" + } + ], + "expected": { + "css": "@layer utilities {\n .\\--shadow_colors\\.orange\\.100 {\n --shadow: var(--colors-orange-100);\n}\n\n .inset_0 {\n inset: var(--spacing-0);\n}\n\n .bd_1px_solid_token\\(colors\\.yellow\\.100\\) {\n border: 1px solid var(--colors-yellow-100);\n}\n\n .p_2 {\n padding: var(--spacing-2);\n}\n\n .pos_relative {\n position: relative;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n\n .bg-i_url\\(\\\"https\\:\\/\\/raw\\.githubusercontent\\.com\\/chakra-ui\\/chakra-ui\\/main\\/media\\/logo-colored\\@2x\\.png\\?raw\\=true\\\"\\) {\n background-image: url(\"https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logo-colored@2x.png?raw=true\");\n}\n\n .bx-sh_0_0_0_4px_var\\(--shadow\\) {\n box-shadow: 0 0 0 4px var(--shadow);\n}\n\n .ring-c_var\\(--colors-pink-200\\) {\n outline-color: var(--colors-pink-200);\n}\n\n .debug_true {\n outline: 1px solid blue !important;\n}\n\n .debug_true>* {\n outline: 1px solid red !important;\n}\n\n [data-theme=dark] .dark\\:--shadow_colors\\.gray\\.800,.dark .dark\\:--shadow_colors\\.gray\\.800,.dark\\:--shadow_colors\\.gray\\.800.dark,.dark\\:--shadow_colors\\.gray\\.800[data-theme=dark] {\n --shadow: var(--colors-gray-800);\n}\n\n .hover\\:c_\\#2ecc71:is(:hover, [data-hover]) {\n color: #2ecc71;\n}\n\n .hover\\:bg-c_var\\(--some-bg\\):is(:hover, [data-hover]) {\n background-color: var(--some-bg);\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:p_4 {\n padding: var(--spacing-4);\n}\n .md\\:m_1px {\n margin: 1px;\n}\n .md\\:c_red\\.100 {\n color: var(--colors-red-100);\n}\n [data-theme=dark] .md\\:dark\\:hover\\:m_-2:is(:hover, [data-hover]),.dark .md\\:dark\\:hover\\:m_-2:is(:hover, [data-hover]),.md\\:dark\\:hover\\:m_-2.dark:is(:hover, [data-hover]),.md\\:dark\\:hover\\:m_-2[data-theme=dark]:is(:hover, [data-hover]) {\n margin: calc(var(--spacing-2) * -1);\n}\n}\n\n @media screen and (min-width: 48rem) {\n @media screen and (min-width: 40rem) {\n .md\\:sm\\:m_4px {\n margin: 4px;\n}\n}\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > colorPalette with DEFAULT::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > colorPalette with DEFAULT", + "line": 3392 + }, + "userConfig": { + "theme": { + "extend": { + "semanticTokens": { + "colors": { + "bg": { + "primary": { + "DEFAULT": { + "value": "{colors.yellow.500}" + }, + "base": { + "value": "{colors.yellow.500}" + }, + "hover": { + "value": "{colors.yellow.300}" + } + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "semanticTokens": { + "colors": { + "bg": { + "$value": { + "primary": { + "DEFAULT": { + "value": "{colors.yellow.500}" + }, + "base": { + "value": "{colors.yellow.500}" + }, + "hover": { + "value": "{colors.yellow.300}" + } + } + } + } + }, + "$order": [ + "spacing", + "colors" + ] + } + } + }, + "inputs": [ + { + "colorPalette": "bg.primary", + "backgroundColor": "colorPalette" + } + ], + "expected": { + "css": "@layer utilities {\n .color-palette_bg\\.primary {\n --colors-color-palette: var(--colors-bg-primary);\n --colors-color-palette-base: var(--colors-bg-primary-base);\n --colors-color-palette-hover: var(--colors-bg-primary-hover);\n}\n\n .bg-c_colorPalette {\n background-color: var(--colors-color-palette);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > colorPalette::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > colorPalette", + "line": 1020 + }, + "userConfig": null, + "inputs": [ + { + "colorPalette": "blue", + "bg": "colorPalette.100", + "_hover": { + "color": "colorPalette.300" + } + } + ], + "expected": { + "css": "@layer utilities {\n .bg_colorPalette\\.100 {\n background: var(--colors-color-palette-100);\n}\n\n .color-palette_blue {\n --colors-color-palette-50: var(--colors-blue-50);\n --colors-color-palette-100: var(--colors-blue-100);\n --colors-color-palette-200: var(--colors-blue-200);\n --colors-color-palette-300: var(--colors-blue-300);\n --colors-color-palette-400: var(--colors-blue-400);\n --colors-color-palette-500: var(--colors-blue-500);\n --colors-color-palette-600: var(--colors-blue-600);\n --colors-color-palette-700: var(--colors-blue-700);\n --colors-color-palette-800: var(--colors-blue-800);\n --colors-color-palette-900: var(--colors-blue-900);\n --colors-color-palette-950: var(--colors-blue-950);\n}\n\n .hover\\:c_colorPalette\\.300:is(:hover, [data-hover]) {\n color: var(--colors-color-palette-300);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > config.outdir detection in nested folder with baseUrl::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > config.outdir detection in nested folder with baseUrl", + "line": 3891 + }, + "userConfig": { + "outdir": "./src/styled-system" + }, + "configPatch": { + "outdir": { + "$value": "./src/styled-system" + }, + "tsconfig": { + "$value": { + "compilerOptions": { + "baseUrl": "./src" + } + } + } + }, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .li-t_disc {\n list-style-type: disc;\n}\n\n .li-t_decimal {\n list-style-type: decimal;\n}\n\n .bd-l-w_4px {\n border-left-width: 4px;\n}\n\n .border-left-style_solid {\n border-left-style: solid;\n}\n\n .bd-l-c_border\\.default {\n border-left-color: border.default;\n}\n\n .pl_4 {\n padding-left: var(--spacing-4);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx, jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > config.outdir detection with baseUrl::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > config.outdir detection with baseUrl", + "line": 3772 + }, + "userConfig": { + "outdir": "./styled-system" + }, + "configPatch": { + "outdir": { + "$value": "./styled-system" + }, + "tsconfig": { + "$value": { + "compilerOptions": { + "baseUrl": "." + } + } + } + }, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .li-t_disc {\n list-style-type: disc;\n}\n\n .li-t_decimal {\n list-style-type: decimal;\n}\n\n .bd-l-w_4px {\n border-left-width: 4px;\n}\n\n .border-left-style_solid {\n border-left-style: solid;\n}\n\n .bd-l-c_border\\.default {\n border-left-color: border.default;\n}\n\n .pl_4 {\n padding-left: var(--spacing-4);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx, jsx-factory)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > css with base::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > css with base", + "line": 15 + }, + "userConfig": null, + "inputs": [ + { + "base": { + "color": "blue" + }, + "md": { + "color": "red" + } + } + ], + "expected": { + "css": "@layer utilities {\n .c_blue {\n color: blue;\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:c_red {\n color: red;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > custom matchTag in extend mode preserves panda component matching::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > custom matchTag in extend mode preserves panda component matching", + "line": 3213 + }, + "unsupported": "config hooks" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > custom matchTag in override mode controls panda component matching::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > custom matchTag in override mode controls panda component matching", + "line": 3259 + }, + "unsupported": "config hooks" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > custom matchTag::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > custom matchTag", + "line": 3146 + }, + "unsupported": "config hooks" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > cva and factory recipes::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > cva and factory recipes", + "line": 1509 + }, + "userConfig": null, + "inputs": [ + {} + ], + "expected": { + "css": "@layer utilities {\n .bg_red\\.900 {\n background: var(--colors-red-900);\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n\n .c_green\\.100 {\n color: var(--colors-green-100);\n}\n\n .c_rose\\.100 {\n color: var(--colors-rose-100);\n}\n\n .c_sky\\.100 {\n color: var(--colors-sky-100);\n}\n}" + }, + "unsupported": "extracted non-css items (cva, jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > default matchTag / matchTagProp::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > default matchTag / matchTagProp", + "line": 3070 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .fs_12px {\n font-size: 12px;\n}\n\n .content_this_will_be_extrated {\n content: this will be extrated;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern, jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > empty rules::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > empty rules", + "line": 656 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > extract aliased {xxx}.raw::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > extract aliased {xxx}.raw", + "line": 3033 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer recipes {\n .card--rounded_true {\n border-radius: 0.375rem;\n}\n}" + }, + "unsupported": "extracted non-css items (recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > factory css - tagged template literal::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > factory css - tagged template literal", + "line": 1438 + }, + "userConfig": { + "syntax": "template-literal" + }, + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "inputs": [ + { + "color": "var(--colors-purple-100)" + } + ], + "expected": { + "css": "@layer utilities {\n .color_var\\(--colors-purple-100\\) {\n color: var(--colors-purple-100);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > factory css::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > factory css", + "line": 1392 + }, + "userConfig": null, + "inputs": [ + { + "color": "red.100" + }, + { + "color": "yellow.100" + } + ], + "expected": { + "css": "@layer utilities {\n .c_red\\.100 {\n color: var(--colors-red-100);\n}\n\n .c_yellow\\.100 {\n color: var(--colors-yellow-100);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > flat and nested object on same key::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > flat and nested object on same key", + "line": 3536 + }, + "userConfig": { + "presets": [ + { + "name": "preset", + "theme": { + "extend": { + "tokens": { + "colors": { + "black": { + "value": "black" + } + } + } + } + } + } + ], + "theme": { + "extend": { + "tokens": { + "colors": { + "black": { + "0": { + "value": "black" + }, + "10": { + "value": "black/10" + }, + "20": { + "value": "black/20" + }, + "30": { + "value": "black/30" + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "tokens": { + "colors": { + "black": { + "0": { + "$value": { + "value": "black" + } + }, + "10": { + "$value": { + "value": "black/10" + } + }, + "20": { + "$value": { + "value": "black/20" + } + }, + "30": { + "$value": { + "value": "black/30" + } + }, + "value": null, + "DEFAULT": { + "$value": { + "value": "#000" + } + } + }, + "$order": [ + "current", + "white", + "transparent", + "rose", + "pink", + "fuchsia", + "purple", + "violet", + "indigo", + "blue", + "sky", + "cyan", + "teal", + "emerald", + "green", + "lime", + "yellow", + "amber", + "orange", + "red", + "neutral", + "stone", + "zinc", + "gray", + "slate", + "deep", + "black" + ] + }, + "$order": [ + "aspectRatios", + "borders", + "easings", + "durations", + "radii", + "fontWeights", + "lineHeights", + "fonts", + "letterSpacings", + "fontSizes", + "shadows", + "blurs", + "spacing", + "sizes", + "animations", + "colors" + ] + } + } + }, + "inputs": [ + { + "color": "black", + "backgroundColor": "black.10", + "borderColor": "black.20" + } + ], + "expected": { + "css": "@layer utilities {\n .bd-c_black\\.20 {\n border-color: var(--colors-black-20);\n}\n\n .c_black {\n color: var(--colors-black);\n}\n\n .bg-c_black\\.10 {\n background-color: var(--colors-black-10);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > grid pattern minChildWidth not interpreted as token value::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > grid pattern minChildWidth not interpreted as token value", + "line": 2753 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8 {\n gap: var(--spacing-8);\n}\n\n .d_grid {\n display: grid;\n}\n\n .grid-tc_repeat\\(auto-fit\\,_minmax\\(80px\\,_1fr\\)\\) {\n grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));\n}\n\n .grid-tc_repeat\\(auto-fit\\,_minmax\\(token\\(sizes\\.20\\,_20\\)\\,_1fr\\)\\) {\n grid-template-columns: repeat(auto-fit, minmax(var(--sizes-20, 20), 1fr));\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > import map as string::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > import map as string", + "line": 2250 + }, + "userConfig": { + "outdir": "anywhere", + "importMap": "string-import-map" + }, + "configPatch": { + "outdir": { + "$value": "anywhere" + }, + "importMap": { + "$value": "string-import-map" + } + }, + "inputs": [ + { + "mx": "3" + } + ], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .buttonStyle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .buttonStyle:is(:hover, [data-hover]) {\n background-color: var(--colors-red-200);\n font-size: var(--font-sizes-3xl);\n color: var(--colors-white);\n}\n}\n\n .buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n\n .buttonStyle--variant_solid {\n background-color: blue;\n color: var(--colors-white);\n}\n\n .buttonStyle--variant_solid[data-disabled] {\n background-color: gray;\n color: var(--colors-black);\n font-size: var(--font-sizes-2xl);\n}\n\n .buttonStyle--variant_solid:is(:hover, [data-hover]) {\n background-color: darkblue;\n}\n}\n\n@layer utilities {\n .mx_3 {\n margin-inline: var(--spacing-3);\n}\n\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .c_red {\n color: red;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern, recipe, jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > import map::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > import map", + "line": 2118 + }, + "userConfig": { + "outdir": "anywhere", + "importMap": { + "css": "controlled-import-map/css", + "recipes": "controlled-import-map/common", + "patterns": "controlled-import-map/common", + "jsx": "controlled-import-map" + } + }, + "configPatch": { + "outdir": { + "$value": "anywhere" + }, + "importMap": { + "$value": { + "css": "controlled-import-map/css", + "recipes": "controlled-import-map/common", + "patterns": "controlled-import-map/common", + "jsx": "controlled-import-map" + } + } + }, + "inputs": [ + { + "mx": "3" + } + ], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .buttonStyle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .buttonStyle:is(:hover, [data-hover]) {\n background-color: var(--colors-red-200);\n font-size: var(--font-sizes-3xl);\n color: var(--colors-white);\n}\n}\n\n .buttonStyle--size_md {\n padding: 0 0.75rem;\n height: 3rem;\n min-width: 3rem;\n}\n\n .buttonStyle--variant_solid {\n background-color: blue;\n color: var(--colors-white);\n}\n\n .buttonStyle--variant_solid[data-disabled] {\n background-color: gray;\n color: var(--colors-black);\n font-size: var(--font-sizes-2xl);\n}\n\n .buttonStyle--variant_solid:is(:hover, [data-hover]) {\n background-color: darkblue;\n}\n}\n\n@layer utilities {\n .mx_3 {\n margin-inline: var(--spacing-3);\n}\n\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .c_red {\n color: red;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern, recipe, jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > issue 1062: expand colorPalette flexibility > should extract color palette with more than one level of nesting::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > issue 1062: expand colorPalette flexibility > should extract color palette with more than one level of nesting", + "line": 1109 + }, + "userConfig": { + "theme": { + "extend": { + "semanticTokens": { + "colors": { + "button": { + "dark": { + "value": "navy" + }, + "light": { + "DEFAULT": { + "value": "skyblue" + }, + "accent": { + "DEFAULT": { + "value": "cyan" + }, + "secondary": { + "value": "blue" + } + } + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "semanticTokens": { + "colors": { + "button": { + "dark": { + "$value": { + "value": "navy" + } + }, + "light": { + "$value": { + "DEFAULT": { + "value": "skyblue" + }, + "accent": { + "DEFAULT": { + "value": "cyan" + }, + "secondary": { + "value": "blue" + } + } + } + } + } + }, + "$order": [ + "spacing", + "colors" + ] + } + } + }, + "inputs": [ + { + "colorPalette": "button", + "color": "colorPalette.light", + "backgroundColor": "colorPalette.dark", + "_hover": { + "color": "colorPalette.light.accent", + "background": "colorPalette.light.accent.secondary" + } + }, + { + "colorPalette": "button.light", + "color": "colorPalette.accent", + "background": "colorPalette.accent.secondary" + }, + { + "colorPalette": "button.light.accent", + "color": "colorPalette.secondary" + } + ], + "expected": { + "css": "@layer utilities {\n .bg_colorPalette\\.accent\\.secondary {\n background: var(--colors-color-palette-accent-secondary);\n}\n\n .color-palette_button {\n --colors-color-palette-thick: var(--colors-button-thick);\n --colors-color-palette-card-body: var(--colors-button-card-body);\n --colors-color-palette-card-heading: var(--colors-button-card-heading);\n --colors-color-palette-dark: var(--colors-button-dark);\n --colors-color-palette-light: var(--colors-button-light);\n --colors-color-palette-light-accent: var(--colors-button-light-accent);\n --colors-color-palette-light-accent-secondary: var(--colors-button-light-accent-secondary);\n}\n\n .c_colorPalette\\.light {\n color: var(--colors-color-palette-light);\n}\n\n .bg-c_colorPalette\\.dark {\n background-color: var(--colors-color-palette-dark);\n}\n\n .color-palette_button\\.light {\n --colors-color-palette: var(--colors-button-light);\n --colors-color-palette-accent: var(--colors-button-light-accent);\n --colors-color-palette-accent-secondary: var(--colors-button-light-accent-secondary);\n}\n\n .c_colorPalette\\.accent {\n color: var(--colors-color-palette-accent);\n}\n\n .color-palette_button\\.light\\.accent {\n --colors-color-palette: var(--colors-button-light-accent);\n --colors-color-palette-secondary: var(--colors-button-light-accent-secondary);\n}\n\n .c_colorPalette\\.secondary {\n color: var(--colors-color-palette-secondary);\n}\n\n .hover\\:bg_colorPalette\\.light\\.accent\\.secondary:is(:hover, [data-hover]) {\n background: var(--colors-color-palette-light-accent-secondary);\n}\n\n .hover\\:c_colorPalette\\.light\\.accent:is(:hover, [data-hover]) {\n color: var(--colors-color-palette-light-accent);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > jsx patterns + custom wrapper::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > jsx patterns + custom wrapper", + "line": 1316 + }, + "userConfig": { + "patterns": { + "extend": { + "stack": { + "jsx": [ + "CustomStack" + ] + } + } + } + }, + "configPatch": {}, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .ai_flex-end {\n align-items: flex-end;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern, jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > multiple css alias::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > multiple css alias", + "line": 3302 + }, + "userConfig": null, + "inputs": [ + { + "display": "flex" + }, + { + "flexDirection": "column" + } + ], + "expected": { + "css": "@layer utilities {\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > multiple recipes on 1 component using {recipe}.raw::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > multiple recipes on 1 component using {recipe}.raw", + "line": 507 + }, + "userConfig": { + "theme": { + "extend": { + "recipes": { + "pinkRecipe": { + "className": "pinkRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "base": { + "color": "pink.100" + }, + "variants": { + "variant": { + "small": { + "fontSize": "sm" + } + } + } + }, + "sizeRecipe": { + "className": "sizeRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "variants": { + "size": { + "medium": { + "fontSize": "md" + }, + "large": { + "fontSize": "lg" + } + } + } + }, + "bgRecipe": { + "className": "bgRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "variants": { + "color": { + "yellow": { + "backgroundColor": "yellow.100" + } + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "recipes": { + "pinkRecipe": { + "$value": { + "className": "pinkRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "base": { + "color": "pink.100" + }, + "variants": { + "variant": { + "small": { + "fontSize": "sm" + } + } + } + } + }, + "sizeRecipe": { + "$value": { + "className": "sizeRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "variants": { + "size": { + "medium": { + "fontSize": "md" + }, + "large": { + "fontSize": "lg" + } + } + } + } + }, + "bgRecipe": { + "$value": { + "className": "bgRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "variants": { + "color": { + "yellow": { + "backgroundColor": "yellow.100" + } + } + } + } + } + } + } + }, + "inputs": [], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .pinkRecipe {\n color: var(--colors-pink-100);\n}\n}\n\n .pinkRecipe--variant_small {\n font-size: var(--font-sizes-sm);\n}\n\n .sizeRecipe--size_medium {\n font-size: var(--font-sizes-md);\n}\n\n .bgRecipe--color_yellow {\n background-color: var(--colors-yellow-100);\n}\n}" + }, + "unsupported": "extracted non-css items (recipe, jsx-recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > multiple recipes on 1 component::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > multiple recipes on 1 component", + "line": 297 + }, + "userConfig": { + "theme": { + "extend": { + "recipes": { + "pinkRecipe": { + "className": "pinkRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "base": { + "color": "pink.100" + }, + "variants": { + "variant": { + "small": { + "fontSize": "sm" + } + } + } + }, + "greenRecipe": { + "className": "greenRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "base": { + "color": "green.100" + }, + "variants": { + "variant": { + "small": { + "fontSize": "sm" + } + } + } + }, + "blueRecipe": { + "className": "blueRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "base": { + "color": "blue.100" + }, + "variants": { + "variant": { + "small": { + "fontSize": "sm" + } + } + } + }, + "sizeRecipe": { + "className": "sizeRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "variants": { + "size": { + "medium": { + "fontSize": "md" + }, + "large": { + "fontSize": "lg" + } + } + } + }, + "bgRecipe": { + "className": "bgRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "variants": { + "color": { + "yellow": { + "backgroundColor": "yellow.100" + } + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "recipes": { + "pinkRecipe": { + "$value": { + "className": "pinkRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "base": { + "color": "pink.100" + }, + "variants": { + "variant": { + "small": { + "fontSize": "sm" + } + } + } + } + }, + "greenRecipe": { + "$value": { + "className": "greenRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "base": { + "color": "green.100" + }, + "variants": { + "variant": { + "small": { + "fontSize": "sm" + } + } + } + } + }, + "blueRecipe": { + "$value": { + "className": "blueRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "base": { + "color": "blue.100" + }, + "variants": { + "variant": { + "small": { + "fontSize": "sm" + } + } + } + } + }, + "sizeRecipe": { + "$value": { + "className": "sizeRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "variants": { + "size": { + "medium": { + "fontSize": "md" + }, + "large": { + "fontSize": "lg" + } + } + } + } + }, + "bgRecipe": { + "$value": { + "className": "bgRecipe", + "jsx": [ + "ComponentWithMultipleRecipes" + ], + "variants": { + "color": { + "yellow": { + "backgroundColor": "yellow.100" + } + } + } + } + } + } + } + }, + "inputs": [], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .pinkRecipe {\n color: var(--colors-pink-100);\n}\n\n .greenRecipe {\n color: var(--colors-green-100);\n}\n\n .blueRecipe {\n color: var(--colors-blue-100);\n}\n}\n\n .pinkRecipe--variant_small,.greenRecipe--variant_small,.blueRecipe--variant_small {\n font-size: var(--font-sizes-sm);\n}\n\n .sizeRecipe--size_medium {\n font-size: var(--font-sizes-md);\n}\n\n .bgRecipe--color_yellow {\n background-color: var(--colors-yellow-100);\n}\n}\n\n@layer utilities {\n .c_yellow {\n color: yellow;\n}\n}" + }, + "unsupported": "extracted non-css items (recipe, jsx-recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > patterns::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > patterns", + "line": 1247 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_flex-end {\n justify-content: flex-end;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > recipe issue::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > recipe issue", + "line": 2963 + }, + "userConfig": null, + "inputs": [ + {}, + {} + ], + "expected": { + "css": "@layer recipes {\n .card--rounded_true {\n border-radius: 0.375rem;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-recipe, jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > recipes default className based on key::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > recipes default className based on key", + "line": 3988 + }, + "userConfig": { + "theme": { + "extend": { + "recipes": { + "testRecipe": { + "base": { + "display": "flex" + } + } + } + } + } + }, + "configPatch": { + "theme": { + "recipes": { + "testRecipe": { + "$value": { + "base": { + "display": "flex" + } + } + } + } + } + }, + "inputs": [], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .testRecipe {\n display: flex;\n}\n }\n}" + }, + "unsupported": "extracted non-css items (recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > runtime conditions::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > runtime conditions", + "line": 891 + }, + "userConfig": null, + "inputs": [ + { + "color": "blue.100" + }, + { + "color": "red.100" + }, + {} + ], + "expected": { + "css": "@layer utilities {\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n\n .c_red\\.100 {\n color: var(--colors-red-100);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > should allow JSX props along with recipe components::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > should allow JSX props along with recipe components", + "line": 1822 + }, + "userConfig": { + "outdir": "styled-system", + "jsxFactory": "styled", + "theme": { + "extend": { + "recipes": { + "button": { + "className": "my-button", + "jsx": [ + {} + ] + } + } + } + } + }, + "configPatch": { + "theme": { + "recipes": { + "button": { + "$value": { + "className": "my-button", + "jsx": [ + {} + ] + } + } + } + } + }, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_10 {\n padding: var(--spacing-10);\n}\n\n .bg-c_tomato {\n background-color: tomato;\n}\n\n .bg-c_yellow {\n background-color: yellow;\n}\n\n .c_pink {\n color: pink;\n}\n\n .c_purple {\n color: purple;\n}\n}" + }, + "unsupported": "extracted non-css items (cva, jsx-recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > should evaluate ${fn}.raw inside another ${fn}.raw to allow for composition::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > should evaluate ${fn}.raw inside another ${fn}.raw to allow for composition", + "line": 1939 + }, + "userConfig": null, + "inputs": [ + { + "&:not(:first-child)": { + "marginBlockEnd": "1em" + } + }, + { + "maxWidth": "800px", + "& p": { + "&:not(:first-child)": { + "marginBlockStart": "1em" + } + }, + "& h1": { + "&:not(:first-child)": { + "marginBlockEnd": "1em" + } + }, + "& h2": { + "&:not(:first-child)": { + "marginBlockEnd": "1em" + } + } + } + ], + "expected": { + "css": "@layer utilities {\n .max-w_800px {\n max-width: 800px;\n}\n\n .\\[\\&\\:not\\(\\:first-child\\)\\]\\:mbe_1em:not(:first-child) {\n margin-block-end: 1em;\n}\n\n .\\[\\&_p\\]\\:\\[\\&\\:not\\(\\:first-child\\)\\]\\:mbs_1em p:not(:first-child) {\n margin-block-start: 1em;\n}\n\n .\\[\\&_h1\\]\\:\\[\\&\\:not\\(\\:first-child\\)\\]\\:mbe_1em h1:not(:first-child),.\\[\\&_h2\\]\\:\\[\\&\\:not\\(\\:first-child\\)\\]\\:mbe_1em h2:not(:first-child) {\n margin-block-end: 1em;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > should evaluate variants supplied a function::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > should evaluate variants supplied a function", + "line": 2032 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .px_token\\(spacing\\.1\\) {\n padding-inline: var(--spacing-1);\n}\n\n .px_token\\(spacing\\.2\\) {\n padding-inline: var(--spacing-2);\n}\n\n .px_token\\(spacing\\.3\\) {\n padding-inline: var(--spacing-3);\n}\n\n .py_token\\(spacing\\.1\\) {\n padding-block: var(--spacing-1);\n}\n\n .py_token\\(spacing\\.2\\) {\n padding-block: var(--spacing-2);\n}\n\n .py_token\\(spacing\\.3\\) {\n padding-block: var(--spacing-3);\n}\n}" + }, + "unsupported": "extracted non-css items (cva)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > should extract config recipes::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > should extract config recipes", + "line": 1632 + }, + "userConfig": { + "theme": { + "extend": { + "recipes": { + "button": { + "className": "button", + "jsx": [ + "Button", + {} + ], + "description": "A button styles", + "base": { + "fontSize": "lg" + }, + "variants": { + "size": { + "sm": { + "padding": "2", + "borderRadius": "sm" + }, + "md": { + "padding": "4", + "borderRadius": "md" + } + }, + "variant": { + "primary": { + "color": "white", + "backgroundColor": "blue.500" + }, + "danger": { + "color": "white", + "backgroundColor": "red.500" + }, + "secondary": { + "color": "pink.300", + "backgroundColor": "green.500" + } + } + }, + "compoundVariants": [ + { + "variant": "danger", + "size": "md", + "css": { + "zIndex": 100 + } + } + ] + }, + "anotherButton": { + "className": "anotherButton", + "jsx": [ + "AnotherButton" + ], + "variants": { + "spacing": { + "sm": { + "padding": "2", + "borderRadius": "sm" + }, + "md": { + "padding": "4", + "borderRadius": "md" + } + } + } + }, + "complexButton": { + "className": "complexButton", + "jsx": [ + "ComplexButton", + {} + ], + "variants": { + "color": { + "blue": { + "color": "blue.500" + }, + "red": { + "color": "red.500" + } + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "recipes": { + "button": { + "$value": { + "className": "button", + "jsx": [ + "Button", + {} + ], + "description": "A button styles", + "base": { + "fontSize": "lg" + }, + "variants": { + "size": { + "sm": { + "padding": "2", + "borderRadius": "sm" + }, + "md": { + "padding": "4", + "borderRadius": "md" + } + }, + "variant": { + "primary": { + "color": "white", + "backgroundColor": "blue.500" + }, + "danger": { + "color": "white", + "backgroundColor": "red.500" + }, + "secondary": { + "color": "pink.300", + "backgroundColor": "green.500" + } + } + }, + "compoundVariants": [ + { + "variant": "danger", + "size": "md", + "css": { + "zIndex": 100 + } + } + ] + } + }, + "anotherButton": { + "$value": { + "className": "anotherButton", + "jsx": [ + "AnotherButton" + ], + "variants": { + "spacing": { + "sm": { + "padding": "2", + "borderRadius": "sm" + }, + "md": { + "padding": "4", + "borderRadius": "md" + } + } + } + } + }, + "complexButton": { + "$value": { + "className": "complexButton", + "jsx": [ + "ComplexButton", + {} + ], + "variants": { + "color": { + "blue": { + "color": "blue.500" + }, + "red": { + "color": "red.500" + } + } + } + } + } + } + } + }, + "inputs": [ + {} + ], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .button {\n font-size: var(--font-sizes-lg);\n}\n}\n\n .button--size_md {\n padding: var(--spacing-4);\n border-radius: var(--radii-md);\n}\n\n .button--variant_danger {\n color: var(--colors-white);\n background-color: var(--colors-red-500);\n}\n\n .anotherButton--spacing_sm {\n padding: var(--spacing-2);\n border-radius: var(--radii-sm);\n}\n\n .complexButton--color_blue {\n color: var(--colors-blue-500);\n}\n}\n\n@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .z_100 {\n z-index: 100;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n}" + }, + "unsupported": "extracted non-css items (recipe, jsx-pattern, jsx-recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > slot recipes with textStyles::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > slot recipes with textStyles", + "line": 3640 + }, + "userConfig": { + "eject": true, + "theme": { + "breakpoints": { + "sm": "480px" + }, + "slotRecipes": { + "cta": { + "className": "cta", + "slots": [ + "heading", + "text", + "wrapper" + ], + "base": {}, + "variants": { + "level": { + "1": { + "heading": { + "textStyle": "heading-1", + "color": { + "base": "green", + "sm": "red" + }, + "marginBottom": { + "base": "20px", + "sm": "40px" + } + } + } + } + } + } + }, + "textStyles": { + "heading-1": { + "description": "Heading 1", + "value": { + "fontWeight": "bold", + "fontSize": { + "base": "2px", + "sm": "40px" + }, + "textTransform": "uppercase" + } + } + } + } + }, + "configPatch": { + "conditions": null, + "theme": { + "keyframes": null, + "tokens": null, + "containerSizes": null, + "semanticTokens": null, + "recipes": null, + "breakpoints": { + "md": null, + "lg": null, + "xl": null, + "2xl": null, + "sm": { + "$value": "480px" + } + }, + "slotRecipes": { + "checkbox": null, + "badge": null, + "cta": { + "$value": { + "className": "cta", + "slots": [ + "heading", + "text", + "wrapper" + ], + "base": {}, + "variants": { + "level": { + "1": { + "heading": { + "textStyle": "heading-1", + "color": { + "base": "green", + "sm": "red" + }, + "marginBottom": { + "base": "20px", + "sm": "40px" + } + } + } + } + } + } + } + }, + "textStyles": { + "headline": null, + "heading-1": { + "$value": { + "description": "Heading 1", + "value": { + "fontWeight": "bold", + "fontSize": { + "base": "2px", + "sm": "40px" + }, + "textTransform": "uppercase" + } + } + } + }, + "$order": [ + "breakpoints", + "slotRecipes", + "textStyles" + ] + }, + "eject": { + "$value": true + }, + "utilities": { + "aspectRatio": null, + "boxDecorationBreak": null, + "zIndex": null, + "boxSizing": null, + "objectPosition": null, + "objectFit": null, + "overscrollBehavior": null, + "overscrollBehaviorX": null, + "overscrollBehaviorY": null, + "position": null, + "top": null, + "left": null, + "inset": null, + "insetInline": null, + "insetBlock": null, + "insetBlockEnd": null, + "insetBlockStart": null, + "insetInlineEnd": null, + "insetInlineStart": null, + "right": null, + "bottom": null, + "float": null, + "visibility": null, + "display": null, + "hideFrom": null, + "hideBelow": null, + "flexBasis": null, + "flex": null, + "flexDirection": null, + "flexGrow": null, + "flexShrink": null, + "gridTemplateColumns": null, + "gridTemplateRows": null, + "gridColumn": null, + "gridRow": null, + "gridColumnStart": null, + "gridColumnEnd": null, + "gridAutoFlow": null, + "gridAutoColumns": null, + "gridAutoRows": null, + "gap": null, + "gridGap": null, + "gridRowGap": null, + "gridColumnGap": null, + "rowGap": null, + "columnGap": null, + "justifyContent": null, + "alignContent": null, + "alignItems": null, + "alignSelf": null, + "padding": null, + "paddingLeft": null, + "paddingRight": null, + "paddingTop": null, + "paddingBottom": null, + "paddingBlock": null, + "paddingBlockEnd": null, + "paddingBlockStart": null, + "paddingInline": null, + "paddingInlineEnd": null, + "paddingInlineStart": null, + "marginLeft": null, + "marginRight": null, + "marginTop": null, + "marginBottom": null, + "margin": null, + "marginBlock": null, + "marginBlockEnd": null, + "marginBlockStart": null, + "marginInline": null, + "marginInlineEnd": null, + "marginInlineStart": null, + "spaceX": null, + "spaceY": null, + "outlineWidth": null, + "outlineColor": null, + "outline": null, + "outlineOffset": null, + "focusRing": null, + "focusVisibleRing": null, + "focusRingColor": null, + "focusRingOffset": null, + "focusRingWidth": null, + "focusRingStyle": null, + "divideX": null, + "divideY": null, + "divideColor": null, + "divideStyle": null, + "width": null, + "inlineSize": null, + "minWidth": null, + "minInlineSize": null, + "maxWidth": null, + "maxInlineSize": null, + "height": null, + "blockSize": null, + "minHeight": null, + "minBlockSize": null, + "maxHeight": null, + "maxBlockSize": null, + "boxSize": null, + "color": null, + "fontFamily": null, + "fontSize": null, + "fontSizeAdjust": null, + "fontPalette": null, + "fontKerning": null, + "fontFeatureSettings": null, + "fontWeight": null, + "fontSmoothing": null, + "fontVariant": null, + "fontVariantAlternates": null, + "fontVariantCaps": null, + "fontVariationSettings": null, + "fontVariantNumeric": null, + "letterSpacing": null, + "lineHeight": null, + "textAlign": null, + "textDecoration": null, + "textDecorationColor": null, + "textEmphasisColor": null, + "textDecorationStyle": null, + "textDecorationThickness": null, + "textUnderlineOffset": null, + "textTransform": null, + "textIndent": null, + "textShadow": null, + "textShadowColor": null, + "WebkitTextFillColor": null, + "textOverflow": null, + "verticalAlign": null, + "wordBreak": null, + "textWrap": null, + "truncate": null, + "lineClamp": null, + "listStyleType": null, + "listStylePosition": null, + "listStyleImage": null, + "listStyle": null, + "backgroundPosition": null, + "backgroundPositionX": null, + "backgroundPositionY": null, + "backgroundAttachment": null, + "backgroundClip": null, + "background": null, + "backgroundColor": null, + "backgroundOrigin": null, + "backgroundImage": null, + "backgroundRepeat": null, + "backgroundBlendMode": null, + "backgroundSize": null, + "backgroundGradient": null, + "backgroundLinear": null, + "backgroundRadial": null, + "backgroundConic": null, + "textGradient": null, + "gradientFromPosition": null, + "gradientToPosition": null, + "gradientFrom": null, + "gradientTo": null, + "gradientVia": null, + "gradientViaPosition": null, + "borderRadius": null, + "borderTopLeftRadius": null, + "borderTopRightRadius": null, + "borderBottomRightRadius": null, + "borderBottomLeftRadius": null, + "borderTopRadius": null, + "borderRightRadius": null, + "borderBottomRadius": null, + "borderLeftRadius": null, + "borderStartStartRadius": null, + "borderStartEndRadius": null, + "borderStartRadius": null, + "borderEndStartRadius": null, + "borderEndEndRadius": null, + "borderEndRadius": null, + "border": null, + "borderWidth": null, + "borderTopWidth": null, + "borderLeftWidth": null, + "borderRightWidth": null, + "borderBottomWidth": null, + "borderBlockStartWidth": null, + "borderBlockEndWidth": null, + "borderColor": null, + "borderInline": null, + "borderInlineWidth": null, + "borderInlineColor": null, + "borderBlock": null, + "borderBlockWidth": null, + "borderBlockColor": null, + "borderLeft": null, + "borderLeftColor": null, + "borderInlineStart": null, + "borderInlineStartWidth": null, + "borderInlineStartColor": null, + "borderRight": null, + "borderRightColor": null, + "borderInlineEnd": null, + "borderInlineEndWidth": null, + "borderInlineEndColor": null, + "borderTop": null, + "borderTopColor": null, + "borderBottom": null, + "borderBottomColor": null, + "borderBlockEnd": null, + "borderBlockEndColor": null, + "borderBlockStart": null, + "borderBlockStartColor": null, + "opacity": null, + "boxShadow": null, + "boxShadowColor": null, + "mixBlendMode": null, + "filter": null, + "brightness": null, + "contrast": null, + "grayscale": null, + "hueRotate": null, + "invert": null, + "saturate": null, + "sepia": null, + "dropShadow": null, + "blur": null, + "backdropFilter": null, + "backdropBlur": null, + "backdropBrightness": null, + "backdropContrast": null, + "backdropGrayscale": null, + "backdropHueRotate": null, + "backdropInvert": null, + "backdropOpacity": null, + "backdropSaturate": null, + "backdropSepia": null, + "borderCollapse": null, + "borderSpacing": null, + "borderSpacingX": null, + "borderSpacingY": null, + "tableLayout": null, + "transitionTimingFunction": null, + "transitionDelay": null, + "transitionDuration": null, + "transitionProperty": null, + "transition": null, + "animation": null, + "animationName": null, + "animationTimingFunction": null, + "animationDuration": null, + "animationDelay": null, + "animationPlayState": null, + "animationComposition": null, + "animationFillMode": null, + "animationDirection": null, + "animationIterationCount": null, + "animationRange": null, + "animationState": null, + "animationRangeStart": null, + "animationRangeEnd": null, + "animationTimeline": null, + "transformOrigin": null, + "transformBox": null, + "transformStyle": null, + "transform": null, + "rotate": null, + "rotateX": null, + "rotateY": null, + "rotateZ": null, + "scale": null, + "scaleX": null, + "scaleY": null, + "translate": null, + "translateX": null, + "translateY": null, + "translateZ": null, + "accentColor": null, + "caretColor": null, + "scrollBehavior": null, + "scrollbar": null, + "scrollbarColor": null, + "scrollbarGutter": null, + "scrollbarWidth": null, + "scrollMargin": null, + "scrollMarginLeft": null, + "scrollMarginRight": null, + "scrollMarginTop": null, + "scrollMarginBottom": null, + "scrollMarginBlock": null, + "scrollMarginBlockEnd": null, + "scrollMarginBlockStart": null, + "scrollMarginInline": null, + "scrollMarginInlineEnd": null, + "scrollMarginInlineStart": null, + "scrollPadding": null, + "scrollPaddingBlock": null, + "scrollPaddingBlockStart": null, + "scrollPaddingBlockEnd": null, + "scrollPaddingInline": null, + "scrollPaddingInlineEnd": null, + "scrollPaddingInlineStart": null, + "scrollPaddingLeft": null, + "scrollPaddingRight": null, + "scrollPaddingTop": null, + "scrollPaddingBottom": null, + "scrollSnapAlign": null, + "scrollSnapStop": null, + "scrollSnapType": null, + "scrollSnapStrictness": null, + "scrollSnapMargin": null, + "scrollSnapMarginTop": null, + "scrollSnapMarginBottom": null, + "scrollSnapMarginLeft": null, + "scrollSnapMarginRight": null, + "scrollSnapCoordinate": null, + "scrollSnapDestination": null, + "scrollSnapPointsX": null, + "scrollSnapPointsY": null, + "scrollSnapTypeX": null, + "scrollSnapTypeY": null, + "scrollTimeline": null, + "scrollTimelineAxis": null, + "scrollTimelineName": null, + "touchAction": null, + "userSelect": null, + "overflow": null, + "overflowWrap": null, + "overflowX": null, + "overflowY": null, + "overflowAnchor": null, + "overflowBlock": null, + "overflowInline": null, + "overflowClipBox": null, + "overflowClipMargin": null, + "overscrollBehaviorBlock": null, + "overscrollBehaviorInline": null, + "fill": null, + "stroke": null, + "strokeWidth": null, + "strokeDasharray": null, + "strokeDashoffset": null, + "strokeLinecap": null, + "strokeLinejoin": null, + "strokeMiterlimit": null, + "strokeOpacity": null, + "srOnly": null, + "debug": null, + "appearance": null, + "backfaceVisibility": null, + "clipPath": null, + "hyphens": null, + "mask": null, + "maskImage": null, + "maskSize": null, + "textSizeAdjust": null, + "container": null, + "containerName": null, + "containerType": null, + "cursor": null + } + }, + "inputs": [ + { + "textStyle": "heading-1" + } + ], + "expected": { + "css": "@layer recipes.slots {\n .cta__heading--level_1 {\n font-weight: bold;\n font-size: 2px;\n text-transform: uppercase;\n color: green;\n margin-bottom: 20px;\n}\n\n @media screen and (min-width: 30rem) {\n .cta__heading--level_1 {\n font-size: 40px;\n color: red;\n margin-bottom: 40px;\n}\n}\n}\n\n@layer utilities {\n @layer compositions {\n .textStyle_heading-1 {\n font-weight: bold;\n font-size: 2px;\n text-transform: uppercase;\n}\n\n @media screen and (min-width: 30rem) {\n .textStyle_heading-1 {\n font-size: 40px;\n}\n}\n}\n}" + }, + "unsupported": "extracted non-css items (recipe, jsx-recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > slotRecipes default className based on key::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > slotRecipes default className based on key", + "line": 4033 + }, + "userConfig": { + "theme": { + "extend": { + "slotRecipes": { + "testSlotRecipe": { + "slots": [ + "root" + ], + "base": { + "root": { + "display": "flex" + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "slotRecipes": { + "testSlotRecipe": { + "$value": { + "slots": [ + "root" + ], + "base": { + "root": { + "display": "flex" + } + } + } + } + } + } + }, + "inputs": [], + "expected": { + "css": "@layer recipes.slots {\n @layer _base {\n .testSlotRecipe__root {\n display: flex;\n}\n }\n}" + }, + "unsupported": "extracted non-css items (recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > strictTokens arbitrary value escape hatch::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > strictTokens arbitrary value escape hatch", + "line": 2898 + }, + "userConfig": { + "strictTokens": true + }, + "configPatch": { + "strictTokens": { + "$value": true + } + }, + "inputs": [ + { + "color": "[#fff]", + "bg": "red.300", + "bgColor": "[rgb(51 155 240)]", + "outlineColor": "[rgb(51 155 240)!]", + "borderColor": "[rgb(51 155 240)!important]" + } + ], + "expected": { + "css": "@layer utilities {\n .bg_red\\.300 {\n background: var(--colors-red-300);\n}\n\n .bd-c_\\[rgb\\(51_155_240\\)\\]\\! {\n border-color: rgb(51 155 240) !important;\n}\n\n .c_\\[\\#fff\\] {\n color: #fff;\n}\n\n .bg-c_\\[rgb\\(51_155_240\\)\\] {\n background-color: rgb(51 155 240);\n}\n\n .ring-c_\\[rgb\\(51_155_240\\)\\]\\! {\n outline-color: rgb(51 155 240) !important;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > string literal - css::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > string literal - css", + "line": 839 + }, + "userConfig": { + "syntax": "template-literal" + }, + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "inputs": [ + { + "background": "transparent", + "border-radius": "3px", + "border": "1px solid var(--accent-color)", + "color": "token(colors.blue.100)" + } + ], + "expected": { + "css": "@layer utilities {\n .background_transparent {\n background: transparent;\n}\n\n .border_1px_solid_var\\(--accent-color\\) {\n border: 1px solid var(--accent-color);\n}\n\n .border-radius_3px {\n border-radius: 3px;\n}\n\n .color_token\\(colors\\.blue\\.100\\) {\n color: var(--colors-blue-100);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > string literal - factory::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > string literal - factory", + "line": 715 + }, + "userConfig": { + "syntax": "template-literal" + }, + "configPatch": { + "syntax": { + "$value": "template-literal" + } + }, + "inputs": [ + { + "color": "lightgreen", + "& > strong": { + "color": "hotpink" + } + }, + { + "background": "transparent", + "border-radius": "3px", + "border": "1px solid var(--accent-color)", + "color": "token(colors.blue.100)", + "display": "inline-block", + "margin": "0.5rem 1rem", + "padding": "0.5rem 0", + "transition": "all 200ms ease-in-out", + "width": "11rem", + "&:hover": { + "filter": "brightness(0.85)", + "&:disabled": { + "filter": "brightness(1)" + } + }, + "@media (min-width: 768px)": { + "padding": "1rem 0", + "&:disabled": { + "filter": "brightness(1)" + } + } + } + ], + "expected": { + "css": "@layer utilities {\n .background_transparent {\n background: transparent;\n}\n\n .border_1px_solid_var\\(--accent-color\\) {\n border: 1px solid var(--accent-color);\n}\n\n .margin_0\\.5rem_1rem {\n margin: 0.5rem 1rem;\n}\n\n .padding_0\\.5rem_0 {\n padding: 0.5rem 0;\n}\n\n .transition_all_200ms_ease-in-out {\n transition: all 200ms ease-in-out;\n}\n\n .color_lightgreen {\n color: lightgreen;\n}\n\n .border-radius_3px {\n border-radius: 3px;\n}\n\n .color_token\\(colors\\.blue\\.100\\) {\n color: var(--colors-blue-100);\n}\n\n .display_inline-block {\n display: inline-block;\n}\n\n .width_11rem {\n width: 11rem;\n}\n\n .\\[\\&_\\>_strong\\]\\:color_hotpink > strong {\n color: hotpink;\n}\n\n .\\[\\&\\:hover\\]\\:filter_brightness\\(0\\.85\\):hover {\n filter: brightness(0.85);\n}\n\n .\\[\\&\\:hover\\]\\:\\[\\&\\:disabled\\]\\:filter_brightness\\(1\\):hover:disabled {\n filter: brightness(1);\n}\n\n @media (min-width: 768px) {\n .\\[\\@media_\\(min-width\\:_768px\\)\\]\\:padding_1rem_0 {\n padding: 1rem 0;\n}\n .\\[\\@media_\\(min-width\\:_768px\\)\\]\\:\\[\\&\\:disabled\\]\\:filter_brightness\\(1\\):disabled {\n filter: brightness(1);\n}\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > styled FactoryOptions defaultProps extraction::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > styled FactoryOptions defaultProps extraction", + "line": 2537 + }, + "userConfig": { + "theme": { + "extend": { + "recipes": { + "button": { + "className": "button", + "jsx": [ + "Button" + ], + "base": { + "color": "sky.100", + "bg": "red.900" + }, + "variants": { + "size": { + "sm": { + "borderRadius": "sm" + }, + "md": { + "borderRadius": "md" + } + }, + "variant": { + "first": { + "backgroundColor": "blue.500" + }, + "second": { + "backgroundColor": "red.500" + } + } + }, + "defaultVariants": { + "size": "sm" + } + } + } + } + } + }, + "configPatch": { + "theme": { + "recipes": { + "button": { + "$value": { + "className": "button", + "jsx": [ + "Button" + ], + "base": { + "color": "sky.100", + "bg": "red.900" + }, + "variants": { + "size": { + "sm": { + "borderRadius": "sm" + }, + "md": { + "borderRadius": "md" + } + }, + "variant": { + "first": { + "backgroundColor": "blue.500" + }, + "second": { + "backgroundColor": "red.500" + } + } + }, + "defaultVariants": { + "size": "sm" + } + } + } + } + } + }, + "inputs": [ + {} + ], + "expected": { + "css": "@layer recipes {\n @layer _base {\n .button {\n background: var(--colors-red-900);\n color: var(--colors-sky-100);\n}\n}\n\n .button--size_md {\n border-radius: var(--radii-md);\n}\n\n .button--variant_second {\n background-color: var(--colors-red-500);\n}\n\n .button--size_sm {\n border-radius: var(--radii-sm);\n}\n}\n\n@layer utilities {\n .c_amber\\.400 {\n color: var(--colors-amber-400);\n}\n\n [data-theme=dark] .dark\\:c_sky\\.300,.dark .dark\\:c_sky\\.300,.dark\\:c_sky\\.300.dark,.dark\\:c_sky\\.300[data-theme=dark] {\n color: var(--colors-sky-300);\n}\n\n .hover\\:c_amber\\.500:is(:hover, [data-hover]) {\n color: var(--colors-amber-500);\n}\n\n [data-theme=dark] .hover\\:dark\\:c_sky\\.200:is(:hover, [data-hover]),.dark .hover\\:dark\\:c_sky\\.200:is(:hover, [data-hover]),.hover\\:dark\\:c_sky\\.200:is(:hover, [data-hover]).dark,.hover\\:dark\\:c_sky\\.200:is(:hover, [data-hover])[data-theme=dark] {\n color: var(--colors-sky-200);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-recipe)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > token fn in at-rules::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > token fn in at-rules", + "line": 2816 + }, + "userConfig": null, + "inputs": [ + { + "@container (min-width: token(sizes.xl))": { + "color": "green.300" + }, + "@media (min-width: token(sizes.2xl))": { + "color": "red.300" + }, + "@container (min-width: {sizes.4xl})": { + "display": "flex" + } + } + ], + "expected": { + "css": "@layer utilities {\n @container (min-width: 36rem) {\n .\\[\\@container_\\(min-width\\:_token\\(sizes\\.xl\\)\\)\\]\\:c_green\\.300 {\n color: var(--colors-green-300);\n}\n}\n\n @media (min-width: 42rem) {\n .\\[\\@media_\\(min-width\\:_token\\(sizes\\.2xl\\)\\)\\]\\:c_red\\.300 {\n color: var(--colors-red-300);\n}\n}\n\n @container (min-width: 56rem) {\n .\\[\\@container_\\(min-width\\:_\\{sizes\\.4xl\\}\\)\\]\\:d_flex {\n display: flex;\n}\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > tokens starting with 0::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > tokens starting with 0", + "line": 3451 + }, + "userConfig": { + "theme": { + "tokens": { + "spacing": { + "025": { + "value": "0.125rem" + } + } + } + } + }, + "configPatch": { + "theme": { + "tokens": { + "aspectRatios": null, + "borders": null, + "easings": null, + "durations": null, + "radii": null, + "fontWeights": null, + "lineHeights": null, + "fonts": null, + "letterSpacings": null, + "fontSizes": null, + "shadows": null, + "colors": null, + "blurs": null, + "sizes": null, + "animations": null, + "spacing": { + "0": null, + "1": null, + "2": null, + "3": null, + "4": null, + "5": null, + "6": null, + "7": null, + "8": null, + "9": null, + "10": null, + "11": null, + "12": null, + "14": null, + "16": null, + "20": null, + "24": null, + "28": null, + "32": null, + "36": null, + "40": null, + "44": null, + "48": null, + "52": null, + "56": null, + "60": null, + "64": null, + "72": null, + "80": null, + "96": null, + "0.5": null, + "1.5": null, + "2.5": null, + "3.5": null, + "4.5": null, + "5.5": null, + "025": { + "$value": { + "value": "0.125rem" + } + } + } + }, + "$order": [ + "tokens", + "keyframes", + "breakpoints", + "textStyles", + "containerSizes", + "semanticTokens", + "recipes", + "slotRecipes" + ] + } + }, + "inputs": [ + { + "margin": "025" + } + ], + "expected": { + "css": "@layer utilities {\n .m_025 {\n margin: var(--spacing-025);\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > urls as value::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > urls as value", + "line": 2868 + }, + "userConfig": { + "strictTokens": true + }, + "configPatch": { + "strictTokens": { + "$value": true + } + }, + "inputs": [], + "expected": { + "css": "" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > weird conditions mixing::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/output.test.ts", + "test": "extract to css output pipeline > weird conditions mixing", + "line": 3352 + }, + "userConfig": { + "conditions": { + "weirdCondition": [ + "@media (hover: hover) and (pointer: fine)", + "&:hover", + "& > div", + "span &", + "& ~ &" + ] + } + }, + "configPatch": { + "conditions": { + "weirdCondition": { + "$value": [ + "@media (hover: hover) and (pointer: fine)", + "&:hover", + "& > div", + "span &", + "& ~ &" + ] + } + } + }, + "inputs": [ + { + "_weirdCondition": { + "color": "red" + } + } + ], + "expected": { + "css": "@layer utilities {\n @media (hover: hover) and (pointer: fine) {\n :is(span .weirdCondition\\:c_red:hover > div) ~ :is(span .weirdCondition\\:c_red:hover > div) {\n color: red;\n}\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.pattern-raw-extraction.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.pattern-raw-extraction.test.ts.json new file mode 100644 index 00000000000..42da81769a6 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.pattern-raw-extraction.test.ts.json @@ -0,0 +1,393 @@ +{ + "source": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > comparing all scenarios: top-level vs selector vs inline::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > comparing all scenarios: top-level vs selector vs inline", + "line": 792 + }, + "userConfig": null, + "inputs": [ + { + "direction": "row", + "gap": "4", + "padding": "6" + }, + { + "padding": "6", + "&:hover": { + "direction": "row", + "gap": "4", + "opacity": 0.8 + } + }, + { + "padding": "6", + "&:hover": { + "direction": "column", + "gap": "8", + "opacity": 0.8 + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_6 {\n padding: var(--spacing-6);\n}\n\n .gap_4 {\n gap: var(--spacing-4);\n}\n\n .gap_8 {\n gap: var(--spacing-8);\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .direction_row {\n direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:gap_4:hover {\n gap: var(--spacing-4);\n}\n\n .\\[\\&\\:hover\\]\\:gap_8:hover {\n gap: var(--spacing-8);\n}\n\n .\\[\\&\\:hover\\]\\:direction_row:hover {\n direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:op_0\\.8:hover {\n opacity: 0.8;\n}\n\n .\\[\\&\\:hover\\]\\:direction_column:hover {\n direction: column;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > complex selectors with pattern.raw::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > complex selectors with pattern.raw", + "line": 1008 + }, + "userConfig": null, + "inputs": [ + { + "listStyle": "none", + "& > li": { + "inline": true, + "&:first-child": { + "columns": 2, + "gap": "3", + "marginTop": 0 + }, + "&:hover:not(:disabled)": { + "inline": false, + "background": "gray.50" + } + }, + "[data-selected=\"true\"]": { + "columns": 4, + "fontWeight": "bold" + }, + ".active": { + "p": "4", + "color": "blue.500" + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .li-s_none {\n list-style: none;\n}\n\n .columns_4 {\n columns: 4;\n}\n\n .gap_3 {\n gap: var(--spacing-3);\n}\n\n .gap_8px {\n gap: 8px;\n}\n\n .fw_bold {\n font-weight: var(--font-weights-bold);\n}\n\n .c_blue\\.500 {\n color: var(--colors-blue-500);\n}\n\n .d_inline-flex {\n display: inline-flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .d_flex {\n display: flex;\n}\n\n .d_grid {\n display: grid;\n}\n\n .grid-tc_repeat\\(2\\,_minmax\\(0\\,_1fr\\)\\) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n .grid-tc_repeat\\(4\\,_minmax\\(0\\,_1fr\\)\\) {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n .\\[\\&_\\>_li\\]\\:inline_true > li {\n inline: true;\n}\n\n .\\[\\&_\\>_li\\]\\:\\[\\&\\:hover\\:not\\(\\:disabled\\)\\]\\:bg_gray\\.50 > li:hover:not(:disabled) {\n background: var(--colors-gray-50);\n}\n\n .\\[\\&_\\>_li\\]\\:\\[\\&\\:first-child\\]\\:columns_2 > li:first-child {\n columns: 2;\n}\n\n .\\[\\&_\\>_li\\]\\:\\[\\&\\:first-child\\]\\:gap_3 > li:first-child {\n gap: var(--spacing-3);\n}\n\n .\\[\\&_\\>_li\\]\\:\\[\\&\\:first-child\\]\\:mt_0 > li:first-child {\n margin-top: var(--spacing-0);\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > css.raw() inline within pattern (reverse scenario)::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > css.raw() inline within pattern (reverse scenario)", + "line": 559 + }, + "userConfig": null, + "inputs": [ + { + "color": "red", + "fontSize": "16px" + } + ], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .c_red {\n color: red;\n}\n\n .fs_16px {\n font-size: 16px;\n}\n\n .\\[\\&\\:hover\\]\\:c_red:hover {\n color: red;\n}\n\n .\\[\\&\\:hover\\]\\:fs_16px:hover {\n font-size: 16px;\n}\n\n .\\[\\&\\:hover\\]\\:op_0\\.9:hover {\n opacity: 0.9;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > inline pattern.raw() within selector::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > inline pattern.raw() within selector", + "line": 226 + }, + "userConfig": null, + "inputs": [ + { + "padding": "4", + "&:hover": { + "direction": "row", + "gap": "8", + "opacity": 0.8 + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .gap_8 {\n gap: var(--spacing-8);\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:gap_8:hover {\n gap: var(--spacing-8);\n}\n\n .\\[\\&\\:hover\\]\\:direction_row:hover {\n direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:op_0\\.8:hover {\n opacity: 0.8;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > multiple inline pattern.raw() calls in nested selectors::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > multiple inline pattern.raw() calls in nested selectors", + "line": 279 + }, + "userConfig": null, + "inputs": [ + { + "display": "block", + "& > div": { + "direction": "column", + "gap": "2", + "&:hover": { + "inline": true, + "background": "gray.100" + }, + "&:focus": { + "columns": 2, + "gap": "4", + "outline": "none" + } + } + } + ], + "expected": { + "css": "@layer utilities {\n .gap_2 {\n gap: var(--spacing-2);\n}\n\n .gap_4 {\n gap: var(--spacing-4);\n}\n\n .d_block {\n display: block;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .d_inline-flex {\n display: inline-flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .d_grid {\n display: grid;\n}\n\n .grid-tc_repeat\\(2\\,_minmax\\(0\\,_1fr\\)\\) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n .\\[\\&_\\>_div\\]\\:gap_2 > div {\n gap: var(--spacing-2);\n}\n\n .\\[\\&_\\>_div\\]\\:direction_column > div {\n direction: column;\n}\n\n .\\[\\&_\\>_div\\]\\:\\[\\&\\:hover\\]\\:bg_gray\\.100 > div:hover {\n background: var(--colors-gray-100);\n}\n\n .\\[\\&_\\>_div\\]\\:\\[\\&\\:focus\\]\\:columns_2 > div:focus {\n columns: 2;\n}\n\n .\\[\\&_\\>_div\\]\\:\\[\\&\\:focus\\]\\:gap_4 > div:focus {\n gap: var(--spacing-4);\n}\n\n .\\[\\&_\\>_div\\]\\:\\[\\&\\:focus\\]\\:ring_none > div:focus {\n outline: var(--borders-none);\n}\n\n .\\[\\&_\\>_div\\]\\:\\[\\&\\:hover\\]\\:inline_true > div:hover {\n inline: true;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > multiple pattern.raw spreads in same object::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > multiple pattern.raw spreads in same object", + "line": 711 + }, + "userConfig": null, + "inputs": [ + { + "&:hover": { + "direction": "row", + "inline": true, + "gap": "4", + "color": "red" + } + } + ], + "expected": { + "css": "@layer utilities {\n .gap_4 {\n gap: var(--spacing-4);\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .d_inline-flex {\n display: inline-flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .\\[\\&\\:hover\\]\\:gap_4:hover {\n gap: var(--spacing-4);\n}\n\n .\\[\\&\\:hover\\]\\:direction_row:hover {\n direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:inline_true:hover {\n inline: true;\n}\n\n .\\[\\&\\:hover\\]\\:c_red:hover {\n color: red;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern function called inside another pattern::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern function called inside another pattern", + "line": 604 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_4 {\n gap: var(--spacing-4);\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:gap_4:hover {\n gap: var(--spacing-4);\n}\n\n .\\[\\&\\:hover\\]\\:direction_row:hover {\n direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:op_0\\.9:hover {\n opacity: 0.9;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern.raw with css.raw, cva, and sva in selectors::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern.raw with css.raw, cva, and sva in selectors", + "line": 901 + }, + "userConfig": null, + "inputs": [ + { + "padding": "4", + "&:hover": { + "direction": "row", + "justify": "center", + "opacity": 0.9 + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .bd_1px_solid {\n border: 1px solid;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .\\[\\&\\:focus\\]\\:ring_none:focus {\n outline: var(--borders-none);\n}\n\n .\\[\\&\\:focus\\]\\:direction_row:focus {\n direction: row;\n}\n\n .\\[\\&\\:focus\\]\\:justify_center:focus {\n justify: center;\n}\n\n .\\[\\&\\:hover\\]\\:bg_blue\\.100:hover {\n background: var(--colors-blue-100);\n}\n\n .\\[\\&\\:hover\\]\\:direction_row:hover {\n direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:justify_center:hover {\n justify: center;\n}\n\n .\\[\\&\\:hover\\]\\:op_0\\.9:hover {\n opacity: 0.9;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern, cva, sva)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern.raw() in cva inline::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern.raw() in cva inline", + "line": 511 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .cursor_pointer {\n cursor: pointer;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .\\[\\&\\:disabled\\]\\:direction_column:disabled {\n direction: column;\n}\n\n .\\[\\&\\:disabled\\]\\:align_center:disabled {\n align: center;\n}\n\n .\\[\\&\\:disabled\\]\\:op_0\\.5:disabled {\n opacity: 0.5;\n}\n}" + }, + "unsupported": "extracted non-css items (cva, pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern.raw() in cva recipe with selectors::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern.raw() in cva recipe with selectors", + "line": 370 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_2 {\n padding: var(--spacing-2);\n}\n\n .gap_2 {\n gap: var(--spacing-2);\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .\\[\\&\\:focus\\]\\:gap_2:focus {\n gap: var(--spacing-2);\n}\n\n .\\[\\&\\:focus\\]\\:ring_2px_solid_blue:focus {\n outline: 2px solid blue;\n}\n\n .\\[\\&\\:focus\\]\\:direction_column:focus {\n direction: column;\n}\n\n .\\[\\&\\:hover\\]\\:gap_2:hover {\n gap: var(--spacing-2);\n}\n\n .\\[\\&\\:hover\\]\\:direction_column:hover {\n direction: column;\n}\n\n .\\[\\&\\:hover\\]\\:op_0\\.9:hover {\n opacity: 0.9;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern, cva)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern.raw() in nested arbitrary selectors::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern.raw() in nested arbitrary selectors", + "line": 177 + }, + "userConfig": null, + "inputs": [ + { + "listStyle": "none", + "& li": { + "display": "block", + "&:hover": { + "inline": true, + "p": "4", + "background": "gray.50" + } + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .li-s_none {\n list-style: none;\n}\n\n .d_inline-flex {\n display: inline-flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .\\[\\&_li\\]\\:d_block li {\n display: block;\n}\n\n .\\[\\&_li\\]\\:\\[\\&\\:hover\\]\\:p_4 li:hover {\n padding: var(--spacing-4);\n}\n\n .\\[\\&_li\\]\\:\\[\\&\\:hover\\]\\:bg_gray\\.50 li:hover {\n background: var(--colors-gray-50);\n}\n\n .\\[\\&_li\\]\\:\\[\\&\\:hover\\]\\:inline_true li:hover {\n inline: true;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern.raw() in sva with complex selectors::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern.raw() in sva with complex selectors", + "line": 447 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bd_1px_solid {\n border: 1px solid;\n}\n\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .gap_4 {\n gap: var(--spacing-4);\n}\n\n .d_grid {\n display: grid;\n}\n\n .grid-tc_repeat\\(3\\,_minmax\\(0\\,_1fr\\)\\) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n .\\[\\&\\[data-selected\\]\\]\\:columns_3[data-selected] {\n columns: 3;\n}\n\n .\\[\\&\\[data-selected\\]\\]\\:gap_4[data-selected] {\n gap: var(--spacing-4);\n}\n\n .\\[\\&\\[data-selected\\]\\]\\:bd-c_blue\\.500[data-selected] {\n border-color: var(--colors-blue-500);\n}\n\n .\\[\\&_\\>_\\*\\:first-child\\]\\:columns_3 > *:first-child {\n columns: 3;\n}\n\n .\\[\\&_\\>_\\*\\:first-child\\]\\:gap_4 > *:first-child {\n gap: var(--spacing-4);\n}\n\n .\\[\\&_\\>_\\*\\:first-child\\]\\:mt_0 > *:first-child {\n margin-top: var(--spacing-0);\n}\n}" + }, + "unsupported": "extracted non-css items (pattern, sva)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern.raw() spread at top level::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern.raw() spread at top level", + "line": 21 + }, + "userConfig": null, + "inputs": [ + { + "direction": "column", + "gap": "4", + "padding": "6" + } + ], + "expected": { + "css": "@layer utilities {\n .p_6 {\n padding: var(--spacing-6);\n}\n\n .gap_4 {\n gap: var(--spacing-4);\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .direction_column {\n direction: column;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern.raw() spread in _hover condition::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern.raw() spread in _hover condition", + "line": 121 + }, + "userConfig": null, + "inputs": [ + { + "color": "blue.500", + "_hover": { + "direction": "row", + "justify": "center", + "align": "center", + "color": "blue.600" + } + } + ], + "expected": { + "css": "@layer utilities {\n .d_flex {\n display: flex;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .c_blue\\.500 {\n color: var(--colors-blue-500);\n}\n\n .hover\\:direction_row:is(:hover, [data-hover]) {\n direction: row;\n}\n\n .hover\\:justify_center:is(:hover, [data-hover]) {\n justify: center;\n}\n\n .hover\\:align_center:is(:hover, [data-hover]) {\n align: center;\n}\n\n .hover\\:c_blue\\.600:is(:hover, [data-hover]) {\n color: var(--colors-blue-600);\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > pattern.raw() spread within hover selector::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > pattern.raw() spread within hover selector", + "line": 69 + }, + "userConfig": null, + "inputs": [ + { + "padding": "4", + "&:hover": { + "direction": "row", + "gap": "8", + "opacity": 0.8 + } + } + ], + "expected": { + "css": "@layer utilities {\n .p_4 {\n padding: var(--spacing-4);\n}\n\n .gap_8 {\n gap: var(--spacing-8);\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:gap_8:hover {\n gap: var(--spacing-8);\n}\n\n .\\[\\&\\:hover\\]\\:direction_row:hover {\n direction: row;\n}\n\n .\\[\\&\\:hover\\]\\:op_0\\.8:hover {\n opacity: 0.8;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/pattern-raw-extraction.test.ts::pattern.raw() extraction in selectors > recipe with pattern.raw in compound variant::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/pattern-raw-extraction.test.ts", + "test": "pattern.raw() extraction in selectors > recipe with pattern.raw in compound variant", + "line": 658 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_8 {\n padding: var(--spacing-8);\n}\n\n .cursor_pointer {\n cursor: pointer;\n}\n\n .inline_true {\n inline: true;\n}\n\n .d_inline-flex {\n display: inline-flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n}" + }, + "unsupported": "extracted non-css items (cva, pattern)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.preset-patterns.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.preset-patterns.test.ts.json new file mode 100644 index 00000000000..8e7429fe6dd --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.preset-patterns.test.ts.json @@ -0,0 +1,959 @@ +{ + "source": "packages/parser/__tests__/preset-patterns.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > aspectRatio::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > aspectRatio", + "line": 1411 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .pos_relative {\n position: relative;\n}\n\n .\\[\\&\\>\\*\\]\\:inset_0>* {\n inset: var(--spacing-0);\n}\n\n .\\[\\&\\>\\*\\]\\:ov_hidden>* {\n overflow: hidden;\n}\n\n .before\\:content_\\\"\\\"::before {\n content: \"\";\n}\n\n .before\\:d_block::before {\n display: block;\n}\n\n .\\[\\&\\>\\*\\]\\:d_flex>* {\n display: flex;\n}\n\n .\\[\\&\\>\\*\\]\\:jc_center>* {\n justify-content: center;\n}\n\n .\\[\\&\\>\\*\\]\\:ai_center>* {\n align-items: center;\n}\n\n .\\[\\&\\>\\*\\]\\:pos_absolute>* {\n position: absolute;\n}\n\n .\\[\\&\\>img\\,_\\&\\>video\\]\\:obj-f_cover>img,.\\[\\&\\>img\\,_\\&\\>video\\]\\:obj-f_cover>video {\n object-fit: cover;\n}\n\n .before\\:h_0::before {\n height: var(--sizes-0);\n}\n\n .before\\:pb_75\\%::before {\n padding-bottom: 75%;\n}\n\n .\\[\\&\\>\\*\\]\\:w_100\\%>* {\n width: 100%;\n}\n\n .\\[\\&\\>\\*\\]\\:h_100\\%>* {\n height: 100%;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > box::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > box", + "line": 18 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > center::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > center", + "line": 1321 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > circle::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > circle", + "line": 719 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .flex_0_0_auto {\n flex: 0 0 auto;\n}\n\n .bdr_9999px {\n border-radius: 9999px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > container::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > container", + "line": 1199 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .mx_auto {\n margin-inline: auto;\n}\n\n .px_4 {\n padding-inline: var(--spacing-4);\n}\n\n .pos_relative {\n position: relative;\n}\n\n .max-w_8xl {\n max-width: var(--sizes-8xl);\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:px_6 {\n padding-inline: var(--spacing-6);\n}\n}\n\n @media screen and (min-width: 64rem) {\n .lg\\:px_8 {\n padding-inline: var(--spacing-8);\n}\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > cq::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > cq", + "line": 1594 + }, + "userConfig": { + "theme": { + "extend": { + "containerNames": [ + "", + "sidebar", + "content" + ] + } + } + }, + "configPatch": { + "theme": { + "containerNames": { + "$value": [ + "", + "sidebar", + "content" + ] + } + } + }, + "inputs": [ + { + "fontSize": { + "base": "lg", + "@sidebar/sm": "md" + } + } + ], + "expected": { + "css": "@layer utilities {\n .cq-t_inline-size {\n container-type: inline-size;\n}\n\n .cq-n_sidebar {\n container-name: sidebar;\n}\n\n .fs_lg {\n font-size: var(--font-sizes-lg);\n}\n\n @container sidebar (min-width: 24rem) {\n .\\@sidebar\\/sm\\:fs_md {\n font-size: var(--font-sizes-md);\n}\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > flex::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > flex", + "line": 90 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .d_flex {\n display: flex;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > float::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > float", + "line": 825 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .d_inline-flex {\n display: inline-flex;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .pos_absolute {\n position: absolute;\n}\n\n .inset-bs_0 {\n inset-block-start: var(--spacing-0);\n}\n\n .inset-be_auto {\n inset-block-end: auto;\n}\n\n .inset-s_auto {\n inset-inline-start: auto;\n}\n\n .inset-e_0 {\n inset-inline-end: var(--spacing-0);\n}\n\n .translate_50\\%_-50\\% {\n translate: 50% -50%;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > grid::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > grid", + "line": 963 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_grid {\n display: grid;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > gridItem::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > gridItem", + "line": 1045 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > hstack::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > hstack", + "line": 352 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx absoluteCenter::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx absoluteCenter", + "line": 891 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .d_inline-flex {\n display: inline-flex;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .pos_absolute {\n position: absolute;\n}\n\n .inset-bs_0 {\n inset-block-start: var(--spacing-0);\n}\n\n .inset-be_auto {\n inset-block-end: auto;\n}\n\n .inset-s_auto {\n inset-inline-start: auto;\n}\n\n .inset-e_0 {\n inset-inline-end: var(--spacing-0);\n}\n\n .translate_50\\%_-50\\% {\n translate: 50% -50%;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx aspectRatio::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx aspectRatio", + "line": 1497 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .pos_relative {\n position: relative;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n\n .\\[\\&\\>\\*\\]\\:inset_0>* {\n inset: var(--spacing-0);\n}\n\n .\\[\\&\\>\\*\\]\\:ov_hidden>* {\n overflow: hidden;\n}\n\n .before\\:content_\\\"\\\"::before {\n content: \"\";\n}\n\n .before\\:d_block::before {\n display: block;\n}\n\n .\\[\\&\\>\\*\\]\\:d_flex>* {\n display: flex;\n}\n\n .\\[\\&\\>\\*\\]\\:jc_center>* {\n justify-content: center;\n}\n\n .\\[\\&\\>\\*\\]\\:ai_center>* {\n align-items: center;\n}\n\n .\\[\\&\\>\\*\\]\\:pos_absolute>* {\n position: absolute;\n}\n\n .\\[\\&\\>img\\,_\\&\\>video\\]\\:obj-f_cover>img,.\\[\\&\\>img\\,_\\&\\>video\\]\\:obj-f_cover>video {\n object-fit: cover;\n}\n\n .before\\:h_0::before {\n height: var(--sizes-0);\n}\n\n .before\\:pb_75\\%::before {\n padding-bottom: 75%;\n}\n\n .\\[\\&\\>\\*\\]\\:w_100\\%>* {\n width: 100%;\n}\n\n .\\[\\&\\>\\*\\]\\:h_100\\%>* {\n height: 100%;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx box::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx box", + "line": 54 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx center::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx center", + "line": 1363 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx circle::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx circle", + "line": 769 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .flex_0_0_auto {\n flex: 0 0 auto;\n}\n\n .bdr_9999px {\n border-radius: 9999px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .jc_center {\n justify-content: center;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx container::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx container", + "line": 1257 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .mx_auto {\n margin-inline: auto;\n}\n\n .px_4 {\n padding-inline: var(--spacing-4);\n}\n\n .pos_relative {\n position: relative;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n\n .max-w_8xl {\n max-width: var(--sizes-8xl);\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:px_6 {\n padding-inline: var(--spacing-6);\n}\n}\n\n @media screen and (min-width: 64rem) {\n .lg\\:px_8 {\n padding-inline: var(--spacing-8);\n}\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx Cq::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx Cq", + "line": 1667 + }, + "userConfig": { + "theme": { + "extend": { + "containerNames": [ + "", + "sidebar", + "content" + ] + } + } + }, + "configPatch": { + "theme": { + "containerNames": { + "$value": [ + "", + "sidebar", + "content" + ] + } + } + }, + "inputs": [ + { + "fontSize": { + "base": "lg", + "@sidebar/sm": "md" + } + } + ], + "expected": { + "css": "@layer utilities {\n .cq-t_inline-size {\n container-type: inline-size;\n}\n\n .cq-n_sidebar {\n container-name: sidebar;\n}\n\n .fs_lg {\n font-size: var(--font-sizes-lg);\n}\n\n @container sidebar (min-width: 24rem) {\n .\\@sidebar\\/sm\\:fs_md {\n font-size: var(--font-sizes-md);\n}\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx flex::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx flex", + "line": 124 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .d_flex {\n display: flex;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx grid::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx grid", + "line": 1001 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_grid {\n display: grid;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx gridItem::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx gridItem", + "line": 1073 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx hStack::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx hStack", + "line": 398 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .flex-d_row {\n flex-direction: row;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx linkOverlay::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx linkOverlay", + "line": 612 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .pos_relative {\n position: relative;\n}\n\n .before\\:inset_0::before {\n inset: var(--spacing-0);\n}\n\n .before\\:content_\\\"\\\"::before {\n content: \"\";\n}\n\n .before\\:pos_absolute::before {\n position: absolute;\n}\n\n .before\\:z_0::before {\n z-index: 0;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx spacer::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx spacer", + "line": 671 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .flex_1 {\n flex: 1 1 0%;\n}\n\n .as_stretch {\n align-self: stretch;\n}\n\n .justify-self_stretch {\n justify-self: stretch;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx stack::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx stack", + "line": 206 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx vStack::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx vStack", + "line": 300 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > jsx wrap::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > jsx wrap", + "line": 1151 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-wrap_wrap {\n flex-wrap: wrap;\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n}" + }, + "unsupported": "extracted non-css items (jsx-pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > linkOverlay::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > linkOverlay", + "line": 553 + }, + "userConfig": null, + "inputs": [ + { + "pos": "relative" + } + ], + "expected": { + "css": "@layer utilities {\n .pos_relative {\n position: relative;\n}\n\n .before\\:inset_0::before {\n inset: var(--spacing-0);\n}\n\n .before\\:content_\\\"\\\"::before {\n content: \"\";\n}\n\n .before\\:pos_absolute::before {\n position: absolute;\n}\n\n .before\\:z_0::before {\n z-index: 0;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > responsive array syntax::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > responsive array syntax", + "line": 1737 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .grid-c_span_1 {\n grid-column: span 1;\n}\n\n .d_grid {\n display: grid;\n}\n\n .grid-tc_repeat\\(2\\,_minmax\\(0\\,_1fr\\)\\) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n @media screen and (min-width: 40rem) {\n .sm\\:grid-c_span_2 {\n grid-column: span 2;\n}\n .sm\\:grid-tc_repeat\\(3\\,_minmax\\(0\\,_1fr\\)\\) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n}\n\n @media screen and (min-width: 48rem) {\n .md\\:grid-c_span_3 {\n grid-column: span 3;\n}\n .md\\:grid-tc_repeat\\(4\\,_minmax\\(0\\,_1fr\\)\\) {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > spacer - with css unit size::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > spacer - with css unit size", + "line": 522 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .flex_0_0_40px {\n flex: 0 0 40px;\n}\n\n .as_stretch {\n align-self: stretch;\n}\n\n .justify-self_stretch {\n justify-self: stretch;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > spacer - with token size::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > spacer - with token size", + "line": 492 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .flex_0_0_token\\(spacing\\.4\\,_4\\) {\n flex: 0 0 var(--spacing-4, 4);\n}\n\n .as_stretch {\n align-self: stretch;\n}\n\n .justify-self_stretch {\n justify-self: stretch;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > spacer::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > spacer", + "line": 450 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .flex_1 {\n flex: 1 1 0%;\n}\n\n .as_stretch {\n align-self: stretch;\n}\n\n .justify-self_stretch {\n justify-self: stretch;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > stack::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > stack", + "line": 164 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > vstack::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > vstack", + "line": 254 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .ai_center {\n align-items: center;\n}\n\n .flex-d_column {\n flex-direction: column;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::preset patterns > wrap::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "preset patterns > wrap", + "line": 1109 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .gap_8px {\n gap: 8px;\n}\n\n .d_flex {\n display: flex;\n}\n\n .flex-wrap_wrap {\n flex-wrap: wrap;\n}\n}" + }, + "unsupported": "extracted non-css items (pattern)" + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: enum *::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "staticCss > type: enum *", + "line": 2714 + }, + "userConfig": { + "staticCss": { + "patterns": { + "float": [ + "*" + ] + } + } + }, + "configPatch": { + "staticCss": { + "$value": { + "patterns": { + "float": [ + "*" + ] + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: enum::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "staticCss > type: enum", + "line": 2443 + }, + "userConfig": { + "staticCss": { + "patterns": { + "divider": [ + { + "properties": { + "orientation": [ + "*" + ], + "thickness": [ + "*" + ] + } + } + ] + } + } + }, + "configPatch": { + "staticCss": { + "$value": { + "patterns": { + "divider": [ + { + "properties": { + "orientation": [ + "*" + ], + "thickness": [ + "*" + ] + } + } + ] + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: number + conditions::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "staticCss > type: number + conditions", + "line": 1894 + }, + "userConfig": { + "staticCss": { + "patterns": { + "aspectRatio": [ + { + "properties": { + "ratio": [ + 0.25 + ] + }, + "conditions": [ + "md" + ] + } + ] + } + } + }, + "configPatch": { + "staticCss": { + "$value": { + "patterns": { + "aspectRatio": [ + { + "properties": { + "ratio": [ + 0.25 + ] + }, + "conditions": [ + "md" + ] + } + ] + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: number::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "staticCss > type: number", + "line": 1811 + }, + "userConfig": { + "staticCss": { + "patterns": { + "aspectRatio": [ + { + "properties": { + "ratio": [ + 1.3333333333333333, + 1.7777777777777777, + 1 + ] + } + } + ] + } + } + }, + "configPatch": { + "staticCss": { + "$value": { + "patterns": { + "aspectRatio": [ + { + "properties": { + "ratio": [ + 1.3333333333333333, + 1.7777777777777777, + 1 + ] + } + } + ] + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: property *::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "staticCss > type: property *", + "line": 2116 + }, + "userConfig": { + "staticCss": { + "patterns": { + "bleed": [ + { + "properties": { + "inline": [ + "*" + ] + } + } + ] + } + } + }, + "configPatch": { + "staticCss": { + "$value": { + "patterns": { + "bleed": [ + { + "properties": { + "inline": [ + "*" + ] + } + } + ] + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: property::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "staticCss > type: property", + "line": 2053 + }, + "userConfig": { + "staticCss": { + "patterns": { + "circle": [ + { + "properties": { + "size": [ + "sm", + "md", + "lg" + ] + } + } + ] + } + } + }, + "configPatch": { + "staticCss": { + "$value": { + "patterns": { + "circle": [ + { + "properties": { + "size": [ + "sm", + "md", + "lg" + ] + } + } + ] + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: token::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/preset-patterns.test.ts", + "test": "staticCss > type: token", + "line": 2014 + }, + "userConfig": { + "staticCss": { + "patterns": { + "spacer": [ + { + "properties": { + "size": [ + "2", + "4", + "6" + ] + } + } + ] + } + } + }, + "configPatch": { + "staticCss": { + "$value": { + "patterns": { + "spacer": [ + { + "properties": { + "size": [ + "2", + "4", + "6" + ] + } + } + ] + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.static-css.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.static-css.test.ts.json new file mode 100644 index 00000000000..d6aba401c06 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.static-css.test.ts.json @@ -0,0 +1,201 @@ +{ + "source": "packages/parser/__tests__/static-css.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/static-css.test.ts::static css > recipe with base::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/static-css.test.ts", + "test": "static css > recipe with base", + "line": 44 + }, + "userConfig": { + "staticCss": { + "recipes": { + "tooltipStyle": [] + } + } + }, + "configPatch": { + "staticCss": { + "$value": { + "recipes": { + "tooltipStyle": [] + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/static-css.test.ts::static css > recipe::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/static-css.test.ts", + "test": "static css > recipe", + "line": 5 + }, + "userConfig": { + "theme": { + "extend": { + "recipes": { + "textStyle": { + "staticCss": [ + { + "size": [ + "h1" + ] + } + ] + } + } + } + } + }, + "configPatch": { + "theme": { + "recipes": { + "textStyle": { + "staticCss": { + "$value": [ + { + "size": [ + "h1" + ] + } + ] + } + }, + "$order": [ + "tooltipStyle", + "cardStyle", + "buttonStyle", + "textStyle" + ] + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + }, + { + "id": "fixture::packages/parser/__tests__/static-css.test.ts::static css > slot recipes::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/static-css.test.ts", + "test": "static css > slot recipes", + "line": 68 + }, + "userConfig": { + "theme": { + "extend": { + "slotRecipes": { + "someRecipe": { + "staticCss": [ + { + "size": [ + "sm" + ] + } + ], + "className": "button", + "slots": [ + "container", + "icon" + ], + "base": { + "container": { + "fontFamily": "mono" + }, + "icon": { + "fontSize": "1.5rem" + } + }, + "variants": { + "size": { + "sm": { + "container": { + "fontSize": "5rem", + "lineHeight": "1em" + }, + "icon": { + "fontSize": "2rem" + } + }, + "md": { + "container": { + "fontSize": "3rem", + "lineHeight": "1.2em" + } + } + } + } + } + } + } + } + }, + "configPatch": { + "theme": { + "slotRecipes": { + "someRecipe": { + "$value": { + "staticCss": [ + { + "size": [ + "sm" + ] + } + ], + "className": "button", + "slots": [ + "container", + "icon" + ], + "base": { + "container": { + "fontFamily": "mono" + }, + "icon": { + "fontSize": "1.5rem" + } + }, + "variants": { + "size": { + "sm": { + "container": { + "fontSize": "5rem", + "lineHeight": "1em" + }, + "icon": { + "fontSize": "2rem" + } + }, + "md": { + "container": { + "fontSize": "3rem", + "lineHeight": "1.2em" + } + } + } + } + } + } + } + } + }, + "inputs": [], + "expected": { + "css": "" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.sva.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.sva.test.ts.json new file mode 100644 index 00000000000..c01c340ba56 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.sva.test.ts.json @@ -0,0 +1,53 @@ +{ + "source": "packages/parser/__tests__/sva.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/sva.test.ts::ast parser / sva > unresolvable + concat - spread::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/sva.test.ts", + "test": "ast parser / sva > unresolvable + concat - spread", + "line": 305 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .bg-c_red {\n background-color: red;\n}\n}" + }, + "unsupported": "extracted non-css items (sva)" + }, + { + "id": "fixture::packages/parser/__tests__/sva.test.ts::ast parser / sva > unresolvable slots - spread::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/sva.test.ts", + "test": "ast parser / sva > unresolvable slots - spread", + "line": 258 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_6 {\n padding: var(--spacing-6);\n}\n}" + }, + "unsupported": "extracted non-css items (sva)" + }, + { + "id": "fixture::packages/parser/__tests__/sva.test.ts::ast parser / sva > unresolvable slots::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/sva.test.ts", + "test": "ast parser / sva > unresolvable slots", + "line": 163 + }, + "userConfig": null, + "inputs": [], + "expected": { + "css": "@layer utilities {\n .p_6 {\n padding: var(--spacing-6);\n}\n\n .m_4 {\n margin: var(--spacing-4);\n}\n\n .bdr_md {\n border-radius: var(--radii-md);\n}\n\n .bx-sh_md {\n box-shadow: var(--shadows-md);\n}\n\n .fw_semibold {\n font-weight: var(--font-weights-semibold);\n}\n\n .w_md {\n width: var(--sizes-md);\n}\n\n .pb_2 {\n padding-bottom: var(--spacing-2);\n}\n\n [data-theme=dark] .dark\\:bg_\\#262626,.dark .dark\\:bg_\\#262626,.dark\\:bg_\\#262626.dark,.dark\\:bg_\\#262626[data-theme=dark] {\n background: #262626;\n}\n\n [data-theme=dark] .dark\\:c_white,.dark .dark\\:c_white,.dark\\:c_white.dark,.dark\\:c_white[data-theme=dark] {\n color: var(--colors-white);\n}\n}" + }, + "unsupported": "extracted non-css items (sva)" + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.svelte.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.svelte.test.ts.json new file mode 100644 index 00000000000..184b3c66696 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.svelte.test.ts.json @@ -0,0 +1,57 @@ +{ + "source": "packages/parser/__tests__/svelte.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/svelte.test.ts::extract svelte templates > template with svelte-specific syntax + Typescript usage::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/svelte.test.ts", + "test": "extract svelte templates > template with svelte-specific syntax + Typescript usage", + "line": 175 + }, + "userConfig": null, + "inputs": [ + { + "color": "blue.400" + }, + { + "color": "blue.100" + }, + { + "color": "green.400" + }, + { + "color": "purple.400" + }, + { + "color": "red.500" + }, + { + "color": "teal.100" + }, + { + "color": "teal.200" + }, + { + "color": "teal.300" + }, + { + "color": "teal.400" + }, + { + "color": "teal.500" + }, + { + "color": "teal.600" + }, + { + "color": "teal.700" + } + ], + "expected": { + "css": "@layer utilities {\n .c_blue\\.400 {\n color: var(--colors-blue-400);\n}\n\n .c_blue\\.100 {\n color: var(--colors-blue-100);\n}\n\n .c_green\\.400 {\n color: var(--colors-green-400);\n}\n\n .c_purple\\.400 {\n color: var(--colors-purple-400);\n}\n\n .c_red\\.500 {\n color: var(--colors-red-500);\n}\n\n .c_teal\\.100 {\n color: var(--colors-teal-100);\n}\n\n .c_teal\\.200 {\n color: var(--colors-teal-200);\n}\n\n .c_teal\\.300 {\n color: var(--colors-teal-300);\n}\n\n .c_teal\\.400 {\n color: var(--colors-teal-400);\n}\n\n .c_teal\\.500 {\n color: var(--colors-teal-500);\n}\n\n .c_teal\\.600 {\n color: var(--colors-teal-600);\n}\n\n .c_teal\\.700 {\n color: var(--colors-teal-700);\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.vue.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.vue.test.ts.json new file mode 100644 index 00000000000..a6e22d554aa --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/packages.parser.__tests__.vue.test.ts.json @@ -0,0 +1,128 @@ +{ + "source": "packages/parser/__tests__/vue.test.ts", + "cases": [ + { + "id": "fixture::packages/parser/__tests__/vue.test.ts::extract Vue templates > Nested templates::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/vue.test.ts", + "test": "extract Vue templates > Nested templates", + "line": 215 + }, + "userConfig": null, + "inputs": [ + { + "textStyle": "overline" + }, + { + "textStyle": "h7" + }, + { + "textStyle": "text", + "color": "grey.70" + } + ], + "expected": { + "css": "@layer utilities {\n .c_grey\\.70 {\n color: grey.70;\n}\n}" + }, + "unsupported": "extracted non-css items (jsx)" + }, + { + "id": "fixture::packages/parser/__tests__/vue.test.ts::extract Vue templates > vue 2 Options API template::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/vue.test.ts", + "test": "extract Vue templates > vue 2 Options API template", + "line": 463 + }, + "userConfig": null, + "inputs": [ + { + "color": "green.400" + }, + { + "color": "purple.400" + }, + { + "color": "red.500" + }, + { + "color": "red", + "fontWeight": "bold" + }, + { + "color": "green" + } + ], + "expected": { + "css": "@layer utilities {\n .c_green\\.400 {\n color: var(--colors-green-400);\n}\n\n .c_purple\\.400 {\n color: var(--colors-purple-400);\n}\n\n .c_red\\.500 {\n color: var(--colors-red-500);\n}\n\n .c_red {\n color: red;\n}\n\n .fw_bold {\n font-weight: var(--font-weights-bold);\n}\n\n .c_green {\n color: green;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/vue.test.ts::extract Vue templates > vue 3 composition API::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/vue.test.ts", + "test": "extract Vue templates > vue 3 composition API", + "line": 70 + }, + "userConfig": null, + "inputs": [ + { + "color": "green.400" + }, + { + "color": "purple.400" + }, + { + "color": "red.500" + }, + { + "color": "red", + "fontWeight": "bold" + }, + { + "color": "green" + } + ], + "expected": { + "css": "@layer utilities {\n .c_green\\.400 {\n color: var(--colors-green-400);\n}\n\n .c_purple\\.400 {\n color: var(--colors-purple-400);\n}\n\n .c_red\\.500 {\n color: var(--colors-red-500);\n}\n\n .c_red {\n color: red;\n}\n\n .fw_bold {\n font-weight: var(--font-weights-bold);\n}\n\n .c_green {\n color: green;\n}\n}" + } + }, + { + "id": "fixture::packages/parser/__tests__/vue.test.ts::extract Vue templates > vue 3 script setup::1", + "kind": "parse-and-extract", + "config": "fixture", + "source": { + "file": "packages/parser/__tests__/vue.test.ts", + "test": "extract Vue templates > vue 3 script setup", + "line": 322 + }, + "userConfig": null, + "inputs": [ + { + "color": "green.400" + }, + { + "color": "purple.400" + }, + { + "color": "red.500" + }, + { + "color": "red", + "fontWeight": "bold" + }, + { + "color": "green" + } + ], + "expected": { + "css": "@layer utilities {\n .c_green\\.400 {\n color: var(--colors-green-400);\n}\n\n .c_purple\\.400 {\n color: var(--colors-purple-400);\n}\n\n .c_red\\.500 {\n color: var(--colors-red-500);\n}\n\n .c_red {\n color: red;\n}\n\n .fw_bold {\n font-weight: var(--font-weights-bold);\n}\n\n .c_green {\n color: green;\n}\n}" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.css.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.css.test.ts.json new file mode 100644 index 00000000000..a901f8f9cbb --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.css.test.ts.json @@ -0,0 +1,422 @@ +{ + "source": "sandbox/codegen/__tests__/css.test.ts", + "cases": [ + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > arbitrary selector::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > arbitrary selector", + "line": 54 + }, + "inputs": [ + { + "&:data-panda": { + "display": "flex" + } + } + ], + "expected": { + "className": "[&:data-panda]:d_flex" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > arbitrary value::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > arbitrary value", + "line": 48 + }, + "inputs": [ + { + "color": "#fff" + } + ], + "expected": { + "className": "c_#fff" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > condition prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > condition prop", + "line": 36 + }, + "inputs": [ + { + "_hover": { + "bg": "yellow.200" + } + } + ], + "expected": { + "className": "hover:bg_yellow.200" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > merging styles with array item::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > merging styles with array item", + "line": 118 + }, + "inputs": [ + { + "fontSize": "sm", + "bgColor": "red.500" + }, + [ + { + "backgroundColor": "red.600" + }, + { + "fontSize": "12px" + } + ] + ], + "expected": { + "className": "fs_12px bg-c_red.600" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > merging styles with nested conditions::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > merging styles with nested conditions", + "line": 106 + }, + "inputs": [ + { + "fontSize": "sm", + "_hover": { + "color": "green.100" + } + }, + { + "_hover": { + "color": "green.200" + } + } + ], + "expected": { + "className": "fs_sm hover:c_green.200" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > merging styles with object condition prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > merging styles with object condition prop", + "line": 112 + }, + "inputs": [ + { + "fontSize": "md" + }, + { + "fontSize": { + "base": "lg", + "sm": "xs" + } + } + ], + "expected": { + "className": "fs_lg sm:fs_xs" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > merging styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > merging styles", + "line": 100 + }, + "inputs": [ + { + "fontSize": "sm", + "bgColor": "red.500" + }, + { + "backgroundColor": "red.600" + } + ], + "expected": { + "className": "fs_sm bg-c_red.600" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > native CSS prop and value::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > native CSS prop and value", + "line": 6 + }, + "inputs": [ + { + "display": "flex" + } + ], + "expected": { + "className": "d_flex" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > nested condition prop with array syntax::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > nested condition prop with array syntax", + "line": 84 + }, + "inputs": [ + { + "_hover": { + "_dark": { + "bg": [ + "pink.100", + "pink.200" + ] + } + } + } + ], + "expected": { + "className": "hover:dark:bg_pink.100 hover:dark:sm:bg_pink.200" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > nested condition prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > nested condition prop", + "line": 42 + }, + "inputs": [ + { + "_hover": { + "_dark": { + "bg": "pink" + } + } + } + ], + "expected": { + "className": "hover:dark:bg_pink" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > object condition prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > object condition prop", + "line": 30 + }, + "inputs": [ + { + "bg": { + "_hover": "yellow.100" + } + } + ], + "expected": { + "className": "hover:bg_yellow.100" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > responsive array syntax prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > responsive array syntax prop", + "line": 66 + }, + "inputs": [ + { + "bg": [ + "cyan.100", + "cyan.200", + null, + null, + "cyan.300" + ] + } + ], + "expected": { + "className": "bg_cyan.100 sm:bg_cyan.200 xl:bg_cyan.300" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > responsive condition::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > responsive condition", + "line": 60 + }, + "inputs": [ + { + "sm": { + "bg": "purple" + } + } + ], + "expected": { + "className": "sm:bg_purple" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > same prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > same prop", + "line": 90 + }, + "inputs": [ + { + "bgColor": "red.100", + "backgroundColor": "red.200" + } + ], + "expected": { + "className": "bg-c_red.200" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > same prop::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > same prop", + "line": 94 + }, + "inputs": [ + { + "backgroundColor": "red.300", + "bgColor": "red.400" + } + ], + "expected": { + "className": "bg-c_red.400" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > shorthand prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > shorthand prop", + "line": 24 + }, + "inputs": [ + { + "bg": "red" + } + ], + "expected": { + "className": "bg_red" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > token value::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > token value", + "line": 12 + }, + "inputs": [ + { + "color": "blue.300" + } + ], + "expected": { + "className": "c_blue.300" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > using inline token helper - in condition::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > using inline token helper - in condition", + "line": 78 + }, + "inputs": [ + { + "@media screen and (min-width: token(sizes.4xl))": { + "bg": "blue.500" + } + } + ], + "expected": { + "className": "[@media_screen_and_(min-width:_token(sizes.4xl))]:bg_blue.500" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > using inline token helper - in value::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > using inline token helper - in value", + "line": 72 + }, + "inputs": [ + { + "border": "1px solid token(colors.blue.400)" + } + ], + "expected": { + "className": "bd_1px_solid_token(colors.blue.400)" + } + }, + { + "id": "react::sandbox/codegen/__tests__/css.test.ts::css > utility prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/css.test.ts", + "test": "css > utility prop", + "line": 18 + }, + "inputs": [ + { + "srOnly": true + } + ], + "expected": { + "className": "sr_true" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.cva.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.cva.test.ts.json new file mode 100644 index 00000000000..0777168472a --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.cva.test.ts.json @@ -0,0 +1,82 @@ +{ + "source": "sandbox/codegen/__tests__/cva.test.ts", + "cases": [ + { + "id": "react::sandbox/codegen/__tests__/cva.test.ts::cva > base styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/cva.test.ts", + "test": "cva > base styles", + "line": 32 + }, + "inputs": [ + { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + } + ], + "expected": { + "className": "bdr_md fw_semibold h_10 px_4" + } + }, + { + "id": "react::sandbox/codegen/__tests__/cva.test.ts::cva > outline variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/cva.test.ts", + "test": "cva > outline variant styles", + "line": 46 + }, + "inputs": [ + { + "borderRadius": "md", + "fontWeight": "semibold", + "height": "10", + "paddingInline": "4", + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + } + ], + "expected": { + "className": "bdr_md fw_semibold h_10 px_4 bd_1px_solid c_colorPalette.600 dark:c_colorPalette.200 bd-c_currentColor" + } + }, + { + "id": "react::sandbox/codegen/__tests__/cva.test.ts::cva > solid variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/cva.test.ts", + "test": "cva > solid variant styles", + "line": 38 + }, + "inputs": [ + { + "borderRadius": "md", + "fontWeight": "semibold", + "height": "10", + "paddingInline": "4", + "background": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + } + ], + "expected": { + "className": "bdr_md fw_semibold h_10 px_4 bg_colorPalette.500 dark:bg_colorPalette.300 c_white dark:c_gray.800" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.frameworks.react.style-context.test.tsx.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.frameworks.react.style-context.test.tsx.json new file mode 100644 index 00000000000..3c871acef70 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.frameworks.react.style-context.test.tsx.json @@ -0,0 +1,253 @@ +{ + "source": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "cases": [ + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > default props::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > default props", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > default props::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > default props", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > forwardProps::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > forwardProps", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withContext::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withContext", + "line": null + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withContext::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withContext", + "line": null + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withContext::3", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withContext", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withContext::4", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withContext", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withProvider", + "line": null + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withProvider", + "line": null + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::3", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withProvider", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::4", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withProvider", + "line": null + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::5", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withProvider", + "line": null + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::6", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withProvider", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::7", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx", + "test": "style context - react > withProvider", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.recipe.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.recipe.test.ts.json new file mode 100644 index 00000000000..e99202214d4 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.recipe.test.ts.json @@ -0,0 +1,141 @@ +{ + "source": "sandbox/codegen/__tests__/recipe.test.ts", + "cases": [ + { + "id": "react::sandbox/codegen/__tests__/recipe.test.ts::recipe > base styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/recipe.test.ts", + "test": "recipe > base styles", + "line": 7 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/recipe.test.ts::recipe > compoundVariants::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/recipe.test.ts", + "test": "recipe > compoundVariants", + "line": 44 + }, + "inputs": [ + { + "color": "blue" + } + ], + "expected": { + "className": "c_blue" + } + }, + { + "id": "react::sandbox/codegen/__tests__/recipe.test.ts::recipe > compoundVariants::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/recipe.test.ts", + "test": "recipe > compoundVariants", + "line": 48 + }, + "inputs": [ + { + "color": "green" + } + ], + "expected": { + "className": "c_green" + } + }, + { + "id": "react::sandbox/codegen/__tests__/recipe.test.ts::recipe > compoundVariants::3", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/recipe.test.ts", + "test": "recipe > compoundVariants", + "line": 51 + }, + "inputs": [ + { + "color": "red" + } + ], + "expected": { + "className": "c_red" + } + }, + { + "id": "react::sandbox/codegen/__tests__/recipe.test.ts::recipe > compoundVariants::4", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/recipe.test.ts", + "test": "recipe > compoundVariants", + "line": 54 + }, + "inputs": [ + { + "color": "red" + } + ], + "expected": { + "className": "c_red" + } + }, + { + "id": "react::sandbox/codegen/__tests__/recipe.test.ts::recipe > outline variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/recipe.test.ts", + "test": "recipe > outline variant styles", + "line": 33 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/recipe.test.ts::recipe > solid variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/recipe.test.ts", + "test": "recipe > solid variant styles", + "line": 27 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/recipe.test.ts::recipe > using conditions::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/recipe.test.ts", + "test": "recipe > using conditions", + "line": 39 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.format-names.test.tsx.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.format-names.test.tsx.json new file mode 100644 index 00000000000..f1731fefeac --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.format-names.test.tsx.json @@ -0,0 +1,428 @@ +{ + "source": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "cases": [ + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > all together::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > all together", + "line": null + }, + "inputs": [ + { + "color": "green" + }, + { + "mx": "-$2" + }, + { + "color": "$red-200", + "fontSize": "$xl" + } + ], + "expected": { + "className": "c-$red-200 mx--$2 fs-$xl" + } + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > base styles::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > base styles", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > css prop with variant::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > css prop with variant", + "line": null + }, + "inputs": [ + {}, + {}, + { + "color": "$red-100", + "fontSize": "$md" + } + ], + "expected": { + "className": "c-$red-100 fs-$md" + } + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > css prop::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > css prop", + "line": null + }, + "inputs": [ + {}, + {}, + { + "color": "$red-100", + "fontSize": "$md" + } + ], + "expected": { + "className": "c-$red-100 fs-$md" + } + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > custom className::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > custom className", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > html props::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > html props", + "line": null + }, + "inputs": [ + {}, + { + "height": "123" + }, + null + ], + "expected": { + "className": "h-123" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > style prop with variant::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > style prop with variant", + "line": null + }, + "inputs": [ + {}, + { + "mx": "2" + }, + null + ], + "expected": { + "className": "mx-2" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > style prop::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > style prop", + "line": null + }, + "inputs": [ + {}, + { + "mx": "2" + }, + null + ], + "expected": { + "className": "mx-2" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > variant styles::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - button recipe > variant styles", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > all together::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - cva > all together", + "line": null + }, + "inputs": [ + { + "color": "$red-500", + "background": "$blue-500", + "_hover": { + "color": "$red-600", + "background": "$blue-600" + }, + "fontSize": "$lg", + "paddingInline": "123px", + "paddingBlock": "$md", + "zIndex": 1 + }, + { + "mx": "$2" + }, + { + "color": "$red-200", + "fontSize": "$xl" + } + ], + "expected": { + "className": "c-$red-200 bg-$blue-500 hover:c-$red-600 hover:bg-$blue-600 fs-$xl px-123px py-$md z-1 mx-$2" + } + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > base styles::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - cva > base styles", + "line": null + }, + "inputs": [ + { + "color": "$red-500", + "bg": "$blue-500", + "_hover": { + "color": "$red-600", + "bg": "$blue-600" + } + }, + {}, + null + ], + "expected": { + "className": "c-$red-500 bg-$blue-500 hover:c-$red-600 hover:bg-$blue-600" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > css prop with variant::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - cva > css prop with variant", + "line": null + }, + "inputs": [ + { + "color": "$red-500", + "background": "$blue-500", + "_hover": { + "color": "$red-600", + "background": "$blue-600" + }, + "fontSize": "$sm", + "paddingInline": "$sm", + "paddingBlock": "$xs" + }, + {}, + { + "color": "$red-100", + "fontSize": "$md" + } + ], + "expected": { + "className": "c-$red-100 bg-$blue-500 hover:c-$red-600 hover:bg-$blue-600 fs-$md px-$sm py-$xs" + } + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > css prop::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - cva > css prop", + "line": null + }, + "inputs": [ + { + "color": "$red-500", + "bg": "$blue-500", + "_hover": { + "color": "$red-600", + "bg": "$blue-600" + } + }, + {}, + { + "color": "$red-100", + "fontSize": "$md" + } + ], + "expected": { + "className": "c-$red-100 bg-$blue-500 hover:c-$red-600 hover:bg-$blue-600 fs-$md" + } + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > custom className::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - cva > custom className", + "line": null + }, + "inputs": [ + { + "color": "$red-500", + "background": "$blue-500", + "_hover": { + "color": "$red-600", + "background": "$blue-600" + }, + "fontSize": "$sm", + "paddingInline": "$sm", + "paddingBlock": "$xs" + }, + {}, + null + ], + "expected": { + "className": "c-$red-500 bg-$blue-500 hover:c-$red-600 hover:bg-$blue-600 fs-$sm px-$sm py-$xs" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > style prop with variant::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - cva > style prop with variant", + "line": null + }, + "inputs": [ + { + "color": "$red-500", + "background": "$blue-500", + "_hover": { + "color": "$red-600", + "background": "$blue-600" + }, + "fontSize": "$sm", + "paddingInline": "$sm", + "paddingBlock": "$xs" + }, + { + "mx": "2" + }, + null + ], + "expected": { + "className": "c-$red-500 bg-$blue-500 hover:c-$red-600 hover:bg-$blue-600 fs-$sm px-$sm py-$xs mx-2" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > style prop::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - cva > style prop", + "line": null + }, + "inputs": [ + { + "color": "$red-500", + "bg": "$blue-500", + "_hover": { + "color": "$red-600", + "bg": "$blue-600" + } + }, + { + "mx": "2" + }, + null + ], + "expected": { + "className": "c-$red-500 bg-$blue-500 hover:c-$red-600 hover:bg-$blue-600 mx-2" + }, + "undefinedValues": true + }, + { + "id": "format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > variant styles::1", + "kind": "codegen-css", + "config": "codegen-format-names", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/format-names.test.tsx", + "test": "styled factory - cva > variant styles", + "line": null + }, + "inputs": [ + { + "color": "$red-500", + "background": "$blue-500", + "_hover": { + "color": "$red-600", + "background": "$blue-600" + }, + "fontSize": "$sm", + "paddingInline": "$sm", + "paddingBlock": "$xs" + }, + {}, + null + ], + "expected": { + "className": "c-$red-500 bg-$blue-500 hover:c-$red-600 hover:bg-$blue-600 fs-$sm px-$sm py-$xs" + }, + "undefinedValues": true + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict-property-values.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict-property-values.test.ts.json new file mode 100644 index 00000000000..89b51ab0086 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict-property-values.test.ts.json @@ -0,0 +1,554 @@ +{ + "source": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "cases": [ + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > arbitrary selector::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > arbitrary selector", + "line": 111 + }, + "inputs": [ + { + "&:data-panda": { + "display": "flex" + } + } + ], + "expected": { + "className": "[&:data-panda]:d_flex" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > arbitrary value escape hatch with conditionals::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > arbitrary value escape hatch with conditionals", + "line": 90 + }, + "inputs": [ + { + "color": "[#fff]", + "fontSize": "[123px]", + "bgColor": "[#fff!]", + "borderColor": "[#fff !important]", + "_hover": { + "color": "[#fff]", + "fontSize": "[123px]", + "bgColor": "[#fff!]", + "borderColor": "[#fff !important]" + }, + "backgroundColor": { + "_dark": "[#3B00B9]", + "_hover": "[#3B00B9!]", + "_focus": "[#3B00B9 !important]" + } + } + ], + "expected": { + "className": "c_[#fff] fs_[123px] dark:bg-c_[#3B00B9] hover:bg-c_[#3B00B9]! focus:bg-c_[#3B00B9]! bd-c_[#fff]! hover:c_[#fff] hover:fs_[123px] hover:bg-c_[#fff]! hover:bd-c_[#fff]!" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > arbitrary value escape hatch::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > arbitrary value escape hatch", + "line": 81 + }, + "inputs": [ + { + "color": "[#fff]", + "fontSize": "[123px]" + } + ], + "expected": { + "className": "c_[#fff] fs_[123px]" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > arbitrary value::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > arbitrary value", + "line": 73 + }, + "inputs": [ + { + "color": "#fff" + } + ], + "expected": { + "className": "c_#fff" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > condition prop", + "line": 56 + }, + "inputs": [ + { + "_hover": { + "bg": "yellow.200" + } + } + ], + "expected": { + "className": "hover:bg_yellow.200" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > css var::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > css var", + "line": 30 + }, + "inputs": [ + { + "color": "var(--button-color)" + } + ], + "expected": { + "className": "c_var(--button-color)" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > css var::2", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > css var", + "line": 31 + }, + "inputs": [ + { + "display": "var(--button-color)" + } + ], + "expected": { + "className": "d_var(--button-color)" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > important::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > important", + "line": 116 + }, + "inputs": [ + { + "fontSize": "2xl!", + "p": "4 !important", + "bgColor": "#fff!", + "bg": "#fff!", + "borderColor": "#fff !important", + "_hover": { + "fontSize": "2xl!", + "p": "4 !important", + "bgColor": "#fff!", + "borderColor": "#fff !important" + }, + "backgroundColor": { + "_disabled": "2xl!", + "_active": "4 !important", + "_hover": "#3B00B9!", + "_focus": "#3B00B9 !important" + } + } + ], + "expected": { + "className": "fs_2xl! p_4! disabled:bg-c_2xl! active:bg-c_4! hover:bg-c_#3B00B9! focus:bg-c_#3B00B9! bg_#fff! bd-c_#fff! hover:fs_2xl! hover:p_4! hover:bg-c_#fff! hover:bd-c_#fff!" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 6 + }, + "inputs": [ + { + "display": "flex" + } + ], + "expected": { + "className": "d_flex" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::2", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 9 + }, + "inputs": [ + { + "display": "abc" + } + ], + "expected": { + "className": "d_abc" + }, + "expectTypeError": true + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::3", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 11 + }, + "inputs": [ + { + "content": "abc" + } + ], + "expected": { + "className": "content_abc" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::4", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 12 + }, + "inputs": [ + { + "willChange": "abc" + } + ], + "expected": { + "className": "will-change_abc" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::5", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 14 + }, + "inputs": [ + { + "pos": "absolute" + } + ], + "expected": { + "className": "pos_absolute" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::6", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 17 + }, + "inputs": [ + { + "pos": "absolute123" + } + ], + "expected": { + "className": "pos_absolute123" + }, + "expectTypeError": true + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::7", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 18 + }, + "inputs": [ + { + "flex": "0 1" + } + ], + "expected": { + "className": "flex_0_1" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::8", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 20 + }, + "inputs": [ + { + "borderTop": "1px solid red" + } + ], + "expected": { + "className": "bd-t_1px_solid_red" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::9", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > native CSS prop and value", + "line": 22 + }, + "inputs": [ + { + "borderTopStyle": "aaa" + } + ], + "expected": { + "className": "border-top-style_aaa" + }, + "expectTypeError": true + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > nested condition prop with array syntax::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > nested condition prop with array syntax", + "line": 169 + }, + "inputs": [ + { + "_hover": { + "_dark": { + "bg": [ + "pink.100", + "pink.200" + ] + } + } + } + ], + "expected": { + "className": "hover:dark:bg_pink.100 hover:dark:sm:bg_pink.200" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > nested condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > nested condition prop", + "line": 61 + }, + "inputs": [ + { + "_hover": { + "_dark": { + "bg": "pink" + } + } + } + ], + "expected": { + "className": "hover:dark:bg_pink" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > object condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > object condition prop", + "line": 52 + }, + "inputs": [ + { + "bg": { + "_hover": "yellow.100" + } + } + ], + "expected": { + "className": "hover:bg_yellow.100" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > responsive array syntax prop::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > responsive array syntax prop", + "line": 150 + }, + "inputs": [ + { + "bg": [ + "cyan.100", + "cyan.200", + null, + null, + "cyan.300" + ] + } + ], + "expected": { + "className": "bg_cyan.100 sm:bg_cyan.200 xl:bg_cyan.300" + }, + "undefinedValues": true + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > responsive condition::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > responsive condition", + "line": 140 + }, + "inputs": [ + { + "sm": { + "bg": "purple" + } + } + ], + "expected": { + "className": "sm:bg_purple" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > shorthand prop::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > shorthand prop", + "line": 44 + }, + "inputs": [ + { + "backgroundColor": "red", + "bg": "red" + } + ], + "expected": { + "className": "bg-c_red bg_red" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > token value::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > token value", + "line": 26 + }, + "inputs": [ + { + "color": "blue.300" + } + ], + "expected": { + "className": "c_blue.300" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > using inline token helper - in condition::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > using inline token helper - in condition", + "line": 165 + }, + "inputs": [ + { + "@media screen and (min-width: token(sizes.4xl))": { + "bg": "blue.500" + } + } + ], + "expected": { + "className": "[@media_screen_and_(min-width:_token(sizes.4xl))]:bg_blue.500" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > using inline token helper - in value::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > using inline token helper - in value", + "line": 158 + }, + "inputs": [ + { + "border": "1px solid token(colors.blue.400)" + } + ], + "expected": { + "className": "bd_1px_solid_token(colors.blue.400)" + } + }, + { + "id": "strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > utility prop::1", + "kind": "codegen-css", + "config": "codegen-strict-property-values", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts", + "test": "css > utility prop", + "line": 36 + }, + "inputs": [ + { + "srOnly": true + } + ], + "expected": { + "className": "sr_true" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict-tokens.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict-tokens.test.ts.json new file mode 100644 index 00000000000..6aba2666a42 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict-tokens.test.ts.json @@ -0,0 +1,543 @@ +{ + "source": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "cases": [ + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > arbitrary selector::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > arbitrary selector", + "line": 113 + }, + "inputs": [ + { + "&:data-panda": { + "display": "flex" + } + } + ], + "expected": { + "className": "[&:data-panda]:d_flex" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > arbitrary value escape hatch with conditionals::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > arbitrary value escape hatch with conditionals", + "line": 92 + }, + "inputs": [ + { + "color": "[#fff]", + "fontSize": "[123px]", + "bgColor": "[#fff!]", + "borderColor": "[#fff !important]", + "_hover": { + "color": "[#fff]", + "fontSize": "[123px]", + "bgColor": "[#fff!]", + "borderColor": "[#fff !important]" + }, + "backgroundColor": { + "_dark": "[#3B00B9]", + "_hover": "[#3B00B9!]", + "_focus": "[#3B00B9 !important]" + } + } + ], + "expected": { + "className": "c_[#fff] fs_[123px] dark:bg-c_[#3B00B9] hover:bg-c_[#3B00B9]! focus:bg-c_[#3B00B9]! bd-c_[#fff]! hover:c_[#fff] hover:fs_[123px] hover:bg-c_[#fff]! hover:bd-c_[#fff]!" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > arbitrary value escape hatch::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > arbitrary value escape hatch", + "line": 83 + }, + "inputs": [ + { + "color": "[#fff]", + "fontSize": "[123px]" + } + ], + "expected": { + "className": "c_[#fff] fs_[123px]" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > arbitrary value::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > arbitrary value", + "line": 74 + }, + "inputs": [ + { + "color": "#fff" + } + ], + "expected": { + "className": "c_#fff" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > color opacity modifier::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > color opacity modifier", + "line": 26 + }, + "inputs": [ + { + "color": "blue.300/40" + } + ], + "expected": { + "className": "c_blue.300/40" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > color opacity modifier::2", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > color opacity modifier", + "line": 29 + }, + "inputs": [ + { + "fontSize": "2xl/2" + } + ], + "expected": { + "className": "fs_2xl/2" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > condition prop", + "line": 56 + }, + "inputs": [ + { + "_hover": { + "bg": "yellow.200" + } + } + ], + "expected": { + "className": "hover:bg_yellow.200" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > important::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > important", + "line": 118 + }, + "inputs": [ + { + "fontSize": "2xl!", + "p": "4 !important", + "bgColor": "#fff!", + "bg": "#fff!", + "borderColor": "#fff !important", + "_hover": { + "fontSize": "3xl", + "p": "4 !important", + "bgColor": "#fff!", + "borderColor": "#fff !important" + }, + "backgroundColor": { + "_disabled": "2xl!", + "_active": "4 !important", + "_hover": "#3B00B9!", + "_focus": "#3B00B9 !important" + } + } + ], + "expected": { + "className": "fs_2xl! p_4! disabled:bg-c_2xl! active:bg-c_4! hover:bg-c_#3B00B9! focus:bg-c_#3B00B9! bg_#fff! bd-c_#fff! hover:fs_3xl hover:p_4! hover:bg-c_#fff! hover:bd-c_#fff!" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > native CSS prop and value", + "line": 6 + }, + "inputs": [ + { + "display": "flex" + } + ], + "expected": { + "className": "d_flex" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::2", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > native CSS prop and value", + "line": 8 + }, + "inputs": [ + { + "display": "abc" + } + ], + "expected": { + "className": "d_abc" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::3", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > native CSS prop and value", + "line": 9 + }, + "inputs": [ + { + "content": "abc" + } + ], + "expected": { + "className": "content_abc" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::4", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > native CSS prop and value", + "line": 10 + }, + "inputs": [ + { + "willChange": "abc" + } + ], + "expected": { + "className": "will-change_abc" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::5", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > native CSS prop and value", + "line": 12 + }, + "inputs": [ + { + "pos": "absolute" + } + ], + "expected": { + "className": "pos_absolute" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::6", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > native CSS prop and value", + "line": 14 + }, + "inputs": [ + { + "pos": "absolute123" + } + ], + "expected": { + "className": "pos_absolute123" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::7", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > native CSS prop and value", + "line": 16 + }, + "inputs": [ + { + "position": "absolute123" + } + ], + "expected": { + "className": "pos_absolute123" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::8", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > native CSS prop and value", + "line": 18 + }, + "inputs": [ + { + "flex": "0 1" + } + ], + "expected": { + "className": "flex_0_1" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > nested condition prop with array syntax::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > nested condition prop with array syntax", + "line": 187 + }, + "inputs": [ + { + "_hover": { + "_dark": { + "bg": [ + "pink.100", + "pink.200" + ] + } + } + } + ], + "expected": { + "className": "hover:dark:bg_pink.100 hover:dark:sm:bg_pink.200" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > nested condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > nested condition prop", + "line": 61 + }, + "inputs": [ + { + "_hover": { + "_dark": { + "bg": "pink" + } + } + } + ], + "expected": { + "className": "hover:dark:bg_pink" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > object condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > object condition prop", + "line": 52 + }, + "inputs": [ + { + "bg": { + "_hover": "yellow.100" + } + } + ], + "expected": { + "className": "hover:bg_yellow.100" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > responsive array syntax prop::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > responsive array syntax prop", + "line": 160 + }, + "inputs": [ + { + "bg": [ + "cyan.100", + "cyan.200", + null, + null, + "cyan.300" + ] + } + ], + "expected": { + "className": "bg_cyan.100 sm:bg_cyan.200 xl:bg_cyan.300" + }, + "expectTypeError": true, + "undefinedValues": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > responsive condition::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > responsive condition", + "line": 149 + }, + "inputs": [ + { + "sm": { + "bg": "purple" + } + } + ], + "expected": { + "className": "sm:bg_purple" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > shorthand prop::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > shorthand prop", + "line": 42 + }, + "inputs": [ + { + "backgroundColor": "teal", + "bg": "red" + } + ], + "expected": { + "className": "bg-c_teal bg_red" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > token value::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > token value", + "line": 22 + }, + "inputs": [ + { + "color": "blue.300" + } + ], + "expected": { + "className": "c_blue.300" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > using inline token helper - in condition::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > using inline token helper - in condition", + "line": 183 + }, + "inputs": [ + { + "@media screen and (min-width: token(sizes.4xl))": { + "bg": "blue.500" + } + } + ], + "expected": { + "className": "[@media_screen_and_(min-width:_token(sizes.4xl))]:bg_blue.500" + } + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > using inline token helper - in value::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > using inline token helper - in value", + "line": 175 + }, + "inputs": [ + { + "border": "1px solid token(colors.blue.400)" + } + ], + "expected": { + "className": "bd_1px_solid_token(colors.blue.400)" + }, + "expectTypeError": true + }, + { + "id": "strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > utility prop::1", + "kind": "codegen-css", + "config": "codegen-strict-tokens", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts", + "test": "css > utility prop", + "line": 34 + }, + "inputs": [ + { + "srOnly": true + } + ], + "expected": { + "className": "sr_true" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict.test.ts.json new file mode 100644 index 00000000000..3749002b843 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.scenarios.strict.test.ts.json @@ -0,0 +1,543 @@ +{ + "source": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "cases": [ + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > arbitrary selector::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > arbitrary selector", + "line": 113 + }, + "inputs": [ + { + "&:data-panda": { + "display": "flex" + } + } + ], + "expected": { + "className": "[&:data-panda]:d_flex" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > arbitrary value escape hatch with conditionals::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > arbitrary value escape hatch with conditionals", + "line": 92 + }, + "inputs": [ + { + "color": "[#fff]", + "fontSize": "[123px]", + "bgColor": "[#fff!]", + "borderColor": "[#fff !important]", + "_hover": { + "color": "[#fff]", + "fontSize": "[123px]", + "bgColor": "[#fff!]", + "borderColor": "[#fff !important]" + }, + "backgroundColor": { + "_dark": "[#3B00B9]", + "_hover": "[#3B00B9!]", + "_focus": "[#3B00B9 !important]" + } + } + ], + "expected": { + "className": "c_[#fff] fs_[123px] dark:bg-c_[#3B00B9] hover:bg-c_[#3B00B9]! focus:bg-c_[#3B00B9]! bd-c_[#fff]! hover:c_[#fff] hover:fs_[123px] hover:bg-c_[#fff]! hover:bd-c_[#fff]!" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > arbitrary value escape hatch::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > arbitrary value escape hatch", + "line": 83 + }, + "inputs": [ + { + "color": "[#fff]", + "fontSize": "[123px]" + } + ], + "expected": { + "className": "c_[#fff] fs_[123px]" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > arbitrary value::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > arbitrary value", + "line": 74 + }, + "inputs": [ + { + "color": "#fff" + } + ], + "expected": { + "className": "c_#fff" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > condition prop", + "line": 56 + }, + "inputs": [ + { + "_hover": { + "bg": "yellow.200" + } + } + ], + "expected": { + "className": "hover:bg_yellow.200" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > css var::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > css var", + "line": 28 + }, + "inputs": [ + { + "color": "var(--button-color)" + } + ], + "expected": { + "className": "c_var(--button-color)" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > css var::2", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > css var", + "line": 29 + }, + "inputs": [ + { + "display": "var(--button-color)" + } + ], + "expected": { + "className": "d_var(--button-color)" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > important::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > important", + "line": 118 + }, + "inputs": [ + { + "fontSize": "2xl !important", + "p": "4 !important", + "bgColor": "#fff!", + "borderColor": "#fff !important", + "_hover": { + "fontSize": "2xl !important", + "p": "4 !important", + "bgColor": "#fff!", + "borderColor": "#fff !important" + }, + "backgroundColor": { + "_disabled": "2xl!", + "_active": "4 !important", + "_hover": "#3B00B9!", + "_focus": "#3B00B9 !important" + } + } + ], + "expected": { + "className": "fs_2xl! p_4! disabled:bg-c_2xl! active:bg-c_4! hover:bg-c_#3B00B9! focus:bg-c_#3B00B9! bd-c_#fff! hover:fs_2xl! hover:p_4! hover:bg-c_#fff! hover:bd-c_#fff!" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > native CSS prop and value", + "line": 6 + }, + "inputs": [ + { + "display": "flex" + } + ], + "expected": { + "className": "d_flex" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::2", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > native CSS prop and value", + "line": 9 + }, + "inputs": [ + { + "display": "abc" + } + ], + "expected": { + "className": "d_abc" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::3", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > native CSS prop and value", + "line": 10 + }, + "inputs": [ + { + "content": "abc" + } + ], + "expected": { + "className": "content_abc" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::4", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > native CSS prop and value", + "line": 11 + }, + "inputs": [ + { + "willChange": "abc" + } + ], + "expected": { + "className": "will-change_abc" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::5", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > native CSS prop and value", + "line": 13 + }, + "inputs": [ + { + "pos": "absolute" + } + ], + "expected": { + "className": "pos_absolute" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::6", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > native CSS prop and value", + "line": 16 + }, + "inputs": [ + { + "position": "absolute123" + } + ], + "expected": { + "className": "pos_absolute123" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::7", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > native CSS prop and value", + "line": 18 + }, + "inputs": [ + { + "pos": "absolute123" + } + ], + "expected": { + "className": "pos_absolute123" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::8", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > native CSS prop and value", + "line": 20 + }, + "inputs": [ + { + "flex": "0 1" + } + ], + "expected": { + "className": "flex_0_1" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > nested condition prop with array syntax::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > nested condition prop with array syntax", + "line": 185 + }, + "inputs": [ + { + "_hover": { + "_dark": { + "bg": [ + "pink.100", + "pink.200" + ] + } + } + } + ], + "expected": { + "className": "hover:dark:bg_pink.100 hover:dark:sm:bg_pink.200" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > nested condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > nested condition prop", + "line": 61 + }, + "inputs": [ + { + "_hover": { + "_dark": { + "bg": "pink" + } + } + } + ], + "expected": { + "className": "hover:dark:bg_pink" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > object condition prop::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > object condition prop", + "line": 52 + }, + "inputs": [ + { + "bg": { + "_hover": "yellow.100" + } + } + ], + "expected": { + "className": "hover:bg_yellow.100" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > responsive array syntax prop::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > responsive array syntax prop", + "line": 158 + }, + "inputs": [ + { + "bg": [ + "cyan.100", + "cyan.200", + null, + null, + "cyan.300" + ] + } + ], + "expected": { + "className": "bg_cyan.100 sm:bg_cyan.200 xl:bg_cyan.300" + }, + "expectTypeError": true, + "undefinedValues": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > responsive condition::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > responsive condition", + "line": 147 + }, + "inputs": [ + { + "sm": { + "bg": "purple" + } + } + ], + "expected": { + "className": "sm:bg_purple" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > shorthand prop::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > shorthand prop", + "line": 42 + }, + "inputs": [ + { + "backgroundColor": "red", + "bg": "red" + } + ], + "expected": { + "className": "bg-c_red bg_red" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > token value::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > token value", + "line": 24 + }, + "inputs": [ + { + "color": "blue.300" + } + ], + "expected": { + "className": "c_blue.300" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > using inline token helper - in condition::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > using inline token helper - in condition", + "line": 181 + }, + "inputs": [ + { + "@media screen and (min-width: token(sizes.4xl))": { + "bg": "blue.500" + } + } + ], + "expected": { + "className": "[@media_screen_and_(min-width:_token(sizes.4xl))]:bg_blue.500" + } + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > using inline token helper - in value::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > using inline token helper - in value", + "line": 173 + }, + "inputs": [ + { + "border": "1px solid token(colors.blue.400)" + } + ], + "expected": { + "className": "bd_1px_solid_token(colors.blue.400)" + }, + "expectTypeError": true + }, + { + "id": "strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > utility prop::1", + "kind": "codegen-css", + "config": "codegen-strict", + "source": { + "file": "sandbox/codegen/__tests__/scenarios/strict.test.ts", + "test": "css > utility prop", + "line": 34 + }, + "inputs": [ + { + "srOnly": true + } + ], + "expected": { + "className": "sr_true" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.slot-recipe.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.slot-recipe.test.ts.json new file mode 100644 index 00000000000..2ad1d4be75f --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.slot-recipe.test.ts.json @@ -0,0 +1,101 @@ +{ + "source": "sandbox/codegen/__tests__/slot-recipe.test.ts", + "cases": [ + { + "id": "react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > base styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/slot-recipe.test.ts", + "test": "sva > base styles", + "line": 6 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > base styles::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/slot-recipe.test.ts", + "test": "sva > base styles", + "line": 6 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > outline variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/slot-recipe.test.ts", + "test": "sva > outline variant styles", + "line": 30 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > outline variant styles::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/slot-recipe.test.ts", + "test": "sva > outline variant styles", + "line": 30 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > solid variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/slot-recipe.test.ts", + "test": "sva > solid variant styles", + "line": 17 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + }, + { + "id": "react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > solid variant styles::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/slot-recipe.test.ts", + "test": "sva > solid variant styles", + "line": 17 + }, + "inputs": [ + {} + ], + "expected": { + "className": "" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.styled-factory.test.tsx.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.styled-factory.test.tsx.json new file mode 100644 index 00000000000..7af6f935c51 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.styled-factory.test.tsx.json @@ -0,0 +1,590 @@ +{ + "source": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "cases": [ + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > *Css prop aliases on compound component::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > *Css prop aliases on compound component", + "line": null + }, + "inputs": [ + {}, + {}, + { + "display": "flex" + } + ], + "expected": { + "className": "d_flex" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > *Css prop aliases on compound component::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > *Css prop aliases on compound component", + "line": null + }, + "inputs": [ + {}, + {}, + { + "color": "red.200" + } + ], + "expected": { + "className": "c_red.200" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > all together::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > all together", + "line": null + }, + "inputs": [ + { + "color": "green" + }, + { + "mx": "2" + }, + { + "color": "red.200", + "fontSize": "xl" + } + ], + "expected": { + "className": "c_red.200 mx_2 fs_xl" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > array css prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > array css prop", + "line": null + }, + "inputs": [ + {}, + {}, + [ + { + "color": "blue.300", + "backgroundColor": "yellow.300" + }, + { + "backgroundColor": "green.300" + } + ] + ], + "expected": { + "className": "c_blue.300 bg-c_green.300" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > base styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > base styles", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > box pattern::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > box pattern", + "line": null + }, + "inputs": [ + {}, + { + "color": "red.300" + }, + null + ], + "expected": { + "className": "c_red.300" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > compound variants::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > compound variants", + "line": null + }, + "inputs": [ + { + "color": "blue" + }, + {}, + null + ], + "expected": { + "className": "c_blue" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > css prop with variant::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > css prop with variant", + "line": null + }, + "inputs": [ + {}, + {}, + { + "color": "red.100", + "fontSize": "md" + } + ], + "expected": { + "className": "c_red.100 fs_md" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > css prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > css prop", + "line": null + }, + "inputs": [ + {}, + {}, + { + "color": "red.100", + "fontSize": "md" + } + ], + "expected": { + "className": "c_red.100 fs_md" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > custom className::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > custom className", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > html props::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > html props", + "line": null + }, + "inputs": [ + {}, + { + "height": "123" + }, + null + ], + "expected": { + "className": "h_123" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > stack pattern::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > stack pattern", + "line": null + }, + "inputs": [ + {}, + { + "display": "flex", + "flexDirection": "column", + "gap": "8px", + "color": "red.400" + }, + null + ], + "expected": { + "className": "d_flex flex-d_column gap_8px c_red.400" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > style prop with variant::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > style prop with variant", + "line": null + }, + "inputs": [ + {}, + { + "mx": "2" + }, + null + ], + "expected": { + "className": "mx_2" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > style prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > style prop", + "line": null + }, + "inputs": [ + {}, + { + "mx": "2" + }, + null + ], + "expected": { + "className": "mx_2" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - button recipe > variant styles", + "line": null + }, + "inputs": [ + {}, + {}, + null + ], + "expected": { + "className": "" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > all together::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > all together", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "background": "blue.500", + "_hover": { + "color": "red.600", + "background": "blue.600" + }, + "fontSize": "lg", + "paddingInline": "123px", + "paddingBlock": "md", + "zIndex": 1 + }, + { + "mx": "2" + }, + { + "color": "red.200", + "fontSize": "xl" + } + ], + "expected": { + "className": "c_red.200 bg_blue.500 hover:c_red.600 hover:bg_blue.600 fs_xl px_123px py_md z_1 mx_2" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > base styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > base styles", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "bg": "blue.500", + "_hover": { + "color": "red.600", + "bg": "blue.600" + } + }, + {}, + null + ], + "expected": { + "className": "c_red.500 bg_blue.500 hover:c_red.600 hover:bg_blue.600" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > compound variants::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > compound variants", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "background": "blue.500", + "_hover": { + "color": "red.600", + "background": "blue.600" + }, + "fontSize": "lg", + "paddingInline": "123px", + "paddingBlock": "md", + "zIndex": 1 + }, + {}, + null + ], + "expected": { + "className": "c_red.500 bg_blue.500 hover:c_red.600 hover:bg_blue.600 fs_lg px_123px py_md z_1" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > css prop with variant::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > css prop with variant", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "background": "blue.500", + "_hover": { + "color": "red.600", + "background": "blue.600" + }, + "fontSize": "sm", + "paddingInline": "sm", + "paddingBlock": "xs" + }, + {}, + { + "color": "red.100", + "fontSize": "md" + } + ], + "expected": { + "className": "c_red.100 bg_blue.500 hover:c_red.600 hover:bg_blue.600 fs_md px_sm py_xs" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > css prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > css prop", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "bg": "blue.500", + "_hover": { + "color": "red.600", + "bg": "blue.600" + } + }, + {}, + { + "color": "red.100", + "fontSize": "md" + } + ], + "expected": { + "className": "c_red.100 bg_blue.500 hover:c_red.600 hover:bg_blue.600 fs_md" + } + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > custom className::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > custom className", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "background": "blue.500", + "_hover": { + "color": "red.600", + "background": "blue.600" + }, + "fontSize": "sm", + "paddingInline": "sm", + "paddingBlock": "xs" + }, + {}, + null + ], + "expected": { + "className": "c_red.500 bg_blue.500 hover:c_red.600 hover:bg_blue.600 fs_sm px_sm py_xs" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > style prop with variant::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > style prop with variant", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "background": "blue.500", + "_hover": { + "color": "red.600", + "background": "blue.600" + }, + "fontSize": "sm", + "paddingInline": "sm", + "paddingBlock": "xs" + }, + { + "mx": "2" + }, + null + ], + "expected": { + "className": "c_red.500 bg_blue.500 hover:c_red.600 hover:bg_blue.600 fs_sm px_sm py_xs mx_2" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > style prop::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > style prop", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "bg": "blue.500", + "_hover": { + "color": "red.600", + "bg": "blue.600" + } + }, + { + "mx": "2" + }, + null + ], + "expected": { + "className": "c_red.500 bg_blue.500 hover:c_red.600 hover:bg_blue.600 mx_2" + }, + "undefinedValues": true + }, + { + "id": "react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/styled-factory.test.tsx", + "test": "styled factory - cva > variant styles", + "line": null + }, + "inputs": [ + { + "color": "red.500", + "background": "blue.500", + "_hover": { + "color": "red.600", + "background": "blue.600" + }, + "fontSize": "sm", + "paddingInline": "sm", + "paddingBlock": "xs" + }, + {}, + null + ], + "expected": { + "className": "c_red.500 bg_blue.500 hover:c_red.600 hover:bg_blue.600 fs_sm px_sm py_xs" + }, + "undefinedValues": true + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.sva.test.ts.json b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.sva.test.ts.json new file mode 100644 index 00000000000..21836fe3a14 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/cases/sandbox.codegen.__tests__.sva.test.ts.json @@ -0,0 +1,138 @@ +{ + "source": "sandbox/codegen/__tests__/sva.test.ts", + "cases": [ + { + "id": "react::sandbox/codegen/__tests__/sva.test.ts::sva > base styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/sva.test.ts", + "test": "sva > base styles", + "line": null + }, + "inputs": [ + { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + } + ], + "expected": { + "className": "bdr_md fw_semibold h_10 px_4" + } + }, + { + "id": "react::sandbox/codegen/__tests__/sva.test.ts::sva > base styles::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/sva.test.ts", + "test": "sva > base styles", + "line": null + }, + "inputs": [ + { + "fontSize": "2xl" + } + ], + "expected": { + "className": "fs_2xl" + } + }, + { + "id": "react::sandbox/codegen/__tests__/sva.test.ts::sva > outline variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/sva.test.ts", + "test": "sva > outline variant styles", + "line": null + }, + "inputs": [ + { + "borderRadius": "md", + "fontWeight": "semibold", + "height": "10", + "paddingInline": "4", + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + } + ], + "expected": { + "className": "bdr_md fw_semibold h_10 px_4 bd_1px_solid c_colorPalette.600 dark:c_colorPalette.200 bd-c_currentColor" + } + }, + { + "id": "react::sandbox/codegen/__tests__/sva.test.ts::sva > outline variant styles::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/sva.test.ts", + "test": "sva > outline variant styles", + "line": null + }, + "inputs": [ + { + "fontSize": "2xl", + "border": "1px solid" + } + ], + "expected": { + "className": "fs_2xl bd_1px_solid" + } + }, + { + "id": "react::sandbox/codegen/__tests__/sva.test.ts::sva > solid variant styles::1", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/sva.test.ts", + "test": "sva > solid variant styles", + "line": null + }, + "inputs": [ + { + "borderRadius": "md", + "fontWeight": "semibold", + "height": "10", + "paddingInline": "4", + "background": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + } + ], + "expected": { + "className": "bdr_md fw_semibold h_10 px_4 bg_colorPalette.500 dark:bg_colorPalette.300 c_white dark:c_gray.800" + } + }, + { + "id": "react::sandbox/codegen/__tests__/sva.test.ts::sva > solid variant styles::2", + "kind": "codegen-css", + "config": "codegen-react", + "source": { + "file": "sandbox/codegen/__tests__/sva.test.ts", + "test": "sva > solid variant styles", + "line": null + }, + "inputs": [ + { + "fontSize": "2xl", + "color": "white" + } + ], + "expected": { + "className": "fs_2xl c_white" + } + } + ] +} diff --git a/src/Css/tests/Fixtures/Panda/configs/codegen-format-names.json b/src/Css/tests/Fixtures/Panda/configs/codegen-format-names.json new file mode 100644 index 00000000000..b3848e9c4f8 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/configs/codegen-format-names.json @@ -0,0 +1,4628 @@ +{ + "conditions": { + "hover": "&:is(:hover, [data-hover])", + "focus": "&:is(:focus, [data-focus])", + "focusWithin": "&:focus-within", + "focusVisible": "&:is(:focus-visible, [data-focus-visible])", + "disabled": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])", + "active": "&:is(:active, [data-active])", + "visited": "&:visited", + "target": "&:target", + "readOnly": "&:is(:read-only, [data-read-only], [aria-readonly=true])", + "readWrite": "&:read-write", + "empty": "&:is(:empty, [data-empty])", + "checked": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])", + "enabled": "&:enabled", + "expanded": "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])", + "highlighted": "&[data-highlighted]", + "complete": "&[data-complete]", + "incomplete": "&[data-incomplete]", + "dragging": "&[data-dragging]", + "before": "&::before", + "after": "&::after", + "firstLetter": "&::first-letter", + "firstLine": "&::first-line", + "marker": "&::marker, &::-webkit-details-marker", + "selection": "&::selection", + "file": "&::file-selector-button", + "backdrop": "&::backdrop", + "first": "&:first-child", + "last": "&:last-child", + "only": "&:only-child", + "even": "&:nth-child(even)", + "odd": "&:nth-child(odd)", + "firstOfType": "&:first-of-type", + "lastOfType": "&:last-of-type", + "onlyOfType": "&:only-of-type", + "peerFocus": ".peer:is(:focus, [data-focus]) ~ &", + "peerHover": ".peer:is(:hover, [data-hover]) ~ &", + "peerActive": ".peer:is(:active, [data-active]) ~ &", + "peerFocusWithin": ".peer:focus-within ~ &", + "peerFocusVisible": ".peer:is(:focus-visible, [data-focus-visible]) ~ &", + "peerDisabled": ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &", + "peerChecked": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &", + "peerInvalid": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &", + "peerExpanded": ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &", + "peerPlaceholderShown": ".peer:placeholder-shown ~ &", + "groupFocus": ".group:is(:focus, [data-focus]) &", + "groupHover": ".group:is(:hover, [data-hover]) &", + "groupActive": ".group:is(:active, [data-active]) &", + "groupFocusWithin": ".group:focus-within &", + "groupFocusVisible": ".group:is(:focus-visible, [data-focus-visible]) &", + "groupDisabled": ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &", + "groupChecked": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &", + "groupExpanded": ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &", + "groupInvalid": ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &", + "indeterminate": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])", + "required": "&:is(:required, [data-required], [aria-required=true])", + "valid": "&:is(:valid, [data-valid])", + "invalid": "&:is(:invalid, [data-invalid], [aria-invalid=true])", + "autofill": "&:autofill", + "inRange": "&:is(:in-range, [data-in-range])", + "outOfRange": "&:is(:out-of-range, [data-outside-range])", + "placeholder": "&::placeholder, &[data-placeholder]", + "placeholderShown": "&:is(:placeholder-shown, [data-placeholder-shown])", + "pressed": "&:is([aria-pressed=true], [data-pressed])", + "selected": "&:is([aria-selected=true], [data-selected])", + "grabbed": "&:is([aria-grabbed=true], [data-grabbed])", + "underValue": "&[data-state=under-value]", + "overValue": "&[data-state=over-value]", + "atValue": "&[data-state=at-value]", + "default": "&:default", + "optional": "&:optional", + "open": "&:is([open], [data-open], [data-state=\"open\"], :popover-open)", + "closed": "&:is([closed], [data-closed], [data-state=\"closed\"])", + "fullscreen": "&:is(:fullscreen, [data-fullscreen])", + "loading": "&:is([data-loading], [aria-busy=true])", + "hidden": "&:is([hidden], [data-hidden])", + "current": "&:is([aria-current=true], [data-current])", + "currentPage": "&[aria-current=page]", + "currentStep": "&[aria-current=step]", + "today": "&[data-today]", + "unavailable": "&[data-unavailable]", + "rangeStart": "&[data-range-start]", + "rangeEnd": "&[data-range-end]", + "now": "&[data-now]", + "topmost": "&[data-topmost]", + "motionReduce": "@media (prefers-reduced-motion: reduce)", + "motionSafe": "@media (prefers-reduced-motion: no-preference)", + "print": "@media print", + "landscape": "@media (orientation: landscape)", + "portrait": "@media (orientation: portrait)", + "dark": ".dark &", + "light": ".light &", + "osDark": "@media (prefers-color-scheme: dark)", + "osLight": "@media (prefers-color-scheme: light)", + "highContrast": "@media (forced-colors: active)", + "lessContrast": "@media (prefers-contrast: less)", + "moreContrast": "@media (prefers-contrast: more)", + "ltr": ":where([dir=ltr], :dir(ltr)) &", + "rtl": ":where([dir=rtl], :dir(rtl)) &", + "scrollbar": "&::-webkit-scrollbar", + "scrollbarThumb": "&::-webkit-scrollbar-thumb", + "scrollbarTrack": "&::-webkit-scrollbar-track", + "horizontal": "&[data-orientation=horizontal]", + "vertical": "&[data-orientation=vertical]", + "icon": "& :where(svg)", + "starting": "@starting-style", + "noscript": "@media (scripting: none)", + "invertedColors": "@media (inverted-colors: inverted)" + }, + "theme": { + "keyframes": { + "spin": { + "to": { + "transform": "rotate(360deg)" + } + }, + "ping": { + "75%, 100%": { + "transform": "scale(2)", + "opacity": "0" + } + }, + "pulse": { + "50%": { + "opacity": ".5" + } + }, + "bounce": { + "0%, 100%": { + "transform": "translateY(-25%)", + "animationTimingFunction": "cubic-bezier(0.8,0,1,1)" + }, + "50%": { + "transform": "none", + "animationTimingFunction": "cubic-bezier(0,0,0.2,1)" + } + } + }, + "breakpoints": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + }, + "tokens": { + "aspectRatios": { + "square": { + "value": "1 / 1" + }, + "landscape": { + "value": "4 / 3" + }, + "portrait": { + "value": "3 / 4" + }, + "wide": { + "value": "16 / 9" + }, + "ultrawide": { + "value": "18 / 5" + }, + "golden": { + "value": "1.618 / 1" + } + }, + "borders": { + "none": { + "value": "none" + } + }, + "easings": { + "default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + }, + "linear": { + "value": "linear" + }, + "in": { + "value": "cubic-bezier(0.4, 0, 1, 1)" + }, + "out": { + "value": "cubic-bezier(0, 0, 0.2, 1)" + }, + "in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + } + }, + "durations": { + "fastest": { + "value": "50ms" + }, + "faster": { + "value": "100ms" + }, + "fast": { + "value": "150ms" + }, + "normal": { + "value": "200ms" + }, + "slow": { + "value": "300ms" + }, + "slower": { + "value": "400ms" + }, + "slowest": { + "value": "500ms" + } + }, + "radii": { + "xs": { + "value": "0.125rem" + }, + "sm": { + "value": "0.25rem" + }, + "md": { + "value": "0.375rem" + }, + "lg": { + "value": "0.5rem" + }, + "xl": { + "value": "0.75rem" + }, + "2xl": { + "value": "1rem" + }, + "3xl": { + "value": "1.5rem" + }, + "4xl": { + "value": "2rem" + }, + "full": { + "value": "9999px" + } + }, + "fontWeights": { + "thin": { + "value": "100" + }, + "extralight": { + "value": "200" + }, + "light": { + "value": "300" + }, + "normal": { + "value": "400" + }, + "medium": { + "value": "500" + }, + "semibold": { + "value": "600" + }, + "bold": { + "value": "700" + }, + "extrabold": { + "value": "800" + }, + "black": { + "value": "900" + } + }, + "lineHeights": { + "none": { + "value": "1" + }, + "tight": { + "value": "1.25" + }, + "snug": { + "value": "1.375" + }, + "normal": { + "value": "1.5" + }, + "relaxed": { + "value": "1.625" + }, + "loose": { + "value": "2" + } + }, + "fonts": { + "sans": { + "value": [ + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "\"Segoe UI\"", + "Roboto", + "\"Helvetica Neue\"", + "Arial", + "\"Noto Sans\"", + "sans-serif", + "\"Apple Color Emoji\"", + "\"Segoe UI Emoji\"", + "\"Segoe UI Symbol\"", + "\"Noto Color Emoji\"" + ] + }, + "serif": { + "value": [ + "ui-serif", + "Georgia", + "Cambria", + "\"Times New Roman\"", + "Times", + "serif" + ] + }, + "mono": { + "value": [ + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "\"Liberation Mono\"", + "\"Courier New\"", + "monospace" + ] + } + }, + "letterSpacings": { + "tighter": { + "value": "-0.05em" + }, + "tight": { + "value": "-0.025em" + }, + "normal": { + "value": "0em" + }, + "wide": { + "value": "0.025em" + }, + "wider": { + "value": "0.05em" + }, + "widest": { + "value": "0.1em" + } + }, + "fontSizes": { + "2xs": { + "value": "0.5rem" + }, + "xs": { + "value": "0.75rem" + }, + "sm": { + "value": "0.875rem" + }, + "md": { + "value": "1rem" + }, + "lg": { + "value": "1.125rem" + }, + "xl": { + "value": "1.25rem" + }, + "2xl": { + "value": "1.5rem" + }, + "3xl": { + "value": "1.875rem" + }, + "4xl": { + "value": "2.25rem" + }, + "5xl": { + "value": "3rem" + }, + "6xl": { + "value": "3.75rem" + }, + "7xl": { + "value": "4.5rem" + }, + "8xl": { + "value": "6rem" + }, + "9xl": { + "value": "8rem" + } + }, + "shadows": { + "2xs": { + "value": "0 1px rgb(0 0 0 / 0.05)" + }, + "xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" + }, + "sm": { + "value": [ + "0 1px 3px 0 rgb(0 0 0 / 0.1)", + "0 1px 2px -1px rgb(0 0 0 / 0.1)" + ] + }, + "md": { + "value": [ + "0 4px 6px -1px rgb(0 0 0 / 0.1)", + "0 2px 4px -2px rgb(0 0 0 / 0.1)" + ] + }, + "lg": { + "value": [ + "0 10px 15px -3px rgb(0 0 0 / 0.1)", + "0 4px 6px -4px rgb(0 0 0 / 0.1)" + ] + }, + "xl": { + "value": [ + "0 20px 25px -5px rgb(0 0 0 / 0.1)", + "0 8px 10px -6px rgb(0 0 0 / 0.1)" + ] + }, + "2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)" + }, + "inset-2xs": { + "value": "inset 0 1px rgb(0 0 0 / 0.05)" + }, + "inset-xs": { + "value": "inset 0 1px 1px rgb(0 0 0 / 0.05)" + }, + "inset-sm": { + "value": "inset 0 2px 4px rgb(0 0 0 / 0.05)" + } + }, + "colors": { + "current": { + "value": "currentColor" + }, + "black": { + "value": "#000" + }, + "white": { + "value": "#fff" + }, + "transparent": { + "value": "rgb(0 0 0 / 0)" + }, + "rose": { + "50": { + "value": "#fff1f2" + }, + "100": { + "value": "#ffe4e6" + }, + "200": { + "value": "#fecdd3" + }, + "300": { + "value": "#fda4af" + }, + "400": { + "value": "#fb7185" + }, + "500": { + "value": "#f43f5e" + }, + "600": { + "value": "#e11d48" + }, + "700": { + "value": "#be123c" + }, + "800": { + "value": "#9f1239" + }, + "900": { + "value": "#881337" + }, + "950": { + "value": "#4c0519" + } + }, + "pink": { + "50": { + "value": "#fdf2f8" + }, + "100": { + "value": "#fce7f3" + }, + "200": { + "value": "#fbcfe8" + }, + "300": { + "value": "#f9a8d4" + }, + "400": { + "value": "#f472b6" + }, + "500": { + "value": "#ec4899" + }, + "600": { + "value": "#db2777" + }, + "700": { + "value": "#be185d" + }, + "800": { + "value": "#9d174d" + }, + "900": { + "value": "#831843" + }, + "950": { + "value": "#500724" + } + }, + "fuchsia": { + "50": { + "value": "#fdf4ff" + }, + "100": { + "value": "#fae8ff" + }, + "200": { + "value": "#f5d0fe" + }, + "300": { + "value": "#f0abfc" + }, + "400": { + "value": "#e879f9" + }, + "500": { + "value": "#d946ef" + }, + "600": { + "value": "#c026d3" + }, + "700": { + "value": "#a21caf" + }, + "800": { + "value": "#86198f" + }, + "900": { + "value": "#701a75" + }, + "950": { + "value": "#4a044e" + } + }, + "purple": { + "50": { + "value": "#faf5ff" + }, + "100": { + "value": "#f3e8ff" + }, + "200": { + "value": "#e9d5ff" + }, + "300": { + "value": "#d8b4fe" + }, + "400": { + "value": "#c084fc" + }, + "500": { + "value": "#a855f7" + }, + "600": { + "value": "#9333ea" + }, + "700": { + "value": "#7e22ce" + }, + "800": { + "value": "#6b21a8" + }, + "900": { + "value": "#581c87" + }, + "950": { + "value": "#3b0764" + } + }, + "violet": { + "50": { + "value": "#f5f3ff" + }, + "100": { + "value": "#ede9fe" + }, + "200": { + "value": "#ddd6fe" + }, + "300": { + "value": "#c4b5fd" + }, + "400": { + "value": "#a78bfa" + }, + "500": { + "value": "#8b5cf6" + }, + "600": { + "value": "#7c3aed" + }, + "700": { + "value": "#6d28d9" + }, + "800": { + "value": "#5b21b6" + }, + "900": { + "value": "#4c1d95" + }, + "950": { + "value": "#2e1065" + } + }, + "indigo": { + "50": { + "value": "#eef2ff" + }, + "100": { + "value": "#e0e7ff" + }, + "200": { + "value": "#c7d2fe" + }, + "300": { + "value": "#a5b4fc" + }, + "400": { + "value": "#818cf8" + }, + "500": { + "value": "#6366f1" + }, + "600": { + "value": "#4f46e5" + }, + "700": { + "value": "#4338ca" + }, + "800": { + "value": "#3730a3" + }, + "900": { + "value": "#312e81" + }, + "950": { + "value": "#1e1b4b" + } + }, + "blue": { + "50": { + "value": "#eff6ff" + }, + "100": { + "value": "#dbeafe" + }, + "200": { + "value": "#bfdbfe" + }, + "300": { + "value": "#93c5fd" + }, + "400": { + "value": "#60a5fa" + }, + "500": { + "value": "#3b82f6" + }, + "600": { + "value": "#2563eb" + }, + "700": { + "value": "#1d4ed8" + }, + "800": { + "value": "#1e40af" + }, + "900": { + "value": "#1e3a8a" + }, + "950": { + "value": "#172554" + } + }, + "sky": { + "50": { + "value": "#f0f9ff" + }, + "100": { + "value": "#e0f2fe" + }, + "200": { + "value": "#bae6fd" + }, + "300": { + "value": "#7dd3fc" + }, + "400": { + "value": "#38bdf8" + }, + "500": { + "value": "#0ea5e9" + }, + "600": { + "value": "#0284c7" + }, + "700": { + "value": "#0369a1" + }, + "800": { + "value": "#075985" + }, + "900": { + "value": "#0c4a6e" + }, + "950": { + "value": "#082f49" + } + }, + "cyan": { + "50": { + "value": "#ecfeff" + }, + "100": { + "value": "#cffafe" + }, + "200": { + "value": "#a5f3fc" + }, + "300": { + "value": "#67e8f9" + }, + "400": { + "value": "#22d3ee" + }, + "500": { + "value": "#06b6d4" + }, + "600": { + "value": "#0891b2" + }, + "700": { + "value": "#0e7490" + }, + "800": { + "value": "#155e75" + }, + "900": { + "value": "#164e63" + }, + "950": { + "value": "#083344" + } + }, + "teal": { + "50": { + "value": "#f0fdfa" + }, + "100": { + "value": "#ccfbf1" + }, + "200": { + "value": "#99f6e4" + }, + "300": { + "value": "#5eead4" + }, + "400": { + "value": "#2dd4bf" + }, + "500": { + "value": "#14b8a6" + }, + "600": { + "value": "#0d9488" + }, + "700": { + "value": "#0f766e" + }, + "800": { + "value": "#115e59" + }, + "900": { + "value": "#134e4a" + }, + "950": { + "value": "#042f2e" + } + }, + "emerald": { + "50": { + "value": "#ecfdf5" + }, + "100": { + "value": "#d1fae5" + }, + "200": { + "value": "#a7f3d0" + }, + "300": { + "value": "#6ee7b7" + }, + "400": { + "value": "#34d399" + }, + "500": { + "value": "#10b981" + }, + "600": { + "value": "#059669" + }, + "700": { + "value": "#047857" + }, + "800": { + "value": "#065f46" + }, + "900": { + "value": "#064e3b" + }, + "950": { + "value": "#022c22" + } + }, + "green": { + "50": { + "value": "#f0fdf4" + }, + "100": { + "value": "#dcfce7" + }, + "200": { + "value": "#bbf7d0" + }, + "300": { + "value": "#86efac" + }, + "400": { + "value": "#4ade80" + }, + "500": { + "value": "#22c55e" + }, + "600": { + "value": "#16a34a" + }, + "700": { + "value": "#15803d" + }, + "800": { + "value": "#166534" + }, + "900": { + "value": "#14532d" + }, + "950": { + "value": "#052e16" + } + }, + "lime": { + "50": { + "value": "#f7fee7" + }, + "100": { + "value": "#ecfccb" + }, + "200": { + "value": "#d9f99d" + }, + "300": { + "value": "#bef264" + }, + "400": { + "value": "#a3e635" + }, + "500": { + "value": "#84cc16" + }, + "600": { + "value": "#65a30d" + }, + "700": { + "value": "#4d7c0f" + }, + "800": { + "value": "#3f6212" + }, + "900": { + "value": "#365314" + }, + "950": { + "value": "#1a2e05" + } + }, + "yellow": { + "50": { + "value": "#fefce8" + }, + "100": { + "value": "#fef9c3" + }, + "200": { + "value": "#fef08a" + }, + "300": { + "value": "#fde047" + }, + "400": { + "value": "#facc15" + }, + "500": { + "value": "#eab308" + }, + "600": { + "value": "#ca8a04" + }, + "700": { + "value": "#a16207" + }, + "800": { + "value": "#854d0e" + }, + "900": { + "value": "#713f12" + }, + "950": { + "value": "#422006" + } + }, + "amber": { + "50": { + "value": "#fffbeb" + }, + "100": { + "value": "#fef3c7" + }, + "200": { + "value": "#fde68a" + }, + "300": { + "value": "#fcd34d" + }, + "400": { + "value": "#fbbf24" + }, + "500": { + "value": "#f59e0b" + }, + "600": { + "value": "#d97706" + }, + "700": { + "value": "#b45309" + }, + "800": { + "value": "#92400e" + }, + "900": { + "value": "#78350f" + }, + "950": { + "value": "#451a03" + } + }, + "orange": { + "50": { + "value": "#fff7ed" + }, + "100": { + "value": "#ffedd5" + }, + "200": { + "value": "#fed7aa" + }, + "300": { + "value": "#fdba74" + }, + "400": { + "value": "#fb923c" + }, + "500": { + "value": "#f97316" + }, + "600": { + "value": "#ea580c" + }, + "700": { + "value": "#c2410c" + }, + "800": { + "value": "#9a3412" + }, + "900": { + "value": "#7c2d12" + }, + "950": { + "value": "#431407" + } + }, + "red": { + "50": { + "value": "#fef2f2" + }, + "100": { + "value": "#fee2e2" + }, + "200": { + "value": "#fecaca" + }, + "300": { + "value": "#fca5a5" + }, + "400": { + "value": "#f87171" + }, + "500": { + "value": "#ef4444" + }, + "600": { + "value": "#dc2626" + }, + "700": { + "value": "#b91c1c" + }, + "800": { + "value": "#991b1b" + }, + "900": { + "value": "#7f1d1d" + }, + "950": { + "value": "#450a0a" + } + }, + "neutral": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f5f5f5" + }, + "200": { + "value": "#e5e5e5" + }, + "300": { + "value": "#d4d4d4" + }, + "400": { + "value": "#a3a3a3" + }, + "500": { + "value": "#737373" + }, + "600": { + "value": "#525252" + }, + "700": { + "value": "#404040" + }, + "800": { + "value": "#262626" + }, + "900": { + "value": "#171717" + }, + "950": { + "value": "#0a0a0a" + } + }, + "stone": { + "50": { + "value": "#fafaf9" + }, + "100": { + "value": "#f5f5f4" + }, + "200": { + "value": "#e7e5e4" + }, + "300": { + "value": "#d6d3d1" + }, + "400": { + "value": "#a8a29e" + }, + "500": { + "value": "#78716c" + }, + "600": { + "value": "#57534e" + }, + "700": { + "value": "#44403c" + }, + "800": { + "value": "#292524" + }, + "900": { + "value": "#1c1917" + }, + "950": { + "value": "#0c0a09" + } + }, + "zinc": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f4f4f5" + }, + "200": { + "value": "#e4e4e7" + }, + "300": { + "value": "#d4d4d8" + }, + "400": { + "value": "#a1a1aa" + }, + "500": { + "value": "#71717a" + }, + "600": { + "value": "#52525b" + }, + "700": { + "value": "#3f3f46" + }, + "800": { + "value": "#27272a" + }, + "900": { + "value": "#18181b" + }, + "950": { + "value": "#09090b" + } + }, + "gray": { + "50": { + "value": "#f9fafb" + }, + "100": { + "value": "#f3f4f6" + }, + "200": { + "value": "#e5e7eb" + }, + "300": { + "value": "#d1d5db" + }, + "400": { + "value": "#9ca3af" + }, + "500": { + "value": "#6b7280" + }, + "600": { + "value": "#4b5563" + }, + "700": { + "value": "#374151" + }, + "800": { + "value": "#1f2937" + }, + "900": { + "value": "#111827" + }, + "950": { + "value": "#030712" + } + }, + "slate": { + "50": { + "value": "#f8fafc" + }, + "100": { + "value": "#f1f5f9" + }, + "200": { + "value": "#e2e8f0" + }, + "300": { + "value": "#cbd5e1" + }, + "400": { + "value": "#94a3b8" + }, + "500": { + "value": "#64748b" + }, + "600": { + "value": "#475569" + }, + "700": { + "value": "#334155" + }, + "800": { + "value": "#1e293b" + }, + "900": { + "value": "#0f172a" + }, + "950": { + "value": "#020617" + } + } + }, + "blurs": { + "xs": { + "value": "4px" + }, + "sm": { + "value": "8px" + }, + "md": { + "value": "12px" + }, + "lg": { + "value": "16px" + }, + "xl": { + "value": "24px" + }, + "2xl": { + "value": "40px" + }, + "3xl": { + "value": "64px" + } + }, + "spacing": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + } + }, + "sizes": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + }, + "xs": { + "value": "20rem" + }, + "sm": { + "value": "24rem" + }, + "md": { + "value": "28rem" + }, + "lg": { + "value": "32rem" + }, + "xl": { + "value": "36rem" + }, + "2xl": { + "value": "42rem" + }, + "3xl": { + "value": "48rem" + }, + "4xl": { + "value": "56rem" + }, + "5xl": { + "value": "64rem" + }, + "6xl": { + "value": "72rem" + }, + "7xl": { + "value": "80rem" + }, + "8xl": { + "value": "90rem" + }, + "prose": { + "value": "65ch" + }, + "full": { + "value": "100%" + }, + "min": { + "value": "min-content" + }, + "max": { + "value": "max-content" + }, + "fit": { + "value": "fit-content" + } + }, + "animations": { + "spin": { + "value": "spin 1s linear infinite" + }, + "ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" + }, + "pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" + }, + "bounce": { + "value": "bounce 1s infinite" + } + } + }, + "textStyles": { + "xs": { + "value": { + "fontSize": "0.75rem", + "lineHeight": "calc(1 / 0.75)" + } + }, + "sm": { + "value": { + "fontSize": "0.875rem", + "lineHeight": "calc(1.25 / 0.875)" + } + }, + "md": { + "value": { + "fontSize": "1rem", + "lineHeight": "calc(1.5 / 1)" + } + }, + "lg": { + "value": { + "fontSize": "1.125rem", + "lineHeight": "calc(1.75 / 1.125)" + } + }, + "xl": { + "value": { + "fontSize": "1.25rem", + "lineHeight": "calc(1.75 / 1.25)" + } + }, + "2xl": { + "value": { + "fontSize": "1.5rem", + "lineHeight": "calc(2 / 1.5)" + } + }, + "3xl": { + "value": { + "fontSize": "1.875rem", + "lineHeight": "calc(2.25 / 1.875)" + } + }, + "4xl": { + "value": { + "fontSize": "2.25rem", + "lineHeight": "calc(2.5 / 2.25)" + } + }, + "5xl": { + "value": { + "fontSize": "3rem", + "lineHeight": "1" + } + }, + "6xl": { + "value": { + "fontSize": "3.75rem", + "lineHeight": "1" + } + }, + "7xl": { + "value": { + "fontSize": "4.5rem", + "lineHeight": "1" + } + }, + "8xl": { + "value": { + "fontSize": "6rem", + "lineHeight": "1" + } + }, + "9xl": { + "value": { + "fontSize": "8rem", + "lineHeight": "1" + } + } + }, + "containerSizes": { + "xs": "320px", + "sm": "384px", + "md": "448px", + "lg": "512px", + "xl": "576px", + "2xl": "672px", + "3xl": "768px", + "4xl": "896px", + "5xl": "1024px", + "6xl": "1152px", + "7xl": "1280px", + "8xl": "1440px" + }, + "recipes": { + "button": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + } + } + } + }, + "buttonWithCompoundVariants": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "unstyled": {} + }, + "size": { + "sm": { + "fontSize": "1rem" + }, + "md": { + "fontSize": "2rem" + }, + "lg": { + "fontSize": "3rem" + } + } + }, + "compoundVariants": [ + { + "visual": "solid", + "css": { + "color": "blue" + } + }, + { + "size": "md", + "visual": "outline", + "css": { + "color": "green" + } + }, + { + "size": [ + "sm", + "lg" + ], + "visual": "outline", + "css": { + "color": "red" + } + } + ], + "defaultVariants": { + "visual": "unstyled" + } + } + }, + "slotRecipes": { + "slotButton": { + "className": "slot-button", + "slots": [ + "root", + "icon" + ], + "base": { + "root": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "icon": { + "fontSize": "2xl" + } + }, + "variants": { + "visual": { + "solid": { + "root": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "icon": { + "color": "white" + } + }, + "outline": { + "root": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "icon": { + "border": "1px solid" + } + }, + "unstyled": {} + } + }, + "defaultVariants": { + "visual": "unstyled" + } + } + } + }, + "utilities": { + "aspectRatio": { + "className": "asp", + "values": "aspectRatios", + "group": "Layout" + }, + "boxDecorationBreak": { + "className": "bx-db", + "group": "Layout", + "transform": { + "__function": "transform" + } + }, + "zIndex": { + "className": "z", + "values": "zIndex", + "group": "Visibility" + }, + "boxSizing": { + "className": "bx-s", + "group": "System" + }, + "objectPosition": { + "className": "obj-p", + "group": "Layout" + }, + "objectFit": { + "className": "obj-f", + "group": "Layout" + }, + "overscrollBehavior": { + "className": "ovs-b", + "group": "Scroll" + }, + "overscrollBehaviorX": { + "className": "ovs-bx", + "group": "Scroll" + }, + "overscrollBehaviorY": { + "className": "ovs-by", + "group": "Scroll" + }, + "position": { + "className": "pos", + "shorthand": "pos", + "group": "Position" + }, + "top": { + "className": "top", + "values": "spacing", + "group": "Position" + }, + "left": { + "className": "left", + "values": "spacing", + "group": "Position" + }, + "inset": { + "className": "inset", + "group": "Position", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + } + }, + "insetInline": { + "className": "inset-x", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetX" + ] + }, + "insetBlock": { + "className": "inset-y", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetY" + ] + }, + "insetBlockEnd": { + "className": "inset-be", + "values": "spacing", + "group": "Position" + }, + "insetBlockStart": { + "className": "inset-bs", + "values": "spacing", + "group": "Position" + }, + "insetInlineEnd": { + "className": "inset-e", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetEnd", + "end" + ] + }, + "insetInlineStart": { + "className": "inset-s", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetStart", + "start" + ] + }, + "right": { + "className": "right", + "values": "spacing", + "group": "Position" + }, + "bottom": { + "className": "bottom", + "values": "spacing", + "group": "Position" + }, + "float": { + "className": "float", + "values": [ + "start", + "end" + ], + "property": "float", + "group": "Position", + "transform": { + "__function": "transform" + } + }, + "visibility": { + "className": "vis", + "group": "Visibility" + }, + "display": { + "className": "d", + "group": "Display" + }, + "hideFrom": { + "className": "hide", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "hideBelow": { + "className": "show", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "flexBasis": { + "className": "flex-b", + "group": "Flex Layout", + "values": { + "__function": "values", + "probe": { + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "full": "100%" + } + } + }, + "flex": { + "className": "flex", + "group": "Flex Layout", + "values": { + "1": "1 1 0%", + "auto": "1 1 auto", + "initial": "0 1 auto", + "none": "none" + } + }, + "flexDirection": { + "className": "flex-d", + "group": "Flex Layout", + "shorthand": "flexDir" + }, + "flexGrow": { + "className": "flex-g", + "group": "Flex Layout" + }, + "flexShrink": { + "className": "flex-sh", + "group": "Flex Layout" + }, + "gridTemplateColumns": { + "className": "grid-tc", + "group": "Grid Layout" + }, + "gridTemplateRows": { + "className": "grid-tr", + "group": "Grid Layout" + }, + "gridColumn": { + "className": "grid-c", + "group": "Grid Layout" + }, + "gridRow": { + "className": "grid-r", + "group": "Grid Layout" + }, + "gridColumnStart": { + "className": "grid-cs", + "group": "Grid Layout" + }, + "gridColumnEnd": { + "className": "grid-ce", + "group": "Grid Layout" + }, + "gridAutoFlow": { + "className": "grid-af", + "group": "Grid Layout" + }, + "gridAutoColumns": { + "className": "grid-ac", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gridAutoRows": { + "className": "grid-ar", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gap": { + "className": "gap", + "group": "Flex Layout", + "values": "spacing" + }, + "gridGap": { + "className": "grid-g", + "group": "Grid Layout", + "values": "spacing" + }, + "gridRowGap": { + "className": "grid-rg", + "group": "Grid Layout", + "values": "spacing" + }, + "gridColumnGap": { + "className": "grid-cg", + "group": "Grid Layout", + "values": "spacing" + }, + "rowGap": { + "className": "rg", + "group": "Grid Layout", + "values": "spacing" + }, + "columnGap": { + "className": "cg", + "group": "Grid Layout", + "values": "spacing" + }, + "justifyContent": { + "className": "jc", + "group": "Flex Layout" + }, + "alignContent": { + "className": "ac", + "group": "Flex Layout" + }, + "alignItems": { + "className": "ai", + "group": "Flex Layout" + }, + "alignSelf": { + "className": "as", + "group": "Flex Layout" + }, + "padding": { + "className": "p", + "shorthand": "p", + "values": "spacing", + "group": "Padding" + }, + "paddingLeft": { + "className": "pl", + "shorthand": "pl", + "values": "spacing", + "group": "Padding" + }, + "paddingRight": { + "className": "pr", + "shorthand": "pr", + "values": "spacing", + "group": "Padding" + }, + "paddingTop": { + "className": "pt", + "shorthand": "pt", + "values": "spacing", + "group": "Padding" + }, + "paddingBottom": { + "className": "pb", + "shorthand": "pb", + "values": "spacing", + "group": "Padding" + }, + "paddingBlock": { + "className": "py", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "py", + "paddingY" + ] + }, + "paddingBlockEnd": { + "className": "pbe", + "values": "spacing", + "group": "Padding" + }, + "paddingBlockStart": { + "className": "pbs", + "values": "spacing", + "group": "Padding" + }, + "paddingInline": { + "className": "px", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "paddingX", + "px" + ] + }, + "paddingInlineEnd": { + "className": "pe", + "shorthand": [ + "pe", + "paddingEnd" + ], + "values": "spacing", + "group": "Padding" + }, + "paddingInlineStart": { + "className": "ps", + "shorthand": [ + "ps", + "paddingStart" + ], + "values": "spacing", + "group": "Padding" + }, + "marginLeft": { + "className": "ml", + "shorthand": "ml", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginRight": { + "className": "mr", + "shorthand": "mr", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginTop": { + "className": "mt", + "shorthand": "mt", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBottom": { + "className": "mb", + "shorthand": "mb", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "margin": { + "className": "m", + "shorthand": "m", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlock": { + "className": "my", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "my", + "marginY" + ] + }, + "marginBlockEnd": { + "className": "mbe", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlockStart": { + "className": "mbs", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInline": { + "className": "mx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "mx", + "marginX" + ] + }, + "marginInlineEnd": { + "className": "me", + "shorthand": [ + "me", + "marginEnd" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInlineStart": { + "className": "ms", + "shorthand": [ + "ms", + "marginStart" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "spaceX": { + "className": "sx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginInlineStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "spaceY": { + "className": "sy", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginBlockStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "outlineWidth": { + "className": "ring-w", + "shorthand": "ringWidth", + "values": "borderWidths", + "group": "Border" + }, + "outlineColor": { + "className": "ring-c", + "values": "colors", + "group": "Color", + "shorthand": "ringColor", + "transform": { + "__function": "transform", + "colorMix": "outlineColor" + } + }, + "outline": { + "className": "ring", + "shorthand": "ring", + "values": "borders", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "outlineOffset": { + "className": "ring-o", + "shorthand": "ringOffset", + "values": "spacing", + "group": "Border" + }, + "focusRing": { + "className": "focus-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusVisibleRing": { + "className": "focus-v-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusRingColor": { + "className": "focus-ring-c", + "values": "colors", + "group": "Focus Ring", + "transform": { + "__function": "transform", + "colorMix": "--focus-ring-color-prop" + } + }, + "focusRingOffset": { + "className": "focus-ring-o", + "values": "spacing", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingWidth": { + "className": "focus-ring-w", + "values": "borderWidths", + "property": "outlineWidth", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingStyle": { + "className": "focus-ring-s", + "values": "borderStyles", + "property": "outlineStyle", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "divideX": { + "className": "dvd-x", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideY": { + "className": "dvd-y", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideColor": { + "className": "dvd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideStyle": { + "className": "dvd-s", + "property": "borderStyle", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "width": { + "shorthand": "w", + "className": "w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "inlineSize": { + "className": "w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minWidth": { + "shorthand": "minW", + "className": "min-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minInlineSize": { + "className": "min-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxWidth": { + "shorthand": "maxW", + "className": "max-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxInlineSize": { + "className": "max-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "height": { + "shorthand": "h", + "className": "h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "blockSize": { + "className": "h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minHeight": { + "shorthand": "minH", + "className": "min-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minBlockSize": { + "className": "min-h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxHeight": { + "shorthand": "maxH", + "className": "max-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxBlockSize": { + "className": "max-b", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "boxSize": { + "className": "size", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + }, + "transform": { + "__function": "transform" + } + }, + "color": { + "className": "c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "color" + } + }, + "fontFamily": { + "className": "ff", + "values": "fonts", + "group": "Typography" + }, + "fontSize": { + "className": "fs", + "values": "fontSizes", + "group": "Typography" + }, + "fontSizeAdjust": { + "className": "fs-a", + "group": "Typography" + }, + "fontPalette": { + "className": "fp", + "group": "Typography" + }, + "fontKerning": { + "className": "fk", + "group": "Typography" + }, + "fontFeatureSettings": { + "className": "ff-s", + "group": "Typography" + }, + "fontWeight": { + "className": "fw", + "values": "fontWeights", + "group": "Typography" + }, + "fontSmoothing": { + "className": "fsmt", + "group": "Typography", + "values": { + "antialiased": "antialiased", + "subpixel-antialiased": "auto" + }, + "transform": { + "__function": "transform" + } + }, + "fontVariant": { + "className": "fv", + "group": "Typography" + }, + "fontVariantAlternates": { + "className": "fv-alt", + "group": "Typography" + }, + "fontVariantCaps": { + "className": "fv-caps", + "group": "Typography" + }, + "fontVariationSettings": { + "className": "fv-s", + "group": "Typography" + }, + "fontVariantNumeric": { + "className": "fv-num", + "group": "Typography" + }, + "letterSpacing": { + "className": "ls", + "values": "letterSpacings", + "group": "Typography" + }, + "lineHeight": { + "className": "lh", + "values": "lineHeights", + "group": "Typography" + }, + "textAlign": { + "className": "ta", + "group": "Typography" + }, + "textDecoration": { + "className": "td", + "group": "Typography" + }, + "textDecorationColor": { + "className": "td-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textDecorationColor" + }, + "group": "Typography" + }, + "textEmphasisColor": { + "className": "te-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textEmphasisColor" + }, + "group": "Typography" + }, + "textDecorationStyle": { + "className": "td-s", + "group": "Typography" + }, + "textDecorationThickness": { + "className": "td-t", + "group": "Typography" + }, + "textUnderlineOffset": { + "className": "tu-o", + "group": "Typography" + }, + "textTransform": { + "className": "tt", + "group": "Typography" + }, + "textIndent": { + "className": "ti", + "group": "Typography", + "values": "spacing" + }, + "textShadow": { + "className": "tsh", + "values": "shadows", + "group": "Typography" + }, + "textShadowColor": { + "shorthand": "textShadowColor", + "className": "tsh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--text-shadow-color" + }, + "group": "Typography" + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "WebkitTextFillColor" + }, + "group": "Typography" + }, + "textOverflow": { + "className": "tov", + "group": "Typography" + }, + "verticalAlign": { + "className": "va", + "group": "Typography" + }, + "wordBreak": { + "className": "wb", + "group": "Typography" + }, + "textWrap": { + "className": "tw", + "values": [ + "wrap", + "balance", + "nowrap" + ], + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "truncate": { + "className": "trunc", + "values": { + "type": "boolean" + }, + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "lineClamp": { + "className": "lc", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "listStyleType": { + "className": "li-t", + "group": "List" + }, + "listStylePosition": { + "className": "li-pos", + "group": "List" + }, + "listStyleImage": { + "className": "li-img", + "group": "List", + "values": "assets" + }, + "listStyle": { + "className": "li-s", + "group": "List" + }, + "backgroundPosition": { + "shorthand": "bgPosition", + "className": "bg-p", + "group": "Background" + }, + "backgroundPositionX": { + "shorthand": "bgPositionX", + "className": "bg-p-x", + "group": "Background" + }, + "backgroundPositionY": { + "shorthand": "bgPositionY", + "className": "bg-p-y", + "group": "Background" + }, + "backgroundAttachment": { + "shorthand": "bgAttachment", + "className": "bg-a", + "group": "Background" + }, + "backgroundClip": { + "shorthand": "bgClip", + "className": "bg-cp", + "group": "Background", + "transform": { + "__function": "transform" + } + }, + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "background" + } + }, + "backgroundColor": { + "shorthand": "bgColor", + "className": "bg-c", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "backgroundColor" + } + }, + "backgroundOrigin": { + "shorthand": "bgOrigin", + "className": "bg-o", + "group": "Background" + }, + "backgroundImage": { + "shorthand": "bgImage", + "className": "bg-i", + "values": "assets", + "group": "Background" + }, + "backgroundRepeat": { + "shorthand": "bgRepeat", + "className": "bg-r", + "group": "Background" + }, + "backgroundBlendMode": { + "shorthand": "bgBlendMode", + "className": "bg-bm", + "group": "Background" + }, + "backgroundSize": { + "shorthand": "bgSize", + "className": "bg-s", + "group": "Background" + }, + "backgroundGradient": { + "shorthand": "bgGradient", + "className": "bg-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundLinear": { + "shorthand": "bgLinear", + "className": "bg-linear", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundRadial": { + "shorthand": "bgRadial", + "className": "bg-radial", + "group": "Background Gradient", + "values": "gradients", + "transform": { + "__function": "transform" + } + }, + "backgroundConic": { + "shorthand": "bgConic", + "className": "bg-conic", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "textGradient": { + "className": "txt-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "gradientFromPosition": { + "className": "grad-from-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientToPosition": { + "className": "grad-to-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientFrom": { + "className": "grad-from", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-from" + } + }, + "gradientTo": { + "className": "grad-to", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-to" + } + }, + "gradientVia": { + "className": "grad-via", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientViaPosition": { + "className": "grad-via-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "borderRadius": { + "className": "bdr", + "shorthand": "rounded", + "values": "radii", + "group": "Border Radius" + }, + "borderTopLeftRadius": { + "className": "bdr-tl", + "shorthand": "roundedTopLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRightRadius": { + "className": "bdr-tr", + "shorthand": "roundedTopRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomRightRadius": { + "className": "bdr-br", + "shorthand": "roundedBottomRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomLeftRadius": { + "className": "bdr-bl", + "shorthand": "roundedBottomLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRadius": { + "className": "bdr-t", + "shorthand": "roundedTop", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderRightRadius": { + "className": "bdr-r", + "shorthand": "roundedRight", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderBottomRadius": { + "className": "bdr-b", + "shorthand": "roundedBottom", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderLeftRadius": { + "className": "bdr-l", + "shorthand": "roundedLeft", + "values": "radii", + "property": "borderRadius", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderStartStartRadius": { + "className": "bdr-ss", + "shorthand": "roundedStartStart", + "values": "radii", + "group": "Border Radius" + }, + "borderStartEndRadius": { + "className": "bdr-se", + "shorthand": "roundedStartEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderStartRadius": { + "className": "bdr-s", + "values": "radii", + "property": "borderRadius", + "shorthand": "roundedStart", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderEndStartRadius": { + "className": "bdr-es", + "shorthand": "roundedEndStart", + "values": "radii", + "group": "Border Radius" + }, + "borderEndEndRadius": { + "className": "bdr-ee", + "shorthand": "roundedEndEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderEndRadius": { + "className": "bdr-e", + "shorthand": "roundedEnd", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "border": { + "className": "bd", + "values": "borders", + "group": "Border" + }, + "borderWidth": { + "className": "bd-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderTopWidth": { + "className": "bd-t-w", + "values": "borderWidths", + "group": "Border" + }, + "borderLeftWidth": { + "className": "bd-l-w", + "values": "borderWidths", + "group": "Border" + }, + "borderRightWidth": { + "className": "bd-r-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBottomWidth": { + "className": "bd-b-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBlockStartWidth": { + "className": "bd-bs-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderBlockEndWidth": { + "className": "bd-be-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderColor": { + "className": "bd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderColor" + } + }, + "borderInline": { + "className": "bd-x", + "values": "borders", + "group": "Border", + "shorthand": "borderX" + }, + "borderInlineWidth": { + "className": "bd-x-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderXWidth" + }, + "borderInlineColor": { + "className": "bd-x-c", + "values": "colors", + "group": "Border", + "shorthand": "borderXColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineColor" + } + }, + "borderBlock": { + "className": "bd-y", + "values": "borders", + "group": "Border", + "shorthand": "borderY" + }, + "borderBlockWidth": { + "className": "bd-y-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderYWidth" + }, + "borderBlockColor": { + "className": "bd-y-c", + "values": "colors", + "group": "Border", + "shorthand": "borderYColor", + "transform": { + "__function": "transform", + "colorMix": "borderBlockColor" + } + }, + "borderLeft": { + "className": "bd-l", + "values": "borders", + "group": "Border" + }, + "borderLeftColor": { + "className": "bd-l-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderLeftColor" + } + }, + "borderInlineStart": { + "className": "bd-s", + "values": "borders", + "group": "Border", + "shorthand": "borderStart" + }, + "borderInlineStartWidth": { + "className": "bd-s-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderStartWidth" + }, + "borderInlineStartColor": { + "className": "bd-s-c", + "values": "colors", + "group": "Border", + "shorthand": "borderStartColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineStartColor" + } + }, + "borderRight": { + "className": "bd-r", + "values": "borders", + "group": "Border" + }, + "borderRightColor": { + "className": "bd-r-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderRightColor" + } + }, + "borderInlineEnd": { + "className": "bd-e", + "values": "borders", + "group": "Border", + "shorthand": "borderEnd" + }, + "borderInlineEndWidth": { + "className": "bd-e-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderEndWidth" + }, + "borderInlineEndColor": { + "className": "bd-e-c", + "values": "colors", + "group": "Border", + "shorthand": "borderEndColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineEndColor" + } + }, + "borderTop": { + "className": "bd-t", + "values": "borders", + "group": "Border" + }, + "borderTopColor": { + "className": "bd-t-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderTopColor" + } + }, + "borderBottom": { + "className": "bd-b", + "values": "borders", + "group": "Border" + }, + "borderBottomColor": { + "className": "bd-b-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBottomColor" + } + }, + "borderBlockEnd": { + "className": "bd-be", + "values": "borders", + "group": "Border" + }, + "borderBlockEndColor": { + "className": "bd-be-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockEndColor" + } + }, + "borderBlockStart": { + "className": "bd-bs", + "values": "borders", + "group": "Border" + }, + "borderBlockStartColor": { + "className": "bd-bs-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockStartColor" + } + }, + "opacity": { + "className": "op", + "values": "opacity", + "group": "Background" + }, + "boxShadow": { + "shorthand": "shadow", + "className": "bx-sh", + "values": "shadows", + "group": "Shadow" + }, + "boxShadowColor": { + "shorthand": "shadowColor", + "className": "bx-sh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--shadow-color" + }, + "group": "Color" + }, + "mixBlendMode": { + "className": "mix-bm", + "group": "Effect" + }, + "filter": { + "className": "filter", + "group": "Effect", + "values": { + "auto": "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )" + } + }, + "brightness": { + "className": "brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "contrast": { + "className": "contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "grayscale": { + "className": "grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "hueRotate": { + "className": "hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "invert": { + "className": "invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "saturate": { + "className": "saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "sepia": { + "className": "sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "dropShadow": { + "className": "drop-shadow", + "group": "Effect", + "values": "dropShadows", + "transform": { + "__function": "transform" + } + }, + "blur": { + "className": "blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropFilter": { + "className": "bkdp", + "group": "Effect", + "values": { + "auto": "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )" + }, + "transform": { + "__function": "transform" + } + }, + "backdropBlur": { + "className": "bkdp-blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropBrightness": { + "className": "bkdp-brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropContrast": { + "className": "bkdp-contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropGrayscale": { + "className": "bkdp-grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropHueRotate": { + "className": "bkdp-hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropInvert": { + "className": "bkdp-invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropOpacity": { + "className": "bkdp-opacity", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSaturate": { + "className": "bkdp-saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSepia": { + "className": "bkdp-sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "borderCollapse": { + "className": "bd-cl", + "group": "Table" + }, + "borderSpacing": { + "className": "bd-sp", + "group": "Table", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "auto": "var(--border-spacing-x) var(--border-spacing-y)" + } + } + }, + "borderSpacingX": { + "className": "bd-sx", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "borderSpacingY": { + "className": "bd-sy", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "tableLayout": { + "className": "tbl", + "group": "Table" + }, + "transitionTimingFunction": { + "className": "trs-tmf", + "values": "easings", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionDelay": { + "className": "trs-dly", + "values": "durations", + "group": "Transition" + }, + "transitionDuration": { + "className": "trs-dur", + "values": "durations", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionProperty": { + "className": "trs-prop", + "group": "Transition", + "values": { + "common": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", + "colors": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke", + "size": "width, height, min-width, max-width, min-height, max-height", + "position": "left, right, top, bottom, inset, inset-inline, inset-block", + "background": "background, background-color, background-image, background-position" + }, + "transform": { + "__function": "transform" + } + }, + "transition": { + "className": "trs", + "values": [ + "all", + "common", + "size", + "position", + "background", + "colors", + "opacity", + "shadow", + "transform" + ], + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "animation": { + "className": "anim", + "values": "animations", + "group": "Animation" + }, + "animationName": { + "className": "anim-n", + "values": "keyframes", + "group": "Animation" + }, + "animationTimingFunction": { + "className": "anim-tmf", + "values": "easings", + "group": "Animation" + }, + "animationDuration": { + "className": "anim-dur", + "values": "durations", + "group": "Animation" + }, + "animationDelay": { + "className": "anim-dly", + "values": "durations", + "group": "Animation" + }, + "animationPlayState": { + "className": "anim-ps", + "group": "Animation" + }, + "animationComposition": { + "className": "anim-comp", + "group": "Animation" + }, + "animationFillMode": { + "className": "anim-fm", + "group": "Animation" + }, + "animationDirection": { + "className": "anim-dir", + "group": "Animation" + }, + "animationIterationCount": { + "className": "anim-ic", + "group": "Animation" + }, + "animationRange": { + "className": "anim-r", + "group": "Animation" + }, + "animationState": { + "className": "anim-s", + "group": "Animation" + }, + "animationRangeStart": { + "className": "anim-rs", + "group": "Animation" + }, + "animationRangeEnd": { + "className": "anim-re", + "group": "Animation" + }, + "animationTimeline": { + "className": "anim-tl", + "group": "Animation" + }, + "transformOrigin": { + "className": "trf-o", + "group": "Transform" + }, + "transformBox": { + "className": "trf-b", + "group": "Transform" + }, + "transformStyle": { + "className": "trf-s", + "group": "Transform" + }, + "transform": { + "className": "trf", + "group": "Transform" + }, + "rotate": { + "className": "rotate", + "group": "Transform", + "property": "rotate", + "values": { + "auto": "var(--rotate-x) var(--rotate-y)", + "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)" + } + }, + "rotateX": { + "className": "rotate-x", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateY": { + "className": "rotate-y", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateZ": { + "className": "rotate-z", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "scale": { + "className": "scale", + "group": "Transform", + "property": "scale", + "values": { + "auto": "var(--scale-x) var(--scale-y)" + } + }, + "scaleX": { + "className": "scale-x", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "scaleY": { + "className": "scale-y", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "translate": { + "className": "translate", + "group": "Transform", + "property": "translate", + "values": { + "auto": "var(--translate-x) var(--translate-y)", + "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)" + } + }, + "translateX": { + "shorthand": "x", + "className": "translate-x", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateY": { + "shorthand": "y", + "className": "translate-y", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateZ": { + "shorthand": "z", + "className": "translate-z", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "accentColor": { + "className": "ac-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "accentColor" + }, + "group": "Color" + }, + "caretColor": { + "className": "ca-c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "caretColor" + } + }, + "scrollBehavior": { + "className": "scr-bhv", + "group": "Scroll" + }, + "scrollbar": { + "className": "scr-bar", + "values": [ + "visible", + "hidden" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollbarColor": { + "className": "scr-bar-c", + "values": "colors", + "group": "Scroll", + "transform": { + "__function": "transform", + "colorMix": "scrollbarColor" + } + }, + "scrollbarGutter": { + "className": "scr-bar-g", + "group": "Scroll" + }, + "scrollbarWidth": { + "className": "scr-bar-w", + "values": "sizes", + "group": "Scroll" + }, + "scrollMargin": { + "className": "scr-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginLeft": { + "className": "scr-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginRight": { + "className": "scr-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginTop": { + "className": "scr-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBottom": { + "className": "scr-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlock": { + "className": "scr-my", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginY" + ] + }, + "scrollMarginBlockEnd": { + "className": "scr-mbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlockStart": { + "className": "scr-mbt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInline": { + "className": "scr-mx", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginX" + ] + }, + "scrollMarginInlineEnd": { + "className": "scr-me", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInlineStart": { + "className": "scr-ms", + "values": "spacing", + "group": "Scroll" + }, + "scrollPadding": { + "className": "scr-p", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlock": { + "className": "scr-py", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingY" + ] + }, + "scrollPaddingBlockStart": { + "className": "scr-pbs", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlockEnd": { + "className": "scr-pbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInline": { + "className": "scr-px", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingX" + ] + }, + "scrollPaddingInlineEnd": { + "className": "scr-pe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInlineStart": { + "className": "scr-ps", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingLeft": { + "className": "scr-pl", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingRight": { + "className": "scr-pr", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingTop": { + "className": "scr-pt", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBottom": { + "className": "scr-pb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapAlign": { + "className": "scr-sa", + "group": "Scroll" + }, + "scrollSnapStop": { + "className": "scrs-s", + "group": "Scroll" + }, + "scrollSnapType": { + "className": "scrs-t", + "group": "Scroll", + "values": { + "none": "none", + "x": "x var(--scroll-snap-strictness)", + "y": "y var(--scroll-snap-strictness)", + "both": "both var(--scroll-snap-strictness)" + } + }, + "scrollSnapStrictness": { + "className": "scrs-strt", + "values": [ + "mandatory", + "proximity" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollSnapMargin": { + "className": "scrs-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginTop": { + "className": "scrs-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginBottom": { + "className": "scrs-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginLeft": { + "className": "scrs-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginRight": { + "className": "scrs-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapCoordinate": { + "className": "scrs-c", + "group": "Scroll" + }, + "scrollSnapDestination": { + "className": "scrs-d", + "group": "Scroll" + }, + "scrollSnapPointsX": { + "className": "scrs-px", + "group": "Scroll" + }, + "scrollSnapPointsY": { + "className": "scrs-py", + "group": "Scroll" + }, + "scrollSnapTypeX": { + "className": "scrs-tx", + "group": "Scroll" + }, + "scrollSnapTypeY": { + "className": "scrs-ty", + "group": "Scroll" + }, + "scrollTimeline": { + "className": "scrtl", + "group": "Scroll" + }, + "scrollTimelineAxis": { + "className": "scrtl-a", + "group": "Scroll" + }, + "scrollTimelineName": { + "className": "scrtl-n", + "group": "Scroll" + }, + "touchAction": { + "className": "tch-a", + "group": "Interactivity" + }, + "userSelect": { + "className": "us", + "group": "Interactivity", + "transform": { + "__function": "transform" + } + }, + "overflow": { + "className": "ov", + "group": "Scroll" + }, + "overflowWrap": { + "className": "ov-wrap", + "group": "Scroll" + }, + "overflowX": { + "className": "ov-x", + "group": "Scroll" + }, + "overflowY": { + "className": "ov-y", + "group": "Scroll" + }, + "overflowAnchor": { + "className": "ov-a", + "group": "Scroll" + }, + "overflowBlock": { + "className": "ov-b", + "group": "Scroll" + }, + "overflowInline": { + "className": "ov-i", + "group": "Scroll" + }, + "overflowClipBox": { + "className": "ovcp-bx", + "group": "Scroll" + }, + "overflowClipMargin": { + "className": "ovcp-m", + "group": "Scroll" + }, + "overscrollBehaviorBlock": { + "className": "ovs-bb", + "group": "Scroll" + }, + "overscrollBehaviorInline": { + "className": "ovs-bi", + "group": "Scroll" + }, + "fill": { + "className": "fill", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "fill" + } + }, + "stroke": { + "className": "stk", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "stroke" + } + }, + "strokeWidth": { + "className": "stk-w", + "values": "borderWidths", + "group": "Border" + }, + "strokeDasharray": { + "className": "stk-dsh", + "group": "Border" + }, + "strokeDashoffset": { + "className": "stk-do", + "group": "Border" + }, + "strokeLinecap": { + "className": "stk-lc", + "group": "Border" + }, + "strokeLinejoin": { + "className": "stk-lj", + "group": "Border" + }, + "strokeMiterlimit": { + "className": "stk-ml", + "group": "Border" + }, + "strokeOpacity": { + "className": "stk-op", + "group": "Border" + }, + "srOnly": { + "className": "sr", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "debug": { + "className": "debug", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "appearance": { + "className": "ap", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "backfaceVisibility": { + "className": "bfv", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "clipPath": { + "className": "cp-path", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "hyphens": { + "className": "hy", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "mask": { + "className": "msk", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskImage": { + "className": "msk-i", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskSize": { + "className": "msk-s", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "textSizeAdjust": { + "className": "txt-adj", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "container": { + "className": "cq", + "group": "Container" + }, + "containerName": { + "className": "cq-n", + "property": "containerName", + "values": "containerNames", + "group": "Container" + }, + "containerType": { + "className": "cq-t", + "group": "Container" + }, + "cursor": { + "className": "cursor", + "values": "cursor", + "group": "System" + } + }, + "outdir": "styled-system-format-names", + "separator": "-", + "validation": "warn" +} diff --git a/src/Css/tests/Fixtures/Panda/configs/codegen-react.json b/src/Css/tests/Fixtures/Panda/configs/codegen-react.json new file mode 100644 index 00000000000..aa26cc0f6ce --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/configs/codegen-react.json @@ -0,0 +1,4627 @@ +{ + "conditions": { + "hover": "&:is(:hover, [data-hover])", + "focus": "&:is(:focus, [data-focus])", + "focusWithin": "&:focus-within", + "focusVisible": "&:is(:focus-visible, [data-focus-visible])", + "disabled": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])", + "active": "&:is(:active, [data-active])", + "visited": "&:visited", + "target": "&:target", + "readOnly": "&:is(:read-only, [data-read-only], [aria-readonly=true])", + "readWrite": "&:read-write", + "empty": "&:is(:empty, [data-empty])", + "checked": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])", + "enabled": "&:enabled", + "expanded": "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])", + "highlighted": "&[data-highlighted]", + "complete": "&[data-complete]", + "incomplete": "&[data-incomplete]", + "dragging": "&[data-dragging]", + "before": "&::before", + "after": "&::after", + "firstLetter": "&::first-letter", + "firstLine": "&::first-line", + "marker": "&::marker, &::-webkit-details-marker", + "selection": "&::selection", + "file": "&::file-selector-button", + "backdrop": "&::backdrop", + "first": "&:first-child", + "last": "&:last-child", + "only": "&:only-child", + "even": "&:nth-child(even)", + "odd": "&:nth-child(odd)", + "firstOfType": "&:first-of-type", + "lastOfType": "&:last-of-type", + "onlyOfType": "&:only-of-type", + "peerFocus": ".peer:is(:focus, [data-focus]) ~ &", + "peerHover": ".peer:is(:hover, [data-hover]) ~ &", + "peerActive": ".peer:is(:active, [data-active]) ~ &", + "peerFocusWithin": ".peer:focus-within ~ &", + "peerFocusVisible": ".peer:is(:focus-visible, [data-focus-visible]) ~ &", + "peerDisabled": ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &", + "peerChecked": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &", + "peerInvalid": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &", + "peerExpanded": ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &", + "peerPlaceholderShown": ".peer:placeholder-shown ~ &", + "groupFocus": ".group:is(:focus, [data-focus]) &", + "groupHover": ".group:is(:hover, [data-hover]) &", + "groupActive": ".group:is(:active, [data-active]) &", + "groupFocusWithin": ".group:focus-within &", + "groupFocusVisible": ".group:is(:focus-visible, [data-focus-visible]) &", + "groupDisabled": ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &", + "groupChecked": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &", + "groupExpanded": ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &", + "groupInvalid": ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &", + "indeterminate": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])", + "required": "&:is(:required, [data-required], [aria-required=true])", + "valid": "&:is(:valid, [data-valid])", + "invalid": "&:is(:invalid, [data-invalid], [aria-invalid=true])", + "autofill": "&:autofill", + "inRange": "&:is(:in-range, [data-in-range])", + "outOfRange": "&:is(:out-of-range, [data-outside-range])", + "placeholder": "&::placeholder, &[data-placeholder]", + "placeholderShown": "&:is(:placeholder-shown, [data-placeholder-shown])", + "pressed": "&:is([aria-pressed=true], [data-pressed])", + "selected": "&:is([aria-selected=true], [data-selected])", + "grabbed": "&:is([aria-grabbed=true], [data-grabbed])", + "underValue": "&[data-state=under-value]", + "overValue": "&[data-state=over-value]", + "atValue": "&[data-state=at-value]", + "default": "&:default", + "optional": "&:optional", + "open": "&:is([open], [data-open], [data-state=\"open\"], :popover-open)", + "closed": "&:is([closed], [data-closed], [data-state=\"closed\"])", + "fullscreen": "&:is(:fullscreen, [data-fullscreen])", + "loading": "&:is([data-loading], [aria-busy=true])", + "hidden": "&:is([hidden], [data-hidden])", + "current": "&:is([aria-current=true], [data-current])", + "currentPage": "&[aria-current=page]", + "currentStep": "&[aria-current=step]", + "today": "&[data-today]", + "unavailable": "&[data-unavailable]", + "rangeStart": "&[data-range-start]", + "rangeEnd": "&[data-range-end]", + "now": "&[data-now]", + "topmost": "&[data-topmost]", + "motionReduce": "@media (prefers-reduced-motion: reduce)", + "motionSafe": "@media (prefers-reduced-motion: no-preference)", + "print": "@media print", + "landscape": "@media (orientation: landscape)", + "portrait": "@media (orientation: portrait)", + "dark": ".dark &", + "light": ".light &", + "osDark": "@media (prefers-color-scheme: dark)", + "osLight": "@media (prefers-color-scheme: light)", + "highContrast": "@media (forced-colors: active)", + "lessContrast": "@media (prefers-contrast: less)", + "moreContrast": "@media (prefers-contrast: more)", + "ltr": ":where([dir=ltr], :dir(ltr)) &", + "rtl": ":where([dir=rtl], :dir(rtl)) &", + "scrollbar": "&::-webkit-scrollbar", + "scrollbarThumb": "&::-webkit-scrollbar-thumb", + "scrollbarTrack": "&::-webkit-scrollbar-track", + "horizontal": "&[data-orientation=horizontal]", + "vertical": "&[data-orientation=vertical]", + "icon": "& :where(svg)", + "starting": "@starting-style", + "noscript": "@media (scripting: none)", + "invertedColors": "@media (inverted-colors: inverted)" + }, + "theme": { + "keyframes": { + "spin": { + "to": { + "transform": "rotate(360deg)" + } + }, + "ping": { + "75%, 100%": { + "transform": "scale(2)", + "opacity": "0" + } + }, + "pulse": { + "50%": { + "opacity": ".5" + } + }, + "bounce": { + "0%, 100%": { + "transform": "translateY(-25%)", + "animationTimingFunction": "cubic-bezier(0.8,0,1,1)" + }, + "50%": { + "transform": "none", + "animationTimingFunction": "cubic-bezier(0,0,0.2,1)" + } + } + }, + "breakpoints": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + }, + "tokens": { + "aspectRatios": { + "square": { + "value": "1 / 1" + }, + "landscape": { + "value": "4 / 3" + }, + "portrait": { + "value": "3 / 4" + }, + "wide": { + "value": "16 / 9" + }, + "ultrawide": { + "value": "18 / 5" + }, + "golden": { + "value": "1.618 / 1" + } + }, + "borders": { + "none": { + "value": "none" + } + }, + "easings": { + "default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + }, + "linear": { + "value": "linear" + }, + "in": { + "value": "cubic-bezier(0.4, 0, 1, 1)" + }, + "out": { + "value": "cubic-bezier(0, 0, 0.2, 1)" + }, + "in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + } + }, + "durations": { + "fastest": { + "value": "50ms" + }, + "faster": { + "value": "100ms" + }, + "fast": { + "value": "150ms" + }, + "normal": { + "value": "200ms" + }, + "slow": { + "value": "300ms" + }, + "slower": { + "value": "400ms" + }, + "slowest": { + "value": "500ms" + } + }, + "radii": { + "xs": { + "value": "0.125rem" + }, + "sm": { + "value": "0.25rem" + }, + "md": { + "value": "0.375rem" + }, + "lg": { + "value": "0.5rem" + }, + "xl": { + "value": "0.75rem" + }, + "2xl": { + "value": "1rem" + }, + "3xl": { + "value": "1.5rem" + }, + "4xl": { + "value": "2rem" + }, + "full": { + "value": "9999px" + } + }, + "fontWeights": { + "thin": { + "value": "100" + }, + "extralight": { + "value": "200" + }, + "light": { + "value": "300" + }, + "normal": { + "value": "400" + }, + "medium": { + "value": "500" + }, + "semibold": { + "value": "600" + }, + "bold": { + "value": "700" + }, + "extrabold": { + "value": "800" + }, + "black": { + "value": "900" + } + }, + "lineHeights": { + "none": { + "value": "1" + }, + "tight": { + "value": "1.25" + }, + "snug": { + "value": "1.375" + }, + "normal": { + "value": "1.5" + }, + "relaxed": { + "value": "1.625" + }, + "loose": { + "value": "2" + } + }, + "fonts": { + "sans": { + "value": [ + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "\"Segoe UI\"", + "Roboto", + "\"Helvetica Neue\"", + "Arial", + "\"Noto Sans\"", + "sans-serif", + "\"Apple Color Emoji\"", + "\"Segoe UI Emoji\"", + "\"Segoe UI Symbol\"", + "\"Noto Color Emoji\"" + ] + }, + "serif": { + "value": [ + "ui-serif", + "Georgia", + "Cambria", + "\"Times New Roman\"", + "Times", + "serif" + ] + }, + "mono": { + "value": [ + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "\"Liberation Mono\"", + "\"Courier New\"", + "monospace" + ] + } + }, + "letterSpacings": { + "tighter": { + "value": "-0.05em" + }, + "tight": { + "value": "-0.025em" + }, + "normal": { + "value": "0em" + }, + "wide": { + "value": "0.025em" + }, + "wider": { + "value": "0.05em" + }, + "widest": { + "value": "0.1em" + } + }, + "fontSizes": { + "2xs": { + "value": "0.5rem" + }, + "xs": { + "value": "0.75rem" + }, + "sm": { + "value": "0.875rem" + }, + "md": { + "value": "1rem" + }, + "lg": { + "value": "1.125rem" + }, + "xl": { + "value": "1.25rem" + }, + "2xl": { + "value": "1.5rem" + }, + "3xl": { + "value": "1.875rem" + }, + "4xl": { + "value": "2.25rem" + }, + "5xl": { + "value": "3rem" + }, + "6xl": { + "value": "3.75rem" + }, + "7xl": { + "value": "4.5rem" + }, + "8xl": { + "value": "6rem" + }, + "9xl": { + "value": "8rem" + } + }, + "shadows": { + "2xs": { + "value": "0 1px rgb(0 0 0 / 0.05)" + }, + "xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" + }, + "sm": { + "value": [ + "0 1px 3px 0 rgb(0 0 0 / 0.1)", + "0 1px 2px -1px rgb(0 0 0 / 0.1)" + ] + }, + "md": { + "value": [ + "0 4px 6px -1px rgb(0 0 0 / 0.1)", + "0 2px 4px -2px rgb(0 0 0 / 0.1)" + ] + }, + "lg": { + "value": [ + "0 10px 15px -3px rgb(0 0 0 / 0.1)", + "0 4px 6px -4px rgb(0 0 0 / 0.1)" + ] + }, + "xl": { + "value": [ + "0 20px 25px -5px rgb(0 0 0 / 0.1)", + "0 8px 10px -6px rgb(0 0 0 / 0.1)" + ] + }, + "2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)" + }, + "inset-2xs": { + "value": "inset 0 1px rgb(0 0 0 / 0.05)" + }, + "inset-xs": { + "value": "inset 0 1px 1px rgb(0 0 0 / 0.05)" + }, + "inset-sm": { + "value": "inset 0 2px 4px rgb(0 0 0 / 0.05)" + } + }, + "colors": { + "current": { + "value": "currentColor" + }, + "black": { + "value": "#000" + }, + "white": { + "value": "#fff" + }, + "transparent": { + "value": "rgb(0 0 0 / 0)" + }, + "rose": { + "50": { + "value": "#fff1f2" + }, + "100": { + "value": "#ffe4e6" + }, + "200": { + "value": "#fecdd3" + }, + "300": { + "value": "#fda4af" + }, + "400": { + "value": "#fb7185" + }, + "500": { + "value": "#f43f5e" + }, + "600": { + "value": "#e11d48" + }, + "700": { + "value": "#be123c" + }, + "800": { + "value": "#9f1239" + }, + "900": { + "value": "#881337" + }, + "950": { + "value": "#4c0519" + } + }, + "pink": { + "50": { + "value": "#fdf2f8" + }, + "100": { + "value": "#fce7f3" + }, + "200": { + "value": "#fbcfe8" + }, + "300": { + "value": "#f9a8d4" + }, + "400": { + "value": "#f472b6" + }, + "500": { + "value": "#ec4899" + }, + "600": { + "value": "#db2777" + }, + "700": { + "value": "#be185d" + }, + "800": { + "value": "#9d174d" + }, + "900": { + "value": "#831843" + }, + "950": { + "value": "#500724" + } + }, + "fuchsia": { + "50": { + "value": "#fdf4ff" + }, + "100": { + "value": "#fae8ff" + }, + "200": { + "value": "#f5d0fe" + }, + "300": { + "value": "#f0abfc" + }, + "400": { + "value": "#e879f9" + }, + "500": { + "value": "#d946ef" + }, + "600": { + "value": "#c026d3" + }, + "700": { + "value": "#a21caf" + }, + "800": { + "value": "#86198f" + }, + "900": { + "value": "#701a75" + }, + "950": { + "value": "#4a044e" + } + }, + "purple": { + "50": { + "value": "#faf5ff" + }, + "100": { + "value": "#f3e8ff" + }, + "200": { + "value": "#e9d5ff" + }, + "300": { + "value": "#d8b4fe" + }, + "400": { + "value": "#c084fc" + }, + "500": { + "value": "#a855f7" + }, + "600": { + "value": "#9333ea" + }, + "700": { + "value": "#7e22ce" + }, + "800": { + "value": "#6b21a8" + }, + "900": { + "value": "#581c87" + }, + "950": { + "value": "#3b0764" + } + }, + "violet": { + "50": { + "value": "#f5f3ff" + }, + "100": { + "value": "#ede9fe" + }, + "200": { + "value": "#ddd6fe" + }, + "300": { + "value": "#c4b5fd" + }, + "400": { + "value": "#a78bfa" + }, + "500": { + "value": "#8b5cf6" + }, + "600": { + "value": "#7c3aed" + }, + "700": { + "value": "#6d28d9" + }, + "800": { + "value": "#5b21b6" + }, + "900": { + "value": "#4c1d95" + }, + "950": { + "value": "#2e1065" + } + }, + "indigo": { + "50": { + "value": "#eef2ff" + }, + "100": { + "value": "#e0e7ff" + }, + "200": { + "value": "#c7d2fe" + }, + "300": { + "value": "#a5b4fc" + }, + "400": { + "value": "#818cf8" + }, + "500": { + "value": "#6366f1" + }, + "600": { + "value": "#4f46e5" + }, + "700": { + "value": "#4338ca" + }, + "800": { + "value": "#3730a3" + }, + "900": { + "value": "#312e81" + }, + "950": { + "value": "#1e1b4b" + } + }, + "blue": { + "50": { + "value": "#eff6ff" + }, + "100": { + "value": "#dbeafe" + }, + "200": { + "value": "#bfdbfe" + }, + "300": { + "value": "#93c5fd" + }, + "400": { + "value": "#60a5fa" + }, + "500": { + "value": "#3b82f6" + }, + "600": { + "value": "#2563eb" + }, + "700": { + "value": "#1d4ed8" + }, + "800": { + "value": "#1e40af" + }, + "900": { + "value": "#1e3a8a" + }, + "950": { + "value": "#172554" + } + }, + "sky": { + "50": { + "value": "#f0f9ff" + }, + "100": { + "value": "#e0f2fe" + }, + "200": { + "value": "#bae6fd" + }, + "300": { + "value": "#7dd3fc" + }, + "400": { + "value": "#38bdf8" + }, + "500": { + "value": "#0ea5e9" + }, + "600": { + "value": "#0284c7" + }, + "700": { + "value": "#0369a1" + }, + "800": { + "value": "#075985" + }, + "900": { + "value": "#0c4a6e" + }, + "950": { + "value": "#082f49" + } + }, + "cyan": { + "50": { + "value": "#ecfeff" + }, + "100": { + "value": "#cffafe" + }, + "200": { + "value": "#a5f3fc" + }, + "300": { + "value": "#67e8f9" + }, + "400": { + "value": "#22d3ee" + }, + "500": { + "value": "#06b6d4" + }, + "600": { + "value": "#0891b2" + }, + "700": { + "value": "#0e7490" + }, + "800": { + "value": "#155e75" + }, + "900": { + "value": "#164e63" + }, + "950": { + "value": "#083344" + } + }, + "teal": { + "50": { + "value": "#f0fdfa" + }, + "100": { + "value": "#ccfbf1" + }, + "200": { + "value": "#99f6e4" + }, + "300": { + "value": "#5eead4" + }, + "400": { + "value": "#2dd4bf" + }, + "500": { + "value": "#14b8a6" + }, + "600": { + "value": "#0d9488" + }, + "700": { + "value": "#0f766e" + }, + "800": { + "value": "#115e59" + }, + "900": { + "value": "#134e4a" + }, + "950": { + "value": "#042f2e" + } + }, + "emerald": { + "50": { + "value": "#ecfdf5" + }, + "100": { + "value": "#d1fae5" + }, + "200": { + "value": "#a7f3d0" + }, + "300": { + "value": "#6ee7b7" + }, + "400": { + "value": "#34d399" + }, + "500": { + "value": "#10b981" + }, + "600": { + "value": "#059669" + }, + "700": { + "value": "#047857" + }, + "800": { + "value": "#065f46" + }, + "900": { + "value": "#064e3b" + }, + "950": { + "value": "#022c22" + } + }, + "green": { + "50": { + "value": "#f0fdf4" + }, + "100": { + "value": "#dcfce7" + }, + "200": { + "value": "#bbf7d0" + }, + "300": { + "value": "#86efac" + }, + "400": { + "value": "#4ade80" + }, + "500": { + "value": "#22c55e" + }, + "600": { + "value": "#16a34a" + }, + "700": { + "value": "#15803d" + }, + "800": { + "value": "#166534" + }, + "900": { + "value": "#14532d" + }, + "950": { + "value": "#052e16" + } + }, + "lime": { + "50": { + "value": "#f7fee7" + }, + "100": { + "value": "#ecfccb" + }, + "200": { + "value": "#d9f99d" + }, + "300": { + "value": "#bef264" + }, + "400": { + "value": "#a3e635" + }, + "500": { + "value": "#84cc16" + }, + "600": { + "value": "#65a30d" + }, + "700": { + "value": "#4d7c0f" + }, + "800": { + "value": "#3f6212" + }, + "900": { + "value": "#365314" + }, + "950": { + "value": "#1a2e05" + } + }, + "yellow": { + "50": { + "value": "#fefce8" + }, + "100": { + "value": "#fef9c3" + }, + "200": { + "value": "#fef08a" + }, + "300": { + "value": "#fde047" + }, + "400": { + "value": "#facc15" + }, + "500": { + "value": "#eab308" + }, + "600": { + "value": "#ca8a04" + }, + "700": { + "value": "#a16207" + }, + "800": { + "value": "#854d0e" + }, + "900": { + "value": "#713f12" + }, + "950": { + "value": "#422006" + } + }, + "amber": { + "50": { + "value": "#fffbeb" + }, + "100": { + "value": "#fef3c7" + }, + "200": { + "value": "#fde68a" + }, + "300": { + "value": "#fcd34d" + }, + "400": { + "value": "#fbbf24" + }, + "500": { + "value": "#f59e0b" + }, + "600": { + "value": "#d97706" + }, + "700": { + "value": "#b45309" + }, + "800": { + "value": "#92400e" + }, + "900": { + "value": "#78350f" + }, + "950": { + "value": "#451a03" + } + }, + "orange": { + "50": { + "value": "#fff7ed" + }, + "100": { + "value": "#ffedd5" + }, + "200": { + "value": "#fed7aa" + }, + "300": { + "value": "#fdba74" + }, + "400": { + "value": "#fb923c" + }, + "500": { + "value": "#f97316" + }, + "600": { + "value": "#ea580c" + }, + "700": { + "value": "#c2410c" + }, + "800": { + "value": "#9a3412" + }, + "900": { + "value": "#7c2d12" + }, + "950": { + "value": "#431407" + } + }, + "red": { + "50": { + "value": "#fef2f2" + }, + "100": { + "value": "#fee2e2" + }, + "200": { + "value": "#fecaca" + }, + "300": { + "value": "#fca5a5" + }, + "400": { + "value": "#f87171" + }, + "500": { + "value": "#ef4444" + }, + "600": { + "value": "#dc2626" + }, + "700": { + "value": "#b91c1c" + }, + "800": { + "value": "#991b1b" + }, + "900": { + "value": "#7f1d1d" + }, + "950": { + "value": "#450a0a" + } + }, + "neutral": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f5f5f5" + }, + "200": { + "value": "#e5e5e5" + }, + "300": { + "value": "#d4d4d4" + }, + "400": { + "value": "#a3a3a3" + }, + "500": { + "value": "#737373" + }, + "600": { + "value": "#525252" + }, + "700": { + "value": "#404040" + }, + "800": { + "value": "#262626" + }, + "900": { + "value": "#171717" + }, + "950": { + "value": "#0a0a0a" + } + }, + "stone": { + "50": { + "value": "#fafaf9" + }, + "100": { + "value": "#f5f5f4" + }, + "200": { + "value": "#e7e5e4" + }, + "300": { + "value": "#d6d3d1" + }, + "400": { + "value": "#a8a29e" + }, + "500": { + "value": "#78716c" + }, + "600": { + "value": "#57534e" + }, + "700": { + "value": "#44403c" + }, + "800": { + "value": "#292524" + }, + "900": { + "value": "#1c1917" + }, + "950": { + "value": "#0c0a09" + } + }, + "zinc": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f4f4f5" + }, + "200": { + "value": "#e4e4e7" + }, + "300": { + "value": "#d4d4d8" + }, + "400": { + "value": "#a1a1aa" + }, + "500": { + "value": "#71717a" + }, + "600": { + "value": "#52525b" + }, + "700": { + "value": "#3f3f46" + }, + "800": { + "value": "#27272a" + }, + "900": { + "value": "#18181b" + }, + "950": { + "value": "#09090b" + } + }, + "gray": { + "50": { + "value": "#f9fafb" + }, + "100": { + "value": "#f3f4f6" + }, + "200": { + "value": "#e5e7eb" + }, + "300": { + "value": "#d1d5db" + }, + "400": { + "value": "#9ca3af" + }, + "500": { + "value": "#6b7280" + }, + "600": { + "value": "#4b5563" + }, + "700": { + "value": "#374151" + }, + "800": { + "value": "#1f2937" + }, + "900": { + "value": "#111827" + }, + "950": { + "value": "#030712" + } + }, + "slate": { + "50": { + "value": "#f8fafc" + }, + "100": { + "value": "#f1f5f9" + }, + "200": { + "value": "#e2e8f0" + }, + "300": { + "value": "#cbd5e1" + }, + "400": { + "value": "#94a3b8" + }, + "500": { + "value": "#64748b" + }, + "600": { + "value": "#475569" + }, + "700": { + "value": "#334155" + }, + "800": { + "value": "#1e293b" + }, + "900": { + "value": "#0f172a" + }, + "950": { + "value": "#020617" + } + } + }, + "blurs": { + "xs": { + "value": "4px" + }, + "sm": { + "value": "8px" + }, + "md": { + "value": "12px" + }, + "lg": { + "value": "16px" + }, + "xl": { + "value": "24px" + }, + "2xl": { + "value": "40px" + }, + "3xl": { + "value": "64px" + } + }, + "spacing": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + } + }, + "sizes": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + }, + "xs": { + "value": "20rem" + }, + "sm": { + "value": "24rem" + }, + "md": { + "value": "28rem" + }, + "lg": { + "value": "32rem" + }, + "xl": { + "value": "36rem" + }, + "2xl": { + "value": "42rem" + }, + "3xl": { + "value": "48rem" + }, + "4xl": { + "value": "56rem" + }, + "5xl": { + "value": "64rem" + }, + "6xl": { + "value": "72rem" + }, + "7xl": { + "value": "80rem" + }, + "8xl": { + "value": "90rem" + }, + "prose": { + "value": "65ch" + }, + "full": { + "value": "100%" + }, + "min": { + "value": "min-content" + }, + "max": { + "value": "max-content" + }, + "fit": { + "value": "fit-content" + } + }, + "animations": { + "spin": { + "value": "spin 1s linear infinite" + }, + "ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" + }, + "pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" + }, + "bounce": { + "value": "bounce 1s infinite" + } + } + }, + "textStyles": { + "xs": { + "value": { + "fontSize": "0.75rem", + "lineHeight": "calc(1 / 0.75)" + } + }, + "sm": { + "value": { + "fontSize": "0.875rem", + "lineHeight": "calc(1.25 / 0.875)" + } + }, + "md": { + "value": { + "fontSize": "1rem", + "lineHeight": "calc(1.5 / 1)" + } + }, + "lg": { + "value": { + "fontSize": "1.125rem", + "lineHeight": "calc(1.75 / 1.125)" + } + }, + "xl": { + "value": { + "fontSize": "1.25rem", + "lineHeight": "calc(1.75 / 1.25)" + } + }, + "2xl": { + "value": { + "fontSize": "1.5rem", + "lineHeight": "calc(2 / 1.5)" + } + }, + "3xl": { + "value": { + "fontSize": "1.875rem", + "lineHeight": "calc(2.25 / 1.875)" + } + }, + "4xl": { + "value": { + "fontSize": "2.25rem", + "lineHeight": "calc(2.5 / 2.25)" + } + }, + "5xl": { + "value": { + "fontSize": "3rem", + "lineHeight": "1" + } + }, + "6xl": { + "value": { + "fontSize": "3.75rem", + "lineHeight": "1" + } + }, + "7xl": { + "value": { + "fontSize": "4.5rem", + "lineHeight": "1" + } + }, + "8xl": { + "value": { + "fontSize": "6rem", + "lineHeight": "1" + } + }, + "9xl": { + "value": { + "fontSize": "8rem", + "lineHeight": "1" + } + } + }, + "containerSizes": { + "xs": "320px", + "sm": "384px", + "md": "448px", + "lg": "512px", + "xl": "576px", + "2xl": "672px", + "3xl": "768px", + "4xl": "896px", + "5xl": "1024px", + "6xl": "1152px", + "7xl": "1280px", + "8xl": "1440px" + }, + "recipes": { + "button": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + } + } + } + }, + "buttonWithCompoundVariants": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "unstyled": {} + }, + "size": { + "sm": { + "fontSize": "1rem" + }, + "md": { + "fontSize": "2rem" + }, + "lg": { + "fontSize": "3rem" + } + } + }, + "compoundVariants": [ + { + "visual": "solid", + "css": { + "color": "blue" + } + }, + { + "size": "md", + "visual": "outline", + "css": { + "color": "green" + } + }, + { + "size": [ + "sm", + "lg" + ], + "visual": "outline", + "css": { + "color": "red" + } + } + ], + "defaultVariants": { + "visual": "unstyled" + } + } + }, + "slotRecipes": { + "slotButton": { + "className": "slot-button", + "slots": [ + "root", + "icon" + ], + "base": { + "root": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "icon": { + "fontSize": "2xl" + } + }, + "variants": { + "visual": { + "solid": { + "root": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "icon": { + "color": "white" + } + }, + "outline": { + "root": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "icon": { + "border": "1px solid" + } + }, + "unstyled": {} + } + }, + "defaultVariants": { + "visual": "unstyled" + } + } + } + }, + "utilities": { + "aspectRatio": { + "className": "asp", + "values": "aspectRatios", + "group": "Layout" + }, + "boxDecorationBreak": { + "className": "bx-db", + "group": "Layout", + "transform": { + "__function": "transform" + } + }, + "zIndex": { + "className": "z", + "values": "zIndex", + "group": "Visibility" + }, + "boxSizing": { + "className": "bx-s", + "group": "System" + }, + "objectPosition": { + "className": "obj-p", + "group": "Layout" + }, + "objectFit": { + "className": "obj-f", + "group": "Layout" + }, + "overscrollBehavior": { + "className": "ovs-b", + "group": "Scroll" + }, + "overscrollBehaviorX": { + "className": "ovs-bx", + "group": "Scroll" + }, + "overscrollBehaviorY": { + "className": "ovs-by", + "group": "Scroll" + }, + "position": { + "className": "pos", + "shorthand": "pos", + "group": "Position" + }, + "top": { + "className": "top", + "values": "spacing", + "group": "Position" + }, + "left": { + "className": "left", + "values": "spacing", + "group": "Position" + }, + "inset": { + "className": "inset", + "group": "Position", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + } + }, + "insetInline": { + "className": "inset-x", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetX" + ] + }, + "insetBlock": { + "className": "inset-y", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetY" + ] + }, + "insetBlockEnd": { + "className": "inset-be", + "values": "spacing", + "group": "Position" + }, + "insetBlockStart": { + "className": "inset-bs", + "values": "spacing", + "group": "Position" + }, + "insetInlineEnd": { + "className": "inset-e", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetEnd", + "end" + ] + }, + "insetInlineStart": { + "className": "inset-s", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetStart", + "start" + ] + }, + "right": { + "className": "right", + "values": "spacing", + "group": "Position" + }, + "bottom": { + "className": "bottom", + "values": "spacing", + "group": "Position" + }, + "float": { + "className": "float", + "values": [ + "start", + "end" + ], + "property": "float", + "group": "Position", + "transform": { + "__function": "transform" + } + }, + "visibility": { + "className": "vis", + "group": "Visibility" + }, + "display": { + "className": "d", + "group": "Display" + }, + "hideFrom": { + "className": "hide", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "hideBelow": { + "className": "show", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "flexBasis": { + "className": "flex-b", + "group": "Flex Layout", + "values": { + "__function": "values", + "probe": { + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "full": "100%" + } + } + }, + "flex": { + "className": "flex", + "group": "Flex Layout", + "values": { + "1": "1 1 0%", + "auto": "1 1 auto", + "initial": "0 1 auto", + "none": "none" + } + }, + "flexDirection": { + "className": "flex-d", + "group": "Flex Layout", + "shorthand": "flexDir" + }, + "flexGrow": { + "className": "flex-g", + "group": "Flex Layout" + }, + "flexShrink": { + "className": "flex-sh", + "group": "Flex Layout" + }, + "gridTemplateColumns": { + "className": "grid-tc", + "group": "Grid Layout" + }, + "gridTemplateRows": { + "className": "grid-tr", + "group": "Grid Layout" + }, + "gridColumn": { + "className": "grid-c", + "group": "Grid Layout" + }, + "gridRow": { + "className": "grid-r", + "group": "Grid Layout" + }, + "gridColumnStart": { + "className": "grid-cs", + "group": "Grid Layout" + }, + "gridColumnEnd": { + "className": "grid-ce", + "group": "Grid Layout" + }, + "gridAutoFlow": { + "className": "grid-af", + "group": "Grid Layout" + }, + "gridAutoColumns": { + "className": "grid-ac", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gridAutoRows": { + "className": "grid-ar", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gap": { + "className": "gap", + "group": "Flex Layout", + "values": "spacing" + }, + "gridGap": { + "className": "grid-g", + "group": "Grid Layout", + "values": "spacing" + }, + "gridRowGap": { + "className": "grid-rg", + "group": "Grid Layout", + "values": "spacing" + }, + "gridColumnGap": { + "className": "grid-cg", + "group": "Grid Layout", + "values": "spacing" + }, + "rowGap": { + "className": "rg", + "group": "Grid Layout", + "values": "spacing" + }, + "columnGap": { + "className": "cg", + "group": "Grid Layout", + "values": "spacing" + }, + "justifyContent": { + "className": "jc", + "group": "Flex Layout" + }, + "alignContent": { + "className": "ac", + "group": "Flex Layout" + }, + "alignItems": { + "className": "ai", + "group": "Flex Layout" + }, + "alignSelf": { + "className": "as", + "group": "Flex Layout" + }, + "padding": { + "className": "p", + "shorthand": "p", + "values": "spacing", + "group": "Padding" + }, + "paddingLeft": { + "className": "pl", + "shorthand": "pl", + "values": "spacing", + "group": "Padding" + }, + "paddingRight": { + "className": "pr", + "shorthand": "pr", + "values": "spacing", + "group": "Padding" + }, + "paddingTop": { + "className": "pt", + "shorthand": "pt", + "values": "spacing", + "group": "Padding" + }, + "paddingBottom": { + "className": "pb", + "shorthand": "pb", + "values": "spacing", + "group": "Padding" + }, + "paddingBlock": { + "className": "py", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "py", + "paddingY" + ] + }, + "paddingBlockEnd": { + "className": "pbe", + "values": "spacing", + "group": "Padding" + }, + "paddingBlockStart": { + "className": "pbs", + "values": "spacing", + "group": "Padding" + }, + "paddingInline": { + "className": "px", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "paddingX", + "px" + ] + }, + "paddingInlineEnd": { + "className": "pe", + "shorthand": [ + "pe", + "paddingEnd" + ], + "values": "spacing", + "group": "Padding" + }, + "paddingInlineStart": { + "className": "ps", + "shorthand": [ + "ps", + "paddingStart" + ], + "values": "spacing", + "group": "Padding" + }, + "marginLeft": { + "className": "ml", + "shorthand": "ml", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginRight": { + "className": "mr", + "shorthand": "mr", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginTop": { + "className": "mt", + "shorthand": "mt", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBottom": { + "className": "mb", + "shorthand": "mb", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "margin": { + "className": "m", + "shorthand": "m", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlock": { + "className": "my", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "my", + "marginY" + ] + }, + "marginBlockEnd": { + "className": "mbe", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlockStart": { + "className": "mbs", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInline": { + "className": "mx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "mx", + "marginX" + ] + }, + "marginInlineEnd": { + "className": "me", + "shorthand": [ + "me", + "marginEnd" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInlineStart": { + "className": "ms", + "shorthand": [ + "ms", + "marginStart" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "spaceX": { + "className": "sx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginInlineStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "spaceY": { + "className": "sy", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginBlockStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "outlineWidth": { + "className": "ring-w", + "shorthand": "ringWidth", + "values": "borderWidths", + "group": "Border" + }, + "outlineColor": { + "className": "ring-c", + "values": "colors", + "group": "Color", + "shorthand": "ringColor", + "transform": { + "__function": "transform", + "colorMix": "outlineColor" + } + }, + "outline": { + "className": "ring", + "shorthand": "ring", + "values": "borders", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "outlineOffset": { + "className": "ring-o", + "shorthand": "ringOffset", + "values": "spacing", + "group": "Border" + }, + "focusRing": { + "className": "focus-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusVisibleRing": { + "className": "focus-v-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusRingColor": { + "className": "focus-ring-c", + "values": "colors", + "group": "Focus Ring", + "transform": { + "__function": "transform", + "colorMix": "--focus-ring-color-prop" + } + }, + "focusRingOffset": { + "className": "focus-ring-o", + "values": "spacing", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingWidth": { + "className": "focus-ring-w", + "values": "borderWidths", + "property": "outlineWidth", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingStyle": { + "className": "focus-ring-s", + "values": "borderStyles", + "property": "outlineStyle", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "divideX": { + "className": "dvd-x", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideY": { + "className": "dvd-y", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideColor": { + "className": "dvd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideStyle": { + "className": "dvd-s", + "property": "borderStyle", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "width": { + "shorthand": "w", + "className": "w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "inlineSize": { + "className": "w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minWidth": { + "shorthand": "minW", + "className": "min-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minInlineSize": { + "className": "min-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxWidth": { + "shorthand": "maxW", + "className": "max-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxInlineSize": { + "className": "max-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "height": { + "shorthand": "h", + "className": "h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "blockSize": { + "className": "h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minHeight": { + "shorthand": "minH", + "className": "min-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minBlockSize": { + "className": "min-h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxHeight": { + "shorthand": "maxH", + "className": "max-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxBlockSize": { + "className": "max-b", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "boxSize": { + "className": "size", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + }, + "transform": { + "__function": "transform" + } + }, + "color": { + "className": "c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "color" + } + }, + "fontFamily": { + "className": "ff", + "values": "fonts", + "group": "Typography" + }, + "fontSize": { + "className": "fs", + "values": "fontSizes", + "group": "Typography" + }, + "fontSizeAdjust": { + "className": "fs-a", + "group": "Typography" + }, + "fontPalette": { + "className": "fp", + "group": "Typography" + }, + "fontKerning": { + "className": "fk", + "group": "Typography" + }, + "fontFeatureSettings": { + "className": "ff-s", + "group": "Typography" + }, + "fontWeight": { + "className": "fw", + "values": "fontWeights", + "group": "Typography" + }, + "fontSmoothing": { + "className": "fsmt", + "group": "Typography", + "values": { + "antialiased": "antialiased", + "subpixel-antialiased": "auto" + }, + "transform": { + "__function": "transform" + } + }, + "fontVariant": { + "className": "fv", + "group": "Typography" + }, + "fontVariantAlternates": { + "className": "fv-alt", + "group": "Typography" + }, + "fontVariantCaps": { + "className": "fv-caps", + "group": "Typography" + }, + "fontVariationSettings": { + "className": "fv-s", + "group": "Typography" + }, + "fontVariantNumeric": { + "className": "fv-num", + "group": "Typography" + }, + "letterSpacing": { + "className": "ls", + "values": "letterSpacings", + "group": "Typography" + }, + "lineHeight": { + "className": "lh", + "values": "lineHeights", + "group": "Typography" + }, + "textAlign": { + "className": "ta", + "group": "Typography" + }, + "textDecoration": { + "className": "td", + "group": "Typography" + }, + "textDecorationColor": { + "className": "td-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textDecorationColor" + }, + "group": "Typography" + }, + "textEmphasisColor": { + "className": "te-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textEmphasisColor" + }, + "group": "Typography" + }, + "textDecorationStyle": { + "className": "td-s", + "group": "Typography" + }, + "textDecorationThickness": { + "className": "td-t", + "group": "Typography" + }, + "textUnderlineOffset": { + "className": "tu-o", + "group": "Typography" + }, + "textTransform": { + "className": "tt", + "group": "Typography" + }, + "textIndent": { + "className": "ti", + "group": "Typography", + "values": "spacing" + }, + "textShadow": { + "className": "tsh", + "values": "shadows", + "group": "Typography" + }, + "textShadowColor": { + "shorthand": "textShadowColor", + "className": "tsh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--text-shadow-color" + }, + "group": "Typography" + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "WebkitTextFillColor" + }, + "group": "Typography" + }, + "textOverflow": { + "className": "tov", + "group": "Typography" + }, + "verticalAlign": { + "className": "va", + "group": "Typography" + }, + "wordBreak": { + "className": "wb", + "group": "Typography" + }, + "textWrap": { + "className": "tw", + "values": [ + "wrap", + "balance", + "nowrap" + ], + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "truncate": { + "className": "trunc", + "values": { + "type": "boolean" + }, + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "lineClamp": { + "className": "lc", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "listStyleType": { + "className": "li-t", + "group": "List" + }, + "listStylePosition": { + "className": "li-pos", + "group": "List" + }, + "listStyleImage": { + "className": "li-img", + "group": "List", + "values": "assets" + }, + "listStyle": { + "className": "li-s", + "group": "List" + }, + "backgroundPosition": { + "shorthand": "bgPosition", + "className": "bg-p", + "group": "Background" + }, + "backgroundPositionX": { + "shorthand": "bgPositionX", + "className": "bg-p-x", + "group": "Background" + }, + "backgroundPositionY": { + "shorthand": "bgPositionY", + "className": "bg-p-y", + "group": "Background" + }, + "backgroundAttachment": { + "shorthand": "bgAttachment", + "className": "bg-a", + "group": "Background" + }, + "backgroundClip": { + "shorthand": "bgClip", + "className": "bg-cp", + "group": "Background", + "transform": { + "__function": "transform" + } + }, + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "background" + } + }, + "backgroundColor": { + "shorthand": "bgColor", + "className": "bg-c", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "backgroundColor" + } + }, + "backgroundOrigin": { + "shorthand": "bgOrigin", + "className": "bg-o", + "group": "Background" + }, + "backgroundImage": { + "shorthand": "bgImage", + "className": "bg-i", + "values": "assets", + "group": "Background" + }, + "backgroundRepeat": { + "shorthand": "bgRepeat", + "className": "bg-r", + "group": "Background" + }, + "backgroundBlendMode": { + "shorthand": "bgBlendMode", + "className": "bg-bm", + "group": "Background" + }, + "backgroundSize": { + "shorthand": "bgSize", + "className": "bg-s", + "group": "Background" + }, + "backgroundGradient": { + "shorthand": "bgGradient", + "className": "bg-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundLinear": { + "shorthand": "bgLinear", + "className": "bg-linear", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundRadial": { + "shorthand": "bgRadial", + "className": "bg-radial", + "group": "Background Gradient", + "values": "gradients", + "transform": { + "__function": "transform" + } + }, + "backgroundConic": { + "shorthand": "bgConic", + "className": "bg-conic", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "textGradient": { + "className": "txt-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "gradientFromPosition": { + "className": "grad-from-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientToPosition": { + "className": "grad-to-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientFrom": { + "className": "grad-from", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-from" + } + }, + "gradientTo": { + "className": "grad-to", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-to" + } + }, + "gradientVia": { + "className": "grad-via", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientViaPosition": { + "className": "grad-via-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "borderRadius": { + "className": "bdr", + "shorthand": "rounded", + "values": "radii", + "group": "Border Radius" + }, + "borderTopLeftRadius": { + "className": "bdr-tl", + "shorthand": "roundedTopLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRightRadius": { + "className": "bdr-tr", + "shorthand": "roundedTopRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomRightRadius": { + "className": "bdr-br", + "shorthand": "roundedBottomRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomLeftRadius": { + "className": "bdr-bl", + "shorthand": "roundedBottomLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRadius": { + "className": "bdr-t", + "shorthand": "roundedTop", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderRightRadius": { + "className": "bdr-r", + "shorthand": "roundedRight", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderBottomRadius": { + "className": "bdr-b", + "shorthand": "roundedBottom", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderLeftRadius": { + "className": "bdr-l", + "shorthand": "roundedLeft", + "values": "radii", + "property": "borderRadius", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderStartStartRadius": { + "className": "bdr-ss", + "shorthand": "roundedStartStart", + "values": "radii", + "group": "Border Radius" + }, + "borderStartEndRadius": { + "className": "bdr-se", + "shorthand": "roundedStartEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderStartRadius": { + "className": "bdr-s", + "values": "radii", + "property": "borderRadius", + "shorthand": "roundedStart", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderEndStartRadius": { + "className": "bdr-es", + "shorthand": "roundedEndStart", + "values": "radii", + "group": "Border Radius" + }, + "borderEndEndRadius": { + "className": "bdr-ee", + "shorthand": "roundedEndEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderEndRadius": { + "className": "bdr-e", + "shorthand": "roundedEnd", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "border": { + "className": "bd", + "values": "borders", + "group": "Border" + }, + "borderWidth": { + "className": "bd-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderTopWidth": { + "className": "bd-t-w", + "values": "borderWidths", + "group": "Border" + }, + "borderLeftWidth": { + "className": "bd-l-w", + "values": "borderWidths", + "group": "Border" + }, + "borderRightWidth": { + "className": "bd-r-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBottomWidth": { + "className": "bd-b-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBlockStartWidth": { + "className": "bd-bs-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderBlockEndWidth": { + "className": "bd-be-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderColor": { + "className": "bd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderColor" + } + }, + "borderInline": { + "className": "bd-x", + "values": "borders", + "group": "Border", + "shorthand": "borderX" + }, + "borderInlineWidth": { + "className": "bd-x-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderXWidth" + }, + "borderInlineColor": { + "className": "bd-x-c", + "values": "colors", + "group": "Border", + "shorthand": "borderXColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineColor" + } + }, + "borderBlock": { + "className": "bd-y", + "values": "borders", + "group": "Border", + "shorthand": "borderY" + }, + "borderBlockWidth": { + "className": "bd-y-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderYWidth" + }, + "borderBlockColor": { + "className": "bd-y-c", + "values": "colors", + "group": "Border", + "shorthand": "borderYColor", + "transform": { + "__function": "transform", + "colorMix": "borderBlockColor" + } + }, + "borderLeft": { + "className": "bd-l", + "values": "borders", + "group": "Border" + }, + "borderLeftColor": { + "className": "bd-l-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderLeftColor" + } + }, + "borderInlineStart": { + "className": "bd-s", + "values": "borders", + "group": "Border", + "shorthand": "borderStart" + }, + "borderInlineStartWidth": { + "className": "bd-s-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderStartWidth" + }, + "borderInlineStartColor": { + "className": "bd-s-c", + "values": "colors", + "group": "Border", + "shorthand": "borderStartColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineStartColor" + } + }, + "borderRight": { + "className": "bd-r", + "values": "borders", + "group": "Border" + }, + "borderRightColor": { + "className": "bd-r-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderRightColor" + } + }, + "borderInlineEnd": { + "className": "bd-e", + "values": "borders", + "group": "Border", + "shorthand": "borderEnd" + }, + "borderInlineEndWidth": { + "className": "bd-e-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderEndWidth" + }, + "borderInlineEndColor": { + "className": "bd-e-c", + "values": "colors", + "group": "Border", + "shorthand": "borderEndColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineEndColor" + } + }, + "borderTop": { + "className": "bd-t", + "values": "borders", + "group": "Border" + }, + "borderTopColor": { + "className": "bd-t-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderTopColor" + } + }, + "borderBottom": { + "className": "bd-b", + "values": "borders", + "group": "Border" + }, + "borderBottomColor": { + "className": "bd-b-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBottomColor" + } + }, + "borderBlockEnd": { + "className": "bd-be", + "values": "borders", + "group": "Border" + }, + "borderBlockEndColor": { + "className": "bd-be-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockEndColor" + } + }, + "borderBlockStart": { + "className": "bd-bs", + "values": "borders", + "group": "Border" + }, + "borderBlockStartColor": { + "className": "bd-bs-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockStartColor" + } + }, + "opacity": { + "className": "op", + "values": "opacity", + "group": "Background" + }, + "boxShadow": { + "shorthand": "shadow", + "className": "bx-sh", + "values": "shadows", + "group": "Shadow" + }, + "boxShadowColor": { + "shorthand": "shadowColor", + "className": "bx-sh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--shadow-color" + }, + "group": "Color" + }, + "mixBlendMode": { + "className": "mix-bm", + "group": "Effect" + }, + "filter": { + "className": "filter", + "group": "Effect", + "values": { + "auto": "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )" + } + }, + "brightness": { + "className": "brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "contrast": { + "className": "contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "grayscale": { + "className": "grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "hueRotate": { + "className": "hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "invert": { + "className": "invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "saturate": { + "className": "saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "sepia": { + "className": "sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "dropShadow": { + "className": "drop-shadow", + "group": "Effect", + "values": "dropShadows", + "transform": { + "__function": "transform" + } + }, + "blur": { + "className": "blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropFilter": { + "className": "bkdp", + "group": "Effect", + "values": { + "auto": "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )" + }, + "transform": { + "__function": "transform" + } + }, + "backdropBlur": { + "className": "bkdp-blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropBrightness": { + "className": "bkdp-brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropContrast": { + "className": "bkdp-contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropGrayscale": { + "className": "bkdp-grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropHueRotate": { + "className": "bkdp-hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropInvert": { + "className": "bkdp-invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropOpacity": { + "className": "bkdp-opacity", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSaturate": { + "className": "bkdp-saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSepia": { + "className": "bkdp-sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "borderCollapse": { + "className": "bd-cl", + "group": "Table" + }, + "borderSpacing": { + "className": "bd-sp", + "group": "Table", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "auto": "var(--border-spacing-x) var(--border-spacing-y)" + } + } + }, + "borderSpacingX": { + "className": "bd-sx", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "borderSpacingY": { + "className": "bd-sy", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "tableLayout": { + "className": "tbl", + "group": "Table" + }, + "transitionTimingFunction": { + "className": "trs-tmf", + "values": "easings", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionDelay": { + "className": "trs-dly", + "values": "durations", + "group": "Transition" + }, + "transitionDuration": { + "className": "trs-dur", + "values": "durations", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionProperty": { + "className": "trs-prop", + "group": "Transition", + "values": { + "common": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", + "colors": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke", + "size": "width, height, min-width, max-width, min-height, max-height", + "position": "left, right, top, bottom, inset, inset-inline, inset-block", + "background": "background, background-color, background-image, background-position" + }, + "transform": { + "__function": "transform" + } + }, + "transition": { + "className": "trs", + "values": [ + "all", + "common", + "size", + "position", + "background", + "colors", + "opacity", + "shadow", + "transform" + ], + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "animation": { + "className": "anim", + "values": "animations", + "group": "Animation" + }, + "animationName": { + "className": "anim-n", + "values": "keyframes", + "group": "Animation" + }, + "animationTimingFunction": { + "className": "anim-tmf", + "values": "easings", + "group": "Animation" + }, + "animationDuration": { + "className": "anim-dur", + "values": "durations", + "group": "Animation" + }, + "animationDelay": { + "className": "anim-dly", + "values": "durations", + "group": "Animation" + }, + "animationPlayState": { + "className": "anim-ps", + "group": "Animation" + }, + "animationComposition": { + "className": "anim-comp", + "group": "Animation" + }, + "animationFillMode": { + "className": "anim-fm", + "group": "Animation" + }, + "animationDirection": { + "className": "anim-dir", + "group": "Animation" + }, + "animationIterationCount": { + "className": "anim-ic", + "group": "Animation" + }, + "animationRange": { + "className": "anim-r", + "group": "Animation" + }, + "animationState": { + "className": "anim-s", + "group": "Animation" + }, + "animationRangeStart": { + "className": "anim-rs", + "group": "Animation" + }, + "animationRangeEnd": { + "className": "anim-re", + "group": "Animation" + }, + "animationTimeline": { + "className": "anim-tl", + "group": "Animation" + }, + "transformOrigin": { + "className": "trf-o", + "group": "Transform" + }, + "transformBox": { + "className": "trf-b", + "group": "Transform" + }, + "transformStyle": { + "className": "trf-s", + "group": "Transform" + }, + "transform": { + "className": "trf", + "group": "Transform" + }, + "rotate": { + "className": "rotate", + "group": "Transform", + "property": "rotate", + "values": { + "auto": "var(--rotate-x) var(--rotate-y)", + "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)" + } + }, + "rotateX": { + "className": "rotate-x", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateY": { + "className": "rotate-y", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateZ": { + "className": "rotate-z", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "scale": { + "className": "scale", + "group": "Transform", + "property": "scale", + "values": { + "auto": "var(--scale-x) var(--scale-y)" + } + }, + "scaleX": { + "className": "scale-x", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "scaleY": { + "className": "scale-y", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "translate": { + "className": "translate", + "group": "Transform", + "property": "translate", + "values": { + "auto": "var(--translate-x) var(--translate-y)", + "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)" + } + }, + "translateX": { + "shorthand": "x", + "className": "translate-x", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateY": { + "shorthand": "y", + "className": "translate-y", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateZ": { + "shorthand": "z", + "className": "translate-z", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "accentColor": { + "className": "ac-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "accentColor" + }, + "group": "Color" + }, + "caretColor": { + "className": "ca-c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "caretColor" + } + }, + "scrollBehavior": { + "className": "scr-bhv", + "group": "Scroll" + }, + "scrollbar": { + "className": "scr-bar", + "values": [ + "visible", + "hidden" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollbarColor": { + "className": "scr-bar-c", + "values": "colors", + "group": "Scroll", + "transform": { + "__function": "transform", + "colorMix": "scrollbarColor" + } + }, + "scrollbarGutter": { + "className": "scr-bar-g", + "group": "Scroll" + }, + "scrollbarWidth": { + "className": "scr-bar-w", + "values": "sizes", + "group": "Scroll" + }, + "scrollMargin": { + "className": "scr-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginLeft": { + "className": "scr-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginRight": { + "className": "scr-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginTop": { + "className": "scr-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBottom": { + "className": "scr-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlock": { + "className": "scr-my", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginY" + ] + }, + "scrollMarginBlockEnd": { + "className": "scr-mbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlockStart": { + "className": "scr-mbt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInline": { + "className": "scr-mx", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginX" + ] + }, + "scrollMarginInlineEnd": { + "className": "scr-me", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInlineStart": { + "className": "scr-ms", + "values": "spacing", + "group": "Scroll" + }, + "scrollPadding": { + "className": "scr-p", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlock": { + "className": "scr-py", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingY" + ] + }, + "scrollPaddingBlockStart": { + "className": "scr-pbs", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlockEnd": { + "className": "scr-pbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInline": { + "className": "scr-px", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingX" + ] + }, + "scrollPaddingInlineEnd": { + "className": "scr-pe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInlineStart": { + "className": "scr-ps", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingLeft": { + "className": "scr-pl", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingRight": { + "className": "scr-pr", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingTop": { + "className": "scr-pt", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBottom": { + "className": "scr-pb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapAlign": { + "className": "scr-sa", + "group": "Scroll" + }, + "scrollSnapStop": { + "className": "scrs-s", + "group": "Scroll" + }, + "scrollSnapType": { + "className": "scrs-t", + "group": "Scroll", + "values": { + "none": "none", + "x": "x var(--scroll-snap-strictness)", + "y": "y var(--scroll-snap-strictness)", + "both": "both var(--scroll-snap-strictness)" + } + }, + "scrollSnapStrictness": { + "className": "scrs-strt", + "values": [ + "mandatory", + "proximity" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollSnapMargin": { + "className": "scrs-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginTop": { + "className": "scrs-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginBottom": { + "className": "scrs-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginLeft": { + "className": "scrs-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginRight": { + "className": "scrs-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapCoordinate": { + "className": "scrs-c", + "group": "Scroll" + }, + "scrollSnapDestination": { + "className": "scrs-d", + "group": "Scroll" + }, + "scrollSnapPointsX": { + "className": "scrs-px", + "group": "Scroll" + }, + "scrollSnapPointsY": { + "className": "scrs-py", + "group": "Scroll" + }, + "scrollSnapTypeX": { + "className": "scrs-tx", + "group": "Scroll" + }, + "scrollSnapTypeY": { + "className": "scrs-ty", + "group": "Scroll" + }, + "scrollTimeline": { + "className": "scrtl", + "group": "Scroll" + }, + "scrollTimelineAxis": { + "className": "scrtl-a", + "group": "Scroll" + }, + "scrollTimelineName": { + "className": "scrtl-n", + "group": "Scroll" + }, + "touchAction": { + "className": "tch-a", + "group": "Interactivity" + }, + "userSelect": { + "className": "us", + "group": "Interactivity", + "transform": { + "__function": "transform" + } + }, + "overflow": { + "className": "ov", + "group": "Scroll" + }, + "overflowWrap": { + "className": "ov-wrap", + "group": "Scroll" + }, + "overflowX": { + "className": "ov-x", + "group": "Scroll" + }, + "overflowY": { + "className": "ov-y", + "group": "Scroll" + }, + "overflowAnchor": { + "className": "ov-a", + "group": "Scroll" + }, + "overflowBlock": { + "className": "ov-b", + "group": "Scroll" + }, + "overflowInline": { + "className": "ov-i", + "group": "Scroll" + }, + "overflowClipBox": { + "className": "ovcp-bx", + "group": "Scroll" + }, + "overflowClipMargin": { + "className": "ovcp-m", + "group": "Scroll" + }, + "overscrollBehaviorBlock": { + "className": "ovs-bb", + "group": "Scroll" + }, + "overscrollBehaviorInline": { + "className": "ovs-bi", + "group": "Scroll" + }, + "fill": { + "className": "fill", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "fill" + } + }, + "stroke": { + "className": "stk", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "stroke" + } + }, + "strokeWidth": { + "className": "stk-w", + "values": "borderWidths", + "group": "Border" + }, + "strokeDasharray": { + "className": "stk-dsh", + "group": "Border" + }, + "strokeDashoffset": { + "className": "stk-do", + "group": "Border" + }, + "strokeLinecap": { + "className": "stk-lc", + "group": "Border" + }, + "strokeLinejoin": { + "className": "stk-lj", + "group": "Border" + }, + "strokeMiterlimit": { + "className": "stk-ml", + "group": "Border" + }, + "strokeOpacity": { + "className": "stk-op", + "group": "Border" + }, + "srOnly": { + "className": "sr", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "debug": { + "className": "debug", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "appearance": { + "className": "ap", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "backfaceVisibility": { + "className": "bfv", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "clipPath": { + "className": "cp-path", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "hyphens": { + "className": "hy", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "mask": { + "className": "msk", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskImage": { + "className": "msk-i", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskSize": { + "className": "msk-s", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "textSizeAdjust": { + "className": "txt-adj", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "container": { + "className": "cq", + "group": "Container" + }, + "containerName": { + "className": "cq-n", + "property": "containerName", + "values": "containerNames", + "group": "Container" + }, + "containerType": { + "className": "cq-t", + "group": "Container" + }, + "cursor": { + "className": "cursor", + "values": "cursor", + "group": "System" + } + }, + "outdir": "styled-system", + "validation": "warn" +} diff --git a/src/Css/tests/Fixtures/Panda/configs/codegen-strict-property-values.json b/src/Css/tests/Fixtures/Panda/configs/codegen-strict-property-values.json new file mode 100644 index 00000000000..5ed4516a733 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/configs/codegen-strict-property-values.json @@ -0,0 +1,4628 @@ +{ + "conditions": { + "hover": "&:is(:hover, [data-hover])", + "focus": "&:is(:focus, [data-focus])", + "focusWithin": "&:focus-within", + "focusVisible": "&:is(:focus-visible, [data-focus-visible])", + "disabled": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])", + "active": "&:is(:active, [data-active])", + "visited": "&:visited", + "target": "&:target", + "readOnly": "&:is(:read-only, [data-read-only], [aria-readonly=true])", + "readWrite": "&:read-write", + "empty": "&:is(:empty, [data-empty])", + "checked": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])", + "enabled": "&:enabled", + "expanded": "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])", + "highlighted": "&[data-highlighted]", + "complete": "&[data-complete]", + "incomplete": "&[data-incomplete]", + "dragging": "&[data-dragging]", + "before": "&::before", + "after": "&::after", + "firstLetter": "&::first-letter", + "firstLine": "&::first-line", + "marker": "&::marker, &::-webkit-details-marker", + "selection": "&::selection", + "file": "&::file-selector-button", + "backdrop": "&::backdrop", + "first": "&:first-child", + "last": "&:last-child", + "only": "&:only-child", + "even": "&:nth-child(even)", + "odd": "&:nth-child(odd)", + "firstOfType": "&:first-of-type", + "lastOfType": "&:last-of-type", + "onlyOfType": "&:only-of-type", + "peerFocus": ".peer:is(:focus, [data-focus]) ~ &", + "peerHover": ".peer:is(:hover, [data-hover]) ~ &", + "peerActive": ".peer:is(:active, [data-active]) ~ &", + "peerFocusWithin": ".peer:focus-within ~ &", + "peerFocusVisible": ".peer:is(:focus-visible, [data-focus-visible]) ~ &", + "peerDisabled": ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &", + "peerChecked": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &", + "peerInvalid": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &", + "peerExpanded": ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &", + "peerPlaceholderShown": ".peer:placeholder-shown ~ &", + "groupFocus": ".group:is(:focus, [data-focus]) &", + "groupHover": ".group:is(:hover, [data-hover]) &", + "groupActive": ".group:is(:active, [data-active]) &", + "groupFocusWithin": ".group:focus-within &", + "groupFocusVisible": ".group:is(:focus-visible, [data-focus-visible]) &", + "groupDisabled": ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &", + "groupChecked": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &", + "groupExpanded": ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &", + "groupInvalid": ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &", + "indeterminate": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])", + "required": "&:is(:required, [data-required], [aria-required=true])", + "valid": "&:is(:valid, [data-valid])", + "invalid": "&:is(:invalid, [data-invalid], [aria-invalid=true])", + "autofill": "&:autofill", + "inRange": "&:is(:in-range, [data-in-range])", + "outOfRange": "&:is(:out-of-range, [data-outside-range])", + "placeholder": "&::placeholder, &[data-placeholder]", + "placeholderShown": "&:is(:placeholder-shown, [data-placeholder-shown])", + "pressed": "&:is([aria-pressed=true], [data-pressed])", + "selected": "&:is([aria-selected=true], [data-selected])", + "grabbed": "&:is([aria-grabbed=true], [data-grabbed])", + "underValue": "&[data-state=under-value]", + "overValue": "&[data-state=over-value]", + "atValue": "&[data-state=at-value]", + "default": "&:default", + "optional": "&:optional", + "open": "&:is([open], [data-open], [data-state=\"open\"], :popover-open)", + "closed": "&:is([closed], [data-closed], [data-state=\"closed\"])", + "fullscreen": "&:is(:fullscreen, [data-fullscreen])", + "loading": "&:is([data-loading], [aria-busy=true])", + "hidden": "&:is([hidden], [data-hidden])", + "current": "&:is([aria-current=true], [data-current])", + "currentPage": "&[aria-current=page]", + "currentStep": "&[aria-current=step]", + "today": "&[data-today]", + "unavailable": "&[data-unavailable]", + "rangeStart": "&[data-range-start]", + "rangeEnd": "&[data-range-end]", + "now": "&[data-now]", + "topmost": "&[data-topmost]", + "motionReduce": "@media (prefers-reduced-motion: reduce)", + "motionSafe": "@media (prefers-reduced-motion: no-preference)", + "print": "@media print", + "landscape": "@media (orientation: landscape)", + "portrait": "@media (orientation: portrait)", + "dark": ".dark &", + "light": ".light &", + "osDark": "@media (prefers-color-scheme: dark)", + "osLight": "@media (prefers-color-scheme: light)", + "highContrast": "@media (forced-colors: active)", + "lessContrast": "@media (prefers-contrast: less)", + "moreContrast": "@media (prefers-contrast: more)", + "ltr": ":where([dir=ltr], :dir(ltr)) &", + "rtl": ":where([dir=rtl], :dir(rtl)) &", + "scrollbar": "&::-webkit-scrollbar", + "scrollbarThumb": "&::-webkit-scrollbar-thumb", + "scrollbarTrack": "&::-webkit-scrollbar-track", + "horizontal": "&[data-orientation=horizontal]", + "vertical": "&[data-orientation=vertical]", + "icon": "& :where(svg)", + "starting": "@starting-style", + "noscript": "@media (scripting: none)", + "invertedColors": "@media (inverted-colors: inverted)" + }, + "theme": { + "keyframes": { + "spin": { + "to": { + "transform": "rotate(360deg)" + } + }, + "ping": { + "75%, 100%": { + "transform": "scale(2)", + "opacity": "0" + } + }, + "pulse": { + "50%": { + "opacity": ".5" + } + }, + "bounce": { + "0%, 100%": { + "transform": "translateY(-25%)", + "animationTimingFunction": "cubic-bezier(0.8,0,1,1)" + }, + "50%": { + "transform": "none", + "animationTimingFunction": "cubic-bezier(0,0,0.2,1)" + } + } + }, + "breakpoints": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + }, + "tokens": { + "aspectRatios": { + "square": { + "value": "1 / 1" + }, + "landscape": { + "value": "4 / 3" + }, + "portrait": { + "value": "3 / 4" + }, + "wide": { + "value": "16 / 9" + }, + "ultrawide": { + "value": "18 / 5" + }, + "golden": { + "value": "1.618 / 1" + } + }, + "borders": { + "none": { + "value": "none" + } + }, + "easings": { + "default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + }, + "linear": { + "value": "linear" + }, + "in": { + "value": "cubic-bezier(0.4, 0, 1, 1)" + }, + "out": { + "value": "cubic-bezier(0, 0, 0.2, 1)" + }, + "in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + } + }, + "durations": { + "fastest": { + "value": "50ms" + }, + "faster": { + "value": "100ms" + }, + "fast": { + "value": "150ms" + }, + "normal": { + "value": "200ms" + }, + "slow": { + "value": "300ms" + }, + "slower": { + "value": "400ms" + }, + "slowest": { + "value": "500ms" + } + }, + "radii": { + "xs": { + "value": "0.125rem" + }, + "sm": { + "value": "0.25rem" + }, + "md": { + "value": "0.375rem" + }, + "lg": { + "value": "0.5rem" + }, + "xl": { + "value": "0.75rem" + }, + "2xl": { + "value": "1rem" + }, + "3xl": { + "value": "1.5rem" + }, + "4xl": { + "value": "2rem" + }, + "full": { + "value": "9999px" + } + }, + "fontWeights": { + "thin": { + "value": "100" + }, + "extralight": { + "value": "200" + }, + "light": { + "value": "300" + }, + "normal": { + "value": "400" + }, + "medium": { + "value": "500" + }, + "semibold": { + "value": "600" + }, + "bold": { + "value": "700" + }, + "extrabold": { + "value": "800" + }, + "black": { + "value": "900" + } + }, + "lineHeights": { + "none": { + "value": "1" + }, + "tight": { + "value": "1.25" + }, + "snug": { + "value": "1.375" + }, + "normal": { + "value": "1.5" + }, + "relaxed": { + "value": "1.625" + }, + "loose": { + "value": "2" + } + }, + "fonts": { + "sans": { + "value": [ + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "\"Segoe UI\"", + "Roboto", + "\"Helvetica Neue\"", + "Arial", + "\"Noto Sans\"", + "sans-serif", + "\"Apple Color Emoji\"", + "\"Segoe UI Emoji\"", + "\"Segoe UI Symbol\"", + "\"Noto Color Emoji\"" + ] + }, + "serif": { + "value": [ + "ui-serif", + "Georgia", + "Cambria", + "\"Times New Roman\"", + "Times", + "serif" + ] + }, + "mono": { + "value": [ + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "\"Liberation Mono\"", + "\"Courier New\"", + "monospace" + ] + } + }, + "letterSpacings": { + "tighter": { + "value": "-0.05em" + }, + "tight": { + "value": "-0.025em" + }, + "normal": { + "value": "0em" + }, + "wide": { + "value": "0.025em" + }, + "wider": { + "value": "0.05em" + }, + "widest": { + "value": "0.1em" + } + }, + "fontSizes": { + "2xs": { + "value": "0.5rem" + }, + "xs": { + "value": "0.75rem" + }, + "sm": { + "value": "0.875rem" + }, + "md": { + "value": "1rem" + }, + "lg": { + "value": "1.125rem" + }, + "xl": { + "value": "1.25rem" + }, + "2xl": { + "value": "1.5rem" + }, + "3xl": { + "value": "1.875rem" + }, + "4xl": { + "value": "2.25rem" + }, + "5xl": { + "value": "3rem" + }, + "6xl": { + "value": "3.75rem" + }, + "7xl": { + "value": "4.5rem" + }, + "8xl": { + "value": "6rem" + }, + "9xl": { + "value": "8rem" + } + }, + "shadows": { + "2xs": { + "value": "0 1px rgb(0 0 0 / 0.05)" + }, + "xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" + }, + "sm": { + "value": [ + "0 1px 3px 0 rgb(0 0 0 / 0.1)", + "0 1px 2px -1px rgb(0 0 0 / 0.1)" + ] + }, + "md": { + "value": [ + "0 4px 6px -1px rgb(0 0 0 / 0.1)", + "0 2px 4px -2px rgb(0 0 0 / 0.1)" + ] + }, + "lg": { + "value": [ + "0 10px 15px -3px rgb(0 0 0 / 0.1)", + "0 4px 6px -4px rgb(0 0 0 / 0.1)" + ] + }, + "xl": { + "value": [ + "0 20px 25px -5px rgb(0 0 0 / 0.1)", + "0 8px 10px -6px rgb(0 0 0 / 0.1)" + ] + }, + "2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)" + }, + "inset-2xs": { + "value": "inset 0 1px rgb(0 0 0 / 0.05)" + }, + "inset-xs": { + "value": "inset 0 1px 1px rgb(0 0 0 / 0.05)" + }, + "inset-sm": { + "value": "inset 0 2px 4px rgb(0 0 0 / 0.05)" + } + }, + "colors": { + "current": { + "value": "currentColor" + }, + "black": { + "value": "#000" + }, + "white": { + "value": "#fff" + }, + "transparent": { + "value": "rgb(0 0 0 / 0)" + }, + "rose": { + "50": { + "value": "#fff1f2" + }, + "100": { + "value": "#ffe4e6" + }, + "200": { + "value": "#fecdd3" + }, + "300": { + "value": "#fda4af" + }, + "400": { + "value": "#fb7185" + }, + "500": { + "value": "#f43f5e" + }, + "600": { + "value": "#e11d48" + }, + "700": { + "value": "#be123c" + }, + "800": { + "value": "#9f1239" + }, + "900": { + "value": "#881337" + }, + "950": { + "value": "#4c0519" + } + }, + "pink": { + "50": { + "value": "#fdf2f8" + }, + "100": { + "value": "#fce7f3" + }, + "200": { + "value": "#fbcfe8" + }, + "300": { + "value": "#f9a8d4" + }, + "400": { + "value": "#f472b6" + }, + "500": { + "value": "#ec4899" + }, + "600": { + "value": "#db2777" + }, + "700": { + "value": "#be185d" + }, + "800": { + "value": "#9d174d" + }, + "900": { + "value": "#831843" + }, + "950": { + "value": "#500724" + } + }, + "fuchsia": { + "50": { + "value": "#fdf4ff" + }, + "100": { + "value": "#fae8ff" + }, + "200": { + "value": "#f5d0fe" + }, + "300": { + "value": "#f0abfc" + }, + "400": { + "value": "#e879f9" + }, + "500": { + "value": "#d946ef" + }, + "600": { + "value": "#c026d3" + }, + "700": { + "value": "#a21caf" + }, + "800": { + "value": "#86198f" + }, + "900": { + "value": "#701a75" + }, + "950": { + "value": "#4a044e" + } + }, + "purple": { + "50": { + "value": "#faf5ff" + }, + "100": { + "value": "#f3e8ff" + }, + "200": { + "value": "#e9d5ff" + }, + "300": { + "value": "#d8b4fe" + }, + "400": { + "value": "#c084fc" + }, + "500": { + "value": "#a855f7" + }, + "600": { + "value": "#9333ea" + }, + "700": { + "value": "#7e22ce" + }, + "800": { + "value": "#6b21a8" + }, + "900": { + "value": "#581c87" + }, + "950": { + "value": "#3b0764" + } + }, + "violet": { + "50": { + "value": "#f5f3ff" + }, + "100": { + "value": "#ede9fe" + }, + "200": { + "value": "#ddd6fe" + }, + "300": { + "value": "#c4b5fd" + }, + "400": { + "value": "#a78bfa" + }, + "500": { + "value": "#8b5cf6" + }, + "600": { + "value": "#7c3aed" + }, + "700": { + "value": "#6d28d9" + }, + "800": { + "value": "#5b21b6" + }, + "900": { + "value": "#4c1d95" + }, + "950": { + "value": "#2e1065" + } + }, + "indigo": { + "50": { + "value": "#eef2ff" + }, + "100": { + "value": "#e0e7ff" + }, + "200": { + "value": "#c7d2fe" + }, + "300": { + "value": "#a5b4fc" + }, + "400": { + "value": "#818cf8" + }, + "500": { + "value": "#6366f1" + }, + "600": { + "value": "#4f46e5" + }, + "700": { + "value": "#4338ca" + }, + "800": { + "value": "#3730a3" + }, + "900": { + "value": "#312e81" + }, + "950": { + "value": "#1e1b4b" + } + }, + "blue": { + "50": { + "value": "#eff6ff" + }, + "100": { + "value": "#dbeafe" + }, + "200": { + "value": "#bfdbfe" + }, + "300": { + "value": "#93c5fd" + }, + "400": { + "value": "#60a5fa" + }, + "500": { + "value": "#3b82f6" + }, + "600": { + "value": "#2563eb" + }, + "700": { + "value": "#1d4ed8" + }, + "800": { + "value": "#1e40af" + }, + "900": { + "value": "#1e3a8a" + }, + "950": { + "value": "#172554" + } + }, + "sky": { + "50": { + "value": "#f0f9ff" + }, + "100": { + "value": "#e0f2fe" + }, + "200": { + "value": "#bae6fd" + }, + "300": { + "value": "#7dd3fc" + }, + "400": { + "value": "#38bdf8" + }, + "500": { + "value": "#0ea5e9" + }, + "600": { + "value": "#0284c7" + }, + "700": { + "value": "#0369a1" + }, + "800": { + "value": "#075985" + }, + "900": { + "value": "#0c4a6e" + }, + "950": { + "value": "#082f49" + } + }, + "cyan": { + "50": { + "value": "#ecfeff" + }, + "100": { + "value": "#cffafe" + }, + "200": { + "value": "#a5f3fc" + }, + "300": { + "value": "#67e8f9" + }, + "400": { + "value": "#22d3ee" + }, + "500": { + "value": "#06b6d4" + }, + "600": { + "value": "#0891b2" + }, + "700": { + "value": "#0e7490" + }, + "800": { + "value": "#155e75" + }, + "900": { + "value": "#164e63" + }, + "950": { + "value": "#083344" + } + }, + "teal": { + "50": { + "value": "#f0fdfa" + }, + "100": { + "value": "#ccfbf1" + }, + "200": { + "value": "#99f6e4" + }, + "300": { + "value": "#5eead4" + }, + "400": { + "value": "#2dd4bf" + }, + "500": { + "value": "#14b8a6" + }, + "600": { + "value": "#0d9488" + }, + "700": { + "value": "#0f766e" + }, + "800": { + "value": "#115e59" + }, + "900": { + "value": "#134e4a" + }, + "950": { + "value": "#042f2e" + } + }, + "emerald": { + "50": { + "value": "#ecfdf5" + }, + "100": { + "value": "#d1fae5" + }, + "200": { + "value": "#a7f3d0" + }, + "300": { + "value": "#6ee7b7" + }, + "400": { + "value": "#34d399" + }, + "500": { + "value": "#10b981" + }, + "600": { + "value": "#059669" + }, + "700": { + "value": "#047857" + }, + "800": { + "value": "#065f46" + }, + "900": { + "value": "#064e3b" + }, + "950": { + "value": "#022c22" + } + }, + "green": { + "50": { + "value": "#f0fdf4" + }, + "100": { + "value": "#dcfce7" + }, + "200": { + "value": "#bbf7d0" + }, + "300": { + "value": "#86efac" + }, + "400": { + "value": "#4ade80" + }, + "500": { + "value": "#22c55e" + }, + "600": { + "value": "#16a34a" + }, + "700": { + "value": "#15803d" + }, + "800": { + "value": "#166534" + }, + "900": { + "value": "#14532d" + }, + "950": { + "value": "#052e16" + } + }, + "lime": { + "50": { + "value": "#f7fee7" + }, + "100": { + "value": "#ecfccb" + }, + "200": { + "value": "#d9f99d" + }, + "300": { + "value": "#bef264" + }, + "400": { + "value": "#a3e635" + }, + "500": { + "value": "#84cc16" + }, + "600": { + "value": "#65a30d" + }, + "700": { + "value": "#4d7c0f" + }, + "800": { + "value": "#3f6212" + }, + "900": { + "value": "#365314" + }, + "950": { + "value": "#1a2e05" + } + }, + "yellow": { + "50": { + "value": "#fefce8" + }, + "100": { + "value": "#fef9c3" + }, + "200": { + "value": "#fef08a" + }, + "300": { + "value": "#fde047" + }, + "400": { + "value": "#facc15" + }, + "500": { + "value": "#eab308" + }, + "600": { + "value": "#ca8a04" + }, + "700": { + "value": "#a16207" + }, + "800": { + "value": "#854d0e" + }, + "900": { + "value": "#713f12" + }, + "950": { + "value": "#422006" + } + }, + "amber": { + "50": { + "value": "#fffbeb" + }, + "100": { + "value": "#fef3c7" + }, + "200": { + "value": "#fde68a" + }, + "300": { + "value": "#fcd34d" + }, + "400": { + "value": "#fbbf24" + }, + "500": { + "value": "#f59e0b" + }, + "600": { + "value": "#d97706" + }, + "700": { + "value": "#b45309" + }, + "800": { + "value": "#92400e" + }, + "900": { + "value": "#78350f" + }, + "950": { + "value": "#451a03" + } + }, + "orange": { + "50": { + "value": "#fff7ed" + }, + "100": { + "value": "#ffedd5" + }, + "200": { + "value": "#fed7aa" + }, + "300": { + "value": "#fdba74" + }, + "400": { + "value": "#fb923c" + }, + "500": { + "value": "#f97316" + }, + "600": { + "value": "#ea580c" + }, + "700": { + "value": "#c2410c" + }, + "800": { + "value": "#9a3412" + }, + "900": { + "value": "#7c2d12" + }, + "950": { + "value": "#431407" + } + }, + "red": { + "50": { + "value": "#fef2f2" + }, + "100": { + "value": "#fee2e2" + }, + "200": { + "value": "#fecaca" + }, + "300": { + "value": "#fca5a5" + }, + "400": { + "value": "#f87171" + }, + "500": { + "value": "#ef4444" + }, + "600": { + "value": "#dc2626" + }, + "700": { + "value": "#b91c1c" + }, + "800": { + "value": "#991b1b" + }, + "900": { + "value": "#7f1d1d" + }, + "950": { + "value": "#450a0a" + } + }, + "neutral": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f5f5f5" + }, + "200": { + "value": "#e5e5e5" + }, + "300": { + "value": "#d4d4d4" + }, + "400": { + "value": "#a3a3a3" + }, + "500": { + "value": "#737373" + }, + "600": { + "value": "#525252" + }, + "700": { + "value": "#404040" + }, + "800": { + "value": "#262626" + }, + "900": { + "value": "#171717" + }, + "950": { + "value": "#0a0a0a" + } + }, + "stone": { + "50": { + "value": "#fafaf9" + }, + "100": { + "value": "#f5f5f4" + }, + "200": { + "value": "#e7e5e4" + }, + "300": { + "value": "#d6d3d1" + }, + "400": { + "value": "#a8a29e" + }, + "500": { + "value": "#78716c" + }, + "600": { + "value": "#57534e" + }, + "700": { + "value": "#44403c" + }, + "800": { + "value": "#292524" + }, + "900": { + "value": "#1c1917" + }, + "950": { + "value": "#0c0a09" + } + }, + "zinc": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f4f4f5" + }, + "200": { + "value": "#e4e4e7" + }, + "300": { + "value": "#d4d4d8" + }, + "400": { + "value": "#a1a1aa" + }, + "500": { + "value": "#71717a" + }, + "600": { + "value": "#52525b" + }, + "700": { + "value": "#3f3f46" + }, + "800": { + "value": "#27272a" + }, + "900": { + "value": "#18181b" + }, + "950": { + "value": "#09090b" + } + }, + "gray": { + "50": { + "value": "#f9fafb" + }, + "100": { + "value": "#f3f4f6" + }, + "200": { + "value": "#e5e7eb" + }, + "300": { + "value": "#d1d5db" + }, + "400": { + "value": "#9ca3af" + }, + "500": { + "value": "#6b7280" + }, + "600": { + "value": "#4b5563" + }, + "700": { + "value": "#374151" + }, + "800": { + "value": "#1f2937" + }, + "900": { + "value": "#111827" + }, + "950": { + "value": "#030712" + } + }, + "slate": { + "50": { + "value": "#f8fafc" + }, + "100": { + "value": "#f1f5f9" + }, + "200": { + "value": "#e2e8f0" + }, + "300": { + "value": "#cbd5e1" + }, + "400": { + "value": "#94a3b8" + }, + "500": { + "value": "#64748b" + }, + "600": { + "value": "#475569" + }, + "700": { + "value": "#334155" + }, + "800": { + "value": "#1e293b" + }, + "900": { + "value": "#0f172a" + }, + "950": { + "value": "#020617" + } + } + }, + "blurs": { + "xs": { + "value": "4px" + }, + "sm": { + "value": "8px" + }, + "md": { + "value": "12px" + }, + "lg": { + "value": "16px" + }, + "xl": { + "value": "24px" + }, + "2xl": { + "value": "40px" + }, + "3xl": { + "value": "64px" + } + }, + "spacing": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + } + }, + "sizes": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + }, + "xs": { + "value": "20rem" + }, + "sm": { + "value": "24rem" + }, + "md": { + "value": "28rem" + }, + "lg": { + "value": "32rem" + }, + "xl": { + "value": "36rem" + }, + "2xl": { + "value": "42rem" + }, + "3xl": { + "value": "48rem" + }, + "4xl": { + "value": "56rem" + }, + "5xl": { + "value": "64rem" + }, + "6xl": { + "value": "72rem" + }, + "7xl": { + "value": "80rem" + }, + "8xl": { + "value": "90rem" + }, + "prose": { + "value": "65ch" + }, + "full": { + "value": "100%" + }, + "min": { + "value": "min-content" + }, + "max": { + "value": "max-content" + }, + "fit": { + "value": "fit-content" + } + }, + "animations": { + "spin": { + "value": "spin 1s linear infinite" + }, + "ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" + }, + "pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" + }, + "bounce": { + "value": "bounce 1s infinite" + } + } + }, + "textStyles": { + "xs": { + "value": { + "fontSize": "0.75rem", + "lineHeight": "calc(1 / 0.75)" + } + }, + "sm": { + "value": { + "fontSize": "0.875rem", + "lineHeight": "calc(1.25 / 0.875)" + } + }, + "md": { + "value": { + "fontSize": "1rem", + "lineHeight": "calc(1.5 / 1)" + } + }, + "lg": { + "value": { + "fontSize": "1.125rem", + "lineHeight": "calc(1.75 / 1.125)" + } + }, + "xl": { + "value": { + "fontSize": "1.25rem", + "lineHeight": "calc(1.75 / 1.25)" + } + }, + "2xl": { + "value": { + "fontSize": "1.5rem", + "lineHeight": "calc(2 / 1.5)" + } + }, + "3xl": { + "value": { + "fontSize": "1.875rem", + "lineHeight": "calc(2.25 / 1.875)" + } + }, + "4xl": { + "value": { + "fontSize": "2.25rem", + "lineHeight": "calc(2.5 / 2.25)" + } + }, + "5xl": { + "value": { + "fontSize": "3rem", + "lineHeight": "1" + } + }, + "6xl": { + "value": { + "fontSize": "3.75rem", + "lineHeight": "1" + } + }, + "7xl": { + "value": { + "fontSize": "4.5rem", + "lineHeight": "1" + } + }, + "8xl": { + "value": { + "fontSize": "6rem", + "lineHeight": "1" + } + }, + "9xl": { + "value": { + "fontSize": "8rem", + "lineHeight": "1" + } + } + }, + "containerSizes": { + "xs": "320px", + "sm": "384px", + "md": "448px", + "lg": "512px", + "xl": "576px", + "2xl": "672px", + "3xl": "768px", + "4xl": "896px", + "5xl": "1024px", + "6xl": "1152px", + "7xl": "1280px", + "8xl": "1440px" + }, + "recipes": { + "button": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + } + } + } + }, + "buttonWithCompoundVariants": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "unstyled": {} + }, + "size": { + "sm": { + "fontSize": "1rem" + }, + "md": { + "fontSize": "2rem" + }, + "lg": { + "fontSize": "3rem" + } + } + }, + "compoundVariants": [ + { + "visual": "solid", + "css": { + "color": "blue" + } + }, + { + "size": "md", + "visual": "outline", + "css": { + "color": "green" + } + }, + { + "size": [ + "sm", + "lg" + ], + "visual": "outline", + "css": { + "color": "red" + } + } + ], + "defaultVariants": { + "visual": "unstyled" + } + } + }, + "slotRecipes": { + "slotButton": { + "className": "slot-button", + "slots": [ + "root", + "icon" + ], + "base": { + "root": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "icon": { + "fontSize": "2xl" + } + }, + "variants": { + "visual": { + "solid": { + "root": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "icon": { + "color": "white" + } + }, + "outline": { + "root": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "icon": { + "border": "1px solid" + } + }, + "unstyled": {} + } + }, + "defaultVariants": { + "visual": "unstyled" + } + } + } + }, + "utilities": { + "aspectRatio": { + "className": "asp", + "values": "aspectRatios", + "group": "Layout" + }, + "boxDecorationBreak": { + "className": "bx-db", + "group": "Layout", + "transform": { + "__function": "transform" + } + }, + "zIndex": { + "className": "z", + "values": "zIndex", + "group": "Visibility" + }, + "boxSizing": { + "className": "bx-s", + "group": "System" + }, + "objectPosition": { + "className": "obj-p", + "group": "Layout" + }, + "objectFit": { + "className": "obj-f", + "group": "Layout" + }, + "overscrollBehavior": { + "className": "ovs-b", + "group": "Scroll" + }, + "overscrollBehaviorX": { + "className": "ovs-bx", + "group": "Scroll" + }, + "overscrollBehaviorY": { + "className": "ovs-by", + "group": "Scroll" + }, + "position": { + "className": "pos", + "shorthand": "pos", + "group": "Position" + }, + "top": { + "className": "top", + "values": "spacing", + "group": "Position" + }, + "left": { + "className": "left", + "values": "spacing", + "group": "Position" + }, + "inset": { + "className": "inset", + "group": "Position", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + } + }, + "insetInline": { + "className": "inset-x", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetX" + ] + }, + "insetBlock": { + "className": "inset-y", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetY" + ] + }, + "insetBlockEnd": { + "className": "inset-be", + "values": "spacing", + "group": "Position" + }, + "insetBlockStart": { + "className": "inset-bs", + "values": "spacing", + "group": "Position" + }, + "insetInlineEnd": { + "className": "inset-e", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetEnd", + "end" + ] + }, + "insetInlineStart": { + "className": "inset-s", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetStart", + "start" + ] + }, + "right": { + "className": "right", + "values": "spacing", + "group": "Position" + }, + "bottom": { + "className": "bottom", + "values": "spacing", + "group": "Position" + }, + "float": { + "className": "float", + "values": [ + "start", + "end" + ], + "property": "float", + "group": "Position", + "transform": { + "__function": "transform" + } + }, + "visibility": { + "className": "vis", + "group": "Visibility" + }, + "display": { + "className": "d", + "group": "Display" + }, + "hideFrom": { + "className": "hide", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "hideBelow": { + "className": "show", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "flexBasis": { + "className": "flex-b", + "group": "Flex Layout", + "values": { + "__function": "values", + "probe": { + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "full": "100%" + } + } + }, + "flex": { + "className": "flex", + "group": "Flex Layout", + "values": { + "1": "1 1 0%", + "auto": "1 1 auto", + "initial": "0 1 auto", + "none": "none" + } + }, + "flexDirection": { + "className": "flex-d", + "group": "Flex Layout", + "shorthand": "flexDir" + }, + "flexGrow": { + "className": "flex-g", + "group": "Flex Layout" + }, + "flexShrink": { + "className": "flex-sh", + "group": "Flex Layout" + }, + "gridTemplateColumns": { + "className": "grid-tc", + "group": "Grid Layout" + }, + "gridTemplateRows": { + "className": "grid-tr", + "group": "Grid Layout" + }, + "gridColumn": { + "className": "grid-c", + "group": "Grid Layout" + }, + "gridRow": { + "className": "grid-r", + "group": "Grid Layout" + }, + "gridColumnStart": { + "className": "grid-cs", + "group": "Grid Layout" + }, + "gridColumnEnd": { + "className": "grid-ce", + "group": "Grid Layout" + }, + "gridAutoFlow": { + "className": "grid-af", + "group": "Grid Layout" + }, + "gridAutoColumns": { + "className": "grid-ac", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gridAutoRows": { + "className": "grid-ar", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gap": { + "className": "gap", + "group": "Flex Layout", + "values": "spacing" + }, + "gridGap": { + "className": "grid-g", + "group": "Grid Layout", + "values": "spacing" + }, + "gridRowGap": { + "className": "grid-rg", + "group": "Grid Layout", + "values": "spacing" + }, + "gridColumnGap": { + "className": "grid-cg", + "group": "Grid Layout", + "values": "spacing" + }, + "rowGap": { + "className": "rg", + "group": "Grid Layout", + "values": "spacing" + }, + "columnGap": { + "className": "cg", + "group": "Grid Layout", + "values": "spacing" + }, + "justifyContent": { + "className": "jc", + "group": "Flex Layout" + }, + "alignContent": { + "className": "ac", + "group": "Flex Layout" + }, + "alignItems": { + "className": "ai", + "group": "Flex Layout" + }, + "alignSelf": { + "className": "as", + "group": "Flex Layout" + }, + "padding": { + "className": "p", + "shorthand": "p", + "values": "spacing", + "group": "Padding" + }, + "paddingLeft": { + "className": "pl", + "shorthand": "pl", + "values": "spacing", + "group": "Padding" + }, + "paddingRight": { + "className": "pr", + "shorthand": "pr", + "values": "spacing", + "group": "Padding" + }, + "paddingTop": { + "className": "pt", + "shorthand": "pt", + "values": "spacing", + "group": "Padding" + }, + "paddingBottom": { + "className": "pb", + "shorthand": "pb", + "values": "spacing", + "group": "Padding" + }, + "paddingBlock": { + "className": "py", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "py", + "paddingY" + ] + }, + "paddingBlockEnd": { + "className": "pbe", + "values": "spacing", + "group": "Padding" + }, + "paddingBlockStart": { + "className": "pbs", + "values": "spacing", + "group": "Padding" + }, + "paddingInline": { + "className": "px", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "paddingX", + "px" + ] + }, + "paddingInlineEnd": { + "className": "pe", + "shorthand": [ + "pe", + "paddingEnd" + ], + "values": "spacing", + "group": "Padding" + }, + "paddingInlineStart": { + "className": "ps", + "shorthand": [ + "ps", + "paddingStart" + ], + "values": "spacing", + "group": "Padding" + }, + "marginLeft": { + "className": "ml", + "shorthand": "ml", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginRight": { + "className": "mr", + "shorthand": "mr", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginTop": { + "className": "mt", + "shorthand": "mt", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBottom": { + "className": "mb", + "shorthand": "mb", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "margin": { + "className": "m", + "shorthand": "m", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlock": { + "className": "my", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "my", + "marginY" + ] + }, + "marginBlockEnd": { + "className": "mbe", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlockStart": { + "className": "mbs", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInline": { + "className": "mx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "mx", + "marginX" + ] + }, + "marginInlineEnd": { + "className": "me", + "shorthand": [ + "me", + "marginEnd" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInlineStart": { + "className": "ms", + "shorthand": [ + "ms", + "marginStart" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "spaceX": { + "className": "sx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginInlineStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "spaceY": { + "className": "sy", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginBlockStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "outlineWidth": { + "className": "ring-w", + "shorthand": "ringWidth", + "values": "borderWidths", + "group": "Border" + }, + "outlineColor": { + "className": "ring-c", + "values": "colors", + "group": "Color", + "shorthand": "ringColor", + "transform": { + "__function": "transform", + "colorMix": "outlineColor" + } + }, + "outline": { + "className": "ring", + "shorthand": "ring", + "values": "borders", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "outlineOffset": { + "className": "ring-o", + "shorthand": "ringOffset", + "values": "spacing", + "group": "Border" + }, + "focusRing": { + "className": "focus-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusVisibleRing": { + "className": "focus-v-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusRingColor": { + "className": "focus-ring-c", + "values": "colors", + "group": "Focus Ring", + "transform": { + "__function": "transform", + "colorMix": "--focus-ring-color-prop" + } + }, + "focusRingOffset": { + "className": "focus-ring-o", + "values": "spacing", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingWidth": { + "className": "focus-ring-w", + "values": "borderWidths", + "property": "outlineWidth", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingStyle": { + "className": "focus-ring-s", + "values": "borderStyles", + "property": "outlineStyle", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "divideX": { + "className": "dvd-x", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideY": { + "className": "dvd-y", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideColor": { + "className": "dvd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideStyle": { + "className": "dvd-s", + "property": "borderStyle", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "width": { + "shorthand": "w", + "className": "w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "inlineSize": { + "className": "w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minWidth": { + "shorthand": "minW", + "className": "min-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minInlineSize": { + "className": "min-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxWidth": { + "shorthand": "maxW", + "className": "max-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxInlineSize": { + "className": "max-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "height": { + "shorthand": "h", + "className": "h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "blockSize": { + "className": "h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minHeight": { + "shorthand": "minH", + "className": "min-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minBlockSize": { + "className": "min-h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxHeight": { + "shorthand": "maxH", + "className": "max-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxBlockSize": { + "className": "max-b", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "boxSize": { + "className": "size", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + }, + "transform": { + "__function": "transform" + } + }, + "color": { + "className": "c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "color" + } + }, + "fontFamily": { + "className": "ff", + "values": "fonts", + "group": "Typography" + }, + "fontSize": { + "className": "fs", + "values": "fontSizes", + "group": "Typography" + }, + "fontSizeAdjust": { + "className": "fs-a", + "group": "Typography" + }, + "fontPalette": { + "className": "fp", + "group": "Typography" + }, + "fontKerning": { + "className": "fk", + "group": "Typography" + }, + "fontFeatureSettings": { + "className": "ff-s", + "group": "Typography" + }, + "fontWeight": { + "className": "fw", + "values": "fontWeights", + "group": "Typography" + }, + "fontSmoothing": { + "className": "fsmt", + "group": "Typography", + "values": { + "antialiased": "antialiased", + "subpixel-antialiased": "auto" + }, + "transform": { + "__function": "transform" + } + }, + "fontVariant": { + "className": "fv", + "group": "Typography" + }, + "fontVariantAlternates": { + "className": "fv-alt", + "group": "Typography" + }, + "fontVariantCaps": { + "className": "fv-caps", + "group": "Typography" + }, + "fontVariationSettings": { + "className": "fv-s", + "group": "Typography" + }, + "fontVariantNumeric": { + "className": "fv-num", + "group": "Typography" + }, + "letterSpacing": { + "className": "ls", + "values": "letterSpacings", + "group": "Typography" + }, + "lineHeight": { + "className": "lh", + "values": "lineHeights", + "group": "Typography" + }, + "textAlign": { + "className": "ta", + "group": "Typography" + }, + "textDecoration": { + "className": "td", + "group": "Typography" + }, + "textDecorationColor": { + "className": "td-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textDecorationColor" + }, + "group": "Typography" + }, + "textEmphasisColor": { + "className": "te-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textEmphasisColor" + }, + "group": "Typography" + }, + "textDecorationStyle": { + "className": "td-s", + "group": "Typography" + }, + "textDecorationThickness": { + "className": "td-t", + "group": "Typography" + }, + "textUnderlineOffset": { + "className": "tu-o", + "group": "Typography" + }, + "textTransform": { + "className": "tt", + "group": "Typography" + }, + "textIndent": { + "className": "ti", + "group": "Typography", + "values": "spacing" + }, + "textShadow": { + "className": "tsh", + "values": "shadows", + "group": "Typography" + }, + "textShadowColor": { + "shorthand": "textShadowColor", + "className": "tsh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--text-shadow-color" + }, + "group": "Typography" + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "WebkitTextFillColor" + }, + "group": "Typography" + }, + "textOverflow": { + "className": "tov", + "group": "Typography" + }, + "verticalAlign": { + "className": "va", + "group": "Typography" + }, + "wordBreak": { + "className": "wb", + "group": "Typography" + }, + "textWrap": { + "className": "tw", + "values": [ + "wrap", + "balance", + "nowrap" + ], + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "truncate": { + "className": "trunc", + "values": { + "type": "boolean" + }, + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "lineClamp": { + "className": "lc", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "listStyleType": { + "className": "li-t", + "group": "List" + }, + "listStylePosition": { + "className": "li-pos", + "group": "List" + }, + "listStyleImage": { + "className": "li-img", + "group": "List", + "values": "assets" + }, + "listStyle": { + "className": "li-s", + "group": "List" + }, + "backgroundPosition": { + "shorthand": "bgPosition", + "className": "bg-p", + "group": "Background" + }, + "backgroundPositionX": { + "shorthand": "bgPositionX", + "className": "bg-p-x", + "group": "Background" + }, + "backgroundPositionY": { + "shorthand": "bgPositionY", + "className": "bg-p-y", + "group": "Background" + }, + "backgroundAttachment": { + "shorthand": "bgAttachment", + "className": "bg-a", + "group": "Background" + }, + "backgroundClip": { + "shorthand": "bgClip", + "className": "bg-cp", + "group": "Background", + "transform": { + "__function": "transform" + } + }, + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "background" + } + }, + "backgroundColor": { + "shorthand": "bgColor", + "className": "bg-c", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "backgroundColor" + } + }, + "backgroundOrigin": { + "shorthand": "bgOrigin", + "className": "bg-o", + "group": "Background" + }, + "backgroundImage": { + "shorthand": "bgImage", + "className": "bg-i", + "values": "assets", + "group": "Background" + }, + "backgroundRepeat": { + "shorthand": "bgRepeat", + "className": "bg-r", + "group": "Background" + }, + "backgroundBlendMode": { + "shorthand": "bgBlendMode", + "className": "bg-bm", + "group": "Background" + }, + "backgroundSize": { + "shorthand": "bgSize", + "className": "bg-s", + "group": "Background" + }, + "backgroundGradient": { + "shorthand": "bgGradient", + "className": "bg-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundLinear": { + "shorthand": "bgLinear", + "className": "bg-linear", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundRadial": { + "shorthand": "bgRadial", + "className": "bg-radial", + "group": "Background Gradient", + "values": "gradients", + "transform": { + "__function": "transform" + } + }, + "backgroundConic": { + "shorthand": "bgConic", + "className": "bg-conic", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "textGradient": { + "className": "txt-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "gradientFromPosition": { + "className": "grad-from-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientToPosition": { + "className": "grad-to-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientFrom": { + "className": "grad-from", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-from" + } + }, + "gradientTo": { + "className": "grad-to", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-to" + } + }, + "gradientVia": { + "className": "grad-via", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientViaPosition": { + "className": "grad-via-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "borderRadius": { + "className": "bdr", + "shorthand": "rounded", + "values": "radii", + "group": "Border Radius" + }, + "borderTopLeftRadius": { + "className": "bdr-tl", + "shorthand": "roundedTopLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRightRadius": { + "className": "bdr-tr", + "shorthand": "roundedTopRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomRightRadius": { + "className": "bdr-br", + "shorthand": "roundedBottomRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomLeftRadius": { + "className": "bdr-bl", + "shorthand": "roundedBottomLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRadius": { + "className": "bdr-t", + "shorthand": "roundedTop", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderRightRadius": { + "className": "bdr-r", + "shorthand": "roundedRight", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderBottomRadius": { + "className": "bdr-b", + "shorthand": "roundedBottom", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderLeftRadius": { + "className": "bdr-l", + "shorthand": "roundedLeft", + "values": "radii", + "property": "borderRadius", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderStartStartRadius": { + "className": "bdr-ss", + "shorthand": "roundedStartStart", + "values": "radii", + "group": "Border Radius" + }, + "borderStartEndRadius": { + "className": "bdr-se", + "shorthand": "roundedStartEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderStartRadius": { + "className": "bdr-s", + "values": "radii", + "property": "borderRadius", + "shorthand": "roundedStart", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderEndStartRadius": { + "className": "bdr-es", + "shorthand": "roundedEndStart", + "values": "radii", + "group": "Border Radius" + }, + "borderEndEndRadius": { + "className": "bdr-ee", + "shorthand": "roundedEndEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderEndRadius": { + "className": "bdr-e", + "shorthand": "roundedEnd", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "border": { + "className": "bd", + "values": "borders", + "group": "Border" + }, + "borderWidth": { + "className": "bd-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderTopWidth": { + "className": "bd-t-w", + "values": "borderWidths", + "group": "Border" + }, + "borderLeftWidth": { + "className": "bd-l-w", + "values": "borderWidths", + "group": "Border" + }, + "borderRightWidth": { + "className": "bd-r-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBottomWidth": { + "className": "bd-b-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBlockStartWidth": { + "className": "bd-bs-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderBlockEndWidth": { + "className": "bd-be-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderColor": { + "className": "bd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderColor" + } + }, + "borderInline": { + "className": "bd-x", + "values": "borders", + "group": "Border", + "shorthand": "borderX" + }, + "borderInlineWidth": { + "className": "bd-x-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderXWidth" + }, + "borderInlineColor": { + "className": "bd-x-c", + "values": "colors", + "group": "Border", + "shorthand": "borderXColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineColor" + } + }, + "borderBlock": { + "className": "bd-y", + "values": "borders", + "group": "Border", + "shorthand": "borderY" + }, + "borderBlockWidth": { + "className": "bd-y-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderYWidth" + }, + "borderBlockColor": { + "className": "bd-y-c", + "values": "colors", + "group": "Border", + "shorthand": "borderYColor", + "transform": { + "__function": "transform", + "colorMix": "borderBlockColor" + } + }, + "borderLeft": { + "className": "bd-l", + "values": "borders", + "group": "Border" + }, + "borderLeftColor": { + "className": "bd-l-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderLeftColor" + } + }, + "borderInlineStart": { + "className": "bd-s", + "values": "borders", + "group": "Border", + "shorthand": "borderStart" + }, + "borderInlineStartWidth": { + "className": "bd-s-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderStartWidth" + }, + "borderInlineStartColor": { + "className": "bd-s-c", + "values": "colors", + "group": "Border", + "shorthand": "borderStartColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineStartColor" + } + }, + "borderRight": { + "className": "bd-r", + "values": "borders", + "group": "Border" + }, + "borderRightColor": { + "className": "bd-r-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderRightColor" + } + }, + "borderInlineEnd": { + "className": "bd-e", + "values": "borders", + "group": "Border", + "shorthand": "borderEnd" + }, + "borderInlineEndWidth": { + "className": "bd-e-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderEndWidth" + }, + "borderInlineEndColor": { + "className": "bd-e-c", + "values": "colors", + "group": "Border", + "shorthand": "borderEndColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineEndColor" + } + }, + "borderTop": { + "className": "bd-t", + "values": "borders", + "group": "Border" + }, + "borderTopColor": { + "className": "bd-t-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderTopColor" + } + }, + "borderBottom": { + "className": "bd-b", + "values": "borders", + "group": "Border" + }, + "borderBottomColor": { + "className": "bd-b-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBottomColor" + } + }, + "borderBlockEnd": { + "className": "bd-be", + "values": "borders", + "group": "Border" + }, + "borderBlockEndColor": { + "className": "bd-be-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockEndColor" + } + }, + "borderBlockStart": { + "className": "bd-bs", + "values": "borders", + "group": "Border" + }, + "borderBlockStartColor": { + "className": "bd-bs-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockStartColor" + } + }, + "opacity": { + "className": "op", + "values": "opacity", + "group": "Background" + }, + "boxShadow": { + "shorthand": "shadow", + "className": "bx-sh", + "values": "shadows", + "group": "Shadow" + }, + "boxShadowColor": { + "shorthand": "shadowColor", + "className": "bx-sh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--shadow-color" + }, + "group": "Color" + }, + "mixBlendMode": { + "className": "mix-bm", + "group": "Effect" + }, + "filter": { + "className": "filter", + "group": "Effect", + "values": { + "auto": "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )" + } + }, + "brightness": { + "className": "brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "contrast": { + "className": "contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "grayscale": { + "className": "grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "hueRotate": { + "className": "hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "invert": { + "className": "invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "saturate": { + "className": "saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "sepia": { + "className": "sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "dropShadow": { + "className": "drop-shadow", + "group": "Effect", + "values": "dropShadows", + "transform": { + "__function": "transform" + } + }, + "blur": { + "className": "blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropFilter": { + "className": "bkdp", + "group": "Effect", + "values": { + "auto": "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )" + }, + "transform": { + "__function": "transform" + } + }, + "backdropBlur": { + "className": "bkdp-blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropBrightness": { + "className": "bkdp-brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropContrast": { + "className": "bkdp-contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropGrayscale": { + "className": "bkdp-grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropHueRotate": { + "className": "bkdp-hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropInvert": { + "className": "bkdp-invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropOpacity": { + "className": "bkdp-opacity", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSaturate": { + "className": "bkdp-saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSepia": { + "className": "bkdp-sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "borderCollapse": { + "className": "bd-cl", + "group": "Table" + }, + "borderSpacing": { + "className": "bd-sp", + "group": "Table", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "auto": "var(--border-spacing-x) var(--border-spacing-y)" + } + } + }, + "borderSpacingX": { + "className": "bd-sx", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "borderSpacingY": { + "className": "bd-sy", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "tableLayout": { + "className": "tbl", + "group": "Table" + }, + "transitionTimingFunction": { + "className": "trs-tmf", + "values": "easings", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionDelay": { + "className": "trs-dly", + "values": "durations", + "group": "Transition" + }, + "transitionDuration": { + "className": "trs-dur", + "values": "durations", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionProperty": { + "className": "trs-prop", + "group": "Transition", + "values": { + "common": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", + "colors": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke", + "size": "width, height, min-width, max-width, min-height, max-height", + "position": "left, right, top, bottom, inset, inset-inline, inset-block", + "background": "background, background-color, background-image, background-position" + }, + "transform": { + "__function": "transform" + } + }, + "transition": { + "className": "trs", + "values": [ + "all", + "common", + "size", + "position", + "background", + "colors", + "opacity", + "shadow", + "transform" + ], + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "animation": { + "className": "anim", + "values": "animations", + "group": "Animation" + }, + "animationName": { + "className": "anim-n", + "values": "keyframes", + "group": "Animation" + }, + "animationTimingFunction": { + "className": "anim-tmf", + "values": "easings", + "group": "Animation" + }, + "animationDuration": { + "className": "anim-dur", + "values": "durations", + "group": "Animation" + }, + "animationDelay": { + "className": "anim-dly", + "values": "durations", + "group": "Animation" + }, + "animationPlayState": { + "className": "anim-ps", + "group": "Animation" + }, + "animationComposition": { + "className": "anim-comp", + "group": "Animation" + }, + "animationFillMode": { + "className": "anim-fm", + "group": "Animation" + }, + "animationDirection": { + "className": "anim-dir", + "group": "Animation" + }, + "animationIterationCount": { + "className": "anim-ic", + "group": "Animation" + }, + "animationRange": { + "className": "anim-r", + "group": "Animation" + }, + "animationState": { + "className": "anim-s", + "group": "Animation" + }, + "animationRangeStart": { + "className": "anim-rs", + "group": "Animation" + }, + "animationRangeEnd": { + "className": "anim-re", + "group": "Animation" + }, + "animationTimeline": { + "className": "anim-tl", + "group": "Animation" + }, + "transformOrigin": { + "className": "trf-o", + "group": "Transform" + }, + "transformBox": { + "className": "trf-b", + "group": "Transform" + }, + "transformStyle": { + "className": "trf-s", + "group": "Transform" + }, + "transform": { + "className": "trf", + "group": "Transform" + }, + "rotate": { + "className": "rotate", + "group": "Transform", + "property": "rotate", + "values": { + "auto": "var(--rotate-x) var(--rotate-y)", + "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)" + } + }, + "rotateX": { + "className": "rotate-x", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateY": { + "className": "rotate-y", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateZ": { + "className": "rotate-z", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "scale": { + "className": "scale", + "group": "Transform", + "property": "scale", + "values": { + "auto": "var(--scale-x) var(--scale-y)" + } + }, + "scaleX": { + "className": "scale-x", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "scaleY": { + "className": "scale-y", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "translate": { + "className": "translate", + "group": "Transform", + "property": "translate", + "values": { + "auto": "var(--translate-x) var(--translate-y)", + "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)" + } + }, + "translateX": { + "shorthand": "x", + "className": "translate-x", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateY": { + "shorthand": "y", + "className": "translate-y", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateZ": { + "shorthand": "z", + "className": "translate-z", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "accentColor": { + "className": "ac-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "accentColor" + }, + "group": "Color" + }, + "caretColor": { + "className": "ca-c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "caretColor" + } + }, + "scrollBehavior": { + "className": "scr-bhv", + "group": "Scroll" + }, + "scrollbar": { + "className": "scr-bar", + "values": [ + "visible", + "hidden" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollbarColor": { + "className": "scr-bar-c", + "values": "colors", + "group": "Scroll", + "transform": { + "__function": "transform", + "colorMix": "scrollbarColor" + } + }, + "scrollbarGutter": { + "className": "scr-bar-g", + "group": "Scroll" + }, + "scrollbarWidth": { + "className": "scr-bar-w", + "values": "sizes", + "group": "Scroll" + }, + "scrollMargin": { + "className": "scr-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginLeft": { + "className": "scr-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginRight": { + "className": "scr-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginTop": { + "className": "scr-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBottom": { + "className": "scr-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlock": { + "className": "scr-my", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginY" + ] + }, + "scrollMarginBlockEnd": { + "className": "scr-mbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlockStart": { + "className": "scr-mbt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInline": { + "className": "scr-mx", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginX" + ] + }, + "scrollMarginInlineEnd": { + "className": "scr-me", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInlineStart": { + "className": "scr-ms", + "values": "spacing", + "group": "Scroll" + }, + "scrollPadding": { + "className": "scr-p", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlock": { + "className": "scr-py", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingY" + ] + }, + "scrollPaddingBlockStart": { + "className": "scr-pbs", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlockEnd": { + "className": "scr-pbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInline": { + "className": "scr-px", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingX" + ] + }, + "scrollPaddingInlineEnd": { + "className": "scr-pe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInlineStart": { + "className": "scr-ps", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingLeft": { + "className": "scr-pl", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingRight": { + "className": "scr-pr", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingTop": { + "className": "scr-pt", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBottom": { + "className": "scr-pb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapAlign": { + "className": "scr-sa", + "group": "Scroll" + }, + "scrollSnapStop": { + "className": "scrs-s", + "group": "Scroll" + }, + "scrollSnapType": { + "className": "scrs-t", + "group": "Scroll", + "values": { + "none": "none", + "x": "x var(--scroll-snap-strictness)", + "y": "y var(--scroll-snap-strictness)", + "both": "both var(--scroll-snap-strictness)" + } + }, + "scrollSnapStrictness": { + "className": "scrs-strt", + "values": [ + "mandatory", + "proximity" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollSnapMargin": { + "className": "scrs-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginTop": { + "className": "scrs-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginBottom": { + "className": "scrs-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginLeft": { + "className": "scrs-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginRight": { + "className": "scrs-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapCoordinate": { + "className": "scrs-c", + "group": "Scroll" + }, + "scrollSnapDestination": { + "className": "scrs-d", + "group": "Scroll" + }, + "scrollSnapPointsX": { + "className": "scrs-px", + "group": "Scroll" + }, + "scrollSnapPointsY": { + "className": "scrs-py", + "group": "Scroll" + }, + "scrollSnapTypeX": { + "className": "scrs-tx", + "group": "Scroll" + }, + "scrollSnapTypeY": { + "className": "scrs-ty", + "group": "Scroll" + }, + "scrollTimeline": { + "className": "scrtl", + "group": "Scroll" + }, + "scrollTimelineAxis": { + "className": "scrtl-a", + "group": "Scroll" + }, + "scrollTimelineName": { + "className": "scrtl-n", + "group": "Scroll" + }, + "touchAction": { + "className": "tch-a", + "group": "Interactivity" + }, + "userSelect": { + "className": "us", + "group": "Interactivity", + "transform": { + "__function": "transform" + } + }, + "overflow": { + "className": "ov", + "group": "Scroll" + }, + "overflowWrap": { + "className": "ov-wrap", + "group": "Scroll" + }, + "overflowX": { + "className": "ov-x", + "group": "Scroll" + }, + "overflowY": { + "className": "ov-y", + "group": "Scroll" + }, + "overflowAnchor": { + "className": "ov-a", + "group": "Scroll" + }, + "overflowBlock": { + "className": "ov-b", + "group": "Scroll" + }, + "overflowInline": { + "className": "ov-i", + "group": "Scroll" + }, + "overflowClipBox": { + "className": "ovcp-bx", + "group": "Scroll" + }, + "overflowClipMargin": { + "className": "ovcp-m", + "group": "Scroll" + }, + "overscrollBehaviorBlock": { + "className": "ovs-bb", + "group": "Scroll" + }, + "overscrollBehaviorInline": { + "className": "ovs-bi", + "group": "Scroll" + }, + "fill": { + "className": "fill", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "fill" + } + }, + "stroke": { + "className": "stk", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "stroke" + } + }, + "strokeWidth": { + "className": "stk-w", + "values": "borderWidths", + "group": "Border" + }, + "strokeDasharray": { + "className": "stk-dsh", + "group": "Border" + }, + "strokeDashoffset": { + "className": "stk-do", + "group": "Border" + }, + "strokeLinecap": { + "className": "stk-lc", + "group": "Border" + }, + "strokeLinejoin": { + "className": "stk-lj", + "group": "Border" + }, + "strokeMiterlimit": { + "className": "stk-ml", + "group": "Border" + }, + "strokeOpacity": { + "className": "stk-op", + "group": "Border" + }, + "srOnly": { + "className": "sr", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "debug": { + "className": "debug", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "appearance": { + "className": "ap", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "backfaceVisibility": { + "className": "bfv", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "clipPath": { + "className": "cp-path", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "hyphens": { + "className": "hy", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "mask": { + "className": "msk", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskImage": { + "className": "msk-i", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskSize": { + "className": "msk-s", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "textSizeAdjust": { + "className": "txt-adj", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "container": { + "className": "cq", + "group": "Container" + }, + "containerName": { + "className": "cq-n", + "property": "containerName", + "values": "containerNames", + "group": "Container" + }, + "containerType": { + "className": "cq-t", + "group": "Container" + }, + "cursor": { + "className": "cursor", + "values": "cursor", + "group": "System" + } + }, + "outdir": "styled-system-strict-property-values", + "strictPropertyValues": true, + "validation": "warn" +} diff --git a/src/Css/tests/Fixtures/Panda/configs/codegen-strict-tokens.json b/src/Css/tests/Fixtures/Panda/configs/codegen-strict-tokens.json new file mode 100644 index 00000000000..99eaa869675 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/configs/codegen-strict-tokens.json @@ -0,0 +1,4628 @@ +{ + "conditions": { + "hover": "&:is(:hover, [data-hover])", + "focus": "&:is(:focus, [data-focus])", + "focusWithin": "&:focus-within", + "focusVisible": "&:is(:focus-visible, [data-focus-visible])", + "disabled": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])", + "active": "&:is(:active, [data-active])", + "visited": "&:visited", + "target": "&:target", + "readOnly": "&:is(:read-only, [data-read-only], [aria-readonly=true])", + "readWrite": "&:read-write", + "empty": "&:is(:empty, [data-empty])", + "checked": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])", + "enabled": "&:enabled", + "expanded": "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])", + "highlighted": "&[data-highlighted]", + "complete": "&[data-complete]", + "incomplete": "&[data-incomplete]", + "dragging": "&[data-dragging]", + "before": "&::before", + "after": "&::after", + "firstLetter": "&::first-letter", + "firstLine": "&::first-line", + "marker": "&::marker, &::-webkit-details-marker", + "selection": "&::selection", + "file": "&::file-selector-button", + "backdrop": "&::backdrop", + "first": "&:first-child", + "last": "&:last-child", + "only": "&:only-child", + "even": "&:nth-child(even)", + "odd": "&:nth-child(odd)", + "firstOfType": "&:first-of-type", + "lastOfType": "&:last-of-type", + "onlyOfType": "&:only-of-type", + "peerFocus": ".peer:is(:focus, [data-focus]) ~ &", + "peerHover": ".peer:is(:hover, [data-hover]) ~ &", + "peerActive": ".peer:is(:active, [data-active]) ~ &", + "peerFocusWithin": ".peer:focus-within ~ &", + "peerFocusVisible": ".peer:is(:focus-visible, [data-focus-visible]) ~ &", + "peerDisabled": ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &", + "peerChecked": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &", + "peerInvalid": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &", + "peerExpanded": ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &", + "peerPlaceholderShown": ".peer:placeholder-shown ~ &", + "groupFocus": ".group:is(:focus, [data-focus]) &", + "groupHover": ".group:is(:hover, [data-hover]) &", + "groupActive": ".group:is(:active, [data-active]) &", + "groupFocusWithin": ".group:focus-within &", + "groupFocusVisible": ".group:is(:focus-visible, [data-focus-visible]) &", + "groupDisabled": ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &", + "groupChecked": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &", + "groupExpanded": ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &", + "groupInvalid": ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &", + "indeterminate": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])", + "required": "&:is(:required, [data-required], [aria-required=true])", + "valid": "&:is(:valid, [data-valid])", + "invalid": "&:is(:invalid, [data-invalid], [aria-invalid=true])", + "autofill": "&:autofill", + "inRange": "&:is(:in-range, [data-in-range])", + "outOfRange": "&:is(:out-of-range, [data-outside-range])", + "placeholder": "&::placeholder, &[data-placeholder]", + "placeholderShown": "&:is(:placeholder-shown, [data-placeholder-shown])", + "pressed": "&:is([aria-pressed=true], [data-pressed])", + "selected": "&:is([aria-selected=true], [data-selected])", + "grabbed": "&:is([aria-grabbed=true], [data-grabbed])", + "underValue": "&[data-state=under-value]", + "overValue": "&[data-state=over-value]", + "atValue": "&[data-state=at-value]", + "default": "&:default", + "optional": "&:optional", + "open": "&:is([open], [data-open], [data-state=\"open\"], :popover-open)", + "closed": "&:is([closed], [data-closed], [data-state=\"closed\"])", + "fullscreen": "&:is(:fullscreen, [data-fullscreen])", + "loading": "&:is([data-loading], [aria-busy=true])", + "hidden": "&:is([hidden], [data-hidden])", + "current": "&:is([aria-current=true], [data-current])", + "currentPage": "&[aria-current=page]", + "currentStep": "&[aria-current=step]", + "today": "&[data-today]", + "unavailable": "&[data-unavailable]", + "rangeStart": "&[data-range-start]", + "rangeEnd": "&[data-range-end]", + "now": "&[data-now]", + "topmost": "&[data-topmost]", + "motionReduce": "@media (prefers-reduced-motion: reduce)", + "motionSafe": "@media (prefers-reduced-motion: no-preference)", + "print": "@media print", + "landscape": "@media (orientation: landscape)", + "portrait": "@media (orientation: portrait)", + "dark": ".dark &", + "light": ".light &", + "osDark": "@media (prefers-color-scheme: dark)", + "osLight": "@media (prefers-color-scheme: light)", + "highContrast": "@media (forced-colors: active)", + "lessContrast": "@media (prefers-contrast: less)", + "moreContrast": "@media (prefers-contrast: more)", + "ltr": ":where([dir=ltr], :dir(ltr)) &", + "rtl": ":where([dir=rtl], :dir(rtl)) &", + "scrollbar": "&::-webkit-scrollbar", + "scrollbarThumb": "&::-webkit-scrollbar-thumb", + "scrollbarTrack": "&::-webkit-scrollbar-track", + "horizontal": "&[data-orientation=horizontal]", + "vertical": "&[data-orientation=vertical]", + "icon": "& :where(svg)", + "starting": "@starting-style", + "noscript": "@media (scripting: none)", + "invertedColors": "@media (inverted-colors: inverted)" + }, + "theme": { + "keyframes": { + "spin": { + "to": { + "transform": "rotate(360deg)" + } + }, + "ping": { + "75%, 100%": { + "transform": "scale(2)", + "opacity": "0" + } + }, + "pulse": { + "50%": { + "opacity": ".5" + } + }, + "bounce": { + "0%, 100%": { + "transform": "translateY(-25%)", + "animationTimingFunction": "cubic-bezier(0.8,0,1,1)" + }, + "50%": { + "transform": "none", + "animationTimingFunction": "cubic-bezier(0,0,0.2,1)" + } + } + }, + "breakpoints": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + }, + "tokens": { + "aspectRatios": { + "square": { + "value": "1 / 1" + }, + "landscape": { + "value": "4 / 3" + }, + "portrait": { + "value": "3 / 4" + }, + "wide": { + "value": "16 / 9" + }, + "ultrawide": { + "value": "18 / 5" + }, + "golden": { + "value": "1.618 / 1" + } + }, + "borders": { + "none": { + "value": "none" + } + }, + "easings": { + "default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + }, + "linear": { + "value": "linear" + }, + "in": { + "value": "cubic-bezier(0.4, 0, 1, 1)" + }, + "out": { + "value": "cubic-bezier(0, 0, 0.2, 1)" + }, + "in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + } + }, + "durations": { + "fastest": { + "value": "50ms" + }, + "faster": { + "value": "100ms" + }, + "fast": { + "value": "150ms" + }, + "normal": { + "value": "200ms" + }, + "slow": { + "value": "300ms" + }, + "slower": { + "value": "400ms" + }, + "slowest": { + "value": "500ms" + } + }, + "radii": { + "xs": { + "value": "0.125rem" + }, + "sm": { + "value": "0.25rem" + }, + "md": { + "value": "0.375rem" + }, + "lg": { + "value": "0.5rem" + }, + "xl": { + "value": "0.75rem" + }, + "2xl": { + "value": "1rem" + }, + "3xl": { + "value": "1.5rem" + }, + "4xl": { + "value": "2rem" + }, + "full": { + "value": "9999px" + } + }, + "fontWeights": { + "thin": { + "value": "100" + }, + "extralight": { + "value": "200" + }, + "light": { + "value": "300" + }, + "normal": { + "value": "400" + }, + "medium": { + "value": "500" + }, + "semibold": { + "value": "600" + }, + "bold": { + "value": "700" + }, + "extrabold": { + "value": "800" + }, + "black": { + "value": "900" + } + }, + "lineHeights": { + "none": { + "value": "1" + }, + "tight": { + "value": "1.25" + }, + "snug": { + "value": "1.375" + }, + "normal": { + "value": "1.5" + }, + "relaxed": { + "value": "1.625" + }, + "loose": { + "value": "2" + } + }, + "fonts": { + "sans": { + "value": [ + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "\"Segoe UI\"", + "Roboto", + "\"Helvetica Neue\"", + "Arial", + "\"Noto Sans\"", + "sans-serif", + "\"Apple Color Emoji\"", + "\"Segoe UI Emoji\"", + "\"Segoe UI Symbol\"", + "\"Noto Color Emoji\"" + ] + }, + "serif": { + "value": [ + "ui-serif", + "Georgia", + "Cambria", + "\"Times New Roman\"", + "Times", + "serif" + ] + }, + "mono": { + "value": [ + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "\"Liberation Mono\"", + "\"Courier New\"", + "monospace" + ] + } + }, + "letterSpacings": { + "tighter": { + "value": "-0.05em" + }, + "tight": { + "value": "-0.025em" + }, + "normal": { + "value": "0em" + }, + "wide": { + "value": "0.025em" + }, + "wider": { + "value": "0.05em" + }, + "widest": { + "value": "0.1em" + } + }, + "fontSizes": { + "2xs": { + "value": "0.5rem" + }, + "xs": { + "value": "0.75rem" + }, + "sm": { + "value": "0.875rem" + }, + "md": { + "value": "1rem" + }, + "lg": { + "value": "1.125rem" + }, + "xl": { + "value": "1.25rem" + }, + "2xl": { + "value": "1.5rem" + }, + "3xl": { + "value": "1.875rem" + }, + "4xl": { + "value": "2.25rem" + }, + "5xl": { + "value": "3rem" + }, + "6xl": { + "value": "3.75rem" + }, + "7xl": { + "value": "4.5rem" + }, + "8xl": { + "value": "6rem" + }, + "9xl": { + "value": "8rem" + } + }, + "shadows": { + "2xs": { + "value": "0 1px rgb(0 0 0 / 0.05)" + }, + "xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" + }, + "sm": { + "value": [ + "0 1px 3px 0 rgb(0 0 0 / 0.1)", + "0 1px 2px -1px rgb(0 0 0 / 0.1)" + ] + }, + "md": { + "value": [ + "0 4px 6px -1px rgb(0 0 0 / 0.1)", + "0 2px 4px -2px rgb(0 0 0 / 0.1)" + ] + }, + "lg": { + "value": [ + "0 10px 15px -3px rgb(0 0 0 / 0.1)", + "0 4px 6px -4px rgb(0 0 0 / 0.1)" + ] + }, + "xl": { + "value": [ + "0 20px 25px -5px rgb(0 0 0 / 0.1)", + "0 8px 10px -6px rgb(0 0 0 / 0.1)" + ] + }, + "2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)" + }, + "inset-2xs": { + "value": "inset 0 1px rgb(0 0 0 / 0.05)" + }, + "inset-xs": { + "value": "inset 0 1px 1px rgb(0 0 0 / 0.05)" + }, + "inset-sm": { + "value": "inset 0 2px 4px rgb(0 0 0 / 0.05)" + } + }, + "colors": { + "current": { + "value": "currentColor" + }, + "black": { + "value": "#000" + }, + "white": { + "value": "#fff" + }, + "transparent": { + "value": "rgb(0 0 0 / 0)" + }, + "rose": { + "50": { + "value": "#fff1f2" + }, + "100": { + "value": "#ffe4e6" + }, + "200": { + "value": "#fecdd3" + }, + "300": { + "value": "#fda4af" + }, + "400": { + "value": "#fb7185" + }, + "500": { + "value": "#f43f5e" + }, + "600": { + "value": "#e11d48" + }, + "700": { + "value": "#be123c" + }, + "800": { + "value": "#9f1239" + }, + "900": { + "value": "#881337" + }, + "950": { + "value": "#4c0519" + } + }, + "pink": { + "50": { + "value": "#fdf2f8" + }, + "100": { + "value": "#fce7f3" + }, + "200": { + "value": "#fbcfe8" + }, + "300": { + "value": "#f9a8d4" + }, + "400": { + "value": "#f472b6" + }, + "500": { + "value": "#ec4899" + }, + "600": { + "value": "#db2777" + }, + "700": { + "value": "#be185d" + }, + "800": { + "value": "#9d174d" + }, + "900": { + "value": "#831843" + }, + "950": { + "value": "#500724" + } + }, + "fuchsia": { + "50": { + "value": "#fdf4ff" + }, + "100": { + "value": "#fae8ff" + }, + "200": { + "value": "#f5d0fe" + }, + "300": { + "value": "#f0abfc" + }, + "400": { + "value": "#e879f9" + }, + "500": { + "value": "#d946ef" + }, + "600": { + "value": "#c026d3" + }, + "700": { + "value": "#a21caf" + }, + "800": { + "value": "#86198f" + }, + "900": { + "value": "#701a75" + }, + "950": { + "value": "#4a044e" + } + }, + "purple": { + "50": { + "value": "#faf5ff" + }, + "100": { + "value": "#f3e8ff" + }, + "200": { + "value": "#e9d5ff" + }, + "300": { + "value": "#d8b4fe" + }, + "400": { + "value": "#c084fc" + }, + "500": { + "value": "#a855f7" + }, + "600": { + "value": "#9333ea" + }, + "700": { + "value": "#7e22ce" + }, + "800": { + "value": "#6b21a8" + }, + "900": { + "value": "#581c87" + }, + "950": { + "value": "#3b0764" + } + }, + "violet": { + "50": { + "value": "#f5f3ff" + }, + "100": { + "value": "#ede9fe" + }, + "200": { + "value": "#ddd6fe" + }, + "300": { + "value": "#c4b5fd" + }, + "400": { + "value": "#a78bfa" + }, + "500": { + "value": "#8b5cf6" + }, + "600": { + "value": "#7c3aed" + }, + "700": { + "value": "#6d28d9" + }, + "800": { + "value": "#5b21b6" + }, + "900": { + "value": "#4c1d95" + }, + "950": { + "value": "#2e1065" + } + }, + "indigo": { + "50": { + "value": "#eef2ff" + }, + "100": { + "value": "#e0e7ff" + }, + "200": { + "value": "#c7d2fe" + }, + "300": { + "value": "#a5b4fc" + }, + "400": { + "value": "#818cf8" + }, + "500": { + "value": "#6366f1" + }, + "600": { + "value": "#4f46e5" + }, + "700": { + "value": "#4338ca" + }, + "800": { + "value": "#3730a3" + }, + "900": { + "value": "#312e81" + }, + "950": { + "value": "#1e1b4b" + } + }, + "blue": { + "50": { + "value": "#eff6ff" + }, + "100": { + "value": "#dbeafe" + }, + "200": { + "value": "#bfdbfe" + }, + "300": { + "value": "#93c5fd" + }, + "400": { + "value": "#60a5fa" + }, + "500": { + "value": "#3b82f6" + }, + "600": { + "value": "#2563eb" + }, + "700": { + "value": "#1d4ed8" + }, + "800": { + "value": "#1e40af" + }, + "900": { + "value": "#1e3a8a" + }, + "950": { + "value": "#172554" + } + }, + "sky": { + "50": { + "value": "#f0f9ff" + }, + "100": { + "value": "#e0f2fe" + }, + "200": { + "value": "#bae6fd" + }, + "300": { + "value": "#7dd3fc" + }, + "400": { + "value": "#38bdf8" + }, + "500": { + "value": "#0ea5e9" + }, + "600": { + "value": "#0284c7" + }, + "700": { + "value": "#0369a1" + }, + "800": { + "value": "#075985" + }, + "900": { + "value": "#0c4a6e" + }, + "950": { + "value": "#082f49" + } + }, + "cyan": { + "50": { + "value": "#ecfeff" + }, + "100": { + "value": "#cffafe" + }, + "200": { + "value": "#a5f3fc" + }, + "300": { + "value": "#67e8f9" + }, + "400": { + "value": "#22d3ee" + }, + "500": { + "value": "#06b6d4" + }, + "600": { + "value": "#0891b2" + }, + "700": { + "value": "#0e7490" + }, + "800": { + "value": "#155e75" + }, + "900": { + "value": "#164e63" + }, + "950": { + "value": "#083344" + } + }, + "teal": { + "50": { + "value": "#f0fdfa" + }, + "100": { + "value": "#ccfbf1" + }, + "200": { + "value": "#99f6e4" + }, + "300": { + "value": "#5eead4" + }, + "400": { + "value": "#2dd4bf" + }, + "500": { + "value": "#14b8a6" + }, + "600": { + "value": "#0d9488" + }, + "700": { + "value": "#0f766e" + }, + "800": { + "value": "#115e59" + }, + "900": { + "value": "#134e4a" + }, + "950": { + "value": "#042f2e" + } + }, + "emerald": { + "50": { + "value": "#ecfdf5" + }, + "100": { + "value": "#d1fae5" + }, + "200": { + "value": "#a7f3d0" + }, + "300": { + "value": "#6ee7b7" + }, + "400": { + "value": "#34d399" + }, + "500": { + "value": "#10b981" + }, + "600": { + "value": "#059669" + }, + "700": { + "value": "#047857" + }, + "800": { + "value": "#065f46" + }, + "900": { + "value": "#064e3b" + }, + "950": { + "value": "#022c22" + } + }, + "green": { + "50": { + "value": "#f0fdf4" + }, + "100": { + "value": "#dcfce7" + }, + "200": { + "value": "#bbf7d0" + }, + "300": { + "value": "#86efac" + }, + "400": { + "value": "#4ade80" + }, + "500": { + "value": "#22c55e" + }, + "600": { + "value": "#16a34a" + }, + "700": { + "value": "#15803d" + }, + "800": { + "value": "#166534" + }, + "900": { + "value": "#14532d" + }, + "950": { + "value": "#052e16" + } + }, + "lime": { + "50": { + "value": "#f7fee7" + }, + "100": { + "value": "#ecfccb" + }, + "200": { + "value": "#d9f99d" + }, + "300": { + "value": "#bef264" + }, + "400": { + "value": "#a3e635" + }, + "500": { + "value": "#84cc16" + }, + "600": { + "value": "#65a30d" + }, + "700": { + "value": "#4d7c0f" + }, + "800": { + "value": "#3f6212" + }, + "900": { + "value": "#365314" + }, + "950": { + "value": "#1a2e05" + } + }, + "yellow": { + "50": { + "value": "#fefce8" + }, + "100": { + "value": "#fef9c3" + }, + "200": { + "value": "#fef08a" + }, + "300": { + "value": "#fde047" + }, + "400": { + "value": "#facc15" + }, + "500": { + "value": "#eab308" + }, + "600": { + "value": "#ca8a04" + }, + "700": { + "value": "#a16207" + }, + "800": { + "value": "#854d0e" + }, + "900": { + "value": "#713f12" + }, + "950": { + "value": "#422006" + } + }, + "amber": { + "50": { + "value": "#fffbeb" + }, + "100": { + "value": "#fef3c7" + }, + "200": { + "value": "#fde68a" + }, + "300": { + "value": "#fcd34d" + }, + "400": { + "value": "#fbbf24" + }, + "500": { + "value": "#f59e0b" + }, + "600": { + "value": "#d97706" + }, + "700": { + "value": "#b45309" + }, + "800": { + "value": "#92400e" + }, + "900": { + "value": "#78350f" + }, + "950": { + "value": "#451a03" + } + }, + "orange": { + "50": { + "value": "#fff7ed" + }, + "100": { + "value": "#ffedd5" + }, + "200": { + "value": "#fed7aa" + }, + "300": { + "value": "#fdba74" + }, + "400": { + "value": "#fb923c" + }, + "500": { + "value": "#f97316" + }, + "600": { + "value": "#ea580c" + }, + "700": { + "value": "#c2410c" + }, + "800": { + "value": "#9a3412" + }, + "900": { + "value": "#7c2d12" + }, + "950": { + "value": "#431407" + } + }, + "red": { + "50": { + "value": "#fef2f2" + }, + "100": { + "value": "#fee2e2" + }, + "200": { + "value": "#fecaca" + }, + "300": { + "value": "#fca5a5" + }, + "400": { + "value": "#f87171" + }, + "500": { + "value": "#ef4444" + }, + "600": { + "value": "#dc2626" + }, + "700": { + "value": "#b91c1c" + }, + "800": { + "value": "#991b1b" + }, + "900": { + "value": "#7f1d1d" + }, + "950": { + "value": "#450a0a" + } + }, + "neutral": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f5f5f5" + }, + "200": { + "value": "#e5e5e5" + }, + "300": { + "value": "#d4d4d4" + }, + "400": { + "value": "#a3a3a3" + }, + "500": { + "value": "#737373" + }, + "600": { + "value": "#525252" + }, + "700": { + "value": "#404040" + }, + "800": { + "value": "#262626" + }, + "900": { + "value": "#171717" + }, + "950": { + "value": "#0a0a0a" + } + }, + "stone": { + "50": { + "value": "#fafaf9" + }, + "100": { + "value": "#f5f5f4" + }, + "200": { + "value": "#e7e5e4" + }, + "300": { + "value": "#d6d3d1" + }, + "400": { + "value": "#a8a29e" + }, + "500": { + "value": "#78716c" + }, + "600": { + "value": "#57534e" + }, + "700": { + "value": "#44403c" + }, + "800": { + "value": "#292524" + }, + "900": { + "value": "#1c1917" + }, + "950": { + "value": "#0c0a09" + } + }, + "zinc": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f4f4f5" + }, + "200": { + "value": "#e4e4e7" + }, + "300": { + "value": "#d4d4d8" + }, + "400": { + "value": "#a1a1aa" + }, + "500": { + "value": "#71717a" + }, + "600": { + "value": "#52525b" + }, + "700": { + "value": "#3f3f46" + }, + "800": { + "value": "#27272a" + }, + "900": { + "value": "#18181b" + }, + "950": { + "value": "#09090b" + } + }, + "gray": { + "50": { + "value": "#f9fafb" + }, + "100": { + "value": "#f3f4f6" + }, + "200": { + "value": "#e5e7eb" + }, + "300": { + "value": "#d1d5db" + }, + "400": { + "value": "#9ca3af" + }, + "500": { + "value": "#6b7280" + }, + "600": { + "value": "#4b5563" + }, + "700": { + "value": "#374151" + }, + "800": { + "value": "#1f2937" + }, + "900": { + "value": "#111827" + }, + "950": { + "value": "#030712" + } + }, + "slate": { + "50": { + "value": "#f8fafc" + }, + "100": { + "value": "#f1f5f9" + }, + "200": { + "value": "#e2e8f0" + }, + "300": { + "value": "#cbd5e1" + }, + "400": { + "value": "#94a3b8" + }, + "500": { + "value": "#64748b" + }, + "600": { + "value": "#475569" + }, + "700": { + "value": "#334155" + }, + "800": { + "value": "#1e293b" + }, + "900": { + "value": "#0f172a" + }, + "950": { + "value": "#020617" + } + } + }, + "blurs": { + "xs": { + "value": "4px" + }, + "sm": { + "value": "8px" + }, + "md": { + "value": "12px" + }, + "lg": { + "value": "16px" + }, + "xl": { + "value": "24px" + }, + "2xl": { + "value": "40px" + }, + "3xl": { + "value": "64px" + } + }, + "spacing": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + } + }, + "sizes": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + }, + "xs": { + "value": "20rem" + }, + "sm": { + "value": "24rem" + }, + "md": { + "value": "28rem" + }, + "lg": { + "value": "32rem" + }, + "xl": { + "value": "36rem" + }, + "2xl": { + "value": "42rem" + }, + "3xl": { + "value": "48rem" + }, + "4xl": { + "value": "56rem" + }, + "5xl": { + "value": "64rem" + }, + "6xl": { + "value": "72rem" + }, + "7xl": { + "value": "80rem" + }, + "8xl": { + "value": "90rem" + }, + "prose": { + "value": "65ch" + }, + "full": { + "value": "100%" + }, + "min": { + "value": "min-content" + }, + "max": { + "value": "max-content" + }, + "fit": { + "value": "fit-content" + } + }, + "animations": { + "spin": { + "value": "spin 1s linear infinite" + }, + "ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" + }, + "pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" + }, + "bounce": { + "value": "bounce 1s infinite" + } + } + }, + "textStyles": { + "xs": { + "value": { + "fontSize": "0.75rem", + "lineHeight": "calc(1 / 0.75)" + } + }, + "sm": { + "value": { + "fontSize": "0.875rem", + "lineHeight": "calc(1.25 / 0.875)" + } + }, + "md": { + "value": { + "fontSize": "1rem", + "lineHeight": "calc(1.5 / 1)" + } + }, + "lg": { + "value": { + "fontSize": "1.125rem", + "lineHeight": "calc(1.75 / 1.125)" + } + }, + "xl": { + "value": { + "fontSize": "1.25rem", + "lineHeight": "calc(1.75 / 1.25)" + } + }, + "2xl": { + "value": { + "fontSize": "1.5rem", + "lineHeight": "calc(2 / 1.5)" + } + }, + "3xl": { + "value": { + "fontSize": "1.875rem", + "lineHeight": "calc(2.25 / 1.875)" + } + }, + "4xl": { + "value": { + "fontSize": "2.25rem", + "lineHeight": "calc(2.5 / 2.25)" + } + }, + "5xl": { + "value": { + "fontSize": "3rem", + "lineHeight": "1" + } + }, + "6xl": { + "value": { + "fontSize": "3.75rem", + "lineHeight": "1" + } + }, + "7xl": { + "value": { + "fontSize": "4.5rem", + "lineHeight": "1" + } + }, + "8xl": { + "value": { + "fontSize": "6rem", + "lineHeight": "1" + } + }, + "9xl": { + "value": { + "fontSize": "8rem", + "lineHeight": "1" + } + } + }, + "containerSizes": { + "xs": "320px", + "sm": "384px", + "md": "448px", + "lg": "512px", + "xl": "576px", + "2xl": "672px", + "3xl": "768px", + "4xl": "896px", + "5xl": "1024px", + "6xl": "1152px", + "7xl": "1280px", + "8xl": "1440px" + }, + "recipes": { + "button": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + } + } + } + }, + "buttonWithCompoundVariants": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "unstyled": {} + }, + "size": { + "sm": { + "fontSize": "1rem" + }, + "md": { + "fontSize": "2rem" + }, + "lg": { + "fontSize": "3rem" + } + } + }, + "compoundVariants": [ + { + "visual": "solid", + "css": { + "color": "blue" + } + }, + { + "size": "md", + "visual": "outline", + "css": { + "color": "green" + } + }, + { + "size": [ + "sm", + "lg" + ], + "visual": "outline", + "css": { + "color": "red" + } + } + ], + "defaultVariants": { + "visual": "unstyled" + } + } + }, + "slotRecipes": { + "slotButton": { + "className": "slot-button", + "slots": [ + "root", + "icon" + ], + "base": { + "root": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "icon": { + "fontSize": "2xl" + } + }, + "variants": { + "visual": { + "solid": { + "root": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "icon": { + "color": "white" + } + }, + "outline": { + "root": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "icon": { + "border": "1px solid" + } + }, + "unstyled": {} + } + }, + "defaultVariants": { + "visual": "unstyled" + } + } + } + }, + "utilities": { + "aspectRatio": { + "className": "asp", + "values": "aspectRatios", + "group": "Layout" + }, + "boxDecorationBreak": { + "className": "bx-db", + "group": "Layout", + "transform": { + "__function": "transform" + } + }, + "zIndex": { + "className": "z", + "values": "zIndex", + "group": "Visibility" + }, + "boxSizing": { + "className": "bx-s", + "group": "System" + }, + "objectPosition": { + "className": "obj-p", + "group": "Layout" + }, + "objectFit": { + "className": "obj-f", + "group": "Layout" + }, + "overscrollBehavior": { + "className": "ovs-b", + "group": "Scroll" + }, + "overscrollBehaviorX": { + "className": "ovs-bx", + "group": "Scroll" + }, + "overscrollBehaviorY": { + "className": "ovs-by", + "group": "Scroll" + }, + "position": { + "className": "pos", + "shorthand": "pos", + "group": "Position" + }, + "top": { + "className": "top", + "values": "spacing", + "group": "Position" + }, + "left": { + "className": "left", + "values": "spacing", + "group": "Position" + }, + "inset": { + "className": "inset", + "group": "Position", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + } + }, + "insetInline": { + "className": "inset-x", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetX" + ] + }, + "insetBlock": { + "className": "inset-y", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetY" + ] + }, + "insetBlockEnd": { + "className": "inset-be", + "values": "spacing", + "group": "Position" + }, + "insetBlockStart": { + "className": "inset-bs", + "values": "spacing", + "group": "Position" + }, + "insetInlineEnd": { + "className": "inset-e", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetEnd", + "end" + ] + }, + "insetInlineStart": { + "className": "inset-s", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetStart", + "start" + ] + }, + "right": { + "className": "right", + "values": "spacing", + "group": "Position" + }, + "bottom": { + "className": "bottom", + "values": "spacing", + "group": "Position" + }, + "float": { + "className": "float", + "values": [ + "start", + "end" + ], + "property": "float", + "group": "Position", + "transform": { + "__function": "transform" + } + }, + "visibility": { + "className": "vis", + "group": "Visibility" + }, + "display": { + "className": "d", + "group": "Display" + }, + "hideFrom": { + "className": "hide", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "hideBelow": { + "className": "show", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "flexBasis": { + "className": "flex-b", + "group": "Flex Layout", + "values": { + "__function": "values", + "probe": { + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "full": "100%" + } + } + }, + "flex": { + "className": "flex", + "group": "Flex Layout", + "values": { + "1": "1 1 0%", + "auto": "1 1 auto", + "initial": "0 1 auto", + "none": "none" + } + }, + "flexDirection": { + "className": "flex-d", + "group": "Flex Layout", + "shorthand": "flexDir" + }, + "flexGrow": { + "className": "flex-g", + "group": "Flex Layout" + }, + "flexShrink": { + "className": "flex-sh", + "group": "Flex Layout" + }, + "gridTemplateColumns": { + "className": "grid-tc", + "group": "Grid Layout" + }, + "gridTemplateRows": { + "className": "grid-tr", + "group": "Grid Layout" + }, + "gridColumn": { + "className": "grid-c", + "group": "Grid Layout" + }, + "gridRow": { + "className": "grid-r", + "group": "Grid Layout" + }, + "gridColumnStart": { + "className": "grid-cs", + "group": "Grid Layout" + }, + "gridColumnEnd": { + "className": "grid-ce", + "group": "Grid Layout" + }, + "gridAutoFlow": { + "className": "grid-af", + "group": "Grid Layout" + }, + "gridAutoColumns": { + "className": "grid-ac", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gridAutoRows": { + "className": "grid-ar", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gap": { + "className": "gap", + "group": "Flex Layout", + "values": "spacing" + }, + "gridGap": { + "className": "grid-g", + "group": "Grid Layout", + "values": "spacing" + }, + "gridRowGap": { + "className": "grid-rg", + "group": "Grid Layout", + "values": "spacing" + }, + "gridColumnGap": { + "className": "grid-cg", + "group": "Grid Layout", + "values": "spacing" + }, + "rowGap": { + "className": "rg", + "group": "Grid Layout", + "values": "spacing" + }, + "columnGap": { + "className": "cg", + "group": "Grid Layout", + "values": "spacing" + }, + "justifyContent": { + "className": "jc", + "group": "Flex Layout" + }, + "alignContent": { + "className": "ac", + "group": "Flex Layout" + }, + "alignItems": { + "className": "ai", + "group": "Flex Layout" + }, + "alignSelf": { + "className": "as", + "group": "Flex Layout" + }, + "padding": { + "className": "p", + "shorthand": "p", + "values": "spacing", + "group": "Padding" + }, + "paddingLeft": { + "className": "pl", + "shorthand": "pl", + "values": "spacing", + "group": "Padding" + }, + "paddingRight": { + "className": "pr", + "shorthand": "pr", + "values": "spacing", + "group": "Padding" + }, + "paddingTop": { + "className": "pt", + "shorthand": "pt", + "values": "spacing", + "group": "Padding" + }, + "paddingBottom": { + "className": "pb", + "shorthand": "pb", + "values": "spacing", + "group": "Padding" + }, + "paddingBlock": { + "className": "py", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "py", + "paddingY" + ] + }, + "paddingBlockEnd": { + "className": "pbe", + "values": "spacing", + "group": "Padding" + }, + "paddingBlockStart": { + "className": "pbs", + "values": "spacing", + "group": "Padding" + }, + "paddingInline": { + "className": "px", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "paddingX", + "px" + ] + }, + "paddingInlineEnd": { + "className": "pe", + "shorthand": [ + "pe", + "paddingEnd" + ], + "values": "spacing", + "group": "Padding" + }, + "paddingInlineStart": { + "className": "ps", + "shorthand": [ + "ps", + "paddingStart" + ], + "values": "spacing", + "group": "Padding" + }, + "marginLeft": { + "className": "ml", + "shorthand": "ml", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginRight": { + "className": "mr", + "shorthand": "mr", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginTop": { + "className": "mt", + "shorthand": "mt", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBottom": { + "className": "mb", + "shorthand": "mb", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "margin": { + "className": "m", + "shorthand": "m", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlock": { + "className": "my", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "my", + "marginY" + ] + }, + "marginBlockEnd": { + "className": "mbe", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlockStart": { + "className": "mbs", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInline": { + "className": "mx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "mx", + "marginX" + ] + }, + "marginInlineEnd": { + "className": "me", + "shorthand": [ + "me", + "marginEnd" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInlineStart": { + "className": "ms", + "shorthand": [ + "ms", + "marginStart" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "spaceX": { + "className": "sx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginInlineStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "spaceY": { + "className": "sy", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginBlockStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "outlineWidth": { + "className": "ring-w", + "shorthand": "ringWidth", + "values": "borderWidths", + "group": "Border" + }, + "outlineColor": { + "className": "ring-c", + "values": "colors", + "group": "Color", + "shorthand": "ringColor", + "transform": { + "__function": "transform", + "colorMix": "outlineColor" + } + }, + "outline": { + "className": "ring", + "shorthand": "ring", + "values": "borders", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "outlineOffset": { + "className": "ring-o", + "shorthand": "ringOffset", + "values": "spacing", + "group": "Border" + }, + "focusRing": { + "className": "focus-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusVisibleRing": { + "className": "focus-v-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusRingColor": { + "className": "focus-ring-c", + "values": "colors", + "group": "Focus Ring", + "transform": { + "__function": "transform", + "colorMix": "--focus-ring-color-prop" + } + }, + "focusRingOffset": { + "className": "focus-ring-o", + "values": "spacing", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingWidth": { + "className": "focus-ring-w", + "values": "borderWidths", + "property": "outlineWidth", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingStyle": { + "className": "focus-ring-s", + "values": "borderStyles", + "property": "outlineStyle", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "divideX": { + "className": "dvd-x", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideY": { + "className": "dvd-y", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideColor": { + "className": "dvd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideStyle": { + "className": "dvd-s", + "property": "borderStyle", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "width": { + "shorthand": "w", + "className": "w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "inlineSize": { + "className": "w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minWidth": { + "shorthand": "minW", + "className": "min-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minInlineSize": { + "className": "min-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxWidth": { + "shorthand": "maxW", + "className": "max-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxInlineSize": { + "className": "max-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "height": { + "shorthand": "h", + "className": "h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "blockSize": { + "className": "h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minHeight": { + "shorthand": "minH", + "className": "min-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minBlockSize": { + "className": "min-h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxHeight": { + "shorthand": "maxH", + "className": "max-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxBlockSize": { + "className": "max-b", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "boxSize": { + "className": "size", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + }, + "transform": { + "__function": "transform" + } + }, + "color": { + "className": "c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "color" + } + }, + "fontFamily": { + "className": "ff", + "values": "fonts", + "group": "Typography" + }, + "fontSize": { + "className": "fs", + "values": "fontSizes", + "group": "Typography" + }, + "fontSizeAdjust": { + "className": "fs-a", + "group": "Typography" + }, + "fontPalette": { + "className": "fp", + "group": "Typography" + }, + "fontKerning": { + "className": "fk", + "group": "Typography" + }, + "fontFeatureSettings": { + "className": "ff-s", + "group": "Typography" + }, + "fontWeight": { + "className": "fw", + "values": "fontWeights", + "group": "Typography" + }, + "fontSmoothing": { + "className": "fsmt", + "group": "Typography", + "values": { + "antialiased": "antialiased", + "subpixel-antialiased": "auto" + }, + "transform": { + "__function": "transform" + } + }, + "fontVariant": { + "className": "fv", + "group": "Typography" + }, + "fontVariantAlternates": { + "className": "fv-alt", + "group": "Typography" + }, + "fontVariantCaps": { + "className": "fv-caps", + "group": "Typography" + }, + "fontVariationSettings": { + "className": "fv-s", + "group": "Typography" + }, + "fontVariantNumeric": { + "className": "fv-num", + "group": "Typography" + }, + "letterSpacing": { + "className": "ls", + "values": "letterSpacings", + "group": "Typography" + }, + "lineHeight": { + "className": "lh", + "values": "lineHeights", + "group": "Typography" + }, + "textAlign": { + "className": "ta", + "group": "Typography" + }, + "textDecoration": { + "className": "td", + "group": "Typography" + }, + "textDecorationColor": { + "className": "td-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textDecorationColor" + }, + "group": "Typography" + }, + "textEmphasisColor": { + "className": "te-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textEmphasisColor" + }, + "group": "Typography" + }, + "textDecorationStyle": { + "className": "td-s", + "group": "Typography" + }, + "textDecorationThickness": { + "className": "td-t", + "group": "Typography" + }, + "textUnderlineOffset": { + "className": "tu-o", + "group": "Typography" + }, + "textTransform": { + "className": "tt", + "group": "Typography" + }, + "textIndent": { + "className": "ti", + "group": "Typography", + "values": "spacing" + }, + "textShadow": { + "className": "tsh", + "values": "shadows", + "group": "Typography" + }, + "textShadowColor": { + "shorthand": "textShadowColor", + "className": "tsh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--text-shadow-color" + }, + "group": "Typography" + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "WebkitTextFillColor" + }, + "group": "Typography" + }, + "textOverflow": { + "className": "tov", + "group": "Typography" + }, + "verticalAlign": { + "className": "va", + "group": "Typography" + }, + "wordBreak": { + "className": "wb", + "group": "Typography" + }, + "textWrap": { + "className": "tw", + "values": [ + "wrap", + "balance", + "nowrap" + ], + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "truncate": { + "className": "trunc", + "values": { + "type": "boolean" + }, + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "lineClamp": { + "className": "lc", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "listStyleType": { + "className": "li-t", + "group": "List" + }, + "listStylePosition": { + "className": "li-pos", + "group": "List" + }, + "listStyleImage": { + "className": "li-img", + "group": "List", + "values": "assets" + }, + "listStyle": { + "className": "li-s", + "group": "List" + }, + "backgroundPosition": { + "shorthand": "bgPosition", + "className": "bg-p", + "group": "Background" + }, + "backgroundPositionX": { + "shorthand": "bgPositionX", + "className": "bg-p-x", + "group": "Background" + }, + "backgroundPositionY": { + "shorthand": "bgPositionY", + "className": "bg-p-y", + "group": "Background" + }, + "backgroundAttachment": { + "shorthand": "bgAttachment", + "className": "bg-a", + "group": "Background" + }, + "backgroundClip": { + "shorthand": "bgClip", + "className": "bg-cp", + "group": "Background", + "transform": { + "__function": "transform" + } + }, + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "background" + } + }, + "backgroundColor": { + "shorthand": "bgColor", + "className": "bg-c", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "backgroundColor" + } + }, + "backgroundOrigin": { + "shorthand": "bgOrigin", + "className": "bg-o", + "group": "Background" + }, + "backgroundImage": { + "shorthand": "bgImage", + "className": "bg-i", + "values": "assets", + "group": "Background" + }, + "backgroundRepeat": { + "shorthand": "bgRepeat", + "className": "bg-r", + "group": "Background" + }, + "backgroundBlendMode": { + "shorthand": "bgBlendMode", + "className": "bg-bm", + "group": "Background" + }, + "backgroundSize": { + "shorthand": "bgSize", + "className": "bg-s", + "group": "Background" + }, + "backgroundGradient": { + "shorthand": "bgGradient", + "className": "bg-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundLinear": { + "shorthand": "bgLinear", + "className": "bg-linear", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundRadial": { + "shorthand": "bgRadial", + "className": "bg-radial", + "group": "Background Gradient", + "values": "gradients", + "transform": { + "__function": "transform" + } + }, + "backgroundConic": { + "shorthand": "bgConic", + "className": "bg-conic", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "textGradient": { + "className": "txt-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "gradientFromPosition": { + "className": "grad-from-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientToPosition": { + "className": "grad-to-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientFrom": { + "className": "grad-from", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-from" + } + }, + "gradientTo": { + "className": "grad-to", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-to" + } + }, + "gradientVia": { + "className": "grad-via", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientViaPosition": { + "className": "grad-via-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "borderRadius": { + "className": "bdr", + "shorthand": "rounded", + "values": "radii", + "group": "Border Radius" + }, + "borderTopLeftRadius": { + "className": "bdr-tl", + "shorthand": "roundedTopLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRightRadius": { + "className": "bdr-tr", + "shorthand": "roundedTopRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomRightRadius": { + "className": "bdr-br", + "shorthand": "roundedBottomRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomLeftRadius": { + "className": "bdr-bl", + "shorthand": "roundedBottomLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRadius": { + "className": "bdr-t", + "shorthand": "roundedTop", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderRightRadius": { + "className": "bdr-r", + "shorthand": "roundedRight", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderBottomRadius": { + "className": "bdr-b", + "shorthand": "roundedBottom", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderLeftRadius": { + "className": "bdr-l", + "shorthand": "roundedLeft", + "values": "radii", + "property": "borderRadius", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderStartStartRadius": { + "className": "bdr-ss", + "shorthand": "roundedStartStart", + "values": "radii", + "group": "Border Radius" + }, + "borderStartEndRadius": { + "className": "bdr-se", + "shorthand": "roundedStartEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderStartRadius": { + "className": "bdr-s", + "values": "radii", + "property": "borderRadius", + "shorthand": "roundedStart", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderEndStartRadius": { + "className": "bdr-es", + "shorthand": "roundedEndStart", + "values": "radii", + "group": "Border Radius" + }, + "borderEndEndRadius": { + "className": "bdr-ee", + "shorthand": "roundedEndEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderEndRadius": { + "className": "bdr-e", + "shorthand": "roundedEnd", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "border": { + "className": "bd", + "values": "borders", + "group": "Border" + }, + "borderWidth": { + "className": "bd-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderTopWidth": { + "className": "bd-t-w", + "values": "borderWidths", + "group": "Border" + }, + "borderLeftWidth": { + "className": "bd-l-w", + "values": "borderWidths", + "group": "Border" + }, + "borderRightWidth": { + "className": "bd-r-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBottomWidth": { + "className": "bd-b-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBlockStartWidth": { + "className": "bd-bs-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderBlockEndWidth": { + "className": "bd-be-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderColor": { + "className": "bd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderColor" + } + }, + "borderInline": { + "className": "bd-x", + "values": "borders", + "group": "Border", + "shorthand": "borderX" + }, + "borderInlineWidth": { + "className": "bd-x-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderXWidth" + }, + "borderInlineColor": { + "className": "bd-x-c", + "values": "colors", + "group": "Border", + "shorthand": "borderXColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineColor" + } + }, + "borderBlock": { + "className": "bd-y", + "values": "borders", + "group": "Border", + "shorthand": "borderY" + }, + "borderBlockWidth": { + "className": "bd-y-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderYWidth" + }, + "borderBlockColor": { + "className": "bd-y-c", + "values": "colors", + "group": "Border", + "shorthand": "borderYColor", + "transform": { + "__function": "transform", + "colorMix": "borderBlockColor" + } + }, + "borderLeft": { + "className": "bd-l", + "values": "borders", + "group": "Border" + }, + "borderLeftColor": { + "className": "bd-l-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderLeftColor" + } + }, + "borderInlineStart": { + "className": "bd-s", + "values": "borders", + "group": "Border", + "shorthand": "borderStart" + }, + "borderInlineStartWidth": { + "className": "bd-s-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderStartWidth" + }, + "borderInlineStartColor": { + "className": "bd-s-c", + "values": "colors", + "group": "Border", + "shorthand": "borderStartColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineStartColor" + } + }, + "borderRight": { + "className": "bd-r", + "values": "borders", + "group": "Border" + }, + "borderRightColor": { + "className": "bd-r-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderRightColor" + } + }, + "borderInlineEnd": { + "className": "bd-e", + "values": "borders", + "group": "Border", + "shorthand": "borderEnd" + }, + "borderInlineEndWidth": { + "className": "bd-e-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderEndWidth" + }, + "borderInlineEndColor": { + "className": "bd-e-c", + "values": "colors", + "group": "Border", + "shorthand": "borderEndColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineEndColor" + } + }, + "borderTop": { + "className": "bd-t", + "values": "borders", + "group": "Border" + }, + "borderTopColor": { + "className": "bd-t-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderTopColor" + } + }, + "borderBottom": { + "className": "bd-b", + "values": "borders", + "group": "Border" + }, + "borderBottomColor": { + "className": "bd-b-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBottomColor" + } + }, + "borderBlockEnd": { + "className": "bd-be", + "values": "borders", + "group": "Border" + }, + "borderBlockEndColor": { + "className": "bd-be-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockEndColor" + } + }, + "borderBlockStart": { + "className": "bd-bs", + "values": "borders", + "group": "Border" + }, + "borderBlockStartColor": { + "className": "bd-bs-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockStartColor" + } + }, + "opacity": { + "className": "op", + "values": "opacity", + "group": "Background" + }, + "boxShadow": { + "shorthand": "shadow", + "className": "bx-sh", + "values": "shadows", + "group": "Shadow" + }, + "boxShadowColor": { + "shorthand": "shadowColor", + "className": "bx-sh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--shadow-color" + }, + "group": "Color" + }, + "mixBlendMode": { + "className": "mix-bm", + "group": "Effect" + }, + "filter": { + "className": "filter", + "group": "Effect", + "values": { + "auto": "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )" + } + }, + "brightness": { + "className": "brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "contrast": { + "className": "contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "grayscale": { + "className": "grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "hueRotate": { + "className": "hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "invert": { + "className": "invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "saturate": { + "className": "saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "sepia": { + "className": "sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "dropShadow": { + "className": "drop-shadow", + "group": "Effect", + "values": "dropShadows", + "transform": { + "__function": "transform" + } + }, + "blur": { + "className": "blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropFilter": { + "className": "bkdp", + "group": "Effect", + "values": { + "auto": "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )" + }, + "transform": { + "__function": "transform" + } + }, + "backdropBlur": { + "className": "bkdp-blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropBrightness": { + "className": "bkdp-brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropContrast": { + "className": "bkdp-contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropGrayscale": { + "className": "bkdp-grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropHueRotate": { + "className": "bkdp-hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropInvert": { + "className": "bkdp-invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropOpacity": { + "className": "bkdp-opacity", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSaturate": { + "className": "bkdp-saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSepia": { + "className": "bkdp-sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "borderCollapse": { + "className": "bd-cl", + "group": "Table" + }, + "borderSpacing": { + "className": "bd-sp", + "group": "Table", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "auto": "var(--border-spacing-x) var(--border-spacing-y)" + } + } + }, + "borderSpacingX": { + "className": "bd-sx", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "borderSpacingY": { + "className": "bd-sy", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "tableLayout": { + "className": "tbl", + "group": "Table" + }, + "transitionTimingFunction": { + "className": "trs-tmf", + "values": "easings", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionDelay": { + "className": "trs-dly", + "values": "durations", + "group": "Transition" + }, + "transitionDuration": { + "className": "trs-dur", + "values": "durations", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionProperty": { + "className": "trs-prop", + "group": "Transition", + "values": { + "common": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", + "colors": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke", + "size": "width, height, min-width, max-width, min-height, max-height", + "position": "left, right, top, bottom, inset, inset-inline, inset-block", + "background": "background, background-color, background-image, background-position" + }, + "transform": { + "__function": "transform" + } + }, + "transition": { + "className": "trs", + "values": [ + "all", + "common", + "size", + "position", + "background", + "colors", + "opacity", + "shadow", + "transform" + ], + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "animation": { + "className": "anim", + "values": "animations", + "group": "Animation" + }, + "animationName": { + "className": "anim-n", + "values": "keyframes", + "group": "Animation" + }, + "animationTimingFunction": { + "className": "anim-tmf", + "values": "easings", + "group": "Animation" + }, + "animationDuration": { + "className": "anim-dur", + "values": "durations", + "group": "Animation" + }, + "animationDelay": { + "className": "anim-dly", + "values": "durations", + "group": "Animation" + }, + "animationPlayState": { + "className": "anim-ps", + "group": "Animation" + }, + "animationComposition": { + "className": "anim-comp", + "group": "Animation" + }, + "animationFillMode": { + "className": "anim-fm", + "group": "Animation" + }, + "animationDirection": { + "className": "anim-dir", + "group": "Animation" + }, + "animationIterationCount": { + "className": "anim-ic", + "group": "Animation" + }, + "animationRange": { + "className": "anim-r", + "group": "Animation" + }, + "animationState": { + "className": "anim-s", + "group": "Animation" + }, + "animationRangeStart": { + "className": "anim-rs", + "group": "Animation" + }, + "animationRangeEnd": { + "className": "anim-re", + "group": "Animation" + }, + "animationTimeline": { + "className": "anim-tl", + "group": "Animation" + }, + "transformOrigin": { + "className": "trf-o", + "group": "Transform" + }, + "transformBox": { + "className": "trf-b", + "group": "Transform" + }, + "transformStyle": { + "className": "trf-s", + "group": "Transform" + }, + "transform": { + "className": "trf", + "group": "Transform" + }, + "rotate": { + "className": "rotate", + "group": "Transform", + "property": "rotate", + "values": { + "auto": "var(--rotate-x) var(--rotate-y)", + "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)" + } + }, + "rotateX": { + "className": "rotate-x", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateY": { + "className": "rotate-y", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateZ": { + "className": "rotate-z", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "scale": { + "className": "scale", + "group": "Transform", + "property": "scale", + "values": { + "auto": "var(--scale-x) var(--scale-y)" + } + }, + "scaleX": { + "className": "scale-x", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "scaleY": { + "className": "scale-y", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "translate": { + "className": "translate", + "group": "Transform", + "property": "translate", + "values": { + "auto": "var(--translate-x) var(--translate-y)", + "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)" + } + }, + "translateX": { + "shorthand": "x", + "className": "translate-x", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateY": { + "shorthand": "y", + "className": "translate-y", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateZ": { + "shorthand": "z", + "className": "translate-z", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "accentColor": { + "className": "ac-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "accentColor" + }, + "group": "Color" + }, + "caretColor": { + "className": "ca-c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "caretColor" + } + }, + "scrollBehavior": { + "className": "scr-bhv", + "group": "Scroll" + }, + "scrollbar": { + "className": "scr-bar", + "values": [ + "visible", + "hidden" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollbarColor": { + "className": "scr-bar-c", + "values": "colors", + "group": "Scroll", + "transform": { + "__function": "transform", + "colorMix": "scrollbarColor" + } + }, + "scrollbarGutter": { + "className": "scr-bar-g", + "group": "Scroll" + }, + "scrollbarWidth": { + "className": "scr-bar-w", + "values": "sizes", + "group": "Scroll" + }, + "scrollMargin": { + "className": "scr-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginLeft": { + "className": "scr-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginRight": { + "className": "scr-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginTop": { + "className": "scr-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBottom": { + "className": "scr-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlock": { + "className": "scr-my", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginY" + ] + }, + "scrollMarginBlockEnd": { + "className": "scr-mbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlockStart": { + "className": "scr-mbt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInline": { + "className": "scr-mx", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginX" + ] + }, + "scrollMarginInlineEnd": { + "className": "scr-me", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInlineStart": { + "className": "scr-ms", + "values": "spacing", + "group": "Scroll" + }, + "scrollPadding": { + "className": "scr-p", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlock": { + "className": "scr-py", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingY" + ] + }, + "scrollPaddingBlockStart": { + "className": "scr-pbs", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlockEnd": { + "className": "scr-pbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInline": { + "className": "scr-px", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingX" + ] + }, + "scrollPaddingInlineEnd": { + "className": "scr-pe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInlineStart": { + "className": "scr-ps", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingLeft": { + "className": "scr-pl", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingRight": { + "className": "scr-pr", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingTop": { + "className": "scr-pt", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBottom": { + "className": "scr-pb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapAlign": { + "className": "scr-sa", + "group": "Scroll" + }, + "scrollSnapStop": { + "className": "scrs-s", + "group": "Scroll" + }, + "scrollSnapType": { + "className": "scrs-t", + "group": "Scroll", + "values": { + "none": "none", + "x": "x var(--scroll-snap-strictness)", + "y": "y var(--scroll-snap-strictness)", + "both": "both var(--scroll-snap-strictness)" + } + }, + "scrollSnapStrictness": { + "className": "scrs-strt", + "values": [ + "mandatory", + "proximity" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollSnapMargin": { + "className": "scrs-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginTop": { + "className": "scrs-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginBottom": { + "className": "scrs-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginLeft": { + "className": "scrs-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginRight": { + "className": "scrs-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapCoordinate": { + "className": "scrs-c", + "group": "Scroll" + }, + "scrollSnapDestination": { + "className": "scrs-d", + "group": "Scroll" + }, + "scrollSnapPointsX": { + "className": "scrs-px", + "group": "Scroll" + }, + "scrollSnapPointsY": { + "className": "scrs-py", + "group": "Scroll" + }, + "scrollSnapTypeX": { + "className": "scrs-tx", + "group": "Scroll" + }, + "scrollSnapTypeY": { + "className": "scrs-ty", + "group": "Scroll" + }, + "scrollTimeline": { + "className": "scrtl", + "group": "Scroll" + }, + "scrollTimelineAxis": { + "className": "scrtl-a", + "group": "Scroll" + }, + "scrollTimelineName": { + "className": "scrtl-n", + "group": "Scroll" + }, + "touchAction": { + "className": "tch-a", + "group": "Interactivity" + }, + "userSelect": { + "className": "us", + "group": "Interactivity", + "transform": { + "__function": "transform" + } + }, + "overflow": { + "className": "ov", + "group": "Scroll" + }, + "overflowWrap": { + "className": "ov-wrap", + "group": "Scroll" + }, + "overflowX": { + "className": "ov-x", + "group": "Scroll" + }, + "overflowY": { + "className": "ov-y", + "group": "Scroll" + }, + "overflowAnchor": { + "className": "ov-a", + "group": "Scroll" + }, + "overflowBlock": { + "className": "ov-b", + "group": "Scroll" + }, + "overflowInline": { + "className": "ov-i", + "group": "Scroll" + }, + "overflowClipBox": { + "className": "ovcp-bx", + "group": "Scroll" + }, + "overflowClipMargin": { + "className": "ovcp-m", + "group": "Scroll" + }, + "overscrollBehaviorBlock": { + "className": "ovs-bb", + "group": "Scroll" + }, + "overscrollBehaviorInline": { + "className": "ovs-bi", + "group": "Scroll" + }, + "fill": { + "className": "fill", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "fill" + } + }, + "stroke": { + "className": "stk", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "stroke" + } + }, + "strokeWidth": { + "className": "stk-w", + "values": "borderWidths", + "group": "Border" + }, + "strokeDasharray": { + "className": "stk-dsh", + "group": "Border" + }, + "strokeDashoffset": { + "className": "stk-do", + "group": "Border" + }, + "strokeLinecap": { + "className": "stk-lc", + "group": "Border" + }, + "strokeLinejoin": { + "className": "stk-lj", + "group": "Border" + }, + "strokeMiterlimit": { + "className": "stk-ml", + "group": "Border" + }, + "strokeOpacity": { + "className": "stk-op", + "group": "Border" + }, + "srOnly": { + "className": "sr", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "debug": { + "className": "debug", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "appearance": { + "className": "ap", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "backfaceVisibility": { + "className": "bfv", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "clipPath": { + "className": "cp-path", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "hyphens": { + "className": "hy", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "mask": { + "className": "msk", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskImage": { + "className": "msk-i", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskSize": { + "className": "msk-s", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "textSizeAdjust": { + "className": "txt-adj", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "container": { + "className": "cq", + "group": "Container" + }, + "containerName": { + "className": "cq-n", + "property": "containerName", + "values": "containerNames", + "group": "Container" + }, + "containerType": { + "className": "cq-t", + "group": "Container" + }, + "cursor": { + "className": "cursor", + "values": "cursor", + "group": "System" + } + }, + "outdir": "styled-system-strict-tokens", + "strictTokens": true, + "validation": "warn" +} diff --git a/src/Css/tests/Fixtures/Panda/configs/codegen-strict.json b/src/Css/tests/Fixtures/Panda/configs/codegen-strict.json new file mode 100644 index 00000000000..44c68536cfe --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/configs/codegen-strict.json @@ -0,0 +1,4629 @@ +{ + "conditions": { + "hover": "&:is(:hover, [data-hover])", + "focus": "&:is(:focus, [data-focus])", + "focusWithin": "&:focus-within", + "focusVisible": "&:is(:focus-visible, [data-focus-visible])", + "disabled": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])", + "active": "&:is(:active, [data-active])", + "visited": "&:visited", + "target": "&:target", + "readOnly": "&:is(:read-only, [data-read-only], [aria-readonly=true])", + "readWrite": "&:read-write", + "empty": "&:is(:empty, [data-empty])", + "checked": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])", + "enabled": "&:enabled", + "expanded": "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])", + "highlighted": "&[data-highlighted]", + "complete": "&[data-complete]", + "incomplete": "&[data-incomplete]", + "dragging": "&[data-dragging]", + "before": "&::before", + "after": "&::after", + "firstLetter": "&::first-letter", + "firstLine": "&::first-line", + "marker": "&::marker, &::-webkit-details-marker", + "selection": "&::selection", + "file": "&::file-selector-button", + "backdrop": "&::backdrop", + "first": "&:first-child", + "last": "&:last-child", + "only": "&:only-child", + "even": "&:nth-child(even)", + "odd": "&:nth-child(odd)", + "firstOfType": "&:first-of-type", + "lastOfType": "&:last-of-type", + "onlyOfType": "&:only-of-type", + "peerFocus": ".peer:is(:focus, [data-focus]) ~ &", + "peerHover": ".peer:is(:hover, [data-hover]) ~ &", + "peerActive": ".peer:is(:active, [data-active]) ~ &", + "peerFocusWithin": ".peer:focus-within ~ &", + "peerFocusVisible": ".peer:is(:focus-visible, [data-focus-visible]) ~ &", + "peerDisabled": ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &", + "peerChecked": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &", + "peerInvalid": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &", + "peerExpanded": ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &", + "peerPlaceholderShown": ".peer:placeholder-shown ~ &", + "groupFocus": ".group:is(:focus, [data-focus]) &", + "groupHover": ".group:is(:hover, [data-hover]) &", + "groupActive": ".group:is(:active, [data-active]) &", + "groupFocusWithin": ".group:focus-within &", + "groupFocusVisible": ".group:is(:focus-visible, [data-focus-visible]) &", + "groupDisabled": ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &", + "groupChecked": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &", + "groupExpanded": ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &", + "groupInvalid": ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &", + "indeterminate": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])", + "required": "&:is(:required, [data-required], [aria-required=true])", + "valid": "&:is(:valid, [data-valid])", + "invalid": "&:is(:invalid, [data-invalid], [aria-invalid=true])", + "autofill": "&:autofill", + "inRange": "&:is(:in-range, [data-in-range])", + "outOfRange": "&:is(:out-of-range, [data-outside-range])", + "placeholder": "&::placeholder, &[data-placeholder]", + "placeholderShown": "&:is(:placeholder-shown, [data-placeholder-shown])", + "pressed": "&:is([aria-pressed=true], [data-pressed])", + "selected": "&:is([aria-selected=true], [data-selected])", + "grabbed": "&:is([aria-grabbed=true], [data-grabbed])", + "underValue": "&[data-state=under-value]", + "overValue": "&[data-state=over-value]", + "atValue": "&[data-state=at-value]", + "default": "&:default", + "optional": "&:optional", + "open": "&:is([open], [data-open], [data-state=\"open\"], :popover-open)", + "closed": "&:is([closed], [data-closed], [data-state=\"closed\"])", + "fullscreen": "&:is(:fullscreen, [data-fullscreen])", + "loading": "&:is([data-loading], [aria-busy=true])", + "hidden": "&:is([hidden], [data-hidden])", + "current": "&:is([aria-current=true], [data-current])", + "currentPage": "&[aria-current=page]", + "currentStep": "&[aria-current=step]", + "today": "&[data-today]", + "unavailable": "&[data-unavailable]", + "rangeStart": "&[data-range-start]", + "rangeEnd": "&[data-range-end]", + "now": "&[data-now]", + "topmost": "&[data-topmost]", + "motionReduce": "@media (prefers-reduced-motion: reduce)", + "motionSafe": "@media (prefers-reduced-motion: no-preference)", + "print": "@media print", + "landscape": "@media (orientation: landscape)", + "portrait": "@media (orientation: portrait)", + "dark": ".dark &", + "light": ".light &", + "osDark": "@media (prefers-color-scheme: dark)", + "osLight": "@media (prefers-color-scheme: light)", + "highContrast": "@media (forced-colors: active)", + "lessContrast": "@media (prefers-contrast: less)", + "moreContrast": "@media (prefers-contrast: more)", + "ltr": ":where([dir=ltr], :dir(ltr)) &", + "rtl": ":where([dir=rtl], :dir(rtl)) &", + "scrollbar": "&::-webkit-scrollbar", + "scrollbarThumb": "&::-webkit-scrollbar-thumb", + "scrollbarTrack": "&::-webkit-scrollbar-track", + "horizontal": "&[data-orientation=horizontal]", + "vertical": "&[data-orientation=vertical]", + "icon": "& :where(svg)", + "starting": "@starting-style", + "noscript": "@media (scripting: none)", + "invertedColors": "@media (inverted-colors: inverted)" + }, + "theme": { + "keyframes": { + "spin": { + "to": { + "transform": "rotate(360deg)" + } + }, + "ping": { + "75%, 100%": { + "transform": "scale(2)", + "opacity": "0" + } + }, + "pulse": { + "50%": { + "opacity": ".5" + } + }, + "bounce": { + "0%, 100%": { + "transform": "translateY(-25%)", + "animationTimingFunction": "cubic-bezier(0.8,0,1,1)" + }, + "50%": { + "transform": "none", + "animationTimingFunction": "cubic-bezier(0,0,0.2,1)" + } + } + }, + "breakpoints": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + }, + "tokens": { + "aspectRatios": { + "square": { + "value": "1 / 1" + }, + "landscape": { + "value": "4 / 3" + }, + "portrait": { + "value": "3 / 4" + }, + "wide": { + "value": "16 / 9" + }, + "ultrawide": { + "value": "18 / 5" + }, + "golden": { + "value": "1.618 / 1" + } + }, + "borders": { + "none": { + "value": "none" + } + }, + "easings": { + "default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + }, + "linear": { + "value": "linear" + }, + "in": { + "value": "cubic-bezier(0.4, 0, 1, 1)" + }, + "out": { + "value": "cubic-bezier(0, 0, 0.2, 1)" + }, + "in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + } + }, + "durations": { + "fastest": { + "value": "50ms" + }, + "faster": { + "value": "100ms" + }, + "fast": { + "value": "150ms" + }, + "normal": { + "value": "200ms" + }, + "slow": { + "value": "300ms" + }, + "slower": { + "value": "400ms" + }, + "slowest": { + "value": "500ms" + } + }, + "radii": { + "xs": { + "value": "0.125rem" + }, + "sm": { + "value": "0.25rem" + }, + "md": { + "value": "0.375rem" + }, + "lg": { + "value": "0.5rem" + }, + "xl": { + "value": "0.75rem" + }, + "2xl": { + "value": "1rem" + }, + "3xl": { + "value": "1.5rem" + }, + "4xl": { + "value": "2rem" + }, + "full": { + "value": "9999px" + } + }, + "fontWeights": { + "thin": { + "value": "100" + }, + "extralight": { + "value": "200" + }, + "light": { + "value": "300" + }, + "normal": { + "value": "400" + }, + "medium": { + "value": "500" + }, + "semibold": { + "value": "600" + }, + "bold": { + "value": "700" + }, + "extrabold": { + "value": "800" + }, + "black": { + "value": "900" + } + }, + "lineHeights": { + "none": { + "value": "1" + }, + "tight": { + "value": "1.25" + }, + "snug": { + "value": "1.375" + }, + "normal": { + "value": "1.5" + }, + "relaxed": { + "value": "1.625" + }, + "loose": { + "value": "2" + } + }, + "fonts": { + "sans": { + "value": [ + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "\"Segoe UI\"", + "Roboto", + "\"Helvetica Neue\"", + "Arial", + "\"Noto Sans\"", + "sans-serif", + "\"Apple Color Emoji\"", + "\"Segoe UI Emoji\"", + "\"Segoe UI Symbol\"", + "\"Noto Color Emoji\"" + ] + }, + "serif": { + "value": [ + "ui-serif", + "Georgia", + "Cambria", + "\"Times New Roman\"", + "Times", + "serif" + ] + }, + "mono": { + "value": [ + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "\"Liberation Mono\"", + "\"Courier New\"", + "monospace" + ] + } + }, + "letterSpacings": { + "tighter": { + "value": "-0.05em" + }, + "tight": { + "value": "-0.025em" + }, + "normal": { + "value": "0em" + }, + "wide": { + "value": "0.025em" + }, + "wider": { + "value": "0.05em" + }, + "widest": { + "value": "0.1em" + } + }, + "fontSizes": { + "2xs": { + "value": "0.5rem" + }, + "xs": { + "value": "0.75rem" + }, + "sm": { + "value": "0.875rem" + }, + "md": { + "value": "1rem" + }, + "lg": { + "value": "1.125rem" + }, + "xl": { + "value": "1.25rem" + }, + "2xl": { + "value": "1.5rem" + }, + "3xl": { + "value": "1.875rem" + }, + "4xl": { + "value": "2.25rem" + }, + "5xl": { + "value": "3rem" + }, + "6xl": { + "value": "3.75rem" + }, + "7xl": { + "value": "4.5rem" + }, + "8xl": { + "value": "6rem" + }, + "9xl": { + "value": "8rem" + } + }, + "shadows": { + "2xs": { + "value": "0 1px rgb(0 0 0 / 0.05)" + }, + "xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" + }, + "sm": { + "value": [ + "0 1px 3px 0 rgb(0 0 0 / 0.1)", + "0 1px 2px -1px rgb(0 0 0 / 0.1)" + ] + }, + "md": { + "value": [ + "0 4px 6px -1px rgb(0 0 0 / 0.1)", + "0 2px 4px -2px rgb(0 0 0 / 0.1)" + ] + }, + "lg": { + "value": [ + "0 10px 15px -3px rgb(0 0 0 / 0.1)", + "0 4px 6px -4px rgb(0 0 0 / 0.1)" + ] + }, + "xl": { + "value": [ + "0 20px 25px -5px rgb(0 0 0 / 0.1)", + "0 8px 10px -6px rgb(0 0 0 / 0.1)" + ] + }, + "2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)" + }, + "inset-2xs": { + "value": "inset 0 1px rgb(0 0 0 / 0.05)" + }, + "inset-xs": { + "value": "inset 0 1px 1px rgb(0 0 0 / 0.05)" + }, + "inset-sm": { + "value": "inset 0 2px 4px rgb(0 0 0 / 0.05)" + } + }, + "colors": { + "current": { + "value": "currentColor" + }, + "black": { + "value": "#000" + }, + "white": { + "value": "#fff" + }, + "transparent": { + "value": "rgb(0 0 0 / 0)" + }, + "rose": { + "50": { + "value": "#fff1f2" + }, + "100": { + "value": "#ffe4e6" + }, + "200": { + "value": "#fecdd3" + }, + "300": { + "value": "#fda4af" + }, + "400": { + "value": "#fb7185" + }, + "500": { + "value": "#f43f5e" + }, + "600": { + "value": "#e11d48" + }, + "700": { + "value": "#be123c" + }, + "800": { + "value": "#9f1239" + }, + "900": { + "value": "#881337" + }, + "950": { + "value": "#4c0519" + } + }, + "pink": { + "50": { + "value": "#fdf2f8" + }, + "100": { + "value": "#fce7f3" + }, + "200": { + "value": "#fbcfe8" + }, + "300": { + "value": "#f9a8d4" + }, + "400": { + "value": "#f472b6" + }, + "500": { + "value": "#ec4899" + }, + "600": { + "value": "#db2777" + }, + "700": { + "value": "#be185d" + }, + "800": { + "value": "#9d174d" + }, + "900": { + "value": "#831843" + }, + "950": { + "value": "#500724" + } + }, + "fuchsia": { + "50": { + "value": "#fdf4ff" + }, + "100": { + "value": "#fae8ff" + }, + "200": { + "value": "#f5d0fe" + }, + "300": { + "value": "#f0abfc" + }, + "400": { + "value": "#e879f9" + }, + "500": { + "value": "#d946ef" + }, + "600": { + "value": "#c026d3" + }, + "700": { + "value": "#a21caf" + }, + "800": { + "value": "#86198f" + }, + "900": { + "value": "#701a75" + }, + "950": { + "value": "#4a044e" + } + }, + "purple": { + "50": { + "value": "#faf5ff" + }, + "100": { + "value": "#f3e8ff" + }, + "200": { + "value": "#e9d5ff" + }, + "300": { + "value": "#d8b4fe" + }, + "400": { + "value": "#c084fc" + }, + "500": { + "value": "#a855f7" + }, + "600": { + "value": "#9333ea" + }, + "700": { + "value": "#7e22ce" + }, + "800": { + "value": "#6b21a8" + }, + "900": { + "value": "#581c87" + }, + "950": { + "value": "#3b0764" + } + }, + "violet": { + "50": { + "value": "#f5f3ff" + }, + "100": { + "value": "#ede9fe" + }, + "200": { + "value": "#ddd6fe" + }, + "300": { + "value": "#c4b5fd" + }, + "400": { + "value": "#a78bfa" + }, + "500": { + "value": "#8b5cf6" + }, + "600": { + "value": "#7c3aed" + }, + "700": { + "value": "#6d28d9" + }, + "800": { + "value": "#5b21b6" + }, + "900": { + "value": "#4c1d95" + }, + "950": { + "value": "#2e1065" + } + }, + "indigo": { + "50": { + "value": "#eef2ff" + }, + "100": { + "value": "#e0e7ff" + }, + "200": { + "value": "#c7d2fe" + }, + "300": { + "value": "#a5b4fc" + }, + "400": { + "value": "#818cf8" + }, + "500": { + "value": "#6366f1" + }, + "600": { + "value": "#4f46e5" + }, + "700": { + "value": "#4338ca" + }, + "800": { + "value": "#3730a3" + }, + "900": { + "value": "#312e81" + }, + "950": { + "value": "#1e1b4b" + } + }, + "blue": { + "50": { + "value": "#eff6ff" + }, + "100": { + "value": "#dbeafe" + }, + "200": { + "value": "#bfdbfe" + }, + "300": { + "value": "#93c5fd" + }, + "400": { + "value": "#60a5fa" + }, + "500": { + "value": "#3b82f6" + }, + "600": { + "value": "#2563eb" + }, + "700": { + "value": "#1d4ed8" + }, + "800": { + "value": "#1e40af" + }, + "900": { + "value": "#1e3a8a" + }, + "950": { + "value": "#172554" + } + }, + "sky": { + "50": { + "value": "#f0f9ff" + }, + "100": { + "value": "#e0f2fe" + }, + "200": { + "value": "#bae6fd" + }, + "300": { + "value": "#7dd3fc" + }, + "400": { + "value": "#38bdf8" + }, + "500": { + "value": "#0ea5e9" + }, + "600": { + "value": "#0284c7" + }, + "700": { + "value": "#0369a1" + }, + "800": { + "value": "#075985" + }, + "900": { + "value": "#0c4a6e" + }, + "950": { + "value": "#082f49" + } + }, + "cyan": { + "50": { + "value": "#ecfeff" + }, + "100": { + "value": "#cffafe" + }, + "200": { + "value": "#a5f3fc" + }, + "300": { + "value": "#67e8f9" + }, + "400": { + "value": "#22d3ee" + }, + "500": { + "value": "#06b6d4" + }, + "600": { + "value": "#0891b2" + }, + "700": { + "value": "#0e7490" + }, + "800": { + "value": "#155e75" + }, + "900": { + "value": "#164e63" + }, + "950": { + "value": "#083344" + } + }, + "teal": { + "50": { + "value": "#f0fdfa" + }, + "100": { + "value": "#ccfbf1" + }, + "200": { + "value": "#99f6e4" + }, + "300": { + "value": "#5eead4" + }, + "400": { + "value": "#2dd4bf" + }, + "500": { + "value": "#14b8a6" + }, + "600": { + "value": "#0d9488" + }, + "700": { + "value": "#0f766e" + }, + "800": { + "value": "#115e59" + }, + "900": { + "value": "#134e4a" + }, + "950": { + "value": "#042f2e" + } + }, + "emerald": { + "50": { + "value": "#ecfdf5" + }, + "100": { + "value": "#d1fae5" + }, + "200": { + "value": "#a7f3d0" + }, + "300": { + "value": "#6ee7b7" + }, + "400": { + "value": "#34d399" + }, + "500": { + "value": "#10b981" + }, + "600": { + "value": "#059669" + }, + "700": { + "value": "#047857" + }, + "800": { + "value": "#065f46" + }, + "900": { + "value": "#064e3b" + }, + "950": { + "value": "#022c22" + } + }, + "green": { + "50": { + "value": "#f0fdf4" + }, + "100": { + "value": "#dcfce7" + }, + "200": { + "value": "#bbf7d0" + }, + "300": { + "value": "#86efac" + }, + "400": { + "value": "#4ade80" + }, + "500": { + "value": "#22c55e" + }, + "600": { + "value": "#16a34a" + }, + "700": { + "value": "#15803d" + }, + "800": { + "value": "#166534" + }, + "900": { + "value": "#14532d" + }, + "950": { + "value": "#052e16" + } + }, + "lime": { + "50": { + "value": "#f7fee7" + }, + "100": { + "value": "#ecfccb" + }, + "200": { + "value": "#d9f99d" + }, + "300": { + "value": "#bef264" + }, + "400": { + "value": "#a3e635" + }, + "500": { + "value": "#84cc16" + }, + "600": { + "value": "#65a30d" + }, + "700": { + "value": "#4d7c0f" + }, + "800": { + "value": "#3f6212" + }, + "900": { + "value": "#365314" + }, + "950": { + "value": "#1a2e05" + } + }, + "yellow": { + "50": { + "value": "#fefce8" + }, + "100": { + "value": "#fef9c3" + }, + "200": { + "value": "#fef08a" + }, + "300": { + "value": "#fde047" + }, + "400": { + "value": "#facc15" + }, + "500": { + "value": "#eab308" + }, + "600": { + "value": "#ca8a04" + }, + "700": { + "value": "#a16207" + }, + "800": { + "value": "#854d0e" + }, + "900": { + "value": "#713f12" + }, + "950": { + "value": "#422006" + } + }, + "amber": { + "50": { + "value": "#fffbeb" + }, + "100": { + "value": "#fef3c7" + }, + "200": { + "value": "#fde68a" + }, + "300": { + "value": "#fcd34d" + }, + "400": { + "value": "#fbbf24" + }, + "500": { + "value": "#f59e0b" + }, + "600": { + "value": "#d97706" + }, + "700": { + "value": "#b45309" + }, + "800": { + "value": "#92400e" + }, + "900": { + "value": "#78350f" + }, + "950": { + "value": "#451a03" + } + }, + "orange": { + "50": { + "value": "#fff7ed" + }, + "100": { + "value": "#ffedd5" + }, + "200": { + "value": "#fed7aa" + }, + "300": { + "value": "#fdba74" + }, + "400": { + "value": "#fb923c" + }, + "500": { + "value": "#f97316" + }, + "600": { + "value": "#ea580c" + }, + "700": { + "value": "#c2410c" + }, + "800": { + "value": "#9a3412" + }, + "900": { + "value": "#7c2d12" + }, + "950": { + "value": "#431407" + } + }, + "red": { + "50": { + "value": "#fef2f2" + }, + "100": { + "value": "#fee2e2" + }, + "200": { + "value": "#fecaca" + }, + "300": { + "value": "#fca5a5" + }, + "400": { + "value": "#f87171" + }, + "500": { + "value": "#ef4444" + }, + "600": { + "value": "#dc2626" + }, + "700": { + "value": "#b91c1c" + }, + "800": { + "value": "#991b1b" + }, + "900": { + "value": "#7f1d1d" + }, + "950": { + "value": "#450a0a" + } + }, + "neutral": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f5f5f5" + }, + "200": { + "value": "#e5e5e5" + }, + "300": { + "value": "#d4d4d4" + }, + "400": { + "value": "#a3a3a3" + }, + "500": { + "value": "#737373" + }, + "600": { + "value": "#525252" + }, + "700": { + "value": "#404040" + }, + "800": { + "value": "#262626" + }, + "900": { + "value": "#171717" + }, + "950": { + "value": "#0a0a0a" + } + }, + "stone": { + "50": { + "value": "#fafaf9" + }, + "100": { + "value": "#f5f5f4" + }, + "200": { + "value": "#e7e5e4" + }, + "300": { + "value": "#d6d3d1" + }, + "400": { + "value": "#a8a29e" + }, + "500": { + "value": "#78716c" + }, + "600": { + "value": "#57534e" + }, + "700": { + "value": "#44403c" + }, + "800": { + "value": "#292524" + }, + "900": { + "value": "#1c1917" + }, + "950": { + "value": "#0c0a09" + } + }, + "zinc": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f4f4f5" + }, + "200": { + "value": "#e4e4e7" + }, + "300": { + "value": "#d4d4d8" + }, + "400": { + "value": "#a1a1aa" + }, + "500": { + "value": "#71717a" + }, + "600": { + "value": "#52525b" + }, + "700": { + "value": "#3f3f46" + }, + "800": { + "value": "#27272a" + }, + "900": { + "value": "#18181b" + }, + "950": { + "value": "#09090b" + } + }, + "gray": { + "50": { + "value": "#f9fafb" + }, + "100": { + "value": "#f3f4f6" + }, + "200": { + "value": "#e5e7eb" + }, + "300": { + "value": "#d1d5db" + }, + "400": { + "value": "#9ca3af" + }, + "500": { + "value": "#6b7280" + }, + "600": { + "value": "#4b5563" + }, + "700": { + "value": "#374151" + }, + "800": { + "value": "#1f2937" + }, + "900": { + "value": "#111827" + }, + "950": { + "value": "#030712" + } + }, + "slate": { + "50": { + "value": "#f8fafc" + }, + "100": { + "value": "#f1f5f9" + }, + "200": { + "value": "#e2e8f0" + }, + "300": { + "value": "#cbd5e1" + }, + "400": { + "value": "#94a3b8" + }, + "500": { + "value": "#64748b" + }, + "600": { + "value": "#475569" + }, + "700": { + "value": "#334155" + }, + "800": { + "value": "#1e293b" + }, + "900": { + "value": "#0f172a" + }, + "950": { + "value": "#020617" + } + } + }, + "blurs": { + "xs": { + "value": "4px" + }, + "sm": { + "value": "8px" + }, + "md": { + "value": "12px" + }, + "lg": { + "value": "16px" + }, + "xl": { + "value": "24px" + }, + "2xl": { + "value": "40px" + }, + "3xl": { + "value": "64px" + } + }, + "spacing": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + } + }, + "sizes": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + }, + "xs": { + "value": "20rem" + }, + "sm": { + "value": "24rem" + }, + "md": { + "value": "28rem" + }, + "lg": { + "value": "32rem" + }, + "xl": { + "value": "36rem" + }, + "2xl": { + "value": "42rem" + }, + "3xl": { + "value": "48rem" + }, + "4xl": { + "value": "56rem" + }, + "5xl": { + "value": "64rem" + }, + "6xl": { + "value": "72rem" + }, + "7xl": { + "value": "80rem" + }, + "8xl": { + "value": "90rem" + }, + "prose": { + "value": "65ch" + }, + "full": { + "value": "100%" + }, + "min": { + "value": "min-content" + }, + "max": { + "value": "max-content" + }, + "fit": { + "value": "fit-content" + } + }, + "animations": { + "spin": { + "value": "spin 1s linear infinite" + }, + "ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" + }, + "pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" + }, + "bounce": { + "value": "bounce 1s infinite" + } + } + }, + "textStyles": { + "xs": { + "value": { + "fontSize": "0.75rem", + "lineHeight": "calc(1 / 0.75)" + } + }, + "sm": { + "value": { + "fontSize": "0.875rem", + "lineHeight": "calc(1.25 / 0.875)" + } + }, + "md": { + "value": { + "fontSize": "1rem", + "lineHeight": "calc(1.5 / 1)" + } + }, + "lg": { + "value": { + "fontSize": "1.125rem", + "lineHeight": "calc(1.75 / 1.125)" + } + }, + "xl": { + "value": { + "fontSize": "1.25rem", + "lineHeight": "calc(1.75 / 1.25)" + } + }, + "2xl": { + "value": { + "fontSize": "1.5rem", + "lineHeight": "calc(2 / 1.5)" + } + }, + "3xl": { + "value": { + "fontSize": "1.875rem", + "lineHeight": "calc(2.25 / 1.875)" + } + }, + "4xl": { + "value": { + "fontSize": "2.25rem", + "lineHeight": "calc(2.5 / 2.25)" + } + }, + "5xl": { + "value": { + "fontSize": "3rem", + "lineHeight": "1" + } + }, + "6xl": { + "value": { + "fontSize": "3.75rem", + "lineHeight": "1" + } + }, + "7xl": { + "value": { + "fontSize": "4.5rem", + "lineHeight": "1" + } + }, + "8xl": { + "value": { + "fontSize": "6rem", + "lineHeight": "1" + } + }, + "9xl": { + "value": { + "fontSize": "8rem", + "lineHeight": "1" + } + } + }, + "containerSizes": { + "xs": "320px", + "sm": "384px", + "md": "448px", + "lg": "512px", + "xl": "576px", + "2xl": "672px", + "3xl": "768px", + "4xl": "896px", + "5xl": "1024px", + "6xl": "1152px", + "7xl": "1280px", + "8xl": "1440px" + }, + "recipes": { + "button": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + } + } + } + }, + "buttonWithCompoundVariants": { + "className": "button", + "description": "The styles for the Button component", + "base": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "variants": { + "visual": { + "solid": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "outline": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "unstyled": {} + }, + "size": { + "sm": { + "fontSize": "1rem" + }, + "md": { + "fontSize": "2rem" + }, + "lg": { + "fontSize": "3rem" + } + } + }, + "compoundVariants": [ + { + "visual": "solid", + "css": { + "color": "blue" + } + }, + { + "size": "md", + "visual": "outline", + "css": { + "color": "green" + } + }, + { + "size": [ + "sm", + "lg" + ], + "visual": "outline", + "css": { + "color": "red" + } + } + ], + "defaultVariants": { + "visual": "unstyled" + } + } + }, + "slotRecipes": { + "slotButton": { + "className": "slot-button", + "slots": [ + "root", + "icon" + ], + "base": { + "root": { + "borderRadius": "md", + "fontWeight": "semibold", + "h": "10", + "px": "4" + }, + "icon": { + "fontSize": "2xl" + } + }, + "variants": { + "visual": { + "solid": { + "root": { + "bg": { + "base": "colorPalette.500", + "_dark": "colorPalette.300" + }, + "color": { + "base": "white", + "_dark": "gray.800" + } + }, + "icon": { + "color": "white" + } + }, + "outline": { + "root": { + "border": "1px solid", + "color": { + "base": "colorPalette.600", + "_dark": "colorPalette.200" + }, + "borderColor": "currentColor" + }, + "icon": { + "border": "1px solid" + } + }, + "unstyled": {} + } + }, + "defaultVariants": { + "visual": "unstyled" + } + } + } + }, + "utilities": { + "aspectRatio": { + "className": "asp", + "values": "aspectRatios", + "group": "Layout" + }, + "boxDecorationBreak": { + "className": "bx-db", + "group": "Layout", + "transform": { + "__function": "transform" + } + }, + "zIndex": { + "className": "z", + "values": "zIndex", + "group": "Visibility" + }, + "boxSizing": { + "className": "bx-s", + "group": "System" + }, + "objectPosition": { + "className": "obj-p", + "group": "Layout" + }, + "objectFit": { + "className": "obj-f", + "group": "Layout" + }, + "overscrollBehavior": { + "className": "ovs-b", + "group": "Scroll" + }, + "overscrollBehaviorX": { + "className": "ovs-bx", + "group": "Scroll" + }, + "overscrollBehaviorY": { + "className": "ovs-by", + "group": "Scroll" + }, + "position": { + "className": "pos", + "shorthand": "pos", + "group": "Position" + }, + "top": { + "className": "top", + "values": "spacing", + "group": "Position" + }, + "left": { + "className": "left", + "values": "spacing", + "group": "Position" + }, + "inset": { + "className": "inset", + "group": "Position", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + } + }, + "insetInline": { + "className": "inset-x", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetX" + ] + }, + "insetBlock": { + "className": "inset-y", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetY" + ] + }, + "insetBlockEnd": { + "className": "inset-be", + "values": "spacing", + "group": "Position" + }, + "insetBlockStart": { + "className": "inset-bs", + "values": "spacing", + "group": "Position" + }, + "insetInlineEnd": { + "className": "inset-e", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetEnd", + "end" + ] + }, + "insetInlineStart": { + "className": "inset-s", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetStart", + "start" + ] + }, + "right": { + "className": "right", + "values": "spacing", + "group": "Position" + }, + "bottom": { + "className": "bottom", + "values": "spacing", + "group": "Position" + }, + "float": { + "className": "float", + "values": [ + "start", + "end" + ], + "property": "float", + "group": "Position", + "transform": { + "__function": "transform" + } + }, + "visibility": { + "className": "vis", + "group": "Visibility" + }, + "display": { + "className": "d", + "group": "Display" + }, + "hideFrom": { + "className": "hide", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "hideBelow": { + "className": "show", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "flexBasis": { + "className": "flex-b", + "group": "Flex Layout", + "values": { + "__function": "values", + "probe": { + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "full": "100%" + } + } + }, + "flex": { + "className": "flex", + "group": "Flex Layout", + "values": { + "1": "1 1 0%", + "auto": "1 1 auto", + "initial": "0 1 auto", + "none": "none" + } + }, + "flexDirection": { + "className": "flex-d", + "group": "Flex Layout", + "shorthand": "flexDir" + }, + "flexGrow": { + "className": "flex-g", + "group": "Flex Layout" + }, + "flexShrink": { + "className": "flex-sh", + "group": "Flex Layout" + }, + "gridTemplateColumns": { + "className": "grid-tc", + "group": "Grid Layout" + }, + "gridTemplateRows": { + "className": "grid-tr", + "group": "Grid Layout" + }, + "gridColumn": { + "className": "grid-c", + "group": "Grid Layout" + }, + "gridRow": { + "className": "grid-r", + "group": "Grid Layout" + }, + "gridColumnStart": { + "className": "grid-cs", + "group": "Grid Layout" + }, + "gridColumnEnd": { + "className": "grid-ce", + "group": "Grid Layout" + }, + "gridAutoFlow": { + "className": "grid-af", + "group": "Grid Layout" + }, + "gridAutoColumns": { + "className": "grid-ac", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gridAutoRows": { + "className": "grid-ar", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gap": { + "className": "gap", + "group": "Flex Layout", + "values": "spacing" + }, + "gridGap": { + "className": "grid-g", + "group": "Grid Layout", + "values": "spacing" + }, + "gridRowGap": { + "className": "grid-rg", + "group": "Grid Layout", + "values": "spacing" + }, + "gridColumnGap": { + "className": "grid-cg", + "group": "Grid Layout", + "values": "spacing" + }, + "rowGap": { + "className": "rg", + "group": "Grid Layout", + "values": "spacing" + }, + "columnGap": { + "className": "cg", + "group": "Grid Layout", + "values": "spacing" + }, + "justifyContent": { + "className": "jc", + "group": "Flex Layout" + }, + "alignContent": { + "className": "ac", + "group": "Flex Layout" + }, + "alignItems": { + "className": "ai", + "group": "Flex Layout" + }, + "alignSelf": { + "className": "as", + "group": "Flex Layout" + }, + "padding": { + "className": "p", + "shorthand": "p", + "values": "spacing", + "group": "Padding" + }, + "paddingLeft": { + "className": "pl", + "shorthand": "pl", + "values": "spacing", + "group": "Padding" + }, + "paddingRight": { + "className": "pr", + "shorthand": "pr", + "values": "spacing", + "group": "Padding" + }, + "paddingTop": { + "className": "pt", + "shorthand": "pt", + "values": "spacing", + "group": "Padding" + }, + "paddingBottom": { + "className": "pb", + "shorthand": "pb", + "values": "spacing", + "group": "Padding" + }, + "paddingBlock": { + "className": "py", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "py", + "paddingY" + ] + }, + "paddingBlockEnd": { + "className": "pbe", + "values": "spacing", + "group": "Padding" + }, + "paddingBlockStart": { + "className": "pbs", + "values": "spacing", + "group": "Padding" + }, + "paddingInline": { + "className": "px", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "paddingX", + "px" + ] + }, + "paddingInlineEnd": { + "className": "pe", + "shorthand": [ + "pe", + "paddingEnd" + ], + "values": "spacing", + "group": "Padding" + }, + "paddingInlineStart": { + "className": "ps", + "shorthand": [ + "ps", + "paddingStart" + ], + "values": "spacing", + "group": "Padding" + }, + "marginLeft": { + "className": "ml", + "shorthand": "ml", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginRight": { + "className": "mr", + "shorthand": "mr", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginTop": { + "className": "mt", + "shorthand": "mt", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBottom": { + "className": "mb", + "shorthand": "mb", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "margin": { + "className": "m", + "shorthand": "m", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlock": { + "className": "my", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "my", + "marginY" + ] + }, + "marginBlockEnd": { + "className": "mbe", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlockStart": { + "className": "mbs", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInline": { + "className": "mx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "mx", + "marginX" + ] + }, + "marginInlineEnd": { + "className": "me", + "shorthand": [ + "me", + "marginEnd" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInlineStart": { + "className": "ms", + "shorthand": [ + "ms", + "marginStart" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "spaceX": { + "className": "sx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginInlineStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "spaceY": { + "className": "sy", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginBlockStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "outlineWidth": { + "className": "ring-w", + "shorthand": "ringWidth", + "values": "borderWidths", + "group": "Border" + }, + "outlineColor": { + "className": "ring-c", + "values": "colors", + "group": "Color", + "shorthand": "ringColor", + "transform": { + "__function": "transform", + "colorMix": "outlineColor" + } + }, + "outline": { + "className": "ring", + "shorthand": "ring", + "values": "borders", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "outlineOffset": { + "className": "ring-o", + "shorthand": "ringOffset", + "values": "spacing", + "group": "Border" + }, + "focusRing": { + "className": "focus-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusVisibleRing": { + "className": "focus-v-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusRingColor": { + "className": "focus-ring-c", + "values": "colors", + "group": "Focus Ring", + "transform": { + "__function": "transform", + "colorMix": "--focus-ring-color-prop" + } + }, + "focusRingOffset": { + "className": "focus-ring-o", + "values": "spacing", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingWidth": { + "className": "focus-ring-w", + "values": "borderWidths", + "property": "outlineWidth", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingStyle": { + "className": "focus-ring-s", + "values": "borderStyles", + "property": "outlineStyle", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "divideX": { + "className": "dvd-x", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideY": { + "className": "dvd-y", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideColor": { + "className": "dvd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideStyle": { + "className": "dvd-s", + "property": "borderStyle", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "width": { + "shorthand": "w", + "className": "w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "inlineSize": { + "className": "w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minWidth": { + "shorthand": "minW", + "className": "min-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minInlineSize": { + "className": "min-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxWidth": { + "shorthand": "maxW", + "className": "max-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxInlineSize": { + "className": "max-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "height": { + "shorthand": "h", + "className": "h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "blockSize": { + "className": "h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minHeight": { + "shorthand": "minH", + "className": "min-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minBlockSize": { + "className": "min-h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxHeight": { + "shorthand": "maxH", + "className": "max-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxBlockSize": { + "className": "max-b", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "boxSize": { + "className": "size", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + }, + "transform": { + "__function": "transform" + } + }, + "color": { + "className": "c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "color" + } + }, + "fontFamily": { + "className": "ff", + "values": "fonts", + "group": "Typography" + }, + "fontSize": { + "className": "fs", + "values": "fontSizes", + "group": "Typography" + }, + "fontSizeAdjust": { + "className": "fs-a", + "group": "Typography" + }, + "fontPalette": { + "className": "fp", + "group": "Typography" + }, + "fontKerning": { + "className": "fk", + "group": "Typography" + }, + "fontFeatureSettings": { + "className": "ff-s", + "group": "Typography" + }, + "fontWeight": { + "className": "fw", + "values": "fontWeights", + "group": "Typography" + }, + "fontSmoothing": { + "className": "fsmt", + "group": "Typography", + "values": { + "antialiased": "antialiased", + "subpixel-antialiased": "auto" + }, + "transform": { + "__function": "transform" + } + }, + "fontVariant": { + "className": "fv", + "group": "Typography" + }, + "fontVariantAlternates": { + "className": "fv-alt", + "group": "Typography" + }, + "fontVariantCaps": { + "className": "fv-caps", + "group": "Typography" + }, + "fontVariationSettings": { + "className": "fv-s", + "group": "Typography" + }, + "fontVariantNumeric": { + "className": "fv-num", + "group": "Typography" + }, + "letterSpacing": { + "className": "ls", + "values": "letterSpacings", + "group": "Typography" + }, + "lineHeight": { + "className": "lh", + "values": "lineHeights", + "group": "Typography" + }, + "textAlign": { + "className": "ta", + "group": "Typography" + }, + "textDecoration": { + "className": "td", + "group": "Typography" + }, + "textDecorationColor": { + "className": "td-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textDecorationColor" + }, + "group": "Typography" + }, + "textEmphasisColor": { + "className": "te-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textEmphasisColor" + }, + "group": "Typography" + }, + "textDecorationStyle": { + "className": "td-s", + "group": "Typography" + }, + "textDecorationThickness": { + "className": "td-t", + "group": "Typography" + }, + "textUnderlineOffset": { + "className": "tu-o", + "group": "Typography" + }, + "textTransform": { + "className": "tt", + "group": "Typography" + }, + "textIndent": { + "className": "ti", + "group": "Typography", + "values": "spacing" + }, + "textShadow": { + "className": "tsh", + "values": "shadows", + "group": "Typography" + }, + "textShadowColor": { + "shorthand": "textShadowColor", + "className": "tsh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--text-shadow-color" + }, + "group": "Typography" + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "WebkitTextFillColor" + }, + "group": "Typography" + }, + "textOverflow": { + "className": "tov", + "group": "Typography" + }, + "verticalAlign": { + "className": "va", + "group": "Typography" + }, + "wordBreak": { + "className": "wb", + "group": "Typography" + }, + "textWrap": { + "className": "tw", + "values": [ + "wrap", + "balance", + "nowrap" + ], + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "truncate": { + "className": "trunc", + "values": { + "type": "boolean" + }, + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "lineClamp": { + "className": "lc", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "listStyleType": { + "className": "li-t", + "group": "List" + }, + "listStylePosition": { + "className": "li-pos", + "group": "List" + }, + "listStyleImage": { + "className": "li-img", + "group": "List", + "values": "assets" + }, + "listStyle": { + "className": "li-s", + "group": "List" + }, + "backgroundPosition": { + "shorthand": "bgPosition", + "className": "bg-p", + "group": "Background" + }, + "backgroundPositionX": { + "shorthand": "bgPositionX", + "className": "bg-p-x", + "group": "Background" + }, + "backgroundPositionY": { + "shorthand": "bgPositionY", + "className": "bg-p-y", + "group": "Background" + }, + "backgroundAttachment": { + "shorthand": "bgAttachment", + "className": "bg-a", + "group": "Background" + }, + "backgroundClip": { + "shorthand": "bgClip", + "className": "bg-cp", + "group": "Background", + "transform": { + "__function": "transform" + } + }, + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "background" + } + }, + "backgroundColor": { + "shorthand": "bgColor", + "className": "bg-c", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "backgroundColor" + } + }, + "backgroundOrigin": { + "shorthand": "bgOrigin", + "className": "bg-o", + "group": "Background" + }, + "backgroundImage": { + "shorthand": "bgImage", + "className": "bg-i", + "values": "assets", + "group": "Background" + }, + "backgroundRepeat": { + "shorthand": "bgRepeat", + "className": "bg-r", + "group": "Background" + }, + "backgroundBlendMode": { + "shorthand": "bgBlendMode", + "className": "bg-bm", + "group": "Background" + }, + "backgroundSize": { + "shorthand": "bgSize", + "className": "bg-s", + "group": "Background" + }, + "backgroundGradient": { + "shorthand": "bgGradient", + "className": "bg-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundLinear": { + "shorthand": "bgLinear", + "className": "bg-linear", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundRadial": { + "shorthand": "bgRadial", + "className": "bg-radial", + "group": "Background Gradient", + "values": "gradients", + "transform": { + "__function": "transform" + } + }, + "backgroundConic": { + "shorthand": "bgConic", + "className": "bg-conic", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "textGradient": { + "className": "txt-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "gradientFromPosition": { + "className": "grad-from-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientToPosition": { + "className": "grad-to-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientFrom": { + "className": "grad-from", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-from" + } + }, + "gradientTo": { + "className": "grad-to", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-to" + } + }, + "gradientVia": { + "className": "grad-via", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientViaPosition": { + "className": "grad-via-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "borderRadius": { + "className": "bdr", + "shorthand": "rounded", + "values": "radii", + "group": "Border Radius" + }, + "borderTopLeftRadius": { + "className": "bdr-tl", + "shorthand": "roundedTopLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRightRadius": { + "className": "bdr-tr", + "shorthand": "roundedTopRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomRightRadius": { + "className": "bdr-br", + "shorthand": "roundedBottomRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomLeftRadius": { + "className": "bdr-bl", + "shorthand": "roundedBottomLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRadius": { + "className": "bdr-t", + "shorthand": "roundedTop", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderRightRadius": { + "className": "bdr-r", + "shorthand": "roundedRight", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderBottomRadius": { + "className": "bdr-b", + "shorthand": "roundedBottom", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderLeftRadius": { + "className": "bdr-l", + "shorthand": "roundedLeft", + "values": "radii", + "property": "borderRadius", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderStartStartRadius": { + "className": "bdr-ss", + "shorthand": "roundedStartStart", + "values": "radii", + "group": "Border Radius" + }, + "borderStartEndRadius": { + "className": "bdr-se", + "shorthand": "roundedStartEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderStartRadius": { + "className": "bdr-s", + "values": "radii", + "property": "borderRadius", + "shorthand": "roundedStart", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderEndStartRadius": { + "className": "bdr-es", + "shorthand": "roundedEndStart", + "values": "radii", + "group": "Border Radius" + }, + "borderEndEndRadius": { + "className": "bdr-ee", + "shorthand": "roundedEndEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderEndRadius": { + "className": "bdr-e", + "shorthand": "roundedEnd", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "border": { + "className": "bd", + "values": "borders", + "group": "Border" + }, + "borderWidth": { + "className": "bd-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderTopWidth": { + "className": "bd-t-w", + "values": "borderWidths", + "group": "Border" + }, + "borderLeftWidth": { + "className": "bd-l-w", + "values": "borderWidths", + "group": "Border" + }, + "borderRightWidth": { + "className": "bd-r-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBottomWidth": { + "className": "bd-b-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBlockStartWidth": { + "className": "bd-bs-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderBlockEndWidth": { + "className": "bd-be-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderColor": { + "className": "bd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderColor" + } + }, + "borderInline": { + "className": "bd-x", + "values": "borders", + "group": "Border", + "shorthand": "borderX" + }, + "borderInlineWidth": { + "className": "bd-x-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderXWidth" + }, + "borderInlineColor": { + "className": "bd-x-c", + "values": "colors", + "group": "Border", + "shorthand": "borderXColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineColor" + } + }, + "borderBlock": { + "className": "bd-y", + "values": "borders", + "group": "Border", + "shorthand": "borderY" + }, + "borderBlockWidth": { + "className": "bd-y-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderYWidth" + }, + "borderBlockColor": { + "className": "bd-y-c", + "values": "colors", + "group": "Border", + "shorthand": "borderYColor", + "transform": { + "__function": "transform", + "colorMix": "borderBlockColor" + } + }, + "borderLeft": { + "className": "bd-l", + "values": "borders", + "group": "Border" + }, + "borderLeftColor": { + "className": "bd-l-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderLeftColor" + } + }, + "borderInlineStart": { + "className": "bd-s", + "values": "borders", + "group": "Border", + "shorthand": "borderStart" + }, + "borderInlineStartWidth": { + "className": "bd-s-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderStartWidth" + }, + "borderInlineStartColor": { + "className": "bd-s-c", + "values": "colors", + "group": "Border", + "shorthand": "borderStartColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineStartColor" + } + }, + "borderRight": { + "className": "bd-r", + "values": "borders", + "group": "Border" + }, + "borderRightColor": { + "className": "bd-r-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderRightColor" + } + }, + "borderInlineEnd": { + "className": "bd-e", + "values": "borders", + "group": "Border", + "shorthand": "borderEnd" + }, + "borderInlineEndWidth": { + "className": "bd-e-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderEndWidth" + }, + "borderInlineEndColor": { + "className": "bd-e-c", + "values": "colors", + "group": "Border", + "shorthand": "borderEndColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineEndColor" + } + }, + "borderTop": { + "className": "bd-t", + "values": "borders", + "group": "Border" + }, + "borderTopColor": { + "className": "bd-t-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderTopColor" + } + }, + "borderBottom": { + "className": "bd-b", + "values": "borders", + "group": "Border" + }, + "borderBottomColor": { + "className": "bd-b-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBottomColor" + } + }, + "borderBlockEnd": { + "className": "bd-be", + "values": "borders", + "group": "Border" + }, + "borderBlockEndColor": { + "className": "bd-be-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockEndColor" + } + }, + "borderBlockStart": { + "className": "bd-bs", + "values": "borders", + "group": "Border" + }, + "borderBlockStartColor": { + "className": "bd-bs-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockStartColor" + } + }, + "opacity": { + "className": "op", + "values": "opacity", + "group": "Background" + }, + "boxShadow": { + "shorthand": "shadow", + "className": "bx-sh", + "values": "shadows", + "group": "Shadow" + }, + "boxShadowColor": { + "shorthand": "shadowColor", + "className": "bx-sh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--shadow-color" + }, + "group": "Color" + }, + "mixBlendMode": { + "className": "mix-bm", + "group": "Effect" + }, + "filter": { + "className": "filter", + "group": "Effect", + "values": { + "auto": "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )" + } + }, + "brightness": { + "className": "brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "contrast": { + "className": "contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "grayscale": { + "className": "grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "hueRotate": { + "className": "hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "invert": { + "className": "invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "saturate": { + "className": "saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "sepia": { + "className": "sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "dropShadow": { + "className": "drop-shadow", + "group": "Effect", + "values": "dropShadows", + "transform": { + "__function": "transform" + } + }, + "blur": { + "className": "blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropFilter": { + "className": "bkdp", + "group": "Effect", + "values": { + "auto": "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )" + }, + "transform": { + "__function": "transform" + } + }, + "backdropBlur": { + "className": "bkdp-blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropBrightness": { + "className": "bkdp-brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropContrast": { + "className": "bkdp-contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropGrayscale": { + "className": "bkdp-grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropHueRotate": { + "className": "bkdp-hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropInvert": { + "className": "bkdp-invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropOpacity": { + "className": "bkdp-opacity", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSaturate": { + "className": "bkdp-saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSepia": { + "className": "bkdp-sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "borderCollapse": { + "className": "bd-cl", + "group": "Table" + }, + "borderSpacing": { + "className": "bd-sp", + "group": "Table", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "auto": "var(--border-spacing-x) var(--border-spacing-y)" + } + } + }, + "borderSpacingX": { + "className": "bd-sx", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "borderSpacingY": { + "className": "bd-sy", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "tableLayout": { + "className": "tbl", + "group": "Table" + }, + "transitionTimingFunction": { + "className": "trs-tmf", + "values": "easings", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionDelay": { + "className": "trs-dly", + "values": "durations", + "group": "Transition" + }, + "transitionDuration": { + "className": "trs-dur", + "values": "durations", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionProperty": { + "className": "trs-prop", + "group": "Transition", + "values": { + "common": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", + "colors": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke", + "size": "width, height, min-width, max-width, min-height, max-height", + "position": "left, right, top, bottom, inset, inset-inline, inset-block", + "background": "background, background-color, background-image, background-position" + }, + "transform": { + "__function": "transform" + } + }, + "transition": { + "className": "trs", + "values": [ + "all", + "common", + "size", + "position", + "background", + "colors", + "opacity", + "shadow", + "transform" + ], + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "animation": { + "className": "anim", + "values": "animations", + "group": "Animation" + }, + "animationName": { + "className": "anim-n", + "values": "keyframes", + "group": "Animation" + }, + "animationTimingFunction": { + "className": "anim-tmf", + "values": "easings", + "group": "Animation" + }, + "animationDuration": { + "className": "anim-dur", + "values": "durations", + "group": "Animation" + }, + "animationDelay": { + "className": "anim-dly", + "values": "durations", + "group": "Animation" + }, + "animationPlayState": { + "className": "anim-ps", + "group": "Animation" + }, + "animationComposition": { + "className": "anim-comp", + "group": "Animation" + }, + "animationFillMode": { + "className": "anim-fm", + "group": "Animation" + }, + "animationDirection": { + "className": "anim-dir", + "group": "Animation" + }, + "animationIterationCount": { + "className": "anim-ic", + "group": "Animation" + }, + "animationRange": { + "className": "anim-r", + "group": "Animation" + }, + "animationState": { + "className": "anim-s", + "group": "Animation" + }, + "animationRangeStart": { + "className": "anim-rs", + "group": "Animation" + }, + "animationRangeEnd": { + "className": "anim-re", + "group": "Animation" + }, + "animationTimeline": { + "className": "anim-tl", + "group": "Animation" + }, + "transformOrigin": { + "className": "trf-o", + "group": "Transform" + }, + "transformBox": { + "className": "trf-b", + "group": "Transform" + }, + "transformStyle": { + "className": "trf-s", + "group": "Transform" + }, + "transform": { + "className": "trf", + "group": "Transform" + }, + "rotate": { + "className": "rotate", + "group": "Transform", + "property": "rotate", + "values": { + "auto": "var(--rotate-x) var(--rotate-y)", + "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)" + } + }, + "rotateX": { + "className": "rotate-x", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateY": { + "className": "rotate-y", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateZ": { + "className": "rotate-z", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "scale": { + "className": "scale", + "group": "Transform", + "property": "scale", + "values": { + "auto": "var(--scale-x) var(--scale-y)" + } + }, + "scaleX": { + "className": "scale-x", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "scaleY": { + "className": "scale-y", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "translate": { + "className": "translate", + "group": "Transform", + "property": "translate", + "values": { + "auto": "var(--translate-x) var(--translate-y)", + "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)" + } + }, + "translateX": { + "shorthand": "x", + "className": "translate-x", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateY": { + "shorthand": "y", + "className": "translate-y", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateZ": { + "shorthand": "z", + "className": "translate-z", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "accentColor": { + "className": "ac-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "accentColor" + }, + "group": "Color" + }, + "caretColor": { + "className": "ca-c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "caretColor" + } + }, + "scrollBehavior": { + "className": "scr-bhv", + "group": "Scroll" + }, + "scrollbar": { + "className": "scr-bar", + "values": [ + "visible", + "hidden" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollbarColor": { + "className": "scr-bar-c", + "values": "colors", + "group": "Scroll", + "transform": { + "__function": "transform", + "colorMix": "scrollbarColor" + } + }, + "scrollbarGutter": { + "className": "scr-bar-g", + "group": "Scroll" + }, + "scrollbarWidth": { + "className": "scr-bar-w", + "values": "sizes", + "group": "Scroll" + }, + "scrollMargin": { + "className": "scr-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginLeft": { + "className": "scr-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginRight": { + "className": "scr-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginTop": { + "className": "scr-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBottom": { + "className": "scr-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlock": { + "className": "scr-my", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginY" + ] + }, + "scrollMarginBlockEnd": { + "className": "scr-mbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlockStart": { + "className": "scr-mbt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInline": { + "className": "scr-mx", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginX" + ] + }, + "scrollMarginInlineEnd": { + "className": "scr-me", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInlineStart": { + "className": "scr-ms", + "values": "spacing", + "group": "Scroll" + }, + "scrollPadding": { + "className": "scr-p", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlock": { + "className": "scr-py", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingY" + ] + }, + "scrollPaddingBlockStart": { + "className": "scr-pbs", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlockEnd": { + "className": "scr-pbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInline": { + "className": "scr-px", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingX" + ] + }, + "scrollPaddingInlineEnd": { + "className": "scr-pe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInlineStart": { + "className": "scr-ps", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingLeft": { + "className": "scr-pl", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingRight": { + "className": "scr-pr", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingTop": { + "className": "scr-pt", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBottom": { + "className": "scr-pb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapAlign": { + "className": "scr-sa", + "group": "Scroll" + }, + "scrollSnapStop": { + "className": "scrs-s", + "group": "Scroll" + }, + "scrollSnapType": { + "className": "scrs-t", + "group": "Scroll", + "values": { + "none": "none", + "x": "x var(--scroll-snap-strictness)", + "y": "y var(--scroll-snap-strictness)", + "both": "both var(--scroll-snap-strictness)" + } + }, + "scrollSnapStrictness": { + "className": "scrs-strt", + "values": [ + "mandatory", + "proximity" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollSnapMargin": { + "className": "scrs-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginTop": { + "className": "scrs-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginBottom": { + "className": "scrs-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginLeft": { + "className": "scrs-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginRight": { + "className": "scrs-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapCoordinate": { + "className": "scrs-c", + "group": "Scroll" + }, + "scrollSnapDestination": { + "className": "scrs-d", + "group": "Scroll" + }, + "scrollSnapPointsX": { + "className": "scrs-px", + "group": "Scroll" + }, + "scrollSnapPointsY": { + "className": "scrs-py", + "group": "Scroll" + }, + "scrollSnapTypeX": { + "className": "scrs-tx", + "group": "Scroll" + }, + "scrollSnapTypeY": { + "className": "scrs-ty", + "group": "Scroll" + }, + "scrollTimeline": { + "className": "scrtl", + "group": "Scroll" + }, + "scrollTimelineAxis": { + "className": "scrtl-a", + "group": "Scroll" + }, + "scrollTimelineName": { + "className": "scrtl-n", + "group": "Scroll" + }, + "touchAction": { + "className": "tch-a", + "group": "Interactivity" + }, + "userSelect": { + "className": "us", + "group": "Interactivity", + "transform": { + "__function": "transform" + } + }, + "overflow": { + "className": "ov", + "group": "Scroll" + }, + "overflowWrap": { + "className": "ov-wrap", + "group": "Scroll" + }, + "overflowX": { + "className": "ov-x", + "group": "Scroll" + }, + "overflowY": { + "className": "ov-y", + "group": "Scroll" + }, + "overflowAnchor": { + "className": "ov-a", + "group": "Scroll" + }, + "overflowBlock": { + "className": "ov-b", + "group": "Scroll" + }, + "overflowInline": { + "className": "ov-i", + "group": "Scroll" + }, + "overflowClipBox": { + "className": "ovcp-bx", + "group": "Scroll" + }, + "overflowClipMargin": { + "className": "ovcp-m", + "group": "Scroll" + }, + "overscrollBehaviorBlock": { + "className": "ovs-bb", + "group": "Scroll" + }, + "overscrollBehaviorInline": { + "className": "ovs-bi", + "group": "Scroll" + }, + "fill": { + "className": "fill", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "fill" + } + }, + "stroke": { + "className": "stk", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "stroke" + } + }, + "strokeWidth": { + "className": "stk-w", + "values": "borderWidths", + "group": "Border" + }, + "strokeDasharray": { + "className": "stk-dsh", + "group": "Border" + }, + "strokeDashoffset": { + "className": "stk-do", + "group": "Border" + }, + "strokeLinecap": { + "className": "stk-lc", + "group": "Border" + }, + "strokeLinejoin": { + "className": "stk-lj", + "group": "Border" + }, + "strokeMiterlimit": { + "className": "stk-ml", + "group": "Border" + }, + "strokeOpacity": { + "className": "stk-op", + "group": "Border" + }, + "srOnly": { + "className": "sr", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "debug": { + "className": "debug", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "appearance": { + "className": "ap", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "backfaceVisibility": { + "className": "bfv", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "clipPath": { + "className": "cp-path", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "hyphens": { + "className": "hy", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "mask": { + "className": "msk", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskImage": { + "className": "msk-i", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskSize": { + "className": "msk-s", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "textSizeAdjust": { + "className": "txt-adj", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "container": { + "className": "cq", + "group": "Container" + }, + "containerName": { + "className": "cq-n", + "property": "containerName", + "values": "containerNames", + "group": "Container" + }, + "containerType": { + "className": "cq-t", + "group": "Container" + }, + "cursor": { + "className": "cursor", + "values": "cursor", + "group": "System" + } + }, + "outdir": "styled-system-strict", + "strictTokens": true, + "strictPropertyValues": true, + "validation": "warn" +} diff --git a/src/Css/tests/Fixtures/Panda/configs/fixture.json b/src/Css/tests/Fixtures/Panda/configs/fixture.json new file mode 100644 index 00000000000..e544f2484a8 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/configs/fixture.json @@ -0,0 +1,4712 @@ +{ + "cssVarRoot": ":where(html)", + "jsxFactory": "styled", + "jsxStyleProps": "all", + "outExtension": "mjs", + "shorthands": true, + "syntax": "object-literal", + "outdir": "styled-system", + "conditions": { + "hover": "&:is(:hover, [data-hover])", + "focus": "&:is(:focus, [data-focus])", + "focusWithin": "&:focus-within", + "focusVisible": "&:is(:focus-visible, [data-focus-visible])", + "disabled": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])", + "active": "&:is(:active, [data-active])", + "visited": "&:visited", + "target": "&:target", + "readOnly": "&:is(:read-only, [data-read-only], [aria-readonly=true])", + "readWrite": "&:read-write", + "empty": "&:is(:empty, [data-empty])", + "checked": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])", + "enabled": "&:enabled", + "expanded": "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])", + "highlighted": "&[data-highlighted]", + "complete": "&[data-complete]", + "incomplete": "&[data-incomplete]", + "dragging": "&[data-dragging]", + "before": "&::before", + "after": "&::after", + "firstLetter": "&::first-letter", + "firstLine": "&::first-line", + "marker": "&::marker, &::-webkit-details-marker", + "selection": "&::selection", + "file": "&::file-selector-button", + "backdrop": "&::backdrop", + "first": "&:first-child", + "last": "&:last-child", + "only": "&:only-child", + "even": "&:nth-child(even)", + "odd": "&:nth-child(odd)", + "firstOfType": "&:first-of-type", + "lastOfType": "&:last-of-type", + "onlyOfType": "&:only-of-type", + "peerFocus": ".peer:is(:focus, [data-focus]) ~ &", + "peerHover": ".peer:is(:hover, [data-hover]) ~ &", + "peerActive": ".peer:is(:active, [data-active]) ~ &", + "peerFocusWithin": ".peer:focus-within ~ &", + "peerFocusVisible": ".peer:is(:focus-visible, [data-focus-visible]) ~ &", + "peerDisabled": ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &", + "peerChecked": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &", + "peerInvalid": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &", + "peerExpanded": ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &", + "peerPlaceholderShown": ".peer:placeholder-shown ~ &", + "groupFocus": ".group:is(:focus, [data-focus]) &", + "groupHover": ".group:is(:hover, [data-hover]) &", + "groupActive": ".group:is(:active, [data-active]) &", + "groupFocusWithin": ".group:focus-within &", + "groupFocusVisible": ".group:is(:focus-visible, [data-focus-visible]) &", + "groupDisabled": ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &", + "groupChecked": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &", + "groupExpanded": ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &", + "groupInvalid": ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &", + "indeterminate": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])", + "required": "&:is(:required, [data-required], [aria-required=true])", + "valid": "&:is(:valid, [data-valid])", + "invalid": "&:is(:invalid, [data-invalid], [aria-invalid=true])", + "autofill": "&:autofill", + "inRange": "&:is(:in-range, [data-in-range])", + "outOfRange": "&:is(:out-of-range, [data-outside-range])", + "placeholder": "&::placeholder, &[data-placeholder]", + "placeholderShown": "&:is(:placeholder-shown, [data-placeholder-shown])", + "pressed": "&:is([aria-pressed=true], [data-pressed])", + "selected": "&:is([aria-selected=true], [data-selected])", + "grabbed": "&:is([aria-grabbed=true], [data-grabbed])", + "underValue": "&[data-state=under-value]", + "overValue": "&[data-state=over-value]", + "atValue": "&[data-state=at-value]", + "default": "&:default", + "optional": "&:optional", + "open": "&:is([open], [data-open], [data-state=\"open\"], :popover-open)", + "closed": "&:is([closed], [data-closed], [data-state=\"closed\"])", + "fullscreen": "&:is(:fullscreen, [data-fullscreen])", + "loading": "&:is([data-loading], [aria-busy=true])", + "hidden": "&:is([hidden], [data-hidden])", + "current": "&:is([aria-current=true], [data-current])", + "currentPage": "&[aria-current=page]", + "currentStep": "&[aria-current=step]", + "today": "&[data-today]", + "unavailable": "&[data-unavailable]", + "rangeStart": "&[data-range-start]", + "rangeEnd": "&[data-range-end]", + "now": "&[data-now]", + "topmost": "&[data-topmost]", + "motionReduce": "@media (prefers-reduced-motion: reduce)", + "motionSafe": "@media (prefers-reduced-motion: no-preference)", + "print": "@media print", + "landscape": "@media (orientation: landscape)", + "portrait": "@media (orientation: portrait)", + "dark": "[data-theme=dark] &, .dark &, &.dark, &[data-theme=dark]", + "light": "[data-theme=light] &, .light &, &.light, &[data-theme=light]", + "osDark": "@media (prefers-color-scheme: dark)", + "osLight": "@media (prefers-color-scheme: light)", + "highContrast": "@media (forced-colors: active)", + "lessContrast": "@media (prefers-contrast: less)", + "moreContrast": "@media (prefers-contrast: more)", + "ltr": ":where([dir=ltr], :dir(ltr)) &", + "rtl": ":where([dir=rtl], :dir(rtl)) &", + "scrollbar": "&::-webkit-scrollbar", + "scrollbarThumb": "&::-webkit-scrollbar-thumb", + "scrollbarTrack": "&::-webkit-scrollbar-track", + "horizontal": "&[data-orientation=horizontal]", + "vertical": "&[data-orientation=vertical]", + "icon": "& :where(svg)", + "starting": "@starting-style", + "noscript": "@media (scripting: none)", + "invertedColors": "@media (inverted-colors: inverted)", + "materialTheme": "[data-color=material] &", + "pastelTheme": "[data-color=pastel] &" + }, + "theme": { + "keyframes": { + "spin": { + "to": { + "transform": "rotate(360deg)" + } + }, + "ping": { + "75%, 100%": { + "transform": "scale(2)", + "opacity": "0" + } + }, + "pulse": { + "50%": { + "opacity": ".5" + } + }, + "bounce": { + "0%, 100%": { + "transform": "translateY(-25%)", + "animationTimingFunction": "cubic-bezier(0.8,0,1,1)" + }, + "50%": { + "transform": "none", + "animationTimingFunction": "cubic-bezier(0,0,0.2,1)" + } + } + }, + "breakpoints": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + }, + "tokens": { + "aspectRatios": { + "square": { + "value": "1 / 1" + }, + "landscape": { + "value": "4 / 3" + }, + "portrait": { + "value": "3 / 4" + }, + "wide": { + "value": "16 / 9" + }, + "ultrawide": { + "value": "18 / 5" + }, + "golden": { + "value": "1.618 / 1" + } + }, + "borders": { + "none": { + "value": "none" + } + }, + "easings": { + "default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + }, + "linear": { + "value": "linear" + }, + "in": { + "value": "cubic-bezier(0.4, 0, 1, 1)" + }, + "out": { + "value": "cubic-bezier(0, 0, 0.2, 1)" + }, + "in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)" + } + }, + "durations": { + "fastest": { + "value": "50ms" + }, + "faster": { + "value": "100ms" + }, + "fast": { + "value": "150ms" + }, + "normal": { + "value": "200ms" + }, + "slow": { + "value": "300ms" + }, + "slower": { + "value": "400ms" + }, + "slowest": { + "value": "500ms" + } + }, + "radii": { + "xs": { + "value": "0.125rem" + }, + "sm": { + "value": "0.25rem" + }, + "md": { + "value": "0.375rem" + }, + "lg": { + "value": "0.5rem" + }, + "xl": { + "value": "0.75rem" + }, + "2xl": { + "value": "1rem" + }, + "3xl": { + "value": "1.5rem" + }, + "4xl": { + "value": "2rem" + }, + "full": { + "value": "9999px" + } + }, + "fontWeights": { + "thin": { + "value": "100" + }, + "extralight": { + "value": "200" + }, + "light": { + "value": "300" + }, + "normal": { + "value": "400" + }, + "medium": { + "value": "500" + }, + "semibold": { + "value": "600" + }, + "bold": { + "value": "700" + }, + "extrabold": { + "value": "800" + }, + "black": { + "value": "900" + } + }, + "lineHeights": { + "none": { + "value": "1" + }, + "tight": { + "value": "1.25" + }, + "snug": { + "value": "1.375" + }, + "normal": { + "value": "1.5" + }, + "relaxed": { + "value": "1.625" + }, + "loose": { + "value": "2" + } + }, + "fonts": { + "sans": { + "value": [ + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "\"Segoe UI\"", + "Roboto", + "\"Helvetica Neue\"", + "Arial", + "\"Noto Sans\"", + "sans-serif", + "\"Apple Color Emoji\"", + "\"Segoe UI Emoji\"", + "\"Segoe UI Symbol\"", + "\"Noto Color Emoji\"" + ] + }, + "serif": { + "value": [ + "ui-serif", + "Georgia", + "Cambria", + "\"Times New Roman\"", + "Times", + "serif" + ] + }, + "mono": { + "value": [ + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "\"Liberation Mono\"", + "\"Courier New\"", + "monospace" + ] + } + }, + "letterSpacings": { + "tighter": { + "value": "-0.05em" + }, + "tight": { + "value": "-0.025em" + }, + "normal": { + "value": "0em" + }, + "wide": { + "value": "0.025em" + }, + "wider": { + "value": "0.05em" + }, + "widest": { + "value": "0.1em" + } + }, + "fontSizes": { + "2xs": { + "value": "0.5rem" + }, + "xs": { + "value": "0.75rem" + }, + "sm": { + "value": "0.875rem" + }, + "md": { + "value": "1rem" + }, + "lg": { + "value": "1.125rem" + }, + "xl": { + "value": "1.25rem" + }, + "2xl": { + "value": "1.5rem" + }, + "3xl": { + "value": "1.875rem" + }, + "4xl": { + "value": "2.25rem" + }, + "5xl": { + "value": "3rem" + }, + "6xl": { + "value": "3.75rem" + }, + "7xl": { + "value": "4.5rem" + }, + "8xl": { + "value": "6rem" + }, + "9xl": { + "value": "8rem" + } + }, + "shadows": { + "2xs": { + "value": "0 1px rgb(0 0 0 / 0.05)" + }, + "xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" + }, + "sm": { + "value": [ + "0 1px 3px 0 rgb(0 0 0 / 0.1)", + "0 1px 2px -1px rgb(0 0 0 / 0.1)" + ] + }, + "md": { + "value": [ + "0 4px 6px -1px rgb(0 0 0 / 0.1)", + "0 2px 4px -2px rgb(0 0 0 / 0.1)" + ] + }, + "lg": { + "value": [ + "0 10px 15px -3px rgb(0 0 0 / 0.1)", + "0 4px 6px -4px rgb(0 0 0 / 0.1)" + ] + }, + "xl": { + "value": [ + "0 20px 25px -5px rgb(0 0 0 / 0.1)", + "0 8px 10px -6px rgb(0 0 0 / 0.1)" + ] + }, + "2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)" + }, + "inset-2xs": { + "value": "inset 0 1px rgb(0 0 0 / 0.05)" + }, + "inset-xs": { + "value": "inset 0 1px 1px rgb(0 0 0 / 0.05)" + }, + "inset-sm": { + "value": "inset 0 2px 4px rgb(0 0 0 / 0.05)" + } + }, + "colors": { + "current": { + "value": "currentColor" + }, + "black": { + "value": "#000" + }, + "white": { + "value": "#fff" + }, + "transparent": { + "value": "rgb(0 0 0 / 0)" + }, + "rose": { + "50": { + "value": "#fff1f2" + }, + "100": { + "value": "#ffe4e6" + }, + "200": { + "value": "#fecdd3" + }, + "300": { + "value": "#fda4af" + }, + "400": { + "value": "#fb7185" + }, + "500": { + "value": "#f43f5e" + }, + "600": { + "value": "#e11d48" + }, + "700": { + "value": "#be123c" + }, + "800": { + "value": "#9f1239" + }, + "900": { + "value": "#881337" + }, + "950": { + "value": "#4c0519" + } + }, + "pink": { + "50": { + "value": "#fdf2f8" + }, + "100": { + "value": "#fce7f3" + }, + "200": { + "value": "#fbcfe8" + }, + "300": { + "value": "#f9a8d4" + }, + "400": { + "value": "#f472b6" + }, + "500": { + "value": "#ec4899" + }, + "600": { + "value": "#db2777" + }, + "700": { + "value": "#be185d" + }, + "800": { + "value": "#9d174d" + }, + "900": { + "value": "#831843" + }, + "950": { + "value": "#500724" + } + }, + "fuchsia": { + "50": { + "value": "#fdf4ff" + }, + "100": { + "value": "#fae8ff" + }, + "200": { + "value": "#f5d0fe" + }, + "300": { + "value": "#f0abfc" + }, + "400": { + "value": "#e879f9" + }, + "500": { + "value": "#d946ef" + }, + "600": { + "value": "#c026d3" + }, + "700": { + "value": "#a21caf" + }, + "800": { + "value": "#86198f" + }, + "900": { + "value": "#701a75" + }, + "950": { + "value": "#4a044e" + } + }, + "purple": { + "50": { + "value": "#faf5ff" + }, + "100": { + "value": "#f3e8ff" + }, + "200": { + "value": "#e9d5ff" + }, + "300": { + "value": "#d8b4fe" + }, + "400": { + "value": "#c084fc" + }, + "500": { + "value": "#a855f7" + }, + "600": { + "value": "#9333ea" + }, + "700": { + "value": "#7e22ce" + }, + "800": { + "value": "#6b21a8" + }, + "900": { + "value": "#581c87" + }, + "950": { + "value": "#3b0764" + } + }, + "violet": { + "50": { + "value": "#f5f3ff" + }, + "100": { + "value": "#ede9fe" + }, + "200": { + "value": "#ddd6fe" + }, + "300": { + "value": "#c4b5fd" + }, + "400": { + "value": "#a78bfa" + }, + "500": { + "value": "#8b5cf6" + }, + "600": { + "value": "#7c3aed" + }, + "700": { + "value": "#6d28d9" + }, + "800": { + "value": "#5b21b6" + }, + "900": { + "value": "#4c1d95" + }, + "950": { + "value": "#2e1065" + } + }, + "indigo": { + "50": { + "value": "#eef2ff" + }, + "100": { + "value": "#e0e7ff" + }, + "200": { + "value": "#c7d2fe" + }, + "300": { + "value": "#a5b4fc" + }, + "400": { + "value": "#818cf8" + }, + "500": { + "value": "#6366f1" + }, + "600": { + "value": "#4f46e5" + }, + "700": { + "value": "#4338ca" + }, + "800": { + "value": "#3730a3" + }, + "900": { + "value": "#312e81" + }, + "950": { + "value": "#1e1b4b" + } + }, + "blue": { + "50": { + "value": "#eff6ff" + }, + "100": { + "value": "#dbeafe" + }, + "200": { + "value": "#bfdbfe" + }, + "300": { + "value": "#93c5fd" + }, + "400": { + "value": "#60a5fa" + }, + "500": { + "value": "#3b82f6" + }, + "600": { + "value": "#2563eb" + }, + "700": { + "value": "#1d4ed8" + }, + "800": { + "value": "#1e40af" + }, + "900": { + "value": "#1e3a8a" + }, + "950": { + "value": "#172554" + } + }, + "sky": { + "50": { + "value": "#f0f9ff" + }, + "100": { + "value": "#e0f2fe" + }, + "200": { + "value": "#bae6fd" + }, + "300": { + "value": "#7dd3fc" + }, + "400": { + "value": "#38bdf8" + }, + "500": { + "value": "#0ea5e9" + }, + "600": { + "value": "#0284c7" + }, + "700": { + "value": "#0369a1" + }, + "800": { + "value": "#075985" + }, + "900": { + "value": "#0c4a6e" + }, + "950": { + "value": "#082f49" + } + }, + "cyan": { + "50": { + "value": "#ecfeff" + }, + "100": { + "value": "#cffafe" + }, + "200": { + "value": "#a5f3fc" + }, + "300": { + "value": "#67e8f9" + }, + "400": { + "value": "#22d3ee" + }, + "500": { + "value": "#06b6d4" + }, + "600": { + "value": "#0891b2" + }, + "700": { + "value": "#0e7490" + }, + "800": { + "value": "#155e75" + }, + "900": { + "value": "#164e63" + }, + "950": { + "value": "#083344" + } + }, + "teal": { + "50": { + "value": "#f0fdfa" + }, + "100": { + "value": "#ccfbf1" + }, + "200": { + "value": "#99f6e4" + }, + "300": { + "value": "#5eead4" + }, + "400": { + "value": "#2dd4bf" + }, + "500": { + "value": "#14b8a6" + }, + "600": { + "value": "#0d9488" + }, + "700": { + "value": "#0f766e" + }, + "800": { + "value": "#115e59" + }, + "900": { + "value": "#134e4a" + }, + "950": { + "value": "#042f2e" + } + }, + "emerald": { + "50": { + "value": "#ecfdf5" + }, + "100": { + "value": "#d1fae5" + }, + "200": { + "value": "#a7f3d0" + }, + "300": { + "value": "#6ee7b7" + }, + "400": { + "value": "#34d399" + }, + "500": { + "value": "#10b981" + }, + "600": { + "value": "#059669" + }, + "700": { + "value": "#047857" + }, + "800": { + "value": "#065f46" + }, + "900": { + "value": "#064e3b" + }, + "950": { + "value": "#022c22" + } + }, + "green": { + "50": { + "value": "#f0fdf4" + }, + "100": { + "value": "#dcfce7" + }, + "200": { + "value": "#bbf7d0" + }, + "300": { + "value": "#86efac" + }, + "400": { + "value": "#4ade80" + }, + "500": { + "value": "#22c55e" + }, + "600": { + "value": "#16a34a" + }, + "700": { + "value": "#15803d" + }, + "800": { + "value": "#166534" + }, + "900": { + "value": "#14532d" + }, + "950": { + "value": "#052e16" + } + }, + "lime": { + "50": { + "value": "#f7fee7" + }, + "100": { + "value": "#ecfccb" + }, + "200": { + "value": "#d9f99d" + }, + "300": { + "value": "#bef264" + }, + "400": { + "value": "#a3e635" + }, + "500": { + "value": "#84cc16" + }, + "600": { + "value": "#65a30d" + }, + "700": { + "value": "#4d7c0f" + }, + "800": { + "value": "#3f6212" + }, + "900": { + "value": "#365314" + }, + "950": { + "value": "#1a2e05" + } + }, + "yellow": { + "50": { + "value": "#fefce8" + }, + "100": { + "value": "#fef9c3" + }, + "200": { + "value": "#fef08a" + }, + "300": { + "value": "#fde047" + }, + "400": { + "value": "#facc15" + }, + "500": { + "value": "#eab308" + }, + "600": { + "value": "#ca8a04" + }, + "700": { + "value": "#a16207" + }, + "800": { + "value": "#854d0e" + }, + "900": { + "value": "#713f12" + }, + "950": { + "value": "#422006" + } + }, + "amber": { + "50": { + "value": "#fffbeb" + }, + "100": { + "value": "#fef3c7" + }, + "200": { + "value": "#fde68a" + }, + "300": { + "value": "#fcd34d" + }, + "400": { + "value": "#fbbf24" + }, + "500": { + "value": "#f59e0b" + }, + "600": { + "value": "#d97706" + }, + "700": { + "value": "#b45309" + }, + "800": { + "value": "#92400e" + }, + "900": { + "value": "#78350f" + }, + "950": { + "value": "#451a03" + } + }, + "orange": { + "50": { + "value": "#fff7ed" + }, + "100": { + "value": "#ffedd5" + }, + "200": { + "value": "#fed7aa" + }, + "300": { + "value": "#fdba74" + }, + "400": { + "value": "#fb923c" + }, + "500": { + "value": "#f97316" + }, + "600": { + "value": "#ea580c" + }, + "700": { + "value": "#c2410c" + }, + "800": { + "value": "#9a3412" + }, + "900": { + "value": "#7c2d12" + }, + "950": { + "value": "#431407" + } + }, + "red": { + "50": { + "value": "#fef2f2" + }, + "100": { + "value": "#fee2e2" + }, + "200": { + "value": "#fecaca" + }, + "300": { + "value": "#fca5a5" + }, + "400": { + "value": "#f87171" + }, + "500": { + "value": "#ef4444" + }, + "600": { + "value": "#dc2626" + }, + "700": { + "value": "#b91c1c" + }, + "800": { + "value": "#991b1b" + }, + "900": { + "value": "#7f1d1d" + }, + "950": { + "value": "#450a0a" + } + }, + "neutral": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f5f5f5" + }, + "200": { + "value": "#e5e5e5" + }, + "300": { + "value": "#d4d4d4" + }, + "400": { + "value": "#a3a3a3" + }, + "500": { + "value": "#737373" + }, + "600": { + "value": "#525252" + }, + "700": { + "value": "#404040" + }, + "800": { + "value": "#262626" + }, + "900": { + "value": "#171717" + }, + "950": { + "value": "#0a0a0a" + } + }, + "stone": { + "50": { + "value": "#fafaf9" + }, + "100": { + "value": "#f5f5f4" + }, + "200": { + "value": "#e7e5e4" + }, + "300": { + "value": "#d6d3d1" + }, + "400": { + "value": "#a8a29e" + }, + "500": { + "value": "#78716c" + }, + "600": { + "value": "#57534e" + }, + "700": { + "value": "#44403c" + }, + "800": { + "value": "#292524" + }, + "900": { + "value": "#1c1917" + }, + "950": { + "value": "#0c0a09" + } + }, + "zinc": { + "50": { + "value": "#fafafa" + }, + "100": { + "value": "#f4f4f5" + }, + "200": { + "value": "#e4e4e7" + }, + "300": { + "value": "#d4d4d8" + }, + "400": { + "value": "#a1a1aa" + }, + "500": { + "value": "#71717a" + }, + "600": { + "value": "#52525b" + }, + "700": { + "value": "#3f3f46" + }, + "800": { + "value": "#27272a" + }, + "900": { + "value": "#18181b" + }, + "950": { + "value": "#09090b" + } + }, + "gray": { + "50": { + "value": "#f9fafb" + }, + "100": { + "value": "#f3f4f6" + }, + "200": { + "value": "#e5e7eb" + }, + "300": { + "value": "#d1d5db" + }, + "400": { + "value": "#9ca3af" + }, + "500": { + "value": "#6b7280" + }, + "600": { + "value": "#4b5563" + }, + "700": { + "value": "#374151" + }, + "800": { + "value": "#1f2937" + }, + "900": { + "value": "#111827" + }, + "950": { + "value": "#030712" + } + }, + "slate": { + "50": { + "value": "#f8fafc" + }, + "100": { + "value": "#f1f5f9" + }, + "200": { + "value": "#e2e8f0" + }, + "300": { + "value": "#cbd5e1" + }, + "400": { + "value": "#94a3b8" + }, + "500": { + "value": "#64748b" + }, + "600": { + "value": "#475569" + }, + "700": { + "value": "#334155" + }, + "800": { + "value": "#1e293b" + }, + "900": { + "value": "#0f172a" + }, + "950": { + "value": "#020617" + } + }, + "deep": { + "test": { + "yam": { + "value": "%555" + }, + "pool": { + "poller": { + "value": "#fff" + }, + "tall": { + "value": "$dfdf" + } + } + } + } + }, + "blurs": { + "xs": { + "value": "4px" + }, + "sm": { + "value": "8px" + }, + "md": { + "value": "12px" + }, + "lg": { + "value": "16px" + }, + "xl": { + "value": "24px" + }, + "2xl": { + "value": "40px" + }, + "3xl": { + "value": "64px" + } + }, + "spacing": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + } + }, + "sizes": { + "0": { + "value": "0rem" + }, + "1": { + "value": "0.25rem" + }, + "2": { + "value": "0.5rem" + }, + "3": { + "value": "0.75rem" + }, + "4": { + "value": "1rem" + }, + "5": { + "value": "1.25rem" + }, + "6": { + "value": "1.5rem" + }, + "7": { + "value": "1.75rem" + }, + "8": { + "value": "2rem" + }, + "9": { + "value": "2.25rem" + }, + "10": { + "value": "2.5rem" + }, + "11": { + "value": "2.75rem" + }, + "12": { + "value": "3rem" + }, + "14": { + "value": "3.5rem" + }, + "16": { + "value": "4rem" + }, + "20": { + "value": "5rem" + }, + "24": { + "value": "6rem" + }, + "28": { + "value": "7rem" + }, + "32": { + "value": "8rem" + }, + "36": { + "value": "9rem" + }, + "40": { + "value": "10rem" + }, + "44": { + "value": "11rem" + }, + "48": { + "value": "12rem" + }, + "52": { + "value": "13rem" + }, + "56": { + "value": "14rem" + }, + "60": { + "value": "15rem" + }, + "64": { + "value": "16rem" + }, + "72": { + "value": "18rem" + }, + "80": { + "value": "20rem" + }, + "96": { + "value": "24rem" + }, + "0.5": { + "value": "0.125rem" + }, + "1.5": { + "value": "0.375rem" + }, + "2.5": { + "value": "0.625rem" + }, + "3.5": { + "value": "0.875rem" + }, + "4.5": { + "value": "1.125rem" + }, + "5.5": { + "value": "1.375rem" + }, + "xs": { + "value": "20rem" + }, + "sm": { + "value": "24rem" + }, + "md": { + "value": "28rem" + }, + "lg": { + "value": "32rem" + }, + "xl": { + "value": "36rem" + }, + "2xl": { + "value": "42rem" + }, + "3xl": { + "value": "48rem" + }, + "4xl": { + "value": "56rem" + }, + "5xl": { + "value": "64rem" + }, + "6xl": { + "value": "72rem" + }, + "7xl": { + "value": "80rem" + }, + "8xl": { + "value": "90rem" + }, + "prose": { + "value": "65ch" + }, + "full": { + "value": "100%" + }, + "min": { + "value": "min-content" + }, + "max": { + "value": "max-content" + }, + "fit": { + "value": "fit-content" + } + }, + "animations": { + "spin": { + "value": "spin 1s linear infinite" + }, + "ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" + }, + "pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" + }, + "bounce": { + "value": "bounce 1s infinite" + } + } + }, + "textStyles": { + "headline": { + "DEFAULT": { + "value": { + "fontSize": "1.5rem", + "fontWeight": "bold" + } + }, + "h1": { + "value": { + "fontSize": "2rem", + "fontWeight": "bold" + } + }, + "h2": { + "value": { + "fontSize": { + "base": "1.5rem", + "lg": "2rem" + }, + "fontWeight": "bold" + } + } + } + }, + "containerSizes": { + "xs": "320px", + "sm": "384px", + "md": "448px", + "lg": "512px", + "xl": "576px", + "2xl": "672px", + "3xl": "768px", + "4xl": "896px", + "5xl": "1024px", + "6xl": "1152px", + "7xl": "1280px", + "8xl": "1440px" + }, + "semanticTokens": { + "colors": { + "primary": { + "value": { + "base": "{colors.red.500}", + "_dark": "{colors.red.400}" + } + }, + "secondary": { + "value": { + "base": "{colors.red.800}", + "_dark": "{colors.red.700}" + } + }, + "complex": { + "value": { + "base": "{colors.red.800}", + "_dark": { + "_highContrast": "{colors.red.700}" + } + } + }, + "surface": { + "value": { + "_materialTheme": { + "base": "#m-b", + "_dark": "#m-d" + }, + "_pastelTheme": { + "base": "#p-b", + "_dark": { + "md": "#p-d" + } + } + } + }, + "button": { + "thick": { + "value": { + "base": "#fff", + "_dark": "#000" + } + }, + "card": { + "body": { + "value": { + "base": "#fff", + "_dark": "#000" + } + }, + "heading": { + "value": { + "base": "#fff", + "_dark": "#000" + } + } + } + } + }, + "spacing": { + "gutter": { + "value": { + "base": "{spacing.4}", + "lg": "{spacing.5}" + } + } + } + }, + "recipes": { + "textStyle": { + "className": "textStyle", + "base": { + "fontFamily": "mono", + "divideX": "20px" + }, + "variants": { + "size": { + "h1": { + "fontSize": "5rem", + "lineHeight": "1em", + "fontWeight": 800 + }, + "h2": { + "fontSize": "3rem", + "lineHeight": "1.2em", + "fontWeight": 700, + "letterSpacing": "-0.03em" + } + } + } + }, + "tooltipStyle": { + "className": "tooltipStyle", + "base": { + "&[data-tooltip], & [data-tooltip]": { + "color": { + "_dark": "red" + } + } + } + }, + "cardStyle": { + "className": "card", + "variants": { + "rounded": { + "true": { + "borderRadius": "0.375rem" + } + } + } + }, + "buttonStyle": { + "className": "buttonStyle", + "base": { + "display": "inline-flex", + "alignItems": "center", + "justifyContent": "center", + "_hover": { + "backgroundColor": "red.200", + "fontSize": "3xl", + "color": "white" + } + }, + "variants": { + "size": { + "sm": { + "height": "2.5rem", + "minWidth": "2.5rem", + "padding": "0 0.5rem" + }, + "md": { + "height": "3rem", + "minWidth": "3rem", + "padding": "0 0.75rem" + } + }, + "variant": { + "solid": { + "backgroundColor": "blue", + "color": "white", + "_hover": { + "backgroundColor": "darkblue" + }, + "&[data-disabled]": { + "backgroundColor": "gray", + "color": "black", + "fontSize": "2xl" + } + }, + "outline": { + "backgroundColor": "transparent", + "border": "1px solid blue", + "color": "blue", + "_hover": { + "backgroundColor": "blue", + "color": "white" + }, + "&[data-disabled]": { + "backgroundColor": "transparent", + "border": "1px solid gray", + "color": "gray" + } + } + } + }, + "defaultVariants": { + "size": "md", + "variant": "solid" + } + } + }, + "slotRecipes": { + "checkbox": { + "className": "checkbox", + "slots": [ + "root", + "control", + "label" + ], + "base": { + "root": { + "display": "flex", + "alignItems": "center", + "gap": "2" + }, + "control": { + "borderWidth": "1px", + "borderRadius": "sm" + }, + "label": { + "marginStart": "2" + } + }, + "variants": { + "size": { + "sm": { + "control": { + "textStyle": "headline.h1", + "width": "8", + "height": "8" + }, + "label": { + "fontSize": "sm" + } + }, + "md": { + "control": { + "width": "10", + "height": "10" + }, + "label": { + "fontSize": "md" + } + }, + "lg": { + "control": { + "width": "12", + "height": "12" + }, + "label": { + "fontSize": "lg" + } + } + } + }, + "defaultVariants": { + "size": "sm" + } + }, + "badge": { + "className": "badge", + "slots": [ + "title", + "body" + ], + "base": { + "title": { + "bg": "red.300", + "rounded": "sm" + } + }, + "variants": { + "size": { + "sm": { + "title": { + "px": "4" + }, + "body": { + "color": "red" + } + } + }, + "raised": { + "true": { + "title": { + "shadow": "md" + } + } + } + }, + "compoundVariants": [ + { + "raised": true, + "size": "sm", + "css": { + "title": { + "color": "ButtonHighlight" + } + } + } + ] + } + } + }, + "utilities": { + "aspectRatio": { + "className": "asp", + "values": "aspectRatios", + "group": "Layout" + }, + "boxDecorationBreak": { + "className": "bx-db", + "group": "Layout", + "transform": { + "__function": "transform" + } + }, + "zIndex": { + "className": "z", + "values": "zIndex", + "group": "Visibility" + }, + "boxSizing": { + "className": "bx-s", + "group": "System" + }, + "objectPosition": { + "className": "obj-p", + "group": "Layout" + }, + "objectFit": { + "className": "obj-f", + "group": "Layout" + }, + "overscrollBehavior": { + "className": "ovs-b", + "group": "Scroll" + }, + "overscrollBehaviorX": { + "className": "ovs-bx", + "group": "Scroll" + }, + "overscrollBehaviorY": { + "className": "ovs-by", + "group": "Scroll" + }, + "position": { + "className": "pos", + "shorthand": "pos", + "group": "Position" + }, + "top": { + "className": "top", + "values": "spacing", + "group": "Position" + }, + "left": { + "className": "left", + "values": "spacing", + "group": "Position" + }, + "inset": { + "className": "inset", + "group": "Position", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + } + }, + "insetInline": { + "className": "inset-x", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetX" + ] + }, + "insetBlock": { + "className": "inset-y", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetY" + ] + }, + "insetBlockEnd": { + "className": "inset-be", + "values": "spacing", + "group": "Position" + }, + "insetBlockStart": { + "className": "inset-bs", + "values": "spacing", + "group": "Position" + }, + "insetInlineEnd": { + "className": "inset-e", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetEnd", + "end" + ] + }, + "insetInlineStart": { + "className": "inset-s", + "values": "spacing", + "group": "Position", + "shorthand": [ + "insetStart", + "start" + ] + }, + "right": { + "className": "right", + "values": "spacing", + "group": "Position" + }, + "bottom": { + "className": "bottom", + "values": "spacing", + "group": "Position" + }, + "float": { + "className": "float", + "values": [ + "start", + "end" + ], + "property": "float", + "group": "Position", + "transform": { + "__function": "transform" + } + }, + "visibility": { + "className": "vis", + "group": "Visibility" + }, + "display": { + "className": "d", + "group": "Display" + }, + "hideFrom": { + "className": "hide", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "hideBelow": { + "className": "show", + "values": "breakpoints", + "group": "Display", + "transform": { + "__function": "transform" + } + }, + "flexBasis": { + "className": "flex-b", + "group": "Flex Layout", + "values": { + "__function": "values", + "probe": { + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "full": "100%" + } + } + }, + "flex": { + "className": "flex", + "group": "Flex Layout", + "values": { + "1": "1 1 0%", + "auto": "1 1 auto", + "initial": "0 1 auto", + "none": "none" + } + }, + "flexDirection": { + "className": "flex-d", + "group": "Flex Layout", + "shorthand": "flexDir" + }, + "flexGrow": { + "className": "flex-g", + "group": "Flex Layout" + }, + "flexShrink": { + "className": "flex-sh", + "group": "Flex Layout" + }, + "gridTemplateColumns": { + "className": "grid-tc", + "group": "Grid Layout" + }, + "gridTemplateRows": { + "className": "grid-tr", + "group": "Grid Layout" + }, + "gridColumn": { + "className": "grid-c", + "group": "Grid Layout" + }, + "gridRow": { + "className": "grid-r", + "group": "Grid Layout" + }, + "gridColumnStart": { + "className": "grid-cs", + "group": "Grid Layout" + }, + "gridColumnEnd": { + "className": "grid-ce", + "group": "Grid Layout" + }, + "gridAutoFlow": { + "className": "grid-af", + "group": "Grid Layout" + }, + "gridAutoColumns": { + "className": "grid-ac", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gridAutoRows": { + "className": "grid-ar", + "group": "Grid Layout", + "values": { + "min": "min-content", + "max": "max-content", + "fr": "minmax(0, 1fr)" + } + }, + "gap": { + "className": "gap", + "group": "Flex Layout", + "values": "spacing" + }, + "gridGap": { + "className": "grid-g", + "group": "Grid Layout", + "values": "spacing" + }, + "gridRowGap": { + "className": "grid-rg", + "group": "Grid Layout", + "values": "spacing" + }, + "gridColumnGap": { + "className": "grid-cg", + "group": "Grid Layout", + "values": "spacing" + }, + "rowGap": { + "className": "rg", + "group": "Grid Layout", + "values": "spacing" + }, + "columnGap": { + "className": "cg", + "group": "Grid Layout", + "values": "spacing" + }, + "justifyContent": { + "className": "jc", + "group": "Flex Layout" + }, + "alignContent": { + "className": "ac", + "group": "Flex Layout" + }, + "alignItems": { + "className": "ai", + "group": "Flex Layout" + }, + "alignSelf": { + "className": "as", + "group": "Flex Layout" + }, + "padding": { + "className": "p", + "shorthand": "p", + "values": "spacing", + "group": "Padding" + }, + "paddingLeft": { + "className": "pl", + "shorthand": "pl", + "values": "spacing", + "group": "Padding" + }, + "paddingRight": { + "className": "pr", + "shorthand": "pr", + "values": "spacing", + "group": "Padding" + }, + "paddingTop": { + "className": "pt", + "shorthand": "pt", + "values": "spacing", + "group": "Padding" + }, + "paddingBottom": { + "className": "pb", + "shorthand": "pb", + "values": "spacing", + "group": "Padding" + }, + "paddingBlock": { + "className": "py", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "py", + "paddingY" + ] + }, + "paddingBlockEnd": { + "className": "pbe", + "values": "spacing", + "group": "Padding" + }, + "paddingBlockStart": { + "className": "pbs", + "values": "spacing", + "group": "Padding" + }, + "paddingInline": { + "className": "px", + "values": "spacing", + "group": "Padding", + "shorthand": [ + "paddingX", + "px" + ] + }, + "paddingInlineEnd": { + "className": "pe", + "shorthand": [ + "pe", + "paddingEnd" + ], + "values": "spacing", + "group": "Padding" + }, + "paddingInlineStart": { + "className": "ps", + "shorthand": [ + "ps", + "paddingStart" + ], + "values": "spacing", + "group": "Padding" + }, + "marginLeft": { + "className": "ml", + "shorthand": "ml", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginRight": { + "className": "mr", + "shorthand": "mr", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginTop": { + "className": "mt", + "shorthand": "mt", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBottom": { + "className": "mb", + "shorthand": "mb", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "margin": { + "className": "m", + "shorthand": "m", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlock": { + "className": "my", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "my", + "marginY" + ] + }, + "marginBlockEnd": { + "className": "mbe", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginBlockStart": { + "className": "mbs", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInline": { + "className": "mx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin", + "shorthand": [ + "mx", + "marginX" + ] + }, + "marginInlineEnd": { + "className": "me", + "shorthand": [ + "me", + "marginEnd" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "marginInlineStart": { + "className": "ms", + "shorthand": [ + "ms", + "marginStart" + ], + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "group": "Margin" + }, + "spaceX": { + "className": "sx", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginInlineStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "spaceY": { + "className": "sy", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:spacing": "spacing" + } + }, + "property": "marginBlockStart", + "group": "Margin", + "transform": { + "__function": "transform" + } + }, + "outlineWidth": { + "className": "ring-w", + "shorthand": "ringWidth", + "values": "borderWidths", + "group": "Border" + }, + "outlineColor": { + "className": "ring-c", + "values": "colors", + "group": "Color", + "shorthand": "ringColor", + "transform": { + "__function": "transform", + "colorMix": "outlineColor" + } + }, + "outline": { + "className": "ring", + "shorthand": "ring", + "values": "borders", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "outlineOffset": { + "className": "ring-o", + "shorthand": "ringOffset", + "values": "spacing", + "group": "Border" + }, + "focusRing": { + "className": "focus-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusVisibleRing": { + "className": "focus-v-ring", + "group": "Focus Ring", + "values": [ + "outside", + "inside", + "mixed", + "none" + ], + "transform": { + "__function": "transform" + } + }, + "focusRingColor": { + "className": "focus-ring-c", + "values": "colors", + "group": "Focus Ring", + "transform": { + "__function": "transform", + "colorMix": "--focus-ring-color-prop" + } + }, + "focusRingOffset": { + "className": "focus-ring-o", + "values": "spacing", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingWidth": { + "className": "focus-ring-w", + "values": "borderWidths", + "property": "outlineWidth", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "focusRingStyle": { + "className": "focus-ring-s", + "values": "borderStyles", + "property": "outlineStyle", + "group": "Focus Ring", + "transform": { + "__function": "transform" + } + }, + "divideX": { + "className": "dvd-x", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideY": { + "className": "dvd-y", + "values": "borderWidths", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideColor": { + "className": "dvd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "divideStyle": { + "className": "dvd-s", + "property": "borderStyle", + "group": "Border", + "transform": { + "__function": "transform" + } + }, + "width": { + "shorthand": "w", + "className": "w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "inlineSize": { + "className": "w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minWidth": { + "shorthand": "minW", + "className": "min-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "minInlineSize": { + "className": "min-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxWidth": { + "shorthand": "maxW", + "className": "max-w", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "maxInlineSize": { + "className": "max-w-is", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + } + }, + "height": { + "shorthand": "h", + "className": "h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "blockSize": { + "className": "h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minHeight": { + "shorthand": "minH", + "className": "min-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "minBlockSize": { + "className": "min-h-bs", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxHeight": { + "shorthand": "maxH", + "className": "max-h", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "maxBlockSize": { + "className": "max-b", + "group": "Height", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", + "screen": "100vh", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%" + } + } + }, + "boxSize": { + "className": "size", + "group": "Width", + "values": { + "__function": "values", + "probe": { + "auto": "auto", + "__category:sizes": "sizes", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "screen": "100vw" + } + }, + "transform": { + "__function": "transform" + } + }, + "color": { + "className": "c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "color" + } + }, + "fontFamily": { + "className": "ff", + "values": "fonts", + "group": "Typography" + }, + "fontSize": { + "className": "fs", + "values": "fontSizes", + "group": "Typography" + }, + "fontSizeAdjust": { + "className": "fs-a", + "group": "Typography" + }, + "fontPalette": { + "className": "fp", + "group": "Typography" + }, + "fontKerning": { + "className": "fk", + "group": "Typography" + }, + "fontFeatureSettings": { + "className": "ff-s", + "group": "Typography" + }, + "fontWeight": { + "className": "fw", + "values": "fontWeights", + "group": "Typography" + }, + "fontSmoothing": { + "className": "fsmt", + "group": "Typography", + "values": { + "antialiased": "antialiased", + "subpixel-antialiased": "auto" + }, + "transform": { + "__function": "transform" + } + }, + "fontVariant": { + "className": "fv", + "group": "Typography" + }, + "fontVariantAlternates": { + "className": "fv-alt", + "group": "Typography" + }, + "fontVariantCaps": { + "className": "fv-caps", + "group": "Typography" + }, + "fontVariationSettings": { + "className": "fv-s", + "group": "Typography" + }, + "fontVariantNumeric": { + "className": "fv-num", + "group": "Typography" + }, + "letterSpacing": { + "className": "ls", + "values": "letterSpacings", + "group": "Typography" + }, + "lineHeight": { + "className": "lh", + "values": "lineHeights", + "group": "Typography" + }, + "textAlign": { + "className": "ta", + "group": "Typography" + }, + "textDecoration": { + "className": "td", + "group": "Typography" + }, + "textDecorationColor": { + "className": "td-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textDecorationColor" + }, + "group": "Typography" + }, + "textEmphasisColor": { + "className": "te-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "textEmphasisColor" + }, + "group": "Typography" + }, + "textDecorationStyle": { + "className": "td-s", + "group": "Typography" + }, + "textDecorationThickness": { + "className": "td-t", + "group": "Typography" + }, + "textUnderlineOffset": { + "className": "tu-o", + "group": "Typography" + }, + "textTransform": { + "className": "tt", + "group": "Typography" + }, + "textIndent": { + "className": "ti", + "group": "Typography", + "values": "spacing" + }, + "textShadow": { + "className": "tsh", + "values": "shadows", + "group": "Typography" + }, + "textShadowColor": { + "shorthand": "textShadowColor", + "className": "tsh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--text-shadow-color" + }, + "group": "Typography" + }, + "WebkitTextFillColor": { + "className": "wktf-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "WebkitTextFillColor" + }, + "group": "Typography" + }, + "textOverflow": { + "className": "tov", + "group": "Typography" + }, + "verticalAlign": { + "className": "va", + "group": "Typography" + }, + "wordBreak": { + "className": "wb", + "group": "Typography" + }, + "textWrap": { + "className": "tw", + "values": [ + "wrap", + "balance", + "nowrap" + ], + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "truncate": { + "className": "trunc", + "values": { + "type": "boolean" + }, + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "lineClamp": { + "className": "lc", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "listStyleType": { + "className": "li-t", + "group": "List" + }, + "listStylePosition": { + "className": "li-pos", + "group": "List" + }, + "listStyleImage": { + "className": "li-img", + "group": "List", + "values": "assets" + }, + "listStyle": { + "className": "li-s", + "group": "List" + }, + "backgroundPosition": { + "shorthand": "bgPosition", + "className": "bg-p", + "group": "Background" + }, + "backgroundPositionX": { + "shorthand": "bgPositionX", + "className": "bg-p-x", + "group": "Background" + }, + "backgroundPositionY": { + "shorthand": "bgPositionY", + "className": "bg-p-y", + "group": "Background" + }, + "backgroundAttachment": { + "shorthand": "bgAttachment", + "className": "bg-a", + "group": "Background" + }, + "backgroundClip": { + "shorthand": "bgClip", + "className": "bg-cp", + "group": "Background", + "transform": { + "__function": "transform" + } + }, + "background": { + "shorthand": "bg", + "className": "bg", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "background" + } + }, + "backgroundColor": { + "shorthand": "bgColor", + "className": "bg-c", + "values": "colors", + "group": "Background", + "transform": { + "__function": "transform", + "colorMix": "backgroundColor" + } + }, + "backgroundOrigin": { + "shorthand": "bgOrigin", + "className": "bg-o", + "group": "Background" + }, + "backgroundImage": { + "shorthand": "bgImage", + "className": "bg-i", + "values": "assets", + "group": "Background" + }, + "backgroundRepeat": { + "shorthand": "bgRepeat", + "className": "bg-r", + "group": "Background" + }, + "backgroundBlendMode": { + "shorthand": "bgBlendMode", + "className": "bg-bm", + "group": "Background" + }, + "backgroundSize": { + "shorthand": "bgSize", + "className": "bg-s", + "group": "Background" + }, + "backgroundGradient": { + "shorthand": "bgGradient", + "className": "bg-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundLinear": { + "shorthand": "bgLinear", + "className": "bg-linear", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "backgroundRadial": { + "shorthand": "bgRadial", + "className": "bg-radial", + "group": "Background Gradient", + "values": "gradients", + "transform": { + "__function": "transform" + } + }, + "backgroundConic": { + "shorthand": "bgConic", + "className": "bg-conic", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "textGradient": { + "className": "txt-grad", + "group": "Background Gradient", + "values": { + "__function": "values", + "probe": { + "__category:gradients": "gradients", + "to-t": "to top", + "to-tr": "to top right", + "to-r": "to right", + "to-br": "to bottom right", + "to-b": "to bottom", + "to-bl": "to bottom left", + "to-l": "to left", + "to-tl": "to top left" + } + }, + "transform": { + "__function": "transform" + } + }, + "gradientFromPosition": { + "className": "grad-from-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientToPosition": { + "className": "grad-to-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientFrom": { + "className": "grad-from", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-from" + } + }, + "gradientTo": { + "className": "grad-to", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform", + "colorMix": "--gradient-to" + } + }, + "gradientVia": { + "className": "grad-via", + "values": "colors", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "gradientViaPosition": { + "className": "grad-via-pos", + "group": "Background Gradient", + "transform": { + "__function": "transform" + } + }, + "borderRadius": { + "className": "bdr", + "shorthand": "rounded", + "values": "radii", + "group": "Border Radius" + }, + "borderTopLeftRadius": { + "className": "bdr-tl", + "shorthand": "roundedTopLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRightRadius": { + "className": "bdr-tr", + "shorthand": "roundedTopRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomRightRadius": { + "className": "bdr-br", + "shorthand": "roundedBottomRight", + "values": "radii", + "group": "Border Radius" + }, + "borderBottomLeftRadius": { + "className": "bdr-bl", + "shorthand": "roundedBottomLeft", + "values": "radii", + "group": "Border Radius" + }, + "borderTopRadius": { + "className": "bdr-t", + "shorthand": "roundedTop", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderRightRadius": { + "className": "bdr-r", + "shorthand": "roundedRight", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderBottomRadius": { + "className": "bdr-b", + "shorthand": "roundedBottom", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderLeftRadius": { + "className": "bdr-l", + "shorthand": "roundedLeft", + "values": "radii", + "property": "borderRadius", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderStartStartRadius": { + "className": "bdr-ss", + "shorthand": "roundedStartStart", + "values": "radii", + "group": "Border Radius" + }, + "borderStartEndRadius": { + "className": "bdr-se", + "shorthand": "roundedStartEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderStartRadius": { + "className": "bdr-s", + "values": "radii", + "property": "borderRadius", + "shorthand": "roundedStart", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "borderEndStartRadius": { + "className": "bdr-es", + "shorthand": "roundedEndStart", + "values": "radii", + "group": "Border Radius" + }, + "borderEndEndRadius": { + "className": "bdr-ee", + "shorthand": "roundedEndEnd", + "values": "radii", + "group": "Border Radius" + }, + "borderEndRadius": { + "className": "bdr-e", + "shorthand": "roundedEnd", + "property": "borderRadius", + "values": "radii", + "group": "Border Radius", + "transform": { + "__function": "transform" + } + }, + "border": { + "className": "bd", + "values": "borders", + "group": "Border" + }, + "borderWidth": { + "className": "bd-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderTopWidth": { + "className": "bd-t-w", + "values": "borderWidths", + "group": "Border" + }, + "borderLeftWidth": { + "className": "bd-l-w", + "values": "borderWidths", + "group": "Border" + }, + "borderRightWidth": { + "className": "bd-r-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBottomWidth": { + "className": "bd-b-w", + "values": "borderWidths", + "group": "Border" + }, + "borderBlockStartWidth": { + "className": "bd-bs-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderBlockEndWidth": { + "className": "bd-be-w", + "values": "borderWidths", + "group": "Border Radius" + }, + "borderColor": { + "className": "bd-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderColor" + } + }, + "borderInline": { + "className": "bd-x", + "values": "borders", + "group": "Border", + "shorthand": "borderX" + }, + "borderInlineWidth": { + "className": "bd-x-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderXWidth" + }, + "borderInlineColor": { + "className": "bd-x-c", + "values": "colors", + "group": "Border", + "shorthand": "borderXColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineColor" + } + }, + "borderBlock": { + "className": "bd-y", + "values": "borders", + "group": "Border", + "shorthand": "borderY" + }, + "borderBlockWidth": { + "className": "bd-y-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderYWidth" + }, + "borderBlockColor": { + "className": "bd-y-c", + "values": "colors", + "group": "Border", + "shorthand": "borderYColor", + "transform": { + "__function": "transform", + "colorMix": "borderBlockColor" + } + }, + "borderLeft": { + "className": "bd-l", + "values": "borders", + "group": "Border" + }, + "borderLeftColor": { + "className": "bd-l-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderLeftColor" + } + }, + "borderInlineStart": { + "className": "bd-s", + "values": "borders", + "group": "Border", + "shorthand": "borderStart" + }, + "borderInlineStartWidth": { + "className": "bd-s-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderStartWidth" + }, + "borderInlineStartColor": { + "className": "bd-s-c", + "values": "colors", + "group": "Border", + "shorthand": "borderStartColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineStartColor" + } + }, + "borderRight": { + "className": "bd-r", + "values": "borders", + "group": "Border" + }, + "borderRightColor": { + "className": "bd-r-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderRightColor" + } + }, + "borderInlineEnd": { + "className": "bd-e", + "values": "borders", + "group": "Border", + "shorthand": "borderEnd" + }, + "borderInlineEndWidth": { + "className": "bd-e-w", + "values": "borderWidths", + "group": "Border", + "shorthand": "borderEndWidth" + }, + "borderInlineEndColor": { + "className": "bd-e-c", + "values": "colors", + "group": "Border", + "shorthand": "borderEndColor", + "transform": { + "__function": "transform", + "colorMix": "borderInlineEndColor" + } + }, + "borderTop": { + "className": "bd-t", + "values": "borders", + "group": "Border" + }, + "borderTopColor": { + "className": "bd-t-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderTopColor" + } + }, + "borderBottom": { + "className": "bd-b", + "values": "borders", + "group": "Border" + }, + "borderBottomColor": { + "className": "bd-b-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBottomColor" + } + }, + "borderBlockEnd": { + "className": "bd-be", + "values": "borders", + "group": "Border" + }, + "borderBlockEndColor": { + "className": "bd-be-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockEndColor" + } + }, + "borderBlockStart": { + "className": "bd-bs", + "values": "borders", + "group": "Border" + }, + "borderBlockStartColor": { + "className": "bd-bs-c", + "values": "colors", + "group": "Border", + "transform": { + "__function": "transform", + "colorMix": "borderBlockStartColor" + } + }, + "opacity": { + "className": "op", + "values": "opacity", + "group": "Background" + }, + "boxShadow": { + "shorthand": "shadow", + "className": "bx-sh", + "values": "shadows", + "group": "Shadow" + }, + "boxShadowColor": { + "shorthand": "shadowColor", + "className": "bx-sh-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "--shadow-color" + }, + "group": "Color" + }, + "mixBlendMode": { + "className": "mix-bm", + "group": "Effect" + }, + "filter": { + "className": "filter", + "group": "Effect", + "values": { + "auto": "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )" + } + }, + "brightness": { + "className": "brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "contrast": { + "className": "contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "grayscale": { + "className": "grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "hueRotate": { + "className": "hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "invert": { + "className": "invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "saturate": { + "className": "saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "sepia": { + "className": "sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "dropShadow": { + "className": "drop-shadow", + "group": "Effect", + "values": "dropShadows", + "transform": { + "__function": "transform" + } + }, + "blur": { + "className": "blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropFilter": { + "className": "bkdp", + "group": "Effect", + "values": { + "auto": "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )" + }, + "transform": { + "__function": "transform" + } + }, + "backdropBlur": { + "className": "bkdp-blur", + "group": "Effect", + "values": "blurs", + "transform": { + "__function": "transform" + } + }, + "backdropBrightness": { + "className": "bkdp-brightness", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropContrast": { + "className": "bkdp-contrast", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropGrayscale": { + "className": "bkdp-grayscale", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropHueRotate": { + "className": "bkdp-hue-rotate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropInvert": { + "className": "bkdp-invert", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropOpacity": { + "className": "bkdp-opacity", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSaturate": { + "className": "bkdp-saturate", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "backdropSepia": { + "className": "bkdp-sepia", + "group": "Effect", + "transform": { + "__function": "transform" + } + }, + "borderCollapse": { + "className": "bd-cl", + "group": "Table" + }, + "borderSpacing": { + "className": "bd-sp", + "group": "Table", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "auto": "var(--border-spacing-x) var(--border-spacing-y)" + } + } + }, + "borderSpacingX": { + "className": "bd-sx", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "borderSpacingY": { + "className": "bd-sy", + "values": "spacing", + "group": "Table", + "transform": { + "__function": "transform" + } + }, + "tableLayout": { + "className": "tbl", + "group": "Table" + }, + "transitionTimingFunction": { + "className": "trs-tmf", + "values": "easings", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionDelay": { + "className": "trs-dly", + "values": "durations", + "group": "Transition" + }, + "transitionDuration": { + "className": "trs-dur", + "values": "durations", + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "transitionProperty": { + "className": "trs-prop", + "group": "Transition", + "values": { + "common": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", + "colors": "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke", + "size": "width, height, min-width, max-width, min-height, max-height", + "position": "left, right, top, bottom, inset, inset-inline, inset-block", + "background": "background, background-color, background-image, background-position" + }, + "transform": { + "__function": "transform" + } + }, + "transition": { + "className": "trs", + "values": [ + "all", + "common", + "size", + "position", + "background", + "colors", + "opacity", + "shadow", + "transform" + ], + "group": "Transition", + "transform": { + "__function": "transform" + } + }, + "animation": { + "className": "anim", + "values": "animations", + "group": "Animation" + }, + "animationName": { + "className": "anim-n", + "values": "keyframes", + "group": "Animation" + }, + "animationTimingFunction": { + "className": "anim-tmf", + "values": "easings", + "group": "Animation" + }, + "animationDuration": { + "className": "anim-dur", + "values": "durations", + "group": "Animation" + }, + "animationDelay": { + "className": "anim-dly", + "values": "durations", + "group": "Animation" + }, + "animationPlayState": { + "className": "anim-ps", + "group": "Animation" + }, + "animationComposition": { + "className": "anim-comp", + "group": "Animation" + }, + "animationFillMode": { + "className": "anim-fm", + "group": "Animation" + }, + "animationDirection": { + "className": "anim-dir", + "group": "Animation" + }, + "animationIterationCount": { + "className": "anim-ic", + "group": "Animation" + }, + "animationRange": { + "className": "anim-r", + "group": "Animation" + }, + "animationState": { + "className": "anim-s", + "group": "Animation" + }, + "animationRangeStart": { + "className": "anim-rs", + "group": "Animation" + }, + "animationRangeEnd": { + "className": "anim-re", + "group": "Animation" + }, + "animationTimeline": { + "className": "anim-tl", + "group": "Animation" + }, + "transformOrigin": { + "className": "trf-o", + "group": "Transform" + }, + "transformBox": { + "className": "trf-b", + "group": "Transform" + }, + "transformStyle": { + "className": "trf-s", + "group": "Transform" + }, + "transform": { + "className": "trf", + "group": "Transform" + }, + "rotate": { + "className": "rotate", + "group": "Transform", + "property": "rotate", + "values": { + "auto": "var(--rotate-x) var(--rotate-y)", + "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)" + } + }, + "rotateX": { + "className": "rotate-x", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateY": { + "className": "rotate-y", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "rotateZ": { + "className": "rotate-z", + "group": "Transform", + "property": "rotate", + "transform": { + "__function": "transform" + } + }, + "scale": { + "className": "scale", + "group": "Transform", + "property": "scale", + "values": { + "auto": "var(--scale-x) var(--scale-y)" + } + }, + "scaleX": { + "className": "scale-x", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "scaleY": { + "className": "scale-y", + "group": "Transform", + "transform": { + "__function": "transform" + } + }, + "translate": { + "className": "translate", + "group": "Transform", + "property": "translate", + "values": { + "auto": "var(--translate-x) var(--translate-y)", + "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)" + } + }, + "translateX": { + "shorthand": "x", + "className": "translate-x", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateY": { + "shorthand": "y", + "className": "translate-y", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "translateZ": { + "shorthand": "z", + "className": "translate-z", + "group": "Transform", + "values": { + "__function": "values", + "probe": { + "__category:spacing": "spacing", + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "full": "100%", + "-1/2": "-50%", + "-1/3": "-33.333333%", + "-2/3": "-66.666667%", + "-1/4": "-25%", + "-2/4": "-50%", + "-3/4": "-75%", + "-full": "-100%" + } + }, + "transform": { + "__function": "transform" + } + }, + "accentColor": { + "className": "ac-c", + "values": "colors", + "transform": { + "__function": "transform", + "colorMix": "accentColor" + }, + "group": "Color" + }, + "caretColor": { + "className": "ca-c", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "caretColor" + } + }, + "scrollBehavior": { + "className": "scr-bhv", + "group": "Scroll" + }, + "scrollbar": { + "className": "scr-bar", + "values": [ + "visible", + "hidden" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollbarColor": { + "className": "scr-bar-c", + "values": "colors", + "group": "Scroll", + "transform": { + "__function": "transform", + "colorMix": "scrollbarColor" + } + }, + "scrollbarGutter": { + "className": "scr-bar-g", + "group": "Scroll" + }, + "scrollbarWidth": { + "className": "scr-bar-w", + "values": "sizes", + "group": "Scroll" + }, + "scrollMargin": { + "className": "scr-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginLeft": { + "className": "scr-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginRight": { + "className": "scr-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginTop": { + "className": "scr-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBottom": { + "className": "scr-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlock": { + "className": "scr-my", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginY" + ] + }, + "scrollMarginBlockEnd": { + "className": "scr-mbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginBlockStart": { + "className": "scr-mbt", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInline": { + "className": "scr-mx", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollMarginX" + ] + }, + "scrollMarginInlineEnd": { + "className": "scr-me", + "values": "spacing", + "group": "Scroll" + }, + "scrollMarginInlineStart": { + "className": "scr-ms", + "values": "spacing", + "group": "Scroll" + }, + "scrollPadding": { + "className": "scr-p", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlock": { + "className": "scr-py", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingY" + ] + }, + "scrollPaddingBlockStart": { + "className": "scr-pbs", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBlockEnd": { + "className": "scr-pbe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInline": { + "className": "scr-px", + "values": "spacing", + "group": "Scroll", + "shorthand": [ + "scrollPaddingX" + ] + }, + "scrollPaddingInlineEnd": { + "className": "scr-pe", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingInlineStart": { + "className": "scr-ps", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingLeft": { + "className": "scr-pl", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingRight": { + "className": "scr-pr", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingTop": { + "className": "scr-pt", + "values": "spacing", + "group": "Scroll" + }, + "scrollPaddingBottom": { + "className": "scr-pb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapAlign": { + "className": "scr-sa", + "group": "Scroll" + }, + "scrollSnapStop": { + "className": "scrs-s", + "group": "Scroll" + }, + "scrollSnapType": { + "className": "scrs-t", + "group": "Scroll", + "values": { + "none": "none", + "x": "x var(--scroll-snap-strictness)", + "y": "y var(--scroll-snap-strictness)", + "both": "both var(--scroll-snap-strictness)" + } + }, + "scrollSnapStrictness": { + "className": "scrs-strt", + "values": [ + "mandatory", + "proximity" + ], + "group": "Scroll", + "transform": { + "__function": "transform" + } + }, + "scrollSnapMargin": { + "className": "scrs-m", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginTop": { + "className": "scrs-mt", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginBottom": { + "className": "scrs-mb", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginLeft": { + "className": "scrs-ml", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapMarginRight": { + "className": "scrs-mr", + "values": "spacing", + "group": "Scroll" + }, + "scrollSnapCoordinate": { + "className": "scrs-c", + "group": "Scroll" + }, + "scrollSnapDestination": { + "className": "scrs-d", + "group": "Scroll" + }, + "scrollSnapPointsX": { + "className": "scrs-px", + "group": "Scroll" + }, + "scrollSnapPointsY": { + "className": "scrs-py", + "group": "Scroll" + }, + "scrollSnapTypeX": { + "className": "scrs-tx", + "group": "Scroll" + }, + "scrollSnapTypeY": { + "className": "scrs-ty", + "group": "Scroll" + }, + "scrollTimeline": { + "className": "scrtl", + "group": "Scroll" + }, + "scrollTimelineAxis": { + "className": "scrtl-a", + "group": "Scroll" + }, + "scrollTimelineName": { + "className": "scrtl-n", + "group": "Scroll" + }, + "touchAction": { + "className": "tch-a", + "group": "Interactivity" + }, + "userSelect": { + "className": "us", + "group": "Interactivity", + "transform": { + "__function": "transform" + } + }, + "overflow": { + "className": "ov", + "group": "Scroll" + }, + "overflowWrap": { + "className": "ov-wrap", + "group": "Scroll" + }, + "overflowX": { + "className": "ov-x", + "group": "Scroll" + }, + "overflowY": { + "className": "ov-y", + "group": "Scroll" + }, + "overflowAnchor": { + "className": "ov-a", + "group": "Scroll" + }, + "overflowBlock": { + "className": "ov-b", + "group": "Scroll" + }, + "overflowInline": { + "className": "ov-i", + "group": "Scroll" + }, + "overflowClipBox": { + "className": "ovcp-bx", + "group": "Scroll" + }, + "overflowClipMargin": { + "className": "ovcp-m", + "group": "Scroll" + }, + "overscrollBehaviorBlock": { + "className": "ovs-bb", + "group": "Scroll" + }, + "overscrollBehaviorInline": { + "className": "ovs-bi", + "group": "Scroll" + }, + "fill": { + "className": "fill", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "fill" + } + }, + "stroke": { + "className": "stk", + "values": "colors", + "group": "Color", + "transform": { + "__function": "transform", + "colorMix": "stroke" + } + }, + "strokeWidth": { + "className": "stk-w", + "values": "borderWidths", + "group": "Border" + }, + "strokeDasharray": { + "className": "stk-dsh", + "group": "Border" + }, + "strokeDashoffset": { + "className": "stk-do", + "group": "Border" + }, + "strokeLinecap": { + "className": "stk-lc", + "group": "Border" + }, + "strokeLinejoin": { + "className": "stk-lj", + "group": "Border" + }, + "strokeMiterlimit": { + "className": "stk-ml", + "group": "Border" + }, + "strokeOpacity": { + "className": "stk-op", + "group": "Border" + }, + "srOnly": { + "className": "sr", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "debug": { + "className": "debug", + "values": { + "type": "boolean" + }, + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "appearance": { + "className": "ap", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "backfaceVisibility": { + "className": "bfv", + "group": "Visibility", + "transform": { + "__function": "transform" + } + }, + "clipPath": { + "className": "cp-path", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "hyphens": { + "className": "hy", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "mask": { + "className": "msk", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskImage": { + "className": "msk-i", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "maskSize": { + "className": "msk-s", + "group": "Other", + "transform": { + "__function": "transform" + } + }, + "textSizeAdjust": { + "className": "txt-adj", + "group": "Typography", + "transform": { + "__function": "transform" + } + }, + "container": { + "className": "cq", + "group": "Container" + }, + "containerName": { + "className": "cq-n", + "property": "containerName", + "values": "containerNames", + "group": "Container" + }, + "containerType": { + "className": "cq-t", + "group": "Container" + }, + "cursor": { + "className": "cursor", + "values": "cursor", + "group": "System" + } + }, + "layers": { + "reset": "reset", + "base": "base", + "tokens": "tokens", + "recipes": "recipes", + "utilities": "utilities" + } +} diff --git a/src/Css/tests/Fixtures/Panda/expectations.php b/src/Css/tests/Fixtures/Panda/expectations.php new file mode 100644 index 00000000000..410532c99ac --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/expectations.php @@ -0,0 +1,327 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +return [ + 'passing' => [ + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > respect color mode::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > respect important syntax::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should resolve responsive array with gaps::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should resolve responsive array::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should resolve shorthand::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should resolve shorthand::2', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should skip `_` notation::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should work with basic::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should work with inner responsive::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should work with negative tokens::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with basic style object > should work with outer responsive::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > outlier: should work with basic::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > responsive helpers::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > responsive helpers::2', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > should sort mobile first::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > should work for inline media::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with direct nesting > simple nesting::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with grouped conditions styles > multiple scopes::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with grouped conditions styles > nested > nested > property::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with grouped conditions styles > nested > property::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with grouped conditions styles > simple::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with nesting scope > [@media] should work with nested selector::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with nesting scope > [parent selector] should work with nested selector::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with nesting scope > [pseudo] should work with nested selector::1', + 'fixture::packages/core/__tests__/atomic-rule.test.ts::atomic / with nesting scope > [selector] should work with nested selector::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > WebkitTextFillColor with color token::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > config token color::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > decimal opacity::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > in token fn::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > in token reference with curly brackets::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > inside var::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > invalid number format::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > native CSS color::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > native CSS color::2', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > opacity token::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > percent opacity::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > wrong format::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > wrong number format::1', + 'fixture::packages/core/__tests__/color-mix.test.ts::color-mix > wrong opacity::1', + 'fixture::packages/core/__tests__/complex-rule.test.ts::complex-rule > should process complex rule::1', + 'fixture::packages/core/__tests__/gradient.test.ts::gradient utilities > bgGradient with direction shortcut::1', + 'fixture::packages/core/__tests__/gradient.test.ts::gradient utilities > bgGradient with gradient token::1', + 'fixture::packages/core/__tests__/gradient.test.ts::gradient utilities > bgGradient with token references::1', + 'fixture::packages/core/__tests__/gradient.test.ts::gradient utilities > textGradient with token references::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > at-rules + mixed conditions sorting::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > at-rules conditions sorting::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > at-rules pseudo conditions sorting::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > color mix::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > ignores declarations with null::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > issue 3462 - mixed condition (array format) with child selector::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > issue 3462 - mixed condition with at-rule should still sort correctly::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > mixed conditions sorting::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > mixed vs at-rule sorting::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > more specific should always be last (red then blue)::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > nested conditions sorting::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > nested mixed conditions sorting::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > parses declarations with !important::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > preserves casing for css variable::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > pseudo conditions sorting::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > resolve property conflicts and order - border example::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > resolve property conflicts and order - padding example::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > unitless::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > basic multi-block condition with two at-rule blocks::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > multi-block condition with multiple properties::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > multi-block emission preserves a deterministic at-rule order::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > multi-block stacked with a parent-nesting condition combines correctly::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > single-@slot object is equivalent to mixed-array form::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > single-@slot object is equivalent to mixed-array form::2', + 'fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > single-block object condition (backward compat)::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::multi-block conditions (object syntax with @slot) > stacking two multi-block conditions produces cartesian product of blocks::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > css - boolean utility::1', + 'fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > css - boolean utility::2', + 'fixture::packages/core/__tests__/rule-processor.test.ts::rule processor > simple::1', + 'fixture::packages/core/__tests__/static-css.test.ts::static-css > arbitrary condition or selector::1', + 'fixture::packages/core/__tests__/static-css.test.ts::static-css > container query::1', + 'fixture::packages/core/__tests__/static-css.test.ts::static-css > using * in CssRule and conditions list::1', + 'fixture::packages/core/__tests__/static-css.test.ts::static-css > using * in CssRule::1', + 'fixture::packages/core/__tests__/static-css.test.ts::static-css > using * in CssRule::2', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > [css] should generate css::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > assets svg::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > border widths::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > color-mix in semanticTokens conditions::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > color-mix::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > issue 769: Invalid CSS when extending theme with semanticTokens > should not extract nested tokens as `color-palette` css variables::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > issue 769: Invalid CSS when extending theme with semanticTokens > should not extract shadow array as a separate unnamed block for the custom dark condition::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > multi-block stacked under a parent-nesting condition produces cartesian rules::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > selector-only multi-block (darkTheme matches data-theme=dark or data-dark-theme) emits one rule per attr::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > semantic tokens emit one rule per @slot path for multi-block conditions::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > shadow semantic tokens::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > shadow tokens - composite::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > shadow tokens::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > should reuse css variable in semantic token alias::1', + 'fixture::packages/generator/__tests__/generate-token.test.ts::generator > two stacked multi-block conditions produce N×M rules::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw conditional spreading edge cases > handles logical AND spreading with css.raw::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw conditional spreading edge cases > handles ternary operator with css.raw::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw cross-file and runtime edge cases > handles css.raw mixed with native CSS properties::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw cross-file and runtime edge cases > handles error scenarios and graceful degradation::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw cross-file and runtime edge cases > handles exported/imported css.raw simulation::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw cross-file and runtime edge cases > handles function returns with css.raw (limited static analysis)::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles computed property names with spread::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles conditional spreading::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles css.raw in child selectors (Issue #1370)::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles css.raw spread inside another css.raw::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles deeply chained css.raw spreads::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles deeply nested conditions::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles function return with spread::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles nested selectors with css.raw references::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles spreading undefined or null gracefully::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles spreading with array syntax::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles spreading with multiple css.raw calls in same object::1', + 'fixture::packages/parser/__tests__/css-raw-edge-cases.test.ts::css.raw edge cases with spreading > handles spreading with renamed imports::1', + 'fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles deeply nested spreading with conditions::1', + 'fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles nested spreading with identifiers::1', + 'fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles spreading across multiple files::1', + 'fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles spreading css.raw in arbitrary selectors::1', + 'fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > handles variable assignment with spread::1', + 'fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > spreads css.raw in pseudo selectors::1', + 'fixture::packages/parser/__tests__/css-raw-spread.test.ts::css.raw spreading in conditions > spreads css.raw in responsive conditions::1', + 'fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - ignore not from panda::1', + 'fixture::packages/parser/__tests__/namespace.test.ts::extract namespace > TS namespaces - ignore not from panda::2', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > arbitrary selectors::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > assets::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > basic usage with multiple style objects::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > colorPalette with DEFAULT::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > colorPalette::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > css with base::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > factory css::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > flat and nested object on same key::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > issue 1062: expand colorPalette flexibility > should extract color palette with more than one level of nesting::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > multiple css alias::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > runtime conditions::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > should evaluate ${fn}.raw inside another ${fn}.raw to allow for composition::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > strictTokens arbitrary value escape hatch::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > token fn in at-rules::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > tokens starting with 0::1', + 'fixture::packages/parser/__tests__/output.test.ts::extract to css output pipeline > weird conditions mixing::1', + 'fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: enum *::1', + 'fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: enum::1', + 'fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: number + conditions::1', + 'fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: number::1', + 'fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: property *::1', + 'fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: property::1', + 'fixture::packages/parser/__tests__/preset-patterns.test.ts::staticCss > type: token::1', + 'fixture::packages/parser/__tests__/static-css.test.ts::static css > recipe with base::1', + 'fixture::packages/parser/__tests__/static-css.test.ts::static css > recipe::1', + 'fixture::packages/parser/__tests__/static-css.test.ts::static css > slot recipes::1', + 'fixture::packages/parser/__tests__/svelte.test.ts::extract svelte templates > template with svelte-specific syntax + Typescript usage::1', + 'fixture::packages/parser/__tests__/vue.test.ts::extract Vue templates > vue 2 Options API template::1', + 'fixture::packages/parser/__tests__/vue.test.ts::extract Vue templates > vue 3 composition API::1', + 'fixture::packages/parser/__tests__/vue.test.ts::extract Vue templates > vue 3 script setup::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > base styles::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > css prop with variant::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > css prop::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > custom className::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > html props::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > style prop with variant::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > style prop::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - button recipe > variant styles::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > base styles::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > custom className::1', + 'format-names::sandbox/codegen/__tests__/scenarios/format-names.test.tsx::styled factory - cva > variant styles::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > arbitrary selector::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > arbitrary value::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > condition prop::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > native CSS prop and value::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > nested condition prop with array syntax::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > nested condition prop::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > object condition prop::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > responsive array syntax prop::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > responsive condition::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > same prop::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > same prop::2', + 'react::sandbox/codegen/__tests__/css.test.ts::css > shorthand prop::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > token value::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > using inline token helper - in condition::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > using inline token helper - in value::1', + 'react::sandbox/codegen/__tests__/css.test.ts::css > utility prop::1', + 'react::sandbox/codegen/__tests__/cva.test.ts::cva > base styles::1', + 'react::sandbox/codegen/__tests__/cva.test.ts::cva > outline variant styles::1', + 'react::sandbox/codegen/__tests__/cva.test.ts::cva > solid variant styles::1', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > default props::1', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > default props::2', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > forwardProps::1', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withContext::1', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withContext::2', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withContext::3', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withContext::4', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::1', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::2', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::3', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::4', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::5', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::6', + 'react::sandbox/codegen/__tests__/frameworks/react.style-context.test.tsx::style context - react > withProvider::7', + 'react::sandbox/codegen/__tests__/recipe.test.ts::recipe > base styles::1', + 'react::sandbox/codegen/__tests__/recipe.test.ts::recipe > compoundVariants::1', + 'react::sandbox/codegen/__tests__/recipe.test.ts::recipe > compoundVariants::2', + 'react::sandbox/codegen/__tests__/recipe.test.ts::recipe > compoundVariants::3', + 'react::sandbox/codegen/__tests__/recipe.test.ts::recipe > compoundVariants::4', + 'react::sandbox/codegen/__tests__/recipe.test.ts::recipe > outline variant styles::1', + 'react::sandbox/codegen/__tests__/recipe.test.ts::recipe > solid variant styles::1', + 'react::sandbox/codegen/__tests__/recipe.test.ts::recipe > using conditions::1', + 'react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > base styles::1', + 'react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > base styles::2', + 'react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > outline variant styles::1', + 'react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > outline variant styles::2', + 'react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > solid variant styles::1', + 'react::sandbox/codegen/__tests__/slot-recipe.test.ts::sva > solid variant styles::2', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > *Css prop aliases on compound component::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > *Css prop aliases on compound component::2', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > base styles::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > box pattern::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > compound variants::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > css prop with variant::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > css prop::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > custom className::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > html props::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > stack pattern::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > style prop with variant::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > style prop::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - button recipe > variant styles::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > base styles::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > compound variants::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > custom className::1', + 'react::sandbox/codegen/__tests__/styled-factory.test.tsx::styled factory - cva > variant styles::1', + 'react::sandbox/codegen/__tests__/sva.test.ts::sva > base styles::1', + 'react::sandbox/codegen/__tests__/sva.test.ts::sva > base styles::2', + 'react::sandbox/codegen/__tests__/sva.test.ts::sva > outline variant styles::1', + 'react::sandbox/codegen/__tests__/sva.test.ts::sva > outline variant styles::2', + 'react::sandbox/codegen/__tests__/sva.test.ts::sva > solid variant styles::1', + 'react::sandbox/codegen/__tests__/sva.test.ts::sva > solid variant styles::2', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > arbitrary selector::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > arbitrary value escape hatch with conditionals::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > arbitrary value escape hatch::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > arbitrary value::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > condition prop::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > css var::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > css var::2', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > important::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::2', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::3', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::4', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::5', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::6', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::7', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::8', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > native CSS prop and value::9', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > nested condition prop with array syntax::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > nested condition prop::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > object condition prop::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > responsive array syntax prop::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > responsive condition::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > shorthand prop::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > token value::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > using inline token helper - in condition::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > using inline token helper - in value::1', + 'strict-property-values::sandbox/codegen/__tests__/scenarios/strict-property-values.test.ts::css > utility prop::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > arbitrary selector::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > arbitrary value escape hatch with conditionals::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > arbitrary value escape hatch::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > arbitrary value::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > color opacity modifier::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > color opacity modifier::2', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > condition prop::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > important::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::2', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::3', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::4', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::5', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::6', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::7', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::8', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > nested condition prop with array syntax::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > nested condition prop::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > object condition prop::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > responsive array syntax prop::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > responsive condition::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > shorthand prop::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > token value::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > using inline token helper - in condition::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > using inline token helper - in value::1', + 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > utility prop::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > arbitrary selector::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > arbitrary value escape hatch with conditionals::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > arbitrary value escape hatch::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > arbitrary value::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > condition prop::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > css var::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > css var::2', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > important::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::2', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::3', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::4', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::5', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::6', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::7', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > native CSS prop and value::8', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > nested condition prop with array syntax::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > nested condition prop::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > object condition prop::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > responsive array syntax prop::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > responsive condition::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > shorthand prop::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > token value::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > using inline token helper - in condition::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > using inline token helper - in value::1', + 'strict::sandbox/codegen/__tests__/scenarios/strict.test.ts::css > utility prop::1', + ], + 'skipped' => [ + ], +]; diff --git a/src/Css/tests/Fixtures/Panda/tokens.json b/src/Css/tests/Fixtures/Panda/tokens.json new file mode 100644 index 00000000000..eac600b1a9a --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/tokens.json @@ -0,0 +1,2360 @@ +{ + "vars": { + "aspectRatios.square": "var(--aspect-ratios-square)", + "aspectRatios.landscape": "var(--aspect-ratios-landscape)", + "aspectRatios.portrait": "var(--aspect-ratios-portrait)", + "aspectRatios.wide": "var(--aspect-ratios-wide)", + "aspectRatios.ultrawide": "var(--aspect-ratios-ultrawide)", + "aspectRatios.golden": "var(--aspect-ratios-golden)", + "borders.none": "var(--borders-none)", + "easings.default": "var(--easings-default)", + "easings.linear": "var(--easings-linear)", + "easings.in": "var(--easings-in)", + "easings.out": "var(--easings-out)", + "easings.in-out": "var(--easings-in-out)", + "durations.fastest": "var(--durations-fastest)", + "durations.faster": "var(--durations-faster)", + "durations.fast": "var(--durations-fast)", + "durations.normal": "var(--durations-normal)", + "durations.slow": "var(--durations-slow)", + "durations.slower": "var(--durations-slower)", + "durations.slowest": "var(--durations-slowest)", + "radii.xs": "var(--radii-xs)", + "radii.sm": "var(--radii-sm)", + "radii.md": "var(--radii-md)", + "radii.lg": "var(--radii-lg)", + "radii.xl": "var(--radii-xl)", + "radii.2xl": "var(--radii-2xl)", + "radii.3xl": "var(--radii-3xl)", + "radii.4xl": "var(--radii-4xl)", + "radii.full": "var(--radii-full)", + "fontWeights.thin": "var(--font-weights-thin)", + "fontWeights.extralight": "var(--font-weights-extralight)", + "fontWeights.light": "var(--font-weights-light)", + "fontWeights.normal": "var(--font-weights-normal)", + "fontWeights.medium": "var(--font-weights-medium)", + "fontWeights.semibold": "var(--font-weights-semibold)", + "fontWeights.bold": "var(--font-weights-bold)", + "fontWeights.extrabold": "var(--font-weights-extrabold)", + "fontWeights.black": "var(--font-weights-black)", + "lineHeights.none": "var(--line-heights-none)", + "lineHeights.tight": "var(--line-heights-tight)", + "lineHeights.snug": "var(--line-heights-snug)", + "lineHeights.normal": "var(--line-heights-normal)", + "lineHeights.relaxed": "var(--line-heights-relaxed)", + "lineHeights.loose": "var(--line-heights-loose)", + "fonts.sans": "var(--fonts-sans)", + "fonts.serif": "var(--fonts-serif)", + "fonts.mono": "var(--fonts-mono)", + "letterSpacings.tighter": "var(--letter-spacings-tighter)", + "letterSpacings.tight": "var(--letter-spacings-tight)", + "letterSpacings.normal": "var(--letter-spacings-normal)", + "letterSpacings.wide": "var(--letter-spacings-wide)", + "letterSpacings.wider": "var(--letter-spacings-wider)", + "letterSpacings.widest": "var(--letter-spacings-widest)", + "fontSizes.2xs": "var(--font-sizes-2xs)", + "fontSizes.xs": "var(--font-sizes-xs)", + "fontSizes.sm": "var(--font-sizes-sm)", + "fontSizes.md": "var(--font-sizes-md)", + "fontSizes.lg": "var(--font-sizes-lg)", + "fontSizes.xl": "var(--font-sizes-xl)", + "fontSizes.2xl": "var(--font-sizes-2xl)", + "fontSizes.3xl": "var(--font-sizes-3xl)", + "fontSizes.4xl": "var(--font-sizes-4xl)", + "fontSizes.5xl": "var(--font-sizes-5xl)", + "fontSizes.6xl": "var(--font-sizes-6xl)", + "fontSizes.7xl": "var(--font-sizes-7xl)", + "fontSizes.8xl": "var(--font-sizes-8xl)", + "fontSizes.9xl": "var(--font-sizes-9xl)", + "shadows.2xs": "var(--shadows-2xs)", + "shadows.xs": "var(--shadows-xs)", + "shadows.sm": "var(--shadows-sm)", + "shadows.md": "var(--shadows-md)", + "shadows.lg": "var(--shadows-lg)", + "shadows.xl": "var(--shadows-xl)", + "shadows.2xl": "var(--shadows-2xl)", + "shadows.inset-2xs": "var(--shadows-inset-2xs)", + "shadows.inset-xs": "var(--shadows-inset-xs)", + "shadows.inset-sm": "var(--shadows-inset-sm)", + "colors.current": "var(--colors-current)", + "colors.black": "var(--colors-black)", + "colors.white": "var(--colors-white)", + "colors.transparent": "var(--colors-transparent)", + "colors.rose.50": "var(--colors-rose-50)", + "colors.rose.100": "var(--colors-rose-100)", + "colors.rose.200": "var(--colors-rose-200)", + "colors.rose.300": "var(--colors-rose-300)", + "colors.rose.400": "var(--colors-rose-400)", + "colors.rose.500": "var(--colors-rose-500)", + "colors.rose.600": "var(--colors-rose-600)", + "colors.rose.700": "var(--colors-rose-700)", + "colors.rose.800": "var(--colors-rose-800)", + "colors.rose.900": "var(--colors-rose-900)", + "colors.rose.950": "var(--colors-rose-950)", + "colors.pink.50": "var(--colors-pink-50)", + "colors.pink.100": "var(--colors-pink-100)", + "colors.pink.200": "var(--colors-pink-200)", + "colors.pink.300": "var(--colors-pink-300)", + "colors.pink.400": "var(--colors-pink-400)", + "colors.pink.500": "var(--colors-pink-500)", + "colors.pink.600": "var(--colors-pink-600)", + "colors.pink.700": "var(--colors-pink-700)", + "colors.pink.800": "var(--colors-pink-800)", + "colors.pink.900": "var(--colors-pink-900)", + "colors.pink.950": "var(--colors-pink-950)", + "colors.fuchsia.50": "var(--colors-fuchsia-50)", + "colors.fuchsia.100": "var(--colors-fuchsia-100)", + "colors.fuchsia.200": "var(--colors-fuchsia-200)", + "colors.fuchsia.300": "var(--colors-fuchsia-300)", + "colors.fuchsia.400": "var(--colors-fuchsia-400)", + "colors.fuchsia.500": "var(--colors-fuchsia-500)", + "colors.fuchsia.600": "var(--colors-fuchsia-600)", + "colors.fuchsia.700": "var(--colors-fuchsia-700)", + "colors.fuchsia.800": "var(--colors-fuchsia-800)", + "colors.fuchsia.900": "var(--colors-fuchsia-900)", + "colors.fuchsia.950": "var(--colors-fuchsia-950)", + "colors.purple.50": "var(--colors-purple-50)", + "colors.purple.100": "var(--colors-purple-100)", + "colors.purple.200": "var(--colors-purple-200)", + "colors.purple.300": "var(--colors-purple-300)", + "colors.purple.400": "var(--colors-purple-400)", + "colors.purple.500": "var(--colors-purple-500)", + "colors.purple.600": "var(--colors-purple-600)", + "colors.purple.700": "var(--colors-purple-700)", + "colors.purple.800": "var(--colors-purple-800)", + "colors.purple.900": "var(--colors-purple-900)", + "colors.purple.950": "var(--colors-purple-950)", + "colors.violet.50": "var(--colors-violet-50)", + "colors.violet.100": "var(--colors-violet-100)", + "colors.violet.200": "var(--colors-violet-200)", + "colors.violet.300": "var(--colors-violet-300)", + "colors.violet.400": "var(--colors-violet-400)", + "colors.violet.500": "var(--colors-violet-500)", + "colors.violet.600": "var(--colors-violet-600)", + "colors.violet.700": "var(--colors-violet-700)", + "colors.violet.800": "var(--colors-violet-800)", + "colors.violet.900": "var(--colors-violet-900)", + "colors.violet.950": "var(--colors-violet-950)", + "colors.indigo.50": "var(--colors-indigo-50)", + "colors.indigo.100": "var(--colors-indigo-100)", + "colors.indigo.200": "var(--colors-indigo-200)", + "colors.indigo.300": "var(--colors-indigo-300)", + "colors.indigo.400": "var(--colors-indigo-400)", + "colors.indigo.500": "var(--colors-indigo-500)", + "colors.indigo.600": "var(--colors-indigo-600)", + "colors.indigo.700": "var(--colors-indigo-700)", + "colors.indigo.800": "var(--colors-indigo-800)", + "colors.indigo.900": "var(--colors-indigo-900)", + "colors.indigo.950": "var(--colors-indigo-950)", + "colors.blue.50": "var(--colors-blue-50)", + "colors.blue.100": "var(--colors-blue-100)", + "colors.blue.200": "var(--colors-blue-200)", + "colors.blue.300": "var(--colors-blue-300)", + "colors.blue.400": "var(--colors-blue-400)", + "colors.blue.500": "var(--colors-blue-500)", + "colors.blue.600": "var(--colors-blue-600)", + "colors.blue.700": "var(--colors-blue-700)", + "colors.blue.800": "var(--colors-blue-800)", + "colors.blue.900": "var(--colors-blue-900)", + "colors.blue.950": "var(--colors-blue-950)", + "colors.sky.50": "var(--colors-sky-50)", + "colors.sky.100": "var(--colors-sky-100)", + "colors.sky.200": "var(--colors-sky-200)", + "colors.sky.300": "var(--colors-sky-300)", + "colors.sky.400": "var(--colors-sky-400)", + "colors.sky.500": "var(--colors-sky-500)", + "colors.sky.600": "var(--colors-sky-600)", + "colors.sky.700": "var(--colors-sky-700)", + "colors.sky.800": "var(--colors-sky-800)", + "colors.sky.900": "var(--colors-sky-900)", + "colors.sky.950": "var(--colors-sky-950)", + "colors.cyan.50": "var(--colors-cyan-50)", + "colors.cyan.100": "var(--colors-cyan-100)", + "colors.cyan.200": "var(--colors-cyan-200)", + "colors.cyan.300": "var(--colors-cyan-300)", + "colors.cyan.400": "var(--colors-cyan-400)", + "colors.cyan.500": "var(--colors-cyan-500)", + "colors.cyan.600": "var(--colors-cyan-600)", + "colors.cyan.700": "var(--colors-cyan-700)", + "colors.cyan.800": "var(--colors-cyan-800)", + "colors.cyan.900": "var(--colors-cyan-900)", + "colors.cyan.950": "var(--colors-cyan-950)", + "colors.teal.50": "var(--colors-teal-50)", + "colors.teal.100": "var(--colors-teal-100)", + "colors.teal.200": "var(--colors-teal-200)", + "colors.teal.300": "var(--colors-teal-300)", + "colors.teal.400": "var(--colors-teal-400)", + "colors.teal.500": "var(--colors-teal-500)", + "colors.teal.600": "var(--colors-teal-600)", + "colors.teal.700": "var(--colors-teal-700)", + "colors.teal.800": "var(--colors-teal-800)", + "colors.teal.900": "var(--colors-teal-900)", + "colors.teal.950": "var(--colors-teal-950)", + "colors.emerald.50": "var(--colors-emerald-50)", + "colors.emerald.100": "var(--colors-emerald-100)", + "colors.emerald.200": "var(--colors-emerald-200)", + "colors.emerald.300": "var(--colors-emerald-300)", + "colors.emerald.400": "var(--colors-emerald-400)", + "colors.emerald.500": "var(--colors-emerald-500)", + "colors.emerald.600": "var(--colors-emerald-600)", + "colors.emerald.700": "var(--colors-emerald-700)", + "colors.emerald.800": "var(--colors-emerald-800)", + "colors.emerald.900": "var(--colors-emerald-900)", + "colors.emerald.950": "var(--colors-emerald-950)", + "colors.green.50": "var(--colors-green-50)", + "colors.green.100": "var(--colors-green-100)", + "colors.green.200": "var(--colors-green-200)", + "colors.green.300": "var(--colors-green-300)", + "colors.green.400": "var(--colors-green-400)", + "colors.green.500": "var(--colors-green-500)", + "colors.green.600": "var(--colors-green-600)", + "colors.green.700": "var(--colors-green-700)", + "colors.green.800": "var(--colors-green-800)", + "colors.green.900": "var(--colors-green-900)", + "colors.green.950": "var(--colors-green-950)", + "colors.lime.50": "var(--colors-lime-50)", + "colors.lime.100": "var(--colors-lime-100)", + "colors.lime.200": "var(--colors-lime-200)", + "colors.lime.300": "var(--colors-lime-300)", + "colors.lime.400": "var(--colors-lime-400)", + "colors.lime.500": "var(--colors-lime-500)", + "colors.lime.600": "var(--colors-lime-600)", + "colors.lime.700": "var(--colors-lime-700)", + "colors.lime.800": "var(--colors-lime-800)", + "colors.lime.900": "var(--colors-lime-900)", + "colors.lime.950": "var(--colors-lime-950)", + "colors.yellow.50": "var(--colors-yellow-50)", + "colors.yellow.100": "var(--colors-yellow-100)", + "colors.yellow.200": "var(--colors-yellow-200)", + "colors.yellow.300": "var(--colors-yellow-300)", + "colors.yellow.400": "var(--colors-yellow-400)", + "colors.yellow.500": "var(--colors-yellow-500)", + "colors.yellow.600": "var(--colors-yellow-600)", + "colors.yellow.700": "var(--colors-yellow-700)", + "colors.yellow.800": "var(--colors-yellow-800)", + "colors.yellow.900": "var(--colors-yellow-900)", + "colors.yellow.950": "var(--colors-yellow-950)", + "colors.amber.50": "var(--colors-amber-50)", + "colors.amber.100": "var(--colors-amber-100)", + "colors.amber.200": "var(--colors-amber-200)", + "colors.amber.300": "var(--colors-amber-300)", + "colors.amber.400": "var(--colors-amber-400)", + "colors.amber.500": "var(--colors-amber-500)", + "colors.amber.600": "var(--colors-amber-600)", + "colors.amber.700": "var(--colors-amber-700)", + "colors.amber.800": "var(--colors-amber-800)", + "colors.amber.900": "var(--colors-amber-900)", + "colors.amber.950": "var(--colors-amber-950)", + "colors.orange.50": "var(--colors-orange-50)", + "colors.orange.100": "var(--colors-orange-100)", + "colors.orange.200": "var(--colors-orange-200)", + "colors.orange.300": "var(--colors-orange-300)", + "colors.orange.400": "var(--colors-orange-400)", + "colors.orange.500": "var(--colors-orange-500)", + "colors.orange.600": "var(--colors-orange-600)", + "colors.orange.700": "var(--colors-orange-700)", + "colors.orange.800": "var(--colors-orange-800)", + "colors.orange.900": "var(--colors-orange-900)", + "colors.orange.950": "var(--colors-orange-950)", + "colors.red.50": "var(--colors-red-50)", + "colors.red.100": "var(--colors-red-100)", + "colors.red.200": "var(--colors-red-200)", + "colors.red.300": "var(--colors-red-300)", + "colors.red.400": "var(--colors-red-400)", + "colors.red.500": "var(--colors-red-500)", + "colors.red.600": "var(--colors-red-600)", + "colors.red.700": "var(--colors-red-700)", + "colors.red.800": "var(--colors-red-800)", + "colors.red.900": "var(--colors-red-900)", + "colors.red.950": "var(--colors-red-950)", + "colors.neutral.50": "var(--colors-neutral-50)", + "colors.neutral.100": "var(--colors-neutral-100)", + "colors.neutral.200": "var(--colors-neutral-200)", + "colors.neutral.300": "var(--colors-neutral-300)", + "colors.neutral.400": "var(--colors-neutral-400)", + "colors.neutral.500": "var(--colors-neutral-500)", + "colors.neutral.600": "var(--colors-neutral-600)", + "colors.neutral.700": "var(--colors-neutral-700)", + "colors.neutral.800": "var(--colors-neutral-800)", + "colors.neutral.900": "var(--colors-neutral-900)", + "colors.neutral.950": "var(--colors-neutral-950)", + "colors.stone.50": "var(--colors-stone-50)", + "colors.stone.100": "var(--colors-stone-100)", + "colors.stone.200": "var(--colors-stone-200)", + "colors.stone.300": "var(--colors-stone-300)", + "colors.stone.400": "var(--colors-stone-400)", + "colors.stone.500": "var(--colors-stone-500)", + "colors.stone.600": "var(--colors-stone-600)", + "colors.stone.700": "var(--colors-stone-700)", + "colors.stone.800": "var(--colors-stone-800)", + "colors.stone.900": "var(--colors-stone-900)", + "colors.stone.950": "var(--colors-stone-950)", + "colors.zinc.50": "var(--colors-zinc-50)", + "colors.zinc.100": "var(--colors-zinc-100)", + "colors.zinc.200": "var(--colors-zinc-200)", + "colors.zinc.300": "var(--colors-zinc-300)", + "colors.zinc.400": "var(--colors-zinc-400)", + "colors.zinc.500": "var(--colors-zinc-500)", + "colors.zinc.600": "var(--colors-zinc-600)", + "colors.zinc.700": "var(--colors-zinc-700)", + "colors.zinc.800": "var(--colors-zinc-800)", + "colors.zinc.900": "var(--colors-zinc-900)", + "colors.zinc.950": "var(--colors-zinc-950)", + "colors.gray.50": "var(--colors-gray-50)", + "colors.gray.100": "var(--colors-gray-100)", + "colors.gray.200": "var(--colors-gray-200)", + "colors.gray.300": "var(--colors-gray-300)", + "colors.gray.400": "var(--colors-gray-400)", + "colors.gray.500": "var(--colors-gray-500)", + "colors.gray.600": "var(--colors-gray-600)", + "colors.gray.700": "var(--colors-gray-700)", + "colors.gray.800": "var(--colors-gray-800)", + "colors.gray.900": "var(--colors-gray-900)", + "colors.gray.950": "var(--colors-gray-950)", + "colors.slate.50": "var(--colors-slate-50)", + "colors.slate.100": "var(--colors-slate-100)", + "colors.slate.200": "var(--colors-slate-200)", + "colors.slate.300": "var(--colors-slate-300)", + "colors.slate.400": "var(--colors-slate-400)", + "colors.slate.500": "var(--colors-slate-500)", + "colors.slate.600": "var(--colors-slate-600)", + "colors.slate.700": "var(--colors-slate-700)", + "colors.slate.800": "var(--colors-slate-800)", + "colors.slate.900": "var(--colors-slate-900)", + "colors.slate.950": "var(--colors-slate-950)", + "colors.deep.test.yam": "var(--colors-deep-test-yam)", + "colors.deep.test.pool.poller": "var(--colors-deep-test-pool-poller)", + "colors.deep.test.pool.tall": "var(--colors-deep-test-pool-tall)", + "blurs.xs": "var(--blurs-xs)", + "blurs.sm": "var(--blurs-sm)", + "blurs.md": "var(--blurs-md)", + "blurs.lg": "var(--blurs-lg)", + "blurs.xl": "var(--blurs-xl)", + "blurs.2xl": "var(--blurs-2xl)", + "blurs.3xl": "var(--blurs-3xl)", + "spacing.0": "var(--spacing-0)", + "spacing.1": "var(--spacing-1)", + "spacing.2": "var(--spacing-2)", + "spacing.3": "var(--spacing-3)", + "spacing.4": "var(--spacing-4)", + "spacing.5": "var(--spacing-5)", + "spacing.6": "var(--spacing-6)", + "spacing.7": "var(--spacing-7)", + "spacing.8": "var(--spacing-8)", + "spacing.9": "var(--spacing-9)", + "spacing.10": "var(--spacing-10)", + "spacing.11": "var(--spacing-11)", + "spacing.12": "var(--spacing-12)", + "spacing.14": "var(--spacing-14)", + "spacing.16": "var(--spacing-16)", + "spacing.20": "var(--spacing-20)", + "spacing.24": "var(--spacing-24)", + "spacing.28": "var(--spacing-28)", + "spacing.32": "var(--spacing-32)", + "spacing.36": "var(--spacing-36)", + "spacing.40": "var(--spacing-40)", + "spacing.44": "var(--spacing-44)", + "spacing.48": "var(--spacing-48)", + "spacing.52": "var(--spacing-52)", + "spacing.56": "var(--spacing-56)", + "spacing.60": "var(--spacing-60)", + "spacing.64": "var(--spacing-64)", + "spacing.72": "var(--spacing-72)", + "spacing.80": "var(--spacing-80)", + "spacing.96": "var(--spacing-96)", + "spacing.0.5": "var(--spacing-0\\.5)", + "spacing.1.5": "var(--spacing-1\\.5)", + "spacing.2.5": "var(--spacing-2\\.5)", + "spacing.3.5": "var(--spacing-3\\.5)", + "spacing.4.5": "var(--spacing-4\\.5)", + "spacing.5.5": "var(--spacing-5\\.5)", + "sizes.0": "var(--sizes-0)", + "sizes.1": "var(--sizes-1)", + "sizes.2": "var(--sizes-2)", + "sizes.3": "var(--sizes-3)", + "sizes.4": "var(--sizes-4)", + "sizes.5": "var(--sizes-5)", + "sizes.6": "var(--sizes-6)", + "sizes.7": "var(--sizes-7)", + "sizes.8": "var(--sizes-8)", + "sizes.9": "var(--sizes-9)", + "sizes.10": "var(--sizes-10)", + "sizes.11": "var(--sizes-11)", + "sizes.12": "var(--sizes-12)", + "sizes.14": "var(--sizes-14)", + "sizes.16": "var(--sizes-16)", + "sizes.20": "var(--sizes-20)", + "sizes.24": "var(--sizes-24)", + "sizes.28": "var(--sizes-28)", + "sizes.32": "var(--sizes-32)", + "sizes.36": "var(--sizes-36)", + "sizes.40": "var(--sizes-40)", + "sizes.44": "var(--sizes-44)", + "sizes.48": "var(--sizes-48)", + "sizes.52": "var(--sizes-52)", + "sizes.56": "var(--sizes-56)", + "sizes.60": "var(--sizes-60)", + "sizes.64": "var(--sizes-64)", + "sizes.72": "var(--sizes-72)", + "sizes.80": "var(--sizes-80)", + "sizes.96": "var(--sizes-96)", + "sizes.0.5": "var(--sizes-0\\.5)", + "sizes.1.5": "var(--sizes-1\\.5)", + "sizes.2.5": "var(--sizes-2\\.5)", + "sizes.3.5": "var(--sizes-3\\.5)", + "sizes.4.5": "var(--sizes-4\\.5)", + "sizes.5.5": "var(--sizes-5\\.5)", + "sizes.xs": "var(--sizes-xs)", + "sizes.sm": "var(--sizes-sm)", + "sizes.md": "var(--sizes-md)", + "sizes.lg": "var(--sizes-lg)", + "sizes.xl": "var(--sizes-xl)", + "sizes.2xl": "var(--sizes-2xl)", + "sizes.3xl": "var(--sizes-3xl)", + "sizes.4xl": "var(--sizes-4xl)", + "sizes.5xl": "var(--sizes-5xl)", + "sizes.6xl": "var(--sizes-6xl)", + "sizes.7xl": "var(--sizes-7xl)", + "sizes.8xl": "var(--sizes-8xl)", + "sizes.prose": "var(--sizes-prose)", + "sizes.full": "var(--sizes-full)", + "sizes.min": "var(--sizes-min)", + "sizes.max": "var(--sizes-max)", + "sizes.fit": "var(--sizes-fit)", + "sizes.breakpoint-sm": "var(--sizes-breakpoint-sm)", + "sizes.breakpoint-md": "var(--sizes-breakpoint-md)", + "sizes.breakpoint-lg": "var(--sizes-breakpoint-lg)", + "sizes.breakpoint-xl": "var(--sizes-breakpoint-xl)", + "sizes.breakpoint-2xl": "var(--sizes-breakpoint-2xl)", + "animations.spin": "var(--animations-spin)", + "animations.ping": "var(--animations-ping)", + "animations.pulse": "var(--animations-pulse)", + "animations.bounce": "var(--animations-bounce)", + "breakpoints.sm": "var(--breakpoints-sm)", + "breakpoints.md": "var(--breakpoints-md)", + "breakpoints.lg": "var(--breakpoints-lg)", + "breakpoints.xl": "var(--breakpoints-xl)", + "breakpoints.2xl": "var(--breakpoints-2xl)", + "colors.primary": "var(--colors-primary)", + "colors.secondary": "var(--colors-secondary)", + "colors.complex": "var(--colors-complex)", + "colors.button.thick": "var(--colors-button-thick)", + "colors.button.card.body": "var(--colors-button-card-body)", + "colors.button.card.heading": "var(--colors-button-card-heading)", + "spacing.gutter": "var(--spacing-gutter)", + "spacing.-1": "calc(var(--spacing-1) * -1)", + "spacing.-2": "calc(var(--spacing-2) * -1)", + "spacing.-3": "calc(var(--spacing-3) * -1)", + "spacing.-4": "calc(var(--spacing-4) * -1)", + "spacing.-5": "calc(var(--spacing-5) * -1)", + "spacing.-6": "calc(var(--spacing-6) * -1)", + "spacing.-7": "calc(var(--spacing-7) * -1)", + "spacing.-8": "calc(var(--spacing-8) * -1)", + "spacing.-9": "calc(var(--spacing-9) * -1)", + "spacing.-10": "calc(var(--spacing-10) * -1)", + "spacing.-11": "calc(var(--spacing-11) * -1)", + "spacing.-12": "calc(var(--spacing-12) * -1)", + "spacing.-14": "calc(var(--spacing-14) * -1)", + "spacing.-16": "calc(var(--spacing-16) * -1)", + "spacing.-20": "calc(var(--spacing-20) * -1)", + "spacing.-24": "calc(var(--spacing-24) * -1)", + "spacing.-28": "calc(var(--spacing-28) * -1)", + "spacing.-32": "calc(var(--spacing-32) * -1)", + "spacing.-36": "calc(var(--spacing-36) * -1)", + "spacing.-40": "calc(var(--spacing-40) * -1)", + "spacing.-44": "calc(var(--spacing-44) * -1)", + "spacing.-48": "calc(var(--spacing-48) * -1)", + "spacing.-52": "calc(var(--spacing-52) * -1)", + "spacing.-56": "calc(var(--spacing-56) * -1)", + "spacing.-60": "calc(var(--spacing-60) * -1)", + "spacing.-64": "calc(var(--spacing-64) * -1)", + "spacing.-72": "calc(var(--spacing-72) * -1)", + "spacing.-80": "calc(var(--spacing-80) * -1)", + "spacing.-96": "calc(var(--spacing-96) * -1)", + "spacing.-0.5": "calc(var(--spacing-0\\.5) * -1)", + "spacing.-1.5": "calc(var(--spacing-1\\.5) * -1)", + "spacing.-2.5": "calc(var(--spacing-2\\.5) * -1)", + "spacing.-3.5": "calc(var(--spacing-3\\.5) * -1)", + "spacing.-4.5": "calc(var(--spacing-4\\.5) * -1)", + "spacing.-5.5": "calc(var(--spacing-5\\.5) * -1)", + "spacing.-gutter": "calc(var(--spacing-gutter) * -1)", + "colors.surface": "var(--colors-surface)", + "colors.colorPalette": "var(--colors-color-palette)", + "colors.colorPalette.50": "var(--colors-color-palette-50)", + "colors.colorPalette.100": "var(--colors-color-palette-100)", + "colors.colorPalette.200": "var(--colors-color-palette-200)", + "colors.colorPalette.300": "var(--colors-color-palette-300)", + "colors.colorPalette.400": "var(--colors-color-palette-400)", + "colors.colorPalette.500": "var(--colors-color-palette-500)", + "colors.colorPalette.600": "var(--colors-color-palette-600)", + "colors.colorPalette.700": "var(--colors-color-palette-700)", + "colors.colorPalette.800": "var(--colors-color-palette-800)", + "colors.colorPalette.900": "var(--colors-color-palette-900)", + "colors.colorPalette.950": "var(--colors-color-palette-950)", + "colors.colorPalette.test.yam": "var(--colors-color-palette-test-yam)", + "colors.colorPalette.yam": "var(--colors-color-palette-yam)", + "colors.colorPalette.test.pool.poller": "var(--colors-color-palette-test-pool-poller)", + "colors.colorPalette.pool.poller": "var(--colors-color-palette-pool-poller)", + "colors.colorPalette.poller": "var(--colors-color-palette-poller)", + "colors.colorPalette.test.pool.tall": "var(--colors-color-palette-test-pool-tall)", + "colors.colorPalette.pool.tall": "var(--colors-color-palette-pool-tall)", + "colors.colorPalette.tall": "var(--colors-color-palette-tall)", + "colors.colorPalette.thick": "var(--colors-color-palette-thick)", + "colors.colorPalette.card.body": "var(--colors-color-palette-card-body)", + "colors.colorPalette.body": "var(--colors-color-palette-body)", + "colors.colorPalette.card.heading": "var(--colors-color-palette-card-heading)", + "colors.colorPalette.heading": "var(--colors-color-palette-heading)" + }, + "values": { + "aspectRatios.square": "1 / 1", + "aspectRatios.landscape": "4 / 3", + "aspectRatios.portrait": "3 / 4", + "aspectRatios.wide": "16 / 9", + "aspectRatios.ultrawide": "18 / 5", + "aspectRatios.golden": "1.618 / 1", + "borders.none": "none", + "easings.default": "cubic-bezier(0.4, 0, 0.2, 1)", + "easings.linear": "linear", + "easings.in": "cubic-bezier(0.4, 0, 1, 1)", + "easings.out": "cubic-bezier(0, 0, 0.2, 1)", + "easings.in-out": "cubic-bezier(0.4, 0, 0.2, 1)", + "durations.fastest": "50ms", + "durations.faster": "100ms", + "durations.fast": "150ms", + "durations.normal": "200ms", + "durations.slow": "300ms", + "durations.slower": "400ms", + "durations.slowest": "500ms", + "radii.xs": "0.125rem", + "radii.sm": "0.25rem", + "radii.md": "0.375rem", + "radii.lg": "0.5rem", + "radii.xl": "0.75rem", + "radii.2xl": "1rem", + "radii.3xl": "1.5rem", + "radii.4xl": "2rem", + "radii.full": "9999px", + "fontWeights.thin": "100", + "fontWeights.extralight": "200", + "fontWeights.light": "300", + "fontWeights.normal": "400", + "fontWeights.medium": "500", + "fontWeights.semibold": "600", + "fontWeights.bold": "700", + "fontWeights.extrabold": "800", + "fontWeights.black": "900", + "lineHeights.none": "1", + "lineHeights.tight": "1.25", + "lineHeights.snug": "1.375", + "lineHeights.normal": "1.5", + "lineHeights.relaxed": "1.625", + "lineHeights.loose": "2", + "fonts.sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", + "fonts.serif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "fonts.mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", + "letterSpacings.tighter": "-0.05em", + "letterSpacings.tight": "-0.025em", + "letterSpacings.normal": "0em", + "letterSpacings.wide": "0.025em", + "letterSpacings.wider": "0.05em", + "letterSpacings.widest": "0.1em", + "fontSizes.2xs": "0.5rem", + "fontSizes.xs": "0.75rem", + "fontSizes.sm": "0.875rem", + "fontSizes.md": "1rem", + "fontSizes.lg": "1.125rem", + "fontSizes.xl": "1.25rem", + "fontSizes.2xl": "1.5rem", + "fontSizes.3xl": "1.875rem", + "fontSizes.4xl": "2.25rem", + "fontSizes.5xl": "3rem", + "fontSizes.6xl": "3.75rem", + "fontSizes.7xl": "4.5rem", + "fontSizes.8xl": "6rem", + "fontSizes.9xl": "8rem", + "shadows.2xs": "0 1px rgb(0 0 0 / 0.05)", + "shadows.xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)", + "shadows.sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", + "shadows.md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", + "shadows.lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", + "shadows.xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", + "shadows.2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)", + "shadows.inset-2xs": "inset 0 1px rgb(0 0 0 / 0.05)", + "shadows.inset-xs": "inset 0 1px 1px rgb(0 0 0 / 0.05)", + "shadows.inset-sm": "inset 0 2px 4px rgb(0 0 0 / 0.05)", + "colors.current": "currentColor", + "colors.black": "#000", + "colors.white": "#fff", + "colors.transparent": "rgb(0 0 0 / 0)", + "colors.rose.50": "#fff1f2", + "colors.rose.100": "#ffe4e6", + "colors.rose.200": "#fecdd3", + "colors.rose.300": "#fda4af", + "colors.rose.400": "#fb7185", + "colors.rose.500": "#f43f5e", + "colors.rose.600": "#e11d48", + "colors.rose.700": "#be123c", + "colors.rose.800": "#9f1239", + "colors.rose.900": "#881337", + "colors.rose.950": "#4c0519", + "colors.pink.50": "#fdf2f8", + "colors.pink.100": "#fce7f3", + "colors.pink.200": "#fbcfe8", + "colors.pink.300": "#f9a8d4", + "colors.pink.400": "#f472b6", + "colors.pink.500": "#ec4899", + "colors.pink.600": "#db2777", + "colors.pink.700": "#be185d", + "colors.pink.800": "#9d174d", + "colors.pink.900": "#831843", + "colors.pink.950": "#500724", + "colors.fuchsia.50": "#fdf4ff", + "colors.fuchsia.100": "#fae8ff", + "colors.fuchsia.200": "#f5d0fe", + "colors.fuchsia.300": "#f0abfc", + "colors.fuchsia.400": "#e879f9", + "colors.fuchsia.500": "#d946ef", + "colors.fuchsia.600": "#c026d3", + "colors.fuchsia.700": "#a21caf", + "colors.fuchsia.800": "#86198f", + "colors.fuchsia.900": "#701a75", + "colors.fuchsia.950": "#4a044e", + "colors.purple.50": "#faf5ff", + "colors.purple.100": "#f3e8ff", + "colors.purple.200": "#e9d5ff", + "colors.purple.300": "#d8b4fe", + "colors.purple.400": "#c084fc", + "colors.purple.500": "#a855f7", + "colors.purple.600": "#9333ea", + "colors.purple.700": "#7e22ce", + "colors.purple.800": "#6b21a8", + "colors.purple.900": "#581c87", + "colors.purple.950": "#3b0764", + "colors.violet.50": "#f5f3ff", + "colors.violet.100": "#ede9fe", + "colors.violet.200": "#ddd6fe", + "colors.violet.300": "#c4b5fd", + "colors.violet.400": "#a78bfa", + "colors.violet.500": "#8b5cf6", + "colors.violet.600": "#7c3aed", + "colors.violet.700": "#6d28d9", + "colors.violet.800": "#5b21b6", + "colors.violet.900": "#4c1d95", + "colors.violet.950": "#2e1065", + "colors.indigo.50": "#eef2ff", + "colors.indigo.100": "#e0e7ff", + "colors.indigo.200": "#c7d2fe", + "colors.indigo.300": "#a5b4fc", + "colors.indigo.400": "#818cf8", + "colors.indigo.500": "#6366f1", + "colors.indigo.600": "#4f46e5", + "colors.indigo.700": "#4338ca", + "colors.indigo.800": "#3730a3", + "colors.indigo.900": "#312e81", + "colors.indigo.950": "#1e1b4b", + "colors.blue.50": "#eff6ff", + "colors.blue.100": "#dbeafe", + "colors.blue.200": "#bfdbfe", + "colors.blue.300": "#93c5fd", + "colors.blue.400": "#60a5fa", + "colors.blue.500": "#3b82f6", + "colors.blue.600": "#2563eb", + "colors.blue.700": "#1d4ed8", + "colors.blue.800": "#1e40af", + "colors.blue.900": "#1e3a8a", + "colors.blue.950": "#172554", + "colors.sky.50": "#f0f9ff", + "colors.sky.100": "#e0f2fe", + "colors.sky.200": "#bae6fd", + "colors.sky.300": "#7dd3fc", + "colors.sky.400": "#38bdf8", + "colors.sky.500": "#0ea5e9", + "colors.sky.600": "#0284c7", + "colors.sky.700": "#0369a1", + "colors.sky.800": "#075985", + "colors.sky.900": "#0c4a6e", + "colors.sky.950": "#082f49", + "colors.cyan.50": "#ecfeff", + "colors.cyan.100": "#cffafe", + "colors.cyan.200": "#a5f3fc", + "colors.cyan.300": "#67e8f9", + "colors.cyan.400": "#22d3ee", + "colors.cyan.500": "#06b6d4", + "colors.cyan.600": "#0891b2", + "colors.cyan.700": "#0e7490", + "colors.cyan.800": "#155e75", + "colors.cyan.900": "#164e63", + "colors.cyan.950": "#083344", + "colors.teal.50": "#f0fdfa", + "colors.teal.100": "#ccfbf1", + "colors.teal.200": "#99f6e4", + "colors.teal.300": "#5eead4", + "colors.teal.400": "#2dd4bf", + "colors.teal.500": "#14b8a6", + "colors.teal.600": "#0d9488", + "colors.teal.700": "#0f766e", + "colors.teal.800": "#115e59", + "colors.teal.900": "#134e4a", + "colors.teal.950": "#042f2e", + "colors.emerald.50": "#ecfdf5", + "colors.emerald.100": "#d1fae5", + "colors.emerald.200": "#a7f3d0", + "colors.emerald.300": "#6ee7b7", + "colors.emerald.400": "#34d399", + "colors.emerald.500": "#10b981", + "colors.emerald.600": "#059669", + "colors.emerald.700": "#047857", + "colors.emerald.800": "#065f46", + "colors.emerald.900": "#064e3b", + "colors.emerald.950": "#022c22", + "colors.green.50": "#f0fdf4", + "colors.green.100": "#dcfce7", + "colors.green.200": "#bbf7d0", + "colors.green.300": "#86efac", + "colors.green.400": "#4ade80", + "colors.green.500": "#22c55e", + "colors.green.600": "#16a34a", + "colors.green.700": "#15803d", + "colors.green.800": "#166534", + "colors.green.900": "#14532d", + "colors.green.950": "#052e16", + "colors.lime.50": "#f7fee7", + "colors.lime.100": "#ecfccb", + "colors.lime.200": "#d9f99d", + "colors.lime.300": "#bef264", + "colors.lime.400": "#a3e635", + "colors.lime.500": "#84cc16", + "colors.lime.600": "#65a30d", + "colors.lime.700": "#4d7c0f", + "colors.lime.800": "#3f6212", + "colors.lime.900": "#365314", + "colors.lime.950": "#1a2e05", + "colors.yellow.50": "#fefce8", + "colors.yellow.100": "#fef9c3", + "colors.yellow.200": "#fef08a", + "colors.yellow.300": "#fde047", + "colors.yellow.400": "#facc15", + "colors.yellow.500": "#eab308", + "colors.yellow.600": "#ca8a04", + "colors.yellow.700": "#a16207", + "colors.yellow.800": "#854d0e", + "colors.yellow.900": "#713f12", + "colors.yellow.950": "#422006", + "colors.amber.50": "#fffbeb", + "colors.amber.100": "#fef3c7", + "colors.amber.200": "#fde68a", + "colors.amber.300": "#fcd34d", + "colors.amber.400": "#fbbf24", + "colors.amber.500": "#f59e0b", + "colors.amber.600": "#d97706", + "colors.amber.700": "#b45309", + "colors.amber.800": "#92400e", + "colors.amber.900": "#78350f", + "colors.amber.950": "#451a03", + "colors.orange.50": "#fff7ed", + "colors.orange.100": "#ffedd5", + "colors.orange.200": "#fed7aa", + "colors.orange.300": "#fdba74", + "colors.orange.400": "#fb923c", + "colors.orange.500": "#f97316", + "colors.orange.600": "#ea580c", + "colors.orange.700": "#c2410c", + "colors.orange.800": "#9a3412", + "colors.orange.900": "#7c2d12", + "colors.orange.950": "#431407", + "colors.red.50": "#fef2f2", + "colors.red.100": "#fee2e2", + "colors.red.200": "#fecaca", + "colors.red.300": "#fca5a5", + "colors.red.400": "#f87171", + "colors.red.500": "#ef4444", + "colors.red.600": "#dc2626", + "colors.red.700": "#b91c1c", + "colors.red.800": "#991b1b", + "colors.red.900": "#7f1d1d", + "colors.red.950": "#450a0a", + "colors.neutral.50": "#fafafa", + "colors.neutral.100": "#f5f5f5", + "colors.neutral.200": "#e5e5e5", + "colors.neutral.300": "#d4d4d4", + "colors.neutral.400": "#a3a3a3", + "colors.neutral.500": "#737373", + "colors.neutral.600": "#525252", + "colors.neutral.700": "#404040", + "colors.neutral.800": "#262626", + "colors.neutral.900": "#171717", + "colors.neutral.950": "#0a0a0a", + "colors.stone.50": "#fafaf9", + "colors.stone.100": "#f5f5f4", + "colors.stone.200": "#e7e5e4", + "colors.stone.300": "#d6d3d1", + "colors.stone.400": "#a8a29e", + "colors.stone.500": "#78716c", + "colors.stone.600": "#57534e", + "colors.stone.700": "#44403c", + "colors.stone.800": "#292524", + "colors.stone.900": "#1c1917", + "colors.stone.950": "#0c0a09", + "colors.zinc.50": "#fafafa", + "colors.zinc.100": "#f4f4f5", + "colors.zinc.200": "#e4e4e7", + "colors.zinc.300": "#d4d4d8", + "colors.zinc.400": "#a1a1aa", + "colors.zinc.500": "#71717a", + "colors.zinc.600": "#52525b", + "colors.zinc.700": "#3f3f46", + "colors.zinc.800": "#27272a", + "colors.zinc.900": "#18181b", + "colors.zinc.950": "#09090b", + "colors.gray.50": "#f9fafb", + "colors.gray.100": "#f3f4f6", + "colors.gray.200": "#e5e7eb", + "colors.gray.300": "#d1d5db", + "colors.gray.400": "#9ca3af", + "colors.gray.500": "#6b7280", + "colors.gray.600": "#4b5563", + "colors.gray.700": "#374151", + "colors.gray.800": "#1f2937", + "colors.gray.900": "#111827", + "colors.gray.950": "#030712", + "colors.slate.50": "#f8fafc", + "colors.slate.100": "#f1f5f9", + "colors.slate.200": "#e2e8f0", + "colors.slate.300": "#cbd5e1", + "colors.slate.400": "#94a3b8", + "colors.slate.500": "#64748b", + "colors.slate.600": "#475569", + "colors.slate.700": "#334155", + "colors.slate.800": "#1e293b", + "colors.slate.900": "#0f172a", + "colors.slate.950": "#020617", + "colors.deep.test.yam": "%555", + "colors.deep.test.pool.poller": "#fff", + "colors.deep.test.pool.tall": "$dfdf", + "blurs.xs": "4px", + "blurs.sm": "8px", + "blurs.md": "12px", + "blurs.lg": "16px", + "blurs.xl": "24px", + "blurs.2xl": "40px", + "blurs.3xl": "64px", + "spacing.0": "0rem", + "spacing.1": "0.25rem", + "spacing.2": "0.5rem", + "spacing.3": "0.75rem", + "spacing.4": "1rem", + "spacing.5": "1.25rem", + "spacing.6": "1.5rem", + "spacing.7": "1.75rem", + "spacing.8": "2rem", + "spacing.9": "2.25rem", + "spacing.10": "2.5rem", + "spacing.11": "2.75rem", + "spacing.12": "3rem", + "spacing.14": "3.5rem", + "spacing.16": "4rem", + "spacing.20": "5rem", + "spacing.24": "6rem", + "spacing.28": "7rem", + "spacing.32": "8rem", + "spacing.36": "9rem", + "spacing.40": "10rem", + "spacing.44": "11rem", + "spacing.48": "12rem", + "spacing.52": "13rem", + "spacing.56": "14rem", + "spacing.60": "15rem", + "spacing.64": "16rem", + "spacing.72": "18rem", + "spacing.80": "20rem", + "spacing.96": "24rem", + "spacing.0.5": "0.125rem", + "spacing.1.5": "0.375rem", + "spacing.2.5": "0.625rem", + "spacing.3.5": "0.875rem", + "spacing.4.5": "1.125rem", + "spacing.5.5": "1.375rem", + "sizes.0": "0rem", + "sizes.1": "0.25rem", + "sizes.2": "0.5rem", + "sizes.3": "0.75rem", + "sizes.4": "1rem", + "sizes.5": "1.25rem", + "sizes.6": "1.5rem", + "sizes.7": "1.75rem", + "sizes.8": "2rem", + "sizes.9": "2.25rem", + "sizes.10": "2.5rem", + "sizes.11": "2.75rem", + "sizes.12": "3rem", + "sizes.14": "3.5rem", + "sizes.16": "4rem", + "sizes.20": "5rem", + "sizes.24": "6rem", + "sizes.28": "7rem", + "sizes.32": "8rem", + "sizes.36": "9rem", + "sizes.40": "10rem", + "sizes.44": "11rem", + "sizes.48": "12rem", + "sizes.52": "13rem", + "sizes.56": "14rem", + "sizes.60": "15rem", + "sizes.64": "16rem", + "sizes.72": "18rem", + "sizes.80": "20rem", + "sizes.96": "24rem", + "sizes.0.5": "0.125rem", + "sizes.1.5": "0.375rem", + "sizes.2.5": "0.625rem", + "sizes.3.5": "0.875rem", + "sizes.4.5": "1.125rem", + "sizes.5.5": "1.375rem", + "sizes.xs": "20rem", + "sizes.sm": "24rem", + "sizes.md": "28rem", + "sizes.lg": "32rem", + "sizes.xl": "36rem", + "sizes.2xl": "42rem", + "sizes.3xl": "48rem", + "sizes.4xl": "56rem", + "sizes.5xl": "64rem", + "sizes.6xl": "72rem", + "sizes.7xl": "80rem", + "sizes.8xl": "90rem", + "sizes.prose": "65ch", + "sizes.full": "100%", + "sizes.min": "min-content", + "sizes.max": "max-content", + "sizes.fit": "fit-content", + "sizes.breakpoint-sm": "640px", + "sizes.breakpoint-md": "768px", + "sizes.breakpoint-lg": "1024px", + "sizes.breakpoint-xl": "1280px", + "sizes.breakpoint-2xl": "1536px", + "animations.spin": "spin 1s linear infinite", + "animations.ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", + "animations.pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", + "animations.bounce": "bounce 1s infinite", + "breakpoints.sm": "640px", + "breakpoints.md": "768px", + "breakpoints.lg": "1024px", + "breakpoints.xl": "1280px", + "breakpoints.2xl": "1536px", + "colors.primary": "var(--colors-red-400)", + "colors.secondary": "var(--colors-red-700)", + "colors.complex": "var(--colors-red-700)", + "colors.surface": "#p-d", + "colors.button.thick": "#000", + "colors.button.card.body": "#000", + "colors.button.card.heading": "#000", + "spacing.gutter": "var(--spacing-5)", + "spacing.-1": "calc(var(--spacing-1) * -1)", + "spacing.-2": "calc(var(--spacing-2) * -1)", + "spacing.-3": "calc(var(--spacing-3) * -1)", + "spacing.-4": "calc(var(--spacing-4) * -1)", + "spacing.-5": "calc(var(--spacing-5) * -1)", + "spacing.-6": "calc(var(--spacing-6) * -1)", + "spacing.-7": "calc(var(--spacing-7) * -1)", + "spacing.-8": "calc(var(--spacing-8) * -1)", + "spacing.-9": "calc(var(--spacing-9) * -1)", + "spacing.-10": "calc(var(--spacing-10) * -1)", + "spacing.-11": "calc(var(--spacing-11) * -1)", + "spacing.-12": "calc(var(--spacing-12) * -1)", + "spacing.-14": "calc(var(--spacing-14) * -1)", + "spacing.-16": "calc(var(--spacing-16) * -1)", + "spacing.-20": "calc(var(--spacing-20) * -1)", + "spacing.-24": "calc(var(--spacing-24) * -1)", + "spacing.-28": "calc(var(--spacing-28) * -1)", + "spacing.-32": "calc(var(--spacing-32) * -1)", + "spacing.-36": "calc(var(--spacing-36) * -1)", + "spacing.-40": "calc(var(--spacing-40) * -1)", + "spacing.-44": "calc(var(--spacing-44) * -1)", + "spacing.-48": "calc(var(--spacing-48) * -1)", + "spacing.-52": "calc(var(--spacing-52) * -1)", + "spacing.-56": "calc(var(--spacing-56) * -1)", + "spacing.-60": "calc(var(--spacing-60) * -1)", + "spacing.-64": "calc(var(--spacing-64) * -1)", + "spacing.-72": "calc(var(--spacing-72) * -1)", + "spacing.-80": "calc(var(--spacing-80) * -1)", + "spacing.-96": "calc(var(--spacing-96) * -1)", + "spacing.-0.5": "calc(var(--spacing-0\\.5) * -1)", + "spacing.-1.5": "calc(var(--spacing-1\\.5) * -1)", + "spacing.-2.5": "calc(var(--spacing-2\\.5) * -1)", + "spacing.-3.5": "calc(var(--spacing-3\\.5) * -1)", + "spacing.-4.5": "calc(var(--spacing-4\\.5) * -1)", + "spacing.-5.5": "calc(var(--spacing-5\\.5) * -1)", + "spacing.-gutter": "var(--spacing-5)", + "colors.colorPalette": "colors.colorPalette", + "colors.colorPalette.50": "colors.colorPalette.50", + "colors.colorPalette.100": "colors.colorPalette.100", + "colors.colorPalette.200": "colors.colorPalette.200", + "colors.colorPalette.300": "colors.colorPalette.300", + "colors.colorPalette.400": "colors.colorPalette.400", + "colors.colorPalette.500": "colors.colorPalette.500", + "colors.colorPalette.600": "colors.colorPalette.600", + "colors.colorPalette.700": "colors.colorPalette.700", + "colors.colorPalette.800": "colors.colorPalette.800", + "colors.colorPalette.900": "colors.colorPalette.900", + "colors.colorPalette.950": "colors.colorPalette.950", + "colors.colorPalette.test.yam": "colors.colorPalette.test.yam", + "colors.colorPalette.yam": "colors.colorPalette.yam", + "colors.colorPalette.test.pool.poller": "colors.colorPalette.test.pool.poller", + "colors.colorPalette.pool.poller": "colors.colorPalette.pool.poller", + "colors.colorPalette.poller": "colors.colorPalette.poller", + "colors.colorPalette.test.pool.tall": "colors.colorPalette.test.pool.tall", + "colors.colorPalette.pool.tall": "colors.colorPalette.pool.tall", + "colors.colorPalette.tall": "colors.colorPalette.tall", + "colors.colorPalette.thick": "colors.colorPalette.thick", + "colors.colorPalette.card.body": "colors.colorPalette.card.body", + "colors.colorPalette.body": "colors.colorPalette.body", + "colors.colorPalette.card.heading": "colors.colorPalette.card.heading", + "colors.colorPalette.heading": "colors.colorPalette.heading" + }, + "categories": { + "aspectRatios": { + "square": "var(--aspect-ratios-square)", + "landscape": "var(--aspect-ratios-landscape)", + "portrait": "var(--aspect-ratios-portrait)", + "wide": "var(--aspect-ratios-wide)", + "ultrawide": "var(--aspect-ratios-ultrawide)", + "golden": "var(--aspect-ratios-golden)" + }, + "borders": { + "none": "var(--borders-none)" + }, + "easings": { + "default": "var(--easings-default)", + "linear": "var(--easings-linear)", + "in": "var(--easings-in)", + "out": "var(--easings-out)", + "in-out": "var(--easings-in-out)" + }, + "durations": { + "fastest": "var(--durations-fastest)", + "faster": "var(--durations-faster)", + "fast": "var(--durations-fast)", + "normal": "var(--durations-normal)", + "slow": "var(--durations-slow)", + "slower": "var(--durations-slower)", + "slowest": "var(--durations-slowest)" + }, + "radii": { + "xs": "var(--radii-xs)", + "sm": "var(--radii-sm)", + "md": "var(--radii-md)", + "lg": "var(--radii-lg)", + "xl": "var(--radii-xl)", + "2xl": "var(--radii-2xl)", + "3xl": "var(--radii-3xl)", + "4xl": "var(--radii-4xl)", + "full": "var(--radii-full)" + }, + "fontWeights": { + "thin": "var(--font-weights-thin)", + "extralight": "var(--font-weights-extralight)", + "light": "var(--font-weights-light)", + "normal": "var(--font-weights-normal)", + "medium": "var(--font-weights-medium)", + "semibold": "var(--font-weights-semibold)", + "bold": "var(--font-weights-bold)", + "extrabold": "var(--font-weights-extrabold)", + "black": "var(--font-weights-black)" + }, + "lineHeights": { + "none": "var(--line-heights-none)", + "tight": "var(--line-heights-tight)", + "snug": "var(--line-heights-snug)", + "normal": "var(--line-heights-normal)", + "relaxed": "var(--line-heights-relaxed)", + "loose": "var(--line-heights-loose)" + }, + "fonts": { + "sans": "var(--fonts-sans)", + "serif": "var(--fonts-serif)", + "mono": "var(--fonts-mono)" + }, + "letterSpacings": { + "tighter": "var(--letter-spacings-tighter)", + "tight": "var(--letter-spacings-tight)", + "normal": "var(--letter-spacings-normal)", + "wide": "var(--letter-spacings-wide)", + "wider": "var(--letter-spacings-wider)", + "widest": "var(--letter-spacings-widest)" + }, + "fontSizes": { + "2xs": "var(--font-sizes-2xs)", + "xs": "var(--font-sizes-xs)", + "sm": "var(--font-sizes-sm)", + "md": "var(--font-sizes-md)", + "lg": "var(--font-sizes-lg)", + "xl": "var(--font-sizes-xl)", + "2xl": "var(--font-sizes-2xl)", + "3xl": "var(--font-sizes-3xl)", + "4xl": "var(--font-sizes-4xl)", + "5xl": "var(--font-sizes-5xl)", + "6xl": "var(--font-sizes-6xl)", + "7xl": "var(--font-sizes-7xl)", + "8xl": "var(--font-sizes-8xl)", + "9xl": "var(--font-sizes-9xl)" + }, + "shadows": { + "2xs": "var(--shadows-2xs)", + "xs": "var(--shadows-xs)", + "sm": "var(--shadows-sm)", + "md": "var(--shadows-md)", + "lg": "var(--shadows-lg)", + "xl": "var(--shadows-xl)", + "2xl": "var(--shadows-2xl)", + "inset-2xs": "var(--shadows-inset-2xs)", + "inset-xs": "var(--shadows-inset-xs)", + "inset-sm": "var(--shadows-inset-sm)" + }, + "colors": { + "current": "var(--colors-current)", + "black": "var(--colors-black)", + "white": "var(--colors-white)", + "transparent": "var(--colors-transparent)", + "rose.50": "var(--colors-rose-50)", + "rose.100": "var(--colors-rose-100)", + "rose.200": "var(--colors-rose-200)", + "rose.300": "var(--colors-rose-300)", + "rose.400": "var(--colors-rose-400)", + "rose.500": "var(--colors-rose-500)", + "rose.600": "var(--colors-rose-600)", + "rose.700": "var(--colors-rose-700)", + "rose.800": "var(--colors-rose-800)", + "rose.900": "var(--colors-rose-900)", + "rose.950": "var(--colors-rose-950)", + "pink.50": "var(--colors-pink-50)", + "pink.100": "var(--colors-pink-100)", + "pink.200": "var(--colors-pink-200)", + "pink.300": "var(--colors-pink-300)", + "pink.400": "var(--colors-pink-400)", + "pink.500": "var(--colors-pink-500)", + "pink.600": "var(--colors-pink-600)", + "pink.700": "var(--colors-pink-700)", + "pink.800": "var(--colors-pink-800)", + "pink.900": "var(--colors-pink-900)", + "pink.950": "var(--colors-pink-950)", + "fuchsia.50": "var(--colors-fuchsia-50)", + "fuchsia.100": "var(--colors-fuchsia-100)", + "fuchsia.200": "var(--colors-fuchsia-200)", + "fuchsia.300": "var(--colors-fuchsia-300)", + "fuchsia.400": "var(--colors-fuchsia-400)", + "fuchsia.500": "var(--colors-fuchsia-500)", + "fuchsia.600": "var(--colors-fuchsia-600)", + "fuchsia.700": "var(--colors-fuchsia-700)", + "fuchsia.800": "var(--colors-fuchsia-800)", + "fuchsia.900": "var(--colors-fuchsia-900)", + "fuchsia.950": "var(--colors-fuchsia-950)", + "purple.50": "var(--colors-purple-50)", + "purple.100": "var(--colors-purple-100)", + "purple.200": "var(--colors-purple-200)", + "purple.300": "var(--colors-purple-300)", + "purple.400": "var(--colors-purple-400)", + "purple.500": "var(--colors-purple-500)", + "purple.600": "var(--colors-purple-600)", + "purple.700": "var(--colors-purple-700)", + "purple.800": "var(--colors-purple-800)", + "purple.900": "var(--colors-purple-900)", + "purple.950": "var(--colors-purple-950)", + "violet.50": "var(--colors-violet-50)", + "violet.100": "var(--colors-violet-100)", + "violet.200": "var(--colors-violet-200)", + "violet.300": "var(--colors-violet-300)", + "violet.400": "var(--colors-violet-400)", + "violet.500": "var(--colors-violet-500)", + "violet.600": "var(--colors-violet-600)", + "violet.700": "var(--colors-violet-700)", + "violet.800": "var(--colors-violet-800)", + "violet.900": "var(--colors-violet-900)", + "violet.950": "var(--colors-violet-950)", + "indigo.50": "var(--colors-indigo-50)", + "indigo.100": "var(--colors-indigo-100)", + "indigo.200": "var(--colors-indigo-200)", + "indigo.300": "var(--colors-indigo-300)", + "indigo.400": "var(--colors-indigo-400)", + "indigo.500": "var(--colors-indigo-500)", + "indigo.600": "var(--colors-indigo-600)", + "indigo.700": "var(--colors-indigo-700)", + "indigo.800": "var(--colors-indigo-800)", + "indigo.900": "var(--colors-indigo-900)", + "indigo.950": "var(--colors-indigo-950)", + "blue.50": "var(--colors-blue-50)", + "blue.100": "var(--colors-blue-100)", + "blue.200": "var(--colors-blue-200)", + "blue.300": "var(--colors-blue-300)", + "blue.400": "var(--colors-blue-400)", + "blue.500": "var(--colors-blue-500)", + "blue.600": "var(--colors-blue-600)", + "blue.700": "var(--colors-blue-700)", + "blue.800": "var(--colors-blue-800)", + "blue.900": "var(--colors-blue-900)", + "blue.950": "var(--colors-blue-950)", + "sky.50": "var(--colors-sky-50)", + "sky.100": "var(--colors-sky-100)", + "sky.200": "var(--colors-sky-200)", + "sky.300": "var(--colors-sky-300)", + "sky.400": "var(--colors-sky-400)", + "sky.500": "var(--colors-sky-500)", + "sky.600": "var(--colors-sky-600)", + "sky.700": "var(--colors-sky-700)", + "sky.800": "var(--colors-sky-800)", + "sky.900": "var(--colors-sky-900)", + "sky.950": "var(--colors-sky-950)", + "cyan.50": "var(--colors-cyan-50)", + "cyan.100": "var(--colors-cyan-100)", + "cyan.200": "var(--colors-cyan-200)", + "cyan.300": "var(--colors-cyan-300)", + "cyan.400": "var(--colors-cyan-400)", + "cyan.500": "var(--colors-cyan-500)", + "cyan.600": "var(--colors-cyan-600)", + "cyan.700": "var(--colors-cyan-700)", + "cyan.800": "var(--colors-cyan-800)", + "cyan.900": "var(--colors-cyan-900)", + "cyan.950": "var(--colors-cyan-950)", + "teal.50": "var(--colors-teal-50)", + "teal.100": "var(--colors-teal-100)", + "teal.200": "var(--colors-teal-200)", + "teal.300": "var(--colors-teal-300)", + "teal.400": "var(--colors-teal-400)", + "teal.500": "var(--colors-teal-500)", + "teal.600": "var(--colors-teal-600)", + "teal.700": "var(--colors-teal-700)", + "teal.800": "var(--colors-teal-800)", + "teal.900": "var(--colors-teal-900)", + "teal.950": "var(--colors-teal-950)", + "emerald.50": "var(--colors-emerald-50)", + "emerald.100": "var(--colors-emerald-100)", + "emerald.200": "var(--colors-emerald-200)", + "emerald.300": "var(--colors-emerald-300)", + "emerald.400": "var(--colors-emerald-400)", + "emerald.500": "var(--colors-emerald-500)", + "emerald.600": "var(--colors-emerald-600)", + "emerald.700": "var(--colors-emerald-700)", + "emerald.800": "var(--colors-emerald-800)", + "emerald.900": "var(--colors-emerald-900)", + "emerald.950": "var(--colors-emerald-950)", + "green.50": "var(--colors-green-50)", + "green.100": "var(--colors-green-100)", + "green.200": "var(--colors-green-200)", + "green.300": "var(--colors-green-300)", + "green.400": "var(--colors-green-400)", + "green.500": "var(--colors-green-500)", + "green.600": "var(--colors-green-600)", + "green.700": "var(--colors-green-700)", + "green.800": "var(--colors-green-800)", + "green.900": "var(--colors-green-900)", + "green.950": "var(--colors-green-950)", + "lime.50": "var(--colors-lime-50)", + "lime.100": "var(--colors-lime-100)", + "lime.200": "var(--colors-lime-200)", + "lime.300": "var(--colors-lime-300)", + "lime.400": "var(--colors-lime-400)", + "lime.500": "var(--colors-lime-500)", + "lime.600": "var(--colors-lime-600)", + "lime.700": "var(--colors-lime-700)", + "lime.800": "var(--colors-lime-800)", + "lime.900": "var(--colors-lime-900)", + "lime.950": "var(--colors-lime-950)", + "yellow.50": "var(--colors-yellow-50)", + "yellow.100": "var(--colors-yellow-100)", + "yellow.200": "var(--colors-yellow-200)", + "yellow.300": "var(--colors-yellow-300)", + "yellow.400": "var(--colors-yellow-400)", + "yellow.500": "var(--colors-yellow-500)", + "yellow.600": "var(--colors-yellow-600)", + "yellow.700": "var(--colors-yellow-700)", + "yellow.800": "var(--colors-yellow-800)", + "yellow.900": "var(--colors-yellow-900)", + "yellow.950": "var(--colors-yellow-950)", + "amber.50": "var(--colors-amber-50)", + "amber.100": "var(--colors-amber-100)", + "amber.200": "var(--colors-amber-200)", + "amber.300": "var(--colors-amber-300)", + "amber.400": "var(--colors-amber-400)", + "amber.500": "var(--colors-amber-500)", + "amber.600": "var(--colors-amber-600)", + "amber.700": "var(--colors-amber-700)", + "amber.800": "var(--colors-amber-800)", + "amber.900": "var(--colors-amber-900)", + "amber.950": "var(--colors-amber-950)", + "orange.50": "var(--colors-orange-50)", + "orange.100": "var(--colors-orange-100)", + "orange.200": "var(--colors-orange-200)", + "orange.300": "var(--colors-orange-300)", + "orange.400": "var(--colors-orange-400)", + "orange.500": "var(--colors-orange-500)", + "orange.600": "var(--colors-orange-600)", + "orange.700": "var(--colors-orange-700)", + "orange.800": "var(--colors-orange-800)", + "orange.900": "var(--colors-orange-900)", + "orange.950": "var(--colors-orange-950)", + "red.50": "var(--colors-red-50)", + "red.100": "var(--colors-red-100)", + "red.200": "var(--colors-red-200)", + "red.300": "var(--colors-red-300)", + "red.400": "var(--colors-red-400)", + "red.500": "var(--colors-red-500)", + "red.600": "var(--colors-red-600)", + "red.700": "var(--colors-red-700)", + "red.800": "var(--colors-red-800)", + "red.900": "var(--colors-red-900)", + "red.950": "var(--colors-red-950)", + "neutral.50": "var(--colors-neutral-50)", + "neutral.100": "var(--colors-neutral-100)", + "neutral.200": "var(--colors-neutral-200)", + "neutral.300": "var(--colors-neutral-300)", + "neutral.400": "var(--colors-neutral-400)", + "neutral.500": "var(--colors-neutral-500)", + "neutral.600": "var(--colors-neutral-600)", + "neutral.700": "var(--colors-neutral-700)", + "neutral.800": "var(--colors-neutral-800)", + "neutral.900": "var(--colors-neutral-900)", + "neutral.950": "var(--colors-neutral-950)", + "stone.50": "var(--colors-stone-50)", + "stone.100": "var(--colors-stone-100)", + "stone.200": "var(--colors-stone-200)", + "stone.300": "var(--colors-stone-300)", + "stone.400": "var(--colors-stone-400)", + "stone.500": "var(--colors-stone-500)", + "stone.600": "var(--colors-stone-600)", + "stone.700": "var(--colors-stone-700)", + "stone.800": "var(--colors-stone-800)", + "stone.900": "var(--colors-stone-900)", + "stone.950": "var(--colors-stone-950)", + "zinc.50": "var(--colors-zinc-50)", + "zinc.100": "var(--colors-zinc-100)", + "zinc.200": "var(--colors-zinc-200)", + "zinc.300": "var(--colors-zinc-300)", + "zinc.400": "var(--colors-zinc-400)", + "zinc.500": "var(--colors-zinc-500)", + "zinc.600": "var(--colors-zinc-600)", + "zinc.700": "var(--colors-zinc-700)", + "zinc.800": "var(--colors-zinc-800)", + "zinc.900": "var(--colors-zinc-900)", + "zinc.950": "var(--colors-zinc-950)", + "gray.50": "var(--colors-gray-50)", + "gray.100": "var(--colors-gray-100)", + "gray.200": "var(--colors-gray-200)", + "gray.300": "var(--colors-gray-300)", + "gray.400": "var(--colors-gray-400)", + "gray.500": "var(--colors-gray-500)", + "gray.600": "var(--colors-gray-600)", + "gray.700": "var(--colors-gray-700)", + "gray.800": "var(--colors-gray-800)", + "gray.900": "var(--colors-gray-900)", + "gray.950": "var(--colors-gray-950)", + "slate.50": "var(--colors-slate-50)", + "slate.100": "var(--colors-slate-100)", + "slate.200": "var(--colors-slate-200)", + "slate.300": "var(--colors-slate-300)", + "slate.400": "var(--colors-slate-400)", + "slate.500": "var(--colors-slate-500)", + "slate.600": "var(--colors-slate-600)", + "slate.700": "var(--colors-slate-700)", + "slate.800": "var(--colors-slate-800)", + "slate.900": "var(--colors-slate-900)", + "slate.950": "var(--colors-slate-950)", + "deep.test.yam": "var(--colors-deep-test-yam)", + "deep.test.pool.poller": "var(--colors-deep-test-pool-poller)", + "deep.test.pool.tall": "var(--colors-deep-test-pool-tall)", + "primary": "var(--colors-primary)", + "secondary": "var(--colors-secondary)", + "complex": "var(--colors-complex)", + "button.thick": "var(--colors-button-thick)", + "button.card.body": "var(--colors-button-card-body)", + "button.card.heading": "var(--colors-button-card-heading)", + "surface": "var(--colors-surface)", + "colorPalette": "var(--colors-color-palette)", + "colorPalette.50": "var(--colors-color-palette-50)", + "colorPalette.100": "var(--colors-color-palette-100)", + "colorPalette.200": "var(--colors-color-palette-200)", + "colorPalette.300": "var(--colors-color-palette-300)", + "colorPalette.400": "var(--colors-color-palette-400)", + "colorPalette.500": "var(--colors-color-palette-500)", + "colorPalette.600": "var(--colors-color-palette-600)", + "colorPalette.700": "var(--colors-color-palette-700)", + "colorPalette.800": "var(--colors-color-palette-800)", + "colorPalette.900": "var(--colors-color-palette-900)", + "colorPalette.950": "var(--colors-color-palette-950)", + "colorPalette.test.yam": "var(--colors-color-palette-test-yam)", + "colorPalette.yam": "var(--colors-color-palette-yam)", + "colorPalette.test.pool.poller": "var(--colors-color-palette-test-pool-poller)", + "colorPalette.pool.poller": "var(--colors-color-palette-pool-poller)", + "colorPalette.poller": "var(--colors-color-palette-poller)", + "colorPalette.test.pool.tall": "var(--colors-color-palette-test-pool-tall)", + "colorPalette.pool.tall": "var(--colors-color-palette-pool-tall)", + "colorPalette.tall": "var(--colors-color-palette-tall)", + "colorPalette.thick": "var(--colors-color-palette-thick)", + "colorPalette.card.body": "var(--colors-color-palette-card-body)", + "colorPalette.body": "var(--colors-color-palette-body)", + "colorPalette.card.heading": "var(--colors-color-palette-card-heading)", + "colorPalette.heading": "var(--colors-color-palette-heading)" + }, + "blurs": { + "xs": "var(--blurs-xs)", + "sm": "var(--blurs-sm)", + "md": "var(--blurs-md)", + "lg": "var(--blurs-lg)", + "xl": "var(--blurs-xl)", + "2xl": "var(--blurs-2xl)", + "3xl": "var(--blurs-3xl)" + }, + "spacing": { + "0": "var(--spacing-0)", + "1": "var(--spacing-1)", + "2": "var(--spacing-2)", + "3": "var(--spacing-3)", + "4": "var(--spacing-4)", + "5": "var(--spacing-5)", + "6": "var(--spacing-6)", + "7": "var(--spacing-7)", + "8": "var(--spacing-8)", + "9": "var(--spacing-9)", + "10": "var(--spacing-10)", + "11": "var(--spacing-11)", + "12": "var(--spacing-12)", + "14": "var(--spacing-14)", + "16": "var(--spacing-16)", + "20": "var(--spacing-20)", + "24": "var(--spacing-24)", + "28": "var(--spacing-28)", + "32": "var(--spacing-32)", + "36": "var(--spacing-36)", + "40": "var(--spacing-40)", + "44": "var(--spacing-44)", + "48": "var(--spacing-48)", + "52": "var(--spacing-52)", + "56": "var(--spacing-56)", + "60": "var(--spacing-60)", + "64": "var(--spacing-64)", + "72": "var(--spacing-72)", + "80": "var(--spacing-80)", + "96": "var(--spacing-96)", + "0.5": "var(--spacing-0\\.5)", + "1.5": "var(--spacing-1\\.5)", + "2.5": "var(--spacing-2\\.5)", + "3.5": "var(--spacing-3\\.5)", + "4.5": "var(--spacing-4\\.5)", + "5.5": "var(--spacing-5\\.5)", + "gutter": "var(--spacing-gutter)", + "-1": "calc(var(--spacing-1) * -1)", + "-2": "calc(var(--spacing-2) * -1)", + "-3": "calc(var(--spacing-3) * -1)", + "-4": "calc(var(--spacing-4) * -1)", + "-5": "calc(var(--spacing-5) * -1)", + "-6": "calc(var(--spacing-6) * -1)", + "-7": "calc(var(--spacing-7) * -1)", + "-8": "calc(var(--spacing-8) * -1)", + "-9": "calc(var(--spacing-9) * -1)", + "-10": "calc(var(--spacing-10) * -1)", + "-11": "calc(var(--spacing-11) * -1)", + "-12": "calc(var(--spacing-12) * -1)", + "-14": "calc(var(--spacing-14) * -1)", + "-16": "calc(var(--spacing-16) * -1)", + "-20": "calc(var(--spacing-20) * -1)", + "-24": "calc(var(--spacing-24) * -1)", + "-28": "calc(var(--spacing-28) * -1)", + "-32": "calc(var(--spacing-32) * -1)", + "-36": "calc(var(--spacing-36) * -1)", + "-40": "calc(var(--spacing-40) * -1)", + "-44": "calc(var(--spacing-44) * -1)", + "-48": "calc(var(--spacing-48) * -1)", + "-52": "calc(var(--spacing-52) * -1)", + "-56": "calc(var(--spacing-56) * -1)", + "-60": "calc(var(--spacing-60) * -1)", + "-64": "calc(var(--spacing-64) * -1)", + "-72": "calc(var(--spacing-72) * -1)", + "-80": "calc(var(--spacing-80) * -1)", + "-96": "calc(var(--spacing-96) * -1)", + "-0.5": "calc(var(--spacing-0\\.5) * -1)", + "-1.5": "calc(var(--spacing-1\\.5) * -1)", + "-2.5": "calc(var(--spacing-2\\.5) * -1)", + "-3.5": "calc(var(--spacing-3\\.5) * -1)", + "-4.5": "calc(var(--spacing-4\\.5) * -1)", + "-5.5": "calc(var(--spacing-5\\.5) * -1)", + "-gutter": "calc(var(--spacing-gutter) * -1)" + }, + "sizes": { + "0": "var(--sizes-0)", + "1": "var(--sizes-1)", + "2": "var(--sizes-2)", + "3": "var(--sizes-3)", + "4": "var(--sizes-4)", + "5": "var(--sizes-5)", + "6": "var(--sizes-6)", + "7": "var(--sizes-7)", + "8": "var(--sizes-8)", + "9": "var(--sizes-9)", + "10": "var(--sizes-10)", + "11": "var(--sizes-11)", + "12": "var(--sizes-12)", + "14": "var(--sizes-14)", + "16": "var(--sizes-16)", + "20": "var(--sizes-20)", + "24": "var(--sizes-24)", + "28": "var(--sizes-28)", + "32": "var(--sizes-32)", + "36": "var(--sizes-36)", + "40": "var(--sizes-40)", + "44": "var(--sizes-44)", + "48": "var(--sizes-48)", + "52": "var(--sizes-52)", + "56": "var(--sizes-56)", + "60": "var(--sizes-60)", + "64": "var(--sizes-64)", + "72": "var(--sizes-72)", + "80": "var(--sizes-80)", + "96": "var(--sizes-96)", + "0.5": "var(--sizes-0\\.5)", + "1.5": "var(--sizes-1\\.5)", + "2.5": "var(--sizes-2\\.5)", + "3.5": "var(--sizes-3\\.5)", + "4.5": "var(--sizes-4\\.5)", + "5.5": "var(--sizes-5\\.5)", + "xs": "var(--sizes-xs)", + "sm": "var(--sizes-sm)", + "md": "var(--sizes-md)", + "lg": "var(--sizes-lg)", + "xl": "var(--sizes-xl)", + "2xl": "var(--sizes-2xl)", + "3xl": "var(--sizes-3xl)", + "4xl": "var(--sizes-4xl)", + "5xl": "var(--sizes-5xl)", + "6xl": "var(--sizes-6xl)", + "7xl": "var(--sizes-7xl)", + "8xl": "var(--sizes-8xl)", + "prose": "var(--sizes-prose)", + "full": "var(--sizes-full)", + "min": "var(--sizes-min)", + "max": "var(--sizes-max)", + "fit": "var(--sizes-fit)", + "breakpoint-sm": "var(--sizes-breakpoint-sm)", + "breakpoint-md": "var(--sizes-breakpoint-md)", + "breakpoint-lg": "var(--sizes-breakpoint-lg)", + "breakpoint-xl": "var(--sizes-breakpoint-xl)", + "breakpoint-2xl": "var(--sizes-breakpoint-2xl)" + }, + "animations": { + "spin": "var(--animations-spin)", + "ping": "var(--animations-ping)", + "pulse": "var(--animations-pulse)", + "bounce": "var(--animations-bounce)" + }, + "breakpoints": { + "sm": "var(--breakpoints-sm)", + "md": "var(--breakpoints-md)", + "lg": "var(--breakpoints-lg)", + "xl": "var(--breakpoints-xl)", + "2xl": "var(--breakpoints-2xl)" + } + }, + "colorPalettes": { + "current": { + "--colors-color-palette": "var(--colors-current)" + }, + "black": { + "--colors-color-palette": "var(--colors-black)" + }, + "white": { + "--colors-color-palette": "var(--colors-white)" + }, + "transparent": { + "--colors-color-palette": "var(--colors-transparent)" + }, + "rose": { + "--colors-color-palette-50": "var(--colors-rose-50)", + "--colors-color-palette-100": "var(--colors-rose-100)", + "--colors-color-palette-200": "var(--colors-rose-200)", + "--colors-color-palette-300": "var(--colors-rose-300)", + "--colors-color-palette-400": "var(--colors-rose-400)", + "--colors-color-palette-500": "var(--colors-rose-500)", + "--colors-color-palette-600": "var(--colors-rose-600)", + "--colors-color-palette-700": "var(--colors-rose-700)", + "--colors-color-palette-800": "var(--colors-rose-800)", + "--colors-color-palette-900": "var(--colors-rose-900)", + "--colors-color-palette-950": "var(--colors-rose-950)" + }, + "pink": { + "--colors-color-palette-50": "var(--colors-pink-50)", + "--colors-color-palette-100": "var(--colors-pink-100)", + "--colors-color-palette-200": "var(--colors-pink-200)", + "--colors-color-palette-300": "var(--colors-pink-300)", + "--colors-color-palette-400": "var(--colors-pink-400)", + "--colors-color-palette-500": "var(--colors-pink-500)", + "--colors-color-palette-600": "var(--colors-pink-600)", + "--colors-color-palette-700": "var(--colors-pink-700)", + "--colors-color-palette-800": "var(--colors-pink-800)", + "--colors-color-palette-900": "var(--colors-pink-900)", + "--colors-color-palette-950": "var(--colors-pink-950)" + }, + "fuchsia": { + "--colors-color-palette-50": "var(--colors-fuchsia-50)", + "--colors-color-palette-100": "var(--colors-fuchsia-100)", + "--colors-color-palette-200": "var(--colors-fuchsia-200)", + "--colors-color-palette-300": "var(--colors-fuchsia-300)", + "--colors-color-palette-400": "var(--colors-fuchsia-400)", + "--colors-color-palette-500": "var(--colors-fuchsia-500)", + "--colors-color-palette-600": "var(--colors-fuchsia-600)", + "--colors-color-palette-700": "var(--colors-fuchsia-700)", + "--colors-color-palette-800": "var(--colors-fuchsia-800)", + "--colors-color-palette-900": "var(--colors-fuchsia-900)", + "--colors-color-palette-950": "var(--colors-fuchsia-950)" + }, + "purple": { + "--colors-color-palette-50": "var(--colors-purple-50)", + "--colors-color-palette-100": "var(--colors-purple-100)", + "--colors-color-palette-200": "var(--colors-purple-200)", + "--colors-color-palette-300": "var(--colors-purple-300)", + "--colors-color-palette-400": "var(--colors-purple-400)", + "--colors-color-palette-500": "var(--colors-purple-500)", + "--colors-color-palette-600": "var(--colors-purple-600)", + "--colors-color-palette-700": "var(--colors-purple-700)", + "--colors-color-palette-800": "var(--colors-purple-800)", + "--colors-color-palette-900": "var(--colors-purple-900)", + "--colors-color-palette-950": "var(--colors-purple-950)" + }, + "violet": { + "--colors-color-palette-50": "var(--colors-violet-50)", + "--colors-color-palette-100": "var(--colors-violet-100)", + "--colors-color-palette-200": "var(--colors-violet-200)", + "--colors-color-palette-300": "var(--colors-violet-300)", + "--colors-color-palette-400": "var(--colors-violet-400)", + "--colors-color-palette-500": "var(--colors-violet-500)", + "--colors-color-palette-600": "var(--colors-violet-600)", + "--colors-color-palette-700": "var(--colors-violet-700)", + "--colors-color-palette-800": "var(--colors-violet-800)", + "--colors-color-palette-900": "var(--colors-violet-900)", + "--colors-color-palette-950": "var(--colors-violet-950)" + }, + "indigo": { + "--colors-color-palette-50": "var(--colors-indigo-50)", + "--colors-color-palette-100": "var(--colors-indigo-100)", + "--colors-color-palette-200": "var(--colors-indigo-200)", + "--colors-color-palette-300": "var(--colors-indigo-300)", + "--colors-color-palette-400": "var(--colors-indigo-400)", + "--colors-color-palette-500": "var(--colors-indigo-500)", + "--colors-color-palette-600": "var(--colors-indigo-600)", + "--colors-color-palette-700": "var(--colors-indigo-700)", + "--colors-color-palette-800": "var(--colors-indigo-800)", + "--colors-color-palette-900": "var(--colors-indigo-900)", + "--colors-color-palette-950": "var(--colors-indigo-950)" + }, + "blue": { + "--colors-color-palette-50": "var(--colors-blue-50)", + "--colors-color-palette-100": "var(--colors-blue-100)", + "--colors-color-palette-200": "var(--colors-blue-200)", + "--colors-color-palette-300": "var(--colors-blue-300)", + "--colors-color-palette-400": "var(--colors-blue-400)", + "--colors-color-palette-500": "var(--colors-blue-500)", + "--colors-color-palette-600": "var(--colors-blue-600)", + "--colors-color-palette-700": "var(--colors-blue-700)", + "--colors-color-palette-800": "var(--colors-blue-800)", + "--colors-color-palette-900": "var(--colors-blue-900)", + "--colors-color-palette-950": "var(--colors-blue-950)" + }, + "sky": { + "--colors-color-palette-50": "var(--colors-sky-50)", + "--colors-color-palette-100": "var(--colors-sky-100)", + "--colors-color-palette-200": "var(--colors-sky-200)", + "--colors-color-palette-300": "var(--colors-sky-300)", + "--colors-color-palette-400": "var(--colors-sky-400)", + "--colors-color-palette-500": "var(--colors-sky-500)", + "--colors-color-palette-600": "var(--colors-sky-600)", + "--colors-color-palette-700": "var(--colors-sky-700)", + "--colors-color-palette-800": "var(--colors-sky-800)", + "--colors-color-palette-900": "var(--colors-sky-900)", + "--colors-color-palette-950": "var(--colors-sky-950)" + }, + "cyan": { + "--colors-color-palette-50": "var(--colors-cyan-50)", + "--colors-color-palette-100": "var(--colors-cyan-100)", + "--colors-color-palette-200": "var(--colors-cyan-200)", + "--colors-color-palette-300": "var(--colors-cyan-300)", + "--colors-color-palette-400": "var(--colors-cyan-400)", + "--colors-color-palette-500": "var(--colors-cyan-500)", + "--colors-color-palette-600": "var(--colors-cyan-600)", + "--colors-color-palette-700": "var(--colors-cyan-700)", + "--colors-color-palette-800": "var(--colors-cyan-800)", + "--colors-color-palette-900": "var(--colors-cyan-900)", + "--colors-color-palette-950": "var(--colors-cyan-950)" + }, + "teal": { + "--colors-color-palette-50": "var(--colors-teal-50)", + "--colors-color-palette-100": "var(--colors-teal-100)", + "--colors-color-palette-200": "var(--colors-teal-200)", + "--colors-color-palette-300": "var(--colors-teal-300)", + "--colors-color-palette-400": "var(--colors-teal-400)", + "--colors-color-palette-500": "var(--colors-teal-500)", + "--colors-color-palette-600": "var(--colors-teal-600)", + "--colors-color-palette-700": "var(--colors-teal-700)", + "--colors-color-palette-800": "var(--colors-teal-800)", + "--colors-color-palette-900": "var(--colors-teal-900)", + "--colors-color-palette-950": "var(--colors-teal-950)" + }, + "emerald": { + "--colors-color-palette-50": "var(--colors-emerald-50)", + "--colors-color-palette-100": "var(--colors-emerald-100)", + "--colors-color-palette-200": "var(--colors-emerald-200)", + "--colors-color-palette-300": "var(--colors-emerald-300)", + "--colors-color-palette-400": "var(--colors-emerald-400)", + "--colors-color-palette-500": "var(--colors-emerald-500)", + "--colors-color-palette-600": "var(--colors-emerald-600)", + "--colors-color-palette-700": "var(--colors-emerald-700)", + "--colors-color-palette-800": "var(--colors-emerald-800)", + "--colors-color-palette-900": "var(--colors-emerald-900)", + "--colors-color-palette-950": "var(--colors-emerald-950)" + }, + "green": { + "--colors-color-palette-50": "var(--colors-green-50)", + "--colors-color-palette-100": "var(--colors-green-100)", + "--colors-color-palette-200": "var(--colors-green-200)", + "--colors-color-palette-300": "var(--colors-green-300)", + "--colors-color-palette-400": "var(--colors-green-400)", + "--colors-color-palette-500": "var(--colors-green-500)", + "--colors-color-palette-600": "var(--colors-green-600)", + "--colors-color-palette-700": "var(--colors-green-700)", + "--colors-color-palette-800": "var(--colors-green-800)", + "--colors-color-palette-900": "var(--colors-green-900)", + "--colors-color-palette-950": "var(--colors-green-950)" + }, + "lime": { + "--colors-color-palette-50": "var(--colors-lime-50)", + "--colors-color-palette-100": "var(--colors-lime-100)", + "--colors-color-palette-200": "var(--colors-lime-200)", + "--colors-color-palette-300": "var(--colors-lime-300)", + "--colors-color-palette-400": "var(--colors-lime-400)", + "--colors-color-palette-500": "var(--colors-lime-500)", + "--colors-color-palette-600": "var(--colors-lime-600)", + "--colors-color-palette-700": "var(--colors-lime-700)", + "--colors-color-palette-800": "var(--colors-lime-800)", + "--colors-color-palette-900": "var(--colors-lime-900)", + "--colors-color-palette-950": "var(--colors-lime-950)" + }, + "yellow": { + "--colors-color-palette-50": "var(--colors-yellow-50)", + "--colors-color-palette-100": "var(--colors-yellow-100)", + "--colors-color-palette-200": "var(--colors-yellow-200)", + "--colors-color-palette-300": "var(--colors-yellow-300)", + "--colors-color-palette-400": "var(--colors-yellow-400)", + "--colors-color-palette-500": "var(--colors-yellow-500)", + "--colors-color-palette-600": "var(--colors-yellow-600)", + "--colors-color-palette-700": "var(--colors-yellow-700)", + "--colors-color-palette-800": "var(--colors-yellow-800)", + "--colors-color-palette-900": "var(--colors-yellow-900)", + "--colors-color-palette-950": "var(--colors-yellow-950)" + }, + "amber": { + "--colors-color-palette-50": "var(--colors-amber-50)", + "--colors-color-palette-100": "var(--colors-amber-100)", + "--colors-color-palette-200": "var(--colors-amber-200)", + "--colors-color-palette-300": "var(--colors-amber-300)", + "--colors-color-palette-400": "var(--colors-amber-400)", + "--colors-color-palette-500": "var(--colors-amber-500)", + "--colors-color-palette-600": "var(--colors-amber-600)", + "--colors-color-palette-700": "var(--colors-amber-700)", + "--colors-color-palette-800": "var(--colors-amber-800)", + "--colors-color-palette-900": "var(--colors-amber-900)", + "--colors-color-palette-950": "var(--colors-amber-950)" + }, + "orange": { + "--colors-color-palette-50": "var(--colors-orange-50)", + "--colors-color-palette-100": "var(--colors-orange-100)", + "--colors-color-palette-200": "var(--colors-orange-200)", + "--colors-color-palette-300": "var(--colors-orange-300)", + "--colors-color-palette-400": "var(--colors-orange-400)", + "--colors-color-palette-500": "var(--colors-orange-500)", + "--colors-color-palette-600": "var(--colors-orange-600)", + "--colors-color-palette-700": "var(--colors-orange-700)", + "--colors-color-palette-800": "var(--colors-orange-800)", + "--colors-color-palette-900": "var(--colors-orange-900)", + "--colors-color-palette-950": "var(--colors-orange-950)" + }, + "red": { + "--colors-color-palette-50": "var(--colors-red-50)", + "--colors-color-palette-100": "var(--colors-red-100)", + "--colors-color-palette-200": "var(--colors-red-200)", + "--colors-color-palette-300": "var(--colors-red-300)", + "--colors-color-palette-400": "var(--colors-red-400)", + "--colors-color-palette-500": "var(--colors-red-500)", + "--colors-color-palette-600": "var(--colors-red-600)", + "--colors-color-palette-700": "var(--colors-red-700)", + "--colors-color-palette-800": "var(--colors-red-800)", + "--colors-color-palette-900": "var(--colors-red-900)", + "--colors-color-palette-950": "var(--colors-red-950)" + }, + "neutral": { + "--colors-color-palette-50": "var(--colors-neutral-50)", + "--colors-color-palette-100": "var(--colors-neutral-100)", + "--colors-color-palette-200": "var(--colors-neutral-200)", + "--colors-color-palette-300": "var(--colors-neutral-300)", + "--colors-color-palette-400": "var(--colors-neutral-400)", + "--colors-color-palette-500": "var(--colors-neutral-500)", + "--colors-color-palette-600": "var(--colors-neutral-600)", + "--colors-color-palette-700": "var(--colors-neutral-700)", + "--colors-color-palette-800": "var(--colors-neutral-800)", + "--colors-color-palette-900": "var(--colors-neutral-900)", + "--colors-color-palette-950": "var(--colors-neutral-950)" + }, + "stone": { + "--colors-color-palette-50": "var(--colors-stone-50)", + "--colors-color-palette-100": "var(--colors-stone-100)", + "--colors-color-palette-200": "var(--colors-stone-200)", + "--colors-color-palette-300": "var(--colors-stone-300)", + "--colors-color-palette-400": "var(--colors-stone-400)", + "--colors-color-palette-500": "var(--colors-stone-500)", + "--colors-color-palette-600": "var(--colors-stone-600)", + "--colors-color-palette-700": "var(--colors-stone-700)", + "--colors-color-palette-800": "var(--colors-stone-800)", + "--colors-color-palette-900": "var(--colors-stone-900)", + "--colors-color-palette-950": "var(--colors-stone-950)" + }, + "zinc": { + "--colors-color-palette-50": "var(--colors-zinc-50)", + "--colors-color-palette-100": "var(--colors-zinc-100)", + "--colors-color-palette-200": "var(--colors-zinc-200)", + "--colors-color-palette-300": "var(--colors-zinc-300)", + "--colors-color-palette-400": "var(--colors-zinc-400)", + "--colors-color-palette-500": "var(--colors-zinc-500)", + "--colors-color-palette-600": "var(--colors-zinc-600)", + "--colors-color-palette-700": "var(--colors-zinc-700)", + "--colors-color-palette-800": "var(--colors-zinc-800)", + "--colors-color-palette-900": "var(--colors-zinc-900)", + "--colors-color-palette-950": "var(--colors-zinc-950)" + }, + "gray": { + "--colors-color-palette-50": "var(--colors-gray-50)", + "--colors-color-palette-100": "var(--colors-gray-100)", + "--colors-color-palette-200": "var(--colors-gray-200)", + "--colors-color-palette-300": "var(--colors-gray-300)", + "--colors-color-palette-400": "var(--colors-gray-400)", + "--colors-color-palette-500": "var(--colors-gray-500)", + "--colors-color-palette-600": "var(--colors-gray-600)", + "--colors-color-palette-700": "var(--colors-gray-700)", + "--colors-color-palette-800": "var(--colors-gray-800)", + "--colors-color-palette-900": "var(--colors-gray-900)", + "--colors-color-palette-950": "var(--colors-gray-950)" + }, + "slate": { + "--colors-color-palette-50": "var(--colors-slate-50)", + "--colors-color-palette-100": "var(--colors-slate-100)", + "--colors-color-palette-200": "var(--colors-slate-200)", + "--colors-color-palette-300": "var(--colors-slate-300)", + "--colors-color-palette-400": "var(--colors-slate-400)", + "--colors-color-palette-500": "var(--colors-slate-500)", + "--colors-color-palette-600": "var(--colors-slate-600)", + "--colors-color-palette-700": "var(--colors-slate-700)", + "--colors-color-palette-800": "var(--colors-slate-800)", + "--colors-color-palette-900": "var(--colors-slate-900)", + "--colors-color-palette-950": "var(--colors-slate-950)" + }, + "deep": { + "--colors-color-palette-test-yam": "var(--colors-deep-test-yam)", + "--colors-color-palette-test-pool-poller": "var(--colors-deep-test-pool-poller)", + "--colors-color-palette-test-pool-tall": "var(--colors-deep-test-pool-tall)" + }, + "deep.test": { + "--colors-color-palette-yam": "var(--colors-deep-test-yam)", + "--colors-color-palette-pool-poller": "var(--colors-deep-test-pool-poller)", + "--colors-color-palette-pool-tall": "var(--colors-deep-test-pool-tall)" + }, + "deep.test.pool": { + "--colors-color-palette-poller": "var(--colors-deep-test-pool-poller)", + "--colors-color-palette-tall": "var(--colors-deep-test-pool-tall)" + }, + "primary": { + "--colors-color-palette": "var(--colors-primary)" + }, + "secondary": { + "--colors-color-palette": "var(--colors-secondary)" + }, + "complex": { + "--colors-color-palette": "var(--colors-complex)" + }, + "button": { + "--colors-color-palette-thick": "var(--colors-button-thick)", + "--colors-color-palette-card-body": "var(--colors-button-card-body)", + "--colors-color-palette-card-heading": "var(--colors-button-card-heading)" + }, + "button.card": { + "--colors-color-palette-body": "var(--colors-button-card-body)", + "--colors-color-palette-heading": "var(--colors-button-card-heading)" + }, + "surface": { + "--colors-color-palette": "var(--colors-surface)" + } + }, + "cssVars": { + "base": { + "--aspect-ratios-square": "1 / 1", + "--aspect-ratios-landscape": "4 / 3", + "--aspect-ratios-portrait": "3 / 4", + "--aspect-ratios-wide": "16 / 9", + "--aspect-ratios-ultrawide": "18 / 5", + "--aspect-ratios-golden": "1.618 / 1", + "--borders-none": "none", + "--easings-default": "cubic-bezier(0.4, 0, 0.2, 1)", + "--easings-linear": "linear", + "--easings-in": "cubic-bezier(0.4, 0, 1, 1)", + "--easings-out": "cubic-bezier(0, 0, 0.2, 1)", + "--easings-in-out": "cubic-bezier(0.4, 0, 0.2, 1)", + "--durations-fastest": "50ms", + "--durations-faster": "100ms", + "--durations-fast": "150ms", + "--durations-normal": "200ms", + "--durations-slow": "300ms", + "--durations-slower": "400ms", + "--durations-slowest": "500ms", + "--radii-xs": "0.125rem", + "--radii-sm": "0.25rem", + "--radii-md": "0.375rem", + "--radii-lg": "0.5rem", + "--radii-xl": "0.75rem", + "--radii-2xl": "1rem", + "--radii-3xl": "1.5rem", + "--radii-4xl": "2rem", + "--radii-full": "9999px", + "--font-weights-thin": "100", + "--font-weights-extralight": "200", + "--font-weights-light": "300", + "--font-weights-normal": "400", + "--font-weights-medium": "500", + "--font-weights-semibold": "600", + "--font-weights-bold": "700", + "--font-weights-extrabold": "800", + "--font-weights-black": "900", + "--line-heights-none": "1", + "--line-heights-tight": "1.25", + "--line-heights-snug": "1.375", + "--line-heights-normal": "1.5", + "--line-heights-relaxed": "1.625", + "--line-heights-loose": "2", + "--fonts-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", + "--fonts-serif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "--fonts-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", + "--letter-spacings-tighter": "-0.05em", + "--letter-spacings-tight": "-0.025em", + "--letter-spacings-normal": "0em", + "--letter-spacings-wide": "0.025em", + "--letter-spacings-wider": "0.05em", + "--letter-spacings-widest": "0.1em", + "--font-sizes-2xs": "0.5rem", + "--font-sizes-xs": "0.75rem", + "--font-sizes-sm": "0.875rem", + "--font-sizes-md": "1rem", + "--font-sizes-lg": "1.125rem", + "--font-sizes-xl": "1.25rem", + "--font-sizes-2xl": "1.5rem", + "--font-sizes-3xl": "1.875rem", + "--font-sizes-4xl": "2.25rem", + "--font-sizes-5xl": "3rem", + "--font-sizes-6xl": "3.75rem", + "--font-sizes-7xl": "4.5rem", + "--font-sizes-8xl": "6rem", + "--font-sizes-9xl": "8rem", + "--shadows-2xs": "0 1px rgb(0 0 0 / 0.05)", + "--shadows-xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)", + "--shadows-sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", + "--shadows-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", + "--shadows-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", + "--shadows-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", + "--shadows-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)", + "--shadows-inset-2xs": "inset 0 1px rgb(0 0 0 / 0.05)", + "--shadows-inset-xs": "inset 0 1px 1px rgb(0 0 0 / 0.05)", + "--shadows-inset-sm": "inset 0 2px 4px rgb(0 0 0 / 0.05)", + "--colors-current": "currentColor", + "--colors-black": "#000", + "--colors-white": "#fff", + "--colors-transparent": "rgb(0 0 0 / 0)", + "--colors-rose-50": "#fff1f2", + "--colors-rose-100": "#ffe4e6", + "--colors-rose-200": "#fecdd3", + "--colors-rose-300": "#fda4af", + "--colors-rose-400": "#fb7185", + "--colors-rose-500": "#f43f5e", + "--colors-rose-600": "#e11d48", + "--colors-rose-700": "#be123c", + "--colors-rose-800": "#9f1239", + "--colors-rose-900": "#881337", + "--colors-rose-950": "#4c0519", + "--colors-pink-50": "#fdf2f8", + "--colors-pink-100": "#fce7f3", + "--colors-pink-200": "#fbcfe8", + "--colors-pink-300": "#f9a8d4", + "--colors-pink-400": "#f472b6", + "--colors-pink-500": "#ec4899", + "--colors-pink-600": "#db2777", + "--colors-pink-700": "#be185d", + "--colors-pink-800": "#9d174d", + "--colors-pink-900": "#831843", + "--colors-pink-950": "#500724", + "--colors-fuchsia-50": "#fdf4ff", + "--colors-fuchsia-100": "#fae8ff", + "--colors-fuchsia-200": "#f5d0fe", + "--colors-fuchsia-300": "#f0abfc", + "--colors-fuchsia-400": "#e879f9", + "--colors-fuchsia-500": "#d946ef", + "--colors-fuchsia-600": "#c026d3", + "--colors-fuchsia-700": "#a21caf", + "--colors-fuchsia-800": "#86198f", + "--colors-fuchsia-900": "#701a75", + "--colors-fuchsia-950": "#4a044e", + "--colors-purple-50": "#faf5ff", + "--colors-purple-100": "#f3e8ff", + "--colors-purple-200": "#e9d5ff", + "--colors-purple-300": "#d8b4fe", + "--colors-purple-400": "#c084fc", + "--colors-purple-500": "#a855f7", + "--colors-purple-600": "#9333ea", + "--colors-purple-700": "#7e22ce", + "--colors-purple-800": "#6b21a8", + "--colors-purple-900": "#581c87", + "--colors-purple-950": "#3b0764", + "--colors-violet-50": "#f5f3ff", + "--colors-violet-100": "#ede9fe", + "--colors-violet-200": "#ddd6fe", + "--colors-violet-300": "#c4b5fd", + "--colors-violet-400": "#a78bfa", + "--colors-violet-500": "#8b5cf6", + "--colors-violet-600": "#7c3aed", + "--colors-violet-700": "#6d28d9", + "--colors-violet-800": "#5b21b6", + "--colors-violet-900": "#4c1d95", + "--colors-violet-950": "#2e1065", + "--colors-indigo-50": "#eef2ff", + "--colors-indigo-100": "#e0e7ff", + "--colors-indigo-200": "#c7d2fe", + "--colors-indigo-300": "#a5b4fc", + "--colors-indigo-400": "#818cf8", + "--colors-indigo-500": "#6366f1", + "--colors-indigo-600": "#4f46e5", + "--colors-indigo-700": "#4338ca", + "--colors-indigo-800": "#3730a3", + "--colors-indigo-900": "#312e81", + "--colors-indigo-950": "#1e1b4b", + "--colors-blue-50": "#eff6ff", + "--colors-blue-100": "#dbeafe", + "--colors-blue-200": "#bfdbfe", + "--colors-blue-300": "#93c5fd", + "--colors-blue-400": "#60a5fa", + "--colors-blue-500": "#3b82f6", + "--colors-blue-600": "#2563eb", + "--colors-blue-700": "#1d4ed8", + "--colors-blue-800": "#1e40af", + "--colors-blue-900": "#1e3a8a", + "--colors-blue-950": "#172554", + "--colors-sky-50": "#f0f9ff", + "--colors-sky-100": "#e0f2fe", + "--colors-sky-200": "#bae6fd", + "--colors-sky-300": "#7dd3fc", + "--colors-sky-400": "#38bdf8", + "--colors-sky-500": "#0ea5e9", + "--colors-sky-600": "#0284c7", + "--colors-sky-700": "#0369a1", + "--colors-sky-800": "#075985", + "--colors-sky-900": "#0c4a6e", + "--colors-sky-950": "#082f49", + "--colors-cyan-50": "#ecfeff", + "--colors-cyan-100": "#cffafe", + "--colors-cyan-200": "#a5f3fc", + "--colors-cyan-300": "#67e8f9", + "--colors-cyan-400": "#22d3ee", + "--colors-cyan-500": "#06b6d4", + "--colors-cyan-600": "#0891b2", + "--colors-cyan-700": "#0e7490", + "--colors-cyan-800": "#155e75", + "--colors-cyan-900": "#164e63", + "--colors-cyan-950": "#083344", + "--colors-teal-50": "#f0fdfa", + "--colors-teal-100": "#ccfbf1", + "--colors-teal-200": "#99f6e4", + "--colors-teal-300": "#5eead4", + "--colors-teal-400": "#2dd4bf", + "--colors-teal-500": "#14b8a6", + "--colors-teal-600": "#0d9488", + "--colors-teal-700": "#0f766e", + "--colors-teal-800": "#115e59", + "--colors-teal-900": "#134e4a", + "--colors-teal-950": "#042f2e", + "--colors-emerald-50": "#ecfdf5", + "--colors-emerald-100": "#d1fae5", + "--colors-emerald-200": "#a7f3d0", + "--colors-emerald-300": "#6ee7b7", + "--colors-emerald-400": "#34d399", + "--colors-emerald-500": "#10b981", + "--colors-emerald-600": "#059669", + "--colors-emerald-700": "#047857", + "--colors-emerald-800": "#065f46", + "--colors-emerald-900": "#064e3b", + "--colors-emerald-950": "#022c22", + "--colors-green-50": "#f0fdf4", + "--colors-green-100": "#dcfce7", + "--colors-green-200": "#bbf7d0", + "--colors-green-300": "#86efac", + "--colors-green-400": "#4ade80", + "--colors-green-500": "#22c55e", + "--colors-green-600": "#16a34a", + "--colors-green-700": "#15803d", + "--colors-green-800": "#166534", + "--colors-green-900": "#14532d", + "--colors-green-950": "#052e16", + "--colors-lime-50": "#f7fee7", + "--colors-lime-100": "#ecfccb", + "--colors-lime-200": "#d9f99d", + "--colors-lime-300": "#bef264", + "--colors-lime-400": "#a3e635", + "--colors-lime-500": "#84cc16", + "--colors-lime-600": "#65a30d", + "--colors-lime-700": "#4d7c0f", + "--colors-lime-800": "#3f6212", + "--colors-lime-900": "#365314", + "--colors-lime-950": "#1a2e05", + "--colors-yellow-50": "#fefce8", + "--colors-yellow-100": "#fef9c3", + "--colors-yellow-200": "#fef08a", + "--colors-yellow-300": "#fde047", + "--colors-yellow-400": "#facc15", + "--colors-yellow-500": "#eab308", + "--colors-yellow-600": "#ca8a04", + "--colors-yellow-700": "#a16207", + "--colors-yellow-800": "#854d0e", + "--colors-yellow-900": "#713f12", + "--colors-yellow-950": "#422006", + "--colors-amber-50": "#fffbeb", + "--colors-amber-100": "#fef3c7", + "--colors-amber-200": "#fde68a", + "--colors-amber-300": "#fcd34d", + "--colors-amber-400": "#fbbf24", + "--colors-amber-500": "#f59e0b", + "--colors-amber-600": "#d97706", + "--colors-amber-700": "#b45309", + "--colors-amber-800": "#92400e", + "--colors-amber-900": "#78350f", + "--colors-amber-950": "#451a03", + "--colors-orange-50": "#fff7ed", + "--colors-orange-100": "#ffedd5", + "--colors-orange-200": "#fed7aa", + "--colors-orange-300": "#fdba74", + "--colors-orange-400": "#fb923c", + "--colors-orange-500": "#f97316", + "--colors-orange-600": "#ea580c", + "--colors-orange-700": "#c2410c", + "--colors-orange-800": "#9a3412", + "--colors-orange-900": "#7c2d12", + "--colors-orange-950": "#431407", + "--colors-red-50": "#fef2f2", + "--colors-red-100": "#fee2e2", + "--colors-red-200": "#fecaca", + "--colors-red-300": "#fca5a5", + "--colors-red-400": "#f87171", + "--colors-red-500": "#ef4444", + "--colors-red-600": "#dc2626", + "--colors-red-700": "#b91c1c", + "--colors-red-800": "#991b1b", + "--colors-red-900": "#7f1d1d", + "--colors-red-950": "#450a0a", + "--colors-neutral-50": "#fafafa", + "--colors-neutral-100": "#f5f5f5", + "--colors-neutral-200": "#e5e5e5", + "--colors-neutral-300": "#d4d4d4", + "--colors-neutral-400": "#a3a3a3", + "--colors-neutral-500": "#737373", + "--colors-neutral-600": "#525252", + "--colors-neutral-700": "#404040", + "--colors-neutral-800": "#262626", + "--colors-neutral-900": "#171717", + "--colors-neutral-950": "#0a0a0a", + "--colors-stone-50": "#fafaf9", + "--colors-stone-100": "#f5f5f4", + "--colors-stone-200": "#e7e5e4", + "--colors-stone-300": "#d6d3d1", + "--colors-stone-400": "#a8a29e", + "--colors-stone-500": "#78716c", + "--colors-stone-600": "#57534e", + "--colors-stone-700": "#44403c", + "--colors-stone-800": "#292524", + "--colors-stone-900": "#1c1917", + "--colors-stone-950": "#0c0a09", + "--colors-zinc-50": "#fafafa", + "--colors-zinc-100": "#f4f4f5", + "--colors-zinc-200": "#e4e4e7", + "--colors-zinc-300": "#d4d4d8", + "--colors-zinc-400": "#a1a1aa", + "--colors-zinc-500": "#71717a", + "--colors-zinc-600": "#52525b", + "--colors-zinc-700": "#3f3f46", + "--colors-zinc-800": "#27272a", + "--colors-zinc-900": "#18181b", + "--colors-zinc-950": "#09090b", + "--colors-gray-50": "#f9fafb", + "--colors-gray-100": "#f3f4f6", + "--colors-gray-200": "#e5e7eb", + "--colors-gray-300": "#d1d5db", + "--colors-gray-400": "#9ca3af", + "--colors-gray-500": "#6b7280", + "--colors-gray-600": "#4b5563", + "--colors-gray-700": "#374151", + "--colors-gray-800": "#1f2937", + "--colors-gray-900": "#111827", + "--colors-gray-950": "#030712", + "--colors-slate-50": "#f8fafc", + "--colors-slate-100": "#f1f5f9", + "--colors-slate-200": "#e2e8f0", + "--colors-slate-300": "#cbd5e1", + "--colors-slate-400": "#94a3b8", + "--colors-slate-500": "#64748b", + "--colors-slate-600": "#475569", + "--colors-slate-700": "#334155", + "--colors-slate-800": "#1e293b", + "--colors-slate-900": "#0f172a", + "--colors-slate-950": "#020617", + "--colors-deep-test-yam": "%555", + "--colors-deep-test-pool-poller": "#fff", + "--colors-deep-test-pool-tall": "$dfdf", + "--blurs-xs": "4px", + "--blurs-sm": "8px", + "--blurs-md": "12px", + "--blurs-lg": "16px", + "--blurs-xl": "24px", + "--blurs-2xl": "40px", + "--blurs-3xl": "64px", + "--spacing-0": "0rem", + "--spacing-1": "0.25rem", + "--spacing-2": "0.5rem", + "--spacing-3": "0.75rem", + "--spacing-4": "1rem", + "--spacing-5": "1.25rem", + "--spacing-6": "1.5rem", + "--spacing-7": "1.75rem", + "--spacing-8": "2rem", + "--spacing-9": "2.25rem", + "--spacing-10": "2.5rem", + "--spacing-11": "2.75rem", + "--spacing-12": "3rem", + "--spacing-14": "3.5rem", + "--spacing-16": "4rem", + "--spacing-20": "5rem", + "--spacing-24": "6rem", + "--spacing-28": "7rem", + "--spacing-32": "8rem", + "--spacing-36": "9rem", + "--spacing-40": "10rem", + "--spacing-44": "11rem", + "--spacing-48": "12rem", + "--spacing-52": "13rem", + "--spacing-56": "14rem", + "--spacing-60": "15rem", + "--spacing-64": "16rem", + "--spacing-72": "18rem", + "--spacing-80": "20rem", + "--spacing-96": "24rem", + "--spacing-0\\.5": "0.125rem", + "--spacing-1\\.5": "0.375rem", + "--spacing-2\\.5": "0.625rem", + "--spacing-3\\.5": "0.875rem", + "--spacing-4\\.5": "1.125rem", + "--spacing-5\\.5": "1.375rem", + "--sizes-0": "0rem", + "--sizes-1": "0.25rem", + "--sizes-2": "0.5rem", + "--sizes-3": "0.75rem", + "--sizes-4": "1rem", + "--sizes-5": "1.25rem", + "--sizes-6": "1.5rem", + "--sizes-7": "1.75rem", + "--sizes-8": "2rem", + "--sizes-9": "2.25rem", + "--sizes-10": "2.5rem", + "--sizes-11": "2.75rem", + "--sizes-12": "3rem", + "--sizes-14": "3.5rem", + "--sizes-16": "4rem", + "--sizes-20": "5rem", + "--sizes-24": "6rem", + "--sizes-28": "7rem", + "--sizes-32": "8rem", + "--sizes-36": "9rem", + "--sizes-40": "10rem", + "--sizes-44": "11rem", + "--sizes-48": "12rem", + "--sizes-52": "13rem", + "--sizes-56": "14rem", + "--sizes-60": "15rem", + "--sizes-64": "16rem", + "--sizes-72": "18rem", + "--sizes-80": "20rem", + "--sizes-96": "24rem", + "--sizes-0\\.5": "0.125rem", + "--sizes-1\\.5": "0.375rem", + "--sizes-2\\.5": "0.625rem", + "--sizes-3\\.5": "0.875rem", + "--sizes-4\\.5": "1.125rem", + "--sizes-5\\.5": "1.375rem", + "--sizes-xs": "20rem", + "--sizes-sm": "24rem", + "--sizes-md": "28rem", + "--sizes-lg": "32rem", + "--sizes-xl": "36rem", + "--sizes-2xl": "42rem", + "--sizes-3xl": "48rem", + "--sizes-4xl": "56rem", + "--sizes-5xl": "64rem", + "--sizes-6xl": "72rem", + "--sizes-7xl": "80rem", + "--sizes-8xl": "90rem", + "--sizes-prose": "65ch", + "--sizes-full": "100%", + "--sizes-min": "min-content", + "--sizes-max": "max-content", + "--sizes-fit": "fit-content", + "--sizes-breakpoint-sm": "640px", + "--sizes-breakpoint-md": "768px", + "--sizes-breakpoint-lg": "1024px", + "--sizes-breakpoint-xl": "1280px", + "--sizes-breakpoint-2xl": "1536px", + "--animations-spin": "spin 1s linear infinite", + "--animations-ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", + "--animations-pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", + "--animations-bounce": "bounce 1s infinite", + "--breakpoints-sm": "640px", + "--breakpoints-md": "768px", + "--breakpoints-lg": "1024px", + "--breakpoints-xl": "1280px", + "--breakpoints-2xl": "1536px", + "--colors-primary": "var(--colors-red-500)", + "--colors-secondary": "var(--colors-red-800)", + "--colors-complex": "var(--colors-red-800)", + "--colors-button-thick": "#fff", + "--colors-button-card-body": "#fff", + "--colors-button-card-heading": "#fff", + "--spacing-gutter": "var(--spacing-4)" + }, + "_dark": { + "--colors-primary": "var(--colors-red-400)", + "--colors-secondary": "var(--colors-red-700)", + "--colors-button-thick": "#000", + "--colors-button-card-body": "#000", + "--colors-button-card-heading": "#000" + }, + "_dark:_highContrast": { + "--colors-complex": "var(--colors-red-700)" + }, + "_materialTheme": { + "--colors-surface": "#m-b" + }, + "_materialTheme:_dark": { + "--colors-surface": "#m-d" + }, + "_pastelTheme": { + "--colors-surface": "#p-b" + }, + "_pastelTheme:_dark:md": { + "--colors-surface": "#p-d" + }, + "lg": { + "--spacing-gutter": "var(--spacing-5)" + } + } +} diff --git a/src/Css/tests/Fixtures/Panda/utilities.json b/src/Css/tests/Fixtures/Panda/utilities.json new file mode 100644 index 00000000000..a011ed8ffe0 --- /dev/null +++ b/src/Css/tests/Fixtures/Panda/utilities.json @@ -0,0 +1,5300 @@ +{ + "aspectRatio": [ + ["square","asp_square",{"aspectRatio":"var(--aspect-ratios-square)"}], + ["landscape","asp_landscape",{"aspectRatio":"var(--aspect-ratios-landscape)"}], + ["portrait","asp_portrait",{"aspectRatio":"var(--aspect-ratios-portrait)"}], + ["golden","asp_golden",{"aspectRatio":"var(--aspect-ratios-golden)"}], + ["red","asp_red",{"aspectRatio":"red"}], + ["red.300/40","asp_red.300/40",{"aspectRatio":"red.300/40"}], + ["10px","asp_10px",{"aspectRatio":"10px"}], + [12,"asp_12",{"aspectRatio":12}], + [0,"asp_0",{"aspectRatio":0}], + ["auto","asp_auto",{"aspectRatio":"auto"}], + ["{spacing.4}","asp_{spacing.4}",{"aspectRatio":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","asp_token(colors.red.300,_blue)",{"aspectRatio":"var(--colors-red-300, blue)"}], + ["a b","asp_a__b",{"aspectRatio":"a b"}], + [true,"asp_true",{"aspectRatio":true}] + ], + "boxDecorationBreak": [ + ["red","bx-db_red",{"boxDecorationBreak":"red","WebkitBoxDecorationBreak":"red"}], + ["red.300/40","bx-db_red.300/40",{"boxDecorationBreak":"red.300/40","WebkitBoxDecorationBreak":"red.300/40"}], + ["10px","bx-db_10px",{"boxDecorationBreak":"10px","WebkitBoxDecorationBreak":"10px"}], + [12,"bx-db_12",{"boxDecorationBreak":12,"WebkitBoxDecorationBreak":12}], + [0,"bx-db_0",{"boxDecorationBreak":0,"WebkitBoxDecorationBreak":0}], + ["auto","bx-db_auto",{"boxDecorationBreak":"auto","WebkitBoxDecorationBreak":"auto"}], + ["{spacing.4}","bx-db_{spacing.4}",{"boxDecorationBreak":"var(--spacing-4)","WebkitBoxDecorationBreak":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bx-db_token(colors.red.300,_blue)",{"boxDecorationBreak":"var(--colors-red-300, blue)","WebkitBoxDecorationBreak":"var(--colors-red-300, blue)"}], + ["a b","bx-db_a__b",{"boxDecorationBreak":"a b","WebkitBoxDecorationBreak":"a b"}], + [true,"bx-db_true",{"boxDecorationBreak":true,"WebkitBoxDecorationBreak":true}] + ], + "zIndex": [ + ["red","z_red",{"zIndex":"red"}], + ["red.300/40","z_red.300/40",{"zIndex":"red.300/40"}], + ["10px","z_10px",{"zIndex":"10px"}], + [12,"z_12",{"zIndex":12}], + [0,"z_0",{"zIndex":0}], + ["auto","z_auto",{"zIndex":"auto"}], + ["{spacing.4}","z_{spacing.4}",{"zIndex":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","z_token(colors.red.300,_blue)",{"zIndex":"var(--colors-red-300, blue)"}], + ["a b","z_a__b",{"zIndex":"a b"}], + [true,"z_true",{"zIndex":true}] + ], + "boxSizing": [ + ["red","bx-s_red",{"boxSizing":"red"}], + ["red.300/40","bx-s_red.300/40",{"boxSizing":"red.300/40"}], + ["10px","bx-s_10px",{"boxSizing":"10px"}], + [12,"bx-s_12",{"boxSizing":12}], + [0,"bx-s_0",{"boxSizing":0}], + ["auto","bx-s_auto",{"boxSizing":"auto"}], + ["{spacing.4}","bx-s_{spacing.4}",{"boxSizing":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bx-s_token(colors.red.300,_blue)",{"boxSizing":"var(--colors-red-300, blue)"}], + ["a b","bx-s_a__b",{"boxSizing":"a b"}], + [true,"bx-s_true",{"boxSizing":true}] + ], + "objectPosition": [ + ["red","obj-p_red",{"objectPosition":"red"}], + ["red.300/40","obj-p_red.300/40",{"objectPosition":"red.300/40"}], + ["10px","obj-p_10px",{"objectPosition":"10px"}], + [12,"obj-p_12",{"objectPosition":12}], + [0,"obj-p_0",{"objectPosition":0}], + ["auto","obj-p_auto",{"objectPosition":"auto"}], + ["{spacing.4}","obj-p_{spacing.4}",{"objectPosition":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","obj-p_token(colors.red.300,_blue)",{"objectPosition":"var(--colors-red-300, blue)"}], + ["a b","obj-p_a__b",{"objectPosition":"a b"}], + [true,"obj-p_true",{"objectPosition":true}] + ], + "objectFit": [ + ["red","obj-f_red",{"objectFit":"red"}], + ["red.300/40","obj-f_red.300/40",{"objectFit":"red.300/40"}], + ["10px","obj-f_10px",{"objectFit":"10px"}], + [12,"obj-f_12",{"objectFit":12}], + [0,"obj-f_0",{"objectFit":0}], + ["auto","obj-f_auto",{"objectFit":"auto"}], + ["{spacing.4}","obj-f_{spacing.4}",{"objectFit":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","obj-f_token(colors.red.300,_blue)",{"objectFit":"var(--colors-red-300, blue)"}], + ["a b","obj-f_a__b",{"objectFit":"a b"}], + [true,"obj-f_true",{"objectFit":true}] + ], + "overscrollBehavior": [ + ["red","ovs-b_red",{"overscrollBehavior":"red"}], + ["red.300/40","ovs-b_red.300/40",{"overscrollBehavior":"red.300/40"}], + ["10px","ovs-b_10px",{"overscrollBehavior":"10px"}], + [12,"ovs-b_12",{"overscrollBehavior":12}], + [0,"ovs-b_0",{"overscrollBehavior":0}], + ["auto","ovs-b_auto",{"overscrollBehavior":"auto"}], + ["{spacing.4}","ovs-b_{spacing.4}",{"overscrollBehavior":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ovs-b_token(colors.red.300,_blue)",{"overscrollBehavior":"var(--colors-red-300, blue)"}], + ["a b","ovs-b_a__b",{"overscrollBehavior":"a b"}], + [true,"ovs-b_true",{"overscrollBehavior":true}] + ], + "overscrollBehaviorX": [ + ["red","ovs-bx_red",{"overscrollBehaviorX":"red"}], + ["red.300/40","ovs-bx_red.300/40",{"overscrollBehaviorX":"red.300/40"}], + ["10px","ovs-bx_10px",{"overscrollBehaviorX":"10px"}], + [12,"ovs-bx_12",{"overscrollBehaviorX":12}], + [0,"ovs-bx_0",{"overscrollBehaviorX":0}], + ["auto","ovs-bx_auto",{"overscrollBehaviorX":"auto"}], + ["{spacing.4}","ovs-bx_{spacing.4}",{"overscrollBehaviorX":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ovs-bx_token(colors.red.300,_blue)",{"overscrollBehaviorX":"var(--colors-red-300, blue)"}], + ["a b","ovs-bx_a__b",{"overscrollBehaviorX":"a b"}], + [true,"ovs-bx_true",{"overscrollBehaviorX":true}] + ], + "overscrollBehaviorY": [ + ["red","ovs-by_red",{"overscrollBehaviorY":"red"}], + ["red.300/40","ovs-by_red.300/40",{"overscrollBehaviorY":"red.300/40"}], + ["10px","ovs-by_10px",{"overscrollBehaviorY":"10px"}], + [12,"ovs-by_12",{"overscrollBehaviorY":12}], + [0,"ovs-by_0",{"overscrollBehaviorY":0}], + ["auto","ovs-by_auto",{"overscrollBehaviorY":"auto"}], + ["{spacing.4}","ovs-by_{spacing.4}",{"overscrollBehaviorY":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ovs-by_token(colors.red.300,_blue)",{"overscrollBehaviorY":"var(--colors-red-300, blue)"}], + ["a b","ovs-by_a__b",{"overscrollBehaviorY":"a b"}], + [true,"ovs-by_true",{"overscrollBehaviorY":true}] + ], + "position": [ + ["red","pos_red",{"position":"red"}], + ["red.300/40","pos_red.300/40",{"position":"red.300/40"}], + ["10px","pos_10px",{"position":"10px"}], + [12,"pos_12",{"position":12}], + [0,"pos_0",{"position":0}], + ["auto","pos_auto",{"position":"auto"}], + ["{spacing.4}","pos_{spacing.4}",{"position":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","pos_token(colors.red.300,_blue)",{"position":"var(--colors-red-300, blue)"}], + ["a b","pos_a__b",{"position":"a b"}], + [true,"pos_true",{"position":true}] + ], + "top": [ + ["0","top_0",{"top":"var(--spacing-0)"}], + ["1","top_1",{"top":"var(--spacing-1)"}], + ["2","top_2",{"top":"var(--spacing-2)"}], + ["-gutter","top_-gutter",{"top":"calc(var(--spacing-gutter) * -1)"}], + ["red","top_red",{"top":"red"}], + ["red.300/40","top_red.300/40",{"top":"red.300/40"}], + ["10px","top_10px",{"top":"10px"}], + [12,"top_12",{"top":"var(--spacing-12)"}], + [0,"top_0",{"top":"var(--spacing-0)"}], + ["auto","top_auto",{"top":"auto"}], + ["{spacing.4}","top_{spacing.4}",{"top":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","top_token(colors.red.300,_blue)",{"top":"var(--colors-red-300, blue)"}], + ["a b","top_a__b",{"top":"a b"}], + [true,"top_true",{"top":true}] + ], + "left": [ + ["0","left_0",{"left":"var(--spacing-0)"}], + ["1","left_1",{"left":"var(--spacing-1)"}], + ["2","left_2",{"left":"var(--spacing-2)"}], + ["-gutter","left_-gutter",{"left":"calc(var(--spacing-gutter) * -1)"}], + ["red","left_red",{"left":"red"}], + ["red.300/40","left_red.300/40",{"left":"red.300/40"}], + ["10px","left_10px",{"left":"10px"}], + [12,"left_12",{"left":"var(--spacing-12)"}], + [0,"left_0",{"left":"var(--spacing-0)"}], + ["auto","left_auto",{"left":"auto"}], + ["{spacing.4}","left_{spacing.4}",{"left":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","left_token(colors.red.300,_blue)",{"left":"var(--colors-red-300, blue)"}], + ["a b","left_a__b",{"left":"a b"}], + [true,"left_true",{"left":true}] + ], + "inset": [ + ["0","inset_0",{"inset":"var(--spacing-0)"}], + ["1","inset_1",{"inset":"var(--spacing-1)"}], + ["2","inset_2",{"inset":"var(--spacing-2)"}], + ["-gutter","inset_-gutter",{"inset":"calc(var(--spacing-gutter) * -1)"}], + ["red","inset_red",{"inset":"red"}], + ["red.300/40","inset_red.300/40",{"inset":"red.300/40"}], + ["10px","inset_10px",{"inset":"10px"}], + [12,"inset_12",{"inset":"var(--spacing-12)"}], + [0,"inset_0",{"inset":"var(--spacing-0)"}], + ["auto","inset_auto",{"inset":"auto"}], + ["{spacing.4}","inset_{spacing.4}",{"inset":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","inset_token(colors.red.300,_blue)",{"inset":"var(--colors-red-300, blue)"}], + ["a b","inset_a__b",{"inset":"a b"}], + [true,"inset_true",{"inset":true}] + ], + "insetInline": [ + ["0","inset-x_0",{"insetInline":"var(--spacing-0)"}], + ["1","inset-x_1",{"insetInline":"var(--spacing-1)"}], + ["2","inset-x_2",{"insetInline":"var(--spacing-2)"}], + ["-gutter","inset-x_-gutter",{"insetInline":"calc(var(--spacing-gutter) * -1)"}], + ["red","inset-x_red",{"insetInline":"red"}], + ["red.300/40","inset-x_red.300/40",{"insetInline":"red.300/40"}], + ["10px","inset-x_10px",{"insetInline":"10px"}], + [12,"inset-x_12",{"insetInline":"var(--spacing-12)"}], + [0,"inset-x_0",{"insetInline":"var(--spacing-0)"}], + ["auto","inset-x_auto",{"insetInline":"auto"}], + ["{spacing.4}","inset-x_{spacing.4}",{"insetInline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","inset-x_token(colors.red.300,_blue)",{"insetInline":"var(--colors-red-300, blue)"}], + ["a b","inset-x_a__b",{"insetInline":"a b"}], + [true,"inset-x_true",{"insetInline":true}] + ], + "insetBlock": [ + ["0","inset-y_0",{"insetBlock":"var(--spacing-0)"}], + ["1","inset-y_1",{"insetBlock":"var(--spacing-1)"}], + ["2","inset-y_2",{"insetBlock":"var(--spacing-2)"}], + ["-gutter","inset-y_-gutter",{"insetBlock":"calc(var(--spacing-gutter) * -1)"}], + ["red","inset-y_red",{"insetBlock":"red"}], + ["red.300/40","inset-y_red.300/40",{"insetBlock":"red.300/40"}], + ["10px","inset-y_10px",{"insetBlock":"10px"}], + [12,"inset-y_12",{"insetBlock":"var(--spacing-12)"}], + [0,"inset-y_0",{"insetBlock":"var(--spacing-0)"}], + ["auto","inset-y_auto",{"insetBlock":"auto"}], + ["{spacing.4}","inset-y_{spacing.4}",{"insetBlock":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","inset-y_token(colors.red.300,_blue)",{"insetBlock":"var(--colors-red-300, blue)"}], + ["a b","inset-y_a__b",{"insetBlock":"a b"}], + [true,"inset-y_true",{"insetBlock":true}] + ], + "insetBlockEnd": [ + ["0","inset-be_0",{"insetBlockEnd":"var(--spacing-0)"}], + ["1","inset-be_1",{"insetBlockEnd":"var(--spacing-1)"}], + ["2","inset-be_2",{"insetBlockEnd":"var(--spacing-2)"}], + ["-gutter","inset-be_-gutter",{"insetBlockEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","inset-be_red",{"insetBlockEnd":"red"}], + ["red.300/40","inset-be_red.300/40",{"insetBlockEnd":"red.300/40"}], + ["10px","inset-be_10px",{"insetBlockEnd":"10px"}], + [12,"inset-be_12",{"insetBlockEnd":"var(--spacing-12)"}], + [0,"inset-be_0",{"insetBlockEnd":"var(--spacing-0)"}], + ["auto","inset-be_auto",{"insetBlockEnd":"auto"}], + ["{spacing.4}","inset-be_{spacing.4}",{"insetBlockEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","inset-be_token(colors.red.300,_blue)",{"insetBlockEnd":"var(--colors-red-300, blue)"}], + ["a b","inset-be_a__b",{"insetBlockEnd":"a b"}], + [true,"inset-be_true",{"insetBlockEnd":true}] + ], + "insetBlockStart": [ + ["0","inset-bs_0",{"insetBlockStart":"var(--spacing-0)"}], + ["1","inset-bs_1",{"insetBlockStart":"var(--spacing-1)"}], + ["2","inset-bs_2",{"insetBlockStart":"var(--spacing-2)"}], + ["-gutter","inset-bs_-gutter",{"insetBlockStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","inset-bs_red",{"insetBlockStart":"red"}], + ["red.300/40","inset-bs_red.300/40",{"insetBlockStart":"red.300/40"}], + ["10px","inset-bs_10px",{"insetBlockStart":"10px"}], + [12,"inset-bs_12",{"insetBlockStart":"var(--spacing-12)"}], + [0,"inset-bs_0",{"insetBlockStart":"var(--spacing-0)"}], + ["auto","inset-bs_auto",{"insetBlockStart":"auto"}], + ["{spacing.4}","inset-bs_{spacing.4}",{"insetBlockStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","inset-bs_token(colors.red.300,_blue)",{"insetBlockStart":"var(--colors-red-300, blue)"}], + ["a b","inset-bs_a__b",{"insetBlockStart":"a b"}], + [true,"inset-bs_true",{"insetBlockStart":true}] + ], + "insetInlineEnd": [ + ["0","inset-e_0",{"insetInlineEnd":"var(--spacing-0)"}], + ["1","inset-e_1",{"insetInlineEnd":"var(--spacing-1)"}], + ["2","inset-e_2",{"insetInlineEnd":"var(--spacing-2)"}], + ["-gutter","inset-e_-gutter",{"insetInlineEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","inset-e_red",{"insetInlineEnd":"red"}], + ["red.300/40","inset-e_red.300/40",{"insetInlineEnd":"red.300/40"}], + ["10px","inset-e_10px",{"insetInlineEnd":"10px"}], + [12,"inset-e_12",{"insetInlineEnd":"var(--spacing-12)"}], + [0,"inset-e_0",{"insetInlineEnd":"var(--spacing-0)"}], + ["auto","inset-e_auto",{"insetInlineEnd":"auto"}], + ["{spacing.4}","inset-e_{spacing.4}",{"insetInlineEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","inset-e_token(colors.red.300,_blue)",{"insetInlineEnd":"var(--colors-red-300, blue)"}], + ["a b","inset-e_a__b",{"insetInlineEnd":"a b"}], + [true,"inset-e_true",{"insetInlineEnd":true}] + ], + "insetInlineStart": [ + ["0","inset-s_0",{"insetInlineStart":"var(--spacing-0)"}], + ["1","inset-s_1",{"insetInlineStart":"var(--spacing-1)"}], + ["2","inset-s_2",{"insetInlineStart":"var(--spacing-2)"}], + ["-gutter","inset-s_-gutter",{"insetInlineStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","inset-s_red",{"insetInlineStart":"red"}], + ["red.300/40","inset-s_red.300/40",{"insetInlineStart":"red.300/40"}], + ["10px","inset-s_10px",{"insetInlineStart":"10px"}], + [12,"inset-s_12",{"insetInlineStart":"var(--spacing-12)"}], + [0,"inset-s_0",{"insetInlineStart":"var(--spacing-0)"}], + ["auto","inset-s_auto",{"insetInlineStart":"auto"}], + ["{spacing.4}","inset-s_{spacing.4}",{"insetInlineStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","inset-s_token(colors.red.300,_blue)",{"insetInlineStart":"var(--colors-red-300, blue)"}], + ["a b","inset-s_a__b",{"insetInlineStart":"a b"}], + [true,"inset-s_true",{"insetInlineStart":true}] + ], + "right": [ + ["0","right_0",{"right":"var(--spacing-0)"}], + ["1","right_1",{"right":"var(--spacing-1)"}], + ["2","right_2",{"right":"var(--spacing-2)"}], + ["-gutter","right_-gutter",{"right":"calc(var(--spacing-gutter) * -1)"}], + ["red","right_red",{"right":"red"}], + ["red.300/40","right_red.300/40",{"right":"red.300/40"}], + ["10px","right_10px",{"right":"10px"}], + [12,"right_12",{"right":"var(--spacing-12)"}], + [0,"right_0",{"right":"var(--spacing-0)"}], + ["auto","right_auto",{"right":"auto"}], + ["{spacing.4}","right_{spacing.4}",{"right":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","right_token(colors.red.300,_blue)",{"right":"var(--colors-red-300, blue)"}], + ["a b","right_a__b",{"right":"a b"}], + [true,"right_true",{"right":true}] + ], + "bottom": [ + ["0","bottom_0",{"bottom":"var(--spacing-0)"}], + ["1","bottom_1",{"bottom":"var(--spacing-1)"}], + ["2","bottom_2",{"bottom":"var(--spacing-2)"}], + ["-gutter","bottom_-gutter",{"bottom":"calc(var(--spacing-gutter) * -1)"}], + ["red","bottom_red",{"bottom":"red"}], + ["red.300/40","bottom_red.300/40",{"bottom":"red.300/40"}], + ["10px","bottom_10px",{"bottom":"10px"}], + [12,"bottom_12",{"bottom":"var(--spacing-12)"}], + [0,"bottom_0",{"bottom":"var(--spacing-0)"}], + ["auto","bottom_auto",{"bottom":"auto"}], + ["{spacing.4}","bottom_{spacing.4}",{"bottom":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bottom_token(colors.red.300,_blue)",{"bottom":"var(--colors-red-300, blue)"}], + ["a b","bottom_a__b",{"bottom":"a b"}], + [true,"bottom_true",{"bottom":true}] + ], + "float": [ + ["start","float_start",{"float":"left","[dir=\"rtl\"] &":{"float":"right"}}], + ["end","float_end",{"float":"right","[dir=\"rtl\"] &":{"float":"left"}}], + ["red","float_red",{"float":"red"}], + ["red.300/40","float_red.300/40",{"float":"red.300/40"}], + ["10px","float_10px",{"float":"10px"}], + [12,"float_12",{"float":12}], + [0,"float_0",{"float":0}], + ["auto","float_auto",{"float":"auto"}], + ["{spacing.4}","float_{spacing.4}",{"float":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","float_token(colors.red.300,_blue)",{"float":"var(--colors-red-300, blue)"}], + ["a b","float_a__b",{"float":"a b"}], + [true,"float_true",{"float":true}] + ], + "visibility": [ + ["red","vis_red",{"visibility":"red"}], + ["red.300/40","vis_red.300/40",{"visibility":"red.300/40"}], + ["10px","vis_10px",{"visibility":"10px"}], + [12,"vis_12",{"visibility":12}], + [0,"vis_0",{"visibility":0}], + ["auto","vis_auto",{"visibility":"auto"}], + ["{spacing.4}","vis_{spacing.4}",{"visibility":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","vis_token(colors.red.300,_blue)",{"visibility":"var(--colors-red-300, blue)"}], + ["a b","vis_a__b",{"visibility":"a b"}], + [true,"vis_true",{"visibility":true}] + ], + "display": [ + ["red","d_red",{"display":"red"}], + ["red.300/40","d_red.300/40",{"display":"red.300/40"}], + ["10px","d_10px",{"display":"10px"}], + [12,"d_12",{"display":12}], + [0,"d_0",{"display":0}], + ["auto","d_auto",{"display":"auto"}], + ["{spacing.4}","d_{spacing.4}",{"display":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","d_token(colors.red.300,_blue)",{"display":"var(--colors-red-300, blue)"}], + ["a b","d_a__b",{"display":"a b"}], + [true,"d_true",{"display":true}] + ], + "hideFrom": [ + ["sm","hide_sm",{"@breakpoint sm":{"display":"none"}}], + ["md","hide_md",{"@breakpoint md":{"display":"none"}}], + ["lg","hide_lg",{"@breakpoint lg":{"display":"none"}}], + ["2xl","hide_2xl",{"@breakpoint 2xl":{"display":"none"}}], + ["red","hide_red",{"@media screen and (min-width: red)":{"display":"none"}}], + ["red.300/40","hide_red.300/40",{"@media screen and (min-width: red.300/40)":{"display":"none"}}], + ["10px","hide_10px",{"@media screen and (min-width: 10px)":{"display":"none"}}], + [12,"hide_12",{"@media screen and (min-width: 12)":{"display":"none"}}], + [0,"hide_0",{"@media screen and (min-width: 0)":{"display":"none"}}], + ["auto","hide_auto",{"@media screen and (min-width: auto)":{"display":"none"}}], + ["{spacing.4}","hide_{spacing.4}",{"@media screen and (min-width: var(--spacing-4))":{"display":"none"}}], + ["token(colors.red.300, blue)","hide_token(colors.red.300,_blue)",{"@media screen and (min-width: var(--colors-red-300, blue))":{"display":"none"}}], + ["a b","hide_a__b",{"@media screen and (min-width: a b)":{"display":"none"}}], + [true,"hide_true",{"@media screen and (min-width: true)":{"display":"none"}}] + ], + "hideBelow": [ + ["sm","show_sm",{"@breakpoint smDown":{"display":"none"}}], + ["md","show_md",{"@breakpoint mdDown":{"display":"none"}}], + ["lg","show_lg",{"@breakpoint lgDown":{"display":"none"}}], + ["2xl","show_2xl",{"@breakpoint 2xlDown":{"display":"none"}}], + ["red","show_red",{"@media screen and (max-width: red)":{"display":"none"}}], + ["red.300/40","show_red.300/40",{"@media screen and (max-width: red.300/40)":{"display":"none"}}], + ["10px","show_10px",{"@media screen and (max-width: 10px)":{"display":"none"}}], + [12,"show_12",{"@media screen and (max-width: 12)":{"display":"none"}}], + [0,"show_0",{"@media screen and (max-width: 0)":{"display":"none"}}], + ["auto","show_auto",{"@media screen and (max-width: auto)":{"display":"none"}}], + ["{spacing.4}","show_{spacing.4}",{"@media screen and (max-width: var(--spacing-4))":{"display":"none"}}], + ["token(colors.red.300, blue)","show_token(colors.red.300,_blue)",{"@media screen and (max-width: var(--colors-red-300, blue))":{"display":"none"}}], + ["a b","show_a__b",{"@media screen and (max-width: a b)":{"display":"none"}}], + [true,"show_true",{"@media screen and (max-width: true)":{"display":"none"}}] + ], + "flexBasis": [ + ["0","flex-b_0",{"flexBasis":"var(--sizes-0)"}], + ["1","flex-b_1",{"flexBasis":"var(--sizes-1)"}], + ["2","flex-b_2",{"flexBasis":"var(--sizes-2)"}], + ["11/12","flex-b_11/12",{"flexBasis":"91.666667%"}], + ["red","flex-b_red",{"flexBasis":"red"}], + ["red.300/40","flex-b_red.300/40",{"flexBasis":"red.300/40"}], + ["10px","flex-b_10px",{"flexBasis":"10px"}], + [12,"flex-b_12",{"flexBasis":"var(--sizes-12)"}], + [0,"flex-b_0",{"flexBasis":"var(--sizes-0)"}], + ["auto","flex-b_auto",{"flexBasis":"auto"}], + ["{spacing.4}","flex-b_{spacing.4}",{"flexBasis":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","flex-b_token(colors.red.300,_blue)",{"flexBasis":"var(--colors-red-300, blue)"}], + ["a b","flex-b_a__b",{"flexBasis":"a b"}], + [true,"flex-b_true",{"flexBasis":true}] + ], + "flex": [ + ["1","flex_1",{"flex":"1 1 0%"}], + ["auto","flex_auto",{"flex":"1 1 auto"}], + ["initial","flex_initial",{"flex":"0 1 auto"}], + ["none","flex_none",{"flex":"none"}], + ["red","flex_red",{"flex":"red"}], + ["red.300/40","flex_red.300/40",{"flex":"red.300/40"}], + ["10px","flex_10px",{"flex":"10px"}], + [12,"flex_12",{"flex":12}], + [0,"flex_0",{"flex":0}], + ["{spacing.4}","flex_{spacing.4}",{"flex":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","flex_token(colors.red.300,_blue)",{"flex":"var(--colors-red-300, blue)"}], + ["a b","flex_a__b",{"flex":"a b"}], + [true,"flex_true",{"flex":true}] + ], + "flexDirection": [ + ["red","flex-d_red",{"flexDirection":"red"}], + ["red.300/40","flex-d_red.300/40",{"flexDirection":"red.300/40"}], + ["10px","flex-d_10px",{"flexDirection":"10px"}], + [12,"flex-d_12",{"flexDirection":12}], + [0,"flex-d_0",{"flexDirection":0}], + ["auto","flex-d_auto",{"flexDirection":"auto"}], + ["{spacing.4}","flex-d_{spacing.4}",{"flexDirection":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","flex-d_token(colors.red.300,_blue)",{"flexDirection":"var(--colors-red-300, blue)"}], + ["a b","flex-d_a__b",{"flexDirection":"a b"}], + [true,"flex-d_true",{"flexDirection":true}] + ], + "flexGrow": [ + ["red","flex-g_red",{"flexGrow":"red"}], + ["red.300/40","flex-g_red.300/40",{"flexGrow":"red.300/40"}], + ["10px","flex-g_10px",{"flexGrow":"10px"}], + [12,"flex-g_12",{"flexGrow":12}], + [0,"flex-g_0",{"flexGrow":0}], + ["auto","flex-g_auto",{"flexGrow":"auto"}], + ["{spacing.4}","flex-g_{spacing.4}",{"flexGrow":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","flex-g_token(colors.red.300,_blue)",{"flexGrow":"var(--colors-red-300, blue)"}], + ["a b","flex-g_a__b",{"flexGrow":"a b"}], + [true,"flex-g_true",{"flexGrow":true}] + ], + "flexShrink": [ + ["red","flex-sh_red",{"flexShrink":"red"}], + ["red.300/40","flex-sh_red.300/40",{"flexShrink":"red.300/40"}], + ["10px","flex-sh_10px",{"flexShrink":"10px"}], + [12,"flex-sh_12",{"flexShrink":12}], + [0,"flex-sh_0",{"flexShrink":0}], + ["auto","flex-sh_auto",{"flexShrink":"auto"}], + ["{spacing.4}","flex-sh_{spacing.4}",{"flexShrink":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","flex-sh_token(colors.red.300,_blue)",{"flexShrink":"var(--colors-red-300, blue)"}], + ["a b","flex-sh_a__b",{"flexShrink":"a b"}], + [true,"flex-sh_true",{"flexShrink":true}] + ], + "gridTemplateColumns": [ + ["red","grid-tc_red",{"gridTemplateColumns":"red"}], + ["red.300/40","grid-tc_red.300/40",{"gridTemplateColumns":"red.300/40"}], + ["10px","grid-tc_10px",{"gridTemplateColumns":"10px"}], + [12,"grid-tc_12",{"gridTemplateColumns":12}], + [0,"grid-tc_0",{"gridTemplateColumns":0}], + ["auto","grid-tc_auto",{"gridTemplateColumns":"auto"}], + ["{spacing.4}","grid-tc_{spacing.4}",{"gridTemplateColumns":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-tc_token(colors.red.300,_blue)",{"gridTemplateColumns":"var(--colors-red-300, blue)"}], + ["a b","grid-tc_a__b",{"gridTemplateColumns":"a b"}], + [true,"grid-tc_true",{"gridTemplateColumns":true}] + ], + "gridTemplateRows": [ + ["red","grid-tr_red",{"gridTemplateRows":"red"}], + ["red.300/40","grid-tr_red.300/40",{"gridTemplateRows":"red.300/40"}], + ["10px","grid-tr_10px",{"gridTemplateRows":"10px"}], + [12,"grid-tr_12",{"gridTemplateRows":12}], + [0,"grid-tr_0",{"gridTemplateRows":0}], + ["auto","grid-tr_auto",{"gridTemplateRows":"auto"}], + ["{spacing.4}","grid-tr_{spacing.4}",{"gridTemplateRows":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-tr_token(colors.red.300,_blue)",{"gridTemplateRows":"var(--colors-red-300, blue)"}], + ["a b","grid-tr_a__b",{"gridTemplateRows":"a b"}], + [true,"grid-tr_true",{"gridTemplateRows":true}] + ], + "gridColumn": [ + ["red","grid-c_red",{"gridColumn":"red"}], + ["red.300/40","grid-c_red.300/40",{"gridColumn":"red.300/40"}], + ["10px","grid-c_10px",{"gridColumn":"10px"}], + [12,"grid-c_12",{"gridColumn":12}], + [0,"grid-c_0",{"gridColumn":0}], + ["auto","grid-c_auto",{"gridColumn":"auto"}], + ["{spacing.4}","grid-c_{spacing.4}",{"gridColumn":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-c_token(colors.red.300,_blue)",{"gridColumn":"var(--colors-red-300, blue)"}], + ["a b","grid-c_a__b",{"gridColumn":"a b"}], + [true,"grid-c_true",{"gridColumn":true}] + ], + "gridRow": [ + ["red","grid-r_red",{"gridRow":"red"}], + ["red.300/40","grid-r_red.300/40",{"gridRow":"red.300/40"}], + ["10px","grid-r_10px",{"gridRow":"10px"}], + [12,"grid-r_12",{"gridRow":12}], + [0,"grid-r_0",{"gridRow":0}], + ["auto","grid-r_auto",{"gridRow":"auto"}], + ["{spacing.4}","grid-r_{spacing.4}",{"gridRow":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-r_token(colors.red.300,_blue)",{"gridRow":"var(--colors-red-300, blue)"}], + ["a b","grid-r_a__b",{"gridRow":"a b"}], + [true,"grid-r_true",{"gridRow":true}] + ], + "gridColumnStart": [ + ["red","grid-cs_red",{"gridColumnStart":"red"}], + ["red.300/40","grid-cs_red.300/40",{"gridColumnStart":"red.300/40"}], + ["10px","grid-cs_10px",{"gridColumnStart":"10px"}], + [12,"grid-cs_12",{"gridColumnStart":12}], + [0,"grid-cs_0",{"gridColumnStart":0}], + ["auto","grid-cs_auto",{"gridColumnStart":"auto"}], + ["{spacing.4}","grid-cs_{spacing.4}",{"gridColumnStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-cs_token(colors.red.300,_blue)",{"gridColumnStart":"var(--colors-red-300, blue)"}], + ["a b","grid-cs_a__b",{"gridColumnStart":"a b"}], + [true,"grid-cs_true",{"gridColumnStart":true}] + ], + "gridColumnEnd": [ + ["red","grid-ce_red",{"gridColumnEnd":"red"}], + ["red.300/40","grid-ce_red.300/40",{"gridColumnEnd":"red.300/40"}], + ["10px","grid-ce_10px",{"gridColumnEnd":"10px"}], + [12,"grid-ce_12",{"gridColumnEnd":12}], + [0,"grid-ce_0",{"gridColumnEnd":0}], + ["auto","grid-ce_auto",{"gridColumnEnd":"auto"}], + ["{spacing.4}","grid-ce_{spacing.4}",{"gridColumnEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-ce_token(colors.red.300,_blue)",{"gridColumnEnd":"var(--colors-red-300, blue)"}], + ["a b","grid-ce_a__b",{"gridColumnEnd":"a b"}], + [true,"grid-ce_true",{"gridColumnEnd":true}] + ], + "gridAutoFlow": [ + ["red","grid-af_red",{"gridAutoFlow":"red"}], + ["red.300/40","grid-af_red.300/40",{"gridAutoFlow":"red.300/40"}], + ["10px","grid-af_10px",{"gridAutoFlow":"10px"}], + [12,"grid-af_12",{"gridAutoFlow":12}], + [0,"grid-af_0",{"gridAutoFlow":0}], + ["auto","grid-af_auto",{"gridAutoFlow":"auto"}], + ["{spacing.4}","grid-af_{spacing.4}",{"gridAutoFlow":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-af_token(colors.red.300,_blue)",{"gridAutoFlow":"var(--colors-red-300, blue)"}], + ["a b","grid-af_a__b",{"gridAutoFlow":"a b"}], + [true,"grid-af_true",{"gridAutoFlow":true}] + ], + "gridAutoColumns": [ + ["min","grid-ac_min",{"gridAutoColumns":"min-content"}], + ["max","grid-ac_max",{"gridAutoColumns":"max-content"}], + ["fr","grid-ac_fr",{"gridAutoColumns":"minmax(0, 1fr)"}], + ["red","grid-ac_red",{"gridAutoColumns":"red"}], + ["red.300/40","grid-ac_red.300/40",{"gridAutoColumns":"red.300/40"}], + ["10px","grid-ac_10px",{"gridAutoColumns":"10px"}], + [12,"grid-ac_12",{"gridAutoColumns":12}], + [0,"grid-ac_0",{"gridAutoColumns":0}], + ["auto","grid-ac_auto",{"gridAutoColumns":"auto"}], + ["{spacing.4}","grid-ac_{spacing.4}",{"gridAutoColumns":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-ac_token(colors.red.300,_blue)",{"gridAutoColumns":"var(--colors-red-300, blue)"}], + ["a b","grid-ac_a__b",{"gridAutoColumns":"a b"}], + [true,"grid-ac_true",{"gridAutoColumns":true}] + ], + "gridAutoRows": [ + ["min","grid-ar_min",{"gridAutoRows":"min-content"}], + ["max","grid-ar_max",{"gridAutoRows":"max-content"}], + ["fr","grid-ar_fr",{"gridAutoRows":"minmax(0, 1fr)"}], + ["red","grid-ar_red",{"gridAutoRows":"red"}], + ["red.300/40","grid-ar_red.300/40",{"gridAutoRows":"red.300/40"}], + ["10px","grid-ar_10px",{"gridAutoRows":"10px"}], + [12,"grid-ar_12",{"gridAutoRows":12}], + [0,"grid-ar_0",{"gridAutoRows":0}], + ["auto","grid-ar_auto",{"gridAutoRows":"auto"}], + ["{spacing.4}","grid-ar_{spacing.4}",{"gridAutoRows":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-ar_token(colors.red.300,_blue)",{"gridAutoRows":"var(--colors-red-300, blue)"}], + ["a b","grid-ar_a__b",{"gridAutoRows":"a b"}], + [true,"grid-ar_true",{"gridAutoRows":true}] + ], + "gap": [ + ["0","gap_0",{"gap":"var(--spacing-0)"}], + ["1","gap_1",{"gap":"var(--spacing-1)"}], + ["2","gap_2",{"gap":"var(--spacing-2)"}], + ["-gutter","gap_-gutter",{"gap":"calc(var(--spacing-gutter) * -1)"}], + ["red","gap_red",{"gap":"red"}], + ["red.300/40","gap_red.300/40",{"gap":"red.300/40"}], + ["10px","gap_10px",{"gap":"10px"}], + [12,"gap_12",{"gap":"var(--spacing-12)"}], + [0,"gap_0",{"gap":"var(--spacing-0)"}], + ["auto","gap_auto",{"gap":"auto"}], + ["{spacing.4}","gap_{spacing.4}",{"gap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","gap_token(colors.red.300,_blue)",{"gap":"var(--colors-red-300, blue)"}], + ["a b","gap_a__b",{"gap":"a b"}], + [true,"gap_true",{"gap":true}] + ], + "gridGap": [ + ["0","grid-g_0",{"gridGap":"var(--spacing-0)"}], + ["1","grid-g_1",{"gridGap":"var(--spacing-1)"}], + ["2","grid-g_2",{"gridGap":"var(--spacing-2)"}], + ["-gutter","grid-g_-gutter",{"gridGap":"calc(var(--spacing-gutter) * -1)"}], + ["red","grid-g_red",{"gridGap":"red"}], + ["red.300/40","grid-g_red.300/40",{"gridGap":"red.300/40"}], + ["10px","grid-g_10px",{"gridGap":"10px"}], + [12,"grid-g_12",{"gridGap":"var(--spacing-12)"}], + [0,"grid-g_0",{"gridGap":"var(--spacing-0)"}], + ["auto","grid-g_auto",{"gridGap":"auto"}], + ["{spacing.4}","grid-g_{spacing.4}",{"gridGap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-g_token(colors.red.300,_blue)",{"gridGap":"var(--colors-red-300, blue)"}], + ["a b","grid-g_a__b",{"gridGap":"a b"}], + [true,"grid-g_true",{"gridGap":true}] + ], + "gridRowGap": [ + ["0","grid-rg_0",{"gridRowGap":"var(--spacing-0)"}], + ["1","grid-rg_1",{"gridRowGap":"var(--spacing-1)"}], + ["2","grid-rg_2",{"gridRowGap":"var(--spacing-2)"}], + ["-gutter","grid-rg_-gutter",{"gridRowGap":"calc(var(--spacing-gutter) * -1)"}], + ["red","grid-rg_red",{"gridRowGap":"red"}], + ["red.300/40","grid-rg_red.300/40",{"gridRowGap":"red.300/40"}], + ["10px","grid-rg_10px",{"gridRowGap":"10px"}], + [12,"grid-rg_12",{"gridRowGap":"var(--spacing-12)"}], + [0,"grid-rg_0",{"gridRowGap":"var(--spacing-0)"}], + ["auto","grid-rg_auto",{"gridRowGap":"auto"}], + ["{spacing.4}","grid-rg_{spacing.4}",{"gridRowGap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-rg_token(colors.red.300,_blue)",{"gridRowGap":"var(--colors-red-300, blue)"}], + ["a b","grid-rg_a__b",{"gridRowGap":"a b"}], + [true,"grid-rg_true",{"gridRowGap":true}] + ], + "gridColumnGap": [ + ["0","grid-cg_0",{"gridColumnGap":"var(--spacing-0)"}], + ["1","grid-cg_1",{"gridColumnGap":"var(--spacing-1)"}], + ["2","grid-cg_2",{"gridColumnGap":"var(--spacing-2)"}], + ["-gutter","grid-cg_-gutter",{"gridColumnGap":"calc(var(--spacing-gutter) * -1)"}], + ["red","grid-cg_red",{"gridColumnGap":"red"}], + ["red.300/40","grid-cg_red.300/40",{"gridColumnGap":"red.300/40"}], + ["10px","grid-cg_10px",{"gridColumnGap":"10px"}], + [12,"grid-cg_12",{"gridColumnGap":"var(--spacing-12)"}], + [0,"grid-cg_0",{"gridColumnGap":"var(--spacing-0)"}], + ["auto","grid-cg_auto",{"gridColumnGap":"auto"}], + ["{spacing.4}","grid-cg_{spacing.4}",{"gridColumnGap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grid-cg_token(colors.red.300,_blue)",{"gridColumnGap":"var(--colors-red-300, blue)"}], + ["a b","grid-cg_a__b",{"gridColumnGap":"a b"}], + [true,"grid-cg_true",{"gridColumnGap":true}] + ], + "rowGap": [ + ["0","rg_0",{"rowGap":"var(--spacing-0)"}], + ["1","rg_1",{"rowGap":"var(--spacing-1)"}], + ["2","rg_2",{"rowGap":"var(--spacing-2)"}], + ["-gutter","rg_-gutter",{"rowGap":"calc(var(--spacing-gutter) * -1)"}], + ["red","rg_red",{"rowGap":"red"}], + ["red.300/40","rg_red.300/40",{"rowGap":"red.300/40"}], + ["10px","rg_10px",{"rowGap":"10px"}], + [12,"rg_12",{"rowGap":"var(--spacing-12)"}], + [0,"rg_0",{"rowGap":"var(--spacing-0)"}], + ["auto","rg_auto",{"rowGap":"auto"}], + ["{spacing.4}","rg_{spacing.4}",{"rowGap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","rg_token(colors.red.300,_blue)",{"rowGap":"var(--colors-red-300, blue)"}], + ["a b","rg_a__b",{"rowGap":"a b"}], + [true,"rg_true",{"rowGap":true}] + ], + "columnGap": [ + ["0","cg_0",{"columnGap":"var(--spacing-0)"}], + ["1","cg_1",{"columnGap":"var(--spacing-1)"}], + ["2","cg_2",{"columnGap":"var(--spacing-2)"}], + ["-gutter","cg_-gutter",{"columnGap":"calc(var(--spacing-gutter) * -1)"}], + ["red","cg_red",{"columnGap":"red"}], + ["red.300/40","cg_red.300/40",{"columnGap":"red.300/40"}], + ["10px","cg_10px",{"columnGap":"10px"}], + [12,"cg_12",{"columnGap":"var(--spacing-12)"}], + [0,"cg_0",{"columnGap":"var(--spacing-0)"}], + ["auto","cg_auto",{"columnGap":"auto"}], + ["{spacing.4}","cg_{spacing.4}",{"columnGap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","cg_token(colors.red.300,_blue)",{"columnGap":"var(--colors-red-300, blue)"}], + ["a b","cg_a__b",{"columnGap":"a b"}], + [true,"cg_true",{"columnGap":true}] + ], + "justifyContent": [ + ["red","jc_red",{"justifyContent":"red"}], + ["red.300/40","jc_red.300/40",{"justifyContent":"red.300/40"}], + ["10px","jc_10px",{"justifyContent":"10px"}], + [12,"jc_12",{"justifyContent":12}], + [0,"jc_0",{"justifyContent":0}], + ["auto","jc_auto",{"justifyContent":"auto"}], + ["{spacing.4}","jc_{spacing.4}",{"justifyContent":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","jc_token(colors.red.300,_blue)",{"justifyContent":"var(--colors-red-300, blue)"}], + ["a b","jc_a__b",{"justifyContent":"a b"}], + [true,"jc_true",{"justifyContent":true}] + ], + "alignContent": [ + ["red","ac_red",{"alignContent":"red"}], + ["red.300/40","ac_red.300/40",{"alignContent":"red.300/40"}], + ["10px","ac_10px",{"alignContent":"10px"}], + [12,"ac_12",{"alignContent":12}], + [0,"ac_0",{"alignContent":0}], + ["auto","ac_auto",{"alignContent":"auto"}], + ["{spacing.4}","ac_{spacing.4}",{"alignContent":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ac_token(colors.red.300,_blue)",{"alignContent":"var(--colors-red-300, blue)"}], + ["a b","ac_a__b",{"alignContent":"a b"}], + [true,"ac_true",{"alignContent":true}] + ], + "alignItems": [ + ["red","ai_red",{"alignItems":"red"}], + ["red.300/40","ai_red.300/40",{"alignItems":"red.300/40"}], + ["10px","ai_10px",{"alignItems":"10px"}], + [12,"ai_12",{"alignItems":12}], + [0,"ai_0",{"alignItems":0}], + ["auto","ai_auto",{"alignItems":"auto"}], + ["{spacing.4}","ai_{spacing.4}",{"alignItems":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ai_token(colors.red.300,_blue)",{"alignItems":"var(--colors-red-300, blue)"}], + ["a b","ai_a__b",{"alignItems":"a b"}], + [true,"ai_true",{"alignItems":true}] + ], + "alignSelf": [ + ["red","as_red",{"alignSelf":"red"}], + ["red.300/40","as_red.300/40",{"alignSelf":"red.300/40"}], + ["10px","as_10px",{"alignSelf":"10px"}], + [12,"as_12",{"alignSelf":12}], + [0,"as_0",{"alignSelf":0}], + ["auto","as_auto",{"alignSelf":"auto"}], + ["{spacing.4}","as_{spacing.4}",{"alignSelf":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","as_token(colors.red.300,_blue)",{"alignSelf":"var(--colors-red-300, blue)"}], + ["a b","as_a__b",{"alignSelf":"a b"}], + [true,"as_true",{"alignSelf":true}] + ], + "padding": [ + ["0","p_0",{"padding":"var(--spacing-0)"}], + ["1","p_1",{"padding":"var(--spacing-1)"}], + ["2","p_2",{"padding":"var(--spacing-2)"}], + ["-gutter","p_-gutter",{"padding":"calc(var(--spacing-gutter) * -1)"}], + ["red","p_red",{"padding":"red"}], + ["red.300/40","p_red.300/40",{"padding":"red.300/40"}], + ["10px","p_10px",{"padding":"10px"}], + [12,"p_12",{"padding":"var(--spacing-12)"}], + [0,"p_0",{"padding":"var(--spacing-0)"}], + ["auto","p_auto",{"padding":"auto"}], + ["{spacing.4}","p_{spacing.4}",{"padding":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","p_token(colors.red.300,_blue)",{"padding":"var(--colors-red-300, blue)"}], + ["a b","p_a__b",{"padding":"a b"}], + [true,"p_true",{"padding":true}] + ], + "paddingLeft": [ + ["0","pl_0",{"paddingLeft":"var(--spacing-0)"}], + ["1","pl_1",{"paddingLeft":"var(--spacing-1)"}], + ["2","pl_2",{"paddingLeft":"var(--spacing-2)"}], + ["-gutter","pl_-gutter",{"paddingLeft":"calc(var(--spacing-gutter) * -1)"}], + ["red","pl_red",{"paddingLeft":"red"}], + ["red.300/40","pl_red.300/40",{"paddingLeft":"red.300/40"}], + ["10px","pl_10px",{"paddingLeft":"10px"}], + [12,"pl_12",{"paddingLeft":"var(--spacing-12)"}], + [0,"pl_0",{"paddingLeft":"var(--spacing-0)"}], + ["auto","pl_auto",{"paddingLeft":"auto"}], + ["{spacing.4}","pl_{spacing.4}",{"paddingLeft":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","pl_token(colors.red.300,_blue)",{"paddingLeft":"var(--colors-red-300, blue)"}], + ["a b","pl_a__b",{"paddingLeft":"a b"}], + [true,"pl_true",{"paddingLeft":true}] + ], + "paddingRight": [ + ["0","pr_0",{"paddingRight":"var(--spacing-0)"}], + ["1","pr_1",{"paddingRight":"var(--spacing-1)"}], + ["2","pr_2",{"paddingRight":"var(--spacing-2)"}], + ["-gutter","pr_-gutter",{"paddingRight":"calc(var(--spacing-gutter) * -1)"}], + ["red","pr_red",{"paddingRight":"red"}], + ["red.300/40","pr_red.300/40",{"paddingRight":"red.300/40"}], + ["10px","pr_10px",{"paddingRight":"10px"}], + [12,"pr_12",{"paddingRight":"var(--spacing-12)"}], + [0,"pr_0",{"paddingRight":"var(--spacing-0)"}], + ["auto","pr_auto",{"paddingRight":"auto"}], + ["{spacing.4}","pr_{spacing.4}",{"paddingRight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","pr_token(colors.red.300,_blue)",{"paddingRight":"var(--colors-red-300, blue)"}], + ["a b","pr_a__b",{"paddingRight":"a b"}], + [true,"pr_true",{"paddingRight":true}] + ], + "paddingTop": [ + ["0","pt_0",{"paddingTop":"var(--spacing-0)"}], + ["1","pt_1",{"paddingTop":"var(--spacing-1)"}], + ["2","pt_2",{"paddingTop":"var(--spacing-2)"}], + ["-gutter","pt_-gutter",{"paddingTop":"calc(var(--spacing-gutter) * -1)"}], + ["red","pt_red",{"paddingTop":"red"}], + ["red.300/40","pt_red.300/40",{"paddingTop":"red.300/40"}], + ["10px","pt_10px",{"paddingTop":"10px"}], + [12,"pt_12",{"paddingTop":"var(--spacing-12)"}], + [0,"pt_0",{"paddingTop":"var(--spacing-0)"}], + ["auto","pt_auto",{"paddingTop":"auto"}], + ["{spacing.4}","pt_{spacing.4}",{"paddingTop":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","pt_token(colors.red.300,_blue)",{"paddingTop":"var(--colors-red-300, blue)"}], + ["a b","pt_a__b",{"paddingTop":"a b"}], + [true,"pt_true",{"paddingTop":true}] + ], + "paddingBottom": [ + ["0","pb_0",{"paddingBottom":"var(--spacing-0)"}], + ["1","pb_1",{"paddingBottom":"var(--spacing-1)"}], + ["2","pb_2",{"paddingBottom":"var(--spacing-2)"}], + ["-gutter","pb_-gutter",{"paddingBottom":"calc(var(--spacing-gutter) * -1)"}], + ["red","pb_red",{"paddingBottom":"red"}], + ["red.300/40","pb_red.300/40",{"paddingBottom":"red.300/40"}], + ["10px","pb_10px",{"paddingBottom":"10px"}], + [12,"pb_12",{"paddingBottom":"var(--spacing-12)"}], + [0,"pb_0",{"paddingBottom":"var(--spacing-0)"}], + ["auto","pb_auto",{"paddingBottom":"auto"}], + ["{spacing.4}","pb_{spacing.4}",{"paddingBottom":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","pb_token(colors.red.300,_blue)",{"paddingBottom":"var(--colors-red-300, blue)"}], + ["a b","pb_a__b",{"paddingBottom":"a b"}], + [true,"pb_true",{"paddingBottom":true}] + ], + "paddingBlock": [ + ["0","py_0",{"paddingBlock":"var(--spacing-0)"}], + ["1","py_1",{"paddingBlock":"var(--spacing-1)"}], + ["2","py_2",{"paddingBlock":"var(--spacing-2)"}], + ["-gutter","py_-gutter",{"paddingBlock":"calc(var(--spacing-gutter) * -1)"}], + ["red","py_red",{"paddingBlock":"red"}], + ["red.300/40","py_red.300/40",{"paddingBlock":"red.300/40"}], + ["10px","py_10px",{"paddingBlock":"10px"}], + [12,"py_12",{"paddingBlock":"var(--spacing-12)"}], + [0,"py_0",{"paddingBlock":"var(--spacing-0)"}], + ["auto","py_auto",{"paddingBlock":"auto"}], + ["{spacing.4}","py_{spacing.4}",{"paddingBlock":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","py_token(colors.red.300,_blue)",{"paddingBlock":"var(--colors-red-300, blue)"}], + ["a b","py_a__b",{"paddingBlock":"a b"}], + [true,"py_true",{"paddingBlock":true}] + ], + "paddingBlockEnd": [ + ["0","pbe_0",{"paddingBlockEnd":"var(--spacing-0)"}], + ["1","pbe_1",{"paddingBlockEnd":"var(--spacing-1)"}], + ["2","pbe_2",{"paddingBlockEnd":"var(--spacing-2)"}], + ["-gutter","pbe_-gutter",{"paddingBlockEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","pbe_red",{"paddingBlockEnd":"red"}], + ["red.300/40","pbe_red.300/40",{"paddingBlockEnd":"red.300/40"}], + ["10px","pbe_10px",{"paddingBlockEnd":"10px"}], + [12,"pbe_12",{"paddingBlockEnd":"var(--spacing-12)"}], + [0,"pbe_0",{"paddingBlockEnd":"var(--spacing-0)"}], + ["auto","pbe_auto",{"paddingBlockEnd":"auto"}], + ["{spacing.4}","pbe_{spacing.4}",{"paddingBlockEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","pbe_token(colors.red.300,_blue)",{"paddingBlockEnd":"var(--colors-red-300, blue)"}], + ["a b","pbe_a__b",{"paddingBlockEnd":"a b"}], + [true,"pbe_true",{"paddingBlockEnd":true}] + ], + "paddingBlockStart": [ + ["0","pbs_0",{"paddingBlockStart":"var(--spacing-0)"}], + ["1","pbs_1",{"paddingBlockStart":"var(--spacing-1)"}], + ["2","pbs_2",{"paddingBlockStart":"var(--spacing-2)"}], + ["-gutter","pbs_-gutter",{"paddingBlockStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","pbs_red",{"paddingBlockStart":"red"}], + ["red.300/40","pbs_red.300/40",{"paddingBlockStart":"red.300/40"}], + ["10px","pbs_10px",{"paddingBlockStart":"10px"}], + [12,"pbs_12",{"paddingBlockStart":"var(--spacing-12)"}], + [0,"pbs_0",{"paddingBlockStart":"var(--spacing-0)"}], + ["auto","pbs_auto",{"paddingBlockStart":"auto"}], + ["{spacing.4}","pbs_{spacing.4}",{"paddingBlockStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","pbs_token(colors.red.300,_blue)",{"paddingBlockStart":"var(--colors-red-300, blue)"}], + ["a b","pbs_a__b",{"paddingBlockStart":"a b"}], + [true,"pbs_true",{"paddingBlockStart":true}] + ], + "paddingInline": [ + ["0","px_0",{"paddingInline":"var(--spacing-0)"}], + ["1","px_1",{"paddingInline":"var(--spacing-1)"}], + ["2","px_2",{"paddingInline":"var(--spacing-2)"}], + ["-gutter","px_-gutter",{"paddingInline":"calc(var(--spacing-gutter) * -1)"}], + ["red","px_red",{"paddingInline":"red"}], + ["red.300/40","px_red.300/40",{"paddingInline":"red.300/40"}], + ["10px","px_10px",{"paddingInline":"10px"}], + [12,"px_12",{"paddingInline":"var(--spacing-12)"}], + [0,"px_0",{"paddingInline":"var(--spacing-0)"}], + ["auto","px_auto",{"paddingInline":"auto"}], + ["{spacing.4}","px_{spacing.4}",{"paddingInline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","px_token(colors.red.300,_blue)",{"paddingInline":"var(--colors-red-300, blue)"}], + ["a b","px_a__b",{"paddingInline":"a b"}], + [true,"px_true",{"paddingInline":true}] + ], + "paddingInlineEnd": [ + ["0","pe_0",{"paddingInlineEnd":"var(--spacing-0)"}], + ["1","pe_1",{"paddingInlineEnd":"var(--spacing-1)"}], + ["2","pe_2",{"paddingInlineEnd":"var(--spacing-2)"}], + ["-gutter","pe_-gutter",{"paddingInlineEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","pe_red",{"paddingInlineEnd":"red"}], + ["red.300/40","pe_red.300/40",{"paddingInlineEnd":"red.300/40"}], + ["10px","pe_10px",{"paddingInlineEnd":"10px"}], + [12,"pe_12",{"paddingInlineEnd":"var(--spacing-12)"}], + [0,"pe_0",{"paddingInlineEnd":"var(--spacing-0)"}], + ["auto","pe_auto",{"paddingInlineEnd":"auto"}], + ["{spacing.4}","pe_{spacing.4}",{"paddingInlineEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","pe_token(colors.red.300,_blue)",{"paddingInlineEnd":"var(--colors-red-300, blue)"}], + ["a b","pe_a__b",{"paddingInlineEnd":"a b"}], + [true,"pe_true",{"paddingInlineEnd":true}] + ], + "paddingInlineStart": [ + ["0","ps_0",{"paddingInlineStart":"var(--spacing-0)"}], + ["1","ps_1",{"paddingInlineStart":"var(--spacing-1)"}], + ["2","ps_2",{"paddingInlineStart":"var(--spacing-2)"}], + ["-gutter","ps_-gutter",{"paddingInlineStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","ps_red",{"paddingInlineStart":"red"}], + ["red.300/40","ps_red.300/40",{"paddingInlineStart":"red.300/40"}], + ["10px","ps_10px",{"paddingInlineStart":"10px"}], + [12,"ps_12",{"paddingInlineStart":"var(--spacing-12)"}], + [0,"ps_0",{"paddingInlineStart":"var(--spacing-0)"}], + ["auto","ps_auto",{"paddingInlineStart":"auto"}], + ["{spacing.4}","ps_{spacing.4}",{"paddingInlineStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ps_token(colors.red.300,_blue)",{"paddingInlineStart":"var(--colors-red-300, blue)"}], + ["a b","ps_a__b",{"paddingInlineStart":"a b"}], + [true,"ps_true",{"paddingInlineStart":true}] + ], + "marginLeft": [ + ["0","ml_0",{"marginLeft":"var(--spacing-0)"}], + ["1","ml_1",{"marginLeft":"var(--spacing-1)"}], + ["2","ml_2",{"marginLeft":"var(--spacing-2)"}], + ["-gutter","ml_-gutter",{"marginLeft":"calc(var(--spacing-gutter) * -1)"}], + ["red","ml_red",{"marginLeft":"red"}], + ["red.300/40","ml_red.300/40",{"marginLeft":"red.300/40"}], + ["10px","ml_10px",{"marginLeft":"10px"}], + [12,"ml_12",{"marginLeft":"var(--spacing-12)"}], + [0,"ml_0",{"marginLeft":"var(--spacing-0)"}], + ["auto","ml_auto",{"marginLeft":"auto"}], + ["{spacing.4}","ml_{spacing.4}",{"marginLeft":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ml_token(colors.red.300,_blue)",{"marginLeft":"var(--colors-red-300, blue)"}], + ["a b","ml_a__b",{"marginLeft":"a b"}], + [true,"ml_true",{"marginLeft":true}] + ], + "marginRight": [ + ["0","mr_0",{"marginRight":"var(--spacing-0)"}], + ["1","mr_1",{"marginRight":"var(--spacing-1)"}], + ["2","mr_2",{"marginRight":"var(--spacing-2)"}], + ["-gutter","mr_-gutter",{"marginRight":"calc(var(--spacing-gutter) * -1)"}], + ["red","mr_red",{"marginRight":"red"}], + ["red.300/40","mr_red.300/40",{"marginRight":"red.300/40"}], + ["10px","mr_10px",{"marginRight":"10px"}], + [12,"mr_12",{"marginRight":"var(--spacing-12)"}], + [0,"mr_0",{"marginRight":"var(--spacing-0)"}], + ["auto","mr_auto",{"marginRight":"auto"}], + ["{spacing.4}","mr_{spacing.4}",{"marginRight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","mr_token(colors.red.300,_blue)",{"marginRight":"var(--colors-red-300, blue)"}], + ["a b","mr_a__b",{"marginRight":"a b"}], + [true,"mr_true",{"marginRight":true}] + ], + "marginTop": [ + ["0","mt_0",{"marginTop":"var(--spacing-0)"}], + ["1","mt_1",{"marginTop":"var(--spacing-1)"}], + ["2","mt_2",{"marginTop":"var(--spacing-2)"}], + ["-gutter","mt_-gutter",{"marginTop":"calc(var(--spacing-gutter) * -1)"}], + ["red","mt_red",{"marginTop":"red"}], + ["red.300/40","mt_red.300/40",{"marginTop":"red.300/40"}], + ["10px","mt_10px",{"marginTop":"10px"}], + [12,"mt_12",{"marginTop":"var(--spacing-12)"}], + [0,"mt_0",{"marginTop":"var(--spacing-0)"}], + ["auto","mt_auto",{"marginTop":"auto"}], + ["{spacing.4}","mt_{spacing.4}",{"marginTop":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","mt_token(colors.red.300,_blue)",{"marginTop":"var(--colors-red-300, blue)"}], + ["a b","mt_a__b",{"marginTop":"a b"}], + [true,"mt_true",{"marginTop":true}] + ], + "marginBottom": [ + ["0","mb_0",{"marginBottom":"var(--spacing-0)"}], + ["1","mb_1",{"marginBottom":"var(--spacing-1)"}], + ["2","mb_2",{"marginBottom":"var(--spacing-2)"}], + ["-gutter","mb_-gutter",{"marginBottom":"calc(var(--spacing-gutter) * -1)"}], + ["red","mb_red",{"marginBottom":"red"}], + ["red.300/40","mb_red.300/40",{"marginBottom":"red.300/40"}], + ["10px","mb_10px",{"marginBottom":"10px"}], + [12,"mb_12",{"marginBottom":"var(--spacing-12)"}], + [0,"mb_0",{"marginBottom":"var(--spacing-0)"}], + ["auto","mb_auto",{"marginBottom":"auto"}], + ["{spacing.4}","mb_{spacing.4}",{"marginBottom":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","mb_token(colors.red.300,_blue)",{"marginBottom":"var(--colors-red-300, blue)"}], + ["a b","mb_a__b",{"marginBottom":"a b"}], + [true,"mb_true",{"marginBottom":true}] + ], + "margin": [ + ["0","m_0",{"margin":"var(--spacing-0)"}], + ["1","m_1",{"margin":"var(--spacing-1)"}], + ["2","m_2",{"margin":"var(--spacing-2)"}], + ["-gutter","m_-gutter",{"margin":"calc(var(--spacing-gutter) * -1)"}], + ["red","m_red",{"margin":"red"}], + ["red.300/40","m_red.300/40",{"margin":"red.300/40"}], + ["10px","m_10px",{"margin":"10px"}], + [12,"m_12",{"margin":"var(--spacing-12)"}], + [0,"m_0",{"margin":"var(--spacing-0)"}], + ["auto","m_auto",{"margin":"auto"}], + ["{spacing.4}","m_{spacing.4}",{"margin":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","m_token(colors.red.300,_blue)",{"margin":"var(--colors-red-300, blue)"}], + ["a b","m_a__b",{"margin":"a b"}], + [true,"m_true",{"margin":true}] + ], + "marginBlock": [ + ["0","my_0",{"marginBlock":"var(--spacing-0)"}], + ["1","my_1",{"marginBlock":"var(--spacing-1)"}], + ["2","my_2",{"marginBlock":"var(--spacing-2)"}], + ["-gutter","my_-gutter",{"marginBlock":"calc(var(--spacing-gutter) * -1)"}], + ["red","my_red",{"marginBlock":"red"}], + ["red.300/40","my_red.300/40",{"marginBlock":"red.300/40"}], + ["10px","my_10px",{"marginBlock":"10px"}], + [12,"my_12",{"marginBlock":"var(--spacing-12)"}], + [0,"my_0",{"marginBlock":"var(--spacing-0)"}], + ["auto","my_auto",{"marginBlock":"auto"}], + ["{spacing.4}","my_{spacing.4}",{"marginBlock":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","my_token(colors.red.300,_blue)",{"marginBlock":"var(--colors-red-300, blue)"}], + ["a b","my_a__b",{"marginBlock":"a b"}], + [true,"my_true",{"marginBlock":true}] + ], + "marginBlockEnd": [ + ["0","mbe_0",{"marginBlockEnd":"var(--spacing-0)"}], + ["1","mbe_1",{"marginBlockEnd":"var(--spacing-1)"}], + ["2","mbe_2",{"marginBlockEnd":"var(--spacing-2)"}], + ["-gutter","mbe_-gutter",{"marginBlockEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","mbe_red",{"marginBlockEnd":"red"}], + ["red.300/40","mbe_red.300/40",{"marginBlockEnd":"red.300/40"}], + ["10px","mbe_10px",{"marginBlockEnd":"10px"}], + [12,"mbe_12",{"marginBlockEnd":"var(--spacing-12)"}], + [0,"mbe_0",{"marginBlockEnd":"var(--spacing-0)"}], + ["auto","mbe_auto",{"marginBlockEnd":"auto"}], + ["{spacing.4}","mbe_{spacing.4}",{"marginBlockEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","mbe_token(colors.red.300,_blue)",{"marginBlockEnd":"var(--colors-red-300, blue)"}], + ["a b","mbe_a__b",{"marginBlockEnd":"a b"}], + [true,"mbe_true",{"marginBlockEnd":true}] + ], + "marginBlockStart": [ + ["0","mbs_0",{"marginBlockStart":"var(--spacing-0)"}], + ["1","mbs_1",{"marginBlockStart":"var(--spacing-1)"}], + ["2","mbs_2",{"marginBlockStart":"var(--spacing-2)"}], + ["-gutter","mbs_-gutter",{"marginBlockStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","mbs_red",{"marginBlockStart":"red"}], + ["red.300/40","mbs_red.300/40",{"marginBlockStart":"red.300/40"}], + ["10px","mbs_10px",{"marginBlockStart":"10px"}], + [12,"mbs_12",{"marginBlockStart":"var(--spacing-12)"}], + [0,"mbs_0",{"marginBlockStart":"var(--spacing-0)"}], + ["auto","mbs_auto",{"marginBlockStart":"auto"}], + ["{spacing.4}","mbs_{spacing.4}",{"marginBlockStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","mbs_token(colors.red.300,_blue)",{"marginBlockStart":"var(--colors-red-300, blue)"}], + ["a b","mbs_a__b",{"marginBlockStart":"a b"}], + [true,"mbs_true",{"marginBlockStart":true}] + ], + "marginInline": [ + ["0","mx_0",{"marginInline":"var(--spacing-0)"}], + ["1","mx_1",{"marginInline":"var(--spacing-1)"}], + ["2","mx_2",{"marginInline":"var(--spacing-2)"}], + ["-gutter","mx_-gutter",{"marginInline":"calc(var(--spacing-gutter) * -1)"}], + ["red","mx_red",{"marginInline":"red"}], + ["red.300/40","mx_red.300/40",{"marginInline":"red.300/40"}], + ["10px","mx_10px",{"marginInline":"10px"}], + [12,"mx_12",{"marginInline":"var(--spacing-12)"}], + [0,"mx_0",{"marginInline":"var(--spacing-0)"}], + ["auto","mx_auto",{"marginInline":"auto"}], + ["{spacing.4}","mx_{spacing.4}",{"marginInline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","mx_token(colors.red.300,_blue)",{"marginInline":"var(--colors-red-300, blue)"}], + ["a b","mx_a__b",{"marginInline":"a b"}], + [true,"mx_true",{"marginInline":true}] + ], + "marginInlineEnd": [ + ["0","me_0",{"marginInlineEnd":"var(--spacing-0)"}], + ["1","me_1",{"marginInlineEnd":"var(--spacing-1)"}], + ["2","me_2",{"marginInlineEnd":"var(--spacing-2)"}], + ["-gutter","me_-gutter",{"marginInlineEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","me_red",{"marginInlineEnd":"red"}], + ["red.300/40","me_red.300/40",{"marginInlineEnd":"red.300/40"}], + ["10px","me_10px",{"marginInlineEnd":"10px"}], + [12,"me_12",{"marginInlineEnd":"var(--spacing-12)"}], + [0,"me_0",{"marginInlineEnd":"var(--spacing-0)"}], + ["auto","me_auto",{"marginInlineEnd":"auto"}], + ["{spacing.4}","me_{spacing.4}",{"marginInlineEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","me_token(colors.red.300,_blue)",{"marginInlineEnd":"var(--colors-red-300, blue)"}], + ["a b","me_a__b",{"marginInlineEnd":"a b"}], + [true,"me_true",{"marginInlineEnd":true}] + ], + "marginInlineStart": [ + ["0","ms_0",{"marginInlineStart":"var(--spacing-0)"}], + ["1","ms_1",{"marginInlineStart":"var(--spacing-1)"}], + ["2","ms_2",{"marginInlineStart":"var(--spacing-2)"}], + ["-gutter","ms_-gutter",{"marginInlineStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","ms_red",{"marginInlineStart":"red"}], + ["red.300/40","ms_red.300/40",{"marginInlineStart":"red.300/40"}], + ["10px","ms_10px",{"marginInlineStart":"10px"}], + [12,"ms_12",{"marginInlineStart":"var(--spacing-12)"}], + [0,"ms_0",{"marginInlineStart":"var(--spacing-0)"}], + ["auto","ms_auto",{"marginInlineStart":"auto"}], + ["{spacing.4}","ms_{spacing.4}",{"marginInlineStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ms_token(colors.red.300,_blue)",{"marginInlineStart":"var(--colors-red-300, blue)"}], + ["a b","ms_a__b",{"marginInlineStart":"a b"}], + [true,"ms_true",{"marginInlineStart":true}] + ], + "spaceX": [ + ["0","sx_0",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"var(--spacing-0)","marginInlineEnd":"0px"}}], + ["1","sx_1",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"var(--spacing-1)","marginInlineEnd":"0px"}}], + ["2","sx_2",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"var(--spacing-2)","marginInlineEnd":"0px"}}], + ["-gutter","sx_-gutter",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"calc(var(--spacing-gutter) * -1)","marginInlineEnd":"0px"}}], + ["red","sx_red",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"red","marginInlineEnd":"0px"}}], + ["red.300/40","sx_red.300/40",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"red.300/40","marginInlineEnd":"0px"}}], + ["10px","sx_10px",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"10px","marginInlineEnd":"0px"}}], + [12,"sx_12",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"var(--spacing-12)","marginInlineEnd":"0px"}}], + [0,"sx_0",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"var(--spacing-0)","marginInlineEnd":"0px"}}], + ["auto","sx_auto",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"auto","marginInlineEnd":"0px"}}], + ["{spacing.4}","sx_{spacing.4}",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"var(--spacing-4)","marginInlineEnd":"0px"}}], + ["token(colors.red.300, blue)","sx_token(colors.red.300,_blue)",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"var(--colors-red-300, blue)","marginInlineEnd":"0px"}}], + ["a b","sx_a__b",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":"a b","marginInlineEnd":"0px"}}], + [true,"sx_true",{"& > :not([hidden]) ~ :not([hidden])":{"marginInlineStart":true,"marginInlineEnd":"0px"}}] + ], + "spaceY": [ + ["0","sy_0",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"var(--spacing-0)","marginBottom":"0px"}}], + ["1","sy_1",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"var(--spacing-1)","marginBottom":"0px"}}], + ["2","sy_2",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"var(--spacing-2)","marginBottom":"0px"}}], + ["-gutter","sy_-gutter",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"calc(var(--spacing-gutter) * -1)","marginBottom":"0px"}}], + ["red","sy_red",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"red","marginBottom":"0px"}}], + ["red.300/40","sy_red.300/40",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"red.300/40","marginBottom":"0px"}}], + ["10px","sy_10px",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"10px","marginBottom":"0px"}}], + [12,"sy_12",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"var(--spacing-12)","marginBottom":"0px"}}], + [0,"sy_0",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"var(--spacing-0)","marginBottom":"0px"}}], + ["auto","sy_auto",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"auto","marginBottom":"0px"}}], + ["{spacing.4}","sy_{spacing.4}",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"var(--spacing-4)","marginBottom":"0px"}}], + ["token(colors.red.300, blue)","sy_token(colors.red.300,_blue)",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"var(--colors-red-300, blue)","marginBottom":"0px"}}], + ["a b","sy_a__b",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":"a b","marginBottom":"0px"}}], + [true,"sy_true",{"& > :not([hidden]) ~ :not([hidden])":{"marginTop":true,"marginBottom":"0px"}}] + ], + "outlineWidth": [ + ["red","ring-w_red",{"outlineWidth":"red"}], + ["red.300/40","ring-w_red.300/40",{"outlineWidth":"red.300/40"}], + ["10px","ring-w_10px",{"outlineWidth":"10px"}], + [12,"ring-w_12",{"outlineWidth":12}], + [0,"ring-w_0",{"outlineWidth":0}], + ["auto","ring-w_auto",{"outlineWidth":"auto"}], + ["{spacing.4}","ring-w_{spacing.4}",{"outlineWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ring-w_token(colors.red.300,_blue)",{"outlineWidth":"var(--colors-red-300, blue)"}], + ["a b","ring-w_a__b",{"outlineWidth":"a b"}], + [true,"ring-w_true",{"outlineWidth":true}] + ], + "outlineColor": [ + ["current","ring-c_current",{"outlineColor":"var(--colors-current)"}], + ["black","ring-c_black",{"outlineColor":"var(--colors-black)"}], + ["white","ring-c_white",{"outlineColor":"var(--colors-white)"}], + ["colorPalette.heading","ring-c_colorPalette.heading",{"outlineColor":"var(--colors-color-palette-heading)"}], + ["red","ring-c_red",{"outlineColor":"red"}], + ["red.300/40","ring-c_red.300/40",{"--mix-outlineColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","outlineColor":"var(--mix-outlineColor, var(--colors-red-300))"}], + ["10px","ring-c_10px",{"outlineColor":"10px"}], + [12,"ring-c_12",{"outlineColor":12}], + [0,"ring-c_0",{"outlineColor":0}], + ["auto","ring-c_auto",{"outlineColor":"auto"}], + ["{spacing.4}","ring-c_{spacing.4}",{"outlineColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ring-c_token(colors.red.300,_blue)",{"outlineColor":"var(--colors-red-300, blue)"}], + ["a b","ring-c_a__b",{"outlineColor":"a b"}], + [true,"ring-c_true",{"outlineColor":true}] + ], + "outline": [ + ["none","ring_none",{"outline":"var(--borders-none)"}], + ["red","ring_red",{"outline":"red"}], + ["red.300/40","ring_red.300/40",{"outline":"red.300/40"}], + ["10px","ring_10px",{"outline":"10px"}], + [12,"ring_12",{"outline":12}], + [0,"ring_0",{"outline":0}], + ["auto","ring_auto",{"outline":"auto"}], + ["{spacing.4}","ring_{spacing.4}",{"outline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ring_token(colors.red.300,_blue)",{"outline":"var(--colors-red-300, blue)"}], + ["a b","ring_a__b",{"outline":"a b"}], + [true,"ring_true",{"outline":true}] + ], + "outlineOffset": [ + ["0","ring-o_0",{"outlineOffset":"var(--spacing-0)"}], + ["1","ring-o_1",{"outlineOffset":"var(--spacing-1)"}], + ["2","ring-o_2",{"outlineOffset":"var(--spacing-2)"}], + ["-gutter","ring-o_-gutter",{"outlineOffset":"calc(var(--spacing-gutter) * -1)"}], + ["red","ring-o_red",{"outlineOffset":"red"}], + ["red.300/40","ring-o_red.300/40",{"outlineOffset":"red.300/40"}], + ["10px","ring-o_10px",{"outlineOffset":"10px"}], + [12,"ring-o_12",{"outlineOffset":"var(--spacing-12)"}], + [0,"ring-o_0",{"outlineOffset":"var(--spacing-0)"}], + ["auto","ring-o_auto",{"outlineOffset":"auto"}], + ["{spacing.4}","ring-o_{spacing.4}",{"outlineOffset":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ring-o_token(colors.red.300,_blue)",{"outlineOffset":"var(--colors-red-300, blue)"}], + ["a b","ring-o_a__b",{"outlineOffset":"a b"}], + [true,"ring-o_true",{"outlineOffset":true}] + ], + "focusRing": [ + ["outside","focus-ring_outside",{"--focus-ring-color":"var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))","&:is(:focus, [data-focus])":{"outlineWidth":"var(--focus-ring-width, 2px)","outlineOffset":"var(--focus-ring-offset, 2px)","outlineStyle":"var(--focus-ring-style, solid)","outlineColor":"var(--focus-ring-color)"}}], + ["inside","focus-ring_inside",{"--focus-ring-color":"var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))","&:is(:focus, [data-focus])":{"outlineOffset":"0px","outlineWidth":"var(--focus-ring-width, 1px)","outlineColor":"var(--focus-ring-color)","outlineStyle":"var(--focus-ring-style, solid)","borderColor":"var(--focus-ring-color)"}}], + ["mixed","focus-ring_mixed",{"--focus-ring-color":"var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))","&:is(:focus, [data-focus])":{"outlineOffset":"0px","outlineWidth":"var(--focus-ring-width, 3px)","outlineStyle":"var(--focus-ring-style, solid)","outlineColor":"color-mix(in srgb, var(--focus-ring-color), transparent 60%)","borderColor":"var(--focus-ring-color)"}}], + ["none","focus-ring_none",{"--focus-ring-color":"var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))","&:is(:focus, [data-focus])":{"outline":"none"}}], + ["red","focus-ring_red",{}], + ["red.300/40","focus-ring_red.300/40",{}], + ["10px","focus-ring_10px",{}], + [12,"focus-ring_12",{}], + [0,"focus-ring_0",{}], + ["auto","focus-ring_auto",{}], + ["{spacing.4}","focus-ring_{spacing.4}",{}], + ["token(colors.red.300, blue)","focus-ring_token(colors.red.300,_blue)",{}], + ["a b","focus-ring_a__b",{}], + [true,"focus-ring_true",{}] + ], + "focusVisibleRing": [ + ["outside","focus-v-ring_outside",{"--focus-ring-color":"var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))","&:is(:focus-visible, [data-focus-visible])":{"outlineWidth":"var(--focus-ring-width, 2px)","outlineOffset":"var(--focus-ring-offset, 2px)","outlineStyle":"var(--focus-ring-style, solid)","outlineColor":"var(--focus-ring-color)"}}], + ["inside","focus-v-ring_inside",{"--focus-ring-color":"var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))","&:is(:focus-visible, [data-focus-visible])":{"outlineOffset":"0px","outlineWidth":"var(--focus-ring-width, 1px)","outlineColor":"var(--focus-ring-color)","outlineStyle":"var(--focus-ring-style, solid)","borderColor":"var(--focus-ring-color)"}}], + ["mixed","focus-v-ring_mixed",{"--focus-ring-color":"var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))","&:is(:focus-visible, [data-focus-visible])":{"outlineOffset":"0px","outlineWidth":"var(--focus-ring-width, 3px)","outlineStyle":"var(--focus-ring-style, solid)","outlineColor":"color-mix(in srgb, var(--focus-ring-color), transparent 60%)","borderColor":"var(--focus-ring-color)"}}], + ["none","focus-v-ring_none",{"--focus-ring-color":"var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))","&:is(:focus-visible, [data-focus-visible])":{"outline":"none"}}], + ["red","focus-v-ring_red",{}], + ["red.300/40","focus-v-ring_red.300/40",{}], + ["10px","focus-v-ring_10px",{}], + [12,"focus-v-ring_12",{}], + [0,"focus-v-ring_0",{}], + ["auto","focus-v-ring_auto",{}], + ["{spacing.4}","focus-v-ring_{spacing.4}",{}], + ["token(colors.red.300, blue)","focus-v-ring_token(colors.red.300,_blue)",{}], + ["a b","focus-v-ring_a__b",{}], + [true,"focus-v-ring_true",{}] + ], + "focusRingColor": [ + ["current","focus-ring-c_current",{"--focus-ring-color-prop":"var(--colors-current)"}], + ["black","focus-ring-c_black",{"--focus-ring-color-prop":"var(--colors-black)"}], + ["white","focus-ring-c_white",{"--focus-ring-color-prop":"var(--colors-white)"}], + ["colorPalette.heading","focus-ring-c_colorPalette.heading",{"--focus-ring-color-prop":"var(--colors-color-palette-heading)"}], + ["red","focus-ring-c_red",{"--focus-ring-color-prop":"red"}], + ["red.300/40","focus-ring-c_red.300/40",{"--mix---focus-ring-color-prop":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","--focus-ring-color-prop":"var(--mix---focus-ring-color-prop, var(--colors-red-300))"}], + ["10px","focus-ring-c_10px",{"--focus-ring-color-prop":"10px"}], + [12,"focus-ring-c_12",{"--focus-ring-color-prop":12}], + [0,"focus-ring-c_0",{"--focus-ring-color-prop":0}], + ["auto","focus-ring-c_auto",{"--focus-ring-color-prop":"auto"}], + ["{spacing.4}","focus-ring-c_{spacing.4}",{"--focus-ring-color-prop":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","focus-ring-c_token(colors.red.300,_blue)",{"--focus-ring-color-prop":"var(--colors-red-300, blue)"}], + ["a b","focus-ring-c_a__b",{"--focus-ring-color-prop":"a b"}], + [true,"focus-ring-c_true",{"--focus-ring-color-prop":true}] + ], + "focusRingOffset": [ + ["0","focus-ring-o_0",{"--focus-ring-offset":"var(--spacing-0)"}], + ["1","focus-ring-o_1",{"--focus-ring-offset":"var(--spacing-1)"}], + ["2","focus-ring-o_2",{"--focus-ring-offset":"var(--spacing-2)"}], + ["-gutter","focus-ring-o_-gutter",{"--focus-ring-offset":"calc(var(--spacing-gutter) * -1)"}], + ["red","focus-ring-o_red",{"--focus-ring-offset":"red"}], + ["red.300/40","focus-ring-o_red.300/40",{"--focus-ring-offset":"red.300/40"}], + ["10px","focus-ring-o_10px",{"--focus-ring-offset":"10px"}], + [12,"focus-ring-o_12",{"--focus-ring-offset":"var(--spacing-12)"}], + [0,"focus-ring-o_0",{"--focus-ring-offset":"var(--spacing-0)"}], + ["auto","focus-ring-o_auto",{"--focus-ring-offset":"auto"}], + ["{spacing.4}","focus-ring-o_{spacing.4}",{"--focus-ring-offset":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","focus-ring-o_token(colors.red.300,_blue)",{"--focus-ring-offset":"var(--colors-red-300, blue)"}], + ["a b","focus-ring-o_a__b",{"--focus-ring-offset":"a b"}], + [true,"focus-ring-o_true",{"--focus-ring-offset":true}] + ], + "focusRingWidth": [ + ["red","focus-ring-w_red",{"--focus-ring-width":"red"}], + ["red.300/40","focus-ring-w_red.300/40",{"--focus-ring-width":"red.300/40"}], + ["10px","focus-ring-w_10px",{"--focus-ring-width":"10px"}], + [12,"focus-ring-w_12",{"--focus-ring-width":12}], + [0,"focus-ring-w_0",{"--focus-ring-width":0}], + ["auto","focus-ring-w_auto",{"--focus-ring-width":"auto"}], + ["{spacing.4}","focus-ring-w_{spacing.4}",{"--focus-ring-width":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","focus-ring-w_token(colors.red.300,_blue)",{"--focus-ring-width":"var(--colors-red-300, blue)"}], + ["a b","focus-ring-w_a__b",{"--focus-ring-width":"a b"}], + [true,"focus-ring-w_true",{"--focus-ring-width":true}] + ], + "focusRingStyle": [ + ["red","focus-ring-s_red",{"--focus-ring-style":"red"}], + ["red.300/40","focus-ring-s_red.300/40",{"--focus-ring-style":"red.300/40"}], + ["10px","focus-ring-s_10px",{"--focus-ring-style":"10px"}], + [12,"focus-ring-s_12",{"--focus-ring-style":12}], + [0,"focus-ring-s_0",{"--focus-ring-style":0}], + ["auto","focus-ring-s_auto",{"--focus-ring-style":"auto"}], + ["{spacing.4}","focus-ring-s_{spacing.4}",{"--focus-ring-style":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","focus-ring-s_token(colors.red.300,_blue)",{"--focus-ring-style":"var(--colors-red-300, blue)"}], + ["a b","focus-ring-s_a__b",{"--focus-ring-style":"a b"}], + [true,"focus-ring-s_true",{"--focus-ring-style":true}] + ], + "divideX": [ + ["red","dvd-x_red",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":"red","borderInlineEndWidth":"0px"}}], + ["red.300/40","dvd-x_red.300/40",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":"red.300/40","borderInlineEndWidth":"0px"}}], + ["10px","dvd-x_10px",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":"10px","borderInlineEndWidth":"0px"}}], + [12,"dvd-x_12",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":12,"borderInlineEndWidth":"0px"}}], + [0,"dvd-x_0",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":0,"borderInlineEndWidth":"0px"}}], + ["auto","dvd-x_auto",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":"auto","borderInlineEndWidth":"0px"}}], + ["{spacing.4}","dvd-x_{spacing.4}",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":"var(--spacing-4)","borderInlineEndWidth":"0px"}}], + ["token(colors.red.300, blue)","dvd-x_token(colors.red.300,_blue)",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":"var(--colors-red-300, blue)","borderInlineEndWidth":"0px"}}], + ["a b","dvd-x_a__b",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":"a b","borderInlineEndWidth":"0px"}}], + [true,"dvd-x_true",{"& > :not([hidden]) ~ :not([hidden])":{"borderInlineStartWidth":true,"borderInlineEndWidth":"0px"}}] + ], + "divideY": [ + ["red","dvd-y_red",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":"red","borderBottomWidth":"0px"}}], + ["red.300/40","dvd-y_red.300/40",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":"red.300/40","borderBottomWidth":"0px"}}], + ["10px","dvd-y_10px",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":"10px","borderBottomWidth":"0px"}}], + [12,"dvd-y_12",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":12,"borderBottomWidth":"0px"}}], + [0,"dvd-y_0",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":0,"borderBottomWidth":"0px"}}], + ["auto","dvd-y_auto",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":"auto","borderBottomWidth":"0px"}}], + ["{spacing.4}","dvd-y_{spacing.4}",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":"var(--spacing-4)","borderBottomWidth":"0px"}}], + ["token(colors.red.300, blue)","dvd-y_token(colors.red.300,_blue)",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":"var(--colors-red-300, blue)","borderBottomWidth":"0px"}}], + ["a b","dvd-y_a__b",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":"a b","borderBottomWidth":"0px"}}], + [true,"dvd-y_true",{"& > :not([hidden]) ~ :not([hidden])":{"borderTopWidth":true,"borderBottomWidth":"0px"}}] + ], + "divideColor": [ + ["current","dvd-c_current",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"var(--colors-current)"}}], + ["black","dvd-c_black",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"var(--colors-black)"}}], + ["white","dvd-c_white",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"var(--colors-white)"}}], + ["colorPalette.heading","dvd-c_colorPalette.heading",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"var(--colors-color-palette-heading)"}}], + ["red","dvd-c_red",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"red"}}], + ["red.300/40","dvd-c_red.300/40",{"& > :not([hidden]) ~ :not([hidden])":{"--mix-borderColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderColor":"var(--mix-borderColor, var(--colors-red-300))"}}], + ["10px","dvd-c_10px",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"10px"}}], + [12,"dvd-c_12",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":12}}], + [0,"dvd-c_0",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":0}}], + ["auto","dvd-c_auto",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"auto"}}], + ["{spacing.4}","dvd-c_{spacing.4}",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"var(--spacing-4)"}}], + ["token(colors.red.300, blue)","dvd-c_token(colors.red.300,_blue)",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"var(--colors-red-300, blue)"}}], + ["a b","dvd-c_a__b",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":"a b"}}], + [true,"dvd-c_true",{"& > :not([hidden]) ~ :not([hidden])":{"borderColor":true}}] + ], + "divideStyle": [ + ["red","dvd-s_red",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":"red"}}], + ["red.300/40","dvd-s_red.300/40",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":"red.300/40"}}], + ["10px","dvd-s_10px",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":"10px"}}], + [12,"dvd-s_12",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":12}}], + [0,"dvd-s_0",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":0}}], + ["auto","dvd-s_auto",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":"auto"}}], + ["{spacing.4}","dvd-s_{spacing.4}",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":"var(--spacing-4)"}}], + ["token(colors.red.300, blue)","dvd-s_token(colors.red.300,_blue)",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":"var(--colors-red-300, blue)"}}], + ["a b","dvd-s_a__b",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":"a b"}}], + [true,"dvd-s_true",{"& > :not([hidden]) ~ :not([hidden])":{"borderStyle":true}}] + ], + "width": [ + ["0","w_0",{"width":"var(--sizes-0)"}], + ["1","w_1",{"width":"var(--sizes-1)"}], + ["2","w_2",{"width":"var(--sizes-2)"}], + ["screen","w_screen",{"width":"100vw"}], + ["red","w_red",{"width":"red"}], + ["red.300/40","w_red.300/40",{"width":"red.300/40"}], + ["10px","w_10px",{"width":"10px"}], + [12,"w_12",{"width":"var(--sizes-12)"}], + [0,"w_0",{"width":"var(--sizes-0)"}], + ["auto","w_auto",{"width":"auto"}], + ["{spacing.4}","w_{spacing.4}",{"width":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","w_token(colors.red.300,_blue)",{"width":"var(--colors-red-300, blue)"}], + ["a b","w_a__b",{"width":"a b"}], + [true,"w_true",{"width":true}] + ], + "inlineSize": [ + ["0","w-is_0",{"inlineSize":"var(--sizes-0)"}], + ["1","w-is_1",{"inlineSize":"var(--sizes-1)"}], + ["2","w-is_2",{"inlineSize":"var(--sizes-2)"}], + ["screen","w-is_screen",{"inlineSize":"100vw"}], + ["red","w-is_red",{"inlineSize":"red"}], + ["red.300/40","w-is_red.300/40",{"inlineSize":"red.300/40"}], + ["10px","w-is_10px",{"inlineSize":"10px"}], + [12,"w-is_12",{"inlineSize":"var(--sizes-12)"}], + [0,"w-is_0",{"inlineSize":"var(--sizes-0)"}], + ["auto","w-is_auto",{"inlineSize":"auto"}], + ["{spacing.4}","w-is_{spacing.4}",{"inlineSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","w-is_token(colors.red.300,_blue)",{"inlineSize":"var(--colors-red-300, blue)"}], + ["a b","w-is_a__b",{"inlineSize":"a b"}], + [true,"w-is_true",{"inlineSize":true}] + ], + "minWidth": [ + ["0","min-w_0",{"minWidth":"var(--sizes-0)"}], + ["1","min-w_1",{"minWidth":"var(--sizes-1)"}], + ["2","min-w_2",{"minWidth":"var(--sizes-2)"}], + ["screen","min-w_screen",{"minWidth":"100vw"}], + ["red","min-w_red",{"minWidth":"red"}], + ["red.300/40","min-w_red.300/40",{"minWidth":"red.300/40"}], + ["10px","min-w_10px",{"minWidth":"10px"}], + [12,"min-w_12",{"minWidth":"var(--sizes-12)"}], + [0,"min-w_0",{"minWidth":"var(--sizes-0)"}], + ["auto","min-w_auto",{"minWidth":"auto"}], + ["{spacing.4}","min-w_{spacing.4}",{"minWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","min-w_token(colors.red.300,_blue)",{"minWidth":"var(--colors-red-300, blue)"}], + ["a b","min-w_a__b",{"minWidth":"a b"}], + [true,"min-w_true",{"minWidth":true}] + ], + "minInlineSize": [ + ["0","min-w-is_0",{"minInlineSize":"var(--sizes-0)"}], + ["1","min-w-is_1",{"minInlineSize":"var(--sizes-1)"}], + ["2","min-w-is_2",{"minInlineSize":"var(--sizes-2)"}], + ["screen","min-w-is_screen",{"minInlineSize":"100vw"}], + ["red","min-w-is_red",{"minInlineSize":"red"}], + ["red.300/40","min-w-is_red.300/40",{"minInlineSize":"red.300/40"}], + ["10px","min-w-is_10px",{"minInlineSize":"10px"}], + [12,"min-w-is_12",{"minInlineSize":"var(--sizes-12)"}], + [0,"min-w-is_0",{"minInlineSize":"var(--sizes-0)"}], + ["auto","min-w-is_auto",{"minInlineSize":"auto"}], + ["{spacing.4}","min-w-is_{spacing.4}",{"minInlineSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","min-w-is_token(colors.red.300,_blue)",{"minInlineSize":"var(--colors-red-300, blue)"}], + ["a b","min-w-is_a__b",{"minInlineSize":"a b"}], + [true,"min-w-is_true",{"minInlineSize":true}] + ], + "maxWidth": [ + ["0","max-w_0",{"maxWidth":"var(--sizes-0)"}], + ["1","max-w_1",{"maxWidth":"var(--sizes-1)"}], + ["2","max-w_2",{"maxWidth":"var(--sizes-2)"}], + ["screen","max-w_screen",{"maxWidth":"100vw"}], + ["red","max-w_red",{"maxWidth":"red"}], + ["red.300/40","max-w_red.300/40",{"maxWidth":"red.300/40"}], + ["10px","max-w_10px",{"maxWidth":"10px"}], + [12,"max-w_12",{"maxWidth":"var(--sizes-12)"}], + [0,"max-w_0",{"maxWidth":"var(--sizes-0)"}], + ["auto","max-w_auto",{"maxWidth":"auto"}], + ["{spacing.4}","max-w_{spacing.4}",{"maxWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","max-w_token(colors.red.300,_blue)",{"maxWidth":"var(--colors-red-300, blue)"}], + ["a b","max-w_a__b",{"maxWidth":"a b"}], + [true,"max-w_true",{"maxWidth":true}] + ], + "maxInlineSize": [ + ["0","max-w-is_0",{"maxInlineSize":"var(--sizes-0)"}], + ["1","max-w-is_1",{"maxInlineSize":"var(--sizes-1)"}], + ["2","max-w-is_2",{"maxInlineSize":"var(--sizes-2)"}], + ["screen","max-w-is_screen",{"maxInlineSize":"100vw"}], + ["red","max-w-is_red",{"maxInlineSize":"red"}], + ["red.300/40","max-w-is_red.300/40",{"maxInlineSize":"red.300/40"}], + ["10px","max-w-is_10px",{"maxInlineSize":"10px"}], + [12,"max-w-is_12",{"maxInlineSize":"var(--sizes-12)"}], + [0,"max-w-is_0",{"maxInlineSize":"var(--sizes-0)"}], + ["auto","max-w-is_auto",{"maxInlineSize":"auto"}], + ["{spacing.4}","max-w-is_{spacing.4}",{"maxInlineSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","max-w-is_token(colors.red.300,_blue)",{"maxInlineSize":"var(--colors-red-300, blue)"}], + ["a b","max-w-is_a__b",{"maxInlineSize":"a b"}], + [true,"max-w-is_true",{"maxInlineSize":true}] + ], + "height": [ + ["0","h_0",{"height":"var(--sizes-0)"}], + ["1","h_1",{"height":"var(--sizes-1)"}], + ["2","h_2",{"height":"var(--sizes-2)"}], + ["5/6","h_5/6",{"height":"83.333333%"}], + ["red","h_red",{"height":"red"}], + ["red.300/40","h_red.300/40",{"height":"red.300/40"}], + ["10px","h_10px",{"height":"10px"}], + [12,"h_12",{"height":"var(--sizes-12)"}], + [0,"h_0",{"height":"var(--sizes-0)"}], + ["auto","h_auto",{"height":"auto"}], + ["{spacing.4}","h_{spacing.4}",{"height":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","h_token(colors.red.300,_blue)",{"height":"var(--colors-red-300, blue)"}], + ["a b","h_a__b",{"height":"a b"}], + [true,"h_true",{"height":true}] + ], + "blockSize": [ + ["0","h-bs_0",{"blockSize":"var(--sizes-0)"}], + ["1","h-bs_1",{"blockSize":"var(--sizes-1)"}], + ["2","h-bs_2",{"blockSize":"var(--sizes-2)"}], + ["5/6","h-bs_5/6",{"blockSize":"83.333333%"}], + ["red","h-bs_red",{"blockSize":"red"}], + ["red.300/40","h-bs_red.300/40",{"blockSize":"red.300/40"}], + ["10px","h-bs_10px",{"blockSize":"10px"}], + [12,"h-bs_12",{"blockSize":"var(--sizes-12)"}], + [0,"h-bs_0",{"blockSize":"var(--sizes-0)"}], + ["auto","h-bs_auto",{"blockSize":"auto"}], + ["{spacing.4}","h-bs_{spacing.4}",{"blockSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","h-bs_token(colors.red.300,_blue)",{"blockSize":"var(--colors-red-300, blue)"}], + ["a b","h-bs_a__b",{"blockSize":"a b"}], + [true,"h-bs_true",{"blockSize":true}] + ], + "minHeight": [ + ["0","min-h_0",{"minHeight":"var(--sizes-0)"}], + ["1","min-h_1",{"minHeight":"var(--sizes-1)"}], + ["2","min-h_2",{"minHeight":"var(--sizes-2)"}], + ["5/6","min-h_5/6",{"minHeight":"83.333333%"}], + ["red","min-h_red",{"minHeight":"red"}], + ["red.300/40","min-h_red.300/40",{"minHeight":"red.300/40"}], + ["10px","min-h_10px",{"minHeight":"10px"}], + [12,"min-h_12",{"minHeight":"var(--sizes-12)"}], + [0,"min-h_0",{"minHeight":"var(--sizes-0)"}], + ["auto","min-h_auto",{"minHeight":"auto"}], + ["{spacing.4}","min-h_{spacing.4}",{"minHeight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","min-h_token(colors.red.300,_blue)",{"minHeight":"var(--colors-red-300, blue)"}], + ["a b","min-h_a__b",{"minHeight":"a b"}], + [true,"min-h_true",{"minHeight":true}] + ], + "minBlockSize": [ + ["0","min-h-bs_0",{"minBlockSize":"var(--sizes-0)"}], + ["1","min-h-bs_1",{"minBlockSize":"var(--sizes-1)"}], + ["2","min-h-bs_2",{"minBlockSize":"var(--sizes-2)"}], + ["5/6","min-h-bs_5/6",{"minBlockSize":"83.333333%"}], + ["red","min-h-bs_red",{"minBlockSize":"red"}], + ["red.300/40","min-h-bs_red.300/40",{"minBlockSize":"red.300/40"}], + ["10px","min-h-bs_10px",{"minBlockSize":"10px"}], + [12,"min-h-bs_12",{"minBlockSize":"var(--sizes-12)"}], + [0,"min-h-bs_0",{"minBlockSize":"var(--sizes-0)"}], + ["auto","min-h-bs_auto",{"minBlockSize":"auto"}], + ["{spacing.4}","min-h-bs_{spacing.4}",{"minBlockSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","min-h-bs_token(colors.red.300,_blue)",{"minBlockSize":"var(--colors-red-300, blue)"}], + ["a b","min-h-bs_a__b",{"minBlockSize":"a b"}], + [true,"min-h-bs_true",{"minBlockSize":true}] + ], + "maxHeight": [ + ["0","max-h_0",{"maxHeight":"var(--sizes-0)"}], + ["1","max-h_1",{"maxHeight":"var(--sizes-1)"}], + ["2","max-h_2",{"maxHeight":"var(--sizes-2)"}], + ["5/6","max-h_5/6",{"maxHeight":"83.333333%"}], + ["red","max-h_red",{"maxHeight":"red"}], + ["red.300/40","max-h_red.300/40",{"maxHeight":"red.300/40"}], + ["10px","max-h_10px",{"maxHeight":"10px"}], + [12,"max-h_12",{"maxHeight":"var(--sizes-12)"}], + [0,"max-h_0",{"maxHeight":"var(--sizes-0)"}], + ["auto","max-h_auto",{"maxHeight":"auto"}], + ["{spacing.4}","max-h_{spacing.4}",{"maxHeight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","max-h_token(colors.red.300,_blue)",{"maxHeight":"var(--colors-red-300, blue)"}], + ["a b","max-h_a__b",{"maxHeight":"a b"}], + [true,"max-h_true",{"maxHeight":true}] + ], + "maxBlockSize": [ + ["0","max-b_0",{"maxBlockSize":"var(--sizes-0)"}], + ["1","max-b_1",{"maxBlockSize":"var(--sizes-1)"}], + ["2","max-b_2",{"maxBlockSize":"var(--sizes-2)"}], + ["5/6","max-b_5/6",{"maxBlockSize":"83.333333%"}], + ["red","max-b_red",{"maxBlockSize":"red"}], + ["red.300/40","max-b_red.300/40",{"maxBlockSize":"red.300/40"}], + ["10px","max-b_10px",{"maxBlockSize":"10px"}], + [12,"max-b_12",{"maxBlockSize":"var(--sizes-12)"}], + [0,"max-b_0",{"maxBlockSize":"var(--sizes-0)"}], + ["auto","max-b_auto",{"maxBlockSize":"auto"}], + ["{spacing.4}","max-b_{spacing.4}",{"maxBlockSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","max-b_token(colors.red.300,_blue)",{"maxBlockSize":"var(--colors-red-300, blue)"}], + ["a b","max-b_a__b",{"maxBlockSize":"a b"}], + [true,"max-b_true",{"maxBlockSize":true}] + ], + "boxSize": [ + ["0","size_0",{"width":"var(--sizes-0)","height":"var(--sizes-0)"}], + ["1","size_1",{"width":"var(--sizes-1)","height":"var(--sizes-1)"}], + ["2","size_2",{"width":"var(--sizes-2)","height":"var(--sizes-2)"}], + ["screen","size_screen",{"width":"100vw","height":"100vw"}], + ["red","size_red",{"width":"red","height":"red"}], + ["red.300/40","size_red.300/40",{"width":"red.300/40","height":"red.300/40"}], + ["10px","size_10px",{"width":"10px","height":"10px"}], + [12,"size_12",{"width":"var(--sizes-12)","height":"var(--sizes-12)"}], + [0,"size_0",{"width":"var(--sizes-0)","height":"var(--sizes-0)"}], + ["auto","size_auto",{"width":"auto","height":"auto"}], + ["{spacing.4}","size_{spacing.4}",{"width":"var(--spacing-4)","height":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","size_token(colors.red.300,_blue)",{"width":"var(--colors-red-300, blue)","height":"var(--colors-red-300, blue)"}], + ["a b","size_a__b",{"width":"a b","height":"a b"}], + [true,"size_true",{"width":true,"height":true}] + ], + "color": [ + ["current","c_current",{"color":"var(--colors-current)"}], + ["black","c_black",{"color":"var(--colors-black)"}], + ["white","c_white",{"color":"var(--colors-white)"}], + ["colorPalette.heading","c_colorPalette.heading",{"color":"var(--colors-color-palette-heading)"}], + ["red","c_red",{"color":"red"}], + ["red.300/40","c_red.300/40",{"--mix-color":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","color":"var(--mix-color, var(--colors-red-300))"}], + ["10px","c_10px",{"color":"10px"}], + [12,"c_12",{"color":12}], + [0,"c_0",{"color":0}], + ["auto","c_auto",{"color":"auto"}], + ["{spacing.4}","c_{spacing.4}",{"color":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","c_token(colors.red.300,_blue)",{"color":"var(--colors-red-300, blue)"}], + ["a b","c_a__b",{"color":"a b"}], + [true,"c_true",{"color":true}] + ], + "fontFamily": [ + ["sans","ff_sans",{"fontFamily":"var(--fonts-sans)"}], + ["serif","ff_serif",{"fontFamily":"var(--fonts-serif)"}], + ["mono","ff_mono",{"fontFamily":"var(--fonts-mono)"}], + ["red","ff_red",{"fontFamily":"red"}], + ["red.300/40","ff_red.300/40",{"fontFamily":"red.300/40"}], + ["10px","ff_10px",{"fontFamily":"10px"}], + [12,"ff_12",{"fontFamily":12}], + [0,"ff_0",{"fontFamily":0}], + ["auto","ff_auto",{"fontFamily":"auto"}], + ["{spacing.4}","ff_{spacing.4}",{"fontFamily":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ff_token(colors.red.300,_blue)",{"fontFamily":"var(--colors-red-300, blue)"}], + ["a b","ff_a__b",{"fontFamily":"a b"}], + [true,"ff_true",{"fontFamily":true}] + ], + "fontSize": [ + ["2xs","fs_2xs",{"fontSize":"var(--font-sizes-2xs)"}], + ["xs","fs_xs",{"fontSize":"var(--font-sizes-xs)"}], + ["sm","fs_sm",{"fontSize":"var(--font-sizes-sm)"}], + ["9xl","fs_9xl",{"fontSize":"var(--font-sizes-9xl)"}], + ["red","fs_red",{"fontSize":"red"}], + ["red.300/40","fs_red.300/40",{"fontSize":"red.300/40"}], + ["10px","fs_10px",{"fontSize":"10px"}], + [12,"fs_12",{"fontSize":12}], + [0,"fs_0",{"fontSize":0}], + ["auto","fs_auto",{"fontSize":"auto"}], + ["{spacing.4}","fs_{spacing.4}",{"fontSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fs_token(colors.red.300,_blue)",{"fontSize":"var(--colors-red-300, blue)"}], + ["a b","fs_a__b",{"fontSize":"a b"}], + [true,"fs_true",{"fontSize":true}] + ], + "fontSizeAdjust": [ + ["red","fs-a_red",{"fontSizeAdjust":"red"}], + ["red.300/40","fs-a_red.300/40",{"fontSizeAdjust":"red.300/40"}], + ["10px","fs-a_10px",{"fontSizeAdjust":"10px"}], + [12,"fs-a_12",{"fontSizeAdjust":12}], + [0,"fs-a_0",{"fontSizeAdjust":0}], + ["auto","fs-a_auto",{"fontSizeAdjust":"auto"}], + ["{spacing.4}","fs-a_{spacing.4}",{"fontSizeAdjust":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fs-a_token(colors.red.300,_blue)",{"fontSizeAdjust":"var(--colors-red-300, blue)"}], + ["a b","fs-a_a__b",{"fontSizeAdjust":"a b"}], + [true,"fs-a_true",{"fontSizeAdjust":true}] + ], + "fontPalette": [ + ["red","fp_red",{"fontPalette":"red"}], + ["red.300/40","fp_red.300/40",{"fontPalette":"red.300/40"}], + ["10px","fp_10px",{"fontPalette":"10px"}], + [12,"fp_12",{"fontPalette":12}], + [0,"fp_0",{"fontPalette":0}], + ["auto","fp_auto",{"fontPalette":"auto"}], + ["{spacing.4}","fp_{spacing.4}",{"fontPalette":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fp_token(colors.red.300,_blue)",{"fontPalette":"var(--colors-red-300, blue)"}], + ["a b","fp_a__b",{"fontPalette":"a b"}], + [true,"fp_true",{"fontPalette":true}] + ], + "fontKerning": [ + ["red","fk_red",{"fontKerning":"red"}], + ["red.300/40","fk_red.300/40",{"fontKerning":"red.300/40"}], + ["10px","fk_10px",{"fontKerning":"10px"}], + [12,"fk_12",{"fontKerning":12}], + [0,"fk_0",{"fontKerning":0}], + ["auto","fk_auto",{"fontKerning":"auto"}], + ["{spacing.4}","fk_{spacing.4}",{"fontKerning":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fk_token(colors.red.300,_blue)",{"fontKerning":"var(--colors-red-300, blue)"}], + ["a b","fk_a__b",{"fontKerning":"a b"}], + [true,"fk_true",{"fontKerning":true}] + ], + "fontFeatureSettings": [ + ["red","ff-s_red",{"fontFeatureSettings":"red"}], + ["red.300/40","ff-s_red.300/40",{"fontFeatureSettings":"red.300/40"}], + ["10px","ff-s_10px",{"fontFeatureSettings":"10px"}], + [12,"ff-s_12",{"fontFeatureSettings":12}], + [0,"ff-s_0",{"fontFeatureSettings":0}], + ["auto","ff-s_auto",{"fontFeatureSettings":"auto"}], + ["{spacing.4}","ff-s_{spacing.4}",{"fontFeatureSettings":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ff-s_token(colors.red.300,_blue)",{"fontFeatureSettings":"var(--colors-red-300, blue)"}], + ["a b","ff-s_a__b",{"fontFeatureSettings":"a b"}], + [true,"ff-s_true",{"fontFeatureSettings":true}] + ], + "fontWeight": [ + ["thin","fw_thin",{"fontWeight":"var(--font-weights-thin)"}], + ["extralight","fw_extralight",{"fontWeight":"var(--font-weights-extralight)"}], + ["light","fw_light",{"fontWeight":"var(--font-weights-light)"}], + ["black","fw_black",{"fontWeight":"var(--font-weights-black)"}], + ["red","fw_red",{"fontWeight":"red"}], + ["red.300/40","fw_red.300/40",{"fontWeight":"red.300/40"}], + ["10px","fw_10px",{"fontWeight":"10px"}], + [12,"fw_12",{"fontWeight":12}], + [0,"fw_0",{"fontWeight":0}], + ["auto","fw_auto",{"fontWeight":"auto"}], + ["{spacing.4}","fw_{spacing.4}",{"fontWeight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fw_token(colors.red.300,_blue)",{"fontWeight":"var(--colors-red-300, blue)"}], + ["a b","fw_a__b",{"fontWeight":"a b"}], + [true,"fw_true",{"fontWeight":true}] + ], + "fontSmoothing": [ + ["antialiased","fsmt_antialiased",{"WebkitFontSmoothing":"antialiased"}], + ["subpixel-antialiased","fsmt_subpixel-antialiased",{"WebkitFontSmoothing":"auto"}], + ["red","fsmt_red",{"WebkitFontSmoothing":"red"}], + ["red.300/40","fsmt_red.300/40",{"WebkitFontSmoothing":"red.300/40"}], + ["10px","fsmt_10px",{"WebkitFontSmoothing":"10px"}], + [12,"fsmt_12",{"WebkitFontSmoothing":12}], + [0,"fsmt_0",{"WebkitFontSmoothing":0}], + ["auto","fsmt_auto",{"WebkitFontSmoothing":"auto"}], + ["{spacing.4}","fsmt_{spacing.4}",{"WebkitFontSmoothing":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fsmt_token(colors.red.300,_blue)",{"WebkitFontSmoothing":"var(--colors-red-300, blue)"}], + ["a b","fsmt_a__b",{"WebkitFontSmoothing":"a b"}], + [true,"fsmt_true",{"WebkitFontSmoothing":true}] + ], + "fontVariant": [ + ["red","fv_red",{"fontVariant":"red"}], + ["red.300/40","fv_red.300/40",{"fontVariant":"red.300/40"}], + ["10px","fv_10px",{"fontVariant":"10px"}], + [12,"fv_12",{"fontVariant":12}], + [0,"fv_0",{"fontVariant":0}], + ["auto","fv_auto",{"fontVariant":"auto"}], + ["{spacing.4}","fv_{spacing.4}",{"fontVariant":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fv_token(colors.red.300,_blue)",{"fontVariant":"var(--colors-red-300, blue)"}], + ["a b","fv_a__b",{"fontVariant":"a b"}], + [true,"fv_true",{"fontVariant":true}] + ], + "fontVariantAlternates": [ + ["red","fv-alt_red",{"fontVariantAlternates":"red"}], + ["red.300/40","fv-alt_red.300/40",{"fontVariantAlternates":"red.300/40"}], + ["10px","fv-alt_10px",{"fontVariantAlternates":"10px"}], + [12,"fv-alt_12",{"fontVariantAlternates":12}], + [0,"fv-alt_0",{"fontVariantAlternates":0}], + ["auto","fv-alt_auto",{"fontVariantAlternates":"auto"}], + ["{spacing.4}","fv-alt_{spacing.4}",{"fontVariantAlternates":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fv-alt_token(colors.red.300,_blue)",{"fontVariantAlternates":"var(--colors-red-300, blue)"}], + ["a b","fv-alt_a__b",{"fontVariantAlternates":"a b"}], + [true,"fv-alt_true",{"fontVariantAlternates":true}] + ], + "fontVariantCaps": [ + ["red","fv-caps_red",{"fontVariantCaps":"red"}], + ["red.300/40","fv-caps_red.300/40",{"fontVariantCaps":"red.300/40"}], + ["10px","fv-caps_10px",{"fontVariantCaps":"10px"}], + [12,"fv-caps_12",{"fontVariantCaps":12}], + [0,"fv-caps_0",{"fontVariantCaps":0}], + ["auto","fv-caps_auto",{"fontVariantCaps":"auto"}], + ["{spacing.4}","fv-caps_{spacing.4}",{"fontVariantCaps":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fv-caps_token(colors.red.300,_blue)",{"fontVariantCaps":"var(--colors-red-300, blue)"}], + ["a b","fv-caps_a__b",{"fontVariantCaps":"a b"}], + [true,"fv-caps_true",{"fontVariantCaps":true}] + ], + "fontVariationSettings": [ + ["red","fv-s_red",{"fontVariationSettings":"red"}], + ["red.300/40","fv-s_red.300/40",{"fontVariationSettings":"red.300/40"}], + ["10px","fv-s_10px",{"fontVariationSettings":"10px"}], + [12,"fv-s_12",{"fontVariationSettings":12}], + [0,"fv-s_0",{"fontVariationSettings":0}], + ["auto","fv-s_auto",{"fontVariationSettings":"auto"}], + ["{spacing.4}","fv-s_{spacing.4}",{"fontVariationSettings":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fv-s_token(colors.red.300,_blue)",{"fontVariationSettings":"var(--colors-red-300, blue)"}], + ["a b","fv-s_a__b",{"fontVariationSettings":"a b"}], + [true,"fv-s_true",{"fontVariationSettings":true}] + ], + "fontVariantNumeric": [ + ["red","fv-num_red",{"fontVariantNumeric":"red"}], + ["red.300/40","fv-num_red.300/40",{"fontVariantNumeric":"red.300/40"}], + ["10px","fv-num_10px",{"fontVariantNumeric":"10px"}], + [12,"fv-num_12",{"fontVariantNumeric":12}], + [0,"fv-num_0",{"fontVariantNumeric":0}], + ["auto","fv-num_auto",{"fontVariantNumeric":"auto"}], + ["{spacing.4}","fv-num_{spacing.4}",{"fontVariantNumeric":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fv-num_token(colors.red.300,_blue)",{"fontVariantNumeric":"var(--colors-red-300, blue)"}], + ["a b","fv-num_a__b",{"fontVariantNumeric":"a b"}], + [true,"fv-num_true",{"fontVariantNumeric":true}] + ], + "letterSpacing": [ + ["tighter","ls_tighter",{"letterSpacing":"var(--letter-spacings-tighter)"}], + ["tight","ls_tight",{"letterSpacing":"var(--letter-spacings-tight)"}], + ["normal","ls_normal",{"letterSpacing":"var(--letter-spacings-normal)"}], + ["widest","ls_widest",{"letterSpacing":"var(--letter-spacings-widest)"}], + ["red","ls_red",{"letterSpacing":"red"}], + ["red.300/40","ls_red.300/40",{"letterSpacing":"red.300/40"}], + ["10px","ls_10px",{"letterSpacing":"10px"}], + [12,"ls_12",{"letterSpacing":12}], + [0,"ls_0",{"letterSpacing":0}], + ["auto","ls_auto",{"letterSpacing":"auto"}], + ["{spacing.4}","ls_{spacing.4}",{"letterSpacing":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ls_token(colors.red.300,_blue)",{"letterSpacing":"var(--colors-red-300, blue)"}], + ["a b","ls_a__b",{"letterSpacing":"a b"}], + [true,"ls_true",{"letterSpacing":true}] + ], + "lineHeight": [ + ["none","lh_none",{"lineHeight":"var(--line-heights-none)"}], + ["tight","lh_tight",{"lineHeight":"var(--line-heights-tight)"}], + ["snug","lh_snug",{"lineHeight":"var(--line-heights-snug)"}], + ["loose","lh_loose",{"lineHeight":"var(--line-heights-loose)"}], + ["red","lh_red",{"lineHeight":"red"}], + ["red.300/40","lh_red.300/40",{"lineHeight":"red.300/40"}], + ["10px","lh_10px",{"lineHeight":"10px"}], + [12,"lh_12",{"lineHeight":12}], + [0,"lh_0",{"lineHeight":0}], + ["auto","lh_auto",{"lineHeight":"auto"}], + ["{spacing.4}","lh_{spacing.4}",{"lineHeight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","lh_token(colors.red.300,_blue)",{"lineHeight":"var(--colors-red-300, blue)"}], + ["a b","lh_a__b",{"lineHeight":"a b"}], + [true,"lh_true",{"lineHeight":true}] + ], + "textAlign": [ + ["red","ta_red",{"textAlign":"red"}], + ["red.300/40","ta_red.300/40",{"textAlign":"red.300/40"}], + ["10px","ta_10px",{"textAlign":"10px"}], + [12,"ta_12",{"textAlign":12}], + [0,"ta_0",{"textAlign":0}], + ["auto","ta_auto",{"textAlign":"auto"}], + ["{spacing.4}","ta_{spacing.4}",{"textAlign":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ta_token(colors.red.300,_blue)",{"textAlign":"var(--colors-red-300, blue)"}], + ["a b","ta_a__b",{"textAlign":"a b"}], + [true,"ta_true",{"textAlign":true}] + ], + "textDecoration": [ + ["red","td_red",{"textDecoration":"red"}], + ["red.300/40","td_red.300/40",{"textDecoration":"red.300/40"}], + ["10px","td_10px",{"textDecoration":"10px"}], + [12,"td_12",{"textDecoration":12}], + [0,"td_0",{"textDecoration":0}], + ["auto","td_auto",{"textDecoration":"auto"}], + ["{spacing.4}","td_{spacing.4}",{"textDecoration":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","td_token(colors.red.300,_blue)",{"textDecoration":"var(--colors-red-300, blue)"}], + ["a b","td_a__b",{"textDecoration":"a b"}], + [true,"td_true",{"textDecoration":true}] + ], + "textDecorationColor": [ + ["current","td-c_current",{"textDecorationColor":"var(--colors-current)"}], + ["black","td-c_black",{"textDecorationColor":"var(--colors-black)"}], + ["white","td-c_white",{"textDecorationColor":"var(--colors-white)"}], + ["colorPalette.heading","td-c_colorPalette.heading",{"textDecorationColor":"var(--colors-color-palette-heading)"}], + ["red","td-c_red",{"textDecorationColor":"red"}], + ["red.300/40","td-c_red.300/40",{"--mix-textDecorationColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","textDecorationColor":"var(--mix-textDecorationColor, var(--colors-red-300))"}], + ["10px","td-c_10px",{"textDecorationColor":"10px"}], + [12,"td-c_12",{"textDecorationColor":12}], + [0,"td-c_0",{"textDecorationColor":0}], + ["auto","td-c_auto",{"textDecorationColor":"auto"}], + ["{spacing.4}","td-c_{spacing.4}",{"textDecorationColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","td-c_token(colors.red.300,_blue)",{"textDecorationColor":"var(--colors-red-300, blue)"}], + ["a b","td-c_a__b",{"textDecorationColor":"a b"}], + [true,"td-c_true",{"textDecorationColor":true}] + ], + "textEmphasisColor": [ + ["current","te-c_current",{"textEmphasisColor":"var(--colors-current)"}], + ["black","te-c_black",{"textEmphasisColor":"var(--colors-black)"}], + ["white","te-c_white",{"textEmphasisColor":"var(--colors-white)"}], + ["colorPalette.heading","te-c_colorPalette.heading",{"textEmphasisColor":"var(--colors-color-palette-heading)"}], + ["red","te-c_red",{"textEmphasisColor":"red"}], + ["red.300/40","te-c_red.300/40",{"--mix-textEmphasisColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","textEmphasisColor":"var(--mix-textEmphasisColor, var(--colors-red-300))"}], + ["10px","te-c_10px",{"textEmphasisColor":"10px"}], + [12,"te-c_12",{"textEmphasisColor":12}], + [0,"te-c_0",{"textEmphasisColor":0}], + ["auto","te-c_auto",{"textEmphasisColor":"auto"}], + ["{spacing.4}","te-c_{spacing.4}",{"textEmphasisColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","te-c_token(colors.red.300,_blue)",{"textEmphasisColor":"var(--colors-red-300, blue)"}], + ["a b","te-c_a__b",{"textEmphasisColor":"a b"}], + [true,"te-c_true",{"textEmphasisColor":true}] + ], + "textDecorationStyle": [ + ["red","td-s_red",{"textDecorationStyle":"red"}], + ["red.300/40","td-s_red.300/40",{"textDecorationStyle":"red.300/40"}], + ["10px","td-s_10px",{"textDecorationStyle":"10px"}], + [12,"td-s_12",{"textDecorationStyle":12}], + [0,"td-s_0",{"textDecorationStyle":0}], + ["auto","td-s_auto",{"textDecorationStyle":"auto"}], + ["{spacing.4}","td-s_{spacing.4}",{"textDecorationStyle":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","td-s_token(colors.red.300,_blue)",{"textDecorationStyle":"var(--colors-red-300, blue)"}], + ["a b","td-s_a__b",{"textDecorationStyle":"a b"}], + [true,"td-s_true",{"textDecorationStyle":true}] + ], + "textDecorationThickness": [ + ["red","td-t_red",{"textDecorationThickness":"red"}], + ["red.300/40","td-t_red.300/40",{"textDecorationThickness":"red.300/40"}], + ["10px","td-t_10px",{"textDecorationThickness":"10px"}], + [12,"td-t_12",{"textDecorationThickness":12}], + [0,"td-t_0",{"textDecorationThickness":0}], + ["auto","td-t_auto",{"textDecorationThickness":"auto"}], + ["{spacing.4}","td-t_{spacing.4}",{"textDecorationThickness":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","td-t_token(colors.red.300,_blue)",{"textDecorationThickness":"var(--colors-red-300, blue)"}], + ["a b","td-t_a__b",{"textDecorationThickness":"a b"}], + [true,"td-t_true",{"textDecorationThickness":true}] + ], + "textUnderlineOffset": [ + ["red","tu-o_red",{"textUnderlineOffset":"red"}], + ["red.300/40","tu-o_red.300/40",{"textUnderlineOffset":"red.300/40"}], + ["10px","tu-o_10px",{"textUnderlineOffset":"10px"}], + [12,"tu-o_12",{"textUnderlineOffset":12}], + [0,"tu-o_0",{"textUnderlineOffset":0}], + ["auto","tu-o_auto",{"textUnderlineOffset":"auto"}], + ["{spacing.4}","tu-o_{spacing.4}",{"textUnderlineOffset":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","tu-o_token(colors.red.300,_blue)",{"textUnderlineOffset":"var(--colors-red-300, blue)"}], + ["a b","tu-o_a__b",{"textUnderlineOffset":"a b"}], + [true,"tu-o_true",{"textUnderlineOffset":true}] + ], + "textTransform": [ + ["red","tt_red",{"textTransform":"red"}], + ["red.300/40","tt_red.300/40",{"textTransform":"red.300/40"}], + ["10px","tt_10px",{"textTransform":"10px"}], + [12,"tt_12",{"textTransform":12}], + [0,"tt_0",{"textTransform":0}], + ["auto","tt_auto",{"textTransform":"auto"}], + ["{spacing.4}","tt_{spacing.4}",{"textTransform":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","tt_token(colors.red.300,_blue)",{"textTransform":"var(--colors-red-300, blue)"}], + ["a b","tt_a__b",{"textTransform":"a b"}], + [true,"tt_true",{"textTransform":true}] + ], + "textIndent": [ + ["0","ti_0",{"textIndent":"var(--spacing-0)"}], + ["1","ti_1",{"textIndent":"var(--spacing-1)"}], + ["2","ti_2",{"textIndent":"var(--spacing-2)"}], + ["-gutter","ti_-gutter",{"textIndent":"calc(var(--spacing-gutter) * -1)"}], + ["red","ti_red",{"textIndent":"red"}], + ["red.300/40","ti_red.300/40",{"textIndent":"red.300/40"}], + ["10px","ti_10px",{"textIndent":"10px"}], + [12,"ti_12",{"textIndent":"var(--spacing-12)"}], + [0,"ti_0",{"textIndent":"var(--spacing-0)"}], + ["auto","ti_auto",{"textIndent":"auto"}], + ["{spacing.4}","ti_{spacing.4}",{"textIndent":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ti_token(colors.red.300,_blue)",{"textIndent":"var(--colors-red-300, blue)"}], + ["a b","ti_a__b",{"textIndent":"a b"}], + [true,"ti_true",{"textIndent":true}] + ], + "textShadow": [ + ["2xs","tsh_2xs",{"textShadow":"var(--shadows-2xs)"}], + ["xs","tsh_xs",{"textShadow":"var(--shadows-xs)"}], + ["sm","tsh_sm",{"textShadow":"var(--shadows-sm)"}], + ["inset-sm","tsh_inset-sm",{"textShadow":"var(--shadows-inset-sm)"}], + ["red","tsh_red",{"textShadow":"red"}], + ["red.300/40","tsh_red.300/40",{"textShadow":"red.300/40"}], + ["10px","tsh_10px",{"textShadow":"10px"}], + [12,"tsh_12",{"textShadow":12}], + [0,"tsh_0",{"textShadow":0}], + ["auto","tsh_auto",{"textShadow":"auto"}], + ["{spacing.4}","tsh_{spacing.4}",{"textShadow":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","tsh_token(colors.red.300,_blue)",{"textShadow":"var(--colors-red-300, blue)"}], + ["a b","tsh_a__b",{"textShadow":"a b"}], + [true,"tsh_true",{"textShadow":true}] + ], + "textShadowColor": [ + ["current","tsh-c_current",{"--text-shadow-color":"var(--colors-current)"}], + ["black","tsh-c_black",{"--text-shadow-color":"var(--colors-black)"}], + ["white","tsh-c_white",{"--text-shadow-color":"var(--colors-white)"}], + ["colorPalette.heading","tsh-c_colorPalette.heading",{"--text-shadow-color":"var(--colors-color-palette-heading)"}], + ["red","tsh-c_red",{"--text-shadow-color":"red"}], + ["red.300/40","tsh-c_red.300/40",{"--mix---text-shadow-color":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","--text-shadow-color":"var(--mix---text-shadow-color, var(--colors-red-300))"}], + ["10px","tsh-c_10px",{"--text-shadow-color":"10px"}], + [12,"tsh-c_12",{"--text-shadow-color":12}], + [0,"tsh-c_0",{"--text-shadow-color":0}], + ["auto","tsh-c_auto",{"--text-shadow-color":"auto"}], + ["{spacing.4}","tsh-c_{spacing.4}",{"--text-shadow-color":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","tsh-c_token(colors.red.300,_blue)",{"--text-shadow-color":"var(--colors-red-300, blue)"}], + ["a b","tsh-c_a__b",{"--text-shadow-color":"a b"}], + [true,"tsh-c_true",{"--text-shadow-color":true}] + ], + "WebkitTextFillColor": [ + ["current","wktf-c_current",{"WebkitTextFillColor":"var(--colors-current)"}], + ["black","wktf-c_black",{"WebkitTextFillColor":"var(--colors-black)"}], + ["white","wktf-c_white",{"WebkitTextFillColor":"var(--colors-white)"}], + ["colorPalette.heading","wktf-c_colorPalette.heading",{"WebkitTextFillColor":"var(--colors-color-palette-heading)"}], + ["red","wktf-c_red",{"WebkitTextFillColor":"red"}], + ["red.300/40","wktf-c_red.300/40",{"--mix-WebkitTextFillColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","WebkitTextFillColor":"var(--mix-WebkitTextFillColor, var(--colors-red-300))"}], + ["10px","wktf-c_10px",{"WebkitTextFillColor":"10px"}], + [12,"wktf-c_12",{"WebkitTextFillColor":12}], + [0,"wktf-c_0",{"WebkitTextFillColor":0}], + ["auto","wktf-c_auto",{"WebkitTextFillColor":"auto"}], + ["{spacing.4}","wktf-c_{spacing.4}",{"WebkitTextFillColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","wktf-c_token(colors.red.300,_blue)",{"WebkitTextFillColor":"var(--colors-red-300, blue)"}], + ["a b","wktf-c_a__b",{"WebkitTextFillColor":"a b"}], + [true,"wktf-c_true",{"WebkitTextFillColor":true}] + ], + "textOverflow": [ + ["red","tov_red",{"textOverflow":"red"}], + ["red.300/40","tov_red.300/40",{"textOverflow":"red.300/40"}], + ["10px","tov_10px",{"textOverflow":"10px"}], + [12,"tov_12",{"textOverflow":12}], + [0,"tov_0",{"textOverflow":0}], + ["auto","tov_auto",{"textOverflow":"auto"}], + ["{spacing.4}","tov_{spacing.4}",{"textOverflow":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","tov_token(colors.red.300,_blue)",{"textOverflow":"var(--colors-red-300, blue)"}], + ["a b","tov_a__b",{"textOverflow":"a b"}], + [true,"tov_true",{"textOverflow":true}] + ], + "verticalAlign": [ + ["red","va_red",{"verticalAlign":"red"}], + ["red.300/40","va_red.300/40",{"verticalAlign":"red.300/40"}], + ["10px","va_10px",{"verticalAlign":"10px"}], + [12,"va_12",{"verticalAlign":12}], + [0,"va_0",{"verticalAlign":0}], + ["auto","va_auto",{"verticalAlign":"auto"}], + ["{spacing.4}","va_{spacing.4}",{"verticalAlign":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","va_token(colors.red.300,_blue)",{"verticalAlign":"var(--colors-red-300, blue)"}], + ["a b","va_a__b",{"verticalAlign":"a b"}], + [true,"va_true",{"verticalAlign":true}] + ], + "wordBreak": [ + ["red","wb_red",{"wordBreak":"red"}], + ["red.300/40","wb_red.300/40",{"wordBreak":"red.300/40"}], + ["10px","wb_10px",{"wordBreak":"10px"}], + [12,"wb_12",{"wordBreak":12}], + [0,"wb_0",{"wordBreak":0}], + ["auto","wb_auto",{"wordBreak":"auto"}], + ["{spacing.4}","wb_{spacing.4}",{"wordBreak":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","wb_token(colors.red.300,_blue)",{"wordBreak":"var(--colors-red-300, blue)"}], + ["a b","wb_a__b",{"wordBreak":"a b"}], + [true,"wb_true",{"wordBreak":true}] + ], + "textWrap": [ + ["wrap","tw_wrap",{"textWrap":"wrap"}], + ["balance","tw_balance",{"textWrap":"balance"}], + ["nowrap","tw_nowrap",{"textWrap":"nowrap"}], + ["red","tw_red",{"textWrap":"red"}], + ["red.300/40","tw_red.300/40",{"textWrap":"red.300/40"}], + ["10px","tw_10px",{"textWrap":"10px"}], + [12,"tw_12",{"textWrap":12}], + [0,"tw_0",{"textWrap":0}], + ["auto","tw_auto",{"textWrap":"auto"}], + ["{spacing.4}","tw_{spacing.4}",{"textWrap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","tw_token(colors.red.300,_blue)",{"textWrap":"var(--colors-red-300, blue)"}], + ["a b","tw_a__b",{"textWrap":"a b"}], + [true,"tw_true",{"textWrap":true}] + ], + "truncate": [ + ["type","trunc_type",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + ["red","trunc_red",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + ["red.300/40","trunc_red.300/40",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + ["10px","trunc_10px",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + [12,"trunc_12",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + [0,"trunc_0",{}], + ["auto","trunc_auto",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + ["{spacing.4}","trunc_{spacing.4}",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + ["token(colors.red.300, blue)","trunc_token(colors.red.300,_blue)",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + ["a b","trunc_a__b",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}], + [true,"trunc_true",{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap"}] + ], + "lineClamp": [ + ["red","lc_red",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":"red","WebkitBoxOrient":"vertical"}], + ["red.300/40","lc_red.300/40",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":"red.300/40","WebkitBoxOrient":"vertical"}], + ["10px","lc_10px",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":"10px","WebkitBoxOrient":"vertical"}], + [12,"lc_12",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":12,"WebkitBoxOrient":"vertical"}], + [0,"lc_0",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":0,"WebkitBoxOrient":"vertical"}], + ["auto","lc_auto",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":"auto","WebkitBoxOrient":"vertical"}], + ["{spacing.4}","lc_{spacing.4}",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":"var(--spacing-4)","WebkitBoxOrient":"vertical"}], + ["token(colors.red.300, blue)","lc_token(colors.red.300,_blue)",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":"var(--colors-red-300, blue)","WebkitBoxOrient":"vertical"}], + ["a b","lc_a__b",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":"a b","WebkitBoxOrient":"vertical"}], + [true,"lc_true",{"overflow":"hidden","display":"-webkit-box","WebkitLineClamp":true,"WebkitBoxOrient":"vertical"}] + ], + "listStyleType": [ + ["red","li-t_red",{"listStyleType":"red"}], + ["red.300/40","li-t_red.300/40",{"listStyleType":"red.300/40"}], + ["10px","li-t_10px",{"listStyleType":"10px"}], + [12,"li-t_12",{"listStyleType":12}], + [0,"li-t_0",{"listStyleType":0}], + ["auto","li-t_auto",{"listStyleType":"auto"}], + ["{spacing.4}","li-t_{spacing.4}",{"listStyleType":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","li-t_token(colors.red.300,_blue)",{"listStyleType":"var(--colors-red-300, blue)"}], + ["a b","li-t_a__b",{"listStyleType":"a b"}], + [true,"li-t_true",{"listStyleType":true}] + ], + "listStylePosition": [ + ["red","li-pos_red",{"listStylePosition":"red"}], + ["red.300/40","li-pos_red.300/40",{"listStylePosition":"red.300/40"}], + ["10px","li-pos_10px",{"listStylePosition":"10px"}], + [12,"li-pos_12",{"listStylePosition":12}], + [0,"li-pos_0",{"listStylePosition":0}], + ["auto","li-pos_auto",{"listStylePosition":"auto"}], + ["{spacing.4}","li-pos_{spacing.4}",{"listStylePosition":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","li-pos_token(colors.red.300,_blue)",{"listStylePosition":"var(--colors-red-300, blue)"}], + ["a b","li-pos_a__b",{"listStylePosition":"a b"}], + [true,"li-pos_true",{"listStylePosition":true}] + ], + "listStyleImage": [ + ["red","li-img_red",{"listStyleImage":"red"}], + ["red.300/40","li-img_red.300/40",{"listStyleImage":"red.300/40"}], + ["10px","li-img_10px",{"listStyleImage":"10px"}], + [12,"li-img_12",{"listStyleImage":12}], + [0,"li-img_0",{"listStyleImage":0}], + ["auto","li-img_auto",{"listStyleImage":"auto"}], + ["{spacing.4}","li-img_{spacing.4}",{"listStyleImage":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","li-img_token(colors.red.300,_blue)",{"listStyleImage":"var(--colors-red-300, blue)"}], + ["a b","li-img_a__b",{"listStyleImage":"a b"}], + [true,"li-img_true",{"listStyleImage":true}] + ], + "listStyle": [ + ["red","li-s_red",{"listStyle":"red"}], + ["red.300/40","li-s_red.300/40",{"listStyle":"red.300/40"}], + ["10px","li-s_10px",{"listStyle":"10px"}], + [12,"li-s_12",{"listStyle":12}], + [0,"li-s_0",{"listStyle":0}], + ["auto","li-s_auto",{"listStyle":"auto"}], + ["{spacing.4}","li-s_{spacing.4}",{"listStyle":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","li-s_token(colors.red.300,_blue)",{"listStyle":"var(--colors-red-300, blue)"}], + ["a b","li-s_a__b",{"listStyle":"a b"}], + [true,"li-s_true",{"listStyle":true}] + ], + "backgroundPosition": [ + ["red","bg-p_red",{"backgroundPosition":"red"}], + ["red.300/40","bg-p_red.300/40",{"backgroundPosition":"red.300/40"}], + ["10px","bg-p_10px",{"backgroundPosition":"10px"}], + [12,"bg-p_12",{"backgroundPosition":12}], + [0,"bg-p_0",{"backgroundPosition":0}], + ["auto","bg-p_auto",{"backgroundPosition":"auto"}], + ["{spacing.4}","bg-p_{spacing.4}",{"backgroundPosition":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-p_token(colors.red.300,_blue)",{"backgroundPosition":"var(--colors-red-300, blue)"}], + ["a b","bg-p_a__b",{"backgroundPosition":"a b"}], + [true,"bg-p_true",{"backgroundPosition":true}] + ], + "backgroundPositionX": [ + ["red","bg-p-x_red",{"backgroundPositionX":"red"}], + ["red.300/40","bg-p-x_red.300/40",{"backgroundPositionX":"red.300/40"}], + ["10px","bg-p-x_10px",{"backgroundPositionX":"10px"}], + [12,"bg-p-x_12",{"backgroundPositionX":12}], + [0,"bg-p-x_0",{"backgroundPositionX":0}], + ["auto","bg-p-x_auto",{"backgroundPositionX":"auto"}], + ["{spacing.4}","bg-p-x_{spacing.4}",{"backgroundPositionX":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-p-x_token(colors.red.300,_blue)",{"backgroundPositionX":"var(--colors-red-300, blue)"}], + ["a b","bg-p-x_a__b",{"backgroundPositionX":"a b"}], + [true,"bg-p-x_true",{"backgroundPositionX":true}] + ], + "backgroundPositionY": [ + ["red","bg-p-y_red",{"backgroundPositionY":"red"}], + ["red.300/40","bg-p-y_red.300/40",{"backgroundPositionY":"red.300/40"}], + ["10px","bg-p-y_10px",{"backgroundPositionY":"10px"}], + [12,"bg-p-y_12",{"backgroundPositionY":12}], + [0,"bg-p-y_0",{"backgroundPositionY":0}], + ["auto","bg-p-y_auto",{"backgroundPositionY":"auto"}], + ["{spacing.4}","bg-p-y_{spacing.4}",{"backgroundPositionY":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-p-y_token(colors.red.300,_blue)",{"backgroundPositionY":"var(--colors-red-300, blue)"}], + ["a b","bg-p-y_a__b",{"backgroundPositionY":"a b"}], + [true,"bg-p-y_true",{"backgroundPositionY":true}] + ], + "backgroundAttachment": [ + ["red","bg-a_red",{"backgroundAttachment":"red"}], + ["red.300/40","bg-a_red.300/40",{"backgroundAttachment":"red.300/40"}], + ["10px","bg-a_10px",{"backgroundAttachment":"10px"}], + [12,"bg-a_12",{"backgroundAttachment":12}], + [0,"bg-a_0",{"backgroundAttachment":0}], + ["auto","bg-a_auto",{"backgroundAttachment":"auto"}], + ["{spacing.4}","bg-a_{spacing.4}",{"backgroundAttachment":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-a_token(colors.red.300,_blue)",{"backgroundAttachment":"var(--colors-red-300, blue)"}], + ["a b","bg-a_a__b",{"backgroundAttachment":"a b"}], + [true,"bg-a_true",{"backgroundAttachment":true}] + ], + "backgroundClip": [ + ["red","bg-cp_red",{"backgroundClip":"red","WebkitBackgroundClip":"red"}], + ["red.300/40","bg-cp_red.300/40",{"backgroundClip":"red.300/40","WebkitBackgroundClip":"red.300/40"}], + ["10px","bg-cp_10px",{"backgroundClip":"10px","WebkitBackgroundClip":"10px"}], + [12,"bg-cp_12",{"backgroundClip":12,"WebkitBackgroundClip":12}], + [0,"bg-cp_0",{"backgroundClip":0,"WebkitBackgroundClip":0}], + ["auto","bg-cp_auto",{"backgroundClip":"auto","WebkitBackgroundClip":"auto"}], + ["{spacing.4}","bg-cp_{spacing.4}",{"backgroundClip":"var(--spacing-4)","WebkitBackgroundClip":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-cp_token(colors.red.300,_blue)",{"backgroundClip":"var(--colors-red-300, blue)","WebkitBackgroundClip":"var(--colors-red-300, blue)"}], + ["a b","bg-cp_a__b",{"backgroundClip":"a b","WebkitBackgroundClip":"a b"}], + [true,"bg-cp_true",{"backgroundClip":true,"WebkitBackgroundClip":true}] + ], + "background": [ + ["current","bg_current",{"background":"var(--colors-current)"}], + ["black","bg_black",{"background":"var(--colors-black)"}], + ["white","bg_white",{"background":"var(--colors-white)"}], + ["colorPalette.heading","bg_colorPalette.heading",{"background":"var(--colors-color-palette-heading)"}], + ["red","bg_red",{"background":"red"}], + ["red.300/40","bg_red.300/40",{"--mix-background":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","background":"var(--mix-background, var(--colors-red-300))"}], + ["10px","bg_10px",{"background":"10px"}], + [12,"bg_12",{"background":12}], + [0,"bg_0",{"background":0}], + ["auto","bg_auto",{"background":"auto"}], + ["{spacing.4}","bg_{spacing.4}",{"background":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg_token(colors.red.300,_blue)",{"background":"var(--colors-red-300, blue)"}], + ["a b","bg_a__b",{"background":"a b"}], + [true,"bg_true",{"background":true}] + ], + "backgroundColor": [ + ["current","bg-c_current",{"backgroundColor":"var(--colors-current)"}], + ["black","bg-c_black",{"backgroundColor":"var(--colors-black)"}], + ["white","bg-c_white",{"backgroundColor":"var(--colors-white)"}], + ["colorPalette.heading","bg-c_colorPalette.heading",{"backgroundColor":"var(--colors-color-palette-heading)"}], + ["red","bg-c_red",{"backgroundColor":"red"}], + ["red.300/40","bg-c_red.300/40",{"--mix-backgroundColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","backgroundColor":"var(--mix-backgroundColor, var(--colors-red-300))"}], + ["10px","bg-c_10px",{"backgroundColor":"10px"}], + [12,"bg-c_12",{"backgroundColor":12}], + [0,"bg-c_0",{"backgroundColor":0}], + ["auto","bg-c_auto",{"backgroundColor":"auto"}], + ["{spacing.4}","bg-c_{spacing.4}",{"backgroundColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-c_token(colors.red.300,_blue)",{"backgroundColor":"var(--colors-red-300, blue)"}], + ["a b","bg-c_a__b",{"backgroundColor":"a b"}], + [true,"bg-c_true",{"backgroundColor":true}] + ], + "backgroundOrigin": [ + ["red","bg-o_red",{"backgroundOrigin":"red"}], + ["red.300/40","bg-o_red.300/40",{"backgroundOrigin":"red.300/40"}], + ["10px","bg-o_10px",{"backgroundOrigin":"10px"}], + [12,"bg-o_12",{"backgroundOrigin":12}], + [0,"bg-o_0",{"backgroundOrigin":0}], + ["auto","bg-o_auto",{"backgroundOrigin":"auto"}], + ["{spacing.4}","bg-o_{spacing.4}",{"backgroundOrigin":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-o_token(colors.red.300,_blue)",{"backgroundOrigin":"var(--colors-red-300, blue)"}], + ["a b","bg-o_a__b",{"backgroundOrigin":"a b"}], + [true,"bg-o_true",{"backgroundOrigin":true}] + ], + "backgroundImage": [ + ["red","bg-i_red",{"backgroundImage":"red"}], + ["red.300/40","bg-i_red.300/40",{"backgroundImage":"red.300/40"}], + ["10px","bg-i_10px",{"backgroundImage":"10px"}], + [12,"bg-i_12",{"backgroundImage":12}], + [0,"bg-i_0",{"backgroundImage":0}], + ["auto","bg-i_auto",{"backgroundImage":"auto"}], + ["{spacing.4}","bg-i_{spacing.4}",{"backgroundImage":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-i_token(colors.red.300,_blue)",{"backgroundImage":"var(--colors-red-300, blue)"}], + ["a b","bg-i_a__b",{"backgroundImage":"a b"}], + [true,"bg-i_true",{"backgroundImage":true}] + ], + "backgroundRepeat": [ + ["red","bg-r_red",{"backgroundRepeat":"red"}], + ["red.300/40","bg-r_red.300/40",{"backgroundRepeat":"red.300/40"}], + ["10px","bg-r_10px",{"backgroundRepeat":"10px"}], + [12,"bg-r_12",{"backgroundRepeat":12}], + [0,"bg-r_0",{"backgroundRepeat":0}], + ["auto","bg-r_auto",{"backgroundRepeat":"auto"}], + ["{spacing.4}","bg-r_{spacing.4}",{"backgroundRepeat":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-r_token(colors.red.300,_blue)",{"backgroundRepeat":"var(--colors-red-300, blue)"}], + ["a b","bg-r_a__b",{"backgroundRepeat":"a b"}], + [true,"bg-r_true",{"backgroundRepeat":true}] + ], + "backgroundBlendMode": [ + ["red","bg-bm_red",{"backgroundBlendMode":"red"}], + ["red.300/40","bg-bm_red.300/40",{"backgroundBlendMode":"red.300/40"}], + ["10px","bg-bm_10px",{"backgroundBlendMode":"10px"}], + [12,"bg-bm_12",{"backgroundBlendMode":12}], + [0,"bg-bm_0",{"backgroundBlendMode":0}], + ["auto","bg-bm_auto",{"backgroundBlendMode":"auto"}], + ["{spacing.4}","bg-bm_{spacing.4}",{"backgroundBlendMode":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-bm_token(colors.red.300,_blue)",{"backgroundBlendMode":"var(--colors-red-300, blue)"}], + ["a b","bg-bm_a__b",{"backgroundBlendMode":"a b"}], + [true,"bg-bm_true",{"backgroundBlendMode":true}] + ], + "backgroundSize": [ + ["red","bg-s_red",{"backgroundSize":"red"}], + ["red.300/40","bg-s_red.300/40",{"backgroundSize":"red.300/40"}], + ["10px","bg-s_10px",{"backgroundSize":"10px"}], + [12,"bg-s_12",{"backgroundSize":12}], + [0,"bg-s_0",{"backgroundSize":0}], + ["auto","bg-s_auto",{"backgroundSize":"auto"}], + ["{spacing.4}","bg-s_{spacing.4}",{"backgroundSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-s_token(colors.red.300,_blue)",{"backgroundSize":"var(--colors-red-300, blue)"}], + ["a b","bg-s_a__b",{"backgroundSize":"a b"}], + [true,"bg-s_true",{"backgroundSize":true}] + ], + "backgroundGradient": [ + ["to-t","bg-grad_to-t",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top","backgroundImage":"linear-gradient(var(--gradient-stops))"}], + ["to-tr","bg-grad_to-tr",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top right","backgroundImage":"linear-gradient(var(--gradient-stops))"}], + ["to-r","bg-grad_to-r",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to right","backgroundImage":"linear-gradient(var(--gradient-stops))"}], + ["to-tl","bg-grad_to-tl",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top left","backgroundImage":"linear-gradient(var(--gradient-stops))"}], + ["red","bg-grad_red",{"backgroundImage":"red"}], + ["red.300/40","bg-grad_red.300/40",{"backgroundImage":"red.300/40"}], + ["10px","bg-grad_10px",{"backgroundImage":"10px"}], + [12,"bg-grad_12",{"backgroundImage":12}], + [0,"bg-grad_0",{"backgroundImage":0}], + ["auto","bg-grad_auto",{"backgroundImage":"auto"}], + ["{spacing.4}","bg-grad_{spacing.4}",{"backgroundImage":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-grad_token(colors.red.300,_blue)",{"backgroundImage":"var(--colors-red-300, blue)"}], + ["a b","bg-grad_a__b",{"backgroundImage":"a b"}], + [true,"bg-grad_true",{"backgroundImage":true}] + ], + "backgroundLinear": [ + ["to-t","bg-linear_to-t",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top","backgroundImage":"linear-gradient(var(--gradient-stops))"}], + ["to-tr","bg-linear_to-tr",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top right","backgroundImage":"linear-gradient(var(--gradient-stops))"}], + ["to-r","bg-linear_to-r",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to right","backgroundImage":"linear-gradient(var(--gradient-stops))"}], + ["to-tl","bg-linear_to-tl",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top left","backgroundImage":"linear-gradient(var(--gradient-stops))"}], + ["red","bg-linear_red",{"backgroundImage":"red"}], + ["red.300/40","bg-linear_red.300/40",{"backgroundImage":"red.300/40"}], + ["10px","bg-linear_10px",{"backgroundImage":"10px"}], + [12,"bg-linear_12",{"backgroundImage":12}], + [0,"bg-linear_0",{"backgroundImage":0}], + ["auto","bg-linear_auto",{"backgroundImage":"auto"}], + ["{spacing.4}","bg-linear_{spacing.4}",{"backgroundImage":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bg-linear_token(colors.red.300,_blue)",{"backgroundImage":"var(--colors-red-300, blue)"}], + ["a b","bg-linear_a__b",{"backgroundImage":"a b"}], + [true,"bg-linear_true",{"backgroundImage":true}] + ], + "backgroundRadial": [ + ["red","bg-radial_red",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"red","backgroundImage":"radial-gradient(var(--gradient-stops,red))"}], + ["red.300/40","bg-radial_red.300/40",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"red.300/40","backgroundImage":"radial-gradient(var(--gradient-stops,red.300/40))"}], + ["10px","bg-radial_10px",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"10px","backgroundImage":"radial-gradient(var(--gradient-stops,10px))"}], + [12,"bg-radial_12",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":12,"backgroundImage":"radial-gradient(var(--gradient-stops,12))"}], + [0,"bg-radial_0",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":0,"backgroundImage":"radial-gradient(var(--gradient-stops,0))"}], + ["auto","bg-radial_auto",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"auto","backgroundImage":"radial-gradient(var(--gradient-stops,auto))"}], + ["{spacing.4}","bg-radial_{spacing.4}",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"var(--spacing-4)","backgroundImage":"radial-gradient(var(--gradient-stops,var(--spacing-4)))"}], + ["token(colors.red.300, blue)","bg-radial_token(colors.red.300,_blue)",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"var(--colors-red-300, blue)","backgroundImage":"radial-gradient(var(--gradient-stops,var(--colors-red-300, blue)))"}], + ["a b","bg-radial_a__b",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"a b","backgroundImage":"radial-gradient(var(--gradient-stops,a b))"}], + [true,"bg-radial_true",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":true,"backgroundImage":"radial-gradient(var(--gradient-stops,true))"}] + ], + "backgroundConic": [ + ["red","bg-conic_red",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"red","backgroundImage":"conic-gradient(var(--gradient-stops))"}], + ["red.300/40","bg-conic_red.300/40",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"red.300/40","backgroundImage":"conic-gradient(var(--gradient-stops))"}], + ["10px","bg-conic_10px",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"10px","backgroundImage":"conic-gradient(var(--gradient-stops))"}], + [12,"bg-conic_12",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":12,"backgroundImage":"conic-gradient(var(--gradient-stops))"}], + [0,"bg-conic_0",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":0,"backgroundImage":"conic-gradient(var(--gradient-stops))"}], + ["auto","bg-conic_auto",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"auto","backgroundImage":"conic-gradient(var(--gradient-stops))"}], + ["{spacing.4}","bg-conic_{spacing.4}",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"var(--spacing-4)","backgroundImage":"conic-gradient(var(--gradient-stops))"}], + ["token(colors.red.300, blue)","bg-conic_token(colors.red.300,_blue)",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"var(--colors-red-300, blue)","backgroundImage":"conic-gradient(var(--gradient-stops))"}], + ["a b","bg-conic_a__b",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"a b","backgroundImage":"conic-gradient(var(--gradient-stops))"}], + [true,"bg-conic_true",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":true,"backgroundImage":"conic-gradient(var(--gradient-stops))"}] + ], + "textGradient": [ + ["to-t","txt-grad_to-t",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top","backgroundImage":"linear-gradient(var(--gradient-stops))","WebkitBackgroundClip":"text","color":"transparent"}], + ["to-tr","txt-grad_to-tr",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top right","backgroundImage":"linear-gradient(var(--gradient-stops))","WebkitBackgroundClip":"text","color":"transparent"}], + ["to-r","txt-grad_to-r",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to right","backgroundImage":"linear-gradient(var(--gradient-stops))","WebkitBackgroundClip":"text","color":"transparent"}], + ["to-tl","txt-grad_to-tl",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top left","backgroundImage":"linear-gradient(var(--gradient-stops))","WebkitBackgroundClip":"text","color":"transparent"}], + ["red","txt-grad_red",{"backgroundImage":"red","WebkitBackgroundClip":"text","color":"transparent"}], + ["red.300/40","txt-grad_red.300/40",{"backgroundImage":"red.300/40","WebkitBackgroundClip":"text","color":"transparent"}], + ["10px","txt-grad_10px",{"backgroundImage":"10px","WebkitBackgroundClip":"text","color":"transparent"}], + [12,"txt-grad_12",{"backgroundImage":12,"WebkitBackgroundClip":"text","color":"transparent"}], + [0,"txt-grad_0",{"backgroundImage":0,"WebkitBackgroundClip":"text","color":"transparent"}], + ["auto","txt-grad_auto",{"backgroundImage":"auto","WebkitBackgroundClip":"text","color":"transparent"}], + ["{spacing.4}","txt-grad_{spacing.4}",{"backgroundImage":"var(--spacing-4)","WebkitBackgroundClip":"text","color":"transparent"}], + ["token(colors.red.300, blue)","txt-grad_token(colors.red.300,_blue)",{"backgroundImage":"var(--colors-red-300, blue)","WebkitBackgroundClip":"text","color":"transparent"}], + ["a b","txt-grad_a__b",{"backgroundImage":"a b","WebkitBackgroundClip":"text","color":"transparent"}], + [true,"txt-grad_true",{"backgroundImage":true,"WebkitBackgroundClip":"text","color":"transparent"}] + ], + "gradientFromPosition": [ + ["red","grad-from-pos_red",{"--gradient-from-position":"red"}], + ["red.300/40","grad-from-pos_red.300/40",{"--gradient-from-position":"red.300/40"}], + ["10px","grad-from-pos_10px",{"--gradient-from-position":"10px"}], + [12,"grad-from-pos_12",{"--gradient-from-position":12}], + [0,"grad-from-pos_0",{"--gradient-from-position":0}], + ["auto","grad-from-pos_auto",{"--gradient-from-position":"auto"}], + ["{spacing.4}","grad-from-pos_{spacing.4}",{"--gradient-from-position":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grad-from-pos_token(colors.red.300,_blue)",{"--gradient-from-position":"var(--colors-red-300, blue)"}], + ["a b","grad-from-pos_a__b",{"--gradient-from-position":"a b"}], + [true,"grad-from-pos_true",{"--gradient-from-position":true}] + ], + "gradientToPosition": [ + ["red","grad-to-pos_red",{"--gradient-to-position":"red"}], + ["red.300/40","grad-to-pos_red.300/40",{"--gradient-to-position":"red.300/40"}], + ["10px","grad-to-pos_10px",{"--gradient-to-position":"10px"}], + [12,"grad-to-pos_12",{"--gradient-to-position":12}], + [0,"grad-to-pos_0",{"--gradient-to-position":0}], + ["auto","grad-to-pos_auto",{"--gradient-to-position":"auto"}], + ["{spacing.4}","grad-to-pos_{spacing.4}",{"--gradient-to-position":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grad-to-pos_token(colors.red.300,_blue)",{"--gradient-to-position":"var(--colors-red-300, blue)"}], + ["a b","grad-to-pos_a__b",{"--gradient-to-position":"a b"}], + [true,"grad-to-pos_true",{"--gradient-to-position":true}] + ], + "gradientFrom": [ + ["current","grad-from_current",{"--gradient-from":"var(--colors-current)"}], + ["black","grad-from_black",{"--gradient-from":"var(--colors-black)"}], + ["white","grad-from_white",{"--gradient-from":"var(--colors-white)"}], + ["colorPalette.heading","grad-from_colorPalette.heading",{"--gradient-from":"var(--colors-color-palette-heading)"}], + ["red","grad-from_red",{"--gradient-from":"red"}], + ["red.300/40","grad-from_red.300/40",{"--mix---gradient-from":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","--gradient-from":"var(--mix---gradient-from, var(--colors-red-300))"}], + ["10px","grad-from_10px",{"--gradient-from":"10px"}], + [12,"grad-from_12",{"--gradient-from":12}], + [0,"grad-from_0",{"--gradient-from":0}], + ["auto","grad-from_auto",{"--gradient-from":"auto"}], + ["{spacing.4}","grad-from_{spacing.4}",{"--gradient-from":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grad-from_token(colors.red.300,_blue)",{"--gradient-from":"var(--colors-red-300, blue)"}], + ["a b","grad-from_a__b",{"--gradient-from":"a b"}], + [true,"grad-from_true",{"--gradient-from":true}] + ], + "gradientTo": [ + ["current","grad-to_current",{"--gradient-to":"var(--colors-current)"}], + ["black","grad-to_black",{"--gradient-to":"var(--colors-black)"}], + ["white","grad-to_white",{"--gradient-to":"var(--colors-white)"}], + ["colorPalette.heading","grad-to_colorPalette.heading",{"--gradient-to":"var(--colors-color-palette-heading)"}], + ["red","grad-to_red",{"--gradient-to":"red"}], + ["red.300/40","grad-to_red.300/40",{"--mix---gradient-to":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","--gradient-to":"var(--mix---gradient-to, var(--colors-red-300))"}], + ["10px","grad-to_10px",{"--gradient-to":"10px"}], + [12,"grad-to_12",{"--gradient-to":12}], + [0,"grad-to_0",{"--gradient-to":0}], + ["auto","grad-to_auto",{"--gradient-to":"auto"}], + ["{spacing.4}","grad-to_{spacing.4}",{"--gradient-to":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grad-to_token(colors.red.300,_blue)",{"--gradient-to":"var(--colors-red-300, blue)"}], + ["a b","grad-to_a__b",{"--gradient-to":"a b"}], + [true,"grad-to_true",{"--gradient-to":true}] + ], + "gradientVia": [ + ["current","grad-via_current",{"--gradient-via":"var(--colors-current)","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["black","grad-via_black",{"--gradient-via":"var(--colors-black)","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["white","grad-via_white",{"--gradient-via":"var(--colors-white)","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["colorPalette.heading","grad-via_colorPalette.heading",{"--gradient-via":"var(--colors-color-palette-heading)","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["red","grad-via_red",{"--gradient-via":"red","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["red.300/40","grad-via_red.300/40",{"--mix---gradient-via":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","--gradient-via":"var(--mix---gradient-via, var(--colors-red-300))","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["10px","grad-via_10px",{"--gradient-via":"10px","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + [12,"grad-via_12",{"--gradient-via":12,"--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + [0,"grad-via_0",{"--gradient-via":0,"--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["auto","grad-via_auto",{"--gradient-via":"auto","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["{spacing.4}","grad-via_{spacing.4}",{"--gradient-via":"var(--spacing-4)","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["token(colors.red.300, blue)","grad-via_token(colors.red.300,_blue)",{"--gradient-via":"var(--colors-red-300, blue)","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + ["a b","grad-via_a__b",{"--gradient-via":"a b","--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}], + [true,"grad-via_true",{"--gradient-via":true,"--gradient-stops":"var(--gradient-via-stops)","--gradient-via-stops":"var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"}] + ], + "gradientViaPosition": [ + ["red","grad-via-pos_red",{"--gradient-via-position":"red"}], + ["red.300/40","grad-via-pos_red.300/40",{"--gradient-via-position":"red.300/40"}], + ["10px","grad-via-pos_10px",{"--gradient-via-position":"10px"}], + [12,"grad-via-pos_12",{"--gradient-via-position":12}], + [0,"grad-via-pos_0",{"--gradient-via-position":0}], + ["auto","grad-via-pos_auto",{"--gradient-via-position":"auto"}], + ["{spacing.4}","grad-via-pos_{spacing.4}",{"--gradient-via-position":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","grad-via-pos_token(colors.red.300,_blue)",{"--gradient-via-position":"var(--colors-red-300, blue)"}], + ["a b","grad-via-pos_a__b",{"--gradient-via-position":"a b"}], + [true,"grad-via-pos_true",{"--gradient-via-position":true}] + ], + "borderRadius": [ + ["xs","bdr_xs",{"borderRadius":"var(--radii-xs)"}], + ["sm","bdr_sm",{"borderRadius":"var(--radii-sm)"}], + ["md","bdr_md",{"borderRadius":"var(--radii-md)"}], + ["full","bdr_full",{"borderRadius":"var(--radii-full)"}], + ["red","bdr_red",{"borderRadius":"red"}], + ["red.300/40","bdr_red.300/40",{"borderRadius":"red.300/40"}], + ["10px","bdr_10px",{"borderRadius":"10px"}], + [12,"bdr_12",{"borderRadius":12}], + [0,"bdr_0",{"borderRadius":0}], + ["auto","bdr_auto",{"borderRadius":"auto"}], + ["{spacing.4}","bdr_{spacing.4}",{"borderRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr_token(colors.red.300,_blue)",{"borderRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr_a__b",{"borderRadius":"a b"}], + [true,"bdr_true",{"borderRadius":true}] + ], + "borderTopLeftRadius": [ + ["xs","bdr-tl_xs",{"borderTopLeftRadius":"var(--radii-xs)"}], + ["sm","bdr-tl_sm",{"borderTopLeftRadius":"var(--radii-sm)"}], + ["md","bdr-tl_md",{"borderTopLeftRadius":"var(--radii-md)"}], + ["full","bdr-tl_full",{"borderTopLeftRadius":"var(--radii-full)"}], + ["red","bdr-tl_red",{"borderTopLeftRadius":"red"}], + ["red.300/40","bdr-tl_red.300/40",{"borderTopLeftRadius":"red.300/40"}], + ["10px","bdr-tl_10px",{"borderTopLeftRadius":"10px"}], + [12,"bdr-tl_12",{"borderTopLeftRadius":12}], + [0,"bdr-tl_0",{"borderTopLeftRadius":0}], + ["auto","bdr-tl_auto",{"borderTopLeftRadius":"auto"}], + ["{spacing.4}","bdr-tl_{spacing.4}",{"borderTopLeftRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-tl_token(colors.red.300,_blue)",{"borderTopLeftRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-tl_a__b",{"borderTopLeftRadius":"a b"}], + [true,"bdr-tl_true",{"borderTopLeftRadius":true}] + ], + "borderTopRightRadius": [ + ["xs","bdr-tr_xs",{"borderTopRightRadius":"var(--radii-xs)"}], + ["sm","bdr-tr_sm",{"borderTopRightRadius":"var(--radii-sm)"}], + ["md","bdr-tr_md",{"borderTopRightRadius":"var(--radii-md)"}], + ["full","bdr-tr_full",{"borderTopRightRadius":"var(--radii-full)"}], + ["red","bdr-tr_red",{"borderTopRightRadius":"red"}], + ["red.300/40","bdr-tr_red.300/40",{"borderTopRightRadius":"red.300/40"}], + ["10px","bdr-tr_10px",{"borderTopRightRadius":"10px"}], + [12,"bdr-tr_12",{"borderTopRightRadius":12}], + [0,"bdr-tr_0",{"borderTopRightRadius":0}], + ["auto","bdr-tr_auto",{"borderTopRightRadius":"auto"}], + ["{spacing.4}","bdr-tr_{spacing.4}",{"borderTopRightRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-tr_token(colors.red.300,_blue)",{"borderTopRightRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-tr_a__b",{"borderTopRightRadius":"a b"}], + [true,"bdr-tr_true",{"borderTopRightRadius":true}] + ], + "borderBottomRightRadius": [ + ["xs","bdr-br_xs",{"borderBottomRightRadius":"var(--radii-xs)"}], + ["sm","bdr-br_sm",{"borderBottomRightRadius":"var(--radii-sm)"}], + ["md","bdr-br_md",{"borderBottomRightRadius":"var(--radii-md)"}], + ["full","bdr-br_full",{"borderBottomRightRadius":"var(--radii-full)"}], + ["red","bdr-br_red",{"borderBottomRightRadius":"red"}], + ["red.300/40","bdr-br_red.300/40",{"borderBottomRightRadius":"red.300/40"}], + ["10px","bdr-br_10px",{"borderBottomRightRadius":"10px"}], + [12,"bdr-br_12",{"borderBottomRightRadius":12}], + [0,"bdr-br_0",{"borderBottomRightRadius":0}], + ["auto","bdr-br_auto",{"borderBottomRightRadius":"auto"}], + ["{spacing.4}","bdr-br_{spacing.4}",{"borderBottomRightRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-br_token(colors.red.300,_blue)",{"borderBottomRightRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-br_a__b",{"borderBottomRightRadius":"a b"}], + [true,"bdr-br_true",{"borderBottomRightRadius":true}] + ], + "borderBottomLeftRadius": [ + ["xs","bdr-bl_xs",{"borderBottomLeftRadius":"var(--radii-xs)"}], + ["sm","bdr-bl_sm",{"borderBottomLeftRadius":"var(--radii-sm)"}], + ["md","bdr-bl_md",{"borderBottomLeftRadius":"var(--radii-md)"}], + ["full","bdr-bl_full",{"borderBottomLeftRadius":"var(--radii-full)"}], + ["red","bdr-bl_red",{"borderBottomLeftRadius":"red"}], + ["red.300/40","bdr-bl_red.300/40",{"borderBottomLeftRadius":"red.300/40"}], + ["10px","bdr-bl_10px",{"borderBottomLeftRadius":"10px"}], + [12,"bdr-bl_12",{"borderBottomLeftRadius":12}], + [0,"bdr-bl_0",{"borderBottomLeftRadius":0}], + ["auto","bdr-bl_auto",{"borderBottomLeftRadius":"auto"}], + ["{spacing.4}","bdr-bl_{spacing.4}",{"borderBottomLeftRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-bl_token(colors.red.300,_blue)",{"borderBottomLeftRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-bl_a__b",{"borderBottomLeftRadius":"a b"}], + [true,"bdr-bl_true",{"borderBottomLeftRadius":true}] + ], + "borderTopRadius": [ + ["xs","bdr-t_xs",{"borderTopLeftRadius":"var(--radii-xs)","borderTopRightRadius":"var(--radii-xs)"}], + ["sm","bdr-t_sm",{"borderTopLeftRadius":"var(--radii-sm)","borderTopRightRadius":"var(--radii-sm)"}], + ["md","bdr-t_md",{"borderTopLeftRadius":"var(--radii-md)","borderTopRightRadius":"var(--radii-md)"}], + ["full","bdr-t_full",{"borderTopLeftRadius":"var(--radii-full)","borderTopRightRadius":"var(--radii-full)"}], + ["red","bdr-t_red",{"borderTopLeftRadius":"red","borderTopRightRadius":"red"}], + ["red.300/40","bdr-t_red.300/40",{"borderTopLeftRadius":"red.300/40","borderTopRightRadius":"red.300/40"}], + ["10px","bdr-t_10px",{"borderTopLeftRadius":"10px","borderTopRightRadius":"10px"}], + [12,"bdr-t_12",{"borderTopLeftRadius":12,"borderTopRightRadius":12}], + [0,"bdr-t_0",{"borderTopLeftRadius":0,"borderTopRightRadius":0}], + ["auto","bdr-t_auto",{"borderTopLeftRadius":"auto","borderTopRightRadius":"auto"}], + ["{spacing.4}","bdr-t_{spacing.4}",{"borderTopLeftRadius":"var(--spacing-4)","borderTopRightRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-t_token(colors.red.300,_blue)",{"borderTopLeftRadius":"var(--colors-red-300, blue)","borderTopRightRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-t_a__b",{"borderTopLeftRadius":"a b","borderTopRightRadius":"a b"}], + [true,"bdr-t_true",{"borderTopLeftRadius":true,"borderTopRightRadius":true}] + ], + "borderRightRadius": [ + ["xs","bdr-r_xs",{"borderTopRightRadius":"var(--radii-xs)","borderBottomRightRadius":"var(--radii-xs)"}], + ["sm","bdr-r_sm",{"borderTopRightRadius":"var(--radii-sm)","borderBottomRightRadius":"var(--radii-sm)"}], + ["md","bdr-r_md",{"borderTopRightRadius":"var(--radii-md)","borderBottomRightRadius":"var(--radii-md)"}], + ["full","bdr-r_full",{"borderTopRightRadius":"var(--radii-full)","borderBottomRightRadius":"var(--radii-full)"}], + ["red","bdr-r_red",{"borderTopRightRadius":"red","borderBottomRightRadius":"red"}], + ["red.300/40","bdr-r_red.300/40",{"borderTopRightRadius":"red.300/40","borderBottomRightRadius":"red.300/40"}], + ["10px","bdr-r_10px",{"borderTopRightRadius":"10px","borderBottomRightRadius":"10px"}], + [12,"bdr-r_12",{"borderTopRightRadius":12,"borderBottomRightRadius":12}], + [0,"bdr-r_0",{"borderTopRightRadius":0,"borderBottomRightRadius":0}], + ["auto","bdr-r_auto",{"borderTopRightRadius":"auto","borderBottomRightRadius":"auto"}], + ["{spacing.4}","bdr-r_{spacing.4}",{"borderTopRightRadius":"var(--spacing-4)","borderBottomRightRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-r_token(colors.red.300,_blue)",{"borderTopRightRadius":"var(--colors-red-300, blue)","borderBottomRightRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-r_a__b",{"borderTopRightRadius":"a b","borderBottomRightRadius":"a b"}], + [true,"bdr-r_true",{"borderTopRightRadius":true,"borderBottomRightRadius":true}] + ], + "borderBottomRadius": [ + ["xs","bdr-b_xs",{"borderBottomLeftRadius":"var(--radii-xs)","borderBottomRightRadius":"var(--radii-xs)"}], + ["sm","bdr-b_sm",{"borderBottomLeftRadius":"var(--radii-sm)","borderBottomRightRadius":"var(--radii-sm)"}], + ["md","bdr-b_md",{"borderBottomLeftRadius":"var(--radii-md)","borderBottomRightRadius":"var(--radii-md)"}], + ["full","bdr-b_full",{"borderBottomLeftRadius":"var(--radii-full)","borderBottomRightRadius":"var(--radii-full)"}], + ["red","bdr-b_red",{"borderBottomLeftRadius":"red","borderBottomRightRadius":"red"}], + ["red.300/40","bdr-b_red.300/40",{"borderBottomLeftRadius":"red.300/40","borderBottomRightRadius":"red.300/40"}], + ["10px","bdr-b_10px",{"borderBottomLeftRadius":"10px","borderBottomRightRadius":"10px"}], + [12,"bdr-b_12",{"borderBottomLeftRadius":12,"borderBottomRightRadius":12}], + [0,"bdr-b_0",{"borderBottomLeftRadius":0,"borderBottomRightRadius":0}], + ["auto","bdr-b_auto",{"borderBottomLeftRadius":"auto","borderBottomRightRadius":"auto"}], + ["{spacing.4}","bdr-b_{spacing.4}",{"borderBottomLeftRadius":"var(--spacing-4)","borderBottomRightRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-b_token(colors.red.300,_blue)",{"borderBottomLeftRadius":"var(--colors-red-300, blue)","borderBottomRightRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-b_a__b",{"borderBottomLeftRadius":"a b","borderBottomRightRadius":"a b"}], + [true,"bdr-b_true",{"borderBottomLeftRadius":true,"borderBottomRightRadius":true}] + ], + "borderLeftRadius": [ + ["xs","bdr-l_xs",{"borderTopLeftRadius":"var(--radii-xs)","borderBottomLeftRadius":"var(--radii-xs)"}], + ["sm","bdr-l_sm",{"borderTopLeftRadius":"var(--radii-sm)","borderBottomLeftRadius":"var(--radii-sm)"}], + ["md","bdr-l_md",{"borderTopLeftRadius":"var(--radii-md)","borderBottomLeftRadius":"var(--radii-md)"}], + ["full","bdr-l_full",{"borderTopLeftRadius":"var(--radii-full)","borderBottomLeftRadius":"var(--radii-full)"}], + ["red","bdr-l_red",{"borderTopLeftRadius":"red","borderBottomLeftRadius":"red"}], + ["red.300/40","bdr-l_red.300/40",{"borderTopLeftRadius":"red.300/40","borderBottomLeftRadius":"red.300/40"}], + ["10px","bdr-l_10px",{"borderTopLeftRadius":"10px","borderBottomLeftRadius":"10px"}], + [12,"bdr-l_12",{"borderTopLeftRadius":12,"borderBottomLeftRadius":12}], + [0,"bdr-l_0",{"borderTopLeftRadius":0,"borderBottomLeftRadius":0}], + ["auto","bdr-l_auto",{"borderTopLeftRadius":"auto","borderBottomLeftRadius":"auto"}], + ["{spacing.4}","bdr-l_{spacing.4}",{"borderTopLeftRadius":"var(--spacing-4)","borderBottomLeftRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-l_token(colors.red.300,_blue)",{"borderTopLeftRadius":"var(--colors-red-300, blue)","borderBottomLeftRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-l_a__b",{"borderTopLeftRadius":"a b","borderBottomLeftRadius":"a b"}], + [true,"bdr-l_true",{"borderTopLeftRadius":true,"borderBottomLeftRadius":true}] + ], + "borderStartStartRadius": [ + ["xs","bdr-ss_xs",{"borderStartStartRadius":"var(--radii-xs)"}], + ["sm","bdr-ss_sm",{"borderStartStartRadius":"var(--radii-sm)"}], + ["md","bdr-ss_md",{"borderStartStartRadius":"var(--radii-md)"}], + ["full","bdr-ss_full",{"borderStartStartRadius":"var(--radii-full)"}], + ["red","bdr-ss_red",{"borderStartStartRadius":"red"}], + ["red.300/40","bdr-ss_red.300/40",{"borderStartStartRadius":"red.300/40"}], + ["10px","bdr-ss_10px",{"borderStartStartRadius":"10px"}], + [12,"bdr-ss_12",{"borderStartStartRadius":12}], + [0,"bdr-ss_0",{"borderStartStartRadius":0}], + ["auto","bdr-ss_auto",{"borderStartStartRadius":"auto"}], + ["{spacing.4}","bdr-ss_{spacing.4}",{"borderStartStartRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-ss_token(colors.red.300,_blue)",{"borderStartStartRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-ss_a__b",{"borderStartStartRadius":"a b"}], + [true,"bdr-ss_true",{"borderStartStartRadius":true}] + ], + "borderStartEndRadius": [ + ["xs","bdr-se_xs",{"borderStartEndRadius":"var(--radii-xs)"}], + ["sm","bdr-se_sm",{"borderStartEndRadius":"var(--radii-sm)"}], + ["md","bdr-se_md",{"borderStartEndRadius":"var(--radii-md)"}], + ["full","bdr-se_full",{"borderStartEndRadius":"var(--radii-full)"}], + ["red","bdr-se_red",{"borderStartEndRadius":"red"}], + ["red.300/40","bdr-se_red.300/40",{"borderStartEndRadius":"red.300/40"}], + ["10px","bdr-se_10px",{"borderStartEndRadius":"10px"}], + [12,"bdr-se_12",{"borderStartEndRadius":12}], + [0,"bdr-se_0",{"borderStartEndRadius":0}], + ["auto","bdr-se_auto",{"borderStartEndRadius":"auto"}], + ["{spacing.4}","bdr-se_{spacing.4}",{"borderStartEndRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-se_token(colors.red.300,_blue)",{"borderStartEndRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-se_a__b",{"borderStartEndRadius":"a b"}], + [true,"bdr-se_true",{"borderStartEndRadius":true}] + ], + "borderStartRadius": [ + ["xs","bdr-s_xs",{"borderStartStartRadius":"var(--radii-xs)","borderEndStartRadius":"var(--radii-xs)"}], + ["sm","bdr-s_sm",{"borderStartStartRadius":"var(--radii-sm)","borderEndStartRadius":"var(--radii-sm)"}], + ["md","bdr-s_md",{"borderStartStartRadius":"var(--radii-md)","borderEndStartRadius":"var(--radii-md)"}], + ["full","bdr-s_full",{"borderStartStartRadius":"var(--radii-full)","borderEndStartRadius":"var(--radii-full)"}], + ["red","bdr-s_red",{"borderStartStartRadius":"red","borderEndStartRadius":"red"}], + ["red.300/40","bdr-s_red.300/40",{"borderStartStartRadius":"red.300/40","borderEndStartRadius":"red.300/40"}], + ["10px","bdr-s_10px",{"borderStartStartRadius":"10px","borderEndStartRadius":"10px"}], + [12,"bdr-s_12",{"borderStartStartRadius":12,"borderEndStartRadius":12}], + [0,"bdr-s_0",{"borderStartStartRadius":0,"borderEndStartRadius":0}], + ["auto","bdr-s_auto",{"borderStartStartRadius":"auto","borderEndStartRadius":"auto"}], + ["{spacing.4}","bdr-s_{spacing.4}",{"borderStartStartRadius":"var(--spacing-4)","borderEndStartRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-s_token(colors.red.300,_blue)",{"borderStartStartRadius":"var(--colors-red-300, blue)","borderEndStartRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-s_a__b",{"borderStartStartRadius":"a b","borderEndStartRadius":"a b"}], + [true,"bdr-s_true",{"borderStartStartRadius":true,"borderEndStartRadius":true}] + ], + "borderEndStartRadius": [ + ["xs","bdr-es_xs",{"borderEndStartRadius":"var(--radii-xs)"}], + ["sm","bdr-es_sm",{"borderEndStartRadius":"var(--radii-sm)"}], + ["md","bdr-es_md",{"borderEndStartRadius":"var(--radii-md)"}], + ["full","bdr-es_full",{"borderEndStartRadius":"var(--radii-full)"}], + ["red","bdr-es_red",{"borderEndStartRadius":"red"}], + ["red.300/40","bdr-es_red.300/40",{"borderEndStartRadius":"red.300/40"}], + ["10px","bdr-es_10px",{"borderEndStartRadius":"10px"}], + [12,"bdr-es_12",{"borderEndStartRadius":12}], + [0,"bdr-es_0",{"borderEndStartRadius":0}], + ["auto","bdr-es_auto",{"borderEndStartRadius":"auto"}], + ["{spacing.4}","bdr-es_{spacing.4}",{"borderEndStartRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-es_token(colors.red.300,_blue)",{"borderEndStartRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-es_a__b",{"borderEndStartRadius":"a b"}], + [true,"bdr-es_true",{"borderEndStartRadius":true}] + ], + "borderEndEndRadius": [ + ["xs","bdr-ee_xs",{"borderEndEndRadius":"var(--radii-xs)"}], + ["sm","bdr-ee_sm",{"borderEndEndRadius":"var(--radii-sm)"}], + ["md","bdr-ee_md",{"borderEndEndRadius":"var(--radii-md)"}], + ["full","bdr-ee_full",{"borderEndEndRadius":"var(--radii-full)"}], + ["red","bdr-ee_red",{"borderEndEndRadius":"red"}], + ["red.300/40","bdr-ee_red.300/40",{"borderEndEndRadius":"red.300/40"}], + ["10px","bdr-ee_10px",{"borderEndEndRadius":"10px"}], + [12,"bdr-ee_12",{"borderEndEndRadius":12}], + [0,"bdr-ee_0",{"borderEndEndRadius":0}], + ["auto","bdr-ee_auto",{"borderEndEndRadius":"auto"}], + ["{spacing.4}","bdr-ee_{spacing.4}",{"borderEndEndRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-ee_token(colors.red.300,_blue)",{"borderEndEndRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-ee_a__b",{"borderEndEndRadius":"a b"}], + [true,"bdr-ee_true",{"borderEndEndRadius":true}] + ], + "borderEndRadius": [ + ["xs","bdr-e_xs",{"borderStartEndRadius":"var(--radii-xs)","borderEndEndRadius":"var(--radii-xs)"}], + ["sm","bdr-e_sm",{"borderStartEndRadius":"var(--radii-sm)","borderEndEndRadius":"var(--radii-sm)"}], + ["md","bdr-e_md",{"borderStartEndRadius":"var(--radii-md)","borderEndEndRadius":"var(--radii-md)"}], + ["full","bdr-e_full",{"borderStartEndRadius":"var(--radii-full)","borderEndEndRadius":"var(--radii-full)"}], + ["red","bdr-e_red",{"borderStartEndRadius":"red","borderEndEndRadius":"red"}], + ["red.300/40","bdr-e_red.300/40",{"borderStartEndRadius":"red.300/40","borderEndEndRadius":"red.300/40"}], + ["10px","bdr-e_10px",{"borderStartEndRadius":"10px","borderEndEndRadius":"10px"}], + [12,"bdr-e_12",{"borderStartEndRadius":12,"borderEndEndRadius":12}], + [0,"bdr-e_0",{"borderStartEndRadius":0,"borderEndEndRadius":0}], + ["auto","bdr-e_auto",{"borderStartEndRadius":"auto","borderEndEndRadius":"auto"}], + ["{spacing.4}","bdr-e_{spacing.4}",{"borderStartEndRadius":"var(--spacing-4)","borderEndEndRadius":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bdr-e_token(colors.red.300,_blue)",{"borderStartEndRadius":"var(--colors-red-300, blue)","borderEndEndRadius":"var(--colors-red-300, blue)"}], + ["a b","bdr-e_a__b",{"borderStartEndRadius":"a b","borderEndEndRadius":"a b"}], + [true,"bdr-e_true",{"borderStartEndRadius":true,"borderEndEndRadius":true}] + ], + "border": [ + ["none","bd_none",{"border":"var(--borders-none)"}], + ["red","bd_red",{"border":"red"}], + ["red.300/40","bd_red.300/40",{"border":"red.300/40"}], + ["10px","bd_10px",{"border":"10px"}], + [12,"bd_12",{"border":12}], + [0,"bd_0",{"border":0}], + ["auto","bd_auto",{"border":"auto"}], + ["{spacing.4}","bd_{spacing.4}",{"border":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd_token(colors.red.300,_blue)",{"border":"var(--colors-red-300, blue)"}], + ["a b","bd_a__b",{"border":"a b"}], + [true,"bd_true",{"border":true}] + ], + "borderWidth": [ + ["red","bd-w_red",{"borderWidth":"red"}], + ["red.300/40","bd-w_red.300/40",{"borderWidth":"red.300/40"}], + ["10px","bd-w_10px",{"borderWidth":"10px"}], + [12,"bd-w_12",{"borderWidth":12}], + [0,"bd-w_0",{"borderWidth":0}], + ["auto","bd-w_auto",{"borderWidth":"auto"}], + ["{spacing.4}","bd-w_{spacing.4}",{"borderWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-w_token(colors.red.300,_blue)",{"borderWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-w_a__b",{"borderWidth":"a b"}], + [true,"bd-w_true",{"borderWidth":true}] + ], + "borderTopWidth": [ + ["red","bd-t-w_red",{"borderTopWidth":"red"}], + ["red.300/40","bd-t-w_red.300/40",{"borderTopWidth":"red.300/40"}], + ["10px","bd-t-w_10px",{"borderTopWidth":"10px"}], + [12,"bd-t-w_12",{"borderTopWidth":12}], + [0,"bd-t-w_0",{"borderTopWidth":0}], + ["auto","bd-t-w_auto",{"borderTopWidth":"auto"}], + ["{spacing.4}","bd-t-w_{spacing.4}",{"borderTopWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-t-w_token(colors.red.300,_blue)",{"borderTopWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-t-w_a__b",{"borderTopWidth":"a b"}], + [true,"bd-t-w_true",{"borderTopWidth":true}] + ], + "borderLeftWidth": [ + ["red","bd-l-w_red",{"borderLeftWidth":"red"}], + ["red.300/40","bd-l-w_red.300/40",{"borderLeftWidth":"red.300/40"}], + ["10px","bd-l-w_10px",{"borderLeftWidth":"10px"}], + [12,"bd-l-w_12",{"borderLeftWidth":12}], + [0,"bd-l-w_0",{"borderLeftWidth":0}], + ["auto","bd-l-w_auto",{"borderLeftWidth":"auto"}], + ["{spacing.4}","bd-l-w_{spacing.4}",{"borderLeftWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-l-w_token(colors.red.300,_blue)",{"borderLeftWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-l-w_a__b",{"borderLeftWidth":"a b"}], + [true,"bd-l-w_true",{"borderLeftWidth":true}] + ], + "borderRightWidth": [ + ["red","bd-r-w_red",{"borderRightWidth":"red"}], + ["red.300/40","bd-r-w_red.300/40",{"borderRightWidth":"red.300/40"}], + ["10px","bd-r-w_10px",{"borderRightWidth":"10px"}], + [12,"bd-r-w_12",{"borderRightWidth":12}], + [0,"bd-r-w_0",{"borderRightWidth":0}], + ["auto","bd-r-w_auto",{"borderRightWidth":"auto"}], + ["{spacing.4}","bd-r-w_{spacing.4}",{"borderRightWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-r-w_token(colors.red.300,_blue)",{"borderRightWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-r-w_a__b",{"borderRightWidth":"a b"}], + [true,"bd-r-w_true",{"borderRightWidth":true}] + ], + "borderBottomWidth": [ + ["red","bd-b-w_red",{"borderBottomWidth":"red"}], + ["red.300/40","bd-b-w_red.300/40",{"borderBottomWidth":"red.300/40"}], + ["10px","bd-b-w_10px",{"borderBottomWidth":"10px"}], + [12,"bd-b-w_12",{"borderBottomWidth":12}], + [0,"bd-b-w_0",{"borderBottomWidth":0}], + ["auto","bd-b-w_auto",{"borderBottomWidth":"auto"}], + ["{spacing.4}","bd-b-w_{spacing.4}",{"borderBottomWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-b-w_token(colors.red.300,_blue)",{"borderBottomWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-b-w_a__b",{"borderBottomWidth":"a b"}], + [true,"bd-b-w_true",{"borderBottomWidth":true}] + ], + "borderBlockStartWidth": [ + ["red","bd-bs-w_red",{"borderBlockStartWidth":"red"}], + ["red.300/40","bd-bs-w_red.300/40",{"borderBlockStartWidth":"red.300/40"}], + ["10px","bd-bs-w_10px",{"borderBlockStartWidth":"10px"}], + [12,"bd-bs-w_12",{"borderBlockStartWidth":12}], + [0,"bd-bs-w_0",{"borderBlockStartWidth":0}], + ["auto","bd-bs-w_auto",{"borderBlockStartWidth":"auto"}], + ["{spacing.4}","bd-bs-w_{spacing.4}",{"borderBlockStartWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-bs-w_token(colors.red.300,_blue)",{"borderBlockStartWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-bs-w_a__b",{"borderBlockStartWidth":"a b"}], + [true,"bd-bs-w_true",{"borderBlockStartWidth":true}] + ], + "borderBlockEndWidth": [ + ["red","bd-be-w_red",{"borderBlockEndWidth":"red"}], + ["red.300/40","bd-be-w_red.300/40",{"borderBlockEndWidth":"red.300/40"}], + ["10px","bd-be-w_10px",{"borderBlockEndWidth":"10px"}], + [12,"bd-be-w_12",{"borderBlockEndWidth":12}], + [0,"bd-be-w_0",{"borderBlockEndWidth":0}], + ["auto","bd-be-w_auto",{"borderBlockEndWidth":"auto"}], + ["{spacing.4}","bd-be-w_{spacing.4}",{"borderBlockEndWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-be-w_token(colors.red.300,_blue)",{"borderBlockEndWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-be-w_a__b",{"borderBlockEndWidth":"a b"}], + [true,"bd-be-w_true",{"borderBlockEndWidth":true}] + ], + "borderColor": [ + ["current","bd-c_current",{"borderColor":"var(--colors-current)"}], + ["black","bd-c_black",{"borderColor":"var(--colors-black)"}], + ["white","bd-c_white",{"borderColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-c_colorPalette.heading",{"borderColor":"var(--colors-color-palette-heading)"}], + ["red","bd-c_red",{"borderColor":"red"}], + ["red.300/40","bd-c_red.300/40",{"--mix-borderColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderColor":"var(--mix-borderColor, var(--colors-red-300))"}], + ["10px","bd-c_10px",{"borderColor":"10px"}], + [12,"bd-c_12",{"borderColor":12}], + [0,"bd-c_0",{"borderColor":0}], + ["auto","bd-c_auto",{"borderColor":"auto"}], + ["{spacing.4}","bd-c_{spacing.4}",{"borderColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-c_token(colors.red.300,_blue)",{"borderColor":"var(--colors-red-300, blue)"}], + ["a b","bd-c_a__b",{"borderColor":"a b"}], + [true,"bd-c_true",{"borderColor":true}] + ], + "borderInline": [ + ["none","bd-x_none",{"borderInline":"var(--borders-none)"}], + ["red","bd-x_red",{"borderInline":"red"}], + ["red.300/40","bd-x_red.300/40",{"borderInline":"red.300/40"}], + ["10px","bd-x_10px",{"borderInline":"10px"}], + [12,"bd-x_12",{"borderInline":12}], + [0,"bd-x_0",{"borderInline":0}], + ["auto","bd-x_auto",{"borderInline":"auto"}], + ["{spacing.4}","bd-x_{spacing.4}",{"borderInline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-x_token(colors.red.300,_blue)",{"borderInline":"var(--colors-red-300, blue)"}], + ["a b","bd-x_a__b",{"borderInline":"a b"}], + [true,"bd-x_true",{"borderInline":true}] + ], + "borderInlineWidth": [ + ["red","bd-x-w_red",{"borderInlineWidth":"red"}], + ["red.300/40","bd-x-w_red.300/40",{"borderInlineWidth":"red.300/40"}], + ["10px","bd-x-w_10px",{"borderInlineWidth":"10px"}], + [12,"bd-x-w_12",{"borderInlineWidth":12}], + [0,"bd-x-w_0",{"borderInlineWidth":0}], + ["auto","bd-x-w_auto",{"borderInlineWidth":"auto"}], + ["{spacing.4}","bd-x-w_{spacing.4}",{"borderInlineWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-x-w_token(colors.red.300,_blue)",{"borderInlineWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-x-w_a__b",{"borderInlineWidth":"a b"}], + [true,"bd-x-w_true",{"borderInlineWidth":true}] + ], + "borderInlineColor": [ + ["current","bd-x-c_current",{"borderInlineColor":"var(--colors-current)"}], + ["black","bd-x-c_black",{"borderInlineColor":"var(--colors-black)"}], + ["white","bd-x-c_white",{"borderInlineColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-x-c_colorPalette.heading",{"borderInlineColor":"var(--colors-color-palette-heading)"}], + ["red","bd-x-c_red",{"borderInlineColor":"red"}], + ["red.300/40","bd-x-c_red.300/40",{"--mix-borderInlineColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderInlineColor":"var(--mix-borderInlineColor, var(--colors-red-300))"}], + ["10px","bd-x-c_10px",{"borderInlineColor":"10px"}], + [12,"bd-x-c_12",{"borderInlineColor":12}], + [0,"bd-x-c_0",{"borderInlineColor":0}], + ["auto","bd-x-c_auto",{"borderInlineColor":"auto"}], + ["{spacing.4}","bd-x-c_{spacing.4}",{"borderInlineColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-x-c_token(colors.red.300,_blue)",{"borderInlineColor":"var(--colors-red-300, blue)"}], + ["a b","bd-x-c_a__b",{"borderInlineColor":"a b"}], + [true,"bd-x-c_true",{"borderInlineColor":true}] + ], + "borderBlock": [ + ["none","bd-y_none",{"borderBlock":"var(--borders-none)"}], + ["red","bd-y_red",{"borderBlock":"red"}], + ["red.300/40","bd-y_red.300/40",{"borderBlock":"red.300/40"}], + ["10px","bd-y_10px",{"borderBlock":"10px"}], + [12,"bd-y_12",{"borderBlock":12}], + [0,"bd-y_0",{"borderBlock":0}], + ["auto","bd-y_auto",{"borderBlock":"auto"}], + ["{spacing.4}","bd-y_{spacing.4}",{"borderBlock":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-y_token(colors.red.300,_blue)",{"borderBlock":"var(--colors-red-300, blue)"}], + ["a b","bd-y_a__b",{"borderBlock":"a b"}], + [true,"bd-y_true",{"borderBlock":true}] + ], + "borderBlockWidth": [ + ["red","bd-y-w_red",{"borderBlockWidth":"red"}], + ["red.300/40","bd-y-w_red.300/40",{"borderBlockWidth":"red.300/40"}], + ["10px","bd-y-w_10px",{"borderBlockWidth":"10px"}], + [12,"bd-y-w_12",{"borderBlockWidth":12}], + [0,"bd-y-w_0",{"borderBlockWidth":0}], + ["auto","bd-y-w_auto",{"borderBlockWidth":"auto"}], + ["{spacing.4}","bd-y-w_{spacing.4}",{"borderBlockWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-y-w_token(colors.red.300,_blue)",{"borderBlockWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-y-w_a__b",{"borderBlockWidth":"a b"}], + [true,"bd-y-w_true",{"borderBlockWidth":true}] + ], + "borderBlockColor": [ + ["current","bd-y-c_current",{"borderBlockColor":"var(--colors-current)"}], + ["black","bd-y-c_black",{"borderBlockColor":"var(--colors-black)"}], + ["white","bd-y-c_white",{"borderBlockColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-y-c_colorPalette.heading",{"borderBlockColor":"var(--colors-color-palette-heading)"}], + ["red","bd-y-c_red",{"borderBlockColor":"red"}], + ["red.300/40","bd-y-c_red.300/40",{"--mix-borderBlockColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderBlockColor":"var(--mix-borderBlockColor, var(--colors-red-300))"}], + ["10px","bd-y-c_10px",{"borderBlockColor":"10px"}], + [12,"bd-y-c_12",{"borderBlockColor":12}], + [0,"bd-y-c_0",{"borderBlockColor":0}], + ["auto","bd-y-c_auto",{"borderBlockColor":"auto"}], + ["{spacing.4}","bd-y-c_{spacing.4}",{"borderBlockColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-y-c_token(colors.red.300,_blue)",{"borderBlockColor":"var(--colors-red-300, blue)"}], + ["a b","bd-y-c_a__b",{"borderBlockColor":"a b"}], + [true,"bd-y-c_true",{"borderBlockColor":true}] + ], + "borderLeft": [ + ["none","bd-l_none",{"borderLeft":"var(--borders-none)"}], + ["red","bd-l_red",{"borderLeft":"red"}], + ["red.300/40","bd-l_red.300/40",{"borderLeft":"red.300/40"}], + ["10px","bd-l_10px",{"borderLeft":"10px"}], + [12,"bd-l_12",{"borderLeft":12}], + [0,"bd-l_0",{"borderLeft":0}], + ["auto","bd-l_auto",{"borderLeft":"auto"}], + ["{spacing.4}","bd-l_{spacing.4}",{"borderLeft":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-l_token(colors.red.300,_blue)",{"borderLeft":"var(--colors-red-300, blue)"}], + ["a b","bd-l_a__b",{"borderLeft":"a b"}], + [true,"bd-l_true",{"borderLeft":true}] + ], + "borderLeftColor": [ + ["current","bd-l-c_current",{"borderLeftColor":"var(--colors-current)"}], + ["black","bd-l-c_black",{"borderLeftColor":"var(--colors-black)"}], + ["white","bd-l-c_white",{"borderLeftColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-l-c_colorPalette.heading",{"borderLeftColor":"var(--colors-color-palette-heading)"}], + ["red","bd-l-c_red",{"borderLeftColor":"red"}], + ["red.300/40","bd-l-c_red.300/40",{"--mix-borderLeftColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderLeftColor":"var(--mix-borderLeftColor, var(--colors-red-300))"}], + ["10px","bd-l-c_10px",{"borderLeftColor":"10px"}], + [12,"bd-l-c_12",{"borderLeftColor":12}], + [0,"bd-l-c_0",{"borderLeftColor":0}], + ["auto","bd-l-c_auto",{"borderLeftColor":"auto"}], + ["{spacing.4}","bd-l-c_{spacing.4}",{"borderLeftColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-l-c_token(colors.red.300,_blue)",{"borderLeftColor":"var(--colors-red-300, blue)"}], + ["a b","bd-l-c_a__b",{"borderLeftColor":"a b"}], + [true,"bd-l-c_true",{"borderLeftColor":true}] + ], + "borderInlineStart": [ + ["none","bd-s_none",{"borderInlineStart":"var(--borders-none)"}], + ["red","bd-s_red",{"borderInlineStart":"red"}], + ["red.300/40","bd-s_red.300/40",{"borderInlineStart":"red.300/40"}], + ["10px","bd-s_10px",{"borderInlineStart":"10px"}], + [12,"bd-s_12",{"borderInlineStart":12}], + [0,"bd-s_0",{"borderInlineStart":0}], + ["auto","bd-s_auto",{"borderInlineStart":"auto"}], + ["{spacing.4}","bd-s_{spacing.4}",{"borderInlineStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-s_token(colors.red.300,_blue)",{"borderInlineStart":"var(--colors-red-300, blue)"}], + ["a b","bd-s_a__b",{"borderInlineStart":"a b"}], + [true,"bd-s_true",{"borderInlineStart":true}] + ], + "borderInlineStartWidth": [ + ["red","bd-s-w_red",{"borderInlineStartWidth":"red"}], + ["red.300/40","bd-s-w_red.300/40",{"borderInlineStartWidth":"red.300/40"}], + ["10px","bd-s-w_10px",{"borderInlineStartWidth":"10px"}], + [12,"bd-s-w_12",{"borderInlineStartWidth":12}], + [0,"bd-s-w_0",{"borderInlineStartWidth":0}], + ["auto","bd-s-w_auto",{"borderInlineStartWidth":"auto"}], + ["{spacing.4}","bd-s-w_{spacing.4}",{"borderInlineStartWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-s-w_token(colors.red.300,_blue)",{"borderInlineStartWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-s-w_a__b",{"borderInlineStartWidth":"a b"}], + [true,"bd-s-w_true",{"borderInlineStartWidth":true}] + ], + "borderInlineStartColor": [ + ["current","bd-s-c_current",{"borderInlineStartColor":"var(--colors-current)"}], + ["black","bd-s-c_black",{"borderInlineStartColor":"var(--colors-black)"}], + ["white","bd-s-c_white",{"borderInlineStartColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-s-c_colorPalette.heading",{"borderInlineStartColor":"var(--colors-color-palette-heading)"}], + ["red","bd-s-c_red",{"borderInlineStartColor":"red"}], + ["red.300/40","bd-s-c_red.300/40",{"--mix-borderInlineStartColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderInlineStartColor":"var(--mix-borderInlineStartColor, var(--colors-red-300))"}], + ["10px","bd-s-c_10px",{"borderInlineStartColor":"10px"}], + [12,"bd-s-c_12",{"borderInlineStartColor":12}], + [0,"bd-s-c_0",{"borderInlineStartColor":0}], + ["auto","bd-s-c_auto",{"borderInlineStartColor":"auto"}], + ["{spacing.4}","bd-s-c_{spacing.4}",{"borderInlineStartColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-s-c_token(colors.red.300,_blue)",{"borderInlineStartColor":"var(--colors-red-300, blue)"}], + ["a b","bd-s-c_a__b",{"borderInlineStartColor":"a b"}], + [true,"bd-s-c_true",{"borderInlineStartColor":true}] + ], + "borderRight": [ + ["none","bd-r_none",{"borderRight":"var(--borders-none)"}], + ["red","bd-r_red",{"borderRight":"red"}], + ["red.300/40","bd-r_red.300/40",{"borderRight":"red.300/40"}], + ["10px","bd-r_10px",{"borderRight":"10px"}], + [12,"bd-r_12",{"borderRight":12}], + [0,"bd-r_0",{"borderRight":0}], + ["auto","bd-r_auto",{"borderRight":"auto"}], + ["{spacing.4}","bd-r_{spacing.4}",{"borderRight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-r_token(colors.red.300,_blue)",{"borderRight":"var(--colors-red-300, blue)"}], + ["a b","bd-r_a__b",{"borderRight":"a b"}], + [true,"bd-r_true",{"borderRight":true}] + ], + "borderRightColor": [ + ["current","bd-r-c_current",{"borderRightColor":"var(--colors-current)"}], + ["black","bd-r-c_black",{"borderRightColor":"var(--colors-black)"}], + ["white","bd-r-c_white",{"borderRightColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-r-c_colorPalette.heading",{"borderRightColor":"var(--colors-color-palette-heading)"}], + ["red","bd-r-c_red",{"borderRightColor":"red"}], + ["red.300/40","bd-r-c_red.300/40",{"--mix-borderRightColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderRightColor":"var(--mix-borderRightColor, var(--colors-red-300))"}], + ["10px","bd-r-c_10px",{"borderRightColor":"10px"}], + [12,"bd-r-c_12",{"borderRightColor":12}], + [0,"bd-r-c_0",{"borderRightColor":0}], + ["auto","bd-r-c_auto",{"borderRightColor":"auto"}], + ["{spacing.4}","bd-r-c_{spacing.4}",{"borderRightColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-r-c_token(colors.red.300,_blue)",{"borderRightColor":"var(--colors-red-300, blue)"}], + ["a b","bd-r-c_a__b",{"borderRightColor":"a b"}], + [true,"bd-r-c_true",{"borderRightColor":true}] + ], + "borderInlineEnd": [ + ["none","bd-e_none",{"borderInlineEnd":"var(--borders-none)"}], + ["red","bd-e_red",{"borderInlineEnd":"red"}], + ["red.300/40","bd-e_red.300/40",{"borderInlineEnd":"red.300/40"}], + ["10px","bd-e_10px",{"borderInlineEnd":"10px"}], + [12,"bd-e_12",{"borderInlineEnd":12}], + [0,"bd-e_0",{"borderInlineEnd":0}], + ["auto","bd-e_auto",{"borderInlineEnd":"auto"}], + ["{spacing.4}","bd-e_{spacing.4}",{"borderInlineEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-e_token(colors.red.300,_blue)",{"borderInlineEnd":"var(--colors-red-300, blue)"}], + ["a b","bd-e_a__b",{"borderInlineEnd":"a b"}], + [true,"bd-e_true",{"borderInlineEnd":true}] + ], + "borderInlineEndWidth": [ + ["red","bd-e-w_red",{"borderInlineEndWidth":"red"}], + ["red.300/40","bd-e-w_red.300/40",{"borderInlineEndWidth":"red.300/40"}], + ["10px","bd-e-w_10px",{"borderInlineEndWidth":"10px"}], + [12,"bd-e-w_12",{"borderInlineEndWidth":12}], + [0,"bd-e-w_0",{"borderInlineEndWidth":0}], + ["auto","bd-e-w_auto",{"borderInlineEndWidth":"auto"}], + ["{spacing.4}","bd-e-w_{spacing.4}",{"borderInlineEndWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-e-w_token(colors.red.300,_blue)",{"borderInlineEndWidth":"var(--colors-red-300, blue)"}], + ["a b","bd-e-w_a__b",{"borderInlineEndWidth":"a b"}], + [true,"bd-e-w_true",{"borderInlineEndWidth":true}] + ], + "borderInlineEndColor": [ + ["current","bd-e-c_current",{"borderInlineEndColor":"var(--colors-current)"}], + ["black","bd-e-c_black",{"borderInlineEndColor":"var(--colors-black)"}], + ["white","bd-e-c_white",{"borderInlineEndColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-e-c_colorPalette.heading",{"borderInlineEndColor":"var(--colors-color-palette-heading)"}], + ["red","bd-e-c_red",{"borderInlineEndColor":"red"}], + ["red.300/40","bd-e-c_red.300/40",{"--mix-borderInlineEndColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderInlineEndColor":"var(--mix-borderInlineEndColor, var(--colors-red-300))"}], + ["10px","bd-e-c_10px",{"borderInlineEndColor":"10px"}], + [12,"bd-e-c_12",{"borderInlineEndColor":12}], + [0,"bd-e-c_0",{"borderInlineEndColor":0}], + ["auto","bd-e-c_auto",{"borderInlineEndColor":"auto"}], + ["{spacing.4}","bd-e-c_{spacing.4}",{"borderInlineEndColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-e-c_token(colors.red.300,_blue)",{"borderInlineEndColor":"var(--colors-red-300, blue)"}], + ["a b","bd-e-c_a__b",{"borderInlineEndColor":"a b"}], + [true,"bd-e-c_true",{"borderInlineEndColor":true}] + ], + "borderTop": [ + ["none","bd-t_none",{"borderTop":"var(--borders-none)"}], + ["red","bd-t_red",{"borderTop":"red"}], + ["red.300/40","bd-t_red.300/40",{"borderTop":"red.300/40"}], + ["10px","bd-t_10px",{"borderTop":"10px"}], + [12,"bd-t_12",{"borderTop":12}], + [0,"bd-t_0",{"borderTop":0}], + ["auto","bd-t_auto",{"borderTop":"auto"}], + ["{spacing.4}","bd-t_{spacing.4}",{"borderTop":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-t_token(colors.red.300,_blue)",{"borderTop":"var(--colors-red-300, blue)"}], + ["a b","bd-t_a__b",{"borderTop":"a b"}], + [true,"bd-t_true",{"borderTop":true}] + ], + "borderTopColor": [ + ["current","bd-t-c_current",{"borderTopColor":"var(--colors-current)"}], + ["black","bd-t-c_black",{"borderTopColor":"var(--colors-black)"}], + ["white","bd-t-c_white",{"borderTopColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-t-c_colorPalette.heading",{"borderTopColor":"var(--colors-color-palette-heading)"}], + ["red","bd-t-c_red",{"borderTopColor":"red"}], + ["red.300/40","bd-t-c_red.300/40",{"--mix-borderTopColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderTopColor":"var(--mix-borderTopColor, var(--colors-red-300))"}], + ["10px","bd-t-c_10px",{"borderTopColor":"10px"}], + [12,"bd-t-c_12",{"borderTopColor":12}], + [0,"bd-t-c_0",{"borderTopColor":0}], + ["auto","bd-t-c_auto",{"borderTopColor":"auto"}], + ["{spacing.4}","bd-t-c_{spacing.4}",{"borderTopColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-t-c_token(colors.red.300,_blue)",{"borderTopColor":"var(--colors-red-300, blue)"}], + ["a b","bd-t-c_a__b",{"borderTopColor":"a b"}], + [true,"bd-t-c_true",{"borderTopColor":true}] + ], + "borderBottom": [ + ["none","bd-b_none",{"borderBottom":"var(--borders-none)"}], + ["red","bd-b_red",{"borderBottom":"red"}], + ["red.300/40","bd-b_red.300/40",{"borderBottom":"red.300/40"}], + ["10px","bd-b_10px",{"borderBottom":"10px"}], + [12,"bd-b_12",{"borderBottom":12}], + [0,"bd-b_0",{"borderBottom":0}], + ["auto","bd-b_auto",{"borderBottom":"auto"}], + ["{spacing.4}","bd-b_{spacing.4}",{"borderBottom":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-b_token(colors.red.300,_blue)",{"borderBottom":"var(--colors-red-300, blue)"}], + ["a b","bd-b_a__b",{"borderBottom":"a b"}], + [true,"bd-b_true",{"borderBottom":true}] + ], + "borderBottomColor": [ + ["current","bd-b-c_current",{"borderBottomColor":"var(--colors-current)"}], + ["black","bd-b-c_black",{"borderBottomColor":"var(--colors-black)"}], + ["white","bd-b-c_white",{"borderBottomColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-b-c_colorPalette.heading",{"borderBottomColor":"var(--colors-color-palette-heading)"}], + ["red","bd-b-c_red",{"borderBottomColor":"red"}], + ["red.300/40","bd-b-c_red.300/40",{"--mix-borderBottomColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderBottomColor":"var(--mix-borderBottomColor, var(--colors-red-300))"}], + ["10px","bd-b-c_10px",{"borderBottomColor":"10px"}], + [12,"bd-b-c_12",{"borderBottomColor":12}], + [0,"bd-b-c_0",{"borderBottomColor":0}], + ["auto","bd-b-c_auto",{"borderBottomColor":"auto"}], + ["{spacing.4}","bd-b-c_{spacing.4}",{"borderBottomColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-b-c_token(colors.red.300,_blue)",{"borderBottomColor":"var(--colors-red-300, blue)"}], + ["a b","bd-b-c_a__b",{"borderBottomColor":"a b"}], + [true,"bd-b-c_true",{"borderBottomColor":true}] + ], + "borderBlockEnd": [ + ["none","bd-be_none",{"borderBlockEnd":"var(--borders-none)"}], + ["red","bd-be_red",{"borderBlockEnd":"red"}], + ["red.300/40","bd-be_red.300/40",{"borderBlockEnd":"red.300/40"}], + ["10px","bd-be_10px",{"borderBlockEnd":"10px"}], + [12,"bd-be_12",{"borderBlockEnd":12}], + [0,"bd-be_0",{"borderBlockEnd":0}], + ["auto","bd-be_auto",{"borderBlockEnd":"auto"}], + ["{spacing.4}","bd-be_{spacing.4}",{"borderBlockEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-be_token(colors.red.300,_blue)",{"borderBlockEnd":"var(--colors-red-300, blue)"}], + ["a b","bd-be_a__b",{"borderBlockEnd":"a b"}], + [true,"bd-be_true",{"borderBlockEnd":true}] + ], + "borderBlockEndColor": [ + ["current","bd-be-c_current",{"borderBlockEndColor":"var(--colors-current)"}], + ["black","bd-be-c_black",{"borderBlockEndColor":"var(--colors-black)"}], + ["white","bd-be-c_white",{"borderBlockEndColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-be-c_colorPalette.heading",{"borderBlockEndColor":"var(--colors-color-palette-heading)"}], + ["red","bd-be-c_red",{"borderBlockEndColor":"red"}], + ["red.300/40","bd-be-c_red.300/40",{"--mix-borderBlockEndColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderBlockEndColor":"var(--mix-borderBlockEndColor, var(--colors-red-300))"}], + ["10px","bd-be-c_10px",{"borderBlockEndColor":"10px"}], + [12,"bd-be-c_12",{"borderBlockEndColor":12}], + [0,"bd-be-c_0",{"borderBlockEndColor":0}], + ["auto","bd-be-c_auto",{"borderBlockEndColor":"auto"}], + ["{spacing.4}","bd-be-c_{spacing.4}",{"borderBlockEndColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-be-c_token(colors.red.300,_blue)",{"borderBlockEndColor":"var(--colors-red-300, blue)"}], + ["a b","bd-be-c_a__b",{"borderBlockEndColor":"a b"}], + [true,"bd-be-c_true",{"borderBlockEndColor":true}] + ], + "borderBlockStart": [ + ["none","bd-bs_none",{"borderBlockStart":"var(--borders-none)"}], + ["red","bd-bs_red",{"borderBlockStart":"red"}], + ["red.300/40","bd-bs_red.300/40",{"borderBlockStart":"red.300/40"}], + ["10px","bd-bs_10px",{"borderBlockStart":"10px"}], + [12,"bd-bs_12",{"borderBlockStart":12}], + [0,"bd-bs_0",{"borderBlockStart":0}], + ["auto","bd-bs_auto",{"borderBlockStart":"auto"}], + ["{spacing.4}","bd-bs_{spacing.4}",{"borderBlockStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-bs_token(colors.red.300,_blue)",{"borderBlockStart":"var(--colors-red-300, blue)"}], + ["a b","bd-bs_a__b",{"borderBlockStart":"a b"}], + [true,"bd-bs_true",{"borderBlockStart":true}] + ], + "borderBlockStartColor": [ + ["current","bd-bs-c_current",{"borderBlockStartColor":"var(--colors-current)"}], + ["black","bd-bs-c_black",{"borderBlockStartColor":"var(--colors-black)"}], + ["white","bd-bs-c_white",{"borderBlockStartColor":"var(--colors-white)"}], + ["colorPalette.heading","bd-bs-c_colorPalette.heading",{"borderBlockStartColor":"var(--colors-color-palette-heading)"}], + ["red","bd-bs-c_red",{"borderBlockStartColor":"red"}], + ["red.300/40","bd-bs-c_red.300/40",{"--mix-borderBlockStartColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","borderBlockStartColor":"var(--mix-borderBlockStartColor, var(--colors-red-300))"}], + ["10px","bd-bs-c_10px",{"borderBlockStartColor":"10px"}], + [12,"bd-bs-c_12",{"borderBlockStartColor":12}], + [0,"bd-bs-c_0",{"borderBlockStartColor":0}], + ["auto","bd-bs-c_auto",{"borderBlockStartColor":"auto"}], + ["{spacing.4}","bd-bs-c_{spacing.4}",{"borderBlockStartColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-bs-c_token(colors.red.300,_blue)",{"borderBlockStartColor":"var(--colors-red-300, blue)"}], + ["a b","bd-bs-c_a__b",{"borderBlockStartColor":"a b"}], + [true,"bd-bs-c_true",{"borderBlockStartColor":true}] + ], + "opacity": [ + ["red","op_red",{"opacity":"red"}], + ["red.300/40","op_red.300/40",{"opacity":"red.300/40"}], + ["10px","op_10px",{"opacity":"10px"}], + [12,"op_12",{"opacity":12}], + [0,"op_0",{"opacity":0}], + ["auto","op_auto",{"opacity":"auto"}], + ["{spacing.4}","op_{spacing.4}",{"opacity":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","op_token(colors.red.300,_blue)",{"opacity":"var(--colors-red-300, blue)"}], + ["a b","op_a__b",{"opacity":"a b"}], + [true,"op_true",{"opacity":true}] + ], + "boxShadow": [ + ["2xs","bx-sh_2xs",{"boxShadow":"var(--shadows-2xs)"}], + ["xs","bx-sh_xs",{"boxShadow":"var(--shadows-xs)"}], + ["sm","bx-sh_sm",{"boxShadow":"var(--shadows-sm)"}], + ["inset-sm","bx-sh_inset-sm",{"boxShadow":"var(--shadows-inset-sm)"}], + ["red","bx-sh_red",{"boxShadow":"red"}], + ["red.300/40","bx-sh_red.300/40",{"boxShadow":"red.300/40"}], + ["10px","bx-sh_10px",{"boxShadow":"10px"}], + [12,"bx-sh_12",{"boxShadow":12}], + [0,"bx-sh_0",{"boxShadow":0}], + ["auto","bx-sh_auto",{"boxShadow":"auto"}], + ["{spacing.4}","bx-sh_{spacing.4}",{"boxShadow":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bx-sh_token(colors.red.300,_blue)",{"boxShadow":"var(--colors-red-300, blue)"}], + ["a b","bx-sh_a__b",{"boxShadow":"a b"}], + [true,"bx-sh_true",{"boxShadow":true}] + ], + "boxShadowColor": [ + ["current","bx-sh-c_current",{"--shadow-color":"var(--colors-current)"}], + ["black","bx-sh-c_black",{"--shadow-color":"var(--colors-black)"}], + ["white","bx-sh-c_white",{"--shadow-color":"var(--colors-white)"}], + ["colorPalette.heading","bx-sh-c_colorPalette.heading",{"--shadow-color":"var(--colors-color-palette-heading)"}], + ["red","bx-sh-c_red",{"--shadow-color":"red"}], + ["red.300/40","bx-sh-c_red.300/40",{"--mix---shadow-color":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","--shadow-color":"var(--mix---shadow-color, var(--colors-red-300))"}], + ["10px","bx-sh-c_10px",{"--shadow-color":"10px"}], + [12,"bx-sh-c_12",{"--shadow-color":12}], + [0,"bx-sh-c_0",{"--shadow-color":0}], + ["auto","bx-sh-c_auto",{"--shadow-color":"auto"}], + ["{spacing.4}","bx-sh-c_{spacing.4}",{"--shadow-color":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bx-sh-c_token(colors.red.300,_blue)",{"--shadow-color":"var(--colors-red-300, blue)"}], + ["a b","bx-sh-c_a__b",{"--shadow-color":"a b"}], + [true,"bx-sh-c_true",{"--shadow-color":true}] + ], + "mixBlendMode": [ + ["red","mix-bm_red",{"mixBlendMode":"red"}], + ["red.300/40","mix-bm_red.300/40",{"mixBlendMode":"red.300/40"}], + ["10px","mix-bm_10px",{"mixBlendMode":"10px"}], + [12,"mix-bm_12",{"mixBlendMode":12}], + [0,"mix-bm_0",{"mixBlendMode":0}], + ["auto","mix-bm_auto",{"mixBlendMode":"auto"}], + ["{spacing.4}","mix-bm_{spacing.4}",{"mixBlendMode":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","mix-bm_token(colors.red.300,_blue)",{"mixBlendMode":"var(--colors-red-300, blue)"}], + ["a b","mix-bm_a__b",{"mixBlendMode":"a b"}], + [true,"mix-bm_true",{"mixBlendMode":true}] + ], + "filter": [ + ["auto","filter_auto",{"filter":"var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )"}], + ["red","filter_red",{"filter":"red"}], + ["red.300/40","filter_red.300/40",{"filter":"red.300/40"}], + ["10px","filter_10px",{"filter":"10px"}], + [12,"filter_12",{"filter":12}], + [0,"filter_0",{"filter":0}], + ["{spacing.4}","filter_{spacing.4}",{"filter":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","filter_token(colors.red.300,_blue)",{"filter":"var(--colors-red-300, blue)"}], + ["a b","filter_a__b",{"filter":"a b"}], + [true,"filter_true",{"filter":true}] + ], + "brightness": [ + ["red","brightness_red",{"--brightness":"brightness(red)"}], + ["red.300/40","brightness_red.300/40",{"--brightness":"brightness(red.300/40)"}], + ["10px","brightness_10px",{"--brightness":"brightness(10px)"}], + [12,"brightness_12",{"--brightness":"brightness(12)"}], + [0,"brightness_0",{"--brightness":"brightness(0)"}], + ["auto","brightness_auto",{"--brightness":"brightness(auto)"}], + ["{spacing.4}","brightness_{spacing.4}",{"--brightness":"brightness(var(--spacing-4))"}], + ["token(colors.red.300, blue)","brightness_token(colors.red.300,_blue)",{"--brightness":"brightness(var(--colors-red-300, blue))"}], + ["a b","brightness_a__b",{"--brightness":"brightness(a b)"}], + [true,"brightness_true",{"--brightness":"brightness(true)"}] + ], + "contrast": [ + ["red","contrast_red",{"--contrast":"contrast(red)"}], + ["red.300/40","contrast_red.300/40",{"--contrast":"contrast(red.300/40)"}], + ["10px","contrast_10px",{"--contrast":"contrast(10px)"}], + [12,"contrast_12",{"--contrast":"contrast(12)"}], + [0,"contrast_0",{"--contrast":"contrast(0)"}], + ["auto","contrast_auto",{"--contrast":"contrast(auto)"}], + ["{spacing.4}","contrast_{spacing.4}",{"--contrast":"contrast(var(--spacing-4))"}], + ["token(colors.red.300, blue)","contrast_token(colors.red.300,_blue)",{"--contrast":"contrast(var(--colors-red-300, blue))"}], + ["a b","contrast_a__b",{"--contrast":"contrast(a b)"}], + [true,"contrast_true",{"--contrast":"contrast(true)"}] + ], + "grayscale": [ + ["red","grayscale_red",{"--grayscale":"grayscale(red)"}], + ["red.300/40","grayscale_red.300/40",{"--grayscale":"grayscale(red.300/40)"}], + ["10px","grayscale_10px",{"--grayscale":"grayscale(10px)"}], + [12,"grayscale_12",{"--grayscale":"grayscale(12)"}], + [0,"grayscale_0",{"--grayscale":"grayscale(0)"}], + ["auto","grayscale_auto",{"--grayscale":"grayscale(auto)"}], + ["{spacing.4}","grayscale_{spacing.4}",{"--grayscale":"grayscale(var(--spacing-4))"}], + ["token(colors.red.300, blue)","grayscale_token(colors.red.300,_blue)",{"--grayscale":"grayscale(var(--colors-red-300, blue))"}], + ["a b","grayscale_a__b",{"--grayscale":"grayscale(a b)"}], + [true,"grayscale_true",{"--grayscale":"grayscale(true)"}] + ], + "hueRotate": [ + ["red","hue-rotate_red",{"--hue-rotate":"hue-rotate(red)"}], + ["red.300/40","hue-rotate_red.300/40",{"--hue-rotate":"hue-rotate(red.300/40)"}], + ["10px","hue-rotate_10px",{"--hue-rotate":"hue-rotate(10px)"}], + [12,"hue-rotate_12",{"--hue-rotate":"hue-rotate(12)"}], + [0,"hue-rotate_0",{"--hue-rotate":"hue-rotate(0)"}], + ["auto","hue-rotate_auto",{"--hue-rotate":"hue-rotate(auto)"}], + ["{spacing.4}","hue-rotate_{spacing.4}",{"--hue-rotate":"hue-rotate(var(--spacing-4))"}], + ["token(colors.red.300, blue)","hue-rotate_token(colors.red.300,_blue)",{"--hue-rotate":"hue-rotate(var(--colors-red-300, blue))"}], + ["a b","hue-rotate_a__b",{"--hue-rotate":"hue-rotate(a b)"}], + [true,"hue-rotate_true",{"--hue-rotate":"hue-rotate(true)"}] + ], + "invert": [ + ["red","invert_red",{"--invert":"invert(red)"}], + ["red.300/40","invert_red.300/40",{"--invert":"invert(red.300/40)"}], + ["10px","invert_10px",{"--invert":"invert(10px)"}], + [12,"invert_12",{"--invert":"invert(12)"}], + [0,"invert_0",{"--invert":"invert(0)"}], + ["auto","invert_auto",{"--invert":"invert(auto)"}], + ["{spacing.4}","invert_{spacing.4}",{"--invert":"invert(var(--spacing-4))"}], + ["token(colors.red.300, blue)","invert_token(colors.red.300,_blue)",{"--invert":"invert(var(--colors-red-300, blue))"}], + ["a b","invert_a__b",{"--invert":"invert(a b)"}], + [true,"invert_true",{"--invert":"invert(true)"}] + ], + "saturate": [ + ["red","saturate_red",{"--saturate":"saturate(red)"}], + ["red.300/40","saturate_red.300/40",{"--saturate":"saturate(red.300/40)"}], + ["10px","saturate_10px",{"--saturate":"saturate(10px)"}], + [12,"saturate_12",{"--saturate":"saturate(12)"}], + [0,"saturate_0",{"--saturate":"saturate(0)"}], + ["auto","saturate_auto",{"--saturate":"saturate(auto)"}], + ["{spacing.4}","saturate_{spacing.4}",{"--saturate":"saturate(var(--spacing-4))"}], + ["token(colors.red.300, blue)","saturate_token(colors.red.300,_blue)",{"--saturate":"saturate(var(--colors-red-300, blue))"}], + ["a b","saturate_a__b",{"--saturate":"saturate(a b)"}], + [true,"saturate_true",{"--saturate":"saturate(true)"}] + ], + "sepia": [ + ["red","sepia_red",{"--sepia":"sepia(red)"}], + ["red.300/40","sepia_red.300/40",{"--sepia":"sepia(red.300/40)"}], + ["10px","sepia_10px",{"--sepia":"sepia(10px)"}], + [12,"sepia_12",{"--sepia":"sepia(12)"}], + [0,"sepia_0",{"--sepia":"sepia(0)"}], + ["auto","sepia_auto",{"--sepia":"sepia(auto)"}], + ["{spacing.4}","sepia_{spacing.4}",{"--sepia":"sepia(var(--spacing-4))"}], + ["token(colors.red.300, blue)","sepia_token(colors.red.300,_blue)",{"--sepia":"sepia(var(--colors-red-300, blue))"}], + ["a b","sepia_a__b",{"--sepia":"sepia(a b)"}], + [true,"sepia_true",{"--sepia":"sepia(true)"}] + ], + "dropShadow": [ + ["red","drop-shadow_red",{"--drop-shadow":"red"}], + ["red.300/40","drop-shadow_red.300/40",{"--drop-shadow":"red.300/40"}], + ["10px","drop-shadow_10px",{"--drop-shadow":"10px"}], + [12,"drop-shadow_12",{"--drop-shadow":12}], + [0,"drop-shadow_0",{"--drop-shadow":0}], + ["auto","drop-shadow_auto",{"--drop-shadow":"auto"}], + ["{spacing.4}","drop-shadow_{spacing.4}",{"--drop-shadow":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","drop-shadow_token(colors.red.300,_blue)",{"--drop-shadow":"var(--colors-red-300, blue)"}], + ["a b","drop-shadow_a__b",{"--drop-shadow":"a b"}], + [true,"drop-shadow_true",{"--drop-shadow":true}] + ], + "blur": [ + ["xs","blur_xs",{"--blur":"blur(var(--blurs-xs))"}], + ["sm","blur_sm",{"--blur":"blur(var(--blurs-sm))"}], + ["md","blur_md",{"--blur":"blur(var(--blurs-md))"}], + ["3xl","blur_3xl",{"--blur":"blur(var(--blurs-3xl))"}], + ["red","blur_red",{"--blur":"blur(red)"}], + ["red.300/40","blur_red.300/40",{"--blur":"blur(red.300/40)"}], + ["10px","blur_10px",{"--blur":"blur(10px)"}], + [12,"blur_12",{"--blur":"blur(12)"}], + [0,"blur_0",{"--blur":"blur(0)"}], + ["auto","blur_auto",{"--blur":"blur(auto)"}], + ["{spacing.4}","blur_{spacing.4}",{"--blur":"blur(var(--spacing-4))"}], + ["token(colors.red.300, blue)","blur_token(colors.red.300,_blue)",{"--blur":"blur(var(--colors-red-300, blue))"}], + ["a b","blur_a__b",{"--blur":"blur(a b)"}], + [true,"blur_true",{"--blur":"blur(true)"}] + ], + "backdropFilter": [ + ["auto","bkdp_auto",{"WebkitBackdropFilter":"var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )","backdropFilter":"var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )"}], + ["red","bkdp_red",{"WebkitBackdropFilter":"red","backdropFilter":"red"}], + ["red.300/40","bkdp_red.300/40",{"WebkitBackdropFilter":"red.300/40","backdropFilter":"red.300/40"}], + ["10px","bkdp_10px",{"WebkitBackdropFilter":"10px","backdropFilter":"10px"}], + [12,"bkdp_12",{"WebkitBackdropFilter":12,"backdropFilter":12}], + [0,"bkdp_0",{"WebkitBackdropFilter":0,"backdropFilter":0}], + ["{spacing.4}","bkdp_{spacing.4}",{"WebkitBackdropFilter":"var(--spacing-4)","backdropFilter":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bkdp_token(colors.red.300,_blue)",{"WebkitBackdropFilter":"var(--colors-red-300, blue)","backdropFilter":"var(--colors-red-300, blue)"}], + ["a b","bkdp_a__b",{"WebkitBackdropFilter":"a b","backdropFilter":"a b"}], + [true,"bkdp_true",{"WebkitBackdropFilter":true,"backdropFilter":true}] + ], + "backdropBlur": [ + ["xs","bkdp-blur_xs",{"--backdrop-blur":"blur(var(--blurs-xs))"}], + ["sm","bkdp-blur_sm",{"--backdrop-blur":"blur(var(--blurs-sm))"}], + ["md","bkdp-blur_md",{"--backdrop-blur":"blur(var(--blurs-md))"}], + ["3xl","bkdp-blur_3xl",{"--backdrop-blur":"blur(var(--blurs-3xl))"}], + ["red","bkdp-blur_red",{"--backdrop-blur":"blur(red)"}], + ["red.300/40","bkdp-blur_red.300/40",{"--backdrop-blur":"blur(red.300/40)"}], + ["10px","bkdp-blur_10px",{"--backdrop-blur":"blur(10px)"}], + [12,"bkdp-blur_12",{"--backdrop-blur":"blur(12)"}], + [0,"bkdp-blur_0",{"--backdrop-blur":"blur(0)"}], + ["auto","bkdp-blur_auto",{"--backdrop-blur":"blur(auto)"}], + ["{spacing.4}","bkdp-blur_{spacing.4}",{"--backdrop-blur":"blur(var(--spacing-4))"}], + ["token(colors.red.300, blue)","bkdp-blur_token(colors.red.300,_blue)",{"--backdrop-blur":"blur(var(--colors-red-300, blue))"}], + ["a b","bkdp-blur_a__b",{"--backdrop-blur":"blur(a b)"}], + [true,"bkdp-blur_true",{"--backdrop-blur":"blur(true)"}] + ], + "backdropBrightness": [ + ["red","bkdp-brightness_red",{"--backdrop-brightness":"brightness(red)"}], + ["red.300/40","bkdp-brightness_red.300/40",{"--backdrop-brightness":"brightness(red.300/40)"}], + ["10px","bkdp-brightness_10px",{"--backdrop-brightness":"brightness(10px)"}], + [12,"bkdp-brightness_12",{"--backdrop-brightness":"brightness(12)"}], + [0,"bkdp-brightness_0",{"--backdrop-brightness":"brightness(0)"}], + ["auto","bkdp-brightness_auto",{"--backdrop-brightness":"brightness(auto)"}], + ["{spacing.4}","bkdp-brightness_{spacing.4}",{"--backdrop-brightness":"brightness(var(--spacing-4))"}], + ["token(colors.red.300, blue)","bkdp-brightness_token(colors.red.300,_blue)",{"--backdrop-brightness":"brightness(var(--colors-red-300, blue))"}], + ["a b","bkdp-brightness_a__b",{"--backdrop-brightness":"brightness(a b)"}], + [true,"bkdp-brightness_true",{"--backdrop-brightness":"brightness(true)"}] + ], + "backdropContrast": [ + ["red","bkdp-contrast_red",{"--backdrop-contrast":"contrast(red)"}], + ["red.300/40","bkdp-contrast_red.300/40",{"--backdrop-contrast":"contrast(red.300/40)"}], + ["10px","bkdp-contrast_10px",{"--backdrop-contrast":"contrast(10px)"}], + [12,"bkdp-contrast_12",{"--backdrop-contrast":"contrast(12)"}], + [0,"bkdp-contrast_0",{"--backdrop-contrast":"contrast(0)"}], + ["auto","bkdp-contrast_auto",{"--backdrop-contrast":"contrast(auto)"}], + ["{spacing.4}","bkdp-contrast_{spacing.4}",{"--backdrop-contrast":"contrast(var(--spacing-4))"}], + ["token(colors.red.300, blue)","bkdp-contrast_token(colors.red.300,_blue)",{"--backdrop-contrast":"contrast(var(--colors-red-300, blue))"}], + ["a b","bkdp-contrast_a__b",{"--backdrop-contrast":"contrast(a b)"}], + [true,"bkdp-contrast_true",{"--backdrop-contrast":"contrast(true)"}] + ], + "backdropGrayscale": [ + ["red","bkdp-grayscale_red",{"--backdrop-grayscale":"grayscale(red)"}], + ["red.300/40","bkdp-grayscale_red.300/40",{"--backdrop-grayscale":"grayscale(red.300/40)"}], + ["10px","bkdp-grayscale_10px",{"--backdrop-grayscale":"grayscale(10px)"}], + [12,"bkdp-grayscale_12",{"--backdrop-grayscale":"grayscale(12)"}], + [0,"bkdp-grayscale_0",{"--backdrop-grayscale":"grayscale(0)"}], + ["auto","bkdp-grayscale_auto",{"--backdrop-grayscale":"grayscale(auto)"}], + ["{spacing.4}","bkdp-grayscale_{spacing.4}",{"--backdrop-grayscale":"grayscale(var(--spacing-4))"}], + ["token(colors.red.300, blue)","bkdp-grayscale_token(colors.red.300,_blue)",{"--backdrop-grayscale":"grayscale(var(--colors-red-300, blue))"}], + ["a b","bkdp-grayscale_a__b",{"--backdrop-grayscale":"grayscale(a b)"}], + [true,"bkdp-grayscale_true",{"--backdrop-grayscale":"grayscale(true)"}] + ], + "backdropHueRotate": [ + ["red","bkdp-hue-rotate_red",{"--backdrop-hue-rotate":"hue-rotate(red)"}], + ["red.300/40","bkdp-hue-rotate_red.300/40",{"--backdrop-hue-rotate":"hue-rotate(red.300/40)"}], + ["10px","bkdp-hue-rotate_10px",{"--backdrop-hue-rotate":"hue-rotate(10px)"}], + [12,"bkdp-hue-rotate_12",{"--backdrop-hue-rotate":"hue-rotate(12)"}], + [0,"bkdp-hue-rotate_0",{"--backdrop-hue-rotate":"hue-rotate(0)"}], + ["auto","bkdp-hue-rotate_auto",{"--backdrop-hue-rotate":"hue-rotate(auto)"}], + ["{spacing.4}","bkdp-hue-rotate_{spacing.4}",{"--backdrop-hue-rotate":"hue-rotate(var(--spacing-4))"}], + ["token(colors.red.300, blue)","bkdp-hue-rotate_token(colors.red.300,_blue)",{"--backdrop-hue-rotate":"hue-rotate(var(--colors-red-300, blue))"}], + ["a b","bkdp-hue-rotate_a__b",{"--backdrop-hue-rotate":"hue-rotate(a b)"}], + [true,"bkdp-hue-rotate_true",{"--backdrop-hue-rotate":"hue-rotate(true)"}] + ], + "backdropInvert": [ + ["red","bkdp-invert_red",{"--backdrop-invert":"invert(red)"}], + ["red.300/40","bkdp-invert_red.300/40",{"--backdrop-invert":"invert(red.300/40)"}], + ["10px","bkdp-invert_10px",{"--backdrop-invert":"invert(10px)"}], + [12,"bkdp-invert_12",{"--backdrop-invert":"invert(12)"}], + [0,"bkdp-invert_0",{"--backdrop-invert":"invert(0)"}], + ["auto","bkdp-invert_auto",{"--backdrop-invert":"invert(auto)"}], + ["{spacing.4}","bkdp-invert_{spacing.4}",{"--backdrop-invert":"invert(var(--spacing-4))"}], + ["token(colors.red.300, blue)","bkdp-invert_token(colors.red.300,_blue)",{"--backdrop-invert":"invert(var(--colors-red-300, blue))"}], + ["a b","bkdp-invert_a__b",{"--backdrop-invert":"invert(a b)"}], + [true,"bkdp-invert_true",{"--backdrop-invert":"invert(true)"}] + ], + "backdropOpacity": [ + ["red","bkdp-opacity_red",{"--backdrop-opacity":"red"}], + ["red.300/40","bkdp-opacity_red.300/40",{"--backdrop-opacity":"red.300/40"}], + ["10px","bkdp-opacity_10px",{"--backdrop-opacity":"10px"}], + [12,"bkdp-opacity_12",{"--backdrop-opacity":12}], + [0,"bkdp-opacity_0",{"--backdrop-opacity":0}], + ["auto","bkdp-opacity_auto",{"--backdrop-opacity":"auto"}], + ["{spacing.4}","bkdp-opacity_{spacing.4}",{"--backdrop-opacity":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bkdp-opacity_token(colors.red.300,_blue)",{"--backdrop-opacity":"var(--colors-red-300, blue)"}], + ["a b","bkdp-opacity_a__b",{"--backdrop-opacity":"a b"}], + [true,"bkdp-opacity_true",{"--backdrop-opacity":true}] + ], + "backdropSaturate": [ + ["red","bkdp-saturate_red",{"--backdrop-saturate":"saturate(red)"}], + ["red.300/40","bkdp-saturate_red.300/40",{"--backdrop-saturate":"saturate(red.300/40)"}], + ["10px","bkdp-saturate_10px",{"--backdrop-saturate":"saturate(10px)"}], + [12,"bkdp-saturate_12",{"--backdrop-saturate":"saturate(12)"}], + [0,"bkdp-saturate_0",{"--backdrop-saturate":"saturate(0)"}], + ["auto","bkdp-saturate_auto",{"--backdrop-saturate":"saturate(auto)"}], + ["{spacing.4}","bkdp-saturate_{spacing.4}",{"--backdrop-saturate":"saturate(var(--spacing-4))"}], + ["token(colors.red.300, blue)","bkdp-saturate_token(colors.red.300,_blue)",{"--backdrop-saturate":"saturate(var(--colors-red-300, blue))"}], + ["a b","bkdp-saturate_a__b",{"--backdrop-saturate":"saturate(a b)"}], + [true,"bkdp-saturate_true",{"--backdrop-saturate":"saturate(true)"}] + ], + "backdropSepia": [ + ["red","bkdp-sepia_red",{"--backdrop-sepia":"sepia(red)"}], + ["red.300/40","bkdp-sepia_red.300/40",{"--backdrop-sepia":"sepia(red.300/40)"}], + ["10px","bkdp-sepia_10px",{"--backdrop-sepia":"sepia(10px)"}], + [12,"bkdp-sepia_12",{"--backdrop-sepia":"sepia(12)"}], + [0,"bkdp-sepia_0",{"--backdrop-sepia":"sepia(0)"}], + ["auto","bkdp-sepia_auto",{"--backdrop-sepia":"sepia(auto)"}], + ["{spacing.4}","bkdp-sepia_{spacing.4}",{"--backdrop-sepia":"sepia(var(--spacing-4))"}], + ["token(colors.red.300, blue)","bkdp-sepia_token(colors.red.300,_blue)",{"--backdrop-sepia":"sepia(var(--colors-red-300, blue))"}], + ["a b","bkdp-sepia_a__b",{"--backdrop-sepia":"sepia(a b)"}], + [true,"bkdp-sepia_true",{"--backdrop-sepia":"sepia(true)"}] + ], + "borderCollapse": [ + ["red","bd-cl_red",{"borderCollapse":"red"}], + ["red.300/40","bd-cl_red.300/40",{"borderCollapse":"red.300/40"}], + ["10px","bd-cl_10px",{"borderCollapse":"10px"}], + [12,"bd-cl_12",{"borderCollapse":12}], + [0,"bd-cl_0",{"borderCollapse":0}], + ["auto","bd-cl_auto",{"borderCollapse":"auto"}], + ["{spacing.4}","bd-cl_{spacing.4}",{"borderCollapse":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-cl_token(colors.red.300,_blue)",{"borderCollapse":"var(--colors-red-300, blue)"}], + ["a b","bd-cl_a__b",{"borderCollapse":"a b"}], + [true,"bd-cl_true",{"borderCollapse":true}] + ], + "borderSpacing": [ + ["0","bd-sp_0",{"borderSpacing":"var(--spacing-0)"}], + ["1","bd-sp_1",{"borderSpacing":"var(--spacing-1)"}], + ["2","bd-sp_2",{"borderSpacing":"var(--spacing-2)"}], + ["auto","bd-sp_auto",{"borderSpacing":"var(--border-spacing-x) var(--border-spacing-y)"}], + ["red","bd-sp_red",{"borderSpacing":"red"}], + ["red.300/40","bd-sp_red.300/40",{"borderSpacing":"red.300/40"}], + ["10px","bd-sp_10px",{"borderSpacing":"10px"}], + [12,"bd-sp_12",{"borderSpacing":"var(--spacing-12)"}], + [0,"bd-sp_0",{"borderSpacing":"var(--spacing-0)"}], + ["{spacing.4}","bd-sp_{spacing.4}",{"borderSpacing":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-sp_token(colors.red.300,_blue)",{"borderSpacing":"var(--colors-red-300, blue)"}], + ["a b","bd-sp_a__b",{"borderSpacing":"a b"}], + [true,"bd-sp_true",{"borderSpacing":true}] + ], + "borderSpacingX": [ + ["0","bd-sx_0",{"--border-spacing-x":"var(--spacing-0)"}], + ["1","bd-sx_1",{"--border-spacing-x":"var(--spacing-1)"}], + ["2","bd-sx_2",{"--border-spacing-x":"var(--spacing-2)"}], + ["-gutter","bd-sx_-gutter",{"--border-spacing-x":"calc(var(--spacing-gutter) * -1)"}], + ["red","bd-sx_red",{"--border-spacing-x":"red"}], + ["red.300/40","bd-sx_red.300/40",{"--border-spacing-x":"red.300/40"}], + ["10px","bd-sx_10px",{"--border-spacing-x":"10px"}], + [12,"bd-sx_12",{"--border-spacing-x":"var(--spacing-12)"}], + [0,"bd-sx_0",{"--border-spacing-x":"var(--spacing-0)"}], + ["auto","bd-sx_auto",{"--border-spacing-x":"auto"}], + ["{spacing.4}","bd-sx_{spacing.4}",{"--border-spacing-x":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-sx_token(colors.red.300,_blue)",{"--border-spacing-x":"var(--colors-red-300, blue)"}], + ["a b","bd-sx_a__b",{"--border-spacing-x":"a b"}], + [true,"bd-sx_true",{"--border-spacing-x":true}] + ], + "borderSpacingY": [ + ["0","bd-sy_0",{"--border-spacing-y":"var(--spacing-0)"}], + ["1","bd-sy_1",{"--border-spacing-y":"var(--spacing-1)"}], + ["2","bd-sy_2",{"--border-spacing-y":"var(--spacing-2)"}], + ["-gutter","bd-sy_-gutter",{"--border-spacing-y":"calc(var(--spacing-gutter) * -1)"}], + ["red","bd-sy_red",{"--border-spacing-y":"red"}], + ["red.300/40","bd-sy_red.300/40",{"--border-spacing-y":"red.300/40"}], + ["10px","bd-sy_10px",{"--border-spacing-y":"10px"}], + [12,"bd-sy_12",{"--border-spacing-y":"var(--spacing-12)"}], + [0,"bd-sy_0",{"--border-spacing-y":"var(--spacing-0)"}], + ["auto","bd-sy_auto",{"--border-spacing-y":"auto"}], + ["{spacing.4}","bd-sy_{spacing.4}",{"--border-spacing-y":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bd-sy_token(colors.red.300,_blue)",{"--border-spacing-y":"var(--colors-red-300, blue)"}], + ["a b","bd-sy_a__b",{"--border-spacing-y":"a b"}], + [true,"bd-sy_true",{"--border-spacing-y":true}] + ], + "tableLayout": [ + ["red","tbl_red",{"tableLayout":"red"}], + ["red.300/40","tbl_red.300/40",{"tableLayout":"red.300/40"}], + ["10px","tbl_10px",{"tableLayout":"10px"}], + [12,"tbl_12",{"tableLayout":12}], + [0,"tbl_0",{"tableLayout":0}], + ["auto","tbl_auto",{"tableLayout":"auto"}], + ["{spacing.4}","tbl_{spacing.4}",{"tableLayout":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","tbl_token(colors.red.300,_blue)",{"tableLayout":"var(--colors-red-300, blue)"}], + ["a b","tbl_a__b",{"tableLayout":"a b"}], + [true,"tbl_true",{"tableLayout":true}] + ], + "transitionTimingFunction": [ + ["default","trs-tmf_default",{"--transition-easing":"var(--easings-default)","transitionTimingFunction":"var(--easings-default)"}], + ["linear","trs-tmf_linear",{"--transition-easing":"var(--easings-linear)","transitionTimingFunction":"var(--easings-linear)"}], + ["in","trs-tmf_in",{"--transition-easing":"var(--easings-in)","transitionTimingFunction":"var(--easings-in)"}], + ["in-out","trs-tmf_in-out",{"--transition-easing":"var(--easings-in-out)","transitionTimingFunction":"var(--easings-in-out)"}], + ["red","trs-tmf_red",{"--transition-easing":"red","transitionTimingFunction":"red"}], + ["red.300/40","trs-tmf_red.300/40",{"--transition-easing":"red.300/40","transitionTimingFunction":"red.300/40"}], + ["10px","trs-tmf_10px",{"--transition-easing":"10px","transitionTimingFunction":"10px"}], + [12,"trs-tmf_12",{"--transition-easing":12,"transitionTimingFunction":12}], + [0,"trs-tmf_0",{"--transition-easing":0,"transitionTimingFunction":0}], + ["auto","trs-tmf_auto",{"--transition-easing":"auto","transitionTimingFunction":"auto"}], + ["{spacing.4}","trs-tmf_{spacing.4}",{"--transition-easing":"var(--spacing-4)","transitionTimingFunction":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trs-tmf_token(colors.red.300,_blue)",{"--transition-easing":"var(--colors-red-300, blue)","transitionTimingFunction":"var(--colors-red-300, blue)"}], + ["a b","trs-tmf_a__b",{"--transition-easing":"a b","transitionTimingFunction":"a b"}], + [true,"trs-tmf_true",{"--transition-easing":true,"transitionTimingFunction":true}] + ], + "transitionDelay": [ + ["fastest","trs-dly_fastest",{"transitionDelay":"var(--durations-fastest)"}], + ["faster","trs-dly_faster",{"transitionDelay":"var(--durations-faster)"}], + ["fast","trs-dly_fast",{"transitionDelay":"var(--durations-fast)"}], + ["slowest","trs-dly_slowest",{"transitionDelay":"var(--durations-slowest)"}], + ["red","trs-dly_red",{"transitionDelay":"red"}], + ["red.300/40","trs-dly_red.300/40",{"transitionDelay":"red.300/40"}], + ["10px","trs-dly_10px",{"transitionDelay":"10px"}], + [12,"trs-dly_12",{"transitionDelay":12}], + [0,"trs-dly_0",{"transitionDelay":0}], + ["auto","trs-dly_auto",{"transitionDelay":"auto"}], + ["{spacing.4}","trs-dly_{spacing.4}",{"transitionDelay":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trs-dly_token(colors.red.300,_blue)",{"transitionDelay":"var(--colors-red-300, blue)"}], + ["a b","trs-dly_a__b",{"transitionDelay":"a b"}], + [true,"trs-dly_true",{"transitionDelay":true}] + ], + "transitionDuration": [ + ["fastest","trs-dur_fastest",{"--transition-duration":"var(--durations-fastest)","transitionDuration":"var(--durations-fastest)"}], + ["faster","trs-dur_faster",{"--transition-duration":"var(--durations-faster)","transitionDuration":"var(--durations-faster)"}], + ["fast","trs-dur_fast",{"--transition-duration":"var(--durations-fast)","transitionDuration":"var(--durations-fast)"}], + ["slowest","trs-dur_slowest",{"--transition-duration":"var(--durations-slowest)","transitionDuration":"var(--durations-slowest)"}], + ["red","trs-dur_red",{"--transition-duration":"red","transitionDuration":"red"}], + ["red.300/40","trs-dur_red.300/40",{"--transition-duration":"red.300/40","transitionDuration":"red.300/40"}], + ["10px","trs-dur_10px",{"--transition-duration":"10px","transitionDuration":"10px"}], + [12,"trs-dur_12",{"--transition-duration":12,"transitionDuration":12}], + [0,"trs-dur_0",{"--transition-duration":0,"transitionDuration":0}], + ["auto","trs-dur_auto",{"--transition-duration":"auto","transitionDuration":"auto"}], + ["{spacing.4}","trs-dur_{spacing.4}",{"--transition-duration":"var(--spacing-4)","transitionDuration":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trs-dur_token(colors.red.300,_blue)",{"--transition-duration":"var(--colors-red-300, blue)","transitionDuration":"var(--colors-red-300, blue)"}], + ["a b","trs-dur_a__b",{"--transition-duration":"a b","transitionDuration":"a b"}], + [true,"trs-dur_true",{"--transition-duration":true,"transitionDuration":true}] + ], + "transitionProperty": [ + ["common","trs-prop_common",{"--transition-prop":"color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter","transitionProperty":"color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"}], + ["colors","trs-prop_colors",{"--transition-prop":"color, background-color, border-color, outline-color, text-decoration-color, fill, stroke","transitionProperty":"color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"}], + ["size","trs-prop_size",{"--transition-prop":"width, height, min-width, max-width, min-height, max-height","transitionProperty":"width, height, min-width, max-width, min-height, max-height"}], + ["background","trs-prop_background",{"--transition-prop":"background, background-color, background-image, background-position","transitionProperty":"background, background-color, background-image, background-position"}], + ["red","trs-prop_red",{"--transition-prop":"red","transitionProperty":"red"}], + ["red.300/40","trs-prop_red.300/40",{"--transition-prop":"red.300/40","transitionProperty":"red.300/40"}], + ["10px","trs-prop_10px",{"--transition-prop":"10px","transitionProperty":"10px"}], + [12,"trs-prop_12",{"--transition-prop":12,"transitionProperty":12}], + [0,"trs-prop_0",{"--transition-prop":0,"transitionProperty":0}], + ["auto","trs-prop_auto",{"--transition-prop":"auto","transitionProperty":"auto"}], + ["{spacing.4}","trs-prop_{spacing.4}",{"--transition-prop":"var(--spacing-4)","transitionProperty":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trs-prop_token(colors.red.300,_blue)",{"--transition-prop":"var(--colors-red-300, blue)","transitionProperty":"var(--colors-red-300, blue)"}], + ["a b","trs-prop_a__b",{"--transition-prop":"a b","transitionProperty":"a b"}], + [true,"trs-prop_true",{"--transition-prop":true,"transitionProperty":true}] + ], + "transition": [ + ["all","trs_all",{"transitionProperty":"var(--transition-prop, all)","transitionTimingFunction":"var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))","transitionDuration":"var(--transition-duration, 150ms)"}], + ["common","trs_common",{"transitionProperty":"var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter)","transitionTimingFunction":"var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))","transitionDuration":"var(--transition-duration, 150ms)"}], + ["size","trs_size",{"transitionProperty":"var(--transition-prop, width, height, min-width, max-width, min-height, max-height)","transitionTimingFunction":"var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))","transitionDuration":"var(--transition-duration, 150ms)"}], + ["transform","trs_transform",{"transitionProperty":"var(--transition-prop, transform)","transitionTimingFunction":"var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))","transitionDuration":"var(--transition-duration, 150ms)"}], + ["red","trs_red",{"transition":"red"}], + ["red.300/40","trs_red.300/40",{"transition":"red.300/40"}], + ["10px","trs_10px",{"transition":"10px"}], + [12,"trs_12",{"transition":12}], + [0,"trs_0",{"transition":0}], + ["auto","trs_auto",{"transition":"auto"}], + ["{spacing.4}","trs_{spacing.4}",{"transition":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trs_token(colors.red.300,_blue)",{"transition":"var(--colors-red-300, blue)"}], + ["a b","trs_a__b",{"transition":"a b"}], + [true,"trs_true",{"transition":true}] + ], + "animation": [ + ["spin","anim_spin",{"animation":"var(--animations-spin)"}], + ["ping","anim_ping",{"animation":"var(--animations-ping)"}], + ["pulse","anim_pulse",{"animation":"var(--animations-pulse)"}], + ["bounce","anim_bounce",{"animation":"var(--animations-bounce)"}], + ["red","anim_red",{"animation":"red"}], + ["red.300/40","anim_red.300/40",{"animation":"red.300/40"}], + ["10px","anim_10px",{"animation":"10px"}], + [12,"anim_12",{"animation":12}], + [0,"anim_0",{"animation":0}], + ["auto","anim_auto",{"animation":"auto"}], + ["{spacing.4}","anim_{spacing.4}",{"animation":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim_token(colors.red.300,_blue)",{"animation":"var(--colors-red-300, blue)"}], + ["a b","anim_a__b",{"animation":"a b"}], + [true,"anim_true",{"animation":true}] + ], + "animationName": [ + ["spin","anim-n_spin",{"animationName":"spin"}], + ["ping","anim-n_ping",{"animationName":"ping"}], + ["pulse","anim-n_pulse",{"animationName":"pulse"}], + ["bounce","anim-n_bounce",{"animationName":"bounce"}], + ["red","anim-n_red",{"animationName":"red"}], + ["red.300/40","anim-n_red.300/40",{"animationName":"red.300/40"}], + ["10px","anim-n_10px",{"animationName":"10px"}], + [12,"anim-n_12",{"animationName":12}], + [0,"anim-n_0",{"animationName":0}], + ["auto","anim-n_auto",{"animationName":"auto"}], + ["{spacing.4}","anim-n_{spacing.4}",{"animationName":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-n_token(colors.red.300,_blue)",{"animationName":"var(--colors-red-300, blue)"}], + ["a b","anim-n_a__b",{"animationName":"a b"}], + [true,"anim-n_true",{"animationName":true}] + ], + "animationTimingFunction": [ + ["default","anim-tmf_default",{"animationTimingFunction":"var(--easings-default)"}], + ["linear","anim-tmf_linear",{"animationTimingFunction":"var(--easings-linear)"}], + ["in","anim-tmf_in",{"animationTimingFunction":"var(--easings-in)"}], + ["in-out","anim-tmf_in-out",{"animationTimingFunction":"var(--easings-in-out)"}], + ["red","anim-tmf_red",{"animationTimingFunction":"red"}], + ["red.300/40","anim-tmf_red.300/40",{"animationTimingFunction":"red.300/40"}], + ["10px","anim-tmf_10px",{"animationTimingFunction":"10px"}], + [12,"anim-tmf_12",{"animationTimingFunction":12}], + [0,"anim-tmf_0",{"animationTimingFunction":0}], + ["auto","anim-tmf_auto",{"animationTimingFunction":"auto"}], + ["{spacing.4}","anim-tmf_{spacing.4}",{"animationTimingFunction":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-tmf_token(colors.red.300,_blue)",{"animationTimingFunction":"var(--colors-red-300, blue)"}], + ["a b","anim-tmf_a__b",{"animationTimingFunction":"a b"}], + [true,"anim-tmf_true",{"animationTimingFunction":true}] + ], + "animationDuration": [ + ["fastest","anim-dur_fastest",{"animationDuration":"var(--durations-fastest)"}], + ["faster","anim-dur_faster",{"animationDuration":"var(--durations-faster)"}], + ["fast","anim-dur_fast",{"animationDuration":"var(--durations-fast)"}], + ["slowest","anim-dur_slowest",{"animationDuration":"var(--durations-slowest)"}], + ["red","anim-dur_red",{"animationDuration":"red"}], + ["red.300/40","anim-dur_red.300/40",{"animationDuration":"red.300/40"}], + ["10px","anim-dur_10px",{"animationDuration":"10px"}], + [12,"anim-dur_12",{"animationDuration":12}], + [0,"anim-dur_0",{"animationDuration":0}], + ["auto","anim-dur_auto",{"animationDuration":"auto"}], + ["{spacing.4}","anim-dur_{spacing.4}",{"animationDuration":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-dur_token(colors.red.300,_blue)",{"animationDuration":"var(--colors-red-300, blue)"}], + ["a b","anim-dur_a__b",{"animationDuration":"a b"}], + [true,"anim-dur_true",{"animationDuration":true}] + ], + "animationDelay": [ + ["fastest","anim-dly_fastest",{"animationDelay":"var(--durations-fastest)"}], + ["faster","anim-dly_faster",{"animationDelay":"var(--durations-faster)"}], + ["fast","anim-dly_fast",{"animationDelay":"var(--durations-fast)"}], + ["slowest","anim-dly_slowest",{"animationDelay":"var(--durations-slowest)"}], + ["red","anim-dly_red",{"animationDelay":"red"}], + ["red.300/40","anim-dly_red.300/40",{"animationDelay":"red.300/40"}], + ["10px","anim-dly_10px",{"animationDelay":"10px"}], + [12,"anim-dly_12",{"animationDelay":12}], + [0,"anim-dly_0",{"animationDelay":0}], + ["auto","anim-dly_auto",{"animationDelay":"auto"}], + ["{spacing.4}","anim-dly_{spacing.4}",{"animationDelay":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-dly_token(colors.red.300,_blue)",{"animationDelay":"var(--colors-red-300, blue)"}], + ["a b","anim-dly_a__b",{"animationDelay":"a b"}], + [true,"anim-dly_true",{"animationDelay":true}] + ], + "animationPlayState": [ + ["red","anim-ps_red",{"animationPlayState":"red"}], + ["red.300/40","anim-ps_red.300/40",{"animationPlayState":"red.300/40"}], + ["10px","anim-ps_10px",{"animationPlayState":"10px"}], + [12,"anim-ps_12",{"animationPlayState":12}], + [0,"anim-ps_0",{"animationPlayState":0}], + ["auto","anim-ps_auto",{"animationPlayState":"auto"}], + ["{spacing.4}","anim-ps_{spacing.4}",{"animationPlayState":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-ps_token(colors.red.300,_blue)",{"animationPlayState":"var(--colors-red-300, blue)"}], + ["a b","anim-ps_a__b",{"animationPlayState":"a b"}], + [true,"anim-ps_true",{"animationPlayState":true}] + ], + "animationComposition": [ + ["red","anim-comp_red",{"animationComposition":"red"}], + ["red.300/40","anim-comp_red.300/40",{"animationComposition":"red.300/40"}], + ["10px","anim-comp_10px",{"animationComposition":"10px"}], + [12,"anim-comp_12",{"animationComposition":12}], + [0,"anim-comp_0",{"animationComposition":0}], + ["auto","anim-comp_auto",{"animationComposition":"auto"}], + ["{spacing.4}","anim-comp_{spacing.4}",{"animationComposition":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-comp_token(colors.red.300,_blue)",{"animationComposition":"var(--colors-red-300, blue)"}], + ["a b","anim-comp_a__b",{"animationComposition":"a b"}], + [true,"anim-comp_true",{"animationComposition":true}] + ], + "animationFillMode": [ + ["red","anim-fm_red",{"animationFillMode":"red"}], + ["red.300/40","anim-fm_red.300/40",{"animationFillMode":"red.300/40"}], + ["10px","anim-fm_10px",{"animationFillMode":"10px"}], + [12,"anim-fm_12",{"animationFillMode":12}], + [0,"anim-fm_0",{"animationFillMode":0}], + ["auto","anim-fm_auto",{"animationFillMode":"auto"}], + ["{spacing.4}","anim-fm_{spacing.4}",{"animationFillMode":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-fm_token(colors.red.300,_blue)",{"animationFillMode":"var(--colors-red-300, blue)"}], + ["a b","anim-fm_a__b",{"animationFillMode":"a b"}], + [true,"anim-fm_true",{"animationFillMode":true}] + ], + "animationDirection": [ + ["red","anim-dir_red",{"animationDirection":"red"}], + ["red.300/40","anim-dir_red.300/40",{"animationDirection":"red.300/40"}], + ["10px","anim-dir_10px",{"animationDirection":"10px"}], + [12,"anim-dir_12",{"animationDirection":12}], + [0,"anim-dir_0",{"animationDirection":0}], + ["auto","anim-dir_auto",{"animationDirection":"auto"}], + ["{spacing.4}","anim-dir_{spacing.4}",{"animationDirection":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-dir_token(colors.red.300,_blue)",{"animationDirection":"var(--colors-red-300, blue)"}], + ["a b","anim-dir_a__b",{"animationDirection":"a b"}], + [true,"anim-dir_true",{"animationDirection":true}] + ], + "animationIterationCount": [ + ["red","anim-ic_red",{"animationIterationCount":"red"}], + ["red.300/40","anim-ic_red.300/40",{"animationIterationCount":"red.300/40"}], + ["10px","anim-ic_10px",{"animationIterationCount":"10px"}], + [12,"anim-ic_12",{"animationIterationCount":12}], + [0,"anim-ic_0",{"animationIterationCount":0}], + ["auto","anim-ic_auto",{"animationIterationCount":"auto"}], + ["{spacing.4}","anim-ic_{spacing.4}",{"animationIterationCount":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-ic_token(colors.red.300,_blue)",{"animationIterationCount":"var(--colors-red-300, blue)"}], + ["a b","anim-ic_a__b",{"animationIterationCount":"a b"}], + [true,"anim-ic_true",{"animationIterationCount":true}] + ], + "animationRange": [ + ["red","anim-r_red",{"animationRange":"red"}], + ["red.300/40","anim-r_red.300/40",{"animationRange":"red.300/40"}], + ["10px","anim-r_10px",{"animationRange":"10px"}], + [12,"anim-r_12",{"animationRange":12}], + [0,"anim-r_0",{"animationRange":0}], + ["auto","anim-r_auto",{"animationRange":"auto"}], + ["{spacing.4}","anim-r_{spacing.4}",{"animationRange":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-r_token(colors.red.300,_blue)",{"animationRange":"var(--colors-red-300, blue)"}], + ["a b","anim-r_a__b",{"animationRange":"a b"}], + [true,"anim-r_true",{"animationRange":true}] + ], + "animationState": [ + ["red","anim-s_red",{"animationState":"red"}], + ["red.300/40","anim-s_red.300/40",{"animationState":"red.300/40"}], + ["10px","anim-s_10px",{"animationState":"10px"}], + [12,"anim-s_12",{"animationState":12}], + [0,"anim-s_0",{"animationState":0}], + ["auto","anim-s_auto",{"animationState":"auto"}], + ["{spacing.4}","anim-s_{spacing.4}",{"animationState":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-s_token(colors.red.300,_blue)",{"animationState":"var(--colors-red-300, blue)"}], + ["a b","anim-s_a__b",{"animationState":"a b"}], + [true,"anim-s_true",{"animationState":true}] + ], + "animationRangeStart": [ + ["red","anim-rs_red",{"animationRangeStart":"red"}], + ["red.300/40","anim-rs_red.300/40",{"animationRangeStart":"red.300/40"}], + ["10px","anim-rs_10px",{"animationRangeStart":"10px"}], + [12,"anim-rs_12",{"animationRangeStart":12}], + [0,"anim-rs_0",{"animationRangeStart":0}], + ["auto","anim-rs_auto",{"animationRangeStart":"auto"}], + ["{spacing.4}","anim-rs_{spacing.4}",{"animationRangeStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-rs_token(colors.red.300,_blue)",{"animationRangeStart":"var(--colors-red-300, blue)"}], + ["a b","anim-rs_a__b",{"animationRangeStart":"a b"}], + [true,"anim-rs_true",{"animationRangeStart":true}] + ], + "animationRangeEnd": [ + ["red","anim-re_red",{"animationRangeEnd":"red"}], + ["red.300/40","anim-re_red.300/40",{"animationRangeEnd":"red.300/40"}], + ["10px","anim-re_10px",{"animationRangeEnd":"10px"}], + [12,"anim-re_12",{"animationRangeEnd":12}], + [0,"anim-re_0",{"animationRangeEnd":0}], + ["auto","anim-re_auto",{"animationRangeEnd":"auto"}], + ["{spacing.4}","anim-re_{spacing.4}",{"animationRangeEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-re_token(colors.red.300,_blue)",{"animationRangeEnd":"var(--colors-red-300, blue)"}], + ["a b","anim-re_a__b",{"animationRangeEnd":"a b"}], + [true,"anim-re_true",{"animationRangeEnd":true}] + ], + "animationTimeline": [ + ["red","anim-tl_red",{"animationTimeline":"red"}], + ["red.300/40","anim-tl_red.300/40",{"animationTimeline":"red.300/40"}], + ["10px","anim-tl_10px",{"animationTimeline":"10px"}], + [12,"anim-tl_12",{"animationTimeline":12}], + [0,"anim-tl_0",{"animationTimeline":0}], + ["auto","anim-tl_auto",{"animationTimeline":"auto"}], + ["{spacing.4}","anim-tl_{spacing.4}",{"animationTimeline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","anim-tl_token(colors.red.300,_blue)",{"animationTimeline":"var(--colors-red-300, blue)"}], + ["a b","anim-tl_a__b",{"animationTimeline":"a b"}], + [true,"anim-tl_true",{"animationTimeline":true}] + ], + "transformOrigin": [ + ["red","trf-o_red",{"transformOrigin":"red"}], + ["red.300/40","trf-o_red.300/40",{"transformOrigin":"red.300/40"}], + ["10px","trf-o_10px",{"transformOrigin":"10px"}], + [12,"trf-o_12",{"transformOrigin":12}], + [0,"trf-o_0",{"transformOrigin":0}], + ["auto","trf-o_auto",{"transformOrigin":"auto"}], + ["{spacing.4}","trf-o_{spacing.4}",{"transformOrigin":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trf-o_token(colors.red.300,_blue)",{"transformOrigin":"var(--colors-red-300, blue)"}], + ["a b","trf-o_a__b",{"transformOrigin":"a b"}], + [true,"trf-o_true",{"transformOrigin":true}] + ], + "transformBox": [ + ["red","trf-b_red",{"transformBox":"red"}], + ["red.300/40","trf-b_red.300/40",{"transformBox":"red.300/40"}], + ["10px","trf-b_10px",{"transformBox":"10px"}], + [12,"trf-b_12",{"transformBox":12}], + [0,"trf-b_0",{"transformBox":0}], + ["auto","trf-b_auto",{"transformBox":"auto"}], + ["{spacing.4}","trf-b_{spacing.4}",{"transformBox":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trf-b_token(colors.red.300,_blue)",{"transformBox":"var(--colors-red-300, blue)"}], + ["a b","trf-b_a__b",{"transformBox":"a b"}], + [true,"trf-b_true",{"transformBox":true}] + ], + "transformStyle": [ + ["red","trf-s_red",{"transformStyle":"red"}], + ["red.300/40","trf-s_red.300/40",{"transformStyle":"red.300/40"}], + ["10px","trf-s_10px",{"transformStyle":"10px"}], + [12,"trf-s_12",{"transformStyle":12}], + [0,"trf-s_0",{"transformStyle":0}], + ["auto","trf-s_auto",{"transformStyle":"auto"}], + ["{spacing.4}","trf-s_{spacing.4}",{"transformStyle":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trf-s_token(colors.red.300,_blue)",{"transformStyle":"var(--colors-red-300, blue)"}], + ["a b","trf-s_a__b",{"transformStyle":"a b"}], + [true,"trf-s_true",{"transformStyle":true}] + ], + "transform": [ + ["red","trf_red",{"transform":"red"}], + ["red.300/40","trf_red.300/40",{"transform":"red.300/40"}], + ["10px","trf_10px",{"transform":"10px"}], + [12,"trf_12",{"transform":12}], + [0,"trf_0",{"transform":0}], + ["auto","trf_auto",{"transform":"auto"}], + ["{spacing.4}","trf_{spacing.4}",{"transform":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","trf_token(colors.red.300,_blue)",{"transform":"var(--colors-red-300, blue)"}], + ["a b","trf_a__b",{"transform":"a b"}], + [true,"trf_true",{"transform":true}] + ], + "rotate": [ + ["auto","rotate_auto",{"rotate":"var(--rotate-x) var(--rotate-y)"}], + ["auto-3d","rotate_auto-3d",{"rotate":"var(--rotate-x) var(--rotate-y) var(--rotate-z)"}], + ["red","rotate_red",{"rotate":"red"}], + ["red.300/40","rotate_red.300/40",{"rotate":"red.300/40"}], + ["10px","rotate_10px",{"rotate":"10px"}], + [12,"rotate_12",{"rotate":12}], + [0,"rotate_0",{"rotate":0}], + ["{spacing.4}","rotate_{spacing.4}",{"rotate":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","rotate_token(colors.red.300,_blue)",{"rotate":"var(--colors-red-300, blue)"}], + ["a b","rotate_a__b",{"rotate":"a b"}], + [true,"rotate_true",{"rotate":true}] + ], + "rotateX": [ + ["red","rotate-x_red",{"--rotate-x":"red"}], + ["red.300/40","rotate-x_red.300/40",{"--rotate-x":"red.300/40"}], + ["10px","rotate-x_10px",{"--rotate-x":"10px"}], + [12,"rotate-x_12",{"--rotate-x":12}], + [0,"rotate-x_0",{"--rotate-x":0}], + ["auto","rotate-x_auto",{"--rotate-x":"auto"}], + ["{spacing.4}","rotate-x_{spacing.4}",{"--rotate-x":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","rotate-x_token(colors.red.300,_blue)",{"--rotate-x":"var(--colors-red-300, blue)"}], + ["a b","rotate-x_a__b",{"--rotate-x":"a b"}], + [true,"rotate-x_true",{"--rotate-x":true}] + ], + "rotateY": [ + ["red","rotate-y_red",{"--rotate-y":"red"}], + ["red.300/40","rotate-y_red.300/40",{"--rotate-y":"red.300/40"}], + ["10px","rotate-y_10px",{"--rotate-y":"10px"}], + [12,"rotate-y_12",{"--rotate-y":12}], + [0,"rotate-y_0",{"--rotate-y":0}], + ["auto","rotate-y_auto",{"--rotate-y":"auto"}], + ["{spacing.4}","rotate-y_{spacing.4}",{"--rotate-y":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","rotate-y_token(colors.red.300,_blue)",{"--rotate-y":"var(--colors-red-300, blue)"}], + ["a b","rotate-y_a__b",{"--rotate-y":"a b"}], + [true,"rotate-y_true",{"--rotate-y":true}] + ], + "rotateZ": [ + ["red","rotate-z_red",{"--rotate-z":"red"}], + ["red.300/40","rotate-z_red.300/40",{"--rotate-z":"red.300/40"}], + ["10px","rotate-z_10px",{"--rotate-z":"10px"}], + [12,"rotate-z_12",{"--rotate-z":12}], + [0,"rotate-z_0",{"--rotate-z":0}], + ["auto","rotate-z_auto",{"--rotate-z":"auto"}], + ["{spacing.4}","rotate-z_{spacing.4}",{"--rotate-z":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","rotate-z_token(colors.red.300,_blue)",{"--rotate-z":"var(--colors-red-300, blue)"}], + ["a b","rotate-z_a__b",{"--rotate-z":"a b"}], + [true,"rotate-z_true",{"--rotate-z":true}] + ], + "scale": [ + ["auto","scale_auto",{"scale":"var(--scale-x) var(--scale-y)"}], + ["red","scale_red",{"scale":"red"}], + ["red.300/40","scale_red.300/40",{"scale":"red.300/40"}], + ["10px","scale_10px",{"scale":"10px"}], + [12,"scale_12",{"scale":12}], + [0,"scale_0",{"scale":0}], + ["{spacing.4}","scale_{spacing.4}",{"scale":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scale_token(colors.red.300,_blue)",{"scale":"var(--colors-red-300, blue)"}], + ["a b","scale_a__b",{"scale":"a b"}], + [true,"scale_true",{"scale":true}] + ], + "scaleX": [ + ["red","scale-x_red",{"--scale-x":"red"}], + ["red.300/40","scale-x_red.300/40",{"--scale-x":"red.300/40"}], + ["10px","scale-x_10px",{"--scale-x":"10px"}], + [12,"scale-x_12",{"--scale-x":12}], + [0,"scale-x_0",{"--scale-x":0}], + ["auto","scale-x_auto",{"--scale-x":"auto"}], + ["{spacing.4}","scale-x_{spacing.4}",{"--scale-x":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scale-x_token(colors.red.300,_blue)",{"--scale-x":"var(--colors-red-300, blue)"}], + ["a b","scale-x_a__b",{"--scale-x":"a b"}], + [true,"scale-x_true",{"--scale-x":true}] + ], + "scaleY": [ + ["red","scale-y_red",{"--scale-y":"red"}], + ["red.300/40","scale-y_red.300/40",{"--scale-y":"red.300/40"}], + ["10px","scale-y_10px",{"--scale-y":"10px"}], + [12,"scale-y_12",{"--scale-y":12}], + [0,"scale-y_0",{"--scale-y":0}], + ["auto","scale-y_auto",{"--scale-y":"auto"}], + ["{spacing.4}","scale-y_{spacing.4}",{"--scale-y":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scale-y_token(colors.red.300,_blue)",{"--scale-y":"var(--colors-red-300, blue)"}], + ["a b","scale-y_a__b",{"--scale-y":"a b"}], + [true,"scale-y_true",{"--scale-y":true}] + ], + "translate": [ + ["auto","translate_auto",{"translate":"var(--translate-x) var(--translate-y)"}], + ["auto-3d","translate_auto-3d",{"translate":"var(--translate-x) var(--translate-y) var(--translate-z)"}], + ["red","translate_red",{"translate":"red"}], + ["red.300/40","translate_red.300/40",{"translate":"red.300/40"}], + ["10px","translate_10px",{"translate":"10px"}], + [12,"translate_12",{"translate":12}], + [0,"translate_0",{"translate":0}], + ["{spacing.4}","translate_{spacing.4}",{"translate":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","translate_token(colors.red.300,_blue)",{"translate":"var(--colors-red-300, blue)"}], + ["a b","translate_a__b",{"translate":"a b"}], + [true,"translate_true",{"translate":true}] + ], + "translateX": [ + ["0","translate-x_0",{"--translate-x":"var(--spacing-0)"}], + ["1","translate-x_1",{"--translate-x":"var(--spacing-1)"}], + ["2","translate-x_2",{"--translate-x":"var(--spacing-2)"}], + ["-full","translate-x_-full",{"--translate-x":"-100%"}], + ["red","translate-x_red",{"--translate-x":"red"}], + ["red.300/40","translate-x_red.300/40",{"--translate-x":"red.300/40"}], + ["10px","translate-x_10px",{"--translate-x":"10px"}], + [12,"translate-x_12",{"--translate-x":"var(--spacing-12)"}], + [0,"translate-x_0",{"--translate-x":"var(--spacing-0)"}], + ["auto","translate-x_auto",{"--translate-x":"auto"}], + ["{spacing.4}","translate-x_{spacing.4}",{"--translate-x":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","translate-x_token(colors.red.300,_blue)",{"--translate-x":"var(--colors-red-300, blue)"}], + ["a b","translate-x_a__b",{"--translate-x":"a b"}], + [true,"translate-x_true",{"--translate-x":true}] + ], + "translateY": [ + ["0","translate-y_0",{"--translate-y":"var(--spacing-0)"}], + ["1","translate-y_1",{"--translate-y":"var(--spacing-1)"}], + ["2","translate-y_2",{"--translate-y":"var(--spacing-2)"}], + ["-full","translate-y_-full",{"--translate-y":"-100%"}], + ["red","translate-y_red",{"--translate-y":"red"}], + ["red.300/40","translate-y_red.300/40",{"--translate-y":"red.300/40"}], + ["10px","translate-y_10px",{"--translate-y":"10px"}], + [12,"translate-y_12",{"--translate-y":"var(--spacing-12)"}], + [0,"translate-y_0",{"--translate-y":"var(--spacing-0)"}], + ["auto","translate-y_auto",{"--translate-y":"auto"}], + ["{spacing.4}","translate-y_{spacing.4}",{"--translate-y":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","translate-y_token(colors.red.300,_blue)",{"--translate-y":"var(--colors-red-300, blue)"}], + ["a b","translate-y_a__b",{"--translate-y":"a b"}], + [true,"translate-y_true",{"--translate-y":true}] + ], + "translateZ": [ + ["0","translate-z_0",{"--translate-z":"var(--spacing-0)"}], + ["1","translate-z_1",{"--translate-z":"var(--spacing-1)"}], + ["2","translate-z_2",{"--translate-z":"var(--spacing-2)"}], + ["-full","translate-z_-full",{"--translate-z":"-100%"}], + ["red","translate-z_red",{"--translate-z":"red"}], + ["red.300/40","translate-z_red.300/40",{"--translate-z":"red.300/40"}], + ["10px","translate-z_10px",{"--translate-z":"10px"}], + [12,"translate-z_12",{"--translate-z":"var(--spacing-12)"}], + [0,"translate-z_0",{"--translate-z":"var(--spacing-0)"}], + ["auto","translate-z_auto",{"--translate-z":"auto"}], + ["{spacing.4}","translate-z_{spacing.4}",{"--translate-z":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","translate-z_token(colors.red.300,_blue)",{"--translate-z":"var(--colors-red-300, blue)"}], + ["a b","translate-z_a__b",{"--translate-z":"a b"}], + [true,"translate-z_true",{"--translate-z":true}] + ], + "accentColor": [ + ["current","ac-c_current",{"accentColor":"var(--colors-current)"}], + ["black","ac-c_black",{"accentColor":"var(--colors-black)"}], + ["white","ac-c_white",{"accentColor":"var(--colors-white)"}], + ["colorPalette.heading","ac-c_colorPalette.heading",{"accentColor":"var(--colors-color-palette-heading)"}], + ["red","ac-c_red",{"accentColor":"red"}], + ["red.300/40","ac-c_red.300/40",{"--mix-accentColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","accentColor":"var(--mix-accentColor, var(--colors-red-300))"}], + ["10px","ac-c_10px",{"accentColor":"10px"}], + [12,"ac-c_12",{"accentColor":12}], + [0,"ac-c_0",{"accentColor":0}], + ["auto","ac-c_auto",{"accentColor":"auto"}], + ["{spacing.4}","ac-c_{spacing.4}",{"accentColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ac-c_token(colors.red.300,_blue)",{"accentColor":"var(--colors-red-300, blue)"}], + ["a b","ac-c_a__b",{"accentColor":"a b"}], + [true,"ac-c_true",{"accentColor":true}] + ], + "caretColor": [ + ["current","ca-c_current",{"caretColor":"var(--colors-current)"}], + ["black","ca-c_black",{"caretColor":"var(--colors-black)"}], + ["white","ca-c_white",{"caretColor":"var(--colors-white)"}], + ["colorPalette.heading","ca-c_colorPalette.heading",{"caretColor":"var(--colors-color-palette-heading)"}], + ["red","ca-c_red",{"caretColor":"red"}], + ["red.300/40","ca-c_red.300/40",{"--mix-caretColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","caretColor":"var(--mix-caretColor, var(--colors-red-300))"}], + ["10px","ca-c_10px",{"caretColor":"10px"}], + [12,"ca-c_12",{"caretColor":12}], + [0,"ca-c_0",{"caretColor":0}], + ["auto","ca-c_auto",{"caretColor":"auto"}], + ["{spacing.4}","ca-c_{spacing.4}",{"caretColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ca-c_token(colors.red.300,_blue)",{"caretColor":"var(--colors-red-300, blue)"}], + ["a b","ca-c_a__b",{"caretColor":"a b"}], + [true,"ca-c_true",{"caretColor":true}] + ], + "scrollBehavior": [ + ["red","scr-bhv_red",{"scrollBehavior":"red"}], + ["red.300/40","scr-bhv_red.300/40",{"scrollBehavior":"red.300/40"}], + ["10px","scr-bhv_10px",{"scrollBehavior":"10px"}], + [12,"scr-bhv_12",{"scrollBehavior":12}], + [0,"scr-bhv_0",{"scrollBehavior":0}], + ["auto","scr-bhv_auto",{"scrollBehavior":"auto"}], + ["{spacing.4}","scr-bhv_{spacing.4}",{"scrollBehavior":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-bhv_token(colors.red.300,_blue)",{"scrollBehavior":"var(--colors-red-300, blue)"}], + ["a b","scr-bhv_a__b",{"scrollBehavior":"a b"}], + [true,"scr-bhv_true",{"scrollBehavior":true}] + ], + "scrollbar": [ + ["visible","scr-bar_visible",{"msOverflowStyle":"auto","scrollbarWidth":"auto","&::-webkit-scrollbar":{"display":"block"}}], + ["hidden","scr-bar_hidden",{"msOverflowStyle":"none","scrollbarWidth":"none","&::-webkit-scrollbar":{"display":"none"}}], + ["red","scr-bar_red",{}], + ["red.300/40","scr-bar_red.300/40",{}], + ["10px","scr-bar_10px",{}], + [12,"scr-bar_12",{}], + [0,"scr-bar_0",{}], + ["auto","scr-bar_auto",{}], + ["{spacing.4}","scr-bar_{spacing.4}",{}], + ["token(colors.red.300, blue)","scr-bar_token(colors.red.300,_blue)",{}], + ["a b","scr-bar_a__b",{}], + [true,"scr-bar_true",{}] + ], + "scrollbarColor": [ + ["current","scr-bar-c_current",{"scrollbarColor":"var(--colors-current)"}], + ["black","scr-bar-c_black",{"scrollbarColor":"var(--colors-black)"}], + ["white","scr-bar-c_white",{"scrollbarColor":"var(--colors-white)"}], + ["colorPalette.heading","scr-bar-c_colorPalette.heading",{"scrollbarColor":"var(--colors-color-palette-heading)"}], + ["red","scr-bar-c_red",{"scrollbarColor":"red"}], + ["red.300/40","scr-bar-c_red.300/40",{"--mix-scrollbarColor":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","scrollbarColor":"var(--mix-scrollbarColor, var(--colors-red-300))"}], + ["10px","scr-bar-c_10px",{"scrollbarColor":"10px"}], + [12,"scr-bar-c_12",{"scrollbarColor":12}], + [0,"scr-bar-c_0",{"scrollbarColor":0}], + ["auto","scr-bar-c_auto",{"scrollbarColor":"auto"}], + ["{spacing.4}","scr-bar-c_{spacing.4}",{"scrollbarColor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-bar-c_token(colors.red.300,_blue)",{"scrollbarColor":"var(--colors-red-300, blue)"}], + ["a b","scr-bar-c_a__b",{"scrollbarColor":"a b"}], + [true,"scr-bar-c_true",{"scrollbarColor":true}] + ], + "scrollbarGutter": [ + ["red","scr-bar-g_red",{"scrollbarGutter":"red"}], + ["red.300/40","scr-bar-g_red.300/40",{"scrollbarGutter":"red.300/40"}], + ["10px","scr-bar-g_10px",{"scrollbarGutter":"10px"}], + [12,"scr-bar-g_12",{"scrollbarGutter":12}], + [0,"scr-bar-g_0",{"scrollbarGutter":0}], + ["auto","scr-bar-g_auto",{"scrollbarGutter":"auto"}], + ["{spacing.4}","scr-bar-g_{spacing.4}",{"scrollbarGutter":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-bar-g_token(colors.red.300,_blue)",{"scrollbarGutter":"var(--colors-red-300, blue)"}], + ["a b","scr-bar-g_a__b",{"scrollbarGutter":"a b"}], + [true,"scr-bar-g_true",{"scrollbarGutter":true}] + ], + "scrollbarWidth": [ + ["0","scr-bar-w_0",{"scrollbarWidth":"var(--sizes-0)"}], + ["1","scr-bar-w_1",{"scrollbarWidth":"var(--sizes-1)"}], + ["2","scr-bar-w_2",{"scrollbarWidth":"var(--sizes-2)"}], + ["breakpoint-2xl","scr-bar-w_breakpoint-2xl",{"scrollbarWidth":"var(--sizes-breakpoint-2xl)"}], + ["red","scr-bar-w_red",{"scrollbarWidth":"red"}], + ["red.300/40","scr-bar-w_red.300/40",{"scrollbarWidth":"red.300/40"}], + ["10px","scr-bar-w_10px",{"scrollbarWidth":"10px"}], + [12,"scr-bar-w_12",{"scrollbarWidth":"var(--sizes-12)"}], + [0,"scr-bar-w_0",{"scrollbarWidth":"var(--sizes-0)"}], + ["auto","scr-bar-w_auto",{"scrollbarWidth":"auto"}], + ["{spacing.4}","scr-bar-w_{spacing.4}",{"scrollbarWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-bar-w_token(colors.red.300,_blue)",{"scrollbarWidth":"var(--colors-red-300, blue)"}], + ["a b","scr-bar-w_a__b",{"scrollbarWidth":"a b"}], + [true,"scr-bar-w_true",{"scrollbarWidth":true}] + ], + "scrollMargin": [ + ["0","scr-m_0",{"scrollMargin":"var(--spacing-0)"}], + ["1","scr-m_1",{"scrollMargin":"var(--spacing-1)"}], + ["2","scr-m_2",{"scrollMargin":"var(--spacing-2)"}], + ["-gutter","scr-m_-gutter",{"scrollMargin":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-m_red",{"scrollMargin":"red"}], + ["red.300/40","scr-m_red.300/40",{"scrollMargin":"red.300/40"}], + ["10px","scr-m_10px",{"scrollMargin":"10px"}], + [12,"scr-m_12",{"scrollMargin":"var(--spacing-12)"}], + [0,"scr-m_0",{"scrollMargin":"var(--spacing-0)"}], + ["auto","scr-m_auto",{"scrollMargin":"auto"}], + ["{spacing.4}","scr-m_{spacing.4}",{"scrollMargin":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-m_token(colors.red.300,_blue)",{"scrollMargin":"var(--colors-red-300, blue)"}], + ["a b","scr-m_a__b",{"scrollMargin":"a b"}], + [true,"scr-m_true",{"scrollMargin":true}] + ], + "scrollMarginLeft": [ + ["0","scr-ml_0",{"scrollMarginLeft":"var(--spacing-0)"}], + ["1","scr-ml_1",{"scrollMarginLeft":"var(--spacing-1)"}], + ["2","scr-ml_2",{"scrollMarginLeft":"var(--spacing-2)"}], + ["-gutter","scr-ml_-gutter",{"scrollMarginLeft":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-ml_red",{"scrollMarginLeft":"red"}], + ["red.300/40","scr-ml_red.300/40",{"scrollMarginLeft":"red.300/40"}], + ["10px","scr-ml_10px",{"scrollMarginLeft":"10px"}], + [12,"scr-ml_12",{"scrollMarginLeft":"var(--spacing-12)"}], + [0,"scr-ml_0",{"scrollMarginLeft":"var(--spacing-0)"}], + ["auto","scr-ml_auto",{"scrollMarginLeft":"auto"}], + ["{spacing.4}","scr-ml_{spacing.4}",{"scrollMarginLeft":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-ml_token(colors.red.300,_blue)",{"scrollMarginLeft":"var(--colors-red-300, blue)"}], + ["a b","scr-ml_a__b",{"scrollMarginLeft":"a b"}], + [true,"scr-ml_true",{"scrollMarginLeft":true}] + ], + "scrollMarginRight": [ + ["0","scr-mr_0",{"scrollMarginRight":"var(--spacing-0)"}], + ["1","scr-mr_1",{"scrollMarginRight":"var(--spacing-1)"}], + ["2","scr-mr_2",{"scrollMarginRight":"var(--spacing-2)"}], + ["-gutter","scr-mr_-gutter",{"scrollMarginRight":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-mr_red",{"scrollMarginRight":"red"}], + ["red.300/40","scr-mr_red.300/40",{"scrollMarginRight":"red.300/40"}], + ["10px","scr-mr_10px",{"scrollMarginRight":"10px"}], + [12,"scr-mr_12",{"scrollMarginRight":"var(--spacing-12)"}], + [0,"scr-mr_0",{"scrollMarginRight":"var(--spacing-0)"}], + ["auto","scr-mr_auto",{"scrollMarginRight":"auto"}], + ["{spacing.4}","scr-mr_{spacing.4}",{"scrollMarginRight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-mr_token(colors.red.300,_blue)",{"scrollMarginRight":"var(--colors-red-300, blue)"}], + ["a b","scr-mr_a__b",{"scrollMarginRight":"a b"}], + [true,"scr-mr_true",{"scrollMarginRight":true}] + ], + "scrollMarginTop": [ + ["0","scr-mt_0",{"scrollMarginTop":"var(--spacing-0)"}], + ["1","scr-mt_1",{"scrollMarginTop":"var(--spacing-1)"}], + ["2","scr-mt_2",{"scrollMarginTop":"var(--spacing-2)"}], + ["-gutter","scr-mt_-gutter",{"scrollMarginTop":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-mt_red",{"scrollMarginTop":"red"}], + ["red.300/40","scr-mt_red.300/40",{"scrollMarginTop":"red.300/40"}], + ["10px","scr-mt_10px",{"scrollMarginTop":"10px"}], + [12,"scr-mt_12",{"scrollMarginTop":"var(--spacing-12)"}], + [0,"scr-mt_0",{"scrollMarginTop":"var(--spacing-0)"}], + ["auto","scr-mt_auto",{"scrollMarginTop":"auto"}], + ["{spacing.4}","scr-mt_{spacing.4}",{"scrollMarginTop":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-mt_token(colors.red.300,_blue)",{"scrollMarginTop":"var(--colors-red-300, blue)"}], + ["a b","scr-mt_a__b",{"scrollMarginTop":"a b"}], + [true,"scr-mt_true",{"scrollMarginTop":true}] + ], + "scrollMarginBottom": [ + ["0","scr-mb_0",{"scrollMarginBottom":"var(--spacing-0)"}], + ["1","scr-mb_1",{"scrollMarginBottom":"var(--spacing-1)"}], + ["2","scr-mb_2",{"scrollMarginBottom":"var(--spacing-2)"}], + ["-gutter","scr-mb_-gutter",{"scrollMarginBottom":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-mb_red",{"scrollMarginBottom":"red"}], + ["red.300/40","scr-mb_red.300/40",{"scrollMarginBottom":"red.300/40"}], + ["10px","scr-mb_10px",{"scrollMarginBottom":"10px"}], + [12,"scr-mb_12",{"scrollMarginBottom":"var(--spacing-12)"}], + [0,"scr-mb_0",{"scrollMarginBottom":"var(--spacing-0)"}], + ["auto","scr-mb_auto",{"scrollMarginBottom":"auto"}], + ["{spacing.4}","scr-mb_{spacing.4}",{"scrollMarginBottom":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-mb_token(colors.red.300,_blue)",{"scrollMarginBottom":"var(--colors-red-300, blue)"}], + ["a b","scr-mb_a__b",{"scrollMarginBottom":"a b"}], + [true,"scr-mb_true",{"scrollMarginBottom":true}] + ], + "scrollMarginBlock": [ + ["0","scr-my_0",{"scrollMarginBlock":"var(--spacing-0)"}], + ["1","scr-my_1",{"scrollMarginBlock":"var(--spacing-1)"}], + ["2","scr-my_2",{"scrollMarginBlock":"var(--spacing-2)"}], + ["-gutter","scr-my_-gutter",{"scrollMarginBlock":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-my_red",{"scrollMarginBlock":"red"}], + ["red.300/40","scr-my_red.300/40",{"scrollMarginBlock":"red.300/40"}], + ["10px","scr-my_10px",{"scrollMarginBlock":"10px"}], + [12,"scr-my_12",{"scrollMarginBlock":"var(--spacing-12)"}], + [0,"scr-my_0",{"scrollMarginBlock":"var(--spacing-0)"}], + ["auto","scr-my_auto",{"scrollMarginBlock":"auto"}], + ["{spacing.4}","scr-my_{spacing.4}",{"scrollMarginBlock":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-my_token(colors.red.300,_blue)",{"scrollMarginBlock":"var(--colors-red-300, blue)"}], + ["a b","scr-my_a__b",{"scrollMarginBlock":"a b"}], + [true,"scr-my_true",{"scrollMarginBlock":true}] + ], + "scrollMarginBlockEnd": [ + ["0","scr-mbe_0",{"scrollMarginBlockEnd":"var(--spacing-0)"}], + ["1","scr-mbe_1",{"scrollMarginBlockEnd":"var(--spacing-1)"}], + ["2","scr-mbe_2",{"scrollMarginBlockEnd":"var(--spacing-2)"}], + ["-gutter","scr-mbe_-gutter",{"scrollMarginBlockEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-mbe_red",{"scrollMarginBlockEnd":"red"}], + ["red.300/40","scr-mbe_red.300/40",{"scrollMarginBlockEnd":"red.300/40"}], + ["10px","scr-mbe_10px",{"scrollMarginBlockEnd":"10px"}], + [12,"scr-mbe_12",{"scrollMarginBlockEnd":"var(--spacing-12)"}], + [0,"scr-mbe_0",{"scrollMarginBlockEnd":"var(--spacing-0)"}], + ["auto","scr-mbe_auto",{"scrollMarginBlockEnd":"auto"}], + ["{spacing.4}","scr-mbe_{spacing.4}",{"scrollMarginBlockEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-mbe_token(colors.red.300,_blue)",{"scrollMarginBlockEnd":"var(--colors-red-300, blue)"}], + ["a b","scr-mbe_a__b",{"scrollMarginBlockEnd":"a b"}], + [true,"scr-mbe_true",{"scrollMarginBlockEnd":true}] + ], + "scrollMarginBlockStart": [ + ["0","scr-mbt_0",{"scrollMarginBlockStart":"var(--spacing-0)"}], + ["1","scr-mbt_1",{"scrollMarginBlockStart":"var(--spacing-1)"}], + ["2","scr-mbt_2",{"scrollMarginBlockStart":"var(--spacing-2)"}], + ["-gutter","scr-mbt_-gutter",{"scrollMarginBlockStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-mbt_red",{"scrollMarginBlockStart":"red"}], + ["red.300/40","scr-mbt_red.300/40",{"scrollMarginBlockStart":"red.300/40"}], + ["10px","scr-mbt_10px",{"scrollMarginBlockStart":"10px"}], + [12,"scr-mbt_12",{"scrollMarginBlockStart":"var(--spacing-12)"}], + [0,"scr-mbt_0",{"scrollMarginBlockStart":"var(--spacing-0)"}], + ["auto","scr-mbt_auto",{"scrollMarginBlockStart":"auto"}], + ["{spacing.4}","scr-mbt_{spacing.4}",{"scrollMarginBlockStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-mbt_token(colors.red.300,_blue)",{"scrollMarginBlockStart":"var(--colors-red-300, blue)"}], + ["a b","scr-mbt_a__b",{"scrollMarginBlockStart":"a b"}], + [true,"scr-mbt_true",{"scrollMarginBlockStart":true}] + ], + "scrollMarginInline": [ + ["0","scr-mx_0",{"scrollMarginInline":"var(--spacing-0)"}], + ["1","scr-mx_1",{"scrollMarginInline":"var(--spacing-1)"}], + ["2","scr-mx_2",{"scrollMarginInline":"var(--spacing-2)"}], + ["-gutter","scr-mx_-gutter",{"scrollMarginInline":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-mx_red",{"scrollMarginInline":"red"}], + ["red.300/40","scr-mx_red.300/40",{"scrollMarginInline":"red.300/40"}], + ["10px","scr-mx_10px",{"scrollMarginInline":"10px"}], + [12,"scr-mx_12",{"scrollMarginInline":"var(--spacing-12)"}], + [0,"scr-mx_0",{"scrollMarginInline":"var(--spacing-0)"}], + ["auto","scr-mx_auto",{"scrollMarginInline":"auto"}], + ["{spacing.4}","scr-mx_{spacing.4}",{"scrollMarginInline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-mx_token(colors.red.300,_blue)",{"scrollMarginInline":"var(--colors-red-300, blue)"}], + ["a b","scr-mx_a__b",{"scrollMarginInline":"a b"}], + [true,"scr-mx_true",{"scrollMarginInline":true}] + ], + "scrollMarginInlineEnd": [ + ["0","scr-me_0",{"scrollMarginInlineEnd":"var(--spacing-0)"}], + ["1","scr-me_1",{"scrollMarginInlineEnd":"var(--spacing-1)"}], + ["2","scr-me_2",{"scrollMarginInlineEnd":"var(--spacing-2)"}], + ["-gutter","scr-me_-gutter",{"scrollMarginInlineEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-me_red",{"scrollMarginInlineEnd":"red"}], + ["red.300/40","scr-me_red.300/40",{"scrollMarginInlineEnd":"red.300/40"}], + ["10px","scr-me_10px",{"scrollMarginInlineEnd":"10px"}], + [12,"scr-me_12",{"scrollMarginInlineEnd":"var(--spacing-12)"}], + [0,"scr-me_0",{"scrollMarginInlineEnd":"var(--spacing-0)"}], + ["auto","scr-me_auto",{"scrollMarginInlineEnd":"auto"}], + ["{spacing.4}","scr-me_{spacing.4}",{"scrollMarginInlineEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-me_token(colors.red.300,_blue)",{"scrollMarginInlineEnd":"var(--colors-red-300, blue)"}], + ["a b","scr-me_a__b",{"scrollMarginInlineEnd":"a b"}], + [true,"scr-me_true",{"scrollMarginInlineEnd":true}] + ], + "scrollMarginInlineStart": [ + ["0","scr-ms_0",{"scrollMarginInlineStart":"var(--spacing-0)"}], + ["1","scr-ms_1",{"scrollMarginInlineStart":"var(--spacing-1)"}], + ["2","scr-ms_2",{"scrollMarginInlineStart":"var(--spacing-2)"}], + ["-gutter","scr-ms_-gutter",{"scrollMarginInlineStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-ms_red",{"scrollMarginInlineStart":"red"}], + ["red.300/40","scr-ms_red.300/40",{"scrollMarginInlineStart":"red.300/40"}], + ["10px","scr-ms_10px",{"scrollMarginInlineStart":"10px"}], + [12,"scr-ms_12",{"scrollMarginInlineStart":"var(--spacing-12)"}], + [0,"scr-ms_0",{"scrollMarginInlineStart":"var(--spacing-0)"}], + ["auto","scr-ms_auto",{"scrollMarginInlineStart":"auto"}], + ["{spacing.4}","scr-ms_{spacing.4}",{"scrollMarginInlineStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-ms_token(colors.red.300,_blue)",{"scrollMarginInlineStart":"var(--colors-red-300, blue)"}], + ["a b","scr-ms_a__b",{"scrollMarginInlineStart":"a b"}], + [true,"scr-ms_true",{"scrollMarginInlineStart":true}] + ], + "scrollPadding": [ + ["0","scr-p_0",{"scrollPadding":"var(--spacing-0)"}], + ["1","scr-p_1",{"scrollPadding":"var(--spacing-1)"}], + ["2","scr-p_2",{"scrollPadding":"var(--spacing-2)"}], + ["-gutter","scr-p_-gutter",{"scrollPadding":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-p_red",{"scrollPadding":"red"}], + ["red.300/40","scr-p_red.300/40",{"scrollPadding":"red.300/40"}], + ["10px","scr-p_10px",{"scrollPadding":"10px"}], + [12,"scr-p_12",{"scrollPadding":"var(--spacing-12)"}], + [0,"scr-p_0",{"scrollPadding":"var(--spacing-0)"}], + ["auto","scr-p_auto",{"scrollPadding":"auto"}], + ["{spacing.4}","scr-p_{spacing.4}",{"scrollPadding":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-p_token(colors.red.300,_blue)",{"scrollPadding":"var(--colors-red-300, blue)"}], + ["a b","scr-p_a__b",{"scrollPadding":"a b"}], + [true,"scr-p_true",{"scrollPadding":true}] + ], + "scrollPaddingBlock": [ + ["0","scr-py_0",{"scrollPaddingBlock":"var(--spacing-0)"}], + ["1","scr-py_1",{"scrollPaddingBlock":"var(--spacing-1)"}], + ["2","scr-py_2",{"scrollPaddingBlock":"var(--spacing-2)"}], + ["-gutter","scr-py_-gutter",{"scrollPaddingBlock":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-py_red",{"scrollPaddingBlock":"red"}], + ["red.300/40","scr-py_red.300/40",{"scrollPaddingBlock":"red.300/40"}], + ["10px","scr-py_10px",{"scrollPaddingBlock":"10px"}], + [12,"scr-py_12",{"scrollPaddingBlock":"var(--spacing-12)"}], + [0,"scr-py_0",{"scrollPaddingBlock":"var(--spacing-0)"}], + ["auto","scr-py_auto",{"scrollPaddingBlock":"auto"}], + ["{spacing.4}","scr-py_{spacing.4}",{"scrollPaddingBlock":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-py_token(colors.red.300,_blue)",{"scrollPaddingBlock":"var(--colors-red-300, blue)"}], + ["a b","scr-py_a__b",{"scrollPaddingBlock":"a b"}], + [true,"scr-py_true",{"scrollPaddingBlock":true}] + ], + "scrollPaddingBlockStart": [ + ["0","scr-pbs_0",{"scrollPaddingBlockStart":"var(--spacing-0)"}], + ["1","scr-pbs_1",{"scrollPaddingBlockStart":"var(--spacing-1)"}], + ["2","scr-pbs_2",{"scrollPaddingBlockStart":"var(--spacing-2)"}], + ["-gutter","scr-pbs_-gutter",{"scrollPaddingBlockStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-pbs_red",{"scrollPaddingBlockStart":"red"}], + ["red.300/40","scr-pbs_red.300/40",{"scrollPaddingBlockStart":"red.300/40"}], + ["10px","scr-pbs_10px",{"scrollPaddingBlockStart":"10px"}], + [12,"scr-pbs_12",{"scrollPaddingBlockStart":"var(--spacing-12)"}], + [0,"scr-pbs_0",{"scrollPaddingBlockStart":"var(--spacing-0)"}], + ["auto","scr-pbs_auto",{"scrollPaddingBlockStart":"auto"}], + ["{spacing.4}","scr-pbs_{spacing.4}",{"scrollPaddingBlockStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-pbs_token(colors.red.300,_blue)",{"scrollPaddingBlockStart":"var(--colors-red-300, blue)"}], + ["a b","scr-pbs_a__b",{"scrollPaddingBlockStart":"a b"}], + [true,"scr-pbs_true",{"scrollPaddingBlockStart":true}] + ], + "scrollPaddingBlockEnd": [ + ["0","scr-pbe_0",{"scrollPaddingBlockEnd":"var(--spacing-0)"}], + ["1","scr-pbe_1",{"scrollPaddingBlockEnd":"var(--spacing-1)"}], + ["2","scr-pbe_2",{"scrollPaddingBlockEnd":"var(--spacing-2)"}], + ["-gutter","scr-pbe_-gutter",{"scrollPaddingBlockEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-pbe_red",{"scrollPaddingBlockEnd":"red"}], + ["red.300/40","scr-pbe_red.300/40",{"scrollPaddingBlockEnd":"red.300/40"}], + ["10px","scr-pbe_10px",{"scrollPaddingBlockEnd":"10px"}], + [12,"scr-pbe_12",{"scrollPaddingBlockEnd":"var(--spacing-12)"}], + [0,"scr-pbe_0",{"scrollPaddingBlockEnd":"var(--spacing-0)"}], + ["auto","scr-pbe_auto",{"scrollPaddingBlockEnd":"auto"}], + ["{spacing.4}","scr-pbe_{spacing.4}",{"scrollPaddingBlockEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-pbe_token(colors.red.300,_blue)",{"scrollPaddingBlockEnd":"var(--colors-red-300, blue)"}], + ["a b","scr-pbe_a__b",{"scrollPaddingBlockEnd":"a b"}], + [true,"scr-pbe_true",{"scrollPaddingBlockEnd":true}] + ], + "scrollPaddingInline": [ + ["0","scr-px_0",{"scrollPaddingInline":"var(--spacing-0)"}], + ["1","scr-px_1",{"scrollPaddingInline":"var(--spacing-1)"}], + ["2","scr-px_2",{"scrollPaddingInline":"var(--spacing-2)"}], + ["-gutter","scr-px_-gutter",{"scrollPaddingInline":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-px_red",{"scrollPaddingInline":"red"}], + ["red.300/40","scr-px_red.300/40",{"scrollPaddingInline":"red.300/40"}], + ["10px","scr-px_10px",{"scrollPaddingInline":"10px"}], + [12,"scr-px_12",{"scrollPaddingInline":"var(--spacing-12)"}], + [0,"scr-px_0",{"scrollPaddingInline":"var(--spacing-0)"}], + ["auto","scr-px_auto",{"scrollPaddingInline":"auto"}], + ["{spacing.4}","scr-px_{spacing.4}",{"scrollPaddingInline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-px_token(colors.red.300,_blue)",{"scrollPaddingInline":"var(--colors-red-300, blue)"}], + ["a b","scr-px_a__b",{"scrollPaddingInline":"a b"}], + [true,"scr-px_true",{"scrollPaddingInline":true}] + ], + "scrollPaddingInlineEnd": [ + ["0","scr-pe_0",{"scrollPaddingInlineEnd":"var(--spacing-0)"}], + ["1","scr-pe_1",{"scrollPaddingInlineEnd":"var(--spacing-1)"}], + ["2","scr-pe_2",{"scrollPaddingInlineEnd":"var(--spacing-2)"}], + ["-gutter","scr-pe_-gutter",{"scrollPaddingInlineEnd":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-pe_red",{"scrollPaddingInlineEnd":"red"}], + ["red.300/40","scr-pe_red.300/40",{"scrollPaddingInlineEnd":"red.300/40"}], + ["10px","scr-pe_10px",{"scrollPaddingInlineEnd":"10px"}], + [12,"scr-pe_12",{"scrollPaddingInlineEnd":"var(--spacing-12)"}], + [0,"scr-pe_0",{"scrollPaddingInlineEnd":"var(--spacing-0)"}], + ["auto","scr-pe_auto",{"scrollPaddingInlineEnd":"auto"}], + ["{spacing.4}","scr-pe_{spacing.4}",{"scrollPaddingInlineEnd":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-pe_token(colors.red.300,_blue)",{"scrollPaddingInlineEnd":"var(--colors-red-300, blue)"}], + ["a b","scr-pe_a__b",{"scrollPaddingInlineEnd":"a b"}], + [true,"scr-pe_true",{"scrollPaddingInlineEnd":true}] + ], + "scrollPaddingInlineStart": [ + ["0","scr-ps_0",{"scrollPaddingInlineStart":"var(--spacing-0)"}], + ["1","scr-ps_1",{"scrollPaddingInlineStart":"var(--spacing-1)"}], + ["2","scr-ps_2",{"scrollPaddingInlineStart":"var(--spacing-2)"}], + ["-gutter","scr-ps_-gutter",{"scrollPaddingInlineStart":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-ps_red",{"scrollPaddingInlineStart":"red"}], + ["red.300/40","scr-ps_red.300/40",{"scrollPaddingInlineStart":"red.300/40"}], + ["10px","scr-ps_10px",{"scrollPaddingInlineStart":"10px"}], + [12,"scr-ps_12",{"scrollPaddingInlineStart":"var(--spacing-12)"}], + [0,"scr-ps_0",{"scrollPaddingInlineStart":"var(--spacing-0)"}], + ["auto","scr-ps_auto",{"scrollPaddingInlineStart":"auto"}], + ["{spacing.4}","scr-ps_{spacing.4}",{"scrollPaddingInlineStart":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-ps_token(colors.red.300,_blue)",{"scrollPaddingInlineStart":"var(--colors-red-300, blue)"}], + ["a b","scr-ps_a__b",{"scrollPaddingInlineStart":"a b"}], + [true,"scr-ps_true",{"scrollPaddingInlineStart":true}] + ], + "scrollPaddingLeft": [ + ["0","scr-pl_0",{"scrollPaddingLeft":"var(--spacing-0)"}], + ["1","scr-pl_1",{"scrollPaddingLeft":"var(--spacing-1)"}], + ["2","scr-pl_2",{"scrollPaddingLeft":"var(--spacing-2)"}], + ["-gutter","scr-pl_-gutter",{"scrollPaddingLeft":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-pl_red",{"scrollPaddingLeft":"red"}], + ["red.300/40","scr-pl_red.300/40",{"scrollPaddingLeft":"red.300/40"}], + ["10px","scr-pl_10px",{"scrollPaddingLeft":"10px"}], + [12,"scr-pl_12",{"scrollPaddingLeft":"var(--spacing-12)"}], + [0,"scr-pl_0",{"scrollPaddingLeft":"var(--spacing-0)"}], + ["auto","scr-pl_auto",{"scrollPaddingLeft":"auto"}], + ["{spacing.4}","scr-pl_{spacing.4}",{"scrollPaddingLeft":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-pl_token(colors.red.300,_blue)",{"scrollPaddingLeft":"var(--colors-red-300, blue)"}], + ["a b","scr-pl_a__b",{"scrollPaddingLeft":"a b"}], + [true,"scr-pl_true",{"scrollPaddingLeft":true}] + ], + "scrollPaddingRight": [ + ["0","scr-pr_0",{"scrollPaddingRight":"var(--spacing-0)"}], + ["1","scr-pr_1",{"scrollPaddingRight":"var(--spacing-1)"}], + ["2","scr-pr_2",{"scrollPaddingRight":"var(--spacing-2)"}], + ["-gutter","scr-pr_-gutter",{"scrollPaddingRight":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-pr_red",{"scrollPaddingRight":"red"}], + ["red.300/40","scr-pr_red.300/40",{"scrollPaddingRight":"red.300/40"}], + ["10px","scr-pr_10px",{"scrollPaddingRight":"10px"}], + [12,"scr-pr_12",{"scrollPaddingRight":"var(--spacing-12)"}], + [0,"scr-pr_0",{"scrollPaddingRight":"var(--spacing-0)"}], + ["auto","scr-pr_auto",{"scrollPaddingRight":"auto"}], + ["{spacing.4}","scr-pr_{spacing.4}",{"scrollPaddingRight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-pr_token(colors.red.300,_blue)",{"scrollPaddingRight":"var(--colors-red-300, blue)"}], + ["a b","scr-pr_a__b",{"scrollPaddingRight":"a b"}], + [true,"scr-pr_true",{"scrollPaddingRight":true}] + ], + "scrollPaddingTop": [ + ["0","scr-pt_0",{"scrollPaddingTop":"var(--spacing-0)"}], + ["1","scr-pt_1",{"scrollPaddingTop":"var(--spacing-1)"}], + ["2","scr-pt_2",{"scrollPaddingTop":"var(--spacing-2)"}], + ["-gutter","scr-pt_-gutter",{"scrollPaddingTop":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-pt_red",{"scrollPaddingTop":"red"}], + ["red.300/40","scr-pt_red.300/40",{"scrollPaddingTop":"red.300/40"}], + ["10px","scr-pt_10px",{"scrollPaddingTop":"10px"}], + [12,"scr-pt_12",{"scrollPaddingTop":"var(--spacing-12)"}], + [0,"scr-pt_0",{"scrollPaddingTop":"var(--spacing-0)"}], + ["auto","scr-pt_auto",{"scrollPaddingTop":"auto"}], + ["{spacing.4}","scr-pt_{spacing.4}",{"scrollPaddingTop":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-pt_token(colors.red.300,_blue)",{"scrollPaddingTop":"var(--colors-red-300, blue)"}], + ["a b","scr-pt_a__b",{"scrollPaddingTop":"a b"}], + [true,"scr-pt_true",{"scrollPaddingTop":true}] + ], + "scrollPaddingBottom": [ + ["0","scr-pb_0",{"scrollPaddingBottom":"var(--spacing-0)"}], + ["1","scr-pb_1",{"scrollPaddingBottom":"var(--spacing-1)"}], + ["2","scr-pb_2",{"scrollPaddingBottom":"var(--spacing-2)"}], + ["-gutter","scr-pb_-gutter",{"scrollPaddingBottom":"calc(var(--spacing-gutter) * -1)"}], + ["red","scr-pb_red",{"scrollPaddingBottom":"red"}], + ["red.300/40","scr-pb_red.300/40",{"scrollPaddingBottom":"red.300/40"}], + ["10px","scr-pb_10px",{"scrollPaddingBottom":"10px"}], + [12,"scr-pb_12",{"scrollPaddingBottom":"var(--spacing-12)"}], + [0,"scr-pb_0",{"scrollPaddingBottom":"var(--spacing-0)"}], + ["auto","scr-pb_auto",{"scrollPaddingBottom":"auto"}], + ["{spacing.4}","scr-pb_{spacing.4}",{"scrollPaddingBottom":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-pb_token(colors.red.300,_blue)",{"scrollPaddingBottom":"var(--colors-red-300, blue)"}], + ["a b","scr-pb_a__b",{"scrollPaddingBottom":"a b"}], + [true,"scr-pb_true",{"scrollPaddingBottom":true}] + ], + "scrollSnapAlign": [ + ["red","scr-sa_red",{"scrollSnapAlign":"red"}], + ["red.300/40","scr-sa_red.300/40",{"scrollSnapAlign":"red.300/40"}], + ["10px","scr-sa_10px",{"scrollSnapAlign":"10px"}], + [12,"scr-sa_12",{"scrollSnapAlign":12}], + [0,"scr-sa_0",{"scrollSnapAlign":0}], + ["auto","scr-sa_auto",{"scrollSnapAlign":"auto"}], + ["{spacing.4}","scr-sa_{spacing.4}",{"scrollSnapAlign":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scr-sa_token(colors.red.300,_blue)",{"scrollSnapAlign":"var(--colors-red-300, blue)"}], + ["a b","scr-sa_a__b",{"scrollSnapAlign":"a b"}], + [true,"scr-sa_true",{"scrollSnapAlign":true}] + ], + "scrollSnapStop": [ + ["red","scrs-s_red",{"scrollSnapStop":"red"}], + ["red.300/40","scrs-s_red.300/40",{"scrollSnapStop":"red.300/40"}], + ["10px","scrs-s_10px",{"scrollSnapStop":"10px"}], + [12,"scrs-s_12",{"scrollSnapStop":12}], + [0,"scrs-s_0",{"scrollSnapStop":0}], + ["auto","scrs-s_auto",{"scrollSnapStop":"auto"}], + ["{spacing.4}","scrs-s_{spacing.4}",{"scrollSnapStop":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-s_token(colors.red.300,_blue)",{"scrollSnapStop":"var(--colors-red-300, blue)"}], + ["a b","scrs-s_a__b",{"scrollSnapStop":"a b"}], + [true,"scrs-s_true",{"scrollSnapStop":true}] + ], + "scrollSnapType": [ + ["none","scrs-t_none",{"scrollSnapType":"none"}], + ["x","scrs-t_x",{"scrollSnapType":"x var(--scroll-snap-strictness)"}], + ["y","scrs-t_y",{"scrollSnapType":"y var(--scroll-snap-strictness)"}], + ["both","scrs-t_both",{"scrollSnapType":"both var(--scroll-snap-strictness)"}], + ["red","scrs-t_red",{"scrollSnapType":"red"}], + ["red.300/40","scrs-t_red.300/40",{"scrollSnapType":"red.300/40"}], + ["10px","scrs-t_10px",{"scrollSnapType":"10px"}], + [12,"scrs-t_12",{"scrollSnapType":12}], + [0,"scrs-t_0",{"scrollSnapType":0}], + ["auto","scrs-t_auto",{"scrollSnapType":"auto"}], + ["{spacing.4}","scrs-t_{spacing.4}",{"scrollSnapType":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-t_token(colors.red.300,_blue)",{"scrollSnapType":"var(--colors-red-300, blue)"}], + ["a b","scrs-t_a__b",{"scrollSnapType":"a b"}], + [true,"scrs-t_true",{"scrollSnapType":true}] + ], + "scrollSnapStrictness": [ + ["mandatory","scrs-strt_mandatory",{"--scroll-snap-strictness":"mandatory"}], + ["proximity","scrs-strt_proximity",{"--scroll-snap-strictness":"proximity"}], + ["red","scrs-strt_red",{"--scroll-snap-strictness":"red"}], + ["red.300/40","scrs-strt_red.300/40",{"--scroll-snap-strictness":"red.300/40"}], + ["10px","scrs-strt_10px",{"--scroll-snap-strictness":"10px"}], + [12,"scrs-strt_12",{"--scroll-snap-strictness":12}], + [0,"scrs-strt_0",{"--scroll-snap-strictness":0}], + ["auto","scrs-strt_auto",{"--scroll-snap-strictness":"auto"}], + ["{spacing.4}","scrs-strt_{spacing.4}",{"--scroll-snap-strictness":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-strt_token(colors.red.300,_blue)",{"--scroll-snap-strictness":"var(--colors-red-300, blue)"}], + ["a b","scrs-strt_a__b",{"--scroll-snap-strictness":"a b"}], + [true,"scrs-strt_true",{"--scroll-snap-strictness":true}] + ], + "scrollSnapMargin": [ + ["0","scrs-m_0",{"scrollSnapMargin":"var(--spacing-0)"}], + ["1","scrs-m_1",{"scrollSnapMargin":"var(--spacing-1)"}], + ["2","scrs-m_2",{"scrollSnapMargin":"var(--spacing-2)"}], + ["-gutter","scrs-m_-gutter",{"scrollSnapMargin":"calc(var(--spacing-gutter) * -1)"}], + ["red","scrs-m_red",{"scrollSnapMargin":"red"}], + ["red.300/40","scrs-m_red.300/40",{"scrollSnapMargin":"red.300/40"}], + ["10px","scrs-m_10px",{"scrollSnapMargin":"10px"}], + [12,"scrs-m_12",{"scrollSnapMargin":"var(--spacing-12)"}], + [0,"scrs-m_0",{"scrollSnapMargin":"var(--spacing-0)"}], + ["auto","scrs-m_auto",{"scrollSnapMargin":"auto"}], + ["{spacing.4}","scrs-m_{spacing.4}",{"scrollSnapMargin":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-m_token(colors.red.300,_blue)",{"scrollSnapMargin":"var(--colors-red-300, blue)"}], + ["a b","scrs-m_a__b",{"scrollSnapMargin":"a b"}], + [true,"scrs-m_true",{"scrollSnapMargin":true}] + ], + "scrollSnapMarginTop": [ + ["0","scrs-mt_0",{"scrollSnapMarginTop":"var(--spacing-0)"}], + ["1","scrs-mt_1",{"scrollSnapMarginTop":"var(--spacing-1)"}], + ["2","scrs-mt_2",{"scrollSnapMarginTop":"var(--spacing-2)"}], + ["-gutter","scrs-mt_-gutter",{"scrollSnapMarginTop":"calc(var(--spacing-gutter) * -1)"}], + ["red","scrs-mt_red",{"scrollSnapMarginTop":"red"}], + ["red.300/40","scrs-mt_red.300/40",{"scrollSnapMarginTop":"red.300/40"}], + ["10px","scrs-mt_10px",{"scrollSnapMarginTop":"10px"}], + [12,"scrs-mt_12",{"scrollSnapMarginTop":"var(--spacing-12)"}], + [0,"scrs-mt_0",{"scrollSnapMarginTop":"var(--spacing-0)"}], + ["auto","scrs-mt_auto",{"scrollSnapMarginTop":"auto"}], + ["{spacing.4}","scrs-mt_{spacing.4}",{"scrollSnapMarginTop":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-mt_token(colors.red.300,_blue)",{"scrollSnapMarginTop":"var(--colors-red-300, blue)"}], + ["a b","scrs-mt_a__b",{"scrollSnapMarginTop":"a b"}], + [true,"scrs-mt_true",{"scrollSnapMarginTop":true}] + ], + "scrollSnapMarginBottom": [ + ["0","scrs-mb_0",{"scrollSnapMarginBottom":"var(--spacing-0)"}], + ["1","scrs-mb_1",{"scrollSnapMarginBottom":"var(--spacing-1)"}], + ["2","scrs-mb_2",{"scrollSnapMarginBottom":"var(--spacing-2)"}], + ["-gutter","scrs-mb_-gutter",{"scrollSnapMarginBottom":"calc(var(--spacing-gutter) * -1)"}], + ["red","scrs-mb_red",{"scrollSnapMarginBottom":"red"}], + ["red.300/40","scrs-mb_red.300/40",{"scrollSnapMarginBottom":"red.300/40"}], + ["10px","scrs-mb_10px",{"scrollSnapMarginBottom":"10px"}], + [12,"scrs-mb_12",{"scrollSnapMarginBottom":"var(--spacing-12)"}], + [0,"scrs-mb_0",{"scrollSnapMarginBottom":"var(--spacing-0)"}], + ["auto","scrs-mb_auto",{"scrollSnapMarginBottom":"auto"}], + ["{spacing.4}","scrs-mb_{spacing.4}",{"scrollSnapMarginBottom":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-mb_token(colors.red.300,_blue)",{"scrollSnapMarginBottom":"var(--colors-red-300, blue)"}], + ["a b","scrs-mb_a__b",{"scrollSnapMarginBottom":"a b"}], + [true,"scrs-mb_true",{"scrollSnapMarginBottom":true}] + ], + "scrollSnapMarginLeft": [ + ["0","scrs-ml_0",{"scrollSnapMarginLeft":"var(--spacing-0)"}], + ["1","scrs-ml_1",{"scrollSnapMarginLeft":"var(--spacing-1)"}], + ["2","scrs-ml_2",{"scrollSnapMarginLeft":"var(--spacing-2)"}], + ["-gutter","scrs-ml_-gutter",{"scrollSnapMarginLeft":"calc(var(--spacing-gutter) * -1)"}], + ["red","scrs-ml_red",{"scrollSnapMarginLeft":"red"}], + ["red.300/40","scrs-ml_red.300/40",{"scrollSnapMarginLeft":"red.300/40"}], + ["10px","scrs-ml_10px",{"scrollSnapMarginLeft":"10px"}], + [12,"scrs-ml_12",{"scrollSnapMarginLeft":"var(--spacing-12)"}], + [0,"scrs-ml_0",{"scrollSnapMarginLeft":"var(--spacing-0)"}], + ["auto","scrs-ml_auto",{"scrollSnapMarginLeft":"auto"}], + ["{spacing.4}","scrs-ml_{spacing.4}",{"scrollSnapMarginLeft":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-ml_token(colors.red.300,_blue)",{"scrollSnapMarginLeft":"var(--colors-red-300, blue)"}], + ["a b","scrs-ml_a__b",{"scrollSnapMarginLeft":"a b"}], + [true,"scrs-ml_true",{"scrollSnapMarginLeft":true}] + ], + "scrollSnapMarginRight": [ + ["0","scrs-mr_0",{"scrollSnapMarginRight":"var(--spacing-0)"}], + ["1","scrs-mr_1",{"scrollSnapMarginRight":"var(--spacing-1)"}], + ["2","scrs-mr_2",{"scrollSnapMarginRight":"var(--spacing-2)"}], + ["-gutter","scrs-mr_-gutter",{"scrollSnapMarginRight":"calc(var(--spacing-gutter) * -1)"}], + ["red","scrs-mr_red",{"scrollSnapMarginRight":"red"}], + ["red.300/40","scrs-mr_red.300/40",{"scrollSnapMarginRight":"red.300/40"}], + ["10px","scrs-mr_10px",{"scrollSnapMarginRight":"10px"}], + [12,"scrs-mr_12",{"scrollSnapMarginRight":"var(--spacing-12)"}], + [0,"scrs-mr_0",{"scrollSnapMarginRight":"var(--spacing-0)"}], + ["auto","scrs-mr_auto",{"scrollSnapMarginRight":"auto"}], + ["{spacing.4}","scrs-mr_{spacing.4}",{"scrollSnapMarginRight":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-mr_token(colors.red.300,_blue)",{"scrollSnapMarginRight":"var(--colors-red-300, blue)"}], + ["a b","scrs-mr_a__b",{"scrollSnapMarginRight":"a b"}], + [true,"scrs-mr_true",{"scrollSnapMarginRight":true}] + ], + "scrollSnapCoordinate": [ + ["red","scrs-c_red",{"scrollSnapCoordinate":"red"}], + ["red.300/40","scrs-c_red.300/40",{"scrollSnapCoordinate":"red.300/40"}], + ["10px","scrs-c_10px",{"scrollSnapCoordinate":"10px"}], + [12,"scrs-c_12",{"scrollSnapCoordinate":12}], + [0,"scrs-c_0",{"scrollSnapCoordinate":0}], + ["auto","scrs-c_auto",{"scrollSnapCoordinate":"auto"}], + ["{spacing.4}","scrs-c_{spacing.4}",{"scrollSnapCoordinate":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-c_token(colors.red.300,_blue)",{"scrollSnapCoordinate":"var(--colors-red-300, blue)"}], + ["a b","scrs-c_a__b",{"scrollSnapCoordinate":"a b"}], + [true,"scrs-c_true",{"scrollSnapCoordinate":true}] + ], + "scrollSnapDestination": [ + ["red","scrs-d_red",{"scrollSnapDestination":"red"}], + ["red.300/40","scrs-d_red.300/40",{"scrollSnapDestination":"red.300/40"}], + ["10px","scrs-d_10px",{"scrollSnapDestination":"10px"}], + [12,"scrs-d_12",{"scrollSnapDestination":12}], + [0,"scrs-d_0",{"scrollSnapDestination":0}], + ["auto","scrs-d_auto",{"scrollSnapDestination":"auto"}], + ["{spacing.4}","scrs-d_{spacing.4}",{"scrollSnapDestination":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-d_token(colors.red.300,_blue)",{"scrollSnapDestination":"var(--colors-red-300, blue)"}], + ["a b","scrs-d_a__b",{"scrollSnapDestination":"a b"}], + [true,"scrs-d_true",{"scrollSnapDestination":true}] + ], + "scrollSnapPointsX": [ + ["red","scrs-px_red",{"scrollSnapPointsX":"red"}], + ["red.300/40","scrs-px_red.300/40",{"scrollSnapPointsX":"red.300/40"}], + ["10px","scrs-px_10px",{"scrollSnapPointsX":"10px"}], + [12,"scrs-px_12",{"scrollSnapPointsX":12}], + [0,"scrs-px_0",{"scrollSnapPointsX":0}], + ["auto","scrs-px_auto",{"scrollSnapPointsX":"auto"}], + ["{spacing.4}","scrs-px_{spacing.4}",{"scrollSnapPointsX":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-px_token(colors.red.300,_blue)",{"scrollSnapPointsX":"var(--colors-red-300, blue)"}], + ["a b","scrs-px_a__b",{"scrollSnapPointsX":"a b"}], + [true,"scrs-px_true",{"scrollSnapPointsX":true}] + ], + "scrollSnapPointsY": [ + ["red","scrs-py_red",{"scrollSnapPointsY":"red"}], + ["red.300/40","scrs-py_red.300/40",{"scrollSnapPointsY":"red.300/40"}], + ["10px","scrs-py_10px",{"scrollSnapPointsY":"10px"}], + [12,"scrs-py_12",{"scrollSnapPointsY":12}], + [0,"scrs-py_0",{"scrollSnapPointsY":0}], + ["auto","scrs-py_auto",{"scrollSnapPointsY":"auto"}], + ["{spacing.4}","scrs-py_{spacing.4}",{"scrollSnapPointsY":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-py_token(colors.red.300,_blue)",{"scrollSnapPointsY":"var(--colors-red-300, blue)"}], + ["a b","scrs-py_a__b",{"scrollSnapPointsY":"a b"}], + [true,"scrs-py_true",{"scrollSnapPointsY":true}] + ], + "scrollSnapTypeX": [ + ["red","scrs-tx_red",{"scrollSnapTypeX":"red"}], + ["red.300/40","scrs-tx_red.300/40",{"scrollSnapTypeX":"red.300/40"}], + ["10px","scrs-tx_10px",{"scrollSnapTypeX":"10px"}], + [12,"scrs-tx_12",{"scrollSnapTypeX":12}], + [0,"scrs-tx_0",{"scrollSnapTypeX":0}], + ["auto","scrs-tx_auto",{"scrollSnapTypeX":"auto"}], + ["{spacing.4}","scrs-tx_{spacing.4}",{"scrollSnapTypeX":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-tx_token(colors.red.300,_blue)",{"scrollSnapTypeX":"var(--colors-red-300, blue)"}], + ["a b","scrs-tx_a__b",{"scrollSnapTypeX":"a b"}], + [true,"scrs-tx_true",{"scrollSnapTypeX":true}] + ], + "scrollSnapTypeY": [ + ["red","scrs-ty_red",{"scrollSnapTypeY":"red"}], + ["red.300/40","scrs-ty_red.300/40",{"scrollSnapTypeY":"red.300/40"}], + ["10px","scrs-ty_10px",{"scrollSnapTypeY":"10px"}], + [12,"scrs-ty_12",{"scrollSnapTypeY":12}], + [0,"scrs-ty_0",{"scrollSnapTypeY":0}], + ["auto","scrs-ty_auto",{"scrollSnapTypeY":"auto"}], + ["{spacing.4}","scrs-ty_{spacing.4}",{"scrollSnapTypeY":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrs-ty_token(colors.red.300,_blue)",{"scrollSnapTypeY":"var(--colors-red-300, blue)"}], + ["a b","scrs-ty_a__b",{"scrollSnapTypeY":"a b"}], + [true,"scrs-ty_true",{"scrollSnapTypeY":true}] + ], + "scrollTimeline": [ + ["red","scrtl_red",{"scrollTimeline":"red"}], + ["red.300/40","scrtl_red.300/40",{"scrollTimeline":"red.300/40"}], + ["10px","scrtl_10px",{"scrollTimeline":"10px"}], + [12,"scrtl_12",{"scrollTimeline":12}], + [0,"scrtl_0",{"scrollTimeline":0}], + ["auto","scrtl_auto",{"scrollTimeline":"auto"}], + ["{spacing.4}","scrtl_{spacing.4}",{"scrollTimeline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrtl_token(colors.red.300,_blue)",{"scrollTimeline":"var(--colors-red-300, blue)"}], + ["a b","scrtl_a__b",{"scrollTimeline":"a b"}], + [true,"scrtl_true",{"scrollTimeline":true}] + ], + "scrollTimelineAxis": [ + ["red","scrtl-a_red",{"scrollTimelineAxis":"red"}], + ["red.300/40","scrtl-a_red.300/40",{"scrollTimelineAxis":"red.300/40"}], + ["10px","scrtl-a_10px",{"scrollTimelineAxis":"10px"}], + [12,"scrtl-a_12",{"scrollTimelineAxis":12}], + [0,"scrtl-a_0",{"scrollTimelineAxis":0}], + ["auto","scrtl-a_auto",{"scrollTimelineAxis":"auto"}], + ["{spacing.4}","scrtl-a_{spacing.4}",{"scrollTimelineAxis":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrtl-a_token(colors.red.300,_blue)",{"scrollTimelineAxis":"var(--colors-red-300, blue)"}], + ["a b","scrtl-a_a__b",{"scrollTimelineAxis":"a b"}], + [true,"scrtl-a_true",{"scrollTimelineAxis":true}] + ], + "scrollTimelineName": [ + ["red","scrtl-n_red",{"scrollTimelineName":"red"}], + ["red.300/40","scrtl-n_red.300/40",{"scrollTimelineName":"red.300/40"}], + ["10px","scrtl-n_10px",{"scrollTimelineName":"10px"}], + [12,"scrtl-n_12",{"scrollTimelineName":12}], + [0,"scrtl-n_0",{"scrollTimelineName":0}], + ["auto","scrtl-n_auto",{"scrollTimelineName":"auto"}], + ["{spacing.4}","scrtl-n_{spacing.4}",{"scrollTimelineName":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","scrtl-n_token(colors.red.300,_blue)",{"scrollTimelineName":"var(--colors-red-300, blue)"}], + ["a b","scrtl-n_a__b",{"scrollTimelineName":"a b"}], + [true,"scrtl-n_true",{"scrollTimelineName":true}] + ], + "touchAction": [ + ["red","tch-a_red",{"touchAction":"red"}], + ["red.300/40","tch-a_red.300/40",{"touchAction":"red.300/40"}], + ["10px","tch-a_10px",{"touchAction":"10px"}], + [12,"tch-a_12",{"touchAction":12}], + [0,"tch-a_0",{"touchAction":0}], + ["auto","tch-a_auto",{"touchAction":"auto"}], + ["{spacing.4}","tch-a_{spacing.4}",{"touchAction":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","tch-a_token(colors.red.300,_blue)",{"touchAction":"var(--colors-red-300, blue)"}], + ["a b","tch-a_a__b",{"touchAction":"a b"}], + [true,"tch-a_true",{"touchAction":true}] + ], + "userSelect": [ + ["red","us_red",{"WebkitUserSelect":"red","userSelect":"red"}], + ["red.300/40","us_red.300/40",{"WebkitUserSelect":"red.300/40","userSelect":"red.300/40"}], + ["10px","us_10px",{"WebkitUserSelect":"10px","userSelect":"10px"}], + [12,"us_12",{"WebkitUserSelect":12,"userSelect":12}], + [0,"us_0",{"WebkitUserSelect":0,"userSelect":0}], + ["auto","us_auto",{"WebkitUserSelect":"auto","userSelect":"auto"}], + ["{spacing.4}","us_{spacing.4}",{"WebkitUserSelect":"var(--spacing-4)","userSelect":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","us_token(colors.red.300,_blue)",{"WebkitUserSelect":"var(--colors-red-300, blue)","userSelect":"var(--colors-red-300, blue)"}], + ["a b","us_a__b",{"WebkitUserSelect":"a b","userSelect":"a b"}], + [true,"us_true",{"WebkitUserSelect":true,"userSelect":true}] + ], + "overflow": [ + ["red","ov_red",{"overflow":"red"}], + ["red.300/40","ov_red.300/40",{"overflow":"red.300/40"}], + ["10px","ov_10px",{"overflow":"10px"}], + [12,"ov_12",{"overflow":12}], + [0,"ov_0",{"overflow":0}], + ["auto","ov_auto",{"overflow":"auto"}], + ["{spacing.4}","ov_{spacing.4}",{"overflow":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ov_token(colors.red.300,_blue)",{"overflow":"var(--colors-red-300, blue)"}], + ["a b","ov_a__b",{"overflow":"a b"}], + [true,"ov_true",{"overflow":true}] + ], + "overflowWrap": [ + ["red","ov-wrap_red",{"overflowWrap":"red"}], + ["red.300/40","ov-wrap_red.300/40",{"overflowWrap":"red.300/40"}], + ["10px","ov-wrap_10px",{"overflowWrap":"10px"}], + [12,"ov-wrap_12",{"overflowWrap":12}], + [0,"ov-wrap_0",{"overflowWrap":0}], + ["auto","ov-wrap_auto",{"overflowWrap":"auto"}], + ["{spacing.4}","ov-wrap_{spacing.4}",{"overflowWrap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ov-wrap_token(colors.red.300,_blue)",{"overflowWrap":"var(--colors-red-300, blue)"}], + ["a b","ov-wrap_a__b",{"overflowWrap":"a b"}], + [true,"ov-wrap_true",{"overflowWrap":true}] + ], + "overflowX": [ + ["red","ov-x_red",{"overflowX":"red"}], + ["red.300/40","ov-x_red.300/40",{"overflowX":"red.300/40"}], + ["10px","ov-x_10px",{"overflowX":"10px"}], + [12,"ov-x_12",{"overflowX":12}], + [0,"ov-x_0",{"overflowX":0}], + ["auto","ov-x_auto",{"overflowX":"auto"}], + ["{spacing.4}","ov-x_{spacing.4}",{"overflowX":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ov-x_token(colors.red.300,_blue)",{"overflowX":"var(--colors-red-300, blue)"}], + ["a b","ov-x_a__b",{"overflowX":"a b"}], + [true,"ov-x_true",{"overflowX":true}] + ], + "overflowY": [ + ["red","ov-y_red",{"overflowY":"red"}], + ["red.300/40","ov-y_red.300/40",{"overflowY":"red.300/40"}], + ["10px","ov-y_10px",{"overflowY":"10px"}], + [12,"ov-y_12",{"overflowY":12}], + [0,"ov-y_0",{"overflowY":0}], + ["auto","ov-y_auto",{"overflowY":"auto"}], + ["{spacing.4}","ov-y_{spacing.4}",{"overflowY":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ov-y_token(colors.red.300,_blue)",{"overflowY":"var(--colors-red-300, blue)"}], + ["a b","ov-y_a__b",{"overflowY":"a b"}], + [true,"ov-y_true",{"overflowY":true}] + ], + "overflowAnchor": [ + ["red","ov-a_red",{"overflowAnchor":"red"}], + ["red.300/40","ov-a_red.300/40",{"overflowAnchor":"red.300/40"}], + ["10px","ov-a_10px",{"overflowAnchor":"10px"}], + [12,"ov-a_12",{"overflowAnchor":12}], + [0,"ov-a_0",{"overflowAnchor":0}], + ["auto","ov-a_auto",{"overflowAnchor":"auto"}], + ["{spacing.4}","ov-a_{spacing.4}",{"overflowAnchor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ov-a_token(colors.red.300,_blue)",{"overflowAnchor":"var(--colors-red-300, blue)"}], + ["a b","ov-a_a__b",{"overflowAnchor":"a b"}], + [true,"ov-a_true",{"overflowAnchor":true}] + ], + "overflowBlock": [ + ["red","ov-b_red",{"overflowBlock":"red"}], + ["red.300/40","ov-b_red.300/40",{"overflowBlock":"red.300/40"}], + ["10px","ov-b_10px",{"overflowBlock":"10px"}], + [12,"ov-b_12",{"overflowBlock":12}], + [0,"ov-b_0",{"overflowBlock":0}], + ["auto","ov-b_auto",{"overflowBlock":"auto"}], + ["{spacing.4}","ov-b_{spacing.4}",{"overflowBlock":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ov-b_token(colors.red.300,_blue)",{"overflowBlock":"var(--colors-red-300, blue)"}], + ["a b","ov-b_a__b",{"overflowBlock":"a b"}], + [true,"ov-b_true",{"overflowBlock":true}] + ], + "overflowInline": [ + ["red","ov-i_red",{"overflowInline":"red"}], + ["red.300/40","ov-i_red.300/40",{"overflowInline":"red.300/40"}], + ["10px","ov-i_10px",{"overflowInline":"10px"}], + [12,"ov-i_12",{"overflowInline":12}], + [0,"ov-i_0",{"overflowInline":0}], + ["auto","ov-i_auto",{"overflowInline":"auto"}], + ["{spacing.4}","ov-i_{spacing.4}",{"overflowInline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ov-i_token(colors.red.300,_blue)",{"overflowInline":"var(--colors-red-300, blue)"}], + ["a b","ov-i_a__b",{"overflowInline":"a b"}], + [true,"ov-i_true",{"overflowInline":true}] + ], + "overflowClipBox": [ + ["red","ovcp-bx_red",{"overflowClipBox":"red"}], + ["red.300/40","ovcp-bx_red.300/40",{"overflowClipBox":"red.300/40"}], + ["10px","ovcp-bx_10px",{"overflowClipBox":"10px"}], + [12,"ovcp-bx_12",{"overflowClipBox":12}], + [0,"ovcp-bx_0",{"overflowClipBox":0}], + ["auto","ovcp-bx_auto",{"overflowClipBox":"auto"}], + ["{spacing.4}","ovcp-bx_{spacing.4}",{"overflowClipBox":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ovcp-bx_token(colors.red.300,_blue)",{"overflowClipBox":"var(--colors-red-300, blue)"}], + ["a b","ovcp-bx_a__b",{"overflowClipBox":"a b"}], + [true,"ovcp-bx_true",{"overflowClipBox":true}] + ], + "overflowClipMargin": [ + ["red","ovcp-m_red",{"overflowClipMargin":"red"}], + ["red.300/40","ovcp-m_red.300/40",{"overflowClipMargin":"red.300/40"}], + ["10px","ovcp-m_10px",{"overflowClipMargin":"10px"}], + [12,"ovcp-m_12",{"overflowClipMargin":12}], + [0,"ovcp-m_0",{"overflowClipMargin":0}], + ["auto","ovcp-m_auto",{"overflowClipMargin":"auto"}], + ["{spacing.4}","ovcp-m_{spacing.4}",{"overflowClipMargin":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ovcp-m_token(colors.red.300,_blue)",{"overflowClipMargin":"var(--colors-red-300, blue)"}], + ["a b","ovcp-m_a__b",{"overflowClipMargin":"a b"}], + [true,"ovcp-m_true",{"overflowClipMargin":true}] + ], + "overscrollBehaviorBlock": [ + ["red","ovs-bb_red",{"overscrollBehaviorBlock":"red"}], + ["red.300/40","ovs-bb_red.300/40",{"overscrollBehaviorBlock":"red.300/40"}], + ["10px","ovs-bb_10px",{"overscrollBehaviorBlock":"10px"}], + [12,"ovs-bb_12",{"overscrollBehaviorBlock":12}], + [0,"ovs-bb_0",{"overscrollBehaviorBlock":0}], + ["auto","ovs-bb_auto",{"overscrollBehaviorBlock":"auto"}], + ["{spacing.4}","ovs-bb_{spacing.4}",{"overscrollBehaviorBlock":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ovs-bb_token(colors.red.300,_blue)",{"overscrollBehaviorBlock":"var(--colors-red-300, blue)"}], + ["a b","ovs-bb_a__b",{"overscrollBehaviorBlock":"a b"}], + [true,"ovs-bb_true",{"overscrollBehaviorBlock":true}] + ], + "overscrollBehaviorInline": [ + ["red","ovs-bi_red",{"overscrollBehaviorInline":"red"}], + ["red.300/40","ovs-bi_red.300/40",{"overscrollBehaviorInline":"red.300/40"}], + ["10px","ovs-bi_10px",{"overscrollBehaviorInline":"10px"}], + [12,"ovs-bi_12",{"overscrollBehaviorInline":12}], + [0,"ovs-bi_0",{"overscrollBehaviorInline":0}], + ["auto","ovs-bi_auto",{"overscrollBehaviorInline":"auto"}], + ["{spacing.4}","ovs-bi_{spacing.4}",{"overscrollBehaviorInline":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ovs-bi_token(colors.red.300,_blue)",{"overscrollBehaviorInline":"var(--colors-red-300, blue)"}], + ["a b","ovs-bi_a__b",{"overscrollBehaviorInline":"a b"}], + [true,"ovs-bi_true",{"overscrollBehaviorInline":true}] + ], + "fill": [ + ["current","fill_current",{"fill":"var(--colors-current)"}], + ["black","fill_black",{"fill":"var(--colors-black)"}], + ["white","fill_white",{"fill":"var(--colors-white)"}], + ["colorPalette.heading","fill_colorPalette.heading",{"fill":"var(--colors-color-palette-heading)"}], + ["red","fill_red",{"fill":"red"}], + ["red.300/40","fill_red.300/40",{"--mix-fill":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","fill":"var(--mix-fill, var(--colors-red-300))"}], + ["10px","fill_10px",{"fill":"10px"}], + [12,"fill_12",{"fill":12}], + [0,"fill_0",{"fill":0}], + ["auto","fill_auto",{"fill":"auto"}], + ["{spacing.4}","fill_{spacing.4}",{"fill":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","fill_token(colors.red.300,_blue)",{"fill":"var(--colors-red-300, blue)"}], + ["a b","fill_a__b",{"fill":"a b"}], + [true,"fill_true",{"fill":true}] + ], + "stroke": [ + ["current","stk_current",{"stroke":"var(--colors-current)"}], + ["black","stk_black",{"stroke":"var(--colors-black)"}], + ["white","stk_white",{"stroke":"var(--colors-white)"}], + ["colorPalette.heading","stk_colorPalette.heading",{"stroke":"var(--colors-color-palette-heading)"}], + ["red","stk_red",{"stroke":"red"}], + ["red.300/40","stk_red.300/40",{"--mix-stroke":"color-mix(in srgb, var(--colors-red-300) 40%, transparent)","stroke":"var(--mix-stroke, var(--colors-red-300))"}], + ["10px","stk_10px",{"stroke":"10px"}], + [12,"stk_12",{"stroke":12}], + [0,"stk_0",{"stroke":0}], + ["auto","stk_auto",{"stroke":"auto"}], + ["{spacing.4}","stk_{spacing.4}",{"stroke":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","stk_token(colors.red.300,_blue)",{"stroke":"var(--colors-red-300, blue)"}], + ["a b","stk_a__b",{"stroke":"a b"}], + [true,"stk_true",{"stroke":true}] + ], + "strokeWidth": [ + ["red","stk-w_red",{"strokeWidth":"red"}], + ["red.300/40","stk-w_red.300/40",{"strokeWidth":"red.300/40"}], + ["10px","stk-w_10px",{"strokeWidth":"10px"}], + [12,"stk-w_12",{"strokeWidth":12}], + [0,"stk-w_0",{"strokeWidth":0}], + ["auto","stk-w_auto",{"strokeWidth":"auto"}], + ["{spacing.4}","stk-w_{spacing.4}",{"strokeWidth":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","stk-w_token(colors.red.300,_blue)",{"strokeWidth":"var(--colors-red-300, blue)"}], + ["a b","stk-w_a__b",{"strokeWidth":"a b"}], + [true,"stk-w_true",{"strokeWidth":true}] + ], + "strokeDasharray": [ + ["red","stk-dsh_red",{"strokeDasharray":"red"}], + ["red.300/40","stk-dsh_red.300/40",{"strokeDasharray":"red.300/40"}], + ["10px","stk-dsh_10px",{"strokeDasharray":"10px"}], + [12,"stk-dsh_12",{"strokeDasharray":12}], + [0,"stk-dsh_0",{"strokeDasharray":0}], + ["auto","stk-dsh_auto",{"strokeDasharray":"auto"}], + ["{spacing.4}","stk-dsh_{spacing.4}",{"strokeDasharray":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","stk-dsh_token(colors.red.300,_blue)",{"strokeDasharray":"var(--colors-red-300, blue)"}], + ["a b","stk-dsh_a__b",{"strokeDasharray":"a b"}], + [true,"stk-dsh_true",{"strokeDasharray":true}] + ], + "strokeDashoffset": [ + ["red","stk-do_red",{"strokeDashoffset":"red"}], + ["red.300/40","stk-do_red.300/40",{"strokeDashoffset":"red.300/40"}], + ["10px","stk-do_10px",{"strokeDashoffset":"10px"}], + [12,"stk-do_12",{"strokeDashoffset":12}], + [0,"stk-do_0",{"strokeDashoffset":0}], + ["auto","stk-do_auto",{"strokeDashoffset":"auto"}], + ["{spacing.4}","stk-do_{spacing.4}",{"strokeDashoffset":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","stk-do_token(colors.red.300,_blue)",{"strokeDashoffset":"var(--colors-red-300, blue)"}], + ["a b","stk-do_a__b",{"strokeDashoffset":"a b"}], + [true,"stk-do_true",{"strokeDashoffset":true}] + ], + "strokeLinecap": [ + ["red","stk-lc_red",{"strokeLinecap":"red"}], + ["red.300/40","stk-lc_red.300/40",{"strokeLinecap":"red.300/40"}], + ["10px","stk-lc_10px",{"strokeLinecap":"10px"}], + [12,"stk-lc_12",{"strokeLinecap":12}], + [0,"stk-lc_0",{"strokeLinecap":0}], + ["auto","stk-lc_auto",{"strokeLinecap":"auto"}], + ["{spacing.4}","stk-lc_{spacing.4}",{"strokeLinecap":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","stk-lc_token(colors.red.300,_blue)",{"strokeLinecap":"var(--colors-red-300, blue)"}], + ["a b","stk-lc_a__b",{"strokeLinecap":"a b"}], + [true,"stk-lc_true",{"strokeLinecap":true}] + ], + "strokeLinejoin": [ + ["red","stk-lj_red",{"strokeLinejoin":"red"}], + ["red.300/40","stk-lj_red.300/40",{"strokeLinejoin":"red.300/40"}], + ["10px","stk-lj_10px",{"strokeLinejoin":"10px"}], + [12,"stk-lj_12",{"strokeLinejoin":12}], + [0,"stk-lj_0",{"strokeLinejoin":0}], + ["auto","stk-lj_auto",{"strokeLinejoin":"auto"}], + ["{spacing.4}","stk-lj_{spacing.4}",{"strokeLinejoin":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","stk-lj_token(colors.red.300,_blue)",{"strokeLinejoin":"var(--colors-red-300, blue)"}], + ["a b","stk-lj_a__b",{"strokeLinejoin":"a b"}], + [true,"stk-lj_true",{"strokeLinejoin":true}] + ], + "strokeMiterlimit": [ + ["red","stk-ml_red",{"strokeMiterlimit":"red"}], + ["red.300/40","stk-ml_red.300/40",{"strokeMiterlimit":"red.300/40"}], + ["10px","stk-ml_10px",{"strokeMiterlimit":"10px"}], + [12,"stk-ml_12",{"strokeMiterlimit":12}], + [0,"stk-ml_0",{"strokeMiterlimit":0}], + ["auto","stk-ml_auto",{"strokeMiterlimit":"auto"}], + ["{spacing.4}","stk-ml_{spacing.4}",{"strokeMiterlimit":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","stk-ml_token(colors.red.300,_blue)",{"strokeMiterlimit":"var(--colors-red-300, blue)"}], + ["a b","stk-ml_a__b",{"strokeMiterlimit":"a b"}], + [true,"stk-ml_true",{"strokeMiterlimit":true}] + ], + "strokeOpacity": [ + ["red","stk-op_red",{"strokeOpacity":"red"}], + ["red.300/40","stk-op_red.300/40",{"strokeOpacity":"red.300/40"}], + ["10px","stk-op_10px",{"strokeOpacity":"10px"}], + [12,"stk-op_12",{"strokeOpacity":12}], + [0,"stk-op_0",{"strokeOpacity":0}], + ["auto","stk-op_auto",{"strokeOpacity":"auto"}], + ["{spacing.4}","stk-op_{spacing.4}",{"strokeOpacity":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","stk-op_token(colors.red.300,_blue)",{"strokeOpacity":"var(--colors-red-300, blue)"}], + ["a b","stk-op_a__b",{"strokeOpacity":"a b"}], + [true,"stk-op_true",{"strokeOpacity":true}] + ], + "srOnly": [ + ["type","sr_type",{}], + ["red","sr_red",{}], + ["red.300/40","sr_red.300/40",{}], + ["10px","sr_10px",{}], + [12,"sr_12",{}], + [0,"sr_0",{}], + ["auto","sr_auto",{}], + ["{spacing.4}","sr_{spacing.4}",{}], + ["token(colors.red.300, blue)","sr_token(colors.red.300,_blue)",{}], + ["a b","sr_a__b",{}], + [true,"sr_true",{"position":"absolute","width":"1px","height":"1px","padding":"0","margin":"-1px","overflow":"hidden","clip":"rect(0, 0, 0, 0)","whiteSpace":"nowrap","borderWidth":"0"}] + ], + "debug": [ + ["type","debug_type",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + ["red","debug_red",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + ["red.300/40","debug_red.300/40",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + ["10px","debug_10px",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + [12,"debug_12",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + [0,"debug_0",{}], + ["auto","debug_auto",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + ["{spacing.4}","debug_{spacing.4}",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + ["token(colors.red.300, blue)","debug_token(colors.red.300,_blue)",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + ["a b","debug_a__b",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}], + [true,"debug_true",{"outline":"1px solid blue !important","&>*":{"outline":"1px solid red !important"}}] + ], + "appearance": [ + ["red","ap_red",{"appearance":"red","WebkitAppearance":"red"}], + ["red.300/40","ap_red.300/40",{"appearance":"red.300/40","WebkitAppearance":"red.300/40"}], + ["10px","ap_10px",{"appearance":"10px","WebkitAppearance":"10px"}], + [12,"ap_12",{"appearance":12,"WebkitAppearance":12}], + [0,"ap_0",{"appearance":0,"WebkitAppearance":0}], + ["auto","ap_auto",{"appearance":"auto","WebkitAppearance":"auto"}], + ["{spacing.4}","ap_{spacing.4}",{"appearance":"var(--spacing-4)","WebkitAppearance":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","ap_token(colors.red.300,_blue)",{"appearance":"var(--colors-red-300, blue)","WebkitAppearance":"var(--colors-red-300, blue)"}], + ["a b","ap_a__b",{"appearance":"a b","WebkitAppearance":"a b"}], + [true,"ap_true",{"appearance":true,"WebkitAppearance":true}] + ], + "backfaceVisibility": [ + ["red","bfv_red",{"backfaceVisibility":"red","WebkitBackfaceVisibility":"red"}], + ["red.300/40","bfv_red.300/40",{"backfaceVisibility":"red.300/40","WebkitBackfaceVisibility":"red.300/40"}], + ["10px","bfv_10px",{"backfaceVisibility":"10px","WebkitBackfaceVisibility":"10px"}], + [12,"bfv_12",{"backfaceVisibility":12,"WebkitBackfaceVisibility":12}], + [0,"bfv_0",{"backfaceVisibility":0,"WebkitBackfaceVisibility":0}], + ["auto","bfv_auto",{"backfaceVisibility":"auto","WebkitBackfaceVisibility":"auto"}], + ["{spacing.4}","bfv_{spacing.4}",{"backfaceVisibility":"var(--spacing-4)","WebkitBackfaceVisibility":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","bfv_token(colors.red.300,_blue)",{"backfaceVisibility":"var(--colors-red-300, blue)","WebkitBackfaceVisibility":"var(--colors-red-300, blue)"}], + ["a b","bfv_a__b",{"backfaceVisibility":"a b","WebkitBackfaceVisibility":"a b"}], + [true,"bfv_true",{"backfaceVisibility":true,"WebkitBackfaceVisibility":true}] + ], + "clipPath": [ + ["red","cp-path_red",{"clipPath":"red","WebkitClipPath":"red"}], + ["red.300/40","cp-path_red.300/40",{"clipPath":"red.300/40","WebkitClipPath":"red.300/40"}], + ["10px","cp-path_10px",{"clipPath":"10px","WebkitClipPath":"10px"}], + [12,"cp-path_12",{"clipPath":12,"WebkitClipPath":12}], + [0,"cp-path_0",{"clipPath":0,"WebkitClipPath":0}], + ["auto","cp-path_auto",{"clipPath":"auto","WebkitClipPath":"auto"}], + ["{spacing.4}","cp-path_{spacing.4}",{"clipPath":"var(--spacing-4)","WebkitClipPath":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","cp-path_token(colors.red.300,_blue)",{"clipPath":"var(--colors-red-300, blue)","WebkitClipPath":"var(--colors-red-300, blue)"}], + ["a b","cp-path_a__b",{"clipPath":"a b","WebkitClipPath":"a b"}], + [true,"cp-path_true",{"clipPath":true,"WebkitClipPath":true}] + ], + "hyphens": [ + ["red","hy_red",{"hyphens":"red","WebkitHyphens":"red"}], + ["red.300/40","hy_red.300/40",{"hyphens":"red.300/40","WebkitHyphens":"red.300/40"}], + ["10px","hy_10px",{"hyphens":"10px","WebkitHyphens":"10px"}], + [12,"hy_12",{"hyphens":12,"WebkitHyphens":12}], + [0,"hy_0",{"hyphens":0,"WebkitHyphens":0}], + ["auto","hy_auto",{"hyphens":"auto","WebkitHyphens":"auto"}], + ["{spacing.4}","hy_{spacing.4}",{"hyphens":"var(--spacing-4)","WebkitHyphens":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","hy_token(colors.red.300,_blue)",{"hyphens":"var(--colors-red-300, blue)","WebkitHyphens":"var(--colors-red-300, blue)"}], + ["a b","hy_a__b",{"hyphens":"a b","WebkitHyphens":"a b"}], + [true,"hy_true",{"hyphens":true,"WebkitHyphens":true}] + ], + "mask": [ + ["red","msk_red",{"mask":"red","WebkitMask":"red"}], + ["red.300/40","msk_red.300/40",{"mask":"red.300/40","WebkitMask":"red.300/40"}], + ["10px","msk_10px",{"mask":"10px","WebkitMask":"10px"}], + [12,"msk_12",{"mask":12,"WebkitMask":12}], + [0,"msk_0",{"mask":0,"WebkitMask":0}], + ["auto","msk_auto",{"mask":"auto","WebkitMask":"auto"}], + ["{spacing.4}","msk_{spacing.4}",{"mask":"var(--spacing-4)","WebkitMask":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","msk_token(colors.red.300,_blue)",{"mask":"var(--colors-red-300, blue)","WebkitMask":"var(--colors-red-300, blue)"}], + ["a b","msk_a__b",{"mask":"a b","WebkitMask":"a b"}], + [true,"msk_true",{"mask":true,"WebkitMask":true}] + ], + "maskImage": [ + ["red","msk-i_red",{"maskImage":"red","WebkitMaskImage":"red"}], + ["red.300/40","msk-i_red.300/40",{"maskImage":"red.300/40","WebkitMaskImage":"red.300/40"}], + ["10px","msk-i_10px",{"maskImage":"10px","WebkitMaskImage":"10px"}], + [12,"msk-i_12",{"maskImage":12,"WebkitMaskImage":12}], + [0,"msk-i_0",{"maskImage":0,"WebkitMaskImage":0}], + ["auto","msk-i_auto",{"maskImage":"auto","WebkitMaskImage":"auto"}], + ["{spacing.4}","msk-i_{spacing.4}",{"maskImage":"var(--spacing-4)","WebkitMaskImage":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","msk-i_token(colors.red.300,_blue)",{"maskImage":"var(--colors-red-300, blue)","WebkitMaskImage":"var(--colors-red-300, blue)"}], + ["a b","msk-i_a__b",{"maskImage":"a b","WebkitMaskImage":"a b"}], + [true,"msk-i_true",{"maskImage":true,"WebkitMaskImage":true}] + ], + "maskSize": [ + ["red","msk-s_red",{"maskSize":"red","WebkitMaskSize":"red"}], + ["red.300/40","msk-s_red.300/40",{"maskSize":"red.300/40","WebkitMaskSize":"red.300/40"}], + ["10px","msk-s_10px",{"maskSize":"10px","WebkitMaskSize":"10px"}], + [12,"msk-s_12",{"maskSize":12,"WebkitMaskSize":12}], + [0,"msk-s_0",{"maskSize":0,"WebkitMaskSize":0}], + ["auto","msk-s_auto",{"maskSize":"auto","WebkitMaskSize":"auto"}], + ["{spacing.4}","msk-s_{spacing.4}",{"maskSize":"var(--spacing-4)","WebkitMaskSize":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","msk-s_token(colors.red.300,_blue)",{"maskSize":"var(--colors-red-300, blue)","WebkitMaskSize":"var(--colors-red-300, blue)"}], + ["a b","msk-s_a__b",{"maskSize":"a b","WebkitMaskSize":"a b"}], + [true,"msk-s_true",{"maskSize":true,"WebkitMaskSize":true}] + ], + "textSizeAdjust": [ + ["red","txt-adj_red",{"textSizeAdjust":"red","WebkitTextSizeAdjust":"red"}], + ["red.300/40","txt-adj_red.300/40",{"textSizeAdjust":"red.300/40","WebkitTextSizeAdjust":"red.300/40"}], + ["10px","txt-adj_10px",{"textSizeAdjust":"10px","WebkitTextSizeAdjust":"10px"}], + [12,"txt-adj_12",{"textSizeAdjust":12,"WebkitTextSizeAdjust":12}], + [0,"txt-adj_0",{"textSizeAdjust":0,"WebkitTextSizeAdjust":0}], + ["auto","txt-adj_auto",{"textSizeAdjust":"auto","WebkitTextSizeAdjust":"auto"}], + ["{spacing.4}","txt-adj_{spacing.4}",{"textSizeAdjust":"var(--spacing-4)","WebkitTextSizeAdjust":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","txt-adj_token(colors.red.300,_blue)",{"textSizeAdjust":"var(--colors-red-300, blue)","WebkitTextSizeAdjust":"var(--colors-red-300, blue)"}], + ["a b","txt-adj_a__b",{"textSizeAdjust":"a b","WebkitTextSizeAdjust":"a b"}], + [true,"txt-adj_true",{"textSizeAdjust":true,"WebkitTextSizeAdjust":true}] + ], + "container": [ + ["red","cq_red",{"container":"red"}], + ["red.300/40","cq_red.300/40",{"container":"red.300/40"}], + ["10px","cq_10px",{"container":"10px"}], + [12,"cq_12",{"container":12}], + [0,"cq_0",{"container":0}], + ["auto","cq_auto",{"container":"auto"}], + ["{spacing.4}","cq_{spacing.4}",{"container":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","cq_token(colors.red.300,_blue)",{"container":"var(--colors-red-300, blue)"}], + ["a b","cq_a__b",{"container":"a b"}], + [true,"cq_true",{"container":true}] + ], + "containerName": [ + ["red","cq-n_red",{"containerName":"red"}], + ["red.300/40","cq-n_red.300/40",{"containerName":"red.300/40"}], + ["10px","cq-n_10px",{"containerName":"10px"}], + [12,"cq-n_12",{"containerName":12}], + [0,"cq-n_0",{"containerName":0}], + ["auto","cq-n_auto",{"containerName":"auto"}], + ["{spacing.4}","cq-n_{spacing.4}",{"containerName":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","cq-n_token(colors.red.300,_blue)",{"containerName":"var(--colors-red-300, blue)"}], + ["a b","cq-n_a__b",{"containerName":"a b"}], + [true,"cq-n_true",{"containerName":true}] + ], + "containerType": [ + ["red","cq-t_red",{"containerType":"red"}], + ["red.300/40","cq-t_red.300/40",{"containerType":"red.300/40"}], + ["10px","cq-t_10px",{"containerType":"10px"}], + [12,"cq-t_12",{"containerType":12}], + [0,"cq-t_0",{"containerType":0}], + ["auto","cq-t_auto",{"containerType":"auto"}], + ["{spacing.4}","cq-t_{spacing.4}",{"containerType":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","cq-t_token(colors.red.300,_blue)",{"containerType":"var(--colors-red-300, blue)"}], + ["a b","cq-t_a__b",{"containerType":"a b"}], + [true,"cq-t_true",{"containerType":true}] + ], + "cursor": [ + ["red","cursor_red",{"cursor":"red"}], + ["red.300/40","cursor_red.300/40",{"cursor":"red.300/40"}], + ["10px","cursor_10px",{"cursor":"10px"}], + [12,"cursor_12",{"cursor":12}], + [0,"cursor_0",{"cursor":0}], + ["auto","cursor_auto",{"cursor":"auto"}], + ["{spacing.4}","cursor_{spacing.4}",{"cursor":"var(--spacing-4)"}], + ["token(colors.red.300, blue)","cursor_token(colors.red.300,_blue)",{"cursor":"var(--colors-red-300, blue)"}], + ["a b","cursor_a__b",{"cursor":"a b"}], + [true,"cursor_true",{"cursor":true}] + ], + "colorPalette": [ + ["current","color-palette_current",{"--colors-color-palette":"var(--colors-current)"}], + ["black","color-palette_black",{"--colors-color-palette":"var(--colors-black)"}], + ["white","color-palette_white",{"--colors-color-palette":"var(--colors-white)"}], + ["surface","color-palette_surface",{"--colors-color-palette":"var(--colors-surface)"}], + ["red","color-palette_red",{"--colors-color-palette-50":"var(--colors-red-50)","--colors-color-palette-100":"var(--colors-red-100)","--colors-color-palette-200":"var(--colors-red-200)","--colors-color-palette-300":"var(--colors-red-300)","--colors-color-palette-400":"var(--colors-red-400)","--colors-color-palette-500":"var(--colors-red-500)","--colors-color-palette-600":"var(--colors-red-600)","--colors-color-palette-700":"var(--colors-red-700)","--colors-color-palette-800":"var(--colors-red-800)","--colors-color-palette-900":"var(--colors-red-900)","--colors-color-palette-950":"var(--colors-red-950)"}], + ["red.300/40","color-palette_red.300/40",{}], + ["10px","color-palette_10px",{}], + [12,"color-palette_12",{}], + [0,"color-palette_0",{}], + ["auto","color-palette_auto",{}], + ["{spacing.4}","color-palette_{spacing.4}",{}], + ["token(colors.red.300, blue)","color-palette_token(colors.red.300,_blue)",{}], + ["a b","color-palette_a__b",{}], + [true,"color-palette_true",{}] + ], + "textStyle": [ + ["headline","textStyle_headline",{"fontSize":"1.5rem","fontWeight":"var(--font-weights-bold)"},"compositions"], + ["headline.h1","textStyle_headline.h1",{"fontSize":"2rem","fontWeight":"var(--font-weights-bold)"},"compositions"], + ["headline.h2","textStyle_headline.h2",{"fontSize":"1.5rem","fontWeight":"var(--font-weights-bold)","@media screen and (min-width: 64rem)":{"fontSize":"2rem"}},"compositions"], + ["red","textStyle_red",{},"compositions"], + ["red.300/40","textStyle_red.300/40",{},"compositions"], + ["10px","textStyle_10px",{},"compositions"], + [12,"textStyle_12",{},"compositions"], + [0,"textStyle_0",{},"compositions"], + ["auto","textStyle_auto",{},"compositions"], + ["{spacing.4}","textStyle_{spacing.4}",{},"compositions"], + ["token(colors.red.300, blue)","textStyle_token(colors.red.300,_blue)",{},"compositions"], + ["a b","textStyle_a__b",{},"compositions"], + [true,"textStyle_true",{},"compositions"] + ], + "pos": [ + ["red","pos_red",{"position":"red"}] + ], + "insetX": [ + ["0","inset-x_0",{"insetInline":"var(--spacing-0)"}] + ], + "insetY": [ + ["0","inset-y_0",{"insetBlock":"var(--spacing-0)"}] + ], + "insetEnd": [ + ["0","inset-e_0",{"insetInlineEnd":"var(--spacing-0)"}] + ], + "end": [ + ["0","inset-e_0",{"insetInlineEnd":"var(--spacing-0)"}] + ], + "insetStart": [ + ["0","inset-s_0",{"insetInlineStart":"var(--spacing-0)"}] + ], + "start": [ + ["0","inset-s_0",{"insetInlineStart":"var(--spacing-0)"}] + ], + "flexDir": [ + ["red","flex-d_red",{"flexDirection":"red"}] + ], + "p": [ + ["0","p_0",{"padding":"var(--spacing-0)"}] + ], + "pl": [ + ["0","pl_0",{"paddingLeft":"var(--spacing-0)"}] + ], + "pr": [ + ["0","pr_0",{"paddingRight":"var(--spacing-0)"}] + ], + "pt": [ + ["0","pt_0",{"paddingTop":"var(--spacing-0)"}] + ], + "pb": [ + ["0","pb_0",{"paddingBottom":"var(--spacing-0)"}] + ], + "py": [ + ["0","py_0",{"paddingBlock":"var(--spacing-0)"}] + ], + "paddingY": [ + ["0","py_0",{"paddingBlock":"var(--spacing-0)"}] + ], + "paddingX": [ + ["0","px_0",{"paddingInline":"var(--spacing-0)"}] + ], + "px": [ + ["0","px_0",{"paddingInline":"var(--spacing-0)"}] + ], + "pe": [ + ["0","pe_0",{"paddingInlineEnd":"var(--spacing-0)"}] + ], + "paddingEnd": [ + ["0","pe_0",{"paddingInlineEnd":"var(--spacing-0)"}] + ], + "ps": [ + ["0","ps_0",{"paddingInlineStart":"var(--spacing-0)"}] + ], + "paddingStart": [ + ["0","ps_0",{"paddingInlineStart":"var(--spacing-0)"}] + ], + "ml": [ + ["0","ml_0",{"marginLeft":"var(--spacing-0)"}] + ], + "mr": [ + ["0","mr_0",{"marginRight":"var(--spacing-0)"}] + ], + "mt": [ + ["0","mt_0",{"marginTop":"var(--spacing-0)"}] + ], + "mb": [ + ["0","mb_0",{"marginBottom":"var(--spacing-0)"}] + ], + "m": [ + ["0","m_0",{"margin":"var(--spacing-0)"}] + ], + "my": [ + ["0","my_0",{"marginBlock":"var(--spacing-0)"}] + ], + "marginY": [ + ["0","my_0",{"marginBlock":"var(--spacing-0)"}] + ], + "mx": [ + ["0","mx_0",{"marginInline":"var(--spacing-0)"}] + ], + "marginX": [ + ["0","mx_0",{"marginInline":"var(--spacing-0)"}] + ], + "me": [ + ["0","me_0",{"marginInlineEnd":"var(--spacing-0)"}] + ], + "marginEnd": [ + ["0","me_0",{"marginInlineEnd":"var(--spacing-0)"}] + ], + "ms": [ + ["0","ms_0",{"marginInlineStart":"var(--spacing-0)"}] + ], + "marginStart": [ + ["0","ms_0",{"marginInlineStart":"var(--spacing-0)"}] + ], + "ringWidth": [ + ["red","ring-w_red",{"outlineWidth":"red"}] + ], + "ringColor": [ + ["current","ring-c_current",{"outlineColor":"var(--colors-current)"}] + ], + "ring": [ + ["none","ring_none",{"outline":"var(--borders-none)"}] + ], + "ringOffset": [ + ["0","ring-o_0",{"outlineOffset":"var(--spacing-0)"}] + ], + "w": [ + ["0","w_0",{"width":"var(--sizes-0)"}] + ], + "minW": [ + ["0","min-w_0",{"minWidth":"var(--sizes-0)"}] + ], + "maxW": [ + ["0","max-w_0",{"maxWidth":"var(--sizes-0)"}] + ], + "h": [ + ["0","h_0",{"height":"var(--sizes-0)"}] + ], + "minH": [ + ["0","min-h_0",{"minHeight":"var(--sizes-0)"}] + ], + "maxH": [ + ["0","max-h_0",{"maxHeight":"var(--sizes-0)"}] + ], + "bgPosition": [ + ["red","bg-p_red",{"backgroundPosition":"red"}] + ], + "bgPositionX": [ + ["red","bg-p-x_red",{"backgroundPositionX":"red"}] + ], + "bgPositionY": [ + ["red","bg-p-y_red",{"backgroundPositionY":"red"}] + ], + "bgAttachment": [ + ["red","bg-a_red",{"backgroundAttachment":"red"}] + ], + "bgClip": [ + ["red","bg-cp_red",{"backgroundClip":"red","WebkitBackgroundClip":"red"}] + ], + "bg": [ + ["current","bg_current",{"background":"var(--colors-current)"}] + ], + "bgColor": [ + ["current","bg-c_current",{"backgroundColor":"var(--colors-current)"}] + ], + "bgOrigin": [ + ["red","bg-o_red",{"backgroundOrigin":"red"}] + ], + "bgImage": [ + ["red","bg-i_red",{"backgroundImage":"red"}] + ], + "bgRepeat": [ + ["red","bg-r_red",{"backgroundRepeat":"red"}] + ], + "bgBlendMode": [ + ["red","bg-bm_red",{"backgroundBlendMode":"red"}] + ], + "bgSize": [ + ["red","bg-s_red",{"backgroundSize":"red"}] + ], + "bgGradient": [ + ["to-t","bg-grad_to-t",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top","backgroundImage":"linear-gradient(var(--gradient-stops))"}] + ], + "bgLinear": [ + ["to-t","bg-linear_to-t",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"to top","backgroundImage":"linear-gradient(var(--gradient-stops))"}] + ], + "bgRadial": [ + ["red","bg-radial_red",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"red","backgroundImage":"radial-gradient(var(--gradient-stops,red))"}] + ], + "bgConic": [ + ["red","bg-conic_red",{"--gradient-stops":"var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))","--gradient-position":"red","backgroundImage":"conic-gradient(var(--gradient-stops))"}] + ], + "rounded": [ + ["xs","bdr_xs",{"borderRadius":"var(--radii-xs)"}] + ], + "roundedTopLeft": [ + ["xs","bdr-tl_xs",{"borderTopLeftRadius":"var(--radii-xs)"}] + ], + "roundedTopRight": [ + ["xs","bdr-tr_xs",{"borderTopRightRadius":"var(--radii-xs)"}] + ], + "roundedBottomRight": [ + ["xs","bdr-br_xs",{"borderBottomRightRadius":"var(--radii-xs)"}] + ], + "roundedBottomLeft": [ + ["xs","bdr-bl_xs",{"borderBottomLeftRadius":"var(--radii-xs)"}] + ], + "roundedTop": [ + ["xs","bdr-t_xs",{"borderTopLeftRadius":"var(--radii-xs)","borderTopRightRadius":"var(--radii-xs)"}] + ], + "roundedRight": [ + ["xs","bdr-r_xs",{"borderTopRightRadius":"var(--radii-xs)","borderBottomRightRadius":"var(--radii-xs)"}] + ], + "roundedBottom": [ + ["xs","bdr-b_xs",{"borderBottomLeftRadius":"var(--radii-xs)","borderBottomRightRadius":"var(--radii-xs)"}] + ], + "roundedLeft": [ + ["xs","bdr-l_xs",{"borderTopLeftRadius":"var(--radii-xs)","borderBottomLeftRadius":"var(--radii-xs)"}] + ], + "roundedStartStart": [ + ["xs","bdr-ss_xs",{"borderStartStartRadius":"var(--radii-xs)"}] + ], + "roundedStartEnd": [ + ["xs","bdr-se_xs",{"borderStartEndRadius":"var(--radii-xs)"}] + ], + "roundedStart": [ + ["xs","bdr-s_xs",{"borderStartStartRadius":"var(--radii-xs)","borderEndStartRadius":"var(--radii-xs)"}] + ], + "roundedEndStart": [ + ["xs","bdr-es_xs",{"borderEndStartRadius":"var(--radii-xs)"}] + ], + "roundedEndEnd": [ + ["xs","bdr-ee_xs",{"borderEndEndRadius":"var(--radii-xs)"}] + ], + "roundedEnd": [ + ["xs","bdr-e_xs",{"borderStartEndRadius":"var(--radii-xs)","borderEndEndRadius":"var(--radii-xs)"}] + ], + "borderX": [ + ["none","bd-x_none",{"borderInline":"var(--borders-none)"}] + ], + "borderXWidth": [ + ["red","bd-x-w_red",{"borderInlineWidth":"red"}] + ], + "borderXColor": [ + ["current","bd-x-c_current",{"borderInlineColor":"var(--colors-current)"}] + ], + "borderY": [ + ["none","bd-y_none",{"borderBlock":"var(--borders-none)"}] + ], + "borderYWidth": [ + ["red","bd-y-w_red",{"borderBlockWidth":"red"}] + ], + "borderYColor": [ + ["current","bd-y-c_current",{"borderBlockColor":"var(--colors-current)"}] + ], + "borderStart": [ + ["none","bd-s_none",{"borderInlineStart":"var(--borders-none)"}] + ], + "borderStartWidth": [ + ["red","bd-s-w_red",{"borderInlineStartWidth":"red"}] + ], + "borderStartColor": [ + ["current","bd-s-c_current",{"borderInlineStartColor":"var(--colors-current)"}] + ], + "borderEnd": [ + ["none","bd-e_none",{"borderInlineEnd":"var(--borders-none)"}] + ], + "borderEndWidth": [ + ["red","bd-e-w_red",{"borderInlineEndWidth":"red"}] + ], + "borderEndColor": [ + ["current","bd-e-c_current",{"borderInlineEndColor":"var(--colors-current)"}] + ], + "shadow": [ + ["2xs","bx-sh_2xs",{"boxShadow":"var(--shadows-2xs)"}] + ], + "shadowColor": [ + ["current","bx-sh-c_current",{"--shadow-color":"var(--colors-current)"}] + ], + "x": [ + ["0","translate-x_0",{"--translate-x":"var(--spacing-0)"}] + ], + "y": [ + ["0","translate-y_0",{"--translate-y":"var(--spacing-0)"}] + ], + "z": [ + ["0","translate-z_0",{"--translate-z":"var(--spacing-0)"}] + ], + "scrollMarginY": [ + ["0","scr-my_0",{"scrollMarginBlock":"var(--spacing-0)"}] + ], + "scrollMarginX": [ + ["0","scr-mx_0",{"scrollMarginInline":"var(--spacing-0)"}] + ], + "scrollPaddingY": [ + ["0","scr-py_0",{"scrollPaddingBlock":"var(--spacing-0)"}] + ], + "scrollPaddingX": [ + ["0","scr-px_0",{"scrollPaddingInline":"var(--spacing-0)"}] + ] +} diff --git a/src/Css/tests/Fixtures/Reference/reference_css.php b/src/Css/tests/Fixtures/Reference/reference_css.php new file mode 100644 index 00000000000..7be9e37222a --- /dev/null +++ b/src/Css/tests/Fixtures/Reference/reference_css.php @@ -0,0 +1,1083 @@ +>, + * WebkitBorderBefore?: WebkitBorderBeforeValue|array>, + * WebkitBorderBeforeColor?: WebkitBorderBeforeColorValue|array>, + * WebkitBorderBeforeStyle?: WebkitBorderBeforeStyleValue|array>, + * WebkitBorderBeforeWidth?: WebkitBorderBeforeWidthValue|array>, + * WebkitBoxReflect?: WebkitBoxReflectValue|array>, + * WebkitLineClamp?: WebkitLineClampValue|array>, + * WebkitMask?: WebkitMaskValue|array>, + * WebkitMaskAttachment?: WebkitMaskAttachmentValue|array>, + * WebkitMaskClip?: WebkitMaskClipValue|array>, + * WebkitMaskComposite?: WebkitMaskCompositeValue|array>, + * WebkitMaskImage?: WebkitMaskImageValue|array>, + * WebkitMaskOrigin?: WebkitMaskOriginValue|array>, + * WebkitMaskPosition?: WebkitMaskPositionValue|array>, + * WebkitMaskPositionX?: WebkitMaskPositionXValue|array>, + * WebkitMaskPositionY?: WebkitMaskPositionYValue|array>, + * WebkitMaskRepeat?: WebkitMaskRepeatValue|array>, + * WebkitMaskRepeatX?: WebkitMaskRepeatXValue|array>, + * WebkitMaskRepeatY?: WebkitMaskRepeatXValue|array>, + * WebkitMaskSize?: WebkitMaskSizeValue|array>, + * WebkitOverflowScrolling?: WebkitOverflowScrollingValue|array>, + * WebkitTapHighlightColor?: WebkitBorderBeforeColorValue|array>, + * WebkitTextFillColor?: ColorsToken|array>, + * WebkitTextStroke?: WebkitTextStrokeValue|array>, + * WebkitTextStrokeColor?: WebkitBorderBeforeColorValue|array>, + * WebkitTextStrokeWidth?: WebkitTextStrokeWidthValue|array>, + * WebkitTouchCallout?: WebkitTouchCalloutValue|array>, + * WebkitUserModify?: WebkitUserModifyValue|array>, + * WebkitUserSelect?: WebkitUserSelectValue|array>, + * accentColor?: ColorsToken|array>, + * alignContent?: AlignContentValue|array>, + * alignItems?: AlignItemsValue|array>, + * alignSelf?: AlignSelfValue|array>, + * alignTracks?: AlignContentValue|array>, + * alignmentBaseline?: AlignmentBaselineValue|array>, + * all?: AllValue|array>, + * anchorName?: WebkitMaskImageValue|array>, + * anchorScope?: AnchorScopeValue|array>, + * animation?: AnimationValue|array>, + * animationComposition?: AnimationCompositionValue|array>, + * animationDelay?: AllValue|array>, + * animationDirection?: AnimationDirectionValue|array>, + * animationDuration?: DurationsToken|array>, + * animationFillMode?: AnimationFillModeValue|array>, + * animationIterationCount?: AnimationIterationCountValue|array>, + * animationName?: WebkitMaskImageValue|array>, + * animationPlayState?: AnimationPlayStateValue|array>, + * animationRange?: AnimationRangeValue|array>, + * animationRangeEnd?: AnimationRangeValue|array>, + * animationRangeStart?: AnimationRangeValue|array>, + * animationState?: int|float|string|array>, + * animationTimeline?: AnimationTimelineValue|array>, + * animationTimingFunction?: EasingsToken|array>, + * appearance?: AppearanceValue|array>, + * aspectRatio?: AspectRatioValue|array>, + * backdropBlur?: int|float|string|array>, + * backdropBrightness?: int|float|string|array>, + * backdropContrast?: int|float|string|array>, + * backdropFilter?: BackdropFilterValue|array>, + * backdropGrayscale?: int|float|string|array>, + * backdropHueRotate?: int|float|string|array>, + * backdropInvert?: int|float|string|array>, + * backdropOpacity?: int|float|string|array>, + * backdropSaturate?: int|float|string|array>, + * backdropSepia?: int|float|string|array>, + * backfaceVisibility?: BackfaceVisibilityValue|array>, + * background?: ColorsToken|array>, + * backgroundAttachment?: WebkitMaskAttachmentValue|array>, + * backgroundBlendMode?: BackgroundBlendModeValue|array>, + * backgroundClip?: BackgroundClipValue|array>, + * backgroundColor?: ColorsToken|array>, + * backgroundConic?: int|float|string|array>, + * backgroundGradient?: GradientsToken|array>, + * backgroundImage?: WebkitMaskImageValue|array>, + * backgroundLinear?: GradientsToken|array>, + * backgroundOrigin?: BackgroundOriginValue|array>, + * backgroundPosition?: WebkitMaskPositionValue|array>, + * backgroundPositionX?: BackgroundPositionXValue|array>, + * backgroundPositionY?: BackgroundPositionYValue|array>, + * backgroundRadial?: int|float|string|array>, + * backgroundRepeat?: WebkitMaskRepeatValue|array>, + * backgroundSize?: WebkitMaskSizeValue|array>, + * baselineShift?: BaselineShiftValue|array>, + * bg?: ColorsToken|array>, + * bgAttachment?: WebkitMaskAttachmentValue|array>, + * bgBlendMode?: BackgroundBlendModeValue|array>, + * bgClip?: BackgroundClipValue|array>, + * bgColor?: ColorsToken|array>, + * bgConic?: int|float|string|array>, + * bgGradient?: GradientsToken|array>, + * bgImage?: WebkitMaskImageValue|array>, + * bgLinear?: GradientsToken|array>, + * bgOrigin?: BackgroundOriginValue|array>, + * bgPosition?: WebkitMaskPositionValue|array>, + * bgPositionX?: BackgroundPositionXValue|array>, + * bgPositionY?: BackgroundPositionYValue|array>, + * bgRadial?: int|float|string|array>, + * bgRepeat?: WebkitMaskRepeatValue|array>, + * bgSize?: WebkitMaskSizeValue|array>, + * blockSize?: SizesToken|array>, + * blur?: int|float|string|array>, + * border?: WebkitBorderBeforeValue|array>, + * borderBlock?: WebkitBorderBeforeValue|array>, + * borderBlockColor?: ColorsToken|array>, + * borderBlockEnd?: WebkitBorderBeforeValue|array>, + * borderBlockEndColor?: ColorsToken|array>, + * borderBlockEndStyle?: WebkitBorderBeforeStyleValue|array>, + * borderBlockEndWidth?: WebkitBorderBeforeWidthValue|array>, + * borderBlockStart?: WebkitBorderBeforeValue|array>, + * borderBlockStartColor?: ColorsToken|array>, + * borderBlockStartStyle?: WebkitBorderBeforeStyleValue|array>, + * borderBlockStartWidth?: WebkitBorderBeforeWidthValue|array>, + * borderBlockStyle?: WebkitBorderBeforeStyleValue|array>, + * borderBlockWidth?: WebkitBorderBeforeWidthValue|array>, + * borderBottom?: WebkitBorderBeforeValue|array>, + * borderBottomColor?: ColorsToken|array>, + * borderBottomLeftRadius?: WebkitTextStrokeWidthValue|array>, + * borderBottomRadius?: int|float|string|array>, + * borderBottomRightRadius?: WebkitTextStrokeWidthValue|array>, + * borderBottomStyle?: WebkitBorderBeforeStyleValue|array>, + * borderBottomWidth?: WebkitBorderBeforeWidthValue|array>, + * borderCollapse?: BorderCollapseValue|array>, + * borderColor?: ColorsToken|array>, + * borderEnd?: WebkitBorderBeforeValue|array>, + * borderEndColor?: ColorsToken|array>, + * borderEndEndRadius?: WebkitTextStrokeWidthValue|array>, + * borderEndRadius?: int|float|string|array>, + * borderEndStartRadius?: WebkitTextStrokeWidthValue|array>, + * borderEndWidth?: WebkitBorderBeforeWidthValue|array>, + * borderImage?: BorderImageValue|array>, + * borderImageOutset?: WebkitTextStrokeWidthValue|array>, + * borderImageRepeat?: BorderImageRepeatValue|array>, + * borderImageSlice?: WebkitTextStrokeWidthValue|array>, + * borderImageSource?: WebkitMaskImageValue|array>, + * borderImageWidth?: AspectRatioValue|array>, + * borderInline?: WebkitBorderBeforeValue|array>, + * borderInlineColor?: ColorsToken|array>, + * borderInlineEnd?: WebkitBorderBeforeValue|array>, + * borderInlineEndColor?: ColorsToken|array>, + * borderInlineEndStyle?: WebkitBorderBeforeStyleValue|array>, + * borderInlineEndWidth?: WebkitBorderBeforeWidthValue|array>, + * borderInlineStart?: WebkitBorderBeforeValue|array>, + * borderInlineStartColor?: ColorsToken|array>, + * borderInlineStartStyle?: WebkitBorderBeforeStyleValue|array>, + * borderInlineStartWidth?: WebkitBorderBeforeWidthValue|array>, + * borderInlineStyle?: WebkitBorderBeforeStyleValue|array>, + * borderInlineWidth?: WebkitBorderBeforeWidthValue|array>, + * borderLeft?: WebkitBorderBeforeValue|array>, + * borderLeftColor?: ColorsToken|array>, + * borderLeftRadius?: int|float|string|array>, + * borderLeftStyle?: WebkitBorderBeforeStyleValue|array>, + * borderLeftWidth?: WebkitBorderBeforeWidthValue|array>, + * borderRadius?: WebkitTextStrokeWidthValue|array>, + * borderRight?: WebkitBorderBeforeValue|array>, + * borderRightColor?: ColorsToken|array>, + * borderRightRadius?: int|float|string|array>, + * borderRightStyle?: WebkitBorderBeforeStyleValue|array>, + * borderRightWidth?: WebkitBorderBeforeWidthValue|array>, + * borderSpacing?: SpacingToken|array>, + * borderSpacingX?: SpacingToken2|array>, + * borderSpacingY?: SpacingToken2|array>, + * borderStart?: WebkitBorderBeforeValue|array>, + * borderStartColor?: ColorsToken|array>, + * borderStartEndRadius?: WebkitTextStrokeWidthValue|array>, + * borderStartRadius?: int|float|string|array>, + * borderStartStartRadius?: WebkitTextStrokeWidthValue|array>, + * borderStartWidth?: WebkitBorderBeforeWidthValue|array>, + * borderStyle?: WebkitBorderBeforeStyleValue|array>, + * borderTop?: WebkitBorderBeforeValue|array>, + * borderTopColor?: ColorsToken|array>, + * borderTopLeftRadius?: WebkitTextStrokeWidthValue|array>, + * borderTopRadius?: int|float|string|array>, + * borderTopRightRadius?: WebkitTextStrokeWidthValue|array>, + * borderTopStyle?: WebkitBorderBeforeStyleValue|array>, + * borderTopWidth?: WebkitBorderBeforeWidthValue|array>, + * borderWidth?: WebkitBorderBeforeWidthValue|array>, + * borderX?: WebkitBorderBeforeValue|array>, + * borderXColor?: ColorsToken|array>, + * borderXWidth?: WebkitBorderBeforeWidthValue|array>, + * borderY?: WebkitBorderBeforeValue|array>, + * borderYColor?: ColorsToken|array>, + * borderYWidth?: WebkitBorderBeforeWidthValue|array>, + * bottom?: SpacingToken2|array>, + * boxAlign?: BoxAlignValue|array>, + * boxDecorationBreak?: BoxDecorationBreakValue|array>, + * boxDirection?: BoxDirectionValue|array>, + * boxFlex?: WebkitTextStrokeWidthValue|array>, + * boxFlexGroup?: WebkitTextStrokeWidthValue|array>, + * boxLines?: BoxLinesValue|array>, + * boxOrdinalGroup?: WebkitTextStrokeWidthValue|array>, + * boxOrient?: BoxOrientValue|array>, + * boxPack?: BoxPackValue|array>, + * boxShadow?: WebkitMaskImageValue|array>, + * boxShadowColor?: ColorsToken|array>, + * boxSize?: SizesToken2|array>, + * boxSizing?: BoxSizingValue|array>, + * breakAfter?: BreakAfterValue|array>, + * breakBefore?: BreakAfterValue|array>, + * breakInside?: BreakInsideValue|array>, + * brightness?: int|float|string|array>, + * captionSide?: CaptionSideValue|array>, + * caret?: CaretValue|array>, + * caretColor?: ColorsToken|array>, + * caretShape?: CaretShapeValue|array>, + * clear?: ClearValue|array>, + * clip?: DurationsToken|array>, + * clipPath?: ClipPathValue|array>, + * clipRule?: ClipRuleValue|array>, + * color?: ColorsToken|array>, + * colorInterpolation?: ColorInterpolationValue|array>, + * colorInterpolationFilters?: ColorInterpolationValue|array>, + * colorPalette?: ColorPaletteValue|array>, + * colorRendering?: ColorRenderingValue|array>, + * colorScheme?: ColorSchemeValue|array>, + * columnCount?: AspectRatioValue|array>, + * columnFill?: ColumnFillValue|array>, + * columnGap?: SpacingToken2|array>, + * columnRule?: WebkitBorderBeforeValue|array>, + * columnRuleColor?: WebkitBorderBeforeColorValue|array>, + * columnRuleStyle?: WebkitBorderBeforeStyleValue|array>, + * columnRuleWidth?: WebkitBorderBeforeWidthValue|array>, + * columnSpan?: AnchorScopeValue|array>, + * columnWidth?: AspectRatioValue|array>, + * columns?: AspectRatioValue|array>, + * contain?: ContainValue|array>, + * containIntrinsicBlockSize?: WebkitLineClampValue|array>, + * containIntrinsicHeight?: WebkitLineClampValue|array>, + * containIntrinsicInlineSize?: WebkitLineClampValue|array>, + * containIntrinsicSize?: WebkitLineClampValue|array>, + * containIntrinsicWidth?: WebkitLineClampValue|array>, + * container?: WebkitMaskImageValue|array>, + * containerName?: WebkitMaskImageValue|array>, + * containerType?: ContainerTypeValue|array>, + * content?: ContentValue|array>, + * contentVisibility?: ContentVisibilityValue|array>, + * contrast?: int|float|string|array>, + * cornerShape?: int|float|string|array>, + * counterIncrement?: WebkitMaskImageValue|array>, + * counterReset?: WebkitMaskImageValue|array>, + * counterSet?: WebkitMaskImageValue|array>, + * cursor?: CursorValue|array>, + * cx?: WebkitTextStrokeWidthValue|array>, + * cy?: WebkitTextStrokeWidthValue|array>, + * d?: WebkitMaskImageValue|array>, + * debug?: bool|string|array>, + * direction?: DirectionValue|array>, + * display?: DisplayValue|array>, + * divideColor?: ColorsToken|array>, + * divideStyle?: int|float|string|array>, + * divideX?: int|float|string|array>, + * divideY?: int|float|string|array>, + * dominantBaseline?: DominantBaselineValue|array>, + * dropShadow?: int|float|string|array>, + * emptyCells?: EmptyCellsValue|array>, + * end?: SpacingToken2|array>, + * fieldSizing?: FieldSizingValue|array>, + * fill?: ColorsToken|array>, + * fillOpacity?: WebkitTextStrokeWidthValue|array>, + * fillRule?: ClipRuleValue|array>, + * filter?: BackdropFilterValue|array>, + * flex?: FlexValue|array>, + * flexBasis?: SizesToken3|array>, + * flexDir?: FlexDirectionValue|array>, + * flexDirection?: FlexDirectionValue|array>, + * flexFlow?: FlexFlowValue|array>, + * flexGrow?: WebkitTextStrokeWidthValue|array>, + * flexShrink?: WebkitTextStrokeWidthValue|array>, + * flexWrap?: FlexWrapValue|array>, + * float?: FloatValue|array>, + * floodColor?: WebkitBorderBeforeColorValue|array>, + * floodOpacity?: WebkitTextStrokeWidthValue|array>, + * focusRing?: FocusRingValue|array>, + * focusRingColor?: ColorsToken|array>, + * focusRingOffset?: SpacingToken2|array>, + * focusRingStyle?: int|float|string|array>, + * focusRingWidth?: int|float|string|array>, + * focusVisibleRing?: FocusRingValue|array>, + * font?: FontValue|array>, + * fontFamily?: FontsToken|array>, + * fontFeatureSettings?: FontFeatureSettingsValue|array>, + * fontKerning?: FontKerningValue|array>, + * fontLanguageOverride?: FontFeatureSettingsValue|array>, + * fontOpticalSizing?: AnimationTimelineValue|array>, + * fontPalette?: ColorSchemeValue|array>, + * fontSize?: FontSizesToken|array>, + * fontSizeAdjust?: FontSizeAdjustValue|array>, + * fontSmooth?: FontSmoothValue|array>, + * fontSmoothing?: FontSmoothingValue|array>, + * fontStretch?: FontStretchValue|array>, + * fontStyle?: FontStyleValue|array>, + * fontSynthesis?: FontSynthesisValue|array>, + * fontSynthesisPosition?: AnimationTimelineValue|array>, + * fontSynthesisSmallCaps?: AnimationTimelineValue|array>, + * fontSynthesisStyle?: AnimationTimelineValue|array>, + * fontSynthesisWeight?: AnimationTimelineValue|array>, + * fontVariant?: FontVariantValue|array>, + * fontVariantAlternates?: FontVariantAlternatesValue|array>, + * fontVariantCaps?: FontVariantCapsValue|array>, + * fontVariantEastAsian?: FontVariantEastAsianValue|array>, + * fontVariantEmoji?: FontVariantEmojiValue|array>, + * fontVariantLigatures?: FontVariantLigaturesValue|array>, + * fontVariantNumeric?: FontVariantNumericValue|array>, + * fontVariantPosition?: FontVariantPositionValue|array>, + * fontVariationSettings?: FontFeatureSettingsValue|array>, + * fontWeight?: FontWeightsToken|array>, + * forcedColorAdjust?: ForcedColorAdjustValue|array>, + * gap?: SpacingToken2|array>, + * glyphOrientationVertical?: AspectRatioValue|array>, + * gradientFrom?: ColorsToken|array>, + * gradientFromPosition?: int|float|string|array>, + * gradientTo?: ColorsToken|array>, + * gradientToPosition?: int|float|string|array>, + * gradientVia?: ColorsToken|array>, + * gradientViaPosition?: int|float|string|array>, + * grayscale?: int|float|string|array>, + * grid?: WebkitMaskImageValue|array>, + * gridArea?: AspectRatioValue|array>, + * gridAutoColumns?: GridAutoColumnsValue|array>, + * gridAutoFlow?: GridAutoFlowValue|array>, + * gridAutoRows?: GridAutoColumnsValue|array>, + * gridColumn?: AspectRatioValue|array>, + * gridColumnEnd?: AspectRatioValue|array>, + * gridColumnGap?: SpacingToken2|array>, + * gridColumnStart?: AspectRatioValue|array>, + * gridGap?: SpacingToken2|array>, + * gridRow?: AspectRatioValue|array>, + * gridRowEnd?: AspectRatioValue|array>, + * gridRowGap?: SpacingToken2|array>, + * gridRowStart?: AspectRatioValue|array>, + * gridTemplate?: WebkitMaskImageValue|array>, + * gridTemplateAreas?: WebkitMaskImageValue|array>, + * gridTemplateColumns?: GridTemplateColumnsValue|array>, + * gridTemplateRows?: GridTemplateColumnsValue|array>, + * h?: SizesToken|array>, + * hangingPunctuation?: HangingPunctuationValue|array>, + * height?: SizesToken|array>, + * hideBelow?: BreakpointsToken|array>, + * hideFrom?: BreakpointsToken|array>, + * hueRotate?: int|float|string|array>, + * hyphenateCharacter?: DurationsToken|array>, + * hyphenateLimitChars?: AspectRatioValue|array>, + * hyphens?: HyphensValue|array>, + * imageOrientation?: ImageOrientationValue|array>, + * imageRendering?: ImageRenderingValue|array>, + * imageResolution?: ImageResolutionValue|array>, + * imeMode?: ImeModeValue|array>, + * initialLetter?: InitialLetterValue|array>, + * initialLetterAlign?: InitialLetterAlignValue|array>, + * inlineSize?: SizesToken2|array>, + * inset?: SpacingToken|array>, + * insetBlock?: SpacingToken2|array>, + * insetBlockEnd?: SpacingToken2|array>, + * insetBlockStart?: SpacingToken2|array>, + * insetEnd?: SpacingToken2|array>, + * insetInline?: SpacingToken2|array>, + * insetInlineEnd?: SpacingToken2|array>, + * insetInlineStart?: SpacingToken2|array>, + * insetStart?: SpacingToken2|array>, + * insetX?: SpacingToken2|array>, + * insetY?: SpacingToken2|array>, + * interpolateSize?: InterpolateSizeValue|array>, + * invert?: int|float|string|array>, + * isolation?: IsolationValue|array>, + * justifyContent?: JustifyContentValue|array>, + * justifyItems?: JustifyItemsValue|array>, + * justifySelf?: JustifySelfValue|array>, + * justifyTracks?: JustifyContentValue|array>, + * left?: SpacingToken2|array>, + * letterSpacing?: InitialLetterValue|array>, + * lightingColor?: WebkitBorderBeforeColorValue|array>, + * lineBreak?: LineBreakValue|array>, + * lineClamp?: WebkitLineClampValue|array>, + * lineHeight?: InitialLetterValue|array>, + * lineHeightStep?: WebkitTextStrokeWidthValue|array>, + * listStyle?: ListStyleValue|array>, + * listStyleImage?: WebkitMaskImageValue|array>, + * listStylePosition?: ListStylePositionValue|array>, + * listStyleType?: WebkitMaskImageValue|array>, + * m?: SpacingToken|array>, + * margin?: SpacingToken|array>, + * marginBlock?: SpacingToken|array>, + * marginBlockEnd?: SpacingToken|array>, + * marginBlockStart?: SpacingToken|array>, + * marginBottom?: SpacingToken|array>, + * marginEnd?: SpacingToken|array>, + * marginInline?: SpacingToken|array>, + * marginInlineEnd?: SpacingToken|array>, + * marginInlineStart?: SpacingToken|array>, + * marginLeft?: SpacingToken|array>, + * marginRight?: SpacingToken|array>, + * marginStart?: SpacingToken|array>, + * marginTop?: SpacingToken|array>, + * marginTrim?: MarginTrimValue|array>, + * marginX?: SpacingToken|array>, + * marginY?: SpacingToken|array>, + * marker?: WebkitMaskImageValue|array>, + * markerEnd?: WebkitMaskImageValue|array>, + * markerMid?: WebkitMaskImageValue|array>, + * markerStart?: WebkitMaskImageValue|array>, + * mask?: MaskValue|array>, + * maskBorder?: MaskBorderValue|array>, + * maskBorderMode?: MaskBorderModeValue|array>, + * maskBorderOutset?: WebkitTextStrokeWidthValue|array>, + * maskBorderRepeat?: BorderImageRepeatValue|array>, + * maskBorderSlice?: WebkitTextStrokeWidthValue|array>, + * maskBorderSource?: WebkitMaskImageValue|array>, + * maskBorderWidth?: AspectRatioValue|array>, + * maskClip?: MaskClipValue|array>, + * maskComposite?: MaskCompositeValue|array>, + * maskImage?: WebkitMaskImageValue|array>, + * maskMode?: MaskModeValue|array>, + * maskOrigin?: MaskOriginValue|array>, + * maskPosition?: WebkitMaskPositionValue|array>, + * maskRepeat?: WebkitMaskRepeatValue|array>, + * maskSize?: WebkitMaskSizeValue|array>, + * maskType?: MaskBorderModeValue|array>, + * masonryAutoFlow?: MasonryAutoFlowValue|array>, + * mathDepth?: MathDepthValue|array>, + * mathShift?: MathShiftValue|array>, + * mathStyle?: MathShiftValue|array>, + * maxBlockSize?: SizesToken|array>, + * maxH?: SizesToken|array>, + * maxHeight?: SizesToken|array>, + * maxInlineSize?: SizesToken2|array>, + * maxLines?: WebkitLineClampValue|array>, + * maxW?: SizesToken2|array>, + * maxWidth?: SizesToken2|array>, + * mb?: SpacingToken|array>, + * me?: SpacingToken|array>, + * minBlockSize?: SizesToken|array>, + * minH?: SizesToken|array>, + * minHeight?: SizesToken|array>, + * minInlineSize?: SizesToken2|array>, + * minW?: SizesToken2|array>, + * minWidth?: SizesToken2|array>, + * mixBlendMode?: MixBlendModeValue|array>, + * ml?: SpacingToken|array>, + * mr?: SpacingToken|array>, + * ms?: SpacingToken|array>, + * mt?: SpacingToken|array>, + * mx?: SpacingToken|array>, + * my?: SpacingToken|array>, + * objectFit?: ObjectFitValue|array>, + * objectPosition?: WebkitMaskPositionValue|array>, + * offset?: OffsetValue|array>, + * offsetAnchor?: OffsetAnchorValue|array>, + * offsetDistance?: WebkitTextStrokeWidthValue|array>, + * offsetPath?: OffsetPathValue|array>, + * offsetPosition?: OffsetPositionValue|array>, + * offsetRotate?: OffsetRotateValue|array>, + * opacity?: WebkitTextStrokeWidthValue|array>, + * order?: WebkitTextStrokeWidthValue|array>, + * orphans?: WebkitTextStrokeWidthValue|array>, + * outline?: OutlineValue|array>, + * outlineColor?: ColorsToken|array>, + * outlineOffset?: SpacingToken2|array>, + * outlineStyle?: OutlineStyleValue|array>, + * outlineWidth?: WebkitBorderBeforeWidthValue|array>, + * overflow?: OverflowValue|array>, + * overflowAnchor?: AnimationTimelineValue|array>, + * overflowBlock?: OverflowBlockValue|array>, + * overflowClipBox?: OverflowClipBoxValue|array>, + * overflowClipMargin?: OverflowClipMarginValue|array>, + * overflowInline?: OverflowBlockValue|array>, + * overflowWrap?: OverflowWrapValue|array>, + * overflowX?: OverflowValue|array>, + * overflowY?: OverflowValue|array>, + * overlay?: AnimationTimelineValue|array>, + * overscrollBehavior?: OverscrollBehaviorValue|array>, + * overscrollBehaviorBlock?: OverscrollBehaviorValue|array>, + * overscrollBehaviorInline?: OverscrollBehaviorValue|array>, + * overscrollBehaviorX?: OverscrollBehaviorValue|array>, + * overscrollBehaviorY?: OverscrollBehaviorValue|array>, + * p?: SpacingToken2|array>, + * padding?: SpacingToken2|array>, + * paddingBlock?: SpacingToken2|array>, + * paddingBlockEnd?: SpacingToken2|array>, + * paddingBlockStart?: SpacingToken2|array>, + * paddingBottom?: SpacingToken2|array>, + * paddingEnd?: SpacingToken2|array>, + * paddingInline?: SpacingToken2|array>, + * paddingInlineEnd?: SpacingToken2|array>, + * paddingInlineStart?: SpacingToken2|array>, + * paddingLeft?: SpacingToken2|array>, + * paddingRight?: SpacingToken2|array>, + * paddingStart?: SpacingToken2|array>, + * paddingTop?: SpacingToken2|array>, + * paddingX?: SpacingToken2|array>, + * paddingY?: SpacingToken2|array>, + * page?: DurationsToken|array>, + * pageBreakAfter?: PageBreakAfterValue|array>, + * pageBreakBefore?: PageBreakAfterValue|array>, + * pageBreakInside?: PageBreakInsideValue|array>, + * paintOrder?: PaintOrderValue|array>, + * pb?: SpacingToken2|array>, + * pe?: SpacingToken2|array>, + * perspective?: WebkitLineClampValue|array>, + * perspectiveOrigin?: WebkitMaskPositionValue|array>, + * pl?: SpacingToken2|array>, + * placeContent?: AlignContentValue|array>, + * placeItems?: AlignItemsValue|array>, + * placeSelf?: AlignSelfValue|array>, + * pointerEvents?: PointerEventsValue|array>, + * pos?: PositionValue|array>, + * position?: PositionValue|array>, + * positionAnchor?: DurationsToken|array>, + * positionArea?: PositionAreaValue|array>, + * positionTry?: PositionTryValue|array>, + * positionTryFallbacks?: PositionTryValue|array>, + * positionTryOrder?: PositionTryOrderValue|array>, + * positionVisibility?: PositionVisibilityValue|array>, + * pr?: SpacingToken2|array>, + * printColorAdjust?: PrintColorAdjustValue|array>, + * ps?: SpacingToken2|array>, + * pt?: SpacingToken2|array>, + * px?: SpacingToken2|array>, + * py?: SpacingToken2|array>, + * quotes?: AnimationTimelineValue|array>, + * r?: WebkitTextStrokeWidthValue|array>, + * resize?: ResizeValue|array>, + * right?: SpacingToken2|array>, + * ring?: OutlineValue|array>, + * ringColor?: ColorsToken|array>, + * ringOffset?: SpacingToken2|array>, + * ringWidth?: WebkitBorderBeforeWidthValue|array>, + * rotate?: RotateValue|array>, + * rotateX?: int|float|string|array>, + * rotateY?: int|float|string|array>, + * rotateZ?: int|float|string|array>, + * rounded?: WebkitTextStrokeWidthValue|array>, + * roundedBottom?: int|float|string|array>, + * roundedBottomLeft?: WebkitTextStrokeWidthValue|array>, + * roundedBottomRight?: WebkitTextStrokeWidthValue|array>, + * roundedEnd?: int|float|string|array>, + * roundedEndEnd?: WebkitTextStrokeWidthValue|array>, + * roundedEndStart?: WebkitTextStrokeWidthValue|array>, + * roundedLeft?: int|float|string|array>, + * roundedRight?: int|float|string|array>, + * roundedStart?: int|float|string|array>, + * roundedStartEnd?: WebkitTextStrokeWidthValue|array>, + * roundedStartStart?: WebkitTextStrokeWidthValue|array>, + * roundedTop?: int|float|string|array>, + * roundedTopLeft?: WebkitTextStrokeWidthValue|array>, + * roundedTopRight?: WebkitTextStrokeWidthValue|array>, + * rowGap?: SpacingToken2|array>, + * rubyAlign?: RubyAlignValue|array>, + * rubyMerge?: RubyMergeValue|array>, + * rubyPosition?: RubyPositionValue|array>, + * rx?: WebkitTextStrokeWidthValue|array>, + * ry?: WebkitTextStrokeWidthValue|array>, + * saturate?: int|float|string|array>, + * scale?: BackdropFilterValue|array>, + * scaleX?: int|float|string|array>, + * scaleY?: int|float|string|array>, + * scrollBehavior?: ScrollBehaviorValue|array>, + * scrollMargin?: SpacingToken2|array>, + * scrollMarginBlock?: SpacingToken2|array>, + * scrollMarginBlockEnd?: SpacingToken2|array>, + * scrollMarginBlockStart?: SpacingToken2|array>, + * scrollMarginBottom?: SpacingToken2|array>, + * scrollMarginInline?: SpacingToken2|array>, + * scrollMarginInlineEnd?: SpacingToken2|array>, + * scrollMarginInlineStart?: SpacingToken2|array>, + * scrollMarginLeft?: SpacingToken2|array>, + * scrollMarginRight?: SpacingToken2|array>, + * scrollMarginTop?: SpacingToken2|array>, + * scrollMarginX?: SpacingToken2|array>, + * scrollMarginY?: SpacingToken2|array>, + * scrollPadding?: SpacingToken2|array>, + * scrollPaddingBlock?: SpacingToken2|array>, + * scrollPaddingBlockEnd?: SpacingToken2|array>, + * scrollPaddingBlockStart?: SpacingToken2|array>, + * scrollPaddingBottom?: SpacingToken2|array>, + * scrollPaddingInline?: SpacingToken2|array>, + * scrollPaddingInlineEnd?: SpacingToken2|array>, + * scrollPaddingInlineStart?: SpacingToken2|array>, + * scrollPaddingLeft?: SpacingToken2|array>, + * scrollPaddingRight?: SpacingToken2|array>, + * scrollPaddingTop?: SpacingToken2|array>, + * scrollPaddingX?: SpacingToken2|array>, + * scrollPaddingY?: SpacingToken2|array>, + * scrollSnapAlign?: ScrollSnapAlignValue|array>, + * scrollSnapCoordinate?: ScrollSnapCoordinateValue|array>, + * scrollSnapDestination?: WebkitMaskPositionValue|array>, + * scrollSnapMargin?: SpacingToken2|array>, + * scrollSnapMarginBottom?: SpacingToken2|array>, + * scrollSnapMarginLeft?: SpacingToken2|array>, + * scrollSnapMarginRight?: SpacingToken2|array>, + * scrollSnapMarginTop?: SpacingToken2|array>, + * scrollSnapPointsX?: WebkitMaskImageValue|array>, + * scrollSnapPointsY?: WebkitMaskImageValue|array>, + * scrollSnapStop?: ScrollSnapStopValue|array>, + * scrollSnapStrictness?: ScrollSnapStrictnessValue|array>, + * scrollSnapType?: ScrollSnapTypeValue|array>, + * scrollSnapTypeX?: ScrollSnapTypeXValue|array>, + * scrollSnapTypeY?: ScrollSnapTypeXValue|array>, + * scrollTimeline?: WebkitMaskImageValue|array>, + * scrollTimelineAxis?: ScrollTimelineAxisValue|array>, + * scrollTimelineName?: WebkitMaskImageValue|array>, + * scrollbar?: ScrollbarValue|array>, + * scrollbarColor?: ColorsToken|array>, + * scrollbarGutter?: ScrollbarGutterValue|array>, + * scrollbarWidth?: SizesToken4|array>, + * sepia?: int|float|string|array>, + * shadow?: WebkitMaskImageValue|array>, + * shadowColor?: ColorsToken|array>, + * shapeImageThreshold?: WebkitTextStrokeWidthValue|array>, + * shapeMargin?: WebkitTextStrokeWidthValue|array>, + * shapeOutside?: ShapeOutsideValue|array>, + * shapeRendering?: ShapeRenderingValue|array>, + * spaceX?: SpacingToken|array>, + * spaceY?: SpacingToken|array>, + * srOnly?: bool|string|array>, + * start?: SpacingToken2|array>, + * stopColor?: WebkitBorderBeforeColorValue|array>, + * stopOpacity?: WebkitTextStrokeWidthValue|array>, + * stroke?: ColorsToken|array>, + * strokeDasharray?: WebkitLineClampValue|array>, + * strokeDashoffset?: WebkitTextStrokeWidthValue|array>, + * strokeLinecap?: StrokeLinecapValue|array>, + * strokeLinejoin?: StrokeLinejoinValue|array>, + * strokeMiterlimit?: WebkitTextStrokeWidthValue|array>, + * strokeOpacity?: WebkitTextStrokeWidthValue|array>, + * strokeWidth?: WebkitTextStrokeWidthValue|array>, + * tabSize?: WebkitTextStrokeWidthValue|array>, + * tableLayout?: TableLayoutValue|array>, + * textAlign?: TextAlignValue|array>, + * textAlignLast?: TextAlignLastValue|array>, + * textAnchor?: TextAnchorValue|array>, + * textBox?: TextBoxValue|array>, + * textBoxEdge?: TextBoxEdgeValue|array>, + * textBoxTrim?: TextBoxTrimValue|array>, + * textCombineUpright?: TextCombineUprightValue|array>, + * textDecoration?: TextDecorationValue|array>, + * textDecorationColor?: ColorsToken|array>, + * textDecorationLine?: TextDecorationLineValue|array>, + * textDecorationSkip?: TextDecorationSkipValue|array>, + * textDecorationSkipInk?: TextDecorationSkipInkValue|array>, + * textDecorationStyle?: TextDecorationStyleValue|array>, + * textDecorationThickness?: TextDecorationThicknessValue|array>, + * textEmphasis?: TextEmphasisValue|array>, + * textEmphasisColor?: ColorsToken|array>, + * textEmphasisPosition?: TextEmphasisPositionValue|array>, + * textEmphasisStyle?: TextEmphasisStyleValue|array>, + * textGradient?: GradientsToken|array>, + * textIndent?: SpacingToken2|array>, + * textJustify?: TextJustifyValue|array>, + * textOrientation?: TextOrientationValue|array>, + * textOverflow?: TextOverflowValue|array>, + * textRendering?: TextRenderingValue|array>, + * textShadow?: WebkitMaskImageValue|array>, + * textShadowColor?: ColorsToken|array>, + * textSizeAdjust?: AnimationTimelineValue|array>, + * textSpacingTrim?: TextSpacingTrimValue|array>, + * textTransform?: TextTransformValue|array>, + * textUnderlineOffset?: AspectRatioValue|array>, + * textUnderlinePosition?: TextUnderlinePositionValue|array>, + * textWrap?: TextWrapValue|array>, + * textWrapMode?: TextWrapModeValue|array>, + * textWrapStyle?: TextWrapStyleValue|array>, + * timelineScope?: WebkitMaskImageValue|array>, + * top?: SpacingToken2|array>, + * touchAction?: TouchActionValue|array>, + * transform?: WebkitMaskImageValue|array>, + * transformBox?: TransformBoxValue|array>, + * transformOrigin?: WebkitMaskPositionValue|array>, + * transformStyle?: TransformStyleValue|array>, + * transition?: TransitionValue|array>, + * transitionBehavior?: TransitionBehaviorValue|array>, + * transitionDelay?: AllValue|array>, + * transitionDuration?: AllValue|array>, + * transitionProperty?: TransitionPropertyValue|array>, + * transitionTimingFunction?: EasingsToken|array>, + * translate?: RotateValue|array>, + * translateX?: SpacingToken3|array>, + * translateY?: SpacingToken3|array>, + * translateZ?: SpacingToken3|array>, + * truncate?: bool|string|array>, + * unicodeBidi?: UnicodeBidiValue|array>, + * userSelect?: UserSelectValue|array>, + * vectorEffect?: VectorEffectValue|array>, + * verticalAlign?: VerticalAlignValue|array>, + * viewTimeline?: WebkitMaskImageValue|array>, + * viewTimelineAxis?: ScrollTimelineAxisValue|array>, + * viewTimelineInset?: AspectRatioValue|array>, + * viewTimelineName?: WebkitMaskImageValue|array>, + * viewTransitionName?: ViewTransitionNameValue|array>, + * visibility?: VisibilityValue|array>, + * w?: SizesToken2|array>, + * whiteSpace?: WhiteSpaceValue|array>, + * whiteSpaceCollapse?: WhiteSpaceCollapseValue|array>, + * widows?: WebkitTextStrokeWidthValue|array>, + * width?: SizesToken2|array>, + * willChange?: WillChangeValue|array>, + * wordBreak?: WordBreakValue|array>, + * wordSpacing?: InitialLetterValue|array>, + * wordWrap?: WordWrapValue|array>, + * writingMode?: WritingModeValue|array>, + * x?: SpacingToken3|array>, + * y?: SpacingToken3|array>, + * z?: SpacingToken3|array>, + * zIndex?: AspectRatioValue|array>, + * zoom?: ZoomValue|array>, + * '@/2xl'?: array, + * '@/3xl'?: array, + * '@/4xl'?: array, + * '@/5xl'?: array, + * '@/6xl'?: array, + * '@/7xl'?: array, + * '@/8xl'?: array, + * '@/lg'?: array, + * '@/md'?: array, + * '@/sm'?: array, + * '@/xl'?: array, + * '@/xs'?: array, + * _active?: array, + * _after?: array, + * _atValue?: array, + * _autofill?: array, + * _backdrop?: array, + * _before?: array, + * _checked?: array, + * _closed?: array, + * _complete?: array, + * _current?: array, + * _currentPage?: array, + * _currentStep?: array, + * _dark?: array, + * _default?: array, + * _disabled?: array, + * _dragging?: array, + * _empty?: array, + * _enabled?: array, + * _even?: array, + * _expanded?: array, + * _file?: array, + * _first?: array, + * _firstLetter?: array, + * _firstLine?: array, + * _firstOfType?: array, + * _focus?: array, + * _focusVisible?: array, + * _focusWithin?: array, + * _fullscreen?: array, + * _grabbed?: array, + * _groupActive?: array, + * _groupChecked?: array, + * _groupDisabled?: array, + * _groupExpanded?: array, + * _groupFocus?: array, + * _groupFocusVisible?: array, + * _groupFocusWithin?: array, + * _groupHover?: array, + * _groupInvalid?: array, + * _hidden?: array, + * _highContrast?: array, + * _highlighted?: array, + * _horizontal?: array, + * _hover?: array, + * _icon?: array, + * _inRange?: array, + * _incomplete?: array, + * _indeterminate?: array, + * _invalid?: array, + * _invertedColors?: array, + * _landscape?: array, + * _last?: array, + * _lastOfType?: array, + * _lessContrast?: array, + * _light?: array, + * _loading?: array, + * _ltr?: array, + * _marker?: array, + * _moreContrast?: array, + * _motionReduce?: array, + * _motionSafe?: array, + * _noscript?: array, + * _now?: array, + * _odd?: array, + * _only?: array, + * _onlyOfType?: array, + * _open?: array, + * _optional?: array, + * _osDark?: array, + * _osLight?: array, + * _outOfRange?: array, + * _overValue?: array, + * _peerActive?: array, + * _peerChecked?: array, + * _peerDisabled?: array, + * _peerExpanded?: array, + * _peerFocus?: array, + * _peerFocusVisible?: array, + * _peerFocusWithin?: array, + * _peerHover?: array, + * _peerInvalid?: array, + * _peerPlaceholderShown?: array, + * _placeholder?: array, + * _placeholderShown?: array, + * _portrait?: array, + * _pressed?: array, + * _print?: array, + * _rangeEnd?: array, + * _rangeStart?: array, + * _readOnly?: array, + * _readWrite?: array, + * _required?: array, + * _rtl?: array, + * _scrollbar?: array, + * _scrollbarThumb?: array, + * _scrollbarTrack?: array, + * _selected?: array, + * _selection?: array, + * _starting?: array, + * _target?: array, + * _today?: array, + * _topmost?: array, + * _unavailable?: array, + * _underValue?: array, + * _valid?: array, + * _vertical?: array, + * _visited?: array, + * md?: array, + * mdDown?: array, + * mdOnly?: array, + * sm?: array, + * smDown?: array, + * smOnly?: array, + * smToMd?: array, + * } + */ +final class CssReference +{ +} diff --git a/src/Css/tests/Fixtures/Reference/usage.php b/src/Css/tests/Fixtures/Reference/usage.php new file mode 100644 index 00000000000..82afccd9811 --- /dev/null +++ b/src/Css/tests/Fixtures/Reference/usage.php @@ -0,0 +1,28 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Fixtures\Reference; + +use Symfony\UX\Css\Twig\CssRuntime; + +function render(CssRuntime $runtime): void +{ + echo $runtime->css(['color' => 'primary', 'p' => 'md', '_hover' => ['bg' => 'blue.500'], 'md' => ['p' => 'sm']]); + echo $runtime->css(['color' => 'anything', 'display' => 'flex', 'fontSize' => '2xl']); + echo $runtime->css(['zIndex' => 10, 'opacity' => 0.5, 'p' => ['sm', 'md'], 'color' => ['base' => 'primary']]); + echo $runtime->css(['_hover' => ['_focus' => ['color' => ['deeper' => 'than the typed level']]]]); + echo $runtime->css(null); + echo $runtime->css(['color' => ['base' => 'primary', '_hover' => ['base' => 'blue.500', 'md' => 'primary']]]); + echo $runtime->css(['p' => ['base' => ['md', 'sm']]]); + echo $runtime->css(['color' => ['_hover' => ['_focus' => 'primary']]]); + echo $runtime->css(['color' => new \stdClass()]); // error + echo $runtime->css(['color' => ['base' => new \stdClass()]]); // error +} diff --git a/src/Css/tests/Fixtures/TestKernel.php b/src/Css/tests/Fixtures/TestKernel.php new file mode 100644 index 00000000000..46e35f8db21 --- /dev/null +++ b/src/Css/tests/Fixtures/TestKernel.php @@ -0,0 +1,115 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Fixtures; + +use Symfony\Bundle\FrameworkBundle\FrameworkBundle; +use Symfony\Bundle\FrameworkBundle\Kernel\MicroKernelTrait; +use Symfony\Bundle\TwigBundle\TwigBundle; +use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface; +use Symfony\Component\DependencyInjection\ContainerBuilder; +use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator; +use Symfony\Component\Filesystem\Filesystem; +use Symfony\Component\HttpKernel\Kernel; +use Symfony\UX\Css\UXCssBundle; + +final class TestKernel extends Kernel implements CompilerPassInterface +{ + use MicroKernelTrait; + + private static ?string $temporaryRoot = null; + + /** + * @param array $uxCssConfig + */ + public function __construct( + private readonly array $uxCssConfig = [], + string $environment = 'test', + bool $debug = true, + private readonly ?string $projectDir = null, + private ?string $buildDir = null, + ) { + parent::__construct($environment, $debug); + } + + public static function temporaryDirectory(): string + { + if (null === self::$temporaryRoot) { + self::$temporaryRoot = sys_get_temp_dir().'/ux_css_tests/'.getmypid(); + register_shutdown_function(static fn () => new Filesystem()->remove(self::$temporaryRoot)); + } + + return self::$temporaryRoot.'/'.uniqid('', true); + } + + public function registerBundles(): iterable + { + yield new FrameworkBundle(); + yield new TwigBundle(); + yield new UXCssBundle(); + } + + public function getProjectDir(): string + { + return $this->projectDir ?? $this->getBuildDir().'/project'; + } + + public function getCacheDir(): string + { + return $this->getBuildDir(); + } + + public function getBuildDir(): string + { + return $this->buildDir ??= self::temporaryDirectory(); + } + + protected function getContainerClass(): string + { + // a config change rebuilds the container in the same cache directory, as a YAML change does in an application + return parent::getContainerClass().hash('xxh32', serialize($this->uxCssConfig)); + } + + public function getLogDir(): string + { + return $this->getBuildDir().'/log'; + } + + protected function configureContainer(ContainerConfigurator $container): void + { + $framework = ['secret' => 'secret', 'test' => true]; + if (null !== $this->projectDir) { + $framework['asset_mapper'] = ['paths' => []]; + } + $templates = null !== $this->projectDir ? $this->projectDir.'/templates' : __DIR__.'/templates'; + + $container->extension('framework', $framework); + $container->extension('twig', ['default_path' => $templates, 'strict_variables' => true]); + $container->extension('ux_css', $this->uxCssConfig); + $container->services()->set('logger', TestLogger::class)->public(); + } + + public function process(ContainerBuilder $container): void + { + $ids = [ + 'ux_css.class_name_generator', + 'ux_css.engine', + 'ux_css.css_generator', + 'ux_css.twig.node_visitor', + 'ux_css.stylesheet_dumper', + 'twig', + ]; + + foreach ($ids as $id) { + $container->getDefinition($id)->setPublic(true); + } + } +} diff --git a/src/Css/tests/Fixtures/TestLogger.php b/src/Css/tests/Fixtures/TestLogger.php new file mode 100644 index 00000000000..9a3b5392614 --- /dev/null +++ b/src/Css/tests/Fixtures/TestLogger.php @@ -0,0 +1,38 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Fixtures; + +use Psr\Log\AbstractLogger; + +final class TestLogger extends AbstractLogger +{ + /** + * @var list}> + */ + private array $logs = []; + + public function log($level, $message, array $context = []): void + { + $this->logs[] = [$level, (string) $message, $context]; + } + + /** + * @return list}> + */ + public function cleanLogs(): array + { + $logs = $this->logs; + $this->logs = []; + + return $logs; + } +} diff --git a/src/Css/tests/Fixtures/invalid_templates/unknown_property.html.twig b/src/Css/tests/Fixtures/invalid_templates/unknown_property.html.twig new file mode 100644 index 00000000000..2790cefb556 --- /dev/null +++ b/src/Css/tests/Fixtures/invalid_templates/unknown_property.html.twig @@ -0,0 +1,5 @@ +
+

+ +

+
diff --git a/src/Css/tests/Fixtures/templates/.gitkeep b/src/Css/tests/Fixtures/templates/.gitkeep new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/Css/tests/Golden/OutOfScopeException.php b/src/Css/tests/Golden/OutOfScopeException.php new file mode 100644 index 00000000000..7823f02f823 --- /dev/null +++ b/src/Css/tests/Golden/OutOfScopeException.php @@ -0,0 +1,16 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +final class OutOfScopeException extends \LogicException +{ +} diff --git a/src/Css/tests/Golden/PandaCase.php b/src/Css/tests/Golden/PandaCase.php new file mode 100644 index 00000000000..ceb294417ea --- /dev/null +++ b/src/Css/tests/Golden/PandaCase.php @@ -0,0 +1,79 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +final class PandaCase +{ + /** + * @param list $inputs + * @param array $expected + */ + public function __construct( + public readonly string $id, + public readonly string $kind, + public readonly string $config, + public readonly array $inputs, + public readonly array $expected, + public readonly mixed $userConfig, + public readonly ?array $configPatch, + public readonly ?string $unsupported, + public readonly bool $expectTypeError, + public readonly bool $undefinedValues, + public readonly string $sourceFile, + public readonly ?int $sourceLine, + ) { + } + + /** + * @param array $data + */ + public static function fromArray(array $data): self + { + return new self( + $data['id'], + $data['kind'], + $data['config'], + $data['inputs'] ?? [], + $data['expected'] ?? [], + $data['userConfig'] ?? null, + $data['configPatch'] ?? null, + $data['unsupported'] ?? null, + $data['expectTypeError'] ?? false, + $data['undefinedValues'] ?? false, + $data['source']['file'], + $data['source']['line'] ?? null, + ); + } + + public function matches(string $actual): bool + { + return $this->normalize($actual) === $this->normalize($this->expectedOutput()); + } + + /** + * Panda re-parses the token CSS it writes several times, which leaves random indentation and no last semicolon before some closing braces. + */ + public function normalize(string $css): string + { + return 'token-css' === $this->kind ? preg_replace('/;?\s*\}/', '}', $css) : $css; + } + + public function expectedOutput(): string + { + return 'codegen-css' === $this->kind ? $this->expected['className'] : $this->expected['css']; + } + + public function sourceLocation(): string + { + return $this->sourceFile.':'.($this->sourceLine ?? '?'); + } +} diff --git a/src/Css/tests/Golden/PandaCaseLoader.php b/src/Css/tests/Golden/PandaCaseLoader.php new file mode 100644 index 00000000000..e978daa0619 --- /dev/null +++ b/src/Css/tests/Golden/PandaCaseLoader.php @@ -0,0 +1,92 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +final class PandaCaseLoader +{ + /** + * @var array> + */ + private array $configs = []; + + public function __construct( + private readonly string $directory, + ) { + } + + /** + * @return iterable + */ + public function cases(): iterable + { + $files = glob($this->directory.'/cases/*.json') ?: []; + sort($files); + + foreach ($files as $file) { + foreach (json_decode(file_get_contents($file), true, flags: \JSON_THROW_ON_ERROR)['cases'] as $data) { + $case = PandaCase::fromArray($data); + + yield $case->id => $case; + } + } + } + + /** + * @return array + */ + public function config(string $name): array + { + return $this->configs[$name] ??= json_decode( + file_get_contents($this->directory.'/configs/'.$name.'.json'), + true, + flags: \JSON_THROW_ON_ERROR, + ); + } + + /** + * @return array + */ + public function configFor(PandaCase $case): array + { + $config = $this->config($case->config); + + return null === $case->configPatch ? $config : self::applyConfigPatch($config, $case->configPatch); + } + + /** + * @param array $config + * @param array $patch null removes a key, ['$value' => ...] sets it, any other array patches it, ['$order' => [...]] lists the keys in their order + * + * @return array + */ + public static function applyConfigPatch(array $config, array $patch): array + { + foreach ($patch as $key => $value) { + if ('$order' === $key) { + continue; + } + if (null === $value) { + unset($config[$key]); + } elseif (\array_key_exists('$value', $value)) { + $config[$key] = $value['$value']; + } else { + $config[$key] = self::applyConfigPatch(\is_array($config[$key] ?? null) ? $config[$key] : [], $value); + } + } + + if (isset($patch['$order'])) { + $config = array_replace(array_fill_keys($patch['$order'], null), $config); + } + + return $config; + } +} diff --git a/src/Css/tests/Golden/PandaCaseLoaderTest.php b/src/Css/tests/Golden/PandaCaseLoaderTest.php new file mode 100644 index 00000000000..e6354433f79 --- /dev/null +++ b/src/Css/tests/Golden/PandaCaseLoaderTest.php @@ -0,0 +1,82 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\TestCase; + +final class PandaCaseLoaderTest extends TestCase +{ + public function testPerTestConfigsArePatchedOntoTheBaseConfig(): void + { + $id = 'fixture::packages/core/__tests__/rule-processor.test.ts::js to css > at-rules pseudo conditions sorting::1'; + $loader = new PandaCaseLoader(__DIR__.'/../Fixtures/Panda'); + $case = iterator_to_array($loader->cases())[$id]; + + $config = $loader->configFor($case); + $baseConfig = $loader->config('fixture'); + + $this->assertSame('&[data-attr="custom"]', $config['conditions']['custom']); + $this->assertSame($baseConfig['conditions']['hover'], $config['conditions']['hover']); + } + + public function testConfigPatchRemovesNullKeysSetsValuesAndRecurses(): void + { + $config = ['a' => ['b' => 1, 'c' => 2], 'e' => [1, 2], 'f' => 6]; + $patch = [ + 'a' => ['b' => null, 'c' => ['$value' => 3], 'd' => ['$value' => [0 => 'x']]], + 'e' => ['$value' => [5]], + 'f' => null, + ]; + + $patched = PandaCaseLoader::applyConfigPatch($config, $patch); + + $this->assertSame(['a' => ['c' => 3, 'd' => [0 => 'x']], 'e' => [5]], $patched); + } + + public function testConfigPatchRestoresTheKeyOrder(): void + { + $config = ['tokens' => ['borders' => ['a' => 1], 'colors' => ['b' => 2]]]; + $patch = [ + 'tokens' => [ + 'shadows' => ['$value' => ['c' => 3]], + '$order' => ['colors', 'shadows', 'borders'], + ], + ]; + + $patched = PandaCaseLoader::applyConfigPatch($config, $patch); + + $this->assertSame( + ['tokens' => ['colors' => ['b' => 2], 'shadows' => ['c' => 3], 'borders' => ['a' => 1]]], + $patched, + ); + } + + public function testTypeErrorsExpectedInsideTheCallAreRecorded(): void + { + $id = 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > using inline token helper - in value::1'; + $loader = new PandaCaseLoader(__DIR__.'/../Fixtures/Panda'); + + $case = iterator_to_array($loader->cases())[$id]; + + $this->assertTrue($case->expectTypeError); + } + + public function testTypeErrorsExpectedOnTheCallLineAreRecorded(): void + { + $id = 'strict-tokens::sandbox/codegen/__tests__/scenarios/strict-tokens.test.ts::css > native CSS prop and value::6'; + $loader = new PandaCaseLoader(__DIR__.'/../Fixtures/Panda'); + + $case = iterator_to_array($loader->cases())[$id]; + + $this->assertTrue($case->expectTypeError); + } +} diff --git a/src/Css/tests/Golden/PandaCaseRunner.php b/src/Css/tests/Golden/PandaCaseRunner.php new file mode 100644 index 00000000000..ac972752dfe --- /dev/null +++ b/src/Css/tests/Golden/PandaCaseRunner.php @@ -0,0 +1,121 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use Symfony\UX\Css\Engine\ClassNameGenerator; +use Symfony\UX\Css\Engine\Engine; +use Symfony\UX\Css\Engine\Preset\BaseTransforms; +use Symfony\UX\Css\Engine\StaticCss; +use Symfony\UX\Css\Exception\UnsupportedStyleException; + +final class PandaCaseRunner +{ + /** + * @var array + */ + private array $classNameGenerators = []; + + /** + * @var array + */ + private array $engines = []; + + public function __construct( + private readonly PandaCaseLoader $loader, + ) { + } + + /** + * @throws UnsupportedStyleException when the case relies on a feature the engine does not support yet + * @throws OutOfScopeException when the case relies on a feature the spec keeps out of v1 + */ + public function run(PandaCase $case): string + { + if ('codegen-css' === $case->kind) { + return $this->generateClassNames($case); + } + + $config = $this->loader->configFor($case); + if ('template-literal' === ($config['syntax'] ?? null)) { + throw new OutOfScopeException('The template literal syntax has no Twig equivalent: css() takes a hash.'); + } + $hash = $config['hash'] ?? false; + if (true === $hash || (\is_array($hash) && ($hash['className'] ?? false))) { + throw new OutOfScopeException('Hashed class names are out of v1.'); + } + + $engine = $this->engines[$case->config.':'.md5(serialize($case->configPatch))] ??= $this->createEngine($config); + if ('token-css' === $case->kind) { + if ([] !== ($config['themes'] ?? [])) { + throw new OutOfScopeException('Panda themes are out of v1.'); + } + + return $engine->stylesheet()->render([], $engine->tokenCss()->nodes()); + } + + $inputs = $case->inputs; + if ('static-css' === $case->kind) { + $inputs = new StaticCss($engine)->styles($case->inputs[0]['css'] ?? []); + } + + $entries = []; + foreach ($inputs as $input) { + if (!\is_array($input)) { + throw new UnsupportedStyleException('Only style objects are supported.'); + } + foreach ($engine->encoder()->encode($input) as $entry) { + if (\in_array($entry->property, ['textStyle', 'layerStyle', 'animationStyle'], true)) { + throw new OutOfScopeException('Text styles and layer styles are out of v1.'); + } + $entries[$entry->hash()] ??= $entry; + } + } + + return $engine->stylesheet()->render($engine->decoder()->decode(array_values($entries))); + } + + private function generateClassNames(PandaCase $case): string + { + $styles = []; + foreach ($case->inputs as $input) { + foreach (\is_array($input) && array_is_list($input) ? $input : [$input] as $style) { + if (\is_array($style) && [] !== $style && !array_is_list($style)) { + $styles[] = $style; + } + } + } + if (\count($styles) > 1) { + throw new OutOfScopeException('Merging several style objects in one css() call is out of v1.'); + } + + $generator = $this->classNameGenerators[$case->config] ??= ClassNameGenerator::fromPandaConfig( + $this->loader->config($case->config), + ); + + return $generator->generate($styles[0] ?? []); + } + + /** + * @param array $config + */ + private function createEngine(array $config): Engine + { + $transforms = BaseTransforms::all(); + foreach ($config['utilities'] ?? [] as $property => $utility) { + if ($utility['transform']['custom'] ?? false) { + $transforms[$property] = static fn () => throw new OutOfScopeException('Utilities with custom transforms are out of v1.'); + } + } + + return new Engine($config, $transforms); + } +} diff --git a/src/Css/tests/Golden/PandaCaseTest.php b/src/Css/tests/Golden/PandaCaseTest.php new file mode 100644 index 00000000000..5bc656db638 --- /dev/null +++ b/src/Css/tests/Golden/PandaCaseTest.php @@ -0,0 +1,47 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\TestCase; + +final class PandaCaseTest extends TestCase +{ + public function testTokenCssIgnoresTheWhitespaceAndLastSemicolonBeforeAClosingBrace(): void + { + $expectedCss = "@layer tokens {\n .dark {\n --a: red\n }\n }\n}"; + $case = self::createCase('token-css', $expectedCss); + + $this->assertTrue($case->matches("@layer tokens {\n .dark {\n --a: red;\n}\n}\n}")); + $this->assertFalse($case->matches("@layer tokens {\n .dark {\n --a: blue;\n}\n}\n}")); + $this->assertFalse($case->matches("@layer tokens {\n .light {\n --a: red;\n}\n}\n}")); + } + + public function testOtherCasesMustMatchExactly(): void + { + $expectedCss = "@layer utilities {\n .c_red {\n color: red;\n}\n}"; + $case = self::createCase('rule-processor', $expectedCss); + + $this->assertTrue($case->matches("@layer utilities {\n .c_red {\n color: red;\n}\n}")); + $this->assertFalse($case->matches("@layer utilities {\n .c_red {\n color: red\n}\n}")); + } + + private static function createCase(string $kind, string $css): PandaCase + { + return PandaCase::fromArray([ + 'id' => 'id', + 'kind' => $kind, + 'config' => 'fixture', + 'expected' => ['css' => $css], + 'source' => ['file' => 'file.test.ts'], + ]); + } +} diff --git a/src/Css/tests/Golden/PandaDefaultTokensTest.php b/src/Css/tests/Golden/PandaDefaultTokensTest.php new file mode 100644 index 00000000000..2b88c3232f1 --- /dev/null +++ b/src/Css/tests/Golden/PandaDefaultTokensTest.php @@ -0,0 +1,44 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\DependencyInjection\PandaConfigConverter; +use Symfony\UX\Css\Engine\Engine; + +final class PandaDefaultTokensTest extends TestCase +{ + private const DEFAULT_TOKENS = __DIR__.'/../../resources/panda-tokens.json'; + private const PANDA_TOKENS = __DIR__.'/../Fixtures/Panda/tokens.json'; + + public function testTheDefaultTokensHaveTheValuesPandaGivesThem(): void + { + $defaults = json_decode(file_get_contents(self::DEFAULT_TOKENS), true, flags: \JSON_THROW_ON_ERROR); + $config = ['tokens' => $defaults['tokens'], 'semantic_tokens' => [], 'conditions' => [], 'breakpoints' => []]; + $tokens = Engine::fromProjectConfig(PandaConfigConverter::convert($config))->tokens(); + $expected = json_decode(file_get_contents(self::PANDA_TOKENS), true, flags: \JSON_THROW_ON_ERROR)['values']; + + $compared = 0; + foreach ($expected as $name => $value) { + $category = explode('.', (string) $name)[0]; + $ours = $tokens->getValue((string) $name); + if (!\in_array($category, PandaConfigConverter::CATEGORIES, true) || null === $ours) { + continue; + } + + $this->assertSame($value, $ours, $name); + ++$compared; + } + + $this->assertGreaterThan(400, $compared); + } +} diff --git a/src/Css/tests/Golden/PandaExpectations.php b/src/Css/tests/Golden/PandaExpectations.php new file mode 100644 index 00000000000..14451245339 --- /dev/null +++ b/src/Css/tests/Golden/PandaExpectations.php @@ -0,0 +1,84 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +final class PandaExpectations +{ + /** + * @var array + */ + private readonly array $passingIndex; + + /** + * @param list $passing + * @param array $skipped reasons, indexed by case id + */ + public function __construct( + public readonly array $passing, + public readonly array $skipped, + ) { + $this->passingIndex = array_fill_keys($passing, true); + } + + public static function load(string $file): self + { + $data = require $file; + + return new self($data['passing'], $data['skipped']); + } + + public function mustPass(string $id): bool + { + return isset($this->passingIndex[$id]); + } + + public function skipReason(string $id): ?string + { + return $this->skipped[$id] ?? null; + } + + public function dump(string $file): void + { + $passing = $this->passing; + sort($passing); + $skipped = $this->skipped; + ksort($skipped); + + $lines = [ + '', + ' *', + ' * For the full copyright and license information, please view the LICENSE', + ' * file that was distributed with this source code.', + ' */', + '', + 'return [', + " 'passing' => [", + ]; + foreach ($passing as $id) { + $lines[] = ' '.var_export($id, true).','; + } + $lines[] = ' ],'; + $lines[] = " 'skipped' => ["; + foreach ($skipped as $id => $reason) { + $lines[] = ' '.var_export($id, true).' => '.var_export($reason, true).','; + } + $lines[] = ' ],'; + $lines[] = '];'; + + file_put_contents($file, implode("\n", $lines)."\n"); + } +} diff --git a/src/Css/tests/Golden/PandaExpectationsTest.php b/src/Css/tests/Golden/PandaExpectationsTest.php new file mode 100644 index 00000000000..9b9c3dbd1ec --- /dev/null +++ b/src/Css/tests/Golden/PandaExpectationsTest.php @@ -0,0 +1,43 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\TestCase; + +final class PandaExpectationsTest extends TestCase +{ + public function testDumpIsSortedAndLoadsBack(): void + { + $file = tempnam(sys_get_temp_dir(), 'ux-css-expectations'); + new PandaExpectations(['b', 'a'], ['z' => 'later', 'y' => "it's out of v1"])->dump($file); + + $expectations = PandaExpectations::load($file); + unlink($file); + + $this->assertSame(['a', 'b'], $expectations->passing); + $this->assertSame(['y' => "it's out of v1", 'z' => 'later'], $expectations->skipped); + $this->assertTrue($expectations->mustPass('a')); + $this->assertFalse($expectations->mustPass('y')); + $this->assertSame('later', $expectations->skipReason('z')); + $this->assertNull($expectations->skipReason('a')); + } + + public function testDumpingTheCommittedExpectationsLeavesThemUnchanged(): void + { + $committed = __DIR__.'/../Fixtures/Panda/expectations.php'; + $file = tempnam(sys_get_temp_dir(), 'ux-css-expectations'); + PandaExpectations::load($committed)->dump($file); + + $this->assertFileEquals($committed, $file); + unlink($file); + } +} diff --git a/src/Css/tests/Golden/PandaGoldenTest.php b/src/Css/tests/Golden/PandaGoldenTest.php new file mode 100644 index 00000000000..ef3f3f6f323 --- /dev/null +++ b/src/Css/tests/Golden/PandaGoldenTest.php @@ -0,0 +1,93 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Exception\UnsupportedStyleException; + +final class PandaGoldenTest extends TestCase +{ + private const FIXTURES_DIR = __DIR__.'/../Fixtures/Panda'; + + private static ?PandaCaseLoader $loader = null; + private static ?PandaExpectations $expectations = null; + private static ?PandaCaseRunner $runner = null; + + public static function provideCases(): iterable + { + foreach (self::loader()->cases() as $id => $case) { + yield $id => [$case]; + } + } + + #[DataProvider('provideCases')] + public function testOutputIsIdenticalToPanda(PandaCase $case): void + { + if (null !== $case->unsupported) { + $this->markTestSkipped('Recorded as unsupported: '.$case->unsupported); + } + if (null !== $reason = self::expectations()->skipReason($case->id)) { + $this->markTestSkipped($reason); + } + + $mustPass = self::expectations()->mustPass($case->id); + + try { + $actual = self::runner()->run($case); + } catch (OutOfScopeException $e) { + if ($mustPass) { + throw $e; + } + $this->markTestSkipped('Out of v1: '.$e->getMessage()); + } catch (UnsupportedStyleException $e) { + if ($mustPass) { + throw $e; + } + $this->markTestIncomplete('Not ported yet: '.$e->getMessage()); + } + + if (!$mustPass && !$case->matches($actual)) { + $this->markTestIncomplete('Output differs from Panda, see '.$case->sourceLocation()); + } + + $this->assertSame( + $case->normalize($case->expectedOutput()), + $case->normalize($actual), + 'Panda source: '.$case->sourceLocation(), + ); + } + + public function testExpectationsOnlyReferenceRecordedCases(): void + { + $ids = array_keys(iterator_to_array(self::loader()->cases())); + $expectations = self::expectations(); + + $this->assertSame([], array_values(array_diff($expectations->passing, $ids))); + $this->assertSame([], array_values(array_diff(array_keys($expectations->skipped), $ids))); + } + + private static function loader(): PandaCaseLoader + { + return self::$loader ??= new PandaCaseLoader(self::FIXTURES_DIR); + } + + private static function runner(): PandaCaseRunner + { + return self::$runner ??= new PandaCaseRunner(self::loader()); + } + + private static function expectations(): PandaExpectations + { + return self::$expectations ??= PandaExpectations::load(self::FIXTURES_DIR.'/expectations.php'); + } +} diff --git a/src/Css/tests/Golden/PandaStaticCssTest.php b/src/Css/tests/Golden/PandaStaticCssTest.php new file mode 100644 index 00000000000..793cc6823f0 --- /dev/null +++ b/src/Css/tests/Golden/PandaStaticCssTest.php @@ -0,0 +1,42 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Engine; +use Symfony\UX\Css\Engine\StaticCss; + +final class PandaStaticCssTest extends TestCase +{ + private const FIXTURES = __DIR__.'/../Fixtures/Panda'; + + public static function provideCases(): iterable + { + foreach (new PandaCaseLoader(self::FIXTURES)->cases() as $id => $case) { + if ('static-css' === $case->kind && null === $case->unsupported) { + yield $id => [$case]; + } + } + } + + #[DataProvider('provideCases')] + public function testStyleObjectsMatchPanda(PandaCase $case): void + { + $loader = new PandaCaseLoader(self::FIXTURES); + $staticCss = new StaticCss(new Engine($loader->configFor($case))); + + $styles = $staticCss->styles($case->inputs[0]['css']); + + $this->assertSame($case->expected['styles'], $styles); + } +} diff --git a/src/Css/tests/Golden/PandaTokensTest.php b/src/Css/tests/Golden/PandaTokensTest.php new file mode 100644 index 00000000000..5df415e54dc --- /dev/null +++ b/src/Css/tests/Golden/PandaTokensTest.php @@ -0,0 +1,94 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Engine; +use Symfony\UX\Css\Engine\Tokens; + +final class PandaTokensTest extends TestCase +{ + private const FIXTURES = __DIR__.'/../Fixtures/Panda'; + + private static ?Tokens $tokens = null; + + /** + * @var array{vars: array, values: array, categories: array>, colorPalettes: array>, cssVars: array>}|null + */ + private static ?array $expected = null; + + public function testVariablesMatchPanda(): void + { + $tokens = self::tokens(); + + foreach (self::expected()['vars'] as $name => $var) { + $this->assertSame($var, $tokens->getVar((string) $name), $name); + } + } + + public function testValuesMatchPanda(): void + { + $tokens = self::tokens(); + + foreach (self::expected()['values'] as $name => $value) { + $this->assertSame($value, $tokens->getValue((string) $name), $name); + } + } + + public function testCategoriesMatchPanda(): void + { + $tokens = self::tokens(); + + foreach (self::expected()['categories'] as $category => $values) { + $this->assertEquals($values, $tokens->getCategoryValues((string) $category), $category); + } + } + + public function testColorPalettesMatchPanda(): void + { + $tokens = self::tokens(); + $paletteNames = array_map(strval(...), array_keys(self::expected()['colorPalettes'])); + + $this->assertSame($paletteNames, $tokens->getColorPaletteNames()); + foreach (self::expected()['colorPalettes'] as $palette => $values) { + $this->assertSame($values, $tokens->getColorPalette((string) $palette), $palette); + } + } + + public function testCssVariablesMatchPanda(): void + { + $tokens = self::tokens(); + + $this->assertSame(self::expected()['cssVars'], $tokens->getVars()); + } + + private static function tokens(): Tokens + { + if (null !== self::$tokens) { + return self::$tokens; + } + + $json = file_get_contents(self::FIXTURES.'/configs/fixture.json'); + $config = json_decode($json, true, flags: \JSON_THROW_ON_ERROR); + + return self::$tokens = new Engine($config)->tokens(); + } + + private static function expected(): array + { + return self::$expected ??= json_decode( + file_get_contents(self::FIXTURES.'/tokens.json'), + true, + flags: \JSON_THROW_ON_ERROR, + ); + } +} diff --git a/src/Css/tests/Golden/PandaUtilitiesTest.php b/src/Css/tests/Golden/PandaUtilitiesTest.php new file mode 100644 index 00000000000..09cd364bd3a --- /dev/null +++ b/src/Css/tests/Golden/PandaUtilitiesTest.php @@ -0,0 +1,84 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\PandaConfig; +use Symfony\UX\Css\Engine\Preset\BaseTransforms; +use Symfony\UX\Css\Engine\Tokens; +use Symfony\UX\Css\Engine\Utilities; +use Symfony\UX\Css\Exception\ExceptionInterface; + +final class PandaUtilitiesTest extends TestCase +{ + private const FIXTURES = __DIR__.'/../Fixtures/Panda'; + + private static ?Utilities $utilities = null; + + public static function provideTransforms(): iterable + { + $cases = json_decode(file_get_contents(self::FIXTURES.'/utilities.json'), true, flags: \JSON_THROW_ON_ERROR); + foreach ($cases as $property => $entries) { + foreach ($entries as $entry) { + yield $property.' '.json_encode($entry[0], \JSON_UNESCAPED_SLASHES) => [$property, ...$entry]; + } + } + } + + #[DataProvider('provideTransforms')] + public function testTransformMatchesPanda( + string $property, + string|int|float|bool $value, + string|array $className, + array $styles = [], + ?string $layer = null, + ): void { + if ('compositions' === $layer) { + $this->markTestSkipped('Text styles and layer styles are out of v1.'); + } + if (\is_array($className)) { + $this->expectException(ExceptionInterface::class); + } + + $transformed = self::utilities()->transform($property, $value); + + $expected = ['className' => $className, 'styles' => $styles]; + if (null !== $layer) { + $expected['layer'] = $layer; + } + $this->assertSame($expected, $transformed); + } + + private static function utilities(): Utilities + { + if (null !== self::$utilities) { + return self::$utilities; + } + + $json = file_get_contents(self::FIXTURES.'/configs/fixture.json'); + $fixture = json_decode($json, true, flags: \JSON_THROW_ON_ERROR); + $config = PandaConfig::create([ + 'theme' => [ + 'tokens' => $fixture['theme']['tokens'], + 'semanticTokens' => $fixture['theme']['semanticTokens'], + ], + ]); + $tokens = new Tokens( + $config['theme']['tokens'], + $config['theme']['semanticTokens'], + $config['theme']['breakpoints'], + ); + + return self::$utilities = new Utilities($config['utilities'], '_', $tokens, BaseTransforms::all()); + } +} diff --git a/src/Css/tests/Golden/PandaValidationTest.php b/src/Css/tests/Golden/PandaValidationTest.php new file mode 100644 index 00000000000..e4b601b9f70 --- /dev/null +++ b/src/Css/tests/Golden/PandaValidationTest.php @@ -0,0 +1,91 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Golden; + +use PHPUnit\Framework\Attributes\DataProvider; +use PHPUnit\Framework\TestCase; +use Symfony\UX\Css\Engine\Engine; +use Symfony\UX\Css\Exception\InvalidStyleException; +use Symfony\UX\Css\Validation\StyleValidator; + +final class PandaValidationTest extends TestCase +{ + private const FIXTURES = __DIR__.'/../Fixtures/Panda'; + + /** + * @var array + */ + private static array $validators = []; + + public static function provideCases(): iterable + { + foreach (new PandaCaseLoader(self::FIXTURES)->cases() as $id => $case) { + if ('codegen-css' === $case->kind && null === $case->unsupported) { + yield $id => [$case]; + } + } + } + + #[DataProvider('provideCases')] + public function testTheValidationRejectsWhatPandaTypesReject(PandaCase $case): void + { + if ($case->expectTypeError && $case->undefinedValues) { + $this->markTestSkipped('Panda\'s types reject an undefined item, recorded as null: Twig has no undefined.'); + } + + $errors = []; + foreach (self::styles($case->inputs) as $styles) { + try { + self::validator($case->config)->validate($styles); + } catch (InvalidStyleException $e) { + $errors[] = $e->getMessage(); + } + } + + if ($case->expectTypeError) { + $this->assertNotSame([], $errors, 'Panda\'s types reject this input, see '.$case->sourceLocation()); + } else { + $this->assertSame([], $errors, 'Panda\'s types accept this input, see '.$case->sourceLocation()); + } + } + + /** + * @param list $inputs + * + * @return iterable> + */ + private static function styles(array $inputs): iterable + { + foreach ($inputs as $input) { + foreach (\is_array($input) && array_is_list($input) ? $input : [$input] as $styles) { + if (\is_array($styles) && [] !== $styles && !array_is_list($styles)) { + yield $styles; + } + } + } + } + + private static function validator(string $name): StyleValidator + { + if (isset(self::$validators[$name])) { + return self::$validators[$name]; + } + + $config = new PandaCaseLoader(self::FIXTURES)->config($name); + + return self::$validators[$name] = new StyleValidator( + new Engine($config), + (bool) ($config['strictTokens'] ?? false), + (bool) ($config['strictPropertyValues'] ?? false), + ); + } +} diff --git a/src/Css/tests/Golden/update-expectations.php b/src/Css/tests/Golden/update-expectations.php new file mode 100644 index 00000000000..b2a53d8be59 --- /dev/null +++ b/src/Css/tests/Golden/update-expectations.php @@ -0,0 +1,54 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +use Symfony\UX\Css\Exception\UnsupportedStyleException; +use Symfony\UX\Css\Tests\Golden\OutOfScopeException; +use Symfony\UX\Css\Tests\Golden\PandaCaseLoader; +use Symfony\UX\Css\Tests\Golden\PandaCaseRunner; +use Symfony\UX\Css\Tests\Golden\PandaExpectations; + +require __DIR__.'/../../vendor/autoload.php'; + +$fixturesDir = __DIR__.'/../Fixtures/Panda'; +$loader = new PandaCaseLoader($fixturesDir); +$runner = new PandaCaseRunner($loader); +$expectations = PandaExpectations::load($fixturesDir.'/expectations.php'); + +$passing = []; +$regressions = []; +foreach ($loader->cases() as $id => $case) { + if (null !== $case->unsupported || null !== $expectations->skipReason($id)) { + continue; + } + + try { + $passes = $case->matches($runner->run($case)); + } catch (UnsupportedStyleException|OutOfScopeException) { + $passes = false; + } + + if ($passes) { + $passing[] = $id; + } elseif ($expectations->mustPass($id)) { + $regressions[] = $id; + } +} + +if ($regressions && !in_array('--allow-regressions', $argv, true)) { + fwrite(\STDERR, "These cases passed before and fail now:\n ".implode("\n ", $regressions)."\n"); + fwrite(\STDERR, "Fix them, or rerun with --allow-regressions to drop them from the ratchet.\n"); + + exit(1); +} + +new PandaExpectations($passing, $expectations->skipped)->dump($fixturesDir.'/expectations.php'); + +printf("%d cases pass, %d of them new.\n", count($passing), count(array_diff($passing, $expectations->passing))); diff --git a/src/Css/tests/Integration/ConfigurationTest.php b/src/Css/tests/Integration/ConfigurationTest.php new file mode 100644 index 00000000000..9448b61e52d --- /dev/null +++ b/src/Css/tests/Integration/ConfigurationTest.php @@ -0,0 +1,223 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Integration; + +use PHPUnit\Framework\Attributes\DataProvider; +use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase; +use Symfony\Component\Config\Definition\Exception\InvalidConfigurationException; +use Symfony\Component\HttpKernel\KernelInterface; +use Symfony\UX\Css\Engine\ClassNameGenerator; +use Symfony\UX\Css\Engine\Engine; +use Symfony\UX\Css\Tests\Fixtures\TestKernel; + +final class ConfigurationTest extends KernelTestCase +{ + private const SPEC_CONFIG = [ + 'tokens' => [ + 'colors' => [ + 'blue' => [500 => '#3b82f6', 600 => '#2563eb'], + 'gray' => [50 => '#f9fafb', 900 => '#111827'], + ], + 'spacing' => ['sm' => '0.5rem', 'md' => '1rem', 'lg' => '2rem'], + 'radii' => ['md' => '0.375rem'], + ], + 'semantic_tokens' => [ + 'colors' => [ + 'primary' => '{colors.blue.500}', + 'fg' => ['base' => '{colors.gray.900}', '_dark' => '{colors.gray.50}'], + ], + ], + 'conditions' => [ + 'dark' => '[data-theme=dark] &', + 'expanded' => '&[aria-expanded=true]', + 'print' => '@media print', + ], + 'breakpoints' => ['sm' => '40rem', 'md' => '48rem', 'lg' => '64rem', 'xl' => '80rem', '2xl' => '96rem'], + ]; + + public function testTheSpecConfigDrivesTheRuntimeClassNames(): void + { + self::bootKernel(['ux_css' => self::SPEC_CONFIG]); + $styles = [ + 'p' => 'md', + '_hover' => ['color' => 'primary'], + '_expanded' => ['color' => 'fg'], + 'md' => ['p' => 'lg'], + ]; + + $generator = self::getContainer()->get('ux_css.class_name_generator'); + + $this->assertInstanceOf(ClassNameGenerator::class, $generator); + $this->assertSame('p_md hover:c_primary expanded:c_fg md:p_lg', $generator->generate($styles)); + } + + public function testTheSpecConfigDrivesTheBuildEngine(): void + { + self::bootKernel(['ux_css' => self::SPEC_CONFIG]); + + $engine = self::getContainer()->get('ux_css.engine'); + + $this->assertInstanceOf(Engine::class, $engine); + $this->assertSame(['padding' => 'var(--spacing-md)'], $engine->utilities()->transform('p', 'md')['styles']); + $this->assertSame('var(--colors-blue-500)', $engine->tokens()->getValue('colors.primary')); + $this->assertSame('[data-theme=dark] &', $engine->config()['conditions']['dark']); + $this->assertSame('48rem', $engine->config()['theme']['breakpoints']['md']); + } + + public function testTheCssGeneratorUsesTheProjectTokens(): void + { + self::bootKernel(['ux_css' => self::SPEC_CONFIG]); + $generator = self::getContainer()->get('ux_css.css_generator'); + + $css = $generator->generate([['color' => 'primary']]); + + $this->assertStringContainsString('--colors-primary: var(--colors-blue-500);', $css); + } + + public function testEmptyConfigUsesPandaDefaults(): void + { + self::bootKernel(); + $generator = self::getContainer()->get('ux_css.class_name_generator'); + + $classNames = $generator->generate(['display' => 'flex', 'md' => ['p' => 4]]); + + $this->assertSame('d_flex md:p_4', $classNames); + } + + public function testNoDefaultTokensUnlessEnabled(): void + { + self::bootKernel(); + $generator = self::getContainer()->get('ux_css.css_generator'); + + $css = $generator->generate([]); + + $this->assertStringNotContainsString('--colors-red-500', $css); + } + + public function testPandaDefaultTokensCanBeEnabled(): void + { + self::bootKernel(['ux_css' => ['default_tokens' => 'panda']]); + $validator = self::getContainer()->get('ux_css.validator'); + $generator = self::getContainer()->get('ux_css.css_generator'); + + $validator->validate(['bg' => 'red.500', 'p' => '4', 'rounded' => 'md']); + $css = $generator->generate([['bg' => 'red.500']]); + + $this->assertStringContainsString('--colors-red-500: #ef4444;', $css); + $this->assertStringContainsString('--spacing-4: 1rem;', $css); + } + + public function testAProjectTokenReplacesTheDefaultTokenWithTheSamePath(): void + { + $config = ['default_tokens' => 'panda', 'tokens' => ['colors' => ['red' => ['500' => '#f00']]]]; + self::bootKernel(['ux_css' => $config]); + $generator = self::getContainer()->get('ux_css.css_generator'); + + $css = $generator->generate([]); + + $this->assertStringContainsString('--colors-red-500: #f00;', $css); + $this->assertStringContainsString('--colors-red-600: #dc2626;', $css); + } + + public static function provideListTokens(): iterable + { + yield 'list' => [['fonts' => ['sans' => ['Inter', 'sans-serif']]], '--fonts-sans: Inter, sans-serif;']; + yield 'list in the value form' => [['fonts' => ['sans' => ['value' => ['Inter', 'sans-serif']]]], '--fonts-sans: Inter, sans-serif;']; + yield 'shadow list' => [['shadows' => ['sm' => ['0 0 1px red']]], '--shadows-sm: 0 0 1px red;']; + } + + #[DataProvider('provideListTokens')] + public function testAListTokenOfTheProjectReplacesTheDefaultOne(array $tokens, string $variable): void + { + self::bootKernel(['ux_css' => ['default_tokens' => 'panda', 'tokens' => $tokens]]); + $generator = self::getContainer()->get('ux_css.css_generator'); + + $css = $generator->generate([]); + + $this->assertStringContainsString($variable, $css); + } + + public function testTokensAcceptPandasValueForm(): void + { + $config = [ + 'tokens' => ['spacing' => ['sm' => ['value' => '0.5rem', 'description' => 'Small gaps']]], + 'semantic_tokens' => ['spacing' => ['gutter' => ['value' => ['base' => '{spacing.sm}', 'md' => '1rem']]]], + ]; + self::bootKernel(['ux_css' => $config]); + $generator = self::getContainer()->get('ux_css.css_generator'); + + $css = $generator->generate([['p' => 'sm']]); + + $this->assertStringContainsString('--spacing-sm: 0.5rem;', $css); + $this->assertStringContainsString('--spacing-gutter: var(--spacing-sm);', $css); + } + + public static function provideInvalidConfigs(): iterable + { + yield 'unknown token category' => [ + ['tokens' => ['colours' => ['red' => '#f00']]], + 'Unknown token category "colours". Did you mean "colors"?', + ]; + yield 'unknown semantic token category' => [ + ['semantic_tokens' => ['spacings' => ['gutter' => '1rem']]], + 'Unknown token category "spacings". Did you mean "spacing"?', + ]; + yield 'broken reference' => [ + [ + 'tokens' => ['colors' => ['blue' => [500 => '#00f']]], + 'semantic_tokens' => ['colors' => ['primary' => '{colors.blue.50}']], + ], + 'The "colors.primary" token references the unknown token "colors.blue.50". Did you mean "colors.blue.500"?', + ]; + yield 'circular reference' => [ + ['semantic_tokens' => ['colors' => ['a' => '{colors.b}', 'b' => '{colors.a}']]], + 'Circular token reference: colors.a -> colors.b -> colors.a.', + ]; + yield 'unknown condition in a semantic token' => [ + [ + 'tokens' => ['colors' => ['white' => '#fff', 'black' => '#000']], + 'semantic_tokens' => ['colors' => ['fg' => ['base' => '{colors.black}', '_drak' => '{colors.white}']]], + ], + 'The "colors.fg" token uses the unknown condition "_drak". Did you mean "_dark"?', + ]; + yield 'condition without & or @' => [ + ['conditions' => ['active' => '.is-active']], + 'The "active" condition must contain "&" or start with "@", ".is-active" given.', + ]; + yield 'invalid static css' => [ + ['static_css' => ['css' => [['properties' => ['display' => ['flexx']]]]]], + 'The ux_css.static_css rules are invalid: Invalid value "flexx" for "display". Did you mean "flex"?', + ]; + yield 'token value that is a hash' => [ + ['tokens' => ['spacing' => ['sm' => ['value' => ['min' => '0.5rem']]]]], + 'The value of the "spacing.sm" token must be a string or a number, array given.', + ]; + yield 'breakpoint named like a shorthand' => [ + ['breakpoints' => ['p' => '40rem']], + 'The "p" breakpoint has the same name as a CSS property or shorthand.', + ]; + } + + #[DataProvider('provideInvalidConfigs')] + public function testInvalidConfigsAreRejectedWhenTheContainerCompiles(array $config, string $message): void + { + $this->expectException(InvalidConfigurationException::class); + $this->expectExceptionMessage($message); + + self::bootKernel(['ux_css' => $config]); + } + + protected static function createKernel(array $options = []): KernelInterface + { + return new TestKernel($options['ux_css'] ?? []); + } +} diff --git a/src/Css/tests/Integration/CssFunctionTest.php b/src/Css/tests/Integration/CssFunctionTest.php new file mode 100644 index 00000000000..586240ea499 --- /dev/null +++ b/src/Css/tests/Integration/CssFunctionTest.php @@ -0,0 +1,348 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Symfony\UX\Css\Tests\Integration; + +use PHPUnit\Framework\Attributes\DataProvider; +use Symfony\Bundle\FrameworkBundle\Console\Application; +use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase; +use Symfony\Component\Console\Tester\CommandTester; +use Symfony\Component\HttpKernel\KernelInterface; +use Symfony\UX\Css\Engine\CssEscaper; +use Symfony\UX\Css\Tests\Fixtures\TestKernel; +use Twig\Environment; +use Twig\Error\RuntimeError; +use Twig\Error\SyntaxError; +use Twig\Loader\ArrayLoader; +use Twig\Loader\ChainLoader; +use Twig\Source; + +final class CssFunctionTest extends KernelTestCase +{ + private const CONFIG = [ + 'tokens' => ['colors' => ['red' => '#f00', 'blue' => '#00f'], 'spacing' => ['md' => '1rem', 'lg' => '2rem']], + 'semantic_tokens' => ['colors' => ['primary' => '{colors.red}', 'fg' => '{colors.blue}']], + ]; + + public function testAConstantHashCompilesToItsClasses(): void + { + $template = '
'; + + $html = $this->render($template); + $compiled = $this->compile($template); + + $this->assertSame('
', $html); + $this->assertStringContainsString('"p_md c_primary hover:c_fg"', $compiled); + $this->assertStringNotContainsString('CssRuntime', $compiled); + } + + public function testATernaryWithConstantBranchesCompilesToBothClassLists(): void + { + $template = '{{ css({ p: \'md\', color: active ? \'primary\' : \'fg\' }) }}'; + + $whenActive = $this->render($template, ['active' => true]); + $whenInactive = $this->render($template, ['active' => false]); + $compiled = $this->compile($template); + + $this->assertSame('p_md c_primary', $whenActive); + $this->assertSame('p_md c_fg', $whenInactive); + $this->assertStringNotContainsString('CssRuntime', $compiled); + } + + public function testATernaryOfHashesCompilesToBothClassLists(): void + { + $template = '{{ css(active ? { color: \'primary\' } : { p: \'lg\' }) }}'; + + $whenActive = $this->render($template, ['active' => true]); + $whenInactive = $this->render($template, ['active' => false]); + $compiled = $this->compile($template); + + $this->assertSame('c_primary', $whenActive); + $this->assertSame('p_lg', $whenInactive); + $this->assertStringNotContainsString('CssRuntime', $compiled); + } + + public function testATernaryOfHashesUnderAConditionCompilesToBothClassLists(): void + { + $template = '{{ css({ p: \'md\', _hover: active ? { color: \'primary\' } : { color: \'fg\' } }) }}'; + + $whenActive = $this->render($template, ['active' => true]); + $whenInactive = $this->render($template, ['active' => false]); + $compiled = $this->compile($template); + + $this->assertSame('p_md hover:c_primary', $whenActive); + $this->assertSame('p_md hover:c_fg', $whenInactive); + $this->assertStringNotContainsString('CssRuntime', $compiled); + } + + public function testADynamicHashUnderAConditionIsResolvedAtRuntime(): void + { + $template = '{{ css({ p: \'md\', _hover: hoverStyles, md: wide }) }}'; + $context = ['hoverStyles' => ['color' => 'fg'], 'wide' => ['p' => 'lg']]; + + $classes = $this->render($template, $context); + + $this->assertSame('p_md hover:c_fg md:p_lg', $classes); + } + + public function testAHashWithASpreadIsResolvedAtRuntime(): void + { + $template = '{{ css({ ...base, p: \'md\' }) }}'; + + $classes = $this->render($template, ['base' => ['color' => 'fg']]); + + $this->assertSame('c_fg p_md', $classes); + } + + public function testAVariableSetOnceBeforeTheCallIsResolvedWhenTheTemplateCompiles(): void + { + $template = <<<'TWIG' + {% set color = 'primary' %} + {{ css({ color }) }}|{{ css({ color: color }) }}|{% if active %}{{ css({ color: color, p: 'md' }) }}{% endif %} + TWIG; + + $html = $this->render($template, ['active' => true]); + $compiled = $this->compile($template); + + $this->assertSame('c_primary|c_primary|c_primary p_md', trim($html)); + $this->assertStringNotContainsString('CssRuntime', $compiled); + } + + public function testAHashSetOnceBeforeTheCallIsResolvedWhenTheTemplateCompiles(): void + { + $template = "{% set styles = { color: 'primary', p: 'md' } %}{{ css(styles) }}"; + + $html = $this->render($template); + $compiled = $this->compile($template); + + $this->assertSame('c_primary p_md', $html); + $this->assertStringNotContainsString('CssRuntime', $compiled); + } + + public static function provideVariablesThatCanChange(): iterable + { + yield 'set twice' => ["{% set color = 'fg' %}{% if active %}{% set color = 'primary' %}{% endif %}{{ css({ color }) }}"]; + yield 'set in a condition' => ["{% if active %}{% set color = 'primary' %}{% endif %}{{ css({ color }) }}"]; + yield 'set after the call' => ["{{ css({ color }) }}{% set color = 'fg' %}"]; + yield 'loop variable' => ["{% for color in ['primary'] %}{% set color = 'fg' %}{% endfor %}{{ css({ color }) }}"]; + yield 'for target after a set' => ["{% set color = 'fg' %}{% for color in ['primary'] %}{{ css({ color }) }}{% endfor %}"]; + yield 'with' => ["{% set color = 'primary' %}{% with { color: 'fg' } %}{{ css({ color }) }}{% endwith %}"]; + yield 'with only' => ["{% set color = 'primary' %}{% with { color: 'fg' } only %}{{ css({ color }) }}{% endwith %}"]; + yield 'whole hash under with' => ["{% set styles = { color: 'primary' } %}{% with { styles: { color: 'fg' } } %}{{ css(styles) }}{% endwith %}"]; + yield 'loop' => ["{% set loop = { color: 'primary' } %}{% for i in [1] %}{{ css(loop) }}{% endfor %}"]; + } + + #[DataProvider('provideVariablesThatCanChange')] + public function testAVariableThatCanChangeIsResolvedAtRuntime(string $template): void + { + $compiled = $this->compile($template); + + $this->assertStringContainsString('CssRuntime', $compiled); + } + + public function testAFailedCompilationLeavesNoConstantForTheNextTemplates(): void + { + $setting = "{% set color = 'primary' %}{{ css({ color }) }}"; + $using = '{{ css({ color: color }) }}'; + $compiled = []; + + try { + $this->compile('{{ css({ colr: color }) }}'); + } catch (SyntaxError) { + } + for ($i = 0; $i < 50; ++$i) { + $this->compile($setting); + $compiled[] = $this->compile($using); + } + + foreach ($compiled as $source) { + $this->assertStringContainsString('CssRuntime', $source); + } + } + + public function testAnInvalidValueSetBeforeTheCallIsASyntaxError(): void + { + $this->expectException(SyntaxError::class); + $this->expectExceptionMessage('Unknown colors token "primry"'); + + $this->compile("{% set color = 'primry' %}\n{{ css({ color }) }}"); + } + + public function testTheDynamicPartOfAHashIsResolvedAtRuntime(): void + { + $template = '{{ css({ p: \'md\', _hover: { color: color } }) }}'; + + $classes = $this->render($template, ['color' => 'fg']); + $compiled = $this->compile($template); + + $this->assertSame('p_md hover:c_fg', $classes); + $this->assertStringContainsString('"p_md"', $compiled); + } + + public function testADynamicHashIsResolvedAtRuntime(): void + { + $styles = ['p' => 'md', 'md' => ['p' => 'lg'], '_hover' => ['color' => 'primary']]; + + $html = $this->render('{{ css(styles) }}', ['styles' => $styles]); + + $this->assertSame('p_md md:p_lg hover:c_primary', $html); + } + + public static function provideRealisticHashes(): iterable + { + yield 'flat' => ['{ display: \'flex\', alignItems: \'center\', gap: \'md\', p: \'lg\', color: \'primary\' }', ['display' => 'flex', 'alignItems' => 'center', 'gap' => 'md', 'p' => 'lg', 'color' => 'primary']]; + yield 'conditions' => ['{ color: \'fg\', _hover: { color: \'primary\', bg: \'fg\' }, _dark: { _focus: { color: \'primary\' } } }', ['color' => 'fg', '_hover' => ['color' => 'primary', 'bg' => 'fg'], '_dark' => ['_focus' => ['color' => 'primary']]]]; + yield 'responsive' => ['{ p: { base: \'md\', md: \'lg\' }, lg: { display: \'grid\' } }', ['p' => ['base' => 'md', 'md' => 'lg'], 'lg' => ['display' => 'grid']]]; + yield 'numbers' => ['{ zIndex: 10, opacity: 0.5, flexGrow: 1 }', ['zIndex' => 10, 'opacity' => 0.5, 'flexGrow' => 1]]; + } + + #[DataProvider('provideRealisticHashes')] + public function testStaticAndDynamicCallsGiveTheSameClasses(string $hash, array $styles): void + { + $dynamicClasses = $this->render('{{ css(styles) }}', ['styles' => $styles]); + $staticClasses = $this->render('{{ css('.$hash.') }}'); + + $this->assertSame($dynamicClasses, $staticClasses); + } + + public static function provideValuesWrittenDifferentlyByPandaRuntime(): iterable + { + yield 'numeric string' => [['opacity' => '0.50']]; + yield 'repeated spaces' => [['display' => 'inline flex']]; + yield 'hexadecimal string' => [['zIndex' => '0x10']]; + yield 'top-level base' => [['base' => ['color' => 'fg'], 'color' => 'primary']]; + } + + #[DataProvider('provideValuesWrittenDifferentlyByPandaRuntime')] + public function testStaticClassesAlwaysHaveTheirCss(array $styles): void + { + $css = self::getContainer()->get('ux_css.css_generator')->generate([$styles]); + $classNames = self::getContainer()->get('ux_css.engine')->classNames($styles); + + foreach (explode(' ', $classNames) as $class) { + $this->assertStringContainsString('.'.CssEscaper::escape($class).' {', $css); + } + } + + public function testDynamicValuesCannotBreakTheAttribute(): void + { + self::bootKernel(['debug' => false]); + + $html = $this->render('
', ['styles' => ['content' => '">