@snovasys/style-uikit

Published SCSS design system for Snova / TimeChamp apps: tokens, base, utilities, and tc-* object layers — no Tailwind. Consumers import styles/timechamp-uikit.scss (full bundle) or @use individual partials from styles/.

Current version: see package.json in this folder (source) or the built dist/timechamp-style-uikit/package.json after npm run build:lib from the repo root.

Styled components (object partials)

The full bundle styles/timechamp-uikit.scss (in the installed package) pulls every module below in a fixed order. Maintainers: keep this list aligned with @use 'objects/...' in the source timechamp-uikit.scss; the monorepo script npm run check:style-manifest fails if disk and manifest disagree.

Core layers (non-object)

| Layer | File | Role | |-------|------|------| | Tokens | _tokens.scss | CSS variables (colors, shadows, radii, type scale, …) | | Base | _base.scss | Preflight-style defaults, scrollbars | | Utilities | _utilities.scss | tc-scrollable*, tc-focus-ring, etc. |

Object partials — by category

Layout & shell — app frame, overlays, structure

• _layout.scss — tc-shell*, sticky header, sidenav widths, mobile drawer/backdrop
• _page-frame.scss — tc-page*, main container padding / max-width
• _panel.scss — tc-panel*, right-side sheet + backdrop, header/footer chrome
• _splitter.scss — tc-split*, splitter rail

Navigation & wayfinding

• _breadcrumb.scss — tc-breadcrumb*
• _tabs.scss — tc-tabs* (including pill tabs)
• _vertical-nav.scss — vertical tabs / rail
• _sidenav-app.scss — app sidenav (icons, +/-, submenu rail, active states)
• _paginator.scss — tc-paginator*
• _anchor.scss — tc-anchor*
• _shortcut-pills.scss — shortcut date / filter pills

Actions & buttons

• _button.scss — tc-btn*
• _fab.scss — floating action button

Forms & inputs

• _form.scss — tc-field, tc-label, tc-input, tc-textarea, tc-select, sizes, error
• _search.scss — tc-search*
• _checkbox-radio.scss — tc-checkbox, tc-radio
• _toggle.scss — tc-switch
• _segmented.scss — tc-segmented*
• _radio-group.scss — tc-radio-group*
• _labeled-control.scss — tc-labeled-control*
• _otp.scss — tc-otp*
• _range.scss — range slider wrap
• _file.scss — file input shell
• _multi-input.scss — tc-multi* (chips + text — multi-value field shell)
• _select-enhanced.scss — tc-select-wrap* (native <select> + chevron)
• _select-dropdown.scss — tc-select-dd* (custom single-select: trigger, filter row, list; use inside overlay)
• _multi-select-dropdown.scss — tc-multi-dd* (multi-select panel: toolbar, checkbox rows, footer)
• _timepicker.scss — tc-time-field*

Date & filters

• _filter-bar.scss — tc-filter-bar* (date-filters row)
• _datepicker-trigger.scss — tc-date-row*, tc-date-trigger*, tc-date-range-trigger*
• _calendar-grid.scss — tc-cal*, tc-cal-week* (datepicker popover body)
• _range-datepicker.scss — tc-range-cal* (range popover shell)

Menus, popovers, overlays

• _dropdown.scss — tc-menu*, tc-dropdown*
• _popover.scss — tc-popover* (anchored panel shell)
• _custom-dropdown.scss — tc-custom-dropdown* (profile / anchored panel — sat-popover content only; no positioning SCSS in kit)
• _action-list.scss — tc-action-list*
• _toast.scss — tc-toast*
• _tooltip.scss — tc-tip + data-tc-tooltip

Data display

• _table.scss — tc-table*
• _table-custom-header.scss — tc-table-custom* (sticky header / leading columns)
• _table-tree.scss — tree table indent column
• _hierarchy-tree.scss — tc-tree*
• _heatmap.scss — tc-heat-*
• _skeleton.scss — tc-skeleton* (incl. table placeholder)
• _dl.scss — tc-dl*

Cards, media, chips

• _card.scss — tc-card*
• _badge.scss — tc-badge*
• _chip.scss — tc-chip*
• _avatar.scss — tc-avatar*
• _avatar-group.scss — tc-avatar-group*
• _user-media.scss — tc-user-media*
• _media-object.scss — media object layout
• _status-dot.scss — user / record status dots

Feedback & chrome

• _divider.scss — tc-divider*
• _feedback.scss — empty state, tc-inline-error, alerts
• _banner.scss — announcement bar
• _loader.scss — loading spinners
• _progress.scss — tc-progress*
• _kbd-code.scss — tc-code, kbd, pre

KPIs, charts, analytics shells

• _kpi.scss, _kpi-custom.scss — KPI cards
• _stat-inline.scss — inline metric strip
• _chart-host.scss — chart mount (e.g. Apex)
• _chart-legend.scss — legend swatches
• _gauge-host.scss — donut / gauge mount
• _stacked-bar.scss — stacked segment bar
• _leave-strip.scss — leave / timeline strip
• _divergence-bar.scss — divergence bar
• _comms-progress.scss — labeled progress row
• _rating.scss — star rating

Editor & communication

• _editor-chrome.scss — rich text toolbar + emoji panel shell
• _chat-bubble.scss — chat rows / bubbles
• _call-card.scss, _email-compose.scss — comms layouts
• _timeline-list.scss — timeline list
• _toolbar.scss — page toolbar

Typography

• _typography.scss — tc-text* utilities

Accordion & steps

• _accordion.scss — tc-accordion*
• _stepper.scss — tc-stepper*

Settings

• _setting-row.scss — settings list rows

For class-by-class reference, use the monorepo’s docs/CLASS_CATALOG.md. For Snova Smart-* → partial mapping, use docs/STYLE_INVENTORY.md. Overlay positioning (sat-popover, CDK) is app-owned; this package styles inner tc-* markup only.

Latest release notes

Full version history lives in the source monorepo at docs/CHANGELOG.md (not included in the npm tarball — clone the TimeChamp-UI-Kit repo or check your internal mirror).

0.0.11 (summary):

• Showcase only: Style gallery reference sidenav — App shell is the only expanded top-level group by default; scroll-spy still opens the group for the active section.

0.0.10 (summary):

• Banner: Slim bar tokens + optional tc-banner__cta pill.
• Breadcrumb: > separators (default), tc-breadcrumb--slash for /; neutral gray trail + primary on hover.
• Layout: tc-app-header__breadcrumbs typography aligned with page breadcrumbs.

0.0.9 (summary):

• Objects: tc-select-dd* (custom single-select), tc-multi-dd* (multi-select panel); panel header/footer chrome; sidenav scroll-spy + parent/child highlight classes; layout shell scroll lock, icon-rail / peek / mobile drawer.
• Docs & tooling: README styled-component inventory; build:lib prints object partial count; PARITY_QA / STYLES_PACKAGE / STYLE_INVENTORY updates for sat-popover and select parity.

0.0.8 (summary):

• Range datepicker: objects/_range-datepicker.scss (tc-range-cal*) + gallery #tc-date-filter-range interactive demo (Snova smart-range-datepicker shell).

0.0.7 (tooling / docs):

• Tooling: npm run build:lib / build:all echo version + matching docs/CHANGELOG.md section; npm run rebuild:gallery-shell for the reference gallery nav.
• Docs: Root / package README and CODE_SKELETON.md aligned with release workflow.

0.0.6 (styles): tc-custom-dropdown*, tc-table-custom*, editor emoji shell + gallery sections; token / Snova parity pass (shadows, type scale, segmented, toggles, date triggers, object partials).

Install

npm install @snovasys/style-uikit

Usage

Angular angular.json:

"styles": [
  "node_modules/@snovasys/style-uikit/styles/timechamp-uikit.scss"
]

Dark mode: add class dark on html.

More documentation (in the monorepo, not on npm): docs/CLASS_CATALOG.md, docs/STYLES_PACKAGE.md, docs/UPGRADING.md.

Build (maintainers)

From monorepo root:

| Command | Purpose | |--------|---------| | npm run build:lib | Prints this version’s CHANGELOG section and object partial count (see console), then builds the library into dist/timechamp-style-uikit/. | | npm run build:all | Same pre-log, then library + showcase app. | | npm run publish:lib | Build + npm publish from dist/timechamp-style-uikit. |

Gallery shell: to regenerate the reference sidenav block in the showcase, run npm run rebuild:gallery-shell (see tools/rebuild-gallery-shell.mjs).

Angular API

The library entry (public-api.ts) is a minimal stub; the product is the published styles/ tree. Optional Angular components belong in consuming apps or a separate behavioral package.