Interactive Ink Canvas — CSS Variables Themes

CSS custom properties

Pass a Record<string, string> as cssVars in canvasOptions.configuration to override any --ms-ink-* token on the canvas root element.

Brand & semantic

--ms-ink-primary#1A9FFF

Primary action color — buttons, active borders, accents.

--ms-ink-secondary#9E9E9E

Secondary / muted color — ghost buttons, helper text.

--ms-ink-tertiary#d6d6d6

Tertiary / ghost color — lowest-emphasis text and elements.

--ms-ink-success#4CAF50

Success state — confirmation buttons, positive overlays.

--ms-ink-info#2196F3

Info state — informational buttons and indicators.

--ms-ink-warning#FFC107

Warning state — caution indicators and buttons.

--ms-ink-error#f44336

Error / danger state — destructive buttons and alerts.

Canvas canvas

--ms-ink-canvas-bgwhite

Writing surface background color.

--ms-ink-color#000000

Primary text and icon color inside the canvas.

--ms-ink-surface#F5F6F7

Card / panel surface background (loader, state indicator).

--ms-ink-section-bg#f5f5f5

Section / group background inside menus and modals.

--ms-ink-border-color#e0e0e0

Border color used throughout the canvas UI.

--ms-ink-text-muted#717171

Muted / helper text color.

--ms-ink-guide-color#c8c8c8

Guide grid line color drawn on the canvas background.

Menu / UI chrome

--ms-ink-menu-bg#ffffff

Background of all floating menus and toolbars.

--ms-ink-menu-title-bg#b3dfff

Background of menu section title rows.

--ms-ink-menu-hoverrgb(239,239,239)

Hover highlight background for menu items and buttons.

Inputs

--ms-ink-input-bg#ffffff

Input and select background color.

--ms-ink-input-color#131F26

Input text color.

--ms-ink-input-border#CED5D9

Input border color.

Spacing

--ms-ink-spacing-xs4px

Extra-small gap — tight icon spacing.

--ms-ink-spacing-sm8px

Small gap — default button padding, list gaps.

--ms-ink-spacing-md12px

Medium gap — card padding, section gaps.

--ms-ink-spacing-lg16px

Large gap — page padding, primary action spacing.

Border radius

--ms-ink-radius-sm4px

Small radius — buttons, inputs, chips.

--ms-ink-radius-md6px

Medium radius — cards, menus.

--ms-ink-radius-lg8px

Large radius — modals, panels.

--ms-ink-radius-full50%

Full pill / circle radius.

Modal

--ms-ink-modal-backdroprgba(0,0,0,0.3)

Modal overlay backdrop color.

--ms-ink-modal-bg→ --ms-ink-section-bg

Modal panel background.

--ms-ink-modal-radius→ --ms-ink-radius-lg

Modal corner radius.

--ms-ink-modal-shadow0 4px 12px rgba(0,0,0,0.15)

Modal box shadow.

--ms-ink-modal-widthauto

Modal width — set to a % or px value to constrain.

--ms-ink-modal-title-bg→ --ms-ink-menu-title-bg

Modal title bar background.

--ms-ink-modal-title-color→ --ms-ink-color

Modal title text color.

--ms-ink-modal-title-size18px

Modal title font size.

--ms-ink-modal-icon-btn-hover→ --ms-ink-menu-hover

Hover background for modal icon buttons (close, fullscreen).

--ms-ink-modal-content-bg→ --ms-ink-canvas-bg

Modal content area background.

--ms-ink-modal-content-color→ --ms-ink-color

Modal content text color.

--ms-ink-modal-padding20px

Modal content area inner padding.

--ms-ink-modal-primary→ --ms-ink-primary

Primary accent color inside the modal.

Theme: