From e94f686c4797b652f6e705a2a5f6959b12660c65 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Sat, 4 Feb 2023 16:54:58 +1100 Subject: [PATCH 1/2] fix: various style components (#11) * feat: add radii variant in badge component * fix: fix inherit variant casing * fix: fix border width of line component * feat: add size variant in badge component * fix: fix as function types * fix: fix secondary container colors --- src/components/as.tsx | 5 +---- src/components/badge/Badge.css.ts | 26 +++++++++++++++++++++-- src/components/badge/Badge.tsx | 4 ++-- src/components/line/Line.css.ts | 31 ++++++++++++++++++++-------- src/components/text/Text.css.ts | 2 +- src/components/text/Text.stories.tsx | 2 +- src/components/variant.css.ts | 2 +- src/theme/color.css.ts | 8 +++---- 8 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/components/as.tsx b/src/components/as.tsx index 6074803..265844e 100644 --- a/src/components/as.tsx +++ b/src/components/as.tsx @@ -2,10 +2,7 @@ import { ElementType, forwardRef, ReactElement } from "react"; import { AsComponentProps, RefOfType } from "./types"; export const as = >( - fc: ( - props: AsComponentProps & ExtraProps, - ref: RefOfType - ) => ReactElement + fc: (props: AsComponentProps & ExtraProps, ref: RefOfType) => ReactElement ) => forwardRef(fc) as unknown as ( props: AsComponentProps & ExtraProps diff --git a/src/components/badge/Badge.css.ts b/src/components/badge/Badge.css.ts index 19cc57d..2b4716e 100644 --- a/src/components/badge/Badge.css.ts +++ b/src/components/badge/Badge.css.ts @@ -6,6 +6,7 @@ import { toRem } from "../../theme/util"; import { DefaultReset } from "../reset.css"; import { Disabled, FocusOutline } from "../selectorPreset.css"; import { MainColor } from "../types"; +import { RadiiVariant } from "../variant.css"; const Main = createVar(); const MainLine = createVar(); @@ -30,16 +31,34 @@ export const Badge = recipe({ DefaultReset, { padding: `0 ${config.space.S100}`, - height: toRem(16), display: "inline-flex", alignItems: "center", + justifyContent: "center", flexShrink: 0, - borderRadius: config.radii.R300, }, FocusOutline, Disabled, ], variants: { + size: { + "500": { + height: toRem(20), + minWidth: toRem(20), + padding: `0 ${config.space.S200}`, + }, + "400": { + height: toRem(16), + minWidth: toRem(16), + }, + "300": { + height: toRem(12), + minWidth: toRem(12), + }, + "200": { + height: toRem(8), + minWidth: toRem(8), + }, + }, variant: { Primary: getVariant("Primary"), Secondary: getVariant("Secondary"), @@ -64,10 +83,13 @@ export const Badge = recipe({ borderWidth: config.borderWidth.B300, }, }, + radii: RadiiVariant, }, defaultVariants: { + size: "400", variant: "Primary", fill: "Soft", + radii: "300", }, }); diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx index 740cddd..9ee44cb 100644 --- a/src/components/badge/Badge.tsx +++ b/src/components/badge/Badge.tsx @@ -5,9 +5,9 @@ import { as } from "../as"; import * as css from "./Badge.css"; export const Badge = as<"span", css.BadgeVariants>( - ({ as: AsBadge = "span", className, variant, fill, outlined, ...props }, ref) => ( + ({ as: AsBadge = "span", className, size, variant, fill, radii, outlined, ...props }, ref) => ( diff --git a/src/components/line/Line.css.ts b/src/components/line/Line.css.ts index f9cc8d3..fd3de7a 100644 --- a/src/components/line/Line.css.ts +++ b/src/components/line/Line.css.ts @@ -1,10 +1,12 @@ -import { ComplexStyleRule } from "@vanilla-extract/css"; +import { ComplexStyleRule, createVar } from "@vanilla-extract/css"; import { recipe, RecipeVariants } from "@vanilla-extract/recipes"; import { color } from "../../theme/color.css"; import { config } from "../../theme/config.css"; import { DefaultReset } from "../reset.css"; import { ContainerColor } from "../types"; +const BorderWidth = createVar(); + const getVariant = (variant: ContainerColor): ComplexStyleRule => ({ borderColor: color[variant].ContainerLine, }); @@ -16,12 +18,13 @@ export const Line = recipe({ display: "flex", alignItems: "center", justifyContent: "center", + borderStyle: "solid", position: "relative", }, ], variants: { variant: { - inherit: { + Inherit: { borderColor: "inherit", }, Background: getVariant("Background"), @@ -35,30 +38,40 @@ export const Line = recipe({ }, direction: { Horizontal: { - borderBottomStyle: "solid", + borderBottomWidth: BorderWidth, height: 0, }, Vertical: { - borderLeftStyle: "solid", + borderLeftWidth: BorderWidth, width: 0, flexDirection: "column", }, }, size: { "300": { - borderWidth: config.borderWidth.B300, + vars: { + [BorderWidth]: config.borderWidth.B300, + }, }, "400": { - borderWidth: config.borderWidth.B400, + vars: { + [BorderWidth]: config.borderWidth.B400, + }, }, "500": { - borderWidth: config.borderWidth.B500, + vars: { + [BorderWidth]: config.borderWidth.B500, + }, }, "600": { - borderWidth: config.borderWidth.B600, + vars: { + [BorderWidth]: config.borderWidth.B600, + }, }, "700": { - borderWidth: config.borderWidth.B700, + vars: { + [BorderWidth]: config.borderWidth.B700, + }, }, }, }, diff --git a/src/components/text/Text.css.ts b/src/components/text/Text.css.ts index 6fed676..2b903cf 100644 --- a/src/components/text/Text.css.ts +++ b/src/components/text/Text.css.ts @@ -11,7 +11,7 @@ export const Text = recipe({ ], variants: { size: { - inherit: {}, + Inherit: {}, D400: { fontSize: config.fontSize.D400, lineHeight: config.lineHeight.D400, diff --git a/src/components/text/Text.stories.tsx b/src/components/text/Text.stories.tsx index 03f524c..72a6e18 100644 --- a/src/components/text/Text.stories.tsx +++ b/src/components/text/Text.stories.tsx @@ -18,7 +18,7 @@ const loremIpsumHeading = "Lorem ipsum dolor sit amet consectetur adipisicing el export const Typography = () => ( Display{" "} - + Typography diff --git a/src/components/variant.css.ts b/src/components/variant.css.ts index f39ece3..b8892c1 100644 --- a/src/components/variant.css.ts +++ b/src/components/variant.css.ts @@ -2,7 +2,7 @@ import { style } from "@vanilla-extract/css"; import { config } from "../theme/config.css"; export const RadiiVariant = { - inherit: style({ + Inherit: style({ borderRadius: "inherit", }), "0": style({ diff --git a/src/theme/color.css.ts b/src/theme/color.css.ts index fc5b818..d3af7f9 100644 --- a/src/theme/color.css.ts +++ b/src/theme/color.css.ts @@ -137,10 +137,10 @@ export const lightTheme = createTheme(color, { MainActive: "#262626", MainLine: "#333333", OnMain: "#FFFFFF", - Container: "#E5E5E5", - ContainerHover: "#D9D9D9", - ContainerActive: "#CCCCCC", - ContainerLine: "#BFBFBF", + Container: "#D9D9D9", + ContainerHover: "#CCCCCC", + ContainerActive: "#BFBFBF", + ContainerLine: "#B2B2B2", OnContainer: "#0D0D0D", }, From 961fa88ee2f1cfdd9da6841ce2fef18c88922622 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Sat, 4 Feb 2023 05:57:51 +0000 Subject: [PATCH 2/2] chore(release): 1.0.4 [skip ci] ## [1.0.4](https://github.com/cinnyapp/folds/compare/v1.0.3...v1.0.4) (2023-02-04) ### Bug Fixes * various style components ([#11](https://github.com/cinnyapp/folds/issues/11)) ([e94f686](https://github.com/cinnyapp/folds/commit/e94f686c4797b652f6e705a2a5f6959b12660c65)) --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 751fb14..198a04e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## [1.0.4](https://github.com/cinnyapp/folds/compare/v1.0.3...v1.0.4) (2023-02-04) + +### Bug Fixes + +- various style components ([#11](https://github.com/cinnyapp/folds/issues/11)) ([e94f686](https://github.com/cinnyapp/folds/commit/e94f686c4797b652f6e705a2a5f6959b12660c65)) + ## [1.0.3](https://github.com/cinnyapp/folds/compare/v1.0.2...v1.0.3) (2023-01-31) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index d9af974..6875da0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "folds", - "version": "1.0.3", + "version": "1.0.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "folds", - "version": "1.0.3", + "version": "1.0.4", "license": "Apache-2.0", "dependencies": { "@fontsource/inter": "^4.5.12", diff --git a/package.json b/package.json index 508ba80..6e412d7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "folds", - "version": "1.0.3", + "version": "1.0.4", "author": "Ajay Bura (ajbura)", "license": "Apache-2.0", "main": "dist/index.js",