@clusterenvision/ui-scss 1.94.3

package/dist/components/content/avatar.css

@@ -0,0 +1,54 @@
+.avatar,
+.ce-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ce-avatar-size, 2.5rem);
+  height: var(--ce-avatar-size, 2.5rem);
+  border-radius: var(--ce-avatar-radius, 50%);
+  background-color: var(--ce-avatar-bg, var(--theme-avatar-bg, #9aa0a6));
+  color: var(--ce-avatar-color, var(--theme-avatar-fg, #ffffff));
+  font-size: var(--ce-avatar-font-size, 1.25rem);
+  font-weight: var(--ce-avatar-weight, 600);
+  overflow: hidden;
+  position: relative;
+  border-width: var(--ce-avatar-border-width, 0);
+  border-style: var(--ce-avatar-border-style, solid);
+  border-color: var(--ce-avatar-border-color, transparent);
+  box-shadow: var(--ce-avatar-shadow, none);
+}
+.avatar__img,
+.ce-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--ce-avatar-image-fit, cover);
+  border-radius: inherit;
+  display: block;
+}
+.avatar__status,
+.ce-avatar__status {
+  position: absolute;
+  bottom: var(--ce-avatar-status-offset, 0.15rem);
+  right: var(--ce-avatar-status-offset, 0.15rem);
+  width: var(--ce-avatar-status-size, 0.7rem);
+  height: var(--ce-avatar-status-size, 0.7rem);
+  border-radius: var(--ce-avatar-status-radius, 50%);
+  background-color: var(--ce-avatar-status-bg, var(--theme-avatar-status, #34a853));
+  border-width: var(--ce-avatar-status-border-width, 2px);
+  border-style: var(--ce-avatar-status-border-style, solid);
+  border-color: var(--ce-avatar-status-border-color, var(--theme-avatar-bg, #9aa0a6));
+}
+.avatar--sm,
+.ce-avatar--sm {
+  --ce-avatar-size: 1.5rem;
+  --ce-avatar-font-size: 0.75rem;
+}
+.avatar--lg,
+.ce-avatar--lg {
+  --ce-avatar-size: 4rem;
+  --ce-avatar-font-size: 2rem;
+}
+.avatar--square,
+.ce-avatar--square {
+  --ce-avatar-radius: 8px;
+}

package/dist/components/content/badge.css

@@ -0,0 +1,44 @@
+.badge,
+.ce-badge {
+  display: inline-block;
+  padding: var(--ce-badge-padding, 0.25em 0.6em);
+  font-size: var(--ce-badge-size, 0.75rem);
+  border-radius: var(--ce-badge-radius, 10px);
+  font-weight: var(--ce-badge-weight, 600);
+  background-color: var(--ce-badge-bg, var(--theme-badge-bg, #9aa0a6));
+  color: var(--ce-badge-color, var(--theme-badge-fg, #ffffff));
+  line-height: var(--ce-badge-line-height, 1);
+  border-width: var(--ce-badge-border-width, 0);
+  border-style: var(--ce-badge-border-style, solid);
+  border-color: var(--ce-badge-border-color, transparent);
+  box-shadow: var(--ce-badge-shadow, none);
+}
+.badge--primary,
+.ce-badge--primary {
+  --ce-badge-bg: var(--ce-badge-primary-bg, var(--theme-badge-primary, #1a73e8));
+}
+.badge--success,
+.ce-badge--success {
+  --ce-badge-bg: var(--ce-badge-success-bg, var(--theme-badge-success, #34a853));
+}
+.badge--danger,
+.ce-badge--danger {
+  --ce-badge-bg: var(--ce-badge-danger-bg, var(--theme-badge-danger, #ea4335));
+}
+.badge--warning,
+.ce-badge--warning {
+  --ce-badge-bg: var(--ce-badge-warning-bg, var(--theme-badge-warning, #f9ab00));
+}
+.badge--info,
+.ce-badge--info {
+  --ce-badge-bg: var(--ce-badge-info-bg, var(--theme-badge-info, #4285f4));
+}
+.badge--light,
+.ce-badge--light {
+  --ce-badge-bg: var(--ce-badge-light-bg, var(--theme-badge-light, #f8f9fa));
+  --ce-badge-color: var(--ce-badge-light-color, var(--theme-badge-light-fg, #202124));
+}
+.badge--dark,
+.ce-badge--dark {
+  --ce-badge-bg: var(--ce-badge-dark-bg, var(--theme-badge-dark, #202124));
+}

package/dist/components/content/chip.css

@@ -0,0 +1,234 @@
+.chip,
+.ce-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ce-chip-gap, 0.25rem);
+  padding: var(--ce-chip-padding, 0.375rem 0.875rem);
+  font-size: var(--ce-chip-font-size, 0.875rem);
+  line-height: var(--ce-chip-line-height, 1.5);
+  border-radius: var(--ce-chip-radius, 10px);
+  background-color: var(--ce-chip-bg, var(--theme-chip-bg, #f8f9fa));
+  color: var(--ce-chip-color, var(--theme-chip-fg, #202124));
+  font-weight: var(--ce-chip-weight, 500);
+  border-width: var(--ce-chip-border-width, 1px);
+  border-style: var(--ce-chip-border-style, solid);
+  border-color: var(--ce-chip-border-color, var(--theme-chip-border, #9aa0a6));
+  transition: all var(--ce-chip-transition, 0.2s) var(--ce-chip-transition-ease, ease);
+  cursor: var(--ce-chip-cursor, default);
+  white-space: var(--ce-chip-white-space, nowrap);
+  max-width: var(--ce-chip-max-width, 100%);
+}
+.chip--sm,
+.ce-chip--sm {
+  --ce-chip-padding: 0.25rem 0.625rem;
+  --ce-chip-font-size: 0.75rem;
+  --ce-chip-gap: 0.25rem;
+}
+.chip--md,
+.ce-chip--md {
+  --ce-chip-padding: 0.375rem 0.875rem;
+  --ce-chip-font-size: 0.875rem;
+}
+.chip--lg,
+.ce-chip--lg {
+  --ce-chip-padding: 0.5rem 1rem;
+  --ce-chip-font-size: 1rem;
+}
+.chip--primary,
+.ce-chip--primary {
+  --ce-chip-bg: var(--ce-chip-primary-bg, var(--theme-chip-primary, #1a73e8));
+  --ce-chip-color: var(--ce-chip-primary-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-primary-border,
+    var(--theme-chip-primary-border, #1a73e8)
+  );
+}
+.chip--secondary,
+.ce-chip--secondary {
+  --ce-chip-bg: var(--ce-chip-secondary-bg, var(--theme-chip-secondary, #fbbc04));
+  --ce-chip-color: var(--ce-chip-secondary-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-secondary-border,
+    var(--theme-chip-secondary-border, #fbbc04)
+  );
+}
+.chip--success,
+.ce-chip--success {
+  --ce-chip-bg: var(--ce-chip-success-bg, var(--theme-chip-success, #34a853));
+  --ce-chip-color: var(--ce-chip-success-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-success-border,
+    var(--theme-chip-success-border, #34a853)
+  );
+}
+.chip--danger,
+.ce-chip--danger {
+  --ce-chip-bg: var(--ce-chip-danger-bg, var(--theme-chip-danger, #ea4335));
+  --ce-chip-color: var(--ce-chip-danger-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-danger-border,
+    var(--theme-chip-danger-border, #ea4335)
+  );
+}
+.chip--warning,
+.ce-chip--warning {
+  --ce-chip-bg: var(--ce-chip-warning-bg, var(--theme-chip-warning, #f9ab00));
+  --ce-chip-color: var(--ce-chip-warning-color, #202124);
+  --ce-chip-border-color: var(
+    --ce-chip-warning-border,
+    var(--theme-chip-warning-border, #f9ab00)
+  );
+}
+.chip--info,
+.ce-chip--info {
+  --ce-chip-bg: var(--ce-chip-info-bg, var(--theme-chip-info, #4285f4));
+  --ce-chip-color: var(--ce-chip-info-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-info-border,
+    var(--theme-chip-info-border, #4285f4)
+  );
+}
+.chip--outlined,
+.ce-chip--outlined {
+  --ce-chip-bg: var(--ce-chip-outlined-bg, transparent);
+  --ce-chip-border-color: var(--ce-chip-outlined-border, currentColor);
+}
+.chip--outlined.chip--primary, .chip--outlined.ce-chip--primary,
+.ce-chip--outlined.chip--primary,
+.ce-chip--outlined.ce-chip--primary {
+  --ce-chip-color: var(--ce-chip-outlined-primary-color, #1a73e8);
+  --ce-chip-border-color: var(--ce-chip-outlined-primary-border, #1a73e8);
+}
+.chip--outlined.chip--secondary, .chip--outlined.ce-chip--secondary,
+.ce-chip--outlined.chip--secondary,
+.ce-chip--outlined.ce-chip--secondary {
+  --ce-chip-color: var(--ce-chip-outlined-secondary-color, #fbbc04);
+  --ce-chip-border-color: var(--ce-chip-outlined-secondary-border, #fbbc04);
+}
+.chip--outlined.chip--success, .chip--outlined.ce-chip--success,
+.ce-chip--outlined.chip--success,
+.ce-chip--outlined.ce-chip--success {
+  --ce-chip-color: var(--ce-chip-outlined-success-color, #34a853);
+  --ce-chip-border-color: var(--ce-chip-outlined-success-border, #34a853);
+}
+.chip--outlined.chip--danger, .chip--outlined.ce-chip--danger,
+.ce-chip--outlined.chip--danger,
+.ce-chip--outlined.ce-chip--danger {
+  --ce-chip-color: var(--ce-chip-outlined-danger-color, #ea4335);
+  --ce-chip-border-color: var(--ce-chip-outlined-danger-border, #ea4335);
+}
+.chip--outlined.chip--warning, .chip--outlined.ce-chip--warning,
+.ce-chip--outlined.chip--warning,
+.ce-chip--outlined.ce-chip--warning {
+  --ce-chip-color: var(--ce-chip-outlined-warning-color, );
+  --ce-chip-border-color: var(--ce-chip-outlined-warning-border, #f9ab00);
+}
+.chip--outlined.chip--info, .chip--outlined.ce-chip--info,
+.ce-chip--outlined.chip--info,
+.ce-chip--outlined.ce-chip--info {
+  --ce-chip-color: var(--ce-chip-outlined-info-color, #4285f4);
+  --ce-chip-border-color: var(--ce-chip-outlined-info-border, #4285f4);
+}
+.chip--ghost,
+.ce-chip--ghost {
+  --ce-chip-border-color: var(--ce-chip-ghost-border, transparent);
+}
+.chip--ghost.chip--primary, .chip--ghost.ce-chip--primary,
+.ce-chip--ghost.chip--primary,
+.ce-chip--ghost.ce-chip--primary {
+  --ce-chip-bg: var(--ce-chip-ghost-primary-bg, rgba(fn.color(primary), 0.1));
+  --ce-chip-color: var(--ce-chip-ghost-primary-color, #1a73e8);
+}
+.chip--ghost.chip--secondary, .chip--ghost.ce-chip--secondary,
+.ce-chip--ghost.chip--secondary,
+.ce-chip--ghost.ce-chip--secondary {
+  --ce-chip-bg: var(
+    --ce-chip-ghost-secondary-bg,
+    rgba(fn.color(secondary), 0.1)
+  );
+  --ce-chip-color: var(--ce-chip-ghost-secondary-color, #fbbc04);
+}
+.chip--ghost.chip--success, .chip--ghost.ce-chip--success,
+.ce-chip--ghost.chip--success,
+.ce-chip--ghost.ce-chip--success {
+  --ce-chip-bg: var(--ce-chip-ghost-success-bg, rgba(fn.color(success), 0.1));
+  --ce-chip-color: var(--ce-chip-ghost-success-color, #34a853);
+}
+.chip--ghost.chip--danger, .chip--ghost.ce-chip--danger,
+.ce-chip--ghost.chip--danger,
+.ce-chip--ghost.ce-chip--danger {
+  --ce-chip-bg: var(--ce-chip-ghost-danger-bg, rgba(fn.color(danger), 0.1));
+  --ce-chip-color: var(--ce-chip-ghost-danger-color, #ea4335);
+}
+.chip--ghost.chip--warning, .chip--ghost.ce-chip--warning,
+.ce-chip--ghost.chip--warning,
+.ce-chip--ghost.ce-chip--warning {
+  --ce-chip-bg: var(--ce-chip-ghost-warning-bg, rgba(fn.color(warning), 0.15));
+  --ce-chip-color: var(--ce-chip-ghost-warning-color, );
+}
+.chip--ghost.chip--info, .chip--ghost.ce-chip--info,
+.ce-chip--ghost.chip--info,
+.ce-chip--ghost.ce-chip--info {
+  --ce-chip-bg: var(--ce-chip-ghost-info-bg, rgba(fn.color(info), 0.1));
+  --ce-chip-color: var(--ce-chip-ghost-info-color, #4285f4);
+}
+.chip.active,
+.ce-chip.active {
+  --ce-chip-bg: var(
+    --ce-chip-active-bg,
+    var(--theme-chip-active-bg, #1a73e8)
+  );
+  --ce-chip-color: var(
+    --ce-chip-active-color,
+    var(--theme-chip-active-fg, #ffffff)
+  );
+  --ce-chip-border-color: var(
+    --ce-chip-active-border,
+    var(--theme-chip-active-border, #1a73e8)
+  );
+}
+.chip--removable,
+.ce-chip--removable {
+  --ce-chip-padding: var(--ce-chip-removable-padding, 0.375rem 0.5rem 0.375rem 0.875rem);
+}
+.chip__close,
+.ce-chip__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ce-chip-close-bg, transparent);
+  border-width: var(--ce-chip-close-border-width, 0);
+  border-style: var(--ce-chip-close-border-style, solid);
+  border-color: var(--ce-chip-close-border-color, transparent);
+  color: var(--ce-chip-close-color, currentColor);
+  font-size: var(--ce-chip-close-size, 1.25em);
+  cursor: var(--ce-chip-close-cursor, pointer);
+  padding: var(--ce-chip-close-padding, 0);
+  margin-left: var(--ce-chip-close-gap, 0.375rem);
+  opacity: var(--ce-chip-close-opacity, 0.6);
+  transition: opacity var(--ce-chip-close-transition, 0.2s) var(--ce-chip-close-transition-ease, ease);
+  width: var(--ce-chip-close-width, 1em);
+  height: var(--ce-chip-close-height, 1em);
+  line-height: var(--ce-chip-close-line-height, 1);
+}
+.chip__close:hover, .chip__close:focus-visible,
+.ce-chip__close:hover,
+.ce-chip__close:focus-visible {
+  opacity: var(--ce-chip-close-hover-opacity, 1);
+  outline-width: var(--ce-chip-close-outline-width, 2px);
+  outline-style: var(--ce-chip-close-outline-style, solid);
+  outline-color: var(--ce-chip-close-outline-color, currentColor);
+  outline-offset: var(--ce-chip-close-outline-offset, 2px);
+  border-radius: var(--ce-chip-close-radius, 4px);
+}
+.chip__icon,
+.ce-chip__icon {
+  display: inline-flex;
+  font-size: var(--ce-chip-icon-size, 1.1em);
+}
+.chip:disabled, .chip.disabled,
+.ce-chip:disabled,
+.ce-chip.disabled {
+  opacity: var(--ce-chip-disabled-opacity, 0.5);
+  cursor: var(--ce-chip-disabled-cursor, not-allowed);
+}

package/dist/components/content/divider.css

@@ -0,0 +1,27 @@
+.divider {
+  border: none;
+  border-top: var(--ce-divider-thickness, 1px) var(--ce-divider-style, solid) var(--ce-divider-color, #9aa0a6);
+  margin: var(--ce-divider-margin, 1rem) 0;
+  background: none;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+.divider--vertical {
+  border-top: none;
+  border-left: var(--ce-divider-thickness, 1px) var(--ce-divider-style, solid) var(--ce-divider-color, #9aa0a6);
+  height: 100%;
+  margin: 0 var(--ce-divider-margin, 1rem);
+  width: auto;
+  min-height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+.divider--dashed {
+  border-top-style: dashed;
+  border-left-style: dashed;
+}
+.divider--thick {
+  border-top-width: 2px;
+  border-left-width: 2px;
+}

package/dist/components/content/image.css

@@ -0,0 +1,23 @@
+.image {
+  max-width: 100%;
+  display: block;
+  height: auto;
+  border-radius: 4px;
+}
+.image--rounded {
+  border-radius: 8px;
+}
+.image--circle {
+  border-radius: 50%;
+}
+.image--shadow {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.image--cover {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.image--contain {
+  object-fit: contain;
+}

package/dist/components/feedback/alert.css

@@ -0,0 +1,50 @@
+.alert {
+  padding: 1rem;
+  border-radius: 4px;
+  border-left: 4px solid;
+  background-color: var(--theme-alert-bg, #f8f9fa);
+  color: var(--theme-alert-fg, #202124);
+  position: relative;
+  margin-bottom: 1rem;
+}
+.alert--success {
+  border-color: var(--theme-alert-success-border, #34a853);
+  background-color: var(--theme-alert-success-bg, rgb(208.8, 240.7, 217.325));
+  color: var(--theme-alert-success-fg, rgb(14.2380952381, 69.3333333333, 141.7619047619));
+}
+.alert--danger {
+  border-color: var(--theme-alert-danger-border, #ea4335);
+  background-color: var(--theme-alert-danger-bg, rgb(208.8, 240.7, 217.325));
+  color: var(--theme-alert-danger-fg, rgb(14.2380952381, 69.3333333333, 141.7619047619));
+}
+.alert--warning {
+  border-color: var(--theme-alert-warning-border, #f9ab00);
+  background-color: var(--theme-alert-warning-bg, rgb(189.3272727273, 234.6727272727, 201.4454545455));
+  color: var(--theme-alert-warning-fg, rgb(14.2380952381, 69.3333333333, 141.7619047619));
+}
+.alert--info {
+  border-color: var(--theme-alert-info-border, #4285f4);
+  background-color: var(--theme-alert-info-bg, rgb(208.8, 240.7, 217.325));
+  color: var(--theme-alert-info-fg, rgb(14.2380952381, 69.3333333333, 141.7619047619));
+}
+.alert__title {
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+.alert__close {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  background: none;
+  border: none;
+  color: #9aa0a6;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+.alert__close:hover {
+  color: #ea4335;
+}
+.alert__close:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}

package/dist/components/feedback/message.css

@@ -0,0 +1,18 @@
+.message {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 4px;
+  color: #202124;
+}
+.message--success {
+  background-color: rgb(189.3272727273, 234.6727272727, 201.4454545455);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.message--error {
+  background-color: rgb(253.2107623318, 238.9820627803, 237.7892376682);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.message--info {
+  background-color: rgb(189.3272727273, 234.6727272727, 201.4454545455);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}

package/dist/components/feedback/progress-bar.css

@@ -0,0 +1,22 @@
+.progress-bar {
+  width: var(--ce-progress-bar-width, 100%);
+  background-color: var(--ce-progress-bar-bg, var(--theme-progress-bg, #f8f9fa));
+  height: var(--ce-progress-bar-height, 0.75rem);
+  border-radius: var(--ce-progress-bar-radius, 8px);
+  overflow: var(--ce-progress-bar-overflow, hidden);
+}
+.progress-bar__fill {
+  height: var(--ce-progress-bar-fill-height, 100%);
+  width: var(--ce-progress-bar-fill-width, 0%);
+  background-color: var(--ce-progress-bar-fill-bg, var(--theme-progress-fill, #1a73e8));
+  transition: var(--ce-progress-bar-fill-transition, width 0.3s ease-in-out);
+}
+.progress-bar__fill--success {
+  background-color: var(--ce-progress-bar-success-bg, var(--theme-progress-success, #34a853));
+}
+.progress-bar__fill--danger {
+  background-color: var(--ce-progress-bar-danger-bg, var(--theme-progress-danger, #ea4335));
+}
+.progress-bar__fill--warning {
+  background-color: var(--ce-progress-bar-warning-bg, var(--theme-progress-warning, #f9ab00));
+}

package/dist/components/feedback/skeleton.css

@@ -0,0 +1,35 @@
+.skeleton {
+  background-color: var(--theme-skeleton-bg, #f8f9fa);
+  border-radius: 4px;
+  width: 100%;
+  height: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+.skeleton::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -50%;
+  height: 100%;
+  width: 50%;
+  background: linear-gradient(to right, transparent, var(--theme-skeleton-shimmer, rgba(255, 255, 255, 0.3)), transparent);
+  animation: shimmer 1.5s infinite;
+}
+.skeleton--sm {
+  height: 0.75rem;
+}
+.skeleton--lg {
+  height: 1.5rem;
+}
+.skeleton--circle {
+  border-radius: 50%;
+  height: 2rem;
+  width: 2rem;
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/dist/components/feedback/snackbar.css

@@ -0,0 +1,30 @@
+.snackbar {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--theme-snackbar-bg, #202124);
+  color: var(--theme-snackbar-fg, #ffffff);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  font-size: 0.875rem;
+  z-index: 1080;
+  animation: fade-in 0.3s ease-in-out;
+}
+.snackbar--success {
+  background-color: var(--theme-snackbar-success, #34a853);
+}
+.snackbar--error {
+  background-color: var(--theme-snackbar-error, #ea4335);
+}
+.snackbar--info {
+  background-color: var(--theme-snackbar-info, #4285f4);
+}
+.snackbar--warning {
+  background-color: var(--theme-snackbar-warning, #f9ab00);
+}
+.snackbar--warning:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}