@jsekulowicz/ds-tokens 0.1.0

package/dist/theme-default-dark.css

@@ -0,0 +1,226 @@
+/* Generated by @jsekulowicz/ds-tokens — do not edit by hand. */
+/* Run `pnpm --filter @jsekulowicz/ds-tokens build` to regenerate. */
+
+@layer ds.theme {
+  [data-ds-theme="dark"] {
+    color-scheme: dark;
+    --ds-color-bg: #222425;
+    --ds-color-bg-subtle: #2B2D2E;
+    --ds-color-bg-muted: #363839;
+    --ds-color-bg-inverse: #FAF8F5;
+    --ds-color-fg: #F2EFEA;
+    --ds-color-fg-muted: #A6A6A9;
+    --ds-color-fg-subtle: #86868A;
+    --ds-color-fg-inverse: #0B0B0C;
+    --ds-color-accent: #6A95E8;
+    --ds-color-accent-hover: #5A84D4;
+    --ds-color-accent-active: #4A72CC;
+    --ds-color-accent-fg: #0B0B0C;
+    --ds-color-accent-subtle: rgba(74, 114, 204, 0.18);
+    --ds-color-border: rgba(242, 239, 234, 0.14);
+    --ds-color-border-strong: #56565B;
+    --ds-color-border-subtle: rgba(242, 239, 234, 0.06);
+    --ds-color-focus: rgba(106, 149, 232, 0.45);
+    --ds-color-success: #1F7A48;
+    --ds-color-success-subtle: rgba(31, 122, 72, 0.22);
+    --ds-color-warning: #A6620B;
+    --ds-color-warning-subtle: rgba(166, 98, 11, 0.25);
+    --ds-color-danger: #B21A0A;
+    --ds-color-danger-subtle: rgba(178, 26, 10, 0.22);
+    --ds-color-chart-1: #7AA3F5;
+    --ds-color-chart-2: #50D8D4;
+    --ds-color-chart-3: #F7A53E;
+    --ds-color-chart-4: #F472B6;
+    --ds-color-chart-5: #70E380;
+    --ds-color-chart-6: #B995FF;
+    --ds-space-0: 0;
+    --ds-space-1: 0.25rem;
+    --ds-space-2: 0.5rem;
+    --ds-space-3: 0.75rem;
+    --ds-space-4: 1rem;
+    --ds-space-5: 1.25rem;
+    --ds-space-6: 1.5rem;
+    --ds-space-8: 2rem;
+    --ds-space-10: 2.5rem;
+    --ds-space-12: 3rem;
+    --ds-space-16: 4rem;
+    --ds-space-20: 5rem;
+    --ds-space-24: 6rem;
+    --ds-space-32: 8rem;
+    --ds-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
+    --ds-font-body: 'General Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+    --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+    --ds-font-size-3xs: 0.6875rem;
+    --ds-font-size-2xs: 0.75rem;
+    --ds-font-size-xs: 0.8125rem;
+    --ds-font-size-sm: 0.875rem;
+    --ds-font-size-md: 1rem;
+    --ds-font-size-lg: 1.125rem;
+    --ds-font-size-xl: 1.375rem;
+    --ds-font-size-2xl: 1.75rem;
+    --ds-font-size-3xl: 2.25rem;
+    --ds-font-size-4xl: 3rem;
+    --ds-font-size-5xl: 4rem;
+    --ds-font-weight-regular: 400;
+    --ds-font-weight-medium: 500;
+    --ds-font-weight-semibold: 600;
+    --ds-font-weight-bold: 700;
+    --ds-line-height-tight: 1.1;
+    --ds-line-height-snug: 1.25;
+    --ds-line-height-normal: 1.45;
+    --ds-line-height-relaxed: 1.6;
+    --ds-letter-spacing-tight: -0.02em;
+    --ds-letter-spacing-normal: 0;
+    --ds-letter-spacing-wide: 0.04em;
+    --ds-letter-spacing-display: -0.01em;
+    --ds-radius-none: 0;
+    --ds-radius-xs: 2px;
+    --ds-radius-sm: 4px;
+    --ds-radius-md: 8px;
+    --ds-radius-lg: 12px;
+    --ds-radius-full: 9999px;
+    --ds-border-hairline: 1px;
+    --ds-border-regular: 1.5px;
+    --ds-border-heavy: 2px;
+    --ds-shadow-none: none;
+    --ds-shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.06);
+    --ds-shadow-md: 0 4px 12px rgba(11, 11, 12, 0.08), 0 1px 2px rgba(11, 11, 12, 0.04);
+    --ds-shadow-lg: 0 12px 32px rgba(11, 11, 12, 0.10), 0 4px 8px rgba(11, 11, 12, 0.06);
+    --ds-shadow-focus: 0 0 0 3px rgba(74, 114, 204, 0.35);
+    --ds-duration-instant: 80ms;
+    --ds-duration-fast: 120ms;
+    --ds-duration-normal: 180ms;
+    --ds-duration-slow: 240ms;
+    --ds-duration-slower: 320ms;
+    --ds-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --ds-easing-emphasized: cubic-bezier(0.2, 0, 0.1, 1.1);
+    --ds-easing-enter: cubic-bezier(0, 0, 0, 1);
+    --ds-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+    --ds-breakpoint-sm: 480px;
+    --ds-breakpoint-md: 768px;
+    --ds-breakpoint-lg: 1024px;
+    --ds-breakpoint-xl: 1280px;
+    --ds-breakpoint-2xl: 1536px;
+    --ds-z-index-base: 0;
+    --ds-z-index-raised: 10;
+    --ds-z-index-dropdown: 100;
+    --ds-z-index-sticky: 200;
+    --ds-z-index-overlay: 300;
+    --ds-z-index-modal: 400;
+    --ds-z-index-toast: 500;
+    --ds-z-index-tooltip: 600;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  @layer ds.theme {
+    :root:not([data-ds-theme]) {
+      color-scheme: dark;
+      --ds-color-bg: #222425;
+      --ds-color-bg-subtle: #2B2D2E;
+      --ds-color-bg-muted: #363839;
+      --ds-color-bg-inverse: #FAF8F5;
+      --ds-color-fg: #F2EFEA;
+      --ds-color-fg-muted: #A6A6A9;
+      --ds-color-fg-subtle: #86868A;
+      --ds-color-fg-inverse: #0B0B0C;
+      --ds-color-accent: #6A95E8;
+      --ds-color-accent-hover: #5A84D4;
+      --ds-color-accent-active: #4A72CC;
+      --ds-color-accent-fg: #0B0B0C;
+      --ds-color-accent-subtle: rgba(74, 114, 204, 0.18);
+      --ds-color-border: rgba(242, 239, 234, 0.14);
+      --ds-color-border-strong: #56565B;
+      --ds-color-border-subtle: rgba(242, 239, 234, 0.06);
+      --ds-color-focus: rgba(106, 149, 232, 0.45);
+      --ds-color-success: #1F7A48;
+      --ds-color-success-subtle: rgba(31, 122, 72, 0.22);
+      --ds-color-warning: #A6620B;
+      --ds-color-warning-subtle: rgba(166, 98, 11, 0.25);
+      --ds-color-danger: #B21A0A;
+      --ds-color-danger-subtle: rgba(178, 26, 10, 0.22);
+      --ds-color-chart-1: #7AA3F5;
+      --ds-color-chart-2: #50D8D4;
+      --ds-color-chart-3: #F7A53E;
+      --ds-color-chart-4: #F472B6;
+      --ds-color-chart-5: #70E380;
+      --ds-color-chart-6: #B995FF;
+      --ds-space-0: 0;
+      --ds-space-1: 0.25rem;
+      --ds-space-2: 0.5rem;
+      --ds-space-3: 0.75rem;
+      --ds-space-4: 1rem;
+      --ds-space-5: 1.25rem;
+      --ds-space-6: 1.5rem;
+      --ds-space-8: 2rem;
+      --ds-space-10: 2.5rem;
+      --ds-space-12: 3rem;
+      --ds-space-16: 4rem;
+      --ds-space-20: 5rem;
+      --ds-space-24: 6rem;
+      --ds-space-32: 8rem;
+      --ds-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
+      --ds-font-body: 'General Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+      --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+      --ds-font-size-3xs: 0.6875rem;
+      --ds-font-size-2xs: 0.75rem;
+      --ds-font-size-xs: 0.8125rem;
+      --ds-font-size-sm: 0.875rem;
+      --ds-font-size-md: 1rem;
+      --ds-font-size-lg: 1.125rem;
+      --ds-font-size-xl: 1.375rem;
+      --ds-font-size-2xl: 1.75rem;
+      --ds-font-size-3xl: 2.25rem;
+      --ds-font-size-4xl: 3rem;
+      --ds-font-size-5xl: 4rem;
+      --ds-font-weight-regular: 400;
+      --ds-font-weight-medium: 500;
+      --ds-font-weight-semibold: 600;
+      --ds-font-weight-bold: 700;
+      --ds-line-height-tight: 1.1;
+      --ds-line-height-snug: 1.25;
+      --ds-line-height-normal: 1.45;
+      --ds-line-height-relaxed: 1.6;
+      --ds-letter-spacing-tight: -0.02em;
+      --ds-letter-spacing-normal: 0;
+      --ds-letter-spacing-wide: 0.04em;
+      --ds-letter-spacing-display: -0.01em;
+      --ds-radius-none: 0;
+      --ds-radius-xs: 2px;
+      --ds-radius-sm: 4px;
+      --ds-radius-md: 8px;
+      --ds-radius-lg: 12px;
+      --ds-radius-full: 9999px;
+      --ds-border-hairline: 1px;
+      --ds-border-regular: 1.5px;
+      --ds-border-heavy: 2px;
+      --ds-shadow-none: none;
+      --ds-shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.06);
+      --ds-shadow-md: 0 4px 12px rgba(11, 11, 12, 0.08), 0 1px 2px rgba(11, 11, 12, 0.04);
+      --ds-shadow-lg: 0 12px 32px rgba(11, 11, 12, 0.10), 0 4px 8px rgba(11, 11, 12, 0.06);
+      --ds-shadow-focus: 0 0 0 3px rgba(74, 114, 204, 0.35);
+      --ds-duration-instant: 80ms;
+      --ds-duration-fast: 120ms;
+      --ds-duration-normal: 180ms;
+      --ds-duration-slow: 240ms;
+      --ds-duration-slower: 320ms;
+      --ds-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+      --ds-easing-emphasized: cubic-bezier(0.2, 0, 0.1, 1.1);
+      --ds-easing-enter: cubic-bezier(0, 0, 0, 1);
+      --ds-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+      --ds-breakpoint-sm: 480px;
+      --ds-breakpoint-md: 768px;
+      --ds-breakpoint-lg: 1024px;
+      --ds-breakpoint-xl: 1280px;
+      --ds-breakpoint-2xl: 1536px;
+      --ds-z-index-base: 0;
+      --ds-z-index-raised: 10;
+      --ds-z-index-dropdown: 100;
+      --ds-z-index-sticky: 200;
+      --ds-z-index-overlay: 300;
+      --ds-z-index-modal: 400;
+      --ds-z-index-toast: 500;
+      --ds-z-index-tooltip: 600;
+    }
+  }
+}

package/dist/theme-default-light.css

@@ -0,0 +1,113 @@
+/* Generated by @jsekulowicz/ds-tokens — do not edit by hand. */
+/* Run `pnpm --filter @jsekulowicz/ds-tokens build` to regenerate. */
+
+@layer ds.theme {
+  :root, [data-ds-theme="light"] {
+    color-scheme: light;
+    --ds-color-bg: #FAF8F5;
+    --ds-color-bg-subtle: #F2EFEA;
+    --ds-color-bg-muted: #E2E2E3;
+    --ds-color-bg-inverse: #0B0B0C;
+    --ds-color-fg: #0B0B0C;
+    --ds-color-fg-muted: #6B6B6E;
+    --ds-color-fg-subtle: #56565B;
+    --ds-color-fg-inverse: #FAF8F5;
+    --ds-color-accent: #4A72CC;
+    --ds-color-accent-hover: #3860B8;
+    --ds-color-accent-active: #2750A2;
+    --ds-color-accent-fg: #FAF8F5;
+    --ds-color-accent-subtle: #E8EEF9;
+    --ds-color-border: rgba(11, 11, 12, 0.12);
+    --ds-color-border-strong: #3F3F43;
+    --ds-color-border-subtle: rgba(11, 11, 12, 0.06);
+    --ds-color-focus: rgba(74, 114, 204, 0.35);
+    --ds-color-success: #1F7A48;
+    --ds-color-success-subtle: #E4F1EA;
+    --ds-color-warning: #A6620B;
+    --ds-color-warning-subtle: #FBF0DA;
+    --ds-color-danger: #B21A0A;
+    --ds-color-danger-subtle: #FBE7E4;
+    --ds-color-chart-1: #4A72CC;
+    --ds-color-chart-2: #1F7A7A;
+    --ds-color-chart-3: #D97706;
+    --ds-color-chart-4: #B83280;
+    --ds-color-chart-5: #2B8A3E;
+    --ds-color-chart-6: #7B3FE4;
+    --ds-space-0: 0;
+    --ds-space-1: 0.25rem;
+    --ds-space-2: 0.5rem;
+    --ds-space-3: 0.75rem;
+    --ds-space-4: 1rem;
+    --ds-space-5: 1.25rem;
+    --ds-space-6: 1.5rem;
+    --ds-space-8: 2rem;
+    --ds-space-10: 2.5rem;
+    --ds-space-12: 3rem;
+    --ds-space-16: 4rem;
+    --ds-space-20: 5rem;
+    --ds-space-24: 6rem;
+    --ds-space-32: 8rem;
+    --ds-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
+    --ds-font-body: 'General Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+    --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+    --ds-font-size-3xs: 0.6875rem;
+    --ds-font-size-2xs: 0.75rem;
+    --ds-font-size-xs: 0.8125rem;
+    --ds-font-size-sm: 0.875rem;
+    --ds-font-size-md: 1rem;
+    --ds-font-size-lg: 1.125rem;
+    --ds-font-size-xl: 1.375rem;
+    --ds-font-size-2xl: 1.75rem;
+    --ds-font-size-3xl: 2.25rem;
+    --ds-font-size-4xl: 3rem;
+    --ds-font-size-5xl: 4rem;
+    --ds-font-weight-regular: 400;
+    --ds-font-weight-medium: 500;
+    --ds-font-weight-semibold: 600;
+    --ds-font-weight-bold: 700;
+    --ds-line-height-tight: 1.1;
+    --ds-line-height-snug: 1.25;
+    --ds-line-height-normal: 1.45;
+    --ds-line-height-relaxed: 1.6;
+    --ds-letter-spacing-tight: -0.02em;
+    --ds-letter-spacing-normal: 0;
+    --ds-letter-spacing-wide: 0.04em;
+    --ds-letter-spacing-display: -0.01em;
+    --ds-radius-none: 0;
+    --ds-radius-xs: 2px;
+    --ds-radius-sm: 4px;
+    --ds-radius-md: 8px;
+    --ds-radius-lg: 12px;
+    --ds-radius-full: 9999px;
+    --ds-border-hairline: 1px;
+    --ds-border-regular: 1.5px;
+    --ds-border-heavy: 2px;
+    --ds-shadow-none: none;
+    --ds-shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.06);
+    --ds-shadow-md: 0 4px 12px rgba(11, 11, 12, 0.08), 0 1px 2px rgba(11, 11, 12, 0.04);
+    --ds-shadow-lg: 0 12px 32px rgba(11, 11, 12, 0.10), 0 4px 8px rgba(11, 11, 12, 0.06);
+    --ds-shadow-focus: 0 0 0 3px rgba(74, 114, 204, 0.35);
+    --ds-duration-instant: 80ms;
+    --ds-duration-fast: 120ms;
+    --ds-duration-normal: 180ms;
+    --ds-duration-slow: 240ms;
+    --ds-duration-slower: 320ms;
+    --ds-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --ds-easing-emphasized: cubic-bezier(0.2, 0, 0.1, 1.1);
+    --ds-easing-enter: cubic-bezier(0, 0, 0, 1);
+    --ds-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+    --ds-breakpoint-sm: 480px;
+    --ds-breakpoint-md: 768px;
+    --ds-breakpoint-lg: 1024px;
+    --ds-breakpoint-xl: 1280px;
+    --ds-breakpoint-2xl: 1536px;
+    --ds-z-index-base: 0;
+    --ds-z-index-raised: 10;
+    --ds-z-index-dropdown: 100;
+    --ds-z-index-sticky: 200;
+    --ds-z-index-overlay: 300;
+    --ds-z-index-modal: 400;
+    --ds-z-index-toast: 500;
+    --ds-z-index-tooltip: 600;
+  }
+}

package/dist/theme-default.css

@@ -0,0 +1,3 @@
+@import './base.css';
+@import './theme-default-light.css';
+@import './theme-default-dark.css';

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@jsekulowicz/ds-tokens",
+  "version": "0.1.0",
+  "description": "Design tokens (primitive, semantic, component) for the Design System Library.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jsekulowicz/design-system-library.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://jsekulowicz.github.io/design-system-library",
+  "bugs": {
+    "url": "https://github.com/jsekulowicz/design-system-library/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./base.css": "./dist/base.css",
+    "./theme-default-light.css": "./dist/theme-default-light.css",
+    "./theme-default-dark.css": "./dist/theme-default-dark.css",
+    "./theme-default.css": "./dist/theme-default.css"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.5"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node dist/build.js",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}