bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-21 02:33:46 +00:00
Code Issues Releases Wiki Activity

[CL-265] CL/extension refresh feature branch (#8696)

Browse Source 
* [CL-245] Update palette to new light and dark theme colors (#8633)

* [CL-245] Add new color swatches to storybook (#8697)

* [CL-238] update typography (#8997)

* [CL-230] [CL-296] Update button styles (#9345)

* [CL-237] Update menu styles for extension refresh (#9525)

* [CL-267] Add 100-level color variants and update primary-600 (#9550)

* [CL-286] Update badge to use focus-visible instead of focus (#9551)

* [CL-250] Update badge styles for extension refresh (#9572)

* [CL-234] callout style refresh (#9920)

* [CL-233] Update form field styles (#9776)

* [CL-239][CL-251][CL-342] dialog style refresh (#10096)

* [CL-239] simple dialog style refresh

* [CL-342] fix text overflow in dialog; add story

* [CL-244] readonly fields (#10164)

* [CL-352] Fix Angular errors related to form element changes (#10211)

* [CL-273] Update styles for checkbox and form control (#10146)

* [CL-274] Update styling for radio button (#10333)

* [CL-338] Remove extra space in item content when end slot is empty (#10350)

* [CL-377] Fix extension style conflict for input background (#10351)

* [CL-271] Update styles for toggle (#10377)

* [CL-381] Update spacing around form elements (#10432)

* [CL-229] Update icon button styles (#10405)

* [CL-380] Remove hover state from disabled form fields (#10639)

* [CL-405] Allow toggle group input to be full width (#10658)

* [CL-389] Exclude end slot label content from truncation (#10508)

* [CL-383] Remove manual focus when password toggle is clicked (#10749)

* [CL-278][CL-391] misc bit-item style fixes (#10758)

* [CL-391] use pointer cursor on hover when link or button

* [CL-210] Change base font size from 14px to 16px (#10779)

* [CL-291] Finalize styling for chip select (#10771)

* [CL-257] update banner component styles (#10766)

* [CL-443] Fix sizing issues (#10893)

* [CL-445] Fix small sizing and spacing issues (#10962)

* [CL-382] Reduce element shifting on readonly hover (#10956)

* [CL-396] Update theme colors to new hexes (#10968)

* [CL-395] Remove text headers color (#10997)

* [CL-404] Switch to primary-600 for all focus indicators (#11015)

* [CL-397] Remove primary-500 (#11036)

* [CL-447] Ensure DM Sans displays correctly at all font weights (#11041)

* [CL-448] Scrollbar Styles (#11111)

* CL-252/update toast (#10996)

* [CL-275] Update link styles (#11174)

* [CL-446] Update hover state for unselected chip selects (#11172)

* [CL-454] Improve color a11y for toast and banner interactive elements (#11200)

* [CL-457] Center input text for select and multiselect (#11239)

* [CL-455] Do not use responsive margin for sections in dialogs or extension (#11243)

* [CL-459] Fix chip behavior when opening menu while item is selected (#11227)

* [CL-388] Update vertical nav colors for new palette (#11226)

* scope styled scrollbar to only select elements (#11247)

* edit radio buttons to be block inputs and update spacing (#11291)

* [CL-453] Fix multiselect chip spacing and truncation (#11300)

* [PM-11131] Prevent duplicated sr labels on form field icon buttons (#11383)

* [CL-303] Prevent chip menu from running offscreen (#11348)

* [CL-476] Fix DM Sans font on Windows (#11409)

* implements scrollbar styles for firefox/chrome and safari (#11447)

* [CL-472] Fix search background color in extension (#11466)

* [CL-481] Style updates for bit-item, bit-card, and primary-100 (#11473)

* [CL-478] Remove underline on hover for most components (#11477)

* [CL-477] Remove focus styles for readonly input (#11510)

* [CL-487] Fix vault items virtual scroll height (#11581)

* [PM-8625] Increase popup width (#11686)

* [CL-494] Wrap long words in toggle group (#11659)

* [CL-13820] Add class to remove link underline (#11762)

* [CL-435] Prevent Windows extension from shifting (#11851)

* [CL-503] Add notification color variables (#11802)

* [PM-14043] Update size of toggle group label to fit more content (#11881)

* [CL-498] Set chip menu width minimum to chip select width (#11905)

---------

Co-authored-by: Will Martin <contact@willmartian.com>
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Co-authored-by: Merissa Weinstein <merissa.k.weinstein@gmail.com>
Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
This commit is contained in:
Victoria League
2024-11-15 09:21:17 -05:00
committed by GitHub
parent 5c540a86f4
commit 3b5b2d6bd6
150 changed files with 1767 additions and 1059 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,56 +1,53 @@
@import "./reset.css";
/**
Note that the value of the *-600 colors is currently equivalent to the value
of the *-500 variant of that color. This is a temporary change to make BW-42
updates easier.
TODO remove comment when the color palette portion of BW-42 is completed.
*/
:root {
--color-transparent-hover: rgb(0 0 0 / 0.03);
--color-transparent-hover: rgb(0 0 0 / 0.02);
--color-shadow: 168 179 200;
--color-background: 255 255 255;
--color-background-alt: 251 251 251;
--color-background-alt: 243 246 249;
--color-background-alt2: 23 92 219;
--color-background-alt3: 18 82 163;
--color-background-alt4: 13 60 119;
--color-background-alt3: 26 65 172;
--color-background-alt4: 2 15 102;
/* Can only be used behind the extension refresh flag */
--color-primary-100: 200 217 249;
--color-primary-300: 103 149 232;
/* Can only be used behind the extension refresh flag */
--color-primary-500: 23 93 220;
--color-primary-100: 219 229 246;
--color-primary-300: 121 161 233;
--color-primary-600: 23 93 220;
--color-primary-700: 18 82 163;
--color-primary-700: 26 65 172;
--color-secondary-100: 240 240 240;
--color-secondary-300: 206 212 220;
--color-secondary-600: 137 146 159;
--color-secondary-700: 33 37 41;
--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-success-600: 1 126 69;
--color-success-700: 0 85 46;
--color-info-100: 219 229 246;
--color-info-600: 121 161 233;
--color-info-700: 26 65 172;
--color-danger-600: 200 53 34;
--color-danger-700: 152 41 27;
--color-warning-100: 255 248 228;
--color-warning-600: 255 191 0;
--color-warning-700: 172 88 0;
--color-warning-600: 139 102 9;
--color-warning-700: 105 77 5;
--color-danger-100: 255 236 239;
--color-danger-600: 203 38 58;
--color-danger-700: 149 27 42;
--color-info-600: 85 85 85;
--color-info-700: 59 58 58;
--color-success-100: 191 236 195;
--color-success-600: 12 128 24;
--color-success-700: 11 111 21;
--color-notification-100: 255 225 247;
--color-notification-600: 192 17 118;
--color-art-primary: 2 15 102;
--color-art-accent: 85 85 85;
--color-art-accent: 44 221 223;
--color-text-main: 33 37 41;
--color-text-muted: 109 117 126;
--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-text-headers: 2 15 102;
--color-marketing-logo: 23 93 220;
@@ -62,46 +59,53 @@
}
.theme_dark {
--color-transparent-hover: rgb(255 255 255 / 0.12);
--color-transparent-hover: rgb(255 255 255 / 0.02);
--color-shadow: 0 0 0;
--color-background: 31 36 46;
--color-background-alt: 22 28 38;
--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-background-alt3: 48 57 70;
--color-background-alt4: 18 26 39;
--color-primary-100: 8 31 73;
--color-primary-300: 23 93 220;
--color-primary-500: 54 117 232;
--color-primary-600: 106 153 240;
--color-primary-700: 180 204 249;
--color-primary-100: 26 39 78;
--color-primary-300: 26 65 172;
--color-primary-600: 101 171 255;
--color-primary-700: 170 195 239;
--color-secondary-100: 47 52 61;
--color-secondary-300: 110 118 137;
--color-secondary-600: 186 192 206;
--color-secondary-700: 255 255 255;
--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-600: 82 224 124;
--color-success-700: 168 239 190;
--color-success-100: 11 111 21;
--color-success-600: 107 241 120;
--color-success-700: 191 236 195;
--color-danger-600: 255 141 133;
--color-danger-700: 255 191 187;
--color-danger-100: 149 27 42;
--color-danger-600: 255 78 99;
--color-danger-700: 255 236 239;
--color-warning-600: 255 235 102;
--color-warning-700: 255 245 179;
--color-warning-100: 172 88 0;
--color-warning-600: 255 191 0;
--color-warning-700: 255 248 228;
--color-info-600: 164 176 198;
--color-info-700: 209 215 226;
--color-info-100: 26 65 172;
--color-info-600: 121 161 233;
--color-info-700: 219 229 246;
--color-art-primary: 226 227 228;
--color-art-accent: 164 176 198;
--color-notification-100: 117 37 83;
--color-notification-600: 255 143 208;
--color-text-main: 255 255 255;
--color-text-muted: 186 192 206;
--color-text-contrast: 25 30 38;
--color-art-primary: 243 246 249;
--color-art-accent: 44 221 233;
--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: 240 141 199;
--color-text-headers: 226 227 228;
--color-text-code: 255 143 208;
--color-marketing-logo: 255 255 255;