@digiko-npm/designsystem 0.1.0

package/src/js/theme.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/src/tokens/colors.css

@@ -0,0 +1,180 @@
+/* ==========================================================================
+   Design Tokens: Colors
+   Refined zinc palette, editorial warmth.
+   Light-first with elegant dark mode. Override any --ds-* variable to re-theme.
+   ========================================================================== */
+
+/* Light theme (default) */
+:root,
+[data-theme="light"] {
+  /* --- Backgrounds — clean whites, warm grays --- */
+  --ds-color-bg: #fafafa;
+  --ds-color-bg-subtle: #ffffff;
+  --ds-color-bg-muted: #e4e4e7;
+  --ds-color-bg-elevated: #f4f4f5;
+
+  --ds-color-surface: #ffffff;
+  --ds-color-surface-hover: #fafafa;
+  --ds-color-surface-active: #f4f4f5;
+
+  /* --- Text — zinc hierarchy --- */
+  --ds-color-text: #09090b;
+  --ds-color-text-secondary: #52525b;
+  --ds-color-text-tertiary: #a1a1aa;
+  --ds-color-text-disabled: #d4d4d8;
+
+  /* --- Inverted (primary buttons: dark bg + light text) --- */
+  --ds-color-inverted: #18181b;
+  --ds-color-on-inverted: #fafafa;
+
+  /* --- Borders — solid zinc --- */
+  --ds-color-border: #e4e4e7;
+  --ds-color-border-hover: #d4d4d8;
+  --ds-color-border-active: #a1a1aa;
+  --ds-color-border-subtle: #f4f4f5;
+
+  /* --- Interactive --- */
+  --ds-color-interactive: #3f3f46;
+  --ds-color-interactive-hover: #27272a;
+
+  /* --- Overlays --- */
+  --ds-color-overlay: rgba(0, 0, 0, 0.5);
+  --ds-color-overlay-subtle: rgba(0, 0, 0, 0.02);
+  --ds-color-overlay-hover: rgba(0, 0, 0, 0.04);
+  --ds-color-overlay-active: rgba(0, 0, 0, 0.08);
+
+  /* --- Navigation (glass effect) --- */
+  --ds-color-nav-bg: rgba(250, 250, 250, 0.8);
+  --ds-color-nav-border: rgba(228, 228, 231, 0.6);
+
+  /* --- Selection --- */
+  --ds-color-selection-bg: #09090b;
+  --ds-color-selection-text: #fafafa;
+
+  /* --- Shadows --- */
+  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* --- Scrollbar --- */
+  --ds-scrollbar-thumb: #d4d4d4;
+  --ds-scrollbar-thumb-hover: #a3a3a3;
+
+  color-scheme: light;
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  /* --- Backgrounds — deep, refined zinc-900 palette --- */
+  --ds-color-bg: #09090b;
+  --ds-color-bg-subtle: #0f0f11;
+  --ds-color-bg-muted: #27272a;
+  --ds-color-bg-elevated: #18181b;
+
+  --ds-color-surface: #0f0f11;
+  --ds-color-surface-hover: #18181b;
+  --ds-color-surface-active: #27272a;
+
+  /* --- Text --- */
+  --ds-color-text: #fafafa;
+  --ds-color-text-secondary: #a1a1aa;
+  --ds-color-text-tertiary: #52525b;
+  --ds-color-text-disabled: #3f3f46;
+
+  /* --- Inverted (primary buttons: light bg + dark text) --- */
+  --ds-color-inverted: #fafafa;
+  --ds-color-on-inverted: #09090b;
+
+  /* --- Borders --- */
+  --ds-color-border: #27272a;
+  --ds-color-border-hover: #3f3f46;
+  --ds-color-border-active: #52525b;
+  --ds-color-border-subtle: #18181b;
+
+  /* --- Interactive --- */
+  --ds-color-interactive: #d4d4d8;
+  --ds-color-interactive-hover: #fafafa;
+
+  /* --- Overlays --- */
+  --ds-color-overlay: rgba(0, 0, 0, 0.7);
+  --ds-color-overlay-subtle: rgba(255, 255, 255, 0.03);
+  --ds-color-overlay-hover: rgba(255, 255, 255, 0.06);
+  --ds-color-overlay-active: rgba(255, 255, 255, 0.1);
+
+  /* --- Navigation --- */
+  --ds-color-nav-bg: rgba(9, 9, 11, 0.8);
+  --ds-color-nav-border: rgba(39, 39, 42, 0.6);
+
+  /* --- Selection --- */
+  --ds-color-selection-bg: #fafafa;
+  --ds-color-selection-text: #09090b;
+
+  /* --- Shadows (stronger in dark) --- */
+  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+
+  /* --- Scrollbar --- */
+  --ds-scrollbar-thumb: #27272a;
+  --ds-scrollbar-thumb-hover: #3f3f46;
+
+  color-scheme: dark;
+}
+
+/* Shared tokens (same in both themes) */
+:root {
+  /* --- Semantic Status --- */
+  --ds-color-success: #16a34a;
+  --ds-color-success-subtle: rgba(22, 163, 74, 0.1);
+  --ds-color-success-border: rgba(22, 163, 74, 0.2);
+
+  --ds-color-warning: #d97706;
+  --ds-color-warning-subtle: rgba(217, 119, 6, 0.1);
+  --ds-color-warning-border: rgba(217, 119, 6, 0.2);
+
+  --ds-color-error: #dc2626;
+  --ds-color-error-subtle: rgba(220, 38, 38, 0.1);
+  --ds-color-error-border: rgba(220, 38, 38, 0.2);
+
+  --ds-color-info: #2563eb;
+  --ds-color-info-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-info-border: rgba(37, 99, 235, 0.2);
+
+  /* --- Accent Colors (for badges, categories) --- */
+  --ds-color-accent-blue: #2563eb;
+  --ds-color-accent-purple: #7c3aed;
+  --ds-color-accent-green: #16a34a;
+  --ds-color-accent-orange: #d97706;
+  --ds-color-accent-blue-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-accent-purple-subtle: rgba(124, 58, 237, 0.1);
+  --ds-color-accent-green-subtle: rgba(22, 163, 74, 0.1);
+  --ds-color-accent-orange-subtle: rgba(217, 119, 6, 0.1);
+}
+
+/* Dark overrides for status/accent (brighter for contrast) */
+[data-theme="dark"] {
+  --ds-color-success: #4ade80;
+  --ds-color-success-subtle: rgba(74, 222, 128, 0.1);
+  --ds-color-success-border: rgba(74, 222, 128, 0.2);
+
+  --ds-color-warning: #fbbf24;
+  --ds-color-warning-subtle: rgba(251, 191, 36, 0.1);
+  --ds-color-warning-border: rgba(251, 191, 36, 0.2);
+
+  --ds-color-error: #f87171;
+  --ds-color-error-subtle: rgba(248, 113, 113, 0.1);
+  --ds-color-error-border: rgba(248, 113, 113, 0.2);
+
+  --ds-color-info: #60a5fa;
+  --ds-color-info-subtle: rgba(96, 165, 250, 0.1);
+  --ds-color-info-border: rgba(96, 165, 250, 0.2);
+
+  --ds-color-accent-blue: #60a5fa;
+  --ds-color-accent-purple: #a78bfa;
+  --ds-color-accent-green: #4ade80;
+  --ds-color-accent-orange: #fbbf24;
+  --ds-color-accent-blue-subtle: rgba(96, 165, 250, 0.1);
+  --ds-color-accent-purple-subtle: rgba(167, 139, 250, 0.1);
+  --ds-color-accent-green-subtle: rgba(74, 222, 128, 0.1);
+  --ds-color-accent-orange-subtle: rgba(251, 191, 36, 0.1);
+}

package/src/tokens/index.css

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   Design Tokens — All tokens in one import
+
+   To override: just redeclare any --ds-* variable in your project's CSS.
+   Your values win. Nothing breaks.
+   ========================================================================== */
+
+@import './colors.css';
+@import './typography.css';
+@import './spacing.css';
+@import './shadows.css';

package/src/tokens/shadows.css

@@ -0,0 +1,26 @@
+/* ==========================================================================
+   Design Tokens: Effects & Transitions
+   Expo easing, smooth editorial motion.
+   Shadows are defined per-theme in colors.css.
+   ========================================================================== */
+
+:root {
+  /* --- Focus Ring --- */
+  --ds-ring-width: 2px;
+  --ds-ring-offset: 2px;
+  --ds-ring-color: var(--ds-color-border-active);
+
+  /* --- Transitions --- */
+  --ds-duration-fast: 100ms;
+  --ds-duration-normal: 200ms;
+  --ds-duration-slow: 400ms;
+  --ds-duration-slower: 800ms;
+
+  --ds-ease-default: ease;
+  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ds-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Opacity --- */
+  --ds-opacity-disabled: 0.5;
+}

package/src/tokens/spacing.css

@@ -0,0 +1,53 @@
+/* ==========================================================================
+   Design Tokens: Spacing & Layout
+   Generous whitespace, responsive sections.
+   ========================================================================== */
+
+:root {
+  /* --- Spacing Scale --- */
+  --ds-space-0: 0;
+  --ds-space-0-5: 0.125rem;  /* 2px */
+  --ds-space-1: 0.25rem;     /* 4px */
+  --ds-space-1-5: 0.375rem;  /* 6px */
+  --ds-space-2: 0.5rem;      /* 8px */
+  --ds-space-2-5: 0.625rem;  /* 10px */
+  --ds-space-3: 0.75rem;     /* 12px */
+  --ds-space-4: 1rem;        /* 16px */
+  --ds-space-5: 1.25rem;     /* 20px */
+  --ds-space-6: 1.5rem;      /* 24px */
+  --ds-space-8: 2rem;        /* 32px */
+  --ds-space-10: 2.5rem;     /* 40px */
+  --ds-space-12: 3rem;       /* 48px */
+  --ds-space-16: 4rem;       /* 64px */
+  --ds-space-20: 5rem;       /* 80px */
+  --ds-space-24: 6rem;       /* 96px */
+  --ds-space-32: 8rem;       /* 128px */
+
+  /* --- Section Padding (responsive, generous) --- */
+  --ds-section-padding: clamp(80px, 12vw, 160px);
+
+  /* --- Container --- */
+  --ds-container-max: 1200px;
+  --ds-container-padding: clamp(20px, 5vw, 80px);
+  --ds-container-sm: 640px;
+  --ds-container-md: 768px;
+  --ds-container-lg: 1024px;
+
+  /* --- Border Radius (refined, slightly larger) --- */
+  --ds-radius-none: 0;
+  --ds-radius-sm: 6px;
+  --ds-radius-md: 8px;
+  --ds-radius-lg: 12px;
+  --ds-radius-xl: 16px;
+  --ds-radius-2xl: 20px;
+  --ds-radius-full: 9999px;
+
+  /* --- Z-Index Scale --- */
+  --ds-z-base: 0;
+  --ds-z-dropdown: 50;
+  --ds-z-sticky: 60;
+  --ds-z-overlay: 80;
+  --ds-z-modal: 100;
+  --ds-z-toast: 150;
+  --ds-z-tooltip: 200;
+}

package/src/tokens/typography.css

@@ -0,0 +1,51 @@
+/* ==========================================================================
+   Design Tokens: Typography
+   Clash Display headings, Switzer body.
+   Editorial feel, generous sizing, tight tracking on display.
+   ========================================================================== */
+
+:root {
+  /* --- Font Families ---
+       Override these in your project to use your own fonts.
+       The DS provides the architecture; you bring the typeface. */
+  --ds-font-display: "Clash Display", system-ui, sans-serif;
+  --ds-font-sans: "Switzer", system-ui, -apple-system, sans-serif;
+  --ds-font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
+
+  /* --- Display Font Weight (Clash Display looks best at 400) --- */
+  --ds-font-display-weight: 400;
+
+  /* --- Font Sizes --- */
+  --ds-text-xs: 0.75rem;      /* 12px */
+  --ds-text-sm: 0.875rem;     /* 14px */
+  --ds-text-base: 1rem;       /* 16px */
+  --ds-text-lg: 1.125rem;     /* 18px */
+  --ds-text-xl: 1.25rem;      /* 20px */
+  --ds-text-2xl: 1.5rem;      /* 24px */
+  --ds-text-3xl: 1.875rem;    /* 30px */
+  --ds-text-4xl: 2.25rem;     /* 36px */
+  --ds-text-5xl: 3rem;        /* 48px */
+  --ds-text-6xl: 3.75rem;     /* 60px */
+  --ds-text-7xl: 4.5rem;      /* 72px */
+
+  /* --- Font Weights --- */
+  --ds-weight-light: 300;
+  --ds-weight-normal: 400;
+  --ds-weight-medium: 500;
+  --ds-weight-semibold: 600;
+  --ds-weight-bold: 700;
+
+  /* --- Line Heights --- */
+  --ds-leading-none: 1;
+  --ds-leading-tight: 1.1;
+  --ds-leading-snug: 1.25;
+  --ds-leading-normal: 1.5;
+  --ds-leading-relaxed: 1.625;
+  --ds-leading-loose: 2;
+
+  /* --- Letter Spacing --- */
+  --ds-tracking-tighter: -0.02em;
+  --ds-tracking-tight: -0.01em;
+  --ds-tracking-normal: 0;
+  --ds-tracking-wide: 0.05em;
+}

package/src/utilities/index.css

@@ -0,0 +1,3 @@
+@import './layout.css';
+@import './spacing.css';
+@import './text.css';

package/src/utilities/layout.css

@@ -0,0 +1,134 @@
+/* ==========================================================================
+   Utilities: Layout
+   Container with clamp padding, generous responsive grid.
+   ========================================================================== */
+
+/* --- Container --- */
+.ds-container {
+  width: 100%;
+  max-width: var(--ds-container-max);
+  margin-inline: auto;
+  padding-inline: var(--ds-container-padding);
+}
+
+/* --- Section (generous vertical rhythm) --- */
+.ds-section {
+  padding-block: var(--ds-section-padding);
+}
+
+/* --- Flex --- */
+.ds-flex       { display: flex; }
+.ds-inline-flex { display: inline-flex; }
+.ds-flex-col   { flex-direction: column; }
+.ds-flex-row   { flex-direction: row; }
+.ds-flex-wrap  { flex-wrap: wrap; }
+.ds-flex-1     { flex: 1 1 0%; }
+.ds-flex-auto  { flex: 1 1 auto; }
+.ds-flex-none  { flex: none; }
+.ds-shrink-0   { flex-shrink: 0; }
+
+/* --- Alignment --- */
+.ds-items-start    { align-items: flex-start; }
+.ds-items-center   { align-items: center; }
+.ds-items-end      { align-items: flex-end; }
+.ds-items-stretch  { align-items: stretch; }
+.ds-items-baseline { align-items: baseline; }
+
+.ds-justify-start   { justify-content: flex-start; }
+.ds-justify-center  { justify-content: center; }
+.ds-justify-end     { justify-content: flex-end; }
+.ds-justify-between { justify-content: space-between; }
+.ds-justify-around  { justify-content: space-around; }
+.ds-justify-evenly  { justify-content: space-evenly; }
+
+.ds-self-start  { align-self: flex-start; }
+.ds-self-center { align-self: center; }
+.ds-self-end    { align-self: flex-end; }
+
+/* --- Grid --- */
+.ds-grid {
+  display: grid;
+  gap: var(--ds-space-6);
+}
+
+.ds-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (min-width: 640px) {
+  .ds-sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 768px) {
+  .ds-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ds-md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .ds-md\:flex-row { flex-direction: row; }
+}
+
+@media (min-width: 1024px) {
+  .ds-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ds-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+}
+
+/* --- Gap --- */
+.ds-gap-0  { gap: var(--ds-space-0); }
+.ds-gap-1  { gap: var(--ds-space-1); }
+.ds-gap-2  { gap: var(--ds-space-2); }
+.ds-gap-3  { gap: var(--ds-space-3); }
+.ds-gap-4  { gap: var(--ds-space-4); }
+.ds-gap-5  { gap: var(--ds-space-5); }
+.ds-gap-6  { gap: var(--ds-space-6); }
+.ds-gap-8  { gap: var(--ds-space-8); }
+.ds-gap-12 { gap: var(--ds-space-12); }
+
+/* --- Display --- */
+.ds-block        { display: block; }
+.ds-inline-block { display: inline-block; }
+.ds-inline       { display: inline; }
+.ds-hidden       { display: none; }
+
+@media (min-width: 768px) {
+  .ds-md\:hidden { display: none; }
+  .ds-md\:block  { display: block; }
+  .ds-md\:flex   { display: flex; }
+}
+
+/* --- Position --- */
+.ds-relative { position: relative; }
+.ds-absolute { position: absolute; }
+.ds-fixed    { position: fixed; }
+.ds-sticky   { position: sticky; top: 0; }
+
+/* --- Overflow --- */
+.ds-overflow-hidden { overflow: hidden; }
+.ds-overflow-auto   { overflow: auto; }
+.ds-overflow-x-auto { overflow-x: auto; }
+
+/* --- Width/Height --- */
+.ds-w-full    { width: 100%; }
+.ds-h-full    { height: 100%; }
+.ds-h-screen  { height: 100dvh; }
+.ds-min-h-screen { min-height: 100dvh; }
+
+/* --- Stack (vertical spacing) --- */
+.ds-stack > * + * {
+  margin-top: var(--ds-space-4);
+}
+
+.ds-stack--sm > * + * { margin-top: var(--ds-space-2); }
+.ds-stack--lg > * + * { margin-top: var(--ds-space-8); }
+
+/* --- Center content --- */
+.ds-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* --- Aspect Ratio --- */
+.ds-aspect-square { aspect-ratio: 1; }
+.ds-aspect-video  { aspect-ratio: 16/9; }
+.ds-aspect-card   { aspect-ratio: 16/10; }

package/src/utilities/spacing.css

@@ -0,0 +1,75 @@
+/* ==========================================================================
+   Utilities: Spacing (margin & padding)
+   Pattern: ds-{m|p}{side}-{size}
+   ========================================================================== */
+
+/* --- Padding --- */
+.ds-p-0  { padding: var(--ds-space-0); }
+.ds-p-1  { padding: var(--ds-space-1); }
+.ds-p-2  { padding: var(--ds-space-2); }
+.ds-p-3  { padding: var(--ds-space-3); }
+.ds-p-4  { padding: var(--ds-space-4); }
+.ds-p-5  { padding: var(--ds-space-5); }
+.ds-p-6  { padding: var(--ds-space-6); }
+.ds-p-8  { padding: var(--ds-space-8); }
+.ds-p-10 { padding: var(--ds-space-10); }
+.ds-p-12 { padding: var(--ds-space-12); }
+
+.ds-px-0  { padding-inline: var(--ds-space-0); }
+.ds-px-2  { padding-inline: var(--ds-space-2); }
+.ds-px-3  { padding-inline: var(--ds-space-3); }
+.ds-px-4  { padding-inline: var(--ds-space-4); }
+.ds-px-5  { padding-inline: var(--ds-space-5); }
+.ds-px-6  { padding-inline: var(--ds-space-6); }
+.ds-px-8  { padding-inline: var(--ds-space-8); }
+
+.ds-py-0  { padding-block: var(--ds-space-0); }
+.ds-py-2  { padding-block: var(--ds-space-2); }
+.ds-py-3  { padding-block: var(--ds-space-3); }
+.ds-py-4  { padding-block: var(--ds-space-4); }
+.ds-py-5  { padding-block: var(--ds-space-5); }
+.ds-py-6  { padding-block: var(--ds-space-6); }
+.ds-py-8  { padding-block: var(--ds-space-8); }
+.ds-py-10 { padding-block: var(--ds-space-10); }
+.ds-py-12 { padding-block: var(--ds-space-12); }
+.ds-py-16 { padding-block: var(--ds-space-16); }
+.ds-py-20 { padding-block: var(--ds-space-20); }
+
+.ds-pt-4  { padding-top: var(--ds-space-4); }
+.ds-pt-8  { padding-top: var(--ds-space-8); }
+.ds-pt-12 { padding-top: var(--ds-space-12); }
+.ds-pt-16 { padding-top: var(--ds-space-16); }
+
+.ds-pb-4  { padding-bottom: var(--ds-space-4); }
+.ds-pb-8  { padding-bottom: var(--ds-space-8); }
+
+/* --- Margin --- */
+.ds-m-0    { margin: var(--ds-space-0); }
+.ds-m-auto { margin: auto; }
+
+.ds-mx-auto { margin-inline: auto; }
+.ds-mx-2   { margin-inline: var(--ds-space-2); }
+.ds-mx-4   { margin-inline: var(--ds-space-4); }
+
+.ds-my-0  { margin-block: var(--ds-space-0); }
+.ds-my-2  { margin-block: var(--ds-space-2); }
+.ds-my-4  { margin-block: var(--ds-space-4); }
+.ds-my-6  { margin-block: var(--ds-space-6); }
+.ds-my-8  { margin-block: var(--ds-space-8); }
+
+.ds-mt-0  { margin-top: var(--ds-space-0); }
+.ds-mt-1  { margin-top: var(--ds-space-1); }
+.ds-mt-2  { margin-top: var(--ds-space-2); }
+.ds-mt-4  { margin-top: var(--ds-space-4); }
+.ds-mt-6  { margin-top: var(--ds-space-6); }
+.ds-mt-8  { margin-top: var(--ds-space-8); }
+
+.ds-mb-0  { margin-bottom: var(--ds-space-0); }
+.ds-mb-1  { margin-bottom: var(--ds-space-1); }
+.ds-mb-2  { margin-bottom: var(--ds-space-2); }
+.ds-mb-4  { margin-bottom: var(--ds-space-4); }
+.ds-mb-6  { margin-bottom: var(--ds-space-6); }
+.ds-mb-8  { margin-bottom: var(--ds-space-8); }
+
+.ds-ml-auto { margin-left: auto; }
+.ds-mr-auto { margin-right: auto; }