Docs v2

.changeset/chatty-shoes-taste.md

@@ -0,0 +1,5 @@
+---
+'@cobalt-ui/core': patch
+---
+
+Fix strokeStyle object values

.changeset/fresh-buses-lick.md

@@ -0,0 +1,5 @@
+---
+'@cobalt-ui/cli': patch
+---
+
+Call all config() callbacks before running builds

.changeset/grumpy-snakes-type.md

@@ -0,0 +1,5 @@
+---
+'@cobalt-ui/plugin-css': patch
+---
+
+Allow generateName() to return `undefined` or `null` to fall back to default name generation

.changeset/red-trainers-type.md

@@ -0,0 +1,5 @@
+---
+'@cobalt-ui/plugin-css': patch
+---
+
+Fix strokeStyle object value

docs/.gitignore

@@ -0,0 +1,2 @@
+.vitepress/cache
+.vitepress/dist

docs/.vitepress/config.ts

@@ -0,0 +1,88 @@
+import {defineConfig} from 'vitepress';
+import packageJSON from '../../packages/cli/package.json';
+
+/** @see https://vitepress.dev/reference/site-config */
+export default defineConfig({
+  title: 'Cobalt',
+  description: 'Tooling to use DTFM Design Tokens anywhere',
+  cleanUrls: true,
+  /** @see https://vitepress.dev/reference/default-theme-config */
+  themeConfig: {
+    logo: '/images/cobalt-icon-solid.svg',
+    nav: [
+      {
+        text: `v${packageJSON.version}`,
+        items: [{text: 'Changelog', link: 'https://github.com/drwpow/cobalt-ui/blob/main/packages/cli/CHANGELOG.md'}],
+      },
+    ],
+    sidebar: [
+      {
+        text: 'Guides',
+        collapsed: false,
+        items: [
+          {text: 'Getting Started', link: '/guides/getting-started'},
+          {text: 'tokens.json', link: '/guides/tokens'},
+          {text: 'CLI', link: '/guides/cli'},
+          {text: 'Modes', link: '/guides/modes'},
+        ],
+      },
+      {
+        text: 'Tokens',
+        collapsed: true,
+        items: [
+          {text: 'Color', link: '/tokens/color'},
+          {text: 'Dimension', link: '/tokens/dimension'},
+          {text: 'Font Family', link: '/tokens/font-family'},
+          {text: 'Font Weight', link: '/tokens/font-weight'},
+          {text: 'Duration', link: '/tokens/duration'},
+          {text: 'Cubic Bézier', link: '/tokens/cubic-bezier'},
+          {text: 'Number', link: '/tokens/number'},
+          {text: 'Link (ext)', link: '/tokens/link'},
+          {text: 'Stroke Style', link: '/tokens/stroke-style'},
+          {text: 'Border', link: '/tokens/border'},
+          {text: 'Transition', link: '/tokens/transition'},
+          {text: 'Shadow', link: '/tokens/shadow'},
+          {text: 'Gradient', link: '/tokens/gradient'},
+          {text: 'Typography', link: '/tokens/typography'},
+          {text: 'Group', link: '/tokens/group'},
+          {text: 'Alias', link: '/tokens/alias'},
+          {text: 'Custom Tokens', link: '/tokens/custom'},
+        ],
+      },
+      {
+        text: 'Integrations',
+        collapsed: false,
+        items: [
+          {text: 'CSS', link: '/integrations/css'},
+          {text: 'Figma', link: '/integrations/figma'},
+          {text: 'JS/TS', link: '/integrations/js'},
+          {text: 'JSON/Native', link: '/integrations/json'},
+          {text: 'Sass', link: '/integrations/sass'},
+          {text: 'Style Dictionary', link: '/integrations/style-dictionary'},
+          {text: 'Tailwind', link: '/integrations/tailwind'},
+          {text: 'Other', link: '/integrations/other'},
+        ],
+      },
+      {
+        text: 'Advanced',
+        collapsed: true,
+        items: [
+          {text: 'Config', link: '/advanced/config'},
+          {text: 'Node.js API', link: '/advanced/node'},
+          {text: 'Plugin API', link: '/advanced/plugin-api'},
+          {text: 'CI', link: '/advanced/ci'},
+          {text: 'About', link: '/advanced/about'},
+        ],
+      },
+    ],
+    search: {
+      provider: 'algolia',
+      options: {
+        appId: '2U13I82HTZ',
+        apiKey: 'b67c6e8504f5721bb7c0875d044bfddb',
+        indexName: 'cobalt-ui',
+      },
+    },
+    socialLinks: [{icon: 'github', link: 'https://github.com/drwpow/cobalt-ui'}],
+  },
+});

docs/.vitepress/theme/index.ts

@@ -0,0 +1,17 @@
+// https://vitepress.dev/guide/custom-theme
+import {h} from 'vue';
+import type {Theme} from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+import './style.css';
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    });
+  },
+  enhanceApp({app, router, siteData}) {
+    // ...
+  },
+} satisfies Theme;

docs/src/styles/_fonts.scss → docs/.vitepress/theme/style.css

@@ -1,5 +1,7 @@
-@use 'sass:map';
-@use '../../tokens/' as *;
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
 
 @font-face {
   font-family: 'Neue Montreal';
@@ -204,3 +206,165 @@
   src: url(/fonts/redhatmono-v10-300-normal-latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-font-family-base: 'Neue Montreal', -apple-system, 'system-ui', 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --vp-font-family-mono: 'Red Hat Mono', ui-monospace, monospace;
+}
+
+em,
+i {
+  font-variation-settings: 'ital' 900;
+  font-style: normal;
+}
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: oklch(60% 0.216564 269);
+  --vp-c-brand-2: oklch(50% 0.216583 268);
+  --vp-c-brand-3: oklch(60% 0.216564 269);
+  --vp-c-brand-soft: oklch(60% 0.216564 269/0.2);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, oklch(60% 0.216564 269) 30%, oklch(50% 0.216583 268));
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+/**
+ * Page: Home
+ * -------------------------------------------------------------------------- */
+
+.VPHome {
+  background-image: url('/images/home-bg.png');
+  background-repeat: no-repeat;
+  background-position: center 3rem;
+  background-size: 200% auto;
+}
+
+.dark .VPHome {
+  background-image: url('/images/home-bg-dark.png');
+}
+
+@media (min-width: 800px) {
+  .VPHome {
+    background-size: 100% auto;
+    background-position: 100% 4rem;
+  }
+}

docs/src/pages/docs/reference/about.md → docs/advanced/about.md

@@ -1,23 +1,24 @@
 ---
-title: About Cobalt
-layout: ../../../layouts/docs.astro
+title: About
 ---
 
-# About Cobalt
+# About
+
+Cobalt was created to support the [Design Tokens Format Module (DTFM)](https://designtokens.org) and provide a pluggable, extensible interface for generating code for any platform.
 
 ## Project Goals
 
-1. Support the complete and full [Design Tokens Format Module](https://design-tokens.github.io/community-group/format) spec
-2. Support a pluggable and configurable architecture, enabling users and the community to write their own plugins to generate any format
-3. Make syncing from Figma easy and automatable ([docs](/docs/integrations/tokens-studio))
+1. Support the complete and full [Design Tokens Format Module](https://design-tokens.github.io/community-group/format) spec.
+1. Offer the widest compatiblity possible for any platform.
+1. Support a pluggable and configurable architecture, enabling users to write their own plugins to generate any format.
 
-## Why the name “Cobalt”?
+## Why the name “Cobalt?”
 
 The name **Cobalt** has three meanings:
 
-1. Cobalt [the element](https://en.wikipedia.org/wiki/Cobalt) is a nod to design tokens being the “atoms” of your design system<br />
+1. Cobalt [the element](https://en.wikipedia.org/wiki/Cobalt) is a nod to design tokens being the “atoms” of your design system.<br />
    _Fun fact: the animated token icons on this docs site are a nod to Cobalt’s hexagonal atomic structure_
-2. Cobalt [the pigment](https://artsartistsartwork.com/history-of-the-colour-blue-in-art/) is a nod to blue being the last missing color in art history, just as design tokens are the last missing piece of design systems<br />
+2. Cobalt [the pigment](https://artsartistsartwork.com/history-of-the-colour-blue-in-art) is a nod to blue being the last missing color in art history, just as design tokens are the last missing piece of design systems.<br />
    _Fun fact: Van Gogh once said “Cobalt is a divine colour and there is nothing so beautiful for putting atmosphere around things”_
-3. Cobalt the color is a nod to [blueprints](https://en.wikipedia.org/wiki/Blueprint)<br />
+3. Cobalt the color is a nod to [blueprints](https://en.wikipedia.org/wiki/Blueprint).<br />
    _Fun fact: blueprints originally were colored with Prussian Blue (ferrous ferrocyanide), not Cobalt, for cost reasons_