Fix tabs, toast, rating palette

Author: Ohswedd

css/components/rating.css

@@ -9,11 +9,7 @@
     box-shadow: var(--shadow-sm);
     transition: var(--transition-all);
     position: relative;
-}
-
-/* Variants for Data-driven Styling */
-.rating[data-variant] {
-    --star-color: var(--variant-bg);
+    --star-color: var(--variant-bg); /* Directly applying variant variables */
     --star-color-hover: var(--variant-hover);
     --star-color-shadow: var(--variant-shadow);
 }

css/components/tabs.css

@@ -15,30 +15,12 @@
   width: fit-content;
 }
 
-/* Active Tab Colors for Variants */
-[data-variant="primary"] .tab-active {
-  color: var(--variant-text);
-  background-color: var(--variant-bg);
-}
-[data-variant="secondary"] .tab-active {
-  color: var(--variant-text);
-  background-color: var(--variant-bg);
-}
-[data-variant="success"] .tab-active {
-  color: var(--variant-text);
-  background-color: var(--variant-bg);
-}
-[data-variant="warning"] .tab-active {
-  color: var(--variant-text);
-  background-color: var(--variant-bg);
-}
-[data-variant="danger"] .tab-active {
-  color: var(--variant-text);
-  background-color: var(--variant-bg);
-}
-[data-variant="info"] .tab-active {
+/* Active Tab */
+.tab-active {
   color: var(--variant-text);
   background-color: var(--variant-bg);
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+  border-radius: var(--radius-md);
 }
 
 /* Horizontal Layout */
@@ -80,19 +62,12 @@
   border-radius: var(--radius-md);
   outline: none;
 }
+
 .tab:hover,
 .tab:focus {
   color: var(--variant-hover);
 }
 
-/* Active Tab */
-.tab-active {
-  color: var(--variant-text);
-  background-color: var(--variant-hover-bg);
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
-  border-radius: var(--radius-md);
-}
-
 /* Underlined Variant */
 [data-style="underlined"] .tab-active::after {
   content: "";
@@ -159,13 +134,15 @@
   [data-layout="vertical"] {
     flex-direction: column;
   }
+
   [data-layout="vertical"] .tabs {
     flex-direction: row;
     border-right: none;
     border-bottom: 2px solid var(--variant-border);
     padding-right: 0;
     padding-bottom: var(--space-1);
   }
+
   [data-layout="vertical"] .tab-content {
     margin-left: 0;
     margin-top: var(--space-2);

css/components/toast.css

@@ -5,22 +5,22 @@
   gap: var(--space-2);
   padding: clamp(0.75rem, 1vw, 0.75rem);
   width: clamp(200px, 50%, 350px);
-  background-color: var(--neutral-50);
-  color: var(--neutral-900);
-  border: 1px solid var(--neutral-200);
+  background-color: var(--variant-bg);
+  color: var(--variant-text);
+  border: 1px solid var(--variant-border);
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--variant-shadow);
   position: fixed;
   pointer-events: all;
   transition: transform 0.3s ease, opacity 0.3s ease;
   z-index: 9999;
 }
 
 /* Toast Position Variants */
-.toast[data-position="top-right"], [data-position="bottom-right"] { right: 1rem; }
+.toast[data-position="top-right"], .toast[data-position="bottom-right"] { right: 1rem; }
 .toast[data-position="top-right"] { top: 1rem; }
 .toast[data-position="bottom-right"] { bottom: 1rem; }
-.toast[data-position="top-left"], [data-position="bottom-left"] { left: 1rem; }
+.toast[data-position="top-left"], .toast[data-position="bottom-left"] { left: 1rem; }
 .toast[data-position="top-left"] { top: 1rem; }
 .toast[data-position="bottom-left"] { bottom: 1rem; }
 .toast[data-position="top-center"] {
@@ -43,8 +43,8 @@
   position: absolute;
   top: -0.75rem;
   right: -0.75rem;
-  background-color: var(--neutral-500);
-  color: white;
+  background-color: var(--variant-hover);
+  color: var(--variant-text);
   border-radius: 50%;
   width: 1.5rem;
   height: 1.5rem;
@@ -53,7 +53,7 @@
   justify-content: center;
   font-size: 0.75rem;
   font-weight: bold;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--variant-shadow);
 }
 [data-position="top-left"] .toast-stack-count,
 [data-position="bottom-left"] .toast-stack-count {
@@ -83,17 +83,6 @@
   transform: translateY(20px);
 }
 
-/* Toast Variants */
-.toast[data-variant="primary"] { background-color: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }
-.toast[data-variant="secondary"] { border-color: var(--secondary); background-color: var(--neutral-50); color: var(--neutral-900); }
-.toast[data-variant="success"] { border-color: var(--success); background-color: var(--neutral-50); color: var(--neutral-900); }
-.toast[data-variant="danger"] { border-color: var(--danger); background-color: var(--neutral-50); color: var(--neutral-900); }
-.toast[data-variant="warning"] { border-color: var(--warning); background-color: var(--neutral-50); color: var(--neutral-900); }
-.toast[data-variant="info"] { border-color: var(--info); background-color: var(--neutral-50); color: var(--neutral-900); }
-
-/* Borderless Toast */
-.toast[data-border="false"] { border: none; }
-
 /* Dismiss Button */
 .toast-dismiss {
   position: absolute;
@@ -102,11 +91,11 @@
   background: none;
   border: none;
   font-size: 1.25rem;
-  color: var(--neutral-500);
+  color: var(--variant-text);
   cursor: pointer;
   transition: color 0.2s;
 }
-.toast-dismiss:hover { color: var(--neutral-700); }
+.toast-dismiss:hover { color: var(--variant-hover); }
 
 /* Auto-Dismiss Progress Bar */
 .toast-progress {
@@ -116,82 +105,12 @@
   height: 4px;
   width: 100%;
   border-radius: 0 0 var(--radius-md) var(--radius-md);
-  animation: toast-progress-bar linear forwards paused;
-  background-color: currentColor;
+  animation: toast-progress-bar linear forwards;
+  background-color: var(--variant-dark-bg);
 }
 
-/* Dynamic Progress Bar Colors */
-[data-variant="primary"] .toast-progress { background-color: var(--primary); }
-[data-variant="secondary"] .toast-progress { background-color: var(--secondary); }
-[data-variant="success"] .toast-progress { background-color: var(--success); }
-[data-variant="danger"] .toast-progress { background-color: var(--danger); }
-[data-variant="warning"] .toast-progress { background-color: var(--warning); }
-[data-variant="info"] .toast-progress { background-color: var(--info); }
-
 /* Progress Bar Animation */
 @keyframes toast-progress-bar {
   from { width: 100%; }
   to { width: 0%; }
 }
-
-/* Toast History Container */
-.toast-history-container {
-  position: fixed;
-  bottom: 2rem;
-  right: 1rem;
-  max-width: 300px;
-  background-color: var(--neutral-50);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  overflow-y: auto;
-  max-height: 60vh;
-  padding: var(--space-4);
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  scrollbar-color: var(--primary) var(--neutral-200);
-  scrollbar-width: thin;
-}
-
-.toast-history-container::-webkit-scrollbar {
-  width: 8px;
-}
-.toast-history-container::-webkit-scrollbar-thumb {
-  background-color: var(--primary);
-  border-radius: 4px;
-}
-.toast-history-container::-webkit-scrollbar-track {
-  background-color: var(--neutral-200);
-}
-
-/* Toast History Item */
-.toast-history-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2);
-  border-radius: var(--radius-sm);
-  font-size: 0.875rem;
-  color: var(--neutral-800);
-}
-.toast-history-item[data-variant="primary"] { background-color: var(--primary-light); color: var(--primary-dark); }
-.toast-history-item[data-variant="secondary"] { background-color: var(--secondary); color: var(--neutral-50); }
-.toast-history-item[data-variant="success"] { background-color: var(--success); color: white; }
-.toast-history-item[data-variant="danger"] { background-color: var(--danger); color: white; }
-.toast-history-item[data-variant="warning"] { background-color: var(--warning); color: white; }
-.toast-history-item[data-variant="info"] { background-color: var(--info); color: white; }
-
-/* History Close Button */
-.toast-history-close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  color: var(--neutral-500);
-  cursor: pointer;
-  transition: color 0.2s;
-}
-.toast-history-close:hover { color: var(--neutral-700); }

demo.html

@@ -1107,7 +1107,6 @@ <h2 class="font-lg text-primary my-4">Toast Component Demo</h2>
         <button class="btn" data-variant="primary" onclick="showToast('Top-Left Positioned Toast', 'primary', 'top-left')">Top-Left Position</button>
         <button class="btn" data-variant="secondary" onclick="showToast('Bottom-Center Positioned Toast', 'secondary', 'bottom-center')">Bottom-Center Position</button>
         <button class="btn" data-variant="primary" onclick="showToast('Auto-dismiss Toast', 'primary', 'top-right', true, 5)">Auto-Dismiss (5s)</button>
-        <button class="btn" data-variant="info" onclick="showToastHistory()">Show Toast History</button>
     </div>
   </section>
 

js/components/toast.js

@@ -1,5 +1,3 @@
-let toastHistory = [];
-
 // Function to show toast with updated data-* attributes for customization
 export function showToast(message, variant = 'primary', position = 'top-right', autoDismiss = false, dismissDuration = 5) {
     // Create or get existing container based on position
@@ -49,9 +47,6 @@ export function showToast(message, variant = 'primary', position = 'top-right',
     // Apply entry animation
     toast.classList.add('toast-enter');
     setTimeout(() => toast.classList.remove('toast-enter'), 300);
-
-    // Save toast in history
-    toastHistory.push({ message, variant });
 }
 
 // Start auto-dismiss functionality with a progress bar
@@ -97,33 +92,3 @@ export function dismissToast(toastElement) {
         }
     }, 300);
 }
-
-// Show toast history in a dedicated container
-export function showToastHistory() {
-    const existingHistory = document.querySelector('.toast-history-container');
-    if (existingHistory) existingHistory.remove();
-
-    const historyContainer = document.createElement('div');
-    historyContainer.className = 'toast-history-container';
-    historyContainer.innerHTML = `
-        <button class="toast-history-close" onclick="closeToastHistory()">&times;</button>
-    `;
-
-    // Add each toast history item to the container
-    toastHistory.slice().reverse().forEach(item => {
-        const historyItem = document.createElement('div');
-        historyItem.className = 'toast-history-item';
-        historyItem.setAttribute('data-variant', item.variant);
-        historyItem.innerHTML = `<span>${item.message}</span>`;
-        historyContainer.appendChild(historyItem);
-    });
-
-    // Append the history container to the body
-    document.body.appendChild(historyContainer);
-}
-
-// Close the toast history container
-export function closeToastHistory() {
-    const historyContainer = document.querySelector('.toast-history-container');
-    if (historyContainer) historyContainer.remove();
-}

js/main.js

@@ -2,7 +2,7 @@
 import { toggleAccordion } from './components/accordion.js';
 import { showHologram } from './components/hologram.js';
 import { showTabContent } from './components/tabs.js';
-import { showToast, showToastHistory, dismissToast, startAutoDismiss, pauseAllProgressBars, closeToastHistory } from './components/toast.js';
+import { showToast, dismissToast, startAutoDismiss, pauseAllProgressBars } from './components/toast.js';
 import { Modal } from './components/modal.js';
 import { MultiSelect } from './components/multiselect.js';
 import { DateTimePicker } from './components/datetime-picker.js';
@@ -47,11 +47,9 @@ window.toggleAccordion = toggleAccordion;
 window.showHologram = showHologram;
 window.showTabContent = showTabContent;
 window.showToast = showToast;
-window.showToastHistory = showToastHistory;
 window.dismissToast = dismissToast;
 window.startAutoDismiss = startAutoDismiss;
 window.pauseAllProgressBars = pauseAllProgressBars;
-window.closeToastHistory = closeToastHistory;
 window.Modal = Modal;
 window.MultiSelect = MultiSelect;
 window.DateTimePicker = DateTimePicker;