Skip to content

Commit 35d061b

Browse files
chlebektomaschlebektomas
authored
updated styleguide colors (#4154)
2 parents 7bee4b3 + 6eb6795 commit 35d061b

7 files changed

Lines changed: 428 additions & 73 deletions

File tree

‎Makefile‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,3 +220,48 @@ generate-tailwind-for-admin:
220220
@echo "🔧 Rebuilding backend admin assets..."
221221
docker compose exec php-fpm php phing npm-dev
222222
@echo "🎉 Admin assets rebuilt! Tailwind classes are now available in GrapesJS."
223+
224+
# ------------------------------------------------------------------------------
225+
# 🎨 Icon Generator for Styleguide
226+
# ------------------------------------------------------------------------------
227+
228+
generate-icons-for-styleguide: ## Generates StyleguideIcons component from all icon files
229+
@echo "🚀 Generating StyleguideIcons component..."
230+
@echo ""
231+
@echo "🗑️ Deleting existing file..."
232+
@rm -f storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
233+
@echo "✅ Deleted"
234+
@echo ""
235+
@echo "🔄 Generating new component..."
236+
@echo "/*" > storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
237+
@echo " * This file is auto-generated. Do not edit manually." >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
238+
@echo " * To regenerate this file, run: make generate-icons-for-styleguide" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
239+
@echo " */" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
240+
@echo "" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
241+
@echo "import { StyleguideSection } from './StyleguideElements';" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
242+
@for file in storefront/components/Basic/Icon/*.tsx; do \
243+
name=$$(basename "$$file" .tsx); \
244+
if [ "$$name" != "iconsListGeneratorScript" ]; then \
245+
echo "import { $$name } from 'components/Basic/Icon/$$name';" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx; \
246+
fi \
247+
done
248+
@echo "" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
249+
@echo "export const StyleguideIcons = () => (" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
250+
@echo " <StyleguideSection title=\"Icons\">" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
251+
@echo " <div className=\"grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-6\">" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
252+
@for file in storefront/components/Basic/Icon/*.tsx; do \
253+
name=$$(basename "$$file" .tsx); \
254+
if [ "$$name" != "iconsListGeneratorScript" ]; then \
255+
echo " <div className=\"border-border-less flex flex-col items-center gap-2 rounded-lg border p-4 transition-shadow hover:shadow-md\">" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx; \
256+
echo " <$$name className=\"size-10\" />" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx; \
257+
echo " <span className=\"text-center text-xs break-all\">$$name</span>" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx; \
258+
echo " </div>" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx; \
259+
fi \
260+
done
261+
@echo " </div>" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
262+
@echo " </StyleguideSection>" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
263+
@echo ");" >> storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx
264+
@echo "✅ Generated $$(ls -1 storefront/components/Basic/Icon/*.tsx | grep -v Script | wc -l | xargs) icons"
265+
@echo ""
266+
@echo "🎉 StyleguideIcons generation complete!"
267+
@echo "📁 File: storefront/components/Pages/Styleguide/StyleguideIcons.generated.tsx"

‎storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, par
174174
<TabsContent headingTextMobile={t('Files')} isActive={selectedTab === filesTabIndex}>
175175
<ul className="grid grid-cols-1 gap-3 lg:grid-cols-2">
176176
{files.map((file) => (
177-
<li key={file.url} className="">
177+
<li key={file.url}>
178178
<a
179179
aria-label={t('Download {{file}}', { file: file.anchorText })}
180180
className="bg-background-more flex cursor-pointer items-center gap-5 rounded-xl px-5 py-2.5 no-underline"

‎storefront/components/Pages/Styleguide/StyleguideColors.tsx‎

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,64 @@
11
import { StyleguideSection } from './StyleguideElements';
22
import { twJoin } from 'tailwind-merge';
3+
import { getYIQContrastTextColor } from 'utils/colors/colors';
4+
5+
const resolveColorValue = (colorValue: string, tailwindColors: Record<string, any>, depth = 0): string => {
6+
// prevent infinite recursion
7+
if (depth > 10) {
8+
return colorValue;
9+
}
10+
11+
if (colorValue.startsWith('#')) {
12+
return colorValue;
13+
}
14+
15+
if (colorValue.startsWith('var(--color-')) {
16+
// extract variable name from var(--color-brand-500) to brand-500
17+
const variableName = colorValue.replace('var(--color-', '').replace(')', '');
18+
const resolvedColor = tailwindColors[variableName];
19+
20+
if (resolvedColor) {
21+
// resolve recursively if it's a CSS variable
22+
if (resolvedColor.startsWith('var(--color-')) {
23+
return resolveColorValue(resolvedColor, tailwindColors, depth + 1);
24+
}
25+
if (resolvedColor.startsWith('#')) {
26+
return resolvedColor;
27+
}
28+
}
29+
}
30+
31+
return colorValue;
32+
};
33+
34+
const getYIQContrastTextColorFromValue = (colorValue: string, tailwindColors: Record<string, any>) => {
35+
const resolvedColor = resolveColorValue(colorValue, tailwindColors);
36+
37+
if (resolvedColor.startsWith('#')) {
38+
return getYIQContrastTextColor(resolvedColor);
39+
}
40+
41+
return 'text-text-default';
42+
};
343

444
type StyleguideColorsProps = { tailwindColors: Record<string, any> };
545
export const StyleguideColors: FC<StyleguideColorsProps> = ({ tailwindColors }) => {
646
return (
7-
<StyleguideSection
8-
className="grid grid-cols-[repeat(auto-fit,minmax(100px,250px))] items-stretch gap-1"
9-
title="Colors"
10-
>
47+
<StyleguideSection className="vl:grid-cols-4 grid grid-cols-2 gap-2 md:grid-cols-3" title="Colors">
1148
{Object.keys(tailwindColors).map((color, index) => (
1249
<div
1350
key={index}
14-
className={twJoin('flex h-24 items-center justify-center')}
15-
style={{ backgroundColor: tailwindColors[color] as string }}
51+
className={twJoin('flex items-center justify-center p-2 text-center')}
52+
style={{ backgroundColor: resolveColorValue(tailwindColors[color] as string, tailwindColors) }}
1653
>
17-
<span className="text-text-inverted mix-blend-difference">{color}</span>
54+
<span
55+
className={twJoin(
56+
'text-sm',
57+
getYIQContrastTextColorFromValue(tailwindColors[color] as string, tailwindColors),
58+
)}
59+
>
60+
{color}: {tailwindColors[color]}
61+
</span>
1862
</div>
1963
))}
2064
</StyleguideSection>

‎storefront/components/Pages/Styleguide/StyleguideContent.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { StyleguideButtons } from './StyleguideButtons';
22
import { StyleguideCheckboxes } from './StyleguideCheckboxes';
33
import { StyleguideColors } from './StyleguideColors';
44
import { StyleguideForms } from './StyleguideForms';
5-
import { StyleguideIcons } from './StyleguideIcons';
5+
import { StyleguideIcons } from './StyleguideIcons.generated';
66
import { StyleguideInfobox } from './StyleguideInfobox';
77
import { StyleguideNotImplementedYet } from './StyleguideNotImplementedYet';
88
import { StyleguidePopups } from './StyleguidePopups';
@@ -15,9 +15,9 @@ import { StyleguideTooltips } from './StyleguideTooltips';
1515
import { StyleguideTypography } from './StyleguideTypography';
1616
import { Webline } from 'components/Layout/Webline/Webline';
1717

18-
type StyleguideContentProps = { iconList?: string[]; tailwindColors?: Record<string, any> };
18+
type StyleguideContentProps = { tailwindColors?: Record<string, any> };
1919

20-
export const StyleguideContent: FC<StyleguideContentProps> = ({ iconList, tailwindColors }) => {
20+
export const StyleguideContent: FC<StyleguideContentProps> = ({ tailwindColors }) => {
2121
return (
2222
<Webline className="mb-10 flex flex-col gap-10">
2323
{tailwindColors && <StyleguideColors tailwindColors={tailwindColors} />}
@@ -33,7 +33,7 @@ export const StyleguideContent: FC<StyleguideContentProps> = ({ iconList, tailwi
3333
<StyleguideCheckboxes />
3434
<StyleguideSpinboxes />
3535
<StyleguideTables />
36-
{iconList && <StyleguideIcons iconList={iconList} />}
36+
<StyleguideIcons />
3737
<StyleguideNotImplementedYet />
3838
</Webline>
3939
);

0 commit comments

Comments
 (0)