Color Palette Component Adjustament

Author: Ohswedd

src/css/bundle.css

@@ -6,9 +6,21 @@
   margin: auto;
   padding: var(--space-4);
   border-radius: var(--radius-lg);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  background-color: var(--neutral-50);
-  transition: padding 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: var(--variant-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
+  background-color: var(--variant-bg, var(--neutral-50));
+  transition: padding 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
+}
+
+.kroma-accordion-container[data-variant="default"],
+.kroma-accordion-container:not([data-variant]) {
+  --variant-bg: var(--neutral-100);
+  --variant-light-bg: var(--neutral-50);
+  --variant-dark-bg: var(--neutral-300);
+  --variant-text: var(--neutral-900);
+  --variant-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --variant-border: var(--neutral-200);
+  --variant-hover-bg: var(--neutral-200);
+  --variant-hover: var(--neutral-700);
 }
 
 .kroma-accordion-container[data-responsive="auto"] {
@@ -20,9 +32,6 @@
 
 /* Accordion Item */
 .kroma-accordion-item {
-  border-bottom: 1px solid var(--neutral-200);
-}
-.kroma-accordion-item:last-child {
   border-bottom: none;
 }
 
@@ -35,57 +44,57 @@
   padding: clamp(var(--space-3), 1.5vw, var(--space-5));
   font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
   font-weight: 600;
-  color: var(--neutral-700);
+  color: var(--variant-text, var(--neutral-700));
   cursor: pointer;
-  background-color: var(--neutral-50);
-  border: 1px solid transparent;
+  background-color: var(--variant-bg, var(--neutral-50));
+  border: 1px solid var(--variant-border, transparent);
   border-radius: var(--radius-lg);
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }
 .kroma-accordion-header:hover,
 .kroma-accordion-header:focus {
-  background-color: var(--neutral-100);
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  background-color: var(--variant-hover-bg, var(--neutral-100));
+  box-shadow: 0 0 8px var(--variant-shadow, rgba(0, 0, 0, 0.1));
   outline: none;
 }
 .kroma-accordion-header:focus-visible {
-  border: 1px solid var(--focus-color);
+  border-color: var(--focus-color);
 }
 
 /* Accordion Content */
 .kroma-accordion-content {
   height: 0;
   overflow: hidden;
-  transition: height 0.4s ease, padding 0.3s ease;
+  transition: height 0.4s ease, padding 0.3s ease, background-color 0.3s ease;
   padding: 0 var(--space-3);
-  background-color: var(--neutral-50);
+  background-color: var(--variant-light-bg, var(--neutral-50));
 }
 .kroma-accordion-content[data-expanded="true"] {
   height: auto;
   padding: var(--space-3) var(--space-4);
+  margin-top: var(--space-3);
 }
 
 /* Sub-Item */
 .kroma-accordion-sub-item {
-  border-top: 1px solid var(--neutral-200);
   padding-left: var(--space-4);
-  transition: padding 0.3s ease;
+  transition: padding 0.3s ease, border-color 0.3s ease;
 }
 .kroma-accordion-sub-header {
   padding: clamp(var(--space-2), 1vw, var(--space-4));
   font-size: 0.9rem;
   font-weight: 500;
-  color: var(--neutral-500);
+  color: var(--variant-text, var(--neutral-500));
   cursor: pointer;
-  background: var(--neutral-50);
+  background: var(--variant-light-bg, var(--neutral-50));
   border: none;
   text-align: left;
   width: 100%;
   border-radius: var(--radius-lg);
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 .kroma-accordion-sub-header:hover {
-  background-color: var(--neutral-100);
+  background-color: var(--variant-hover-bg, var(--neutral-100));
 }
 
 /* Variants */

src/css/components/accordion.css

@@ -6,17 +6,29 @@
   padding: clamp(var(--space-4), 1vw + var(--space-3), var(--space-6));
   margin: var(--space-4) auto;
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--variant-shadow, var(--shadow-md));
   font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
   position: relative;
-  transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
+  transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out, background-color 0.3s ease;
   opacity: 1;
-  background-color: var(--neutral-50);
-  color: var(--neutral-900);
+  background-color: var(--variant-bg, var(--neutral-50));
+  color: var(--variant-text, var(--neutral-900));
   gap: var(--space-3);
+  max-height: 500px;
   overflow: hidden;
-  max-height: 500px; /* Set an arbitrary large value to allow transition */
-  overflow: hidden; /* Prevent overflow during the transition */
+}
+
+.kroma-alert[data-variant="default"],
+.kroma-alert:not([data-variant]) {
+  --variant-bg: var(--neutral-100);
+  --variant-text: var(--neutral-900);
+  --variant-shadow: var(--shadow-md);
+  --variant-border: var(--neutral-200);
+  --variant-hover-bg: var(--neutral-200);
+}
+
+.kroma-alert:hover {
+  background-color: var(--variant-hover-bg, var(--neutral-200));
 }
 
 /* Variant Styles */
@@ -49,11 +61,6 @@
   border-radius: var(--radius-xl);
 }
 
-.kroma-alert[data-shape="circle"] {
-  border-radius: var(--radius-full);
-  padding: var(--space-4);
-}
-
 /* Icon */
 .kroma-alert-icon {
   font-size: clamp(1.5rem, 2vw, 2rem);
@@ -97,8 +104,7 @@
   transition: var(--transition-colors);
 }
 
-.kroma-alert[data-shape="rounded"] .kroma-alert-close,
-.kroma-alert[data-shape="circle"] .kroma-alert-close {
+.kroma-alert[data-shape="rounded"] .kroma-alert-close {
   top: var(--space-4);
   right: var(--space-4);
 }

src/css/components/alert.css

@@ -10,8 +10,16 @@
   font-weight: 500;
   position: relative;
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-  box-shadow: var(--shadow-sm);
-  isolation: isolate; /* Prevent nested contexts from affecting styles */
+  box-shadow: var(--variant-shadow, var(--shadow-sm));
+  isolation: isolate;
+}
+
+.kroma-avatar[data-variant="default"],
+.kroma-avatar:not([data-variant]) {
+  --variant-bg: var(--neutral-100);
+  --variant-text: var(--neutral-900);
+  --variant-shadow: var(--shadow-sm);
+  --variant-border: var(--neutral-200);
 }
 
 /* Avatar Sizes */
@@ -52,6 +60,8 @@
 .kroma-avatar[data-variant] {
   background-color: var(--variant-bg);
   color: var(--variant-text);
+  box-shadow: var(--variant-shadow);
+  border: 1px solid var(--variant-border);
 }
 
 /* Ghost Variant */
@@ -62,7 +72,7 @@
   box-shadow: none;
 }
 
-.kroma-avatar[data-variant="ghost"] .avatar-status {
+.kroma-avatar[data-variant="ghost"] .kroma-avatar-status {
   background-color: transparent;
   border: 2px dashed var(--neutral-400);
 }
@@ -78,14 +88,14 @@
 
 .kroma-avatar img:hover {
   transform: scale(1.1);
-} /* Zoom effect on hover */
+}
 
 /* Initials Avatar */
 .kroma-avatar-initials {
   font-size: inherit;
-  font-weight: 700; /* Bold initials for better visibility */
-  line-height: 1; /* Prevent misalignment */
-  text-transform: uppercase; /* Uniform appearance for initials */
+  font-weight: 700;
+  line-height: 1;
+  text-transform: uppercase;
 }
 
 /* Status Indicators */
@@ -96,7 +106,7 @@
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
-  border: 2px solid var(--status-border-color, #fff); /* Customizable border color */
+  border: 2px solid var(--status-border-color, #fff);
   background-color: var(--status-color, var(--success-bg));
   box-shadow: var(--shadow-sm);
 }
@@ -125,9 +135,9 @@
 }
 
 .kroma-avatar-group .kroma-avatar:not(:first-child) {
-  margin-left: -0.5rem; /* Overlap effect */
-  border: 2px solid var(--group-border-color, #fff); /* Customizable overlap border */
-  box-shadow: var(--shadow-sm); /* Slight shadow for depth */
+  margin-left: -0.5rem;
+  border: 2px solid var(--group-border-color, #fff);
+  box-shadow: var(--shadow-sm);
 }
 
 /* Pulsing Avatar Effect */
@@ -164,7 +174,7 @@
 .kroma-avatar[data-disabled="true"] {
   opacity: 0.5;
   cursor: not-allowed;
-  pointer-events: none; /* Prevent interaction */
+  pointer-events: none;
 }
 
 /* Bordered Avatar */

src/css/components/avatar.css

@@ -14,7 +14,15 @@
   text-transform: uppercase;
   white-space: nowrap;
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--variant-shadow, var(--shadow-sm));
+}
+
+.kroma-badge[data-variant="default"],
+.kroma-badge:not([data-variant]) {
+  --variant-bg: var(--neutral-700);
+  --variant-text: #ffffff;
+  --variant-shadow: var(--shadow-sm);
+  --variant-light-bg: var(--neutral-500);
 }
 
 /* Outline Variant */

src/css/components/badge.css

@@ -12,6 +12,13 @@
   transition: color 0.3s ease;
 }
 
+.kroma-breadcrumbs[data-variant="default"],
+.kroma-breadcrumbs:not([data-variant]) {
+  --variant-text: var(--neutral-700);
+  --variant-hover: var(--primary-hover);
+  --variant-separator: var(--neutral-400);
+}
+
 /* Breadcrumb Item */
 .kroma-breadcrumb-item {
   display: inline-flex;
@@ -63,7 +70,7 @@
 
 /* Breadcrumb Color Variants */
 .kroma-breadcrumbs[data-variant] {
-  --variant-text: var(--variant-bg); /* Fallback to --variant-bg for text color */
+  --variant-text: var(--variant-bg);
   --variant-hover: var(--variant-hover-bg);
   --variant-separator: var(--variant-light-bg);
 }

src/css/components/breadcrumbs.css

@@ -17,10 +17,18 @@
   transition: color var(--transition-colors), background-color var(--transition-colors), transform 0.2s;
   background: var(--kroma-btn-bg, var(--primary-bg));
   color: var(--kroma-btn-color, var(--primary-text));
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--variant-shadow, var(--shadow-md));
   overflow: hidden;
 }
 
+.kroma-btn[data-variant="default"],
+.kroma-btn:not([data-variant]) {
+  --kroma-btn-bg: var(--neutral-700);
+  --kroma-btn-bg-hover: var(--neutral-800);
+  --kroma-btn-color: #fff;
+  --variant-shadow: var(--shadow-sm);
+}
+
 /* Hover and Active States */
 .kroma-btn:hover {
   background: var(--kroma-btn-bg-hover, var(--primary-hover-bg));