Remove box sprinkles

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

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<string, any>
 >((acc, n) => {

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<string, any>
->((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'],

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';

packages/canon/src/components/Box/sprinkles.css.ts

@@ -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,
-);