Initial commit: @ampeco/design-tokens v1.0.0

Design token system for AMPECO Embedded Web Apps with light/dark themes, CSS custom properties, and runtime theme application via applyTheme(). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-18 19:34:08 +02:00
commit 8a295c4acf
15 changed files with 2369 additions and 0 deletions
@@ -0,0 +1,141 @@
+/*
+ * @ampeco/design-tokens - CSS Custom Properties
+ *
+ * These variables are set programmatically by applyTheme() at runtime.
+ * The :root defaults below match the light theme so the page has
+ * sensible values even before JavaScript initialises.
+ */
+
+:root {
+  /* ─── Buttons ─────────────────────────────────────────────── */
+  --btn-primary-bg: #00A573;
+  --btn-primary-text: #FFFFFF;
+  --btn-primary-pressed: #D7E4DC;
+  --btn-secondary-bg: #FFFFFF;
+  --btn-secondary-border: #00A573;
+  --btn-secondary-text: #000000;
+
+  /* ─── Surfaces ────────────────────────────────────────────── */
+  --surface-bg: #FFFFFF;
+  --surface-elevation-1: #EEF2EF;
+  --surface-elevation-2: #D7E4DC;
+
+  /* ─── Text ────────────────────────────────────────────────── */
+  --text-base: #000000;
+  --text-support: #808080;
+  --text-placeholder: #808080;
+
+  /* ─── Feedback ────────────────────────────────────────────── */
+  --feedback-success: #24A629;
+  --feedback-success-subtle: #BDE4BF;
+  --feedback-error: #FF6868;
+  --feedback-error-subtle: #FFD2D2;
+  --feedback-warning: #FFB23E;
+  --feedback-warning-subtle: #FFE8C5;
+  --feedback-info: #2F83FF;
+  --feedback-info-subtle: #C1DAFF;
+
+  /* ─── Input ───────────────────────────────────────────────── */
+  --input-fill: #EEF2EF;
+  --input-border: #D7E4DC;
+  --input-border-active: #C8DAD7;
+  --input-text: #000000;
+  --input-placeholder: #808080;
+
+  /* ─── Separator ───────────────────────────────────────────── */
+  --separator: #C8DAD7;
+
+  /* ─── Booking Status ──────────────────────────────────────── */
+  --status-accepted: #2F83FF;
+  --status-reserved: #24A629;
+  --status-completed: #808080;
+  --status-cancelled: #FFB23E;
+  --status-no-show: #FF6868;
+  --status-failed: #B71C1C;
+
+  /* ─── Spacing Scale ───────────────────────────────────────── */
+  --spacing-xxxs: 2px;
+  --spacing-xxs: 4px;
+  --spacing-xs: 6px;
+  --spacing-s: 8px;
+  --spacing-m: 12px;
+  --spacing-l: 16px;
+  --spacing-xl: 24px;
+  --spacing-xxl: 32px;
+  --spacing-xxxl: 64px;
+
+  /* ─── Border Radius ───────────────────────────────────────── */
+  --radius-s: 8px;
+  --radius-m: 12px;
+  --radius-l: 16px;
+  --radius-xl: 32px;
+
+  /* ─── Typography ──────────────────────────────────────────── */
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* H1 - Semibold 22/26 */
+  --font-h1-size: 22px;
+  --font-h1-line-height: 26px;
+  --font-h1-weight: 600;
+
+  /* H2 - Semibold 18/22 */
+  --font-h2-size: 18px;
+  --font-h2-line-height: 22px;
+  --font-h2-weight: 600;
+
+  /* H3 - Medium 16/20 */
+  --font-h3-size: 16px;
+  --font-h3-line-height: 20px;
+  --font-h3-weight: 500;
+
+  /* H4 - Medium 14/17 */
+  --font-h4-size: 14px;
+  --font-h4-line-height: 17px;
+  --font-h4-weight: 500;
+
+  /* Body Large - Regular 16/20 */
+  --font-body-large-size: 16px;
+  --font-body-large-line-height: 20px;
+  --font-body-large-weight: 400;
+
+  /* Body Medium - Regular 14/17 */
+  --font-body-medium-size: 14px;
+  --font-body-medium-line-height: 17px;
+  --font-body-medium-weight: 400;
+
+  /* Body Large Heavy - Semibold 16/20 */
+  --font-body-large-heavy-size: 16px;
+  --font-body-large-heavy-line-height: 20px;
+  --font-body-large-heavy-weight: 600;
+
+  /* Body Medium Heavy - Semibold 14/17 */
+  --font-body-medium-heavy-size: 14px;
+  --font-body-medium-heavy-line-height: 17px;
+  --font-body-medium-heavy-weight: 600;
+
+  /* Buttons - Semibold 14/20 */
+  --font-button-size: 14px;
+  --font-button-line-height: 20px;
+  --font-button-weight: 600;
+
+  /* Buttons Small - Bold 12/17 */
+  --font-button-small-size: 12px;
+  --font-button-small-line-height: 17px;
+  --font-button-small-weight: 700;
+
+  /* Label - Regular 12/15 */
+  --font-label-size: 12px;
+  --font-label-line-height: 15px;
+  --font-label-weight: 400;
+
+  /* Caption - Medium 12/15 */
+  --font-caption-size: 12px;
+  --font-caption-line-height: 15px;
+  --font-caption-weight: 500;
+
+  /* ─── Component Sizes ─────────────────────────────────────── */
+  --size-xs: 14px;
+  --size-s: 20px;
+  --size-m: 32px;
+  --size-l: 44px;
+}