build: upgrade @lapidist/styles (#326)

* build: ugprade @lapidist/styles BREAKING CHANGE: changes to types * fix: styleguide * fix: more styleguide fixes
bylapidist · Sep 8, 2020 · 92aa96b · 92aa96b
1 parent 3b94624
commit 92aa96b
Show file tree

Hide file tree

Showing 15 changed files with 291 additions and 152 deletions.
diff --git a/docs/components/HomePage.tsx b/docs/components/HomePage.tsx
@@ -10,41 +10,41 @@ export const HomePage: React.FC<StyleGuideRendererProps> = ({ version }) => (
     <>
         <Logo
             styles={{
-                marginBottom: 3,
-                sizeWidth: 20,
-                breakpoints: { md: { sizeWidth: 32 } }
+                marginBottom: '3',
+                sizeWidth: '20',
+                breakpoints: { md: { sizeWidth: '32' } }
             }}
             animated
         />
         <Heading
             size={1}
             styles={{
-                marginBottom: 12,
+                marginBottom: '12',
                 textColor: { group: 'grey', shade: 'dark' },
-                fontWeight: 'black',
-                fontSize: 6,
-                breakpoints: { md: { fontSize: 8 } }
+                fontWeight: 'bolder',
+                fontSize: '6',
+                breakpoints: { md: { fontSize: '8' } }
             }}
         >
             Lapidist Components
             <Text
                 as="span"
                 styles={{
                     textColor: { group: 'grey', shade: 'base' },
-                    fontWeight: 'bold',
-                    fontSize: 1,
-                    paddingY: 1,
-                    paddingX: 3
+                    fontWeight: 'bolder',
+                    fontSize: '1',
+                    paddingY: '1',
+                    paddingX: '3'
                 }}
             >
                 {version}
             </Text>
         </Heading>
         <Text
             styles={{
-                fontSize: 5,
+                fontSize: '5',
                 textColor: { group: 'grey', shade: 'base' },
-                marginBottom: 16
+                marginBottom: '16'
             }}
         >
             Opinionated{' '}
@@ -75,12 +75,12 @@ export const HomePage: React.FC<StyleGuideRendererProps> = ({ version }) => (
         </Text>
         <Box
             styles={{
-                marginBottom: 64
+                marginBottom: '64'
             }}
         >
             <Link
                 styles={{
-                    fontSize: 5
+                    fontSize: '5'
                 }}
                 href="/#/Getting%20Started"
             >
@@ -89,7 +89,7 @@ export const HomePage: React.FC<StyleGuideRendererProps> = ({ version }) => (
         </Box>
         <Text
             styles={{
-                marginBottom: 32
+                marginBottom: '32'
             }}
         >
             <Text styles={{ textColor: { group: 'grey', shade: 'base' } }}>

diff --git a/docs/components/PathlineRenderer.tsx b/docs/components/PathlineRenderer.tsx
@@ -9,15 +9,15 @@ export interface PathlineRendererProps {
 
 const PathlineRenderer: React.FC<PathlineRendererProps> = ({ children }) => (
     <>
-        <Text as="span" styles={{ marginRight: 1 }}>
+        <Text as="span" styles={{ marginRight: '1' }}>
             📋
         </Text>
         <Link
             href="javascript:;"
             onClick={(): unknown => children && copy(children.toString())}
             title="Copy to clipboard"
             styles={{
-                fontSize: 2,
+                fontSize: '2',
                 textColor: { group: 'grey', shade: 'base' },
                 borderBottomColor: { group: 'grey', shade: 'light' },
                 pseudo: {

diff --git a/docs/components/SectionRenderer.tsx b/docs/components/SectionRenderer.tsx
@@ -24,21 +24,21 @@ const SectionRenderer: React.FC<SectionRendererProps> = (props) => {
 
     return (
         <>
-            <Box styles={{ marginBottom: 16 }}>
+            <Box styles={{ marginBottom: '16' }}>
                 <Logo
                     styles={{
-                        marginBottom: 3,
-                        sizeWidth: 16,
-                        breakpoints: { md: { sizeWidth: 20 } }
+                        marginBottom: '3',
+                        sizeWidth: '16',
+                        breakpoints: { md: { sizeWidth: '20' } }
                     }}
                     animated
                 />
                 <Heading
                     size={1}
                     styles={{
                         textColor: { group: 'grey', shade: 'dark' },
-                        fontWeight: 'black',
-                        fontSize: 6
+                        fontWeight: 'bolder',
+                        fontSize: '6'
                     }}
                 >
                     Lapidist Components

diff --git a/docs/components/StyleGuideRenderer.tsx b/docs/components/StyleGuideRenderer.tsx
@@ -18,12 +18,12 @@ const StyleGuideRenderer: React.FC<StyleGuideRendererProps> = ({
     <ThemeProvider>
         <Box
             styles={{
-                padding: 6,
+                padding: '6',
                 marginX: 'auto',
                 containerMaxWidth: 'xxl',
                 breakpoints: {
                     md: {
-                        padding: 12
+                        padding: '12'
                     }
                 }
             }}