@systemverification/styling-kit 2.0.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/CLAUDE.md +98 -0
- package/README.md +411 -0
- package/bin/sv-style.js +74 -0
- package/docs/BAD_EXAMPLES.md +145 -0
- package/docs/COMPONENTS/BUTTON.md +108 -0
- package/docs/COMPONENTS/CARD.md +68 -0
- package/docs/DESIGN_SYSTEM.md +614 -0
- package/package.json +22 -0
- package/src/assets.js +67 -0
- package/src/bundle.js +67 -0
- package/src/config.js +67 -0
- package/src/doctor.js +113 -0
- package/src/fs-utils.js +15 -0
- package/src/init.js +182 -0
- package/src/login.js +65 -0
- package/src/mcp.js +215 -0
- package/src/path-rewrite.js +48 -0
- package/src/shutdown.js +26 -0
- package/src/update.js +101 -0
- package/templates/AGENTS_SNIPPET.md +40 -0
- package/templates/CLAUDE_SNIPPET.md +14 -0
- package/tokens/tokens-core.css +51 -0
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
# Bad Examples — Styling Anti-Patterns
|
|
2
|
+
|
|
3
|
+
Before writing any styled code, check against these patterns.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## ❌ Hardcoded Colors
|
|
8
|
+
|
|
9
|
+
```css
|
|
10
|
+
/* WRONG */
|
|
11
|
+
background: #123456;
|
|
12
|
+
color: #f0f0f0;
|
|
13
|
+
border-color: #ff9900;
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
```css
|
|
17
|
+
/* CORRECT */
|
|
18
|
+
background: var(--color-dark-blue);
|
|
19
|
+
color: var(--color-sand);
|
|
20
|
+
border-color: var(--color-yellow);
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
**Rule:** Use `var(--color-*)` tokens. Never hardcode hex values.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## ❌ Non-Palette rgba() Values
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
/* WRONG */
|
|
31
|
+
color: rgba(200, 200, 200, 0.8);
|
|
32
|
+
background: rgba(100, 100, 100, 0.5);
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
/* CORRECT — derived from palette */
|
|
37
|
+
color: rgba(242, 242, 234, 0.7); /* sand */
|
|
38
|
+
background: rgba(67, 83, 100, 0.35); /* light-blue */
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
All `rgba()` values must use RGB numbers matching the core palette:
|
|
42
|
+
- `11, 27, 40` — dark-blue
|
|
43
|
+
- `67, 83, 100` — light-blue
|
|
44
|
+
- `242, 242, 234` — sand
|
|
45
|
+
- `247, 249, 101` — yellow
|
|
46
|
+
- `255, 255, 255` — white
|
|
47
|
+
- `239, 68, 68` — error
|
|
48
|
+
- `16, 185, 129` — success
|
|
49
|
+
- `251, 146, 60` — warning (orange)
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## ❌ Magic Pixel Spacing
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
/* WRONG */
|
|
57
|
+
margin: 17px;
|
|
58
|
+
padding: 13px 21px;
|
|
59
|
+
gap: 9px;
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
/* CORRECT */
|
|
64
|
+
margin: 1.5rem;
|
|
65
|
+
padding: 1rem 1.25rem;
|
|
66
|
+
gap: 0.75rem;
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
**Rule:** Use `rem` units on a consistent scale. No arbitrary pixel values.
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## ❌ Hardcoded px Font Sizes
|
|
74
|
+
|
|
75
|
+
```css
|
|
76
|
+
/* WRONG */
|
|
77
|
+
font-size: 15px;
|
|
78
|
+
font-size: 18px;
|
|
79
|
+
font-size: 12px;
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
```css
|
|
83
|
+
/* CORRECT — matches defined scale */
|
|
84
|
+
font-size: 0.875rem; /* form inputs */
|
|
85
|
+
font-size: 1rem; /* base */
|
|
86
|
+
font-size: 1.05rem; /* card titles */
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
**Rule:** Use only the defined typography scale (rem values). Never use `px` for font sizes.
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## ❌ Accent Color Misuse
|
|
94
|
+
|
|
95
|
+
```css
|
|
96
|
+
/* WRONG — large background */
|
|
97
|
+
.section { background: var(--color-yellow); }
|
|
98
|
+
.hero { background: var(--color-yellow); }
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
```css
|
|
102
|
+
/* CORRECT — CTA and interactive only */
|
|
103
|
+
button { background: var(--color-yellow); }
|
|
104
|
+
a { color: var(--color-yellow); }
|
|
105
|
+
input:focus { outline-color: var(--color-yellow); }
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
**Rule:** Yellow (`--color-yellow`) is only for interactive/CTA elements. Never for large backgrounds or non-interactive content.
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## ❌ Missing Component States
|
|
113
|
+
|
|
114
|
+
```css
|
|
115
|
+
/* WRONG — only default defined */
|
|
116
|
+
button {
|
|
117
|
+
background: var(--color-yellow);
|
|
118
|
+
color: var(--color-dark-blue);
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
```css
|
|
123
|
+
/* CORRECT — all five states */
|
|
124
|
+
button { background: var(--color-yellow); color: var(--color-dark-blue); transition: var(--transition); }
|
|
125
|
+
button:hover { background: var(--color-yellow-hover); }
|
|
126
|
+
button:active { background: var(--color-yellow-active); }
|
|
127
|
+
button:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 2px; }
|
|
128
|
+
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
**Rule:** All interactive components must define: default, hover, active, focus-visible, disabled.
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
## ❌ Inline Styles
|
|
136
|
+
|
|
137
|
+
```html
|
|
138
|
+
<!-- WRONG -->
|
|
139
|
+
<div style="background: red; margin: 10px;">
|
|
140
|
+
|
|
141
|
+
<!-- CORRECT -->
|
|
142
|
+
<div class="my-card">
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
**Rule:** All styles belong in external stylesheets. Never use `style=""` attributes.
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# Button Component
|
|
2
|
+
|
|
3
|
+
Part of the SV Style System. All button implementations must follow this spec exactly.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Variants
|
|
8
|
+
|
|
9
|
+
| Variant | Background | Text | Border | Hover State |
|
|
10
|
+
|---|---|---|---|---|
|
|
11
|
+
| Primary | `var(--color-yellow)` | `var(--color-dark-blue)` | none | `var(--color-yellow-hover)` |
|
|
12
|
+
| Secondary | transparent | `var(--color-sand)` | `1px solid rgba(242, 242, 234, 0.2)` | `rgba(242, 242, 234, 0.1)` bg |
|
|
13
|
+
| Ghost | transparent | `var(--color-sand)` | none | `rgba(242, 242, 234, 0.1)` bg |
|
|
14
|
+
| Danger | transparent | `var(--color-error-light)` | `rgba(239, 68, 68, 0.3)` | `rgba(239, 68, 68, 0.1)` bg |
|
|
15
|
+
|
|
16
|
+
## Structure
|
|
17
|
+
|
|
18
|
+
- `border-radius: var(--radius-pill)` — always pill shaped
|
|
19
|
+
- `padding: 0.5rem 1rem`
|
|
20
|
+
- `font-size: 0.85rem`
|
|
21
|
+
- `font-weight: 500`
|
|
22
|
+
- `text-transform: uppercase`
|
|
23
|
+
- `cursor: pointer`
|
|
24
|
+
- `transition: var(--transition)`
|
|
25
|
+
|
|
26
|
+
## Required States
|
|
27
|
+
|
|
28
|
+
All five states are mandatory. Omitting any is a design system violation.
|
|
29
|
+
|
|
30
|
+
| State | Requirement |
|
|
31
|
+
|---|---|
|
|
32
|
+
| Default | Base styling as defined |
|
|
33
|
+
| Hover | Background/text shift per variant |
|
|
34
|
+
| Active | Darker variant of hover |
|
|
35
|
+
| Focus-visible | `outline: 2px solid var(--color-yellow); outline-offset: 2px` |
|
|
36
|
+
| Disabled | `opacity: 0.5; cursor: not-allowed; pointer-events: none` |
|
|
37
|
+
|
|
38
|
+
## Code Example — Primary
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
button.primary {
|
|
42
|
+
background: var(--color-yellow);
|
|
43
|
+
color: var(--color-dark-blue);
|
|
44
|
+
border: none;
|
|
45
|
+
border-radius: var(--radius-pill);
|
|
46
|
+
padding: 0.5rem 1rem;
|
|
47
|
+
font-size: 0.85rem;
|
|
48
|
+
font-weight: 500;
|
|
49
|
+
text-transform: uppercase;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
transition: var(--transition);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
button.primary:hover {
|
|
55
|
+
background: var(--color-yellow-hover);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
button.primary:active {
|
|
59
|
+
background: var(--color-yellow-active);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
button.primary:focus-visible {
|
|
63
|
+
outline: 2px solid var(--color-yellow);
|
|
64
|
+
outline-offset: 2px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
button.primary:disabled {
|
|
68
|
+
opacity: 0.5;
|
|
69
|
+
cursor: not-allowed;
|
|
70
|
+
pointer-events: none;
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Code Example — Secondary
|
|
75
|
+
|
|
76
|
+
```css
|
|
77
|
+
button.secondary {
|
|
78
|
+
background: transparent;
|
|
79
|
+
color: var(--color-sand);
|
|
80
|
+
border: 1px solid rgba(242, 242, 234, 0.2);
|
|
81
|
+
border-radius: var(--radius-pill);
|
|
82
|
+
padding: 0.5rem 1rem;
|
|
83
|
+
font-size: 0.85rem;
|
|
84
|
+
font-weight: 500;
|
|
85
|
+
text-transform: uppercase;
|
|
86
|
+
cursor: pointer;
|
|
87
|
+
transition: var(--transition);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
button.secondary:hover {
|
|
91
|
+
background: rgba(242, 242, 234, 0.1);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
button.secondary:active {
|
|
95
|
+
background: rgba(242, 242, 234, 0.15);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
button.secondary:focus-visible {
|
|
99
|
+
outline: 2px solid var(--color-yellow);
|
|
100
|
+
outline-offset: 2px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
button.secondary:disabled {
|
|
104
|
+
opacity: 0.5;
|
|
105
|
+
cursor: not-allowed;
|
|
106
|
+
pointer-events: none;
|
|
107
|
+
}
|
|
108
|
+
```
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Card Component
|
|
2
|
+
|
|
3
|
+
Part of the SV Style System. All card implementations must follow this spec exactly.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Structure
|
|
8
|
+
|
|
9
|
+
- Container with translucent background and subtle border
|
|
10
|
+
- Optional title section (uppercase heading)
|
|
11
|
+
- Flexible content area
|
|
12
|
+
- Optional footer section
|
|
13
|
+
|
|
14
|
+
## Styling
|
|
15
|
+
|
|
16
|
+
| Property | Value |
|
|
17
|
+
|---|---|
|
|
18
|
+
| Background | `rgba(67, 83, 100, 0.35)` |
|
|
19
|
+
| Border | `1px solid rgba(67, 83, 100, 0.5)` |
|
|
20
|
+
| Border radius | `var(--radius-md)` |
|
|
21
|
+
| Padding | `1.5rem` |
|
|
22
|
+
| Transition | `var(--transition)` |
|
|
23
|
+
|
|
24
|
+
## Title
|
|
25
|
+
|
|
26
|
+
| Property | Value |
|
|
27
|
+
|---|---|
|
|
28
|
+
| Font family | `"HeadingFont", sans-serif` |
|
|
29
|
+
| Font size | `1.05rem` |
|
|
30
|
+
| Font weight | `600` |
|
|
31
|
+
| Text transform | `uppercase` |
|
|
32
|
+
| Color | `var(--color-white)` |
|
|
33
|
+
| Margin bottom | `0.75rem` |
|
|
34
|
+
|
|
35
|
+
## Required States
|
|
36
|
+
|
|
37
|
+
| State | Requirement |
|
|
38
|
+
|---|---|
|
|
39
|
+
| Default | Base styling |
|
|
40
|
+
| Hover | `transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)` |
|
|
41
|
+
| Focus (if interactive) | `border-color: var(--color-yellow)` |
|
|
42
|
+
| Disabled (if interactive) | `opacity: 0.5; cursor: not-allowed; pointer-events: none` |
|
|
43
|
+
|
|
44
|
+
## Code Example
|
|
45
|
+
|
|
46
|
+
```css
|
|
47
|
+
.card {
|
|
48
|
+
background: rgba(67, 83, 100, 0.35);
|
|
49
|
+
border: 1px solid rgba(67, 83, 100, 0.5);
|
|
50
|
+
border-radius: var(--radius-md);
|
|
51
|
+
padding: 1.5rem;
|
|
52
|
+
transition: var(--transition);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.card:hover {
|
|
56
|
+
transform: translateY(-2px);
|
|
57
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.card-title {
|
|
61
|
+
font-family: "HeadingFont", sans-serif;
|
|
62
|
+
font-size: 1.05rem;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
text-transform: uppercase;
|
|
65
|
+
color: var(--color-white);
|
|
66
|
+
margin-bottom: 0.75rem;
|
|
67
|
+
}
|
|
68
|
+
```
|