From 5f014ecf758a56e807eba105234aec45c9de0196 Mon Sep 17 00:00:00 2001 From: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com> Date: Mon, 10 Jul 2023 08:15:01 -0700 Subject: [PATCH] chore: css: remove redundant font stack sass and use semantic variable (#660) --- src/components/Dialog/BaseDialog/base-dialog.module.scss | 2 +- src/components/Dialog/dialog.module.scss | 2 +- src/components/Dropdown/dropdown.module.scss | 4 ++-- src/components/Form/form.module.scss | 2 +- src/components/InfoBar/infoBar.module.scss | 2 +- src/components/Inputs/input.module.scss | 4 ++-- src/components/Label/label.module.scss | 2 +- src/components/Layout/layout.module.scss | 2 +- src/components/Link/link.module.scss | 2 +- src/components/List/list.module.scss | 2 +- src/components/Modal/modal.module.scss | 2 +- src/components/Navbar/navbar.module.scss | 2 +- src/components/Pagination/pagination.module.scss | 2 +- src/components/Panel/panel.module.scss | 2 +- src/components/PersistentBar/persistentBar.module.scss | 2 +- src/components/Select/select.module.scss | 2 +- src/components/Slider/slider.module.scss | 8 ++++---- src/components/Snackbar/snackbar.module.scss | 4 ++-- src/components/Table/Styles/table.module.scss | 2 +- src/components/Tabs/tabs.module.scss | 6 +++--- src/components/Tooltip/tooltip.module.scss | 2 +- src/components/Tree/Styles/tree.module.scss | 2 +- src/styles/themes/_definitions.scss | 2 -- 23 files changed, 30 insertions(+), 32 deletions(-) diff --git a/src/components/Dialog/BaseDialog/base-dialog.module.scss b/src/components/Dialog/BaseDialog/base-dialog.module.scss index ec040a279..1d30001d4 100644 --- a/src/components/Dialog/BaseDialog/base-dialog.module.scss +++ b/src/components/Dialog/BaseDialog/base-dialog.module.scss @@ -13,7 +13,7 @@ $dialog-body-bottom-shadow: inset 0 -11px 8px -10px align-items: center; display: flex; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); justify-content: center; .dialog { diff --git a/src/components/Dialog/dialog.module.scss b/src/components/Dialog/dialog.module.scss index eb4fd3685..448387a08 100644 --- a/src/components/Dialog/dialog.module.scss +++ b/src/components/Dialog/dialog.module.scss @@ -1,5 +1,5 @@ .dialog { - font-family: $octuple-font-family; + font-family: var(--font-stack-full); transform-origin: 50% 50%; width: 352px; diff --git a/src/components/Dropdown/dropdown.module.scss b/src/components/Dropdown/dropdown.module.scss index 6887e5f7e..74b6a357d 100644 --- a/src/components/Dropdown/dropdown.module.scss +++ b/src/components/Dropdown/dropdown.module.scss @@ -1,6 +1,6 @@ .main-wrapper { display: inline-block; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); white-space: nowrap; .reference-wrapper { @@ -24,7 +24,7 @@ padding: $space-xs; box-shadow: $shadow-object-m; border-radius: $border-radius-l; // TODO: ENG-46367 Add DropdownSize type and handle mapping via trigger size, then L 24px, M 20px, S 16px border-radius determined by size of the trigger. - font-family: $octuple-font-family; + font-family: var(--font-stack-full); min-width: 200px; opacity: 0; white-space: normal; diff --git a/src/components/Form/form.module.scss b/src/components/Form/form.module.scss index d5ddeb94a..b30d9d875 100644 --- a/src/components/Form/form.module.scss +++ b/src/components/Form/form.module.scss @@ -96,7 +96,7 @@ &-label { display: inline-block; flex-grow: 0; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); overflow: hidden; white-space: nowrap; text-align: right; diff --git a/src/components/InfoBar/infoBar.module.scss b/src/components/InfoBar/infoBar.module.scss index 8e14fc258..d62c8f189 100644 --- a/src/components/InfoBar/infoBar.module.scss +++ b/src/components/InfoBar/infoBar.module.scss @@ -3,7 +3,7 @@ border-radius: var(--info-bar-border-radius); color: var(--info-bar-text-color); display: flex; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); gap: $space-m; padding: $space-ml; width: 100%; diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss index 1dd037de1..7d4c52792 100644 --- a/src/components/Inputs/input.module.scss +++ b/src/components/Inputs/input.module.scss @@ -18,7 +18,7 @@ border-radius: $border-radius-m; box-sizing: border-box; color: var(--input-text-color); - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-size: $text-font-size-3; line-height: $text-line-height-1; min-width: 120px; @@ -966,7 +966,7 @@ border-radius: $border-radius-m; box-sizing: border-box; color: var(--input-text-color); - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-size: $text-font-size-3; line-height: $text-line-height-4; min-height: calc($text-line-height-4 + $space-xxxs + $space-xs * 2); diff --git a/src/components/Label/label.module.scss b/src/components/Label/label.module.scss index 6e0761bee..d8f16ba23 100644 --- a/src/components/Label/label.module.scss +++ b/src/components/Label/label.module.scss @@ -15,7 +15,7 @@ .text-style { color: var(--text-primary-color); - font-family: $octuple-font-family; + font-family: var(--font-stack-full); &.large { font-size: $text-font-size-5; diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss index 15e2f86f1..3ef559e08 100644 --- a/src/components/Layout/layout.module.scss +++ b/src/components/Layout/layout.module.scss @@ -2,7 +2,7 @@ display: flex; flex: auto; flex-direction: column; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); height: 100%; /* fix firefox can't set height smaller than content on flex item */ diff --git a/src/components/Link/link.module.scss b/src/components/Link/link.module.scss index fd337508f..4884935d1 100644 --- a/src/components/Link/link.module.scss +++ b/src/components/Link/link.module.scss @@ -1,6 +1,6 @@ .link-style { cursor: pointer; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-weight: $text-font-weight-semibold; font-size: $text-font-size-2; width: fit-content; diff --git a/src/components/List/list.module.scss b/src/components/List/list.module.scss index 734a868ad..0cbfe6d82 100644 --- a/src/components/List/list.module.scss +++ b/src/components/List/list.module.scss @@ -1,6 +1,6 @@ .list-container { display: flex; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); list-style: none; margin: 0; padding: 0; diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss index c44bf1bac..010fb7841 100644 --- a/src/components/Modal/modal.module.scss +++ b/src/components/Modal/modal.module.scss @@ -1,7 +1,7 @@ .modal { display: flex; flex-direction: column; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); max-height: 70vh; overflow: hidden; transform-origin: 50% 0; diff --git a/src/components/Navbar/navbar.module.scss b/src/components/Navbar/navbar.module.scss index 1d814a7db..eb7a22549 100644 --- a/src/components/Navbar/navbar.module.scss +++ b/src/components/Navbar/navbar.module.scss @@ -7,7 +7,7 @@ color: var(--navbar-text-color); display: flex; flex-direction: row; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); height: 60px; justify-content: space-between; padding: 0 $space-ml; diff --git a/src/components/Pagination/pagination.module.scss b/src/components/Pagination/pagination.module.scss index 6482e864b..6aaafde23 100644 --- a/src/components/Pagination/pagination.module.scss +++ b/src/components/Pagination/pagination.module.scss @@ -5,7 +5,7 @@ align-items: center; display: flex; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); padding: $space-xxs 0; span, diff --git a/src/components/Panel/panel.module.scss b/src/components/Panel/panel.module.scss index f8e8cc4e7..6c589fd3f 100644 --- a/src/components/Panel/panel.module.scss +++ b/src/components/Panel/panel.module.scss @@ -10,7 +10,7 @@ .panel { display: flex; flex-direction: column; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); position: absolute; padding: 0 $space-xl; background: var(--background-color); diff --git a/src/components/PersistentBar/persistentBar.module.scss b/src/components/PersistentBar/persistentBar.module.scss index 2b5b7649f..f6358b9fd 100644 --- a/src/components/PersistentBar/persistentBar.module.scss +++ b/src/components/PersistentBar/persistentBar.module.scss @@ -15,7 +15,7 @@ } .content { - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-style: normal; font-weight: $text-font-weight-light; font-size: $text-font-size-2; diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss index cfa40a916..29115b553 100644 --- a/src/components/Select/select.module.scss +++ b/src/components/Select/select.module.scss @@ -8,7 +8,7 @@ $multi-select-count-offset: 54px; } .select-wrapper { - font-family: $octuple-font-family; + font-family: var(--font-stack-full); position: relative; width: 100%; diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss index bf618d37d..86df83f4a 100644 --- a/src/components/Slider/slider.module.scss +++ b/src/components/Slider/slider.module.scss @@ -56,7 +56,7 @@ $small-min-label-offset-with-steps: 0; // Default size is medium .slider-container { - font-family: $octuple-font-family; + font-family: var(--font-stack-full); height: $medium-slider-height + $medium-label-height; position: relative; @@ -112,7 +112,7 @@ $small-min-label-offset-with-steps: 0; color: var(--slider-value-text-color); cursor: pointer; display: inline-block; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-size: $text-font-size-2; padding: 0 $space-xxxs; position: absolute; @@ -276,7 +276,7 @@ $small-min-label-offset-with-steps: 0; .slider-value { bottom: 0; color: var(--slider-value-text-color); - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-size: $text-font-size-2; padding: 0 $space-xxxs; position: absolute; @@ -285,7 +285,7 @@ $small-min-label-offset-with-steps: 0; .extremity-label { color: var(--slider-extremity-text-color); - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-size: $text-font-size-2; position: absolute; bottom: 0; diff --git a/src/components/Snackbar/snackbar.module.scss b/src/components/Snackbar/snackbar.module.scss index dde9e6a50..73efcf103 100644 --- a/src/components/Snackbar/snackbar.module.scss +++ b/src/components/Snackbar/snackbar.module.scss @@ -2,7 +2,7 @@ align-items: center; box-shadow: $shadow-object-l; border: none; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); min-width: 21vw; max-width: min(42vw, 640px); animation: slideUpIn $motion-duration-extra-fast $motion-easing-easeinout 0s @@ -20,7 +20,7 @@ } .snackbar-container { - font-family: $octuple-font-family; + font-family: var(--font-stack-full); position: fixed; width: fit-content; z-index: $z-index-600; diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss index 44c1329e4..f84da0835 100644 --- a/src/components/Table/Styles/table.module.scss +++ b/src/components/Table/Styles/table.module.scss @@ -8,7 +8,7 @@ .table { @include reset-component(); position: relative; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-size: $table-font-size; background: var(--table-background-color); diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss index e94c478d3..382daaaad 100644 --- a/src/components/Tabs/tabs.module.scss +++ b/src/components/Tabs/tabs.module.scss @@ -17,7 +17,7 @@ background: var(--tab-background); cursor: pointer; display: flex; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); justify-content: center; padding: $space-s $space-m; position: relative; @@ -63,7 +63,7 @@ } .label { - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-size: $text-font-size-3; font-weight: $text-font-weight-semibold; white-space: nowrap; @@ -277,7 +277,7 @@ border: var(--border-width) solid var(--border); border-radius: var(--border-radius); color: var(--label); - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-weight: $text-font-weight-semibold; height: var(--height); margin: 0 $space-s; diff --git a/src/components/Tooltip/tooltip.module.scss b/src/components/Tooltip/tooltip.module.scss index 621448044..b480602c7 100644 --- a/src/components/Tooltip/tooltip.module.scss +++ b/src/components/Tooltip/tooltip.module.scss @@ -30,7 +30,7 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12); background: var(--bg); border-radius: var(--tooltip-border-radius); color: var(--text-color); - font-family: $octuple-font-family; + font-family: var(--font-stack-full); font-size: $text-font-size-1; overflow-wrap: break-word; padding: $space-xs; diff --git a/src/components/Tree/Styles/tree.module.scss b/src/components/Tree/Styles/tree.module.scss index 76ae2e838..63441483f 100644 --- a/src/components/Tree/Styles/tree.module.scss +++ b/src/components/Tree/Styles/tree.module.scss @@ -8,7 +8,7 @@ $tree-node-hightlight-color: inherit; @include reset-component(); background: var(--background-color); border-radius: $tree-border-radius-base; - font-family: $octuple-font-family; + font-family: var(--font-stack-full); transition: background-color 0.3s; &-focused:not(:hover):not(&-active-focused) { diff --git a/src/styles/themes/_definitions.scss b/src/styles/themes/_definitions.scss index d7fe37295..932edf7c9 100644 --- a/src/styles/themes/_definitions.scss +++ b/src/styles/themes/_definitions.scss @@ -80,8 +80,6 @@ $tree-node-selected-bg: var(--primary-color); // BEGIN: NON-COLOR DEFINITIONS -$octuple-font-family: var(--font-stack-full); - $text-font-size-1: 12px; $text-font-size-2: 14px; $text-font-size-3: 16px;