@blueprintjs/core/src/design-tokens/build/tokens.css

Core styles & components

/**
 * Do not edit directly, this file was auto-generated.
 */

: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; /** 0 = motion allowed, 1 = reduced motion */
  --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); /** Level 0 - border only, 0 0 0 1px rgba(black, 15%), 0 0 5px 0 rgba(0,0,0, 2%) */
  --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); /** Level 1 - subtle elevation */
  --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); /** Level 2 - standard elevation */
  --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); /** Level 3 - popover/dialog elevation */
  --bp-surface-shadow-4: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 25px 50px -12px rgba(0, 0, 0, 0.3); /** Level 4 - maximum elevation */
  --bp-surface-spacing: 4px; /** Base spacing unit — components multiply this */
  --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; /** Shared opacity for surface layers */
  --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));
  }
}