-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
136 changed files
with
3,803 additions
and
8,503 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@cobalt-ui/core': patch | ||
| --- | ||
|
|
||
| Fix strokeStyle object values |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@cobalt-ui/cli': patch | ||
| --- | ||
|
|
||
| Call all config() callbacks before running builds |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@cobalt-ui/plugin-css': patch | ||
| --- | ||
|
|
||
| Allow generateName() to return `undefined` or `null` to fall back to default name generation |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| .vitepress/cache | ||
| .vitepress/dist |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'}], | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 11 additions & 10 deletions
21
docs/src/pages/docs/reference/about.md → docs/advanced/about.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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_ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| --- | ||
| title: CI | ||
| --- | ||
|
|
||
| # CI | ||
|
|
||
| Using your preferred CI stack, here’s an example of how you could add Cobalt to your CI. First, we’ll take a `package.json` that had an existing `npm run build` command, and add `co build` script to it: | ||
|
|
||
| ::: code-group | ||
|
|
||
| ```json [package.json] | ||
| { | ||
| "scripts": { | ||
| "build": "npm run build:app", // [!code --] | ||
| "build": "npm run build:tokens && npm run build:app", // [!code ++] | ||
| "build:app": "vite build", | ||
| "build:tokens": "co build" // [!code ++] | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ::: | ||
|
|
||
| This is just a generic example. The important part is that `co build` is run somehow during the build. | ||
|
|
||
| ## GitHub Actions | ||
|
|
||
| ```yaml | ||
| name: CI | ||
|
|
||
| on: | ||
| push: | ||
| branches: | ||
| - main | ||
| pull_request: | ||
|
|
||
| concurrency: | ||
| group: ci-\${{ github.ref }} | ||
| cancel-in-progress: true | ||
|
|
||
| jobs: | ||
| build: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v3 | ||
| - uses: actions/setup-node@v3 | ||
| with: | ||
| node-version: 20 | ||
| - run: npm i | ||
| - run: npm run build | ||
| ``` | ||
| This will run `co build` on every code change, which validates your `tokens.json` and runs all plugins to make sure they’re all working as expected. | ||
|
|
||
| ## Publishing to npm | ||
|
|
||
| You could then take the additional step of using a package versioning tool like [Changesets](https://github.com/changesets/changesets) to release npm packages from CI ([Cobalt does this!](https://github.com/drwpow/cobalt-ui/blob/main/.github/workflows/release.yml)). |
Oops, something went wrong.