@blueprintjs/core/lib/css/blueprint-design-tokens.css

Core styles & components

@charset "UTF-8";
:root{
  --bp-emphasis-transition-duration:100ms;
  --bp-emphasis-ease-default:cubic-bezier(0.4, 1, 0.75, 0.9);
  --bp-emphasis-ease-bounce:cubic-bezier(0.54, 1.12, 0.38, 1.11);
  --bp-emphasis-focus-color:#2d72d2;
  --bp-emphasis-focus-width:2px;
  --bp-emphasis-focus-offset:2px;
  --bp-emphasis-motion-reduced:0;
  --bp-intent-default-rest:#5f6b7c;
  --bp-intent-default-hover:#404854;
  --bp-intent-default-active:#383e47;
  --bp-intent-default-disabled:#8f99a8;
  --bp-intent-default-foreground:#ffffff;
  --bp-intent-primary-rest:#2d72d2;
  --bp-intent-primary-hover:#215db0;
  --bp-intent-primary-active:#184a90;
  --bp-intent-primary-disabled:#4c90f0;
  --bp-intent-primary-foreground:#ffffff;
  --bp-intent-success-rest:#238551;
  --bp-intent-success-hover:#1c6e42;
  --bp-intent-success-active:#165a36;
  --bp-intent-success-disabled:#32a467;
  --bp-intent-success-foreground:#ffffff;
  --bp-intent-warning-rest:#c87619;
  --bp-intent-warning-hover:#935610;
  --bp-intent-warning-active:#77450d;
  --bp-intent-warning-disabled:#ec9a3c;
  --bp-intent-warning-foreground:#111418;
  --bp-intent-danger-rest:#cd4246;
  --bp-intent-danger-hover:#ac2f33;
  --bp-intent-danger-active:#8e292c;
  --bp-intent-danger-disabled:#e76a6e;
  --bp-intent-danger-foreground:#ffffff;
  --bp-palette-black:#111418;
  --bp-palette-white:#ffffff;
  --bp-palette-dark-gray-1:#1c2127;
  --bp-palette-dark-gray-2:#252a31;
  --bp-palette-dark-gray-3:#2f343c;
  --bp-palette-dark-gray-4:#383e47;
  --bp-palette-dark-gray-5:#404854;
  --bp-palette-gray-1:#5f6b7c;
  --bp-palette-gray-2:#738091;
  --bp-palette-gray-3:#8f99a8;
  --bp-palette-gray-4:#abb3bf;
  --bp-palette-gray-5:#c5cbd3;
  --bp-palette-light-gray-1:#d3d8de;
  --bp-palette-light-gray-2:#dce0e5;
  --bp-palette-light-gray-3:#e5e8eb;
  --bp-palette-light-gray-4:#edeff2;
  --bp-palette-light-gray-5:#f6f7f9;
  --bp-palette-blue-1:#184a90;
  --bp-palette-blue-2:#215db0;
  --bp-palette-blue-3:#2d72d2;
  --bp-palette-blue-4:#4c90f0;
  --bp-palette-blue-5:#8abbff;
  --bp-palette-green-1:#165a36;
  --bp-palette-green-2:#1c6e42;
  --bp-palette-green-3:#238551;
  --bp-palette-green-4:#32a467;
  --bp-palette-green-5:#72ca9b;
  --bp-palette-orange-1:#77450d;
  --bp-palette-orange-2:#935610;
  --bp-palette-orange-3:#c87619;
  --bp-palette-orange-4:#ec9a3c;
  --bp-palette-orange-5:#fbb360;
  --bp-palette-red-1:#8e292c;
  --bp-palette-red-2:#ac2f33;
  --bp-palette-red-3:#cd4246;
  --bp-palette-red-4:#e76a6e;
  --bp-palette-red-5:#fa999c;
  --bp-palette-vermilion-1:#96290d;
  --bp-palette-vermilion-2:#b83211;
  --bp-palette-vermilion-3:#d33d17;
  --bp-palette-vermilion-4:#eb6847;
  --bp-palette-vermilion-5:#ff9980;
  --bp-palette-rose-1:#a82255;
  --bp-palette-rose-2:#c22762;
  --bp-palette-rose-3:#db2c6f;
  --bp-palette-rose-4:#f5498b;
  --bp-palette-rose-5:#ff66a1;
  --bp-palette-violet-1:#5c255c;
  --bp-palette-violet-2:#7c327c;
  --bp-palette-violet-3:#9d3f9d;
  --bp-palette-violet-4:#bd6bbd;
  --bp-palette-violet-5:#d69fd6;
  --bp-palette-indigo-1:#5642a6;
  --bp-palette-indigo-2:#634dbf;
  --bp-palette-indigo-3:#7961db;
  --bp-palette-indigo-4:#9881f3;
  --bp-palette-indigo-5:#bdadff;
  --bp-palette-cerulean-1:#0c5174;
  --bp-palette-cerulean-2:#0f6894;
  --bp-palette-cerulean-3:#147eb3;
  --bp-palette-cerulean-4:#3fa6da;
  --bp-palette-cerulean-5:#68c1ee;
  --bp-palette-turquoise-1:#004d46;
  --bp-palette-turquoise-2:#007067;
  --bp-palette-turquoise-3:#00a396;
  --bp-palette-turquoise-4:#13c9ba;
  --bp-palette-turquoise-5:#7ae1d8;
  --bp-palette-forest-1:#1d7324;
  --bp-palette-forest-2:#238c2c;
  --bp-palette-forest-3:#29a634;
  --bp-palette-forest-4:#43bf4d;
  --bp-palette-forest-5:#62d96b;
  --bp-palette-lime-1:#43501b;
  --bp-palette-lime-2:#5a701a;
  --bp-palette-lime-3:#8eb125;
  --bp-palette-lime-4:#b6d94c;
  --bp-palette-lime-5:#d4f17e;
  --bp-palette-gold-1:#5c4405;
  --bp-palette-gold-2:#866103;
  --bp-palette-gold-3:#d1980b;
  --bp-palette-gold-4:#f0b726;
  --bp-palette-gold-5:#fbd065;
  --bp-palette-sepia-1:#5e4123;
  --bp-palette-sepia-2:#7a542e;
  --bp-palette-sepia-3:#946638;
  --bp-palette-sepia-4:#af855a;
  --bp-palette-sepia-5:#d0b090;
  --bp-surface-border-color-default:#5f6b7c1f;
  --bp-surface-border-color-strong:#5f6b7c40;
  --bp-surface-border-width:1px;
  --bp-surface-border-radius:4px;
  --bp-surface-shadow-0:0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(0, 0, 0, 0.02);
  --bp-surface-shadow-1:0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  --bp-surface-shadow-2:0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  --bp-surface-shadow-3:0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  --bp-surface-shadow-4:0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.3);
  --bp-surface-spacing:4px;
  --bp-surface-z-index-0:0;
  --bp-surface-z-index-1:10;
  --bp-surface-z-index-2:20;
  --bp-surface-z-index-3:30;
  --bp-surface-z-index-4:40;
  --bp-surface-color-code:#ffffffb3;
  --bp-surface-layer-opacity:0.05;
  --bp-surface-layer-color-default:#5f6b7c0d;
  --bp-surface-layer-color-primary:#2d72d20d;
  --bp-surface-layer-color-success:#2385510d;
  --bp-surface-layer-color-warning:#c876190d;
  --bp-surface-layer-color-danger:#cd42460d;
  --bp-surface-layer-default:linear-gradient(#5f6b7c0d 0 0);
  --bp-surface-layer-primary:linear-gradient(#2d72d20d 0 0);
  --bp-surface-layer-success:linear-gradient(#2385510d 0 0);
  --bp-surface-layer-warning:linear-gradient(#c876190d 0 0);
  --bp-surface-layer-danger:linear-gradient(#cd42460d 0 0);
  --bp-surface-background-color-default-rest:#ffffff;
  --bp-surface-background-color-default-hover:#f6f7f9;
  --bp-surface-background-color-default-active:#edeff2;
  --bp-surface-background-color-default-disabled:#ffffff;
  --bp-surface-background-color-primary-rest:#2d72d2;
  --bp-surface-background-color-primary-hover:#215db0;
  --bp-surface-background-color-primary-active:#184a90;
  --bp-surface-background-color-primary-disabled:#4c90f0;
  --bp-surface-background-color-success-rest:#238551;
  --bp-surface-background-color-success-hover:#1c6e42;
  --bp-surface-background-color-success-active:#165a36;
  --bp-surface-background-color-success-disabled:#32a467;
  --bp-surface-background-color-warning-rest:#c87619;
  --bp-surface-background-color-warning-hover:#935610;
  --bp-surface-background-color-warning-active:#77450d;
  --bp-surface-background-color-warning-disabled:#ec9a3c;
  --bp-surface-background-color-danger-rest:#cd4246;
  --bp-surface-background-color-danger-hover:#ac2f33;
  --bp-surface-background-color-danger-active:#8e292c;
  --bp-surface-background-color-danger-disabled:#e76a6e;
  --bp-typography-family-default:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", blueprint-icons-16, sans-serif;
  --bp-typography-family-mono:monospace;
  --bp-typography-size-body-x-small:10px;
  --bp-typography-size-body-small:12px;
  --bp-typography-size-body-medium:14px;
  --bp-typography-size-body-large:16px;
  --bp-typography-size-heading-small:16px;
  --bp-typography-size-heading-medium:20px;
  --bp-typography-size-heading-large:24px;
  --bp-typography-size-heading-x-large:28px;
  --bp-typography-size-heading-display:46px;
  --bp-typography-size-code-small:12px;
  --bp-typography-size-code-medium:13px;
  --bp-typography-size-code-large:14px;
  --bp-typography-weight-default:400;
  --bp-typography-weight-bold:600;
  --bp-typography-line-height-default:1.28581;
  --bp-typography-line-height-large:1.5;
  --bp-typography-color-muted:#5f6b7c;
  --bp-typography-color-default-rest:#1c2127;
  --bp-typography-color-default-hover:#111418;
  --bp-typography-color-default-active:#252a31;
  --bp-typography-color-default-disabled:#8f99a8;
  --bp-typography-color-primary-rest:#2d72d2;
  --bp-typography-color-primary-hover:#215db0;
  --bp-typography-color-primary-active:#184a90;
  --bp-typography-color-primary-disabled:#4c90f0;
  --bp-typography-color-success-rest:#238551;
  --bp-typography-color-success-hover:#1c6e42;
  --bp-typography-color-success-active:#165a36;
  --bp-typography-color-success-disabled:#32a467;
  --bp-typography-color-warning-rest:#c87619;
  --bp-typography-color-warning-hover:#935610;
  --bp-typography-color-warning-active:#77450d;
  --bp-typography-color-warning-disabled:#ec9a3c;
  --bp-typography-color-danger-rest:#cd4246;
  --bp-typography-color-danger-hover:#ac2f33;
  --bp-typography-color-danger-active:#8e292c;
  --bp-typography-color-danger-disabled:#e76a6e;
}

@supports (color: oklch(from var(--any-color) l c h)){
  :root{
    --bp-surface-border-color-default:oklch(from var(--bp-intent-default-rest) l c h / 0.12);
    --bp-surface-border-color-strong:oklch(from var(--bp-intent-default-rest) l c h / 0.25);
    --bp-surface-color-code:oklch(from var(--bp-palette-white) l c h / 0.7);
    --bp-surface-layer-color-default:oklch(from var(--bp-intent-default-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-primary:oklch(from var(--bp-intent-primary-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-success:oklch(from var(--bp-intent-success-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-warning:oklch(from var(--bp-intent-warning-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-color-danger:oklch(from var(--bp-intent-danger-rest) l c h / var(--bp-surface-layer-opacity));
    --bp-surface-layer-default:linear-gradient(oklch(from var(--bp-intent-default-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-layer-primary:linear-gradient(oklch(from var(--bp-intent-primary-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-layer-success:linear-gradient(oklch(from var(--bp-intent-success-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-layer-warning:linear-gradient(oklch(from var(--bp-intent-warning-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-layer-danger:linear-gradient(oklch(from var(--bp-intent-danger-rest) l c h / var(--bp-surface-layer-opacity)) 0 0);
    --bp-surface-background-color-default-rest:oklch(from var(--bp-intent-default-rest) calc(l * 1.909) calc(c * 0) h);
    --bp-surface-background-color-default-hover:oklch(from var(--bp-intent-default-hover) calc(l + 0.577) calc(c + -0.02) calc(h + 6.2));
    --bp-surface-background-color-default-active:oklch(from var(--bp-intent-default-active) calc(l + 0.59) calc(c + -0.013) calc(h + 0));
    --bp-surface-background-color-default-disabled:oklch(from var(--bp-intent-default-disabled) calc(l * 1.471) calc(c * 0) h);
    --bp-typography-color-default-rest:oklch(from var(--bp-intent-default-rest) calc(l + -0.279) calc(c + -0.017) calc(h + -4));
    --bp-typography-color-default-hover:oklch(from var(--bp-intent-default-hover) calc(l + -0.209) calc(c + -0.013) calc(h + -2.7));
    --bp-typography-color-default-active:oklch(from var(--bp-intent-default-active) calc(l + -0.079) calc(c + -0.003) calc(h + -1.6));
  }
}
[data-bp-color-scheme=dark],
.bp6-dark{
  --bp-surface-border-color-default:#ffffff33;
  --bp-surface-border-color-strong:#ffffff4d;
  --bp-surface-shadow-0:inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  --bp-surface-shadow-1:inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px -1px rgba(0, 0, 0, 0.2);
  --bp-surface-shadow-2:inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 4px 6px -4px rgba(0, 0, 0, 0.5), 0px 10px 30px -5px rgba(0, 0, 0, 0.5);
  --bp-surface-shadow-3:inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 20px 25px -5px rgba(0, 0, 0, 0.3), 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
  --bp-surface-shadow-4:inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 25px 60px -12px rgba(0, 0, 0, 0.85);
  --bp-surface-color-code:#1114184d;
  --bp-surface-background-color-default-rest:#04070d;
  --bp-surface-background-color-default-hover:#f6f7f9;
  --bp-surface-background-color-default-active:#edeff2;
  --bp-surface-background-color-default-disabled:#181a1e;
  --bp-typography-color-default-rest:#a5aab3;
  --bp-typography-color-default-hover:#646970;
  --bp-typography-color-default-active:#54575d;
}

@supports (color: oklch(from var(--any-color) l c h)){
  [data-bp-color-scheme=dark],
  .bp6-dark{
    --bp-surface-border-color-default:oklch(from var(--bp-palette-white) l c h / 0.2);
    --bp-surface-border-color-strong:oklch(from var(--bp-palette-white) l c h / 0.3);
    --bp-surface-color-code:oklch(from var(--bp-palette-black) l c h / 0.3);
    --bp-surface-background-color-default-rest:oklch(from var(--bp-intent-default-rest) calc(l * 0.248) calc(c * 0.487) h);
    --bp-surface-background-color-default-hover:oklch(from var(--bp-intent-default-hover) calc(l + 0.577) calc(c + -0.02) calc(h + 0.3));
    --bp-surface-background-color-default-active:oklch(from var(--bp-intent-default-active) calc(l + 0.59) calc(c + -0.013) calc(h + 2.9));
    --bp-surface-background-color-default-disabled:oklch(from var(--bp-intent-default-disabled) calc(l * 0.319) calc(c * 0.312) h);
    --bp-typography-color-default-rest:oklch(from var(--bp-intent-default-rest) calc(l + 0.212) calc(c + -0.016) calc(h + 6.2));
    --bp-typography-color-default-hover:oklch(from var(--bp-intent-default-hover) calc(l + 0.12) calc(c + -0.01) calc(h + 0));
    --bp-typography-color-default-active:oklch(from var(--bp-intent-default-active) calc(l + 0.095) calc(c + -0.008) calc(h + 0));
  }
}