@simplysm/solid 13.0.0-beta.6

package/src/styles/patterns.styles.ts

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { bgSurface, borderDefault, textDefault, textPlaceholder } from "./tokens.styles";
+
+// ── inset 포커스 아웃라인 (focus-within 버전: Field, TextArea) ──
+export const insetFocusOutline = clsx(
+  "focus-within:[outline-style:solid]",
+  "focus-within:outline-1 focus-within:-outline-offset-1",
+  "focus-within:outline-primary-400 dark:focus-within:outline-primary-400",
+);
+
+// ── inset 포커스 아웃라인 (focus 버전: Checkbox, Select trigger) ──
+export const insetFocusOutlineSelf = clsx(
+  "focus:[outline-style:solid]",
+  "focus:outline-1 focus:-outline-offset-1",
+  "focus:outline-primary-400 dark:focus:outline-primary-400",
+);
+
+// ── inset 기본 레이아웃 ──
+export const insetBase = "w-full rounded-none border-none";
+
+// ── 폼 필드 공통 표면 (배경 + 텍스트 + 테두리 + 포커스) ──
+export const fieldSurface = clsx(
+  bgSurface,
+  textDefault,
+  "border",
+  borderDefault,
+  "rounded",
+  "focus-within:border-primary-500",
+);
+
+// ── 입력 요소 공통 ──
+export const inputBase = clsx("min-w-0 flex-1", "bg-transparent", "outline-none", textPlaceholder);

package/src/styles/tokens.styles.ts

@@ -0,0 +1,83 @@
+// ── 테두리 ──
+export const borderDefault = "border-base-300 dark:border-base-700";
+export const borderSubtle = "border-base-200 dark:border-base-800";
+
+// ── 표면 배경 ──
+export const bgSurface = "bg-white dark:bg-base-900";
+
+// ── 텍스트 ──
+export const textDefault = "text-base-900 dark:text-base-100";
+export const textMuted = "text-base-400 dark:text-base-500";
+export const textPlaceholder = "placeholder:text-base-400 dark:placeholder:text-base-500";
+
+// ── disabled ──
+export const disabledOpacity = "cursor-default opacity-50 pointer-events-none";
+
+// ── 사이즈 ──
+export type ComponentSize = "sm" | "lg";
+export const paddingSm = "px-1.5 py-0.5";
+export const paddingLg = "px-3 py-2";
+
+// ── 테마 ──
+export type SemanticTheme = "primary" | "info" | "success" | "warning" | "danger" | "base";
+
+export const themeTokens: Record<
+  SemanticTheme,
+  {
+    solid: string;
+    solidHover: string;
+    light: string;
+    text: string;
+    hoverBg: string;
+    border: string;
+  }
+> = {
+  primary: {
+    solid: "bg-primary-500 text-white",
+    solidHover: "hover:bg-primary-600 dark:hover:bg-primary-400",
+    light: "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100",
+    text: "text-primary-600 dark:text-primary-400",
+    hoverBg: "hover:bg-primary-100 dark:hover:bg-primary-800/30",
+    border: "border-primary-300 dark:border-primary-600",
+  },
+  info: {
+    solid: "bg-info-500 text-white",
+    solidHover: "hover:bg-info-600 dark:hover:bg-info-400",
+    light: "bg-info-100 text-info-900 dark:bg-info-900/40 dark:text-info-100",
+    text: "text-info-600 dark:text-info-400",
+    hoverBg: "hover:bg-info-100 dark:hover:bg-info-800/30",
+    border: "border-info-300 dark:border-info-600",
+  },
+  success: {
+    solid: "bg-success-500 text-white",
+    solidHover: "hover:bg-success-600 dark:hover:bg-success-400",
+    light: "bg-success-100 text-success-900 dark:bg-success-900/40 dark:text-success-100",
+    text: "text-success-600 dark:text-success-400",
+    hoverBg: "hover:bg-success-100 dark:hover:bg-success-800/30",
+    border: "border-success-300 dark:border-success-600",
+  },
+  warning: {
+    solid: "bg-warning-500 text-white",
+    solidHover: "hover:bg-warning-600 dark:hover:bg-warning-400",
+    light: "bg-warning-100 text-warning-900 dark:bg-warning-900/40 dark:text-warning-100",
+    text: "text-warning-600 dark:text-warning-400",
+    hoverBg: "hover:bg-warning-100 dark:hover:bg-warning-800/30",
+    border: "border-warning-300 dark:border-warning-600",
+  },
+  danger: {
+    solid: "bg-danger-500 text-white",
+    solidHover: "hover:bg-danger-600 dark:hover:bg-danger-400",
+    light: "bg-danger-100 text-danger-900 dark:bg-danger-900/40 dark:text-danger-100",
+    text: "text-danger-600 dark:text-danger-400",
+    hoverBg: "hover:bg-danger-100 dark:hover:bg-danger-800/30",
+    border: "border-danger-300 dark:border-danger-600",
+  },
+  base: {
+    solid: "bg-base-500 text-white",
+    solidHover: "hover:bg-base-600 dark:hover:bg-base-400",
+    light: "bg-base-100 text-base-900 dark:bg-base-800 dark:text-base-100",
+    text: "text-base-600 dark:text-base-300",
+    hoverBg: "hover:bg-base-100 dark:hover:bg-base-800/30",
+    border: "border-base-300 dark:border-base-700",
+  },
+};

package/tailwind.config.ts

@@ -0,0 +1,50 @@
+import colors from "tailwindcss/colors";
+import defaultTheme from "tailwindcss/defaultTheme";
+
+const lh = defaultTheme.lineHeight.normal; // "1.5"
+const sp = defaultTheme.spacing;
+
+const __dirname = new URL(".", import.meta.url).pathname
+  .replace(/^\/[^/]+\/@fs/, "") // Vite 가상 경로 제거
+  .replace(/index\.ts$/, ""); // re-export 시 index.ts 경로 제거
+
+// export const tailwindContent = [`${__dirname}**/*.tsx`];
+
+const fieldSizes = {
+  "field": `calc(${lh}rem + ${sp["1"]} + ${sp["1"]} + 2px)`,
+  "field-sm": `calc(${lh}rem + ${sp["0.5"]} + ${sp["0.5"]} + 2px)`,
+  "field-lg": `calc(${lh}rem + ${sp["2"]} + ${sp["2"]} + 2px)`,
+  "field-inset": `calc(${lh}rem + ${sp["1"]} + ${sp["1"]})`,
+  "field-inset-sm": `calc(${lh}rem + ${sp["0.5"]} + ${sp["0.5"]})`,
+  "field-inset-lg": `calc(${lh}rem + ${sp["2"]} + ${sp["2"]})`,
+};
+
+export default {
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.blue,
+        info: colors.sky,
+        success: colors.green,
+        warning: colors.amber,
+        danger: colors.red,
+        base: colors.zinc,
+      },
+      height: fieldSizes,
+      size: fieldSizes,
+      zIndex: {
+        "sidebar": "100",
+        "sidebar-backdrop": "99",
+        "busy": "500",
+        "dropdown": "1000",
+        "modal-backdrop": "1999",
+        "modal": "2000",
+      },
+    },
+  },
+  content: [`${__dirname}src/**/*.{ts,tsx}`],
+  corePlugins: {
+    aspectRatio: false, // Chrome 84 미지원
+  },
+};