@clusterenvision/ui-scss 1.94.3

package/src/accessibility/_theme-switcher.scss

@@ -0,0 +1,41 @@
+// accessibility/_theme-switcher.scss
+@use "../abstracts/functions" as fn;
+
+.theme-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: fn.space(xs);
+
+  label {
+    font-weight: 500;
+    color: var(--theme-fg);
+  }
+
+  button,
+  select {
+    background-color: fn.color(light);
+    border: 1px solid fn.color(muted);
+    padding: fn.space(xs);
+    font-family: inherit;
+    font-size: 1rem;
+    color: var(--theme-fg);
+    border-radius: fn.radius(sm);
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  button:hover,
+  select:hover {
+    background-color: fn.color(primary);
+    color: fn.color(white);
+  }
+
+  select {
+    appearance: none; // removes native arrow in most browsers
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right fn.space(xs) center;
+    background-size: 1rem;
+    padding-right: 2rem; // space for arrow
+  }
+}

package/src/base/_animations.scss

@@ -0,0 +1,32 @@
+// base/_animations.scss
+// Fade
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+// Slide
+@keyframes slide-up {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+
+@keyframes slide-down {
+  from { transform: translateY(-100%); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
+}
+
+// Spin (loader)
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// Utility mixin for applying fade
+@mixin animate-fade($duration: .3s, $ease: ease-in-out) {
+  animation: fade-in $duration $ease both;
+}

package/src/base/_forms.scss

@@ -0,0 +1,62 @@
+// base/_forms.scss
+@use "../abstracts/functions" as fn;
+@use "../abstracts/mixins"    as mx;
+@use "../abstracts/variables" as vars;
+@use "../abstracts/placeholders" as px;
+input,
+textarea,
+select {
+  width: var(--ce-form-control-width, 100%);
+  padding: var(
+    --ce-form-control-padding,
+    #{fn.space(sm)} #{fn.space(md)}
+  );
+  border-width: var(--ce-form-control-border-width, 1px);
+  border-style: var(--ce-form-control-border-style, solid);
+  border-color: var(--ce-form-control-border-color, #{fn.color(muted)});
+  border-radius: var(--ce-form-control-radius, #{fn.radius(sm)});
+  background-color: var(--ce-form-control-bg, #{fn.color(white)});
+  color: var(--ce-form-control-color, #{fn.color(dark)});
+  @extend %transition !optional;
+
+  &:focus {
+    border-color: var(--ce-form-control-focus-border, #{fn.color(primary)});
+    outline: var(--ce-form-control-focus-outline, none);
+    box-shadow: var(
+      --ce-form-control-focus-shadow,
+      0 0 0 3px rgba(fn.color(primary), .2)
+    );
+  }
+
+  &:disabled {
+    background-color: var(
+      --ce-form-control-disabled-bg,
+      #{fn.color(light)}
+    );
+    color: var(--ce-form-control-disabled-color, #{fn.color(muted)});
+    cursor: var(--ce-form-control-disabled-cursor, not-allowed);
+  }
+}
+
+label {
+  display: var(--ce-form-label-display, inline-block);
+  margin-bottom: var(--ce-form-label-margin, #{fn.space(xs)});
+  font-weight: var(--ce-form-label-weight, #{vars.$font-weight-bold});
+}
+
+.form-control--error {
+  border-color: var(--ce-form-control-error-border, #{fn.color(danger)});
+
+  &:focus {
+    box-shadow: var(
+      --ce-form-control-error-shadow,
+      0 0 0 3px rgba(fn.color(danger), .2)
+    );
+  }
+}
+
+.form-error-msg {
+  margin-top: var(--ce-form-error-margin, #{fn.space(xs)});
+  color: var(--ce-form-error-color, #{fn.color(danger)});
+  font-size: var(--ce-form-error-size, 0.875rem);
+}

package/src/base/_reset.scss

@@ -0,0 +1,102 @@
+// base/_reset.scss
+@use '../abstracts/variables' as vars;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  line-height: vars.$line-height-base;
+}
+
+// 2. Remove default link underlines—handled via utility classes instead
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+// 3. Images & media scale down, never overflow
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+}
+
+// 4. Remove list style
+ol,
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+// 5. Buttons & inputs inherit font
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+// 6. Use a sensible default font stack
+html {
+  font-family: vars.$font-family-base;
+  font-size: vars.$font-size-base;
+  -webkit-text-size-adjust: 100%;
+  size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  min-height: 100%;
+  background-color: var(--ce-color-background, var(--theme-bg, #ffffff));
+  color: var(--ce-color-text, var(--theme-fg, #202124));
+}
+
+html,
+body {
+  height: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--ce-color-border, var(--theme-border, #e5e7eb));
+}

package/src/base/_theme-base.scss

@@ -0,0 +1,162 @@
+
+
+:root {
+  --ce-color-background: var(--theme-bg, #ffffff);
+  --ce-color-surface: var(--theme-surface, var(--theme-bg, #ffffff));
+  --ce-color-text: var(--theme-fg, #202124);
+  --ce-color-text-muted: var(--theme-muted, #6c757d);
+  --ce-color-primary: var(--theme-primary, #1a73e8);
+  --ce-color-accent: var(--theme-accent, var(--ce-color-primary));
+  --ce-color-border: var(--theme-border, #e5e7eb);
+  --ce-color-focus-ring: var(--theme-accent, var(--ce-color-primary));
+  --ce-font-family: var(--theme-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
+  --ce-font-size-base: var(--font-size-base, 15px);
+  --ce-font-size-sm: var(--font-size-sm, 0.875rem);
+  --ce-font-size-md: var(--font-size-md, 1rem);
+  --ce-font-size-lg: var(--font-size-lg, 1.125rem);
+  --ce-font-weight-regular: var(--font-weight-regular, 400);
+  --ce-font-weight-medium: var(--font-weight-medium, 500);
+  --ce-font-weight-semibold: var(--font-weight-semibold, 600);
+  --ce-direction: ltr;
+  --ce-inline-start: left;
+  --ce-inline-end: right;
+  --ce-text-align-start: left;
+  --ce-text-align-end: right;
+
+  --theme-surface: var(--theme-bg, #ffffff);
+  --text-primary: var(--ce-color-text, var(--theme-fg, #202124));
+  --text-muted: var(--ce-color-text-muted, var(--theme-muted, #6c757d));
+  --font-size-base: var(--ce-font-size-base, 15px);
+  --font-size-sm: var(--ce-font-size-sm, 0.875rem);
+  --font-size-md: var(--ce-font-size-md, 1rem);
+  --font-size-lg: var(--ce-font-size-lg, 1.125rem);
+  --font-weight-regular: var(--ce-font-weight-regular, 400);
+  --font-weight-medium: var(--ce-font-weight-medium, 500);
+  --font-weight-semibold: var(--ce-font-weight-semibold, 600);
+  --icon-filter: brightness(0) saturate(100%);
+  --ce-motion-duration-xxs: 80ms;
+  --ce-motion-duration-xs: 120ms;
+  --ce-motion-duration-sm: 180ms;
+  --ce-motion-duration-md: 240ms;
+  --ce-motion-duration-lg: 320ms;
+  --ce-motion-duration-xl: 420ms;
+  --ce-motion-ease-linear: linear;
+  --ce-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ce-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+  --ce-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ce-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+}
+
+[dir="rtl"],
+[data-ce-dir="rtl"] {
+  --ce-direction: rtl;
+  --ce-inline-start: right;
+  --ce-inline-end: left;
+  --ce-text-align-start: right;
+  --ce-text-align-end: left;
+}
+
+body {
+  font-family: var(--ce-font-family, var(--theme-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif));
+  background-color: var(--ce-color-background, var(--theme-bg, #ffffff));
+  color: var(--text-primary);
+  font-size: var(--font-size-base);
+  line-height: 1.5;
+  transition:
+    background-color var(--ce-motion-duration-md) var(--ce-motion-ease-standard),
+    color var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+}
+
+button,
+input,
+textarea,
+select {
+  font-family: var(--ce-font-family, var(--theme-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif));
+  color: var(--text-primary);
+  transition:
+    background-color var(--ce-motion-duration-md) var(--ce-motion-ease-standard),
+    color var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+}
+
+a {
+  color: var(--ce-color-accent, var(--theme-accent, var(--theme-primary)));
+  text-decoration: none;
+  transition: color var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+
+  &:hover,
+  &:focus {
+    color: var(--ce-color-primary, var(--theme-primary));
+    text-decoration: underline;
+  }
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--ce-spacing-xl, 2rem);
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--ce-spacing-xl, 2rem);
+}
+
+button {
+  border: none;
+  padding: var(--ce-button-padding, var(--ce-spacing-sm, 0.5rem) var(--ce-spacing-md, 1rem));
+  border-radius: var(--theme-radius, 6px);
+  cursor: pointer;
+  font-weight: 400;
+  transition:
+    background-color var(--ce-motion-duration-md) var(--ce-motion-ease-standard),
+    color var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+  background-color: var(--ce-color-accent, var(--theme-accent));
+  color: var(--ce-color-text, var(--theme-fg));
+
+  &:hover {
+    background-color: var(--ce-color-accent, var(--theme-accent));
+  }
+}
+
+input,
+textarea,
+select {
+  border: 1px solid var(--ce-color-border, var(--theme-muted, #ccc));
+  padding: var(--ce-spacing-sm, 0.5rem);
+  border-radius: var(--theme-radius, 6px);
+  transition: all var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--ce-color-accent, var(--theme-accent));
+  outline: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+  color: var(--text-primary);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-accent {
+  color: var(--ce-color-accent, var(--theme-accent));
+}
+
+.bg-primary {
+  background-color: var(--ce-color-primary, var(--theme-primary));
+  color: var(--ce-color-text, var(--theme-fg));
+}
+
+.border {
+  border: 1px solid var(--ce-color-border, var(--theme-muted, #ccc));
+  border-radius: var(--theme-radius, 6px);
+}
+
+body::after {
+  display: none;
+}

package/src/base/_typography.scss

@@ -0,0 +1,38 @@
+// base/_typography.scss
+@use '../abstracts/variables' as vars;
+@use "../abstracts/functions" as fn;
+@use "../abstracts/mixins"    as mx;
+
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  font-weight: vars.$font-weight-bold;
+  color: var(--text-primary, #{fn.color(dark)});
+  line-height: 1.2;
+  margin-bottom: fn.space(md);
+}
+
+h1 { @include mx.responsive-font(2.5rem, 4rem); }
+h2 { @include mx.responsive-font(2rem,   3rem); }
+h3 { @include mx.responsive-font(1.75rem,2.25rem); }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+
+p {
+  margin-bottom: fn.space(md);
+  color: var(--text-primary, #{fn.color(dark)});
+}
+
+small,
+.text--small {
+  font-size: 0.875rem;
+  color: var(--text-muted, #{fn.color(muted)});
+}
+
+// Utility classes
+.text-center   { text-align: center; }
+.text-right    { text-align: right; }
+.text-primary  { color: var(--theme-primary, #{fn.color(primary)}); }
+.text-secondary{ color: var(--theme-secondary, #{fn.color(secondary)}); }
+.text-danger   { color: var(--theme-danger, #{fn.color(danger)}); }
+.text-muted    { color: var(--text-muted, #{fn.color(muted)}); }

package/src/components/advanced/_calendar.scss

@@ -0,0 +1,47 @@
+// components/advanced/_calendar.scss
+
+@use "../../abstracts/functions" as fn;
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: fn.space(xs);
+  font-size: 0.85rem;
+
+  .day {
+    text-align: center;
+    padding: fn.space(sm);
+    border-radius: fn.radius(sm);
+    background-color: fn.color(white);
+    cursor: pointer;
+    transition: 0.2s;
+
+    &:hover {
+      background-color: fn.color(light);
+    }
+
+    &--today {
+      border: 1px solid fn.color(primary);
+    }
+
+    &--selected {
+      background-color: fn.color(primary);
+      color: fn.color(white);
+    }
+
+    &--disabled {
+      color: fn.color(muted);
+      pointer-events: none;
+    }
+  }
+
+  .weekdays {
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    grid-column: span 7;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: fn.space(xs);
+  }
+}

package/src/components/advanced/_carousel.scss

@@ -0,0 +1,87 @@
+// components/advanced/_carousel.scss
+
+@use "../../abstracts/functions" as fn;
+
+.carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--ce-carousel-radius, #{fn.radius(md)});
+  background-color: var(--ce-carousel-bg, var(--theme-carousel-bg, var(--theme-surface, #{fn.color(light)})));
+  box-shadow: var(--ce-carousel-shadow, none);
+  color: var(--ce-carousel-color, inherit);
+
+  &__track {
+    display: flex;
+    transition: transform var(--ce-carousel-track-duration, 0.5s)
+      var(--ce-carousel-track-ease, ease-in-out);
+    will-change: transform;
+  }
+
+  &__slide {
+    min-width: 100%;
+    flex-shrink: 0;
+    padding: var(--ce-carousel-slide-padding, #{fn.space(lg)});
+    background: var(
+      --ce-carousel-slide-bg,
+      var(--theme-carousel-slide-bg, var(--theme-surface, #{fn.color(light)}))
+    );
+    color: var(
+      --ce-carousel-slide-color,
+      var(--theme-carousel-slide-fg, var(--theme-fg, #{fn.color(dark)}))
+    );
+  }
+
+  &__controls {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    transform: translateY(-50%);
+    padding: var(--ce-carousel-controls-padding, 0 #{fn.space(md)});
+    pointer-events: none;
+
+    button {
+      background: var(--ce-carousel-btn-bg, var(--theme-carousel-btn-bg, rgba(0, 0, 0, 0.4)));
+      border: none;
+      border-radius: var(--ce-carousel-btn-radius, #{fn.radius(circle)});
+      color: var(--ce-carousel-btn-color, var(--theme-carousel-btn-fg, #{fn.color(white)}));
+      font-size: var(--ce-carousel-btn-size, 1.25rem);
+      cursor: var(--ce-carousel-btn-cursor, pointer);
+      padding: var(--ce-carousel-btn-padding, #{fn.space(xs)});
+      pointer-events: auto;
+
+      &:hover {
+        background: var(
+          --ce-carousel-btn-hover-bg,
+          var(--theme-carousel-btn-hover, var(--theme-accent, #{fn.color(primary)}))
+        );
+      }
+    }
+  }
+
+  &__indicators {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--ce-carousel-indicators-margin, #{fn.space(md)});
+
+    .dot {
+      width: var(--ce-carousel-dot-size, 0.75rem);
+      height: var(--ce-carousel-dot-size, 0.75rem);
+      margin: var(--ce-carousel-dot-margin, 0 #{fn.space(xs)});
+      background-color: var(
+        --ce-carousel-dot-bg,
+        var(--theme-carousel-indicator, var(--theme-muted, #{fn.color(muted)}))
+      );
+      border-radius: var(--ce-carousel-dot-radius, 50%);
+      cursor: var(--ce-carousel-dot-cursor, pointer);
+
+      &.active {
+        background-color: var(
+          --ce-carousel-dot-active-bg,
+          var(--theme-carousel-indicator-active, var(--theme-accent, #{fn.color(primary)}))
+        );
+      }
+    }
+  }
+}

package/src/components/advanced/_chat.scss

@@ -0,0 +1,37 @@
+// components/advanced/_chat.scss
+
+@use "../../abstracts/functions" as fn;
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-chat-gap, #{fn.space(md)});
+  color: var(--ce-chat-color, inherit);
+
+  .chat__message {
+    max-width: var(--ce-chat-message-max-width, 70%);
+    padding: var(--ce-chat-message-padding, #{fn.space(sm)} #{fn.space(md)});
+    border-radius: var(--ce-chat-message-radius, #{fn.radius(md)});
+    background-color: var(--ce-chat-message-bg, #{fn.color(light)});
+    color: var(--ce-chat-message-color, inherit);
+    position: relative;
+    word-wrap: break-word;
+
+    &--sent {
+      align-self: flex-end;
+      --ce-chat-message-bg: #{fn.color(primary)};
+      --ce-chat-message-color: #{fn.color(white)};
+    }
+
+    &--received {
+      align-self: flex-start;
+    }
+
+    .timestamp {
+      font-size: var(--ce-chat-timestamp-size, 0.7rem);
+      margin-top: var(--ce-chat-timestamp-margin, #{fn.space(xs)});
+      opacity: var(--ce-chat-timestamp-opacity, 0.6);
+      color: var(--ce-chat-timestamp-color, inherit);
+    }
+  }
+}

package/src/components/advanced/_code-block.scss

@@ -0,0 +1,22 @@
+// components/advanced/_code-block.scss
+
+@use "../../abstracts/functions" as fn;
+
+.code-block {
+  background-color: fn.color(dark);
+  color: fn.color(white);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.85rem;
+  padding: fn.space(md);
+  border-radius: fn.radius(md);
+  overflow-x: auto;
+
+  &--light {
+    background-color: fn.color(light);
+    color: fn.color(dark);
+  }
+
+  code {
+    white-space: pre;
+  }
+}