@limetech/lime-elements 34.1.0-next.6 → 34.1.0

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -0,0 +1,1239 @@
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+.color-palette {
+  display: grid;
+  gap: 0.25rem;
+  grid-auto-flow: column;
+  margin: 0.75rem auto 1.25rem auto;
+  padding: 1.25rem 0.75rem;
+  background-color: rgb(var(--kompendium-contrast-300));
+  border-radius: 0.1875rem;
+}
+
+.brightness-label,
+.swatch {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.swatch {
+  transition: border-radius 0.2s ease;
+  border-radius: 3px;
+  justify-content: center;
+  color: rgba(var(--kompendium-color-white), 0.4);
+  font-size: 1.25rem;
+  line-height: 99%;
+}
+.swatch:after {
+  content: "";
+  display: block;
+  padding-top: 100%;
+}
+.swatch.hue {
+  font-family: "Source Code Pro", monospace;
+  font-size: 0.75rem;
+  position: relative;
+  color: rgb(var(--kompendium-contrast-900));
+  padding-top: 0.5rem;
+  writing-mode: vertical-lr;
+  justify-content: left;
+}
+
+.brightness-label {
+  font-family: "Source Code Pro", monospace;
+  font-size: 0.75rem;
+  color: rgb(var(--kompendium-contrast-900));
+  justify-content: start;
+}
+
+.brand-colors-tips {
+  transition: opacity 0.2s ease 0.4s;
+  opacity: 0;
+  font-size: 0.875rem;
+  padding-left: 2.75rem;
+  margin-bottom: 2.5rem;
+}
+
+.brand-colors .brand-colors-tips {
+  opacity: 1;
+}
+
+@media (prefers-color-scheme: light) {
+  .brand-colors .--color-glaucous-default,
+.brand-colors .--color-gray-dark {
+    border-radius: 50%;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .brand-colors .--color-red-light,
+.brand-colors .--color-magenta-default,
+.brand-colors .--color-sky-light,
+.brand-colors .--color-teal-light,
+.brand-colors .--color-green-light,
+.brand-colors .--color-amber-light,
+.brand-colors .--color-amber-default,
+.brand-colors .--color-coral-light,
+.brand-colors .--color-gray-light {
+    border-radius: 50%;
+  }
+}
+.--color-red-lighter {
+  background-color: rgb(var(--color-red-lighter));
+}
+
+.--color-red-light {
+  background-color: rgb(var(--color-red-light));
+}
+
+.--color-red-default {
+  background-color: rgb(var(--color-red-default));
+}
+
+.--color-red-dark {
+  background-color: rgb(var(--color-red-dark));
+}
+
+.--color-red-darker {
+  background-color: rgb(var(--color-red-darker));
+}
+
+.--color-pink-lighter {
+  background-color: rgb(var(--color-pink-lighter));
+}
+
+.--color-pink-light {
+  background-color: rgb(var(--color-pink-light));
+}
+
+.--color-pink-default {
+  background-color: rgb(var(--color-pink-default));
+}
+
+.--color-pink-dark {
+  background-color: rgb(var(--color-pink-dark));
+}
+
+.--color-pink-darker {
+  background-color: rgb(var(--color-pink-darker));
+}
+
+.--color-magenta-lighter {
+  background-color: rgb(var(--color-magenta-lighter));
+}
+
+.--color-magenta-light {
+  background-color: rgb(var(--color-magenta-light));
+}
+
+.--color-magenta-default {
+  background-color: rgb(var(--color-magenta-default));
+}
+
+.--color-magenta-dark {
+  background-color: rgb(var(--color-magenta-dark));
+}
+
+.--color-magenta-darker {
+  background-color: rgb(var(--color-magenta-darker));
+}
+
+.--color-purple-lighter {
+  background-color: rgb(var(--color-purple-lighter));
+}
+
+.--color-purple-light {
+  background-color: rgb(var(--color-purple-light));
+}
+
+.--color-purple-default {
+  background-color: rgb(var(--color-purple-default));
+}
+
+.--color-purple-dark {
+  background-color: rgb(var(--color-purple-dark));
+}
+
+.--color-purple-darker {
+  background-color: rgb(var(--color-purple-darker));
+}
+
+.--color-violet-lighter {
+  background-color: rgb(var(--color-violet-lighter));
+}
+
+.--color-violet-light {
+  background-color: rgb(var(--color-violet-light));
+}
+
+.--color-violet-default {
+  background-color: rgb(var(--color-violet-default));
+}
+
+.--color-violet-dark {
+  background-color: rgb(var(--color-violet-dark));
+}
+
+.--color-violet-darker {
+  background-color: rgb(var(--color-violet-darker));
+}
+
+.--color-indigo-lighter {
+  background-color: rgb(var(--color-indigo-lighter));
+}
+
+.--color-indigo-light {
+  background-color: rgb(var(--color-indigo-light));
+}
+
+.--color-indigo-default {
+  background-color: rgb(var(--color-indigo-default));
+}
+
+.--color-indigo-dark {
+  background-color: rgb(var(--color-indigo-dark));
+}
+
+.--color-indigo-darker {
+  background-color: rgb(var(--color-indigo-darker));
+}
+
+.--color-blue-lighter {
+  background-color: rgb(var(--color-blue-lighter));
+}
+
+.--color-blue-light {
+  background-color: rgb(var(--color-blue-light));
+}
+
+.--color-blue-default {
+  background-color: rgb(var(--color-blue-default));
+}
+
+.--color-blue-dark {
+  background-color: rgb(var(--color-blue-dark));
+}
+
+.--color-blue-darker {
+  background-color: rgb(var(--color-blue-darker));
+}
+
+.--color-sky-lighter {
+  background-color: rgb(var(--color-sky-lighter));
+}
+
+.--color-sky-light {
+  background-color: rgb(var(--color-sky-light));
+}
+
+.--color-sky-default {
+  background-color: rgb(var(--color-sky-default));
+}
+
+.--color-sky-dark {
+  background-color: rgb(var(--color-sky-dark));
+}
+
+.--color-sky-darker {
+  background-color: rgb(var(--color-sky-darker));
+}
+
+.--color-cyan-lighter {
+  background-color: rgb(var(--color-cyan-lighter));
+}
+
+.--color-cyan-light {
+  background-color: rgb(var(--color-cyan-light));
+}
+
+.--color-cyan-default {
+  background-color: rgb(var(--color-cyan-default));
+}
+
+.--color-cyan-dark {
+  background-color: rgb(var(--color-cyan-dark));
+}
+
+.--color-cyan-darker {
+  background-color: rgb(var(--color-cyan-darker));
+}
+
+.--color-teal-lighter {
+  background-color: rgb(var(--color-teal-lighter));
+}
+
+.--color-teal-light {
+  background-color: rgb(var(--color-teal-light));
+}
+
+.--color-teal-default {
+  background-color: rgb(var(--color-teal-default));
+}
+
+.--color-teal-dark {
+  background-color: rgb(var(--color-teal-dark));
+}
+
+.--color-teal-darker {
+  background-color: rgb(var(--color-teal-darker));
+}
+
+.--color-green-lighter {
+  background-color: rgb(var(--color-green-lighter));
+}
+
+.--color-green-light {
+  background-color: rgb(var(--color-green-light));
+}
+
+.--color-green-default {
+  background-color: rgb(var(--color-green-default));
+}
+
+.--color-green-dark {
+  background-color: rgb(var(--color-green-dark));
+}
+
+.--color-green-darker {
+  background-color: rgb(var(--color-green-darker));
+}
+
+.--color-lime-lighter {
+  background-color: rgb(var(--color-lime-lighter));
+}
+
+.--color-lime-light {
+  background-color: rgb(var(--color-lime-light));
+}
+
+.--color-lime-default {
+  background-color: rgb(var(--color-lime-default));
+}
+
+.--color-lime-dark {
+  background-color: rgb(var(--color-lime-dark));
+}
+
+.--color-lime-darker {
+  background-color: rgb(var(--color-lime-darker));
+}
+
+.--color-grass-lighter {
+  background-color: rgb(var(--color-grass-lighter));
+}
+
+.--color-grass-light {
+  background-color: rgb(var(--color-grass-light));
+}
+
+.--color-grass-default {
+  background-color: rgb(var(--color-grass-default));
+}
+
+.--color-grass-dark {
+  background-color: rgb(var(--color-grass-dark));
+}
+
+.--color-grass-darker {
+  background-color: rgb(var(--color-grass-darker));
+}
+
+.--color-yellow-lighter {
+  background-color: rgb(var(--color-yellow-lighter));
+}
+
+.--color-yellow-light {
+  background-color: rgb(var(--color-yellow-light));
+}
+
+.--color-yellow-default {
+  background-color: rgb(var(--color-yellow-default));
+}
+
+.--color-yellow-dark {
+  background-color: rgb(var(--color-yellow-dark));
+}
+
+.--color-yellow-darker {
+  background-color: rgb(var(--color-yellow-darker));
+}
+
+.--color-amber-lighter {
+  background-color: rgb(var(--color-amber-lighter));
+}
+
+.--color-amber-light {
+  background-color: rgb(var(--color-amber-light));
+}
+
+.--color-amber-default {
+  background-color: rgb(var(--color-amber-default));
+}
+
+.--color-amber-dark {
+  background-color: rgb(var(--color-amber-dark));
+}
+
+.--color-amber-darker {
+  background-color: rgb(var(--color-amber-darker));
+}
+
+.--color-orange-lighter {
+  background-color: rgb(var(--color-orange-lighter));
+}
+
+.--color-orange-light {
+  background-color: rgb(var(--color-orange-light));
+}
+
+.--color-orange-default {
+  background-color: rgb(var(--color-orange-default));
+}
+
+.--color-orange-dark {
+  background-color: rgb(var(--color-orange-dark));
+}
+
+.--color-orange-darker {
+  background-color: rgb(var(--color-orange-darker));
+}
+
+.--color-coral-lighter {
+  background-color: rgb(var(--color-coral-lighter));
+}
+
+.--color-coral-light {
+  background-color: rgb(var(--color-coral-light));
+}
+
+.--color-coral-default {
+  background-color: rgb(var(--color-coral-default));
+}
+
+.--color-coral-dark {
+  background-color: rgb(var(--color-coral-dark));
+}
+
+.--color-coral-darker {
+  background-color: rgb(var(--color-coral-darker));
+}
+
+.--color-brown-lighter {
+  background-color: rgb(var(--color-brown-lighter));
+}
+
+.--color-brown-light {
+  background-color: rgb(var(--color-brown-light));
+}
+
+.--color-brown-default {
+  background-color: rgb(var(--color-brown-default));
+}
+
+.--color-brown-dark {
+  background-color: rgb(var(--color-brown-dark));
+}
+
+.--color-brown-darker {
+  background-color: rgb(var(--color-brown-darker));
+}
+
+.--color-gray-lighter {
+  background-color: rgb(var(--color-gray-lighter));
+}
+
+.--color-gray-light {
+  background-color: rgb(var(--color-gray-light));
+}
+
+.--color-gray-default {
+  background-color: rgb(var(--color-gray-default));
+}
+
+.--color-gray-dark {
+  background-color: rgb(var(--color-gray-dark));
+}
+
+.--color-gray-darker {
+  background-color: rgb(var(--color-gray-darker));
+}
+
+.--color-glaucous-lighter {
+  background-color: rgb(var(--color-glaucous-lighter));
+}
+
+.--color-glaucous-light {
+  background-color: rgb(var(--color-glaucous-light));
+}
+
+.--color-glaucous-default {
+  background-color: rgb(var(--color-glaucous-default));
+}
+
+.--color-glaucous-dark {
+  background-color: rgb(var(--color-glaucous-dark));
+}
+
+.--color-glaucous-darker {
+  background-color: rgb(var(--color-glaucous-darker));
+}
+
+.--contrast-100 {
+  color: rgb(var(--contrast-900));
+  background-color: rgb(var(--contrast-100));
+}
+
+.--contrast-200 {
+  color: rgb(var(--contrast-1000));
+  background-color: rgb(var(--contrast-200));
+}
+
+.--contrast-300 {
+  color: rgb(var(--contrast-1100));
+  background-color: rgb(var(--contrast-300));
+}
+
+.--contrast-400 {
+  color: rgb(var(--contrast-1200));
+  background-color: rgb(var(--contrast-400));
+}
+
+.--contrast-500 {
+  color: rgb(var(--contrast-1300));
+  background-color: rgb(var(--contrast-500));
+}
+
+.--contrast-600 {
+  color: rgb(var(--contrast-1400));
+  background-color: rgb(var(--contrast-600));
+}
+
+.--contrast-700 {
+  color: rgb(var(--contrast-1500));
+  background-color: rgb(var(--contrast-700));
+}
+
+.--contrast-800 {
+  color: rgb(var(--contrast-1600));
+  background-color: rgb(var(--contrast-800));
+}
+
+.--contrast-900 {
+  color: rgb(var(--contrast-1700));
+  background-color: rgb(var(--contrast-900));
+}
+
+.--contrast-1000 {
+  color: rgb(var(--contrast-100));
+  background-color: rgb(var(--contrast-1000));
+}
+
+.--contrast-1100 {
+  color: rgb(var(--contrast-200));
+  background-color: rgb(var(--contrast-1100));
+}
+
+.--contrast-1200 {
+  color: rgb(var(--contrast-300));
+  background-color: rgb(var(--contrast-1200));
+}
+
+.--contrast-1300 {
+  color: rgb(var(--contrast-400));
+  background-color: rgb(var(--contrast-1300));
+}
+
+.--contrast-1400 {
+  color: rgb(var(--contrast-500));
+  background-color: rgb(var(--contrast-1400));
+}
+
+.--contrast-1500 {
+  color: rgb(var(--contrast-600));
+  background-color: rgb(var(--contrast-1500));
+}
+
+.--contrast-1600 {
+  color: rgb(var(--contrast-700));
+  background-color: rgb(var(--contrast-1600));
+}
+
+.--contrast-1700 {
+  color: rgb(var(--contrast-800));
+  background-color: rgb(var(--contrast-1700));
+}
+
+.--color-white {
+  color: rgb(var(--color-black));
+  background-color: rgb(var(--color-white));
+}
+
+.--color-black {
+  color: rgb(var(--color-white));
+  background-color: rgb(var(--color-black));
+}
+
+/*
+ * To be able to use colors with alpha, they are written in RGB.
+ * Comments with HEX codes in front of the values are used as reference only.
+ * Example of use:
+ * solid: `color: rgb(var(--contrast-100))`
+ * transparent: `color: rgba(var(--contrast-100), 0.5)`
+ */
+:host {
+  /* Lime Technologies Brand Colors (Do not have dark/light mode variants) */
+  --lime-brand-color-deep-red: 240, 87, 80;
+  /* #f05750 */
+  --lime-brand-color-sellable-orange: 255, 112, 67;
+  /* #ff7043 (FIXME: or 247-107-7; // #f76b07 ? --> can be replaced with orange-dark in light mode in this case) */
+  --lime-brand-color-orange: 255, 176, 59;
+  /* #ffb03b */
+  --lime-brand-color-yellow: 255, 207, 61;
+  /* #ffcf3d */
+  --lime-brand-color-lime-green: 102, 187, 106;
+  /* #66bb6a (FIXME: or 133-196-54; // #85c436 ? --> can be replaced with lime-default in light mode in this case) */
+  --lime-brand-color-flexible-turquoise: 38, 166, 154;
+  /* #26a69a (FIXME: or 0-179-167; // #00b3a7 ? --> needs modifying the teal hues in this case) */
+  --lime-brand-color-simple-blue: 41, 182, 246;
+  /* #29b6f6 (FIXME: or 0-183-255; // #00b7ff ? --> can be replaced with sky-light in dark mode in this case) */
+  --lime-brand-color-dark-blue: 87, 135, 159;
+  /* #57879f */
+  --lime-brand-color-loving-magenta: 255, 49, 149;
+  /* #ff3195 */
+  --lime-brand-color-light-grey: 173, 173, 173;
+  /* #adadad */
+  --lime-brand-color-grey: 87, 87, 86;
+  /* #575756 */
+  /* Absolute white and black (Do not have dark/light mode variants) */
+  --color-white: 255, 255, 255;
+  /* #fff */
+  --color-black: 0, 0, 0;
+  /* #000 */
+  /* Contrast swatches, to use for tones that can automatically revert in dark/light modes. E.g. text and background */
+  --contrast-100: 255, 255, 255;
+  /* #fff */
+  --contrast-200: 250, 250, 251;
+  /* #fafafb */
+  --contrast-300: 246, 246, 247;
+  /* #f6f6f7 */
+  --contrast-400: 241, 241, 243;
+  /* #f1f1f3 */
+  --contrast-500: 237, 237, 238;
+  /* #ededee */
+  --contrast-600: 232, 232, 234;
+  /* #e8e8ea */
+  --contrast-700: 209, 209, 213;
+  /* #d1d1d5 */
+  --contrast-800: 186, 186, 192;
+  /* #babac0 */
+  --contrast-900: 140, 140, 150;
+  /* #8c8c96 */
+  --contrast-1000: 117, 117, 128;
+  /* #757580 */
+  --contrast-1100: 94, 94, 108;
+  /* #5e5e6c */
+  --contrast-1200: 71, 71, 86;
+  /* #474756 */
+  --contrast-1300: 48, 48, 66;
+  /* #303042 */
+  --contrast-1400: 39, 39, 57;
+  /* #272739 */
+  --contrast-1500: 35, 35, 53;
+  /* #232335 */
+  --contrast-1600: 25, 25, 44;
+  /* #19192c */
+  --contrast-1700: 0, 0, 0;
+  /* #000 */
+  /* Colors swatches that get slightly dimmer in dark mode */
+  --color-red-lighter: 255, 205, 210;
+  /* #ffcdd2; */
+  --color-red-light: 255, 117, 107;
+  /* #ff756b; */
+  --color-red-default: 244, 67, 54;
+  /* #f44336; */
+  --color-red-dark: 211, 47, 47;
+  /* #d32f2f; */
+  --color-red-darker: 183, 28, 28;
+  /* #b71c1c; */
+  --color-pink-lighter: 248, 187, 208;
+  /* #f8bbd0 */
+  --color-pink-light: 240, 98, 146;
+  /* #f06292 */
+  --color-pink-default: 233, 30, 99;
+  /* #e91e63 */
+  --color-pink-dark: 194, 24, 91;
+  /* #c2185b */
+  --color-pink-darker: 136, 14, 79;
+  /* #880e4f */
+  --color-purple-lighter: 225, 190, 231;
+  /* #e1bee7 */
+  --color-purple-light: 186, 104, 200;
+  /* #ba68c8 */
+  --color-purple-default: 156, 39, 176;
+  /* #9c27b0 */
+  --color-purple-dark: 123, 31, 162;
+  /* #7b1fa2 */
+  --color-purple-darker: 74, 20, 140;
+  /* #4a148c */
+  --color-magenta-lighter: 249, 176, 212;
+  /* #f9b0d4 */
+  --color-magenta-light: 247, 89, 166;
+  /* #f759a6 */
+  --color-magenta-default: 243, 65, 151;
+  /* #f34197 */
+  --color-magenta-dark: 199, 46, 121;
+  /* #c72e79 */
+  --color-magenta-darker: 156, 22, 87;
+  /* #9c1657 */
+  --color-violet-lighter: 209, 196, 233;
+  /* #d1c4e9 */
+  --color-violet-light: 149, 117, 205;
+  /* #9575cd */
+  --color-violet-default: 103, 58, 183;
+  /* #673ab7 */
+  --color-violet-dark: 81, 45, 168;
+  /* #512da8 */
+  --color-violet-darker: 49, 27, 146;
+  /* #311b92 */
+  --color-indigo-lighter: 197, 202, 233;
+  /* #c5cae9 */
+  --color-indigo-light: 121, 134, 203;
+  /* #7986cb */
+  --color-indigo-default: 63, 81, 181;
+  /* #3f51b5 */
+  --color-indigo-dark: 48, 63, 159;
+  /* #303f9f */
+  --color-indigo-darker: 26, 35, 126;
+  /* #1a237e */
+  --color-blue-lighter: 187, 222, 251;
+  /* #bbdefb */
+  --color-blue-light: 100, 181, 246;
+  /* #64b5f6 */
+  --color-blue-default: 33, 150, 243;
+  /* #2196f3 */
+  --color-blue-dark: 25, 118, 210;
+  /* #1976d2 */
+  --color-blue-darker: 13, 71, 161;
+  /* #0d47a1 */
+  --color-sky-lighter: 179, 229, 252;
+  /* #b3e5fc */
+  --color-sky-light: 79, 195, 247;
+  /* #4fc3f7 */
+  --color-sky-default: 3, 169, 244;
+  /* #03a9f4 */
+  --color-sky-dark: 2, 136, 209;
+  /* #0288d1 */
+  --color-sky-darker: 1, 87, 155;
+  /* #01579b */
+  --color-cyan-lighter: 178, 235, 242;
+  /* #b2ebf2 */
+  --color-cyan-light: 77, 208, 225;
+  /* #4dd0e1 */
+  --color-cyan-default: 0, 188, 212;
+  /* #00bcd4 */
+  --color-cyan-dark: 0, 151, 167;
+  /* #0097a7 */
+  --color-cyan-darker: 0, 96, 100;
+  /* #006064 */
+  --color-teal-lighter: 178, 223, 219;
+  /* #b2dfdb */
+  --color-teal-light: 77, 182, 172;
+  /* #4db6ac */
+  --color-teal-default: 0, 150, 136;
+  /* #009688 */
+  --color-teal-dark: 0, 121, 107;
+  /* #00796b */
+  --color-teal-darker: 0, 77, 64;
+  /* #004d40 */
+  --color-green-lighter: 200, 230, 201;
+  /* #c8e6c9 */
+  --color-green-light: 129, 199, 132;
+  /* #81c784 */
+  --color-green-default: 76, 175, 80;
+  /* #4caf50 */
+  --color-green-dark: 56, 142, 60;
+  /* #388e3c */
+  --color-green-darker: 27, 94, 32;
+  /* #1b5e20 */
+  --color-lime-lighter: 220, 237, 200;
+  /* #dcedc8 */
+  --color-lime-light: 174, 213, 129;
+  /* #aed581 */
+  --color-lime-default: 139, 195, 74;
+  /* #8bc34a */
+  --color-lime-dark: 104, 159, 56;
+  /* #689f38 */
+  --color-lime-darker: 51, 105, 30;
+  /* #33691e */
+  --color-grass-lighter: 240, 244, 195;
+  /* #f0f4c3 */
+  --color-grass-light: 220, 231, 117;
+  /* #dce775 */
+  --color-grass-default: 205, 220, 57;
+  /* #cddc39 */
+  --color-grass-dark: 175, 180, 43;
+  /* #afb42b */
+  --color-grass-darker: 130, 119, 23;
+  /* #827717 */
+  --color-yellow-lighter: 255, 249, 196;
+  /* #fff9c4 */
+  --color-yellow-light: 255, 241, 118;
+  /* #fff176 */
+  --color-yellow-default: 255, 235, 59;
+  /* #ffeb3b */
+  --color-yellow-dark: 251, 206, 44;
+  /* #fbce2c */
+  --color-yellow-darker: 232, 191, 41;
+  /* #e8bf29 */
+  --color-amber-lighter: 255, 236, 179;
+  /* #ffecb3 */
+  --color-amber-light: 255, 213, 79;
+  /* #ffd54f */
+  --color-amber-default: 255, 193, 7;
+  /* #ffc107 */
+  --color-amber-dark: 255, 160, 0;
+  /* #ffa000 */
+  --color-amber-darker: 255, 111, 0;
+  /* #ff6f00 */
+  --color-orange-lighter: 255, 224, 178;
+  /* #ffe0b2 */
+  --color-orange-light: 255, 183, 77;
+  /* #ffb74d */
+  --color-orange-default: 255, 152, 0;
+  /* #ff9800 */
+  --color-orange-dark: 245, 124, 0;
+  /* #f57c00 */
+  --color-orange-darker: 230, 81, 0;
+  /* #e65100 */
+  --color-coral-lighter: 255, 204, 188;
+  /* #ffccbc */
+  --color-coral-light: 255, 138, 101;
+  /* #ff8a65 */
+  --color-coral-default: 255, 87, 34;
+  /* #ff5722 */
+  --color-coral-dark: 230, 74, 25;
+  /* #e64a19 */
+  --color-coral-darker: 191, 54, 12;
+  /* #bf360c */
+  --color-brown-lighter: 215, 204, 200;
+  /* #d7ccc8 */
+  --color-brown-light: 161, 136, 127;
+  /* #a1887f */
+  --color-brown-default: 121, 85, 72;
+  /* #795548 */
+  --color-brown-dark: 93, 64, 55;
+  /* #5d4037 */
+  --color-brown-darker: 62, 39, 35;
+  /* #3e2723 */
+  --color-gray-lighter: 245, 245, 245;
+  /* #f5f5f5 */
+  --color-gray-light: 224, 224, 224;
+  /* #e0e0e0 */
+  --color-gray-default: 158, 158, 158;
+  /* #9e9e9e */
+  --color-gray-dark: var(--lime-brand-color-grey);
+  --color-gray-darker: 33, 33, 33;
+  /* #212121 */
+  --color-glaucous-lighter: 208, 225, 232;
+  /* #d0e1e8 */
+  --color-glaucous-light: 135, 174, 193;
+  /* #87aec1 */
+  --color-glaucous-default: var(--lime-brand-color-dark-blue);
+  --color-glaucous-dark: 58, 100, 119;
+  /* #3a6477 */
+  --color-glaucous-darker: 37, 71, 88;
+  /* #254758 */
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --contrast-100: 0, 0, 0;
+    /* #000 */
+    --contrast-200: 25, 25, 44;
+    /* #19192c */
+    --contrast-300: 35, 35, 53;
+    /* #232335 */
+    --contrast-400: 39, 39, 57;
+    /* #272739 */
+    --contrast-500: 48, 48, 66;
+    /* #303042 */
+    --contrast-600: 71, 71, 86;
+    /* #474756 */
+    --contrast-700: 94, 94, 108;
+    /* #5e5e6c */
+    --contrast-800: 117, 117, 128;
+    /* #757580 */
+    --contrast-900: 140, 140, 150;
+    /* #8c8c96 */
+    --contrast-1000: 186, 186, 192;
+    /* #babac0 */
+    --contrast-1100: 209, 209, 213;
+    /* #d1d1d5 */
+    --contrast-1200: 232, 232, 234;
+    /* #e8e8ea */
+    --contrast-1300: 237, 237, 238;
+    /* #ededee */
+    --contrast-1400: 241, 241, 243;
+    /* #f1f1f3 */
+    --contrast-1500: 246, 246, 247;
+    /* #f6f6f7 */
+    --contrast-1600: 250, 250, 251;
+    /* #fafafb */
+    --contrast-1700: 255, 255, 255;
+    /* #fff */
+    --color-red-lighter: 239, 154, 154;
+    /* #ef9a9a */
+    --color-red-light: var(--lime-brand-color-deep-red);
+    --color-red-default: 229, 57, 53;
+    /* #e53935 */
+    --color-red-dark: 198, 40, 40;
+    /* #c62828 */
+    --color-red-darker: 165, 23, 23;
+    /* #a51717 */
+    --color-pink-lighter: 244, 143, 177;
+    /* #f48fb1 */
+    --color-pink-light: 236, 64, 122;
+    /* #ec407a */
+    --color-pink-default: 216, 27, 96;
+    /* #d81b60 */
+    --color-pink-dark: 173, 20, 87;
+    /* #ad1457 */
+    --color-pink-darker: 132, 10, 75;
+    /* #840a4b */
+    --color-magenta-lighter: 249, 161, 204;
+    /* #f9a1cc */
+    --color-magenta-light: 249, 79, 162;
+    /* #f94fa2 */
+    --color-magenta-default: var(--lime-brand-color-loving-magenta);
+    --color-magenta-dark: 208, 31, 117;
+    /* #d01f75 */
+    --color-magenta-darker: 156, 22, 87;
+    /* #9c1657 */
+    --color-purple-lighter: 206, 147, 216;
+    /* #ce93d8 */
+    --color-purple-light: 171, 71, 188;
+    /* #ab47bc */
+    --color-purple-default: 142, 36, 170;
+    /* #8e24aa */
+    --color-purple-dark: 106, 27, 154;
+    /* #6a1b9a */
+    --color-purple-darker: 62, 13, 121;
+    /* #3e0d79 */
+    --color-violet-lighter: 179, 157, 219;
+    /* #b39ddb */
+    --color-violet-light: 126, 87, 194;
+    /* #7e57c2 */
+    --color-violet-default: 94, 53, 177;
+    /* #5e35b1 */
+    --color-violet-dark: 69, 39, 160;
+    /* #4527a0 */
+    --color-violet-darker: 41, 22, 127;
+    /* #29167f */
+    --color-indigo-lighter: 159, 168, 218;
+    /* #9fa8da */
+    --color-indigo-light: 92, 107, 192;
+    /* #5c6bc0 */
+    --color-indigo-default: 57, 73, 171;
+    /* #3949ab */
+    --color-indigo-dark: 40, 53, 147;
+    /* #283593 */
+    --color-indigo-darker: 21, 30, 115;
+    /* #151e73 */
+    --color-blue-lighter: 144, 202, 249;
+    /* #90caf9 */
+    --color-blue-light: 66, 165, 245;
+    /* #42a5f5 */
+    --color-blue-default: 30, 136, 229;
+    /* #1e88e5 */
+    --color-blue-dark: 21, 101, 192;
+    /* #1565c0 */
+    --color-blue-darker: 10, 60, 138;
+    /* #0a3c8a */
+    --color-sky-lighter: 129, 212, 250;
+    /* #81d4fa */
+    --color-sky-light: var(--lime-brand-color-simple-blue);
+    --color-sky-default: 3, 155, 229;
+    /* #039be5 */
+    --color-sky-dark: 2, 119, 189;
+    /* #0277bd */
+    --color-sky-darker: 1, 81, 144;
+    /* #015190 */
+    --color-cyan-lighter: 128, 222, 234;
+    /* #80deea */
+    --color-cyan-light: 38, 198, 218;
+    /* #26c6da */
+    --color-cyan-default: 0, 172, 193;
+    /* #00acc1 */
+    --color-cyan-dark: 0, 131, 143;
+    /* #00838f */
+    --color-cyan-darker: 0, 89, 93;
+    /* #00595d */
+    --color-teal-lighter: 128, 203, 196;
+    /* #80cbc4 */
+    --color-teal-light: var(--lime-brand-color-flexible-turquoise);
+    --color-teal-default: 0, 137, 123;
+    /* #00897b */
+    --color-teal-dark: 0, 105, 92;
+    /* #00695c */
+    --color-teal-darker: 1, 82, 69;
+    /* #015245 */
+    --color-green-lighter: 165, 214, 167;
+    /* #a5d6a7 */
+    --color-green-light: var(--lime-brand-color-lime-green);
+    --color-green-default: 67, 160, 71;
+    /* #43a047 */
+    --color-green-dark: 46, 125, 50;
+    /* #2e7d32 */
+    --color-green-darker: 32, 97, 37;
+    /* #206125 */
+    --color-lime-lighter: 197, 225, 165;
+    /* #c5e1a5 */
+    --color-lime-light: 156, 204, 101;
+    /* #9ccc65 */
+    --color-lime-default: 124, 179, 66;
+    /* #7cb342 */
+    --color-lime-dark: 85, 139, 47;
+    /* #558b2f */
+    --color-lime-darker: 43, 90, 25;
+    /* #2b5a19 */
+    --color-grass-lighter: 230, 238, 156;
+    /* #e6ee9c */
+    --color-grass-light: 212, 225, 87;
+    /* #d4e157 */
+    --color-grass-default: 192, 202, 51;
+    /* #c0ca33 */
+    --color-grass-dark: 158, 157, 36;
+    /* #9e9d24 */
+    --color-grass-darker: 119, 109, 19;
+    /* #776d13 */
+    --color-yellow-lighter: 255, 245, 157;
+    /* #fff59d */
+    --color-yellow-light: 255, 238, 88;
+    /* #ffee58 */
+    --color-yellow-default: 253, 216, 53;
+    /* #fdd835 */
+    --color-yellow-dark: 245, 200, 39;
+    /* #f5c827 */
+    --color-yellow-darker: 224, 180, 21;
+    /* #e0b415 */
+    --color-amber-lighter: 255, 224, 130;
+    /* #ffe082 */
+    --color-amber-light: var(--lime-brand-color-yellow);
+    --color-amber-default: var(--lime-brand-color-orange);
+    --color-amber-dark: 255, 143, 0;
+    /* #ff8f00 */
+    --color-amber-darker: 222, 98, 2;
+    /* #de6202 */
+    --color-orange-lighter: 255, 204, 128;
+    /* #ffcc80 */
+    --color-orange-light: 255, 167, 38;
+    /* #ffa726 */
+    --color-orange-default: 251, 140, 0;
+    /* #fb8c00 */
+    --color-orange-dark: 239, 108, 0;
+    /* #ef6c00 */
+    --color-orange-darker: 216, 77, 1;
+    /* #d84d01 */
+    --color-coral-lighter: 255, 171, 145;
+    /* #ffab91 */
+    --color-coral-light: var(--lime-brand-color-sellable-orange);
+    --color-coral-default: 244, 81, 30;
+    /* #f4511e */
+    --color-coral-dark: 216, 67, 21;
+    /* #d84315 */
+    --color-coral-darker: 181, 50, 10;
+    /* #b5320a */
+    --color-brown-lighter: 188, 170, 164;
+    /* #bcaaa4 */
+    --color-brown-light: 141, 110, 99;
+    /* #8d6e63 */
+    --color-brown-default: 109, 76, 65;
+    /* #6d4c41 */
+    --color-brown-dark: 78, 52, 46;
+    /* #4e342e */
+    --color-brown-darker: 51, 32, 28;
+    /* #33201c */
+    --color-gray-lighter: 238, 238, 238;
+    /* #eee */
+    --color-gray-light: var(--lime-brand-color-light-grey);
+    --color-gray-default: 117, 117, 117;
+    /* #757575 */
+    --color-gray-dark: 66, 66, 66;
+    /* #424242 */
+    --color-gray-darker: 33, 32, 32;
+    /* #212020 */
+    --color-glaucous-lighter: 159, 194, 208;
+    /* #9fc2d0 */
+    --color-glaucous-light: 110, 141, 156;
+    /* #6e8d9c */
+    --color-glaucous-default: 68, 108, 128;
+    /* #446c80 */
+    --color-glaucous-dark: 42, 87, 107;
+    /* #2a576b */
+    --color-glaucous-darker: 34, 65, 80;
+    /* #224150 */
+  }
+}
+.color-palette {
+  grid-template-rows: repeat(5, 1fr) auto;
+  grid-template-columns: repeat(20, 1fr) auto;
+}
+
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+.picker-trigger[style="--background:lime-magenta;"]:after,
+.chosen-color-preview[style="--background:lime-magenta;"]:after {
+  background-color: var(--lime-magenta);
+}
+.picker-trigger[style="--background:lime-blue;"]:after,
+.chosen-color-preview[style="--background:lime-blue;"]:after {
+  background-color: var(--lime-blue);
+}
+.picker-trigger[style="--background:lime-orange;"]:after,
+.chosen-color-preview[style="--background:lime-orange;"]:after {
+  background-color: var(--lime-orange);
+}
+.picker-trigger[style="--background:lime-green;"]:after,
+.chosen-color-preview[style="--background:lime-green;"]:after {
+  background-color: var(--lime-green);
+}
+.picker-trigger[style="--background:lime-red;"]:after,
+.chosen-color-preview[style="--background:lime-red;"]:after {
+  background-color: var(--lime-red);
+}
+.picker-trigger[style="--background:lime-dark-blue;"]:after,
+.chosen-color-preview[style="--background:lime-dark-blue;"]:after {
+  background-color: var(--lime-dark-blue);
+}
+.picker-trigger[style="--background:lime-turquoise;"]:after,
+.chosen-color-preview[style="--background:lime-turquoise;"]:after {
+  background-color: var(--lime-turquoise);
+}
+.picker-trigger[style="--background:lime-yellow;"]:after,
+.chosen-color-preview[style="--background:lime-yellow;"]:after {
+  background-color: var(--lime-yellow);
+}
+.picker-trigger[style="--background:lime-light-grey;"]:after,
+.chosen-color-preview[style="--background:lime-light-grey;"]:after {
+  background-color: var(--lime-light-grey);
+}
+
+:host {
+  --popover-surface-width: 50rem;
+  --color-picker-default-background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill-opacity='0.1' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+}
+
+.color-picker {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+}
+
+.chosen-color-preview,
+.picker-trigger {
+  box-sizing: border-box;
+  position: relative;
+  isolation: isolate;
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.chosen-color-preview:before, .chosen-color-preview:after,
+.picker-trigger:before,
+.picker-trigger:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.chosen-color-preview:before,
+.picker-trigger:before {
+  background: var(--color-picker-default-background);
+  background-size: 0.5rem;
+  z-index: 0;
+}
+.chosen-color-preview:after,
+.picker-trigger:after {
+  background: var(--background);
+  z-index: 1;
+}
+
+.picker-trigger {
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
+
+:host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
+  cursor: default;
+  box-shadow: var(--button-shadow-normal);
+  transform: none;
+}
+
+.chosen-color-input[readonly] {
+  transform: translateY(1rem);
+}
+
+:host {
+  border-radius: 0.75rem;
+  background-color: rgb(var(--kompendium-contrast-300));
+}
+
+.color-picker-palette {
+  display: grid;
+  gap: 0.25rem;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(20, 1fr);
+  grid-template-rows: repeat(4, 1fr) auto;
+  margin: 1rem;
+}
+
+.chosen-color-name {
+  box-sizing: border-box;
+  padding: 1rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+}
+
+.chosen-color-preview {
+  border: 1px solid rgba(var(--contrast-700), 0.65);
+  border-radius: 50%;
+}
+
+.swatch:not(.hue) {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+}
+.swatch:not(.hue):hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.swatch:not(.hue):active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.swatch:not(.hue):focus-visible {
+  box-shadow: var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
+
+.swatch--selected {
+  border-radius: 50%;
+}