Styling the widget

All of our new widgets uses css variables to customise the style. Customisation are done by changing the css variables in the :root element.

There are two main categories: widget-scoped and global-scoped variables. While the widget-scoped ones are used to customise a specific part of a widget, the global-scoped ones are used to customise any single element and work across all widgets.

Floating Widget - Colors

:root {
    --fw-modal-background-colour: var(--color-neutral-1);
}

Global - Colors

Global colors are defined using variables such as --color-primary-1, --color-primary-2, and others. These variables can be easily overridden to match the specific theme of a website, ensuring flexibility and adaptability while maintaining consistency across the design system.

This version emphasizes both the flexibility and the purpose of using global color variables.

•           --color-primary-1
•           --color-primary-2
•           --color-primary-3
•           --color-primary-4
•           --color-primary-5
•           --color-info-1
•           --color-info-2
•           --color-success-1
•           --color-success-2
•           --color-warning-1
•           --color-warning-2
•           --color-critical-1
•           --color-critical-2
•           --color-critical-3
•           --color-neutral-1
•           --color-neutral-2
•           --color-neutral-3
•           --color-neutral-4
•           --color-neutral-5
•           --color-neutral-6
•           --color-neutral-7
•           --color-neutral-8
•           --color-neutral-9
•           --color-neutral-10

Global - Capacity tiers

Capacity tiers say how full an availability is. The appointment list and the calendar both paint them, so they read from one ramp rather than from success, warning and critical.

The ramp has three steps, and each step is split by the part of the cell it colours:

Token	Colours
--color-tier-N-band	The strip along the bottom of the slot card
--color-tier-N-icon	The person icon beside the count
--color-tier-N-text	The remaining-places count itself

N is 1 for plenty of room, 2 for limited and 3 for almost full. Sold out is not a tier and keeps --color-neutral-4.

These come from coppi and are signal colours: unlike the global colors above they are not meant to be overridden, because recolouring them recolours the signal.

Suggestion

Color State Variables

Define Brand Color Variable: First create a variable for your brand colour --color-primary-3

Based on the brand color, create the following state variables by adjusting the hue, saturation, or lightness as outlined below:

--primary-1: A lighter shade of the brand color. Increase the lightness to above 90% for optimal contrast.

--primary-2: A slightly lighter shade than the brand color. Increase the lightness by 15% to 25%.

--primary-4: A slightly darker shade than the brand color. Decrease the lightness by 10%.

--primary-5: A darker shade of the brand color. Reduce the lightness by 15% to 25%.

Additional Guidelines:

Accessibility: Ensure all colors meet sufficient contrast standards to enhance readability, especially for users with visual impairments.

Design System: Centralize these color variables within your design system to maintain consistency across the project. By following these guidelines and using this approach, you can achieve a cohesive, accessible, and visually appealing color palette for your components.

Global - Radius

:root {
    /* radius related */
    --radius-sharp: 0;
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 12px;
    --radius-4: 16px;
    --radius-5: 24px;
    --radius-6: 32px;
    --radius-circle: 100%;
}

Colors configuration example

To customize a widget, specify the desired variables under the :root selector and include them within the style tag. These variable supports any hexadecimal colors

<style>
:root {
  --color-primary-1: #990000;
  --color-primary-2: #990000;
  --color-primary-3: #990000;
  --color-primary-4: #990000;
  --color-primary-5: #990000;


  --color-success-1: #009900;
  --color-success-2: #009900;

  --color-warning-1: #ffbf00;
  --color-warning-2: #cc9900;

  --color-critical-1: #ff0000;
  --color-critical-2: #cc0000;
  --color-critical-3: #cc0000;

  --color-neutral-1: #f2f2f2;
  --color-neutral-2: #dedcdc;
  --color-neutral-3: #c9c7c7;
  --color-neutral-4: #b0aeae;
  --color-neutral-5: #999797;
  --color-neutral-5-transparency-20: #7d7d7d;
  --color-neutral-6: #666666;
  --color-neutral-7: #595959;
  --color-neutral-8: #403f3f;
  --color-neutral-9: #2e2e2e;
  --color-neutral-10: #1a1919;
  --color-neutral-10-transparency-50: #1a1919;

  --radius-sharp: 0;
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
}

</style>

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

Color Variables

Color variables can be defined using various formats, including RGBA, HSL, or hexadecimal values. This flexibility allows you to adapt the color system based on your design needs while maintaining consistency across the project.