Add colors and typography stories

libs/tailwindcss-config/src/theme.js

@@ -38,7 +38,6 @@ module.exports = {
     'light-gray-50': '#F5F8FA', //off-white - https://blueprintjs.com/docs/#core/colors
     'gray-50': '#BFCCD6', // muted - https://blueprintjs.com/docs/#core/colors
     coral: '#FF6057',
-    // below colors are not defined as atoms
     vega: {
       yellow: '#EDFF22',
       pink: '#FF2D5E',
@@ -51,10 +50,12 @@ module.exports = {
       progress: '#FFF',
       success: '#26FF8A',
       help: '#494949',
-      background: {
-        danger: '#9E0025', // for white text
-      },
-    } /*,
+    },
+    'intent-background': {
+      danger: '#9E0025', // for white text
+    },
+
+    /*,
     data: {
       red: {
         white: {
@@ -73,7 +74,7 @@ module.exports = {
           900: '#FF6057',
         },
       },
-    },*/,
+    },*/
   },
   spacing: {
     0: '0px',
@@ -86,7 +87,7 @@ module.exports = {
   },
   backgroundColor: ({ theme }) => ({
     transparent: 'transparent',
-    dark: theme('colors.dark'),
+    dark: theme('colors.neutral.753'),
     black: '#000',
     white: theme('colors.white'),
     danger: theme('colors.intent.background.danger'),

libs/ui-toolkit/src/primitives/colors.stories.mdx

@@ -0,0 +1,87 @@
+import {
+  Meta,
+  ColorPalette,
+  ColorItem,
+  Typeset,
+} from '@storybook/addon-docs/blocks';
+
+import { theme } from '@vegaprotocol/tailwindcss-config';
+
+<Meta title="Primitives/Colors" />
+
+# Primitives
+
+This project uses Tailwindcss so a lot of colour props are passed in as CSS classes that
+Tailwind applies styling to i.e. `text-blue-500` to use the primary blue. You can find the
+full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#default-color-palette).
+
+## Colours
+
+### Shared
+
+<ColorPalette>
+  <ColorItem
+    title="theme.color.black"
+    subtitle="White"
+    colors={[theme.colors.white]}
+  />
+  <ColorItem
+    title="theme.color.black"
+    subtitle="Black"
+    colors={[theme.colors.black]}
+  />
+  <ColorItem
+    title="theme.color.coral"
+    subtitle="Coral"
+    colors={[theme.colors.coral]}
+  />
+  <ColorItem
+    title="theme.color.neutral"
+    subtitle="Neutral"
+    colors={{
+      593: theme.colors.neutral[593],
+      753: theme.colors.neutral[753],
+      800: theme.colors.neutral[800],
+    }}
+  />
+</ColorPalette>
+
+### Vega
+
+<ColorPalette>
+  <ColorItem
+    title="theme.color.vega"
+    subtitle="Vega colors"
+    colors={theme.colors.vega}
+  />
+</ColorPalette>
+
+### Intent
+
+<ColorPalette>
+  <ColorItem
+    title="theme.color.intent"
+    subtitle="Intent"
+    colors={theme.colors.intent}
+  />
+  <ColorItem
+    title="theme.color.intent-background"
+    subtitle="Intent background"
+    colors={theme.colors['intent-background']}
+  />
+</ColorPalette>
+
+### Background
+
+<ColorPalette>
+  <ColorItem
+    title="theme.color.backgroundColor"
+    subtitle="Intent backgroundColor"
+    colors={{
+      dark: theme.colors.neutral[753],
+      black: theme.colors.black,
+      white: theme.colors.white,
+      danger: theme.colors['intent-background'].danger,
+    }}
+  />
+</ColorPalette>

libs/ui-toolkit/src/primitives/typography.stories.mdx

@@ -0,0 +1,123 @@
+import {
+  Meta,
+  ColorPalette,
+  ColorItem,
+  Typeset,
+  Canvas,
+} from '@storybook/addon-docs/blocks';
+
+import { theme } from '@vegaprotocol/tailwindcss-config';
+
+<Meta title="Primitives/Typography" />
+
+# Typography
+
+## Headers
+
+### H1
+
+<span>
+  {theme.fontSize.h1[0]} / {theme.fontSize.h1[1].lineHeight}, letterSpacing:{' '}
+  {theme.fontSize.h1[1].letterSpacing}{' '}
+</span>
+<Canvas>
+  <div class="text-h1">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>
+
+### H2
+
+<span>
+  {theme.fontSize.h2[0]} / {theme.fontSize.h2[1].lineHeight}, letterSpacing:{' '}
+  {theme.fontSize.h2[1].letterSpacing}{' '}
+</span>
+<Canvas>
+  <div class="text-h2">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>
+
+### H3
+
+<span>
+  {theme.fontSize.h3[0]} / {theme.fontSize.h3[1].lineHeight}, letterSpacing:{' '}
+  {theme.fontSize.h3[1].letterSpacing}{' '}
+</span>
+<Canvas>
+  <div class="text-h3">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>
+
+### H4
+
+<span>
+  {theme.fontSize.h4[0]} / {theme.fontSize.h4[1].lineHeight}, letterSpacing:{' '}
+  {theme.fontSize.h4[1].letterSpacing}{' '}
+</span>
+<Canvas>
+  <div class="text-h4">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>
+
+### H5
+
+<span>
+  {theme.fontSize.h5[0]} / {theme.fontSize.h5[1].lineHeight}, letterSpacing:{' '}
+  {theme.fontSize.h5[1].letterSpacing}{' '}
+</span>
+<Canvas>
+  <div class="text-h5">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>
+
+## Body
+
+### Normal
+
+<span>
+  {theme.fontSize.body[0]} / {theme.fontSize.body[1]}
+</span>
+<Canvas>
+  <div class="text-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>
+
+### Large
+
+<span>
+  {theme.fontSize['body-large'][0]} / {theme.fontSize['body-large'][1]}
+</span>
+<Canvas>
+  <div class="text-body-large">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>
+
+## UI
+
+### Normal
+
+<span>
+  {theme.fontSize.body[0]} / {theme.fontSize.body[1]}
+</span>
+<Canvas>
+  <div class="text-ui">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>
+
+### Small
+
+<span>
+  {theme.fontSize['ui-small'][0]} / {theme.fontSize['ui-small'][1]}
+</span>
+<Canvas>
+  <div class="text-ui-small">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </div>
+</Canvas>

libs/ui-toolkit/tailwind.config.js

@@ -4,7 +4,7 @@ const theme = require('../tailwindcss-config/src/theme');
 
 module.exports = {
   content: [
-    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),
+    join(__dirname, 'src/**/*.{ts,tsx,html,mdx}'),
     join(__dirname, '.storybook/preview.js'),
     ...createGlobPatternsForDependencies(__dirname),
   ],