@moodlehq/design-system 2.1.1 → 3.0.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@moodlehq/design-system",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "The Moodle Design System",
   "files": [
     "/dist",
     "/tokens/css",
-    "/tokens/scss"
+    "/tokens/scss",
+    "/css.d.ts"
   ],
   "exports": {
     ".": {
@@ -13,8 +14,13 @@
       "import": "./dist/index.js"
     },
     "./css": {
+      "types": "./css.d.ts",
       "default": "./dist/index.css"
     },
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js"
+    },
     "./tokens/css": {
       "default": "./tokens/css/index.css"
     },
@@ -26,6 +32,9 @@
     }
   },
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
     "bootstrap": "^5.3.8"
   },
@@ -35,29 +44,34 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.0",
+    "@modelcontextprotocol/sdk": "^1.0.0",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/compat": "^2.0.0",
     "@eslint/eslintrc": "^3.3.3",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^10.0.1",
+    "@etchteam/storybook-addon-status": "^8.0.0",
+    "@figma/code-connect": "^1.4.4",
+    "@fortawesome/fontawesome-free": "^7.2.0",
     "@storybook/addon-a11y": "^10.1.2",
     "@storybook/addon-coverage": "^3.0.0",
     "@storybook/addon-docs": "^10.1.2",
     "@storybook/addon-themes": "^10.1.2",
     "@storybook/addon-vitest": "^10.1.2",
     "@storybook/react-vite": "^10.1.2",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^25.0.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.48.0",
-    "@typescript-eslint/parser": "^8.48.0",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.57.1",
+    "@typescript-eslint/parser": "^8.57.1",
+    "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.0.14",
     "@vitest/coverage-istanbul": "^4.0.14",
     "bootstrap": "^5.3.8",
-    "eslint": "^9.39.1",
+    "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
@@ -67,7 +81,7 @@
     "fast-check": "^4.5.3",
     "globals": "^17.1.0",
     "husky": "^9.1.7",
-    "jsdom": "^28.0.0",
+    "jsdom": "^29.0.0",
     "lint-staged": "^16.2.7",
     "playwright": "^1.57.0",
     "prettier": "^3.7.3",
@@ -81,8 +95,8 @@
     "style-dictionary": "^5.1.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.2.6",
+    "typescript-eslint": "^8.57.1",
+    "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^6.0.1",
     "vitest": "^4.0.4"
@@ -94,10 +108,12 @@
     "storybook": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "build-storybook": "storybook build",
+    "build-docs": "tsx scripts/build-docs.ts",
     "build-tokens": "tsx scripts/tokens.ts",
     "format": "prettier --config .github/linters/.prettierrc --ignore-path .github/linters/.prettierignore --write . '**/*.{ts,tsx,js,jsx,yml}'",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx --fix --config .github/linters/eslint.config.mjs",
-    "prepare": "husky"
+    "prepare": "husky",
+    "figma-connect": "figma connect publish"
   },
   "lint-staged": {
     "*{js,jsx,ts,tsx}": [
@@ -124,5 +140,8 @@
   "bugs": {
     "url": "https://github.com/moodlehq/design-system/issues"
   },
-  "homepage": "https://github.com/moodlehq/design-system#readme"
+  "homepage": "https://github.com/moodlehq/design-system#readme",
+  "overrides": {
+    "zod-validation-error": "4.0.2"
+  }
 }

package/tokens/css/borders.css

@@ -8,11 +8,12 @@
   --mds-stroke-weight-sm: 0.0625rem;
   --mds-stroke-weight-xl: 0.25rem;
   --mds-stroke-weight-xxl: 0.3125rem;
-  --mds-border-radius-lg: var(--mds-scale-300);
-  --mds-border-radius-md: var(--mds-scale-200);
+  --mds-border-radius-lg: var(--mds-scale-400);
+  --mds-border-radius-md: var(--mds-scale-300);
   --mds-border-radius-none: var(--mds-scale-0);
   --mds-border-radius-pill: var(--mds-scale-1800);
-  --mds-border-radius-sm: var(--mds-scale-100);
+  --mds-border-radius-sm: var(--mds-scale-200);
   --mds-border-radius-xl: var(--mds-scale-600);
+  --mds-border-radius-xs: var(--mds-scale-100);
   --mds-border-radius-xxl: var(--mds-scale-1000);
 }

package/tokens/css/breakpoints.css

@@ -0,0 +1,11 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+:root {
+  --mds-breakpoints-lg: 62rem;
+  --mds-breakpoints-md: 48rem;
+  --mds-breakpoints-sm: 36rem;
+  --mds-breakpoints-xl: 75rem;
+  --mds-breakpoints-xxl: 87.5rem;
+}

package/tokens/css/colors.css

@@ -4,11 +4,26 @@
 
 :root {
   --mds-border-translucent: rgba(0, 0, 0, 0);
+  --mds-activity-icon-assessment-bg: var(--mds-color-pink-100);
+  --mds-activity-icon-assessment-icon: var(--mds-color-pink-500);
+  --mds-activity-icon-collaboration-bg: var(--mds-color-indigo-100);
+  --mds-activity-icon-collaboration-icon: var(--mds-color-indigo-500);
+  --mds-activity-icon-communication-bg: var(--mds-color-orange-100);
+  --mds-activity-icon-communication-icon: var(--mds-color-orange-600);
+  --mds-activity-icon-file-bg: var(--mds-color-cyan-100);
+  --mds-activity-icon-file-icon: var(--mds-color-cyan-500);
+  --mds-activity-icon-interactive-bg: var(--mds-color-red-100);
+  --mds-activity-icon-interactive-icon: var(--mds-color-red-700);
+  --mds-activity-icon-other-bg: var(--mds-color-gray-300);
+  --mds-activity-icon-other-icon: var(--mds-color-gray-900);
+  --mds-activity-icon-resource-bg: var(--mds-color-cyan-100);
+  --mds-activity-icon-resource-icon: var(--mds-color-cyan-500);
   --mds-bg-feedback-danger-subtle: var(--mds-color-red-100);
   --mds-bg-feedback-info-default: var(--mds-color-cyan-500);
   --mds-bg-feedback-info-subtle: var(--mds-color-cyan-100);
   --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
   --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
+  --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
   --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
   --mds-bg-feedback-success-default: var(--mds-color-green-500);
   --mds-bg-feedback-success-subtle: var(--mds-color-green-100);
@@ -16,11 +31,11 @@
   --mds-bg-feedback-warning-subtle: var(--mds-color-yellow-100);
   --mds-bg-interactive-danger-active: var(--mds-color-red-700);
   --mds-bg-interactive-danger-default: var(--mds-color-red-500);
-  --mds-bg-interactive-danger-disabled: var(--mds-color-red-300);
+  --mds-bg-interactive-danger-disabled: var(--mds-color-red-200);
   --mds-bg-interactive-danger-hover: var(--mds-color-red-600);
   --mds-bg-interactive-primary-active: var(--mds-color-blue-700);
   --mds-bg-interactive-primary-default: var(--mds-color-blue-500);
-  --mds-bg-interactive-primary-disabled: var(--mds-color-blue-300);
+  --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-disabled: var(--mds-color-gray-200);
@@ -44,7 +59,9 @@
   --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);
+  --mds-focus-danger: var(--mds-color-red-200);
   --mds-text-danger: var(--mds-color-red-500);
+  --mds-text-danger-disabled: var(--mds-color-red-300);
   --mds-text-default: var(--mds-color-gray-900);
   --mds-text-emphasis: var(--mds-color-gray-black);
   --mds-text-feedback-danger: var(--mds-color-red-800);
@@ -54,6 +71,7 @@
   --mds-text-feedback-success: var(--mds-color-green-800);
   --mds-text-feedback-warning: var(--mds-color-yellow-800);
   --mds-text-inverse: var(--mds-color-gray-100);
+  --mds-text-link-primary-disabled: var(--mds-color-blue-300);
   --mds-text-muted: var(--mds-color-gray-600);
   --mds-text-subtle: var(--mds-color-gray-700);
   --mds-bg-feedback-danger-default: var(--mds-bg-interactive-danger-default);

package/tokens/css/index.css

@@ -3,6 +3,7 @@
  */
 
 @import "./borders.css";
+@import "./breakpoints.css";
 @import "./colors.css";
 @import "./primitives.css";
 @import "./shadows.css";

package/tokens/css/shadows.css

@@ -3,9 +3,9 @@
  */
 
 :root {
-  --mds-color-lg: rgba(0, 0, 0, 0.2);
-  --mds-color-md: rgba(0, 0, 0, 0.2);
-  --mds-color-sm: rgba(0, 0, 0, 0.1);
+  --mds-color-lg: rgba(0, 0, 0, 0.17);
+  --mds-color-md: rgba(0, 0, 0, 0.15);
+  --mds-color-sm: rgba(0, 0, 0, 0.08);
   --mds-blur-lg: var(--mds-scale-1200);
   --mds-blur-md: var(--mds-scale-600);
   --mds-blur-sm: var(--mds-scale-100);

package/tokens/css/sizes.css

@@ -3,11 +3,12 @@
  */
 
 :root {
-  --mds-icons-lg: var(--mds-scale-700);
-  --mds-icons-md: var(--mds-scale-600);
-  --mds-icons-sm: var(--mds-scale-400);
-  --mds-icons-xl: var(--mds-scale-800);
-  --mds-icons-xs: var(--mds-scale-300);
-  --mds-icons-xxl: var(--mds-scale-1000);
+  --mds-icons-lg: var(--mds-scale-800);
+  --mds-icons-md: var(--mds-scale-700);
+  --mds-icons-sm: var(--mds-scale-600);
+  --mds-icons-xl: var(--mds-scale-1000);
+  --mds-icons-xs: var(--mds-scale-400);
+  --mds-icons-xxl: var(--mds-scale-1100);
+  --mds-icons-xxs: var(--mds-scale-300);
   --mds-icons-xxxl: var(--mds-scale-1200);
 }

package/tokens/css/spacing.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --mds-spacing-offset: 0.0625rem;
   --mds-spacing-lg: var(--mds-scale-700);
   --mds-spacing-md: var(--mds-scale-600);
   --mds-spacing-none: var(--mds-scale-0);

package/tokens/scss/_borders.scss

@@ -1,12 +1,13 @@
 
 // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
 
-$mds-border-radius-lg: 0.5rem !default;
-$mds-border-radius-md: 0.375rem !default;
+$mds-border-radius-lg: 0.75rem !default;
+$mds-border-radius-md: 0.5rem !default;
 $mds-border-radius-none: 0rem !default;
 $mds-border-radius-pill: 50rem !default;
-$mds-border-radius-sm: 0.25rem !default;
+$mds-border-radius-sm: 0.375rem !default;
 $mds-border-radius-xl: 1rem !default;
+$mds-border-radius-xs: 0.25rem !default;
 $mds-border-radius-xxl: 2rem !default;
 $mds-stroke-weight-lg: 0.1875rem !default;
 $mds-stroke-weight-md: 0.125rem !default;

package/tokens/scss/_breakpoints.scss

@@ -0,0 +1,8 @@
+
+// THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+
+$mds-breakpoints-lg: 62rem !default;
+$mds-breakpoints-md: 48rem !default;
+$mds-breakpoints-sm: 36rem !default;
+$mds-breakpoints-xl: 75rem !default;
+$mds-breakpoints-xxl: 87.5rem !default;

package/tokens/scss/_colors.scss

@@ -1,12 +1,27 @@
 
 // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
 
+$mds-activity-icon-assessment-bg: #f8d1e3 !default;
+$mds-activity-icon-assessment-icon: #db1a74 !default;
+$mds-activity-icon-collaboration-bg: #e0cffc !default;
+$mds-activity-icon-collaboration-icon: #6610f2 !default;
+$mds-activity-icon-communication-bg: #ffe3d1 !default;
+$mds-activity-icon-communication-icon: #cc5e13 !default;
+$mds-activity-icon-file-bg: #cce6ea !default;
+$mds-activity-icon-file-icon: #008196 !default;
+$mds-activity-icon-interactive-bg: #f4d6d2 !default;
+$mds-activity-icon-interactive-icon: #791d13 !default;
+$mds-activity-icon-other-bg: #dee2e6 !default;
+$mds-activity-icon-other-icon: #1d2125 !default;
+$mds-activity-icon-resource-bg: #cce6ea !default;
+$mds-activity-icon-resource-icon: #008196 !default;
 $mds-bg-feedback-danger-default: #ca3120 !default;
 $mds-bg-feedback-danger-subtle: #f4d6d2 !default;
 $mds-bg-feedback-info-default: #008196 !default;
 $mds-bg-feedback-info-subtle: #cce6ea !default;
 $mds-bg-feedback-primary-default: #0f6cbf !default;
 $mds-bg-feedback-primary-subtle: #cfe2f2 !default;
+$mds-bg-feedback-secondary-default: #ced4da !default;
 $mds-bg-feedback-secondary-subtle: #f8f9fa !default;
 $mds-bg-feedback-success-default: #357a32 !default;
 $mds-bg-feedback-success-subtle: #d7e4d6 !default;
@@ -14,11 +29,11 @@ $mds-bg-feedback-warning-default: #f0ad4e !default;
 $mds-bg-feedback-warning-subtle: #fcefdc !default;
 $mds-bg-interactive-danger-active: #791d13 !default;
 $mds-bg-interactive-danger-default: #ca3120 !default;
-$mds-bg-interactive-danger-disabled: #df8379 !default;
+$mds-bg-interactive-danger-disabled: #eaada6 !default;
 $mds-bg-interactive-danger-hover: #a2271a !default;
 $mds-bg-interactive-primary-active: #094173 !default;
 $mds-bg-interactive-primary-default: #0f6cbf !default;
-$mds-bg-interactive-primary-disabled: #6fa7d9 !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;
@@ -48,8 +63,10 @@ $mds-border-interactive-secondary-disabled: #8f959e !default;
 $mds-border-interactive-secondary-hover: #6a737b !default;
 $mds-border-subtle: #e9ecef !default;
 $mds-border-translucent: rgba(0, 0, 0, 0) !default;
+$mds-focus-danger: #eaada6 !default;
 $mds-focus-default: #0f6cbf !default;
 $mds-text-danger: #ca3120 !default;
+$mds-text-danger-disabled: #df8379 !default;
 $mds-text-default: #1d2125 !default;
 $mds-text-emphasis: #000000 !default;
 $mds-text-feedback-danger: #51140d !default;
@@ -60,6 +77,7 @@ $mds-text-feedback-success: #153114 !default;
 $mds-text-feedback-warning: #60451f !default;
 $mds-text-inverse: #f8f9fa !default;
 $mds-text-link-primary-default: #0f6cbf !default;
+$mds-text-link-primary-disabled: #6fa7d9 !default;
 $mds-text-link-primary-hover: #0c5699 !default;
 $mds-text-muted: #6a737b !default;
 $mds-text-subtle: #495057 !default;

package/tokens/scss/_index.legacy.scss

@@ -3,6 +3,7 @@
 // Tags: [MDS_LEGACY_SCSSPHP_COMPAT]
 
 @import "_borders.scss";
+@import "_breakpoints.scss";
 @import "_colors.scss";
 @import "_primitives.scss";
 @import "_shadows.scss";

package/tokens/scss/_index.scss

@@ -2,6 +2,7 @@
 // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
 
 @forward "borders";
+@forward "breakpoints";
 @forward "colors";
 @forward "primitives";
 @forward "shadows";

package/tokens/scss/_shadows.scss

@@ -1,9 +1,9 @@
 
 // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
 
-$mds-color-lg: rgba(0, 0, 0, 0.2) !default;
-$mds-color-md: rgba(0, 0, 0, 0.2) !default;
-$mds-color-sm: rgba(0, 0, 0, 0.1) !default;
+$mds-color-lg: rgba(0, 0, 0, 0.17) !default;
+$mds-color-md: rgba(0, 0, 0, 0.15) !default;
+$mds-color-sm: rgba(0, 0, 0, 0.08) !default;
 $mds-blur-lg: 3rem !default;
 $mds-blur-md: 1rem !default;
 $mds-blur-sm: 0.25rem !default;

package/tokens/scss/_sizes.scss

@@ -1,10 +1,11 @@
 
 // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
 
-$mds-icons-lg: 1.25rem !default;
-$mds-icons-md: 1rem !default;
-$mds-icons-sm: 0.75rem !default;
-$mds-icons-xl: 1.5rem !default;
-$mds-icons-xs: 0.5rem !default;
-$mds-icons-xxl: 2rem !default;
+$mds-icons-lg: 1.5rem !default;
+$mds-icons-md: 1.25rem !default;
+$mds-icons-sm: 1rem !default;
+$mds-icons-xl: 2rem !default;
+$mds-icons-xs: 0.75rem !default;
+$mds-icons-xxl: 2.5rem !default;
+$mds-icons-xxs: 0.5rem !default;
 $mds-icons-xxxl: 3rem !default;

package/tokens/scss/_spacing.scss

@@ -4,6 +4,7 @@
 $mds-spacing-lg: 1.25rem !default;
 $mds-spacing-md: 1rem !default;
 $mds-spacing-none: 0rem !default;
+$mds-spacing-offset: 0.0625rem !default;
 $mds-spacing-sm: 0.75rem !default;
 $mds-spacing-xl: 2rem !default;
 $mds-spacing-xs: 0.5rem !default;

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../components/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\n\ntype ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'outline-primary'\n  | 'outline-secondary'\n  | 'outline-danger';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  label: string;\n  variant?: string;\n  size?: 'sm' | 'lg';\n}\n\nconst allowedVariants: ButtonVariant[] = [\n  'primary',\n  'secondary',\n  'danger',\n  'outline-primary',\n  'outline-secondary',\n  'outline-danger',\n];\n\nexport const Button = ({\n  label,\n  variant,\n  size,\n  className,\n  type = 'button',\n  ...props\n}: ButtonProps) => {\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant as ButtonVariant)\n      ? variant\n      : 'primary';\n\n  const classes = ['mds-btn', 'btn', `btn-${resolvedVariant}`];\n  if (size) {\n    classes.push(`btn-${size}`);\n  }\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <button className={classes.join(' ')} type={type} {...props}>\n      {label}\n    </button>\n  );\n};\n"],"names":[],"mappings":";AAgBA,MAAM,kBAAmC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAmB;AACjB,QAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAwB,IACxD,UACA;AAEN,QAAM,UAAU,CAAC,WAAW,OAAO,OAAO,eAAe,EAAE;AAC3D,MAAI,MAAM;AACR,YAAQ,KAAK,OAAO,IAAI,EAAE;AAAA,EAC5B;AACA,MAAI,WAAW;AACb,YAAQ,KAAK,SAAS;AAAA,EACxB;AAEA,SACE,oBAAC,UAAA,EAAO,WAAW,QAAQ,KAAK,GAAG,GAAG,MAAa,GAAG,OACnD,UAAA,MAAA,CACH;AAEJ;"}