@turtleclub/ui 0.0.1

package/src/styles/tokens/typography.css

@@ -0,0 +1,86 @@
+/**
+ * Turtle Design System - Core Typography Tokens
+ * 
+ * These define the typography scale, font families, and text styles
+ * for consistent text rendering across all components.
+ * 
+ * Naming Convention:
+ * --font-[property]-[size/variant]: [value]
+ * --text-[size]: [value]
+ */
+
+:root {
+  /* ===== FONT FAMILIES ===== */
+  /* Primary font stack for body text and UI elements */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
+               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 
+               sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 
+               "Segoe UI Symbol", "Noto Color Emoji";
+  
+  /* Monospace font stack for code and technical content */
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, 
+               "Liberation Mono", Menlo, monospace;
+  
+  /* Display font (same as sans for now, can be customized) */
+  --font-display: var(--font-sans);
+  
+  /* ===== FONT SIZES ===== */
+  /* Based on a modular scale for visual hierarchy */
+  --text-xs: 0.75rem;                /* 12px */
+  --text-sm: 0.875rem;               /* 14px */
+  --text-base: 1rem;                 /* 16px - Base size */
+  --text-lg: 1.125rem;               /* 18px */
+  --text-xl: 1.25rem;                /* 20px */
+  --text-2xl: 1.5rem;                /* 24px */
+  --text-3xl: 1.875rem;              /* 30px */
+  --text-4xl: 2.25rem;               /* 36px */
+  --text-5xl: 3rem;                  /* 48px */
+  --text-6xl: 3.75rem;               /* 60px */
+  --text-7xl: 4.5rem;                /* 72px */
+  --text-8xl: 6rem;                  /* 96px */
+  --text-9xl: 8rem;                  /* 128px */
+  
+  /* ===== LINE HEIGHTS ===== */
+  /* Corresponding line heights for each font size */
+  --leading-xs: 1rem;                /* 16px - for 12px text */
+  --leading-sm: 1.25rem;             /* 20px - for 14px text */
+  --leading-base: 1.5rem;            /* 24px - for 16px text */
+  --leading-lg: 1.75rem;             /* 28px - for 18px text */
+  --leading-xl: 1.75rem;             /* 28px - for 20px text */
+  --leading-2xl: 2rem;               /* 32px - for 24px text */
+  --leading-3xl: 2.25rem;            /* 36px - for 30px text */
+  --leading-4xl: 2.5rem;             /* 40px - for 36px text */
+  --leading-5xl: 1;                  /* 1 - tight for large text */
+  --leading-6xl: 1;                  /* 1 - tight for large text */
+  --leading-7xl: 1;                  /* 1 - tight for large text */
+  --leading-8xl: 1;                  /* 1 - tight for large text */
+  --leading-9xl: 1;                  /* 1 - tight for large text */
+  
+  /* Semantic line heights */
+  --leading-tight: 1.25;             /* Tight line height */
+  --leading-snug: 1.375;             /* Snug line height */
+  --leading-normal: 1.5;             /* Normal line height */
+  --leading-relaxed: 1.625;          /* Relaxed line height */
+  --leading-loose: 2;                /* Loose line height */
+  
+  /* ===== FONT WEIGHTS ===== */
+  /* Standard font weight scale */
+  --font-weight-thin: 100;           /* Thin */
+  --font-weight-extralight: 200;     /* Extra light */
+  --font-weight-light: 300;          /* Light */
+  --font-weight-normal: 400;         /* Normal/Regular */
+  --font-weight-medium: 500;         /* Medium */
+  --font-weight-semibold: 600;       /* Semi-bold */
+  --font-weight-bold: 700;           /* Bold */
+  --font-weight-extrabold: 800;      /* Extra bold */
+  --font-weight-black: 900;          /* Black */
+  
+  /* ===== LETTER SPACING ===== */
+  /* Letter spacing for different text styles */
+  --tracking-tighter: -0.05em;       /* Tighter letter spacing */
+  --tracking-tight: -0.025em;        /* Tight letter spacing */
+  --tracking-normal: 0em;            /* Normal letter spacing */
+  --tracking-wide: 0.025em;          /* Wide letter spacing */
+  --tracking-wider: 0.05em;          /* Wider letter spacing */
+  --tracking-widest: 0.1em;          /* Widest letter spacing */
+}

package/src/tokens/index.ts

@@ -0,0 +1,108 @@
+export const tokens = {
+  colors: {
+    // Turtle brand colors
+    neonGreen: 'oklch(0.86 0.16 142.5)',
+    darkGreen: 'oklch(0.24 0.16 142.5)', 
+    ninjaBlack: 'oklch(0.1 0.005 120)',
+    wiseWhite: 'oklch(0.98 0 0)',
+    wiseGray: 'oklch(0.17 0.003 120)',
+    mintCream: 'oklch(0.95 0.046 109)',
+    turtleYellow: 'oklch(0.97 0.21 98.2)',
+    turtleRed: 'oklch(0.6 0.28 29)',
+    whiteTransparent: 'oklch(0.98 0 0 / 0.02)',
+
+    // Semantic colors - light theme
+    light: {
+      background: 'oklch(1 0 0)',
+      foreground: 'oklch(0.141 0.005 285.823)',
+      card: 'oklch(1 0 0)',
+      cardForeground: 'oklch(0.141 0.005 285.823)',
+      popover: 'oklch(1 0 0)',
+      popoverForeground: 'oklch(0.141 0.005 285.823)',
+      primary: 'oklch(0.21 0.006 285.885)',
+      primaryForeground: 'oklch(0.985 0 0)',
+      secondary: 'oklch(0.967 0.001 286.375)',
+      secondaryForeground: 'oklch(0.21 0.006 285.885)',
+      muted: 'oklch(0.967 0.001 286.375)',
+      mutedForeground: 'oklch(0.552 0.016 285.938)',
+      accent: 'oklch(0.967 0.001 286.375)',
+      accentForeground: 'oklch(0.21 0.006 285.885)',
+      destructive: 'oklch(0.577 0.245 27.325)',
+      border: 'oklch(0.92 0.004 286.32)',
+      input: 'oklch(0.92 0.004 286.32)',
+      ring: 'oklch(0.705 0.015 286.067)',
+    },
+
+    // Semantic colors - dark theme
+    dark: {
+      background: 'oklch(0.141 0.005 285.823)',
+      foreground: 'oklch(0.985 0 0)',
+      card: 'oklch(0.21 0.006 285.885)',
+      cardForeground: 'oklch(0.985 0 0)',
+      popover: 'oklch(0.21 0.006 285.885)',
+      popoverForeground: 'oklch(0.985 0 0)',
+      primary: 'oklch(0.92 0.004 286.32)',
+      primaryForeground: 'oklch(0.21 0.006 285.885)',
+      secondary: 'oklch(0.274 0.006 286.033)',
+      secondaryForeground: 'oklch(0.985 0 0)',
+      muted: 'oklch(0.274 0.006 286.033)',
+      mutedForeground: 'oklch(0.705 0.015 286.067)',
+      accent: 'oklch(0.274 0.006 286.033)',
+      accentForeground: 'oklch(0.985 0 0)',
+      destructive: 'oklch(0.704 0.191 22.216)',
+      border: 'oklch(1 0 0 / 10%)',
+      input: 'oklch(1 0 0 / 15%)',
+      ring: 'oklch(0.552 0.016 285.938)',
+    }
+  },
+
+  spacing: {
+    xs: '0.25rem',    // 4px
+    sm: '0.5rem',     // 8px
+    md: '0.75rem',    // 12px
+    lg: '1rem',       // 16px
+    xl: '1.5rem',     // 24px
+    '2xl': '2rem',    // 32px
+    '3xl': '3rem',    // 48px
+    '4xl': '4rem',    // 64px
+  },
+
+  radius: {
+    none: '0',
+    sm: 'calc(0.625rem - 4px)',
+    md: 'calc(0.625rem - 2px)', 
+    lg: '0.625rem',
+    xl: 'calc(0.625rem + 4px)',
+    full: '9999px',
+  },
+
+  fontSize: {
+    xs: ['0.75rem', { lineHeight: '1rem' }],
+    sm: ['0.875rem', { lineHeight: '1.25rem' }],
+    base: ['1rem', { lineHeight: '1.5rem' }],
+    lg: ['1.125rem', { lineHeight: '1.75rem' }],
+    xl: ['1.25rem', { lineHeight: '1.75rem' }],
+    '2xl': ['1.5rem', { lineHeight: '2rem' }],
+    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+  },
+
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+
+  shadow: {
+    xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  }
+} as const
+
+export type Tokens = typeof tokens
+export type ColorTokens = typeof tokens.colors
+export type SpacingTokens = typeof tokens.spacing
+export type RadiusTokens = typeof tokens.radius

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "outDir": "./types",
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "strict": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": false
+  },
+  "include": ["src/**/*"]
+}

package/vite.config.js

@@ -0,0 +1,65 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import tailwindcss from '@tailwindcss/vite'
+
+const isCSS = process.env.BUILD_CSS === 'true'
+
+export default defineConfig({
+  plugins: isCSS ? [tailwindcss()] : [],
+  resolve: {
+    alias: {
+      '@': resolve(process.cwd(), 'src'),
+    },
+  },
+  build: isCSS ? {
+    // CSS build configuration
+    outDir: 'dist',
+    emptyOutDir: false,
+    cssMinify: true,
+    rollupOptions: {
+      input: resolve(process.cwd(), 'src/styles/globals.css'),
+      output: {
+        assetFileNames: 'styles.css',
+      },
+    },
+  } : {
+    // Component build configuration
+    lib: {
+      entry: resolve(process.cwd(), 'src/index.ts'),
+      name: 'TurtleUI',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`
+    },
+    outDir: 'dist',
+    sourcemap: true,
+    rollupOptions: {
+      external: [
+        'react', 
+        'react-dom',
+        'react/jsx-runtime',
+        '@radix-ui/react-slot',
+        '@radix-ui/react-label',
+        '@radix-ui/react-scroll-area',
+        '@radix-ui/react-select',
+        '@radix-ui/react-separator',
+        '@radix-ui/react-switch',
+        '@radix-ui/react-toggle',
+        '@radix-ui/react-toggle-group',
+        '@radix-ui/react-tooltip',
+        'class-variance-authority',
+        'clsx',
+        'tailwind-merge',
+        'lucide-react',
+        'next-themes',
+        'sonner'
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'ReactJSXRuntime'
+        }
+      }
+    }
+  }
+})