@serendie/ui 0.1.6

package/styled-system/patterns/stack.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const stackConfig = {
+transform(props) {
+  const { align, justify, direction, gap, ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    ...rest
+  };
+},
+defaultValues:{direction:'column',gap:'10px'}}
+
+export const getStackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(stackConfig, styles)
+  return stackConfig.transform(_styles, patternFns)
+}
+
+export const stack = (styles) => css(getStackStyle(styles))
+stack.raw = getStackStyle

package/styled-system/patterns/visually-hidden.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface VisuallyHiddenProperties {
+   
+}
+
+
+interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit<SystemStyleObject, keyof VisuallyHiddenProperties > {}
+
+interface VisuallyHiddenPatternFn {
+  (styles?: VisuallyHiddenStyles): string
+  raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
+}
+
+
+export declare const visuallyHidden: VisuallyHiddenPatternFn;

package/styled-system/patterns/visually-hidden.js

@@ -0,0 +1,18 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const visuallyHiddenConfig = {
+transform(props) {
+  return {
+    srOnly: true,
+    ...props
+  };
+}}
+
+export const getVisuallyHiddenStyle = (styles = {}) => {
+  const _styles = getPatternStyles(visuallyHiddenConfig, styles)
+  return visuallyHiddenConfig.transform(_styles, patternFns)
+}
+
+export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
+visuallyHidden.raw = getVisuallyHiddenStyle

package/styled-system/patterns/vstack.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface VstackProperties {
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
+}
+
+
+interface VstackStyles extends VstackProperties, DistributiveOmit<SystemStyleObject, keyof VstackProperties > {}
+
+interface VstackPatternFn {
+  (styles?: VstackStyles): string
+  raw: (styles?: VstackStyles) => SystemStyleObject
+}
+
+
+export declare const vstack: VstackPatternFn;

package/styled-system/patterns/vstack.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const vstackConfig = {
+transform(props) {
+  const { justify, gap, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "column",
+    ...rest
+  };
+},
+defaultValues:{gap:'10px'}}
+
+export const getVstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(vstackConfig, styles)
+  return vstackConfig.transform(_styles, patternFns)
+}
+
+export const vstack = (styles) => css(getVstackStyle(styles))
+vstack.raw = getVstackStyle

package/styled-system/patterns/wrap.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface WrapProperties {
+   gap?: SystemProperties["gap"]
+	rowGap?: SystemProperties["gap"]
+	columnGap?: SystemProperties["gap"]
+	align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+}
+
+
+interface WrapStyles extends WrapProperties, DistributiveOmit<SystemStyleObject, keyof WrapProperties > {}
+
+interface WrapPatternFn {
+  (styles?: WrapStyles): string
+  raw: (styles?: WrapStyles) => SystemStyleObject
+}
+
+
+export declare const wrap: WrapPatternFn;

package/styled-system/patterns/wrap.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const wrapConfig = {
+transform(props) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+}}
+
+export const getWrapStyle = (styles = {}) => {
+  const _styles = getPatternStyles(wrapConfig, styles)
+  return wrapConfig.transform(_styles, patternFns)
+}
+
+export const wrap = (styles) => css(getWrapStyle(styles))
+wrap.raw = getWrapStyle

package/styled-system/themes/asagi.json

@@ -0,0 +1,5 @@
+{
+  "name": "asagi",
+  "id": "panda-theme-asagi",
+  "css": " [data-panda-theme=asagi] {\n    --colors-sd-system-color-impression-primary: #00757E;\n    --colors-sd-system-color-impression-on-primary: #FFFFFF;\n    --colors-sd-system-color-impression-primary-container: #00757E;\n    --colors-sd-system-color-impression-on-primary-container: #FFFFFF;\n    --colors-sd-system-color-impression-secondary: #AEEAD5;\n    --colors-sd-system-color-impression-on-secondary: #000000;\n    --colors-sd-system-color-impression-secondary-container: #AEEAD5;\n    --colors-sd-system-color-impression-on-secondary-container: #000000;\n    --colors-sd-system-color-impression-tertiary: #EFEEEB;\n    --colors-sd-system-color-impression-on-tertiary: #000000;\n    --colors-sd-system-color-impression-tertiary-container: #EFEEEB;\n    --colors-sd-system-color-impression-on-tertiary-container: #000000;\n    --colors-sd-system-color-impression-notice: #FFE600;\n    --colors-sd-system-color-impression-on-notice: #000000;\n    --colors-sd-system-color-impression-notice-container: #FFE600;\n    --colors-sd-system-color-impression-on-notice-container: #000000;\n    --colors-sd-system-color-impression-negative: #CE0037;\n    --colors-sd-system-color-impression-on-negative: #FFFFFF;\n    --colors-sd-system-color-impression-negative-container: #FCD6D3;\n    --colors-sd-system-color-impression-on-negative-container: #000000;\n    --colors-sd-system-color-impression-positive: #40A683;\n    --colors-sd-system-color-impression-on-positive: #FFFFFF;\n    --colors-sd-system-color-impression-positive-container: #40A683;\n    --colors-sd-system-color-impression-on-positive-container: #FFFFFF;\n    --colors-sd-system-color-component-surface: #FFFFFF;\n    --colors-sd-system-color-component-on-surface: #000000;\n    --colors-sd-system-color-component-on-surface-variant: #696966;\n    --colors-sd-system-color-component-inverse-surface: #232322;\n    --colors-sd-system-color-component-inverse-on-surface: #FFFFFF;\n    --colors-sd-system-color-component-outline: #C8C7C2;\n    --colors-sd-system-color-component-outline-variant: #8C8B87;\n    --colors-sd-system-color-component-scrim: #00000033;\n    --colors-sd-system-color-interaction-disabled: #EFEEEB;\n    --colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;\n    --colors-sd-system-color-interaction-selected-surface: #AEEAD5;\n    --colors-sd-system-color-interaction-hovered: #00000033;\n    --colors-sd-system-color-interaction-hovered-variant: #0000000D;\n    --colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99\n}"
+}

package/styled-system/themes/index.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+export type ThemeName = 'asagi' | 'kurikawa' | 'sumire' | 'tsutsuji'
+export type ThemeByName = {
+  'asagi': {
+          id: string,
+          name: 'asagi',
+          css: string
+        }
+'kurikawa': {
+          id: string,
+          name: 'kurikawa',
+          css: string
+        }
+'sumire': {
+          id: string,
+          name: 'sumire',
+          css: string
+        }
+'tsutsuji': {
+          id: string,
+          name: 'tsutsuji',
+          css: string
+        }
+}
+
+export type Theme<T extends ThemeName> = ThemeByName[T]
+
+/**
+ * Dynamically import a theme by name
+ */
+export declare function getTheme<T extends ThemeName>(themeName: T): Promise<ThemeByName[T]>
+
+/**
+ * Inject a theme stylesheet into the document
+ */
+export declare function injectTheme(el: HTMLElement, theme: Theme<any>): HTMLStyleElement

package/styled-system/themes/index.js

@@ -0,0 +1,24 @@
+export const getTheme = (themeName) => import('./' + themeName + '.json').then((m) => m.default)
+
+export function injectTheme(el, theme) {
+  const doc = el.ownerDocument || document
+  let sheet = doc.getElementById(theme.id)
+
+  if (!sheet) {
+    sheet = doc.createElement('style')
+    sheet.setAttribute('type', 'text/css')
+    sheet.setAttribute('id', theme.id)
+  }
+
+  const head = doc.head || doc.getElementsByTagName('head')[0]
+  if (!head) {
+    throw new Error('No head found in doc')
+  }
+
+  el.dataset.pandaTheme = theme.name
+
+  head.appendChild(sheet)
+  sheet.innerHTML = theme.css
+
+  return sheet
+}

package/styled-system/themes/kurikawa.json

@@ -0,0 +1,5 @@
+{
+  "name": "kurikawa",
+  "id": "panda-theme-kurikawa",
+  "css": " [data-panda-theme=kurikawa] {\n    --colors-sd-system-color-impression-primary: #803510;\n    --colors-sd-system-color-impression-on-primary: #FFFFFF;\n    --colors-sd-system-color-impression-primary-container: #803510;\n    --colors-sd-system-color-impression-on-primary-container: #FFFFFF;\n    --colors-sd-system-color-impression-secondary: #F7C6B0;\n    --colors-sd-system-color-impression-on-secondary: #000000;\n    --colors-sd-system-color-impression-secondary-container: #F7C6B0;\n    --colors-sd-system-color-impression-on-secondary-container: #000000;\n    --colors-sd-system-color-impression-tertiary: #F7EDE2;\n    --colors-sd-system-color-impression-on-tertiary: #000000;\n    --colors-sd-system-color-impression-tertiary-container: #F7EDE2;\n    --colors-sd-system-color-impression-on-tertiary-container: #000000;\n    --colors-sd-system-color-impression-notice: #FFE600;\n    --colors-sd-system-color-impression-on-notice: #000000;\n    --colors-sd-system-color-impression-notice-container: #FFE600;\n    --colors-sd-system-color-impression-on-notice-container: #000000;\n    --colors-sd-system-color-impression-negative: #CE0037;\n    --colors-sd-system-color-impression-on-negative: #FFFFFF;\n    --colors-sd-system-color-impression-negative-container: #FCD6D3;\n    --colors-sd-system-color-impression-on-negative-container: #000000;\n    --colors-sd-system-color-impression-positive: #40A683;\n    --colors-sd-system-color-impression-on-positive: #FFFFFF;\n    --colors-sd-system-color-impression-positive-container: #40A683;\n    --colors-sd-system-color-impression-on-positive-container: #FFFFFF;\n    --colors-sd-system-color-component-surface: #FFFFFF;\n    --colors-sd-system-color-component-on-surface: #000000;\n    --colors-sd-system-color-component-on-surface-variant: #696966;\n    --colors-sd-system-color-component-inverse-surface: #232322;\n    --colors-sd-system-color-component-inverse-on-surface: #FFFFFF;\n    --colors-sd-system-color-component-outline: #C8C7C2;\n    --colors-sd-system-color-component-outline-variant: #8C8B87;\n    --colors-sd-system-color-component-scrim: #00000033;\n    --colors-sd-system-color-interaction-disabled: #EFEEEB;\n    --colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;\n    --colors-sd-system-color-interaction-selected-surface: #F7C6B0;\n    --colors-sd-system-color-interaction-hovered: #00000033;\n    --colors-sd-system-color-interaction-hovered-variant: #0000000D;\n    --colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99\n}"
+}

package/styled-system/themes/sumire.json

@@ -0,0 +1,5 @@
+{
+  "name": "sumire",
+  "id": "panda-theme-sumire",
+  "css": " [data-panda-theme=sumire] {\n    --colors-sd-system-color-impression-primary: #733B85;\n    --colors-sd-system-color-impression-on-primary: #FFFFFF;\n    --colors-sd-system-color-impression-primary-container: #733B85;\n    --colors-sd-system-color-impression-on-primary-container: #FFFFFF;\n    --colors-sd-system-color-impression-secondary: #DCBDE4;\n    --colors-sd-system-color-impression-on-secondary: #000000;\n    --colors-sd-system-color-impression-secondary-container: #DCBDE4;\n    --colors-sd-system-color-impression-on-secondary-container: #000000;\n    --colors-sd-system-color-impression-tertiary: #073165;\n    --colors-sd-system-color-impression-on-tertiary: #FFFFFF;\n    --colors-sd-system-color-impression-tertiary-container: #073165;\n    --colors-sd-system-color-impression-on-tertiary-container: #FFFFFF;\n    --colors-sd-system-color-impression-notice: #FFE600;\n    --colors-sd-system-color-impression-on-notice: #000000;\n    --colors-sd-system-color-impression-notice-container: #FFE600;\n    --colors-sd-system-color-impression-on-notice-container: #000000;\n    --colors-sd-system-color-impression-negative: #CE0037;\n    --colors-sd-system-color-impression-on-negative: #FFFFFF;\n    --colors-sd-system-color-impression-negative-container: #FCD6D3;\n    --colors-sd-system-color-impression-on-negative-container: #000000;\n    --colors-sd-system-color-impression-positive: #40A683;\n    --colors-sd-system-color-impression-on-positive: #FFFFFF;\n    --colors-sd-system-color-impression-positive-container: #40A683;\n    --colors-sd-system-color-impression-on-positive-container: #FFFFFF;\n    --colors-sd-system-color-component-surface: #FFFFFF;\n    --colors-sd-system-color-component-on-surface: #000000;\n    --colors-sd-system-color-component-on-surface-variant: #696966;\n    --colors-sd-system-color-component-inverse-surface: #232322;\n    --colors-sd-system-color-component-inverse-on-surface: #FFFFFF;\n    --colors-sd-system-color-component-outline: #C8C7C2;\n    --colors-sd-system-color-component-outline-variant: #8C8B87;\n    --colors-sd-system-color-component-scrim: #00000033;\n    --colors-sd-system-color-interaction-disabled: #EFEEEB;\n    --colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;\n    --colors-sd-system-color-interaction-selected-surface: #DCBDE4;\n    --colors-sd-system-color-interaction-hovered: #00000033;\n    --colors-sd-system-color-interaction-hovered-variant: #0000000D;\n    --colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99\n}"
+}

package/styled-system/themes/theme-asagi.json

@@ -0,0 +1,5 @@
+{
+  "name": "asagi",
+  "id": "panda-theme-asagi",
+  "css": " [data-panda-theme=asagi] {\n    --colors-sd-system-color-impression-primary: #00757E;\n    --colors-sd-system-color-impression-on-primary: #FFFFFF;\n    --colors-sd-system-color-impression-primary-container: #00757E;\n    --colors-sd-system-color-impression-on-primary-container: #FFFFFF;\n    --colors-sd-system-color-impression-secondary: #AEEAD5;\n    --colors-sd-system-color-impression-on-secondary: #000000;\n    --colors-sd-system-color-impression-secondary-container: #AEEAD5;\n    --colors-sd-system-color-impression-on-secondary-container: #000000;\n    --colors-sd-system-color-impression-tertiary: #EFEEEB;\n    --colors-sd-system-color-impression-on-tertiary: #000000;\n    --colors-sd-system-color-impression-tertiary-container: #EFEEEB;\n    --colors-sd-system-color-impression-on-tertiary-container: #000000;\n    --colors-sd-system-color-impression-notice: #FFE600;\n    --colors-sd-system-color-impression-on-notice: #000000;\n    --colors-sd-system-color-impression-notice-container: #FFE600;\n    --colors-sd-system-color-impression-on-notice-container: #000000;\n    --colors-sd-system-color-impression-negative: #CE0037;\n    --colors-sd-system-color-impression-on-negative: #FFFFFF;\n    --colors-sd-system-color-impression-negative-container: #FCD6D3;\n    --colors-sd-system-color-impression-on-negative-container: #000000;\n    --colors-sd-system-color-impression-positive: #40A683;\n    --colors-sd-system-color-impression-on-positive: #FFFFFF;\n    --colors-sd-system-color-impression-positive-container: #40A683;\n    --colors-sd-system-color-impression-on-positive-container: #FFFFFF;\n    --colors-sd-system-color-component-surface: #FFFFFF;\n    --colors-sd-system-color-component-on-surface: #000000;\n    --colors-sd-system-color-component-on-surface-variant: #696966;\n    --colors-sd-system-color-component-inverse-surface: #232322;\n    --colors-sd-system-color-component-inverse-on-surface: #FFFFFF;\n    --colors-sd-system-color-component-outline: #C8C7C2;\n    --colors-sd-system-color-component-outline-variant: #8C8B87;\n    --colors-sd-system-color-component-scrim: #00000033;\n    --colors-sd-system-color-interaction-disabled: #EFEEEB;\n    --colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;\n    --colors-sd-system-color-interaction-selected-surface: #AEEAD5;\n    --colors-sd-system-color-interaction-hovered: #00000033;\n    --colors-sd-system-color-interaction-hovered-variant: #0000000D;\n    --colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99\n}"
+}

package/styled-system/themes/theme-kurikawa.json

@@ -0,0 +1,5 @@
+{
+  "name": "kurikawa",
+  "id": "panda-theme-kurikawa",
+  "css": " [data-panda-theme=kurikawa] {\n    --colors-sd-system-color-impression-primary: #803510;\n    --colors-sd-system-color-impression-on-primary: #FFFFFF;\n    --colors-sd-system-color-impression-primary-container: #803510;\n    --colors-sd-system-color-impression-on-primary-container: #FFFFFF;\n    --colors-sd-system-color-impression-secondary: #F7C6B0;\n    --colors-sd-system-color-impression-on-secondary: #000000;\n    --colors-sd-system-color-impression-secondary-container: #F7C6B0;\n    --colors-sd-system-color-impression-on-secondary-container: #000000;\n    --colors-sd-system-color-impression-tertiary: #F7EDE2;\n    --colors-sd-system-color-impression-on-tertiary: #000000;\n    --colors-sd-system-color-impression-tertiary-container: #F7EDE2;\n    --colors-sd-system-color-impression-on-tertiary-container: #000000;\n    --colors-sd-system-color-impression-notice: #FFE600;\n    --colors-sd-system-color-impression-on-notice: #000000;\n    --colors-sd-system-color-impression-notice-container: #FFE600;\n    --colors-sd-system-color-impression-on-notice-container: #000000;\n    --colors-sd-system-color-impression-negative: #CE0037;\n    --colors-sd-system-color-impression-on-negative: #FFFFFF;\n    --colors-sd-system-color-impression-negative-container: #FCD6D3;\n    --colors-sd-system-color-impression-on-negative-container: #000000;\n    --colors-sd-system-color-impression-positive: #40A683;\n    --colors-sd-system-color-impression-on-positive: #FFFFFF;\n    --colors-sd-system-color-impression-positive-container: #40A683;\n    --colors-sd-system-color-impression-on-positive-container: #FFFFFF;\n    --colors-sd-system-color-component-surface: #FFFFFF;\n    --colors-sd-system-color-component-on-surface: #000000;\n    --colors-sd-system-color-component-on-surface-variant: #696966;\n    --colors-sd-system-color-component-inverse-surface: #232322;\n    --colors-sd-system-color-component-inverse-on-surface: #FFFFFF;\n    --colors-sd-system-color-component-outline: #C8C7C2;\n    --colors-sd-system-color-component-outline-variant: #8C8B87;\n    --colors-sd-system-color-component-scrim: #00000033;\n    --colors-sd-system-color-interaction-disabled: #EFEEEB;\n    --colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;\n    --colors-sd-system-color-interaction-selected-surface: #F7C6B0;\n    --colors-sd-system-color-interaction-hovered: #00000033;\n    --colors-sd-system-color-interaction-hovered-variant: #0000000D;\n    --colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99\n}"
+}

package/styled-system/themes/theme-sumire.json

@@ -0,0 +1,5 @@
+{
+  "name": "sumire",
+  "id": "panda-theme-sumire",
+  "css": " [data-panda-theme=sumire] {\n    --colors-sd-system-color-impression-primary: #733B85;\n    --colors-sd-system-color-impression-on-primary: #FFFFFF;\n    --colors-sd-system-color-impression-primary-container: #733B85;\n    --colors-sd-system-color-impression-on-primary-container: #FFFFFF;\n    --colors-sd-system-color-impression-secondary: #DCBDE4;\n    --colors-sd-system-color-impression-on-secondary: #000000;\n    --colors-sd-system-color-impression-secondary-container: #DCBDE4;\n    --colors-sd-system-color-impression-on-secondary-container: #000000;\n    --colors-sd-system-color-impression-tertiary: #073165;\n    --colors-sd-system-color-impression-on-tertiary: #FFFFFF;\n    --colors-sd-system-color-impression-tertiary-container: #073165;\n    --colors-sd-system-color-impression-on-tertiary-container: #FFFFFF;\n    --colors-sd-system-color-impression-notice: #FFE600;\n    --colors-sd-system-color-impression-on-notice: #000000;\n    --colors-sd-system-color-impression-notice-container: #FFE600;\n    --colors-sd-system-color-impression-on-notice-container: #000000;\n    --colors-sd-system-color-impression-negative: #CE0037;\n    --colors-sd-system-color-impression-on-negative: #FFFFFF;\n    --colors-sd-system-color-impression-negative-container: #FCD6D3;\n    --colors-sd-system-color-impression-on-negative-container: #000000;\n    --colors-sd-system-color-impression-positive: #40A683;\n    --colors-sd-system-color-impression-on-positive: #FFFFFF;\n    --colors-sd-system-color-impression-positive-container: #40A683;\n    --colors-sd-system-color-impression-on-positive-container: #FFFFFF;\n    --colors-sd-system-color-component-surface: #FFFFFF;\n    --colors-sd-system-color-component-on-surface: #000000;\n    --colors-sd-system-color-component-on-surface-variant: #696966;\n    --colors-sd-system-color-component-inverse-surface: #232322;\n    --colors-sd-system-color-component-inverse-on-surface: #FFFFFF;\n    --colors-sd-system-color-component-outline: #C8C7C2;\n    --colors-sd-system-color-component-outline-variant: #8C8B87;\n    --colors-sd-system-color-component-scrim: #00000033;\n    --colors-sd-system-color-interaction-disabled: #EFEEEB;\n    --colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;\n    --colors-sd-system-color-interaction-selected-surface: #DCBDE4;\n    --colors-sd-system-color-interaction-hovered: #00000033;\n    --colors-sd-system-color-interaction-hovered-variant: #0000000D;\n    --colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99\n}"
+}

package/styled-system/themes/theme-tsutsuji.json

@@ -0,0 +1,5 @@
+{
+  "name": "tsutsuji",
+  "id": "panda-theme-tsutsuji",
+  "css": " [data-panda-theme=tsutsuji] {\n    --colors-sd-system-color-impression-primary: #B9336B;\n    --colors-sd-system-color-impression-on-primary: #FFFFFF;\n    --colors-sd-system-color-impression-primary-container: #F5C1D1;\n    --colors-sd-system-color-impression-on-primary-container: #000000;\n    --colors-sd-system-color-impression-secondary: #F6D7E0;\n    --colors-sd-system-color-impression-on-secondary: #000000;\n    --colors-sd-system-color-impression-secondary-container: #F6D7E0;\n    --colors-sd-system-color-impression-on-secondary-container: #000000;\n    --colors-sd-system-color-impression-tertiary: #401026;\n    --colors-sd-system-color-impression-on-tertiary: #FFFFFF;\n    --colors-sd-system-color-impression-tertiary-container: #401026;\n    --colors-sd-system-color-impression-on-tertiary-container: #FFFFFF;\n    --colors-sd-system-color-impression-notice: #FFE600;\n    --colors-sd-system-color-impression-on-notice: #000000;\n    --colors-sd-system-color-impression-notice-container: #FFE600;\n    --colors-sd-system-color-impression-on-notice-container: #000000;\n    --colors-sd-system-color-impression-negative: #CE0037;\n    --colors-sd-system-color-impression-on-negative: #FFFFFF;\n    --colors-sd-system-color-impression-negative-container: #FCD6D3;\n    --colors-sd-system-color-impression-on-negative-container: #000000;\n    --colors-sd-system-color-impression-positive: #40A683;\n    --colors-sd-system-color-impression-on-positive: #FFFFFF;\n    --colors-sd-system-color-impression-positive-container: #40A683;\n    --colors-sd-system-color-impression-on-positive-container: #FFFFFF;\n    --colors-sd-system-color-component-surface: #FFFFFF;\n    --colors-sd-system-color-component-on-surface: #000000;\n    --colors-sd-system-color-component-on-surface-variant: #696966;\n    --colors-sd-system-color-component-inverse-surface: #232322;\n    --colors-sd-system-color-component-inverse-on-surface: #FFFFFF;\n    --colors-sd-system-color-component-outline: #C8C7C2;\n    --colors-sd-system-color-component-outline-variant: #8C8B87;\n    --colors-sd-system-color-component-scrim: #00000033;\n    --colors-sd-system-color-interaction-disabled: #EFEEEB;\n    --colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;\n    --colors-sd-system-color-interaction-selected-surface: #F6D7E0;\n    --colors-sd-system-color-interaction-hovered: #00000033;\n    --colors-sd-system-color-interaction-hovered-variant: #0000000D;\n    --colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99\n}"
+}

package/styled-system/themes/tsutsuji.json

@@ -0,0 +1,5 @@
+{
+  "name": "tsutsuji",
+  "id": "panda-theme-tsutsuji",
+  "css": " [data-panda-theme=tsutsuji] {\n    --colors-sd-system-color-impression-primary: #B9336B;\n    --colors-sd-system-color-impression-on-primary: #FFFFFF;\n    --colors-sd-system-color-impression-primary-container: #F5C1D1;\n    --colors-sd-system-color-impression-on-primary-container: #000000;\n    --colors-sd-system-color-impression-secondary: #F6D7E0;\n    --colors-sd-system-color-impression-on-secondary: #000000;\n    --colors-sd-system-color-impression-secondary-container: #F6D7E0;\n    --colors-sd-system-color-impression-on-secondary-container: #000000;\n    --colors-sd-system-color-impression-tertiary: #401026;\n    --colors-sd-system-color-impression-on-tertiary: #FFFFFF;\n    --colors-sd-system-color-impression-tertiary-container: #401026;\n    --colors-sd-system-color-impression-on-tertiary-container: #FFFFFF;\n    --colors-sd-system-color-impression-notice: #FFE600;\n    --colors-sd-system-color-impression-on-notice: #000000;\n    --colors-sd-system-color-impression-notice-container: #FFE600;\n    --colors-sd-system-color-impression-on-notice-container: #000000;\n    --colors-sd-system-color-impression-negative: #CE0037;\n    --colors-sd-system-color-impression-on-negative: #FFFFFF;\n    --colors-sd-system-color-impression-negative-container: #FCD6D3;\n    --colors-sd-system-color-impression-on-negative-container: #000000;\n    --colors-sd-system-color-impression-positive: #40A683;\n    --colors-sd-system-color-impression-on-positive: #FFFFFF;\n    --colors-sd-system-color-impression-positive-container: #40A683;\n    --colors-sd-system-color-impression-on-positive-container: #FFFFFF;\n    --colors-sd-system-color-component-surface: #FFFFFF;\n    --colors-sd-system-color-component-on-surface: #000000;\n    --colors-sd-system-color-component-on-surface-variant: #696966;\n    --colors-sd-system-color-component-inverse-surface: #232322;\n    --colors-sd-system-color-component-inverse-on-surface: #FFFFFF;\n    --colors-sd-system-color-component-outline: #C8C7C2;\n    --colors-sd-system-color-component-outline-variant: #8C8B87;\n    --colors-sd-system-color-component-scrim: #00000033;\n    --colors-sd-system-color-interaction-disabled: #EFEEEB;\n    --colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;\n    --colors-sd-system-color-interaction-selected-surface: #F6D7E0;\n    --colors-sd-system-color-interaction-hovered: #00000033;\n    --colors-sd-system-color-interaction-hovered-variant: #0000000D;\n    --colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99\n}"
+}

package/styled-system/tokens/index.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { Token } from './tokens';
+
+export declare const token: {
+  (path: Token, fallback?: string): string
+  var: (path: Token, fallback?: string) => string
+}
+
+export * from './tokens';