From dfa2782db6ab2a0a2d9c5a5d3475f3b15e0f33a2 Mon Sep 17 00:00:00 2001 From: lingniu Date: Mon, 20 Jul 2026 02:56:13 +0800 Subject: [PATCH] feat(web): converge workspace identity themes --- design-qa.md | 99 +++++----- .../apps/web/src/v2/pages/AlertsPage.tsx | 1 + .../apps/web/src/v2/pages/OperationsPage.tsx | 1 + .../apps/web/src/v2/pages/UsersPage.tsx | 1 + .../v2/shared/WorkspaceCommandBar.test.tsx | 18 +- .../web/src/v2/shared/WorkspaceCommandBar.tsx | 11 +- .../apps/web/src/v2/styles/workspace.css | 176 +++++++++--------- 7 files changed, 165 insertions(+), 142 deletions(-) diff --git a/design-qa.md b/design-qa.md index 2f8cec8e..6422133d 100644 --- a/design-qa.md +++ b/design-qa.md @@ -1,80 +1,81 @@ -# Access Management Semi UI Design QA +# Vehicle Data Platform Semi UI System QA ## Evidence -- Accepted visual direction: `/tmp/semi-ui-reference-1440.png`. -- Existing flow baseline: `/tmp/access-before-desktop.jpg`. -- Final desktop implementation: `/tmp/access-after-desktop-final.jpg`. -- Final mobile queue: `/tmp/access-after-mobile-visible.jpg`. -- Final mobile evidence sheet: `/tmp/access-after-mobile-detail.jpg`. -- Final mobile governance sheet: `/tmp/access-after-mobile-governance.jpg`. -- Final mobile filter sheet: `/tmp/access-after-mobile-filter.jpg`. -- System comparison: `/tmp/semi-access-design-comparison.jpg`. -- Same-route comparison: `/tmp/access-before-after-comparison.jpg`. -- Desktop viewport and state: 1280 × 720, all authoritative vehicles, no row selected. -- Mobile viewport and states: 390 × 844, queue, filter, vehicle evidence and governance SideSheets. +- Accepted source truth: the production application immediately before shared identity convergence. +- Desktop source contact sheet: `.codex-audit/semi-system-20260720/desktop-all-routes-before-normalized.png`. +- Desktop implementation contact sheet: `.codex-audit/semi-system-20260720/desktop-all-routes-after-contact.png`. +- Desktop same-state comparison: `.codex-audit/semi-system-20260720/desktop-before-after-comparison.png`. +- Mobile source contact sheet: `.codex-audit/semi-system-20260720/mobile-all-routes-before-normalized.png`. +- Mobile implementation contact sheet: `.codex-audit/semi-system-20260720/mobile-all-routes-after-contact.png`. +- Mobile same-state comparison: `.codex-audit/semi-system-20260720/mobile-before-after-comparison.png`. +- Desktop viewport and state: 1280 × 720, authenticated administrator, default route state. +- Mobile viewport and state: 390 × 844, authenticated administrator, default route state. +- Audited routes: `/monitor`, `/vehicles`, `/tracks`, `/history`, `/statistics`, `/alerts`, `/access`, `/users`, `/operations`. +- Production release: `semi-system-audit-20260720025208`. ## Full-view comparison -The final access workspace retains the accepted Semi UI skeleton: persistent navigation, white operational surfaces, cool-gray canvas, compact filters, restrained semantic colors, one dominant data list and on-demand SideSheets. +All nine primary routes retain the accepted product grammar: persistent desktop navigation, mobile bottom navigation, cool-gray canvas, white operational surfaces, compact filters, restrained semantic color and data-first content density. Maps remain dominant on monitoring and replay; tables or queues remain dominant on the remaining workspaces. -The primary hierarchy changed from vehicle → brand/model → protocols → difference to vehicle → difference conclusion → protocols → brand/model. The actionable conclusion is now always adjacent to the vehicle and remains fixed during horizontal table movement. The 1280px state has no page or table overflow and shows five vehicle rows in the active viewport. +The implementation changes the source of the identity styling rather than the visible hierarchy. Primary, warning, authority and health identity tones are now owned by `WorkspaceCommandBar` and shared CSS custom properties. Page-specific rules retain only genuine layout differences such as the compact replay rail, the larger vehicle record identity, the hidden mobile alert copy and the short-landscape operations header. + +Live vehicle, mileage, alert and access values changed between the before and after captures because both sets use production data. Component placement, spacing, responsive behavior and visual hierarchy remain continuous. ## Focused comparison -The mobile queue was checked separately because the protocol matrix becomes a card list at 390px. Three protocol states now share one evidence band instead of three competing nested cards. Semantic rails make healthy, degraded, offline and selected vehicles scannable without increasing card height. +Desktop and mobile comparisons were viewed as combined before/after images at matching route viewports. The warning tone remains amber in Alert Center, the authority tone remains purple in Account Management, the health tone remains green in Operations Quality, and the remaining identity workspaces retain the primary blue treatment. -The filter, vehicle evidence and governance sheets were each opened in the browser. Primary reset/apply, evidence disclosure, configuration summary and completion actions remain visible without horizontal overflow. +At 390 × 844, command bars preserve the existing single-screen density. Descriptions and metadata continue to collapse only where the prior mobile behavior already required it. All nine routes report `scrollWidth === clientWidth`; no page-level horizontal overflow was introduced. ## Fidelity ledger | Surface | Source evidence | Render evidence | Result | | --- | --- | --- | --- | -| Typography | Strong work-surface title, compact labels and tabular evidence values | Command title, difference conclusion, vehicle identity, protocol timestamps and inspector hierarchy use the shared Semi scale | Passed | -| Spacing and layout rhythm | Compact command/filter band with one dominant list | Filter height remains 54px; table rows are reduced to 54px; five desktop rows and roughly four mobile cards are visible | Passed | -| Colors and tokens | White/cool-gray surfaces, blue actions and restrained semantic state colors | Existing green, amber, red and blue tokens are reused for row rails, status tags and selected state | Passed | -| Image and asset fidelity | Supplied brand logo and Semi icon family | Brand logo is unchanged; search, settings, refresh, filter, download and disclosure icons remain Semi assets | Passed | -| Table hierarchy | Differences should dominate the access workflow | `差异结论` is now the second fixed column; protocol evidence follows and brand/model is explicitly secondary | Passed | -| Mobile density | Small screens need concise but complete vehicle evidence | Three protocol cells are grouped into one band; 390 × 844 has zero horizontal overflow and keeps pagination reachable | Passed | -| Detail and governance | Evidence and configuration should not replace the list permanently | Vehicle and governance tasks use focused SideSheets with summaries, evidence and stable close/complete actions | Passed | -| Interaction and accessibility | Rows, filters, disclosures and actions must be keyboard/touch operable | Whole-row selection, arrow-key table scrolling, filter SideSheet, evidence disclosure and governance actions are test-covered | Passed | +| Navigation and workspace frame | Consistent desktop rail and mobile bottom navigation | All nine routes retain the same navigation, canvas and viewport ownership | Passed | +| Identity hierarchy | Icon, eyebrow, task title, supporting context and actions | Shared `WorkspaceCommandBar` anatomy is unchanged across desktop and mobile | Passed | +| Semantic colors | Blue operational work, amber warnings, purple authority, green health | Four explicit tones resolve to the accepted icon, glow and status-tag colors | Passed | +| Typography | Compact operational hierarchy with restrained supporting copy | Existing Semi title, text and tag scale is preserved at both viewports | Passed | +| Spacing and density | Maps, tables and queues dominate their workspaces | Header convergence does not reduce visible rows, cards or map area | Passed | +| Responsive behavior | Mobile descriptions and actions collapse selectively | Existing per-workspace breakpoints remain; all routes have zero page overflow | Passed | +| Component architecture | Repeated identity styling existed in page-specific CSS | Semantic variables now centralize palette and shared anatomy without page coupling | Passed | +| Runtime behavior | Production routes must load without unstable placeholders | No skeletons, spin overlays, loading copy or browser errors remained at capture | Passed | ## Above-the-fold copy diff -- Changed `真实来源与接入健康` to `接入健康工作台`. -- Changed `全部主车辆` panel title to `接入差异清单`; the current scope now appears in its description. -- Changed table header `差异摘要` to `差异结论`. -- Existing filter fields, protocol names, vehicle facts, governance actions and business claims are preserved. +- No user-facing product copy changed. +- No route, field, status label, action or business claim changed. +- The only DOM contract change is the semantic identity class: `is-primary`, `is-warning`, `is-authority` or `is-health`. ## Comparison history -1. P2 — The baseline placed the actionable difference summary after brand/model and three protocol columns. - - Fix: moved `差异结论` next to vehicle identity and fixed both columns. - - Post-fix evidence: `/tmp/access-before-after-comparison.jpg`; the first three headers are `车辆`, `差异结论`, `GB/T 32960`. -2. P2 — Mobile protocol status appeared as three independent mini-cards and made each vehicle feel fragmented. - - Fix: grouped the three protocol cells into one bordered evidence band with internal dividers. - - Post-fix evidence: `/tmp/access-after-mobile-visible.jpg`. -3. P2 — Row status depended mainly on small status tags and required close reading. - - Fix: added semantic row/card rails for healthy, degraded/incomplete, offline/not-connected and selected states. - - Post-fix evidence: desktop and mobile final captures; no added row or card height. +1. P2 — Identity colors, icon surfaces and status tags were repeated in vehicle, replay, history, alert, access, account and operations CSS blocks. + - Fix: introduced a typed `tone` property on `WorkspaceCommandBar` and centralized semantic CSS custom properties. + - Post-fix evidence: both combined contact sheets preserve the accepted appearance while production computed-style checks confirm all four tones. +2. P2 — The repeated page rules allowed title, description, icon and mobile breakpoint values to drift independently. + - Fix: moved shared color and component anatomy to the base identity rules; retained only layout-specific page overrides. + - Post-fix evidence: desktop and mobile route contact sheets show continuous hierarchy and density. +3. P2 — A shared refactor could have caused mobile overflow or reduced one-screen data density. + - Fix: audited every primary route at 390 × 844 and recorded document dimensions after stable render. + - Post-fix evidence: all nine routes have `scrollWidth = 390`, `clientWidth = 390`, no loading overlays and no layout clipping. ## Findings -- No actionable P0, P1 or P2 visual differences remain. -- P3 follow-up: Semi UI 2.101 continues to emit its existing `findDOMNode` StrictMode warning in tests; it does not affect this layout or workflow. +- No actionable P0, P1 or P2 visual differences remain in this batch. +- Production browser warnings and errors after route traversal: 0. +- Build output retains the upstream Semi Sass `@import` deprecation warning; it does not affect this release. -## Core interaction verification +## Core interaction and release verification -- Desktop vehicle, status, protocol and brand query. -- Difference and all-vehicle metric shortcuts. -- Whole-row mouse and keyboard selection. -- Horizontal protocol browsing with fixed vehicle and difference columns. -- Mobile filter open, reset/apply affordances and close. -- Mobile vehicle evidence open, protocol disclosure and close. -- Mobile governance open, pending identity summary, threshold disclosure and complete. -- Browser state: no application error overlay, no visible error alert and no page-level horizontal overflow. -- Full suite: 73 files, 366 tests passed. +- Nine desktop routes rendered at 1280 × 720 without horizontal overflow. +- Nine mobile routes rendered at 390 × 844 without horizontal overflow. +- Primary, warning, authority and health classes and computed colors were verified in production. +- Full web suite: 73 files, 369 tests passed. - Production build gate: passed. +- Web release smoke suite: passed. +- ECS HTTP check: 200 OK. +- ECS active release: `/opt/lingniu-vehicle-platform/releases/semi-system-audit-20260720025208`. +- Served assets: `app-fqr7mrEB.js`, `app-BHAi6qMP.css`. ## Final result diff --git a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx index 7dbe5bc1..fc331b4b 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx @@ -633,6 +633,7 @@ export default function AlertsPage() { ariaLabel="告警中心工作区" eyebrow="主动告警" icon={} + tone="warning" title="告警处置工作台" description="核验事件证据、治理规则并追踪通知状态" status={unread ? `${unread.toLocaleString('zh-CN')} 条未读` : '通知已读'} diff --git a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx index 18caf091..76cfa25b 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx @@ -536,6 +536,7 @@ export default function OperationsPage() { ariaLabel="运维质量操作" eyebrow="运行治理" icon={} + tone="health" title="运行与数据质量" description="集中处理自动对账问题，按需诊断单车来源，并核对服务与协议健康；所有结论均可追溯。" status={data?.runtime.dataMode === 'production' ? '生产模式' : '状态待确认'} diff --git a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx index 10808930..302d2713 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx @@ -433,6 +433,7 @@ export default function UsersPage() { ariaLabel="账号管理操作" eyebrow="访问治理" icon={} + tone="authority" title="客户访问治理" description="菜单与车辆按最小权限开放，变更最多 30 秒生效" status={`${customers.length} 个客户账号${attentionCustomerCount ? ` · ${attentionCustomerCount} 待完善` : ' · 权限就绪'}`} diff --git a/vehicle-data-platform/apps/web/src/v2/shared/WorkspaceCommandBar.test.tsx b/vehicle-data-platform/apps/web/src/v2/shared/WorkspaceCommandBar.test.tsx index 11e5d0fc..5cdbaa34 100644 --- a/vehicle-data-platform/apps/web/src/v2/shared/WorkspaceCommandBar.test.tsx +++ b/vehicle-data-platform/apps/web/src/v2/shared/WorkspaceCommandBar.test.tsx @@ -31,8 +31,24 @@ test('renders a Semi identity treatment for primary workspaces', () => { description="车牌、VIN 或手机号快速查车" />); - expect(screen.getByLabelText('车辆目录操作')).toHaveClass('has-identity'); + expect(screen.getByLabelText('车辆目录操作')).toHaveClass('has-identity', 'is-primary'); expect(screen.getByText('车辆目录')).toHaveClass('v2-workspace-command-eyebrow'); expect(screen.getByRole('heading', { name: '车辆快速定位', level: 5 })).toHaveClass('v2-workspace-command-title'); expect(view.container.querySelector('.v2-workspace-command-icon')).toHaveClass('semi-avatar'); }); + +test('exposes the semantic identity tone without coupling it to the status color', () => { + render(} + tone="warning" + title="告警处置工作台" + description="核验事件证据" + status="通知已读" + statusColor="green" + />); + + expect(screen.getByLabelText('告警处置操作')).toHaveClass('has-identity', 'is-warning'); + expect(screen.getByText('通知已读').closest('.semi-tag')).toHaveClass('semi-tag-green-light'); +}); diff --git a/vehicle-data-platform/apps/web/src/v2/shared/WorkspaceCommandBar.tsx b/vehicle-data-platform/apps/web/src/v2/shared/WorkspaceCommandBar.tsx index 190715e1..f6470f66 100644 --- a/vehicle-data-platform/apps/web/src/v2/shared/WorkspaceCommandBar.tsx +++ b/vehicle-data-platform/apps/web/src/v2/shared/WorkspaceCommandBar.tsx @@ -3,11 +3,14 @@ import type { ReactNode } from 'react'; const { Text, Title } = Typography; +export type WorkspaceCommandTone = 'primary' | 'warning' | 'authority' | 'health'; + export function WorkspaceCommandBar({ title, description, eyebrow, icon, + tone = 'primary', status, statusColor = 'blue', meta, @@ -19,6 +22,7 @@ export function WorkspaceCommandBar({ description: ReactNode; eyebrow?: ReactNode; icon?: ReactNode; + tone?: WorkspaceCommandTone; status?: string; statusColor?: React.ComponentProps['color']; meta?: ReactNode; @@ -27,7 +31,12 @@ export function WorkspaceCommandBar({ ariaLabel?: string; }) { const hasIdentity = eyebrow != null || icon != null; - const rootClassName = ['v2-workspace-command-bar', hasIdentity ? 'has-identity' : '', className].filter(Boolean).join(' '); + const rootClassName = [ + 'v2-workspace-command-bar', + hasIdentity ? 'has-identity' : '', + hasIdentity ? `is-${tone}` : '', + className + ].filter(Boolean).join(' '); return (
diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css index 52a60d16..553ded4a 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css @@ -26583,6 +26583,64 @@ * Give high-value workspaces one shared visual grammar: a semantic Semi * avatar, a quiet eyebrow, a strong task title and supporting context. */ +.v2-workspace-command-bar.has-identity { + --v2-identity-accent: var(--v2-blue); + --v2-identity-border: rgba(18, 104, 243, .12); + --v2-identity-icon-start: #edf5ff; + --v2-identity-icon-end: #e4efff; + --v2-identity-glow: rgba(18, 104, 243, .1); + --v2-identity-surface: #fbfdff; + --v2-identity-eyebrow: #71839a; + --v2-identity-title: #263a52; + --v2-identity-description: #8290a3; + --v2-identity-tag-border: rgba(18, 104, 243, .08); + --v2-identity-tag-background: #eef5ff; + --v2-identity-tag-color: #245da8; + --v2-identity-shadow: rgba(18, 104, 243, .08); +} + +.v2-workspace-command-bar.has-identity.is-warning { + --v2-identity-accent: #d97706; + --v2-identity-border: rgba(230, 126, 34, .13); + --v2-identity-icon-start: #fff6e8; + --v2-identity-icon-end: #ffefd7; + --v2-identity-glow: rgba(245, 158, 11, .1); + --v2-identity-surface: #fffdf9; + --v2-identity-eyebrow: #9a7b52; + --v2-identity-tag-border: rgba(217, 119, 6, .1); + --v2-identity-tag-background: #fff6e8; + --v2-identity-tag-color: #b86505; + --v2-identity-shadow: rgba(217, 119, 6, .07); +} + +.v2-workspace-command-bar.has-identity.is-authority { + --v2-identity-accent: #6656c8; + --v2-identity-border: rgba(109, 91, 208, .13); + --v2-identity-icon-start: #f5f2ff; + --v2-identity-icon-end: #eee9ff; + --v2-identity-glow: rgba(109, 91, 208, .1); + --v2-identity-surface: #fdfcff; + --v2-identity-eyebrow: #8177af; + --v2-identity-tag-border: rgba(109, 91, 208, .1); + --v2-identity-tag-background: #f4f1ff; + --v2-identity-tag-color: #6656c8; + --v2-identity-shadow: rgba(109, 91, 208, .07); +} + +.v2-workspace-command-bar.has-identity.is-health { + --v2-identity-accent: #0f8f68; + --v2-identity-border: rgba(16, 148, 110, .13); + --v2-identity-icon-start: #edfbf6; + --v2-identity-icon-end: #e3f7ef; + --v2-identity-glow: rgba(16, 148, 110, .1); + --v2-identity-surface: #fbfffd; + --v2-identity-eyebrow: #5f8e7d; + --v2-identity-tag-border: rgba(16, 148, 110, .1); + --v2-identity-tag-background: #eaf8f3; + --v2-identity-tag-color: #0f7d5e; + --v2-identity-shadow: rgba(16, 148, 110, .07); +} + .v2-workspace-command-bar.has-identity .v2-workspace-command-copy { display: flex; min-width: 0; @@ -26594,11 +26652,11 @@ width: 36px; height: 36px; flex: 0 0 36px; - border: 1px solid rgba(18, 104, 243, .12); + border: 1px solid var(--v2-identity-border); border-radius: 10px; - background: linear-gradient(145deg, #edf5ff 0%, #e4efff 100%); - color: var(--v2-blue); - box-shadow: inset 0 1px rgba(255, 255, 255, .86), 0 5px 14px rgba(18, 104, 243, .08); + background: linear-gradient(145deg, var(--v2-identity-icon-start) 0%, var(--v2-identity-icon-end) 100%); + color: var(--v2-identity-accent); + box-shadow: inset 0 1px rgba(255, 255, 255, .86), 0 5px 14px var(--v2-identity-shadow); } .v2-workspace-command-stack { @@ -26609,7 +26667,7 @@ .v2-workspace-command-eyebrow.semi-typography { overflow: hidden; - color: #7d8c9f; + color: var(--v2-identity-eyebrow); font-size: 8px; font-weight: 700; letter-spacing: .08em; @@ -26620,7 +26678,7 @@ .v2-workspace-command-stack > .v2-workspace-command-title.semi-typography { overflow: hidden; - color: #21374f; + color: var(--v2-identity-title); font-size: 14px; font-weight: 750; letter-spacing: -.015em; @@ -26631,7 +26689,7 @@ .v2-workspace-command-stack > .v2-workspace-command-description.semi-typography { overflow: hidden; - color: #7b8a9d; + color: var(--v2-identity-description); font-size: 9px; font-weight: 450; line-height: 13px; @@ -26639,20 +26697,20 @@ white-space: nowrap; } +.v2-workspace-command-bar.has-identity .v2-workspace-command-actions > .semi-tag { + border-color: var(--v2-identity-tag-border); + background: var(--v2-identity-tag-background); + color: var(--v2-identity-tag-color); +} + .v2-vehicle-discovery-shell > .v2-vehicle-command-bar.has-identity { min-height: 58px; background: - radial-gradient(circle at 88% -80%, rgba(18, 104, 243, .1), transparent 44%), - linear-gradient(105deg, #fff 0%, #fbfdff 100%); + radial-gradient(circle at 88% -80%, var(--v2-identity-glow), transparent 44%), + linear-gradient(105deg, #fff 0%, var(--v2-identity-surface) 100%); padding: 8px 10px 8px 12px; } -.v2-vehicle-discovery-shell > .v2-vehicle-command-bar.has-identity .v2-workspace-command-actions > .semi-tag { - border-color: rgba(18, 104, 243, .08); - background: #eef5ff; - color: #245da8; -} - .v2-vehicle-record-v3 .v2-vehicle-command-header.has-identity .v2-workspace-command-copy { display: flex; min-height: 94px; @@ -26759,8 +26817,8 @@ .v2-track-query-panel .v2-track-query-header.has-identity.v2-workspace-command-bar { min-height: 62px; background: - radial-gradient(circle at 12% -80%, rgba(18, 104, 243, .12), transparent 52%), - linear-gradient(108deg, #fff 0%, #fbfdff 100%); + radial-gradient(circle at 12% -80%, var(--v2-identity-glow), transparent 52%), + linear-gradient(108deg, #fff 0%, var(--v2-identity-surface) 100%); padding: 8px 7px 8px 10px; } @@ -26782,20 +26840,17 @@ } .v2-track-query-header.has-identity .v2-workspace-command-eyebrow { - color: #71839a; font-size: 7px; line-height: 9px; } .v2-track-query-header.has-identity .v2-workspace-command-title { - color: #263a52; font-size: 14px; font-weight: 760; line-height: 17px; } .v2-track-query-header.has-identity .v2-workspace-command-description { - color: #8492a4; font-size: 8px; line-height: 11px; } @@ -26805,17 +26860,11 @@ gap: 2px; } -.v2-track-query-header.has-identity .v2-workspace-command-actions > .semi-tag { - border-color: rgba(18, 104, 243, .08); - background: #eef5ff; - color: #245da8; -} - .v2-history-discovery-shell > .v2-history-command-bar.has-identity { min-height: 58px; background: - radial-gradient(circle at 91% -100%, rgba(18, 104, 243, .1), transparent 42%), - linear-gradient(105deg, #fff 0%, #fbfdff 100%); + radial-gradient(circle at 91% -100%, var(--v2-identity-glow), transparent 42%), + linear-gradient(105deg, #fff 0%, var(--v2-identity-surface) 100%); padding: 8px 10px 8px 12px; } @@ -26836,24 +26885,16 @@ } .v2-history-command-bar.has-identity .v2-workspace-command-title { - color: #263a52; font-size: 14px; font-weight: 760; line-height: 18px; } .v2-history-command-bar.has-identity .v2-workspace-command-description { - color: #8290a3; font-size: 9px; line-height: 12px; } -.v2-history-command-bar.has-identity .v2-workspace-command-actions > .semi-tag { - border-color: rgba(18, 104, 243, .08); - background: #eef5ff; - color: #245da8; -} - @media (min-width: 681px) and (max-width: 980px) { .v2-history-command-bar.has-identity .v2-workspace-command-copy { min-width: 190px; @@ -26895,8 +26936,8 @@ .v2-alert-command-bar.has-identity.v2-workspace-command-bar { min-height: 60px; background: - radial-gradient(circle at 8% -90%, rgba(245, 158, 11, .1), transparent 48%), - linear-gradient(108deg, #fff 0%, #fffdf9 52%, #fbfdff 100%); + radial-gradient(circle at 8% -90%, var(--v2-identity-glow), transparent 48%), + linear-gradient(108deg, #fff 0%, var(--v2-identity-surface) 52%, #fbfdff 100%); padding: 7px 8px 7px 11px; } @@ -26910,11 +26951,7 @@ width: 34px; height: 34px; flex-basis: 34px; - border-color: rgba(230, 126, 34, .13); border-radius: 10px; - background: linear-gradient(145deg, #fff6e8 0%, #ffefd7 100%); - color: #d97706; - box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 5px 14px rgba(217, 119, 6, .07); } .v2-alert-command-bar.has-identity .v2-workspace-command-stack { @@ -26922,13 +26959,11 @@ } .v2-alert-command-bar.has-identity .v2-workspace-command-eyebrow { - color: #9a7b52; font-size: 7px; line-height: 10px; } .v2-alert-command-bar.has-identity .v2-workspace-command-title { - color: #334155; font-size: 14px; font-weight: 760; line-height: 18px; @@ -26936,22 +26971,15 @@ .v2-alert-command-bar.has-identity .v2-workspace-command-description { max-width: 280px; - color: #8793a3; font-size: 9px; line-height: 12px; } -.v2-alert-command-bar.has-identity .v2-workspace-command-actions > .semi-tag { - border-color: rgba(217, 119, 6, .1); - background: #fff6e8; - color: #b86505; -} - .v2-access-discovery-shell > .v2-access-command-bar.has-identity { min-height: 58px; background: - radial-gradient(circle at 91% -100%, rgba(18, 104, 243, .1), transparent 43%), - linear-gradient(105deg, #fff 0%, #fbfdff 100%); + radial-gradient(circle at 91% -100%, var(--v2-identity-glow), transparent 43%), + linear-gradient(105deg, #fff 0%, var(--v2-identity-surface) 100%); padding: 8px 10px 8px 12px; } @@ -26972,24 +27000,16 @@ } .v2-access-command-bar.has-identity .v2-workspace-command-title { - color: #263a52; font-size: 14px; font-weight: 760; line-height: 18px; } .v2-access-command-bar.has-identity .v2-workspace-command-description { - color: #8290a3; font-size: 9px; line-height: 12px; } -.v2-access-command-bar.has-identity .v2-workspace-command-actions > .semi-tag { - border-color: rgba(18, 104, 243, .08); - background: #eef5ff; - color: #245da8; -} - @media (min-width: 681px) and (max-width: 980px) { .v2-alert-command-bar.has-identity .v2-workspace-command-copy { max-width: 250px; @@ -27058,8 +27078,8 @@ .v2-user-discovery-shell > .v2-user-command-bar.has-identity { min-height: 58px; background: - radial-gradient(circle at 9% -100%, rgba(109, 91, 208, .1), transparent 46%), - linear-gradient(106deg, #fff 0%, #fdfcff 52%, #fbfdff 100%); + radial-gradient(circle at 9% -100%, var(--v2-identity-glow), transparent 46%), + linear-gradient(106deg, #fff 0%, var(--v2-identity-surface) 52%, #fbfdff 100%); padding: 8px 10px 8px 12px; } @@ -27071,11 +27091,7 @@ width: 34px; height: 34px; flex-basis: 34px; - border-color: rgba(109, 91, 208, .13); border-radius: 10px; - background: linear-gradient(145deg, #f5f2ff 0%, #eee9ff 100%); - color: #6656c8; - box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 5px 14px rgba(109, 91, 208, .07); } .v2-user-command-bar.has-identity .v2-workspace-command-stack { @@ -27083,35 +27099,26 @@ } .v2-user-command-bar.has-identity .v2-workspace-command-eyebrow { - color: #8177af; font-size: 7px; line-height: 10px; } .v2-user-command-bar.has-identity .v2-workspace-command-title { - color: #334155; font-size: 14px; font-weight: 760; line-height: 18px; } .v2-user-command-bar.has-identity .v2-workspace-command-description { - color: #8793a3; font-size: 9px; line-height: 12px; } -.v2-user-command-bar.has-identity .v2-workspace-command-actions > .semi-tag { - border-color: rgba(109, 91, 208, .1); - background: #f4f1ff; - color: #6656c8; -} - .v2-ops-page > .v2-ops-command-bar.has-identity { min-height: 60px; background: - radial-gradient(circle at 8% -100%, rgba(16, 148, 110, .1), transparent 47%), - linear-gradient(108deg, #fff 0%, #fbfffd 52%, #fbfdff 100%); + radial-gradient(circle at 8% -100%, var(--v2-identity-glow), transparent 47%), + linear-gradient(108deg, #fff 0%, var(--v2-identity-surface) 52%, #fbfdff 100%); padding: 8px 10px 8px 12px; } @@ -27123,11 +27130,7 @@ width: 34px; height: 34px; flex-basis: 34px; - border-color: rgba(16, 148, 110, .13); border-radius: 10px; - background: linear-gradient(145deg, #edfbf6 0%, #e3f7ef 100%); - color: #0f8f68; - box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 5px 14px rgba(16, 148, 110, .07); } .v2-ops-command-bar.has-identity .v2-workspace-command-stack { @@ -27135,13 +27138,11 @@ } .v2-ops-command-bar.has-identity .v2-workspace-command-eyebrow { - color: #5f8e7d; font-size: 7px; line-height: 10px; } .v2-ops-command-bar.has-identity .v2-workspace-command-title { - color: #334155; font-size: 14px; font-weight: 760; line-height: 18px; @@ -27149,17 +27150,10 @@ .v2-ops-command-bar.has-identity .v2-workspace-command-description { max-width: 520px; - color: #8793a3; font-size: 9px; line-height: 12px; } -.v2-ops-command-bar.has-identity .v2-workspace-command-actions > .semi-tag { - border-color: rgba(16, 148, 110, .1); - background: #eaf8f3; - color: #0f7d5e; -} - @media (min-width: 681px) and (max-width: 980px) { .v2-user-command-bar.has-identity .v2-workspace-command-copy, .v2-ops-command-bar.has-identity .v2-workspace-command-copy {