@onewelcome/react-lib-components 9.2.0 → 9.4.0

package/dist/esm/src/components/Layout/Card/Card.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes, ReactElement } from "react";
+export interface CardHeaderInfo {
+}
+export type CardStyle = "default" | "white";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    titleHeadingLevel?: number;
+    description?: string;
+    action?: ReactElement;
+    wrapHeaderText?: boolean;
+    headerContent?: ReactElement;
+    cardStyle?: CardStyle;
+    collapsed?: boolean;
+}
+export declare const CardComponent: ({ title, titleHeadingLevel, description, action, wrapHeaderText, headerContent, cardStyle, collapsed, children, ...rest }: CardProps) => React.JSX.Element;
+export declare const Card: ({ title, titleHeadingLevel, description, action, wrapHeaderText, headerContent, cardStyle, collapsed, children, ...rest }: CardProps) => React.JSX.Element;

package/dist/esm/src/components/Layout/Card/Card.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

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_L3NVL{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_L3NVL{display:none}.readyclasses_slide-in_L3NVL{animation:readyclasses_slide-in_L3NVL .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_L3NVL{animation-duration:.1ms}}.readyclasses_slide-out_L3NVL{animation:readyclasses_slide-out_L3NVL .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_L3NVL{animation-duration:.1ms}}@keyframes readyclasses_slide-in_L3NVL{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_L3NVL{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
-var readyclasses = {"sr-only":"readyclasses_sr-only_L3NVL","hidden":"readyclasses_hidden_L3NVL","slide-in":"readyclasses_slide-in_L3NVL","slide-out":"readyclasses_slide-out_L3NVL"};
+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.2.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/Icon/Icon.module.scss

@@ -417,3 +417,7 @@
   content: "\e959";
   @include fontProperties();
 }
+.icon-switch:before {
+  content: "\e95b";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -110,7 +110,8 @@ export enum Icons {
   Cable = "cable",
   Dashboard = "dashboard",
   FidoDevice = "fido-device",
-  Security = "security"
+  Security = "security",
+  Switch = "switch"
 }
 
 type Tag = "span" | "div" | "i";

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

@@ -0,0 +1,68 @@
+@use "src/functions" as *;
+
+.main {
+  border-radius: relativeToBaseFontSize(0.25);
+  min-width: relativeToBaseFontSize(18.5);
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: relativeToBaseFontSize(0.5) relativeToBaseFontSize(1.5);
+  justify-content: space-between;
+  gap: relativeToBaseFontSize(0.5);
+  background-color: var(--color-primary100);
+
+  .title-left {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin: 0;
+      font-weight: 500;
+      max-width: 100%;
+      display: block;
+    }
+
+    .description {
+      margin: 0;
+      max-width: 100%;
+      display: block;
+    }
+  }
+
+  .title-right {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: relativeToBaseFontSize(0.5);
+    white-space: nowrap;
+  }
+}
+
+.body {
+  padding: relativeToBaseFontSize(1) relativeToBaseFontSize(1.5);
+
+  &.default-body-style {
+    background-color: var(--color-blue-grey50);
+  }
+
+  &.white-body-style {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-blue-grey100);
+
+    &.without-header {
+      border-radius: relativeToBaseFontSize(0.25);
+    }
+
+    &.with-header {
+      border-top: none;
+      border-bottom-left-radius: relativeToBaseFontSize(0.25);
+      border-bottom-right-radius: relativeToBaseFontSize(0.25);
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+/*
+ * 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 React, { HTMLAttributes, ReactElement } from "react";
+import { Typography } from "../../Typography/Typography";
+
+import classes from "./Card.module.scss";
+import { TextEllipsis } from "../../TextEllipsis/TextEllipsis";
+
+export interface CardHeaderInfo {}
+
+export type CardStyle = "default" | "white";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  titleHeadingLevel?: number;
+  description?: string;
+  action?: ReactElement;
+  wrapHeaderText?: boolean;
+  headerContent?: ReactElement;
+  cardStyle?: CardStyle;
+  collapsed?: boolean;
+}
+
+export const CardComponent = ({
+  title,
+  titleHeadingLevel,
+  description,
+  action,
+  wrapHeaderText = false,
+  headerContent,
+  cardStyle = "default",
+  collapsed = false,
+  children,
+  ...rest
+}: CardProps) => {
+  const headerPresent = Boolean(title || description || action || headerContent);
+  return (
+    <div className={classes["main"]} {...rest}>
+      {headerPresent && (
+        <div className={classes["header"]}>
+          {headerContent}
+          {(title || description || action) && (
+            <>
+              {(title || description) && (
+                <div className={classes["title-left"]}>
+                  {title && (
+                    <Typography
+                      data-testid={"card-title"}
+                      className={classes["title"]}
+                      variant={"body"}
+                      role={titleHeadingLevel ? "heading" : undefined}
+                      aria-level={titleHeadingLevel}
+                    >
+                      {wrapHeaderText ? title : <TextEllipsis>{title}</TextEllipsis>}
+                    </Typography>
+                  )}
+                  {description && (
+                    <Typography
+                      data-testid={"card-description"}
+                      className={classes["description"]}
+                      variant="sub-text"
+                      spacing={{ margin: 0 }}
+                    >
+                      {wrapHeaderText ? description : <TextEllipsis>{description}</TextEllipsis>}
+                    </Typography>
+                  )}
+                </div>
+              )}
+              {action && (
+                <div data-testid={"card-action"} className={classes["title-right"]}>
+                  {action}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+      {!collapsed && (
+        <div
+          data-testid={"card-body"}
+          className={[
+            classes["body"],
+            classes[`${cardStyle}-body-style`],
+            classes[headerPresent ? "with-header" : "without-header"]
+          ].join(" ")}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Card = CardComponent;

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