feat(ui/react/styles/utilities): dynamic, enum 속성의 css.ts 파일 추가 (#238)

* feat(ui/react/utilities): dynamic 관련 css.ts 추가

* feat(ui/react/utilities): enum 관련 css.ts 추가

* feat(ui/react/utilities): dynamic, enum이 담긴 index.ts 추가

packages/ui/react/src/styles/utilities/dynamic/flex-basis.css.ts

@@ -0,0 +1,7 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const flexBasisVar = createVar();
+
+export const flexBasis = style({
+  flexBasis: flexBasisVar,
+});

packages/ui/react/src/styles/utilities/dynamic/gap.css.ts

@@ -0,0 +1,19 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const gapVar = createVar();
+
+export const gapXVar = createVar();
+
+export const gapYVar = createVar();
+
+export const gap = style({
+  gap: gapVar,
+});
+
+export const gapX = style({
+  rowGap: gapXVar,
+});
+
+export const gapY = style({
+  columnGap: gapYVar,
+});

packages/ui/react/src/styles/utilities/dynamic/height.css.ts

@@ -0,0 +1,7 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const heightVar = createVar();
+
+export const height = style({
+  height: heightVar,
+});

packages/ui/react/src/styles/utilities/dynamic/index.ts

@@ -0,0 +1,11 @@
+/* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
+export * from './flex-basis.css';
+export * from './gap.css';
+export * from './height.css';
+export * from './inset.css';
+export * from './max-height.css';
+export * from './max-width.css';
+export * from './min-height.css';
+export * from './min-width.css';
+export * from './padding.css';
+export * from './width.css';

packages/ui/react/src/styles/utilities/dynamic/inset.css.ts

@@ -0,0 +1,31 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const insetVar = createVar();
+
+export const topVar = createVar();
+
+export const bottomVar = createVar();
+
+export const leftVar = createVar();
+
+export const rightVar = createVar();
+
+export const inset = style({
+  inset: insetVar,
+});
+
+export const top = style({
+  top: topVar,
+});
+
+export const bottom = style({
+  bottom: bottomVar,
+});
+
+export const left = style({
+  left: leftVar,
+});
+
+export const right = style({
+  right: topVar,
+});

packages/ui/react/src/styles/utilities/dynamic/max-height.css.ts

@@ -0,0 +1,7 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const maxHeightVar = createVar();
+
+export const maxheight = style({
+  maxHeight: maxHeightVar,
+});

packages/ui/react/src/styles/utilities/dynamic/max-width.css.ts

@@ -0,0 +1,7 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const maxWidthVar = createVar();
+
+export const maxWidth = style({
+  maxWidth: maxWidthVar,
+});

packages/ui/react/src/styles/utilities/dynamic/min-height.css.ts

@@ -0,0 +1,7 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const minHeightVar = createVar();
+
+export const minheight = style({
+  minHeight: minHeightVar,
+});

packages/ui/react/src/styles/utilities/dynamic/min-width.css.ts

@@ -0,0 +1,7 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const minWidthVar = createVar();
+
+export const minWidth = style({
+  minWidth: minWidthVar,
+});

packages/ui/react/src/styles/utilities/dynamic/padding.css.ts

@@ -0,0 +1,45 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const paddingVar = createVar();
+
+export const paddingXVar = createVar();
+
+export const paddingYVar = createVar();
+
+export const paddingTopVar = createVar();
+
+export const paddingBottomVar = createVar();
+
+export const paddingLeftVar = createVar();
+
+export const paddingRightVar = createVar();
+
+export const padding = style({
+  padding: paddingVar,
+});
+
+export const paddingTop = style({
+  paddingTop: paddingTopVar,
+});
+
+export const paddingBottom = style({
+  paddingBottom: paddingBottomVar,
+});
+
+export const paddingLeft = style({
+  paddingLeft: paddingLeftVar,
+});
+
+export const paddingRight = style({
+  paddingRight: paddingRightVar,
+});
+
+export const paddingY = style({
+  paddingTop: paddingYVar,
+  paddingBottom: paddingYVar,
+});
+
+export const paddingX = style({
+  paddingLeft: paddingXVar,
+  paddingRight: paddingXVar,
+});

packages/ui/react/src/styles/utilities/dynamic/width.css.ts

@@ -0,0 +1,7 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const widthVar = createVar();
+
+export const width = style({
+  width: widthVar,
+});

packages/ui/react/src/styles/utilities/enum/align-items.css.ts

@@ -0,0 +1,9 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const alignItems = styleVariants({
+  start: { alignItems: 'flex-start' },
+  center: { alignItems: 'center' },
+  end: { alignItems: 'flex-end' },
+  baseline: { alignItems: 'baseline' },
+  stretch: { alignItems: 'stretch' },
+});

packages/ui/react/src/styles/utilities/enum/background-color.css.ts

@@ -0,0 +1,43 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../vars.css';
+
+export const backgroundColor = styleVariants({
+  archiveBlack: { backgroundColor: vars.color.archive.black },
+  archiveBlue: { backgroundColor: vars.color.archive.blue },
+  archiveBrightGreen: { backgroundColor: vars.color.archive.brightGreen },
+  archiveCoral: { backgroundColor: vars.color.archive.coral },
+  archiveMint: { backgroundColor: vars.color.archive.mint },
+  archivePink: { backgroundColor: vars.color.archive.pink },
+  archivePurple: { backgroundColor: vars.color.archive.purple },
+  archiveYellow: { backgroundColor: vars.color.archive.yellow },
+  gray100: { backgroundColor: vars.color.gray[100] },
+  gray200: { backgroundColor: vars.color.gray[200] },
+  gray300: { backgroundColor: vars.color.gray[300] },
+  gray400: { backgroundColor: vars.color.gray[400] },
+  gray500: { backgroundColor: vars.color.gray[500] },
+  gray600: { backgroundColor: vars.color.gray[600] },
+  gray700: { backgroundColor: vars.color.gray[700] },
+  gray800: { backgroundColor: vars.color.gray[800] },
+  gray900: { backgroundColor: vars.color.gray[900] },
+  gray1000: { backgroundColor: vars.color.gray[1000] },
+  gray1100: { backgroundColor: vars.color.gray[1100] },
+  system100: { backgroundColor: vars.color.system[100] },
+  system200: { backgroundColor: vars.color.system[200] },
+  system300: { backgroundColor: vars.color.system[300] },
+  repoTextBlack: { backgroundColor: vars.color.repo.text.black },
+  repoTextBlue: { backgroundColor: vars.color.repo.text.blue },
+  repoTextBrightGreen: { backgroundColor: vars.color.repo.text.brightGreen },
+  repoTextCoral: { backgroundColor: vars.color.repo.text.coral },
+  repoTextMint: { backgroundColor: vars.color.repo.text.mint },
+  repoTextPink: { backgroundColor: vars.color.repo.text.pink },
+  repoTextPurple: { backgroundColor: vars.color.repo.text.purple },
+  repoTextYellow: { backgroundColor: vars.color.repo.text.yellow },
+  repoBgBlack: { backgroundColor: vars.color.repo.bg.black },
+  repoBgBlue: { backgroundColor: vars.color.repo.bg.blue },
+  repoBgBrightGreen: { backgroundColor: vars.color.repo.bg.brightGreen },
+  repoBgCoral: { backgroundColor: vars.color.repo.bg.coral },
+  repoBgMint: { backgroundColor: vars.color.repo.bg.mint },
+  repoBgPink: { backgroundColor: vars.color.repo.bg.pink },
+  repoBgPurple: { backgroundColor: vars.color.repo.bg.purple },
+  repoBgYellow: { backgroundColor: vars.color.repo.bg.yellow },
+});

packages/ui/react/src/styles/utilities/enum/body.css.ts

@@ -0,0 +1,25 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { letterSpacing } from './letter-spacing.css';
+
+const weight = styleVariants({
+  regular: { fontWeight: 400 },
+  medium: { fontWeight: 500 },
+});
+
+const rowBody = styleVariants({
+  body1: [letterSpacing, { fontSize: 18, lineHeight: '25px' }],
+  body2: [letterSpacing, { fontSize: 16, lineHeight: '22px' }],
+  body3: [letterSpacing, { fontSize: 14, lineHeight: '20px' }],
+  body4: [letterSpacing, { fontSize: 12, lineHeight: '17px' }],
+});
+
+export const body = styleVariants({
+  body1Regular: [rowBody.body1, weight.regular],
+  body1Medium: [rowBody.body1, weight.medium],
+  body2Regular: [rowBody.body2, weight.regular],
+  body2Medium: [rowBody.body2, weight.medium],
+  body3Regular: [rowBody.body3, weight.regular],
+  body3Medium: [rowBody.body3, weight.medium],
+  body4Regular: [rowBody.body4, weight.regular],
+  body4Medium: [rowBody.body4, weight.medium],
+});

packages/ui/react/src/styles/utilities/enum/border-radius.css.ts

@@ -0,0 +1,6 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const borderRadius = styleVariants({
+  normal: { borderRadius: 8 },
+  full: { borderRadius: 9999 },
+});

packages/ui/react/src/styles/utilities/enum/color.css.ts

@@ -0,0 +1,43 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../vars.css';
+
+export const color = styleVariants({
+  archiveBlack: { color: vars.color.archive.black },
+  archiveBlue: { color: vars.color.archive.blue },
+  archiveBrightGreen: { color: vars.color.archive.brightGreen },
+  archiveCoral: { color: vars.color.archive.coral },
+  archiveMint: { color: vars.color.archive.mint },
+  archivePink: { color: vars.color.archive.pink },
+  archivePurple: { color: vars.color.archive.purple },
+  archiveYellow: { color: vars.color.archive.yellow },
+  gray100: { color: vars.color.gray[100] },
+  gray200: { color: vars.color.gray[200] },
+  gray300: { color: vars.color.gray[300] },
+  gray400: { color: vars.color.gray[400] },
+  gray500: { color: vars.color.gray[500] },
+  gray600: { color: vars.color.gray[600] },
+  gray700: { color: vars.color.gray[700] },
+  gray800: { color: vars.color.gray[800] },
+  gray900: { color: vars.color.gray[900] },
+  gray1000: { color: vars.color.gray[1000] },
+  gray1100: { color: vars.color.gray[1100] },
+  system100: { color: vars.color.system[100] },
+  system200: { color: vars.color.system[200] },
+  system300: { color: vars.color.system[300] },
+  repoTextBlack: { color: vars.color.repo.text.black },
+  repoTextBlue: { color: vars.color.repo.text.blue },
+  repoTextBrightGreen: { color: vars.color.repo.text.brightGreen },
+  repoTextCoral: { color: vars.color.repo.text.coral },
+  repoTextMint: { color: vars.color.repo.text.mint },
+  repoTextPink: { color: vars.color.repo.text.pink },
+  repoTextPurple: { color: vars.color.repo.text.purple },
+  repoTextYellow: { color: vars.color.repo.text.yellow },
+  repoBgBlack: { color: vars.color.repo.bg.black },
+  repoBgBlue: { color: vars.color.repo.bg.blue },
+  repoBgBrightGreen: { color: vars.color.repo.bg.brightGreen },
+  repoBgCoral: { color: vars.color.repo.bg.coral },
+  repoBgMint: { color: vars.color.repo.bg.mint },
+  repoBgPink: { color: vars.color.repo.bg.pink },
+  repoBgPurple: { color: vars.color.repo.bg.purple },
+  repoBgYellow: { color: vars.color.repo.bg.yellow },
+});

packages/ui/react/src/styles/utilities/enum/display.css.ts

@@ -0,0 +1,12 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const display = styleVariants({
+  block: { display: 'block' },
+  inline: { display: 'inline' },
+  inlineBlock: { display: 'inline-block' },
+  flex: { display: 'flex' },
+  inlineFlex: { display: 'inline-flex' },
+  grid: { display: 'grid' },
+  inlineGrid: { display: 'inline-grid' },
+  none: { display: 'none' },
+});

packages/ui/react/src/styles/utilities/enum/flex-direction.css.ts

@@ -0,0 +1,8 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const flexDirection = styleVariants({
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
+  rowReverse: { flexDirection: 'row-reverse' },
+  columnReverse: { flexDirection: 'column-reverse' },
+});

packages/ui/react/src/styles/utilities/enum/flex-grow.css.ts

@@ -0,0 +1,8 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const flexGrow = styleVariants({
+  none: { flexGrow: 0 },
+  grow: { flexGrow: 1 },
+});
+
+export type FlexGrow = keyof typeof flexGrow;

packages/ui/react/src/styles/utilities/enum/flex-shrink.css.ts

@@ -0,0 +1,8 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const flexShrink = styleVariants({
+  none: { flexShrink: 0 },
+  shrink: { flexShrink: 1 },
+});
+
+export type FlexShrink = keyof typeof flexShrink;

packages/ui/react/src/styles/utilities/enum/flex-wrap.css.ts

@@ -0,0 +1,7 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const flexWrap = styleVariants({
+  nowrap: { flexWrap: 'nowrap' },
+  wrap: { flexWrap: 'wrap' },
+  wrapReverse: { flexWrap: 'wrap-reverse' },
+});

packages/ui/react/src/styles/utilities/enum/heading.css.ts

@@ -0,0 +1,31 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { letterSpacing } from './letter-spacing.css';
+
+const weight = styleVariants({
+  semibold: { fontWeight: 600 },
+  bold: { fontWeight: 700 },
+});
+
+const rowHeading = styleVariants({
+  h1: [letterSpacing, { fontSize: 28, lineHeight: '39px' }],
+  h2: [letterSpacing, { fontSize: 24, lineHeight: '34px' }],
+  h3: [letterSpacing, { fontSize: 20, lineHeight: '28px' }],
+  h4: [letterSpacing, { fontSize: 18, lineHeight: '25px' }],
+  h5: [letterSpacing, { fontSize: 16, lineHeight: '22px' }],
+  h6: [letterSpacing, { fontSize: 14, lineHeight: '20px' }],
+});
+
+export const heading = styleVariants({
+  h1Semibold: [rowHeading.h1, weight.semibold],
+  h1Bold: [rowHeading.h1, weight.bold],
+  h2Semibold: [rowHeading.h2, weight.semibold],
+  h2Bold: [rowHeading.h2, weight.bold],
+  h3Semibold: [rowHeading.h3, weight.semibold],
+  h3Bold: [rowHeading.h3, weight.bold],
+  h4Semibold: [rowHeading.h4, weight.semibold],
+  h4Bold: [rowHeading.h4, weight.bold],
+  h5Semibold: [rowHeading.h5, weight.semibold],
+  h5Bold: [rowHeading.h5, weight.bold],
+  h6Semibold: [rowHeading.h6, weight.semibold],
+  h6Bold: [rowHeading.h6, weight.bold],
+});

packages/ui/react/src/styles/utilities/enum/index.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
+export * from './align-items.css';
+export * from './background-color.css';
+export * from './body.css';
+export * from './border-radius.css';
+export * from './color.css';
+export * from './display.css';
+export * from './flex-direction.css';
+export * from './flex-shrink.css';
+export * from './flex-grow.css';
+export * from './flex-wrap.css';
+export * from './heading.css';
+export * from './justify-content.css';
+export * from './letter-spacing.css';
+export * from './overflow.css';
+export * from './position.css';
+export * from './text-align.css';
+export * from './truncate.css';
+export * from './wrap.css';