Skip to content

Commit

Permalink
Merge pull request #334 from aversini/fix-refactor-all-Tailwind-class…
Browse files Browse the repository at this point in the history 
…-to-make-them-static

fix: refactor all Tailwind class to make them static
  • Loading branch information
@aversini
aversini authored Feb 21, 2024
2 parents 426499c + 704996a commit 3b5bf80
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 47 deletions.
30 changes: 1 addition & 29 deletions packages/ui-components/lib/tailwindPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,34 +25,6 @@ const dynamicColors = () => {
return result;
};

const dynamicColorsClasses = () => {
const result: string[] = [];
Object.entries(tokens.colors).forEach(([name]) => {
if (name.startsWith("action-")) {
result.push(`bg-${name}`);
result.push(`hover:bg-${name}`);
result.push(`active:bg-${name}`);
}
if (name.startsWith("surface-")) {
result.push(`bg-${name}`);
}
if (name.startsWith("copy-")) {
result.push(`text-${name}`);
result.push(`hover:text-${name}`);
result.push(`active:text-${name}`);
}
if (name.startsWith("border-")) {
result.push(`border-${name}`);
}
if (name.startsWith("focus-")) {
result.push(`ring-${name}`);
result.push(`focus:ring-${name}`);
}
});

return result;
};

const dynamicMargins = () => {
const allowed = [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 44,
Expand Down Expand Up @@ -99,7 +71,7 @@ const tailwindPlugins = [
}, myComponentLibraryConfig),
];

const tailwindSafelist = [...dynamicMargins(), ...dynamicColorsClasses()];
const tailwindSafelist = [...dynamicMargins()];

export const twPlugin = {
content: tailwindContentPath,
Expand Down
23 changes: 18 additions & 5 deletions packages/ui-components/src/components/Button/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,10 @@ const getButtonSizesClasses = ({
};

const getButtonBaseClasses = ({ kind }: { kind: string }) => {
return `rounded-full bg-action-${kind} text-copy-light`;
return clsx("rounded-full text-copy-light", {
"bg-action-dark": kind === "dark",
"bg-action-light": kind === "light",
});
};

const getButtonHoverClasses = ({
Expand All @@ -85,7 +88,10 @@ const getButtonHoverClasses = ({
}) => {
return disabled
? ""
: `hover:bg-action-${kind}-hover hover:text-copy-light-hover`;
: clsx("hover:text-copy-light-hover", {
"hover:bg-action-dark-hover": kind === "dark",
"hover:bg-action-light-hover": kind === "light",
});
};

const getButtonActiveClasses = ({
Expand All @@ -97,7 +103,10 @@ const getButtonActiveClasses = ({
}) => {
return disabled
? ""
: `active:bg-action-${kind}-active active:text-copy-light-active`;
: clsx("active:text-copy-light-active", {
"active:bg-action-dark-active": kind === "dark",
"active:bg-action-light-active": kind === "light",
});
};

const getButtonBorderClasses = ({
Expand All @@ -108,14 +117,18 @@ const getButtonBorderClasses = ({
noBorder: boolean;
}) => {
return clsx("border", {
[`border-border-${kind}`]: !noBorder,
"border-border-dark": !noBorder && kind === "dark",
"border-border-light": !noBorder && kind === "light",
"border-transparent": noBorder,
"focus:border-white": !noBorder,
});
};

const getButtonFocusClasses = ({ focus }: { focus: string }) => {
return `focus:ring-2 focus:ring-offset-0 focus:outline-none focus:ring-focus-${focus}`;
return clsx("focus:outline-none focus:ring-2 focus:ring-offset-0", {
"focus:ring-focus-light": focus === "light",
"focus:ring-focus-dark": focus === "dark",
});
};

export const getButtonClasses = ({
Expand Down
3 changes: 2 additions & 1 deletion packages/ui-components/src/components/Footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export const Footer = ({
raw = false,
}: FooterProps) => {
const footerClass = clsx(FOOTER_CLASSNAME, className, getSpacing(spacing), {
[`text-center text-xs text-copy-${kind}`]: !raw,
"text-center text-xs text-copy-dark": !raw && kind === "dark",
"text-center text-xs text-copy-light": !raw && kind === "light",
"mb-[100px]": !noMargins && !noPaddings && !raw,
"mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl": !raw,
});
Expand Down
18 changes: 12 additions & 6 deletions packages/ui-components/src/components/TextArea/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,10 @@ const getTextAreaFocusClasses = ({
return clsx("focus:outline-none focus:ring-offset-0", {
"focus:ring-2": !error,
"focus:ring-1": error,
[`focus:ring-focus-${focusKind}`]: !error,
[`focus:ring-focus-error-${errorKind}`]: error,
"focus:ring-focus-dark": !error && focusKind === "dark",
"focus:ring-focus-light": !error && focusKind === "light",
"focus:ring-focus-error-dark": error && errorKind === "dark",
"focus:ring-focus-error-light": error && errorKind === "light",
});
};

Expand All @@ -69,9 +71,11 @@ const getTextAreaBorderClasses = ({
noBorder: boolean;
}) => {
return clsx("border-2", {
[`border-border-${borderKind}`]: !noBorder,
"border-border-dark": !noBorder && borderKind === "dark",
"border-border-light": !noBorder && borderKind === "light",
"border-transparent": noBorder,
[`border-border-error-${errorKind}`]: error,
"border-border-error-dark": error && errorKind === "dark",
"border-border-error-light": error && errorKind === "light",
});
};

Expand All @@ -89,7 +93,8 @@ const getTextAreaLabelClasses = ({
return raw
? ""
: clsx("absolute cursor-text font-medium", {
[`text-copy-error-${errorKind}`]: error,
"text-copy-error-dark": error && errorKind === "dark",
"text-copy-error-light": error && errorKind === "light",
"text-copy-medium": !error,
"cursor-not-allowed opacity-50": disabled,
});
Expand All @@ -107,7 +112,8 @@ const getTextAreaHelperTextClasses = ({
return raw
? undefined
: clsx(TEXT_AREA_HELPER_TEXT_CLASSNAME, "absolute font-medium", {
[`text-copy-error-${errorKind}`]: error,
"text-copy-error-dark": error && errorKind === "dark",
"text-copy-error-light": error && errorKind === "light",
"text-copy-medium": !error,
});
};
Expand Down
18 changes: 12 additions & 6 deletions packages/ui-components/src/components/TextInput/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,10 @@ const getTextInputFocusClasses = ({
return clsx("focus:outline-none focus:ring-offset-0", {
"focus:ring-2": !error,
"focus:ring-1": error,
[`focus:ring-focus-${focusKind}`]: !error,
[`focus:ring-focus-error-${errorKind}`]: error,
"focus:ring-focus-dark": !error && focusKind === "dark",
"focus:ring-focus-light": !error && focusKind === "light",
"focus:ring-focus-error-dark": error && errorKind === "dark",
"focus:ring-focus-error-light": error && errorKind === "light",
});
};

Expand All @@ -71,9 +73,11 @@ const getTextInputBorderClasses = ({
noBorder: boolean;
}) => {
return clsx("border-2", {
[`border-border-${borderKind}`]: !noBorder,
"border-border-dark": !noBorder && borderKind === "dark",
"border-border-light": !noBorder && borderKind === "light",
"border-transparent": noBorder,
[`border-border-error-${errorKind}`]: error,
"border-border-error-dark": error && errorKind === "dark",
"border-border-error-light": error && errorKind === "light",
});
};

Expand All @@ -91,7 +95,8 @@ const getTextInputLabelClasses = ({
return raw
? ""
: clsx("absolute cursor-text font-medium", {
[`text-copy-error-${errorKind}`]: error,
"text-copy-error-dark": error && errorKind === "dark",
"text-copy-error-light": error && errorKind === "light",
"text-copy-medium": !error,
"cursor-not-allowed opacity-50": disabled,
});
Expand All @@ -109,7 +114,8 @@ const getTextInputHelperTextClasses = ({
return raw
? undefined
: clsx(TEXT_INPUT_HELPER_TEXT_CLASSNAME, "absolute font-medium", {
[`text-copy-error-${errorKind}`]: error,
"text-copy-error-dark": error && errorKind === "dark",
"text-copy-error-light": error && errorKind === "light",
"text-copy-medium": !error,
});
};
Expand Down

0 comments on commit 3b5bf80

Please sign in to comment.