@moodlehq/design-system 2.0.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/button/Button.d.ts +3 -4
  2. package/dist/index.js +17 -4
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -3
  5. package/tokens/scss/_borders.scss +12 -12
  6. package/tokens/scss/_colors.scss +62 -62
  7. package/tokens/scss/_primitives.scss +156 -156
  8. package/tokens/scss/_shadows.scss +9 -9
  9. package/tokens/scss/_sizes.scss +7 -7
  10. package/tokens/scss/_spacing.scss +8 -8
  11. package/tokens/scss/_typography.scss +41 -41
package/dist/components/button/Button.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import { ButtonProps as RBButtonProps } from 'react-bootstrap';
2
- export interface ButtonProps extends RBButtonProps {
1
+ import { ButtonHTMLAttributes } from 'react';
2
+ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
3
3
  label: string;
4
4
  variant?: string;
5
- disabled?: boolean;
6
5
  size?: 'sm' | 'lg';
7
6
  }
8
- export declare const Button: React.FC<ButtonProps>;
7
+ export declare const Button: ({ label, variant, size, className, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
package/dist/index.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { Button as Button$1 } from "react-bootstrap";
3
2
  const allowedVariants = [
4
3
  "primary",
5
4
  "secondary",
@@ -8,9 +7,23 @@ const allowedVariants = [
8
7
  "outline-secondary",
9
8
  "outline-danger"
10
9
  ];
11
- const Button = ({ label, variant, ...props }) => {
12
- const resolvedVariant = allowedVariants.includes(variant ?? "") ? variant : "primary";
13
- return /* @__PURE__ */ jsx(Button$1, { className: "mds-btn", variant: resolvedVariant, ...props, children: label });
10
+ const Button = ({
11
+ label,
12
+ variant,
13
+ size,
14
+ className,
15
+ type = "button",
16
+ ...props
17
+ }) => {
18
+ const resolvedVariant = variant && allowedVariants.includes(variant) ? variant : "primary";
19
+ const classes = ["mds-btn", "btn", `btn-${resolvedVariant}`];
20
+ if (size) {
21
+ classes.push(`btn-${size}`);
22
+ }
23
+ if (className) {
24
+ classes.push(className);
25
+ }
26
+ return /* @__PURE__ */ jsx("button", { className: classes.join(" "), type, ...props, children: label });
14
27
  };
15
28
  export {
16
29
  Button
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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;"}
1
+ {"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;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moodlehq/design-system",
3
- "version": "2.0.0",
3
+ "version": "2.1.1",
4
4
  "description": "The Moodle Design System",
5
5
  "files": [
6
6
  "/dist",
@@ -31,7 +31,6 @@
31
31
  },
32
32
  "peerDependencies": {
33
33
  "react": "^19.2.4",
34
- "react-bootstrap": "^2.10.10",
35
34
  "react-dom": "^19.2.4"
36
35
  },
37
36
  "devDependencies": {
@@ -74,7 +73,6 @@
74
73
  "prettier": "^3.7.3",
75
74
  "prettier-plugin-organize-imports": "^4.3.0",
76
75
  "react": "^19.2.4",
77
- "react-bootstrap": "^2.10.10",
78
76
  "react-docgen": "^8.0.2",
79
77
  "react-docgen-typescript": "^2.4.0",
80
78
  "react-dom": "^19.2.4",
package/tokens/scss/_borders.scss CHANGED
@@ -1,15 +1,15 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
- $mds-border-radius-lg: 0.5rem;
5
- $mds-border-radius-md: 0.375rem;
6
- $mds-border-radius-none: 0rem;
7
- $mds-border-radius-pill: 50rem;
8
- $mds-border-radius-sm: 0.25rem;
9
- $mds-border-radius-xl: 1rem;
10
- $mds-border-radius-xxl: 2rem;
11
- $mds-stroke-weight-lg: 0.1875rem;
12
- $mds-stroke-weight-md: 0.125rem;
13
- $mds-stroke-weight-sm: 0.0625rem;
14
- $mds-stroke-weight-xl: 0.25rem;
15
- $mds-stroke-weight-xxl: 0.3125rem;
4
+ $mds-border-radius-lg: 0.5rem !default;
5
+ $mds-border-radius-md: 0.375rem !default;
6
+ $mds-border-radius-none: 0rem !default;
7
+ $mds-border-radius-pill: 50rem !default;
8
+ $mds-border-radius-sm: 0.25rem !default;
9
+ $mds-border-radius-xl: 1rem !default;
10
+ $mds-border-radius-xxl: 2rem !default;
11
+ $mds-stroke-weight-lg: 0.1875rem !default;
12
+ $mds-stroke-weight-md: 0.125rem !default;
13
+ $mds-stroke-weight-sm: 0.0625rem !default;
14
+ $mds-stroke-weight-xl: 0.25rem !default;
15
+ $mds-stroke-weight-xxl: 0.3125rem !default;
package/tokens/scss/_colors.scss CHANGED
@@ -1,65 +1,65 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
- $mds-bg-feedback-danger-default: #ca3120;
5
- $mds-bg-feedback-danger-subtle: #f4d6d2;
6
- $mds-bg-feedback-info-default: #008196;
7
- $mds-bg-feedback-info-subtle: #cce6ea;
8
- $mds-bg-feedback-primary-default: #0f6cbf;
9
- $mds-bg-feedback-primary-subtle: #cfe2f2;
10
- $mds-bg-feedback-secondary-subtle: #f8f9fa;
11
- $mds-bg-feedback-success-default: #357a32;
12
- $mds-bg-feedback-success-subtle: #d7e4d6;
13
- $mds-bg-feedback-warning-default: #f0ad4e;
14
- $mds-bg-feedback-warning-subtle: #fcefdc;
15
- $mds-bg-interactive-danger-active: #791d13;
16
- $mds-bg-interactive-danger-default: #ca3120;
17
- $mds-bg-interactive-danger-disabled: #df8379;
18
- $mds-bg-interactive-danger-hover: #a2271a;
19
- $mds-bg-interactive-primary-active: #094173;
20
- $mds-bg-interactive-primary-default: #0f6cbf;
21
- $mds-bg-interactive-primary-disabled: #6fa7d9;
22
- $mds-bg-interactive-primary-hover: #0c5699;
23
- $mds-bg-interactive-secondary-active: #ced4da;
24
- $mds-bg-interactive-secondary-default: #ced4da;
25
- $mds-bg-interactive-secondary-disabled: #e9ecef;
26
- $mds-bg-interactive-secondary-hover: #dee2e6;
27
- $mds-bg-surface-default: #ffffff;
28
- $mds-bg-surface-strong: #e9ecef;
29
- $mds-bg-surface-subtle: #f8f9fa;
30
- $mds-border-default: #dee2e6;
31
- $mds-border-feedback-danger: #eaada6;
32
- $mds-border-feedback-info: #99cdd5;
33
- $mds-border-feedback-primary: #9fc4e5;
34
- $mds-border-feedback-secondary: #e9ecef;
35
- $mds-border-feedback-success: #aecaad;
36
- $mds-border-feedback-warning: #f9deb8;
37
- $mds-border-interactive-danger-active: #a2271a;
38
- $mds-border-interactive-danger-default: #ca3120;
39
- $mds-border-interactive-danger-disabled: #df8379;
40
- $mds-border-interactive-danger-hover: #ca3120;
41
- $mds-border-interactive-primary-active: #0c5699;
42
- $mds-border-interactive-primary-default: #0f6cbf;
43
- $mds-border-interactive-primary-disabled: #6fa7d9;
44
- $mds-border-interactive-primary-hover: #0f6cbf;
45
- $mds-border-interactive-secondary-active: #495057;
46
- $mds-border-interactive-secondary-default: #6a737b;
47
- $mds-border-interactive-secondary-disabled: #8f959e;
48
- $mds-border-interactive-secondary-hover: #6a737b;
49
- $mds-border-subtle: #e9ecef;
50
- $mds-border-translucent: rgba(0, 0, 0, 0);
51
- $mds-focus-default: #0f6cbf;
52
- $mds-text-danger: #ca3120;
53
- $mds-text-default: #1d2125;
54
- $mds-text-emphasis: #000000;
55
- $mds-text-feedback-danger: #51140d;
56
- $mds-text-feedback-info: #00343c;
57
- $mds-text-feedback-primary: #062b4c;
58
- $mds-text-feedback-secondary: #343a40;
59
- $mds-text-feedback-success: #153114;
60
- $mds-text-feedback-warning: #60451f;
61
- $mds-text-inverse: #f8f9fa;
62
- $mds-text-link-primary-default: #0f6cbf;
63
- $mds-text-link-primary-hover: #0c5699;
64
- $mds-text-muted: #6a737b;
65
- $mds-text-subtle: #495057;
4
+ $mds-bg-feedback-danger-default: #ca3120 !default;
5
+ $mds-bg-feedback-danger-subtle: #f4d6d2 !default;
6
+ $mds-bg-feedback-info-default: #008196 !default;
7
+ $mds-bg-feedback-info-subtle: #cce6ea !default;
8
+ $mds-bg-feedback-primary-default: #0f6cbf !default;
9
+ $mds-bg-feedback-primary-subtle: #cfe2f2 !default;
10
+ $mds-bg-feedback-secondary-subtle: #f8f9fa !default;
11
+ $mds-bg-feedback-success-default: #357a32 !default;
12
+ $mds-bg-feedback-success-subtle: #d7e4d6 !default;
13
+ $mds-bg-feedback-warning-default: #f0ad4e !default;
14
+ $mds-bg-feedback-warning-subtle: #fcefdc !default;
15
+ $mds-bg-interactive-danger-active: #791d13 !default;
16
+ $mds-bg-interactive-danger-default: #ca3120 !default;
17
+ $mds-bg-interactive-danger-disabled: #df8379 !default;
18
+ $mds-bg-interactive-danger-hover: #a2271a !default;
19
+ $mds-bg-interactive-primary-active: #094173 !default;
20
+ $mds-bg-interactive-primary-default: #0f6cbf !default;
21
+ $mds-bg-interactive-primary-disabled: #6fa7d9 !default;
22
+ $mds-bg-interactive-primary-hover: #0c5699 !default;
23
+ $mds-bg-interactive-secondary-active: #ced4da !default;
24
+ $mds-bg-interactive-secondary-default: #ced4da !default;
25
+ $mds-bg-interactive-secondary-disabled: #e9ecef !default;
26
+ $mds-bg-interactive-secondary-hover: #dee2e6 !default;
27
+ $mds-bg-surface-default: #ffffff !default;
28
+ $mds-bg-surface-strong: #e9ecef !default;
29
+ $mds-bg-surface-subtle: #f8f9fa !default;
30
+ $mds-border-default: #dee2e6 !default;
31
+ $mds-border-feedback-danger: #eaada6 !default;
32
+ $mds-border-feedback-info: #99cdd5 !default;
33
+ $mds-border-feedback-primary: #9fc4e5 !default;
34
+ $mds-border-feedback-secondary: #e9ecef !default;
35
+ $mds-border-feedback-success: #aecaad !default;
36
+ $mds-border-feedback-warning: #f9deb8 !default;
37
+ $mds-border-interactive-danger-active: #a2271a !default;
38
+ $mds-border-interactive-danger-default: #ca3120 !default;
39
+ $mds-border-interactive-danger-disabled: #df8379 !default;
40
+ $mds-border-interactive-danger-hover: #ca3120 !default;
41
+ $mds-border-interactive-primary-active: #0c5699 !default;
42
+ $mds-border-interactive-primary-default: #0f6cbf !default;
43
+ $mds-border-interactive-primary-disabled: #6fa7d9 !default;
44
+ $mds-border-interactive-primary-hover: #0f6cbf !default;
45
+ $mds-border-interactive-secondary-active: #495057 !default;
46
+ $mds-border-interactive-secondary-default: #6a737b !default;
47
+ $mds-border-interactive-secondary-disabled: #8f959e !default;
48
+ $mds-border-interactive-secondary-hover: #6a737b !default;
49
+ $mds-border-subtle: #e9ecef !default;
50
+ $mds-border-translucent: rgba(0, 0, 0, 0) !default;
51
+ $mds-focus-default: #0f6cbf !default;
52
+ $mds-text-danger: #ca3120 !default;
53
+ $mds-text-default: #1d2125 !default;
54
+ $mds-text-emphasis: #000000 !default;
55
+ $mds-text-feedback-danger: #51140d !default;
56
+ $mds-text-feedback-info: #00343c !default;
57
+ $mds-text-feedback-primary: #062b4c !default;
58
+ $mds-text-feedback-secondary: #343a40 !default;
59
+ $mds-text-feedback-success: #153114 !default;
60
+ $mds-text-feedback-warning: #60451f !default;
61
+ $mds-text-inverse: #f8f9fa !default;
62
+ $mds-text-link-primary-default: #0f6cbf !default;
63
+ $mds-text-link-primary-hover: #0c5699 !default;
64
+ $mds-text-muted: #6a737b !default;
65
+ $mds-text-subtle: #495057 !default;
package/tokens/scss/_primitives.scss CHANGED
@@ -1,159 +1,159 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
- $mds-color-blue-100: #cfe2f2;
5
- $mds-color-blue-200: #9fc4e5;
6
- $mds-color-blue-300: #6fa7d9;
7
- $mds-color-blue-400: #3f89cc;
8
- $mds-color-blue-500: #0f6cbf;
9
- $mds-color-blue-600: #0c5699;
10
- $mds-color-blue-700: #094173;
11
- $mds-color-blue-800: #062b4c;
12
- $mds-color-blue-900: #031626;
13
- $mds-color-cyan-100: #cce6ea;
14
- $mds-color-cyan-200: #99cdd5;
15
- $mds-color-cyan-300: #66b3c0;
16
- $mds-color-cyan-400: #339aab;
17
- $mds-color-cyan-500: #008196;
18
- $mds-color-cyan-600: #006778;
19
- $mds-color-cyan-700: #004d5a;
20
- $mds-color-cyan-800: #00343c;
21
- $mds-color-cyan-900: #001a1e;
22
- $mds-color-gray-100: #f8f9fa;
23
- $mds-color-gray-200: #e9ecef;
24
- $mds-color-gray-300: #dee2e6;
25
- $mds-color-gray-400: #ced4da;
26
- $mds-color-gray-500: #8f959e;
27
- $mds-color-gray-600: #6a737b;
28
- $mds-color-gray-700: #495057;
29
- $mds-color-gray-800: #343a40;
30
- $mds-color-gray-900: #1d2125;
31
- $mds-color-gray-black: #000000;
32
- $mds-color-gray-white: #ffffff;
33
- $mds-color-green-100: #d7e4d6;
34
- $mds-color-green-200: #aecaad;
35
- $mds-color-green-300: #86af84;
36
- $mds-color-green-400: #5d955b;
37
- $mds-color-green-500: #357a32;
38
- $mds-color-green-600: #2a6228;
39
- $mds-color-green-700: #20491e;
40
- $mds-color-green-800: #153114;
41
- $mds-color-green-900: #0b180a;
42
- $mds-color-indigo-100: #e0cffc;
43
- $mds-color-indigo-200: #c29ffa;
44
- $mds-color-indigo-300: #a370f7;
45
- $mds-color-indigo-400: #8540f5;
46
- $mds-color-indigo-500: #6610f2;
47
- $mds-color-indigo-600: #520dc2;
48
- $mds-color-indigo-700: #3d0a91;
49
- $mds-color-indigo-800: #290661;
50
- $mds-color-indigo-900: #140330;
51
- $mds-color-orange-100: #ffe3d1;
52
- $mds-color-orange-200: #ffc8a3;
53
- $mds-color-orange-300: #ffac74;
54
- $mds-color-orange-400: #ff9146;
55
- $mds-color-orange-500: #ff7518;
56
- $mds-color-orange-600: #cc5e13;
57
- $mds-color-orange-700: #99460e;
58
- $mds-color-orange-800: #662f0a;
59
- $mds-color-orange-900: #331705;
60
- $mds-color-pink-100: #f8d1e3;
61
- $mds-color-pink-200: #f1a3c7;
62
- $mds-color-pink-300: #e976ac;
63
- $mds-color-pink-400: #e24890;
64
- $mds-color-pink-500: #db1a74;
65
- $mds-color-pink-600: #af155d;
66
- $mds-color-pink-700: #831046;
67
- $mds-color-pink-800: #580a2e;
68
- $mds-color-pink-900: #2c0517;
69
- $mds-color-purple-100: #dfd8e5;
70
- $mds-color-purple-200: #c0b1cb;
71
- $mds-color-purple-300: #a08bb0;
72
- $mds-color-purple-400: #816496;
73
- $mds-color-purple-500: #613d7c;
74
- $mds-color-purple-600: #4e3163;
75
- $mds-color-purple-700: #3a254a;
76
- $mds-color-purple-800: #271832;
77
- $mds-color-purple-900: #130c19;
78
- $mds-color-red-100: #f4d6d2;
79
- $mds-color-red-200: #eaada6;
80
- $mds-color-red-300: #df8379;
81
- $mds-color-red-400: #d55a4d;
82
- $mds-color-red-500: #ca3120;
83
- $mds-color-red-600: #a2271a;
84
- $mds-color-red-700: #791d13;
85
- $mds-color-red-800: #51140d;
86
- $mds-color-red-900: #280a06;
87
- $mds-color-teal-100: #d2f4ea;
88
- $mds-color-teal-200: #a6e9d5;
89
- $mds-color-teal-300: #79dfc1;
90
- $mds-color-teal-400: #4dd4ac;
91
- $mds-color-teal-500: #20c997;
92
- $mds-color-teal-600: #1aa179;
93
- $mds-color-teal-700: #13795b;
94
- $mds-color-teal-800: #0d503c;
95
- $mds-color-teal-900: #06281e;
96
- $mds-color-yellow-100: #fcefdc;
97
- $mds-color-yellow-200: #f9deb8;
98
- $mds-color-yellow-300: #f6ce95;
99
- $mds-color-yellow-400: #f3bd71;
100
- $mds-color-yellow-500: #f0ad4e;
101
- $mds-color-yellow-600: #c08a3e;
102
- $mds-color-yellow-700: #90682f;
103
- $mds-color-yellow-800: #60451f;
104
- $mds-color-yellow-900: #302310;
105
- $mds-scale-0: 0rem;
106
- $mds-scale-50: 0.125rem;
107
- $mds-scale-100: 0.25rem;
108
- $mds-scale-200: 0.375rem;
109
- $mds-scale-300: 0.5rem;
110
- $mds-scale-400: 0.75rem;
111
- $mds-scale-500: 0.875rem;
112
- $mds-scale-600: 1rem;
113
- $mds-scale-700: 1.25rem;
114
- $mds-scale-800: 1.5rem;
115
- $mds-scale-900: 1.75rem;
116
- $mds-scale-1000: 2rem;
117
- $mds-scale-1100: 2.5rem;
118
- $mds-scale-1200: 3rem;
119
- $mds-scale-1300: 3.5rem;
120
- $mds-scale-1400: 4rem;
121
- $mds-scale-1500: 4.5rem;
122
- $mds-scale-1600: 5rem;
123
- $mds-scale-1700: 6rem;
124
- $mds-scale-1800: 50rem;
125
- $mds-typography-font-family-monospace: Menlo;
126
- $mds-typography-font-family-sans-serif: Roboto;
127
- $mds-typography-font-size-0: 0rem;
128
- $mds-typography-font-size-1: 1rem;
129
- $mds-typography-font-size-2: 2rem;
130
- $mds-typography-font-size-0-875: 0.875rem;
131
- $mds-typography-font-size-1-25: 1.25rem;
132
- $mds-typography-font-size-1-5: 1.5rem;
133
- $mds-typography-font-size-1-75: 1.75rem;
134
- $mds-typography-font-size-2-5: 2.5rem;
135
- $mds-typography-font-weight-black: 900;
136
- $mds-typography-font-weight-bold: 700;
137
- $mds-typography-font-weight-extrabold: 800;
138
- $mds-typography-font-weight-extralight: 200;
139
- $mds-typography-font-weight-light: 300;
140
- $mds-typography-font-weight-medium: 500;
141
- $mds-typography-font-weight-regular: 400;
142
- $mds-typography-font-weight-semibold: 600;
143
- $mds-typography-font-weight-thin: 100;
144
- $mds-typography-letter-spacing-none: 0rem; // Default, no tracking
145
- $mds-typography-line-height-displays-d1: 6rem;
146
- $mds-typography-line-height-displays-d2: 5.4rem;
147
- $mds-typography-line-height-displays-d3: 4.8rem;
148
- $mds-typography-line-height-displays-d4: 4.2rem;
149
- $mds-typography-line-height-displays-d5: 3.6rem;
150
- $mds-typography-line-height-displays-d6: 3rem;
151
- $mds-typography-line-height-headings-h1: 3rem;
152
- $mds-typography-line-height-headings-h2: 2.4rem;
153
- $mds-typography-line-height-headings-h3: 2.1rem;
154
- $mds-typography-line-height-headings-h4: 1.8rem;
155
- $mds-typography-line-height-headings-h5: 1.5rem;
156
- $mds-typography-line-height-headings-h6: 1.2rem;
157
- $mds-typography-line-height-paragraph-base: 1.5rem;
158
- $mds-typography-line-height-paragraph-lg: 2.5rem;
159
- $mds-typography-line-height-paragraph-sm: 1.0875rem;
4
+ $mds-color-blue-100: #cfe2f2 !default;
5
+ $mds-color-blue-200: #9fc4e5 !default;
6
+ $mds-color-blue-300: #6fa7d9 !default;
7
+ $mds-color-blue-400: #3f89cc !default;
8
+ $mds-color-blue-500: #0f6cbf !default;
9
+ $mds-color-blue-600: #0c5699 !default;
10
+ $mds-color-blue-700: #094173 !default;
11
+ $mds-color-blue-800: #062b4c !default;
12
+ $mds-color-blue-900: #031626 !default;
13
+ $mds-color-cyan-100: #cce6ea !default;
14
+ $mds-color-cyan-200: #99cdd5 !default;
15
+ $mds-color-cyan-300: #66b3c0 !default;
16
+ $mds-color-cyan-400: #339aab !default;
17
+ $mds-color-cyan-500: #008196 !default;
18
+ $mds-color-cyan-600: #006778 !default;
19
+ $mds-color-cyan-700: #004d5a !default;
20
+ $mds-color-cyan-800: #00343c !default;
21
+ $mds-color-cyan-900: #001a1e !default;
22
+ $mds-color-gray-100: #f8f9fa !default;
23
+ $mds-color-gray-200: #e9ecef !default;
24
+ $mds-color-gray-300: #dee2e6 !default;
25
+ $mds-color-gray-400: #ced4da !default;
26
+ $mds-color-gray-500: #8f959e !default;
27
+ $mds-color-gray-600: #6a737b !default;
28
+ $mds-color-gray-700: #495057 !default;
29
+ $mds-color-gray-800: #343a40 !default;
30
+ $mds-color-gray-900: #1d2125 !default;
31
+ $mds-color-gray-black: #000000 !default;
32
+ $mds-color-gray-white: #ffffff !default;
33
+ $mds-color-green-100: #d7e4d6 !default;
34
+ $mds-color-green-200: #aecaad !default;
35
+ $mds-color-green-300: #86af84 !default;
36
+ $mds-color-green-400: #5d955b !default;
37
+ $mds-color-green-500: #357a32 !default;
38
+ $mds-color-green-600: #2a6228 !default;
39
+ $mds-color-green-700: #20491e !default;
40
+ $mds-color-green-800: #153114 !default;
41
+ $mds-color-green-900: #0b180a !default;
42
+ $mds-color-indigo-100: #e0cffc !default;
43
+ $mds-color-indigo-200: #c29ffa !default;
44
+ $mds-color-indigo-300: #a370f7 !default;
45
+ $mds-color-indigo-400: #8540f5 !default;
46
+ $mds-color-indigo-500: #6610f2 !default;
47
+ $mds-color-indigo-600: #520dc2 !default;
48
+ $mds-color-indigo-700: #3d0a91 !default;
49
+ $mds-color-indigo-800: #290661 !default;
50
+ $mds-color-indigo-900: #140330 !default;
51
+ $mds-color-orange-100: #ffe3d1 !default;
52
+ $mds-color-orange-200: #ffc8a3 !default;
53
+ $mds-color-orange-300: #ffac74 !default;
54
+ $mds-color-orange-400: #ff9146 !default;
55
+ $mds-color-orange-500: #ff7518 !default;
56
+ $mds-color-orange-600: #cc5e13 !default;
57
+ $mds-color-orange-700: #99460e !default;
58
+ $mds-color-orange-800: #662f0a !default;
59
+ $mds-color-orange-900: #331705 !default;
60
+ $mds-color-pink-100: #f8d1e3 !default;
61
+ $mds-color-pink-200: #f1a3c7 !default;
62
+ $mds-color-pink-300: #e976ac !default;
63
+ $mds-color-pink-400: #e24890 !default;
64
+ $mds-color-pink-500: #db1a74 !default;
65
+ $mds-color-pink-600: #af155d !default;
66
+ $mds-color-pink-700: #831046 !default;
67
+ $mds-color-pink-800: #580a2e !default;
68
+ $mds-color-pink-900: #2c0517 !default;
69
+ $mds-color-purple-100: #dfd8e5 !default;
70
+ $mds-color-purple-200: #c0b1cb !default;
71
+ $mds-color-purple-300: #a08bb0 !default;
72
+ $mds-color-purple-400: #816496 !default;
73
+ $mds-color-purple-500: #613d7c !default;
74
+ $mds-color-purple-600: #4e3163 !default;
75
+ $mds-color-purple-700: #3a254a !default;
76
+ $mds-color-purple-800: #271832 !default;
77
+ $mds-color-purple-900: #130c19 !default;
78
+ $mds-color-red-100: #f4d6d2 !default;
79
+ $mds-color-red-200: #eaada6 !default;
80
+ $mds-color-red-300: #df8379 !default;
81
+ $mds-color-red-400: #d55a4d !default;
82
+ $mds-color-red-500: #ca3120 !default;
83
+ $mds-color-red-600: #a2271a !default;
84
+ $mds-color-red-700: #791d13 !default;
85
+ $mds-color-red-800: #51140d !default;
86
+ $mds-color-red-900: #280a06 !default;
87
+ $mds-color-teal-100: #d2f4ea !default;
88
+ $mds-color-teal-200: #a6e9d5 !default;
89
+ $mds-color-teal-300: #79dfc1 !default;
90
+ $mds-color-teal-400: #4dd4ac !default;
91
+ $mds-color-teal-500: #20c997 !default;
92
+ $mds-color-teal-600: #1aa179 !default;
93
+ $mds-color-teal-700: #13795b !default;
94
+ $mds-color-teal-800: #0d503c !default;
95
+ $mds-color-teal-900: #06281e !default;
96
+ $mds-color-yellow-100: #fcefdc !default;
97
+ $mds-color-yellow-200: #f9deb8 !default;
98
+ $mds-color-yellow-300: #f6ce95 !default;
99
+ $mds-color-yellow-400: #f3bd71 !default;
100
+ $mds-color-yellow-500: #f0ad4e !default;
101
+ $mds-color-yellow-600: #c08a3e !default;
102
+ $mds-color-yellow-700: #90682f !default;
103
+ $mds-color-yellow-800: #60451f !default;
104
+ $mds-color-yellow-900: #302310 !default;
105
+ $mds-scale-0: 0rem !default;
106
+ $mds-scale-50: 0.125rem !default;
107
+ $mds-scale-100: 0.25rem !default;
108
+ $mds-scale-200: 0.375rem !default;
109
+ $mds-scale-300: 0.5rem !default;
110
+ $mds-scale-400: 0.75rem !default;
111
+ $mds-scale-500: 0.875rem !default;
112
+ $mds-scale-600: 1rem !default;
113
+ $mds-scale-700: 1.25rem !default;
114
+ $mds-scale-800: 1.5rem !default;
115
+ $mds-scale-900: 1.75rem !default;
116
+ $mds-scale-1000: 2rem !default;
117
+ $mds-scale-1100: 2.5rem !default;
118
+ $mds-scale-1200: 3rem !default;
119
+ $mds-scale-1300: 3.5rem !default;
120
+ $mds-scale-1400: 4rem !default;
121
+ $mds-scale-1500: 4.5rem !default;
122
+ $mds-scale-1600: 5rem !default;
123
+ $mds-scale-1700: 6rem !default;
124
+ $mds-scale-1800: 50rem !default;
125
+ $mds-typography-font-family-monospace: Menlo !default;
126
+ $mds-typography-font-family-sans-serif: Roboto !default;
127
+ $mds-typography-font-size-0: 0rem !default;
128
+ $mds-typography-font-size-1: 1rem !default;
129
+ $mds-typography-font-size-2: 2rem !default;
130
+ $mds-typography-font-size-0-875: 0.875rem !default;
131
+ $mds-typography-font-size-1-25: 1.25rem !default;
132
+ $mds-typography-font-size-1-5: 1.5rem !default;
133
+ $mds-typography-font-size-1-75: 1.75rem !default;
134
+ $mds-typography-font-size-2-5: 2.5rem !default;
135
+ $mds-typography-font-weight-black: 900 !default;
136
+ $mds-typography-font-weight-bold: 700 !default;
137
+ $mds-typography-font-weight-extrabold: 800 !default;
138
+ $mds-typography-font-weight-extralight: 200 !default;
139
+ $mds-typography-font-weight-light: 300 !default;
140
+ $mds-typography-font-weight-medium: 500 !default;
141
+ $mds-typography-font-weight-regular: 400 !default;
142
+ $mds-typography-font-weight-semibold: 600 !default;
143
+ $mds-typography-font-weight-thin: 100 !default;
144
+ $mds-typography-letter-spacing-none: 0rem !default; // Default, no tracking
145
+ $mds-typography-line-height-displays-d1: 6rem !default;
146
+ $mds-typography-line-height-displays-d2: 5.4rem !default;
147
+ $mds-typography-line-height-displays-d3: 4.8rem !default;
148
+ $mds-typography-line-height-displays-d4: 4.2rem !default;
149
+ $mds-typography-line-height-displays-d5: 3.6rem !default;
150
+ $mds-typography-line-height-displays-d6: 3rem !default;
151
+ $mds-typography-line-height-headings-h1: 3rem !default;
152
+ $mds-typography-line-height-headings-h2: 2.4rem !default;
153
+ $mds-typography-line-height-headings-h3: 2.1rem !default;
154
+ $mds-typography-line-height-headings-h4: 1.8rem !default;
155
+ $mds-typography-line-height-headings-h5: 1.5rem !default;
156
+ $mds-typography-line-height-headings-h6: 1.2rem !default;
157
+ $mds-typography-line-height-paragraph-base: 1.5rem !default;
158
+ $mds-typography-line-height-paragraph-lg: 2.5rem !default;
159
+ $mds-typography-line-height-paragraph-sm: 1.0875rem !default;
package/tokens/scss/_shadows.scss CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
- $mds-color-lg: rgba(0, 0, 0, 0.2);
5
- $mds-color-md: rgba(0, 0, 0, 0.2);
6
- $mds-color-sm: rgba(0, 0, 0, 0.1);
7
- $mds-blur-lg: 3rem;
8
- $mds-blur-md: 1rem;
9
- $mds-blur-sm: 0.25rem;
10
- $mds-offset-lg: 1rem;
11
- $mds-offset-md: 0.5rem;
12
- $mds-offset-sm: 0.125rem;
4
+ $mds-color-lg: rgba(0, 0, 0, 0.2) !default;
5
+ $mds-color-md: rgba(0, 0, 0, 0.2) !default;
6
+ $mds-color-sm: rgba(0, 0, 0, 0.1) !default;
7
+ $mds-blur-lg: 3rem !default;
8
+ $mds-blur-md: 1rem !default;
9
+ $mds-blur-sm: 0.25rem !default;
10
+ $mds-offset-lg: 1rem !default;
11
+ $mds-offset-md: 0.5rem !default;
12
+ $mds-offset-sm: 0.125rem !default;
package/tokens/scss/_sizes.scss CHANGED
@@ -1,10 +1,10 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
- $mds-icons-lg: 1.25rem;
5
- $mds-icons-md: 1rem;
6
- $mds-icons-sm: 0.75rem;
7
- $mds-icons-xl: 1.5rem;
8
- $mds-icons-xs: 0.5rem;
9
- $mds-icons-xxl: 2rem;
10
- $mds-icons-xxxl: 3rem;
4
+ $mds-icons-lg: 1.25rem !default;
5
+ $mds-icons-md: 1rem !default;
6
+ $mds-icons-sm: 0.75rem !default;
7
+ $mds-icons-xl: 1.5rem !default;
8
+ $mds-icons-xs: 0.5rem !default;
9
+ $mds-icons-xxl: 2rem !default;
10
+ $mds-icons-xxxl: 3rem !default;
package/tokens/scss/_spacing.scss CHANGED
@@ -1,11 +1,11 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
- $mds-spacing-lg: 1.25rem;
5
- $mds-spacing-md: 1rem;
6
- $mds-spacing-none: 0rem;
7
- $mds-spacing-sm: 0.75rem;
8
- $mds-spacing-xl: 2rem;
9
- $mds-spacing-xs: 0.5rem;
10
- $mds-spacing-xxl: 3rem;
11
- $mds-spacing-xxs: 0.25rem;
4
+ $mds-spacing-lg: 1.25rem !default;
5
+ $mds-spacing-md: 1rem !default;
6
+ $mds-spacing-none: 0rem !default;
7
+ $mds-spacing-sm: 0.75rem !default;
8
+ $mds-spacing-xl: 2rem !default;
9
+ $mds-spacing-xs: 0.5rem !default;
10
+ $mds-spacing-xxl: 3rem !default;
11
+ $mds-spacing-xxs: 0.25rem !default;
package/tokens/scss/_typography.scss CHANGED
@@ -1,44 +1,44 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
- $mds-font-family-base: Roboto; // Default typeface for all UI text. Ensures global consistency.
5
- $mds-font-family-code: Menlo; // Typeface for code, preformatted text, or monospace contexts.
6
- $mds-font-size-displays-1: 5rem; // Display style, largest.
7
- $mds-font-size-displays-2: 4.5rem; // Display style, extra-large.
8
- $mds-font-size-displays-3: 4rem; // Display style, large.
9
- $mds-font-size-displays-4: 3.5rem; // Display style, medium-large.
10
- $mds-font-size-displays-5: 3rem; // Display style, medium.
11
- $mds-font-size-displays-6: 2.5rem; // Display style, smaller display.
12
- $mds-font-size-headings-1: 2.5rem; // Font size for H1 headings.
13
- $mds-font-size-headings-2: 2rem; // Font size for H2 headings.
14
- $mds-font-size-headings-3: 1.75rem; // Font size for H3 headings.
15
- $mds-font-size-headings-4: 1.5rem; // Font size for H4 headings.
16
- $mds-font-size-headings-5: 1.25rem; // Font size for H5 headings.
17
- $mds-font-size-headings-6: 1rem; // Font size for H6 headings.
18
- $mds-font-size-paragraph-default: 1rem; // Base size for body text.
19
- $mds-font-size-paragraph-lead: 1.25rem; // Slightly larger body text, for lead paragraphs.
20
- $mds-font-size-paragraph-small: 0.875rem; // Reduced size for secondary text.
21
- $mds-font-weight-bold: 700;
22
- $mds-font-weight-light: 300;
23
- $mds-font-weight-medium: 500;
24
- $mds-font-weight-regular: 400;
25
- $mds-font-weight-semibold: 600;
26
- $mds-letter-spacing-default: 0rem; // Standard tracking for all texts.
27
- $mds-line-height-displays-1: 6rem;
28
- $mds-line-height-displays-2: 5.4rem;
29
- $mds-line-height-displays-3: 4.8rem;
30
- $mds-line-height-displays-4: 4.2rem;
31
- $mds-line-height-displays-5: 3.6rem;
32
- $mds-line-height-displays-6: 3rem;
33
- $mds-line-height-headings-1: 3rem; // Tight line height for headings.
34
- $mds-line-height-headings-2: 2.4rem; // Tight line height for headings.
35
- $mds-line-height-headings-3: 2.1rem; // Tight line height for headings.
36
- $mds-line-height-headings-4: 1.8rem; // Tight line height for headings.
37
- $mds-line-height-headings-5: 1.5rem; // Tight line height for headings.
38
- $mds-line-height-headings-6: 1.2rem; // Tight line height for headings.
39
- $mds-line-height-paragraph-default: 1.5rem; // Comfortable line height for paragraphs.
40
- $mds-line-height-paragraph-lead: 2.5rem; // Extended line height for large body text.
41
- $mds-line-height-paragraph-small: 1.0875rem; // Compact line height for small text.
42
- $mds-margin-bottom-display: 0rem; // Default margin below a Displays.
43
- $mds-margin-bottom-heading: 0.5rem; // Default margin below a Headings.
44
- $mds-margin-bottom-paragraph: 1rem; // Default margin below a paragraph.
4
+ $mds-font-family-base: Roboto !default; // Default typeface for all UI text. Ensures global consistency.
5
+ $mds-font-family-code: Menlo !default; // Typeface for code, preformatted text, or monospace contexts.
6
+ $mds-font-size-displays-1: 5rem !default; // Display style, largest.
7
+ $mds-font-size-displays-2: 4.5rem !default; // Display style, extra-large.
8
+ $mds-font-size-displays-3: 4rem !default; // Display style, large.
9
+ $mds-font-size-displays-4: 3.5rem !default; // Display style, medium-large.
10
+ $mds-font-size-displays-5: 3rem !default; // Display style, medium.
11
+ $mds-font-size-displays-6: 2.5rem !default; // Display style, smaller display.
12
+ $mds-font-size-headings-1: 2.5rem !default; // Font size for H1 headings.
13
+ $mds-font-size-headings-2: 2rem !default; // Font size for H2 headings.
14
+ $mds-font-size-headings-3: 1.75rem !default; // Font size for H3 headings.
15
+ $mds-font-size-headings-4: 1.5rem !default; // Font size for H4 headings.
16
+ $mds-font-size-headings-5: 1.25rem !default; // Font size for H5 headings.
17
+ $mds-font-size-headings-6: 1rem !default; // Font size for H6 headings.
18
+ $mds-font-size-paragraph-default: 1rem !default; // Base size for body text.
19
+ $mds-font-size-paragraph-lead: 1.25rem !default; // Slightly larger body text, for lead paragraphs.
20
+ $mds-font-size-paragraph-small: 0.875rem !default; // Reduced size for secondary text.
21
+ $mds-font-weight-bold: 700 !default;
22
+ $mds-font-weight-light: 300 !default;
23
+ $mds-font-weight-medium: 500 !default;
24
+ $mds-font-weight-regular: 400 !default;
25
+ $mds-font-weight-semibold: 600 !default;
26
+ $mds-letter-spacing-default: 0rem !default; // Standard tracking for all texts.
27
+ $mds-line-height-displays-1: 6rem !default;
28
+ $mds-line-height-displays-2: 5.4rem !default;
29
+ $mds-line-height-displays-3: 4.8rem !default;
30
+ $mds-line-height-displays-4: 4.2rem !default;
31
+ $mds-line-height-displays-5: 3.6rem !default;
32
+ $mds-line-height-displays-6: 3rem !default;
33
+ $mds-line-height-headings-1: 3rem !default; // Tight line height for headings.
34
+ $mds-line-height-headings-2: 2.4rem !default; // Tight line height for headings.
35
+ $mds-line-height-headings-3: 2.1rem !default; // Tight line height for headings.
36
+ $mds-line-height-headings-4: 1.8rem !default; // Tight line height for headings.
37
+ $mds-line-height-headings-5: 1.5rem !default; // Tight line height for headings.
38
+ $mds-line-height-headings-6: 1.2rem !default; // Tight line height for headings.
39
+ $mds-line-height-paragraph-default: 1.5rem !default; // Comfortable line height for paragraphs.
40
+ $mds-line-height-paragraph-lead: 2.5rem !default; // Extended line height for large body text.
41
+ $mds-line-height-paragraph-small: 1.0875rem !default; // Compact line height for small text.
42
+ $mds-margin-bottom-display: 0rem !default; // Default margin below a Displays.
43
+ $mds-margin-bottom-heading: 0.5rem !default; // Default margin below a Headings.
44
+ $mds-margin-bottom-paragraph: 1rem !default; // Default margin below a paragraph.