Includes Styles Codemod scripts

docs/package.json

@@ -31,7 +31,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.1",
     "@tsconfig/docusaurus": "^1.0.5",
-    "@types/node": "^17.0.21",
+    "@types/node": "^20.8.6",
     "@types/react": "^18.0.6",
     "typescript": "^4.6.4"
   },

packages/core/package.json

@@ -28,17 +28,21 @@
     "vanilla-extract",
     "hover"
   ],
-  "scripts": {},
+  "scripts": {
+    "tsc": "tsc",
+    "lint": "eslint 'src/**/*.ts?(x)' --fix"
+  },
   "dependencies": {
     "@vanilla-extract/css": "^1.6.8",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
     "@vanilla-extract/recipes": "^0.2.3",
-    "@vanilla-extract/sprinkles": "^1.3.3"
+    "@vanilla-extract/sprinkles": "^1.3.3",
+    "polished": "^4.1.3"
   },
   "devDependencies": {
     "@hover-design/eslint-config": "*",
-    "@types/node": "^17.0.21",
+    "@types/node": "^20.8.6",
     "typescript": "^4.3.2"
   },
   "peerDependencies": {

packages/react/src/components/Accordion/accordion.styles.css.ts → packages/core/src/components/Accordion/accordion.styles.css.ts

@@ -1,5 +1,5 @@
 import { createTheme, style } from "@vanilla-extract/css";
-import { IAccordionTheme } from "./accordion.types";
+import { IAccordionTheme } from "./accordion.styles.types";
 import { recipe } from "@vanilla-extract/recipes";
 
 export const [accordionThemeClass, accordionThemeVars]: IAccordionTheme =

packages/core/src/components/Accordion/accordion.styles.types.ts

@@ -0,0 +1,4 @@
+export type IAccordionTheme = [
+  string,
+  { accordionTransition: string; accordionTransform: string }
+];

packages/core/src/components/Accordion/index.ts

@@ -0,0 +1,3 @@
+export * from "./accordion.styles.css";
+export * from "./accordion.global.styles.css";
+export * from "./accordion.styles.types";

packages/core/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export * from './alert.styles.css';

packages/react/src/components/Avatar/avatar.styles.css.ts → packages/core/src/components/Avatar/avatar.styles.css.ts

@@ -1,5 +1,5 @@
 import { style, createTheme } from "@vanilla-extract/css";
-import { IAvatarGroupTheme, IAvatarTheme } from "./avatar.types";
+import { IAvatarGroupTheme, IAvatarTheme } from "./avatar.styles.types";
 
 export const avatarGaps: Record<
   IAvatarGroupTheme[1]["avatarStyleGap"],

packages/core/src/components/Avatar/avatar.styles.types.ts

@@ -0,0 +1,20 @@
+export type IAvatarSizes = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type IAvatarShapes = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type IAvatarGaps = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type IAvatarTheme = [
+  string,
+  {
+    avatarStyleColor: string;
+    avatarStyleTextColor: string;
+    avatarStyleBorderRadius: IAvatarShapes | string;
+    avatarStyleSize: IAvatarSizes | string;
+  }
+];
+
+export type IAvatarGroupTheme = [
+  string,
+  { avatarStyleGap: IAvatarGaps | string }
+];

packages/core/src/components/Avatar/index.ts

@@ -0,0 +1,3 @@
+export * from "./avatar.styles.css";
+export * from "./avatar.global.styles.css";
+export * from "./avatar.styles.types";

packages/react/src/components/Badge/badge.css.ts → packages/core/src/components/Badge/badge.styles.css.ts

@@ -1,6 +1,6 @@
 import { recipe } from "@vanilla-extract/recipes";
 import { style, createTheme } from "@vanilla-extract/css";
-import { IBadgeTheme } from "./badge.types";
+import { IBadgeTheme } from "./badge.styles.types";
 
 export const [badgeThemeClass, badgeThemeVars]: IBadgeTheme = createTheme({
   badgeStyleColor: "none",

packages/core/src/components/Badge/badge.styles.types.ts

@@ -0,0 +1,4 @@
+export type IBadgeTheme = [
+  string,
+  { badgeStyleColor: string; badgeStyleTextColor: string }
+];

packages/core/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export * from "./badge.styles.css";
+export * from "./badge.styles.types";

packages/core/src/components/Banner/index.ts

@@ -0,0 +1,2 @@
+export * from './banner.styles.css';
+export * from './banner.global.styles.css';

packages/core/src/components/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb.styles.css';

packages/core/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './button.styles.css';

packages/core/src/components/Card/index.ts

@@ -0,0 +1 @@
+export * from './card.styles.css';

packages/react/src/components/Checkbox/checkbox.styles.css.ts → packages/core/src/components/Checkbox/checkbox.styles.css.ts

@@ -1,5 +1,5 @@
 import { createTheme, style } from "@vanilla-extract/css";
-import { TCheckboxGroupTheme, TCheckboxTheme } from "./checkbox.types";
+import { TCheckboxGroupTheme, TCheckboxTheme } from "./checkbox.styles.types";
 
 export const checkboxGroupChildClass = style({});
 

packages/core/src/components/Checkbox/checkbox.styles.types.ts

@@ -0,0 +1,36 @@
+export type TCheckboxSizes = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type TCheckboxBorderRadius = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type TCheckboxSpacing = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type TCheckboxTheme = [
+  string,
+  {
+    disabledStyles: {
+      borderColor: string;
+      backgroundColor: string;
+    };
+    baseStyles: {
+      borderColor: string;
+      backgroundColor: string;
+    };
+    selectedStyles: {
+      color: string;
+      borderColor: string;
+      backgroundColor: string;
+    };
+    indeterminateStyles: {
+      color: string;
+      borderColor: string;
+      backgroundColor: string;
+    };
+    checkboxStyleSize: TCheckboxSizes | string;
+    checkboxStyleBorderRadius: TCheckboxBorderRadius | string;
+  }
+];
+
+export type TCheckboxGroupTheme = [
+  string,
+  { checkboxGroupStyleSpacing: TCheckboxSpacing | string }
+];

packages/core/src/components/Checkbox/index.ts

@@ -0,0 +1,3 @@
+export * from "./checkbox.styles.css";
+export * from "./checkbox.global.styles.css";
+export * from "./checkbox.styles.types";

packages/react/src/components/Dialog/dialog.styles.css.ts → packages/core/src/components/Dialog/dialog.styles.css.ts

@@ -1,7 +1,7 @@
 import { createTheme, style } from "@vanilla-extract/css";
-import { IDialogTheme } from "./dialog.types";
+import { TDialogTheme } from "./dialog.styles.types";
 
-export const [dialogThemeClass, dialogThemeVars]: IDialogTheme = createTheme({
+export const [dialogThemeClass, dialogThemeVars]: TDialogTheme = createTheme({
   backgroundColor: "unset",
   borderRadius: "4px",
   boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",

packages/core/src/components/Dialog/dialog.styles.types.ts

@@ -0,0 +1,18 @@
+export type TDialogTheme = [
+  string,
+  {
+    backgroundColor: string;
+    borderRadius: string;
+    boxShadow: string;
+    position: string;
+    transform: string;
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+    padding: string;
+    zIndex: string;
+    height: string;
+    width: string;
+  }
+];

packages/core/src/components/Dialog/index.ts

@@ -0,0 +1,2 @@
+export * from "./dialog.styles.css";
+export * from "./dialog.styles.types";

packages/react/src/components/Divider/divider.css.ts → packages/core/src/components/Divider/divider.styles.css.ts

@@ -1,9 +1,9 @@
 import { createTheme, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
-import { DividerTheme } from "./divider.types";
+import { TDividerTheme } from "./divider.styles.types";
 import { calc } from "@vanilla-extract/css-utils";
 
-export const [dividerThemeClass, dividerThemeVar]: DividerTheme = createTheme({
+export const [dividerThemeClass, dividerThemeVar]: TDividerTheme = createTheme({
   dividerColor: "#000",
   labelColor: "#000",
   labelBackground: "#fff",

packages/core/src/components/Divider/divider.styles.types.ts

@@ -0,0 +1,11 @@
+export type TDividerTheme = [
+  string,
+  {
+    dividerColor: string;
+    labelColor: string;
+    labelBackground: string;
+    dividerSize: string;
+    dividerStyleMinHeight: string;
+    dividerStyleMinWidth: string;
+  }
+];

packages/core/src/components/Divider/index.ts

@@ -0,0 +1,2 @@
+export * from "./divider.styles.css";
+export * from "./divider.styles.types";

packages/core/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export * from "./input.styles.css";
+export * from "./input.styles.types";

packages/react/src/components/Input/input.styles.css.ts → packages/core/src/components/Input/input.styles.css.ts

@@ -1,7 +1,7 @@
 import { createTheme, style } from "@vanilla-extract/css";
 
 import { lightColors } from "../../styles/tokens";
-import { IInputTheme } from "./input.types";
+import { IInputTheme } from "./input.styles.types";
 
 export const inputWrapperClass = style({
   position: "relative",

packages/core/src/components/Input/input.styles.types.ts

@@ -0,0 +1,12 @@
+export type IInputTheme = [
+  string,
+  {
+    borderColor: string;
+    padding: {
+      top: string;
+      right: string;
+      bottom: string;
+      left: string;
+    };
+  }
+];

packages/core/src/components/Label/index.ts

@@ -0,0 +1 @@
+export * from './label.styles.css';

packages/core/src/components/List/index.ts

@@ -0,0 +1,2 @@
+export * from "./list.styles.css";
+export * from "./list.styles.types";

packages/react/src/components/List/list.css.ts → packages/core/src/components/List/list.styles.css.ts

@@ -1,7 +1,7 @@
 import { createTheme } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
-import { IListTheme } from "./list.types";
-export const [listThemeClass, listThemeVars]: IListTheme = createTheme({
+import { TListTheme } from "./list.styles.types";
+export const [listThemeClass, listThemeVars]: TListTheme = createTheme({
   listStyles: {
     listStyleType: "none"
   }

packages/core/src/components/List/list.styles.types.ts

@@ -0,0 +1 @@
+export type TListTheme = [string, { listStyles: { listStyleType: string } }];

packages/core/src/components/Loader/index.ts

@@ -0,0 +1 @@
+export * from "./spinner.styles.css";

packages/core/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export * from "./modal.styles.css";
+export * from "./modal.styles.types";

packages/react/src/components/Modal/modal.styles.css.ts → packages/core/src/components/Modal/modal.styles.css.ts

@@ -1,8 +1,26 @@
 import { createTheme, style } from "@vanilla-extract/css";
-import { sizes } from "./modal.constants";
-import { IModalTheme } from "./modal.types";
+import { TModalTheme } from "./modal.styles.types";
 
-export const [modalThemeClass, modalThemeVars]: IModalTheme = createTheme({
+export const ModalSizes = {
+  sm: {
+    width: "320px"
+  },
+  md: {
+    width: "440px"
+  },
+  lg: {
+    width: "550px"
+  },
+  xl: {
+    width: "720px"
+  },
+  full: {
+    height: "100%",
+    width: "100%"
+  }
+};
+
+export const [modalThemeClass, modalThemeVars]: TModalTheme = createTheme({
   base: {
     backgroundColor: "#fff",
     borderRadius: "4px",
@@ -15,7 +33,7 @@ export const [modalThemeClass, modalThemeVars]: IModalTheme = createTheme({
     right: "unset",
     padding: "12px",
     zIndex: "10",
-    width: sizes.md.width,
+    width: ModalSizes.md.width,
     height: "auto"
   },
   overlay: {

packages/core/src/components/Modal/modal.styles.types.ts

@@ -0,0 +1,31 @@
+export type TModalTheme = [
+  string,
+  {
+    base: {
+      backgroundColor: string;
+      borderRadius: string;
+      boxShadow: string;
+      position: string;
+      transform: string;
+      top: string;
+      bottom: string;
+      left: string;
+      right: string;
+      padding: string;
+      zIndex: string;
+      width: string;
+      height: string;
+    };
+    overlay: {
+      backgroundColor: string;
+      zIndex: string;
+      position: string;
+      top: string;
+      left: string;
+      right: string;
+      bottom: string;
+      opacity: string;
+      filter: string;
+    };
+  }
+];

packages/core/src/components/NativeSelect/index.ts

@@ -0,0 +1,2 @@
+export * from "./nativeSelect.styles.css";
+export * from "./nativeSelect.styles.types";

packages/react/src/components/NativeSelect/nativeSelect.css.ts → packages/core/src/components/NativeSelect/nativeSelect.styles.css.ts

@@ -1,6 +1,6 @@
 import { createTheme, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
-import { NativeSelectThemeType } from "./nativeSelect.types";
+import { NativeSelectThemeType } from "./nativeSelect.styles.types";
 
 export const [nativeSelectThemeClass, nativeSelectVars]: NativeSelectThemeType =
   createTheme({

packages/core/src/components/NativeSelect/nativeSelect.styles.types.ts

@@ -0,0 +1,8 @@
+export type NativeSelectThemeType = [
+  string,
+  {
+    height: string;
+    width: string;
+    borderRadius: string;
+  }
+];

packages/core/src/components/Popover/index.ts

@@ -0,0 +1 @@
+export * from './popover.styles.css';

packages/core/src/components/Portal/index.ts

@@ -0,0 +1 @@
+export * from './portal.styles.css';

packages/core/src/components/Progress/index.ts

@@ -0,0 +1,2 @@
+export * from "./progress.styles.css";
+export * from "./progress.styles.types";

packages/react/src/components/Progress/progress.styles.css.ts → packages/core/src/components/Progress/progress.styles.css.ts

@@ -1,7 +1,7 @@
 import { createTheme, style } from "@vanilla-extract/css";
-import { IProgressTheme } from "./progress.types";
+import { TProgressTheme } from "./progress.styles.types";
 
-export const progressRadiusMap: Record<IProgressTheme[1]["radius"], string> = {
+export const progressRadiusMap: Record<TProgressTheme[1]["radius"], string> = {
   xs: "1px",
   sm: "2px",
   md: "4px",
@@ -10,7 +10,7 @@ export const progressRadiusMap: Record<IProgressTheme[1]["radius"], string> = {
 };
 
 export const progressSizes: Record<
-  IProgressTheme[1]["progressStyleSize"],
+  TProgressTheme[1]["progressStyleSize"],
   string
 > = {
   xs: "3px",
@@ -20,7 +20,7 @@ export const progressSizes: Record<
   xl: "16px"
 };
 
-export const [progressThemeClass, progressThemeVars]: IProgressTheme =
+export const [progressThemeClass, progressThemeVars]: TProgressTheme =
   createTheme({
     radius: progressRadiusMap.md,
     progressStyleSize: progressSizes.md,