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

docs/src/components/Header.astro

@@ -0,0 +1,99 @@
+---
+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 class="test" />
+			<span class="logo-link__text">Style Dictionary</span>
+    </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 {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--sl-color-font-primary);
+		text-decoration: none;
+	}
+
+	.logo-link__text {
+		font-weight: bold;
+	}
+
+	.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/Hero.astro

@@ -0,0 +1,66 @@
+---
+import CallToAction from '@astrojs/starlight/components/CallToAction.astro'
+import SDInstall from './SDInstall.astro';
+import HeroGraphic from './HeroGraphic.astro';
+---
+
+<section class="home-hero">
+  <div class="home-hero-content">
+    <h1 data-page-title>
+      Style once<br/>
+      use everywhere
+    </h1>
+    <div class="tagline">
+      A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language. It provides a single place to create and edit your styles, and exports these tokens to all the places you need - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.
+    </div>
+
+    <div class="hero-actions">
+      <CallToAction variant='primary' link='/getting-started/installation'>Get started</CallToAction>
+      <SDInstall />
+    </div>
+  </div>
+
+  <div class="hero-graphic">
+    <HeroGraphic />
+  </div>
+</section>
+
+
+<style>
+	h1 {
+		font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
+		line-height: var(--sl-line-height-headings);
+		font-weight: 900;
+		color: var(--sl-color-white);
+	}
+
+	.tagline {
+		font-size: clamp(var(--sl-text-base), calc(0.0625rem + 2vw), var(--sl-text-xl));
+		color: var(--sl-color-gray-2);
+	}
+
+  .hero-actions {
+    display: flex;
+    flex-direction: row;
+    gap: var(--sl-spacing-large);
+  }
+
+  .home-hero-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--sl-spacing-x-large);
+  }
+
+  .home-hero {
+    max-width: 80rem;
+    margin: 0 auto;
+    padding: var(--sl-spacing-x-large);
+    display: flex;
+    flex-direction: row;
+  }
+
+  .hero-graphic {
+    width: 400px;
+  }
+</style>

docs/src/components/Home.astro

@@ -0,0 +1,28 @@
+---
+import tokens from '../../public/demo-tokens.json';
+---
+
+<section class="home-section">
+  <h2 class="home-section-heading">Try it out</h2>
+  <sd-playground tokens={JSON.stringify({ value: JSON.stringify(tokens, null, 2), lang: 'json'})} default-selected="tokens" id="main-demo">
+    <div style="height: 100%" slot="monaco-editor"></div>
+  </sd-playground>
+</section>
+
+<section class="home-section">
+  <h2 class="home-section-heading">Convert to DTCG Spec</h2>
+  <p class="home-section-">Upload your JSON or ZIP of tokens and convert them to DTCG format:</p>
+  <sd-dtcg-convert></sd-dtcg-convert>
+</section>
+
+<style>
+  .home-section {
+    padding: var(--sl-spacing-x-large);
+    max-width: 80rem;
+    margin: 0 auto;
+  }
+  .home-section-heading {
+    font-weight: 800 !important;
+    text-align: center;
+  }
+</style>

docs/src/components/SDInstall.astro

@@ -0,0 +1,39 @@
+
+<div class="sd-install">
+  <code class="" data-code="" class=""> npm install style-dictionary </code>
+  <sl-copy-button value="npm install style-dictionary"></sl-copy-button>
+</div>
+
+<script>
+  import '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js';
+</script>
+
+<style>
+  .sd-install {
+    display: flex;
+    flex-direction: row;
+    gap: var(--sl-spacing-medium);
+    align-items: center;
+    text-align: left;
+    border: 1px solid var(--sl-color-border-tertiary);
+    box-shadow: 0 0.125rem 1rem var(--sl-color-background-tertiary);
+    border-radius: 2rem;
+    backdrop-filter: blur(8px);
+    padding-inline: var(--sl-spacing-large);
+    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: '$ ';
+    color: var(--sl-color-font-tertiary);
+  }
+</style>

docs/src/components/colors.ts

@@ -0,0 +1,88 @@
+import { LitElement, css, html } from 'lit';
+import { hue } from '../../theme/tokens/core';
+
+const shades = ['-low', '', '-high'];
+
+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`
+    .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>
+      <h3>Color palette</h3>
+      <ul>
+        ${Object.keys(hue).map(
+          (key) =>
+            html`<li class="color">
+              ${shades.map(
+                (shade) => html`
+                  <div
+                    class="color__shade"
+                    style="background-color: var(--sl-color-${key}${shade});"
+                  ></div>
+                `,
+              )}
+            </li>`,
+        )}
+      </ul>
+      <h3>Background colors</h3>
+      <ul class="color">
+        ${['primary', 'secondary', 'tertiary'].map(
+          (key) => html`
+            <li class="color__shade" style="background-color: var(--sl-color-background-${key})">
+              ${key}
+            </li>
+          `,
+        )}
+      </ul>
+      <h3>Border colors</h3>
+      <ul>
+        ${['primary', 'secondary', 'tertiary'].map(
+          (key) => html`
+            <li class="border-color" style="border-color: var(--sl-color-border-${key})">${key}</li>
+          `,
+        )}
+      </ul>
+      <h3>Syntax highlight colors</h3>
+      <ul>
+        <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-playground.ts

@@ -60,9 +60,33 @@ export const registeredComponents: SdPlayground[] = [];
 class SdPlayground extends LitElement {
   static get styles() {
     return css`
+      :host {
+        display: block;
+        border: 1px solid var(--sl-color-border-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) {