@wordpress/theme 0.1.1-next.2f1c7c01b.0 → 0.2.1-next.16d95556a.0

package/docs/ds-tokens.md

@@ -109,6 +109,16 @@ Do not edit directly.
 | `--wpds-color-stroke-interactive-error-strong`        | Accessible stroke color used for interactive error-toned elements with strong emphasis.                                                     |
 | `--wpds-color-stroke-focus-brand`                     | Accessible stroke color applied to focus rings.                                                                                             |
 
+### 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       |
+
 ### Elevation
 
 | Variable name              | Description                                                                                                                       |
@@ -118,21 +128,6 @@ Do not edit directly.
 | `--wpds-elevation-medium`  | For components that offer additional actions. Example: Menus, Command Palette                                                     |
 | `--wpds-elevation-large`   | For components that confirm decisions or handle necessary interruptions. Example: Modals.                                         |
 
-### Spacing
-
-| Variable name       | Description         |
-| ------------------- | ------------------- |
-| `--wpds-spacing-05` | Extra small spacing |
-| `--wpds-spacing-10` | Small spacing       |
-| `--wpds-spacing-15` | Medium spacing      |
-| `--wpds-spacing-20` | Large spacing       |
-| `--wpds-spacing-30` | Extra large spacing |
-| `--wpds-spacing-40` | 2X large spacing    |
-| `--wpds-spacing-50` | 3X large spacing    |
-| `--wpds-spacing-60` | 4X large spacing    |
-| `--wpds-spacing-70` | 5X large spacing    |
-| `--wpds-spacing-80` | 6X large spacing    |
-
 ### Typography
 
 | Variable name                      | Description             |
@@ -152,166 +147,3 @@ Do not edit directly.
 | `--wpds-font-line-height-large`    | Large line height       |
 | `--wpds-font-line-height-x-large`  | Extra large line height |
 | `--wpds-font-line-height-2x-large` | 2X large line height    |
-
-## Primitive tokens
-
-**🚨 Note: These tokens are only private implementation details of the Theme, and should never be referenced / consumed directly in the code.**
-
-### Color (private)
-
-| Variable name                                    | Description |
-| ------------------------------------------------ | ----------- |
-| `--wpds-color-private-primary-bg-fill1`          | N/A         |
-| `--wpds-color-private-primary-fg-fill`           | N/A         |
-| `--wpds-color-private-primary-bg-fill2`          | N/A         |
-| `--wpds-color-private-primary-surface2`          | N/A         |
-| `--wpds-color-private-primary-surface6`          | N/A         |
-| `--wpds-color-private-primary-surface5`          | N/A         |
-| `--wpds-color-private-primary-surface4`          | N/A         |
-| `--wpds-color-private-primary-surface3`          | N/A         |
-| `--wpds-color-private-primary-fg-surface4`       | N/A         |
-| `--wpds-color-private-primary-fg-surface3`       | N/A         |
-| `--wpds-color-private-primary-fg-surface2`       | N/A         |
-| `--wpds-color-private-primary-fg-surface1`       | N/A         |
-| `--wpds-color-private-primary-stroke3`           | N/A         |
-| `--wpds-color-private-primary-stroke4`           | N/A         |
-| `--wpds-color-private-primary-stroke2`           | N/A         |
-| `--wpds-color-private-primary-stroke1`           | N/A         |
-| `--wpds-color-private-primary-bg-fill-dark`      | N/A         |
-| `--wpds-color-private-primary-fg-fill-dark`      | N/A         |
-| `--wpds-color-private-primary-bg-fill-inverted2` | N/A         |
-| `--wpds-color-private-primary-bg-fill-inverted1` | N/A         |
-| `--wpds-color-private-primary-fg-fill-inverted`  | N/A         |
-| `--wpds-color-private-primary-surface1`          | N/A         |
-| `--wpds-color-private-info-bg-fill1`             | N/A         |
-| `--wpds-color-private-info-fg-fill`              | N/A         |
-| `--wpds-color-private-info-bg-fill2`             | N/A         |
-| `--wpds-color-private-info-surface2`             | N/A         |
-| `--wpds-color-private-info-surface6`             | N/A         |
-| `--wpds-color-private-info-surface5`             | N/A         |
-| `--wpds-color-private-info-surface4`             | N/A         |
-| `--wpds-color-private-info-surface3`             | N/A         |
-| `--wpds-color-private-info-fg-surface4`          | N/A         |
-| `--wpds-color-private-info-fg-surface3`          | N/A         |
-| `--wpds-color-private-info-fg-surface2`          | N/A         |
-| `--wpds-color-private-info-fg-surface1`          | N/A         |
-| `--wpds-color-private-info-stroke3`              | N/A         |
-| `--wpds-color-private-info-stroke4`              | N/A         |
-| `--wpds-color-private-info-stroke2`              | N/A         |
-| `--wpds-color-private-info-stroke1`              | N/A         |
-| `--wpds-color-private-info-bg-fill-dark`         | N/A         |
-| `--wpds-color-private-info-fg-fill-dark`         | N/A         |
-| `--wpds-color-private-info-bg-fill-inverted2`    | N/A         |
-| `--wpds-color-private-info-bg-fill-inverted1`    | N/A         |
-| `--wpds-color-private-info-fg-fill-inverted`     | N/A         |
-| `--wpds-color-private-info-surface1`             | N/A         |
-| `--wpds-color-private-success-bg-fill1`          | N/A         |
-| `--wpds-color-private-success-fg-fill`           | N/A         |
-| `--wpds-color-private-success-bg-fill2`          | N/A         |
-| `--wpds-color-private-success-surface2`          | N/A         |
-| `--wpds-color-private-success-surface6`          | N/A         |
-| `--wpds-color-private-success-surface5`          | N/A         |
-| `--wpds-color-private-success-surface4`          | N/A         |
-| `--wpds-color-private-success-surface3`          | N/A         |
-| `--wpds-color-private-success-fg-surface4`       | N/A         |
-| `--wpds-color-private-success-fg-surface3`       | N/A         |
-| `--wpds-color-private-success-fg-surface2`       | N/A         |
-| `--wpds-color-private-success-fg-surface1`       | N/A         |
-| `--wpds-color-private-success-stroke3`           | N/A         |
-| `--wpds-color-private-success-stroke4`           | N/A         |
-| `--wpds-color-private-success-stroke2`           | N/A         |
-| `--wpds-color-private-success-stroke1`           | N/A         |
-| `--wpds-color-private-success-bg-fill-dark`      | N/A         |
-| `--wpds-color-private-success-fg-fill-dark`      | N/A         |
-| `--wpds-color-private-success-bg-fill-inverted2` | N/A         |
-| `--wpds-color-private-success-bg-fill-inverted1` | N/A         |
-| `--wpds-color-private-success-fg-fill-inverted`  | N/A         |
-| `--wpds-color-private-success-surface1`          | N/A         |
-| `--wpds-color-private-warning-bg-fill1`          | N/A         |
-| `--wpds-color-private-warning-fg-fill`           | N/A         |
-| `--wpds-color-private-warning-bg-fill2`          | N/A         |
-| `--wpds-color-private-warning-surface2`          | N/A         |
-| `--wpds-color-private-warning-surface6`          | N/A         |
-| `--wpds-color-private-warning-surface5`          | N/A         |
-| `--wpds-color-private-warning-surface4`          | N/A         |
-| `--wpds-color-private-warning-surface3`          | N/A         |
-| `--wpds-color-private-warning-fg-surface4`       | N/A         |
-| `--wpds-color-private-warning-fg-surface3`       | N/A         |
-| `--wpds-color-private-warning-fg-surface2`       | N/A         |
-| `--wpds-color-private-warning-fg-surface1`       | N/A         |
-| `--wpds-color-private-warning-stroke3`           | N/A         |
-| `--wpds-color-private-warning-stroke4`           | N/A         |
-| `--wpds-color-private-warning-stroke2`           | N/A         |
-| `--wpds-color-private-warning-stroke1`           | N/A         |
-| `--wpds-color-private-warning-bg-fill-dark`      | N/A         |
-| `--wpds-color-private-warning-fg-fill-dark`      | N/A         |
-| `--wpds-color-private-warning-bg-fill-inverted2` | N/A         |
-| `--wpds-color-private-warning-bg-fill-inverted1` | N/A         |
-| `--wpds-color-private-warning-fg-fill-inverted`  | N/A         |
-| `--wpds-color-private-warning-surface1`          | N/A         |
-| `--wpds-color-private-error-bg-fill1`            | N/A         |
-| `--wpds-color-private-error-fg-fill`             | N/A         |
-| `--wpds-color-private-error-bg-fill2`            | N/A         |
-| `--wpds-color-private-error-surface2`            | N/A         |
-| `--wpds-color-private-error-surface6`            | N/A         |
-| `--wpds-color-private-error-surface5`            | N/A         |
-| `--wpds-color-private-error-surface4`            | N/A         |
-| `--wpds-color-private-error-surface3`            | N/A         |
-| `--wpds-color-private-error-fg-surface4`         | N/A         |
-| `--wpds-color-private-error-fg-surface3`         | N/A         |
-| `--wpds-color-private-error-fg-surface2`         | N/A         |
-| `--wpds-color-private-error-fg-surface1`         | N/A         |
-| `--wpds-color-private-error-stroke3`             | N/A         |
-| `--wpds-color-private-error-stroke4`             | N/A         |
-| `--wpds-color-private-error-stroke2`             | N/A         |
-| `--wpds-color-private-error-stroke1`             | N/A         |
-| `--wpds-color-private-error-bg-fill-dark`        | N/A         |
-| `--wpds-color-private-error-fg-fill-dark`        | N/A         |
-| `--wpds-color-private-error-bg-fill-inverted2`   | N/A         |
-| `--wpds-color-private-error-bg-fill-inverted1`   | N/A         |
-| `--wpds-color-private-error-fg-fill-inverted`    | N/A         |
-| `--wpds-color-private-error-surface1`            | N/A         |
-| `--wpds-color-private-bg-surface2`               | N/A         |
-| `--wpds-color-private-bg-bg-fill1`               | N/A         |
-| `--wpds-color-private-bg-fg-fill`                | N/A         |
-| `--wpds-color-private-bg-bg-fill2`               | N/A         |
-| `--wpds-color-private-bg-surface6`               | N/A         |
-| `--wpds-color-private-bg-surface5`               | N/A         |
-| `--wpds-color-private-bg-surface4`               | N/A         |
-| `--wpds-color-private-bg-surface3`               | N/A         |
-| `--wpds-color-private-bg-fg-surface4`            | N/A         |
-| `--wpds-color-private-bg-fg-surface3`            | N/A         |
-| `--wpds-color-private-bg-fg-surface2`            | N/A         |
-| `--wpds-color-private-bg-fg-surface1`            | N/A         |
-| `--wpds-color-private-bg-stroke3`                | N/A         |
-| `--wpds-color-private-bg-stroke4`                | N/A         |
-| `--wpds-color-private-bg-stroke2`                | N/A         |
-| `--wpds-color-private-bg-stroke1`                | N/A         |
-| `--wpds-color-private-bg-bg-fill-dark`           | N/A         |
-| `--wpds-color-private-bg-fg-fill-dark`           | N/A         |
-| `--wpds-color-private-bg-bg-fill-inverted2`      | N/A         |
-| `--wpds-color-private-bg-bg-fill-inverted1`      | N/A         |
-| `--wpds-color-private-bg-fg-fill-inverted`       | N/A         |
-| `--wpds-color-private-bg-surface1`               | N/A         |
-| `--wpds-color-private-caution-bg-fill1`          | N/A         |
-| `--wpds-color-private-caution-fg-fill`           | N/A         |
-| `--wpds-color-private-caution-bg-fill2`          | N/A         |
-| `--wpds-color-private-caution-surface2`          | N/A         |
-| `--wpds-color-private-caution-surface6`          | N/A         |
-| `--wpds-color-private-caution-surface5`          | N/A         |
-| `--wpds-color-private-caution-surface4`          | N/A         |
-| `--wpds-color-private-caution-surface3`          | N/A         |
-| `--wpds-color-private-caution-fg-surface4`       | N/A         |
-| `--wpds-color-private-caution-fg-surface3`       | N/A         |
-| `--wpds-color-private-caution-fg-surface2`       | N/A         |
-| `--wpds-color-private-caution-fg-surface1`       | N/A         |
-| `--wpds-color-private-caution-stroke3`           | N/A         |
-| `--wpds-color-private-caution-stroke4`           | N/A         |
-| `--wpds-color-private-caution-stroke2`           | N/A         |
-| `--wpds-color-private-caution-stroke1`           | N/A         |
-| `--wpds-color-private-caution-bg-fill-dark`      | N/A         |
-| `--wpds-color-private-caution-fg-fill-dark`      | N/A         |
-| `--wpds-color-private-caution-bg-fill-inverted2` | N/A         |
-| `--wpds-color-private-caution-bg-fill-inverted1` | N/A         |
-| `--wpds-color-private-caution-fg-fill-inverted`  | N/A         |
-| `--wpds-color-private-caution-surface1`          | N/A         |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/theme",
-	"version": "0.1.1-next.2f1c7c01b.0",
+	"version": "0.2.1-next.16d95556a.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.34.1-next.2f1c7c01b.0",
-		"@wordpress/private-apis": "^1.34.1-next.2f1c7c01b.0",
+		"@wordpress/element": "^6.35.1-next.16d95556a.0",
+		"@wordpress/private-apis": "^1.35.1-next.16d95556a.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": "c6ddcdf455bc02567a2c9e03de6862a2061b85e8"
+	"gitHead": "59a9383612bbe16e21af84d13b035bfbca7fe833"
 }

package/src/color-ramps/index.ts

@@ -44,7 +44,7 @@ function getBgRampInfo( ramp: InternalRampResult ): {
 		pinLightness: {
 			stepName: STEP_TO_PIN,
 			value: clampAccentScaleReferenceLightness(
-				get( parse( ramp.ramp[ STEP_TO_PIN ].color ), [ OKLCH, 'l' ] ),
+				get( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),
 				ramp.direction
 			),
 		},
@@ -96,8 +96,8 @@ 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 ].color );
-					const fgColor = parse( ramp.ramp[ fg ].color );
+					const bgColor = parse( ramp.ramp[ bg ] );
+					const fgColor = parse( ramp.ramp[ fg ] );
 					if ( getContrast( bgColor, fgColor ) < target ) {
 						unmetTargets.push( {
 							bgName: bg,
@@ -116,8 +116,8 @@ 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 ].color );
-					const fgColor = parse( ramp.ramp[ fg ].color );
+					const bgColor = parse( bgRamp.ramp[ bg ] );
+					const fgColor = parse( ramp.ramp[ fg ] );
 					if ( getContrast( bgColor, fgColor ) < target ) {
 						unmetTargets.push( {
 							bgName: bg,

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

@@ -12,9 +12,11 @@ import type { Ramp } from './types';
 export const WHITE = to( 'white', OKLCH );
 export const BLACK = to( 'black', OKLCH );
 
-// Margin added to target contrasts to counter for algorithm approximations
-// and rounding errors.
-export const UNIVERSAL_CONTRAST_TOPUP = 0.05;
+// 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;
 
 // When enabling "lighter direction" bias, this is the amount by which
 // black text contrast needs to be greater than white text contrast.
@@ -33,8 +35,8 @@ export const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
 	darker: { min: 0.75, max: 0.98 },
 } as const;
 
-// Lightness precision we aim for. Approximately 1/256, resolution of an 8-bit number.
-export const LIGHTNESS_EPSILON = 4e-3;
+// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.
+export const CONTRAST_EPSILON = 4e-3;
 
 export const MAX_BISECTION_ITERATIONS = 10;
 

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

@@ -10,190 +10,190 @@ export const DEFAULT_RAMPS: Record<
 > = {
 	bg: {
 		ramp: {
-			surface2: { color: '#f8f8f8', warning: false },
-			bgFill1: { color: '#555', warning: false },
-			fgFill: { color: '#f0f0f0', warning: false },
-			bgFill2: { color: '#474747', warning: false },
-			surface6: { color: '#d0d0d0', warning: false },
-			surface5: { color: '#dfdfdf', warning: false },
-			surface4: { color: '#eaeaea', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#1e1e1e', warning: false },
-			fgSurface3: { color: '#6d6d6d', warning: false },
-			fgSurface2: { color: '#898989', warning: false },
-			fgSurface1: { color: '#a9a9a9', warning: false },
-			stroke3: { color: '#898989', warning: false },
-			stroke4: { color: '#6a6a6a', warning: false },
-			stroke2: { color: '#adadad', warning: false },
-			stroke1: { color: '#d0d0d0', warning: false },
-			bgFillDark: { color: '#1e1e1e', warning: false },
-			fgFillDark: { color: '#f0f0f0', warning: false },
-			bgFillInverted2: { color: '#1e1e1e', warning: false },
-			bgFillInverted1: { color: '#2f2f2f', warning: false },
-			fgFillInverted: { color: '#f0f0f0', warning: false },
-			surface1: { color: '#f0f0f0', warning: false },
+			surface2: '#f8f8f8',
+			bgFill1: '#555',
+			fgFill: '#f0f0f0',
+			bgFill2: '#494949',
+			surface6: '#d3d3d3',
+			surface5: '#e3e3e3',
+			surface4: '#eaeaea',
+			surface3: '#fff',
+			fgSurface4: '#1e1e1e',
+			fgSurface3: '#6e6e6e',
+			fgSurface2: '#8b8b8b',
+			fgSurface1: '#ababab',
+			stroke3: '#8b8b8b',
+			stroke4: '#6d6d6d',
+			stroke2: '#adadad',
+			stroke1: '#cfcfcf',
+			bgFillDark: '#1e1e1e',
+			fgFillDark: '#f0f0f0',
+			bgFillInverted2: '#1e1e1e',
+			bgFillInverted1: '#2d2d2d',
+			fgFillInverted: '#f0f0f0',
+			surface1: '#f0f0f0',
 		},
 		direction: 'darker',
 	},
 	primary: {
 		ramp: {
-			bgFill1: { color: '#3858e9', warning: false },
-			fgFill: { color: '#eff0f2', warning: false },
-			bgFill2: { color: '#2c47d7', warning: false },
-			surface2: { color: '#f6f8fc', warning: false },
-			surface6: { color: '#c4d0ee', warning: false },
-			surface5: { color: '#d8e0f3', warning: false },
-			surface4: { color: '#e5eaf7', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#080071', warning: false },
-			fgSurface3: { color: '#3858e9', warning: false },
-			fgSurface2: { color: '#5780ff', warning: false },
-			fgSurface1: { color: '#81a7ff', warning: false },
-			stroke3: { color: '#3858e9', warning: false },
-			stroke4: { color: '#2236c7', warning: false },
-			stroke2: { color: '#6f85c0', warning: false },
-			stroke1: { color: '#92a4cf', warning: false },
-			bgFillDark: { color: '#1b1e26', warning: false },
-			fgFillDark: { color: '#eff0f2', warning: false },
-			bgFillInverted2: { color: '#1b1e26', warning: false },
-			bgFillInverted1: { color: '#1401a4', warning: false },
-			fgFillInverted: { color: '#eff0f2', warning: false },
-			surface1: { color: '#ecf0f9', warning: false },
+			bgFill1: '#3858e9',
+			fgFill: '#eff0f2',
+			bgFill2: '#2e49da',
+			surface2: '#f6f8fc',
+			surface6: '#c7d3ef',
+			surface5: '#dce3f5',
+			surface4: '#e5ebf7',
+			surface3: '#fff',
+			fgSurface4: '#080071',
+			fgSurface3: '#3858e9',
+			fgSurface2: '#5881ff',
+			fgSurface1: '#84a9ff',
+			stroke3: '#3858e9',
+			stroke4: '#2337c8',
+			stroke2: '#6d83bf',
+			stroke1: '#91a2cf',
+			bgFillDark: '#1b1e26',
+			fgFillDark: '#eff0f2',
+			bgFillInverted2: '#1b1e26',
+			bgFillInverted1: '#12009f',
+			fgFillInverted: '#eff0f2',
+			surface1: '#edf0fa',
 		},
 		direction: 'darker',
 	},
 	info: {
 		ramp: {
-			bgFill1: { color: '#0090ff', warning: false },
-			fgFill: { color: '#1b1e23', warning: false },
-			bgFill2: { color: '#007eec', warning: false },
-			surface2: { color: '#f5f9fd', warning: false },
-			surface6: { color: '#bad3f0', warning: false },
-			surface5: { color: '#d1e1f5', warning: false },
-			surface4: { color: '#e1ecf8', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#001758', warning: false },
-			fgSurface3: { color: '#006cd8', warning: false },
-			fgSurface2: { color: '#008bfa', warning: false },
-			fgSurface1: { color: '#4dafff', warning: false },
-			stroke3: { color: '#006cd8', warning: false },
-			stroke4: { color: '#004bb5', warning: false },
-			stroke2: { color: '#5e90c7', warning: false },
-			stroke1: { color: '#8baed6', warning: false },
-			bgFillDark: { color: '#1b1e23', warning: false },
-			fgFillDark: { color: '#eff0f2', warning: false },
-			bgFillInverted2: { color: '#1b1e23', warning: false },
-			bgFillInverted1: { color: '#00297a', warning: false },
-			fgFillInverted: { color: '#eff0f2', warning: false },
-			surface1: { color: '#e9f1fa', warning: false },
+			bgFill1: '#0090ff',
+			fgFill: '#1b1e23',
+			bgFill2: '#0081ef',
+			surface2: '#f5f9fd',
+			surface6: '#bed6f1',
+			surface5: '#d5e5f6',
+			surface4: '#e0ebf8',
+			surface3: '#fff',
+			fgSurface4: '#001758',
+			fgSurface3: '#006dd9',
+			fgSurface2: '#008cfb',
+			fgSurface1: '#53b1ff',
+			stroke3: '#006dd9',
+			stroke4: '#004eb8',
+			stroke2: '#5d8fc6',
+			stroke1: '#8aaed6',
+			bgFillDark: '#1b1e23',
+			fgFillDark: '#eff0f2',
+			bgFillInverted2: '#1b1e23',
+			bgFillInverted1: '#002675',
+			fgFillInverted: '#eff0f2',
+			surface1: '#eaf1fa',
 		},
 		direction: 'darker',
 	},
 	success: {
 		ramp: {
-			bgFill1: { color: '#4ab866', warning: false },
-			fgFill: { color: '#1b1f1c', warning: false },
-			bgFill2: { color: '#34a554', warning: false },
-			surface2: { color: '#f0fcf2', warning: false },
-			surface6: { color: '#7be792', warning: false },
-			surface5: { color: '#acf0b7', warning: false },
-			surface4: { color: '#cdf5d3', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#002b00', warning: false },
-			fgSurface3: { color: '#008030', warning: false },
-			fgSurface2: { color: '#2a9e4d', warning: false },
-			fgSurface1: { color: '#52bf6d', warning: false },
-			stroke3: { color: '#008030', warning: false },
-			stroke4: { color: '#006113', warning: false },
-			stroke2: { color: '#62996c', warning: false },
-			stroke1: { color: '#78ba84', warning: false },
-			bgFillDark: { color: '#1b1f1c', warning: false },
-			fgFillDark: { color: '#edf2ed', warning: false },
-			bgFillInverted2: { color: '#1b1f1c', warning: false },
-			bgFillInverted1: { color: '#003a00', warning: false },
-			fgFillInverted: { color: '#edf2ed', warning: false },
-			surface1: { color: '#ddf8e0', warning: false },
+			bgFill1: '#4ab866',
+			fgFill: '#1b1f1c',
+			bgFill2: '#37a857',
+			surface2: '#f0fcf2',
+			surface6: '#7eea95',
+			surface5: '#b7f2c1',
+			surface4: '#cdf5d3',
+			surface3: '#fff',
+			fgSurface4: '#002b00',
+			fgSurface3: '#008031',
+			fgSurface2: '#2c9f4e',
+			fgSurface1: '#54c16f',
+			stroke3: '#008031',
+			stroke4: '#006314',
+			stroke2: '#61986b',
+			stroke1: '#77ba84',
+			bgFillDark: '#1b1f1c',
+			fgFillDark: '#edf2ed',
+			bgFillInverted2: '#1b1f1c',
+			bgFillInverted1: '#003800',
+			fgFillInverted: '#edf2ed',
+			surface1: '#ddf8e1',
 		},
 		direction: 'darker',
 	},
 	caution: {
 		ramp: {
-			bgFill1: { color: '#f0d149', warning: false },
-			fgFill: { color: '#1f1e1b', warning: false },
-			bgFill2: { color: '#dabb2b', warning: false },
-			surface2: { color: '#fdf9e7', warning: false },
-			surface6: { color: '#e7d070', warning: false },
-			surface5: { color: '#f4e08c', warning: false },
-			surface4: { color: '#f8ebb6', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#291d00', warning: false },
-			fgSurface3: { color: '#866a00', warning: false },
-			fgSurface2: { color: '#a58700', warning: false },
-			fgSurface1: { color: '#c6a800', warning: false },
-			stroke3: { color: '#866a00', warning: false },
-			stroke4: { color: '#644e00', warning: false },
-			stroke2: { color: '#988d60', warning: false },
-			stroke1: { color: '#b8ab76', warning: false },
-			bgFillDark: { color: '#1f1e1b', warning: false },
-			fgFillDark: { color: '#f6f1da', warning: false },
-			bgFillInverted2: { color: '#1f1e1b', warning: false },
-			bgFillInverted1: { color: '#3d2d00', warning: false },
-			fgFillInverted: { color: '#f6f1da', warning: false },
-			surface1: { color: '#faf1cb', warning: false },
+			bgFill1: '#f0d149',
+			fgFill: '#1f1e1b',
+			bgFill2: '#ddbe30',
+			surface2: '#fdf9e7',
+			surface6: '#ecd367',
+			surface5: '#f5e399',
+			surface4: '#f8ebb5',
+			surface3: '#fff',
+			fgSurface4: '#291d00',
+			fgSurface3: '#876b00',
+			fgSurface2: '#a78900',
+			fgSurface1: '#c9aa00',
+			stroke3: '#876b00',
+			stroke4: '#675000',
+			stroke2: '#978c60',
+			stroke1: '#b8ab75',
+			bgFillDark: '#1f1e1b',
+			fgFillDark: '#f6f1da',
+			bgFillInverted2: '#1f1e1b',
+			bgFillInverted1: '#3a2b00',
+			fgFillInverted: '#f6f1da',
+			surface1: '#faf1cd',
 		},
 		direction: 'darker',
 	},
 	warning: {
 		ramp: {
-			bgFill1: { color: '#f0b849', warning: false },
-			fgFill: { color: '#1f1e1b', warning: false },
-			bgFill2: { color: '#dba430', warning: false },
-			surface2: { color: '#fdf7ee', warning: false },
-			surface6: { color: '#f0cb89', warning: false },
-			surface5: { color: '#f5ddb2', warning: false },
-			surface4: { color: '#f8e9cd', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#2f1800', warning: false },
-			fgSurface3: { color: '#966200', warning: false },
-			fgSurface2: { color: '#b58000', warning: false },
-			fgSurface1: { color: '#d7a02b', warning: false },
-			stroke3: { color: '#966200', warning: false },
-			stroke4: { color: '#724700', warning: false },
-			stroke2: { color: '#a08961', warning: false },
-			stroke1: { color: '#c2a777', warning: false },
-			bgFillDark: { color: '#1f1e1b', warning: false },
-			fgFillDark: { color: '#f3f0e9', warning: false },
-			bgFillInverted2: { color: '#1f1e1b', warning: false },
-			bgFillInverted1: { color: '#472900', warning: false },
-			fgFillInverted: { color: '#f3f0e9', warning: false },
-			surface1: { color: '#faefdb', warning: false },
+			bgFill1: '#f0b849',
+			fgFill: '#1f1e1b',
+			bgFill2: '#dea633',
+			surface2: '#fdf7ee',
+			surface6: '#f1ce90',
+			surface5: '#f6e0bb',
+			surface4: '#f8e9cd',
+			surface3: '#fff',
+			fgSurface4: '#2f1800',
+			fgSurface3: '#976300',
+			fgSurface2: '#b78100',
+			fgSurface1: '#d9a22e',
+			stroke3: '#976300',
+			stroke4: '#754900',
+			stroke2: '#9f8860',
+			stroke1: '#c2a776',
+			bgFillDark: '#1f1e1b',
+			fgFillDark: '#f3f0e9',
+			bgFillInverted2: '#1f1e1b',
+			bgFillInverted1: '#432600',
+			fgFillInverted: '#f3f0e9',
+			surface1: '#faefdc',
 		},
 		direction: 'darker',
 	},
 	error: {
 		ramp: {
-			bgFill1: { color: '#cc1818', warning: false },
-			fgFill: { color: '#f2efef', warning: false },
-			bgFill2: { color: '#b90000', warning: false },
-			surface2: { color: '#fdf6f5', warning: false },
-			surface6: { color: '#f5c5be', warning: false },
-			surface5: { color: '#f8d8d3', warning: false },
-			surface4: { color: '#fae6e2', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#4a0000', warning: false },
-			fgSurface3: { color: '#cc1818', warning: false },
-			fgSurface2: { color: '#f64b40', warning: false },
-			fgSurface1: { color: '#ff8070', warning: false },
-			stroke3: { color: '#cc1818', warning: false },
-			stroke4: { color: '#a40000', warning: false },
-			stroke2: { color: '#cd695d', warning: false },
-			stroke1: { color: '#dc9085', warning: false },
-			bgFillDark: { color: '#231c1b', warning: false },
-			fgFillDark: { color: '#f2efef', warning: false },
-			bgFillInverted2: { color: '#231c1b', warning: false },
-			bgFillInverted1: { color: '#6d0000', warning: false },
-			fgFillInverted: { color: '#f2efef', warning: false },
-			surface1: { color: '#fcecea', warning: false },
+			bgFill1: '#cc1818',
+			fgFill: '#f2efef',
+			bgFill2: '#bc0001',
+			surface2: '#fdf6f5',
+			surface6: '#f5c9c2',
+			surface5: '#f9dcd8',
+			surface4: '#fae5e2',
+			surface3: '#fff',
+			fgSurface4: '#4a0000',
+			fgSurface3: '#cc1818',
+			fgSurface2: '#f84d41',
+			fgSurface1: '#ff8373',
+			stroke3: '#cc1818',
+			stroke4: '#a70000',
+			stroke2: '#ca675c',
+			stroke1: '#dc8e83',
+			bgFillDark: '#231c1b',
+			fgFillDark: '#f2efef',
+			bgFillInverted2: '#231c1b',
+			bgFillInverted1: '#680000',
+			fgFillInverted: '#f2efef',
+			surface1: '#fcedea',
 		},
 		direction: 'darker',
 	},