@moodlehq/design-system 0.1.0 → 1.0.0

package/tokens/css/typography.css

@@ -0,0 +1,52 @@
+/**
+ * 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-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-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/_fonts.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

package/tokens/scss/_index.scss

@@ -0,0 +1,11 @@
+
+// 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";
+@forward "fonts";

package/tokens/scss/_primitives.scss

@@ -0,0 +1,168 @@
+
+// THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+
+$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-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-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/scss/_shadows.scss

@@ -0,0 +1,12 @@
+
+// THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+
+$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-blur-lg: 3rem;
+$mds-blur-md: 1rem;
+$mds-blur-sm: 0.25rem;
+$mds-offset-lg: 1rem;
+$mds-offset-md: 0.5rem;
+$mds-offset-sm: 0.125rem;

package/tokens/scss/_sizes.scss

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

package/tokens/scss/_spacing.scss

@@ -0,0 +1,11 @@
+
+// THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+
+$mds-spacing-lg: 1.25rem;
+$mds-spacing-md: 1rem;
+$mds-spacing-none: 0rem;
+$mds-spacing-sm: 0.75rem;
+$mds-spacing-xl: 2rem;
+$mds-spacing-xs: 0.5rem;
+$mds-spacing-xxl: 3rem;
+$mds-spacing-xxs: 0.25rem;

package/tokens/scss/_typography.scss

@@ -0,0 +1,49 @@
+
+// THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+
+$mds-font-family-base: Roboto; // Default typeface for all UI text. Ensures global consistency.
+$mds-font-family-code: Menlo; // Typeface for code, preformatted text, or monospace contexts.
+$mds-font-size-displays-1: 5rem; // Display style, largest.
+$mds-font-size-displays-2: 4.5rem; // Display style, extra-large.
+$mds-font-size-displays-3: 4rem; // Display style, large.
+$mds-font-size-displays-4: 3.5rem; // Display style, medium-large.
+$mds-font-size-displays-5: 3rem; // Display style, medium.
+$mds-font-size-displays-6: 2.5rem; // Display style, smaller display.
+$mds-font-size-headings-1: 2.5rem; // Font size for H1 headings.
+$mds-font-size-headings-2: 2rem; // Font size for H2 headings.
+$mds-font-size-headings-3: 1.75rem; // Font size for H3 headings.
+$mds-font-size-headings-4: 1.5rem; // Font size for H4 headings.
+$mds-font-size-headings-5: 1.25rem; // Font size for H5 headings.
+$mds-font-size-headings-6: 1rem; // Font size for H6 headings.
+$mds-font-size-paragraph-default: 1rem; // Base size for body text.
+$mds-font-size-paragraph-lead: 1.25rem; // Slightly larger body text, for lead paragraphs.
+$mds-font-size-paragraph-small: 0.875rem; // Reduced size for secondary text.
+$mds-font-weight-italic-bold: Bold Italic;
+$mds-font-weight-italic-light: Light Italic;
+$mds-font-weight-italic-medium: Medium Italic;
+$mds-font-weight-italic-regular: Italic;
+$mds-font-weight-italic-semibold: Semi Bold Italic;
+$mds-font-weight-normal-bold: Bold;
+$mds-font-weight-normal-light: Light;
+$mds-font-weight-normal-medium: Medium;
+$mds-font-weight-normal-regular: Regular;
+$mds-font-weight-normal-semibold: Semibold;
+$mds-letter-spacing-default: 0rem; // Standard tracking for all texts.
+$mds-line-height-displays-1: 6rem;
+$mds-line-height-displays-2: 5.4rem;
+$mds-line-height-displays-3: 4.8rem;
+$mds-line-height-displays-4: 4.2rem;
+$mds-line-height-displays-5: 3.6rem;
+$mds-line-height-displays-6: 3rem;
+$mds-line-height-headings-1: 3rem; // Tight line height for headings.
+$mds-line-height-headings-2: 2.4rem; // Tight line height for headings.
+$mds-line-height-headings-3: 2.1rem; // Tight line height for headings.
+$mds-line-height-headings-4: 1.8rem; // Tight line height for headings.
+$mds-line-height-headings-5: 1.5rem; // Tight line height for headings.
+$mds-line-height-headings-6: 1.2rem; // Tight line height for headings.
+$mds-line-height-paragraph-default: 1.5rem; // Comfortable line height for paragraphs.
+$mds-line-height-paragraph-lead: 2.5rem; // Extended line height for large body text.
+$mds-line-height-paragraph-small: 1.0875rem; // Compact line height for small text.
+$mds-margin-bottom-display: 0rem; // Default margin below a Displays.
+$mds-margin-bottom-heading: 0.5rem; // Default margin below a Headings.
+$mds-margin-bottom-paragraph: 1rem; // Default margin below a paragraph.

package/dist/src/index.d.ts

@@ -1 +0,0 @@
-export * from './button';