Designer Shows styling layer

[andrezero]

Why

As an author setting up designer decisions based docs I want to customize the docs styles so that they best serve as a platform to showcase my design decisions.

Note we make no assumptions over what that is. We want to provide full customization. The style of the visualizations (and the layouts) should be able to range all the way:

• from "aligned" with the visual language being documented to "constrasting" with it
• from "seamless" with the other docs contents OR visually "contained" or "highlighted"

What

⚠ Pending clarification on #27 and guides for Astro vs Starlight

Cleanup first: decouple docs and Show styles

• use .dd- classnames and --dd- vars only inside @noodlestan/designer-shows
• in the docs use .ddocs- and --ddocs- instead
• complete missing scales
• check for dead code, typos, unfished wips

Move astro/styles/base.css to the root styles/tokens.css

Update imports in the integration and in package.json

Refine .dd- vars

• Seperate into files space, color, typography, layout, viz/*
• Import them all from base (relative imports './color.css)
  • Except for default-typefaces.css (that should be opt-in in the integration)
• Use both root, backdrop and data [data-theme='light']
• Align tokens with sample data (we will dog 🐶 🥫 food this!)
  • Use rem
  • Use Archivo, Consolas, and Playfair
• Add more tokens to sample data if needed (it is needed!)

Document

Add a "Customizing visualzations" guide

Be brief in the guide, expand in the reference (below)

Show how to

• costumise vars
• configure starlight (if you are using Starlight)

Include screenshots to illustrate this (astro/starlight boilerplates)

Include how to import fonts (explain how font names flow to Starlight and DD)

Add API/designer-shows/Styles

Document direct import

List vars files here (link to GH)
Explain only root tokens (space units, hues, tpography choices)

• 💡 we can probably use <ShowDecisions filter.... token /> here
• 🤔 editing them live would be amazing as well

Example usage at the bottom

Links

• boilerplates
• astro integration
• guide

[andrezero]

Docs Starlight

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    --sl-color-bg-nav: hsl(180, 6%, 6%);
    --sl-font: Archivo;
    --sl-font-mono: Consolas;
    --sl-text-h1: 3.025rem;
    --sl-text-h2: 2.441rem;
    --sl-text-h3: 1.953rem;
    --sl-text-h4: 1.563rem;
    --sl-text-h5: 1.25rem;
    --sl-text-h6: 1rem;
}

:root[data-theme='light'] {
    --sl-color-bg-nav: hsl(191, 76%, 90%);
}

h1,
h2,
h3,
h4 {
    font-weight: 200;
}

.sl-markdown-content :is(h1):not(:where(.not-content *)) {
    font-weight: 150;
}

.sl-markdown-content :is(h2):not(:where(.not-content *)) {
    font-weight: 225;
}

.sl-markdown-content :is(h3):not(:where(.not-content *)) {
    font-weight: 300;
}

.sl-markdown-content :is(h4):not(:where(.not-content *)) {
    font-weight: 375;
}

.sl-markdown-content :is(h5):not(:where(.not-content *)) {
    font-weight: 450;
}

.sl-markdown-content :is(h6):not(:where(.not-content *)) {
    font-weight: 525;
}

.large {
    font-weight: 400;
}

.right-sidebar-panel h2 {
    font-weight: 400;
}