Design Tokens

@glucoseiq/tokens gives every GlucoseIQ surface the same semantic glucose zones and visual language. It has no runtime dependencies and does not require React, a CSS framework, or a browser.

npm install @glucoseiq/tokens

Classify a glucose value

Pass a value in mg/dL to classifyGlucoseZone:

import { classifyGlucoseZone, zoneColor } from '@glucoseiq/tokens'

const zone = classifyGlucoseZone(186) // 'high'
const color = zoneColor(zone, 'dark') // '#fbbf24'

The five zones follow the international consensus boundaries:

The ordered GLUCOSE_ZONES array and ZONE_THRESHOLDS_MGDL object are exported when you need to build legends, scales, or controls from the same model.

The classifier throws a RangeError when the value is non-positive or not finite.

Build a themed legend

ZONE_PALETTE contains a color for every zone in both supported themes. Position or text should carry the meaning alongside color.

import {
  GLUCOSE_ZONES,
  ZONE_PALETTE,
  type Theme,
} from '@glucoseiq/tokens'

function glucoseLegend(theme: Theme) {
  return GLUCOSE_ZONES.map((zone) => ({
    zone,
    color: ZONE_PALETTE[theme][zone],
  }))
}

Use zoneColor(zone, theme) when you only need one value. The theme defaults to dark.

These palettes are application-interface primitives; they are not injected into the SVG renderers in @glucoseiq/core/render. The Time-in-Range renderer uses the dark zone palette for stable fills in both surface themes, while its theme option changes only the SVG background and text.

Add the CSS variables

cssVariables returns declarations without a selector, so you choose where the theme lives:

import { cssVariables } from '@glucoseiq/tokens'

const style = `:root { ${cssVariables('dark')} }`

The generated declarations include:

--giq-zone-verylow: #b91c1c;
--giq-zone-low: #f87171;
--giq-zone-inrange: #22c55e;
--giq-zone-high: #fbbf24;
--giq-zone-veryhigh: #f97316;
--giq-bg: #0a0a0a;
--giq-drop: #ef4444;
--giq-surface: #111318;
--giq-border: #1e232c;
--giq-muted: #94a3b8;

Scope them to a component or a [data-theme] selector instead of :root when an application needs multiple themes at once.

Render a trend glyph

TREND_GLYPHS covers the eight normalized trend states used by @glucoseiq/core connectors and live analysis:

import { TREND_GLYPHS, type TrendKey } from '@glucoseiq/tokens'

function trendLabel(trend: TrendKey) {
  return `${TREND_GLYPHS[trend]} ${trend}`
}

trendLabel('slightlyRising') // '↗ slightlyRising'

The exported BRAND object supplies the GlucoseIQ canvas, accent, surface, border, and muted-text colors for surfaces that want the default brand theme.