mirror of
https://github.com/bitwarden/browser
synced 2026-01-31 00:33:33 +00:00
Use custom styles for autofill instead of theme styles
This commit is contained in:
Jeffrey Holland
@@ -63,6 +63,8 @@
|
||||
"test:watch": "jest --watch",
|
||||
"test:watch:all": "jest --watchAll",
|
||||
"test:clearCache": "jest --clear-cache",
|
||||
"update:dev:chrome": "./scripts/update-manifest-dev.sh"
|
||||
"update:dev:chrome": "./scripts/update-manifest-dev.sh",
|
||||
"compile:autofill-variables": "node ./scripts/compile-autofill-variables.js",
|
||||
"watch:autofill-variables": "nodemon --watch src/autofill/shared/styles/variables.scss --exec 'npm run compile:autofill-variables'"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
@import "../../../../../../../../libs/components/src/tw-theme-variables.css";
|
||||
|
||||
:root {
|
||||
--inline-menu-scrollbar-track: #fcfcfc;
|
||||
}
|
||||
|
||||
.theme_dark {
|
||||
--inline-menu-scrollbar-track: #2d323a;
|
||||
}
|
||||
@import "../../../../shared/styles/variables-export.css";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@@ -26,10 +18,10 @@ body {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: var(--autofill-font-family-sans-serif);
|
||||
font-weight: 400;
|
||||
color: rgb(var(--color-text-main));
|
||||
background-color: rgb(var(--color-background));
|
||||
color: var(--autofill-body-color);
|
||||
background-color: var(--autofill-background-color);
|
||||
}
|
||||
|
||||
body * {
|
||||
@@ -41,7 +33,8 @@ body * {
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
color: rgb(var(--color-text-main));
|
||||
color: var(--autofill-text-color);
|
||||
font-family: var(--autofill-font-family-sans-serif);
|
||||
}
|
||||
|
||||
.inline-menu-list-message.no-items,
|
||||
@@ -53,7 +46,7 @@ body * {
|
||||
.inline-menu-list-message.save-login:has(:focus-visible) {
|
||||
outline-width: 0.2rem;
|
||||
outline-style: solid;
|
||||
outline-color: rgb(var(--color-primary-700));
|
||||
outline-color: var(--autofill-focus-outline-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-button-container {
|
||||
@@ -62,12 +55,12 @@ body * {
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
border-top-width: 0.1rem;
|
||||
border-top-style: solid;
|
||||
background: rgb(var(--color-background));
|
||||
border-top-color: rgb(var(--color-secondary-300));
|
||||
background: var(--autofill-background-color);
|
||||
border-top-color: var(--autofill-border-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-button-container:hover {
|
||||
background: var(--color-hover-default);
|
||||
background: var(--autofill-background-offset-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-button {
|
||||
@@ -75,7 +68,7 @@ body * {
|
||||
align-content: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: var(--autofill-font-family-sans-serif);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
@@ -85,13 +78,13 @@ body * {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 0.4rem;
|
||||
color: rgb(var(--color-primary-600));
|
||||
color: var(--autofill-brand-primary);
|
||||
}
|
||||
|
||||
.inline-menu-list-button:focus:focus-visible {
|
||||
outline-width: 0.2rem;
|
||||
outline-style: solid;
|
||||
outline-color: rgb(var(--color-primary-700));
|
||||
outline-color: var(--autofill-focus-outline-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-button svg {
|
||||
@@ -101,7 +94,7 @@ body * {
|
||||
}
|
||||
|
||||
.inline-menu-list-button svg path {
|
||||
fill: rgb(var(--color-primary-600)) !important;
|
||||
fill: var(--autofill-brand-primary) !important;
|
||||
}
|
||||
|
||||
.unlock-button svg {
|
||||
@@ -122,8 +115,8 @@ body * {
|
||||
max-height: 18rem;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(var(--color-secondary-300)) var(--inline-menu-scrollbar-track);
|
||||
border-right-color: rgb(var(--color-secondary-300));
|
||||
scrollbar-color: var(--autofill-input-border-color) var(--autofill-scrollbar-track-color);
|
||||
border-right-color: var(--autofill-border-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions--scrollbar {
|
||||
@@ -156,14 +149,14 @@ body * {
|
||||
|
||||
.inline-menu-list-actions::-webkit-scrollbar-thumb {
|
||||
border-radius: 1rem;
|
||||
background-color: rgb(var(--color-secondary-300));
|
||||
background-color: var(--autofill-border-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-heading {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: var(--autofill-font-family-sans-serif);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3;
|
||||
@@ -172,14 +165,14 @@ body * {
|
||||
padding: 0.6rem 0.8rem;
|
||||
will-change: transform;
|
||||
border-bottom: 0.1rem solid;
|
||||
color: rgb(var(--color-text-main));
|
||||
background-color: rgb(var(--color-background));
|
||||
border-bottom-color: rgb(var(--color-background));
|
||||
color: var(--autofill-text-color);
|
||||
background-color: var(--autofill-background-color);
|
||||
border-bottom-color: var(--autofill-background-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-heading--bordered {
|
||||
transition: border-bottom-color 0.15s ease;
|
||||
border-bottom-color: rgb(var(--color-secondary-300));
|
||||
border-bottom-color: var(--autofill-border-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-container--with-new-item-button .inline-menu-list-actions {
|
||||
@@ -195,11 +188,11 @@ body * {
|
||||
.inline-menu-list-actions-item:not(:last-child) {
|
||||
border-bottom-width: 0.1rem;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgb(var(--color-secondary-300));
|
||||
border-bottom-color: var(--autofill-border-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item:hover {
|
||||
background: var(--color-hover-default);
|
||||
background: var(--autofill-background-offset-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .cipher-container {
|
||||
@@ -214,7 +207,7 @@ body * {
|
||||
.inline-menu-list-actions-item .cipher-container:has(:focus-visible):not(.remove-outline) {
|
||||
outline-width: 0.2rem;
|
||||
outline-style: solid;
|
||||
outline-color: rgb(var(--color-primary-700));
|
||||
outline-color: var(--autofill-focus-outline-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .fill-cipher-button,
|
||||
@@ -249,11 +242,11 @@ body * {
|
||||
.inline-menu-list-actions-item .view-cipher-button:focus:focus-visible {
|
||||
outline-width: 0.2rem;
|
||||
outline-style: solid;
|
||||
outline-color: rgb(var(--color-primary-700));
|
||||
outline-color: var(--autofill-focus-outline-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .view-cipher-button svg path {
|
||||
fill: rgb(var(--color-primary-600)) !important;
|
||||
fill: var(--autofill-brand-primary) !important;
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .cipher-icon {
|
||||
@@ -269,7 +262,7 @@ body * {
|
||||
background-size: 2.6rem;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
color: rgb(var(--color-primary-600));
|
||||
color: var(--autofill-brand-primary);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .cipher-icon svg {
|
||||
@@ -279,7 +272,7 @@ body * {
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .cipher-icon svg path {
|
||||
fill: rgb(var(--color-primary-600)) !important;
|
||||
fill: var(--autofill-brand-primary) !important;
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .cipher-icon.bwi {
|
||||
@@ -299,15 +292,15 @@ body * {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: rgb(var(--color-text-main));
|
||||
color: var(--autofill-text-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .totp-sec-span-danger {
|
||||
color: rgb(var(--color-danger-600));
|
||||
color: var(--autofill-password-special-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .circle-color {
|
||||
stroke: rgb(var(--color-primary-600));
|
||||
stroke: var(--autofill-brand-primary);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .circle-danger-color {
|
||||
@@ -319,7 +312,7 @@ body * {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.5;
|
||||
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: var(--autofill-font-family-sans-serif);
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -329,12 +322,12 @@ body * {
|
||||
|
||||
.inline-menu-list-actions-item .cipher-name {
|
||||
font-size: 1.6rem;
|
||||
color: rgb(var(--color-text-main));
|
||||
color: var(--autofill-text-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .cipher-subtitle {
|
||||
font-size: 1.4rem;
|
||||
color: rgb(var(--color-text-muted));
|
||||
color: var(--autofill-muted-text-color);
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .cipher-subtitle.masked-totp {
|
||||
@@ -353,11 +346,11 @@ body * {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.2rem;
|
||||
fill: rgb(var(--color-text-muted)) !important;
|
||||
fill: var(--autofill-muted-text-color) !important;
|
||||
}
|
||||
|
||||
.inline-menu-list-actions-item .cipher-subtitle--passkey svg path {
|
||||
fill: rgb(var(--color-text-muted)) !important;
|
||||
fill: var(--autofill-muted-text-color) !important;
|
||||
}
|
||||
|
||||
@keyframes bwi-spin {
|
||||
@@ -378,7 +371,7 @@ body * {
|
||||
padding: 1rem 0.8rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: rgb(var(--color-secondary-500));
|
||||
color: var(--autofill-muted-blue);
|
||||
}
|
||||
|
||||
.passkey-authenticating-loader svg {
|
||||
@@ -387,7 +380,7 @@ body * {
|
||||
}
|
||||
|
||||
.passkey-authenticating-loader svg path {
|
||||
fill: rgb(var(--color-secondary-500)) !important;
|
||||
fill: var(--autofill-muted-blue) !important;
|
||||
}
|
||||
|
||||
/* Password generator styles */
|
||||
@@ -406,13 +399,13 @@ body * {
|
||||
}
|
||||
|
||||
.password-generator-actions:hover {
|
||||
background: var(--color-hover-default);
|
||||
background: var(--autofill-background-offset-color);
|
||||
}
|
||||
|
||||
.password-generator-actions:has(:focus-visible):not(.remove-outline) {
|
||||
outline-width: 0.2rem;
|
||||
outline-style: solid;
|
||||
outline-color: rgb(var(--color-primary-700));
|
||||
outline-color: rgb(var(--autofill-focus-outline-color));
|
||||
}
|
||||
|
||||
.password-generator-actions .inline-menu-list-action {
|
||||
@@ -421,11 +414,11 @@ body * {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
color: rgb(var(--color-text-main));
|
||||
color: var(--autofill-text-color);
|
||||
}
|
||||
|
||||
.password-generator-actions .inline-menu-list-action svg path {
|
||||
fill: rgb(var(--color-primary-600)) !important;
|
||||
fill: var(--autofill-brand-primary) !important;
|
||||
}
|
||||
|
||||
.password-generator-actions .fill-generated-password-button {
|
||||
@@ -458,7 +451,7 @@ body * {
|
||||
.password-generator-actions .refresh-generated-password-button:focus:focus-visible {
|
||||
outline-width: 0.2rem;
|
||||
outline-style: solid;
|
||||
outline-color: rgb(var(--color-primary-700));
|
||||
outline-color: var(--autofill-focus-outline-color);
|
||||
}
|
||||
|
||||
.password-generator-actions .refresh-generated-password-button svg {
|
||||
@@ -466,7 +459,7 @@ body * {
|
||||
}
|
||||
|
||||
.password-generator-actions .refresh-generated-password-button svg path {
|
||||
fill: rgb(var(--color-primary-600)) !important;
|
||||
fill: var(--autofill-brand-primary) !important;
|
||||
}
|
||||
|
||||
.password-generator-actions .password-generator-content {
|
||||
@@ -477,13 +470,13 @@ body * {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.1rem;
|
||||
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: var(--autofill-font-family-sans-serif);
|
||||
}
|
||||
|
||||
.password-generator-actions .colorized-password {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.3;
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-family: var(--autofill-font-family-source-code-pro);
|
||||
letter-spacing: 0.05rem;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
@@ -495,9 +488,9 @@ body * {
|
||||
}
|
||||
|
||||
.password-generator-actions .colorized-password .password-special {
|
||||
color: rgb(var(--color-danger-600)) !important;
|
||||
color: var(--autofill-password-special-color) !important;
|
||||
}
|
||||
|
||||
.password-generator-actions .colorized-password .password-number {
|
||||
color: rgb(var(--color-primary-700)) !important;
|
||||
color: var(--autofill-password-number-color) !important;
|
||||
}
|
||||
|
||||
67
apps/browser/src/autofill/shared/styles/variables-export.css
Normal file
67
apps/browser/src/autofill/shared/styles/variables-export.css
Normal file
@@ -0,0 +1,67 @@
|
||||
:root {
|
||||
--autofill-font-family-sans-serif: Inter, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
--autofill-font-family-source-code-pro: Source Code Pro, monospace;
|
||||
--autofill-font-size-base: 14px;
|
||||
--autofill-text-color-light: #212529;
|
||||
--autofill-muted-text-color-light: #6c747c;
|
||||
--autofill-background-color-light: #ffffff;
|
||||
--autofill-background-offset-color-light: #f0f0f0;
|
||||
--autofill-body-color-light: #cfd4db;
|
||||
--autofill-border-color-light: #ced4dc;
|
||||
--autofill-brand-primary-light: #175ddc;
|
||||
--autofill-input-border-color-light: #d6d6d6;
|
||||
--autofill-password-special-color-light: #b80017;
|
||||
--autofill-password-number-color-light: #1452c1;
|
||||
--autofill-success-color-light: #017e45;
|
||||
--autofill-error-color-light: #c83522;
|
||||
--autofill-focus-outline-color-light: #1252a3;
|
||||
--autofill-scrollbar-track-light: #fcfcfc;
|
||||
--autofill-text-color-dark: #ffffff;
|
||||
--autofill-muted-text-color-dark: #bac0ce;
|
||||
--autofill-background-color-dark: #2f343d;
|
||||
--autofill-background-offset-color-dark: #29252e;
|
||||
--autofill-body-color-dark: #4d525e;
|
||||
--autofill-border-color-dark: #4c525f;
|
||||
--autofill-brand-primary-dark: #6f9df1;
|
||||
--autofill-input-border-color-dark: #4c525f;
|
||||
--autofill-password-special-color-dark: #ff8d85;
|
||||
--autofill-password-number-color-dark: #6f9df1;
|
||||
--autofill-success-color-dark: #8db89b;
|
||||
--autofill-error-color-dark: #ee9792;
|
||||
--autofill-focus-outline-color-dark: #4d8fe6;
|
||||
--autofill-scrollbar-track-dark: #2d323a;
|
||||
--autofill-muted-blue: #5a6d91;
|
||||
--autofill-muted-grey: #bac0ce;
|
||||
--autofill-border-radius: 3px;
|
||||
--autofill-text-color: var(--autofill-text-color-light);
|
||||
--autofill-muted-text-color: var(--autofill-muted-text-color-light);
|
||||
--autofill-background-color: var(--autofill-background-color-light);
|
||||
--autofill-background-offset-color: var(--autofill-background-offset-color-light);
|
||||
--autofill-body-color: var(--autofill-body-color-light);
|
||||
--autofill-border-color: var(--autofill-border-color-light);
|
||||
--autofill-brand-primary: var(--autofill-brand-primary-light);
|
||||
--autofill-input-border-color: var(--autofill-input-border-color-light);
|
||||
--autofill-password-special-color: var(--autofill-password-special-color-light);
|
||||
--autofill-password-number-color: var(--autofill-password-number-color-light);
|
||||
--autofill-success-color: var(--autofill-success-color-light);
|
||||
--autofill-error-color: var(--autofill-error-color-light);
|
||||
--autofill-focus-outline-color: var(--autofill-focus-outline-color-light);
|
||||
--autofill-scrollbar-track: var(--autofill-scrollbar-track-light);
|
||||
}
|
||||
|
||||
.theme_dark {
|
||||
--autofill-text-color: var(--autofill-text-color-dark);
|
||||
--autofill-muted-text-color: var(--autofill-muted-text-color-dark);
|
||||
--autofill-background-color: var(--autofill-background-color-dark);
|
||||
--autofill-background-offset-color: var(--autofill-background-offset-color-dark);
|
||||
--autofill-body-color: var(--autofill-body-color-dark);
|
||||
--autofill-border-color: var(--autofill-border-color-dark);
|
||||
--autofill-brand-primary: var(--autofill-brand-primary-dark);
|
||||
--autofill-input-border-color: var(--autofill-input-border-color-dark);
|
||||
--autofill-password-special-color: var(--autofill-password-special-color-dark);
|
||||
--autofill-password-number-color: var(--autofill-password-number-color-dark);
|
||||
--autofill-success-color: var(--autofill-success-color-dark);
|
||||
--autofill-error-color: var(--autofill-error-color-dark);
|
||||
--autofill-focus-outline-color: var(--autofill-focus-outline-color-dark);
|
||||
--autofill-scrollbar-track: var(--autofill-scrollbar-track-dark);
|
||||
}
|
||||
@@ -1,145 +0,0 @@
|
||||
/**
|
||||
* Shared Theme Variables
|
||||
*
|
||||
* CSS custom properties for light and dark themes.
|
||||
* This file contains only variables without any Tailwind directives,
|
||||
* allowing it to be imported by any CSS file.
|
||||
*
|
||||
* Usage:
|
||||
* - For Tailwind components: imported by tw-theme.css
|
||||
* - For standalone CSS (e.g., inline menu): import directly
|
||||
*
|
||||
* Note: Color values are space-separated RGB values (e.g., "255 255 255")
|
||||
* to support Tailwind's opacity modifier syntax. When using in plain CSS,
|
||||
* wrap with rgb(): background-color: rgb(var(--color-background));
|
||||
*/
|
||||
|
||||
: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: 47 52 61;
|
||||
--color-background-alt: 18 26 39;
|
||||
--color-background-alt2: 32 39 51;
|
||||
--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(0 0 0 / 0.15);
|
||||
--color-hover-contrast: rgb(170 195 239 / 0.1);
|
||||
|
||||
--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;
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
@import "theme.css";
|
||||
@import "tw-theme-variables.css";
|
||||
@import "@angular/cdk/a11y-prebuilt.css";
|
||||
@import "@angular/cdk/text-field-prebuilt.css";
|
||||
@import "./reset.css";
|
||||
@@ -13,6 +12,136 @@
|
||||
@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: 47 52 61;
|
||||
--color-background-alt: 18 26 39;
|
||||
--color-background-alt2: 32 39 51;
|
||||
--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(0 0 0 / 0.15);
|
||||
--color-hover-contrast: rgb(170 195 239 / 0.1);
|
||||
|
||||
--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:
|
||||
|
||||
Reference in New Issue
Block a user