fix: improve UI of button disabled

meetio-theme · Mar 28, 2023 · 1e8801a · 1e8801a
1 parent 3d83870
commit 1e8801a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 7 deletions.
diff --git a/Meetio Theme High Contrast.sublime-theme b/Meetio Theme High Contrast.sublime-theme
@@ -98,8 +98,8 @@
         "sidebarHeadingFontSize": "var(fontSizeSm)",
         "sidebarLabelFontSize": "var(fontSizeMd)",
         "sidebarLabelPadding": [
-            14,
-            3
+            16,
+            4
         ],
         "sidebarIndent": 20,
         "sidebarIndentOffset": 14,
@@ -256,6 +256,17 @@
                 "interpolation": "smoothstep"
             }
         },
+        {
+            "class": "button_control",
+            "attributes": [
+                "disabled"
+            ],
+            "layer0.opacity": {
+                "target": 0,
+                "speed": 0,
+                "interpolation": "smoothstep"
+            }
+        },
         {
             "class": "button_control",
             "min_size": "var(buttonMedium)",

diff --git a/Meetio Theme.sublime-theme b/Meetio Theme.sublime-theme
@@ -98,8 +98,8 @@
         "sidebarHeadingFontSize": "var(fontSizeSm)",
         "sidebarLabelFontSize": "var(fontSizeMd)",
         "sidebarLabelPadding": [
-            14,
-            3
+            16,
+            4
         ],
         "sidebarIndent": 20,
         "sidebarIndentOffset": 14,
@@ -254,6 +254,17 @@
                 "interpolation": "smoothstep"
             }
         },
+        {
+            "class": "button_control",
+            "attributes": [
+                "disabled"
+            ],
+            "layer0.opacity": {
+                "target": 0,
+                "speed": 0,
+                "interpolation": "smoothstep"
+            }
+        },
         {
             "class": "button_control",
             "min_size": "var(buttonMedium)",

diff --git a/src/theme.ts b/src/theme.ts
@@ -56,7 +56,7 @@ export const variables: ThemeVariables = {
     sidebarBorder: 'var(sidebarBackground)',
     sidebarHeadingFontSize: 'var(fontSizeSm)',
     sidebarLabelFontSize: 'var(fontSizeMd)',
-    sidebarLabelPadding: [14, 3],
+    sidebarLabelPadding: [16, 4],
     sidebarIndent: 20,
     sidebarIndentOffset: 14,
     sidebarLabelColor: 'color(var(background) blend(var(foreground) 30%))',
@@ -177,6 +177,15 @@ export const rules = [
             interpolation: 'smoothstep',
         },
     },
+    {
+        class: 'button_control',
+        attributes: ['disabled'],
+        'layer0.opacity': {
+            target: 0,
+            speed: 0,
+            interpolation: 'smoothstep',
+        },
+    },
     {
         class: 'button_control',
         min_size: 'var(buttonMedium)',

diff --git a/themes/Meetio Theme.hidden-theme b/themes/Meetio Theme.hidden-theme
@@ -97,8 +97,8 @@
         "sidebarHeadingFontSize": "var(fontSizeSm)",
         "sidebarLabelFontSize": "var(fontSizeMd)",
         "sidebarLabelPadding": [
-            14,
-            3
+            16,
+            4
         ],
         "sidebarIndent": 20,
         "sidebarIndentOffset": 14,
@@ -253,6 +253,17 @@
                 "interpolation": "smoothstep"
             }
         },
+        {
+            "class": "button_control",
+            "attributes": [
+                "disabled"
+            ],
+            "layer0.opacity": {
+                "target": 0,
+                "speed": 0,
+                "interpolation": "smoothstep"
+            }
+        },
         {
             "class": "button_control",
             "min_size": "var(buttonMedium)",