@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -0,0 +1,481 @@
+/*
+ * 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.
+ */
+
+/**
+ * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx
+ * and make sure to add it to the shouldBeColorPicker array!
+ */
+
+import React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from "react";
+import { ButtonColorProps, defaultButtonColors } from "./buttonBaseStyling";
+
+export interface CSSProperties extends ButtonColorProps {
+  colorFocus?: string;
+  colorPrimary?: string;
+  colorSuccess?: string;
+  colorWarning?: string;
+  colorDanger?: string;
+  colorPrimary100?: string;
+  colorPrimary300?: string;
+  colorPrimary500?: string;
+  colorPrimary600?: string;
+  colorPrimary700?: string;
+  colorPrimary900?: string;
+  colorPrimary50?: string;
+  colorBlueGrey25?: string;
+  colorBlueGrey50?: string;
+  colorBlueGrey100?: string;
+  colorBlueGrey200?: string;
+  colorBlueGrey300?: string;
+  colorBlueGrey400?: string;
+  colorBlueGrey500?: string;
+  colorBlueGrey700?: string;
+  colorBlueGrey800?: string;
+  colorBlueGrey900?: string;
+  colorGreen50?: string;
+  colorGreen100?: string;
+  colorGreen200?: string;
+  colorGreen500?: string;
+  colorGreen600?: string;
+  colorGreen700?: string;
+  colorOrange50?: string;
+  colorOrange100?: string;
+  colorOrange500?: string;
+  colorOrange600?: string;
+  colorOrange700?: string;
+  colorRed50?: string;
+  colorRed100?: string;
+  colorRed200?: string;
+  colorRed500?: string;
+  colorRed600?: string;
+  colorRed700?: string;
+  colorRed900?: string;
+  colorWhite?: string;
+  colorBlack100?: string;
+  colorBlack50?: string;
+  colorBlack20?: string;
+  colorBlack10?: string;
+  defaultPressedColor?: string;
+  defaultHoverColor?: string;
+  defaultLineHeight?: string;
+  dataGridLineHeight?: string;
+  focusBorderRadius?: string;
+  buttonBorderRadius?: string;
+  buttonBorderWidth?: string;
+  buttonFontSize?: string;
+  buttonBorderStyle?: string;
+  /**@deprecated*/
+  buttonOutlineHoverTextColor?: 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;
+  inputBorderWidth?: string;
+  inputBorderWidthFocus?: string;
+  inputBorderStyle?: string;
+  inputBorderColor?: string;
+  inputBackgroundColor?: string;
+  inputHelperTextColor?: string;
+  inputHoverBackgroundColor?: string;
+  inputDisabledBackgroundColor?: string;
+  inputFontSize?: string;
+  dragBorderStyle?: string;
+  modalTitleColor?: string;
+  modalShadowColor?: string;
+  modalBackgroundColor?: string;
+  modalBackdropColor?: string;
+  modalContentFontSize?: string;
+  sideSheetShadowColorOne?: string;
+  sideSheetShadowColorTwo?: string;
+  skeletonBackgroundColor?: string;
+  skeletonAnimationColorRgb?: string;
+
+  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;
+
+  stepperWaitingColor?: string;
+  stepperWaitingHoverColor?: string;
+  stepperWaitingActiveColor?: string;
+  stepperWaitingDisabledColor?: string;
+  stepperCurrentColor?: string;
+  stepperCurrentHoverColor?: string;
+  stepperCurrentActiveColor?: string;
+  stepperCurrentDisabledColor?: string;
+  stepperDoneColor?: string;
+  stepperDoneHoverColor?: string;
+  stepperDoneActiveColor?: string;
+  stepperDoneDisabledColor?: string;
+  stepperErrorColor?: string;
+  stepperErrorHoverColor?: string;
+  stepperErrorActiveColor?: string;
+  stepperErrorDisabledColor?: string;
+  stepperDefaultTextColor?: string;
+  stepperLineColor?: string;
+  stepperLineBoldColor?: string;
+  stepperLineDisabledColor?: string;
+  stepperLineBoldDisabledColor?: string;
+  stepperLabelColor?: string;
+  stepperCaptionColor?: string;
+  stepperCaptionErrorColor?: string;
+  stepperLabelDisabledColor?: string;
+  stepperCaptionDisabledColor?: string;
+  stepperCaptionErrorDisabledColor?: string;
+  bannerBorderRadius?: string;
+  bannerBorderWidth?: string;
+  dataGridRowBackgroundColor?: string;
+  dataGridRowHoverBackgroundColor?: string;
+  progressBarBackgroundColor?: string;
+  tabsBackgroundColor?: string;
+  tabActiveBorderHeight?: string;
+  tabActiveBorderColor?: string;
+  tabActiveTextColor?: string;
+  tablistBorderWidth?: string;
+  tablistBorderStyle?: string;
+  tablistBorderColor?: string;
+  tabTextColor?: string;
+  tabHoverColor?: string;
+  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;
+  info?: string;
+  disabled?: string;
+  greyedOut?: string;
+  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;
+
+  formControlFontSize?: string;
+  fileUploadBorderWidth?: string;
+  dragDropBorderStyle?: string;
+  fontSizeDataGrid?: string;
+  readOnlyBorderColor?: string;
+  readOnlyTextColor?: string;
+  iconFontBig?: string;
+  tooltipIndex?: string;
+}
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactElement[] | ReactElement | string[] | string | number[] | number;
+  properties?: CSSProperties;
+}
+
+export const BaseStyling = ({ children, properties = {} }: Props) => {
+  const defaultProperties: CSSProperties = {
+    colorPrimary50: "#E6E7F4",
+    colorPrimary100: "#CDD0EA",
+    colorPrimary300: "#6871BF",
+    colorPrimary500: "#041295",
+    colorPrimary600: "#030F77",
+    colorPrimary700: "#020B59",
+    colorPrimary900: "#01041E",
+    colorBlueGrey25: "#F7F7F9",
+    colorBlueGrey50: "#EEEFF3",
+    colorBlueGrey100: "#DEDEE6",
+    colorBlueGrey200: "#BCBECE",
+    colorBlueGrey300: "#9A9DB5",
+    colorBlueGrey400: "#797D9C",
+    colorBlueGrey500: "#5D607E",
+    colorBlueGrey700: "#383A4B",
+    colorBlueGrey800: "#252733",
+    colorBlueGrey900: "#131319",
+    colorGreen50: "#E8F3ED",
+    colorGreen100: "#D1E6DA",
+    colorGreen200: "#A2CDB4",
+    colorGreen500: "#178244",
+    colorGreen600: "#126836",
+    colorGreen700: "#0E4E29",
+    colorOrange50: "#FCF2E6",
+    colorOrange100: "#FFE0B2",
+    colorOrange500: "#E07900",
+    colorOrange600: "#B36100",
+    colorOrange700: "#864900",
+    colorRed50: "#FCE9E6",
+    colorRed100: "#FFCDD2",
+    colorRed200: "#F3A599",
+    colorRed500: "#E01E00",
+    colorRed600: "#B31800",
+    colorRed700: "#861200",
+    colorRed900: "#2D0600",
+    colorBlack100: "#000000",
+    colorBlack50: "rgba(0, 0, 0, 0.5)",
+    colorBlack20: "rgba(0, 0, 0, 0.2)",
+    colorBlack10: "rgba(0, 0, 0, 0.1)",
+    colorWhite: "#FFFFFF",
+    colorFocus: "var(--color-primary300)",
+    colorPrimary: "var(--color-primary500)",
+    colorSuccess: "var(--color-green500)",
+    colorWarning: "var(--color-orange500)",
+    colorDanger: "var(--color-red500)",
+    defaultPressedColor: "var(--color-blue-grey100)",
+    defaultHoverColor: "var(--color-blue-grey25)",
+    defaultLineHeight: "1.5",
+    dataGridLineHeight: "1.25",
+    defaultBorderRadius: "0.25rem",
+    focusBorderRadius: "0.125rem",
+    buttonBorderRadius: "0.125rem",
+    buttonBorderWidth: "2px",
+    buttonFontSize: "0.875rem",
+    buttonBorderStyle: "solid",
+    ...defaultButtonColors,
+    buttonFillTextColor: "var(--light)",
+    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",
+    inputBorderWidth: "1px",
+    inputBorderWidthFocus: "1px",
+    inputBorderStyle: "solid",
+    fileUploadBorderWidth: "1px",
+    dragDropBorderStyle: "dashed",
+    inputBorderColor: "var(--color-blue-grey500)",
+    inputBackgroundColor: "var(--light)",
+    inputHelperTextColor: "var(--color-blue-grey500)",
+    inputHoverBackgroundColor: "var(--default-hover-color)",
+    inputDisabledBackgroundColor: "var(--input-hover-background-color)",
+    inputFontSize: "0.875rem",
+    dragBorderStyle: "solid",
+    modalTitleColor: "var(--font-color-h4)",
+    modalShadowColor: "rgba(0, 0, 0, 0.16)",
+    modalBackgroundColor: "var(--light)",
+    modalBackdropColor: "var(--default)",
+    modalContentFontSize: "0.875rem",
+    sideSheetShadowColorOne: "#01053214",
+    sideSheetShadowColorTwo: "#0105320a",
+    skeletonBackgroundColor: "var(--disabled)",
+    skeletonAnimationColorRgb: "255, 255, 255",
+
+    alertFontSize: "0.875rem",
+    alertTextColor: "var(--default)",
+    alertTextInvertedColor: "var(--color-blue-grey25)",
+
+    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-orange600)",
+    alertBorderWidth: "4px",
+    alertBorderRadius: "2px",
+
+    stepperWaitingColor: "var(--color-blue-grey200)",
+    stepperWaitingHoverColor: "var(--color-blue-grey300)",
+    stepperWaitingActiveColor: "var(--color-blue-grey400)",
+    stepperWaitingDisabledColor: "var(--color-blue-grey100)",
+    stepperCurrentColor: "var(--color-primary500)",
+    stepperCurrentHoverColor: "var(--color-primary600)",
+    stepperCurrentActiveColor: "var(--color-primary700)",
+    stepperCurrentDisabledColor: "var(--color-primary100)",
+    stepperDoneColor: "var(--color-green500)",
+    stepperDoneHoverColor: "var(--color-green600)",
+    stepperDoneActiveColor: "var(--color-green700)",
+    stepperDoneDisabledColor: "var(--color-green200)",
+    stepperErrorColor: "var(--color-red500)",
+    stepperErrorHoverColor: "var(--color-red600)",
+    stepperErrorActiveColor: "var(--color-red700)",
+    stepperErrorDisabledColor: "var(--color-red200)",
+    stepperDefaultTextColor: "var(--color-white)",
+    stepperLineColor: "var(--color-blue-grey300)",
+    stepperLineBoldColor: "var(--color-blue-grey700)",
+    stepperLineDisabledColor: "var(--color-blue-grey100)",
+    stepperLineBoldDisabledColor: "var(--color-blue-grey300)",
+    stepperLabelColor: "var(--color-blue-grey900)",
+    stepperCaptionColor: "var(--color-blue-grey500)",
+    stepperCaptionErrorColor: "var(--color-red500)",
+    stepperLabelDisabledColor: "var(--color-blue-grey400)",
+    stepperCaptionDisabledColor: "var(--color-blue-grey400)",
+    stepperCaptionErrorDisabledColor: "var(--color-red200)",
+    bannerBorderRadius: "2px",
+    bannerBorderWidth: "4px",
+    dataGridRowBackgroundColor: "transparent",
+    dataGridRowHoverBackgroundColor: "var(--default-hover-color)",
+    progressBarBackgroundColor: "var(--disabled)",
+    tabsBackgroundColor: "var(--light)",
+    tabActiveBorderHeight: "0.25rem",
+    tabActiveBorderColor: "var(--color-primary)",
+    tabActiveTextColor: "var(--color-primary)",
+    tablistBorderWidth: "0.0625rem",
+    tablistBorderStyle: "solid",
+    tablistBorderColor: "var(--color-blue-grey100)",
+    tabTextColor: "var(--color-blue-grey900)",
+    tabHoverColor: "var(--default-hover-color)",
+    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)",
+    info: "var(--color-primary500)",
+    disabled: "var(--color-blue-grey100)",
+    greyedOut: "var(--color-blue-grey400)",
+    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",
+
+    readOnlyBorderColor: "var(--color-blue-grey100)",
+    readOnlyTextColor: "var(--color-blue-grey900)",
+    formControlFontSize: "0.875rem",
+    fontSizeDataGrid: "0.875rem",
+    iconFontBig: "1.125rem",
+    tooltipIndex: "12"
+  };
+
+  /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
+  const [isLoading, setIsLoading] = useState(true);
+  const baseStylingWrapper = useRef(null);
+
+  const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {
+    for (const [key, value] of Object.entries(CSSPropertiesObject)) {
+      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);
+      (baseStylingWrapper.current! as HTMLElement).style.setProperty(
+        `--${formattedPropertyName}`,
+        value
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {
+      const mergedState = { ...defaultProperties, ...properties };
+      setCSSProperties(mergedState);
+    } else if (baseStylingWrapper.current) {
+      setCSSProperties(defaultProperties);
+    }
+    setIsLoading(false);
+  }, [properties, baseStylingWrapper.current]);
+
+  return (
+    <div className="basestyling-wrapper" ref={baseStylingWrapper}>
+      {!isLoading ? children : null}
+    </div>
+  );
+};

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.interfaces.ts

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+import { ReactElement } from "react";
+
+export interface MenuItem {
+  key: string;
+  path?: string;
+  active?: boolean;
+  /**
+   * @deprecated it can be removed in next release
+   */
+  disabled?: boolean;
+  title: string;
+  iconComponent?: ReactElement;
+  items?: MenuItem[];
+}