Merge pull request #99 from decentdao/decent-1867-button-text-style-fix

fix text styles on buttons

Author: dacebt

design/tokens/components/button/theme/button.sizes.ts

@@ -1,33 +1,33 @@
 export default {
   lg: {
-    apply: 'utility-styles-button-large',
+    apply: 'button-large',
     height: '4.5rem',
     padding: '1.5rem 2.5rem'
   },
   base: {
-    apply: 'utility-styles-button-base',
+    apply: 'button-base',
     height: '2.75rem',
     padding: '0.75rem 1rem',
   },
   sm: {
-    apply: 'utility-styles-button-small',
+    apply: 'button-small',
     height: '1.875rem',
     padding: '0.25rem .5rem'
   },
   'icon-lg': {
-    apply: 'utility-styles-icon-button-large',
+    apply: 'button-large',
     height: '2.5rem',
     width: '2.5rem',
     borderRadius: '0.5rem'
   },
   'icon-md': {
-    apply: 'utility-styles-icon-button-base',
+    apply: 'button-base',
     height: '1.75rem',
     width: '1.75rem',
     borderRadius: '0.25rem'
   },
   'icon-sm': {
-    apply: 'utility-styles-icon-button-small',
+    apply: 'button-small',
     height: '1.5rem',
     width: '1.5rem',
     borderRadius: '0.25rem'

design/tokens/components/iconButton/theme/iconButton.sizes.ts

@@ -1,41 +1,41 @@
 export default {
   'lg': {
-    apply: 'utility-styles-icon-button-large',
+    apply: 'button-large',
     height: '2rem',
     width: '2rem',
     padding: '0.5rem',
     borderRadius: '0.5rem'
   },
   'base': {
-    apply: 'utility-styles-icon-button-base',
+    apply: 'button-base',
     height: '1.5rem',
     width: '1.5rem',
     padding: '0.25rem',
     borderRadius: '0.25rem'
   },
   'sm': {
-    apply: 'utility-styles-icon-button-small',
+    apply: 'button-small',
     height: '1.25rem',
     width: '1.25rem',
     padding: '0.25rem',
     borderRadius: '0.25rem'
   },
   'icon-lg': {
-    apply: 'utility-styles-icon-button-large',
+    apply: 'button-large',
     height: '2rem',
     width: '2rem',
     padding: '0.5rem',
     borderRadius: '0.5rem'
   },
   'icon-md': {
-    apply: 'utility-styles-icon-button-base',
+    apply: 'button-base',
     height: '1.5rem',
     width: '1.5rem',
     padding: '0.25rem',
     borderRadius: '0.25rem'
   },
   'icon-sm': {
-    apply: 'utility-styles-icon-button-small',
+    apply: 'button-small',
     height: '1.25rem',
     width: '1.25rem',
     padding: '0.25rem',

design/tokens/stories/components/DisplayTypography.tsx

@@ -32,7 +32,7 @@ export function DisplayTypography() {
                     <Text textStyle="label-large" color="grayscale.400">
                       {fontProperty}:
                     </Text>
-                    <Text>{value}</Text>
+                    <Text>{JSON.stringify(value)}</Text>
                   </Flex>
                 )
               })}