@wordpress/theme 0.1.1-next.2f1c7c01b.0 → 0.2.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.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.0",
+		"@wordpress/private-apis": "^1.35.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": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
 }

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

@@ -13,23 +13,23 @@ export const DEFAULT_RAMPS: Record<
 			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 },
+			bgFill2: { color: '#494949', warning: false },
+			surface6: { color: '#d3d3d3', warning: false },
+			surface5: { color: '#e3e3e3', 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 },
+			fgSurface3: { color: '#6e6e6e', warning: false },
+			fgSurface2: { color: '#8b8b8b', warning: false },
+			fgSurface1: { color: '#ababab', warning: false },
+			stroke3: { color: '#8b8b8b', warning: false },
+			stroke4: { color: '#6d6d6d', warning: false },
 			stroke2: { color: '#adadad', warning: false },
-			stroke1: { color: '#d0d0d0', warning: false },
+			stroke1: { color: '#cfcfcf', warning: false },
 			bgFillDark: { color: '#1e1e1e', warning: false },
 			fgFillDark: { color: '#f0f0f0', warning: false },
 			bgFillInverted2: { color: '#1e1e1e', warning: false },
-			bgFillInverted1: { color: '#2f2f2f', warning: false },
+			bgFillInverted1: { color: '#2d2d2d', warning: false },
 			fgFillInverted: { color: '#f0f0f0', warning: false },
 			surface1: { color: '#f0f0f0', warning: false },
 		},
@@ -39,26 +39,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: { color: '#3858e9', warning: false },
 			fgFill: { color: '#eff0f2', warning: false },
-			bgFill2: { color: '#2c47d7', warning: false },
+			bgFill2: { color: '#2e49da', warning: false },
 			surface2: { color: '#f6f8fc', warning: false },
-			surface6: { color: '#c4d0ee', warning: false },
-			surface5: { color: '#d8e0f3', warning: false },
-			surface4: { color: '#e5eaf7', warning: false },
+			surface6: { color: '#c7d3ef', warning: false },
+			surface5: { color: '#dce3f5', warning: false },
+			surface4: { color: '#e5ebf7', 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 },
+			fgSurface2: { color: '#5881ff', warning: false },
+			fgSurface1: { color: '#84a9ff', warning: false },
 			stroke3: { color: '#3858e9', warning: false },
-			stroke4: { color: '#2236c7', warning: false },
-			stroke2: { color: '#6f85c0', warning: false },
-			stroke1: { color: '#92a4cf', warning: false },
+			stroke4: { color: '#2337c8', warning: false },
+			stroke2: { color: '#6d83bf', warning: false },
+			stroke1: { color: '#91a2cf', warning: false },
 			bgFillDark: { color: '#1b1e26', warning: false },
 			fgFillDark: { color: '#eff0f2', warning: false },
 			bgFillInverted2: { color: '#1b1e26', warning: false },
-			bgFillInverted1: { color: '#1401a4', warning: false },
+			bgFillInverted1: { color: '#12009f', warning: false },
 			fgFillInverted: { color: '#eff0f2', warning: false },
-			surface1: { color: '#ecf0f9', warning: false },
+			surface1: { color: '#edf0fa', warning: false },
 		},
 		direction: 'darker',
 	},
@@ -66,26 +66,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: { color: '#0090ff', warning: false },
 			fgFill: { color: '#1b1e23', warning: false },
-			bgFill2: { color: '#007eec', warning: false },
+			bgFill2: { color: '#0081ef', warning: false },
 			surface2: { color: '#f5f9fd', warning: false },
-			surface6: { color: '#bad3f0', warning: false },
-			surface5: { color: '#d1e1f5', warning: false },
-			surface4: { color: '#e1ecf8', warning: false },
+			surface6: { color: '#bed6f1', warning: false },
+			surface5: { color: '#d5e5f6', warning: false },
+			surface4: { color: '#e0ebf8', 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 },
+			fgSurface3: { color: '#006dd9', warning: false },
+			fgSurface2: { color: '#008cfb', warning: false },
+			fgSurface1: { color: '#53b1ff', warning: false },
+			stroke3: { color: '#006dd9', warning: false },
+			stroke4: { color: '#004eb8', warning: false },
+			stroke2: { color: '#5d8fc6', warning: false },
+			stroke1: { color: '#8aaed6', warning: false },
 			bgFillDark: { color: '#1b1e23', warning: false },
 			fgFillDark: { color: '#eff0f2', warning: false },
 			bgFillInverted2: { color: '#1b1e23', warning: false },
-			bgFillInverted1: { color: '#00297a', warning: false },
+			bgFillInverted1: { color: '#002675', warning: false },
 			fgFillInverted: { color: '#eff0f2', warning: false },
-			surface1: { color: '#e9f1fa', warning: false },
+			surface1: { color: '#eaf1fa', warning: false },
 		},
 		direction: 'darker',
 	},
@@ -93,26 +93,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: { color: '#4ab866', warning: false },
 			fgFill: { color: '#1b1f1c', warning: false },
-			bgFill2: { color: '#34a554', warning: false },
+			bgFill2: { color: '#37a857', warning: false },
 			surface2: { color: '#f0fcf2', warning: false },
-			surface6: { color: '#7be792', warning: false },
-			surface5: { color: '#acf0b7', warning: false },
+			surface6: { color: '#7eea95', warning: false },
+			surface5: { color: '#b7f2c1', 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 },
+			fgSurface3: { color: '#008031', warning: false },
+			fgSurface2: { color: '#2c9f4e', warning: false },
+			fgSurface1: { color: '#54c16f', warning: false },
+			stroke3: { color: '#008031', warning: false },
+			stroke4: { color: '#006314', warning: false },
+			stroke2: { color: '#61986b', warning: false },
+			stroke1: { color: '#77ba84', warning: false },
 			bgFillDark: { color: '#1b1f1c', warning: false },
 			fgFillDark: { color: '#edf2ed', warning: false },
 			bgFillInverted2: { color: '#1b1f1c', warning: false },
-			bgFillInverted1: { color: '#003a00', warning: false },
+			bgFillInverted1: { color: '#003800', warning: false },
 			fgFillInverted: { color: '#edf2ed', warning: false },
-			surface1: { color: '#ddf8e0', warning: false },
+			surface1: { color: '#ddf8e1', warning: false },
 		},
 		direction: 'darker',
 	},
@@ -120,26 +120,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: { color: '#f0d149', warning: false },
 			fgFill: { color: '#1f1e1b', warning: false },
-			bgFill2: { color: '#dabb2b', warning: false },
+			bgFill2: { color: '#ddbe30', warning: false },
 			surface2: { color: '#fdf9e7', warning: false },
-			surface6: { color: '#e7d070', warning: false },
-			surface5: { color: '#f4e08c', warning: false },
-			surface4: { color: '#f8ebb6', warning: false },
+			surface6: { color: '#ecd367', warning: false },
+			surface5: { color: '#f5e399', warning: false },
+			surface4: { color: '#f8ebb5', 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 },
+			fgSurface3: { color: '#876b00', warning: false },
+			fgSurface2: { color: '#a78900', warning: false },
+			fgSurface1: { color: '#c9aa00', warning: false },
+			stroke3: { color: '#876b00', warning: false },
+			stroke4: { color: '#675000', warning: false },
+			stroke2: { color: '#978c60', warning: false },
+			stroke1: { color: '#b8ab75', warning: false },
 			bgFillDark: { color: '#1f1e1b', warning: false },
 			fgFillDark: { color: '#f6f1da', warning: false },
 			bgFillInverted2: { color: '#1f1e1b', warning: false },
-			bgFillInverted1: { color: '#3d2d00', warning: false },
+			bgFillInverted1: { color: '#3a2b00', warning: false },
 			fgFillInverted: { color: '#f6f1da', warning: false },
-			surface1: { color: '#faf1cb', warning: false },
+			surface1: { color: '#faf1cd', warning: false },
 		},
 		direction: 'darker',
 	},
@@ -147,26 +147,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: { color: '#f0b849', warning: false },
 			fgFill: { color: '#1f1e1b', warning: false },
-			bgFill2: { color: '#dba430', warning: false },
+			bgFill2: { color: '#dea633', warning: false },
 			surface2: { color: '#fdf7ee', warning: false },
-			surface6: { color: '#f0cb89', warning: false },
-			surface5: { color: '#f5ddb2', warning: false },
+			surface6: { color: '#f1ce90', warning: false },
+			surface5: { color: '#f6e0bb', 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 },
+			fgSurface3: { color: '#976300', warning: false },
+			fgSurface2: { color: '#b78100', warning: false },
+			fgSurface1: { color: '#d9a22e', warning: false },
+			stroke3: { color: '#976300', warning: false },
+			stroke4: { color: '#754900', warning: false },
+			stroke2: { color: '#9f8860', warning: false },
+			stroke1: { color: '#c2a776', warning: false },
 			bgFillDark: { color: '#1f1e1b', warning: false },
 			fgFillDark: { color: '#f3f0e9', warning: false },
 			bgFillInverted2: { color: '#1f1e1b', warning: false },
-			bgFillInverted1: { color: '#472900', warning: false },
+			bgFillInverted1: { color: '#432600', warning: false },
 			fgFillInverted: { color: '#f3f0e9', warning: false },
-			surface1: { color: '#faefdb', warning: false },
+			surface1: { color: '#faefdc', warning: false },
 		},
 		direction: 'darker',
 	},
@@ -174,26 +174,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: { color: '#cc1818', warning: false },
 			fgFill: { color: '#f2efef', warning: false },
-			bgFill2: { color: '#b90000', warning: false },
+			bgFill2: { color: '#bc0001', warning: false },
 			surface2: { color: '#fdf6f5', warning: false },
-			surface6: { color: '#f5c5be', warning: false },
-			surface5: { color: '#f8d8d3', warning: false },
-			surface4: { color: '#fae6e2', warning: false },
+			surface6: { color: '#f5c9c2', warning: false },
+			surface5: { color: '#f9dcd8', warning: false },
+			surface4: { color: '#fae5e2', 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 },
+			fgSurface2: { color: '#f84d41', warning: false },
+			fgSurface1: { color: '#ff8373', warning: false },
 			stroke3: { color: '#cc1818', warning: false },
-			stroke4: { color: '#a40000', warning: false },
-			stroke2: { color: '#cd695d', warning: false },
-			stroke1: { color: '#dc9085', warning: false },
+			stroke4: { color: '#a70000', warning: false },
+			stroke2: { color: '#ca675c', warning: false },
+			stroke1: { color: '#dc8e83', warning: false },
 			bgFillDark: { color: '#231c1b', warning: false },
 			fgFillDark: { color: '#f2efef', warning: false },
 			bgFillInverted2: { color: '#231c1b', warning: false },
-			bgFillInverted1: { color: '#6d0000', warning: false },
+			bgFillInverted1: { color: '#680000', warning: false },
 			fgFillInverted: { color: '#f2efef', warning: false },
-			surface1: { color: '#fcecea', warning: false },
+			surface1: { color: '#fcedea', warning: false },
 		},
 		direction: 'darker',
 	},