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.

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.

Add the CSS variables

cssVariables returns declarations rather than a complete rule, 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.