{ "version": "1.8.0", "framework": "ply", "totalClasses": 457, "uniqueClasses": 457, "darkMode": "Auto dark mode uses :root:not([data-theme]) and prefers-color-scheme: dark. Setting any data-theme value on disables auto dark mode, so custom themes won't have dark styles applied over them.", "themeMinimum": { "description": "Override these variables for a minimum viable custom theme. All other variables are optional refinements.", "variables": [ "--ply-bg-body", "--ply-bg-surface", "--ply-bg-muted", "--ply-color-body", "--ply-color-headings", "--ply-color-secondary", "--ply-border-color", "--ply-border-radius", "--ply-btn-default-bg", "--ply-btn-secondary-bg", "--ply-color-accent", "--ply-btn-border-radius", "--ply-nav-bg", "--ply-nav-border" ] }, "themeRecommended": { "description": "Override these for a polished theme. Not strictly required but prevents default values from leaking through.", "variables": [ "--ply-bg-surface-alt", "--ply-color-muted", "--ply-color-placeholder", "--ply-color-text-inverse", "--ply-border-strong", "--ply-color-focus", "--ply-color-input-bg", "--ply-color-input-border", "--ply-color-error", "--ply-color-success", "--ply-color-code-bg", "--ply-color-code-border", "--ply-color-table-border", "--ply-color-table-striped", "--ply-nav-color", "--ply-nav-hover", "--ply-layer-0", "--ply-layer-1", "--ply-layer-2", "--ply-layer-3", "--ply-shadow-1", "--ply-shadow-2", "--ply-shadow-3", "--ply-btn-default-color", "--ply-btn-default-bg-hover", "--ply-btn-default-bg-active", "--ply-btn-secondary-color", "--ply-btn-secondary-bg-hover", "--ply-btn-secondary-bg-active", "--ply-color-link-hover", "--ply-color-accent", "--ply-border-radius", "--ply-btn-border-radius" ] }, "themeTemplate": { "description": "Copy-paste starting point for custom themes. Replace placeholder values with your design colors. Every ply component respects these variables.", "css": "[data-theme=\"my-theme\"] {\n /* Background */\n --ply-bg-body: #___;\n --ply-bg-surface: #___;\n --ply-bg-surface-alt: #___;\n --ply-bg-muted: #___;\n\n /* Text */\n --ply-color-body: #___;\n --ply-color-headings: #___;\n --ply-color-secondary: #___;\n --ply-color-muted: #___;\n --ply-color-placeholder: #___;\n --ply-color-text-inverse: #___;\n\n /* Borders */\n --ply-border-color: #___;\n --ply-border-strong: #___;\n --ply-border-radius: 0.25rem;\n\n /* Interactive */\n --ply-color-accent: #___;\n --ply-color-focus: #___;\n --ply-color-link-hover: #___;\n\n /* Buttons */\n --ply-btn-default-bg: #___;\n --ply-btn-default-color: #___;\n --ply-btn-default-bg-hover: #___;\n --ply-btn-default-bg-active: #___;\n --ply-btn-secondary-bg: #___;\n --ply-btn-secondary-color: #___;\n --ply-btn-secondary-bg-hover: #___;\n --ply-btn-secondary-bg-active: #___;\n --ply-btn-border-radius: 2rem;\n --ply-btn-font-size: 1em;\n --ply-btn-gap: 0.5em;\n\n /* Forms */\n --ply-color-input-bg: #___;\n --ply-color-input-border: #___;\n --ply-color-error: #___;\n --ply-color-success: #___;\n\n /* Navigation */\n --ply-nav-bg: #___;\n --ply-nav-color: #___;\n --ply-nav-border: #___;\n --ply-nav-hover: #___;\n\n /* Code */\n --ply-color-code-bg: #___;\n --ply-color-code-border: #___;\n\n /* Tables */\n --ply-color-table-border: #___;\n --ply-color-table-striped: #___;\n\n /* Elevation */\n --ply-layer-0: #___;\n --ply-layer-1: #___;\n --ply-layer-2: #___;\n --ply-layer-3: #___;\n --ply-shadow-1: rgba(0, 0, 0, 0.08);\n --ply-shadow-2: rgba(0, 0, 0, 0.1);\n --ply-shadow-3: rgba(0, 0, 0, 0.12);\n\n /* Typography (optional) */\n --ply-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n --ply-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n --ply-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\n /* Border radius scale */\n --ply-radius-sm: 0.25rem;\n --ply-radius-md: 0.5rem;\n --ply-radius-lg: 0.75rem;\n --ply-radius-full: 9999px;\n --ply-border-radius: var(--ply-radius-sm);\n --ply-btn-border-radius: var(--ply-radius-full);\n --ply-label-radius: var(--ply-radius-sm);\n --ply-badge-radius: var(--ply-radius-full);\n\n /* Control sizing (inputs, buttons, selects, textareas share these) */\n --ply-control-font: 1rem;\n --ply-control-py: 0.625rem;\n --ply-control-px: 1.5rem;\n --ply-control-lh: 1.5rem;\n\n /* Spacing */\n --ply-space: 1rem;\n\n /* Inverse / black */\n --ply-bg-inverse: var(--ply-color-body);\n --ply-color-black: #000000;\n}" }, "classes": { "units-container": { "category": "grid", "description": "Grid wrapper with max-width 1200px, auto-centered with padding.", "example": "
...
" }, "units-row": { "category": "grid", "description": "Flex row container for grid units. Uses flex-flow: row wrap.", "children": [ "unit-100", "unit-90", "unit-88", "unit-80", "unit-75", "unit-70", "unit-66", "unit-65", "unit-62", "unit-60", "unit-50", "unit-40", "unit-38", "unit-35", "unit-33", "unit-30", "unit-25", "unit-20", "unit-12", "unit-10", "unit-auto" ], "example": "
...
...
" }, "container-query": { "category": "grid", "description": "Enables CSS container queries on an element (container-type: inline-size). Wrap around a units-row to use container-scoped responsive classes instead of viewport-based ones.", "containerPrefixes": [ "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ], "example": "
Stacks when container is narrow
Stacks when container is narrow
" }, "unit-100": { "category": "grid", "description": "Grid unit — flex-basis: 100%. Collapses to 100% on tablet breakpoint.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ], "example": "
Full width
" }, "unit-90": { "category": "grid", "description": "Grid unit — flex-basis: 90%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-88": { "category": "grid", "description": "Grid unit — flex-basis: 87.5%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-80": { "category": "grid", "description": "Grid unit — flex-basis: 80%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-75": { "category": "grid", "description": "Grid unit — flex-basis: 75%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-70": { "category": "grid", "description": "Grid unit — flex-basis: 70%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-66": { "category": "grid", "description": "Grid unit — flex-basis: 66.6% (two-thirds).", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-65": { "category": "grid", "description": "Grid unit — flex-basis: 65%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-62": { "category": "grid", "description": "Grid unit — flex-basis: 62.5%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-60": { "category": "grid", "description": "Grid unit — flex-basis: 60%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-50": { "category": "grid", "description": "Grid unit — flex-basis: 50% (half).", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ], "example": "
Left
Right
" }, "unit-40": { "category": "grid", "description": "Grid unit — flex-basis: 40%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-38": { "category": "grid", "description": "Grid unit — flex-basis: 37.5%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-35": { "category": "grid", "description": "Grid unit — flex-basis: 35%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-33": { "category": "grid", "description": "Grid unit — flex-basis: 33.3% (one-third).", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ], "example": "
Col
Col
Col
" }, "unit-30": { "category": "grid", "description": "Grid unit — flex-basis: 30%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-25": { "category": "grid", "description": "Grid unit — flex-basis: 25% (one-quarter).", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-20": { "category": "grid", "description": "Grid unit — flex-basis: 20%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-12": { "category": "grid", "description": "Grid unit — flex-basis: 12.5%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-10": { "category": "grid", "description": "Grid unit — flex-basis: 10%.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "unit-auto": { "category": "grid", "description": "Grid unit — flex-grow: 1, fills remaining space.", "parent": "units-row", "responsive": [ "tablet-unit-*", "phone-unit-*", "large-phone-unit-*", "small-desktop-unit-*", "large-screen-unit-*", "x-large-screen-unit-*", "forever-unit-*", "container-phone-unit-*", "container-large-phone-unit-*", "container-tablet-unit-*", "container-small-desktop-unit-*" ] }, "reverse-direction": { "category": "grid", "description": "Reverse row direction (flex-direction: row-reverse). Applied to units-row.", "example": "
...
" }, "split": { "category": "grid", "description": "Remove gap between child units. Applied to units-row. Kept for backwards compatibility — prefer joined.", "example": "
...
" }, "centered-content": { "category": "grid", "description": "Center content within row (justify-content: center; text-align: center). Applied to units-row.", "example": "
...
" }, "stacked": { "category": "grid", "description": "Remove bottom margin from row. Applied to units-row.", "example": "
...
" }, "btn": { "category": "buttons", "description": "Base button class. Inline-block, centered text, secondary gray background (same as btn-secondary). All btn variants include :focus-visible outlines for keyboard accessibility and meet WCAG AA color contrast requirements in both light and dark modes. Use ", "note": "Produces the same styling as .btn-secondary by default" }, "btn-primary": { "category": "buttons", "description": "Primary action button. Blue by default, themed via --ply-btn-default-bg. Use for the main call-to-action. WCAG AA compliant (4.56:1 contrast). Hover/active states derived via color-mix().", "example": "" }, "btn-secondary": { "category": "buttons", "description": "Secondary action button. Dark gray by default, themed via --ply-btn-secondary-bg. Use for secondary actions alongside a primary button.", "example": "", "note": "Identical to .btn (both produce secondary styling by default)" }, "btn-primary-outline": { "category": "buttons", "description": "Outlined primary button. Border and text color from --ply-btn-default-bg, transparent background. Fills with primary color on hover.", "example": "" }, "btn-secondary-outline": { "category": "buttons", "description": "Outlined secondary button. Border and text color from --ply-btn-secondary-bg, transparent background. Fills with secondary color on hover.", "example": "" }, "btn-blue": { "category": "buttons", "description": "Static blue button. Hardcoded color, immune to theming. Use for color-coded actions that should not change with custom themes.", "example": "" }, "btn-red": { "category": "buttons", "description": "Static red button. Hardcoded color, immune to theming. Use for destructive actions.", "example": "" }, "btn-green": { "category": "buttons", "description": "Static green button. Hardcoded color, immune to theming. Use for success/confirmation actions.", "example": "" }, "btn-black": { "category": "buttons", "description": "Black color variant button.", "example": "" }, "btn-yellow": { "category": "buttons", "description": "Static yellow button. Hardcoded color, immune to theming. Dark text for contrast.", "example": "" }, "btn-white": { "category": "buttons", "description": "White color variant button.", "example": "" }, "btn-outline": { "category": "buttons", "description": "Outlined button variant. Transparent background with border.", "example": "" }, "btn-active": { "category": "buttons", "description": "Active/pressed state. Muted background with inset shadow.", "example": "" }, "btn-disabled": { "category": "buttons", "description": "Disabled state. Muted colors, default cursor.", "example": "" }, "btn-square": { "category": "buttons", "description": "Alias for btn-straight. Remove border-radius from button.", "example": "" }, "btn-group": { "category": "buttons", "description": "Button group container. Flex row that joins buttons together.", "children": [ "btn" ], "example": "
" }, "form": { "category": "forms", "description": "Form wrapper class. Enables styled inputs with full width, border-radius, and consistent padding.", "example": "
" }, "form-inline": { "category": "forms", "description": "Inline form layout. Labels and inputs display inline-block.", "example": "" }, "form-inline-list": { "category": "forms", "description": "Inline form list layout with spacing between items.", "example": "" }, "form-list": { "category": "forms", "description": "List-style form layout with vertical spacing between items.", "example": "" }, "form-desc": { "category": "forms", "description": "Form description/help text. Small, muted color.", "example": "Enter your full name" }, "input-error": { "category": "forms", "description": "Error state for inputs. Red border with red box-shadow.", "example": "" }, "input-success": { "category": "forms", "description": "Success state for inputs. Green border with green box-shadow.", "example": "" }, "input-gray": { "category": "forms", "description": "Gray/neutral state for inputs. Gray border with gray box-shadow.", "example": "" }, "input-search": { "category": "forms", "description": "Rounded search input with pill-shaped border-radius.", "example": "" }, "input-on-black": { "category": "forms", "description": "Input styled for dark backgrounds. Semi-transparent white background.", "example": "" }, "input-groups": { "category": "forms", "description": "Input group container. Flex layout for prepend/append addons.", "children": [ "input-prepend", "input-append", "btn-append" ], "example": "
$
" }, "input-prepend": { "category": "forms", "description": "Prepended addon for input groups. Displays before the input.", "parent": "input-groups" }, "input-append": { "category": "forms", "description": "Appended addon for input groups. Displays after the input.", "parent": "input-groups" }, "btn-append": { "category": "forms", "description": "Button appended to an input group.", "parent": "input-groups", "example": "
" }, "select-outlined": { "category": "forms", "description": "Outlined select variant. Transparent background with visible border.", "example": "" }, "navbar": { "category": "navigation", "description": "Horizontal navigation bar with bottom border. Contains ul > li > a structure.", "example": "" }, "navbar-centered": { "category": "navigation", "description": "Center-align navbar items (justify-content: center).", "parent": "navbar", "example": "" }, "navbar-left": { "category": "navigation", "description": "Left-align navbar items (justify-content: flex-start).", "parent": "navbar" }, "navbar-right": { "category": "navigation", "description": "Right-align navbar items (justify-content: flex-end).", "parent": "navbar" }, "navbar-vertical": { "category": "navigation", "description": "Vertical navbar layout with left border instead of bottom border.", "parent": "navbar", "example": "" }, "navbar-thick": { "category": "navigation", "description": "Bold 2px bottom border on navbar.", "parent": "navbar", "example": "" }, "navbar-borderless": { "category": "navigation", "description": "No border on navbar. Active items use background highlight instead.", "parent": "navbar", "example": "" }, "navbar-border-blue": { "category": "navigation", "description": "Blue bottom border on navbar.", "parent": "navbar" }, "navbar-border-green": { "category": "navigation", "description": "Green bottom border on navbar.", "parent": "navbar" }, "navbar-border-red": { "category": "navigation", "description": "Red bottom border on navbar.", "parent": "navbar" }, "navbar-border-yellow": { "category": "navigation", "description": "Yellow bottom border on navbar.", "parent": "navbar" }, "navbar-stack": { "category": "navigation", "description": "On mobile, wrap navbar items instead of horizontal scrolling.", "parent": "navbar" }, "navbar-pills": { "category": "navigation", "description": "Pill-style navigation. Horizontal flex layout with hover backgrounds.", "example": "" }, "nav-stacked": { "category": "navigation", "description": "Vertical stacked navigation. Clean default with blue accent on active state. Use with nav-stacked-blocked for filled row style.", "example": "" }, "nav-stacked-blocked": { "category": "navigation", "description": "Modifier for nav-stacked. Adds background fills and bottom borders to each row.", "example": "" }, "nav-tabs": { "category": "navigation", "description": "Tab navigation with bottom border. Active tab has border-bottom highlight.", "example": "
" }, "nav-stats": { "category": "navigation", "description": "Navigation with stats/badges. Positions badges absolutely to the right.", "example": "" }, "breadcrumbs": { "category": "navigation", "description": "Breadcrumb navigation with slash separators between items.", "example": "
" }, "breadcrumbs-path": { "category": "navigation", "description": "Breadcrumb path-style variant. Modifier on breadcrumbs with spaced slashes.", "parent": "breadcrumbs" }, "pagination": { "category": "navigation", "description": "Pagination controls. Floated list items with hover and active states.", "example": "" }, "active": { "category": "navigation", "description": "Active state for navigation items. Applied to li elements within navs.", "example": "
  • Current Page
    • " }, "navigation-toggle": { "category": "navigation", "description": "Mobile menu toggle button with hamburger icon.", "example": "
    Menu
    " }, "navigation-fixed": { "category": "navigation", "description": "Fixed positioning for navigation. position: fixed; top: 0; left: 0; z-index: 101.", "example": "" }, "text-xs": { "category": "typography", "description": "Extra small font size utility." }, "text-sm": { "category": "typography", "description": "Small font size utility." }, "text-base": { "category": "typography", "description": "Base font size utility." }, "text-lg": { "category": "typography", "description": "Large font size utility." }, "text-xl": { "category": "typography", "description": "Extra large font size utility." }, "text-2xl": { "category": "typography", "description": "2x large font size utility." }, "text-3xl": { "category": "typography", "description": "3x large font size utility." }, "text-4xl": { "category": "typography", "description": "4x large font size utility." }, "text-5xl": { "category": "typography", "description": "5x large font size utility." }, "big": { "category": "typography", "description": "Legacy large font size class." }, "small": { "category": "typography", "description": "Legacy small font size class." }, "smaller": { "category": "typography", "description": "Legacy smaller font size class." }, "light": { "category": "typography", "description": "Light font weight (300).", "important": true }, "font-normal": { "category": "typography", "description": "Normal font weight utility." }, "font-medium": { "category": "typography", "description": "Medium font weight utility." }, "font-semibold": { "category": "typography", "description": "Semibold font weight utility." }, "font-bold": { "category": "typography", "description": "Bold font weight utility." }, "leading-tight": { "category": "typography", "description": "Tight line-height utility." }, "leading-snug": { "category": "typography", "description": "Snug line-height utility." }, "leading-normal": { "category": "typography", "description": "Normal line-height utility." }, "leading-relaxed": { "category": "typography", "description": "Relaxed line-height utility." }, "lead": { "category": "typography", "description": "Lead paragraph style. Larger font size with relaxed line-height.", "example": "

    This is a lead paragraph.

    " }, "bold": { "category": "typography", "description": "Bold text (font-weight: bold !important).", "important": true }, "italic": { "category": "typography", "description": "Italic text (font-style: italic)." }, "uppercase": { "category": "typography", "description": "Uppercase text (text-transform: uppercase)." }, "nowrap": { "category": "typography", "description": "Prevent text wrapping (white-space: nowrap)." }, "text-right": { "category": "typography", "description": "Right-aligned text." }, "text-left": { "category": "typography", "description": "Left-aligned text." }, "h1": { "category": "typography", "description": "Apply h1 heading styles to any element.", "example": "Large heading" }, "h2": { "category": "typography", "description": "Apply h2 heading styles to any element." }, "h3": { "category": "typography", "description": "Apply h3 heading styles to any element." }, "h4": { "category": "typography", "description": "Apply h4 heading styles to any element." }, "h5": { "category": "typography", "description": "Apply h5 heading styles to any element." }, "h6": { "category": "typography", "description": "Apply h6 heading styles to any element. Bold, uppercase." }, "fixed": { "category": "helpers", "description": "position: fixed." }, "absolute": { "category": "helpers", "description": "position: absolute." }, "relative": { "category": "helpers", "description": "position: relative." }, "static": { "category": "helpers", "description": "position: static." }, "sticky": { "category": "helpers", "description": "position: sticky." }, "display-flex": { "category": "helpers", "description": "display: flex." }, "display-block": { "category": "helpers", "description": "display: block." }, "display-inline-block": { "category": "helpers", "description": "display: inline-block." }, "display-grid": { "category": "helpers", "description": "display: grid." }, "display-none": { "category": "helpers", "description": "display: none." }, "items-center": { "category": "helpers", "description": "align-items: center. Use with display-flex." }, "items-start": { "category": "helpers", "description": "align-items: flex-start. Use with display-flex." }, "items-end": { "category": "helpers", "description": "align-items: flex-end. Use with display-flex." }, "items-stretch": { "category": "helpers", "description": "align-items: stretch. Use with display-flex." }, "items-baseline": { "category": "helpers", "description": "align-items: baseline. Use with display-flex." }, "justify-center": { "category": "helpers", "description": "justify-content: center. Use with display-flex." }, "justify-between": { "category": "helpers", "description": "justify-content: space-between. Use with display-flex." }, "justify-around": { "category": "helpers", "description": "justify-content: space-around. Use with display-flex." }, "margin": { "category": "helpers", "description": "Add default margin on all sides." }, "margin-xs": { "category": "helpers", "description": "Add extra-small margin on all sides (0.25rem)." }, "margin-sm": { "category": "helpers", "description": "Add small margin on all sides (0.5rem)." }, "margin-lg": { "category": "helpers", "description": "Add large margin on all sides (1.5rem)." }, "margin-xl": { "category": "helpers", "description": "Add extra-large margin on all sides (2rem)." }, "margin-top": { "category": "helpers", "description": "Add default margin-top." }, "margin-top-xs": { "category": "helpers", "description": "Add extra-small margin-top (0.25rem)." }, "margin-top-sm": { "category": "helpers", "description": "Add small margin-top (0.5rem)." }, "margin-top-lg": { "category": "helpers", "description": "Add large margin-top (1.5rem)." }, "margin-top-xl": { "category": "helpers", "description": "Add extra-large margin-top (2rem)." }, "margin-bottom": { "category": "helpers", "description": "Add default margin-bottom." }, "margin-bottom-xs": { "category": "helpers", "description": "Add extra-small margin-bottom (0.25rem)." }, "margin-bottom-sm": { "category": "helpers", "description": "Add small margin-bottom (0.5rem)." }, "margin-bottom-lg": { "category": "helpers", "description": "Add large margin-bottom (1.5rem)." }, "margin-bottom-xl": { "category": "helpers", "description": "Add extra-large margin-bottom (2rem)." }, "margin-left": { "category": "helpers", "description": "Add default margin-left." }, "margin-left-xs": { "category": "helpers", "description": "Add extra-small margin-left (0.25rem)." }, "margin-left-sm": { "category": "helpers", "description": "Add small margin-left (0.5rem)." }, "margin-left-lg": { "category": "helpers", "description": "Add large margin-left (1.5rem)." }, "margin-left-xl": { "category": "helpers", "description": "Add extra-large margin-left (2rem)." }, "margin-right": { "category": "helpers", "description": "Add default margin-right." }, "margin-right-xs": { "category": "helpers", "description": "Add extra-small margin-right (0.25rem)." }, "margin-right-sm": { "category": "helpers", "description": "Add small margin-right (0.5rem)." }, "margin-right-lg": { "category": "helpers", "description": "Add large margin-right (1.5rem)." }, "margin-right-xl": { "category": "helpers", "description": "Add extra-large margin-right (2rem)." }, "no-margin": { "category": "helpers", "description": "Remove all margin (!important).", "important": true }, "no-spacing": { "category": "helpers", "description": "Remove all margin and padding (!important).", "important": true }, "no-padding": { "category": "helpers", "description": "Remove all padding (!important).", "important": true }, "padding": { "category": "helpers", "description": "Add default padding on all sides." }, "padding-xs": { "category": "helpers", "description": "Add extra-small padding on all sides (0.25rem)." }, "padding-sm": { "category": "helpers", "description": "Add small padding on all sides (0.5rem)." }, "padding-lg": { "category": "helpers", "description": "Add large padding on all sides (1.5rem)." }, "padding-xl": { "category": "helpers", "description": "Add extra-large padding on all sides (2rem)." }, "padding-top": { "category": "helpers", "description": "Add default padding-top." }, "padding-top-xs": { "category": "helpers", "description": "Add extra-small padding-top (0.25rem)." }, "padding-top-sm": { "category": "helpers", "description": "Add small padding-top (0.5rem)." }, "padding-top-lg": { "category": "helpers", "description": "Add large padding-top (1.5rem)." }, "padding-top-xl": { "category": "helpers", "description": "Add extra-large padding-top (2rem)." }, "padding-bottom": { "category": "helpers", "description": "Add default padding-bottom." }, "padding-bottom-xs": { "category": "helpers", "description": "Add extra-small padding-bottom (0.25rem)." }, "padding-bottom-sm": { "category": "helpers", "description": "Add small padding-bottom (0.5rem)." }, "padding-bottom-lg": { "category": "helpers", "description": "Add large padding-bottom (1.5rem)." }, "padding-bottom-xl": { "category": "helpers", "description": "Add extra-large padding-bottom (2rem)." }, "padding-left": { "category": "helpers", "description": "Add default padding-left." }, "padding-left-xs": { "category": "helpers", "description": "Add extra-small padding-left (0.25rem)." }, "padding-left-sm": { "category": "helpers", "description": "Add small padding-left (0.5rem)." }, "padding-left-lg": { "category": "helpers", "description": "Add large padding-left (1.5rem)." }, "padding-left-xl": { "category": "helpers", "description": "Add extra-large padding-left (2rem)." }, "padding-right": { "category": "helpers", "description": "Add default padding-right." }, "padding-right-xs": { "category": "helpers", "description": "Add extra-small padding-right (0.25rem)." }, "padding-right-sm": { "category": "helpers", "description": "Add small padding-right (0.5rem)." }, "padding-right-lg": { "category": "helpers", "description": "Add large padding-right (1.5rem)." }, "padding-right-xl": { "category": "helpers", "description": "Add extra-large padding-right (2rem)." }, "border": { "category": "helpers", "description": "Add 1px solid border on all sides." }, "border-top": { "category": "helpers", "description": "Add 1px solid border on top." }, "border-bottom": { "category": "helpers", "description": "Add 1px solid border on bottom." }, "border-left": { "category": "helpers", "description": "Add 1px solid border on left." }, "border-right": { "category": "helpers", "description": "Add 1px solid border on right." }, "no-border": { "category": "helpers", "description": "Remove all borders (!important).", "important": true }, "width-100": { "category": "helpers", "description": "Width 100%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-90": { "category": "helpers", "description": "Width 90%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-80": { "category": "helpers", "description": "Width 80%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-75": { "category": "helpers", "description": "Width 75%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-70": { "category": "helpers", "description": "Width 70%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-66": { "category": "helpers", "description": "Width 66.6%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-50": { "category": "helpers", "description": "Width 50%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-40": { "category": "helpers", "description": "Width 40%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-33": { "category": "helpers", "description": "Width 33.3%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-25": { "category": "helpers", "description": "Width 25%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-20": { "category": "helpers", "description": "Width 20%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "width-10": { "category": "helpers", "description": "Width 10%.", "responsive": [ "tablet-width-*", "phone-width-*", "large-phone-width-*", "small-desktop-width-*" ] }, "height-100": { "category": "helpers", "description": "Height 100%." }, "height-90": { "category": "helpers", "description": "Height 90%." }, "height-80": { "category": "helpers", "description": "Height 80%." }, "height-75": { "category": "helpers", "description": "Height 75%." }, "height-70": { "category": "helpers", "description": "Height 70%." }, "height-50": { "category": "helpers", "description": "Height 50%." }, "height-33": { "category": "helpers", "description": "Height 33.3%." }, "height-25": { "category": "helpers", "description": "Height 25%." }, "height-10": { "category": "helpers", "description": "Height 10%." }, "sr-only": { "category": "helpers", "description": "Visually hidden but accessible to screen readers." }, "skip-link": { "category": "helpers", "description": "Skip navigation link — hidden until focused. Use as the first focusable element inside .", "example": "Skip to main content" }, "hide-on-desktop": { "category": "helpers", "description": "Hidden on desktop, visible on mobile (display: block below 767px)." }, "hide-on-mobile": { "category": "helpers", "description": "Hidden on mobile (display: none below 767px)." }, "text-primary": { "category": "helpers", "description": "Body text color (theme-aware). Maps to --ply-color-body." }, "text-secondary": { "category": "helpers", "description": "Secondary/subdued text color (theme-aware). Maps to --ply-color-secondary." }, "text-tertiary": { "category": "helpers", "description": "Muted/tertiary text color (theme-aware). Maps to --ply-color-muted. Alias: text-muted." }, "text-inverse": { "category": "helpers", "description": "Inverse text color (theme-aware). Maps to --ply-color-text-inverse." }, "success": { "category": "helpers", "description": "Green text color for success states." }, "error": { "category": "helpers", "description": "Red text color for error states." }, "no-orphan": { "category": "helpers", "description": "Prevents orphaned words at the end of text blocks using text-wrap: pretty." }, "text-balance": { "category": "helpers", "description": "Balances line lengths for headings using text-wrap: balance." }, "gap-xs": { "category": "helpers", "description": "Gap between flex/grid children: 0.25rem. Works on units-row to override the default 1rem gap." }, "gap-sm": { "category": "helpers", "description": "Gap between flex/grid children: 0.5rem. Works on units-row to override the default 1rem gap." }, "gap": { "category": "helpers", "description": "Gap between flex/grid children: 0.75rem. Works on units-row to override the default 1rem gap." }, "gap-lg": { "category": "helpers", "description": "Gap between flex/grid children: 1.5rem. Works on units-row to override the default 1rem gap." }, "gap-xl": { "category": "helpers", "description": "Gap between flex/grid children: 2rem. Works on units-row to override the default 1rem gap." }, "no-link-style": { "category": "helpers", "description": "Suppresses link color and underline on all tags inside the container. Useful for card-style links." }, "bg-glass": { "category": "helpers", "description": "Transparent background with backdrop blur. Theme-aware: white tint in light mode, dark tint in dark mode. Customizable via --ply-bg-glass." }, "equal-height": { "category": "grid", "description": "On units-row: makes all unit children stretch to the same height. Their direct children automatically fill the available height.", "parent": "units-row", "example": "
    Short
    Taller content here
    " }, "clearfix": { "category": "helpers", "description": "Clearfix for floated elements." }, "flat-list": { "category": "helpers", "description": "Remove list styling (margin-left: 0, list-style: none)." }, "circle": { "category": "helpers", "description": "border-radius: 100%." }, "border-radius": { "category": "helpers", "description": "Apply border-radius using var(--ply-border-radius). Default 0.25rem, themeable." }, "color-black": { "category": "helpers", "description": "Text color: black." }, "color-white": { "category": "helpers", "description": "Text color: white." }, "color-gray-10": { "category": "helpers", "description": "Text color: black at 10% opacity." }, "color-gray-20": { "category": "helpers", "description": "Text color: black at 20% opacity." }, "color-gray-30": { "category": "helpers", "description": "Text color: black at 30% opacity." }, "color-gray-40": { "category": "helpers", "description": "Text color: black at 40% opacity." }, "color-gray-50": { "category": "helpers", "description": "Text color: black at 50% opacity." }, "color-gray-60": { "category": "helpers", "description": "Text color: black at 60% opacity." }, "color-gray-70": { "category": "helpers", "description": "Text color: black at 70% opacity." }, "color-gray-80": { "category": "helpers", "description": "Text color: black at 80% opacity." }, "color-gray-90": { "category": "helpers", "description": "Text color: black at 90% opacity." }, "table-bordered": { "category": "tables", "description": "Add borders to all table cells. Applied to table element.", "example": "
    Cell
    " }, "table-simple": { "category": "tables", "description": "Remove borders and left padding from table. Applied to table element.", "example": "
    Cell
    " }, "table-flat": { "category": "tables", "description": "Remove borders and all padding from table. Applied to table element." }, "table-stroked": { "category": "tables", "description": "Table with bottom borders only on cells." }, "table-striped": { "category": "tables", "description": "Striped table rows (odd rows get background color). Applied to table element.", "example": "
    Row 1
    Row 2
    " }, "table-stripped": { "category": "tables", "description": "Deprecated alias for table-striped. Use table-striped instead." }, "table-hovered": { "category": "tables", "description": "Highlight table rows on hover. Applied to table element.", "example": "
    Hoverable
    " }, "table-container": { "category": "tables", "description": "Responsive scrollable wrapper for tables. Adds horizontal scroll on overflow.", "example": "
    ...
    " }, "btn-ghost": { "category": "buttons", "description": "Ghost button. Transparent background, no border. Shows subtle background on hover. For icon-only or low-emphasis actions.", "example": "" }, "btn-icon": { "category": "buttons", "description": "Icon-only button modifier. Equal padding on all sides for a square aspect ratio. Combine with btn-ghost for toolbar-style icon buttons.", "example": "" }, "align-right": { "category": "buttons", "description": "Right-align buttons inside btn-group.", "parent": "btn-group" }, "align-left": { "category": "buttons", "description": "Left-align buttons inside btn-group.", "parent": "btn-group" }, "align-center": { "category": "helpers", "description": "align-items: center with text-align center." }, "fill-width": { "category": "buttons", "description": "Stretch buttons to fill full width inside btn-group.", "parent": "btn-group" }, "rounded": { "category": "buttons", "description": "Round the outer corners of a btn-group.", "parent": "btn-group" }, "joined": { "category": "buttons", "description": "Remove gap so children connect as a single visual unit. On btn-group: buttons touch with a 1px divider, connected border-radius on outer edges. On units-row: removes column gutters (alias for split, which is kept for backwards compatibility).", "example": "
    \n
    ...
    ...
    " }, "unit-role-right": { "category": "grid", "description": "Float a grid unit to the right." }, "unit-role-left": { "category": "grid", "description": "Clear left float on a grid unit." }, "code": { "category": "helpers", "description": "Inline code styling. Prefer the native element instead." }, "sans": { "category": "helpers", "description": "Apply system sans-serif font stack." }, "serif": { "category": "helpers", "description": "Apply Georgia serif font family." }, "mono": { "category": "helpers", "description": "Apply monospace font family." }, "layer-0": { "category": "helpers", "description": "Background layer 0. Uses --ply-bg-body." }, "layer-1": { "category": "helpers", "description": "Background layer 1 with subtle box-shadow. Uses --ply-bg-surface." }, "layer-2": { "category": "helpers", "description": "Background layer 2 with medium box-shadow. Uses --ply-bg-surface-alt." }, "layer-3": { "category": "helpers", "description": "Background layer 3 with large box-shadow. Uses --ply-bg-muted." }, "shadow-1": { "category": "helpers", "description": "Small box-shadow. Uses --ply-shadow-1." }, "shadow-2": { "category": "helpers", "description": "Medium box-shadow. Uses --ply-shadow-2." }, "shadow-3": { "category": "helpers", "description": "Large box-shadow. Uses --ply-shadow-3." }, "color-white-10": { "category": "helpers", "description": "Text color: white at 10% opacity." }, "color-white-20": { "category": "helpers", "description": "Text color: white at 20% opacity." }, "color-white-30": { "category": "helpers", "description": "Text color: white at 30% opacity." }, "color-white-40": { "category": "helpers", "description": "Text color: white at 40% opacity." }, "color-white-50": { "category": "helpers", "description": "Text color: white at 50% opacity." }, "color-white-60": { "category": "helpers", "description": "Text color: white at 60% opacity." }, "color-white-70": { "category": "helpers", "description": "Text color: white at 70% opacity." }, "color-white-80": { "category": "helpers", "description": "Text color: white at 80% opacity." }, "color-white-90": { "category": "helpers", "description": "Text color: white at 90% opacity." }, "color-blue": { "category": "helpers", "description": "Text color: theme-aware blue." }, "color-red": { "category": "helpers", "description": "Text color: theme-aware red." }, "color-green": { "category": "helpers", "description": "Text color: theme-aware green." }, "color-yellow": { "category": "helpers", "description": "Text color: theme-aware yellow." }, "bg-blue": { "category": "helpers", "description": "Blue background color. Theme-aware, WCAG AA with white text." }, "bg-red": { "category": "helpers", "description": "Red background color. Theme-aware, WCAG AA with white text." }, "bg-green": { "category": "helpers", "description": "Green background color. Theme-aware, WCAG AA with white text." }, "bg-yellow": { "category": "helpers", "description": "Yellow background color. Theme-aware, WCAG AA with dark text." }, "color-accent": { "category": "helpers", "description": "Text color: accent/brand color. Uses --ply-color-accent. Theme-aware." }, "bg-accent": { "category": "helpers", "description": "Accent/brand background color. Uses --ply-color-accent. Theme-aware." }, "bg-surface": { "category": "helpers", "description": "Surface background color. Theme-aware." }, "text-on-color": { "category": "helpers", "description": "White text for use on colored backgrounds." }, "border-radius-lg": { "category": "helpers", "description": "Large border radius (3x --ply-border-radius)." }, "border-radius-xl": { "category": "helpers", "description": "Extra large border radius (6x --ply-border-radius)." }, "spinning": { "category": "helpers", "description": "Infinite 360° spin animation." }, "fade-in": { "category": "helpers", "description": "Fade-in animation from opacity 0 to 1." }, "fully-centered": { "category": "helpers", "description": "Flex center on both axes with text-align center." }, "vertically-centered-space-between": { "category": "helpers", "description": "Vertical center with space-between horizontal distribution." }, "blocks-2": { "category": "grid", "description": "2-column equal block layout using float.", "example": "
    Block
    Block
    " }, "blocks-3": { "category": "grid", "description": "3-column equal block layout using float.", "example": "
    Block
    Block
    Block
    " }, "blocks-4": { "category": "grid", "description": "4-column equal block layout using float." }, "blocks-5": { "category": "grid", "description": "5-column equal block layout using float." }, "blocks-6": { "category": "grid", "description": "6-column equal block layout using float." }, "block-first": { "category": "grid", "description": "Clear float for first block in a new row." }, "blocks-mobile-50": { "category": "grid", "description": "2-column block layout on mobile." }, "blocks-mobile-33": { "category": "grid", "description": "3-column block layout on mobile." }, "cursor-pointer": { "category": "helpers", "description": "cursor: pointer. Alias: cursor-finger." }, "cursor-default": { "category": "helpers", "description": "cursor: default. Alias: cursor-arrow." }, "cursor-none": { "category": "helpers", "description": "cursor: none." }, "cursor-progress": { "category": "helpers", "description": "cursor: progress." }, "cursor-help": { "category": "helpers", "description": "cursor: help. Alias: cursor-question-mark." }, "cursor-text": { "category": "helpers", "description": "cursor: text." }, "cursor-cell": { "category": "helpers", "description": "cursor: cell. Alias: cursor-plus." }, "cursor-crosshair": { "category": "helpers", "description": "cursor: crosshair." }, "cursor-alias": { "category": "helpers", "description": "cursor: alias. Alias: cursor-shortcut." }, "cursor-context-menu": { "category": "helpers", "description": "cursor: context-menu." }, "cursor-copy": { "category": "helpers", "description": "cursor: copy." }, "cursor-move": { "category": "helpers", "description": "cursor: move." }, "cursor-no-drop": { "category": "helpers", "description": "cursor: no-drop." }, "cursor-not-allowed": { "category": "helpers", "description": "cursor: not-allowed." }, "cursor-all-scroll": { "category": "helpers", "description": "cursor: all-scroll." }, "cursor-ew-resize": { "category": "helpers", "description": "cursor: ew-resize. Alias: cursor-col-resize." }, "cursor-ns-resize": { "category": "helpers", "description": "cursor: ns-resize. Alias: cursor-row-resize." }, "cursor-nesw-resize": { "category": "helpers", "description": "cursor: nesw-resize." }, "cursor-n-resize": { "category": "helpers", "description": "cursor: n-resize." }, "cursor-e-resize": { "category": "helpers", "description": "cursor: e-resize." }, "cursor-s-resize": { "category": "helpers", "description": "cursor: s-resize." }, "cursor-w-resize": { "category": "helpers", "description": "cursor: w-resize." }, "cursor-ne-resize": { "category": "helpers", "description": "cursor: ne-resize." }, "cursor-nw-resize": { "category": "helpers", "description": "cursor: nw-resize." }, "cursor-sw-resize": { "category": "helpers", "description": "cursor: sw-resize." }, "cursor-se-resize": { "category": "helpers", "description": "cursor: se-resize." }, "accordion-title": { "category": "helpers", "description": "Accordion item header. Clickable to toggle panel visibility." }, "accordion-title-opened": { "category": "helpers", "description": "Open state for accordion title." }, "accordion-panel": { "category": "helpers", "description": "Accordion content panel. Hidden by default, shown when title is opened." }, "accordion-toggle": { "category": "helpers", "description": "Toggle indicator element inside accordion title." }, "accordion-toggle-closed": { "category": "helpers", "description": "Closed state toggle indicator (plus icon)." }, "accordion-toggle-opened": { "category": "helpers", "description": "Open state toggle indicator (minus icon)." }, "autocomplete": { "category": "forms", "description": "Autocomplete dropdown container for form inputs." }, "label": { "category": "notifications", "description": "Inline label/tag. Small, uppercase, bold text with background color." }, "label-outline": { "category": "notifications", "description": "Outlined label variant with border instead of background fill." }, "label-black": { "category": "notifications", "description": "Black label." }, "label-blue": { "category": "notifications", "description": "Blue label." }, "label-red": { "category": "notifications", "description": "Red label." }, "label-green": { "category": "notifications", "description": "Green label." }, "label-yellow": { "category": "notifications", "description": "Yellow label." }, "label-white": { "category": "notifications", "description": "White label." }, "badge": { "category": "notifications", "description": "Rounded pill badge for counts or status indicators." }, "badge-small": { "category": "notifications", "description": "Small badge variant." }, "badge-black": { "category": "notifications", "description": "Black badge." }, "badge-blue": { "category": "notifications", "description": "Blue badge." }, "badge-red": { "category": "notifications", "description": "Red badge." }, "badge-green": { "category": "notifications", "description": "Green badge." }, "badge-yellow": { "category": "notifications", "description": "Yellow badge." }, "badge-white": { "category": "notifications", "description": "White badge." }, "modal-blur": { "category": "helpers", "description": "Apply blur effect to background content behind a modal." }, "modal-box": { "category": "helpers", "description": "Modal viewport container. Fixed position, full-screen overlay." }, "modal": { "category": "helpers", "description": "Modal dialog box. Centered content panel with background and shadow." }, "modal-close": { "category": "helpers", "description": "Modal close button. Positioned in top-right corner." }, "tooltip": { "category": "helpers", "description": "Tooltip popup. Positioned element for contextual information." }, "tooltip-theme-red": { "category": "helpers", "description": "Red-themed tooltip." }, "tooltip-theme-blue": { "category": "helpers", "description": "Blue-themed tooltip." }, "tooltip-theme-green": { "category": "helpers", "description": "Green-themed tooltip." }, "tooltip-theme-yellow": { "category": "helpers", "description": "Yellow-themed tooltip." }, "tooltip-theme-white": { "category": "helpers", "description": "White-themed tooltip." }, "loader": { "category": "helpers", "description": "Spinning loader animation indicator." }, "flexible-embed": { "category": "helpers", "description": "16:9 responsive embed container for videos and iframes." }, "filterbox": { "category": "forms", "description": "Filterable input wrapper with dropdown list." }, "filterbox-list": { "category": "forms", "description": "Dropdown list for filterbox results." }, "typeahead-empty": { "category": "forms", "description": "Empty results message for typeahead." }, "multiselect": { "category": "forms", "description": "Multi-select wrapper with tag-based selection." }, "multiselect-tags": { "category": "forms", "description": "Tag container inside multiselect." }, "multiselect-tag": { "category": "forms", "description": "Individual selected tag inside multiselect." }, "multiselect-results": { "category": "forms", "description": "Dropdown results list for multiselect." }, "tools-droparea": { "category": "forms", "description": "Drag-and-drop file upload area with dashed border." }, "tools-droparea-placeholder": { "category": "forms", "description": "Placeholder text inside drag-and-drop upload area." }, "navigation-toggle-solid": { "category": "navigation", "description": "Solid background variant of the mobile navigation toggle button." }, "sortable": { "category": "tables", "description": "Makes a th element show sort direction arrows on hover. Add to th elements.", "example": "Name" }, "sort-asc": { "category": "tables", "description": "Highlights ascending sort arrow on a sortable header.", "example": "Name" }, "sort-desc": { "category": "tables", "description": "Highlights descending sort arrow on a sortable header.", "example": "Name" }, "table-filter": { "category": "tables", "description": "Add alongside input-groups to auto-size selects for table filter bars.", "example": "
    ...
    " }, "table-actions": { "category": "tables", "description": "Right-aligned icon button toolbar above a table.", "example": "
    " }, "pagination-solid": { "category": "navigation", "description": "Solid/filled pagination variant with no borders.", "example": "" }, "pagination-sm": { "category": "navigation", "description": "Compact pagination with smaller padding and font.", "example": "" }, "pagination-lg": { "category": "navigation", "description": "Spacious pagination with larger padding and font.", "example": "" }, "pagination-info": { "category": "navigation", "description": "Summary text displayed beside pagination controls.", "example": "Showing 1-10 of 48" }, "steps": { "category": "forms", "description": "Horizontal step indicator container. Use with ol element.", "example": "
    1. ...
    " }, "step": { "category": "forms", "description": "Individual step item inside steps container. Auto-numbered via CSS counter.", "example": "
  • Account
    • " }, "steps-vertical": { "category": "forms", "description": "Vertical step layout modifier for steps container.", "example": "
      ...
    " }, "steps-sm": { "category": "forms", "description": "Smaller step circles and text.", "example": "
      ...
    " }, "step-label": { "category": "forms", "description": "Step title text inside a step.", "parent": "step" }, "step-desc": { "category": "forms", "description": "Step description text below the label.", "parent": "step" }, "step-content": { "category": "forms", "description": "Wrapper for label and desc in vertical steps.", "parent": "step" }, "step-panel": { "category": "forms", "description": "Form content section, hidden by default. Add active class to show.", "example": "
    ...
    " }, "step-nav": { "category": "forms", "description": "Back/Next button bar with top border for multi-step forms.", "example": "
    " }, "dialog-sm": { "category": "dialogs", "description": "Small dialog with 24rem max-width.", "example": "..." }, "dialog-lg": { "category": "dialogs", "description": "Large dialog with 48rem max-width.", "example": "..." }, "dialog-full": { "category": "dialogs", "description": "Full viewport dialog.", "example": "..." }, "dialog-header": { "category": "dialogs", "description": "Flex header with title and close button for dialog.", "parent": "dialog" }, "dialog-body": { "category": "dialogs", "description": "Padded content area for dialog.", "parent": "dialog" }, "dialog-footer": { "category": "dialogs", "description": "Right-aligned action button bar for dialog.", "parent": "dialog" }, "dialog-close": { "category": "dialogs", "description": "Styled close button for dialog header.", "parent": "dialog" }, "dialog-confirm": { "category": "dialogs", "description": "Compact centered confirmation dialog pattern.", "example": "..." }, "dialog-scroll": { "category": "dialogs", "description": "Scrollable body with pinned header and footer.", "example": "..." }, "dialog-layer-1": { "category": "dialogs", "description": "Z-index layer 1 for stacked dialogs (z-index: 100)." }, "dialog-layer-2": { "category": "dialogs", "description": "Z-index layer 2 for stacked dialogs (z-index: 110, lighter backdrop)." }, "dialog-layer-3": { "category": "dialogs", "description": "Z-index layer 3 for stacked dialogs (z-index: 120, lightest backdrop)." }, "no-rtl": { "category": "rtl", "description": "Opt out of RTL mirroring for specific elements inside dir=rtl containers.", "example": "
    LTR content
    " }, "margin-inline-start": { "category": "rtl", "description": "Margin on the start side (left in LTR, right in RTL).", "example": "
    ...
    " }, "margin-inline-end": { "category": "rtl", "description": "Margin on the end side (right in LTR, left in RTL)." }, "padding-inline-start": { "category": "rtl", "description": "Padding on the start side (left in LTR, right in RTL)." }, "padding-inline-end": { "category": "rtl", "description": "Padding on the end side (right in LTR, left in RTL)." }, "border-inline-start": { "category": "rtl", "description": "Border on the start side (left in LTR, right in RTL)." }, "border-inline-end": { "category": "rtl", "description": "Border on the end side (right in LTR, left in RTL)." }, "cursor-col-resize": { "category": "helpers", "description": "Column resize cursor." }, "cursor-row-resize": { "category": "helpers", "description": "Row resize cursor." }, "no-top-margin": { "category": "helpers", "description": "Remove top margin (!important).", "important": true }, "no-right-margin": { "category": "helpers", "description": "Remove right margin (!important).", "important": true }, "no-bottom-margin": { "category": "helpers", "description": "Remove bottom margin (!important).", "important": true }, "no-left-margin": { "category": "helpers", "description": "Remove left margin (!important).", "important": true }, "no-top-padding": { "category": "helpers", "description": "Remove top padding (!important).", "important": true }, "no-right-padding": { "category": "helpers", "description": "Remove right padding (!important).", "important": true }, "no-bottom-padding": { "category": "helpers", "description": "Remove bottom padding (!important).", "important": true }, "no-left-padding": { "category": "helpers", "description": "Remove left padding (!important).", "important": true }, "no-border-top": { "category": "helpers", "description": "Remove top border (!important).", "important": true }, "no-border-right": { "category": "helpers", "description": "Remove right border (!important).", "important": true }, "no-border-bottom": { "category": "helpers", "description": "Remove bottom border (!important).", "important": true }, "no-border-left": { "category": "helpers", "description": "Remove left border (!important).", "important": true }, "last": { "category": "helpers", "description": "Remove right margin (!important).", "important": true }, "end": { "category": "helpers", "description": "Remove bottom margin (!important).", "important": true }, "pause": { "category": "helpers", "description": "Half-height bottom margin (!important).", "important": true }, "medium": { "category": "typography", "description": "Medium font weight (400 !important).", "important": true }, "centered": { "category": "grid", "description": "Center a grid unit (float: none !important, margin: 0 auto).", "parent": "units-row", "important": true }, "unit-centered": { "category": "grid", "description": "Center a grid unit (float: none !important, margin: 0 auto). Alias: centered.", "parent": "units-row", "important": true }, "gap-xxl": { "category": "helpers", "description": "Gap between flex/grid children: 3rem. Works on units-row to override the default 1rem gap." }, "margin-xxl": { "category": "helpers", "description": "Add extra extra large margin on all sides (3rem)." }, "margin-top-xxl": { "category": "helpers", "description": "Add extra extra large margin-top (3rem)." }, "margin-right-xxl": { "category": "helpers", "description": "Add extra extra large margin-right (3rem)." }, "margin-bottom-xxl": { "category": "helpers", "description": "Add extra extra large margin-bottom (3rem)." }, "margin-left-xxl": { "category": "helpers", "description": "Add extra extra large margin-left (3rem)." }, "padding-xxl": { "category": "helpers", "description": "Add extra extra large padding on all sides (3rem)." }, "padding-top-xxl": { "category": "helpers", "description": "Add extra extra large padding-top (3rem)." }, "padding-right-xxl": { "category": "helpers", "description": "Add extra extra large padding-right (3rem)." }, "padding-bottom-xxl": { "category": "helpers", "description": "Add extra extra large padding-bottom (3rem)." }, "padding-left-xxl": { "category": "helpers", "description": "Add extra extra large padding-left (3rem)." }, "padding-xxl-top": { "category": "helpers", "description": "Alias for padding-top-xxl. Add extra extra large padding-top (3rem)." }, "padding-xxl-right": { "category": "helpers", "description": "Alias for padding-right-xxl. Add extra extra large padding-right (3rem)." }, "padding-xxl-bottom": { "category": "helpers", "description": "Alias for padding-bottom-xxl. Add extra extra large padding-bottom (3rem)." }, "padding-xxl-left": { "category": "helpers", "description": "Alias for padding-left-xxl. Add extra extra large padding-left (3rem)." } }, "customProperties": { "typography": { "--ply-font-body": "Font family for body text and form controls. Default: system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.).", "--ply-font-heading": "Font family for headings (h1-h6). Default: inherits from --ply-font-body.", "--ply-font-mono": "Font family for code, pre, kbd, samp elements. Default: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace." }, "background": { "--ply-bg-body": "Page background. Light: #ffffff, Dark: #161616", "--ply-bg-surface": "Card/panel background. Light: #ffffff, Dark: #262626", "--ply-bg-surface-alt": "Alternate surface. Light: #f4f4f4, Dark: #333333", "--ply-bg-muted": "Muted/hover background. Light: #e0e0e0, Dark: #393939", "--ply-bg-glass": "Frosted glass overlay. backdrop-filter: blur(8px). Light: rgba(255,255,255,0.15), Dark: rgba(38,38,38,0.25)", "--ply-bg-inverse": "Surface opposite the body (= --ply-color-body). Light: #161616, Dark: #f4f4f4" }, "text": { "--ply-color-body": "Primary text color. Light: #161616, Dark: #f4f4f4", "--ply-color-headings": "Heading text color. Light: #161616, Dark: #ffffff", "--ply-color-secondary": "Secondary text. Light: #525252, Dark: #c6c6c6", "--ply-color-muted": "Muted/tertiary text (supplementary content). Light: #767676, Dark: #8d8d8d", "--ply-color-placeholder": "Input placeholder text. Light: #a8a8a8, Dark: #6f6f6f", "--ply-color-text-inverse": "Inverse text (for colored backgrounds). Light: #fff, Dark: #fff", "--ply-color-black": "Absolute black, mode-independent. #000000" }, "borders": { "--ply-border-color": "Standard border. Light: #e0e0e0, Dark: #525252", "--ply-border-strong": "Emphasized border. Light: #8d8d8d, Dark: #6f6f6f", "--ply-border-radius": "Global border-radius for inputs, cards, dialogs, details, notifications, and other components. Default: 0.25rem. Override to change the overall shape language (e.g., 0 for sharp, 0.5rem for softer)." }, "radius": { "--ply-radius-none": "Radius scale: square. Default: 0", "--ply-radius-xs": "Radius scale. Default: 0.125rem (2px)", "--ply-radius-sm": "Radius scale. Default: 0.25rem (4px)", "--ply-radius-md": "Radius scale. Default: 0.5rem (8px)", "--ply-radius-lg": "Radius scale. Default: 0.75rem (12px)", "--ply-radius-xl": "Radius scale. Default: 1rem (16px)", "--ply-radius-full": "Radius scale: pill/circle. Default: 9999px", "--ply-border-radius": "Default element radius alias. Default: var(--ply-radius-sm)", "--ply-btn-border-radius": "Button radius alias. Default: var(--ply-radius-full)", "--ply-label-radius": "Label radius alias. Default: var(--ply-radius-sm)", "--ply-badge-radius": "Badge radius alias. Default: var(--ply-radius-full)", "--ply-input-radius": "Input radius alias. Default: var(--ply-radius-sm)" }, "interactive": { "--ply-color-accent": "Brand accent color for icons, badges, and section accents. Independent of button color and focus rings. Light: #0353e9, Dark: #4589ff. Override in custom themes without affecting buttons.", "--ply-color-link": "Link color. Light: #0f62fe, Dark: #78a9ff", "--ply-color-link-hover": "Link hover. Light: #0043ce, Dark: #a6c8ff", "--ply-color-focus": "Focus ring color. #0f62fe in both themes", "--ply-btn-border-radius": "Button border-radius. Default: 2rem (pill shape). Override for square or rounded buttons." }, "forms": { "--ply-color-field-bg": "Field background. Defaults to var(--ply-bg-surface-alt). Override for custom field backgrounds.", "--ply-color-input-border": "Input border. Defaults to var(--ply-border-strong). Override for custom input borders.", "--ply-color-input-bg": "Input background. Defaults to var(--ply-bg-surface-alt). Override for custom input backgrounds.", "--ply-color-error": "Error state color for borders and text. Defaults to var(--ply-red-1). Used by .input-error, .error, .required, and stepper error states.", "--ply-color-success": "Success state color for borders and text. Defaults to var(--ply-green-1). Used by .input-success, .success, and stepper completed states." }, "controlSizing": { "--ply-control-font-lg": "Control font-size (Large). Default: 1.125rem", "--ply-control-font": "Control font-size (Default). Default: 1rem", "--ply-control-font-sm": "Control font-size (Small). Default: 0.875rem", "--ply-control-font-xs": "Control font-size (XSmall). Default: 0.75rem", "--ply-control-py-lg": "Control vertical padding (Large). Default: 0.875rem", "--ply-control-py": "Control vertical padding (Default). Default: 0.625rem", "--ply-control-py-sm": "Control vertical padding (Small). Default: 0.375rem", "--ply-control-py-xs": "Control vertical padding (XSmall). Default: 0.25rem", "--ply-control-px-lg": "Control horizontal padding (Large). Default: 2rem", "--ply-control-px": "Control horizontal padding (Default). Default: 1.5rem", "--ply-control-px-sm": "Control horizontal padding (Small). Default: 1rem", "--ply-control-px-xs": "Control horizontal padding (XSmall). Default: 0.75rem", "--ply-control-lh-lg": "Control line-height (Large). Default: 1.75rem", "--ply-control-lh": "Control line-height (Default). Default: 1.5rem", "--ply-control-lh-sm": "Control line-height (Small). Default: 1.25rem", "--ply-control-lh-xs": "Control line-height (XSmall). Default: 1rem" }, "code": { "--ply-color-code-bg": "Inline code background. Light: #f4f4f4, Dark: #333333", "--ply-color-code-border": "Inline code border. Light: #e0e0e0, Dark: #525252" }, "tables": { "--ply-color-table-border": "Table cell border. Light: #e0e0e0, Dark: #525252", "--ply-color-table-striped": "Striped row background. Light: #f4f4f4, Dark: #1c1c1c", "--ply-color-table-stripped": "Deprecated alias for --ply-color-table-striped.", "--ply-color-table-hovered": "Hovered row background. Light: #e8e8e8, Dark: #333333" }, "buttons": { "--ply-btn-default-bg": "Primary button background. Controls btn-primary color and link colors. Light: #0353e9, Dark: #78a9ff. Override in custom themes to change primary + links together.", "--ply-btn-secondary-bg": "Secondary button background. Controls btn, btn-secondary color. Light: #393939, Dark: #4c4c4c.", "--ply-btn-default-color": "Default button text color. Light: inherits --ply-color-text-inverse (#fff), Dark: #f4f4f4", "--ply-btn-font-size": "Button font size. Default: 1em (inherits from context). Override to set a fixed size for all buttons in a theme.", "--ply-btn-gap": "Gap between icon and text inside a button. Default: 0.5em. Applies to all btn variants via inline-flex layout." }, "navigation": { "--ply-nav-bg": "Navbar background. Light: #ffffff, Dark: #262626", "--ply-nav-color": "Nav link text. Light: #525252, Dark: #c6c6c6", "--ply-nav-border": "Nav border. Light: #e0e0e0, Dark: #525252", "--ply-nav-hover": "Nav item hover bg. Light: #f4f4f4, Dark: #333333", "--ply-nav-active-color": "Active nav item text. Light: #161616, Dark: #ffffff" }, "elevation": { "--ply-layer-0": "Base layer bg. Same as bg-body", "--ply-layer-1": "Elevated layer. Light: #f4f4f4, Dark: #262626", "--ply-layer-2": "Higher layer. Light: #e0e0e0, Dark: #393939", "--ply-layer-3": "Highest layer. Light: #c6c6c6, Dark: #525252", "--ply-shadow-1": "Subtle shadow. Light: rgba(0,0,0,0.08), Dark: rgba(0,0,0,0.2)", "--ply-shadow-2": "Medium shadow. Light: rgba(0,0,0,0.1), Dark: rgba(0,0,0,0.3)", "--ply-shadow-3": "Heavy shadow. Light: rgba(0,0,0,0.12), Dark: rgba(0,0,0,0.4)", "--ply-layer-inverse-0": "Base inverse layer (= --ply-color-body). Light: #161616, Dark: #f4f4f4", "--ply-layer-inverse-1": "Raised inverse layer (= --ply-color-secondary). Light: #525252, Dark: #c6c6c6" }, "brand": { "--ply-bg-blue": "Blue button/badge bg. #0f62fe (same both themes)", "--ply-bg-blue-hover": "Blue hover. #0043ce", "--ply-bg-blue-active": "Blue active. #002d9c", "--ply-bg-red": "Red bg. #da1e28", "--ply-bg-red-hover": "Red hover. #ba1b23", "--ply-bg-red-active": "Red active. #750e13", "--ply-bg-green": "Green bg. #198038", "--ply-bg-green-hover": "Green hover. #0e6027", "--ply-bg-green-active": "Green active. #044317", "--ply-bg-yellow": "Yellow bg. #f1c21b", "--ply-bg-yellow-hover": "Yellow hover. #d2a106", "--ply-bg-yellow-active": "Yellow active. #b28600" }, "palette": { "--ply-blue-1 / -2 / -3": "Blue palette: base, darker, darkest", "--ply-red-1 / -2 / -3": "Red palette: base, darker, darkest", "--ply-green-1 / -2 / -3": "Green palette: base, darker, darkest", "--ply-yellow-1 / -2 / -3": "Yellow palette: base, darker, darkest", "--ply-indigo-1 / -2 / -3": "Indigo palette: base, darker, darkest", "--ply-purple-1 / -2 / -3": "Purple palette: base, darker, darkest", "--ply-pink-1 / -2 / -3": "Pink palette: base, darker, darkest", "--ply-orange-1 / -2 / -3": "Orange palette: base, darker, darkest", "--ply-teal-1 / -2 / -3": "Teal palette: base, darker, darkest", "--ply-cyan-1 / -2 / -3": "Cyan palette: base, darker, darkest" }, "spacing": { "--ply-space-xs": "Extra-small spacing unit. Default: 0.25rem", "--ply-space-sm": "Small spacing unit. Default: 0.5rem", "--ply-space-md": "Medium spacing unit. Default: 0.75rem", "--ply-space": "Default spacing unit. Default: 1rem (16px)", "--ply-space-lg": "Large spacing unit. Default: 1.5rem", "--ply-space-xl": "Extra-large spacing unit. Default: 2rem", "--ply-space-xxl": "Extra extra large spacing unit. Default: 3rem" }, "colorSurfaces": { "--ply-blue-surface": "Theme-aware blue pastel background. Light: blue pastel, Dark: dark muted blue. For cards, badges, alerts.", "--ply-blue-border": "Theme-aware blue border. Light: light blue tint, Dark: medium-dark blue. For colored card borders.", "--ply-red-surface": "Theme-aware red pastel background. Light: red pastel, Dark: dark muted red. For cards, badges, alerts.", "--ply-red-border": "Theme-aware red border. Light: light red tint, Dark: medium-dark red. For colored card borders.", "--ply-green-surface": "Theme-aware green pastel background. Light: green pastel, Dark: dark muted green. For cards, badges, alerts.", "--ply-green-border": "Theme-aware green border. Light: light green tint, Dark: medium-dark green. For colored card borders.", "--ply-yellow-surface": "Theme-aware yellow pastel background. Light: yellow pastel, Dark: dark muted yellow. For cards, badges, alerts.", "--ply-yellow-border": "Theme-aware yellow border. Light: light yellow tint, Dark: medium-dark yellow. For colored card borders.", "--ply-indigo-surface": "Theme-aware indigo pastel background. Light: indigo pastel, Dark: dark muted indigo. For cards, badges, alerts.", "--ply-indigo-border": "Theme-aware indigo border. Light: light indigo tint, Dark: medium-dark indigo. For colored card borders.", "--ply-purple-surface": "Theme-aware purple pastel background. Light: purple pastel, Dark: dark muted purple. For cards, badges, alerts.", "--ply-purple-border": "Theme-aware purple border. Light: light purple tint, Dark: medium-dark purple. For colored card borders.", "--ply-pink-surface": "Theme-aware pink pastel background. Light: pink pastel, Dark: dark muted pink. For cards, badges, alerts.", "--ply-pink-border": "Theme-aware pink border. Light: light pink tint, Dark: medium-dark pink. For colored card borders.", "--ply-orange-surface": "Theme-aware orange pastel background. Light: orange pastel, Dark: dark muted orange. For cards, badges, alerts.", "--ply-orange-border": "Theme-aware orange border. Light: light orange tint, Dark: medium-dark orange. For colored card borders.", "--ply-teal-surface": "Theme-aware teal pastel background. Light: teal pastel, Dark: dark muted teal. For cards, badges, alerts.", "--ply-teal-border": "Theme-aware teal border. Light: light teal tint, Dark: medium-dark teal. For colored card borders.", "--ply-cyan-surface": "Theme-aware cyan pastel background. Light: cyan pastel, Dark: dark muted cyan. For cards, badges, alerts.", "--ply-cyan-border": "Theme-aware cyan border. Light: light cyan tint, Dark: medium-dark cyan. For colored card borders." }, "totalCustomProperties": 131 }, "semanticElements": { "dialog": { "file": "_reset.scss", "styling": "border: none, border-radius: 0.25rem, padding: 1.5rem, max-width: 32rem, box-shadow, theme-aware background. ::backdrop overlay included.", "tip": "Use native with .showModal() instead of custom overlays. Add bg-glass class for frosted effect." }, "details": { "file": "_reset.scss", "styling": "Border, border-radius, padding. Summary gets cursor: pointer, font-weight: 600. Rotation arrow on open state.", "tip": "Use for collapsible content. No classes needed — just
    TitleContent
    ." }, "table": { "file": "_typography.scss, _tables.scss", "styling": "Full width, border-collapse, themed borders on th/td, bold thead. Caption gets uppercase muted styling.", "tip": "Just write a . Add table-bordered, table-striped, or table-hover classes for variants." }, "nav": { "file": "_navigation.scss", "styling": "ul list-style: none, margin: 0. Add .navbar for horizontal nav bar.", "tip": "Wrap
      in