@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/core/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./tailwind-preset";

package/dist/core/index.js

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./tailwind-preset";

package/dist/core/tailwind-preset.cjs

@@ -0,0 +1,62 @@
+/**
+ * TTDK Design System — Official Tailwind CSS Preset (CommonJS)
+ */
+module.exports = {
+  theme: {
+    extend: {
+      spacing: {
+        "0": "var(--ttdk-spacing-0, 0px)",
+        "2": "var(--ttdk-spacing-2, 2px)",
+        "4": "var(--ttdk-spacing-4, 4px)",
+        "6": "var(--ttdk-spacing-6, 6px)",
+        "8": "var(--ttdk-spacing-8, 8px)",
+        "12": "var(--ttdk-spacing-12, 12px)",
+        "16": "var(--ttdk-spacing-16, 16px)",
+        "20": "var(--ttdk-spacing-20, 20px)",
+        "24": "var(--ttdk-spacing-24, 24px)",
+        "32": "var(--ttdk-spacing-32, 32px)",
+        "48": "var(--ttdk-spacing-48, 48px)",
+        "64": "var(--ttdk-spacing-64, 64px)",
+        "96": "var(--ttdk-spacing-96, 96px)",
+      },
+      boxShadow: {
+        "ttdk-sm": "var(--ttdk-shadow-sm, 0px 1px 10px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-md": "var(--ttdk-shadow-md, 0px 1px 15px 0px rgba(0, 0, 0, 0.1))",
+        "ttdk-lg": "var(--ttdk-shadow-lg, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+        "ttdk-top": "var(--ttdk-shadow-top, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+        "ttdk-bottom": "var(--ttdk-shadow-bottom, 0px 4px 16px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-right": "var(--ttdk-shadow-right, 4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-left": "var(--ttdk-shadow-left, -4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+      },
+      maxWidth: {
+        "ttdk-mobile": "var(--ttdk-grid-mobile-container, 328px)",
+        "ttdk-desktop": "var(--ttdk-grid-desktop-container, 1128px)",
+      },
+      colors: {
+        ttdk: {
+          primary: {
+            DEFAULT: "var(--ttdk-brand-default, #16b3ac)",
+            hover: "var(--ttdk-brand-strong, #128f8a)",
+            subtle: "var(--ttdk-brand-subtle, #b8edea)",
+          },
+          accent: {
+            DEFAULT: "var(--ttdk-color-brand-blue-500, #3899fe)",
+            hover: "var(--ttdk-color-brand-blue-600, #1e81e8)",
+          },
+          surface: {
+            DEFAULT: "var(--ttdk-bg-base-primary, #ffffff)",
+            subtle: "var(--ttdk-bg-secondary-disabled, #f1f2f3)",
+            dark: "var(--ttdk-color-neutral-black, #141313)",
+          },
+          border: {
+            DEFAULT: "var(--ttdk-stroke-subtle, #e4e5e7)",
+            dark: "var(--ttdk-stroke-subtle, #313336)",
+          },
+        },
+      },
+      fontFamily: {
+        sans: ["Manrope", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"],
+      },
+    },
+  },
+};

package/dist/core/tailwind-preset.d.cts

@@ -0,0 +1,63 @@
+export namespace theme {
+    namespace extend {
+        let spacing: {
+            "0": string;
+            "2": string;
+            "4": string;
+            "6": string;
+            "8": string;
+            "12": string;
+            "16": string;
+            "20": string;
+            "24": string;
+            "32": string;
+            "48": string;
+            "64": string;
+            "96": string;
+        };
+        let boxShadow: {
+            "ttdk-sm": string;
+            "ttdk-md": string;
+            "ttdk-lg": string;
+            "ttdk-top": string;
+            "ttdk-bottom": string;
+            "ttdk-right": string;
+            "ttdk-left": string;
+        };
+        let maxWidth: {
+            "ttdk-mobile": string;
+            "ttdk-desktop": string;
+        };
+        namespace colors {
+            namespace ttdk {
+                namespace primary {
+                    let DEFAULT: string;
+                    let hover: string;
+                    let subtle: string;
+                }
+                namespace accent {
+                    let DEFAULT_1: string;
+                    export { DEFAULT_1 as DEFAULT };
+                    let hover_1: string;
+                    export { hover_1 as hover };
+                }
+                namespace surface {
+                    let DEFAULT_2: string;
+                    export { DEFAULT_2 as DEFAULT };
+                    let subtle_1: string;
+                    export { subtle_1 as subtle };
+                    export let dark: string;
+                }
+                namespace border {
+                    let DEFAULT_3: string;
+                    export { DEFAULT_3 as DEFAULT };
+                    let dark_1: string;
+                    export { dark_1 as dark };
+                }
+            }
+        }
+        namespace fontFamily {
+            let sans: string[];
+        }
+    }
+}

package/dist/core/tailwind-preset.d.ts

@@ -0,0 +1,74 @@
+/**
+ * TTDK Design System — Official Tailwind CSS Preset
+ *
+ * Maps all design tokens (colors, spacing scale, shadows, breakpoints)
+ * to standard Tailwind CSS theme configuration.
+ *
+ * Usage in tailwind.config.js / tailwind.config.ts:
+ * ```js
+ * module.exports = {
+ *   presets: [require('@ttdk-design-system/library-vue/tailwind-preset')],
+ *   content: ['./src/**\/*.{vue,js,ts,jsx,tsx}']
+ * }
+ * ```
+ */
+export declare const ttdkTailwindPreset: {
+    theme: {
+        extend: {
+            spacing: {
+                "0": string;
+                "2": string;
+                "4": string;
+                "6": string;
+                "8": string;
+                "12": string;
+                "16": string;
+                "20": string;
+                "24": string;
+                "32": string;
+                "48": string;
+                "64": string;
+                "96": string;
+            };
+            boxShadow: {
+                "ttdk-sm": string;
+                "ttdk-md": string;
+                "ttdk-lg": string;
+                "ttdk-top": string;
+                "ttdk-bottom": string;
+                "ttdk-right": string;
+                "ttdk-left": string;
+            };
+            maxWidth: {
+                "ttdk-mobile": string;
+                "ttdk-desktop": string;
+            };
+            colors: {
+                ttdk: {
+                    primary: {
+                        DEFAULT: string;
+                        hover: string;
+                        subtle: string;
+                    };
+                    accent: {
+                        DEFAULT: string;
+                        hover: string;
+                    };
+                    surface: {
+                        DEFAULT: string;
+                        subtle: string;
+                        dark: string;
+                    };
+                    border: {
+                        DEFAULT: string;
+                        dark: string;
+                    };
+                };
+            };
+            fontFamily: {
+                sans: string[];
+            };
+        };
+    };
+};
+export default ttdkTailwindPreset;

package/dist/core/tailwind-preset.js

@@ -0,0 +1,79 @@
+/**
+ * TTDK Design System — Official Tailwind CSS Preset
+ *
+ * Maps all design tokens (colors, spacing scale, shadows, breakpoints)
+ * to standard Tailwind CSS theme configuration.
+ *
+ * Usage in tailwind.config.js / tailwind.config.ts:
+ * ```js
+ * module.exports = {
+ *   presets: [require('@ttdk-design-system/library-vue/tailwind-preset')],
+ *   content: ['./src/**\/*.{vue,js,ts,jsx,tsx}']
+ * }
+ * ```
+ */
+export const ttdkTailwindPreset = {
+    theme: {
+        extend: {
+            // 1. Spacing Scale TTDK (0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 48, 64, 96)
+            spacing: {
+                "0": "var(--ttdk-spacing-0, 0px)",
+                "2": "var(--ttdk-spacing-2, 2px)",
+                "4": "var(--ttdk-spacing-4, 4px)",
+                "6": "var(--ttdk-spacing-6, 6px)",
+                "8": "var(--ttdk-spacing-8, 8px)",
+                "12": "var(--ttdk-spacing-12, 12px)",
+                "16": "var(--ttdk-spacing-16, 16px)",
+                "20": "var(--ttdk-spacing-20, 20px)",
+                "24": "var(--ttdk-spacing-24, 24px)",
+                "32": "var(--ttdk-spacing-32, 32px)",
+                "48": "var(--ttdk-spacing-48, 48px)",
+                "64": "var(--ttdk-spacing-64, 64px)",
+                "96": "var(--ttdk-spacing-96, 96px)",
+            },
+            // 2. Shadows & Elevation TTDK
+            boxShadow: {
+                "ttdk-sm": "var(--ttdk-shadow-sm, 0px 1px 10px 0px rgba(0, 0, 0, 0.08))",
+                "ttdk-md": "var(--ttdk-shadow-md, 0px 1px 15px 0px rgba(0, 0, 0, 0.1))",
+                "ttdk-lg": "var(--ttdk-shadow-lg, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+                "ttdk-top": "var(--ttdk-shadow-top, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+                "ttdk-bottom": "var(--ttdk-shadow-bottom, 0px 4px 16px 0px rgba(0, 0, 0, 0.08))",
+                "ttdk-right": "var(--ttdk-shadow-right, 4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+                "ttdk-left": "var(--ttdk-shadow-left, -4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+            },
+            // 3. Responsive Container Widths
+            maxWidth: {
+                "ttdk-mobile": "var(--ttdk-grid-mobile-container, 328px)",
+                "ttdk-desktop": "var(--ttdk-grid-desktop-container, 1128px)",
+            },
+            // 4. Semantic & Brand Colors
+            colors: {
+                ttdk: {
+                    primary: {
+                        DEFAULT: "var(--ttdk-brand-default, #16b3ac)",
+                        hover: "var(--ttdk-brand-strong, #128f8a)",
+                        subtle: "var(--ttdk-brand-subtle, #b8edea)",
+                    },
+                    accent: {
+                        DEFAULT: "var(--ttdk-color-brand-blue-500, #3899fe)",
+                        hover: "var(--ttdk-color-brand-blue-600, #1e81e8)",
+                    },
+                    surface: {
+                        DEFAULT: "var(--ttdk-bg-base-primary, #ffffff)",
+                        subtle: "var(--ttdk-bg-secondary-disabled, #f1f2f3)",
+                        dark: "var(--ttdk-color-neutral-black, #141313)",
+                    },
+                    border: {
+                        DEFAULT: "var(--ttdk-stroke-subtle, #e4e5e7)",
+                        dark: "var(--ttdk-stroke-subtle, #313336)",
+                    },
+                },
+            },
+            // 5. Typography
+            fontFamily: {
+                sans: ["Manrope", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"],
+            },
+        },
+    },
+};
+export default ttdkTailwindPreset;