@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/src/theme/recipes/tree-view.ts

@@ -0,0 +1,200 @@
+import { treeViewAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe, defineStyles } from '@pandacss/dev'
+
+const itemStyle = defineStyles({
+  display: 'flex',
+  alignItems: 'center',
+  userSelect: 'none',
+  position: 'relative',
+  '--tree-depth': 'calc(var(--depth) - 1)',
+})
+const subtle = defineStyles({
+  _selected: { bg: 'colorPalette.bg.subtle', color: 'colorPalette.fg.default' },
+})
+const solid = defineStyles({
+  _selected: { bg: 'colorPalette.bg.default', color: 'colorPalette.fg.onSolid' },
+})
+
+const sizeStyles = {
+  branchControl: {
+    gap: 'var(--tree-item-gap)',
+    '--tree-indentation-offset': 'calc(var(--tree-indentation) * var(--tree-depth))',
+    '--tree-offset': 'calc(var(--tree-padding-inline) + var(--tree-indentation-offset))',
+    ps: 'var(--tree-offset)',
+    pe: 'var(--tree-padding-inline)',
+    py: 'var(--tree-padding-block)',
+  },
+  item: {
+    gap: 'var(--tree-item-gap)',
+    '--tree-indentation-offset': 'calc(var(--tree-indentation) * var(--tree-depth))',
+    '--tree-offset': 'calc(var(--tree-padding-inline) + var(--tree-indentation-offset))',
+    ps: 'var(--tree-offset)',
+    pe: 'var(--tree-padding-inline)',
+    py: 'var(--tree-padding-block)',
+  },
+  root: { gap: '2' },
+  tree: {
+    '--tree-item-gap': '{spacing.2}',
+    '--tree-indentation': 'calc(var(--tree-indent-size) + var(--tree-icon-size) * 0.5)',
+    _icon: { boxSize: 'var(--tree-icon-size)', flexShrink: '0' },
+  },
+  label: { textStyle: 'sm' },
+  branchIndentGuide: {
+    '--tree-offset':
+      'calc(var(--tree-padding-inline) + var(--tree-indentation) * var(--tree-depth))',
+    insetInlineStart: 'calc(var(--tree-offset) + var(--tree-icon-size) * 0.5)',
+  },
+  nodeCheckbox: { boxSize: 'var(--tree-icon-size)' },
+} as const
+
+const appearance = {
+  branchControl: {
+    borderRadius: 'sm',
+    outline: '0',
+    cursor: 'pointer',
+    focusVisibleRing: 'inside',
+    focusRingColor: 'colorPalette.ring',
+    _hover: { bg: 'gray.bg.subtle' },
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  item: {
+    borderRadius: 'sm',
+    outline: '0',
+    cursor: 'pointer',
+    focusVisibleRing: 'inside',
+    focusRingColor: 'colorPalette.ring',
+    _hover: { bg: 'gray.bg.subtle' },
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  root: { color: 'gray.fg.default' },
+  label: { fontWeight: 'medium' },
+  branchIndentGuide: { bg: 'gray.border.strong' },
+  branchTrigger: { outline: '0', focusVisibleRing: 'inside' },
+  nodeCheckbox: {
+    borderWidth: '1px',
+    borderColor: 'gray.border.strong',
+    borderRadius: 'xs',
+    color: 'gray.fg.default',
+    bg: 'gray.bg.page',
+    cursor: 'pointer',
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+    '&[data-state=checked], &[data-state=indeterminate]': {
+      bg: 'colorPalette.bg.default',
+      color: 'colorPalette.fg.onSolid',
+      borderColor: 'colorPalette.bg.default',
+    },
+  },
+  nodeRenameInput: {
+    bg: 'gray.bg.page',
+    color: 'gray.fg.default',
+    borderWidth: '1px',
+    borderColor: 'colorPalette.bg.default',
+    outline: '0',
+    focusVisibleRing: 'inside',
+  },
+} as const
+
+export const treeView = defineSlotRecipe({
+  className: 'app-tree-view',
+  jsx: ['TreeView.Root', 'TreeView.RootProvider'],
+  slots: treeViewAnatomy.keys(),
+  base: {
+    root: { width: 'full', display: 'flex', flexDirection: 'column' },
+    tree: { display: 'flex', flexDirection: 'column', outline: '0' },
+    branch: { position: 'relative' },
+    branchContent: { position: 'relative' },
+    branchIndentGuide: {
+      height: 'full',
+      width: '1px',
+      position: 'absolute',
+      pointerEvents: 'none',
+      '--tree-depth': 'calc(var(--depth) - 1)',
+    },
+    branchIndicator: {
+      color: 'inherit',
+      display: 'inline-flex',
+      transformOrigin: 'center',
+      transition: 'transform 0.2s',
+      _open: { transform: 'rotate(90deg)' },
+      '&[dir=rtl]': { transform: 'rotate(180deg)', _open: { transform: 'rotate(90deg)' } },
+    },
+    branchTrigger: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
+    branchControl: itemStyle,
+    item: itemStyle,
+    itemText: { flex: '1', minWidth: '0' },
+    branchText: { flex: '1', minWidth: '0' },
+    itemIndicator: { display: 'inline-flex', '&[hidden]': { display: 'none' } },
+    nodeCheckbox: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+    },
+    nodeRenameInput: { minWidth: '0' },
+  },
+  variants: {
+    size: {
+      md: {
+        ...sizeStyles,
+        tree: {
+          ...sizeStyles.tree,
+          textStyle: 'sm',
+          '--tree-indent-size': '{spacing.4}',
+          '--tree-icon-size': '{spacing.4}',
+          '--tree-padding-inline': '{spacing.3}',
+          '--tree-padding-block': '{spacing.1.5}',
+        },
+      },
+      sm: {
+        ...sizeStyles,
+        tree: {
+          ...sizeStyles.tree,
+          textStyle: 'sm',
+          '--tree-indent-size': '{spacing.4}',
+          '--tree-icon-size': '{spacing.3}',
+          '--tree-padding-inline': '{spacing.3}',
+          '--tree-padding-block': '{spacing.1}',
+        },
+      },
+      xs: {
+        ...sizeStyles,
+        tree: {
+          ...sizeStyles.tree,
+          textStyle: 'xs',
+          '--tree-indent-size': '{spacing.4}',
+          '--tree-icon-size': '{spacing.3}',
+          '--tree-padding-inline': '{spacing.2}',
+          '--tree-padding-block': '{spacing.1}',
+        },
+      },
+      unstyled: {},
+    },
+    variant: {
+      subtle: {
+        ...appearance,
+        branchControl: { ...appearance.branchControl, ...subtle },
+        item: { ...appearance.item, ...subtle },
+      },
+      solid: {
+        ...appearance,
+        branchControl: { ...appearance.branchControl, ...solid },
+        item: { ...appearance.item, ...solid },
+        nodeCheckbox: {
+          ...appearance.nodeCheckbox,
+          '[data-selected] &': { borderColor: 'colorPalette.fg.onSolid' },
+        },
+      },
+      unstyled: {},
+    },
+    animateContent: {
+      true: {
+        branchContent: {
+          overflow: 'hidden',
+          _open: { animationName: 'expand-height, fade-in', animationDuration: 'normal' },
+          _closed: { animationName: 'collapse-height, fade-out', animationDuration: 'normal' },
+        },
+      },
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'subtle' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/semanticTokens/colors/amber.ts

@@ -0,0 +1,91 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+
+export const amber = defineSemanticTokens.colors({
+  '1': { value: { _light: '#fefdfb', _dark: '#16120c' } },
+  '2': { value: { _light: '#fefbe9', _dark: '#1d180f' } },
+  '3': { value: { _light: '#fff7c2', _dark: '#302008' } },
+  '4': { value: { _light: '#ffee9c', _dark: '#3f2700' } },
+  '5': { value: { _light: '#fbe577', _dark: '#4d3000' } },
+  '6': { value: { _light: '#f3d673', _dark: '#5c3d05' } },
+  '7': { value: { _light: '#e9c162', _dark: '#714f19' } },
+  '8': { value: { _light: '#e2a336', _dark: '#8f6424' } },
+  '9': { value: { _light: '#ffc53d', _dark: '#ffc53d' } },
+  '10': { value: { _light: '#ffba18', _dark: '#ffd60a' } },
+  '11': { value: { _light: '#ab6400', _dark: '#ffca16' } },
+  '12': { value: { _light: '#4f3422', _dark: '#ffe7b3' } },
+  a1: { value: { _light: '#c0800004', _dark: '#e63c0006' } },
+  a2: { value: { _light: '#f4d10016', _dark: '#fd9b000d' } },
+  a3: { value: { _light: '#ffde003d', _dark: '#fa820022' } },
+  a4: { value: { _light: '#ffd40063', _dark: '#fc820032' } },
+  a5: { value: { _light: '#f8cf0088', _dark: '#fd8b0041' } },
+  a6: { value: { _light: '#eab5008c', _dark: '#fd9b0051' } },
+  a7: { value: { _light: '#dc9b009d', _dark: '#ffab2567' } },
+  a8: { value: { _light: '#da8a00c9', _dark: '#ffae3587' } },
+  a9: { value: { _light: '#ffb300c2', _dark: '#ffc53d' } },
+  a10: { value: { _light: '#ffb300e7', _dark: '#ffd60a' } },
+  a11: { value: { _light: '#ab6400', _dark: '#ffca16' } },
+  a12: { value: { _light: '#341500dd', _dark: '#ffe7b3' } },
+  bg: {
+    default: {
+      DEFAULT: {
+        value: '{colors.amber.9}',
+      },
+      hover: {
+        value: '{colors.amber.10}',
+      },
+    },
+    subtle: {
+      DEFAULT: {
+        value: '{colors.amber.a3}',
+      },
+      hover: {
+        value: '{colors.amber.a4}',
+      },
+      active: {
+        value: '{colors.amber.a5}',
+      },
+    },
+    surface: {
+      DEFAULT: {
+        value: '{colors.amber.a2}',
+      },
+      active: {
+        value: '{colors.amber.a3}',
+      },
+    },
+  },
+  fg: {
+    default: {
+      value: '{colors.amber.a11}',
+    },
+    muted: {
+      value: '{colors.amber.11}',
+    },
+    subtle: {
+      value: '{colors.amber.10}',
+    },
+    onSolid: {
+      value: {
+        _light: '{colors.gray.12}',
+        _dark: '{colors.gray.1}',
+      },
+    },
+  },
+  border: {
+    subtle: {
+      value: '{colors.amber.a4}',
+    },
+    default: {
+      DEFAULT: {
+        value: '{colors.amber.a6}',
+      },
+      hover: {
+        value: '{colors.amber.a7}',
+      },
+    },
+    strong: {
+      value: '{colors.amber.a7}',
+    },
+  },
+  ring: { value: '{colors.amber.bg.default}' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/semanticTokens/colors/gray.ts

@@ -0,0 +1,103 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+
+export const neutral = defineSemanticTokens.colors({
+  '1': { value: { _light: '#fcfcfc', _dark: '#111111' } },
+  '2': { value: { _light: '#f9f9f9', _dark: '#191919' } },
+  '3': { value: { _light: '#f0f0f0', _dark: '#222222' } },
+  '4': { value: { _light: '#e8e8e8', _dark: '#2a2a2a' } },
+  '5': { value: { _light: '#e0e0e0', _dark: '#313131' } },
+  '6': { value: { _light: '#d9d9d9', _dark: '#3a3a3a' } },
+  '7': { value: { _light: '#cecece', _dark: '#484848' } },
+  '8': { value: { _light: '#bbbbbb', _dark: '#606060' } },
+  '9': { value: { _light: '#8d8d8d', _dark: '#6e6e6e' } },
+  '10': { value: { _light: '#838383', _dark: '#7b7b7b' } },
+  '11': { value: { _light: '#646464', _dark: '#b4b4b4' } },
+  '12': { value: { _light: '#202020', _dark: '#eeeeee' } },
+  a1: { value: { _light: '#00000003', _dark: '#00000000' } },
+  a2: { value: { _light: '#00000006', _dark: '#ffffff09' } },
+  a3: { value: { _light: '#0000000f', _dark: '#ffffff12' } },
+  a4: { value: { _light: '#00000017', _dark: '#ffffff1b' } },
+  a5: { value: { _light: '#0000001f', _dark: '#ffffff22' } },
+  a6: { value: { _light: '#00000026', _dark: '#ffffff2c' } },
+  a7: { value: { _light: '#00000031', _dark: '#ffffff3b' } },
+  a8: { value: { _light: '#00000044', _dark: '#ffffff55' } },
+  a9: { value: { _light: '#00000072', _dark: '#ffffff64' } },
+  a10: { value: { _light: '#0000007c', _dark: '#ffffff72' } },
+  a11: { value: { _light: '#0000009b', _dark: '#ffffffaf' } },
+  a12: { value: { _light: '#000000df', _dark: '#ffffffed' } },
+  bg: {
+    default: {
+      DEFAULT: {
+        value: {
+          _light: '{colors.black}',
+          _dark: '{colors.white}',
+        },
+      },
+      hover: {
+        value: '{colors.gray.12}',
+      },
+    },
+    subtle: {
+      DEFAULT: {
+        value: '{colors.gray.a3}',
+      },
+      hover: {
+        value: '{colors.gray.a4}',
+      },
+      active: {
+        value: '{colors.gray.a5}',
+      },
+    },
+    surface: {
+      DEFAULT: {
+        value: {
+          _light: '{colors.white}',
+          _dark: '{colors.gray.1}',
+        },
+      },
+      hover: {
+        value: '{colors.gray.2}',
+      },
+      active: {
+        value: '{colors.gray.3}',
+      },
+    },
+    page: {
+      value: '{colors.gray.1}',
+    },
+  },
+  fg: {
+    default: {
+      value: '{colors.gray.12}',
+    },
+    muted: {
+      value: '{colors.gray.11}',
+    },
+    subtle: {
+      value: '{colors.gray.10}',
+    },
+    onSolid: {
+      value: {
+        _light: '{colors.white}',
+        _dark: '{colors.black}',
+      },
+    },
+  },
+  border: {
+    subtle: {
+      value: '{colors.gray.4}',
+    },
+    default: {
+      DEFAULT: {
+        value: '{colors.gray.6}',
+      },
+      hover: {
+        value: '{colors.gray.7}',
+      },
+    },
+    strong: {
+      value: '{colors.gray.6}',
+    },
+  },
+  ring: { value: '{colors.gray.bg.default}' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/semanticTokens/colors/green.ts

@@ -0,0 +1,88 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+
+export const green = defineSemanticTokens.colors({
+  '1': { value: { _light: '#fbfefc', _dark: '#0e1512' } },
+  '2': { value: { _light: '#f4fbf6', _dark: '#121b17' } },
+  '3': { value: { _light: '#e6f6eb', _dark: '#132d21' } },
+  '4': { value: { _light: '#d6f1df', _dark: '#113b29' } },
+  '5': { value: { _light: '#c4e8d1', _dark: '#174933' } },
+  '6': { value: { _light: '#adddc0', _dark: '#20573e' } },
+  '7': { value: { _light: '#8eceaa', _dark: '#28684a' } },
+  '8': { value: { _light: '#5bb98b', _dark: '#2f7c57' } },
+  '9': { value: { _light: '#30a46c', _dark: '#30a46c' } },
+  '10': { value: { _light: '#2b9a66', _dark: '#33b074' } },
+  '11': { value: { _light: '#218358', _dark: '#3dd68c' } },
+  '12': { value: { _light: '#193b2d', _dark: '#b1f1cb' } },
+  a1: { value: { _light: '#00c04004', _dark: '#00de4505' } },
+  a2: { value: { _light: '#00a32f0b', _dark: '#29f99d0b' } },
+  a3: { value: { _light: '#00a43319', _dark: '#22ff991e' } },
+  a4: { value: { _light: '#00a83829', _dark: '#11ff992d' } },
+  a5: { value: { _light: '#019c393b', _dark: '#2bffa23c' } },
+  a6: { value: { _light: '#00963c52', _dark: '#44ffaa4b' } },
+  a7: { value: { _light: '#00914071', _dark: '#50fdac5e' } },
+  a8: { value: { _light: '#00924ba4', _dark: '#54ffad73' } },
+  a9: { value: { _light: '#008f4acf', _dark: '#44ffa49e' } },
+  a10: { value: { _light: '#008647d4', _dark: '#43fea4ab' } },
+  a11: { value: { _light: '#00713fde', _dark: '#46fea5d4' } },
+  a12: { value: { _light: '#002616e6', _dark: '#bbffd7f0' } },
+  bg: {
+    default: {
+      DEFAULT: {
+        value: '{colors.green.9}',
+      },
+      hover: {
+        value: '{colors.green.10}',
+      },
+    },
+    subtle: {
+      DEFAULT: {
+        value: '{colors.green.a3}',
+      },
+      hover: {
+        value: '{colors.green.a4}',
+      },
+      active: {
+        value: '{colors.green.a5}',
+      },
+    },
+    surface: {
+      DEFAULT: {
+        value: '{colors.green.a2}',
+      },
+      active: {
+        value: '{colors.green.a3}',
+      },
+    },
+  },
+  fg: {
+    default: {
+      value: '{colors.green.a11}',
+    },
+    muted: {
+      value: '{colors.green.11}',
+    },
+    subtle: {
+      value: '{colors.green.10}',
+    },
+    onSolid: {
+      value: 'white',
+    },
+  },
+  border: {
+    subtle: {
+      value: '{colors.green.a4}',
+    },
+    default: {
+      DEFAULT: {
+        value: '{colors.green.a6}',
+      },
+      hover: {
+        value: '{colors.green.a7}',
+      },
+    },
+    strong: {
+      value: '{colors.green.a7}',
+    },
+  },
+  ring: { value: '{colors.green.bg.default}' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/semanticTokens/colors/index.ts

@@ -0,0 +1,14 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+import { green } from './green'
+import { lime } from './lime'
+import { red } from './red'
+import { neutral } from './gray'
+import { amber } from './amber'
+
+export const colors = defineSemanticTokens.colors({
+  green,
+  lime,
+  red,
+  amber,
+  gray: neutral,
+})

package/templates/hono-fullstack/libs/ui/src/theme/semanticTokens/colors/lime.ts

@@ -0,0 +1,91 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+
+export const lime = defineSemanticTokens.colors({
+  '1': { value: { _light: '#fcfdfa', _dark: '#11130c' } },
+  '2': { value: { _light: '#f8faf3', _dark: '#151a10' } },
+  '3': { value: { _light: '#eef6d6', _dark: '#1f2917' } },
+  '4': { value: { _light: '#e2f0bd', _dark: '#29371d' } },
+  '5': { value: { _light: '#d3e7a6', _dark: '#334423' } },
+  '6': { value: { _light: '#c2da91', _dark: '#3d522a' } },
+  '7': { value: { _light: '#abc978', _dark: '#496231' } },
+  '8': { value: { _light: '#8db654', _dark: '#577538' } },
+  '9': { value: { _light: '#bdee63', _dark: '#bdee63' } },
+  '10': { value: { _light: '#b0e64c', _dark: '#d4ff70' } },
+  '11': { value: { _light: '#5c7c2f', _dark: '#bde56c' } },
+  '12': { value: { _light: '#37401c', _dark: '#e3f7ba' } },
+  a1: { value: { _light: '#66990005', _dark: '#11bb0003' } },
+  a2: { value: { _light: '#6b95000c', _dark: '#78f7000a' } },
+  a3: { value: { _light: '#96c80029', _dark: '#9bfd4c1a' } },
+  a4: { value: { _light: '#8fc60042', _dark: '#a7fe5c29' } },
+  a5: { value: { _light: '#81bb0059', _dark: '#affe6537' } },
+  a6: { value: { _light: '#72aa006e', _dark: '#b2fe6d46' } },
+  a7: { value: { _light: '#61990087', _dark: '#b6ff6f57' } },
+  a8: { value: { _light: '#559200ab', _dark: '#b6fd6d6c' } },
+  a9: { value: { _light: '#93e4009c', _dark: '#caff69ed' } },
+  a10: { value: { _light: '#8fdc00b3', _dark: '#d4ff70' } },
+  a11: { value: { _light: '#375f00d0', _dark: '#d1fe77e4' } },
+  a12: { value: { _light: '#1e2900e3', _dark: '#e9febff7' } },
+  bg: {
+    default: {
+      DEFAULT: {
+        value: '{colors.lime.9}',
+      },
+      hover: {
+        value: '{colors.lime.10}',
+      },
+    },
+    subtle: {
+      DEFAULT: {
+        value: '{colors.lime.a3}',
+      },
+      hover: {
+        value: '{colors.lime.a4}',
+      },
+      active: {
+        value: '{colors.lime.a5}',
+      },
+    },
+    surface: {
+      DEFAULT: {
+        value: '{colors.lime.a2}',
+      },
+      active: {
+        value: '{colors.lime.a3}',
+      },
+    },
+  },
+  fg: {
+    default: {
+      value: '{colors.lime.a11}',
+    },
+    muted: {
+      value: '{colors.lime.11}',
+    },
+    subtle: {
+      value: '{colors.lime.10}',
+    },
+    onSolid: {
+      value: {
+        _light: '{colors.gray.12}',
+        _dark: '{colors.gray.1}',
+      },
+    },
+  },
+  border: {
+    subtle: {
+      value: '{colors.lime.a4}',
+    },
+    default: {
+      DEFAULT: {
+        value: '{colors.lime.a6}',
+      },
+      hover: {
+        value: '{colors.lime.a7}',
+      },
+    },
+    strong: {
+      value: '{colors.lime.a7}',
+    },
+  },
+  ring: { value: '{colors.lime.bg.default}' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/semanticTokens/colors/red.ts

@@ -0,0 +1,88 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+
+export const red = defineSemanticTokens.colors({
+  '1': { value: { _light: '#fffcfc', _dark: '#191111' } },
+  '2': { value: { _light: '#fff7f7', _dark: '#201314' } },
+  '3': { value: { _light: '#feebec', _dark: '#3b1219' } },
+  '4': { value: { _light: '#ffdbdc', _dark: '#500f1c' } },
+  '5': { value: { _light: '#ffcdce', _dark: '#611623' } },
+  '6': { value: { _light: '#fdbdbe', _dark: '#72232d' } },
+  '7': { value: { _light: '#f4a9aa', _dark: '#8c333a' } },
+  '8': { value: { _light: '#eb8e90', _dark: '#b54548' } },
+  '9': { value: { _light: '#e5484d', _dark: '#e5484d' } },
+  '10': { value: { _light: '#dc3e42', _dark: '#ec5d5e' } },
+  '11': { value: { _light: '#ce2c31', _dark: '#ff9592' } },
+  '12': { value: { _light: '#641723', _dark: '#ffd1d9' } },
+  a1: { value: { _light: '#ff000003', _dark: '#f4121209' } },
+  a2: { value: { _light: '#ff000008', _dark: '#f22f3e11' } },
+  a3: { value: { _light: '#f3000d14', _dark: '#ff173f2d' } },
+  a4: { value: { _light: '#ff000824', _dark: '#fe0a3b44' } },
+  a5: { value: { _light: '#ff000632', _dark: '#ff204756' } },
+  a6: { value: { _light: '#f8000442', _dark: '#ff3e5668' } },
+  a7: { value: { _light: '#df000356', _dark: '#ff536184' } },
+  a8: { value: { _light: '#d2000571', _dark: '#ff5d61b0' } },
+  a9: { value: { _light: '#db0007b7', _dark: '#fe4e54e4' } },
+  a10: { value: { _light: '#d10005c1', _dark: '#ff6465eb' } },
+  a11: { value: { _light: '#c40006d3', _dark: '#ff9592' } },
+  a12: { value: { _light: '#55000de8', _dark: '#ffd1d9' } },
+  bg: {
+    default: {
+      DEFAULT: {
+        value: '{colors.red.9}',
+      },
+      hover: {
+        value: '{colors.red.10}',
+      },
+    },
+    subtle: {
+      DEFAULT: {
+        value: '{colors.red.a3}',
+      },
+      hover: {
+        value: '{colors.red.a4}',
+      },
+      active: {
+        value: '{colors.red.a5}',
+      },
+    },
+    surface: {
+      DEFAULT: {
+        value: '{colors.red.a2}',
+      },
+      active: {
+        value: '{colors.red.a3}',
+      },
+    },
+  },
+  fg: {
+    default: {
+      value: '{colors.red.a11}',
+    },
+    muted: {
+      value: '{colors.red.11}',
+    },
+    subtle: {
+      value: '{colors.red.10}',
+    },
+    onSolid: {
+      value: 'white',
+    },
+  },
+  border: {
+    subtle: {
+      value: '{colors.red.a4}',
+    },
+    default: {
+      DEFAULT: {
+        value: '{colors.red.a6}',
+      },
+      hover: {
+        value: '{colors.red.a7}',
+      },
+    },
+    strong: {
+      value: '{colors.red.a7}',
+    },
+  },
+  ring: { value: '{colors.red.bg.default}' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/semanticTokens/index.ts

@@ -0,0 +1,8 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+import { colors } from './colors'
+import { shadows } from './shadows'
+
+export const semanticTokens = defineSemanticTokens({
+  colors,
+  shadows,
+})