@moodlehq/design-system 1.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moodlehq/design-system",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "The Moodle Design System",
   "files": [
     "/dist",
@@ -10,8 +10,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
+      "import": "./dist/index.js"
     },
     "./css": {
       "default": "./dist/index.css"
@@ -21,13 +20,17 @@
     },
     "./tokens/scss": {
       "default": "./tokens/scss/_index.scss"
+    },
+    "./tokens/scss/legacy": {
+      "default": "./tokens/scss/_index.legacy.scss"
     }
   },
   "type": "module",
   "dependencies": {
-    "bootstrap": "^5.3.8",
+    "bootstrap": "^5.3.8"
+  },
+  "peerDependencies": {
     "react": "^19.2.4",
-    "react-bootstrap": "^2.10.10",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
@@ -61,7 +64,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",
     "eslint-plugin-storybook": "^10.1.2",
-    "fast-check": "^3.23.2",
+    "fast-check": "^4.5.3",
     "globals": "^17.1.0",
     "husky": "^9.1.7",
     "jsdom": "^28.0.0",
@@ -69,9 +72,10 @@
     "playwright": "^1.57.0",
     "prettier": "^3.7.3",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "react-bootstrap": "^2.10.10",
+    "react": "^19.2.4",
     "react-docgen": "^8.0.2",
     "react-docgen-typescript": "^2.4.0",
+    "react-dom": "^19.2.4",
     "sass": "^1.94.2",
     "storybook": "^10.0.5",
     "style-dictionary": "^5.1.1",

package/tokens/css/index.css

@@ -9,4 +9,3 @@
 @import "./sizes.css";
 @import "./spacing.css";
 @import "./typography.css";
-@import "./fonts.css"

package/tokens/css/primitives.css

@@ -126,32 +126,23 @@
   --mds-scale-1800: 50rem;
   --mds-typography-font-family-monospace: Menlo;
   --mds-typography-font-family-sans-serif: Roboto;
-  --mds-typography-font-size-base-0: 0rem;
-  --mds-typography-font-size-base-1: 1rem;
-  --mds-typography-font-size-base-2: 2rem;
-  --mds-typography-font-size-base-0-875: 0.875rem;
-  --mds-typography-font-size-base-1-25: 1.25rem;
-  --mds-typography-font-size-base-1-5: 1.5rem;
-  --mds-typography-font-size-base-1-75: 1.75rem;
-  --mds-typography-font-size-base-2-5: 2.5rem;
-  --mds-typography-font-weight-italic-black-900: Black Italic;
-  --mds-typography-font-weight-italic-bold-700: Bold Italic;
-  --mds-typography-font-weight-italic-extrabold-800: Extra bold Italic;
-  --mds-typography-font-weight-italic-extralight-200: Extra light Italic;
-  --mds-typography-font-weight-italic-light-300: Light Italic;
-  --mds-typography-font-weight-italic-medium-500: Medium Italic;
-  --mds-typography-font-weight-italic-regular-400: Italic;
-  --mds-typography-font-weight-italic-semibold-600: Semi Bold Italic;
-  --mds-typography-font-weight-italic-thin-100: Thin Italic;
-  --mds-typography-font-weight-normal-black-900: Black;
-  --mds-typography-font-weight-normal-bold-700: Bold;
-  --mds-typography-font-weight-normal-extrabold-800: Extrabold;
-  --mds-typography-font-weight-normal-extralight-200: Extra light;
-  --mds-typography-font-weight-normal-light-300: Light;
-  --mds-typography-font-weight-normal-medium-500: Medium;
-  --mds-typography-font-weight-normal-regular-400: Regular;
-  --mds-typography-font-weight-normal-semibold-600: Semibold;
-  --mds-typography-font-weight-normal-thin-100: Thin;
+  --mds-typography-font-size-0: 0rem;
+  --mds-typography-font-size-1: 1rem;
+  --mds-typography-font-size-2: 2rem;
+  --mds-typography-font-size-0-875: 0.875rem;
+  --mds-typography-font-size-1-25: 1.25rem;
+  --mds-typography-font-size-1-5: 1.5rem;
+  --mds-typography-font-size-1-75: 1.75rem;
+  --mds-typography-font-size-2-5: 2.5rem;
+  --mds-typography-font-weight-black: 900;
+  --mds-typography-font-weight-bold: 700;
+  --mds-typography-font-weight-extrabold: 800;
+  --mds-typography-font-weight-extralight: 200;
+  --mds-typography-font-weight-light: 300;
+  --mds-typography-font-weight-medium: 500;
+  --mds-typography-font-weight-regular: 400;
+  --mds-typography-font-weight-semibold: 600;
+  --mds-typography-font-weight-thin: 100;
   --mds-typography-letter-spacing-none: 0rem; /** Default, no tracking */
   --mds-typography-line-height-displays-d1: 6rem;
   --mds-typography-line-height-displays-d2: 5.4rem;

package/tokens/css/shadows.css

@@ -3,9 +3,9 @@
  */
 
 :root {
-  --mds-color-lg: rgba(0, 0, 0, 0.18);
-  --mds-color-md: rgba(0, 0, 0, 0.15);
-  --mds-color-sm: rgba(0, 0, 0, 0.07);
+  --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-blur-lg: var(--mds-scale-1200);
   --mds-blur-md: var(--mds-scale-600);
   --mds-blur-sm: var(--mds-scale-100);

package/tokens/css/typography.css

@@ -11,25 +11,20 @@
   --mds-font-size-displays-4: var(--mds-scale-1300); /** Display style, medium-large. */
   --mds-font-size-displays-5: var(--mds-scale-1200); /** Display style, medium. */
   --mds-font-size-displays-6: var(--mds-scale-1100); /** Display style, smaller display. */
-  --mds-font-size-headings-1: var(--mds-typography-font-size-base-2-5); /** Font size for H1 headings. */
-  --mds-font-size-headings-2: var(--mds-typography-font-size-base-2); /** Font size for H2 headings. */
-  --mds-font-size-headings-3: var(--mds-typography-font-size-base-1-75); /** Font size for H3 headings. */
-  --mds-font-size-headings-4: var(--mds-typography-font-size-base-1-5); /** Font size for H4 headings. */
-  --mds-font-size-headings-5: var(--mds-typography-font-size-base-1-25); /** Font size for H5 headings. */
-  --mds-font-size-headings-6: var(--mds-typography-font-size-base-1); /** Font size for H6 headings. */
-  --mds-font-size-paragraph-default: var(--mds-typography-font-size-base-1); /** Base size for body text. */
-  --mds-font-size-paragraph-lead: var(--mds-typography-font-size-base-1-25); /** Slightly larger body text, for lead paragraphs. */
-  --mds-font-size-paragraph-small: var(--mds-typography-font-size-base-0-875); /** Reduced size for secondary text. */
-  --mds-font-weight-italic-bold: var(--mds-typography-font-weight-italic-bold-700);
-  --mds-font-weight-italic-light: var(--mds-typography-font-weight-italic-light-300);
-  --mds-font-weight-italic-medium: var(--mds-typography-font-weight-italic-medium-500);
-  --mds-font-weight-italic-regular: var(--mds-typography-font-weight-italic-regular-400);
-  --mds-font-weight-italic-semibold: var(--mds-typography-font-weight-italic-semibold-600);
-  --mds-font-weight-normal-bold: var(--mds-typography-font-weight-normal-bold-700);
-  --mds-font-weight-normal-light: var(--mds-typography-font-weight-normal-light-300);
-  --mds-font-weight-normal-medium: var(--mds-typography-font-weight-normal-medium-500);
-  --mds-font-weight-normal-regular: var(--mds-typography-font-weight-normal-regular-400);
-  --mds-font-weight-normal-semibold: var(--mds-typography-font-weight-normal-semibold-600);
+  --mds-font-size-headings-1: var(--mds-typography-font-size-2-5); /** Font size for H1 headings. */
+  --mds-font-size-headings-2: var(--mds-typography-font-size-2); /** Font size for H2 headings. */
+  --mds-font-size-headings-3: var(--mds-typography-font-size-1-75); /** Font size for H3 headings. */
+  --mds-font-size-headings-4: var(--mds-typography-font-size-1-5); /** Font size for H4 headings. */
+  --mds-font-size-headings-5: var(--mds-typography-font-size-1-25); /** Font size for H5 headings. */
+  --mds-font-size-headings-6: var(--mds-typography-font-size-1); /** Font size for H6 headings. */
+  --mds-font-size-paragraph-default: var(--mds-typography-font-size-1); /** Base size for body text. */
+  --mds-font-size-paragraph-lead: var(--mds-typography-font-size-1-25); /** Slightly larger body text, for lead paragraphs. */
+  --mds-font-size-paragraph-small: var(--mds-typography-font-size-0-875); /** Reduced size for secondary text. */
+  --mds-font-weight-bold: var(--mds-typography-font-weight-bold);
+  --mds-font-weight-light: var(--mds-typography-font-weight-light);
+  --mds-font-weight-medium: var(--mds-typography-font-weight-medium);
+  --mds-font-weight-regular: var(--mds-typography-font-weight-regular);
+  --mds-font-weight-semibold: var(--mds-typography-font-weight-semibold);
   --mds-letter-spacing-default: var(--mds-typography-letter-spacing-none); /** Standard tracking for all texts. */
   --mds-line-height-displays-1: var(--mds-typography-line-height-displays-d1);
   --mds-line-height-displays-2: var(--mds-typography-line-height-displays-d2);

package/tokens/scss/_borders.scss

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

package/tokens/scss/_colors.scss

@@ -1,65 +1,65 @@
 
 // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
 
-$mds-bg-feedback-danger-default: #ca3120;
-$mds-bg-feedback-danger-subtle: #f4d6d2;
-$mds-bg-feedback-info-default: #008196;
-$mds-bg-feedback-info-subtle: #cce6ea;
-$mds-bg-feedback-primary-default: #0f6cbf;
-$mds-bg-feedback-primary-subtle: #cfe2f2;
-$mds-bg-feedback-secondary-subtle: #f8f9fa;
-$mds-bg-feedback-success-default: #357a32;
-$mds-bg-feedback-success-subtle: #d7e4d6;
-$mds-bg-feedback-warning-default: #f0ad4e;
-$mds-bg-feedback-warning-subtle: #fcefdc;
-$mds-bg-interactive-danger-active: #791d13;
-$mds-bg-interactive-danger-default: #ca3120;
-$mds-bg-interactive-danger-disabled: #df8379;
-$mds-bg-interactive-danger-hover: #a2271a;
-$mds-bg-interactive-primary-active: #094173;
-$mds-bg-interactive-primary-default: #0f6cbf;
-$mds-bg-interactive-primary-disabled: #6fa7d9;
-$mds-bg-interactive-primary-hover: #0c5699;
-$mds-bg-interactive-secondary-active: #ced4da;
-$mds-bg-interactive-secondary-default: #ced4da;
-$mds-bg-interactive-secondary-disabled: #e9ecef;
-$mds-bg-interactive-secondary-hover: #dee2e6;
-$mds-bg-surface-default: #ffffff;
-$mds-bg-surface-strong: #e9ecef;
-$mds-bg-surface-subtle: #f8f9fa;
-$mds-border-default: #dee2e6;
-$mds-border-feedback-danger: #eaada6;
-$mds-border-feedback-info: #99cdd5;
-$mds-border-feedback-primary: #9fc4e5;
-$mds-border-feedback-secondary: #e9ecef;
-$mds-border-feedback-success: #aecaad;
-$mds-border-feedback-warning: #f9deb8;
-$mds-border-interactive-danger-active: #a2271a;
-$mds-border-interactive-danger-default: #ca3120;
-$mds-border-interactive-danger-disabled: #df8379;
-$mds-border-interactive-danger-hover: #ca3120;
-$mds-border-interactive-primary-active: #0c5699;
-$mds-border-interactive-primary-default: #0f6cbf;
-$mds-border-interactive-primary-disabled: #6fa7d9;
-$mds-border-interactive-primary-hover: #0f6cbf;
-$mds-border-interactive-secondary-active: #495057;
-$mds-border-interactive-secondary-default: #6a737b;
-$mds-border-interactive-secondary-disabled: #8f959e;
-$mds-border-interactive-secondary-hover: #6a737b;
-$mds-border-subtle: #e9ecef;
-$mds-border-translucent: rgba(0, 0, 0, 0);
-$mds-focus-default: #0f6cbf;
-$mds-text-danger: #ca3120;
-$mds-text-default: #1d2125;
-$mds-text-emphasis: #000000;
-$mds-text-feedback-danger: #51140d;
-$mds-text-feedback-info: #00343c;
-$mds-text-feedback-primary: #062b4c;
-$mds-text-feedback-secondary: #343a40;
-$mds-text-feedback-success: #153114;
-$mds-text-feedback-warning: #60451f;
-$mds-text-inverse: #f8f9fa;
-$mds-text-link-primary-default: #0f6cbf;
-$mds-text-link-primary-hover: #0c5699;
-$mds-text-muted: #6a737b;
-$mds-text-subtle: #495057;
+$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-subtle: #f8f9fa !default;
+$mds-bg-feedback-success-default: #357a32 !default;
+$mds-bg-feedback-success-subtle: #d7e4d6 !default;
+$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-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-hover: #0c5699 !default;
+$mds-bg-interactive-secondary-active: #ced4da !default;
+$mds-bg-interactive-secondary-default: #ced4da !default;
+$mds-bg-interactive-secondary-disabled: #e9ecef !default;
+$mds-bg-interactive-secondary-hover: #dee2e6 !default;
+$mds-bg-surface-default: #ffffff !default;
+$mds-bg-surface-strong: #e9ecef !default;
+$mds-bg-surface-subtle: #f8f9fa !default;
+$mds-border-default: #dee2e6 !default;
+$mds-border-feedback-danger: #eaada6 !default;
+$mds-border-feedback-info: #99cdd5 !default;
+$mds-border-feedback-primary: #9fc4e5 !default;
+$mds-border-feedback-secondary: #e9ecef !default;
+$mds-border-feedback-success: #aecaad !default;
+$mds-border-feedback-warning: #f9deb8 !default;
+$mds-border-interactive-danger-active: #a2271a !default;
+$mds-border-interactive-danger-default: #ca3120 !default;
+$mds-border-interactive-danger-disabled: #df8379 !default;
+$mds-border-interactive-danger-hover: #ca3120 !default;
+$mds-border-interactive-primary-active: #0c5699 !default;
+$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-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-default: #0f6cbf !default;
+$mds-text-danger: #ca3120 !default;
+$mds-text-default: #1d2125 !default;
+$mds-text-emphasis: #000000 !default;
+$mds-text-feedback-danger: #51140d !default;
+$mds-text-feedback-info: #00343c !default;
+$mds-text-feedback-primary: #062b4c !default;
+$mds-text-feedback-secondary: #343a40 !default;
+$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-hover: #0c5699 !default;
+$mds-text-muted: #6a737b !default;
+$mds-text-subtle: #495057 !default;

package/tokens/scss/_index.legacy.scss

@@ -0,0 +1,11 @@
+
+// THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+// Tags: [MDS_LEGACY_SCSSPHP_COMPAT]
+
+@import "_borders.scss";
+@import "_colors.scss";
+@import "_primitives.scss";
+@import "_shadows.scss";
+@import "_sizes.scss";
+@import "_spacing.scss";
+@import "_typography.scss";

package/tokens/scss/_index.scss

@@ -8,4 +8,3 @@
 @forward "sizes";
 @forward "spacing";
 @forward "typography";
-@forward "fonts";