Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
Digital Production Factory
98
admin-ui/public/admin-ui/css/base.css
Normal file
98
admin-ui/public/admin-ui/css/base.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Shadcn/UI Base Styles
|
||||
* Reset and foundation styles
|
||||
*/
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply box-border;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rounding-mode" 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply scroll-m-20 font-semibold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-4xl font-extrabold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl font-bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl font-bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-xl font-semibold;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-lg font-semibold;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@apply text-base font-semibold;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply leading-7;
|
||||
}
|
||||
|
||||
code {
|
||||
@apply relative rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-semibold;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
@apply font-inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
@apply text-inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
@apply block max-w-full h-auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply list-none;
|
||||
}
|
||||
}
|
||||
717
admin-ui/public/admin-ui/css/dss-components.css
Normal file
717
admin-ui/public/admin-ui/css/dss-components.css
Normal file
@@ -0,0 +1,717 @@
|
||||
/**
|
||||
* DSS Components - Layer 3 (Component Styles)
|
||||
*
|
||||
* All component styling using semantic tokens from dss-theme.css.
|
||||
*
|
||||
* FIRST PRINCIPLES:
|
||||
* - This layer references semantic tokens (--header-*, --sidebar-*, etc.)
|
||||
* - NO fallback values - tokens and theme layers MUST load first
|
||||
* - If layers are missing, theme-loader.js handles it
|
||||
* - Uses BEM methodology for class naming
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
App Header
|
||||
========================================================================== */
|
||||
|
||||
.app-header {
|
||||
background-color: var(--header-bg);
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
color: var(--header-text);
|
||||
padding: 0 var(--ds-space-4);
|
||||
gap: var(--ds-space-4);
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
.app-header__project-selector {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.app-header__team-selector {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.app-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-space-2);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Sidebar
|
||||
========================================================================== */
|
||||
|
||||
.sidebar {
|
||||
background-color: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
color: var(--sidebar-text);
|
||||
padding: var(--ds-space-4);
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
margin-bottom: var(--ds-space-6);
|
||||
}
|
||||
|
||||
.sidebar__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-space-2);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
font-size: var(--ds-font-size-lg);
|
||||
}
|
||||
|
||||
.sidebar__logo-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: var(--ds-color-primary);
|
||||
color: var(--ds-color-primary-foreground);
|
||||
border-radius: var(--ds-radius-md);
|
||||
}
|
||||
|
||||
.sidebar__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-2);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar__help {
|
||||
margin-top: auto;
|
||||
padding-top: var(--ds-space-4);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
}
|
||||
|
||||
.sidebar__footer {
|
||||
margin-top: var(--ds-space-4);
|
||||
padding-top: var(--ds-space-4);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Navigation
|
||||
========================================================================== */
|
||||
|
||||
.nav-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-1);
|
||||
}
|
||||
|
||||
.nav-section + .nav-section {
|
||||
margin-top: var(--ds-space-4);
|
||||
padding-top: var(--ds-space-4);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
}
|
||||
|
||||
.nav-section__title {
|
||||
font-size: var(--ds-font-size-xs);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
color: var(--nav-section-title);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--ds-letter-spacing-wider);
|
||||
padding: var(--ds-space-2) var(--ds-space-3);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--nav-item-gap);
|
||||
padding: var(--nav-item-padding);
|
||||
border-radius: var(--nav-item-radius);
|
||||
color: var(--nav-item-text);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
transition: all var(--ds-transition-fast) var(--ds-ease-out);
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: var(--nav-item-bg-hover);
|
||||
color: var(--nav-item-text);
|
||||
}
|
||||
|
||||
.nav-item:focus {
|
||||
outline: none;
|
||||
border-color: var(--nav-item-border-focus);
|
||||
background-color: var(--nav-item-bg-hover);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: var(--nav-item-bg-active);
|
||||
color: var(--nav-item-text-active);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
}
|
||||
|
||||
.nav-item__icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
transition: transform var(--ds-transition-fast) var(--ds-ease-out);
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-item__icon {
|
||||
transform: scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Main Content Area
|
||||
========================================================================== */
|
||||
|
||||
.app-main {
|
||||
background-color: var(--main-bg);
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.app-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--ds-space-6);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Landing Page
|
||||
========================================================================== */
|
||||
|
||||
.landing-page {
|
||||
display: none;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: var(--ds-space-6);
|
||||
background-color: var(--landing-bg);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.landing-page.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
text-align: center;
|
||||
padding: var(--ds-space-8) 0;
|
||||
margin-bottom: var(--ds-space-8);
|
||||
}
|
||||
|
||||
.landing-hero h1 {
|
||||
font-size: var(--ds-font-size-3xl);
|
||||
font-weight: var(--ds-font-weight-bold);
|
||||
color: var(--landing-hero-text);
|
||||
margin-bottom: var(--ds-space-3);
|
||||
}
|
||||
|
||||
.landing-hero p {
|
||||
font-size: var(--ds-font-size-lg);
|
||||
color: var(--landing-hero-subtitle);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.landing-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-8);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Dashboard Category
|
||||
========================================================================== */
|
||||
|
||||
.dashboard-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-4);
|
||||
}
|
||||
|
||||
.dashboard-category__title {
|
||||
font-size: var(--ds-font-size-lg);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
color: var(--category-title-text);
|
||||
padding-bottom: var(--ds-space-3);
|
||||
border-bottom: 1px solid var(--category-title-border);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Dashboard Grid
|
||||
========================================================================== */
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: var(--ds-space-4);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Dashboard Card
|
||||
========================================================================== */
|
||||
|
||||
.dashboard-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--ds-space-5);
|
||||
background-color: var(--dashboard-card-bg);
|
||||
border: 1px solid var(--dashboard-card-border);
|
||||
border-radius: var(--card-radius);
|
||||
color: var(--dashboard-card-text);
|
||||
cursor: pointer;
|
||||
transition: all var(--ds-transition-normal) var(--ds-ease-out);
|
||||
text-decoration: none;
|
||||
gap: var(--ds-space-3);
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
border-color: var(--dashboard-card-border-hover);
|
||||
box-shadow: var(--dashboard-card-shadow-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dashboard-card:focus {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
.dashboard-card__icon {
|
||||
font-size: var(--ds-font-size-2xl);
|
||||
}
|
||||
|
||||
.dashboard-card__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-1);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dashboard-card__title {
|
||||
font-size: var(--ds-font-size-base);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
color: var(--dashboard-card-text);
|
||||
}
|
||||
|
||||
.dashboard-card__description {
|
||||
font-size: var(--ds-font-size-sm);
|
||||
color: var(--dashboard-card-text-muted);
|
||||
line-height: var(--ds-line-height-relaxed);
|
||||
}
|
||||
|
||||
.dashboard-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: var(--dashboard-card-text-muted);
|
||||
font-size: var(--ds-font-size-lg);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
AI Sidebar (Right Panel)
|
||||
========================================================================== */
|
||||
|
||||
.app-sidebar {
|
||||
width: 360px;
|
||||
background-color: var(--sidebar-bg);
|
||||
border-left: 1px solid var(--sidebar-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-sidebar[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Buttons
|
||||
========================================================================== */
|
||||
|
||||
ds-button,
|
||||
.ds-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--ds-space-2);
|
||||
padding: var(--button-padding-y) var(--button-padding-x);
|
||||
font-size: var(--button-font-size);
|
||||
font-weight: var(--button-font-weight);
|
||||
border-radius: var(--button-radius);
|
||||
transition: all var(--ds-transition-fast) var(--ds-ease-out);
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
ds-button[data-variant="default"],
|
||||
.ds-button--default {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border-color: var(--button-border);
|
||||
}
|
||||
|
||||
ds-button[data-variant="default"]:hover,
|
||||
.ds-button--default:hover {
|
||||
background-color: var(--button-bg-hover);
|
||||
}
|
||||
|
||||
ds-button[data-variant="ghost"],
|
||||
.ds-button--ghost {
|
||||
background-color: var(--button-ghost-bg);
|
||||
color: var(--button-ghost-text);
|
||||
}
|
||||
|
||||
ds-button[data-variant="ghost"]:hover,
|
||||
.ds-button--ghost:hover {
|
||||
background-color: var(--button-ghost-bg-hover);
|
||||
}
|
||||
|
||||
ds-button[data-variant="outline"],
|
||||
.ds-button--outline {
|
||||
background-color: var(--button-outline-bg);
|
||||
color: var(--button-outline-text);
|
||||
border-color: var(--button-outline-border);
|
||||
}
|
||||
|
||||
ds-button[data-variant="outline"]:hover,
|
||||
.ds-button--outline:hover {
|
||||
background-color: var(--button-outline-bg-hover);
|
||||
}
|
||||
|
||||
ds-button[data-size="icon"],
|
||||
.ds-button--icon {
|
||||
padding: var(--ds-space-2);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
ds-button:focus,
|
||||
.ds-button:focus {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Cards
|
||||
========================================================================== */
|
||||
|
||||
ds-card,
|
||||
.ds-card {
|
||||
display: block;
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--card-padding);
|
||||
box-shadow: var(--card-shadow);
|
||||
color: var(--card-text);
|
||||
}
|
||||
|
||||
ds-card:hover,
|
||||
.ds-card:hover {
|
||||
box-shadow: var(--card-shadow-hover);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Badges
|
||||
========================================================================== */
|
||||
|
||||
ds-badge,
|
||||
.ds-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--badge-padding-y) var(--badge-padding-x);
|
||||
font-size: var(--badge-font-size);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
border-radius: var(--badge-radius);
|
||||
background-color: var(--badge-bg);
|
||||
color: var(--badge-text);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="secondary"],
|
||||
.ds-badge--secondary {
|
||||
background-color: var(--badge-secondary-bg);
|
||||
color: var(--badge-secondary-text);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="outline"],
|
||||
.ds-badge--outline {
|
||||
background-color: var(--badge-outline-bg);
|
||||
color: var(--badge-outline-text);
|
||||
border: 1px solid var(--badge-outline-border);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="success"],
|
||||
.ds-badge--success {
|
||||
background-color: var(--badge-success-bg);
|
||||
color: var(--badge-success-text);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="warning"],
|
||||
.ds-badge--warning {
|
||||
background-color: var(--badge-warning-bg);
|
||||
color: var(--badge-warning-text);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="error"],
|
||||
.ds-badge--error {
|
||||
background-color: var(--badge-error-bg);
|
||||
color: var(--badge-error-text);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Inputs
|
||||
========================================================================== */
|
||||
|
||||
ds-input,
|
||||
.ds-input,
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--input-padding-y) var(--input-padding-x);
|
||||
background-color: var(--input-bg);
|
||||
color: var(--input-text);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
transition: border-color var(--ds-transition-fast) var(--ds-ease-out);
|
||||
}
|
||||
|
||||
ds-input:focus,
|
||||
.ds-input:focus,
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
|
||||
}
|
||||
|
||||
ds-input::placeholder,
|
||||
.ds-input::placeholder,
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--input-placeholder);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Select
|
||||
========================================================================== */
|
||||
|
||||
select,
|
||||
.ds-select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--input-padding-y) var(--input-padding-x);
|
||||
background-color: var(--input-bg);
|
||||
color: var(--input-text);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
.ds-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
|
||||
}
|
||||
|
||||
.team-select {
|
||||
padding: var(--ds-space-1-5) var(--ds-space-3);
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Avatar
|
||||
========================================================================== */
|
||||
|
||||
.ds-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--avatar-size-md);
|
||||
height: var(--avatar-size-md);
|
||||
background-color: var(--avatar-bg);
|
||||
color: var(--avatar-text);
|
||||
border: 1px solid var(--avatar-border);
|
||||
border-radius: var(--ds-radius-full);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ds-avatar:focus {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Help Panel
|
||||
========================================================================== */
|
||||
|
||||
.help-panel {
|
||||
background-color: var(--help-panel-bg);
|
||||
border-radius: var(--ds-radius-md);
|
||||
border: 1px solid var(--help-panel-border);
|
||||
}
|
||||
|
||||
.help-panel__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-space-2);
|
||||
padding: var(--ds-space-3);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
color: var(--help-panel-text);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.help-panel__toggle::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.help-panel__content {
|
||||
padding: var(--ds-space-3);
|
||||
padding-top: 0;
|
||||
font-size: var(--ds-font-size-sm);
|
||||
color: var(--help-panel-text-muted);
|
||||
}
|
||||
|
||||
.help-section {
|
||||
margin-bottom: var(--ds-space-3);
|
||||
}
|
||||
|
||||
.help-section strong {
|
||||
display: block;
|
||||
color: var(--help-panel-text);
|
||||
margin-bottom: var(--ds-space-1);
|
||||
}
|
||||
|
||||
.help-section ul,
|
||||
.help-section ol {
|
||||
padding-left: var(--ds-space-4);
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.help-section ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.help-section li {
|
||||
margin-bottom: var(--ds-space-1);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Status Indicators
|
||||
========================================================================== */
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--ds-radius-full);
|
||||
background-color: var(--ds-color-muted-foreground);
|
||||
}
|
||||
|
||||
.status-dot--success {
|
||||
background-color: var(--ds-color-success);
|
||||
}
|
||||
|
||||
.status-dot--warning {
|
||||
background-color: var(--ds-color-warning);
|
||||
}
|
||||
|
||||
.status-dot--error {
|
||||
background-color: var(--ds-color-error);
|
||||
}
|
||||
|
||||
.status-dot--info {
|
||||
background-color: var(--ds-color-info);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Notification Toggle Container
|
||||
========================================================================== */
|
||||
|
||||
.notification-toggle-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Project Selector
|
||||
========================================================================== */
|
||||
|
||||
.project-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-space-2);
|
||||
}
|
||||
|
||||
.project-selector__label {
|
||||
font-size: var(--ds-font-size-sm);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.project-selector__select {
|
||||
padding: var(--ds-space-1-5) var(--ds-space-3);
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive Adjustments
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.app-sidebar {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-header__team-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
transform: translateX(100%);
|
||||
transition: transform var(--ds-transition-slow) var(--ds-ease-out);
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.app-sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.landing-hero h1 {
|
||||
font-size: var(--ds-font-size-2xl);
|
||||
}
|
||||
|
||||
.landing-hero p {
|
||||
font-size: var(--ds-font-size-base);
|
||||
}
|
||||
}
|
||||
230
admin-ui/public/admin-ui/css/dss-core.css
Normal file
230
admin-ui/public/admin-ui/css/dss-core.css
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* DSS Core CSS - Layer 0 (Structural Only)
|
||||
*
|
||||
* This file provides the structural foundation for DSS Admin UI.
|
||||
* It contains NO design decisions - only layout and structural CSS.
|
||||
* The UI should be functional (but unstyled) with only this file.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
CSS Reset / Normalize
|
||||
========================================================================== */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
App Shell - CSS Grid Layout
|
||||
========================================================================== */
|
||||
|
||||
.app-layout {
|
||||
display: grid;
|
||||
grid-template-columns: var(--app-sidebar-width, 240px) 1fr;
|
||||
grid-template-rows: var(--app-header-height, 60px) 1fr;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Flexbox Utilities
|
||||
========================================================================== */
|
||||
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-auto { flex: auto; }
|
||||
.flex-none { flex: none; }
|
||||
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-center { align-items: center; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
|
||||
/* Gap utilities use hardcoded fallbacks since core loads before tokens */
|
||||
.gap-1 { gap: 0.25rem; }
|
||||
.gap-2 { gap: 0.5rem; }
|
||||
.gap-3 { gap: 0.75rem; }
|
||||
.gap-4 { gap: 1rem; }
|
||||
.gap-5 { gap: 1.25rem; }
|
||||
.gap-6 { gap: 1.5rem; }
|
||||
|
||||
/* ==========================================================================
|
||||
Grid Utilities
|
||||
========================================================================== */
|
||||
|
||||
.grid { display: grid; }
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
|
||||
|
||||
/* ==========================================================================
|
||||
Visibility & Display
|
||||
========================================================================== */
|
||||
|
||||
.hidden { display: none !important; }
|
||||
.block { display: block; }
|
||||
.inline-block { display: inline-block; }
|
||||
.inline { display: inline; }
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Overflow & Scroll
|
||||
========================================================================== */
|
||||
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
.overflow-auto { overflow: auto; }
|
||||
.overflow-x-auto { overflow-x: auto; }
|
||||
.overflow-y-auto { overflow-y: auto; }
|
||||
.overflow-scroll { overflow: scroll; }
|
||||
|
||||
/* ==========================================================================
|
||||
Position
|
||||
========================================================================== */
|
||||
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
.sticky { position: sticky; }
|
||||
|
||||
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
.top-0 { top: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.bottom-0 { bottom: 0; }
|
||||
.left-0 { left: 0; }
|
||||
|
||||
/* ==========================================================================
|
||||
Width & Height
|
||||
========================================================================== */
|
||||
|
||||
.w-full { width: 100%; }
|
||||
.w-auto { width: auto; }
|
||||
.h-full { height: 100%; }
|
||||
.h-auto { height: auto; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive Breakpoints
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.app-layout {
|
||||
grid-template-columns: var(--app-sidebar-width-tablet, 200px) 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: var(--app-header-height, 60px) 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: var(--app-header-height, 60px);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--app-sidebar-width, 240px);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
6
admin-ui/public/admin-ui/css/dss-integrations.css
Normal file
6
admin-ui/public/admin-ui/css/dss-integrations.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Design System Integrations CSS
|
||||
* This file contains integration-specific styles for third-party components
|
||||
* and external library theming.
|
||||
*/
|
||||
|
||||
/* Placeholder for future integrations */
|
||||
208
admin-ui/public/admin-ui/css/dss-theme.css
Normal file
208
admin-ui/public/admin-ui/css/dss-theme.css
Normal file
@@ -0,0 +1,208 @@
|
||||
/**
|
||||
* DSS Theme - Layer 2 (Semantic Mapping)
|
||||
*
|
||||
* Maps design tokens to semantic purposes.
|
||||
* This layer creates the bridge between raw design tokens
|
||||
* and component-specific styling.
|
||||
*
|
||||
* FIRST PRINCIPLES:
|
||||
* - No fallback values - tokens layer MUST load first
|
||||
* - If tokens are missing, theme-loader.js handles it with fallback CSS file
|
||||
* - Components should use these semantic tokens, not raw tokens directly
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ==========================================================================
|
||||
App Shell Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
/* Header */
|
||||
--header-bg: var(--ds-color-surface-0);
|
||||
--header-border: var(--ds-color-border);
|
||||
--header-text: var(--ds-color-foreground);
|
||||
--header-height: var(--app-header-height);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: var(--ds-color-surface-0);
|
||||
--sidebar-border: var(--ds-color-border);
|
||||
--sidebar-text: var(--ds-color-foreground);
|
||||
--sidebar-width: var(--app-sidebar-width);
|
||||
|
||||
/* Main Content */
|
||||
--main-bg: var(--ds-color-background);
|
||||
--main-text: var(--ds-color-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Navigation Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--nav-item-text: var(--ds-color-foreground);
|
||||
--nav-item-text-muted: var(--ds-color-muted-foreground);
|
||||
--nav-item-bg-hover: var(--ds-color-accent);
|
||||
--nav-item-bg-active: var(--ds-color-accent);
|
||||
--nav-item-text-active: var(--ds-color-primary);
|
||||
--nav-item-border-focus: var(--ds-color-ring);
|
||||
--nav-section-title: var(--ds-color-muted-foreground);
|
||||
--nav-item-radius: var(--ds-radius-md);
|
||||
--nav-item-padding: var(--ds-space-3);
|
||||
--nav-item-gap: var(--ds-space-3);
|
||||
|
||||
/* ==========================================================================
|
||||
Button Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
/* Default Button */
|
||||
--button-bg: var(--ds-color-primary);
|
||||
--button-text: var(--ds-color-primary-foreground);
|
||||
--button-border: var(--ds-color-primary);
|
||||
--button-bg-hover: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) calc(var(--ds-color-primary-l) + 10%));
|
||||
|
||||
/* Secondary Button */
|
||||
--button-secondary-bg: var(--ds-color-secondary);
|
||||
--button-secondary-text: var(--ds-color-secondary-foreground);
|
||||
|
||||
/* Ghost Button */
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-text: var(--ds-color-foreground);
|
||||
--button-ghost-bg-hover: var(--ds-color-accent);
|
||||
|
||||
/* Outline Button */
|
||||
--button-outline-bg: transparent;
|
||||
--button-outline-text: var(--ds-color-foreground);
|
||||
--button-outline-border: var(--ds-color-border);
|
||||
--button-outline-bg-hover: var(--ds-color-accent);
|
||||
|
||||
/* Button Sizing */
|
||||
--button-padding-x: var(--ds-space-4);
|
||||
--button-padding-y: var(--ds-space-2);
|
||||
--button-radius: var(--ds-radius-md);
|
||||
--button-font-size: var(--ds-font-size-sm);
|
||||
--button-font-weight: var(--ds-font-weight-medium);
|
||||
|
||||
/* ==========================================================================
|
||||
Card Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--card-bg: var(--ds-color-surface-0);
|
||||
--card-border: var(--ds-color-border);
|
||||
--card-text: var(--ds-color-foreground);
|
||||
--card-text-muted: var(--ds-color-muted-foreground);
|
||||
--card-radius: var(--ds-radius-lg);
|
||||
--card-padding: var(--ds-space-5);
|
||||
--card-shadow: var(--ds-shadow-sm);
|
||||
--card-shadow-hover: var(--ds-shadow-md);
|
||||
|
||||
/* ==========================================================================
|
||||
Input Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--input-bg: var(--ds-color-background);
|
||||
--input-text: var(--ds-color-foreground);
|
||||
--input-placeholder: var(--ds-color-muted-foreground);
|
||||
--input-border: var(--ds-color-border);
|
||||
--input-border-focus: var(--ds-color-ring);
|
||||
--input-radius: var(--ds-radius-md);
|
||||
--input-padding-x: var(--ds-space-3);
|
||||
--input-padding-y: var(--ds-space-2);
|
||||
|
||||
/* ==========================================================================
|
||||
Badge Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--badge-bg: var(--ds-color-primary);
|
||||
--badge-text: var(--ds-color-primary-foreground);
|
||||
--badge-radius: var(--ds-radius-full);
|
||||
--badge-padding-x: var(--ds-space-2-5);
|
||||
--badge-padding-y: var(--ds-space-0-5);
|
||||
--badge-font-size: var(--ds-font-size-xs);
|
||||
|
||||
/* Badge Variants */
|
||||
--badge-secondary-bg: var(--ds-color-secondary);
|
||||
--badge-secondary-text: var(--ds-color-secondary-foreground);
|
||||
--badge-outline-bg: transparent;
|
||||
--badge-outline-text: var(--ds-color-foreground);
|
||||
--badge-outline-border: var(--ds-color-border);
|
||||
--badge-success-bg: var(--ds-color-success);
|
||||
--badge-success-text: var(--ds-color-success-foreground);
|
||||
--badge-warning-bg: var(--ds-color-warning);
|
||||
--badge-warning-text: var(--ds-color-warning-foreground);
|
||||
--badge-error-bg: var(--ds-color-error);
|
||||
--badge-error-text: var(--ds-color-error-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Landing Page Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--landing-bg: var(--ds-color-background);
|
||||
--landing-hero-text: var(--ds-color-foreground);
|
||||
--landing-hero-subtitle: var(--ds-color-muted-foreground);
|
||||
|
||||
/* Dashboard Card */
|
||||
--dashboard-card-bg: var(--ds-color-surface-0);
|
||||
--dashboard-card-border: var(--ds-color-border);
|
||||
--dashboard-card-border-hover: var(--ds-color-accent);
|
||||
--dashboard-card-text: var(--ds-color-foreground);
|
||||
--dashboard-card-text-muted: var(--ds-color-muted-foreground);
|
||||
--dashboard-card-shadow-hover: var(--ds-shadow-md);
|
||||
|
||||
/* Category Title */
|
||||
--category-title-text: var(--ds-color-foreground);
|
||||
--category-title-border: var(--ds-color-border);
|
||||
|
||||
/* ==========================================================================
|
||||
Toast/Notification Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--toast-bg: var(--ds-color-surface-0);
|
||||
--toast-text: var(--ds-color-foreground);
|
||||
--toast-border: var(--ds-color-border);
|
||||
--toast-shadow: var(--ds-shadow-lg);
|
||||
--toast-radius: var(--ds-radius-lg);
|
||||
|
||||
--toast-success-bg: var(--ds-color-success);
|
||||
--toast-success-text: var(--ds-color-success-foreground);
|
||||
--toast-warning-bg: var(--ds-color-warning);
|
||||
--toast-warning-text: var(--ds-color-warning-foreground);
|
||||
--toast-error-bg: var(--ds-color-error);
|
||||
--toast-error-text: var(--ds-color-error-foreground);
|
||||
--toast-info-bg: var(--ds-color-info);
|
||||
--toast-info-text: var(--ds-color-info-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Avatar Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--avatar-bg: var(--ds-color-muted);
|
||||
--avatar-text: var(--ds-color-foreground);
|
||||
--avatar-border: var(--ds-color-border);
|
||||
--avatar-size-sm: 32px;
|
||||
--avatar-size-md: 40px;
|
||||
--avatar-size-lg: 48px;
|
||||
|
||||
/* ==========================================================================
|
||||
Help Panel Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--help-panel-bg: var(--ds-color-surface-1);
|
||||
--help-panel-border: var(--ds-color-border);
|
||||
--help-panel-text: var(--ds-color-foreground);
|
||||
--help-panel-text-muted: var(--ds-color-muted-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Typography Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--text-heading: var(--ds-color-foreground);
|
||||
--text-body: var(--ds-color-foreground);
|
||||
--text-muted: var(--ds-color-muted-foreground);
|
||||
--text-link: var(--ds-color-primary);
|
||||
--text-link-hover: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) calc(var(--ds-color-primary-l) + 20%));
|
||||
|
||||
/* ==========================================================================
|
||||
Focus Ring
|
||||
========================================================================== */
|
||||
|
||||
--focus-ring-width: 2px;
|
||||
--focus-ring-color: var(--ds-color-ring);
|
||||
--focus-ring-offset: 2px;
|
||||
}
|
||||
246
admin-ui/public/admin-ui/css/dss-tokens.css
Normal file
246
admin-ui/public/admin-ui/css/dss-tokens.css
Normal file
@@ -0,0 +1,246 @@
|
||||
/**
|
||||
* DSS Design Tokens - Layer 1
|
||||
*
|
||||
* Design decisions expressed as CSS custom properties.
|
||||
* These tokens can be:
|
||||
* 1. Generated from Figma using DSS extraction tools
|
||||
* 2. Manually defined in a design-tokens.json file
|
||||
* 3. Use the fallback defaults defined here
|
||||
*
|
||||
* Format follows W3C Design Tokens specification.
|
||||
* All values include fallbacks for bootstrap scenario.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ==========================================================================
|
||||
Color Tokens - HSL Format
|
||||
========================================================================== */
|
||||
|
||||
/* Primary Colors */
|
||||
--ds-color-primary-h: 220;
|
||||
--ds-color-primary-s: 14%;
|
||||
--ds-color-primary-l: 10%;
|
||||
--ds-color-primary: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) var(--ds-color-primary-l));
|
||||
--ds-color-primary-foreground: hsl(0 0% 100%);
|
||||
|
||||
/* Secondary Colors */
|
||||
--ds-color-secondary-h: 220;
|
||||
--ds-color-secondary-s: 9%;
|
||||
--ds-color-secondary-l: 46%;
|
||||
--ds-color-secondary: hsl(var(--ds-color-secondary-h) var(--ds-color-secondary-s) var(--ds-color-secondary-l));
|
||||
--ds-color-secondary-foreground: hsl(0 0% 100%);
|
||||
|
||||
/* Accent Colors */
|
||||
--ds-color-accent-h: 220;
|
||||
--ds-color-accent-s: 9%;
|
||||
--ds-color-accent-l: 96%;
|
||||
--ds-color-accent: hsl(var(--ds-color-accent-h) var(--ds-color-accent-s) var(--ds-color-accent-l));
|
||||
--ds-color-accent-foreground: hsl(220 14% 10%);
|
||||
|
||||
/* Background Colors */
|
||||
--ds-color-background: hsl(0 0% 100%);
|
||||
--ds-color-foreground: hsl(220 14% 10%);
|
||||
|
||||
/* Surface Colors */
|
||||
--ds-color-surface-0: hsl(0 0% 100%);
|
||||
--ds-color-surface-1: hsl(220 14% 98%);
|
||||
--ds-color-surface-2: hsl(220 9% 96%);
|
||||
--ds-color-surface-3: hsl(220 9% 94%);
|
||||
|
||||
/* Muted Colors */
|
||||
--ds-color-muted: hsl(220 9% 96%);
|
||||
--ds-color-muted-foreground: hsl(220 9% 46%);
|
||||
|
||||
/* Border Colors */
|
||||
--ds-color-border: hsl(220 9% 89%);
|
||||
--ds-color-border-strong: hsl(220 9% 80%);
|
||||
|
||||
/* State Colors */
|
||||
--ds-color-success: hsl(142 76% 36%);
|
||||
--ds-color-success-foreground: hsl(0 0% 100%);
|
||||
--ds-color-warning: hsl(38 92% 50%);
|
||||
--ds-color-warning-foreground: hsl(0 0% 0%);
|
||||
--ds-color-error: hsl(0 84% 60%);
|
||||
--ds-color-error-foreground: hsl(0 0% 100%);
|
||||
--ds-color-info: hsl(199 89% 48%);
|
||||
--ds-color-info-foreground: hsl(0 0% 100%);
|
||||
|
||||
/* Ring/Focus Color */
|
||||
--ds-color-ring: hsl(220 14% 10%);
|
||||
|
||||
/* ==========================================================================
|
||||
Spacing Scale
|
||||
========================================================================== */
|
||||
|
||||
--ds-space-0: 0;
|
||||
--ds-space-px: 1px;
|
||||
--ds-space-0-5: 0.125rem; /* 2px */
|
||||
--ds-space-1: 0.25rem; /* 4px */
|
||||
--ds-space-1-5: 0.375rem; /* 6px */
|
||||
--ds-space-2: 0.5rem; /* 8px */
|
||||
--ds-space-2-5: 0.625rem; /* 10px */
|
||||
--ds-space-3: 0.75rem; /* 12px */
|
||||
--ds-space-3-5: 0.875rem; /* 14px */
|
||||
--ds-space-4: 1rem; /* 16px */
|
||||
--ds-space-5: 1.25rem; /* 20px */
|
||||
--ds-space-6: 1.5rem; /* 24px */
|
||||
--ds-space-7: 1.75rem; /* 28px */
|
||||
--ds-space-8: 2rem; /* 32px */
|
||||
--ds-space-9: 2.25rem; /* 36px */
|
||||
--ds-space-10: 2.5rem; /* 40px */
|
||||
--ds-space-11: 2.75rem; /* 44px */
|
||||
--ds-space-12: 3rem; /* 48px */
|
||||
--ds-space-14: 3.5rem; /* 56px */
|
||||
--ds-space-16: 4rem; /* 64px */
|
||||
--ds-space-20: 5rem; /* 80px */
|
||||
--ds-space-24: 6rem; /* 96px */
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Font Sizes
|
||||
========================================================================== */
|
||||
|
||||
--ds-font-size-xs: 0.75rem; /* 12px */
|
||||
--ds-font-size-sm: 0.875rem; /* 14px */
|
||||
--ds-font-size-base: 1rem; /* 16px */
|
||||
--ds-font-size-lg: 1.125rem; /* 18px */
|
||||
--ds-font-size-xl: 1.25rem; /* 20px */
|
||||
--ds-font-size-2xl: 1.5rem; /* 24px */
|
||||
--ds-font-size-3xl: 1.875rem; /* 30px */
|
||||
--ds-font-size-4xl: 2.25rem; /* 36px */
|
||||
--ds-font-size-5xl: 3rem; /* 48px */
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Font Weights
|
||||
========================================================================== */
|
||||
|
||||
--ds-font-weight-thin: 100;
|
||||
--ds-font-weight-extralight: 200;
|
||||
--ds-font-weight-light: 300;
|
||||
--ds-font-weight-normal: 400;
|
||||
--ds-font-weight-medium: 500;
|
||||
--ds-font-weight-semibold: 600;
|
||||
--ds-font-weight-bold: 700;
|
||||
--ds-font-weight-extrabold: 800;
|
||||
--ds-font-weight-black: 900;
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Line Heights
|
||||
========================================================================== */
|
||||
|
||||
--ds-line-height-none: 1;
|
||||
--ds-line-height-tight: 1.25;
|
||||
--ds-line-height-snug: 1.375;
|
||||
--ds-line-height-normal: 1.5;
|
||||
--ds-line-height-relaxed: 1.625;
|
||||
--ds-line-height-loose: 2;
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Letter Spacing
|
||||
========================================================================== */
|
||||
|
||||
--ds-letter-spacing-tighter: -0.05em;
|
||||
--ds-letter-spacing-tight: -0.025em;
|
||||
--ds-letter-spacing-normal: 0;
|
||||
--ds-letter-spacing-wide: 0.025em;
|
||||
--ds-letter-spacing-wider: 0.05em;
|
||||
--ds-letter-spacing-widest: 0.1em;
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Font Families
|
||||
========================================================================== */
|
||||
|
||||
--ds-font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--ds-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--ds-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
||||
|
||||
/* ==========================================================================
|
||||
Border Radius
|
||||
========================================================================== */
|
||||
|
||||
--ds-radius-none: 0;
|
||||
--ds-radius-sm: 0.125rem; /* 2px */
|
||||
--ds-radius-md: 0.375rem; /* 6px */
|
||||
--ds-radius-lg: 0.5rem; /* 8px */
|
||||
--ds-radius-xl: 0.75rem; /* 12px */
|
||||
--ds-radius-2xl: 1rem; /* 16px */
|
||||
--ds-radius-full: 9999px;
|
||||
|
||||
/* ==========================================================================
|
||||
Shadows
|
||||
========================================================================== */
|
||||
|
||||
--ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--ds-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--ds-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--ds-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
||||
--ds-shadow-none: 0 0 #0000;
|
||||
|
||||
/* ==========================================================================
|
||||
Transitions
|
||||
========================================================================== */
|
||||
|
||||
--ds-transition-fast: 150ms;
|
||||
--ds-transition-normal: 200ms;
|
||||
--ds-transition-slow: 300ms;
|
||||
--ds-transition-slower: 500ms;
|
||||
|
||||
--ds-ease-linear: linear;
|
||||
--ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* ==========================================================================
|
||||
Z-Index Scale
|
||||
========================================================================== */
|
||||
|
||||
--ds-z-0: 0;
|
||||
--ds-z-10: 10;
|
||||
--ds-z-20: 20;
|
||||
--ds-z-30: 30;
|
||||
--ds-z-40: 40;
|
||||
--ds-z-50: 50;
|
||||
--ds-z-auto: auto;
|
||||
|
||||
/* ==========================================================================
|
||||
App-Specific Structural Tokens
|
||||
========================================================================== */
|
||||
|
||||
--app-header-height: 60px;
|
||||
--app-sidebar-width: 240px;
|
||||
--app-sidebar-width-tablet: 200px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Dark Mode Tokens
|
||||
========================================================================== */
|
||||
|
||||
[data-theme="dark"],
|
||||
.dark {
|
||||
--ds-color-primary-h: 220;
|
||||
--ds-color-primary-s: 14%;
|
||||
--ds-color-primary-l: 90%;
|
||||
--ds-color-primary: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) var(--ds-color-primary-l));
|
||||
--ds-color-primary-foreground: hsl(220 14% 10%);
|
||||
|
||||
--ds-color-background: hsl(220 14% 10%);
|
||||
--ds-color-foreground: hsl(220 9% 94%);
|
||||
|
||||
--ds-color-surface-0: hsl(220 14% 10%);
|
||||
--ds-color-surface-1: hsl(220 14% 14%);
|
||||
--ds-color-surface-2: hsl(220 14% 18%);
|
||||
--ds-color-surface-3: hsl(220 14% 22%);
|
||||
|
||||
--ds-color-muted: hsl(220 14% 18%);
|
||||
--ds-color-muted-foreground: hsl(220 9% 60%);
|
||||
|
||||
--ds-color-border: hsl(220 14% 22%);
|
||||
--ds-color-border-strong: hsl(220 14% 30%);
|
||||
|
||||
--ds-color-accent: hsl(220 14% 18%);
|
||||
--ds-color-accent-foreground: hsl(220 9% 94%);
|
||||
|
||||
--ds-color-ring: hsl(220 9% 80%);
|
||||
}
|
||||
895
admin-ui/public/admin-ui/css/styles.css
Normal file
895
admin-ui/public/admin-ui/css/styles.css
Normal file
@@ -0,0 +1,895 @@
|
||||
/**
|
||||
* Design System Admin UI - Shadcn/UI Styling
|
||||
* Complete styles for navbar-sidebar-main layout
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Colors - Shadcn/UI Light Theme */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.6%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.6%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.6%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 84.2% 60.2%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--primary: 0 0% 3.6%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 3.6%;
|
||||
--ring: 0 0% 3.6%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Typography */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'Monaco', 'Courier New', monospace;
|
||||
|
||||
/* Spacing */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-7: 1.75rem;
|
||||
--space-8: 2rem;
|
||||
|
||||
/* Font sizes */
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
|
||||
/* Font weights */
|
||||
--font-light: 300;
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: 0 0% 3.6%;
|
||||
--foreground: 0 0% 98.2%;
|
||||
--card: 0 0% 3.6%;
|
||||
--card-foreground: 0 0% 98.2%;
|
||||
--popover: 0 0% 3.6%;
|
||||
--popover-foreground: 0 0% 98.2%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 84.2% 60.2%;
|
||||
--accent-foreground: 0 0% 3.6%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 3.6%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--primary: 0 0% 98.2%;
|
||||
--primary-foreground: 0 0% 3.6%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98.2%;
|
||||
--ring: 0 84.2% 60.2%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
RESET & BASE STYLES
|
||||
============================================================================ */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.5;
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: var(--font-bold);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
APP LAYOUT - FLEXBOX/GRID HYBRID
|
||||
============================================================================ */
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header at top */
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--space-4);
|
||||
background-color: hsl(var(--card));
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
gap: var(--space-4);
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
/* Content area: sidebar + main */
|
||||
.app-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar on left */
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
background-color: hsl(var(--card));
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--space-4);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 30;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Main content on right */
|
||||
.app-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: var(--space-5);
|
||||
background-color: hsl(var(--background));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
HEADER STYLES
|
||||
============================================================================ */
|
||||
|
||||
.app-header__project-selector {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.app-header__team-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.team-select {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: var(--radius);
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.team-select:hover {
|
||||
border-color: hsl(var(--primary));
|
||||
background-color: hsl(var(--muted));
|
||||
}
|
||||
|
||||
.team-select:focus {
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.app-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.notification-toggle-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: hsl(var(--destructive));
|
||||
}
|
||||
|
||||
.ds-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background-color: hsl(var(--primary));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: hsl(var(--primary-foreground));
|
||||
font-weight: var(--font-semibold);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.ds-avatar:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
SIDEBAR - HEADER & LOGO
|
||||
============================================================================ */
|
||||
|
||||
.sidebar__header {
|
||||
padding-bottom: var(--space-4);
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.sidebar__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-weight: var(--font-semibold);
|
||||
font-size: var(--text-lg);
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.sidebar__logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: hsl(var(--primary));
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: hsl(var(--primary-foreground));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar__logo-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
SIDEBAR - NAVIGATION
|
||||
============================================================================ */
|
||||
|
||||
.sidebar__nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
padding: var(--space-4) 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Navigation Section */
|
||||
.nav-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.nav-section + .nav-section {
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.nav-section__title {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: hsl(var(--muted-foreground));
|
||||
padding-left: var(--space-3);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
/* Navigation Item */
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius);
|
||||
color: hsl(var(--foreground));
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: 2px solid transparent;
|
||||
outline: none;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: hsl(var(--muted));
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.nav-item:focus {
|
||||
border-color: hsl(var(--ring));
|
||||
background-color: hsl(var(--muted));
|
||||
color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 1px hsl(var(--ring));
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: hsl(var(--accent) / 0.1);
|
||||
color: hsl(var(--accent));
|
||||
font-weight: var(--font-semibold);
|
||||
border-color: hsl(var(--accent));
|
||||
}
|
||||
|
||||
.nav-item.active:focus {
|
||||
border-color: hsl(var(--ring));
|
||||
box-shadow: 0 0 0 1px hsl(var(--ring));
|
||||
}
|
||||
|
||||
.nav-item__icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-item__icon {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
SIDEBAR - HELP PANEL & FOOTER
|
||||
============================================================================ */
|
||||
|
||||
.sidebar__help {
|
||||
margin-top: auto;
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.help-panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.help-panel__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
color: hsl(var(--foreground));
|
||||
transition: all 200ms ease;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.help-panel__toggle:hover {
|
||||
background-color: hsl(var(--muted));
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.help-panel__content {
|
||||
display: none;
|
||||
margin-top: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: var(--radius);
|
||||
background-color: hsl(var(--muted));
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.help-panel[open] .help-panel__content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.help-section strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-2);
|
||||
color: hsl(var(--foreground));
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.help-section ul,
|
||||
.help-section ol {
|
||||
margin-left: var(--space-3);
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.help-section li {
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.sidebar__footer {
|
||||
padding-top: var(--space-4);
|
||||
text-align: center;
|
||||
font-size: var(--text-xs);
|
||||
color: hsl(var(--muted-foreground));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
AI SIDEBAR (Right)
|
||||
============================================================================ */
|
||||
|
||||
.app-sidebar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
width: 320px;
|
||||
height: calc(100vh - 60px);
|
||||
background-color: hsl(var(--card));
|
||||
border-left: 1px solid hsl(var(--border));
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.app-sidebar[aria-expanded="true"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
UTILITY CLASSES
|
||||
============================================================================ */
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
BUTTON COMPONENT
|
||||
============================================================================ */
|
||||
|
||||
ds-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
border: 1px solid transparent;
|
||||
background-color: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
ds-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
ds-button:focus {
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
ds-button[data-variant="ghost"] {
|
||||
background-color: transparent;
|
||||
color: hsl(var(--foreground));
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
ds-button[data-variant="ghost"]:hover {
|
||||
background-color: hsl(var(--muted));
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
ds-button[data-size="icon"] {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
ds-button[data-size="icon"] svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
BADGE COMPONENT
|
||||
============================================================================ */
|
||||
|
||||
ds-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
border: 1px solid hsl(var(--border));
|
||||
background-color: hsl(var(--muted));
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
ds-badge[data-variant="outline"] {
|
||||
border: 1px solid hsl(var(--border));
|
||||
background-color: transparent;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
COMPONENT PLACEHOLDERS
|
||||
============================================================================ */
|
||||
|
||||
ds-notification-center {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ds-ai-chat {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ds-toast-provider {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
RESPONSIVE DESIGN
|
||||
============================================================================ */
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.app-header {
|
||||
padding: 0 var(--space-3);
|
||||
}
|
||||
|
||||
.app-header__project-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-header__team-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: -240px;
|
||||
width: 240px;
|
||||
height: calc(100vh - 60px);
|
||||
top: 60px;
|
||||
z-index: 100;
|
||||
transition: left 300ms ease;
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: var(--space-3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small phones */
|
||||
@media (max-width: 480px) {
|
||||
.app-header {
|
||||
padding: 0 var(--space-2);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.app-header__actions {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: var(--space-2);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
PROJECT SELECTOR
|
||||
============================================================================ */
|
||||
|
||||
.project-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.project-selector__label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
color: hsl(var(--foreground));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.project-selector__select {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: var(--radius);
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
min-width: 200px;
|
||||
appearance: none;
|
||||
padding-right: 2rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--space-3) center;
|
||||
background-size: 12px;
|
||||
}
|
||||
|
||||
.project-selector__select:hover {
|
||||
border-color: hsl(var(--primary));
|
||||
background-color: hsl(var(--muted));
|
||||
}
|
||||
|
||||
.project-selector__select:focus {
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline-offset: 2px;
|
||||
border-color: hsl(var(--ring));
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
LANDING PAGE
|
||||
============================================================================ */
|
||||
|
||||
.landing-page {
|
||||
display: none;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-5);
|
||||
background-color: hsl(var(--background));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.landing-page.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
margin-bottom: var(--space-8);
|
||||
padding: var(--space-8) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.landing-hero h1 {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: hsl(var(--foreground));
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.landing-hero p {
|
||||
font-size: var(--text-lg);
|
||||
color: hsl(var(--muted-foreground));
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.landing-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.dashboard-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.dashboard-category__title {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-semibold);
|
||||
color: hsl(var(--foreground));
|
||||
padding-bottom: var(--space-3);
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: var(--space-4);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--space-5);
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: var(--radius);
|
||||
background-color: hsl(var(--card));
|
||||
text-decoration: none;
|
||||
color: hsl(var(--foreground));
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
border-color: hsl(var(--accent));
|
||||
background-color: hsl(var(--card));
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dashboard-card:focus {
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.dashboard-card__icon {
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: hsl(var(--muted));
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.dashboard-card__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dashboard-card__title {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-semibold);
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.dashboard-card__description {
|
||||
font-size: var(--text-sm);
|
||||
color: hsl(var(--muted-foreground));
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.dashboard-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-top: auto;
|
||||
font-size: var(--text-xs);
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
128
admin-ui/public/admin-ui/css/tokens.css
Normal file
128
admin-ui/public/admin-ui/css/tokens.css
Normal file
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* Design System Tokens
|
||||
* Layer 1: Base design tokens as CSS custom properties
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Color Tokens */
|
||||
--color-primary: oklch(0.65 0.18 250);
|
||||
--color-primary-hover: oklch(0.55 0.18 250);
|
||||
--color-primary-active: oklch(0.45 0.18 250);
|
||||
--color-primary-light: oklch(0.85 0.08 250);
|
||||
--color-secondary: oklch(0.60 0.12 120);
|
||||
--color-secondary-hover: oklch(0.50 0.12 120);
|
||||
--color-accent: oklch(0.70 0.20 40);
|
||||
--color-accent-hover: oklch(0.60 0.20 40);
|
||||
--color-destructive: oklch(0.63 0.25 30);
|
||||
--color-destructive-hover: oklch(0.53 0.25 30);
|
||||
--color-success: oklch(0.65 0.18 140);
|
||||
--color-warning: oklch(0.68 0.22 60);
|
||||
--color-info: oklch(0.62 0.18 230);
|
||||
--color-foreground: oklch(0.20 0.02 280);
|
||||
--color-foreground-secondary: oklch(0.40 0.02 280);
|
||||
--color-muted-foreground: oklch(0.55 0.02 280);
|
||||
--color-background: oklch(0.98 0.01 280);
|
||||
--color-surface: oklch(0.95 0.01 280);
|
||||
--color-surface-secondary: oklch(0.92 0.01 280);
|
||||
--color-muted: oklch(0.88 0.01 280);
|
||||
--color-border: oklch(0.82 0.01 280);
|
||||
--color-ring: oklch(0.65 0.18 250);
|
||||
--color-input: oklch(0.95 0.01 280);
|
||||
--color-card: oklch(0.98 0.01 280);
|
||||
|
||||
/* Semantic Colors */
|
||||
--primary: var(--color-primary);
|
||||
--primary-hover: var(--color-primary-hover);
|
||||
--primary-active: var(--color-primary-active);
|
||||
--primary-foreground: var(--color-foreground);
|
||||
--secondary: var(--color-secondary);
|
||||
--secondary-hover: var(--color-secondary-hover);
|
||||
--secondary-foreground: var(--color-foreground);
|
||||
--accent: var(--color-accent);
|
||||
--accent-hover: var(--color-accent-hover);
|
||||
--accent-foreground: var(--color-foreground);
|
||||
--destructive: var(--color-destructive);
|
||||
--destructive-hover: var(--color-destructive-hover);
|
||||
--destructive-foreground: var(--color-foreground);
|
||||
--success: var(--color-success);
|
||||
--warning: var(--color-warning);
|
||||
--info: var(--color-info);
|
||||
--foreground: var(--color-foreground);
|
||||
--muted-foreground: var(--color-muted-foreground);
|
||||
--background: var(--color-background);
|
||||
--surface: var(--color-surface);
|
||||
--surface-secondary: var(--color-surface-secondary);
|
||||
--muted: var(--color-muted);
|
||||
--card: var(--color-card);
|
||||
--input: var(--color-input);
|
||||
--border: var(--color-border);
|
||||
--ring: var(--color-ring);
|
||||
|
||||
/* Spacing Scale (4px base unit) */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-5: 1.25rem; /* 20px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-7: 1.75rem; /* 28px */
|
||||
--space-8: 2rem; /* 32px */
|
||||
|
||||
/* Typography */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'Monaco', 'Courier New', monospace;
|
||||
--font-semibold: 600;
|
||||
--font-medium: 500;
|
||||
--font-bold: 700;
|
||||
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
|
||||
/* Border Radius */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 0.25rem; /* 4px */
|
||||
--radius: 0.375rem; /* 6px */
|
||||
--radius-md: 0.5rem; /* 8px */
|
||||
--radius-lg: 0.75rem; /* 12px */
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* Animation */
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 200ms;
|
||||
--duration-slow: 300ms;
|
||||
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--popover: oklch(0.98 0.01 280);
|
||||
--popover-foreground: oklch(0.20 0.02 280);
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-foreground: oklch(0.92 0.02 280);
|
||||
--color-foreground-secondary: oklch(0.75 0.02 280);
|
||||
--color-muted-foreground: oklch(0.60 0.02 280);
|
||||
--color-background: oklch(0.12 0.02 280);
|
||||
--color-surface: oklch(0.15 0.02 280);
|
||||
--color-surface-secondary: oklch(0.18 0.02 280);
|
||||
--color-muted: oklch(0.25 0.02 280);
|
||||
--color-border: oklch(0.30 0.02 280);
|
||||
--color-input: oklch(0.18 0.02 280);
|
||||
--color-card: oklch(0.15 0.02 280);
|
||||
--popover: oklch(0.15 0.02 280);
|
||||
--popover-foreground: oklch(0.92 0.02 280);
|
||||
}
|
||||
}
|
||||
112
admin-ui/public/js/telemetry.js
Normal file
112
admin-ui/public/js/telemetry.js
Normal file
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* DSS Telemetry - Browser Error Capture
|
||||
* Automatically captures all console errors, uncaught exceptions, and promise rejections
|
||||
* Sends telemetry to backend for monitoring and auto-fixing
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const TELEMETRY_ENDPOINT = '/api/telemetry/log';
|
||||
const originalError = console.error;
|
||||
const originalWarn = console.warn;
|
||||
|
||||
// Buffer for batching (optional optimization)
|
||||
let errorBuffer = [];
|
||||
let flushTimeout = null;
|
||||
|
||||
/**
|
||||
* Send log data to backend telemetry endpoint
|
||||
*/
|
||||
function sendLog(data) {
|
||||
const payload = JSON.stringify({
|
||||
...data,
|
||||
timestamp: new Date().toISOString(),
|
||||
url: window.location.href,
|
||||
userAgent: navigator.userAgent
|
||||
});
|
||||
|
||||
// Use sendBeacon for reliability (works even on page unload)
|
||||
if (navigator.sendBeacon) {
|
||||
const blob = new Blob([payload], { type: 'application/json' });
|
||||
navigator.sendBeacon(TELEMETRY_ENDPOINT, blob);
|
||||
} else {
|
||||
// Fallback to fetch with keepalive
|
||||
fetch(TELEMETRY_ENDPOINT, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: payload,
|
||||
keepalive: true
|
||||
}).catch(err => {
|
||||
// Silently fail - don't want telemetry errors to break the app
|
||||
console.debug('[Telemetry] Failed to send log:', err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Capture Global Uncaught Errors
|
||||
*/
|
||||
window.addEventListener('error', function(event) {
|
||||
sendLog({
|
||||
type: 'uncaught',
|
||||
level: 'error',
|
||||
message: event.message,
|
||||
filename: event.filename,
|
||||
lineno: event.lineno,
|
||||
colno: event.colno,
|
||||
stack: event.error?.stack || 'No stack trace available'
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 2. Capture Unhandled Promise Rejections
|
||||
*/
|
||||
window.addEventListener('unhandledrejection', function(event) {
|
||||
sendLog({
|
||||
type: 'promise',
|
||||
level: 'error',
|
||||
message: String(event.reason),
|
||||
stack: event.reason?.stack || 'No stack trace available'
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 3. Intercept console.error
|
||||
*/
|
||||
console.error = function(...args) {
|
||||
sendLog({
|
||||
type: 'console',
|
||||
level: 'error',
|
||||
message: args.map(arg => {
|
||||
if (typeof arg === 'object') {
|
||||
try {
|
||||
return JSON.stringify(arg);
|
||||
} catch {
|
||||
return String(arg);
|
||||
}
|
||||
}
|
||||
return String(arg);
|
||||
}).join(' ')
|
||||
});
|
||||
|
||||
// Call original console.error so logs still appear in DevTools
|
||||
originalError.apply(console, args);
|
||||
};
|
||||
|
||||
/**
|
||||
* 4. Optionally capture console.warn (for comprehensive monitoring)
|
||||
*/
|
||||
console.warn = function(...args) {
|
||||
sendLog({
|
||||
type: 'console',
|
||||
level: 'warn',
|
||||
message: args.map(arg => String(arg)).join(' ')
|
||||
});
|
||||
|
||||
originalWarn.apply(console, args);
|
||||
};
|
||||
|
||||
// Log telemetry initialization
|
||||
console.debug('[Telemetry] Browser error capture initialized');
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user