Merge pull request backstage#28235 from backstage/canon-utility-class…

…es-2

Canon - Remove Vanilla Extract from all other components

packages/canon/.storybook/main.ts

@@ -1,7 +1,4 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
-import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
-import { merge } from 'webpack-merge';
-
 import { join, dirname } from 'path';
 
 /**
@@ -28,13 +25,8 @@ const config: StorybookConfig = {
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),
     options: {
-      plugins: [new VanillaExtractPlugin()],
+      plugins: [],
     },
   },
-  webpackFinal: config => {
-    return merge(config, {
-      plugins: [new VanillaExtractPlugin()],
-    });
-  },
 };
 export default config;

packages/canon/src/components/Stack/sprinkles.css.ts → packages/canon/docs/spaceProps.ts

@@ -14,20 +14,28 @@
  * limitations under the License.
  */
 
-import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { breakpoints } from '../../layout/properties';
-import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
-
-const stackProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  properties: {
-    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+export const spacePropsList = [
+  'margin',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'marginX',
+  'marginY',
+  'padding',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'paddingX',
+  'paddingY',
+].reduce(
+  (acc: { [key: string]: { type: string[]; responsive: boolean } }, prop) => {
+    acc[prop] = {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    };
+    return acc;
   },
-});
-
-export const stackSprinkles = createSprinkles(
-  spacingProperties,
-  colorProperties,
-  stackProperties,
+  {},
 );

packages/canon/package.json

@@ -55,17 +55,13 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vanilla-extract/rollup-plugin": "^1.3.10",
-    "@vanilla-extract/sprinkles": "^1.6.3",
-    "@vanilla-extract/webpack-plugin": "^2.3.14",
     "eslint-plugin-storybook": "^0.11.1",
     "globals": "^15.11.0",
     "mini-css-extract-plugin": "^2.9.2",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router-dom": "^6.3.0",
-    "storybook": "^8.4.7",
-    "webpack-merge": "^6.0.1"
+    "storybook": "^8.4.7"
   },
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",