From 1e9cf4a62959e318cc979c373c181c3cd9ea8e5a Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 8 Jan 2025 14:15:35 +0100 Subject: [PATCH 1/3] Run sass-migrator This fixes Sass deprecation warnings by running npx sass-migrator division **/*.scss and npx sass-migrator module **/*.scss The only manual change after that was replacing `math.div` with `list.slash` in the `$text-title-*` and `$text-body-*` variables in tokens.scss, as the `/` there wasn't part of a division. --- .../admin/dev/UserAdmin.module.scss | 38 ++-- .../admin/emails/EmailTrigger.module.scss | 22 +- .../components/FlagEditor.module.scss | 48 ++-- .../admin/feature-flags/page.module.scss | 26 +-- .../admin/qa-customs/ConfigPage.module.scss | 30 +-- .../admin/removals/Removals.module.scss | 14 +- .../DashboardTopBanner.module.scss | 18 +- .../DashboardTopBannerContent.module.scss | 18 +- .../(dashboard)/dashboard/View.module.scss | 26 +-- .../fix/ResolutionContainer.module.scss | 58 ++--- .../fix/ResolutionContent.module.scss | 22 +- .../dataBrokerProfiles.module.scss | 110 ++++----- .../ManualRemoveView.module.scss | 50 ++--- .../RemovalUnderMaintenance.module.scss | 59 ++--- .../AboutBrokersIcon.module.scss | 12 +- .../welcome-to-plus/welcomeToPlus.module.scss | 24 +- .../(dashboard)/dashboard/fix/fix.module.scss | 45 ++-- .../FraudAlertModal.module.scss | 12 +- .../settings/AlertAddressForm.module.scss | 24 +- .../settings/CancelFlow.module.scss | 50 ++--- .../settings/EmailAddressAdder.module.scss | 14 +- .../settings/EmailListing.module.scss | 26 +-- .../SettingsConfirmationDialog.module.scss | 4 +- .../settings/SettingsContent.module.scss | 34 +-- .../(dashboard)/settings/View.module.scss | 32 +-- .../settings/panels/Panel.module.scss | 22 +- .../panels/SettingsPanelEditInfo.module.scss | 12 +- .../SettingsPanelNotifications.module.scss | 18 +- .../user/welcome/EnterInfo.module.scss | 52 ++--- .../user/welcome/FindExposures.module.scss | 10 +- .../user/welcome/GetStarted.module.scss | 34 +-- .../user/welcome/View.module.scss | 82 +++---- .../AccountDeletionNotification.module.scss | 28 +-- .../(redesign)/(public)/Faq.module.scss | 28 +-- .../(public)/LandingView.module.scss | 208 +++++++++--------- .../(public)/PlansTable.module.scss | 188 ++++++++-------- .../(public)/PublicShell.module.scss | 36 +-- .../(public)/SignUpForm.module.scss | 16 +- .../[breachName]/BreachDetailView.module.scss | 90 ++++---- .../breaches/BreachIndexView.module.scss | 78 +++---- .../how-it-works/HowItWorksView.module.scss | 181 +++++++-------- .../LimitationsApply.module.scss | 18 +- .../UnsubscribeMonthlyReport.module.scss | 16 +- .../(redesign)/MobileShell.module.scss | 50 ++--- .../(redesign)/Shell.module.scss | 50 ++--- .../client/BillingPeriod.module.scss | 28 +-- src/app/components/client/Button.module.scss | 76 +++---- src/app/components/client/Chart.module.scss | 104 ++++----- .../components/client/ComboBox.module.scss | 6 +- .../client/DataBrokerProfiles.module.scss | 30 +-- .../client/ExposuresFilter.module.scss | 84 +++---- .../client/FixNavigation.module.scss | 86 ++++---- .../components/client/InputField.module.scss | 64 +++--- src/app/components/client/ListBox.module.scss | 12 +- .../client/LocationAutocomplete.module.scss | 14 +- .../client/PercentageChart.module.scss | 44 ++-- .../client/PetitionBanner.module.scss | 48 ++-- src/app/components/client/Popover.module.scss | 8 +- .../components/client/ProgressBar.module.scss | 18 +- .../client/ProgressCard.module.scss | 82 +++---- .../components/client/RadioInput.module.scss | 10 +- .../SubscriberWaitlistDialog.module.scss | 12 +- .../components/client/SwitchInput.module.scss | 10 +- src/app/components/client/TabList.module.scss | 28 +-- .../client/TelemetryLink.module.scss | 4 +- .../csat_survey/CsatSurveyBanner.module.scss | 30 +-- .../client/dialog/Dialog.module.scss | 56 ++--- .../client/dialog/ModalOverlay.module.scss | 4 +- .../exposure_card/ExposureCard.module.scss | 86 ++++---- .../ExposureCardDataClass.module.scss | 8 +- .../client/toolbar/AppPicker.module.scss | 52 ++--- .../client/toolbar/Toolbar.module.scss | 14 +- .../client/toolbar/UpsellBadge.module.scss | 28 +-- .../client/toolbar/UpsellDialog.module.scss | 24 +- .../client/toolbar/UserMenu.module.scss | 40 ++-- .../components/server/BreachLogo.module.scss | 48 ++-- .../components/server/StatusPill.module.scss | 24 +- .../server/VisuallyHidden.module.scss | 4 +- src/app/not-found.module.scss | 6 +- src/app/tokens.scss | 24 +- 80 files changed, 1637 insertions(+), 1612 deletions(-) diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss index 3024d2e1871..3fdb508f88d 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss @@ -1,20 +1,20 @@ -@import "../../../../../tokens"; +@use "../../../../../tokens"; .wrapper { display: flex; flex-direction: column; - gap: $spacing-2xl; - background-color: $color-grey-05; + gap: tokens.$spacing-2xl; + background-color: tokens.$color-grey-05; height: 100%; - padding: $layout-lg $layout-2xl; + padding: tokens.$layout-lg tokens.$layout-2xl; - @media screen and (max-width: $screen-lg) { - padding: $spacing-lg; + @media screen and (max-width: tokens.$screen-lg) { + padding: tokens.$spacing-lg; } } .header { - font: $text-title-xs; + font: tokens.$text-title-xs; font-weight: normal; b { @@ -25,33 +25,33 @@ .form { display: flex; flex-direction: column; - gap: $spacing-2xl; + gap: tokens.$spacing-2xl; .userPicker { flex: 1 0 auto; align-items: center; display: flex; flex-wrap: wrap; - gap: $spacing-2xl; - min-height: $layout-2xl; + gap: tokens.$spacing-2xl; + min-height: tokens.$layout-2xl; label { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: tokens.$spacing-sm; min-width: 50%; } input { - padding: $spacing-sm; - font: $text-body-md; + padding: tokens.$spacing-sm; + font: tokens.$text-body-md; } } .actions { display: flex; flex-wrap: wrap; - gap: $spacing-xl; + gap: tokens.$spacing-xl; button { flex: 1 1 25%; @@ -60,9 +60,9 @@ } .status { - background-color: $color-yellow-05; - border: 2px solid $color-yellow-20; - border-radius: $border-radius-sm; - padding: $spacing-md $spacing-lg; - font: $text-body-md; + background-color: tokens.$color-yellow-05; + border: 2px solid tokens.$color-yellow-20; + border-radius: tokens.$border-radius-sm; + padding: tokens.$spacing-md tokens.$spacing-lg; + font: tokens.$text-body-md; } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss index 722fc30bbd3..91668189abf 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss @@ -1,35 +1,35 @@ -@import "../../../../../tokens"; +@use "../../../../../tokens"; .wrapper { display: flex; flex-direction: column; - gap: $spacing-2xl; - background-color: $color-grey-05; + gap: tokens.$spacing-2xl; + background-color: tokens.$color-grey-05; height: 100%; - padding: $layout-lg $layout-2xl; + padding: tokens.$layout-lg tokens.$layout-2xl; - @media screen and (max-width: $screen-lg) { - padding: $spacing-lg; + @media screen and (max-width: tokens.$screen-lg) { + padding: tokens.$spacing-lg; } } .addressSection { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: tokens.$spacing-sm; .addressPicker { display: flex; align-items: center; - gap: $spacing-md; + gap: tokens.$spacing-md; label { - font: $text-body-lg; + font: tokens.$text-body-lg; font-weight: 700; } select { - padding: $spacing-sm; + padding: tokens.$spacing-sm; } } } @@ -37,5 +37,5 @@ .triggers { display: flex; flex-wrap: wrap; - gap: $spacing-lg; + gap: tokens.$spacing-lg; } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss index 8464bd2128c..6521ec1dc95 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss @@ -1,32 +1,32 @@ -@import "../../../../../../tokens"; +@use "../../../../../../tokens"; .flagWrapper { display: flex; flex-direction: column; - gap: $spacing-lg; - background-color: $color-white; - padding: $spacing-lg; - border-radius: $border-radius-md; - max-width: $content-sm; + gap: tokens.$spacing-lg; + background-color: tokens.$color-white; + padding: tokens.$spacing-lg; + border-radius: tokens.$border-radius-md; + max-width: tokens.$content-sm; } .flagName { - font: $text-title-3xs; + font: tokens.$text-title-3xs; } .enabledControl { display: flex; - gap: $spacing-xs; - font: $text-body-lg; + gap: tokens.$spacing-xs; + font: tokens.$text-body-lg; } .allowListWrapper { display: flex; flex-direction: column; - gap: $spacing-md; + gap: tokens.$spacing-md; h4 { - font: $text-body-md; + font: tokens.$text-body-md; font-weight: bold; } } @@ -35,7 +35,7 @@ flex-grow: 1; display: flex; flex-direction: column; - gap: $spacing-xs; + gap: tokens.$spacing-xs; padding: 0; list-style-type: none; } @@ -43,8 +43,8 @@ .addressListing { display: flex; align-items: center; - gap: $spacing-xs; - font: $text-body-md; + gap: tokens.$spacing-xs; + font: tokens.$text-body-md; font-family: monospace; :first-child { @@ -54,25 +54,25 @@ button { background-color: transparent; border: none; - border-radius: $border-radius-xl; + border-radius: tokens.$border-radius-xl; aspect-ratio: 1; &:hover { cursor: pointer; - background-color: $color-red-70; - color: $color-white; + background-color: tokens.$color-red-70; + color: tokens.$color-white; } } &:has(button:hover) { - color: $color-red-70; + color: tokens.$color-red-70; } } .addressAdder { display: flex; align-items: center; - gap: $spacing-sm; + gap: tokens.$spacing-sm; input[type="email"] { flex-grow: 1; @@ -87,15 +87,15 @@ align-items: center; height: 100%; background-color: transparent; - color: $color-blue-50; + color: tokens.$color-blue-50; border: none; - border-radius: $border-radius-sm; - padding: $spacing-sm; + border-radius: tokens.$border-radius-sm; + padding: tokens.$spacing-sm; &:hover { cursor: pointer; - background-color: $color-blue-50; - color: $color-white; + background-color: tokens.$color-blue-50; + color: tokens.$color-white; } } /* stylelint-enable no-descending-specificity */ diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss index 9d90eb6fbf1..70cb54ed1ea 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss @@ -1,14 +1,14 @@ -@import "../../../../../tokens"; +@use "../../../../../tokens"; .wrapper { width: 100%; height: 100%; - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; overflow: auto; .tabBar { - height: $tab-bar-height; - border-bottom: 1px solid $color-grey-20; + height: tokens.$tab-bar-height; + border-bottom: 1px solid tokens.$color-grey-20; display: flex; align-items: center; @@ -16,14 +16,14 @@ flex: 1 0 auto; display: flex; align-items: center; - padding-inline: $spacing-2xl; + padding-inline: tokens.$spacing-2xl; } .end { - padding-inline: $spacing-xl; + padding-inline: tokens.$spacing-xl; } - @media screen and (max-width: $screen-md) { + @media screen and (max-width: tokens.$screen-md) { .start { justify-content: center; } @@ -35,7 +35,7 @@ } .main { - padding: $spacing-lg 0; + padding: tokens.$spacing-lg 0; } th, @@ -45,15 +45,15 @@ } h3 { - padding: 0 $spacing-2xl; - font: $text-title-2xs; + padding: 0 tokens.$spacing-2xl; + font: tokens.$text-title-2xs; } } .flagList { display: grid; - grid-template-columns: repeat(auto-fit, minmax($content-xs, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(tokens.$content-xs, 1fr)); justify-content: flex-start; - gap: $spacing-lg; - padding: $spacing-2xl; + gap: tokens.$spacing-lg; + padding: tokens.$spacing-2xl; } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/ConfigPage.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/ConfigPage.module.scss index 5c78b21fe99..4b157c0c911 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/ConfigPage.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/ConfigPage.module.scss @@ -1,12 +1,12 @@ -@import "../../../../../tokens"; +@use "../../../../../tokens"; .wrapper { display: grid; grid-template-rows: 120px min-content; - gap: $spacing-md; + gap: tokens.$spacing-md; height: 100%; - padding: $layout-sm; - background-color: $color-grey-05; + padding: tokens.$layout-sm; + background-color: tokens.$color-grey-05; align-items: center; justify-content: center; } @@ -17,7 +17,7 @@ } .header { - font: $text-title-xs; + font: tokens.$text-title-xs; font-weight: normal; margin: auto; width: 100%; @@ -28,8 +28,8 @@ } .formAndListWrapper { - gap: $spacing-md; - margin-top: $spacing-lg; + gap: tokens.$spacing-md; + margin-top: tokens.$spacing-lg; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; @@ -63,7 +63,7 @@ width: 100%; display: flex; flex-direction: column; - gap: $spacing-sm; + gap: tokens.$spacing-sm; } .searchBox { @@ -134,7 +134,7 @@ .form { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: tokens.$spacing-sm; align-items: center; width: min-content; @@ -143,20 +143,20 @@ align-items: center; display: flex; flex-wrap: wrap; - gap: $spacing-md; - min-height: $layout-md; + gap: tokens.$spacing-md; + min-height: tokens.$layout-md; label { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: tokens.$spacing-sm; min-width: 50%; width: 350px; } input { - padding: $spacing-sm; - font: $text-body-md; + padding: tokens.$spacing-sm; + font: tokens.$text-body-md; transition: border-color 0.3s ease; } } @@ -196,7 +196,7 @@ .configContainer { display: flex; - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; } .configLeft { diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/Removals.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/Removals.module.scss index 4d97abf58d0..3d8b1dc5592 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/Removals.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/Removals.module.scss @@ -1,20 +1,20 @@ -@import "../../../../../tokens"; +@use "../../../../../tokens"; .wrapper { display: flex; flex-direction: column; - gap: $spacing-2xl; - background-color: $color-grey-05; + gap: tokens.$spacing-2xl; + background-color: tokens.$color-grey-05; height: 100%; - padding: $layout-lg $layout-2xl; + padding: tokens.$layout-lg tokens.$layout-2xl; - @media screen and (max-width: $screen-lg) { - padding: $spacing-lg; + @media screen and (max-width: tokens.$screen-lg) { + padding: tokens.$spacing-lg; } } .header { - font: $text-title-xs; + font: tokens.$text-title-xs; font-weight: normal; b { diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBanner.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBanner.module.scss index 5304af2e9cd..bb6eb3ccc04 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBanner.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBanner.module.scss @@ -1,19 +1,19 @@ -@import "../../../../../../../tokens"; +@use "../../../../../../../tokens"; .container { - background-color: $color-white; + background-color: tokens.$color-white; background-image: url("../images/dashboard-top-banner-wave.svg"); background-position: center; background-size: cover; - border-radius: $border-radius-md; - border: 1px solid rgba($color-purple-50, 0.2); + border-radius: tokens.$border-radius-md; + border: 1px solid rgba(tokens.$color-purple-50, 0.2); display: flex; flex-direction: column-reverse; - gap: $layout-sm; - padding: $layout-xs; + gap: tokens.$layout-sm; + padding: tokens.$layout-xs; - @media screen and (min-width: $screen-lg) { - padding: $layout-md; + @media screen and (min-width: tokens.$screen-lg) { + padding: tokens.$layout-md; flex-direction: row; align-items: center; } @@ -22,7 +22,7 @@ display: flex; justify-content: center; - @media screen and (min-width: $screen-md) { + @media screen and (min-width: tokens.$screen-md) { flex: 1 1 0%; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.module.scss index ef0005e1190..c503a2d7ea6 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.module.scss @@ -1,4 +1,4 @@ -@import "../../../../../../../tokens"; +@use "../../../../../../../tokens"; .explainerContentWrapper { align-items: center; @@ -6,7 +6,7 @@ justify-content: center; flex: 1 1 0%; - @media screen and (min-width: $screen-sm) and (max-width: calc($screen-md - 1px)) { + @media screen and (min-width: tokens.$screen-sm) and (max-width: calc(tokens.$screen-md - 1px)) { justify-content: center; flex: 0.5 1 0%; text-align: center; @@ -14,27 +14,27 @@ .explainerContent { display: flex; - gap: $spacing-md; + gap: tokens.$spacing-md; flex-direction: column; - @media screen and (min-width: $screen-md) { - max-width: $content-sm; + @media screen and (min-width: tokens.$screen-md) { + max-width: tokens.$content-sm; } h3 { - font: $text-title-2xs; + font: tokens.$text-title-2xs; } .cta { align-self: start; - @media screen and (min-width: $screen-sm) and (max-width: calc($screen-md - 1px)) { + @media screen and (min-width: tokens.$screen-sm) and (max-width: calc(tokens.$screen-md - 1px)) { align-self: center; } - @media screen and (max-width: calc($screen-md - 1px)) { + @media screen and (max-width: calc(tokens.$screen-md - 1px)) { display: grid; - max-width: $content-sm; + max-width: tokens.$content-sm; width: 100%; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.module.scss index cdb6ced3191..d2da7ebcf76 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.module.scss @@ -1,35 +1,35 @@ -@import "../../../../../../tokens"; +@use "../../../../../../tokens"; .wrapper { width: 100%; height: 100%; - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; } .dashboardContent { - padding-block: $spacing-2xl; - padding-inline: $spacing-xl; + padding-block: tokens.$spacing-2xl; + padding-inline: tokens.$spacing-xl; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: tokens.$spacing-lg; } .exposuresArea { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: tokens.$spacing-sm; .exposuresAreaHeadline { - font: $text-body-xl; + font: tokens.$text-body-xl; font-weight: 600; } .exposuresAreaDescription { - font: $text-body-md; + font: tokens.$text-body-md; } .exposuresFilterWrapper { - padding-block: $spacing-md; + padding-block: tokens.$spacing-md; } } @@ -38,17 +38,17 @@ padding-inline: 0; display: flex; flex-direction: column; - gap: $spacing-md; + gap: tokens.$spacing-md; } .zeroStateIndicator { display: flex; align-items: center; flex-direction: column; - gap: $spacing-sm; - padding: $spacing-md; + gap: tokens.$spacing-sm; + padding: tokens.$spacing-md; } .visuallyHidden { - @include visually-hidden; + @include tokens.visually-hidden; } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContainer.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContainer.module.scss index d100b67ce3f..8e9e30a7bbc 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContainer.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContainer.module.scss @@ -1,16 +1,16 @@ -@import "../../../../../../../tokens"; +@use "../../../../../../../tokens"; .container { display: grid; - grid-gap: $layout-lg; + grid-gap: tokens.$layout-lg; flex-direction: row; - @media screen and (min-width: $screen-xl) { - padding-inline: $layout-lg; + @media screen and (min-width: tokens.$screen-xl) { + padding-inline: tokens.$layout-lg; } &.hasIllustration { - @media screen and (min-width: $screen-xl) { + @media screen and (min-width: tokens.$screen-xl) { grid-template-columns: 2fr 1fr; } } @@ -18,55 +18,55 @@ .breachContentWrapper { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: tokens.$spacing-sm; .label { align-self: flex-start; - background: rgba($color-blue-50, 0.3); - border-radius: $border-radius-sm; - color: $color-blue-90; + background: rgba(tokens.$color-blue-50, 0.3); + border-radius: tokens.$border-radius-sm; + color: tokens.$color-blue-90; display: inline-flex; - font: $text-body-xs; + font: tokens.$text-body-xs; font-weight: 600; line-height: 1; - padding: $spacing-sm; + padding: tokens.$spacing-sm; } h3 { - font: $text-title-2xs; - padding: $spacing-sm 0 $spacing-xs; + font: tokens.$text-title-2xs; + padding: tokens.$spacing-sm 0 tokens.$spacing-xs; } .recommendations { p { - font: $text-body-sm; + font: tokens.$text-body-sm; } ol { - padding-top: $spacing-md; + padding-top: tokens.$spacing-md; list-style-position: inside; padding-left: 0; } - padding-top: $spacing-md; + padding-top: tokens.$spacing-md; } .buttons { - padding-top: $spacing-md; + padding-top: tokens.$spacing-md; display: flex; - gap: $spacing-md; + gap: tokens.$spacing-md; align-items: center; } .breachItemsWrapper { display: flex; flex-wrap: wrap; - gap: $spacing-xs; + gap: tokens.$spacing-xs; .breachItem { - font: $text-body-sm; + font: tokens.$text-body-sm; font-weight: 600; - background: $color-grey-10; - padding: $spacing-xs $spacing-sm; - border-radius: $border-radius-md; + background: tokens.$color-grey-10; + padding: tokens.$spacing-xs tokens.$spacing-sm; + border-radius: tokens.$border-radius-md; .date { font-weight: 400; @@ -76,8 +76,8 @@ } .estimatedTime { - @include estimated-time; - padding-top: $layout-xs; + @include tokens.estimated-time; + padding-top: tokens.$layout-xs; } .illustrationWrapper { @@ -86,7 +86,7 @@ &.hideOnMobile { display: none; - @media screen and (min-width: $screen-xl) { + @media screen and (min-width: tokens.$screen-xl) { display: flex; } } @@ -98,10 +98,10 @@ .doneContentWrapper { display: grid; - gap: $layout-xs; + gap: tokens.$layout-xs; grid-template-columns: 1fr; - @media screen and (min-width: $screen-md) { + @media screen and (min-width: tokens.$screen-md) { grid-template-columns: 1fr 1fr; } @@ -109,7 +109,7 @@ align-items: flex-start; display: flex; flex-direction: column; - gap: $spacing-md; + gap: tokens.$spacing-md; } } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContent.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContent.module.scss index 6c86b545316..4f27b7f4648 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContent.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContent.module.scss @@ -1,17 +1,17 @@ -@import "../../../../../../../tokens"; +@use "../../../../../../../tokens"; .recommendations { - padding-top: $spacing-md; + padding-top: tokens.$spacing-md; p { - font: $text-body-sm; + font: tokens.$text-body-sm; } ul, ol { - padding-top: $spacing-md; - padding-left: $spacing-lg; + padding-top: tokens.$spacing-md; + padding-left: tokens.$spacing-lg; li { - margin-bottom: $spacing-xs; + margin-bottom: tokens.$spacing-xs; align-items: flex-start; } } @@ -20,14 +20,14 @@ .breachItemsWrapper { display: flex; flex-wrap: wrap; - gap: $spacing-xs; + gap: tokens.$spacing-xs; .breachItem { - font: $text-body-sm; + font: tokens.$text-body-sm; font-weight: 600; - background: $color-grey-10; - padding: $spacing-xs $spacing-sm; - border-radius: $border-radius-md; + background: tokens.$color-grey-10; + padding: tokens.$spacing-xs tokens.$spacing-sm; + border-radius: tokens.$border-radius-md; .date { font-weight: 400; diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss index 57824d78b94..86026f85b6e 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss @@ -1,11 +1,11 @@ -@import "../../../../../../../../tokens"; +@use "../../../../../../../../tokens"; .main { flex-direction: column; } .contentWrapper { - max-width: $content-md; + max-width: tokens.$content-md; margin: 0 auto; text-align: center; } @@ -14,13 +14,13 @@ display: flex; flex-direction: column; text-align: center; - gap: $spacing-md; + gap: tokens.$spacing-md; a { display: block; } - @media screen and (min-width: $screen-sm) { + @media screen and (min-width: tokens.$screen-sm) { display: flex; flex-direction: row; align-items: center; @@ -30,7 +30,7 @@ .upgradeToggleWrapper { display: block; - margin-bottom: $spacing-lg; + margin-bottom: tokens.$spacing-lg; > span { display: block; @@ -38,21 +38,21 @@ } .removalStepsList { - font: $text-body-md; + font: tokens.$text-body-md; text-align: left; li { - margin-bottom: $spacing-md; + margin-bottom: tokens.$spacing-md; > strong { display: block; - margin-bottom: $spacing-xs; + margin-bottom: tokens.$spacing-xs; font-weight: 700; } // The subhead/bullet content is wrapped in a span to style to OL marker (1.) > span { - font: $text-body-sm; + font: tokens.$text-body-sm; font-weight: normal; } } @@ -60,20 +60,20 @@ .content { text-align: center; - max-width: $content-md; - margin: 0 auto $spacing-2xl; + max-width: tokens.$content-md; + margin: 0 auto tokens.$spacing-2xl; h3 { - font: $text-title-2xs; + font: tokens.$text-title-2xs; } h4 { - font: $text-title-3xs; + font: tokens.$text-title-3xs; } p, h3 { - margin-block-end: $spacing-md; + margin-block-end: tokens.$spacing-md; } h3 + p { @@ -81,14 +81,14 @@ } > a { - color: $color-blue-60; + color: tokens.$color-blue-60; display: inline-block; - margin-inline-start: $spacing-sm; + margin-inline-start: tokens.$spacing-sm; } } .cityScape { - margin: 0 auto $spacing-2xl; + margin: 0 auto tokens.$spacing-2xl; display: block; max-width: 100%; } @@ -97,31 +97,31 @@ display: flex; align-items: center; justify-content: center; - gap: $spacing-xs; - font: $text-title-3xs; + gap: tokens.$spacing-xs; + font: tokens.$text-title-3xs; } .questionTooltip { - @include question-mark-circle-btn; + @include tokens.question-mark-circle-btn; } .contentAutomaticRemove { h3 { - @include no-focus-outline; + @include tokens.no-focus-outline; text-align: left; } } .featuresList { text-align: left; - max-width: $content-sm; - margin-bottom: $spacing-lg; + max-width: tokens.$content-sm; + margin-bottom: tokens.$spacing-lg; ul { padding: 0; li { background: url("../images/icon-check-mark.svg") no-repeat left center; - padding: $spacing-sm 0 $spacing-sm $spacing-xl; + padding: tokens.$spacing-sm 0 tokens.$spacing-sm tokens.$spacing-xl; list-style: none; margin: 0; vertical-align: middle; @@ -132,40 +132,40 @@ .upgradeToggle { width: auto; display: inline-flex; - gap: $spacing-sm; - background-color: $color-grey-10; - border-radius: $border-radius-xl; - padding: $spacing-sm $spacing-sm; - font: $text-body-sm; - margin-bottom: $spacing-md; + gap: tokens.$spacing-sm; + background-color: tokens.$color-grey-10; + border-radius: tokens.$border-radius-xl; + padding: tokens.$spacing-sm tokens.$spacing-sm; + font: tokens.$text-body-sm; + margin-bottom: tokens.$spacing-md; .toggleBtn { cursor: pointer; appearance: none; background-color: transparent; border: 0; - color: $color-grey-50; - padding: $spacing-xs $spacing-md; + color: tokens.$color-grey-50; + padding: tokens.$spacing-xs tokens.$spacing-md; font-weight: 500; &.isActive, &:hover { - background-color: $color-white; - border-radius: $border-radius-xl; - color: $color-informational; + background-color: tokens.$color-white; + border-radius: tokens.$border-radius-xl; + color: tokens.$color-informational; } &.isFocused { - outline: 2px solid $color-purple-70; - background-color: $color-purple-10; + outline: 2px solid tokens.$color-purple-70; + background-color: tokens.$color-purple-10; } } } .upgradeContentWrapper { - @media screen and (min-width: $screen-md) { + @media screen and (min-width: tokens.$screen-md) { display: flex; - gap: $spacing-md; + gap: tokens.$spacing-md; justify-content: space-between; // Used to stop purple box from stretching full width align-items: flex-start; @@ -177,36 +177,36 @@ justify-content: space-between; flex-direction: column; width: 100%; - background-color: $color-purple-70; - color: $color-white; - padding: $spacing-lg; + background-color: tokens.$color-purple-70; + color: tokens.$color-white; + padding: tokens.$spacing-lg; // Note: Confirmed with design to only round the top-right corner - border-top-right-radius: $border-radius-xl; + border-top-right-radius: tokens.$border-radius-xl; > strong { text-align: center; display: block; - font: $text-body-xl; + font: tokens.$text-body-xl; small { display: block; - font: $text-body-md; + font: tokens.$text-body-md; } } // Price block > span { - margin: $spacing-xl 0; - font: $text-title-sm; + margin: tokens.$spacing-xl 0; + font: tokens.$text-title-sm; font-weight: 500; } // Invert color for the plan selection CTA to increase visibility // against the purple background. & > a { - color: $color-white; - box-shadow: inset 0 0 0 2px $color-white; + color: tokens.$color-white; + box-shadow: inset 0 0 0 2px tokens.$color-white; &:hover { - background-color: $color-white; - color: $color-purple-70; + background-color: tokens.$color-white; + color: tokens.$color-purple-70; } } } @@ -215,15 +215,15 @@ .dataBrokerResolutionStats { display: flex; flex-direction: column; - gap: $spacing-md; + gap: tokens.$spacing-md; justify-content: center; - padding-top: $layout-sm; + padding-top: tokens.$layout-sm; - @media screen and (min-width: $screen-md) { + @media screen and (min-width: tokens.$screen-md) { flex-direction: row; } div { - @include estimated-time; + @include tokens.estimated-time; justify-content: center; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.module.scss index 8caa7cefd9b..c6c10b1f353 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.module.scss @@ -1,23 +1,23 @@ -@import "../../../../../../../../../tokens"; +@use "../../../../../../../../../tokens"; .main { display: flex; flex-direction: column; align-items: center; - gap: $spacing-lg; + gap: tokens.$spacing-lg; } .buttonsWrapper { display: flex; flex-direction: column; text-align: center; - gap: $spacing-md; + gap: tokens.$spacing-md; a { display: block; } - @media screen and (min-width: $screen-sm) { + @media screen and (min-width: tokens.$screen-sm) { display: flex; flex-direction: row; align-items: center; @@ -26,66 +26,66 @@ } .removalStepsList { - font: $text-body-md; + font: tokens.$text-body-md; text-align: left; li { - margin-bottom: $spacing-md; + margin-bottom: tokens.$spacing-md; > strong { display: block; - margin-bottom: $spacing-xs; + margin-bottom: tokens.$spacing-xs; font-weight: 700; } // The subhead/bullet content is wrapped in a span to style to OL marker (1.) > span { - font: $text-body-sm; + font: tokens.$text-body-sm; font-weight: normal; } } } .content { - max-width: $content-md; + max-width: tokens.$content-md; h3 { - font: $text-title-2xs; + font: tokens.$text-title-2xs; text-align: center; } h4 { - font: $text-title-3xs; + font: tokens.$text-title-3xs; } p, h3 { - margin-block-end: $spacing-md; + margin-block-end: tokens.$spacing-md; } > a { - color: $color-blue-60; + color: tokens.$color-blue-60; display: inline-block; - margin-inline-start: $spacing-sm; + margin-inline-start: tokens.$spacing-sm; } } .exposureListing { display: flex; flex-direction: column; - gap: $spacing-lg; + gap: tokens.$spacing-lg; h3 { - font: $text-title-2xs; + font: tokens.$text-title-2xs; } .exposureList { display: flex; flex-direction: column; - gap: $spacing-md; + gap: tokens.$spacing-md; - @media screen and (min-width: $screen-md) { - padding-inline: $spacing-lg; + @media screen and (min-width: tokens.$screen-md) { + padding-inline: tokens.$spacing-lg; } } } @@ -94,22 +94,22 @@ display: flex; align-items: center; justify-content: center; - gap: $spacing-xs; - font: $text-title-3xs; + gap: tokens.$spacing-xs; + font: tokens.$text-title-3xs; } .dataBrokerResolutionStats { display: flex; flex-direction: column; - gap: $spacing-md; + gap: tokens.$spacing-md; justify-content: center; - padding-top: $layout-sm; + padding-top: tokens.$layout-sm; - @media screen and (min-width: $screen-md) { + @media screen and (min-width: tokens.$screen-md) { flex-direction: row; } div { - @include estimated-time; + @include tokens.estimated-time; justify-content: center; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss index 6abfe523995..f8a4369fc38 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss @@ -1,24 +1,25 @@ -@import "../../../../../../../../../tokens"; +@use "../../../../../../../../../tokens"; .dataBrokerInformationWrapper { .exposureCardWrapper { - margin-top: $spacing-md; - padding-bottom: $spacing-lg; + margin-top: tokens.$spacing-md; + padding-bottom: tokens.$spacing-lg; .exposureCard { display: flex; flex-direction: column; - background-color: $color-white; - border: 2px solid rgba($color-purple-70, 0.2); - border-radius: $border-radius-lg; - padding: $layout-sm $layout-sm $layout-xs $layout-sm; + background-color: tokens.$color-white; + border: 2px solid rgba(tokens.$color-purple-70, 0.2); + border-radius: tokens.$border-radius-lg; + padding: tokens.$layout-sm tokens.$layout-sm tokens.$layout-xs + tokens.$layout-sm; .dataClassesList { justify-content: space-between; margin-left: 0; display: grid; grid-template-columns: 1fr; - grid-row-gap: $spacing-sm; + grid-row-gap: tokens.$spacing-sm; transition: opacity 0.35s ease-in-out; opacity: 1; @@ -26,38 +27,38 @@ opacity: 0; } - @media screen and (min-width: $screen-md) { + @media screen and (min-width: tokens.$screen-md) { grid-template-columns: 1fr 1fr 1fr; - gap: $spacing-sm; + gap: tokens.$spacing-sm; } - @media screen and (min-width: $screen-lg) { + @media screen and (min-width: tokens.$screen-lg) { display: flex; flex-direction: row; align-items: flex-start; - gap: $layout-xs; + gap: tokens.$layout-xs; flex-wrap: wrap; justify-content: flex-start; } } .buttonsWrapper { - margin-top: $spacing-lg; - border-top: 2px solid $color-grey-10; - padding-top: $spacing-lg; + margin-top: tokens.$spacing-lg; + border-top: 2px solid tokens.$color-grey-10; + padding-top: tokens.$spacing-lg; display: flex; - gap: $spacing-sm; + gap: tokens.$spacing-sm; } .estimatedTime { - @include estimated-time; - padding-top: $spacing-sm; + @include tokens.estimated-time; + padding-top: tokens.$spacing-sm; } } } .header { - font: $text-body-lg; + font: tokens.$text-body-lg; font-weight: 700; transition: opacity 0.35s ease-in-out; opacity: 1; @@ -74,44 +75,44 @@ cursor: pointer; } .headerRemovalGuide { - padding-top: $spacing-lg; - font: $text-body-xl; + padding-top: tokens.$spacing-lg; + font: tokens.$text-body-xl; font-weight: 700; } .buttonWrapper { display: flex; justify-content: center; - padding-top: $spacing-lg; + padding-top: tokens.$spacing-lg; } } .removalContentSection { - margin-top: $layout-md; + margin-top: tokens.$layout-md; dt { - font: $text-body-lg; + font: tokens.$text-body-lg; font-weight: 600; &.removalGuideInstructions { - font: $text-body-md; + font: tokens.$text-body-md; font-weight: 700; } } dd { - padding-top: $spacing-sm; + padding-top: tokens.$spacing-sm; } ol { - padding-top: $spacing-sm; + padding-top: tokens.$spacing-sm; li { - margin-bottom: $spacing-xs; + margin-bottom: tokens.$spacing-xs; } } button { - margin-top: $spacing-lg; + margin-top: tokens.$spacing-lg; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/view-data-brokers/AboutBrokersIcon.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/view-data-brokers/AboutBrokersIcon.module.scss index 0c3c4b37e83..aeb00cff05b 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/view-data-brokers/AboutBrokersIcon.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/view-data-brokers/AboutBrokersIcon.module.scss @@ -1,9 +1,9 @@ -@import "../../../../../../../../../tokens"; +@use "../../../../../../../../../tokens"; .triggerButton { border-style: none; background-color: transparent; - color: $color-purple-70; + color: tokens.$color-purple-70; aspect-ratio: 1 / 1; cursor: pointer; } @@ -11,14 +11,14 @@ .dialogContents { display: flex; flex-direction: column; - gap: $spacing-lg; - color: $color-grey-50; + gap: tokens.$spacing-lg; + color: tokens.$color-grey-50; .confirmButtonWrapper { align-self: center; display: flex; flex-direction: column; - min-width: $content-xs; - padding-block-start: $spacing-md; + min-width: tokens.$content-xs; + padding-block-start: tokens.$spacing-md; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/welcomeToPlus.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/welcomeToPlus.module.scss index 5c384512cf5..eccffe7af60 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/welcomeToPlus.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/welcomeToPlus.module.scss @@ -1,13 +1,13 @@ -@import "../../../../../../../../../tokens"; +@use "../../../../../../../../../tokens"; .contentWrapper { - max-width: $content-md; + max-width: tokens.$content-md; margin: 0 auto; text-align: center; display: flex; align-items: center; - gap: $spacing-xl; - @media screen and (max-width: $screen-xl) { + gap: tokens.$spacing-xl; + @media screen and (max-width: tokens.$screen-xl) { display: flex; flex-direction: column; align-items: center; @@ -18,13 +18,13 @@ display: flex; flex-direction: column; text-align: center; - gap: $spacing-md; + gap: tokens.$spacing-md; a { display: block; } - @media screen and (min-width: $screen-sm) { + @media screen and (min-width: tokens.$screen-sm) { display: flex; flex-direction: row; align-items: center; @@ -33,23 +33,23 @@ .content { text-align: left; - max-width: $content-sm; + max-width: tokens.$content-sm; margin: 0 auto; h3 { - font: $text-title-2xs; + font: tokens.$text-title-2xs; } p, h3 { - margin-block-end: $spacing-md; + margin-block-end: tokens.$spacing-md; text-align: left; } > a { - color: $color-blue-60; + color: tokens.$color-blue-60; display: inline-block; - margin-inline-start: $spacing-sm; + margin-inline-start: tokens.$spacing-sm; } } @@ -63,7 +63,7 @@ &.hideOnMobile { display: none; - @media screen and (min-width: $screen-xl) { + @media screen and (min-width: tokens.$screen-xl) { display: flex; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/fix.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/fix.module.scss index 918aca913ae..055e88ad47f 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/fix.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/fix.module.scss @@ -1,7 +1,7 @@ -@import "../../../../../../../tokens"; +@use "../../../../../../../tokens"; .fixContainer { - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; height: 100%; display: flex; align-items: center; @@ -9,17 +9,17 @@ // Set position relative so the child canvas can overlay position: relative; - @media screen and (min-width: $screen-md) { - padding: $layout-sm; + @media screen and (min-width: tokens.$screen-md) { + padding: tokens.$layout-sm; } .fixWrapper { - box-shadow: $box-shadow-xs; - border-radius: $border-radius-md; - max-width: $content-xl; + box-shadow: tokens.$box-shadow-xs; + border-radius: tokens.$border-radius-md; + max-width: tokens.$content-xl; width: 100%; - padding: $layout-xs; - background-color: $color-white; + padding: tokens.$layout-xs; + background-color: tokens.$color-white; background-size: cover; background-position: center; position: relative; @@ -27,7 +27,7 @@ display: flex; justify-content: center; flex-direction: column; - min-height: $content-sm; + min-height: tokens.$content-sm; &.contentBackgroundImage { background-image: url("./images/high-risk-breaches-content-background.svg"); @@ -36,23 +36,24 @@ .navClose { position: absolute; - right: $spacing-md; - top: $spacing-md; + right: tokens.$spacing-md; + top: tokens.$spacing-md; } .fixSection { display: flex; justify-content: stretch; align-items: center; - gap: $spacing-md; + gap: tokens.$spacing-md; - @media screen and (min-width: $screen-md) { + @media screen and (min-width: tokens.$screen-md) { // Add horizontal padding to account for next/prev arrow placement on larger screens - padding: $spacing-lg $spacing-2xl; + padding: tokens.$spacing-lg tokens.$spacing-2xl; } - @media screen and (min-width: $screen-xl) { - padding: $spacing-xl $spacing-lg $spacing-md $spacing-lg; + @media screen and (min-width: tokens.$screen-xl) { + padding: tokens.$spacing-xl tokens.$spacing-lg tokens.$spacing-md + tokens.$spacing-lg; } .navArrow { @@ -61,15 +62,15 @@ position: absolute; align-items: center; justify-content: center; - padding: $spacing-md; - border-radius: $border-radius-sm; - right: $spacing-md; + padding: tokens.$spacing-md; + border-radius: tokens.$border-radius-sm; + right: tokens.$spacing-md; &:hover { - background-color: $color-violet-20; + background-color: tokens.$color-violet-20; } - @media screen and (min-width: $screen-md) { + @media screen and (min-width: tokens.$screen-md) { display: flex; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/FraudAlertModal.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/FraudAlertModal.module.scss index c747c7d9375..b0eadd4431b 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/FraudAlertModal.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/FraudAlertModal.module.scss @@ -1,20 +1,20 @@ -@import "../../../../../../../../tokens"; +@use "../../../../../../../../tokens"; .triggerButton { - @include question-mark-circle-btn; + @include tokens.question-mark-circle-btn; } .dialogContents { display: flex; flex-direction: column; - gap: $spacing-lg; - color: $color-grey-50; + gap: tokens.$spacing-lg; + color: tokens.$color-grey-50; .confirmButtonWrapper { align-self: center; display: flex; flex-direction: column; - min-width: $content-xs; - padding-block-start: $spacing-md; + min-width: tokens.$content-xs; + padding-block-start: tokens.$spacing-md; } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.module.scss index a345bc7efa9..35b6447c73e 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.module.scss @@ -1,39 +1,39 @@ -@import "../../../../../../tokens"; +@use "../../../../../../tokens"; .wrapper { display: flex; flex-direction: column; - gap: $spacing-md; + gap: tokens.$spacing-md; .sectionTitle { h3 { - font: $text-title-3xs; + font: tokens.$text-title-3xs; } p { - color: $color-grey-40; + color: tokens.$color-grey-40; } } .radioGroup { display: flex; flex-direction: column; - gap: $spacing-md; + gap: tokens.$spacing-md; .emailAlertsOptions { - padding-inline-start: $spacing-lg; + padding-inline-start: tokens.$spacing-lg; display: flex; flex-direction: column; - gap: $spacing-sm; + gap: tokens.$spacing-sm; } .radioButton { - stroke: $color-black; + stroke: tokens.$color-black; } label { display: flex; - gap: $spacing-xs; + gap: tokens.$spacing-xs; div { display: flex; flex-direction: column; @@ -43,7 +43,7 @@ } p { - color: $color-grey-40; + color: tokens.$color-grey-40; } } @@ -53,11 +53,11 @@ } .focusRing { - stroke: $color-blue-50; + stroke: tokens.$color-blue-50; } .selectedFill { - fill: $color-black; + fill: tokens.$color-black; } } } diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss index 24e614b93ba..8f28bde754f 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss @@ -1,4 +1,4 @@ -@import "../../../../../../tokens"; +@use "../../../../../../tokens"; // The attribute selector makes this more specific that