From 4d6e93a2fee9c59a1693d73366e1457391ae8f2b Mon Sep 17 00:00:00 2001 From: Kevin Schiffer Date: Tue, 23 Jan 2024 14:36:14 +0900 Subject: [PATCH] console,account: Refactor color assignments for new components --- .../dedicated-entity/dedicated-entity.styl | 12 ++++++------ .../sidebar/search-button/search-button.styl | 11 +++++------ .../components/sidebar/section-label/index.js | 2 +- .../components/sidebar/side-menu/item/item.styl | 10 +++++----- .../components/sidebar/switcher/switcher.styl | 17 ++++++----------- pkg/webui/components/table/row/row.styl | 2 +- pkg/webui/console/components/events/events.styl | 2 +- 7 files changed, 25 insertions(+), 31 deletions(-) diff --git a/pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl b/pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl index 7e274f49b9..92aea11d14 100644 --- a/pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl +++ b/pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl @@ -15,7 +15,7 @@ .dedicated-entity text-decoration: none line-height: 1.6rem - color: $c.grey-900 + color: var(--c-text-neutral-heavy) position: relative height: 2.5rem @@ -39,7 +39,7 @@ &-item display: flex - color: $c.grey-900 + color: var(--c-text-neutral-heavy) opacity: 1 position: absolute left: 2.5rem @@ -55,13 +55,13 @@ display: list-item height: 100% margin: 0 $cs.xs 0 $cs.s - border-left: 1px solid $c.grey-200 - background-color: $c.grey-200 + border-left: 1px solid var(--c-border-neutral-semilight) + background-color: var(--c-border-neutral-light) &-button border-radius: $br.l padding: 0 $cs.xs 0 0.73rem - background-color: $c.grey-900 + background-color: var(--c-bg-neutral-heavy) position: relative display: inline-flex border-radius: $br.l @@ -84,4 +84,4 @@ &:not(:disabled) +focus-visible() - background-color: hoverize($c.grey-500) + background-color: var(--c-bg-neutral-light) diff --git a/pkg/webui/components/sidebar/search-button/search-button.styl b/pkg/webui/components/sidebar/search-button/search-button.styl index c6788c6aed..a072d8f1ed 100644 --- a/pkg/webui/components/sidebar/search-button/search-button.styl +++ b/pkg/webui/components/sidebar/search-button/search-button.styl @@ -14,7 +14,7 @@ .search-button font-size: $fs.m - color: $c.grey-500 + color: var(--c-text-neutral-light) width: 100% position: relative display: flex @@ -24,14 +24,13 @@ gap: $cs.xxs box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.06) background: var(--c-bg-neutral-min) - border: 1px solid $c.grey-200 + border: 1px solid var(--c-border-neutral-semilight) border-radius: $br.l transition: border-color 0.08s linear, box-shadow 0.08s linear, color 0.08s linear &:hover - border: 1px solid $c.grey-200 - color: $c.grey-700 + color: var(--c-text-neutral-min-hover) box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08) &.is-minimized @@ -58,7 +57,7 @@ width: 1.65rem // 24px text-align: center border-radius: $br.m - border: 1px solid $c.grey-200 + border: 1px solid var(--c-border-neutral-light) font-size: $fs.m display: flex justify-content: center @@ -68,4 +67,4 @@ .fly-out-list --dropdown-offset: calc(.75rem - 2px) top: - $cs.xs - color: $c.grey-900 + color: var(--c-text-neutral-heavy) diff --git a/pkg/webui/components/sidebar/section-label/index.js b/pkg/webui/components/sidebar/section-label/index.js index 0fe80aa179..1895e8abea 100644 --- a/pkg/webui/components/sidebar/section-label/index.js +++ b/pkg/webui/components/sidebar/section-label/index.js @@ -35,7 +35,7 @@ const SectionLabel = ({ 'd-flex', 'j-between', 'al-center', - 'c-grey-500', + 'c-text-neutral-light', 'ml-cs-s', 'fs-s', )} diff --git a/pkg/webui/components/sidebar/side-menu/item/item.styl b/pkg/webui/components/sidebar/side-menu/item/item.styl index 2fc2256cb3..5c565fbd6d 100644 --- a/pkg/webui/components/sidebar/side-menu/item/item.styl +++ b/pkg/webui/components/sidebar/side-menu/item/item.styl @@ -48,7 +48,7 @@ transition: color 50ms linear border-radius: $br.m text-decoration: none - color: $c.grey-700 + color: var(--c-text-neutral-semilight) display: flex align-items: center gap: $cs.xs @@ -59,20 +59,20 @@ padding-left: $cs.xs &.active - background: $c.tts-primary-150 - color: $c.grey-900 + background: var(--c-bg-neutral-light) + color: var(--c-text-neutral-heavy) .icon color: inherit &.disabled - color: $c.grey-400 + color: var(--c-text-neutral-extralight) .icon color: inherit &:hover - color: $c.grey-900 + color: var(--c-text-neutral-heavy) .icon color: inherit diff --git a/pkg/webui/components/sidebar/switcher/switcher.styl b/pkg/webui/components/sidebar/switcher/switcher.styl index 185d42eeb7..c827045822 100644 --- a/pkg/webui/components/sidebar/switcher/switcher.styl +++ b/pkg/webui/components/sidebar/switcher/switcher.styl @@ -14,7 +14,7 @@ .switcher-container border-radius: $br.l - border: 1px solid $c.grey-200 + border: 1px solid var(--c-border-neutral-light) background: var(--c-bg-neutral-min) box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.06) display: flex @@ -25,7 +25,7 @@ .link border-radius: $br.m text-decoration: none - color: $c.grey-700 + color: var(--c-text-neutral-semilight) display: flex justify-content: center width: 100% @@ -34,19 +34,14 @@ padding: $cs.s $cs.xxs &.active - background: $c.grey-900 - color: $c.white + background: var(--c-bg-neutral-heavy) + color: var(--c-text-neutral-min) font-weight: $fw.bold - &:visited - text-decoration: none - &:not(.active) - color: $c.grey-700 - &:hover text-decoration: none &:not(.active) - background: $c.grey-100 + background: var(--c-bg-neutral-light) &.is-minimized flex-direction: column @@ -68,4 +63,4 @@ .fly-out-list --dropdown-offset: calc(1rem - 2px) top: - $cs.xs - color: $c.grey-900 + color: var(--c-text-neutral-heavy) diff --git a/pkg/webui/components/table/row/row.styl b/pkg/webui/components/table/row/row.styl index d525ef18ad..f3f889b02b 100644 --- a/pkg/webui/components/table/row/row.styl +++ b/pkg/webui/components/table/row/row.styl @@ -31,4 +31,4 @@ color: unset &:hover - background-color: var(--c-bg-neutral-light) + background-color: var(--c-bg-neutral-min-hover) diff --git a/pkg/webui/console/components/events/events.styl b/pkg/webui/console/components/events/events.styl index 7d7dec0a6c..22e56c9a2b 100644 --- a/pkg/webui/console/components/events/events.styl +++ b/pkg/webui/console/components/events/events.styl @@ -105,7 +105,7 @@ $event-container-height = 40px .body overflow: hidden - background-color: var(--c-bg-neutral-light) + background-color: var(--c-bg-brand-extralight) flex-grow: 1 position: relative