@limetech/lime-elements
Version:
495 lines (421 loc) • 26.6 kB
CSS
/*
* 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: rgb(var(--contrast-100), 0.5)`
*/
:root {
--limel-chip-progress-mix-blend-mode: multiply;
/* Lime Technologies Brand Colors */
--lime-brand-color-lime-green: 190, 224, 52; /* #BEE034 */
--lime-brand-color-ocean-teal: 111, 205, 182; /* #6FCDB6 */
--lime-brand-color-aqua: 166, 239, 255; /* #A6EFFF */
--lime-brand-color-bubble-gum: 255, 166, 234; /* #FFA6EA */
--lime-brand-color-sunny-orange: 254, 176, 0; /* #FEB000 */
--lime-brand-color-cool-grey: 84, 87, 98; /* #545762 */
/* Deprecated Lime Technologies Brand Colors (pre-2024 Brand Refresh).
They do not have dark/light mode variants.
Kept here for backwards compatibility only!
*/
--lime-brand-color-deep-red: 240, 87, 80; /* #f05750 */
--lime-brand-color-sellable-orange: 255, 112, 67; /* #ff7043 */
--lime-brand-color-orange: 255, 176, 59; /* #ffb03b */
--lime-brand-color-yellow: 255, 207, 61; /* #ffcf3d */
--lime-brand-color-flexible-turquoise: 38, 166, 154; /* #26a69a */
--lime-brand-color-simple-blue: 41, 182, 246; /* #29b6f6 */
--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: 20, 20, 37; /* #141425 */
/* 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: 87, 87, 86; /* #575756 */
--color-gray-darker: 33, 33, 33; /* #212121 */
--color-glaucous-lighter: 208, 225, 232; /* #d0e1e8 */
--color-glaucous-light: 135, 174, 193; /* #87aec1 */
--color-glaucous-default: 87, 135, 159; /* #57879f */
--color-glaucous-dark: 58, 100, 119; /* #3a6477 */
--color-glaucous-darker: 37, 71, 88; /* #254758 */
}
:root[data-theme="force-dark"] {
--limel-chip-progress-mix-blend-mode: screen;
--contrast-100: 20, 20, 42; /* #14142a */
--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: 240, 87, 80; /* #f05750 */
--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: 255, 49, 149; /* #ff3195 */
--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: 41, 182, 246; /* #29b6f6 */
--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: 38, 166, 154; /* #26a69a */
--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: 102, 187, 106; /* #66bb6a */
--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: 255, 207, 61; /* #ffcf3d */
--color-amber-default: 255, 176, 59; /* #ffb03b */
--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: 255, 112, 67; /* #ff7043 */
--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: 173, 173, 173; /* #adadad */
--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 */
--lime-elevated-surface-background-color: rgb(var(--contrast-200));
--button-shadow-normal: 0 0.09375rem 0.225rem 0 rgb(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.608), var(--shadow-brighten-edges-inside);
--button-shadow-hovered: 0 0.125rem 0.375rem rgb(var(--color-black), 0.55), 0 0.4rem 0.475rem -0.3rem rgb(var(--color-black), 0.45), var(--shadow-brighten-edges-inside);
--button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgb(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.508), var(--shadow-brighten-edges-inside);
--button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgb(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.508) inset, 0 0 0.25rem rgb(var(--color-white), 0.1), var(--shadow-brighten-edges-outside);
--button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgb(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgb(var(--color-black), 0.52) inset, 0 -1px 0.3rem rgb(var(--color-white), 0.1), var(--shadow-brighten-edges-outside);
--shadow-depth-8: 0 0.2rem 0.45rem 0 rgb(var(--color-black), 0.532), 0 0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.508);
--shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgb(var(--color-black), 0.532), 0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.508);
--shadow-depth-16: 0 0.4rem 0.9rem 0 rgb(var(--color-black), 0.532), 0 0.075rem 0.225rem 0 rgb(var(--color-black), 0.508);
--shadow-depth-64: 0 1.6rem 3.6rem 0 rgb(var(--color-black), 0.22), 0 0.3rem 0.9rem 0 rgb(var(--color-black), 0.58);
--shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgb(var(--color-black), 0.21), -0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.08), 0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.46), 0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
--shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.21), -0.375rem -0.375rem 1rem rgb(var(--color-white), 0.1), 0.375rem 0.375rem 1rem rgb(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
--shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.21), -0.625rem -0.625rem 1.875rem rgb(var(--color-white), 0.2), 0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="force-light"]) {
--limel-chip-progress-mix-blend-mode: screen;
--contrast-100: 20, 20, 37; /* #141425 */
--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: 240, 87, 80; /* #f05750 */
--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: 255, 49, 149; /* #ff3195 */
--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: 41, 182, 246; /* #29b6f6 */
--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: 38, 166, 154; /* #26a69a */
--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: 102, 187, 106; /* #66bb6a */
--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: 255, 207, 61; /* #ffcf3d */
--color-amber-default: 255, 176, 59; /* #ffb03b */
--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: 255, 112, 67; /* #ff7043 */
--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: 173, 173, 173; /* #adadad */
--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 */
--lime-elevated-surface-background-color: rgb(var(--contrast-200));
--button-shadow-normal: 0 0.09375rem 0.225rem 0 rgb(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.608), var(--shadow-brighten-edges-inside);
--button-shadow-hovered: 0 0.125rem 0.375rem rgb(var(--color-black), 0.55), 0 0.4rem 0.475rem -0.3rem rgb(var(--color-black), 0.45), var(--shadow-brighten-edges-inside);
--button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgb(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.508), var(--shadow-brighten-edges-inside);
--button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgb(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.508) inset, 0 0 0.25rem rgb(var(--color-white), 0.1), var(--shadow-brighten-edges-outside);
--button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgb(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgb(var(--color-black), 0.52) inset, 0 -1px 0.3rem rgb(var(--color-white), 0.1), var(--shadow-brighten-edges-outside);
--shadow-depth-8: 0 0.2rem 0.45rem 0 rgb(var(--color-black), 0.532), 0 0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.508);
--shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgb(var(--color-black), 0.532), 0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.508);
--shadow-depth-16: 0 0.4rem 0.9rem 0 rgb(var(--color-black), 0.532), 0 0.075rem 0.225rem 0 rgb(var(--color-black), 0.508);
--shadow-depth-64: 0 1.6rem 3.6rem 0 rgb(var(--color-black), 0.22), 0 0.3rem 0.9rem 0 rgb(var(--color-black), 0.58);
--shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgb(var(--color-black), 0.21), -0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.08), 0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.46), 0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
--shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.21), -0.375rem -0.375rem 1rem rgb(var(--color-white), 0.1), 0.375rem 0.375rem 1rem rgb(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
--shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.21), -0.625rem -0.625rem 1.875rem rgb(var(--color-white), 0.2), 0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
}
}