procode-vs-theme 2.0.1 → 2.2.0

package/CHANGELOG.md

@@ -5,6 +5,27 @@ 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

package/dist/src/base/_color.scss

@@ -8,6 +8,8 @@ $text-danger: #f90b0b !default;
 $text-info: #17baff !default;
 $text-default: #808080 !default;
 $text-dark: #464646 !default;
+// One step below $text-dark, for dialog and section headings.
+$text-darker: #333333 !default;
 $text-light: #ffffff !default;
 $text-tertiary: #ed5085 !default;
 $text-placeholder: #808080 !default;

package/dist/src/base/_custom-properties.scss

@@ -14,6 +14,7 @@
   --qo-text-info: #{cl.$text-info};
   --qo-text-default: #{cl.$text-default};
   --qo-text-dark: #{cl.$text-dark};
+  --qo-text-darker: #{cl.$text-darker};
   --qo-text-light: #{cl.$text-light};
   --qo-text-tertiary: #{cl.$text-tertiary};
   --qo-text-placeholder: #{cl.$text-placeholder};
@@ -82,6 +83,8 @@
   --qo-space-md: #{sp.$space-md};
   --qo-space-lg: #{sp.$space-lg};
   --qo-space-xl: #{sp.$space-xl};
+  --qo-space-xxl: #{sp.$space-xxl};
+  --qo-space-xxxl: #{sp.$space-xxxl};
 
   // Border radius
   --qo-border-radius-0: #{bo.$border-radius-0};

package/dist/src/base/_space.scss

@@ -11,7 +11,11 @@ $space-xs: 2.5px !default;
 $space-sm: 5px !default;
 $space-md: 12.5px !default;
 $space-lg: 16.5px !default;
-$space-xl: 21px !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: (
@@ -25,5 +29,7 @@ $spacers: (
   sm: $space-sm,
   md: $space-md,
   lg: $space-lg,
-  xl: $space-xl,
+  xl: $space-xl,
+  xxl: $space-xxl,
+  xxxl: $space-xxxl,
 ) !default;

package/dist/src/utilities/spaces/_gap.scss

@@ -2,7 +2,26 @@
 @use "../../base/mixins/meta-class" as mc;
 
 @each $key, $value in sp.$spacers {
-  @include mc.meta("qo-gap-#{$key}", (gap: $value));
-  @include mc.meta("qo-gap-x-#{$key}", (column-gap: $value));
+  // `--prc-gap-x` is published next to every column gap this file sets, so the
+  // `.prc-cl-N` column system in procode-lowcode-core (>= 2.3.0) can subtract
+  // the row's gap from each column's flex-basis. Without it a column is a flat
+  // percentage of the row and the gap is added on top, so a full row overflows
+  // and shrinks while a partial row does not — and the two rows stop lining up
+  // the moment a gap is set. See ContainerRenderer/styles/index.scss for the
+  // derivation. Anything that is not a column row ignores the property.
+  //
+  // A unitless 0 has to become `0px` first: the columns' `calc()` subtracts
+  // this from a percentage, and a percentage minus a plain number is invalid,
+  // which would drop the declaration and leave the column with no basis.
+  $gap-x: $value;
+  @if $value == 0 {
+    $gap-x: 0px;
+  }
+
+  @include mc.meta("qo-gap-#{$key}", (gap: $value, "--prc-gap-x": $gap-x));
+  @include mc.meta(
+    "qo-gap-x-#{$key}",
+    (column-gap: $value, "--prc-gap-x": $gap-x)
+  );
   @include mc.meta("qo-gap-y-#{$key}", (row-gap: $value));
 }

package/dist/src/utilities/typography/_color.scss

@@ -10,6 +10,7 @@
 @include mc.meta("qo-text-info", (color: cl.$text-info));
 @include mc.meta("qo-text-default", (color: cl.$text-default));
 @include mc.meta("qo-text-dark", (color: cl.$text-dark));
+@include mc.meta("qo-text-darker", (color: cl.$text-darker));
 @include mc.meta("qo-text-light", (color: cl.$text-light));
 @include mc.meta("qo-text-tertiary", (color: cl.$text-tertiary));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "procode-vs-theme",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "VarStreet VS Theme - A comprehensive SCSS theme package for ProCode framework with variables, components, layout, and utilities for flexible design system usage",
   "type": "module",
   "main": "dist/index.js",

package/src/base/_color.scss

@@ -8,6 +8,8 @@ $text-danger: #f90b0b !default;
 $text-info: #17baff !default;
 $text-default: #808080 !default;
 $text-dark: #464646 !default;
+// One step below $text-dark, for dialog and section headings.
+$text-darker: #333333 !default;
 $text-light: #ffffff !default;
 $text-tertiary: #ed5085 !default;
 $text-placeholder: #808080 !default;

package/src/base/_custom-properties.scss

@@ -14,6 +14,7 @@
   --qo-text-info: #{cl.$text-info};
   --qo-text-default: #{cl.$text-default};
   --qo-text-dark: #{cl.$text-dark};
+  --qo-text-darker: #{cl.$text-darker};
   --qo-text-light: #{cl.$text-light};
   --qo-text-tertiary: #{cl.$text-tertiary};
   --qo-text-placeholder: #{cl.$text-placeholder};
@@ -82,6 +83,8 @@
   --qo-space-md: #{sp.$space-md};
   --qo-space-lg: #{sp.$space-lg};
   --qo-space-xl: #{sp.$space-xl};
+  --qo-space-xxl: #{sp.$space-xxl};
+  --qo-space-xxxl: #{sp.$space-xxxl};
 
   // Border radius
   --qo-border-radius-0: #{bo.$border-radius-0};

package/src/base/_space.scss

@@ -11,7 +11,11 @@ $space-xs: 2.5px !default;
 $space-sm: 5px !default;
 $space-md: 12.5px !default;
 $space-lg: 16.5px !default;
-$space-xl: 21px !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: (
@@ -25,5 +29,7 @@ $spacers: (
   sm: $space-sm,
   md: $space-md,
   lg: $space-lg,
-  xl: $space-xl,
+  xl: $space-xl,
+  xxl: $space-xxl,
+  xxxl: $space-xxxl,
 ) !default;

package/src/utilities/spaces/_gap.scss

@@ -2,7 +2,26 @@
 @use "../../base/mixins/meta-class" as mc;
 
 @each $key, $value in sp.$spacers {
-  @include mc.meta("qo-gap-#{$key}", (gap: $value));
-  @include mc.meta("qo-gap-x-#{$key}", (column-gap: $value));
+  // `--prc-gap-x` is published next to every column gap this file sets, so the
+  // `.prc-cl-N` column system in procode-lowcode-core (>= 2.3.0) can subtract
+  // the row's gap from each column's flex-basis. Without it a column is a flat
+  // percentage of the row and the gap is added on top, so a full row overflows
+  // and shrinks while a partial row does not — and the two rows stop lining up
+  // the moment a gap is set. See ContainerRenderer/styles/index.scss for the
+  // derivation. Anything that is not a column row ignores the property.
+  //
+  // A unitless 0 has to become `0px` first: the columns' `calc()` subtracts
+  // this from a percentage, and a percentage minus a plain number is invalid,
+  // which would drop the declaration and leave the column with no basis.
+  $gap-x: $value;
+  @if $value == 0 {
+    $gap-x: 0px;
+  }
+
+  @include mc.meta("qo-gap-#{$key}", (gap: $value, "--prc-gap-x": $gap-x));
+  @include mc.meta(
+    "qo-gap-x-#{$key}",
+    (column-gap: $value, "--prc-gap-x": $gap-x)
+  );
   @include mc.meta("qo-gap-y-#{$key}", (row-gap: $value));
 }

package/src/utilities/typography/_color.scss

@@ -10,6 +10,7 @@
 @include mc.meta("qo-text-info", (color: cl.$text-info));
 @include mc.meta("qo-text-default", (color: cl.$text-default));
 @include mc.meta("qo-text-dark", (color: cl.$text-dark));
+@include mc.meta("qo-text-darker", (color: cl.$text-darker));
 @include mc.meta("qo-text-light", (color: cl.$text-light));
 @include mc.meta("qo-text-tertiary", (color: cl.$text-tertiary));