@clusterenvision/ui-scss 1.94.3

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@clusterenvision/ui-scss",
+  "version": "1.94.3",
+  "type": "module",
+  "main": "dist/ce-ui.css",
+  "style": "dist/ce-ui.css",
+  "files": [
+    "src/",
+    "dist/",
+    "src/main.scss"
+  ],
+  "scripts": {
+    "build": "npm run build:tokens && sass src/main.scss dist/ce-ui.css && sass src/minimal.scss dist/ce-ui-min.css && npm run build:components",
+    "build:components": "node scripts/build-components.js",
+    "build:minimal": "sass src/minimal.scss dist/ce-ui-min.css",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "npm run build:tokens && vitepress build docs",
+    "docs:serve": "vitepress serve docs",
+    "build:css": "sass src/main.scss tests/public/css/main.css && sass src/main.scss docs/.vitepress/theme/main.css",
+    "build:tokens": "node scripts/generate-tokens.js",
+    "themes:export": "node scripts/export-product-themes.js",
+    "tokens:baseline": "node scripts/update-token-baseline.js",
+    "tokens:diff": "node scripts/token-diff.js",
+    "tokens:diff:check": "node scripts/token-diff.js --check",
+    "tokens:changelog": "node scripts/check-token-changelog.js",
+    "docs:tokens": "node scripts/sync-docs-tokens.js",
+    "lint:tokens": "node scripts/lint-tokens.js",
+    "lint:tokens:update": "node scripts/lint-tokens.js --update-baseline",
+    "lint:rtl": "node scripts/lint-rtl.js",
+    "lint:rtl:update": "node scripts/lint-rtl.js --update-baseline",
+    "test:tokens": "node scripts/generate-tokens.js && node --test tests/tokens/tokens.test.js",
+    "audit:visual": "node scripts/audit-visual-consistency.js",
+    "audit:visual:fix": "node scripts/audit-visual-consistency.js --fix",
+    "analyze:css": "node scripts/analyze-css-bundles.js",
+    "report:css-vars": "node scripts/report-css-vars.js",
+    "check:css-leakage": "node scripts/check-component-css-leakage.js",
+    "vrt:baseline": "npm run build:css && npx playwright test --config tests/visual/playwright.config.ts --update-snapshots",
+    "vrt:test": "npm run build:css && npx playwright test --config tests/visual/playwright.config.ts",
+    "vrt:update": "npm run vrt:baseline",
+    "check:dist": "node scripts/check-dist.js",
+    "ci:check": "npm run check:dist && npm run analyze:css && npm run report:css-vars && npm run check:css-leakage && npm run tokens:diff && npm run tokens:changelog"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "sass": "^1.101.0",
+    "vitepress": "^1.6.4"
+  },
+  "description": "Modular, scalable, reusable SCSS design system for Angular, React, Vue, Blazor, and HTML.",
+  "directories": {
+    "doc": "docs"
+  },
+  "keywords": [
+    "scss",
+    "design-system",
+    "component-library",
+    "responsive",
+    "enterprise"
+  ],
+  "author": "Cluster Envision",
+  "license": "MIT"
+}

package/src/abstracts/_functions.scss

@@ -0,0 +1,34 @@
+// abstracts/_functions.scss
+@use 'variables' as *;
+@use 'sass:map';
+
+@function color($name) {
+  @return map.get($colors, $name);
+}
+
+@function glassy-color($theme, $key) {
+  @return map.get(map.get($glassy-colors, $theme), $key);
+}
+
+
+@function space($size) {
+  @return map.get($spacing, $size);
+}
+
+@function radius($size) {
+  @return map.get($radius, $size);
+}
+
+
+@function shadow($key) {
+  @if map.has-key($shadow, $key) {
+    @return map.get($shadow, $key);
+  }
+
+  @warn "Unknown shadow `#{$key}`. Returning `none`.";
+  @return none;
+}
+
+@function z($layer) {
+  @return map.get($z-index, $layer);
+}

package/src/abstracts/_mixins.scss

@@ -0,0 +1,162 @@
+// abstracts/_mixins.scss
+@use "sass:meta";
+@use "variables" as vars;
+@use "functions" as fn;
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin elevation($size) {
+  box-shadow: vars.shadow($size);
+}
+
+@mixin elevation-token($level) {
+  box-shadow: var(--ce-shadow-#{$level}, #{fn.shadow($level)});
+}
+
+@mixin typography(
+  $size: md,
+  $weight: regular,
+  $line-height: normal,
+  $letter-spacing: null,
+  $family: null
+) {
+  $font-family: var(--ce-typography-font-family, var(--ce-font-family, #{vars.$font-family-base}));
+  @if $family != null {
+    $font-family: $family;
+  }
+
+  $font-size: var(--ce-typography-font-size-#{$size}, #{$size});
+  @if meta.type-of($size) == number {
+    $font-size: $size;
+  }
+
+  $font-weight: var(--ce-typography-font-weight-#{$weight}, #{$weight});
+  @if meta.type-of($weight) == number {
+    $font-weight: $weight;
+  }
+
+  $line-height-val: var(--ce-typography-line-height-#{$line-height}, #{$line-height});
+  @if meta.type-of($line-height) == number {
+    $line-height-val: $line-height;
+  }
+
+  font-family: $font-family;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: $line-height-val;
+  @if $letter-spacing != null {
+    letter-spacing: $letter-spacing;
+  }
+}
+
+@mixin surface(
+  $bg: surface,
+  $text: text,
+  $border: border,
+  $radius: md,
+  $shadow: null
+) {
+  background-color: var(--ce-color-#{$bg}, var(--theme-bg, #{fn.color(white)}));
+  color: var(--ce-color-#{$text}, var(--theme-fg, #{fn.color(dark)}));
+  border: 1px solid var(--ce-color-#{$border}, var(--theme-border, #{fn.color(muted)}));
+  border-radius: var(--ce-radius-#{$radius}, #{fn.radius($radius)});
+  @if $shadow != null {
+    box-shadow: var(--ce-shadow-#{$shadow}, #{fn.shadow($shadow)});
+  }
+}
+
+@mixin state($state) {
+  @if $state == hover {
+    &:hover {
+      @content;
+    }
+  } @else if $state == focus {
+    &:focus-visible {
+      @content;
+    }
+  } @else if $state == active {
+    &:active {
+      @content;
+    }
+  } @else if $state == disabled {
+    &:disabled,
+    &[aria-disabled="true"] {
+      @content;
+    }
+  } @else if $state == loading {
+    &[data-state~="loading"],
+    &[aria-busy="true"] {
+      @content;
+    }
+  } @else {
+    @warn "Unknown state `#{$state}`.";
+  }
+}
+
+@mixin radius($size) {
+  border-radius: vars.radius($size);
+}
+
+@mixin visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
+@mixin media-breakpoint-up($bp) {
+  @if $bp == sm {
+    @media (min-width: 576px) {
+      @content;
+    }
+  } @else if $bp == md {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $bp == lg {
+    @media (min-width: 992px) {
+      @content;
+    }
+  } @else if $bp == xl {
+    @media (min-width: 1200px) {
+      @content;
+    }
+  }
+}
+
+@mixin mintwave-gradient {
+  background: linear-gradient(
+    135deg,
+    #{fn.color(mintwave-blue)},
+    #{fn.color(mintwave-green)}
+  );
+}
+
+@mixin responsive-font($min, $max) {
+  font-size: $min;
+
+  @media (min-width: 768px) {
+    font-size: calc(
+      #{$min} + (#{$max} - #{$min}) * ((100vw - 768px) / (1440 - 768))
+    );
+  }
+
+  @media (min-width: 1440px) {
+    font-size: $max;
+  }
+}
+
+@mixin glassy-surface {
+  background: var(--theme-bg);
+  border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.2));
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  border-radius: var(--theme-radius);
+  box-shadow: var(--theme-shadow);
+}

package/src/abstracts/_placeholders.scss

@@ -0,0 +1,18 @@
+// abstracts/_placeholders.scss
+
+%center-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+%transition {
+  transition: all 0.3s ease-in-out;
+}
+
+%button-reset {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}

package/src/abstracts/_variables.scss

@@ -0,0 +1,413 @@
+// abstracts/_variables.scss
+
+// --------------------------------------
+// Typography
+// --------------------------------------
+$font-family-base: 'Inter', sans-serif;
+$font-size-base: 12px;
+$font-weight-normal: 400;
+$font-weight-bold: 600;
+$line-height-base: 1.5;
+
+// --------------------------------------
+// Color Palette
+// --------------------------------------
+// --------------------------------------
+// Color Palette
+// --------------------------------------
+$colors: (
+  // Primary System Colors
+        primary: #1a73e8,
+        secondary: #fbbc04,
+        success: #34a853,
+        danger: #ea4335,
+        warning: #f9ab00,
+        info: #4285f4,
+
+  // -------------------------------
+  // Base Colors
+  // -------------------------------
+        white: #ffffff,
+        black: #000000,
+        light: #f8f9fa,
+        dark: #202124,
+        muted: #9aa0a6,
+
+  // -------------------------------
+  // Core UI Accent Tokens
+  // -------------------------------
+        accent-blue: #0078d4,
+        accent-blue-strong: #005fa3,
+        accent-blue-soft: #e0eaff,
+        accent-blue-muted: #d0e7ff,
+        accent-rose: #d6336c,
+        accent-rose-soft: #ffe0e0,
+        accent-amber: #ffb700,
+        accent-lime: #2ecc40,
+        neutral-ink: #222222,
+        neutral-mid: #888888,
+        neutral-surface: #f5f7fa,
+        neutral-soft: #f8fafc,
+        neutral-hover: #e6f0ff,
+
+
+  // -------------------------------
+  // Grayscale (WCAG friendly steps)
+  // -------------------------------
+        gray-50: #f9f9f9,
+        gray-100: #f1f3f4,
+        gray-200: #e0e0e0,
+        gray-300: #dadce0,
+        gray-400: #c4c4c4,
+        gray-500: #9e9e9e,
+        gray-600: #70757a,
+        gray-700: #5f6368,
+        gray-800: #3c4043,
+        gray-900: #202124,
+
+  // -------------------------------
+  // Red Scale
+  // -------------------------------
+        red-50: #ffebee,
+        red-100: #ffcdd2,
+        red-200: #ef9a9a,
+        red-300: #e57373,
+        red-400: #ef5350,
+        red-500: #f44336,
+        red-600: #e53935,
+        red-700: #d32f2f,
+        red-800: #c62828,
+        red-900: #b71c1c,
+        red: #ea4335,
+
+  // -------------------------------
+  // Purple Scale
+  // -------------------------------
+        purple-50: #f3e5f5,
+        purple-100: #e1bee7,
+        purple-200: #ce93d8,
+        purple-300: #ba68c8,
+        purple-400: #ab47bc,
+        purple-500: #9c27b0,
+        purple-600: #8e24aa,
+        purple-700: #7b1fa2,
+        purple-800: #6a1b9a,
+        purple-900: #4a148c,
+        purple: #9c27b0,
+
+  // -------------------------------
+  // Yellow Scale
+  // -------------------------------
+        yellow:      #fdd835,
+        yellow-100:  #fff9c4,
+        yellow-300:  #fff176,
+        yellow-500:  #ffeb3b,
+        yellow-700:  #fbc02d,
+
+  // -------------------------------
+  // Orange Scale
+  // -------------------------------
+        orange-50:  #fff3e0,
+        orange-100: #ffe0b2,
+        orange-200: #ffcc80,
+        orange-300: #ffb74d,
+        orange-400: #ffa726,
+        orange-500: #ff9800,
+        orange-600: #fb8c00,
+        orange-700: #f57c00,
+        orange-800: #ef6c00,
+        orange-900: #e65100,
+        orange:     #ff9800,
+
+  // -------------------------------
+  // Solarized Theme
+  // -------------------------------
+        solar-base03:   #002b36,
+        solar-base02:   #073642,
+        solar-base01:   #586e75,
+        solar-base00:   #657b83,
+        solar-base0:    #839496,
+        solar-base1:    #93a1a1,
+        solar-base2:    #eee8d5,
+        solar-base3:    #fdf6e3,
+        solar-yellow:   #b58900,
+        solar-orange:   #cb4b16,
+        solar-red:      #dc322f,
+        solar-magenta:  #d33682,
+        solar-violet:   #6c71c4,
+        solar-blue:     #268bd2,
+        solar-cyan:     #2aa198,
+        solar-green:    #859900,
+
+
+  // -------------------------------
+  // Ocean Theme
+  // -------------------------------
+        ocean-light:     #e0f7fa,
+        ocean-deep:      #006064,
+        ocean-primary:   #00bcd4,
+        ocean-muted:     #4dd0e1,
+
+  // -------------------------------
+  // Forest Theme
+  // -------------------------------
+        forest-light:    #e8f5e9,
+        forest-deep:     #1b5e20,
+        forest-primary:  #4caf50,
+        forest-muted:    #81c784,
+
+  // -------------------------------
+  // macOS Theme
+  // -------------------------------
+        mac-bg:     #f5f5f7,
+        mac-text:   #1d1d1f,
+        mac-accent: #007aff,
+        mac-muted:  #8e8e93,
+
+  // Accessible overlays
+        overlay-light: rgba(255, 255, 255, 0.8),
+        overlay-dark:  rgba(0, 0, 0, 0.6),
+
+  // Alerts
+        alert-success-bg: #e6f4ea,
+        alert-warning-bg: #fff4e5,
+        alert-danger-bg:  #fce8e6,
+
+  // Mintwave Theme
+        mintwave-bg:       #e6f9f6,
+        mintwave-fg:       #003c3c,
+        mintwave-primary:  #00bfa5,
+        mintwave-muted:    #a7d8cc,
+
+  // Mintwave Gradient Options
+        mintwave-blue:     #6dd5ed,
+        mintwave-green:    #00c9a7,
+        mintwave-sky:      #a1f7f0,
+        mintwave-glow:     #c7fcec,
+        mintwave-dark:     #004d4d,
+
+  // -------------------------------
+  // Skyfade Theme Tokens
+  // -------------------------------
+        skyfade-bg:       #f4f9ff,  // 🌤️ soft sky blue background
+        skyfade-fg:       #1e2a38,  // 🖋 rich navy text
+        skyfade-primary:  #3399ff,  // 💧 vibrant sky blue
+        skyfade-muted:    #c8ddee,  // 🌫️ airy bluish gray
+
+  // Optional visual tokens
+        skyfade-glow:     #d6eaff,
+        skyfade-hover:    #e0f0ff,
+        skyfade-border:   #bcd6eb,
+        skyfade-deep:     #005a9c,
+
+  // -------------------------------
+  // Nordwave Theme Colors
+  // -------------------------------
+        nord-bg:      #eceff4,  // 🧊 Snow Storm 1
+        nord-fg:      #2e3440,  // 🌒 Polar Night
+        nord-accent:  #5e81ac,  // 🔷 Arctic blue
+        nord-muted:   #d8dee9,  // ☁️ Snow Storm 2
+
+  // Optional contrast tokens
+        nord-blue:    #81a1c1,
+        nord-cyan:    #8fbcbb,
+        nord-green:   #a3be8c,
+        nord-orange:  #d08770,
+        nord-red:     #bf616a,
+        nord-deep:    #3b4252,
+        nord-border:  #d0d8e0,
+
+);
+
+
+// --------------------------------------
+// Border Radius
+// --------------------------------------
+$radius: (
+        none: 0,
+        xs: 2px,       // Very subtle rounding
+        sm: 4px,       // Common for buttons/input
+        md: 8px,       // Standard cards/dialogs
+        lg: 12px,      // Modals, larger components
+        xl: 16px,      // For deeply rounded containers
+        pill: 10px,  // For pill-shaped tags/buttons
+        circle: 50%    // For avatars or circular buttons
+);
+// _variables.scss
+
+$spacing: (
+        0: 0rem,          // 0px
+        xs: 0.25rem,      // 4px
+        sm: 0.5rem,       // 8px
+        md: 1rem,         // 16px
+        lg: 1.5rem,       // 24px
+        xl: 2rem,         // 32px
+        xxl: 3rem,        // 48px
+        xxxl: 4rem        // 64px
+);
+
+// Optional: numeric tokens for utility classes if needed
+$spacing-numeric: (
+        1: 0.25rem,       // 4px
+        2: 0.5rem,        // 8px
+        3: 1rem,          // 16px
+        4: 1.5rem,        // 24px
+        5: 2rem,          // 32px
+        6: 3rem,          // 48px
+        7: 4rem           // 64px
+);
+
+// You can now use fn.space(sm), fn.space(xl), etc.
+
+
+// --------------------------------------
+// Box Shadows
+// --------------------------------------
+$shadow: (
+        none: none,
+        xs: 0 1px 2px rgba(0, 0, 0, 0.04),
+        sm: 0 1px 3px rgba(0, 0, 0, 0.08),
+        md: 0 4px 6px rgba(0, 0, 0, 0.10),
+        lg: 0 10px 15px rgba(0, 0, 0, 0.15),
+        xl: 0 20px 25px rgba(0, 0, 0, 0.2),
+        xxl: 0 25px 50px rgba(0, 0, 0, 0.25)
+);
+
+// --------------------------------------
+// Z-Index Layers
+// --------------------------------------
+$z-index: (
+        auto: auto,
+        base: 1,
+        dropdown: 1000,
+        sticky: 1020,
+        fixed: 1030,
+        modal: 1050,
+        popover: 1060,
+        toast: 1080,
+        tooltip: 1090
+);
+
+
+$glassy-colors: (
+        glassy-blue: (
+                bg: rgba(0, 120, 255, 0.15),
+                fg: #ffffff,
+                accent: rgba(0, 120, 255, 0.4),
+                primary: #0078ff
+        ),
+        glassy-green: (
+                bg: rgba(46, 204, 113, 0.15),
+                fg: #ffffff,
+                accent: rgba(46, 204, 113, 0.4),
+                primary: #2ecc71
+        ),
+        glassy-purple: (
+                bg: rgba(155, 89, 182, 0.15),
+                fg: #ffffff,
+                accent: rgba(155, 89, 182, 0.4),
+                primary: #9b59b6
+        ),
+        glassy-orange: (
+                bg: rgba(255, 165, 0, 0.15),
+                fg: #000000,
+                accent: rgba(255, 165, 0, 0.4),
+                primary: #ffa500
+        ),
+        glassy-teal: (
+                bg: rgba(0, 128, 128, 0.15),
+                fg: #ffffff,
+                accent: rgba(0, 128, 128, 0.4),
+                primary: #008080
+        ),
+        glassy-pink: (
+                bg: rgba(255, 105, 180, 0.15),
+                fg: #ffffff,
+                accent: rgba(255, 105, 180, 0.35),
+                primary: #ff69b4
+        ),
+        glassy-gold: (
+                bg: rgba(255, 215, 0, 0.15),
+                fg: #000000,
+                accent: rgba(255, 215, 0, 0.3),
+                primary: #ffd700
+        ),
+        glassy-cyan: (
+                bg: rgba(0, 255, 255, 0.15),
+                fg: #000000,
+                accent: rgba(0, 255, 255, 0.35),
+                primary: #00ffff
+        ),
+        glassy-silver: (
+                bg: rgba(192, 192, 192, 0.15),
+                fg: #111111,
+                accent: rgba(192, 192, 192, 0.3),
+                primary: #c0c0c0
+        ),
+        glassy-ice-black: (
+                bg: rgba(0, 0, 0, 0.25),
+                fg: #ffffff,
+                accent: rgba(255, 255, 255, 0.15),
+                primary: #000000
+        ),
+        glassy-aurora-sky: (
+                bg: rgba(135, 206, 250, 0.15),
+                fg: #000000,
+                accent: rgba(135, 206, 250, 0.4),
+                primary: #87cefa
+        ),
+        glassy-emerald-mist: (
+                bg: rgba(0, 250, 154, 0.15),
+                fg: #002e2e,
+                accent: rgba(0, 250, 154, 0.35),
+                primary: #00fa9a
+        ),
+        glassy-neon-cyber: (
+                bg: rgba(57, 255, 20, 0.12),
+                fg: #00ff9f,
+                accent: rgba(57, 255, 20, 0.4),
+                primary: #39ff14
+        ),
+        glassy-sakura-glass: (
+                bg: rgba(255, 182, 193, 0.2),
+                fg: #6e0d25,
+                accent: rgba(255, 182, 193, 0.3),
+                primary: #ffb6c1
+        ),
+        glassy-midnight-blue: (
+                bg: rgba(25, 25, 112, 0.2),
+                fg: #ffffff,
+                accent: rgba(65, 105, 225, 0.3),
+                primary: #191970
+        ),
+        glassy-frosted-silver: (
+                bg: rgba(245, 245, 245, 0.15),
+                fg: #202124,
+                accent: rgba(230, 230, 230, 0.25),
+                primary: #f0f0f0
+        ),
+        glassy-aero-windows: (
+                bg: rgba(180, 200, 255, 0.12),
+                fg: #1a1a1a,
+                accent: rgba(140, 180, 255, 0.3),
+                primary: #90caf9
+        ),
+        glassy-rose-gold: (
+                bg: rgba(255, 192, 203, 0.2),
+                fg: #661e43,
+                accent: rgba(255, 192, 203, 0.3),
+                primary: #b76e79
+        ),
+        glassy-mac-dark: (
+                bg: rgba(29, 29, 31, 0.9),
+                fg: #f5f5f5,
+                accent: rgba(0, 122, 255, 0.4),
+                primary: #007aff
+        ),
+        glassy-glass-white: (
+                bg: rgba(255, 255, 255, 0.12),
+                fg: #000000,
+                accent: rgba(240, 240, 240, 0.4),
+                primary: #ffffff
+        )
+);

package/src/abstracts/_z-index.scss

@@ -0,0 +1,9 @@
+// abstracts/_z-index.scss
+
+$z-index-dropdown: 1000;
+$z-index-sticky: 1020;
+$z-index-fixed: 1030;
+$z-index-modal: 1050;
+$z-index-popover: 1060;
+$z-index-toast: 1080;
+$z-index-tooltip: 1090;

package/src/accessibility/_focus-ring.scss

@@ -0,0 +1,11 @@
+// accessibility/_focus-ring.scss
+@use "../abstracts/functions" as fn;
+
+*:focus {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 2px solid var(--ce-color-focus-ring, var(--theme-accent, #{fn.color(primary)}));
+  outline-offset: 2px;
+}