@clusterenvision/ui-scss 1.94.3

package/src/themes/_ocean.scss

@@ -0,0 +1,9 @@
+@use "../abstracts/functions" as fn;
+
+.theme-ocean, :root[data-ce-theme="ocean"], :root.theme-ocean {
+  --theme-bg: #{fn.color(ocean-light)};
+  --theme-fg: #{fn.color(ocean-deep)};
+  --theme-accent: #{fn.color(ocean-primary)};
+  --theme-muted: #{fn.color(ocean-muted)};
+  --theme-primary: #{fn.color(ocean-primary)};
+}

package/src/themes/_orange.scss

@@ -0,0 +1,9 @@
+@use "../abstracts/functions" as fn;
+
+.theme-orange, :root[data-ce-theme="orange"], :root.theme-orange {
+  --theme-bg: #{fn.color(orange-50)};
+  --theme-fg: #{fn.color(orange-900)};
+  --theme-accent: #{fn.color(orange)};
+  --theme-muted: #{fn.color(orange-300)};
+  --theme-primary: #{fn.color(ocean-primary)};
+}

package/src/themes/_purple.scss

@@ -0,0 +1,9 @@
+@use "../abstracts/functions" as fn;
+
+.theme-purple, :root[data-ce-theme="purple"], :root.theme-purple {
+  --theme-bg: #{fn.color(purple-50)};
+  --theme-fg: #{fn.color(purple-900)};
+  --theme-accent: #{fn.color(purple)};
+  --theme-muted: #{fn.color(purple-300)};
+  --theme-primary: #{fn.color(purple)};
+}

package/src/themes/_red.scss

@@ -0,0 +1,9 @@
+@use "../abstracts/functions" as fn;
+
+.theme-red, :root[data-ce-theme="red"], :root.theme-red {
+  --theme-bg: #{fn.color(red-50)};
+  --theme-fg: #{fn.color(red-900)};
+  --theme-accent: #{fn.color(red)};
+  --theme-muted: #{fn.color(red-300)};
+  --theme-primary: #{fn.color(red)};
+}

package/src/themes/_skyfade.scss

@@ -0,0 +1,9 @@
+@use "../abstracts/functions" as fn;
+
+.theme-skyfade, :root[data-ce-theme="skyfade"], :root.theme-skyfade {
+  --theme-bg: #{fn.color(skyfade-bg)};
+  --theme-fg: #{fn.color(skyfade-fg)};
+  --theme-accent: #{fn.color(skyfade-primary)};
+  --theme-muted: #{fn.color(skyfade-muted)};
+  --theme-primary: #{fn.color(skyfade-primary)};
+}

package/src/themes/_soft-pastel.scss

@@ -0,0 +1,11 @@
+@use "../abstracts/functions" as fn;
+
+:root.theme-soft-pastel, :root[data-ce-theme="soft-pastel"], .theme-soft-pastel {
+  --theme-bg: #eefcf6;
+  --theme-surface: #ffffff;
+  --theme-fg: #0f172a;
+  --theme-muted: #6b7280;
+  --theme-primary: #10b981;
+  --theme-accent: #10b981;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}

package/src/themes/_solarized.scss

@@ -0,0 +1,9 @@
+@use "../abstracts/functions" as fn;
+
+.theme-solarized, :root[data-ce-theme="solarized"], :root.theme-solarized {
+  --theme-bg: #{fn.color(solar-base3)};
+  --theme-fg: #{fn.color(solar-base00)};
+  --theme-accent: #{fn.color(solar-blue)};
+  --theme-muted: #{fn.color(solar-base1)};
+  --theme-primary: #{fn.color(solar-blue)};
+}

package/src/themes/_standard-dark.scss

@@ -0,0 +1,8 @@
+.theme-standard-dark, :root[data-ce-theme="standard-dark"], :root.theme-standard-dark {
+  --theme-bg: #121212;
+  --theme-fg: #f1f1f1;
+  --theme-primary: #bb86fc;
+  --theme-accent: #3700b3;
+  --theme-muted: #999;
+  --theme-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}

package/src/themes/_standard-default.scss

@@ -0,0 +1,9 @@
+.theme-standard-default, :root[data-ce-theme="standard-default"], :root.theme-standard-default {
+  --theme-bg: #ffffff;
+  --theme-fg: #1a1a1a;
+  --theme-primary: #1a73e8;
+  --theme-accent: #4285f4;
+  --theme-muted: #9aa0a6;
+  --theme-radius: 8px;
+  --theme-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}

package/src/themes/_transparent.scss

@@ -0,0 +1,9 @@
+@use "../abstracts/functions" as fn;
+
+.theme-transparent, :root[data-ce-theme="transparent"], :root.theme-transparent {
+  --theme-bg: transparent;
+  --theme-fg: #{fn.color(dark)};
+  --theme-accent: #{fn.color(primary)};
+  --theme-muted: rgba(0, 0, 0, 0.4);
+  --theme-primary: #{fn.color(primary)};
+}

package/src/themes/_true-dark.scss

@@ -0,0 +1,11 @@
+@use "../abstracts/functions" as fn;
+
+:root.theme-true-dark, :root[data-ce-theme="true-dark"], .theme-true-dark {
+  --theme-bg: #0b0b0f;
+  --theme-surface: #111827;
+  --theme-fg: #e5e7eb;
+  --theme-muted: #9ca3af;
+  --theme-primary: #22d3ee;
+  --theme-accent: #22d3ee;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}

package/src/themes/_warm-neutral.scss

@@ -0,0 +1,11 @@
+@use "../abstracts/functions" as fn;
+
+:root.theme-warm-neutral, :root[data-ce-theme="warm-neutral"], .theme-warm-neutral {
+  --theme-bg: #f7f4f1;
+  --theme-surface: #ffffff;
+  --theme-fg: #1f2933;
+  --theme-muted: #7b8794;
+  --theme-primary: #d97706;
+  --theme-accent: #d97706;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}

package/src/tokens/tokens.json

@@ -0,0 +1,133 @@
+{
+  "version": "1.0.0",
+  "modes": {
+    "light": {
+      "color": {
+        "background": "#f8fafc",
+        "surface": "#ffffff",
+        "text": "#0f172a",
+        "textMuted": "#6b7280",
+        "primary": "#2563eb",
+        "accent": "#2563eb",
+        "border": "#e5e7eb",
+        "focusRing": "#2563eb",
+        "success": "#34a853",
+        "warning": "#f9ab00",
+        "danger": "#ea4335",
+        "info": "#4285f4"
+      }
+    },
+    "dark": {
+      "color": {
+        "background": "#202124",
+        "surface": "#111827",
+        "text": "#ffffff",
+        "textMuted": "#f8f9fa",
+        "primary": "#1a73e8",
+        "accent": "#1a73e8",
+        "border": "#2b2f36",
+        "focusRing": "#1a73e8",
+        "success": "#34a853",
+        "warning": "#f9ab00",
+        "danger": "#ea4335",
+        "info": "#4285f4"
+      }
+    },
+    "high-contrast": {
+      "color": {
+        "background": "#000000",
+        "surface": "#0f1115",
+        "text": "#ffffff",
+        "textMuted": "#cbd5e1",
+        "primary": "#1d4ed8",
+        "accent": "#1d4ed8",
+        "border": "#ffffff",
+        "focusRing": "#ffffff",
+        "success": "#34a853",
+        "warning": "#f9ab00",
+        "danger": "#ea4335",
+        "info": "#4285f4"
+      }
+    }
+  },
+  "tokens": {
+    "spacing": {
+      "0": "0rem",
+      "4": "0.25rem",
+      "8": "0.5rem",
+      "12": "0.75rem",
+      "16": "1rem",
+      "24": "1.5rem",
+      "32": "2rem",
+      "48": "3rem",
+      "64": "4rem"
+    },
+    "radius": {
+      "none": "0",
+      "xs": "2px",
+      "sm": "4px",
+      "md": "8px",
+      "lg": "12px",
+      "xl": "16px",
+      "pill": "10px",
+      "circle": "50%"
+    },
+    "typography": {
+      "fontFamily": "'Inter', system-ui, sans-serif",
+      "fontSize": {
+        "xs": "0.75rem",
+        "sm": "0.875rem",
+        "md": "1rem",
+        "lg": "1.125rem",
+        "xl": "1.25rem",
+        "xxl": "1.5rem"
+      },
+      "fontWeight": {
+        "regular": "400",
+        "medium": "500",
+        "bold": "600"
+      },
+      "lineHeight": {
+        "tight": "1.2",
+        "normal": "1.5",
+        "relaxed": "1.7"
+      }
+    },
+    "density": {
+      "comfortable": "1",
+      "compact": "0.85"
+    },
+    "component": {
+      "button": {
+        "background": "var(--ce-color-primary)",
+        "foreground": "#ffffff",
+        "border": "var(--ce-color-primary)",
+        "radius": "var(--ce-radius-sm)",
+        "paddingY": "var(--ce-space-8)",
+        "paddingX": "var(--ce-space-16)"
+      },
+      "input": {
+        "background": "var(--ce-color-surface)",
+        "foreground": "var(--ce-color-text)",
+        "border": "var(--ce-color-border)",
+        "radius": "var(--ce-radius-sm)",
+        "paddingY": "var(--ce-space-8)",
+        "paddingX": "var(--ce-space-12)"
+      },
+      "card": {
+        "background": "var(--ce-color-surface)",
+        "foreground": "var(--ce-color-text)",
+        "border": "var(--ce-color-border)",
+        "radius": "var(--ce-radius-md)",
+        "shadow": "0 8px 24px rgba(0, 0, 0, 0.08)"
+      },
+      "tooltip": {
+        "background": "var(--ce-color-text)",
+        "foreground": "var(--ce-color-surface)",
+        "radius": "var(--ce-radius-sm)",
+        "paddingY": "var(--ce-space-4)",
+        "paddingX": "var(--ce-space-8)"
+      }
+    }
+  }
+}

package/src/utilities/_display.scss

@@ -0,0 +1,11 @@
+// utilities/_display.scss
+
+.block     { display: block !important; }
+.inline    { display: inline !important; }
+.inline-block { display: inline-block !important; }
+.none      { display: none !important; }
+
+@media (min-width: 768px) {
+  .sm-block  { display: block !important; }
+  .sm-none   { display: none !important; }
+}

package/src/utilities/_flex.scss

@@ -0,0 +1,9 @@
+// utilities/_flex.scss
+
+.flex            { display: flex !important; }
+.flex-column     { flex-direction: column !important; }
+.flex-row        { flex-direction: row !important; }
+.flex-center     { justify-content: center; align-items: center; }
+.justify-between { justify-content: space-between !important; }
+.align-center    { align-items: center !important; }
+.wrap            { flex-wrap: wrap !important; }

package/src/utilities/_position.scss

@@ -0,0 +1,6 @@
+// utilities/_position.scss
+
+.relative  { position: relative !important; }
+.absolute  { position: absolute !important; }
+.fixed     { position: fixed !important; }
+.sticky    { position: sticky !important; }

package/src/utilities/_screen-reader.scss

@@ -0,0 +1,9 @@
+// utilities/_screen-reader.scss
+
+.sr-only {
+  position: absolute !important;
+  height: 1px; width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}

package/src/utilities/_spacing.scss

@@ -0,0 +1,22 @@
+// utilities/_spacing.scss
+@use "../abstracts/variables" as vars;
+
+@each $name, $value in vars.$spacing {
+  .m-#{$name}  { margin: $value !important; }
+  .mt-#{$name} { margin-top: $value !important; }
+  .mb-#{$name} { margin-bottom: $value !important; }
+  .ml-#{$name} { margin-left: $value !important; }
+  .mr-#{$name} { margin-right: $value !important; }
+  .ms-#{$name} { margin-inline-start: $value !important; }
+  .me-#{$name} { margin-inline-end: $value !important; }
+  .mx-#{$name} { margin-inline: $value !important; }
+
+  .p-#{$name}  { padding: $value !important; }
+  .pt-#{$name} { padding-top: $value !important; }
+  .pb-#{$name} { padding-bottom: $value !important; }
+  .pl-#{$name} { padding-left: $value !important; }
+  .pr-#{$name} { padding-right: $value !important; }
+  .ps-#{$name} { padding-inline-start: $value !important; }
+  .pe-#{$name} { padding-inline-end: $value !important; }
+  .px-#{$name} { padding-inline: $value !important; }
+}

package/src/utilities/_text.scss

@@ -0,0 +1,14 @@
+// utilities/_text.scss
+@use "../abstracts/functions" as fn;
+
+.text-left    { text-align: left !important; }
+.text-center  { text-align: center !important; }
+.text-right   { text-align: right !important; }
+
+.text-primary   { color: var(--theme-primary, #{fn.color(primary)}) !important; }
+.text-success   { color: var(--theme-success, #{fn.color(success)}) !important; }
+.text-danger    { color: var(--theme-danger, #{fn.color(danger)}) !important; }
+.text-muted     { color: var(--theme-muted, #{fn.color(muted)}) !important; }
+
+.text-uppercase { text-transform: uppercase !important; }
+.text-lowercase { text-transform: lowercase !important; }

package/src/utilities/_visibility.scss

@@ -0,0 +1,4 @@
+// utilities/_visibility.scss
+
+.visible   { visibility: visible !important; }
+.invisible { visibility: hidden !important; }