From e6bd8e48df8ca5aa8cda4f01fa2d022a24dd1fc0 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Fri, 5 Jun 2026 21:36:27 +0300 Subject: [PATCH 1/4] refactor(checkbox): appearance/shape structure --- .pnp.cjs | 2 -- ui-parts/checkbox/package.json | 1 - .../checkbox/src/box/styles/appearance.css.ts | 22 +++++++++++---- ui-parts/checkbox/src/box/styles/shape.css.ts | 28 +++++++++++++++---- ui-parts/checkbox/src/check/check.css.ts | 28 ++++++++++++++++--- ui-parts/checkbox/src/checkbox.component.tsx | 28 +++++++++++-------- ui-parts/checkbox/src/checkbox.interfaces.ts | 7 +++-- ui-parts/checkbox/src/index.ts | 4 +++ .../checkbox/src/styles/appearance.css.ts | 23 +++++++++++++++ ui-parts/checkbox/src/styles/index.ts | 3 ++ ui-parts/checkbox/src/styles/interfaces.ts | 11 ++++++++ ui-parts/checkbox/src/styles/shape.css.ts | 23 +++++++++++++++ .../checkbox/stories/checkbox.stories.tsx | 24 +++++++++------- yarn.lock | 1 - 14 files changed, 164 insertions(+), 41 deletions(-) create mode 100644 ui-parts/checkbox/src/styles/appearance.css.ts create mode 100644 ui-parts/checkbox/src/styles/index.ts create mode 100644 ui-parts/checkbox/src/styles/interfaces.ts create mode 100644 ui-parts/checkbox/src/styles/shape.css.ts diff --git a/.pnp.cjs b/.pnp.cjs index 615c819aa..689977530 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -1340,7 +1340,6 @@ const RAW_RUNTIME_STATE = ["@types/vanilla-extract__dynamic", null],\ ["@vanilla-extract/css", "npm:1.17.1"],\ ["@vanilla-extract/dynamic", "npm:2.1.2"],\ - ["@vanilla-extract/recipes", "virtual:3d06fbb19d1fe3e56495101348ea0a04ee3f83383f44c49513a90168d8afa4fd0bb1beb21869c24e100c6d64fc80ac2453d3b6cf930e63e6f7b9fbd0b88593f2#npm:0.5.5"],\ ["clsx", "npm:2.1.1"],\ ["rainbow-sprinkles", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:1.0.0"],\ ["react", "npm:19.1.0"],\ @@ -1372,7 +1371,6 @@ const RAW_RUNTIME_STATE = ["@types/react", "npm:19.1.2"],\ ["@vanilla-extract/css", "npm:1.17.1"],\ ["@vanilla-extract/dynamic", "npm:2.1.2"],\ - ["@vanilla-extract/recipes", "virtual:3d06fbb19d1fe3e56495101348ea0a04ee3f83383f44c49513a90168d8afa4fd0bb1beb21869c24e100c6d64fc80ac2453d3b6cf930e63e6f7b9fbd0b88593f2#npm:0.5.5"],\ ["clsx", "npm:2.1.1"],\ ["rainbow-sprinkles", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:1.0.0"],\ ["react", "npm:19.1.0"],\ diff --git a/ui-parts/checkbox/package.json b/ui-parts/checkbox/package.json index 5d9a449cb..719bebd88 100644 --- a/ui-parts/checkbox/package.json +++ b/ui-parts/checkbox/package.json @@ -28,7 +28,6 @@ }, "peerDependencies": { "@vanilla-extract/css": "*", - "@vanilla-extract/dynamic": "*", "react": "*", "react-dom": "*" }, diff --git a/ui-parts/checkbox/src/box/styles/appearance.css.ts b/ui-parts/checkbox/src/box/styles/appearance.css.ts index bb06d8478..303f8b663 100644 --- a/ui-parts/checkbox/src/box/styles/appearance.css.ts +++ b/ui-parts/checkbox/src/box/styles/appearance.css.ts @@ -1,7 +1,19 @@ -import { styleVariants } from '@vanilla-extract/css' +import { style } from '@vanilla-extract/css' -export const boxColorStyles = styleVariants({ - blue: { border: '1px solid blue' }, - green: { border: '1px solid green' }, - red: { border: '1px solid red' }, +const boxBlueAppearanceStyles = style({ + border: '1px solid blue', }) + +const boxGreenAppearanceStyles = style({ + border: '1px solid green', +}) + +const boxRedAppearanceStyles = style({ + border: '1px solid red', +}) + +export const boxAppearanceStyles = { + blue: boxBlueAppearanceStyles, + green: boxGreenAppearanceStyles, + red: boxRedAppearanceStyles, +} diff --git a/ui-parts/checkbox/src/box/styles/shape.css.ts b/ui-parts/checkbox/src/box/styles/shape.css.ts index a99d79eb2..7c830b1fa 100644 --- a/ui-parts/checkbox/src/box/styles/shape.css.ts +++ b/ui-parts/checkbox/src/box/styles/shape.css.ts @@ -1,7 +1,25 @@ -import { styleVariants } from '@vanilla-extract/css' +import { style } from '@vanilla-extract/css' -export const boxShapeStyles = styleVariants({ - small: { width: 16, height: 16, borderRadius: 4 }, - medium: { width: 24, height: 24, borderRadius: 4 }, - large: { width: 32, height: 32, borderRadius: 4 }, +const boxSmallShapeStyles = style({ + width: 16, + height: 16, + borderRadius: 4, }) + +const boxMediumShapeStyles = style({ + width: 24, + height: 24, + borderRadius: 4, +}) + +const boxLargeShapeStyles = style({ + width: 32, + height: 32, + borderRadius: 4, +}) + +export const boxShapeStyles = { + small: boxSmallShapeStyles, + medium: boxMediumShapeStyles, + large: boxLargeShapeStyles, +} diff --git a/ui-parts/checkbox/src/check/check.css.ts b/ui-parts/checkbox/src/check/check.css.ts index b59d016f5..18337d4c5 100644 --- a/ui-parts/checkbox/src/check/check.css.ts +++ b/ui-parts/checkbox/src/check/check.css.ts @@ -1,15 +1,35 @@ import { style } from '@vanilla-extract/css' export const checkBaseStyles = style({ - width: 'calc(100% - 3px)', - height: 'calc(100% - 3px)', display: 'none', alignItems: 'center', justifyContent: 'center', - backgroundColor: 'blue', - borderRadius: 4, }) export const checkCheckedStyles = style({ display: 'flex', }) + +const checkBlueAppearanceStyles = style({ + backgroundColor: 'blue', +}) + +const checkGreenAppearanceStyles = style({ + backgroundColor: 'green', +}) + +const checkRedAppearanceStyles = style({ + backgroundColor: 'red', +}) + +export const checkAppearanceStyles = { + blue: checkBlueAppearanceStyles, + green: checkGreenAppearanceStyles, + red: checkRedAppearanceStyles, +} + +export const checkShapeStyles = style({ + width: 'calc(100% - 3px)', + height: 'calc(100% - 3px)', + borderRadius: 4, +}) diff --git a/ui-parts/checkbox/src/checkbox.component.tsx b/ui-parts/checkbox/src/checkbox.component.tsx index 518e6819a..39d712998 100644 --- a/ui-parts/checkbox/src/checkbox.component.tsx +++ b/ui-parts/checkbox/src/checkbox.component.tsx @@ -9,16 +9,14 @@ import { useEffect } from 'react' import { useState } from 'react' import { boxBaseStyles } from './box/index.js' -import { boxShapeStyles } from './box/index.js' -import { boxColorStyles } from './box/index.js' import { checkBaseStyles } from './check/index.js' import { checkCheckedStyles } from './check/index.js' import { containerBaseStyles } from './container/index.js' import { containerPositionStyles } from './container/index.js' import { hiddenInputStyles } from './hidden-input/index.js' -import { labelAppearanceStyles } from './label/index.js' import { labelPositionStyles } from './label/index.js' -import { labelShapeStyles } from './label/index.js' +import { checkboxAppearances } from './styles/index.js' +import { checkboxShapes } from './styles/index.js' export const Checkbox = ({ onCheck, @@ -26,8 +24,8 @@ export const Checkbox = ({ active, defaultActive = false, labelPosition = 'end', - size = 'medium', - color = 'blue', + appearance = checkboxAppearances.blue, + shape = checkboxShapes.medium, icon, checkedIcon = icon, className, @@ -101,19 +99,27 @@ export const Checkbox = ({
-
+
{checkedIcon}
{ active?: boolean + appearance?: CheckboxAppearance checkedIcon?: ReactNode classNames?: CheckboxClassNames defaultActive?: boolean onCheck?: (checked: boolean) => void labelPosition?: 'bottom' | 'end' | 'start' | 'top' - size?: 'large' | 'medium' | 'small' - color?: 'blue' | 'green' | 'red' + shape?: CheckboxShape icon?: ReactNode ref?: Ref } diff --git a/ui-parts/checkbox/src/index.ts b/ui-parts/checkbox/src/index.ts index 7f33c4ab8..11bd16774 100644 --- a/ui-parts/checkbox/src/index.ts +++ b/ui-parts/checkbox/src/index.ts @@ -5,3 +5,7 @@ export type * from './checkbox.interfaces.js' export * from './container/index.js' export * from './hidden-input/index.js' export * from './label/index.js' +export type { CheckboxAppearance } from './styles/index.js' +export type { CheckboxShape } from './styles/index.js' +export { checkboxAppearances } from './styles/index.js' +export { checkboxShapes } from './styles/index.js' diff --git a/ui-parts/checkbox/src/styles/appearance.css.ts b/ui-parts/checkbox/src/styles/appearance.css.ts new file mode 100644 index 000000000..912db61b4 --- /dev/null +++ b/ui-parts/checkbox/src/styles/appearance.css.ts @@ -0,0 +1,23 @@ +import type { CheckboxAppearance } from './interfaces.js' + +import { boxAppearanceStyles } from '../box/index.js' +import { checkAppearanceStyles } from '../check/index.js' +import { labelAppearanceStyles } from '../label/index.js' + +export const checkboxAppearances: Record<'blue' | 'green' | 'red', CheckboxAppearance> = { + blue: { + box: boxAppearanceStyles.blue, + check: checkAppearanceStyles.blue, + label: labelAppearanceStyles, + }, + green: { + box: boxAppearanceStyles.green, + check: checkAppearanceStyles.green, + label: labelAppearanceStyles, + }, + red: { + box: boxAppearanceStyles.red, + check: checkAppearanceStyles.red, + label: labelAppearanceStyles, + }, +} diff --git a/ui-parts/checkbox/src/styles/index.ts b/ui-parts/checkbox/src/styles/index.ts new file mode 100644 index 000000000..20d856d04 --- /dev/null +++ b/ui-parts/checkbox/src/styles/index.ts @@ -0,0 +1,3 @@ +export * from './appearance.css.js' +export type * from './interfaces.js' +export * from './shape.css.js' diff --git a/ui-parts/checkbox/src/styles/interfaces.ts b/ui-parts/checkbox/src/styles/interfaces.ts new file mode 100644 index 000000000..c820a904d --- /dev/null +++ b/ui-parts/checkbox/src/styles/interfaces.ts @@ -0,0 +1,11 @@ +export interface CheckboxAppearance { + box: string + check: string + label: string +} + +export interface CheckboxShape { + box: string + check: string + label: string +} diff --git a/ui-parts/checkbox/src/styles/shape.css.ts b/ui-parts/checkbox/src/styles/shape.css.ts new file mode 100644 index 000000000..2ee631c4a --- /dev/null +++ b/ui-parts/checkbox/src/styles/shape.css.ts @@ -0,0 +1,23 @@ +import type { CheckboxShape } from './interfaces.js' + +import { boxShapeStyles } from '../box/index.js' +import { checkShapeStyles } from '../check/index.js' +import { labelShapeStyles } from '../label/index.js' + +export const checkboxShapes: Record<'large' | 'medium' | 'small', CheckboxShape> = { + large: { + box: boxShapeStyles.large, + check: checkShapeStyles, + label: labelShapeStyles, + }, + medium: { + box: boxShapeStyles.medium, + check: checkShapeStyles, + label: labelShapeStyles, + }, + small: { + box: boxShapeStyles.small, + check: checkShapeStyles, + label: labelShapeStyles, + }, +} diff --git a/ui-parts/checkbox/stories/checkbox.stories.tsx b/ui-parts/checkbox/stories/checkbox.stories.tsx index 87f3db3dd..01eba54e9 100644 --- a/ui-parts/checkbox/stories/checkbox.stories.tsx +++ b/ui-parts/checkbox/stories/checkbox.stories.tsx @@ -7,6 +7,8 @@ import { Column } from '@atls-ui-parts/layout' import { Layout } from '@atls-ui-parts/layout' import { Checkbox } from '../src/checkbox.component.js' +import { checkboxAppearances } from '../src/index.js' +import { checkboxShapes } from '../src/index.js' import { customBoxStyles } from './styles.css.js' import { customCheckStyles } from './styles.css.js' @@ -29,17 +31,19 @@ const meta: Meta = { description: 'Is the checkbox checked', control: { type: 'boolean' }, }, - color: { - name: 'Color', + appearance: { + name: 'Appearance', description: 'Color of the divider', control: { type: 'select' }, - options: ['red', 'blue', 'green'], + options: Object.keys(checkboxAppearances), + mapping: checkboxAppearances, }, - size: { - name: 'Size', + shape: { + name: 'Shape', description: 'Size of the divider', control: { type: 'select' }, - options: ['small', 'medium', 'large'], + options: Object.keys(checkboxShapes), + mapping: checkboxShapes, }, labelPosition: { name: 'Label position', @@ -60,8 +64,8 @@ export const Base: Story = { onCheck: () => undefined, active: false, labelPosition: 'start', - size: 'medium', - color: 'blue', + appearance: checkboxAppearances.blue, + shape: checkboxShapes.medium, children: 'Checkbox Label', }, } @@ -71,8 +75,8 @@ export const Custom: Story = { args: { defaultActive: true, labelPosition: 'end', - size: 'medium', - color: 'blue', + appearance: checkboxAppearances.blue, + shape: checkboxShapes.medium, checkedIcon: '✓', classNames: { box: customBoxStyles, diff --git a/yarn.lock b/yarn.lock index 28f232145..dd631d22c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -497,7 +497,6 @@ __metadata: storybook: "npm:8.6.12" peerDependencies: "@vanilla-extract/css": "*" - "@vanilla-extract/dynamic": "*" react: "*" react-dom: "*" languageName: unknown From 89bd089075914c664a51dcb4ede3bc1b4ce5cd16 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 6 Jun 2026 01:12:24 +0300 Subject: [PATCH 2/4] refactor(checkbox): appearance/shape interfaces --- ui-parts/checkbox/src/index.ts | 2 ++ ui-parts/checkbox/src/styles/appearance.css.ts | 11 ++++++----- ui-parts/checkbox/src/styles/interfaces.ts | 4 ++++ ui-parts/checkbox/src/styles/shape.css.ts | 11 ++++++----- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/ui-parts/checkbox/src/index.ts b/ui-parts/checkbox/src/index.ts index 11bd16774..6713849f7 100644 --- a/ui-parts/checkbox/src/index.ts +++ b/ui-parts/checkbox/src/index.ts @@ -6,6 +6,8 @@ export * from './container/index.js' export * from './hidden-input/index.js' export * from './label/index.js' export type { CheckboxAppearance } from './styles/index.js' +export type { CheckboxAppearanceName } from './styles/index.js' export type { CheckboxShape } from './styles/index.js' +export type { CheckboxShapeName } from './styles/index.js' export { checkboxAppearances } from './styles/index.js' export { checkboxShapes } from './styles/index.js' diff --git a/ui-parts/checkbox/src/styles/appearance.css.ts b/ui-parts/checkbox/src/styles/appearance.css.ts index 912db61b4..a34ff4936 100644 --- a/ui-parts/checkbox/src/styles/appearance.css.ts +++ b/ui-parts/checkbox/src/styles/appearance.css.ts @@ -1,10 +1,11 @@ -import type { CheckboxAppearance } from './interfaces.js' +import type { CheckboxAppearance } from './interfaces.js' +import type { CheckboxAppearanceName } from './interfaces.js' -import { boxAppearanceStyles } from '../box/index.js' -import { checkAppearanceStyles } from '../check/index.js' -import { labelAppearanceStyles } from '../label/index.js' +import { boxAppearanceStyles } from '../box/index.js' +import { checkAppearanceStyles } from '../check/index.js' +import { labelAppearanceStyles } from '../label/index.js' -export const checkboxAppearances: Record<'blue' | 'green' | 'red', CheckboxAppearance> = { +export const checkboxAppearances: Record = { blue: { box: boxAppearanceStyles.blue, check: checkAppearanceStyles.blue, diff --git a/ui-parts/checkbox/src/styles/interfaces.ts b/ui-parts/checkbox/src/styles/interfaces.ts index c820a904d..ee41b8d11 100644 --- a/ui-parts/checkbox/src/styles/interfaces.ts +++ b/ui-parts/checkbox/src/styles/interfaces.ts @@ -1,9 +1,13 @@ +export type CheckboxAppearanceName = 'blue' | 'green' | 'red' + export interface CheckboxAppearance { box: string check: string label: string } +export type CheckboxShapeName = 'large' | 'medium' | 'small' + export interface CheckboxShape { box: string check: string diff --git a/ui-parts/checkbox/src/styles/shape.css.ts b/ui-parts/checkbox/src/styles/shape.css.ts index 2ee631c4a..2e7576e0b 100644 --- a/ui-parts/checkbox/src/styles/shape.css.ts +++ b/ui-parts/checkbox/src/styles/shape.css.ts @@ -1,10 +1,11 @@ -import type { CheckboxShape } from './interfaces.js' +import type { CheckboxShape } from './interfaces.js' +import type { CheckboxShapeName } from './interfaces.js' -import { boxShapeStyles } from '../box/index.js' -import { checkShapeStyles } from '../check/index.js' -import { labelShapeStyles } from '../label/index.js' +import { boxShapeStyles } from '../box/index.js' +import { checkShapeStyles } from '../check/index.js' +import { labelShapeStyles } from '../label/index.js' -export const checkboxShapes: Record<'large' | 'medium' | 'small', CheckboxShape> = { +export const checkboxShapes: Record = { large: { box: boxShapeStyles.large, check: checkShapeStyles, From 57d99aa084a838e1053cad522b77750e5cae7343 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 6 Jun 2026 01:15:17 +0300 Subject: [PATCH 3/4] refactor(checkbox): theme usage --- .../checkbox/src/box/styles/appearance.css.ts | 8 +++++--- ui-parts/checkbox/src/box/styles/shape.css.ts | 20 ++++++++++--------- ui-parts/checkbox/src/check/check.css.ts | 14 +++++++------ ui-parts/theme/src/theme/borders.ts | 2 ++ ui-parts/theme/src/theme/space.ts | 2 ++ 5 files changed, 28 insertions(+), 18 deletions(-) diff --git a/ui-parts/checkbox/src/box/styles/appearance.css.ts b/ui-parts/checkbox/src/box/styles/appearance.css.ts index 303f8b663..b24315ad4 100644 --- a/ui-parts/checkbox/src/box/styles/appearance.css.ts +++ b/ui-parts/checkbox/src/box/styles/appearance.css.ts @@ -1,15 +1,17 @@ import { style } from '@vanilla-extract/css' +import { vars } from '@atls-ui-parts/theme' + const boxBlueAppearanceStyles = style({ - border: '1px solid blue', + border: vars.borders.normalBlue, }) const boxGreenAppearanceStyles = style({ - border: '1px solid green', + border: vars.borders.normalGreen, }) const boxRedAppearanceStyles = style({ - border: '1px solid red', + border: vars.borders.normalRed, }) export const boxAppearanceStyles = { diff --git a/ui-parts/checkbox/src/box/styles/shape.css.ts b/ui-parts/checkbox/src/box/styles/shape.css.ts index 7c830b1fa..ba116cfda 100644 --- a/ui-parts/checkbox/src/box/styles/shape.css.ts +++ b/ui-parts/checkbox/src/box/styles/shape.css.ts @@ -1,21 +1,23 @@ import { style } from '@vanilla-extract/css' +import { vars } from '@atls-ui-parts/theme' + const boxSmallShapeStyles = style({ - width: 16, - height: 16, - borderRadius: 4, + width: vars.space.g16, + height: vars.space.g16, + borderRadius: vars.radii.f4, }) const boxMediumShapeStyles = style({ - width: 24, - height: 24, - borderRadius: 4, + width: vars.space.g24, + height: vars.space.g24, + borderRadius: vars.radii.f4, }) const boxLargeShapeStyles = style({ - width: 32, - height: 32, - borderRadius: 4, + width: vars.space.g32, + height: vars.space.g32, + borderRadius: vars.radii.f4, }) export const boxShapeStyles = { diff --git a/ui-parts/checkbox/src/check/check.css.ts b/ui-parts/checkbox/src/check/check.css.ts index 18337d4c5..9a125b31f 100644 --- a/ui-parts/checkbox/src/check/check.css.ts +++ b/ui-parts/checkbox/src/check/check.css.ts @@ -1,5 +1,7 @@ import { style } from '@vanilla-extract/css' +import { vars } from '@atls-ui-parts/theme' + export const checkBaseStyles = style({ display: 'none', alignItems: 'center', @@ -11,15 +13,15 @@ export const checkCheckedStyles = style({ }) const checkBlueAppearanceStyles = style({ - backgroundColor: 'blue', + backgroundColor: vars.colors.blue, }) const checkGreenAppearanceStyles = style({ - backgroundColor: 'green', + backgroundColor: vars.colors.green, }) const checkRedAppearanceStyles = style({ - backgroundColor: 'red', + backgroundColor: vars.colors.red, }) export const checkAppearanceStyles = { @@ -29,7 +31,7 @@ export const checkAppearanceStyles = { } export const checkShapeStyles = style({ - width: 'calc(100% - 3px)', - height: 'calc(100% - 3px)', - borderRadius: 4, + width: `calc(100% - ${vars.radii.f3})`, + height: `calc(100% - ${vars.radii.f3})`, + borderRadius: vars.radii.f4, }) diff --git a/ui-parts/theme/src/theme/borders.ts b/ui-parts/theme/src/theme/borders.ts index 4546e5fd0..b75f97a04 100644 --- a/ui-parts/theme/src/theme/borders.ts +++ b/ui-parts/theme/src/theme/borders.ts @@ -8,6 +8,8 @@ export const borders = { normalSilver: '1px solid rgba(224, 224, 224, 1)', normalCloudyWhite: '1px solid rgba(228, 228, 228, 1)', normalBlue: '1px solid rgba(65, 109, 223, 1)', + normalGreen: '1px solid rgba(52, 197, 29, 1)', + normalRed: '1px solid rgba(255, 47, 47, 1)', normalLightGray: '1px solid rgba(184, 184, 184, 1)', normalLightBlue: '1px solid rgba(232, 237, 251, 1)', normalSoftBlue: '1px solid rgba(18, 112, 252, 1)', diff --git a/ui-parts/theme/src/theme/space.ts b/ui-parts/theme/src/theme/space.ts index 3ce1eefda..1534ecdb4 100644 --- a/ui-parts/theme/src/theme/space.ts +++ b/ui-parts/theme/src/theme/space.ts @@ -7,7 +7,9 @@ export const space = { g10: '10px', g12: '12px', g14: '14px', + g16: '16px', g17: '17px', g22: '22px', g24: '24px', + g32: '32px', } From 888085af4b6c2f2d95e456cb89b160f0dbc8b9f5 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 6 Jun 2026 02:21:58 +0300 Subject: [PATCH 4/4] refactor(checkbox): interfaces --- ui-parts/checkbox/package.json | 2 +- ui-parts/checkbox/src/checkbox.interfaces.ts | 19 ++++++++++++++++--- ui-parts/checkbox/src/index.ts | 4 ---- .../checkbox/src/styles/appearance.css.ts | 4 ++-- ui-parts/checkbox/src/styles/index.ts | 1 - ui-parts/checkbox/src/styles/interfaces.ts | 15 --------------- ui-parts/checkbox/src/styles/shape.css.ts | 4 ++-- 7 files changed, 21 insertions(+), 28 deletions(-) delete mode 100644 ui-parts/checkbox/src/styles/interfaces.ts diff --git a/ui-parts/checkbox/package.json b/ui-parts/checkbox/package.json index 719bebd88..5aad609c7 100644 --- a/ui-parts/checkbox/package.json +++ b/ui-parts/checkbox/package.json @@ -13,11 +13,11 @@ "postpack": "rm -rf dist" }, "dependencies": { + "@atls-ui-parts/theme": "workspace:*", "clsx": "2.1.1" }, "devDependencies": { "@atls-ui-parts/layout": "workspace:*", - "@atls-ui-parts/theme": "workspace:*", "@storybook/react": "8.6.12", "@types/react": "19.1.2", "@vanilla-extract/css": "1.17.1", diff --git a/ui-parts/checkbox/src/checkbox.interfaces.ts b/ui-parts/checkbox/src/checkbox.interfaces.ts index 339a59091..b63eaeaad 100644 --- a/ui-parts/checkbox/src/checkbox.interfaces.ts +++ b/ui-parts/checkbox/src/checkbox.interfaces.ts @@ -2,9 +2,6 @@ import type { HTMLAttributes } from 'react' import type { Ref } from 'react' import type { ReactNode } from 'react' -import type { CheckboxAppearance } from './styles/index.js' -import type { CheckboxShape } from './styles/index.js' - export interface CheckboxClassNames { box?: string check?: string @@ -13,6 +10,22 @@ export interface CheckboxClassNames { label?: string } +export type CheckboxAppearanceName = 'blue' | 'green' | 'red' + +export interface CheckboxAppearance { + box: string + check: string + label: string +} + +export type CheckboxShapeName = 'large' | 'medium' | 'small' + +export interface CheckboxShape { + box: string + check: string + label: string +} + export interface CheckboxProps extends HTMLAttributes { active?: boolean appearance?: CheckboxAppearance diff --git a/ui-parts/checkbox/src/index.ts b/ui-parts/checkbox/src/index.ts index 6713849f7..31d421219 100644 --- a/ui-parts/checkbox/src/index.ts +++ b/ui-parts/checkbox/src/index.ts @@ -5,9 +5,5 @@ export type * from './checkbox.interfaces.js' export * from './container/index.js' export * from './hidden-input/index.js' export * from './label/index.js' -export type { CheckboxAppearance } from './styles/index.js' -export type { CheckboxAppearanceName } from './styles/index.js' -export type { CheckboxShape } from './styles/index.js' -export type { CheckboxShapeName } from './styles/index.js' export { checkboxAppearances } from './styles/index.js' export { checkboxShapes } from './styles/index.js' diff --git a/ui-parts/checkbox/src/styles/appearance.css.ts b/ui-parts/checkbox/src/styles/appearance.css.ts index a34ff4936..5f48ebd83 100644 --- a/ui-parts/checkbox/src/styles/appearance.css.ts +++ b/ui-parts/checkbox/src/styles/appearance.css.ts @@ -1,5 +1,5 @@ -import type { CheckboxAppearance } from './interfaces.js' -import type { CheckboxAppearanceName } from './interfaces.js' +import type { CheckboxAppearance } from '../checkbox.interfaces.js' +import type { CheckboxAppearanceName } from '../checkbox.interfaces.js' import { boxAppearanceStyles } from '../box/index.js' import { checkAppearanceStyles } from '../check/index.js' diff --git a/ui-parts/checkbox/src/styles/index.ts b/ui-parts/checkbox/src/styles/index.ts index 20d856d04..93e0eec5d 100644 --- a/ui-parts/checkbox/src/styles/index.ts +++ b/ui-parts/checkbox/src/styles/index.ts @@ -1,3 +1,2 @@ export * from './appearance.css.js' -export type * from './interfaces.js' export * from './shape.css.js' diff --git a/ui-parts/checkbox/src/styles/interfaces.ts b/ui-parts/checkbox/src/styles/interfaces.ts deleted file mode 100644 index ee41b8d11..000000000 --- a/ui-parts/checkbox/src/styles/interfaces.ts +++ /dev/null @@ -1,15 +0,0 @@ -export type CheckboxAppearanceName = 'blue' | 'green' | 'red' - -export interface CheckboxAppearance { - box: string - check: string - label: string -} - -export type CheckboxShapeName = 'large' | 'medium' | 'small' - -export interface CheckboxShape { - box: string - check: string - label: string -} diff --git a/ui-parts/checkbox/src/styles/shape.css.ts b/ui-parts/checkbox/src/styles/shape.css.ts index 2e7576e0b..e687f06f9 100644 --- a/ui-parts/checkbox/src/styles/shape.css.ts +++ b/ui-parts/checkbox/src/styles/shape.css.ts @@ -1,5 +1,5 @@ -import type { CheckboxShape } from './interfaces.js' -import type { CheckboxShapeName } from './interfaces.js' +import type { CheckboxShape } from '../checkbox.interfaces.js' +import type { CheckboxShapeName } from '../checkbox.interfaces.js' import { boxShapeStyles } from '../box/index.js' import { checkShapeStyles } from '../check/index.js'