Design-Tokens

ng-hub-ui basiert auf einem dreischichtigen Token-System: Referenz-Tokens (--hub-ref-*) enthalten die rohen Primitive, System-Tokens (--hub-sys-*) weisen ihnen eine semantische Bedeutung zu, und Komponenten-Tokens begrenzen das Styling pro Komponente. Jedes Token ist eine CSS-Variable, sodass du die gesamte Bibliothek zur Laufzeit neu thematisieren kannst, indem du Werte auf :root oder einem Wrapper überschreibst.

Bibliotheken mit Tokens

Jede Bibliothek deklariert ihre eigenen Komponenten-Tokens (--hub-{präfix}-*). Öffnen Sie eine, um ihre Dokumentation zu sehen.

ng-hub-ui-action-sheet36 Tokens--hub-action-*ng-hub-ui-avatar35 Tokens--hub-avatar-*ng-hub-ui-badges52 Tokens--hub-badge-*--hub-chip-*ng-hub-ui-board75 Tokens--hub-board-*ng-hub-ui-breadcrumbs31 Tokens--hub-breadcrumb-*ng-hub-ui-buttons62 Tokens--hub-btn-*--hub-button-*--hub-dropdown-*--hub-fab-*--hub-speed-*ng-hub-ui-calendar69 Tokens--hub-calendar-*--hub-tooltip-*ng-hub-ui-forms457 Tokens--hub-btn-*--hub-check-*--hub-datepicker-*--hub-daterangepicker-*--hub-field-*--hub-file-*--hub-form-*--hub-icon-*--hub-input-*--hub-label-*--hub-otp-*--hub-overlay-*--hub-segmented-*--hub-select-*--hub-slider-*--hub-switch-*--hub-table-*--hub-textarea-*--hub-timepicker-*ng-hub-ui-icons7 Tokens--hub-icon-*ng-hub-ui-loading28 Tokens--hub-loading-*ng-hub-ui-metrics24 Tokens--hub-meter-*--hub-progress-*--hub-ring-*ng-hub-ui-milestones23 Tokens--hub-milestone-*ng-hub-ui-modal105 Tokens--hub-modal-*ng-hub-ui-nav146 Tokens--hub-nav-*ng-hub-ui-paginable350 Tokens--hub-field-*--hub-filter-*--hub-icon-*--hub-input-*--hub-list-*--hub-paginator-*--hub-select-*--hub-table-*ng-hub-ui-panels172 Tokens--hub-accordion-*--hub-modal-*--hub-panels-*--hub-side-*--hub-tabs-*ng-hub-ui-signature35 Tokens--hub-form-*--hub-input-*--hub-label-*--hub-signature-*ng-hub-ui-skeleton14 Tokens--hub-skeleton-*ng-hub-ui-spreadsheet96 Tokens--hub-input-*--hub-select-*--hub-spreadsheet-*--hub-table-*ng-hub-ui-stepper66 Tokens--hub-stepper-*ng-hub-ui-toast26 Tokens--hub-toast-*ng-hub-ui-utils25 Tokens--hub-btn-*--hub-overlay-*--hub-tooltip-*

Referenz (--hub-ref-*)

FarbeTokenWertAufgelöst
--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-xl1rem—
--hub-ref-radius-xxl2rem—
--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-*)

FarbeTokenWertAufgelöst
--hub-sys-emphasis-lightness-min0—
--hub-sys-emphasis-lightness-max0.45—
--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-emphasisoklch( from var(--hub-sys-color-primary) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-emphasisoklch( from var(--hub-sys-color-secondary) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-emphasisoklch( from var(--hub-sys-color-success) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-emphasisoklch( from var(--hub-sys-color-danger) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-emphasisoklch( from var(--hub-sys-color-warning) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-emphasisoklch( from var(--hub-sys-color-info) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-emphasisoklch( from var(--hub-sys-color-neutral) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-emphasisoklch( from var(--hub-sys-color-light) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-emphasisoklch( from var(--hub-sys-color-dark) clamp(var(--hub-sys-emphasis-lightness-min, 0), l, var(--hub-sys-emphasis-lightness-max, 1)) c h )—
--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-secondarycolor-mix(in srgb, var(--hub-sys-text-primary) 75%, transparent)—
--hub-sys-text-tertiarycolor-mix(in srgb, var(--hub-sys-text-primary) 50%, transparent)—
--hub-sys-text-muted#6a737b—
--hub-sys-color-text-subtlevar(--hub-sys-text-muted, #6a737b)—
--hub-sys-link-colorvar(--hub-sys-color-primary-emphasis, #0a58ca)—
--hub-sys-link-hover-colorcolor-mix(in oklch, var(--hub-sys-link-color) 80%, var(--hub-sys-color-ink, #212529))—
--hub-sys-border-color-defaultvar(--hub-ref-color-gray-300, #dee2e6)—
--hub-sys-color-border-subtlevar(--hub-sys-border-color-default, #dee2e6)—
--hub-sys-border-color-strongcolor-mix( in oklch, var(--hub-sys-text-primary, #212529) 65%, var(--hub-sys-surface-page, #fff) )—
--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-xlvar(--hub-ref-radius-xl, 1rem)—
--hub-sys-radius-xxlvar(--hub-ref-radius-xxl, 2rem)—
--hub-sys-radius-pillvar(--hub-ref-radius-pill, 50rem)—
--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.125rem—
--hub-sys-focus-ring-colorvar(--hub-sys-color-primary-emphasis, #0a58ca)—
--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—