323 lines
12 KiB
CSS
323 lines
12 KiB
CSS
@import '@krona/tokens.css';
|
|
@import '@krona/themes.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ==========================================================================
|
|
KRONA Design System v3.0 - Semantic Mapping & Compatibility Layer
|
|
========================================================================== */
|
|
|
|
:root,
|
|
[data-krona-theme="noble-green"],
|
|
[data-theme="noble-green"],
|
|
[data-theme="soft-light"] {
|
|
--bg-app: var(--krona-bg-app);
|
|
--bg-workspace: var(--krona-bg-workspace);
|
|
--bg-section: var(--krona-bg-section);
|
|
--surface-default: var(--krona-surface);
|
|
--surface-raised: var(--krona-surface-raised);
|
|
--surface-muted: var(--krona-surface-muted);
|
|
--surface-sunken: var(--krona-surface-muted);
|
|
--surface-hover: var(--krona-surface-hover);
|
|
--surface-selected: var(--krona-surface-selected);
|
|
--surface-disabled: var(--krona-surface-muted);
|
|
|
|
--sidebar-bg: var(--krona-surface);
|
|
--sidebar-deep: var(--krona-bg-app);
|
|
--sidebar-surface: var(--krona-surface-raised);
|
|
--sidebar-hover: var(--krona-surface-hover);
|
|
--sidebar-active: var(--krona-surface-selected);
|
|
--sidebar-border: var(--krona-border-subtle);
|
|
--sidebar-text: var(--krona-text-primary);
|
|
--sidebar-text-secondary: var(--krona-text-secondary);
|
|
--sidebar-text-muted: var(--krona-text-muted);
|
|
--sidebar-text-active: var(--krona-primary);
|
|
--sidebar-icon: var(--krona-text-secondary);
|
|
--sidebar-icon-active: var(--krona-primary);
|
|
--sidebar-indicator: var(--krona-gold);
|
|
|
|
--text-primary: var(--krona-text-primary);
|
|
--text-secondary: var(--krona-text-secondary);
|
|
--text-tertiary: var(--krona-text-secondary);
|
|
--text-muted: var(--krona-text-muted);
|
|
--text-disabled: var(--krona-text-muted);
|
|
--text-inverse: var(--krona-text-inverse);
|
|
--text-brand: var(--krona-gold);
|
|
--text-link: var(--krona-primary);
|
|
--text-link-hover: var(--krona-primary-hover);
|
|
|
|
--border-subtle: var(--krona-border-subtle);
|
|
--border-default: var(--krona-border);
|
|
--border-strong: var(--krona-border-strong);
|
|
--border-focus: var(--krona-border-focus);
|
|
|
|
--color-green: var(--krona-primary);
|
|
--color-green-hover: var(--krona-primary-hover);
|
|
--color-green-active: var(--krona-primary-active);
|
|
--color-green-soft: var(--krona-primary-soft);
|
|
--color-green-border: var(--krona-border-strong);
|
|
--color-green-text: var(--krona-primary);
|
|
|
|
--color-gold: var(--krona-gold);
|
|
--color-gold-hover: var(--krona-gold-hover);
|
|
--color-gold-active: var(--krona-gold-active);
|
|
--color-gold-soft: var(--krona-gold-soft);
|
|
--color-gold-border: var(--krona-border);
|
|
--color-gold-text: var(--krona-gold);
|
|
|
|
--color-danger: var(--krona-danger);
|
|
--color-danger-soft: var(--krona-danger-soft);
|
|
--color-danger-border: var(--krona-danger);
|
|
--color-danger-text: var(--krona-danger);
|
|
|
|
--color-warning: var(--krona-warning);
|
|
--color-warning-soft: var(--krona-warning-soft);
|
|
--color-warning-border: var(--krona-warning);
|
|
--color-warning-text: var(--krona-warning);
|
|
|
|
--color-info: var(--krona-info);
|
|
--color-info-soft: var(--krona-info-soft);
|
|
--color-info-border: var(--krona-info);
|
|
--color-info-text: var(--krona-info);
|
|
|
|
/* Semantic aliases */
|
|
--color-primary: var(--krona-primary);
|
|
--color-primary-hover: var(--krona-primary-hover);
|
|
--color-primary-active: var(--krona-primary-active);
|
|
--color-primary-soft: var(--krona-primary-soft);
|
|
--color-primary-text: var(--krona-text-inverse);
|
|
--color-accent: var(--krona-gold);
|
|
--color-accent-hover: var(--krona-gold-hover);
|
|
--color-accent-active: var(--krona-gold-active);
|
|
--color-accent-soft: var(--krona-gold-soft);
|
|
--color-surface: var(--krona-surface);
|
|
--color-surface-raised: var(--krona-surface-raised);
|
|
--color-surface-muted: var(--krona-surface-muted);
|
|
--color-surface-sunken: var(--krona-surface-muted);
|
|
--color-surface-hover: var(--krona-surface-hover);
|
|
}
|
|
|
|
[data-krona-theme="parchment-light"],
|
|
[data-theme="parchment-light"],
|
|
[data-theme="light"] {
|
|
--bg-app: var(--krona-bg-app);
|
|
--bg-workspace: var(--krona-bg-workspace);
|
|
--bg-section: var(--krona-bg-section);
|
|
--surface-default: var(--krona-surface);
|
|
--surface-raised: var(--krona-surface-raised);
|
|
--surface-muted: var(--krona-surface-muted);
|
|
--surface-sunken: var(--krona-surface-muted);
|
|
--surface-hover: var(--krona-surface-hover);
|
|
--surface-selected: var(--krona-surface-selected);
|
|
--surface-disabled: var(--krona-surface-muted);
|
|
|
|
--sidebar-bg: var(--krona-surface);
|
|
--sidebar-deep: var(--krona-bg-app);
|
|
--sidebar-surface: var(--krona-surface-raised);
|
|
--sidebar-hover: var(--krona-surface-hover);
|
|
--sidebar-active: var(--krona-surface-selected);
|
|
--sidebar-border: var(--krona-border-subtle);
|
|
--sidebar-text: var(--krona-text-primary);
|
|
--sidebar-text-secondary: var(--krona-text-secondary);
|
|
--sidebar-text-muted: var(--krona-text-muted);
|
|
--sidebar-text-active: var(--krona-primary);
|
|
--sidebar-icon: var(--krona-text-secondary);
|
|
--sidebar-icon-active: var(--krona-primary);
|
|
--sidebar-indicator: var(--krona-gold);
|
|
|
|
--text-primary: var(--krona-text-primary);
|
|
--text-secondary: var(--krona-text-secondary);
|
|
--text-tertiary: var(--krona-text-secondary);
|
|
--text-muted: var(--krona-text-muted);
|
|
--text-disabled: var(--krona-text-muted);
|
|
--text-inverse: var(--krona-text-inverse);
|
|
--text-brand: var(--krona-gold);
|
|
--text-link: var(--krona-primary);
|
|
--text-link-hover: var(--krona-primary-hover);
|
|
|
|
--border-subtle: var(--krona-border-subtle);
|
|
--border-default: var(--krona-border);
|
|
--border-strong: var(--krona-border-strong);
|
|
--border-focus: var(--krona-border-focus);
|
|
|
|
--color-green: var(--krona-primary);
|
|
--color-green-hover: var(--krona-primary-hover);
|
|
--color-green-active: var(--krona-primary-active);
|
|
--color-green-soft: var(--krona-primary-soft);
|
|
--color-green-border: var(--krona-border-strong);
|
|
--color-green-text: var(--krona-primary);
|
|
|
|
--color-gold: var(--krona-gold);
|
|
--color-gold-hover: var(--krona-gold-hover);
|
|
--color-gold-active: var(--krona-gold-active);
|
|
--color-gold-soft: var(--krona-gold-soft);
|
|
--color-gold-border: var(--krona-border);
|
|
--color-gold-text: var(--krona-gold);
|
|
|
|
--color-danger: var(--krona-danger);
|
|
--color-danger-soft: var(--krona-danger-soft);
|
|
--color-danger-border: var(--krona-danger);
|
|
--color-danger-text: var(--krona-danger);
|
|
|
|
--color-warning: var(--krona-warning);
|
|
--color-warning-soft: var(--krona-warning-soft);
|
|
--color-warning-border: var(--krona-warning);
|
|
--color-warning-text: var(--krona-warning);
|
|
|
|
--color-info: var(--krona-info);
|
|
--color-info-soft: var(--krona-info-soft);
|
|
--color-info-border: var(--krona-info);
|
|
--color-info-text: var(--krona-info);
|
|
|
|
/* Semantic aliases */
|
|
--color-primary: var(--krona-primary);
|
|
--color-primary-hover: var(--krona-primary-hover);
|
|
--color-primary-active: var(--krona-primary-active);
|
|
--color-primary-soft: var(--krona-primary-soft);
|
|
--color-primary-text: var(--krona-text-inverse);
|
|
--color-accent: var(--krona-gold);
|
|
--color-accent-hover: var(--krona-gold-hover);
|
|
--color-accent-active: var(--krona-gold-active);
|
|
--color-accent-soft: var(--krona-gold-soft);
|
|
--color-surface: var(--krona-surface);
|
|
--color-surface-raised: var(--krona-surface-raised);
|
|
--color-surface-muted: var(--krona-surface-muted);
|
|
--color-surface-sunken: var(--krona-surface-muted);
|
|
--color-surface-hover: var(--krona-surface-hover);
|
|
}
|
|
|
|
[data-krona-theme="graphite-forest-dark"],
|
|
[data-theme="graphite-forest-dark"],
|
|
[data-theme="dark"] {
|
|
--bg-app: var(--krona-bg-app);
|
|
--bg-workspace: var(--krona-bg-workspace);
|
|
--bg-section: var(--krona-bg-section);
|
|
--surface-default: var(--krona-surface);
|
|
--surface-raised: var(--krona-surface-raised);
|
|
--surface-muted: var(--krona-surface-muted);
|
|
--surface-sunken: var(--krona-surface-muted);
|
|
--surface-hover: var(--krona-surface-hover);
|
|
--surface-selected: var(--krona-surface-selected);
|
|
--surface-disabled: var(--krona-surface-muted);
|
|
|
|
--sidebar-bg: var(--krona-surface);
|
|
--sidebar-deep: var(--krona-bg-app);
|
|
--sidebar-surface: var(--krona-surface-raised);
|
|
--sidebar-hover: var(--krona-surface-hover);
|
|
--sidebar-active: var(--krona-surface-selected);
|
|
--sidebar-border: var(--krona-border-subtle);
|
|
--sidebar-text: var(--krona-text-primary);
|
|
--sidebar-text-secondary: var(--krona-text-secondary);
|
|
--sidebar-text-muted: var(--krona-text-muted);
|
|
--sidebar-text-active: var(--krona-primary);
|
|
--sidebar-icon: var(--krona-text-secondary);
|
|
--sidebar-icon-active: var(--krona-gold);
|
|
--sidebar-indicator: var(--krona-gold);
|
|
|
|
--text-primary: var(--krona-text-primary);
|
|
--text-secondary: var(--krona-text-secondary);
|
|
--text-tertiary: var(--krona-text-secondary);
|
|
--text-muted: var(--krona-text-muted);
|
|
--text-disabled: var(--krona-text-muted);
|
|
--text-inverse: var(--krona-text-inverse);
|
|
--text-brand: var(--krona-gold);
|
|
--text-link: var(--krona-primary);
|
|
--text-link-hover: var(--krona-primary-hover);
|
|
|
|
--border-subtle: var(--krona-border-subtle);
|
|
--border-default: var(--krona-border);
|
|
--border-strong: var(--krona-border-strong);
|
|
--border-focus: var(--krona-border-focus);
|
|
|
|
--color-green: var(--krona-primary);
|
|
--color-green-hover: var(--krona-primary-hover);
|
|
--color-green-active: var(--krona-primary-active);
|
|
--color-green-soft: var(--krona-primary-soft);
|
|
--color-green-border: var(--krona-border-strong);
|
|
--color-green-text: var(--krona-primary);
|
|
|
|
--color-gold: var(--krona-gold);
|
|
--color-gold-hover: var(--krona-gold-hover);
|
|
--color-gold-active: var(--krona-gold-active);
|
|
--color-gold-soft: var(--krona-gold-soft);
|
|
--color-gold-border: var(--krona-border);
|
|
--color-gold-text: var(--krona-gold);
|
|
|
|
--color-danger: var(--krona-danger);
|
|
--color-danger-soft: var(--krona-danger-soft);
|
|
--color-danger-border: var(--krona-danger);
|
|
--color-danger-text: var(--krona-danger);
|
|
|
|
--color-warning: var(--krona-warning);
|
|
--color-warning-soft: var(--krona-warning-soft);
|
|
--color-warning-border: var(--krona-warning);
|
|
--color-warning-text: var(--krona-warning);
|
|
|
|
--color-info: var(--krona-info);
|
|
--color-info-soft: var(--krona-info-soft);
|
|
--color-info-border: var(--krona-info);
|
|
--color-info-text: var(--krona-info);
|
|
|
|
/* Semantic aliases */
|
|
--color-primary: var(--krona-primary);
|
|
--color-primary-hover: var(--krona-primary-hover);
|
|
--color-primary-active: var(--krona-primary-active);
|
|
--color-primary-soft: var(--krona-primary-soft);
|
|
--color-primary-text: var(--krona-text-inverse);
|
|
--color-accent: var(--krona-gold);
|
|
--color-accent-hover: var(--krona-gold-hover);
|
|
--color-accent-active: var(--krona-gold-active);
|
|
--color-accent-soft: var(--krona-gold-soft);
|
|
--color-surface: var(--krona-surface);
|
|
--color-surface-raised: var(--krona-surface-raised);
|
|
--color-surface-muted: var(--krona-surface-muted);
|
|
--color-surface-sunken: var(--krona-surface-muted);
|
|
--color-surface-hover: var(--krona-surface-hover);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: var(--bg-app);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Custom scrollbars according to design system */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
/* Glass & modal overlay */
|
|
.krona-overlay {
|
|
background-color: rgba(30, 31, 27, 0.42);
|
|
backdrop-filter: blur(2px);
|
|
}
|