feat: Add DSS infrastructure, remove legacy admin-ui code
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
- Remove legacy admin-ui/js/ vanilla JS components - Add .dss/ directory with core tokens, skins, themes - Add Storybook configuration and generated stories - Add DSS management scripts (dss-services, dss-init, dss-setup, dss-reset) - Add MCP command definitions for DSS plugin - Add Figma sync architecture and scripts - Update pre-commit hooks with documentation validation - Fix JSON trailing commas in skin files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DSS
@@ -1,750 +0,0 @@
|
||||
/**
|
||||
* 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-section__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-1);
|
||||
}
|
||||
|
||||
/* Sub-sections within nav sections */
|
||||
.nav-sub-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-1);
|
||||
margin-top: var(--ds-space-1);
|
||||
}
|
||||
|
||||
.nav-sub-section__title {
|
||||
font-size: var(--ds-font-size-xs);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
color: var(--nav-section-title);
|
||||
padding: var(--ds-space-1) var(--ds-space-3);
|
||||
padding-left: var(--ds-space-4);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Navigation item levels */
|
||||
.nav-item--level-1 {
|
||||
padding-left: var(--ds-space-3);
|
||||
}
|
||||
|
||||
.nav-item--level-2 {
|
||||
padding-left: var(--ds-space-6);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@@ -1,230 +0,0 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* Design System Integrations CSS
|
||||
* This file contains integration-specific styles for third-party components
|
||||
* and external library theming.
|
||||
*/
|
||||
|
||||
/* Placeholder for future integrations */
|
||||
@@ -1,208 +0,0 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
@@ -1,246 +0,0 @@
|
||||
/**
|
||||
* 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%);
|
||||
}
|
||||
Reference in New Issue
Block a user