@life-cockpit/angular-ui-kit 1.11.10 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-cockpit/angular-ui-kit",
-  "version": "1.11.10",
+  "version": "2.0.0",
   "description": "Life Cockpit Design System - Angular UI component library",
   "license": "MIT",
   "repository": {

package/src/styles/_mixins.scss

@@ -0,0 +1,117 @@
+// =============================================================================
+// Design System 2.0 — Shared SCSS Mixins
+// =============================================================================
+//
+// Reusable building blocks for the dark-first "pitch" aesthetic. These emit no
+// CSS until @include'd, so importing the partial is free.
+//
+// Usage in a component stylesheet:
+//   @use '../../styles/mixins' as mix;
+//   .my-card { @include mix.card-surface; }
+//
+// All mixins read semantic CSS custom properties (defined in _theme-dark.scss /
+// _theme-light.scss), so a single @include works correctly in both themes.
+// =============================================================================
+
+// Accessible focus ring. Replaces the duplicated
+// `outline: 2px solid var(--color-primary-500)` scattered across components.
+@mixin focus-ring($color: var(--color-primary-500), $offset: 2px, $width: 2px) {
+  &:focus-visible {
+    outline: $width solid $color;
+    outline-offset: $offset;
+  }
+}
+
+// Map a 1–4 elevation level to its token shadow.
+@mixin elevation($level: 1) {
+  box-shadow: var(--elevation-#{$level});
+}
+
+// The signature DS2.0 surface: gradient fill, hairline border, rounded corners,
+// soft elevation, and (optionally) a 3px teal accent line along the top edge.
+// Requires `position` context for the ::after accent (the mixin sets it).
+// Pass `$radius: null` to leave border-radius to the caller (e.g. when a
+// component exposes its own radius scale).
+@mixin card-surface($radius: var(--border-radius-lg), $level: 1, $accent-line: true) {
+  position: relative;
+  overflow: hidden;
+  background-image: var(--gradient-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--elevation-#{$level});
+
+  @if $radius != null {
+    border-radius: $radius;
+  }
+
+  @if $accent-line {
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0 0 auto 0;
+      height: 3px;
+      background: var(--accent-line);
+      opacity: 0.7;
+      pointer-events: none;
+    }
+  }
+}
+
+// Clip a teal→violet gradient to text. Apply to a heading/display element.
+@mixin gradient-text {
+  background: var(--gradient-text);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+// Soft teal glow, typically on hover/focus of interactive surfaces.
+@mixin glow {
+  box-shadow: var(--shadow-glow);
+}
+
+// Pill shape with a teal-tinted translucent fill and strong border — the shared
+// language for buttons, badges, chips, tags.
+@mixin pill($translucent: true) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  border-radius: var(--border-radius-full);
+  border: 1px solid var(--color-border-strong);
+
+  @if $translucent {
+    background: rgba(132, 199, 212, 0.08);
+  }
+}
+
+// Uppercase eyebrow label with letter-spacing and a teal leading dash.
+@mixin kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6em;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-primary-300);
+
+  &::before {
+    content: '';
+    width: 26px;
+    height: 2px;
+    border-radius: 2px;
+    background: var(--color-primary-400);
+  }
+}
+
+// Gradient teal tile with a 1px ring — for logo/avatar/icon squares.
+@mixin brand-tile($size: 2rem, $radius: var(--border-radius-md)) {
+  display: grid;
+  place-items: center;
+  width: $size;
+  height: $size;
+  flex-shrink: 0;
+  border-radius: $radius;
+  background: var(--gradient-brand-tile);
+  box-shadow: var(--shadow-brand-glow);
+  color: var(--color-neutral-900);
+}

package/src/styles/_theme-dark.scss

@@ -14,7 +14,11 @@
 @use './tokens/animation' as *;
 @use './tokens/size' as *;
 
-:root.dark {
+// Design System 2.0: dark is the DEFAULT look. `:root:not(.light)` makes dark
+// apply before any theme class is set (no first-paint white flash); `.light` is
+// the explicit opt-in escape hatch defined in _theme-light.scss.
+:root.dark,
+:root:not(.light) {
   // ============================================================================
   // Colors - Primary (Inverted for dark mode)
   // ============================================================================
@@ -144,12 +148,12 @@
   --typography-line-height-relaxed: #{$typography-line-height-relaxed};
 
   // ============================================================================
-  // Elevation (Enhanced shadows for dark mode)
+  // Elevation (DS2.0 deep layered shadows — from generated tokens)
   // ============================================================================
-  --elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.18);
-  --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.18);
-  --elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
-  --elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.12);
+  --elevation-1: #{$elevation-1};
+  --elevation-2: #{$elevation-2};
+  --elevation-3: #{$elevation-3};
+  --elevation-4: #{$elevation-4};
 
   // ============================================================================
   // Border Radius (Same as light theme)
@@ -196,21 +200,80 @@
   --size-min-touch-height: #{$size-min-touch-height};
 
   // ============================================================================
-  // Semantic Color Mappings for Dark Theme
-  // ============================================================================
-  --color-background: #{$color-neutral-900};
-  --color-surface: #{$color-neutral-800};
-  --color-text-primary: #{$color-neutral-50};
-  --color-text-secondary: #{$color-neutral-300};
-  --color-text-disabled: #{$color-neutral-500};
-  --color-border: #{$color-neutral-700};
-  --color-divider: #{$color-neutral-800};
-  --color-neutral-white: #ffffff;  
+  // Semantic Color Mappings for Dark Theme (DS2.0 — teal-tinted surfaces)
+  // ============================================================================
+  // Surfaces
+  --color-background: #{$color-background-dark};
+  // Two teal+violet radial glows over the base background. Apply on the app
+  // shell via `background-image: var(--app-background-image)`.
+  --app-background-image:
+    radial-gradient(1200px 800px at 12% -10%, rgba(32, 132, 151, 0.20), transparent 60%),
+    radial-gradient(900px 700px at 110% 120%, rgba(78, 63, 132, 0.18), transparent 55%);
+  --color-surface: #{$color-surface-dark-base};
+  --color-surface-2: #{$color-surface-dark-raised};
+  --color-surface-sunken: #{$color-surface-dark-sunken};
+  --color-surface-hover: rgba(132, 199, 212, 0.06);
+  --color-surface-selected: rgba(32, 132, 151, 0.12);
+  --color-surface-muted: rgba(255, 255, 255, 0.02);
+  // Gradient surface for cards/panels (use as `background-image`)
+  --gradient-surface: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
+
+  // Text — tuned brighter than the raw pitch values for AA contrast on the
+  // teal-tinted surfaces (#14222e / #1a2c3a).
+  --color-text-primary: #f1f6f8;
+  --color-text-secondary: #c4d2d9;
+  --color-text-tertiary: #93a4ad;
+  --color-text-disabled: #6c7e88;
+  --color-neutral-white: #ffffff;
+
+  // Borders
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-border-strong: rgba(132, 199, 212, 0.28);
+  --color-divider: rgba(255, 255, 255, 0.06);
+
+  // Brand alias (some components reference bare --color-primary)
+  --color-primary: var(--color-primary-500);
+  // Solid brand-teal fill for primary actions — uses the LITERAL brand teal in
+  // both themes (not the inverted scale) so primary buttons are always the
+  // recognizable, high-contrast brand color with white ink.
+  --color-primary-fill: #{$color-primary-500};
+  --color-primary-fill-hover: #{$color-primary-400};
+  --color-primary-fill-active: #{$color-primary-600};
+  --color-on-primary: #ffffff;
+  // Solid secondary fill (literal brand secondary in both themes; dark enough
+  // for white ink so it never washes out under dark-mode inversion).
+  --color-secondary-fill: #{$color-secondary-600};
+  --color-secondary-fill-hover: #{$color-secondary-500};
+  --color-secondary-fill-active: #{$color-secondary-700};
+  --color-on-secondary: #ffffff;
+  // Solid semantic fills (literal, non-inverted) for danger/warning/info actions.
+  --color-error-fill: #{$color-error-default};
+  --color-error-fill-hover: #c11414;
+  --color-error-fill-active: #{$color-error-dark};
+  --color-on-error: #ffffff;
+
   // Semantic color aliases for components
   --color-error: #{$color-error-default};
   --color-success: #{$color-success-default};
   --color-warning: #{$color-warning-default};
   --color-info: #{$color-info-default};
+
+  // ============================================================================
+  // DS2.0 Visual Primitives (the pitch signature)
+  // ============================================================================
+  // NOTE: these reference the RAW token scale (#{$color-primary-*}) rather than
+  // the inverted --color-primary-* custom properties, so the teal gradient reads
+  // bright-on-dark exactly like the pitch regardless of dark-mode inversion.
+  // 3px top accent bar for cards/panels (use on a ::after as background)
+  --accent-line: linear-gradient(90deg, #{$color-primary-500}, transparent);
+  // 1px teal ring used on brand tiles / focus glow
+  --shadow-brand-glow: 0 0 0 1px rgba(132, 199, 212, 0.3);
+  // Soft teal hover/focus glow
+  --shadow-glow: 0 0 24px rgba(132, 199, 212, 0.12);
+  // Gradient for clipped display text (use with -webkit-background-clip: text)
+  --gradient-text: linear-gradient(100deg, #{$color-primary-300}, #{$color-primary-500} 55%, #{$color-accent-purple});
+  // Gradient teal tile for logos / icon squares
+  --gradient-brand-tile: linear-gradient(135deg, #{$color-primary-400}, #{$color-primary-600});
   // ============================================================================
   // Short Aliases for Common Usage (Component Convenience)
   // ============================================================================
@@ -230,8 +293,27 @@
   --line-height-relaxed: var(--typography-line-height-relaxed);
   --animation-timing-ease: var(--animation-easing-ease-in-out);
   
-  // Error color scale aliases (for danger buttons, etc.)
+  // Semantic color scale aliases — resolve the numeric scale some components
+  // use onto the canonical semantic shades (already dark-tuned above).
+  --color-error-50: rgba(157, 14, 14, 0.18);
+  --color-error-100: rgba(157, 14, 14, 0.22);
+  --color-error-500: var(--color-error-default);
   --color-error-600: var(--color-error-default);
   --color-error-700: var(--color-error-dark);
-  --color-error-800: #5a0707; // Darker shade for active state
+  --color-error-800: #5a0707;
+  --color-success-50: rgba(142, 164, 117, 0.18);
+  --color-success-100: rgba(142, 164, 117, 0.22);
+  --color-success-500: var(--color-success-default);
+  --color-success-600: var(--color-success-default);
+  --color-success-700: var(--color-success-dark);
+  --color-warning-50: rgba(225, 160, 64, 0.18);
+  --color-warning-100: rgba(225, 160, 64, 0.22);
+  --color-warning-500: var(--color-warning-default);
+  --color-warning-600: var(--color-warning-default);
+  --color-warning-700: var(--color-warning-dark);
+  --color-info-50: rgba(59, 101, 136, 0.2);
+  --color-info-100: rgba(59, 101, 136, 0.24);
+  --color-info-500: var(--color-info-default);
+  --color-info-600: var(--color-info-default);
+  --color-info-700: var(--color-info-dark);
 }

package/src/styles/_theme-light.scss

@@ -198,23 +198,64 @@
   --size-min-touch-height: #{$size-min-touch-height};
 
   // ============================================================================
-  // Semantic Color Mappings for Light Theme
+  // Semantic Color Mappings for Light Theme (DS2.0 — mirrors dark token names)
   // ============================================================================
+  // Surfaces
   --color-background: #ffffff;
+  --app-background-image: none;
   --color-surface: #ffffff;
+  --color-surface-2: #{$color-neutral-50};
+  --color-surface-sunken: #{$color-neutral-100};
+  --color-surface-hover: #{$color-neutral-100};
+  --color-surface-selected: #{$color-primary-50};
+  --color-surface-muted: #{$color-neutral-50};
+  --gradient-surface: linear-gradient(180deg, #ffffff, #{$color-neutral-50});
+
+  // Text
   --color-text-primary: #{$color-neutral-900};
   --color-text-secondary: #{$color-neutral-600};
+  --color-text-tertiary: #{$color-neutral-500};
   --color-text-disabled: #{$color-neutral-400};
+  --color-neutral-white: #ffffff;
+
+  // Borders
   --color-border: #{$color-neutral-300};
+  --color-border-strong: #{$color-primary-300};
   --color-divider: #{$color-neutral-200};
-  --color-neutral-white: #ffffff;
-  
+
+  // Brand alias (some components reference bare --color-primary)
+  --color-primary: var(--color-primary-500);
+  // Solid brand-teal fill for primary actions (literal brand teal in both themes).
+  --color-primary-fill: #{$color-primary-500};
+  --color-primary-fill-hover: #{$color-primary-600};
+  --color-primary-fill-active: #{$color-primary-700};
+  --color-on-primary: #ffffff;
+  // Solid secondary fill (literal brand secondary in both themes).
+  --color-secondary-fill: #{$color-secondary-600};
+  --color-secondary-fill-hover: #{$color-secondary-700};
+  --color-secondary-fill-active: #{$color-secondary-800};
+  --color-on-secondary: #ffffff;
+  // Solid semantic fills for danger/warning/info actions.
+  --color-error-fill: #{$color-error-default};
+  --color-error-fill-hover: #{$color-error-dark};
+  --color-error-fill-active: #{$color-error-dark};
+  --color-on-error: #ffffff;
+
   // Semantic color aliases for components
   --color-error: #{$color-error-default};
   --color-success: #{$color-success-default};
   --color-warning: #{$color-warning-default};
   --color-info: #{$color-info-default};
 
+  // ============================================================================
+  // DS2.0 Visual Primitives (light-tuned values of the dark primitives)
+  // ============================================================================
+  --accent-line: linear-gradient(90deg, #{$color-primary-500}, transparent);
+  --shadow-brand-glow: 0 0 0 1px rgba(32, 132, 151, 0.18);
+  --shadow-glow: 0 0 24px rgba(32, 132, 151, 0.10);
+  --gradient-text: linear-gradient(100deg, #{$color-primary-500}, #{$color-primary-600} 55%, #{$color-accent-violet});
+  --gradient-brand-tile: linear-gradient(135deg, #{$color-primary-400}, #{$color-primary-600});
+
   // ============================================================================
   // Short Aliases for Common Usage (Component Convenience)
   // ============================================================================
@@ -234,8 +275,27 @@
   --line-height-relaxed: var(--typography-line-height-relaxed);
   --animation-timing-ease: var(--animation-easing-ease-in-out);
   
-  // Error color scale aliases (for danger buttons, etc.)
+  // Semantic color scale aliases — map the numeric scale some components use
+  // onto the three canonical semantic shades so they always resolve.
+  --color-error-50: #{$color-error-light};
+  --color-error-100: #{$color-error-light};
+  --color-error-500: var(--color-error-default);
   --color-error-600: var(--color-error-default);
   --color-error-700: var(--color-error-dark);
   --color-error-800: #5a0707; // Darker shade for active state
+  --color-success-50: #{$color-success-light};
+  --color-success-100: #{$color-success-light};
+  --color-success-500: var(--color-success-default);
+  --color-success-600: var(--color-success-default);
+  --color-success-700: var(--color-success-dark);
+  --color-warning-50: #{$color-warning-light};
+  --color-warning-100: #{$color-warning-light};
+  --color-warning-500: var(--color-warning-default);
+  --color-warning-600: var(--color-warning-default);
+  --color-warning-700: var(--color-warning-dark);
+  --color-info-50: #{$color-info-light};
+  --color-info-100: #{$color-info-light};
+  --color-info-500: var(--color-info-default);
+  --color-info-600: var(--color-info-default);
+  --color-info-700: var(--color-info-dark);
 }

package/src/styles/tokens/_all.scss

@@ -48,6 +48,13 @@ $color-accent-purple: #866aa0;
 $color-accent-red: #9e3846;
 $color-accent-rust: #c6592e;
 $color-accent-violet: #4e3f84;
+$color-surface-dark-base: #14222e; // DS2.0 dark card surface
+$color-surface-dark-raised: #1a2c3a; // DS2.0 raised dark surface
+$color-surface-dark-sunken: #0c1722; // DS2.0 sunken dark surface
+$color-background-dark: #111827; // DS2.0 dark app background (== neutral-900)
+$color-text-dark-primary: #eef4f6; // DS2.0 dark primary text
+$color-text-dark-secondary: #aebfc7; // DS2.0 dark secondary text
+$color-text-dark-tertiary: #71858f; // DS2.0 dark muted text
 $spacing-0: 0;
 $spacing-1: 0.25rem; // 4px - Base grid unit
 $spacing-2: 0.5rem; // 8px
@@ -86,16 +93,16 @@ $typography-font-weight-bold: 700;
 $typography-line-height-tight: 1.25;
 $typography-line-height-normal: 1.5;
 $typography-line-height-relaxed: 1.75;
-$elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // Subtle elevation for cards
-$elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // Medium elevation for dropdowns
-$elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); // High elevation for modals
-$elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); // Highest elevation for tooltips
+$elevation-1: 0 4px 24px rgba(0, 0, 0, 0.35); // DS2.0 subtle layered elevation for cards
+$elevation-2: 0 8px 32px rgba(0, 0, 0, 0.42); // DS2.0 medium elevation for dropdowns/popovers
+$elevation-3: 0 14px 44px rgba(0, 0, 0, 0.48); // DS2.0 high elevation for drawers
+$elevation-4: 0 18px 60px rgba(0, 0, 0, 0.55); // DS2.0 highest elevation for modals/overlays
 $border-radius-none: 0;
-$border-radius-sm: 0.25rem; // 4px
-$border-radius-md: 0.5rem; // 8px - Default
-$border-radius-lg: 0.75rem; // 12px
-$border-radius-xl: 1rem; // 16px
-$border-radius-2xl: 1.5rem; // 24px
+$border-radius-sm: 0.625rem; // 10px - DS2.0 small
+$border-radius-md: 0.75rem; // 12px - DS2.0 default
+$border-radius-lg: 1.125rem; // 18px - DS2.0 card radius
+$border-radius-xl: 1.5rem; // 24px
+$border-radius-2xl: 2rem; // 32px
 $border-radius-full: 9999px; // Fully rounded
 $animation-duration-fast: 150ms; // Standard animation duration
 $animation-easing-ease-in: ease-in;

package/src/styles/tokens/_border-radius.scss

@@ -2,9 +2,9 @@
 // Do not edit directly, this file was auto-generated.
 
 $border-radius-none: 0;
-$border-radius-sm: 0.25rem; // 4px
-$border-radius-md: 0.5rem; // 8px - Default
-$border-radius-lg: 0.75rem; // 12px
-$border-radius-xl: 1rem; // 16px
-$border-radius-2xl: 1.5rem; // 24px
+$border-radius-sm: 0.625rem; // 10px - DS2.0 small
+$border-radius-md: 0.75rem; // 12px - DS2.0 default
+$border-radius-lg: 1.125rem; // 18px - DS2.0 card radius
+$border-radius-xl: 1.5rem; // 24px
+$border-radius-2xl: 2rem; // 32px
 $border-radius-full: 9999px; // Fully rounded

package/src/styles/tokens/_colors.scss

@@ -48,3 +48,10 @@ $color-accent-purple: #866aa0;
 $color-accent-red: #9e3846;
 $color-accent-rust: #c6592e;
 $color-accent-violet: #4e3f84;
+$color-surface-dark-base: #14222e; // DS2.0 dark card surface
+$color-surface-dark-raised: #1a2c3a; // DS2.0 raised dark surface
+$color-surface-dark-sunken: #0c1722; // DS2.0 sunken dark surface
+$color-background-dark: #111827; // DS2.0 dark app background (== neutral-900)
+$color-text-dark-primary: #eef4f6; // DS2.0 dark primary text
+$color-text-dark-secondary: #aebfc7; // DS2.0 dark secondary text
+$color-text-dark-tertiary: #71858f; // DS2.0 dark muted text

package/src/styles/tokens/_elevation.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // Subtle elevation for cards
-$elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // Medium elevation for dropdowns
-$elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); // High elevation for modals
-$elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); // Highest elevation for tooltips
+$elevation-1: 0 4px 24px rgba(0, 0, 0, 0.35); // DS2.0 subtle layered elevation for cards
+$elevation-2: 0 8px 32px rgba(0, 0, 0, 0.42); // DS2.0 medium elevation for dropdowns/popovers
+$elevation-3: 0 14px 44px rgba(0, 0, 0, 0.48); // DS2.0 high elevation for drawers
+$elevation-4: 0 18px 60px rgba(0, 0, 0, 0.55); // DS2.0 highest elevation for modals/overlays