@digdir/designsystemet 1.13.2 → 1.14.0

package/dist/src/colors/colorMetadata.js

@@ -1,265 +1,259 @@
-// src/colors/colorMetadata.ts
 import * as R from "ramda";
-var baseColors = {
-  info: "#0A71C0",
-  success: "#068718",
-  warning: "#EA9B1B",
-  danger: "#C01B1B"
+//#region src/colors/colorMetadata.ts
+const baseColors = {
+	info: "#0A71C0",
+	success: "#068718",
+	warning: "#EA9B1B",
+	danger: "#C01B1B"
 };
-var dsLinkColor = "#663299";
-var colorMetadata = {
-  "background-default": {
-    number: 1,
-    name: "background-default",
-    group: "background",
-    displayName: "Background Default",
-    description: {
-      long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
-      short: "Standard bakgrunnsfarge."
-    },
-    luminance: {
-      light: 1,
-      dark: 9e-3,
-      contrast: 1e-3
-    }
-  },
-  "background-tinted": {
-    number: 2,
-    name: "background-tinted",
-    group: "background",
-    displayName: "Background Tinted",
-    description: {
-      long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
-      short: "Bakgrunn med et hint av farge i seg."
-    },
-    luminance: {
-      light: 0.9,
-      dark: 0.014,
-      contrast: 65e-4
-    }
-  },
-  "surface-default": {
-    number: 3,
-    name: "surface-default",
-    group: "surface",
-    displayName: "Surface Default",
-    description: {
-      long: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
-      short: "Standardfarge for overflater / komponenter."
-    },
-    luminance: {
-      light: 1,
-      dark: 0.021,
-      contrast: 0.015
-    }
-  },
-  "surface-tinted": {
-    number: 4,
-    name: "surface-tinted",
-    group: "surface",
-    displayName: "Surface Tinted",
-    description: {
-      long: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
-      short: "Overflater / komponenter med et hint av farge i seg."
-    },
-    luminance: {
-      light: 0.81,
-      dark: 0.027,
-      contrast: 0.015
-    }
-  },
-  "surface-hover": {
-    number: 5,
-    name: "surface-hover",
-    group: "surface",
-    displayName: "Surface Hover",
-    description: {
-      long: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
-      short: "Hover-farge til overflater / komponenter."
-    },
-    luminance: {
-      light: 0.7,
-      dark: 0.036,
-      contrast: 0.028
-    }
-  },
-  "surface-active": {
-    number: 6,
-    name: "surface-active",
-    group: "surface",
-    displayName: "Surface Active",
-    description: {
-      long: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
-      short: "Active-farge til overflater / komponenter."
-    },
-    luminance: {
-      light: 0.59,
-      dark: 0.056,
-      contrast: 0.045
-    }
-  },
-  "border-subtle": {
-    number: 7,
-    name: "border-subtle",
-    group: "border",
-    displayName: "Border Subtle",
-    description: {
-      long: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
-      short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
-    },
-    luminance: {
-      light: 0.5,
-      dark: 0.08,
-      contrast: 0.26
-    }
-  },
-  "border-default": {
-    number: 8,
-    name: "border-default",
-    group: "border",
-    displayName: "Border Default",
-    description: {
-      long: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
-      short: "Standard border-farge til skjemakomponenter og meningsb\xE6rende elementer."
-    },
-    luminance: {
-      light: 0.19,
-      dark: 0.22,
-      contrast: 0.4
-    }
-  },
-  "border-strong": {
-    number: 9,
-    name: "border-strong",
-    group: "border",
-    displayName: "Border Strong",
-    description: {
-      long: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
-      short: "Border-farge med h\xF8y kontrast for ekstra synlighet."
-    },
-    luminance: {
-      light: 0.11,
-      dark: 0.39,
-      contrast: 0.6
-    }
-  },
-  "text-subtle": {
-    number: 10,
-    name: "text-subtle",
-    group: "text",
-    displayName: "Text Subtle",
-    description: {
-      long: "Text Subtle er den lyseste tekstfargen og brukes p\xE5 tekst som skal v\xE6re litt mindre synlig eller for \xE5 skape variasjon i typografien.",
-      short: "Tekst- og ikonfarge med lavere kontrast."
-    },
-    luminance: {
-      light: 0.11,
-      dark: 0.39,
-      contrast: 0.57
-    }
-  },
-  "text-default": {
-    number: 11,
-    name: "text-default",
-    group: "text",
-    displayName: "Text Default",
-    description: {
-      long: "Text Default er den m\xF8rkeste tekstfargen og brukes p\xE5 tekst som skal v\xE6re mest synlig. Denne fargen b\xF8r brukes p\xE5 mesteparten av teksten p\xE5 en side.",
-      short: "Tekst- og ikonfarge med h\xF8y kontrast og god synlighet."
-    },
-    luminance: {
-      light: 0.0245,
-      dark: 0.84,
-      contrast: 0.86
-    }
-  },
-  "base-default": {
-    number: 12,
-    name: "base-default",
-    group: "base",
-    displayName: "Base Default",
-    description: {
-      long: "Base Default fargen f\xE5r den samme hex koden som fargen som er valgt i verkt\xF8yet. Brukes ofte som farge p\xE5 viktige elementer og p\xE5 flater som skal fange brukerens oppmerksomhet.",
-      short: "Standardfarge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-hover": {
-    number: 13,
-    name: "base-hover",
-    group: "base",
-    displayName: "Base Hover",
-    description: {
-      long: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
-      short: "Hover-farge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-active": {
-    number: 14,
-    name: "base-active",
-    group: "base",
-    displayName: "Base Active",
-    description: {
-      long: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
-      short: "Active-farge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-contrast-subtle": {
-    number: 15,
-    name: "base-contrast-subtle",
-    group: "base",
-    displayName: "Contrast Subtle",
-    description: {
-      long: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
-      short: "Farge med god kontrast mot Base-default."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-contrast-default": {
-    number: 16,
-    name: "base-contrast-default",
-    group: "base",
-    displayName: "Contrast Default",
-    description: {
-      long: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
-      short: "Farge med god kontrast mot Base-default og Base-hover."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  }
+const dsLinkColor = "#663299";
+const colorMetadata = {
+	"background-default": {
+		number: 1,
+		name: "background-default",
+		group: "background",
+		displayName: "Background Default",
+		description: {
+			long: "Background Default er den mest nøytrale bakgrunnsfargen.",
+			short: "Standard bakgrunnsfarge."
+		},
+		luminance: {
+			light: 1,
+			dark: .009,
+			contrast: .001
+		}
+	},
+	"background-tinted": {
+		number: 2,
+		name: "background-tinted",
+		group: "background",
+		displayName: "Background Tinted",
+		description: {
+			long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
+			short: "Bakgrunn med et hint av farge i seg."
+		},
+		luminance: {
+			light: .9,
+			dark: .014,
+			contrast: .0065
+		}
+	},
+	"surface-default": {
+		number: 3,
+		name: "surface-default",
+		group: "surface",
+		displayName: "Surface Default",
+		description: {
+			long: "Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Dette er den mest nøytrale surface fargen.",
+			short: "Standardfarge for overflater / komponenter."
+		},
+		luminance: {
+			light: 1,
+			dark: .021,
+			contrast: .015
+		}
+	},
+	"surface-tinted": {
+		number: 4,
+		name: "surface-tinted",
+		group: "surface",
+		displayName: "Surface Tinted",
+		description: {
+			long: "Surface Tinted brukes på flater som ligger oppå bakgrunnsfargene. Denne har et hint av farge i seg.",
+			short: "Overflater / komponenter med et hint av farge i seg."
+		},
+		luminance: {
+			light: .81,
+			dark: .027,
+			contrast: .015
+		}
+	},
+	"surface-hover": {
+		number: 5,
+		name: "surface-hover",
+		group: "surface",
+		displayName: "Surface Hover",
+		description: {
+			long: "Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.",
+			short: "Hover-farge til overflater / komponenter."
+		},
+		luminance: {
+			light: .7,
+			dark: .036,
+			contrast: .028
+		}
+	},
+	"surface-active": {
+		number: 6,
+		name: "surface-active",
+		group: "surface",
+		displayName: "Surface Active",
+		description: {
+			long: "Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.",
+			short: "Active-farge til overflater / komponenter."
+		},
+		luminance: {
+			light: .59,
+			dark: .056,
+			contrast: .045
+		}
+	},
+	"border-subtle": {
+		number: 7,
+		name: "border-subtle",
+		group: "border",
+		displayName: "Border Subtle",
+		description: {
+			long: "Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.",
+			short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
+		},
+		luminance: {
+			light: .5,
+			dark: .08,
+			contrast: .26
+		}
+	},
+	"border-default": {
+		number: 8,
+		name: "border-default",
+		group: "border",
+		displayName: "Border Default",
+		description: {
+			long: "Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.",
+			short: "Standard border-farge til skjemakomponenter og meningsbærende elementer."
+		},
+		luminance: {
+			light: .19,
+			dark: .22,
+			contrast: .4
+		}
+	},
+	"border-strong": {
+		number: 9,
+		name: "border-strong",
+		group: "border",
+		displayName: "Border Strong",
+		description: {
+			long: "Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.",
+			short: "Border-farge med høy kontrast for ekstra synlighet."
+		},
+		luminance: {
+			light: .11,
+			dark: .39,
+			contrast: .6
+		}
+	},
+	"text-subtle": {
+		number: 10,
+		name: "text-subtle",
+		group: "text",
+		displayName: "Text Subtle",
+		description: {
+			long: "Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.",
+			short: "Tekst- og ikonfarge med lavere kontrast."
+		},
+		luminance: {
+			light: .11,
+			dark: .39,
+			contrast: .57
+		}
+	},
+	"text-default": {
+		number: 11,
+		name: "text-default",
+		group: "text",
+		displayName: "Text Default",
+		description: {
+			long: "Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.",
+			short: "Tekst- og ikonfarge med høy kontrast og god synlighet."
+		},
+		luminance: {
+			light: .0245,
+			dark: .84,
+			contrast: .86
+		}
+	},
+	"base-default": {
+		number: 12,
+		name: "base-default",
+		group: "base",
+		displayName: "Base Default",
+		description: {
+			long: "Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.",
+			short: "Standardfarge for solide bakgrunner."
+		},
+		luminance: {
+			light: 1,
+			dark: 1,
+			contrast: 1
+		}
+	},
+	"base-hover": {
+		number: 13,
+		name: "base-hover",
+		group: "base",
+		displayName: "Base Hover",
+		description: {
+			long: "Base Hover brukes som hover farge på elementer som bruker Base Default fargen.",
+			short: "Hover-farge for solide bakgrunner."
+		},
+		luminance: {
+			light: 1,
+			dark: 1,
+			contrast: 1
+		}
+	},
+	"base-active": {
+		number: 14,
+		name: "base-active",
+		group: "base",
+		displayName: "Base Active",
+		description: {
+			long: "Base Active brukes som active farge på elementer som bruker Base Default fargen.",
+			short: "Active-farge for solide bakgrunner."
+		},
+		luminance: {
+			light: 1,
+			dark: 1,
+			contrast: 1
+		}
+	},
+	"base-contrast-subtle": {
+		number: 15,
+		name: "base-contrast-subtle",
+		group: "base",
+		displayName: "Contrast Subtle",
+		description: {
+			long: "Contrast Subtle brukes som en viktig meningsbærende farge oppå Base Default fargen.",
+			short: "Farge med god kontrast mot Base-default."
+		},
+		luminance: {
+			light: 1,
+			dark: 1,
+			contrast: 1
+		}
+	},
+	"base-contrast-default": {
+		number: 16,
+		name: "base-contrast-default",
+		group: "base",
+		displayName: "Contrast Default",
+		description: {
+			long: "Contrast Default brukes som en viktig meningsbærende farge oppå alle Base fargane.",
+			short: "Farge med god kontrast mot Base-default og Base-hover."
+		},
+		luminance: {
+			light: 1,
+			dark: 1,
+			contrast: 1
+		}
+	}
 };
-var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
-var getColorMetadataByNumber = (number) => {
-  return colorMetadataByNumber[number];
-};
-var colorNames = Object.keys(colorMetadata);
-var baseColorNames = Object.keys(baseColors);
-export {
-  baseColorNames,
-  baseColors,
-  colorMetadata,
-  colorNames,
-  dsLinkColor,
-  getColorMetadataByNumber
+const colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+const getColorMetadataByNumber = (number) => {
+	return colorMetadataByNumber[number];
 };
+const colorNames = Object.keys(colorMetadata);
+const baseColorNames = Object.keys(baseColors);
+//#endregion
+export { baseColorNames, baseColors, colorMetadata, colorNames, dsLinkColor, getColorMetadataByNumber };