feat(labs): add expressive system stylesheets

.gitignore

@@ -5,6 +5,7 @@ node_modules
 *.css
 *.cssresult.ts
 *-styles.ts
+!adopt-styles.ts
 tokens/versions/**/*-meta.scss
 *.map
 *.d.ts

labs/gb/styles/adopt-styles.ts

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {type CSSResult, type CSSResultOrNative} from 'lit';
+
+/**
+ * Owner types that can adopt stylesheets using `adoptStyles()`.
+ */
+export type AdoptStylesOwner = DocumentOrShadowRoot | Element;
+
+/**
+ * Adopts the given stylesheets to the provided document or shadow root owner.
+ *
+ * @example
+ * ```ts
+ * import globalStylesheet from './stylesheet.css' with {type: 'css'};
+ *
+ * adoptStyles(document, globalStylesheet);
+ * ```
+ *
+ * If an element is provided, the styles are adopted to the element's owner
+ * document. If the element is within a shadow root, the styles are also adopted
+ * to the host shadow root.
+ *
+ * @example
+ * ```ts
+ * import hostClasses from './stylesheet.css' with {type: 'css'};
+ *
+ * class LightDomElement extends HTMLElement {
+ *   connectedCallback() {
+ *     adoptStyles(this, hostClasses);
+ *     this.classList.add('host-class');
+ *   }
+ * }
+ * ```
+ *
+ * @param owner The owner document, shadow root, or element to adopt the
+ *     styles to.
+ * @param styles The styles to adopt.
+ */
+export function adoptStyles(
+  owner: AdoptStylesOwner | null | undefined,
+  styles: CSSResultOrNative | CSSResultOrNative[],
+): void {
+  if (!owner) return;
+
+  styles = Array.isArray(styles) ? styles : [styles];
+  const isCSSResult = (style: CSSResultOrNative): style is CSSResult =>
+    'styleSheet' in style;
+  const stylesheets: CSSStyleSheet[] = styles.map((cssResultOrNative) =>
+    isCSSResult(cssResultOrNative)
+      ? cssResultOrNative.styleSheet!
+      : cssResultOrNative,
+  );
+
+  const adopt = (
+    node: DocumentOrShadowRoot | Node | null,
+    stylesheets: CSSStyleSheet[],
+  ): node is DocumentOrShadowRoot => {
+    if (node && 'adoptedStyleSheets' in node) {
+      node.adoptedStyleSheets = Array.from(
+        new Set([...node.adoptedStyleSheets, ...stylesheets]),
+      );
+      return true;
+    }
+    return false;
+  };
+
+  if (adopt(owner, stylesheets)) {
+    // Styles adopted directly on the owner document or shadow root.
+    return;
+  }
+
+  // When provided an element, adopt styles to the element's document and host
+  // shadow root, if present.
+  adopt(owner.ownerDocument, stylesheets);
+  adopt(owner.getRootNode(), stylesheets);
+}

labs/gb/styles/adopt-styles_test.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {adoptStyles} from './adopt-styles.js';
+
+describe('adoptStyles()', () => {
+  let sheet: CSSStyleSheet;
+
+  beforeEach(() => {
+    document.adoptedStyleSheets = [];
+    sheet = new CSSStyleSheet();
+  });
+
+  it('should adopt to a ShadowRoot', () => {
+    const host = document.createElement('div');
+    const shadowRoot = host.attachShadow({mode: 'open'});
+    adoptStyles(shadowRoot, sheet);
+
+    expect(shadowRoot.adoptedStyleSheets)
+      .withContext('shadowRoot.adoptedStyleSheets after adopt')
+      .toContain(sheet);
+  });
+
+  it('should adopt to a Document', () => {
+    adoptStyles(document, sheet);
+
+    expect(document.adoptedStyleSheets)
+      .withContext('document.adoptedStyleSheets after adopt')
+      .toContain(sheet);
+  });
+
+  it("should adopt to an Element's document", () => {
+    const element = document.createElement('div');
+    adoptStyles(element, sheet);
+
+    expect(document.adoptedStyleSheets)
+      .withContext(
+        'document.adoptedStyleSheets after adopt (element in light dom)',
+      )
+      .toContain(sheet);
+  });
+
+  it("should adopt to an Element's document and host ShadowRoot", () => {
+    const host = document.createElement('div');
+    const shadowRoot = host.attachShadow({mode: 'open'});
+    const element = document.createElement('div');
+    shadowRoot.appendChild(element);
+
+    adoptStyles(element, sheet);
+
+    expect(document.adoptedStyleSheets)
+      .withContext(
+        'document.adoptedStyleSheets after adopt (element in shadow dom)',
+      )
+      .toContain(sheet);
+    expect(shadowRoot.adoptedStyleSheets)
+      .withContext(
+        'shadowRoot.adoptedStyleSheets after adopt (element in shadow dom)',
+      )
+      .toContain(sheet);
+  });
+});

labs/gb/styles/color/internal/_color-tokens.scss

@@ -0,0 +1,95 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'sass:meta';
+@use '../../../../../sass/ext/map_ext';
+@use '../../../../../tokens/versions/latest/sass/md-ref-palette';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color-meta';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color__dark';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color__dark-meta';
+// go/keep-sorted end
+
+@mixin emit-custom-properties(
+  $light-vars: meta.module-variables(md-sys-color),
+  $light-meta: meta.module-variables(md-sys-color-meta),
+  $dark-vars: meta.module-variables(md-sys-color__dark),
+  $dark-meta: meta.module-variables(md-sys-color__dark-meta),
+  $include-palette: false,
+  $palette-vars: meta.module-variables(md-ref-palette),
+) {
+  $color-tokens: (
+    'primary',
+    'on-primary',
+    'primary-container',
+    'on-primary-container',
+    'primary-fixed',
+    'primary-fixed-dim',
+    'on-primary-fixed',
+    'on-primary-fixed-variant',
+    'secondary',
+    'on-secondary',
+    'secondary-container',
+    'on-secondary-container',
+    'secondary-fixed',
+    'secondary-fixed-dim',
+    'on-secondary-fixed',
+    'on-secondary-fixed-variant',
+    'tertiary',
+    'on-tertiary',
+    'tertiary-container',
+    'on-tertiary-container',
+    'tertiary-fixed',
+    'tertiary-fixed-dim',
+    'on-tertiary-fixed',
+    'on-tertiary-fixed-variant',
+    'error',
+    'on-error',
+    'error-container',
+    'on-error-container',
+    'surface',
+    'surface-dim',
+    'surface-bright',
+    'surface-container-lowest',
+    'surface-container-low',
+    'surface-container',
+    'surface-container-high',
+    'surface-container-highest',
+    'on-surface',
+    'on-surface-variant',
+    'outline',
+    'outline-variant',
+    'inverse-surface',
+    'inverse-on-surface',
+    'inverse-primary',
+    'scrim',
+    'shadow',
+  );
+
+  @each $name in $color-tokens {
+    $light: map_ext.get-strict($light-vars, $name);
+    $dark: map_ext.get-strict($dark-vars, $name);
+
+    @if $include-palette {
+      // Change value to reference palette variables.
+      $light: map_ext.get-strict($light-meta, '#{$name}--resolved');
+      $dark: map_ext.get-strict($dark-meta, '#{$name}--resolved');
+    }
+
+    $value: $light;
+    @if $light != $dark {
+      $value: light-dark($light, $dark);
+    }
+
+    --md-sys-color-#{$name}: #{$value};
+  }
+
+  @if $include-palette {
+    @each $name, $value in $palette-vars {
+      --md-ref-palette-#{$name}: #{$value};
+    }
+  }
+}

labs/gb/styles/color/md-color-tokens-full.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'internal/color-tokens';
+// go/keep-sorted end
+
+@layer md.sys.color {
+  :root {
+    color-scheme: light dark;
+    @include color-tokens.emit-custom-properties(
+      $include-palette: true,
+    );
+  }
+}

labs/gb/styles/color/md-color-tokens.scss

@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'internal/color-tokens';
+// go/keep-sorted end
+
+@layer md.sys.color {
+  :root {
+    color-scheme: light dark;
+    @include color-tokens.emit-custom-properties;
+  }
+}

labs/gb/styles/elevation/md-elevation-tokens.scss

@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@layer md.sys.elevation {
+  :root {
+    --md-sys-elevation-shadow-0: none;
+    --md-sys-elevation-shadow-1:
+      0 1px 2px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 1px 3px 1px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+    --md-sys-elevation-shadow-2:
+      0 1px 2px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 2px 6px 2px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+    --md-sys-elevation-shadow-3:
+      0 1px 3px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 4px 8px 3px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+    --md-sys-elevation-shadow-4:
+      0 2px 3px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 6px 10px 4px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+    --md-sys-elevation-shadow-5:
+      0 4px 4px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 8px 12px 6px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+  }
+}

labs/gb/styles/icon/md-icon.scss

@@ -0,0 +1,62 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@property --md-icon-font {
+  syntax: '<string>#';
+  inherits: true;
+  initial-value: 'Material Symbols';
+}
+@property --md-icon-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: currentColor;
+}
+@property --md-icon-size {
+  syntax: '<length-percentage>';
+  inherits: true;
+  initial-value: 24px;
+}
+@property --md-icon-opsz {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 24;
+}
+@property --md-icon-wght {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 400;
+}
+@property --md-icon-fill {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+@property --md-icon-grad {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@layer md.sys.icon {
+  .md-icon {
+    display: inline-flex;
+    place-items: center;
+    place-content: center;
+    overflow: hidden;
+    color: var(--md-icon-color);
+    fill: var(--md-icon-color);
+    aspect-ratio: 1;
+    min-width: var(--md-icon-size);
+    max-width: var(--md-icon-size);
+    font-size: var(--md-icon-size);
+    font-family: var(--md-icon-font);
+    font-variation-settings:
+      'opsz' var(--md-icon-opsz),
+      'wght' var(--md-icon-wght),
+      'FILL' var(--md-icon-fill),
+      'GRAD' var(--md-icon-grad);
+    -webkit-font-smoothing: antialiased;
+  }
+}

labs/gb/styles/m3.scss

@@ -0,0 +1,13 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@import 'color/md-color-tokens';
+@import 'elevation/md-elevation-tokens';
+@import 'icon/md-icon';
+@import 'motion/md-motion-tokens-easing';
+@import 'shape/md-shape-tokens';
+@import 'typography/md-typography-tokens';
+// go/keep-sorted end