@moodlehq/design-system 4.0.0 → 5.0.0

package/dist/index.js

@@ -2,9 +2,15 @@
 /* empty css                 */
 /* empty css                 */
 import { ActivityIcon } from "./components/activity-icon/ActivityIcon.js";
-import { Badge } from "./components/badge/Badge2.js";
+import { Badge } from "./components/badge/Badge.js";
 import { Button } from "./components/button/Button.js";
 import { Checkbox } from "./components/checkbox/Checkbox.js";
+import { Choicebox } from "./components/choicebox/Choicebox.js";
 import { CloseButton } from "./components/close-button/CloseButton.js";
+import { FavouriteButton } from "./components/favourite-button/FavouriteButton.js";
+import { Link } from "./components/link/Link.js";
+import { NavPill } from "./components/nav-pill/NavPill.js";
+import { Pagination } from "./components/pagination/Pagination.js";
+import { ProgressBar } from "./components/progress-bar/ProgressBar.js";
 import { Radio } from "./components/radio/Radio.js";
-export { ActivityIcon, Badge, Button, Checkbox, CloseButton, Radio };
+export { ActivityIcon, Badge, Button, Checkbox, Choicebox, CloseButton, FavouriteButton, Link, NavPill, Pagination, ProgressBar, Radio };

package/{tokens → dist/tokens}/css/colors.css

@@ -26,7 +26,7 @@
   --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
   --mds-bg-feedback-primary-light: var(--mds-color-blue-50);
   --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
-  --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
+  --mds-bg-feedback-secondary-default: var(--mds-color-gray-300);
   --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
   --mds-bg-feedback-success-default: var(--mds-color-green-500);
   --mds-bg-feedback-success-light: var(--mds-color-green-50);
@@ -44,9 +44,12 @@
   --mds-bg-interactive-primary-default-light: var(--mds-color-blue-50);
   --mds-bg-interactive-primary-disabled: var(--mds-color-blue-200);
   --mds-bg-interactive-primary-hover: var(--mds-color-blue-600);
-  --mds-bg-interactive-secondary-default: var(--mds-color-gray-400);
+  --mds-bg-interactive-secondary-default: var(--mds-color-gray-300);
   --mds-bg-interactive-secondary-disabled: var(--mds-color-gray-200);
-  --mds-bg-interactive-secondary-hover: var(--mds-color-gray-300);
+  --mds-bg-interactive-secondary-hover: var(--mds-color-gray-400);
+  --mds-bg-nav-pill-hover: var(--mds-color-gray-200);
+  --mds-bg-nav-pill-pressed: var(--mds-color-gray-300);
+  --mds-bg-nav-pill-selected: var(--mds-color-gray-200);
   --mds-bg-surface-default: var(--mds-color-gray-white);
   --mds-bg-surface-strong: var(--mds-color-gray-200);
   --mds-bg-surface-subtle: var(--mds-color-gray-100);
@@ -62,7 +65,7 @@
   --mds-border-interactive-primary-active: var(--mds-color-blue-600);
   --mds-border-interactive-primary-disabled: var(--mds-color-blue-300);
   --mds-border-interactive-secondary-active: var(--mds-color-gray-700);
-  --mds-border-interactive-secondary-default: var(--mds-color-gray-600);
+  --mds-border-interactive-secondary-default: var(--mds-color-gray-500);
   --mds-border-interactive-secondary-disabled: var(--mds-color-gray-500);
   --mds-border-interactive-secondary-hover: var(--mds-color-gray-600);
   --mds-border-subtle: var(--mds-color-gray-200);

package/{tokens → dist/tokens}/css/primitives.css

@@ -130,7 +130,7 @@
   --mds-scale-1700: 6rem;
   --mds-scale-1800: 50rem;
   --mds-typography-font-family-monospace: Menlo;
-  --mds-typography-font-family-sans-serif: Roboto;
+  --mds-typography-font-family-sans-serif: Noto sans;
   --mds-typography-font-size-0: 0rem;
   --mds-typography-font-size-1: 1rem;
   --mds-typography-font-size-2: 2rem;

package/{tokens → dist/tokens}/scss/_colors.scss

@@ -24,7 +24,7 @@ $mds-bg-feedback-info-subtle: #cce6ea !default;
 $mds-bg-feedback-primary-default: #0f6cbf !default;
 $mds-bg-feedback-primary-light: #e7f0f9 !default;
 $mds-bg-feedback-primary-subtle: #cfe2f2 !default;
-$mds-bg-feedback-secondary-default: #ced4da !default;
+$mds-bg-feedback-secondary-default: #dee2e6 !default;
 $mds-bg-feedback-secondary-subtle: #f8f9fa !default;
 $mds-bg-feedback-success-default: #357a32 !default;
 $mds-bg-feedback-success-light: #ebf2ea !default;
@@ -42,10 +42,13 @@ $mds-bg-interactive-primary-default: #0f6cbf !default;
 $mds-bg-interactive-primary-default-light: #e7f0f9 !default;
 $mds-bg-interactive-primary-disabled: #9fc4e5 !default;
 $mds-bg-interactive-primary-hover: #0c5699 !default;
-$mds-bg-interactive-secondary-active: #ced4da !default;
-$mds-bg-interactive-secondary-default: #ced4da !default;
+$mds-bg-interactive-secondary-active: #dee2e6 !default;
+$mds-bg-interactive-secondary-default: #dee2e6 !default;
 $mds-bg-interactive-secondary-disabled: #e9ecef !default;
-$mds-bg-interactive-secondary-hover: #dee2e6 !default;
+$mds-bg-interactive-secondary-hover: #ced4da !default;
+$mds-bg-nav-pill-hover: #e9ecef !default;
+$mds-bg-nav-pill-pressed: #dee2e6 !default;
+$mds-bg-nav-pill-selected: #e9ecef !default;
 $mds-bg-surface-default: #ffffff !default;
 $mds-bg-surface-strong: #e9ecef !default;
 $mds-bg-surface-subtle: #f8f9fa !default;
@@ -65,7 +68,7 @@ $mds-border-interactive-primary-default: #0f6cbf !default;
 $mds-border-interactive-primary-disabled: #6fa7d9 !default;
 $mds-border-interactive-primary-hover: #0f6cbf !default;
 $mds-border-interactive-secondary-active: #495057 !default;
-$mds-border-interactive-secondary-default: #6a737b !default;
+$mds-border-interactive-secondary-default: #8f959e !default;
 $mds-border-interactive-secondary-disabled: #8f959e !default;
 $mds-border-interactive-secondary-hover: #6a737b !default;
 $mds-border-subtle: #e9ecef !default;

package/{tokens → dist/tokens}/scss/_index_css_vars.scss

@@ -65,6 +65,9 @@
   --mds-bg-interactive-secondary-default: #{$mds-bg-interactive-secondary-default};
   --mds-bg-interactive-secondary-disabled: #{$mds-bg-interactive-secondary-disabled};
   --mds-bg-interactive-secondary-hover: #{$mds-bg-interactive-secondary-hover};
+  --mds-bg-nav-pill-hover: #{$mds-bg-nav-pill-hover};
+  --mds-bg-nav-pill-pressed: #{$mds-bg-nav-pill-pressed};
+  --mds-bg-nav-pill-selected: #{$mds-bg-nav-pill-selected};
   --mds-bg-surface-default: #{$mds-bg-surface-default};
   --mds-bg-surface-strong: #{$mds-bg-surface-strong};
   --mds-bg-surface-subtle: #{$mds-bg-surface-subtle};

package/{tokens → dist/tokens}/scss/_primitives.scss

@@ -128,7 +128,7 @@ $mds-scale-1600: 5rem !default;
 $mds-scale-1700: 6rem !default;
 $mds-scale-1800: 50rem !default;
 $mds-typography-font-family-monospace: Menlo !default;
-$mds-typography-font-family-sans-serif: Roboto !default;
+$mds-typography-font-family-sans-serif: Noto sans !default;
 $mds-typography-font-size-0: 0rem !default;
 $mds-typography-font-size-1: 1rem !default;
 $mds-typography-font-size-2: 2rem !default;

package/{tokens → dist/tokens}/scss/_typography.scss

@@ -1,7 +1,7 @@
 
 // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
 
-$mds-font-family-base: Roboto !default; // Default typeface for all UI text. Ensures global consistency.
+$mds-font-family-base: Noto sans !default; // Default typeface for all UI text. Ensures global consistency.
 $mds-font-family-code: Menlo !default; // Typeface for code, preformatted text, or monospace contexts.
 $mds-font-size-displays-1: 5rem !default; // Display style, largest.
 $mds-font-size-displays-2: 4.5rem !default; // Display style, extra-large.

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@moodlehq/design-system",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "The Moodle Design System",
   "files": [
     "/dist",
-    "/tokens/css",
-    "/tokens/scss",
     "/css.d.ts"
   ],
   "exports": {
@@ -17,18 +15,27 @@
       "types": "./css.d.ts",
       "default": "./dist/index.css"
     },
+    "./components/css": {
+      "default": "./dist/components/index.css"
+    },
+    "./components/scss/legacy": {
+      "default": "./dist/components/_index.legacy.scss"
+    },
     "./components/*": {
       "types": "./dist/components/*/index.d.ts",
       "import": "./dist/components/*/index.js"
     },
+    "./components/*/css": {
+      "default": "./dist/components/*/index.css"
+    },
     "./tokens/css": {
-      "default": "./tokens/css/index.css"
+      "default": "./dist/tokens/css/index.css"
     },
     "./tokens/scss": {
-      "default": "./tokens/scss/_index.scss"
+      "default": "./dist/tokens/scss/_index.scss"
     },
     "./tokens/scss/legacy": {
-      "default": "./tokens/scss/_index.legacy.scss"
+      "default": "./dist/tokens/scss/_index.legacy.scss"
     }
   },
   "type": "module",
@@ -56,6 +63,7 @@
     "@storybook/addon-a11y": "^10.1.2",
     "@storybook/addon-coverage": "^3.0.0",
     "@storybook/addon-docs": "^10.1.2",
+    "@storybook/addon-mcp": "^0.5.0",
     "@storybook/addon-themes": "^10.1.2",
     "@storybook/addon-vitest": "^10.1.2",
     "@storybook/react-vite": "^10.1.2",
@@ -107,7 +115,8 @@
     "test-unit-coverage": "VITEST_STORYBOOK=false vitest run --coverage",
     "test-storybook": "VITEST_STORYBOOK=true vitest run",
     "storybook": "storybook dev -p 6006",
-    "build": "tsc && vite build",
+    "build": "npm run build-component-index && npm run build-tokens && tsc && vite build",
+    "build-component-index": "tsx scripts/generate-component-index.ts",
     "build-storybook": "storybook build",
     "build-docs": "tsx scripts/build-docs.ts",
     "build-tokens": "tsx scripts/tokens.ts",

package/dist/components/badge/Badge2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge2.js","names":[],"sources":["../../../components/badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\nimport { isValidElement } from 'react';\nimport './badge.css';\n\ntype BadgeVariant =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\n// Runtime guard — icon props must be <i> or <svg> elements\nconst isIconElement = (el: unknown, propName: string): el is IconElement => {\n  const valid = isValidElement(el) && (el.type === 'i' || el.type === 'svg');\n  if (!valid && el != null && import.meta.env.DEV) {\n    console.error(`Badge: \\`${propName}\\` must be an <i> or <svg> element.`);\n  }\n  return valid;\n};\n\nconst allowedVariants: BadgeVariant[] = [\n  'primary',\n  'secondary',\n  'success',\n  'danger',\n  'warning',\n  'info',\n];\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Visible badge text. Must be a caller-supplied translated string. */\n  label: string;\n  /** Colour/semantic variant. Defaults to `primary`. */\n  variant?: BadgeVariant;\n  /** When true, renders the low-contrast (subtle) style with a light background and border. */\n  subtle?: boolean;\n  /** When true, renders fully rounded pill shape instead of the default slight rounding. */\n  pill?: boolean;\n  /** Optional icon rendered before the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `endIcon`. */\n  startIcon?: IconElement;\n  /** Optional icon rendered after the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `startIcon`. */\n  endIcon?: IconElement;\n}\n\nexport const Badge = ({\n  label,\n  variant,\n  subtle = false,\n  pill = false,\n  startIcon,\n  endIcon,\n  className,\n  ...props\n}: BadgeProps) => {\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant as BadgeVariant)\n      ? variant\n      : 'primary';\n\n  const resolvedStartIcon = isIconElement(startIcon, 'startIcon')\n    ? startIcon\n    : null;\n  let resolvedEndIcon = isIconElement(endIcon, 'endIcon') ? endIcon : null;\n\n  if (import.meta.env.DEV) {\n    if (variant && !allowedVariants.includes(variant as BadgeVariant)) {\n      console.warn(\n        `[MDS Badge] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n      );\n    }\n    if (resolvedStartIcon && resolvedEndIcon) {\n      console.warn(\n        '[MDS Badge] `startIcon` and `endIcon` are mutually exclusive. Rendering `startIcon` only.',\n      );\n    }\n  }\n\n  // Only one icon can be rendered at a time; startIcon takes precedence when both are provided.\n  if (resolvedStartIcon && resolvedEndIcon) {\n    resolvedEndIcon = null;\n  }\n\n  const classes = ['mds-badge', 'badge', `mds-badge--${resolvedVariant}`];\n  if (resolvedStartIcon || resolvedEndIcon) classes.push('mds-badge--has-icon');\n  if (subtle) classes.push('mds-badge--subtle');\n  if (pill) classes.push('mds-badge--pill');\n  if (className) classes.push(className);\n\n  return (\n    <span className={classes.join(' ')} {...props}>\n      {resolvedStartIcon}\n      {label}\n      {resolvedEndIcon}\n    </span>\n  );\n};\n"],"mappings":";;;;AAeA,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAM,kBAAkC;CACtC;CACA;CACA;CACA;CACA;CACA;AACF;AAiBA,IAAa,SAAS,EACpB,OACA,SACA,SAAS,OACT,OAAO,OACP,WACA,SACA,WACA,GAAG,YACa;CAChB,MAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAuB,IACvD,UACA;CAEN,MAAM,oBAAoB,cAAc,WAAW,WAAW,IAC1D,YACA;CACJ,IAAI,kBAAkB,cAAc,SAAS,SAAS,IAAI,UAAU;CAgBpE,IAAI,qBAAqB,iBACvB,kBAAkB;CAGpB,MAAM,UAAU;EAAC;EAAa;EAAS,cAAc;CAAiB;CACtE,IAAI,qBAAqB,iBAAiB,QAAQ,KAAK,qBAAqB;CAC5E,IAAI,QAAQ,QAAQ,KAAK,mBAAmB;CAC5C,IAAI,MAAM,QAAQ,KAAK,iBAAiB;CACxC,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,QAAD;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;YAAxC;GACG;GACA;GACA;EACG;;AAEV"}