diff --git a/src/material/core/tokens/m2/_md-sys-color.scss b/src/material/core/tokens/m2/_md-sys-color.scss index 7e6c238cdaf6..a4c37db77bc5 100644 --- a/src/material/core/tokens/m2/_md-sys-color.scss +++ b/src/material/core/tokens/m2/_md-sys-color.scss @@ -1,8 +1,3 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - @use 'sass:map'; @use '../../m2/palette'; @@ -27,40 +22,38 @@ inverse-on-surface: rgba(black, 0.87), outline: rgba(white, 0.12), outline-variant: rgba(white, 0.38), - - // TBD - error-container: null, - on-background: null, - on-error-container: null, - on-primary-container: null, - on-primary-fixed: null, - on-primary-fixed-variant: null, - on-secondary-container: null, - on-secondary-fixed: null, - on-secondary-fixed-variant: null, - on-tertiary: null, - on-tertiary-container: null, - on-tertiary-fixed: null, - on-tertiary-fixed-variant: null, - primary-container: null, - primary-fixed: null, - primary-fixed-dim: null, - scrim: null, - secondary-container: null, - secondary-fixed: null, - secondary-fixed-dim: null, - surface-bright: null, - surface-container: null, - surface-container-high: null, - surface-container-highest: null, - surface-container-low: null, - surface-container-lowest: null, - surface-dim: null, - surface-tint: null, - tertiary: null, - tertiary-container: null, - tertiary-fixed: null, - tertiary-fixed-dim: null, + error-container: map.get($palettes, warn, default), + on-background: white, + on-error-container: map.get($palettes, warn, default-contrast), + on-primary-container: map.get($palettes, primary, default-contrast), + on-primary-fixed: map.get($palettes, primary, default-contrast), + on-primary-fixed-variant: map.get($palettes, primary, default-contrast), + on-secondary-container: map.get($palettes, accent, default), + on-secondary-fixed: map.get($palettes, accent, default), + on-secondary-fixed-variant: map.get($palettes, accent, default), + on-tertiary: map.get($palettes, accent, default-contrast), + on-tertiary-container: map.get($palettes, accent, default-contrast), + on-tertiary-fixed: map.get($palettes, accent, default-contrast), + on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast), + primary-container: map.get($palettes, primary, default), + primary-fixed: map.get($palettes, primary, default), + primary-fixed-dim: map.get($palettes, primary, default), + scrim: black, + secondary-container: map.get($palettes, accent, default-contrast), + secondary-fixed: map.get($palettes, accent, default-contrast), + secondary-fixed-dim: map.get($palettes, accent, default-contrast), + surface-bright: map.get(palette.$grey-palette, 800), + surface-container: map.get(palette.$grey-palette, 800), + surface-container-high: map.get(palette.$grey-palette, 800), + surface-container-highest: map.get(palette.$grey-palette, 800), + surface-container-low: map.get(palette.$grey-palette, 800), + surface-container-lowest: map.get(palette.$grey-palette, 800), + surface-dim: map.get(palette.$grey-palette, 800), + surface-tint: map.get(palette.$grey-palette, 800), + tertiary: map.get($palettes, accent, default), + tertiary-container: map.get($palettes, accent, default), + tertiary-fixed: map.get($palettes, accent, default), + tertiary-fixed-dim: map.get($palettes, accent, default), ); } @@ -85,39 +78,37 @@ inverse-on-surface: white, outline: rgba(black, 0.12), outline-variant: rgba(black, 0.38), - - // TBD - error-container: null, - on-background: null, - on-error-container: null, - on-primary-container: null, - on-primary-fixed: null, - on-primary-fixed-variant: null, - on-secondary-container: null, - on-secondary-fixed: null, - on-secondary-fixed-variant: null, - on-tertiary: null, - on-tertiary-container: null, - on-tertiary-fixed: null, - on-tertiary-fixed-variant: null, - primary-container: null, - primary-fixed: null, - primary-fixed-dim: null, - scrim: null, - secondary-container: null, - secondary-fixed: null, - secondary-fixed-dim: null, - surface-bright: null, - surface-container: null, - surface-container-high: null, - surface-container-highest: null, - surface-container-low: null, - surface-container-lowest: null, - surface-dim: null, - surface-tint: null, - tertiary: null, - tertiary-container: null, - tertiary-fixed: null, - tertiary-fixed-dim: null, + error-container: map.get($palettes, warn, default), + on-background: rgba(black, 0.87), + on-error-container: map.get($palettes, warn, default-contrast), + on-primary-container: map.get($palettes, primary, default-contrast), + on-primary-fixed: map.get($palettes, primary, default-contrast), + on-primary-fixed-variant: map.get($palettes, primary, default-contrast), + on-secondary-container: map.get($palettes, accent, default), + on-secondary-fixed: map.get($palettes, accent, default), + on-secondary-fixed-variant: map.get($palettes, accent, default), + on-tertiary: map.get($palettes, accent, default-contrast), + on-tertiary-container: map.get($palettes, accent, default-contrast), + on-tertiary-fixed: map.get($palettes, accent, default-contrast), + on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast), + primary-container: map.get($palettes, primary, default), + primary-fixed: map.get($palettes, primary, default), + primary-fixed-dim: map.get($palettes, primary, default), + scrim: black, + secondary-container: map.get($palettes, accent, default-contrast), + secondary-fixed: map.get($palettes, accent, default-contrast), + secondary-fixed-dim: map.get($palettes, accent, default-contrast), + surface-bright: map.get(palette.$grey-palette, 800), + surface-container: map.get(palette.$grey-palette, 800), + surface-container-high: map.get(palette.$grey-palette, 800), + surface-container-highest: map.get(palette.$grey-palette, 800), + surface-container-low: map.get(palette.$grey-palette, 800), + surface-container-lowest: map.get(palette.$grey-palette, 800), + surface-dim: map.get(palette.$grey-palette, 800), + surface-tint: map.get(palette.$grey-palette, 800), + tertiary: map.get($palettes, accent, default), + tertiary-container: map.get($palettes, accent, default), + tertiary-fixed: map.get($palettes, accent, default), + tertiary-fixed-dim: map.get($palettes, accent, default), ); } diff --git a/src/material/core/tokens/m2/_md-sys-elevation.scss b/src/material/core/tokens/m2/_md-sys-elevation.scss index 338dae2ea8e7..2986702a7776 100644 --- a/src/material/core/tokens/m2/_md-sys-elevation.scss +++ b/src/material/core/tokens/m2/_md-sys-elevation.scss @@ -1,16 +1,10 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - @function md-sys-elevation-values() { @return ( - // TBD - level0: null, - level1: null, - level2: null, - level3: null, - level4: null, - level5: null, + level0: 0, + level1: 1, + level2: 3, + level3: 6, + level4: 8, + level5: 12 ); } diff --git a/src/material/core/tokens/m2/_md-sys-motion.scss b/src/material/core/tokens/m2/_md-sys-motion.scss index 233682c6c359..b2a2c3da4c80 100644 --- a/src/material/core/tokens/m2/_md-sys-motion.scss +++ b/src/material/core/tokens/m2/_md-sys-motion.scss @@ -1,36 +1,30 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - @function md-sys-motion-values() { @return ( - // TBD - duration-extra-long1: null, - duration-extra-long2: null, - duration-extra-long3: null, - duration-extra-long4: null, - duration-long1: null, - duration-long2: null, - duration-long3: null, - duration-long4: null, - duration-medium1: null, - duration-medium2: null, - duration-medium3: null, - duration-medium4: null, - duration-short1: null, - duration-short2: null, - duration-short3: null, - duration-short4: null, - easing-emphasized: null, - easing-emphasized-accelerate: null, - easing-emphasized-decelerate: null, - easing-legacy: null, - easing-legacy-accelerate: null, - easing-legacy-decelerate: null, - easing-linear: null, - easing-standard: null, - easing-standard-accelerate: null, - easing-standard-decelerate: null, + duration-extra-long1: 700ms, + duration-extra-long2: 800ms, + duration-extra-long3: 900ms, + duration-extra-long4: 1000ms, + duration-long1: 450ms, + duration-long2: 500ms, + duration-long3: 550ms, + duration-long4: 600ms, + duration-medium1: 250ms, + duration-medium2: 300ms, + duration-medium3: 350ms, + duration-medium4: 400ms, + duration-short1: 50ms, + duration-short2: 100ms, + duration-short3: 150ms, + duration-short4: 200ms, + easing-emphasized: cubic-bezier(0.2, 0, 0, 1), + easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15), + easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1), + easing-legacy: cubic-bezier(0.4, 0, 0.2, 1), + easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1), + easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1), + easing-linear: cubic-bezier(0, 0, 1, 1), + easing-standard: cubic-bezier(0.2, 0, 0, 1), + easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1), + easing-standard-decelerate: cubic-bezier(0, 0, 0, 1) ); } diff --git a/src/material/core/tokens/m2/_md-sys-shape.scss b/src/material/core/tokens/m2/_md-sys-shape.scss index 17499bf4ee24..0f82a9b36800 100644 --- a/src/material/core/tokens/m2/_md-sys-shape.scss +++ b/src/material/core/tokens/m2/_md-sys-shape.scss @@ -1,22 +1,16 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - @function md-sys-shape-values() { @return ( - // TBD - corner-extra-large: null, - corner-extra-large-top: null, - corner-extra-small: null, - corner-extra-small-top: null, - corner-full: null, - corner-large: null, - corner-large-end: null, - corner-large-start: null, - corner-large-top: null, - corner-medium: null, - corner-none: null, - corner-small: null, + corner-extra-large: 28px, + corner-extra-large-top: (28px 28px 0 0), + corner-extra-small: 4px, + corner-extra-small-top: (4px 4px 0 0), + corner-full: 9999px, + corner-large: 16px, + corner-large-end: (0 16px 16px 0), + corner-large-start: (16px 0 0 16px), + corner-large-top: (16px 16px 0 0), + corner-medium: 12px, + corner-none: 0, + corner-small: 8px ); } diff --git a/src/material/core/tokens/m2/_md-sys-state.scss b/src/material/core/tokens/m2/_md-sys-state.scss index 5733370c9470..c70e69832460 100644 --- a/src/material/core/tokens/m2/_md-sys-state.scss +++ b/src/material/core/tokens/m2/_md-sys-state.scss @@ -1,15 +1,8 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - @function md-sys-state-values($exclude-hardcoded-values: false) { @return ( + dragged-state-layer-opacity: 0.16, focus-state-layer-opacity: 0.12, hover-state-layer-opacity: 0.04, pressed-state-layer-opacity: 0.12, - - // TBD - dragged-state-layer-opacity: 0.16, ); }