Design tokens

ng-hub-ui is built on a three-layer token system: reference tokens (--hub-ref-*) hold the raw primitives, system tokens (--hub-sys-*) assign semantic meaning, and component tokens scope styling per component. Every token is a CSS variable, so you can re-theme the whole library at runtime by overriding values at :root or on a wrapper.

Libraries with tokens

Each library declares its own component tokens (--hub-{prefix}-*). Open any to see its documentation.

ng-hub-ui-avatar35 tokens--hub-avatar-*ng-hub-ui-badges30 tokens--hub-badge-*ng-hub-ui-board75 tokens--hub-board-*ng-hub-ui-breadcrumbs21 tokens--hub-breadcrumb-*ng-hub-ui-buttons46 tokens--hub-btn-*--hub-button-*--hub-dropdown-*--hub-fab-*--hub-speed-*ng-hub-ui-calendar45 tokens--hub-calendar-*ng-hub-ui-forms165 tokens--hub-check-*--hub-datepicker-*--hub-daterangepicker-*--hub-form-*--hub-input-*--hub-label-*--hub-otp-*--hub-select-*--hub-slider-*--hub-switch-*--hub-textarea-*ng-hub-ui-milestones23 tokens--hub-milestone-*ng-hub-ui-modal90 tokens--hub-modal-*ng-hub-ui-nav120 tokens--hub-nav-*ng-hub-ui-paginable218 tokens--hub-list-*--hub-paginator-*--hub-table-*ng-hub-ui-panels143 tokens--hub-accordion-*--hub-panels-*ng-hub-ui-skeleton14 tokens--hub-skeleton-*ng-hub-ui-stepper46 tokens--hub-stepper-*ng-hub-ui-toast26 tokens--hub-toast-*ng-hub-ui-utils21 tokens--hub-overlay-*--hub-tooltip-*

Reference (--hub-ref-*)

ColorTokenValueResolved
--hub-ref-color-white#ffffff—
--hub-ref-color-black#000000—
--hub-ref-color-gray-100#f8f9fa—
--hub-ref-color-gray-200#e9ecef—
--hub-ref-color-gray-300#dee2e6—
--hub-ref-color-gray-400#ced4da—
--hub-ref-color-gray-500#adb5bd—
--hub-ref-color-gray-600#6c757d—
--hub-ref-color-gray-700#495057—
--hub-ref-color-gray-800#343a40—
--hub-ref-color-gray-900#212529—
--hub-ref-color-blue-100#cfe2ff—
--hub-ref-color-blue-200#9ec5fe—
--hub-ref-color-blue-300#6ea8fe—
--hub-ref-color-blue-400#3d8bfd—
--hub-ref-color-blue-500#0d6efd—
--hub-ref-color-blue-600#0a58ca—
--hub-ref-color-blue-700#084298—
--hub-ref-color-blue-800#052c65—
--hub-ref-color-blue-900#031633—
--hub-ref-color-green-100#d1e7dd—
--hub-ref-color-green-200#a3cfbb—
--hub-ref-color-green-300#75b798—
--hub-ref-color-green-400#479f76—
--hub-ref-color-green-500#198754—
--hub-ref-color-green-600#146c43—
--hub-ref-color-green-700#0f5132—
--hub-ref-color-green-800#0a3622—
--hub-ref-color-green-900#051b11—
--hub-ref-color-red-100#f8d7da—
--hub-ref-color-red-200#f1aeb5—
--hub-ref-color-red-300#ea868f—
--hub-ref-color-red-400#e35d6a—
--hub-ref-color-red-500#dc3545—
--hub-ref-color-red-600#b02a37—
--hub-ref-color-red-700#842029—
--hub-ref-color-red-800#58151c—
--hub-ref-color-red-900#2c0b0e—
--hub-ref-color-yellow-100#fff3cd—
--hub-ref-color-yellow-200#ffe69c—
--hub-ref-color-yellow-300#ffda6a—
--hub-ref-color-yellow-400#ffcd39—
--hub-ref-color-yellow-500#ffc107—
--hub-ref-color-yellow-600#cc9a06—
--hub-ref-color-yellow-700#997404—
--hub-ref-color-yellow-800#664d03—
--hub-ref-color-yellow-900#332701—
--hub-ref-color-cyan-100#cff4fc—
--hub-ref-color-cyan-200#9eeaf9—
--hub-ref-color-cyan-300#6edff6—
--hub-ref-color-cyan-400#3dd5f3—
--hub-ref-color-cyan-500#0dcaf0—
--hub-ref-color-cyan-600#0aa2c0—
--hub-ref-color-cyan-700#087990—
--hub-ref-color-cyan-800#055160—
--hub-ref-color-cyan-900#032830—
--hub-ref-surface-1#ffffff—
--hub-ref-surface-2#f8f9fa—
--hub-ref-space-00—
--hub-ref-space-10.25rem—
--hub-ref-space-20.5rem—
--hub-ref-space-31rem—
--hub-ref-space-41.5rem—
--hub-ref-space-53rem—
--hub-ref-space-64.5rem—
--hub-ref-space-76rem—
--hub-ref-radius-none0—
--hub-ref-radius-sm0.25rem—
--hub-ref-radius-md0.375rem—
--hub-ref-radius-lg0.5rem—
--hub-ref-radius-pill50rem—
--hub-ref-border-width1px—
--hub-ref-font-family-basesystem-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif—
--hub-ref-font-family-display'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif—
--hub-ref-font-family-monoSFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace—
--hub-ref-font-size-base1rem—
--hub-ref-font-size-xs0.75rem—
--hub-ref-font-size-sm0.875rem—
--hub-ref-font-size-lg1.25rem—
--hub-ref-font-weight-light300—
--hub-ref-font-weight-base400—
--hub-ref-font-weight-medium500—
--hub-ref-font-weight-semibold600—
--hub-ref-font-weight-bold700—
--hub-ref-line-height-base1.5—
--hub-ref-line-height-sm1.25—
--hub-ref-line-height-lg2—
--hub-ref-icon-size1em—

System (--hub-sys-*)

ColorTokenValueResolved
--hub-sys-color-primaryvar(--hub-ref-color-blue-500, #0d6efd)—
--hub-sys-color-secondaryvar(--hub-ref-color-gray-600, #6c757d)—
--hub-sys-color-successvar(--hub-ref-color-green-500, #198754)—
--hub-sys-color-dangervar(--hub-ref-color-red-500, #dc3545)—
--hub-sys-color-warningvar(--hub-ref-color-yellow-500, #ffc107)—
--hub-sys-color-infovar(--hub-ref-color-cyan-500, #0dcaf0)—
--hub-sys-color-neutralvar(--hub-ref-color-gray-600, #6c757d)—
--hub-sys-color-lightvar(--hub-ref-color-gray-100, #f8f9fa)—
--hub-sys-color-darkvar(--hub-ref-color-gray-900, #212529)—
--hub-sys-color-primary-subtlecolor-mix( in oklch, var(--hub-sys-color-primary) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-primary-border-subtlecolor-mix( in oklch, var(--hub-sys-color-primary) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-primary-emphasiscolor-mix( in oklch, var(--hub-sys-color-primary) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-primary-onoklch(from var(--hub-sys-color-primary) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-secondary-subtlecolor-mix( in oklch, var(--hub-sys-color-secondary) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-secondary-border-subtlecolor-mix( in oklch, var(--hub-sys-color-secondary) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-secondary-emphasiscolor-mix( in oklch, var(--hub-sys-color-secondary) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-secondary-onoklch(from var(--hub-sys-color-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-success-subtlecolor-mix( in oklch, var(--hub-sys-color-success) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-success-border-subtlecolor-mix( in oklch, var(--hub-sys-color-success) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-success-emphasiscolor-mix( in oklch, var(--hub-sys-color-success) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-success-onoklch(from var(--hub-sys-color-success) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-danger-subtlecolor-mix( in oklch, var(--hub-sys-color-danger) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-danger-border-subtlecolor-mix( in oklch, var(--hub-sys-color-danger) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-danger-emphasiscolor-mix( in oklch, var(--hub-sys-color-danger) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-danger-onoklch(from var(--hub-sys-color-danger) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-warning-subtlecolor-mix( in oklch, var(--hub-sys-color-warning) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-warning-border-subtlecolor-mix( in oklch, var(--hub-sys-color-warning) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-warning-emphasiscolor-mix( in oklch, var(--hub-sys-color-warning) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-warning-onoklch(from var(--hub-sys-color-warning) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-info-subtlecolor-mix( in oklch, var(--hub-sys-color-info) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-info-border-subtlecolor-mix( in oklch, var(--hub-sys-color-info) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-info-emphasiscolor-mix( in oklch, var(--hub-sys-color-info) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-info-onoklch(from var(--hub-sys-color-info) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-neutral-subtlecolor-mix( in oklch, var(--hub-sys-color-neutral) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-neutral-border-subtlecolor-mix( in oklch, var(--hub-sys-color-neutral) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-neutral-emphasiscolor-mix( in oklch, var(--hub-sys-color-neutral) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-neutral-onoklch(from var(--hub-sys-color-neutral) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-light-subtlecolor-mix( in oklch, var(--hub-sys-color-light) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-light-border-subtlecolor-mix( in oklch, var(--hub-sys-color-light) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-light-emphasiscolor-mix( in oklch, var(--hub-sys-color-light) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-light-onoklch(from var(--hub-sys-color-light) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-dark-subtlecolor-mix( in oklch, var(--hub-sys-color-dark) 12%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-dark-border-subtlecolor-mix( in oklch, var(--hub-sys-color-dark) 35%, var(--hub-sys-surface-page, #fff) )—
--hub-sys-color-dark-emphasiscolor-mix( in oklch, var(--hub-sys-color-dark) 80%, var(--hub-sys-color-ink, #212529) )—
--hub-sys-color-dark-onoklch(from var(--hub-sys-color-dark) clamp(0, (0.62 - l) * 1000, 1) 0 h)—
--hub-sys-color-inkvar(--hub-ref-color-gray-900, #212529)—
--hub-sys-color-brand-defaultvar(--hub-sys-color-primary, #0d6efd)—
--hub-sys-color-brand-on-defaultvar(--hub-ref-color-white, #fff)—
--hub-sys-gradient-1#7c3aed—
--hub-sys-gradient-2#db2777—
--hub-sys-gradient-3#d97706—
--hub-sys-gradient-accentlinear-gradient( 135deg, var(--hub-sys-gradient-1) 0%, var(--hub-sys-gradient-2) 50%, var(--hub-sys-gradient-3) 100% )—
--hub-sys-surface-pagevar(--hub-ref-surface-1, #ffffff)—
--hub-sys-surface-elevatedvar(--hub-ref-surface-2, #f8f9fa)—
--hub-sys-color-surface-defaultvar(--hub-sys-surface-page, #ffffff)—
--hub-sys-color-surface-subtlevar(--hub-sys-surface-elevated, #f8f9fa)—
--hub-sys-text-primaryvar(--hub-ref-color-gray-900, #212529)—
--hub-sys-text-mutedvar(--hub-ref-color-gray-600, #6c757d)—
--hub-sys-color-text-subtlevar(--hub-sys-text-muted, #6c757d)—
--hub-sys-link-colorvar(--hub-sys-color-primary, #0d6efd)—
--hub-sys-link-hover-colorvar(--hub-ref-color-blue-600, #0a58ca)—
--hub-sys-border-color-defaultvar(--hub-ref-color-gray-300, #dee2e6)—
--hub-sys-color-border-subtlevar(--hub-sys-border-color-default, #dee2e6)—
--hub-sys-shadow-sm0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)—
--hub-sys-shadow0 0.5rem 1rem rgba(0, 0, 0, 0.15)—
--hub-sys-shadow-lg0 1rem 3rem rgba(0, 0, 0, 0.175)—
--hub-sys-shadow-insetinset 0 1px 2px rgba(0, 0, 0, 0.075)—
--hub-sys-shadow-nonenone—
--hub-sys-shadow-mdvar(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))—
--hub-sys-radius-nonevar(--hub-ref-radius-none, 0)—
--hub-sys-radius-smvar(--hub-ref-radius-sm, 0.25rem)—
--hub-sys-radius-mdvar(--hub-ref-radius-md, 0.375rem)—
--hub-sys-radius-lgvar(--hub-ref-radius-lg, 0.5rem)—
--hub-sys-radius-pillvar(--hub-ref-radius-pill, 9999px)—
--hub-sys-size-full100%—
--hub-sys-size-autoauto—
--hub-sys-size-minmin-content—
--hub-sys-size-maxmax-content—
--hub-sys-size-fitfit-content—
--hub-sys-size-1-250%—
--hub-sys-size-1-333.333333%—
--hub-sys-size-2-366.666667%—
--hub-sys-size-1-425%—
--hub-sys-size-3-475%—
--hub-sys-container-max-width-sm540px—
--hub-sys-container-max-width-md720px—
--hub-sys-container-max-width-lg960px—
--hub-sys-container-max-width-xl1140px—
--hub-sys-container-max-width-xxl1320px—
--hub-sys-grid-columns12—
--hub-sys-grid-gutter-xvar(--hub-ref-space-4, 1.5rem)—
--hub-sys-grid-gutter-yvar(--hub-ref-space-0, 0)—
--hub-sys-gap-0var(--hub-ref-space-0, 0)—
--hub-sys-gap-1var(--hub-ref-space-1, 0.25rem)—
--hub-sys-gap-2var(--hub-ref-space-2, 0.5rem)—
--hub-sys-gap-3var(--hub-ref-space-3, 1rem)—
--hub-sys-gap-4var(--hub-ref-space-4, 1.5rem)—
--hub-sys-gap-5var(--hub-ref-space-5, 3rem)—
--hub-sys-focus-ring-width0.25rem—
--hub-sys-focus-ring-colorrgba(13, 110, 253, 0.25)—
--hub-sys-focus-ring-offset2px—
--hub-sys-hit-area-min-size44px—
--hub-sys-text-contrast-min4.5—
--hub-sys-zindex-dropdown1000—
--hub-sys-zindex-sticky1020—
--hub-sys-zindex-fixed1030—
--hub-sys-zindex-modal-backdrop1050—
--hub-sys-zindex-modal1055—
--hub-sys-zindex-popover1070—
--hub-sys-zindex-tooltip1080—
--hub-sys-zindex-toast1090—
--hub-sys-breakpoint-xs0—
--hub-sys-breakpoint-sm576px—
--hub-sys-breakpoint-md768px—
--hub-sys-breakpoint-lg992px—
--hub-sys-breakpoint-xl1200px—
--hub-sys-breakpoint-xxl1400px—
--hub-sys-opacity-00—
--hub-sys-opacity-250.25—
--hub-sys-opacity-500.5—
--hub-sys-opacity-750.75—
--hub-sys-opacity-1001—
--hub-sys-opacity-disabled0.65—
--hub-sys-state-hover-bgrgba(0, 0, 0, 0.075)—
--hub-sys-state-active-bgrgba(0, 0, 0, 0.1)—
--hub-sys-state-striped-bgrgba(0, 0, 0, 0.05)—
--hub-sys-transition-fastall 0.15s ease-in-out—
--hub-sys-transition-baseall 0.2s ease-in-out—
--hub-sys-transition-slowall 0.3s ease-in-out—
--hub-sys-transition-fadeopacity 0.15s linear—
--hub-sys-transition-collapseheight 0.35s ease—
--hub-sys-transition-duration-base260ms—
--hub-sys-transition-timing-function-baseease—