bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-30 16:23:53 +00:00
Code Issues Releases Wiki Activity

Use centralized theme variables for colors

Browse Source
This commit is contained in:
Jeffrey Holland
2025-12-12 12:04:40 +01:00
parent c381f9cde1
commit 5e5861cbae
3 changed files with 205 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
apps/browser/src/autofill/overlay/inline-menu/pages/list/list.css
View File

@@ -1,3 +1,5 @@
@import "../../../../../../../../libs/components/src/tw-theme-variables.css";
* {
box-sizing: border-box;
}
@@ -18,16 +20,8 @@ body {
margin: 0;
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
}
.theme_light body {
color: #212529;
background-color: #ffffff;
}
.theme_dark body {
color: #ffffff;
background-color: #2f343d;
color: rgb(var(--color-text-main));
background-color: rgb(var(--color-background));
}
body * {
@@ -39,14 +33,7 @@ body * {
line-height: 1.5;
width: 100%;
padding: 0.8rem;
}
.theme_light .inline-menu-list-message {
color: #212529;
}
.theme_dark .inline-menu-list-message {
color: #ffffff;
color: rgb(var(--color-text-main));
}
.inline-menu-list-message.no-items,
@@ -58,16 +45,7 @@ body * {
.inline-menu-list-message.save-login:has(:focus-visible) {
outline-width: 0.2rem;
outline-style: solid;
}
.theme_light .inline-menu-list-message.no-items:has(:focus-visible),
.theme_light .inline-menu-list-message.save-login:has(:focus-visible) {
outline-color: #1252a3;
}
.theme_dark .inline-menu-list-message.no-items:has(:focus-visible),
.theme_dark .inline-menu-list-message.save-login:has(:focus-visible) {
outline-color: #5c9fee;
outline-color: rgb(var(--color-primary-700));
}
.inline-menu-list-button-container {
@@ -76,24 +54,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));
}
.theme_light .inline-menu-list-button-container {
background: #ffffff;
border-top-color: #ced4dc;
}
.theme_dark .inline-menu-list-button-container {
background: #2f343d;
border-top-color: #4c525f;
}
.theme_light .inline-menu-list-button-container:hover {
background: #f0f0f0;
}
.theme_dark .inline-menu-list-button-container:hover {
background: #292d35;
.inline-menu-list-button-container:hover {
background: var(--color-hover-default);
}
.inline-menu-list-button {
@@ -111,27 +77,13 @@ body * {
margin: 0;
cursor: pointer;
border-radius: 0.4rem;
}
.theme_light .inline-menu-list-button {
color: #175ddc;
}
.theme_dark .inline-menu-list-button {
color: #6f9df1;
color: rgb(var(--color-primary-600));
}
.inline-menu-list-button:focus:focus-visible {
outline-width: 0.2rem;
outline-style: solid;
}
.theme_light .inline-menu-list-button:focus:focus-visible {
outline-color: #1252a3;
}
.theme_dark .inline-menu-list-button:focus:focus-visible {
outline-color: #5c9fee;
outline-color: rgb(var(--color-primary-700));
}
.inline-menu-list-button svg {
@@ -140,12 +92,8 @@ body * {
margin-right: 0.8rem;
}
.theme_light .inline-menu-list-button svg path {
fill: #175ddc !important;
}
.theme_dark .inline-menu-list-button svg path {
fill: #6f9df1 !important;
.inline-menu-list-button svg path {
fill: rgb(var(--color-primary-600)) !important;
}
.unlock-button svg {
@@ -166,22 +114,14 @@ body * {
max-height: 18rem;
-ms-overflow-style: none;
scrollbar-width: thin;
scrollbar-color: rgb(var(--color-secondary-300)) rgb(var(--color-background-alt));
border-right-color: rgb(var(--color-secondary-300));
}
.inline-menu-list-actions--scrollbar {
overflow-y: scroll;
}
.theme_light .inline-menu-list-actions {
scrollbar-color: #ced4da #ededed;
border-right-color: #ced4dc;
}
.theme_dark .inline-menu-list-actions {
scrollbar-color: #4c525f #2d323a;
border-right-color: #4c525f;
}
.inline-menu-list-actions::-webkit-scrollbar {
width: 0.5rem;
background-color: transparent;
@@ -208,14 +148,7 @@ body * {
.inline-menu-list-actions::-webkit-scrollbar-thumb {
border-radius: 1rem;
}
.theme_light .inline-menu-list-actions::-webkit-scrollbar-thumb {
background-color: #ced4dc;
}
.theme_dark .inline-menu-list-actions::-webkit-scrollbar-thumb {
background-color: #4c525f;
background-color: rgb(var(--color-secondary-300));
}
.inline-menu-list-heading {
@@ -231,30 +164,14 @@ body * {
padding: 0.6rem 0.8rem;
will-change: transform;
border-bottom: 0.1rem solid;
}
.theme_light .inline-menu-list-heading {
color: #212529;
background-color: #ffffff;
border-bottom-color: #ffffff;
}
.theme_dark .inline-menu-list-heading {
color: #ffffff;
background-color: #2f343d;
border-bottom-color: #2f343d;
color: rgb(var(--color-text-main));
background-color: rgb(var(--color-background));
border-bottom-color: rgb(var(--color-background));
}
.inline-menu-list-heading--bordered {
transition: border-bottom-color 0.15s ease;
}
.theme_light .inline-menu-list-heading--bordered {
border-bottom-color: #ced4dc;
}
.theme_dark .inline-menu-list-heading--bordered {
border-bottom-color: #4c525f;
border-bottom-color: rgb(var(--color-secondary-300));
}
.inline-menu-list-container--with-new-item-button .inline-menu-list-actions {
@@ -270,22 +187,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));
}
.theme_light .inline-menu-list-actions-item:not(:last-child) {
border-bottom-color: #ced4dc;
}
.theme_dark .inline-menu-list-actions-item:not(:last-child) {
border-bottom-color: #4c525f;
}
.theme_light .inline-menu-list-actions-item:hover {
background: #f0f0f0;
}
.theme_dark .inline-menu-list-actions-item:hover {
background: #292d35;
.inline-menu-list-actions-item:hover {
background: var(--color-hover-default);
}
.inline-menu-list-actions-item .cipher-container {
@@ -300,18 +206,7 @@ body * {
.inline-menu-list-actions-item .cipher-container:has(:focus-visible):not(.remove-outline) {
outline-width: 0.2rem;
outline-style: solid;
}
.theme_light
.inline-menu-list-actions-item
.cipher-container:has(:focus-visible):not(.remove-outline) {
outline-color: #1252a3;
}
.theme_dark
.inline-menu-list-actions-item
.cipher-container:has(:focus-visible):not(.remove-outline) {
outline-color: #5c9fee;
outline-color: rgb(var(--color-primary-700));
}
.inline-menu-list-actions-item .fill-cipher-button,
@@ -346,22 +241,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));
}
.theme_light .inline-menu-list-actions-item .view-cipher-button:focus:focus-visible {
outline-color: #1252a3;
}
.theme_dark .inline-menu-list-actions-item .view-cipher-button:focus:focus-visible {
outline-color: #5c9fee;
}
.theme_light .inline-menu-list-actions-item .view-cipher-button svg path {
fill: #175ddc !important;
}
.theme_dark .inline-menu-list-actions-item .view-cipher-button svg path {
fill: #6f9df1 !important;
.inline-menu-list-actions-item .view-cipher-button svg path {
fill: rgb(var(--color-primary-600)) !important;
}
.inline-menu-list-actions-item .cipher-icon {
@@ -377,14 +261,7 @@ body * {
background-size: 2.6rem;
background-position: center;
background-repeat: no-repeat;
}
.theme_light .inline-menu-list-actions-item .cipher-icon {
color: #175ddc;
}
.theme_dark .inline-menu-list-actions-item .cipher-icon {
color: #6f9df1;
color: rgb(var(--color-primary-600));
}
.inline-menu-list-actions-item .cipher-icon svg {
@@ -393,12 +270,8 @@ body * {
flex-shrink: 0;
}
.theme_light .inline-menu-list-actions-item .cipher-icon svg path {
fill: #175ddc !important;
}
.theme_dark .inline-menu-list-actions-item .cipher-icon svg path {
fill: #6f9df1 !important;
.inline-menu-list-actions-item .cipher-icon svg path {
fill: rgb(var(--color-primary-600)) !important;
}
.inline-menu-list-actions-item .cipher-icon.bwi {
@@ -418,38 +291,19 @@ body * {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(var(--color-text-main));
}
.theme_light .inline-menu-list-actions-item .totp-sec-span {
color: #212529;
.inline-menu-list-actions-item .totp-sec-span-danger {
color: rgb(var(--color-danger-600));
}
.theme_dark .inline-menu-list-actions-item .totp-sec-span {
color: #ffffff;
.inline-menu-list-actions-item .circle-color {
stroke: rgb(var(--color-primary-600));
}
.theme_light .inline-menu-list-actions-item .totp-sec-span-danger {
color: #b80017;
}
.theme_dark .inline-menu-list-actions-item .totp-sec-span-danger {
color: #ff8d85;
}
.theme_light .inline-menu-list-actions-item .circle-color {
stroke: #175ddc;
}
.theme_dark .inline-menu-list-actions-item .circle-color {
stroke: #6f9df1;
}
.theme_light .inline-menu-list-actions-item .circle-danger-color {
stroke: #b80017;
}
.theme_dark .inline-menu-list-actions-item .circle-danger-color {
stroke: #ff8d85;
.inline-menu-list-actions-item .circle-danger-color {
stroke: rgb(var(--color-danger-600));
}
.inline-menu-list-actions-item .cipher-name,
@@ -467,26 +321,12 @@ body * {
.inline-menu-list-actions-item .cipher-name {
font-size: 1.6rem;
}
.theme_light .inline-menu-list-actions-item .cipher-name {
color: #212529;
}
.theme_dark .inline-menu-list-actions-item .cipher-name {
color: #ffffff;
color: rgb(var(--color-text-main));
}
.inline-menu-list-actions-item .cipher-subtitle {
font-size: 1.4rem;
}
.theme_light .inline-menu-list-actions-item .cipher-subtitle {
color: #6c747c;
}
.theme_dark .inline-menu-list-actions-item .cipher-subtitle {
color: #bac0ce;
color: rgb(var(--color-text-muted));
}
.inline-menu-list-actions-item .cipher-subtitle.masked-totp {
@@ -505,22 +345,11 @@ body * {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.2rem;
fill: rgb(var(--color-text-muted)) !important;
}
.theme_light .inline-menu-list-actions-item .cipher-subtitle--passkey svg {
fill: #6c747c !important;
}
.theme_dark .inline-menu-list-actions-item .cipher-subtitle--passkey svg {
fill: #bac0ce !important;
}
.theme_light .inline-menu-list-actions-item .cipher-subtitle--passkey svg path {
fill: #6c747c !important;
}
.theme_dark .inline-menu-list-actions-item .cipher-subtitle--passkey svg path {
fill: #bac0ce !important;
.inline-menu-list-actions-item .cipher-subtitle--passkey svg path {
fill: rgb(var(--color-text-muted)) !important;
}
@keyframes bwi-spin {
@@ -541,14 +370,7 @@ body * {
padding: 1rem 0.8rem;
font-size: 1.4rem;
font-weight: 400;
}
.theme_light .passkey-authenticating-loader {
color: #5a6d91;
}
.theme_dark .passkey-authenticating-loader {
color: #bac0ce;
color: rgb(var(--color-secondary-500));
}
.passkey-authenticating-loader svg {
@@ -556,12 +378,8 @@ body * {
margin-left: 1rem;
}
.theme_light .passkey-authenticating-loader svg path {
fill: #5a6d91 !important;
}
.theme_dark .passkey-authenticating-loader svg path {
fill: #bac0ce !important;
.passkey-authenticating-loader svg path {
fill: rgb(var(--color-secondary-500)) !important;
}
/* Password generator styles */
@@ -579,25 +397,14 @@ body * {
transition: background-color 0.2s ease-in-out;
}
.theme_light .password-generator-actions:hover {
background: #f0f0f0;
}
.theme_dark .password-generator-actions:hover {
background: #292d35;
.password-generator-actions:hover {
background: var(--color-hover-default);
}
.password-generator-actions:has(:focus-visible):not(.remove-outline) {
outline-width: 0.2rem;
outline-style: solid;
}
.theme_light .password-generator-actions:has(:focus-visible):not(.remove-outline) {
outline-color: #1252a3;
}
.theme_dark .password-generator-actions:has(:focus-visible):not(.remove-outline) {
outline-color: #5c9fee;
outline-color: rgb(var(--color-primary-700));
}
.password-generator-actions .inline-menu-list-action {
@@ -606,22 +413,11 @@ body * {
border: none;
background-color: transparent;
cursor: pointer;
color: rgb(var(--color-text-main));
}
.theme_light .password-generator-actions .inline-menu-list-action {
color: #212529;
}
.theme_dark .password-generator-actions .inline-menu-list-action {
color: #ffffff;
}
.theme_light .password-generator-actions .inline-menu-list-action svg path {
fill: #175ddc !important;
}
.theme_dark .password-generator-actions .inline-menu-list-action svg path {
fill: #6f9df1 !important;
.password-generator-actions .inline-menu-list-action svg path {
fill: rgb(var(--color-primary-600)) !important;
}
.password-generator-actions .fill-generated-password-button {
@@ -654,26 +450,15 @@ body * {
.password-generator-actions .refresh-generated-password-button:focus:focus-visible {
outline-width: 0.2rem;
outline-style: solid;
}
.theme_light .password-generator-actions .refresh-generated-password-button:focus:focus-visible {
outline-color: #1252a3;
}
.theme_dark .password-generator-actions .refresh-generated-password-button:focus:focus-visible {
outline-color: #5c9fee;
outline-color: rgb(var(--color-primary-700));
}
.password-generator-actions .refresh-generated-password-button svg {
margin-top: 0.2rem;
}
.theme_light .password-generator-actions .refresh-generated-password-button svg path {
fill: #175ddc !important;
}
.theme_dark .password-generator-actions .refresh-generated-password-button svg path {
fill: #6f9df1 !important;
.password-generator-actions .refresh-generated-password-button svg path {
fill: rgb(var(--color-primary-600)) !important;
}
.password-generator-actions .password-generator-content {
@@ -701,18 +486,10 @@ body * {
width: 100%;
}
.theme_light .password-generator-actions .colorized-password .password-special {
color: #b80017 !important;
.password-generator-actions .colorized-password .password-special {
color: rgb(var(--color-danger-600)) !important;
}
.theme_dark .password-generator-actions .colorized-password .password-special {
color: #ff8d85 !important;
}
.theme_light .password-generator-actions .colorized-password .password-number {
color: #1452c1 !important;
}
.theme_dark .password-generator-actions .colorized-password .password-number {
color: #6f9df1 !important;
.password-generator-actions .colorized-password .password-number {
color: rgb(var(--color-primary-700)) !important;
}

145
libs/components/src/tw-theme-variables.css Normal file
View File

@@ -0,0 +1,145 @@
/**
* 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: 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;
}

131
libs/components/src/tw-theme.css
View File

@@ -1,4 +1,5 @@
@import "theme.css";
@import "tw-theme-variables.css";
@import "@angular/cdk/a11y-prebuilt.css";
@import "@angular/cdk/text-field-prebuilt.css";
@import "./reset.css";
@@ -12,136 +13,6 @@
@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: