https://github.com/lucas-labs/plots

📘 doc blocks for storybook
https://github.com/lucas-labs/plots

react storybook storybook-addon storybook-addon-docs

Last synced: 3 months ago
JSON representation

📘 doc blocks for storybook

• Host: GitHub
• URL: https://github.com/lucas-labs/plots
• Owner: lucas-labs
• Created: 2023-01-18T02:07:48.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-08-07T22:22:20.000Z (over 1 year ago)
• Last Synced: 2024-09-14T11:46:21.749Z (4 months ago)
• Topics: react, storybook, storybook-addon, storybook-addon-docs
• Language: TypeScript
• Homepage:
• Size: 1.14 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        









📘 @lucas-labs/plots | doc blocks for storybook








A small collection of personal storybook documentation blocks I use in my projects to document design tokens, colors, typography, etc in a more visual way 🧉

# 📚 Doc Blocks

- [`ColorPalette`](#colorpalette)

- [`EffectsPalette`](#effectspalette)

- [`SpacingSet`](#spacingset)

- [`TypeSet`](#typeset)

### ColorPalette



#### `usage /`

```tsx

import { ColorPalette } from "@lucas-labs/plots";

export const palette = [

    {

        label: 'text',

        color: '#320b4f'

    },

    {

        label: 'background',

        color: '#feefec'

    },

    {

        name: 'base',

        colors: [

            { label: 'secondary', color: '#9985a7' },

            { label: 'dark', color: '#0d0d0d' },

            { label: 'light', color: '#ffffff' },

            { label: 'disabled', color: '#5c5c5c' },

        ]

    },

    ...

];

```

### EffectsPalette



#### `usage /`

```tsx

import { EffectsPalette } from "@lucas-labs/plots";

export const effects = [

    {

        name: 'shadows',

        effects: [

            {

                label: 'noticeable',

                description: 'diffuse and more noticeable shadow for big elements',

                style: {

                    boxShadow: '0px 24px 24px rgba(50, 11, 79, 0.16)',

                }

            },

            ...

        ]

    }

];

```

### SpacingSet



#### `usage /`

```tsx

import { SpacingSet } from "@lucas-labs/plots";

export const measures = [

    {

        name: 'spacing',

        measures: [

            { label: '.25x', value: '4px' },

            { label: '.5x',  value: '8px' },

            ...

        ]                  

    },

    {

        name: 'radius',

        type: 'radius',

        measures: [

            { label: '1', value: '4px' },

            { label: '2', value: '8px' },

            ...

        ] 

    }

];

```

### TypeSet



#### `usage /`

```tsx

import { TypeSet } from "@lucas-labs/plots";

export const typographies = [

    {

        name: 'headings / display',

        fontFamily: 'Outfit',

        size: '5rem',

        weight: '600',

        lineHeight: '5.5rem',

        letterSpacing: '-0.125rem',

    },

    {

        typographies: [

            {

                name: 'xs',

                fontFamily: 'Inter',

                size: '0.75rem',

                weight: '400',

                lineHeight: 'normal',

                letterSpacing: '0.031rem',

            }, 

            {

                name: 'xs-bold',

                fontFamily: 'Inter',

                size: '0.75rem',

                weight: '600',

                lineHeight: 'normal',

                letterSpacing: 'normal',

            },

        ]

    },

    ...

];

```