@wordpress/theme 0.2.0 → 0.2.1-next.dc3f6d3c1.0

package/README.md

@@ -1,4 +1,8 @@
-# (Experimental) Theme
+# Theme
+
+<div class="callout callout-alert">
+This package is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
 
 A theming package that's part of the WordPress Design System. It has two parts:
 

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

@@ -87,7 +87,7 @@ function generatePrimitiveColorTokens() {
 				ramp.ramp
 			) ) {
 				colorJson.color.primitive[ scaleName ][ tokenName ] = {
-					$value: transformColorStringToDTCGValue( tokenValue.color ),
+					$value: transformColorStringToDTCGValue( tokenValue ),
 				};
 			}
 		} );

package/build/color-ramps/index.js

@@ -46,7 +46,7 @@ function getBgRampInfo(ramp) {
     pinLightness: {
       stepName: STEP_TO_PIN,
       value: (0, import_utils.clampAccentScaleReferenceLightness)(
-        (0, import_fn.get)((0, import_fn.parse)(ramp.ramp[STEP_TO_PIN].color), [import_fn.OKLCH, "l"]),
+        (0, import_fn.get)((0, import_fn.parse)(ramp.ramp[STEP_TO_PIN]), [import_fn.OKLCH, "l"]),
         ramp.direction
       )
     }
@@ -68,15 +68,17 @@ function checkAccessibleCombinations({
     import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = (0, import_fn.parse)(ramp.ramp[bg].color);
-          const fgColor = (0, import_fn.parse)(ramp.ramp[fg].color);
-          if ((0, import_color_utils.getContrast)(bgColor, fgColor) < target) {
+          const bgColor = ramp.ramp[bg];
+          const fgColor = ramp.ramp[fg];
+          const achievedContrast = (0, import_color_utils.getContrast)(bgColor, fgColor);
+          if (achievedContrast < target) {
             unmetTargets.push({
               bgName: bg,
-              bgColor: (0, import_fn.serialize)(bgColor),
+              bgColor,
               fgName: fg,
-              fgColor: (0, import_fn.serialize)(fgColor),
-              unmetContrast: target
+              fgColor,
+              unmetContrast: target,
+              achievedContrast
             });
           }
         }
@@ -87,15 +89,17 @@ function checkAccessibleCombinations({
     import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = (0, import_fn.parse)(bgRamp.ramp[bg].color);
-          const fgColor = (0, import_fn.parse)(ramp.ramp[fg].color);
-          if ((0, import_color_utils.getContrast)(bgColor, fgColor) < target) {
+          const bgColor = bgRamp.ramp[bg];
+          const fgColor = ramp.ramp[fg];
+          const achievedContrast = (0, import_color_utils.getContrast)(bgColor, fgColor);
+          if (achievedContrast < target) {
             unmetTargets.push({
               bgName: bg,
-              bgColor: (0, import_fn.serialize)(bgColor),
+              bgColor,
               fgName: fg,
-              fgColor: (0, import_fn.serialize)(fgColor),
-              unmetContrast: target
+              fgColor,
+              unmetContrast: target,
+              achievedContrast
             });
           }
         }

package/build/color-ramps/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-ramps/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse, serialize } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './lib/register-color-spaces';\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getContrast } from './lib/color-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param seed The seed color for the background ramp.\n */\nexport function buildBgRamp( seed: string ) {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tget( parse( ramp.ramp[ STEP_TO_PIN ].color ), [ OKLCH, 'l' ] ),\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param seed   The seed color for the accent ramp.\n * @param bgRamp The ramp of the background on which the accent is shown.\n */\nexport function buildAccentRamp(\n\tseed: string,\n\tbgRamp?: InternalRampResult\n): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( ramp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( bgRamp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA6C;AAK7C,mCAAO;AACP,iBAA0B;AAC1B,mBAAmD;AACnD,0BAAmD;AAMnD,yBAA4B;AAC5B,uBAAsC;AACtC,IAAAA,oBAAoC;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,aAAO,sBAAW,MAAM,kCAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,WAAO;AAAA,YACN,mBAAK,iBAAO,KAAK,KAAM,WAAY,EAAE,KAAM,GAAG,CAAE,iBAAO,GAAI,CAAE;AAAA,QAC7D,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAQO,SAAS,gBACf,MACA,QACqB;AACrB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,aAAO,sBAAW,MAAM,wCAAoB,UAAW;AACxD;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAMA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,kBAAK,gCAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,cAAU,iBAAO,OAAO,KAAM,EAAG,EAAE,KAAM;AAC/C,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,kBAAK,gCAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './lib/register-color-spaces';\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getContrast } from './lib/color-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param seed The seed color for the background ramp.\n */\nexport function buildBgRamp( seed: string ) {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tget( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param seed   The seed color for the accent ramp.\n * @param bgRamp The ramp of the background on which the accent is shown.\n */\nexport function buildAccentRamp(\n\tseed: string,\n\tbgRamp?: InternalRampResult\n): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t\tachievedContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = ramp.ramp[ bg ];\n\t\t\t\t\tconst fgColor = ramp.ramp[ fg ];\n\t\t\t\t\tconst achievedContrast = getContrast( bgColor, fgColor );\n\t\t\t\t\tif ( achievedContrast < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor,\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t\tachievedContrast,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = bgRamp.ramp[ bg ];\n\t\t\t\t\tconst fgColor = ramp.ramp[ fg ];\n\t\t\t\t\tconst achievedContrast = getContrast( bgColor, fgColor );\n\t\t\t\t\tif ( achievedContrast < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor,\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t\tachievedContrast,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAAkC;AAKlC,mCAAO;AACP,iBAA0B;AAC1B,mBAAmD;AACnD,0BAAmD;AAMnD,yBAA4B;AAC5B,uBAAsC;AACtC,IAAAA,oBAAoC;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,aAAO,sBAAW,MAAM,kCAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,WAAO;AAAA,YACN,mBAAK,iBAAO,KAAK,KAAM,WAAY,CAAE,GAAG,CAAE,iBAAO,GAAI,CAAE;AAAA,QACvD,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAQO,SAAS,gBACf,MACA,QACqB;AACrB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,aAAO,sBAAW,MAAM,wCAAoB,UAAW;AACxD;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAOA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,uBAAmB,gCAAa,SAAS,OAAQ;AACvD,cAAK,mBAAmB,QAAS;AAChC,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR;AAAA,cACA,QAAQ;AAAA,cACR;AAAA,cACA,eAAe;AAAA,cACf;AAAA,YACD,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,OAAO,KAAM,EAAG;AAChC,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,uBAAmB,gCAAa,SAAS,OAAQ;AACvD,cAAK,mBAAmB,QAAS;AAChC,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR;AAAA,cACA,QAAQ;AAAA,cACR;AAAA,cACA,eAAe;AAAA,cACf;AAAA,YACD,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
   "names": ["import_constants"]
 }

package/build/color-ramps/lib/color-utils.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/theme/src/color-ramps/lib/color-utils.ts
 var color_utils_exports = {};
 __export(color_utils_exports, {
+  clampToGamut: () => clampToGamut,
   getColorString: () => getColorString,
   getContrast: () => getContrast
 });
@@ -31,8 +32,12 @@ function getColorString(color) {
 function getContrast(colorA, colorB) {
   return (0, import_fn.contrastWCAG21)(colorA, colorB);
 }
+function clampToGamut(c) {
+  return (0, import_fn.to)((0, import_fn.toGamut)(c, { space: import_fn.sRGB, method: "css" }), import_fn.OKLCH);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  clampToGamut,
   getColorString,
   getContrast
 });

package/build/color-ramps/lib/color-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/color-utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tto,\n\tserialize,\n\tcontrastWCAG21,\n\tsRGB,\n\ttype ColorTypes,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\n/**\n * Get string representation of a color\n * @param color Color object to stringify\n * @return String representation\n */\nexport function getColorString( color: ColorTypes ): string {\n\treturn serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );\n}\n\n/**\n * Get contrast value between two colors\n * @param colorA First color\n * @param colorB Second color\n * @return WCAG 2.1 contrast ratio\n */\nexport function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {\n\treturn contrastWCAG21( colorA, colorB );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAMO;AAKP,mCAAO;AAOA,SAAS,eAAgB,OAA4B;AAC3D,aAAO,yBAAW,cAAI,OAAO,cAAK,GAAG,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAE;AACvE;AAQO,SAAS,YAAa,QAAoB,QAA6B;AAC7E,aAAO,0BAAgB,QAAQ,MAAO;AACvC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tto,\n\ttoGamut,\n\tserialize,\n\tcontrastWCAG21,\n\tsRGB,\n\tOKLCH,\n\ttype ColorTypes,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\n/**\n * Get string representation of a color\n * @param color Color object to stringify\n * @return String representation\n */\nexport function getColorString( color: ColorTypes ): string {\n\treturn serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );\n}\n\n/**\n * Get contrast value between two colors\n * @param colorA First color\n * @param colorB Second color\n * @return WCAG 2.1 contrast ratio\n */\nexport function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {\n\treturn contrastWCAG21( colorA, colorB );\n}\n\n/**\n * Make sure that a color is valid in the sRGB gamut and convert it to OKLCH.\n * @param c\n */\nexport function clampToGamut( c: ColorTypes ) {\n\t// map into sRGB using CSS OKLCH method\n\treturn to( toGamut( c, { space: sRGB, method: 'css' } ), OKLCH );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAQO;AAKP,mCAAO;AAOA,SAAS,eAAgB,OAA4B;AAC3D,aAAO,yBAAW,cAAI,OAAO,cAAK,GAAG,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAE;AACvE;AAQO,SAAS,YAAa,QAAoB,QAA6B;AAC7E,aAAO,0BAAgB,QAAQ,MAAO;AACvC;AAMO,SAAS,aAAc,GAAgB;AAE7C,aAAO,kBAAI,mBAAS,GAAG,EAAE,OAAO,gBAAM,QAAQ,MAAM,CAAE,GAAG,eAAM;AAChE;",
   "names": []
 }

package/build/color-ramps/lib/constants.js

@@ -34,7 +34,7 @@ var import_fn = require("colorjs.io/fn");
 var import_register_color_spaces = require("./register-color-spaces");
 var WHITE = (0, import_fn.to)("white", import_fn.OKLCH);
 var BLACK = (0, import_fn.to)("black", import_fn.OKLCH);
-var UNIVERSAL_CONTRAST_TOPUP = 0.012;
+var UNIVERSAL_CONTRAST_TOPUP = 0.02;
 var WHITE_TEXT_CONTRAST_MARGIN = 3.1;
 var ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
   lighter: { min: 0.2, max: 0.4 },

package/build/color-ramps/lib/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/constants.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so half of the difference (0.008) can be rounding error.\n// - the sum is 0.012: the margin we add to ensure that the target contrast is met after all the rounding.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.012;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const CONTRAST_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so 0.016 is the maximum total rounding error between two values.\n// - the sum is 0.02: the margin we add to ensure that the target contrast is met after all the rounding.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.02;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const CONTRAST_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA0B;AAK1B,mCAAO;AAGA,IAAM,YAAQ,cAAI,SAAS,eAAM;AACjC,IAAM,YAAQ,cAAI,SAAS,eAAM;AAMjC,IAAM,2BAA2B;AAOjC,IAAM,6BAA6B;AAOnC,IAAM,yCAAyC;AAAA,EACrD,SAAS,EAAE,KAAK,KAAK,KAAK,IAAI;AAAA,EAC9B,QAAQ,EAAE,KAAK,MAAM,KAAK,KAAK;AAChC;AAGO,IAAM,mBAAmB;AAEzB,IAAM,2BAA2B;AAEjC,IAAM,wBAIP;AAAA,EACL;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,cAAc,YAAa;AAAA,IAClC,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,UAAW;AAAA,IAC9B,KAAK,CAAE,YAAa;AAAA,IACpB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,SAAU;AAAA,IACjB,KAAK,CAAE,QAAS;AAAA,IAChB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,SAAU;AAAA,IACjB,QAAQ;AAAA,EACT;AACD;AAGO,IAAM,sBAAsB;AAAA,EAClC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACR;",
   "names": []
 }

package/build/color-ramps/lib/default-ramps.js

@@ -25,190 +25,190 @@ module.exports = __toCommonJS(default_ramps_exports);
 var DEFAULT_RAMPS = {
   bg: {
     ramp: {
-      surface2: { color: "#f8f8f8", warning: false },
-      bgFill1: { color: "#555", warning: false },
-      fgFill: { color: "#f0f0f0", 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: "#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: "#cfcfcf", warning: false },
-      bgFillDark: { color: "#1e1e1e", warning: false },
-      fgFillDark: { color: "#f0f0f0", warning: false },
-      bgFillInverted2: { color: "#1e1e1e", warning: false },
-      bgFillInverted1: { color: "#2d2d2d", warning: false },
-      fgFillInverted: { color: "#f0f0f0", warning: false },
-      surface1: { color: "#f0f0f0", warning: false }
+      surface2: "#f8f8f8",
+      bgFill1: "#555",
+      fgFill: "#f0f0f0",
+      bgFill2: "#484848",
+      surface6: "#d2d2d2",
+      surface5: "#e2e2e2",
+      surface4: "#eaeaea",
+      surface3: "#fff",
+      fgSurface4: "#1e1e1e",
+      fgSurface3: "#6d6d6d",
+      fgSurface2: "#8a8a8a",
+      fgSurface1: "#aaa",
+      stroke3: "#8a8a8a",
+      stroke4: "#6c6c6c",
+      stroke2: "#d8d8d8",
+      stroke1: "#e0e0e0",
+      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: "#2e49da", warning: false },
-      surface2: { color: "#f6f8fc", 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: "#5881ff", warning: false },
-      fgSurface1: { color: "#84a9ff", warning: false },
-      stroke3: { color: "#3858e9", 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: "#12009f", warning: false },
-      fgFillInverted: { color: "#eff0f2", warning: false },
-      surface1: { color: "#edf0fa", warning: false }
+      bgFill1: "#3858e9",
+      fgFill: "#eff0f2",
+      bgFill2: "#2e49d9",
+      surface2: "#f6f8fc",
+      surface6: "#c7d2ee",
+      surface5: "#dbe2f4",
+      surface4: "#e4eaf7",
+      surface3: "#fff",
+      fgSurface4: "#0b0070",
+      fgSurface3: "#3858e9",
+      fgSurface2: "#5b82ff",
+      fgSurface1: "#85a9ff",
+      stroke3: "#3858e9",
+      stroke4: "#2337c8",
+      stroke2: "#9aaad3",
+      stroke1: "#a2b1d6",
+      bgFillDark: "#1b1e26",
+      fgFillDark: "#eff0f2",
+      bgFillInverted2: "#1b1e26",
+      bgFillInverted1: "#13009f",
+      fgFillInverted: "#eff0f2",
+      surface1: "#ecf0f9"
     },
     direction: "darker"
   },
   info: {
     ramp: {
-      bgFill1: { color: "#0090ff", warning: false },
-      fgFill: { color: "#1b1e23", warning: false },
-      bgFill2: { color: "#0081ef", warning: false },
-      surface2: { color: "#f5f9fd", 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: "#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: "#002675", warning: false },
-      fgFillInverted: { color: "#eff0f2", warning: false },
-      surface1: { color: "#eaf1fa", warning: false }
+      bgFill1: "#0090ff",
+      fgFill: "#1b1e23",
+      bgFill2: "#007fed",
+      surface2: "#f5f9fd",
+      surface6: "#bdd5f1",
+      surface5: "#d4e4f6",
+      surface4: "#dfebf8",
+      surface3: "#fff",
+      fgSurface4: "#001b4f",
+      fgSurface3: "#006bd7",
+      fgSurface2: "#008bfa",
+      fgSurface1: "#59b0ff",
+      stroke3: "#006bd7",
+      stroke4: "#004fa9",
+      stroke2: "#94b5d9",
+      stroke1: "#9fbcdd",
+      bgFillDark: "#1b1e23",
+      fgFillDark: "#eff0f2",
+      bgFillInverted2: "#1b1e23",
+      bgFillInverted1: "#002a69",
+      fgFillInverted: "#eff0f2",
+      surface1: "#e9f1fa"
     },
     direction: "darker"
   },
   success: {
     ramp: {
-      bgFill1: { color: "#4ab866", warning: false },
-      fgFill: { color: "#1b1f1c", warning: false },
-      bgFill2: { color: "#37a857", warning: false },
-      surface2: { color: "#f0fcf2", 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: "#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: "#003800", warning: false },
-      fgFillInverted: { color: "#edf2ed", warning: false },
-      surface1: { color: "#ddf8e1", warning: false }
+      bgFill1: "#4ab866",
+      fgFill: "#1b1f1c",
+      bgFill2: "#37a756",
+      surface2: "#f0fcf2",
+      surface6: "#7eea95",
+      surface5: "#b5f1bf",
+      surface4: "#cbf5d1",
+      surface3: "#fff",
+      fgSurface4: "#002900",
+      fgSurface3: "#007f30",
+      fgSurface2: "#2b9e4e",
+      fgSurface1: "#53c06e",
+      stroke3: "#007f30",
+      stroke4: "#006013",
+      stroke2: "#7dc189",
+      stroke1: "#82c98f",
+      bgFillDark: "#1b1f1c",
+      fgFillDark: "#edf2ed",
+      bgFillInverted2: "#1b1f1c",
+      bgFillInverted1: "#003701",
+      fgFillInverted: "#edf2ed",
+      surface1: "#dbf8df"
     },
     direction: "darker"
   },
   caution: {
     ramp: {
-      bgFill1: { color: "#f0d149", warning: false },
-      fgFill: { color: "#1f1e1b", warning: false },
-      bgFill2: { color: "#ddbe30", warning: false },
-      surface2: { color: "#fdf9e7", 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: "#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: "#3a2b00", warning: false },
-      fgFillInverted: { color: "#f6f1da", warning: false },
-      surface1: { color: "#faf1cd", warning: false }
+      bgFill1: "#f0d149",
+      fgFill: "#1f1e1b",
+      bgFill2: "#dcbe2f",
+      surface2: "#fdf9e7",
+      surface6: "#ecd264",
+      surface5: "#f5e297",
+      surface4: "#f7eab3",
+      surface3: "#fff",
+      fgSurface4: "#281d00",
+      fgSurface3: "#836b00",
+      fgSurface2: "#a58700",
+      fgSurface1: "#c7a900",
+      stroke3: "#836b00",
+      stroke4: "#635000",
+      stroke2: "#bfb17a",
+      stroke1: "#c7b97f",
+      bgFillDark: "#1f1e1b",
+      fgFillDark: "#f6f1da",
+      bgFillInverted2: "#1f1e1b",
+      bgFillInverted1: "#392c00",
+      fgFillInverted: "#f6f1da",
+      surface1: "#f9f0c8"
     },
     direction: "darker"
   },
   warning: {
     ramp: {
-      bgFill1: { color: "#f0b849", warning: false },
-      fgFill: { color: "#1f1e1b", warning: false },
-      bgFill2: { color: "#dea633", warning: false },
-      surface2: { color: "#fdf7ee", 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: "#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: "#432600", warning: false },
-      fgFillInverted: { color: "#f3f0e9", warning: false },
-      surface1: { color: "#faefdc", warning: false }
+      bgFill1: "#f0b849",
+      fgFill: "#1f1e1b",
+      bgFill2: "#dda633",
+      surface2: "#fdf7ee",
+      surface6: "#f1ce8f",
+      surface5: "#f6e0b9",
+      surface4: "#f8e8cc",
+      surface3: "#fff",
+      fgSurface4: "#2e1900",
+      fgSurface3: "#936400",
+      fgSurface2: "#b68000",
+      fgSurface1: "#d8a12c",
+      stroke3: "#936400",
+      stroke4: "#704a00",
+      stroke2: "#caae7c",
+      stroke1: "#d2b581",
+      bgFillDark: "#1f1e1b",
+      fgFillDark: "#f3f0e9",
+      bgFillInverted2: "#1f1e1b",
+      bgFillInverted1: "#422800",
+      fgFillInverted: "#f3f0e9",
+      surface1: "#faeeda"
     },
     direction: "darker"
   },
   error: {
     ramp: {
-      bgFill1: { color: "#cc1818", warning: false },
-      fgFill: { color: "#f2efef", warning: false },
-      bgFill2: { color: "#bc0001", warning: false },
-      surface2: { color: "#fdf6f5", 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: "#f84d41", warning: false },
-      fgSurface1: { color: "#ff8373", warning: false },
-      stroke3: { color: "#cc1818", 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: "#680000", warning: false },
-      fgFillInverted: { color: "#f2efef", warning: false },
-      surface1: { color: "#fcedea", warning: false }
+      bgFill1: "#cc1818",
+      fgFill: "#f2efef",
+      bgFill2: "#b90000",
+      surface2: "#fdf6f5",
+      surface6: "#f5c8c1",
+      surface5: "#f9dbd7",
+      surface4: "#fae4e1",
+      surface3: "#fff",
+      fgSurface4: "#470000",
+      fgSurface3: "#cc1818",
+      fgSurface2: "#f74c40",
+      fgSurface1: "#ff8879",
+      stroke3: "#cc1818",
+      stroke4: "#9d0000",
+      stroke2: "#de988e",
+      stroke1: "#e1a198",
+      bgFillDark: "#231c1b",
+      fgFillDark: "#f2efef",
+      bgFillInverted2: "#231c1b",
+      bgFillInverted1: "#640000",
+      fgFillInverted: "#f2efef",
+      surface1: "#fbece9"
     },
     direction: "darker"
   }