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

package/src/core/index.ts

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

package/src/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/src/core/tailwind-preset.ts

@@ -0,0 +1,85 @@
+/**
+ * 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;