@limetech/lime-elements 36.2.0 → 36.3.0-next.2

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

@@ -577,507 +577,6 @@
   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;
@@ -1128,7 +627,7 @@
 
 :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-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='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
 }
 
 .color-picker {
@@ -1168,10 +667,14 @@
 .picker-trigger {
   border-radius: 0.5rem;
   cursor: pointer;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);
 }
 .picker-trigger:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .picker-trigger:active {
@@ -1220,7 +723,7 @@
 }
 
 .swatch:not(.hue) {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   cursor: pointer;
 }
 .swatch:not(.hue):hover {

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

@@ -43,7 +43,7 @@
 
 :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-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='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
 }
 
 .color-picker {
@@ -83,10 +83,14 @@
 .picker-trigger {
   border-radius: 0.5rem;
   cursor: pointer;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);
 }
 .picker-trigger:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .picker-trigger:active {

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css

@@ -49,6 +49,10 @@
       --lime-text-secondary-on-background-color,
       rgba(var(--contrast-1700), 0.54)
   );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
   --lime-error-text-color: rgb(var(--color-red-darker));
   --mdc-theme-surface: var(
       --lime-surface-background-color,
@@ -56,7 +60,7 @@
   );
   --mdc-theme-on-surface: var(
       --lime-on-surface-color,
-      var(--lime-text-primary-on-background-color)
+      rgb(var(--contrast-1500))
   );
 }
 
@@ -570,12 +574,6 @@ span.flatpickr-weekday {
   text-align: center;
   font-weight: 400;
 }
-.flatpickr-time input:hover,
-.flatpickr-time .flatpickr-am-pm:hover,
-.flatpickr-time input:focus,
-.flatpickr-time .flatpickr-am-pm:focus {
-  background: #eee;
-}
 
 .flatpickr-input[readonly] {
   cursor: pointer;
@@ -600,7 +598,7 @@ svg {
 .flatpickr-calendar {
   isolation: isolate;
   border-radius: 0.25rem;
-  background-color: rgb(var(--contrast-100));
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--shadow-depth-16);
 }
 
@@ -635,9 +633,13 @@ svg {
   line-height: 2.5rem;
 }
 .dayContainer .flatpickr-day {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: transparent;
 }
 .dayContainer .flatpickr-day:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .dayContainer .flatpickr-day:active {
@@ -695,6 +697,14 @@ svg {
 .flatpickr-time {
   border-top: 1px solid rgb(var(--contrast-400));
 }
+.flatpickr-time input {
+  color: var(--mdc-theme-on-surface);
+}
+.flatpickr-time input:hover, .flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: rgb(var(--contrast-100));
+}
 
 .flatpickr-weekdays {
   background-color: rgb(var(--contrast-300));
@@ -748,7 +758,9 @@ svg {
 .flatpickr-next-month,
 .arrowUp,
 .arrowDown {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: transparent;
   border-radius: 0.25rem;
 }
 .flatpickr-monthDropdown-months:hover,
@@ -756,6 +768,8 @@ svg {
 .flatpickr-next-month:hover,
 .arrowUp:hover,
 .arrowDown:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .flatpickr-monthDropdown-months:active,
@@ -766,13 +780,6 @@ svg {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-.flatpickr-monthDropdown-months:hover,
-.flatpickr-prev-month:hover,
-.flatpickr-next-month:hover,
-.arrowUp:hover,
-.arrowDown:hover {
-  background-color: rgb(var(--contrast-100)) !important;
-}
 
 .arrowUp {
   border-radius: 0 0.25rem 0 0;
@@ -821,7 +828,9 @@ svg {
 .datepicker-month,
 .datepicker-quarter,
 .datepicker-year {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: transparent;
   cursor: pointer;
   min-width: 0;
   text-align: center;
@@ -829,6 +838,8 @@ svg {
 .datepicker-month:hover,
 .datepicker-quarter:hover,
 .datepicker-year:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .datepicker-month:active,