@wordpress/theme 0.2.1-next.16d95556a.0 → 0.3.0

package/build-types/color-ramps/lib/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/constants.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAC1C,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAM1C,eAAO,MAAM,wBAAwB,QAAQ,CAAC;AAO9C,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAO9C,eAAO,MAAM,sCAAsC;;;;;;;;;CAGzC,CAAC;AAGX,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE;IACnC,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf,EA+BA,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;CAQ/B,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/constants.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAC1C,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAM1C,eAAO,MAAM,wBAAwB,OAAO,CAAC;AAO7C,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAO9C,eAAO,MAAM,sCAAsC;;;;;;;;;CAGzC,CAAC;AAGX,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE;IACnC,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf,EA+BA,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;CAQ/B,CAAC"}

package/build-types/color-ramps/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/index.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAYjC,OAAO,KAAK,EAEX,IAAI,EACJ,aAAa,EACb,UAAU,EACV,UAAU,EACV,MAAM,SAAS,CAAC;AA6KjB,wBAAgB,SAAS,CACxB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,EAClB,EACC,aAAa,EACb,YAAY,EACZ,2BAAkC,GAClC,GAAE;IACF,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACjC,GACJ,UAAU,CAgHZ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/index.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAWjC,OAAO,KAAK,EAEX,IAAI,EACJ,aAAa,EACb,UAAU,EACV,UAAU,EACV,MAAM,SAAS,CAAC;AA6KjB,wBAAgB,SAAS,CACxB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,EAClB,EACC,aAAa,EACb,YAAY,EACZ,2BAAkC,GAClC,GAAE;IACF,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACjC,GACJ,UAAU,CAgHZ"}

package/build-types/color-ramps/lib/utils.d.ts

@@ -7,11 +7,6 @@ import { type ColorTypes } from 'colorjs.io/fn';
  */
 import './register-color-spaces';
 import type { Ramp, RampConfig, RampDirection } from './types';
-/**
- * Make sure that a color is valid in the p3 gamut, and converts it to oklch.
- * @param c
- */
-export declare const clampToGamut: (c: ColorTypes) => import("colorjs.io/fn").PlainColorObject;
 /**
  * Topologically sort steps based on their dependencies
  * @param config - The steps configuration object

package/build-types/color-ramps/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAA0B,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAExE;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAUjC,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG/D;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAK,GAAG,UAAU,6CACa,CAAC;AAwCzD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAE,MAAM,EAAE,UAAU,GAAI,CAAE,MAAM,IAAI,CAAE,EAAE,CAuCvE;AACD;;;;;GAKG;AACH,wBAAgB,YAAY,CAC3B,QAAQ,EAAE,MAAM,IAAI,EACpB,MAAM,EAAE,UAAU,GAChB,CAAE,MAAM,IAAI,CAAE,EAAE,CAqBlB;AAED;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC5C,IAAI,EAAE,UAAU,EAChB,aAAa,CAAC,EAAE,OAAO,GACrB;IACF,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,aAAa,CAAC;CACrB,CASA;AAED,wBAAgB,oBAAoB,CAAE,MAAM,EAAE,MAAM,UAOnD;AAED;;;;;;;GAOG;AACH,wBAAgB,kCAAkC,CACjD,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,aAAa,UAIxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAE,CAAC,EACjC,UAAU,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,CAAC,EAC9B,cAAc,EAAE,CAAE,CAAC,EAAE,CAAC,KAAM,MAAM,EAClC,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,GACpB,CAAC,CAqDH"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAUjC,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAyC/D;;;GAGG;AACH,wBAAgB,gBAAgB,CAAE,MAAM,EAAE,UAAU,GAAI,CAAE,MAAM,IAAI,CAAE,EAAE,CAuCvE;AACD;;;;;GAKG;AACH,wBAAgB,YAAY,CAC3B,QAAQ,EAAE,MAAM,IAAI,EACpB,MAAM,EAAE,UAAU,GAChB,CAAE,MAAM,IAAI,CAAE,EAAE,CAqBlB;AAED;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC5C,IAAI,EAAE,UAAU,EAChB,aAAa,CAAC,EAAE,OAAO,GACrB;IACF,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,aAAa,CAAC;CACrB,CASA;AAED,wBAAgB,oBAAoB,CAAE,MAAM,EAAE,MAAM,UAOnD;AAED;;;;;;;GAOG;AACH,wBAAgB,kCAAkC,CACjD,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,aAAa,UAIxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAE,CAAC,EACjC,UAAU,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,CAAC,EAC9B,cAAc,EAAE,CAAE,CAAC,EAAE,CAAC,KAAM,MAAM,EAClC,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,GACpB,CAAC,CAqDH"}

package/build-types/color-ramps/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4FzD,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA+H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4FzD,CAAC"}

package/build-types/stories/index.story.d.ts

@@ -6,6 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react';
  * Internal dependencies
  */
 import { ThemeProvider } from '../theme-provider';
+import '../prebuilt/css/design-tokens.css';
 declare const meta: Meta<typeof ThemeProvider>;
 export default meta;
 export declare const Default: StoryObj<typeof ThemeProvider>;

package/build-types/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAavD;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,aAAa,CAgBrC,CAAC;AACF,eAAe,IAAI,CAAC;AA2GpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,aAAa,CAInD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAE,OAAO,aAAa,CA+CtD,CAAC;AA6CF,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,aAAa,CAiDhE,CAAC;AA0EF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,aAAa,CA6CzD,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAavD;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,mCAAmC,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,aAAa,CAgBrC,CAAC;AACF,eAAe,IAAI,CAAC;AA2GpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,aAAa,CAInD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAE,OAAO,aAAa,CA+CtD,CAAC;AA6CF,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,aAAa,CA8DhE,CAAC;AA0EF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,aAAa,CA6CzD,CAAC"}

package/build-types/theme-provider.d.ts

@@ -1,3 +1,3 @@
 import { type ThemeProviderProps } from './types';
-export declare const ThemeProvider: ({ children, color, isRoot, }: ThemeProviderProps) => import("react").JSX.Element;
+export declare const ThemeProvider: ({ children, color, isRoot, density, }: ThemeProviderProps) => import("react").JSX.Element;
 //# sourceMappingURL=theme-provider.d.ts.map

package/build-types/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAgClD,eAAO,MAAM,aAAa,GAAK,8BAI5B,kBAAkB,gCAmCpB,CAAC"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAgClD,eAAO,MAAM,aAAa,GAAK,uCAK5B,kBAAkB,gCAoCpB,CAAC"}

package/build-types/types.d.ts

@@ -22,6 +22,14 @@ export interface ThemeProviderSettings {
          */
         bg?: string;
     };
+    /**
+     * The density of the theme. If left unspecified, the theme inherits from
+     * the density of the closest `ThemeProvider`, or uses the default density
+     * if there is no inherited density.
+     *
+     * @default undefined
+     */
+    density?: undefined | 'default' | 'compact' | 'comfortable';
 }
 export interface ThemeProviderProps extends ThemeProviderSettings {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE;QACP;;;;;WAKG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;;;;WAKG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;CACF;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE;QACP;;;;;WAKG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;;;;WAKG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;CAC5D;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/docs/ds-tokens.md

@@ -111,13 +111,14 @@ Do not edit directly.
 
 ### Dimension
 
-| Variable name                              | Description                      |
-| ------------------------------------------ | -------------------------------- |
-| `--wpds-dimension-base`                    | Base dimension unit              |
-| `--wpds-dimension-padding-surface-x-small` | Extra small spacing for surfaces |
-| `--wpds-dimension-padding-surface-small`   | Small spacing for surfaces       |
-| `--wpds-dimension-padding-surface-medium`  | Medium spacing for surfaces      |
-| `--wpds-dimension-padding-surface-large`   | Large spacing for surfaces       |
+| Variable name                          | Description                         |
+| -------------------------------------- | ----------------------------------- |
+| `--wpds-dimension-base`                | Base dimension unit                 |
+| `--wpds-dimension-padding-surface-2xs` | 2x extra small spacing for surfaces |
+| `--wpds-dimension-padding-surface-xs`  | Extra small spacing for surfaces    |
+| `--wpds-dimension-padding-surface-sm`  | Small spacing for surfaces          |
+| `--wpds-dimension-padding-surface-md`  | Medium spacing for surfaces         |
+| `--wpds-dimension-padding-surface-lg`  | Large spacing for surfaces          |
 
 ### Elevation
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/theme",
-	"version": "0.2.1-next.16d95556a.0",
+	"version": "0.3.0",
 	"description": "Theme and context provider for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,8 +43,8 @@
 		"build-module/color-ramps/lib/register-color-spaces.js"
 	],
 	"dependencies": {
-		"@wordpress/element": "^6.35.1-next.16d95556a.0",
-		"@wordpress/private-apis": "^1.35.1-next.16d95556a.0",
+		"@wordpress/element": "^6.36.0",
+		"@wordpress/private-apis": "^1.36.0",
 		"colorjs.io": "^0.5.2",
 		"memize": "^2.1.0"
 	},
@@ -64,5 +64,5 @@
 		"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"
 	},
-	"gitHead": "59a9383612bbe16e21af84d13b035bfbca7fe833"
+	"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
 }

package/src/color-ramps/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, OKLCH, parse, serialize } from 'colorjs.io/fn';
+import { get, OKLCH, parse } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -89,6 +89,7 @@ export function checkAccessibleCombinations( {
 		fgName: keyof Ramp;
 		fgColor: string;
 		unmetContrast: number;
+		achievedContrast: number;
 	}[] = [];
 
 	// Assess combinations within each ramp
@@ -96,15 +97,17 @@ export function checkAccessibleCombinations( {
 		CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
 			for ( const bg of bgs ) {
 				for ( const fg of fgs ) {
-					const bgColor = parse( ramp.ramp[ bg ] );
-					const fgColor = parse( ramp.ramp[ fg ] );
-					if ( getContrast( bgColor, fgColor ) < target ) {
+					const bgColor = ramp.ramp[ bg ];
+					const fgColor = ramp.ramp[ fg ];
+					const achievedContrast = getContrast( bgColor, fgColor );
+					if ( achievedContrast < target ) {
 						unmetTargets.push( {
 							bgName: bg,
-							bgColor: serialize( bgColor ),
+							bgColor,
 							fgName: fg,
-							fgColor: serialize( fgColor ),
+							fgColor,
 							unmetContrast: target,
+							achievedContrast,
 						} );
 					}
 				}
@@ -116,15 +119,17 @@ export function checkAccessibleCombinations( {
 		CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
 			for ( const bg of bgs ) {
 				for ( const fg of fgs ) {
-					const bgColor = parse( bgRamp.ramp[ bg ] );
-					const fgColor = parse( ramp.ramp[ fg ] );
-					if ( getContrast( bgColor, fgColor ) < target ) {
+					const bgColor = bgRamp.ramp[ bg ];
+					const fgColor = ramp.ramp[ fg ];
+					const achievedContrast = getContrast( bgColor, fgColor );
+					if ( achievedContrast < target ) {
 						unmetTargets.push( {
 							bgName: bg,
-							bgColor: serialize( bgColor ),
+							bgColor,
 							fgName: fg,
-							fgColor: serialize( fgColor ),
+							fgColor,
 							unmetContrast: target,
+							achievedContrast,
 						} );
 					}
 				}

package/src/color-ramps/lib/color-utils.ts

@@ -3,9 +3,11 @@
  */
 import {
 	to,
+	toGamut,
 	serialize,
 	contrastWCAG21,
 	sRGB,
+	OKLCH,
 	type ColorTypes,
 } from 'colorjs.io/fn';
 
@@ -32,3 +34,12 @@ export function getColorString( color: ColorTypes ): string {
 export function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {
 	return contrastWCAG21( colorA, colorB );
 }
+
+/**
+ * Make sure that a color is valid in the sRGB gamut and convert it to OKLCH.
+ * @param c
+ */
+export function clampToGamut( c: ColorTypes ) {
+	// map into sRGB using CSS OKLCH method
+	return to( toGamut( c, { space: sRGB, method: 'css' } ), OKLCH );
+}

package/src/color-ramps/lib/constants.ts

@@ -14,9 +14,9 @@ export const BLACK = to( 'black', OKLCH );
 
 // Margin added to target contrasts to counter for algorithm approximations and rounding errors.
 // - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.
-// - the max contrast between adjacent RGB values is 1.016, so half of the difference (0.008) can be rounding error.
-// - the sum is 0.012: the margin we add to ensure that the target contrast is met after all the rounding.
-export const UNIVERSAL_CONTRAST_TOPUP = 0.012;
+// - the max contrast between adjacent RGB values is 1.016, so 0.016 is the maximum total rounding error between two values.
+// - the sum is 0.02: the margin we add to ensure that the target contrast is met after all the rounding.
+export const UNIVERSAL_CONTRAST_TOPUP = 0.02;
 
 // When enabling "lighter direction" bias, this is the amount by which
 // black text contrast needs to be greater than white text contrast.

package/src/color-ramps/lib/default-ramps.ts

@@ -13,19 +13,19 @@ export const DEFAULT_RAMPS: Record<
 			surface2: '#f8f8f8',
 			bgFill1: '#555',
 			fgFill: '#f0f0f0',
-			bgFill2: '#494949',
-			surface6: '#d3d3d3',
-			surface5: '#e3e3e3',
+			bgFill2: '#484848',
+			surface6: '#d2d2d2',
+			surface5: '#e2e2e2',
 			surface4: '#eaeaea',
 			surface3: '#fff',
 			fgSurface4: '#1e1e1e',
-			fgSurface3: '#6e6e6e',
-			fgSurface2: '#8b8b8b',
-			fgSurface1: '#ababab',
-			stroke3: '#8b8b8b',
-			stroke4: '#6d6d6d',
-			stroke2: '#adadad',
-			stroke1: '#cfcfcf',
+			fgSurface3: '#6d6d6d',
+			fgSurface2: '#8a8a8a',
+			fgSurface1: '#aaa',
+			stroke3: '#8a8a8a',
+			stroke4: '#6c6c6c',
+			stroke2: '#d8d8d8',
+			stroke1: '#e0e0e0',
 			bgFillDark: '#1e1e1e',
 			fgFillDark: '#f0f0f0',
 			bgFillInverted2: '#1e1e1e',
@@ -39,26 +39,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#3858e9',
 			fgFill: '#eff0f2',
-			bgFill2: '#2e49da',
+			bgFill2: '#2e49d9',
 			surface2: '#f6f8fc',
-			surface6: '#c7d3ef',
-			surface5: '#dce3f5',
-			surface4: '#e5ebf7',
+			surface6: '#c7d2ee',
+			surface5: '#dbe2f4',
+			surface4: '#e4eaf7',
 			surface3: '#fff',
-			fgSurface4: '#080071',
+			fgSurface4: '#0b0070',
 			fgSurface3: '#3858e9',
-			fgSurface2: '#5881ff',
-			fgSurface1: '#84a9ff',
+			fgSurface2: '#5b82ff',
+			fgSurface1: '#85a9ff',
 			stroke3: '#3858e9',
 			stroke4: '#2337c8',
-			stroke2: '#6d83bf',
-			stroke1: '#91a2cf',
+			stroke2: '#9aaad3',
+			stroke1: '#a2b1d6',
 			bgFillDark: '#1b1e26',
 			fgFillDark: '#eff0f2',
 			bgFillInverted2: '#1b1e26',
-			bgFillInverted1: '#12009f',
+			bgFillInverted1: '#13009f',
 			fgFillInverted: '#eff0f2',
-			surface1: '#edf0fa',
+			surface1: '#ecf0f9',
 		},
 		direction: 'darker',
 	},
@@ -66,26 +66,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#0090ff',
 			fgFill: '#1b1e23',
-			bgFill2: '#0081ef',
+			bgFill2: '#007fed',
 			surface2: '#f5f9fd',
-			surface6: '#bed6f1',
-			surface5: '#d5e5f6',
-			surface4: '#e0ebf8',
+			surface6: '#bdd5f1',
+			surface5: '#d4e4f6',
+			surface4: '#dfebf8',
 			surface3: '#fff',
-			fgSurface4: '#001758',
-			fgSurface3: '#006dd9',
-			fgSurface2: '#008cfb',
-			fgSurface1: '#53b1ff',
-			stroke3: '#006dd9',
-			stroke4: '#004eb8',
-			stroke2: '#5d8fc6',
-			stroke1: '#8aaed6',
+			fgSurface4: '#001b4f',
+			fgSurface3: '#006bd7',
+			fgSurface2: '#008bfa',
+			fgSurface1: '#59b0ff',
+			stroke3: '#006bd7',
+			stroke4: '#004fa9',
+			stroke2: '#94b5d9',
+			stroke1: '#9fbcdd',
 			bgFillDark: '#1b1e23',
 			fgFillDark: '#eff0f2',
 			bgFillInverted2: '#1b1e23',
-			bgFillInverted1: '#002675',
+			bgFillInverted1: '#002a69',
 			fgFillInverted: '#eff0f2',
-			surface1: '#eaf1fa',
+			surface1: '#e9f1fa',
 		},
 		direction: 'darker',
 	},
@@ -93,26 +93,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#4ab866',
 			fgFill: '#1b1f1c',
-			bgFill2: '#37a857',
+			bgFill2: '#37a756',
 			surface2: '#f0fcf2',
 			surface6: '#7eea95',
-			surface5: '#b7f2c1',
-			surface4: '#cdf5d3',
+			surface5: '#b5f1bf',
+			surface4: '#cbf5d1',
 			surface3: '#fff',
-			fgSurface4: '#002b00',
-			fgSurface3: '#008031',
-			fgSurface2: '#2c9f4e',
-			fgSurface1: '#54c16f',
-			stroke3: '#008031',
-			stroke4: '#006314',
-			stroke2: '#61986b',
-			stroke1: '#77ba84',
+			fgSurface4: '#002900',
+			fgSurface3: '#007f30',
+			fgSurface2: '#2b9e4e',
+			fgSurface1: '#53c06e',
+			stroke3: '#007f30',
+			stroke4: '#006013',
+			stroke2: '#7dc189',
+			stroke1: '#82c98f',
 			bgFillDark: '#1b1f1c',
 			fgFillDark: '#edf2ed',
 			bgFillInverted2: '#1b1f1c',
-			bgFillInverted1: '#003800',
+			bgFillInverted1: '#003701',
 			fgFillInverted: '#edf2ed',
-			surface1: '#ddf8e1',
+			surface1: '#dbf8df',
 		},
 		direction: 'darker',
 	},
@@ -120,26 +120,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#f0d149',
 			fgFill: '#1f1e1b',
-			bgFill2: '#ddbe30',
+			bgFill2: '#dcbe2f',
 			surface2: '#fdf9e7',
-			surface6: '#ecd367',
-			surface5: '#f5e399',
-			surface4: '#f8ebb5',
+			surface6: '#ecd264',
+			surface5: '#f5e297',
+			surface4: '#f7eab3',
 			surface3: '#fff',
-			fgSurface4: '#291d00',
-			fgSurface3: '#876b00',
-			fgSurface2: '#a78900',
-			fgSurface1: '#c9aa00',
-			stroke3: '#876b00',
-			stroke4: '#675000',
-			stroke2: '#978c60',
-			stroke1: '#b8ab75',
+			fgSurface4: '#281d00',
+			fgSurface3: '#836b00',
+			fgSurface2: '#a58700',
+			fgSurface1: '#c7a900',
+			stroke3: '#836b00',
+			stroke4: '#635000',
+			stroke2: '#bfb17a',
+			stroke1: '#c7b97f',
 			bgFillDark: '#1f1e1b',
 			fgFillDark: '#f6f1da',
 			bgFillInverted2: '#1f1e1b',
-			bgFillInverted1: '#3a2b00',
+			bgFillInverted1: '#392c00',
 			fgFillInverted: '#f6f1da',
-			surface1: '#faf1cd',
+			surface1: '#f9f0c8',
 		},
 		direction: 'darker',
 	},
@@ -147,26 +147,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#f0b849',
 			fgFill: '#1f1e1b',
-			bgFill2: '#dea633',
+			bgFill2: '#dda633',
 			surface2: '#fdf7ee',
-			surface6: '#f1ce90',
-			surface5: '#f6e0bb',
-			surface4: '#f8e9cd',
+			surface6: '#f1ce8f',
+			surface5: '#f6e0b9',
+			surface4: '#f8e8cc',
 			surface3: '#fff',
-			fgSurface4: '#2f1800',
-			fgSurface3: '#976300',
-			fgSurface2: '#b78100',
-			fgSurface1: '#d9a22e',
-			stroke3: '#976300',
-			stroke4: '#754900',
-			stroke2: '#9f8860',
-			stroke1: '#c2a776',
+			fgSurface4: '#2e1900',
+			fgSurface3: '#936400',
+			fgSurface2: '#b68000',
+			fgSurface1: '#d8a12c',
+			stroke3: '#936400',
+			stroke4: '#704a00',
+			stroke2: '#caae7c',
+			stroke1: '#d2b581',
 			bgFillDark: '#1f1e1b',
 			fgFillDark: '#f3f0e9',
 			bgFillInverted2: '#1f1e1b',
-			bgFillInverted1: '#432600',
+			bgFillInverted1: '#422800',
 			fgFillInverted: '#f3f0e9',
-			surface1: '#faefdc',
+			surface1: '#faeeda',
 		},
 		direction: 'darker',
 	},
@@ -174,26 +174,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#cc1818',
 			fgFill: '#f2efef',
-			bgFill2: '#bc0001',
+			bgFill2: '#b90000',
 			surface2: '#fdf6f5',
-			surface6: '#f5c9c2',
-			surface5: '#f9dcd8',
-			surface4: '#fae5e2',
+			surface6: '#f5c8c1',
+			surface5: '#f9dbd7',
+			surface4: '#fae4e1',
 			surface3: '#fff',
-			fgSurface4: '#4a0000',
+			fgSurface4: '#470000',
 			fgSurface3: '#cc1818',
-			fgSurface2: '#f84d41',
-			fgSurface1: '#ff8373',
+			fgSurface2: '#f74c40',
+			fgSurface1: '#ff8879',
 			stroke3: '#cc1818',
-			stroke4: '#a70000',
-			stroke2: '#ca675c',
-			stroke1: '#dc8e83',
+			stroke4: '#9d0000',
+			stroke2: '#de988e',
+			stroke1: '#e1a198',
 			bgFillDark: '#231c1b',
 			fgFillDark: '#f2efef',
 			bgFillInverted2: '#231c1b',
-			bgFillInverted1: '#680000',
+			bgFillInverted1: '#640000',
 			fgFillInverted: '#f2efef',
-			surface1: '#fcedea',
+			surface1: '#fbece9',
 		},
 		direction: 'darker',
 	},

package/src/color-ramps/lib/find-color-with-constraints.ts

@@ -7,9 +7,9 @@ import { get, OKLCH, type ColorTypes } from 'colorjs.io/fn';
  * Internal dependencies
  */
 import './register-color-spaces';
-import { clampToGamut, solveWithBisect } from './utils';
+import { solveWithBisect } from './utils';
 import { WHITE, BLACK, CONTRAST_EPSILON } from './constants';
-import { getContrast } from './color-utils';
+import { clampToGamut, getContrast } from './color-utils';
 import { type TaperChromaOptions, taperChroma } from './taper-chroma';
 
 /**

package/src/color-ramps/lib/index.ts

@@ -15,10 +15,9 @@ import {
  * Internal dependencies
  */
 import './register-color-spaces';
-import { getContrast, getColorString } from './color-utils';
+import { clampToGamut, getContrast, getColorString } from './color-utils';
 import { findColorMeetingRequirements } from './find-color-with-constraints';
 import {
-	clampToGamut,
 	sortByDependency,
 	computeBetterFgColorDirection,
 	adjustContrastTarget,

package/src/color-ramps/lib/ramp-configs.ts

@@ -142,7 +142,7 @@ export const BG_RAMP_CONFIG: RampConfig = {
 		contrast: {
 			reference: 'stroke3',
 			followDirection: 'opposite',
-			target: 2.2,
+			target: 2.6,
 		},
 		taperChromaOptions: STROKE_TAPER_CHROMA,
 	},
@@ -150,7 +150,7 @@ export const BG_RAMP_CONFIG: RampConfig = {
 		contrast: {
 			reference: 'stroke3',
 			followDirection: 'opposite',
-			target: 1.5,
+			target: 2.4,
 		},
 		taperChromaOptions: STROKE_TAPER_CHROMA,
 	},

package/src/color-ramps/lib/utils.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { toGamut, to, P3, OKLCH, type ColorTypes } from 'colorjs.io/fn';
+import { type ColorTypes } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -19,13 +19,6 @@ import {
 import type { Ramp, RampConfig, RampDirection } from './types';
 import { getContrast } from './color-utils';
 
-/**
- * Make sure that a color is valid in the p3 gamut, and converts it to oklch.
- * @param c
- */
-export const clampToGamut = ( c: ColorTypes ) =>
-	to( toGamut( c, { space: P3, method: 'css' } ), OKLCH ); // map into Display-P3 using CSS OKLCH method
-
 /**
  * Build a dependency graph from the steps configuration
  * @param config - The steps configuration object

package/src/color-ramps/stories/index.story.tsx

@@ -133,10 +133,12 @@ export const Default: StoryObj< typeof ColorGen > = {
 									fgName,
 									fgColor,
 									unmetContrast,
+									achievedContrast,
 								},
 								i
 							) => (
 								<li key={ i }>
+									{ fgName } (
 									<span
 										style={ {
 											width: 20,
@@ -144,8 +146,8 @@ export const Default: StoryObj< typeof ColorGen > = {
 											backgroundColor: fgColor,
 											display: 'inline-block',
 										} }
-									></span>
-									{ fgName } over
+									/>
+									{ fgColor }) over { bgName } (
 									<span
 										style={ {
 											width: 20,
@@ -153,8 +155,9 @@ export const Default: StoryObj< typeof ColorGen > = {
 											backgroundColor: bgColor,
 											display: 'inline-block',
 										} }
-									></span>
-									{ bgName } did not meet { unmetContrast }
+									/>
+									{ bgColor }) did not meet { unmetContrast },
+									achieved just { achievedContrast }
 								</li>
 							)
 						) }