@bloomreach/banana-theme

Bloomreach Banana Theme

About

The Bloomreach Banana Theme is a design system that is used to create a consistent look and feel across all Bloomreach products. It is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

This project is currently in development. The goal is to start small and build up the system over time. The first step is to create a set of design tokens that are exported to different platforms, starting with CSS variables.

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

npm install @bloomreach/banana-theme

Usage

After installing the package, you can import the CSS variables into your project.

@import '@bloomreach/banana-theme/css/variables.css';

You can then use the variables in your CSS.

button {
  background-color: var(--banana-button-primary-background-default);
}

CSS Variables Naming Scheme

The naming scheme for the CSS variables is based on the following pattern:

[element] [.variant] [.property] [.state]

e.g.:

--banana-button-primary-background-disabled
--banana-table-row-border-default

To use the Banana theme font(s) you can import the font rules in your project's CSS.

@import '@bloomreach/banana-theme/css/fonts.css';

Or in your project's JavaScript/TypeScript.

import '@bloomreach/banana-theme/css/fonts.css';

Or in your project's HTML.

<link rel="stylesheet" href="~@bloomreach/banana-theme/css/fonts.css">

Note: this will only work if you are using a bundler that supports importing CSS from node_modules. Alternatively, you can use a CDN like unpkg.com, e.g.:

<link rel="stylesheet" href="https://unpkg.com/@bloomreach/banana-theme@0.0.2/dist/css/fonts.css">

Development

The design tokens are defined in the tokens directory. The build.js file defines the build process. The dist directory is where the built files are output.

Build

Build the design tokens and output them to the dist directory. It will generate the following files:

• dist/css/variables.css
• dist/css/fonts.css
• dist/assets/fonts/*.woff
• dist/assets/fonts/*.woff2

Ensure the dependencies are installed with npm ci before running the build command.

npm run build

Clean

Delete the dist directory.

Note: the build command will automatically clean the files in the dist directory before building, but only the files that are generated by the current build process. If you want to clean the entire dist directory, including files that were generated by previous builds, you can run the clean command.

npm run clean

Release

The release process is split into two steps: bumping the version and publishing the package. The version should be bumped by the developer, the package is then published by the CI/CD pipeline.

To bump the version, we use the npm version command. This will update the version in the package.json file, the package-lock.json file, and create a git tag.

Use the following command to bump the version:

npm version patch -m "<BAN-1> Release v%s"

Note: the patch argument can be replaced with minor or major depending on the type of release. Note2: the -m argument is required to alter the commit message and specify a valid Jira ticket number. Note3: The %s will be replaced with the version number.

After bumping the version, push the changes to the remote repository. This will trigger the CI/CD pipeline to publish the package to the npm registry.