@carbon/colors 11.58.0-rc.0 → 11.59.0-rc.0

package/README.md

@@ -97,6 +97,26 @@ We're always looking for contributors to help us fix bugs, build new features,
 or help us improve the project documentation. If you're interested, definitely
 check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
 
+### Modifying color values
+
+Color values are defined in [`src/dtcg/colors.json`](./src/dtcg/colors.json)
+using the [DTCG token format](https://tr.designtokens.org/format/). This is the
+single source of truth for the package — **do not edit generated files
+directly**.
+
+The following files are generated at build time by Style Dictionary and should
+not be hand-edited:
+
+- `js/generated/colors.js` / `js/generated/colors.d.ts` — JS exports
+- `scss/` — Sass variables and maps
+
+To add or update a color:
+
+1. Edit `src/dtcg/colors.json`
+2. Run `yarn build` in this package to regenerate all outputs
+3. Run `yarn test --testPathPatterns=packages/colors` from the repo root to
+   confirm nothing regressed
+
 ## 📝 License
 
 Licensed under the [Apache 2.0 License](/LICENSE).

package/es/index.js

@@ -1,10 +1,4 @@
-//#region src/colors.ts
-/**
-* Copyright IBM Corp. 2018, 2026
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+//#region js/generated/colors.js
 const black = "#000000";
 const black100 = black;
 const blackHover = "#212121";
@@ -121,27 +115,27 @@ const red = {
 	90: red90,
 	100: red100
 };
-const red100Hover = "#540d11";
-const red90Hover = "#66050a";
-const red80Hover = "#921118";
-const red70Hover = "#c21e25";
-const red60Hover = "#b81922";
-const red50Hover = "#ee0713";
-const red40Hover = "#ff6168";
-const red30Hover = "#ff99a0";
-const red20Hover = "#ffc2c5";
 const red10Hover = "#ffe0e0";
+const red20Hover = "#ffc2c5";
+const red30Hover = "#ff99a0";
+const red40Hover = "#ff6168";
+const red50Hover = "#ee0713";
+const red60Hover = "#b81922";
+const red70Hover = "#c21e25";
+const red80Hover = "#921118";
+const red90Hover = "#66050a";
+const red100Hover = "#540d11";
 const redHover = {
-	100: red100Hover,
-	90: red90Hover,
-	80: red80Hover,
-	70: red70Hover,
-	60: red60Hover,
-	50: red50Hover,
-	40: red40Hover,
-	30: red30Hover,
+	10: red10Hover,
 	20: red20Hover,
-	10: red10Hover
+	30: red30Hover,
+	40: red40Hover,
+	50: red50Hover,
+	60: red60Hover,
+	70: red70Hover,
+	80: red80Hover,
+	90: red90Hover,
+	100: red100Hover
 };
 const magenta10 = "#fff0f7";
 const magenta20 = "#ffd6e8";
@@ -165,27 +159,27 @@ const magenta = {
 	90: magenta90,
 	100: magenta100
 };
-const magenta100Hover = "#53142f";
-const magenta90Hover = "#68032e";
-const magenta80Hover = "#8e0b43";
-const magenta70Hover = "#bf1d63";
-const magenta60Hover = "#b0215f";
-const magenta50Hover = "#e3176f";
-const magenta40Hover = "#ff57a0";
-const magenta30Hover = "#ff94c3";
-const magenta20Hover = "#ffbdda";
 const magenta10Hover = "#ffe0ef";
+const magenta20Hover = "#ffbdda";
+const magenta30Hover = "#ff94c3";
+const magenta40Hover = "#ff57a0";
+const magenta50Hover = "#e3176f";
+const magenta60Hover = "#b0215f";
+const magenta70Hover = "#bf1d63";
+const magenta80Hover = "#8e0b43";
+const magenta90Hover = "#68032e";
+const magenta100Hover = "#53142f";
 const magentaHover = {
-	100: magenta100Hover,
-	90: magenta90Hover,
-	80: magenta80Hover,
-	70: magenta70Hover,
-	60: magenta60Hover,
-	50: magenta50Hover,
-	40: magenta40Hover,
-	30: magenta30Hover,
+	10: magenta10Hover,
 	20: magenta20Hover,
-	10: magenta10Hover
+	30: magenta30Hover,
+	40: magenta40Hover,
+	50: magenta50Hover,
+	60: magenta60Hover,
+	70: magenta70Hover,
+	80: magenta80Hover,
+	90: magenta90Hover,
+	100: magenta100Hover
 };
 const purple10 = "#f6f2ff";
 const purple20 = "#e8daff";
@@ -209,27 +203,27 @@ const purple = {
 	90: purple90,
 	100: purple100
 };
-const purple100Hover = "#341c59";
-const purple90Hover = "#40197b";
-const purple80Hover = "#5b24ad";
-const purple70Hover = "#7c3dd6";
-const purple60Hover = "#7822fb";
-const purple50Hover = "#9352ff";
-const purple40Hover = "#ae7aff";
-const purple30Hover = "#c5a3ff";
-const purple20Hover = "#dcc7ff";
 const purple10Hover = "#ede5ff";
+const purple20Hover = "#dcc7ff";
+const purple30Hover = "#c5a3ff";
+const purple40Hover = "#ae7aff";
+const purple50Hover = "#9352ff";
+const purple60Hover = "#7822fb";
+const purple70Hover = "#7c3dd6";
+const purple80Hover = "#5b24ad";
+const purple90Hover = "#40197b";
+const purple100Hover = "#341c59";
 const purpleHover = {
-	100: purple100Hover,
-	90: purple90Hover,
-	80: purple80Hover,
-	70: purple70Hover,
-	60: purple60Hover,
-	50: purple50Hover,
-	40: purple40Hover,
-	30: purple30Hover,
+	10: purple10Hover,
 	20: purple20Hover,
-	10: purple10Hover
+	30: purple30Hover,
+	40: purple40Hover,
+	50: purple50Hover,
+	60: purple60Hover,
+	70: purple70Hover,
+	80: purple80Hover,
+	90: purple90Hover,
+	100: purple100Hover
 };
 const blue10 = "#edf5ff";
 const blue20 = "#d0e2ff";
@@ -253,27 +247,27 @@ const blue = {
 	90: blue90,
 	100: blue100
 };
-const blue100Hover = "#001f75";
-const blue90Hover = "#00258a";
-const blue80Hover = "#0039c7";
-const blue70Hover = "#0053ff";
-const blue60Hover = "#0050e6";
-const blue50Hover = "#1f70ff";
-const blue40Hover = "#5c97ff";
-const blue30Hover = "#8ab6ff";
-const blue20Hover = "#b8d3ff";
 const blue10Hover = "#dbebff";
+const blue20Hover = "#b8d3ff";
+const blue30Hover = "#8ab6ff";
+const blue40Hover = "#5c97ff";
+const blue50Hover = "#1f70ff";
+const blue60Hover = "#0050e6";
+const blue70Hover = "#0053ff";
+const blue80Hover = "#0039c7";
+const blue90Hover = "#00258a";
+const blue100Hover = "#001f75";
 const blueHover = {
-	100: blue100Hover,
-	90: blue90Hover,
-	80: blue80Hover,
-	70: blue70Hover,
-	60: blue60Hover,
-	50: blue50Hover,
-	40: blue40Hover,
-	30: blue30Hover,
+	10: blue10Hover,
 	20: blue20Hover,
-	10: blue10Hover
+	30: blue30Hover,
+	40: blue40Hover,
+	50: blue50Hover,
+	60: blue60Hover,
+	70: blue70Hover,
+	80: blue80Hover,
+	90: blue90Hover,
+	100: blue100Hover
 };
 const cyan10 = "#e5f6ff";
 const cyan20 = "#bae6ff";
@@ -541,35 +535,167 @@ const warmGrayHover = {
 };
 const colors = {
 	black: { 100: black },
-	blue,
-	coolGray,
-	cyan,
-	gray,
-	green,
-	magenta,
-	orange,
-	purple,
-	red,
-	teal,
-	warmGray,
-	white: { 0: white },
-	yellow
+	yellow: {
+		10: yellow10,
+		20: yellow20,
+		30: yellow30,
+		40: yellow40,
+		50: yellow50,
+		60: yellow60,
+		70: yellow70,
+		80: yellow80,
+		90: yellow90,
+		100: yellow100
+	},
+	orange: {
+		10: orange10,
+		20: orange20,
+		30: orange30,
+		40: orange40,
+		50: orange50,
+		60: orange60,
+		70: orange70,
+		80: orange80,
+		90: orange90,
+		100: orange100
+	},
+	red: {
+		10: red10,
+		20: red20,
+		30: red30,
+		40: red40,
+		50: red50,
+		60: red60,
+		70: red70,
+		80: red80,
+		90: red90,
+		100: red100
+	},
+	magenta: {
+		10: magenta10,
+		20: magenta20,
+		30: magenta30,
+		40: magenta40,
+		50: magenta50,
+		60: magenta60,
+		70: magenta70,
+		80: magenta80,
+		90: magenta90,
+		100: magenta100
+	},
+	purple: {
+		10: purple10,
+		20: purple20,
+		30: purple30,
+		40: purple40,
+		50: purple50,
+		60: purple60,
+		70: purple70,
+		80: purple80,
+		90: purple90,
+		100: purple100
+	},
+	blue: {
+		10: blue10,
+		20: blue20,
+		30: blue30,
+		40: blue40,
+		50: blue50,
+		60: blue60,
+		70: blue70,
+		80: blue80,
+		90: blue90,
+		100: blue100
+	},
+	cyan: {
+		10: cyan10,
+		20: cyan20,
+		30: cyan30,
+		40: cyan40,
+		50: cyan50,
+		60: cyan60,
+		70: cyan70,
+		80: cyan80,
+		90: cyan90,
+		100: cyan100
+	},
+	teal: {
+		10: teal10,
+		20: teal20,
+		30: teal30,
+		40: teal40,
+		50: teal50,
+		60: teal60,
+		70: teal70,
+		80: teal80,
+		90: teal90,
+		100: teal100
+	},
+	green: {
+		10: green10,
+		20: green20,
+		30: green30,
+		40: green40,
+		50: green50,
+		60: green60,
+		70: green70,
+		80: green80,
+		90: green90,
+		100: green100
+	},
+	coolGray: {
+		10: coolGray10,
+		20: coolGray20,
+		30: coolGray30,
+		40: coolGray40,
+		50: coolGray50,
+		60: coolGray60,
+		70: coolGray70,
+		80: coolGray80,
+		90: coolGray90,
+		100: coolGray100
+	},
+	gray: {
+		10: gray10,
+		20: gray20,
+		30: gray30,
+		40: gray40,
+		50: gray50,
+		60: gray60,
+		70: gray70,
+		80: gray80,
+		90: gray90,
+		100: gray100
+	},
+	warmGray: {
+		10: warmGray10,
+		20: warmGray20,
+		30: warmGray30,
+		40: warmGray40,
+		50: warmGray50,
+		60: warmGray60,
+		70: warmGray70,
+		80: warmGray80,
+		90: warmGray90,
+		100: warmGray100
+	},
+	white: { 0: white }
 };
 const hoverColors = {
-	whiteHover,
 	blackHover,
-	blueHover,
-	coolGrayHover,
-	cyanHover,
-	grayHover,
-	greenHover,
-	magentaHover,
+	yellowHover,
 	orangeHover,
-	purpleHover,
 	redHover,
+	magentaHover,
+	purpleHover,
+	blueHover,
+	cyanHover,
 	tealHover,
+	greenHover,
+	coolGrayHover,
+	grayHover,
 	warmGrayHover,
-	yellowHover
+	whiteHover
 };
 //#endregion
 //#region src/rgb.ts