@lit-material/tokens 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bohdaq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @lit-material/tokens
+
+Material Design 3 design tokens (color, shape, type scale, elevation, state-layer
+opacity, motion) as plain CSS custom properties, for
+[lit-material](https://github.com/bohdaq/lit-material) components.
+
+## Install
+
+```sh
+npm install @lit-material/tokens
+```
+
+## Usage
+
+Link the stylesheet once at the document root — CSS custom properties inherit through
+shadow DOM boundaries, so every `lit-material` component picks it up automatically:
+
+```html
+<link rel="stylesheet" href="node_modules/@lit-material/tokens/css/index.css" />
+```
+
+Dark mode follows `prefers-color-scheme` automatically (via CSS `light-dark()`). To force
+a scheme regardless of OS preference, set `color-scheme="light"` or `color-scheme="dark"`
+on `<html>` or any ancestor element.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `@lit-material/tokens` ships its tokens as plain CSS custom properties
+ * (see `./css/index.css`), meant to be linked once at the document root.
+ * This module exists for tooling that wants typed references to token names
+ * rather than importing the CSS directly.
+ */
+export declare const colorTokens: readonly ["--md-sys-color-primary", "--md-sys-color-on-primary", "--md-sys-color-primary-container", "--md-sys-color-on-primary-container", "--md-sys-color-secondary", "--md-sys-color-on-secondary", "--md-sys-color-secondary-container", "--md-sys-color-on-secondary-container", "--md-sys-color-tertiary", "--md-sys-color-on-tertiary", "--md-sys-color-tertiary-container", "--md-sys-color-on-tertiary-container", "--md-sys-color-error", "--md-sys-color-on-error", "--md-sys-color-error-container", "--md-sys-color-on-error-container", "--md-sys-color-background", "--md-sys-color-on-background", "--md-sys-color-surface", "--md-sys-color-on-surface", "--md-sys-color-surface-variant", "--md-sys-color-on-surface-variant", "--md-sys-color-surface-container-lowest", "--md-sys-color-surface-container-low", "--md-sys-color-surface-container", "--md-sys-color-surface-container-high", "--md-sys-color-surface-container-highest", "--md-sys-color-outline", "--md-sys-color-outline-variant", "--md-sys-color-shadow", "--md-sys-color-scrim", "--md-sys-color-inverse-surface", "--md-sys-color-inverse-on-surface", "--md-sys-color-inverse-primary"];
+export declare const shapeTokens: readonly ["--md-sys-shape-corner-none", "--md-sys-shape-corner-extra-small", "--md-sys-shape-corner-small", "--md-sys-shape-corner-medium", "--md-sys-shape-corner-large", "--md-sys-shape-corner-extra-large", "--md-sys-shape-corner-full"];
+export declare const stateTokens: readonly ["--md-sys-state-hover-state-layer-opacity", "--md-sys-state-focus-state-layer-opacity", "--md-sys-state-pressed-state-layer-opacity", "--md-sys-state-dragged-state-layer-opacity", "--md-sys-state-disabled-container-opacity", "--md-sys-state-disabled-content-opacity"];
+export type ColorToken = (typeof colorTokens)[number];
+export type ShapeToken = (typeof shapeTokens)[number];
+export type StateToken = (typeof stateTokens)[number];
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,onCAmCd,CAAC;AAEX,eAAO,MAAM,WAAW,+OAQd,CAAC;AAEX,eAAO,MAAM,WAAW,uRAOd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/index.js

@@ -0,0 +1,60 @@
+/**
+ * `@lit-material/tokens` ships its tokens as plain CSS custom properties
+ * (see `./css/index.css`), meant to be linked once at the document root.
+ * This module exists for tooling that wants typed references to token names
+ * rather than importing the CSS directly.
+ */
+export const colorTokens = [
+    "--md-sys-color-primary",
+    "--md-sys-color-on-primary",
+    "--md-sys-color-primary-container",
+    "--md-sys-color-on-primary-container",
+    "--md-sys-color-secondary",
+    "--md-sys-color-on-secondary",
+    "--md-sys-color-secondary-container",
+    "--md-sys-color-on-secondary-container",
+    "--md-sys-color-tertiary",
+    "--md-sys-color-on-tertiary",
+    "--md-sys-color-tertiary-container",
+    "--md-sys-color-on-tertiary-container",
+    "--md-sys-color-error",
+    "--md-sys-color-on-error",
+    "--md-sys-color-error-container",
+    "--md-sys-color-on-error-container",
+    "--md-sys-color-background",
+    "--md-sys-color-on-background",
+    "--md-sys-color-surface",
+    "--md-sys-color-on-surface",
+    "--md-sys-color-surface-variant",
+    "--md-sys-color-on-surface-variant",
+    "--md-sys-color-surface-container-lowest",
+    "--md-sys-color-surface-container-low",
+    "--md-sys-color-surface-container",
+    "--md-sys-color-surface-container-high",
+    "--md-sys-color-surface-container-highest",
+    "--md-sys-color-outline",
+    "--md-sys-color-outline-variant",
+    "--md-sys-color-shadow",
+    "--md-sys-color-scrim",
+    "--md-sys-color-inverse-surface",
+    "--md-sys-color-inverse-on-surface",
+    "--md-sys-color-inverse-primary",
+];
+export const shapeTokens = [
+    "--md-sys-shape-corner-none",
+    "--md-sys-shape-corner-extra-small",
+    "--md-sys-shape-corner-small",
+    "--md-sys-shape-corner-medium",
+    "--md-sys-shape-corner-large",
+    "--md-sys-shape-corner-extra-large",
+    "--md-sys-shape-corner-full",
+];
+export const stateTokens = [
+    "--md-sys-state-hover-state-layer-opacity",
+    "--md-sys-state-focus-state-layer-opacity",
+    "--md-sys-state-pressed-state-layer-opacity",
+    "--md-sys-state-dragged-state-layer-opacity",
+    "--md-sys-state-disabled-container-opacity",
+    "--md-sys-state-disabled-content-opacity",
+];
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,wBAAwB;IACxB,2BAA2B;IAC3B,kCAAkC;IAClC,qCAAqC;IACrC,0BAA0B;IAC1B,6BAA6B;IAC7B,oCAAoC;IACpC,uCAAuC;IACvC,yBAAyB;IACzB,4BAA4B;IAC5B,mCAAmC;IACnC,sCAAsC;IACtC,sBAAsB;IACtB,yBAAyB;IACzB,gCAAgC;IAChC,mCAAmC;IACnC,2BAA2B;IAC3B,8BAA8B;IAC9B,wBAAwB;IACxB,2BAA2B;IAC3B,gCAAgC;IAChC,mCAAmC;IACnC,yCAAyC;IACzC,sCAAsC;IACtC,kCAAkC;IAClC,uCAAuC;IACvC,0CAA0C;IAC1C,wBAAwB;IACxB,gCAAgC;IAChC,uBAAuB;IACvB,sBAAsB;IACtB,gCAAgC;IAChC,mCAAmC;IACnC,gCAAgC;CACxB,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,4BAA4B;IAC5B,mCAAmC;IACnC,6BAA6B;IAC7B,8BAA8B;IAC9B,6BAA6B;IAC7B,mCAAmC;IACnC,4BAA4B;CACpB,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,0CAA0C;IAC1C,0CAA0C;IAC1C,4CAA4C;IAC5C,4CAA4C;IAC5C,2CAA2C;IAC3C,yCAAyC;CACjC,CAAC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@lit-material/tokens",
+  "version": "0.0.1",
+  "description": "Material Design 3 design tokens (color, type, shape, elevation, motion) for lit-material components.",
+  "license": "MIT",
+  "author": {
+    "name": "bohdaq",
+    "email": "bohdaq@gmail.com",
+    "url": "https://github.com/bohdaq"
+  },
+  "homepage": "https://github.com/bohdaq/lit-material#readme",
+  "bugs": "https://github.com/bohdaq/lit-material/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
+    "directory": "packages/tokens"
+  },
+  "keywords": [
+    "lit",
+    "web-components",
+    "lit-material",
+    "material-design",
+    "material-design-3",
+    "design-tokens",
+    "css-custom-properties"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./css/*": "./src/css/*"
+  },
+  "files": [
+    "dist",
+    "src/css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/src/css/color.css

@@ -0,0 +1,63 @@
+/*
+ * Material Design 3 baseline color scheme (light + dark), via the CSS
+ * `light-dark()` function. https://m3.material.io/styles/color/roles
+ *
+ * `color-scheme: light dark` (the default below) means "follow the OS/user
+ * preference". To force a scheme regardless of preference, set
+ * `color-scheme="light"` or `color-scheme="dark"` as an attribute on <html>
+ * (or any ancestor) — see the overrides at the bottom of this file.
+ */
+:host,
+:root {
+  color-scheme: light dark;
+
+  --md-sys-color-primary: light-dark(#6750a4, #d0bcff);
+  --md-sys-color-on-primary: light-dark(#ffffff, #381e72);
+  --md-sys-color-primary-container: light-dark(#eaddff, #4f378b);
+  --md-sys-color-on-primary-container: light-dark(#21005d, #eaddff);
+
+  --md-sys-color-secondary: light-dark(#625b71, #ccc2dc);
+  --md-sys-color-on-secondary: light-dark(#ffffff, #332d41);
+  --md-sys-color-secondary-container: light-dark(#e8def8, #4a4458);
+  --md-sys-color-on-secondary-container: light-dark(#1d192b, #e8def8);
+
+  --md-sys-color-tertiary: light-dark(#7d5260, #efb8c8);
+  --md-sys-color-on-tertiary: light-dark(#ffffff, #492532);
+  --md-sys-color-tertiary-container: light-dark(#ffd8e4, #633b48);
+  --md-sys-color-on-tertiary-container: light-dark(#31111d, #ffd8e4);
+
+  --md-sys-color-error: light-dark(#b3261e, #f2b8b5);
+  --md-sys-color-on-error: light-dark(#ffffff, #601410);
+  --md-sys-color-error-container: light-dark(#f9dedc, #8c1d18);
+  --md-sys-color-on-error-container: light-dark(#410e0b, #f9dedc);
+
+  --md-sys-color-background: light-dark(#fffbfe, #1c1b1f);
+  --md-sys-color-on-background: light-dark(#1c1b1f, #e6e1e5);
+  --md-sys-color-surface: light-dark(#fffbfe, #1c1b1f);
+  --md-sys-color-on-surface: light-dark(#1c1b1f, #e6e1e5);
+  --md-sys-color-surface-variant: light-dark(#e7e0ec, #49454f);
+  --md-sys-color-on-surface-variant: light-dark(#49454f, #cac4d0);
+
+  --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0d13);
+  --md-sys-color-surface-container-low: light-dark(#f7f2fa, #1d1b20);
+  --md-sys-color-surface-container: light-dark(#f3edf7, #211f26);
+  --md-sys-color-surface-container-high: light-dark(#ece6f0, #2b2930);
+  --md-sys-color-surface-container-highest: light-dark(#e6e0e9, #36343b);
+
+  --md-sys-color-outline: light-dark(#79747e, #938f99);
+  --md-sys-color-outline-variant: light-dark(#c4c7c5, #444746);
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+
+  --md-sys-color-inverse-surface: light-dark(#313033, #e6e1e5);
+  --md-sys-color-inverse-on-surface: light-dark(#f4eff4, #313033);
+  --md-sys-color-inverse-primary: light-dark(#d0bcff, #6750a4);
+}
+
+:root[color-scheme="light"] {
+  color-scheme: light;
+}
+
+:root[color-scheme="dark"] {
+  color-scheme: dark;
+}

package/src/css/elevation.css

@@ -0,0 +1,23 @@
+/*
+ * Material Design 3 elevation levels, expressed as box-shadow.
+ * https://m3.material.io/styles/elevation/tokens
+ */
+:host,
+:root {
+  --md-sys-elevation-level0: none;
+  --md-sys-elevation-level1:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --md-sys-elevation-level2:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+    0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --md-sys-elevation-level3:
+    0px 1px 3px 0px rgba(0, 0, 0, 0.3),
+    0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+  --md-sys-elevation-level4:
+    0px 2px 3px 0px rgba(0, 0, 0, 0.3),
+    0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+  --md-sys-elevation-level5:
+    0px 4px 4px 0px rgba(0, 0, 0, 0.3),
+    0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+}

package/src/css/index.css

@@ -0,0 +1,11 @@
+/*
+ * Material Design 3 baseline tokens for lit-material.
+ * Import this once at the document root — CSS custom properties inherit
+ * through shadow boundaries, so every lit-material component picks it up.
+ */
+@import "./color.css";
+@import "./shape.css";
+@import "./typescale.css";
+@import "./elevation.css";
+@import "./state.css";
+@import "./motion.css";

package/src/css/motion.css

@@ -0,0 +1,11 @@
+/*
+ * Material Design 3 motion — easing and duration tokens (subset).
+ * https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
+ */
+:host,
+:root {
+  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-duration-short2: 100ms;
+  --md-sys-motion-duration-medium1: 250ms;
+}

package/src/css/shape.css

@@ -0,0 +1,14 @@
+/*
+ * Material Design 3 shape scale.
+ * https://m3.material.io/styles/shape/shape-scale-tokens
+ */
+:host,
+:root {
+  --md-sys-shape-corner-none: 0px;
+  --md-sys-shape-corner-extra-small: 4px;
+  --md-sys-shape-corner-small: 8px;
+  --md-sys-shape-corner-medium: 12px;
+  --md-sys-shape-corner-large: 16px;
+  --md-sys-shape-corner-extra-large: 28px;
+  --md-sys-shape-corner-full: 9999px;
+}

package/src/css/state.css

@@ -0,0 +1,14 @@
+/*
+ * Material Design 3 state layer opacities (hover/focus/pressed/dragged) and
+ * disabled-content/container opacities.
+ * https://m3.material.io/foundations/interaction/states/state-layers
+ */
+:host,
+:root {
+  --md-sys-state-hover-state-layer-opacity: 0.08;
+  --md-sys-state-focus-state-layer-opacity: 0.1;
+  --md-sys-state-pressed-state-layer-opacity: 0.1;
+  --md-sys-state-dragged-state-layer-opacity: 0.16;
+  --md-sys-state-disabled-container-opacity: 0.12;
+  --md-sys-state-disabled-content-opacity: 0.38;
+}

package/src/css/typescale.css

@@ -0,0 +1,18 @@
+/*
+ * Material Design 3 type scale — subset used by Phase 1 components.
+ * https://m3.material.io/styles/typography/type-scale-tokens
+ */
+:host,
+:root {
+  --md-sys-typescale-label-large-font: Roboto, system-ui, sans-serif;
+  --md-sys-typescale-label-large-weight: 500;
+  --md-sys-typescale-label-large-size: 0.875rem;
+  --md-sys-typescale-label-large-line-height: 1.25rem;
+  --md-sys-typescale-label-large-tracking: 0.00625rem;
+
+  --md-sys-typescale-label-medium-font: Roboto, system-ui, sans-serif;
+  --md-sys-typescale-label-medium-weight: 500;
+  --md-sys-typescale-label-medium-size: 0.75rem;
+  --md-sys-typescale-label-medium-line-height: 1rem;
+  --md-sys-typescale-label-medium-tracking: 0.03125rem;
+}