procode-vs-theme 2.2.0 → 2.4.0

package/dist/src/base/_space.scss

@@ -1,35 +1,55 @@
-// Bootstrap-compatible spacing scale (rem-based)
-$space-0: 0 !default;
-$space-1: 0.25rem !default;
-$space-2: 0.5rem !default;
-$space-3: 1rem !default;
-$space-4: 1.5rem !default;
-$space-5: 3rem !default;
-
-// Legacy spacing aliases
-$space-xs: 2.5px !default;
-$space-sm: 5px !default;
-$space-md: 12.5px !default;
-$space-lg: 16.5px !default;
-$space-xl: 21px !default;
-// Dialog-scale spacing: the outer padding of the larger modals (the column
-// chooser and its siblings), which the xs-xl steps were all too tight for.
-$space-xxl: 28px !default;
-$space-xxxl: 30px !default;
-
-// Spacers map for loop-based utility generation
-$spacers: (
-  0: $space-0,
-  1: $space-1,
-  2: $space-2,
-  3: $space-3,
-  4: $space-4,
-  5: $space-5,
-  xs: $space-xs,
-  sm: $space-sm,
-  md: $space-md,
-  lg: $space-lg,
+// Spacing
+//
+// Restructured to the VARStreet listing-page scale: a strict 4px grid where
+// the index is the multiplier (n × 4px). This replaces the Bootstrap rem
+// ladder, which was non-linear (1rem, 1.5rem, 3rem) and disagreed with the
+// spec from step 3 upward.
+//
+//   0 → 0      1 → 4px    2 → 8px    3 → 12px
+//   4 → 16px   5 → 20px   6 → 24px   8 → 32px
+//
+// Steps 1 and 2 already matched the spec, so the two most-used numeric steps
+// in the consuming app do not move. Steps 6 and 8 are new (--vs-space-6/-8).
+$space-0: 0 !default;
+$space-1: 4px !default;
+$space-2: 10px !default;
+$space-3: 12px !default;
+$space-4: 14px !default;
+$space-5: 16px !default;
+$space-6: 24px !default;
+$space-8: 32px !default;
+
+// T-shirt aliases
+//
+// The same ladder under the names the app already uses. These were previously
+// off-grid half-pixel values (2.5 / 5 / 12.5 / 16.5 / 21 / 28 / 30); each is
+// now the nearest 4px step, so every one moves by 3px or less and the two
+// ladders can no longer drift apart.
+$space-xs: $space-1 !default;    // 2.5px → 4px
+$space-sm: $space-2 !default;    // 5px   → 8px
+$space-md: $space-3 !default;    // 12.5px → 12px
+$space-lg: $space-4 !default;    // 16.5px → 16px
+$space-xl: $space-5 !default;    // 21px  → 20px
+$space-xxl: $space-6 !default;   // 28px  → 24px
+$space-xxxl: $space-8 !default;  // 30px  → 32px
+
+// Spacers map for loop-based utility generation.
+// Keys are the generated class suffixes (qo-gap-*, qo-padding-*, qo-margin-*)
+// and must stay exactly as they are — 6 and 8 are additive.
+$spacers: (
+  0: $space-0,
+  1: $space-1,
+  2: $space-2,
+  3: $space-3,
+  4: $space-4,
+  5: $space-5,
+  6: $space-6,
+  8: $space-8,
+  xs: $space-xs,
+  sm: $space-sm,
+  md: $space-md,
+  lg: $space-lg,
   xl: $space-xl,
   xxl: $space-xxl,
-  xxxl: $space-xxxl,
-) !default;
+  xxxl: $space-xxxl,
+) !default;

package/dist/src/base/_variants.scss

@@ -0,0 +1,128 @@
+@use "sass:color";
+@use "sass:map";
+@use "color" as cl;
+
+// Semantic variants — the single source of truth for every component.
+//
+// Buttons, badges, alerts, inputs and links all loop over this map, so a new
+// semantic colour is added in exactly one place and every component picks it
+// up. Each entry carries the full state set a component needs:
+//
+//   base   fill / border colour at rest
+//   hover  fill at :hover        (−8% lightness unless a token exists)
+//   active fill at :active       (−12% lightness unless a token exists)
+//   on     text colour that sits legibly on `base`
+//   soft   pale tint fill
+//   ink    text colour that sits legibly on `soft`
+//
+// `hover`/`active` are pre-computed here rather than in each component so the
+// two never drift apart, and so a design token (`$text-primary-hover`,
+// `$text-danger-hover`) wins over the computed step wherever one exists.
+
+@function _darken($c, $amount) {
+  @return color.adjust($c, $lightness: -$amount);
+}
+
+$variants: (
+  primary: (
+    base: cl.$background-primary,
+    hover: cl.$text-primary-hover,
+    active: _darken(cl.$background-primary, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-primary-soft,
+    ink: cl.$text-primary,
+  ),
+  secondary: (
+    base: cl.$background-secondary,
+    hover: _darken(cl.$background-secondary, 4%),
+    active: _darken(cl.$background-secondary, 8%),
+    on: cl.$text-dark,
+    soft: cl.$background-secondary,
+    ink: cl.$text-secondary,
+  ),
+  success: (
+    base: cl.$background-success,
+    hover: _darken(cl.$background-success, 8%),
+    active: _darken(cl.$background-success, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-success-soft,
+    ink: cl.$text-success,
+  ),
+  warning: (
+    base: cl.$background-warning,
+    hover: _darken(cl.$background-warning, 8%),
+    active: _darken(cl.$background-warning, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-warning-soft,
+    ink: cl.$text-warning,
+  ),
+  danger: (
+    base: cl.$background-danger,
+    hover: cl.$text-danger-hover,
+    active: _darken(cl.$background-danger, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-danger-soft,
+    ink: cl.$text-danger,
+  ),
+  info: (
+    base: cl.$background-info,
+    hover: _darken(cl.$background-info, 8%),
+    active: _darken(cl.$background-info, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-info-soft,
+    ink: cl.$text-info,
+  ),
+  dark: (
+    base: cl.$background-dark,
+    hover: _darken(cl.$background-dark, 6%),
+    active: _darken(cl.$background-dark, 10%),
+    on: cl.$text-light,
+    soft: cl.$background-secondary,
+    ink: cl.$text-darker,
+  ),
+  light: (
+    base: cl.$background-light,
+    hover: _darken(cl.$background-light, 4%),
+    active: _darken(cl.$background-light, 8%),
+    on: cl.$text-dark,
+    soft: cl.$background-light,
+    ink: cl.$text-dark,
+  ),
+  default: (
+    base: cl.$background-default,
+    hover: cl.$background-secondary,
+    active: _darken(cl.$background-secondary, 4%),
+    on: cl.$text-dark,
+    soft: cl.$background-default,
+    ink: cl.$text-dark,
+  ),
+  tertiary: (
+    base: cl.$background-tertiary,
+    hover: _darken(cl.$background-tertiary, 8%),
+    active: _darken(cl.$background-tertiary, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-tertiary,
+    ink: cl.$text-tertiary,
+  ),
+) !default;
+
+// Status variants — tint-only. These name a *state of a record*, not a
+// component colour, so they get `soft`/`ink` and nothing else: there is no
+// such thing as a solid "system role" button.
+$status-variants: (
+  standard: (soft: cl.$background-primary-soft, ink: cl.$text-custom),
+  lite: (soft: cl.$background-lite-soft, ink: cl.$text-lite),
+  system: (soft: cl.$background-system-soft, ink: cl.$text-system),
+  custom: (soft: cl.$background-custom-soft, ink: cl.$text-custom),
+  active: (soft: cl.$background-success-soft, ink: cl.$text-success),
+) !default;
+
+// Every variant that has a tint, solid or not — what badges and alerts loop.
+$tint-variants: map.merge($variants, $status-variants) !default;
+
+@function v($name, $key) {
+  @return map.get(map.get($variants, $name), $key);
+}
+@function tint($name, $key) {
+  @return map.get(map.get($tint-variants, $name), $key);
+}

package/dist/src/components/_alert.scss

@@ -0,0 +1,83 @@
+@use "sass:map";
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+@use "../base/font" as ft;
+@use "../base/space" as sp;
+@use "../base/variants" as vr;
+
+// Alerts / inline banners
+//
+//   <div class="qo-alert qo-alert-info">
+//     <i class="qo-alert-icon fa-solid fa-circle-info"></i>
+//     Lite User Role cannot be edited.
+//   </div>
+
+.qo-alert {
+  padding: 9px sp.$space-3;
+  display: flex;
+  align-items: center;
+  gap: sp.$space-2;
+  border: bo.$border-width-sm solid transparent;
+  border-radius: bo.$border-radius-sm;
+  background-color: cl.$background-info-soft;
+  color: cl.$text-info;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-sm;
+  font-weight: ft.$font-weight-medium;
+  line-height: ft.$line-height-sm;
+
+  &.qo-alert-block { align-items: flex-start; }
+  &.qo-alert-lg { padding: sp.$space-3 sp.$space-4; font-size: ft.$font-size-md; }
+
+  // Tint fill + ink, for every semantic and status variant.
+  @each $name, $spec in vr.$tint-variants {
+    &.qo-alert-#{$name} {
+      background-color: map.get($spec, soft);
+      color: map.get($spec, ink);
+    }
+  }
+
+  // Outlined form, for a banner that must not read as a filled block.
+  @each $name, $spec in vr.$variants {
+    &.qo-alert-outline-#{$name} {
+      background-color: transparent;
+      border-color: map.get($spec, base);
+      color: map.get($spec, ink);
+    }
+  }
+
+  // Left accent stripe.
+  @each $name, $spec in vr.$variants {
+    &.qo-alert-accent-#{$name} {
+      border-left: bo.$border-width-lg solid map.get($spec, base);
+    }
+  }
+}
+
+.qo-alert-icon {
+  flex: 0 0 auto;
+  font-size: ft.$font-size-lg;
+  line-height: 1;
+}
+
+.qo-alert-title {
+  display: block;
+  margin-bottom: 2px;
+  font-weight: ft.$font-weight-semibold;
+}
+
+// Dismiss affordance — an alert that can be closed needs a real button.
+.qo-alert-close {
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: ft.$font-size-lg;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:hover { opacity: 1; }
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; border-radius: bo.$border-radius-sm; }
+}

package/dist/src/components/_badge.scss

@@ -0,0 +1,100 @@
+@use "sass:map";
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+@use "../base/font" as ft;
+@use "../base/space" as sp;
+@use "../base/size" as sz;
+@use "../base/variants" as vr;
+
+// Badges / pills
+//
+//   <span class="qo-badge qo-badge-success">Active</span>
+//   <span class="qo-badge qo-badge-system">System</span>
+//
+// Tint fill + matching ink by default — that is the listing page's treatment
+// for user type, status and role origin. `qo-badge-solid-*` gives the filled
+// form for the cases that need more weight.
+
+$badge-sizes: (
+  sm: (20px, sp.$space-2, ft.$font-size-xxs),
+  md: (sz.$badge-height, sp.$space-3, ft.$font-size-xs),
+  lg: (28px, sp.$space-3, ft.$font-size-sm),
+) !default;
+
+.qo-badge {
+  min-height: sz.$badge-height;
+  padding: 0 sp.$space-3;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: sp.$space-1;
+  border: bo.$border-width-sm solid transparent;
+  border-radius: bo.$border-radius-pill;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-xs;
+  font-weight: ft.$font-weight-semibold;
+  line-height: 1;
+  white-space: nowrap;
+
+  @each $name, $spec in $badge-sizes {
+    &.qo-badge-#{$name} {
+      min-height: nth($spec, 1);
+      padding: 0 nth($spec, 2);
+      font-size: nth($spec, 3);
+    }
+  }
+
+  &.qo-badge-square { border-radius: bo.$border-radius-sm; }
+  // Status pills sit in a grid column and read better at one width.
+  &.qo-badge-fixed { min-width: 84px; }
+
+  // ---- tint (default) — every semantic and every status ----
+  @each $name, $spec in vr.$tint-variants {
+    &.qo-badge-#{$name} {
+      background-color: map.get($spec, soft);
+      color: map.get($spec, ink);
+    }
+  }
+
+  // ---- solid ----
+  @each $name, $spec in vr.$variants {
+    &.qo-badge-solid-#{$name} {
+      background-color: map.get($spec, base);
+      color: map.get($spec, on);
+    }
+  }
+
+  // ---- outline ----
+  @each $name, $spec in vr.$variants {
+    &.qo-badge-outline-#{$name} {
+      background-color: transparent;
+      border-color: map.get($spec, base);
+      color: map.get($spec, ink);
+    }
+  }
+
+  // A badge used as a filter chip is interactive; everything else is not.
+  &.qo-badge-action {
+    cursor: pointer;
+    transition: filter 0.2s ease, box-shadow 0.2s ease;
+    &:hover { filter: brightness(0.96); }
+    &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
+  }
+}
+
+// A small count bubble — the "3" on a filter button.
+.qo-badge-dot {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: bo.$border-radius-pill;
+  background-color: cl.$background-danger;
+  color: cl.$text-light;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-xxs;
+  font-weight: ft.$font-weight-bold;
+  line-height: 1;
+}