Oracle JET Theme CLI (@oracle/ojet-theme-cli)

A CLI tool for generating CSS variables via vanilla-extract from type-safe token files for Oracle JET Core Pack.

Features

• Token-driven, type-safe color palettes for light and dark schemes
• Generates CSS variables with stable names

Requirements

• Node >= 18

Quick start

Install

• Global install (recommended):

  npm i -g @oracle/ojet-theme-cli
  # or
  yarn global add @oracle/ojet-theme-cli

Usage

1. Initialize a token file (from any directory)

• Full template (commented examples) or blank template
• Use --force to overwrite an existing file

# Full template (default)
ojet-theme-cli init -o tokens.ts
# Explicitly choose full template
ojet-theme-cli init --full -o tokens.ts
# Blank template
ojet-theme-cli init --blank -o tokens.ts
# Overwrite if file exists
ojet-theme-cli init -o src/theme/tokens.ts --force

2. Edit your token file

• After running init, be sure to open tokens.ts and fill in some values for your theme tokens. Your token file must export a tokens object of type ThemeTokens.
• Example (partial):

// tokens.ts
export const tokens: ThemeTokens = {
  palette: {
    light: {
      brand: {
        '100': '34,126,158',
        '110': '14,114,149'
      }
    },
    dark: {
      neutral: {
        '0': '0,0,0',
        '200': '255,255,255'
      }
    }
  }
};

3. Generate CSS from tokens (from any directory after install)

• If the file is empty or contains only comments, the generate step will fail.

ojet-theme-cli generate -i tokens.ts -o theme.css
# with custom paths
ojet-theme-cli generate -i src/theme/tokens.ts -o public/theme.css

What gets generated

• Variables are created with a stable prefix ("oj-c-") and path-based names
• Selectors:
  • Light: :root, .oj-c-colorscheme-light
  • Dark: .oj-color-invert, .oj-c-colorscheme-dark
• This will produce an override CSS file to be used alongside the base theme CSS file. Due to CSS specificity, your declarations must be loaded after the JET declarations for them to take effect.

Notes on dependencies

• You can run ojet-theme-cli from any directory (global usage supported).
• To get TypeScript typings while editing your token file, you'll need to locally install @oracle/ojet-theme-cli within your project. The CLI can still compile regardless.