From fd802aa943075cbfdf0789a3546c25acec9a617e Mon Sep 17 00:00:00 2001 From: Mattias Andersson Date: Mon, 2 Oct 2023 18:41:51 +0200 Subject: [PATCH] - Update TextInput variants. Variants no longer have border, as per design. 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. --- .../ui/text-input/TextInput.module.css | 19 ++++++++++--------- .../ui/text-input/TextInput.stories.tsx | 13 ++++++------- .../src/components/nav-bar/NavBarHeading.tsx | 4 +++- .../components/page-header/PageHeading.tsx | 8 ++------ packages/theme/src/styles/default-theme.css | 16 ++++++++-------- 5 files changed, 29 insertions(+), 31 deletions(-) diff --git a/packages/forms/src/components/ui/text-input/TextInput.module.css b/packages/forms/src/components/ui/text-input/TextInput.module.css index 0af86c1f3..56e85442b 100644 --- a/packages/forms/src/components/ui/text-input/TextInput.module.css +++ b/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); diff --git a/packages/forms/src/components/ui/text-input/TextInput.stories.tsx b/packages/forms/src/components/ui/text-input/TextInput.stories.tsx index fd7139d4a..7bb9156fa 100644 --- a/packages/forms/src/components/ui/text-input/TextInput.stories.tsx +++ b/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 = () => ( ))} Icon left - + Icon right - + Icon clickable alert("click")} /> @@ -77,7 +76,7 @@ export const Standard = () => ( ); export const WithIconLeft = () => ( - + ); export const WithIconRight = () => ( @@ -176,7 +175,7 @@ export const DisabledWithContent = () => ( disabled={true} value={"some entered text"} contentRight={ms} - iconLeft={faCoffee} + iconLeft={stenaAnimals} /> ); diff --git a/packages/panels/src/components/nav-bar/NavBarHeading.tsx b/packages/panels/src/components/nav-bar/NavBarHeading.tsx index 06de42d7d..11af52c47 100644 --- a/packages/panels/src/components/nav-bar/NavBarHeading.tsx +++ b/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 = (headingProps) => { - return ; + return ( + + ); }; diff --git a/packages/panels/src/components/page-header/PageHeading.tsx b/packages/panels/src/components/page-header/PageHeading.tsx index 616ff9569..542572f18 100644 --- a/packages/panels/src/components/page-header/PageHeading.tsx +++ b/packages/panels/src/components/page-header/PageHeading.tsx @@ -18,18 +18,14 @@ interface PageHeadingProps { export const PageHeading: React.FC = ({ icon, heading, - headingLevel = "h1", + headingLevel = "h2", contentLeft, contentRight, }) => ( - {icon && ( - <> - - - )} + {icon && } {heading} diff --git a/packages/theme/src/styles/default-theme.css b/packages/theme/src/styles/default-theme.css index 655fb0949..4ce418cd1 100644 --- a/packages/theme/src/styles/default-theme.css +++ b/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);