procode-vs-theme 2.2.0 → 2.4.0

package/dist/src/variables.ts

@@ -1,36 +1,39 @@
-// VS Theme Variables Export
-// Provides access to all theme variables and base styles
-
-// Base variables and mixins
-export const colors = './base/_color.scss';
-export const fonts = './base/_font.scss'; 
-export const spacing = './base/_space.scss';
-export const borders = './base/_border.scss';
-export const sizes = './base/_size.scss';
-
-// Mixins
-export const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
-export const fontSizeMixins = './base/mixins/_font_size-mx.scss';
-// All base variables combined
-export const allVariables = [
-  colors,
-  fonts,
-  spacing,
-  borders,
-  sizes,
-  mediaQueryMixins,
-  fontSizeMixins,
-];
-
-export default {
-  colors,
-  fonts,
-  spacing,
-  borders,
-  sizes,
-  mixins: {
-    mediaQuery: mediaQueryMixins,
-    fontSize: fontSizeMixins,
-  },
-  all: allVariables
+// VS Theme Variables Export
+// Provides access to all theme variables and base styles
+
+// Base variables and mixins
+export const colors = './base/_color.scss';
+export const fonts = './base/_font.scss'; 
+export const spacing = './base/_space.scss';
+export const borders = './base/_border.scss';
+export const sizes = './base/_size.scss';
+export const variants = './base/_variants.scss';
+
+// Mixins
+export const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
+export const fontSizeMixins = './base/mixins/_font_size-mx.scss';
+// All base variables combined
+export const allVariables = [
+  colors,
+  fonts,
+  spacing,
+  borders,
+  sizes,
+  variants,
+  mediaQueryMixins,
+  fontSizeMixins,
+];
+
+export default {
+  colors,
+  fonts,
+  spacing,
+  borders,
+  sizes,
+  variants,
+  mixins: {
+    mediaQuery: mediaQueryMixins,
+    fontSize: fontSizeMixins,
+  },
+  all: allVariables
 };

package/dist/types/components.d.ts

@@ -1,13 +1,29 @@
 export declare const buttons = "./components/_buttons.scss";
+export declare const badge = "./components/_badge.scss";
 export declare const input = "./components/_input.scss";
-export declare const placeholder = "./components/_placeholder.scss";
+export declare const link = "./components/_link.scss";
 export declare const cards = "./components/_cards.scss";
+export declare const table = "./components/_table.scss";
+export declare const pagination = "./components/_pagination.scss";
+export declare const tabs = "./components/_tabs.scss";
+export declare const alert = "./components/_alert.scss";
+export declare const page = "./components/_page.scss";
+export declare const placeholder = "./components/_placeholder.scss";
+export declare const disabled = "./components/_disabled.scss";
 export declare const allComponents: string[];
 declare const _default: {
     buttons: string;
+    badge: string;
     input: string;
-    placeholder: string;
+    link: string;
     cards: string;
+    table: string;
+    pagination: string;
+    tabs: string;
+    alert: string;
+    page: string;
+    placeholder: string;
+    disabled: string;
     all: string[];
 };
 export default _default;

package/dist/types/variables.d.ts

@@ -3,6 +3,7 @@ export declare const fonts = "./base/_font.scss";
 export declare const spacing = "./base/_space.scss";
 export declare const borders = "./base/_border.scss";
 export declare const sizes = "./base/_size.scss";
+export declare const variants = "./base/_variants.scss";
 export declare const mediaQueryMixins = "./base/mixins/_media-query-mx.scss";
 export declare const fontSizeMixins = "./base/mixins/_font_size-mx.scss";
 export declare const allVariables: string[];
@@ -12,6 +13,7 @@ declare const _default: {
     spacing: string;
     borders: string;
     sizes: string;
+    variants: string;
     mixins: {
         mediaQuery: string;
         fontSize: string;

package/dist/variables.esm.js

@@ -6,6 +6,7 @@ const fonts = './base/_font.scss';
 const spacing = './base/_space.scss';
 const borders = './base/_border.scss';
 const sizes = './base/_size.scss';
+const variants = './base/_variants.scss';
 // Mixins
 const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
 const fontSizeMixins = './base/mixins/_font_size-mx.scss';
@@ -16,6 +17,7 @@ const allVariables = [
     spacing,
     borders,
     sizes,
+    variants,
     mediaQueryMixins,
     fontSizeMixins,
 ];
@@ -25,6 +27,7 @@ var variables = {
     spacing,
     borders,
     sizes,
+    variants,
     mixins: {
         mediaQuery: mediaQueryMixins,
         fontSize: fontSizeMixins,
@@ -32,5 +35,5 @@ var variables = {
     all: allVariables
 };
 
-export { allVariables, borders, colors, variables as default, fontSizeMixins, fonts, mediaQueryMixins, sizes, spacing };
+export { allVariables, borders, colors, variables as default, fontSizeMixins, fonts, mediaQueryMixins, sizes, spacing, variants };
 //# sourceMappingURL=variables.esm.js.map

package/dist/variables.esm.js.map

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

package/dist/variables.js

@@ -10,6 +10,7 @@ const fonts = './base/_font.scss';
 const spacing = './base/_space.scss';
 const borders = './base/_border.scss';
 const sizes = './base/_size.scss';
+const variants = './base/_variants.scss';
 // Mixins
 const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
 const fontSizeMixins = './base/mixins/_font_size-mx.scss';
@@ -20,6 +21,7 @@ const allVariables = [
     spacing,
     borders,
     sizes,
+    variants,
     mediaQueryMixins,
     fontSizeMixins,
 ];
@@ -29,6 +31,7 @@ var variables = {
     spacing,
     borders,
     sizes,
+    variants,
     mixins: {
         mediaQuery: mediaQueryMixins,
         fontSize: fontSizeMixins,
@@ -45,4 +48,5 @@ exports.fonts = fonts;
 exports.mediaQueryMixins = mediaQueryMixins;
 exports.sizes = sizes;
 exports.spacing = spacing;
+exports.variants = variants;
 //# sourceMappingURL=variables.js.map

package/dist/variables.js.map

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

package/package.json

@@ -1,84 +1,84 @@
-{
-  "name": "procode-vs-theme",
-  "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",
-  "module": "dist/index.esm.js",
-  "types": "dist/types/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "README.md",
-    "CHANGELOG.md"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.js",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./scss": "./src/index.scss",
-    "./styles": "./dist/src/index.scss",
-    "./variables": {
-      "import": "./dist/variables.esm.js",
-      "require": "./dist/variables.js",
-      "types": "./dist/types/variables.d.ts"
-    },
-    "./components": {
-      "import": "./dist/components.esm.js",
-      "require": "./dist/components.js",
-      "types": "./dist/types/components.d.ts"
-    },
-    "./layout": {
-      "import": "./dist/layout.esm.js",
-      "require": "./dist/layout.js",
-      "types": "./dist/types/layout.d.ts"
-    },
-    "./utilities": {
-      "import": "./dist/utilities.esm.js",
-      "require": "./dist/utilities.js",
-      "types": "./dist/types/utilities.d.ts"
-    }
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c --watch",
-    "clean": "rimraf dist",
-    "prebuild": "npm run clean",
-    "prepublishOnly": "npm run build",
-    "postbuild": "node -e \"const fs=require('fs');const path=require('path');function cpR(s,d){fs.mkdirSync(d,{recursive:true});fs.readdirSync(s).forEach(f=>{const sp=path.join(s,f),dp=path.join(d,f);fs.statSync(sp).isDirectory()?cpR(sp,dp):f.endsWith('.scss')&&fs.copyFileSync(sp,dp)});}cpR('src','dist/src');\""
-  },
-  "keywords": [
-    "theme",
-    "scss",
-    "css",
-    "procode",
-    "vs-theme",
-    "ui-theme",
-    "design-system",
-    "varstreet",
-    "styling",
-    "variables",
-    "components",
-    "layout",
-    "utilities",
-    "theme-system",
-    "design-tokens"
-  ],
-  "author": "VarStreet Team",
-  "license": "MIT",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.3",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@types/node": "^18.0.0",
-    "rimraf": "^6.1.3",
-    "rollup": "^4.18.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.38.0",
-    "typescript": "^4.9.3"
-  }
-}
+{
+  "name": "procode-vs-theme",
+  "version": "2.4.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",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./scss": "./src/index.scss",
+    "./styles": "./dist/src/index.scss",
+    "./variables": {
+      "import": "./dist/variables.esm.js",
+      "require": "./dist/variables.js",
+      "types": "./dist/types/variables.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components.esm.js",
+      "require": "./dist/components.js",
+      "types": "./dist/types/components.d.ts"
+    },
+    "./layout": {
+      "import": "./dist/layout.esm.js",
+      "require": "./dist/layout.js",
+      "types": "./dist/types/layout.d.ts"
+    },
+    "./utilities": {
+      "import": "./dist/utilities.esm.js",
+      "require": "./dist/utilities.js",
+      "types": "./dist/types/utilities.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c --watch",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "prepublishOnly": "npm run build",
+    "postbuild": "node -e \"const fs=require('fs');const path=require('path');function cpR(s,d){fs.mkdirSync(d,{recursive:true});fs.readdirSync(s).forEach(f=>{const sp=path.join(s,f),dp=path.join(d,f);fs.statSync(sp).isDirectory()?cpR(sp,dp):f.endsWith('.scss')&&fs.copyFileSync(sp,dp)});}cpR('src','dist/src');\""
+  },
+  "keywords": [
+    "theme",
+    "scss",
+    "css",
+    "procode",
+    "vs-theme",
+    "ui-theme",
+    "design-system",
+    "varstreet",
+    "styling",
+    "variables",
+    "components",
+    "layout",
+    "utilities",
+    "theme-system",
+    "design-tokens"
+  ],
+  "author": "VarStreet Team",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/node": "^18.0.0",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.18.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "sass": "^1.38.0",
+    "typescript": "^4.9.3"
+  }
+}

package/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;

package/src/base/_color.scss

@@ -1,47 +1,106 @@
-@use "sass:color";
-
-$text-primary: #2666e3 !default;
-$text-secondary: #595959 !default;
-$text-success: #5ca224 !default;
-$text-warning: #f39c12 !default;
-$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;
-
-$text-primary-hover: #1c428d !default;
-$text-danger-hover: #af251c !default;
-
-$background-primary: #2666e3 !default;
-$background-secondary: #f4f4f4 !default;
-$background-success: #67b926 !default;
-$background-warning: #f97d0b !default;
-$background-danger: #e74c3c !default;
-$background-info: #17baff !default;
-$background-default: #ffffff !default;
-$background-medium: #29466e !default;
-$background-dark: #0f233d !default;
-$background-dark-a: #0f233d33 !default;
-$background-light: #f7f7f7 !default;
-$background-tertiary: #ed5085 !default;
-$background-lime: #f3de1d !default;
-$background-transparent: color.change(#000000, $alpha: 0.1) !default;
-
-$background-disabled: #d9d9d9 !default;
-
-$border-primary: #2666e3 !default;
-$border-secondary: #c6c6c6 !default;
-$border-success: #67b926 !default;
-$border-warning: #f97d0b !default;
-$border-danger: #e74c3c !default;
-$border-info: #17baff !default;
-$border-light: #e3e3e3 !default;
-$border-dark: #0f233d !default;
-$border-default: #d9d9d9 !default;
-
-$boxshadow-primary: #ababab40 !default;
+@use "sass:color";
+
+// Colour
+//
+// Values are the VARStreet listing-page specification. Names and the
+// $text- / $background- / $border- pattern are unchanged.
+//
+// The spec's neutral ramp is cool (blue-tinted) where the previous one was
+// flat grey, so the greys are restructured as a set rather than individually —
+// mixing the two ramps is what makes a half-rebranded screen look dirty:
+//
+//   #f7f7f7 → #f7f9fc   #f4f4f4 → #f8fafc   #e3e3e3 → #e9edf2
+//   #d9d9d9 → #d9e0e7   #808080 → #7b8492   #595959 → #667085
+//   #464646 → #273142   #333333 → #111827
+//
+// A value marked (derived) has no literal in the spec and is interpolated to
+// keep its group complete; everything else is taken from the spec verbatim.
+
+// ---------- Text ----------
+$text-primary: #1261e8 !default;
+$text-secondary: #667085 !default;
+$text-success: #49a51a !default;
+$text-warning: #ef8a00 !default;
+$text-danger: #ef4444 !default;
+$text-info: #164ea3 !default;
+$text-default: #7b8492 !default;
+$text-dark: #273142 !default;
+// One step below $text-dark, for dialog and section headings.
+$text-darker: #111827 !default;
+$text-light: #ffffff !default;
+$text-tertiary: #ed5085 !default;
+$text-placeholder: #8a94a6 !default;
+
+// Badge / status text. The spec's listing page distinguishes a user tier
+// (lite) and a role origin (system, custom); each pairs with the matching
+// -soft background below.
+$text-lite: #3f8f18 !default;
+$text-system: #7a35d8 !default;
+$text-custom: #0867c9 !default;
+
+$text-primary-hover: #0d4fc4 !default;
+$text-danger-hover: #dc2626 !default; // (derived) darker step of $text-danger
+
+// ---------- Background ----------
+$background-primary: #1261e8 !default;
+$background-secondary: #f8fafc !default;
+$background-success: #49a51a !default;
+$background-warning: #ef8a00 !default;
+$background-danger: #ef4444 !default;
+$background-info: #164ea3 !default;
+$background-default: #ffffff !default;
+$background-medium: #29466e !default;
+$background-dark: #0f233d !default;
+$background-dark-a: #0f233d33 !default;
+$background-light: #f7f9fc !default;
+$background-tertiary: #ed5085 !default;
+$background-lime: #f3de1d !default;
+$background-transparent: color.change(#000000, $alpha: 0.1) !default;
+
+$background-disabled: #d9e0e7 !default;
+
+// Interaction surfaces
+$background-hover: #f8fbff !default; // table row hover
+$background-header: #fbfcfe !default; // grid header row
+
+// ---------- Soft / tint backgrounds ----------
+// Pale fills for badges, banners and icon chips. Each is the low-saturation
+// partner of the solid of the same name.
+$background-primary-soft: #e8f0ff !default;
+$background-success-soft: #ddf2cf !default;
+$background-warning-soft: #fff2df !default;
+$background-danger-soft: #fdecec !default; // (derived) tint of $background-danger
+$background-info-soft: #edf4ff !default;
+$background-lite-soft: #e6f6da !default;
+$background-system-soft: #f0e5ff !default;
+$background-custom-soft: #e3f2ff !default;
+
+// ---------- Border ----------
+$border-primary: #1261e8 !default;
+$border-secondary: #c3ccd6 !default; // (derived) cool equivalent of #c6c6c6
+$border-success: #49a51a !default;
+$border-warning: #ef8a00 !default;
+$border-danger: #ef4444 !default;
+$border-info: #164ea3 !default;
+$border-light: #e9edf2 !default;
+$border-dark: #0f233d !default;
+$border-default: #d9e0e7 !default;
+$border-primary-soft: #d8e5ff !default;
+
+// ---------- Elevation & focus ----------
+// The spec's shadow is a single cool-neutral hue at low alpha. `sm` is the
+// spec value verbatim; the heavier steps are (derived) on the same hue, with
+// alpha and blur rising together so the set reads as one light source.
+$shadow-color: #101828 !default;
+$shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05) !default;
+$shadow-md: 0 4px 8px rgba(16, 24, 40, 0.08) !default;
+$shadow-lg: 0 8px 16px rgba(16, 24, 40, 0.1) !default;
+$shadow-xl: 0 12px 24px rgba(16, 24, 40, 0.12) !default;
+
+// Retained as the shadow *colour* token the box-shadow utilities were built
+// on, so anything referencing it keeps working.
+$boxshadow-primary: rgba(16, 24, 40, 0.05) !default;
+
+// Focus ring — 3px halo in $background-primary at 16%. The stack had no focus
+// token at all before; several screens hand-rolled one.
+$focus-ring: 0 0 0 3px rgba(18, 97, 232, 0.16) !default;