@almoamendev/ngx-md3 0.0.8 → 0.0.9

package/src/lib/styles/tokens/md-border-radius.scss

@@ -1,12 +1,12 @@
-:root {
-    --md-border-radius-none: 0em; // none
-    --md-border-radius-xsmall: 0.25em; // 4dp
-    --md-border-radius-small: 0.5em; // 8dp
-    --md-border-radius-medium: 0.75em; // 12dp
-    --md-border-radius-large: 1em; // 16dp
-    --md-border-radius-large-i: 1.25em; // 20dp
-    --md-border-radius-xlarge: 1.75em; // 28dp
-    --md-border-radius-xlarge-i: 2em; // 32dp
-    --md-border-radius-xxlarge: 3em; // 48dp
-    --md-border-radius-rounded: calc(50vh + 50vw); // full
+:root {
+    --md-border-radius-none: 0em; // none
+    --md-border-radius-xsmall: 0.25em; // 4dp
+    --md-border-radius-small: 0.5em; // 8dp
+    --md-border-radius-medium: 0.75em; // 12dp
+    --md-border-radius-large: 1em; // 16dp
+    --md-border-radius-large-i: 1.25em; // 20dp
+    --md-border-radius-xlarge: 1.75em; // 28dp
+    --md-border-radius-xlarge-i: 2em; // 32dp
+    --md-border-radius-xxlarge: 3em; // 48dp
+    --md-border-radius-rounded: calc(50vh + 50vw); // full
 }

package/src/lib/styles/tokens/md-elevation.scss

@@ -1,25 +1,25 @@
-:root {
-    --md-shadow-0dp: rgba(var(--md-scheme-shadow), 0.2) 0 0 0 0,
-                     rgba(var(--md-scheme-shadow), 0.14) 0 0 0 0,
-                     rgba(var(--md-scheme-shadow), 0.12) 0 0 0 0;
-
-    --md-shadow-1dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.125em 0.0625em -0.0625em,
-                     rgba(var(--md-scheme-shadow), 0.14) 0 0.0625em 0.0625em 0,
-                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 0.1875em 0;
-
-    --md-shadow-3dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.1875em 0.1875em -0.125em,
-                     rgba(var(--md-scheme-shadow), 0.14) 0 0.1875em 0.25em 0,
-                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 0.5em 0;
-
-    --md-shadow-6dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.1875em 0.3125em -0.0625em,
-                     rgba(var(--md-scheme-shadow), 0.14) 0 0.375em 0.625em 0,
-                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 1.125em 0;
-
-    --md-shadow-8dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.3125em 0.3125em -0.1875em,
-                     rgba(var(--md-scheme-shadow), 0.14) 0 0.5em 0.625em 0.0625em,
-                     rgba(var(--md-scheme-shadow), 0.12) 0 0.1875em 0.875em 0.125em;
-
-    --md-shadow-12dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.4375em 0.5em -0.25em,
-                      rgba(var(--md-scheme-shadow), 0.14) 0 0.75em 1.0625em 0.125em,
-                      rgba(var(--md-scheme-shadow), 0.12) 0 0.3125em 1.375em 0.25em;
+:root {
+    --md-shadow-0dp: rgba(var(--md-scheme-shadow), 0.2) 0 0 0 0,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0 0 0,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0 0 0;
+
+    --md-shadow-1dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.125em 0.0625em -0.0625em,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0.0625em 0.0625em 0,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 0.1875em 0;
+
+    --md-shadow-3dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.1875em 0.1875em -0.125em,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0.1875em 0.25em 0,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 0.5em 0;
+
+    --md-shadow-6dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.1875em 0.3125em -0.0625em,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0.375em 0.625em 0,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 1.125em 0;
+
+    --md-shadow-8dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.3125em 0.3125em -0.1875em,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0.5em 0.625em 0.0625em,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0.1875em 0.875em 0.125em;
+
+    --md-shadow-12dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.4375em 0.5em -0.25em,
+                      rgba(var(--md-scheme-shadow), 0.14) 0 0.75em 1.0625em 0.125em,
+                      rgba(var(--md-scheme-shadow), 0.12) 0 0.3125em 1.375em 0.25em;
 }

package/src/lib/styles/tokens/md-motion.scss

@@ -1,47 +1,47 @@
-:root {
-    /* Expressive – spatial */
-    --md-motion-expressive-fast-spatial-duration: 350ms;
-    // --md-motion-expressive-fast-spatial-easing: cubic-bezier(0.42, 1.67, 0.21, 0.90);
-    --md-motion-expressive-fast-spatial-easing: cubic-bezier(0.20, 1.40, 0.20, 1.10);
-
-    --md-motion-expressive-default-spatial-duration: 500ms;
-    // --md-motion-expressive-default-spatial-easing: cubic-bezier(0.38, 1.21, 0.22, 1.00);
-    --md-motion-expressive-default-spatial-easing: cubic-bezier(0.25, 1.15, 0.20, 1.05);
-
-    --md-motion-expressive-slow-spatial-duration: 650ms;
-    // --md-motion-expressive-slow-spatial-easing: cubic-bezier(0.39, 1.29, 0.35, 0.98);
-    --md-motion-expressive-slow-spatial-easing: cubic-bezier(0.30, 1.02, 0.22, 1.00);
-
-    /* Expressive – effects */
-    --md-motion-expressive-fast-effects-duration: 150ms;
-    // --md-motion-expressive-fast-effects-easing: cubic-bezier(0.31, 0.94, 0.34, 1.00);
-    --md-motion-expressive-fast-effects-easing: cubic-bezier(0.20, 1.30, 0.30, 1.10);
-
-    --md-motion-expressive-default-effects-duration: 200ms;
-    // --md-motion-expressive-default-effects-easing: cubic-bezier(0.34, 0.80, 0.34, 1.00);
-    --md-motion-expressive-default-effects-easing: cubic-bezier(0.25, 1.10, 0.25, 1.05);
-
-    --md-motion-expressive-slow-effects-duration: 300ms;
-    // --md-motion-expressive-slow-effects-easing: cubic-bezier(0.34, 0.88, 0.34, 1.00);
-    --md-motion-expressive-slow-effects-easing: cubic-bezier(0.30, 1.02, 0.30, 1.00);
-
-    /* Standard – spatial */
-    --md-motion-standard-fast-spatial-duration: 350ms;
-    --md-motion-standard-fast-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
-
-    --md-motion-standard-default-spatial-duration: 500ms;
-    --md-motion-standard-default-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
-
-    --md-motion-standard-slow-spatial-duration: 750ms;
-    --md-motion-standard-slow-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
-
-    /* Standard – effects */
-    --md-motion-standard-fast-effects-duration: 150ms;
-    --md-motion-standard-fast-effects-easing: cubic-bezier(0.31, 0.94, 0.34, 1.00);
-
-    --md-motion-standard-default-effects-duration: 200ms;
-    --md-motion-standard-default-effects-easing: cubic-bezier(0.34, 0.80, 0.34, 1.00);
-
-    --md-motion-standard-slow-effects-duration: 300ms;
-    --md-motion-standard-slow-effects-easing: cubic-bezier(0.34, 0.88, 0.34, 1.00);
+:root {
+    /* Expressive – spatial */
+    --md-motion-expressive-fast-spatial-duration: 350ms;
+    // --md-motion-expressive-fast-spatial-easing: cubic-bezier(0.42, 1.67, 0.21, 0.90);
+    --md-motion-expressive-fast-spatial-easing: cubic-bezier(0.20, 1.40, 0.20, 1.10);
+
+    --md-motion-expressive-default-spatial-duration: 500ms;
+    // --md-motion-expressive-default-spatial-easing: cubic-bezier(0.38, 1.21, 0.22, 1.00);
+    --md-motion-expressive-default-spatial-easing: cubic-bezier(0.25, 1.15, 0.20, 1.05);
+
+    --md-motion-expressive-slow-spatial-duration: 650ms;
+    // --md-motion-expressive-slow-spatial-easing: cubic-bezier(0.39, 1.29, 0.35, 0.98);
+    --md-motion-expressive-slow-spatial-easing: cubic-bezier(0.30, 1.02, 0.22, 1.00);
+
+    /* Expressive – effects */
+    --md-motion-expressive-fast-effects-duration: 150ms;
+    // --md-motion-expressive-fast-effects-easing: cubic-bezier(0.31, 0.94, 0.34, 1.00);
+    --md-motion-expressive-fast-effects-easing: cubic-bezier(0.20, 1.30, 0.30, 1.10);
+
+    --md-motion-expressive-default-effects-duration: 200ms;
+    // --md-motion-expressive-default-effects-easing: cubic-bezier(0.34, 0.80, 0.34, 1.00);
+    --md-motion-expressive-default-effects-easing: cubic-bezier(0.25, 1.10, 0.25, 1.05);
+
+    --md-motion-expressive-slow-effects-duration: 300ms;
+    // --md-motion-expressive-slow-effects-easing: cubic-bezier(0.34, 0.88, 0.34, 1.00);
+    --md-motion-expressive-slow-effects-easing: cubic-bezier(0.30, 1.02, 0.30, 1.00);
+
+    /* Standard – spatial */
+    --md-motion-standard-fast-spatial-duration: 350ms;
+    --md-motion-standard-fast-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
+
+    --md-motion-standard-default-spatial-duration: 500ms;
+    --md-motion-standard-default-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
+
+    --md-motion-standard-slow-spatial-duration: 750ms;
+    --md-motion-standard-slow-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
+
+    /* Standard – effects */
+    --md-motion-standard-fast-effects-duration: 150ms;
+    --md-motion-standard-fast-effects-easing: cubic-bezier(0.31, 0.94, 0.34, 1.00);
+
+    --md-motion-standard-default-effects-duration: 200ms;
+    --md-motion-standard-default-effects-easing: cubic-bezier(0.34, 0.80, 0.34, 1.00);
+
+    --md-motion-standard-slow-effects-duration: 300ms;
+    --md-motion-standard-slow-effects-easing: cubic-bezier(0.34, 0.88, 0.34, 1.00);
 }

package/src/lib/styles/tokens/md-scheme.scss

@@ -1,143 +1,143 @@
-:root, .md-scheme-light {
-    /* Primary */
-    --md-scheme-primary: 92, 77, 212; /* P-40 */
-    --md-scheme-on-primary: 255, 255, 255; /* P-100 */
-    --md-scheme-primary-container: 224, 217, 255; /* P-90 */
-    --md-scheme-on-primary-container: 28, 14, 90; /* P-30 */
-
-    /* Secondary */
-    --md-scheme-secondary: 89, 84, 106; /* S-40 */
-    --md-scheme-on-secondary: 255, 255, 255; /* S-100 */
-    --md-scheme-secondary-container: 221, 216, 232; /* S-90 */
-    --md-scheme-on-secondary-container: 28, 24, 40; /* S-30 */
-
-    /* Tertiary */
-    --md-scheme-tertiary: 122, 85, 102; /* T-40 */
-    --md-scheme-on-tertiary: 255, 255, 255; /* T-100 */
-    --md-scheme-tertiary-container: 255, 217, 229; /* T-90 */
-    --md-scheme-on-tertiary-container: 44, 21, 33; /* T-30 */
-
-    /* Primary Fixed */
-    --md-scheme-primary-fixed: 224, 217, 255; /* P-90 */
-    --md-scheme-primary-fixed-dim: 199, 191, 255; /* P-80 */
-    --md-scheme-on-primary-fixed: 27, 13, 89; /* P-20 */
-    --md-scheme-on-primary-fixed-variant: 74, 62, 169; /* P-40 */
-
-    /* Secondary Fixed */
-    --md-scheme-secondary-fixed: 221, 216, 232; /* S-90 */
-    --md-scheme-secondary-fixed-dim: 200, 194, 217; /* S-80 */
-    --md-scheme-on-secondary-fixed: 28, 24, 40; /* S-20 */
-    --md-scheme-on-secondary-fixed-variant: 69, 63, 82; /* S-40 */
-
-    /* Tertiary Fixed */
-    --md-scheme-tertiary-fixed: 255, 217, 229; /* T-90 */
-    --md-scheme-tertiary-fixed-dim: 224, 189, 209; /* T-80 */
-    --md-scheme-on-tertiary-fixed: 44, 21, 33; /* T-20 */
-    --md-scheme-on-tertiary-fixed-variant: 89, 59, 75; /* T-40 */
-
-    /* Error */
-    --md-scheme-error: 186, 26, 26; /* E-40 */
-    --md-scheme-on-error: 255, 255, 255; /* E-100 */
-    --md-scheme-error-container: 255, 218, 214; /* E-90 */
-    --md-scheme-on-error-container: 65, 0, 2; /* E-30 */
-
-    /* Surface */
-    --md-scheme-surface-dim: 226, 224, 235; /* N-87 */
-    --md-scheme-surface: 247, 246, 250; /* N-98 */
-    --md-scheme-surface-bright: 247, 246, 250; /* N-98 */
-
-    --md-scheme-surface-container-lowest: 255, 255, 255; /* N-100 */
-    --md-scheme-surface-container-low: 242, 239, 248; /* N-96 */
-    --md-scheme-surface-container: 236, 232, 241; /* N-94 */
-    --md-scheme-surface-container-high: 230, 226, 236; /* N-92 */
-    --md-scheme-surface-container-highest: 224, 221, 231; /* N-90 */
-
-    /* On-Surface */
-    --md-scheme-on-surface: 26, 26, 30; /* N-10 */
-    --md-scheme-on-surface-variant: 73, 69, 79; /* NV-30 */
-
-    /* Outline */
-    --md-scheme-outline: 121, 116, 126; /* NV-50 */
-    --md-scheme-outline-variant: 202, 196, 208; /* NV-80 */
-
-    /* Inverse */
-    --md-scheme-inverse-surface: 52, 48, 52; /* N-20 */
-    --md-scheme-inverse-on-surface: 250, 248, 253; /* N-95 */
-    --md-scheme-inverse-primary: 92, 77, 212; /* P-80 */
-
-    /* Other */
-    --md-scheme-scrim: 0, 0, 0;
-    --md-scheme-shadow: 0, 0, 0;
-}
-
-.md-scheme-dark {
-    /* Primary */
-    --md-scheme-primary: 199, 191, 255; /* P-80 */
-    --md-scheme-on-primary: 55, 30, 146; /* P-20 */
-    --md-scheme-primary-container: 74, 62, 169; /* P-30 */
-    --md-scheme-on-primary-container: 224, 217, 255; /* P-90 */
-
-    /* Secondary */
-    --md-scheme-secondary: 200, 194, 217; /* S-80 */
-    --md-scheme-on-secondary: 48, 44, 63; /* S-20 */
-    --md-scheme-secondary-container: 69, 63, 82; /* S-30 */
-    --md-scheme-on-secondary-container: 221, 216, 232; /* S-90 */
-
-    /* Tertiary */
-    --md-scheme-tertiary: 224, 189, 209; /* T-80 */
-    --md-scheme-on-tertiary: 68, 37, 54; /* T-20 */
-    --md-scheme-tertiary-container: 89, 59, 75; /* T-30 */
-    --md-scheme-on-tertiary-container: 255, 217, 229; /* T-90 */
-
-    /* Primary Fixed */
-    --md-scheme-primary-fixed: 224, 217, 255; /* P-90 (same as light) */
-    --md-scheme-primary-fixed-dim: 199, 191, 255; /* P-80 */
-    --md-scheme-on-primary-fixed: 28, 14, 90; /* P-20 */
-    --md-scheme-on-primary-fixed-variant: 224, 217, 255; /* stays same */
-
-    /* Secondary Fixed */
-    --md-scheme-secondary-fixed: 221, 216, 232; /* S-90 */
-    --md-scheme-secondary-fixed-dim: 200, 194, 217; /* S-80 */
-    --md-scheme-on-secondary-fixed: 28, 24, 40; /* S-20 */
-    --md-scheme-on-secondary-fixed-variant: 221, 216, 232; 
-
-    /* Tertiary Fixed */
-    --md-scheme-tertiary-fixed: 255, 217, 229; /* T-90 */
-    --md-scheme-tertiary-fixed-dim: 224, 189, 209; /* T-80 */
-    --md-scheme-on-tertiary-fixed: 44, 21, 33; /* T-20 */
-    --md-scheme-on-tertiary-fixed-variant: 255, 217, 229; 
-
-    /* Error */
-    --md-scheme-error: 255, 180, 171; /* E-80 */
-    --md-scheme-on-error: 105, 0, 5; /* E-20 */
-    --md-scheme-error-container: 147, 0, 10; /* E-30 */
-    --md-scheme-on-error-container: 255, 218, 214; /* E-90 */
-
-    /* Surface */
-    --md-scheme-surface-dim: 20, 18, 24; /* N-6 */
-    --md-scheme-surface: 20, 18, 24; /* N-6 */
-    --md-scheme-surface-bright: 58, 56, 62; /* N-24 */
-
-    --md-scheme-surface-container-lowest: 15, 15, 17; /* N-4 */
-    --md-scheme-surface-container-low: 29, 26, 33; /* N-10 */
-    --md-scheme-surface-container: 35, 31, 39; /* N-12 */
-    --md-scheme-surface-container-high: 43, 39, 48; /* N-17 */
-    --md-scheme-surface-container-highest: 53, 49, 58; /* N-22 */
-
-    /* On-Surface */
-    --md-scheme-on-surface: 230, 225, 232; /* N-90 */
-    --md-scheme-on-surface-variant: 202, 196, 208; /* NV-80 */
-
-    /* Outline */
-    --md-scheme-outline: 147, 143, 153; /* NV-60 */
-    --md-scheme-outline-variant: 73, 69, 79; /* NV-30 */
-
-    /* Inverse */
-    --md-scheme-inverse-surface: 230, 225, 232; /* N-90 */
-    --md-scheme-inverse-on-surface: 29, 26, 33; /* N-20 */
-    --md-scheme-inverse-primary: 92, 77, 212; /* P-40 */
-
-    /* Other */
-    --md-scheme-scrim: 0, 0, 0;
-    --md-scheme-shadow: 0, 0, 0;
-}
+:root, .md-scheme-light {
+    /* Primary */
+    --md-scheme-primary: 92, 77, 212; /* P-40 */
+    --md-scheme-on-primary: 255, 255, 255; /* P-100 */
+    --md-scheme-primary-container: 224, 217, 255; /* P-90 */
+    --md-scheme-on-primary-container: 28, 14, 90; /* P-30 */
+
+    /* Secondary */
+    --md-scheme-secondary: 89, 84, 106; /* S-40 */
+    --md-scheme-on-secondary: 255, 255, 255; /* S-100 */
+    --md-scheme-secondary-container: 221, 216, 232; /* S-90 */
+    --md-scheme-on-secondary-container: 28, 24, 40; /* S-30 */
+
+    /* Tertiary */
+    --md-scheme-tertiary: 122, 85, 102; /* T-40 */
+    --md-scheme-on-tertiary: 255, 255, 255; /* T-100 */
+    --md-scheme-tertiary-container: 255, 217, 229; /* T-90 */
+    --md-scheme-on-tertiary-container: 44, 21, 33; /* T-30 */
+
+    /* Primary Fixed */
+    --md-scheme-primary-fixed: 224, 217, 255; /* P-90 */
+    --md-scheme-primary-fixed-dim: 199, 191, 255; /* P-80 */
+    --md-scheme-on-primary-fixed: 27, 13, 89; /* P-20 */
+    --md-scheme-on-primary-fixed-variant: 74, 62, 169; /* P-40 */
+
+    /* Secondary Fixed */
+    --md-scheme-secondary-fixed: 221, 216, 232; /* S-90 */
+    --md-scheme-secondary-fixed-dim: 200, 194, 217; /* S-80 */
+    --md-scheme-on-secondary-fixed: 28, 24, 40; /* S-20 */
+    --md-scheme-on-secondary-fixed-variant: 69, 63, 82; /* S-40 */
+
+    /* Tertiary Fixed */
+    --md-scheme-tertiary-fixed: 255, 217, 229; /* T-90 */
+    --md-scheme-tertiary-fixed-dim: 224, 189, 209; /* T-80 */
+    --md-scheme-on-tertiary-fixed: 44, 21, 33; /* T-20 */
+    --md-scheme-on-tertiary-fixed-variant: 89, 59, 75; /* T-40 */
+
+    /* Error */
+    --md-scheme-error: 186, 26, 26; /* E-40 */
+    --md-scheme-on-error: 255, 255, 255; /* E-100 */
+    --md-scheme-error-container: 255, 218, 214; /* E-90 */
+    --md-scheme-on-error-container: 65, 0, 2; /* E-30 */
+
+    /* Surface */
+    --md-scheme-surface-dim: 226, 224, 235; /* N-87 */
+    --md-scheme-surface: 247, 246, 250; /* N-98 */
+    --md-scheme-surface-bright: 247, 246, 250; /* N-98 */
+
+    --md-scheme-surface-container-lowest: 255, 255, 255; /* N-100 */
+    --md-scheme-surface-container-low: 242, 239, 248; /* N-96 */
+    --md-scheme-surface-container: 236, 232, 241; /* N-94 */
+    --md-scheme-surface-container-high: 230, 226, 236; /* N-92 */
+    --md-scheme-surface-container-highest: 224, 221, 231; /* N-90 */
+
+    /* On-Surface */
+    --md-scheme-on-surface: 26, 26, 30; /* N-10 */
+    --md-scheme-on-surface-variant: 73, 69, 79; /* NV-30 */
+
+    /* Outline */
+    --md-scheme-outline: 121, 116, 126; /* NV-50 */
+    --md-scheme-outline-variant: 202, 196, 208; /* NV-80 */
+
+    /* Inverse */
+    --md-scheme-inverse-surface: 52, 48, 52; /* N-20 */
+    --md-scheme-inverse-on-surface: 250, 248, 253; /* N-95 */
+    --md-scheme-inverse-primary: 92, 77, 212; /* P-80 */
+
+    /* Other */
+    --md-scheme-scrim: 0, 0, 0;
+    --md-scheme-shadow: 0, 0, 0;
+}
+
+.md-scheme-dark {
+    /* Primary */
+    --md-scheme-primary: 199, 191, 255; /* P-80 */
+    --md-scheme-on-primary: 55, 30, 146; /* P-20 */
+    --md-scheme-primary-container: 74, 62, 169; /* P-30 */
+    --md-scheme-on-primary-container: 224, 217, 255; /* P-90 */
+
+    /* Secondary */
+    --md-scheme-secondary: 200, 194, 217; /* S-80 */
+    --md-scheme-on-secondary: 48, 44, 63; /* S-20 */
+    --md-scheme-secondary-container: 69, 63, 82; /* S-30 */
+    --md-scheme-on-secondary-container: 221, 216, 232; /* S-90 */
+
+    /* Tertiary */
+    --md-scheme-tertiary: 224, 189, 209; /* T-80 */
+    --md-scheme-on-tertiary: 68, 37, 54; /* T-20 */
+    --md-scheme-tertiary-container: 89, 59, 75; /* T-30 */
+    --md-scheme-on-tertiary-container: 255, 217, 229; /* T-90 */
+
+    /* Primary Fixed */
+    --md-scheme-primary-fixed: 224, 217, 255; /* P-90 (same as light) */
+    --md-scheme-primary-fixed-dim: 199, 191, 255; /* P-80 */
+    --md-scheme-on-primary-fixed: 28, 14, 90; /* P-20 */
+    --md-scheme-on-primary-fixed-variant: 224, 217, 255; /* stays same */
+
+    /* Secondary Fixed */
+    --md-scheme-secondary-fixed: 221, 216, 232; /* S-90 */
+    --md-scheme-secondary-fixed-dim: 200, 194, 217; /* S-80 */
+    --md-scheme-on-secondary-fixed: 28, 24, 40; /* S-20 */
+    --md-scheme-on-secondary-fixed-variant: 221, 216, 232; 
+
+    /* Tertiary Fixed */
+    --md-scheme-tertiary-fixed: 255, 217, 229; /* T-90 */
+    --md-scheme-tertiary-fixed-dim: 224, 189, 209; /* T-80 */
+    --md-scheme-on-tertiary-fixed: 44, 21, 33; /* T-20 */
+    --md-scheme-on-tertiary-fixed-variant: 255, 217, 229; 
+
+    /* Error */
+    --md-scheme-error: 255, 180, 171; /* E-80 */
+    --md-scheme-on-error: 105, 0, 5; /* E-20 */
+    --md-scheme-error-container: 147, 0, 10; /* E-30 */
+    --md-scheme-on-error-container: 255, 218, 214; /* E-90 */
+
+    /* Surface */
+    --md-scheme-surface-dim: 20, 18, 24; /* N-6 */
+    --md-scheme-surface: 20, 18, 24; /* N-6 */
+    --md-scheme-surface-bright: 58, 56, 62; /* N-24 */
+
+    --md-scheme-surface-container-lowest: 15, 15, 17; /* N-4 */
+    --md-scheme-surface-container-low: 29, 26, 33; /* N-10 */
+    --md-scheme-surface-container: 35, 31, 39; /* N-12 */
+    --md-scheme-surface-container-high: 43, 39, 48; /* N-17 */
+    --md-scheme-surface-container-highest: 53, 49, 58; /* N-22 */
+
+    /* On-Surface */
+    --md-scheme-on-surface: 230, 225, 232; /* N-90 */
+    --md-scheme-on-surface-variant: 202, 196, 208; /* NV-80 */
+
+    /* Outline */
+    --md-scheme-outline: 147, 143, 153; /* NV-60 */
+    --md-scheme-outline-variant: 73, 69, 79; /* NV-30 */
+
+    /* Inverse */
+    --md-scheme-inverse-surface: 230, 225, 232; /* N-90 */
+    --md-scheme-inverse-on-surface: 29, 26, 33; /* N-20 */
+    --md-scheme-inverse-primary: 92, 77, 212; /* P-40 */
+
+    /* Other */
+    --md-scheme-scrim: 0, 0, 0;
+    --md-scheme-shadow: 0, 0, 0;
+}

package/src/lib/styles/typography/type-body.spec.ts

@@ -1,28 +1,28 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { TypeBody } from './type-body';
-
-@Component({
-    imports: [TypeBody],
-    template: `<md3-type-body></md3-type-body>`,
-})
-class HostComponent { }
-
-describe('TypeBody', () => {
-    let fixture: ComponentFixture<HostComponent>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [HostComponent],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(HostComponent);
-        fixture.detectChanges();
-    });
-
-    it('should create an instance', () => {
-        const directive = fixture.debugElement.query(By.directive(TypeBody)).injector.get(TypeBody);
-        expect(directive).toBeTruthy();
-    });
-});
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TypeBody } from './type-body';
+
+@Component({
+    imports: [TypeBody],
+    template: `<md3-type-body></md3-type-body>`,
+})
+class HostComponent { }
+
+describe('TypeBody', () => {
+    let fixture: ComponentFixture<HostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HostComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        const directive = fixture.debugElement.query(By.directive(TypeBody)).injector.get(TypeBody);
+        expect(directive).toBeTruthy();
+    });
+});

package/src/lib/styles/typography/type-body.ts

@@ -1,42 +1,42 @@
-import { booleanAttribute, Directive, effect, ElementRef, input } from '@angular/core';
-import { TextColor } from '../../types/text-color.type';
-import { TextSize } from '../../types/text-size.type';
-
-@Directive({
-    selector: 'md3-type-body, [md3-type-body]',
-    host: {
-        'class': 'md3-text-body',
-        '[class.md3-emphasized]': 'emphasized()',
-    }
-})
-export class TypeBody {
-    public size = input<TextSize | 'default'>('default');
-    public color = input<TextColor | 'default'>('default');
-    public emphasized = input<boolean, unknown>(false, {
-        transform: booleanAttribute,
-    });
-
-    constructor(public el: ElementRef) {
-        effect((onCleanup) => {
-            const size = 'md3-text-' + this.size();
-            this.element.classList.add(size);
-
-            onCleanup(() => {
-                this.element.classList.remove(size);
-            });
-        });
-
-        effect((onCleanup) => {
-            const color = 'md3-color-' + this.color();
-            this.element.classList.add(color);
-
-            onCleanup(() => {
-                this.element.classList.remove(color);
-            });
-        });
-    }
-
-    public get element(): HTMLElement {
-        return this.el.nativeElement as HTMLElement;
-    }
-}
+import { booleanAttribute, Directive, effect, ElementRef, input } from '@angular/core';
+import { TextColor } from '../../types/text-color.type';
+import { TextSize } from '../../types/text-size.type';
+
+@Directive({
+    selector: 'md3-type-body, [md3-type-body]',
+    host: {
+        'class': 'md3-text-body',
+        '[class.md3-emphasized]': 'emphasized()',
+    }
+})
+export class TypeBody {
+    public size = input<TextSize | 'default'>('default');
+    public color = input<TextColor | 'default'>('default');
+    public emphasized = input<boolean, unknown>(false, {
+        transform: booleanAttribute,
+    });
+
+    constructor(public el: ElementRef) {
+        effect((onCleanup) => {
+            const size = 'md3-text-' + this.size();
+            this.element.classList.add(size);
+
+            onCleanup(() => {
+                this.element.classList.remove(size);
+            });
+        });
+
+        effect((onCleanup) => {
+            const color = 'md3-color-' + this.color();
+            this.element.classList.add(color);
+
+            onCleanup(() => {
+                this.element.classList.remove(color);
+            });
+        });
+    }
+
+    public get element(): HTMLElement {
+        return this.el.nativeElement as HTMLElement;
+    }
+}