@moodlehq/design-system 0.1.0 → 2.0.0

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './src';
+export * from './components';

package/dist/index.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Button as Button$1 } from "react-bootstrap";
+const allowedVariants = [
+  "primary",
+  "secondary",
+  "danger",
+  "outline-primary",
+  "outline-secondary",
+  "outline-danger"
+];
+const Button = ({ label, variant, ...props }) => {
+  const resolvedVariant = allowedVariants.includes(variant ?? "") ? variant : "primary";
+  return /* @__PURE__ */ jsx(Button$1, { className: "mds-btn", variant: resolvedVariant, ...props, children: label });
+};
+export {
+  Button
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../components/button/Button.tsx"],"sourcesContent":["import {\n  Button as RBButton,\n  ButtonProps as RBButtonProps,\n} from 'react-bootstrap';\n\nexport interface ButtonProps extends RBButtonProps {\n  label: string;\n  variant?: string;\n  disabled?: boolean;\n  size?: 'sm' | 'lg';\n}\n\nconst allowedVariants = [\n  'primary',\n  'secondary',\n  'danger',\n  'outline-primary',\n  'outline-secondary',\n  'outline-danger',\n];\n\nexport const Button: React.FC<ButtonProps> = ({ label, variant, ...props }) => {\n  const resolvedVariant = allowedVariants.includes(variant ?? '')\n    ? variant\n    : 'primary';\n\n  return (\n    <RBButton className=\"mds-btn\" variant={resolvedVariant} {...props}>\n      {label}\n    </RBButton>\n  );\n};\n"],"names":["RBButton"],"mappings":";;AAYA,MAAM,kBAAkB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,SAAgC,CAAC,EAAE,OAAO,SAAS,GAAG,YAAY;AAC7E,QAAM,kBAAkB,gBAAgB,SAAS,WAAW,EAAE,IAC1D,UACA;AAEJ,SACE,oBAACA,YAAS,WAAU,WAAU,SAAS,iBAAkB,GAAG,OACzD,UAAA,MAAA,CACH;AAEJ;"}

package/package.json

@@ -1,24 +1,41 @@
 {
   "name": "@moodlehq/design-system",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "description": "The Moodle Design System",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "style": "dist/index.css",
   "files": [
     "/dist",
-    "/dist/index.css"
+    "/tokens/css",
+    "/tokens/scss"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./css": {
+      "default": "./dist/index.css"
+    },
+    "./tokens/css": {
+      "default": "./tokens/css/index.css"
+    },
+    "./tokens/scss": {
+      "default": "./tokens/scss/_index.scss"
+    },
+    "./tokens/scss/legacy": {
+      "default": "./tokens/scss/_index.legacy.scss"
+    }
+  },
   "type": "module",
+  "dependencies": {
+    "bootstrap": "^5.3.8"
+  },
   "peerDependencies": {
-    "bootstrap": "^5.3.8",
-    "react": "^18.3.1",
+    "react": "^19.2.4",
     "react-bootstrap": "^2.10.10",
-    "react-dom": "^18.3.1"
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.2",
+    "@chromatic-com/storybook": "^5.0.0",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/compat": "^2.0.0",
@@ -46,19 +63,21 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.5.0",
     "eslint-plugin-storybook": "^10.1.2",
-    "fast-check": "^3.23.2",
-    "globals": "^16.5.0",
+    "fast-check": "^4.5.3",
+    "globals": "^17.1.0",
     "husky": "^9.1.7",
-    "jsdom": "^27.1.0",
+    "jsdom": "^28.0.0",
     "lint-staged": "^16.2.7",
     "playwright": "^1.57.0",
     "prettier": "^3.7.3",
     "prettier-plugin-organize-imports": "^4.3.0",
+    "react": "^19.2.4",
     "react-bootstrap": "^2.10.10",
     "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/borders.css

@@ -0,0 +1,18 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+:root {
+  --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: var(--mds-scale-300);
+  --mds-border-radius-md: var(--mds-scale-200);
+  --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-xl: var(--mds-scale-600);
+  --mds-border-radius-xxl: var(--mds-scale-1000);
+}

package/tokens/css/colors.css

@@ -0,0 +1,68 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+:root {
+  --mds-border-translucent: rgba(0, 0, 0, 0);
+  --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-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);
+  --mds-bg-feedback-warning-default: var(--mds-color-yellow-500);
+  --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-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-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);
+  --mds-bg-interactive-secondary-hover: var(--mds-color-gray-300);
+  --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);
+  --mds-border-default: var(--mds-color-gray-300);
+  --mds-border-feedback-danger: var(--mds-color-red-200);
+  --mds-border-feedback-info: var(--mds-color-cyan-200);
+  --mds-border-feedback-primary: var(--mds-color-blue-200);
+  --mds-border-feedback-secondary: var(--mds-color-gray-200);
+  --mds-border-feedback-success: var(--mds-color-green-200);
+  --mds-border-feedback-warning: var(--mds-color-yellow-200);
+  --mds-border-interactive-danger-active: var(--mds-color-red-600);
+  --mds-border-interactive-danger-disabled: var(--mds-color-red-300);
+  --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-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-text-danger: var(--mds-color-red-500);
+  --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);
+  --mds-text-feedback-info: var(--mds-color-cyan-800);
+  --mds-text-feedback-primary: var(--mds-color-blue-800);
+  --mds-text-feedback-secondary: var(--mds-color-gray-800);
+  --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-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);
+  --mds-bg-interactive-secondary-active: var(--mds-bg-interactive-secondary-default);
+  --mds-border-interactive-danger-default: var(--mds-bg-interactive-danger-default);
+  --mds-border-interactive-danger-hover: var(--mds-bg-interactive-danger-default);
+  --mds-border-interactive-primary-default: var(--mds-bg-interactive-primary-default);
+  --mds-border-interactive-primary-hover: var(--mds-bg-interactive-primary-default);
+  --mds-text-link-primary-default: var(--mds-bg-interactive-primary-default);
+  --mds-text-link-primary-hover: var(--mds-bg-interactive-primary-hover);
+  --mds-focus-default: var(--mds-border-interactive-primary-default);
+}

package/tokens/css/index.css

@@ -0,0 +1,11 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+@import "./borders.css";
+@import "./colors.css";
+@import "./primitives.css";
+@import "./shadows.css";
+@import "./sizes.css";
+@import "./spacing.css";
+@import "./typography.css";

package/tokens/css/primitives.css

@@ -0,0 +1,162 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+:root {
+  --mds-color-blue-100: #cfe2f2;
+  --mds-color-blue-200: #9fc4e5;
+  --mds-color-blue-300: #6fa7d9;
+  --mds-color-blue-400: #3f89cc;
+  --mds-color-blue-500: #0f6cbf;
+  --mds-color-blue-600: #0c5699;
+  --mds-color-blue-700: #094173;
+  --mds-color-blue-800: #062b4c;
+  --mds-color-blue-900: #031626;
+  --mds-color-cyan-100: #cce6ea;
+  --mds-color-cyan-200: #99cdd5;
+  --mds-color-cyan-300: #66b3c0;
+  --mds-color-cyan-400: #339aab;
+  --mds-color-cyan-500: #008196;
+  --mds-color-cyan-600: #006778;
+  --mds-color-cyan-700: #004d5a;
+  --mds-color-cyan-800: #00343c;
+  --mds-color-cyan-900: #001a1e;
+  --mds-color-gray-100: #f8f9fa;
+  --mds-color-gray-200: #e9ecef;
+  --mds-color-gray-300: #dee2e6;
+  --mds-color-gray-400: #ced4da;
+  --mds-color-gray-500: #8f959e;
+  --mds-color-gray-600: #6a737b;
+  --mds-color-gray-700: #495057;
+  --mds-color-gray-800: #343a40;
+  --mds-color-gray-900: #1d2125;
+  --mds-color-gray-black: #000000;
+  --mds-color-gray-white: #ffffff;
+  --mds-color-green-100: #d7e4d6;
+  --mds-color-green-200: #aecaad;
+  --mds-color-green-300: #86af84;
+  --mds-color-green-400: #5d955b;
+  --mds-color-green-500: #357a32;
+  --mds-color-green-600: #2a6228;
+  --mds-color-green-700: #20491e;
+  --mds-color-green-800: #153114;
+  --mds-color-green-900: #0b180a;
+  --mds-color-indigo-100: #e0cffc;
+  --mds-color-indigo-200: #c29ffa;
+  --mds-color-indigo-300: #a370f7;
+  --mds-color-indigo-400: #8540f5;
+  --mds-color-indigo-500: #6610f2;
+  --mds-color-indigo-600: #520dc2;
+  --mds-color-indigo-700: #3d0a91;
+  --mds-color-indigo-800: #290661;
+  --mds-color-indigo-900: #140330;
+  --mds-color-orange-100: #ffe3d1;
+  --mds-color-orange-200: #ffc8a3;
+  --mds-color-orange-300: #ffac74;
+  --mds-color-orange-400: #ff9146;
+  --mds-color-orange-500: #ff7518;
+  --mds-color-orange-600: #cc5e13;
+  --mds-color-orange-700: #99460e;
+  --mds-color-orange-800: #662f0a;
+  --mds-color-orange-900: #331705;
+  --mds-color-pink-100: #f8d1e3;
+  --mds-color-pink-200: #f1a3c7;
+  --mds-color-pink-300: #e976ac;
+  --mds-color-pink-400: #e24890;
+  --mds-color-pink-500: #db1a74;
+  --mds-color-pink-600: #af155d;
+  --mds-color-pink-700: #831046;
+  --mds-color-pink-800: #580a2e;
+  --mds-color-pink-900: #2c0517;
+  --mds-color-purple-100: #dfd8e5;
+  --mds-color-purple-200: #c0b1cb;
+  --mds-color-purple-300: #a08bb0;
+  --mds-color-purple-400: #816496;
+  --mds-color-purple-500: #613d7c;
+  --mds-color-purple-600: #4e3163;
+  --mds-color-purple-700: #3a254a;
+  --mds-color-purple-800: #271832;
+  --mds-color-purple-900: #130c19;
+  --mds-color-red-100: #f4d6d2;
+  --mds-color-red-200: #eaada6;
+  --mds-color-red-300: #df8379;
+  --mds-color-red-400: #d55a4d;
+  --mds-color-red-500: #ca3120;
+  --mds-color-red-600: #a2271a;
+  --mds-color-red-700: #791d13;
+  --mds-color-red-800: #51140d;
+  --mds-color-red-900: #280a06;
+  --mds-color-teal-100: #d2f4ea;
+  --mds-color-teal-200: #a6e9d5;
+  --mds-color-teal-300: #79dfc1;
+  --mds-color-teal-400: #4dd4ac;
+  --mds-color-teal-500: #20c997;
+  --mds-color-teal-600: #1aa179;
+  --mds-color-teal-700: #13795b;
+  --mds-color-teal-800: #0d503c;
+  --mds-color-teal-900: #06281e;
+  --mds-color-yellow-100: #fcefdc;
+  --mds-color-yellow-200: #f9deb8;
+  --mds-color-yellow-300: #f6ce95;
+  --mds-color-yellow-400: #f3bd71;
+  --mds-color-yellow-500: #f0ad4e;
+  --mds-color-yellow-600: #c08a3e;
+  --mds-color-yellow-700: #90682f;
+  --mds-color-yellow-800: #60451f;
+  --mds-color-yellow-900: #302310;
+  --mds-scale-0: 0rem;
+  --mds-scale-50: 0.125rem;
+  --mds-scale-100: 0.25rem;
+  --mds-scale-200: 0.375rem;
+  --mds-scale-300: 0.5rem;
+  --mds-scale-400: 0.75rem;
+  --mds-scale-500: 0.875rem;
+  --mds-scale-600: 1rem;
+  --mds-scale-700: 1.25rem;
+  --mds-scale-800: 1.5rem;
+  --mds-scale-900: 1.75rem;
+  --mds-scale-1000: 2rem;
+  --mds-scale-1100: 2.5rem;
+  --mds-scale-1200: 3rem;
+  --mds-scale-1300: 3.5rem;
+  --mds-scale-1400: 4rem;
+  --mds-scale-1500: 4.5rem;
+  --mds-scale-1600: 5rem;
+  --mds-scale-1700: 6rem;
+  --mds-scale-1800: 50rem;
+  --mds-typography-font-family-monospace: Menlo;
+  --mds-typography-font-family-sans-serif: Roboto;
+  --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;
+  --mds-typography-line-height-displays-d3: 4.8rem;
+  --mds-typography-line-height-displays-d4: 4.2rem;
+  --mds-typography-line-height-displays-d5: 3.6rem;
+  --mds-typography-line-height-displays-d6: 3rem;
+  --mds-typography-line-height-headings-h1: 3rem;
+  --mds-typography-line-height-headings-h2: 2.4rem;
+  --mds-typography-line-height-headings-h3: 2.1rem;
+  --mds-typography-line-height-headings-h4: 1.8rem;
+  --mds-typography-line-height-headings-h5: 1.5rem;
+  --mds-typography-line-height-headings-h6: 1.2rem;
+  --mds-typography-line-height-paragraph-base: 1.5rem;
+  --mds-typography-line-height-paragraph-lg: 2.5rem;
+  --mds-typography-line-height-paragraph-sm: 1.0875rem;
+}

package/tokens/css/shadows.css

@@ -0,0 +1,15 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+: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-blur-lg: var(--mds-scale-1200);
+  --mds-blur-md: var(--mds-scale-600);
+  --mds-blur-sm: var(--mds-scale-100);
+  --mds-offset-lg: var(--mds-scale-600);
+  --mds-offset-md: var(--mds-scale-300);
+  --mds-offset-sm: var(--mds-scale-50);
+}

package/tokens/css/sizes.css

@@ -0,0 +1,13 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+: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-xxxl: var(--mds-scale-1200);
+}

package/tokens/css/spacing.css

@@ -0,0 +1,14 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+:root {
+  --mds-spacing-lg: var(--mds-scale-700);
+  --mds-spacing-md: var(--mds-scale-600);
+  --mds-spacing-none: var(--mds-scale-0);
+  --mds-spacing-sm: var(--mds-scale-400);
+  --mds-spacing-xl: var(--mds-scale-1000);
+  --mds-spacing-xs: var(--mds-scale-300);
+  --mds-spacing-xxl: var(--mds-scale-1200);
+  --mds-spacing-xxs: var(--mds-scale-100);
+}

package/tokens/css/typography.css

@@ -0,0 +1,47 @@
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+:root {
+  --mds-font-family-base: var(--mds-typography-font-family-sans-serif); /** Default typeface for all UI text. Ensures global consistency. */
+  --mds-font-family-code: var(--mds-typography-font-family-monospace); /** Typeface for code, preformatted text, or monospace contexts. */
+  --mds-font-size-displays-1: var(--mds-scale-1600); /** Display style, largest. */
+  --mds-font-size-displays-2: var(--mds-scale-1500); /** Display style, extra-large. */
+  --mds-font-size-displays-3: var(--mds-scale-1400); /** Display style, large. */
+  --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-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);
+  --mds-line-height-displays-3: var(--mds-typography-line-height-displays-d3);
+  --mds-line-height-displays-4: var(--mds-typography-line-height-displays-d4);
+  --mds-line-height-displays-5: var(--mds-typography-line-height-displays-d5);
+  --mds-line-height-displays-6: var(--mds-typography-line-height-displays-d6);
+  --mds-line-height-headings-1: var(--mds-typography-line-height-headings-h1); /** Tight line height for headings. */
+  --mds-line-height-headings-2: var(--mds-typography-line-height-headings-h2); /** Tight line height for headings. */
+  --mds-line-height-headings-3: var(--mds-typography-line-height-headings-h3); /** Tight line height for headings. */
+  --mds-line-height-headings-4: var(--mds-typography-line-height-headings-h4); /** Tight line height for headings. */
+  --mds-line-height-headings-5: var(--mds-typography-line-height-headings-h5); /** Tight line height for headings. */
+  --mds-line-height-headings-6: var(--mds-typography-line-height-headings-h6); /** Tight line height for headings. */
+  --mds-line-height-paragraph-default: var(--mds-typography-line-height-paragraph-base); /** Comfortable line height for paragraphs. */
+  --mds-line-height-paragraph-lead: var(--mds-typography-line-height-paragraph-lg); /** Extended line height for large body text. */
+  --mds-line-height-paragraph-small: var(--mds-typography-line-height-paragraph-sm); /** Compact line height for small text. */
+  --mds-margin-bottom-display: var(--mds-spacing-none); /** Default margin below a Displays. */
+  --mds-margin-bottom-heading: var(--mds-spacing-xs); /** Default margin below a Headings. */
+  --mds-margin-bottom-paragraph: var(--mds-spacing-md); /** Default margin below a paragraph. */
+}

package/tokens/scss/_borders.scss

@@ -0,0 +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;

package/tokens/scss/_colors.scss

@@ -0,0 +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;

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

@@ -0,0 +1,10 @@
+
+// THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+
+@forward "borders";
+@forward "colors";
+@forward "primitives";
+@forward "shadows";
+@forward "sizes";
+@forward "spacing";
+@forward "typography";