@wordpress/theme 0.3.1-next.6deb34194.0 → 0.4.1-next.738bb1424.0

package/build-types/prebuilt/ts/token-types.d.ts

@@ -0,0 +1,49 @@
+/**
+ * This file is generated by the @wordpress/terrazzo-plugin-typescript-types plugin.
+ * Do not edit this file directly.
+ */
+/**
+ * Size scale for padding tokens.
+ */
+export type PaddingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Size scale for gap tokens.
+ */
+export type GapSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Size scale for border radius tokens.
+ */
+export type BorderRadiusSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Size scale for border width tokens.
+ */
+export type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Target elements that tokens can be applied to.
+ */
+export type Target = 'surface' | 'interactive' | 'track' | 'thumb' | 'content' | 'focus';
+/**
+ * Background color variants for surface elements.
+ */
+export type SurfaceBackgroundColor = 'neutral' | 'neutral-strong' | 'neutral-weak' | 'brand' | 'success' | 'success-weak' | 'info' | 'info-weak' | 'warning' | 'warning-weak' | 'caution' | 'caution-weak' | 'error' | 'error-weak';
+/**
+ * Background color variants for interactive elements.
+ */
+export type InteractiveBackgroundColor = 'neutral' | 'neutral-strong' | 'neutral-weak' | 'brand' | 'brand-strong' | 'brand-weak' | 'error' | 'error-strong' | 'error-weak';
+/**
+ * Foreground color variants for content text and icons.
+ */
+export type ContentForegroundColor = 'neutral' | 'neutral-weak' | 'success' | 'success-weak' | 'info' | 'info-weak' | 'warning' | 'warning-weak' | 'caution' | 'caution-weak' | 'error' | 'error-weak';
+/**
+ * Foreground color variants for interactive element text and icons.
+ */
+export type InteractiveForegroundColor = 'neutral' | 'neutral-strong' | 'neutral-weak' | 'brand' | 'brand-strong' | 'error' | 'error-strong';
+/**
+ * Stroke color variants for surface borders.
+ */
+export type SurfaceStrokeColor = 'neutral' | 'neutral-weak' | 'neutral-strong' | 'brand' | 'brand-strong' | 'success' | 'success-strong' | 'info' | 'info-strong' | 'warning' | 'warning-strong' | 'error' | 'error-strong';
+/**
+ * Stroke color variants for interactive element borders.
+ */
+export type InteractiveStrokeColor = 'neutral' | 'neutral-strong' | 'brand' | 'error' | 'error-strong';
+//# sourceMappingURL=token-types.d.ts.map

package/build-types/prebuilt/ts/token-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-types.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/token-types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,MAAM,GACf,SAAS,GACT,aAAa,GACb,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,cAAc,GACd,YAAY,GACZ,OAAO,GACP,cAAc,GACd,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,cAAc,GACd,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAC3B,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,OAAO,GACP,cAAc,GACd,SAAS,GACT,gBAAgB,GAChB,MAAM,GACN,aAAa,GACb,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/theme",
-	"version": "0.3.1-next.6deb34194.0",
+	"version": "0.4.1-next.738bb1424.0",
 	"description": "Theme and context provider for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,13 +22,21 @@
 		"node": ">=18.12.0",
 		"npm": ">=8.19.2"
 	},
-	"main": "build/index.js",
+	"files": [
+		"src",
+		"build",
+		"build-module",
+		"build-types",
+		"*.md"
+	],
+	"type": "module",
+	"main": "build/index.cjs",
 	"module": "build-module/index.js",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"default": "./build/index.cjs"
 		},
 		"./design-tokens.css": "./src/prebuilt/css/design-tokens.css",
 		"./design-tokens.js": "./src/prebuilt/js/design-tokens.js",
@@ -43,8 +51,8 @@
 		"build-module/color-ramps/lib/register-color-spaces.js"
 	],
 	"dependencies": {
-		"@wordpress/element": "^6.36.1-next.6deb34194.0",
-		"@wordpress/private-apis": "^1.36.1-next.6deb34194.0",
+		"@wordpress/element": "^6.36.1-next.738bb1424.0",
+		"@wordpress/private-apis": "^1.36.1-next.738bb1424.0",
 		"colorjs.io": "^0.5.2",
 		"memize": "^2.1.0"
 	},
@@ -62,7 +70,7 @@
 		"build:default-ramps": "node --import=esbuild-esm-loader/register bin/generate-default-ramps/index.ts",
 		"build:tokens": "node --import=esbuild-esm-loader/register bin/generate-primitive-tokens/index.ts && cross-env NODE_OPTIONS=--import=esbuild-esm-loader/register tz build --config terrazzo.config.ts",
 		"build": "npm run build:tokens && npm run build:default-ramps",
-		"postbuild": "prettier --write tokens/color.json src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
+		"postbuild": "prettier --write tokens/color.json tokens/modes src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
 	},
-	"gitHead": "457096e9e9b3896d2d4fe54fc19d7fb571ee9a44"
+	"gitHead": "ab1b004c0d61c295aa34bc86ea07f979343983ce"
 }

package/src/index.ts

@@ -1,2 +1,3 @@
-// Private APIs.
 export { privateApis } from './private-apis';
+export type * from './prebuilt/ts/token-types';
+export { type ThemeProvider } from './theme-provider';

package/src/prebuilt/css/design-tokens.css

@@ -21,6 +21,15 @@
 	--wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
 	--wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-brand-weak-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
+	--wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-error-disabled: #e2e2e2; /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
+	--wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-error-strong-disabled: #d2d2d2; /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
+	--wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-error-weak-disabled: #e2e2e2; /* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */
 	--wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */
 	--wpds-color-bg-interactive-neutral-active: #eaeaea; /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-neutral-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -69,6 +78,12 @@
 	--wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
 	--wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-fg-interactive-brand-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
+	--wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
+	--wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-fg-interactive-error-disabled: #8a8a8a; /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
+	--wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
+	--wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
+	--wpds-color-fg-interactive-error-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */
 	--wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
 	--wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -80,14 +95,15 @@
 	--wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */
 	--wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
 	--wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
-	--wpds-color-stroke-interactive-brand-disabled: #d8d8d8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
+	--wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
+	--wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
 	--wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
 	--wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
 	--wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
 	--wpds-color-stroke-interactive-neutral-disabled: #d8d8d8; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
 	--wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
 	--wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
 	--wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
 	--wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */

package/src/prebuilt/js/design-tokens.js

@@ -45,6 +45,15 @@ export default [
 	'--wpds-color-bg-interactive-brand-weak',
 	'--wpds-color-bg-interactive-brand-weak-active',
 	'--wpds-color-bg-interactive-brand-weak-disabled',
+	'--wpds-color-bg-interactive-error',
+	'--wpds-color-bg-interactive-error-active',
+	'--wpds-color-bg-interactive-error-disabled',
+	'--wpds-color-bg-interactive-error-strong',
+	'--wpds-color-bg-interactive-error-strong-active',
+	'--wpds-color-bg-interactive-error-strong-disabled',
+	'--wpds-color-bg-interactive-error-weak',
+	'--wpds-color-bg-interactive-error-weak-active',
+	'--wpds-color-bg-interactive-error-weak-disabled',
 	'--wpds-color-bg-track-neutral-weak',
 	'--wpds-color-bg-track-neutral',
 	'--wpds-color-bg-thumb-neutral-weak',
@@ -78,6 +87,12 @@ export default [
 	'--wpds-color-fg-interactive-brand-strong',
 	'--wpds-color-fg-interactive-brand-strong-active',
 	'--wpds-color-fg-interactive-brand-strong-disabled',
+	'--wpds-color-fg-interactive-error',
+	'--wpds-color-fg-interactive-error-active',
+	'--wpds-color-fg-interactive-error-disabled',
+	'--wpds-color-fg-interactive-error-strong',
+	'--wpds-color-fg-interactive-error-strong-active',
+	'--wpds-color-fg-interactive-error-strong-disabled',
 	'--wpds-color-stroke-surface-neutral',
 	'--wpds-color-stroke-surface-neutral-weak',
 	'--wpds-color-stroke-surface-neutral-strong',
@@ -97,7 +112,8 @@ export default [
 	'--wpds-color-stroke-interactive-neutral-strong',
 	'--wpds-color-stroke-interactive-brand',
 	'--wpds-color-stroke-interactive-brand-active',
-	'--wpds-color-stroke-interactive-brand-disabled',
+	'--wpds-color-stroke-interactive-error',
+	'--wpds-color-stroke-interactive-error-active',
 	'--wpds-color-stroke-interactive-error-strong',
 	'--wpds-color-stroke-focus-brand',
 	'--wpds-dimension-base',

package/src/prebuilt/ts/color-tokens.ts

@@ -6,19 +6,19 @@
 export default {
 	'primary-bgFill1': [ 'bg-interactive-brand-strong' ],
 	'primary-fgFill': [
-		'fg-interactive-brand-strong-active',
 		'fg-interactive-brand-strong',
+		'fg-interactive-brand-strong-active',
 	],
 	'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ],
 	'primary-surface2': [ 'bg-interactive-brand-active' ],
 	'primary-surface4': [ 'bg-interactive-brand-weak-active' ],
 	'primary-fgSurface3': [
-		'fg-interactive-brand-active',
 		'fg-interactive-brand',
+		'fg-interactive-brand-active',
 	],
 	'primary-stroke3': [
-		'bg-thumb-brand-active',
 		'bg-thumb-brand',
+		'bg-thumb-brand-active',
 		'stroke-focus-brand',
 		'stroke-interactive-brand',
 		'stroke-surface-brand-strong',
@@ -44,23 +44,44 @@ export default {
 	'warning-fgSurface3': [ 'fg-content-warning-weak' ],
 	'warning-stroke3': [ 'stroke-surface-warning-strong' ],
 	'warning-stroke1': [ 'stroke-surface-warning' ],
-	'error-surface2': [ 'bg-surface-error-weak' ],
-	'error-surface4': [ 'bg-surface-error' ],
+	'error-bgFill1': [ 'bg-interactive-error-strong' ],
+	'error-fgFill': [
+		'fg-interactive-error-strong',
+		'fg-interactive-error-strong-active',
+	],
+	'error-bgFill2': [ 'bg-interactive-error-strong-active' ],
+	'error-surface2': [
+		'bg-interactive-error-active',
+		'bg-surface-error-weak',
+	],
+	'error-surface4': [
+		'bg-interactive-error-weak-active',
+		'bg-surface-error',
+	],
 	'error-fgSurface4': [ 'fg-content-error' ],
-	'error-fgSurface3': [ 'fg-content-error-weak' ],
+	'error-fgSurface3': [
+		'fg-content-error-weak',
+		'fg-interactive-error',
+		'fg-interactive-error-active',
+	],
 	'error-stroke3': [
+		'stroke-interactive-error',
 		'stroke-interactive-error-strong',
 		'stroke-surface-error-strong',
 	],
+	'error-stroke4': [ 'stroke-interactive-error-active' ],
 	'error-stroke1': [ 'stroke-surface-error' ],
 	'bg-surface2': [ 'bg-surface-neutral' ],
 	'bg-surface6': [
 		'bg-interactive-brand-strong-disabled',
+		'bg-interactive-error-strong-disabled',
 		'bg-interactive-neutral-strong-disabled',
 	],
 	'bg-surface5': [
 		'bg-interactive-brand-disabled',
 		'bg-interactive-brand-weak-disabled',
+		'bg-interactive-error-disabled',
+		'bg-interactive-error-weak-disabled',
 		'bg-interactive-neutral-disabled',
 		'bg-interactive-neutral-weak-disabled',
 	],
@@ -71,17 +92,19 @@ export default {
 	'bg-surface3': [ 'bg-surface-neutral-strong' ],
 	'bg-fgSurface4': [
 		'fg-content-neutral',
-		'fg-interactive-neutral-active',
 		'fg-interactive-neutral',
+		'fg-interactive-neutral-active',
 	],
 	'bg-fgSurface3': [
 		'fg-content-neutral-weak',
 		'fg-interactive-brand-strong-disabled',
+		'fg-interactive-error-strong-disabled',
 		'fg-interactive-neutral-strong-disabled',
 		'fg-interactive-neutral-weak',
 	],
 	'bg-fgSurface2': [
 		'fg-interactive-brand-disabled',
+		'fg-interactive-error-disabled',
 		'fg-interactive-neutral-disabled',
 		'fg-interactive-neutral-weak-disabled',
 	],
@@ -98,7 +121,6 @@ export default {
 	'bg-stroke2': [
 		'bg-thumb-brand-disabled',
 		'bg-track-neutral',
-		'stroke-interactive-brand-disabled',
 		'stroke-interactive-neutral-disabled',
 		'stroke-surface-neutral',
 	],
@@ -106,8 +128,8 @@ export default {
 	'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ],
 	'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ],
 	'bg-fgFillInverted': [
-		'fg-interactive-neutral-strong-active',
 		'fg-interactive-neutral-strong',
+		'fg-interactive-neutral-strong-active',
 	],
 	'bg-surface1': [ 'bg-surface-neutral-weak' ],
 	'caution-surface2': [ 'bg-surface-caution-weak' ],

package/src/prebuilt/ts/token-types.ts

@@ -0,0 +1,125 @@
+/**
+ * This file is generated by the @wordpress/terrazzo-plugin-typescript-types plugin.
+ * Do not edit this file directly.
+ */
+
+/**
+ * Size scale for padding tokens.
+ */
+export type PaddingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * Size scale for gap tokens.
+ */
+export type GapSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Size scale for border radius tokens.
+ */
+export type BorderRadiusSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * Size scale for border width tokens.
+ */
+export type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * Target elements that tokens can be applied to.
+ */
+export type Target =
+	| 'surface'
+	| 'interactive'
+	| 'track'
+	| 'thumb'
+	| 'content'
+	| 'focus';
+
+/**
+ * Background color variants for surface elements.
+ */
+export type SurfaceBackgroundColor =
+	| 'neutral'
+	| 'neutral-strong'
+	| 'neutral-weak'
+	| 'brand'
+	| 'success'
+	| 'success-weak'
+	| 'info'
+	| 'info-weak'
+	| 'warning'
+	| 'warning-weak'
+	| 'caution'
+	| 'caution-weak'
+	| 'error'
+	| 'error-weak';
+
+/**
+ * Background color variants for interactive elements.
+ */
+export type InteractiveBackgroundColor =
+	| 'neutral'
+	| 'neutral-strong'
+	| 'neutral-weak'
+	| 'brand'
+	| 'brand-strong'
+	| 'brand-weak'
+	| 'error'
+	| 'error-strong'
+	| 'error-weak';
+
+/**
+ * Foreground color variants for content text and icons.
+ */
+export type ContentForegroundColor =
+	| 'neutral'
+	| 'neutral-weak'
+	| 'success'
+	| 'success-weak'
+	| 'info'
+	| 'info-weak'
+	| 'warning'
+	| 'warning-weak'
+	| 'caution'
+	| 'caution-weak'
+	| 'error'
+	| 'error-weak';
+
+/**
+ * Foreground color variants for interactive element text and icons.
+ */
+export type InteractiveForegroundColor =
+	| 'neutral'
+	| 'neutral-strong'
+	| 'neutral-weak'
+	| 'brand'
+	| 'brand-strong'
+	| 'error'
+	| 'error-strong';
+
+/**
+ * Stroke color variants for surface borders.
+ */
+export type SurfaceStrokeColor =
+	| 'neutral'
+	| 'neutral-weak'
+	| 'neutral-strong'
+	| 'brand'
+	| 'brand-strong'
+	| 'success'
+	| 'success-strong'
+	| 'info'
+	| 'info-strong'
+	| 'warning'
+	| 'warning-strong'
+	| 'error'
+	| 'error-strong';
+
+/**
+ * Stroke color variants for interactive element borders.
+ */
+export type InteractiveStrokeColor =
+	| 'neutral'
+	| 'neutral-strong'
+	| 'brand'
+	| 'error'
+	| 'error-strong';

package/bin/generate-default-ramps/index.ts

@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { writeFile } from 'node:fs/promises';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-/**
- * Internal dependencies
- */
-import {
-	DEFAULT_SEED_COLORS,
-	buildBgRamp,
-	buildAccentRamp,
-} from '../../src/color-ramps/index.ts';
-
-const __dirname = dirname( fileURLToPath( import.meta.url ) );
-
-const bgRamp = buildBgRamp( DEFAULT_SEED_COLORS.bg );
-const accentRamps = Object.fromEntries(
-	[ ...Object.entries( DEFAULT_SEED_COLORS ) ]
-		.filter( ( [ scaleName ] ) => scaleName !== 'bg' )
-		.map( ( [ scaleName, seed ] ) => [
-			scaleName,
-			buildAccentRamp( seed, bgRamp ),
-		] )
-);
-
-const ramps = { bg: bgRamp, ...accentRamps };
-
-const outputPath = join(
-	__dirname,
-	'../../src/color-ramps/lib/default-ramps.ts'
-);
-
-const content = `
-/**
- * Internal dependencies
- */
-import type { RampResult } from './types';
-import type { DEFAULT_SEED_COLORS } from './constants';
-
-export const DEFAULT_RAMPS: Record<
-	keyof typeof DEFAULT_SEED_COLORS,
-	RampResult
-> = ${ JSON.stringify( ramps ) };
-`;
-
-await writeFile( outputPath, content );

package/bin/generate-primitive-tokens/index.ts

@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import {
-	parse,
-	to,
-	serialize,
-	OKLCH,
-	sRGB,
-	type PlainColorObject,
-} from 'colorjs.io/fn';
-
-/**
- * Internal dependencies
- */
-import '../../src/color-ramps/lib/register-color-spaces';
-import {
-	DEFAULT_SEED_COLORS,
-	buildBgRamp,
-	buildAccentRamp,
-} from '../../src/color-ramps/index';
-
-const __filename = fileURLToPath( import.meta.url );
-const __dirname = path.dirname( __filename );
-
-// Path to the color.json file
-const colorJsonPath = path.join( __dirname, '../../tokens/color.json' );
-
-const transformColorStringToDTCGValue = ( color: string ) => {
-	if ( /oklch|p3/.test( color ) ) {
-		let parsed: PlainColorObject;
-		try {
-			parsed = to( parse( color ), OKLCH );
-		} catch {
-			return color;
-		}
-
-		const coords = parsed.coords;
-		return {
-			colorSpace: 'oklch',
-			components: [
-				Math.floor( 10000 * coords[ 0 ] ) / 10000, // l
-				coords[ 1 ], // c
-				isNaN( coords[ 2 ] ) ? 0 : coords[ 2 ], // h
-			],
-			...( parsed.alpha < 1 ? { alpha: parsed.alpha } : undefined ),
-			hex: serialize( to( parsed, sRGB ), { format: 'hex' } ),
-		};
-	}
-
-	return color;
-};
-
-// Main function
-function generatePrimitiveColorTokens() {
-	const startTime = performance.now();
-	console.log( '🎨 Starting primitive color tokens generation...' );
-
-	try {
-		// Read the color.json file
-		const colorJson = JSON.parse(
-			fs.readFileSync( colorJsonPath, 'utf8' )
-		);
-
-		// Build the ramps
-		const bgRamp = buildBgRamp( DEFAULT_SEED_COLORS.bg );
-		const accentRamps = [ ...Object.entries( DEFAULT_SEED_COLORS ) ]
-			.filter( ( [ scaleName ] ) => scaleName !== 'bg' )
-			.map( ( [ scaleName, seed ] ) => ( {
-				scaleName,
-				ramp: buildAccentRamp( seed, bgRamp ),
-			} ) );
-
-		// Convert the ramp values in a DTCG compatible format
-		[
-			{
-				scaleName: 'bg',
-				ramp: bgRamp,
-			},
-			...accentRamps,
-		].forEach( ( { scaleName, ramp } ) => {
-			colorJson.color.primitive[ scaleName ] = {};
-			for ( const [ tokenName, tokenValue ] of Object.entries(
-				ramp.ramp
-			) ) {
-				colorJson.color.primitive[ scaleName ][ tokenName ] = {
-					$value: transformColorStringToDTCGValue( tokenValue ),
-				};
-			}
-		} );
-
-		// Write the updated JSON back to the file with proper formatting
-		fs.writeFileSync(
-			colorJsonPath,
-			JSON.stringify( colorJson, null, '\t' )
-		);
-
-		const endTime = performance.now();
-		const duration = endTime - startTime;
-		console.log(
-			`✅ Successfully updated color.json (${ duration.toFixed( 2 ) }ms)`
-		);
-	} catch ( error ) {
-		const endTime = performance.now();
-		const duration = endTime - startTime;
-		console.error(
-			`❌ Error updating color tokens after ${ duration.toFixed(
-				2
-			) }ms:`,
-			error
-		);
-		process.exit( 1 );
-	}
-}
-
-// Run the script
-generatePrimitiveColorTokens();