Skip to content

Commit e90b02a

Browse files
kotAPIkotAPI
committed
Sync baremetal accordion styles and token outputs
1 parent 76d9e26 commit e90b02a

6 files changed

Lines changed: 581 additions & 431 deletions

File tree

‎agents/skills/solve-issue-with-worktree.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
Work on this issue in an isolated git worktree by default.
2+
3+
Instructions:
4+
- Start by reading `knowledge/MASTER_LIST.md` and treat it as the canonical project guidance.
5+
- Create or use a dedicated git worktree for this issue before making changes.
6+
- Do all work only inside that worktree.
7+
- Investigate the issue, implement the fix, run relevant tests/validation, and keep the scope limited to this issue only.
8+
- Do not revert, overwrite, or clean up unrelated changes in the main worktree or other worktrees.
9+
- Commit the changes with a clear commit message.
10+
- Push the branch and open a PR against `main`.
11+
- In the PR, include:
12+
- what changed
13+
- why
14+
- tests/validation run
15+
- any known risks or follow-ups
16+
- If blocked, stop and report the blocker clearly instead of guessing.
17+
18+
Issue to work on:
19+
<issue link or issue description>
20+
21+
Defaults:
22+
- Base branch: `main`
23+
- Branch name: `dev/<short-issue-slug>`
24+
- Worktree location: choose a sensible sibling directory for the repo worktree if not specified
25+
26+
Return at the end:
27+
- worktree path
28+
- branch name
29+
- commit sha
30+
- PR URL
31+
- short summary of the fix
32+
- tests/validation run

‎src/components/ui/Accordion/accordion.baremetal.scss‎

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,63 @@
11
/* stylelint-disable at-rule-no-unknown */
22
@use "src/design-systems/baremetal/scope" as baremetal;
33

4-
#{baremetal.$theme-root} :where(.rad-ui-accordion-root) { @include baremetal.surface; }
5-
#{baremetal.$theme-root} :where(.rad-ui-accordion-trigger) { @include baremetal.option-item; }
4+
#{baremetal.$theme-root} :where(.rad-ui-accordion-root) {
5+
@include baremetal.surface;
6+
width: 100%;
7+
}
8+
9+
#{baremetal.$theme-root} :where(.rad-ui-accordion-item) {
10+
border-bottom: 1px solid var(--rad-ui-border-soft);
11+
12+
&[data-disabled] {
13+
opacity: 0.5;
14+
pointer-events: none;
15+
}
16+
}
17+
18+
#{baremetal.$theme-root} :where(.rad-ui-accordion-header) {
19+
display: flex;
20+
margin: 0;
21+
}
22+
23+
#{baremetal.$theme-root} :where(.rad-ui-accordion-trigger) {
24+
@include baremetal.option-item;
25+
justify-content: space-between;
26+
gap: var(--rad-ui-spacing-4);
27+
padding: 1rem 4px;
28+
width: 100%;
29+
30+
&[aria-disabled="true"] {
31+
opacity: 0.5;
32+
pointer-events: none;
33+
}
34+
35+
svg,
36+
.rad-ui-accordion-chevron {
37+
flex-shrink: 0;
38+
transition: transform 200ms ease;
39+
}
40+
}
41+
42+
#{baremetal.$theme-root} :where(.rad-ui-accordion-item[data-state="open"] .rad-ui-accordion-trigger) {
43+
svg,
44+
.rad-ui-accordion-chevron {
45+
transform: rotate(180deg);
46+
}
47+
}
48+
49+
#{baremetal.$theme-root} :where(.rad-ui-accordion-content) {
50+
overflow: hidden;
51+
}
52+
53+
#{baremetal.$theme-root} :where(.rad-ui-accordion-content-inner) {
54+
padding-bottom: 1rem;
55+
56+
> :first-child {
57+
margin-top: 0;
58+
}
59+
60+
> :last-child {
61+
margin-bottom: 0;
62+
}
63+
}

‎src/design-systems/baremetal/default.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,22 @@
113113
font-family: var(--rad-ui-font-sans);
114114
}
115115

116+
#{scope.$theme-root}[data-rad-ui-theme="dark"] {
117+
--rad-ui-baremetal-black: #f5f5f5;
118+
--rad-ui-baremetal-white: #121212;
119+
--rad-ui-baremetal-canvas: #121212;
120+
--rad-ui-baremetal-panel: #161616;
121+
--rad-ui-baremetal-subtle: #202020;
122+
--rad-ui-baremetal-muted: #2a2a2a;
123+
--rad-ui-baremetal-disabled: #686868;
124+
--rad-ui-baremetal-shadow: 8px 8px 0 #050505;
125+
--rad-ui-baremetal-shadow-sm: 4px 4px 0 #050505;
126+
--rad-ui-text-muted: #b3b3b3;
127+
--rad-ui-ring-shadow: 0 0 0 2px var(--rad-ui-baremetal-white), 0 0 0 4px var(--rad-ui-baremetal-black);
128+
--rad-ui-ring-shadow-sm: 0 0 0 1px var(--rad-ui-baremetal-white), 0 0 0 3px var(--rad-ui-baremetal-black);
129+
--rad-ui-ring-shadow-inset: inset 0 0 0 2px var(--rad-ui-baremetal-black);
130+
}
131+
116132
#{scope.$theme-root} *,
117133
#{scope.$portal-root} * {
118134
letter-spacing: 0.08em;

‎src/tokenGen/index.js‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,50 @@ import generateCSSTokens from './transformers/generateCSSTokens.js';
66
import generateAccentTokens from './transformers/generateAccentTokens.js';
77
import generateAtomicTokens from './transformers/generateAtomicTokens.js';
88

9+
const INDENT = ' ';
10+
11+
const formatString = (value) => `'${String(value)
12+
.replace(/\\/g, '\\\\')
13+
.replace(/'/g, '\\\'')
14+
.replace(/\n/g, '\\n')
15+
.replace(/\r/g, '\\r')
16+
.replace(/\t/g, '\\t')}'`;
17+
18+
const formatKey = (key) => (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key) ? key : formatString(key));
19+
20+
const formatJsValue = (value, indentLevel = 0) => {
21+
if (Array.isArray(value)) {
22+
if (value.length === 0) {
23+
return '[]';
24+
}
25+
26+
const nextIndent = INDENT.repeat(indentLevel + 1);
27+
const currentIndent = INDENT.repeat(indentLevel);
28+
return `[\n${value.map((item) => `${nextIndent}${formatJsValue(item, indentLevel + 1)}`).join(',\n')}\n${currentIndent}]`;
29+
}
30+
31+
if (value && typeof value === 'object') {
32+
const entries = Object.entries(value);
33+
if (entries.length === 0) {
34+
return '{}';
35+
}
36+
37+
const nextIndent = INDENT.repeat(indentLevel + 1);
38+
const currentIndent = INDENT.repeat(indentLevel);
39+
return `{\n${entries
40+
.map(([key, entryValue]) => `${nextIndent}${formatKey(key)}: ${formatJsValue(entryValue, indentLevel + 1)}`)
41+
.join(',\n')}\n${currentIndent}}`;
42+
}
43+
44+
if (typeof value === 'string') {
45+
return formatString(value);
46+
}
47+
48+
return String(value);
49+
};
50+
51+
const formatJsModuleExport = (value) => `export default ${formatJsValue(value, 0)};\n`;
52+
953
try {
1054
const { colors, ...atomicTokens } = tokens;
1155

@@ -44,11 +88,11 @@ try {
4488

4589
// Write the JS variables to js files
4690
const colorJsFilePath = path.resolve('styles', 'jsTokens', 'colors.tokens.js');
47-
fs.writeFileSync(colorJsFilePath, `export default ${JSON.stringify(jsVariables, null, 2)}`, 'utf-8');
91+
fs.writeFileSync(colorJsFilePath, formatJsModuleExport(jsVariables), 'utf-8');
4892
console.log('JS file saved as colors.tokens.js');
4993

5094
const atomicJsFilePath = path.resolve('styles', 'jsTokens', 'atomic.tokens.js');
51-
fs.writeFileSync(atomicJsFilePath, `export default ${JSON.stringify(atomicJSTokens, null, 2)}`, 'utf-8');
95+
fs.writeFileSync(atomicJsFilePath, formatJsModuleExport(atomicJSTokens), 'utf-8');
5296
console.log('JS file saved as atomic.tokens.js');
5397
} catch (error) {
5498
console.error('An error occurred:', error);

‎styles/jsTokens/atomic.tokens.js‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,27 @@ export default {
88
full: 'var(--rad-ui-radius-full)'
99
},
1010
spacing: {
11-
0: 'var(--rad-ui-spacing-0)',
12-
1: 'var(--rad-ui-spacing-1)',
13-
2: 'var(--rad-ui-spacing-2)',
14-
3: 'var(--rad-ui-spacing-3)',
15-
4: 'var(--rad-ui-spacing-4)',
16-
5: 'var(--rad-ui-spacing-5)',
17-
6: 'var(--rad-ui-spacing-6)',
18-
8: 'var(--rad-ui-spacing-8)',
19-
10: 'var(--rad-ui-spacing-10)',
20-
12: 'var(--rad-ui-spacing-12)'
11+
'0': 'var(--rad-ui-spacing-0)',
12+
'1': 'var(--rad-ui-spacing-1)',
13+
'2': 'var(--rad-ui-spacing-2)',
14+
'3': 'var(--rad-ui-spacing-3)',
15+
'4': 'var(--rad-ui-spacing-4)',
16+
'5': 'var(--rad-ui-spacing-5)',
17+
'6': 'var(--rad-ui-spacing-6)',
18+
'8': 'var(--rad-ui-spacing-8)',
19+
'10': 'var(--rad-ui-spacing-10)',
20+
'12': 'var(--rad-ui-spacing-12)'
2121
},
2222
fontFamily: {
2323
sans: 'var(--rad-ui-font-sans)',
2424
mono: 'var(--rad-ui-font-mono)'
2525
},
2626
fontSize: {
27-
1: 'var(--rad-ui-font-size-1)',
28-
2: 'var(--rad-ui-font-size-2)',
29-
3: 'var(--rad-ui-font-size-3)',
30-
4: 'var(--rad-ui-font-size-4)',
31-
5: 'var(--rad-ui-font-size-5)'
27+
'1': 'var(--rad-ui-font-size-1)',
28+
'2': 'var(--rad-ui-font-size-2)',
29+
'3': 'var(--rad-ui-font-size-3)',
30+
'4': 'var(--rad-ui-font-size-4)',
31+
'5': 'var(--rad-ui-font-size-5)'
3232
},
3333
fontWeight: {
3434
regular: 'var(--rad-ui-font-weight-regular)',
@@ -37,10 +37,10 @@ export default {
3737
bold: 'var(--rad-ui-font-weight-bold)'
3838
},
3939
lineHeight: {
40-
1: 'var(--rad-ui-line-height-1)',
41-
2: 'var(--rad-ui-line-height-2)',
42-
3: 'var(--rad-ui-line-height-3)',
43-
4: 'var(--rad-ui-line-height-4)'
40+
'1': 'var(--rad-ui-line-height-1)',
41+
'2': 'var(--rad-ui-line-height-2)',
42+
'3': 'var(--rad-ui-line-height-3)',
43+
'4': 'var(--rad-ui-line-height-4)'
4444
},
4545
letterSpacing: {
4646
tight: 'var(--rad-ui-letter-spacing-tight)',
@@ -79,27 +79,27 @@ export default {
7979
spring: 'var(--rad-ui-motion-easing-spring)'
8080
},
8181
borderWidth: {
82-
0: 'var(--rad-ui-border-width-0)',
83-
1: 'var(--rad-ui-border-width-1)',
84-
2: 'var(--rad-ui-border-width-2)'
82+
'0': 'var(--rad-ui-border-width-0)',
83+
'1': 'var(--rad-ui-border-width-1)',
84+
'2': 'var(--rad-ui-border-width-2)'
8585
},
8686
opacity: {
87-
0: 'var(--rad-ui-opacity-0)',
88-
10: 'var(--rad-ui-opacity-10)',
89-
20: 'var(--rad-ui-opacity-20)',
90-
25: 'var(--rad-ui-opacity-25)',
91-
50: 'var(--rad-ui-opacity-50)',
92-
75: 'var(--rad-ui-opacity-75)',
93-
100: 'var(--rad-ui-opacity-100)'
87+
'0': 'var(--rad-ui-opacity-0)',
88+
'10': 'var(--rad-ui-opacity-10)',
89+
'20': 'var(--rad-ui-opacity-20)',
90+
'25': 'var(--rad-ui-opacity-25)',
91+
'50': 'var(--rad-ui-opacity-50)',
92+
'75': 'var(--rad-ui-opacity-75)',
93+
'100': 'var(--rad-ui-opacity-100)'
9494
},
9595
size: {
96-
4: 'var(--rad-ui-size-4)',
97-
5: 'var(--rad-ui-size-5)',
98-
6: 'var(--rad-ui-size-6)',
99-
8: 'var(--rad-ui-size-8)',
100-
10: 'var(--rad-ui-size-10)',
101-
12: 'var(--rad-ui-size-12)',
102-
16: 'var(--rad-ui-size-16)'
96+
'4': 'var(--rad-ui-size-4)',
97+
'5': 'var(--rad-ui-size-5)',
98+
'6': 'var(--rad-ui-size-6)',
99+
'8': 'var(--rad-ui-size-8)',
100+
'10': 'var(--rad-ui-size-10)',
101+
'12': 'var(--rad-ui-size-12)',
102+
'16': 'var(--rad-ui-size-16)'
103103
},
104104
breakpoints: {
105105
sm: 'var(--rad-ui-breakpoint-sm)',
@@ -117,16 +117,16 @@ export default {
117117
xl: 'var(--rad-ui-blur-xl)'
118118
},
119119
outlineOffset: {
120-
0: 'var(--rad-ui-outline-offset-0)',
121-
1: 'var(--rad-ui-outline-offset-1)',
122-
2: 'var(--rad-ui-outline-offset-2)',
123-
4: 'var(--rad-ui-outline-offset-4)'
120+
'0': 'var(--rad-ui-outline-offset-0)',
121+
'1': 'var(--rad-ui-outline-offset-1)',
122+
'2': 'var(--rad-ui-outline-offset-2)',
123+
'4': 'var(--rad-ui-outline-offset-4)'
124124
},
125125
strokeWidth: {
126-
1: 'var(--rad-ui-stroke-width-1)',
127-
2: 'var(--rad-ui-stroke-width-2)',
128-
1.5: 'var(--rad-ui-stroke-width-1-5)',
129-
2.5: 'var(--rad-ui-stroke-width-2-5)'
126+
'1': 'var(--rad-ui-stroke-width-1)',
127+
'2': 'var(--rad-ui-stroke-width-2)',
128+
'1.5': 'var(--rad-ui-stroke-width-1-5)',
129+
'2.5': 'var(--rad-ui-stroke-width-2-5)'
130130
},
131131
aspectRatio: {
132132
square: 'var(--rad-ui-aspect-ratio-square)',
@@ -164,10 +164,10 @@ export default {
164164
lg: 'var(--rad-ui-focus-ring-width-lg)'
165165
},
166166
ringOffset: {
167-
0: 'var(--rad-ui-focus-ring-offset-0)',
168-
1: 'var(--rad-ui-focus-ring-offset-1)',
169-
2: 'var(--rad-ui-focus-ring-offset-2)',
170-
4: 'var(--rad-ui-focus-ring-offset-4)'
167+
'0': 'var(--rad-ui-focus-ring-offset-0)',
168+
'1': 'var(--rad-ui-focus-ring-offset-1)',
169+
'2': 'var(--rad-ui-focus-ring-offset-2)',
170+
'4': 'var(--rad-ui-focus-ring-offset-4)'
171171
},
172172
ringStyle: {
173173
solid: 'var(--rad-ui-focus-ring-style-solid)',
@@ -177,13 +177,13 @@ export default {
177177
},
178178
grid: {
179179
columns: {
180-
1: 'var(--rad-ui-grid-columns-1)',
181-
2: 'var(--rad-ui-grid-columns-2)',
182-
3: 'var(--rad-ui-grid-columns-3)',
183-
4: 'var(--rad-ui-grid-columns-4)',
184-
6: 'var(--rad-ui-grid-columns-6)',
185-
12: 'var(--rad-ui-grid-columns-12)',
186-
24: 'var(--rad-ui-grid-columns-24)'
180+
'1': 'var(--rad-ui-grid-columns-1)',
181+
'2': 'var(--rad-ui-grid-columns-2)',
182+
'3': 'var(--rad-ui-grid-columns-3)',
183+
'4': 'var(--rad-ui-grid-columns-4)',
184+
'6': 'var(--rad-ui-grid-columns-6)',
185+
'12': 'var(--rad-ui-grid-columns-12)',
186+
'24': 'var(--rad-ui-grid-columns-24)'
187187
},
188188
gutter: {
189189
none: 'var(--rad-ui-grid-gutter-none)',

0 commit comments

Comments
 (0)