procode-vs-theme 2.1.0 → 2.4.0

package/CHANGELOG.md

@@ -1,46 +1,215 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [2.1.0] - 2026-08-18
-
-> Minor: both entries are additive — new tokens, no existing value changed.
-
-### Added
-- **Dialog-scale spacing: `$space-xxl` (28px) and `$space-xxxl` (30px).** The
-  legacy alias scale topped out at `$space-xl` (21px), which is too tight for
-  the outer padding of the larger modals — the column chooser wanted 28/30 and
-  had nowhere on the scale to get it. Both are in `$spacers`, so the
-  `qo-p-*` / `qo-m-*` / `qo-gap-*` utilities pick them up, and both are exposed
-  as `--qo-space-xxl` / `--qo-space-xxxl`.
-- **`$text-darker` (#333333).** `$text-dark` (#464646) was the darkest text
-  token, but dialog headings in the design sit a step below it — measured off
-  the column-chooser reference screenshot, whose title renders at #333333.
-  Exposed as `--qo-text-darker` and the `qo-text-darker` utility.
-
-  ⚠️ **Cross-package coupling:** `procode-vs-template` now references these in
-  `GridToolBar/scss/index.scss`. An app pinning an older `procode-vs-theme`
-  alongside that vs-template will fail to compile with "Undefined variable".
-  Ship the two together.
-
-## [1.0.0] - 2025-10-08
-
-### Added
-- Initial release of VarStreet VS Theme Package
-- Comprehensive SCSS theme system with modular architecture
-- Multiple export endpoints:
-  - Main theme export for complete theme access
-  - `/variables` for design tokens and theme variables
-  - `/components` for component-specific styling
-  - `/layout` for layout and grid system
-  - `/utilities` for utility classes and helpers
-  - `/scss` and `/styles` for direct SCSS file access
-- Theme configuration interface and utility functions
-- Full TypeScript support with comprehensive type definitions
-- Base styling system with typography, colors, and foundational styles
-- Component-specific styling for buttons, forms, and UI elements
-- Flexible layout system with grid, flexbox, and positioning utilities
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [2.4.0] - 2026-09-11
+
+> Minor and **purely additive at the class level** — 473 new classes, **none
+> removed**. 2.3.0 aligned the *tokens* with the VARStreet listing-page
+> specification; 2.4.0 builds the Bootstrap-shaped **component layer** on top
+> of them, so a screen composes `qo-btn qo-btn-primary` instead of assembling
+> a button out of utilities. Every component carries its own `:hover`,
+> `:active`, `:focus-visible` and `:disabled` states — there are no separate
+> state classes to add.
+
+### Added — `base/_variants.scss`, the single source of truth
+
+Buttons, badges, alerts, cards, links and inputs all loop over one
+`$variants` map. Each entry carries `base` / `hover` / `active` / `on` /
+`soft` / `ink`, so a new semantic colour is declared once and every component
+picks it up. `hover` and `active` are pre-computed there rather than in each
+component, so the two can no longer drift, and a design token
+(`$text-primary-hover`, `$text-danger-hover`) always wins over the computed
+−8 % / −12 % step.
+
+`$status-variants` holds the tint-only entries — `standard`, `lite`,
+`system`, `custom`, `active`. These name *a state of a record*, not a
+component colour: there is no solid "system role" button, so they get `soft`
+and `ink` and nothing else.
+
+### Added — components
+
+| Component | Classes | Notes |
+|---|---|---|
+| Buttons | `qo-btn` + `-<v>`, `-outline-<v>`, `-soft-<v>`, `-link-<v>` | 4 families × 10 variants |
+| Button sizes | `qo-btn-xs\|sm\|md\|lg`, `-icon`, `-full`, `-pill`, `-square` | `-icon` is square at every size |
+| Button group | `qo-btn-group` | Adjacent buttons share one outline |
+| Badges | `qo-badge` + 15 tint, 10 solid, 10 outline variants | `-sm\|md\|lg`, `-square`, `-fixed`, `-action`, `qo-badge-dot` |
+| Forms | `qo-input` (+ `-xs\|sm\|md\|lg`), `qo-select`, `qo-check`, `qo-label`, `qo-help`, `qo-field` | Validation states `-success\|warning\|danger\|info` |
+| Input group | `qo-input-group`, `qo-input-icon-start\|end`, `-search` | Icon is positioned, not padded in by hand |
+| Cards | `qo-card` (+ accent per variant), `qo-card-header\|body\|footer` | `qo-metric-card`, `qo-metric-icon` (any tint), `qo-metrics-grid` |
+| Data grid | `qo-grid-shell`, `qo-grid-scroll`, `qo-table`, `qo-table-header\|filter`, `qo-table-link\|meta\|sort` | `-striped`, `-compact`, `-borderless`, `qo-table-row-locked` |
+| Pagination | `qo-pagination`, `qo-page-btn` (+ `-active`), `qo-page-size` | |
+| Tabs | `qo-tabs` (+ `-sm`, `-pill`), `qo-tab` (+ `-active`) | Underline drawn on `::after` so the tab does not shift 2px when activated |
+| Alerts | `qo-alert` + 15 tint, 10 outline, 10 accent variants | `qo-alert-icon\|title\|close` |
+| Page shell | `qo-page`, `qo-page-header\|title\|subtitle\|action`, `qo-toolbar` (+ `-between`, `-end`, `-wrap`), `qo-toolbar-search` | Responsive at 1200px / 768px per the spec |
+| Links | `qo-link` + per-variant, `-muted`, `-underline`, `-plain` | |
+
+### Added — interaction utilities (`utilities/_interaction.scss`)
+
+- `qo-focusable` applies the theme's single `$focus-ring` to anything;
+  `qo-clickable` is the whole pointer affordance; `qo-hoverable` is elevation-only.
+- `qo-shadow-none|sm|md|lg|xl` — the token-named aliases of `qo-boxshadow-*`.
+- `qo-h-control`, `-control-sm`, `-badge`, `-grid-header`, `-grid-filter`,
+  `-grid-row`, `qo-min-h-control` — so a bare element lines up with a control.
+- `qo-sr-only` — the spec requires icon-only buttons to carry a real label.
+- A `prefers-reduced-motion` block that neutralises every transition the
+  component layer introduces.
+
+### Fixed — two defects that were in the register
+
+- **`qo-btn-danger` was red-on-red.** `color` was `$text-danger` over a
+  `$background-danger` fill. It now uses the variant's `on` colour (white),
+  and `:hover` darkens the fill instead of washing it out to a 6 %-alpha
+  transparency.
+- **`qo-btn-outline-default` had invisible text.** It set `color: $text-light`
+  (white) on a transparent background, so the label only appeared on hover —
+  which stayed hidden because six of its seven uses were icon-only buttons.
+  Outline variants now take the variant's `ink` colour, which is legible on a
+  white page by construction.
+
+### Notes
+
+- **Focus is `:focus-visible`, not `:focus`.** A mouse click does not leave a
+  ring behind, which is why hand-rolled `:focus` rings were being deleted
+  screen by screen. Keyboard focus is never suppressed.
+- **The global `*:disabled` rule still wins.** `components/_disabled.scss`
+  sets `background-color: $background-disabled !important` on every disabled
+  element, so a disabled `qo-btn-primary` renders grey rather than a faded
+  blue. That rule predates this release and was left alone.
+- `qo-select` uses `@extend .qo-input`, and `.qo-input-group` uses `:has()`
+  for its trailing-icon padding — Chrome 105+, Safari 15.4+, Firefox 121+.
+
+## [2.3.0] - 2026-09-11
+
+> Minor, but **every screen changes appearance**. This aligns the theme with the
+> VARStreet listing-page specification (`Resprces/varstreet-listing-page.css`).
+> 48 token values move and 44 tokens are added; **no token or utility class is
+> removed**, so nothing breaks by reference — but sizes, spacing, radii and
+> colours all shift. Read "Behaviour changes" below before adopting.
+
+### Changed — scales restructured as whole ladders
+
+A scale is only coherent if it moves as a set, so where the spec redefined one
+step, the whole ladder was re-derived rather than spot-patched.
+
+- **Font sizes.** The spec supplies six steps (11/12/13/14/18/22) and the ladder
+  has six slots above `xxs`, so each spec value lands on exactly one existing
+  name: `xs` 10→11, `sm` 11→12, `md` 12→13, `lg` **14 (unchanged)**, `xl` 16→18,
+  `xxl` 18→22, `xxs` 8→10. `lg` holding at 14px is what makes this survivable —
+  it is both the most-used step in the consuming app and the spec's body size.
+  `$font-size-base` is added as an explicit alias of `lg`.
+- **Spacing.** Replaced the non-linear Bootstrap rem ladder with the spec's
+  strict 4px grid, where the index is the multiplier: `1`→4px, `2`→8px,
+  `3` 16→12px, `4` 24→16px, `5` 48→20px, plus new `6` (24px) and `8` (32px).
+  Steps 1 and 2 were already correct and do not move.
+  The t-shirt aliases are now the same ladder instead of a parallel off-grid
+  one: `xs` 2.5→4, `sm` 5→8, `md` 12.5→12, `lg` 16.5→16, `xl` 21→20,
+  `xxl` 28→24, `xxxl` 30→32 — every one moves 3px or less.
+- **Border radius.** `sm` 2→4, `md` 4→6, `lg` 16→8 per the spec. `xl` is now
+  16px, which also resolves a latent duplication: `lg` and `xl` were both 16px.
+  `pill` is 999px rather than 50rem (identical rendering).
+- **The neutral ramp is now cool.** The spec's greys are blue-tinted where the
+  previous ones were flat, and mixing the two ramps is what makes a
+  half-rebranded screen look dirty, so they were replaced as a set:
+  `#f7f7f7`→`#f7f9fc`, `#f4f4f4`→`#f8fafc`, `#e3e3e3`→`#e9edf2`,
+  `#d9d9d9`→`#d9e0e7`, `#808080`→`#7b8492`, `#595959`→`#667085`,
+  `#464646`→`#273142`, `#333333`→`#111827`.
+- **Brand and status colours.** primary `#2666e3`→`#1261e8` (hover
+  `#1c428d`→`#0d4fc4`), success `#5ca224`/`#67b926`→`#49a51a`, danger
+  `#f90b0b`/`#e74c3c`→`#ef4444`, warning `#f39c12`/`#f97d0b`→`#ef8a00`, info
+  `#17baff`→`#164ea3`, placeholder `#808080`→`#8a94a6`.
+
+### Added
+
+- **Soft/tint background family** — `$background-{primary,success,warning,danger,info}-soft`
+  plus `-lite-soft`, `-system-soft`, `-custom-soft`, with matching
+  `qo-bg-*-soft` classes. Badges, banners and icon chips had no pale fill to
+  use and were hand-colouring hex values screen by screen.
+- **`$focus-ring`** (`--qo-focus-ring`). The stack had no focus token at all;
+  several screens hand-rolled `box-shadow: 0 0 0 …`.
+- **Shadow tokens** `$shadow-sm|md|lg|xl` (`--qo-shadow-*`) on the spec's
+  cool-neutral hue. The `qo-boxshadow-*` utilities now consume these.
+  `$boxshadow-primary` is retained as the shadow *colour* token.
+- **Component heights** — `$control-height` (40px), `$control-height-sm` (32px),
+  `$grid-header-height` (44px), `$grid-filter-height` (48px),
+  `$grid-row-height` (58px), `$badge-height` (24px).
+- **Badge/status text** `$text-lite`, `$text-system`, `$text-custom` and
+  `$border-primary-soft`, `$background-hover`, `$background-header`.
+- **Missing utility classes** for tokens that already existed but were
+  unreachable from JSON: `qo-border-default`, `qo-bg-disabled`,
+  `qo-text-placeholder`.
+
+### Fixed — values that existed but were never emitted
+
+Eleven SCSS values were declared and then not exposed as custom properties, so
+JSON and inline styles could not reach them. All are now emitted:
+`--qo-line-height-{xxs…xxl}` (+ new `-base`), `--qo-space-xs`,
+`--qo-text-primary-hover`, `--qo-text-danger-hover`, `--qo-bg-lime`,
+`--qo-bg-transparent`, `--qo-menu-size`.
+
+- **`--qo-text-muted` added as an alias of `--qo-text-secondary`.** The
+  consuming app references `--qo-text-muted` in 6 places against a variable the
+  theme never defined, so those declarations silently resolved to nothing.
+
+### Behaviour changes that can break an existing screen
+
+- Any screen using `qo-font-md` / `--qo-font-size-md` gains 1px; `qo-font-xxl`
+  gains 4px. `qo-font-lg` is unaffected.
+- `--qo-space-3` loses 4px and `--qo-space-4` loses 8px — the two heaviest
+  non-matching spacing steps. `--qo-space-5` drops from 48px to 20px, which is
+  the largest single move in this release; check anything using it for layout.
+- `--qo-border-radius-lg` halves (16→8px).
+- **Hardcoded hex values do not follow the tokens.** The consuming app contains
+  675 hardcoded colour literals, led by `#2666e3` ×61 (the old primary),
+  `#464646` ×35 and `#808080` ×22. Until those are swept onto tokens, adopting
+  this version produces a half-rebranded UI. This sweep is the real adoption
+  cost of 2.3.0, not the version bump.
+- Seven further `--qo-*` names are referenced by the app but defined nowhere
+  (`--qo-border-color` ×13, `--qo-border-radius` ×3, `--qo-primary` ×2,
+  `--qo-font-sm` ×2, `--qo-bg-muted` ×2, `--qo-spacing-md` ×1,
+  `--qo-line-height-md` ×1 — the last now resolves). They remain broken and
+  should be corrected app-side.
+
+## [2.1.0] - 2026-08-18
+
+> Minor: both entries are additive — new tokens, no existing value changed.
+
+### Added
+- **Dialog-scale spacing: `$space-xxl` (28px) and `$space-xxxl` (30px).** The
+  legacy alias scale topped out at `$space-xl` (21px), which is too tight for
+  the outer padding of the larger modals — the column chooser wanted 28/30 and
+  had nowhere on the scale to get it. Both are in `$spacers`, so the
+  `qo-p-*` / `qo-m-*` / `qo-gap-*` utilities pick them up, and both are exposed
+  as `--qo-space-xxl` / `--qo-space-xxxl`.
+- **`$text-darker` (#333333).** `$text-dark` (#464646) was the darkest text
+  token, but dialog headings in the design sit a step below it — measured off
+  the column-chooser reference screenshot, whose title renders at #333333.
+  Exposed as `--qo-text-darker` and the `qo-text-darker` utility.
+
+  ⚠️ **Cross-package coupling:** `procode-vs-template` now references these in
+  `GridToolBar/scss/index.scss`. An app pinning an older `procode-vs-theme`
+  alongside that vs-template will fail to compile with "Undefined variable".
+  Ship the two together.
+
+## [1.0.0] - 2025-10-08
+
+### Added
+- Initial release of VarStreet VS Theme Package
+- Comprehensive SCSS theme system with modular architecture
+- Multiple export endpoints:
+  - Main theme export for complete theme access
+  - `/variables` for design tokens and theme variables
+  - `/components` for component-specific styling
+  - `/layout` for layout and grid system
+  - `/utilities` for utility classes and helpers
+  - `/scss` and `/styles` for direct SCSS file access
+- Theme configuration interface and utility functions
+- Full TypeScript support with comprehensive type definitions
+- Base styling system with typography, colors, and foundational styles
+- Component-specific styling for buttons, forms, and UI elements
+- Flexible layout system with grid, flexbox, and positioning utilities
 - Comprehensive utility classes for spacing, colors, and responsive design

package/dist/components.esm.js

@@ -1,23 +1,47 @@
 // VS Theme Components Export
 // Provides access to all component styles
 const buttons = './components/_buttons.scss';
+const badge = './components/_badge.scss';
 const input = './components/_input.scss';
-const placeholder = './components/_placeholder.scss';
+const link = './components/_link.scss';
 const cards = './components/_cards.scss';
+const table = './components/_table.scss';
+const pagination = './components/_pagination.scss';
+const tabs = './components/_tabs.scss';
+const alert = './components/_alert.scss';
+const page = './components/_page.scss';
+const placeholder = './components/_placeholder.scss';
+const disabled = './components/_disabled.scss';
 // All components combined
 const allComponents = [
     buttons,
+    badge,
     input,
+    link,
+    cards,
+    table,
+    pagination,
+    tabs,
+    alert,
+    page,
     placeholder,
-    cards
+    disabled
 ];
 var components = {
     buttons,
+    badge,
     input,
-    placeholder,
+    link,
     cards,
+    table,
+    pagination,
+    tabs,
+    alert,
+    page,
+    placeholder,
+    disabled,
     all: allComponents
 };
 
-export { allComponents, buttons, cards, components as default, input, placeholder };
+export { alert, allComponents, badge, buttons, cards, components as default, disabled, input, link, page, pagination, placeholder, table, tabs };
 //# sourceMappingURL=components.esm.js.map

package/dist/components.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components.js

@@ -5,28 +5,60 @@ Object.defineProperty(exports, '__esModule', { value: true });
 // VS Theme Components Export
 // Provides access to all component styles
 const buttons = './components/_buttons.scss';
+const badge = './components/_badge.scss';
 const input = './components/_input.scss';
-const placeholder = './components/_placeholder.scss';
+const link = './components/_link.scss';
 const cards = './components/_cards.scss';
+const table = './components/_table.scss';
+const pagination = './components/_pagination.scss';
+const tabs = './components/_tabs.scss';
+const alert = './components/_alert.scss';
+const page = './components/_page.scss';
+const placeholder = './components/_placeholder.scss';
+const disabled = './components/_disabled.scss';
 // All components combined
 const allComponents = [
     buttons,
+    badge,
     input,
+    link,
+    cards,
+    table,
+    pagination,
+    tabs,
+    alert,
+    page,
     placeholder,
-    cards
+    disabled
 ];
 var components = {
     buttons,
+    badge,
     input,
-    placeholder,
+    link,
     cards,
+    table,
+    pagination,
+    tabs,
+    alert,
+    page,
+    placeholder,
+    disabled,
     all: allComponents
 };
 
+exports.alert = alert;
 exports.allComponents = allComponents;
+exports.badge = badge;
 exports.buttons = buttons;
 exports.cards = cards;
 exports.default = components;
+exports.disabled = disabled;
 exports.input = input;
+exports.link = link;
+exports.page = page;
+exports.pagination = pagination;
 exports.placeholder = placeholder;
+exports.table = table;
+exports.tabs = tabs;
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.esm.js

@@ -6,6 +6,7 @@ const fonts$1 = './base/_font.scss';
 const spacing$2 = './base/_space.scss';
 const borders$2 = './base/_border.scss';
 const sizes$1 = './base/_size.scss';
+const variants = './base/_variants.scss';
 // Mixins
 const mediaQueryMixins$1 = './base/mixins/_media-query-mx.scss';
 const fontSizeMixins$1 = './base/mixins/_font_size-mx.scss';
@@ -16,6 +17,7 @@ const allVariables = [
     spacing$2,
     borders$2,
     sizes$1,
+    variants,
     mediaQueryMixins$1,
     fontSizeMixins$1,
 ];
@@ -25,6 +27,7 @@ var variables = {
     spacing: spacing$2,
     borders: borders$2,
     sizes: sizes$1,
+    variants,
     mixins: {
         mediaQuery: mediaQueryMixins$1,
         fontSize: fontSizeMixins$1,
@@ -42,7 +45,8 @@ var variables$1 = /*#__PURE__*/Object.freeze({
   fonts: fonts$1,
   mediaQueryMixins: mediaQueryMixins$1,
   sizes: sizes$1,
-  spacing: spacing$2
+  spacing: spacing$2,
+  variants: variants
 });
 
 // VS Theme Base Export
@@ -94,32 +98,64 @@ var baseExports$1 = /*#__PURE__*/Object.freeze({
 // VS Theme Components Export
 // Provides access to all component styles
 const buttons = './components/_buttons.scss';
+const badge = './components/_badge.scss';
 const input = './components/_input.scss';
-const placeholder = './components/_placeholder.scss';
+const link = './components/_link.scss';
 const cards = './components/_cards.scss';
+const table = './components/_table.scss';
+const pagination = './components/_pagination.scss';
+const tabs = './components/_tabs.scss';
+const alert = './components/_alert.scss';
+const page = './components/_page.scss';
+const placeholder = './components/_placeholder.scss';
+const disabled = './components/_disabled.scss';
 // All components combined
 const allComponents = [
     buttons,
+    badge,
     input,
+    link,
+    cards,
+    table,
+    pagination,
+    tabs,
+    alert,
+    page,
     placeholder,
-    cards
+    disabled
 ];
 var components = {
     buttons,
+    badge,
     input,
-    placeholder,
+    link,
     cards,
+    table,
+    pagination,
+    tabs,
+    alert,
+    page,
+    placeholder,
+    disabled,
     all: allComponents
 };
 
 var components$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  alert: alert,
   allComponents: allComponents,
+  badge: badge,
   buttons: buttons,
   cards: cards,
   default: components,
+  disabled: disabled,
   input: input,
-  placeholder: placeholder
+  link: link,
+  page: page,
+  pagination: pagination,
+  placeholder: placeholder,
+  table: table,
+  tabs: tabs
 });
 
 // VS Theme Layout Export  

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -10,6 +10,7 @@ const fonts$1 = './base/_font.scss';
 const spacing$2 = './base/_space.scss';
 const borders$2 = './base/_border.scss';
 const sizes$1 = './base/_size.scss';
+const variants = './base/_variants.scss';
 // Mixins
 const mediaQueryMixins$1 = './base/mixins/_media-query-mx.scss';
 const fontSizeMixins$1 = './base/mixins/_font_size-mx.scss';
@@ -20,6 +21,7 @@ const allVariables = [
     spacing$2,
     borders$2,
     sizes$1,
+    variants,
     mediaQueryMixins$1,
     fontSizeMixins$1,
 ];
@@ -29,6 +31,7 @@ var variables = {
     spacing: spacing$2,
     borders: borders$2,
     sizes: sizes$1,
+    variants,
     mixins: {
         mediaQuery: mediaQueryMixins$1,
         fontSize: fontSizeMixins$1,
@@ -46,7 +49,8 @@ var variables$1 = /*#__PURE__*/Object.freeze({
   fonts: fonts$1,
   mediaQueryMixins: mediaQueryMixins$1,
   sizes: sizes$1,
-  spacing: spacing$2
+  spacing: spacing$2,
+  variants: variants
 });
 
 // VS Theme Base Export
@@ -98,32 +102,64 @@ var baseExports$1 = /*#__PURE__*/Object.freeze({
 // VS Theme Components Export
 // Provides access to all component styles
 const buttons = './components/_buttons.scss';
+const badge = './components/_badge.scss';
 const input = './components/_input.scss';
-const placeholder = './components/_placeholder.scss';
+const link = './components/_link.scss';
 const cards = './components/_cards.scss';
+const table = './components/_table.scss';
+const pagination = './components/_pagination.scss';
+const tabs = './components/_tabs.scss';
+const alert = './components/_alert.scss';
+const page = './components/_page.scss';
+const placeholder = './components/_placeholder.scss';
+const disabled = './components/_disabled.scss';
 // All components combined
 const allComponents = [
     buttons,
+    badge,
     input,
+    link,
+    cards,
+    table,
+    pagination,
+    tabs,
+    alert,
+    page,
     placeholder,
-    cards
+    disabled
 ];
 var components = {
     buttons,
+    badge,
     input,
-    placeholder,
+    link,
     cards,
+    table,
+    pagination,
+    tabs,
+    alert,
+    page,
+    placeholder,
+    disabled,
     all: allComponents
 };
 
 var components$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  alert: alert,
   allComponents: allComponents,
+  badge: badge,
   buttons: buttons,
   cards: cards,
   default: components,
+  disabled: disabled,
   input: input,
-  placeholder: placeholder
+  link: link,
+  page: page,
+  pagination: pagination,
+  placeholder: placeholder,
+  table: table,
+  tabs: tabs
 });
 
 // VS Theme Layout Export  

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/base/_border.scss

@@ -1,12 +1,21 @@
-$border-radius-0: 0 !default;
-$border-radius-sm: 2px !default;
-$border-radius-md: 4px !default;
-$border-radius-lg: 16px !default;
-$border-radius-xl: 1rem !default;
-$border-radius-pill: 50rem !default;
-$border-radius-full: 50% !default;
-
-$border-width-none: 0 !default;
-$border-width-sm: 1px !default;
-$border-width-md: 2px !default;
-$border-width-lg: 4px !default;
+// Border radius
+//
+// Restructured to the VARStreet listing-page scale. The spec gives sm/md/lg as
+// 4/6/8px; `xl` keeps its existing 16px, which also resolves a latent
+// duplication — `lg` and `xl` were both 16px before.
+//
+//   0 → 0      sm → 4px (inputs, filter cells, page buttons)
+//   md → 6px   (cards, panels, buttons, the grid shell)
+//   lg → 8px   xl → 16px   pill → 999px   full → 50%
+$border-radius-0: 0 !default;
+$border-radius-sm: 4px !default;
+$border-radius-md: 6px !default;
+$border-radius-lg: 8px !default;
+$border-radius-xl: 16px !default;
+$border-radius-pill: 999px !default;
+$border-radius-full: 50% !default;
+
+$border-width-none: 0 !default;
+$border-width-sm: 1px !default;
+$border-width-md: 2px !default;
+$border-width-lg: 4px !default;