circadian-css-variables

Convert @bravotango/circadian-tokens into dynamic CSS custom properties.

This package maps real-world weather tokens into CSS variables, enabling weather-aware and time-aware UI styling.

It is designed to sit on top of:

@bravotango/circadian-tokens

Installation

npm install @bravotango/circadian-css-variables

Peer Dependency

npm install @bravotango/circadian-tokens

What It Does

Transforms a CircadianTokens object into a flat map of CSS variables:

Record<string, string>;

Example variables generated

--circadian-current-condition-img
--circadian-current-condition-color
--circadian-current-condition-time-of-day-color
--circadian-current-condition-icon
--circadian-current-condition-wind-speed
--circadian-current-condition-wind-speed-text
--circadian-current-condition-wind-precipitation-degrees
--circadian-current-condition-wind-degrees

Usage

import { getCircadianTokens } from "@bravotango/circadian-tokens";
import { currentConditions } from "@bravotango/circadian-css-variables";

const tokens = await getCircadianTokens(
  { type: "coords", lat: 47.7623, lon: -122.2054 },
  process.env.OPENWEATHER_API_KEY!,
);

const cssVars = currentConditions(tokens);

// Apply to document root
Object.entries(cssVars).forEach(([key, value]) => {
  document.documentElement.style.setProperty(key, value);
});

Example Output

{
  "--circadian-current-condition-img": "url('/circadian-assets/weather/rain.png')",
  "--circadian-current-condition-color": "#5C6BC0",
  "--circadian-current-condition-wind-speed": "3.2s",
  "--circadian-current-condition-wind-degrees": "270deg"
}

Architecture

Layered system:

1. circadian-tokens → Normalizes live weather data
2. circadian-css-variables → Maps tokens to CSS variables
3. Your UI → React / Vue / Vanilla CSS consumes variables

This keeps:

• Data logic isolated
• Styling declarative
• UI reactive to environment

Why CSS Variables?

CSS custom properties allow:

• Real-time UI updates
• Animation based on wind speed
• Condition-based theming
• Zero framework lock-in

License

This material licensed under the "The MIT License".

Author

Brian Tracy
https://github.com/bravotango