liveBook · Manning

Design language

As explained in Web Components in Action

A shared set of visual and interaction conventions that gives related interface components a consistent appearance and behavior.

A design language gives related components consistent colors, spacing, typography, borders, and behavior without forcing every component to share one stylesheet. CSS variables provide shared tokens, while JavaScript imports package more complex rules. section 11.4

Build consistency incrementally:

  • Define root-level CSS variables for text sizes, colors, borders, radii, and padding. section 11.4
  • Replace hard-coded values in slider, coordinate picker, and color picker styles with those variables. section 11.4
  • Extract reusable text, base, input-field, and modal rules into importable JavaScript modules. section 11.4

A shared modal treatment

A modal module combines background color, border radius, and box shadow. A color picker can opt into the treatment with a modal class, while later changes to the variables or module update its appearance. section 11.4

Listing 11.15. CSS vars to use throughout a hypothetical app and our components
:root {
   --text-xsmall: .5em;                               #1
   --text-small: .7em;
   --text-medium: 1em;
   --text-large: 1.3em;
   --text-xlarge: 1.5em;

   --color-pureblack: black;                          #2
   --color-black: #2a2a2a;
   --color-lightblack: #4a4a4a;
   --color-darkgrey: #6a6a6a;
   --color-grey: #7a7a7a;
   --color-lightgrey: #9a9a9a;
   --color-darkwhite: #dadada;
   --color-white: #fafafa;
   --color-purewhite: #ffffff;

   --text-color: var(--color-lightblack);             #3
   --text-inverted-color: var(--color-white);
   --border-color: var(--color-lightblack);
   --border-color-light: var(--color-darkwhite);
   --border-inverted-color: var(--color-white);
   --background-color: var(--color-white);
   --background-inverted-color: var(--color-lightblack);

   --border-radius: 6px;                              #4
   --border-width-thick: 3px;
   --border-width: 1px;
   --padding-medium: 5px;
}

Browse the shared token definitions used throughout the hypothetical application and its components. section 11.4

How Web Components in Action covers it

How deep it goes
Builds tokens and reusable modules through component examples, stopping short of a full-scale design system.
Examples
Uses slider, coordinate picker, color picker, input fields, modal rules, and a color-picker modal.
What it assumes
Assumes component styling and JavaScript imports while teaching shared CSS variables and reusable rules incrementally.
What you can do after
Build it from scratch by defining CSS tokens, importing style modules, and applying shared rules to components.
How it connects
Connects CSS variables, Shadow DOM, JavaScript modules, web components, and reusable component styling.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.