Brand update - small changes

package.json

@@ -63,7 +63,7 @@
     "@typescript-eslint/parser": "^4.4.0",
     "@vitejs/plugin-react": "^4.0.4",
     "auto": "^10.32.6",
-    "autoprefixer": "^9.7.2",
+    "autoprefixer": "^10.4.16",
     "babel-eslint": "10.1.0",
     "babel-loader": "^8.1.0",
     "concurrently": "^6.4.0",
@@ -84,9 +84,8 @@
     "lerna": "^7.3.0",
     "lint-staged": "^12.1.2",
     "path-that-svg": "1.2.4",
-    "postcss-loader": "^4.3.0",
-    "postcss-nested": "^5.0.6",
-    "postcss-preset-env": "^7.0.0",
+    "postcss-nested": "^6.0.1",
+    "postcss-preset-env": "^9.3.0",
     "prettier": "2.7.1",
     "react": "^18.2.0",
     "react-docgen-typescript-loader": "^3.1.0",
@@ -132,5 +131,6 @@
     "plugins": [
       "npm"
     ]
-  }
+  },
+  "dependencies": {}
 }

packages/elements/src/components/ui/buttons/FlatButton.module.css

@@ -25,6 +25,10 @@
   &.normal {
   }
 
+  &.passive:not(:disabled) {
+    color: var(--silver);
+  }
+
   &.danger:not(:disabled) {
     color: var(--lhds-color-red-500);
 

packages/elements/src/components/ui/buttons/TextInputButton.module.css

@@ -1,6 +1,4 @@
-.textInputButton {
-  composes: button from "./common/BaseButton.module.css";
-
+.textInputButton.textInputButton {
   --swui-button-height-small: 20px;
   --swui-button-height-medium: 30px;
   --swui-button-height-large: 42px;

packages/elements/src/components/ui/buttons/TextInputButton.tsx

@@ -14,7 +14,12 @@ import {
 } from "../../../icons/generated/CommonIcons";
 import { Icon } from "../icon/Icon";
 
-export type TextInputButtonVariant = "normal" | "error" | "warning" | "success";
+export type TextInputButtonVariant =
+  | "normal"
+  | "error"
+  | "warning"
+  | "success"
+  | "passive";
 export type TextInputButtonSize = "medium" | "small";
 
 export interface TextInputButtonProps extends ButtonElementProps {
@@ -29,6 +34,7 @@ const variantToIcon: Record<TextInputButtonVariant, MediumIcon> = {
   error: stenaExclamationTriangle,
   warning: stenaExclamationTriangle,
   success: stenaCheck,
+  passive: stenaInfoCircle,
 };
 
 export const TextInputButton = forwardRef<
@@ -50,6 +56,7 @@ export const TextInputButton = forwardRef<
       {...buttonProps}
       ref={ref}
       className={cx(
+        baseButtonStyles.button,
         styles.textInputButton,
         baseButtonStyles[size],
         styles[variant],

packages/elements/src/components/ui/buttons/common/ButtonCommon.ts

@@ -2,7 +2,7 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { ReactNode } from "react";
 
 export type ButtonSize = "medium" | "small" | "large" | "larger";
-export type ButtonVariant = "normal" | "danger" | "success";
+export type ButtonVariant = "normal" | "danger" | "success" | "passive";
 
 export interface CommonButtonProps {
   /** The text on the button. */

packages/elements/src/components/ui/buttons/stories/Buttons.stories.tsx

@@ -154,31 +154,31 @@ export const Variants = () => (
       <Column>
         <Text size={"large"}>{label}</Text>
         <Space />
-        {(["normal", "danger", "success"] as Array<ButtonVariant>).map(
-          (variant) => (
-            <Column>
-              <Text size={"large"}>{variant}</Text>
-              <Space />
-              <Row alignItems={"flex-start"} indent spacing>
-                <Indent>
-                  <ButtonVariant
-                    variant={variant}
-                    label={"Submit"}
-                    leftIcon={stenaCheck}
-                  />
-                </Indent>
-                <Indent>
-                  <ButtonVariant
-                    variant={variant}
-                    label={"Disabled"}
-                    leftIcon={stenaCheck}
-                    disabled
-                  />
-                </Indent>
-              </Row>
-            </Column>
-          )
-        )}
+        {(
+          ["normal", "danger", "success", "passive"] as Array<ButtonVariant>
+        ).map((variant) => (
+          <Column>
+            <Text size={"large"}>{variant}</Text>
+            <Space />
+            <Row alignItems={"flex-start"} indent spacing>
+              <Indent>
+                <ButtonVariant
+                  variant={variant}
+                  label={"Submit"}
+                  leftIcon={stenaCheck}
+                />
+              </Indent>
+              <Indent>
+                <ButtonVariant
+                  variant={variant}
+                  label={"Disabled"}
+                  leftIcon={stenaCheck}
+                  disabled
+                />
+              </Indent>
+            </Row>
+          </Column>
+        ))}
         <Space num={8} />
       </Column>
     ))}

packages/elements/src/components/ui/tag/Tag.module.css

@@ -66,7 +66,7 @@
   }
 
   &.passive {
-    --current-bg-color: var(--lhds-color-ui-300);
+    --current-bg-color: var(--silver-lighter);
     --current-text-color: var(--black);
   }
 }

packages/elements/src/icons/generated/CommonIcons.ts

@@ -2229,7 +2229,7 @@ export const stenaStatusBlock: MediumIcon = {
     24,
     [],
     "",
-    "M19.44 18.68L20.93 20.02C18.73 22.46 15.55 24 12 24L12 22C14.88 22 17.56 20.78 19.44 18.68ZM2.5 15.13C3.39 17.82 5.39 20.03 7.99 21.16L7.18 22.99C4.08 21.63 1.67 19 0.6 15.76L2.5 15.13ZM22.36 5.95C23.4 7.72 24 9.79 24 12 24 13.3 23.79 14.55 23.41 15.73L21.51 15.11C21.83 14.13 22 13.09 22 12.04 22 10.21 21.53 8.48 20.64 6.96L22.36 5.95ZM6.1 3.92C3.82 5.59 2.33 8.15 2.05 10.99L0.06 10.79C0.41 7.31 2.24 4.27 4.92 2.31L6.1 3.92ZM12 0C14.61 0 17.03 0.84 19 2.25L17.83 3.88C16.15 2.66 14.13 2 12 2 11.28 2 10.58 2.07 9.89 2.22L9.48 0.27C10.29 0.09 11.13 0 12 0Z",
+    "M19.77 18.6L20.91 20.04C18.72 22.47 15.54 24 12 24 11.32 24 10.65 23.94 10 23.83L10 22 12 22C14.29 22 16.45 21.23 18.21 19.84L19.77 18.6ZM1.87 13.23L2.5 15.13C3.21 17.27 4.62 19.11 6.5 20.35L8.17 21.45 7.16 22.98C3.47 21.36 0.76 17.93 0.14 13.81L1.87 13.23ZM22.39 5.98C23.41 7.75 24 9.81 24 12 24 14.01 23.5 15.91 22.63 17.58L20.89 17.01 21.51 15.11C21.83 14.13 22 13.09 22 12.04 22 10.79 21.79 9.61 21.37 8.5L20.67 6.63 22.39 5.98ZM6.64 1.26L7.72 2.74 6.1 3.92C4.29 5.25 2.96 7.16 2.36 9.33L1.83 11.25 0.06 10.77C0.49 6.6 3.05 3.06 6.64 1.26ZM12 0C15.34 0 18.35 1.36 20.53 3.56L19.46 5.05 17.83 3.88C16.15 2.66 14.13 2 12 2 11.85 2 11.7 2 11.55 2.01L9.55 2.1 9.47 0.27C10.29 0.09 11.13 0 12 0Z",
   ],
   iconName: "random",
   prefix: "fal",
@@ -2275,6 +2275,19 @@ export const stenaStatusDone: MediumIcon = {
   size: "medium",
 };
 
+export const stenaStatusInProgressAlt: MediumIcon = {
+  icon: [
+    24,
+    24,
+    [],
+    "",
+    "M9.55 21.7C10.32 21.89 11.17 22 12 22L12 24C11.01 24 10 23.87 9.06 23.64L9.55 21.7ZM4.49 18.6C5.15 19.35 5.92 20.01 6.78 20.53L5.74 22.24C4.71 21.61 3.78 20.83 2.99 19.92L4.49 18.6ZM2.07 13.17C2.19 14.19 2.46 15.16 2.86 16.06L1.03 16.88C0.54 15.78 0.22 14.61 0.08 13.4L2.07 13.17ZM1.35 6.46L3.12 7.39C2.67 8.27 2.34 9.22 2.16 10.23L0.19 9.88C0.4 8.68 0.79 7.53 1.35 6.46ZM6.43 1.37L7.36 3.14C6.46 3.61 5.65 4.21 4.94 4.92L3.53 3.5C4.38 2.65 5.36 1.93 6.43 1.37ZM24 12C24 18.63 18.63 24 12 24L12 22C17.52 22 22 17.52 22 12 22 6.48 17.52 2 12 2 11.39 2 10.8 2.05 10.22 2.16L9.87 0.19C10.57 0.06 11.27 0 12 0 18.63 0 24 5.37 24 12Z",
+  ],
+  iconName: "random",
+  prefix: "fal",
+  size: "medium",
+};
+
 export const stenaStatusInProgress: MediumIcon = {
   icon: [
     24,

packages/elements/src/index.ts

@@ -1,6 +1,4 @@
-import { ReactComponent as StenaFlagSvg } from "./icons/StenaFlag.svg";
-
-export const StenaFlag = StenaFlagSvg;
+export { ReactComponent as StenaFlag } from "./icons/StenaFlag.svg";
 export * from "./icons/generated/ArrowIcons";
 export * from "./icons/generated/BusinessIcons";
 export * from "./icons/generated/CommonIcons";

packages/panels/src/components/sidebar-menu/SidebarMenuCloseButtonRow.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import styles from "./SidebarMenuCloseButtonRow.module.css";
 import { ButtonElementProps, Column, Row, Space } from "@stenajs-webui/core";
 import { CloseButton, StenaFlag } from "@stenajs-webui/elements";
+
 import { cssColor } from "@stenajs-webui/theme";
 
 export interface SidebarMenuCloseButtonRowProps extends ButtonElementProps {}

packages/select/package.json

@@ -26,6 +26,7 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
+    "@stenajs-webui/theme": "18.12.1",
     "@stenajs-webui/core": "18.12.1",
     "@stenajs-webui/elements": "18.12.1",
     "@stenajs-webui/forms": "18.12.1",

packages/select/src/SelectTheme.ts

@@ -1,7 +1,9 @@
 import { Property } from "csstype";
+import { cssColor } from "@stenajs-webui/theme";
 
 export interface SelectTheme {
   arrowColor: {
+    disabled: string;
     focused: {
       standard: string;
       hover: string;
@@ -84,18 +86,19 @@ export interface SelectTheme {
 
 export const defaultSelectTheme: SelectTheme = {
   arrowColor: {
+    disabled: cssColor("--silver-light"),
     focused: {
-      hover: "var(--lhds-color-blue-600)",
-      standard: "var(--lhds-color-blue-600)",
+      hover: cssColor("--lhds-color-blue-600"),
+      standard: cssColor("--lhds-color-blue-600"),
     },
     closed: {
-      hover: "var(--lhds-color-blue-600)",
-      standard: "var(--lhds-color-blue-600)",
+      hover: cssColor("--lhds-color-blue-600"),
+      standard: cssColor("--lhds-color-blue-600"),
     },
   },
   clearButtonColor: {
-    hover: "var(--lhds-color-red-600)",
-    standard: "var(--lhds-color-red-500)",
+    hover: cssColor("--lhds-color-red-600"),
+    standard: cssColor("--lhds-color-red-500"),
   },
   input: {
     backgroundColor: "var(--swui-field-bg-enabled)",
@@ -125,26 +128,26 @@ export const defaultSelectTheme: SelectTheme = {
     fontSize: "var(--swui-font-size-smaller)",
     lineHeight: "var(--swui-line-height-smaller)",
     fontWeight: "var(--swui-font-weight-text-bold)",
-    color: "var(--lhds-color-ui-600)",
+    color: cssColor("--lhds-color-ui-600"),
     letterSpacing: "0.1rem",
   },
   menu: {
-    activeBackgroundColor: "var(--lhds-color-blue-100)",
+    activeBackgroundColor: cssColor("--lhds-color-blue-100"),
     activeTextColor: "var(--swui-field-text-color)",
-    selectedItemActiveBackgroundColor: "var(--lhds-color-blue-500)",
-    selectedItemActiveTextColor: "var(--lhds-color-blue-50)",
+    selectedItemActiveBackgroundColor: cssColor("--lhds-color-blue-500"),
+    selectedItemActiveTextColor: cssColor("--lhds-color-blue-50"),
     disabledTextColor: "var(--swui-field-text-color-disabled)",
     disabledBackgroundColor: "var(--swui-field-bg-disabled)",
     textColor: "var(--swui-field-text-color)",
     backgroundColor: "var(--swui-field-bg-enabled)",
     hoverTextColor: "var(--swui-field-text-color)",
-    hoverBackgroundColor: "var(--lhds-color-blue-200)",
-    selectedItemTextColor: "var(--lhds-color-blue-500)",
-    selectedItemIconColor: "var(--lhds-color-blue-500)",
+    hoverBackgroundColor: cssColor("--lhds-color-blue-200"),
+    selectedItemTextColor: cssColor("--lhds-color-blue-500"),
+    selectedItemIconColor: cssColor("--lhds-color-blue-500"),
     selectedItemHoverTextColor: "var(--swui-field-text-color)",
     selectedItemHoverIconColor: "var(--swui-field-text-color)",
-    selectedItemBackgroundColor: "var(--lhds-color-blue-50)",
-    selectedItemHoverBackgroundColor: "var(--lhds-color-blue-50)",
+    selectedItemBackgroundColor: cssColor("--lhds-color-blue-50"),
+    selectedItemHoverBackgroundColor: cssColor("--lhds-color-blue-50"),
     zIndex: 1,
     width: "auto",
     minWidth: "100%",
@@ -155,7 +158,7 @@ export const defaultSelectTheme: SelectTheme = {
   },
   multiSelect: {
     backgroundColor: "var(--swui-primary-action-color)",
-    textColor: "var(--lhds-color-blue-50)",
+    textColor: cssColor("--lhds-color-blue-50"),
     removeButtonBackgroundColor: "transparent",
     removeButtonTextColor: "var(--swui-white)",
     removeButtonHoverBackgroundColor: "var(--swui-primary-action-color-hover)",