-
Notifications
You must be signed in to change notification settings - Fork 2
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
38 changed files
with
8,863 additions
and
450 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,2 @@ | ||
| */node_modules | ||
| *.log |
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,6 +1,3 @@ | ||
| { | ||
| "files.associations": { | ||
| "api-extractor.json": "jsonc" | ||
| }, | ||
| "typescript.preferences.importModuleSpecifier": "relative" | ||
| } |
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,10 @@ | ||
| FROM node:lts | ||
|
|
||
| WORKDIR /app/website | ||
|
|
||
| EXPOSE 3000 35729 | ||
| COPY ./docs /app/docs | ||
| COPY ./website /app/website | ||
| RUN yarn install | ||
|
|
||
| CMD ["yarn", "start"] |
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,18 @@ | ||
| version: "3" | ||
|
|
||
| services: | ||
| docusaurus: | ||
| build: . | ||
| ports: | ||
| - 3000:3000 | ||
| - 35729:35729 | ||
| volumes: | ||
| - ./docs:/app/docs | ||
| - ./website/blog:/app/website/blog | ||
| - ./website/core:/app/website/core | ||
| - ./website/i18n:/app/website/i18n | ||
| - ./website/pages:/app/website/pages | ||
| - ./website/static:/app/website/static | ||
| - ./website/sidebars.json:/app/website/sidebars.json | ||
| - ./website/siteConfig.js:/app/website/siteConfig.js | ||
| working_dir: /app/website |
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 |
|---|---|---|
| @@ -1,185 +1,46 @@ | ||
| # Build | ||
|
|
||
| Theemo will give CSS output a special treatment. Given your theme supports | ||
| multiple color schemes Theemo is able to prepare it for usage with CSS media | ||
| query support. | ||
|
|
||
| The idea is Theemo will enhance the output within a single CSS file. You will | ||
| include that _one_ file and it will behave the way you intend it. Refer to | ||
| the following configuration options. | ||
|
|
||
| ## Configuration | ||
|
|
||
| - *root: boolean* | ||
| - `false` - You have to manually activate the theme with a CSS class (usually | ||
| at the body) | ||
| - `true` - Will globally activate your theme by using the `:root` selector. | ||
| - *colorScheme: object* - Everything to configure the color scheme | ||
| - *default: string* - Sets the default color scheme | ||
| - *activation: auto | manual* - Determines the way the color scheme is | ||
| choosen. | ||
| - `auto` - will add the `@media (prefers-color-scheme: none)` to pick the one | ||
| you set in `default` | ||
| - `manual` - you have to manually add a css class to active the color-scheme. | ||
| - *override: boolean* - When `activation` is `auto` you may | ||
| want to override the auto-selected choice. Set this one to true and CSS | ||
| classes will be generated to manually specify the color scheme. | ||
|
|
||
| ## Examples | ||
|
|
||
| Here are some sample configurations and how to use the generated output. | ||
|
|
||
| Given for the example: | ||
|
|
||
| - There is a `light` and `dark` color scheme | ||
| - The theme is named `ocean` | ||
|
|
||
| ### Auto-Theme with light auto Color Scheme | ||
|
|
||
| ```json | ||
| { | ||
| root: true, | ||
| colorScheme: { | ||
| default: 'light', | ||
| activation: 'auto', | ||
| manual: false | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ```css | ||
| /* No color scheme related tokens */ | ||
| :root, .ocean { | ||
| --bar: baz; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) { | ||
| :root, .ocean { | ||
| --foo: lightblue; | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| :root, .ocean { | ||
| --foo: darkblue; | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Usage: | ||
|
|
||
| ```html | ||
| <head> | ||
| <link rel="stylesheet" href="path/to/ocean.css" type="text/css"> | ||
| </head> | ||
| <body> | ||
| </body> | ||
| ``` | ||
|
|
||
| ### Auto-ocean with light auto Color Scheme and Manual Activation | ||
|
|
||
| ```json | ||
| { | ||
| root: true, | ||
| colorScheme: { | ||
| default: 'light', | ||
| activation: 'auto', | ||
| manual: true | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ```css | ||
| /* No color scheme related tokens */ | ||
| :root, .ocean { | ||
| --bar: baz; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) { | ||
| :root, .ocean { | ||
| --foo: lightblue; | ||
| } | ||
| } | ||
|
|
||
| .ocean-light { | ||
| --foo: lightblue; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| :root, .ocean { | ||
| --foo: darkblue; | ||
| } | ||
| } | ||
|
|
||
| .ocean-dark { | ||
| --foo: darkblue; | ||
| } | ||
| ``` | ||
|
|
||
| Usage: | ||
|
|
||
| ```html | ||
| <head> | ||
| <link rel="stylesheet" href="path/to/ocean.css" type="text/css"> | ||
| </head> | ||
| <body> | ||
| <div>Here is the light</div> | ||
| <div class="ocean-dark">Lights out</div> | ||
| </body> | ||
| ``` | ||
|
|
||
| ### Manual-ocean with light auto Color Scheme | ||
|
|
||
| ```json | ||
| { | ||
| root: false, | ||
| colorScheme: { | ||
| default: 'light', | ||
| activation: 'auto', | ||
| manual: false | ||
| --- | ||
| id: build | ||
| title: Build | ||
| --- | ||
|
|
||
| The build action triggers the build step of your used token manager (e.g. | ||
| style-dictionary or theo). Configure your tool as usual and theemo will put | ||
| extras on top, so it can enable the e2e flow. This page describes the extras of | ||
| theemo for each token manager tool. | ||
|
|
||
| ## Style Dictionary | ||
|
|
||
| Configure your build step as | ||
| [explained](https://amzn.github.io/style-dictionary/#/config) in `config.js`. | ||
| Theemo adds custom | ||
| [transforms](https://amzn.github.io/style-dictionary/#/transforms) and in doing | ||
| so takes over the build step as suggested (so you don't have to). The _custom | ||
| transform_ theemo adds is let you define transforms in your `config.js` - | ||
| without the need to hook them in via API. | ||
| To use custom transforms, add `transforms` object as a root key to your | ||
| `config.js`. Inside the transforms, add objects for `name`, `attribute` or | ||
| `value`. Each object has to follow the | ||
| [`transform`](https://amzn.github.io/style-dictionary/#/api?id=registertransform) | ||
| object. | ||
|
|
||
| Here is an example: | ||
|
|
||
| ```js | ||
| module.exports = { | ||
| source: [...], | ||
| platforms: {...}, | ||
| transforms: { | ||
| name: { | ||
| matcher(property) { | ||
| return property.name.includes('.$'); | ||
| }, | ||
| transformer(property) { | ||
| property.path.pop(); | ||
|
|
||
| const index = property.name.indexOf('.$') | ||
| return property.name.slice(0, index); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ```css | ||
| /* No color scheme related tokens */ | ||
| .ocean { | ||
| --bar: baz; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) { | ||
| .ocean { | ||
| --foo: lightblue; | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| .ocean { | ||
| --foo: darkblue; | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Usage 1: | ||
|
|
||
| ```html | ||
| <head> | ||
| <link rel="stylesheet" href="path/to/ocean.css" type="text/css"> | ||
| </head> | ||
| <body class="ocean"> | ||
| Activation for the whole document | ||
| </body> | ||
| ``` | ||
|
|
||
| Usage 2: | ||
|
|
||
| ```html | ||
| <head> | ||
| <link rel="stylesheet" href="path/to/ocean.css" type="text/css"> | ||
| </head> | ||
| <body> | ||
| Here is no theme active | ||
|
|
||
| <div class="ocean">Swim in the water</div> | ||
| </body> | ||
| ``` |
Oops, something went wrong.