Skip to content

Commit

Permalink
Update docs for colour palette
Browse files Browse the repository at this point in the history
  • Loading branch information
@VincentSmedinga
VincentSmedinga committed Nov 11, 2024
1 parent a256cf2 commit 660986e
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 79 deletions.
45 changes: 31 additions & 14 deletions storybook/src/docs/components/ColorPalette.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,55 @@
import './color-palette.css'
import clsx from 'clsx'
import { forwardRef } from 'react'
import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'

export type DivProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>

const ColorPaletteRoot = forwardRef(({ children, ...restProps }: DivProps, ref: ForwardedRef<HTMLDivElement>) => (
<div {...restProps} ref={ref} className="ams-storybook-color-palette">
<div {...restProps} ref={ref} className="ams-docs-color-palette">
{children}
</div>
))

ColorPaletteRoot.displayName = 'ColorPalette'

const ColorPaletteSection = ({ children }: DivProps) => (
<div className="ams-storybook-color-palette__section">{children}</div>
type ColorPaletteSwatchProps = {
color: Record<'100' | '300' | '600' | '900' | '1000', string>
name: string
}

const ColorPaletteSwatch = ({ color, name }: ColorPaletteSwatchProps) => (
<div className={clsx('ams-docs-color-swatch', `ams-docs-color-swatch--${name}`)}>
<code className="ams-docs-color-code">ams.brand.color.{name}</code>
{name === 'neutral' && <ColorPaletteTile color={color['100']} level="100" />}
<ColorPaletteTile color={color['300']} level="300" />
<ColorPaletteTile color={color['600']} level="600" />
<ColorPaletteTile color={color['900']} level="900" />
{name === 'neutral' && <ColorPaletteTile color={color['1000']} level="1000" />}
</div>
)

ColorPaletteSection.displayName = 'ColorPalette.Section'
ColorPaletteSwatch.displayName = 'ColorPalette.Swatch'

type ColorPaletteTileProps = {
color: string
name: string
color: string | undefined
level: string
}

const ColorPaletteTile = ({ name, color }: ColorPaletteTileProps) => (
<div className="ams-storybook-color-palette__tile">
<div className="ams-storybook-color-palette__example" style={{ backgroundColor: color }} />
<dl className="sb-unstyled ams-storybook-color-palette__description">
<dt className="ams-storybook-color-palette__name">{name}</dt>
<dd className="ams-storybook-color-palette__color">{color}</dd>
</dl>
const ColorPaletteTile = ({ color, level }: ColorPaletteTileProps) => (
<div className={clsx('ams-docs-color-tile', `ams-docs-color-tile--${level}`)}>
{color && (
<>
<code className="ams-docs-color-code">{level}</code>
<div className="ams-docs-color-sample" style={{ backgroundColor: color }} />
</>
)}
</div>
)

ColorPaletteTile.displayName = 'ColorPalette.Tile'

export const ColorPalette = Object.assign(ColorPaletteRoot, { Section: ColorPaletteSection, Tile: ColorPaletteTile })
export const ColorPalette = Object.assign(ColorPaletteRoot, {
Swatch: ColorPaletteSwatch,
Tile: ColorPaletteTile,
})
59 changes: 22 additions & 37 deletions storybook/src/docs/components/color-palette.css
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,35 @@
.ams-storybook-color-palette {
display: flex;
flex-direction: column;
gap: 2rem;
.ams-docs-color-palette {
align-items: center;
display: grid;
gap: 4rem;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.ams-storybook-color-palette__section {
align-items: start;
.ams-docs-color-swatch {
display: grid;
gap: 2rem;
gap: 0 2px;
grid-template-columns: repeat(5, 1fr);
}

.ams-storybook-color-palette__tile {
display: flex;
flex-direction: column;
gap: 0.25rem;
> :nth-child(1) {
grid-column: 1 / -1;
}
}

.ams-storybook-color-palette__example {
aspect-ratio: var(--ams-aspect-ratio-x-wide);
border: 0.0625rem solid rgb(0 0 0 / 12.5%);
grid-area: example;
.ams-docs-color-code {
display: block;
font-size: 13px;
padding-block-end: 0.5rem;
text-align: center;
}

.ams-storybook-color-palette__description,
.ams-storybook-color-palette__name,
.ams-storybook-color-palette__color {
margin-block: 0;
margin-inline: 0;
padding-block: 0;
padding-inline: 0;
:not(.ams-docs-color-swatch--neutral) > .ams-docs-color-tile--600 {
grid-column: span 3;
}

.ams-storybook-color-palette__description {
color: #000;
column-gap: 1ch;
display: flex;
flex-wrap: wrap;
font-family: "Amsterdam Sans", "Arial", sans-serif;
justify-content: space-between;
}

.ams-storybook-color-palette__name {
font-weight: 800;
}
.ams-docs-color-sample {
block-size: 6rem;

.ams-storybook-color-palette__color {
text-align: end;
.ams-docs-color-swatch--neutral > .ams-docs-color-tile--100 & {
box-shadow: inset 0 0 0 0.0625rem rgb(0 0 0 / 12.5%);
}
}
40 changes: 12 additions & 28 deletions storybook/src/foundation/design-tokens/colour.docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,23 @@
import tokens from "@amsterdam/design-system-tokens/dist/index.json";
import { Meta } from "@storybook/blocks";
import { ColorPalette } from "../../docs/components/ColorPalette";
import { StatusBadge } from "../../docs/components/StatusBadge";

<Meta title="Brand/Design Tokens/Colour" />

<StatusBadge reason="The set of available colours and their names will change." />

# Colour

The basic colours of Amsterdam are white, red, and black.
We have 8 additional colours and 3 shades of grey.
Our 9 colours have 3 shades each.
Neutrals come in 5 shades.

<ColorPalette>
<ColorPalette.Section>
<ColorPalette.Tile color={tokens.ams.color["primary-white"]} name="white" />
<ColorPalette.Tile color={tokens.ams.color["primary-red"]} name="red" />
<ColorPalette.Tile color={tokens.ams.color["primary-black"]} name="black" />
</ColorPalette.Section>
<ColorPalette.Section>
<ColorPalette.Tile color={tokens.ams.color["green"]} name="green" />
<ColorPalette.Tile color={tokens.ams.color["dark-green"]} name="dark green" />
<ColorPalette.Tile color={tokens.ams.color["blue"]} name="blue" />
<ColorPalette.Tile color={tokens.ams.color["primary-blue"]} name="dark blue" />
<ColorPalette.Tile color={tokens.ams.color["dark-blue"]} name="darker blue" />
</ColorPalette.Section>
<ColorPalette.Section>
<ColorPalette.Tile color={tokens.ams.color["yellow"]} name="yellow" />
<ColorPalette.Tile color={tokens.ams.color["orange"]} name="orange" />
<ColorPalette.Tile color={tokens.ams.color["magenta"]} name="magenta" />
<ColorPalette.Tile color={tokens.ams.color["purple"]} name="purple" />
</ColorPalette.Section>
<ColorPalette.Section>
<ColorPalette.Tile color={tokens.ams.color["neutral-grey1"]} name="light grey" />
<ColorPalette.Tile color={tokens.ams.color["neutral-grey2"]} name="grey" />
<ColorPalette.Tile color={tokens.ams.color["neutral-grey3"]} name="dark grey" />
</ColorPalette.Section>
<ColorPalette.Swatch color={tokens.ams.brand.color.red} name="red" />
<ColorPalette.Swatch color={tokens.ams.brand.color.azure} name="azure" />
<ColorPalette.Swatch color={tokens.ams.brand.color.blue} name="blue" />
<ColorPalette.Swatch color={tokens.ams.brand.color.yellow} name="yellow" />
<ColorPalette.Swatch color={tokens.ams.brand.color.lime} name="lime" />
<ColorPalette.Swatch color={tokens.ams.brand.color.green} name="green" />
<ColorPalette.Swatch color={tokens.ams.brand.color.orange} name="orange" />
<ColorPalette.Swatch color={tokens.ams.brand.color.magenta} name="magenta" />
<ColorPalette.Swatch color={tokens.ams.brand.color.purple} name="purple" />
<ColorPalette.Swatch color={tokens.ams.brand.color.neutral} name="neutral" />
</ColorPalette>

0 comments on commit 660986e

Please sign in to comment.