diff --git a/packages/ui/react/src/styles/utilities/dynamic/flex-basis.css.ts b/packages/ui/react/src/styles/utilities/dynamic/flex-basis.css.ts new file mode 100644 index 0000000..1b38056 --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/gap.css.ts b/packages/ui/react/src/styles/utilities/dynamic/gap.css.ts new file mode 100644 index 0000000..b50286b --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/height.css.ts b/packages/ui/react/src/styles/utilities/dynamic/height.css.ts new file mode 100644 index 0000000..6eaebc4 --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/index.ts b/packages/ui/react/src/styles/utilities/dynamic/index.ts new file mode 100644 index 0000000..168f677 --- /dev/null +++ b/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'; diff --git a/packages/ui/react/src/styles/utilities/dynamic/inset.css.ts b/packages/ui/react/src/styles/utilities/dynamic/inset.css.ts new file mode 100644 index 0000000..4556e83 --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/max-height.css.ts b/packages/ui/react/src/styles/utilities/dynamic/max-height.css.ts new file mode 100644 index 0000000..60cf5d8 --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/max-width.css.ts b/packages/ui/react/src/styles/utilities/dynamic/max-width.css.ts new file mode 100644 index 0000000..1e488dc --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/min-height.css.ts b/packages/ui/react/src/styles/utilities/dynamic/min-height.css.ts new file mode 100644 index 0000000..ae0e9a0 --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/min-width.css.ts b/packages/ui/react/src/styles/utilities/dynamic/min-width.css.ts new file mode 100644 index 0000000..0f9ff2a --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/padding.css.ts b/packages/ui/react/src/styles/utilities/dynamic/padding.css.ts new file mode 100644 index 0000000..ccae837 --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/dynamic/width.css.ts b/packages/ui/react/src/styles/utilities/dynamic/width.css.ts new file mode 100644 index 0000000..6642f51 --- /dev/null +++ b/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, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/align-items.css.ts b/packages/ui/react/src/styles/utilities/enum/align-items.css.ts new file mode 100644 index 0000000..a919004 --- /dev/null +++ b/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' }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/background-color.css.ts b/packages/ui/react/src/styles/utilities/enum/background-color.css.ts new file mode 100644 index 0000000..513c266 --- /dev/null +++ b/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 }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/body.css.ts b/packages/ui/react/src/styles/utilities/enum/body.css.ts new file mode 100644 index 0000000..4dfd395 --- /dev/null +++ b/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], +}); diff --git a/packages/ui/react/src/styles/utilities/enum/border-radius.css.ts b/packages/ui/react/src/styles/utilities/enum/border-radius.css.ts new file mode 100644 index 0000000..5023e00 --- /dev/null +++ b/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 }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/color.css.ts b/packages/ui/react/src/styles/utilities/enum/color.css.ts new file mode 100644 index 0000000..80d4f1f --- /dev/null +++ b/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 }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/display.css.ts b/packages/ui/react/src/styles/utilities/enum/display.css.ts new file mode 100644 index 0000000..3e76090 --- /dev/null +++ b/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' }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/flex-direction.css.ts b/packages/ui/react/src/styles/utilities/enum/flex-direction.css.ts new file mode 100644 index 0000000..e80bae7 --- /dev/null +++ b/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' }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/flex-grow.css.ts b/packages/ui/react/src/styles/utilities/enum/flex-grow.css.ts new file mode 100644 index 0000000..adc1843 --- /dev/null +++ b/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; diff --git a/packages/ui/react/src/styles/utilities/enum/flex-shrink.css.ts b/packages/ui/react/src/styles/utilities/enum/flex-shrink.css.ts new file mode 100644 index 0000000..6e756b0 --- /dev/null +++ b/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; diff --git a/packages/ui/react/src/styles/utilities/enum/flex-wrap.css.ts b/packages/ui/react/src/styles/utilities/enum/flex-wrap.css.ts new file mode 100644 index 0000000..9968355 --- /dev/null +++ b/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' }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/heading.css.ts b/packages/ui/react/src/styles/utilities/enum/heading.css.ts new file mode 100644 index 0000000..18d221e --- /dev/null +++ b/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], +}); diff --git a/packages/ui/react/src/styles/utilities/enum/index.ts b/packages/ui/react/src/styles/utilities/enum/index.ts new file mode 100644 index 0000000..0c2cc14 --- /dev/null +++ b/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'; diff --git a/packages/ui/react/src/styles/utilities/enum/justify-content.css.ts b/packages/ui/react/src/styles/utilities/enum/justify-content.css.ts new file mode 100644 index 0000000..70ee914 --- /dev/null +++ b/packages/ui/react/src/styles/utilities/enum/justify-content.css.ts @@ -0,0 +1,8 @@ +import { styleVariants } from '@vanilla-extract/css'; + +export const justifyContent = styleVariants({ + start: { justifyContent: 'flex-start' }, + center: { justifyContent: 'center' }, + end: { justifyContent: 'flex-end' }, + spaceBetween: { justifyContent: 'space-between' }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/letter-spacing.css.ts b/packages/ui/react/src/styles/utilities/enum/letter-spacing.css.ts new file mode 100644 index 0000000..9676d3e --- /dev/null +++ b/packages/ui/react/src/styles/utilities/enum/letter-spacing.css.ts @@ -0,0 +1,5 @@ +import { style } from '@vanilla-extract/css'; + +export const letterSpacing = style({ + letterSpacing: 0, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/overflow.css.ts b/packages/ui/react/src/styles/utilities/enum/overflow.css.ts new file mode 100644 index 0000000..6e11013 --- /dev/null +++ b/packages/ui/react/src/styles/utilities/enum/overflow.css.ts @@ -0,0 +1,31 @@ +import { styleVariants } from '@vanilla-extract/css'; + +export const overflow = styleVariants({ + visible: { overflow: 'visible' }, + hidden: { overflow: 'hidden' }, + clip: { overflow: 'clip' }, + scroll: { overflow: 'scroll' }, + auto: { overflow: 'auto' }, +}); + +export type Overflow = keyof typeof overflow; + +export const overflowX = styleVariants({ + visible: { overflowX: 'visible' }, + hidden: { overflowX: 'hidden' }, + clip: { overflowX: 'clip' }, + scroll: { overflowX: 'scroll' }, + auto: { overflowX: 'auto' }, +}); + +export type OverflowX = keyof typeof overflowX; + +export const overflowY = styleVariants({ + visible: { overflowY: 'visible' }, + hidden: { overflowY: 'hidden' }, + clip: { overflowY: 'clip' }, + scroll: { overflowY: 'scroll' }, + auto: { overflowY: 'auto' }, +}); + +export type OverflowY = keyof typeof overflowY; diff --git a/packages/ui/react/src/styles/utilities/enum/position.css.ts b/packages/ui/react/src/styles/utilities/enum/position.css.ts new file mode 100644 index 0000000..4035dcd --- /dev/null +++ b/packages/ui/react/src/styles/utilities/enum/position.css.ts @@ -0,0 +1,11 @@ +import { styleVariants } from '@vanilla-extract/css'; + +export const position = styleVariants({ + static: { position: 'static' }, + relative: { position: 'relative' }, + absolute: { position: 'absolute' }, + fixed: { position: 'fixed' }, + sticky: { position: 'sticky' }, +}); + +export type Position = keyof typeof position; diff --git a/packages/ui/react/src/styles/utilities/enum/text-align.css.ts b/packages/ui/react/src/styles/utilities/enum/text-align.css.ts new file mode 100644 index 0000000..f3f4583 --- /dev/null +++ b/packages/ui/react/src/styles/utilities/enum/text-align.css.ts @@ -0,0 +1,7 @@ +import { styleVariants } from '@vanilla-extract/css'; + +export const textAlign = styleVariants({ + left: { textAlign: 'left' }, + center: { textAlign: 'center' }, + right: { textAlign: 'right' }, +}); diff --git a/packages/ui/react/src/styles/utilities/enum/truncate.css.ts b/packages/ui/react/src/styles/utilities/enum/truncate.css.ts new file mode 100644 index 0000000..424e5cf --- /dev/null +++ b/packages/ui/react/src/styles/utilities/enum/truncate.css.ts @@ -0,0 +1,10 @@ +import { style } from '@vanilla-extract/css'; +import { wrap } from './wrap.css'; + +export const truncate = style([ + wrap.nowrap, + { + overflow: 'hidden', + textOverflow: 'ellipsis', + }, +]); diff --git a/packages/ui/react/src/styles/utilities/enum/wrap.css.ts b/packages/ui/react/src/styles/utilities/enum/wrap.css.ts new file mode 100644 index 0000000..6ef15f7 --- /dev/null +++ b/packages/ui/react/src/styles/utilities/enum/wrap.css.ts @@ -0,0 +1,6 @@ +import { styleVariants } from '@vanilla-extract/css'; + +export const wrap = styleVariants({ + wrap: { whiteSpace: 'normal' }, + nowrap: { whiteSpace: 'nowrap' }, +}); diff --git a/packages/ui/react/src/styles/utilities/index.ts b/packages/ui/react/src/styles/utilities/index.ts index 88c99b0..664fd35 100644 --- a/packages/ui/react/src/styles/utilities/index.ts +++ b/packages/ui/react/src/styles/utilities/index.ts @@ -1,8 +1,3 @@ /* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */ -export * from './body.css'; -export * from './color.css'; -export * from './heading.css'; -export * from './letter-spacing.css'; -export * from './text-align.css'; -export * from './truncate.css'; -export * from './wrap.css'; +export * from './dynamic'; +export * from './enum';