✨ feat: add create classname variant function #38

DesignSystemLab · Apr 7, 2023 · f529173 · f529173
1 parent 206d67d
commit f529173
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 5 deletions.
diff --git a/packages/theme/index.ts b/packages/theme/index.ts
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
@@ -0,0 +1,10 @@
+/**types */
+export * from './types/color';
+export * from './types/spacings';
+export * from './types/classVariants';
+/**token constants */
+export * from './token/colors';
+export * from './token/spacings';
+/**utils */
+export * from './utils/getColorbyToken';
+export * from './utils/createClassVariant';
diff --git a/packages/theme/src/types/classVariants.ts b/packages/theme/src/types/classVariants.ts
@@ -0,0 +1,37 @@
+export type JDesignSystemComponent =
+  | 'box'
+  | 'checkbox'
+  | 'flex'
+  | 'modal'
+  | 'tabs'
+  | 'tooltip'
+  | 'button'
+  | 'drawer'
+  | 'select'
+  | 'popover'
+  | 'textarea'
+  | 'card'
+  | 'dopdown'
+  | 'input'
+  | 'radio'
+  | 'stack';
+
+export type JDesignSystemElementRoles =
+  | 'overlay'
+  | 'wrapper'
+  | 'content'
+  | 'lavel'
+  | 'ul'
+  | 'ol'
+  | 'item'
+  | 'footer'
+  | 'header'
+  | 'trigger'
+  | 'message'
+  | 'article'
+  | 'button'
+  | 'input';
+
+export type CssVariant =
+  | `j-${JDesignSystemComponent}__${string}-${JDesignSystemElementRoles}`
+  | `j-${JDesignSystemComponent}__${JDesignSystemElementRoles}`;
diff --git a/packages/theme/src/utils/createClassVariant.ts b/packages/theme/src/utils/createClassVariant.ts
@@ -0,0 +1,9 @@
+import type { JDesignSystemComponent, JDesignSystemElementRoles, CssVariant } from '../types/classVariants';
+
+export const createClassVariant = (
+  component: JDesignSystemComponent,
+  element: JDesignSystemElementRoles,
+  modifier?: string
+): CssVariant => {
+  return modifier ? `j-${component}__${modifier}-${element}` : `j-${component}__${element}`;
+};