fix(scene hierarchy): cleaning up scene hierarchy ui

awslabs · Oct 29, 2024 · b1a11f3 · b1a11f3
1 parent 36a46c0
commit b1a11f3
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 46 deletions.
diff --git a/packages/scene-composer/src/components/Tree/tree.scss b/packages/scene-composer/src/components/Tree/tree.scss
@@ -1,17 +1,17 @@
-$background: #2a2e33;
-$background-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(42, 46, 51, 1) 38%, rgba(42, 46, 51, 1) 100%);
-$background-hover: #414750;
-$border: 1px solid $background;
-$text-color: #d5dbdb;
-$active-highlight: #00a1c9;
-$active-bg: #12293b;
-$active-bg-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(18, 41, 59, 1) 38%, rgba(18, 41, 59, 1) 100%);
+@use '@cloudscape-design/design-tokens/index.scss' as awsui;
+
+$background: awsui.$color-background-container-content;
+$background-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, awsui.$color-background-container-content 38%, awsui.$color-background-container-content 100%);
+$background-hover: awsui.$color-background-button-normal-hover;
+$border: 1px solid awsui.$color-border-control-default;
+$text-color: awsui.$color-text-body-default;
+$active-bg: awsui.$color-background-button-normal-hover;
+$active-bg-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, awsui.$color-background-button-normal-hover 38%, awsui.$color-background-button-normal-hover 100%);
 $indent: 1rem;
-$active-color: #ec7211;
 
 @mixin selected {
-  border-top: 1px solid $active-highlight;
-  border-bottom: 1px solid $active-highlight;
+  border-top: 1px solid awsui.$color-border-button-normal-hover;
+  margin-bottom: 1px;;
   background: $active-bg;
 }
 @mixin selected-action {
@@ -21,7 +21,7 @@ $active-color: #ec7211;
 }
 @mixin hover {
   @include selected;
-  color: $active-color;
+  color: awsui.$color-text-button-normal-hover;
 }
 
 #tm-main {
@@ -33,7 +33,6 @@ $active-color: #ec7211;
   }
 
   .tm-tree {
-    border-top: $border;
     list-style-position: outside;
     list-style-type: none;
     margin: 0;
@@ -48,7 +47,7 @@ $active-color: #ec7211;
 
     &.drop,
     .drop {
-      border-bottom: 3px solid #fff;
+      border-bottom: 3px solid awsui.$color-border-button-normal-active;
     }
 
     .tm-tree-item {
@@ -61,6 +60,7 @@ $active-color: #ec7211;
         padding-left: 2rem;
         align-items: center;
         display: flex;
+        border-top: $border;
 
         .tm-tree-item-expand-btn {
           min-width: unset;
@@ -81,26 +81,17 @@ $active-color: #ec7211;
           }
 
           .actions {
-            background-color: var(--color-background-container-content-o88wxm, #ffffff); // fallback for gradient
             background: $background-gradient;
             position: sticky;
             right: 0;
             padding-right: 12px;
-            color: $active-color;
+            color: awsui.$color-text-button-normal-hover;
           }
         }
 
         &:hover {
-          margin-top: -1px; // Cancells out movement from hover/selected border
-          margin-bottom: 0px; // Cancells out movement from hover/selected border
           @include hover;
-
-          .tm-scene-node-label-inner {
-            border: none;
-            @include selected;
-            margin-bottom: -1px;
-            margin-top: -2px;
-          }
+          @include selected;
 
           .actions {
             @include selected-action;
@@ -112,7 +103,7 @@ $active-color: #ec7211;
           .tm-visibility-toggle,
           .tm-tree-item-expand-btn {
             svg {
-              color: $active-color;
+              color: awsui.$color-text-button-normal-hover;
             }
           }
         }

diff --git a/...poser/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss b/...poser/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss
@@ -1,9 +1,11 @@
-$background: #414750;
-$border: #2a2e33;
-$active-bg: #12293b;
-$active-bg-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(18, 41, 59, 1) 38%, rgba(18, 41, 59, 1) 100%);
-$active-highlight: #00a1c9;
-$active-color: #ec7211;
+@use '@cloudscape-design/design-tokens/index.scss' as awsui;
+
+$background: awsui.$color-background-control-disabled;
+$border: 1px solid awsui.$color-border-control-default;
+$active-bg: awsui.$color-background-button-normal-active;
+$active-bg-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, $active-bg 38%, $active-bg 100%);
+$active-highlight: awsui.$color-background-button-normal-hover;
+$active-color: awsui.$color-text-body-secondary;
 
 @mixin selected {
   border-top: 1px solid $active-highlight;
@@ -18,16 +20,12 @@ $active-color: #ec7211;
         background-color: $background;
 
         .tm-tree-item-inner {
-          .tm-scene-node-label {
-            .tm-scene-node-label-inner {
-              border-bottom: 1px solid $border;
-              background-color: $background;
-            }
-          }
+          margin-bottom: -1px;
+          border-bottom: $border;
 
           .actions {
             background-color: $background; // fallback for gradient
-            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(65, 71, 80, 1) 29%, rgba(65, 71, 80, 1) 100%);
+            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, $background 29%, $background 100%);
             display: flex;
             margin-top: -3px;
             margin-bottom: -1px;
@@ -37,11 +35,11 @@ $active-color: #ec7211;
 
           &:hover {
             margin-top: 0;
+            background: $active-bg;
 
             .tm-scene-node-label {
               .tm-scene-node-label-inner {
                 border: none;
-                @include selected;
                 margin-bottom: -1px;
                 margin-top: -2px;
               }
@@ -51,7 +49,6 @@ $active-color: #ec7211;
               color: $active-color;
             }
             .actions {
-              background-color: $active-bg;
               background: $active-bg-gradient;
             }
           }

diff --git a/...cene-composer/src/components/panels/scene-settings/SceneBackgroundSettingsEditor.spec.tsx b/...cene-composer/src/components/panels/scene-settings/SceneBackgroundSettingsEditor.spec.tsx
@@ -50,7 +50,7 @@ describe('SceneBackgroundSettingsEditor', () => {
 
     expect(setScenePropertyMock).toBeCalledTimes(1);
     expect(setScenePropertyMock).toBeCalledWith(KnownSceneProperty.SceneBackgroundSettings, {
-      color: '#2a2e33',
+      color: 'colorBackgroundContainerContent',
     });
   });
 
@@ -142,7 +142,7 @@ describe('SceneBackgroundSettingsEditor', () => {
       removeTextureButton!.click();
     });
     expect(setScenePropertyMock).toBeCalledWith(KnownSceneProperty.SceneBackgroundSettings, {
-      color: '#2a2e33',
+      color: 'colorBackgroundContainerContent',
     });
   });
 });
diff --git a/packages/scene-composer/src/enhancers/draggable.scss b/packages/scene-composer/src/enhancers/draggable.scss
@@ -5,6 +5,6 @@
     content: url("data:image/svg+xml,%3Csvg width='4' height='19' viewBox='0 0 4 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.5' y1='0.5' x2='0.499999' y2='18.5' stroke='%23879596'/%3E%3Cline x1='2.96094' y1='0.5' x2='2.96094' y2='18.5' stroke='%23879596'/%3E%3C/svg%3E");
     position: absolute;
     left: 0;
-    margin: 1.6rem 1rem 1rem 0.75rem;
+    padding: 1.6rem 1rem 1rem 0.75rem;
   }
 }
diff --git a/packages/scene-composer/src/interfaces/interfaces.tsx b/packages/scene-composer/src/interfaces/interfaces.tsx
@@ -4,7 +4,7 @@
  * These interfaces are used to interact with the SceneComposer instance at
  * runtime, thus the data structure is slightly different from the GLTF Toolkit.
  */
-
+import * as awsui from '@cloudscape-design/design-tokens';
 import { ReactElement } from 'react';
 
 import { ISceneNodeInternal } from '../store/Store';
@@ -163,7 +163,7 @@ export interface ISceneBackgroundSetting {
   color?: string;
   textureUri?: string;
 }
-export const DEFAULT_SCENE_BACKGROUND_COLOR = '#2a2e33';
+export const DEFAULT_SCENE_BACKGROUND_COLOR = awsui.colorBackgroundContainerContent;
 
 export interface IGroundPlaneSettings {
   color?: string;