@moodlehq/design-system 3.0.0 → 3.2.0

package/tokens/css/primitives.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --mds-color-blue-50: #e7f0f9;
   --mds-color-blue-100: #cfe2f2;
   --mds-color-blue-200: #9fc4e5;
   --mds-color-blue-300: #6fa7d9;
@@ -12,6 +13,7 @@
   --mds-color-blue-700: #094173;
   --mds-color-blue-800: #062b4c;
   --mds-color-blue-900: #031626;
+  --mds-color-cyan-50: #e5f2f4;
   --mds-color-cyan-100: #cce6ea;
   --mds-color-cyan-200: #99cdd5;
   --mds-color-cyan-300: #66b3c0;
@@ -32,6 +34,7 @@
   --mds-color-gray-900: #1d2125;
   --mds-color-gray-black: #000000;
   --mds-color-gray-white: #ffffff;
+  --mds-color-green-50: #ebf2ea;
   --mds-color-green-100: #d7e4d6;
   --mds-color-green-200: #aecaad;
   --mds-color-green-300: #86af84;
@@ -77,6 +80,7 @@
   --mds-color-purple-700: #3a254a;
   --mds-color-purple-800: #271832;
   --mds-color-purple-900: #130c19;
+  --mds-color-red-50: #faeae9;
   --mds-color-red-100: #f4d6d2;
   --mds-color-red-200: #eaada6;
   --mds-color-red-300: #df8379;
@@ -95,6 +99,7 @@
   --mds-color-teal-700: #13795b;
   --mds-color-teal-800: #0d503c;
   --mds-color-teal-900: #06281e;
+  --mds-color-yellow-50: #fdf7ed;
   --mds-color-yellow-100: #fcefdc;
   --mds-color-yellow-200: #f9deb8;
   --mds-color-yellow-300: #f6ce95;
@@ -159,4 +164,5 @@
   --mds-typography-line-height-paragraph-base: 1.5rem;
   --mds-typography-line-height-paragraph-lg: 2.5rem;
   --mds-typography-line-height-paragraph-sm: 1.0875rem;
+  --mds-typography-line-height-paragraph-xs: 0.75rem;
 }

package/tokens/css/typography.css

@@ -41,6 +41,7 @@
   --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-line-height-paragraph-xs: var(--mds-typography-line-height-paragraph-xs);
   --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/_colors.scss

@@ -16,23 +16,30 @@ $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-light: #faeae9 !default;
 $mds-bg-feedback-danger-subtle: #f4d6d2 !default;
 $mds-bg-feedback-info-default: #008196 !default;
+$mds-bg-feedback-info-light: #e5f2f4 !default;
 $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-subtle: #f8f9fa !default;
 $mds-bg-feedback-success-default: #357a32 !default;
+$mds-bg-feedback-success-light: #ebf2ea !default;
 $mds-bg-feedback-success-subtle: #d7e4d6 !default;
 $mds-bg-feedback-warning-default: #f0ad4e !default;
+$mds-bg-feedback-warning-light: #fdf7ed !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-default-light: #faeae9 !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-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;

package/tokens/scss/_primitives.scss

@@ -1,6 +1,7 @@
 
 // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
 
+$mds-color-blue-50: #e7f0f9 !default;
 $mds-color-blue-100: #cfe2f2 !default;
 $mds-color-blue-200: #9fc4e5 !default;
 $mds-color-blue-300: #6fa7d9 !default;
@@ -10,6 +11,7 @@ $mds-color-blue-600: #0c5699 !default;
 $mds-color-blue-700: #094173 !default;
 $mds-color-blue-800: #062b4c !default;
 $mds-color-blue-900: #031626 !default;
+$mds-color-cyan-50: #e5f2f4 !default;
 $mds-color-cyan-100: #cce6ea !default;
 $mds-color-cyan-200: #99cdd5 !default;
 $mds-color-cyan-300: #66b3c0 !default;
@@ -30,6 +32,7 @@ $mds-color-gray-800: #343a40 !default;
 $mds-color-gray-900: #1d2125 !default;
 $mds-color-gray-black: #000000 !default;
 $mds-color-gray-white: #ffffff !default;
+$mds-color-green-50: #ebf2ea !default;
 $mds-color-green-100: #d7e4d6 !default;
 $mds-color-green-200: #aecaad !default;
 $mds-color-green-300: #86af84 !default;
@@ -75,6 +78,7 @@ $mds-color-purple-600: #4e3163 !default;
 $mds-color-purple-700: #3a254a !default;
 $mds-color-purple-800: #271832 !default;
 $mds-color-purple-900: #130c19 !default;
+$mds-color-red-50: #faeae9 !default;
 $mds-color-red-100: #f4d6d2 !default;
 $mds-color-red-200: #eaada6 !default;
 $mds-color-red-300: #df8379 !default;
@@ -93,6 +97,7 @@ $mds-color-teal-600: #1aa179 !default;
 $mds-color-teal-700: #13795b !default;
 $mds-color-teal-800: #0d503c !default;
 $mds-color-teal-900: #06281e !default;
+$mds-color-yellow-50: #fdf7ed !default;
 $mds-color-yellow-100: #fcefdc !default;
 $mds-color-yellow-200: #f9deb8 !default;
 $mds-color-yellow-300: #f6ce95 !default;
@@ -157,3 +162,4 @@ $mds-typography-line-height-headings-h6: 1.2rem !default;
 $mds-typography-line-height-paragraph-base: 1.5rem !default;
 $mds-typography-line-height-paragraph-lg: 2.5rem !default;
 $mds-typography-line-height-paragraph-sm: 1.0875rem !default;
+$mds-typography-line-height-paragraph-xs: 0.75rem !default;

package/tokens/scss/_typography.scss

@@ -39,6 +39,7 @@ $mds-line-height-headings-6: 1.2rem !default; // Tight line height for headings.
 $mds-line-height-paragraph-default: 1.5rem !default; // Comfortable line height for paragraphs.
 $mds-line-height-paragraph-lead: 2.5rem !default; // Extended line height for large body text.
 $mds-line-height-paragraph-small: 1.0875rem !default; // Compact line height for small text.
+$mds-line-height-paragraph-xs: 0.75rem !default;
 $mds-margin-bottom-display: 0rem !default; // Default margin below a Displays.
 $mds-margin-bottom-heading: 0.5rem !default; // Default margin below a Headings.
 $mds-margin-bottom-paragraph: 1rem !default; // Default margin below a paragraph.