From cdaa82904768053d16f703496ae95bf5ec87ad56 Mon Sep 17 00:00:00 2001 From: dev-nicolaos Date: Mon, 16 Oct 2023 13:47:48 -0700 Subject: [PATCH 1/2] convert md blockquotes to callouts --- docs/src/pages/docs/integrations/sass.md | 12 ++++++++++-- docs/src/pages/docs/integrations/style-dictionary.md | 12 ++++++++---- docs/src/pages/docs/reference/config.md | 12 ++++++++++-- docs/src/styles/_md.scss | 8 ++++---- 4 files changed, 32 insertions(+), 12 deletions(-) diff --git a/docs/src/pages/docs/integrations/sass.md b/docs/src/pages/docs/integrations/sass.md index 3471a424..1fad8be5 100644 --- a/docs/src/pages/docs/integrations/sass.md +++ b/docs/src/pages/docs/integrations/sass.md @@ -127,7 +127,11 @@ export default { }; ``` -> ⚠️ Don’t load another instance of @cobalt-ui/plugin-css, otherwise they may conflict! +
+ +⚠️ Don’t load another instance of @cobalt-ui/plugin-css, otherwise they may conflict! + +
Lastly, you’ll need to make sure the new `tokens.css` file is loaded in your app somehow (otherwise the variables won’t be defined): @@ -154,7 +158,11 @@ Or perhaps you want to do some calculations off your tokens. CSS’ `calc()` can In either case, letting the browser do the work is better, especially considering CSS variables are dynamic and can be modified on-the-fly. -> ✨ **Tip**: Always use `in oklab` as the default colorspace for `color-mix()`. It usually outperforms other blending methods ([comparison](https://better-color-tools.pages.dev/mix)). +
+ +✨ **Tip**: Always use `in oklab` as the default colorspace for `color-mix()`. It usually outperforms other blending methods ([comparison](https://better-color-tools.pages.dev/mix)). + +
## Config diff --git a/docs/src/pages/docs/integrations/style-dictionary.md b/docs/src/pages/docs/integrations/style-dictionary.md index 007c42b8..488a61f5 100644 --- a/docs/src/pages/docs/integrations/style-dictionary.md +++ b/docs/src/pages/docs/integrations/style-dictionary.md @@ -11,10 +11,14 @@ You can migrate your + +⚠️ **Warning** +This is **NOT** meant to be a comprehensive conversion. The W3C format is not 1:1 compatible with Style Dictionary. This will not import your transformations, and it will probably make mistakes, and miss tokens. This is only meant for **migrating** to the W3C format permanently, and is meant to save you some work by giving you a starting point you’ll have to clean up afterward. + +After running `npx co convert` it’s not recommended to keep using the Style Dictionary format. + + ## Why convert to W3C Design Tokens? diff --git a/docs/src/pages/docs/reference/config.md b/docs/src/pages/docs/reference/config.md index 69d7c53b..c993748e 100644 --- a/docs/src/pages/docs/reference/config.md +++ b/docs/src/pages/docs/reference/config.md @@ -31,7 +31,11 @@ export default { }; ``` -> ⚠️ Note the file must end in `.yml` or `.yaml` to take effect +
+ +⚠️ Note the file must end in `.yml` or `.yaml` to take effect + +
### Loading from URL @@ -68,7 +72,11 @@ export default { Cobalt will flatten these schemas in order, with the latter entries overriding the former if there are any conflicts. The final result of all the combined schemas **must** result in a valid tokens.json. -> ⚠️ **Warning** All aliases must refer to the same document, e.g. don’t try to include filenames such as `{./theme.json#/color.action.50}`. Reference it as if it were in the same file. +
+ +⚠️ **Warning** All aliases must refer to the same document, e.g. don’t try to include filenames such as `{./theme.json#/color.action.50}`. Reference it as if it were in the same file. + +
## Token Type Options diff --git a/docs/src/styles/_md.scss b/docs/src/styles/_md.scss index 1d03e483..edab4374 100644 --- a/docs/src/styles/_md.scss +++ b/docs/src/styles/_md.scss @@ -53,14 +53,14 @@ } } - blockquote { + .callout { background-color: token('color.blue.95'); border-left: 0.375rem solid token('color.blue.70'); margin: 0; padding: 0.5rem 1.5rem; - - @media(prefers-color-scheme:dark) { - background-color: token('color.blue.15'); + + @media (prefers-color-scheme: dark) { + background-color: token('color.blue.15'); } } From 08bc1baa673cd34b437b5642fe6d53516445c02b Mon Sep 17 00:00:00 2001 From: dev-nicolaos Date: Mon, 16 Oct 2023 13:48:06 -0700 Subject: [PATCH 2/2] fix getting started markup --- .../pages/docs/getting-started/index.astro | 166 +++++++++--------- 1 file changed, 83 insertions(+), 83 deletions(-) diff --git a/docs/src/pages/docs/getting-started/index.astro b/docs/src/pages/docs/getting-started/index.astro index 1bcd1d97..b0ff5f11 100644 --- a/docs/src/pages/docs/getting-started/index.astro +++ b/docs/src/pages/docs/getting-started/index.astro @@ -33,19 +33,20 @@ const title = 'Getting Started'; Running the CLI
  • (Optional) Adding Cobalt to CI
    • + -

    1. Creating the tokens.json file

    +

    1. Creating the tokens.json file

    -

    - Converting your tokens to JSON is a manual process of grabbing values from your design files and formatting the JSON yourself. There’s not a great UI for this yet, but the Cobalt team is developing one currently. -

    +

    + Converting your tokens to JSON is a manual process of grabbing values from your design files and formatting the JSON yourself. There’s not a great UI for this yet, but the Cobalt team is developing one currently. +

    -

    ✨ Cobalt can now convert some Style Dictionary files into the W3C format (docs)

    + -

    Save these all to a tokens.json file (or tokens.yaml, if you prefer YAML) like so:

    +

    Save these all to a tokens.json file (or tokens.yaml, if you prefer YAML) like so:

    - - -

    You can use the following token types (organizing them into any Groups you’d like) (docs):

    - - - -

    2. Installing Cobalt Plugins

    + /> -

    ℹ️ For this step, you’ll need Node.js installed (v20 is recommended).

    +

    You can use the following token types (organizing them into any Groups you’d like) (docs):

    + + + +

    2. Installing Cobalt Plugins

    + +

    ℹ️ For this step, you’ll need Node.js installed (v20 is recommended).

    -

    - For this example, we’ll install the JS, Sass, and CSS plugins, but skip any you don’t need (you can always install them - later). -

    +

    + For this example, we’ll install the JS, Sass, and CSS plugins, but skip any you don’t need (you can always install them + later). +

    -

    Run the following in a terminal, in the code project folder you’d like to generate code to:

    +

    Run the following in a terminal, in the code project folder you’d like to generate code to:

    - + -

    3. Running the CLI

    +

    3. Running the CLI

    -

    First install the CLI:

    +

    First install the CLI:

    - + -

    Next, in the root of your code project, create a tokens.config.mjs file, importing the plugins you installed in the previous step:

    +

    Next, in the root of your code project, create a tokens.config.mjs file, importing the plugins you installed in the previous step:

    - + /> -

    To learn more about the config file, see config options. To learn about plugins and integrations, see Integrations.

    +

    To learn more about the config file, see config options. To learn about plugins and integrations, see Integrations.

    -

    Lastly, run the following command to generate all code from your tokens:

    +

    Lastly, run the following command to generate all code from your tokens:

    - + -

    This will output JS, CSS, and Sass in the ./tokens/ folder (which you can change in your config). It will also alert you of any errors in your schema.

    +

    This will output JS, CSS, and Sass in the ./tokens/ folder (which you can change in your config). It will also alert you of any errors in your schema.

    -

    4. (optional) Adding Cobalt to CI

    +

    4. (optional) Adding Cobalt to 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 to it:

    +

    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 to it:

    - + /> -

    Note: this is just a generic example. The important part is that co build is run somehow during the build.

    +

    Note: this is just a generic example. The important part is that co build is run somehow during the build.

    -

    Then add the npm run build command to your preferred CI tool. Here’s an example in GitHub Actions:

    +

    Then add the npm run build command to your preferred CI tool. Here’s an example in GitHub Actions:

    - - -

    - This will then run co build on every code change. This not only validates your tokens to make sure they’re 100% valid; it also runs all the code plugins so you know if there was an error generating tokens to CSS, etc. -

    - -

    - You could then take the additional step of using a package versioning tool like Changesets to release npm packages from CI (the the Cobalt GitHub repo uses this to release new package versions automatically). -

    - -

    Next steps

    - - - + /> + +

    + This will then run co build on every code change. This not only validates your tokens to make sure they’re 100% valid; it also runs all the code plugins so you know if there was an error generating tokens to CSS, etc. +

    + +

    + You could then take the additional step of using a package versioning tool like Changesets to release npm packages from CI (the the Cobalt GitHub repo uses this to release new package versions automatically). +

    + +

    Next steps

    + +