@digiko-npm/designsystem 0.9.7 → 0.9.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiko-npm/designsystem",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "Design system — installable, extensible, indestructible.",
   "main": "dist/designsystem.css",
   "style": "dist/designsystem.css",
@@ -77,6 +77,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.js",
+    "validate": "node scripts/validate.js",
     "docs": "node scripts/generate-docs.js",
     "lint": "stylelint 'src/**/*.css'",
     "dev": "node scripts/build.js --watch & node scripts/generate-docs.js && live-server --host=localhost --port=3000 --open=examples/ --watch=dist/,examples/ --wait=200 --no-browser"

package/src/components/bottom-nav.css

@@ -108,7 +108,7 @@
     height: 2.25rem;
     border-radius: var(--ds-radius-full);
     background: var(--ds-color-text);
-    color: var(--ds-color-bg-base);
+    color: var(--ds-color-bg);
   }
 }
 

package/src/components/chip.css

@@ -37,7 +37,7 @@
   /* Logic chip (AND/OR toggle) */
   &--logic {
     cursor: pointer;
-    font-weight: 600;
+    font-weight: var(--ds-weight-semibold);
     color: var(--ds-color-text-tertiary);
     background: transparent;
     border-color: var(--ds-color-border);

package/src/components/command.css

@@ -53,8 +53,8 @@
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity var(--ds-duration-fast) var(--ds-ease),
-    visibility var(--ds-duration-fast) var(--ds-ease);
+    opacity var(--ds-duration-fast) var(--ds-ease-default),
+    visibility var(--ds-duration-fast) var(--ds-ease-default);
 
   /* Open state */
   &--open {
@@ -143,8 +143,8 @@
     font-size: var(--ds-text-sm);
     color: var(--ds-color-text-secondary);
     transition:
-      background-color var(--ds-duration-fast) var(--ds-ease),
-      color var(--ds-duration-fast) var(--ds-ease);
+      background-color var(--ds-duration-fast) var(--ds-ease-default),
+      color var(--ds-duration-fast) var(--ds-ease-default);
 
     /* Item hover & active states */
     &:hover,

package/src/components/datepicker.css

@@ -244,7 +244,7 @@
     height: 1.25rem;
     border: none;
     background: none;
-    border-radius: var(--ds-radius-default);
+    border-radius: var(--ds-radius-md);
     color: var(--ds-color-text-tertiary);
     cursor: pointer;
     font-size: var(--ds-text-xs);

package/src/components/gallery.css

@@ -175,7 +175,7 @@
     border: none;
     border-radius: var(--ds-radius-full);
     background-color: rgba(255, 255, 255, 0.15);
-    color: #fff;
+    color: var(--ds-color-on-inverted);
     font-size: var(--ds-text-xl);
     cursor: pointer;
     transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
@@ -204,7 +204,7 @@
     border: none;
     border-radius: var(--ds-radius-full);
     background-color: rgba(255, 255, 255, 0.15);
-    color: #fff;
+    color: var(--ds-color-on-inverted);
     font-size: var(--ds-text-2xl);
     cursor: pointer;
     transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
@@ -241,7 +241,7 @@
     padding: var(--ds-space-1) var(--ds-space-3);
     border-radius: var(--ds-radius-full);
     background-color: rgba(0, 0, 0, 0.6);
-    color: #fff;
+    color: var(--ds-color-on-inverted);
     font-size: var(--ds-text-sm);
     font-family: var(--ds-font-sans);
     font-variant-numeric: tabular-nums;

package/src/components/hero.css

@@ -3,17 +3,17 @@
    Full-width hero section with background image, gradient overlay,
    and optional frosted glass backdrop.
 
-   Intentionally uses theme-independent colors for text on photo backgrounds.
-   The overlay uses color-mix() with --ds-color-bg for theme-aware darkening
-   while title/subtitle stay white for readability on any photo.
+   The overlay uses color-mix() with --ds-color-bg for theme-aware darkening.
+   Text color is NOT forced — use ds-text-always-white or ds-text-primary
+   depending on your background.
 
    Usage:
      <section class="ds-hero" style="background-image: url(...)">
        <div class="ds-hero__overlay"></div>
        <div class="ds-hero__content ds-container">
          <div class="ds-hero__backdrop">
-           <h1 class="ds-hero__title ds-hero-title">Heading</h1>
-           <p class="ds-hero__subtitle">Subheading</p>
+           <h1 class="ds-hero__title ds-hero-title ds-text-always-white">Heading</h1>
+           <p class="ds-hero__subtitle ds-text-always-white">Subheading</p>
          </div>
        </div>
      </section>
@@ -103,11 +103,9 @@
   margin-inline: auto;
 }
 
-/* --- Title & subtitle (theme-independent white for photo readability) --- */
-.ds-hero__title {
-  color: #fff;
-}
-
+/* --- Title & subtitle (no forced color — use ds-text-always-white or
+   ds-text-primary depending on your overlay/backdrop) --- */
+.ds-hero__title,
 .ds-hero__subtitle {
-  color: rgba(255, 255, 255, 0.85);
+  color: inherit;
 }

package/src/components/popover.css

@@ -38,8 +38,8 @@
     visibility: hidden;
     transform: scale(0.96);
     transition:
-      opacity var(--ds-duration-fast) var(--ds-ease),
-      visibility var(--ds-duration-fast) var(--ds-ease),
+      opacity var(--ds-duration-fast) var(--ds-ease-default),
+      visibility var(--ds-duration-fast) var(--ds-ease-default),
       transform var(--ds-duration-fast) var(--ds-ease-out-expo);
 
     /* Size: small */

package/src/components/slider.css

@@ -50,7 +50,7 @@
       border: 2px solid var(--ds-color-surface);
       box-shadow: var(--ds-shadow-sm);
       cursor: pointer;
-      transition: transform var(--ds-duration-fast) var(--ds-ease);
+      transition: transform var(--ds-duration-fast) var(--ds-ease-default);
     }
 
     /* Firefox thumb */
@@ -62,7 +62,7 @@
       border: 2px solid var(--ds-color-surface);
       box-shadow: var(--ds-shadow-sm);
       cursor: pointer;
-      transition: transform var(--ds-duration-fast) var(--ds-ease);
+      transition: transform var(--ds-duration-fast) var(--ds-ease-default);
     }
 
     /* Hover: scale up thumb */

package/src/components/tag.css

@@ -78,9 +78,9 @@
   }
 
   &--purple {
-    background-color: var(--ds-color-purple-subtle, var(--ds-color-bg-elevated));
-    color: var(--ds-color-purple, var(--ds-color-interactive));
-    border-color: var(--ds-color-purple-border, var(--ds-color-purple, var(--ds-color-interactive)));
+    background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-elevated));
+    color: var(--ds-color-accent-purple, var(--ds-color-interactive));
+    border-color: var(--ds-color-accent-purple-border, var(--ds-color-accent-purple, var(--ds-color-interactive)));
   }
 
   /* ---------------------------------------------------------------------------
@@ -166,7 +166,7 @@
 }
 
 /* Tags used as <button> for selection — no focus ring on click */
-button.ds-tag:focus-visible {
+.ds-tag:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   scroll-margin-block: var(--ds-space-16, 4rem);

package/src/components/toolbar.css

@@ -117,7 +117,7 @@
     height: 1rem;
     padding: 0 0.25rem;
     font-size: 0.625rem;
-    font-weight: 600;
+    font-weight: var(--ds-weight-semibold);
     line-height: 1;
     color: var(--ds-color-on-inverted);
     background: var(--ds-color-interactive);

package/src/tokens/colors.css

@@ -42,6 +42,8 @@
   /* --- Interactive --- */
   --ds-color-interactive: #3f3f46;
   --ds-color-interactive-hover: #27272a;
+  --ds-color-interactive-subtle: rgba(63, 63, 70, 0.1);
+  --ds-color-interactive-border: rgba(63, 63, 70, 0.2);
 
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.5);
@@ -75,7 +77,7 @@
   --ds-color-bg: #09090b;
   --ds-color-bg-subtle: #0f0f11;
   --ds-color-bg-muted: #18181b;
-  --ds-color-bg-elevated: #1c1c20;
+  --ds-color-bg-elevated: #27272a;
 
   --ds-color-surface: #0f0f11;
   --ds-color-surface-hover: #18181b;
@@ -106,6 +108,8 @@
   /* --- Interactive --- */
   --ds-color-interactive: #d4d4d8;
   --ds-color-interactive-hover: #fafafa;
+  --ds-color-interactive-subtle: rgba(212, 212, 216, 0.1);
+  --ds-color-interactive-border: rgba(212, 212, 216, 0.2);
 
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.7);
@@ -135,6 +139,10 @@
 
 /* Shared tokens (same in both themes) */
 :root {
+  /* --- Static (theme-independent, never change between light/dark) --- */
+  --ds-color-static-white: #fafafa;
+  --ds-color-static-black: #09090b;
+
   /* --- Semantic Status --- */
   --ds-color-success: #16a34a;
   --ds-color-success-subtle: rgba(22, 163, 74, 0.1);

package/src/tokens/spacing.css

@@ -44,6 +44,10 @@
   --ds-size-3: 2.5rem;
   --ds-size-4: 3rem;
 
+  /* --- Component-Specific Heights --- */
+  --ds-search-bar-height: 3.5rem;
+  --ds-toolbar-row-height: 2.5rem;
+
   /* --- Section Padding (responsive, generous) --- */
   --ds-section-padding: clamp(80px, 12vw, 160px);
 

package/src/utilities/interactive.css

@@ -32,7 +32,7 @@
 /* --- Editable Cell (pointer + bg on hover) --- */
 .ds-editable {
   cursor: pointer;
-  border-radius: var(--ds-radius-default);
+  border-radius: var(--ds-radius-md);
   transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 .ds-editable:hover {
@@ -86,7 +86,7 @@
 }
 
 .ds-bg-base-50 {
-  background-color: color-mix(in srgb, var(--ds-color-bg-base) 50%, transparent);
+  background-color: color-mix(in srgb, var(--ds-color-bg) 50%, transparent);
 }
 
 /* --- Hover Color Variants --- */

package/src/utilities/text.css

@@ -63,6 +63,10 @@
 .ds-text-interactive { color: var(--ds-color-interactive); }
 .ds-text-on-inverted { color: var(--ds-color-on-inverted); }
 
+/* --- Theme-independent colors (ignore light/dark toggle) --- */
+.ds-text-always-white { color: var(--ds-color-static-white); }
+.ds-text-always-black { color: var(--ds-color-static-black); }
+
 /* --- Background Color --- */
 .ds-bg-base     { background-color: var(--ds-color-bg); }
 .ds-bg-surface  { background-color: var(--ds-color-surface); }