VUU-41 style fixes

ScottLogic · Sep 18, 2023 · 8edb6f9 · 8edb6f9
1 parent dbe29bd
commit 8edb6f9
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 35 deletions.
diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css
@@ -36,4 +36,5 @@
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
   font-size: 16px;
   font-weight: 600;
+  font-family: Nunito Sans Regular;
 }
diff --git a/vuu-ui/packages/vuu-popups/src/menu/MenuList.css b/vuu-ui/packages/vuu-popups/src/menu/MenuList.css
@@ -18,7 +18,6 @@
 
   background-clip: padding-box;
   background-color: white;
-  border-style: var(--vuuMenuList-borderStyle, none);
   font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));
   font-weight: var(--salt-typography-fontWeight-medium);
   list-style: none;

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
@@ -1,21 +1,21 @@
+.vuuLayoutList {
+    align-self: stretch;
+}
+
 .vuuLayoutList-header {
     color: var(--light-text-primary, #15171B);
     font-weight: 700;
     letter-spacing: 0.48px;
     text-transform: uppercase;
     display: flex;
     padding: 16px 0px;
-    align-items: center;
-    align-self: stretch;
     border-bottom: 1px solid rgba(119, 124, 148, 0.10);
     line-height: 200%;
 }
 
 .vuuLayoutList-groupName {
     display: flex;
     padding-top: 24px;
-    align-items: center;
-    align-self: stretch;
     color: var(--light-text-secondary, #606477);
     font-weight: 700;
     letter-spacing: 0.48px;
@@ -27,7 +27,6 @@
     align-items: center;
     gap: 8px;
     padding: 8px 0px;
-    align-self: stretch;
     flex: 1 1 auto;
     cursor: pointer;
 }

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
@@ -38,6 +38,7 @@
 
 .saveLayoutPanel-inputText {
   color: var(--light-text-secondary, #606477);
+  font-family: Nunito Sans Regular;
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
   font-size: 12px;
   font-weight: 400;

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
@@ -71,14 +71,6 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
           <FormField className={formField}>
             <FormFieldLabel>Group</FormFieldLabel>
             <ComboBox
-              ListProps={{
-                style: {
-                  zIndex: 10000,
-                  border: "1px solid #777C94",
-                  borderRadius: 10,
-                  boxSizing: "border-box"
-                }
-              }}
               source={groups}
               allowFreeText={true}
               InputProps={{

diff --git a/vuu-ui/packages/vuu-theme/css/characteristics/focused.css b/vuu-ui/packages/vuu-theme/css/characteristics/focused.css
@@ -1,21 +1,7 @@
 .vuu-theme {
-  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
-  --salt-focused-outlineStyle: dotted;
-  --salt-focused-outlineWidth: 2px;
-  --salt-focused-outlineInset: 0;
-  --salt-focused-outlineOffset: 0;
-
-  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); /* CSS shortcut token: not in Figma */
+  --salt-editable-borderColor-active: var(--editable-border-active, #6D18BD);
 }
 
-.saltFocusVisible:after,
-.focused:focus:after,
-.focused:focus-visible:after {
-  content: "";
-  inset: var(--salt-focused-outlineInset);
-  outline-color: var(--salt-focused-outlineColor);
-  outline-offset: var(--salt-focused-outlineOffset);
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  position: absolute;
-}
+.saltInput-focused{
+  border-color: var(  --salt-editable-borderColor-active)!important;
+}
diff --git a/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css
@@ -1,4 +1,5 @@
 .vuuCheckbox {
+  --vuuCheckboxIcon-background-checked: var(--vuu-color-purple-10);
   display: flex;
   height: 24px;
   align-items: center;

diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/List.css b/vuu-ui/packages/vuu-ui-controls/src/list/List.css
@@ -12,16 +12,14 @@
   --vuuDraggable-transitionProp: height;
 
   background: var(--list-background);
-  border-color: var(--salt-container-primary-borderColor);
-  border-style: var(--list-borderStyle);
-  border-width: var(--list-borderWidth);
   height: var(--saltList-height, var(--list-height));
   max-height: var(--list-maxHeight);
   outline: none;
   overflow-y: auto;
   position: relative;
   user-select: none;
   width: var(--saltList-width, auto);
+  padding: 0 1px;
 }
 
 .vuuList-borderless {