@balena/design-tokens 0.6.1 → 0.7.0

package/build/css/tokens.css

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 May 2024 13:52:15 GMT
+ * Generated on Tue, 14 May 2024 08:46:19 GMT
  */
 
 :root {
 	--typography-components-badge-text-case: uppercase;
 	--typography-components-badge-line-height: 0.857rem;
-	--typography-components-badge-font-weight: 500;
+	--typography-components-badge-font-weight: 400;
 	--typography-components-badge-font-size: 0.714rem;
 	--typography-icon-sm-solid-text-case: none;
 	--typography-icon-sm-solid-line-height: 1.286rem;
@@ -236,44 +236,44 @@
 	--color-border-palette-purple-strong: var(--color-palette-purple-600);
 	--color-border-palette-purple: var(--color-palette-purple-200);
 	--color-border-palette-teal-strong: var(--color-palette-teal-600);
-	--color-border-palette-teal: var(--color-palette-teal-200);
+	--color-border-palette-teal: var(--color-palette-teal-300);
 	--color-border-palette-neutral-strong: var(--color-palette-neutral-600);
-	--color-border-palette-neutral: var(--color-palette-neutral-200);
+	--color-border-palette-neutral: var(--color-palette-neutral-300);
 	--color-border-palette-red-strong: var(--color-palette-red-600);
-	--color-border-palette-red: var(--color-palette-red-200);
+	--color-border-palette-red: var(--color-palette-red-300);
 	--color-border-palette-orange-strong: var(--color-palette-orange-600);
-	--color-border-palette-orange: var(--color-palette-orange-200);
+	--color-border-palette-orange: var(--color-palette-orange-300);
 	--color-border-palette-green-strong: var(--color-palette-green-600);
-	--color-border-palette-green: var(--color-palette-green-200);
+	--color-border-palette-green: var(--color-palette-green-300);
 	--color-border-palette-blue-strong: var(--color-palette-blue-600);
-	--color-border-palette-blue: var(--color-palette-blue-200);
+	--color-border-palette-blue: var(--color-palette-blue-300);
 	--color-border-accent-strong: var(--color-palette-blue-600);
 	--color-border-accent: var(--color-palette-blue-300);
 	--color-border-subtle: var(--color-palette-neutral-75);
 	--color-bg-palette-yellow-strong: var(--color-palette-yellow-1000);
-	--color-bg-palette-yellow: var(--color-palette-yellow-50);
+	--color-bg-palette-yellow: var(--color-palette-yellow-75);
 	--color-bg-palette-purple-strong: var(--color-palette-purple-800);
-	--color-bg-palette-purple: var(--color-palette-purple-50);
+	--color-bg-palette-purple: var(--color-palette-purple-75);
 	--color-bg-palette-teal-strong: var(--color-palette-teal-800);
-	--color-bg-palette-teal: var(--color-palette-teal-50);
+	--color-bg-palette-teal: var(--color-palette-teal-75);
 	--color-bg-palette-neutral-strong: var(--color-palette-neutral-800);
-	--color-bg-palette-neutral: var(--color-palette-neutral-75);
+	--color-bg-palette-neutral: var(--color-palette-neutral-100);
 	--color-bg-palette-red-strong: var(--color-palette-red-800);
-	--color-bg-palette-red: var(--color-palette-red-50);
+	--color-bg-palette-red: var(--color-palette-red-75);
 	--color-bg-palette-orange-strong: var(--color-palette-orange-900);
-	--color-bg-palette-orange: var(--color-palette-orange-50);
+	--color-bg-palette-orange: var(--color-palette-orange-75);
 	--color-bg-palette-green-strong: var(--color-palette-green-800);
-	--color-bg-palette-green: var(--color-palette-green-50);
+	--color-bg-palette-green: var(--color-palette-green-75);
 	--color-bg-palette-blue-strong: var(--color-palette-blue-800);
-	--color-bg-palette-blue: var(--color-palette-blue-50);
+	--color-bg-palette-blue: var(--color-palette-blue-75);
 	--color-bg-code: var(--color-palette-red-50);
 	--color-bg-accent-strong: var(--color-palette-blue-600);
 	--color-bg-accent: var(--color-palette-blue-50);
 	--color-bg-strongest: var(--color-palette-neutral-900);
 	--color-bg: var(--color-palette-neutral-50);
-	--color-text-palette-yellow: var(--color-palette-yellow-1000);
-	--color-text-palette-purple: var(--color-palette-purple-900);
-	--color-text-palette-teal: var(--color-palette-teal-900);
+	--color-text-palette-yellow: var(--color-palette-orange-1000);
+	--color-text-palette-purple: var(--color-palette-purple-1000);
+	--color-text-palette-teal: var(--color-palette-teal-1000);
 	--color-text-palette-neutral: var(--color-palette-neutral-800);
 	--color-text-palette-red: var(--color-palette-red-1000);
 	--color-text-palette-orange: var(--color-palette-orange-1000);

package/build/js/tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 May 2024 13:52:15 GMT
+ * Generated on Tue, 14 May 2024 08:46:19 GMT
  */
 
 export const color: {

package/build/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 May 2024 13:52:15 GMT
+ * Generated on Tue, 14 May 2024 08:46:19 GMT
  */
 
 export const color = {
@@ -467,15 +467,15 @@ export const color = {
 				name: 'ColorTextPaletteNeutral',
 			},
 			teal: {
-				value: '#106359',
+				value: '#0b423b',
 				name: 'ColorTextPaletteTeal',
 			},
 			purple: {
-				value: '#4d45c4',
+				value: '#38319b',
 				name: 'ColorTextPalettePurple',
 			},
 			yellow: {
-				value: '#cd6509',
+				value: '#b23d00',
 				name: 'ColorTextPaletteYellow',
 			},
 		},
@@ -484,7 +484,7 @@ export const color = {
 		value: '#f9fafb',
 		name: 'ColorBg',
 		subtle: {
-			value: '#e3ebf1',
+			value: '#ccdbe7',
 			name: 'ColorBgSubtle',
 		},
 		subtlest: {
@@ -508,7 +508,7 @@ export const color = {
 			},
 		},
 		info: {
-			value: '#e1f4fe',
+			value: '#c9ebfd',
 			name: 'ColorBgInfo',
 			strong: {
 				value: '#1472b9',
@@ -516,7 +516,7 @@ export const color = {
 			},
 		},
 		success: {
-			value: '#e7f8e7',
+			value: '#d4f2d4',
 			name: 'ColorBgSuccess',
 			strong: {
 				value: '#1c8e0d',
@@ -524,7 +524,7 @@ export const color = {
 			},
 		},
 		warning: {
-			value: '#fff3df',
+			value: '#ffeac7',
 			name: 'ColorBgWarning',
 			strong: {
 				value: '#e34e00',
@@ -532,7 +532,7 @@ export const color = {
 			},
 		},
 		danger: {
-			value: '#feebef',
+			value: '#fddde4',
 			name: 'ColorBgDanger',
 			strong: {
 				value: '#cb262f',
@@ -555,7 +555,7 @@ export const color = {
 		},
 		palette: {
 			blue: {
-				value: '#e1f4fe',
+				value: '#c9ebfd',
 				name: 'ColorBgPaletteBlue',
 				strong: {
 					value: '#1472b9',
@@ -563,7 +563,7 @@ export const color = {
 				},
 			},
 			green: {
-				value: '#e7f8e7',
+				value: '#d4f2d4',
 				name: 'ColorBgPaletteGreen',
 				strong: {
 					value: '#1c8e0d',
@@ -571,7 +571,7 @@ export const color = {
 				},
 			},
 			orange: {
-				value: '#fff3df',
+				value: '#ffeac7',
 				name: 'ColorBgPaletteOrange',
 				strong: {
 					value: '#e34e00',
@@ -579,7 +579,7 @@ export const color = {
 				},
 			},
 			red: {
-				value: '#feebef',
+				value: '#fddde4',
 				name: 'ColorBgPaletteRed',
 				strong: {
 					value: '#cb262f',
@@ -587,7 +587,7 @@ export const color = {
 				},
 			},
 			neutral: {
-				value: '#e3ebf1',
+				value: '#ccdbe7',
 				name: 'ColorBgPaletteNeutral',
 				strong: {
 					value: '#23445e',
@@ -595,7 +595,7 @@ export const color = {
 				},
 			},
 			teal: {
-				value: '#dbf9f6',
+				value: '#c6f6f1',
 				name: 'ColorBgPaletteTeal',
 				strong: {
 					value: '#1a8680',
@@ -603,7 +603,7 @@ export const color = {
 				},
 			},
 			purple: {
-				value: '#f2edff',
+				value: '#e9e0ff',
 				name: 'ColorBgPalettePurple',
 				strong: {
 					value: '#6151d3',
@@ -611,7 +611,7 @@ export const color = {
 				},
 			},
 			yellow: {
-				value: '#fffde6',
+				value: '#fffbd1',
 				name: 'ColorBgPaletteYellow',
 				strong: {
 					value: '#cd6509',
@@ -621,7 +621,7 @@ export const color = {
 		},
 	},
 	border: {
-		value: '#b5ccde',
+		value: '#9cbcd6',
 		name: 'ColorBorder',
 		subtle: {
 			value: '#e3ebf1',
@@ -640,7 +640,7 @@ export const color = {
 			},
 		},
 		info: {
-			value: '#81d1f9',
+			value: '#50bff5',
 			name: 'ColorBorderInfo',
 			strong: {
 				value: '#1496e1',
@@ -648,7 +648,7 @@ export const color = {
 			},
 		},
 		success: {
-			value: '#a1e0a0',
+			value: '#77d577',
 			name: 'ColorBorderSuccess',
 			strong: {
 				value: '#26b12b',
@@ -656,7 +656,7 @@ export const color = {
 			},
 		},
 		warning: {
-			value: '#fdca7e',
+			value: '#fcb54a',
 			name: 'ColorBorderWarning',
 			strong: {
 				value: '#f88900',
@@ -664,7 +664,7 @@ export const color = {
 			},
 		},
 		danger: {
-			value: '#f19b9e',
+			value: '#e87478',
 			name: 'ColorBorderDanger',
 			strong: {
 				value: '#eb373e',
@@ -673,7 +673,7 @@ export const color = {
 		},
 		palette: {
 			blue: {
-				value: '#81d1f9',
+				value: '#50bff5',
 				name: 'ColorBorderPaletteBlue',
 				strong: {
 					value: '#1496e1',
@@ -681,7 +681,7 @@ export const color = {
 				},
 			},
 			green: {
-				value: '#a1e0a0',
+				value: '#77d577',
 				name: 'ColorBorderPaletteGreen',
 				strong: {
 					value: '#26b12b',
@@ -689,7 +689,7 @@ export const color = {
 				},
 			},
 			orange: {
-				value: '#fdca7e',
+				value: '#fcb54a',
 				name: 'ColorBorderPaletteOrange',
 				strong: {
 					value: '#f88900',
@@ -697,7 +697,7 @@ export const color = {
 				},
 			},
 			red: {
-				value: '#f19b9e',
+				value: '#e87478',
 				name: 'ColorBorderPaletteRed',
 				strong: {
 					value: '#eb373e',
@@ -705,7 +705,7 @@ export const color = {
 				},
 			},
 			neutral: {
-				value: '#b5ccde',
+				value: '#9cbcd6',
 				name: 'ColorBorderPaletteNeutral',
 				strong: {
 					value: '#507ea2',
@@ -713,7 +713,7 @@ export const color = {
 				},
 			},
 			teal: {
-				value: '#7ce1da',
+				value: '#49d4ce',
 				name: 'ColorBorderPaletteTeal',
 				strong: {
 					value: '#25b0b0',
@@ -1208,7 +1208,7 @@ export const typography = {
 				name: 'TypographyComponentsBadgeFontSize',
 			},
 			fontWeight: {
-				value: 500,
+				value: 400,
 				name: 'TypographyComponentsBadgeFontWeight',
 			},
 			lineHeight: {
@@ -1220,7 +1220,7 @@ export const typography = {
 				name: 'TypographyComponentsBadgeTextCase',
 			},
 			shorthand: {
-				value: '500 0.714rem/0.857rem "Source Sans Pro",Helvetica,sans-serif',
+				value: '400 0.714rem/0.857rem "Source Sans Pro",Helvetica,sans-serif',
 				name: 'TypographyComponentsBadgeShorthand',
 			},
 		},

package/build/json/tokens.json

@@ -2183,12 +2183,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#106359",
+		"value": "#0b423b",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.teal.900}"
+			"value": "{color.palette.teal.1000}"
 		},
 		"name": "ColorTextPaletteTeal",
 		"attributes": {
@@ -2201,12 +2201,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#4d45c4",
+		"value": "#38319b",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.purple.900}"
+			"value": "{color.palette.purple.1000}"
 		},
 		"name": "ColorTextPalettePurple",
 		"attributes": {
@@ -2218,13 +2218,15 @@
 		"path": ["color", "text", "palette", "purple"]
 	},
 	{
+		"description": "We're using orange.1000 for better contrast ratio",
 		"type": "color",
-		"value": "#cd6509",
+		"value": "#b23d00",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
+			"description": "We're using orange.1000 for better contrast ratio",
 			"type": "color",
-			"value": "{color.palette.yellow.1000}"
+			"value": "{color.palette.orange.1000}"
 		},
 		"name": "ColorTextPaletteYellow",
 		"attributes": {
@@ -2254,7 +2256,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#e3ebf1",
+		"value": "#ccdbe7",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -2360,7 +2362,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#e1f4fe",
+		"value": "#c9ebfd",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -2396,7 +2398,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#e7f8e7",
+		"value": "#d4f2d4",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -2432,7 +2434,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#fff3df",
+		"value": "#ffeac7",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -2468,7 +2470,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#feebef",
+		"value": "#fddde4",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -2561,12 +2563,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#e1f4fe",
+		"value": "#c9ebfd",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.blue.50}"
+			"value": "{color.palette.blue.75}"
 		},
 		"name": "ColorBgPaletteBlue",
 		"attributes": {
@@ -2599,12 +2601,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#e7f8e7",
+		"value": "#d4f2d4",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.green.50}"
+			"value": "{color.palette.green.75}"
 		},
 		"name": "ColorBgPaletteGreen",
 		"attributes": {
@@ -2637,12 +2639,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#fff3df",
+		"value": "#ffeac7",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.orange.50}"
+			"value": "{color.palette.orange.75}"
 		},
 		"name": "ColorBgPaletteOrange",
 		"attributes": {
@@ -2675,12 +2677,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#feebef",
+		"value": "#fddde4",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.red.50}"
+			"value": "{color.palette.red.75}"
 		},
 		"name": "ColorBgPaletteRed",
 		"attributes": {
@@ -2713,12 +2715,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#e3ebf1",
+		"value": "#ccdbe7",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.neutral.75}"
+			"value": "{color.palette.neutral.100}"
 		},
 		"name": "ColorBgPaletteNeutral",
 		"attributes": {
@@ -2751,12 +2753,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#dbf9f6",
+		"value": "#c6f6f1",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.teal.50}"
+			"value": "{color.palette.teal.75}"
 		},
 		"name": "ColorBgPaletteTeal",
 		"attributes": {
@@ -2789,12 +2791,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#f2edff",
+		"value": "#e9e0ff",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.purple.50}"
+			"value": "{color.palette.purple.75}"
 		},
 		"name": "ColorBgPalettePurple",
 		"attributes": {
@@ -2827,12 +2829,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#fffde6",
+		"value": "#fffbd1",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.yellow.50}"
+			"value": "{color.palette.yellow.75}"
 		},
 		"name": "ColorBgPaletteYellow",
 		"attributes": {
@@ -2865,7 +2867,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#b5ccde",
+		"value": "#9cbcd6",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -2952,7 +2954,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#81d1f9",
+		"value": "#50bff5",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -2988,7 +2990,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#a1e0a0",
+		"value": "#77d577",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -3024,7 +3026,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#fdca7e",
+		"value": "#fcb54a",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -3060,7 +3062,7 @@
 	},
 	{
 		"type": "color",
-		"value": "#f19b9e",
+		"value": "#e87478",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
@@ -3096,12 +3098,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#81d1f9",
+		"value": "#50bff5",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.blue.200}"
+			"value": "{color.palette.blue.300}"
 		},
 		"name": "ColorBorderPaletteBlue",
 		"attributes": {
@@ -3134,12 +3136,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#a1e0a0",
+		"value": "#77d577",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.green.200}"
+			"value": "{color.palette.green.300}"
 		},
 		"name": "ColorBorderPaletteGreen",
 		"attributes": {
@@ -3172,12 +3174,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#fdca7e",
+		"value": "#fcb54a",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.orange.200}"
+			"value": "{color.palette.orange.300}"
 		},
 		"name": "ColorBorderPaletteOrange",
 		"attributes": {
@@ -3210,12 +3212,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#f19b9e",
+		"value": "#e87478",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.red.200}"
+			"value": "{color.palette.red.300}"
 		},
 		"name": "ColorBorderPaletteRed",
 		"attributes": {
@@ -3248,12 +3250,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#b5ccde",
+		"value": "#9cbcd6",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.neutral.200}"
+			"value": "{color.palette.neutral.300}"
 		},
 		"name": "ColorBorderPaletteNeutral",
 		"attributes": {
@@ -3286,12 +3288,12 @@
 	},
 	{
 		"type": "color",
-		"value": "#7ce1da",
+		"value": "#49d4ce",
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "color",
-			"value": "{color.palette.teal.200}"
+			"value": "{color.palette.teal.300}"
 		},
 		"name": "ColorBorderPaletteTeal",
 		"attributes": {
@@ -5230,12 +5232,12 @@
 	},
 	{
 		"type": "number",
-		"value": 500,
+		"value": 400,
 		"filePath": "tokens/design-tokens.json",
 		"isSource": true,
 		"original": {
 			"type": "number",
-			"value": 500
+			"value": 400
 		},
 		"name": "TypographyComponentsBadgeFontWeight",
 		"attributes": {
@@ -5283,7 +5285,7 @@
 		"path": ["typography", "components", "badge", "textCase"]
 	},
 	{
-		"value": "500 10/12 \"Source Sans Pro\",Helvetica,sans-serif",
+		"value": "400 10/12 \"Source Sans Pro\",Helvetica,sans-serif",
 		"filePath": "tokens/typography-shorthands.json",
 		"isSource": true,
 		"original": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/design-tokens",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "main": "build/js/tokens.js",
   "module": "build/js/tokens.js",
   "types": "build/js/tokens.d.ts",
@@ -36,6 +36,6 @@
     "vitest": "^1.2.2"
   },
   "versionist": {
-    "publishedAt": "2024-05-03T13:51:19.328Z"
+    "publishedAt": "2024-05-14T08:45:25.653Z"
   }
 }