Skip to content

Commit

Permalink
chore: add 3000 colors to Storybook (#18328)
Browse files Browse the repository at this point in the history
  • Loading branch information
daibhin authored Nov 1, 2023
1 parent 2adc2f9 commit 50811b4
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
133 changes: 133 additions & 0 deletions frontend/src/lib/lemon-ui/colors.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Meta } from '@storybook/react'
import { Popover } from './Popover/Popover'
import { useState } from 'react'
import { LemonTable } from './LemonTable'

const meta: Meta = {
title: 'Lemon UI/Colors',
Expand All @@ -14,6 +15,7 @@ const meta: Meta = {
tags: ['autodocs'],
}
export default meta

const colorGroups = {
primary: ['primary-highlight', 'primary-light', 'primary', 'primary-dark'],
danger: ['danger-highlight', 'danger-light', 'danger', 'danger-dark'],
Expand All @@ -27,6 +29,65 @@ const colorGroups = {
light: ['white', 'light'],
}

const preThousand = [
'primary-highlight',
'primary-light',
'primary',
'primary-dark',
'danger-highlight',
'danger-lighter',
'danger-light',
'danger',
'danger-dark',
'warning-highlight',
'warning-light',
'warning',
'warning-dark',
'success-highlight',
'success-light',
'success',
'success-dark',
'primary-alt-highlight',
'primary-alt',
'primary-alt-dark',
'default',
'default-dark',
'muted',
'muted-dark',
'muted-alt',
'muted-alt-dark',
'mark',
'white',
'bg-light',
'side',
'mid',
'border',
'border-light',
'border-bold',
'border-active',
'transparent',
'brand-blue',
'brand-red',
'brand-yellow',
'brand-key',
]

const threeThousand = [
'text-3000',
'muted-3000',
'trace-3000',
'primary-3000',
'primary-3000-hover',
'secondary-3000',
'secondary-3000-hover',
'accent-3000',
'bg-3000',
'border-3000',
'border-bold-3000',
'glass-bg-3000',
'glass-border-3000',
]

export function ColorPalette(): JSX.Element {
const [hover, setHover] = useState<string>()
return (
Expand Down Expand Up @@ -55,3 +116,75 @@ export function ColorPalette(): JSX.Element {
</div>
)
}

export function AllPreThousandColorOptions(): JSX.Element {
return (
<LemonTable
dataSource={preThousand.map((color) => ({ name: color, color }))}
columns={[
{
title: 'Class name',
key: 'name',
dataIndex: 'name',
render: function RenderName(name) {
return name
},
},
{
title: 'Color',
key: 'color',
dataIndex: 'color',
render: function RenderColor(color) {
return <div className={`bg-${color as string} flex-1 border rounded h-8 w-8`} />
},
},
]}
/>
)
}

export function AllThreeThousandColorOptions(): JSX.Element {
return (
<LemonTable
dataSource={threeThousand.map((color) => ({ name: color, color }))}
columns={[
{
title: 'Class name',
key: 'name',
dataIndex: 'name',
render: function RenderName(name) {
return name
},
},
{
title: 'Light mode',
key: 'light',
dataIndex: 'color',
render: function RenderColor(color) {
return (
<div
className={'bg-bg-3000-light flex items-center justify-center border rounded h-16 w-16'}
>
<div className={`bg-${color as string}-light border rounded h-8 w-8`} />
</div>
)
},
},
{
title: 'Dark mode',
key: 'dark',
dataIndex: 'color',
render: function RenderColor(color) {
return (
<div
className={'bg-bg-3000-dark flex items-center justify-center border rounded h-16 w-16'}
>
<div className={`bg-${color as string}-dark border rounded h-8 w-8`} />
</div>
)
},
},
]}
/>
)
}

0 comments on commit 50811b4

Please sign in to comment.