@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-background-button-primary);
}

To use the Banana theme font(s), you can import the font(s) 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.:

https://unpkg.com/@bloomreach/banana-theme@0.0.0/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