console,account: Refactor color assignments for new components

TheThingsNetwork · Jan 23, 2024 · 4d6e93a · 4d6e93a
1 parent f300faa
commit 4d6e93a
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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