browser/libs/components/src/tw-theme.css

@import "theme.css";
@import "@angular/cdk/a11y-prebuilt.css";
@import "@angular/cdk/text-field-prebuilt.css";
@import "./reset.css";
@import "./popover/popover.component.css";
@import "./toast/toast.tokens.css";
@import "./toast/toastr.css";
@import "./tooltip/tooltip.component.css";
@import "./search/search.component.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-transparent-hover: rgb(0 0 0 / 0.02);
  --color-shadow: 168 179 200;

  --color-background: 255 255 255;
  --color-background-alt: 243 246 249;
  --color-background-alt2: 23 92 219;
  --color-background-alt3: 22 55 146;
  --color-background-alt4: 2 15 102;

  --color-primary-100: 219 229 246;
  --color-primary-300: 121 161 233;
  --color-primary-600: 23 93 220;
  --color-primary-700: 26 65 172;

  --color-secondary-100: 230 233 239;
  --color-secondary-300: 168 179 200;
  --color-secondary-500: 90 109 145;
  --color-secondary-600: 83 99 131;
  --color-secondary-700: 63 75 99;

  --color-info-100: 219 229 246;
  --color-info-600: 121 161 233;
  --color-info-700: 13 36 123;

  --color-warning-100: 255 244 212;
  --color-warning-600: 255 191 0;
  --color-warning-700: 142 64 0;

  --color-danger-100: 255 236 239;
  --color-danger-600: 203 38 58;
  --color-danger-700: 149 27 42;

  --color-success-100: 213 243 216;
  --color-success-600: 12 128 24;
  --color-success-700: 8 81 15;

  --color-notification-100: 255 225 247;
  --color-notification-600: 192 17 118;

  --color-text-main: 27 32 41;
  --color-text-muted: 96 109 145;
  --color-text-contrast: 255 255 255;
  --color-text-alt2: 255 255 255;
  --color-text-code: 192 17 118;

  --color-hover-default: rgb(26 65 172 / 0.1);
  --color-hover-contrast: rgb(255 255 255 / 0.15);

  --color-marketing-logo: 23 93 220;
  --color-bw-blue: 23 93 220;

  --tw-ring-offset-color: #ffffff;

  --tw-sm-breakpoint: 640px;

  --color-illustration-outline: 2 15 102;
  --color-illustration-bg-primary: 219 229 246;
  --color-illustration-bg-secondary: 170 195 239;
  --color-illustration-bg-tertiary: 255 255 255;
  --color-illustration-tertiary: 255 191 0;
  --color-illustration-logo: 23 93 220;
}

.theme_light {
  /* should be left empty as white is the default */
}

.theme_dark {
  --color-transparent-hover: rgb(255 255 255 / 0.02);
  --color-shadow: 0 0 0;

  --color-background: 32 39 51;
  --color-background-alt: 18 26 39;
  --color-background-alt2: 47 52 61;
  --color-background-alt3: 48 57 70;
  --color-background-alt4: 18 26 39;

  --color-primary-100: 29 46 99;
  --color-primary-300: 26 65 172;
  --color-primary-600: 101 171 255;
  --color-primary-700: 170 195 239;

  --color-secondary-100: 48 57 70;
  --color-secondary-300: 82 91 106;
  --color-secondary-500: 121 128 142;
  --color-secondary-600: 143 152 166;
  --color-secondary-700: 158 167 181;

  --color-success-100: 8 81 15;
  --color-success-600: 107 241 120;
  --color-success-700: 213 243 216;

  --color-danger-100: 149 27 42;
  --color-danger-600: 255 78 99;
  --color-danger-700: 255 236 239;

  --color-warning-100: 142 64 0;
  --color-warning-600: 255 191 0;
  --color-warning-700: 255 244 212;

  --color-info-100: 13 36 123;
  --color-info-600: 121 161 233;
  --color-info-700: 219 229 246;

  --color-notification-100: 117 37 83;
  --color-notification-600: 255 143 208;

  --color-text-main: 243 246 249;
  --color-text-muted: 136 152 181;
  --color-text-contrast: 18 26 39;
  --color-text-alt2: 255 255 255;
  --color-text-code: 255 143 208;

  --color-hover-default: rgb(170 195 239 / 0.1);
  --color-hover-contrast: rgb(0 0 0 / 0.15);

  --color-marketing-logo: 255 255 255;
  --color-bw-blue: 23 93 220;

  --tw-ring-offset-color: #1f242e;

  --color-illustration-outline: 23 93 220;
  --color-illustration-bg-primary: 170 195 239;
  --color-illustration-bg-secondary: 121 161 233;
  --color-illustration-bg-tertiary: 243 246 249;
  --color-illustration-tertiary: 255 191 0;
  --color-illustration-logo: 255 255 255;
}

@layer components {
  /**
  * tw-break-words does not work with table cells:
  * https://github.com/tailwindlabs/tailwindcss/issues/835
  */
  td.tw-break-words {
    overflow-wrap: anywhere;
  }

  /**
  * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
  * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
  */
  summary.tw-list-none::marker,
  summary.tw-list-none::-webkit-details-marker {
    display: none;
  }

  /**
  * Arbitrary values can't be used with `text-align`:
  * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
  */
  .tw-text-unset {
    text-align: unset;
  }

  /**
  * Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
  * When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.
  * CL-483
  */
  .cdk-drag-preview,
  .cdk-overlay-container,
  .cdk-global-overlay-wrapper,
  .cdk-overlay-connected-position-bounding-box,
  .cdk-overlay-backdrop,
  .cdk-overlay-pane {
    z-index: 2000 !important;
  }

  .cdk-global-scrollblock {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
}