@digiko-npm/designsystem 0.1.0

package/dist/designsystem.js

@@ -0,0 +1,67 @@
+/**
+ * @ds/designsystem — Theme Manager
+ *
+ * Handles light/dark theme toggling with localStorage persistence.
+ *
+ * Usage:
+ *   import { theme } from '@ds/designsystem/js';
+ *   theme.toggle();
+ *   theme.set('dark');
+ *   theme.get(); // 'light' | 'dark' | 'system'
+ */
+
+const STORAGE_KEY = 'ds-theme';
+
+function getSystemTheme() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function applyTheme(mode) {
+  const resolved = mode === 'system' ? getSystemTheme() : mode;
+  document.documentElement.setAttribute('data-theme', resolved);
+}
+
+export const theme = {
+  /** Initialize theme from stored preference or system default */
+  init() {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      applyTheme(stored);
+    }
+    // Listen for system theme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const current = localStorage.getItem(STORAGE_KEY);
+      if (!current || current === 'system') {
+        applyTheme('system');
+      }
+    });
+  },
+
+  /** Set theme: 'light', 'dark', or 'system' */
+  set(mode) {
+    localStorage.setItem(STORAGE_KEY, mode);
+    applyTheme(mode);
+  },
+
+  /** Get current stored preference */
+  get() {
+    return localStorage.getItem(STORAGE_KEY) || 'system';
+  },
+
+  /** Toggle between light and dark */
+  toggle() {
+    const current = document.documentElement.getAttribute('data-theme');
+    const next = current === 'dark' ? 'light' : 'dark';
+    this.set(next);
+    return next;
+  }
+};
+
+// Auto-init if script is loaded directly
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => theme.init());
+  } else {
+    theme.init();
+  }
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@digiko-npm/designsystem",
+  "version": "0.1.0",
+  "description": "Design system — installable, extensible, indestructible.",
+  "main": "dist/designsystem.css",
+  "style": "dist/designsystem.css",
+  "exports": {
+    ".": "./dist/designsystem.css",
+    "./tokens": "./src/tokens/index.css",
+    "./base": "./src/base/index.css",
+    "./components": "./src/components/index.css",
+    "./utilities": "./src/utilities/index.css",
+    "./js": "./dist/designsystem.js"
+  },
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "scripts": {
+    "build": "node scripts/build.js",
+    "dev": "node scripts/build.js --watch"
+  },
+  "keywords": ["design-system", "css", "tokens", "components"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digiko-dev/designsystem.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/base/index.css

@@ -0,0 +1,2 @@
+@import './reset.css';
+@import './typography.css';

package/src/base/reset.css

@@ -0,0 +1,120 @@
+/* ==========================================================================
+   Base: Reset
+   Clean, modern, antialiased.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+
+html, body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100dvh;
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-base);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-bg);
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+input, button, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+
+button,
+[role="button"],
+select,
+summary {
+  cursor: pointer;
+}
+
+button {
+  background: none;
+  border: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Hide number input spinners */
+input[type="number"] { -moz-appearance: textfield; }
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Focus: subtle ring */
+*:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+/* Selection — inverted */
+::selection {
+  background-color: var(--ds-color-selection-bg);
+  color: var(--ds-color-selection-text);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--ds-scrollbar-thumb);
+  border-radius: var(--ds-radius-sm);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ds-scrollbar-thumb-hover);
+}
+
+.ds-no-scrollbar::-webkit-scrollbar { display: none; }
+.ds-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/base/typography.css

@@ -0,0 +1,163 @@
+/* ==========================================================================
+   Base: Typography
+   Display font for headings, generous sizes, editorial hierarchy.
+   ========================================================================== */
+
+/* Display font utility — use on headings to get the display typeface */
+.ds-font-display {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+h1 { font-size: var(--ds-text-5xl); }
+h2 { font-size: var(--ds-text-4xl); }
+h3 { font-size: var(--ds-text-2xl); }
+h4 { font-size: var(--ds-text-xl); }
+h5 { font-size: var(--ds-text-lg); }
+h6 { font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium); }
+
+p {
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+}
+
+p + p {
+  margin-top: var(--ds-space-4);
+}
+
+small {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+strong, b {
+  font-weight: var(--ds-weight-semibold);
+}
+
+/* Overline / label style (like "PRODUCT DESIGNER & DEVELOPER") */
+.ds-overline {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  letter-spacing: var(--ds-tracking-wide);
+  text-transform: uppercase;
+  color: var(--ds-color-text-secondary);
+}
+
+/* Section title style */
+.ds-section-title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-3xl);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+@media (min-width: 640px) {
+  .ds-section-title { font-size: var(--ds-text-4xl); }
+}
+
+/* Hero title — large editorial display */
+.ds-hero-title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-4xl);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+@media (min-width: 640px) {
+  .ds-hero-title { font-size: var(--ds-text-5xl); }
+}
+@media (min-width: 768px) {
+  .ds-hero-title { font-size: var(--ds-text-6xl); }
+}
+@media (min-width: 1024px) {
+  .ds-hero-title { font-size: var(--ds-text-7xl); }
+}
+
+code, kbd, samp {
+  font-family: var(--ds-font-mono);
+  font-size: 0.9em;
+  background-color: var(--ds-color-bg-elevated);
+  padding: 2px 6px;
+  border-radius: var(--ds-radius-sm);
+}
+
+pre {
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-sm);
+  line-height: var(--ds-leading-relaxed);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-lg);
+  overflow-x: auto;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+blockquote {
+  padding-left: var(--ds-space-4);
+  border-left: 2px solid var(--ds-color-border-hover);
+  color: var(--ds-color-text-secondary);
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--ds-color-border);
+  margin: var(--ds-space-8) 0;
+}
+
+/* Prose: opt-in rich text styling */
+.ds-prose a {
+  color: var(--ds-color-info);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-prose a:hover {
+  opacity: 0.8;
+}
+
+.ds-prose ul, .ds-prose ol {
+  padding-left: var(--ds-space-6);
+  margin-top: var(--ds-space-2);
+  margin-bottom: var(--ds-space-2);
+}
+.ds-prose ul { list-style-type: disc; }
+.ds-prose ol { list-style-type: decimal; }
+
+.ds-prose li {
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+}
+.ds-prose li + li {
+  margin-top: var(--ds-space-1);
+}
+
+/* Tabular figures for numbers */
+.ds-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Stat numbers — display font, large */
+.ds-stat-number {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--ds-text-2xl);
+  color: var(--ds-color-text);
+}

package/src/components/accordion.css

@@ -0,0 +1,150 @@
+/* ==========================================================================
+ * Accordion / Collapse
+ * ==========================================================================
+ *
+ * A vertically stacked set of collapsible sections. Supports CSS-only
+ * open/close via the `.ds-accordion__item--open` modifier.
+ *
+ * Variants:
+ *   --flush      – borderless, full-bleed style
+ *   --separated  – visually detached items with individual borders
+ *
+ * Markup:
+ *   <div class="ds-accordion">
+ *     <div class="ds-accordion__item ds-accordion__item--open">
+ *       <button class="ds-accordion__trigger">Section</button>
+ *       <div class="ds-accordion__content">
+ *         <div class="ds-accordion__body">…</div>
+ *       </div>
+ *     </div>
+ *   </div>
+ * ========================================================================== */
+
+/* Container
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion {
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+}
+
+/* Item
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion__item {
+  border-top: 1px solid var(--ds-color-border);
+}
+
+.ds-accordion__item:first-child {
+  border-top: 0;
+}
+
+/* Trigger (button)
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion__trigger {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: var(--ds-space-4);
+  text-align: left;
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+/* Chevron indicator (CSS border-arrow) */
+.ds-accordion__trigger::after {
+  content: "";
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid var(--ds-color-text-secondary);
+  border-bottom: 2px solid var(--ds-color-text-secondary);
+  transform: rotate(45deg);
+  flex-shrink: 0;
+  margin-left: var(--ds-space-3);
+  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-accordion__trigger:hover {
+  background-color: var(--ds-color-overlay);
+}
+
+/* Open state – rotate chevron */
+.ds-accordion__item--open .ds-accordion__trigger::after {
+  transform: rotate(225deg);
+}
+
+/* Collapsible content wrapper
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion__content {
+  max-height: 0;
+  overflow: hidden;
+  transition:
+    max-height var(--ds-duration-normal) var(--ds-ease-default),
+    padding var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-accordion__item--open .ds-accordion__content {
+  max-height: 80rem;
+}
+
+/* Inner body (visible content)
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion__body {
+  padding: var(--ds-space-4);
+  padding-top: 0;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  line-height: 1.625;
+}
+
+/* ==========================================================================
+ * Variant: Flush
+ * ========================================================================== */
+
+.ds-accordion--flush {
+  border: 0;
+  border-radius: 0;
+}
+
+.ds-accordion--flush .ds-accordion__item {
+  border-top: 0;
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-accordion--flush .ds-accordion__item:last-child {
+  border-bottom: 0;
+}
+
+/* ==========================================================================
+ * Variant: Separated
+ * ========================================================================== */
+
+.ds-accordion--separated {
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+}
+
+.ds-accordion--separated .ds-accordion__item {
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  margin-bottom: var(--ds-space-3);
+  overflow: hidden;
+}
+
+.ds-accordion--separated .ds-accordion__item:last-child {
+  margin-bottom: 0;
+}

package/src/components/alert.css

@@ -0,0 +1,150 @@
+/* ==========================================================================
+   Component: Alert
+   Contextual feedback banners with semantic variants and dismissibility.
+   ========================================================================== */
+
+.ds-alert {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-4);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  background-color: var(--ds-color-surface);
+  border-left: 3px solid var(--ds-color-border);
+}
+
+/* --- Semantic Variants --- */
+
+.ds-alert--info {
+  background-color: var(--ds-color-info-subtle);
+  border-color: var(--ds-color-info-border);
+  border-left-color: var(--ds-color-info);
+}
+
+.ds-alert--success {
+  background-color: var(--ds-color-success-subtle);
+  border-color: var(--ds-color-success-border);
+  border-left-color: var(--ds-color-success);
+}
+
+.ds-alert--warning {
+  background-color: var(--ds-color-warning-subtle);
+  border-color: var(--ds-color-warning-border);
+  border-left-color: var(--ds-color-warning);
+}
+
+.ds-alert--error {
+  background-color: var(--ds-color-error-subtle);
+  border-color: var(--ds-color-error-border);
+  border-left-color: var(--ds-color-error);
+}
+
+/* --- Icon --- */
+
+.ds-alert__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-alert--info .ds-alert__icon    { color: var(--ds-color-info); }
+.ds-alert--success .ds-alert__icon { color: var(--ds-color-success); }
+.ds-alert--warning .ds-alert__icon { color: var(--ds-color-warning); }
+.ds-alert--error .ds-alert__icon   { color: var(--ds-color-error); }
+
+/* --- Content --- */
+
+.ds-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-alert__title {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  color: var(--ds-color-text);
+}
+
+.ds-alert__description {
+  font-size: var(--ds-text-sm);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+  margin-top: var(--ds-space-1);
+}
+
+.ds-alert__title + .ds-alert__description {
+  margin-top: var(--ds-space-1);
+}
+
+/* --- Close Button --- */
+
+.ds-alert__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--ds-color-text-tertiary);
+  border-radius: var(--ds-radius-sm);
+  cursor: pointer;
+  transition: color var(--ds-duration-fast) ease;
+}
+
+.ds-alert__close:hover {
+  color: var(--ds-color-text);
+}
+
+.ds-alert__close:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+/* --- Compact Variant --- */
+
+.ds-alert--compact {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  border-radius: var(--ds-radius-none);
+}
+
+/* --- Banner Variant --- */
+
+.ds-alert--banner {
+  border-radius: var(--ds-radius-none);
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid var(--ds-color-border);
+  border-bottom: 1px solid var(--ds-color-border);
+  width: 100%;
+}
+
+.ds-alert--banner.ds-alert--info {
+  border-top-color: var(--ds-color-info-border);
+  border-bottom-color: var(--ds-color-info-border);
+}
+
+.ds-alert--banner.ds-alert--success {
+  border-top-color: var(--ds-color-success-border);
+  border-bottom-color: var(--ds-color-success-border);
+}
+
+.ds-alert--banner.ds-alert--warning {
+  border-top-color: var(--ds-color-warning-border);
+  border-bottom-color: var(--ds-color-warning-border);
+}
+
+.ds-alert--banner.ds-alert--error {
+  border-top-color: var(--ds-color-error-border);
+  border-bottom-color: var(--ds-color-error-border);
+}