@material/web 2.4.1 → 2.4.2-nightly.082faad.0

package/tokens/versions/v30_0/sass/_md-comp-banners-rich.scss

@@ -0,0 +1,89 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-shape';
+@use 'md-sys-typescale';
+@use 'md-sys-typescale-emphasized';
+
+/// md.comp.banners.rich.actions.between-space (Button action)
+$actions-between-space: 8px;
+/// md.comp.banners.rich.actions.bottom-space (Button action)
+$actions-bottom-space: 12px;
+/// md.comp.banners.rich.actions.leading-space (Button action)
+$actions-leading-space: 12px;
+/// md.comp.banners.rich.actions.top-space (Button action)
+$actions-top-space: 12px;
+/// md.comp.banners.rich.actions.trailing-space (Button action)
+$actions-trailing-space: 12px;
+/// md.comp.banners.rich.body-text.bottom-space (Body text)
+$body-text-bottom-space: 0px;
+/// md.comp.banners.rich.body-text.leading-space (Body text)
+$body-text-leading-space: 0px;
+/// md.comp.banners.rich.body-text.text-actions-space (Body text)
+$body-text-text-actions-space: 8px;
+/// md.comp.banners.rich.body-text.top-space (Body text)
+$body-text-top-space: 0px;
+/// md.comp.banners.rich.body-text.trailing-space (Body text)
+$body-text-trailing-space: 48px;
+/// md.comp.banners.rich.bottom-space (Container)
+$bottom-space: 12px;
+/// md.comp.banners.rich.icon-text-space (Leading element)
+$icon-text-space: 4px;
+/// md.comp.banners.rich.icon.size (Leading element)
+$icon-size: 24px;
+/// md.comp.banners.rich.image-text-space (Leading element)
+$image-text-space: 8px;
+/// md.comp.banners.rich.image.size (Leading element)
+$image-size: 80px;
+/// md.comp.banners.rich.leading-element.bottom-space (Leading element)
+$leading-element-bottom-space: 12px;
+/// md.comp.banners.rich.leading-element.leading-space (Leading element)
+$leading-element-leading-space: 4px;
+/// md.comp.banners.rich.leading-element.top-space (Leading element)
+$leading-element-top-space: 12px;
+/// md.comp.banners.rich.leading-element.trailing-space (Leading element)
+$leading-element-trailing-space: 4px;
+/// md.comp.banners.rich.leading-space (Container)
+$leading-space: 12px;
+/// md.comp.banners.rich.title-text.bottom-space (Title text)
+$title-text-bottom-space: 14px;
+/// md.comp.banners.rich.title-text.height (Title text)
+$title-text-height: 48px;
+/// md.comp.banners.rich.title-text.leading-space (Title text)
+$title-text-leading-space: 0px;
+/// md.comp.banners.rich.title-text.top-space (Title text)
+$title-text-top-space: 14px;
+/// md.comp.banners.rich.title-text.trailing-space (Title text)
+$title-text-trailing-space: 0px;
+/// md.comp.banners.rich.top-space (Container)
+$top-space: 12px;
+/// md.comp.banners.rich.trailing-space (Container)
+$trailing-space: 12px;
+/// md.comp.banners.rich.with-image-leading-space (Container)
+$with-image-leading-space: 20px;
+/// md.comp.banners.rich.image.shape (Leading element)
+$image-shape: md-sys-shape.$corner-none;
+/// md.comp.banners.rich.shape (Container)
+$shape: md-sys-shape.$corner-extra-large;
+/// md.comp.banners.rich.body-text.type (Body text)
+@mixin body-text-type {
+  @include md-sys-typescale.body-medium;
+}
+/// md.comp.banners.rich.title-text.type (Title text)
+@mixin title-text-type {
+  @include md-sys-typescale-emphasized.body-medium;
+}

package/tokens/versions/v30_0/sass/_md-comp-banners.scss

@@ -0,0 +1,43 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+
+/// md.comp.banners.banners.close-button.pressed.state-layer.color (Close button color)
+$banners-close-button-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.banners.close-button.color (Close button color)
+$close-button-color: md-sys-color.$primary;
+/// md.comp.banners.close-button.focused.state-layer.color (Close button color)
+$close-button-focused-state-layer-color: md-sys-color.$primary;
+/// md.comp.banners.close-button.hovered.state-layer.color (Close button color)
+$close-button-hovered-state-layer-color: md-sys-color.$primary;
+/// md.comp.banners.standard.body-text.color (Color - Standard)
+$standard-body-text-color: md-sys-color.$on-surface;
+/// md.comp.banners.standard.color (Color - Standard)
+$standard-color: md-sys-color.$surface-container;
+/// md.comp.banners.standard.icon.color (Color - Standard)
+$standard-icon-color: md-sys-color.$on-surface;
+/// md.comp.banners.standard.title-text.color (Color - Standard)
+$standard-title-text-color: md-sys-color.$on-surface;
+/// md.comp.banners.vibrant.body-text.color (Color -Vibrant)
+$vibrant-body-text-color: md-sys-color.$on-primary-container;
+/// md.comp.banners.vibrant.color (Color -Vibrant)
+$vibrant-color: md-sys-color.$primary-container;
+/// md.comp.banners.vibrant.icon.color (Color -Vibrant)
+$vibrant-icon-color: md-sys-color.$on-primary-container;
+/// md.comp.banners.vibrant.title-text.color (Color -Vibrant)
+$vibrant-title-text-color: md-sys-color.$on-primary-container;

package/tokens/versions/v30_0/sass/_md-comp-bottom-app-bar.scss

@@ -0,0 +1,37 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+
+/// md.comp.bottom-app-bar.container.height (Enabled / Container)
+$container-height: 80px;
+/// md.comp.bottom-app-bar.with-fab.container.height (Enabled / Container)
+///
+/// @deprecated Bottom app bar design updated to use a single height for all configurations, with vertically centered content. Please use md.comp.bottom-app-bar.container.height instead
+$with-fab-container-height: 72px;
+/// md.comp.bottom-app-bar.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container;
+/// md.comp.bottom-app-bar.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level2;
+/// md.comp.bottom-app-bar.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.bottom-app-bar.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$container-surface-tint-layer-color: md-sys-color.$surface-tint;

package/tokens/versions/v30_0/sass/_md-comp-button-elevated.scss

@@ -0,0 +1,125 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-state';
+
+/// md.comp.button.elevated.disabled.container.opacity (Disabled)
+$disabled-container-opacity: 0.1;
+/// md.comp.button.elevated.disabled.icon.opacity (Disabled)
+$disabled-icon-opacity: 0.38;
+/// md.comp.button.elevated.disabled.label-text.opacity (Disabled)
+$disabled-label-text-opacity: 0.38;
+/// md.comp.button.elevated.container.color (Enabled)
+$container-color: md-sys-color.$surface-container-low;
+/// md.comp.button.elevated.container.elevation (Enabled)
+$container-elevation: md-sys-elevation.$level1;
+/// md.comp.button.elevated.container.shadow-color (Enabled)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.button.elevated.disabled.container.color (Disabled)
+$disabled-container-color: md-sys-color.$on-surface;
+/// md.comp.button.elevated.disabled.container.elevation (Disabled)
+$disabled-container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.elevated.disabled.icon.color (Disabled)
+$disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.button.elevated.disabled.label-text.color (Disabled)
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.button.elevated.focused.container.elevation (Focused)
+$focused-container-elevation: md-sys-elevation.$level1;
+/// md.comp.button.elevated.focused.icon.color (Focused)
+$focused-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.focused.label-text.color (Focused)
+$focused-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.focused.state-layer.color (Focused)
+$focused-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.focused.state-layer.opacity (Focused)
+$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.button.elevated.hovered.container.elevation (Hovered)
+///
+/// @deprecated No longer part of the design spec
+$hovered-container-elevation: md-sys-elevation.$level2;
+/// md.comp.button.elevated.hovered.icon.color (Hovered)
+$hovered-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.hovered.label-text.color (Hovered)
+$hovered-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.hovered.state-layer.color (Hovered)
+$hovered-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.hovered.state-layer.opacity (Hovered)
+$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.button.elevated.icon.color (Enabled)
+$icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.label-text.color (Enabled)
+$label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.pressed.container.elevation (Pressed)
+$pressed-container-elevation: md-sys-elevation.$level1;
+/// md.comp.button.elevated.pressed.icon.color (Pressed)
+$pressed-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.pressed.label-text.color (Pressed)
+$pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.pressed.state-layer.color (Pressed)
+$pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.pressed.state-layer.opacity (Pressed)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.button.elevated.selected.container.color (Enabled)
+$selected-container-color: md-sys-color.$primary;
+/// md.comp.button.elevated.selected.focused.icon.color (Focused)
+$selected-focused-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.focused.label-text.color (Focused)
+$selected-focused-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.focused.state-layer.color (Focused)
+$selected-focused-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.hovered.icon.color (Hovered)
+$selected-hovered-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.hovered.label-text.color (Hovered)
+$selected-hovered-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.hovered.state-layer.color (Hovered)
+$selected-hovered-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.icon.color (Enabled)
+$selected-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.label-text.color (Enabled)
+$selected-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.pressed.icon.color (Pressed)
+$selected-pressed-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.pressed.label-text.color (Pressed)
+$selected-pressed-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.pressed.state-layer.color (Pressed)
+$selected-pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.unselected.container.color (Enabled)
+$unselected-container-color: md-sys-color.$surface-container-low;
+/// md.comp.button.elevated.unselected.focused.icon.color (Focused)
+$unselected-focused-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.focused.label-text.color (Focused)
+$unselected-focused-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.focused.state-layer.color (Focused)
+$unselected-focused-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.hovered.icon.color (Hovered)
+$unselected-hovered-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.hovered.label-text.color (Hovered)
+$unselected-hovered-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.hovered.state-layer.color (Hovered)
+$unselected-hovered-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.icon.color (Enabled)
+$unselected-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.label-text.color (Enabled)
+$unselected-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.pressed.icon.color (Pressed)
+$unselected-pressed-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.pressed.label-text.color (Pressed)
+$unselected-pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.pressed.state-layer.color (Pressed)
+$unselected-pressed-state-layer-color: md-sys-color.$primary;

package/tokens/versions/v30_0/sass/_md-comp-button-filled.scss

@@ -0,0 +1,125 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-state';
+
+/// md.comp.button.filled.disabled.container.opacity (Disabled)
+$disabled-container-opacity: 0.1;
+/// md.comp.button.filled.disabled.icon.opacity (Disabled)
+$disabled-icon-opacity: 0.38;
+/// md.comp.button.filled.disabled.label-text.opacity (Disabled)
+$disabled-label-text-opacity: 0.38;
+/// md.comp.button.filled.container.color (Enabled)
+$container-color: md-sys-color.$primary;
+/// md.comp.button.filled.container.elevation (Enabled)
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.filled.container.shadow-color (Enabled)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.button.filled.disabled.container.color (Disabled)
+$disabled-container-color: md-sys-color.$on-surface;
+/// md.comp.button.filled.disabled.container.elevation (Disabled)
+$disabled-container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.filled.disabled.icon.color (Disabled)
+$disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.button.filled.disabled.label-text.color (Disabled)
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.button.filled.focused.container.elevation (Focused)
+$focused-container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.filled.focused.icon.color (Focused)
+$focused-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.focused.label-text.color (Focused)
+$focused-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.focused.state-layer.color (Focused)
+$focused-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.focused.state-layer.opacity (Focused)
+$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.button.filled.hovered.container.elevation (Hovered)
+///
+/// @deprecated No longer part of the design spec
+$hovered-container-elevation: md-sys-elevation.$level1;
+/// md.comp.button.filled.hovered.icon.color (Hovered)
+$hovered-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.hovered.label-text.color (Hovered)
+$hovered-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.hovered.state-layer.color (Hovered)
+$hovered-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.hovered.state-layer.opacity (Hovered)
+$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.button.filled.icon.color (Enabled)
+$icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.label-text.color (Enabled)
+$label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.pressed.container.elevation (Pressed)
+$pressed-container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.filled.pressed.icon.color (Pressed)
+$pressed-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.pressed.label-text.color (Pressed)
+$pressed-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.pressed.state-layer.color (Pressed)
+$pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.pressed.state-layer.opacity (Pressed)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.button.filled.selected.container.color (Enabled)
+$selected-container-color: md-sys-color.$primary;
+/// md.comp.button.filled.selected.focused.icon.color (Focused)
+$selected-focused-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.focused.label-text.color (Focused)
+$selected-focused-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.focused.state-layer.color (Focused)
+$selected-focused-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.hovered.icon.color (Hovered)
+$selected-hovered-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.hovered.label-text.color (Hovered)
+$selected-hovered-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.hovered.state-layer.color (Hovered)
+$selected-hovered-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.icon.color (Enabled)
+$selected-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.label-text.color (Enabled)
+$selected-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.pressed.icon.color (Pressed)
+$selected-pressed-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.pressed.label-text.color (Pressed)
+$selected-pressed-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.pressed.state-layer.color (Pressed)
+$selected-pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.unselected.container.color (Enabled)
+$unselected-container-color: md-sys-color.$surface-container;
+/// md.comp.button.filled.unselected.focused.icon.color (Focused)
+$unselected-focused-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.focused.label-text.color (Focused)
+$unselected-focused-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.focused.state-layer.color (Focused)
+$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.hovered.icon.color (Hovered)
+$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.hovered.label-text.color (Hovered)
+$unselected-hovered-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.hovered.state-layer.color (Hovered)
+$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.icon.color (Enabled)
+$unselected-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.label-text.color (Enabled)
+$unselected-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.pressed.icon.color (Pressed)
+$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.pressed.label-text.color (Pressed)
+$unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.pressed.state-layer.color (Pressed)
+$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;

package/tokens/versions/v30_0/sass/_md-comp-button-group-connected-large.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-shape';
+
+/// md.comp.button-group.connected.large.between-space
+$between-space: 2px;
+/// md.comp.button-group.connected.large.container.height
+$container-height: 96px;
+/// md.comp.button-group.connected.large.selected.inner-corner.corner-size
+$selected-inner-corner-corner-size: 50%;
+/// md.comp.button-group.connected.large.container.shape
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.button-group.connected.large.inner-corner.corner-size
+$inner-corner-corner-size: md-sys-shape.$corner-value-large;
+/// md.comp.button-group.connected.large.pressed.inner-corner.corner-size
+$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-medium;

package/tokens/versions/v30_0/sass/_md-comp-button-group-connected-medium.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-shape';
+
+/// md.comp.button-group.connected.medium.between-space
+$between-space: 2px;
+/// md.comp.button-group.connected.medium.container.height
+$container-height: 56px;
+/// md.comp.button-group.connected.medium.selected.inner-corner.corner-size
+$selected-inner-corner-corner-size: 50%;
+/// md.comp.button-group.connected.medium.container.shape
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.button-group.connected.medium.inner-corner.corner-size
+$inner-corner-corner-size: md-sys-shape.$corner-value-small;
+/// md.comp.button-group.connected.medium.pressed.inner-corner.corner-size
+$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;

package/tokens/versions/v30_0/sass/_md-comp-button-group-connected-small.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-shape';
+
+/// md.comp.button-group.connected.small.between-space
+$between-space: 2px;
+/// md.comp.button-group.connected.small.container.height
+$container-height: 40px;
+/// md.comp.button-group.connected.small.selected.inner-corner.corner-size
+$selected-inner-corner-corner-size: 50%;
+/// md.comp.button-group.connected.small.container.shape
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.button-group.connected.small.inner-corner.corner-size
+$inner-corner-corner-size: md-sys-shape.$corner-value-small;
+/// md.comp.button-group.connected.small.pressed.inner-corner.corner-size
+$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;

package/tokens/versions/v30_0/sass/_md-comp-button-group-connected-xlarge.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-shape';
+
+/// md.comp.button-group.connected.xlarge.between-space
+$between-space: 2px;
+/// md.comp.button-group.connected.xlarge.container.height
+$container-height: 136px;
+/// md.comp.button-group.connected.xlarge.selected.inner-corner.corner-size
+$selected-inner-corner-corner-size: 50%;
+/// md.comp.button-group.connected.xlarge.container.shape
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.button-group.connected.xlarge.inner-corner.corner-size
+$inner-corner-corner-size: md-sys-shape.$corner-value-large-increased;
+/// md.comp.button-group.connected.xlarge.pressed.inner-corner.corner-size
+$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-large;

package/tokens/versions/v30_0/sass/_md-comp-button-group-connected-xsmall.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-shape';
+
+/// md.comp.button-group.connected.xsmall.between-space
+$between-space: 2px;
+/// md.comp.button-group.connected.xsmall.container.height
+$container-height: 32px;
+/// md.comp.button-group.connected.xsmall.selected.inner-corner.corner-size
+$selected-inner-corner-corner-size: 50%;
+/// md.comp.button-group.connected.xsmall.container.shape
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.button-group.connected.xsmall.inner-corner.corner-size
+$inner-corner-corner-size: md-sys-shape.$corner-value-small;
+/// md.comp.button-group.connected.xsmall.pressed.inner-corner.corner-size
+$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;

package/tokens/versions/v30_0/sass/_md-comp-button-group-standard-large.scss

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-motion';
+
+/// md.comp.button-group.standard.large.between-space
+$between-space: 8px;
+/// md.comp.button-group.standard.large.container.height
+$container-height: 96px;
+/// md.comp.button-group.standard.large.pressed.item.width.multiplier (Pressed)
+$pressed-item-width-multiplier: 15%;
+/// md.comp.button-group.standard.large.pressed.item.width.motion.spring.dampening (Pressed)
+$pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping;
+/// md.comp.button-group.standard.large.pressed.item.width.motion.spring.stiffness (Pressed)
+$pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;

package/tokens/versions/v30_0/sass/_md-comp-button-group-standard-medium.scss

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-motion';
+
+/// md.comp.button-group.standard.medium.between-space
+$between-space: 8px;
+/// md.comp.button-group.standard.medium.container.height
+$container-height: 56px;
+/// md.comp.button-group.standard.medium.pressed.item.width.multiplier (Pressed)
+$pressed-item-width-multiplier: 15%;
+/// md.comp.button-group.standard.medium.pressed.item.width.motion.spring.dampening (Pressed)
+$pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping;
+/// md.comp.button-group.standard.medium.pressed.item.width.motion.spring.stiffness (Pressed)
+$pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;