From c9b601ad0d3467bf1961763a93567550308483b0 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Thu, 12 Dec 2024 15:25:43 -0800 Subject: [PATCH 1/8] Store makeResetStyles lookup --- .../library/src/astAnalyzer.ts | 63 +++++++++++++++++++ .../library/src/types.ts | 1 + 2 files changed, 64 insertions(+) diff --git a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts index 0cd76c8da21e7a..dbff9b0416ba0d 100644 --- a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts +++ b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts @@ -158,6 +158,37 @@ function createStyleContent(tokens: TokenReference[]): StyleContent { return content; } +/** + * Similar to createStyleContent but for makeResetStyles + */ +function createResetStyleContent(tokens: TokenReference[]): StyleContent { + const content: StyleContent = { + tokens: [], + isClassFunction: true, + }; + + // Nested structures have paths longer than 1 + const nestedTokens = tokens.filter(t => t.path.length > 1); + if (nestedTokens.length > 0) { + content.nested = nestedTokens.reduce((acc, token) => { + const nestedKey = token.path[0]; + + if (!acc[nestedKey]) { + acc[nestedKey] = { tokens: [] }; + } + + acc[nestedKey].tokens.push({ + ...token, + path: [], // Reset path as we've used it for nesting + }); + + return acc; + }, {}); + } + + return content; +} + /** * Creates metadata from style mappings */ @@ -214,6 +245,38 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise } }); } + } else if (Node.isCallExpression(node) && node.getExpression().getText() === 'makeResetStyles') { + // Similar to above, but the styles are stored under the assigned function name instead of local variable + // We store 'isClassFunction' to differentiate from makeStyles and link during mergeClasses + const stylesArg = node.getArguments()[0]; + const parentNode = node.getParent(); + if (Node.isVariableDeclaration(parentNode)) { + const styleName = parentNode.getName(); + analysis[styleName] = { tokens: [], nested: {} }; + console.log('Test - 1'); + if (Node.isObjectLiteralExpression(stylesArg)) { + console.log('Test - 2'); + // Process the styles object + stylesArg.getProperties().forEach(prop => { + console.log('Test - 3: ', prop.getKindName()); + if (Node.isPropertyAssignment(prop)) { + const tokens = processStyleProperty(prop); + console.log('Test - 4: ', tokens); + if (tokens.length) { + const styleContent = createResetStyleContent(tokens); + console.log('styleContent - 5: ', styleContent); + console.log('tokens - 5: ', tokens); + analysis[styleName].tokens.concat(styleContent.tokens); + analysis[styleName].nested = { + ...analysis[styleName].nested, + ...styleContent.nested, + }; + console.log('Test - 6: ', analysis[styleName]); + } + } + }); + } + } } }); diff --git a/packages/react-components/token-analyzer-preview/library/src/types.ts b/packages/react-components/token-analyzer-preview/library/src/types.ts index 90c4eb6ae8ab96..e11c61a8647317 100644 --- a/packages/react-components/token-analyzer-preview/library/src/types.ts +++ b/packages/react-components/token-analyzer-preview/library/src/types.ts @@ -10,6 +10,7 @@ export interface TokenReference { export interface StyleContent { tokens: TokenReference[]; nested?: StyleAnalysis; + isClassFunction?: boolean; } export interface StyleAnalysis { From edfb3e21dba9d69cc3e38260db0dcde9bad747eb Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 16 Dec 2024 12:25:49 -0800 Subject: [PATCH 2/8] Fix up reset styles --- .../library/src/astAnalyzer.ts | 109 ++++++++++-------- 1 file changed, 63 insertions(+), 46 deletions(-) diff --git a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts index dbff9b0416ba0d..d637b11ed95246 100644 --- a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts +++ b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts @@ -69,6 +69,59 @@ function processStyleProperty(prop: PropertyAssignment): TokenReference[] { return tokens; } +/** + * Process a style property to extract token references. + * Property names are derived from the actual CSS property in the path, + * not the object key containing them. + */ +function processResetStyleProperty(prop: PropertyAssignment): TokenReference[] { + const tokens: TokenReference[] = []; + const parentName = prop.getName(); + + function processNode(node?: Node, path: string[] = []): void { + if (!node) { + return; + } + + if (Node.isStringLiteral(node) || Node.isIdentifier(node)) { + const text = node.getText(); + const matches = text.match(TOKEN_REGEX); + if (matches) { + matches.forEach(match => { + tokens.push({ + property: path[path.length - 1] || parentName, + token: match, + path, + }); + }); + } + } else if (Node.isPropertyAccessExpression(node)) { + const text = node.getText(); + if (text.startsWith('tokens.')) { + tokens.push({ + property: path[path.length - 1] || parentName, + token: text, + path, + }); + } + } else if (Node.isObjectLiteralExpression(node)) { + node.getProperties().forEach(childProp => { + if (Node.isPropertyAssignment(childProp)) { + const childName = childProp.getName(); + processNode(childProp.getInitializer(), [...path, childName]); + } + }); + } + } + + const initializer = prop.getInitializer(); + if (initializer) { + processNode(initializer); + } + + return tokens; +} + /** * Analyzes mergeClasses calls to determine style relationships */ @@ -131,44 +184,15 @@ function analyzeMergeClasses(sourceFile: SourceFile): StyleMapping[] { * ``` * Property names reflect the actual CSS property, derived from the path. */ -function createStyleContent(tokens: TokenReference[]): StyleContent { - const content: StyleContent = { - tokens: tokens.filter(t => t.path.length === 1), - }; - - // Nested structures have paths longer than 1 - const nestedTokens = tokens.filter(t => t.path.length > 1); - if (nestedTokens.length > 0) { - content.nested = nestedTokens.reduce((acc, token) => { - const nestedKey = token.path[0]; - - if (!acc[nestedKey]) { - acc[nestedKey] = { tokens: [] }; - } - - acc[nestedKey].tokens.push({ - ...token, - path: [], // Reset path as we've used it for nesting - }); - - return acc; - }, {}); - } - - return content; -} - -/** - * Similar to createStyleContent but for makeResetStyles - */ -function createResetStyleContent(tokens: TokenReference[]): StyleContent { +function createStyleContent(tokens: TokenReference[], isResetStyles?: Boolean): StyleContent { + // Reset styles have one less layer of nesting + const resetStyleMod = isResetStyles ? 1 : 0; const content: StyleContent = { - tokens: [], - isClassFunction: true, + tokens: tokens.filter(t => t.path.length === 1 - resetStyleMod), }; // Nested structures have paths longer than 1 - const nestedTokens = tokens.filter(t => t.path.length > 1); + const nestedTokens = tokens.filter(t => t.path.length > 1 - resetStyleMod); if (nestedTokens.length > 0) { content.nested = nestedTokens.reduce((acc, token) => { const nestedKey = token.path[0]; @@ -247,31 +271,24 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise } } else if (Node.isCallExpression(node) && node.getExpression().getText() === 'makeResetStyles') { // Similar to above, but the styles are stored under the assigned function name instead of local variable - // We store 'isClassFunction' to differentiate from makeStyles and link during mergeClasses const stylesArg = node.getArguments()[0]; const parentNode = node.getParent(); if (Node.isVariableDeclaration(parentNode)) { const styleName = parentNode.getName(); - analysis[styleName] = { tokens: [], nested: {} }; - console.log('Test - 1'); + // We store 'isClassFunction' to differentiate from makeStyles and link during mergeClasses + analysis[styleName] = { tokens: [], nested: {}, isClassFunction: true }; if (Node.isObjectLiteralExpression(stylesArg)) { - console.log('Test - 2'); // Process the styles object stylesArg.getProperties().forEach(prop => { - console.log('Test - 3: ', prop.getKindName()); if (Node.isPropertyAssignment(prop)) { - const tokens = processStyleProperty(prop); - console.log('Test - 4: ', tokens); + const tokens = processResetStyleProperty(prop); if (tokens.length) { - const styleContent = createResetStyleContent(tokens); - console.log('styleContent - 5: ', styleContent); - console.log('tokens - 5: ', tokens); - analysis[styleName].tokens.concat(styleContent.tokens); + const styleContent = createStyleContent(tokens, true); + analysis[styleName].tokens = analysis[styleName].tokens.concat(styleContent.tokens); analysis[styleName].nested = { ...analysis[styleName].nested, ...styleContent.nested, }; - console.log('Test - 6: ', analysis[styleName]); } } }); From 4084e0d8f70ad29cdd6c8abacad4881c929677f1 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 16 Dec 2024 12:29:53 -0800 Subject: [PATCH 3/8] Remove unneeded function --- .../library/src/astAnalyzer.ts | 56 +------------------ 1 file changed, 1 insertion(+), 55 deletions(-) diff --git a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts index d637b11ed95246..42fe31c9389905 100644 --- a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts +++ b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts @@ -68,60 +68,6 @@ function processStyleProperty(prop: PropertyAssignment): TokenReference[] { return tokens; } - -/** - * Process a style property to extract token references. - * Property names are derived from the actual CSS property in the path, - * not the object key containing them. - */ -function processResetStyleProperty(prop: PropertyAssignment): TokenReference[] { - const tokens: TokenReference[] = []; - const parentName = prop.getName(); - - function processNode(node?: Node, path: string[] = []): void { - if (!node) { - return; - } - - if (Node.isStringLiteral(node) || Node.isIdentifier(node)) { - const text = node.getText(); - const matches = text.match(TOKEN_REGEX); - if (matches) { - matches.forEach(match => { - tokens.push({ - property: path[path.length - 1] || parentName, - token: match, - path, - }); - }); - } - } else if (Node.isPropertyAccessExpression(node)) { - const text = node.getText(); - if (text.startsWith('tokens.')) { - tokens.push({ - property: path[path.length - 1] || parentName, - token: text, - path, - }); - } - } else if (Node.isObjectLiteralExpression(node)) { - node.getProperties().forEach(childProp => { - if (Node.isPropertyAssignment(childProp)) { - const childName = childProp.getName(); - processNode(childProp.getInitializer(), [...path, childName]); - } - }); - } - } - - const initializer = prop.getInitializer(); - if (initializer) { - processNode(initializer); - } - - return tokens; -} - /** * Analyzes mergeClasses calls to determine style relationships */ @@ -281,7 +227,7 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise // Process the styles object stylesArg.getProperties().forEach(prop => { if (Node.isPropertyAssignment(prop)) { - const tokens = processResetStyleProperty(prop); + const tokens = processStyleProperty(prop); if (tokens.length) { const styleContent = createStyleContent(tokens, true); analysis[styleName].tokens = analysis[styleName].tokens.concat(styleContent.tokens); From 6319c9fe1a1ef11a0041e7ef56a6493891775544 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 16 Dec 2024 14:14:19 -0800 Subject: [PATCH 4/8] Update analyzer to work on nested tokens --- .../library/src/astAnalyzer.ts | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts index 42fe31c9389905..76d9551a50cf0a 100644 --- a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts +++ b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts @@ -21,7 +21,7 @@ interface StyleMapping { * Property names are derived from the actual CSS property in the path, * not the object key containing them. */ -function processStyleProperty(prop: PropertyAssignment): TokenReference[] { +function processStyleProperty(prop: PropertyAssignment, isResetStyles?: Boolean): TokenReference[] { const tokens: TokenReference[] = []; const parentName = prop.getName(); @@ -30,6 +30,11 @@ function processStyleProperty(prop: PropertyAssignment): TokenReference[] { return; } + // If we're processing a reset style, we need to add the parent name to the path + if (isResetStyles && path.length === 0) { + path.push(parentName); + } + if (Node.isStringLiteral(node) || Node.isIdentifier(node)) { const text = node.getText(); const matches = text.match(TOKEN_REGEX); @@ -130,15 +135,13 @@ function analyzeMergeClasses(sourceFile: SourceFile): StyleMapping[] { * ``` * Property names reflect the actual CSS property, derived from the path. */ -function createStyleContent(tokens: TokenReference[], isResetStyles?: Boolean): StyleContent { - // Reset styles have one less layer of nesting - const resetStyleMod = isResetStyles ? 1 : 0; +function createStyleContent(tokens: TokenReference[]): StyleContent { const content: StyleContent = { - tokens: tokens.filter(t => t.path.length === 1 - resetStyleMod), + tokens: tokens.filter(t => t.path.length === 1), }; // Nested structures have paths longer than 1 - const nestedTokens = tokens.filter(t => t.path.length > 1 - resetStyleMod); + const nestedTokens = tokens.filter(t => t.path.length > 1); if (nestedTokens.length > 0) { content.nested = nestedTokens.reduce((acc, token) => { const nestedKey = token.path[0]; @@ -202,7 +205,6 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise sourceFile.forEachDescendant(node => { if (Node.isCallExpression(node) && node.getExpression().getText() === 'makeStyles') { const stylesArg = node.getArguments()[0]; - if (Node.isObjectLiteralExpression(stylesArg)) { // Process the styles object stylesArg.getProperties().forEach(prop => { @@ -227,9 +229,9 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise // Process the styles object stylesArg.getProperties().forEach(prop => { if (Node.isPropertyAssignment(prop)) { - const tokens = processStyleProperty(prop); + const tokens = processStyleProperty(prop, true); if (tokens.length) { - const styleContent = createStyleContent(tokens, true); + const styleContent = createStyleContent(tokens); analysis[styleName].tokens = analysis[styleName].tokens.concat(styleContent.tokens); analysis[styleName].nested = { ...analysis[styleName].nested, From c1c2b9e434eda83c2c8f37b426a6b00b7e5fdb38 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Thu, 19 Dec 2024 11:18:02 -0800 Subject: [PATCH 5/8] Add mergeStyles variable detection --- .../library/src/astAnalyzer.ts | 38 ++++++++++++++++++- .../library/src/types.ts | 1 + 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts index 76d9551a50cf0a..20241e21ef05f2 100644 --- a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts +++ b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts @@ -16,6 +16,11 @@ interface StyleMapping { conditionalStyles: StyleCondition[]; } +interface VariableMapping { + variableName: string; + functionName: string; +} + /** * Process a style property to extract token references. * Property names are derived from the actual CSS property in the path, @@ -106,6 +111,9 @@ function analyzeMergeClasses(sourceFile: SourceFile): StyleMapping[] { condition: arg.getLeft().getText(), }); } + } else if (!arg.getText().includes('.')) { + // We found a single variable (makeResetStyles or other assignment), add to base styles for lookup later + mapping.baseStyles.push(arg.getText()); } }); @@ -224,7 +232,7 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise if (Node.isVariableDeclaration(parentNode)) { const styleName = parentNode.getName(); // We store 'isClassFunction' to differentiate from makeStyles and link during mergeClasses - analysis[styleName] = { tokens: [], nested: {}, isClassFunction: true }; + analysis[styleName] = { tokens: [], nested: {}, assignedVariables: [], isClassFunction: true }; if (Node.isObjectLiteralExpression(stylesArg)) { // Process the styles object stylesArg.getProperties().forEach(prop => { @@ -245,6 +253,34 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise } }); + const variables: VariableMapping[] = []; + const resetStyleFunctionNames: string[] = Object.keys(analysis).filter( + (styleName: string) => analysis[styleName].isClassFunction, + ); + + sourceFile.forEachDescendant(node => { + // We do a first parse to get all known variables (i.e. makeResetStyles). + // This is necessary to handle cases where we're using a variable directly in mergeClasses. + + if (Node.isCallExpression(node) && resetStyleFunctionNames.includes(node.getExpression().getText())) { + const parentNode = node.getParent(); + const functionName = node.getExpression().getText(); + if (Node.isVariableDeclaration(parentNode)) { + const variableName = parentNode.getName(); + const variableMap: VariableMapping = { + functionName, + variableName, + }; + variables.push(variableMap); + } + } + }); + + // Store our makeResetStyles assigned variables in the analysis to link later + variables.forEach(variable => { + analysis[variable.functionName].assignedVariables?.push(variable.variableName); + }); + return analysis; } diff --git a/packages/react-components/token-analyzer-preview/library/src/types.ts b/packages/react-components/token-analyzer-preview/library/src/types.ts index e11c61a8647317..3dc8213d02aeed 100644 --- a/packages/react-components/token-analyzer-preview/library/src/types.ts +++ b/packages/react-components/token-analyzer-preview/library/src/types.ts @@ -11,6 +11,7 @@ export interface StyleContent { tokens: TokenReference[]; nested?: StyleAnalysis; isClassFunction?: boolean; + assignedVariables?: string[]; } export interface StyleAnalysis { From 43d4d288a7fe02cfde592ccb35da33a5e50c5dd7 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Thu, 19 Dec 2024 11:24:43 -0800 Subject: [PATCH 6/8] Update comment --- .../token-analyzer-preview/library/src/astAnalyzer.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts index 20241e21ef05f2..c0eb71eeaa28dc 100644 --- a/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts +++ b/packages/react-components/token-analyzer-preview/library/src/astAnalyzer.ts @@ -231,7 +231,7 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise const parentNode = node.getParent(); if (Node.isVariableDeclaration(parentNode)) { const styleName = parentNode.getName(); - // We store 'isClassFunction' to differentiate from makeStyles and link during mergeClasses + // We store 'isClassFunction' to differentiate from makeStyles and link mergeClasses variables analysis[styleName] = { tokens: [], nested: {}, assignedVariables: [], isClassFunction: true }; if (Node.isObjectLiteralExpression(stylesArg)) { // Process the styles object @@ -259,8 +259,8 @@ async function analyzeMakeStyles(sourceFile: SourceFile): Promise ); sourceFile.forEachDescendant(node => { - // We do a first parse to get all known variables (i.e. makeResetStyles). - // This is necessary to handle cases where we're using a variable directly in mergeClasses. + // We do a second parse to link known style functions (i.e. makeResetStyles assigned function variable names). + // This is necessary to handle cases where we're using a variable directly in mergeClasses to link styles. if (Node.isCallExpression(node) && resetStyleFunctionNames.includes(node.getExpression().getText())) { const parentNode = node.getParent(); From 62b919abd72c454b8a3ec62476318e4ee5eef21e Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Thu, 19 Dec 2024 11:25:33 -0800 Subject: [PATCH 7/8] Comment out completed task --- .../react-components/token-analyzer-preview/library/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/token-analyzer-preview/library/README.md b/packages/react-components/token-analyzer-preview/library/README.md index 7d9c04c5ef35fb..90468b8b6b274f 100644 --- a/packages/react-components/token-analyzer-preview/library/README.md +++ b/packages/react-components/token-analyzer-preview/library/README.md @@ -8,7 +8,7 @@ A static analysis tool that scans your project's style files to track and analyz - `createCustomFocusIndicatorStyle` is a special function that is used throughout the library so we might be able to special case it - if we have file imports we need to analyze those such as importing base styles - we also need to ensure var analysis is done correctly after the refactor -- Manage makeResetStyles (likely same as makeStyles) + ~~- Manage makeResetStyles (likely same as makeStyles)~~ - Button has some weird patterns in it where it uses makeResetStyles and then uses enums to pull in the styles, we might need to account for those as well. - what if we have multiple `makeStyles` calls merged, are we handling that correctly or just nuking the conflicts in our output? - make sure this works with shorthand spread From 60e36920cf5b78eed61a07784390e9411f64294f Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Thu, 19 Dec 2024 11:32:54 -0800 Subject: [PATCH 8/8] Create analysis.json --- .../library/analysis.json | 974 ++++++++++++++++++ 1 file changed, 974 insertions(+) create mode 100644 packages/react-components/token-analyzer-preview/library/analysis.json diff --git a/packages/react-components/token-analyzer-preview/library/analysis.json b/packages/react-components/token-analyzer-preview/library/analysis.json new file mode 100644 index 00000000000000..eb97b2a4669ac7 --- /dev/null +++ b/packages/react-components/token-analyzer-preview/library/analysis.json @@ -0,0 +1,974 @@ +{ + "library/src/components/Button/useButtonStyles.styles.ts": { + "styles": { + "useRootBaseClassName": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackground1", + "path": ["backgroundColor"] + }, + { + "property": "color", + "token": "tokens.colorNeutralForeground1", + "path": ["color"] + }, + { + "property": "fontFamily", + "token": "tokens.fontFamilyBase", + "path": ["fontFamily"] + }, + { + "property": "borderRadius", + "token": "tokens.borderRadiusMedium", + "path": ["borderRadius"] + }, + { + "property": "fontSize", + "token": "tokens.fontSizeBase300", + "path": ["fontSize"] + }, + { + "property": "fontWeight", + "token": "tokens.fontWeightSemibold", + "path": ["fontWeight"] + }, + { + "property": "lineHeight", + "token": "tokens.lineHeightBase300", + "path": ["lineHeight"] + }, + { + "property": "transitionDuration", + "token": "tokens.durationFaster", + "path": ["transitionDuration"] + }, + { + "property": "transitionTimingFunction", + "token": "tokens.curveEasyEase", + "path": ["transitionTimingFunction"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackground1Hover", + "path": [] + }, + { + "property": "borderColor", + "token": "tokens.colorNeutralStroke1Hover", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForeground1Hover", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackground1Pressed", + "path": [] + }, + { + "property": "borderColor", + "token": "tokens.colorNeutralStroke1Pressed", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForeground1Pressed", + "path": [] + } + ] + } + }, + "assignedVariables": ["rootBaseClassName"], + "isClassFunction": true + }, + "useIconBaseClassName": { + "tokens": [ + { + "property": "[iconSpacingVar]", + "token": "tokens.spacingHorizontalSNudge", + "path": ["[iconSpacingVar]"] + } + ], + "nested": {}, + "assignedVariables": ["iconBaseClassName"], + "isClassFunction": true + }, + "outline": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": ["backgroundColor"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": [] + } + ] + } + } + }, + "primary": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorBrandBackground", + "path": ["backgroundColor"] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": ["color"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorBrandBackgroundHover", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorBrandBackgroundPressed", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": [] + } + ] + } + } + }, + "subtle": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": ["backgroundColor"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": [] + } + ] + } + } + }, + "transparent": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": ["backgroundColor"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": [] + } + ] + } + } + }, + "circular": { + "tokens": [ + { + "property": "borderRadius", + "token": "tokens.borderRadiusCircular", + "path": ["borderRadius"] + } + ] + }, + "square": { + "tokens": [ + { + "property": "borderRadius", + "token": "tokens.borderRadiusNone", + "path": ["borderRadius"] + } + ] + }, + "small": { + "tokens": [ + { + "property": "[iconSpacingVar]", + "token": "tokens.spacingHorizontalXS", + "path": ["[iconSpacingVar]"] + } + ] + }, + "large": { + "tokens": [ + { + "property": "[iconSpacingVar]", + "token": "tokens.spacingHorizontalSNudge", + "path": ["[iconSpacingVar]"] + } + ] + }, + "base": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackgroundDisabled", + "path": ["backgroundColor"] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": ["color"] + } + ], + "nested": { + "[`& .${buttonClassNames.icon}`]": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackgroundDisabled", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackgroundDisabled", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + } + ] + } + } + } + }, + "metadata": { + "styleConditions": { + "rootBaseClassName": { + "isBase": true + }, + "rootStyles[size]": { + "isBase": true + }, + "rootStyles[shape]": { + "isBase": true + }, + "rootFocusStyles[size]": { + "isBase": true + }, + "rootFocusStyles[shape]": { + "isBase": true + }, + "iconBaseClassName": { + "isBase": true + }, + "iconStyles[size]": { + "isBase": true + } + } + } + }, + "library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts": { + "styles": { + "base": { + "tokens": [ + { + "property": "fontWeight", + "token": "tokens.fontWeightRegular", + "path": ["fontWeight"] + } + ] + }, + "primary": { + "tokens": [], + "nested": { + "[`& .${compoundButtonClassNames.secondaryContent}`]": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": [] + } + ] + } + } + }, + "subtle": { + "tokens": [], + "nested": { + "[`& .${compoundButtonClassNames.secondaryContent}`]": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2Hover", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2Pressed", + "path": [] + } + ] + } + } + }, + "transparent": { + "tokens": [], + "nested": { + "[`& .${compoundButtonClassNames.secondaryContent}`]": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2BrandHover", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2BrandPressed", + "path": [] + } + ] + } + } + }, + "small": { + "tokens": [ + { + "property": "fontSize", + "token": "tokens.fontSizeBase200", + "path": ["fontSize"] + } + ] + }, + "medium": { + "tokens": [ + { + "property": "fontSize", + "token": "tokens.fontSizeBase200", + "path": ["fontSize"] + } + ] + }, + "large": { + "tokens": [ + { + "property": "fontSize", + "token": "tokens.fontSizeBase300", + "path": ["fontSize"] + } + ] + }, + "disabled": { + "tokens": [], + "nested": { + "[`& .${compoundButtonClassNames.secondaryContent}`]": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + } + ] + } + } + }, + "before": { + "tokens": [ + { + "property": "marginRight", + "token": "tokens.spacingHorizontalM", + "path": ["marginRight"] + } + ] + }, + "after": { + "tokens": [ + { + "property": "marginLeft", + "token": "tokens.spacingHorizontalM", + "path": ["marginLeft"] + } + ] + } + }, + "metadata": { + "styleConditions": { + "rootStyles[size]": { + "isBase": true + }, + "secondaryContentStyles[size]": { + "isBase": true + } + } + } + }, + "library/src/components/MenuButton/useMenuButtonStyles.styles.ts": { + "styles": { + "outline": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground1Selected", + "path": ["color"] + } + ] + }, + "primary": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorBrandBackgroundSelected", + "path": ["backgroundColor"] + } + ] + }, + "secondary": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground1Selected", + "path": ["color"] + } + ] + }, + "subtle": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2BrandSelected", + "path": ["color"] + } + ] + }, + "transparent": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2BrandSelected", + "path": ["color"] + } + ] + }, + "small": { + "tokens": [ + { + "property": "lineHeight", + "token": "tokens.lineHeightBase200", + "path": ["lineHeight"] + } + ] + }, + "medium": { + "tokens": [ + { + "property": "lineHeight", + "token": "tokens.lineHeightBase200", + "path": ["lineHeight"] + } + ] + }, + "large": { + "tokens": [ + { + "property": "lineHeight", + "token": "tokens.lineHeightBase400", + "path": ["lineHeight"] + } + ] + }, + "notIconOnly": { + "tokens": [ + { + "property": "marginLeft", + "token": "tokens.spacingHorizontalXS", + "path": ["marginLeft"] + } + ] + } + }, + "metadata": { + "styleConditions": {} + } + }, + "library/src/components/SplitButton/useSplitButtonStyles.styles.ts": { + "styles": { + "primary": { + "tokens": [], + "nested": { + "[`& .${splitButtonClassNames.primaryActionButton}`]": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStrokeOnBrand", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStrokeOnBrand", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStrokeOnBrand", + "path": [] + } + ] + } + } + }, + "subtle": { + "tokens": [], + "nested": { + "[`& .${splitButtonClassNames.primaryActionButton}`]": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStroke1", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStroke1Hover", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStroke1Pressed", + "path": [] + } + ] + } + } + }, + "transparent": { + "tokens": [], + "nested": { + "[`& .${splitButtonClassNames.primaryActionButton}`]": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStroke1", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStroke1Hover", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStroke1Pressed", + "path": [] + } + ] + } + } + }, + "disabled": { + "tokens": [], + "nested": { + "[`& .${splitButtonClassNames.primaryActionButton}`]": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStrokeDisabled", + "path": [] + } + ] + }, + "':hover'": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStrokeDisabled", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "borderRightColor", + "token": "tokens.colorNeutralStrokeDisabled", + "path": [] + } + ] + } + } + } + }, + "metadata": { + "styleConditions": {} + } + }, + "library/src/components/ToggleButton/useToggleButtonStyles.styles.ts": { + "styles": { + "base": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackgroundDisabled", + "path": ["backgroundColor"] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": ["color"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackgroundDisabled", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorNeutralBackgroundDisabled", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundDisabled", + "path": [] + } + ] + } + } + }, + "outline": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackgroundSelected", + "path": ["backgroundColor"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackgroundHover", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackgroundPressed", + "path": [] + } + ] + } + } + }, + "primary": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorBrandBackgroundSelected", + "path": ["backgroundColor"] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": ["color"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorBrandBackgroundHover", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorBrandBackgroundPressed", + "path": [] + }, + { + "property": "color", + "token": "tokens.colorNeutralForegroundOnBrand", + "path": [] + } + ] + } + } + }, + "subtle": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": ["backgroundColor"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackgroundHover", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackgroundPressed", + "path": [] + } + ] + } + } + }, + "transparent": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackground", + "path": ["backgroundColor"] + } + ], + "nested": { + "':hover'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackgroundHover", + "path": [] + } + ] + }, + "':hover:active'": { + "tokens": [ + { + "property": "backgroundColor", + "token": "tokens.colorTransparentBackgroundPressed", + "path": [] + } + ] + } + } + }, + "subtleOrTransparent": { + "tokens": [ + { + "property": "color", + "token": "tokens.colorNeutralForeground2BrandSelected", + "path": ["color"] + } + ] + } + }, + "metadata": { + "styleConditions": {} + } + } +}