fix(Sortable): Sortable icon size and align on Table and List

leemonade · Jan 18, 2024 · 78f609f · 78f609f
1 parent 64325cd
commit 78f609f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 18 deletions.
diff --git a/packages/components/src/informative/SortableList/SortableList.styles.js b/packages/components/src/informative/SortableList/SortableList.styles.js
@@ -1,10 +1,10 @@
 import { createStyles } from '@mantine/styles';
 
-export const SortableListStyles = createStyles((theme, {}) => {
-  return {
-    sortableIcon: {
-      height: theme.spacing[3],
-      color: theme.colors.text02,
-    },
-  };
-});
+const SortableListStyles = createStyles((theme, {}) => ({
+  sortableIcon: {
+    height: 16,
+    color: theme.other.buttonAction.content.color.primary.default,
+  },
+}));
+
+export { SortableListStyles };
diff --git a/packages/components/src/informative/Table/Table.js b/packages/components/src/informative/Table/Table.js
@@ -165,7 +165,7 @@ const Table = ({
                           ref={draggableProvided.innerRef}
                         >
                           {!!sortable && (
-                            <td>
+                            <td style={{ verticalAlign: 'middle' }}>
                               <Box
                                 className={classes.sortIcon}
                                 style={{ paddingLeft: snapshot.isDragging ? 10 : 0 }}

diff --git a/packages/components/src/informative/Table/Table.styles.js b/packages/components/src/informative/Table/Table.styles.js
@@ -70,9 +70,8 @@ const TableStyles = createStyles((theme, { disabled, canAdd, headerStyles = {} }
       // display: 'inline-flex',
     },
     sortIcon: {
-      color: theme.colors.ui01,
+      color: theme.other.buttonAction.content.color.primary.default,
       cursor: 'grab',
-      paddingTop: theme.spacing[3],
     },
   };
 });

diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1153,7 +1153,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff26",
+          "color": "#ffffff",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1234,8 +1234,17 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff26",
-            "type": "color"
+            "value": "#ffffff",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.15",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#F1FFBD",
@@ -4930,12 +4939,30 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4d535866",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "hover": {
-            "value": "#4d5358b3",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.7",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#4D5358",