@zendeskgarden/css-variables
Version:
Garden component CSS
265 lines (263 loc) • 9.94 kB
CSS
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
:root {
--zd-color-black: #000;
--zd-color-white: #fff;
--zd-color-green-100: #eef8f4;
--zd-color-green-200: #daeee6;
--zd-color-green-300: #cae3d9;
--zd-color-green-400: #94c1b0;
--zd-color-green-500: #4eab89;
--zd-color-green-600: #26a178;
--zd-color-green-700: #037f52;
--zd-color-green-800: #104b35;
--zd-color-green-900: #0b3b29;
--zd-color-green-1000: #0c261c;
--zd-color-green-1100: #0a1511;
--zd-color-green-1200: #080d0c;
--zd-color-grey-100: #f8f9f9;
--zd-color-grey-200: #e8eaec;
--zd-color-grey-300: #d8dcde;
--zd-color-grey-400: #b0b8be;
--zd-color-grey-500: #919ca5;
--zd-color-grey-600: #848f99;
--zd-color-grey-700: #5c6970;
--zd-color-grey-800: #39434b;
--zd-color-grey-900: #293239;
--zd-color-grey-1000: #1c2227;
--zd-color-grey-1100: #151a1e;
--zd-color-grey-1200: #0a0d0e;
--zd-color-blue-100: #edf7ff;
--zd-color-blue-200: #ddecf8;
--zd-color-blue-300: #cce0f1;
--zd-color-blue-400: #93bcdc;
--zd-color-blue-500: #66a0cd;
--zd-color-blue-600: #2694d6;
--zd-color-blue-700: #1f73b7;
--zd-color-blue-800: #13456d;
--zd-color-blue-900: #0f3655;
--zd-color-blue-1000: #0a2338;
--zd-color-blue-1100: #061420;
--zd-color-blue-1200: #040d15;
--zd-color-kale-100: #ecf9f9;
--zd-color-kale-200: #daeded;
--zd-color-kale-300: #cbe2e1;
--zd-color-kale-400: #97bfbf;
--zd-color-kale-500: #6ba4a5;
--zd-color-kale-600: #4a9999;
--zd-color-kale-700: #40787a;
--zd-color-kale-800: #16494f;
--zd-color-kale-900: #063940;
--zd-color-kale-1000: #03252a;
--zd-color-kale-1100: #061517;
--zd-color-kale-1200: #060e0e;
--zd-color-red-100: #fff2f3;
--zd-color-red-200: #fee3e5;
--zd-color-red-300: #f5d5d8;
--zd-color-red-400: #f2a1a8;
--zd-color-red-500: #ea7881;
--zd-color-red-600: #eb5c69;
--zd-color-red-700: #cd3642;
--zd-color-red-800: #7e1d25;
--zd-color-red-900: #671219;
--zd-color-red-1000: #3d1418;
--zd-color-red-1100: #1d1011;
--zd-color-red-1200: #100b0c;
--zd-color-yellow-100: #fff3e4;
--zd-color-yellow-200: #ffe6cb;
--zd-color-yellow-300: #fed6a9;
--zd-color-yellow-400: #fca347;
--zd-color-yellow-500: #e38215;
--zd-color-yellow-600: #d67305;
--zd-color-yellow-700: #ac5918;
--zd-color-yellow-800: #673515;
--zd-color-yellow-900: #4c2c17;
--zd-color-yellow-1000: #2d1e15;
--zd-color-yellow-1100: #18120f;
--zd-color-yellow-1200: #0e0c0b;
--zd-color-secondary-azure-100: #eff7fe;
--zd-color-secondary-azure-200: #d9ecfc;
--zd-color-secondary-azure-300: #c4e0fa;
--zd-color-secondary-azure-400: #82bcf4;
--zd-color-secondary-azure-500: #4b9fee;
--zd-color-secondary-azure-600: #3191ea;
--zd-color-secondary-azure-700: #2770c3;
--zd-color-secondary-azure-800: #23446b;
--zd-color-secondary-azure-900: #1a3250;
--zd-color-secondary-azure-1000: #122238;
--zd-color-secondary-azure-1100: #0e1a2a;
--zd-color-secondary-azure-1200: #070d14;
--zd-color-secondary-crimson-100: #fbf3f2;
--zd-color-secondary-crimson-200: #f7e7e4;
--zd-color-secondary-crimson-300: #f1d7d2;
--zd-color-secondary-crimson-400: #e2aaa0;
--zd-color-secondary-crimson-500: #d58678;
--zd-color-secondary-crimson-600: #cf7464;
--zd-color-secondary-crimson-700: #be4938;
--zd-color-secondary-crimson-800: #811b12;
--zd-color-secondary-crimson-900: #61140d;
--zd-color-secondary-crimson-1000: #440e09;
--zd-color-secondary-crimson-1100: #340b07;
--zd-color-secondary-crimson-1200: #1c0604;
--zd-color-secondary-fuschia-100: #fbf3f8;
--zd-color-secondary-fuschia-200: #f7e6f1;
--zd-color-secondary-fuschia-300: #f2d5e7;
--zd-color-secondary-fuschia-400: #e3a4cc;
--zd-color-secondary-fuschia-500: #d77db7;
--zd-color-secondary-fuschia-600: #d16aac;
--zd-color-secondary-fuschia-700: #b34496;
--zd-color-secondary-fuschia-800: #78116c;
--zd-color-secondary-fuschia-900: #5a0d51;
--zd-color-secondary-fuschia-1000: #3f0939;
--zd-color-secondary-fuschia-1100: #31072c;
--zd-color-secondary-fuschia-1200: #1b0418;
--zd-color-secondary-lemon-100: #fff7d4;
--zd-color-secondary-lemon-200: #ffea97;
--zd-color-secondary-lemon-300: #ffdc4f;
--zd-color-secondary-lemon-400: #efab00;
--zd-color-secondary-lemon-500: #c79100;
--zd-color-secondary-lemon-600: #b68500;
--zd-color-secondary-lemon-700: #8f6900;
--zd-color-secondary-lemon-800: #563e00;
--zd-color-secondary-lemon-900: #3f2e00;
--zd-color-secondary-lemon-1000: #2b2000;
--zd-color-secondary-lemon-1100: #221800;
--zd-color-secondary-lemon-1200: #110c00;
--zd-color-secondary-lime-100: #ecfae7;
--zd-color-secondary-lime-200: #d1f3c7;
--zd-color-secondary-lime-300: #b3eda3;
--zd-color-secondary-lime-400: #4fd12b;
--zd-color-secondary-lime-500: #45b025;
--zd-color-secondary-lime-600: #509f2d;
--zd-color-secondary-lime-700: #3d7e19;
--zd-color-secondary-lime-800: #2c491b;
--zd-color-secondary-lime-900: #203614;
--zd-color-secondary-lime-1000: #16250e;
--zd-color-secondary-lime-1100: #111d0a;
--zd-color-secondary-lime-1200: #090e05;
--zd-color-secondary-mint-100: #d6ffeb;
--zd-color-secondary-mint-200: #9affce;
--zd-color-secondary-mint-300: #0afe89;
--zd-color-secondary-mint-400: #00d26d;
--zd-color-secondary-mint-500: #01b15c;
--zd-color-secondary-mint-600: #16a260;
--zd-color-secondary-mint-700: #2d7e55;
--zd-color-secondary-mint-800: #1b4b33;
--zd-color-secondary-mint-900: #143726;
--zd-color-secondary-mint-1000: #0e261a;
--zd-color-secondary-mint-1100: #0b1d14;
--zd-color-secondary-mint-1200: #050e0a;
--zd-color-secondary-orange-100: #fdf3ed;
--zd-color-secondary-orange-200: #fae7d8;
--zd-color-secondary-orange-300: #f7d7be;
--zd-color-secondary-orange-400: #eda875;
--zd-color-secondary-orange-500: #e58035;
--zd-color-secondary-orange-600: #d57428;
--zd-color-secondary-orange-700: #af5626;
--zd-color-secondary-orange-800: #693317;
--zd-color-secondary-orange-900: #4d2711;
--zd-color-secondary-orange-1000: #361a0c;
--zd-color-secondary-orange-1100: #291409;
--zd-color-secondary-orange-1200: #150a04;
--zd-color-secondary-pink-100: #fcf3f4;
--zd-color-secondary-pink-200: #f7e5e8;
--zd-color-secondary-pink-300: #f3d6dc;
--zd-color-secondary-pink-400: #e5a6b4;
--zd-color-secondary-pink-500: #d98193;
--zd-color-secondary-pink-600: #d96b81;
--zd-color-secondary-pink-700: #d62054;
--zd-color-secondary-pink-800: #75263d;
--zd-color-secondary-pink-900: #561d2e;
--zd-color-secondary-pink-1000: #3c141f;
--zd-color-secondary-pink-1100: #2e0f18;
--zd-color-secondary-pink-1200: #17080c;
--zd-color-secondary-purple-100: #f9f3fb;
--zd-color-secondary-purple-200: #f2e7f6;
--zd-color-secondary-purple-300: #e9d8f1;
--zd-color-secondary-purple-400: #d0a9e0;
--zd-color-secondary-purple-500: #bb86d3;
--zd-color-secondary-purple-600: #b276cd;
--zd-color-secondary-purple-700: #9256b1;
--zd-color-secondary-purple-800: #58209a;
--zd-color-secondary-purple-900: #411973;
--zd-color-secondary-purple-1000: #2e1150;
--zd-color-secondary-purple-1100: #230d3f;
--zd-color-secondary-purple-1200: #120720;
--zd-color-secondary-royal-100: #f4f5fc;
--zd-color-secondary-royal-200: #e7e9f8;
--zd-color-secondary-royal-300: #d8dcf4;
--zd-color-secondary-royal-400: #acb4e7;
--zd-color-secondary-royal-500: #8a96dd;
--zd-color-secondary-royal-600: #7a88d9;
--zd-color-secondary-royal-700: #4c67d3;
--zd-color-secondary-royal-800: #1833ab;
--zd-color-secondary-royal-900: #122680;
--zd-color-secondary-royal-1000: #0d1a5a;
--zd-color-secondary-royal-1100: #0a1445;
--zd-color-secondary-royal-1200: #050a25;
--zd-color-secondary-teal-100: #d4fefa;
--zd-color-secondary-teal-200: #88fdf1;
--zd-color-secondary-teal-300: #0bf8e1;
--zd-color-secondary-teal-400: #03cdb8;
--zd-color-secondary-teal-500: #02ad9c;
--zd-color-secondary-teal-600: #2a9d8f;
--zd-color-secondary-teal-700: #367a74;
--zd-color-secondary-teal-800: #254846;
--zd-color-secondary-teal-900: #1b3534;
--zd-color-secondary-teal-1000: #122423;
--zd-color-secondary-teal-1100: #0e1c1a;
--zd-color-secondary-teal-1200: #070d0d;
--zd-font-family-monospace: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--zd-font-family-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
--zd-font-size-xs: 10px;
--zd-font-size-sm: 12px;
--zd-font-size-md: 14px;
--zd-font-size-lg: 18px;
--zd-font-size-xl: 22px;
--zd-font-size-xxl: 26px;
--zd-font-size-xxxl: 36px;
--zd-font-size-sm-monospace: 11px;
--zd-font-size-md-monospace: 13px;
--zd-font-size-lg-monospace: 17px;
--zd-font-weight-thin: 100;
--zd-font-weight-extralight: 200;
--zd-font-weight-light: 300;
--zd-font-weight-regular: 400;
--zd-font-weight-medium: 500;
--zd-font-weight-semibold: 600;
--zd-font-weight-bold: 700;
--zd-font-weight-extrabold: 800;
--zd-font-weight-black: 900;
--zd-font-weight-ultralight: 200;
--zd-font-weight-ultrabold: 800;
--zd-font-weight-heavy: 900;
--zd-line-height-sm: 16px;
--zd-line-height-md: 20px;
--zd-line-height-lg: 24px;
--zd-line-height-xl: 28px;
--zd-line-height-xxl: 32px;
--zd-line-height-xxxl: 44px;
--zd-opacity-100: 0.08;
--zd-opacity-200: 0.16;
--zd-opacity-300: 0.24;
--zd-opacity-400: 0.32;
--zd-opacity-500: 0.4;
--zd-opacity-600: 0.48;
--zd-opacity-700: 0.56;
--zd-opacity-800: 0.64;
--zd-opacity-900: 0.72;
--zd-opacity-1000: 0.8;
--zd-opacity-1100: 0.88;
--zd-opacity-1200: 0.96;
--zd-spacing-xxs: 4px;
--zd-spacing-xs: 8px;
--zd-spacing-sm: 12px;
--zd-spacing: 20px;
--zd-spacing-lg: 32px;
--zd-spacing-xl: 40px;
--zd-spacing-xxl: 48px;
}