@onewelcome/react-lib-components 9.2.0 → 9.4.0

package/src/components/Typography/Typography.module.scss

@@ -18,44 +18,63 @@
 
 .typography_style_ {
   &h1 {
-    @include mixins.fontProperties(var(--font-family), var(--font-size-h1), 700, 1.2);
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-h1),
+      $fontWeight: 700,
+      $lineHeight: 1.2,
+      $color: var(--font-color-h1)
+    );
   }
 
   &h2 {
-    @include mixins.fontProperties(var(--font-family), var(--font-size-h2), 700, 1.42857);
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-h2),
+      $fontWeight: 700,
+      $lineHeight: 1.42857,
+      $color: var(--font-color-h2)
+    );
   }
 
   &h3 {
-    @include mixins.fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-h3),
+      $fontWeight: 500,
+      $lineHeight: 1.16666,
+      $color: var(--font-color-h3)
+    );
   }
 
   &h4 {
-    @include mixins.fontProperties(var(--font-family), var(--font-size-h4), 500, 1.2);
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-h4),
+      $fontWeight: 500,
+      $lineHeight: 1.2,
+      $color: var(--font-color-h4)
+    );
   }
 
   &body {
-    @include mixins.fontProperties(
-      var(--font-family),
-      var(--font-size),
-      400,
-      var(--default-line-height)
-    );
+    @include mixins.fontProperties($color: var(--font-color-body));
   }
 
   &body-bold {
-    @include mixins.fontProperties(
-      var(--font-family),
-      var(--font-size),
-      700,
-      var(--default-line-height)
-    );
+    @include mixins.fontProperties($color: var(--font-color-body), $fontWeight: 700);
   }
 
   &sub-text {
-    @include mixins.fontProperties(var(--font-family), var(--font-size-sub), 400, var(--font-size));
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-sub),
+      $lineHeight: var(--font-size),
+      $color: var(--font-color-h4)
+    );
   }
 
   &code {
-    @include mixins.fontProperties(var(--font-family-code), var(--font-size-code), 400, 1.5);
+    @include mixins.fontProperties(
+      $fontFamily: var(--font-family-code),
+      $fontSize: var(--font-size-code),
+      $lineHeight: 1.5,
+      $color: var(--font-color-code)
+    );
   }
 }

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -20,8 +20,9 @@
  */
 
 import React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from "react";
+import { ButtonColorProps, defaultButtonColors } from "./buttonBaseStyling";
 
-export interface CSSProperties {
+export interface CSSProperties extends ButtonColorProps {
   colorFocus?: string;
   colorPrimary?: string;
   colorSuccess?: string;
@@ -76,36 +77,19 @@ export interface CSSProperties {
   buttonBorderWidth?: string;
   buttonFontSize?: string;
   buttonBorderStyle?: string;
-  buttonPrimaryDefaultColor?: string;
-  buttonPrimaryPressedColor?: string;
-  buttonFillTextColor?: string;
-  buttonPrimaryHoverColor?: string;
-  buttonPrimaryFocusedColor?: string;
+  /**@deprecated*/
   buttonOutlineHoverTextColor?: string;
-  buttonSuccessDefaultColor?: string;
-  buttonSuccessHoverColor?: string;
-  buttonSuccessFocusedColor?: string;
-  buttonSuccessPressedColor?: string;
-  buttonDangerDefaultColor?: string;
-  buttonDangerHoverColor?: string;
-  buttonDangerFocusedColor?: string;
-  buttonDangerPressedColor?: string;
-  buttonWarningDefaultColor?: string;
-  buttonWarningHoverColor?: string;
-  buttonWarningFocusedColor?: string;
-  buttonWarningPressedColor?: string;
-  buttonDefaultColor?: string;
-  buttonDefaultHoverColor?: string;
-  buttonDefaultFocusedColor?: string;
-  buttonDefaultPressedColor?: string;
-  buttonOutlineActiveTextColor?: string;
+  buttonFillTextColor?: string;
+  checkboxUncheckedColor?: string;
   checkboxUncheckedHoverColor?: string;
   checkboxUncheckedPressedColor?: string;
+  checkboxCheckedColor?: string;
   checkboxCheckedHoverColor?: string;
   checkboxCheckedPressedColor?: string;
   radioHoverBackgroundColor?: string;
   radioPressedBackgroundColor?: string;
   radioHoverColor?: string;
+  radioCheckedColor?: string;
   radioPressedColor?: string;
   defaultBorderRadius?: string;
   inputBorderRadius?: string;
@@ -118,7 +102,9 @@ export interface CSSProperties {
   inputHoverBackgroundColor?: string;
   inputDisabledBackgroundColor?: string;
   inputFontSize?: string;
+  iconFontBig?: string;
   dragBorderStyle?: string;
+  modalTitleColor?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalBackdropColor?: string;
@@ -131,19 +117,16 @@ export interface CSSProperties {
   alertFontSize?: string;
   alertTextColor?: string;
   alertTextInvertedColor?: string;
-
   alertNeutralBackgroundColor?: string;
   alertInfoBackgroundColor?: string;
   alertSuccessBackgroundColor?: string;
   alertErrorBackgroundColor?: string;
   alertWarningBackgroundColor?: string;
-
   alertNeutralInvertedColor?: string;
   alertInfoInvertedColor?: string;
   alertSuccessInvertedColor?: string;
   alertErrorInvertedColor?: string;
   alertWarningInvertedColor?: string;
-
   alertBorderWidth?: string;
   alertBorderRadius?: string;
 
@@ -191,9 +174,25 @@ export interface CSSProperties {
   tabPressedColor?: string;
   toggleBackgroundColor?: string;
   tooltipBackgroundColor?: string;
+
   contextMenuHoverColor?: string;
+  contextMenuActiveColor?: string;
   contextMenuPressedColor?: string;
   contextMenuFontSize?: string;
+
+  linkFontSize?: string;
+  linkPrimaryDefaultColor?: string;
+  linkPrimaryVisitedColor?: string;
+  linkSuccessDefaultColor?: string;
+  linkSuccessVisitedColor?: string;
+  linkDangerDefaultColor?: string;
+  linkDangerVisitedColor?: string;
+  linkWarningDefaultColor?: string;
+  linkWarningVisitedColor?: string;
+
+  leftNavItemActiveRibbonColor?: string;
+  leftNavItemActiveBackgroundColor?: string;
+
   default?: string;
   success?: string;
   error?: string;
@@ -203,25 +202,33 @@ export interface CSSProperties {
   lightGreyBorder?: string;
   warning?: string;
   light?: string;
+
   fontFamily?: string;
   fontFamilyCode?: string;
   fontSizeFormLabel?: string;
   fontSize?: string;
+  fontColorBody?: string;
   fontSizeH1?: string;
+  fontColorH1?: string;
   fontSizeH2?: string;
+  fontColorH2?: string;
   fontSizeH3?: string;
+  fontColorH3?: string;
   fontSizeH4?: string;
+  fontColorH4?: string;
   fontSizeSub?: string;
+  fontColorSub?: string;
+  fontSizeCode?: string;
+  fontColorCode?: string;
   fontSizeSmall?: string;
   fontSizeBig?: string;
-  fontSizeCode?: string;
+
   formControlFontSize?: string;
   fileUploadBorderWidth?: string;
   dragDropBorderStyle?: string;
   fontSizeDataGrid?: string;
   readOnlyBorderColor?: string;
   readOnlyTextColor?: string;
-  iconFontBig?: string;
 }
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -286,34 +293,18 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     buttonBorderWidth: "2px",
     buttonFontSize: "0.875rem",
     buttonBorderStyle: "solid",
+    ...defaultButtonColors,
     buttonFillTextColor: "var(--light)",
-    buttonPrimaryDefaultColor: "var(--color-primary500)",
-    buttonPrimaryHoverColor: "var(--color-primary600)",
-    buttonPrimaryFocusedColor: "var(--color-primary500)",
-    buttonPrimaryPressedColor: "var(--color-primary700)",
-    buttonSuccessDefaultColor: "var(--color-green500)",
-    buttonSuccessHoverColor: "var(--color-green600)",
-    buttonSuccessFocusedColor: "var(--color-green500)",
-    buttonSuccessPressedColor: "var(--color-green700)",
-    buttonDangerDefaultColor: "var(--color-red500)",
-    buttonDangerHoverColor: "var(--color-red600)",
-    buttonDangerFocusedColor: "var(--color-red500)",
-    buttonDangerPressedColor: "var(--color-red700)",
-    buttonWarningDefaultColor: "var(--color-orange500)",
-    buttonWarningHoverColor: "var(--color-orange600)",
-    buttonWarningFocusedColor: "var(--color-orange500)",
-    buttonWarningPressedColor: "var(--color-orange700)",
-    buttonDefaultColor: "var(--color-blue-grey700)",
-    buttonDefaultHoverColor: "var(--color-blue-grey800)",
-    buttonDefaultFocusedColor: "var(--color-blue-grey700)",
-    buttonDefaultPressedColor: "var(--color-blue-grey800)",
-    buttonOutlineHoverTextColor: "var(--color-primary600)",
+    buttonOutlineHoverTextColor: "var(--color-primary600)", //TODO: to be removed, it's not used anywhere within component library
+    checkboxUncheckedColor: "var(--color-blue-grey500)",
     checkboxUncheckedHoverColor: "var(--color-blue-grey50)",
     checkboxUncheckedPressedColor: "var(--default-pressed-color)",
+    checkboxCheckedColor: "var(--color-primary)",
     checkboxCheckedHoverColor: "var(--color-primary600)",
     checkboxCheckedPressedColor: "var(--color-primary700)",
     radioHoverBackgroundColor: "var(--color-blue-grey50)",
     radioPressedBackgroundColor: "var(--default-pressed-color)",
+    radioCheckedColor: "var(--color-primary)",
     radioHoverColor: "var(--color-primary600)",
     radioPressedColor: "var(--color-primary700)",
     inputBorderRadius: "2px",
@@ -328,7 +319,9 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputHoverBackgroundColor: "var(--default-hover-color)",
     inputDisabledBackgroundColor: "var(--input-hover-background-color)",
     inputFontSize: "0.875rem",
+    iconFontBig: "1.125rem",
     dragBorderStyle: "solid",
+    modalTitleColor: "var(--font-color-h4)",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
     modalBackgroundColor: "var(--light)",
     modalBackdropColor: "var(--default)",
@@ -344,19 +337,14 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
 
     alertNeutralBackgroundColor: "var(--color-blue-grey50)",
     alertNeutralInvertedColor: "var(--color-blue-grey500)",
-
     alertInfoBackgroundColor: "var(--color-primary50)",
     alertInfoInvertedColor: "var(--color-primary500)",
-
     alertSuccessBackgroundColor: "var(--color-green50)",
     alertSuccessInvertedColor: "var(--color-green500)",
-
     alertErrorBackgroundColor: "var(--color-red50)",
     alertErrorInvertedColor: "var(--color-red500)",
-
     alertWarningBackgroundColor: "var(--color-orange50)",
     alertWarningInvertedColor: "var(--color-orange500)",
-
     alertBorderWidth: "4px",
     alertBorderRadius: "2px",
 
@@ -404,9 +392,25 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     tabPressedColor: "var(--default-pressed-color)",
     toggleBackgroundColor: "var(--color-blue-grey100)",
     tooltipBackgroundColor: "var(--default)",
+
     contextMenuHoverColor: "var(--default-hover-color)",
+    contextMenuActiveColor: "var(--color-primary)",
     contextMenuPressedColor: "var(--default-pressed-color)",
     contextMenuFontSize: "0.875rem",
+
+    linkFontSize: "var(--font-size)",
+    linkPrimaryDefaultColor: "var(--color-primary)",
+    linkPrimaryVisitedColor: "var(--button-primary-pressed-color)",
+    linkSuccessDefaultColor: "var(--color-success)",
+    linkSuccessVisitedColor: "var(--button-success-pressed-color)",
+    linkDangerDefaultColor: "var(--color-danger)",
+    linkDangerVisitedColor: "var(--button-danger-pressed-color)",
+    linkWarningDefaultColor: "var(--color-warning)",
+    linkWarningVisitedColor: "var(--button-warning-pressed-color)",
+
+    leftNavItemActiveRibbonColor: "var(--color-primary)",
+    leftNavItemActiveBackgroundColor: "var(--color-primary50)",
+
     default: "var(--color-blue-grey900)",
     success: "var(--color-green500)",
     error: "var(--color-red500)",
@@ -416,23 +420,31 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     lightGreyBorder: "var(--color-blue-grey100)",
     warning: "var(--color-orange500)",
     light: "var(--color-white)",
+
     fontFamily: "Roboto, sans-serif",
     fontFamilyCode: "'Roboto Mono', monospace",
     fontSizeFormLabel: "0.875rem",
     fontSize: "1rem",
+    fontColorBody: "var(--default)",
     fontSizeH1: "2.5rem",
+    fontColorH1: "var(--default)",
     fontSizeH2: "1.625rem",
+    fontColorH2: "var(--default)",
     fontSizeH3: "1.5rem",
+    fontColorH3: "var(--default)",
     fontSizeH4: "1.25rem",
+    fontColorH4: "var(--default)",
     fontSizeSub: "0.75rem",
+    fontColorSub: "var(--default)",
+    fontSizeCode: "1rem",
+    fontColorCode: "var(--default)",
     fontSizeSmall: "0.625rem",
     fontSizeBig: "1.25rem",
-    fontSizeCode: "1rem",
+
     readOnlyBorderColor: "var(--color-blue-grey100)",
     readOnlyTextColor: "var(--color-blue-grey900)",
     formControlFontSize: "0.875rem",
-    fontSizeDataGrid: "0.875rem",
-    iconFontBig: "1.125rem"
+    fontSizeDataGrid: "0.875rem"
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

package/src/components/_BaseStyling_/buttonBaseStyling.ts

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+type ButtonType = "primary" | "success" | "danger" | "warning" | "default";
+type ButtonVariant = "fill" | "outline" | "text";
+type ButtonState = "default" | "hover" | "focused" | "pressed";
+
+type CapitalizeString<T extends string> = T extends `${infer First}${infer Rest}`
+  ? `${Uppercase<First>}${Rest}`
+  : T;
+
+type Flattened<K extends string> = {
+  [Key in K]?: string;
+};
+
+type BaseButtonProps = Omit<
+  Flattened<`button${CapitalizeString<ButtonType>}${CapitalizeString<ButtonState>}Color`>,
+  "buttonDefaultDefaultColor"
+> & { buttonDefaultColor?: string };
+
+type VariantButtonProps =
+  Flattened<`button${CapitalizeString<ButtonVariant>}${CapitalizeString<ButtonType>}${CapitalizeString<ButtonState>}Color`>;
+
+export type ButtonColorProps = BaseButtonProps & VariantButtonProps;
+
+export const defaultButtonColors: Required<ButtonColorProps> = {
+  buttonPrimaryDefaultColor: "var(--color-primary500)",
+  buttonPrimaryHoverColor: "var(--color-primary600)",
+  buttonPrimaryFocusedColor: "var(--color-primary500)",
+  buttonPrimaryPressedColor: "var(--color-primary700)",
+  buttonSuccessDefaultColor: "var(--color-green500)",
+  buttonSuccessHoverColor: "var(--color-green600)",
+  buttonSuccessFocusedColor: "var(--color-green500)",
+  buttonSuccessPressedColor: "var(--color-green700)",
+  buttonDangerDefaultColor: "var(--color-red500)",
+  buttonDangerHoverColor: "var(--color-red600)",
+  buttonDangerFocusedColor: "var(--color-red500)",
+  buttonDangerPressedColor: "var(--color-red700)",
+  buttonWarningDefaultColor: "var(--color-orange500)",
+  buttonWarningHoverColor: "var(--color-orange600)",
+  buttonWarningFocusedColor: "var(--color-orange500)",
+  buttonWarningPressedColor: "var(--color-orange700)",
+  buttonDefaultColor: "var(--color-blue-grey700)",
+  buttonDefaultHoverColor: "var(--color-blue-grey800)",
+  buttonDefaultFocusedColor: "var(--color-blue-grey700)",
+  buttonDefaultPressedColor: "var(--color-blue-grey800)",
+
+  buttonFillPrimaryDefaultColor: "var(--button-primary-default-color)",
+  buttonFillPrimaryHoverColor: "var(--button-primary-hover-color)",
+  buttonFillPrimaryFocusedColor: "var(--button-primary-focused-color)",
+  buttonFillPrimaryPressedColor: "var(--button-primary-pressed-color)",
+  buttonFillSuccessDefaultColor: "var(--button-success-default-color)",
+  buttonFillSuccessHoverColor: "var(--button-success-hover-color)",
+  buttonFillSuccessFocusedColor: "var(--button-success-focused-color)",
+  buttonFillSuccessPressedColor: "var(--button-success-pressed-color)",
+  buttonFillDangerDefaultColor: "var(--button-danger-default-color)",
+  buttonFillDangerHoverColor: "var(--button-danger-hover-color)",
+  buttonFillDangerFocusedColor: "var(--button-danger-focused-color)",
+  buttonFillDangerPressedColor: "var(--button-danger-pressed-color)",
+  buttonFillWarningDefaultColor: "var(--button-warning-default-color)",
+  buttonFillWarningHoverColor: "var(--button-warning-hover-color)",
+  buttonFillWarningFocusedColor: "var(--button-warning-focused-color)",
+  buttonFillWarningPressedColor: "var(--button-warning-pressed-color)",
+  buttonFillDefaultDefaultColor: "var(--button-default-default-color)",
+  buttonFillDefaultHoverColor: "var(--button-default-hover-color)",
+  buttonFillDefaultFocusedColor: "var(--button-default-focused-color)",
+  buttonFillDefaultPressedColor: "var(--button-default-pressed-color)",
+
+  buttonOutlinePrimaryDefaultColor: "var(--button-primary-default-color)",
+  buttonOutlinePrimaryHoverColor: "var(--button-primary-hover-color)",
+  buttonOutlinePrimaryFocusedColor: "var(--button-primary-focused-color)",
+  buttonOutlinePrimaryPressedColor: "var(--button-primary-pressed-color)",
+  buttonOutlineSuccessDefaultColor: "var(--button-success-default-color)",
+  buttonOutlineSuccessHoverColor: "var(--button-success-hover-color)",
+  buttonOutlineSuccessFocusedColor: "var(--button-success-focused-color)",
+  buttonOutlineSuccessPressedColor: "var(--button-success-pressed-color)",
+  buttonOutlineDangerDefaultColor: "var(--button-danger-default-color)",
+  buttonOutlineDangerHoverColor: "var(--button-danger-hover-color)",
+  buttonOutlineDangerFocusedColor: "var(--button-danger-focused-color)",
+  buttonOutlineDangerPressedColor: "var(--button-danger-pressed-color)",
+  buttonOutlineWarningDefaultColor: "var(--button-warning-default-color)",
+  buttonOutlineWarningHoverColor: "var(--button-warning-hover-color)",
+  buttonOutlineWarningFocusedColor: "var(--button-warning-focused-color)",
+  buttonOutlineWarningPressedColor: "var(--button-warning-pressed-color)",
+  buttonOutlineDefaultDefaultColor: "var(--button-default-default-color)",
+  buttonOutlineDefaultHoverColor: "var(--button-default-hover-color)",
+  buttonOutlineDefaultFocusedColor: "var(--button-default-focused-color)",
+  buttonOutlineDefaultPressedColor: "var(--button-default-pressed-color)",
+
+  buttonTextPrimaryDefaultColor: "var(--button-primary-default-color)",
+  buttonTextPrimaryHoverColor: "var(--button-primary-hover-color)",
+  buttonTextPrimaryFocusedColor: "var(--button-primary-focused-color)",
+  buttonTextPrimaryPressedColor: "var(--button-primary-pressed-color)",
+  buttonTextSuccessDefaultColor: "var(--button-success-default-color)",
+  buttonTextSuccessHoverColor: "var(--button-success-hover-color)",
+  buttonTextSuccessFocusedColor: "var(--button-success-focused-color)",
+  buttonTextSuccessPressedColor: "var(--button-success-pressed-color)",
+  buttonTextDangerDefaultColor: "var(--button-danger-default-color)",
+  buttonTextDangerHoverColor: "var(--button-danger-hover-color)",
+  buttonTextDangerFocusedColor: "var(--button-danger-focused-color)",
+  buttonTextDangerPressedColor: "var(--button-danger-pressed-color)",
+  buttonTextWarningDefaultColor: "var(--button-warning-default-color)",
+  buttonTextWarningHoverColor: "var(--button-warning-hover-color)",
+  buttonTextWarningFocusedColor: "var(--button-warning-focused-color)",
+  buttonTextWarningPressedColor: "var(--button-warning-pressed-color)",
+  buttonTextDefaultDefaultColor: "var(--button-default-default-color)",
+  buttonTextDefaultHoverColor: "var(--button-default-hover-color)",
+  buttonTextDefaultFocusedColor: "var(--button-default-focused-color)",
+  buttonTextDefaultPressedColor: "var(--button-default-pressed-color)"
+};

package/src/components/admin/layout/LeftNav/LeftNav.module.scss

@@ -21,7 +21,6 @@
   position: fixed;
   z-index: 2;
 
-  background-color: white;
   display: block;
   overflow-y: auto;
   flex-shrink: 0;
@@ -30,6 +29,9 @@
   padding: 0;
   margin: 0;
 
+  font-family: var(--font-family);
+
+  background-color: white;
   box-shadow:
     0px 2px 2px 0px rgba(1, 5, 50, 0.02),
     0px 3px 4px 0px rgba(1, 5, 50, 0.02),

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.module.scss

@@ -171,7 +171,7 @@
   }
 
   a.menu-item-active {
-    background-color: var(--color-primary50);
+    background-color: var(--left-nav-item-active-background-color);
 
     &:hover {
       background-color: var(--color-blue-grey50);
@@ -190,7 +190,7 @@
       z-index: 2;
       border-top-right-radius: 0.125rem;
       border-bottom-right-radius: 0.125rem;
-      border-left: 0.25rem solid var(--color-primary500);
+      border-left: 0.25rem solid var(--left-nav-item-active-ribbon-color);
     }
 
     .menu-item-text {

package/src/components/miscellaneous/IdentityProviderButton.tsx

@@ -54,14 +54,16 @@ export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement,
 
   const generateCSSProperties = () => {
     return {
-      "--button-primary-default-color": customization?.backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+      "--button-fill-primary-default-color":
+        customization?.backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
       borderColor: customization?.borderColor ?? DEFAULT_BORDER_COLOR,
       "--button-fill-text-color": customization?.textColor ?? DEFAULT_TEXT_COLOR,
       "--color-focus": customization?.focusBorderColor ?? DEFAULT_FOCUS_OUTLINE_COLOR,
-      "--button-primary-focused-color":
+      "--button-fill-primary-focused-color":
         customization?.focusBackgroundColor ?? DEFAULT_BACKGROUND_COLOR,
-      "--button-primary-hover-color": customization?.hoverBackgroundColor ?? DEFAULT_HOVER_COLOR,
-      "--button-primary-pressed-color":
+      "--button-fill-primary-hover-color":
+        customization?.hoverBackgroundColor ?? DEFAULT_HOVER_COLOR,
+      "--button-fill-primary-pressed-color":
         customization?.pressedBackgroundColor ?? DEFAULT_PRESSED_COLOR
     } as CSSProperties;
   };

package/src/font/icomoon.svg

@@ -98,5 +98,6 @@
 <glyph unicode="&#xe958;" glyph-name="fido-device" d="M995.681 762.379c42.496-42.502 36.477-117.432-13.457-167.363l-452.042-452.040c-19.971-19.977-49.944-22.384-66.944-5.384l-15.388 15.42-216.983-217.012-230.865 230.868 216.983 217.012-15.394 15.359c-17 17.001-14.592 46.975 5.382 66.945l452.043 452.043c49.928 49.931 124.862 55.955 167.365 13.453l169.3-169.301zM203.528 216.481l-46.173 46.176-36.164-36.162 46.173-46.176 36.164 36.162zM326.655 93.357l-46.173 46.17-36.163-36.162 46.173-46.17 36.163 36.162zM908.932 704.475l-140.457 140.456c-24.967 24.966-65.444 24.966-90.411 0s-24.967-65.443 0-90.408l140.457-140.456c24.967-24.966 65.444-24.966 90.411 0 24.961 24.965 24.961 65.443 0 90.408z" />
 <glyph unicode="&#xe959;" glyph-name="security" d="M512 960l-418.909-186.182v-279.273c0-258.327 178.734-499.898 418.909-558.545 240.174 58.647 418.909 300.218 418.909 558.545v279.273l-418.909 186.182zM512 448.467h325.818c-24.669-191.768-152.669-362.589-325.818-416.116v415.65h-325.818v265.309l325.818 144.756v-409.6z" />
 <glyph unicode="&#xe95a;" glyph-name="arrow-right" d="M511.997 960l-90.237-90.24 357.116-357.758h-778.874v-127.998h778.874l-357.116-357.764 90.237-90.24 512.001 512.001-512.001 511.999z" />
+<glyph unicode="&#xe95b;" glyph-name="switch" horiz-adv-x="1365" d="M316.050 521.142l-291.84-292.571 291.84-292.57v219.428h512.735v146.286h-512.735v219.429zM1340.79 667.428l-291.84 292.571v-219.43h-512.735v-146.286h512.735v-219.429l291.84 292.571z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>