trdr-ds-install 1.7.0 → 1.7.2
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/package.json
CHANGED
|
@@ -6,7 +6,7 @@ argument-hint: "[analyze|apply|foundation|violations|components|final|resume|sta
|
|
|
6
6
|
allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
**Skill version:** 1.7.
|
|
9
|
+
**Skill version:** 1.7.2
|
|
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**.
|
|
@@ -60,7 +60,7 @@ Compare the result with the **Skill version** constant at the top of this file (
|
|
|
60
60
|
- If registry version == local version: skip silently, continue.
|
|
61
61
|
- If registry version > local version:
|
|
62
62
|
```
|
|
63
|
-
🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.7.
|
|
63
|
+
🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.7.2)
|
|
64
64
|
|
|
65
65
|
Responda:
|
|
66
66
|
- `"atualizar"` / `"update"` — instalar a nova versão agora (requer reiniciar /trdr-ds após)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "1.0",
|
|
3
|
-
"generatedAt": "2026-05-
|
|
3
|
+
"generatedAt": "2026-05-13T15:09:21.130Z",
|
|
4
4
|
"total": 20,
|
|
5
5
|
"implemented": 20,
|
|
6
6
|
"categories": {
|
|
@@ -1987,7 +1987,7 @@
|
|
|
1987
1987
|
"name": "Badge",
|
|
1988
1988
|
"figmaId": "2316:8953",
|
|
1989
1989
|
"category": "outros",
|
|
1990
|
-
"description": "Badge de status com dot opcional. 5 variantes (Neutral, Brand, Success, Warning, Archived) e 2 tamanhos (default 12px, large 14px).
|
|
1990
|
+
"description": "Badge de status com dot opcional. 5 variantes (Neutral, Brand, Success, Warning, Archived) e 2 tamanhos (default 12px/16px, large 14px/25px). Border-radius 5px.",
|
|
1991
1991
|
"props": [
|
|
1992
1992
|
{
|
|
1993
1993
|
"name": "Variant",
|
|
@@ -2019,10 +2019,15 @@
|
|
|
2019
2019
|
],
|
|
2020
2020
|
"dimensions": [
|
|
2021
2021
|
{
|
|
2022
|
-
"label": "Default",
|
|
2022
|
+
"label": "Default (sm)",
|
|
2023
2023
|
"width": "auto (hug)",
|
|
2024
2024
|
"height": "16px"
|
|
2025
2025
|
},
|
|
2026
|
+
{
|
|
2027
|
+
"label": "Large",
|
|
2028
|
+
"width": "auto (hug)",
|
|
2029
|
+
"height": "25px"
|
|
2030
|
+
},
|
|
2026
2031
|
{
|
|
2027
2032
|
"label": "Dot icon",
|
|
2028
2033
|
"width": "6px",
|
|
@@ -2106,13 +2111,13 @@
|
|
|
2106
2111
|
"value": "#777777"
|
|
2107
2112
|
}
|
|
2108
2113
|
],
|
|
2109
|
-
"anatomy": "[span.trdr-badge .trdr-badge-{variant} .trdr-badge-lg? .trdr-badge-dot?]\n └── [::before dot 6×6px border-radius full, cor = currentColor] (se .trdr-badge-dot)\n └── [texto label]\n\nContainer: inline-flex, align-items center,
|
|
2114
|
+
"anatomy": "[span.trdr-badge .trdr-badge-{variant} .trdr-badge-lg? .trdr-badge-dot?]\n └── [::before dot 6×6px border-radius full, cor = currentColor] (se .trdr-badge-dot)\n └── [texto label]\n\nContainer: inline-flex, align-items center, border-radius 5px, border 1px solid\nDefault (sm): height 16px, padding 0 4px, Inter 12px/500, letter-spacing 0.2px\nLarge: height auto (~25px), padding 4px uniforme, Inter 14px/400, letter-spacing 0, line-height 1.2",
|
|
2110
2115
|
"implemented": true,
|
|
2111
2116
|
"code": {
|
|
2112
2117
|
"html": "<!-- Neutral (default) -->\n<span class=\"trdr-badge trdr-badge-neutral\">Badge</span>\n\n<!-- Brand com dot -->\n<span class=\"trdr-badge trdr-badge-brand trdr-badge-dot\">Active</span>\n\n<!-- Success com dot -->\n<span class=\"trdr-badge trdr-badge-success trdr-badge-dot\">Merged</span>\n\n<!-- Warning -->\n<span class=\"trdr-badge trdr-badge-warning\">Atenção</span>\n\n<!-- Archived com dot -->\n<span class=\"trdr-badge trdr-badge-archived trdr-badge-dot\">Archived</span>\n\n<!-- Large -->\n<span class=\"trdr-badge trdr-badge-brand trdr-badge-lg trdr-badge-dot\">Active</span>\n<span class=\"trdr-badge trdr-badge-success trdr-badge-lg trdr-badge-dot\">Merged</span>\n<span class=\"trdr-badge trdr-badge-neutral trdr-badge-lg\">Badge</span>",
|
|
2113
|
-
"css": ".trdr-badge {\n display: inline-flex;\n align-items: center;\n height: 16px;\n padding: 0 4px;\n border-radius: 5px; /* fixo, não token */\n font-family: var(--font-secondary); /* Inter */\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.2px;\n line-height: 1;\n white-space: nowrap;\n}\n\n/* Tamanho Large (Figma \"Badge large\") */\n.trdr-badge-lg {\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0;\n line-height: 1.2;\n}\n\n/* --- Variantes --- */\n.trdr-badge-neutral {\n background-color: var(--surface-secondary); /* #222222 */\n color: var(--content-tertiary); /* #A4A4A4 */\n border: 1px solid var(--border-subtle); /* #222222 */\n}\n\n.trdr-badge-brand {\n background-color: var(--surface-brand); /* #00D4FF29 */\n color: var(--content-brand); /* #00D4FF */\n border: 1px solid var(--content-brand); /* #00D4FF */\n}\n\n.trdr-badge-success {\n background-color: var(--surface-success); /* #4FE29014 */\n color: var(--content-success); /* #4FE290 */\n border: 1px solid var(--content-success); /* #4FE290 */\n}\n\n.trdr-badge-warning {\n background-color: var(--surface-warning); /* #FFCC4014 */\n color: var(--content-warning); /* #FFD35A */\n border: 1px solid var(--content-warning); /* #FFD35A */\n}\n\n.trdr-badge-archived {\n background-color: var(--surface-tertiary); /* #1A1A1A */\n color: var(--content-disabled); /* #4A4A4A */\n border: 1px solid var(--border-disabled); /* #777777 */\n}\n\n/* Dot indicator (pseudo-element) */\n.trdr-badge-dot::before {\n content: '';\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: var(--radius-full); /* 9999px */\n background-color: currentColor;\n
|
|
2118
|
+
"css": ".trdr-badge {\n display: inline-flex;\n align-items: center;\n height: 16px;\n padding: 0 4px;\n border-radius: 5px; /* fixo, não token */\n font-family: var(--font-secondary); /* Inter */\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.2px;\n line-height: 1;\n white-space: nowrap;\n}\n\n/* Tamanho Large (Figma \"Badge large\") */\n.trdr-badge-lg {\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0;\n line-height: 1.2;\n padding: 4px; /* 4px uniforme */\n height: auto; /* ~25px, hug content */\n}\n\n/* --- Variantes --- */\n.trdr-badge-neutral {\n background-color: var(--surface-secondary); /* #222222 */\n color: var(--content-tertiary); /* #A4A4A4 */\n border: 1px solid var(--border-subtle); /* #222222 */\n}\n\n.trdr-badge-brand {\n background-color: var(--surface-brand); /* #00D4FF29 */\n color: var(--content-brand); /* #00D4FF */\n border: 1px solid var(--content-brand); /* #00D4FF */\n}\n\n.trdr-badge-success {\n background-color: var(--surface-success); /* #4FE29014 */\n color: var(--content-success); /* #4FE290 */\n border: 1px solid var(--content-success); /* #4FE290 */\n}\n\n.trdr-badge-warning {\n background-color: var(--surface-warning); /* #FFCC4014 */\n color: var(--content-warning); /* #FFD35A */\n border: 1px solid var(--content-warning); /* #FFD35A */\n}\n\n.trdr-badge-archived {\n background-color: var(--surface-tertiary); /* #1A1A1A */\n color: var(--content-disabled); /* #4A4A4A */\n border: 1px solid var(--border-disabled); /* #777777 */\n}\n\n/* Dot indicator (pseudo-element) */\n.trdr-badge-dot::before {\n content: '';\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: var(--radius-full); /* 9999px */\n background-color: currentColor;\n}",
|
|
2114
2119
|
"react": "import Badge from '@/components/ui/Badge'\n\nexport default function Example() {\n return (\n <>\n {/* Variantes default (12px) */}\n <Badge variant=\"neutral\">Badge</Badge>\n <Badge variant=\"brand\" dot>Active</Badge>\n <Badge variant=\"success\" dot>Merged</Badge>\n <Badge variant=\"warning\">Atenção</Badge>\n <Badge variant=\"archived\" dot>Archived</Badge>\n\n {/* Variantes large (14px) — match do Figma \"Badge large\" */}\n <Badge variant=\"brand\" size=\"lg\" dot>Active</Badge>\n <Badge variant=\"success\" size=\"lg\" dot>Merged</Badge>\n <Badge variant=\"neutral\" size=\"lg\">Badge</Badge>\n <Badge variant=\"archived\" size=\"lg\" dot>Archived</Badge>\n </>\n )\n}",
|
|
2115
|
-
"prompt": "Implemente o componente Badge do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n-
|
|
2120
|
+
"prompt": "Implemente o componente Badge do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Border-radius: 5px (fixo, não token)\n- Border: 1px solid (cor varia por variante)\n- Default (sm): height 16px, padding 0 4px, Inter 12px/500, letter-spacing 0.2px\n- Large: height auto (~25px), padding 4px uniforme, Inter 14px/400, letter-spacing 0, line-height 1.2\n- Dot: 6×6px, border-radius full, cor = currentColor\n\nVARIANTES E TOKENS OBRIGATÓRIOS:\n- Neutral: bg --surface-secondary (#222222), text --content-tertiary (#A4A4A4), border --border-subtle (#222222)\n- Brand: bg --surface-brand (#00D4FF29), text --content-brand (#00D4FF), border --content-brand\n- Success: bg --surface-success (#4FE29014), text --content-success (#4FE290), border --content-success\n- Warning: bg --surface-warning (#FFCC4014), text --content-warning (#FFD35A), border --content-warning\n- Archived: bg --surface-tertiary (#1A1A1A), text --content-disabled (#4A4A4A), border --border-disabled (#777777)\n\nPROPS:\n- variant: 'neutral' | 'brand' | 'success' | 'warning' | 'archived' (default: 'neutral')\n- size: 'default' | 'lg' (default: 'default')\n- dot: boolean (default: false) — mostra dot 6×6 antes do texto via ::before\n\nNOTAS:\n- O dot usa currentColor para herdar a cor do texto da variante\n- Merged no Figma = variante \"success\" com dot\n- Active no Figma = variante \"brand\" com dot\n- Archived = variante dedicada com dot\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-* ou --scale-radius-*."
|
|
2116
2121
|
}
|
|
2117
2122
|
}
|
|
2118
2123
|
]
|