making the styleguide nicer
This commit is contained in:
madrilene
parent
f6c9354357
commit
d02b5789ad
2 changed files with 77 additions and 70 deletions
|
|
@ -1,3 +1,13 @@
|
||||||
|
.styleguide {
|
||||||
|
--region-space-top: var(--space-xl-2xl);
|
||||||
|
--spot-color: color-mix(in oklab, var(--color-bg) 97%, var(--color-text));
|
||||||
|
}
|
||||||
|
|
||||||
|
.styleguide section {
|
||||||
|
--region-space-bottom: var(--space-l-xl);
|
||||||
|
--region-space-top: var(--space-l-xl);
|
||||||
|
}
|
||||||
|
|
||||||
.styleguide :is(h2, h3) {
|
.styleguide :is(h2, h3) {
|
||||||
font-size: var(--size-step-0);
|
font-size: var(--size-step-0);
|
||||||
font-family: var(--font-base);
|
font-family: var(--font-base);
|
||||||
|
|
@ -8,12 +18,6 @@
|
||||||
letter-spacing: var(--tracking-wide);
|
letter-spacing: var(--tracking-wide);
|
||||||
}
|
}
|
||||||
|
|
||||||
.styleguide section {
|
|
||||||
padding: var(--space-l-xl);
|
|
||||||
outline: 2px solid var(--color-bg-accent); /* Increase the outline thickness for better visibility */
|
|
||||||
outline-offset: -1px; /* Negative value to make outlines overlap */
|
|
||||||
}
|
|
||||||
|
|
||||||
.styleguide .colors {
|
.styleguide .colors {
|
||||||
--cluster-vertical-alignment: flex-start;
|
--cluster-vertical-alignment: flex-start;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,9 @@ permalink: /styleguide/index.html
|
||||||
layout: base
|
layout: base
|
||||||
eleventyExcludeFromCollections: true
|
eleventyExcludeFromCollections: true
|
||||||
customColors:
|
customColors:
|
||||||
|
- property: '--color-text'
|
||||||
- property: '--color-text-accent'
|
- property: '--color-text-accent'
|
||||||
|
- property: '--color-bg'
|
||||||
- property: '--color-bg-accent'
|
- property: '--color-bg-accent'
|
||||||
- property: '--color-bg-accent-2'
|
- property: '--color-bg-accent-2'
|
||||||
- property: '--color-primary'
|
- property: '--color-primary'
|
||||||
|
|
@ -18,19 +20,19 @@ customGradients:
|
||||||
|
|
||||||
<!-- Inspired by: https://stevenwoodson.com/blog/eleventy-style-guide-generator-step-by-step-guide-adding-to-an-existing-site/ -->
|
<!-- Inspired by: https://stevenwoodson.com/blog/eleventy-style-guide-generator-step-by-step-guide-adding-to-an-existing-site/ -->
|
||||||
|
|
||||||
<div class="region wrapper flow" style="--region-space-top: var(--space-xl-2xl)">
|
<article class="styleguide | wrapper flow">
|
||||||
<article class="styleguide">
|
<header class="intro flow region">
|
||||||
<section class="intro flow">
|
<h1 class="gradient-text-linear">{{ title }}</h1>
|
||||||
<h1 class="gradient-text-linear">{{ title }}</h1>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
All design tokens can be found in <code>src/_data/designTokens</code>. <br />
|
All design tokens can be found in <code>src/_data/designTokens</code>. <br />
|
||||||
This includes all baseline fonts, colors, sizes, and spacing.
|
This includes all baseline fonts, colors, sizes, and spacing.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</header>
|
||||||
|
|
||||||
<section class="colors flow">
|
<div class="full colors | section">
|
||||||
<h2>Colors</h2>
|
<section class="section__inner wrapper flow region">
|
||||||
|
<h2 class="heading-line">Colors</h2>
|
||||||
|
|
||||||
<p>{{ designTokens.colors.description }}</p>
|
<p>{{ designTokens.colors.description }}</p>
|
||||||
|
|
||||||
|
|
@ -46,7 +48,7 @@ customGradients:
|
||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="mt-l-xl">Custom created colors</h3>
|
<h3 class="heading-line | mt-l-xl">Custom created colors</h3>
|
||||||
<p>in <code>variables.css</code>. Some only change for dark theme.</p>
|
<p>in <code>variables.css</code>. Some only change for dark theme.</p>
|
||||||
|
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
|
|
@ -60,7 +62,7 @@ customGradients:
|
||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="mt-l-xl">Gradients</h3>
|
<h3 class="heading-line | mt-l-xl">Gradients</h3>
|
||||||
|
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
{%- for gradient in customGradients %}
|
{%- for gradient in customGradients %}
|
||||||
|
|
@ -76,26 +78,28 @@ customGradients:
|
||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section class="fonts flow">
|
<section class="fonts | flow region">
|
||||||
<h2>Fonts</h2>
|
<h2 class="heading-line">Fonts</h2>
|
||||||
|
|
||||||
<ul class="fonts flow">
|
<ul class="fonts flow">
|
||||||
{%- for font in designTokens.fonts.items %}
|
{%- for font in designTokens.fonts.items %}
|
||||||
<li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
|
<li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
|
||||||
<h3 style="font-family: var(--font-{{ font.name | slugify }})">
|
<h3 style="font-family: var(--font-{{ font.name | slugify }})">
|
||||||
{{ font.name }}
|
{{ font.name }}
|
||||||
</h3>
|
</h3>
|
||||||
<p>{{ font.description }}</p>
|
<p>{{ font.description }}</p>
|
||||||
<p><strong>Font Families</strong>: {{ font.value | join(', ')}}</p>
|
<p><strong>Font Families</strong>: {{ font.value | join(', ')}}</p>
|
||||||
<code>var(--font-{{ font.name | slugify }})</code>
|
<code>var(--font-{{ font.name | slugify }})</code>
|
||||||
</li>
|
</li>
|
||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="sizes flow">
|
<div class="full sizes | section">
|
||||||
<h2>Sizes</h2>
|
<section class="section__inner wrapper flow region">
|
||||||
|
<h2 class="heading-line">Sizes</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
{{ designTokens.sizes.description }}. Fluid type and space scales were
|
{{ designTokens.sizes.description }}. Fluid type and space scales were
|
||||||
|
|
@ -121,40 +125,39 @@ customGradients:
|
||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section class="spacing flow">
|
<section class="spacing | flow region">
|
||||||
<h2>Spacing</h2>
|
<h2 class="heading-line">Spacing</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
{{ designTokens.spacing.description }}<br />
|
{{ designTokens.spacing.description }}<br />
|
||||||
Fluid type and space scales were
|
Fluid type and space scales were
|
||||||
<a href="{{ designTokens.spacing.meta.scaleGenerator }}">generated with Utopia</a
|
<a href="{{ designTokens.spacing.meta.scaleGenerator }}">generated with Utopia</a>.
|
||||||
>.
|
</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<table class="spacing flow">
|
<table class="spacing flow">
|
||||||
{%- for space in designTokens.spacing.items %}
|
{%- for space in designTokens.spacing.items %}
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">
|
<th scope="row">
|
||||||
<h3>{{ space.name }}</h3>
|
<h3>{{ space.name }}</h3>
|
||||||
</th>
|
</th>
|
||||||
<td>
|
<td>
|
||||||
<span class="flow">
|
<span class="flow">
|
||||||
<p>{{ space.min }}px to {{ space.max }}px</p>
|
<p>{{ space.min }}px to {{ space.max }}px</p>
|
||||||
<code>var(--space-{{ space.name | slugify }})</code>
|
<code>var(--space-{{ space.name | slugify }})</code>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div
|
<div
|
||||||
class="space"
|
class="space"
|
||||||
style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{
|
style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{
|
||||||
space.name | slugify
|
space.name | slugify
|
||||||
}});"
|
}});"
|
||||||
></div>
|
></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue