@lucasvu/scope-ui 0.1.0 → 0.1.1

package/dist/themes/theme-ui-facebook-blue.css

@@ -0,0 +1,381 @@
+/* Facebook-inspired client theme tuned around the current blue and neutral UI palette. */
+
+:root[data-client-theme='facebook-blue'] {
+  color-scheme: light;
+
+  --brand-tiger: #0866ff;
+  --brand-fire-brick: #1b74e4;
+  --brand-asphalt: #050505;
+  --brand-cobalt: #1877f2;
+  --brand-amethyst: #d8dde3;
+  --brand-canary: #e7f3ff;
+  --brand-moon-spot: #65676b;
+  --brand-lemonade: #f0f2f5;
+  --brand-blush: #f7f8fa;
+  --brand-champagne: #ffffff;
+  --brand-dolphin: #ccd0d5;
+  --brand-smoke: #e4e6eb;
+  --brand-silver: #f0f2f5;
+
+  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Helvetica, Arial, sans-serif;
+  --font-family-heading: system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-family-mono: 'SFMono-Regular', Menlo, Monaco, Consolas,
+    'Liberation Mono', monospace;
+
+  --bg: #e9ebee;
+  --surface: #ffffff;
+  --surface-strong: #e4e6eb;
+  --surface-elevated: #ffffff;
+  --grey: #e9ebee;
+  --grey-strong: #dddfe2;
+  --border: #dadde1;
+  --border-strong: #ccd0d5;
+
+  --text: #1c1e21;
+  --text-strong: #050505;
+  --muted: #65676b;
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  --accent: #0866ff;
+  --accent-soft: rgba(8, 102, 255, 0.12);
+  --accent-strong: #1b74e4;
+  --accent-2: #1877f2;
+  --danger: #dc2626;
+  --danger-soft: rgba(220, 38, 38, 0.12);
+  --success-strong: #42b72a;
+  --success-soft: rgba(66, 183, 42, 0.16);
+  --info: #1b74e4;
+  --info-soft: rgba(27, 116, 228, 0.14);
+
+  --shadow: 0 1px 2px rgba(28, 30, 33, 0.12);
+  --shadow-sm: 0 1px 1px rgba(28, 30, 33, 0.08);
+  --menu-shadow: 0 12px 28px rgba(28, 30, 33, 0.18);
+  --focus-ring: rgba(8, 102, 255, 0.18);
+
+  --confirm: 109 62% 44%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 220 20% 95%;
+  --tw-foreground: 220 8% 12%;
+  --tw-card: 0 0% 100%;
+  --tw-card-foreground: 220 8% 12%;
+  --tw-popover: 0 0% 100%;
+  --tw-popover-foreground: 220 8% 12%;
+  --tw-primary: 217 100% 52%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 220 14% 92%;
+  --tw-secondary-foreground: 220 8% 12%;
+  --tw-muted: 220 14% 92%;
+  --tw-muted-foreground: 220 5% 41%;
+  --tw-accent: 208 100% 95%;
+  --tw-accent-foreground: 220 8% 12%;
+  --tw-destructive: 0 72% 51%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 218 16% 86%;
+  --tw-input: 218 16% 86%;
+  --tw-ring: 217 100% 52%;
+  --tw-success: 109 62% 44%;
+
+  --primary: 217 100% 52%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 217 100% 52%;
+  --primary-grad-to: 214 79% 50%;
+  --primary-ring: 217 100% 52%;
+
+  --input-bg: #ffffff;
+  --input-border-main: #ccd0d5;
+  --input-border-hover: #bec3c9;
+  --input-border-focus: var(--accent);
+  --input-placeholder: #8d949e;
+  --input-error: var(--danger);
+  --input-success: var(--success-strong);
+
+  --table-head-bg: #f0f2f5;
+  --table-row-hover: #e9ebee;
+
+  --tab-track: #e4e6eb;
+  --tab-indicator: #ffffff;
+  --tab-text: #65676b;
+  --tab-text-active: #050505;
+
+  --menu-surface: #ffffff;
+  --menu-border: #d8dde3;
+  --header-glass: rgba(255, 255, 255, 0.96);
+  --header-text: #050505;
+  --header-transparent-text: #1c1e21;
+  --header-transparent-avatar-bg: #e7f3ff;
+  --header-transparent-avatar-fg: #0866ff;
+  --header-transparent-hover-bg: rgba(8, 102, 255, 0.08);
+
+  --shell-main-bg: #e9ebee;
+  --shell-hero-bg: linear-gradient(180deg, #e9ebee 0%, #f0f2f5 52%, #f7f8fa 100%);
+  --public-overlay-bg: rgba(17, 24, 39, 0.56);
+  --auth-card-bg: rgba(255, 255, 255, 0.98);
+  --card-bg: rgba(255, 255, 255, 0.99);
+  --page-title-bg: #ffffff;
+  --section-icon-bg: #e7f3ff;
+  --section-icon-fg: #0866ff;
+  --avatar-bg: #e7f3ff;
+  --avatar-fg: #0866ff;
+  --menu-item-hover-bg: #e9ebee;
+  --menu-item-active-bg: #e7f3ff;
+
+  --sidebar-bg: #ffffff;
+  --sidebar-text: #1c1e21;
+  --sidebar-foreground: #1c1e21;
+  --sidebar-active-text: #0866ff;
+  --sidebar-muted: rgba(101, 103, 107, 0.82);
+  --sidebar-icon: #65676b;
+  --sidebar-icon-active: #0866ff;
+  --sidebar-hover: rgba(8, 102, 255, 0.08);
+  --sidebar-active: #e7f3ff;
+  --sidebar-divider: rgba(204, 208, 213, 0.9);
+  --sidebar-submenu-border: rgba(8, 102, 255, 0.16);
+  --brand-badge-bg: #e7f3ff;
+  --brand-badge-fg: #0866ff;
+
+  --shell-hero-from: #e9ebee;
+  --shell-hero-mid: #f0f2f5;
+  --shell-hero-to: #e7f3ff;
+
+  --button-primary-bg: #0866ff;
+  --button-primary-fg: #ffffff;
+  --button-primary-shadow: 0 1px 2px rgba(8, 102, 255, 0.28);
+  --button-confirm-bg: #42b72a;
+  --button-confirm-fg: #ffffff;
+  --button-confirm-shadow: 0 1px 2px rgba(66, 183, 42, 0.24);
+  --button-destructive-bg: #dc2626;
+  --button-destructive-fg: #ffffff;
+  --button-destructive-shadow: 0 1px 2px rgba(220, 38, 38, 0.24);
+  --button-outline-bg: #ffffff;
+  --button-secondary-bg: #e4e6eb;
+  --button-ghost-hover-bg: #f0f2f5;
+
+  --datatable-bg: #ffffff;
+  --empty-icon-bg: #e7f3ff;
+  --empty-icon-fg: #0866ff;
+  --tabs-shadow: rgba(28, 30, 33, 0.05);
+  --tab-indicator-shadow: rgba(28, 30, 33, 0.08);
+
+  --stat-sky-bg: #e7f3ff;
+  --stat-emerald-bg: #edf8ea;
+  --stat-violet-bg: #f0f2f5;
+  --stat-rose-bg: #fff1f1;
+  --stat-icon-bg: #ffffff;
+  --icon-sky: #0866ff;
+  --icon-emerald: #42b72a;
+  --icon-violet: #4b4f56;
+  --icon-rose: #dc2626;
+
+  --switch-track-bg: #d8dde3;
+  --switch-active-bg: #0866ff;
+
+  --detail-cell-bg: #ffffff;
+  --detail-cell-hover-bg: #f7f8fa;
+  --code-card-bg: #e7f3ff;
+  --code-panel-bg: #1c1e21;
+  --code-copy-hover-bg: #2e3135;
+  --results-badge-bg: #e7f3ff;
+  --spending-card-bg: #f0f2f5;
+  --message-success-bg: #edf8ea;
+  --message-error-bg: #fff1f1;
+
+  --balance-value-color: #0866ff;
+  --spending-value-color: #050505;
+  --success-text: #2f7d1d;
+  --sidebar-active-border: rgba(8, 102, 255, 0.16);
+
+  --tone-emerald: #42b72a;
+  --tone-emerald-soft: rgba(66, 183, 42, 0.14);
+  --tone-sky: #0866ff;
+  --tone-sky-soft: rgba(8, 102, 255, 0.14);
+  --tone-violet: #4b4f56;
+  --tone-violet-soft: rgba(75, 79, 86, 0.14);
+  --tone-rose: #1b74e4;
+  --tone-rose-soft: rgba(27, 116, 228, 0.12);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='facebook-blue'] {
+  color-scheme: dark;
+
+  --brand-asphalt: #18191a;
+  --brand-cobalt: #2d88ff;
+  --brand-amethyst: #4e4f50;
+  --brand-moon-spot: #b0b3b8;
+  --brand-dolphin: #3a3b3c;
+
+  --bg: #18191a;
+  --surface: #242526;
+  --surface-strong: #303132;
+  --surface-elevated: #242526;
+  --grey: #18191a;
+  --grey-strong: #303132;
+  --border: #3a3b3c;
+  --border-strong: #4e4f50;
+
+  --text: #e4e6eb;
+  --text-strong: #f0f2f5;
+  --muted: #b0b3b8;
+
+  --accent: #2374e1;
+  --accent-soft: rgba(45, 136, 255, 0.16);
+  --accent-strong: #2d88ff;
+  --accent-2: #4599ff;
+  --danger: #ff6b6b;
+  --danger-soft: rgba(255, 107, 107, 0.16);
+  --success-strong: #42b72a;
+  --success-soft: rgba(66, 183, 42, 0.16);
+  --info: #2d88ff;
+  --info-soft: rgba(45, 136, 255, 0.18);
+
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
+  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.28);
+  --menu-shadow: 0 12px 28px rgba(0, 0, 0, 0.46);
+  --focus-ring: rgba(45, 136, 255, 0.22);
+
+  --confirm: 109 62% 44%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 220 4% 10%;
+  --tw-foreground: 220 14% 90%;
+  --tw-card: 220 3% 15%;
+  --tw-card-foreground: 220 14% 90%;
+  --tw-popover: 220 3% 15%;
+  --tw-popover-foreground: 220 14% 90%;
+  --tw-primary: 214 76% 51%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 220 2% 23%;
+  --tw-secondary-foreground: 220 14% 90%;
+  --tw-muted: 220 2% 23%;
+  --tw-muted-foreground: 220 5% 70%;
+  --tw-accent: 213 100% 59%;
+  --tw-accent-foreground: 0 0% 100%;
+  --tw-destructive: 0 100% 71%;
+  --tw-destructive-foreground: 220 4% 10%;
+  --tw-border: 220 2% 23%;
+  --tw-input: 220 2% 23%;
+  --tw-ring: 213 100% 59%;
+  --tw-success: 109 62% 44%;
+
+  --primary: 214 76% 51%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 214 76% 51%;
+  --primary-grad-to: 213 100% 59%;
+  --primary-ring: 214 76% 51%;
+
+  --input-bg: #3a3b3c;
+  --input-border-main: #4e4f50;
+  --input-border-hover: #5f6163;
+  --input-border-focus: var(--accent-strong);
+  --input-placeholder: #b0b3b8;
+  --input-error: var(--danger);
+  --input-success: var(--success-strong);
+
+  --table-head-bg: #303132;
+  --table-row-hover: #2a2b2d;
+
+  --tab-track: #303132;
+  --tab-indicator: #3a3b3c;
+  --tab-text: #b0b3b8;
+  --tab-text-active: #f0f2f5;
+
+  --menu-surface: #242526;
+  --menu-border: #3a3b3c;
+  --header-glass: rgba(36, 37, 38, 0.96);
+  --header-text: #f0f2f5;
+  --header-transparent-text: #f0f2f5;
+  --header-transparent-avatar-bg: rgba(45, 136, 255, 0.16);
+  --header-transparent-avatar-fg: #9fc8ff;
+  --header-transparent-hover-bg: rgba(255, 255, 255, 0.08);
+
+  --shell-main-bg: #18191a;
+  --shell-hero-bg: linear-gradient(180deg, #1c1d1f 0%, #18191a 58%, #121314 100%);
+  --public-overlay-bg: rgba(0, 0, 0, 0.66);
+  --auth-card-bg: rgba(36, 37, 38, 0.98);
+  --card-bg: rgba(36, 37, 38, 0.98);
+  --page-title-bg: #242526;
+  --section-icon-bg: rgba(45, 136, 255, 0.16);
+  --section-icon-fg: #9fc8ff;
+  --avatar-bg: rgba(45, 136, 255, 0.16);
+  --avatar-fg: #9fc8ff;
+  --menu-item-hover-bg: #3a3b3c;
+  --menu-item-active-bg: rgba(45, 136, 255, 0.16);
+
+  --sidebar-bg: #1c1e21;
+  --sidebar-text: #e4e6eb;
+  --sidebar-foreground: #e4e6eb;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: rgba(176, 179, 184, 0.8);
+  --sidebar-icon: #b0b3b8;
+  --sidebar-icon-active: #9fc8ff;
+  --sidebar-hover: rgba(255, 255, 255, 0.08);
+  --sidebar-active: rgba(45, 136, 255, 0.16);
+  --sidebar-divider: rgba(78, 79, 80, 0.82);
+  --sidebar-submenu-border: rgba(45, 136, 255, 0.18);
+  --brand-badge-bg: rgba(45, 136, 255, 0.16);
+  --brand-badge-fg: #9fc8ff;
+
+  --shell-hero-from: #18191a;
+  --shell-hero-mid: #242526;
+  --shell-hero-to: #2374e1;
+
+  --button-primary-bg: #2374e1;
+  --button-primary-fg: #ffffff;
+  --button-primary-shadow: 0 1px 2px rgba(35, 116, 225, 0.3);
+  --button-confirm-bg: #42b72a;
+  --button-confirm-fg: #081c05;
+  --button-confirm-shadow: 0 1px 2px rgba(66, 183, 42, 0.24);
+  --button-destructive-bg: #ff6b6b;
+  --button-destructive-fg: #18191a;
+  --button-destructive-shadow: 0 1px 2px rgba(255, 107, 107, 0.24);
+  --button-outline-bg: #242526;
+  --button-secondary-bg: #3a3b3c;
+  --button-ghost-hover-bg: rgba(255, 255, 255, 0.08);
+
+  --datatable-bg: #242526;
+  --empty-icon-bg: rgba(45, 136, 255, 0.16);
+  --empty-icon-fg: #9fc8ff;
+  --tabs-shadow: rgba(0, 0, 0, 0.24);
+  --tab-indicator-shadow: rgba(0, 0, 0, 0.28);
+
+  --stat-sky-bg: rgba(45, 136, 255, 0.14);
+  --stat-emerald-bg: rgba(66, 183, 42, 0.14);
+  --stat-violet-bg: rgba(176, 179, 184, 0.12);
+  --stat-rose-bg: rgba(255, 107, 107, 0.14);
+  --stat-icon-bg: #242526;
+  --icon-sky: #9fc8ff;
+  --icon-emerald: #72d35d;
+  --icon-violet: #d1d4d9;
+  --icon-rose: #ff9b9b;
+
+  --switch-track-bg: #4e4f50;
+  --switch-active-bg: #2374e1;
+
+  --detail-cell-bg: #242526;
+  --detail-cell-hover-bg: #303132;
+  --code-card-bg: #303132;
+  --code-panel-bg: #121314;
+  --code-copy-hover-bg: #3a3b3c;
+  --results-badge-bg: rgba(45, 136, 255, 0.16);
+  --spending-card-bg: rgba(255, 255, 255, 0.06);
+  --message-success-bg: rgba(66, 183, 42, 0.16);
+  --message-error-bg: rgba(255, 107, 107, 0.16);
+
+  --balance-value-color: #9fc8ff;
+  --spending-value-color: #f0f2f5;
+  --success-text: #72d35d;
+  --sidebar-active-border: rgba(45, 136, 255, 0.2);
+
+  --tone-emerald: #42b72a;
+  --tone-emerald-soft: rgba(66, 183, 42, 0.16);
+  --tone-sky: #2d88ff;
+  --tone-sky-soft: rgba(45, 136, 255, 0.18);
+  --tone-violet: #b0b3b8;
+  --tone-violet-soft: rgba(176, 179, 184, 0.14);
+  --tone-rose: #9fc8ff;
+  --tone-rose-soft: rgba(159, 200, 255, 0.14);
+}
+