@tamagui/themes 2.7.7 → 3.0.0-beta.1093.1

package/dist/esm/v5-tokens.native.js

@@ -1,76 +1,76 @@
 import { sizeToSpace } from "./utils.native.js";
+
 var size = {
-  $0: 0,
-  "$0.25": 2,
-  "$0.5": 4,
-  "$0.75": 8,
-  $1: 20,
-  "$1.5": 24,
-  $2: 28,
-  "$2.5": 32,
-  $3: 36,
-  "$3.5": 40,
-  $4: 44,
-  $true: 44,
-  "$4.5": 48,
-  $5: 52,
-  $6: 64,
-  $7: 74,
-  $8: 84,
-  $9: 94,
-  $10: 104,
-  $11: 124,
-  $12: 144,
-  $13: 164,
-  $14: 184,
-  $15: 204,
-  $16: 224,
-  $17: 224,
-  $18: 244,
-  $19: 264,
-  $20: 284
+	0: 0,
+	"0-25": 2,
+	"0-5": 4,
+	"0-75": 8,
+	1: 20,
+	"1-5": 24,
+	2: 28,
+	"2-5": 32,
+	3: 36,
+	"3-5": 40,
+	4: 44,
+	"4-5": 48,
+	5: 52,
+	6: 64,
+	7: 74,
+	8: 84,
+	9: 94,
+	10: 104,
+	11: 124,
+	12: 144,
+	13: 164,
+	14: 184,
+	15: 204,
+	16: 224,
+	17: 224,
+	18: 244,
+	19: 264,
+	20: 284
 };
-var spaces = Object.entries(size).map(function (param) {
-  var [k, v] = param;
-  return [k, sizeToSpace(v)];
+var spaces = Object.entries(size).map(function(param) {
+	var [k, v] = param;
+	return [k, sizeToSpace(v)];
 });
-var spacesNegative = spaces.slice(1).map(function (param) {
-  var [k, v] = param;
-  return [`-${k.slice(1)}`, -v];
+var spacesNegative = spaces.slice(1).map(function(param) {
+	var [k, v] = param;
+	return [`-${k}`, -v];
 });
 var space = {
-  ...Object.fromEntries(spaces),
-  ...Object.fromEntries(spacesNegative)
+	...Object.fromEntries(spaces),
+	...Object.fromEntries(spacesNegative)
 };
 var zIndex = {
-  0: 0,
-  1: 100,
-  2: 200,
-  3: 300,
-  4: 400,
-  5: 500
+	0: 0,
+	1: 100,
+	2: 200,
+	3: 300,
+	4: 400,
+	5: 500
 };
 var radius = {
-  0: 0,
-  1: 3,
-  2: 5,
-  3: 7,
-  4: 9,
-  true: 9,
-  5: 10,
-  6: 16,
-  7: 19,
-  8: 22,
-  9: 26,
-  10: 34,
-  11: 42,
-  12: 50
+	0: 0,
+	1: 3,
+	2: 5,
+	3: 7,
+	4: 9,
+	5: 10,
+	6: 16,
+	7: 19,
+	8: 22,
+	9: 26,
+	10: 34,
+	11: 42,
+	12: 50
 };
 var tokens = {
-  radius,
-  zIndex,
-  space,
-  size
+	radius,
+	zIndex,
+	space,
+	size
 };
+
 export { radius, size, space, spaces, spacesNegative, tokens, zIndex };
 //# sourceMappingURL=v5-tokens.native.js.map

package/dist/esm/v5-tokens.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["sizeToSpace","size","$0","$1","$2","$3","$4","$true","$5","$6","$7","$8","$9","$10","$11","$12","$13","$14","$15","$16","$17","$18","$19","$20","spaces","Object","entries","map","param","k","v","spacesNegative","slice","space","fromEntries","zIndex","radius","true","tokens"],"sources":["v5-tokens.native.js"],"sourcesContent":["import { sizeToSpace } from \"./utils\";\nvar size = {\n  $0: 0,\n  \"$0.25\": 2,\n  \"$0.5\": 4,\n  \"$0.75\": 8,\n  $1: 20,\n  \"$1.5\": 24,\n  $2: 28,\n  \"$2.5\": 32,\n  $3: 36,\n  \"$3.5\": 40,\n  $4: 44,\n  $true: 44,\n  \"$4.5\": 48,\n  $5: 52,\n  $6: 64,\n  $7: 74,\n  $8: 84,\n  $9: 94,\n  $10: 104,\n  $11: 124,\n  $12: 144,\n  $13: 164,\n  $14: 184,\n  $15: 204,\n  $16: 224,\n  $17: 224,\n  $18: 244,\n  $19: 264,\n  $20: 284\n};\nvar spaces = Object.entries(size).map(function(param) {\n  var [k, v] = param;\n  return [\n    k,\n    sizeToSpace(v)\n  ];\n});\nvar spacesNegative = spaces.slice(1).map(function(param) {\n  var [k, v] = param;\n  return [\n    `-${k.slice(1)}`,\n    -v\n  ];\n});\nvar space = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative)\n};\nvar zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500\n};\nvar radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  true: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50\n};\nvar tokens = {\n  radius,\n  zIndex,\n  space,\n  size\n};\nexport {\n  radius,\n  size,\n  space,\n  spaces,\n  spacesNegative,\n  tokens,\n  zIndex\n};\n//# sourceMappingURL=v5-tokens.js.map\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAS;AACrC,IAAIC,IAAI,GAAG;EACTC,EAAE,EAAE,CAAC;EACL,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACVC,EAAE,EAAE,EAAE;EACN,MAAM,EAAE,EAAE;EACVC,EAAE,EAAE,EAAE;EACN,MAAM,EAAE,EAAE;EACVC,EAAE,EAAE,EAAE;EACN,MAAM,EAAE,EAAE;EACVC,EAAE,EAAE,EAAE;EACNC,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACVC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE,EAAE;EACNC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE,GAAG;EACRC,GAAG,EAAE;AACP,CAAC;AACD,IAAIC,MAAM,GAAGC,MAAM,CAACC,OAAO,CAACzB,IAAI,CAAC,CAAC0B,GAAG,CAAC,UAASC,KAAK,EAAE;EACpD,IAAI,CAACC,CAAC,EAAEC,CAAC,CAAC,GAAGF,KAAK;EAClB,OAAO,CACLC,CAAC,EACD7B,WAAW,CAAC8B,CAAC,CAAC,CACf;AACH,CAAC,CAAC;AACF,IAAIC,cAAc,GAAGP,MAAM,CAACQ,KAAK,CAAC,CAAC,CAAC,CAACL,GAAG,CAAC,UAASC,KAAK,EAAE;EACvD,IAAI,CAACC,CAAC,EAAEC,CAAC,CAAC,GAAGF,KAAK;EAClB,OAAO,CACL,IAAIC,CAAC,CAACG,KAAK,CAAC,CAAC,CAAC,EAAE,EAChB,CAACF,CAAC,CACH;AACH,CAAC,CAAC;AACF,IAAIG,KAAK,GAAG;EACV,GAAGR,MAAM,CAACS,WAAW,CAACV,MAAM,CAAC;EAC7B,GAAGC,MAAM,CAACS,WAAW,CAACH,cAAc;AACtC,CAAC;AACD,IAAII,MAAM,GAAG;EACX,CAAC,EAAE,CAAC;EACJ,CAAC,EAAE,GAAG;EACN,CAAC,EAAE,GAAG;EACN,CAAC,EAAE,GAAG;EACN,CAAC,EAAE,GAAG;EACN,CAAC,EAAE;AACL,CAAC;AACD,IAAIC,MAAM,GAAG;EACX,CAAC,EAAE,CAAC;EACJ,CAAC,EAAE,CAAC;EACJ,CAAC,EAAE,CAAC;EACJ,CAAC,EAAE,CAAC;EACJ,CAAC,EAAE,CAAC;EACJC,IAAI,EAAE,CAAC;EACP,CAAC,EAAE,EAAE;EACL,CAAC,EAAE,EAAE;EACL,CAAC,EAAE,EAAE;EACL,CAAC,EAAE,EAAE;EACL,CAAC,EAAE,EAAE;EACL,EAAE,EAAE,EAAE;EACN,EAAE,EAAE,EAAE;EACN,EAAE,EAAE;AACN,CAAC;AACD,IAAIC,MAAM,GAAG;EACXF,MAAM;EACND,MAAM;EACNF,KAAK;EACLhC;AACF,CAAC;AACD,SACEmC,MAAM,EACNnC,IAAI,EACJgC,KAAK,EACLT,MAAM,EACNO,cAAc,EACdO,MAAM,EACNH,MAAM","ignoreList":[]}
+{"version":3,"file":"v5-tokens.native.js","names":[],"sources":["esm/v5-tokens.native.js"],"sourcesContent":["import { sizeToSpace } from \"./utils\";\nvar size = {\n  0: 0,\n  \"0-25\": 2,\n  \"0-5\": 4,\n  \"0-75\": 8,\n  1: 20,\n  \"1-5\": 24,\n  2: 28,\n  \"2-5\": 32,\n  3: 36,\n  \"3-5\": 40,\n  4: 44,\n  \"4-5\": 48,\n  5: 52,\n  6: 64,\n  7: 74,\n  8: 84,\n  9: 94,\n  10: 104,\n  11: 124,\n  12: 144,\n  13: 164,\n  14: 184,\n  15: 204,\n  16: 224,\n  17: 224,\n  18: 244,\n  19: 264,\n  20: 284\n};\nvar spaces = Object.entries(size).map(function(param) {\n  var [k, v] = param;\n  return [\n    k,\n    sizeToSpace(v)\n  ];\n});\nvar spacesNegative = spaces.slice(1).map(function(param) {\n  var [k, v] = param;\n  return [\n    `-${k}`,\n    -v\n  ];\n});\nvar space = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative)\n};\nvar zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500\n};\nvar radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50\n};\nvar tokens = {\n  radius,\n  zIndex,\n  space,\n  size\n};\nexport {\n  radius,\n  size,\n  space,\n  spaces,\n  spacesNegative,\n  tokens,\n  zIndex\n};\n//# sourceMappingURL=v5-tokens.js.map\n"],"mappings":";;;AACA,IAAI,OAAO;CACT,GAAG;CACH,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,GAAG;CACH,OAAO;CACP,GAAG;CACH,OAAO;CACP,GAAG;CACH,OAAO;CACP,GAAG;CACH,OAAO;CACP,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AACA,IAAI,SAAS,OAAO,QAAQ,IAAI,CAAC,CAAC,IAAI,SAAS,OAAO;CACpD,IAAI,CAAC,GAAG,KAAK;CACb,OAAO,CACL,GACA,YAAY,CAAC,CACf;AACF,CAAC;AACD,IAAI,iBAAiB,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,SAAS,OAAO;CACvD,IAAI,CAAC,GAAG,KAAK;CACb,OAAO,CACL,IAAI,KACJ,CAAC,CACH;AACF,CAAC;AACD,IAAI,QAAQ;CACV,GAAG,OAAO,YAAY,MAAM;CAC5B,GAAG,OAAO,YAAY,cAAc;AACtC;AACA,IAAI,SAAS;CACX,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AACA,IAAI,SAAS;CACX,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AACA,IAAI,SAAS;CACX;CACA;CACA;CACA;AACF"}

package/dist/esm/v5.mjs

@@ -1,7 +1,4 @@
-import { createThemes } from "@tamagui/theme-builder";
 import { themes } from "./generated-v5.mjs";
-import { v5Templates } from "./v5-templates.mjs";
-export * from "./v5-themes.mjs";
 import { tokens } from "./v5-tokens.mjs";
-export { createThemes, themes, tokens, v5Templates };
-//# sourceMappingURL=v5.mjs.map
+
+export { themes, tokens };

package/dist/esm/v5.native.js

@@ -1,7 +1,4 @@
-import { createThemes } from "@tamagui/theme-builder";
 import { themes } from "./generated-v5.native.js";
-import { v5Templates } from "./v5-templates.native.js";
-export * from "./v5-themes.native.js";
 import { tokens } from "./v5-tokens.native.js";
-export { createThemes, themes, tokens, v5Templates };
-//# sourceMappingURL=v5.native.js.map
+
+export { themes, tokens };

package/package.json

@@ -1,12 +1,29 @@
 {
   "name": "@tamagui/themes",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.1093.1",
+  "license": "MIT",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "type": "module",
   "sideEffects": false,
-  "main": "dist/cjs",
-  "module": "dist/esm",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.mjs",
+  "react-native": "./dist/esm/index.native.js",
   "types": "./types/index.d.ts",
+  "files": [
+    "src",
+    "types",
+    "dist",
+    "index.cjs",
+    "index.d.ts",
+    "builder"
+  ],
+  "tamagui-build": {
+    "outputs": [
+      "cjs",
+      "esm",
+      "types"
+    ]
+  },
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -18,32 +35,14 @@
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/esm/index.mjs"
     },
-    "./v3": {
-      "types": "./types/v3.d.ts",
-      "react-native": "./dist/esm/v3.native.js",
-      "browser": "./dist/esm/v3.mjs",
-      "module": "./dist/esm/v3.mjs",
-      "import": "./dist/esm/v3.mjs",
-      "require": "./dist/cjs/v3.cjs",
-      "default": "./dist/esm/v3.mjs"
-    },
-    "./v3-themes": {
-      "types": "./types/v3-themes.d.ts",
-      "react-native": "./dist/esm/v3-themes.native.js",
-      "browser": "./dist/esm/v3-themes.mjs",
-      "module": "./dist/esm/v3-themes.mjs",
-      "import": "./dist/esm/v3-themes.mjs",
-      "require": "./dist/cjs/v3-themes.cjs",
-      "default": "./dist/esm/v3-themes.mjs"
-    },
-    "./v4": {
-      "types": "./types/v4.d.ts",
-      "react-native": "./dist/esm/v4.native.js",
-      "browser": "./dist/esm/v4.mjs",
-      "module": "./dist/esm/v4.mjs",
-      "import": "./dist/esm/v4.mjs",
-      "require": "./dist/cjs/v4.cjs",
-      "default": "./dist/esm/v4.mjs"
+    "./builder": {
+      "types": "./types/builder.d.ts",
+      "react-native": "./dist/esm/builder.native.js",
+      "browser": "./dist/esm/builder.mjs",
+      "module": "./dist/esm/builder.mjs",
+      "import": "./dist/esm/builder.mjs",
+      "require": "./dist/cjs/builder.cjs",
+      "default": "./dist/esm/builder.mjs"
     },
     "./v5": {
       "types": "./types/v5.d.ts",
@@ -54,6 +53,15 @@
       "require": "./dist/cjs/v5.cjs",
       "default": "./dist/esm/v5.mjs"
     },
+    "./v5-color-scales": {
+      "types": "./types/v5-color-scales.d.ts",
+      "react-native": "./dist/esm/v5-color-scales.native.js",
+      "browser": "./dist/esm/v5-color-scales.mjs",
+      "module": "./dist/esm/v5-color-scales.mjs",
+      "import": "./dist/esm/v5-color-scales.mjs",
+      "require": "./dist/cjs/v5-color-scales.cjs",
+      "default": "./dist/esm/v5-color-scales.mjs"
+    },
     "./v5-subtle": {
       "types": "./types/v5-subtle.d.ts",
       "react-native": "./dist/esm/v5-subtle.native.js",
@@ -62,35 +70,37 @@
       "import": "./dist/esm/v5-subtle.mjs",
       "require": "./dist/cjs/v5-subtle.cjs",
       "default": "./dist/esm/v5-subtle.mjs"
+    },
+    "./v5-tokens": {
+      "types": "./types/v5-tokens.d.ts",
+      "react-native": "./dist/esm/v5-tokens.native.js",
+      "browser": "./dist/esm/v5-tokens.mjs",
+      "module": "./dist/esm/v5-tokens.mjs",
+      "import": "./dist/esm/v5-tokens.mjs",
+      "require": "./dist/cjs/v5-tokens.cjs",
+      "default": "./dist/esm/v5-tokens.mjs"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "generate": "bun run generate:v5 & bun run generate:v5-subtle",
-    "generate:v5": "tamagui generate-themes ./src/v5-themes.ts ./src/generated-v5.ts",
-    "generate:v5-subtle": "tamagui generate-themes ./src/v5-themes-subtle.ts ./src/generated-v5-subtle.ts",
-    "generate:v3": "tamagui generate-themes ./src/v3-themes.ts ./src/generated-v3.ts",
-    "generate:v4": "tamagui generate-themes ./src/v4-default.ts ./src/generated-v4.ts",
-    "generate:v4-tamagui": "tamagui generate-themes ./src/v4-tamagui.ts ./src/generated-v4-tamagui.ts",
-    "test": "bun run generate",
+    "generate": "tamagui generate-themes ./src/themes.generate.ts ./src/generated.ts",
+    "check:v5-color-scales": "bun ./scripts/generate-v5-color-scales.ts --check",
+    "test": "bun test tests/themes.test.ts",
+    "test:types": "vitest --typecheck --run tests/themes.test-d.ts",
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/colors": "2.7.7",
-    "@tamagui/create-theme": "2.7.7",
-    "@tamagui/theme-builder": "2.7.7",
-    "@tamagui/web": "2.7.7",
-    "color2k": "^2.0.2"
+    "@tamagui/create-theme": "3.0.0-beta.1093.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
-    "@tamagui/cli": "2.7.7",
-    "vitest": "4.0.4"
+    "@tamagui/build": "3.0.0-beta.1093.1",
+    "@tamagui/cli": "3.0.0-beta.1093.1",
+    "vitest": "4.1.0"
   },
   "repository": {
     "type": "git",

package/src/builder.ts

@@ -0,0 +1,344 @@
+import {
+  createThemes,
+  type GetThemeContext,
+  type ThemeChildren,
+  type ThemeDefinitionContext,
+  type ThemeDefinitionObject,
+} from '@tamagui/create-theme'
+
+import { tokens, type ColorTokenName } from './tokens'
+
+export { createThemes } from '@tamagui/create-theme'
+export type { GetThemeContext, ThemeDefinitionContext } from '@tamagui/create-theme'
+export { colorTokens, tailwindColors, tokens } from './tokens'
+
+export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+
+export type Shade = (typeof shades)[number]
+
+type PaletteFromToken<Token> = Token extends `${infer Name}-${Shade}` ? Name : never
+export type Palette = PaletteFromToken<ColorTokenName>
+
+export type Scheme = 'light' | 'dark'
+export type Level = 1 | 2 | 3 | 4
+
+export const semanticThemeKeys = [
+  'background',
+  'background-hover',
+  'background-press',
+  'background-focus',
+  'border-color',
+  'border-color-hover',
+  'border-color-press',
+  'border-color-focus',
+  'color',
+  'color-hover',
+  'color-press',
+  'color-focus',
+  'placeholder-color',
+  'outline-color',
+  'shadow-color',
+  'accent-background',
+  'accent-color',
+] as const
+
+export type SemanticThemeKey = (typeof semanticThemeKeys)[number]
+export type ThemeScale<TokenName extends string = ColorTokenName> = Record<
+  SemanticThemeKey,
+  Shade | TokenName
+>
+
+const light = {
+  background: 'white',
+  'background-hover': 50,
+  'background-press': 'white',
+  'background-focus': 50,
+  'border-color': 200,
+  'border-color-hover': 300,
+  'border-color-press': 200,
+  'border-color-focus': 300,
+  color: 950,
+  'color-hover': 950,
+  'color-press': 950,
+  'color-focus': 950,
+  'placeholder-color': 500,
+  'outline-color': 400,
+  'shadow-color': 'shadow-3',
+  'accent-background': 'brand-600',
+  'accent-color': 'brand-50',
+} as const satisfies ThemeScale
+
+const dark = {
+  ...light,
+  background: 950,
+  'background-hover': 900,
+  'background-press': 950,
+  'background-focus': 900,
+  'border-color': 800,
+  'border-color-hover': 700,
+  'border-color-press': 800,
+  'border-color-focus': 700,
+  color: 50,
+  'color-hover': 50,
+  'color-press': 50,
+  'color-focus': 50,
+  'shadow-color': 'shadow-6',
+} as const satisfies ThemeScale
+
+const boldLight = {
+  background: 600,
+  'background-hover': 500,
+  'background-press': 600,
+  'background-focus': 500,
+  'border-color': 700,
+  'border-color-hover': 600,
+  'border-color-press': 700,
+  'border-color-focus': 600,
+  color: 50,
+  'color-hover': 50,
+  'color-press': 50,
+  'color-focus': 50,
+  'placeholder-color': 200,
+  'outline-color': 400,
+  'shadow-color': 'shadow-3',
+  'accent-background': 'brand-50',
+  'accent-color': 'brand-700',
+} as const satisfies ThemeScale
+
+const boldDark = {
+  ...boldLight,
+  background: 500,
+  'background-hover': 400,
+  'background-press': 500,
+  'background-focus': 400,
+  'border-color': 600,
+  'border-color-hover': 500,
+  'border-color-press': 600,
+  'border-color-focus': 500,
+  'shadow-color': 'shadow-6',
+} as const satisfies ThemeScale
+
+const tintLight = {
+  background: 100,
+  'background-hover': 50,
+  'background-press': 100,
+  'background-focus': 50,
+  'border-color': 300,
+  'border-color-hover': 400,
+  'border-color-press': 300,
+  'border-color-focus': 400,
+  color: 700,
+  'color-hover': 700,
+  'color-press': 700,
+  'color-focus': 700,
+  'placeholder-color': 400,
+  'outline-color': 400,
+  'shadow-color': 'shadow-3',
+  'accent-background': 'brand-600',
+  'accent-color': 'brand-50',
+} as const satisfies ThemeScale
+
+const tintDark = {
+  ...tintLight,
+  background: 900,
+  'background-hover': 800,
+  'background-press': 900,
+  'background-focus': 800,
+  'border-color': 700,
+  'border-color-hover': 600,
+  'border-color-press': 700,
+  'border-color-focus': 600,
+  color: 200,
+  'color-hover': 200,
+  'color-press': 200,
+  'color-focus': 200,
+  'placeholder-color': 500,
+  'outline-color': 600,
+  'shadow-color': 'shadow-6',
+} as const satisfies ThemeScale
+
+const ladder = ['white', ...shades, 'black'] as const
+
+export function raise<TokenName extends string>(
+  scale: ThemeScale<TokenName>,
+  steps: number
+): ThemeScale<TokenName> {
+  return Object.fromEntries(
+    Object.entries(scale).map(([key, value]) => {
+      if (!key.startsWith('background') && !key.startsWith('border-color')) {
+        return [key, value]
+      }
+      const index = ladder.indexOf(value as (typeof ladder)[number])
+      if (index === -1) return [key, value]
+      return [key, ladder[Math.max(0, Math.min(ladder.length - 1, index + steps))]]
+    })
+  ) as ThemeScale<TokenName>
+}
+
+export const scales = {
+  normal: {
+    light: {
+      1: light,
+      2: raise(light, 1),
+      3: raise(light, 2),
+      4: raise(light, 3),
+    },
+    dark: {
+      1: dark,
+      2: raise(dark, -1),
+      3: raise(dark, -2),
+      4: raise(dark, -3),
+    },
+  },
+  bold: {
+    light: {
+      1: boldLight,
+      2: raise(boldLight, -1),
+      3: raise(boldLight, -2),
+      4: raise(boldLight, -3),
+    },
+    dark: {
+      1: boldDark,
+      2: raise(boldDark, 1),
+      3: raise(boldDark, 2),
+      4: raise(boldDark, 3),
+    },
+  },
+  tint: {
+    light: {
+      1: tintLight,
+      2: raise(tintLight, -1),
+      3: raise(tintLight, 1),
+      4: raise(tintLight, 2),
+    },
+    dark: {
+      1: tintDark,
+      2: raise(tintDark, 1),
+      3: raise(tintDark, -1),
+      4: raise(tintDark, -2),
+    },
+  },
+} as const
+
+export type Treatment = keyof typeof scales
+
+export type DefaultRecipe = {
+  scheme: Scheme
+  palette: Palette
+  treatment?: Treatment
+  level?: Level
+}
+
+export type Ramp<PaletteName extends string = Palette> = Record<
+  `color${Level | 5 | 6 | 7 | 8 | 9 | 10 | 11}`,
+  `${PaletteName}-${Shade}`
+>
+
+export function ramp<const PaletteName extends string>(
+  palette: PaletteName,
+  scheme: Scheme
+): Ramp<PaletteName> {
+  const ordered = scheme === 'light' ? shades : [...shades].reverse()
+  return Object.fromEntries(
+    ordered.map((shade, index) => [`color${index + 1}`, `${palette}-${shade}`])
+  ) as Ramp<PaletteName>
+}
+
+export function fromShades<const PaletteName extends string, TokenName extends string>(
+  palette: PaletteName,
+  scale: ThemeScale<TokenName>
+): Record<SemanticThemeKey, `${PaletteName}-${Shade}` | TokenName> {
+  return Object.fromEntries(
+    Object.entries(scale).map(([key, value]) => [
+      key,
+      typeof value === 'number' ? `${palette}-${value}` : value,
+    ])
+  ) as Record<SemanticThemeKey, `${PaletteName}-${Shade}` | TokenName>
+}
+
+export function getTheme({ recipe }: GetThemeContext<typeof tokens, DefaultRecipe>) {
+  const scale = scales[recipe.treatment ?? 'normal'][recipe.scheme][recipe.level ?? 1]
+  return {
+    ...ramp(recipe.palette, recipe.scheme),
+    ...fromShades(recipe.palette, scale),
+  }
+}
+
+type LevelParent = Record<string, unknown> & { level?: Level }
+type LevelDefinition<Depth extends number> = (
+  context: ThemeDefinitionContext<LevelParent>
+) => { level: Level; children: LevelChildren<Depth> } | null
+
+export type LevelChildren<Depth extends number = 4> = Depth extends 4
+  ? {
+      level2: LevelDefinition<3>
+      level3: LevelDefinition<3>
+      level4: LevelDefinition<3>
+    }
+  : Depth extends 3
+    ? {
+        level2: LevelDefinition<2>
+        level3: LevelDefinition<2>
+        level4: LevelDefinition<2>
+      }
+    : Depth extends 2
+      ? {
+          level2: LevelDefinition<1>
+          level3: LevelDefinition<1>
+          level4: LevelDefinition<1>
+        }
+      : Depth extends 1
+        ? {
+            level2: LevelDefinition<0>
+            level3: LevelDefinition<0>
+            level4: LevelDefinition<0>
+          }
+        : {}
+
+function createLevels(max: Level, depth: 4): LevelChildren<4>
+function createLevels(max: Level, depth: 3): LevelChildren<3>
+function createLevels(max: Level, depth: 2): LevelChildren<2>
+function createLevels(max: Level, depth: 1): LevelChildren<1>
+function createLevels(max: Level, depth: 0): LevelChildren<0>
+function createLevels(max: Level, depth: number): ThemeChildren
+function createLevels(max: Level, depth: number): ThemeChildren {
+  if (depth === 0) return {}
+
+  const raiseLevel =
+    (by: number) =>
+    ({ parent }: ThemeDefinitionContext<LevelParent>): ThemeDefinitionObject | null => {
+      const current = parent.level ?? 1
+      const level = Math.min(current + by, max) as Level
+      if (level === current) return null
+      return { level, children: createLevels(max, depth - 1) }
+    }
+
+  return {
+    level2: raiseLevel(1),
+    level3: raiseLevel(2),
+    level4: raiseLevel(3),
+  }
+}
+
+export function levels(max: Level = 4): LevelChildren {
+  return createLevels(max, 4)
+}
+
+export const tree = {
+  light: { scheme: 'light', palette: 'gray' },
+  dark: { scheme: 'dark', palette: 'gray' },
+  children: {
+    ...levels(),
+    accent: { palette: 'brand', treatment: 'tint', children: levels() },
+    brand: { palette: 'brand', treatment: 'bold', children: levels() },
+    inverse: ({ parent }: ThemeDefinitionContext) => ({
+      scheme: parent.scheme === 'light' ? 'dark' : 'light',
+      children: levels(),
+    }),
+    red: { palette: 'red', treatment: 'tint', children: levels(2) },
+    yellow: { palette: 'yellow', treatment: 'tint', children: levels(2) },
+    green: { palette: 'green', treatment: 'tint', children: levels(2) },
+  },
+} as const
+
+export const themes = createThemes(tokens, tree, { getTheme })