1# Component Tokens
2 
3Component-specific tokens referencing semantic layer.
4 
5## Button Tokens
6 
7```css
8:root {
9  /* Default (Primary) */
10  --button-bg: var(--color-primary);
11  --button-fg: var(--color-primary-foreground);
12  --button-hover-bg: var(--color-primary-hover);
13  --button-active-bg: var(--color-primary-active);
14 
15  /* Secondary */
16  --button-secondary-bg: var(--color-secondary);
17  --button-secondary-fg: var(--color-secondary-foreground);
18  --button-secondary-hover-bg: var(--color-secondary-hover);
19 
20  /* Outline */
21  --button-outline-border: var(--color-border);
22  --button-outline-fg: var(--color-foreground);
23  --button-outline-hover-bg: var(--color-accent);
24 
25  /* Ghost */
26  --button-ghost-fg: var(--color-foreground);
27  --button-ghost-hover-bg: var(--color-accent);
28 
29  /* Destructive */
30  --button-destructive-bg: var(--color-destructive);
31  --button-destructive-fg: var(--color-destructive-foreground);
32  --button-destructive-hover-bg: var(--color-destructive-hover);
33 
34  /* Sizing */
35  --button-padding-x: var(--space-4);
36  --button-padding-y: var(--space-2);
37  --button-padding-x-sm: var(--space-3);
38  --button-padding-y-sm: var(--space-1-5);
39  --button-padding-x-lg: var(--space-6);
40  --button-padding-y-lg: var(--space-3);
41 
42  /* Shape */
43  --button-radius: var(--radius-md);
44  --button-font-size: var(--font-size-sm);
45  --button-font-weight: var(--font-weight-medium);
46}
47```
48 
49## Input Tokens
50 
51```css
52:root {
53  /* Background & Border */
54  --input-bg: var(--color-background);
55  --input-border: var(--color-input);
56  --input-fg: var(--color-foreground);
57 
58  /* Placeholder */
59  --input-placeholder: var(--color-muted-foreground);
60 
61  /* Focus */
62  --input-focus-border: var(--color-ring);
63  --input-focus-ring: var(--color-ring);
64 
65  /* Error */
66  --input-error-border: var(--color-error);
67  --input-error-fg: var(--color-error);
68 
69  /* Disabled */
70  --input-disabled-bg: var(--color-muted);
71  --input-disabled-fg: var(--color-muted-foreground);
72 
73  /* Sizing */
74  --input-padding-x: var(--space-3);
75  --input-padding-y: var(--space-2);
76  --input-radius: var(--radius-md);
77  --input-font-size: var(--font-size-sm);
78}
79```
80 
81## Card Tokens
82 
83```css
84:root {
85  /* Background & Border */
86  --card-bg: var(--color-card);
87  --card-fg: var(--color-card-foreground);
88  --card-border: var(--color-border);
89 
90  /* Shadow */
91  --card-shadow: var(--shadow-default);
92  --card-shadow-hover: var(--shadow-md);
93 
94  /* Spacing */
95  --card-padding: var(--space-6);
96  --card-padding-sm: var(--space-4);
97  --card-gap: var(--space-4);
98 
99  /* Shape */
100  --card-radius: var(--radius-lg);
101}
102```
103 
104## Badge Tokens
105 
106```css
107:root {
108  /* Default */
109  --badge-bg: var(--color-primary);
110  --badge-fg: var(--color-primary-foreground);
111 
112  /* Secondary */
113  --badge-secondary-bg: var(--color-secondary);
114  --badge-secondary-fg: var(--color-secondary-foreground);
115 
116  /* Outline */
117  --badge-outline-border: var(--color-border);
118  --badge-outline-fg: var(--color-foreground);
119 
120  /* Destructive */
121  --badge-destructive-bg: var(--color-destructive);
122  --badge-destructive-fg: var(--color-destructive-foreground);
123 
124  /* Sizing */
125  --badge-padding-x: var(--space-2-5);
126  --badge-padding-y: var(--space-0-5);
127  --badge-radius: var(--radius-full);
128  --badge-font-size: var(--font-size-xs);
129}
130```
131 
132## Alert Tokens
133 
134```css
135:root {
136  /* Default */
137  --alert-bg: var(--color-background);
138  --alert-fg: var(--color-foreground);
139  --alert-border: var(--color-border);
140 
141  /* Destructive */
142  --alert-destructive-bg: var(--color-destructive);
143  --alert-destructive-fg: var(--color-destructive-foreground);
144 
145  /* Spacing */
146  --alert-padding: var(--space-4);
147  --alert-radius: var(--radius-lg);
148}
149```
150 
151## Dialog/Modal Tokens
152 
153```css
154:root {
155  /* Overlay */
156  --dialog-overlay-bg: rgb(0 0 0 / 0.5);
157 
158  /* Content */
159  --dialog-bg: var(--color-background);
160  --dialog-fg: var(--color-foreground);
161  --dialog-border: var(--color-border);
162  --dialog-shadow: var(--shadow-lg);
163 
164  /* Spacing */
165  --dialog-padding: var(--space-6);
166  --dialog-radius: var(--radius-lg);
167  --dialog-max-width: 32rem;
168}
169```
170 
171## Table Tokens
172 
173```css
174:root {
175  /* Header */
176  --table-header-bg: var(--color-muted);
177  --table-header-fg: var(--color-muted-foreground);
178 
179  /* Body */
180  --table-row-bg: var(--color-background);
181  --table-row-hover-bg: var(--color-muted);
182  --table-row-fg: var(--color-foreground);
183 
184  /* Border */
185  --table-border: var(--color-border);
186 
187  /* Spacing */
188  --table-cell-padding-x: var(--space-4);
189  --table-cell-padding-y: var(--space-3);
190}
191```
192 
193## Usage Example
194 
195```css
196.button {
197  background: var(--button-bg);
198  color: var(--button-fg);
199  padding: var(--button-padding-y) var(--button-padding-x);
200  border-radius: var(--button-radius);
201  font-size: var(--button-font-size);
202  font-weight: var(--button-font-weight);
203  transition: background var(--duration-fast);
204}
205 
206.button:hover {
207  background: var(--button-hover-bg);
208}
209 
210.button.secondary {
211  background: var(--button-secondary-bg);
212  color: var(--button-secondary-fg);
213}
214```
215