neo/roi24
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
140dcb90a06c2f851172f18fa114231e13b90cf7
roi24/bloomberg-refresh2024-style-guide.md
T
neo 932ec3ac8f KPI cards: Bloomberg stock ticker style 
- Redesign KPI cards to look like stock tickers
- Add ticker ID (e.g. ВЫРУЧК:KPI, AOV:KPI)
- Arrow up/down SVG indicators for change direction
- Mini trend-line (50px) inside each card
- Change color: green (#16a34a) for up, red (#e21d1d) for down
- Remove sparkline background area, keep only line
- Fix duplicate arrowUp variable naming (bArrowUp/bArrowDown/bArrowNeutral)
2026-06-21 18:14:08 +05:00

258 lines
8.6 KiB
Markdown
Raw Blame History

# Bloomberg Refresh 2024 — Visual Style & Component Guide
> Источник: `European, Middle Eastern & African Stocks - Bloomberg - Bloomberg Markets.html`
> Дата анализа: 2026-06-21
---
## 1. CSS Architecture
Bloomberg использует **CSS-variables через `@layer`** (`phx.components`). Все цвета и стили — через переменные, нет хардкода.
```css
@layer phx.components {
/* Font system */
--atomics-text-font-size: var(--_atomics-Text-font-size)
--atomics-text-font-family: var(--_atomics-Text-font-family)
--atomics-text-color: var(--_atomics-Text-color)
/* Skeleton/placeholder */
--atomics-skeleton-background-color: var(--phx-color-background-secondary)
}
```
Ключевая особенность: шрифты подгружаются через Google Fonts (Noto Sans JP для японских индексов). Для остальных — системный стек.
---
## 2. Table Structure
### Columns (left → right)
| # | Column | Content | Alignment | Class prefix |
|---|-------------|----------------------|-----------|---------------------------|
| 1 | Follow | Button (toggle) | center | `style_column__qFboh style_stickyCol__8nZn2` |
| 2 | Ticker ID | `SPEURO:IND` etc. | left | `style_column__qFboh` |
| 3 | Index Name | `S&P EUROPE 350 INDEX` | left | `style_column__qFboh` |
| 4 | Value | `2,581.91` | right | `style_column__qFboh style_end__Ug4Cn` |
| 5 | Change | `▲ 1.85` | right | `style_column__qFboh style_end__Ug4Cn` |
### Row structure
Each row is wrapped in `style_tableRow__YAQry style_row__rMjqo`.
The table has 3 main wrapper classes:
- `style_tableWrapper__Q1HVo style_table__SrH5K` — outer table
- `style_tableHeader__XgkzK style_header__VSpHj` — header row
- `style_tableRow__YAQry style_row__rMjqo` — data rows
### Cell classes
- `style_cell__1UrwH style_start__T_7tE` — left-aligned cell
- `style_cell__1UrwH style_end__0XcYw` — right-aligned cell (value + change)
- `style_cell__1UrwH style_stickyCol__8nZn2 style_start__L8R9v` — sticky column (Follow + ID)
### Section titles (region headers)
```
styles_sectionTitle__Vr2RB typography_coreHeadlineSm__9qq05
styles_sectionTitle__xBh4H
styles_sectionTitle__z1_bK typography_coreHeadlineSm__9qq05
```
Three sections in the page:
1. **Today in the Markets**
2. **Compare to Benchmarks**
3. **Market Summaries**
---
## 3. Change Component
### Three states
```css
media-ui-Change_positive-il7qv0BctMg-
media-ui-Change_negative-rQGvYj5WMsM-
media-ui-Change_neutral-nBYyHHGgsdY-
```
### Shared modifier classes
All change elements share these classes:
- `media-ui-Change_change-lMq4LV-1csY-` — wrapper
- `media-ui-Change_default-8hphe2lFPJo-` — default theme
- `media-ui-Change_refresh2024-EajM9IkrlnU-` — "refresh2024" design system
### Value display
- `media-ui-Change_changeValue-cRzdGNve3oU-` — numeric value
- `media-ui-Change_priceChange-OgFOGsx-jKI-` — price change (absolute points)
- Separate class for percentage change (appears in different context)
### Arrow SVG
```html
<!-- UP (positive) -->
<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arrow Up">
<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 0L24 20L0 20L12 0Z"/>
</svg>
<!-- DOWN (negative) -->
<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Arrow Down" role="img">
<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 20L0 0L24 0L12 20Z"/>
</svg>
<!-- NEUTRAL -->
<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arrow Up">
<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 0L24 20L0 20L12 0Z"/>
</svg>
```
Key: **`fill="currentColor"`** — arrow inherits text color from parent.
---
## 4. Typography
### Name column (`style_stockName__8SqkX`)
- Font: system sans-serif (Inter-like)
- Size: ~14px
- Weight: 500 (medium)
- Color: `--atomics-text-color` (white/light gray)
- Behavior: ellipsis on overflow (truncates long names)
### Value column (`style_stockValue__fsPwb`)
- Font: monospace / tabular-nums
- Size: ~14-16px
- Weight: 500
- Alignment: right
- Number format: `1 234,56` (space = thousands separator, comma = decimal)
### Change column (`media-ui-Change_priceChange-*`)
- Size: ~12-13px (smaller than value)
- Weight: 400 (regular)
- Color: green (positive) / red (negative) / gray (neutral)
- Arrow: 12x10px, inherits color
### ID/Ticker column (`style_displayId__ZrwVL`)
- Size: ~11px
- Font: monospace
- Color: muted (#888)
---
## 5. Complete Component Hierarchy
```
style_tableWrapper__Q1HVo style_table__SrH5K
└── style_tableRow__YAQry style_row__rMjqo (header)
└── style_tableRow__YAQry style_row__rMjqo (data)
├── style_column__qFboh style_stickyCol__8nZn2 style_start__L8R9v
│ ├── style_stockId__blFSc (ticker like "SPEURO:IND")
│ └── Follow button
├── style_column__qFboh
│ └── style_stockName__8SqkX ("S&P EUROPE 350 INDEX")
├── style_column__qFboh style_end__Ug4Cn
│ └── style_stockValue__fsPwb ("2,581.91")
└── style_column__qFboh style_end__Ug4Cn
└── media-ui-Change_change-lMq4LV-1csY- media-ui-Change_default-* media-ui-Change_refresh2024-*
├── media-ui-Change_changeValue-* media-ui-Change_(positive|negative|neutral)-*
│ └── number (e.g. "1.85")
└── media-ui-Change_marketArrow-* media-ui-Change_(positive|negative|neutral)-*
└── <svg> arrow
```
---
## 6. Data Extracted from File
- **Total rows:** 91 indices
- **Sections:** 3 ("Today in the Markets", "Compare to Benchmarks", "Market Summaries")
- **Regions covered:** Europe, UK, Nordics, DACH, Eastern Europe, Iberia, Baltics, Middle East, Africa
- **Change distribution:** ~70% positive, ~25% negative, ~5% neutral (at time of snapshot)
### Sample indices
| Ticker | Name | Value | Change |
|--------|------|-------|--------|
| SPEURO:IND | S&P EUROPE 350 INDEX | 2,581.91 | +1.85 |
| SXXP:IND | STXE 600 (EUR) Pr | 635.61 | +1.68 |
| SX5E:IND | Euro Stoxx 50 Pr | 6,293.13 | +4.55 |
| UKX:IND | FTSE 100 INDEX | 10,363.27 | +0.98 |
| DAX:IND | DAX INDEX | 24,985.82 | +0.39 |
| CAC:IND | CAC 40 INDEX | 8,421.14 | +3.76 |
### Key ticker prefixes
| Prefix | Market |
|--------|--------|
| `UKX:IND` | FTSE 100 (London) |
| `DAX:IND` | DAX (Frankfurt) |
| `CAC:IND` | CAC 40 (Paris) |
| `SX5E:IND` | Euro Stoxx 50 |
| `XU100:IND` | BIST 100 (Istanbul) |
| `TA-35:IND` | TA-35 (Tel Aviv) |
| `TOP40:IND` | FTSE/JSE Africa Top 40 |
| `ATXPRIME:I` | ATX Prime (Vienna) |
---
## 7. Implementation Notes for ROI24
### Replicating the Change component (minimal)
```css
.change-positive { color: #16a34a; }
.change-negative { color: #e21d1d; }
.change-neutral { color: #a6a6a6; }
.change-arrow {
width: 12px;
height: 10px;
fill: currentColor;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
```
```html
<div class="change change-positive">
<svg class="change-arrow" viewBox="0 0 24 20">
<path d="M12 0L24 20L0 20L12 0Z"/>
</svg>
1.85
</div>
```
### Key differences from ROI24 style
| Aspect | Bloomberg | ROI24 |
|--------|-----------|-------|
| Background | Very dark (#0a0a0a) | Dark (#050505) |
| Border | Minimal/none on cells | 1px solid |
| Font | System + Google Fonts | Inter + JetBrains Mono |
| Accent | Green (#16a34a) / Red (#e21d1d) | Green (#00ff9d) |
| Numbers | Tabular-nums, 1 234,56 | Comma decimal for RU locale |
| Cards | Flat rows, no card bg | Bordered cards |
| Radius | 0 (sharp) | 8-16px (rounded) |
### Recommended adaptation
Use Bloomberg's **table structure + change component** but apply ROI24's design tokens:
- Replace Bloomberg's green `#16a34a` with ROI24 accent `#00ff9d`
- Keep monospace for values (JetBrains Mono)
- Keep right-align for value/change columns
- Keep arrow SVG pattern (fill="currentColor")
- Add `border-radius: 12px` to rows or use card-style (ROI24 prefers cards)
- Use `gap: 14px` between cells (Bloomberg uses 1px gaps)
---
*Generated from Bloomberg HTML snapshot — 1.3MB minified React SPA. Data extracted via regex parsing of rendered DOM.*
Reference in new issue View Git Blame Copy Permalink