Properties

This document establishes consistent naming conventions for properties across our design system.

visual styling properties

priority (primary, secondary, tertiary):

• Purpose: Defines the visual hierarchy and importance level of the numeric information

• Usage: Use "primary" for critical values, "secondary" for supporting information, "tertiary" for less important contextual data

• Context: Affects color saturation, contrast, and visual prominence within the interface

style (cta, grey, alert):

• Purpose: Controls the visual treatment and semantic meaning of the checkbox

• Usage: "cta" for primary or call-to-action contexts, "grey" for standard form inputs, "alert" for important confirmations or warnings

• Context: Should align with the importance and context of the selection being made

sub-style (eclipse, nebula, cosmic, error, warning, success):

• Purpose: Provides specific semantic styling variations for different contexts and states

• Usage: Apply based on the meaning or status of the displayed value (error for invalid ranges, success for completed actions, etc.)

• Context: Works in combination with the base style to create contextually appropriate visual treatments

size (base, sm):

• Purpose: Controls the overall dimensions and scale of the checkbox component

• Usage: "base" for standard form contexts, "sm" for compact layouts or secondary selections

• Context: Should match the visual hierarchy and density requirements of the surrounding interface

semantic:

• default: Standard pill appearance with subtle background and contrasting text

• inverse: Inverted color scheme with darker background and lighter text for enhanced visibility or emphasis

interaction related properties

status (default, hover, focus, active):

• Purpose: Manages the interactive state and visual feedback of the checkbox

• Usage: Automatically handled by user interactions, with each state providing appropriate visual feedback

• Context: Ensures users understand the current interaction state and component responsiveness

is-disabled (false, true):

• Purpose: Controls whether the component appears in an active or inactive state

• Usage: Set to "true" when the parent component is disabled or the value is not interactive

• Context: Applies reduced opacity and muted colors to indicate non-interactive state

is-selected (false, true):

• Purpose: Controls whether the checkbox appears checked or unchecked

• Usage: Set to "true" when the option is selected, "false" when unselected

• Context: Represents the current state of the user's selection and should sync with form data

is-expanded (true, false):

• Purpose: Controls the visibility state of the tooltip overlay

• Usage: Managed automatically by user interactions (hover, focus) or can be controlled programmatically

• Context: When "true", tooltip is visible; when "false", tooltip is hidden

• is-expanded:

  • true: Tooltip is visible with full opacity and proper positioning

  • false: Tooltip is hidden from view with no visual presence

layout properties

position (top-left, top-right, top-center, bottom-left, bottom-center, bottom-right):

• Purpose: Controls where the popover appears relative to its trigger element

• Usage: Choose position based on available screen space and content complexity to ensure popover remains fully visible

• Context: Automatically adjusts positioning if the chosen placement would cause content to extend beyond viewport boundaries

lockup (Select):

• Purpose: Specifies the logo's configuration, affecting its layout orientation

• Usage: Choose horizontal for wider spaces or a more traditional look, and vertical for compact or scrollable areas where vertical space is prioritized

• Options: horizontal, vertical

visibility properties

is-required (True, False):

• Purpose: Displays a visual indicator (typically an asterisk) to denote mandatory fields

• Usage: Set to "True" for fields that must be completed before form submission

• Context: Visual indicator only - developers must implement actual validation logic

has-tip (false, true):

• Purpose: Controls the visibility of an informational tooltip icon adjacent to the label

• Usage: Enable when users need additional context or explanation that doesn't belong in the main label text

• Context: Tooltip content should provide helpful supplementary information without duplicating the label

has-description (False, True):

• Purpose: Controls the visibility of helper text below the label

• Usage: Enable to provide additional context, formatting requirements, or helpful hints

• Context: Description text should supplement, not repeat, the label or placeholder content

has-logo (Boolean):

• Purpose: Indicates whether the component includes the logo mark/icon

• Usage: Always true if the logo mark is a part of the brand identity. False may only apply in special branding cases where only text is used

has-text (Boolean):

• Purpose: Determines whether the logo includes textual elements alongside the icon

• Usage: Enable this when the brand name should accompany the logo icon, important for brand recognition

component specific variant properties

type:

• upper: All uppercase styling for emphasis and section headers

• title: Standard title case for typical form labels

• sentence: Sentence case for conversational or descriptive contexts

component specific string properties

label (Label):

• Purpose: Defines the primary text content of the label

• Usage: Keep concise and descriptive, clearly indicating the expected input type or purpose

• Context: Should match the accessible name provided to the associated form control

description (This is important context.):

• Purpose: Sets the supplementary helper text content when has-description is enabled

• Usage: Provide formatting requirements, examples, or clarifying information

• Context: Should not be used for error messages - use validation patterns for error states