From 3b5b2d6bd6bd01125e92dffda4c4bf8784a5b1ef Mon Sep 17 00:00:00 2001 From: Victoria League Date: Fri, 15 Nov 2024 09:21:17 -0500 Subject: [PATCH] [CL-265] CL/extension refresh feature branch (#8696) * [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 Co-authored-by: Oscar Hinton Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com> Co-authored-by: Merissa Weinstein Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com> --- .github/whitelist-capital-letters.txt | 10 - .../src/autofill/shared/styles/variables.scss | 2 +- .../popup/layout/popup-footer.component.html | 2 +- .../popup/layout/popup-header.component.html | 4 +- .../popup/layout/popup-layout.stories.ts | 2 +- .../popup/layout/popup-page.component.html | 2 +- apps/browser/src/popup/app.module.ts | 2 +- apps/browser/src/popup/images/loading.svg | 2 +- apps/browser/src/popup/scss/base.scss | 16 +- apps/browser/src/popup/scss/misc.scss | 2 +- apps/browser/src/popup/scss/pages.scss | 2 +- apps/browser/src/popup/scss/tailwind.css | 21 ++ apps/browser/src/popup/scss/variables.scss | 4 +- .../components/vault/vault-v2.component.html | 6 +- .../src/app/components/avatar.component.ts | 2 +- apps/desktop/src/images/loading.svg | 2 +- apps/desktop/src/scss/variables.scss | 2 +- apps/web/src/404.html | 2 +- .../organizations/manage/groups.component.ts | 4 +- .../members/members.component.ts | 4 +- .../access-selector.component.html | 6 - .../auth/settings/verify-email.component.html | 2 +- ...ation-subscription-selfhost.component.html | 43 ++-- .../app/billing/services/stripe.service.ts | 4 +- .../shared/payment/payment.component.ts | 4 +- .../vault-items/vault-items.component.ts | 4 +- .../vault-banners.component.html | 6 +- apps/web/src/images/loading-white.svg | 2 +- apps/web/src/images/loading.svg | 2 +- apps/web/src/scss/base.scss | 2 +- apps/web/src/scss/forms.scss | 6 +- apps/web/src/scss/variables.scss | 2 +- .../domain-add-edit-dialog.component.html | 6 +- .../providers/manage/members.component.ts | 4 +- .../providers/providers-layout.component.html | 2 +- .../src/app/auth/sso/sso.component.html | 8 +- libs/angular/src/scss/webfonts.css | 93 +------- .../scss/webfonts/Open_Sans-italic-300.woff | Bin 53108 -> 0 bytes .../scss/webfonts/Open_Sans-italic-400.woff | Bin 53108 -> 0 bytes .../scss/webfonts/Open_Sans-italic-600.woff | Bin 54100 -> 0 bytes .../scss/webfonts/Open_Sans-italic-700.woff | Bin 53000 -> 0 bytes .../scss/webfonts/Open_Sans-italic-800.woff | Bin 72092 -> 0 bytes .../scss/webfonts/Open_Sans-normal-300.woff | Bin 57032 -> 0 bytes .../scss/webfonts/Open_Sans-normal-400.woff | Bin 55324 -> 0 bytes .../scss/webfonts/Open_Sans-normal-600.woff | Bin 57744 -> 0 bytes .../scss/webfonts/Open_Sans-normal-700.woff | Bin 58016 -> 0 bytes .../scss/webfonts/Open_Sans-normal-800.woff | Bin 57664 -> 0 bytes libs/angular/src/scss/webfonts/dm-sans.woff2 | Bin 0 -> 88504 bytes .../components/src/avatar/avatar.component.ts | 2 +- libs/components/src/badge/badge.directive.ts | 55 +++-- libs/components/src/badge/badge.mdx | 9 +- libs/components/src/badge/badge.stories.ts | 41 +++- .../src/banner/banner.component.html | 9 +- .../components/src/banner/banner.component.ts | 8 +- libs/components/src/banner/banner.mdx | 3 +- libs/components/src/banner/banner.stories.ts | 2 +- .../src/button/button.component.spec.ts | 51 ----- .../components/src/button/button.component.ts | 41 ++-- libs/components/src/button/button.mdx | 3 - libs/components/src/button/button.stories.ts | 16 +- .../src/callout/callout.component.html | 15 +- .../src/callout/callout.component.spec.ts | 2 +- .../src/callout/callout.component.ts | 13 +- libs/components/src/callout/callout.mdx | 4 + libs/components/src/callout/callout.module.ts | 4 +- libs/components/src/card/card.component.ts | 2 +- .../src/checkbox/checkbox.component.ts | 21 +- .../src/checkbox/checkbox.stories.ts | 126 +++++++++-- .../chip-select/chip-select.component.html | 38 ++-- .../src/chip-select/chip-select.component.ts | 51 ++++- .../src/chip-select/chip-select.stories.ts | 50 ++++- .../src/dialog/dialog.service.stories.ts | 1 + .../src/dialog/dialog/dialog.component.html | 21 +- libs/components/src/dialog/dialog/dialog.mdx | 7 + libs/components/src/dialog/dialogs.mdx | 4 + ...ple-configurable-dialog.service.stories.ts | 3 +- .../simple-dialog.component.html | 8 +- .../simple-dialog.service.stories.ts | 21 +- .../simple-dialog/simple-dialog.stories.ts | 8 +- .../form-control/form-control.component.html | 14 +- .../form-control/form-control.component.ts | 18 +- .../src/form-control/form-control.module.ts | 6 +- .../src/form-control/hint.component.ts | 2 +- .../src/form-control/label.component.html | 14 ++ .../src/form-control/label.component.ts | 34 +++ .../src/form-control/label.directive.ts | 6 - .../src/form-field/error.component.ts | 2 +- .../src/form-field/form-field-control.ts | 1 + .../src/form-field/form-field.component.html | 118 ++++++++++- .../src/form-field/form-field.component.ts | 87 ++++++-- .../src/form-field/form-field.stories.ts | 199 ++++++++++++++++-- .../src/form-field/multi-select.stories.ts | 67 +++--- .../password-input-toggle.directive.ts | 2 - .../password-input-toggle.stories.ts | 4 +- .../src/form-field/prefix.directive.ts | 47 +---- .../src/form-field/suffix.directive.ts | 22 +- libs/components/src/form/form.stories.ts | 26 ++- libs/components/src/form/forms.mdx | 24 +++ .../src/icon-button/icon-button.component.ts | 52 +++-- .../src/icon-button/icon-button.stories.ts | 2 +- libs/components/src/input/input.directive.ts | 66 ++++-- .../src/item/item-content.component.html | 4 +- .../src/item/item-content.component.ts | 23 +- libs/components/src/item/item.component.html | 5 +- libs/components/src/item/item.component.ts | 4 +- libs/components/src/item/item.stories.ts | 62 +++--- libs/components/src/link/link.directive.ts | 27 +-- libs/components/src/link/link.mdx | 24 ++- libs/components/src/link/link.stories.ts | 39 +++- .../src/menu/menu-divider.component.html | 2 +- .../src/menu/menu-item.directive.ts | 16 +- .../src/menu/menu-trigger-for.directive.ts | 1 + libs/components/src/menu/menu.component.html | 2 +- libs/components/src/menu/menu.component.ts | 4 +- .../multi-select/multi-select.component.html | 14 +- .../multi-select/multi-select.component.ts | 3 +- .../src/multi-select/scss/bw.theme.scss | 65 +++--- .../src/navigation/nav-group.stories.ts | 76 ++++--- .../src/navigation/nav-item.component.html | 4 +- .../src/navigation/side-nav.component.html | 2 +- .../radio-button/radio-button.component.ts | 2 +- .../src/radio-button/radio-button.stories.ts | 29 +++ .../src/radio-button/radio-group.component.ts | 2 +- .../src/radio-button/radio-input.component.ts | 27 ++- .../src/search/search.component.html | 2 +- .../src/section/section-header.component.html | 2 +- .../src/section/section.component.ts | 2 +- .../components/src/select/select.component.ts | 2 +- libs/components/src/select/select.stories.ts | 20 +- .../src/shared/button-like.abstraction.ts | 1 - libs/components/src/stories/colors.mdx | 14 ++ .../components/kitchen-sink-form.component.ts | 1 + .../components/kitchen-sink-main.component.ts | 10 +- libs/components/src/styles.css | 2 +- .../components/src/toast/toast.component.html | 16 +- libs/components/src/toast/toast.component.ts | 13 +- libs/components/src/toast/toast.tokens.css | 1 + libs/components/src/toast/toastr.css | 4 + .../toggle-group/toggle-group.component.ts | 2 +- .../src/toggle-group/toggle-group.mdx | 44 ++-- .../src/toggle-group/toggle-group.stories.ts | 71 +++++++ .../src/toggle-group/toggle.component.html | 9 +- .../src/toggle-group/toggle.component.ts | 69 +++--- libs/components/src/tw-theme.css | 130 ++++++------ .../src/typography/typography.directive.ts | 22 +- libs/components/src/typography/typography.mdx | 56 +---- .../src/typography/typography.stories.ts | 88 ++------ libs/components/src/variables.scss | 2 +- libs/components/tailwind.config.base.js | 57 ++++- .../totp-countdown.component.html | 8 +- 150 files changed, 1767 insertions(+), 1059 deletions(-) delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff delete mode 100644 libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff create mode 100644 libs/angular/src/scss/webfonts/dm-sans.woff2 create mode 100644 libs/components/src/form-control/label.component.html create mode 100644 libs/components/src/form-control/label.component.ts delete mode 100644 libs/components/src/form-control/label.directive.ts diff --git a/.github/whitelist-capital-letters.txt b/.github/whitelist-capital-letters.txt index 3295dfc17d..a320149281 100644 --- a/.github/whitelist-capital-letters.txt +++ b/.github/whitelist-capital-letters.txt @@ -5,16 +5,6 @@ ./apps/browser/store/windows/Assets ./bitwarden_license/README.md ./libs/angular/src/directives/cipherListVirtualScroll.directive.ts -./libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff -./libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff -./libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff -./libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff -./libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff -./libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff ./libs/admin-console/README.md ./libs/auth/README.md ./libs/billing/README.md diff --git a/apps/browser/src/autofill/shared/styles/variables.scss b/apps/browser/src/autofill/shared/styles/variables.scss index 208e2bef0a..ad3924e37a 100644 --- a/apps/browser/src/autofill/shared/styles/variables.scss +++ b/apps/browser/src/autofill/shared/styles/variables.scss @@ -2,7 +2,7 @@ $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord"; -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-source-code-pro: "Source Code Pro", monospace; $font-size-base: 14px; $text-color: #212529; diff --git a/apps/browser/src/platform/popup/layout/popup-footer.component.html b/apps/browser/src/platform/popup/layout/popup-footer.component.html index 777e0ab60d..f60964b139 100644 --- a/apps/browser/src/platform/popup/layout/popup-footer.component.html +++ b/apps/browser/src/platform/popup/layout/popup-footer.component.html @@ -1,5 +1,5 @@