@onewelcome/react-lib-components 9.3.0 → 9.4.0

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/mixins.module.scss

@@ -28,14 +28,6 @@
   } @else if $variant == "fill" {
     &:not(#{$disabledSelector}) {
       color: var(--button-fill-text-color);
-      @include buttonStyles(
-        var(--button-primary-default-color),
-        var(--button-primary-hover-color),
-        var(--button-primary-focused-color),
-        var(--button-primary-pressed-color),
-        $variant,
-        $type
-      );
     }
   } @else if $variant == "outline" {
     background-color: var(--white);
@@ -43,30 +35,30 @@
 
   &.primary:not(#{$disabledSelector}) {
     @include buttonStyles(
-      var(--button-primary-default-color),
-      var(--button-primary-hover-color),
-      var(--button-primary-focused-color),
-      var(--button-primary-pressed-color),
+      var(--button-#{$variant}-primary-default-color),
+      var(--button-#{$variant}-primary-hover-color),
+      var(--button-#{$variant}-primary-focused-color),
+      var(--button-#{$variant}-primary-pressed-color),
       $variant,
       $type
     );
   }
   &.success:not(#{$disabledSelector}) {
     @include buttonStyles(
-      var(--button-success-default-color),
-      var(--button-success-hover-color),
-      var(--button-success-focused-color),
-      var(--button-success-pressed-color),
+      var(--button-#{$variant}-success-default-color),
+      var(--button-#{$variant}-success-hover-color),
+      var(--button-#{$variant}-success-focused-color),
+      var(--button-#{$variant}-success-pressed-color),
       $variant,
       $type
     );
   }
   &.danger:not(#{$disabledSelector}) {
     @include buttonStyles(
-      var(--button-danger-default-color),
-      var(--button-danger-hover-color),
-      var(--button-danger-focused-color),
-      var(--button-danger-pressed-color),
+      var(--button-#{$variant}-danger-default-color),
+      var(--button-#{$variant}-danger-hover-color),
+      var(--button-#{$variant}-danger-focused-color),
+      var(--button-#{$variant}-danger-pressed-color),
       $variant,
       $type
     );
@@ -191,7 +183,7 @@
 }
 
 @mixin outline(
-  $color: var(--light-border-color),
+  $color: var(--input-border-color),
   $style: var(--input-border-style),
   $width: var(--input-border-width),
   $borderRadius: var(--input-border-radius),
@@ -222,7 +214,7 @@
 
 @mixin outlineStates {
   &:hover .outline {
-    border-color: var(--default);
+    border-color: var(--input-border-color);
     background-color: var(--input-hover-background-color);
   }
 
@@ -333,7 +325,13 @@
   }
 }
 
-@mixin fontProperties($fontFamily, $fontSize, $fontWeight, $lineHeight) {
+@mixin fontProperties(
+  $fontFamily: var(--font-family),
+  $fontSize: var(--font-size),
+  $fontWeight: 400,
+  $lineHeight: var(--default-line-height),
+  $color: var(--default)
+) {
   font-family: $fontFamily;
   font-size: $fontSize;
   font-style: normal;
@@ -342,7 +340,7 @@
   font-weight: $fontWeight;
   text-transform: none;
   letter-spacing: 0;
-  color: var(--default);
+  color: $color;
   margin: 0 0 relativeToBaseFontSize(1) 0;
 }