Todays batch of redesign updates (#615)

StenaIT · Oct 10, 2023 · 537abae · 537abae
1 parent 77fbae4
commit 537abae
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 119 deletions.
diff --git a/packages/elements/src/components/ui/buttons/FlatButton.module.css b/packages/elements/src/components/ui/buttons/FlatButton.module.css
@@ -19,28 +19,6 @@
   --swui-flat-button-background-color-focus: transparent;
   --swui-flat-button-background-color-disabled: transparent;
 
-  /* Inverted */
-  --swui-flat-button-text-color-inverted: var(--lhds-color-blue-50);
-  --swui-flat-button-text-color-inverted-active: var(--lhds-color-blue-50);
-  --swui-flat-button-text-color-inverted-disabled: var(
-    --swui-text-disabled-color-light
-  );
-  --swui-flat-button-icon-color-inverted: var(--lhds-color-blue-50);
-  --swui-flat-button-icon-color-inverted-active: var(--lhds-color-blue-50);
-  --swui-flat-button-icon-color-inverted-disabled: var(
-    --swui-text-disabled-color-light
-  );
-
-  --swui-flat-button-background-inverted-color-focus: transparent;
-  --swui-flat-button-background-inverted-color-disabled: transparent;
-
-  --swui-flat-button-background-inverted-color-hover: var(
-    --lhds-color-blue-800
-  );
-  --swui-flat-button-background-inverted-color-active: var(
-    --lhds-color-blue-700
-  );
-
   --swui-flat-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);
 
   /* PrimaryButton overrides */
@@ -139,43 +117,4 @@
   --swui-button-box-shadow-focus: var(--swui-flat-box-shadow-focus);
   --swui-button-box-shadow-active: none;
   --swui-button-box-shadow-disabled: none;
-
-  &.inverted {
-    /* Text */
-    --swui-button-text-color: var(--swui-flat-button-text-color-inverted);
-    --swui-button-text-color-hover: var(--swui-flat-button-text-color-inverted);
-    --swui-button-text-color-focus: var(--swui-flat-button-text-color-inverted);
-    --swui-button-text-color-active: var(
-      --swui-flat-button-text-color-inverted-active
-    );
-    --swui-button-text-color-disabled: var(
-      --swui-flat-button-text-color-inverted-disabled
-    );
-
-    /* Icon */
-    --swui-button-icon-color: var(--swui-flat-button-icon-color-inverted);
-    --swui-button-icon-color-focus: var(--swui-flat-button-icon-color-inverted);
-    --swui-button-icon-color-hover: var(--swui-flat-button-icon-color-inverted);
-    --swui-button-icon-color-active: var(
-      --swui-flat-button-icon-color-inverted-active
-    );
-    --swui-button-icon-color-disabled: var(
-      --swui-flat-button-icon-color-inverted-disabled
-    );
-
-    /* Background */
-    --swui-button-background-color: transparent;
-    --swui-button-background-color-hover: var(
-      --swui-flat-button-background-inverted-color-hover
-    );
-    --swui-button-background-color-focus: var(
-      --swui-flat-button-background-inverted-color-focus
-    );
-    --swui-button-background-color-active: var(
-      --swui-flat-button-background-inverted-color-active
-    );
-    --swui-button-background-color-disabled: var(
-      --swui-flat-button-background-inverted-color-disabled
-    );
-  }
 }
diff --git a/packages/elements/src/components/ui/buttons/FlatButton.stories.tsx b/packages/elements/src/components/ui/buttons/FlatButton.stories.tsx
@@ -1,5 +1,5 @@
 import { faJediOrder } from "@fortawesome/free-brands-svg-icons/faJediOrder";
-import { Column, Text, Space } from "@stenajs-webui/core";
+import { Column, Space, Text } from "@stenajs-webui/core";
 import * as React from "react";
 import { ButtonSize } from "./common/ButtonCommon";
 import { FlatButton } from "./FlatButton";
@@ -29,26 +29,3 @@ export const Standard = () => (
     </div>
   </Column>
 );
-
-export const Inverted = () => (
-  <Column background={"#0f304d"} spacing indent>
-    <Text size={"large"} color={"#fff"}>
-      FlatButton inverted
-    </Text>
-    <Space num={4} />
-    <div style={{ display: "inline-block" }}>
-      {buttonSizes.map((size) => (
-        <>
-          <FlatButton
-            key={size}
-            size={size}
-            label={size}
-            inverted
-            leftIcon={faJediOrder}
-          />
-          <Space />
-        </>
-      ))}
-    </div>
-  </Column>
-);
diff --git a/packages/elements/src/components/ui/buttons/FlatButton.tsx b/packages/elements/src/components/ui/buttons/FlatButton.tsx
@@ -4,20 +4,14 @@ import { forwardRef } from "react";
 import { PrimaryButton, PrimaryButtonProps } from "./PrimaryButton";
 import styles from "./FlatButton.module.css";
 
-export type FlatButtonProps = PrimaryButtonProps & {
-  inverted?: boolean;
-};
+export interface FlatButtonProps extends PrimaryButtonProps {}
 
 export const FlatButton = forwardRef<HTMLButtonElement, FlatButtonProps>(
-  function FlatButton({ className, inverted, ...props }, ref) {
+  function FlatButton({ className, ...props }, ref) {
     return (
       <PrimaryButton
         ref={ref}
-        className={cx(
-          styles.flatButton,
-          inverted && styles.inverted,
-          className
-        )}
+        className={cx(styles.flatButton, className)}
         {...props}
       />
     );

diff --git a/packages/elements/src/components/ui/card/CardHeader.tsx b/packages/elements/src/components/ui/card/CardHeader.tsx
@@ -3,7 +3,6 @@ import * as React from "react";
 import { ReactNode } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { Icon } from "../icon/Icon";
-import { cssColor } from "@stenajs-webui/theme";
 
 export type CardHeaderVariant = "standard" | "compact";
 
@@ -34,7 +33,6 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
       height={variant === "compact" ? 40 : 56}
       justifyContent={"space-between"}
       indent={3}
-      borderBottom={`1px solid ${cssColor("--lhds-color-ui-300")}`}
       {...boxProps}
     >
       <Row alignItems={"center"} gap={variant === "compact" ? 1 : 2}>
@@ -43,10 +41,7 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
           <Icon icon={leftIcon} size={variant === "compact" ? 16 : 24} />
         )}
         {text && (
-          <Heading
-            variant={variant === "compact" ? "h5" : "h4"}
-            as={headingLevel}
-          >
+          <Heading variant={"h5"} as={headingLevel}>
             {text}
           </Heading>
         )}

diff --git a/packages/elements/src/components/ui/tabs/Tab.module.css b/packages/elements/src/components/ui/tabs/Tab.module.css
@@ -1,20 +1,23 @@
 .tab {
   --swui-tab-height: 32px;
-  --swui-tab-border-radius: var(--swui-max-border-radius);
+  --swui-tab-border-radius: 0;
+  --swui-tab-border-color-hover: var(--lhds-color-ui-300);
+  --swui-tab-border-color-focus: var(--lhds-color-ui-300);
+  --swui-tab-border-color-selected: var(--lhds-color-blue-600);
   --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: var(--lhds-color-ui-900);
+  --swui-tab-label-color-hover: var(--lhds-color-blue-900);
   --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-background: transparent;
+  --current-outer-border-bottom-color: transparent;
   --current-inset-shadow: none;
   --current-label-color: var(--swui-tab-label-color);
 
@@ -35,16 +38,18 @@
   font-weight: var(--swui-font-weight-text-bold);
   border: none;
   cursor: pointer;
-  background-color: var(--current-background);
+  border-bottom: 2px solid var(--current-outer-border-bottom-color);
+  background-color: transparent;
   color: var(--current-label-color);
 
   &:focus-visible {
     outline: 2px solid var(--swui-tab-outline-color-focus);
-    border: none;
+    --current-outer-border-bottom-color: var(--swui-tab-border-color-focus);
+    padding-bottom: 4px;
   }
 
   &.selected {
-    --current-background: var(--swui-tab-background-selected);
+    --current-outer-border-bottom-color: var(--swui-tab-border-color-selected);
     --current-label-color: var(--swui-tab-label-color-selected);
   }
 
@@ -53,7 +58,7 @@
       color: var(--swui-tab-label-color-selected-hover);
     }
     &:not(.selected) {
-      --current-background: var(--swui-tab-background-hover);
+      --current-outer-border-bottom-color: var(--swui-tab-border-color-hover);
       color: var(--swui-tab-label-color-hover);
     }
   }

diff --git a/packages/elements/src/components/ui/tabs/TabMenu.module.css b/packages/elements/src/components/ui/tabs/TabMenu.module.css
@@ -1,17 +1,11 @@
 .tabMenu {
   --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);
+  gap: calc(var(--swui-metrics-indent) * 2);
   display: flex;
-  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);

diff --git a/packages/theme/src/styles/brand-colors.css b/packages/theme/src/styles/brand-colors.css
@@ -4,8 +4,8 @@
   --snackskal: #fcb4cd;
   --snackskal-light: #fce1db;
   --sjobod: rgb(176, 15, 46);
-  --tang: rgb(117, 20, 34);
-  --modern-blue: rgb(35, 120, 205);
+  --tang: #80091b;
+  --modern-blue: #1178df;
   --himmel: #b4d4f9;
   --himmel-light: #cae2fb;
   --himmel-lighter: #e1edfd;

diff --git a/packages/theme/src/styles/default-colors.css b/packages/theme/src/styles/default-colors.css
@@ -39,8 +39,8 @@
   --lhds-color-red-300: #ff4e70;
   --lhds-color-red-400: #f1002e;
   --lhds-color-red-500: #d70029;
-  --lhds-color-red-600: #b00022;
-  --lhds-color-red-700: #8a0019;
+  --lhds-color-red-600: var(--sjobod);
+  --lhds-color-red-700: var(--tang);
   --lhds-color-red-800: #710015;
   --lhds-color-red-900: #570010;