Skip to content

Commit

Permalink
feat(tailwind): add transparent to available colors
Browse files Browse the repository at this point in the history 
chore: abstract getMargin to common tailwind
  • Loading branch information
@DSil
DSil committed Oct 2, 2023
1 parent 8aede8d commit 47394c9
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 44 deletions.
37 changes: 0 additions & 37 deletions packages/orbit-components/src/Text/helpers/getMargin.ts
View file

This file was deleted.

8 changes: 3 additions & 5 deletions packages/orbit-components/src/Text/index.tsx
View file
Expand Up @@ -11,16 +11,14 @@ import {
SIZE_OPTIONS,
} from "./consts";
import type { Props } from "./types";
import { spaceAfterClasses } from "../common/tailwind/spaceAfter";
import { spaceAfterClasses, textAlignClasses, getMargin } from "../common/tailwind";
import {
backgroundClasses,
sizeClasses,
textLinkCommonClasses,
typeClasses,
weightClasses,
} from "./helpers/twClasses";
import { textAlignClasses } from "../common/tailwind/textAlign";
import getMargin from "./helpers/getMargin";

const Text = ({
type = TYPE_OPTIONS.PRIMARY,
Expand All @@ -38,7 +36,7 @@ const Text = ({
withBackground,
id,
}: Props) => {
const { vars: cssVar, classes: marginClasses } = getMargin(margin);
const { vars: cssVars, classes: marginClasses } = getMargin(margin);

return (
<Component
Expand All @@ -58,7 +56,7 @@ const Text = ({
...marginClasses,
...textLinkCommonClasses,
)}
style={cssVar}
style={cssVars}
>
{children}
</Component>
Expand Down
3 changes: 2 additions & 1 deletion packages/orbit-components/src/common/tailwind/index.ts
View file
Expand Up @@ -5,7 +5,7 @@ import { colorClasses } from "./color";
import getDisplayClasses, { displayClasses, getDisplayInlineClass } from "./display";
import getDirectionClasses, { directionClasses } from "./direction";
import getJustifyClasses, { justifyClasses } from "./justify";
import { marginClasses } from "./margin";
import { marginClasses, getMargin } from "./margin";
import { paddingClasses } from "./padding";
import { textAlignClasses } from "./textAlign";
import getWrapClasses, { wrapClasses } from "./wrap";
Expand Down Expand Up @@ -38,6 +38,7 @@ export {
displayClasses,
justifyClasses,
marginClasses,
getMargin,
paddingClasses,
spaceAfterClasses,
wrapClasses,
Expand Down
41 changes: 41 additions & 0 deletions packages/orbit-components/src/common/tailwind/margin.ts
View file
@@ -1,3 +1,6 @@
import type { CSSProperties } from "react";

import type { ObjectProperty } from "../types";
import { QUERIES } from "../../utils/mediaQuery/consts";

export enum SIZES {
Expand Down Expand Up @@ -387,3 +390,41 @@ export const marginLeftClasses: {
[SIZES.XXXLARGE]: "mm:ml-xxxl",
},
};

const getMarginValue = (margin: string | number): string =>
typeof margin === "number" ? `${margin}px` : margin;

export const getMargin = (
margin: CSSProperties["margin"] | ObjectProperty,
): { vars: object; classes: string[] } => {
if (typeof margin === "number" || typeof margin === "string")
return {
vars: { "--text-margin": getMarginValue(margin) },
classes: ["m-[var(--text-margin)]"],
};

const { top, bottom, left, right } = margin || {};
const cssVar = {};
const classes: string[] = ["m-0"];

if (top) {
classes.push("mt-[var(--text-margin-top)]");
cssVar["--text-margin-top"] = getMarginValue(top);
}
if (bottom) {
classes.push("mb-[var(--text-margin-bottom)]");
cssVar["--text-margin-bottom"] = getMarginValue(bottom);
}
if (left) {
classes.push("ml-[var(--text-margin-left)]");
cssVar["--text-margin-left"] = getMarginValue(left);
}
if (right) {
classes.push("mr-[var(--text-margin-right)]");
cssVar["--text-margin-right"] = getMarginValue(right);
}

return { vars: cssVar, classes };
};

export default getMargin;
17 changes: 17 additions & 0 deletions packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap
View file
Expand Up @@ -313,6 +313,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -476,6 +477,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -765,6 +767,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"text-success-background": "rgba(40, 161, 56, 0.1)",
"text-warning-background": "rgba(223, 123, 0, 0.1)",
"text-white-background": "rgba(255, 255, 255, 0.1)",
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -975,6 +978,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"table-head": "#BAC7D5",
"tag": "#BAC7D5",
"tag-focus": "#0172CB",
"transparent": "transparent",
"white": "#FFFFFF",
},
"borderOpacity": {
Expand Down Expand Up @@ -1126,6 +1130,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -1237,6 +1242,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -1335,6 +1341,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -1570,6 +1577,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"table-head": "#BAC7D5",
"tag": "#BAC7D5",
"tag-focus": "#0172CB",
"transparent": "transparent",
"white": "#FFFFFF",
},
"divideOpacity": {
Expand Down Expand Up @@ -1710,6 +1718,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -1937,6 +1946,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -2484,6 +2494,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -2626,6 +2637,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -2742,6 +2754,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -2840,6 +2853,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -3078,6 +3092,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down Expand Up @@ -3292,6 +3307,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"success-foreground": "#28A138",
"tag-colored-foreground": "#004680",
"tag-neutral-foreground": "#252A31",
"transparent": "transparent",
"warning-foreground": "#DF7B00",
"white": {
"normal": "#FFFFFF",
Expand Down Expand Up @@ -3392,6 +3408,7 @@ exports[`orbitPreset should match snapshot 1`] = `
"facebook-active": "#354F88",
"facebook-hover": "#385490",
},
"transparent": "transparent",
"white": {
"normal": "#FFFFFF",
"normal-active": "#E7ECF1",
Expand Down
2 changes: 1 addition & 1 deletion packages/orbit-tailwind-preset/src/presets/foundation/index.ts
View file
Expand Up @@ -10,7 +10,7 @@ const config: Config = {
preflight: false,
},
theme: {
colors: defaultFoundation.palette,
colors: { ...defaultFoundation.palette, transparent: "transparent" },
borderRadius: defaultFoundation["border-radius"],
screens,
lineHeight: defaultFoundation["line-height"],
Expand Down

0 comments on commit 47394c9

Please sign in to comment.