refactor: spaces; move default css properties to component styles

atls · May 21, 2024 · 8c65819 · 8c65819
1 parent 4f41714
commit 8c65819
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 45 deletions.
diff --git a/ui/dropdown/src/button/button.styles.ts b/ui/dropdown/src/button/button.styles.ts
@@ -3,12 +3,12 @@ import { prop }    from 'styled-tools'
 import { ifProp }  from 'styled-tools'
 
 export const baseButtonStyles: styleFn = ({ theme }) => ({
-  cursor: theme.spaces.pointer,
-  display: theme.spaces.flex,
-  justifyContent: theme.spaces.center,
-  alignItems: theme.spaces.center,
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
   borderRadius: theme.radii.f9,
-  gap: theme.spaces.s3,
+  gap: theme.spaces.semiTiny,
 })
 
 export const sizeButtonStyles: styleFn = ({ theme }) => ({

diff --git a/ui/dropdown/src/child-container/child-container.styles.ts b/ui/dropdown/src/child-container/child-container.styles.ts
@@ -1,10 +1,10 @@
 import { styleFn } from 'styled-system'
 
 export const baseChildContainerStyles: styleFn = ({ theme }) => ({
-  display: theme.spaces.flex,
-  flexDirection: theme.spaces.column,
-  boxSizing: theme.spaces.borderBox,
-  padding: theme.spaces.s10,
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  padding: theme.spaces.tiny,
 })
 
 export const shapeChildContainerStyles: styleFn = ({ theme }) => ({

diff --git a/ui/input/src/input.styles.ts b/ui/input/src/input.styles.ts
@@ -8,7 +8,7 @@ export const shapeStyles: styleFn = ({ theme }) => ({
   fontWeight: theme.fontWeights.normal,
   fontSize: theme.fontSizes.small.semiLarge,
   borderRadius: theme.radii.f9,
-  padding: theme.spaces.s18,
+  padding: theme.spaces.semiRegular,
 })
 
 const lightAppearanceStyles: styleFn = ({ theme }) => ({

diff --git a/ui/modal/src/backdrop/backdrop.styles.ts b/ui/modal/src/backdrop/backdrop.styles.ts
@@ -1,8 +1,8 @@
 import { styleFn } from 'styled-system'
 
 export const baseBackdropStyles: styleFn = ({ theme }) => ({
-  position: theme.spaces.fixed,
-  zIndex: -1,
+  position: 'fixed',
+  zIndex: theme.spaces.minus,
   bottom: theme.spaces.zero,
   top: theme.spaces.zero,
   left: theme.spaces.zero,

diff --git a/ui/modal/src/child-container/child-container.styles.ts b/ui/modal/src/child-container/child-container.styles.ts
@@ -1,9 +1,9 @@
 import { styleFn } from 'styled-system'
 
 export const baseChildContainerStyles: styleFn = ({ theme }) => ({
-  position: theme.spaces.fixed,
-  display: theme.spaces.flex,
-  flexDirection: theme.spaces.column,
+  position: 'fixed',
+  display: 'flex',
+  flexDirection: 'column',
   zIndex: theme.spaces.s1400,
   bottom: theme.spaces.zero,
   top: theme.spaces.zero,
@@ -14,10 +14,10 @@ export const baseChildContainerStyles: styleFn = ({ theme }) => ({
 
 export const sizeChildContainerStyles: styleFn = ({ theme }) => ({
   width: theme.spaces.superExtra,
-  height: theme.spaces.minContent,
+  height: 'min-content',
   maxWidth: theme.spaces.fullWidthWithPaddingNormal,
   maxHeight: theme.spaces.fullWidthWithPaddingNormal,
-  margin: theme.spaces.auto,
+  margin: 'auto',
   padding: theme.spaces.paddingsNormal,
 })
 

diff --git a/ui/switch/src/icon-switch/thumb/thumb.styles.ts b/ui/switch/src/icon-switch/thumb/thumb.styles.ts
@@ -4,9 +4,9 @@ import { styleFn }                                    from 'styled-system'
 import { ifProp }                                     from 'styled-tools'
 
 export const baseThumbStyles: styleFn = ({ theme }) => ({
-  display: theme.spaces.flex,
-  alignItems: theme.spaces.center,
-  justifyContent: theme.spaces.center,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   ...hyperionBaseThumbStyles,
 })
 

diff --git a/ui/switch/src/theme-switch/theme-switch.styles.ts b/ui/switch/src/theme-switch/theme-switch.styles.ts
@@ -1,18 +1,18 @@
 import { styleFn } from 'styled-system'
 
 export const baseHandleStyles: styleFn = ({ theme }) => ({
-  cursor: theme.spaces.pointer,
-  display: theme.spaces.flex,
+  cursor: 'pointer',
+  display: 'flex',
   gap: theme.spaces.s4,
-  flexDirection: theme.spaces.row,
-  alignItems: theme.spaces.center,
-  justifyContent: theme.spaces.center,
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
 })
 
 export const appearanceHandleStyles: styleFn = ({ theme }) => ({
   backgroundColor: theme.colors.switch.themeSwitch.handle.background,
   boxShadow: theme.shadows.black,
-  border: theme.spaces.none,
+  border: 'none',
 })
 
 export const sizeHandleStyles: styleFn = ({ theme }) => ({

diff --git a/ui/switch/src/theme-switch/thumb/thumb.styles.ts b/ui/switch/src/theme-switch/thumb/thumb.styles.ts
@@ -2,9 +2,9 @@ import { styleFn } from 'styled-system'
 import { ifProp }  from 'styled-tools'
 
 export const baseThumbStyles: styleFn = ({ theme }) => ({
-  display: theme.spaces.flex,
-  alignItems: theme.spaces.center,
-  justifyContent: theme.spaces.center,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 })
 
 export const shapeThumbStyles: styleFn = ({ theme }) => ({

diff --git a/ui/theme/src/theme/spaces.ts b/ui/theme/src/theme/spaces.ts
@@ -1,25 +1,11 @@
 export const spaces = {
-  auto: 'auto',
   zero: 0,
-  s3: 3,
-  s4: 4,
-  s10: 10,
-  s18: 18,
-  s1300: 1300,
-  s1400: 1400,
-  fixed: 'fixed',
-  flex: 'flex',
-  column: 'column',
-  row: 'row',
-  center: 'center',
-  pointer: 'pointer',
-  none: 'none',
-  borderBox: 'border-box',
+  minus: -1,
   normalCount: 3,
   paddingsNormal: '12px 24px',
   fullWidthWithPaddingNormal: 'calc(100% - 24px)',
-  minContent: 'min-content',
   semiTiny: 3,
+  s4: 4,
   tiny: 10,
   semiMicro: 11,
   micro: 12,
@@ -51,4 +37,6 @@ export const spaces = {
   gigantic: 120,
   biggest: 148,
   superExtra: 486,
+  s1300: 1300,
+  s1400: 1400,
 }