diff --git a/packages/canon/docs/utils/argTypes.ts b/packages/canon/docs/utils/argTypes.ts index e6a68008f8..78da0bb6d2 100644 --- a/packages/canon/docs/utils/argTypes.ts +++ b/packages/canon/docs/utils/argTypes.ts @@ -13,39 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { boxProperties } from '../../src/components/Box/sprinkles.css'; import { colorProperties, spacingProperties, } from '../../src/layout/sprinkles.css'; -export const listResponsiveValues = ( - value: keyof typeof boxProperties.styles, -) => { - const values = boxProperties.styles[value]; - - if (!values) { - console.warn(`Value "${value}" not found in boxProperties.styles`); - return []; - } - - if ('values' in values) { - return Object.keys(values.values); - } - - return []; -}; - -export const listColorValues = (value: keyof typeof colorProperties.styles) => { - const values = colorProperties.styles[value]; - - if ('values' in values) { - return Object.keys(values.values); - } - - return []; -}; - export const argTypesSpacing = Object.keys(spacingProperties.styles).reduce< Record >((acc, n) => { diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index 9ffa1d5a66..bd4e597fa0 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -17,25 +17,9 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Box } from './Box'; -import { - listResponsiveValues, - argTypesSpacing, - argTypesColor, -} from '../../../docs/utils/argTypes'; -import { boxProperties } from './sprinkles.css'; import { Stack } from '../Stack'; import { Inline } from '../Inline'; -const argTypesBox = Object.keys(boxProperties.styles).reduce< - Record ->((acc, n) => { - acc[n] = { - control: 'select', - options: listResponsiveValues(n as keyof typeof boxProperties.styles), - }; - return acc; -}, {}); - const meta = { title: 'Components/Box', component: Box, @@ -43,9 +27,6 @@ const meta = { layout: 'centered', }, argTypes: { - ...argTypesSpacing, - ...argTypesColor, - ...argTypesBox, as: { control: { type: 'select' }, options: ['div', 'span', 'article', 'section'], diff --git a/packages/canon/src/components/Box/index.tsx b/packages/canon/src/components/Box/index.tsx index e4f1867edc..d47e653dfd 100644 --- a/packages/canon/src/components/Box/index.tsx +++ b/packages/canon/src/components/Box/index.tsx @@ -15,4 +15,3 @@ */ export { Box } from './Box'; export type * from './types'; -export { breakpoints, space, themes } from '../../layout/properties'; diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts deleted file mode 100644 index 0613c84b9c..0000000000 --- a/packages/canon/src/components/Box/sprinkles.css.ts +++ /dev/null @@ -1,61 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'; -import { breakpoints } from '../../layout/properties'; -import { colorProperties, spacingProperties } from '../../layout/sprinkles.css'; - -export const boxProperties = defineProperties({ - conditions: breakpoints, - defaultCondition: 'xs', - responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], - properties: { - // flexDirection: ['row', 'column'], - // justifyContent: [ - // 'stretch', - // 'flex-start', - // 'center', - // 'flex-end', - // 'space-around', - // 'space-between', - // ], - // alignItems: ['stretch', 'flex-start', 'center', 'flex-end'], - // borderRadius: { - // none: 0, - // small: '4px', - // medium: '8px', - // full: '9999px', - // }, - boxShadow: { - small: 'var(--canon-box-shadow-small)', - medium: 'var(--canon-box-shadow-medium)', - large: 'var(--canon-box-shadow-large)', - }, - border: { - none: 'none', - thin: '1px solid var(--canon-outline)', - error: '1px solid var(--canon-error)', - }, - // display: ['none', 'flex', 'block', 'inline'], - // flexWrap: ['wrap', 'nowrap'], - }, -}); - -export const boxSprinkles = createSprinkles( - spacingProperties, - boxProperties, - colorProperties, -);