Open4ヶ月前にコメント追加2

CSSの@propertyはPanda CSSの設定との共存ができないので注意

Panda CSSでは、以下のように設定することで、CSSファイルでテーマの設定などをしつつ、Panda CSSのtokenの設定もすることができます。

@layer reset, base, tokens, recipes, utilities;

:root {
  /* ----------------------------------------
    Theme: Rose Pine
    https://rosepinetheme.com/
  ---------------------------------------- */
  /* colors */
  color-scheme: light dark;
  --colors-base: light-dark(#faf4ed, #232136);
  --colors-surface: light-dark(#fffaf3, #2a273f);
  --colors-overlay: light-dark(#f2e9e1, #393552);
  --colors-muted: light-dark(#9893a5, #6e6a86);
  --colors-subtle: light-dark(#797593, #908caa);
  --colors-text: light-dark(#575279, #e0def4);
  --colors-love: light-dark(#b4637a, #eb6f92);
  --colors-gold: light-dark(#ea9d34, #f6c177);
  --colors-rose: light-dark(#d7827e, #ea9a97);
  --colors-pine: light-dark(#286983, #3e8fb0);
  --colors-foam: light-dark(#56949f, #9ccfd8);
  --colors-iris: light-dark(#907aa9, #c4a7e7);
  --colors-highlight-low: light-dark(#f4ede8, #2a283e);
  --colors-highlight-med: light-dark(#dfdad9, #44415a);
  --colors-highlight-high: light-dark(#cecacd, #56526e);
  --colors-black: #000;
  --colors-white: #fff;
  --color-mix-base: light-dark(var(--colors-black), var(--colors-white));

  /* font-sizes */
  --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: 4rem;
  --font-sizes-7xl: 5rem;
  --font-sizes-8xl: 6rem;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ['./src/**/*.{js,jsx,ts,tsx}'],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {
      tokens: {
        colors: {
          base: { value: 'var(--colors-base)' },
          surface: { value: 'var(--colors-surface)' },
          overlay: { value: 'var(--colors-overlay)' },
          muted: { value: 'var(--colors-muted)' },
          subtle: { value: 'var(--colors-subtle)' },
          text: { value: 'var(--colors-text)' },
          love: { value: 'var(--colors-love)' },
          gold: { value: 'var(--colors-gold)' },
          rose: { value: 'var(--colors-rose)' },
          pine: { value: 'var(--colors-pine)' },
          foam: { value: 'var(--colors-foam)' },
          iris: { value: 'var(--colors-iris)' },
          'highlight-low': { value: 'var(--colors-highlight-low)' },
          'highlight-med': { value: 'var(--colors-highlight-med)' },
          'highlight-high': { value: 'var(--colors-highlight-high)' },
        },
        fonts: {
          zenkaku: { value: 'var(--fonts-zenkaku)' },
          ich1q: { value: 'var(--fonts-ich1q)' },
        },
        fontSizes: {
          xs: { value: 'var(--font-sizes-xs)' },
          sm: { value: 'var(--font-sizes-sm)' },
          md: { value: 'var(--font-sizes-md)' },
          lg: { value: 'var(--font-sizes-lg)' },
          xl: { value: 'var(--font-sizes-xl)' },
          '2xl': { value: 'var(--font-sizes-2xl)' },
          '3xl': { value: 'var(--font-sizes-3xl)' },
          '4xl': { value: 'var(--font-sizes-4xl)' },
          '5xl': { value: 'var(--font-sizes-5xl)' },
          '6xl': { value: 'var(--font-sizes-6xl)' },
          '7xl': { value: 'var(--font-sizes-7xl)' },
          '8xl': { value: 'var(--font-sizes-8xl)' },
        },
      },
    },
  },

  // The output directory for your css system
  outdir: 'styled-system',
});

airRnot

しかし、rootではなく@propertyで設定しようとすると、上手く動作しません。

@layer reset, base, tokens, recipes, utilities;

:root {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* colors */
/* ----------------------------------------
    Theme: Rose Pine
    https://rosepinetheme.com/
  ---------------------------------------- */
@property --colors-base {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#faf4ed, #232136);
}
@property --colors-surface {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#fffaf3, #2a273f);
}
@property --colors-overlay {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#f2e9e1, #393552);
}
@property --colors-muted {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#9893a5, #6e6a86);
}
@property --colors-subtle {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#797593, #908caa);
}
@property --colors-text {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#575279, #e0def4);
}
@property --colors-love {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#b4637a, #eb6f92);
}
@property --colors-gold {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#ea9d34, #f6c177);
}
@property --colors-rose {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#d7827e, #ea9a97);
}
@property --colors-pine {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#286983, #3e8fb0);
}
@property --colors-foam {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#56949f, #9ccfd8);
}
@property --colors-iris {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#907aa9, #c4a7e7);
}
@property --colors-highlight-low {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#f4ede8, #2a283e);
}
@property --colors-highlight-med {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#dfdad9, #44415a);
}
@property --colors-highlight-high {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(#cecacd, #56526e);
}
@property --colors-black {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
@property --colors-white {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff;
}
@property --colors-mix-base {
  syntax: "<color>";
  inherits: true;
  initial-value: light-dark(var(--colors-black), var(--colors-white));
}

/* font-sizes */
@property --font-sizes-xs {
  syntax: "<length>";
  inherits: true;
  initial-value: 0.75rem; /* 12px */
}
@property --font-sizes-sm {
  syntax: "<length>";
  inherits: true;
  initial-value: 0.875rem; /* 14px */
}
@property --font-sizes-md {
  syntax: "<length>";
  inherits: true;
  initial-value: 1rem; /* 16px */
}
@property --font-sizes-lg {
  syntax: "<length>";
  inherits: true;
  initial-value: 1.125rem; /* 18px */
}
@property --font-sizes-xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 1.25rem; /* 20px */
}
@property --font-sizes-2xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 1.5rem; /* 24px */
}
@property --font-sizes-3xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 1.75rem; /* 28px */
}
@property --font-sizes-4xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 2rem; /* 32px */
}
@property --font-sizes-5xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 2.25rem; /* 36px */
}
@property --font-sizes-6xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 3rem; /* 48px */
}
@property --font-sizes-7xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 4rem; /* 64px */
}
@property --font-sizes-8xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 5rem; /* 80px */
}
@property --font-sizes-9xl {
  syntax: "<length>";
  inherits: true;
  initial-value: 6rem; /* 96px */
}