jellyfish_designtokens/dist/global/global.css

Ultimate design tokens from Jelly Fish Design System

/**
 * Do not edit directly
 * Generated on Thu, 31 Aug 2023 03:11:59 GMT
 */

:root {
  --jf-color-white: #fff;
  --jf-color-black: #000;
  --jf-color-charcoal-100: hsl(0 0% 95.5%);
  --jf-color-charcoal-200: hsl(0 0% 89.4%);
  --jf-color-charcoal-300: hsl(0 0% 84.3%);
  --jf-color-charcoal-400: hsl(0 0% 74.3%);
  --jf-color-charcoal-500: #B2B2B2;
  --jf-color-charcoal-600: hsl(0 0% 59.3%);
  --jf-color-charcoal-700: hsl(0 0% 36.3%);
  --jf-color-charcoal-800: hsl(0 0% 24.4%);
  --jf-color-charcoal-900: hsl(0 0% 17.5%);
  --jf-color-charcoal-1000: hsl(0 0% 10.5%);
  --jf-color-carbon-100: hsl(212 17.4% 93.1%);
  --jf-color-carbon-200: hsl(212 17.4% 83.9%);
  --jf-color-carbon-300: hsl(212 17.4% 76%);
  --jf-color-carbon-400: hsl(212 17.4% 60.8%);
  --jf-color-carbon-500: #75889E;
  --jf-color-carbon-600: hsl(212 17.4% 45.8%);
  --jf-color-carbon-700: hsl(212 17.4% 28%);
  --jf-color-carbon-800: hsl(212 17.4% 18.9%);
  --jf-color-carbon-900: hsl(212 17.4% 13.5%);
  --jf-color-carbon-1000: hsl(212 17.4% 8.09%);
  --jf-color-cloud-100: hsl(213 34% 91.3%);
  --jf-color-cloud-200: hsl(213 34% 79.8%);
  --jf-color-cloud-300: hsl(213 34% 69.9%);
  --jf-color-cloud-400: hsl(213 34% 50.8%);
  --jf-color-cloud-500: #476890;
  --jf-color-cloud-600: hsl(213 34% 35.8%);
  --jf-color-cloud-700: hsl(213 34% 21.9%);
  --jf-color-cloud-800: hsl(213 34% 14.8%);
  --jf-color-cloud-900: hsl(213 34% 10.5%);
  --jf-color-cloud-1000: hsl(213 34% 6.32%);
  --jf-color-ultramarine-100: hsl(229 96.4% 91.6%);
  --jf-color-ultramarine-200: hsl(229 96.4% 80.3%);
  --jf-color-ultramarine-300: hsl(229 96.4% 70.7%);
  --jf-color-ultramarine-400: hsl(229 96.4% 52.2%);
  --jf-color-ultramarine-500: #042bdb;
  --jf-color-ultramarine-600: hsl(229 96.4% 37.2%);
  --jf-color-ultramarine-700: hsl(229 96.4% 22.7%);
  --jf-color-ultramarine-800: hsl(229 96.4% 15.3%);
  --jf-color-ultramarine-900: hsl(229 96.4% 10.9%);
  --jf-color-ultramarine-1000: hsl(229 96.4% 6.56%);
  --jf-color-colbat-100: hsl(217 95% 89.7%);
  --jf-color-colbat-200: hsl(218 95% 76%);
  --jf-color-colbat-300: hsl(218 95% 64.3%);
  --jf-color-colbat-400: hsl(218 95% 41.7%);
  --jf-color-colbat-500: #043D9C;
  --jf-color-colbat-600: hsl(218 95% 26.7%);
  --jf-color-colbat-700: hsl(218 95% 16.3%);
  --jf-color-colbat-800: hsl(218 95% 11%);
  --jf-color-colbat-900: hsl(218 95% 7.84%);
  --jf-color-colbat-1000: hsl(218 95% 4.71%);
  --jf-color-blue-100: hsl(204 90.6% 91.2%);
  --jf-color-blue-200: hsl(204 90.6% 79.5%);
  --jf-color-blue-300: hsl(204 90.6% 69.6%);
  --jf-color-blue-400: hsl(204 90.6% 50.3%);
  --jf-color-blue-500: #0a7dca;
  --jf-color-blue-600: hsl(204 90.6% 35.3%);
  --jf-color-blue-700: hsl(204 90.6% 21.6%);
  --jf-color-blue-800: hsl(204 90.6% 14.5%);
  --jf-color-blue-900: hsl(204 90.6% 10.4%);
  --jf-color-blue-1000: hsl(204 90.6% 6.24%);
  --jf-color-sky-100: hsl(193 100% 92.1%);
  --jf-color-sky-200: hsl(193 100% 81.6%);
  --jf-color-sky-300: hsl(193 100% 72.7%);
  --jf-color-sky-400: hsl(193 100% 55.3%);
  --jf-color-sky-500: #00BCF2;
  --jf-color-sky-600: hsl(193 100% 40.3%);
  --jf-color-sky-700: hsl(193 100% 24.7%);
  --jf-color-sky-800: hsl(193 100% 16.6%);
  --jf-color-sky-900: hsl(193 100% 11.9%);
  --jf-color-sky-1000: hsl(193 100% 7.12%);
  --jf-color-cyan-100: hsl(180 100% 92.5%);
  --jf-color-cyan-200: hsl(180 100% 82.5%);
  --jf-color-cyan-300: hsl(180 100% 74%);
  --jf-color-cyan-400: hsl(180 100% 57.5%);
  --jf-color-cyan-500: #0ff;
  --jf-color-cyan-600: hsl(180 100% 42.5%);
  --jf-color-cyan-700: hsl(180 100% 26%);
  --jf-color-cyan-800: hsl(180 100% 17.5%);
  --jf-color-cyan-900: hsl(180 100% 12.5%);
  --jf-color-cyan-1000: hsl(180 100% 7.5%);
  --jf-color-teal-100: hsl(166 48.9% 93.1%);
  --jf-color-teal-200: hsl(166 48.9% 83.9%);
  --jf-color-teal-300: hsl(166 48.9% 76%);
  --jf-color-teal-400: hsl(166 48.9% 60.8%);
  --jf-color-teal-500: #50C3A8;
  --jf-color-teal-600: hsl(166 48.9% 45.8%);
  --jf-color-teal-700: hsl(166 48.9% 28%);
  --jf-color-teal-800: hsl(166 48.9% 18.9%);
  --jf-color-teal-900: hsl(166 48.9% 13.5%);
  --jf-color-teal-1000: hsl(166 48.9% 8.09%);
  --jf-color-grass-100: hsl(135 34.8% 89.1%);
  --jf-color-grass-200: hsl(135 34.8% 74.5%);
  --jf-color-grass-300: hsl(135 34.8% 62.1%);
  --jf-color-grass-400: hsl(135 34.8% 38%);
  --jf-color-grass-500: #2d5d39;
  --jf-color-grass-600: hsl(135 34.8% 23%);
  --jf-color-grass-700: hsl(135 34.8% 14.1%);
  --jf-color-grass-800: hsl(135 34.8% 9.47%);
  --jf-color-grass-900: hsl(135 34.8% 6.76%);
  --jf-color-grass-1000: hsl(135 34.8% 4.06%);
  --jf-color-green-100: hsl(94.9 65.1% 93.1%);
  --jf-color-green-200: hsl(94.9 65.1% 83.9%);
  --jf-color-green-300: hsl(94.9 65.1% 76%);
  --jf-color-green-400: hsl(94.9 65.1% 60.8%);
  --jf-color-green-500: #7DD63D;
  --jf-color-green-600: hsl(94.9 65.1% 45.8%);
  --jf-color-green-700: hsl(94.9 65.1% 28%);
  --jf-color-green-800: hsl(94.9 65.1% 18.9%);
  --jf-color-green-900: hsl(94.9 65.1% 13.5%);
  --jf-color-green-1000: hsl(94.9 65.1% 8.09%);
  --jf-color-yellow-100: hsl(51.8 86.4% 93.5%);
  --jf-color-yellow-200: hsl(51.8 86.4% 84.8%);
  --jf-color-yellow-300: hsl(51.8 86.4% 77.5%);
  --jf-color-yellow-400: hsl(51.8 86.4% 63.2%);
  --jf-color-yellow-500: #f0d631;
  --jf-color-yellow-600: hsl(51.8 86.4% 48.2%);
  --jf-color-yellow-700: hsl(51.8 86.4% 29.5%);
  --jf-color-yellow-800: hsl(51.8 86.4% 19.8%);
  --jf-color-yellow-900: hsl(51.8 86.4% 14.2%);
  --jf-color-yellow-1000: hsl(51.8 86.4% 8.5%);
  --jf-color-mustard-100: hsl(36.9 60.9% 93.1%);
  --jf-color-mustard-200: hsl(36.9 60.9% 83.9%);
  --jf-color-mustard-300: hsl(36.9 60.9% 76%);
  --jf-color-mustard-400: hsl(36.9 60.9% 60.8%);
  --jf-color-mustard-500: #D19A42;
  --jf-color-mustard-600: hsl(36.9 60.9% 45.8%);
  --jf-color-mustard-700: hsl(36.9 60.9% 28%);
  --jf-color-mustard-800: hsl(36.9 60.9% 18.9%);
  --jf-color-mustard-900: hsl(36.9 60.9% 13.5%);
  --jf-color-mustard-1000: hsl(36.9 60.9% 8.09%);
  --jf-color-orange-100: hsl(25.9 84.7% 93.1%);
  --jf-color-orange-200: hsl(25.9 84.7% 83.9%);
  --jf-color-orange-300: hsl(25.9 84.7% 76%);
  --jf-color-orange-400: hsl(25.9 84.7% 60.8%);
  --jf-color-orange-500: #ED7C26;
  --jf-color-orange-600: hsl(25.9 84.7% 45.8%);
  --jf-color-orange-700: hsl(25.9 84.7% 28%);
  --jf-color-orange-800: hsl(25.9 84.7% 18.9%);
  --jf-color-orange-900: hsl(25.9 84.7% 13.5%);
  --jf-color-orange-1000: hsl(25.9 84.7% 8.09%);
  --jf-color-tomato-100: hsl(5.64 90.2% 93.4%);
  --jf-color-tomato-200: hsl(5.64 90.2% 84.6%);
  --jf-color-tomato-300: hsl(5.64 90.2% 77.2%);
  --jf-color-tomato-400: hsl(5.64 90.2% 62.7%);
  --jf-color-tomato-500: #F43D2A;
  --jf-color-tomato-600: hsl(5.64 90.2% 47.7%);
  --jf-color-tomato-700: hsl(5.64 90.2% 29.2%);
  --jf-color-tomato-800: hsl(5.64 90.2% 19.6%);
  --jf-color-tomato-900: hsl(5.64 90.2% 14%);
  --jf-color-tomato-1000: hsl(5.64 90.2% 8.41%);
  --jf-color-red-100: hsl(0 98.2% 91.6%);
  --jf-color-red-200: hsl(0 98.2% 80.4%);
  --jf-color-red-300: hsl(0 98.2% 70.8%);
  --jf-color-red-400: hsl(0 98.2% 52.3%);
  --jf-color-red-500: #de0202;
  --jf-color-red-600: hsl(0 98.2% 37.3%);
  --jf-color-red-700: hsl(0 98.2% 22.8%);
  --jf-color-red-800: hsl(0 98.2% 15.4%);
  --jf-color-red-900: hsl(0 98.2% 11%);
  --jf-color-red-1000: hsl(0 98.2% 6.59%);
  --jf-color-ruby-100: hsl(348 64.3% 89.9%);
  --jf-color-ruby-200: hsl(348 64.3% 76.5%);
  --jf-color-ruby-300: hsl(348 64.3% 65.1%);
  --jf-color-ruby-400: hsl(348 64.3% 43%);
  --jf-color-ruby-500: #8a1e34;
  --jf-color-ruby-600: hsl(348 64.3% 28%);
  --jf-color-ruby-700: hsl(348 64.3% 17.1%);
  --jf-color-ruby-800: hsl(348 64.3% 11.5%);
  --jf-color-ruby-900: hsl(348 64.3% 8.24%);
  --jf-color-ruby-1000: hsl(348 64.3% 4.94%);
  --jf-color-pink-100: hsl(325 65.1% 93.1%);
  --jf-color-pink-200: hsl(325 65.1% 83.9%);
  --jf-color-pink-300: hsl(325 65.1% 76%);
  --jf-color-pink-400: hsl(325 65.1% 60.8%);
  --jf-color-pink-500: #D63D96;
  --jf-color-pink-600: hsl(325 65.1% 45.8%);
  --jf-color-pink-700: hsl(325 65.1% 28%);
  --jf-color-pink-800: hsl(325 65.1% 18.9%);
  --jf-color-pink-900: hsl(325 65.1% 13.5%);
  --jf-color-pink-1000: hsl(325 65.1% 8.09%);
  --jf-color-magenta-100: hsl(296 52.9% 92.5%);
  --jf-color-magenta-200: hsl(296 52.9% 82.5%);
  --jf-color-magenta-300: hsl(296 52.9% 74%);
  --jf-color-magenta-400: hsl(296 52.9% 57.5%);
  --jf-color-magenta-500: #bb3cc3;
  --jf-color-magenta-600: hsl(296 52.9% 42.5%);
  --jf-color-magenta-700: hsl(296 52.9% 26%);
  --jf-color-magenta-800: hsl(296 52.9% 17.5%);
  --jf-color-magenta-900: hsl(296 52.9% 12.5%);
  --jf-color-magenta-1000: hsl(296 52.9% 7.5%);
  --jf-color-indigo-100: hsl(275 68.8% 92%);
  --jf-color-indigo-200: hsl(275 68.8% 81.3%);
  --jf-color-indigo-300: hsl(275 68.8% 72.2%);
  --jf-color-indigo-400: hsl(275 68.8% 54.5%);
  --jf-color-indigo-500: #8325C8;
  --jf-color-indigo-600: hsl(275 68.8% 39.5%);
  --jf-color-indigo-700: hsl(275 68.8% 24.2%);
  --jf-color-indigo-800: hsl(275 68.8% 16.3%);
  --jf-color-indigo-900: hsl(275 68.8% 11.6%);
  --jf-color-indigo-1000: hsl(275 68.8% 6.97%);
  --jf-color-purple-100: hsl(260 65.1% 93.1%);
  --jf-color-purple-200: hsl(260 65.1% 83.9%);
  --jf-color-purple-300: hsl(260 65.1% 76%);
  --jf-color-purple-400: hsl(260 65.1% 60.8%);
  --jf-color-purple-500: #703DD6;
  --jf-color-purple-600: hsl(260 65.1% 45.8%);
  --jf-color-purple-700: hsl(260 65.1% 28%);
  --jf-color-purple-800: hsl(260 65.1% 18.9%);
  --jf-color-purple-900: hsl(260 65.1% 13.5%);
  --jf-color-purple-1000: hsl(260 65.1% 8.09%);
  --jf-modifier-amount-1: 0.15;
  --jf-modifier-amount-2: 0.48;
  --jf-modifier-amount-3: 0.65;
  --jf-modifier-amount-4: 0.75;
  --jf-modifier-amount-5: 0.85;
  --jf-border-width-none: 0px;
  --jf-border-width-xs: 1px;
  --jf-border-width-sm: 2px;
  --jf-border-width-md: 4px;
  --jf-border-width-lg: 6px;
  --jf-border-width-xl: 8px;
  --jf-border-radius-0: 0;
  --jf-border-radius-1: 4px;
  --jf-border-radius-2: 8px;
  --jf-border-radius-3: 12px;
  --jf-border-radius-4: 20px;
  --jf-border-radius-5: 120px;
  --jf-border-radius-6: 999px;
  --jf-border-radius-7: 50%;
  --jf-border-radius-none: 0;
  --jf-border-radius-pill: 999px;
  --jf-border-radius-circle: 50%;
  --jf-font-weight-300: 300;
  --jf-font-weight-400: 400;
  --jf-font-weight-500: 500;
  --jf-font-weight-600: 600;
  --jf-font-weight-700: 700;
  --jf-font-weight-900: 900;
  --jf-font-line-height-xs: 1;
  --jf-font-line-height-sm: 1.3;
  --jf-font-line-height-md: 1.5;
  --jf-font-line-height-lg: 1.8;
  --jf-font-letter-spacing-sm: -0.05em;
  --jf-font-letter-spacing-md: 0em;
  --jf-font-letter-spacing-lg: 0.1em;
  --jf-font-size-1: 0.75;
  --jf-font-size-2: 0.875;
  --jf-font-size-3: 1;
  --jf-font-size-4: 1.25;
  --jf-font-size-5: 1.5;
  --jf-font-size-6: 1.75;
  --jf-font-size-7: 2;
  --jf-font-size-8: 2.5;
  --jf-font-size-9: 3;
  --jf-font-size-10: 3.5;
  --jf-font-size-11: 4;
  --jf-font-size-12: 4.5;
  --jf-font-size-13: 5;
  --jf-font-size-14: 6;
  --jf-font-size-15: 7;
  --jf-font-size-16: 8;
  --jf-font-size-17: 9;
  --jf-font-size-18: 10;
  --jf-font-size-19: 11;
  --jf-font-size-20: 12;
  --jf-font-size-21: 13;
  --jf-font-size-22: 14;
  --jf-font-size-23: 15;
  --jf-font-size-24: 16;
  --jf-font-size-25: 17;
  --jf-layer-1: -1;
  --jf-layer-2: 0;
  --jf-layer-3: 1;
  --jf-layer-4: 10;
  --jf-layer-5: 50;
  --jf-layer-6: 100;
  --jf-layer-7: 200;
  --jf-layer-8: 500;
  --jf-layer-9: 99999;
  --jf-dimension-0: 0rem;
  --jf-dimension-1: 0.125rem;
  --jf-dimension-2: 0.25rem;
  --jf-dimension-3: 0.5rem;
  --jf-dimension-4: 0.75rem;
  --jf-dimension-5: 1rem;
  --jf-dimension-6: 1.25rem;
  --jf-dimension-7: 1.5rem;
  --jf-dimension-8: 1.75rem;
  --jf-dimension-9: 2rem;
  --jf-dimension-10: 2.25rem;
  --jf-dimension-11: 2.5rem;
  --jf-dimension-12: 2.75rem;
  --jf-dimension-13: 3rem;
  --jf-dimension-14: 3.5rem;
  --jf-dimension-15: 4rem;
  --jf-dimension-16: 4.5rem;
  --jf-dimension-17: 5rem;
  --jf-dimension-18: 6rem;
  --jf-dimension-19: 7rem;
  --jf-dimension-20: 8rem;
  --jf-dimension-21: 9rem;
  --jf-dimension-22: 10rem;
  --jf-dimension-23: 11rem;
  --jf-dimension-24: 12rem;
  --jf-dimension-25: 13rem;
  --jf-dimension-26: 14rem;
  --jf-dimension-27: 16rem;
  --jf-dimension-28: 20rem;
  --jf-dimension-29: 30rem;
  --jf-dimension-30: 36rem;
  --jf-dimension-31: 48rem;
  --jf-dimension-32: 50rem;
  --jf-size-viewport-min: 22.5;
  --jf-size-viewport-max: 160;
  --jf-animation-duration-xs2: 0ms;
  --jf-animation-duration-xs: 50ms;
  --jf-animation-duration-sm: 100ms;
  --jf-animation-duration-md: 150ms;
  --jf-animation-duration-lg: 200ms;
  --jf-animation-duration-xl: 300ms;
  --jf-animation-duration-xl2: 400ms;
  --jf-animation-duration-xl3: 500ms;
  --jf-animation-duration-g: 5000ms;
  --jf-animation-delay-xs2: 0ms;
  --jf-animation-delay-xs: 50ms;
  --jf-animation-delay-sm: 100ms;
  --jf-animation-delay-md: 150ms;
  --jf-animation-delay-lg: 200ms;
  --jf-animation-delay-xl: 300ms;
  --jf-animation-delay-xl2: 400ms;
  --jf-animation-delay-xl3: 500ms;
  --jf-animation-delay-g: 5000ms;
  --jf-animation-transition-ease-in: cubic-bezier(0, 0, 0.40, 1);
  --jf-animation-transition-ease-out: cubic-bezier(0.50, 0, 1, 1);
  --jf-animation-transition-ease-in-out: cubic-bezier(0.45, 0, 0.40, 1);
  --jf-opacity-xs: 0.1;
  --jf-opacity-sm: 0.2;
  --jf-opacity-md: 0.3;
  --jf-opacity-lg: 0.5;
  --jf-opacity-xl: 0.8;
  --jf-opacity-total: 1;
  --jf-opacity-transparent: 0;
  --jf-spacing-none: 0rem;
  --jf-spacing-full: 100%;
  --jf-grid-area-logo: logo;
  --jf-grid-area-content: content;
  --jf-grid-area-footer: footer;
  --jf-grid-area-right-sidebar: right-sidebar;
  --jf-grid-area-left-sidebar: left-sidebar;
  --jf-grid-area-toolbar: toolbar;
  --jf-grid-area-navbar: navbar;
  --jf-grid-column-number-mobile: 4;
  --jf-grid-column-number-tablet: 8;
  --jf-grid-column-number-screen-sm: 12;
  --jf-grid-column-number-screen-md: 12;
  --jf-grid-column-number-screen-lg: 12;
  --jf-grid-column-number-screen-xl: 12;
  --jf-layout-boxed: 1140px;
}