@seaguntech/design-system 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SeagunTech
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+# @seaguntech/design-system
+
+Tailwind CSS v4 token package for Seaguntech UI.
+
+## What this package owns
+
+- Design tokens (`@theme`) and semantic color variables.
+- Light and dark theme variable assignments.
+- Global base styles (font, focus ring, base surface/foreground behavior).
+- Shared PostCSS config export for Tailwind v4.
+
+This package is the single source of truth for design tokens and theme variables.
+
+## Recommended usage
+
+If you use `@seaguntech/ui` components, import the UI stylesheet only:
+
+```css
+@import '@seaguntech/ui/styles.css';
+```
+
+`@seaguntech/ui/styles.css` already imports `@seaguntech/design-system`.
+
+If you need tokens/theme without component styles, import design-system directly:
+
+```css
+@import '@seaguntech/design-system';
+```
+
+## Best practices
+
+- Do not redefine core theme tokens in app-level `globals.css`.
+- Prefer semantic tokens from this package (`--color-background`, `--color-foreground`, etc.).
+- Keep theme overrides centralized in `theme-light.css` and `theme-dark.css`.

package/design-tokens.css

@@ -0,0 +1,59 @@
+@import 'tailwindcss';
+
+@theme {
+  --color-*: initial;
+  --font-*: initial;
+
+  --color-neutral-50: oklch(0.99 0.002 250);
+  --color-neutral-100: oklch(0.97 0.004 250);
+  --color-neutral-200: oklch(0.93 0.008 250);
+  --color-neutral-300: oklch(0.87 0.012 250);
+  --color-neutral-400: oklch(0.73 0.016 250);
+  --color-neutral-500: oklch(0.58 0.02 250);
+  --color-neutral-700: oklch(0.38 0.018 250);
+  --color-neutral-900: oklch(0.2 0.012 250);
+  --color-neutral-950: oklch(0.14 0.008 250);
+
+  --color-brand-300: oklch(0.78 0.12 250);
+  --color-brand-400: oklch(0.68 0.16 250);
+  --color-brand-500: oklch(0.58 0.2 250);
+  --color-brand-600: oklch(0.5 0.2 250);
+  --color-brand-700: oklch(0.42 0.18 250);
+  --color-brand-800: oklch(0.35 0.15 250);
+
+  --color-error-400: oklch(0.68 0.2 25);
+  --color-error-500: oklch(0.55 0.22 25);
+
+  --color-background: oklch(1 0 0);
+  --color-foreground: var(--color-neutral-950);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: var(--color-neutral-950);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: var(--color-neutral-950);
+  --color-primary: var(--color-brand-600);
+  --color-primary-foreground: oklch(0.99 0 0);
+  --color-secondary: var(--color-neutral-100);
+  --color-secondary-foreground: var(--color-neutral-950);
+  --color-muted: var(--color-neutral-100);
+  --color-muted-foreground: var(--color-neutral-500);
+  --color-accent: var(--color-neutral-100);
+  --color-accent-foreground: var(--color-neutral-950);
+  --color-destructive: var(--color-error-500);
+  --color-destructive-foreground: oklch(0.99 0 0);
+  --color-border: var(--color-neutral-200);
+  --color-input: var(--color-neutral-200);
+  --color-ring: var(--color-brand-600);
+
+  --font-sans:
+    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono:
+    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+}
+
+@custom-variant dark (&:where(.dark, .dark *));

package/globals.css

@@ -0,0 +1,39 @@
+@import 'tailwindcss';
+@import './design-tokens.css';
+@import './theme-light.css';
+@import './theme-dark.css';
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+
+  html {
+    font-family: var(--font-sans);
+  }
+
+  body {
+    margin: 0;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+}
+
+@utility text-fg-primary {
+  color: var(--color-foreground);
+}
+
+@utility text-fg-muted {
+  color: var(--color-muted-foreground);
+}
+
+@utility bg-surface {
+  background-color: var(--color-card);
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@seaguntech/design-system",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Tailwind CSS v4 design tokens for Seaguntech UI",
+  "exports": {
+    ".": "./globals.css",
+    "./globals": "./globals.css",
+    "./design-tokens": "./design-tokens.css",
+    "./theme-light": "./theme-light.css",
+    "./theme-dark": "./theme-dark.css",
+    "./postcss-config": "./postcss-config.js"
+  },
+  "files": [
+    "*.css",
+    "postcss-config.js"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.16",
+    "@types/node": "^22.15.3",
+    "eslint": "^9.39.1",
+    "postcss": "^8.5.6",
+    "prettier": "^3.7.4",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.9.3",
+    "@seaguntech/eslint-config": "0.0.0",
+    "@seaguntech/prettier-config": "0.0.0"
+  },
+  "prettier": "@seaguntech/prettier-config/base",
+  "scripts": {
+    "build": "echo 'design-system ready'",
+    "lint": "echo 'no lint yet'",
+    "lint:fix": "echo 'no lint yet'",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write .",
+    "check-types": "echo 'no types'",
+    "test": "echo 'no tests'",
+    "test:watch": "echo 'no tests'",
+    "test:coverage": "echo 'no tests'",
+    "clean": "rm -rf dist coverage"
+  }
+}

package/postcss-config.js

@@ -0,0 +1,5 @@
+import tailwindcss from '@tailwindcss/postcss';
+
+export default {
+  plugins: [tailwindcss()],
+};

package/theme-dark.css

@@ -0,0 +1,21 @@
+.dark {
+  --color-background: oklch(0.14 0.008 250);
+  --color-foreground: oklch(0.99 0 0);
+  --color-card: oklch(0.2 0.012 250);
+  --color-card-foreground: oklch(0.99 0 0);
+  --color-popover: oklch(0.2 0.012 250);
+  --color-popover-foreground: oklch(0.99 0 0);
+  --color-primary: var(--color-brand-400);
+  --color-primary-foreground: oklch(0.14 0.008 250);
+  --color-secondary: oklch(0.28 0.015 250);
+  --color-secondary-foreground: oklch(0.99 0 0);
+  --color-muted: oklch(0.28 0.015 250);
+  --color-muted-foreground: oklch(0.73 0.016 250);
+  --color-accent: oklch(0.28 0.015 250);
+  --color-accent-foreground: oklch(0.99 0 0);
+  --color-destructive: var(--color-error-400);
+  --color-destructive-foreground: oklch(0.99 0 0);
+  --color-border: oklch(0.28 0.015 250);
+  --color-input: oklch(0.28 0.015 250);
+  --color-ring: var(--color-brand-400);
+}

package/theme-light.css

@@ -0,0 +1,21 @@
+:root {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.14 0.008 250);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.14 0.008 250);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.14 0.008 250);
+  --color-primary: var(--color-brand-600);
+  --color-primary-foreground: oklch(0.99 0 0);
+  --color-secondary: oklch(0.97 0.004 250);
+  --color-secondary-foreground: oklch(0.14 0.008 250);
+  --color-muted: oklch(0.97 0.004 250);
+  --color-muted-foreground: oklch(0.58 0.02 250);
+  --color-accent: oklch(0.97 0.004 250);
+  --color-accent-foreground: oklch(0.14 0.008 250);
+  --color-destructive: var(--color-error-500);
+  --color-destructive-foreground: oklch(0.99 0 0);
+  --color-border: oklch(0.93 0.008 250);
+  --color-input: oklch(0.93 0.008 250);
+  --color-ring: var(--color-brand-600);
+}