@onewelcome/react-lib-components 4.1.1 → 4.3.0

package/src/components/Stepper/Stepper.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Stepper, Props } from "./Stepper";
+import { render } from "@testing-library/react";
+
+const defaultParams: Props = {
+  steps: [],
+  direction: "horizontal"
+};
+
+const createStepper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Stepper {...parameters} data-testid="Stepper" />);
+  const StepperComponent = queries.getByTestId("Stepper");
+
+  return {
+    ...queries,
+    StepperComponent
+  };
+};
+
+describe("<Stepper/> should render", () => {
+  it("should render without crashing", () => {
+    const { StepperComponent } = createStepper();
+
+    expect(StepperComponent).toBeDefined();
+  });
+
+  it("should render given steps", () => {
+    const { StepperComponent, getAllByText } = createStepper(params => ({
+      ...params,
+      steps: [
+        {
+          label: "Step 1",
+          status: "waiting",
+          caption: "Caption"
+        },
+        {
+          label: "Step 2",
+          status: "current",
+          caption: "Caption"
+        },
+        {
+          label: "Step 3",
+          status: "done",
+          caption: "Caption"
+        },
+        {
+          label: "Step 4",
+          status: "error",
+          caption: "Caption"
+        }
+      ]
+    }));
+
+    expect(StepperComponent).toBeDefined();
+
+    expect(getAllByText(/Step/i)).toHaveLength(4);
+    expect(getAllByText(/Caption/i)).toHaveLength(4);
+  });
+
+  it("should render the horizontal stepper", () => {
+    const { StepperComponent, getAllByText } = createStepper(params => ({
+      ...params,
+      direction: "horizontal"
+    }));
+
+    expect(StepperComponent).toBeDefined();
+    expect(StepperComponent.classList.contains("horizontal")).toBe(true);
+  });
+
+  it("should render the vertical stepper", () => {
+    const { StepperComponent } = createStepper(params => ({
+      ...params,
+      direction: "vertical"
+    }));
+
+    expect(StepperComponent).toBeDefined();
+    expect(StepperComponent.classList.contains("vertical")).toBe(true);
+  });
+});

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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, { ComponentPropsWithRef } from "react";
+import { Step, Props as StepProps } from "./Step";
+import classes from "./Stepper.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  steps: StepProps[];
+  direction: "horizontal" | "vertical";
+}
+
+export const Stepper = ({ steps, direction = "horizontal", ...rest }: Props) => {
+  return (
+    <div
+      {...rest}
+      className={`${classes["stepper"]} ${
+        direction === "horizontal" ? classes["horizontal"] : classes["vertical"]
+      }`}
+    >
+      {steps.map((step, index) => (
+        <Step
+          {...step}
+          key={step.label.toLowerCase().replace(/\s/, "-")}
+          index={index}
+          direction={direction}
+          lastStep={index + 1 === steps.length}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/Tabs/Tab.tsx

@@ -21,6 +21,7 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, "children"> {
   title: string;
   children?: any;
   tabActive?: boolean;
+  icon?: React.ReactNode;
 }
 
 export const Tab = ({ children, tabActive, ...rest }: Props) => {

package/src/components/Tabs/TabButton.module.scss

@@ -13,40 +13,73 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../../mixins.module.scss";
 
 .tabbutton {
+  color: var(--tab-text-color);
   border: 0;
   border-radius: 0;
   font-size: var(--font-size);
   line-height: var(--default-line-height);
   margin: 0;
-  padding: 0.25rem 0 1rem 0;
-  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
   cursor: pointer;
   font-family: var(--font-family);
   background-color: transparent;
   white-space: nowrap;
   position: relative;
   font-weight: normal;
-  color: transparent;
+  border-bottom-style: var(--tablist-border-style);
+  border-bottom-width: var(--tablist-border-width);
+  border-bottom-color: var(--tablist-border-color);
 
-  &:focus-visible {
-    outline-color: var(--color-focus);
+  @include mixins.focusVisibleOutline($outlineOffset: 0);
+  &:where(:focus-visible) {
+    z-index: 1;
   }
 
-  span {
-    color: var(--tab-text-color);
-    font-weight: normal;
-    position: absolute;
-    left: 0;
+  &:hover {
+    background-color: var(--tab-hover-color);
+  }
+
+  &:active {
+    background-color: var(--tab-pressed-color);
   }
 
   &.selected {
-    color: var(--color-primary);
+    color: var(--tab-active-text-color);
+  }
+
+  &.fluid {
+    flex: 1;
+  }
+
+  &.has-icon {
+    gap: 0.25rem;
+    display: inline-flex;
+    align-items: center;
+
+    i {
+      display: flex;
+    }
+
+    span[data-icon] {
+      display: inline-block;
+      font-size: 1.25rem;
+      width: 1.25rem;
+    }
+
+    &.top-icon,
+    &.bottom-icon {
+      flex-direction: column;
+    }
+
+    &.left-icon i {
+      order: -1;
+    }
 
-    span {
-      color: transparent;
-      visibility: hidden;
+    &.top-icon i {
+      order: -1;
     }
   }
 }

package/src/components/Tabs/TabButton.tsx

@@ -26,10 +26,13 @@ import classes from "./TabButton.module.scss";
 export interface Props extends ComponentPropsWithRef<"button"> {
   tabActive?: boolean;
   focused?: boolean;
+  fluid?: boolean;
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right" | "top" | "bottom";
 }
 
 const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, tabActive, focused, title, ...rest }: Props,
+  { children, tabActive, focused, title, fluid, icon, iconPosition, className, ...rest }: Props,
   ref
 ) => {
   let buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
@@ -40,18 +43,22 @@ const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
     }
   }, [buttonRef.current, focused]);
 
+  const tabButtonClasses = [classes["tabbutton"]];
+  tabActive && tabButtonClasses.push(classes["selected"]);
+  fluid && tabButtonClasses.push(classes["fluid"]);
+  className && tabButtonClasses.push(className);
+  icon && tabButtonClasses.push(classes["has-icon"], classes[`${iconPosition}-icon`]);
+
   return (
     <button
       {...rest}
-      className={`${classes["tabbutton"]} ${tabActive ? classes["selected"] : ""} ${
-        rest.className ?? ""
-      }`}
+      className={tabButtonClasses.join(" ")}
       ref={buttonRef}
       role="tab"
       type="button"
     >
-      <span aria-hidden="true">{children}</span>
       {children}
+      {icon && <i>{icon}</i>}
     </button>
   );
 };

package/src/components/Tabs/Tabs.module.scss

@@ -31,31 +31,28 @@ $focus-width: 5px;
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
-  gap: 2rem;
   position: relative;
   margin: -$focus-width;
   padding: $focus-width;
   z-index: 0;
+
+  &.center {
+    justify-content: center;
+  }
+
+  &.right {
+    justify-content: flex-end;
+  }
 }
 
 .indicator {
   $transition-property: left, width;
 
   position: absolute;
-  height: var(--tab-active-border-height);
-  border-radius: 2px 2px 0 0;
+  height: calc(var(--tab-active-border-height) - var(--tablist-border-width));
+  border-radius: 0.125rem 0.125rem 0 0;
   background-color: var(--tab-active-border-color);
+  z-index: 2;
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);
 }
-
-.tabdivider {
-  border-bottom-style: var(--tablist-border-style);
-  border-bottom-width: var(--tablist-border-width);
-  border-bottom-color: var(--tablist-border-color);
-  width: calc(100% - ($focus-width * 2));
-  position: absolute;
-  bottom: $focus-width;
-  left: $focus-width;
-  z-index: -1;
-}

package/src/components/Tabs/Tabs.tsx

@@ -29,13 +29,27 @@ import { TabButton } from "./TabButton";
 import classes from "./Tabs.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
-  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+  children: ReactElement<TabProps>[];
   selected?: number;
   onTabChange?: (index: number) => void;
+  fluid?: boolean;
+  align?: "left" | "center" | "right";
+  tabListClassName?: string;
+  iconsPosition?: "left" | "right" | "top" | "bottom";
 }
 
 const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, selected = 0, onTabChange, ...rest }: Props,
+  {
+    children,
+    selected = 0,
+    onTabChange,
+    className,
+    fluid,
+    tabListClassName,
+    align,
+    iconsPosition = "left",
+    ...rest
+  }: Props,
   ref
 ) => {
   const [renderedButtons, setRenderedButtons] = useState<ReactElement[]>([]);
@@ -92,7 +106,8 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         top:
           selectedButton.offsetTop +
           selectedButton.offsetHeight -
-          indicatorRef.current!.offsetHeight,
+          indicatorRef.current!.offsetHeight -
+          parseInt(getComputedStyle(selectedButton).borderBottomWidth),
         width: selectedButton.offsetWidth
       });
     }
@@ -120,7 +135,11 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             focused: usingKeyboardNavigation && activeTabIndex === index,
             tabActive: activeTabIndex === index,
             "aria-controls": `tab_${index}`,
-            onClick: () => setActiveTabIndex(index)
+            onClick: () => setActiveTabIndex(index),
+            disabled: child.props.disabled,
+            fluid: fluid,
+            iconPosition: iconsPosition,
+            icon: child.props.icon
           },
           child.props.title
         );
@@ -128,10 +147,6 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       return null;
     });
 
-    setRenderedButtons(buttons);
-  }, [activeTabIndex]);
-
-  useEffect(() => {
     const tabs = React.Children.map(children, (child, index) => {
       if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
         return React.cloneElement(child, {
@@ -147,13 +162,17 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     });
 
     setRenderedTabs(tabs);
-  }, [activeTabIndex]);
+    setRenderedButtons(buttons);
+  }, [activeTabIndex, fluid, align, iconsPosition]);
+
+  const tabListClasses = [classes["tablist"]];
+  align && tabListClasses.push(classes[align]);
+  tabListClassName && tabListClasses.push(tabListClassName);
 
   return (
-    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${rest.className ?? ""}`}>
-      <div role="tablist" className={classes["tablist"]} onKeyDown={handleKeyDown}>
+    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${className ?? ""}`}>
+      <div role="tablist" className={tabListClasses.join(" ")} onKeyDown={handleKeyDown}>
         {renderedButtons}
-        <div className={classes["tabdivider"]} />
         <div
           className={classes["indicator"]}
           ref={indicatorRef}

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -26,6 +26,7 @@ interface CSSProperties {
   colorPrimary?: string;
   colorSecondary?: string;
   colorTertiary?: string;
+  colorPrimary100?: string;
   colorPrimary300?: string;
   colorPrimary500?: string;
   colorPrimary600?: string;
@@ -33,6 +34,7 @@ interface CSSProperties {
   colorPrimary900?: string;
   colorBlueGrey100?: string;
   colorBlueGrey200?: string;
+  colorBlueGrey300?: string;
   colorBlueGrey400?: string;
   colorBlueGrey25?: string;
   colorBlueGrey25Transparent?: string;
@@ -42,6 +44,7 @@ interface CSSProperties {
   colorBlueGrey800?: string;
   colorBlueGrey900?: string;
   colorGreen100?: string;
+  colorGreen200?: string;
   colorGreen500?: string;
   colorGreen600?: string;
   colorGreen700?: string;
@@ -51,14 +54,18 @@ interface CSSProperties {
   colorOrange500?: string;
   colorOrange600?: string;
   colorOrange700?: string;
+  colorRed200?: string;
   colorRed500?: string;
-  colorWhite?: string;
   colorRed600?: string;
   colorRed700?: string;
+  colorWhite?: string;
   colorBlack100?: string;
   colorBlack20?: string;
   colorBlack10?: string;
+  defaultPressedColor?: string;
+  defaultHoverColor?: string;
   defaultLineHeight?: string;
+  focusBorderRadius?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
   buttonFontSize?: string;
@@ -86,6 +93,15 @@ interface CSSProperties {
   buttonDefaultFocusedColor?: string;
   buttonDefaultPressedColor?: string;
   buttonOutlineActiveTextColor?: string;
+  checkboxUncheckedHoverColor?: string;
+  checkboxUncheckedPressedColor?: string;
+  checkboxCheckedHoverColor?: string;
+  checkboxCheckedPressedColor?: string;
+  radioHoverBackgroundColor?: string;
+  radioPressedBackgroundColor?: string;
+  radioHoverColor?: string;
+  radioPressedColor?: string;
+  defaultBorderRadius?: string;
   inputBorderRadius?: string;
   inputBorderWidth?: string;
   inputBorderWidthFocus?: string;
@@ -108,6 +124,33 @@ interface CSSProperties {
   snackbarErrorBackgroundColor?: string;
   snackbarWarningBackgroundColor?: string;
   snackbarBorderRadius?: 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;
@@ -116,13 +159,18 @@ interface CSSProperties {
   tabsBackgroundColor?: string;
   tabActiveBorderHeight?: string;
   tabActiveBorderColor?: string;
+  tabActiveTextColor?: string;
   tablistBorderWidth?: string;
   tablistBorderStyle?: string;
   tablistBorderColor?: string;
   tabTextColor?: string;
+  tabHoverColor?: string;
+  tabPressedColor?: string;
   toggleBackgroundColor?: string;
   tooltipBackgroundColor?: string;
   wizardStepIndicatorFutureColor?: string;
+  contextMenuHoverColor?: string;
+  contextMenuPressedColor?: string;
   default?: string;
   success?: string;
   error?: string;
@@ -134,6 +182,7 @@ interface CSSProperties {
   light?: string;
   fontFamily?: string;
   fontFamilyCode?: string;
+  fontSizeFormLabel?: string;
   fontSize?: string;
   fontSizeH1?: string;
   fontSizeH2?: string;
@@ -151,6 +200,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
+    colorPrimary100: "#CDD0EA",
     colorPrimary300: "#6871BF",
     colorPrimary500: "#041295",
     colorPrimary600: "#030F77",
@@ -161,12 +211,14 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorBlueGrey50: "#EEEFF3",
     colorBlueGrey100: "#DEDEE6",
     colorBlueGrey200: "#BCBECE",
+    colorBlueGrey300: "#9A9DB5",
     colorBlueGrey400: "#797D9C",
     colorBlueGrey500: "#5D607E",
     colorBlueGrey700: "#383A4B",
     colorBlueGrey800: "#252733",
     colorBlueGrey900: "#131319",
     colorGreen100: "#D1E6DA",
+    colorGreen200: "#A2CDB4",
     colorGreen500: "#178244",
     colorGreen600: "#126836",
     colorGreen700: "#0E4E29",
@@ -175,6 +227,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorOrange500: "#E07900",
     colorOrange600: "#B36100",
     colorOrange700: "#864900",
+    colorRed200: "#F3A599",
     colorRed500: "#E01E00",
     colorRed600: "#B31800",
     colorRed700: "#861200",
@@ -187,8 +240,12 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorPrimary: "var(--color-primary500)",
     colorSecondary: "var(--color-green500)",
     colorTertiary: "var(--color-light-blue600)",
-    defaultLineHeight: "1.5",
-    buttonBorderRadius: "2px",
+    defaultPressedColor: "var(--color-blue-grey100)",
+    defaultHoverColor: "var(--color-blue-grey25)",
+    defaultLineHeight: "1.5", //FIXME: UCL-395
+    defaultBorderRadius: "0.25rem",
+    focusBorderRadius: "0.125rem",
+    buttonBorderRadius: "var(--default-border-radius)",
     buttonBorderWidth: "2px",
     buttonFontSize: "1rem",
     buttonBorderStyle: "solid",
@@ -214,6 +271,14 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     buttonDefaultFocusedColor: "var(--color-blue-grey700)",
     buttonDefaultPressedColor: "var(--color-blue-grey800)",
     buttonOutlineHoverTextColor: "var(--color-primary600)",
+    checkboxUncheckedHoverColor: "var(--color-blue-grey50)",
+    checkboxUncheckedPressedColor: "var(--default-pressed-color)",
+    checkboxCheckedHoverColor: "var(--color-primary600)",
+    checkboxCheckedPressedColor: "var(--color-primary700)",
+    radioHoverBackgroundColor: "var(--color-blue-grey50)",
+    radioPressedBackgroundColor: "var(--default-pressed-color)",
+    radioHoverColor: "var(--color-primary600)",
+    radioPressedColor: "var(--color-primary700)",
     inputBorderRadius: "2px",
     inputBorderWidth: "1px",
     inputBorderWidthFocus: "1px",
@@ -221,7 +286,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputBorderColor: "var(--color-blue-grey500)",
     inputBackgroundColor: "var(--light)",
     inputHelperTextColor: "var(--color-blue-grey500)",
-    inputHoverBackgroundColor: "var(--color-blue-grey25)",
+    inputHoverBackgroundColor: "var(--default-hover-color)",
     inputDisabledBackgroundColor: "var(--input-hover-background-color)",
     dragBackgroundColor: "var(--color-blue-grey25-transparent)",
     dragBorderStyle: "solid",
@@ -236,21 +301,53 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     snackbarErrorBackgroundColor: "var(--color-red500)",
     snackbarWarningBackgroundColor: "var(--color-orange500)",
     snackbarBorderRadius: "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: "0 0 0 4px",
     dataGridRowBackgroundColor: "transparent",
-    dataGridRowHoverBackgroundColor: "var(--color-blue-grey25)",
+    dataGridRowHoverBackgroundColor: "var(--default-hover-color)",
     progressBarBackgroundColor: "var(--disabled)",
     tabsBackgroundColor: "var(--light)",
-    tabActiveBorderHeight: "4px",
+    tabActiveBorderHeight: "0.25rem",
     tabActiveBorderColor: "var(--color-primary)",
-    tablistBorderWidth: "1px",
+    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)",
     wizardStepIndicatorFutureColor: "var(--color-blue-grey200)",
+    contextMenuHoverColor: "var(--default-hover-color)",
+    contextMenuPressedColor: "var(--default-pressed-color)",
     default: "var(--color-blue-grey900)",
     success: "var(--color-green500)",
     error: "var(--color-red500)",
@@ -262,14 +359,15 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     light: "var(--color-white)",
     fontFamily: "Roboto, sans-serif",
     fontFamilyCode: "'Roboto Mono', monospace",
-    fontSize: "1rem",
+    fontSizeFormLabel: "0.875rem", //FIXME: UCL-395
+    fontSize: "1rem", //FIXME: UCL-395
     fontSizeH1: "2.5rem",
     fontSizeH2: "1.625rem",
     fontSizeH3: "1.5rem",
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
     fontSizeCode: "1rem",
-    formControlFontSize: "14px"
+    formControlFontSize: "0.875rem" //FIXME: UCL-395
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */