@gluonjs/core / packages/atoms/src / lightThemeTokenValues

Variable: lightThemeTokenValues

const lightThemeTokenValues: Readonly<{ --gluon-color-action: "#087f7b"; --gluon-color-action-soft: "#e6f4f1"; --gluon-color-action-soft-text: "#075e5b"; --gluon-color-action-text: "#ffffff"; --gluon-color-canvas: "#ffffff"; --gluon-color-danger: "#a52222"; --gluon-color-focus: "#173f91"; --gluon-color-info: "#173f91"; --gluon-color-muted: "#526663"; --gluon-color-rule: "#b8c9c6"; --gluon-color-success: "#17633a"; --gluon-color-surface: "#ffffff"; --gluon-color-surface-raised: "#ffffff"; --gluon-color-text: "#12312f"; --gluon-color-warning: "#6b4900"; }>

Example

Read the light theme token value map:

import { html, svg } from '@gluonjs/core';
import {
  AspectRatio,
  Avatar,
  FileInput,
  Badge,
  Button,
  Checkbox,
  DateInput,
  Heading,
  Image,
  Icon,
  Input,
  Label,
  Link,
  Meter,
  NumberInput,
  Progress,
  Radio,
  Skeleton,
  ScrollArea,
  Select,
  Slider,
  Spinner,
  Separator,
  StatusBadge,
  Switch,
  Text,
  Textarea,
  ToggleButton,
  TimeInput,
  accessibilityStyles,
  atomManifest,
  atomStyles,
  aspectRatioStyles,
  avatarStyles,
  darkThemeStyles,
  defineButtonPreset,
  defineToggleButtonPreset,
  defineIcon,
  getThemeStyles,
  getThemeTokenValues,
  installUi,
  installUiTheme,
  darkThemeTokenValues,
  foundationStyles,
  fileInputStyles,
  focusRingAttributes,
  focusRingClass,
  normalizeSliderRange,
  normalizeSliderValue,
  renderSlider,
  lightThemeStyles,
  lightThemeTokenValues,
  scrollAreaStyles,
  separatorStyles,
  uiTokenStyles,
  tokenDeclarations,
  uiTokenDefaults,
  type AspectRatioAttributes,
  type AspectRatioProps,
  type AvatarAttributes,
  type AvatarProps,
  type AvatarStatus,
  type BadgeProps,
  type BadgeTone,
  type ButtonProps,
  type ButtonAttributes,
  type ButtonPresetOptions,
  type ButtonSize,
  type ButtonVariant,
  type CheckboxAttributes,
  type CheckboxProps,
  type DateInputProps,
  type FileInputAttributes,
  type FileInputCapture,
  type FileInputProps,
  type HeadingAttributes,
  type HeadingLevel,
  type HeadingProps,
  type ImageProps,
  type IconName,
  type IconAttributes,
  type IconDefinition,
  type IconProps,
  type InputProps,
  type LabelProps,
  type LinkProps,
  type MeterProps,
  type NumberInputProps,
  type NormalizedSliderRange,
  type ProgressAttributes,
  type ProgressProps,
  type RadioAttributes,
  type RadioProps,
  type ScrollAreaAttributes,
  type ScrollAreaOrientation,
  type ScrollAreaProps,
  type SelectAttributes,
  type SelectProps,
  type SelectSize,
  type SliderAttributes,
  type SliderOrientation,
  type SliderProps,
  type SkeletonProps,
  type SeparatorAttributes,
  type SeparatorOrientation,
  type SeparatorProps,
  type StatusBadgeAttributes,
  type StatusBadgeProps,
  type StatusBadgeTone,
  type SpinnerProps,
  type SwitchAttributes,
  type SwitchProps,
  type TextProps,
  type TextTone,
  type TextareaAttributes,
  type TextareaProps,
  type ToggleButtonAttributes,
  type ToggleButtonPresetOptions,
  type ToggleButtonProps,
  type TimeInputProps,
  type UiTenantOptions,
  type UiTokenName,
  type UiTokenOverrides,
  type UiTokenValue,
  type UiOwner,
  type UiThemeName,
  visuallyHiddenAttributes,
  visuallyHiddenClass,
} from '@gluonjs/atoms';

const theme: UiThemeName = 'light';
const ui: UiOwner = installUi(document, { theme });
const removeLegacyTheme = installUiTheme(document, theme);
const variant: ButtonVariant = 'primary';
const size: ButtonSize = 'large';
const aspectRatioAttributes = { class: 'goods-media' } satisfies AspectRatioAttributes;
const aspectRatio = { ratio: 4 / 3, attributes: aspectRatioAttributes, children: html`<img src="/product.webp" alt="Orbit lamp">` } satisfies AspectRatioProps;
const avatarStatus: AvatarStatus = 'loaded';
const avatarAttributes = { loading: 'lazy', decoding: 'async' } satisfies AvatarAttributes;
const avatar = { src: '/ada.webp', alt: 'Ada Lovelace', fallback: 'AL', status: avatarStatus, attributes: avatarAttributes } satisfies AvatarProps;
const fileInputAttributes = { id: 'product-photos', aria: { describedby: 'product-photos-help' } } satisfies FileInputAttributes;
const fileInputCapture: FileInputCapture = 'environment';
const fileInput = { accept: 'image/*', capture: fileInputCapture, multiple: true, name: 'product-photos', required: true, attributes: fileInputAttributes } satisfies FileInputProps;
const skipToContent = visuallyHiddenAttributes<HTMLAnchorElement>({ href: '#main' });
const filterButton = focusRingAttributes<HTMLButtonElement>({ type: 'button', aria: { label: 'Open filters' } });
const heading = { level: 2, children: 'Foundation' } satisfies HeadingProps;
const text = { tone: 'muted', children: 'Token-backed text' } satisfies TextProps;
const link = { href: '/shop', children: 'Shop' } satisfies LinkProps;
const image = { src: '/catalog-preview.webp', alt: 'Catalog preview', width: 96, height: 64 } satisfies ImageProps;
const badge = { tone: 'success', children: 'Ready' } satisfies BadgeProps;
const spinner = { label: 'Loading' } satisfies SpinnerProps;
const skeleton = { width: '6rem', height: '1rem' } satisfies SkeletonProps;
const meter = { value: 3, max: 4, children: 'Three of four' } satisfies MeterProps;
const numberInput = { name: 'quantity', value: '1' } satisfies NumberInputProps;
const dateInput = { name: 'delivery-date', value: '2026-10-02' } satisfies DateInputProps;
const timeInput = { name: 'delivery-time', value: '09:00' } satisfies TimeInputProps;
const scrollOrientation: ScrollAreaOrientation = 'both';
const scrollAttributes = { tabIndex: 0, style: { '--gluon-scroll-area-max-block-size': '10rem' } } satisfies ScrollAreaAttributes;
const scrollArea = { label: 'Order history', orientation: scrollOrientation, attributes: scrollAttributes, children: 'Order rows' } satisfies ScrollAreaProps;
const separatorOrientation: SeparatorOrientation = 'vertical';
const separatorAttributes = { title: 'Sections' } satisfies SeparatorAttributes;
const separator = { orientation: separatorOrientation, attributes: separatorAttributes } satisfies SeparatorProps;
const buttonAttributes = { class: 'goods-purchase', data: { analyticsAction: 'purchase' } } satisfies ButtonAttributes;
const presetOptions = { displayName: 'PurchaseButton', class: 'goods-purchase', attributes: buttonAttributes } satisfies ButtonPresetOptions;
const PurchaseButton = defineButtonPreset(presetOptions);
const button = {
  label: 'Add to bag',
  variant,
  size,
  disabled: false,
  onClick: (event: MouseEvent) => console.log('added', event.currentTarget),
} satisfies ButtonProps;
const iconName: IconName = 'spark';
const iconDefinition = defineIcon({ name: 'goods-bag', viewBox: '0 0 24 24', body: svg`<path d="M6 8h12l1 13H5z"></path>` }) satisfies IconDefinition<'goods-bag'>;
const iconAttributes = { data: { iconOwner: 'app' } } satisfies IconAttributes;
const icon = { name: iconName, label: 'New arrival' } satisfies IconProps;
const input = { name: 'email', type: 'email', placeholder: 'you@example.com' } satisfies InputProps;
const label = { children: 'Email address' } satisfies LabelProps;
const selectSize: SelectSize = 'medium';
const selectAttributes = { id: 'delivery-window' } satisfies SelectAttributes;
const select = { value: 'morning', name: 'window', size: selectSize, required: true, attributes: selectAttributes, children: html`<option value="morning">Morning</option><option value="afternoon">Afternoon</option>` } satisfies SelectProps;
const textareaAttributes = { id: 'delivery-notes' } satisfies TextareaAttributes;
const textarea = { value: 'Leave with reception', name: 'notes', rows: 3, fullWidth: true, attributes: textareaAttributes } satisfies TextareaProps;
const checkboxAttributes = { id: 'terms' } satisfies CheckboxAttributes;
const checkbox = { name: 'terms', value: 'accepted', required: true, attributes: checkboxAttributes } satisfies CheckboxProps;
const radioAttributes = { id: 'finish-cobalt' } satisfies RadioAttributes;
const radio = { checked: true, name: 'finish', value: 'cobalt', attributes: radioAttributes } satisfies RadioProps;
const progressAttributes = { 'aria-label': 'Order progress' } satisfies ProgressAttributes;
const progress = { value: 2, max: 4, fullWidth: true, attributes: progressAttributes } satisfies ProgressProps;
const sliderOrientation: SliderOrientation = 'horizontal';
const sliderRange: NormalizedSliderRange = normalizeSliderRange(1.5, 2.5, 1);
const sliderAttributes = { id: 'cable-length', name: 'cable', 'aria-label': 'Cable length' } satisfies SliderAttributes;
const slider = { defaultValue: normalizeSliderValue(1.5, sliderRange), ...sliderRange, orientation: sliderOrientation, valueText: '1.5 metres', attributes: sliderAttributes } satisfies SliderProps;
const sliderTemplate = renderSlider(slider);
const statusTone: StatusBadgeTone = 'success';
const statusAttributes = { title: 'Current order state' } satisfies StatusBadgeAttributes;
const status = { tone: statusTone, children: 'Ready', attributes: statusAttributes } satisfies StatusBadgeProps;
const switchAttributes = { id: 'network' } satisfies SwitchAttributes;
const switchControl = { checked: true, name: 'network', value: 'enabled', attributes: switchAttributes } satisfies SwitchProps;
const toggleAttributes = { id: 'grid-view' } satisfies ToggleButtonAttributes;
const togglePreset = { displayName: 'ViewToggle', variant: 'ghost' } satisfies ToggleButtonPresetOptions;
const toggle = { pressed: true, label: 'Grid view', attributes: toggleAttributes } satisfies ToggleButtonProps;
const ViewToggle = defineToggleButtonPreset(togglePreset);
const checkout = html`${AspectRatio(aspectRatio)}${Avatar(avatar)}${FileInput(fileInput)}${Heading(heading)}${Text(text)}${Link(link)}${Image(image)}${Badge(badge)}${Spinner(spinner)}${Skeleton(skeleton)}${Meter(meter)}${NumberInput(numberInput)}${DateInput(dateInput)}${TimeInput(timeInput)}${Label(label)}${Input(input)}${ScrollArea(scrollArea)}${Separator(separator)}${Select(select)}${Textarea(textarea)}${Checkbox(checkbox)}${Progress(progress)}${Radio(radio)}${Slider(slider)}${sliderTemplate}${StatusBadge(status)}${Switch(switchControl)}${ToggleButton(toggle)}${ViewToggle(toggle)}${Button(button)}${PurchaseButton({ label: 'Purchase' })}${Icon(icon)}${Icon({ icon: iconDefinition, attributes: iconAttributes })}`;
console.log(checkout, skipToContent, filterButton, sliderRange, getThemeStyles(theme), atomStyles, accessibilityStyles, aspectRatioStyles, avatarStyles, fileInputStyles, focusRingClass, visuallyHiddenClass, scrollAreaStyles, separatorStyles, uiTokenStyles, lightThemeStyles, darkThemeStyles, atomManifest.entries);
ui.setTheme('dark');
ui.dispose();
removeLegacyTheme();