TabMenu and misc updates

packages/core/src/components/layout/box/Box.tsx

@@ -70,6 +70,7 @@ const shadows = {
   box: "var(--swui-shadow-box)",
   popover: "var(--swui-shadow-popover)",
   modal: "var(--swui-shadow-modal)",
+  bottom: "var(--swui-shadow-bottom)",
 };
 
 type ShadowType = keyof typeof shadows;

packages/elements/src/components/ui/bread-crumbs/Crumb.module.css

@@ -4,7 +4,7 @@
   font-weight: var(--swui-font-weight-text-bold);
   letter-spacing: 0.1rem;
   text-decoration: none;
-  color: var(--lhds-color-ui-500);
+  color: var(--lhds-color-ui-600);
 
   &:not(:last-of-type) {
     cursor: pointer;

packages/elements/src/components/ui/card/Card.stories.tsx

@@ -21,11 +21,22 @@ import { Tag } from "../tag/Tag";
 import { Card } from "./Card";
 import { CardBody } from "./CardBody";
 import { CardHeader } from "./CardHeader";
+import { Story } from "@storybook/react";
 
 export default {
   title: "elements/Card",
   component: Card,
   subcomponents: { CardHeader },
+  parameters: {
+    backgrounds: { default: "facebook" },
+  },
+  decorators: [
+    (TheStory: Story) => (
+      <div style={{ width: "500px" }}>
+        <TheStory />
+      </div>
+    ),
+  ],
 };
 
 export const Demo = () => {

packages/elements/src/components/ui/card/Card.tsx

@@ -6,4 +6,11 @@ export interface CardProps extends Omit<BoxProps, "shadow"> {}
 export const Card: React.FC<CardProps> = ({
   background = "white",
   ...boxProps
-}) => <Column shadow={"box"} background={background} {...boxProps} />;
+}) => (
+  <Column
+    {...boxProps}
+    shadow={"box"}
+    background={background}
+    borderRadius={"var(--swui-border-radius)"}
+  />
+);

packages/elements/src/components/ui/tabs/Tab.module.css

@@ -1,26 +1,31 @@
 .tab {
-  --swui-tab-border-color: var(--lhds-color-ui-200);
-  --swui-tab-border-color-hover: var(--lhds-color-blue-200);
-  --swui-tab-border-color-focus: var(--lhds-color-blue-200);
-  --swui-tab-border-color-selected: var(--lhds-color-blue-600);
-  --swui-tab-label-color: var(--swui-text-primary-color);
-  --swui-tab-label-color-selected: var(--swui-text-action-color);
+  --swui-tab-height: 32px;
+  --swui-tab-border-radius: var(--swui-max-border-radius);
+  --swui-tab-background: var(--lhds-color-ui-200);
+  --swui-tab-background-hover: var(--lhds-color-ui-400);
+  --swui-tab-background-focus: var(--lhds-color-blue-100);
+  --swui-tab-background-selected: var(--lhds-color-blue-200);
+  --swui-tab-label-color: var(--lhds-color-blue-600);
+  --swui-tab-label-color-hover: var(--lhds-color-blue-600);
+  --swui-tab-label-color-selected: var(--lhds-color-blue-600);
+  --swui-tab-label-color-selected-hover: var(--lhds-color-blue-600);
   --swui-tab-outline-color-focus: var(--lhds-color-blue-400);
 
   /*
   State variables
    */
-  --current-outer-border-bottom-color: transparent;
+  --current-background: transparent;
   --current-inset-shadow: none;
   --current-label-color: var(--swui-tab-label-color);
 
   /*
   Styling
    */
 
+  min-height: var(--swui-tab-height);
   outline: none;
-  height: var(--swui-tab-menu-height);
-  padding: 0 calc(var(--swui-metrics-indent) * 2);
+  border-radius: var(--swui-tab-border-radius);
+  padding: 5px calc(var(--swui-metrics-indent) * 3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -29,26 +34,27 @@
   font-family: var(--swui-font-buttons);
   font-weight: var(--swui-font-weight-text-bold);
   border: none;
-  border-bottom: 2px solid var(--current-outer-border-bottom-color);
   cursor: pointer;
-  background-color: transparent;
+  background-color: var(--current-background);
   color: var(--current-label-color);
 
   &:focus-visible {
-    outline: 1px solid var(--swui-tab-outline-color-focus);
-    box-shadow: inset var(--swui-primary-action-color) 0 0 4px 0;
+    outline: 2px solid var(--swui-tab-outline-color-focus);
     border: none;
-    padding-bottom: 2px;
   }
 
   &.selected {
-    --current-outer-border-bottom-color: var(--swui-tab-border-color-selected);
+    --current-background: var(--swui-tab-background-selected);
     --current-label-color: var(--swui-tab-label-color-selected);
   }
 
   &:hover {
+    &.selected {
+      color: var(--swui-tab-label-color-selected-hover);
+    }
     &:not(.selected) {
-      --current-outer-border-bottom-color: var(--swui-tab-border-color-hover);
+      --current-background: var(--swui-tab-background-hover);
+      color: var(--swui-tab-label-color-hover);
     }
   }
 }

packages/elements/src/components/ui/tabs/TabMenu.module.css

@@ -1,12 +1,17 @@
 .tabMenu {
-  --swui-tab-menu-height: 40px;
   --swui-tab-menu-border-color: var(--lhds-color-ui-200);
+  --swui-tab-menu-border-radius: var(--swui-max-border-radius);
+  --swui-tab-menu-border: 2px solid var(--silver-ui);
 
   /*
   Styling
    */
+  gap: var(--swui-metrics-indent);
   display: flex;
-  height: var(--swui-tab-menu-height);
+  width: fit-content;
+  border-radius: var(--swui-tab-menu-border-radius);
+  border: var(--swui-tab-menu-border);
+  padding: calc(var(--swui-metrics-space) * 0.5);
 
   &.withBorder {
     border-bottom: 1px solid var(--swui-tab-menu-border-color);

packages/elements/src/components/ui/tabs/TabMenu.stories.tsx

@@ -3,9 +3,8 @@ import { useState } from "react";
 import { faCoffee } from "@fortawesome/free-solid-svg-icons/faCoffee";
 import { Space } from "@stenajs-webui/core";
 import { Badge } from "../badge/Badge";
-import { Tab, TabProps } from "./Tab";
+import { Tab } from "./Tab";
 import { TabMenu } from "./TabMenu";
-import { Story } from "@storybook/react";
 import { disabledControl } from "../../../storybook-helpers/storybook-controls";
 
 export default {
@@ -42,15 +41,6 @@ const demoTabs: Array<DemoTab> = [
   "Matrix",
 ];
 
-export const Demo: Story<TabProps> = (props) => (
-  <TabMenu>
-    <Tab {...props} />
-  </TabMenu>
-);
-Demo.args = {
-  label: "Some tab",
-};
-
 export const Overview = () => {
   const [tab, setTab] = useState<DemoTab>("Rates");
 

packages/elements/src/components/ui/tabs/TabMenu.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
+import { ReactNode } from "react";
 import styles from "./TabMenu.module.css";
-import { Row } from "@stenajs-webui/core";
 import cx from "classnames";
-import { ReactNode } from "react";
 
 export interface TabMenuProps {
   enableBorder?: boolean;
@@ -11,12 +10,11 @@ export interface TabMenuProps {
 
 export const TabMenu: React.FC<TabMenuProps> = ({ children, enableBorder }) => {
   return (
-    <Row
+    <div
       className={cx(styles.tabMenu, { [styles.withBorder]: enableBorder })}
-      gap={2}
       role={"tablist"}
     >
       {children}
-    </Row>
+    </div>
   );
 };

packages/forms/src/components/ui/switch/Switch.module.css

@@ -2,7 +2,7 @@
   --swui-switch-width: 50px;
   --swui-switch-height: var(--swui-field-box-size-medium);
   --swui-switch-animation-time: var(--swui-animation-time-medium);
-  --swui-switch-selected-highlight-color: var(--swui-primary-action-color);
+  --swui-switch-selected-highlight-color: var(--lhds-color-blue-500);
   --swui-switch-knob-width: calc(var(--swui-switch-height) - 2px);
   /* Backgrounds */
   --swui-switch-knob-bg-color-enabled: var(--swui-handle-bg-enabled-color);

packages/panels/src/components/page-header/PageHeader.stories.tsx

@@ -3,6 +3,8 @@ import { Fragment, useState } from "react";
 import { PageHeader } from "./PageHeader";
 import {
   BreadCrumbs,
+  Card,
+  CardBody,
   Chip,
   Crumb,
   PrimaryButton,
@@ -14,7 +16,7 @@ import {
   Tag,
 } from "@stenajs-webui/elements";
 import { PageHeading, PageHeadingVariant } from "./PageHeading";
-import { Box, Heading, Row, Space } from "@stenajs-webui/core";
+import { Box, Heading, Row, Space, Spacing, Text } from "@stenajs-webui/core";
 import { TextInput } from "@stenajs-webui/forms";
 
 import { NavBar } from "../nav-bar/NavBar";
@@ -23,16 +25,26 @@ import { PageHeaderRow } from "./PageHeaderRow";
 import { NavBarHeading } from "../nav-bar/NavBarHeading";
 import { NavBarButton } from "../nav-bar/NavBarButton";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { Story } from "@storybook/react";
 
 export default {
   title: "panels/PageHeader",
   parameters: {
     layout: "fullscreen",
   },
   component: PageHeader,
+  decorators: [
+    (TheStory: Story) => (
+      <div style={{ height: "800px", background: "#f4f4f4" }}>
+        <TheStory />
+      </div>
+    ),
+  ],
 };
 
-const Base: React.FC<{ icon?: IconDefinition }> = ({ icon }) => {
+const Base: React.FC<{
+  icon?: IconDefinition;
+}> = ({ icon }) => {
   const [tabId, setTabId] = useState(0);
   return (
     <>
@@ -69,33 +81,39 @@ const Base: React.FC<{ icon?: IconDefinition }> = ({ icon }) => {
             }
           />
         )}
-        renderTabs={() => (
+      />
+      <Spacing />
+      <Card>
+        <CardBody>
           <TabMenu>
             <Tab
-              label={"Selected"}
+              label={"Route"}
               selected={tabId === 0}
               onClick={() => setTabId(0)}
             />
             <Tab
-              label={"Something"}
+              label={"Vehicles"}
               selected={tabId === 1}
               onClick={() => setTabId(1)}
             />
             <Tab
-              label={"Something else"}
+              label={"Sea area"}
               selected={tabId === 2}
               onClick={() => setTabId(2)}
             />
+            <Tab
+              label={"Hazardous goods"}
+              selected={tabId === 3}
+              onClick={() => setTabId(3)}
+            />
           </TabMenu>
-        )}
-      >
-        <PageHeaderRow gap={2}>
-          <Box>
-            <TextInput />
-          </Box>
-          <PrimaryButton label={"Action"} />
-        </PageHeaderRow>
-      </PageHeader>
+          <Spacing />
+          {tabId === 0 && <Text>Some nice content.</Text>}
+          {tabId === 1 && <Text>Second tab.</Text>}
+          {tabId === 2 && <Text>This is the final tab.</Text>}
+          {tabId === 3 && <Text>Danger danger!</Text>}
+        </CardBody>
+      </Card>
     </>
   );
 };

packages/panels/src/components/page-header/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, Row, SeparatorLine, Space } from "@stenajs-webui/core";
+import { Box, Row, Space } from "@stenajs-webui/core";
 import * as React from "react";
 import { ReactNode } from "react";
 import { cssColor } from "@stenajs-webui/theme";
@@ -17,7 +17,7 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   children,
 }) => {
   return (
-    <Box shadow={"box"} background={cssColor("--lhds-color-ui-50")} gap={2}>
+    <Box shadow={"bottom"} background={cssColor("--lhds-color-ui-50")} gap={2}>
       <Box indent={3}>
         {renderBreadCrumbs && (
           <Row spacing={1} alignItems={"center"}>
@@ -26,15 +26,10 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
           </Row>
         )}
         {renderPageHeading?.()}
+        {renderTabs && <Space />}
         {renderTabs?.()}
       </Box>
-      {children && (
-        <>
-          {!renderTabs && renderBreadCrumbs && <Space />}
-          <SeparatorLine />
-          {children}
-        </>
-      )}
+      {children}
     </Box>
   );
 };

packages/theme/src/styles/default-theme.css

@@ -88,12 +88,15 @@
 
   /* Borders */
   --swui-border-radius: 8px;
+  --swui-max-border-radius: 10000px;
 
   /* Shadows */
   --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;
   --swui-shadow-popover: 0 2px 4px -1px rgba(20, 62, 98, 0.15),
     0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  --swui-shadow-box: rgba(0, 0, 0, 0.15) 0 2px 4px 0;
+  --swui-shadow-box: 0 3px 1px -2px rgba(0, 0, 0, 0.12),
+    0 0 4px 0 rgba(20, 62, 98, 0.15);
+  --swui-shadow-bottom: rgba(0, 0, 0, 0.2) 0 5px 5px -4px;
   --swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, 0.3);
   --swui-field-focus-shadow-inverted: inset 0px 0px 3pt 0pt
     var(--lhds-color-blue-50);