@m3-baseui/react-tailwind 1.0.0

package/package.json

@@ -0,0 +1,171 @@
+{
+  "name": "@m3-baseui/react-tailwind",
+  "version": "1.0.0",
+  "description": "M3 components implemented with tailwind-variants over the shared @m3-baseui/core factories. Ships the Tailwind v4 @theme preset.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/otomatty/m3-baseui.git",
+    "directory": "packages/react-tailwind"
+  },
+  "homepage": "https://github.com/otomatty/m3-baseui#readme",
+  "bugs": {
+    "url": "https://github.com/otomatty/m3-baseui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "@m3/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./button": {
+      "@m3/source": "./src/button.ts",
+      "types": "./dist/button.d.ts",
+      "default": "./dist/button.js"
+    },
+    "./icon-button": {
+      "@m3/source": "./src/icon-button.ts",
+      "types": "./dist/icon-button.d.ts",
+      "default": "./dist/icon-button.js"
+    },
+    "./switch": {
+      "@m3/source": "./src/switch.ts",
+      "types": "./dist/switch.d.ts",
+      "default": "./dist/switch.js"
+    },
+    "./checkbox": {
+      "@m3/source": "./src/checkbox.ts",
+      "types": "./dist/checkbox.d.ts",
+      "default": "./dist/checkbox.js"
+    },
+    "./radio": {
+      "@m3/source": "./src/radio.ts",
+      "types": "./dist/radio.d.ts",
+      "default": "./dist/radio.js"
+    },
+    "./chip": {
+      "@m3/source": "./src/chip.ts",
+      "types": "./dist/chip.d.ts",
+      "default": "./dist/chip.js"
+    },
+    "./tooltip": {
+      "@m3/source": "./src/tooltip.ts",
+      "types": "./dist/tooltip.d.ts",
+      "default": "./dist/tooltip.js"
+    },
+    "./dialog": {
+      "@m3/source": "./src/dialog.ts",
+      "types": "./dist/dialog.d.ts",
+      "default": "./dist/dialog.js"
+    },
+    "./menu": {
+      "@m3/source": "./src/menu.ts",
+      "types": "./dist/menu.d.ts",
+      "default": "./dist/menu.js"
+    },
+    "./tabs": {
+      "@m3/source": "./src/tabs.ts",
+      "types": "./dist/tabs.d.ts",
+      "default": "./dist/tabs.js"
+    },
+    "./slider": {
+      "@m3/source": "./src/slider.ts",
+      "types": "./dist/slider.d.ts",
+      "default": "./dist/slider.js"
+    },
+    "./select": {
+      "@m3/source": "./src/select.ts",
+      "types": "./dist/select.d.ts",
+      "default": "./dist/select.js"
+    },
+    "./textfield": {
+      "@m3/source": "./src/textfield.ts",
+      "types": "./dist/textfield.d.ts",
+      "default": "./dist/textfield.js"
+    },
+    "./navigation-bar": {
+      "@m3/source": "./src/navigation-bar.ts",
+      "types": "./dist/navigation-bar.d.ts",
+      "default": "./dist/navigation-bar.js"
+    },
+    "./fab": {
+      "@m3/source": "./src/fab.ts",
+      "types": "./dist/fab.d.ts",
+      "default": "./dist/fab.js"
+    },
+    "./divider": {
+      "@m3/source": "./src/divider.ts",
+      "types": "./dist/divider.d.ts",
+      "default": "./dist/divider.js"
+    },
+    "./progress": {
+      "@m3/source": "./src/progress.ts",
+      "types": "./dist/progress.d.ts",
+      "default": "./dist/progress.js"
+    },
+    "./list": {
+      "@m3/source": "./src/list.ts",
+      "types": "./dist/list.d.ts",
+      "default": "./dist/list.js"
+    },
+    "./snackbar": {
+      "@m3/source": "./src/snackbar.ts",
+      "types": "./dist/snackbar.d.ts",
+      "default": "./dist/snackbar.js"
+    },
+    "./item": {
+      "@m3/source": "./src/item.ts",
+      "types": "./dist/item.d.ts",
+      "default": "./dist/item.js"
+    },
+    "./badge": {
+      "@m3/source": "./src/badge.ts",
+      "types": "./dist/badge.d.ts",
+      "default": "./dist/badge.js"
+    },
+    "./card": {
+      "@m3/source": "./src/card.ts",
+      "types": "./dist/card.d.ts",
+      "default": "./dist/card.js"
+    },
+    "./segmented-button": {
+      "@m3/source": "./src/segmented-button.ts",
+      "types": "./dist/segmented-button.d.ts",
+      "default": "./dist/segmented-button.js"
+    },
+    "./navigation-drawer": {
+      "@m3/source": "./src/navigation-drawer.ts",
+      "types": "./dist/navigation-drawer.d.ts",
+      "default": "./dist/navigation-drawer.js"
+    },
+    "./preset.css": "./styles/preset.css",
+    "./tokens.css": "./styles/tokens.css",
+    "./theme.css": "./styles/theme.css"
+  },
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "scripts": {
+    "build": "tsup && bun run scripts/copy-token-css.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@m3-baseui/core": "0.1.0",
+    "@m3-baseui/tokens": "0.1.0",
+    "tailwind-variants": "^0.3.0"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.6.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}

package/styles/preset.css

@@ -0,0 +1,30 @@
+/*
+ * preset.css — one-line setup for Tailwind v4 consumers.
+ *
+ * In your app's main CSS:
+ *   @import '@m3-baseui/react-tailwind/preset.css';
+ *
+ * Order matters: tokens (runtime --md-sys-* vars) must load before Tailwind so
+ * the @theme preset can reference them.
+ */
+@import '@m3-baseui/tokens/tokens.css';
+@import 'tailwindcss';
+@import '@m3-baseui/tokens/theme.css';
+
+/*
+ * Component keyframes that can't be expressed as utilities. The linear progress
+ * indeterminate bar slides a 40%-wide indicator across the track; the circular
+ * indeterminate spinner reuses Tailwind's built-in `animate-spin`.
+ */
+@theme {
+  --animate-m3-linear-indeterminate: m3-linear-indeterminate 2s ease-in-out infinite;
+}
+
+@keyframes m3-linear-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}

package/styles/theme.css

@@ -0,0 +1,213 @@
+/* AUTO-GENERATED by @m3-baseui/tokens. Do not edit by hand. */
+/*
+ * Tailwind v4 theme preset. Import AFTER tokens.css so the --md-sys-* runtime
+ * vars exist:
+ *   @import '@m3-baseui/tokens/tokens.css';
+ *   @import 'tailwindcss';
+ *   @import '@m3-baseui/tokens/theme.css';
+ */
+@theme {
+  /* ---- Color (channel-triple → rgb with alpha) ---- */
+  --color-primary: rgb(var(--md-sys-color-primary) / <alpha-value>);
+  --color-on-primary: rgb(var(--md-sys-color-on-primary) / <alpha-value>);
+  --color-primary-container: rgb(var(--md-sys-color-primary-container) / <alpha-value>);
+  --color-on-primary-container: rgb(var(--md-sys-color-on-primary-container) / <alpha-value>);
+  --color-secondary: rgb(var(--md-sys-color-secondary) / <alpha-value>);
+  --color-on-secondary: rgb(var(--md-sys-color-on-secondary) / <alpha-value>);
+  --color-secondary-container: rgb(var(--md-sys-color-secondary-container) / <alpha-value>);
+  --color-on-secondary-container: rgb(var(--md-sys-color-on-secondary-container) / <alpha-value>);
+  --color-tertiary: rgb(var(--md-sys-color-tertiary) / <alpha-value>);
+  --color-on-tertiary: rgb(var(--md-sys-color-on-tertiary) / <alpha-value>);
+  --color-tertiary-container: rgb(var(--md-sys-color-tertiary-container) / <alpha-value>);
+  --color-on-tertiary-container: rgb(var(--md-sys-color-on-tertiary-container) / <alpha-value>);
+  --color-error: rgb(var(--md-sys-color-error) / <alpha-value>);
+  --color-on-error: rgb(var(--md-sys-color-on-error) / <alpha-value>);
+  --color-error-container: rgb(var(--md-sys-color-error-container) / <alpha-value>);
+  --color-on-error-container: rgb(var(--md-sys-color-on-error-container) / <alpha-value>);
+  --color-background: rgb(var(--md-sys-color-background) / <alpha-value>);
+  --color-on-background: rgb(var(--md-sys-color-on-background) / <alpha-value>);
+  --color-surface: rgb(var(--md-sys-color-surface) / <alpha-value>);
+  --color-on-surface: rgb(var(--md-sys-color-on-surface) / <alpha-value>);
+  --color-surface-variant: rgb(var(--md-sys-color-surface-variant) / <alpha-value>);
+  --color-on-surface-variant: rgb(var(--md-sys-color-on-surface-variant) / <alpha-value>);
+  --color-surface-dim: rgb(var(--md-sys-color-surface-dim) / <alpha-value>);
+  --color-surface-bright: rgb(var(--md-sys-color-surface-bright) / <alpha-value>);
+  --color-surface-container-lowest: rgb(var(--md-sys-color-surface-container-lowest) / <alpha-value>);
+  --color-surface-container-low: rgb(var(--md-sys-color-surface-container-low) / <alpha-value>);
+  --color-surface-container: rgb(var(--md-sys-color-surface-container) / <alpha-value>);
+  --color-surface-container-high: rgb(var(--md-sys-color-surface-container-high) / <alpha-value>);
+  --color-surface-container-highest: rgb(var(--md-sys-color-surface-container-highest) / <alpha-value>);
+  --color-outline: rgb(var(--md-sys-color-outline) / <alpha-value>);
+  --color-outline-variant: rgb(var(--md-sys-color-outline-variant) / <alpha-value>);
+  --color-shadow: rgb(var(--md-sys-color-shadow) / <alpha-value>);
+  --color-scrim: rgb(var(--md-sys-color-scrim) / <alpha-value>);
+  --color-surface-tint: rgb(var(--md-sys-color-surface-tint) / <alpha-value>);
+  --color-inverse-surface: rgb(var(--md-sys-color-inverse-surface) / <alpha-value>);
+  --color-inverse-on-surface: rgb(var(--md-sys-color-inverse-on-surface) / <alpha-value>);
+  --color-inverse-primary: rgb(var(--md-sys-color-inverse-primary) / <alpha-value>);
+  --color-primary-fixed: rgb(var(--md-sys-color-primary-fixed) / <alpha-value>);
+  --color-primary-fixed-dim: rgb(var(--md-sys-color-primary-fixed-dim) / <alpha-value>);
+  --color-on-primary-fixed: rgb(var(--md-sys-color-on-primary-fixed) / <alpha-value>);
+  --color-on-primary-fixed-variant: rgb(var(--md-sys-color-on-primary-fixed-variant) / <alpha-value>);
+  --color-secondary-fixed: rgb(var(--md-sys-color-secondary-fixed) / <alpha-value>);
+  --color-secondary-fixed-dim: rgb(var(--md-sys-color-secondary-fixed-dim) / <alpha-value>);
+  --color-on-secondary-fixed: rgb(var(--md-sys-color-on-secondary-fixed) / <alpha-value>);
+  --color-on-secondary-fixed-variant: rgb(var(--md-sys-color-on-secondary-fixed-variant) / <alpha-value>);
+  --color-tertiary-fixed: rgb(var(--md-sys-color-tertiary-fixed) / <alpha-value>);
+  --color-tertiary-fixed-dim: rgb(var(--md-sys-color-tertiary-fixed-dim) / <alpha-value>);
+  --color-on-tertiary-fixed: rgb(var(--md-sys-color-on-tertiary-fixed) / <alpha-value>);
+  --color-on-tertiary-fixed-variant: rgb(var(--md-sys-color-on-tertiary-fixed-variant) / <alpha-value>);
+
+  /* ---- Shape / radius ---- */
+  --radius-none: var(--md-sys-shape-none);
+  --radius-extra-small: var(--md-sys-shape-extra-small);
+  --radius-small: var(--md-sys-shape-small);
+  --radius-medium: var(--md-sys-shape-medium);
+  --radius-large: var(--md-sys-shape-large);
+  --radius-extra-large: var(--md-sys-shape-extra-large);
+  --radius-full: var(--md-sys-shape-full);
+
+  /* ---- Elevation / shadow ---- */
+  --shadow-level0: var(--md-sys-elevation-level0);
+  --shadow-level1: var(--md-sys-elevation-level1);
+  --shadow-level2: var(--md-sys-elevation-level2);
+  --shadow-level3: var(--md-sys-elevation-level3);
+  --shadow-level4: var(--md-sys-elevation-level4);
+  --shadow-level5: var(--md-sys-elevation-level5);
+
+  /* ---- Motion / easing ---- */
+  --ease-standard: var(--md-sys-motion-easing-standard);
+  --ease-standard-accelerate: var(--md-sys-motion-easing-standard-accelerate);
+  --ease-standard-decelerate: var(--md-sys-motion-easing-standard-decelerate);
+  --ease-emphasized: var(--md-sys-motion-easing-emphasized);
+  --ease-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate);
+  --ease-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate);
+  --ease-spring-spatial-fast: var(--md-sys-motion-easing-spring-spatial-fast);
+  --ease-spring-spatial-default: var(--md-sys-motion-easing-spring-spatial-default);
+  --ease-spring-spatial-slow: var(--md-sys-motion-easing-spring-spatial-slow);
+  --ease-spring-effects-fast: var(--md-sys-motion-easing-spring-effects-fast);
+  --ease-spring-effects-default: var(--md-sys-motion-easing-spring-effects-default);
+  --ease-spring-effects-slow: var(--md-sys-motion-easing-spring-effects-slow);
+
+  /* ---- Typescale ---- */
+  --text-display-large: var(--md-sys-typescale-display-large-size);
+  --text-display-large--line-height: var(--md-sys-typescale-display-large-line-height);
+  --text-display-large--letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  --text-display-large--font-weight: var(--md-sys-typescale-display-large-weight);
+  --text-display-medium: var(--md-sys-typescale-display-medium-size);
+  --text-display-medium--line-height: var(--md-sys-typescale-display-medium-line-height);
+  --text-display-medium--letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  --text-display-medium--font-weight: var(--md-sys-typescale-display-medium-weight);
+  --text-display-small: var(--md-sys-typescale-display-small-size);
+  --text-display-small--line-height: var(--md-sys-typescale-display-small-line-height);
+  --text-display-small--letter-spacing: var(--md-sys-typescale-display-small-tracking);
+  --text-display-small--font-weight: var(--md-sys-typescale-display-small-weight);
+  --text-headline-large: var(--md-sys-typescale-headline-large-size);
+  --text-headline-large--line-height: var(--md-sys-typescale-headline-large-line-height);
+  --text-headline-large--letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+  --text-headline-large--font-weight: var(--md-sys-typescale-headline-large-weight);
+  --text-headline-medium: var(--md-sys-typescale-headline-medium-size);
+  --text-headline-medium--line-height: var(--md-sys-typescale-headline-medium-line-height);
+  --text-headline-medium--letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  --text-headline-medium--font-weight: var(--md-sys-typescale-headline-medium-weight);
+  --text-headline-small: var(--md-sys-typescale-headline-small-size);
+  --text-headline-small--line-height: var(--md-sys-typescale-headline-small-line-height);
+  --text-headline-small--letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+  --text-headline-small--font-weight: var(--md-sys-typescale-headline-small-weight);
+  --text-title-large: var(--md-sys-typescale-title-large-size);
+  --text-title-large--line-height: var(--md-sys-typescale-title-large-line-height);
+  --text-title-large--letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  --text-title-large--font-weight: var(--md-sys-typescale-title-large-weight);
+  --text-title-medium: var(--md-sys-typescale-title-medium-size);
+  --text-title-medium--line-height: var(--md-sys-typescale-title-medium-line-height);
+  --text-title-medium--letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  --text-title-medium--font-weight: var(--md-sys-typescale-title-medium-weight);
+  --text-title-small: var(--md-sys-typescale-title-small-size);
+  --text-title-small--line-height: var(--md-sys-typescale-title-small-line-height);
+  --text-title-small--letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  --text-title-small--font-weight: var(--md-sys-typescale-title-small-weight);
+  --text-body-large: var(--md-sys-typescale-body-large-size);
+  --text-body-large--line-height: var(--md-sys-typescale-body-large-line-height);
+  --text-body-large--letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  --text-body-large--font-weight: var(--md-sys-typescale-body-large-weight);
+  --text-body-medium: var(--md-sys-typescale-body-medium-size);
+  --text-body-medium--line-height: var(--md-sys-typescale-body-medium-line-height);
+  --text-body-medium--letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  --text-body-medium--font-weight: var(--md-sys-typescale-body-medium-weight);
+  --text-body-small: var(--md-sys-typescale-body-small-size);
+  --text-body-small--line-height: var(--md-sys-typescale-body-small-line-height);
+  --text-body-small--letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  --text-body-small--font-weight: var(--md-sys-typescale-body-small-weight);
+  --text-label-large: var(--md-sys-typescale-label-large-size);
+  --text-label-large--line-height: var(--md-sys-typescale-label-large-line-height);
+  --text-label-large--letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  --text-label-large--font-weight: var(--md-sys-typescale-label-large-weight);
+  --text-label-medium: var(--md-sys-typescale-label-medium-size);
+  --text-label-medium--line-height: var(--md-sys-typescale-label-medium-line-height);
+  --text-label-medium--letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  --text-label-medium--font-weight: var(--md-sys-typescale-label-medium-weight);
+  --text-label-small: var(--md-sys-typescale-label-small-size);
+  --text-label-small--line-height: var(--md-sys-typescale-label-small-line-height);
+  --text-label-small--letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  --text-label-small--font-weight: var(--md-sys-typescale-label-small-weight);
+  --text-display-large-emphasized: var(--md-sys-typescale-display-large-emphasized-size);
+  --text-display-large-emphasized--line-height: var(--md-sys-typescale-display-large-emphasized-line-height);
+  --text-display-large-emphasized--letter-spacing: var(--md-sys-typescale-display-large-emphasized-tracking);
+  --text-display-large-emphasized--font-weight: var(--md-sys-typescale-display-large-emphasized-weight);
+  --text-display-medium-emphasized: var(--md-sys-typescale-display-medium-emphasized-size);
+  --text-display-medium-emphasized--line-height: var(--md-sys-typescale-display-medium-emphasized-line-height);
+  --text-display-medium-emphasized--letter-spacing: var(--md-sys-typescale-display-medium-emphasized-tracking);
+  --text-display-medium-emphasized--font-weight: var(--md-sys-typescale-display-medium-emphasized-weight);
+  --text-display-small-emphasized: var(--md-sys-typescale-display-small-emphasized-size);
+  --text-display-small-emphasized--line-height: var(--md-sys-typescale-display-small-emphasized-line-height);
+  --text-display-small-emphasized--letter-spacing: var(--md-sys-typescale-display-small-emphasized-tracking);
+  --text-display-small-emphasized--font-weight: var(--md-sys-typescale-display-small-emphasized-weight);
+  --text-headline-large-emphasized: var(--md-sys-typescale-headline-large-emphasized-size);
+  --text-headline-large-emphasized--line-height: var(--md-sys-typescale-headline-large-emphasized-line-height);
+  --text-headline-large-emphasized--letter-spacing: var(--md-sys-typescale-headline-large-emphasized-tracking);
+  --text-headline-large-emphasized--font-weight: var(--md-sys-typescale-headline-large-emphasized-weight);
+  --text-headline-medium-emphasized: var(--md-sys-typescale-headline-medium-emphasized-size);
+  --text-headline-medium-emphasized--line-height: var(--md-sys-typescale-headline-medium-emphasized-line-height);
+  --text-headline-medium-emphasized--letter-spacing: var(--md-sys-typescale-headline-medium-emphasized-tracking);
+  --text-headline-medium-emphasized--font-weight: var(--md-sys-typescale-headline-medium-emphasized-weight);
+  --text-headline-small-emphasized: var(--md-sys-typescale-headline-small-emphasized-size);
+  --text-headline-small-emphasized--line-height: var(--md-sys-typescale-headline-small-emphasized-line-height);
+  --text-headline-small-emphasized--letter-spacing: var(--md-sys-typescale-headline-small-emphasized-tracking);
+  --text-headline-small-emphasized--font-weight: var(--md-sys-typescale-headline-small-emphasized-weight);
+  --text-title-large-emphasized: var(--md-sys-typescale-title-large-emphasized-size);
+  --text-title-large-emphasized--line-height: var(--md-sys-typescale-title-large-emphasized-line-height);
+  --text-title-large-emphasized--letter-spacing: var(--md-sys-typescale-title-large-emphasized-tracking);
+  --text-title-large-emphasized--font-weight: var(--md-sys-typescale-title-large-emphasized-weight);
+  --text-title-medium-emphasized: var(--md-sys-typescale-title-medium-emphasized-size);
+  --text-title-medium-emphasized--line-height: var(--md-sys-typescale-title-medium-emphasized-line-height);
+  --text-title-medium-emphasized--letter-spacing: var(--md-sys-typescale-title-medium-emphasized-tracking);
+  --text-title-medium-emphasized--font-weight: var(--md-sys-typescale-title-medium-emphasized-weight);
+  --text-title-small-emphasized: var(--md-sys-typescale-title-small-emphasized-size);
+  --text-title-small-emphasized--line-height: var(--md-sys-typescale-title-small-emphasized-line-height);
+  --text-title-small-emphasized--letter-spacing: var(--md-sys-typescale-title-small-emphasized-tracking);
+  --text-title-small-emphasized--font-weight: var(--md-sys-typescale-title-small-emphasized-weight);
+  --text-body-large-emphasized: var(--md-sys-typescale-body-large-emphasized-size);
+  --text-body-large-emphasized--line-height: var(--md-sys-typescale-body-large-emphasized-line-height);
+  --text-body-large-emphasized--letter-spacing: var(--md-sys-typescale-body-large-emphasized-tracking);
+  --text-body-large-emphasized--font-weight: var(--md-sys-typescale-body-large-emphasized-weight);
+  --text-body-medium-emphasized: var(--md-sys-typescale-body-medium-emphasized-size);
+  --text-body-medium-emphasized--line-height: var(--md-sys-typescale-body-medium-emphasized-line-height);
+  --text-body-medium-emphasized--letter-spacing: var(--md-sys-typescale-body-medium-emphasized-tracking);
+  --text-body-medium-emphasized--font-weight: var(--md-sys-typescale-body-medium-emphasized-weight);
+  --text-body-small-emphasized: var(--md-sys-typescale-body-small-emphasized-size);
+  --text-body-small-emphasized--line-height: var(--md-sys-typescale-body-small-emphasized-line-height);
+  --text-body-small-emphasized--letter-spacing: var(--md-sys-typescale-body-small-emphasized-tracking);
+  --text-body-small-emphasized--font-weight: var(--md-sys-typescale-body-small-emphasized-weight);
+  --text-label-large-emphasized: var(--md-sys-typescale-label-large-emphasized-size);
+  --text-label-large-emphasized--line-height: var(--md-sys-typescale-label-large-emphasized-line-height);
+  --text-label-large-emphasized--letter-spacing: var(--md-sys-typescale-label-large-emphasized-tracking);
+  --text-label-large-emphasized--font-weight: var(--md-sys-typescale-label-large-emphasized-weight);
+  --text-label-medium-emphasized: var(--md-sys-typescale-label-medium-emphasized-size);
+  --text-label-medium-emphasized--line-height: var(--md-sys-typescale-label-medium-emphasized-line-height);
+  --text-label-medium-emphasized--letter-spacing: var(--md-sys-typescale-label-medium-emphasized-tracking);
+  --text-label-medium-emphasized--font-weight: var(--md-sys-typescale-label-medium-emphasized-weight);
+  --text-label-small-emphasized: var(--md-sys-typescale-label-small-emphasized-size);
+  --text-label-small-emphasized--line-height: var(--md-sys-typescale-label-small-emphasized-line-height);
+  --text-label-small-emphasized--letter-spacing: var(--md-sys-typescale-label-small-emphasized-tracking);
+  --text-label-small-emphasized--font-weight: var(--md-sys-typescale-label-small-emphasized-weight);
+}