From 71a5ece590f6655989428da415cb979802efea86 Mon Sep 17 00:00:00 2001 From: Aileen Villanueva Date: Mon, 6 Jan 2025 10:37:59 -0600 Subject: [PATCH 1/3] fix: add the missing icon-color function for semanticcolor update --- packages/ui-stencil/extract-scss-vars.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/ui-stencil/extract-scss-vars.js b/packages/ui-stencil/extract-scss-vars.js index 45cf5e3d..f9d3b3e2 100644 --- a/packages/ui-stencil/extract-scss-vars.js +++ b/packages/ui-stencil/extract-scss-vars.js @@ -78,6 +78,18 @@ function compileScss(filePath) { } } }, + 'icon-color($arg1, $arg2)': (args) => { + const colorKey = args[0].assertString('arg1') + const palette = args[1].assertMap('arg2') + let currentValue = '' + for (const [key, value] of palette.contents.entrySeq()) { + const currentKey = key.toString() + if (currentKey === 'icon') { + currentValue = value.get(colorKey).toString() + return new sass.SassString(currentValue) + } + } + }, }, }) return result.css.toString() From 473ce228802fb28cf8c0f1c5c31b4defab953082 Mon Sep 17 00:00:00 2001 From: Aileen Villanueva Date: Mon, 6 Jan 2025 10:48:54 -0600 Subject: [PATCH 2/3] fix: Pass the background color correctly before passing to adjust funciton --- packages/ui-stencil/extract-scss-vars.js | 27 +++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/ui-stencil/extract-scss-vars.js b/packages/ui-stencil/extract-scss-vars.js index f9d3b3e2..a057d91d 100644 --- a/packages/ui-stencil/extract-scss-vars.js +++ b/packages/ui-stencil/extract-scss-vars.js @@ -57,12 +57,16 @@ function compileScss(filePath) { 'background-color($arg1, $arg2)': (args) => { const colorKey = args[0].assertString('arg1') const palette = args[1].assertMap('arg2') - let currentValue = '' for (const [key, value] of palette.contents.entrySeq()) { - const currentKey = key.toString() - if (currentKey === 'background') { - currentValue = value.get(colorKey).toString() - return new sass.SassString(currentValue) + if (key.toString() === 'background') { + const colorValue = value.get(colorKey).toString() + return new sass.SassColor({ + r: parseInt(colorValue.slice(1,3), 16), + g: parseInt(colorValue.slice(3,5), 16), + b: parseInt(colorValue.slice(5,7), 16), + a: 1, + space: 'rgb' + }) } } }, @@ -90,6 +94,19 @@ function compileScss(filePath) { } } }, + 'adjust($color, $kwargs)': (args) => { + const color = args[0] + const kwargs = args[1].assertMap('kwargs') + const alpha = kwargs.get('alpha').assertNumber('alpha') + + return new sass.SassColor({ + r: color.red, + g: color.green, + b: color.blue, + a: color.alpha + alpha.value, + space: 'rgb' + }) + }, }, }) return result.css.toString() From 0e322ed2b494564376cab23d16980704bbe55bc1 Mon Sep 17 00:00:00 2001 From: Aileen Villanueva Date: Mon, 6 Jan 2025 12:17:05 -0600 Subject: [PATCH 3/3] fix: background function properly handle color values from semantic maps --- packages/ui-stencil/extract-scss-vars.js | 87 +++++++++++++++++------- 1 file changed, 61 insertions(+), 26 deletions(-) diff --git a/packages/ui-stencil/extract-scss-vars.js b/packages/ui-stencil/extract-scss-vars.js index a057d91d..98872100 100644 --- a/packages/ui-stencil/extract-scss-vars.js +++ b/packages/ui-stencil/extract-scss-vars.js @@ -5,6 +5,13 @@ const postcssScss = require('postcss-scss') const scssFilePath = './src/styles/_tempColors.scss' +function hexToRgb(hex) { + const r = parseInt(hex.slice(1, 3), 16) + const g = parseInt(hex.slice(3, 5), 16) + const b = parseInt(hex.slice(5, 7), 16) + return { r, g, b } +} + function createTempColorsFile() { const colorsContent = fs.readFileSync('./src/styles/_colors.scss', 'utf-8') const primitiveColors = colorsContent.match(/(\$[a-zA-Z0-9-]+:.*;)/g).join('\n') @@ -53,21 +60,43 @@ function compileScss(filePath) { return new sass.SassString(currentValue) } } + return new sass.SassString('transparent') }, 'background-color($arg1, $arg2)': (args) => { - const colorKey = args[0].assertString('arg1') - const palette = args[1].assertMap('arg2') - for (const [key, value] of palette.contents.entrySeq()) { - if (key.toString() === 'background') { - const colorValue = value.get(colorKey).toString() - return new sass.SassColor({ - r: parseInt(colorValue.slice(1,3), 16), - g: parseInt(colorValue.slice(3,5), 16), - b: parseInt(colorValue.slice(5,7), 16), - a: 1, - space: 'rgb' - }) + try { + const colorKey = args[0].assertString('arg1').text; + const palette = args[1].assertMap('arg2'); + + // Find color value in background section + let colorValue = null; + palette.contents.forEach((value, key) => { + if (key.text === 'background') { + value.contents.forEach((val, k) => { + if (k.text === colorKey) colorValue = val; + }); + } + }); + + if (!colorValue) return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 }); + if (colorValue instanceof sass.SassColor) return colorValue; + + const colorStr = colorValue.toString(); + + // Handle named colors + if (colorStr === 'white') return new sass.SassColor({ r: 255, g: 255, b: 255, a: 1 }); + if (colorStr === 'black') return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 }); + if (colorStr === 'transparent') return new sass.SassColor({ r: 0, g: 0, b: 0, a: 0 }); + + // Handle hex colors + if (colorStr.startsWith('#')) { + const rgb = hexToRgb(colorStr); + return new sass.SassColor({ ...rgb, a: 1 }); } + + // Default fallback + return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 }); + } catch (error) { + return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 }); } }, 'border-color($arg1, $arg2)': (args) => { @@ -81,6 +110,7 @@ function compileScss(filePath) { return new sass.SassString(currentValue) } } + return new sass.SassString('transparent') }, 'icon-color($arg1, $arg2)': (args) => { const colorKey = args[0].assertString('arg1') @@ -93,20 +123,25 @@ function compileScss(filePath) { return new sass.SassString(currentValue) } } + return new sass.SassString('transparent') }, - 'adjust($color, $kwargs)': (args) => { - const color = args[0] - const kwargs = args[1].assertMap('kwargs') - const alpha = kwargs.get('alpha').assertNumber('alpha') - - return new sass.SassColor({ - r: color.red, - g: color.green, - b: color.blue, - a: color.alpha + alpha.value, - space: 'rgb' - }) - }, + 'adjust($color, $kwargs)': (args) => { + try { + const color = args[0].assertColor('color'); + const kwargs = args[1].assertMap('kwargs'); + const alphaAdjust = kwargs.get('alpha')?.assertNumber('alpha')?.value || 0; + + return new sass.SassColor({ + r: color.red, + g: color.green, + b: color.blue, + a: Math.max(0, Math.min(1, color.alpha + alphaAdjust)) + }); + } catch (error) { + console.error('Error in adjust:', error); + return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 }); + } + } }, }) return result.css.toString() @@ -170,7 +205,7 @@ async function extractExportVariables(css) { // Write the JavaScript file fs.writeFileSync('./src/config/colors.ts', `${comment}\n${jsContent}`, 'utf-8') - // remove the temporary file + // remove the temporary file fs.unlinkSync(scssFilePath) console.log('SCSS :export variables have been extracted to _colors.js') } catch (error) {