mirror of
https://github.com/bitwarden/browser
synced 2026-01-28 07:13:29 +00:00
2da44bb300
* add new color palette to theme and tailwind config * updated docs color names * remove safelist changes * add missing accent colors to docs * updated color mappings * combined docs in colors.mdx and reference in Claude.md * add variables for white and black * updated docs * updated list rendering style * more specific docs instructions * revert to simpler colors docs reference * remove changes to claude.md * use rgb color variables to compose semantic
605 lines
20 KiB
CSS
605 lines
20 KiB
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 {
|
|
/* ========================================
|
|
* LEGACY COLORS (RGB format)
|
|
* These are the original colors used throughout the app.
|
|
* Use these for existing components until migration is complete.
|
|
* ======================================== */
|
|
|
|
--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;
|
|
|
|
/* ========================================
|
|
* NEW COLOR PALETTE (Hex format)
|
|
* These colors are from the new Figma design system.
|
|
* Use these for new components and features.
|
|
* Format: --color-{family}-{shade} where shade ranges from 050 to 950
|
|
* ======================================== */
|
|
|
|
/* Brand Colors */
|
|
--color-brand-050: #eef6ff;
|
|
--color-brand-100: #dbeafe;
|
|
--color-brand-200: #bedbff;
|
|
--color-brand-300: #8ec5ff;
|
|
--color-brand-400: #6baefa;
|
|
--color-brand-500: #418bfb;
|
|
--color-brand-600: #2a70f4;
|
|
--color-brand-700: #175ddc;
|
|
--color-brand-800: #0d43af;
|
|
--color-brand-900: #0c3276;
|
|
--color-brand-950: #162455;
|
|
|
|
/* Gray Colors */
|
|
--color-gray-050: #f9fafb;
|
|
--color-gray-100: #f3f4f6;
|
|
--color-gray-200: #e5e7eb;
|
|
--color-gray-300: #d1d5dc;
|
|
--color-gray-400: #99a1af;
|
|
--color-gray-500: #6a7282;
|
|
--color-gray-600: #4a5565;
|
|
--color-gray-700: #333e4f;
|
|
--color-gray-800: #1e2939;
|
|
--color-gray-900: #101828;
|
|
--color-gray-950: #070b18;
|
|
--color-gray-950-rgb: 7, 11, 24;
|
|
|
|
/* Red Colors */
|
|
--color-red-050: #fef2f2;
|
|
--color-red-100: #ffe2e2;
|
|
--color-red-200: #ffc9c9;
|
|
--color-red-300: #ffa2a2;
|
|
--color-red-400: #ff6467;
|
|
--color-red-500: #fb2c36;
|
|
--color-red-600: #e7000b;
|
|
--color-red-700: #c10007;
|
|
--color-red-800: #9f0712;
|
|
--color-red-900: #791112;
|
|
--color-red-950: #460809;
|
|
|
|
/* Orange Colors */
|
|
--color-orange-050: #fff8f1;
|
|
--color-orange-100: #feecdc;
|
|
--color-orange-200: #fcd9bd;
|
|
--color-orange-300: #fdba8c;
|
|
--color-orange-400: #ff8a4c;
|
|
--color-orange-500: #ff5a1f;
|
|
--color-orange-600: #d03801;
|
|
--color-orange-700: #b43403;
|
|
--color-orange-800: #8a2c0d;
|
|
--color-orange-900: #70240b;
|
|
--color-orange-950: #441306;
|
|
|
|
/* Yellow Colors */
|
|
--color-yellow-050: #fefce8;
|
|
--color-yellow-100: #fef9c2;
|
|
--color-yellow-200: #fff085;
|
|
--color-yellow-300: #ffdf20;
|
|
--color-yellow-400: #fdc700;
|
|
--color-yellow-500: #f0b100;
|
|
--color-yellow-600: #d08700;
|
|
--color-yellow-700: #a65f00;
|
|
--color-yellow-800: #894b00;
|
|
--color-yellow-900: #733e0a;
|
|
--color-yellow-950: #432004;
|
|
|
|
/* Green Colors */
|
|
--color-green-050: #f0fdf4;
|
|
--color-green-100: #dcfce7;
|
|
--color-green-200: #b9f8cf;
|
|
--color-green-300: #7bf1a8;
|
|
--color-green-400: #18dc7a;
|
|
--color-green-500: #0abf52;
|
|
--color-green-600: #00a63e;
|
|
--color-green-700: #008236;
|
|
--color-green-800: #016630;
|
|
--color-green-900: #0d542b;
|
|
--color-green-950: #032e15;
|
|
|
|
/* Pink Colors */
|
|
--color-pink-050: #fdf2f8;
|
|
--color-pink-100: #fce7f3;
|
|
--color-pink-200: #fccee8;
|
|
--color-pink-300: #fda5d5;
|
|
--color-pink-400: #fb64b6;
|
|
--color-pink-500: #f6339a;
|
|
--color-pink-600: #e60076;
|
|
--color-pink-700: #c6005c;
|
|
--color-pink-800: #a3004c;
|
|
--color-pink-900: #861043;
|
|
--color-pink-950: #510424;
|
|
|
|
/* Coral Colors */
|
|
--color-coral-050: #fff2f0;
|
|
--color-coral-100: #ffe0dc;
|
|
--color-coral-200: #ffc1b9;
|
|
--color-coral-300: #ff9585;
|
|
--color-coral-400: #ff6550;
|
|
--color-coral-500: #ff4026;
|
|
--color-coral-600: #e11f05;
|
|
--color-coral-700: #c71800;
|
|
--color-coral-800: #a81400;
|
|
--color-coral-900: #7e0f00;
|
|
--color-coral-950: #4d0900;
|
|
|
|
/* Teal Colors */
|
|
--color-teal-050: #ecfeff;
|
|
--color-teal-100: #cefafe;
|
|
--color-teal-200: #a2f4fd;
|
|
--color-teal-300: #70ecf5;
|
|
--color-teal-400: #2cdde9;
|
|
--color-teal-500: #00c5db;
|
|
--color-teal-600: #009cb8;
|
|
--color-teal-700: #007c95;
|
|
--color-teal-800: #006278;
|
|
--color-teal-900: #0f495c;
|
|
--color-teal-950: #042e3e;
|
|
|
|
/* Purple Colors */
|
|
--color-purple-050: #faf5ff;
|
|
--color-purple-100: #f3e8ff;
|
|
--color-purple-200: #e9d4ff;
|
|
--color-purple-300: #dab2ff;
|
|
--color-purple-400: #c27aff;
|
|
--color-purple-500: #ad46ff;
|
|
--color-purple-600: #9810fa;
|
|
--color-purple-700: #8200db;
|
|
--color-purple-800: #6e11b0;
|
|
--color-purple-900: #59168b;
|
|
--color-purple-950: #3c0366;
|
|
|
|
/* White and Black */
|
|
--color-white: #ffffff;
|
|
--color-white-rgb: 255, 255, 255;
|
|
--color-black: #000000;
|
|
|
|
/* ========================================
|
|
* SEMANTIC FOREGROUND COLORS (Light Mode)
|
|
* These are the tokens that should be exposed to Tailwind
|
|
* They reference the primitive colors above
|
|
* ======================================== */
|
|
|
|
/* Neutral Foreground */
|
|
--color-fg-white: var(--color-white);
|
|
--color-fg-dark: var(--color-gray-900);
|
|
--color-fg-contrast: var(--color-white);
|
|
--color-fg-heading: var(--color-gray-900);
|
|
--color-fg-body: var(--color-gray-600);
|
|
--color-fg-body-subtle: var(--color-gray-500);
|
|
--color-fg-disabled: var(--color-gray-400);
|
|
|
|
/* Brand Foreground */
|
|
--color-fg-brand-soft: var(--color-brand-200);
|
|
--color-fg-brand: var(--color-brand-700);
|
|
--color-fg-brand-strong: var(--color-brand-900);
|
|
|
|
/* Status Foreground */
|
|
--color-fg-success: var(--color-green-700);
|
|
--color-fg-success-strong: var(--color-green-900);
|
|
--color-fg-danger: var(--color-red-700);
|
|
--color-fg-danger-strong: var(--color-red-900);
|
|
--color-fg-warning: var(--color-orange-600);
|
|
--color-fg-warning-strong: var(--color-orange-900);
|
|
--color-fg-sensitive: var(--color-pink-600);
|
|
|
|
/* Accent Foreground */
|
|
--color-fg-accent-primary-soft: var(--color-teal-200);
|
|
--color-fg-accent-primary: var(--color-teal-400);
|
|
--color-fg-accent-primary-strong: var(--color-teal-800);
|
|
--color-fg-accent-secondary-soft: var(--color-coral-200);
|
|
--color-fg-accent-secondary: var(--color-coral-400);
|
|
--color-fg-accent-secondary-strong: var(--color-coral-900);
|
|
--color-fg-accent-tertiary-soft: var(--color-purple-200);
|
|
--color-fg-accent-tertiary: var(--color-purple-700);
|
|
--color-fg-accent-tertiary-strong: var(--color-purple-900);
|
|
|
|
/* ========================================
|
|
* SEMANTIC BACKGROUND COLORS (Light Mode)
|
|
* ======================================== */
|
|
|
|
/* Neutral Background */
|
|
--color-bg-white: var(--color-white);
|
|
--color-bg-dark: var(--color-gray-800);
|
|
--color-bg-contrast: var(--color-gray-800);
|
|
--color-bg-contrast-strong: var(--color-gray-950);
|
|
--color-bg-primary: var(--color-white);
|
|
--color-bg-secondary: var(--color-gray-050);
|
|
--color-bg-tertiary: var(--color-gray-050);
|
|
--color-bg-quaternary: var(--color-gray-200);
|
|
--color-bg-gray: var(--color-gray-300);
|
|
--color-bg-disabled: var(--color-gray-100);
|
|
|
|
/* Brand Background */
|
|
--color-bg-brand-softer: var(--color-brand-050);
|
|
--color-bg-brand-soft: var(--color-brand-100);
|
|
--color-bg-brand-medium: var(--color-brand-200);
|
|
--color-bg-brand: var(--color-brand-700);
|
|
--color-bg-brand-strong: var(--color-brand-800);
|
|
|
|
/* Status Background */
|
|
--color-bg-success-soft: var(--color-green-050);
|
|
--color-bg-success-medium: var(--color-green-100);
|
|
--color-bg-success: var(--color-green-700);
|
|
--color-bg-success-strong: var(--color-green-800);
|
|
--color-bg-danger-soft: var(--color-red-050);
|
|
--color-bg-danger-medium: var(--color-red-100);
|
|
--color-bg-danger: var(--color-red-700);
|
|
--color-bg-danger-strong: var(--color-red-800);
|
|
--color-bg-warning-soft: var(--color-orange-050);
|
|
--color-bg-warning-medium: var(--color-orange-100);
|
|
--color-bg-warning: var(--color-orange-600);
|
|
--color-bg-warning-strong: var(--color-orange-700);
|
|
|
|
/* Accent Background */
|
|
--color-bg-accent-primary-soft: var(--color-teal-050);
|
|
--color-bg-accent-primary-medium: var(--color-teal-100);
|
|
--color-bg-accent-primary: var(--color-teal-400);
|
|
--color-bg-accent-secondary-soft: var(--color-coral-050);
|
|
--color-bg-accent-secondary-medium: var(--color-coral-100);
|
|
--color-bg-accent-secondary: var(--color-coral-400);
|
|
--color-bg-accent-tertiary-soft: var(--color-purple-050);
|
|
--color-bg-accent-tertiary-medium: var(--color-purple-100);
|
|
--color-bg-accent-tertiary: var(--color-purple-600);
|
|
|
|
/* Hover & Overlay */
|
|
--color-bg-hover: rgba(var(--color-gray-950-rgb), 0.05);
|
|
--color-bg-overlay: rgba(var(--color-gray-950-rgb), 0.3);
|
|
|
|
/* ========================================
|
|
* SEMANTIC BORDER COLORS (Light Mode)
|
|
* ======================================== */
|
|
|
|
/* Neutral Border */
|
|
--color-border-muted: var(--color-gray-050);
|
|
--color-border-light: var(--color-gray-100);
|
|
--color-border-base: var(--color-gray-200);
|
|
--color-border-strong: var(--color-gray-800);
|
|
--color-border-buffer: var(--color-white);
|
|
|
|
/* Brand Border */
|
|
--color-border-brand-soft: var(--color-brand-200);
|
|
--color-border-brand: var(--color-brand-700);
|
|
--color-border-brand-strong: var(--color-brand-900);
|
|
|
|
/* Status Border */
|
|
--color-border-success-soft: var(--color-green-200);
|
|
--color-border-success: var(--color-green-700);
|
|
--color-border-success-strong: var(--color-green-900);
|
|
--color-border-danger-soft: var(--color-red-200);
|
|
--color-border-danger: var(--color-red-700);
|
|
--color-border-danger-strong: var(--color-red-900);
|
|
--color-border-warning-soft: var(--color-orange-200);
|
|
--color-border-warning: var(--color-orange-600);
|
|
--color-border-warning-strong: var(--color-orange-900);
|
|
|
|
/* Accent Border */
|
|
--color-border-accent-primary-soft: var(--color-teal-200);
|
|
--color-border-accent-primary: var(--color-teal-600);
|
|
--color-border-accent-secondary-soft: var(--color-coral-200);
|
|
--color-border-accent-secondary: var(--color-coral-600);
|
|
--color-border-accent-tertiary-soft: var(--color-purple-200);
|
|
--color-border-accent-tertiary: var(--color-purple-600);
|
|
|
|
/* Focus Border */
|
|
--color-border-focus: var(--color-black);
|
|
}
|
|
|
|
.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;
|
|
|
|
/* ========================================
|
|
* SEMANTIC FOREGROUND COLORS (Dark Mode Overrides)
|
|
* ======================================== */
|
|
|
|
/* Neutral Foreground */
|
|
--color-fg-contrast: var(--color-gray-900);
|
|
--color-fg-heading: var(--color-gray-050);
|
|
--color-fg-body: var(--color-gray-200);
|
|
--color-fg-body-subtle: var(--color-gray-400);
|
|
--color-fg-disabled: var(--color-gray-600);
|
|
|
|
/* Brand Foreground */
|
|
--color-fg-brand-soft: var(--color-brand-500);
|
|
--color-fg-brand: var(--color-brand-400);
|
|
--color-fg-brand-strong: var(--color-brand-200);
|
|
|
|
/* Status Foreground */
|
|
--color-fg-success: var(--color-green-400);
|
|
--color-fg-success-strong: var(--color-green-100);
|
|
--color-fg-danger: var(--color-red-400);
|
|
--color-fg-danger-strong: var(--color-red-100);
|
|
--color-fg-warning: var(--color-orange-400);
|
|
--color-fg-warning-strong: var(--color-orange-100);
|
|
--color-fg-sensitive: var(--color-pink-300);
|
|
|
|
/* Accent Foreground */
|
|
--color-fg-accent-primary-soft: var(--color-teal-400);
|
|
--color-fg-accent-primary: var(--color-teal-300);
|
|
--color-fg-accent-primary-strong: var(--color-teal-100);
|
|
--color-fg-accent-secondary-soft: var(--color-coral-500);
|
|
--color-fg-accent-secondary: var(--color-coral-400);
|
|
--color-fg-accent-secondary-strong: var(--color-coral-100);
|
|
--color-fg-accent-tertiary-soft: var(--color-purple-500);
|
|
--color-fg-accent-tertiary: var(--color-purple-400);
|
|
--color-fg-accent-tertiary-strong: var(--color-purple-100);
|
|
|
|
/* ========================================
|
|
* SEMANTIC BACKGROUND COLORS (Dark Mode Overrides)
|
|
* ======================================== */
|
|
|
|
/* Neutral Background */
|
|
--color-bg-contrast: var(--color-gray-050);
|
|
--color-bg-contrast-strong: var(--color-gray-050);
|
|
--color-bg-primary: var(--color-gray-900);
|
|
--color-bg-secondary: var(--color-gray-800);
|
|
--color-bg-tertiary: var(--color-gray-950);
|
|
--color-bg-quaternary: var(--color-gray-700);
|
|
--color-bg-gray: var(--color-gray-600);
|
|
--color-bg-disabled: var(--color-gray-950);
|
|
|
|
/* Brand Background */
|
|
--color-bg-brand-softer: var(--color-brand-950);
|
|
--color-bg-brand-soft: var(--color-brand-900);
|
|
--color-bg-brand-medium: var(--color-brand-800);
|
|
--color-bg-brand: var(--color-brand-400);
|
|
--color-bg-brand-strong: var(--color-brand-300);
|
|
|
|
/* Status Background */
|
|
--color-bg-success-soft: var(--color-green-950);
|
|
--color-bg-success-medium: var(--color-green-900);
|
|
--color-bg-success: var(--color-green-400);
|
|
--color-bg-success-strong: var(--color-green-300);
|
|
--color-bg-danger-soft: var(--color-red-950);
|
|
--color-bg-danger-medium: var(--color-red-900);
|
|
--color-bg-danger: var(--color-red-400);
|
|
--color-bg-danger-strong: var(--color-red-300);
|
|
--color-bg-warning-soft: var(--color-orange-950);
|
|
--color-bg-warning-medium: var(--color-orange-900);
|
|
--color-bg-warning: var(--color-orange-400);
|
|
--color-bg-warning-strong: var(--color-orange-300);
|
|
|
|
/* Accent Background */
|
|
--color-bg-accent-primary-soft: var(--color-teal-950);
|
|
--color-bg-accent-primary-medium: var(--color-teal-900);
|
|
--color-bg-accent-primary: var(--color-teal-400);
|
|
--color-bg-accent-secondary-soft: var(--color-coral-950);
|
|
--color-bg-accent-secondary-medium: var(--color-coral-900);
|
|
--color-bg-accent-secondary: var(--color-coral-400);
|
|
--color-bg-accent-tertiary-soft: var(--color-purple-950);
|
|
--color-bg-accent-tertiary-medium: var(--color-purple-900);
|
|
--color-bg-accent-tertiary: var(--color-purple-600);
|
|
|
|
/* Hover & Overlay */
|
|
--color-bg-hover: rgba(var(--color-white-rgb), 0.05);
|
|
--color-bg-overlay: rgba(var(--color-gray-950-rgb), 0.85);
|
|
|
|
/* ========================================
|
|
* SEMANTIC BORDER COLORS (Dark Mode Overrides)
|
|
* ======================================== */
|
|
|
|
/* Neutral Border */
|
|
--color-border-muted: var(--color-gray-900);
|
|
--color-border-light: var(--color-gray-800);
|
|
--color-border-base: var(--color-gray-700);
|
|
--color-border-strong: var(--color-gray-400);
|
|
--color-border-buffer: var(--color-gray-950);
|
|
|
|
/* Brand Border */
|
|
--color-border-brand-soft: var(--color-brand-800);
|
|
--color-border-brand: var(--color-brand-400);
|
|
--color-border-brand-strong: var(--color-brand-200);
|
|
|
|
/* Status Border */
|
|
--color-border-success-soft: var(--color-green-800);
|
|
--color-border-success: var(--color-green-400);
|
|
--color-border-success-strong: var(--color-green-200);
|
|
--color-border-danger-soft: var(--color-red-800);
|
|
--color-border-danger: var(--color-red-400);
|
|
--color-border-danger-strong: var(--color-red-200);
|
|
--color-border-warning-soft: var(--color-orange-800);
|
|
--color-border-warning: var(--color-orange-400);
|
|
--color-border-warning-strong: var(--color-orange-200);
|
|
|
|
/* Accent Border */
|
|
--color-border-accent-primary-soft: var(--color-teal-800);
|
|
--color-border-accent-secondary-soft: var(--color-coral-800);
|
|
--color-border-accent-secondary: var(--color-coral-500);
|
|
--color-border-accent-tertiary-soft: var(--color-purple-800);
|
|
--color-border-accent-tertiary: var(--color-purple-500);
|
|
|
|
/* Focus Border */
|
|
--color-border-focus: var(--color-white);
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
/**
|
|
* tw-app-region-drag and tw-app-region-no-drag are used for Electron window dragging behavior
|
|
* These will replace direct -webkit-app-region usage as part of the migration to Tailwind CSS
|
|
*/
|
|
.tw-app-region-drag {
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
.tw-app-region-no-drag {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
}
|