mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-29 00:05:01 +00:00
refactor(fakemui): complete M3 token migration for styles
- Replace all hardcoded opacity: 0.38 with var(--disabled-content-opacity) - Replace font-weight: 500 with M3 typography weight tokens - Replace letter-spacing values with M3 tracking tokens - Update grid breakpoints to use M3 responsive mixins - Add extended semantic color tokens (success, warning, info, search-highlight) - Add state layer opacity variables matching M3 spec - Fix monospace font usage across code elements - Convert transition durations to M3 motion tokens - Centralize all hex colors in _variables.scss Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -63,6 +63,36 @@ $inverse-primary: var(--mat-sys-inverse-primary);
|
||||
$scrim: var(--mat-sys-scrim);
|
||||
$shadow: var(--mat-sys-shadow);
|
||||
|
||||
// ============================================
|
||||
// Extended Semantic Colors (not in M3 spec)
|
||||
// ============================================
|
||||
// M3 only defines error. We extend with success/warning/info.
|
||||
// These follow M3 naming conventions.
|
||||
|
||||
// Success (green)
|
||||
$success: var(--color-success);
|
||||
$on-success: var(--color-on-success);
|
||||
$success-container: var(--color-success-container);
|
||||
$on-success-container: var(--color-on-success-container);
|
||||
|
||||
// Warning (amber/orange)
|
||||
$warning: var(--color-warning);
|
||||
$on-warning: var(--color-on-warning);
|
||||
$warning-container: var(--color-warning-container);
|
||||
$on-warning-container: var(--color-on-warning-container);
|
||||
|
||||
// Info (blue)
|
||||
$info: var(--color-info);
|
||||
$on-info: var(--color-on-info);
|
||||
$info-container: var(--color-info-container);
|
||||
$on-info-container: var(--color-on-info-container);
|
||||
|
||||
// Search/Find highlight (yellow)
|
||||
$search-highlight: var(--color-search-highlight);
|
||||
$on-search-highlight: var(--color-on-search-highlight);
|
||||
$search-highlight-current: var(--color-search-highlight-current);
|
||||
$search-highlight-ring: var(--color-search-highlight-ring);
|
||||
|
||||
// ============================================
|
||||
// Shape Tokens (Corner Radius)
|
||||
// ============================================
|
||||
@@ -103,6 +133,9 @@ $elevation-level5: var(--mat-sys-level5);
|
||||
// Typography Tokens
|
||||
// ============================================
|
||||
|
||||
// Monospace font for code
|
||||
$font-mono: var(--font-mono);
|
||||
|
||||
// Display
|
||||
$display-large-font: var(--mat-sys-display-large-font);
|
||||
$display-large-size: var(--mat-sys-display-large-size);
|
||||
|
||||
@@ -212,17 +212,29 @@
|
||||
/* Background Colors */
|
||||
.bg-destructive { background-color: var(--mat-sys-error); }
|
||||
.bg-destructive\/10 { background-color: color-mix(in srgb, var(--mat-sys-error) 10%, transparent); }
|
||||
.bg-green-600 { background-color: #16a34a; }
|
||||
.bg-green-600\/10 { background-color: rgba(22, 163, 74, 0.1); }
|
||||
.bg-success { background-color: var(--color-success); }
|
||||
.bg-success\/10 { background-color: var(--color-success-container); }
|
||||
.bg-green-600 { background-color: var(--color-success); }
|
||||
.bg-green-600\/10 { background-color: var(--color-success-container); }
|
||||
.bg-warning { background-color: var(--color-warning); }
|
||||
.bg-warning\/10 { background-color: var(--color-warning-container); }
|
||||
.bg-info { background-color: var(--color-info); }
|
||||
.bg-info\/10 { background-color: var(--color-info-container); }
|
||||
|
||||
/* Text Colors */
|
||||
.text-destructive { color: var(--mat-sys-error); }
|
||||
.text-green-600 { color: #16a34a; }
|
||||
.text-success { color: var(--color-success); }
|
||||
.text-green-600 { color: var(--color-success); }
|
||||
.text-warning { color: var(--color-warning); }
|
||||
.text-info { color: var(--color-info); }
|
||||
|
||||
/* Border Utilities */
|
||||
.border { border: 1px solid var(--mat-sys-outline); }
|
||||
.border-destructive { border-color: var(--mat-sys-error); }
|
||||
.border-green-600 { border-color: #16a34a; }
|
||||
.border-success { border-color: var(--color-success); }
|
||||
.border-green-600 { border-color: var(--color-success); }
|
||||
.border-warning { border-color: var(--color-warning); }
|
||||
.border-info { border-color: var(--color-info); }
|
||||
|
||||
/* Grid Utilities */
|
||||
.grid-cols-1 { grid-template-columns: 1fr; }
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
@@ -57,6 +57,12 @@
|
||||
--color-info-container: color-mix(in srgb, #2196f3 12%, var(--mat-sys-surface));
|
||||
--color-on-info-container: #0d47a1;
|
||||
|
||||
// Search/Find highlight (yellow - universal standard)
|
||||
--color-search-highlight: #ffeb3b;
|
||||
--color-on-search-highlight: #000000;
|
||||
--color-search-highlight-current: #fdd835;
|
||||
--color-search-highlight-ring: #fbc02d;
|
||||
|
||||
// Error (from M3)
|
||||
--color-error: var(--mat-sys-error);
|
||||
--color-on-error: var(--mat-sys-on-error);
|
||||
@@ -94,11 +100,21 @@
|
||||
--shadow-lg: var(--mat-sys-level3);
|
||||
--shadow-xl: var(--mat-sys-level4);
|
||||
|
||||
// ============================================
|
||||
// State Layer & Disabled Opacities (M3 spec)
|
||||
// ============================================
|
||||
--state-hover-opacity: 0.08;
|
||||
--state-focus-opacity: 0.12;
|
||||
--state-pressed-opacity: 0.12;
|
||||
--state-dragged-opacity: 0.16;
|
||||
--disabled-container-opacity: 0.12;
|
||||
--disabled-content-opacity: 0.38;
|
||||
|
||||
// ============================================
|
||||
// Legacy Typography → M3 Type Scale
|
||||
// ============================================
|
||||
--font-family: var(--mat-sys-body-large-font);
|
||||
--font-mono: var(--mat-sys-body-large-font);
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
|
||||
|
||||
--font-size-xs: var(--mat-sys-label-small-size);
|
||||
--font-size-sm: var(--mat-sys-body-small-size);
|
||||
@@ -125,11 +141,20 @@
|
||||
--transition-slow: var(--mat-sys-motion-duration-long2) var(--mat-sys-motion-easing-standard);
|
||||
|
||||
// ============================================
|
||||
// Z-index Layers (unchanged)
|
||||
// Z-index Layers (M3-aligned stacking order)
|
||||
// ============================================
|
||||
--z-dropdown: 100;
|
||||
--z-modal: 200;
|
||||
--z-toast: 300;
|
||||
// Local stacking (within components)
|
||||
--z-local: 1;
|
||||
--z-local-elevated: 10;
|
||||
|
||||
// Global stacking (overlays)
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1100;
|
||||
--z-drawer: 1200;
|
||||
--z-modal: 1300;
|
||||
--z-snackbar: 1400;
|
||||
--z-tooltip: 1500;
|
||||
--z-overlay-max: 9999;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
|
||||
@@ -93,22 +93,22 @@
|
||||
|
||||
// Warning
|
||||
.alert--warning {
|
||||
background: color-mix(in srgb, #ff9800 12%, var(--mat-sys-surface));
|
||||
background: var(--color-warning-container);
|
||||
color: var(--mat-sys-on-surface);
|
||||
}
|
||||
|
||||
.alert--warning .alert__icon {
|
||||
color: #e65100;
|
||||
color: var(--color-on-warning-container);
|
||||
}
|
||||
|
||||
// Success
|
||||
.alert--success {
|
||||
background: color-mix(in srgb, #4caf50 12%, var(--mat-sys-surface));
|
||||
background: var(--color-success-container);
|
||||
color: var(--mat-sys-on-surface);
|
||||
}
|
||||
|
||||
.alert--success .alert__icon {
|
||||
color: #2e7d32;
|
||||
color: var(--color-on-success-container);
|
||||
}
|
||||
|
||||
// Info (default)
|
||||
@@ -135,11 +135,11 @@
|
||||
}
|
||||
|
||||
.alert--outlined.alert--warning {
|
||||
border-color: #ff9800;
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.alert--outlined.alert--success {
|
||||
border-color: #4caf50;
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.alert--outlined.alert--info {
|
||||
@@ -160,21 +160,21 @@
|
||||
}
|
||||
|
||||
.alert--filled.alert--warning {
|
||||
background: #ed6c02;
|
||||
color: #fff;
|
||||
background: var(--color-warning);
|
||||
color: var(--color-on-warning);
|
||||
}
|
||||
|
||||
.alert--filled.alert--warning .alert__icon {
|
||||
color: #fff;
|
||||
color: var(--color-on-warning);
|
||||
}
|
||||
|
||||
.alert--filled.alert--success {
|
||||
background: #2e7d32;
|
||||
color: #fff;
|
||||
background: var(--color-success);
|
||||
color: var(--color-on-success);
|
||||
}
|
||||
|
||||
.alert--filled.alert--success .alert__icon {
|
||||
color: #fff;
|
||||
color: var(--color-on-success);
|
||||
}
|
||||
|
||||
.alert--filled.alert--info {
|
||||
|
||||
@@ -177,7 +177,7 @@
|
||||
}
|
||||
|
||||
.avatar__status--online {
|
||||
background: #4caf50;
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.avatar__status--busy {
|
||||
@@ -185,5 +185,5 @@
|
||||
}
|
||||
|
||||
.avatar__status--away {
|
||||
background: #ff9800;
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
background: var(--mat-sys-error);
|
||||
color: var(--mat-sys-on-error);
|
||||
font-family: var(--mat-sys-label-small-font);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-size: var(--mat-sys-label-small-size);
|
||||
font-weight: var(--mat-sys-label-small-weight);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -91,13 +91,18 @@
|
||||
}
|
||||
|
||||
.badge--success {
|
||||
background: #4caf50;
|
||||
color: #fff;
|
||||
background: var(--color-success);
|
||||
color: var(--color-on-success);
|
||||
}
|
||||
|
||||
.badge--warning {
|
||||
background: #ff9800;
|
||||
color: #000;
|
||||
background: var(--color-warning);
|
||||
color: var(--color-on-warning);
|
||||
}
|
||||
|
||||
.badge--info {
|
||||
background: var(--color-info);
|
||||
color: var(--color-on-info);
|
||||
}
|
||||
|
||||
.badge--error {
|
||||
|
||||
@@ -38,13 +38,18 @@
|
||||
}
|
||||
|
||||
.blockquote--success {
|
||||
border-left-color: #4caf50;
|
||||
background: color-mix(in srgb, #4caf50 8%, var(--mat-sys-surface));
|
||||
border-left-color: var(--color-success);
|
||||
background: var(--color-success-container);
|
||||
}
|
||||
|
||||
.blockquote--warning {
|
||||
border-left-color: #ff9800;
|
||||
background: color-mix(in srgb, #ff9800 8%, var(--mat-sys-surface));
|
||||
border-left-color: var(--color-warning);
|
||||
background: var(--color-warning-container);
|
||||
}
|
||||
|
||||
.blockquote--info {
|
||||
border-left-color: var(--color-info);
|
||||
background: var(--color-info-container);
|
||||
}
|
||||
|
||||
// Outlined variant
|
||||
|
||||
@@ -202,7 +202,7 @@
|
||||
.btn--sm {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--mat-sys-label-small-size);
|
||||
}
|
||||
|
||||
.btn--md {
|
||||
@@ -213,7 +213,7 @@
|
||||
.btn--lg {
|
||||
height: 48px;
|
||||
padding: 0 32px;
|
||||
font-size: 1rem;
|
||||
font-size: var(--mat-sys-body-large-size);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
|
||||
@@ -106,13 +106,18 @@
|
||||
}
|
||||
|
||||
.chip--success {
|
||||
background: color-mix(in srgb, #4caf50 20%, transparent);
|
||||
color: #2e7d32;
|
||||
background: var(--color-success-container);
|
||||
color: var(--color-on-success-container);
|
||||
}
|
||||
|
||||
.chip--warning {
|
||||
background: color-mix(in srgb, #ff9800 20%, transparent);
|
||||
color: #e65100;
|
||||
background: var(--color-warning-container);
|
||||
color: var(--color-on-warning-container);
|
||||
}
|
||||
|
||||
.chip--info {
|
||||
background: var(--color-info-container);
|
||||
color: var(--color-on-info-container);
|
||||
}
|
||||
|
||||
.chip--error {
|
||||
@@ -196,7 +201,7 @@
|
||||
|
||||
.chip:disabled,
|
||||
.chip--disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
border-radius: var(--mat-sys-corner-medium);
|
||||
overflow-x: auto;
|
||||
margin-bottom: 16px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
|
||||
font-size: 0.875rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
line-height: 1.6;
|
||||
color: var(--mat-sys-on-surface);
|
||||
}
|
||||
@@ -75,7 +75,7 @@
|
||||
padding: 0 16px;
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
opacity: 0.5;
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--mat-sys-label-small-size);
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
border-right: 1px solid var(--mat-sys-outline-variant);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
// Base inline code
|
||||
.code-inline {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875em;
|
||||
background: var(--mat-sys-surface-container-high);
|
||||
color: var(--mat-sys-on-surface);
|
||||
@@ -33,17 +33,27 @@
|
||||
}
|
||||
|
||||
.code-inline--function {
|
||||
color: #ff9800;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.code-inline--error {
|
||||
color: var(--mat-sys-error);
|
||||
background: color-mix(in srgb, var(--mat-sys-error) 8%, var(--mat-sys-surface));
|
||||
background: var(--color-error-container);
|
||||
}
|
||||
|
||||
.code-inline--success {
|
||||
color: #4caf50;
|
||||
background: color-mix(in srgb, #4caf50 8%, var(--mat-sys-surface));
|
||||
color: var(--color-success);
|
||||
background: var(--color-success-container);
|
||||
}
|
||||
|
||||
.code-inline--warning {
|
||||
color: var(--color-warning);
|
||||
background: var(--color-warning-container);
|
||||
}
|
||||
|
||||
.code-inline--info {
|
||||
color: var(--color-info);
|
||||
background: var(--color-info-container);
|
||||
}
|
||||
|
||||
// Selectable variant (clickable)
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
background: var(--mat-sys-surface-container);
|
||||
border: 1px solid var(--mat-sys-outline-variant);
|
||||
border-radius: var(--mat-sys-corner-medium);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -25,7 +25,7 @@
|
||||
.code-line-num {
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
opacity: 0.5;
|
||||
font-size: 0.7rem;
|
||||
font-size: var(--mat-sys-label-small-size);
|
||||
min-width: 24px;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
@@ -42,16 +42,16 @@
|
||||
|
||||
// Diff added line
|
||||
.code-line--added {
|
||||
background: color-mix(in srgb, #4caf50 12%, transparent);
|
||||
background: var(--color-success-container);
|
||||
}
|
||||
|
||||
.code-line--added .code-line-content {
|
||||
color: #4caf50;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.code-line--added::before {
|
||||
content: '+';
|
||||
color: #4caf50;
|
||||
color: var(--color-success);
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
@@ -74,11 +74,11 @@
|
||||
|
||||
// Diff modified line
|
||||
.code-line--modified {
|
||||
background: color-mix(in srgb, #ff9800 12%, transparent);
|
||||
background: var(--color-warning-container);
|
||||
}
|
||||
|
||||
.code-line--modified .code-line-content {
|
||||
color: #ff9800;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
// Context line (unchanged)
|
||||
@@ -119,7 +119,7 @@
|
||||
}
|
||||
|
||||
.code-preview-stats--added {
|
||||
color: #4caf50;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.code-preview-stats--removed {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
z-index: 1000;
|
||||
z-index: var(--z-modal);
|
||||
animation: dialog-fade-in var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-emphasized-decelerate);
|
||||
}
|
||||
|
||||
|
||||
@@ -43,8 +43,8 @@
|
||||
|
||||
// Error code/details
|
||||
.error-state-code {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--mat-sys-label-small-size);
|
||||
color: var(--mat-sys-error);
|
||||
background: color-mix(in srgb, var(--mat-sys-error) 8%, transparent);
|
||||
padding: 8px 16px;
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-family: var(--mat-sys-body-medium-font);
|
||||
font-size: var(--mat-sys-body-medium-size);
|
||||
font-weight: 500;
|
||||
line-height: var(--mat-sys-body-medium-line-height);
|
||||
font-family: var(--mat-sys-label-large-font);
|
||||
font-size: var(--mat-sys-label-large-size);
|
||||
font-weight: var(--mat-sys-label-large-weight);
|
||||
line-height: var(--mat-sys-label-large-line-height);
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
}
|
||||
|
||||
@@ -62,9 +62,9 @@
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
border-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--mat-sys-on-surface) var(--disabled-container-opacity), transparent);
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
@@ -129,7 +129,7 @@
|
||||
}
|
||||
|
||||
.textarea:disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -182,7 +182,7 @@
|
||||
}
|
||||
|
||||
.select:disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -241,7 +241,7 @@
|
||||
}
|
||||
|
||||
.checkbox__input:disabled + .checkbox__box {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -306,7 +306,7 @@
|
||||
}
|
||||
|
||||
.radio__input:disabled + .radio__circle {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -381,7 +381,7 @@
|
||||
}
|
||||
|
||||
.switch__input:disabled + .switch__track {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
// ==============================
|
||||
// Flat selectors for responsive grid layouts using M3 spacing
|
||||
|
||||
@use '../mixins/responsive' as *;
|
||||
|
||||
// Base grid
|
||||
.grid {
|
||||
display: grid;
|
||||
@@ -100,8 +102,8 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// Responsive grid breakpoints
|
||||
@media (max-width: 768px) {
|
||||
// Responsive grid breakpoints (M3 window size classes)
|
||||
@include compact {
|
||||
.grid-cols-2,
|
||||
.grid-cols-3,
|
||||
.grid-cols-4,
|
||||
@@ -115,7 +117,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
@include medium {
|
||||
.grid-cols-4,
|
||||
.grid-cols-5,
|
||||
.grid-cols-6 {
|
||||
|
||||
@@ -22,23 +22,23 @@
|
||||
}
|
||||
|
||||
.highlight--success {
|
||||
background: color-mix(in srgb, #4caf50 20%, var(--mat-sys-surface));
|
||||
color: #2e7d32;
|
||||
background: var(--color-success-container);
|
||||
color: var(--color-on-success-container);
|
||||
}
|
||||
|
||||
.highlight--warning {
|
||||
background: color-mix(in srgb, #ff9800 20%, var(--mat-sys-surface));
|
||||
color: #e65100;
|
||||
background: var(--color-warning-container);
|
||||
color: var(--color-on-warning-container);
|
||||
}
|
||||
|
||||
.highlight--error {
|
||||
background: var(--mat-sys-error-container);
|
||||
color: var(--mat-sys-on-error-container);
|
||||
background: var(--color-error-container);
|
||||
color: var(--color-on-error-container);
|
||||
}
|
||||
|
||||
.highlight--info {
|
||||
background: color-mix(in srgb, #2196f3 20%, var(--mat-sys-surface));
|
||||
color: #0d47a1;
|
||||
background: var(--color-info-container);
|
||||
color: var(--color-on-info-container);
|
||||
}
|
||||
|
||||
// Subtle variant (lower contrast)
|
||||
@@ -55,16 +55,16 @@
|
||||
|
||||
// Search result highlight
|
||||
.highlight--search {
|
||||
background: color-mix(in srgb, #ffeb3b 50%, transparent);
|
||||
background: color-mix(in srgb, var(--color-search-highlight) 50%, transparent);
|
||||
color: inherit;
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, #ffeb3b 50%, transparent);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-search-highlight) 50%, transparent);
|
||||
}
|
||||
|
||||
// Current/active search result
|
||||
.highlight--search-current {
|
||||
background: #ffeb3b;
|
||||
color: #000;
|
||||
box-shadow: 0 0 0 2px #fbc02d;
|
||||
background: var(--color-search-highlight-current);
|
||||
color: var(--color-on-search-highlight);
|
||||
box-shadow: 0 0 0 2px var(--color-search-highlight-ring);
|
||||
}
|
||||
|
||||
// Selection highlight (for text selection styling)
|
||||
@@ -75,7 +75,7 @@
|
||||
// Code/syntax highlighting markers
|
||||
.highlight--keyword {
|
||||
color: var(--mat-sys-primary);
|
||||
font-weight: 500;
|
||||
font-weight: var(--mat-sys-label-large-weight);
|
||||
}
|
||||
|
||||
.highlight--string {
|
||||
|
||||
@@ -68,11 +68,15 @@
|
||||
}
|
||||
|
||||
.icon--success {
|
||||
color: #4caf50;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.icon--warning {
|
||||
color: #ff9800;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.icon--info {
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.icon--on-surface {
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
// Uppercase variant (for section headers, metadata keys)
|
||||
.label--uppercase {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: var(--mat-sys-label-small-tracking);
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@@ -49,11 +49,15 @@
|
||||
}
|
||||
|
||||
.label--success {
|
||||
color: #4caf50;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.label--warning {
|
||||
color: #ff9800;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.label--info {
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.label--on-surface {
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
// Disabled list item
|
||||
.list-item--disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -239,7 +239,7 @@
|
||||
}
|
||||
|
||||
.list-item__status--success {
|
||||
background: #4caf50;
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.list-item__status--error {
|
||||
@@ -247,7 +247,11 @@
|
||||
}
|
||||
|
||||
.list-item__status--warning {
|
||||
background: #ff9800;
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
.list-item__status--info {
|
||||
background: var(--color-info);
|
||||
}
|
||||
|
||||
.list-item__status--pending {
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: color-mix(in srgb, var(--mat-sys-surface) 80%, transparent);
|
||||
z-index: 10;
|
||||
z-index: var(--z-local-elevated);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--mat-sys-surface);
|
||||
z-index: 9999;
|
||||
z-index: var(--z-overlay-max);
|
||||
}
|
||||
|
||||
// Skeleton loading placeholder
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
// Inline code
|
||||
.markdown code {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875em;
|
||||
background: var(--mat-sys-surface-container-high);
|
||||
color: var(--mat-sys-on-surface);
|
||||
@@ -24,7 +24,7 @@
|
||||
.markdown pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font-size: 0.875rem;
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
@@ -25,28 +25,28 @@
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 1000;
|
||||
z-index: var(--z-dropdown);
|
||||
}
|
||||
|
||||
.panel--fixed-bl {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
z-index: 1000;
|
||||
z-index: var(--z-dropdown);
|
||||
}
|
||||
|
||||
.panel--fixed-tr {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 1000;
|
||||
z-index: var(--z-dropdown);
|
||||
}
|
||||
|
||||
.panel--fixed-tl {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: 1000;
|
||||
z-index: var(--z-dropdown);
|
||||
}
|
||||
|
||||
// Panel header
|
||||
|
||||
@@ -39,11 +39,15 @@
|
||||
}
|
||||
|
||||
.progress--success .progress-bar {
|
||||
background: #4caf50;
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.progress--warning .progress-bar {
|
||||
background: #ff9800;
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
.progress--info .progress-bar {
|
||||
background: var(--color-info);
|
||||
}
|
||||
|
||||
.progress--error .progress-bar {
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
// Uppercase variant
|
||||
.section-title--uppercase {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: var(--mat-sys-label-small-tracking);
|
||||
}
|
||||
|
||||
// With action link
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
// Snackbar container
|
||||
.snackbar {
|
||||
position: fixed;
|
||||
z-index: 1400;
|
||||
z-index: var(--z-snackbar);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -180,7 +180,7 @@
|
||||
// Stacked snackbars
|
||||
.snackbar-container {
|
||||
position: fixed;
|
||||
z-index: 1400;
|
||||
z-index: var(--z-snackbar);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
@@ -20,28 +20,28 @@
|
||||
|
||||
// Status variants
|
||||
.stat-badge--pending {
|
||||
background: color-mix(in srgb, #ff9800 20%, var(--mat-sys-surface));
|
||||
color: #e65100;
|
||||
background: var(--color-warning-container);
|
||||
color: var(--color-on-warning-container);
|
||||
}
|
||||
|
||||
.stat-badge--success {
|
||||
background: color-mix(in srgb, #4caf50 20%, var(--mat-sys-surface));
|
||||
color: #2e7d32;
|
||||
background: var(--color-success-container);
|
||||
color: var(--color-on-success-container);
|
||||
}
|
||||
|
||||
.stat-badge--error {
|
||||
background: var(--mat-sys-error-container);
|
||||
color: var(--mat-sys-on-error-container);
|
||||
background: var(--color-error-container);
|
||||
color: var(--color-on-error-container);
|
||||
}
|
||||
|
||||
.stat-badge--warning {
|
||||
background: color-mix(in srgb, #ff9800 20%, var(--mat-sys-surface));
|
||||
color: #e65100;
|
||||
background: var(--color-warning-container);
|
||||
color: var(--color-on-warning-container);
|
||||
}
|
||||
|
||||
.stat-badge--info {
|
||||
background: color-mix(in srgb, #2196f3 20%, var(--mat-sys-surface));
|
||||
color: #0d47a1;
|
||||
background: var(--color-info-container);
|
||||
color: var(--color-on-info-container);
|
||||
}
|
||||
|
||||
// M3 color variants
|
||||
@@ -62,8 +62,8 @@
|
||||
|
||||
// Filled variants (stronger emphasis)
|
||||
.stat-badge--filled-success {
|
||||
background: #4caf50;
|
||||
color: #fff;
|
||||
background: var(--color-success);
|
||||
color: var(--color-on-success);
|
||||
}
|
||||
|
||||
.stat-badge--filled-error {
|
||||
@@ -72,13 +72,13 @@
|
||||
}
|
||||
|
||||
.stat-badge--filled-warning {
|
||||
background: #ff9800;
|
||||
color: #000;
|
||||
background: var(--color-warning);
|
||||
color: var(--color-on-warning);
|
||||
}
|
||||
|
||||
.stat-badge--filled-info {
|
||||
background: #2196f3;
|
||||
color: #fff;
|
||||
background: var(--color-info);
|
||||
color: var(--color-on-info);
|
||||
}
|
||||
|
||||
.stat-badge--filled-primary {
|
||||
|
||||
@@ -29,9 +29,9 @@
|
||||
text-align: left;
|
||||
font-family: var(--mat-sys-label-small-font);
|
||||
font-size: var(--mat-sys-label-small-size);
|
||||
font-weight: 500;
|
||||
font-weight: var(--mat-sys-label-small-weight);
|
||||
line-height: var(--mat-sys-label-small-line-height);
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: var(--mat-sys-label-small-tracking);
|
||||
text-transform: uppercase;
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
background: var(--mat-sys-surface-container);
|
||||
|
||||
@@ -199,5 +199,5 @@
|
||||
background: var(--mat-sys-error);
|
||||
color: var(--mat-sys-on-error);
|
||||
font-size: 0.625rem;
|
||||
font-weight: 500;
|
||||
font-weight: var(--mat-sys-label-small-weight);
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@ button {
|
||||
|
||||
// Code
|
||||
code, pre {
|
||||
font-family: var(--mat-sys-body-large-font);
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum" on, "lnum" on;
|
||||
}
|
||||
|
||||
@@ -108,5 +108,5 @@ code, pre {
|
||||
// Disabled state - M3 uses 38% opacity
|
||||
:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
}
|
||||
|
||||
@@ -265,7 +265,7 @@
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
|
||||
&.added {
|
||||
color: #22c55e; // Success green
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
&.removed {
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
// States
|
||||
&--disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -118,8 +118,8 @@
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--mat-sys-outline);
|
||||
border-radius: var(--mat-sys-corner-medium);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 0.875rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
background: var(--mat-sys-surface);
|
||||
color: var(--mat-sys-on-surface);
|
||||
text-transform: uppercase;
|
||||
@@ -182,7 +182,7 @@
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
transition: width 0.3s ease;
|
||||
transition: width var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);
|
||||
}
|
||||
|
||||
.bar {
|
||||
@@ -53,7 +53,7 @@
|
||||
// Determinate (default)
|
||||
&.determinate {
|
||||
.bar {
|
||||
transition: width 0.4s linear;
|
||||
transition: width var(--mat-sys-motion-duration-medium4) var(--mat-sys-motion-easing-linear);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -122,19 +122,28 @@
|
||||
|
||||
&.success {
|
||||
.bar, .bar2 {
|
||||
background-color: #4caf50;
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
.buffer {
|
||||
background-color: color-mix(in srgb, #4caf50 30%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-success) 30%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.bar, .bar2 {
|
||||
background-color: #ff9800;
|
||||
background-color: var(--color-warning);
|
||||
}
|
||||
.buffer {
|
||||
background-color: color-mix(in srgb, #ff9800 30%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
.bar, .bar2 {
|
||||
background-color: var(--color-info);
|
||||
}
|
||||
.buffer {
|
||||
background-color: color-mix(in srgb, var(--color-info) 30%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -164,7 +173,7 @@
|
||||
}
|
||||
|
||||
.circle {
|
||||
transition: stroke-dashoffset 0.3s ease;
|
||||
transition: stroke-dashoffset var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
background-color: var(--mat-sys-surface-container);
|
||||
|
||||
.cell {
|
||||
font-weight: 500;
|
||||
font-weight: var(--mat-sys-label-large-weight);
|
||||
border-top: 1px solid var(--mat-sys-outline-variant);
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -300,7 +300,7 @@
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ button {
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: var(--mat-sys-body-large-font);
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum" on, "lnum" on;
|
||||
background-color: var(--mat-sys-surface-container);
|
||||
border-radius: var(--mat-sys-corner-extra-small);
|
||||
|
||||
@@ -124,7 +124,7 @@ table {
|
||||
// Disabled state - M3 uses 38% opacity for content
|
||||
:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
}
|
||||
|
||||
// Text wrapping
|
||||
@@ -134,7 +134,7 @@ p, h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
// Code blocks
|
||||
code, kbd, samp, pre {
|
||||
font-family: var(--mat-sys-body-large-font);
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum" on, "lnum" on;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
// ============================================
|
||||
|
||||
.font-mono {
|
||||
font-family: var(--mat-sys-body-large-font);
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum" on, "lnum" on;
|
||||
}
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.38;
|
||||
opacity: var(--disabled-content-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,12 +78,12 @@
|
||||
background-position: 50%;
|
||||
transform: scale(10, 10);
|
||||
opacity: 0;
|
||||
transition: transform 0.5s, opacity 1s;
|
||||
transition: transform var(--mat-sys-motion-duration-long2), opacity var(--mat-sys-motion-duration-long4);
|
||||
}
|
||||
|
||||
&:active::after {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0.12;
|
||||
opacity: var(--state-pressed-opacity);
|
||||
transition: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
@mixin mono {
|
||||
font-family: var(--mat-sys-body-large-font);
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum" on, "lnum" on; // Tabular numbers
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user