@clusterenvision/ui-scss 1.94.3

package/dist/components/buttons/button.css

@@ -0,0 +1,305 @@
+.button,
+.ce-btn {
+  --ce-button-bg: var(--ce-component-button-background, var(--ce-color-primary, var(--theme-primary, #1a73e8)));
+  --ce-button-color: var(--ce-component-button-foreground, var(--ce-color-text, var(--theme-fg, #ffffff)));
+  --ce-button-border: var(--ce-component-button-border, var(--ce-color-primary, var(--theme-primary, #1a73e8)));
+  --ce-button-radius: var(--ce-component-button-radius, var(--ce-radius-md, 8px));
+  --ce-button-padding-y: var(--ce-component-button-padding-y, var(--ce-space-8, 0.5rem));
+  --ce-button-padding-x: var(--ce-component-button-padding-x, var(--ce-space-16, 1rem));
+  --ce-button-font-size: var(--ce-component-button-font-size, 1rem);
+  --ce-button-font-weight: var(--ce-component-button-font-weight, 500);
+  --ce-button-line-height: var(--ce-component-button-line-height, 1.2);
+  --ce-button-focus-ring: var(--ce-component-button-focus-ring, var(--ce-color-focus-ring, var(--theme-accent, #1a73e8)));
+  --ce-button-hover-bg: var(--ce-component-button-hover-background, var(--ce-button-bg));
+  background-color: var(--ce-button-bg);
+  color: var(--ce-button-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-size: var(--ce-button-font-size);
+  font-weight: var(--ce-button-font-weight);
+  line-height: var(--ce-button-line-height);
+  padding: var(--ce-button-padding-y) var(--ce-button-padding-x);
+  border-radius: var(--ce-button-radius);
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid var(--ce-button-border);
+  outline: none;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  width: fit-content;
+  max-width: 100%;
+  min-width: auto;
+  white-space: nowrap;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.button:disabled,
+.ce-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  pointer-events: none;
+}
+.button--primary,
+.ce-btn--primary {
+  --ce-button-bg: var(--ce-button-primary-bg, var(--ce-color-primary, var(--theme-primary, #1a73e8)));
+  --ce-button-color: var(--ce-button-primary-color, var(--ce-color-text, var(--theme-fg, #ffffff)));
+  --ce-button-border: var(--ce-button-primary-border, var(--ce-button-bg));
+  --ce-button-hover-bg: var(--ce-button-primary-hover, var(--theme-primary-hover, rgb(20.2892857143, 98.8, 202.0107142857)));
+}
+.button--primary:hover:not(:disabled),
+.ce-btn--primary:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--secondary,
+.ce-btn--secondary {
+  --ce-button-bg: var(--ce-button-secondary-bg, #fbbc04);
+  --ce-button-color: var(--ce-button-secondary-color, #202124);
+  --ce-button-border: var(--ce-button-secondary-border, #fbbc04);
+  --ce-button-hover-bg: var(--ce-button-secondary-hover, rgb(215.86, 161.68, 3.44));
+}
+.button--secondary:hover:not(:disabled),
+.ce-btn--secondary:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--glass,
+.ce-btn--glass {
+  --ce-button-bg: var(--ce-button-glass-bg, rgba(255, 255, 255, 0.1));
+  --ce-button-border: var(--ce-button-glass-border, rgba(255, 255, 255, 0.2));
+  --ce-button-color: var(--ce-button-glass-color, var(--theme-fg, #ffffff));
+  background-color: var(--ce-button-bg);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--ce-button-border);
+  color: var(--ce-button-color);
+}
+.button--success,
+.ce-btn--success {
+  --ce-button-bg: var(--ce-button-success-bg, #34a853);
+  --ce-button-color: var(--ce-button-success-color, #ffffff);
+  --ce-button-border: var(--ce-button-success-border, #34a853);
+  --ce-button-hover-bg: var(--ce-button-success-hover, rgb(43.5618181818, 140.7381818182, 69.5313636364));
+}
+.button--success:hover:not(:disabled),
+.ce-btn--success:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--danger,
+.ce-btn--danger {
+  --ce-button-bg: var(--ce-button-danger-bg, #ea4335);
+  --ce-button-color: var(--ce-button-danger-color, #ffffff);
+  --ce-button-border: var(--ce-button-danger-border, #ea4335);
+  --ce-button-hover-bg: var(--ce-button-danger-hover, rgb(227.6349775785, 39.4417040359, 23.6650224215));
+}
+.button--danger:hover:not(:disabled),
+.ce-btn--danger:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--warning,
+.ce-btn--warning {
+  --ce-button-bg: var(--ce-button-warning-bg, #f9ab00);
+  --ce-button-color: var(--ce-button-warning-color, #000000);
+  --ce-button-border: var(--ce-button-warning-border, #f9ab00);
+  --ce-button-hover-bg: var(--ce-button-warning-hover, rgb(213.3, 146.4831325301, 0));
+}
+.button--warning:hover:not(:disabled),
+.ce-btn--warning:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--info,
+.ce-btn--info {
+  --ce-button-bg: var(--ce-button-info-bg, #4285f4);
+  --ce-button-color: var(--ce-button-info-color, #ffffff);
+  --ce-button-border: var(--ce-button-info-border, #4285f4);
+  --ce-button-hover-bg: var(--ce-button-info-hover, rgb(32.2635, 111.223, 242.0365));
+}
+.button--info:hover:not(:disabled),
+.ce-btn--info:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--light,
+.ce-btn--light {
+  --ce-button-bg: var(--ce-button-light-bg, #f8f9fa);
+  --ce-button-color: var(--ce-button-light-color, #202124);
+  --ce-button-border: var(--ce-button-light-border, #f8f9fa);
+  --ce-button-hover-bg: var(--ce-button-light-hover, rgb(218.25, 223.5, 228.75));
+}
+.button--light:hover:not(:disabled),
+.ce-btn--light:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--dark,
+.ce-btn--dark {
+  --ce-button-bg: var(--ce-button-dark-bg, #202124);
+  --ce-button-color: var(--ce-button-dark-color, #ffffff);
+  --ce-button-border: var(--ce-button-dark-border, #202124);
+  --ce-button-hover-bg: var(--ce-button-dark-hover, rgb(44, 45.375, 49.5));
+}
+.button--dark:hover:not(:disabled),
+.ce-btn--dark:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--outline,
+.ce-btn--outline {
+  background-color: transparent !important;
+  border: 1px solid currentColor;
+}
+.button--outline.ce-btn--primary, .button--outline.button--primary,
+.ce-btn--outline.ce-btn--primary,
+.ce-btn--outline.button--primary {
+  color: var(--ce-button-outline-primary-color, #1a73e8);
+  border-color: var(--ce-button-outline-primary-border, #1a73e8);
+}
+.button--outline.ce-btn--primary:hover:not(:disabled), .button--outline.button--primary:hover:not(:disabled),
+.ce-btn--outline.ce-btn--primary:hover:not(:disabled),
+.ce-btn--outline.button--primary:hover:not(:disabled) {
+  background-color: var(--ce-button-outline-primary-hover, rgba(26, 115, 232, 0.1)) !important;
+}
+.button--outline.ce-btn--secondary, .button--outline.button--secondary,
+.ce-btn--outline.ce-btn--secondary,
+.ce-btn--outline.button--secondary {
+  color: var(--ce-button-outline-secondary-color, #fbbc04);
+  border-color: var(--ce-button-outline-secondary-border, #fbbc04);
+}
+.button--outline.ce-btn--secondary:hover:not(:disabled), .button--outline.button--secondary:hover:not(:disabled),
+.ce-btn--outline.ce-btn--secondary:hover:not(:disabled),
+.ce-btn--outline.button--secondary:hover:not(:disabled) {
+  background-color: var(--ce-button-outline-secondary-hover, rgba(251, 188, 4, 0.1)) !important;
+}
+.button--outline.ce-btn--success, .button--outline.button--success,
+.ce-btn--outline.ce-btn--success,
+.ce-btn--outline.button--success {
+  color: var(--ce-button-outline-success-color, #34a853);
+  border-color: var(--ce-button-outline-success-border, #34a853);
+}
+.button--outline.ce-btn--success:hover:not(:disabled), .button--outline.button--success:hover:not(:disabled),
+.ce-btn--outline.ce-btn--success:hover:not(:disabled),
+.ce-btn--outline.button--success:hover:not(:disabled) {
+  background-color: var(--ce-button-outline-success-hover, rgba(52, 168, 83, 0.1)) !important;
+}
+.button--outline.ce-btn--danger, .button--outline.button--danger,
+.ce-btn--outline.ce-btn--danger,
+.ce-btn--outline.button--danger {
+  color: var(--ce-button-outline-danger-color, #ea4335);
+  border-color: var(--ce-button-outline-danger-border, #ea4335);
+}
+.button--outline.ce-btn--danger:hover:not(:disabled), .button--outline.button--danger:hover:not(:disabled),
+.ce-btn--outline.ce-btn--danger:hover:not(:disabled),
+.ce-btn--outline.button--danger:hover:not(:disabled) {
+  background-color: var(--ce-button-outline-danger-hover, rgba(234, 67, 53, 0.1)) !important;
+}
+.button--ghost,
+.ce-btn--ghost {
+  background-color: transparent !important;
+  border: none;
+}
+.button--ghost.ce-btn--primary, .button--ghost.button--primary,
+.ce-btn--ghost.ce-btn--primary,
+.ce-btn--ghost.button--primary {
+  color: var(--ce-button-ghost-primary-color, #1a73e8);
+}
+.button--ghost.ce-btn--primary:hover:not(:disabled), .button--ghost.button--primary:hover:not(:disabled),
+.ce-btn--ghost.ce-btn--primary:hover:not(:disabled),
+.ce-btn--ghost.button--primary:hover:not(:disabled) {
+  background-color: var(--ce-button-ghost-primary-hover, rgba(26, 115, 232, 0.05)) !important;
+}
+.button--ghost.ce-btn--secondary, .button--ghost.button--secondary,
+.ce-btn--ghost.ce-btn--secondary,
+.ce-btn--ghost.button--secondary {
+  color: var(--ce-button-ghost-secondary-color, #fbbc04);
+}
+.button--ghost.ce-btn--secondary:hover:not(:disabled), .button--ghost.button--secondary:hover:not(:disabled),
+.ce-btn--ghost.ce-btn--secondary:hover:not(:disabled),
+.ce-btn--ghost.button--secondary:hover:not(:disabled) {
+  background-color: var(--ce-button-ghost-secondary-hover, rgba(251, 188, 4, 0.05)) !important;
+}
+.button--ghost.ce-btn--success, .button--ghost.button--success,
+.ce-btn--ghost.ce-btn--success,
+.ce-btn--ghost.button--success {
+  color: var(--ce-button-ghost-success-color, #34a853);
+}
+.button--ghost.ce-btn--success:hover:not(:disabled), .button--ghost.button--success:hover:not(:disabled),
+.ce-btn--ghost.ce-btn--success:hover:not(:disabled),
+.ce-btn--ghost.button--success:hover:not(:disabled) {
+  background-color: var(--ce-button-ghost-success-hover, rgba(52, 168, 83, 0.05)) !important;
+}
+.button--ghost.ce-btn--danger, .button--ghost.button--danger,
+.ce-btn--ghost.ce-btn--danger,
+.ce-btn--ghost.button--danger {
+  color: var(--ce-button-ghost-danger-color, #ea4335);
+}
+.button--ghost.ce-btn--danger:hover:not(:disabled), .button--ghost.button--danger:hover:not(:disabled),
+.ce-btn--ghost.ce-btn--danger:hover:not(:disabled),
+.ce-btn--ghost.button--danger:hover:not(:disabled) {
+  background-color: var(--ce-button-ghost-danger-hover, rgba(234, 67, 53, 0.05)) !important;
+}
+.button--xs,
+.ce-btn--xs {
+  --ce-button-font-size: 0.75rem;
+  --ce-button-padding-y: var(--ce-space-4, 0.25rem);
+  --ce-button-padding-x: var(--ce-space-4, 0.25rem);
+  --ce-button-line-height: 1;
+}
+.button--sm,
+.ce-btn--sm {
+  --ce-button-font-size: 0.875rem;
+  --ce-button-padding-y: var(--ce-space-4, 0.25rem);
+  --ce-button-padding-x: var(--ce-space-8, 0.5rem);
+  --ce-button-line-height: 1;
+  letter-spacing: var(--ce-button-letter-spacing, -0.2px);
+}
+.button--lg,
+.ce-btn--lg {
+  --ce-button-font-size: 1.125rem;
+  --ce-button-padding-y: var(--ce-space-16, 1rem);
+  --ce-button-padding-x: var(--ce-space-24, 1.5rem);
+  --ce-button-line-height: 1.4;
+}
+.button--xl,
+.ce-btn--xl {
+  --ce-button-font-size: 1.25rem;
+  --ce-button-padding-y: var(--ce-space-24, 1.5rem);
+  --ce-button-padding-x: var(--ce-space-32, 2rem);
+  --ce-button-line-height: 1.5;
+}
+.button--xxl,
+.ce-btn--xxl {
+  --ce-button-font-size: 1.375rem;
+  --ce-button-padding-y: var(--ce-space-24, 1.5rem);
+  --ce-button-padding-x: var(--ce-space-48, 3rem);
+  --ce-button-line-height: 1.5;
+}
+.button--block, .button--full,
+.ce-btn--block,
+.ce-btn--full {
+  display: flex;
+  width: 100%;
+}
+.button--rounded,
+.ce-btn--rounded {
+  --ce-button-radius: var(--ce-radius-md, 8px);
+}
+.button--pill,
+.ce-btn--pill {
+  --ce-button-radius: var(--ce-radius-pill, 10px);
+}
+.button--circle, .button--square,
+.ce-btn--circle,
+.ce-btn--square {
+  --ce-button-padding-y: var(--ce-space-8, 0.5rem);
+  --ce-button-padding-x: var(--ce-space-8, 0.5rem);
+  --ce-button-radius: 50%;
+  width: var(--ce-button-square-size, 2.5rem);
+  height: var(--ce-button-square-size, 2.5rem);
+  justify-content: center;
+}
+.button--square,
+.ce-btn--square {
+  --ce-button-radius: var(--ce-radius-md, 8px);
+}
+.button:focus-visible,
+.ce-btn:focus-visible {
+  outline: 2px solid var(--ce-button-focus-ring);
+  outline-offset: 2px;
+}

package/dist/components/buttons/icon-button.css

@@ -0,0 +1,32 @@
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 50%;
+  background-color: #f8f9fa;
+  color: #1a73e8;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+.icon-button:hover {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.icon-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.icon-button--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 1rem;
+}
+.icon-button--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}

package/dist/components/charts/chart-types.css

@@ -0,0 +1,36 @@
+.chart-wrapper {
+  background-color: var(--ce-chart-bg, #ffffff);
+  padding: var(--ce-chart-padding, 1rem);
+  border-radius: var(--ce-chart-radius, 4px);
+  box-shadow: var(--ce-chart-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
+  border: 1px solid var(--ce-chart-border, #9aa0a6);
+  margin-bottom: var(--ce-chart-margin, 1.5rem);
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  outline: none;
+  transition: box-shadow 0.2s;
+}
+.chart-wrapper:focus {
+  box-shadow: 0 0 0 2px var(--ce-chart-focus, #0078d4);
+}
+.chart-wrapper--bar canvas, .chart-wrapper--line canvas, .chart-wrapper--pie canvas, .chart-wrapper--radar canvas {
+  width: 100% !important;
+  height: var(--ce-chart-canvas-height, 280px) !important;
+  max-width: 100%;
+  border-radius: var(--ce-chart-canvas-radius, 0.3em);
+  background: var(--ce-chart-canvas-bg, transparent);
+  outline: none;
+}
+.chart-wrapper__title {
+  font-weight: bold;
+  font-size: var(--ce-chart-title-size, 1.1rem);
+  margin-bottom: var(--ce-chart-title-margin, 0.5rem);
+  color: var(--ce-chart-title-color, #202124);
+  line-height: 1.3;
+  letter-spacing: 0.01em;
+  outline: none;
+}
+.chart-wrapper__title:focus {
+  text-decoration: underline;
+}

package/dist/components/containers/accordion.css

@@ -0,0 +1,65 @@
+@charset "UTF-8";
+.accordion,
+.ce-accordion {
+  border: 1px solid var(--theme-accordion-border, #9aa0a6);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.accordion__item,
+.ce-accordion__item {
+  border-bottom: 1px solid var(--theme-accordion-border, #9aa0a6);
+}
+.accordion__item:last-child,
+.ce-accordion__item:last-child {
+  border-bottom: none;
+}
+.accordion__header,
+.ce-accordion__header {
+  padding: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  background-color: var(--theme-accordion-header-bg, #f8f9fa);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.2s ease;
+}
+.accordion__header:hover,
+.ce-accordion__header:hover {
+  background-color: var(--theme-accordion-header-hover, rgba(0, 0, 0, 0.05));
+}
+.accordion__header:focus-visible,
+.ce-accordion__header:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.accordion__header::after,
+.ce-accordion__header::after {
+  content: "▼";
+  font-size: 0.75rem;
+  transition: transform 0.2s ease;
+}
+.accordion__item.is-open .accordion__header::after,
+.accordion__item.is-open .ce-accordion__header::after,
+.ce-accordion__item.is-open .accordion__header::after,
+.ce-accordion__item.is-open .ce-accordion__header::after {
+  transform: rotate(180deg);
+}
+.accordion__content, .accordion__body,
+.ce-accordion__content,
+.ce-accordion__body {
+  padding: 0 1rem 1rem 1rem;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
+}
+.accordion__content.is-open, .accordion__content.open, .accordion__body.is-open, .accordion__body.open,
+.ce-accordion__content.is-open,
+.ce-accordion__content.open,
+.ce-accordion__body.is-open,
+.ce-accordion__body.open {
+  max-height: 1000px;
+  opacity: 1;
+  padding-top: 0.5rem;
+}

package/dist/components/containers/card.css

@@ -0,0 +1,60 @@
+.card,
+.ce-card {
+  background-color: var(--ce-card-bg, var(--theme-bg, #ffffff));
+  border-width: var(--ce-card-border-width, 1px);
+  border-style: var(--ce-card-border-style, solid);
+  border-color: var(--ce-card-border-color, var(--theme-border, #9aa0a6));
+  border-radius: var(--ce-card-radius, 8px);
+  gap: var(--ce-card-gap, 1rem);
+  box-shadow: var(--ce-card-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+  padding: var(--ce-card-padding, 1.5rem);
+  transition: box-shadow var(--ce-card-transition-shadow, 0.2s);
+  display: flex;
+  flex-direction: column;
+  color: var(--ce-card-color, inherit);
+}
+.card:hover,
+.ce-card:hover {
+  box-shadow: var(--ce-card-hover-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+.card__header,
+.ce-card__header {
+  font-weight: var(--ce-card-header-weight, 600);
+  font-size: var(--ce-card-header-size, 1.125rem);
+  margin-bottom: var(--ce-card-header-margin-bottom, 1rem);
+  color: var(--ce-card-header-color, inherit);
+}
+.card__body,
+.ce-card__body {
+  flex: 1;
+  color: var(--ce-card-body-color, inherit);
+}
+.card__footer,
+.ce-card__footer {
+  margin-top: var(--ce-card-footer-margin-top, 1rem);
+  text-align: var(--ce-card-footer-align, right);
+  color: var(--ce-card-footer-color, inherit);
+}
+.card--hover,
+.ce-card--hover {
+  cursor: var(--ce-card-hover-cursor, pointer);
+}
+.card--hover:hover,
+.ce-card--hover:hover {
+  box-shadow: var(--ce-card-hover-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+.card--hover:focus-visible,
+.ce-card--hover:focus-visible {
+  outline-width: var(--ce-card-focus-outline-width, 2px);
+  outline-style: var(--ce-card-focus-outline-style, solid);
+  outline-color: var(--ce-card-focus-outline-color, var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-card-focus-outline-offset, 2px);
+}
+.card--borderless,
+.ce-card--borderless {
+  --ce-card-border-width: 0;
+}
+.card--elevated,
+.ce-card--elevated {
+  --ce-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}

package/dist/components/containers/drawer.css

@@ -0,0 +1,33 @@
+.drawer {
+  position: fixed;
+  top: var(--ce-drawer-top, 0);
+  right: var(--ce-drawer-right, 0);
+  width: var(--ce-drawer-width, 300px);
+  max-width: var(--ce-drawer-max-width, 100%);
+  height: var(--ce-drawer-height, 100vh);
+  background-color: var(--ce-drawer-bg, #ffffff);
+  box-shadow: var(--ce-drawer-shadow, 0 10px 15px rgba(0, 0, 0, 0.15));
+  z-index: var(--ce-drawer-z, 1050);
+  display: flex;
+  flex-direction: column;
+  animation: var(--ce-drawer-animation, slide-in) var(--ce-drawer-animation-duration, 0.3s) var(--ce-drawer-animation-ease, ease-in-out);
+}
+.drawer__header {
+  padding: var(--ce-drawer-header-padding, 1rem);
+  font-weight: var(--ce-drawer-header-weight, 600);
+  border-bottom-width: var(--ce-drawer-header-border-width, 1px);
+  border-bottom-style: var(--ce-drawer-header-border-style, solid);
+  border-bottom-color: var(--ce-drawer-header-border-color, #9aa0a6);
+}
+.drawer__body {
+  flex: 1;
+  overflow-y: var(--ce-drawer-body-overflow, auto);
+  padding: var(--ce-drawer-body-padding, 1.5rem);
+}
+.drawer__footer {
+  padding: var(--ce-drawer-footer-padding, 1rem);
+  border-top-width: var(--ce-drawer-footer-border-width, 1px);
+  border-top-style: var(--ce-drawer-footer-border-style, solid);
+  border-top-color: var(--ce-drawer-footer-border-color, #9aa0a6);
+  text-align: var(--ce-drawer-footer-align, right);
+}

package/dist/components/containers/modal.css

@@ -0,0 +1,61 @@
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--theme-modal-overlay, rgba(0, 0, 0, 0.4));
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  padding: 1.5rem;
+}
+.modal.hidden {
+  display: none !important;
+}
+.modal__content {
+  background-color: var(--theme-modal-bg, rgba(255, 255, 255, 0.06));
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  border-radius: 8px;
+  width: 100%;
+  max-width: 600px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  animation: fade-in 0.3s ease-in-out;
+  color: var(--theme-modal-fg, #ffffff);
+}
+.modal__header {
+  padding: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--theme-modal-border, #9aa0a6);
+}
+.modal__body {
+  padding: 1.5rem;
+}
+.modal__footer {
+  padding: 1rem;
+  text-align: right;
+  border-top: 1px solid var(--theme-modal-border, #9aa0a6);
+}
+.modal__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #9aa0a6;
+  cursor: pointer;
+}
+.modal__close:hover {
+  color: #ea4335;
+}
+.modal__close:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.modal .hidden {
+  display: none !important;
+}

package/dist/components/containers/panel.css

@@ -0,0 +1,27 @@
+.panel {
+  padding: 1.5rem;
+  border-left: 4px solid #1a73e8;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin-bottom: 1.5rem;
+}
+.panel--info {
+  border-color: #4285f4;
+}
+.panel--success {
+  border-color: #34a853;
+}
+.panel--warning {
+  border-color: #f9ab00;
+}
+.panel--danger {
+  border-color: #ea4335;
+}
+.panel__title {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+.panel__content {
+  font-size: 0.95rem;
+}

package/dist/components/containers/toast.css

@@ -0,0 +1,38 @@
+.toast {
+  position: var(--ce-toast-position, fixed);
+  bottom: var(--ce-toast-bottom, 1.5rem);
+  right: var(--ce-toast-right, 1.5rem);
+  background-color: var(--ce-toast-bg, #202124);
+  color: var(--ce-toast-color, #ffffff);
+  padding: var(--ce-toast-padding, 1rem);
+  border-radius: var(--ce-toast-radius, 8px);
+  box-shadow: var(--ce-toast-shadow, 0 10px 15px rgba(0, 0, 0, 0.15));
+  z-index: var(--ce-toast-z, 1080);
+  animation: var(--ce-toast-animation, fade-in 0.3s ease-in-out);
+  min-width: var(--ce-toast-min-width, 250px);
+}
+.toast--success {
+  background-color: var(--ce-toast-success-bg, #34a853);
+}
+.toast--error {
+  background-color: var(--ce-toast-error-bg, #ea4335);
+}
+.toast--info {
+  background-color: var(--ce-toast-info-bg, #4285f4);
+}
+.toast__message {
+  font-size: var(--ce-toast-message-size, 0.95rem);
+}
+.toast__close {
+  position: var(--ce-toast-close-position, absolute);
+  top: var(--ce-toast-close-top, 0.25rem);
+  right: var(--ce-toast-close-right, 0.25rem);
+  background: var(--ce-toast-close-bg, none);
+  border: var(--ce-toast-close-border, none);
+  color: var(--ce-toast-close-color, #ffffff);
+  font-size: var(--ce-toast-close-size, 1.25rem);
+  cursor: var(--ce-toast-close-cursor, pointer);
+}
+.toast__close:hover {
+  opacity: var(--ce-toast-close-hover-opacity, 0.7);
+}