Jacco Meijer

React component themes and CSS variables

Creating React components with flexible themes by using CSS variables.

Typescript component interface

This is an addition to the post below and describes a way to add a 'colors' attrinute to the component interface which allows for switching themes by using CSS variables.

Orange oil

Typescript interface for React UI components

How to define an interface for React UI components that prevents breaking changes.

Color attribute

The interface as described in the blog post above is extended with a colors attribute.

colors?: Partial<Record<'monochrome' | 'primary' | 'secondary', string>>Copied

The attribute expects an object. For example:

{ monochrome: 'rock', primary: 'berry', secondary: 'apple', }Copied

The component

The component is setup to use CSS variables. Which CSS variables the component uses depends on the colors object passed to the component.

This way the same component can be used with different styling. For example:

const displayStyle = { color: `var(--color-${color.monochrome}-400)`, '&:hover': { color: `var(--color-${color.primary}-400)`, }, fontFamily: 'var(--display-font-family)', fontSize: 'var(--display-font-size-m)', fontWeight: 'var(--display-font-weight)', lineHeight: 'var(--display-line-height-m)', }Copied

CSS variables

The last step is defining the CSS variables. For example:

Fonts

--display-font-family: Exo, “Helvetica Neue”, sans-serif; --display-font-weight: 700; --display-font-size-l: 54px; --display-font-size-m: 40px; --display-line-height-l: 1.3; --display-line-height-m: 1.2;Copied

Colors

--color-berry-100: #715aff; --color-berry-200: #3615ff; --color-berry-300: #1d00cf; --color-berry-400: #13008a; --color-berry-500: #0a0045; --color-berry-600: #0a0045;Copied

@modelberry/css-theme

There are many ways to define the required CSS variables for a site. For Javascript, the modelberry/css-theme package is a convenient way.

This works by defining a theme object that contains all the styling for a site.

const myTheme: Theme = { color: { rock: { 100: '#e0e0e0', 200: '#b0b0b0', 300: '#909090', }, ... }, }Copied

The modelberry/css-theme package converts a theme object to CSS variables.

@modelberry/css-theme

Library for working with css theme variables.


NPM7 and @npmcli/arborist

@npmcli/arborist is a powerful library that handles the new npm 7 workspaces. This blog is about a simple make tool that uses the library.

Comparing React app, Nextjs and Gatsby

A new React project starts with a React toolchain. Main tools in the chains are SSR, React server components and GraphQL.

Versioning strategy for npm modules

It is important to be able to bump the version of a npm package without side effects.

React component themes and CSS variables

Creating React components with flexible themes by using CSS variables.

Content modeling with variants

The efficiency of a variant field in a content model.

Green oil

Documentation

Documenting a software project is challenging. Here's a few simple guidelines that help a team writing clear documentation.

Orange yellow oil

On Javascript transpilers, bundlers and modules

There's Javascript transpilers, modules, bundles and bundlers. This is a brief overview of all of these.

Dark orange bubbles

Javascript history

In 1986 David Ungar and Randall B. Smith developed Self at Xerox PARC. Inspired by Java, Scheme and Self Brendan Eich created Javascript in 1995.

Blue waves

Agile Scrum

The Agile Scrum framework is flexible enough to be used in many different ways. Here's one way of working.

Blue water bubbles

Contentful, Netlify and Gatsby four years later

What did we learn from using Contentful for four years?

Wheelroom hero image

What happened to Wheelroom?

Founded in 2018. Started to fly in 2020 and abandoned in 2021. What happened?

Orange oil

Typescript interface for React UI components

How to define an interface for React UI components that prevents breaking changes.

Orange green oil

Naming React components

What's in a name? A clear naming strategy helps developers communicate. Most devs rather spend time writing component code than wasting time on a good component name.