Merge branch 'main' into fix-button-group-props

ClickHouse · Oct 12, 2023 · b39fd9d · b39fd9d
2 parents 2745645 + d3c7bcc
commit b39fd9d
Show file tree

Hide file tree

Showing 11 changed files with 1,245 additions and 336 deletions.
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from "@/components";
+import { Spacer, Tabs, Text } from "@/components";
 import type { StoryObj } from "@storybook/react";
 
 export default {
@@ -21,24 +21,33 @@ export const Playground: Story = {
             value="tab1"
             key="tab1"
           >
-            tab1
+            Tab 1
           </Tabs.Trigger>
           <Tabs.Trigger
             value="tab2"
             key="tab2"
           >
-            tab2
+            Tab 2
           </Tabs.Trigger>
           <Tabs.Trigger
             value="tab3"
             key="tab3"
           >
-            tab3
+            Tab 3
           </Tabs.Trigger>
         </Tabs.TriggersList>
-        <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
-        <Tabs.Content value="tab2">Tab 2 content</Tabs.Content>
-        <Tabs.Content value="tab3">Tab 3 content</Tabs.Content>
+        <Tabs.Content value="tab1">
+          <Spacer />
+          <Text>Tab 1 content</Text>
+        </Tabs.Content>
+        <Tabs.Content value="tab2">
+          <Spacer />
+          <Text>Tab 2 content</Text>
+        </Tabs.Content>
+        <Tabs.Content value="tab3">
+          <Spacer />
+          <Text>Tab 3 content</Text>
+        </Tabs.Content>
       </>
     ),
   },

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -22,38 +22,38 @@ const Trigger = styled(RadixTabs.Trigger)`
   border-top-left-radius: ${props => props.theme.click.tabs.radii.all};
   border-top-right-radius: ${props => props.theme.click.tabs.radii.all};
 
-  border-bottom: ${props => props.theme.click.tabs.basic.stroke.default};
-  background-color: ${props =>
-    props.theme.click.tabs.basic.color.background.default};
+  border-bottom: 2px solid ${props => props.theme.click.tabs.basic.stroke.default};
+  background-color: ${props => props.theme.click.tabs.basic.color.background.default};
   color: ${props => props.theme.click.tabs.basic.color.text.default};
   font: ${props => props.theme.click.tabs.typography.label.default};
   cursor: pointer;
 
   &[data-state="active"] {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.active};
-    background-color: ${props =>
-      props.theme.click.tabs.basic.color.background.active};
+    border-bottom: 2px solid ${props => props.theme.click.tabs.basic.color.stroke.active};
+    background-color: ${props => props.theme.click.tabs.basic.color.background.active};
     color: ${props => props.theme.click.tabs.basic.color.text.active};
     font: ${props => props.theme.click.tabs.typography.label.active};
+    &:hover {
+      font: ${props => props.theme.click.tabs.typography.label.active};
+    }
   }
 
   &:hover {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.hover};
-    background-color: ${props =>
-      props.theme.click.tabs.basic.color.background.hover};
+    border-bottom: 2px solid ${props => props.theme.click.tabs.basic.stroke.hover};
+    background-color: ${props => props.theme.click.tabs.basic.color.background.hover};
     color: ${props => props.theme.click.tabs.basic.color.text.hover};
     font: ${props => props.theme.click.tabs.typography.label.hover};
   }
 
   &:hover[data-state="active"] {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.active};
+    border-bottom: 2px solid ${props => props.theme.click.tabs.basic.stroke.active};
   }
 `;
 
 const Content = styled(RadixTabs.Content)``;
 
 const TriggersList = styled(RadixTabs.List)`
-  border-bottom: ${props => props.theme.click.tabs.basic.stroke.global};
+  border-bottom: 1px solid ${props => props.theme.click.global.color.stroke.default};
 `;
 
 const Tabs = ({

diff --git a/src/styles/types.ts b/src/styles/types.ts
@@ -804,30 +804,60 @@
             "disabled": string
           }
         },
-        "color": {
-          "background": {
-            "default": string,
-            "hover": string,
-            "active": string,
-            "disabled": string
-          },
-          "title": {
-            "default": string,
-            "hover": string,
-            "active": string,
-            "disabled": string
-          },
-          "description": {
-            "default": string,
-            "hover": string,
-            "active": string,
-            "disabled": string
-          },
-          "stroke": {
-            "default": string,
-            "hover": string,
-            "active": string,
-            "disabled": string
+        "default": {
+          "color": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "title": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "description": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
+          }
+        },
+        "muted": {
+          "color": {
+            "background": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "title": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "description": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            },
+            "stroke": {
+              "default": string,
+              "hover": string,
+              "active": string,
+              "disabled": string
+            }
           }
         }
       }
@@ -2186,6 +2216,36 @@
     }
   },
   "name": string,
+  "global": {
+    "color": {
+      "background": {
+        "default": string,
+        "muted": string
+      },
+      "text": {
+        "default": string,
+        "muted": string,
+        "link": {
+          "default": string,
+          "hover": string
+        }
+      },
+      "stroke": {
+        "default": string,
+        "muted": string,
+        "intense": string
+      },
+      "accent": {
+        "default": string
+      },
+      "outline": {
+        "default": string
+      },
+      "shadow": {
+        "default": string
+      }
+    }
+  },
   "palette": {
     "brand": {
       "50": string,

diff --git a/src/styles/variables.classic.json b/src/styles/variables.classic.json
@@ -264,6 +264,92 @@
             "disabled": "#a0a0a0"
           }
         }
+      },
+      "primary": {
+        "color": {
+          "background": {
+            "default": "#ffffff",
+            "hover": "#f6f7fa",
+            "active": "lch(92.4 1.49 272)",
+            "disabled": "#dfdfdf"
+          },
+          "title": {
+            "default": "#161517",
+            "hover": "#161517",
+            "active": "#161517",
+            "disabled": "#a0a0a0"
+          },
+          "description": {
+            "default": "#696e79",
+            "hover": "#696e79",
+            "active": "#696e79",
+            "disabled": "#a0a0a0"
+          },
+          "stroke": {
+            "default": "lch(91.6 1.1 266)",
+            "hover": "lch(91.6 1.1 266)",
+            "active": "#151515",
+            "disabled": "#dfdfdf"
+          }
+        }
+      },
+      "horizontal": {
+        "default": {
+          "color": {
+            "background": {
+              "default": "#ffffff",
+              "hover": "#f6f7fa",
+              "active": "#f6f7fa",
+              "disabled": "#dfdfdf"
+            },
+            "title": {
+              "default": "#161517",
+              "hover": "#161517",
+              "active": "#161517",
+              "disabled": "#a0a0a0"
+            },
+            "description": {
+              "default": "#696e79",
+              "hover": "#696e79",
+              "active": "#696e79",
+              "disabled": "#a0a0a0"
+            },
+            "stroke": {
+              "default": "lch(91.6 1.1 266)",
+              "hover": "lch(91.6 1.1 266)",
+              "active": "#151515",
+              "disabled": "#dfdfdf"
+            }
+          }
+        },
+        "muted": {
+          "color": {
+            "background": {
+              "default": "#f6f7fa",
+              "hover": "#ffffff",
+              "active": "#f6f7fa",
+              "disabled": "#dfdfdf"
+            },
+            "title": {
+              "default": "#161517",
+              "hover": "#161517",
+              "active": "#161517",
+              "disabled": "#a0a0a0"
+            },
+            "description": {
+              "default": "#696e79",
+              "hover": "#696e79",
+              "active": "#696e79",
+              "disabled": "#a0a0a0"
+            },
+            "stroke": {
+              "default": "lch(91.6 1.1 266)",
+              "hover": "lch(91.6 1.1 266)",
+              "active": "#151515",
+              "disabled": "#dfdfdf"
+            }
+          }
+        }
       }
     },
     "sidebar": {
@@ -397,6 +483,49 @@
         }
       }
     },
+    "tabs": {
+      "basic": {
+        "color": {
+          "background": {
+            "default": "rgba(0,0,0,0)",
+            "hover": "#f6f7fa",
+            "active": "rgba(0,0,0,0)"
+          },
+          "text": {
+            "default": "#696e79",
+            "hover": "#161517",
+            "active": "#161517"
+          },
+          "stroke": {
+            "default": "rgba(0,0,0,0)",
+            "hover": "rgba(0,0,0,0)",
+            "active": "#FFC029"
+          },
+          "global": {
+            "default": "lch(91.6 1.1 266)"
+          }
+        }
+      },
+      "fileTabs": {
+        "color": {
+          "background": {
+            "default": "#f6f7fa",
+            "hover": "#ffffff",
+            "active": "#ffffff"
+          },
+          "text": {
+            "default": "#696e79",
+            "hover": "#161517",
+            "active": "#161517"
+          },
+          "stroke": {
+            "default": "lch(91.6 1.1 266)",
+            "hover": "lch(91.6 1.1 266)",
+            "active": "lch(91.6 1.1 266)"
+          }
+        }
+      }
+    },
     "flyout": {
       "color": {
         "background": {
@@ -432,5 +561,35 @@
       }
     }
   },
-  "name": "classic"
+  "name": "classic",
+  "global": {
+    "color": {
+      "background": {
+        "default": "#ffffff",
+        "muted": "#f6f7fa"
+      },
+      "text": {
+        "default": "#161517",
+        "muted": "#696e79",
+        "link": {
+          "default": "#C78F0F",
+          "hover": "#C78F0F"
+        }
+      },
+      "stroke": {
+        "default": "lch(91.6 1.1 266)",
+        "muted": "lch(91.6 1.1 266)",
+        "intense": "#b3b6bd"
+      },
+      "accent": {
+        "default": "#151515"
+      },
+      "outline": {
+        "default": "#C78F0F"
+      },
+      "shadow": {
+        "default": "lch(6.77 0 0 / 0.15)"
+      }
+    }
+  }
 }