diff --git a/src/css/bundle.css b/src/css/bundle.css index 8cc8d38..fd08737 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -615,12 +615,22 @@ blockquote { /* --- accordion.css --- */ /* Base Accordion Container */ .kroma-accordion-container { + display: flex; + flex-direction: column; max-width: 100%; margin: auto; padding: var(--space-4); - border-radius: var(--radius-md); - box-shadow: var(--shadow-md); + 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; +} + +.kroma-accordion-container[data-responsive="auto"] { + margin: 2vw auto; + padding: clamp(var(--space-3), 2vw, var(--space-6)); + display: flex; + justify-content: center; } /* Accordion Item */ @@ -637,31 +647,38 @@ blockquote { justify-content: space-between; align-items: center; width: 100%; - padding: clamp(var(--space-3), 1vw + var(--space-2), var(--space-5)); + padding: clamp(var(--space-3), 1.5vw, var(--space-5)); font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem); - font-weight: 500; + font-weight: 600; color: var(--neutral-700); cursor: pointer; background-color: var(--neutral-50); - border: none; - border-radius: var(--radius-md); - transition: background-color var(--transition-colors), box-shadow var(--transition-all); + border: 1px solid transparent; + border-radius: var(--radius-lg); + transition: background-color 0.3s ease, box-shadow 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); outline: none; } +.kroma-accordion-header:focus-visible { + border: 1px solid var(--focus-color); +} /* Accordion Content */ -.kroma-accordion-content, -.kroma-accordion-sub-content { +.kroma-accordion-content { height: 0; overflow: hidden; - transition: height 0.4s ease; + transition: height 0.4s ease, padding 0.3s ease; padding: 0 var(--space-3); background-color: var(--neutral-50); } +.kroma-accordion-content[data-expanded="true"] { + height: auto; + padding: var(--space-3) var(--space-4); +} /* Sub-Item */ .kroma-accordion-sub-item { @@ -670,17 +687,17 @@ blockquote { transition: padding 0.3s ease; } .kroma-accordion-sub-header { - padding: clamp(var(--space-2), 1vw + var(--space-1), var(--space-3)); + padding: clamp(var(--space-2), 1vw, var(--space-4)); font-size: 0.9rem; - font-weight: 400; + font-weight: 500; color: var(--neutral-500); cursor: pointer; background: var(--neutral-50); border: none; text-align: left; width: 100%; - border-radius: var(--radius-md); - transition: background-color var(--transition-colors); + border-radius: var(--radius-lg); + transition: background-color 0.3s ease; } .kroma-accordion-sub-header:hover { background-color: var(--neutral-100); @@ -700,14 +717,29 @@ blockquote { /* Responsive Design */ @media (max-width: 768px) { .kroma-accordion-container { - padding: var(--space-2); + padding: var(--space-3); + box-shadow: none; } .kroma-accordion-header, .kroma-accordion-sub-header { - padding: var(--space-2); + padding: var(--space-3); } } +/* Versione Senza Background */ +.kroma-accordion-container[data-background="none"] { + background-color: transparent; + box-shadow: none; +} +.kroma-accordion-container[data-background="none"] .kroma-accordion-header { + background-color: transparent; + border: none; + box-shadow: none; +} +.kroma-accordion-container[data-background="none"] .kroma-accordion-content { + background-color: transparent; +} + /* --- alert.css --- */ /* Base Alert Styles */ diff --git a/src/css/components/accordion.css b/src/css/components/accordion.css index 39146f5..b1d6f52 100644 --- a/src/css/components/accordion.css +++ b/src/css/components/accordion.css @@ -1,11 +1,21 @@ /* Base Accordion Container */ .kroma-accordion-container { + display: flex; + flex-direction: column; max-width: 100%; margin: auto; padding: var(--space-4); - border-radius: var(--radius-md); - box-shadow: var(--shadow-md); + 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; +} + +.kroma-accordion-container[data-responsive="auto"] { + margin: 2vw auto; + padding: clamp(var(--space-3), 2vw, var(--space-6)); + display: flex; + justify-content: center; } /* Accordion Item */ @@ -22,31 +32,38 @@ justify-content: space-between; align-items: center; width: 100%; - padding: clamp(var(--space-3), 1vw + var(--space-2), var(--space-5)); + padding: clamp(var(--space-3), 1.5vw, var(--space-5)); font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem); - font-weight: 500; + font-weight: 600; color: var(--neutral-700); cursor: pointer; background-color: var(--neutral-50); - border: none; - border-radius: var(--radius-md); - transition: background-color var(--transition-colors), box-shadow var(--transition-all); + border: 1px solid transparent; + border-radius: var(--radius-lg); + transition: background-color 0.3s ease, box-shadow 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); outline: none; } +.kroma-accordion-header:focus-visible { + border: 1px solid var(--focus-color); +} /* Accordion Content */ -.kroma-accordion-content, -.kroma-accordion-sub-content { +.kroma-accordion-content { height: 0; overflow: hidden; - transition: height 0.4s ease; + transition: height 0.4s ease, padding 0.3s ease; padding: 0 var(--space-3); background-color: var(--neutral-50); } +.kroma-accordion-content[data-expanded="true"] { + height: auto; + padding: var(--space-3) var(--space-4); +} /* Sub-Item */ .kroma-accordion-sub-item { @@ -55,17 +72,17 @@ transition: padding 0.3s ease; } .kroma-accordion-sub-header { - padding: clamp(var(--space-2), 1vw + var(--space-1), var(--space-3)); + padding: clamp(var(--space-2), 1vw, var(--space-4)); font-size: 0.9rem; - font-weight: 400; + font-weight: 500; color: var(--neutral-500); cursor: pointer; background: var(--neutral-50); border: none; text-align: left; width: 100%; - border-radius: var(--radius-md); - transition: background-color var(--transition-colors); + border-radius: var(--radius-lg); + transition: background-color 0.3s ease; } .kroma-accordion-sub-header:hover { background-color: var(--neutral-100); @@ -85,10 +102,25 @@ /* Responsive Design */ @media (max-width: 768px) { .kroma-accordion-container { - padding: var(--space-2); + padding: var(--space-3); + box-shadow: none; } .kroma-accordion-header, .kroma-accordion-sub-header { - padding: var(--space-2); + padding: var(--space-3); } } + +/* Versione Senza Background */ +.kroma-accordion-container[data-background="none"] { + background-color: transparent; + box-shadow: none; +} +.kroma-accordion-container[data-background="none"] .kroma-accordion-header { + background-color: transparent; + border: none; + box-shadow: none; +} +.kroma-accordion-container[data-background="none"] .kroma-accordion-content { + background-color: transparent; +} From e1a219507851ad6feb80e4fcd2a5a974334aca5d Mon Sep 17 00:00:00 2001 From: Ohswedd Date: Fri, 29 Nov 2024 21:04:11 +0100 Subject: [PATCH 3/7] New palette & variants --- src/css/bundle.css | 439 +++++++++++++++++++++----------------- src/css/design-tokens.css | 439 +++++++++++++++++++++----------------- 2 files changed, 480 insertions(+), 398 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index fd08737..f31fce4 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -9,86 +9,94 @@ License: CC BY-ND 4.0 /* --- design-tokens.css --- */ :root { /* Colors */ - --neutral-50: #f9fafb; /* Light background */ - --neutral-100: #f1f5f9; - --neutral-200: #e2e8f0; - --neutral-300: #cbd5e1; /* Mid-light for subtle contrasts */ - --neutral-400: #94a3b8; - --neutral-500: #64748b; /* Accent light neutral */ - --neutral-600: #475569; - --neutral-700: #334155; - --neutral-800: #1e293b; - --neutral-900: #0f172a; /* Darkest text on light mode */ + --neutral-50: #f8fafc; + --neutral-100: #eef2f6; + --neutral-200: #d9e2ec; + --neutral-300: #bcccdc; + --neutral-400: #98a6c5; + --neutral-500: #667693; + --neutral-600: #4a566b; + --neutral-700: #354152; + --neutral-800: #202c3c; + --neutral-900: #131926; + /* Primary Variants */ - --primary-bg: rgba(59, 130, 246, 1); - --primary-light-bg: rgba(59, 130, 246, 0.15); - --primary-dark-bg: rgba(37, 99, 235, 1); - --primary-hover: rgba(59, 130, 246, 0.75); - --primary-hover-bg: rgba(59, 130, 246, 0.9); + --primary-bg: rgba(54, 118, 228, 1); + --primary-light-bg: rgba(54, 118, 228, 0.12); + --primary-dark-bg: rgba(37, 84, 187, 1); + --primary-hover: rgba(54, 118, 228, 0.8); + --primary-hover-bg: rgba(54, 118, 228, 0.95); --primary-text: #ffffff; - --primary-border: rgba(37, 99, 235, 1); - --primary-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); + --primary-border: rgba(37, 84, 187, 1); + --primary-shadow: 0 3px 8px rgba(54, 118, 228, 0.35); + /* Secondary Variants */ - --secondary-bg: rgba(100, 116, 139, 1); - --secondary-light-bg: rgba(100, 116, 139, 0.15); - --secondary-dark-bg: rgba(71, 85, 105, 1); - --secondary-hover: rgba(100, 116, 139, 0.75); - --secondary-hover-bg: rgba(100, 116, 139, 0.9); + --secondary-bg: rgba(84, 98, 120, 1); + --secondary-light-bg: rgba(84, 98, 120, 0.12); + --secondary-dark-bg: rgba(59, 69, 89, 1); + --secondary-hover: rgba(84, 98, 120, 0.8); + --secondary-hover-bg: rgba(84, 98, 120, 0.95); --secondary-text: #ffffff; - --secondary-border: rgba(71, 85, 105, 1); - --secondary-shadow: 0 2px 6px rgba(100, 116, 139, 0.3); + --secondary-border: rgba(59, 69, 89, 1); + --secondary-shadow: 0 3px 8px rgba(84, 98, 120, 0.35); + /* Success Variants */ - --success-bg: rgba(16, 185, 129, 1); - --success-light-bg: rgba(16, 185, 129, 0.15); - --success-dark-bg: rgba(4, 120, 87, 1); - --success-hover: rgba(16, 185, 129, 0.75); - --success-hover-bg: rgba(16, 185, 129, 0.9); + --success-bg: rgba(15, 150, 100, 1); + --success-light-bg: rgba(15, 150, 100, 0.12); + --success-dark-bg: rgba(10, 110, 80, 1); + --success-hover: rgba(15, 150, 100, 0.8); + --success-hover-bg: rgba(15, 150, 100, 0.95); --success-text: #ffffff; - --success-border: rgba(4, 120, 87, 1); - --success-shadow: 0 2px 6px rgba(16, 185, 129, 0.3); + --success-border: rgba(10, 110, 80, 1); + --success-shadow: 0 3px 8px rgba(15, 150, 100, 0.35); + /* Danger Variants */ - --danger-bg: rgba(239, 68, 68, 1); - --danger-light-bg: rgba(239, 68, 68, 0.15); - --danger-dark-bg: rgba(185, 28, 28, 1); - --danger-hover: rgba(239, 68, 68, 0.75); - --danger-hover-bg: rgba(239, 68, 68, 0.9); + --danger-bg: rgba(220, 50, 50, 1); + --danger-light-bg: rgba(220, 50, 50, 0.12); + --danger-dark-bg: rgba(180, 30, 30, 1); + --danger-hover: rgba(220, 50, 50, 0.8); + --danger-hover-bg: rgba(220, 50, 50, 0.95); --danger-text: #ffffff; - --danger-border: rgba(185, 28, 28, 1); - --danger-shadow: 0 2px 6px rgba(239, 68, 68, 0.3); + --danger-border: rgba(180, 30, 30, 1); + --danger-shadow: 0 3px 8px rgba(220, 50, 50, 0.35); + /* Warning Variants */ - --warning-bg: rgba(245, 158, 11, 1); - --warning-light-bg: rgba(245, 158, 11, 0.15); - --warning-dark-bg: rgba(202, 138, 4, 1); - --warning-hover: rgba(245, 158, 11, 0.75); - --warning-hover-bg: rgba(245, 158, 11, 0.9); + --warning-bg: rgba(240, 140, 10, 1); + --warning-light-bg: rgba(240, 140, 10, 0.12); + --warning-dark-bg: rgba(200, 110, 5, 1); + --warning-hover: rgba(240, 140, 10, 0.8); + --warning-hover-bg: rgba(240, 140, 10, 0.95); --warning-text: #ffffff; - --warning-border: rgba(202, 138, 4, 1); - --warning-shadow: 0 2px 6px rgba(245, 158, 11, 0.3); + --warning-border: rgba(200, 110, 5, 1); + --warning-shadow: 0 3px 8px rgba(240, 140, 10, 0.35); + /* Info Variants */ - --info-bg: rgba(59, 130, 246, 1); - --info-light-bg: rgba(59, 130, 246, 0.15); - --info-dark-bg: rgba(37, 99, 235, 1); - --info-hover: rgba(59, 130, 246, 0.75); - --info-hover-bg: rgba(59, 130, 246, 0.9); + --info-bg: rgba(50, 100, 230, 1); + --info-light-bg: rgba(50, 100, 230, 0.12); + --info-dark-bg: rgba(30, 80, 190, 1); + --info-hover: rgba(50, 100, 230, 0.8); + --info-hover-bg: rgba(50, 100, 230, 0.95); --info-text: #ffffff; - --info-border: rgba(37, 99, 235, 1); - --info-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); + --info-border: rgba(30, 80, 190, 1); + --info-shadow: 0 3px 8px rgba(50, 100, 230, 0.35); + /* Accent Variants */ - --accent-bg: rgba(124, 58, 237, 1); - --accent-light-bg: rgba(124, 58, 237, 0.15); - --accent-dark-bg: rgba(91, 33, 182, 1); - --accent-hover: rgba(124, 58, 237, 0.75); - --accent-hover-bg: rgba(124, 58, 237, 0.9); + --accent-bg: rgba(100, 50, 220, 1); + --accent-light-bg: rgba(100, 50, 220, 0.12); + --accent-dark-bg: rgba(70, 30, 180, 1); + --accent-hover: rgba(100, 50, 220, 0.8); + --accent-hover-bg: rgba(100, 50, 220, 0.95); --accent-text: #ffffff; - --accent-border: rgba(91, 33, 182, 1); - --accent-shadow: 0 2px 6px rgba(124, 58, 237, 0.3); + --accent-border: rgba(70, 30, 180, 1); + --accent-shadow: 0 3px 8px rgba(100, 50, 220, 0.35); + /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); @@ -139,86 +147,86 @@ License: CC BY-ND 4.0 /* Dark Mode */ .dark-mode { /* Neutral Colors for Dark Mode */ - --neutral-50: #121826; /* Dark background */ - --neutral-100: #1a2334; - --neutral-200: #2b364a; - --neutral-300: #3b4a62; /* Mid-dark for subtle contrasts */ - --neutral-400: #4a5d7c; - --neutral-500: #5f728c; /* Accent dark neutral */ - --neutral-600: #718096; - --neutral-700: #a0aec0; - --neutral-800: #cbd5e0; - --neutral-900: #e5eaf0; /* Lightest text on dark mode */ + --neutral-50: #0f141e; + --neutral-100: #161e2b; + --neutral-200: #202a3b; + --neutral-300: #2c3a50; + --neutral-400: #3a4e6b; + --neutral-500: #52657e; + --neutral-600: #697a91; + --neutral-700: #b8c4d4; + --neutral-800: #d8e1ec; + --neutral-900: #f2f6fb; /* Primary Variants */ - --primary-bg: rgba(37, 99, 235, 1); - --primary-light-bg: rgba(37, 99, 235, 0.15); - --primary-dark-bg: rgba(29, 78, 216, 1); - --primary-hover: rgba(37, 99, 235, 0.75); - --primary-hover-bg: rgba(37, 99, 235, 0.9); - --primary-text: #e0f2fe; /* Light text for contrast */ - --primary-border: rgba(29, 78, 216, 1); - --primary-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); + --primary-bg: rgba(45, 105, 245, 1); + --primary-light-bg: rgba(45, 105, 245, 0.12); + --primary-dark-bg: rgba(35, 85, 200, 1); + --primary-hover: rgba(45, 105, 245, 0.8); + --primary-hover-bg: rgba(45, 105, 245, 0.95); + --primary-text: #dbeafe; + --primary-border: rgba(35, 85, 200, 1); + --primary-shadow: 0 4px 12px rgba(45, 105, 245, 0.3); /* Secondary Variants */ - --secondary-bg: rgba(71, 85, 105, 1); - --secondary-light-bg: rgba(71, 85, 105, 0.15); - --secondary-dark-bg: rgba(55, 65, 81, 1); - --secondary-hover: rgba(71, 85, 105, 0.75); - --secondary-hover-bg: rgba(71, 85, 105, 0.9); - --secondary-text: #f1f5f9; - --secondary-border: rgba(55, 65, 81, 1); - --secondary-shadow: 0 2px 6px rgba(71, 85, 105, 0.3); + --secondary-bg: rgba(80, 95, 120, 1); + --secondary-light-bg: rgba(80, 95, 120, 0.12); + --secondary-dark-bg: rgba(65, 75, 95, 1); + --secondary-hover: rgba(80, 95, 120, 0.8); + --secondary-hover-bg: rgba(80, 95, 120, 0.95); + --secondary-text: #e2e8f0; + --secondary-border: rgba(65, 75, 95, 1); + --secondary-shadow: 0 4px 12px rgba(80, 95, 120, 0.3); /* Success Variants */ - --success-bg: rgba(4, 120, 87, 1); - --success-light-bg: rgba(4, 120, 87, 0.15); - --success-dark-bg: rgba(2, 85, 65, 1); - --success-hover: rgba(4, 120, 87, 0.75); - --success-hover-bg: rgba(4, 120, 87, 0.9); - --success-text: #d1fae5; - --success-border: rgba(2, 85, 65, 1); - --success-shadow: 0 2px 6px rgba(4, 120, 87, 0.3); + --success-bg: rgba(6, 135, 92, 1); + --success-light-bg: rgba(6, 135, 92, 0.12); + --success-dark-bg: rgba(4, 100, 70, 1); + --success-hover: rgba(6, 135, 92, 0.8); + --success-hover-bg: rgba(6, 135, 92, 0.95); + --success-text: #bde7d8; + --success-border: rgba(4, 100, 70, 1); + --success-shadow: 0 4px 12px rgba(6, 135, 92, 0.3); /* Danger Variants */ - --danger-bg: rgba(185, 28, 28, 1); - --danger-light-bg: rgba(185, 28, 28, 0.15); - --danger-dark-bg: rgba(153, 27, 27, 1); - --danger-hover: rgba(185, 28, 28, 0.75); - --danger-hover-bg: rgba(185, 28, 28, 0.9); - --danger-text: #fecaca; - --danger-border: rgba(153, 27, 27, 1); - --danger-shadow: 0 2px 6px rgba(185, 28, 28, 0.3); + --danger-bg: rgba(200, 35, 35, 1); + --danger-light-bg: rgba(200, 35, 35, 0.12); + --danger-dark-bg: rgba(160, 25, 25, 1); + --danger-hover: rgba(200, 35, 35, 0.8); + --danger-hover-bg: rgba(200, 35, 35, 0.95); + --danger-text: #ffc7c7; + --danger-border: rgba(160, 25, 25, 1); + --danger-shadow: 0 4px 12px rgba(200, 35, 35, 0.3); /* Warning Variants */ - --warning-bg: rgba(202, 138, 4, 1); - --warning-light-bg: rgba(202, 138, 4, 0.15); - --warning-dark-bg: rgba(161, 98, 7, 1); - --warning-hover: rgba(202, 138, 4, 0.75); - --warning-hover-bg: rgba(202, 138, 4, 0.9); - --warning-text: #fde68a; - --warning-border: rgba(161, 98, 7, 1); - --warning-shadow: 0 2px 6px rgba(202, 138, 4, 0.3); + --warning-bg: rgba(220, 150, 10, 1); + --warning-light-bg: rgba(220, 150, 10, 0.12); + --warning-dark-bg: rgba(180, 120, 8, 1); + --warning-hover: rgba(220, 150, 10, 0.8); + --warning-hover-bg: rgba(220, 150, 10, 0.95); + --warning-text: #fde7b5; + --warning-border: rgba(180, 120, 8, 1); + --warning-shadow: 0 4px 12px rgba(220, 150, 10, 0.3); /* Info Variants */ - --info-bg: rgba(37, 99, 235, 1); - --info-light-bg: rgba(37, 99, 235, 0.15); - --info-dark-bg: rgba(29, 78, 216, 1); - --info-hover: rgba(37, 99, 235, 0.75); - --info-hover-bg: rgba(37, 99, 235, 0.9); - --info-text: #bfdbfe; - --info-border: rgba(29, 78, 216, 1); - --info-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); + --info-bg: rgba(40, 110, 230, 1); + --info-light-bg: rgba(40, 110, 230, 0.12); + --info-dark-bg: rgba(30, 85, 200, 1); + --info-hover: rgba(40, 110, 230, 0.8); + --info-hover-bg: rgba(40, 110, 230, 0.95); + --info-text: #c9e7ff; + --info-border: rgba(30, 85, 200, 1); + --info-shadow: 0 4px 12px rgba(40, 110, 230, 0.3); /* Accent Variants */ - --accent-bg: rgba(91, 33, 182, 1); - --accent-light-bg: rgba(91, 33, 182, 0.15); - --accent-dark-bg: rgba(72, 28, 152, 1); - --accent-hover: rgba(91, 33, 182, 0.75); - --accent-hover-bg: rgba(91, 33, 182, 0.9); - --accent-text: #e9d5ff; - --accent-border: rgba(72, 28, 152, 1); - --accent-shadow: 0 2px 6px rgba(91, 33, 182, 0.3); + --accent-bg: rgba(100, 50, 200, 1); + --accent-light-bg: rgba(100, 50, 200, 0.12); + --accent-dark-bg: rgba(80, 40, 160, 1); + --accent-hover: rgba(100, 50, 200, 0.8); + --accent-hover-bg: rgba(100, 50, 200, 0.95); + --accent-text: #e7d1ff; + --accent-border: rgba(80, 40, 160, 1); + --accent-shadow: 0 4px 12px rgba(100, 50, 200, 0.3); /* Shadows */ --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.1); @@ -228,81 +236,114 @@ License: CC BY-ND 4.0 } [data-variant="primary"] { - --variant-bg: var(--primary-bg); - --variant-light-bg: var(--primary-light-bg); - --variant-dark-bg: var(--primary-dark-bg); - --variant-text: var(--primary-text); - --variant-shadow: var(--primary-shadow); - --variant-border: var(--primary-border); - --variant-hover-bg: var(--primary-hover-bg); - --variant-hover: var(--primary-hover); - } - - [data-variant="secondary"] { - --variant-bg: var(--secondary-bg); - --variant-light-bg: var(--secondary-light-bg); - --variant-dark-bg: var(--secondary-dark-bg); - --variant-text: var(--secondary-text); - --variant-shadow: var(--secondary-shadow); - --variant-border: var(--secondary-border); - --variant-hover-bg: var(--secondary-hover-bg); - --variant-hover: var(--secondary-hover); - } - - [data-variant="accent"] { - --variant-bg: var(--accent-bg); - --variant-light-bg: var(--accent-light-bg); - --variant-dark-bg: var(--accent-dark-bg); - --variant-text: var(--accent-text); - --variant-shadow: var(--accent-shadow); - --variant-border: var(--accent-border); - --variant-hover-bg: var(--accent-hover-bg); - --variant-hover: var(--accent-hover); - } - - [data-variant="success"] { - --variant-bg: var(--success-bg); - --variant-light-bg: var(--success-light-bg); - --variant-dark-bg: var(--success-dark-bg); - --variant-text: var(--success-text); - --variant-shadow: var(--success-shadow); - --variant-border: var(--success-border); - --variant-hover-bg: var(--success-hover-bg); - --variant-hover: var(--success-hover); - } - - [data-variant="info"] { - --variant-bg: var(--info-bg); - --variant-light-bg: var(--info-light-bg); - --variant-dark-bg: var(--info-dark-bg); - --variant-text: var(--info-text); - --variant-shadow: var(--info-shadow); - --variant-border: var(--info-border); - --variant-hover-bg: var(--info-hover-bg); - --variant-hover: var(--info-hover); - } - - [data-variant="danger"] { - --variant-bg: var(--danger-bg); - --variant-light-bg: var(--danger-light-bg); - --variant-dark-bg: var(--danger-dark-bg); - --variant-text: var(--danger-text); - --variant-shadow: var(--danger-shadow); - --variant-border: var(--danger-border); - --variant-hover-bg: var(--danger-hover-bg); - --variant-hover: var(--danger-hover); - } + --variant-bg: var(--primary-bg); /* Sfondo principale */ + --variant-light-bg: var(--neutral-200); /* Sfondo per contrasto su hover */ + --variant-dark-bg: var(--primary-dark-bg); /* Bordo e ombre */ + --variant-text: var(--neutral-900); /* Testo chiaro su sfondo */ + --variant-shadow: var(--primary-shadow); /* Ombre leggere */ + --variant-border: var(--primary-border); /* Bordo visibile */ + --variant-hover-bg: var(--primary-hover-bg); /* Sfondo scuro su hover */ + --variant-hover: var(--primary-hover); /* Colore per elementi interattivi */ +} - [data-variant="warning"] { - --variant-bg: var(--warning-bg); - --variant-light-bg: var(--warning-light-bg); - --variant-dark-bg: var(--warning-dark-bg); - --variant-text: var(--warning-text); - --variant-shadow: var(--warning-shadow); - --variant-border: var(--warning-border); - --variant-hover-bg: var(--warning-hover-bg); - --variant-hover: var(--warning-hover); - } +[data-variant="secondary"] { + --variant-bg: var(--secondary-bg); /* Sfondo principale */ + --variant-light-bg: var(--neutral-300); /* Sfondo su hover */ + --variant-dark-bg: var(--secondary-dark-bg); /* Colore scuro */ + --variant-text: var(--neutral-800); /* Testo leggibile */ + --variant-shadow: var(--secondary-shadow); /* Ombre su sfondo */ + --variant-border: var(--secondary-border); /* Bordo chiaro */ + --variant-hover-bg: var(--secondary-hover-bg); /* Hover background */ + --variant-hover: var(--secondary-hover); /* Hover foreground */ +} + +[data-variant="accent"] { + --variant-bg: var(--accent-bg); /* Sfondo viola principale */ + --variant-light-bg: var(--neutral-200); /* Sfondo chiaro su hover */ + --variant-dark-bg: var(--accent-dark-bg); /* Dettagli scuri */ + --variant-text: var(--accent-text); /* Testo molto chiaro */ + --variant-shadow: var(--accent-shadow); /* Ombre morbide */ + --variant-border: var(--accent-border); /* Bordo viola intenso */ + --variant-hover-bg: var(--accent-hover-bg); /* Viola più scuro su hover */ + --variant-hover: var(--accent-hover); /* Elementi hover interattivi */ +} + +[data-variant="success"] { + --variant-bg: var(--success-bg); /* Verde scuro principale */ + --variant-light-bg: var(--neutral-300); /* Sfondo chiaro */ + --variant-dark-bg: var(--success-dark-bg); /* Verde più scuro */ + --variant-text: var(--success-text); /* Testo verde chiaro */ + --variant-shadow: var(--success-shadow); /* Ombre leggere */ + --variant-border: var(--success-border); /* Verde intenso per bordo */ + --variant-hover-bg: var(--success-hover-bg); /* Hover verde scuro */ + --variant-hover: var(--success-hover); /* Hover foreground */ +} + +[data-variant="info"] { + --variant-bg: var(--info-bg); /* Blu acceso principale */ + --variant-light-bg: var(--neutral-300); /* Sfondo chiaro */ + --variant-dark-bg: var(--info-dark-bg); /* Blu profondo */ + --variant-text: var(--info-text); /* Testo blu chiaro */ + --variant-shadow: var(--info-shadow); /* Ombre morbide */ + --variant-border: var(--info-border); /* Bordo blu intenso */ + --variant-hover-bg: var(--info-hover-bg); /* Blu più scuro su hover */ + --variant-hover: var(--info-hover); /* Elementi hover */ +} + +[data-variant="danger"] { + --variant-bg: var(--danger-bg); /* Rosso acceso principale */ + --variant-light-bg: var(--neutral-300); /* Sfondo chiaro */ + --variant-dark-bg: var(--danger-dark-bg); /* Rosso profondo */ + --variant-text: var(--danger-text); /* Testo chiaro */ + --variant-shadow: var(--danger-shadow); /* Ombre morbide */ + --variant-border: var(--danger-border); /* Bordo rosso intenso */ + --variant-hover-bg: var(--danger-hover-bg); /* Rosso più scuro su hover */ + --variant-hover: var(--danger-hover); /* Hover foreground */ +} + +[data-variant="warning"] { + --variant-bg: var(--warning-bg); /* Arancione brillante principale */ + --variant-light-bg: var(--neutral-200); /* Sfondo chiaro */ + --variant-dark-bg: var(--warning-dark-bg); /* Arancione scuro */ + --variant-text: var(--warning-text); /* Testo chiaro */ + --variant-shadow: var(--warning-shadow); /* Ombre morbide */ + --variant-border: var(--warning-border); /* Bordo arancione intenso */ + --variant-hover-bg: var(--warning-hover-bg); /* Arancione più scuro su hover */ + --variant-hover: var(--warning-hover); /* Hover foreground */ +} + +[data-variant="default"] { + --variant-bg: var(--neutral-100); /* Sfondo principale chiaro */ + --variant-light-bg: var(--neutral-50); /* Sfondo molto chiaro */ + --variant-dark-bg: var(--neutral-300); /* Sfondo scuro per contrasti */ + --variant-text: var(--neutral-900); /* Testo scuro */ + --variant-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombra leggera */ + --variant-border: var(--neutral-200); /* Bordo chiaro */ + --variant-hover-bg: var(--neutral-200); /* Sfondo scuro su hover */ + --variant-hover: var(--neutral-700); /* Colore del testo su hover */ +} + +[data-variant="dark"] { + --variant-bg: var(--neutral-800); /* Sfondo principale scuro */ + --variant-light-bg: var(--neutral-700); /* Sfondo interattivo più chiaro */ + --variant-dark-bg: var(--neutral-900); /* Sfondo più scuro */ + --variant-text: var(--neutral-50); /* Testo chiaro */ + --variant-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Ombra profonda */ + --variant-border: var(--neutral-600); /* Bordo scuro */ + --variant-hover-bg: var(--neutral-600); /* Sfondo chiaro su hover */ + --variant-hover: var(--neutral-300); /* Colore interattivo su hover */ +} + +[data-variant="light"] { + --variant-bg: var(--neutral-50); /* Sfondo molto chiaro */ + --variant-light-bg: var(--neutral-100); /* Sfondo chiaro intermedio */ + --variant-dark-bg: var(--neutral-200); /* Sfondo scuro per accenti */ + --variant-text: var(--neutral-700); /* Testo scuro */ + --variant-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Ombra morbida */ + --variant-border: var(--neutral-300); /* Bordo leggero */ + --variant-hover-bg: var(--neutral-200); /* Sfondo scuro su hover */ + --variant-hover: var(--neutral-500); /* Testo interattivo su hover */ +} /* --- base.css --- */ *, diff --git a/src/css/design-tokens.css b/src/css/design-tokens.css index 696f573..5b30cb7 100644 --- a/src/css/design-tokens.css +++ b/src/css/design-tokens.css @@ -1,85 +1,93 @@ :root { /* Colors */ - --neutral-50: #f9fafb; /* Light background */ - --neutral-100: #f1f5f9; - --neutral-200: #e2e8f0; - --neutral-300: #cbd5e1; /* Mid-light for subtle contrasts */ - --neutral-400: #94a3b8; - --neutral-500: #64748b; /* Accent light neutral */ - --neutral-600: #475569; - --neutral-700: #334155; - --neutral-800: #1e293b; - --neutral-900: #0f172a; /* Darkest text on light mode */ + --neutral-50: #f8fafc; + --neutral-100: #eef2f6; + --neutral-200: #d9e2ec; + --neutral-300: #bcccdc; + --neutral-400: #98a6c5; + --neutral-500: #667693; + --neutral-600: #4a566b; + --neutral-700: #354152; + --neutral-800: #202c3c; + --neutral-900: #131926; + /* Primary Variants */ - --primary-bg: rgba(59, 130, 246, 1); - --primary-light-bg: rgba(59, 130, 246, 0.15); - --primary-dark-bg: rgba(37, 99, 235, 1); - --primary-hover: rgba(59, 130, 246, 0.75); - --primary-hover-bg: rgba(59, 130, 246, 0.9); + --primary-bg: rgba(54, 118, 228, 1); + --primary-light-bg: rgba(54, 118, 228, 0.12); + --primary-dark-bg: rgba(37, 84, 187, 1); + --primary-hover: rgba(54, 118, 228, 0.8); + --primary-hover-bg: rgba(54, 118, 228, 0.95); --primary-text: #ffffff; - --primary-border: rgba(37, 99, 235, 1); - --primary-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); + --primary-border: rgba(37, 84, 187, 1); + --primary-shadow: 0 3px 8px rgba(54, 118, 228, 0.35); + /* Secondary Variants */ - --secondary-bg: rgba(100, 116, 139, 1); - --secondary-light-bg: rgba(100, 116, 139, 0.15); - --secondary-dark-bg: rgba(71, 85, 105, 1); - --secondary-hover: rgba(100, 116, 139, 0.75); - --secondary-hover-bg: rgba(100, 116, 139, 0.9); + --secondary-bg: rgba(84, 98, 120, 1); + --secondary-light-bg: rgba(84, 98, 120, 0.12); + --secondary-dark-bg: rgba(59, 69, 89, 1); + --secondary-hover: rgba(84, 98, 120, 0.8); + --secondary-hover-bg: rgba(84, 98, 120, 0.95); --secondary-text: #ffffff; - --secondary-border: rgba(71, 85, 105, 1); - --secondary-shadow: 0 2px 6px rgba(100, 116, 139, 0.3); + --secondary-border: rgba(59, 69, 89, 1); + --secondary-shadow: 0 3px 8px rgba(84, 98, 120, 0.35); + /* Success Variants */ - --success-bg: rgba(16, 185, 129, 1); - --success-light-bg: rgba(16, 185, 129, 0.15); - --success-dark-bg: rgba(4, 120, 87, 1); - --success-hover: rgba(16, 185, 129, 0.75); - --success-hover-bg: rgba(16, 185, 129, 0.9); + --success-bg: rgba(15, 150, 100, 1); + --success-light-bg: rgba(15, 150, 100, 0.12); + --success-dark-bg: rgba(10, 110, 80, 1); + --success-hover: rgba(15, 150, 100, 0.8); + --success-hover-bg: rgba(15, 150, 100, 0.95); --success-text: #ffffff; - --success-border: rgba(4, 120, 87, 1); - --success-shadow: 0 2px 6px rgba(16, 185, 129, 0.3); + --success-border: rgba(10, 110, 80, 1); + --success-shadow: 0 3px 8px rgba(15, 150, 100, 0.35); + /* Danger Variants */ - --danger-bg: rgba(239, 68, 68, 1); - --danger-light-bg: rgba(239, 68, 68, 0.15); - --danger-dark-bg: rgba(185, 28, 28, 1); - --danger-hover: rgba(239, 68, 68, 0.75); - --danger-hover-bg: rgba(239, 68, 68, 0.9); + --danger-bg: rgba(220, 50, 50, 1); + --danger-light-bg: rgba(220, 50, 50, 0.12); + --danger-dark-bg: rgba(180, 30, 30, 1); + --danger-hover: rgba(220, 50, 50, 0.8); + --danger-hover-bg: rgba(220, 50, 50, 0.95); --danger-text: #ffffff; - --danger-border: rgba(185, 28, 28, 1); - --danger-shadow: 0 2px 6px rgba(239, 68, 68, 0.3); + --danger-border: rgba(180, 30, 30, 1); + --danger-shadow: 0 3px 8px rgba(220, 50, 50, 0.35); + /* Warning Variants */ - --warning-bg: rgba(245, 158, 11, 1); - --warning-light-bg: rgba(245, 158, 11, 0.15); - --warning-dark-bg: rgba(202, 138, 4, 1); - --warning-hover: rgba(245, 158, 11, 0.75); - --warning-hover-bg: rgba(245, 158, 11, 0.9); + --warning-bg: rgba(240, 140, 10, 1); + --warning-light-bg: rgba(240, 140, 10, 0.12); + --warning-dark-bg: rgba(200, 110, 5, 1); + --warning-hover: rgba(240, 140, 10, 0.8); + --warning-hover-bg: rgba(240, 140, 10, 0.95); --warning-text: #ffffff; - --warning-border: rgba(202, 138, 4, 1); - --warning-shadow: 0 2px 6px rgba(245, 158, 11, 0.3); + --warning-border: rgba(200, 110, 5, 1); + --warning-shadow: 0 3px 8px rgba(240, 140, 10, 0.35); + /* Info Variants */ - --info-bg: rgba(59, 130, 246, 1); - --info-light-bg: rgba(59, 130, 246, 0.15); - --info-dark-bg: rgba(37, 99, 235, 1); - --info-hover: rgba(59, 130, 246, 0.75); - --info-hover-bg: rgba(59, 130, 246, 0.9); + --info-bg: rgba(50, 100, 230, 1); + --info-light-bg: rgba(50, 100, 230, 0.12); + --info-dark-bg: rgba(30, 80, 190, 1); + --info-hover: rgba(50, 100, 230, 0.8); + --info-hover-bg: rgba(50, 100, 230, 0.95); --info-text: #ffffff; - --info-border: rgba(37, 99, 235, 1); - --info-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); + --info-border: rgba(30, 80, 190, 1); + --info-shadow: 0 3px 8px rgba(50, 100, 230, 0.35); + /* Accent Variants */ - --accent-bg: rgba(124, 58, 237, 1); - --accent-light-bg: rgba(124, 58, 237, 0.15); - --accent-dark-bg: rgba(91, 33, 182, 1); - --accent-hover: rgba(124, 58, 237, 0.75); - --accent-hover-bg: rgba(124, 58, 237, 0.9); + --accent-bg: rgba(100, 50, 220, 1); + --accent-light-bg: rgba(100, 50, 220, 0.12); + --accent-dark-bg: rgba(70, 30, 180, 1); + --accent-hover: rgba(100, 50, 220, 0.8); + --accent-hover-bg: rgba(100, 50, 220, 0.95); --accent-text: #ffffff; - --accent-border: rgba(91, 33, 182, 1); - --accent-shadow: 0 2px 6px rgba(124, 58, 237, 0.3); + --accent-border: rgba(70, 30, 180, 1); + --accent-shadow: 0 3px 8px rgba(100, 50, 220, 0.35); + /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); @@ -130,86 +138,86 @@ /* Dark Mode */ .dark-mode { /* Neutral Colors for Dark Mode */ - --neutral-50: #121826; /* Dark background */ - --neutral-100: #1a2334; - --neutral-200: #2b364a; - --neutral-300: #3b4a62; /* Mid-dark for subtle contrasts */ - --neutral-400: #4a5d7c; - --neutral-500: #5f728c; /* Accent dark neutral */ - --neutral-600: #718096; - --neutral-700: #a0aec0; - --neutral-800: #cbd5e0; - --neutral-900: #e5eaf0; /* Lightest text on dark mode */ + --neutral-50: #0f141e; + --neutral-100: #161e2b; + --neutral-200: #202a3b; + --neutral-300: #2c3a50; + --neutral-400: #3a4e6b; + --neutral-500: #52657e; + --neutral-600: #697a91; + --neutral-700: #b8c4d4; + --neutral-800: #d8e1ec; + --neutral-900: #f2f6fb; /* Primary Variants */ - --primary-bg: rgba(37, 99, 235, 1); - --primary-light-bg: rgba(37, 99, 235, 0.15); - --primary-dark-bg: rgba(29, 78, 216, 1); - --primary-hover: rgba(37, 99, 235, 0.75); - --primary-hover-bg: rgba(37, 99, 235, 0.9); - --primary-text: #e0f2fe; /* Light text for contrast */ - --primary-border: rgba(29, 78, 216, 1); - --primary-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); + --primary-bg: rgba(45, 105, 245, 1); + --primary-light-bg: rgba(45, 105, 245, 0.12); + --primary-dark-bg: rgba(35, 85, 200, 1); + --primary-hover: rgba(45, 105, 245, 0.8); + --primary-hover-bg: rgba(45, 105, 245, 0.95); + --primary-text: #dbeafe; + --primary-border: rgba(35, 85, 200, 1); + --primary-shadow: 0 4px 12px rgba(45, 105, 245, 0.3); /* Secondary Variants */ - --secondary-bg: rgba(71, 85, 105, 1); - --secondary-light-bg: rgba(71, 85, 105, 0.15); - --secondary-dark-bg: rgba(55, 65, 81, 1); - --secondary-hover: rgba(71, 85, 105, 0.75); - --secondary-hover-bg: rgba(71, 85, 105, 0.9); - --secondary-text: #f1f5f9; - --secondary-border: rgba(55, 65, 81, 1); - --secondary-shadow: 0 2px 6px rgba(71, 85, 105, 0.3); + --secondary-bg: rgba(80, 95, 120, 1); + --secondary-light-bg: rgba(80, 95, 120, 0.12); + --secondary-dark-bg: rgba(65, 75, 95, 1); + --secondary-hover: rgba(80, 95, 120, 0.8); + --secondary-hover-bg: rgba(80, 95, 120, 0.95); + --secondary-text: #e2e8f0; + --secondary-border: rgba(65, 75, 95, 1); + --secondary-shadow: 0 4px 12px rgba(80, 95, 120, 0.3); /* Success Variants */ - --success-bg: rgba(4, 120, 87, 1); - --success-light-bg: rgba(4, 120, 87, 0.15); - --success-dark-bg: rgba(2, 85, 65, 1); - --success-hover: rgba(4, 120, 87, 0.75); - --success-hover-bg: rgba(4, 120, 87, 0.9); - --success-text: #d1fae5; - --success-border: rgba(2, 85, 65, 1); - --success-shadow: 0 2px 6px rgba(4, 120, 87, 0.3); + --success-bg: rgba(6, 135, 92, 1); + --success-light-bg: rgba(6, 135, 92, 0.12); + --success-dark-bg: rgba(4, 100, 70, 1); + --success-hover: rgba(6, 135, 92, 0.8); + --success-hover-bg: rgba(6, 135, 92, 0.95); + --success-text: #bde7d8; + --success-border: rgba(4, 100, 70, 1); + --success-shadow: 0 4px 12px rgba(6, 135, 92, 0.3); /* Danger Variants */ - --danger-bg: rgba(185, 28, 28, 1); - --danger-light-bg: rgba(185, 28, 28, 0.15); - --danger-dark-bg: rgba(153, 27, 27, 1); - --danger-hover: rgba(185, 28, 28, 0.75); - --danger-hover-bg: rgba(185, 28, 28, 0.9); - --danger-text: #fecaca; - --danger-border: rgba(153, 27, 27, 1); - --danger-shadow: 0 2px 6px rgba(185, 28, 28, 0.3); + --danger-bg: rgba(200, 35, 35, 1); + --danger-light-bg: rgba(200, 35, 35, 0.12); + --danger-dark-bg: rgba(160, 25, 25, 1); + --danger-hover: rgba(200, 35, 35, 0.8); + --danger-hover-bg: rgba(200, 35, 35, 0.95); + --danger-text: #ffc7c7; + --danger-border: rgba(160, 25, 25, 1); + --danger-shadow: 0 4px 12px rgba(200, 35, 35, 0.3); /* Warning Variants */ - --warning-bg: rgba(202, 138, 4, 1); - --warning-light-bg: rgba(202, 138, 4, 0.15); - --warning-dark-bg: rgba(161, 98, 7, 1); - --warning-hover: rgba(202, 138, 4, 0.75); - --warning-hover-bg: rgba(202, 138, 4, 0.9); - --warning-text: #fde68a; - --warning-border: rgba(161, 98, 7, 1); - --warning-shadow: 0 2px 6px rgba(202, 138, 4, 0.3); + --warning-bg: rgba(220, 150, 10, 1); + --warning-light-bg: rgba(220, 150, 10, 0.12); + --warning-dark-bg: rgba(180, 120, 8, 1); + --warning-hover: rgba(220, 150, 10, 0.8); + --warning-hover-bg: rgba(220, 150, 10, 0.95); + --warning-text: #fde7b5; + --warning-border: rgba(180, 120, 8, 1); + --warning-shadow: 0 4px 12px rgba(220, 150, 10, 0.3); /* Info Variants */ - --info-bg: rgba(37, 99, 235, 1); - --info-light-bg: rgba(37, 99, 235, 0.15); - --info-dark-bg: rgba(29, 78, 216, 1); - --info-hover: rgba(37, 99, 235, 0.75); - --info-hover-bg: rgba(37, 99, 235, 0.9); - --info-text: #bfdbfe; - --info-border: rgba(29, 78, 216, 1); - --info-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); + --info-bg: rgba(40, 110, 230, 1); + --info-light-bg: rgba(40, 110, 230, 0.12); + --info-dark-bg: rgba(30, 85, 200, 1); + --info-hover: rgba(40, 110, 230, 0.8); + --info-hover-bg: rgba(40, 110, 230, 0.95); + --info-text: #c9e7ff; + --info-border: rgba(30, 85, 200, 1); + --info-shadow: 0 4px 12px rgba(40, 110, 230, 0.3); /* Accent Variants */ - --accent-bg: rgba(91, 33, 182, 1); - --accent-light-bg: rgba(91, 33, 182, 0.15); - --accent-dark-bg: rgba(72, 28, 152, 1); - --accent-hover: rgba(91, 33, 182, 0.75); - --accent-hover-bg: rgba(91, 33, 182, 0.9); - --accent-text: #e9d5ff; - --accent-border: rgba(72, 28, 152, 1); - --accent-shadow: 0 2px 6px rgba(91, 33, 182, 0.3); + --accent-bg: rgba(100, 50, 200, 1); + --accent-light-bg: rgba(100, 50, 200, 0.12); + --accent-dark-bg: rgba(80, 40, 160, 1); + --accent-hover: rgba(100, 50, 200, 0.8); + --accent-hover-bg: rgba(100, 50, 200, 0.95); + --accent-text: #e7d1ff; + --accent-border: rgba(80, 40, 160, 1); + --accent-shadow: 0 4px 12px rgba(100, 50, 200, 0.3); /* Shadows */ --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.1); @@ -219,78 +227,111 @@ } [data-variant="primary"] { - --variant-bg: var(--primary-bg); - --variant-light-bg: var(--primary-light-bg); - --variant-dark-bg: var(--primary-dark-bg); - --variant-text: var(--primary-text); - --variant-shadow: var(--primary-shadow); - --variant-border: var(--primary-border); - --variant-hover-bg: var(--primary-hover-bg); - --variant-hover: var(--primary-hover); - } - - [data-variant="secondary"] { - --variant-bg: var(--secondary-bg); - --variant-light-bg: var(--secondary-light-bg); - --variant-dark-bg: var(--secondary-dark-bg); - --variant-text: var(--secondary-text); - --variant-shadow: var(--secondary-shadow); - --variant-border: var(--secondary-border); - --variant-hover-bg: var(--secondary-hover-bg); - --variant-hover: var(--secondary-hover); - } - - [data-variant="accent"] { - --variant-bg: var(--accent-bg); - --variant-light-bg: var(--accent-light-bg); - --variant-dark-bg: var(--accent-dark-bg); - --variant-text: var(--accent-text); - --variant-shadow: var(--accent-shadow); - --variant-border: var(--accent-border); - --variant-hover-bg: var(--accent-hover-bg); - --variant-hover: var(--accent-hover); - } - - [data-variant="success"] { - --variant-bg: var(--success-bg); - --variant-light-bg: var(--success-light-bg); - --variant-dark-bg: var(--success-dark-bg); - --variant-text: var(--success-text); - --variant-shadow: var(--success-shadow); - --variant-border: var(--success-border); - --variant-hover-bg: var(--success-hover-bg); - --variant-hover: var(--success-hover); - } - - [data-variant="info"] { - --variant-bg: var(--info-bg); - --variant-light-bg: var(--info-light-bg); - --variant-dark-bg: var(--info-dark-bg); - --variant-text: var(--info-text); - --variant-shadow: var(--info-shadow); - --variant-border: var(--info-border); - --variant-hover-bg: var(--info-hover-bg); - --variant-hover: var(--info-hover); - } - - [data-variant="danger"] { - --variant-bg: var(--danger-bg); - --variant-light-bg: var(--danger-light-bg); - --variant-dark-bg: var(--danger-dark-bg); - --variant-text: var(--danger-text); - --variant-shadow: var(--danger-shadow); - --variant-border: var(--danger-border); - --variant-hover-bg: var(--danger-hover-bg); - --variant-hover: var(--danger-hover); - } + --variant-bg: var(--primary-bg); /* Sfondo principale */ + --variant-light-bg: var(--neutral-200); /* Sfondo per contrasto su hover */ + --variant-dark-bg: var(--primary-dark-bg); /* Bordo e ombre */ + --variant-text: var(--neutral-900); /* Testo chiaro su sfondo */ + --variant-shadow: var(--primary-shadow); /* Ombre leggere */ + --variant-border: var(--primary-border); /* Bordo visibile */ + --variant-hover-bg: var(--primary-hover-bg); /* Sfondo scuro su hover */ + --variant-hover: var(--primary-hover); /* Colore per elementi interattivi */ +} - [data-variant="warning"] { - --variant-bg: var(--warning-bg); - --variant-light-bg: var(--warning-light-bg); - --variant-dark-bg: var(--warning-dark-bg); - --variant-text: var(--warning-text); - --variant-shadow: var(--warning-shadow); - --variant-border: var(--warning-border); - --variant-hover-bg: var(--warning-hover-bg); - --variant-hover: var(--warning-hover); - } \ No newline at end of file +[data-variant="secondary"] { + --variant-bg: var(--secondary-bg); /* Sfondo principale */ + --variant-light-bg: var(--neutral-300); /* Sfondo su hover */ + --variant-dark-bg: var(--secondary-dark-bg); /* Colore scuro */ + --variant-text: var(--neutral-800); /* Testo leggibile */ + --variant-shadow: var(--secondary-shadow); /* Ombre su sfondo */ + --variant-border: var(--secondary-border); /* Bordo chiaro */ + --variant-hover-bg: var(--secondary-hover-bg); /* Hover background */ + --variant-hover: var(--secondary-hover); /* Hover foreground */ +} + +[data-variant="accent"] { + --variant-bg: var(--accent-bg); /* Sfondo viola principale */ + --variant-light-bg: var(--neutral-200); /* Sfondo chiaro su hover */ + --variant-dark-bg: var(--accent-dark-bg); /* Dettagli scuri */ + --variant-text: var(--accent-text); /* Testo molto chiaro */ + --variant-shadow: var(--accent-shadow); /* Ombre morbide */ + --variant-border: var(--accent-border); /* Bordo viola intenso */ + --variant-hover-bg: var(--accent-hover-bg); /* Viola più scuro su hover */ + --variant-hover: var(--accent-hover); /* Elementi hover interattivi */ +} + +[data-variant="success"] { + --variant-bg: var(--success-bg); /* Verde scuro principale */ + --variant-light-bg: var(--neutral-300); /* Sfondo chiaro */ + --variant-dark-bg: var(--success-dark-bg); /* Verde più scuro */ + --variant-text: var(--success-text); /* Testo verde chiaro */ + --variant-shadow: var(--success-shadow); /* Ombre leggere */ + --variant-border: var(--success-border); /* Verde intenso per bordo */ + --variant-hover-bg: var(--success-hover-bg); /* Hover verde scuro */ + --variant-hover: var(--success-hover); /* Hover foreground */ +} + +[data-variant="info"] { + --variant-bg: var(--info-bg); /* Blu acceso principale */ + --variant-light-bg: var(--neutral-300); /* Sfondo chiaro */ + --variant-dark-bg: var(--info-dark-bg); /* Blu profondo */ + --variant-text: var(--info-text); /* Testo blu chiaro */ + --variant-shadow: var(--info-shadow); /* Ombre morbide */ + --variant-border: var(--info-border); /* Bordo blu intenso */ + --variant-hover-bg: var(--info-hover-bg); /* Blu più scuro su hover */ + --variant-hover: var(--info-hover); /* Elementi hover */ +} + +[data-variant="danger"] { + --variant-bg: var(--danger-bg); /* Rosso acceso principale */ + --variant-light-bg: var(--neutral-300); /* Sfondo chiaro */ + --variant-dark-bg: var(--danger-dark-bg); /* Rosso profondo */ + --variant-text: var(--danger-text); /* Testo chiaro */ + --variant-shadow: var(--danger-shadow); /* Ombre morbide */ + --variant-border: var(--danger-border); /* Bordo rosso intenso */ + --variant-hover-bg: var(--danger-hover-bg); /* Rosso più scuro su hover */ + --variant-hover: var(--danger-hover); /* Hover foreground */ +} + +[data-variant="warning"] { + --variant-bg: var(--warning-bg); /* Arancione brillante principale */ + --variant-light-bg: var(--neutral-200); /* Sfondo chiaro */ + --variant-dark-bg: var(--warning-dark-bg); /* Arancione scuro */ + --variant-text: var(--warning-text); /* Testo chiaro */ + --variant-shadow: var(--warning-shadow); /* Ombre morbide */ + --variant-border: var(--warning-border); /* Bordo arancione intenso */ + --variant-hover-bg: var(--warning-hover-bg); /* Arancione più scuro su hover */ + --variant-hover: var(--warning-hover); /* Hover foreground */ +} + +[data-variant="default"] { + --variant-bg: var(--neutral-100); /* Sfondo principale chiaro */ + --variant-light-bg: var(--neutral-50); /* Sfondo molto chiaro */ + --variant-dark-bg: var(--neutral-300); /* Sfondo scuro per contrasti */ + --variant-text: var(--neutral-900); /* Testo scuro */ + --variant-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombra leggera */ + --variant-border: var(--neutral-200); /* Bordo chiaro */ + --variant-hover-bg: var(--neutral-200); /* Sfondo scuro su hover */ + --variant-hover: var(--neutral-700); /* Colore del testo su hover */ +} + +[data-variant="dark"] { + --variant-bg: var(--neutral-800); /* Sfondo principale scuro */ + --variant-light-bg: var(--neutral-700); /* Sfondo interattivo più chiaro */ + --variant-dark-bg: var(--neutral-900); /* Sfondo più scuro */ + --variant-text: var(--neutral-50); /* Testo chiaro */ + --variant-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Ombra profonda */ + --variant-border: var(--neutral-600); /* Bordo scuro */ + --variant-hover-bg: var(--neutral-600); /* Sfondo chiaro su hover */ + --variant-hover: var(--neutral-300); /* Colore interattivo su hover */ +} + +[data-variant="light"] { + --variant-bg: var(--neutral-50); /* Sfondo molto chiaro */ + --variant-light-bg: var(--neutral-100); /* Sfondo chiaro intermedio */ + --variant-dark-bg: var(--neutral-200); /* Sfondo scuro per accenti */ + --variant-text: var(--neutral-700); /* Testo scuro */ + --variant-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Ombra morbida */ + --variant-border: var(--neutral-300); /* Bordo leggero */ + --variant-hover-bg: var(--neutral-200); /* Sfondo scuro su hover */ + --variant-hover: var(--neutral-500); /* Testo interattivo su hover */ +} \ No newline at end of file From f0e093762bda92d77382419cfb8806ff6a6e54d7 Mon Sep 17 00:00:00 2001 From: Ohswedd Date: Fri, 29 Nov 2024 21:49:41 +0100 Subject: [PATCH 4/7] Color Palette Component Adjustament --- src/css/bundle.css | 1511 ++++++++++++------------ src/css/components/accordion.css | 51 +- src/css/components/alert.css | 32 +- src/css/components/avatar.css | 34 +- src/css/components/badge.css | 10 +- src/css/components/breadcrumbs.css | 9 +- src/css/components/button.css | 10 +- src/css/components/calendar.css | 393 +++--- src/css/components/card.css | 78 +- src/css/components/codeblock.css | 15 +- src/css/components/command-palette.css | 2 +- src/css/components/datetime-picker.css | 2 +- src/css/components/dropdown.css | 30 +- src/css/components/fab.css | 37 +- src/css/components/file-upload.css | 2 +- src/css/components/form.css | 52 +- src/css/components/hero.css | 360 +++--- src/css/components/hologram.css | 4 +- src/css/components/modal.css | 36 +- src/css/components/multiselect.css | 38 +- src/css/components/stat-metrics.css | 305 +++-- 21 files changed, 1545 insertions(+), 1466 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index f31fce4..05bc9a9 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -662,9 +662,21 @@ blockquote { 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"] { @@ -676,9 +688,6 @@ blockquote { /* Accordion Item */ .kroma-accordion-item { - border-bottom: 1px solid var(--neutral-200); -} -.kroma-accordion-item:last-child { border-bottom: none; } @@ -691,57 +700,57 @@ blockquote { 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 */ @@ -791,17 +800,29 @@ blockquote { 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 */ @@ -834,11 +855,6 @@ blockquote { 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); @@ -882,8 +898,7 @@ blockquote { 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); } @@ -924,8 +939,16 @@ blockquote { 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 */ @@ -966,6 +989,8 @@ blockquote { .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 */ @@ -976,7 +1001,7 @@ blockquote { 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); } @@ -992,14 +1017,14 @@ blockquote { .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 */ @@ -1010,7 +1035,7 @@ blockquote { 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); } @@ -1039,9 +1064,9 @@ blockquote { } .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 */ @@ -1078,7 +1103,7 @@ blockquote { .kroma-avatar[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; - pointer-events: none; /* Prevent interaction */ + pointer-events: none; } /* Bordered Avatar */ @@ -1115,7 +1140,15 @@ blockquote { 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 */ @@ -1220,6 +1253,13 @@ blockquote { 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; @@ -1271,7 +1311,7 @@ blockquote { /* 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); } @@ -1312,10 +1352,18 @@ blockquote { 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)); @@ -1515,211 +1563,209 @@ blockquote { /* --- calendar.css --- */ /* Calendar Container */ .kroma-calendar { - max-width: 100%; - width: 100%; - font-family: var(--font-sans); - color: var(--neutral-800); - background-color: var(--neutral-50); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-xl); - padding: var(--space-4); - overflow: hidden; - transition: var(--transition-all); - } - - /* Calendar Variant Colors */ - .kroma-calendar { - --calendar-bg: var(--variant-bg); - --calendar-text: var(--variant-text); - --calendar-hover-bg: var(--variant-hover); - --calendar-selected-bg: var(--variant-light-bg); - --calendar-today-border: var(--variant-border); - --calendar-scrollbar: var(--variant-dark-bg); - } - - /* Calendar Header */ - .kroma-calendar-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-4); - background-color: var(--calendar-bg, var(--neutral-200)); - color: var(--calendar-text, var(--neutral-800)); - border-radius: var(--radius-md); - font-size: clamp(1.5rem, 2.5vw, 1.75rem); - text-transform: uppercase; - gap: var(--space-4); - height: clamp(3rem, 6vw, 4rem); - } - - /* Navigation Icons */ - .kroma-calendar-nav { - background: none; - border: none; - color: var(--neutral-800); - font-size: clamp(2rem, 4vw, 2.5rem); - cursor: pointer; - transition: color var(--transition-colors), transform var(--transition-transform); - display: flex; - align-items: center; - } - - .kroma-calendar-nav:hover { - color: var(--calendar-hover-bg, var(--neutral-600)); - transform: scale(1.2); - } - - /* Month and Year Display */ - .kroma-calendar-month-year { - font-size: clamp(1.5rem, 3vw, 1.75rem); - font-weight: bold; - text-align: center; - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; - } - - /* Month and Year Selectors */ - .kroma-calendar-selectors { - display: flex; - gap: var(--space-2); - margin-top: var(--space-2); - } - - .kroma-calendar-selectors select { - padding: var(--space-2) var(--space-3); - font-size: clamp(0.875rem, 1vw, 1rem); - border-radius: var(--radius-md); - border: 1px solid var(--neutral-300); - color: var(--neutral-800); - background-color: var(--neutral-100); - outline: none; - cursor: pointer; - appearance: none; - transition: background-color var(--transition-colors), border-color var(--transition-colors); - } - - /* Calendar Body */ - .kroma-calendar-body { - padding: var(--space-4); - } - - /* Weekday Names and Dates */ - .kroma-calendar-weekdays, - .kroma-calendar-dates { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: var(--space-2); - margin-top: var(--space-2); - justify-items: center; - align-items: center; - } - - /* Weekday Styling */ - .kroma-calendar-weekdays div { - text-align: center; - font-weight: 600; - color: var(--neutral-600); - padding: var(--space-1) 0; - border-radius: var(--radius-sm); - } - - /* Dates Styling */ - .kroma-calendar-dates button { - position: relative; - width: 100%; - height: clamp(3.5rem, 7vw, 4.5rem); - max-height: 5rem; - text-align: center; - background: none; - border: none; - border-radius: var(--radius-md); - font-size: clamp(0.875rem, 1vw, 1rem); - color: var(--neutral-800); - cursor: pointer; - transition: background-color var(--transition-colors), color var(--transition-colors), box-shadow var(--transition-all); - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - flex-direction: column; - } - - /* Hover and Selected Date Effects */ - .kroma-calendar-dates button:hover { - background-color: var(--calendar-hover-bg, var(--neutral-300)); - color: var(--calendar-text); - } - - .kroma-calendar-dates button[data-selected="true"] { - background-color: var(--calendar-selected-bg); - color: var(--calendar-text); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - } - - .kroma-calendar-dates button[data-today="true"] { - border: 2px solid var(--calendar-today-border); - border-radius: var(--radius-md); - } - - /* Disabled Dates */ - .kroma-calendar-dates button[data-disabled="true"] { - color: var(--neutral-400); - cursor: not-allowed; - } - - /* Calendar Variant with Items */ - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates button { - display: flex; - flex-direction: column; - padding: var(--space-1) var(--space-2); - overflow-y: auto; - } - - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates .date-item { - font-size: 0.75rem; - color: var(--neutral-500); - background-color: var(--neutral-200); - border-radius: var(--radius-sm); - padding: 0.125rem var(--space-1); - margin-top: var(--space-1); - white-space: nowrap; - } - - /* Scrollbar for Day Cells */ - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar { - width: 6px; - } - - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar-thumb { - background-color: var(--calendar-scrollbar); - border-radius: var(--radius-md); + max-width: 100%; + width: 100%; + font-family: var(--font-sans); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-xl); + padding: var(--space-4); + overflow: hidden; + transition: var(--transition-all); + background-color: var(--calendar-bg, var(--neutral-100)); + color: var(--calendar-text, var(--neutral-800)); +} + +/* Dynamic Variant Handling */ +.kroma-calendar { + --calendar-bg: var(--variant-bg, var(--neutral-100)); + --calendar-text: var(--variant-text, var(--neutral-800)); + --calendar-hover-bg: var(--variant-light-bg, var(--neutral-300)); + --calendar-selected-bg: var(--variant-hover, var(--neutral-200)); + --calendar-today-border: var(--variant-border, var(--neutral-500)); + --calendar-scrollbar: var(--variant-dark-bg, var(--neutral-400)); +} + +/* Calendar Header */ +.kroma-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4); + background-color: var(--calendar-bg); + color: var(--calendar-text); + border-radius: var(--radius-md); + font-size: clamp(1.5rem, 2.5vw, 1.75rem); + text-transform: uppercase; + gap: var(--space-4); + height: clamp(3.5rem, 7vw, 4.5rem); +} + +/* Navigation Icons */ +.kroma-calendar-nav { + background: none; + border: none; + color: var(--calendar-text); + font-size: clamp(2rem, 4vw, 2.5rem); + cursor: pointer; + transition: color var(--transition-colors), transform var(--transition-transform); + display: flex; + align-items: center; +} + +.kroma-calendar-nav:hover { + color: var(--calendar-hover-bg); + transform: scale(1.2); +} + +/* Month and Year Display */ +.kroma-calendar-month-year { + font-size: clamp(1.5rem, 3vw, 1.75rem); + font-weight: bold; + text-align: center; + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* Month and Year Selectors */ +.kroma-calendar-selectors { + display: flex; + gap: var(--space-2); + margin-top: var(--space-2); +} + +.kroma-calendar-selectors select { + padding: var(--space-2) var(--space-3); + font-size: clamp(0.875rem, 1vw, 1rem); + border-radius: var(--radius-md); + border: 1px solid var(--neutral-300); + color: var(--neutral-800); + background-color: var(--neutral-100); + outline: none; + cursor: pointer; + appearance: none; + transition: background-color var(--transition-colors), border-color var(--transition-colors); +} + +/* Calendar Body */ +.kroma-calendar-body { + padding: var(--space-4); +} + +/* Weekday Names and Dates */ +.kroma-calendar-weekdays, +.kroma-calendar-dates { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: var(--space-2); + margin-top: var(--space-2); + justify-items: center; + align-items: center; +} + +/* Weekday Styling */ +.kroma-calendar-weekdays div { + text-align: center; + font-weight: 600; + color: var(--neutral-200); + padding: var(--space-1) 0; + border-radius: var(--radius-sm); +} + +/* Dates Styling */ +.kroma-calendar-dates button { + position: relative; + width: 100%; + height: clamp(4rem, 8vw, 5rem); + text-align: center; + background: none; + border: none; + border-radius: var(--radius-md); + font-size: clamp(1rem, 1vw, 1.125rem); + color: var(--calendar-text); + cursor: pointer; + transition: background-color var(--transition-colors), color var(--transition-colors), box-shadow var(--transition-all); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +/* Hover and Selected Date Effects */ +.kroma-calendar-dates button:hover { + background-color: var(--calendar-hover-bg); + color: var(--calendar-text); +} + +.kroma-calendar-dates button[data-selected="true"] { + background-color: var(--calendar-selected-bg); + color: var(--calendar-text); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.kroma-calendar-dates button[data-today="true"] { + border: 2px solid var(--calendar-today-border); + border-radius: var(--radius-md); +} + +/* Disabled Dates */ +.kroma-calendar-dates button[data-disabled="true"] { + color: var(--neutral-400); + cursor: not-allowed; +} + +/* Calendar Variant with Items */ +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates button { + display: flex; + flex-direction: column; + padding: var(--space-1) var(--space-2); + overflow-y: auto; +} + +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates .date-item { + font-size: 0.75rem; + color: var(--neutral-800); + background-color: var(--neutral-200); + border-radius: var(--radius-sm); + padding: 0.125rem var(--space-1); + margin-top: var(--space-1); + white-space: nowrap; +} + +/* Scrollbar for Day Cells */ +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar { + width: 6px; +} + +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar-thumb { + background-color: var(--calendar-scrollbar); + border-radius: var(--radius-md); +} + +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar-track { + background-color: var(--neutral-200); +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .kroma-calendar { + padding: var(--space-2); } - - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar-track { - background-color: var(--neutral-200); + + .kroma-calendar-header { + flex-wrap: nowrap; + gap: var(--space-2); + height: auto; } - - /* Responsive Adjustments */ - @media (max-width: 768px) { - .kroma-calendar { - padding: var(--space-2); - } - - .kroma-calendar-header { - flex-wrap: nowrap; - gap: var(--space-2); - height: auto; - } - - .kroma-calendar-weekdays div, - .kroma-calendar-dates button { - font-size: clamp(0.75rem, 1.5vw, 0.875rem); - height: clamp(2.5rem, 10vw, 3rem); - } + + .kroma-calendar-weekdays div, + .kroma-calendar-dates button { + font-size: clamp(0.85rem, 1.5vw, 1rem); + height: clamp(3rem, 10vw, 4rem); } - +} + /* --- card.css --- */ /* Base Card Styles */ @@ -1744,13 +1790,47 @@ blockquote { box-shadow: var(--card-hover-shadow, var(--shadow-xl)); } +/* Card Variants */ +.kroma-card { + --card-bg: var(--variant-bg, var(--neutral-50)); + --card-text: var(--variant-text, var(--neutral-900)); + --card-header-text: var(--variant-text, var(--neutral-800)); + --card-body-text: var(--variant-text, var(--neutral-700)); + --card-footer-bg: var(--variant-light-bg, var(--neutral-100)); + --card-footer-text: var(--variant-text, var(--neutral-900)); + --card-hover-shadow: var(--variant-shadow, var(--shadow-xl)); +} + +/* Outline Style */ +.kroma-card[data-variant="outline"] { + background-color: transparent; + border: 1px solid var(--variant-border); + color: var(--variant-text); +} + +.kroma-card[data-variant="outline"]:hover { + box-shadow: var(--card-hover-shadow, var(--shadow-lg)); +} + +/* Elevated Variant */ +.kroma-card[data-variant="elevated"] { + background-color: var(--variant-bg); + box-shadow: var(--shadow-xl); +} + +/* Flat Variant */ +.kroma-card[data-variant="flat"] { + background-color: transparent; + box-shadow: none; +} + /* Card Header */ .kroma-card-header { width: 100%; padding: var(--space-5) var(--space-6); font-weight: bold; font-size: 1.25rem; - color: var(--card-header-text, var(--neutral-800)); + color: var(--card-header-text); border-bottom: 1px solid var(--card-header-border, var(--neutral-200)); text-align: center; } @@ -1771,7 +1851,7 @@ blockquote { .kroma-card-body { padding: var(--space-6); text-align: center; - color: var(--card-body-text, var(--neutral-700)); + color: var(--card-body-text); font-size: 1rem; flex: 1 0 auto; /* Ensure body grows to fill available space */ } @@ -1780,49 +1860,15 @@ blockquote { .kroma-card-footer { width: 100%; padding: var(--space-4) var(--space-6); - background-color: var(--card-footer-bg, var(--neutral-100)); + background-color: var(--card-footer-bg); border-top: 1px solid var(--card-footer-border, var(--neutral-200)); display: flex; justify-content: center; gap: var(--space-2); - color: var(--card-footer-text, var(--neutral-900)); + color: var(--card-footer-text); flex-shrink: 0; /* Prevent footer from shrinking */ } -/* Card Variants */ -.kroma-card[data-variant] { - --card-bg: var(--variant-bg); - --card-text: var(--variant-text); - --card-header-text: var(--variant-text); - --card-body-text: var(--variant-text); - --card-footer-bg: var(--variant-light-bg, var(--neutral-200)); - --card-footer-text: var(--variant-text); - --card-hover-shadow: var(--variant-shadow, var(--shadow-xl)); -} - -/* Outline Style */ -.kroma-card[data-variant="outline"] { - background-color: transparent; - border: 1px solid var(--variant-border); - color: var(--variant-text); -} - -.kroma-card[data-variant="outline"]:hover { - box-shadow: var(--card-hover-shadow, var(--shadow-lg)); -} - -/* Elevated Variant */ -.kroma-card[data-variant="elevated"] { - background-color: var(--variant-bg); - box-shadow: var(--shadow-xl); -} - -/* Flat Variant */ -.kroma-card[data-variant="flat"] { - background-color: transparent; - box-shadow: none; -} - /* Labels */ .kroma-card-label { position: absolute; @@ -1866,6 +1912,7 @@ blockquote { align-self: stretch; /* Stretch footer to align with the card's layout */ } +/* Scrollable Cards */ .kroma-card-scrollable { display: flex; overflow-x: auto; @@ -1887,7 +1934,6 @@ blockquote { background-color: var(--neutral-200); /* Scrollbar track color */ } -/* Scrollable Cards */ .kroma-card-scrollable .kroma-card { flex: 0 0 auto; scroll-snap-align: center; /* Center cards in the viewport */ @@ -1943,11 +1989,11 @@ blockquote { /* --- codeblock.css --- */ /* Base Styling for Code Block */ .kroma-code-block { - background: var(--variant-bg); - color: var(--variant-text); - border: 1px solid var(--variant-border); + background: var(--variant-bg, var(--neutral-50)); + color: var(--variant-text, var(--neutral-900)); + border: 1px solid var(--variant-border, var(--neutral-200)); border-radius: var(--radius-lg); - box-shadow: var(--variant-shadow); + box-shadow: var(--variant-shadow, var(--shadow-lg)); padding: clamp(var(--space-3), 2vw, var(--space-5)); position: relative; overflow: hidden; @@ -1964,6 +2010,7 @@ blockquote { max-width: 80%; } } + @media (min-width: 1024px) { .kroma-code-block { margin: var(--space-6) auto; @@ -2038,8 +2085,8 @@ blockquote { } .kroma-code-block .kroma-action-btn { - background: var(--variant-hover-bg); - color: var(--variant-text); + background: var(--variant-hover-bg, var(--neutral-200)); + color: var(--variant-text, var(--neutral-900)); border: none; border-radius: var(--radius-md); padding: clamp(var(--space-2), 1vw, var(--space-3)) var(--space-4); @@ -2052,7 +2099,7 @@ blockquote { } .kroma-code-block .kroma-action-btn:hover { - background: var(--variant-hover); + background: var(--variant-hover, var(--neutral-300)); transform: scale(1.05); } @@ -2162,7 +2209,7 @@ blockquote { .kroma-command-palette .kroma-palette-item:hover, .kroma-command-palette .kroma-palette-item:focus { background: var(--palette-item-hover-bg, var(--variant-hover-bg)); - color: var(--neutral-700); + color: var(--palette-item-hover-text, var(--neutral-700)); } .kroma-command-palette .kroma-palette-item[data-active="true"] { @@ -2354,7 +2401,7 @@ blockquote { .kroma-quick-select button:hover { background-color: var(--variant-hover-bg, var(--neutral-400)); color: #fff; -} +} /* Time Selector */ .kroma-time-selector { @@ -2437,7 +2484,7 @@ blockquote { /* Dropdown Menu */ .kroma-dropdown-menu { position: absolute; - top: calc(100% + var(--space-1)); /* Reduced spacing for closer alignment */ + top: calc(100% + var(--space-1)); left: 0; min-width: 150px; background-color: var(--variant-bg, var(--neutral-50)); @@ -2446,7 +2493,7 @@ blockquote { border-radius: var(--radius-lg); padding: var(--space-2) 0; opacity: 0; - transform: translateY(-5px); /* Slight offset for a subtle animation effect */ + transform: translateY(-5px); transition: opacity 0.3s ease, transform 0.3s ease; visibility: hidden; z-index: var(--z-30); @@ -2456,7 +2503,7 @@ blockquote { /* Active State for Dropdown */ .kroma-dropdown.kroma-open .kroma-dropdown-menu { opacity: 1; - transform: translateY(0); /* Reset translation when active */ + transform: translateY(0); visibility: visible; } @@ -2475,36 +2522,26 @@ blockquote { .kroma-dropdown-item:hover, .kroma-dropdown-item:focus { - background-color: var(--variant-hover-bg, var(--neutral-200)); - color: var(--variant-hover, var(--primary)); + background-color: var(--variant-dark-bg, var(--neutral-200)); } /* Position Variants */ .kroma-dropdown[data-position="top"] .kroma-dropdown-menu { top: auto; - bottom: calc(100% + var(--space-1)); /* Reduced spacing for top positioning */ - transform: translateY(5px); /* Subtle animation effect */ + bottom: calc(100% + var(--space-1)); + transform: translateY(5px); } .kroma-dropdown[data-position="right"] .kroma-dropdown-menu { top: 0; - left: calc(100% + var(--space-1)); /* Reduced spacing for right positioning */ - transform: translateX(-5px); /* Subtle animation effect */ + left: calc(100% + var(--space-1)); + transform: translateX(-5px); } .kroma-dropdown[data-position="left"] .kroma-dropdown-menu { top: 0; - right: calc(100% + var(--space-1)); /* Reduced spacing for left positioning */ - transform: translateX(5px); /* Subtle animation effect */ -} - -/* Variants Handling */ -.kroma-dropdown[data-variant="dark"] { - --variant-bg: var(--neutral-900); - --variant-text: var(--neutral-50); - --variant-hover-bg: var(--neutral-700); - --variant-hover: var(--neutral-50); - --variant-shadow: var(--shadow-lg); + right: calc(100% + var(--space-1)); + transform: translateX(5px); } /* Mega Menu */ @@ -2555,19 +2592,19 @@ blockquote { position: fixed; bottom: var(--space-8, 2rem); right: var(--space-8, 2rem); - display: flex; /* Flexbox ensures centering of children */ - align-items: center; /* Vertically center content */ - justify-content: center; /* Horizontally center content */ - padding: 0; /* Remove default padding for precise centering */ + display: flex; + align-items: center; + justify-content: center; + padding: 0; font-size: 1.5rem; - width: clamp(3rem, 8vw, 4rem); /* Ensure FAB is always square */ - height: clamp(3rem, 8vw, 4rem); /* Match width for perfect circle */ + width: clamp(3rem, 8vw, 4rem); + height: clamp(3rem, 8vw, 4rem); background-color: var(--variant-bg, var(--primary)); color: var(--variant-text, #ffffff); cursor: pointer; border: none; box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.2)); - border-radius: var(--radius-full, 50%); /* Circular shape */ + border-radius: var(--radius-full, 50%); transition: background-color var(--transition-colors, 0.2s ease), transform var(--transition-transform, 0.2s ease), @@ -2580,10 +2617,10 @@ blockquote { display: flex; align-items: center; justify-content: center; - width: 100%; /* Icon scales with FAB size */ - height: 100%; /* Icon scales with FAB size */ - font-size: inherit; /* Inherit FAB font size */ - line-height: 1; /* Prevent text alignment issues */ + width: 100%; + height: 100%; + font-size: inherit; + line-height: 1; } /* FAB Hover and Active States */ @@ -2601,7 +2638,7 @@ blockquote { /* Shape Variants */ .kroma-fab[data-shape="circular"] { border-radius: var(--radius-full, 50%); - padding: 0; /* Ensure circular shape is preserved */ + padding: 0; } .kroma-fab[data-shape="square"] { @@ -2613,6 +2650,19 @@ blockquote { padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem); } +/* Size Variants */ +.kroma-fab[data-size="small"] { + width: clamp(2.5rem, 6vw, 3rem); + height: clamp(2.5rem, 6vw, 3rem); + font-size: 1.25rem; +} + +.kroma-fab[data-size="large"] { + width: clamp(4rem, 10vw, 5rem); + height: clamp(4rem, 10vw, 5rem); + font-size: 1.75rem; +} + /* Responsive Adjustments */ @media (max-width: 768px) { .kroma-fab { @@ -2806,7 +2856,7 @@ blockquote { opacity: 1; transform: translateY(0); } -} +} /* Responsive Adjustments */ @media (max-width: 768px) { @@ -2848,7 +2898,9 @@ blockquote { } /* Input, Textarea, and Select Base Styles */ -.kroma-input, .kroma-textarea, .kroma-select { +.kroma-input, +.kroma-textarea, +.kroma-select { font-family: var(--font-sans); font-size: clamp(0.875rem, 1vw + 0.25rem, 1rem); padding: var(--space-3) var(--space-4); @@ -2862,36 +2914,47 @@ blockquote { } /* Placeholder Styling */ -.kroma-input::placeholder, .kroma-textarea::placeholder, .kroma-select::placeholder { +.kroma-input::placeholder, +.kroma-textarea::placeholder, +.kroma-select::placeholder { color: var(--neutral-500); } /* Focus and Hover Styles */ -.kroma-input:focus, .kroma-textarea:focus, .kroma-select:focus { +.kroma-input:focus, +.kroma-textarea:focus, +.kroma-select:focus { outline: none; border-color: var(--variant-border, var(--neutral-400)); box-shadow: 0px 0px 0px 3px var(--variant-light-bg, var(--neutral-200)); } -.kroma-input:hover, .kroma-textarea:hover, .kroma-select:hover { +.kroma-input:hover, +.kroma-textarea:hover, +.kroma-select:hover { border-color: var(--neutral-400); box-shadow: var(--shadow-md); } /* Variants for Input, Textarea, and Select */ -[data-variant] .kroma-input, [data-variant] .kroma-textarea, [data-variant] .kroma-select { +[data-variant] .kroma-input, +[data-variant] .kroma-textarea, +[data-variant] .kroma-select { background-color: var(--variant-bg); border-color: var(--variant-border); color: var(--variant-text); box-shadow: var(--variant-shadow); } -[data-variant] .kroma-input::placeholder, [data-variant] .kroma-textarea::placeholder { +[data-variant] .kroma-input::placeholder, +[data-variant] .kroma-textarea::placeholder { color: var(--variant-text-light, rgba(255, 255, 255, 0.8)); } /* Disabled State */ -.kroma-input:disabled, .kroma-textarea:disabled, .kroma-select:disabled { +.kroma-input:disabled, +.kroma-textarea:disabled, +.kroma-select:disabled { color: var(--neutral-700); background-color: var(--neutral-200); cursor: not-allowed; @@ -2899,7 +2962,8 @@ blockquote { } /* Readonly State */ -.kroma-input-readonly, .kroma-textarea-readonly { +.kroma-input-readonly, +.kroma-textarea-readonly { background-color: var(--neutral-100); color: var(--neutral-800); cursor: default; @@ -2940,7 +3004,9 @@ blockquote { } /* Error State */ -.kroma-input-error, .kroma-textarea-error, .kroma-select-error { +.kroma-input-error, +.kroma-textarea-error, +.kroma-select-error { border-color: var(--variant-border, var(--danger-border)); box-shadow: 0px 0px 0px 3px var(--variant-light-bg, var(--danger-light-bg)); } @@ -2953,7 +3019,8 @@ blockquote { } /* Checkbox & Radio Groups */ -.kroma-checkbox-group, .kroma-radio-group { +.kroma-checkbox-group, +.kroma-radio-group { display: flex; gap: var(--space-4); align-items: center; @@ -2961,7 +3028,8 @@ blockquote { } /* Base Checkbox and Radio Styles */ -.kroma-checkbox, .kroma-radio { +.kroma-checkbox, +.kroma-radio { display: inline-flex; align-items: center; gap: var(--space-2); @@ -2971,14 +3039,16 @@ blockquote { transition: color var(--transition-colors); } -.kroma-checkbox input[type="checkbox"], .kroma-radio input[type="radio"] { +.kroma-checkbox input[type="checkbox"], +.kroma-radio input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; } /* Checkbox and Radio Icons */ -.kroma-checkbox-icon, .kroma-radio-icon { +.kroma-checkbox-icon, +.kroma-radio-icon { display: inline-flex; align-items: center; justify-content: center; @@ -3001,13 +3071,15 @@ blockquote { } /* Hover and Active States */ -.kroma-checkbox:hover .kroma-checkbox-icon, .kroma-radio:hover .kroma-radio-icon { +.kroma-checkbox:hover .kroma-checkbox-icon, +.kroma-radio:hover .kroma-radio-icon { border-color: var(--neutral-400); box-shadow: var(--shadow-lg); transform: scale(1.05); } -.kroma-checkbox:active .kroma-checkbox-icon, .kroma-radio:active .kroma-radio-icon { +.kroma-checkbox:active .kroma-checkbox-icon, +.kroma-radio:active .kroma-radio-icon { box-shadow: var(--shadow-sm); transform: scale(0.95); } @@ -3041,201 +3113,176 @@ blockquote { /* --- hero.css --- */ /* Base Hero Styles */ .kroma-hero { - position: relative; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - border-radius: var(--radius-lg); - color: var(--neutral-900); - background-color: var(--neutral-50); - box-shadow: var(--shadow-lg); - margin: var(--space-4); - padding: var(--space-4); - transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-colors); - width: calc(100% - var(--space-8)); - overflow: hidden; - } - - /* Gradient Variants */ - .kroma-hero[data-variant] { - background: linear-gradient(135deg, var(--variant-light-bg), var(--variant-bg)); - color: var(--variant-text); - } - - /* Specific Variants */ - .kroma-hero[data-variant="primary"] { - --variant-light-bg: var(--primary-light-bg); - --variant-bg: var(--primary-bg); - --variant-text: var(--primary-text); - } - - .kroma-hero[data-variant="secondary"] { - --variant-light-bg: var(--secondary-light-bg); - --variant-bg: var(--secondary-bg); - --variant-text: var(--secondary-text); - } - - .kroma-hero[data-variant="danger"] { - --variant-light-bg: var(--danger-light-bg); - --variant-bg: var(--danger-bg); - --variant-text: var(--danger-text); - } - - .kroma-hero[data-variant="info"] { - --variant-light-bg: var(--info-light-bg); - --variant-bg: var(--info-bg); - --variant-text: var(--info-text); - } - - /* Overlay Effects */ - .kroma-hero[data-overlay]::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - border-radius: inherit; - pointer-events: none; - } - - .kroma-hero[data-overlay="dark"]::before { - background: rgba(0, 0, 0, 0.5); - } - - .kroma-hero[data-overlay="light"]::before { - background: rgba(255, 255, 255, 0.5); - } - - .kroma-hero[data-overlay="gradient-dark"]::before { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); - } - - .kroma-hero[data-overlay="gradient-light"]::before { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)); - } - - /* Hero Content */ - .kroma-hero-content { - position: relative; - z-index: 1; - width: 100%; - max-width: 90%; - margin: 0 auto; - padding: var(--space-4); - font-size: var(--font-lg); - } - - /* Size Variants */ - .kroma-hero[data-size="sm"] { max-height: 40vh; } - .kroma-hero[data-size="md"] { max-height: 60vh; } - .kroma-hero[data-size="lg"] { max-height: 80vh; } - .kroma-hero[data-size="full"] { max-height: 100vh; } - - /* Layout Options */ - .kroma-hero[data-layout="row"] { - flex-direction: row; - text-align: left; - } - - .kroma-hero[data-layout="row-reverse"] { - flex-direction: row-reverse; - text-align: left; - } - - .kroma-hero[data-layout="column"] { - flex-direction: column; - } - - /* Content Alignment */ - .kroma-hero[data-alignment="start"] { justify-content: flex-start; } - .kroma-hero[data-alignment="end"] { justify-content: flex-end; } - .kroma-hero[data-alignment="center"] { justify-content: center; } - - /* Content Width Variants */ - .kroma-hero[data-content-width="narrow"] .kroma-hero-content { max-width: 65ch; } - .kroma-hero[data-content-width="wide"] .kroma-hero-content { max-width: 100ch; } - - /* Spacing Variants */ - .kroma-hero[data-spacing="sm"] { padding: var(--space-3); } - .kroma-hero[data-spacing="md"] { padding: var(--space-6); } - .kroma-hero[data-spacing="lg"] { padding: var(--space-8); } - - /* Border Radius Variants */ - .kroma-hero[data-radius="none"] { border-radius: 0; } - .kroma-hero[data-radius="sm"] { border-radius: var(--radius-sm); } - .kroma-hero[data-radius="lg"] { border-radius: var(--radius-lg); } - - /* Shadow Variants */ - .kroma-hero[data-shadow="none"] { box-shadow: none; } - .kroma-hero[data-shadow="sm"] { box-shadow: var(--shadow-sm); } - .kroma-hero[data-shadow="xl"] { box-shadow: var(--shadow-xl); } - - /* Hover Effects */ - .kroma-hero[data-hover="lift"]:hover { - transform: translateY(-5px); - box-shadow: var(--shadow-xl); - } - - .kroma-hero[data-hover="scale"]:hover { - transform: scale(1.03); - } - - .kroma-hero[data-hover="brightness"]:hover { - filter: brightness(1.15); - } - - /* Animation Variants */ - .kroma-hero[data-animation="fade"] { animation: heroFade 0.5s ease-in; } - .kroma-hero[data-animation="slide"] { animation: heroSlide 0.5s ease-out; } - .kroma-hero[data-animation="scale"] { animation: heroScale 0.5s ease-in-out; } - - @keyframes heroFade { - from { opacity: 0; } - to { opacity: 1; } - } - - @keyframes heroSlide { - from { transform: translateY(20px); opacity: 0; } - to { transform: translateY(0); opacity: 1; } - } - - @keyframes heroScale { - from { transform: scale(0.9); opacity: 0; } - to { transform: scale(1); opacity: 1; } - } - - /* Hero Image */ - .kroma-hero[data-image] { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } - - .kroma-hero[data-image]::before { - background: none; /* Ensures overlay is only applied on image backgrounds */ - } - - /* Responsive Adjustments */ - @media (max-width: 1280px) { - .kroma-hero-content { max-width: 95%; } - } - - @media (max-width: 1024px) { - .kroma-hero { - margin: var(--space-3); - padding: var(--space-3); - } + position: relative; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + border-radius: var(--radius-lg); + color: var(--neutral-900); + background-color: var(--neutral-50); + box-shadow: var(--shadow-lg); + margin: var(--space-4); + padding: var(--space-4); + transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-colors); + width: calc(100% - var(--space-8)); + overflow: hidden; +} + +/* Gradient Variants */ +.kroma-hero[data-variant] { + background: linear-gradient(135deg, var(--variant-light-bg), var(--variant-bg)); + color: var(--variant-text); +} + +/* Overlay Effects */ +.kroma-hero[data-overlay]::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + border-radius: inherit; + pointer-events: none; +} + +.kroma-hero[data-overlay="dark"]::before { + background: rgba(0, 0, 0, 0.5); +} + +.kroma-hero[data-overlay="light"]::before { + background: rgba(255, 255, 255, 0.5); +} + +.kroma-hero[data-overlay="gradient-dark"]::before { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); +} + +.kroma-hero[data-overlay="gradient-light"]::before { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)); +} + +/* Hero Content */ +.kroma-hero-content { + position: relative; + z-index: 1; + width: 100%; + max-width: 90%; + margin: 0 auto; + padding: var(--space-4); + font-size: var(--font-lg); +} + +/* Size Variants */ +.kroma-hero[data-size="sm"] { max-height: 40vh; } +.kroma-hero[data-size="md"] { max-height: 60vh; } +.kroma-hero[data-size="lg"] { max-height: 80vh; } +.kroma-hero[data-size="full"] { max-height: 100vh; } + +/* Layout Options */ +.kroma-hero[data-layout="row"] { + flex-direction: row; + text-align: left; +} + +.kroma-hero[data-layout="row-reverse"] { + flex-direction: row-reverse; + text-align: left; +} + +.kroma-hero[data-layout="column"] { + flex-direction: column; +} + +/* Content Alignment */ +.kroma-hero[data-alignment="start"] { justify-content: flex-start; } +.kroma-hero[data-alignment="end"] { justify-content: flex-end; } +.kroma-hero[data-alignment="center"] { justify-content: center; } + +/* Content Width Variants */ +.kroma-hero[data-content-width="narrow"] .kroma-hero-content { max-width: 65ch; } +.kroma-hero[data-content-width="wide"] .kroma-hero-content { max-width: 100ch; } + +/* Spacing Variants */ +.kroma-hero[data-spacing="sm"] { padding: var(--space-3); } +.kroma-hero[data-spacing="md"] { padding: var(--space-6); } +.kroma-hero[data-spacing="lg"] { padding: var(--space-8); } + +/* Border Radius Variants */ +.kroma-hero[data-radius="none"] { border-radius: 0; } +.kroma-hero[data-radius="sm"] { border-radius: var(--radius-sm); } +.kroma-hero[data-radius="lg"] { border-radius: var(--radius-lg); } + +/* Shadow Variants */ +.kroma-hero[data-shadow="none"] { box-shadow: none; } +.kroma-hero[data-shadow="sm"] { box-shadow: var(--shadow-sm); } +.kroma-hero[data-shadow="xl"] { box-shadow: var(--shadow-xl); } + +/* Hover Effects */ +.kroma-hero[data-hover="lift"]:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-xl); +} + +.kroma-hero[data-hover="scale"]:hover { + transform: scale(1.03); +} + +.kroma-hero[data-hover="brightness"]:hover { + filter: brightness(1.15); +} + +/* Animation Variants */ +.kroma-hero[data-animation="fade"] { animation: heroFade 0.5s ease-in; } +.kroma-hero[data-animation="slide"] { animation: heroSlide 0.5s ease-out; } +.kroma-hero[data-animation="scale"] { animation: heroScale 0.5s ease-in-out; } + +@keyframes heroFade { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes heroSlide { + from { transform: translateY(20px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +@keyframes heroScale { + from { transform: scale(0.9); opacity: 0; } + to { transform: scale(1); opacity: 1; } +} + +/* Hero Image */ +.kroma-hero[data-image] { + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.kroma-hero[data-image]::before { + background: none; +} + +/* Responsive Adjustments */ +@media (max-width: 1280px) { + .kroma-hero-content { max-width: 95%; } +} + +@media (max-width: 1024px) { + .kroma-hero { + margin: var(--space-3); + padding: var(--space-3); } - - @media (max-width: 768px) { - .kroma-hero-content { - font-size: clamp(0.875rem, 1.5vw, 1rem); - } +} + +@media (max-width: 768px) { + .kroma-hero-content { + font-size: clamp(0.875rem, 1.5vw, 1rem); } - +} + /* --- hologram.css --- */ /* Base Hologram Overlay Styles */ @@ -3369,10 +3416,10 @@ blockquote { /* Responsive Adjustments */ @media (max-width: 768px) { .kroma-hologram-title { - font-size: clamp(1.5rem, 4vw, 3rem); + font-size: clamp(1.5rem, 4vw, 3rem); } .kroma-hologram-subtitle { - font-size: clamp(0.875rem, 2vw, 1.5rem); + font-size: clamp(0.875rem, 2vw, 1.5rem); } } @@ -3385,7 +3432,7 @@ blockquote { left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.8); + background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent backdrop */ display: flex; justify-content: center; align-items: center; @@ -3393,7 +3440,7 @@ blockquote { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; - backdrop-filter: blur(6px); + backdrop-filter: blur(6px); /* Smooth backdrop blur */ } .kroma-modal-overlay.active { @@ -3403,15 +3450,15 @@ blockquote { /* Modal Container */ .kroma-modal { - background-color: var(--variant-bg); + background-color: var(--variant-bg, var(--neutral-50)); border-radius: var(--radius-2xl); - box-shadow: var(--variant-shadow); + box-shadow: var(--variant-shadow, var(--shadow-lg)); max-width: clamp(20rem, 50vw, 40rem); width: 100%; position: relative; animation: kroma-modal-appear 0.4s cubic-bezier(0.25, 1, 0.5, 1); overflow: hidden; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); } @keyframes kroma-modal-appear { @@ -3428,12 +3475,12 @@ blockquote { /* Modal Header */ .kroma-modal-header { padding: var(--space-4); - background-color: var(--variant-light-bg); - border-bottom: 1px solid var(--variant-border); + background-color: var(--variant-light-bg, var(--neutral-100)); + border-bottom: 1px solid var(--variant-border, var(--neutral-300)); display: flex; justify-content: space-between; align-items: center; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-800)); } .kroma-modal-title { @@ -3446,12 +3493,12 @@ blockquote { border: none; font-size: 1.5rem; cursor: pointer; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-800)); transition: color 0.2s ease-in-out, transform 0.2s ease; } .kroma-modal-close:hover { - color: var(--variant-hover-bg); + color: var(--variant-hover-bg, var(--neutral-700)); transform: scale(1.1); } @@ -3460,25 +3507,25 @@ blockquote { padding: var(--space-4); overflow-y: auto; max-height: 60vh; - scrollbar-color: var(--variant-hover-bg) var(--variant-light-bg); + scrollbar-color: var(--variant-hover-bg, var(--neutral-300)) var(--variant-light-bg, var(--neutral-100)); scrollbar-width: thin; } .kroma-modal-body::-webkit-scrollbar { width: 8px; - background-color: var(--variant-light-bg); + background-color: var(--variant-light-bg, var(--neutral-100)); } .kroma-modal-body::-webkit-scrollbar-thumb { - background-color: var(--variant-hover-bg); + background-color: var(--variant-hover-bg, var(--neutral-300)); border-radius: 4px; } /* Modal Footer */ .kroma-modal-footer { padding: var(--space-4); - background-color: var(--variant-light-bg); - border-top: 1px solid var(--variant-border); + background-color: var(--variant-light-bg, var(--neutral-100)); + border-top: 1px solid var(--variant-border, var(--neutral-300)); text-align: right; } @@ -3489,9 +3536,9 @@ blockquote { border-radius: 0; max-width: none; max-height: none; - padding: var(--space-6); - background-color: var(--neutral-200); - color: var(--neutral-50); + padding: var(--space-6); + background-color: var(--neutral-200); + color: var(--neutral-50); } /* Responsive Adjustments */ @@ -3521,19 +3568,19 @@ blockquote { display: flex; align-items: center; padding: var(--space-2); - border: 1px solid var(--variant-border); + border: 1px solid var(--variant-border, var(--neutral-300)); border-radius: var(--radius-md); - background-color: var(--variant-bg); - box-shadow: var(--variant-shadow); + background-color: var(--variant-bg, var(--neutral-50)); + box-shadow: var(--variant-shadow, var(--shadow-md)); cursor: pointer; transition: border-color var(--transition-colors), box-shadow var(--transition-all); position: relative; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); } .kroma-multiselect-dropdown:focus-within { - border-color: var(--variant-hover-bg); - box-shadow: 0 0 0 3px var(--variant-light-bg); + border-color: var(--variant-hover-bg, var(--neutral-400)); + box-shadow: 0 0 0 3px var(--variant-light-bg, var(--neutral-200)); } /* Search Input */ @@ -3544,13 +3591,13 @@ blockquote { padding: var(--space-1); background: transparent; font-size: 1rem; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); } /* Clear Button */ .kroma-clear-selection { font-size: 1.25rem; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); cursor: pointer; background: none; border: none; @@ -3573,10 +3620,10 @@ blockquote { top: calc(100% + var(--space-1)); left: 0; width: 100%; - border: 1px solid var(--variant-border); + border: 1px solid var(--variant-border, var(--neutral-300)); border-radius: var(--radius-md); - background-color: var(--variant-dark-bg); - box-shadow: var(--variant-shadow); + background-color: var(--variant-dark-bg, var(--neutral-100)); + box-shadow: var(--variant-shadow, var(--shadow-lg)); max-height: 200px; overflow-y: auto; display: none; @@ -3593,17 +3640,17 @@ blockquote { padding: var(--space-2); cursor: pointer; transition: background-color var(--transition-colors), color var(--transition-colors); - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); } .kroma-multiselect-option:hover { - background-color: var(--variant-hover-bg); + background-color: var(--variant-hover-bg, var(--neutral-300)); color: #fff; } .kroma-multiselect-option.selected { - background-color: var(--variant-hover-bg); - color: var(--variant-text); + background-color: var(--variant-hover-bg, var(--neutral-400)); + color: var(--variant-text, var(--neutral-900)); } /* Chips for Selected Options */ @@ -3623,7 +3670,7 @@ blockquote { font-size: 0.875rem; line-height: 1.2; color: #fff; - background-color: var(--variant-bg); + background-color: var(--variant-bg, var(--neutral-600)); } .kroma-chip-remove { @@ -3636,17 +3683,17 @@ blockquote { /* Scrollbar Customization */ .kroma-multiselect-options::-webkit-scrollbar { width: 8px; - background-color: var(--variant-light-bg); + background-color: var(--variant-light-bg, var(--neutral-200)); } .kroma-multiselect-options::-webkit-scrollbar-thumb { - background-color: var(--variant-hover-bg); + background-color: var(--variant-hover-bg, var(--neutral-300)); border-radius: 4px; } /* Placeholder Color */ .kroma-multiselect-search::placeholder { - color: rgba(255, 255, 255, 0.7); + color: var(--variant-text-light, rgba(0, 0, 0, 0.6)); } /* Responsive Adjustments */ @@ -4877,173 +4924,167 @@ html:has(.kroma-navbar) .kroma-sidebar{ /* --- stat-metrics.css --- */ /* Base Stat Box Styles */ .kroma-stat-box { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: clamp(var(--space-4), 2vw, var(--space-6)); - border-radius: var(--radius-lg); - background-color: var(--neutral-50); - box-shadow: var(--shadow-md); - transition: background-color var(--transition-colors), transform 0.3s ease, box-shadow 0.3s ease; - text-align: center; - width: 100%; - max-width: 350px; - gap: clamp(var(--space-2), 2vw, var(--space-4)); - margin: var(--space-4) auto; - overflow: hidden; - } - - /* Hover and Focus States */ - .kroma-stat-box:hover { - background-color: var(--neutral-100); - box-shadow: var(--shadow-lg); - transform: translateY(-2px); - } - .kroma-stat-box:focus-within { - outline: 2px solid var(--primary); - } - - /* Icon Styling */ - .kroma-stat-box .kroma-icon { - font-size: clamp(2.5rem, 5vw, 4rem); - line-height: clamp(2.5rem, 5vw, 4rem); - color: var(--neutral-800); + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: clamp(var(--space-4), 2vw, var(--space-6)); + border-radius: var(--radius-lg); + background-color: var(--variant-bg, var(--neutral-50)); + box-shadow: var(--variant-shadow, var(--shadow-md)); + transition: background-color var(--transition-colors), transform 0.3s ease, box-shadow 0.3s ease; + text-align: center; + width: 100%; + max-width: 350px; + gap: clamp(var(--space-2), 2vw, var(--space-4)); + margin: var(--space-4) auto; + overflow: hidden; + color: var(--variant-text, var(--neutral-900)); +} + +/* Hover and Focus States */ +.kroma-stat-box:hover { + background-color: var(--variant-hover-bg, var(--neutral-100)); + box-shadow: var(--shadow-lg); + transform: translateY(-2px); +} +.kroma-stat-box:focus-within { + outline: 2px solid var(--primary); +} + +/* Icon Styling */ +.kroma-stat-box .kroma-icon { + font-size: clamp(2.5rem, 5vw, 4rem); + line-height: clamp(2.5rem, 5vw, 4rem); + color: var(--variant-text, var(--neutral-800)); +} + +/* Title and Value Styling */ +.kroma-stat-box .kroma-title { + font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem); + line-height: clamp(1rem, 2vw + 0.5rem, 1.25rem); + font-weight: 500; + color: var(--variant-text, var(--neutral-900)); +} + +.kroma-stat-box .kroma-value { + font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); + line-height: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); + font-weight: 700; + margin-bottom: var(--space-2); +} + +/* Change Indicator */ +.kroma-stat-box .kroma-change { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-1); + font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); + line-height: clamp(0.875rem, 1vw + 0.5rem, 1rem); + font-weight: 500; + margin-top: var(--space-2); +} + +/* Positive and Negative Changes */ +.kroma-stat-box .kroma-change[data-change="positive"] { + color: var(--success); +} +.kroma-stat-box .kroma-change[data-change="negative"] { + color: var(--danger); +} + +/* Layout Variants */ +.kroma-stat-box[data-layout="horizontal"] { + flex-direction: row; + align-items: center; + gap: var(--space-4); + text-align: left; + padding: clamp(var(--space-3), 1vw, var(--space-4)); +} +.kroma-stat-box[data-layout="compact"] { + padding: var(--space-2); + max-width: 250px; + gap: var(--space-2); +} +.kroma-stat-box[data-layout="expanded"] { + padding: clamp(var(--space-6), 3vw, var(--space-8)); + max-width: 450px; + box-shadow: var(--shadow-xl); +} + +/* Alignment Variants */ +.kroma-stat-box[data-alignment="start"] { + align-items: flex-start; + text-align: left; +} +.kroma-stat-box[data-alignment="end"] { + align-items: flex-end; + text-align: right; +} + +/* Spacing Variants */ +.kroma-stat-box[data-spacing="sm"] { + padding: var(--space-2); +} +.kroma-stat-box[data-spacing="lg"] { + padding: var(--space-8); +} + +/* Shadow Options */ +.kroma-stat-box[data-shadow="none"] { + box-shadow: none; +} +.kroma-stat-box[data-shadow="sm"] { + box-shadow: var(--shadow-sm); +} +.kroma-stat-box[data-shadow="lg"] { + box-shadow: var(--shadow-lg); +} + +/* Border Radius Options */ +.kroma-stat-box[data-radius="sm"] { + border-radius: var(--radius-sm); +} +.kroma-stat-box[data-radius="full"] { + border-radius: var(--radius-full); +} + +/* Hover Effects */ +.kroma-stat-box[data-hover="lift"]:hover { + transform: translateY(-3px); + box-shadow: var(--shadow-xl); +} +.kroma-stat-box[data-hover="scale"]:hover { + transform: scale(1.05); +} +.kroma-stat-box[data-hover="brightness"]:hover { + filter: brightness(1.1); +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .kroma-stat-box { + padding: var(--space-3); + max-width: 90%; } - - /* Title and Value Styling */ .kroma-stat-box .kroma-title { - font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem); - line-height: clamp(1rem, 2vw + 0.5rem, 1.25rem); - font-weight: 500; - color: var(--neutral-900); + font-size: clamp(0.875rem, 2vw, 1rem); } - .kroma-stat-box .kroma-value { - font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); - line-height: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); - font-weight: 700; - color: var(--neutral-900); - margin-bottom: var(--space-2); - } - - /* Change Indicator */ - .kroma-stat-box .kroma-change { - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-1); - font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); - line-height: clamp(0.875rem, 1vw + 0.5rem, 1rem); - font-weight: 500; - margin-top: var(--space-2); - } - - /* Positive and Negative Changes */ - .kroma-stat-box .kroma-change[data-change="positive"] { - color: var(--success); - } - .kroma-stat-box .kroma-change[data-change="negative"] { - color: var(--danger); - } - - .kroma-stat-box { - background-color: var(--variant-bg); - color: var(--variant-text); - box-shadow: var(--variant-shadow); + font-size: clamp(1.5rem, 4vw, 2rem); } - - /* Layout Variants */ .kroma-stat-box[data-layout="horizontal"] { - flex-direction: row; - align-items: center; - gap: var(--space-4); - text-align: left; - padding: clamp(var(--space-3), 1vw, var(--space-4)); - } - .kroma-stat-box[data-layout="compact"] { - padding: var(--space-2); - max-width: 250px; - gap: var(--space-2); - } - .kroma-stat-box[data-layout="expanded"] { - padding: clamp(var(--space-6), 3vw, var(--space-8)); - max-width: 450px; - box-shadow: var(--shadow-xl); - } - - /* Alignment Variants */ - .kroma-stat-box[data-alignment="start"] { - align-items: flex-start; - text-align: left; - } - .kroma-stat-box[data-alignment="end"] { - align-items: flex-end; - text-align: right; - } - - /* Spacing Variants */ - .kroma-stat-box[data-spacing="sm"] { - padding: var(--space-2); - } - .kroma-stat-box[data-spacing="lg"] { - padding: var(--space-8); - } - - /* Shadow Options */ - .kroma-stat-box[data-shadow="none"] { - box-shadow: none; - } - .kroma-stat-box[data-shadow="sm"] { - box-shadow: var(--shadow-sm); - } - .kroma-stat-box[data-shadow="lg"] { - box-shadow: var(--shadow-lg); - } - - /* Border Radius Options */ - .kroma-stat-box[data-radius="sm"] { - border-radius: var(--radius-sm); - } - .kroma-stat-box[data-radius="full"] { - border-radius: var(--radius-full); - } - - /* Hover Effects */ - .kroma-stat-box[data-hover="lift"]:hover { - transform: translateY(-3px); - box-shadow: var(--shadow-xl); - } - .kroma-stat-box[data-hover="scale"]:hover { - transform: scale(1.05); - } - .kroma-stat-box[data-hover="brightness"]:hover { - filter: brightness(1.1); - } - - /* Responsive Adjustments */ - @media (max-width: 768px) { - .kroma-stat-box { - padding: var(--space-3); - max-width: 90%; - } - .kroma-stat-box .kroma-title { - font-size: clamp(0.875rem, 2vw, 1rem); - } - .kroma-stat-box .kroma-value { - font-size: clamp(1.5rem, 4vw, 2rem); - } - .kroma-stat-box[data-layout="horizontal"] { flex-direction: column; align-items: center; text-align: center; - } - .kroma-stat-box .kroma-change { + } + .kroma-stat-box .kroma-change { margin-top: var(--space-1); - } } - +} + /* --- stepper.css --- */ /* Base Stepper Container */ diff --git a/src/css/components/accordion.css b/src/css/components/accordion.css index b1d6f52..db14cb8 100644 --- a/src/css/components/accordion.css +++ b/src/css/components/accordion.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 */ diff --git a/src/css/components/alert.css b/src/css/components/alert.css index f056003..9b272c5 100644 --- a/src/css/components/alert.css +++ b/src/css/components/alert.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); } diff --git a/src/css/components/avatar.css b/src/css/components/avatar.css index 3096a36..84f7462 100644 --- a/src/css/components/avatar.css +++ b/src/css/components/avatar.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 */ diff --git a/src/css/components/badge.css b/src/css/components/badge.css index e6b9957..e433cb5 100644 --- a/src/css/components/badge.css +++ b/src/css/components/badge.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 */ diff --git a/src/css/components/breadcrumbs.css b/src/css/components/breadcrumbs.css index 8ea3611..6a93a80 100644 --- a/src/css/components/breadcrumbs.css +++ b/src/css/components/breadcrumbs.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); } diff --git a/src/css/components/button.css b/src/css/components/button.css index a064eda..73a935b 100644 --- a/src/css/components/button.css +++ b/src/css/components/button.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)); diff --git a/src/css/components/calendar.css b/src/css/components/calendar.css index 8eaef04..a4e3b06 100644 --- a/src/css/components/calendar.css +++ b/src/css/components/calendar.css @@ -1,207 +1,204 @@ /* Calendar Container */ .kroma-calendar { - max-width: 100%; - width: 100%; - font-family: var(--font-sans); - color: var(--neutral-800); - background-color: var(--neutral-50); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-xl); - padding: var(--space-4); - overflow: hidden; - transition: var(--transition-all); - } - - /* Calendar Variant Colors */ + max-width: 100%; + width: 100%; + font-family: var(--font-sans); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-xl); + padding: var(--space-4); + overflow: hidden; + transition: var(--transition-all); + background-color: var(--calendar-bg, var(--neutral-100)); + color: var(--calendar-text, var(--neutral-800)); +} + +/* Dynamic Variant Handling */ +.kroma-calendar { + --calendar-bg: var(--variant-bg, var(--neutral-100)); + --calendar-text: var(--variant-text, var(--neutral-800)); + --calendar-hover-bg: var(--variant-light-bg, var(--neutral-300)); + --calendar-selected-bg: var(--variant-hover, var(--neutral-200)); + --calendar-today-border: var(--variant-border, var(--neutral-500)); + --calendar-scrollbar: var(--variant-dark-bg, var(--neutral-400)); +} + +/* Calendar Header */ +.kroma-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4); + background-color: var(--calendar-bg); + color: var(--calendar-text); + border-radius: var(--radius-md); + font-size: clamp(1.5rem, 2.5vw, 1.75rem); + text-transform: uppercase; + gap: var(--space-4); + height: clamp(3.5rem, 7vw, 4.5rem); +} + +/* Navigation Icons */ +.kroma-calendar-nav { + background: none; + border: none; + color: var(--calendar-text); + font-size: clamp(2rem, 4vw, 2.5rem); + cursor: pointer; + transition: color var(--transition-colors), transform var(--transition-transform); + display: flex; + align-items: center; +} + +.kroma-calendar-nav:hover { + color: var(--calendar-hover-bg); + transform: scale(1.2); +} + +/* Month and Year Display */ +.kroma-calendar-month-year { + font-size: clamp(1.5rem, 3vw, 1.75rem); + font-weight: bold; + text-align: center; + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* Month and Year Selectors */ +.kroma-calendar-selectors { + display: flex; + gap: var(--space-2); + margin-top: var(--space-2); +} + +.kroma-calendar-selectors select { + padding: var(--space-2) var(--space-3); + font-size: clamp(0.875rem, 1vw, 1rem); + border-radius: var(--radius-md); + border: 1px solid var(--neutral-300); + color: var(--neutral-800); + background-color: var(--neutral-100); + outline: none; + cursor: pointer; + appearance: none; + transition: background-color var(--transition-colors), border-color var(--transition-colors); +} + +/* Calendar Body */ +.kroma-calendar-body { + padding: var(--space-4); +} + +/* Weekday Names and Dates */ +.kroma-calendar-weekdays, +.kroma-calendar-dates { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: var(--space-2); + margin-top: var(--space-2); + justify-items: center; + align-items: center; +} + +/* Weekday Styling */ +.kroma-calendar-weekdays div { + text-align: center; + font-weight: 600; + color: var(--neutral-200); + padding: var(--space-1) 0; + border-radius: var(--radius-sm); +} + +/* Dates Styling */ +.kroma-calendar-dates button { + position: relative; + width: 100%; + height: clamp(4rem, 8vw, 5rem); + text-align: center; + background: none; + border: none; + border-radius: var(--radius-md); + font-size: clamp(1rem, 1vw, 1.125rem); + color: var(--calendar-text); + cursor: pointer; + transition: background-color var(--transition-colors), color var(--transition-colors), box-shadow var(--transition-all); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +/* Hover and Selected Date Effects */ +.kroma-calendar-dates button:hover { + background-color: var(--calendar-hover-bg); + color: var(--calendar-text); +} + +.kroma-calendar-dates button[data-selected="true"] { + background-color: var(--calendar-selected-bg); + color: var(--calendar-text); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.kroma-calendar-dates button[data-today="true"] { + border: 2px solid var(--calendar-today-border); + border-radius: var(--radius-md); +} + +/* Disabled Dates */ +.kroma-calendar-dates button[data-disabled="true"] { + color: var(--neutral-400); + cursor: not-allowed; +} + +/* Calendar Variant with Items */ +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates button { + display: flex; + flex-direction: column; + padding: var(--space-1) var(--space-2); + overflow-y: auto; +} + +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates .date-item { + font-size: 0.75rem; + color: var(--neutral-800); + background-color: var(--neutral-200); + border-radius: var(--radius-sm); + padding: 0.125rem var(--space-1); + margin-top: var(--space-1); + white-space: nowrap; +} + +/* Scrollbar for Day Cells */ +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar { + width: 6px; +} + +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar-thumb { + background-color: var(--calendar-scrollbar); + border-radius: var(--radius-md); +} + +.kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar-track { + background-color: var(--neutral-200); +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { .kroma-calendar { - --calendar-bg: var(--variant-bg); - --calendar-text: var(--variant-text); - --calendar-hover-bg: var(--variant-hover); - --calendar-selected-bg: var(--variant-light-bg); - --calendar-today-border: var(--variant-border); - --calendar-scrollbar: var(--variant-dark-bg); + padding: var(--space-2); } - - /* Calendar Header */ + .kroma-calendar-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-4); - background-color: var(--calendar-bg, var(--neutral-200)); - color: var(--calendar-text, var(--neutral-800)); - border-radius: var(--radius-md); - font-size: clamp(1.5rem, 2.5vw, 1.75rem); - text-transform: uppercase; - gap: var(--space-4); - height: clamp(3rem, 6vw, 4rem); - } - - /* Navigation Icons */ - .kroma-calendar-nav { - background: none; - border: none; - color: var(--neutral-800); - font-size: clamp(2rem, 4vw, 2.5rem); - cursor: pointer; - transition: color var(--transition-colors), transform var(--transition-transform); - display: flex; - align-items: center; - } - - .kroma-calendar-nav:hover { - color: var(--calendar-hover-bg, var(--neutral-600)); - transform: scale(1.2); - } - - /* Month and Year Display */ - .kroma-calendar-month-year { - font-size: clamp(1.5rem, 3vw, 1.75rem); - font-weight: bold; - text-align: center; - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; - } - - /* Month and Year Selectors */ - .kroma-calendar-selectors { - display: flex; + flex-wrap: nowrap; gap: var(--space-2); - margin-top: var(--space-2); - } - - .kroma-calendar-selectors select { - padding: var(--space-2) var(--space-3); - font-size: clamp(0.875rem, 1vw, 1rem); - border-radius: var(--radius-md); - border: 1px solid var(--neutral-300); - color: var(--neutral-800); - background-color: var(--neutral-100); - outline: none; - cursor: pointer; - appearance: none; - transition: background-color var(--transition-colors), border-color var(--transition-colors); - } - - /* Calendar Body */ - .kroma-calendar-body { - padding: var(--space-4); - } - - /* Weekday Names and Dates */ - .kroma-calendar-weekdays, - .kroma-calendar-dates { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: var(--space-2); - margin-top: var(--space-2); - justify-items: center; - align-items: center; - } - - /* Weekday Styling */ - .kroma-calendar-weekdays div { - text-align: center; - font-weight: 600; - color: var(--neutral-600); - padding: var(--space-1) 0; - border-radius: var(--radius-sm); + height: auto; } - - /* Dates Styling */ + + .kroma-calendar-weekdays div, .kroma-calendar-dates button { - position: relative; - width: 100%; - height: clamp(3.5rem, 7vw, 4.5rem); - max-height: 5rem; - text-align: center; - background: none; - border: none; - border-radius: var(--radius-md); - font-size: clamp(0.875rem, 1vw, 1rem); - color: var(--neutral-800); - cursor: pointer; - transition: background-color var(--transition-colors), color var(--transition-colors), box-shadow var(--transition-all); - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - flex-direction: column; - } - - /* Hover and Selected Date Effects */ - .kroma-calendar-dates button:hover { - background-color: var(--calendar-hover-bg, var(--neutral-300)); - color: var(--calendar-text); - } - - .kroma-calendar-dates button[data-selected="true"] { - background-color: var(--calendar-selected-bg); - color: var(--calendar-text); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - } - - .kroma-calendar-dates button[data-today="true"] { - border: 2px solid var(--calendar-today-border); - border-radius: var(--radius-md); - } - - /* Disabled Dates */ - .kroma-calendar-dates button[data-disabled="true"] { - color: var(--neutral-400); - cursor: not-allowed; - } - - /* Calendar Variant with Items */ - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates button { - display: flex; - flex-direction: column; - padding: var(--space-1) var(--space-2); - overflow-y: auto; - } - - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates .date-item { - font-size: 0.75rem; - color: var(--neutral-500); - background-color: var(--neutral-200); - border-radius: var(--radius-sm); - padding: 0.125rem var(--space-1); - margin-top: var(--space-1); - white-space: nowrap; - } - - /* Scrollbar for Day Cells */ - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar { - width: 6px; - } - - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar-thumb { - background-color: var(--calendar-scrollbar); - border-radius: var(--radius-md); - } - - .kroma-calendar[data-type="with-items"] .kroma-calendar-dates button::-webkit-scrollbar-track { - background-color: var(--neutral-200); - } - - /* Responsive Adjustments */ - @media (max-width: 768px) { - .kroma-calendar { - padding: var(--space-2); - } - - .kroma-calendar-header { - flex-wrap: nowrap; - gap: var(--space-2); - height: auto; - } - - .kroma-calendar-weekdays div, - .kroma-calendar-dates button { - font-size: clamp(0.75rem, 1.5vw, 0.875rem); - height: clamp(2.5rem, 10vw, 3rem); - } + font-size: clamp(0.85rem, 1.5vw, 1rem); + height: clamp(3rem, 10vw, 4rem); } - \ No newline at end of file +} diff --git a/src/css/components/card.css b/src/css/components/card.css index 8880901..f4cf062 100644 --- a/src/css/components/card.css +++ b/src/css/components/card.css @@ -20,13 +20,47 @@ box-shadow: var(--card-hover-shadow, var(--shadow-xl)); } +/* Card Variants */ +.kroma-card { + --card-bg: var(--variant-bg, var(--neutral-50)); + --card-text: var(--variant-text, var(--neutral-900)); + --card-header-text: var(--variant-text, var(--neutral-800)); + --card-body-text: var(--variant-text, var(--neutral-700)); + --card-footer-bg: var(--variant-light-bg, var(--neutral-100)); + --card-footer-text: var(--variant-text, var(--neutral-900)); + --card-hover-shadow: var(--variant-shadow, var(--shadow-xl)); +} + +/* Outline Style */ +.kroma-card[data-variant="outline"] { + background-color: transparent; + border: 1px solid var(--variant-border); + color: var(--variant-text); +} + +.kroma-card[data-variant="outline"]:hover { + box-shadow: var(--card-hover-shadow, var(--shadow-lg)); +} + +/* Elevated Variant */ +.kroma-card[data-variant="elevated"] { + background-color: var(--variant-bg); + box-shadow: var(--shadow-xl); +} + +/* Flat Variant */ +.kroma-card[data-variant="flat"] { + background-color: transparent; + box-shadow: none; +} + /* Card Header */ .kroma-card-header { width: 100%; padding: var(--space-5) var(--space-6); font-weight: bold; font-size: 1.25rem; - color: var(--card-header-text, var(--neutral-800)); + color: var(--card-header-text); border-bottom: 1px solid var(--card-header-border, var(--neutral-200)); text-align: center; } @@ -47,7 +81,7 @@ .kroma-card-body { padding: var(--space-6); text-align: center; - color: var(--card-body-text, var(--neutral-700)); + color: var(--card-body-text); font-size: 1rem; flex: 1 0 auto; /* Ensure body grows to fill available space */ } @@ -56,49 +90,15 @@ .kroma-card-footer { width: 100%; padding: var(--space-4) var(--space-6); - background-color: var(--card-footer-bg, var(--neutral-100)); + background-color: var(--card-footer-bg); border-top: 1px solid var(--card-footer-border, var(--neutral-200)); display: flex; justify-content: center; gap: var(--space-2); - color: var(--card-footer-text, var(--neutral-900)); + color: var(--card-footer-text); flex-shrink: 0; /* Prevent footer from shrinking */ } -/* Card Variants */ -.kroma-card[data-variant] { - --card-bg: var(--variant-bg); - --card-text: var(--variant-text); - --card-header-text: var(--variant-text); - --card-body-text: var(--variant-text); - --card-footer-bg: var(--variant-light-bg, var(--neutral-200)); - --card-footer-text: var(--variant-text); - --card-hover-shadow: var(--variant-shadow, var(--shadow-xl)); -} - -/* Outline Style */ -.kroma-card[data-variant="outline"] { - background-color: transparent; - border: 1px solid var(--variant-border); - color: var(--variant-text); -} - -.kroma-card[data-variant="outline"]:hover { - box-shadow: var(--card-hover-shadow, var(--shadow-lg)); -} - -/* Elevated Variant */ -.kroma-card[data-variant="elevated"] { - background-color: var(--variant-bg); - box-shadow: var(--shadow-xl); -} - -/* Flat Variant */ -.kroma-card[data-variant="flat"] { - background-color: transparent; - box-shadow: none; -} - /* Labels */ .kroma-card-label { position: absolute; @@ -142,6 +142,7 @@ align-self: stretch; /* Stretch footer to align with the card's layout */ } +/* Scrollable Cards */ .kroma-card-scrollable { display: flex; overflow-x: auto; @@ -163,7 +164,6 @@ background-color: var(--neutral-200); /* Scrollbar track color */ } -/* Scrollable Cards */ .kroma-card-scrollable .kroma-card { flex: 0 0 auto; scroll-snap-align: center; /* Center cards in the viewport */ diff --git a/src/css/components/codeblock.css b/src/css/components/codeblock.css index ca61deb..a756ad2 100644 --- a/src/css/components/codeblock.css +++ b/src/css/components/codeblock.css @@ -1,10 +1,10 @@ /* Base Styling for Code Block */ .kroma-code-block { - background: var(--variant-bg); - color: var(--variant-text); - border: 1px solid var(--variant-border); + background: var(--variant-bg, var(--neutral-50)); + color: var(--variant-text, var(--neutral-900)); + border: 1px solid var(--variant-border, var(--neutral-200)); border-radius: var(--radius-lg); - box-shadow: var(--variant-shadow); + box-shadow: var(--variant-shadow, var(--shadow-lg)); padding: clamp(var(--space-3), 2vw, var(--space-5)); position: relative; overflow: hidden; @@ -21,6 +21,7 @@ max-width: 80%; } } + @media (min-width: 1024px) { .kroma-code-block { margin: var(--space-6) auto; @@ -95,8 +96,8 @@ } .kroma-code-block .kroma-action-btn { - background: var(--variant-hover-bg); - color: var(--variant-text); + background: var(--variant-hover-bg, var(--neutral-200)); + color: var(--variant-text, var(--neutral-900)); border: none; border-radius: var(--radius-md); padding: clamp(var(--space-2), 1vw, var(--space-3)) var(--space-4); @@ -109,6 +110,6 @@ } .kroma-code-block .kroma-action-btn:hover { - background: var(--variant-hover); + background: var(--variant-hover, var(--neutral-300)); transform: scale(1.05); } diff --git a/src/css/components/command-palette.css b/src/css/components/command-palette.css index 1180ffb..bf4ac4e 100644 --- a/src/css/components/command-palette.css +++ b/src/css/components/command-palette.css @@ -102,7 +102,7 @@ .kroma-command-palette .kroma-palette-item:hover, .kroma-command-palette .kroma-palette-item:focus { background: var(--palette-item-hover-bg, var(--variant-hover-bg)); - color: var(--neutral-700); + color: var(--palette-item-hover-text, var(--neutral-700)); } .kroma-command-palette .kroma-palette-item[data-active="true"] { diff --git a/src/css/components/datetime-picker.css b/src/css/components/datetime-picker.css index 1424804..3283d94 100644 --- a/src/css/components/datetime-picker.css +++ b/src/css/components/datetime-picker.css @@ -128,7 +128,7 @@ .kroma-quick-select button:hover { background-color: var(--variant-hover-bg, var(--neutral-400)); color: #fff; -} +} /* Time Selector */ .kroma-time-selector { diff --git a/src/css/components/dropdown.css b/src/css/components/dropdown.css index ca4ea14..65f7d38 100644 --- a/src/css/components/dropdown.css +++ b/src/css/components/dropdown.css @@ -16,7 +16,7 @@ /* Dropdown Menu */ .kroma-dropdown-menu { position: absolute; - top: calc(100% + var(--space-1)); /* Reduced spacing for closer alignment */ + top: calc(100% + var(--space-1)); left: 0; min-width: 150px; background-color: var(--variant-bg, var(--neutral-50)); @@ -25,7 +25,7 @@ border-radius: var(--radius-lg); padding: var(--space-2) 0; opacity: 0; - transform: translateY(-5px); /* Slight offset for a subtle animation effect */ + transform: translateY(-5px); transition: opacity 0.3s ease, transform 0.3s ease; visibility: hidden; z-index: var(--z-30); @@ -35,7 +35,7 @@ /* Active State for Dropdown */ .kroma-dropdown.kroma-open .kroma-dropdown-menu { opacity: 1; - transform: translateY(0); /* Reset translation when active */ + transform: translateY(0); visibility: visible; } @@ -54,36 +54,26 @@ .kroma-dropdown-item:hover, .kroma-dropdown-item:focus { - background-color: var(--variant-hover-bg, var(--neutral-200)); - color: var(--variant-hover, var(--primary)); + background-color: var(--variant-dark-bg, var(--neutral-200)); } /* Position Variants */ .kroma-dropdown[data-position="top"] .kroma-dropdown-menu { top: auto; - bottom: calc(100% + var(--space-1)); /* Reduced spacing for top positioning */ - transform: translateY(5px); /* Subtle animation effect */ + bottom: calc(100% + var(--space-1)); + transform: translateY(5px); } .kroma-dropdown[data-position="right"] .kroma-dropdown-menu { top: 0; - left: calc(100% + var(--space-1)); /* Reduced spacing for right positioning */ - transform: translateX(-5px); /* Subtle animation effect */ + left: calc(100% + var(--space-1)); + transform: translateX(-5px); } .kroma-dropdown[data-position="left"] .kroma-dropdown-menu { top: 0; - right: calc(100% + var(--space-1)); /* Reduced spacing for left positioning */ - transform: translateX(5px); /* Subtle animation effect */ -} - -/* Variants Handling */ -.kroma-dropdown[data-variant="dark"] { - --variant-bg: var(--neutral-900); - --variant-text: var(--neutral-50); - --variant-hover-bg: var(--neutral-700); - --variant-hover: var(--neutral-50); - --variant-shadow: var(--shadow-lg); + right: calc(100% + var(--space-1)); + transform: translateX(5px); } /* Mega Menu */ diff --git a/src/css/components/fab.css b/src/css/components/fab.css index 6fd2ccc..373d734 100644 --- a/src/css/components/fab.css +++ b/src/css/components/fab.css @@ -3,19 +3,19 @@ position: fixed; bottom: var(--space-8, 2rem); right: var(--space-8, 2rem); - display: flex; /* Flexbox ensures centering of children */ - align-items: center; /* Vertically center content */ - justify-content: center; /* Horizontally center content */ - padding: 0; /* Remove default padding for precise centering */ + display: flex; + align-items: center; + justify-content: center; + padding: 0; font-size: 1.5rem; - width: clamp(3rem, 8vw, 4rem); /* Ensure FAB is always square */ - height: clamp(3rem, 8vw, 4rem); /* Match width for perfect circle */ + width: clamp(3rem, 8vw, 4rem); + height: clamp(3rem, 8vw, 4rem); background-color: var(--variant-bg, var(--primary)); color: var(--variant-text, #ffffff); cursor: pointer; border: none; box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.2)); - border-radius: var(--radius-full, 50%); /* Circular shape */ + border-radius: var(--radius-full, 50%); transition: background-color var(--transition-colors, 0.2s ease), transform var(--transition-transform, 0.2s ease), @@ -28,10 +28,10 @@ display: flex; align-items: center; justify-content: center; - width: 100%; /* Icon scales with FAB size */ - height: 100%; /* Icon scales with FAB size */ - font-size: inherit; /* Inherit FAB font size */ - line-height: 1; /* Prevent text alignment issues */ + width: 100%; + height: 100%; + font-size: inherit; + line-height: 1; } /* FAB Hover and Active States */ @@ -49,7 +49,7 @@ /* Shape Variants */ .kroma-fab[data-shape="circular"] { border-radius: var(--radius-full, 50%); - padding: 0; /* Ensure circular shape is preserved */ + padding: 0; } .kroma-fab[data-shape="square"] { @@ -61,6 +61,19 @@ padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem); } +/* Size Variants */ +.kroma-fab[data-size="small"] { + width: clamp(2.5rem, 6vw, 3rem); + height: clamp(2.5rem, 6vw, 3rem); + font-size: 1.25rem; +} + +.kroma-fab[data-size="large"] { + width: clamp(4rem, 10vw, 5rem); + height: clamp(4rem, 10vw, 5rem); + font-size: 1.75rem; +} + /* Responsive Adjustments */ @media (max-width: 768px) { .kroma-fab { diff --git a/src/css/components/file-upload.css b/src/css/components/file-upload.css index 476519e..dd5804a 100644 --- a/src/css/components/file-upload.css +++ b/src/css/components/file-upload.css @@ -174,7 +174,7 @@ opacity: 1; transform: translateY(0); } -} +} /* Responsive Adjustments */ @media (max-width: 768px) { diff --git a/src/css/components/form.css b/src/css/components/form.css index f4890df..f3619af 100644 --- a/src/css/components/form.css +++ b/src/css/components/form.css @@ -21,7 +21,9 @@ } /* Input, Textarea, and Select Base Styles */ -.kroma-input, .kroma-textarea, .kroma-select { +.kroma-input, +.kroma-textarea, +.kroma-select { font-family: var(--font-sans); font-size: clamp(0.875rem, 1vw + 0.25rem, 1rem); padding: var(--space-3) var(--space-4); @@ -35,36 +37,47 @@ } /* Placeholder Styling */ -.kroma-input::placeholder, .kroma-textarea::placeholder, .kroma-select::placeholder { +.kroma-input::placeholder, +.kroma-textarea::placeholder, +.kroma-select::placeholder { color: var(--neutral-500); } /* Focus and Hover Styles */ -.kroma-input:focus, .kroma-textarea:focus, .kroma-select:focus { +.kroma-input:focus, +.kroma-textarea:focus, +.kroma-select:focus { outline: none; border-color: var(--variant-border, var(--neutral-400)); box-shadow: 0px 0px 0px 3px var(--variant-light-bg, var(--neutral-200)); } -.kroma-input:hover, .kroma-textarea:hover, .kroma-select:hover { +.kroma-input:hover, +.kroma-textarea:hover, +.kroma-select:hover { border-color: var(--neutral-400); box-shadow: var(--shadow-md); } /* Variants for Input, Textarea, and Select */ -[data-variant] .kroma-input, [data-variant] .kroma-textarea, [data-variant] .kroma-select { +[data-variant] .kroma-input, +[data-variant] .kroma-textarea, +[data-variant] .kroma-select { background-color: var(--variant-bg); border-color: var(--variant-border); color: var(--variant-text); box-shadow: var(--variant-shadow); } -[data-variant] .kroma-input::placeholder, [data-variant] .kroma-textarea::placeholder { +[data-variant] .kroma-input::placeholder, +[data-variant] .kroma-textarea::placeholder { color: var(--variant-text-light, rgba(255, 255, 255, 0.8)); } /* Disabled State */ -.kroma-input:disabled, .kroma-textarea:disabled, .kroma-select:disabled { +.kroma-input:disabled, +.kroma-textarea:disabled, +.kroma-select:disabled { color: var(--neutral-700); background-color: var(--neutral-200); cursor: not-allowed; @@ -72,7 +85,8 @@ } /* Readonly State */ -.kroma-input-readonly, .kroma-textarea-readonly { +.kroma-input-readonly, +.kroma-textarea-readonly { background-color: var(--neutral-100); color: var(--neutral-800); cursor: default; @@ -113,7 +127,9 @@ } /* Error State */ -.kroma-input-error, .kroma-textarea-error, .kroma-select-error { +.kroma-input-error, +.kroma-textarea-error, +.kroma-select-error { border-color: var(--variant-border, var(--danger-border)); box-shadow: 0px 0px 0px 3px var(--variant-light-bg, var(--danger-light-bg)); } @@ -126,7 +142,8 @@ } /* Checkbox & Radio Groups */ -.kroma-checkbox-group, .kroma-radio-group { +.kroma-checkbox-group, +.kroma-radio-group { display: flex; gap: var(--space-4); align-items: center; @@ -134,7 +151,8 @@ } /* Base Checkbox and Radio Styles */ -.kroma-checkbox, .kroma-radio { +.kroma-checkbox, +.kroma-radio { display: inline-flex; align-items: center; gap: var(--space-2); @@ -144,14 +162,16 @@ transition: color var(--transition-colors); } -.kroma-checkbox input[type="checkbox"], .kroma-radio input[type="radio"] { +.kroma-checkbox input[type="checkbox"], +.kroma-radio input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; } /* Checkbox and Radio Icons */ -.kroma-checkbox-icon, .kroma-radio-icon { +.kroma-checkbox-icon, +.kroma-radio-icon { display: inline-flex; align-items: center; justify-content: center; @@ -174,13 +194,15 @@ } /* Hover and Active States */ -.kroma-checkbox:hover .kroma-checkbox-icon, .kroma-radio:hover .kroma-radio-icon { +.kroma-checkbox:hover .kroma-checkbox-icon, +.kroma-radio:hover .kroma-radio-icon { border-color: var(--neutral-400); box-shadow: var(--shadow-lg); transform: scale(1.05); } -.kroma-checkbox:active .kroma-checkbox-icon, .kroma-radio:active .kroma-radio-icon { +.kroma-checkbox:active .kroma-checkbox-icon, +.kroma-radio:active .kroma-radio-icon { box-shadow: var(--shadow-sm); transform: scale(0.95); } diff --git a/src/css/components/hero.css b/src/css/components/hero.css index cd90209..678a42b 100644 --- a/src/css/components/hero.css +++ b/src/css/components/hero.css @@ -1,197 +1,171 @@ /* Base Hero Styles */ .kroma-hero { - position: relative; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - border-radius: var(--radius-lg); - color: var(--neutral-900); - background-color: var(--neutral-50); - box-shadow: var(--shadow-lg); - margin: var(--space-4); - padding: var(--space-4); - transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-colors); - width: calc(100% - var(--space-8)); - overflow: hidden; - } - - /* Gradient Variants */ - .kroma-hero[data-variant] { - background: linear-gradient(135deg, var(--variant-light-bg), var(--variant-bg)); - color: var(--variant-text); - } - - /* Specific Variants */ - .kroma-hero[data-variant="primary"] { - --variant-light-bg: var(--primary-light-bg); - --variant-bg: var(--primary-bg); - --variant-text: var(--primary-text); - } - - .kroma-hero[data-variant="secondary"] { - --variant-light-bg: var(--secondary-light-bg); - --variant-bg: var(--secondary-bg); - --variant-text: var(--secondary-text); - } - - .kroma-hero[data-variant="danger"] { - --variant-light-bg: var(--danger-light-bg); - --variant-bg: var(--danger-bg); - --variant-text: var(--danger-text); - } - - .kroma-hero[data-variant="info"] { - --variant-light-bg: var(--info-light-bg); - --variant-bg: var(--info-bg); - --variant-text: var(--info-text); - } - - /* Overlay Effects */ - .kroma-hero[data-overlay]::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - border-radius: inherit; - pointer-events: none; - } - - .kroma-hero[data-overlay="dark"]::before { - background: rgba(0, 0, 0, 0.5); - } - - .kroma-hero[data-overlay="light"]::before { - background: rgba(255, 255, 255, 0.5); - } - - .kroma-hero[data-overlay="gradient-dark"]::before { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); - } - - .kroma-hero[data-overlay="gradient-light"]::before { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)); - } - - /* Hero Content */ + position: relative; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + border-radius: var(--radius-lg); + color: var(--neutral-900); + background-color: var(--neutral-50); + box-shadow: var(--shadow-lg); + margin: var(--space-4); + padding: var(--space-4); + transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-colors); + width: calc(100% - var(--space-8)); + overflow: hidden; +} + +/* Gradient Variants */ +.kroma-hero[data-variant] { + background: linear-gradient(135deg, var(--variant-light-bg), var(--variant-bg)); + color: var(--variant-text); +} + +/* Overlay Effects */ +.kroma-hero[data-overlay]::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + border-radius: inherit; + pointer-events: none; +} + +.kroma-hero[data-overlay="dark"]::before { + background: rgba(0, 0, 0, 0.5); +} + +.kroma-hero[data-overlay="light"]::before { + background: rgba(255, 255, 255, 0.5); +} + +.kroma-hero[data-overlay="gradient-dark"]::before { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); +} + +.kroma-hero[data-overlay="gradient-light"]::before { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)); +} + +/* Hero Content */ +.kroma-hero-content { + position: relative; + z-index: 1; + width: 100%; + max-width: 90%; + margin: 0 auto; + padding: var(--space-4); + font-size: var(--font-lg); +} + +/* Size Variants */ +.kroma-hero[data-size="sm"] { max-height: 40vh; } +.kroma-hero[data-size="md"] { max-height: 60vh; } +.kroma-hero[data-size="lg"] { max-height: 80vh; } +.kroma-hero[data-size="full"] { max-height: 100vh; } + +/* Layout Options */ +.kroma-hero[data-layout="row"] { + flex-direction: row; + text-align: left; +} + +.kroma-hero[data-layout="row-reverse"] { + flex-direction: row-reverse; + text-align: left; +} + +.kroma-hero[data-layout="column"] { + flex-direction: column; +} + +/* Content Alignment */ +.kroma-hero[data-alignment="start"] { justify-content: flex-start; } +.kroma-hero[data-alignment="end"] { justify-content: flex-end; } +.kroma-hero[data-alignment="center"] { justify-content: center; } + +/* Content Width Variants */ +.kroma-hero[data-content-width="narrow"] .kroma-hero-content { max-width: 65ch; } +.kroma-hero[data-content-width="wide"] .kroma-hero-content { max-width: 100ch; } + +/* Spacing Variants */ +.kroma-hero[data-spacing="sm"] { padding: var(--space-3); } +.kroma-hero[data-spacing="md"] { padding: var(--space-6); } +.kroma-hero[data-spacing="lg"] { padding: var(--space-8); } + +/* Border Radius Variants */ +.kroma-hero[data-radius="none"] { border-radius: 0; } +.kroma-hero[data-radius="sm"] { border-radius: var(--radius-sm); } +.kroma-hero[data-radius="lg"] { border-radius: var(--radius-lg); } + +/* Shadow Variants */ +.kroma-hero[data-shadow="none"] { box-shadow: none; } +.kroma-hero[data-shadow="sm"] { box-shadow: var(--shadow-sm); } +.kroma-hero[data-shadow="xl"] { box-shadow: var(--shadow-xl); } + +/* Hover Effects */ +.kroma-hero[data-hover="lift"]:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-xl); +} + +.kroma-hero[data-hover="scale"]:hover { + transform: scale(1.03); +} + +.kroma-hero[data-hover="brightness"]:hover { + filter: brightness(1.15); +} + +/* Animation Variants */ +.kroma-hero[data-animation="fade"] { animation: heroFade 0.5s ease-in; } +.kroma-hero[data-animation="slide"] { animation: heroSlide 0.5s ease-out; } +.kroma-hero[data-animation="scale"] { animation: heroScale 0.5s ease-in-out; } + +@keyframes heroFade { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes heroSlide { + from { transform: translateY(20px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +@keyframes heroScale { + from { transform: scale(0.9); opacity: 0; } + to { transform: scale(1); opacity: 1; } +} + +/* Hero Image */ +.kroma-hero[data-image] { + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.kroma-hero[data-image]::before { + background: none; +} + +/* Responsive Adjustments */ +@media (max-width: 1280px) { + .kroma-hero-content { max-width: 95%; } +} + +@media (max-width: 1024px) { + .kroma-hero { + margin: var(--space-3); + padding: var(--space-3); + } +} + +@media (max-width: 768px) { .kroma-hero-content { - position: relative; - z-index: 1; - width: 100%; - max-width: 90%; - margin: 0 auto; - padding: var(--space-4); - font-size: var(--font-lg); - } - - /* Size Variants */ - .kroma-hero[data-size="sm"] { max-height: 40vh; } - .kroma-hero[data-size="md"] { max-height: 60vh; } - .kroma-hero[data-size="lg"] { max-height: 80vh; } - .kroma-hero[data-size="full"] { max-height: 100vh; } - - /* Layout Options */ - .kroma-hero[data-layout="row"] { - flex-direction: row; - text-align: left; - } - - .kroma-hero[data-layout="row-reverse"] { - flex-direction: row-reverse; - text-align: left; - } - - .kroma-hero[data-layout="column"] { - flex-direction: column; - } - - /* Content Alignment */ - .kroma-hero[data-alignment="start"] { justify-content: flex-start; } - .kroma-hero[data-alignment="end"] { justify-content: flex-end; } - .kroma-hero[data-alignment="center"] { justify-content: center; } - - /* Content Width Variants */ - .kroma-hero[data-content-width="narrow"] .kroma-hero-content { max-width: 65ch; } - .kroma-hero[data-content-width="wide"] .kroma-hero-content { max-width: 100ch; } - - /* Spacing Variants */ - .kroma-hero[data-spacing="sm"] { padding: var(--space-3); } - .kroma-hero[data-spacing="md"] { padding: var(--space-6); } - .kroma-hero[data-spacing="lg"] { padding: var(--space-8); } - - /* Border Radius Variants */ - .kroma-hero[data-radius="none"] { border-radius: 0; } - .kroma-hero[data-radius="sm"] { border-radius: var(--radius-sm); } - .kroma-hero[data-radius="lg"] { border-radius: var(--radius-lg); } - - /* Shadow Variants */ - .kroma-hero[data-shadow="none"] { box-shadow: none; } - .kroma-hero[data-shadow="sm"] { box-shadow: var(--shadow-sm); } - .kroma-hero[data-shadow="xl"] { box-shadow: var(--shadow-xl); } - - /* Hover Effects */ - .kroma-hero[data-hover="lift"]:hover { - transform: translateY(-5px); - box-shadow: var(--shadow-xl); - } - - .kroma-hero[data-hover="scale"]:hover { - transform: scale(1.03); - } - - .kroma-hero[data-hover="brightness"]:hover { - filter: brightness(1.15); - } - - /* Animation Variants */ - .kroma-hero[data-animation="fade"] { animation: heroFade 0.5s ease-in; } - .kroma-hero[data-animation="slide"] { animation: heroSlide 0.5s ease-out; } - .kroma-hero[data-animation="scale"] { animation: heroScale 0.5s ease-in-out; } - - @keyframes heroFade { - from { opacity: 0; } - to { opacity: 1; } - } - - @keyframes heroSlide { - from { transform: translateY(20px); opacity: 0; } - to { transform: translateY(0); opacity: 1; } - } - - @keyframes heroScale { - from { transform: scale(0.9); opacity: 0; } - to { transform: scale(1); opacity: 1; } - } - - /* Hero Image */ - .kroma-hero[data-image] { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } - - .kroma-hero[data-image]::before { - background: none; /* Ensures overlay is only applied on image backgrounds */ - } - - /* Responsive Adjustments */ - @media (max-width: 1280px) { - .kroma-hero-content { max-width: 95%; } - } - - @media (max-width: 1024px) { - .kroma-hero { - margin: var(--space-3); - padding: var(--space-3); - } - } - - @media (max-width: 768px) { - .kroma-hero-content { - font-size: clamp(0.875rem, 1.5vw, 1rem); - } + font-size: clamp(0.875rem, 1.5vw, 1rem); } - \ No newline at end of file +} diff --git a/src/css/components/hologram.css b/src/css/components/hologram.css index cdd5b04..a09956f 100644 --- a/src/css/components/hologram.css +++ b/src/css/components/hologram.css @@ -129,9 +129,9 @@ /* Responsive Adjustments */ @media (max-width: 768px) { .kroma-hologram-title { - font-size: clamp(1.5rem, 4vw, 3rem); + font-size: clamp(1.5rem, 4vw, 3rem); } .kroma-hologram-subtitle { - font-size: clamp(0.875rem, 2vw, 1.5rem); + font-size: clamp(0.875rem, 2vw, 1.5rem); } } diff --git a/src/css/components/modal.css b/src/css/components/modal.css index c8ec3f3..30943b2 100644 --- a/src/css/components/modal.css +++ b/src/css/components/modal.css @@ -5,7 +5,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.8); + background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent backdrop */ display: flex; justify-content: center; align-items: center; @@ -13,7 +13,7 @@ opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; - backdrop-filter: blur(6px); + backdrop-filter: blur(6px); /* Smooth backdrop blur */ } .kroma-modal-overlay.active { @@ -23,15 +23,15 @@ /* Modal Container */ .kroma-modal { - background-color: var(--variant-bg); + background-color: var(--variant-bg, var(--neutral-50)); border-radius: var(--radius-2xl); - box-shadow: var(--variant-shadow); + box-shadow: var(--variant-shadow, var(--shadow-lg)); max-width: clamp(20rem, 50vw, 40rem); width: 100%; position: relative; animation: kroma-modal-appear 0.4s cubic-bezier(0.25, 1, 0.5, 1); overflow: hidden; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); } @keyframes kroma-modal-appear { @@ -48,12 +48,12 @@ /* Modal Header */ .kroma-modal-header { padding: var(--space-4); - background-color: var(--variant-light-bg); - border-bottom: 1px solid var(--variant-border); + background-color: var(--variant-light-bg, var(--neutral-100)); + border-bottom: 1px solid var(--variant-border, var(--neutral-300)); display: flex; justify-content: space-between; align-items: center; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-800)); } .kroma-modal-title { @@ -66,12 +66,12 @@ border: none; font-size: 1.5rem; cursor: pointer; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-800)); transition: color 0.2s ease-in-out, transform 0.2s ease; } .kroma-modal-close:hover { - color: var(--variant-hover-bg); + color: var(--variant-hover-bg, var(--neutral-700)); transform: scale(1.1); } @@ -80,25 +80,25 @@ padding: var(--space-4); overflow-y: auto; max-height: 60vh; - scrollbar-color: var(--variant-hover-bg) var(--variant-light-bg); + scrollbar-color: var(--variant-hover-bg, var(--neutral-300)) var(--variant-light-bg, var(--neutral-100)); scrollbar-width: thin; } .kroma-modal-body::-webkit-scrollbar { width: 8px; - background-color: var(--variant-light-bg); + background-color: var(--variant-light-bg, var(--neutral-100)); } .kroma-modal-body::-webkit-scrollbar-thumb { - background-color: var(--variant-hover-bg); + background-color: var(--variant-hover-bg, var(--neutral-300)); border-radius: 4px; } /* Modal Footer */ .kroma-modal-footer { padding: var(--space-4); - background-color: var(--variant-light-bg); - border-top: 1px solid var(--variant-border); + background-color: var(--variant-light-bg, var(--neutral-100)); + border-top: 1px solid var(--variant-border, var(--neutral-300)); text-align: right; } @@ -109,9 +109,9 @@ border-radius: 0; max-width: none; max-height: none; - padding: var(--space-6); - background-color: var(--neutral-200); - color: var(--neutral-50); + padding: var(--space-6); + background-color: var(--neutral-200); + color: var(--neutral-50); } /* Responsive Adjustments */ diff --git a/src/css/components/multiselect.css b/src/css/components/multiselect.css index 1f59030..d1620ae 100644 --- a/src/css/components/multiselect.css +++ b/src/css/components/multiselect.css @@ -12,19 +12,19 @@ display: flex; align-items: center; padding: var(--space-2); - border: 1px solid var(--variant-border); + border: 1px solid var(--variant-border, var(--neutral-300)); border-radius: var(--radius-md); - background-color: var(--variant-bg); - box-shadow: var(--variant-shadow); + background-color: var(--variant-bg, var(--neutral-50)); + box-shadow: var(--variant-shadow, var(--shadow-md)); cursor: pointer; transition: border-color var(--transition-colors), box-shadow var(--transition-all); position: relative; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); } .kroma-multiselect-dropdown:focus-within { - border-color: var(--variant-hover-bg); - box-shadow: 0 0 0 3px var(--variant-light-bg); + border-color: var(--variant-hover-bg, var(--neutral-400)); + box-shadow: 0 0 0 3px var(--variant-light-bg, var(--neutral-200)); } /* Search Input */ @@ -35,13 +35,13 @@ padding: var(--space-1); background: transparent; font-size: 1rem; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); } /* Clear Button */ .kroma-clear-selection { font-size: 1.25rem; - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); cursor: pointer; background: none; border: none; @@ -64,10 +64,10 @@ top: calc(100% + var(--space-1)); left: 0; width: 100%; - border: 1px solid var(--variant-border); + border: 1px solid var(--variant-border, var(--neutral-300)); border-radius: var(--radius-md); - background-color: var(--variant-dark-bg); - box-shadow: var(--variant-shadow); + background-color: var(--variant-dark-bg, var(--neutral-100)); + box-shadow: var(--variant-shadow, var(--shadow-lg)); max-height: 200px; overflow-y: auto; display: none; @@ -84,17 +84,17 @@ padding: var(--space-2); cursor: pointer; transition: background-color var(--transition-colors), color var(--transition-colors); - color: var(--variant-text); + color: var(--variant-text, var(--neutral-900)); } .kroma-multiselect-option:hover { - background-color: var(--variant-hover-bg); + background-color: var(--variant-hover-bg, var(--neutral-300)); color: #fff; } .kroma-multiselect-option.selected { - background-color: var(--variant-hover-bg); - color: var(--variant-text); + background-color: var(--variant-hover-bg, var(--neutral-400)); + color: var(--variant-text, var(--neutral-900)); } /* Chips for Selected Options */ @@ -114,7 +114,7 @@ font-size: 0.875rem; line-height: 1.2; color: #fff; - background-color: var(--variant-bg); + background-color: var(--variant-bg, var(--neutral-600)); } .kroma-chip-remove { @@ -127,17 +127,17 @@ /* Scrollbar Customization */ .kroma-multiselect-options::-webkit-scrollbar { width: 8px; - background-color: var(--variant-light-bg); + background-color: var(--variant-light-bg, var(--neutral-200)); } .kroma-multiselect-options::-webkit-scrollbar-thumb { - background-color: var(--variant-hover-bg); + background-color: var(--variant-hover-bg, var(--neutral-300)); border-radius: 4px; } /* Placeholder Color */ .kroma-multiselect-search::placeholder { - color: rgba(255, 255, 255, 0.7); + color: var(--variant-text-light, rgba(0, 0, 0, 0.6)); } /* Responsive Adjustments */ diff --git a/src/css/components/stat-metrics.css b/src/css/components/stat-metrics.css index 8c3b614..dd260c2 100644 --- a/src/css/components/stat-metrics.css +++ b/src/css/components/stat-metrics.css @@ -1,169 +1,162 @@ /* Base Stat Box Styles */ .kroma-stat-box { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: clamp(var(--space-4), 2vw, var(--space-6)); - border-radius: var(--radius-lg); - background-color: var(--neutral-50); - box-shadow: var(--shadow-md); - transition: background-color var(--transition-colors), transform 0.3s ease, box-shadow 0.3s ease; - text-align: center; - width: 100%; - max-width: 350px; - gap: clamp(var(--space-2), 2vw, var(--space-4)); - margin: var(--space-4) auto; - overflow: hidden; - } - - /* Hover and Focus States */ - .kroma-stat-box:hover { - background-color: var(--neutral-100); - box-shadow: var(--shadow-lg); - transform: translateY(-2px); - } - .kroma-stat-box:focus-within { - outline: 2px solid var(--primary); - } - - /* Icon Styling */ - .kroma-stat-box .kroma-icon { - font-size: clamp(2.5rem, 5vw, 4rem); - line-height: clamp(2.5rem, 5vw, 4rem); - color: var(--neutral-800); + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: clamp(var(--space-4), 2vw, var(--space-6)); + border-radius: var(--radius-lg); + background-color: var(--variant-bg, var(--neutral-50)); + box-shadow: var(--variant-shadow, var(--shadow-md)); + transition: background-color var(--transition-colors), transform 0.3s ease, box-shadow 0.3s ease; + text-align: center; + width: 100%; + max-width: 350px; + gap: clamp(var(--space-2), 2vw, var(--space-4)); + margin: var(--space-4) auto; + overflow: hidden; + color: var(--variant-text, var(--neutral-900)); +} + +/* Hover and Focus States */ +.kroma-stat-box:hover { + background-color: var(--variant-hover-bg, var(--neutral-100)); + box-shadow: var(--shadow-lg); + transform: translateY(-2px); +} +.kroma-stat-box:focus-within { + outline: 2px solid var(--primary); +} + +/* Icon Styling */ +.kroma-stat-box .kroma-icon { + font-size: clamp(2.5rem, 5vw, 4rem); + line-height: clamp(2.5rem, 5vw, 4rem); + color: var(--variant-text, var(--neutral-800)); +} + +/* Title and Value Styling */ +.kroma-stat-box .kroma-title { + font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem); + line-height: clamp(1rem, 2vw + 0.5rem, 1.25rem); + font-weight: 500; + color: var(--variant-text, var(--neutral-900)); +} + +.kroma-stat-box .kroma-value { + font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); + line-height: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); + font-weight: 700; + margin-bottom: var(--space-2); +} + +/* Change Indicator */ +.kroma-stat-box .kroma-change { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-1); + font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); + line-height: clamp(0.875rem, 1vw + 0.5rem, 1rem); + font-weight: 500; + margin-top: var(--space-2); +} + +/* Positive and Negative Changes */ +.kroma-stat-box .kroma-change[data-change="positive"] { + color: var(--success); +} +.kroma-stat-box .kroma-change[data-change="negative"] { + color: var(--danger); +} + +/* Layout Variants */ +.kroma-stat-box[data-layout="horizontal"] { + flex-direction: row; + align-items: center; + gap: var(--space-4); + text-align: left; + padding: clamp(var(--space-3), 1vw, var(--space-4)); +} +.kroma-stat-box[data-layout="compact"] { + padding: var(--space-2); + max-width: 250px; + gap: var(--space-2); +} +.kroma-stat-box[data-layout="expanded"] { + padding: clamp(var(--space-6), 3vw, var(--space-8)); + max-width: 450px; + box-shadow: var(--shadow-xl); +} + +/* Alignment Variants */ +.kroma-stat-box[data-alignment="start"] { + align-items: flex-start; + text-align: left; +} +.kroma-stat-box[data-alignment="end"] { + align-items: flex-end; + text-align: right; +} + +/* Spacing Variants */ +.kroma-stat-box[data-spacing="sm"] { + padding: var(--space-2); +} +.kroma-stat-box[data-spacing="lg"] { + padding: var(--space-8); +} + +/* Shadow Options */ +.kroma-stat-box[data-shadow="none"] { + box-shadow: none; +} +.kroma-stat-box[data-shadow="sm"] { + box-shadow: var(--shadow-sm); +} +.kroma-stat-box[data-shadow="lg"] { + box-shadow: var(--shadow-lg); +} + +/* Border Radius Options */ +.kroma-stat-box[data-radius="sm"] { + border-radius: var(--radius-sm); +} +.kroma-stat-box[data-radius="full"] { + border-radius: var(--radius-full); +} + +/* Hover Effects */ +.kroma-stat-box[data-hover="lift"]:hover { + transform: translateY(-3px); + box-shadow: var(--shadow-xl); +} +.kroma-stat-box[data-hover="scale"]:hover { + transform: scale(1.05); +} +.kroma-stat-box[data-hover="brightness"]:hover { + filter: brightness(1.1); +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .kroma-stat-box { + padding: var(--space-3); + max-width: 90%; } - - /* Title and Value Styling */ .kroma-stat-box .kroma-title { - font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem); - line-height: clamp(1rem, 2vw + 0.5rem, 1.25rem); - font-weight: 500; - color: var(--neutral-900); + font-size: clamp(0.875rem, 2vw, 1rem); } - .kroma-stat-box .kroma-value { - font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); - line-height: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); - font-weight: 700; - color: var(--neutral-900); - margin-bottom: var(--space-2); - } - - /* Change Indicator */ - .kroma-stat-box .kroma-change { - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-1); - font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); - line-height: clamp(0.875rem, 1vw + 0.5rem, 1rem); - font-weight: 500; - margin-top: var(--space-2); - } - - /* Positive and Negative Changes */ - .kroma-stat-box .kroma-change[data-change="positive"] { - color: var(--success); - } - .kroma-stat-box .kroma-change[data-change="negative"] { - color: var(--danger); - } - - .kroma-stat-box { - background-color: var(--variant-bg); - color: var(--variant-text); - box-shadow: var(--variant-shadow); + font-size: clamp(1.5rem, 4vw, 2rem); } - - /* Layout Variants */ .kroma-stat-box[data-layout="horizontal"] { - flex-direction: row; - align-items: center; - gap: var(--space-4); - text-align: left; - padding: clamp(var(--space-3), 1vw, var(--space-4)); - } - .kroma-stat-box[data-layout="compact"] { - padding: var(--space-2); - max-width: 250px; - gap: var(--space-2); - } - .kroma-stat-box[data-layout="expanded"] { - padding: clamp(var(--space-6), 3vw, var(--space-8)); - max-width: 450px; - box-shadow: var(--shadow-xl); - } - - /* Alignment Variants */ - .kroma-stat-box[data-alignment="start"] { - align-items: flex-start; - text-align: left; - } - .kroma-stat-box[data-alignment="end"] { - align-items: flex-end; - text-align: right; - } - - /* Spacing Variants */ - .kroma-stat-box[data-spacing="sm"] { - padding: var(--space-2); - } - .kroma-stat-box[data-spacing="lg"] { - padding: var(--space-8); - } - - /* Shadow Options */ - .kroma-stat-box[data-shadow="none"] { - box-shadow: none; - } - .kroma-stat-box[data-shadow="sm"] { - box-shadow: var(--shadow-sm); - } - .kroma-stat-box[data-shadow="lg"] { - box-shadow: var(--shadow-lg); - } - - /* Border Radius Options */ - .kroma-stat-box[data-radius="sm"] { - border-radius: var(--radius-sm); - } - .kroma-stat-box[data-radius="full"] { - border-radius: var(--radius-full); - } - - /* Hover Effects */ - .kroma-stat-box[data-hover="lift"]:hover { - transform: translateY(-3px); - box-shadow: var(--shadow-xl); - } - .kroma-stat-box[data-hover="scale"]:hover { - transform: scale(1.05); - } - .kroma-stat-box[data-hover="brightness"]:hover { - filter: brightness(1.1); - } - - /* Responsive Adjustments */ - @media (max-width: 768px) { - .kroma-stat-box { - padding: var(--space-3); - max-width: 90%; - } - .kroma-stat-box .kroma-title { - font-size: clamp(0.875rem, 2vw, 1rem); - } - .kroma-stat-box .kroma-value { - font-size: clamp(1.5rem, 4vw, 2rem); - } - .kroma-stat-box[data-layout="horizontal"] { flex-direction: column; align-items: center; text-align: center; - } - .kroma-stat-box .kroma-change { + } + .kroma-stat-box .kroma-change { margin-top: var(--space-1); - } } - \ No newline at end of file +} From 46c5dd122c7e86ec0ba6ae5bdfeb3a5b6b5b99e2 Mon Sep 17 00:00:00 2001 From: Ohswedd Date: Fri, 29 Nov 2024 22:07:14 +0100 Subject: [PATCH 5/7] Sections Utils --- demo.html | 66 ++++----- src/css/base.css | 55 +++++++ src/css/bundle.css | 272 +++++++++++++++++++++++++++++++++-- src/css/utils/colors.css | 24 ++-- src/css/utils/sections.css | 189 ++++++++++++++++++++++++ src/css/utils/typography.css | 1 - 6 files changed, 548 insertions(+), 59 deletions(-) create mode 100644 src/css/utils/sections.css diff --git a/demo.html b/demo.html index e8b9f09..a16124e 100644 --- a/demo.html +++ b/demo.html @@ -53,7 +53,7 @@ -

+

Alert Component Showcase

@@ -70,7 +70,7 @@

Alert Component Showcase

-

+

Accordion Component Showcase

@@ -83,7 +83,7 @@

Accordion Component Showcase

-

+

Avatar Component Showcase

@@ -150,7 +150,7 @@

Avatar Component Showcase