chore(docs): updating docs styling

.gitignore

@@ -80,5 +80,6 @@ xcuserdata/
 
 # build output
 /docs/dist/
+/docs/theme/dist
 # generated types
-.astro/
+.astro/

.prettierignore

@@ -1,3 +1,5 @@
 .changeset/
 **/*.snap.js
 /docs/dist
+/docs/**/*.mdx
+/docs/**/*.md

README.md

@@ -1,9 +1,5 @@
 <pre>
-<a href="https://amzn.github.io/style-dictionary/#/version_3">What's new in Style Dictionary 3.0!</a>
-</pre>
-
-<pre>
-<a href="https://github.com/amzn/style-dictionary#version-4">What's coming in Style Dictionary 4.0?</a>
+<a href="https://github.com/amzn/style-dictionary#version-4">What's new in Style Dictionary 4.0?</a>
 </pre>
 
 <img src="docs/assets/logo.png" alt="Style Dictionary logo and mascot" title="&quot;Pascal&quot;" width="100" align="right" />

docs/src/components/Header.astro

@@ -0,0 +1,93 @@
+---
+import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';
+import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro';
+import Search from '@astrojs/starlight/components/Search.astro';
+import Logo from './Logo.astro'
+import type { Props } from '@astrojs/starlight/props';
+---
+
+<div class="header sl-flex">
+	<div class="title-wrapper sl-flex">
+    <a href="/" class="logo-link">
+		  <Logo />
+    </a>
+	</div>
+	<div class="search-wrapper sl-flex">
+		<Search {...Astro.props} />
+	</div>
+	<div class="social-wrapper sl-hidden md:sl-flex right-group">
+		<div class="sl-flex social-icons">
+			<SocialIcons {...Astro.props} />
+		</div>
+		<ThemeSelect {...Astro.props} />
+	</div>
+</div>
+
+<style>
+	.header {
+		gap: var(--sl-nav-gap);
+		justify-content: space-between;
+		align-items: center;
+		height: 100%;
+	}
+
+  .logo-link {
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transform: rotate(0deg)
+  }
+
+  .logo-link:hover {
+    transform: rotate(-45deg);
+  }
+
+	.title-wrapper {
+		/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+		overflow: hidden;
+	}
+
+  .search-wrapper {
+    justify-content: flex-end;
+  }
+
+	.right-group,
+	.social-icons {
+		gap: 1rem;
+		align-items: center;
+	}
+	.social-icons::after {
+		content: '';
+		height: 2rem;
+		border-inline-end: 1px solid var(--sl-color-gray-5);
+	}
+
+	@media (min-width: 50rem) {
+		:global(:root[data-has-sidebar]) {
+			--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+		}
+		:global(:root:not([data-has-toc])) {
+			--__toc-width: 0rem;
+		}
+		.header {
+			--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+			--__main-column-fr: calc(
+				(
+						100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
+							(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
+							var(--sl-content-width)
+					) / 2
+			);
+			display: grid;
+			grid-template-columns:
+        /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
+				minmax(
+					calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
+					auto
+				)
+				/* 2 (search box): all free space that is available. */
+				1fr
+				/* 3 (right items): use the space that these need. */
+				auto;
+			align-content: center;
+		}
+	}
+</style>

docs/src/components/HomeBanner.astro

@@ -0,0 +1,20 @@
+---
+import CallToAction from '@astrojs/starlight/components/CallToAction.astro'
+---
+
+Style once, use everywhere
+<h1>Hello world</h1>
+
+<CallToAction variant='primary' link='/style'>Testing</CallToAction>
+
+<sd-install></sd-install>
+
+<style>
+    h1 {
+    color: red;
+  }
+
+  .text {
+    color: blue;
+  }
+</style>

docs/src/components/Logo.astro

@@ -0,0 +1,27 @@
+<svg class="sd-logo" viewBox="0 0 581 581" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path class="sd-logo-part" fill-rule="evenodd" clip-rule="evenodd" d="M346 570C469.712 570 570 469.712 570 346C570 222.288 469.712 122 346 122C346 254.14 346 495.879 346 570Z"/>
+  <path class="sd-logo-part" fill-rule="evenodd" clip-rule="evenodd" d="M234 458C234 519.856 284.144 570 346 570C407.856 570 458 519.856 458 458C391.93 458 271.061 458 234 458Z"/>
+  <path class="sd-logo-part" d="M346 570C407.856 570 458 519.856 458 458C458 396.144 407.856 346 346 346C284.144 346 234 396.144 234 458C234 519.856 284.144 570 346 570Z"/>
+  <path class="sd-logo-part" fill-rule="evenodd" clip-rule="evenodd" d="M346.002 514C315.074 514 290.002 488.928 290.002 458C290.002 427.072 315.074 402 346.002 402C346.002 435.035 346.002 495.47 346.002 514Z"/>
+  <path class="sd-logo-part" fill-rule="evenodd" clip-rule="evenodd" d="M402 458C402 488.928 376.928 514 346 514C315.072 514 290 488.928 290 458C323.035 458 383.47 458 402 458Z"/>
+  <path class="sd-logo-part" fill-rule="evenodd" clip-rule="evenodd" d="M346 458.002C361.464 458.002 374 445.466 374 430.002C374 414.538 361.464 402.002 346 402.002C346 418.519 346 448.737 346 458.002Z"/>
+  <path class="sd-logo-part" fill-rule="evenodd" clip-rule="evenodd" d="M374 430.002C374 445.466 361.464 458.002 346 458.002C330.536 458.002 318 445.466 318 430.002C334.517 430.002 364.735 430.002 374 430.002Z"/>
+  <path class="sd-logo-part" fill-rule="evenodd" clip-rule="evenodd" d="M346 346C346 206.48 346 94.4796 346 10C160.432 10 10 160.432 10 346C96.4046 346 208.405 346 346 346Z"/>
+  <path class="sd-logo-part" fill-rule="evenodd" clip-rule="evenodd" d="M570 346C570 222.288 469.712 122 346 122C222.288 122 122 222.288 122 346C254.14 346 495.879 346 570 346Z"/>
+  <path d="M143.7 318C174.628 318 199.7 292.928 199.7 262C199.7 231.072 174.628 206 143.7 206C112.772 206 87.7 231.072 87.7 262C87.7 292.928 112.772 318 143.7 318Z" fill="white"/>
+  <path d="M143.7 290C159.164 290 171.7 277.464 171.7 262C171.7 246.536 159.164 234 143.7 234C128.236 234 115.7 246.536 115.7 262C115.7 277.464 128.236 290 143.7 290Z" fill="#303942"/>
+</svg>
+
+<style>
+  .sd-logo {
+    height: 2.5rem;
+  }
+
+  .sd-logo-part {
+    fill: var(--sl-color-accent);
+    fill-opacity: 0.5;
+    stroke: var(--sl-color-accent-high);
+    stroke-width: 8px;
+    stroke-opacity: 0.25;
+  }
+</style>

docs/src/components/colors.ts

@@ -0,0 +1,105 @@
+import { LitElement, css, html } from 'lit';
+import { darkTokens } from '../../theme/tokens/dark';
+import { shades } from '../../theme/tokens/core';
+
+const colors: (keyof typeof darkTokens.color)[] = ['accent', 'green', 'orange', 'purple', 'red'];
+const colors2 = [
+  'gray',
+  'red',
+  'orange',
+  'yellow',
+  'lime',
+  'green',
+  'teal',
+  'blue',
+  'purple',
+  'pink',
+];
+
+// const shades = ['-low', '', '-high'];
+const shades2 = ['darker', 'dark', 'light', 'lighter'];
+
+const fontCodeColors = [1, 2, 3, 4, 5, 6, 7, 8, 9, 21, 22, 23, 24, 25, 26, 27, 28, 29];
+
+export class SdColors extends LitElement {
+  static styles = css`
+    :host {
+    }
+
+    .color {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .color__shade {
+      flex: 1;
+      height: 2rem;
+      text-align: center;
+      font-size: 2rem;
+    }
+
+    .border-color {
+      width: 2rem;
+      height: 2rem;
+      border: 1px solid transparent;
+    }
+  `;
+
+  declare name: string;
+  static properties = { name: { type: String } };
+
+  constructor() {
+    super();
+    this.name = 'Default';
+  }
+
+  // Render the UI as a function of component state
+  render() {
+    return html` <div>
+      <ul>
+        ${['primary', 'secondary', 'tertiary'].map(
+          (key) => html`
+            <li class="border-color" style="border-color: var(--sl-color-border-${key})"></li>
+          `,
+        )}
+      </ul>
+      <ul>
+        ${colors2.map(
+          (key) =>
+            html`<li class="color">
+              ${shades2.map(
+                (shade) => html`
+                  <div
+                    class="color__shade"
+                    style="background-color: var(--sl-color-${key}-${shade}); width:1rem; height: 1rem;"
+                  ></div>
+                `,
+              )}
+            </li>`,
+        )}
+        ${colors2.map(
+          (key) =>
+            html`<li class="color">
+              ${shades.map(
+                (shade) => html`
+                  <div
+                    class="color__shade"
+                    style="background-color: var(--sl-color-${key}-${shade}); width:1rem; height: 1rem;"
+                  ></div>
+                `,
+              )}
+            </li>`,
+        )}
+        <li class="color">
+          ${fontCodeColors.map(
+            (key) => html`
+              <div class="color__shade" style="color: var(--sl-color-font-code-${key});">Aa</div>
+            `,
+          )}
+        </li>
+      </ul>
+    </div>`;
+  }
+}
+
+customElements.define('sd-colors', SdColors);

docs/src/components/sd-install.ts

@@ -0,0 +1,54 @@
+import { LitElement, css, html } from 'lit';
+import '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js';
+
+export class SdInstall extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border: 1px solid var(--sl-color-border-tertiary);
+      box-shadow: 0 0.125rem 1rem var(--sl-color-background-tertiary);
+      border-radius: 0.25rem;
+      background-color: var(--sl-color-bg-code);
+      padding-inline: var(--sl-spacing-medium);
+      padding-block: var(--sl-spacing-small);
+
+      --sl-tooltip-arrow-size: 0;
+      --sl-tooltip-background-color: var(--sl-color-backdrop-overlay);
+      --sl-tooltip-color: var(--sl-color-font-primary);
+    }
+
+    code {
+      font-size: 1rem;
+      flex: 1;
+    }
+
+    code:before {
+      content: '$ ';
+    }
+
+    // sl-copy-button::part(tooltip__body) {
+    //   background-color: var(--sl-color-);
+    //   border-color: green;
+    // }
+  `;
+
+  declare name: string;
+  static properties = { name: { type: String } };
+
+  constructor() {
+    super();
+    this.name = 'Default';
+  }
+
+  // Render the UI as a function of component state
+  render() {
+    return html`
+      <code class="" data-code="" class=""> npm install style-dictionary </code>
+      <sl-copy-button value="npm install style-dictionary"></sl-copy-button>
+    `;
+  }
+}
+
+customElements.define('sd-install', SdInstall);

docs/src/components/sd-playground.ts

@@ -11,7 +11,6 @@
 import { analyzeDependencies } from '../utils/analyzeDependencies.ts';
 import { downloadZIP } from '../../../lib/utils/downloadFile.js';
 import type SlRadioGroup from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
-import type { Config } from '../../../types/Config.ts';
 
 const defaults = {
   tokens: {
@@ -60,9 +59,34 @@
 class SdPlayground extends LitElement {
   static get styles() {
     return css`
+      :host {
+        display: block;
+        border: 1px solid var(--sl-color-border-tertiary);
+        box-shadow: 0 0.125rem 1rem var(--sl-color-background-tertiary);
+        border-radius: 0.25rem;
+      }
+
       sl-radio-group {
-        margin-bottom: 4px;
-        margin-top: 16px;
+        background-color: var(--sl-color-background-tertiary);
+        border-radius: 0.25rem 0.25rem 0 0;
+      }
+      sl-radio-button::part(button) {
+        border: none;
+      }
+
+      sl-radio-button::part(button):hover {
+        background-color: transparent;
+        color: var(--sl-color-text-accent);
+      }
+
+      sl-radio-button::part(button--checked) {
+        background-color: var(--sl-color-bg-code);
+        color: var(--sl-color-text);
+        border-top: 1px solid var(--sl-color-accent);
+      }
+
+      sl-radio-button::part(button--checked):hover {
+        background-color: var(--sl-color-bg-code);
       }
 
       .output-select::part(combobox) {
@@ -341,7 +365,7 @@
       sdConfig.tokens = sdConfig.tokens ?? tokens;
     }
 
     return sdConfig as Config;
   }
 
   getFileData(file: 'tokens' | 'config' | 'script' | 'output') {
@@ -360,7 +384,7 @@
     await changeLang(getLang(data.lang), this.editor);
   }
 
   async runSD(cfg: Config) {
     try {
       this.volume = new Volume();
       const sd = new StyleDictionary(cfg, { volume: this.volume });