@onewelcome/react-lib-components 9.3.0 → 9.4.0

package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts

@@ -3,7 +3,8 @@
  * and make sure to add it to the shouldBeColorPicker array!
  */
 import React, { HTMLAttributes, ReactElement } from "react";
-export interface CSSProperties {
+import { ButtonColorProps } from "./buttonBaseStyling";
+export interface CSSProperties extends ButtonColorProps {
     colorFocus?: string;
     colorPrimary?: string;
     colorSuccess?: string;
@@ -58,36 +59,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;
@@ -100,7 +84,9 @@ export interface CSSProperties {
     inputHoverBackgroundColor?: string;
     inputDisabledBackgroundColor?: string;
     inputFontSize?: string;
+    iconFontBig?: string;
     dragBorderStyle?: string;
+    modalTitleColor?: string;
     modalShadowColor?: string;
     modalBackgroundColor?: string;
     modalBackdropColor?: string;
@@ -169,8 +155,20 @@ export interface CSSProperties {
     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;
@@ -184,21 +182,27 @@ export interface CSSProperties {
     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> {
     children?: ReactElement[] | ReactElement | string[] | string | number[] | number;

package/dist/esm/src/components/_BaseStyling_/buttonBaseStyling.d.ts

@@ -0,0 +1,14 @@
+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 declare const defaultButtonColors: Required<ButtonColorProps>;
+export {};

package/dist/esm/src/readyclasses.module.scss.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.readyclasses_sr-only_NmMJU{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_NmMJU{display:none}.readyclasses_slide-in_NmMJU{animation:readyclasses_slide-in_NmMJU .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_NmMJU{animation-duration:.1ms}}.readyclasses_slide-out_NmMJU{animation:readyclasses_slide-out_NmMJU .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_NmMJU{animation-duration:.1ms}}@keyframes readyclasses_slide-in_NmMJU{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_NmMJU{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
-var readyclasses = {"sr-only":"readyclasses_sr-only_NmMJU","hidden":"readyclasses_hidden_NmMJU","slide-in":"readyclasses_slide-in_NmMJU","slide-out":"readyclasses_slide-out_NmMJU"};
+var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.readyclasses_sr-only_aXWKY{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_aXWKY{display:none}.readyclasses_slide-in_aXWKY{animation:readyclasses_slide-in_aXWKY .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_aXWKY{animation-duration:.1ms}}.readyclasses_slide-out_aXWKY{animation:readyclasses_slide-out_aXWKY .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_aXWKY{animation-duration:.1ms}}@keyframes readyclasses_slide-in_aXWKY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_aXWKY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
+var readyclasses = {"sr-only":"readyclasses_sr-only_aXWKY","hidden":"readyclasses_hidden_aXWKY","slide-in":"readyclasses_slide-in_aXWKY","slide-out":"readyclasses_slide-out_aXWKY"};
 styleInject(css_248z);
 
 export { readyclasses as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",

package/src/components/Button/Button.module.scss

@@ -15,7 +15,7 @@
  */
 
 @use "../../mixins.module.scss";
-@use "src/functions" as *;
+@use "../../functions" as *;
 
 .fill {
   @include mixins.button("fill");

package/src/components/ContextMenu/ContextMenuItem.module.scss

@@ -56,7 +56,7 @@
     }
 
     &.active {
-      color: var(--color-primary);
+      color: var(--context-menu-active-color);
 
       &::before {
         content: "";
@@ -66,7 +66,7 @@
         height: 100%;
         border-top-right-radius: 0.125rem;
         border-bottom-right-radius: 0.125rem;
-        border-left: 0.25rem solid var(--color-primary);
+        border-left: 0.25rem solid var(--context-menu-active-color);
       }
     }
   }

package/src/components/DatePicker/DatePicker.module.scss

@@ -69,7 +69,7 @@
 .rdp-root {
   position: relative;
   box-sizing: border-box;
-  @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));
 }
 
 .rdp-root * {

package/src/components/Form/Checkbox/Checkbox.module.scss

@@ -58,7 +58,7 @@
   z-index: 2;
 
   &:checked:not(.disabled) + * {
-    color: var(--color-primary);
+    color: var(--checkbox-checked-color);
   }
 
   &:focus-visible {
@@ -115,6 +115,8 @@
   width: var(--font-size-big);
   height: var(--font-size-big);
   z-index: 1;
+
+  color: var(--checkbox-unchecked-color);
 }
 
 .disabled {
@@ -140,7 +142,7 @@
 }
 
 .indeterminate {
-  color: var(--color-primary);
+  color: var(--checkbox-checked-color);
 }
 
 [data-readonlyview="true"] .checkbox-wrapper {

package/src/components/Form/Radio/Radio.module.scss

@@ -81,7 +81,7 @@
   }
 
   &:checked + * {
-    color: var(--color-primary);
+    color: var(--radio-checked-color);
   }
 
   &:checked + *.disabled {
@@ -135,6 +135,7 @@
   height: var(--font-size-big);
   z-index: 1;
   border-radius: 100%;
+  color: var(--color-blue-grey500);
 
   &:active {
     border-radius: 100%;

package/src/components/Form/Select/MultiSelect/MultiSelect.module.scss

@@ -55,7 +55,7 @@ $listItemHeight: 2.5rem;
 
   &:hover:not(.disabled):not(.expanded):not(.error) {
     .custom-select:not(:focus) {
-      border-color: var(--default);
+      border-color: var(--input-border-color);
       border-width: var(--input-border-width);
       background-color: var(--color-blue-grey25);
     }

package/src/components/Form/Select/SingleSelect/Select.module.scss

@@ -55,7 +55,7 @@ $listItemHeight: 2.5rem;
 
   &:hover:not(.disabled):not(.expanded):not(.error) {
     button:not(:focus) {
-      border-color: var(--default);
+      border-color: var(--input-border-color);
       border-width: var(--input-border-width);
       background-color: var(--color-blue-grey25);
     }
@@ -72,7 +72,7 @@ $listItemHeight: 2.5rem;
           )
       );
     background-color: transparent;
-    border-color: var(--color-blue-grey500);
+    border-color: var(--input-border-color);
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);

package/src/components/Layout/Card/Card.module.scss

@@ -44,14 +44,14 @@
   }
 }
 
-.content {
+.body {
   padding: relativeToBaseFontSize(1) relativeToBaseFontSize(1.5);
 
-  &.grey {
+  &.default-body-style {
     background-color: var(--color-blue-grey50);
   }
 
-  &.white {
+  &.white-body-style {
     background-color: var(--color-white);
     border: 1px solid var(--color-blue-grey100);
 

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)
+    );
   }
 }