@ids-group-ltd/ids-design-system 0.2.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ids-group-ltd/ids-design-system",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "IDS Group Angular design system: components, tokens, themes",
   "license": "MIT",
   "homepage": "https://ids-ds.proto.ids-group.co.uk/",
@@ -39,5 +39,6 @@
   "sideEffects": false,
   "module": "fesm2022/ids-group-ltd-ids-design-system.mjs",
   "typings": "types/ids-group-ltd-ids-design-system.d.ts",
-  "type": "module"
-}
+  "type": "module",
+  "schematics": "./schematics/collection.json"
+}

package/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Wire the IDS design system's global styles into a project.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const DS_IMPORT = "@use '@ids-group-ltd/ids-design-system/styles/ds';";
+/**
+ * `ng add @ids-group-ltd/ids-design-system` — wires the design system's global
+ * styles (palette + theme + tokens + globals) into the target project's styles
+ * entry. Idempotent. Components are standalone — import them directly where used.
+ */
+function ngAdd(options) {
+    return (tree, context) => {
+        const angularJson = tree.read('angular.json');
+        if (!angularJson) {
+            context.logger.warn('ng-add: angular.json not found — skipping styles wiring.');
+            return tree;
+        }
+        const workspace = JSON.parse(angularJson.toString());
+        const projects = workspace.projects ?? {};
+        const projectName = options.project ??
+            workspace.defaultProject ??
+            Object.keys(projects).find((name) => projects[name].projectType === 'application');
+        const stylesEntry = projectName
+            ? findStylesFile(projects[projectName])
+            : undefined;
+        if (!stylesEntry || !tree.exists(stylesEntry)) {
+            context.logger.info(`ng-add: add \`${DS_IMPORT}\` to your global styles file manually.`);
+            return tree;
+        }
+        const current = tree.read(stylesEntry).toString();
+        if (current.includes(DS_IMPORT)) {
+            context.logger.info('ng-add: design system already imported — nothing to do.');
+            return tree;
+        }
+        tree.overwrite(stylesEntry, `${DS_IMPORT}\n${current}`);
+        context.logger.info(`ng-add: imported the design system into ${stylesEntry}.`);
+        return tree;
+    };
+}
+function findStylesFile(project) {
+    const styles = project?.architect?.build?.options?.styles;
+    if (!styles?.length) {
+        return undefined;
+    }
+    const first = styles[0];
+    const path = typeof first === 'string' ? first : first.input;
+    return path && /\.s?css$/.test(path) ? path : undefined;
+}

package/schematics/ng-add/schema.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "IdsNgAdd",
+  "title": "IDS ng-add Options",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Project to wire the design system into (defaults to the workspace default / first application)."
+    }
+  },
+  "required": []
+}

package/styles/_breakpoints.scss

@@ -0,0 +1,50 @@
+// Breakpoint scale — SINGLE source for both representations:
+//   --bp-*  runtime custom properties (regular rules, JS via getComputedStyle)
+//   $bp-*   compile-time Sass aliases, usable inside @media
+//
+// Why $bp-* exist: a custom property CANNOT be used in a @media condition
+// (`@media (width >= var(--bp-md))` is ignored — the condition is evaluated
+// before custom-property resolution). Sass variables resolve at build time, so
+// they can. Use this partial wherever a media query needs the scale:
+//   @use 'breakpoints' as bp;          // same dir; relative path elsewhere
+//   @include bp.up(md) { … }           // width >= 768px
+//   @include bp.down(sm) { … }         // width <  640px
+//   @media (width >= #{bp.$bp-lg}) { } // or read an alias directly
+
+@use 'sass:map';
+
+$breakpoints: (
+  'xs':  480px,
+  'sm':  640px,
+  'md':  768px,
+  'lg':  1024px,
+  'xl':  1441px, // page-grid wide-tier threshold (12 cols, caps at --col-cap-content)
+  '2xl': 1536px,
+);
+$bp-xs: map.get($breakpoints, 'xs');
+$bp-sm: map.get($breakpoints, 'sm');
+$bp-md: map.get($breakpoints, 'md');
+$bp-lg: map.get($breakpoints, 'lg');
+$bp-xl: map.get($breakpoints, 'xl');
+$bp-2xl: map.get($breakpoints, '2xl');
+
+// width >= breakpoint — mobile-first / min-width semantics.
+@mixin up($name) {
+  @media (width >= #{map.get($breakpoints, $name)}) {
+    @content;
+  }
+}
+
+// width < breakpoint — max-width semantics, exclusive of the breakpoint itself.
+@mixin down($name) {
+  @media (width < #{map.get($breakpoints, $name)}) {
+    @content;
+  }
+}
+
+// Runtime mirror — emitted from the same map so the two never drift.
+:root {
+  @each $name, $value in $breakpoints {
+    --bp-#{$name}: #{$value};
+  }
+}

package/styles/_dropdown-overlay.scss

@@ -39,7 +39,7 @@
   .optgroup-label {
     display: block;
     padding: var(--space-2) var(--space-3) var(--space-1);
-    font: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);
+    font: var(--font-weight-semibold) var(--font-size-xs) / var(--line-height-flat) var(--font-sans);
     color: var(--text-tertiary);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-wide);
@@ -67,11 +67,12 @@
     padding: var(--space-2) var(--space-2-5);
     border: 0;
     background: transparent;
-    font: var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);
+    font: var(--font-weight-medium) var(--font-size-s) / var(--line-height-flat) var(--font-sans);
     color: var(--text-primary);
     cursor: pointer;
     border-radius: var(--radius-sm);
     text-align: left;
+    transition: background-color var(--duration-fast) var(--ease-standard);
 
     .option-icon {
       color: var(--icon-default);
@@ -98,7 +99,7 @@
 
     &:focus-visible {
       outline: none;
-      box-shadow: var(--focus-ring);
+      box-shadow: var(--ds-control-focus-shadow);
     }
 
     &.is-selected {

package/styles/_ds-color.scss

@@ -0,0 +1,36 @@
+// Scoped accent recolour. A `ds-color="<family>"` attribute — on a zone
+// container, on a component host, or applied via the ds.color() mixin in
+// consumer config — flips the --accent-* pointer family to another brand/status
+// family for its subtree. Components read --accent-* for their accent (the
+// Phase 2 sweep), so the whole subtree recolours from this one rule. Pairs with
+// the button/icon-button `color` input (Phase 1), which flips the same pointers
+// per instance. With no attribute, --accent-* stays the primary family (see
+// themes/_semantic.scss), so the default theme is unchanged.
+
+@mixin family-vars($family) {
+  --accent: var(--#{$family});
+  --accent-hover: var(--#{$family}-hover);
+  --accent-pressed: var(--#{$family}-pressed);
+  --accent-strong: var(--#{$family}-strong);
+  --accent-subtitle: var(--#{$family}-subtitle);
+  --accent-muted: var(--#{$family}-muted);
+  --accent-muted-strong: var(--#{$family}-muted-strong);
+  --accent-on: var(--#{$family}-on);
+  --accent-focus-ring: var(--focus-ring-#{$family});
+  --accent-focus-field: var(--focus-field-#{$family});
+  --accent-surface-tint: var(--#{$family}-subtitle);
+}
+
+/// Recolour the DS accent for a type or scope from consumer SCSS, e.g.
+/// `ds-switch { @include ds.color(secondary); }`.
+@mixin color($family) {
+  @include family-vars($family);
+}
+
+$families: secondary, tertiary, error, success, warning;
+
+@each $family in $families {
+  [ds-color='#{$family}'] {
+    @include family-vars($family);
+  }
+}

package/styles/_fonts.scss

@@ -1,35 +1,39 @@
 // Self-hosted DS default fonts (latin subset). Consumers override --font-sans / --font-mono to swap.
 
 @font-face {
-  font-family: 'Mulish';
+  font-family: Mulish;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('./fonts/mulish-latin-400-normal.woff2') format('woff2');
 }
+
 @font-face {
-  font-family: 'Mulish';
+  font-family: Mulish;
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('./fonts/mulish-latin-500-normal.woff2') format('woff2');
 }
+
 @font-face {
-  font-family: 'Mulish';
+  font-family: Mulish;
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('./fonts/mulish-latin-600-normal.woff2') format('woff2');
 }
+
 @font-face {
-  font-family: 'Mulish';
+  font-family: Mulish;
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('./fonts/mulish-latin-700-normal.woff2') format('woff2');
 }
+
 @font-face {
-  font-family: 'Mulish';
+  font-family: Mulish;
   font-style: normal;
   font-weight: 800;
   font-display: swap;
@@ -43,6 +47,7 @@
   font-display: swap;
   src: url('./fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
 }
+
 @font-face {
   font-family: 'JetBrains Mono';
   font-style: normal;
@@ -50,6 +55,7 @@
   font-display: swap;
   src: url('./fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
 }
+
 @font-face {
   font-family: 'JetBrains Mono';
   font-style: normal;

package/styles/_layout-utils.scss

@@ -5,10 +5,10 @@
 .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
 .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
 
-@media (max-width: 1100px) {
+@media (width <= 1100px) {
   .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
-@media (max-width: 820px) {
+@media (width <= 820px) {
   .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }

package/styles/_link.scss

@@ -30,7 +30,7 @@
 
   &:focus-visible {
     outline: none;
-    box-shadow: var(--focus-ring);
+    box-shadow: var(--ds-control-focus-shadow);
     border-radius: var(--radius-sm);
     text-decoration-color: var(--_link-color);
   }
@@ -43,12 +43,13 @@
   }
 
   .icon {
-    color: currentColor;
+    color: currentcolor;
     flex-shrink: 0;
   }
 
   &.quiet {
     color: var(--text-secondary);
+
     /* Pull the underline down to match the muted text — the base rule sets
        text-decoration-color to the link color, which would leave a bright
        underline under grey text at rest. */

package/styles/_overlay-motion.scss

@@ -0,0 +1,18 @@
+// Enter/leave motion for CDK-overlay panels that carry the `ds-overlay-pane`
+// panelClass (select, dropdown, combobox, date-picker, popover, tooltip).
+// Animates the panel's ROOT CHILD, not the pane itself, so CDK's positioning
+// transforms on `.cdk-overlay-pane` are left untouched. The leave variant is
+// driven by `ds-leaving`, added by disposeWithLeave() (components/overlay-motion.ts).
+// prefers-reduced-motion zeroes --duration-fast → instant (animationend still
+// fires, so disposeWithLeave still tears down).
+
+.cdk-overlay-pane.ds-overlay-pane > * {
+  animation: ds-overlay-in var(--duration-fast) var(--ease-decelerate);
+}
+
+@keyframes ds-overlay-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}

package/styles/_page-grid.scss

@@ -27,24 +27,27 @@
   // Mobile (default, <= 640px) — 4 columns
   --page-gutter: var(--page-gutter-mobile);
   --page-margin: var(--page-margin-mobile);
+
   grid-template-columns: repeat(4, minmax(0, 1fr));
 
   // Tablet (641-1024px) — 8 columns
-  @media (min-width: 641px) {
+  @media (width >= 641px) {
     --page-gutter: var(--page-gutter-tablet);
     --page-margin: var(--page-margin-tablet);
+
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
   // Desktop (1025-1440px) — 12 columns, fluid width
-  @media (min-width: 1025px) {
+  @media (width >= 1025px) {
     --page-gutter: var(--page-gutter-desktop);
     --page-margin: var(--page-margin-desktop);
+
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   // Desktop wide (>= 1441px) — 12 columns, container capped at --col-cap-content
-  @media (min-width: 1441px) {
+  @media (width >= 1441px) {
     --page-gutter: var(--page-gutter-wide);
     --page-margin: var(--page-margin-wide);
   }

package/styles/_reset.scss

@@ -1,13 +1,18 @@
 // Reset — ported from CLAUDE_DESIGN_DS/tokens.css §Base.
 
 *, *::before, *::after { box-sizing: border-box; }
+
+/* Opt into animating to/from intrinsic sizes (height: auto, max-content).
+   Inherited, so components can transition height:0 ↔ auto natively
+   (accordion, sidenav group) without max-height magic numbers. */
+:root { interpolate-size: allow-keywords; }
 html, body {
   margin: 0;
   font-family: var(--font-sans);
   color: var(--text-primary);
   background: var(--surface-canvas);
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 button, input, select, textarea { font-family: inherit; }
 

package/styles/_scrollbar.scss

@@ -9,9 +9,10 @@ html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparen
   border-radius: var(--radius-pill);
   border: var(--space-0-5) solid transparent;
   background-clip: padding-box;
+  transition: background-color var(--duration-fast) var(--ease-standard);
 }
 *::-webkit-scrollbar-thumb:hover  { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
 *::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-active); background-clip: padding-box; }
 
 // Global text-selection — sourced from components-extras.css line 910.
-::selection { background: var(--select-bg, color-mix(in srgb, var(--primary) 22%, transparent)); color: var(--text-primary); }
+::selection { background-color: var(--select-bg-color, color-mix(in srgb, var(--primary) 22%, transparent)); color: var(--text-primary); }

package/styles/_theme-activation.scss

@@ -0,0 +1,49 @@
+// =========================================================================
+// Theme activation.
+//
+// Light is the DEFAULT — applied at bare :root, no attribute needed. Dark is
+// OPT-IN via <html data-theme="dark">; because the dark block declares the
+// complete token set (palette + roles + overrides), the more-specific
+// [data-theme='dark'] selector fully replaces light when present — it is not
+// a delta-patch.
+//
+// There is no automatic prefers-color-scheme switch. To follow the OS, a
+// consumer opts in at the app root: provideDsTheme({ followSystem: true })
+// (exported from the package; see themes/README.md).
+//
+// Order matters: the dark block comes LAST so it wins over the light-context
+// overrides (brand-gray neutrals) at equal specificity.
+// =========================================================================
+
+@use '../themes/light/theme' as light;
+@use '../themes/dark/theme' as dark;
+
+:root {
+  color-scheme: light; // native UI (scrollbars, form controls) match; opts out of UA force-dark
+
+  @include light.theme;
+}
+
+// Brand-gray neutral family — opt-in light-context switch (ds-docs tweaks panel).
+// A light-theme feature: dark ships its own neutral ramp and wins below.
+:root[data-neutrals='brand'] {
+  --neutral-0:   var(--brand-gray-0);
+  --neutral-50:  var(--brand-gray-50);
+  --neutral-100: var(--brand-gray-100);
+  --neutral-150: var(--brand-gray-150);
+  --neutral-200: var(--brand-gray-200);
+  --neutral-300: var(--brand-gray-300);
+  --neutral-400: var(--brand-gray-400);
+  --neutral-500: var(--brand-gray-500);
+  --neutral-600: var(--brand-gray-600);
+  --neutral-700: var(--brand-gray-700);
+  --neutral-800: var(--brand-gray-800);
+  --neutral-900: var(--brand-gray-900);
+  --neutral-950: var(--brand-gray-950);
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark; // native UI (scrollbars, form controls) render dark to match
+
+  @include dark.theme;
+}

package/styles/_tokens-charts.scss

@@ -15,14 +15,14 @@
 
 :root {
   /* CATEGORICAL (8) ----------------------------------------- */
-  --chart-cat-1: hsl(229, 100%, 59%);   /* blue (primary) */
-  --chart-cat-2: hsl(165,  72%, 38%);   /* teal */
-  --chart-cat-3: hsl( 24,  95%, 55%);   /* orange */
-  --chart-cat-4: hsl(330,  82%, 55%);   /* magenta */
-  --chart-cat-5: hsl(45,   95%, 50%);   /* amber */
-  --chart-cat-6: hsl(190,  85%, 45%);   /* cyan */
-  --chart-cat-7: hsl(280,  60%, 60%);   /* lavender */
-  --chart-cat-8: hsl(130,  45%, 50%);   /* moss */
+  --chart-cat-1: hsl(229deg 100% 59%);   /* blue (primary) */
+  --chart-cat-2: hsl(165deg  72% 38%);   /* teal */
+  --chart-cat-3: hsl( 24deg  95% 55%);   /* orange */
+  --chart-cat-4: hsl(330deg  82% 55%);   /* magenta */
+  --chart-cat-5: hsl(45deg   95% 50%);   /* amber */
+  --chart-cat-6: hsl(190deg  85% 45%);   /* cyan */
+  --chart-cat-7: hsl(280deg  60% 60%);   /* lavender */
+  --chart-cat-8: hsl(130deg  45% 50%);   /* moss */
 
   /* SEQUENTIAL — single-hue, light → dark */
   --chart-seq-1: var(--blue-100);
@@ -38,13 +38,13 @@
      matches the reference one-for-one. Explicit HSL keeps the ramp
      independent of palette retunes — re-skinning brand/red/green
      should not shift the dataviz colour story. */
-  --chart-div--3: hsl(0 70% 40%);       /* large negative (worst) */
-  --chart-div--2: hsl(0 60% 58%);
-  --chart-div--1: hsl(0 50% 80%);
-  --chart-div-0:  hsl(225 8% 92%);      /* zero */
-  --chart-div-1:  hsl(140 35% 80%);
-  --chart-div-2:  hsl(140 45% 55%);
-  --chart-div-3:  hsl(140 55% 35%);     /* large positive (best) */
+  --chart-div--3: hsl(0deg 70% 40%);       /* large negative (worst) */
+  --chart-div--2: hsl(0deg 60% 58%);
+  --chart-div--1: hsl(0deg 50% 80%);
+  --chart-div-0:  hsl(225deg 8% 92%);      /* zero */
+  --chart-div-1:  hsl(140deg 35% 80%);
+  --chart-div-2:  hsl(140deg 45% 55%);
+  --chart-div-3:  hsl(140deg 55% 35%);     /* large positive (best) */
 
   /* AXIS / GRID / LEGEND */
   --chart-axis-line:    var(--neutral-300);
@@ -56,10 +56,10 @@
   --chart-axis-fs:      var(--font-size-2xs);
 
   /* HIGHLIGHT / HOVER */
-  --chart-hover-bg:     hsla(225, 39%, 7%, .04);
+  --chart-hover-bg-color:     hsl(225deg 39% 7% / 4%);
   --chart-cursor-line:  var(--neutral-400);
-  --chart-tooltip-bg:   var(--neutral-900);
-  --chart-tooltip-fg:   var(--neutral-0);
+  --chart-tooltip-bg-color:   var(--neutral-900);
+  --chart-tooltip-text-color:   var(--neutral-0);
   --chart-tooltip-border: var(--neutral-700);
 
   /* DIMENSIONS */