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

@import "./reset.css";

:root {
  --color-transparent-hover: rgb(0 0 0 / 0.03);

  --color-background: 255 255 255;
  --color-background-alt: 246 247 249;
  --color-background-alt2: 23 92 219;
  --color-background-alt3: 18 82 163;
  --color-background-alt4: 13 60 119;

  --color-primary-100: 200 217 249;
  --color-primary-300: 107 154 240;
  --color-primary-500: 23 93 220;
  --color-primary-600: 20 82 193;
  --color-primary-700: 14 55 129;

  --color-secondary-100: 230 233 239;
  --color-secondary-300: 168 179 200;
  --color-secondary-500: 96 114 150;
  --color-secondary-600: 83 99 131;
  --color-secondary-700: 63 75 99;

  --color-info-100: 182 244 247;
  --color-info-600: 16 148 157;
  --color-info-700: 12 105 111;

  --color-warning-100: 255 229 190;
  --color-warning-600: 214 129 0;
  --color-warning-700: 138 82 0;

  --color-danger-100: 255 226 229;
  --color-danger-600: 184 0 23;
  --color-danger-700: 133 0 17;

  --color-success-100: 186 248 192;
  --color-success-600: 12 130 24;
  --color-success-700: 8 84 15;

  --color-text-main: 27 32 41;
  --color-text-muted: 96 114 150;
  --color-text-contrast: 255 255 255;
  --color-text-alt2: 255 255 255;
  --color-text-code: 192 17 118;
  --color-text-headers: 2 15 102;

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

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

.theme_dark {
  --color-transparent-hover: rgb(255 255 255 / 0.12);

  --color-background: 32 39 51;
  --color-background-alt: 18 26 39;
  --color-background-alt2: 47 52 61;
  --color-background-alt3: 47 52 61;
  --color-background-alt4: 16 18 21;

  --color-primary-100: 8 31 73;
  --color-primary-300: 19 71 165;
  --color-primary-500: 54 117 232;
  --color-primary-600: 99 148 237;
  --color-primary-700: 145 180 242;

  --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: 7 64 13;
  --color-success-600: 107 241 120;
  --color-success-700: 152 245 161;

  --color-danger-100: 82 0 10;
  --color-danger-600: 255 82 103;
  --color-danger-700: 255 133 148;

  --color-warning-100: 87 52 0;
  --color-warning-600: 255 187 87;
  --color-warning-700: 255 207 138;

  --color-info-100: 7 61 65;
  --color-info-600: 89 228 238;
  --color-info-700: 135 236 242;

  --color-text-main: 226 227 228;
  --color-text-muted: 143 152 166;
  --color-text-contrast: 18 26 39;
  --color-text-alt2: 255 255 255;
  --color-text-code: 240 141 199;
  --color-text-headers: 226 227 228;

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

.theme_nord {
  --color-transparent-hover: rgb(255 255 255 / 0.12);

  --color-background: 67 76 94;
  --color-background-alt: 59 66 82;
  --color-background-alt2: 76 86 106;
  --color-background-alt3: 76 86 106;
  --color-background-alt4: 67 76 94;

  --color-primary-300: 108 153 166;
  --color-primary-600: 136 192 208;
  --color-primary-700: 160 224 242;

  --color-secondary-100: 76 86 106;
  --color-secondary-300: 94 105 125;
  --color-secondary-600: 216 222 233;
  --color-secondary-700: 255 255 255;

  --color-success-600: 163 190 140;
  --color-success-700: 144 170 122;

  --color-danger-600: 228 129 139;
  --color-danger-700: 191 97 106;

  --color-warning-600: 235 203 139;
  --color-warning-700: 210 181 121;

  --color-info-600: 129 161 193;
  --color-info-700: 94 129 172;

  --color-text-main: 229 233 240;
  --color-text-muted: 216 222 233;
  --color-text-contrast: 46 52 64;
  --color-text-alt2: 255 255 255;
  --color-text-code: 219 177 211;

  --tw-ring-offset-color: #434c5e;
}

.theme_solarized {
  --color-transparent-hover: rgb(255 255 255 / 0.12);

  --color-background: 0 43 54;
  --color-background-alt: 7 54 66;
  --color-background-alt2: 31 72 87;
  --color-background-alt3: 31 72 87;
  --color-background-alt4: 0 43 54;

  --color-primary-300: 42 161 152;
  --color-primary-600: 133 153 0;
  --color-primary-700: 192 203 123;

  --color-secondary-100: 31 72 87;
  --color-secondary-300: 101 123 131;
  --color-secondary-600: 131 148 150;
  --color-secondary-700: 238 232 213;

  --color-success-600: 133 153 0;
  --color-success-700: 192 203 123;

  --color-danger-600: 220 50 47;
  --color-danger-700: 223 135 134;

  --color-warning-600: 181 137 0;
  --color-warning-700: 220 189 92;

  --color-info-600: 133 153 0;
  --color-info-700: 192 203 123;

  --color-text-main: 253 246 227;
  --color-text-muted: 147 161 161;
  --color-text-contrast: 0 0 0;
  --color-text-alt2: 255 255 255;
  --color-text-code: 240 141 199;

  --tw-ring-offset-color: #002b36;
}

@import "./popover/popover.component.css";
@import "./search/search.component.css";

@import "./toast/toast.tokens.css";
@import "./toast/toastr.css";

/** 
 * 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 should appear above them.
 * Remove once bootstrap is removed from our codebase.
 * CL-XYZ
 */
.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;
}