@balena/design-tokens 0.5.0 → 0.6.0

package/build/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 18:16:30 GMT
+ * Generated on Tue, 30 Apr 2024 12:22:49 GMT
  */
 
 export const color = {
@@ -445,6 +445,40 @@ export const color = {
 			value: '#8d111a',
 			name: 'ColorTextCode',
 		},
+		palette: {
+			blue: {
+				value: '#0b3f75',
+				name: 'ColorTextPaletteBlue',
+			},
+			green: {
+				value: '#0e4d00',
+				name: 'ColorTextPaletteGreen',
+			},
+			orange: {
+				value: '#b23d00',
+				name: 'ColorTextPaletteOrange',
+			},
+			red: {
+				value: '#8d111a',
+				name: 'ColorTextPaletteRed',
+			},
+			neutral: {
+				value: '#23445e',
+				name: 'ColorTextPaletteNeutral',
+			},
+			teal: {
+				value: '#106359',
+				name: 'ColorTextPaletteTeal',
+			},
+			purple: {
+				value: '#4d45c4',
+				name: 'ColorTextPalettePurple',
+			},
+			yellow: {
+				value: '#cd6509',
+				name: 'ColorTextPaletteYellow',
+			},
+		},
 	},
 	bg: {
 		value: '#f9fafb',
@@ -505,6 +539,10 @@ export const color = {
 				name: 'ColorBgDangerStrong',
 			},
 		},
+		code: {
+			value: '#feebef',
+			name: 'ColorBgCode',
+		},
 		overlay: {
 			light: {
 				value: 'rgba(255, 255, 255, 0.8)',
@@ -515,9 +553,71 @@ export const color = {
 				name: 'ColorBgOverlayDark',
 			},
 		},
-		code: {
-			value: '#feebef',
-			name: 'ColorBgCode',
+		palette: {
+			blue: {
+				value: '#e1f4fe',
+				name: 'ColorBgPaletteBlue',
+				strong: {
+					value: '#1472b9',
+					name: 'ColorBgPaletteBlueStrong',
+				},
+			},
+			green: {
+				value: '#e7f8e7',
+				name: 'ColorBgPaletteGreen',
+				strong: {
+					value: '#1c8e0d',
+					name: 'ColorBgPaletteGreenStrong',
+				},
+			},
+			orange: {
+				value: '#fff3df',
+				name: 'ColorBgPaletteOrange',
+				strong: {
+					value: '#e34e00',
+					name: 'ColorBgPaletteOrangeStrong',
+				},
+			},
+			red: {
+				value: '#feebef',
+				name: 'ColorBgPaletteRed',
+				strong: {
+					value: '#cb262f',
+					name: 'ColorBgPaletteRedStrong',
+				},
+			},
+			neutral: {
+				value: '#e3ebf1',
+				name: 'ColorBgPaletteNeutral',
+				strong: {
+					value: '#23445e',
+					name: 'ColorBgPaletteNeutralStrong',
+				},
+			},
+			teal: {
+				value: '#dbf9f6',
+				name: 'ColorBgPaletteTeal',
+				strong: {
+					value: '#1a8680',
+					name: 'ColorBgPaletteTealStrong',
+				},
+			},
+			purple: {
+				value: '#f2edff',
+				name: 'ColorBgPalettePurple',
+				strong: {
+					value: '#6151d3',
+					name: 'ColorBgPalettePurpleStrong',
+				},
+			},
+			yellow: {
+				value: '#fffde6',
+				name: 'ColorBgPaletteYellow',
+				strong: {
+					value: '#cd6509',
+					name: 'ColorBgPaletteYellowStrong',
+				},
+			},
 		},
 	},
 	border: {
@@ -571,6 +671,72 @@ export const color = {
 				name: 'ColorBorderDangerStrong',
 			},
 		},
+		palette: {
+			blue: {
+				value: '#81d1f9',
+				name: 'ColorBorderPaletteBlue',
+				strong: {
+					value: '#1496e1',
+					name: 'ColorBorderPaletteBlueStrong',
+				},
+			},
+			green: {
+				value: '#a1e0a0',
+				name: 'ColorBorderPaletteGreen',
+				strong: {
+					value: '#26b12b',
+					name: 'ColorBorderPaletteGreenStrong',
+				},
+			},
+			orange: {
+				value: '#fdca7e',
+				name: 'ColorBorderPaletteOrange',
+				strong: {
+					value: '#f88900',
+					name: 'ColorBorderPaletteOrangeStrong',
+				},
+			},
+			red: {
+				value: '#f19b9e',
+				name: 'ColorBorderPaletteRed',
+				strong: {
+					value: '#eb373e',
+					name: 'ColorBorderPaletteRedStrong',
+				},
+			},
+			neutral: {
+				value: '#b5ccde',
+				name: 'ColorBorderPaletteNeutral',
+				strong: {
+					value: '#507ea2',
+					name: 'ColorBorderPaletteNeutralStrong',
+				},
+			},
+			teal: {
+				value: '#7ce1da',
+				name: 'ColorBorderPaletteTeal',
+				strong: {
+					value: '#25b0b0',
+					name: 'ColorBorderPaletteTealStrong',
+				},
+			},
+			purple: {
+				value: '#c6b6fa',
+				name: 'ColorBorderPalettePurple',
+				strong: {
+					value: '#7c61e6',
+					name: 'ColorBorderPalettePurpleStrong',
+				},
+			},
+			yellow: {
+				value: '#fdd835',
+				name: 'ColorBorderPaletteYellow',
+				strong: {
+					value: '#f9a825',
+					name: 'ColorBorderPaletteYellowStrong',
+				},
+			},
+		},
 	},
 	icon: {
 		value: '#376080',
@@ -607,6 +773,40 @@ export const color = {
 			value: '#d82d36',
 			name: 'ColorIconDanger',
 		},
+		palette: {
+			blue: {
+				value: '#1883cd',
+				name: 'ColorIconPaletteBlue',
+			},
+			green: {
+				value: '#219f1e',
+				name: 'ColorIconPaletteGreen',
+			},
+			orange: {
+				value: '#f27901',
+				name: 'ColorIconPaletteOrange',
+			},
+			red: {
+				value: '#d82d36',
+				name: 'ColorIconPaletteRed',
+			},
+			neutral: {
+				value: '#376080',
+				name: 'ColorIconPaletteNeutral',
+			},
+			teal: {
+				value: '#1f9b98',
+				name: 'ColorIconPaletteTeal',
+			},
+			purple: {
+				value: '#6d59dc',
+				name: 'ColorIconPalettePurple',
+			},
+			yellow: {
+				value: '#fbc02c',
+				name: 'ColorIconPaletteYellow',
+			},
+		},
 	},
 	status: {
 		success: {
@@ -642,10 +842,10 @@ export const color = {
 
 export const typography = {
 	weight: {
-		value: 400,
+		value: 500,
 		name: 'TypographyWeight',
 		strong: {
-			value: 500,
+			value: 600,
 			name: 'TypographyWeightStrong',
 		},
 	},
@@ -691,7 +891,7 @@ export const typography = {
 			name: 'TypographyOverlineFontWeight',
 		},
 		lineHeight: {
-			value: '1.179rem',
+			value: '1rem',
 			name: 'TypographyOverlineLineHeight',
 		},
 		textCase: {
@@ -699,7 +899,7 @@ export const typography = {
 			name: 'TypographyOverlineTextCase',
 		},
 		shorthand: {
-			value: '600 0.786rem/1.179rem "Source Sans Pro",Helvetica,sans-serif',
+			value: '600 0.786rem/1rem "Source Sans Pro",Helvetica,sans-serif',
 			name: 'TypographyOverlineShorthand',
 		},
 	},
@@ -1001,6 +1201,30 @@ export const typography = {
 			},
 		},
 	},
+	components: {
+		badge: {
+			fontSize: {
+				value: '0.714rem',
+				name: 'TypographyComponentsBadgeFontSize',
+			},
+			fontWeight: {
+				value: 600,
+				name: 'TypographyComponentsBadgeFontWeight',
+			},
+			lineHeight: {
+				value: '0.857rem',
+				name: 'TypographyComponentsBadgeLineHeight',
+			},
+			textCase: {
+				value: 'uppercase',
+				name: 'TypographyComponentsBadgeTextCase',
+			},
+			shorthand: {
+				value: '600 0.714rem/0.857rem "Source Sans Pro",Helvetica,sans-serif',
+				name: 'TypographyComponentsBadgeShorthand',
+			},
+		},
+	},
 };
 
 export default {