@gov-design-system-ce/components 4.1.0-rc1 → 4.1.1

package/dist/collection/data/color-definitions.js

@@ -1,307 +1,494 @@
 export const primaryColors = [
 	{
-		name: "Primary 100",
+		name: "--color-primary-50",
 		description: null,
-
-		hex: "#ecf7ff",
-		tokens: ["var(--gov-color-primary-100)", ".gov-color--primary-100"],
+		hex: "#f3f7fc",
+		tokens: ["var(--gov-color-primary-50)"],
 	},
 	{
-		name: "Primary 200",
+		name: "--color-primary-100",
 		description: null,
-
-		hex: "#d9efff",
-		tokens: ["var(--gov-color-primary-200)", ".gov-color--primary-200"],
+		hex: "#e5eef9",
+		tokens: ["var(--gov-color-primary-100)"],
 	},
 	{
-		name: "Primary 300",
+		name: "--color-primary-200",
 		description: null,
-
-		hex: "#b5d9f3",
-		tokens: ["var(--gov-color-primary-300)", ".gov-color--primary-300"],
+		hex: "#c5dbf2",
+		tokens: ["var(--gov-color-primary-200)"],
 	},
 	{
-		name: "Primary 400",
+		name: "--color-primary-300",
 		description: null,
-
-		hex: "#66a1d8",
-		tokens: ["var(--gov-color-primary-400)", ".gov-color--primary-400"],
+		hex: "#93bde6",
+		tokens: ["var(--gov-color-primary-300)"],
 	},
 	{
-		name: "Primary 500",
+		name: "--color-primary-400",
 		description: null,
-
-		hex: "#3077b7",
-		tokens: ["var(--gov-color-primary-500)", ".gov-color--primary"],
+		hex: "#599bd7",
+		tokens: ["var(--gov-color-primary-400)"],
 	},
 	{
-		name: "Primary 600",
+		name: "--color-primary-500",
+		description: null,
+		hex: "#337fc4",
+		tokens: ["var(--gov-color-primary-500)"],
+	},
+	{
+		name: "--color-primary-600",
 		description: null,
-
 		hex: "#2362a2",
-		tokens: ["var(--gov-color-primary-600)", ".gov-color--primary-600"],
+		tokens: ["var(--gov-color-primary-600)"],
 	},
 	{
-		name: "Primary 700",
+		name: "--color-primary-700",
 		description: null,
-
-		hex: "#254e80",
-		tokens: ["var(--gov-color-primary-700)", ".gov-color--primary-700"],
+		hex: "#1e5086",
+		tokens: ["var(--gov-color-primary-700)"],
 	},
 	{
-		name: "Primary 800",
+		name: "--color-primary-800",
 		description: null,
-
-		hex: "#15355e",
-		tokens: ["var(--gov-color-primary-800)", ".gov-color--primary-800"],
+		hex: "#1d456f",
+		tokens: ["var(--gov-color-primary-800)"],
 	},
 	{
-		name: "Primary 900",
+		name: "--color-primary-900",
 		description: null,
-
-		hex: "#0d213a",
-		tokens: ["var(--gov-color-primary-900)", ".gov-color--primary-900"],
+		hex: "#1d3c5d",
+		tokens: ["var(--gov-color-primary-900)"],
+	},
+	{
+		name: "--color-primary-950",
+		description: null,
+		hex: "#13263e",
+		tokens: ["var(--gov-color-primary-950)"],
+	},
+	{
+		name: "--color-primary-1000",
+		description: null,
+		hex: "#0f1f33",
+		tokens: ["var(--gov-color-primary-1000)"],
+	},
+	{
+		name: "--color-primary-1050",
+		description: null,
+		hex: "#070f20",
+		tokens: ["var(--gov-color-primary-1050)"],
 	},
-]
+	{
+		name: "--color-primary-1100",
+		description: null,
+		hex: "#010409",
+		tokens: ["var(--gov-color-primary-1100)"],
+	},
+];
 
 export const secondaryColors = [
 	{
-		name: "Secondary 100",
+		name: "--color-secondary-50",
 		description: null,
-
-		hex: "#FCFCFC",
-		tokens: ["var(--gov-color-secondary-100)", ".gov-color--secondary-100"],
+		hex: "#fff9e9",
+		tokens: ["var(--gov-color-secondary-50)"],
 	},
 	{
-		name: "Secondary 200",
+		name: "--color-secondary-100",
 		description: null,
-
-		hex: "#fafafa",
-		tokens: ["var(--gov-color-secondary-200)", ".gov-color--secondary-200"],
+		hex: "#fff6e1",
+		tokens: ["var(--gov-color-secondary-100)"],
 	},
 	{
-		name: "Secondary 300",
+		name: "--color-secondary-200",
 		description: null,
-
-		hex: "#f5f5f5",
-		tokens: ["var(--gov-color-secondary-300)", ".gov-color--secondary-300"],
+		hex: "#fef0d0",
+		tokens: ["var(--gov-color-secondary-200)"],
 	},
 	{
-		name: "Secondary 400",
+		name: "--color-secondary-300",
 		description: null,
-
-		hex: "#eaeaea",
-		tokens: ["var(--gov-color-secondary-400)", ".gov-color--secondary-400"],
+		hex: "#fde1a1",
+		tokens: ["var(--gov-color-secondary-300)"],
 	},
 	{
-		name: "Secondary 500",
+		name: "--color-secondary-400",
 		description: null,
-
-		hex: "#ddd",
-		tokens: ["var(--gov-color-secondary-500)", ".gov-color--secondary"],
+		hex: "#ffcf74",
+		tokens: ["var(--gov-color-secondary-400)"],
 	},
 	{
-		name: "Secondary 600",
+		name: "--color-secondary-500",
 		description: null,
-
-		hex: "#a8a8a8",
-		tokens: ["var(--gov-color-secondary-600)", ".gov-color--secondary-600"],
+		hex: "#fbc342",
+		tokens: ["var(--gov-color-secondary-500)"],
 	},
 	{
-		name: "Secondary 700",
+		name: "--color-secondary-600",
 		description: null,
-
-		hex: "#686868",
-		tokens: ["var(--gov-color-secondary-700)", ".gov-color--secondary-700"],
+		hex: "#fab413",
+		tokens: ["var(--gov-color-secondary-600)"],
 	},
 	{
-		name: "Secondary 800",
+		name: "--color-secondary-700",
 		description: null,
+		hex: "#c8900f",
+		tokens: ["var(--gov-color-secondary-700)"],
+	},
+	{
+		name: "--color-secondary-800",
+		description: null,
+		hex: "#af7a00",
+		tokens: ["var(--gov-color-secondary-800)"],
+	},
+	{
+		name: "--color-secondary-900",
+		description: null,
+		hex: "#4a3403",
+		tokens: ["var(--gov-color-secondary-900)"],
+	},
+	{
+		name: "--color-secondary-950",
+		description: null,
+		hex: "#3d2b00",
+		tokens: ["var(--gov-color-secondary-950)"],
+	},
+	{
+		name: "--color-secondary-1000",
+		description: null,
+		hex: "#150f00",
+		tokens: ["var(--gov-color-secondary-1000)"],
+	},
+];
 
+export const neutralColors = [
+	{
+		name: "--color-neutral-0",
+		description: null,
+		hex: "#ffffff",
+		tokens: ["var(--gov-color-neutral-0)"],
+	},
+	{
+		name: "--color-neutral-50",
+		description: null,
+		hex: "#f6f6f6",
+		tokens: ["var(--gov-color-neutral-50)"],
+	},
+	{
+		name: "--color-neutral-100",
+		description: null,
+		hex: "#e7e7e7",
+		tokens: ["var(--gov-color-neutral-100)"],
+	},
+	{
+		name: "--color-neutral-200",
+		description: null,
+		hex: "#d1d1d1",
+		tokens: ["var(--gov-color-neutral-200)"],
+	},
+	{
+		name: "--color-neutral-300",
+		description: null,
+		hex: "#b0b0b0",
+		tokens: ["var(--gov-color-neutral-300)"],
+	},
+	{
+		name: "--color-neutral-400",
+		description: null,
+		hex: "#888888",
+		tokens: ["var(--gov-color-neutral-400)"],
+	},
+	{
+		name: "--color-neutral-500",
+		description: null,
+		hex: "#6d6d6d",
+		tokens: ["var(--gov-color-neutral-500)"],
+	},
+	{
+		name: "--color-neutral-600",
+		description: null,
+		hex: "#5d5d5d",
+		tokens: ["var(--gov-color-neutral-600)"],
+	},
+	{
+		name: "--color-neutral-700",
+		description: null,
+		hex: "#4f4f4f",
+		tokens: ["var(--gov-color-neutral-700)"],
+	},
+	{
+		name: "--color-neutral-800",
+		description: null,
+		hex: "#454545",
+		tokens: ["var(--gov-color-neutral-800)"],
+	},
+	{
+		name: "--color-neutral-900",
+		description: null,
 		hex: "#3b3b3b",
-		tokens: ["var(--gov-color-secondary-800)", ".gov-color--secondary-800"],
+		tokens: ["var(--gov-color-neutral-900)"],
 	},
 	{
-		name: "Secondary 900",
+		name: "--color-neutral-950",
 		description: null,
-
-		hex: "#232323",
-		tokens: ["var(--gov-color-secondary-900)", ".gov-color--secondary-900"],
+		hex: "#262626",
+		tokens: ["var(--gov-color-neutral-950)"],
 	},
-]
-
-export const successColors = [
 	{
-		name: "Success 100",
+		name: "--color-neutral-1000",
 		description: null,
-
-		hex: "#f5faf0",
-		tokens: ["var(--gov-color-success-100)", ".gov-color--success-100"],
+		hex: "#000000",
+		tokens: ["var(--gov-color-neutral-1000)"],
 	},
 	{
-		name: "Success 200",
+		name: "--color-neutral-transparent",
 		description: null,
+		hex: "rgba(255, 255, 255, 0)",
+		tokens: ["var(--gov-color-neutral-transparent)"],
+	},
+];
 
-		hex: "#dcefcc",
-		tokens: ["var(--gov-color-success-200)", ".gov-color--success-200"],
+export const errorColors = [
+	{
+		name: "--color-error-50",
+		description: null,
+		hex: "#fef2f2",
+		tokens: ["var(--gov-color-error-50)"],
 	},
 	{
-		name: "Success 300",
+		name: "--color-error-100",
 		description: null,
-
-		hex: "#a3d578",
-		tokens: ["var(--gov-color-success-300)", ".gov-color--success-300"],
+		hex: "#fde3e3",
+		tokens: ["var(--gov-color-error-100)"],
 	},
 	{
-		name: "Success 400",
+		name: "--color-error-200",
 		description: null,
-
-		hex: "#6fbd2c",
-		tokens: ["var(--gov-color-success-400)", ".gov-color--success-400"],
+		hex: "#fccccc",
+		tokens: ["var(--gov-color-error-200)"],
 	},
 	{
-		name: "Success 500",
+		name: "--color-error-300",
 		description: null,
-
-		hex: "#488515",
-		tokens: ["var(--gov-color-success-500)", ".gov-color--success"],
+		hex: "#f8a9a9",
+		tokens: ["var(--gov-color-error-300)"],
 	},
 	{
-		name: "Success 600",
+		name: "--color-error-400",
 		description: null,
-
-		hex: "#3a6217",
-		tokens: ["var(--gov-color-success-600)", ".gov-color--success-600"],
+		hex: "#f37676",
+		tokens: ["var(--gov-color-error-400)"],
 	},
 	{
-		name: "Success 700",
+		name: "--color-error-500",
 		description: null,
-
-		hex: "#2c4f0d",
-		tokens: ["var(--gov-color-success-700)", ".gov-color--success-700"],
+		hex: "#e84b4b",
+		tokens: ["var(--gov-color-error-500)"],
+	},
+	{
+		name: "--color-error-600",
+		description: null,
+		hex: "#c62828",
+		tokens: ["var(--gov-color-error-600)"],
+	},
+	{
+		name: "--color-error-700",
+		description: null,
+		hex: "#b32222",
+		tokens: ["var(--gov-color-error-700)"],
+	},
+	{
+		name: "--color-error-800",
+		description: null,
+		hex: "#942020",
+		tokens: ["var(--gov-color-error-800)"],
+	},
+	{
+		name: "--color-error-900",
+		description: null,
+		hex: "#7b2121",
+		tokens: ["var(--gov-color-error-900)"],
 	},
-]
+	{
+		name: "--color-error-950",
+		description: null,
+		hex: "#430c0c",
+		tokens: ["var(--gov-color-error-950)"],
+	},
+];
 
 export const warningColors = [
 	{
-		name: "Warning 100",
+		name: "--color-warning-50",
 		description: null,
-
-		hex: "#fef9ef",
-		tokens: ["var(--gov-color-warning-100)", ".gov-color--warning-100"],
+		hex: "#fefbe8",
+		tokens: ["var(--gov-color-warning-50)"],
 	},
 	{
-		name: "Warning 200",
+		name: "--color-warning-100",
 		description: null,
-
-		hex: "#faecc8",
-		tokens: ["var(--gov-color-warning-200)", ".gov-color--warning-200"],
+		hex: "#fef7c3",
+		tokens: ["var(--gov-color-warning-100)"],
 	},
 	{
-		name: "Warning 300",
+		name: "--color-warning-200",
 		description: null,
-
-		hex: "#fad47b",
-		tokens: ["var(--gov-color-warning-300)", ".gov-color--warning-300"],
+		hex: "#feed8a",
+		tokens: ["var(--gov-color-warning-200)"],
 	},
 	{
-		name: "Warning 400",
+		name: "--color-warning-300",
 		description: null,
-
-		hex: "#f9c13c",
-		tokens: ["var(--gov-color-warning-400)", ".gov-color--warning-400"],
+		hex: "#fdd835",
+		tokens: ["var(--gov-color-warning-300)"],
 	},
 	{
-		name: "Warning 500",
+		name: "--color-warning-400",
 		description: null,
-
-		hex: "#c78300",
-		tokens: ["var(--gov-color-warning-500)", ".gov-color--warning"],
+		hex: "#fac615",
+		tokens: ["var(--gov-color-warning-400)"],
 	},
 	{
-		name: "Warning 600",
+		name: "--color-warning-500",
 		description: null,
-
-		hex: "#99620f",
-		tokens: ["var(--gov-color-warning-600)", ".gov-color--warning-600"],
+		hex: "#eaad0b",
+		tokens: ["var(--gov-color-warning-500)"],
 	},
 	{
-		name: "Warning 700",
+		name: "--color-warning-600",
 		description: null,
-
-		hex: "#865102",
-		tokens: ["var(--gov-color-warning-700)", ".gov-color--warning-700"],
+		hex: "#ca8504",
+		tokens: ["var(--gov-color-warning-600)"],
 	},
-]
-
-export const errorColors = [
 	{
-		name: "Error 100",
+		name: "--color-warning-700",
 		description: null,
-
-		hex: "#ffe8ea",
-		tokens: ["var(--gov-color-error-100)", ".gov-color--error-100"],
+		hex: "#e49400",
+		tokens: ["var(--gov-color-warning-700)"],
 	},
 	{
-		name: "Error 200",
+		name: "--color-warning-800",
 		description: null,
-
-		hex: "#f7cdd2",
-		tokens: ["var(--gov-color-error-200)", ".gov-color--error-200"],
+		hex: "#be7d02",
+		tokens: ["var(--gov-color-warning-800)"],
 	},
 	{
-		name: "Error 300",
+		name: "--color-warning-900",
 		description: null,
-
-		hex: "#d96671",
-		tokens: ["var(--gov-color-error-300)", ".gov-color--error-300"],
+		hex: "#6b4a0d",
+		tokens: ["var(--gov-color-warning-900)"],
 	},
 	{
-		name: "Error 400",
+		name: "--color-warning-950",
 		description: null,
-
-		hex: "#c52a3a",
-		tokens: ["var(--gov-color-error-400)", ".gov-color--error-400"],
+		hex: "#432e06",
+		tokens: ["var(--gov-color-warning-950)"],
 	},
 	{
-		name: "Error 500",
+		name: "--color-warning-1000",
 		description: null,
+		hex: "#2a1b00",
+		tokens: ["var(--gov-color-warning-1000)"],
+	},
+];
 
-		hex: "#9e0615",
-		tokens: ["var(--gov-color-error-500)", ".gov-color--error"],
+export const successColors = [
+	{
+		name: "--color-success-50",
+		description: null,
+		hex: "#f3faf3",
+		tokens: ["var(--gov-color-success-50)"],
 	},
 	{
-		name: "Error 600",
+		name: "--color-success-100",
 		description: null,
-
-		hex: "#830713",
-		tokens: ["var(--gov-color-error-600)", ".gov-color--error-600"],
+		hex: "#e2f6e3",
+		tokens: ["var(--gov-color-success-100)"],
+	},
+	{
+		name: "--color-success-200",
+		description: null,
+		hex: "#c7ebc9",
+		tokens: ["var(--gov-color-success-200)"],
+	},
+	{
+		name: "--color-success-300",
+		description: null,
+		hex: "#9bda9e",
+		tokens: ["var(--gov-color-success-300)"],
+	},
+	{
+		name: "--color-success-400",
+		description: null,
+		hex: "#67c16b",
+		tokens: ["var(--gov-color-success-400)"],
+	},
+	{
+		name: "--color-success-500",
+		description: null,
+		hex: "#42a547",
+		tokens: ["var(--gov-color-success-500)"],
+	},
+	{
+		name: "--color-success-600",
+		description: null,
+		hex: "#2e7d32",
+		tokens: ["var(--gov-color-success-600)"],
+	},
+	{
+		name: "--color-success-700",
+		description: null,
+		hex: "#2a6b2d",
+		tokens: ["var(--gov-color-success-700)"],
+	},
+	{
+		name: "--color-success-800",
+		description: null,
+		hex: "#265529",
+		tokens: ["var(--gov-color-success-800)"],
+	},
+	{
+		name: "--color-success-900",
+		description: null,
+		hex: "#204724",
+		tokens: ["var(--gov-color-success-900)"],
 	},
-]
-
-export const focusColors = [
 	{
-		name: "Focus Base",
+		name: "--color-success-950",
 		description: null,
+		hex: "#0d260f",
+		tokens: ["var(--gov-color-success-950)"],
+	},
+];
 
+export const otherColors = [
+	{
+		name: "--color-focus-300",
+		description: null,
+		hex: "#6caef4",
+		tokens: ["var(--gov-color-focus-300)"],
+	},
+	{
+		name: "--color-focus-600",
+		description: null,
 		hex: "#007bff",
-		tokens: ["var(--gov-color-focus-base)", ".gov-color--focus-base"],
+		tokens: ["var(--gov-color-focus-600)"],
 	},
-]
-
-export const neutralColors = [
 	{
-		name: "Neutral Black",
+		name: "--color-visited-300",
 		description: null,
-
-		hex: "#000",
-		tokens: ["var(--gov-color-neutral-black)", ".gov-color--neutral-black"],
+		hex: "#9a5ed9",
+		tokens: ["var(--gov-color-visited-300)"],
 	},
 	{
-		name: "Neutral White",
+		name: "--color-visited-600",
 		description: null,
-
-		hex: "#FFF",
-		tokens: ["var(--gov-color-neutral-white)", ".gov-color--neutral-white"],
+		hex: "#67329e",
+		tokens: ["var(--gov-color-visited-600)"],
+	},
+	{
+		name: "--color-visited-700",
+		description: null,
+		hex: "#60306b",
+		tokens: ["var(--gov-color-visited-700)"],
 	},
-]
+];