@onewelcome/react-lib-components 9.3.0 → 9.5.0

package/src/components/Layout/Card/Card.tsx

@@ -22,7 +22,7 @@ import { TextEllipsis } from "../../TextEllipsis/TextEllipsis";
 
 export interface CardHeaderInfo {}
 
-export type CardStyle = "grey" | "white";
+export type CardStyle = "default" | "white";
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   title?: string;
@@ -42,7 +42,7 @@ export const CardComponent = ({
   action,
   wrapHeaderText = false,
   headerContent,
-  cardStyle = "grey",
+  cardStyle = "default",
   collapsed = false,
   children,
   ...rest
@@ -91,10 +91,10 @@ export const CardComponent = ({
       )}
       {!collapsed && (
         <div
-          data-testid={"card-content"}
+          data-testid={"card-body"}
           className={[
-            classes["content"],
-            classes[cardStyle],
+            classes["body"],
+            classes[`${cardStyle}-body-style`],
             classes[headerPresent ? "with-header" : "without-header"]
           ].join(" ")}
         >

package/src/components/Link/Link.module.scss

@@ -18,7 +18,7 @@
 
 .link {
   font-family: var(--font-family);
-  font-size: var(--font-size);
+  font-size: var(--link-font-size);
   font-style: normal;
   font-variant: normal;
   line-height: var(--default-line-height);
@@ -34,50 +34,50 @@
   }
 
   &.primary {
-    color: var(--color-primary);
+    color: var(--link-primary-default-color);
 
     &:focus-visible {
-      outline: 0.5px dashed var(--color-primary);
+      outline: 0.5px dashed var(--link-primary-default-color);
     }
 
     &:visited {
-      color: var(--button-primary-pressed-color);
+      color: var(--link-primary-visited-color);
     }
   }
 
   &.success {
-    color: var(--color-success);
+    color: var(--link-success-default-color);
 
     &:focus-visible {
-      outline: 0.5px dashed var(--color-primary);
+      outline: 0.5px dashed var(--link-success-default-color);
     }
 
     &:visited {
-      color: var(--button-success-pressed-color);
+      color: var(--link-success-visited-color);
     }
   }
 
   &.danger {
-    color: var(--color-danger);
+    color: var(--link-danger-default-color);
 
     &:focus-visible {
-      outline: 0.5px dashed var(--color-primary);
+      outline: 0.5px dashed var(--link-danger-default-color);
     }
 
     &:visited {
-      color: var(--button-danger-pressed-color);
+      color: var(--link-danger-visited-color);
     }
   }
 
   &.warning {
-    color: var(--color-warning);
+    color: var(--link-warning-default-color);
 
     &:focus-visible {
-      outline: 0.5px dashed var(--color-primary);
+      outline: 0.5px dashed var(--link-warning-default-color);
     }
 
     &:visited {
-      color: var(--button-warning-pressed-color);
+      color: var(--link-warning-visited-color);
     }
   }
 

package/src/components/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.module.scss

@@ -19,15 +19,16 @@
   padding: 1.25rem 1.5rem 0;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-}
 
-.headline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+  .headline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-.title {
-  flex: 1;
-  margin: 0;
+    .title {
+      flex: 1;
+      margin: 0;
+      color: var(--modal-title-color);
+    }
+  }
 }

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.module.scss

@@ -19,33 +19,34 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
 
-.headline {
-  display: flex;
+  .headline {
+    display: flex;
 
-  &.with-caption {
-    align-items: flex-start;
-  }
+    &.with-caption {
+      align-items: flex-start;
+    }
 
-  &.no-caption {
-    align-items: center;
-  }
-}
+    &.no-caption {
+      align-items: center;
+    }
 
-.title {
-  margin: 0;
-  line-height: 1;
+    .title {
+      margin: 0;
+      line-height: 1;
+      color: var(--modal-title-color);
 
-  &-icon > [data-icon] {
-    font-size: var(--font-size-big);
+      &-icon > [data-icon] {
+        font-size: var(--font-size-big);
+      }
+    }
   }
-}
 
-.caption {
-  color: var(--color-blue-grey500);
-}
+  .caption {
+    color: var(--color-blue-grey500);
+  }
 
-.close-button {
-  flex-shrink: 0;
+  .close-button {
+    flex-shrink: 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),