- Update TextInput variants. Variants no longer have border, as per d…

…esign. Normal and loading still has border.

- Update colors of TextInput variants.
- NavBarHeading is now h1 level (but still has h4 design).
- PageHeading has default h2 level, but can still be changed.

packages/forms/src/components/ui/text-input/TextInput.module.css

@@ -10,36 +10,37 @@
   --swui-textinput-font-weight: var(--swui-font-weight-inputs);
   --swui-textinput-placeholder-color: var(--swui-field-placeholder-color);
   --swui-textinput-animation-time: var(--swui-animation-time-medium);
-  --swui-textinput-icon-color: var(--swui-field-border-color-disabled);
+  --swui-textinput-icon-color: var(--swui-field-icon-color);
   --swui-textinput-icon-hover-color: var(--swui-primary-action-color);
   --swui-textinput-icon-size: var(--swui-field-icon-size);
 
-  /* States */
+  /* Variants */
   --swui-textinput-icon-color-success: var(--swui-state-success-color);
 
   --swui-textinput-bg-loading: var(--swui-state-loading-light-color);
   --swui-textinput-border-color-loading: var(--swui-state-loading-color);
 
   --swui-textinput-bg-modified: var(--swui-state-modified-light-color);
-  --swui-textinput-border-color-modified: var(--swui-state-modified-color);
+  --swui-textinput-border-color-modified: var(
+    --swui-state-modified-light-color
+  );
 
   --swui-textinput-bg-warning: var(--swui-state-alert-light-color);
-  --swui-textinput-border-color-warning: var(--swui-state-alert-color);
+  --swui-textinput-border-color-warning: var(--swui-state-alert-light-color);
 
   --swui-textinput-bg-error: var(--swui-state-error-light-color);
-  --swui-textinput-border-color-error: var(--swui-state-error-color);
+  --swui-textinput-border-color-error: var(--swui-state-error-light-color);
+
+  --swui-textinput-bg-color-disabled: var(--swui-field-bg-disabled);
+  --swui-textinput-border-color-disabled: var(--swui-field-bg-disabled);
 
   /* Background */
   --swui-textinput-bg-color: var(--swui-field-bg-enabled);
-  --swui-textinput-bg-color-disabled: var(--swui-field-bg-disabled);
 
   /* Border */
   --swui-textinput-border-radius: var(--swui-field-border-radius);
   --swui-textinput-border-color: var(--swui-field-border-color);
   --swui-textinput-border-color-hover: var(--swui-field-border-color-hover);
-  --swui-textinput-border-color-disabled: var(
-    --swui-field-border-color-disabled
-  );
 
   /* Shadow */
   --swui-textinput-focus-shadow: var(--swui-field-focus-shadow);

packages/forms/src/components/ui/text-input/TextInput.stories.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
-import { faCoffee } from "@fortawesome/free-solid-svg-icons/faCoffee";
 import { faPaw } from "@fortawesome/free-solid-svg-icons/faPaw";
 import { Box, Space, Text } from "@stenajs-webui/core";
 import { TextInput, TextInputProps, TextInputVariant } from "./TextInput";
 import { Story } from "@storybook/react";
 import { disabledControl } from "../../../storybook-helpers/storybook-controls";
-import { Badge } from "@stenajs-webui/elements";
+import { Badge, stenaAnimals } from "@stenajs-webui/elements";
 
 export default {
   title: "forms/TextInput/TextInput",
@@ -44,15 +43,15 @@ export const Overview = () => (
       </React.Fragment>
     ))}
     <Text>Icon left</Text>
-    <TextInput value={"Some text"} iconLeft={faCoffee} />
+    <TextInput value={"Some text"} iconLeft={stenaAnimals} />
     <Space />
     <Text>Icon right</Text>
-    <TextInput value={"Some text"} iconRight={faCoffee} />
+    <TextInput value={"Some text"} iconRight={stenaAnimals} />
     <Space />
     <Text>Icon clickable</Text>
     <TextInput
       value={"Some text"}
-      iconLeft={faCoffee}
+      iconLeft={stenaAnimals}
       onClickLeft={() => alert("click")}
     />
     <Space />
@@ -77,7 +76,7 @@ export const Standard = () => (
 );
 
 export const WithIconLeft = () => (
-  <TextInput value={"some entered text"} iconLeft={faCoffee} />
+  <TextInput value={"some entered text"} iconLeft={stenaAnimals} />
 );
 
 export const WithIconRight = () => (
@@ -176,7 +175,7 @@ export const DisabledWithContent = () => (
       disabled={true}
       value={"some entered text"}
       contentRight={<Text>ms</Text>}
-      iconLeft={faCoffee}
+      iconLeft={stenaAnimals}
     />
   </Box>
 );

packages/panels/src/components/nav-bar/NavBarHeading.tsx

@@ -4,5 +4,7 @@ import { Heading, HeadingProps } from "@stenajs-webui/core";
 interface NavBarHeadingProps extends HeadingProps {}
 
 export const NavBarHeading: React.FC<NavBarHeadingProps> = (headingProps) => {
-  return <Heading whiteSpace={"nowrap"} variant={"h4"} {...headingProps} />;
+  return (
+    <Heading whiteSpace={"nowrap"} variant={"h4"} as={"h1"} {...headingProps} />
+  );
 };

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

@@ -18,18 +18,14 @@ interface PageHeadingProps {
 export const PageHeading: React.FC<PageHeadingProps> = ({
   icon,
   heading,
-  headingLevel = "h1",
+  headingLevel = "h2",
   contentLeft,
   contentRight,
 }) => (
   <Row alignItems={"center"} gap={2} height={"64px"}>
     <Row alignItems={"center"}>
       <Row width={"64px"} alignItems={"center"}>
-        {icon && (
-          <>
-            <CircledIcon icon={icon} />
-          </>
-        )}
+        {icon && <CircledIcon icon={icon} />}
       </Row>
       <Heading variant={"h3"} as={headingLevel}>
         {heading}

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

@@ -18,9 +18,9 @@
 
   /* State colors */
   --swui-state-error-color: var(--lhds-color-red-300);
-  --swui-state-error-light-color: var(--lhds-color-red-50);
+  --swui-state-error-light-color: var(--lhds-color-red-100);
   --swui-state-alert-color: var(--lhds-color-orange-400);
-  --swui-state-alert-light-color: var(--lhds-color-orange-50);
+  --swui-state-alert-light-color: var(--lhds-color-orange-100);
   --swui-state-success-color: var(--lhds-color-green-600);
   --swui-state-success-light-color: var(--lhds-color-green-50);
   --swui-state-modified-color: var(--lhds-color-blue-500);
@@ -65,23 +65,23 @@
   --swui-animation-time-slow: 0.5s;
 
   /* Form fields */
-  --swui-field-text-color: #424551;
-  --swui-field-text-color-disabled: var(--lhds-color-ui-600);
+  --swui-field-text-color: #0c0e10;
+  --swui-field-text-color-disabled: #0c0e10;
   --swui-field-text-spacing: 6px;
   --swui-field-letter-spacing: 0;
   --swui-field-text-line-height: 2rem;
   --swui-field-bg-enabled: var(--swui-white);
-  --swui-field-bg-disabled: var(--lhds-color-ui-300);
+  --swui-field-bg-disabled: var(--lhds-color-ui-400);
   --swui-field-border-color: var(--lhds-color-ui-400);
   --swui-field-border-color-hover: var(--lhds-color-blue-500);
-  --swui-field-border-color-disabled: #b1b1b1;
+  --swui-field-border-color-disabled: var(--lhds-color-ui-400);
   --swui-field-shadow-color: rgba(0, 0, 0, 0.15);
   --swui-field-box-size-large: 32px;
   --swui-field-box-size-medium: 24px;
   --swui-field-box-size-small: 16px;
   --swui-field-border-radius: 4px;
-  --swui-field-icon-color: var(--swui-text-primary-color);
-  --swui-field-icon-size: 13px;
+  --swui-field-icon-color: var(--lhds-color-ui-900);
+  --swui-field-icon-size: 20px;
   --swui-field-indicator-active-color: var(--swui-white);
   --swui-field-indicator-inactive-color: var(--swui-hidden);
   --swui-field-placeholder-color: var(--lhds-color-ui-500);