Update toggle active styles

Nate Butler created 2 years ago

Change summary

styles/src/styleTree/contactList.ts         | 13 +++++
styles/src/styleTree/contextMenu.ts         |  8 ++
styles/src/styleTree/editor.ts              | 27 +++++++---
styles/src/styleTree/picker.ts              | 19 +++++++
styles/src/styleTree/projectPanel.ts        | 54 ++++++++++++++--------
styles/src/styleTree/search.ts              | 23 ++++++---
styles/src/styleTree/tabBar.ts              |  9 +++
styles/src/styleTree/toolbarDropdownMenu.ts |  9 ++-
styles/src/styleTree/workspace.ts           | 11 ++-
9 files changed, 126 insertions(+), 47 deletions(-)

Detailed changes

styles/src/styleTree/contactList.ts

@@ -83,7 +83,12 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                     background: background(layer, "default"), // posiewic: breaking change
                 },
                 state: {
-                    hovered: { background: background(layer, "default") },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    }
                 }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
             }),
             state: {
@@ -92,6 +97,12 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                         ...text(layer, "mono", "active", { size: "sm" }),
                         background: background(layer, "active"),
                     },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    }
                 }
             }
         }),

styles/src/styleTree/contextMenu.ts

@@ -40,6 +40,9 @@ export default function contextMenu(colorScheme: ColorScheme) {
                                 padding: { left: 3, right: 3 },
                             },
                         },
+                        clicked: {
+                            background: background(layer, "pressed"),
+                        },
                     },
                 }),
             state: {
@@ -48,7 +51,10 @@ export default function contextMenu(colorScheme: ColorScheme) {
                         background: background(layer, "active"),
                     },
                     hovered: {
-                        background: background(layer, "active"),
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
                     },
                 }
             }

styles/src/styleTree/editor.ts

@@ -56,18 +56,24 @@ export default function editor(colorScheme: ColorScheme) {
                             color: foreground(layer, "variant"),
                         },
                         state: {
-                            clicked: {
-                                color: foreground(layer, "base"),
-                            },
                             hovered: {
-                                color: foreground(layer, "on"),
+                                color: foreground(layer, "variant", "hovered"),
+                            },
+                            clicked: {
+                                color: foreground(layer, "variant", "pressed"),
                             },
                         },
                     }),
                 state: {
                     active: {
                         default: {
-                            color: foreground(layer, "on"),
+                            color: foreground(layer, "accent"),
+                        },
+                        hovered: {
+                            color: foreground(layer, "accent", "hovered"),
+                        },
+                        clicked: {
+                            color: foreground(layer, "accent", "pressed"),
                         },
                     }
                 }
@@ -87,18 +93,21 @@ export default function editor(colorScheme: ColorScheme) {
                             color: foreground(layer, "variant"),
                         },
                         state: {
-                            clicked: {
-                                color: foreground(layer, "base"),
-                            },
                             hovered: {
                                 color: foreground(layer, "on"),
                             },
+                            clicked: {
+                                color: foreground(layer, "base"),
+                            },
                         },
                     }),
                 state: {
                     active: {
                         default: {
-                            color: foreground(layer, "on"),
+                            color: foreground(layer, "default"),
+                        },
+                        hovered: {
+                            color: foreground(layer, "variant"),
                         },
                     }
                 }

styles/src/styleTree/picker.ts

@@ -67,6 +67,12 @@ export default function picker(colorScheme: ColorScheme): any {
                                 0.5
                             ),
                         },
+                        clicked: {
+                            background: withOpacity(
+                                background(layer, "pressed"),
+                                0.5
+                            ),
+                        },
                     },
                 }),
             state: {
@@ -76,7 +82,18 @@ export default function picker(colorScheme: ColorScheme): any {
                             background(layer, "base", "active"),
                             0.5
                         ),
-                        //text: text(layer, "sans", "base", "active"),
+                    },
+                    hovered: {
+                        background: withOpacity(
+                            background(layer, "hovered"),
+                            0.5
+                        ),
+                    },
+                    clicked: {
+                        background: withOpacity(
+                            background(layer, "pressed"),
+                            0.5
+                        ),
                     },
                 }
             }

styles/src/styleTree/projectPanel.ts

@@ -28,33 +28,44 @@ export default function projectPanel(colorScheme: ColorScheme) {
         },
     }
 
+    const default_entry = interactive({
+        base: {
+            ...baseEntry,
+            text: text(layer, "mono", "variant", { size: "sm" }),
+            status,
+        },
+        state: {
+            default: {
+                background: background(layer),
+            },
+            hovered: {
+                background: background(layer, "variant", "hovered"),
+            },
+            clicked: {
+                background: background(layer, "variant", "pressed"),
+            }
+        },
+    })
+
     let entry = toggleable({
-        base:
-            interactive({
+        base: default_entry,
+        state: {
+            active: interactive({
                 base: {
-                    ...baseEntry,
-                    text: text(layer, "mono", "variant", { size: "sm" }),
-                    status,
+                    ...default_entry
                 },
                 state: {
+                    default: {
+                        background: background(colorScheme.lowest),
+                    },
                     hovered: {
-                        background: background(layer, "variant", "hovered"),
+                        background: background(colorScheme.lowest, "hovered"),
+                    },
+                    clicked: {
+                        background: background(colorScheme.lowest, "pressed"),
                     },
                 },
             }),
-        state: {
-            active: {
-                default: {
-                    /*background: colorScheme.isLight
-                      ? withOpacity(background(layer, "active"), 0.5)
-                      : background(layer, "active") ,*/ // todo posiewic
-                    text: text(layer, "mono", "active", { size: "sm" }),
-                },
-                hovered: {
-                    //background: background(layer, "active"),
-                    text: text(layer, "mono", "active", { size: "sm" }),
-                },
-            }
         }
     }
     )
@@ -84,6 +95,11 @@ export default function projectPanel(colorScheme: ColorScheme) {
                     background: background(layer, "hovered"),
                     border: border(layer, "active"),
                 },
+                clicked: {
+                    ...text(layer, "sans", "default", { size: "sm" }),
+                    background: background(layer, "pressed"),
+                    border: border(layer, "active"),
+                }
             },
         }),
         background: background(layer),

styles/src/styleTree/search.ts

@@ -55,24 +55,28 @@ export default function search(colorScheme: ColorScheme) {
                         },
                     },
                     state: {
-                        clicked: {
-                            ...text(layer, "mono", "on", "pressed"),
-                            background: background(layer, "on", "pressed"),
-                            border: border(layer, "on", "pressed"),
-                        },
                         hovered: {
                             ...text(layer, "mono", "on", "hovered"),
                             background: background(layer, "on", "hovered"),
                             border: border(layer, "on", "hovered"),
                         },
+                        clicked: {
+                            ...text(layer, "mono", "on", "pressed"),
+                            background: background(layer, "on", "pressed"),
+                            border: border(layer, "on", "pressed"),
+                        },
                     },
                 }),
             state: {
                 active: {
                     default: {
-                        ...text(layer, "mono", "on", "inverted"),
-                        background: background(layer, "on", "inverted"),
-                        border: border(layer, "on", "inverted"),
+                        ...text(layer, "mono", "accent"),
+                    },
+                    hovered: {
+                        ...text(layer, "mono", "accent", "hovered"),
+                    },
+                    clicked: {
+                        ...text(layer, "mono", "accent", "pressed"),
                     },
                 }
             }
@@ -124,6 +128,9 @@ export default function search(colorScheme: ColorScheme) {
                 hovered: {
                     color: foreground(layer, "hovered"),
                 },
+                clicked: {
+                    color: foreground(layer, "pressed"),
+                },
             },
         }),
     }

styles/src/styleTree/tabBar.ts

@@ -100,6 +100,9 @@ export default function tabBar(colorScheme: ColorScheme) {
                         hovered: {
                             color: foreground(layer, "hovered"),
                         },
+                        clicked: {
+                            color: foreground(layer, "pressed"),
+                        },
                     },
                 }),
             state:
@@ -108,6 +111,12 @@ export default function tabBar(colorScheme: ColorScheme) {
                     default: {
                         color: foreground(layer, "accent"),
                     },
+                    hovered: {
+                        color: foreground(layer, "hovered"),
+                    },
+                    clicked: {
+                        color: foreground(layer, "pressed"),
+                    },
                 }
             }
         }

styles/src/styleTree/toolbarDropdownMenu.ts

@@ -19,13 +19,14 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
                 secondaryTextSpacing: 10,
                 padding: { left: 8, right: 8, top: 2, bottom: 2 },
                 cornerRadius: 6,
-                background: background(layer, "on"),
-                border: border(layer, "on", { overlay: true }),
+                background: background(layer, "on")
             },
             state: {
                 hovered: {
                     background: background(layer, "hovered"),
-                    ...text(layer, "sans", "hovered", { size: "sm" }),
+                },
+                clicked: {
+                    background: background(layer, "pressed"),
                 },
             },
         }),
@@ -55,7 +56,7 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
                         background: background(layer, "active"),
                     },
                     hovered: {
-                        background: background(layer, "active"),
+                        background: background(layer, "hovered"),
                     },
                 }
             }

styles/src/styleTree/workspace.ts

@@ -287,20 +287,23 @@ export default function workspace(colorScheme: ColorScheme) {
                         state: {
                             clicked: {
                                 background: background(layer, "variant", "pressed"),
-                                color: foreground(layer, "variant", "pressed"),
                             },
                             hovered: {
                                 background: background(layer, "variant", "hovered"),
-                                color: foreground(layer, "variant", "hovered"),
                             },
                         },
                     }), state:
                 {
                     active: {
                         default: {
-                            background: background(layer, "variant", "active"),
-                            color: foreground(layer, "variant", "active"),
+                            background: background(layer, "on", "default"),
                         },
+                        hovered: {
+                            background: background(layer, "on", "hovered"),
+                        },
+                        clicked: {
+                            background: background(layer, "on", "pressed"),
+                        }
                     }
                 }
             }