@toyu-ui/solid 0.1.0 → 0.2.0

package/design/plain.css

@@ -0,0 +1,124 @@
+@layer tokens, product-theme, product-components;
+
+@layer product-theme {
+  [data-design-system='plain'] {
+    color-scheme: light dark;
+
+    --ty-design-name: plain;
+    --ty-color-background: Canvas;
+    --ty-color-on-background: CanvasText;
+    --ty-color-surface: Canvas;
+    --ty-color-surface-hover: color-mix(in srgb, CanvasText 6%, Canvas);
+    --ty-color-surface-pressed: color-mix(in srgb, CanvasText 10%, Canvas);
+    --ty-color-surface-elevated: Canvas;
+    --ty-color-text: CanvasText;
+    --ty-color-text-muted: color-mix(in srgb, CanvasText 70%, Canvas);
+    --ty-color-border: color-mix(in srgb, CanvasText 24%, Canvas);
+    --ty-color-border-strong: color-mix(in srgb, CanvasText 44%, Canvas);
+    --ty-color-accent: LinkText;
+    --ty-color-on-accent: Canvas;
+    --ty-color-danger: Mark;
+    --ty-color-on-danger: Canvas;
+
+    --ty-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --ty-font-size-100: 0.75rem;
+    --ty-font-size-200: 0.875rem;
+    --ty-font-size-300: 1rem;
+    --ty-font-size-400: 1.25rem;
+    --ty-font-size-500: 1.5rem;
+    --ty-font-weight-regular: 400;
+    --ty-font-weight-medium: 500;
+    --ty-font-weight-semibold: 600;
+    --ty-font-weight-bold: 700;
+    --ty-line-height-100: 1rem;
+    --ty-line-height-200: 1.25rem;
+    --ty-line-height-300: 1.5rem;
+    --ty-line-height-400: 1.75rem;
+    --ty-letter-spacing-label: 0;
+
+    --ty-space-0: 0;
+    --ty-space-1: 0.25rem;
+    --ty-space-2: 0.5rem;
+    --ty-space-3: 0.75rem;
+    --ty-space-4: 1rem;
+    --ty-space-5: 1.25rem;
+    --ty-space-6: 1.5rem;
+    --ty-space-8: 2rem;
+    --ty-space-10: 2.5rem;
+
+    --ty-radius-0: 0;
+    --ty-radius-1: 0.125rem;
+    --ty-radius-2: 0.25rem;
+    --ty-radius-3: 0.375rem;
+    --ty-radius-4: 0.5rem;
+    --ty-radius-pill: 9999px;
+
+    --ty-stroke-thin: 1px;
+    --ty-stroke-thick: 2px;
+    --ty-focus-width: 2px;
+    --ty-focus-offset: 2px;
+    --ty-focus-color: Highlight;
+
+    --ty-duration-fast: 100ms;
+    --ty-duration-normal: 150ms;
+    --ty-duration-slow: 240ms;
+    --ty-easing-standard: ease;
+    --ty-motion-feedback-duration: var(--ty-duration-fast);
+    --ty-motion-content-duration: var(--ty-duration-normal);
+    --ty-motion-easing: var(--ty-easing-standard);
+
+    --ty-control-radius: var(--ty-radius-2);
+    --ty-control-border-width: var(--ty-stroke-thin);
+    --ty-control-font-size: var(--ty-font-size-200);
+    --ty-control-padding-inline: var(--ty-space-3);
+    --ty-control-padding-block: var(--ty-space-1);
+    --ty-control-gap: var(--ty-space-2);
+    --ty-control-min-block-size: 2rem;
+
+    --ty-layout-page-gutter: clamp(1rem, 3vw, 2rem);
+    --ty-layout-card-gap: var(--ty-space-4);
+    --ty-layout-section-gap: var(--ty-space-6);
+    --ty-layout-content-measure: 72rem;
+
+    background: var(--ty-color-background);
+    color: var(--ty-color-text);
+    font-family: var(--ty-font-family);
+  }
+
+  [data-design-system='plain'][data-color-scheme='light'] {
+    color-scheme: light;
+  }
+
+  [data-design-system='plain'][data-color-scheme='dark'] {
+    color-scheme: dark;
+  }
+}
+
+@layer product-components {
+  [data-design-system='plain'] tyui-button,
+  [data-design-system='plain'] tyui-input,
+  [data-design-system='plain'] tyui-checkbox,
+  [data-design-system='plain'] tyui-radio,
+  [data-design-system='plain'] tyui-radio-group {
+    font-family: var(--ty-font-family);
+  }
+
+  [data-design-system='plain'] tyui-button {
+    --ty-button-radius: var(--ty-control-radius);
+    --ty-button-min-block-size: var(--ty-control-min-block-size);
+    --ty-button-padding-inline: var(--ty-control-padding-inline);
+    --ty-button-padding-block: var(--ty-control-padding-block);
+    --ty-button-gap: var(--ty-control-gap);
+    --ty-button-font-size: var(--ty-control-font-size);
+    --ty-button-border-width: var(--ty-control-border-width);
+  }
+
+  [data-design-system='plain'] tyui-input {
+    --ty-input-radius: var(--ty-control-radius);
+    --ty-input-min-block-size: var(--ty-control-min-block-size);
+    --ty-input-padding-inline: var(--ty-control-padding-inline);
+    --ty-input-padding-block: var(--ty-control-padding-block);
+    --ty-input-gap: var(--ty-control-gap);
+    --ty-input-font-size: var(--ty-control-font-size);
+  }
+}

package/design.d.ts

@@ -0,0 +1,20 @@
+import { Accessor } from 'solid-js';
+export type TyuiDesignName = 'plain' | 'atmospheric-glass' | 'fluent-web';
+export type TyuiDesignAlias = 'glass' | 'fluent';
+export type TyuiDesignInput = TyuiDesignName | TyuiDesignAlias;
+export type TyuiColorScheme = 'light' | 'dark' | 'auto';
+export type TyuiDesignOptions = {
+    target?: Element | undefined;
+    colorScheme?: TyuiColorScheme | undefined;
+};
+export type TyuiDesignAttributes = {
+    'data-design-system': TyuiDesignName;
+    'data-color-scheme'?: Exclude<TyuiColorScheme, 'auto'> | undefined;
+};
+export declare function resolveTyuiDesignName(design: TyuiDesignInput): TyuiDesignName;
+export declare function getTyuiDesignAttributes(design: TyuiDesignInput, options?: Pick<TyuiDesignOptions, 'colorScheme'>): TyuiDesignAttributes;
+export declare function setTyuiDesign(design: TyuiDesignInput, options?: TyuiDesignOptions): Element | undefined;
+export declare function clearTyuiDesign(target?: HTMLElement): Element | undefined;
+export declare function createTyuiDesignEffect(design: Accessor<TyuiDesignInput>, options?: Omit<TyuiDesignOptions, 'colorScheme'> & {
+    colorScheme?: Accessor<TyuiColorScheme | undefined> | TyuiColorScheme | undefined;
+}): void;

package/design.js

@@ -0,0 +1,43 @@
+import { createEffect as s } from "solid-js";
+const o = {
+  plain: "plain",
+  glass: "atmospheric-glass",
+  "atmospheric-glass": "atmospheric-glass",
+  fluent: "fluent-web",
+  "fluent-web": "fluent-web"
+};
+function a(e) {
+  return o[e];
+}
+function n(e, t = {}) {
+  const c = {
+    "data-design-system": a(e)
+  };
+  return t.colorScheme && t.colorScheme !== "auto" && (c["data-color-scheme"] = t.colorScheme), c;
+}
+function i(e, t = {}) {
+  const c = t.target ?? globalThis.document?.documentElement;
+  if (!c) return;
+  const r = n(e, t);
+  return c.setAttribute("data-design-system", r["data-design-system"]), r["data-color-scheme"] ? c.setAttribute("data-color-scheme", r["data-color-scheme"]) : c.removeAttribute("data-color-scheme"), c;
+}
+function l(e = globalThis.document?.documentElement) {
+  if (e)
+    return e.removeAttribute("data-design-system"), e.removeAttribute("data-color-scheme"), e;
+}
+function m(e, t = {}) {
+  s(() => {
+    const c = typeof t.colorScheme == "function" ? t.colorScheme() : t.colorScheme;
+    i(e(), {
+      target: t.target,
+      colorScheme: c
+    });
+  });
+}
+export {
+  l as clearTyuiDesign,
+  m as createTyuiDesignEffect,
+  n as getTyuiDesignAttributes,
+  a as resolveTyuiDesignName,
+  i as setTyuiDesign
+};

package/index.d.ts

@@ -3,4 +3,5 @@ export * from './checkbox';
 export * from './input';
 export * from './radio';
 export * from './radio-group';
+export * from './design';
 export * from './jsx';

package/index.js

@@ -1,12 +1,18 @@
-import { Button as t } from "./button.js";
-import { Checkbox as e } from "./checkbox.js";
+import { Button as r } from "./button.js";
+import { Checkbox as i } from "./checkbox.js";
 import { Input as f } from "./input.js";
-import { Radio as u } from "./radio.js";
-import { RadioGroup as d } from "./radio-group.js";
+import { Radio as s } from "./radio.js";
+import { RadioGroup as n } from "./radio-group.js";
+import { clearTyuiDesign as g, createTyuiDesignEffect as a, getTyuiDesignAttributes as y, resolveTyuiDesignName as D, setTyuiDesign as T } from "./design.js";
 export {
-  t as Button,
-  e as Checkbox,
+  r as Button,
+  i as Checkbox,
   f as Input,
-  u as Radio,
-  d as RadioGroup
+  s as Radio,
+  n as RadioGroup,
+  g as clearTyuiDesign,
+  a as createTyuiDesignEffect,
+  y as getTyuiDesignAttributes,
+  D as resolveTyuiDesignName,
+  T as setTyuiDesign
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toyu-ui/solid",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "keywords": [
     "tanstack-intent"
   ],
@@ -15,7 +15,9 @@
     "directory": "libs/solid"
   },
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -48,6 +50,30 @@
       "types": "./jsx.d.ts",
       "default": "./jsx.js"
     },
+    "./design": {
+      "types": "./design.d.ts",
+      "default": "./design.js"
+    },
+    "./design/plain.css": {
+      "types": "./design/css.d.ts",
+      "default": "./design/plain.css"
+    },
+    "./design/glass.css": {
+      "types": "./design/css.d.ts",
+      "default": "./design/glass.css"
+    },
+    "./design/atmospheric-glass.css": {
+      "types": "./design/css.d.ts",
+      "default": "./design/atmospheric-glass.css"
+    },
+    "./design/fluent.css": {
+      "types": "./design/css.d.ts",
+      "default": "./design/fluent.css"
+    },
+    "./design/fluent-web.css": {
+      "types": "./design/css.d.ts",
+      "default": "./design/fluent-web.css"
+    },
     "./define": {
       "types": "./define.d.ts",
       "default": "./define.js"