trdr-ds-install 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -2
- package/package.json +1 -1
- package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md +367 -37
- package/plugins/trdr-design-system/skills/trdr-ds/data/components.json +127 -6
- package/plugins/trdr-design-system/skills/trdr-ds/references/logo-trdr.svg +15 -6
- package/plugins/trdr-design-system/skills/trdr-ds/references/rules.md +25 -1
- package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css +1 -1
package/README.md
CHANGED
|
@@ -43,9 +43,23 @@ The skill is **offline-first**: it ships with a snapshot of the catalog (`data/c
|
|
|
43
43
|
|---------|-----------|
|
|
44
44
|
| `/trdr-ds` *(default = analyze)* | Scan + plan, no changes |
|
|
45
45
|
| `/trdr-ds apply` | Scan + plan + execute after approval |
|
|
46
|
+
| `/trdr-ds apply batch 15` | Same as apply, but process violations in batches of 15 files (default: 25) |
|
|
47
|
+
| `/trdr-ds resume` | Continue a batched migration from the last checkpoint (`DS_PROGRESS.md`) |
|
|
48
|
+
| `/trdr-ds status` | Show migration progress from `DS_PROGRESS.md` — no files modified |
|
|
46
49
|
| `/trdr-ds sync` | Refresh local snapshot from the Hub (no project changes) |
|
|
47
50
|
| `/trdr-ds apply --latest` | Sync first, then apply |
|
|
48
51
|
|
|
52
|
+
**Large project support:**
|
|
53
|
+
|
|
54
|
+
For projects with more than 50 violations or 30 affected files, Phase 2 switches automatically to **batched mode**:
|
|
55
|
+
- Violations are processed folder by folder (e.g. `src/components/`, `src/pages/`, `src/app/`)
|
|
56
|
+
- Progress is saved to `DS_PROGRESS.md` after each batch — safe to stop and resume across sessions
|
|
57
|
+
- After each batch the dev chooses: `"continuar"` / `"pular [pasta]"` / `"parar"` / `"tudo"`
|
|
58
|
+
|
|
59
|
+
**Logo audit:**
|
|
60
|
+
|
|
61
|
+
Phase 1 automatically scans for logo files (`logo*.svg`, `*trdr*.svg`, `brand*.svg`) and checks each against the official TRDR logo fingerprint (`viewBox="0 0 105 41"`, `fill="#00D4FF"`). Wrong logos are replaced in Phase 2 without changing the filename or path.
|
|
62
|
+
|
|
49
63
|
The skill matches detected UI patterns against the catalog. Implemented components (`implemented: true`) are applied with full code; stubs (`implemented: false`) get tokens + a banner comment + an entry in `MISSING_COMPONENTS.md` for the maintainer to revisit.
|
|
50
64
|
|
|
51
65
|
## For maintainers (Mauro)
|
|
@@ -98,7 +112,8 @@ trdr-plugins/
|
|
|
98
112
|
├── bin/install.js ← copies skill to ~/.claude/skills
|
|
99
113
|
├── scripts/
|
|
100
114
|
│ ├── sync-components.js ← pull /components.json from Hub
|
|
101
|
-
│
|
|
115
|
+
│ ├── sync-tokens.js ← pull /tokens.css from Hub
|
|
116
|
+
│ └── sync-version.js ← syncs Skill version constant on npm version
|
|
102
117
|
└── plugins/trdr-design-system/
|
|
103
118
|
├── .claude-plugin/plugin.json
|
|
104
119
|
└── skills/trdr-ds/
|
|
@@ -107,5 +122,6 @@ trdr-plugins/
|
|
|
107
122
|
│ └── components.json ← snapshot of /components.json
|
|
108
123
|
└── references/
|
|
109
124
|
├── rules.md ← absolute design rules (PT-BR)
|
|
110
|
-
|
|
125
|
+
├── tokens.css ← snapshot of /tokens.css
|
|
126
|
+
└── logo-trdr.svg ← official TRDR logo (105×41px)
|
|
111
127
|
```
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@ argument-hint: "[analyze|apply|resume|status|sync|batch N]"
|
|
|
6
6
|
allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
**Skill version:** 1.
|
|
9
|
+
**Skill version:** 1.5.0
|
|
10
10
|
**npm package:** trdr-ds-install
|
|
11
11
|
|
|
12
12
|
You are implementing the **TRDR Design System** in a developer's project. The Design Hub is the single source of truth and lives at **https://trdr.mrocontent.com.br**.
|
|
@@ -49,13 +49,13 @@ Run this command silently via Bash:
|
|
|
49
49
|
npm show trdr-ds-install version 2>/dev/null
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
Compare the result with the **Skill version** constant at the top of this file (`1.
|
|
52
|
+
Compare the result with the **Skill version** constant at the top of this file (`1.5.0`).
|
|
53
53
|
|
|
54
54
|
- If the command fails or returns empty (no internet / npm unavailable): skip silently, continue.
|
|
55
55
|
- If registry version == local version: skip silently, continue.
|
|
56
56
|
- If registry version > local version:
|
|
57
57
|
```
|
|
58
|
-
🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.4.
|
|
58
|
+
🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.4.1)
|
|
59
59
|
|
|
60
60
|
Responda:
|
|
61
61
|
- `"atualizar"` / `"update"` — instalar a nova versão agora (requer reiniciar /trdr-ds após)
|
|
@@ -92,13 +92,24 @@ Inform the dev that a previous migration was already completed (show date). Offe
|
|
|
92
92
|
|
|
93
93
|
**If not found:** Continue normally to Step 1.
|
|
94
94
|
|
|
95
|
-
### Step 1 — Detect framework
|
|
95
|
+
### Step 1 — Detect framework and styling mode
|
|
96
96
|
|
|
97
97
|
Read `package.json` at the project root. Identify:
|
|
98
98
|
- Framework: Next.js (version), React (CRA/Vite), Vue/Nuxt, plain HTML, other
|
|
99
99
|
- Language: TypeScript or JavaScript
|
|
100
100
|
- Styling: CSS Modules, Tailwind, CSS-in-JS, plain CSS, SCSS
|
|
101
101
|
|
|
102
|
+
**Determine `stylingMode`** — used in Steps 5, 6, 6.6 and 6.7 to generate the correct syntax for each framework:
|
|
103
|
+
|
|
104
|
+
| stylingMode | Detection | How DS classes are applied |
|
|
105
|
+
|-------------|-----------|---------------------------|
|
|
106
|
+
| `plain-css` | No `tailwind.config.*`, no `*.module.css`, no CSS-in-JS dep | `class="trdr-btn"` in HTML attributes |
|
|
107
|
+
| `css-modules` | `*.module.css` files present | `composes: trdr-btn from global` in module file, `className={styles.btn}` in JSX |
|
|
108
|
+
| `tailwind` | `tailwind.config.*` present | `className="trdr-btn"` alongside Tailwind utilities |
|
|
109
|
+
| `css-in-js` | `styled-components` or `@emotion/*` in package.json | Insert token vars inside template literals / `theme` objects |
|
|
110
|
+
|
|
111
|
+
Save `stylingMode` — it must be referenced throughout Phase 2 wherever the output format differs by framework.
|
|
112
|
+
|
|
102
113
|
### Step 2 — Map style structure
|
|
103
114
|
|
|
104
115
|
Search for all style files:
|
|
@@ -147,6 +158,31 @@ Flag any gradient that doesn't reference a TRDR gradient token (`var(--gradient-
|
|
|
147
158
|
**H — Hardcoded font-size in px** (should use .trdr-h* / .trdr-body-* text style classes):
|
|
148
159
|
Search: `font-size:\s*\d+px` in CSS/SCSS files (skip tokens.css itself)
|
|
149
160
|
|
|
161
|
+
**I — Inline styles with design properties** (should be CSS classes with tokens):
|
|
162
|
+
Search in `*.html, *.tsx, *.jsx, *.vue, *.svelte`:
|
|
163
|
+
- HTML/Vue: `style="[^"]*(?:color|background|font|padding|margin|gap|border)[^"]*"`
|
|
164
|
+
- React/JSX: `style=\{\{[^}]*(?:color|background|font|padding|margin|gap|border)[^}]*\}\}`
|
|
165
|
+
- Vue binding: `:style="\{[^}]*(?:color|background|font|padding|margin|gap|border)[^}]*\}"`
|
|
166
|
+
|
|
167
|
+
Do NOT flag (these are acceptable exceptions):
|
|
168
|
+
- `background-image: url(...)` — dynamic image URL from data
|
|
169
|
+
- `style="--custom-prop: value"` — CSS custom property passing a dynamic value to CSS (e.g. `style="--card-delay:0.1s"`)
|
|
170
|
+
- `style={{ '--custom-prop': value }}` — same in JSX
|
|
171
|
+
|
|
172
|
+
**J — SVG icons inline** (should use an icon library):
|
|
173
|
+
Search in `*.html, *.tsx, *.jsx, *.vue`:
|
|
174
|
+
- Pattern: `<svg` in source files (NOT in logo files, NOT in `node_modules/`, `references/`, `assets/icons/`)
|
|
175
|
+
- Do NOT flag: `<svg` in known logo files (those with the official TRDR fingerprint)
|
|
176
|
+
- Count distinct files with inline SVGs, not total occurrences
|
|
177
|
+
|
|
178
|
+
**K — Logo missing or incorrect in HTML/JSX** (should use official logo-trdr.svg):
|
|
179
|
+
Search in `*.html, *.tsx, *.jsx, *.vue`:
|
|
180
|
+
- `<img[^>]*(?:logo|brand|mark)[^>]*src="(?!.*logo-trdr)[^"]*"` — img tag with non-official logo src
|
|
181
|
+
- `<span[^>]*>[^<]*TRDR[^<]*</span>` — text "TRDR" in a span used as logo replacement
|
|
182
|
+
- `import\s+\w+\s+from\s+['"][^'"]*logo(?!-trdr)[^'"]*['"]` — logo import that isn't logo-trdr
|
|
183
|
+
|
|
184
|
+
Do NOT flag: `logo-trdr.svg` references — those are correct.
|
|
185
|
+
|
|
150
186
|
Track:
|
|
151
187
|
- `total_violations` = sum of all A–H occurrences
|
|
152
188
|
- `total_files_with_violations` = count of unique files with ≥ 1 violation
|
|
@@ -186,6 +222,16 @@ Use Grep (not Bash grep) to search for the patterns below. Group patterns from t
|
|
|
186
222
|
- If a slug has zero matches, omit it from the replacement candidates list.
|
|
187
223
|
- `title=""` attribute is too noisy — do NOT use it for tooltip detection; prefer `<Tooltip` / `role="tooltip"` / `data-tooltip`.
|
|
188
224
|
|
|
225
|
+
**Also scan for CSS custom classes that re-implement DS components** (common in plain-HTML projects):
|
|
226
|
+
|
|
227
|
+
| DS Component | CSS pattern to detect | Signal |
|
|
228
|
+
|---|---|---|
|
|
229
|
+
| Button | `.btn`, `.button`, `[class*="btn"]`, `[class*="button"]` in CSS with `cursor:pointer` | Likely button reimplementation |
|
|
230
|
+
| Text Input | `.input`, `.text-field`, `.search-bar` in CSS with `border` + `padding` | Likely input reimplementation |
|
|
231
|
+
| Segment Control | `.tab`, `.segment`, `.lang-selector` in CSS with `display:flex` + `border-radius` | Likely segmented reimplementation |
|
|
232
|
+
|
|
233
|
+
For each match, add to `replacementCandidates[]` with a `customCssClass` field noting the project's class name, so Phase 2 Step 6 can add DS classes to those elements.
|
|
234
|
+
|
|
189
235
|
**Output:** `replacementCandidates[]` — passed to Step 5 template and Phase 2 Step 6.
|
|
190
236
|
|
|
191
237
|
### Step 3.6 — Logo audit
|
|
@@ -301,13 +347,17 @@ Determine execution mode based on thresholds:
|
|
|
301
347
|
### VIOLATIONS FOUND:
|
|
302
348
|
| Category | Count | Example |
|
|
303
349
|
|----------|-------|---------|
|
|
304
|
-
| Hardcoded colors | N | `color: #00A8CC` in Button.css:14 |
|
|
305
|
-
| Hardcoded fonts | N | `font-family: Inter` in globals.css:8 |
|
|
306
|
-
| Hardcoded spacing | N | `padding: 16px` in Card.css:22 |
|
|
307
|
-
| Primitive token use | N | `var(--color-blue-600)` in Badge.css:31 |
|
|
308
|
-
|
|
|
309
|
-
|
|
|
310
|
-
|
|
|
350
|
+
| A — Hardcoded colors | N | `color: #00A8CC` in Button.css:14 |
|
|
351
|
+
| B — Hardcoded fonts | N | `font-family: Inter` in globals.css:8 |
|
|
352
|
+
| C — Hardcoded spacing | N | `padding: 16px` in Card.css:22 |
|
|
353
|
+
| D — Primitive token use | N | `var(--color-blue-600)` in Badge.css:31 |
|
|
354
|
+
| E — Missing tokens.css | N | not imported in globals.css |
|
|
355
|
+
| F — Hardcoded rgba | N | `background: rgba(0,0,0,.3)` in card.css:88 |
|
|
356
|
+
| G — Custom gradients | N | `linear-gradient(135deg, #FF6B6B...)` in header:24 |
|
|
357
|
+
| H — Hardcoded font-size | N | `font-size: 22px` in card.css:99 |
|
|
358
|
+
| I — Inline styles | N | `style="color:#00D4FF"` in index.html:312 |
|
|
359
|
+
| J — SVG icons inline | N | `<svg>` in index.html (search, close, play icons) |
|
|
360
|
+
| K — Logo incorrect/missing | N | `<span>TRDR</span>` used as logo in index.html:45 |
|
|
311
361
|
|
|
312
362
|
### TRDR COMPONENTS REFERENCED IN PROJECT:
|
|
313
363
|
(Candidatos detectados no Step 3.5 — substituição recomendada)
|
|
@@ -322,7 +372,7 @@ Determine execution mode based on thresholds:
|
|
|
322
372
|
[If replacementCandidates is empty:]
|
|
323
373
|
| — | Nenhum candidato detectado | — |
|
|
324
374
|
|
|
325
|
-
> **Implementados:** o CSS
|
|
375
|
+
> **Implementados:** o CSS estará em `components.css` após a Fase 2, **E** as classes DS serão aplicadas diretamente nos elementos HTML/JSX/Vue durante o Step 6 — não é necessária nenhuma ação manual.
|
|
326
376
|
> **Stubs:** receberão banner comment com tokens recomendados + entrada em `MISSING_COMPONENTS.md`.
|
|
327
377
|
|
|
328
378
|
### SCOPE ESTIMATE: [Small / Medium / Large]
|
|
@@ -484,8 +534,12 @@ After all component CSS blocks, append the text style utility classes:
|
|
|
484
534
|
.trdr-body-aux { font-family: var(--font-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.24px; }
|
|
485
535
|
|
|
486
536
|
/* Labels — var(--font-secondary) = Inter */
|
|
537
|
+
.trdr-label-lg { font-family: var(--font-secondary); font-size: 16px; font-weight: 600; line-height: 1.4; }
|
|
487
538
|
.trdr-label-l2 { font-family: var(--font-secondary); font-size: 16px; font-weight: 600; line-height: 1.4; }
|
|
488
539
|
.trdr-label-l3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; }
|
|
540
|
+
|
|
541
|
+
/* Mono — var(--font-mono) = Roboto Mono */
|
|
542
|
+
.trdr-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.04em; }
|
|
489
543
|
```
|
|
490
544
|
|
|
491
545
|
**For BATCHED mode:** Update `DS_PROGRESS.md`:
|
|
@@ -567,6 +621,29 @@ Local catalog: TRDR DS v[catalog-version] ([implemented]/[total] components)
|
|
|
567
621
|
## Layer hierarchy
|
|
568
622
|
bg.primary (base) → bg.secondary/tertiary (content areas) → surface.* (cards, panels)
|
|
569
623
|
→ interactive components → overlays/modals/tooltips
|
|
624
|
+
|
|
625
|
+
## Inline Styles
|
|
626
|
+
- **NUNCA** usar `style=""` ou `style={{}}` com propriedades de design (color, background, font, padding, margin, border)
|
|
627
|
+
- Exceção aceita: `background-image: url(...)` para URLs de imagem dinâmicas de dados externos
|
|
628
|
+
- Exceção aceita: `style="--css-var: valor"` para passar valores dinâmicos ao CSS (ex: `style="--card-delay:0.1s"`)
|
|
629
|
+
- Para `animation-delay` calculado: use `style="--delay: Xs"` + CSS `animation-delay: var(--delay, 0s)`
|
|
630
|
+
- Todos os outros valores de design devem vir de classes CSS com tokens TRDR
|
|
631
|
+
|
|
632
|
+
## Ícones
|
|
633
|
+
- HTML/Vue: `<span class="material-icons mi-sm">nome</span>` via Google Fonts CDN
|
|
634
|
+
- React: `<NomeIcon />` via @mui/icons-material
|
|
635
|
+
- Cor: SEMPRE via classe CSS com token DS (`.icon-brand`, `.icon-success`, `.icon-dim`, etc.)
|
|
636
|
+
- Tamanho: via classe `.mi-sm` (16px), `.mi-xs` (14px); padrão sem classe = 20px
|
|
637
|
+
- **NUNCA** usar `<svg>` inline para ícones
|
|
638
|
+
- **NUNCA** usar `style=""` para cor ou tamanho de ícones
|
|
639
|
+
|
|
640
|
+
## Logo
|
|
641
|
+
- HTML: `<img src="logo-trdr.svg" alt="TRDR" height="24">`
|
|
642
|
+
- Next.js: `<Image src="/logo-trdr.svg" alt="TRDR" width={105} height={41} />`
|
|
643
|
+
- Vue: `<img src="/logo-trdr.svg" alt="TRDR" :height="24">`
|
|
644
|
+
- Inline SVG: usar o conteúdo de `references/logo-trdr.svg` (viewBox="0 0 105 41", fill="#00D4FF")
|
|
645
|
+
- **NUNCA** usar texto ("TRDR" em `<span>`) como logo
|
|
646
|
+
- **NUNCA** usar outro arquivo SVG que não seja logo-trdr.svg
|
|
570
647
|
```
|
|
571
648
|
|
|
572
649
|
**For BATCHED mode:** Update `DS_PROGRESS.md`:
|
|
@@ -681,22 +758,42 @@ For each batch listed as PENDING in `DS_PROGRESS.md`:
|
|
|
681
758
|
| `linear-gradient(...)` using any non-DS colors | Flag — developer must decide: remove, replace with TRDR gradient token, or add new token to Hub |
|
|
682
759
|
| Gradient inside SVG data URI embedded in CSS | Flag |
|
|
683
760
|
|
|
684
|
-
**Font-size mapping:**
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
|
695
|
-
|
|
696
|
-
| `
|
|
697
|
-
|
|
|
698
|
-
|
|
|
699
|
-
| `
|
|
761
|
+
**Font-size mapping (bidirectional — CSS + HTML/JSX/Vue):**
|
|
762
|
+
|
|
763
|
+
When a CSS class has a `font-size` that maps to a DS text style, the fix is **two-part**:
|
|
764
|
+
|
|
765
|
+
**Part 1 — In the CSS file**: remove the properties already provided by the DS class:
|
|
766
|
+
- Remove: `font-family`, `font-size`, `font-weight`, `line-height` (the DS class provides these)
|
|
767
|
+
- Keep: `color`, `margin`, `padding`, `text-transform`, `letter-spacing` (project-specific overrides)
|
|
768
|
+
|
|
769
|
+
**Part 2 — In the HTML/JSX/Vue file**: add the DS class to the element that uses that CSS class:
|
|
770
|
+
|
|
771
|
+
| stylingMode | How to add |
|
|
772
|
+
|-------------|-----------|
|
|
773
|
+
| `plain-css` / `tailwind` | `<h1 class="hero-title trdr-h2">` |
|
|
774
|
+
| React/Next.js | `<h1 className="hero-title trdr-h2">` |
|
|
775
|
+
| Vue | `<h1 class="hero-title trdr-h2">` or `:class="['hero-title', 'trdr-h2']"` |
|
|
776
|
+
| `css-modules` | Add `composes: trdr-h2 from global;` inside `.hero-title` in the `.module.css` |
|
|
777
|
+
|
|
778
|
+
**font-size → DS class table:**
|
|
779
|
+
| font-size | DS Class | Notes |
|
|
780
|
+
|-----------|----------|-------|
|
|
781
|
+
| `80px` | `.trdr-h1` | JetBrains Mono 500 |
|
|
782
|
+
| `56px` | `.trdr-h2` | JetBrains Mono 500 |
|
|
783
|
+
| `46px` | `.trdr-h3` | JetBrains Mono 700 |
|
|
784
|
+
| `38px` | `.trdr-h4` | JetBrains Mono 500 |
|
|
785
|
+
| `32px` | `.trdr-h5` | JetBrains Mono 500 |
|
|
786
|
+
| `26px` | `.trdr-h6` | JetBrains Mono 500 |
|
|
787
|
+
| `22px` | `.trdr-h7` | Inter 600 |
|
|
788
|
+
| `18px` | `.trdr-body-b1` | Inter 400 |
|
|
789
|
+
| `16px` | `.trdr-body-b2` or `.trdr-label-l2` | check font-weight: 400→b2, 600→l2 |
|
|
790
|
+
| `14px` | `.trdr-body-b3` or `.trdr-label-l3` | check font-weight: 400→b3, 600→l3 |
|
|
791
|
+
| `12px` | `.trdr-body-b4` or `.trdr-body-aux` | check letter-spacing: 0.2px→b4, 0.24px→aux |
|
|
792
|
+
| `10px` | `.trdr-body-b5` | Inter 400 |
|
|
793
|
+
| other px | nearest DS class below the value | flag in DS_MIGRATION.md |
|
|
794
|
+
| `font-family: var(--font-mono)` (any size) | `.trdr-mono` | Roboto Mono 400 |
|
|
795
|
+
|
|
796
|
+
**IMPORTANT:** Always scan for the HTML element that uses the CSS class and add the DS class there. Do not only fix the CSS — the element in HTML/JSX/Vue must also receive the DS class so the typography takes effect immediately, before any cascading.
|
|
700
797
|
|
|
701
798
|
**Do NOT replace:**
|
|
702
799
|
- Hex values inside binary image files (PNG, JPG, GIF)
|
|
@@ -705,13 +802,60 @@ For each batch listed as PENDING in `DS_PROGRESS.md`:
|
|
|
705
802
|
|
|
706
803
|
**All other values MUST be replaced or flagged.** No exceptions for "decorative" gradients, shadows, or overlays.
|
|
707
804
|
|
|
708
|
-
### Step 6 — Apply component
|
|
805
|
+
### Step 6 — Apply DS component classes to HTML/JSX/Vue elements
|
|
709
806
|
|
|
710
807
|
Use the `replacementCandidates[]` list built in Phase 1 Step 3.5. For each entry:
|
|
711
808
|
|
|
712
809
|
1. **Look up the component** in the loaded catalog by slug (or by category, if slug is ambiguous).
|
|
713
|
-
|
|
714
|
-
|
|
810
|
+
|
|
811
|
+
2. **If `c.implemented === true`** — apply DS classes to the actual elements (CSS alone is not enough):
|
|
812
|
+
|
|
813
|
+
**Step 6a — Identify the project's custom CSS class** for that component role.
|
|
814
|
+
Grep the CSS/HTML/JSX for classes like `.btn-enroll`, `.lang-selector`, `.search-bar`, etc. that serve the same function.
|
|
815
|
+
|
|
816
|
+
**Step 6b — Map to DS classes:**
|
|
817
|
+
| Component role | DS classes to add |
|
|
818
|
+
|---|---|
|
|
819
|
+
| Primary / CTA button | `.trdr-btn .trdr-btn-primary` (+ `.trdr-btn-lg` if height ≥ 28px) |
|
|
820
|
+
| Ghost / outline button | `.trdr-btn .trdr-btn-ghost` |
|
|
821
|
+
| Secondary button | `.trdr-btn .trdr-btn-secondary` |
|
|
822
|
+
| Text input / search | `.trdr-text-input` |
|
|
823
|
+
| Segment / tab control | `.trdr-segment-control` on wrapper + `.trdr-segment` on each item |
|
|
824
|
+
| Active segment item | also add `.trdr-segment-active` |
|
|
825
|
+
| Inactive segment item | also add `.trdr-segment-inactive` |
|
|
826
|
+
| Generic card | `.card` (only for non-domain-specific cards) |
|
|
827
|
+
| Dropdown / select | `.trdr-dropdown` |
|
|
828
|
+
|
|
829
|
+
**Step 6c — Apply to HTML/JSX by framework:**
|
|
830
|
+
| stylingMode | How to add |
|
|
831
|
+
|---|---|
|
|
832
|
+
| `plain-css` | `class="custom-btn trdr-btn trdr-btn-primary"` |
|
|
833
|
+
| React/Next.js | `className="custom-btn trdr-btn trdr-btn-primary"` |
|
|
834
|
+
| Vue | `class="custom-btn trdr-btn trdr-btn-primary"` |
|
|
835
|
+
| JS template strings | Update the string template that generates the HTML |
|
|
836
|
+
|
|
837
|
+
**For JS-toggled state classes** (active/inactive managed by JavaScript):
|
|
838
|
+
- Keep the original class for `querySelector` selectors
|
|
839
|
+
- Add DS classes to the element's initial HTML
|
|
840
|
+
- Update any `classList.toggle`, `classList.add`, `classList.remove`, `setAttribute('class', ...)` calls to also toggle the DS state classes (e.g. `trdr-segment-active` / `trdr-segment-inactive`)
|
|
841
|
+
- Remove base CSS from the custom class (let DS provide height, padding, font, border, border-radius, background, color, cursor, transition)
|
|
842
|
+
- Keep only state-specific overrides in the custom class (e.g. `.custom-btn.active { border-color: var(--teal-mid); }`)
|
|
843
|
+
|
|
844
|
+
**Step 6d — Clean up redundant custom CSS:**
|
|
845
|
+
For each custom class that received DS classes, remove these properties (now provided by DS):
|
|
846
|
+
- `height`, `padding`, `font-family`, `font-size`, `font-weight`, `border`, `border-radius`, `background`, `color`, `cursor`, `transition`, `display`, `align-items`, `justify-content`
|
|
847
|
+
- Keep: `width`, `min-width`, `gap`, position-specific props, state overrides
|
|
848
|
+
|
|
849
|
+
**Step 6e — Document in DS_PROGRESS.md:**
|
|
850
|
+
```
|
|
851
|
+
### Componentes DS Aplicados
|
|
852
|
+
- [x] .btn-enroll → .trdr-btn .trdr-btn-ghost .trdr-btn-lg (index.html, cursos.js)
|
|
853
|
+
- [x] .lang-selector → .trdr-segment-control + .trdr-segment (index.html)
|
|
854
|
+
- [ ] .search-bar → .trdr-text-input (estrutura incompatível com ícone — revisão manual)
|
|
855
|
+
```
|
|
856
|
+
|
|
857
|
+
**Do NOT replace domain-specific components** (course cards, lesson rows, trading panels, etc.) — document them as "sem equivalente DS".
|
|
858
|
+
|
|
715
859
|
3. **If `c.implemented === false`** (stub):
|
|
716
860
|
- Add this banner comment above the affected element in the source file:
|
|
717
861
|
```
|
|
@@ -728,10 +872,13 @@ Use the `replacementCandidates[]` list built in Phase 1 Step 3.5. For each entry
|
|
|
728
872
|
- Recommended tokens: <c.tokens[]>
|
|
729
873
|
- Status: ⚠️ stub — code blocks pending
|
|
730
874
|
```
|
|
875
|
+
|
|
731
876
|
4. **If no slug matches** the detected pattern:
|
|
732
877
|
- Flag the pattern in `MISSING_COMPONENTS.md` under "Unmapped patterns" with the file location and a one-line description of the UI need.
|
|
733
878
|
|
|
734
|
-
### Step 6.5 — Replace wrong logos
|
|
879
|
+
### Step 6.5 — Replace wrong logos and fix logo usage in HTML/JSX
|
|
880
|
+
|
|
881
|
+
**Step 6.5a — Replace the SVG file on disk:**
|
|
735
882
|
|
|
736
883
|
Load the official TRDR logo from the skill directory:
|
|
737
884
|
```
|
|
@@ -743,24 +890,207 @@ Where `<skill-dir>` is `~/.claude/skills/trdr-ds/` or `<project>/.claude/skills/
|
|
|
743
890
|
If `references/logo-trdr.svg` is missing from the skill directory → STOP with:
|
|
744
891
|
> ❌ Logo reference missing. Run `npx trdr-ds-install@latest` to restore it.
|
|
745
892
|
|
|
746
|
-
|
|
893
|
+
For each file in `logoAudit.wrong`:
|
|
747
894
|
- Overwrite the file in place with the official logo content (same path, same filename).
|
|
748
895
|
- Report: `✅ Replaced [path] with official TRDR logo (105×41px, #00D4FF)`
|
|
749
896
|
|
|
750
|
-
|
|
897
|
+
If no logo files were found AND `public/` exists at the project root:
|
|
751
898
|
- Write the official logo to `public/logo-trdr.svg`.
|
|
752
899
|
- Report: `✅ Added official TRDR logo → public/logo-trdr.svg`
|
|
753
900
|
|
|
754
|
-
|
|
755
|
-
-
|
|
901
|
+
If no logo files found AND no `public/` exists:
|
|
902
|
+
- Log in DS_MIGRATION.md under "Manual steps": "Add logo-trdr.svg to your assets directory. Reference: <skill-dir>/references/logo-trdr.svg"
|
|
756
903
|
|
|
757
904
|
**Never modify correct logos** (`logoAudit.correct`) — they already match the official reference.
|
|
758
905
|
|
|
906
|
+
---
|
|
907
|
+
|
|
908
|
+
**Step 6.5b — Fix logo usage in HTML/JSX/Vue (Category K violations):**
|
|
909
|
+
|
|
910
|
+
After the SVG is on disk, scan for incorrect logo usage in HTML/JSX/Vue files and replace by framework:
|
|
911
|
+
|
|
912
|
+
**Plain HTML:**
|
|
913
|
+
- `<span [class]>TRDR</span>` used as logo → `<img src="logo-trdr.svg" alt="TRDR" height="[N]">` (preserve the original height or use 24px default)
|
|
914
|
+
- `<img src="[any-non-official-logo]">` → update `src` to `"logo-trdr.svg"`
|
|
915
|
+
- Remove any `style=""` attribute from the logo element after replacement
|
|
916
|
+
|
|
917
|
+
**React / Next.js:**
|
|
918
|
+
- `import Logo from './[non-official-logo]'` → `import LogoTrdr from './logo-trdr.svg'` (or from `@/public/logo-trdr.svg`)
|
|
919
|
+
- `<Image src="[non-official]" />` → `<Image src="/logo-trdr.svg" alt="TRDR" />`
|
|
920
|
+
- `<span>TRDR</span>` in a logo context → `<Image src="/logo-trdr.svg" alt="TRDR" height={24} width={105} />`
|
|
921
|
+
- Remove `style={{...}}` from the logo element after replacement
|
|
922
|
+
|
|
923
|
+
**Vue / Nuxt:**
|
|
924
|
+
- `:src="[non-official-logo-var]"` → update to `"/logo-trdr.svg"` (static string)
|
|
925
|
+
- `<span>TRDR</span>` → `<img src="/logo-trdr.svg" alt="TRDR" :height="24" />`
|
|
926
|
+
|
|
759
927
|
**For BATCHED mode:** Logo replacement always runs as part of the Foundation phase (before batched violation processing), regardless of project size. Update `DS_PROGRESS.md` after this step:
|
|
760
928
|
```
|
|
761
|
-
- [x] logos — [N] replaced, [M] already correct
|
|
929
|
+
- [x] logos — [N] SVG replaced, [M] HTML usages fixed, [P] already correct
|
|
930
|
+
```
|
|
931
|
+
|
|
932
|
+
### Step 6.6 — Replace inline SVG icons with icon library (Category J violations)
|
|
933
|
+
|
|
934
|
+
If Category J detected inline `<svg>` elements that are not the TRDR logo:
|
|
935
|
+
|
|
936
|
+
**Step 6.6a — Detect and install icon library by framework:**
|
|
937
|
+
|
|
938
|
+
| Framework | Library | Detection | Action if missing |
|
|
939
|
+
|-----------|---------|-----------|-------------------|
|
|
940
|
+
| Plain HTML | Material Icons (CDN) | Check `<link>` in `<head>` for `fonts.googleapis.com/icon` | Add CDN link to `<head>` |
|
|
941
|
+
| React/Next.js | @mui/icons-material | Check `package.json` | Suggest: `npm install @mui/icons-material` — do not install automatically |
|
|
942
|
+
| Vue | via CDN or vue-material-icons | Check `<link>` in template/index.html | Add CDN link |
|
|
943
|
+
|
|
944
|
+
For plain HTML and Vue (CDN approach), add to `<head>`:
|
|
945
|
+
```html
|
|
946
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
947
|
+
```
|
|
948
|
+
|
|
949
|
+
**Step 6.6b — Add icon CSS helpers (plain HTML / Vue CDN only):**
|
|
950
|
+
|
|
951
|
+
Add to the project's main CSS:
|
|
952
|
+
```css
|
|
953
|
+
/* Material Icons helpers */
|
|
954
|
+
.material-icons { font-size: 20px; display: inline-flex; align-items: center; color: inherit; user-select: none; }
|
|
955
|
+
.mi-sm { font-size: 16px; }
|
|
956
|
+
.mi-xs { font-size: 14px; }
|
|
957
|
+
```
|
|
958
|
+
|
|
959
|
+
**Step 6.6c — Add icon color classes** (do NOT use inline style for icon color — create CSS classes instead):
|
|
960
|
+
```css
|
|
961
|
+
.icon-brand { color: var(--content-brand); }
|
|
962
|
+
.icon-success { color: var(--context-trading-up); }
|
|
963
|
+
.icon-error { color: var(--content-error); }
|
|
964
|
+
.icon-warning { color: var(--content-warning); }
|
|
965
|
+
.icon-dim { color: var(--content-disabled); }
|
|
966
|
+
.icon-muted { color: var(--content-tertiary); }
|
|
967
|
+
```
|
|
968
|
+
|
|
969
|
+
**Step 6.6d — Map SVG content to icon names:**
|
|
970
|
+
|
|
971
|
+
Analyze the SVG path/shape content to identify the icon:
|
|
972
|
+
| SVG shape/content | Material Icon name |
|
|
973
|
+
|---|---|
|
|
974
|
+
| Circle + diagonal line (magnifying glass) | `search` |
|
|
975
|
+
| X / diagonal paths (close) | `close` |
|
|
976
|
+
| Left arrow / chevron | `chevron_left` or `arrow_back` |
|
|
977
|
+
| Right arrow / chevron | `chevron_right` or `arrow_forward` |
|
|
978
|
+
| Triangle play | `play_arrow` |
|
|
979
|
+
| Square stop | `stop` |
|
|
980
|
+
| Padlock | `lock` |
|
|
981
|
+
| Checkmark | `check` |
|
|
982
|
+
| Star | `star` |
|
|
983
|
+
| Three horizontal lines (hamburger) | `menu` |
|
|
984
|
+
| Plus sign | `add` |
|
|
985
|
+
| Warning triangle | `warning` |
|
|
986
|
+
| Info circle | `info` |
|
|
987
|
+
| Bell | `notifications` |
|
|
988
|
+
| User/person | `person` |
|
|
989
|
+
| Gear/cog | `settings` |
|
|
990
|
+
| Trash | `delete` |
|
|
991
|
+
| Pencil/edit | `edit` |
|
|
992
|
+
|
|
993
|
+
For SVG icons that cannot be mapped automatically: leave a `<!-- TODO: replace with Material Icon: [description] -->` comment and document in DS_MIGRATION.md.
|
|
994
|
+
|
|
995
|
+
**Step 6.6e — Replace by framework:**
|
|
996
|
+
|
|
997
|
+
| Framework | Replacement |
|
|
998
|
+
|-----------|------------|
|
|
999
|
+
| Plain HTML | `<span class="material-icons mi-sm">icon_name</span>` |
|
|
1000
|
+
| React (CDN) | `<span className="material-icons mi-sm">icon_name</span>` |
|
|
1001
|
+
| React (@mui) | `import SearchIcon from '@mui/icons-material/Search'` + `<SearchIcon sx={{ fontSize: 16 }} />` |
|
|
1002
|
+
| Vue (CDN) | `<span class="material-icons mi-sm">icon_name</span>` |
|
|
1003
|
+
|
|
1004
|
+
**Color of icon** — ALWAYS via class, NEVER inline style:
|
|
1005
|
+
```html
|
|
1006
|
+
<!-- Correct -->
|
|
1007
|
+
<span class="material-icons mi-xs icon-success">check</span>
|
|
1008
|
+
<!-- Wrong — never do this -->
|
|
1009
|
+
<span class="material-icons" style="color: var(--context-trading-up)">check</span>
|
|
762
1010
|
```
|
|
763
1011
|
|
|
1012
|
+
---
|
|
1013
|
+
|
|
1014
|
+
### Step 6.7 — Eliminate inline styles (Category I violations)
|
|
1015
|
+
|
|
1016
|
+
For each `style=""` / `style={{}}` violation detected in Category I:
|
|
1017
|
+
|
|
1018
|
+
**Decision tree:**
|
|
1019
|
+
|
|
1020
|
+
1. **Dynamic image URL** → keep as-is (acceptable exception):
|
|
1021
|
+
```html
|
|
1022
|
+
style="background-image: url('data/image.jpg')" ✅ keep
|
|
1023
|
+
```
|
|
1024
|
+
|
|
1025
|
+
2. **CSS custom property for dynamic value** → keep as-is (acceptable pattern):
|
|
1026
|
+
```html
|
|
1027
|
+
style="--card-delay: 0.1s" ✅ keep
|
|
1028
|
+
style={{ '--delay': animDelay }} ✅ keep
|
|
1029
|
+
```
|
|
1030
|
+
|
|
1031
|
+
3. **`animation-delay` with calculated value** → convert to CSS custom property:
|
|
1032
|
+
```html
|
|
1033
|
+
<!-- Before -->
|
|
1034
|
+
style="animation-delay: 0.15s"
|
|
1035
|
+
<!-- After -->
|
|
1036
|
+
style="--delay: 0.15s"
|
|
1037
|
+
```
|
|
1038
|
+
Then add to CSS: `animation-delay: var(--delay, 0s);`
|
|
1039
|
+
|
|
1040
|
+
4. **`background-size` / `background-position` alongside `background-image`** → move to CSS:
|
|
1041
|
+
```css
|
|
1042
|
+
/* Add selector that matches elements with background-image inline style */
|
|
1043
|
+
.element[style*="background-image"] { background-size: cover; background-position: center; }
|
|
1044
|
+
```
|
|
1045
|
+
|
|
1046
|
+
5. **Design token value as inline style** → create a CSS class:
|
|
1047
|
+
| Inline style | Action |
|
|
1048
|
+
|---|---|
|
|
1049
|
+
| `style="color: #hex"` | Create `.text-[name] { color: var(--semantic-token); }` and add class |
|
|
1050
|
+
| `style="background: #hex"` | Create `.bg-[name] { background: var(--semantic-token); }` and add class |
|
|
1051
|
+
| `style="font-family: X"` | Remove (handled by typography DS class from Step 5F) |
|
|
1052
|
+
| `style="padding: Npx"` | Create `.p-[name] { padding: var(--spacing-*); }` or use existing utility |
|
|
1053
|
+
|
|
1054
|
+
**By framework:**
|
|
1055
|
+
|
|
1056
|
+
Plain HTML:
|
|
1057
|
+
```html
|
|
1058
|
+
<!-- Before -->
|
|
1059
|
+
<span style="color: var(--teal)">TRDR</span>
|
|
1060
|
+
<!-- After -->
|
|
1061
|
+
<span class="text-brand">TRDR</span>
|
|
1062
|
+
<!-- + CSS: .text-brand { color: var(--content-brand); } -->
|
|
1063
|
+
```
|
|
1064
|
+
|
|
1065
|
+
React/Next.js:
|
|
1066
|
+
```jsx
|
|
1067
|
+
// Before
|
|
1068
|
+
<span style={{ color: '#00D4FF' }}>TRDR</span>
|
|
1069
|
+
// After
|
|
1070
|
+
<span className="text-brand">TRDR</span>
|
|
1071
|
+
// + CSS: .text-brand { color: var(--content-brand); }
|
|
1072
|
+
```
|
|
1073
|
+
|
|
1074
|
+
Vue:
|
|
1075
|
+
```html
|
|
1076
|
+
<!-- Before -->
|
|
1077
|
+
<span :style="{ color: brandColor }">TRDR</span>
|
|
1078
|
+
<!-- After — if value is always the brand token -->
|
|
1079
|
+
<span class="text-brand">TRDR</span>
|
|
1080
|
+
<!-- Keep :style only if the value is truly dynamic (changes at runtime based on data) -->
|
|
1081
|
+
```
|
|
1082
|
+
|
|
1083
|
+
**Add new utility classes to the project's main CSS** (not to components.css or tokens.css — those are skill-managed):
|
|
1084
|
+
Group new classes in a clearly labelled block at the bottom of the project's CSS, e.g.:
|
|
1085
|
+
```css
|
|
1086
|
+
/* === Project utilities (added by TRDR DS migration) === */
|
|
1087
|
+
.text-brand { color: var(--content-brand); }
|
|
1088
|
+
.icon-brand { color: var(--content-brand); }
|
|
1089
|
+
/* ... */
|
|
1090
|
+
```
|
|
1091
|
+
|
|
1092
|
+
---
|
|
1093
|
+
|
|
764
1094
|
### Step 7 — Generate DS_MIGRATION.md
|
|
765
1095
|
|
|
766
1096
|
Create `DS_MIGRATION.md` at the project root:
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "1.0",
|
|
3
|
-
"generatedAt": "2026-05-
|
|
4
|
-
"total":
|
|
5
|
-
"implemented":
|
|
3
|
+
"generatedAt": "2026-05-12T20:17:42.750Z",
|
|
4
|
+
"total": 18,
|
|
5
|
+
"implemented": 18,
|
|
6
6
|
"categories": {
|
|
7
7
|
"formulario": "Formulário / Controles",
|
|
8
8
|
"modal": "Modais / Overlays",
|
|
@@ -1327,9 +1327,9 @@
|
|
|
1327
1327
|
"implemented": true,
|
|
1328
1328
|
"code": {
|
|
1329
1329
|
"html": "<!-- Card com footer (variante componente) — Design System TRDR (Figma: 2316:2462) -->\n<a href=\"/destino\" class=\"card\">\n\n <!-- Container 1: conteúdo principal -->\n <div class=\"card-container1 card-has-footer\">\n <div class=\"card-header\">\n <!-- Ícone (opcional) -->\n <span class=\"card-icon material-symbols-outlined\">palette</span>\n <!-- Badges do header (opcional) -->\n <div class=\"card-badges\">\n <span class=\"trdr-badge trdr-badge-neutral\">Tokens</span>\n </div>\n </div>\n <!-- H-6: Space Grotesk 500, 26px -->\n <span class=\"card-title\">Design Tokens</span>\n <!-- B-3: Inter 400, 14px, content/tertiary -->\n <p class=\"card-desc\">Cores, espaçamentos e tokens semânticos do design system.</p>\n </div>\n\n <!-- Container 2: footer (opcional) -->\n <div class=\"card-footer\">\n <code class=\"card-figma-id\">2316:2462</code>\n <div class=\"card-badges\">\n <span class=\"trdr-badge trdr-badge-success\">Implementado</span>\n </div>\n </div>\n\n</a>",
|
|
1330
|
-
"css": "/* Card — Design System TRDR (Figma node: 2316:2462, 380×154) */\n.card {\n display: flex;\n flex-direction: column;\n gap: var(--
|
|
1331
|
-
"react": "'use client'\nimport Link from 'next/link'\nimport styles from './Card.module.css'\n\ninterface CardBadge {\n label: string\n variant?: 'neutral' | 'brand' | 'success'\n}\n\ninterface CardProps {\n href: string\n icon?: string // Material Symbols Outlined name (ex: 'palette')\n title: string\n description: string\n headerBadges?: CardBadge[] // badges no header (topo direito)\n footerLeft?: string // texto do footer (ex: Figma ID '2316:2462')\n footerBadges?: CardBadge[] // badges do footer\n className?: string\n}\n\nexport default function Card({\n href, icon, title, description,\n headerBadges, footerLeft, footerBadges, className = '',\n}: CardProps) {\n const hasFooter = footerLeft || (footerBadges && footerBadges.length > 0)\n\n return (\n <Link href={href} className={`${styles.card} ${className}`}>\n\n {/* Container 1 — conteúdo principal */}\n <div className={`${styles.container1} ${hasFooter ? styles.hasBorder : ''}`}>\n <div className={styles.header}>\n {icon && (\n <span\n className={styles.icon}\n style={{ fontVariationSettings: \"'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48\" }}\n >\n {icon}\n </span>\n )}\n {headerBadges && headerBadges.length > 0 && (\n <div className={styles.badges}>\n {headerBadges.map(b => (\n <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n {b.label}\n </span>\n ))}\n </div>\n )}\n </div>\n <span className={styles.title}>{title}</span>\n <p className={styles.desc}>{description}</p>\n </div>\n\n {/* Container 2 — footer (opcional) */}\n {hasFooter && (\n <div className={styles.container2}>\n {footerLeft && <code className={styles.footerLeft}>{footerLeft}</code>}\n {footerBadges && footerBadges.length > 0 && (\n <div className={styles.badges}>\n {footerBadges.map(b => (\n <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n {b.label}\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n\n </Link>\n )\n}\n\n/* Card.module.css — estrutura dois containers */\n/*\n.card {\n display: flex; flex-direction: column;\n gap: var(--
|
|
1332
|
-
"prompt": "Implemente o componente Card do Design System TRDR.\nReferência Figma: nó 2316:2462 (380×154)\n\nEstrutura de dois containers separados por borda:\n\nContainer 1 (conteúdo principal):\n- Header: ícone Material Symbols Outlined 44px ExtraLight (wght 100) em var(--content-brand) à esquerda + badges à direita (opcional)\n- Título H-6: Space Grotesk Medium 500, 26px, line-height 1.1, var(--content-secondary)\n- Descrição B-3: Inter Regular 400, 14px, line-height 1.2, var(--content-tertiary)\n- Quando há footer: recebe border-bottom 1px solid var(--border-subtle) + padding-bottom 12px\n\nContainer 2 (footer, opcional):\n- Esquerda: Figma ID em B-4 (Inter Medium 500, 12px, 0.2px tracking, var(--content-tertiary))\n- Direita: badges (trdr-badge-success = implementado, trdr-badge-brand = código)\n\nTokens TRDR obrigatórios:\n- Background: var(--surface-tertiary) → hover: var(--surface-secondary)\n- Border: 1px solid var(--border-subtle) → hover: var(--border-default)\n- Border radius: var(--
|
|
1330
|
+
"css": "/* Card — Design System TRDR (Figma node: 2316:2462, 380×154) */\n.card {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-md); /* 12px entre container1 e footer */\n min-width: 250px;\n padding: var(--spacing-2xl); /* 24px */\n background: var(--surface-tertiary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-md); /* 12px */\n text-decoration: none;\n overflow: hidden;\n transition: border-color 0.15s ease, background-color 0.15s ease;\n cursor: pointer;\n}\n\n.card:hover {\n border-color: var(--border-default);\n background: var(--surface-secondary);\n}\n\n/* Container 1 — conteúdo principal */\n.card-container1 {\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: flex-start;\n width: 100%;\n}\n\n/* Borda inferior quando há footer */\n.card-has-footer {\n border-bottom: 1px solid var(--border-subtle);\n padding-bottom: var(--spacing-md); /* 12px */\n}\n\n.card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n width: 100%;\n}\n\n/* Material Symbols Outlined — ExtraLight (wght 100) */\n.card-icon {\n font-family: 'Material Symbols Outlined';\n font-size: 44px;\n font-style: normal;\n line-height: 1;\n color: var(--content-brand);\n font-variation-settings: 'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48;\n}\n\n.card-badges {\n display: flex;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n}\n\n/* H-6: Space Grotesk Medium 500, 26px */\n.card-title {\n font-family: var(--font-primary); /* Space Grotesk */\n font-size: 26px;\n font-weight: 500;\n line-height: 1.1;\n color: var(--content-secondary);\n}\n\n/* B-3: Inter Regular 400, 14px */\n.card-desc {\n font-family: var(--font-secondary); /* Inter */\n font-size: 14px;\n font-weight: 400;\n line-height: 1.2;\n color: var(--content-tertiary);\n margin: 0;\n}\n\n/* Container 2 — footer */\n.card-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n}\n\n/* B-4: Inter Medium 500, 12px, 0.2px tracking */\n.card-figma-id {\n font-family: var(--font-secondary);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.2px;\n color: var(--content-tertiary);\n font-style: normal;\n}",
|
|
1331
|
+
"react": "'use client'\nimport Link from 'next/link'\nimport styles from './Card.module.css'\n\ninterface CardBadge {\n label: string\n variant?: 'neutral' | 'brand' | 'success'\n}\n\ninterface CardProps {\n href: string\n icon?: string // Material Symbols Outlined name (ex: 'palette')\n title: string\n description: string\n headerBadges?: CardBadge[] // badges no header (topo direito)\n footerLeft?: string // texto do footer (ex: Figma ID '2316:2462')\n footerBadges?: CardBadge[] // badges do footer\n className?: string\n}\n\nexport default function Card({\n href, icon, title, description,\n headerBadges, footerLeft, footerBadges, className = '',\n}: CardProps) {\n const hasFooter = footerLeft || (footerBadges && footerBadges.length > 0)\n\n return (\n <Link href={href} className={`${styles.card} ${className}`}>\n\n {/* Container 1 — conteúdo principal */}\n <div className={`${styles.container1} ${hasFooter ? styles.hasBorder : ''}`}>\n <div className={styles.header}>\n {icon && (\n <span\n className={styles.icon}\n style={{ fontVariationSettings: \"'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48\" }}\n >\n {icon}\n </span>\n )}\n {headerBadges && headerBadges.length > 0 && (\n <div className={styles.badges}>\n {headerBadges.map(b => (\n <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n {b.label}\n </span>\n ))}\n </div>\n )}\n </div>\n <span className={styles.title}>{title}</span>\n <p className={styles.desc}>{description}</p>\n </div>\n\n {/* Container 2 — footer (opcional) */}\n {hasFooter && (\n <div className={styles.container2}>\n {footerLeft && <code className={styles.footerLeft}>{footerLeft}</code>}\n {footerBadges && footerBadges.length > 0 && (\n <div className={styles.badges}>\n {footerBadges.map(b => (\n <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n {b.label}\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n\n </Link>\n )\n}\n\n/* Card.module.css — estrutura dois containers */\n/*\n.card {\n display: flex; flex-direction: column;\n gap: var(--spacing-md);\n padding: var(--spacing-2xl);\n background: var(--surface-tertiary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-md);\n text-decoration: none; cursor: pointer;\n transition: border-color 0.15s ease, background-color 0.15s ease;\n}\n.card:hover { border-color: var(--border-default); background: var(--surface-secondary); }\n.container1 { display: flex; flex-direction: column; gap: 8px; width: 100%; }\n.hasBorder { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--spacing-md); }\n.header { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }\n.icon { font-family: 'Material Symbols Outlined'; font-size: 44px; color: var(--content-brand); }\n.badges { display: flex; align-items: center; gap: 4px; }\n.title { font-family: var(--font-primary); font-size: 26px; font-weight: 500; color: var(--content-secondary); }\n.desc { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; color: var(--content-tertiary); margin: 0; }\n.container2 { display: flex; align-items: center; justify-content: space-between; width: 100%; }\n.footerLeft { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; color: var(--content-tertiary); }\n*/",
|
|
1332
|
+
"prompt": "Implemente o componente Card do Design System TRDR.\nReferência Figma: nó 2316:2462 (380×154)\n\nEstrutura de dois containers separados por borda:\n\nContainer 1 (conteúdo principal):\n- Header: ícone Material Symbols Outlined 44px ExtraLight (wght 100) em var(--content-brand) à esquerda + badges à direita (opcional)\n- Título H-6: Space Grotesk Medium 500, 26px, line-height 1.1, var(--content-secondary)\n- Descrição B-3: Inter Regular 400, 14px, line-height 1.2, var(--content-tertiary)\n- Quando há footer: recebe border-bottom 1px solid var(--border-subtle) + padding-bottom 12px\n\nContainer 2 (footer, opcional):\n- Esquerda: Figma ID em B-4 (Inter Medium 500, 12px, 0.2px tracking, var(--content-tertiary))\n- Direita: badges (trdr-badge-success = implementado, trdr-badge-brand = código)\n\nTokens TRDR obrigatórios:\n- Background: var(--surface-tertiary) → hover: var(--surface-secondary)\n- Border: 1px solid var(--border-subtle) → hover: var(--border-default)\n- Border radius: var(--radius-md) — 12px\n- Padding: var(--spacing-2xl) — 24px\n- Gap entre containers: var(--spacing-md) — 12px\n- Transição: border-color e background-color em 0.15s ease\n\nImplemente como componente React com CSS Module. Use as classes .trdr-badge e .trdr-badge-{variant} para os badges. O componente deve aceitar as props: href, icon?, title, description, headerBadges?, footerLeft?, footerBadges?."
|
|
1333
1333
|
}
|
|
1334
1334
|
},
|
|
1335
1335
|
{
|
|
@@ -1722,6 +1722,127 @@
|
|
|
1722
1722
|
"react": "import Janela from '@/components/ui/Janela'\nimport Boleta from '@/components/ui/Boleta'\n\n// Versão default — slot vazio mostra \"Componente coringa\"\n<Janela />\n\n// Com tabs/ferramentas customizadas e callback\n<Janela\n tools={[\n { label: 'Book', icon: 'view_list' },\n { label: 'Gráfico', icon: 'show_chart' },\n ]}\n tabs={['Mercado', 'Posições', 'Histórico']}\n activeTab={0}\n onTabChange={(i) => console.log('tab', i)}\n/>\n\n// Com conteúdo customizado no slot\n<Janela activeTab={2} showSideScroll showBottomScroll>\n <Boleta versao=\"simples\" />\n</Janela>\n\n// Com floating menu de ações aberto\n<Janela\n showActionsMenu\n onActionsMenuToggle={() => setMenuOpen(v => !v)}\n actions={[\n { icon: 'close', label: 'Fechar', onClick: handleClose },\n { icon: 'remove', label: 'Minimizar' },\n { icon: 'arrow_outward', label: 'Maximizar' },\n ]}\n/>",
|
|
1723
1723
|
"prompt": "Implemente o componente Janela do Design System TRDR — janela de ferramenta de trading composta, pixel-perfect com o Figma 1909:41600.\n\nDIMENSÕES (fixas): 476×312 px, border-radius var(--radius-md) (8px), border 1px solid var(--border-subtle), background var(--bg-secondary), overflow hidden, position relative, font-family var(--font-secondary). Layout em coluna com 3 faixas:\n\n1. HEADER (height 41px, bg var(--bg-secondary), border-bottom 1px var(--border-subtle), padding 0 8px, gap 8px):\n - Tag AI: padding 2px 4px, gap 2px, bg var(--bg-brand) #00D4FF, border-radius var(--radius-sm) 4px, texto \"AI\" Inter 11/600 var(--content-primary). Ícone Material \"auto_awesome\" 12px à esquerda.\n - Abas Ferramentas (flex:1, height 100%, overflow hidden): 3 botões \"Ferramenta N\", padding 0 12px, font Inter 14/16.8 var(--content-tertiary); ativa muda para var(--content-primary) e ganha ::after com height 2px var(--bg-brand) (#00D4FF) no bottom 0 left/right 0. Botão chevron 40×40 com ícone Material \"keyboard_arrow_down\" tertiary.\n - Controles à direita (gap 8px): divider vertical 1×33 var(--border-subtle); botão ícone \"link\" 24×24 cor var(--bg-brand) (cyan); botão \"Multi\" 33h padding 0 8px gap 4 bg var(--action-secondary-default) (#4A4A4A) radius var(--radius-lg) (16px) texto primary + chevron 16px; botões ícone \"more_horiz\" e \"close\" 24×24 tertiary.\n\n2. PILL TABS (height 45px, bg var(--bg-tertiary) #1A1A1A, padding 8px, gap 8px, border-bottom subtle, overflow hidden):\n - 5 pills \"Aba 1..Aba 5\". Cada pill 31h padding 8px 12px radius var(--radius-lg) Inter 14/16.8 whitespace nowrap.\n - Ativa: bg var(--action-secondary-default) #4A4A4A, texto var(--content-primary).\n - Inativa: bg var(--surface-secondary) #222222, texto var(--content-tertiary). Hover muda texto para var(--content-secondary).\n\n3. CONTAINER CENTRAL (flex 1, bg var(--bg-tertiary), padding 16px, gap 8px, position relative, overflow hidden):\n - Slot via children. Quando vazio mostrar fallback \"Componente coringa\" centralizado, Inter 14/16.8 var(--content-primary).\n - Scrollbars opcionais (controlados por props showSideScroll/showBottomScroll):\n • Lateral (right 0, top 0, bottom 6px, width 14px, bg var(--bg-secondary), border-left subtle): seta cima 12×12 Material \"arrow_drop_up\", track 6px com thumb radius 16 bg var(--action-secondary-default) 60% de altura, seta baixo \"arrow_drop_down\".\n • Inferior (left 0, right 14px, height 14px, bg var(--bg-secondary), border-top subtle): seta esquerda \"arrow_left\", track horizontal com thumb radius 16, seta direita \"arrow_right\".\n • Canto: quando ambos ativos, 14×14 no canto inferior direito com bg secondary e borders.\n\n4. FLOATING ACTIONS MENU (opcional, posição absoluta top 45px right 40px, width 172px):\n - bg var(--bg-secondary), border 1px var(--border-subtle), border-radius var(--radius-md) (8px), box-shadow 0 4px 12px rgba(0,0,0,0.30), padding 8px, gap 4px, z-index 10.\n - 5 ações: { close: Fechar, remove: Minimizar, arrow_outward: Maximizar, keep: Fixar, edit: Renomear aba }. Cada item: height 32px, padding 0 8px, gap 8px, border-radius var(--radius-sm), ícone Material 20px var(--content-tertiary), label Inter 14/16.8 var(--content-secondary). Hover bg var(--surface-secondary).\n\nAPI React (TypeScript): props { tools?: JanelaTool[]; activeTool?: number; onToolChange?; tabs?: string[]; activeTab?: number; onTabChange?; multiLabel?: string; onMultiClick?; onLinkClick?; onClose?; showSideScroll?: boolean; showBottomScroll?: boolean; showActionsMenu?: boolean; onActionsMenuToggle?; actions?: JanelaAction[]; children?: ReactNode }. Suporta estado controlado E não-controlado (defaultActiveTool/defaultActiveTab). aria-selected nas pills, aria-expanded no botão de menu, role=\"tab\"/\"tablist\"/\"menu\"/\"menuitem\".\n\nUse APENAS tokens semânticos do TRDR (var(--bg-*), var(--surface-*), var(--content-*), var(--action-*), var(--border-*), var(--radius-*), var(--spacing-*)). NUNCA hex direto. NUNCA --scale-spacing-* ou --scale-radius-* (não existem). O componente deve funcionar nos dois temas (light e dark) sem alterações."
|
|
1724
1724
|
}
|
|
1725
|
+
},
|
|
1726
|
+
{
|
|
1727
|
+
"slug": "news-card",
|
|
1728
|
+
"name": "News Card",
|
|
1729
|
+
"figmaId": "66:2373",
|
|
1730
|
+
"category": "trading",
|
|
1731
|
+
"description": "Card de notícia financeira — exibe título, fonte, tempo e indicador de sentimento (alta/baixa/neutro). Usado em feeds de notícias dentro do contexto de trading.",
|
|
1732
|
+
"implemented": true,
|
|
1733
|
+
"props": [
|
|
1734
|
+
{
|
|
1735
|
+
"name": "sentiment",
|
|
1736
|
+
"type": "enum",
|
|
1737
|
+
"values": [
|
|
1738
|
+
"up",
|
|
1739
|
+
"down",
|
|
1740
|
+
"neutral"
|
|
1741
|
+
]
|
|
1742
|
+
},
|
|
1743
|
+
{
|
|
1744
|
+
"name": "title",
|
|
1745
|
+
"type": "string",
|
|
1746
|
+
"values": []
|
|
1747
|
+
},
|
|
1748
|
+
{
|
|
1749
|
+
"name": "source",
|
|
1750
|
+
"type": "string",
|
|
1751
|
+
"values": []
|
|
1752
|
+
},
|
|
1753
|
+
{
|
|
1754
|
+
"name": "time",
|
|
1755
|
+
"type": "string",
|
|
1756
|
+
"values": []
|
|
1757
|
+
},
|
|
1758
|
+
{
|
|
1759
|
+
"name": "href",
|
|
1760
|
+
"type": "string",
|
|
1761
|
+
"values": []
|
|
1762
|
+
}
|
|
1763
|
+
],
|
|
1764
|
+
"dimensions": [
|
|
1765
|
+
{
|
|
1766
|
+
"label": "Default",
|
|
1767
|
+
"width": "100%",
|
|
1768
|
+
"height": "74px"
|
|
1769
|
+
},
|
|
1770
|
+
{
|
|
1771
|
+
"label": "Dot indicador",
|
|
1772
|
+
"width": "4px",
|
|
1773
|
+
"height": "4px"
|
|
1774
|
+
},
|
|
1775
|
+
{
|
|
1776
|
+
"label": "Botão de ação",
|
|
1777
|
+
"width": "20px",
|
|
1778
|
+
"height": "20px"
|
|
1779
|
+
}
|
|
1780
|
+
],
|
|
1781
|
+
"tokens": [
|
|
1782
|
+
{
|
|
1783
|
+
"property": "Border bottom",
|
|
1784
|
+
"token": "border.subtle",
|
|
1785
|
+
"value": "#222222"
|
|
1786
|
+
},
|
|
1787
|
+
{
|
|
1788
|
+
"property": "Dot — alta",
|
|
1789
|
+
"token": "context.trading.up",
|
|
1790
|
+
"value": "#4FE290"
|
|
1791
|
+
},
|
|
1792
|
+
{
|
|
1793
|
+
"property": "Dot — baixa",
|
|
1794
|
+
"token": "context.trading.down",
|
|
1795
|
+
"value": "#F34F45"
|
|
1796
|
+
},
|
|
1797
|
+
{
|
|
1798
|
+
"property": "Dot — neutro",
|
|
1799
|
+
"token": "content.tertiary",
|
|
1800
|
+
"value": "#A4A4A4"
|
|
1801
|
+
},
|
|
1802
|
+
{
|
|
1803
|
+
"property": "Título",
|
|
1804
|
+
"token": "content.primary",
|
|
1805
|
+
"value": "#FFFFFF"
|
|
1806
|
+
},
|
|
1807
|
+
{
|
|
1808
|
+
"property": "Fonte / Tempo",
|
|
1809
|
+
"token": "content.tertiary",
|
|
1810
|
+
"value": "#A4A4A4"
|
|
1811
|
+
},
|
|
1812
|
+
{
|
|
1813
|
+
"property": "Separador •",
|
|
1814
|
+
"token": "content.disabled",
|
|
1815
|
+
"value": "#4A4A4A"
|
|
1816
|
+
},
|
|
1817
|
+
{
|
|
1818
|
+
"property": "Hover BG",
|
|
1819
|
+
"token": "surface.secondary",
|
|
1820
|
+
"value": "#222222"
|
|
1821
|
+
},
|
|
1822
|
+
{
|
|
1823
|
+
"property": "Padding",
|
|
1824
|
+
"token": "spacing.sm + spacing.lg",
|
|
1825
|
+
"value": "8px 16px"
|
|
1826
|
+
},
|
|
1827
|
+
{
|
|
1828
|
+
"property": "Gap inner",
|
|
1829
|
+
"token": "spacing.sm",
|
|
1830
|
+
"value": "8px"
|
|
1831
|
+
},
|
|
1832
|
+
{
|
|
1833
|
+
"property": "Radius botão",
|
|
1834
|
+
"token": "radius.sm",
|
|
1835
|
+
"value": "4px"
|
|
1836
|
+
}
|
|
1837
|
+
],
|
|
1838
|
+
"anatomy": "Container (border-bottom subtle, padding 8px 16px):\n [Dot 4×4px] [Content flex-1 gap-8px] [Action 20×20px]\n Content:\n [Title — Inter 14/400/1.2 content-primary]\n [Meta row gap-8px h-16px]\n [Source 14/400] [• 12px disabled] [Time 14/400]",
|
|
1839
|
+
"notes": "O dot indicador sobe (up) ou desce (down) conforme sentimento da notícia. Hover aplica surface.secondary. Quando href é passado, o container se torna um <a> com target _blank.",
|
|
1840
|
+
"code": {
|
|
1841
|
+
"html": "<!-- News Card — Design System TRDR (Figma: 66:2373) -->\n<!-- sentiment: adicionar .trdr-news-card-dot-up | -down | -neutral -->\n<div class=\"trdr-news-card\">\n <div class=\"trdr-news-card-inner\">\n <div class=\"trdr-news-card-dot trdr-news-card-dot-up\"></div>\n <div class=\"trdr-news-card-content\">\n <p class=\"trdr-news-card-title\">Bitcoin ETF sees record inflows as institutional interest grows</p>\n <div class=\"trdr-news-card-meta\">\n <span class=\"trdr-news-card-source\">CoinDesk</span>\n <span class=\"trdr-news-card-sep\">•</span>\n <span class=\"trdr-news-card-time\">2h ago</span>\n </div>\n </div>\n <button class=\"trdr-news-card-action\" aria-label=\"Abrir notícia\">\n <span class=\"material-symbols-outlined\" style=\"font-size:12px;line-height:12px\">open_in_new</span>\n </button>\n </div>\n</div>",
|
|
1842
|
+
"css": "/* News Card — Design System TRDR (Figma node: 66:2373, 313×74) */\n.trdr-news-card {\n display: flex;\n flex-direction: column;\n padding: 8px 16px; /* --spacing-sm --spacing-lg */\n border-bottom: 1px solid var(--border-subtle); /* #222222 */\n width: 100%;\n cursor: pointer;\n text-decoration: none;\n transition: background-color 0.15s ease;\n}\n\n.trdr-news-card:hover {\n background-color: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-news-card-inner {\n display: flex;\n gap: 8px; /* --spacing-sm */\n align-items: flex-start;\n width: 100%;\n}\n\n.trdr-news-card-dot {\n width: 4px;\n height: 4px;\n border-radius: 9999px;\n flex-shrink: 0;\n margin-top: 6px;\n}\n\n.trdr-news-card-dot-up { background-color: var(--context-trading-up); } /* #4FE290 */\n.trdr-news-card-dot-down { background-color: var(--context-trading-down); } /* #F34F45 */\n.trdr-news-card-dot-neutral{ background-color: var(--content-tertiary); } /* #A4A4A4 */\n\n.trdr-news-card-content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n flex: 1;\n min-width: 0;\n}\n\n.trdr-news-card-title {\n font-family: var(--font-secondary);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.2;\n color: var(--content-primary); /* #FFFFFF */\n width: 100%;\n}\n\n.trdr-news-card-meta {\n display: flex;\n gap: 8px;\n align-items: center;\n height: 16px;\n white-space: nowrap;\n}\n\n.trdr-news-card-source,\n.trdr-news-card-time {\n font-family: var(--font-secondary);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.2;\n color: var(--content-tertiary); /* #A4A4A4 */\n}\n\n.trdr-news-card-sep {\n font-size: 12px;\n line-height: 16px;\n color: var(--content-disabled); /* #4A4A4A */\n}\n\n.trdr-news-card-action {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n border-radius: var(--radius-sm); /* 4px */\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--content-tertiary);\n transition: background-color 0.15s ease;\n}\n\n.trdr-news-card-action:hover {\n background-color: var(--surface-secondary);\n}",
|
|
1843
|
+
"react": "import NewsCard from '@/components/ui/NewsCard'\n\n// Notícia de alta (dot verde)\n<NewsCard\n sentiment=\"up\"\n title=\"Bitcoin ETF sees record inflows as institutional interest grows\"\n source=\"CoinDesk\"\n time=\"2h ago\"\n href=\"https://coindesk.com/article/...\"\n/>\n\n// Notícia de baixa (dot vermelho)\n<NewsCard\n sentiment=\"down\"\n title=\"Petrobras shares fall on dividend cut concerns\"\n source=\"Valor Econômico\"\n time=\"45m ago\"\n/>\n\n// Neutro com callback no botão de ação\n<NewsCard\n sentiment=\"neutral\"\n title=\"Banco Central mantém Selic em 10,5% ao ano\"\n source=\"Folha\"\n time=\"1h ago\"\n onShare={() => console.log('share clicked')}\n/>",
|
|
1844
|
+
"prompt": "Implemente o componente NewsCard do Design System TRDR — card de notícia financeira, pixel-perfect com o Figma 66:2373.\n\nDIMENSÕES (fixas): width 100%, border-bottom 1px solid var(--border-subtle) (#222222), padding 8px 16px, cursor pointer. Hover: background-color var(--surface-secondary) (#222222).\n\nLAYOUT INTERNO (flex-row, gap 8px, align-items flex-start):\n1. DOT INDICADOR (4×4px, border-radius 9999px, flex-shrink 0, margin-top 6px):\n - sentiment=\"up\" → background var(--context-trading-up) #4FE290\n - sentiment=\"down\" → background var(--context-trading-down) #F34F45\n - sentiment=\"neutral\" → background var(--content-tertiary) #A4A4A4\n\n2. CONTENT (flex: 1, flex-col, gap 8px, min-width 0):\n - Título: font-family var(--font-secondary), 14px/400/1.2, color var(--content-primary) #FFFFFF, width 100%\n - Meta row (flex-row, gap 8px, height 16px, white-space nowrap, align-items center):\n • Fonte: 14px/400/1.2 var(--content-tertiary) #A4A4A4\n • Separador \"•\": 12px/16px var(--content-disabled) #4A4A4A\n • Tempo: 14px/400/1.2 var(--content-tertiary) #A4A4A4\n\n3. BOTÃO DE AÇÃO (20×20px, border-radius var(--radius-sm) 4px, padding 4px, flex-shrink 0):\n - background transparent, border none, color var(--content-tertiary)\n - Hover: background var(--surface-secondary)\n - Ícone: Material Symbols \"open_in_new\" 12px\n\nAPI React: props { title: string; source: string; time: string; sentiment?: 'up' | 'down' | 'neutral'; href?: string; onShare?: () => void }\nQuando href é passado, renderizar como <a target=\"_blank\" rel=\"noreferrer\">, senão como <div>.\n\nUse APENAS tokens semânticos do TRDR. NUNCA hex direto. NUNCA --scale-spacing-* ou --scale-radius-*."
|
|
1845
|
+
}
|
|
1725
1846
|
}
|
|
1726
1847
|
]
|
|
1727
1848
|
}
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
<svg width="105" height="41" viewBox="0 0 105 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g clip-path="url(#
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="M14.5479 28.5224C16.0588 28.4998 17.2697 29.2256 17.7291 29.4554L17.7105 29.5251C17.3248 29.4994 16.6194 29.5978 15.8861 29.7323C15.1544 29.8664 14.3989 30.0356 13.9146 30.15C13.4488 30.2601 13.0847 30.3505 12.7884 30.4338C13.1446 30.0001 13.5408 29.5488 13.9623 29.1273C14.0101 29.0795 14.0546 29.0302 14.1004 28.9837C14.1057 28.9789 14.1125 28.9757 14.1177 28.9706C14.1267 28.9615 14.1336 28.9504 14.1418 28.9409C14.2851 28.7951 14.42 28.6565 14.5479 28.5224ZM8.19563 7.19806C8.82217 6.53017 9.59191 6.02208 10.415 5.63883C10.9921 5.55025 11.5611 5.4599 12.1289 5.36815C15.0027 4.78485 18.0354 5.56157 19.8166 8.0343C19.9503 8.20068 20.0767 8.36582 20.204 8.54046C20.2296 8.57526 20.2677 8.60074 20.3104 8.60951C20.353 8.61817 20.3978 8.60995 20.434 8.58672C20.4701 8.56338 20.496 8.52554 20.5058 8.48314C20.5153 8.44086 20.5074 8.39635 20.4864 8.35885C20.3772 8.16621 20.2674 7.9815 20.1481 7.79537C19.2623 6.15029 17.6082 5.05259 15.7832 4.57403C16.0251 4.57825 16.2451 4.58829 16.4378 4.6058H16.4392C17.532 4.72723 19.4111 4.99294 21.4856 5.08917C21.5152 5.15983 21.5464 5.22991 21.5789 5.29978C21.6618 5.64653 21.8201 5.95876 22.025 6.23615C21.3914 7.94116 21.0973 10.0929 22.2107 11.7639C22.2577 11.8678 22.3103 11.9692 22.3723 12.0663C22.4196 12.1402 22.4687 12.2143 22.5208 12.288C22.7813 12.8244 22.6186 14.0931 22.2556 14.9935C22.2262 15.0669 22.1943 15.1401 22.161 15.2124C22.1434 15.2501 22.1371 15.2934 22.1465 15.3346C22.1559 15.376 22.1805 15.4118 22.2149 15.4347C22.2492 15.4575 22.2913 15.4661 22.3329 15.4589C22.3747 15.4517 22.4126 15.4289 22.4407 15.3982C22.4983 15.3339 22.5545 15.2676 22.6078 15.1993C23.0511 14.5424 23.4815 13.8358 23.491 12.964C23.5637 13.002 23.6389 13.0379 23.7168 13.0697C24.7522 13.5493 26.1527 12.9047 26.3698 11.7963C26.4255 11.5264 26.3921 11.2139 26.231 10.9808C26.2066 10.9475 26.1724 10.9205 26.1323 10.9083C26.0918 10.8961 26.0488 10.8997 26.0121 10.918C25.9754 10.9363 25.9472 10.9687 25.9327 11.0084C25.9182 11.0481 25.9191 11.0917 25.9313 11.1313C25.9758 11.3044 25.9374 11.4794 25.8574 11.6361C25.501 12.2884 24.6815 12.5217 24.0531 12.2403C23.7915 12.1343 23.5445 11.9553 23.319 11.7328C22.096 10.5417 22.0741 8.54324 22.5187 6.77269C22.75 6.97931 23.0024 7.15768 23.2541 7.30786C23.2783 7.3222 23.3032 7.33718 23.328 7.35136C23.7395 7.58552 24.2686 7.76861 24.8251 7.64276C25.388 7.51775 25.7724 7.06682 25.9368 6.63182C25.9763 6.52994 26.0071 6.43061 26.0307 6.31418C26.0366 6.27351 26.0315 6.23034 26.0121 6.19333C25.9926 6.15632 25.9606 6.12794 25.9223 6.11461C25.8841 6.10137 25.8411 6.10394 25.8029 6.12083C25.7648 6.13781 25.7337 6.16826 25.7131 6.20369C25.6698 6.2666 25.6109 6.34587 25.5543 6.40947C25.0155 7.03615 24.4185 6.96022 23.7755 6.5752C23.7538 6.56254 23.7324 6.54975 23.7112 6.53722C23.1245 6.18229 22.5451 5.80285 22.1568 5.27561C22.1219 5.22119 22.0875 5.16571 22.054 5.10919C23.996 5.16728 26.0558 5.05887 27.7688 4.53329C31.5106 3.38514 33.5206 1.43254 34.6569 0.133898L34.719 0.171187C34.1424 1.69135 32.9609 3.04983 31.7125 4.13899C30.4828 5.21178 29.1847 6.02544 28.3275 6.47852C28.4531 6.62052 28.6314 6.90137 28.817 7.27885C29.0202 7.69201 29.2369 8.22312 29.4144 8.81667C29.7938 10.0862 29.8393 11.5975 29.6595 12.4965C29.5632 12.9787 29.5961 13.5346 29.6505 13.9819C29.6777 14.2051 29.71 14.4011 29.7341 14.546C29.7461 14.6181 29.7562 14.6789 29.7624 14.7235C29.7654 14.7454 29.7676 14.7645 29.7686 14.7794C29.7691 14.7869 29.7695 14.7945 29.7693 14.8008C29.7691 14.8065 29.7683 14.8147 29.7658 14.8222C29.7634 14.8294 29.7593 14.8356 29.7562 14.8402C29.7526 14.8453 29.7484 14.8513 29.7437 14.8568C29.7344 14.8676 29.7219 14.8804 29.7071 14.8948C29.6773 14.9237 29.6359 14.9615 29.5863 15.0045C29.4869 15.0908 29.3518 15.2029 29.2037 15.325C28.907 15.5696 28.5558 15.8553 28.3219 16.0631C28.0833 16.2753 27.8666 16.3716 27.6404 16.3801C27.4157 16.3883 27.1857 16.3094 26.9222 16.184C26.7819 16.1171 26.6195 16.0032 26.4568 15.8719C26.4212 15.7884 26.3796 15.7104 26.3263 15.6405C25.8945 15.075 25.3984 14.5579 24.8375 14.091C24.7975 14.0577 24.7566 14.0243 24.716 13.9915C24.6844 13.9662 24.6457 13.9477 24.6048 13.9439C24.5639 13.9402 24.5236 13.9512 24.4922 13.975C24.4608 13.999 24.4401 14.0352 24.4328 14.0758C24.4256 14.1163 24.4326 14.1581 24.4487 14.1952C24.4697 14.2431 24.4907 14.2915 24.5123 14.3389C24.7288 14.8141 24.9787 15.2641 25.2615 15.6889C25.1851 15.8931 25.0866 16.14 24.9142 16.445C24.5745 17.0459 24.1721 17.6491 23.8245 18.1327C23.752 18.2335 23.6808 18.3284 23.6139 18.4179C23.5069 17.8923 23.2785 17.3842 22.9558 17.0085C22.9179 16.9604 22.8795 16.9145 22.8391 16.8669C22.8123 16.8361 22.7765 16.8114 22.7362 16.8013C22.696 16.7914 22.6538 16.7959 22.6188 16.8151C22.5839 16.8344 22.558 16.8677 22.5449 16.907C22.5319 16.9464 22.5333 16.9894 22.5449 17.0285C22.5622 17.0855 22.5777 17.1404 22.5933 17.1956C22.8283 17.9896 22.8673 18.6428 22.7555 19.4171C22.7301 19.6405 22.7575 19.8877 22.855 20.138C22.877 20.1947 22.9037 20.2506 22.933 20.3072C22.8715 20.8644 22.8027 21.4957 22.7549 21.9313C22.7026 22.4063 22.6892 23.0702 22.6892 23.6155C22.6893 23.8876 22.6929 24.1302 22.6962 24.3047C22.6966 24.3282 22.6964 24.3506 22.6968 24.3716L21.7978 23.1577L21.2315 21.6675C21.2211 21.5093 21.1689 21.3407 21.11 21.1966C21.0385 21.0216 20.9378 20.8231 20.8151 20.6172C20.57 20.2058 20.2212 19.7361 19.8021 19.3169C19.3516 18.8664 19.133 18.4898 19.0384 18.1168C18.9426 17.7388 18.9602 17.3129 19.0757 16.733C19.0798 16.7214 19.0848 16.7104 19.0888 16.6991C19.2295 16.3043 19.4313 16.0296 19.7704 15.9126C20.1139 15.7912 20.5971 15.8373 21.043 15.9782C21.107 15.9987 21.1699 16.0211 21.2295 16.0459C21.2673 16.0625 21.3107 16.0684 21.3517 16.059C21.3924 16.0495 21.4278 16.0257 21.4504 15.992C21.4731 15.958 21.4816 15.9155 21.4746 15.8739C21.4676 15.8326 21.4457 15.7954 21.4159 15.7669C21.3568 15.7127 21.2964 15.6635 21.2329 15.6171C20.7926 15.3049 20.2455 15.0651 19.5984 15.1578C19.4149 15.1811 19.2433 15.2456 19.0867 15.3367C18.9386 14.5045 18.4976 13.6256 17.58 12.9281C16.9422 12.4434 16.107 11.7613 14.9656 11.3136C13.81 10.8606 12.359 10.6529 10.4654 11.0478C8.51635 11.4544 6.97772 12.7641 5.94587 13.9266C5.64282 14.2681 5.38018 14.6019 5.15935 14.9023C5.24904 14.2006 5.35366 13.4857 5.50048 12.7714C5.89959 10.8297 6.61212 8.88628 8.19563 7.19806ZM20.9498 23.4491C20.3496 24.3584 19.5971 25.7759 19.1295 27.6462L19.0577 27.642C18.8749 26.3618 18.9218 25.5078 19.0771 24.8302C19.1394 24.5579 19.2211 24.3148 19.3098 24.0837C19.4904 23.8837 19.6611 23.6901 19.8111 23.5078C20.0789 23.1822 20.3094 22.8689 20.4312 22.6253C20.4749 22.5379 20.5152 22.4635 20.552 22.4009L20.9498 23.4491ZM3.66987 21.6882C4.50222 21.2118 5.81135 20.6866 7.24753 20.5233C8.95348 20.3293 10.7814 20.646 12.218 22.0825C13.3221 23.1867 13.6844 24.7156 13.7254 26.0455C13.7457 26.7053 13.686 27.2994 13.608 27.7387C13.569 27.9586 13.5266 28.1346 13.4893 28.2566C13.4732 28.3089 13.4582 28.3463 13.4478 28.3712C13.4082 28.4114 13.3697 28.4534 13.3291 28.4941C13.2141 28.609 13.101 28.7263 12.99 28.8442C13.0174 28.7278 13.0413 28.6102 13.0598 28.4914C13.2959 27.0793 12.9413 25.4488 11.8347 24.4172C10.6703 23.2938 8.98345 22.9138 7.48853 23.1632C7.28216 23.198 7.07584 23.2452 6.87533 23.3124C6.83478 23.3263 6.79913 23.354 6.77797 23.3918C6.75684 23.4298 6.75088 23.4753 6.76208 23.5168C6.7734 23.5582 6.80198 23.5941 6.83942 23.6162C6.87688 23.638 6.92163 23.6441 6.96372 23.6355C7.14725 23.5987 7.34135 23.5784 7.53341 23.5685C8.94392 23.5015 10.3669 23.9833 11.2802 24.9717C12.1151 25.8462 12.3714 27.1375 12.1745 28.3533C12.0611 29.0769 11.8569 29.7946 11.5786 30.5153C11.26 30.9306 10.9925 31.3063 10.7907 31.5974C9.9737 32.3155 9.44581 32.7487 9.05397 32.9847L8.14522 33.9445C7.55087 34.7996 7.04492 36.3428 6.68682 37.6775C6.50783 38.3447 6.36658 38.9585 6.26973 39.4053C6.22133 39.6286 6.18436 39.8112 6.15925 39.937C6.14678 39.9994 6.1373 40.0482 6.13094 40.0813C6.12776 40.0978 6.12494 40.1108 6.12334 40.1193C6.12257 40.1234 6.12235 40.1268 6.12196 40.1289L6.12127 40.131L6.04807 40.1296V40.1269C6.04781 40.125 6.04716 40.122 6.04669 40.1186C6.04566 40.1108 6.04383 40.0985 6.04186 40.0834C6.03789 40.0528 6.0319 40.007 6.02459 39.9487C6.00994 39.8318 5.98958 39.6617 5.96521 39.4501C5.9164 39.0264 5.85296 38.4344 5.79465 37.7632C5.67854 36.4265 5.58176 34.7716 5.66137 33.4964C5.06447 32.8989 4.51197 32.3065 4.01721 31.7072C4.02071 31.6687 4.01285 31.6299 3.9965 31.5953C3.93245 31.4626 3.87123 31.334 3.81212 31.2107C3.56684 30.7055 3.32569 30.2342 3.09673 29.7647C2.19223 28.1379 2.68814 26.1874 4.19606 24.9406C4.29683 24.85 4.40427 24.7592 4.50956 24.6741C4.54271 24.6473 4.5667 24.6088 4.57447 24.5664C4.58202 24.5242 4.57363 24.4807 4.5503 24.4455C4.52677 24.4102 4.48952 24.385 4.44741 24.3758C4.40524 24.3666 4.36059 24.3748 4.32312 24.3951C4.19901 24.4629 4.07148 24.5377 3.95023 24.6147C2.80363 25.2104 1.98592 26.5233 1.83374 27.8871C1.8079 27.803 1.78169 27.7188 1.75848 27.6337C1.46221 26.5469 1.79954 25.2427 2.32886 24.0526C2.72653 23.1585 3.23443 22.3245 3.66987 21.6882ZM20.9843 19.9854C20.9584 20.0632 22.044 21.9892 22.0553 22.0093C22.0566 21.9914 22.2091 19.8039 22.0795 19.7243C21.9488 19.6463 21.0108 19.9071 20.9843 19.9854ZM6.61638 14.5212C7.5949 13.4188 8.97347 12.2741 10.6477 11.9248C12.3767 11.5641 13.6507 11.7597 14.639 12.1471C15.6414 12.5403 16.3724 13.1356 17.0379 13.6414C18.18 14.5096 18.3675 15.7105 18.1994 16.5513C18.072 17.1883 18.0255 17.7694 18.1697 18.3378C18.3156 18.9127 18.643 19.4242 19.1689 19.9502C19.5305 20.3118 19.834 20.722 20.0452 21.0764C20.1149 21.1935 20.1708 21.303 20.2171 21.3989C20.0207 21.5587 19.8284 21.8285 19.6302 22.2248C19.5568 22.3715 19.3833 22.6192 19.1199 22.9395C18.8633 23.2514 18.5416 23.6089 18.1946 23.9697C17.4954 24.6967 16.7172 25.4124 16.181 25.7955C15.5411 26.2526 15.0536 26.7128 14.5796 27.198C14.6132 26.8406 14.6334 26.4414 14.6204 26.0179C14.5758 24.5735 14.1826 22.7795 12.8519 21.4486C11.1638 19.7605 9.02839 19.4191 7.14602 19.6332C6.06978 19.7556 5.05786 20.0604 4.22644 20.4135L4.68703 18.3398C4.78344 17.844 4.85709 17.3262 4.92595 16.793C5.00523 16.7528 5.07442 16.6895 5.1193 16.6052V16.6038C5.1201 16.6024 5.12181 16.5999 5.12345 16.5969C5.12705 16.5903 5.13306 16.5796 5.14071 16.5658C5.15627 16.5379 5.18 16.4951 5.21184 16.4409C5.27586 16.3317 5.37283 16.1734 5.49979 15.9803C5.75463 15.5927 6.13141 15.0676 6.61638 14.5212ZM6.67577 33.4832C6.52502 33.6078 6.67467 35.4228 6.67577 35.4361C6.67901 35.4276 7.47871 33.3334 7.40773 33.2388C7.33552 33.1449 6.82727 33.3602 6.67577 33.4832ZM27.1819 12.0007C27.377 13.3672 26.45 14.0343 25.9617 14.1973C26.2058 14.4414 26.8398 14.783 27.4256 14.1973C28.0115 13.6115 27.5074 12.489 27.1819 12.0007ZM18.1497 20.0565C17.9544 21.0329 15.9525 22.9039 14.976 23.7177L15.2204 25.915C16.3598 24.9384 18.7355 22.7904 19.1261 22.0093C19.5165 21.2283 18.6379 20.382 18.1497 20.0565ZM6.43201 24.9393C4.72323 25.6716 3.25838 28.1129 3.74652 29.5776C4.23497 31.0418 6.43105 32.2618 7.40773 32.2624C8.38418 32.2624 11.3139 30.7977 11.3141 27.8685C11.314 24.9391 8.14083 24.2069 6.43201 24.9393ZM23.4606 14.9017C23.3791 15.4712 22.966 16.3349 24.0082 16.6383C24.0177 16.6256 24.5206 15.9466 24.3735 15.606C24.2241 15.2624 23.4606 14.9017 23.4606 14.9017ZM25.229 8.09506C25.4733 8.1766 26.2058 8.583 27.1819 9.559C28.1583 10.5354 28.4373 11.6794 28.5187 12.0864C28.9093 8.96195 27.8329 7.44433 27.1819 7.11865L25.229 8.09506ZM19.6806 17.1169C19.3702 17.4842 19.2645 18.291 20.0452 18.6816C21.0216 19.1698 21.3559 19.5798 21.844 18.6036C22.0881 18.1967 21.8704 17.3783 21.3489 17.0133C20.8276 16.6486 19.9913 16.7499 19.6806 17.1169ZM17.4177 15.9064C17.723 13.6477 8.9399 9.50526 6.25454 16.8828L5.69935 18.8356C6.54074 18.9944 9.63434 18.2909 11.803 19.5683C13.9564 20.837 14.7171 22.7741 14.7274 22.8007C14.7554 22.7765 16.6332 21.154 16.9426 20.3244C17.254 19.4886 17.2826 17.2739 17.4177 15.9064ZM8.87305 21.0329C5.35793 20.2518 3.82763 22.6602 3.50207 23.9622C3.82755 23.4739 5.11356 22.4491 7.65218 22.2538C10.1908 22.0585 12.1462 23.8644 12.7974 24.6782C12.9601 23.8645 12.3882 21.8141 8.87305 21.0329ZM22.8356 8.38371C22.9983 9.35992 23.4347 10.964 23.7996 11.3295C24.1645 11.6944 24.9632 11.5742 25.2076 11.3302C25.4517 11.0861 25.415 10.2338 24.6338 9.45265C23.8531 8.67209 23.0802 8.46516 22.8356 8.38371ZM20.3062 10.1301C20.5909 12.1228 20.5907 14.1674 20.5907 14.1973C20.5907 14.5878 21.0792 14.8486 21.3234 14.93C21.8116 14.2789 22.1311 12.4242 20.3062 10.1301ZM1.82546 29.0707C1.85694 29.1258 1.88611 29.1856 1.91661 29.2475C1.97788 29.4929 2.06626 29.7322 2.18315 29.9615C2.31521 30.4524 2.37537 31.0277 2.26947 31.6222C2.08815 32.6397 1.42893 33.707 -0.142565 34.4928L-0.188831 34.4382C0.216818 33.8703 0.800968 32.9198 1.23505 31.9178C1.45192 31.4171 1.63102 30.9042 1.73154 30.42C1.8321 29.9354 1.85341 29.4814 1.75778 29.0983L1.82546 29.0707ZM26.5231 3.99882C27.6601 3.51151 30.3228 2.04948 31.8796 0.103514L31.9424 0.141494C31.6153 0.877416 30.9528 1.95588 30.0289 2.80212C29.1049 3.64843 27.914 4.26586 26.5321 4.06856L26.4023 4.05061L26.5231 3.99882ZM14.976 6.62975C11.2655 4.87229 8.10496 9.13962 7.53134 10.3911C7.28556 10.9273 7.08876 11.5122 7.08871 12.1899C7.98393 11.2948 10.1947 9.68805 13.3187 10.0783C16.4432 10.4688 18.7187 12.8142 19.3699 13.4653C19.4512 11.9192 18.6865 8.38738 14.976 6.62975Z" fill="#00D4FF"/>
|
|
5
|
-
<path d="M22.1203 20.7376C22.1164 20.853 22.1103 20.9701 22.1051 21.0842L21.6742 21.3231C21.6279 21.2393 21.5787 21.1528 21.5306 21.0649L22.1203 20.7376ZM21.1535 20.3619C21.3172 20.3054 21.5145 20.2363 21.6935 20.1672C21.816 20.1199 21.9288 20.0739 22.016 20.0339C22.0595 20.014 22.0952 19.9956 22.1217 19.9807L22.1224 19.9801C22.1268 20.0717 22.1293 20.1827 22.1286 20.3053C22.0351 20.3478 21.9198 20.3962 21.7992 20.4427C21.6327 20.507 21.4515 20.5706 21.2951 20.625C21.2447 20.5306 21.1951 20.4424 21.1535 20.3619ZM26.2676 14.0532C26.3594 13.9984 26.4541 13.9305 26.5473 13.8495L27.4167 14.2051C27.3255 14.2949 27.233 14.3613 27.1412 14.4102L26.2676 14.0532ZM7.09082 34.3072C7.0555 34.4067 7.01828 34.506 6.9831 34.6028H6.62402C6.61957 34.5049 6.61559 34.4051 6.61297 34.3072H7.09082ZM27.6308 13.3171C27.6503 13.3282 27.669 13.3401 27.6881 13.3509C27.697 13.4651 27.6959 13.5774 27.6784 13.6851C27.6178 13.6504 27.5526 13.6126 27.4844 13.574C27.3252 13.4837 27.1505 13.3866 26.9872 13.295C27.0315 13.2102 27.0692 13.1189 27.1018 13.0215C27.2742 13.1179 27.4613 13.221 27.6308 13.3171ZM17.3252 21.4184C17.5607 21.7882 17.7129 22.2667 17.8065 22.7146C17.8592 22.9666 17.8942 23.2131 17.917 23.4313C17.8285 23.5203 17.7365 23.6097 17.6436 23.7006C17.626 23.4444 17.5883 23.1148 17.5172 22.7746C17.4331 22.3723 17.3061 21.9667 17.1243 21.6511C17.1932 21.5732 17.2606 21.4957 17.3252 21.4184ZM16.7438 22.0634C17.0041 22.3729 17.1416 22.8622 17.2113 23.3278C17.2486 23.5771 17.2673 23.8284 17.2755 24.0563C17.1793 24.1478 17.0828 24.2401 16.9855 24.3311C16.9866 24.0547 16.9706 23.7109 16.9199 23.372C16.8531 22.9258 16.7289 22.5197 16.5359 22.2754C16.6054 22.2049 16.6756 22.1349 16.7438 22.0634ZM17.8369 20.7314C18.042 21.026 18.2255 21.4411 18.3741 21.8459C18.4787 22.1307 18.5678 22.418 18.6386 22.6669C18.5664 22.7497 18.4873 22.8351 18.4045 22.9245C18.3306 22.6476 18.225 22.2955 18.0972 21.9474C17.9659 21.5896 17.8143 21.2476 17.6567 20.9944C17.722 20.9048 17.7822 20.8169 17.8369 20.7314ZM16.2922 22.5219C16.58 23.0739 16.618 23.7237 16.5884 24.2503C16.5784 24.4289 16.5587 24.5956 16.5394 24.7427C16.423 24.849 16.3088 24.9542 16.1962 25.0555C16.2009 25.0258 16.2063 24.9943 16.2114 24.9616C16.2413 24.7699 16.2777 24.5156 16.2936 24.233C16.3207 23.7501 16.2838 23.2013 16.0678 22.7367C16.1419 22.666 16.2176 22.5951 16.2922 22.5219ZM15.7032 23.0778L15.7501 23.0598C15.9628 23.6004 15.946 24.3103 15.8896 24.8704C15.8704 25.0611 15.8444 25.2375 15.8219 25.3883C15.7017 25.4947 15.5869 25.596 15.4787 25.6901C15.4853 25.6468 15.493 25.5971 15.5015 25.543C15.5301 25.3606 15.5685 25.115 15.5961 24.8407C15.6487 24.3192 15.6564 23.7182 15.505 23.258C15.5698 23.2001 15.6356 23.1396 15.7032 23.0778ZM7.34839 33.5332C7.32346 33.6176 7.2932 33.716 7.25793 33.8225L6.61642 33.7818C6.62464 33.6317 6.64109 33.5235 6.67167 33.489L7.34839 33.5332ZM4.46679 26.6644C5.55685 26.2831 6.95377 26.1648 8.06862 26.6755C8.70901 26.9688 9.25276 27.4689 9.58503 28.2361C9.88894 28.938 10.0088 29.8545 9.8785 31.0279C9.77209 31.1265 9.66285 31.2187 9.55257 31.3055H9.54981C9.73625 30.0133 9.61714 29.0529 9.31434 28.3535C9.01275 27.6571 8.52399 27.2083 7.9457 26.9434C6.80038 26.4188 5.29287 26.6111 4.21198 27.0808C4.2908 26.9399 4.37471 26.8 4.46679 26.6644ZM5.46806 25.5471C5.62038 25.4192 5.77779 25.3022 5.9397 25.1998C8.10437 25.018 9.4428 25.6855 10.2037 26.6741C10.8287 27.4862 11.0467 28.4939 11.0331 29.3692C10.9343 29.6213 10.8128 29.8565 10.6747 30.0757L10.6712 30.075C10.8442 29.1344 10.7212 27.831 9.96966 26.8543C9.23179 25.8957 7.86141 25.2181 5.46806 25.5471ZM20.5942 16.7863C20.7386 16.7888 20.8847 16.8106 21.023 16.8547C21.2417 17.1718 21.4129 17.5502 21.5402 17.916C21.6406 18.2045 21.715 18.4907 21.7695 18.7405C21.6886 18.8836 21.6109 18.9874 21.5326 19.0603C21.482 18.7745 21.3946 18.3958 21.2613 18.0127C21.1001 17.5499 20.8776 17.0968 20.5942 16.7863ZM23.3163 15.705C23.4431 15.7271 23.5835 15.758 23.7209 15.8002C23.9298 15.8644 24.1567 15.9626 24.31 16.1103C24.2772 16.1883 24.2387 16.2642 24.2002 16.3333L24.1505 16.3706C24.0662 16.2557 23.8749 16.1565 23.6346 16.0827C23.5329 16.0514 23.4286 16.027 23.3308 16.0081C23.3115 15.9106 23.3088 15.8087 23.3163 15.705ZM3.81976 27.9661C4.85879 27.5464 6.15277 27.3848 7.15366 27.8528C7.71673 28.1161 8.17967 28.5762 8.44496 29.285C8.69013 29.9402 8.76092 30.7998 8.60033 31.9042C8.49088 31.958 8.384 32.0055 8.28061 32.0471C8.47357 30.882 8.40467 30.0166 8.16943 29.3879C7.93148 28.7523 7.52251 28.351 7.02867 28.1201C6.06422 27.6691 4.74979 27.8613 3.72032 28.3307C3.74632 28.2101 3.78041 28.0885 3.81976 27.9661ZM23.4116 15.1401C23.6278 15.2003 23.9024 15.279 24.1505 15.3597C24.1638 15.364 24.1766 15.3698 24.1898 15.3742C24.2714 15.4498 24.3388 15.5272 24.3728 15.6055C24.393 15.6519 24.4009 15.7044 24.3997 15.7609C24.3019 15.7234 24.1852 15.681 24.0593 15.64C23.8245 15.5637 23.5644 15.4886 23.355 15.4301C23.3738 15.3317 23.3912 15.2334 23.4116 15.1401ZM19.6806 17.1171C19.7335 17.0546 19.8018 17.0002 19.8809 16.9541C20.2732 17.3265 20.5117 17.9091 20.6591 18.3953C20.7372 18.6527 20.7928 18.8907 20.8331 19.0665C20.8352 19.0754 20.8367 19.0842 20.8387 19.0927C20.7354 19.0455 20.6206 18.988 20.4941 18.9194C20.4617 18.7864 20.4241 18.6366 20.3767 18.4802C20.2278 17.9893 20.0016 17.4594 19.6578 17.1468C19.6655 17.1369 19.6727 17.1264 19.6806 17.1171ZM3.69754 29.3948C4.4642 29.0396 5.09578 28.9224 5.6117 28.9901C6.17031 29.0635 6.57678 29.3502 6.85397 29.7463C7.33257 30.4305 7.42626 31.4362 7.31524 32.2557C7.22518 32.2493 7.12666 32.2369 7.02177 32.2135C7.12649 31.4398 7.03329 30.5164 6.61228 29.9148C6.37786 29.5799 6.04225 29.3438 5.57372 29.2822C5.12363 29.2231 4.53652 29.3243 3.78316 29.6793C3.76993 29.6454 3.75727 29.6113 3.74587 29.5771C3.72617 29.518 3.71099 29.4569 3.69754 29.3948ZM27.628 10.0771C27.7688 10.0665 27.9322 10.0653 28.1038 10.0833C28.2552 10.0993 28.4162 10.1296 28.5747 10.1828C28.5827 10.2879 28.5908 10.3957 28.5947 10.5066C28.4274 10.4355 28.2475 10.3952 28.0727 10.3768C27.987 10.3678 27.9038 10.3657 27.8255 10.3657C27.7646 10.2702 27.6996 10.1733 27.628 10.0771ZM4.31902 30.5342C4.71601 30.3031 5.05521 30.2304 5.34101 30.2994C5.64668 30.3733 5.85119 30.5988 5.98113 30.8636C6.11054 31.1275 6.17422 31.4461 6.19382 31.7461C6.19767 31.8052 6.19803 31.864 6.19865 31.9221C6.09983 31.8761 6.0002 31.825 5.89965 31.7709C5.89953 31.7691 5.89977 31.7672 5.89965 31.7654C5.88157 31.4886 5.82357 31.2106 5.71666 30.9927C5.6101 30.7757 5.4631 30.6323 5.27126 30.586C5.09683 30.5439 4.85416 30.574 4.52341 30.7551C4.45222 30.6831 4.38382 30.6096 4.31902 30.5342ZM27.126 9.50603C27.4204 9.38337 27.8681 9.26805 28.4456 9.26503C28.4663 9.36026 28.4852 9.4587 28.5022 9.56058C28.0022 9.55658 27.613 9.64129 27.3483 9.73529C27.2951 9.67626 27.2399 9.61724 27.1819 9.5592C27.1636 9.54087 27.1441 9.52396 27.126 9.50603ZM5.70077 18.8303C6.70414 18.3146 8.23438 17.9019 9.91372 18.1639C11.7523 18.451 13.7505 19.5458 15.4242 22.1608C15.348 22.2336 15.2749 22.3023 15.2067 22.3658C13.5681 19.7813 11.6264 18.7299 9.86815 18.4554C8.53439 18.2472 7.29791 18.4838 6.3699 18.8503C6.08368 18.8617 5.85372 18.865 5.69939 18.8358L5.70077 18.8303ZM5.91139 18.0866C8.11859 17.1311 12.7912 16.6041 16.3633 21.183C16.2995 21.2575 16.2339 21.3333 16.1658 21.4081C12.5667 16.7518 7.81854 17.4812 5.80504 18.4595L5.91139 18.0866ZM6.08126 17.4872C8.14926 16.5064 12.6647 15.9674 17.0898 19.7259C17.0694 19.8443 17.0457 19.954 17.0214 20.0539C12.4659 16.0997 7.81928 16.8664 5.97146 17.8746L6.08126 17.4872ZM26.4513 8.89215C26.5717 8.81846 26.7258 8.74196 26.914 8.66979C27.2269 8.54989 27.6415 8.4407 28.1673 8.37632C28.205 8.46574 28.2415 8.55962 28.2757 8.65875C27.7364 8.71917 27.3219 8.82948 27.0196 8.94532C26.8867 8.99628 26.7777 9.04961 26.6889 9.09793C26.6069 9.02515 26.5282 8.95604 26.4513 8.89215ZM11.7747 23.6751C11.9492 23.6405 12.1488 23.6314 12.334 23.635C12.4515 23.6374 12.5679 23.6448 12.6752 23.6544C12.7143 23.7601 12.743 23.863 12.7656 23.9617C12.6356 23.9468 12.4825 23.933 12.3278 23.9299C12.243 23.9282 12.1602 23.9296 12.082 23.934C11.9863 23.8484 11.8832 23.7623 11.7747 23.6751ZM23.6001 11.028C23.859 11.0377 24.235 11.0327 24.5814 10.9872C24.767 10.9628 24.9395 10.9278 25.0785 10.8795C25.2013 10.8368 25.2823 10.7875 25.3292 10.7407C25.3459 10.8766 25.3409 10.9973 25.3188 11.0977C25.2724 11.12 25.2244 11.1414 25.1752 11.1585C25.0101 11.2158 24.8162 11.2542 24.62 11.28C24.3391 11.3169 24.0424 11.3279 23.7969 11.327C23.7329 11.2619 23.6666 11.1589 23.6001 11.028ZM20.5873 13.9538C20.7424 13.9912 20.9463 14.0281 21.1625 14.0594C21.3275 14.0833 21.4954 14.1033 21.6459 14.1202C21.6263 14.2231 21.6035 14.3195 21.5755 14.4088C21.4321 14.3926 21.2751 14.3739 21.1204 14.3515C20.9386 14.3252 20.7539 14.2931 20.5949 14.2583C20.5923 14.2384 20.5908 14.2182 20.5908 14.1975C20.5908 14.1975 20.5897 14.1101 20.5873 13.9538ZM25.7235 8.35491C26.1224 8.09346 26.8956 7.72085 27.7744 7.66852C27.8377 7.75508 27.9007 7.85059 27.9615 7.95647C27.1506 7.96123 26.4095 8.28524 25.9907 8.53652C25.8943 8.46764 25.8054 8.40683 25.7235 8.35491ZM10.8308 23.0308C11.0878 22.9694 11.3766 22.936 11.6504 22.9224C11.8683 22.9116 12.0817 22.9113 12.2691 22.9169C12.3461 23.02 12.4133 23.123 12.4722 23.2249C12.2522 23.2114 11.9628 23.2011 11.6649 23.2159C11.5088 23.2237 11.3534 23.2387 11.2057 23.2594C11.086 23.1805 10.9603 23.1051 10.8308 23.0308ZM6.24008 16.9279C8.37708 15.7984 12.9663 14.7068 17.2638 18.0341C17.2555 18.1534 17.248 18.272 17.2389 18.3891C12.8336 14.8604 8.08098 16.1831 6.12614 17.3291L6.24008 16.9279ZM23.366 10.4624C23.615 10.4085 23.9354 10.3266 24.2561 10.2187C24.5239 10.1285 24.783 10.0187 25.0019 9.90102C25.0594 9.98848 25.1079 10.0756 25.1497 10.1607C24.9054 10.2929 24.6241 10.4063 24.3507 10.4983C24.0376 10.6037 23.725 10.6846 23.473 10.7407C23.4375 10.6534 23.4007 10.5605 23.366 10.4624ZM20.6253 13.3647C20.739 13.3692 20.8817 13.3655 21.0355 13.3564C21.2557 13.3434 21.4932 13.3184 21.6908 13.295C21.6975 13.3971 21.7006 13.4954 21.6991 13.5905C21.5026 13.6134 21.2707 13.6378 21.0534 13.6506C20.8952 13.66 20.7412 13.6646 20.6135 13.6596C20.6021 13.6591 20.5909 13.6567 20.5797 13.6561C20.5775 13.5665 20.573 13.4674 20.5694 13.3599C20.5868 13.3611 20.6054 13.364 20.6253 13.3647ZM20.5928 12.7923C20.687 12.782 20.8206 12.7573 20.9733 12.7239C21.1663 12.6817 21.383 12.6258 21.5775 12.5741C21.6018 12.6729 21.6238 12.769 21.6404 12.8634C21.4459 12.9149 21.2299 12.9695 21.0362 13.0119C20.8811 13.0458 20.7355 13.0737 20.6253 13.0858C20.6038 13.0881 20.5821 13.0866 20.5611 13.0878C20.5585 13.026 20.5565 12.9622 20.5535 12.8966L20.5811 12.891C20.5756 12.8642 20.5628 12.845 20.55 12.831C20.5494 12.8188 20.5486 12.8066 20.5479 12.7944C20.5606 12.7936 20.5756 12.7942 20.5928 12.7923ZM9.78943 22.5488C10.4037 22.314 11.0704 22.2101 11.5282 22.1746C11.6474 22.266 11.7569 22.359 11.8569 22.4535C11.5211 22.4569 10.8595 22.5189 10.2113 22.7153C10.0746 22.6551 9.93383 22.5998 9.78943 22.5488ZM6.59225 16.0813C7.71124 15.5201 9.33621 14.9596 11.138 14.8155C13.1434 14.6553 15.3756 15.0109 17.3694 16.4632C17.3609 16.5784 17.3533 16.6968 17.3452 16.8174C15.3832 15.3213 13.1657 14.9488 11.1608 15.109C9.21173 15.2649 7.47488 15.9238 6.39338 16.5219C6.45626 16.3694 6.52397 16.2232 6.59225 16.0813ZM23.1644 9.82161C23.362 9.72748 23.5963 9.61124 23.8169 9.48255C23.9812 9.38672 24.1369 9.28636 24.2651 9.18908C24.2788 9.17864 24.2909 9.16613 24.3038 9.15593C24.378 9.2166 24.4535 9.28141 24.5289 9.35204C24.5007 9.37543 24.4738 9.40185 24.4439 9.42455C24.303 9.53152 24.1357 9.63801 23.9654 9.73736C23.7206 9.88016 23.4608 10.008 23.2479 10.1082C23.2189 10.0146 23.1919 9.91847 23.1644 9.82161ZM20.541 12.0431C20.6302 12.043 20.8254 12.0153 21.0465 11.9768C21.1541 11.958 21.2639 11.9351 21.3648 11.9153C21.4026 12.0105 21.4377 12.1036 21.4684 12.1957C21.3533 12.2184 21.2235 12.2454 21.0969 12.2675C20.8819 12.3049 20.6597 12.3379 20.5403 12.3379V12.1901L20.541 12.0431ZM8.70736 22.2857C9.143 22.0545 9.66555 21.8817 10.1133 21.7596C10.3023 21.708 10.4804 21.6651 10.6353 21.6297C10.7777 21.6991 10.9115 21.771 11.0372 21.8452C11.0023 21.8523 10.9638 21.86 10.9226 21.8687C10.7306 21.909 10.4732 21.967 10.1906 22.0441C9.87058 22.1313 9.52396 22.2422 9.20454 22.3769C9.04254 22.3389 8.87673 22.3086 8.70736 22.2857ZM21.0983 11.3311C21.1471 11.4236 21.1923 11.515 21.2343 11.6053L20.4803 11.7489C20.4725 11.6517 20.4644 11.5531 20.4554 11.4533L21.0983 11.3311ZM7.23928 14.9868C8.30207 14.4142 9.75819 13.8631 11.3611 13.6658C13.1758 13.4425 15.1849 13.6739 17.0221 14.8466C17.1812 15.0463 17.2972 15.246 17.3625 15.4398C15.4656 14.0122 13.3273 13.7211 11.397 13.9586C9.56495 14.1842 7.92882 14.8856 6.88366 15.533C6.99709 15.3397 7.11542 15.1576 7.23928 14.9868ZM23.0981 9.14074C23.2414 9.05149 23.4146 8.90997 23.6056 8.69534C23.6886 8.73862 23.7749 8.78816 23.8646 8.84381C23.6418 9.10242 23.4346 9.27866 23.2535 9.3914C23.1911 9.43016 23.1306 9.46086 23.0739 9.4867C23.0487 9.38859 23.0236 9.29079 23.0007 9.19391C23.0307 9.17843 23.0638 9.16204 23.0981 9.14074ZM18.1787 12.3642C18.6073 12.22 18.9847 12.2094 19.2863 12.2606C19.304 12.3668 19.3179 12.4703 19.3298 12.5706C19.1022 12.518 18.8016 12.5021 18.4467 12.592C18.3618 12.5179 18.2723 12.4419 18.1787 12.3642ZM7.50928 22.2685C8.34189 21.697 9.00278 21.3948 9.47869 21.2341C9.50375 21.2256 9.52925 21.2197 9.55326 21.212C9.731 21.2656 9.90006 21.3215 10.0601 21.3818C9.93587 21.4071 9.77286 21.4464 9.57329 21.5137C9.20413 21.6384 8.7059 21.8552 8.08795 22.2395C7.9448 22.2379 7.79943 22.2427 7.65222 22.254C7.60405 22.2577 7.55656 22.2642 7.50928 22.2685ZM17.0345 11.5182C17.717 11.2323 18.3055 11.2282 18.7629 11.3256C18.8843 11.3514 18.9959 11.3848 19.0971 11.4209C19.1318 11.5412 19.1601 11.6603 19.1876 11.7765C19.0548 11.7157 18.8918 11.6555 18.7015 11.6149C18.3409 11.5382 17.8781 11.5298 17.3335 11.7192C17.2367 11.6516 17.1367 11.585 17.0345 11.5182ZM6.60261 22.3935C7.22426 21.7039 7.91425 21.2339 8.44081 20.953C8.5813 20.9749 8.72567 21.0004 8.87309 21.0331C8.88955 21.0368 8.90578 21.0411 8.92212 21.0449C8.47965 21.2363 7.76581 21.6485 7.08875 22.3147C6.92035 22.3373 6.75845 22.3639 6.60261 22.3935ZM16.2535 11.0535C17.154 10.4557 18.0754 10.324 18.7035 10.3561C18.7504 10.4586 18.7935 10.5611 18.8347 10.6627C18.3 10.6077 17.4229 10.6805 16.5456 11.2158C16.4503 11.1604 16.3526 11.1069 16.2535 11.0535ZM5.72563 22.6089C6.28487 21.8813 6.9098 21.2781 7.37325 20.884C7.52129 20.8785 7.67401 20.8814 7.83176 20.8895C7.43829 21.1969 6.80537 21.7611 6.20832 22.477C6.03915 22.5176 5.8783 22.5616 5.72563 22.6089ZM6.4721 21.0076C6.64187 20.9661 6.81964 20.9344 7.00588 20.913C6.59481 21.2827 5.90195 21.9756 5.30993 22.7512C5.11587 22.8252 4.938 22.9039 4.77546 22.9846C5.3012 22.217 5.97262 21.4927 6.4721 21.0076ZM15.4021 10.644C16.4552 9.78839 17.4928 9.47978 18.1877 9.41074C18.2478 9.50424 18.3043 9.59852 18.359 9.69248C17.7606 9.72378 16.758 9.9693 15.7101 10.7794C15.609 10.7328 15.5064 10.6875 15.4021 10.644ZM5.44251 21.4157C5.68045 21.2795 5.94227 21.1642 6.22903 21.0752C5.91449 21.3585 5.44451 21.8131 5.00748 22.3051C4.71157 22.6382 4.43628 22.9818 4.2327 23.2967C4.02197 23.4368 3.85437 23.5748 3.72723 23.7L3.69201 23.6855C3.87967 23.2108 4.3238 22.6314 4.7872 22.1097C5.0054 21.864 5.23115 21.627 5.44251 21.4157ZM14.3545 10.2843C15.5895 9.04843 16.7463 8.61844 17.5331 8.54066C17.6141 8.63334 17.6912 8.72735 17.7658 8.82171C17.1008 8.83212 15.9551 9.14896 14.6784 10.3789C14.5718 10.3452 14.4638 10.3138 14.3545 10.2843ZM13.0929 10.0543C14.5016 8.51106 15.8977 7.94567 16.8018 7.81353C16.9022 7.90044 16.9986 7.98899 17.0918 8.0787C16.3337 8.12215 14.9259 8.55749 13.4562 10.0985C13.4106 10.0919 13.3646 10.0842 13.3187 10.0785C13.243 10.069 13.1676 10.0615 13.0929 10.0543ZM11.8141 10.0391C13.3052 8.31376 14.8387 7.45095 15.8275 7.09745C15.9347 7.16436 16.039 7.23255 16.1403 7.30254C15.2705 7.56843 13.743 8.33626 12.2215 10.0198C12.0835 10.0224 11.9477 10.0292 11.8141 10.0391ZM10.221 10.3354C11.3055 8.92239 12.3377 7.9482 13.2048 7.30185C13.7266 6.91296 14.1915 6.64177 14.5721 6.46354C14.6978 6.50917 14.8247 6.56021 14.9519 6.6196C14.5642 6.77163 14.0232 7.05874 13.3802 7.53801C12.5994 8.11999 11.6738 8.98108 10.6926 10.2104C10.5312 10.2479 10.3738 10.289 10.221 10.3354ZM8.91866 10.8685C10.2377 8.61145 12.1707 7.01839 13.4127 6.22116C13.5688 6.23048 13.7264 6.24829 13.8857 6.27709C12.7794 6.92792 10.8146 8.43148 9.4117 10.6337C9.23999 10.708 9.07566 10.7869 8.91866 10.8685ZM7.63289 11.7054C7.77812 10.6889 8.85817 8.45515 12.1179 6.35167C12.2666 6.31309 12.4172 6.28134 12.5702 6.25845L12.64 6.37239C9.47805 8.30578 8.29136 10.364 7.99128 11.434C7.86296 11.5251 7.7437 11.6165 7.63289 11.7054Z" fill="#00D4FF"/>
|
|
6
|
-
<path d="
|
|
2
|
+
<g clip-path="url(#clip0_2475_3136)">
|
|
3
|
+
<path d="M22.1577 24.6517C25.8727 20.9367 29.6444 17.278 33.4721 13.6756C33.8973 13.2754 34.3229 12.8757 34.7495 12.4769C34.3507 12.9035 33.951 13.3291 33.5508 13.7543C29.9484 17.582 26.2897 21.3537 22.5747 25.0687C18.8596 28.7838 15.0874 32.443 11.2597 36.0455C10.8344 36.4457 10.4088 36.8454 9.98217 37.2442C10.381 36.8176 10.7807 36.392 11.1809 35.9667C14.7834 32.139 18.4426 28.3668 22.1577 24.6517Z" fill="#00D4FF"/>
|
|
4
|
+
<path d="M14.5478 28.5229C16.0588 28.5003 17.2697 29.2261 17.7291 29.4558L17.7105 29.5256C17.3248 29.4999 16.6195 29.5983 15.8861 29.7327C15.1544 29.8669 14.3989 30.0361 13.9146 30.1505C13.4488 30.2605 13.0847 30.351 12.7884 30.4343C13.1445 30.0006 13.5409 29.5492 13.9623 29.1278C14.0095 29.0806 14.0537 29.0315 14.099 28.9856C14.1047 28.9804 14.1121 28.9765 14.1176 28.9711C14.1288 28.9599 14.1382 28.9469 14.148 28.9352C14.2889 28.7917 14.4219 28.655 14.5478 28.5229Z" fill="#00D4FF"/>
|
|
5
|
+
<path d="M20.5403 12.0426C20.6294 12.0426 20.8249 12.0148 21.0458 11.9763C21.1531 11.9576 21.2633 11.9346 21.3641 11.9149C21.4019 12.01 21.437 12.1032 21.4677 12.1952C21.3527 12.218 21.2226 12.245 21.0962 12.267C20.8814 12.3044 20.6589 12.3375 20.5396 12.3375V12.1897L20.5403 12.0426Z" fill="#00D4FF"/>
|
|
6
|
+
<path d="M13.0936 10.0539C14.502 8.51099 15.8978 7.94588 16.8018 7.81379C16.902 7.90063 16.9986 7.98932 17.0918 8.07896C16.3336 8.12243 14.9259 8.55779 13.4561 10.0988C13.4106 10.0922 13.3653 10.0852 13.3194 10.0794C13.2439 10.07 13.168 10.061 13.0936 10.0539Z" fill="#00D4FF"/>
|
|
7
|
+
<path d="M10.2217 10.3349C11.3058 8.9225 12.3371 7.94766 13.2041 7.30142C13.7258 6.91257 14.1915 6.64203 14.572 6.4638C14.6978 6.50944 14.8254 6.55977 14.9525 6.61917C14.5648 6.77113 14.0229 7.05802 13.3795 7.53758C12.5988 8.11955 11.673 8.98082 10.6919 10.2099C10.5311 10.2474 10.3739 10.2888 10.2217 10.3349Z" fill="#00D4FF"/>
|
|
8
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.19563 7.19853C8.82213 6.53068 9.59196 6.02254 10.415 5.6393C10.9921 5.55072 11.5611 5.46037 12.1289 5.36861C15.0027 4.78531 18.0354 5.56203 19.8166 8.03476C19.9502 8.20105 20.0768 8.36638 20.204 8.54092C20.2295 8.57556 20.2678 8.60123 20.3104 8.60998C20.3528 8.61858 20.3978 8.61029 20.434 8.58719C20.47 8.56393 20.4959 8.52582 20.5058 8.48361C20.5153 8.44146 20.5072 8.39674 20.4864 8.35931C20.3772 8.16679 20.2673 7.98185 20.1481 7.79584C19.2623 6.15079 17.6082 5.05307 15.7832 4.5745C16.0251 4.57872 16.2451 4.58876 16.4378 4.60626H16.4392C17.532 4.7277 19.4111 4.99341 21.4856 5.08964C21.5151 5.16013 21.5465 5.23055 21.5789 5.30025C21.6618 5.64677 21.8202 5.95937 22.025 6.23661C21.3916 7.94152 21.0975 10.0935 22.2107 11.7643C22.2576 11.8681 22.3104 11.9698 22.3723 12.0668C22.4195 12.1405 22.4688 12.2149 22.5208 12.2885C22.7809 12.8252 22.6184 14.0938 22.2556 14.994C22.2263 15.0672 22.1942 15.1407 22.161 15.2129C22.1436 15.2505 22.1372 15.294 22.1465 15.3351C22.156 15.3762 22.1806 15.4124 22.2148 15.4352C22.2491 15.4579 22.2913 15.4665 22.3329 15.4594C22.3746 15.4522 22.4126 15.4293 22.4407 15.3986C22.4983 15.3345 22.5546 15.268 22.6078 15.1997C23.051 14.543 23.4813 13.836 23.491 12.9645C23.5637 13.0024 23.6389 13.0384 23.7168 13.0701C24.752 13.5495 26.1524 12.9048 26.3698 11.7968C26.4254 11.527 26.3919 11.2144 26.231 10.9813C26.2067 10.948 26.1724 10.921 26.1322 10.9088C26.0918 10.8966 26.0488 10.9001 26.0121 10.9184C25.9754 10.9368 25.9472 10.9693 25.9327 11.0089C25.9184 11.0484 25.9191 11.0923 25.9313 11.1318C25.9756 11.3047 25.9373 11.48 25.8574 11.6366C25.5009 12.2885 24.6813 12.522 24.053 12.2408C23.7916 12.1348 23.5444 11.9557 23.319 11.7333C22.0961 10.5423 22.0743 8.5436 22.5187 6.77316C22.7499 6.97966 23.0026 7.15821 23.2541 7.30832C23.2782 7.32259 23.3033 7.33773 23.328 7.35182C23.7394 7.58588 24.2688 7.76899 24.8251 7.64323C25.3878 7.51826 25.7723 7.06716 25.9368 6.63229C25.9762 6.53054 26.0071 6.43087 26.0307 6.31464C26.0366 6.27411 26.0314 6.23072 26.0121 6.1938C25.9926 6.15687 25.9604 6.12845 25.9223 6.11508C25.8841 6.10189 25.8411 6.10442 25.8029 6.12129C25.7649 6.13829 25.7337 6.16879 25.7131 6.20416C25.6698 6.26702 25.6108 6.34645 25.5543 6.40994C25.0156 7.0362 24.4183 6.96047 23.7755 6.57567C23.7539 6.56309 23.7322 6.55014 23.7112 6.53769C23.1249 6.18299 22.5465 5.80278 22.1582 5.27608C22.1233 5.2216 22.0875 5.16623 22.054 5.10966C23.9959 5.16774 26.0558 5.05931 27.7688 4.53376C31.5104 3.38569 33.5205 1.43302 34.6569 0.134365L34.719 0.171653C34.1423 1.69165 32.9607 3.0504 31.7124 4.13946C30.4829 5.21216 29.1847 6.02594 28.3275 6.47899C28.453 6.62107 28.6316 6.90207 28.817 7.27932C29.0201 7.69242 29.237 8.22377 29.4144 8.81714C29.7937 10.0866 29.8393 11.598 29.6595 12.497C29.5633 12.979 29.5961 13.5352 29.6505 13.9823C29.6777 14.2054 29.71 14.4017 29.7341 14.5465C29.746 14.6184 29.7562 14.6795 29.7624 14.724C29.7654 14.7456 29.7676 14.7651 29.7686 14.7799C29.7691 14.7872 29.7695 14.7951 29.7693 14.8013C29.7691 14.807 29.7683 14.8154 29.7658 14.8227C29.7634 14.8297 29.7593 14.8362 29.7562 14.8407C29.7527 14.8457 29.7483 14.8519 29.7437 14.8572C29.7344 14.868 29.7217 14.881 29.7071 14.8952C29.6773 14.9242 29.6358 14.962 29.5863 15.005C29.487 15.0913 29.3517 15.2035 29.2037 15.3254C28.907 15.57 28.5557 15.8558 28.3219 16.0636C28.0833 16.2756 27.8665 16.3721 27.6404 16.3806C27.4158 16.3887 27.1856 16.3098 26.9222 16.1844C26.782 16.1176 26.6194 16.0036 26.4568 15.8723C26.4213 15.789 26.3795 15.7108 26.3263 15.641C25.8946 15.0755 25.3983 14.5584 24.8375 14.0914C24.7976 14.0582 24.7565 14.0247 24.716 13.992C24.6844 13.9667 24.6457 13.9481 24.6048 13.9444C24.5639 13.9407 24.5236 13.9516 24.4922 13.9754C24.4609 13.9994 24.4401 14.0358 24.4328 14.0762C24.4258 14.1166 24.4327 14.1587 24.4487 14.1957C24.4696 14.2434 24.4907 14.2921 24.5123 14.3393C24.7288 14.8144 24.9788 15.2647 25.2615 15.6893C25.1851 15.8935 25.0864 16.1406 24.9141 16.4455C24.5745 17.0463 24.1721 17.6496 23.8245 18.1331C23.7523 18.2335 23.6812 18.3285 23.6146 18.4176C23.5076 17.8924 23.2782 17.3845 22.9558 17.0089C22.918 16.9611 22.8794 16.9148 22.8391 16.8674C22.8123 16.8366 22.7765 16.8119 22.7362 16.8018C22.696 16.7918 22.6538 16.7964 22.6188 16.8156C22.584 16.8349 22.558 16.8683 22.5449 16.9074C22.5321 16.9467 22.5333 16.9901 22.5449 17.029C22.5621 17.0857 22.5778 17.1411 22.5933 17.1961C22.8282 17.9898 22.8672 18.6434 22.7555 19.4175C22.7302 19.6408 22.7576 19.8884 22.855 20.1384C22.8769 20.1949 22.9038 20.2513 22.933 20.3076C22.8716 20.8648 22.8027 21.4963 22.7548 21.9318C22.7027 22.4068 22.6892 23.0708 22.6892 23.616C22.6893 23.8879 22.6928 24.1308 22.6961 24.3051C22.6966 24.3284 22.6964 24.3512 22.6968 24.3721L21.7978 23.1581L21.2322 21.6687C21.2219 21.5104 21.1689 21.3413 21.11 21.197C21.0386 21.0222 20.9377 20.8234 20.8151 20.6177C20.57 20.2063 20.2211 19.7365 19.8021 19.3174C19.3518 18.8671 19.1331 18.4901 19.0384 18.1172C18.9426 17.7393 18.9603 17.3131 19.0757 16.7334C19.0797 16.722 19.0848 16.7107 19.0888 16.6996C19.2295 16.3048 19.4314 16.0301 19.7704 15.9131C20.1138 15.7917 20.5972 15.8378 21.043 15.9787C21.1068 15.9992 21.17 16.0217 21.2295 16.0463C21.2672 16.0629 21.3109 16.0688 21.3517 16.0595C21.3923 16.05 21.4278 16.026 21.4504 15.9925C21.473 15.9586 21.4814 15.9158 21.4746 15.8744C21.4676 15.8333 21.4455 15.7958 21.4159 15.7674C21.3569 15.7133 21.2962 15.6639 21.2329 15.6175C20.7926 15.3054 20.2454 15.0655 19.5984 15.1583C19.4149 15.1816 19.2433 15.246 19.0867 15.3372C18.9386 14.5051 18.4974 13.626 17.58 12.9286C16.9422 12.4439 16.107 11.7618 14.9656 11.3141C13.81 10.8611 12.3591 10.6533 10.4654 11.0483C8.51635 11.4549 6.97771 12.7646 5.94587 13.9271C5.64266 14.2687 5.37954 14.603 5.15866 14.9035C5.24835 14.2016 5.35365 13.4863 5.50047 12.7718C5.89956 10.8302 6.61228 8.88668 8.19563 7.19853ZM20.9843 19.9858C20.9787 20.0081 21.048 20.1555 21.1542 20.3615C21.3175 20.305 21.5141 20.2357 21.6928 20.1668C21.815 20.1196 21.9282 20.0734 22.0153 20.0335C22.0586 20.0136 22.0945 19.9951 22.1209 19.9803C22.1254 20.0721 22.1293 20.1826 22.1285 20.3056C22.0351 20.348 21.919 20.3957 21.7985 20.4423C21.6321 20.5064 21.4513 20.5709 21.2951 20.6253C21.3694 20.7647 21.4487 20.9161 21.5298 21.0644L22.1196 20.7371C22.1157 20.8525 22.1096 20.9696 22.1044 21.0838L21.6735 21.3227C21.878 21.6933 22.0495 21.9994 22.0553 22.0098C22.057 21.9859 22.2085 19.8065 22.0795 19.7248C21.9488 19.6468 21.0112 19.9075 20.9843 19.9858ZM27.1819 12.0012C27.2386 12.3992 27.1975 12.737 27.1024 13.0211C27.2745 13.1172 27.461 13.2208 27.63 13.3167C27.6496 13.3278 27.6696 13.3396 27.6887 13.3505C27.6977 13.4647 27.6951 13.5769 27.6777 13.6847C27.6172 13.6501 27.5516 13.6121 27.4836 13.5735C27.3245 13.4833 27.1497 13.3861 26.9864 13.2946C26.8666 13.5236 26.7109 13.7076 26.5473 13.8497L27.4173 14.2047C27.373 14.2483 27.3282 14.2862 27.2834 14.3193C27.3306 14.2839 27.3795 14.2453 27.4263 14.1985C28.012 13.6128 27.5074 12.4897 27.1819 12.0012ZM25.9617 14.1978C26.185 14.4209 26.733 14.7234 27.273 14.3269C27.2288 14.3588 27.1844 14.3863 27.1404 14.4098L26.2676 14.0535C26.1571 14.1193 26.052 14.1676 25.9617 14.1978ZM23.4115 15.139C23.6275 15.1991 23.9019 15.2786 24.1497 15.3593C24.1628 15.3635 24.1761 15.3695 24.1891 15.3738C24.2708 15.4494 24.3386 15.5273 24.3728 15.6058C24.3928 15.652 24.4001 15.7043 24.399 15.7605C24.3013 15.7231 24.1841 15.6804 24.0586 15.6396C23.824 15.5633 23.5641 15.4888 23.3549 15.4304C23.3375 15.522 23.322 15.6144 23.3156 15.7059C23.4422 15.728 23.5828 15.7577 23.7202 15.7998C23.9292 15.864 24.1566 15.9628 24.3099 16.1106C24.2774 16.1879 24.2397 16.2636 24.2015 16.3322L24.1497 16.3702C24.0653 16.2555 23.8738 16.156 23.6339 16.0822C23.5323 16.0511 23.4278 16.0266 23.3301 16.0077C23.383 16.2762 23.5624 16.5096 24.0089 16.6395C24.0152 16.6309 24.5198 15.9476 24.3728 15.6058C24.2251 15.266 23.4775 14.9102 23.4606 14.9021C23.4499 14.9769 23.4296 15.056 23.4115 15.139ZM25.229 8.09553C25.3245 8.12741 25.4937 8.20964 25.7235 8.35517C26.1223 8.09379 26.8952 7.72057 27.7736 7.66809C27.837 7.75458 27.9 7.85024 27.9608 7.95604C27.1504 7.96099 26.4094 8.28423 25.9907 8.5354C26.1305 8.63513 26.285 8.75298 26.452 8.89172C26.5721 8.81822 26.7256 8.74134 26.9132 8.66936C27.226 8.54951 27.6411 8.44028 28.1666 8.37589C28.2044 8.46551 28.2414 8.55963 28.2757 8.65901C27.7364 8.71943 27.3211 8.82905 27.0189 8.94489C26.8865 8.99566 26.7782 9.04933 26.6895 9.09749C26.828 9.22036 26.9736 9.35589 27.1252 9.5056C27.4197 9.38292 27.8679 9.26831 28.4455 9.26529C28.4662 9.36066 28.4845 9.45949 28.5015 9.56153C28.0017 9.55762 27.6122 9.64088 27.3476 9.73486L27.3566 9.74383C27.4552 9.85387 27.5449 9.96584 27.6279 10.0774C27.7685 10.0667 27.9319 10.0649 28.103 10.0829C28.2545 10.0988 28.4161 10.1298 28.5747 10.183C28.5827 10.2881 28.5908 10.396 28.5947 10.5069C28.4273 10.4357 28.2467 10.3947 28.072 10.3764C27.9867 10.3674 27.904 10.3652 27.8261 10.3653C28.2926 11.0975 28.4592 11.7892 28.5187 12.0868C28.9092 8.96272 27.8329 7.44499 27.1819 7.11911L25.229 8.09553ZM19.6578 17.1484C19.3667 17.5282 19.2856 18.3026 20.0459 18.6828C20.886 19.1029 21.2487 19.4628 21.6452 18.9328C21.6073 18.9823 21.5699 19.0243 21.5326 19.0591C21.4819 18.7735 21.3937 18.395 21.2605 18.0123C21.0994 17.5497 20.8767 17.0977 20.5935 16.7873C20.3298 16.7829 20.0729 16.8435 19.8808 16.9558C20.2725 17.3281 20.5111 17.9091 20.6584 18.3948C20.7364 18.6522 20.792 18.8902 20.8324 19.066C20.8344 19.0748 20.836 19.0838 20.8379 19.0923C20.7349 19.0452 20.6201 18.988 20.494 18.9196C20.4616 18.7865 20.4234 18.6363 20.376 18.4798C20.2272 17.9894 20.001 17.461 19.6578 17.1484ZM20.8455 16.8114C20.9055 16.8224 20.965 16.8365 21.023 16.855C21.2414 17.1719 21.4122 17.5501 21.5395 17.9156C21.64 18.2043 21.7149 18.4909 21.7695 18.7408C21.7935 18.6984 21.8193 18.6534 21.844 18.6041C22.0881 18.1973 21.8701 17.3789 21.3489 17.0138C21.2003 16.9098 21.0258 16.8442 20.8455 16.8114ZM22.8356 8.38417C22.8758 8.62489 22.9324 8.90376 23.0007 9.19279C23.0305 9.17745 23.0634 9.16141 23.0973 9.14031C23.2407 9.05108 23.4139 8.90947 23.6049 8.69491C23.688 8.73826 23.7746 8.78829 23.8645 8.84407C23.6418 9.10259 23.4338 9.27825 23.2527 9.39097C23.1907 9.42954 23.1304 9.45982 23.0739 9.48558C23.1028 9.5979 23.1335 9.71019 23.165 9.82117C23.3624 9.72715 23.5959 9.61057 23.8162 9.48212C23.9804 9.38635 24.1362 9.28587 24.2644 9.18864C24.278 9.17828 24.2902 9.16566 24.303 9.1555C24.3772 9.2161 24.4529 9.28107 24.5281 9.35161C24.5 9.37495 24.473 9.40148 24.4432 9.42412C24.3023 9.53102 24.1349 9.63764 23.9647 9.73693C23.7201 9.87956 23.4606 10.007 23.2479 10.1071C23.286 10.2299 23.3253 10.349 23.3653 10.462C23.6142 10.408 23.9347 10.3261 24.2554 10.2182C24.5231 10.1281 24.783 10.019 25.0018 9.90128C25.0593 9.98878 25.1072 10.0765 25.1489 10.1616C24.9049 10.2936 24.623 10.406 24.35 10.4979C24.0372 10.6032 23.7247 10.6849 23.473 10.741C23.5159 10.8465 23.5583 10.9434 23.6014 11.0282C23.8602 11.0379 24.2351 11.0321 24.5806 10.9868C24.766 10.9624 24.9388 10.9273 25.0778 10.8791C25.201 10.8363 25.2823 10.7865 25.3292 10.7396C25.346 10.876 25.341 10.9973 25.3188 11.098C25.2724 11.1203 25.2236 11.141 25.1745 11.158C25.0095 11.2153 24.8152 11.2538 24.6193 11.2796C24.3384 11.3164 24.0415 11.3275 23.7962 11.3265L23.7996 11.33C24.1645 11.6944 24.963 11.5744 25.2076 11.3307C25.4517 11.0866 25.4147 10.2342 24.6338 9.45312C23.8533 8.67278 23.0803 8.46566 22.8356 8.38417ZM20.3069 10.1312C20.3705 10.5769 20.4178 11.0252 20.4561 11.4529L21.0983 11.33C21.147 11.4225 21.1915 11.5146 21.2336 11.6048L20.4816 11.7478C20.5116 12.1231 20.533 12.4775 20.5486 12.7939C20.5608 12.7932 20.5756 12.7936 20.5921 12.7919C20.6861 12.7816 20.8201 12.7568 20.9726 12.7235C21.1654 12.6813 21.3824 12.6253 21.5768 12.5736C21.6011 12.6724 21.623 12.7686 21.6396 12.863C21.4453 12.9144 21.229 12.9691 21.0354 13.0114C20.8806 13.0453 20.7346 13.0733 20.6245 13.0853C20.6035 13.0876 20.5823 13.0863 20.5617 13.0874C20.5656 13.183 20.5671 13.2739 20.57 13.3595C20.5869 13.3606 20.6053 13.3635 20.6245 13.3643C20.7381 13.3688 20.8813 13.3651 21.0347 13.356C21.255 13.343 21.4932 13.3173 21.6907 13.2939C21.6975 13.3962 21.6999 13.4948 21.6983 13.5901C21.502 13.613 21.2697 13.6373 21.0527 13.6502C20.8947 13.6595 20.7403 13.6642 20.6128 13.6592C20.6017 13.6587 20.5905 13.657 20.5797 13.6564C20.5825 13.7726 20.5861 13.8726 20.5873 13.954C20.7421 13.9914 20.946 14.0277 21.1618 14.059C21.3268 14.0828 21.4953 14.1036 21.6458 14.1204C21.6262 14.2236 21.6029 14.3202 21.5747 14.4098C21.4315 14.3935 21.2742 14.3734 21.1197 14.3511C20.9379 14.3248 20.753 14.2927 20.5942 14.2579C20.641 14.6147 21.0921 14.8533 21.3234 14.9304C21.8115 14.2794 22.1311 12.425 20.3069 10.1312ZM20.5548 12.8954L20.5804 12.8906C20.5752 12.8654 20.5633 12.8478 20.5514 12.834C20.5523 12.8546 20.5539 12.8751 20.5548 12.8954ZM18.4466 12.5923C18.8717 12.9639 19.186 13.282 19.3698 13.4658C19.4512 11.9197 18.6863 8.3879 14.976 6.63022C14.1378 6.23326 13.328 6.14574 12.5695 6.2594L12.6392 6.37196C9.47943 8.30415 8.29286 10.3617 7.99192 11.4322C7.96102 11.4541 7.93195 11.4778 7.90215 11.4999C8.20105 11.2812 8.55007 11.0587 8.94624 10.8549C8.93743 10.8594 8.92806 10.8635 8.91931 10.868C10.2383 8.61149 12.1708 7.0186 13.4126 6.22142C13.5682 6.23072 13.7255 6.24871 13.8842 6.27735C12.7777 6.92856 10.814 8.43248 9.41166 10.6339C9.40522 10.6367 9.39874 10.6394 9.39232 10.6422C10.0896 10.338 10.9073 10.1049 11.8313 10.0387C11.8252 10.0391 11.8187 10.0389 11.8126 10.0394C13.3039 8.31361 14.8386 7.45129 15.8274 7.09771C15.9346 7.16457 16.039 7.23287 16.1402 7.3028C15.2704 7.56872 13.7429 8.33658 12.2214 10.02C12.2148 10.0202 12.2081 10.0206 12.2014 10.0207C12.5595 10.013 12.9325 10.0311 13.3194 10.0794C13.6755 10.124 14.0202 10.1946 14.3531 10.2845C15.588 9.04852 16.7454 8.61821 17.5323 8.54023C17.6135 8.63309 17.691 8.72742 17.7657 8.82197C17.1009 8.83239 15.9554 9.14913 14.679 10.3784C14.6553 10.3709 14.6311 10.3649 14.6072 10.3577C14.8811 10.4414 15.1464 10.5376 15.402 10.6443C16.4548 9.78896 17.4921 9.47948 18.187 9.41031C18.247 9.50374 18.3036 9.59815 18.3582 9.69204C17.7598 9.72351 16.7575 9.96991 15.71 10.7796C15.8969 10.8658 16.0772 10.9585 16.2528 11.0531C17.153 10.4554 18.0746 10.3251 18.7028 10.357C18.7494 10.4591 18.793 10.5611 18.834 10.6622C18.2992 10.6075 17.4224 10.681 16.5456 11.2161C16.7148 11.3144 16.8775 11.416 17.0345 11.5185C17.7165 11.2328 18.3049 11.228 18.7622 11.3252C18.8836 11.351 18.9958 11.3851 19.0971 11.4211C19.1317 11.5411 19.1594 11.6601 19.1869 11.7761C19.0542 11.7154 18.8907 11.655 18.7007 11.6145C18.3402 11.5379 17.877 11.5294 17.3328 11.7188C17.6442 11.9361 17.927 12.1555 18.1787 12.3644C18.6068 12.2205 18.9842 12.2091 19.2856 12.2601C19.3032 12.3664 19.3172 12.4699 19.3291 12.5702C19.1016 12.5177 18.8011 12.5025 18.4466 12.5923ZM12.4631 6.27735C9.91579 6.72525 7.96933 9.43603 7.53133 10.3916C7.28566 10.9277 7.08877 11.5129 7.0887 12.1904C7.23925 12.0399 7.42774 11.8697 7.6508 11.6918C7.64495 11.6965 7.63865 11.701 7.63284 11.7056C7.7779 10.6894 8.85734 8.45539 12.1165 6.35193C12.2306 6.32228 12.3465 6.29816 12.4631 6.27735Z" fill="#00D4FF"/>
|
|
9
|
+
<path d="M20.9498 23.4496C20.3497 24.3588 19.5971 25.7766 19.1295 27.6466L19.0577 27.6425C18.8749 26.3626 18.9219 25.5082 19.0771 24.8306C19.1394 24.5586 19.2211 24.3152 19.3098 24.0842C19.4903 23.8842 19.6612 23.6905 19.8111 23.5082C20.0787 23.1829 20.3093 22.8693 20.4312 22.6257C20.4748 22.5385 20.5153 22.4638 20.552 22.4013L20.9498 23.4496Z" fill="#00D4FF"/>
|
|
10
|
+
<path d="M7.09008 34.3068C7.05477 34.4063 7.01754 34.5056 6.98236 34.6024H6.62466C6.62022 34.5045 6.61623 34.4046 6.61361 34.3068H7.09008Z" fill="#00D4FF"/>
|
|
11
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66987 21.6887C4.50219 21.2123 5.81136 20.6871 7.24752 20.5238C8.95347 20.3298 10.7814 20.6464 12.218 22.083C13.3219 23.1872 13.6844 24.7161 13.7254 26.046C13.7457 26.7056 13.686 27.3 13.608 27.7391C13.569 27.9588 13.5266 28.1351 13.4893 28.257C13.4733 28.3091 13.4581 28.3468 13.4478 28.3717C13.4083 28.4118 13.3697 28.454 13.3291 28.4946C13.2142 28.6094 13.1009 28.7269 12.99 28.8447C13.0173 28.7286 13.042 28.611 13.0604 28.4925C13.2966 27.0807 12.9416 25.45 11.8354 24.4184C10.671 23.2947 8.98428 22.9149 7.48921 23.1644C7.28269 23.1992 7.07668 23.2463 6.87602 23.3135C6.83536 23.3275 6.79986 23.3551 6.77865 23.3929C6.75774 23.4309 6.75152 23.4766 6.76277 23.5179C6.7743 23.5592 6.80273 23.5954 6.84011 23.6174C6.87758 23.639 6.92239 23.6454 6.96441 23.6367C7.1481 23.5998 7.34187 23.5795 7.5341 23.5697C8.94473 23.5027 10.3676 23.9842 11.2809 24.9729C12.1153 25.8473 12.3721 27.1389 12.1752 28.3544C12.0619 29.0768 11.8584 29.7942 11.5806 30.5137C11.2614 30.9298 10.9928 31.3063 10.7907 31.5978C9.97381 32.3158 9.44577 32.7492 9.05396 32.9851L8.14522 33.945C7.55097 34.8001 7.04487 36.3434 6.68681 37.678C6.50789 38.345 6.36656 38.959 6.26973 39.4057C6.22137 39.6288 6.18434 39.8117 6.15924 39.9374C6.14682 39.9996 6.13728 40.0488 6.13093 40.0818C6.12779 40.098 6.12493 40.1113 6.12334 40.1197C6.12264 40.1236 6.12233 40.1274 6.12195 40.1294L6.12126 40.1315L6.04807 40.1301V40.1273C6.04807 40.1273 6.04715 40.1223 6.04669 40.119C6.04567 40.1113 6.0438 40.0988 6.04185 40.0838C6.03789 40.0533 6.03187 40.0072 6.02459 39.9492C6.00994 39.8323 5.98955 39.6619 5.9652 39.4506C5.9164 39.0269 5.85294 38.4347 5.79464 37.7636C5.67855 36.4271 5.5818 34.772 5.66137 33.4968C5.06459 32.8995 4.51188 32.3069 4.01721 31.7076C4.02067 31.6694 4.01267 31.6302 3.99649 31.5958C3.93255 31.4632 3.87113 31.3343 3.81212 31.2112C3.56694 30.7062 3.3256 30.2345 3.09673 29.7652C2.19236 28.1385 2.68835 26.1878 4.19606 24.9411C4.29676 24.8506 4.40433 24.7596 4.50956 24.6746C4.54257 24.6479 4.56659 24.6091 4.57447 24.5668C4.58196 24.5248 4.5734 24.4811 4.5503 24.446C4.52677 24.4108 4.48943 24.3855 4.44741 24.3762C4.40522 24.3671 4.3606 24.3753 4.32311 24.3956C4.19905 24.4633 4.07143 24.5382 3.95023 24.6152C2.80374 25.2108 1.98593 26.5238 1.83374 27.8876C1.80795 27.8037 1.78165 27.7191 1.75847 27.6342C1.46224 26.5475 1.79964 25.2431 2.32885 24.0531C2.72645 23.1591 3.23447 22.3249 3.66987 21.6887ZM6.67231 33.4885L7.34765 33.5327C7.32273 33.6171 7.29246 33.7156 7.25719 33.8221L6.61638 33.782C6.58633 34.3303 6.67489 35.426 6.67576 35.4365C6.67909 35.4278 7.4744 33.3453 7.40842 33.2399C7.33704 33.1454 6.82742 33.3605 6.67576 33.4837C6.67576 33.4837 6.67371 33.487 6.67231 33.4885ZM6.17927 31.9127C6.65064 32.1346 7.09302 32.2635 7.40842 32.2635C8.38496 32.2634 11.3136 30.7977 11.3141 27.869C11.314 24.9396 8.14082 24.2074 6.432 24.9397C6.26513 25.0113 6.10028 25.0984 5.93965 25.2001C8.10379 25.0184 9.44203 25.6854 10.203 26.6737C10.8281 27.4859 11.0467 28.4941 11.033 29.3695C10.9343 29.6214 10.812 29.8562 10.674 30.0752L10.6705 30.0745C10.8434 29.134 10.7205 27.8306 9.96892 26.8539C9.23117 25.8958 7.86175 25.2184 5.47009 25.5467C5.09407 25.8622 4.75066 26.246 4.46744 26.6626C5.55707 26.2817 6.95355 26.1649 8.06788 26.675C8.70816 26.9684 9.25201 27.4687 9.58429 28.2356C9.88836 28.9378 10.0083 29.8548 9.87777 31.0289C9.77165 31.1271 9.66249 31.2192 9.55253 31.3058L9.54907 31.3051C9.73553 30.0127 9.61647 29.0524 9.3136 28.353C9.01199 27.6569 8.52314 27.2078 7.94496 26.943C6.80016 26.419 5.29319 26.6098 4.21263 27.079C4.04956 27.3702 3.91576 27.6692 3.8204 27.9656C4.85905 27.5463 6.15237 27.3849 7.15292 27.8524C7.71589 28.1157 8.17891 28.576 8.44422 29.2846C8.68948 29.9399 8.76094 30.7998 8.60028 31.9044C8.49094 31.9582 8.38386 32.0058 8.28056 32.0474C8.4736 30.8819 8.40402 30.0162 8.1687 29.3875C7.93072 28.7521 7.52167 28.3505 7.02793 28.1196C6.06403 27.6693 4.75063 27.8608 3.72166 28.3296C3.64022 28.7061 3.62751 29.069 3.69749 29.3937C4.4636 29.0388 5.09528 28.9222 5.61096 28.9897C6.16934 29.0631 6.57605 29.35 6.85323 29.7458C7.332 30.4301 7.42494 31.4363 7.31382 32.2559C7.22438 32.2495 7.12643 32.2362 7.02241 32.2131C7.12704 31.4394 7.03254 30.5159 6.61154 29.9143C6.37714 29.5797 6.04129 29.3434 5.57298 29.2818C5.12302 29.2229 4.53597 29.3248 3.78312 29.6795C3.89985 29.9789 4.08788 30.2656 4.31828 30.5337C4.71496 30.3028 5.05461 30.2303 5.34027 30.299C5.64577 30.3729 5.85044 30.5985 5.98039 30.8631C6.10984 31.1271 6.17347 31.4456 6.19308 31.7456C6.19694 31.8047 6.19728 31.8636 6.19791 31.9217C6.19167 31.9188 6.18552 31.9157 6.17927 31.9127ZM4.52337 30.7554C4.92359 31.1605 5.41468 31.5105 5.89753 31.7705L5.89891 31.765C5.88082 31.4882 5.82287 31.2102 5.71592 30.9923C5.60938 30.7755 5.46223 30.6318 5.27053 30.5855C5.09617 30.5438 4.85356 30.5746 4.52337 30.7554ZM12.082 23.9343C12.3934 24.2129 12.6356 24.4766 12.7973 24.6787C12.8343 24.4937 12.8291 24.2453 12.7642 23.9619C12.6344 23.9471 12.4812 23.9325 12.3271 23.9295C12.2426 23.9278 12.1598 23.9299 12.082 23.9343ZM7.02724 22.324C7.22657 22.2959 7.43463 22.271 7.65218 22.2542C8.02714 22.2254 8.38912 22.2413 8.73632 22.2901C8.72697 22.2888 8.71737 22.2866 8.708 22.2853C9.14327 22.0544 9.66526 21.8811 10.1126 21.7591C10.3013 21.7076 10.4798 21.6646 10.6346 21.6293C10.7765 21.6985 10.9098 21.7708 11.0351 21.8448C11.001 21.8516 10.9628 21.8591 10.9225 21.8675C10.7306 21.9079 10.4724 21.9666 10.1899 22.0436C9.87024 22.1308 9.52422 22.242 9.20519 22.3765C9.4058 22.4235 9.60029 22.482 9.78869 22.5484C10.403 22.3135 11.0703 22.2103 11.5281 22.1748C11.647 22.266 11.7565 22.3589 11.8561 22.4531C11.5198 22.4565 10.8574 22.5183 10.2092 22.7148C10.4268 22.8104 10.6335 22.9178 10.83 23.0304C11.0869 22.969 11.376 22.9356 11.6497 22.922C11.8675 22.9111 12.0817 22.9116 12.2691 22.9171C12.3459 23.0201 12.414 23.1227 12.4728 23.2244C12.2528 23.2109 11.9624 23.2006 11.6642 23.2155C11.5081 23.2233 11.3526 23.2396 11.205 23.2603C11.2005 23.2574 11.1957 23.255 11.1912 23.2521C11.4013 23.3899 11.5966 23.5323 11.7747 23.6754C11.9488 23.6409 12.1483 23.631 12.3333 23.6346C12.4507 23.637 12.5679 23.645 12.6751 23.6546C12.6815 23.6718 12.6866 23.6894 12.6924 23.7064C12.4258 22.9369 11.6944 21.9975 10.0594 21.3814C9.93522 21.4067 9.77179 21.446 9.57255 21.5133C9.20346 21.638 8.70552 21.8557 8.0879 22.2397C7.94477 22.2382 7.79937 22.2429 7.65218 22.2542C7.60413 22.2579 7.5557 22.2638 7.50855 22.268C8.34088 21.6967 9.00207 21.3944 9.47795 21.2336C9.50311 21.2251 9.5291 21.2185 9.55322 21.2108C9.7183 21.2607 9.87572 21.3141 10.0255 21.3697C9.6952 21.247 9.32863 21.1376 8.92207 21.0451C8.4799 21.2365 7.76666 21.6483 7.09008 22.3136C7.06895 22.3165 7.04816 22.321 7.02724 22.324ZM8.4387 20.9526C8.1118 20.9018 7.80381 20.8796 7.51338 20.8821C7.61741 20.8817 7.72372 20.8835 7.83241 20.8891C7.4387 21.1966 6.80393 21.761 6.2062 22.478C6.33891 22.4461 6.47677 22.4171 6.61983 22.3903C6.61443 22.3913 6.60864 22.392 6.60326 22.393C7.22416 21.7045 7.9125 21.2335 8.4387 20.9526ZM7.00446 20.9132C6.59342 21.283 5.90132 21.9754 5.30989 22.75C5.11531 22.8242 4.93693 22.904 4.77403 22.9848C5.29955 22.2174 5.97182 21.4938 6.47136 21.0085C6.24096 21.0648 6.02546 21.1373 5.82433 21.2247C5.95282 21.169 6.08724 21.1191 6.22761 21.0755C5.91307 21.3588 5.44335 21.8131 5.00674 22.3046C4.71085 22.6378 4.43621 22.9821 4.23265 23.2969C4.22657 23.301 4.22071 23.3053 4.2147 23.3094C4.58098 23.0632 5.0796 22.8106 5.72421 22.6106C6.28351 21.8827 6.90891 21.2779 7.37251 20.8835C7.24629 20.8882 7.12376 20.8994 7.00446 20.9132ZM5.4404 21.418C4.28684 22.0791 3.69108 23.2068 3.50207 23.9626C3.55787 23.8789 3.64245 23.7796 3.75618 23.6712C3.74618 23.6807 3.73603 23.6901 3.72649 23.6995L3.69127 23.685C3.87892 23.2104 4.32311 22.6309 4.78646 22.1092C5.00389 21.8644 5.22967 21.6288 5.4404 21.418Z" fill="#00D4FF"/>
|
|
12
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.61638 14.5216C7.59489 13.4193 8.97348 12.2746 10.6477 11.9252C12.3767 11.5646 13.6507 11.7601 14.639 12.1476C15.6413 12.5407 16.3724 13.1361 17.0379 13.6419C18.1797 14.51 18.3675 15.711 18.1994 16.5518C18.0721 17.1885 18.0256 17.7701 18.1697 18.3382C18.3156 18.9129 18.6431 19.4248 19.1689 19.9506C19.5304 20.3122 19.8341 20.7225 20.0452 21.0769C20.1148 21.1938 20.1709 21.3036 20.2171 21.3994C20.0208 21.5592 19.8283 21.8292 19.6302 22.2252C19.5567 22.372 19.3831 22.62 19.1199 22.9399C18.8633 23.2518 18.5414 23.6095 18.1946 23.9702C17.4955 24.6971 16.7172 25.4129 16.181 25.796C15.5415 26.2528 15.054 26.7129 14.5803 27.1978C14.6138 26.8407 14.6334 26.4414 14.6204 26.0183C14.5758 24.574 14.1824 22.7799 12.8519 21.4491C11.1638 19.7609 9.02838 19.4196 7.14602 19.6337C6.06978 19.7561 5.05785 20.0609 4.22644 20.414L4.68702 18.3403C4.78336 17.8448 4.85644 17.3269 4.92526 16.7942C5.00478 16.754 5.07424 16.6901 5.1193 16.6057V16.6043C5.1193 16.6043 5.12188 16.6002 5.12344 16.5974C5.12701 16.5908 5.13317 16.5798 5.14071 16.5663C5.15623 16.5385 5.18012 16.4954 5.21183 16.4413C5.27582 16.3323 5.37295 16.1737 5.49978 15.9807C5.75458 15.5932 6.13153 15.068 6.61638 14.5216ZM18.1497 20.057C18.1105 20.2521 17.9976 20.482 17.8369 20.733C18.0416 21.0275 18.225 21.4413 18.3734 21.8454C18.4779 22.1302 18.567 22.4176 18.6379 22.6665C18.5657 22.7492 18.4865 22.8348 18.4038 22.9241C18.3299 22.6472 18.2242 22.2949 18.0965 21.9469C17.9652 21.5895 17.8135 21.2484 17.6559 20.9954C17.5554 21.1331 17.4447 21.2758 17.3245 21.4194C17.5597 21.7891 17.7122 22.2665 17.8058 22.7141C17.8584 22.9661 17.8935 23.2127 17.9163 23.4309C17.828 23.5196 17.7369 23.6095 17.6442 23.7002C17.6267 23.444 17.5875 23.1143 17.5165 22.7742C17.4324 22.3722 17.3044 21.9682 17.1228 21.6528C17.0013 21.7902 16.8728 21.927 16.7424 22.0637C17.0029 22.373 17.1408 22.8616 17.2105 23.3273C17.2479 23.5768 17.2673 23.8285 17.2755 24.0565C17.1793 24.1481 17.0827 24.2404 16.9854 24.3314C16.9865 24.0549 16.9699 23.7106 16.9191 23.3715C16.8524 22.9257 16.7279 22.5207 16.5352 22.2763C16.4537 22.359 16.3735 22.4424 16.2914 22.5229C16.579 23.0747 16.6173 23.7235 16.5877 24.2499C16.5776 24.429 16.558 24.5963 16.5387 24.7436C16.4224 24.8499 16.308 24.9552 16.1955 25.0564C16.2002 25.0263 16.2055 24.9944 16.2107 24.9611C16.2406 24.7694 16.2769 24.5153 16.2928 24.2326C16.3199 23.7499 16.2821 23.2028 16.0663 22.7383C15.9432 22.8557 15.8219 22.9694 15.7038 23.0774L15.7494 23.0594C15.9622 23.6 15.9453 24.3098 15.8889 24.87C15.8696 25.0609 15.8444 25.2376 15.8219 25.3886C15.7014 25.4952 15.5856 25.5961 15.4773 25.6903C15.4839 25.6469 15.4923 25.597 15.5008 25.5426C15.5294 25.3601 15.5677 25.1147 15.5954 24.8403C15.6479 24.3187 15.6551 23.7185 15.5035 23.2583C15.309 23.4322 15.1304 23.5895 14.976 23.7182L15.2204 25.9154C16.3596 24.939 18.7349 22.7912 19.1261 22.0098C19.5164 21.2288 18.638 20.3826 18.1497 20.057ZM17.4177 15.9068C17.692 13.8763 10.6222 10.3235 7.23993 14.9864C8.30251 14.414 9.75806 13.8627 11.3603 13.6654C13.1751 13.4421 15.1849 13.6741 17.022 14.8469C17.1811 15.0466 17.2972 15.2463 17.3625 15.44C15.4656 14.0124 13.3266 13.7206 11.3963 13.9582C9.56523 14.1837 7.92939 14.8841 6.8843 15.5312C6.78232 15.7049 6.68562 15.8882 6.5929 16.0809C7.71172 15.5199 9.33612 14.9592 11.1373 14.8151C13.1425 14.6549 15.3751 15.0109 17.3687 16.4627C17.3602 16.578 17.3525 16.6964 17.3445 16.817C15.3826 15.3213 13.1647 14.9484 11.1601 15.1086C9.21316 15.2644 7.47768 15.9218 6.3961 16.5194C6.3474 16.6373 6.29984 16.7588 6.25454 16.8833L6.24142 16.9268C8.37908 15.7976 12.9673 14.7078 17.2637 18.0344C17.2555 18.1534 17.2472 18.2718 17.2382 18.3886C12.8341 14.8615 8.08314 16.1823 6.12748 17.328L6.0819 17.4868C8.15012 16.5062 12.6647 15.968 17.089 19.7255C17.0686 19.8441 17.0457 19.9541 17.0213 20.0542C12.4663 16.1004 7.82039 16.8662 5.97211 17.8742L5.91203 18.0848C8.11975 17.1296 12.7918 16.6051 16.3633 21.1832C16.2996 21.2577 16.2331 21.3329 16.1651 21.4076C12.5664 16.7526 7.81949 17.4809 5.80569 18.4591L5.70004 18.8299C6.70325 18.3141 8.23372 17.9016 9.91299 18.1635C11.7516 18.4506 13.7505 19.546 15.4241 22.161C15.3481 22.2338 15.2749 22.3026 15.2066 22.3661C13.568 19.7814 11.6257 18.7294 9.86741 18.4549C8.53329 18.2469 7.29577 18.4831 6.36778 18.8499C6.16377 18.858 5.98826 18.8617 5.8485 18.8527C6.86013 18.9254 9.74716 18.3578 11.803 19.5688C13.9534 20.8358 14.7151 22.7697 14.7274 22.8011C14.755 22.7773 16.6327 21.1547 16.9426 20.3249C17.2539 19.4892 17.2827 17.2744 17.4177 15.9068Z" fill="#00D4FF"/>
|
|
13
|
+
<path d="M1.82545 29.0712C1.85684 29.1262 1.88619 29.1862 1.9166 29.248C1.97786 29.4931 2.06635 29.7328 2.18315 29.962C2.3151 30.4527 2.37534 31.0283 2.26947 31.6227C2.08803 32.64 1.42872 33.7076 -0.142569 34.4933L-0.188835 34.4387C0.216759 33.8709 0.800985 32.9201 1.23505 31.9183C1.45184 31.4177 1.63099 30.9045 1.73154 30.4205C1.83206 29.9361 1.85328 29.4817 1.75778 29.0988L1.82545 29.0712Z" fill="#00D4FF"/>
|
|
14
|
+
<path d="M26.5231 3.99928C27.66 3.51202 30.3227 2.04983 31.8796 0.103981L31.9424 0.14196C31.6152 0.877875 30.9526 1.9565 30.0289 2.80259C29.105 3.64877 27.9138 4.26628 26.5321 4.06903L26.4022 4.05107L26.5231 3.99928Z" fill="#00D4FF"/>
|
|
15
|
+
<path d="M92.2735 29.5387V10.4049H97.8776C99.1177 10.4049 100.191 10.6408 101.097 11.1126C102.003 11.5844 102.703 12.2571 103.196 13.1308C103.704 14.0045 103.959 15.0354 103.959 16.2237C103.959 17.4643 103.68 18.5739 103.124 19.5524C102.583 20.5309 101.844 21.2386 100.906 21.6755L104.197 29.5387H100.31L97.496 22.3045H95.8267V29.5387H92.2735ZM95.8267 18.8971H97.8776C98.6725 18.8971 99.2846 18.6787 99.7138 18.2419C100.159 17.805 100.382 17.1935 100.382 16.4071C100.382 15.5859 100.159 14.9481 99.7138 14.4938C99.2846 14.0394 98.6725 13.8123 97.8776 13.8123H95.8267V18.8971Z" fill="white"/>
|
|
7
16
|
<path d="M75.542 29.5387V10.4049H81.1938C82.402 10.4049 83.4513 10.6583 84.3416 11.165C85.2478 11.6718 85.9474 12.3882 86.4402 13.3143C86.9489 14.2229 87.2033 15.2976 87.2033 16.5382V23.3792C87.2033 24.6023 86.9489 25.677 86.4402 26.6031C85.9474 27.5292 85.2478 28.2543 84.3416 28.7785C83.4513 29.2853 82.402 29.5387 81.1938 29.5387H75.542ZM79.1191 25.8692H81.1938C81.9251 25.8692 82.5133 25.642 82.9585 25.1877C83.4036 24.7334 83.6262 24.1305 83.6262 23.3792V16.5382C83.6262 15.8043 83.4036 15.2102 82.9585 14.7559C82.5133 14.3016 81.9251 14.0744 81.1938 14.0744H79.1191V25.8692Z" fill="white"/>
|
|
8
17
|
<path d="M58.9058 29.5387V10.4049H64.5099C65.75 10.4049 66.8231 10.6408 67.7293 11.1126C68.6355 11.5844 69.335 12.2571 69.8279 13.1308C70.3366 14.0045 70.591 15.0354 70.591 16.2237C70.591 17.4643 70.3128 18.5739 69.7563 19.5524C69.2158 20.5309 68.4765 21.2386 67.5385 21.6755L70.8295 29.5387H66.9423L64.1284 22.3045H62.459V29.5387H58.9058ZM62.459 18.8971H64.5099C65.3048 18.8971 65.9169 18.6787 66.3462 18.2419C66.7913 17.805 67.0139 17.1935 67.0139 16.4071C67.0139 15.5859 66.7913 14.9481 66.3462 14.4938C65.9169 14.0394 65.3048 13.8123 64.5099 13.8123H62.459V18.8971Z" fill="white"/>
|
|
9
18
|
<path d="M46.0375 29.5387V14.0744H41.6258V10.4049H54.0264V14.0744H49.6146V29.5387H46.0375Z" fill="white"/>
|
|
10
19
|
</g>
|
|
11
20
|
<defs>
|
|
12
|
-
<clipPath id="
|
|
21
|
+
<clipPath id="clip0_2475_3136">
|
|
13
22
|
<rect width="104.276" height="40.2147" fill="white"/>
|
|
14
23
|
</clipPath>
|
|
15
24
|
</defs>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# TRDR Design System —
|
|
1
|
+
# TRDR Design System — 12 Regras Absolutas
|
|
2
2
|
|
|
3
3
|
## Regras que nunca devem ser violadas
|
|
4
4
|
|
|
@@ -80,6 +80,30 @@ Se não existe token semântico para o padrão → registrar em `MISSING_COMPONE
|
|
|
80
80
|
- ❌ `background: linear-gradient(135deg, #FF6B6B, #4158F6)`
|
|
81
81
|
- ✅ Usar token semântico existente ou solicitar novo token ao Hub
|
|
82
82
|
|
|
83
|
+
### Regra 10 — Nunca use inline style para valores de design
|
|
84
|
+
`style=""` e `style={{}}` são violações sempre que contiverem propriedades de design (color, background, font, padding, margin, border).
|
|
85
|
+
|
|
86
|
+
Exceções aceitas (únicas):
|
|
87
|
+
- `style="background-image: url(...)"` — URL de imagem dinâmica de dado externo
|
|
88
|
+
- `style="--css-var: valor"` — CSS custom property para valor calculado dinamicamente (ex: `style="--card-delay:0.1s"`)
|
|
89
|
+
|
|
90
|
+
Para `animation-delay` calculado: converter para `style="--delay: Xs"` + CSS `animation-delay: var(--delay, 0s)`.
|
|
91
|
+
- ❌ `style="color: var(--content-brand)"`
|
|
92
|
+
- ❌ `style={{ padding: '16px' }}`
|
|
93
|
+
- ✅ `class="text-brand"` com `.text-brand { color: var(--content-brand); }` no CSS
|
|
94
|
+
|
|
95
|
+
### Regra 11 — Ícones via biblioteca, nunca SVG inline
|
|
96
|
+
Use Material Icons (HTML/Vue) ou @mui/icons-material (React). A cor dos ícones SEMPRE via classe CSS com token — nunca inline style.
|
|
97
|
+
- ❌ `<svg><path d="..."/></svg>` para ícones
|
|
98
|
+
- ❌ `<span class="material-icons" style="color:#00D4FF">search</span>`
|
|
99
|
+
- ✅ `<span class="material-icons mi-sm icon-brand">search</span>` com `.icon-brand { color: var(--content-brand); }`
|
|
100
|
+
|
|
101
|
+
### Regra 12 — Logo sempre via arquivo oficial
|
|
102
|
+
- HTML: `<img src="logo-trdr.svg" alt="TRDR" height="24">`
|
|
103
|
+
- Next.js: `<Image src="/logo-trdr.svg" alt="TRDR" width={105} height={41} />`
|
|
104
|
+
- ❌ `<span>TRDR</span>` como logo
|
|
105
|
+
- ❌ Qualquer SVG que não seja logo-trdr.svg (viewBox="0 0 105 41", fill="#00D4FF")
|
|
106
|
+
|
|
83
107
|
---
|
|
84
108
|
|
|
85
109
|
## Hub de Referência
|