@ionic-internal/ionic-ds
Version:
Ionic Design System
376 lines (374 loc) • 10.2 kB
CSS
:root {
--f-family-display: IonEina, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
--f-family-text: Inter, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
--f-family-system: apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
--f-family-monospace: "SF Mono", "Roboto Mono", Menlo, monospace;
--f-family-serif: "Adobe Caslon", Georgia, Times, "Times New Roman", serif;
--f-weight-thin: 100;
--f-weight-extra-light: 200;
--f-weight-light: 300;
--f-weight-regular: 400;
--f-weight-medium: 500;
--f-weight-semi-bold: 600;
--f-weight-bold: 700;
--f-weight-extra-bold: 800;
--f-weight-black: 900;
--f-weight-extra-black: 950;
--f-size-10: 0.625rem;
--f-size-11: 0.6875rem;
--f-size-12: 0.75rem;
--f-size-13: 0.8125rem;
--f-size-14: 0.875rem;
--f-size-16: 1.00rem;
--f-size-20: 1.25rem;
--f-size-24: 1.50rem;
--f-size-28: 1.75rem;
--f-size-32: 2.00rem;
--f-size-40: 2.50rem;
--f-size-48: 3.00rem;
--f-size-56: 3.50rem;
--f-size-64: 4.00rem;
--f-size-72: 4.50rem;
--f-size-80: 5.00rem;
--f-size-88: 5.50rem;
--f-size-96: 6.00rem;
--line-height-solid: 1;
--line-height-title: 1.12;
--line-height-body: 1.6;
--line-height-prose: 1.8;
--letter-spacing-dense: -0.04em;
--letter-spacing-tight: -0.02em;
--letter-spacing-solid: 0.00em;
--letter-spacing-wide: 0.04em;
--letter-spacing-super: 0.08em;
--letter-spacing-extra: 0.16em;
--space-0: 0rem;
--space-4: 0.25rem;
--space-8: 0.50rem;
--space-12: 0.75rem;
--space-16: 1.00rem;
--space-20: 1.25rem;
--space-24: 1.5rem;
--space-32: 2.00rem;
--space-40: 2.50rem;
--space-48: 3.00rem;
--space-64: 4.00rem;
--space-80: 5.00rem;
--space-96: 6.00rem;
--space-128: 8.00rem;
--space-160: 10.00rem;
--space-192: 12.00rem;
--space-224: 14.00rem;
--space-256: 16.00rem;
--breakpoint-0: 40em;
--breakpoint-1: 48em;
--breakpoint-2: 64em;
--breakpoint-3: 80em;
--radius-0: 0px;
--radius-6: 6px;
--radius-8: 8px;
--radius-16: 16px;
--radius-24: 24px;
--radius-x: 1000px;
--border-regular: 1px solid;
--border-dashed: 1px dashed;
--border-heavy: 2px solid;
--shadow-0: 0 0 0 1px rgba(0, 0, 0, 0);
--shadow-1: 0 0 0 1px rgba(0, 0, 0, 0.06);
--shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.04);
--shadow-3: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.06);
--shadow-4: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--shadow-5: 0 8px 16px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.06);
--shadow-6: 0 16px 32px -2px rgba(0, 0, 0, 0.1), 0 8px 16px -2px rgba(0, 0, 0, 0.08);
--shadow-7: 0 32px 64px -4px rgba(0, 0, 0, 0.12), 0 12px 24px -2px rgba(0, 0, 0, 0.06);
--shadow-8: 0 48px 96px -8px rgba(0, 0, 0, 0.16), 0 24px 48px -4px rgba(0, 0, 0, 0.08);
--duration-instantly: 0s;
--duration-quickly: 0.15s;
--c-black: #000000;
--c-white: #ffffff;
--c-blue-0: #f0f6ff;
--c-blue-10: #e3edff;
--c-blue-20: #cddfff;
--c-blue-30: #b2ceff;
--c-blue-40: #97bdff;
--c-blue-50: #7cabff;
--c-blue-60: #639bff;
--c-blue-70: #4d8dff;
--c-blue-80: #3880ff;
--c-blue-90: #176BFF;
--c-blue-100: #0054e9;
--c-blue-110: #004DD6;
--c-blue-120: #0046C1;
--c-blue-130: #003FAE;
--c-blue-140: #00389B;
--c-blue-150: #002D7C;
--c-blue-160: #002669;
--c-blue-170: #001D52;
--c-blue-180: #001740;
--c-blue-190: #00112F;
--c-blue-200: #000B1F;
--c-gray-0: #f3f3f3;
--c-gray-10: #e4e4e4;
--c-gray-20: #c8c8c8;
--c-gray-30: #aeaeae;
--c-gray-40: #959595;
--c-gray-50: #818181;
--c-gray-60: #6d6d6d;
--c-gray-70: #5f5f5f;
--c-gray-80: #474747;
--c-gray-90: #2f2f2f;
--c-gray-100: #141414;
--c-carbon-0: #eef1f3;
--c-carbon-10: #d7dde2;
--c-carbon-20: #b4bcc6;
--c-carbon-30: #98a2ad;
--c-carbon-40: #7d8894;
--c-carbon-50: #677483;
--c-carbon-60: #556170;
--c-carbon-70: #434f5e;
--c-carbon-80: #35404e;
--c-carbon-90: #222d3a;
--c-carbon-100: #03060b;
--c-indigo-0: #fbfbfd;
--c-indigo-10: #f6f8fc;
--c-indigo-20: #e9edf3;
--c-indigo-30: #dee3ea;
--c-indigo-40: #ced6e0;
--c-indigo-50: #b2becd;
--c-indigo-60: #92a0b3;
--c-indigo-70: #73849a;
--c-indigo-80: #445b78;
--c-indigo-90: #2d4665;
--c-indigo-100: #001a3a;
--c-green-0: #f1fdf5;
--c-green-10: #deffe7;
--c-green-20: #c7fbd5;
--c-green-30: #a7f1bb;
--c-green-40: #80e89d;
--c-green-50: #62e085;
--c-green-60: #4ada71;
--c-green-70: #2dd55b;
--c-green-80: #17c948;
--c-green-90: #00ba33;
--c-green-100: #00a52d;
--c-green-110: #009B2B;
--c-green-120: #009128;
--c-green-130: #008725;
--c-green-140: #007D22;
--c-green-150: #00711F;
--c-green-160: #00661C;
--c-green-170: #00581A;
--c-green-180: #004314;
--c-green-190: #002F0E;
--c-green-200: #001807;
--c-lime-0: #f5fff0;
--c-lime-10: #ebfee3;
--c-lime-20: #ddfcd0;
--c-lime-30: #cffbbc;
--c-lime-40: #bbf9a2;
--c-lime-50: #a3f581;
--c-lime-60: #8bf35f;
--c-lime-70: #64ec44;
--c-lime-80: #4ddf2b;
--c-lime-90: #3ad515;
--c-lime-100: #27c100;
--c-lime-110: #25B400;
--c-lime-120: #22A400;
--c-lime-130: #1E9200;
--c-lime-140: #1A7E00;
--c-lime-150: #176D00;
--c-lime-160: #135A00;
--c-lime-170: #0F4900;
--c-lime-180: #0C3900;
--c-lime-190: #092C00;
--c-lime-200: #061D00;
--c-lavender-0: #f7f8ff;
--c-lavender-10: #e6ebff;
--c-lavender-20: #ced9ff;
--c-lavender-30: #b6c6ff;
--c-lavender-40: #9fb5ff;
--c-lavender-50: #8aa4ff;
--c-lavender-60: #7493ff;
--c-lavender-70: #597eff;
--c-lavender-80: #3c67ff;
--c-lavender-90: #194bfd;
--c-lavender-100: #0033e8;
--c-lavender-110: #002DCC;
--c-lavender-120: #0028B8;
--c-lavender-130: #0023A2;
--c-lavender-140: #002092;
--c-lavender-150: #001A79;
--c-lavender-160: #001560;
--c-lavender-170: #00114E;
--c-lavender-180: #000E41;
--c-lavender-190: #000A30;
--c-lavender-200: #000721;
--c-purple-0: #f4f4ff;
--c-purple-10: #e9eaff;
--c-purple-20: #d0d2ff;
--c-purple-30: #b6b9f9;
--c-purple-40: #9a99fc;
--c-purple-50: #8482fb;
--c-purple-60: #786df9;
--c-purple-70: #6e5afd;
--c-purple-80: #6030ff;
--c-purple-90: #4712fb;
--c-purple-100: #3400e6;
--c-purple-110: #3000D1;
--c-purple-120: #2B00BC;
--c-purple-130: #2600A6;
--c-purple-140: #20008E;
--c-purple-150: #1B0075;
--c-purple-160: #15005C;
--c-purple-170: #100048;
--c-purple-180: #0D0038;
--c-purple-190: #0B0030;
--c-purple-200: #080022;
--c-pink-0: #ffeff5;
--c-pink-10: #ffe3ed;
--c-pink-20: #ffd8e5;
--c-pink-30: #ffc9db;
--c-pink-40: #ffb6d0;
--c-pink-50: #ff99bd;
--c-pink-60: #ff80ac;
--c-pink-70: #ff6098;
--c-pink-80: #fb4082;
--c-pink-90: #ec216a;
--c-pink-100: #da0d56;
--c-pink-110: #D0004A;
--c-pink-120: #C40046;
--c-pink-130: #B30040;
--c-pink-140: #A3003B;
--c-pink-150: #940035;
--c-pink-160: #850030;
--c-pink-170: #710029;
--c-pink-180: #5F0022;
--c-pink-190: #460019;
--c-pink-200: #20000B;
--c-red-0: #fff1f3;
--c-red-10: #ffe6e8;
--c-red-20: #ffcfd3;
--c-red-30: #feb7bc;
--c-red-40: #fc9aa2;
--c-red-50: #f9838c;
--c-red-60: #f56570;
--c-red-70: #f24c58;
--c-red-80: #ef3442;
--c-red-90: #e21827;
--c-red-100: #d0000f;
--c-red-110: #C5000F;
--c-red-120: #B3000E;
--c-red-130: #9C000C;
--c-red-140: #89000B;
--c-red-150: #760009;
--c-red-160: #650008;
--c-red-170: #520006;
--c-red-180: #410005;
--c-red-190: #300004;
--c-red-200: #1D0002;
--c-orange-0: #fff5f0;
--c-orange-10: #ffede6;
--c-orange-20: #ffdfd1;
--c-orange-30: #ffd0bc;
--c-orange-40: #ffc0a5;
--c-orange-50: #ffaf8c;
--c-orange-60: #ff9b70;
--c-orange-70: #ff8753;
--c-orange-80: #ff7336;
--c-orange-90: #ff5b13;
--c-orange-100: #eb4700;
--c-orange-110: #D94200;
--c-orange-120: #C93D00;
--c-orange-130: #B63700;
--c-orange-140: #A53200;
--c-orange-150: #8C2A00;
--c-orange-160: #772400;
--c-orange-170: #5E1C00;
--c-orange-180: #481600;
--c-orange-190: #341000;
--c-orange-200: #1D0900;
--c-yellow-0: #fffbef;
--c-yellow-10: #fff8e2;
--c-yellow-20: #fff4d1;
--c-yellow-30: #ffefbd;
--c-yellow-40: #ffe9a3;
--c-yellow-50: #ffe080;
--c-yellow-60: #ffd75a;
--c-yellow-70: #ffce31;
--c-yellow-80: #ffc409;
--c-yellow-90: #f4b100;
--c-yellow-100: #eaa100;
--c-yellow-110: #DD9800;
--c-yellow-120: #CC8D00;
--c-yellow-130: #BE8300;
--c-yellow-140: #B17A00;
--c-yellow-150: #9C6C00;
--c-yellow-160: #8A6000;
--c-yellow-170: #755100;
--c-yellow-180: #5F4100;
--c-yellow-190: #452F00;
--c-yellow-200: #231800;
--c-aqua-0: #f0fff9;
--c-aqua-10: #e6fff6;
--c-aqua-20: #ceffed;
--c-aqua-30: #b7fce3;
--c-aqua-40: #93f9d5;
--c-aqua-50: #79f5c9;
--c-aqua-60: #59f0ba;
--c-aqua-70: #38e9aa;
--c-aqua-80: #1ae19a;
--c-aqua-90: #00d287;
--c-aqua-100: #00ba78;
--c-aqua-110: #00AA6D;
--c-aqua-120: #009B63;
--c-aqua-130: #00915C;
--c-aqua-140: #008152;
--c-aqua-150: #016E46;
--c-aqua-160: #015D3C;
--c-aqua-170: #014F32;
--c-aqua-180: #013E28;
--c-aqua-190: #012E1E;
--c-aqua-200: #011E13;
--c-teal-0: #eefeff;
--c-teal-10: #dffdff;
--c-teal-20: #d0fdff;
--c-teal-30: #bbfcff;
--c-teal-40: #a2fcff;
--c-teal-50: #8bfbff;
--c-teal-60: #73f6fb;
--c-teal-70: #55ecf2;
--c-teal-80: #35e2e9;
--c-teal-90: #1bd2d9;
--c-teal-100: #00b9c0;
--c-teal-110: #01ADB4;
--c-teal-120: #019FA5;
--c-teal-130: #018F94;
--c-teal-140: #017E83;
--c-teal-150: #016D71;
--c-teal-160: #015D61;
--c-teal-170: #014D4F;
--c-teal-180: #013C3E;
--c-teal-190: #012C2E;
--c-teal-200: #011C1D;
--c-cyan-0: #f3faff;
--c-cyan-10: #e8f5ff;
--c-cyan-20: #d3ecff;
--c-cyan-30: #bfe4ff;
--c-cyan-40: #a7daff;
--c-cyan-50: #8dcfff;
--c-cyan-60: #77c6ff;
--c-cyan-70: #62bdff;
--c-cyan-80: #46b1ff;
--c-cyan-90: #24a3ff;
--c-cyan-100: #0091fa;
--c-cyan-110: #0189EC;
--c-cyan-120: #017ED8;
--c-cyan-130: #0170C0;
--c-cyan-140: #0163AA;
--c-cyan-150: #015592;
--c-cyan-160: #01487B;
--c-cyan-170: #013A64;
--c-cyan-180: #012D4D;
--c-cyan-190: #011E33;
--c-cyan-200: #01121E;
}