971 lines
No EOL
55 KiB
Text
971 lines
No EOL
55 KiB
Text
// Fluent 2 Design System for Ziya Trading Platform
|
|
// Based on Microsoft Fluent 2 Design Language
|
|
// https://fluent2.microsoft.design/
|
|
|
|
// Complete Fluent UI Color System - All Themes Support
|
|
// Theme mode enumeration
|
|
export enum ColorMode { light, dark, team-light, team-dark }
|
|
|
|
export global FluentColors {
|
|
// Current theme mode
|
|
in-out property <ColorMode> current-mode: ColorMode.light;
|
|
|
|
// Theme switching callback
|
|
callback switch-theme(ColorMode);
|
|
|
|
// ===== LIGHT THEME COLORS =====
|
|
|
|
// Neutral Colors - Light
|
|
out property <color> neutral-foreground-1-light: #242424;
|
|
out property <color> neutral-foreground-2-light: #424242;
|
|
out property <color> neutral-foreground-3-light: #616161;
|
|
out property <color> neutral-foreground-4-light: #757575;
|
|
out property <color> neutral-foreground-disabled-light: #bdbdbd;
|
|
out property <color> neutral-foreground-inverted-light: #ffffff;
|
|
out property <color> neutral-foreground-inverted-2-light: #f5f5f5;
|
|
out property <color> neutral-foreground-on-brand-light: #ffffff;
|
|
out property <color> neutral-foreground-static-inverted-light: #ffffff;
|
|
out property <color> neutral-foreground-inverted-disabled-light: #ffffff;
|
|
|
|
// Interactive states - Light theme
|
|
out property <color> neutral-foreground-1-hover-light: #424242;
|
|
out property <color> neutral-foreground-1-pressed-light: #242424;
|
|
out property <color> neutral-foreground-2-hover-light: #616161;
|
|
out property <color> neutral-foreground-2-pressed-light: #424242;
|
|
out property <color> neutral-foreground-2-brand-hover-light: #0078d4;
|
|
out property <color> neutral-foreground-2-brand-pressed-light: #005a9e;
|
|
out property <color> neutral-foreground-2-brand-selected-light: #0078d4;
|
|
|
|
// Link colors - Light theme
|
|
out property <color> neutral-foreground-link-light: #0078d4;
|
|
out property <color> neutral-foreground-link-hover-light: #106ebe;
|
|
out property <color> neutral-foreground-link-pressed-light: #005a9e;
|
|
out property <color> neutral-foreground-link-selected-light: #0078d4;
|
|
|
|
out property <color> neutral-background-1-light: #ffffff;
|
|
out property <color> neutral-background-2-light: #fafafa;
|
|
out property <color> neutral-background-3-light: #f5f5f5;
|
|
out property <color> neutral-background-4-light: #f0f0f0;
|
|
out property <color> neutral-background-5-light: #ebebeb;
|
|
out property <color> neutral-background-6-light: #e1e1e1;
|
|
out property <color> neutral-background-inverted-light: #292929;
|
|
out property <color> neutral-background-static-light: #f0f0f0;
|
|
out property <color> neutral-background-alpha-light: #ffffff;
|
|
out property <color> neutral-background-alpha-2-light: #ffffff;
|
|
|
|
// Background interactive states - Light theme
|
|
out property <color> neutral-background-1-hover-light: #f5f5f5;
|
|
out property <color> neutral-background-1-pressed-light: #f0f0f0;
|
|
out property <color> neutral-background-1-selected-light: #ebebeb;
|
|
out property <color> neutral-background-2-hover-light: #f0f0f0;
|
|
out property <color> neutral-background-2-pressed-light: #ebebeb;
|
|
out property <color> neutral-background-2-selected-light: #e1e1e1;
|
|
out property <color> neutral-background-3-hover-light: #ebebeb;
|
|
out property <color> neutral-background-3-pressed-light: #e1e1e1;
|
|
out property <color> neutral-background-3-selected-light: #c7c7c7;
|
|
|
|
out property <color> neutral-stroke-1-light: #e1e1e1;
|
|
out property <color> neutral-stroke-2-light: #c7c7c7;
|
|
out property <color> neutral-stroke-3-light: #b3b3b3;
|
|
out property <color> neutral-stroke-accessible-light: #616161;
|
|
out property <color> neutral-stroke-focus-1-light: #ffffff;
|
|
out property <color> neutral-stroke-focus-2-light: #000000;
|
|
out property <color> neutral-stroke-disabled-light: #e1e1e1;
|
|
|
|
// Stroke interactive states - Light theme
|
|
out property <color> neutral-stroke-1-hover-light: #c7c7c7;
|
|
out property <color> neutral-stroke-1-pressed-light: #b3b3b3;
|
|
out property <color> neutral-stroke-1-selected-light: #b3b3b3;
|
|
out property <color> neutral-stroke-2-hover-light: #b3b3b3;
|
|
out property <color> neutral-stroke-2-pressed-light: #9e9e9e;
|
|
|
|
// ===== DARK THEME COLORS =====
|
|
|
|
// Neutral Colors - Dark
|
|
out property <color> neutral-foreground-1-dark: #ffffff;
|
|
out property <color> neutral-foreground-2-dark: #f5f5f5;
|
|
out property <color> neutral-foreground-3-dark: #ebebeb;
|
|
out property <color> neutral-foreground-4-dark: #cccccc;
|
|
out property <color> neutral-foreground-disabled-dark: #858585;
|
|
out property <color> neutral-foreground-inverted-dark: #242424;
|
|
out property <color> neutral-foreground-inverted-2-dark: #292929;
|
|
out property <color> neutral-foreground-on-brand-dark: #ffffff;
|
|
out property <color> neutral-foreground-static-inverted-dark: #ffffff;
|
|
out property <color> neutral-foreground-inverted-disabled-dark: #858585;
|
|
|
|
// Interactive states - Dark theme
|
|
out property <color> neutral-foreground-1-hover-dark: #f5f5f5;
|
|
out property <color> neutral-foreground-1-pressed-dark: #ffffff;
|
|
out property <color> neutral-foreground-2-hover-dark: #ebebeb;
|
|
out property <color> neutral-foreground-2-pressed-dark: #f5f5f5;
|
|
out property <color> neutral-foreground-2-brand-hover-dark: #62abf5;
|
|
out property <color> neutral-foreground-2-brand-pressed-dark: #77b7f7;
|
|
out property <color> neutral-foreground-2-brand-selected-dark: #479ef5;
|
|
|
|
// Link colors - Dark theme
|
|
out property <color> neutral-foreground-link-dark: #479ef5;
|
|
out property <color> neutral-foreground-link-hover-dark: #62abf5;
|
|
out property <color> neutral-foreground-link-pressed-dark: #77b7f7;
|
|
out property <color> neutral-foreground-link-selected-dark: #479ef5;
|
|
|
|
out property <color> neutral-background-1-dark: #1c1c1c;
|
|
out property <color> neutral-background-2-dark: #242424;
|
|
out property <color> neutral-background-3-dark: #292929;
|
|
out property <color> neutral-background-4-dark: #333333;
|
|
out property <color> neutral-background-5-dark: #3d3d3d;
|
|
out property <color> neutral-background-6-dark: #474747;
|
|
out property <color> neutral-background-inverted-dark: #ffffff;
|
|
out property <color> neutral-background-static-dark: #333333;
|
|
out property <color> neutral-background-alpha-dark: #1c1c1c;
|
|
out property <color> neutral-background-alpha-2-dark: #1c1c1c;
|
|
|
|
// Background interactive states - Dark theme
|
|
out property <color> neutral-background-1-hover-dark: #242424;
|
|
out property <color> neutral-background-1-pressed-dark: #292929;
|
|
out property <color> neutral-background-1-selected-dark: #333333;
|
|
out property <color> neutral-background-2-hover-dark: #292929;
|
|
out property <color> neutral-background-2-pressed-dark: #333333;
|
|
out property <color> neutral-background-2-selected-dark: #3d3d3d;
|
|
out property <color> neutral-background-3-hover-dark: #333333;
|
|
out property <color> neutral-background-3-pressed-dark: #3d3d3d;
|
|
out property <color> neutral-background-3-selected-dark: #474747;
|
|
|
|
out property <color> neutral-stroke-1-dark: #3d3d3d;
|
|
out property <color> neutral-stroke-2-dark: #525252;
|
|
out property <color> neutral-stroke-3-dark: #666666;
|
|
out property <color> neutral-stroke-accessible-dark: #cccccc;
|
|
out property <color> neutral-stroke-focus-1-dark: #ffffff;
|
|
out property <color> neutral-stroke-focus-2-dark: #000000;
|
|
out property <color> neutral-stroke-disabled-dark: #3d3d3d;
|
|
|
|
// Stroke interactive states - Dark theme
|
|
out property <color> neutral-stroke-1-hover-dark: #525252;
|
|
out property <color> neutral-stroke-1-pressed-dark: #666666;
|
|
out property <color> neutral-stroke-1-selected-dark: #666666;
|
|
out property <color> neutral-stroke-2-hover-dark: #666666;
|
|
out property <color> neutral-stroke-2-pressed-dark: #757575;
|
|
|
|
// ===== TEAM LIGHT THEME COLORS =====
|
|
|
|
// Neutral Colors - Team Light
|
|
out property <color> neutral-foreground-1-team-light: #242424;
|
|
out property <color> neutral-foreground-2-team-light: #424242;
|
|
out property <color> neutral-foreground-3-team-light: #616161;
|
|
out property <color> neutral-foreground-4-team-light: #757575;
|
|
out property <color> neutral-foreground-disabled-team-light: #bdbdbd;
|
|
out property <color> neutral-foreground-inverted-team-light: #ffffff;
|
|
out property <color> neutral-foreground-inverted-2-team-light: #f5f5f5;
|
|
out property <color> neutral-foreground-on-brand-team-light: #ffffff;
|
|
out property <color> neutral-foreground-static-inverted-team-light: #ffffff;
|
|
out property <color> neutral-foreground-inverted-disabled-team-light: #ffffff;
|
|
|
|
// Interactive states - Team Light theme
|
|
out property <color> neutral-foreground-1-hover-team-light: #424242;
|
|
out property <color> neutral-foreground-1-pressed-team-light: #242424;
|
|
out property <color> neutral-foreground-2-hover-team-light: #616161;
|
|
out property <color> neutral-foreground-2-pressed-team-light: #424242;
|
|
out property <color> neutral-foreground-2-brand-hover-team-light: #585a96;
|
|
out property <color> neutral-foreground-2-brand-pressed-team-light: #4c4e85;
|
|
out property <color> neutral-foreground-2-brand-selected-team-light: #6264a7;
|
|
|
|
// Link colors - Team Light theme
|
|
out property <color> neutral-foreground-link-team-light: #6264a7;
|
|
out property <color> neutral-foreground-link-hover-team-light: #585a96;
|
|
out property <color> neutral-foreground-link-pressed-team-light: #4c4e85;
|
|
out property <color> neutral-foreground-link-selected-team-light: #6264a7;
|
|
|
|
out property <color> neutral-background-1-team-light: #ffffff;
|
|
out property <color> neutral-background-2-team-light: #f8f8f8;
|
|
out property <color> neutral-background-3-team-light: #f3f2f1;
|
|
out property <color> neutral-background-4-team-light: #edebe9;
|
|
out property <color> neutral-background-5-team-light: #e1dfdd;
|
|
out property <color> neutral-background-6-team-light: #d2d0ce;
|
|
out property <color> neutral-background-inverted-team-light: #292929;
|
|
out property <color> neutral-background-static-team-light: #edebe9;
|
|
out property <color> neutral-background-alpha-team-light: #ffffff;
|
|
out property <color> neutral-background-alpha-2-team-light: #ffffff;
|
|
|
|
// Background interactive states - Team Light theme
|
|
out property <color> neutral-background-1-hover-team-light: #f8f8f8;
|
|
out property <color> neutral-background-1-pressed-team-light: #f3f2f1;
|
|
out property <color> neutral-background-1-selected-team-light: #edebe9;
|
|
out property <color> neutral-background-2-hover-team-light: #f3f2f1;
|
|
out property <color> neutral-background-2-pressed-team-light: #edebe9;
|
|
out property <color> neutral-background-2-selected-team-light: #e1dfdd;
|
|
out property <color> neutral-background-3-hover-team-light: #edebe9;
|
|
out property <color> neutral-background-3-pressed-team-light: #e1dfdd;
|
|
out property <color> neutral-background-3-selected-team-light: #d2d0ce;
|
|
|
|
out property <color> neutral-stroke-1-team-light: #d2d0ce;
|
|
out property <color> neutral-stroke-2-team-light: #c8c6c4;
|
|
out property <color> neutral-stroke-3-team-light: #b3b0ad;
|
|
out property <color> neutral-stroke-accessible-team-light: #605e5c;
|
|
out property <color> neutral-stroke-focus-1-team-light: #ffffff;
|
|
out property <color> neutral-stroke-focus-2-team-light: #000000;
|
|
out property <color> neutral-stroke-disabled-team-light: #d2d0ce;
|
|
|
|
// Stroke interactive states - Team Light theme
|
|
out property <color> neutral-stroke-1-hover-team-light: #c8c6c4;
|
|
out property <color> neutral-stroke-1-pressed-team-light: #b3b0ad;
|
|
out property <color> neutral-stroke-1-selected-team-light: #b3b0ad;
|
|
out property <color> neutral-stroke-2-hover-team-light: #b3b0ad;
|
|
out property <color> neutral-stroke-2-pressed-team-light: #a19f9d;
|
|
|
|
// ===== TEAM DARK THEME COLORS =====
|
|
|
|
// Neutral Colors - Team Dark
|
|
out property <color> neutral-foreground-1-team-dark: #ffffff;
|
|
out property <color> neutral-foreground-2-team-dark: #f3f2f1;
|
|
out property <color> neutral-foreground-3-team-dark: #edebe9;
|
|
out property <color> neutral-foreground-4-team-dark: #d2d0ce;
|
|
out property <color> neutral-foreground-disabled-team-dark: #8a8886;
|
|
out property <color> neutral-foreground-inverted-team-dark: #242424;
|
|
out property <color> neutral-foreground-inverted-2-team-dark: #292929;
|
|
out property <color> neutral-foreground-on-brand-team-dark: #ffffff;
|
|
out property <color> neutral-foreground-static-inverted-team-dark: #ffffff;
|
|
out property <color> neutral-foreground-inverted-disabled-team-dark: #8a8886;
|
|
|
|
// Interactive states - Team Dark theme
|
|
out property <color> neutral-foreground-1-hover-team-dark: #f3f2f1;
|
|
out property <color> neutral-foreground-1-pressed-team-dark: #ffffff;
|
|
out property <color> neutral-foreground-2-hover-team-dark: #edebe9;
|
|
out property <color> neutral-foreground-2-pressed-team-dark: #f3f2f1;
|
|
out property <color> neutral-foreground-2-brand-hover-team-dark: #9a9bd2;
|
|
out property <color> neutral-foreground-2-brand-pressed-team-dark: #a8a9db;
|
|
out property <color> neutral-foreground-2-brand-selected-team-dark: #8b8cc8;
|
|
|
|
// Link colors - Team Dark theme
|
|
out property <color> neutral-foreground-link-team-dark: #8b8cc8;
|
|
out property <color> neutral-foreground-link-hover-team-dark: #9a9bd2;
|
|
out property <color> neutral-foreground-link-pressed-team-dark: #a8a9db;
|
|
out property <color> neutral-foreground-link-selected-team-dark: #8b8cc8;
|
|
|
|
out property <color> neutral-background-1-team-dark: #252423;
|
|
out property <color> neutral-background-2-team-dark: #2d2c2b;
|
|
out property <color> neutral-background-3-team-dark: #323130;
|
|
out property <color> neutral-background-4-team-dark: #3b3a39;
|
|
out property <color> neutral-background-5-team-dark: #484644;
|
|
out property <color> neutral-background-6-team-dark: #605e5c;
|
|
out property <color> neutral-background-inverted-team-dark: #ffffff;
|
|
out property <color> neutral-background-static-team-dark: #3b3a39;
|
|
out property <color> neutral-background-alpha-team-dark: #252423;
|
|
out property <color> neutral-background-alpha-2-team-dark: #252423;
|
|
|
|
// Background interactive states - Team Dark theme
|
|
out property <color> neutral-background-1-hover-team-dark: #2d2c2b;
|
|
out property <color> neutral-background-1-pressed-team-dark: #323130;
|
|
out property <color> neutral-background-1-selected-team-dark: #3b3a39;
|
|
out property <color> neutral-background-2-hover-team-dark: #323130;
|
|
out property <color> neutral-background-2-pressed-team-dark: #3b3a39;
|
|
out property <color> neutral-background-2-selected-team-dark: #484644;
|
|
out property <color> neutral-background-3-hover-team-dark: #3b3a39;
|
|
out property <color> neutral-background-3-pressed-team-dark: #484644;
|
|
out property <color> neutral-background-3-selected-team-dark: #605e5c;
|
|
|
|
out property <color> neutral-stroke-1-team-dark: #484644;
|
|
out property <color> neutral-stroke-2-team-dark: #605e5c;
|
|
out property <color> neutral-stroke-3-team-dark: #797775;
|
|
out property <color> neutral-stroke-accessible-team-dark: #d2d0ce;
|
|
out property <color> neutral-stroke-focus-1-team-dark: #ffffff;
|
|
out property <color> neutral-stroke-focus-2-team-dark: #000000;
|
|
out property <color> neutral-stroke-disabled-team-dark: #484644;
|
|
|
|
// Stroke interactive states - Team Dark theme
|
|
out property <color> neutral-stroke-1-hover-team-dark: #605e5c;
|
|
out property <color> neutral-stroke-1-pressed-team-dark: #797775;
|
|
out property <color> neutral-stroke-1-selected-team-dark: #797775;
|
|
out property <color> neutral-stroke-2-hover-team-dark: #797775;
|
|
out property <color> neutral-stroke-2-pressed-team-dark: #8a8886;
|
|
|
|
// ===== BRAND COLORS (All Themes) =====
|
|
|
|
// Brand Colors - Light
|
|
out property <color> brand-background-1-light: #0078d4;
|
|
out property <color> brand-background-2-light: #106ebe;
|
|
out property <color> brand-background-3-light: #005a9e;
|
|
out property <color> brand-foreground-1-light: #ffffff;
|
|
out property <color> brand-foreground-2-light: #f3f2f1;
|
|
out property <color> brand-stroke-1-light: #0078d4;
|
|
out property <color> brand-stroke-2-light: #106ebe;
|
|
|
|
// Brand interactive states - Light theme
|
|
out property <color> brand-background-1-hover-light: #106ebe;
|
|
out property <color> brand-background-1-pressed-light: #005a9e;
|
|
out property <color> brand-background-1-selected-light: #0078d4;
|
|
out property <color> brand-background-2-hover-light: #005a9e;
|
|
out property <color> brand-background-2-pressed-light: #004578;
|
|
out property <color> brand-stroke-1-hover-light: #106ebe;
|
|
out property <color> brand-stroke-1-pressed-light: #005a9e;
|
|
|
|
// Brand Colors - Dark
|
|
out property <color> brand-background-1-dark: #479ef5;
|
|
out property <color> brand-background-2-dark: #62abf5;
|
|
out property <color> brand-background-3-dark: #77b7f7;
|
|
out property <color> brand-foreground-1-dark: #ffffff;
|
|
out property <color> brand-foreground-2-dark: #f3f2f1;
|
|
out property <color> brand-stroke-1-dark: #479ef5;
|
|
out property <color> brand-stroke-2-dark: #62abf5;
|
|
|
|
// Brand interactive states - Dark theme
|
|
out property <color> brand-background-1-hover-dark: #62abf5;
|
|
out property <color> brand-background-1-pressed-dark: #77b7f7;
|
|
out property <color> brand-background-1-selected-dark: #479ef5;
|
|
out property <color> brand-background-2-hover-dark: #77b7f7;
|
|
out property <color> brand-background-2-pressed-dark: #8cc8f8;
|
|
out property <color> brand-stroke-1-hover-dark: #62abf5;
|
|
out property <color> brand-stroke-1-pressed-dark: #77b7f7;
|
|
|
|
// Brand Colors - Team Light
|
|
out property <color> brand-background-1-team-light: #6264a7;
|
|
out property <color> brand-background-2-team-light: #585a96;
|
|
out property <color> brand-background-3-team-light: #4c4e85;
|
|
out property <color> brand-foreground-1-team-light: #ffffff;
|
|
out property <color> brand-foreground-2-team-light: #f3f2f1;
|
|
out property <color> brand-stroke-1-team-light: #6264a7;
|
|
out property <color> brand-stroke-2-team-light: #585a96;
|
|
|
|
// Brand interactive states - Team Light theme
|
|
out property <color> brand-background-1-hover-team-light: #585a96;
|
|
out property <color> brand-background-1-pressed-team-light: #4c4e85;
|
|
out property <color> brand-background-1-selected-team-light: #6264a7;
|
|
out property <color> brand-background-2-hover-team-light: #4c4e85;
|
|
out property <color> brand-background-2-pressed-team-light: #414374;
|
|
out property <color> brand-stroke-1-hover-team-light: #585a96;
|
|
out property <color> brand-stroke-1-pressed-team-light: #4c4e85;
|
|
|
|
// Brand Colors - Team Dark
|
|
out property <color> brand-background-1-team-dark: #8b8cc8;
|
|
out property <color> brand-background-2-team-dark: #9a9bd2;
|
|
out property <color> brand-background-3-team-dark: #a8a9db;
|
|
out property <color> brand-foreground-1-team-dark: #ffffff;
|
|
out property <color> brand-foreground-2-team-dark: #f3f2f1;
|
|
out property <color> brand-stroke-1-team-dark: #8b8cc8;
|
|
out property <color> brand-stroke-2-team-dark: #9a9bd2;
|
|
|
|
// Brand interactive states - Team Dark theme
|
|
out property <color> brand-background-1-hover-team-dark: #9a9bd2;
|
|
out property <color> brand-background-1-pressed-team-dark: #a8a9db;
|
|
out property <color> brand-background-1-selected-team-dark: #8b8cc8;
|
|
out property <color> brand-background-2-hover-team-dark: #a8a9db;
|
|
out property <color> brand-background-2-pressed-team-dark: #b6b7e4;
|
|
out property <color> brand-stroke-1-hover-team-dark: #9a9bd2;
|
|
out property <color> brand-stroke-1-pressed-team-dark: #a8a9db;
|
|
|
|
// ===== SEMANTIC COLORS (All Themes) =====
|
|
|
|
// Success Colors - All Themes
|
|
out property <color> success-background-1-light: #107c10;
|
|
out property <color> success-background-2-light: #0e6e0e;
|
|
out property <color> success-foreground-1-light: #ffffff;
|
|
out property <color> success-stroke-1-light: #107c10;
|
|
|
|
out property <color> success-background-1-dark: #54b054;
|
|
out property <color> success-background-2-dark: #6bb26b;
|
|
out property <color> success-foreground-1-dark: #ffffff;
|
|
out property <color> success-stroke-1-dark: #54b054;
|
|
|
|
out property <color> success-background-1-team-light: #237b4b;
|
|
out property <color> success-background-2-team-light: #1e6f42;
|
|
out property <color> success-foreground-1-team-light: #ffffff;
|
|
out property <color> success-stroke-1-team-light: #237b4b;
|
|
|
|
out property <color> success-background-1-team-dark: #5bb85b;
|
|
out property <color> success-background-2-team-dark: #6fc46f;
|
|
out property <color> success-foreground-1-team-dark: #ffffff;
|
|
out property <color> success-stroke-1-team-dark: #5bb85b;
|
|
|
|
// Warning Colors - All Themes
|
|
out property <color> warning-background-1-light: #fde047;
|
|
out property <color> warning-background-2-light: #facc15;
|
|
out property <color> warning-foreground-1-light: #323130;
|
|
out property <color> warning-stroke-1-light: #f7c52d;
|
|
|
|
out property <color> warning-background-1-dark: #ffb900;
|
|
out property <color> warning-background-2-dark: #ffc328;
|
|
out property <color> warning-foreground-1-dark: #323130;
|
|
out property <color> warning-stroke-1-dark: #ffb900;
|
|
|
|
out property <color> warning-background-1-team-light: #c19c00;
|
|
out property <color> warning-background-2-team-light: #a18600;
|
|
out property <color> warning-foreground-1-team-light: #ffffff;
|
|
out property <color> warning-stroke-1-team-light: #c19c00;
|
|
|
|
out property <color> warning-background-1-team-dark: #ffd43a;
|
|
out property <color> warning-background-2-team-dark: #ffda56;
|
|
out property <color> warning-foreground-1-team-dark: #323130;
|
|
out property <color> warning-stroke-1-team-dark: #ffd43a;
|
|
|
|
// Critical/Error Colors - All Themes
|
|
out property <color> critical-background-1-light: #d13438;
|
|
out property <color> critical-background-2-light: #b91c1c;
|
|
out property <color> critical-foreground-1-light: #ffffff;
|
|
out property <color> critical-stroke-1-light: #d13438;
|
|
|
|
out property <color> critical-background-1-dark: #ff6b6b;
|
|
out property <color> critical-background-2-dark: #ff8080;
|
|
out property <color> critical-foreground-1-dark: #ffffff;
|
|
out property <color> critical-stroke-1-dark: #ff6b6b;
|
|
|
|
out property <color> critical-background-1-team-light: #c50e1f;
|
|
out property <color> critical-background-2-team-light: #a80e1b;
|
|
out property <color> critical-foreground-1-team-light: #ffffff;
|
|
out property <color> critical-stroke-1-team-light: #c50e1f;
|
|
|
|
out property <color> critical-background-1-team-dark: #ff8080;
|
|
out property <color> critical-background-2-team-dark: #ff9494;
|
|
out property <color> critical-foreground-1-team-dark: #ffffff;
|
|
out property <color> critical-stroke-1-team-dark: #ff8080;
|
|
|
|
// ===== CURRENT THEME ACCESSORS =====
|
|
// These automatically switch based on current-mode
|
|
|
|
// Current Neutral Colors
|
|
out property <color> neutral-foreground-1: current-mode == ColorMode.light ? neutral-foreground-1-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-1-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-1-team-light : neutral-foreground-1-team-dark;
|
|
|
|
out property <color> neutral-foreground-2: current-mode == ColorMode.light ? neutral-foreground-2-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-2-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-2-team-light : neutral-foreground-2-team-dark;
|
|
|
|
out property <color> neutral-foreground-3: current-mode == ColorMode.light ? neutral-foreground-3-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-3-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-3-team-light : neutral-foreground-3-team-dark;
|
|
|
|
out property <color> neutral-foreground-disabled: current-mode == ColorMode.light ? neutral-foreground-disabled-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-disabled-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-disabled-team-light : neutral-foreground-disabled-team-dark;
|
|
|
|
out property <color> neutral-background-1: current-mode == ColorMode.light ? neutral-background-1-light :
|
|
current-mode == ColorMode.dark ? neutral-background-1-dark :
|
|
current-mode == ColorMode.team-light ? neutral-background-1-team-light : neutral-background-1-team-dark;
|
|
|
|
out property <color> neutral-background-2: current-mode == ColorMode.light ? neutral-background-2-light :
|
|
current-mode == ColorMode.dark ? neutral-background-2-dark :
|
|
current-mode == ColorMode.team-light ? neutral-background-2-team-light : neutral-background-2-team-dark;
|
|
|
|
out property <color> neutral-background-3: current-mode == ColorMode.light ? neutral-background-3-light :
|
|
current-mode == ColorMode.dark ? neutral-background-3-dark :
|
|
current-mode == ColorMode.team-light ? neutral-background-3-team-light : neutral-background-3-team-dark;
|
|
|
|
out property <color> neutral-background-4: current-mode == ColorMode.light ? neutral-background-4-light :
|
|
current-mode == ColorMode.dark ? neutral-background-4-dark :
|
|
current-mode == ColorMode.team-light ? neutral-background-4-team-light : neutral-background-4-team-dark;
|
|
|
|
out property <color> neutral-stroke-1: current-mode == ColorMode.light ? neutral-stroke-1-light :
|
|
current-mode == ColorMode.dark ? neutral-stroke-1-dark :
|
|
current-mode == ColorMode.team-light ? neutral-stroke-1-team-light : neutral-stroke-1-team-dark;
|
|
|
|
out property <color> neutral-stroke-2: current-mode == ColorMode.light ? neutral-stroke-2-light :
|
|
current-mode == ColorMode.dark ? neutral-stroke-2-dark :
|
|
current-mode == ColorMode.team-light ? neutral-stroke-2-team-light : neutral-stroke-2-team-dark;
|
|
|
|
out property <color> neutral-stroke-accessible: current-mode == ColorMode.light ? neutral-stroke-accessible-light :
|
|
current-mode == ColorMode.dark ? neutral-stroke-accessible-dark :
|
|
current-mode == ColorMode.team-light ? neutral-stroke-accessible-team-light : neutral-stroke-accessible-team-dark;
|
|
|
|
// Current Interactive States
|
|
out property <color> neutral-foreground-1-hover: current-mode == ColorMode.light ? neutral-foreground-1-hover-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-1-hover-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-1-hover-team-light : neutral-foreground-1-hover-team-dark;
|
|
|
|
out property <color> neutral-foreground-2-brand-hover: current-mode == ColorMode.light ? neutral-foreground-2-brand-hover-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-2-brand-hover-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-2-brand-hover-team-light : neutral-foreground-2-brand-hover-team-dark;
|
|
|
|
// Current Link Colors
|
|
out property <color> neutral-foreground-link: current-mode == ColorMode.light ? neutral-foreground-link-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-link-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-link-team-light : neutral-foreground-link-team-dark;
|
|
|
|
out property <color> neutral-foreground-link-hover: current-mode == ColorMode.light ? neutral-foreground-link-hover-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-link-hover-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-link-hover-team-light : neutral-foreground-link-hover-team-dark;
|
|
|
|
out property <color> neutral-foreground-link-pressed: current-mode == ColorMode.light ? neutral-foreground-link-pressed-light :
|
|
current-mode == ColorMode.dark ? neutral-foreground-link-pressed-dark :
|
|
current-mode == ColorMode.team-light ? neutral-foreground-link-pressed-team-light : neutral-foreground-link-pressed-team-dark;
|
|
|
|
// Current Background Interactive States
|
|
out property <color> neutral-background-1-hover: current-mode == ColorMode.light ? neutral-background-1-hover-light :
|
|
current-mode == ColorMode.dark ? neutral-background-1-hover-dark :
|
|
current-mode == ColorMode.team-light ? neutral-background-1-hover-team-light : neutral-background-1-hover-team-dark;
|
|
|
|
out property <color> neutral-background-1-pressed: current-mode == ColorMode.light ? neutral-background-1-pressed-light :
|
|
current-mode == ColorMode.dark ? neutral-background-1-pressed-dark :
|
|
current-mode == ColorMode.team-light ? neutral-background-1-pressed-team-light : neutral-background-1-pressed-team-dark;
|
|
|
|
// Current Stroke Interactive States
|
|
out property <color> neutral-stroke-1-hover: current-mode == ColorMode.light ? neutral-stroke-1-hover-light :
|
|
current-mode == ColorMode.dark ? neutral-stroke-1-hover-dark :
|
|
current-mode == ColorMode.team-light ? neutral-stroke-1-hover-team-light : neutral-stroke-1-hover-team-dark;
|
|
|
|
out property <color> neutral-stroke-1-pressed: current-mode == ColorMode.light ? neutral-stroke-1-pressed-light :
|
|
current-mode == ColorMode.dark ? neutral-stroke-1-pressed-dark :
|
|
current-mode == ColorMode.team-light ? neutral-stroke-1-pressed-team-light : neutral-stroke-1-pressed-team-dark;
|
|
|
|
// Current Brand Colors
|
|
out property <color> brand-background-1: current-mode == ColorMode.light ? brand-background-1-light :
|
|
current-mode == ColorMode.dark ? brand-background-1-dark :
|
|
current-mode == ColorMode.team-light ? brand-background-1-team-light : brand-background-1-team-dark;
|
|
|
|
out property <color> brand-background-2: current-mode == ColorMode.light ? brand-background-2-light :
|
|
current-mode == ColorMode.dark ? brand-background-2-dark :
|
|
current-mode == ColorMode.team-light ? brand-background-2-team-light : brand-background-2-team-dark;
|
|
|
|
out property <color> brand-foreground-1: current-mode == ColorMode.light ? brand-foreground-1-light :
|
|
current-mode == ColorMode.dark ? brand-foreground-1-dark :
|
|
current-mode == ColorMode.team-light ? brand-foreground-1-team-light : brand-foreground-1-team-dark;
|
|
|
|
// Current Brand Interactive States
|
|
out property <color> brand-background-1-hover: current-mode == ColorMode.light ? brand-background-1-hover-light :
|
|
current-mode == ColorMode.dark ? brand-background-1-hover-dark :
|
|
current-mode == ColorMode.team-light ? brand-background-1-hover-team-light : brand-background-1-hover-team-dark;
|
|
|
|
out property <color> brand-background-1-pressed: current-mode == ColorMode.light ? brand-background-1-pressed-light :
|
|
current-mode == ColorMode.dark ? brand-background-1-pressed-dark :
|
|
current-mode == ColorMode.team-light ? brand-background-1-pressed-team-light : brand-background-1-pressed-team-dark;
|
|
|
|
// Current Semantic Colors
|
|
out property <color> success-background-1: current-mode == ColorMode.light ? success-background-1-light :
|
|
current-mode == ColorMode.dark ? success-background-1-dark :
|
|
current-mode == ColorMode.team-light ? success-background-1-team-light : success-background-1-team-dark;
|
|
|
|
out property <color> warning-background-1: current-mode == ColorMode.light ? warning-background-1-light :
|
|
current-mode == ColorMode.dark ? warning-background-1-dark :
|
|
current-mode == ColorMode.team-light ? warning-background-1-team-light : warning-background-1-team-dark;
|
|
|
|
out property <color> critical-background-1: current-mode == ColorMode.light ? critical-background-1-light :
|
|
current-mode == ColorMode.dark ? critical-background-1-dark :
|
|
current-mode == ColorMode.team-light ? critical-background-1-team-light : critical-background-1-team-dark;
|
|
|
|
// Legacy compatibility and Trading-specific colors
|
|
out property <color> neutral-foreground-rest: neutral-foreground-1;
|
|
out property <color> profit-green: success-background-1;
|
|
out property <color> loss-red: critical-background-1;
|
|
out property <color> neutral-gray: neutral-foreground-3;
|
|
|
|
// Accent colors for trading UI
|
|
out property <color> accent-purple: #f000b8;
|
|
out property <color> accent-teal: #37cdbe;
|
|
out property <color> accent-blue: brand-background-1;
|
|
}
|
|
|
|
// Typography System - Official Fluent 2 Typography Tokens
|
|
// Based on: https://fluent2.microsoft.design/typography
|
|
export global FluentTypography {
|
|
// ===== FLUENT FONT STACKS =====
|
|
// Segoe - unmistakably Microsoft (Primary Web/Windows font stack)
|
|
out property <string> font-family-base: "Segoe UI Variable, Segoe UI, system-ui, sans-serif";
|
|
out property <string> font-family-web: "Segoe UI Variable, Segoe UI, system-ui, sans-serif";
|
|
out property <string> font-family-windows: "Segoe UI Variable, Segoe UI, system-ui, sans-serif";
|
|
|
|
// Platform-specific native font stacks for cross-platform consistency
|
|
out property <string> font-family-macos: "SF Pro Display, SF Pro Text, system-ui, sans-serif";
|
|
out property <string> font-family-ios: "SF Pro Display, SF Pro Text, system-ui, sans-serif";
|
|
out property <string> font-family-android: "Roboto, system-ui, sans-serif";
|
|
|
|
// Specialized font families
|
|
out property <string> font-family-monospace: "Cascadia Code, Cascadia Mono, Consolas, Courier New, monospace";
|
|
out property <string> font-family-numeric: "Bahnschrift, Segoe UI Variable, Segoe UI, system-ui, sans-serif";
|
|
|
|
// ===== FONT WEIGHTS - Fluent 2 Weight Scale =====
|
|
out property <int> font-weight-regular: 400; // Regular
|
|
out property <int> font-weight-medium: 500; // Medium (Android)
|
|
out property <int> font-weight-semibold: 600; // Semibold
|
|
out property <int> font-weight-bold: 700; // Bold
|
|
|
|
// ===== WEB TYPE RAMP - Official Fluent 2 Web Typography =====
|
|
// Caption styles
|
|
out property <length> font-size-caption-2: 10px; // Caption 2
|
|
out property <length> line-height-caption-2: 14px;
|
|
out property <int> font-weight-caption-2: font-weight-regular;
|
|
out property <int> font-weight-caption-2-strong: font-weight-semibold;
|
|
|
|
out property <length> font-size-caption-1: 12px; // Caption 1
|
|
out property <length> line-height-caption-1: 16px;
|
|
out property <int> font-weight-caption-1: font-weight-regular;
|
|
out property <int> font-weight-caption-1-strong: font-weight-semibold;
|
|
out property <int> font-weight-caption-1-stronger: font-weight-bold;
|
|
|
|
// Body styles
|
|
out property <length> font-size-body-1: 14px; // Body 1 (Default)
|
|
out property <length> line-height-body-1: 20px;
|
|
out property <int> font-weight-body-1: font-weight-regular;
|
|
out property <int> font-weight-body-1-strong: font-weight-semibold;
|
|
out property <int> font-weight-body-1-stronger: font-weight-bold;
|
|
|
|
// Subtitle styles
|
|
out property <length> font-size-subtitle-2: 16px; // Subtitle 2
|
|
out property <length> line-height-subtitle-2: 22px;
|
|
out property <int> font-weight-subtitle-2: font-weight-semibold;
|
|
out property <int> font-weight-subtitle-2-stronger: font-weight-bold;
|
|
|
|
out property <length> font-size-subtitle-1: 20px; // Subtitle 1
|
|
out property <length> line-height-subtitle-1: 26px;
|
|
out property <int> font-weight-subtitle-1: font-weight-semibold;
|
|
|
|
// Title styles
|
|
out property <length> font-size-title-3: 24px; // Title 3
|
|
out property <length> line-height-title-3: 32px;
|
|
out property <int> font-weight-title-3: font-weight-semibold;
|
|
|
|
out property <length> font-size-title-2: 28px; // Title 2
|
|
out property <length> line-height-title-2: 36px;
|
|
out property <int> font-weight-title-2: font-weight-semibold;
|
|
|
|
out property <length> font-size-title-1: 32px; // Title 1
|
|
out property <length> line-height-title-1: 40px;
|
|
out property <int> font-weight-title-1: font-weight-semibold;
|
|
|
|
// Large title and display
|
|
out property <length> font-size-large-title: 40px; // Large Title
|
|
out property <length> line-height-large-title: 52px;
|
|
out property <int> font-weight-large-title: font-weight-semibold;
|
|
|
|
out property <length> font-size-display: 68px; // Display
|
|
out property <length> line-height-display: 92px;
|
|
out property <int> font-weight-display: font-weight-semibold;
|
|
|
|
// ===== WINDOWS TYPE RAMP - Official Fluent 2 Windows Typography =====
|
|
// Windows-specific variants using Segoe UI Variable
|
|
out property <length> font-size-windows-caption: 12px; // Caption
|
|
out property <length> line-height-windows-caption: 16px;
|
|
out property <int> font-weight-windows-caption: font-weight-regular;
|
|
|
|
out property <length> font-size-windows-body: 14px; // Body
|
|
out property <length> line-height-windows-body: 20px;
|
|
out property <int> font-weight-windows-body: font-weight-regular;
|
|
out property <int> font-weight-windows-body-strong: font-weight-semibold;
|
|
|
|
out property <length> font-size-windows-body-large: 18px; // Body Large
|
|
out property <length> line-height-windows-body-large: 24px;
|
|
out property <int> font-weight-windows-body-large: font-weight-regular;
|
|
|
|
out property <length> font-size-windows-subtitle: 20px; // Subtitle
|
|
out property <length> line-height-windows-subtitle: 28px;
|
|
out property <int> font-weight-windows-subtitle: font-weight-semibold;
|
|
|
|
out property <length> font-size-windows-title: 28px; // Title
|
|
out property <length> line-height-windows-title: 36px;
|
|
out property <int> font-weight-windows-title: font-weight-semibold;
|
|
|
|
out property <length> font-size-windows-large-title: 40px; // Large Title
|
|
out property <length> line-height-windows-large-title: 52px;
|
|
out property <int> font-weight-windows-large-title: font-weight-semibold;
|
|
|
|
out property <length> font-size-windows-display: 68px; // Display
|
|
out property <length> line-height-windows-display: 92px;
|
|
out property <int> font-weight-windows-display: font-weight-semibold;
|
|
|
|
// ===== LEGACY NUMERIC TOKENS - For backward compatibility =====
|
|
out property <length> font-size-100: font-size-caption-2; // 10px
|
|
out property <length> font-size-200: font-size-caption-1; // 12px
|
|
out property <length> font-size-300: font-size-body-1; // 14px
|
|
out property <length> font-size-400: font-size-subtitle-2; // 16px
|
|
out property <length> font-size-500: 18px; // Custom
|
|
out property <length> font-size-600: font-size-subtitle-1; // 20px
|
|
out property <length> font-size-700: font-size-title-3; // 24px
|
|
out property <length> font-size-800: font-size-title-2; // 28px
|
|
out property <length> font-size-900: font-size-title-1; // 32px
|
|
out property <length> font-size-1000: font-size-large-title; // 40px
|
|
out property <length> font-size-1100: 48px; // Custom Large
|
|
out property <length> font-size-1200: font-size-display; // 68px
|
|
|
|
out property <length> line-height-100: line-height-caption-2; // 14px
|
|
out property <length> line-height-200: line-height-caption-1; // 16px
|
|
out property <length> line-height-300: line-height-body-1; // 20px
|
|
out property <length> line-height-400: line-height-subtitle-2; // 22px
|
|
out property <length> line-height-500: 24px; // Custom
|
|
out property <length> line-height-600: line-height-subtitle-1; // 26px
|
|
out property <length> line-height-700: line-height-title-3; // 32px
|
|
out property <length> line-height-800: line-height-title-2; // 36px
|
|
out property <length> line-height-900: line-height-title-1; // 40px
|
|
out property <length> line-height-1000: line-height-large-title; // 52px
|
|
out property <length> line-height-1100: 60px; // Custom
|
|
out property <length> line-height-1200: line-height-display; // 92px
|
|
|
|
// ===== TEXT STYLING UTILITIES =====
|
|
// Letter spacing for fine typography control
|
|
out property <length> letter-spacing-tight: -0.16px; // For large text
|
|
out property <length> letter-spacing-normal: 0px; // Standard
|
|
out property <length> letter-spacing-wide: 0.32px; // For small text
|
|
|
|
// Text decoration
|
|
out property <string> text-decoration-none: "none";
|
|
out property <string> text-decoration-underline: "underline";
|
|
out property <string> text-decoration-line-through: "line-through";
|
|
|
|
// Text transform (following Fluent guidance for sentence case)
|
|
out property <string> text-transform-none: "none";
|
|
out property <string> text-transform-uppercase: "uppercase";
|
|
out property <string> text-transform-lowercase: "lowercase";
|
|
out property <string> text-transform-capitalize: "capitalize";
|
|
|
|
// ===== USAGE EXAMPLES =====
|
|
// Caption 2: font-size: FluentTypography.font-size-caption-2; line-height: FluentTypography.line-height-caption-2; font-weight: FluentTypography.font-weight-caption-2;
|
|
// Body 1: font-size: FluentTypography.font-size-body-1; line-height: FluentTypography.line-height-body-1; font-weight: FluentTypography.font-weight-body-1;
|
|
// Title 1: font-size: FluentTypography.font-size-title-1; line-height: FluentTypography.line-height-title-1; font-weight: FluentTypography.font-weight-title-1;
|
|
// Display: font-size: FluentTypography.font-size-display; line-height: FluentTypography.line-height-display; font-weight: FluentTypography.font-weight-display;
|
|
}
|
|
|
|
// Spacing System - Fluent 2 Spacing Scale
|
|
export global FluentSpacing {
|
|
out property <length> space-2: 2px;
|
|
out property <length> space-4: 4px;
|
|
out property <length> space-6: 6px;
|
|
out property <length> space-8: 8px;
|
|
out property <length> space-10: 10px;
|
|
out property <length> space-12: 12px;
|
|
out property <length> space-16: 16px;
|
|
out property <length> space-20: 20px;
|
|
out property <length> space-24: 24px;
|
|
out property <length> space-28: 28px;
|
|
out property <length> space-32: 32px;
|
|
out property <length> space-36: 36px;
|
|
out property <length> space-40: 40px;
|
|
out property <length> space-48: 48px;
|
|
out property <length> space-64: 64px;
|
|
out property <length> space-80: 80px;
|
|
out property <length> space-96: 96px;
|
|
out property <length> space-120: 120px;
|
|
}
|
|
|
|
// Border Radius - Complete Fluent UI Border Radius System
|
|
export global FluentRadius {
|
|
// Corner Radius Scale
|
|
out property <length> border-radius-none: 0px;
|
|
out property <length> border-radius-small: 2px;
|
|
out property <length> border-radius-medium: 4px;
|
|
out property <length> border-radius-large: 6px;
|
|
out property <length> border-radius-x-large: 8px;
|
|
out property <length> border-radius-circular: 10000px;
|
|
|
|
// Legacy support
|
|
out property <length> radius-none: 0px;
|
|
out property <length> radius-small: 2px;
|
|
out property <length> radius-medium: 4px;
|
|
out property <length> radius-large: 6px;
|
|
out property <length> radius-xlarge: 8px;
|
|
out property <length> radius-circular: 10000px;
|
|
}
|
|
|
|
// Shadows - Complete Fluent UI Shadow System
|
|
// Based on: https://react.fluentui.dev/?path=/docs/theme-shadows--docs
|
|
export global FluentShadows {
|
|
// ===== SHADOW BRAND TOKENS =====
|
|
// These are the primary shadow tokens used throughout Fluent UI
|
|
|
|
// Shadow 2 - Subtle elevation (tooltips, dropdowns)
|
|
out property <length> shadow-2-x: 0px;
|
|
out property <length> shadow-2-y: 1px;
|
|
out property <length> shadow-2-blur: 2px;
|
|
out property <length> shadow-2-spread: 0px;
|
|
out property <color> shadow-2-color: #00000014; // 8% opacity black
|
|
|
|
// Shadow 4 - Low elevation (cards, buttons)
|
|
out property <length> shadow-4-x: 0px;
|
|
out property <length> shadow-4-y: 2px;
|
|
out property <length> shadow-4-blur: 4px;
|
|
out property <length> shadow-4-spread: 0px;
|
|
out property <color> shadow-4-color: #0000001f; // 12% opacity black
|
|
|
|
// Shadow 8 - Medium elevation (dialogs, menus)
|
|
out property <length> shadow-8-x: 0px;
|
|
out property <length> shadow-8-y: 4px;
|
|
out property <length> shadow-8-blur: 8px;
|
|
out property <length> shadow-8-spread: 0px;
|
|
out property <color> shadow-8-color: #0000001f; // 12% opacity black
|
|
|
|
// Shadow 16 - High elevation (modals, flyouts)
|
|
out property <length> shadow-16-x: 0px;
|
|
out property <length> shadow-16-y: 8px;
|
|
out property <length> shadow-16-blur: 16px;
|
|
out property <length> shadow-16-spread: 0px;
|
|
out property <color> shadow-16-color: #00000024; // 14% opacity black
|
|
|
|
// Shadow 28 - Very high elevation (teaching callouts)
|
|
out property <length> shadow-28-x: 0px;
|
|
out property <length> shadow-28-y: 14px;
|
|
out property <length> shadow-28-blur: 28px;
|
|
out property <length> shadow-28-spread: 0px;
|
|
out property <color> shadow-28-color: #00000024; // 14% opacity black
|
|
|
|
// Shadow 64 - Maximum elevation (panels, navigation)
|
|
out property <length> shadow-64-x: 0px;
|
|
out property <length> shadow-64-y: 32px;
|
|
out property <length> shadow-64-blur: 64px;
|
|
out property <length> shadow-64-spread: 0px;
|
|
out property <color> shadow-64-color: #00000033; // 20% opacity black
|
|
|
|
// ===== THEME-AWARE SHADOW COLORS =====
|
|
// Light theme shadow colors
|
|
out property <color> shadow-light-ambient: #0000000f; // 6% opacity black
|
|
out property <color> shadow-light-key: #00000014; // 8% opacity black
|
|
out property <color> shadow-light-ambient-darker: #00000014; // 8% opacity black
|
|
out property <color> shadow-light-key-darker: #0000001f; // 12% opacity black
|
|
out property <color> shadow-light-ambient-darkest: #0000001f; // 12% opacity black
|
|
out property <color> shadow-light-key-darkest: #00000024; // 14% opacity black
|
|
|
|
// Dark theme shadow colors
|
|
out property <color> shadow-dark-ambient: #0000001f; // 12% opacity black
|
|
out property <color> shadow-dark-key: #00000024; // 14% opacity black
|
|
out property <color> shadow-dark-ambient-darker: #00000024; // 14% opacity black
|
|
out property <color> shadow-dark-key-darker: #00000033; // 20% opacity black
|
|
out property <color> shadow-dark-ambient-darkest: #00000033; // 20% opacity black
|
|
out property <color> shadow-dark-key-darkest: #00000047; // 28% opacity black
|
|
|
|
// ===== SPECIALIZED SHADOW TOKENS =====
|
|
// Brand shadow (with brand color tint)
|
|
out property <length> shadow-brand-x: 0px;
|
|
out property <length> shadow-brand-y: 2px;
|
|
out property <length> shadow-brand-blur: 8px;
|
|
out property <length> shadow-brand-spread: 0px;
|
|
out property <color> shadow-brand-color: #0078d414; // Brand blue with 8% opacity
|
|
|
|
// Inset shadow (for pressed states)
|
|
out property <length> shadow-inset-x: 0px;
|
|
out property <length> shadow-inset-y: 1px;
|
|
out property <length> shadow-inset-blur: 2px;
|
|
out property <length> shadow-inset-spread: 0px;
|
|
out property <color> shadow-inset-color: #0000001f; // 12% opacity black
|
|
|
|
// Focus shadow (for accessibility)
|
|
out property <length> shadow-focus-x: 0px;
|
|
out property <length> shadow-focus-y: 0px;
|
|
out property <length> shadow-focus-blur: 0px;
|
|
out property <length> shadow-focus-spread: 2px;
|
|
out property <color> shadow-focus-color: #0078d4; // Brand blue
|
|
|
|
// ===== COMPONENT-SPECIFIC SHADOW TOKENS =====
|
|
// Button shadows
|
|
out property <color> shadow-button-rest: shadow-2-color;
|
|
out property <color> shadow-button-hover: shadow-4-color;
|
|
out property <color> shadow-button-pressed: shadow-inset-color;
|
|
|
|
// Card shadows
|
|
out property <color> shadow-card-rest: shadow-4-color;
|
|
out property <color> shadow-card-hover: shadow-8-color;
|
|
|
|
// Dialog shadows
|
|
out property <color> shadow-dialog: shadow-64-color;
|
|
|
|
// Flyout shadows
|
|
out property <color> shadow-flyout: shadow-16-color;
|
|
|
|
// Tooltip shadows
|
|
out property <color> shadow-tooltip: shadow-8-color;
|
|
|
|
// ===== LEGACY SHADOW SUPPORT =====
|
|
// Note: shadow-*-blur properties are already defined above in the main shadow tokens
|
|
// They can be used directly for backward compatibility
|
|
|
|
// ===== SHADOW UTILITY FUNCTIONS =====
|
|
// Helper properties for common shadow combinations
|
|
|
|
// Subtle shadow (for subtle elevation)
|
|
out property <length> subtle-shadow-x: shadow-2-x;
|
|
out property <length> subtle-shadow-y: shadow-2-y;
|
|
out property <length> subtle-shadow-blur: shadow-2-blur;
|
|
out property <color> subtle-shadow-color: shadow-2-color;
|
|
|
|
// Default shadow (for standard elevation)
|
|
out property <length> default-shadow-x: shadow-4-x;
|
|
out property <length> default-shadow-y: shadow-4-y;
|
|
out property <length> default-shadow-blur: shadow-4-blur;
|
|
out property <color> default-shadow-color: shadow-4-color;
|
|
|
|
// Deep shadow (for high elevation)
|
|
out property <length> deep-shadow-x: shadow-16-x;
|
|
out property <length> deep-shadow-y: shadow-16-y;
|
|
out property <length> deep-shadow-blur: shadow-16-blur;
|
|
out property <color> deep-shadow-color: shadow-16-color;
|
|
|
|
// ===== USAGE NOTES =====
|
|
// To apply shadows in components, use the individual tokens:
|
|
// Example: Rectangle { drop-shadow-offset-x: FluentShadows.shadow-4-x; drop-shadow-offset-y: FluentShadows.shadow-4-y; drop-shadow-blur: FluentShadows.shadow-4-blur; drop-shadow-color: FluentShadows.shadow-4-color; }
|
|
// For focus states: Rectangle { border-width: FluentShadows.shadow-focus-spread; border-color: FluentShadows.shadow-focus-color; }
|
|
}
|
|
|
|
// Component Tokens - Fluent 2 Component Specifications
|
|
export global FluentComponents {
|
|
// Button
|
|
out property <length> button-height-small: 24px;
|
|
out property <length> button-height-medium: 32px;
|
|
out property <length> button-height-large: 40px;
|
|
out property <length> button-padding-horizontal: 16px;
|
|
out property <length> button-border-radius: FluentRadius.border-radius-medium;
|
|
|
|
// Input
|
|
out property <length> input-height: 32px;
|
|
out property <length> input-padding-horizontal: 12px;
|
|
out property <length> input-border-radius: FluentRadius.border-radius-medium;
|
|
out property <length> input-border-width: 1px;
|
|
|
|
// Card
|
|
out property <length> card-padding: FluentSpacing.space-16;
|
|
out property <length> card-border-radius: FluentRadius.border-radius-large;
|
|
out property <length> card-border-width: 1px;
|
|
|
|
// Navigation
|
|
out property <length> nav-item-height: 40px;
|
|
out property <length> nav-item-padding: FluentSpacing.space-12;
|
|
out property <length> nav-item-border-radius: FluentRadius.border-radius-medium;
|
|
|
|
// Title Bar
|
|
out property <length> titlebar-height: 32px;
|
|
out property <length> titlebar-button-width: 46px;
|
|
|
|
// Sidebar
|
|
out property <length> sidebar-width: 280px;
|
|
out property <length> sidebar-collapsed-width: 48px;
|
|
}
|
|
|
|
// Animation & Motion - Fluent 2 Motion System
|
|
export global FluentMotion {
|
|
out property <duration> duration-ultra-fast: 50ms;
|
|
out property <duration> duration-faster: 100ms;
|
|
out property <duration> duration-fast: 150ms;
|
|
out property <duration> duration-normal: 200ms;
|
|
out property <duration> duration-slow: 300ms;
|
|
out property <duration> duration-slower: 400ms;
|
|
out property <duration> duration-ultra-slow: 500ms;
|
|
|
|
// Easing curves (represented as animation properties)
|
|
out property <easing> ease-accelerate: ease-in;
|
|
out property <easing> ease-decelerate: ease-out;
|
|
out property <easing> ease-standard: ease-in-out;
|
|
out property <easing> ease-max: ease;
|
|
}
|
|
|
|
// Layout Grid - Fluent 2 Layout System
|
|
export global FluentLayout {
|
|
// Breakpoints
|
|
out property <length> breakpoint-small: 480px;
|
|
out property <length> breakpoint-medium: 768px;
|
|
out property <length> breakpoint-large: 1024px;
|
|
out property <length> breakpoint-xlarge: 1440px;
|
|
|
|
// Container max widths
|
|
out property <length> container-small: 640px;
|
|
out property <length> container-medium: 768px;
|
|
out property <length> container-large: 1024px;
|
|
out property <length> container-xlarge: 1280px;
|
|
|
|
// Grid
|
|
out property <length> grid-gutter: FluentSpacing.space-24;
|
|
out property <int> grid-columns: 12;
|
|
}
|
|
|
|
// Z-Index Scale
|
|
export global FluentLayers {
|
|
out property <int> layer-base: 0;
|
|
out property <int> layer-dropdown: 1000;
|
|
out property <int> layer-sticky: 1020;
|
|
out property <int> layer-banner: 1030;
|
|
out property <int> layer-overlay: 1040;
|
|
out property <int> layer-modal: 1050;
|
|
out property <int> layer-popover: 1060;
|
|
out property <int> layer-tooltip: 1070;
|
|
out property <int> layer-toast: 1080;
|
|
} |