fix: size 0.5 conflict fluid range (#168)

packages/system/src/defaultTheme.test.ts

@@ -0,0 +1,13 @@
+import { defaultTheme } from './defaultTheme'
+
+describe('#defaultTheme', () => {
+  it('checks sizes without suffix have keys greater than 1', () => {
+    Object.entries(defaultTheme.sizes).forEach(([key, value]) => {
+      const numKey = Number(key)
+
+      if (!isNaN(numKey) && value) {
+        expect(numKey).toBeGreaterThan(1)
+      }
+    })
+  })
+})

packages/system/src/defaultTheme.ts

@@ -329,7 +329,9 @@ export const defaultTheme = {
   },
   sizes: {
     ...space,
+    0.5: undefined,
     1: undefined,
+    '0.5s': space[0.5],
     '1s': space[1],
     full: '100%',
     xs: '20rem',

website/pages/docs/sizing/height.mdx

@@ -33,7 +33,7 @@ Use `h="100vh"` to make an element span the entire height of the viewport.
 
 ## Scaled Height
 
-All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scale `1`, you have to specify `1s`.
+All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scales between `0` and `1` due to conflicting with fluid range. You have to add a suffix `s` to target values from theme, like `0.5` becomes `0.5s` and `1` becomes `1s`.
 
 ```jsx preview color=light-blue
 <>

website/pages/docs/sizing/max-height.mdx

@@ -17,7 +17,7 @@ Utilities for setting the maximum height of an element.
 
 ## Scaled Max-Height
 
-All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scale `1`, you have to specify `1s`.
+All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scales between `0` and `1` due to conflicting with fluid range. You have to add a suffix `s` to target values from theme, like `0.5` becomes `0.5s` and `1` becomes `1s`.
 
 ```jsx preview color=light-blue
 <>

website/pages/docs/sizing/max-width.mdx

@@ -17,7 +17,7 @@ Utilities for setting the maximum width of an element
 
 ## Scaled Max-Width
 
-All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scale `1`, you have to specify `1s`.
+All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scales between `0` and `1` due to conflicting with fluid range. You have to add a suffix `s` to target values from theme, like `0.5` becomes `0.5s` and `1` becomes `1s`.
 
 ```jsx preview color=light-blue
 <>

website/pages/docs/sizing/min-height.mdx

@@ -17,7 +17,7 @@ Utilities for setting the minimum height of an element.
 
 ## Scaled Min-Height
 
-All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scale `1`, you have to specify `1s`.
+All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scales between `0` and `1` due to conflicting with fluid range. You have to add a suffix `s` to target values from theme, like `0.5` becomes `0.5s` and `1` becomes `1s`.
 
 ```jsx preview color=light-blue
 <>

website/pages/docs/sizing/width.mdx

@@ -33,7 +33,7 @@ Use `w="100vw"` to make an element span the entire width of the viewport.
 
 ## Scaled Width
 
-All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scale `1`, you have to specify `1s`.
+All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scales between `0` and `1` due to conflicting with fluid range. You have to add a suffix `s` to target values from theme, like `0.5` becomes `0.5s` and `1` becomes `1s`.
 
 ```jsx preview color=light-blue
 <>