mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
LiHuashen
+116
@@ -0,0 +1,116 @@
|
||||
<img src="assets/logo.png" alt="M5Stack Documents logo" title="StyleDictionary" width="150" align="right" />
|
||||
|
||||
[](https://badge.fury.io/js/style-dictionary)
|
||||
|
||||
[](https://travis-ci.org/amzn/style-dictionary)
|
||||
[](https://codeclimate.com/github/amzn/style-dictionary)
|
||||
|
||||
# M5Stack Documents
|
||||
> *Style once, use everywhere.*
|
||||
|
||||
A M5Stack Documentation is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - 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.
|
||||
|
||||
When you are managing user experiences, it can be quite challenging to keep styles consistent and synchronized across multiple development platforms and devices. At the same time, designers, developers, PMs and others must be able to have consistent and up-to-date style documentation to enable effective work and communication. Even then, mistakes inevitably happen and the design may not be implemented accurately. StyleDictionary solves this by automatically generating style definitions across all platforms from a single source - removing roadblocks, errors, and inefficiencies across your workflow.
|
||||
|
||||
## Watch the Demo on Youtube
|
||||
[](http://youtu.be/1HREvonfqhY)
|
||||
|
||||
## The basics
|
||||
__A M5Stack Documents consists of:__
|
||||
1. [Style properties](#style-properties) organized in JSON files
|
||||
1. Static assets that can be used across platforms
|
||||
|
||||
__What a M5Stack Documents does:__
|
||||
1. Allows the style properties and assets to be consumed in any platform or language
|
||||
|
||||
Let's take a look at a very basic example.
|
||||
|
||||
```json
|
||||
{
|
||||
"size": {
|
||||
"font": {
|
||||
"small" : { "value": "10px" },
|
||||
"medium": { "value": "16px" },
|
||||
"large" : { "value": "24px" },
|
||||
"base" : { "value": "{size.font.medium.value}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Here we are creating some basic font size properties. The style property `size.font.small` is "10px" for example. The style definition size.font.base.value is automatically aliased to the value found in size.font.medium.value, so both of those resolve to "16px".
|
||||
|
||||
Now what the M5Stack Documents build system will do with this information is convert it to different formats so that you can use these values in any type of codebase. From this one file you can generate any number of files like:
|
||||
|
||||
```scss
|
||||
$size-font-small: 10px;
|
||||
$size-font-medium: 16px;
|
||||
$size-font-large: 24px;
|
||||
$size-font-base: 16px;
|
||||
```
|
||||
|
||||
```xml
|
||||
<dimen name="font-small">10sp</dimen>
|
||||
<dimen name="font-medium">16sp</dimen>
|
||||
<dimen name="font-large">24sp</dimen>
|
||||
<dimen name="font-base">16sp</dimen>
|
||||
```
|
||||
|
||||
```objectivec
|
||||
float const SizeFontSmall = 10.00f;
|
||||
float const SizeFontMedium = 16.00f;
|
||||
float const SizeFontLarge = 24.00f;
|
||||
float const SizeFontBase = 16.00f;
|
||||
```
|
||||
|
||||
This is a very simple example, take a deeper dive into the M5Stack Documents framework in
|
||||
|
||||
The M5Stack Documents framework is completely extensible and modular so you can create any type of file from a M5Stack Documents.
|
||||
If there is a new language, platform, file type, you can extend the M5Stack Documents framework to create the files you need.
|
||||
|
||||
__Some other things you can build with a M5Stack Documents__
|
||||
1. Images and graphics
|
||||
1. Sketch files
|
||||
1. Documentation site
|
||||
1. _Literally anything_
|
||||
|
||||
|
||||
## Style Properties
|
||||
|
||||
> Synonyms: design token, design variable, design constant, atom
|
||||
|
||||
A style property is a key/value data to describe any fundamental/atomic visual properties. This information is stored in a canonical
|
||||
source, the M5Stack Documents, and transformed for use in different platforms, languages, and contexts. A simple example is a color.
|
||||
A color can be represented in many ways, all of these are the same color: `#ffffff`, `rgb(255,255,255)`, `hsl(0,0,1)`.
|
||||
|
||||
A M5Stack Documents organizes style properties in a structured way for easy access. Style properties are organized as a deep object
|
||||
with the leaf nodes being the style properties.
|
||||
|
||||
```json
|
||||
{
|
||||
"color": {
|
||||
"font": {
|
||||
"base": { "value": "#111111" },
|
||||
"secondary": { "value": "#333333" },
|
||||
"tertiary": { "value": "#666666" },
|
||||
"inverse": {
|
||||
"base": { "value": "#ffffff" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this example there are 4 style properties: `color.font.base`, `color.font.secondary`, `color.font.tertiary`, and `color.font.inverse.base`.
|
||||
A style property is any object in the JSON that has a `value` attribute on it. In this way you can nest properties at different levels.
|
||||
This allows you to easily access the property as well as do things like get all the inverse font colors.
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Please help make this framework better. For more information take a look at [CONTRIBUTING.md](https://github.com/amzn/style-dictionary/blob/master/CONTRIBUTING.md)
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[Apache 2.0](https://github.com/amzn/style-dictionary/blob/master/LICENSE)
|
||||
@@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
# Style Dictionary
|
||||
|
||||
> Style once, use everywhere.
|
||||
|
||||
**Style Dictionary** is a build system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of. 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.
|
||||
|
||||
[GitHub](https://github.com/amzn/style-dictionary)
|
||||
[Get Started](README.md)
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
- Getting started
|
||||
- [Overview](README.md)
|
||||
- [Quick Start](quick_start.md)
|
||||
- [Examples](examples.md)
|
||||
- [Package structure](package_structure.md)
|
||||
- [Extending](extending.md)
|
||||
|
||||
- Reference
|
||||
- [API](api.md)
|
||||
- [Transforms](transforms.md)
|
||||
- [Transform groups](transform_groups.md)
|
||||
- [Formats](formats.md)
|
||||
- [Templates](templates.md)
|
||||
- [Actions](actions.md)
|
||||
- [Build process](build_process.md)
|
||||
|
||||
- **Links**
|
||||
- [Demo Sandbox](https://codesandbox.io/s/xv36w4695o)
|
||||
- [Github](https://github.com/jhildenbiddle/docsify-themeable)
|
||||
- [NPM](https://www.npmjs.com/package/docsify-themeable)
|
||||
- [@jhildenbiddle](http://twitter.com/jhildenbiddle)
|
||||
@@ -0,0 +1,44 @@
|
||||
# Actions
|
||||
|
||||
Actions provide a way to run custom build code such as generating binary assets like images.
|
||||
|
||||
Here are all the actions that come with the Style Dictionary build system. We try to include what most people might need. You can define custom actions with the [`registerAction`](api.md#registeraction). If you think we are missing some things, take a look at our [contributing docs](https://github.com/amzn/style-dictionary/blob/master/CONTRIBUTING.md) and send us a pull request! If you have a specific need for your project, you can always write your own [custom actions](#adding-custom-actions).
|
||||
|
||||
You use actions in your config file under platforms > [platform] > actions
|
||||
|
||||
```json
|
||||
{
|
||||
"source": ["properties/**/*.json"],
|
||||
"platforms": {
|
||||
"android": {
|
||||
"transformGroup": "android",
|
||||
"files": [],
|
||||
"actions": ["copy_assets"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
----
|
||||
|
||||
## Pre-defined Actions
|
||||
|
||||
[lib/common/actions.js](https://github.com/amzn/style-dictionary/blob/master/lib/common/actions.js)
|
||||
|
||||
### android/copyImages
|
||||
|
||||
|
||||
Action to copy images into appropriate android directories.
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
### copy_assets
|
||||
|
||||
|
||||
Action that copies everything in the assets directory to a new assets directory in the build path of the platform.
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
+296
@@ -0,0 +1,296 @@
|
||||
# API
|
||||
|
||||
### buildAllPlatforms
|
||||
> StyleDictionary.buildAllPlatforms() ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
The only top-level method that needs to be called
|
||||
to build the Style Dictionary.
|
||||
|
||||
**Example**
|
||||
```js
|
||||
const StyleDictionary = require('style-dictionary').extend('config.json');
|
||||
StyleDictionary.buildAllPlatforms();
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### buildPlatform
|
||||
> StyleDictionary.buildPlatform(platform) ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Takes a platform and performs all transforms to
|
||||
the properties object (non-mutative) then
|
||||
builds all the files and performs any actions. This is useful if you only want to
|
||||
build the artifacts of one platform to speed up the build process.
|
||||
|
||||
This method is also used internally in [buildAllPlatforms](#buildAllPlatforms) to
|
||||
build each platform defined in the config.
|
||||
|
||||
|
||||
| Param | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| platform | <code>String</code> | Name of the platform you want to build. |
|
||||
|
||||
**Example**
|
||||
```js
|
||||
StyleDictionary.buildPlatform('web');
|
||||
```
|
||||
```bash
|
||||
$ style-dictionary build --platform web
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### cleanAllPlatforms
|
||||
> StyleDictionary.cleanAllPlatforms() ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Does the reverse of [buildAllPlatforms](#buildAllPlatforms) by
|
||||
performing a clean on each platform. This removes all the files
|
||||
defined in the platform and calls the undo method on any actions.
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
### cleanPlatform
|
||||
> StyleDictionary.cleanPlatform(platform) ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Takes a platform and performs all transforms to
|
||||
the properties object (non-mutative) then
|
||||
cleans all the files and perfoms the undo method of any [actions](actions.md).
|
||||
|
||||
|
||||
| Param | Type |
|
||||
| --- | --- |
|
||||
| platform | <code>String</code> |
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
### exportPlatform
|
||||
> StyleDictionary.exportPlatform(platform) ⇒ <code>Object</code>
|
||||
|
||||
|
||||
|
||||
|
||||
Exports a properties object with applied
|
||||
platform transforms.
|
||||
|
||||
This is useful if you want to use a style
|
||||
dictionary in JS build tools like webpack.
|
||||
|
||||
|
||||
| Param | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| platform | <code>String</code> | The platform to be exported. Must be defined on the style dictionary. |
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
### extend
|
||||
> StyleDictionary.extend(config) ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Create a Style Dictionary
|
||||
|
||||
|
||||
| Param | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| config | [<code>Config</code>](#Config) | Configuration options to build your style dictionary. If you pass a string, it will be used as a path to a JSON config file. You can also pass an object with the configuration. |
|
||||
|
||||
**Example**
|
||||
```js
|
||||
const StyleDictionary = require('style-dictionary').extend('config.json');
|
||||
|
||||
const StyleDictionary = require('style-dictionary').extend({
|
||||
source: ['properties/*.json'],
|
||||
platforms: {
|
||||
scss: {
|
||||
transformGroup: 'scss',
|
||||
buildPath: 'build/',
|
||||
files: [{
|
||||
destination: 'variables.scss',
|
||||
format: 'scss/variables'
|
||||
}]
|
||||
}
|
||||
// ...
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### registerAction
|
||||
> StyleDictionary.registerAction(action) ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Adds a custom action to the style property builder. Custom
|
||||
actions can do whatever you need, such as: copying files,
|
||||
base64'ing files, running other build scripts, etc.
|
||||
After you register a custom action, you then use that
|
||||
action in a platform your config.json
|
||||
|
||||
Actions run after the files in a platform are generated so you
|
||||
can perform operations on files generated by the style dictionary.
|
||||
Actions are run sequentially, if you write synchronous code then
|
||||
it will block other actions, or if you use asynchronous code like Promises
|
||||
it will not block.
|
||||
|
||||
|
||||
| Param | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| action | <code>Object</code> | |
|
||||
| action.name | <code>String</code> | The name of the action |
|
||||
| action.do | <code>function</code> | The action in the form of a function. |
|
||||
| [action.undo] | <code>function</code> | A function that undoes the action. |
|
||||
|
||||
**Example**
|
||||
```js
|
||||
StyleDictionary.registerAction({
|
||||
name: 'copy_assets',
|
||||
do: function(dictionary, config) {
|
||||
console.log('Copying assets directory');
|
||||
fs.copySync('assets', config.buildPath + 'assets');
|
||||
},
|
||||
undo: function(dictionary, config) {
|
||||
console.log('Cleaning assets directory');
|
||||
fs.removeSync(config.buildPath + 'assets');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### registerFormat
|
||||
> StyleDictionary.registerFormat(format) ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Add a custom format to the style dictionary
|
||||
|
||||
|
||||
| Param | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| format | <code>Object</code> | |
|
||||
| format.name | <code>String</code> | Name of the format to be referenced in your config.json |
|
||||
| format.formatter | <code>function</code> | Function to perform the format. Takes 2 arguments, `dictionary` and `config` Must return a string. |
|
||||
|
||||
**Example**
|
||||
```js
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'json',
|
||||
formatter: function(dictionary, config) {
|
||||
return JSON.stringify(dictionary.properties, null, 2);
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### registerTemplate
|
||||
> StyleDictionary.registerTemplate(template) ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Add a custom template to the Style Dictionary
|
||||
|
||||
|
||||
| Param | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| template | <code>Object</code> | |
|
||||
| template.name | <code>String</code> | The name of your template. You will refer to this in your config.json file. |
|
||||
| template.template | <code>String</code> | Path to your lodash template |
|
||||
|
||||
**Example**
|
||||
```js
|
||||
StyleDictionary.registerTemplate({
|
||||
name: 'Swift/colors',
|
||||
template: __dirname + '/templates/swift/colors.template'
|
||||
});
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### registerTransform
|
||||
> StyleDictionary.registerTransform(transform) ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Add a custom transform to the Style Dictionary
|
||||
Transforms can manipulate a property's name, value, or attributes
|
||||
|
||||
|
||||
| Param | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| transform | <code>Object</code> | Transform object |
|
||||
| transform.type | <code>String</code> | Type of transform, can be: name, attribute, or value |
|
||||
| transform.name | <code>String</code> | Name of the transformer so a transformGroup can call a list of transforms. |
|
||||
| [transform.matcher] | <code>function</code> | Matcher function, return boolean if transform should be applied. If you omit the matcher function, it will match all properties. |
|
||||
| transform.transformer | <code>function</code> | Performs a transform on a property object, should return a string or object depending on the type. Will only update certain properties so you can't mess up property objects on accident. |
|
||||
|
||||
**Example**
|
||||
```js
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'time/seconds',
|
||||
type: 'value',
|
||||
matcher: function(prop) {
|
||||
return prop.attributes.category === 'time';
|
||||
},
|
||||
transformer: function(prop) {
|
||||
// Note the use of prop.original.value,
|
||||
// before any transforms are performed, the build system
|
||||
// clones the original property to the 'original' attribute.
|
||||
return (parseInt(prop.original.value) / 1000).toString() + 's';
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### registerTransformGroup
|
||||
> StyleDictionary.registerTransformGroup(transformGroup) ⇒ [<code>style-dictionary</code>](#module_style-dictionary)
|
||||
|
||||
|
||||
|
||||
|
||||
Add a custom transformGroup to the Style Dictionary, which is a
|
||||
group of transforms.
|
||||
|
||||
|
||||
| Param | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| transformGroup | <code>Object</code> | |
|
||||
| transformGroup.name | <code>String</code> | Name of the transform group that will be referenced in config.json |
|
||||
| transformGroup.transforms | <code>Array.<String></code> | Array of strings that reference the name of transforms to be applied in order. Transforms must be defined and match the name or there will be an error at build time. |
|
||||
|
||||
**Example**
|
||||
```js
|
||||
StyleDictionary.registerTransformGroup({
|
||||
name: 'Swift',
|
||||
transforms: [
|
||||
'attribute/cti',
|
||||
'size/pt',
|
||||
'name/cti'
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
@@ -0,0 +1,42 @@
|
||||
.markdown-section iframe[src*="buttons.github.io"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figure.thumbnails img {
|
||||
margin: 0.75em 0;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
@media (min-width: 30em) {
|
||||
figure.thumbnails:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
figure.thumbnails img {
|
||||
float: left;
|
||||
width: calc(50% - 0.75em);
|
||||
}
|
||||
|
||||
figure.thumbnails img:nth-child(even) {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
@supports (display: flex) {
|
||||
figure.thumbnails {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
figure.thumbnails img {
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
figure.thumbnails img + img {
|
||||
margin: 0 0 0 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 5,
|
||||
"sourceType": "script"
|
||||
},
|
||||
"env": {
|
||||
"commonjs": false,
|
||||
"es6" : false,
|
||||
"node" : false
|
||||
},
|
||||
"rules": {
|
||||
"no-var" : "off",
|
||||
"prefer-const": "off"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
(function() {
|
||||
// Functions
|
||||
// =========================================================================
|
||||
/**
|
||||
* Adds event listeners to change active stylesheet and restore previously
|
||||
* activated stylesheet on reload.
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* This link:
|
||||
* <a href="#" data-link-title="Foo">Foo</a>
|
||||
* Will active this existing link:
|
||||
* <link rel="stylesheet alternate" title="Foo" href="..." >
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* This link:
|
||||
* <a href="#" data-link-href="path/to/file.css">Bar</a>
|
||||
* Will activate this existing link:
|
||||
* <link rel="stylesheet alternate" title="[someID]" href="path/to/file.css" >
|
||||
* Or generate this active link:
|
||||
* <link rel="stylesheet" title="Bar" href="path/to/file.css" >
|
||||
*/
|
||||
function initStyleSwitcher() {
|
||||
var isInitialzed = false;
|
||||
var sessionStorageKey = 'activeStylesheetHref';
|
||||
|
||||
function handleSwitch(activeHref, activeTitle) {
|
||||
var activeElm = document.querySelector('link[href*="' + activeHref +'"],link[title="' + activeTitle +'"]');
|
||||
|
||||
if (!activeElm && activeHref) {
|
||||
activeElm = document.createElement('link');
|
||||
activeElm.setAttribute('href', activeHref);
|
||||
activeElm.setAttribute('rel', 'stylesheet');
|
||||
activeElm.setAttribute('title', activeTitle);
|
||||
|
||||
document.head.appendChild(activeElm);
|
||||
|
||||
activeElm.addEventListener('load', function linkOnLoad() {
|
||||
activeElm.removeEventListener('load', linkOnLoad);
|
||||
setActiveLink(activeElm);
|
||||
});
|
||||
}
|
||||
else if (activeElm) {
|
||||
setActiveLink(activeElm);
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveLink(activeElm) {
|
||||
var activeHref = activeElm.getAttribute('href');
|
||||
var activeTitle = activeElm.getAttribute('title');
|
||||
var inactiveElms = document.querySelectorAll('link[title]:not([href*="' + activeHref +'"]):not([title="' + activeTitle +'"])');
|
||||
|
||||
// Remove "alternate" keyword
|
||||
activeElm.setAttribute('rel', (activeElm.rel || '').replace(/\s*alternate/g, '').trim());
|
||||
|
||||
// Force enable stylesheet (required for some browsers)
|
||||
activeElm.disabled = true;
|
||||
activeElm.disabled = false;
|
||||
|
||||
// Store active style sheet
|
||||
sessionStorage.setItem(sessionStorageKey, activeHref);
|
||||
|
||||
// Disable other elms
|
||||
for (var i = 0; i < inactiveElms.length; i++) {
|
||||
var elm = inactiveElms[i];
|
||||
|
||||
elm.disabled = true;
|
||||
|
||||
// Fix for browsersync and alternate stylesheet updates. Will
|
||||
// cause FOUC when switching stylesheets during development, but
|
||||
// required to properly apply style updates when alternate
|
||||
// stylesheets are enabled.
|
||||
if (window.browsersyncObserver) {
|
||||
var linkRel = elm.getAttribute('rel') || '';
|
||||
var linkRelAlt = linkRel.indexOf('alternate') > -1 ? linkRel : (linkRel + ' alternate').trim();
|
||||
|
||||
elm.setAttribute('rel', linkRelAlt);
|
||||
}
|
||||
}
|
||||
|
||||
// CSS custom property ponyfil
|
||||
if ((window.$docsify || {}).themeable) {
|
||||
window.$docsify.themeable.util.cssVars();
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
if (!isInitialzed) {
|
||||
isInitialzed = true;
|
||||
|
||||
// Restore active stylesheet
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var activeHref = sessionStorage.getItem(sessionStorageKey);
|
||||
|
||||
if (activeHref) {
|
||||
handleSwitch(activeHref);
|
||||
}
|
||||
});
|
||||
|
||||
// Update active stylesheet
|
||||
document.addEventListener('click', function(evt) {
|
||||
var dataHref = evt.target.getAttribute('data-link-href');
|
||||
var dataTitle = evt.target.getAttribute('data-link-title')
|
||||
|
||||
if (dataHref || dataTitle) {
|
||||
dataTitle = dataTitle
|
||||
|| evt.target.textContent
|
||||
|| '_' + Math.random().toString(36).substr(2, 9); // UID
|
||||
|
||||
handleSwitch(dataHref, dataTitle);
|
||||
evt.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Main
|
||||
// =========================================================================
|
||||
initStyleSwitcher();
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,393 @@
|
||||
:root {
|
||||
--theme-color: #1FC5BF;
|
||||
--theme-color-light: #99EBE2;
|
||||
--theme-color-dark: #00B3AC;
|
||||
--theme-color-secondary: #6A5096;
|
||||
--theme-color-secondary-dark: #3F1C77;
|
||||
--theme-color-secondary-light: #C4B2E1;
|
||||
|
||||
--text-color-base: #2E2E46;
|
||||
--text-color-secondary: #646473;
|
||||
--text-color-tertiary: #81818E;
|
||||
}
|
||||
|
||||
|
||||
::selection {
|
||||
background: var(--theme-color-light);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
font-family: 'Source Sans Pro','Open Sans','Helvetica Neue',Arial,sans-serif;
|
||||
color: var(--text-color-base);
|
||||
}
|
||||
|
||||
* {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
div.search {
|
||||
border-bottom: 2px solid #787881;
|
||||
border: none;
|
||||
background-color: var(--theme-color-secondary-light);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar .search input {
|
||||
background: none;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
padding: 1rem;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar .search input:focus {
|
||||
background-color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
aside.sidebar {
|
||||
border: none;
|
||||
background-color: var(--theme-color-secondary);
|
||||
color: #fff;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
body.close .sidebar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
color: rgba(255,255,255,0.8);
|
||||
color: var(--theme-color-light);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sidebar ul li.active>a {
|
||||
border-width: 0.1rem;
|
||||
}
|
||||
|
||||
.sidebar ul li a:hover {
|
||||
text-decoration: none;
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.sidebar .sidebar-nav ul li.active>a {
|
||||
color: #fff;
|
||||
border-right: 0.2rem solid var(--theme-color-secondary-light,#29D0CA);
|
||||
}
|
||||
|
||||
.search .results-panel.show {
|
||||
background-color: #05827E;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.sidebar .search .matching-post {
|
||||
padding: 0;
|
||||
border-bottom: 0.2rem solid #E4E4E6;
|
||||
}
|
||||
|
||||
.sidebar .search .matching-post:first-child {
|
||||
border-top: 0.2rem solid #E4E4E6;
|
||||
}
|
||||
|
||||
.search .search-keyword {
|
||||
/* color: #fff; */
|
||||
}
|
||||
|
||||
.search a {
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search a:hover {
|
||||
color: var(--theme-color-dark);
|
||||
}
|
||||
|
||||
.search p.empty {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: #F1F1F2;
|
||||
}
|
||||
|
||||
.sidebar > h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
display: block;
|
||||
width: 4rem;
|
||||
vertical-align: bottom;
|
||||
line-height: 1.6;
|
||||
height: 4rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body .sidebar-toggle {
|
||||
background: none;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body .sidebar-toggle span {
|
||||
transition: all 0.3s linear;
|
||||
background-color: var(--theme-color-light);
|
||||
height: 0.25rem;
|
||||
width: 1.5rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
transform-origin: 0;
|
||||
}
|
||||
|
||||
body.close .sidebar-toggle {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
body.close .sidebar-toggle span {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
body .sidebar-toggle span:nth-child(1) { top:0; }
|
||||
body .sidebar-toggle span:nth-child(2) { top:0.65rem; }
|
||||
body .sidebar-toggle span:nth-child(3) { top:1.25rem; }
|
||||
|
||||
.sidebar-toggle .sidebar-toggle-button:hover { opacity: 1; }
|
||||
|
||||
.sidebar-toggle:hover span:nth-child(1) { transform: rotate(45deg); width: 1.75rem; }
|
||||
.sidebar-toggle:hover span:nth-child(2) { opacity: 0; }
|
||||
.sidebar-toggle:hover span:nth-child(3) { transform: rotate(-45deg); width: 1.75rem; }
|
||||
|
||||
.close .sidebar-toggle:hover span:nth-child(1) { transform:rotate(0); width:1.5rem; top:0.65rem; }
|
||||
.close .sidebar-toggle:hover span:nth-child(2) { opacity: 1; transform:rotate(90deg); }
|
||||
.close .sidebar-toggle:hover span:nth-child(3) { transform:rotate(0); width:1.5rem; top:0.65rem; }
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown-section em,
|
||||
.markdown-section blockquote {
|
||||
color: var(--text-color-tertiary);
|
||||
}
|
||||
|
||||
.cover-main img {
|
||||
max-width: 10rem;
|
||||
max-height: 10rem;
|
||||
}
|
||||
|
||||
section.cover p {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
section.cover .cover-main a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
section.cover .cover-main a::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.cover .cover-main blockquote {
|
||||
font-style: italic;
|
||||
color: #868C91;
|
||||
}
|
||||
|
||||
section.cover .cover-main>p:last-child a:first-child {
|
||||
border-width: 0.2rem;
|
||||
color: var(--theme-color-secondary);
|
||||
border-color: var(--theme-color-secondary);
|
||||
}
|
||||
|
||||
section.cover .cover-main>p:last-child a:last-child {
|
||||
background-color: var(--theme-color-secondary);
|
||||
border-color: var(--theme-color-secondary);
|
||||
}
|
||||
|
||||
section.cover .cover-main>p:last-child a:hover {
|
||||
color: var(--theme-color-secondary-dark);
|
||||
border-color: var(--theme-color-secondary-dark);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
section.cover .cover-main>p:last-child a:last-child:hover {
|
||||
background-color: var(--theme-color-secondary-dark);
|
||||
border-color: var(--theme-color-secondary-dark);
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.anchor::before {
|
||||
content: '\1F449';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1.25em;
|
||||
opacity: 0;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.anchor:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
section.cover .cover-main {
|
||||
margin: 20vh 20vw;
|
||||
}
|
||||
|
||||
.app-name-link {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-sub-sidebar li:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.markdown-section pre,
|
||||
.markdown-section pre > code {
|
||||
background-color: #2E2E46;
|
||||
color: rgba(255,255,255,0.75);
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown-section code {
|
||||
display: inline-block;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
.markdown-section pre {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.markdown-section pre > code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-section hr {
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #585967;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata{color:#999999;}
|
||||
.token.property,
|
||||
.token.number,
|
||||
.token.function-name,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted{color:#5a9bcf;}.token.boolean{color:#ff8b50;}.token.tag{color:#fc929e;}.token.string{color:#8dc891;}.token.punctuation{color:#5FB3B3;}
|
||||
.token.selector,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted{color:#D8DEE9;}.token.function{color:#79b6f2;}
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.token.variable{color:#d7deea;}.token.attr-value{color:#8dc891;}.token.keyword{color:#c5a5c5;}
|
||||
|
||||
.lang-scss .token.variable {
|
||||
color: #8dc891;
|
||||
}
|
||||
|
||||
.markdown-section {
|
||||
max-width: 75rem;
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
|
||||
.markdown-section ol, .markdown-section p, .markdown-section ul {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.markdown-section code {
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
font-size: 0.9em;
|
||||
padding: 6px 10px;
|
||||
/* color: #111; */
|
||||
}
|
||||
|
||||
.markdown-section table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.markdown-section table tr {
|
||||
border-width: 0.2rem 0;
|
||||
border-style: solid;
|
||||
border-color: #F1F1F2;
|
||||
}
|
||||
|
||||
.markdown-section table tr:nth-child(2n) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.markdown-section table td,
|
||||
.markdown-section table th {
|
||||
border: none;
|
||||
padding: 1.5rem 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-section table td p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.1rem solid var(--theme-color-light);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.markdown-section a:hover {
|
||||
border-color: var(--theme-color);
|
||||
color: var(--theme-color-dark);
|
||||
}
|
||||
|
||||
|
||||
/* Badges */
|
||||
.markdown-section > p:first-child > a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.docsify-copy-code-button {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width:0;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body {
|
||||
font-size: 112.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
body {
|
||||
font-size: 125%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
# Build Process
|
||||
|
||||
Here is what the build system is doing under the hood.
|
||||
|
||||
|
||||
|
||||
## CLI
|
||||
|
||||
1. The build system looks for a config file. By default it looks for config.json in the current directory, or you can specify the config path with the `-c --config` flag.
|
||||
1. If there is an `includes` attribute in the config, it will take those JSON files and deep merge them into the `properties` object.
|
||||
1. It then takes all the JSON files in the `source` attribute in the config and performs a deep merge onto the `properties` object.
|
||||
1. Then it iterates over the platforms in the config and:
|
||||
1. Perform all transforms, in order, defined in the transforms attribute or transformGroup.
|
||||
1. Build all files defined in the files array
|
||||
1. Perform any actions defined in the actions attribute
|
||||
|
||||
|
||||
## Node
|
||||
|
||||
If you use this as a node module, the steps are slightly different, but the overall.
|
||||
|
||||
1. When you call the [`extend`](api.md#extend) method, you can either pass it a path to a JSON config file, or give it a plain object that has the configuration. This will perform steps 1-3 above.
|
||||
1. Then you can now call `buildAllPlatforms` or other methods like `buildPlatform('scss')` or `exportPlatform('javascript')`. This is equivalent to step 4 above.
|
||||
|
||||
```javascript
|
||||
const StyleDictionary = require('style-dictionary');
|
||||
|
||||
const styleDictionary = StyleDictionary.extend( 'config.json' );
|
||||
// is equivalent to this:
|
||||
// const styleDictionary = StyleDictionary.extend(
|
||||
// JSON.parse( fs.readFileSync( 'config.json' ) )
|
||||
// )
|
||||
|
||||
// You can also extend with an object
|
||||
// const styleDictionary = StyleDictionary.extend({ /* config options */ });
|
||||
|
||||
// This will perform step 3 above, for each platform:
|
||||
// 1. Apply transforms
|
||||
// 2. Build files
|
||||
// 3. Perform actions
|
||||
styleDictionary.buildAllPlatforms();
|
||||
```
|
||||
@@ -0,0 +1,39 @@
|
||||
# Examples
|
||||
|
||||
To get you started, there are some example packages included that you can use. You can take a look at the code on Github or you
|
||||
can use the CLI included to generate a new package using these examples. Here is how you can do that:
|
||||
```bash
|
||||
$ mkdir MyStyleD
|
||||
$ cd MyStyleD
|
||||
$ style-dictionary init [example]
|
||||
```
|
||||
Where `[example]` is one of: `basic`, `complete`, `npm`, `s3`
|
||||
|
||||
## Basic
|
||||
[View on Github](https://github.com/amzn/style-dictionary/tree/master/example/basic)
|
||||
|
||||
This example code is bare-bones to show you what this framework can do. Use this if you want to play around with what the Style Dictionary
|
||||
can do.
|
||||
|
||||
|
||||
## Complete
|
||||
[View on Github](https://github.com/amzn/style-dictionary/tree/master/example/complete)
|
||||
|
||||
This is a more complete package and should have everything you need to get started. This package can be consumed as a Cocoapod on iOS,
|
||||
as a node module for web, and as a local library for Android.
|
||||
|
||||
## npm
|
||||
[View on Github](https://github.com/amzn/style-dictionary/tree/master/example/npm)
|
||||
|
||||
This example shows how to set up a style dictionary as an npm module, either to publish to a local npm service or to publish externally.
|
||||
|
||||
When you publish this npm module, the prepublish hook will run, calling the style dictionary build system to create the necessary files. You can also just run `npm run build` to generate the files to see what it is creating.
|
||||
|
||||
## s3
|
||||
[View on Github](https://github.com/amzn/style-dictionary/tree/master/example/s3)
|
||||
|
||||
One way to use the style dictionary framework is to build files for each platform and upload those build artifacts to an s3 bucket. The platforms can pull these files down during their build process.
|
||||
|
||||
----
|
||||
|
||||
> More coming soon...
|
||||
@@ -0,0 +1,45 @@
|
||||
# Extending
|
||||
|
||||
The style dictionary build system is made to be extended. We don't know exactly how everyone will want to use style dictionaries in their project, which is why it is easy to create custom transforms, templates, and formats.
|
||||
|
||||
* [registerTransform](api.md#registertransform)
|
||||
* [registerTransformGroup](api.md#registertransformgroup)
|
||||
* [registerFormat](api.md#registerformat)
|
||||
* [registerTemplate](api.md#registertemplate)
|
||||
* [registerAction](api.md#registeraction)
|
||||
|
||||
```javascript
|
||||
const StyleDictionary = require('style-dictionary').extend('config.json');
|
||||
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'time/seconds',
|
||||
type: 'value',
|
||||
matcher: function(prop) {
|
||||
return prop.attributes.category === 'time';
|
||||
},
|
||||
transformer: function(prop) {
|
||||
return (parseInt(prop.original.value) / 1000).toString() + 's';
|
||||
}
|
||||
});
|
||||
|
||||
StyleDictionary.buildAllPlatforms();
|
||||
```
|
||||
|
||||
You can also export your extended style dictionary as a node module if you need other projects to depend on it.
|
||||
|
||||
```javascript
|
||||
// package a
|
||||
const StyleDictionary = require('style-dictionary').extend('config.json');
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'name/uppercase',
|
||||
type: 'name',
|
||||
transformer: function(prop) {
|
||||
return prop.path.join('_').toUppercase();
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = StyleDictionary;
|
||||
|
||||
// package b
|
||||
const StyleDictionary = require('package-a');
|
||||
```
|
||||
+271
@@ -0,0 +1,271 @@
|
||||
# Formats
|
||||
|
||||
Formats are one of the ways to create files that act as interfaces for your style dictionary. For example, you want to be able to
|
||||
use your style dictionary in CSS. You can use the `css/variables` template which will create a CSS file with variables from
|
||||
your style dictionary. You can define custom formats with the [`registerFormat`](api.md#registerformat).
|
||||
|
||||
Templates and Formats serve the same purpose: use your style dictionary as data to build a file. You use formats in your config
|
||||
file under platforms > [platform] > files > [file]
|
||||
|
||||
```json
|
||||
{
|
||||
"source": ["properties/**/*.json"],
|
||||
"platforms": {
|
||||
"css": {
|
||||
"transformGroup": "css",
|
||||
"files": [
|
||||
{
|
||||
"template": "css/variables",
|
||||
"destination": "variables.css"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
>*__How are Templates different than Formats?__*
|
||||
|
||||
>Mainly syntactic sugar; anything you can do in a Template you can do in a Format. Use whichever is easier for you to write. We find
|
||||
that Templates are good if you have a lot of boilerplate code around where the style dictionary will go (like writing ObjectiveC files).
|
||||
Formats are better if there is little to no boilerplate code like a flat SCSS variables file.
|
||||
|
||||
----
|
||||
|
||||
## Pre-defined Formats
|
||||
|
||||
[lib/common/formats.js](https://github.com/amzn/style-dictionary/blob/master/lib/common/formats.js)
|
||||
|
||||
### css/variables
|
||||
|
||||
|
||||
Creates a CSS file with variable definitions based on the style dictionary
|
||||
|
||||
**Example**
|
||||
```css
|
||||
:root {
|
||||
--color-background-base: #f0f0f0;
|
||||
--color-background-alt: #eeeeee;
|
||||
}
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### scss/variables
|
||||
|
||||
|
||||
Creates a SCSS file with variable definitions based on the style dictionary
|
||||
|
||||
**Example**
|
||||
```scss
|
||||
$color-background-base: #f0f0f0;
|
||||
$color-background-alt: #eeeeee;
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### scss/icons
|
||||
|
||||
|
||||
Creates a SCSS file with variable definitions and helper classes for icons
|
||||
|
||||
**Example**
|
||||
```scss
|
||||
$content-icon-email: '\E001';
|
||||
.icon.email:before { content:$content-icon-email; }
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### less/variables
|
||||
|
||||
|
||||
Creates a LESS file with variable definitions based on the style dictionary
|
||||
|
||||
**Example**
|
||||
```less
|
||||
@color-background-base: #f0f0f0;
|
||||
@color-background-alt: #eeeeee;
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### less/icons
|
||||
|
||||
|
||||
Creates a LESS file with variable definitions and helper classes for icons
|
||||
|
||||
**Example**
|
||||
```less
|
||||
@content-icon-email: '\E001';
|
||||
.icon.email:before { content:@content-icon-email; }
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### javascript/module
|
||||
|
||||
|
||||
Creates a CommonJS module with the whole style dictionary
|
||||
|
||||
**Example**
|
||||
```js
|
||||
module.exports = {
|
||||
color: {
|
||||
base: {
|
||||
red: {
|
||||
value: '#ff000'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### javascript/object
|
||||
|
||||
|
||||
Creates a JS file a global var that is a plain javascript object of the style dictionary.
|
||||
Name the variable by adding a 'name' attribute on the file object in your config.
|
||||
|
||||
**Example**
|
||||
```js
|
||||
var StyleDictionary = {
|
||||
color: {
|
||||
base: {
|
||||
red: {
|
||||
value: '#ff000'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### javascript/umd
|
||||
|
||||
|
||||
Creates a [UMD](https://github.com/umdjs/umd) module of the style
|
||||
dictionary. Name the module by adding a 'name' attribute on the file object
|
||||
in your config.
|
||||
|
||||
**Example**
|
||||
```js
|
||||
(function(root, factory) {
|
||||
if (typeof module === "object" && module.exports) {
|
||||
module.exports = factory();
|
||||
} else if (typeof exports === "object") {
|
||||
exports["_styleDictionary"] = factory();
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
define([], factory);
|
||||
} else {
|
||||
root["_styleDictionary"] = factory();
|
||||
}
|
||||
}(this, function() {
|
||||
return {
|
||||
"color": {
|
||||
"red": {
|
||||
"value": "#FF0000"
|
||||
}
|
||||
}
|
||||
};
|
||||
}))
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### javascript/es6
|
||||
|
||||
|
||||
Creates a ES6 module of the style dictionary. You can filter the style dictionary
|
||||
to only export properties of a certain type by adding a 'filter' attribute on the
|
||||
file object in the config.
|
||||
|
||||
```json
|
||||
{
|
||||
"platforms": {
|
||||
"js": {
|
||||
"files": [
|
||||
{
|
||||
"format": "javascript/es6",
|
||||
"destination": "colors.js",
|
||||
"filter": {
|
||||
"category": "color"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Example**
|
||||
```js
|
||||
export const BackgroundBase = '#ffffff';
|
||||
export const BackgroundAlt = '#fcfcfcfc';
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### json
|
||||
|
||||
|
||||
Creates a JSON file of the style dictionary.
|
||||
|
||||
**Example**
|
||||
```json
|
||||
{
|
||||
"color": {
|
||||
"base": {
|
||||
"red": {
|
||||
"value": "#ff000"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### json/asset
|
||||
|
||||
|
||||
Creates a JSON file of just the assets defined in the style dictionary.
|
||||
|
||||
**Example**
|
||||
```js
|
||||
{
|
||||
"asset": {
|
||||
"image": {
|
||||
"logo": {
|
||||
"value": "assets/logo.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### sketch/palette
|
||||
|
||||
|
||||
Creates a sketchpalette file of all the base colors
|
||||
|
||||
**Example**
|
||||
```json
|
||||
{
|
||||
"compatibleVersion": "1.0",
|
||||
"pluginVersion": "1.1",
|
||||
"colors": [
|
||||
"#ffffff",
|
||||
"#ff0000",
|
||||
"#fcfcfc"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
* * *
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>M5Stack Documentation - Style once, use everywhere. A build system for creating cross-platform styles.</title>
|
||||
<!-- <link rel="icon" href="assets/logo.png"> -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<!-- <meta name="description" content="Style once, use everywhere. A build system for creating cross-platform styles."> -->
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no"> -->
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
|
||||
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
|
||||
<!-- <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500|Source+Sans+Pro:400,400i,600" rel="stylesheet"> -->
|
||||
<!-- <link rel="stylesheet" href="assets/styles.css"> -->
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/docsify-themeable/dist/css/theme-simple.css" title="Simple">
|
||||
<link rel="stylesheet" href="assets/css/main.css">
|
||||
|
||||
<!-- Alternate Stylesheets -->
|
||||
<link rel="stylesheet alternate" href="https://unpkg.com/docsify-themeable/dist/css/theme-defaults.css" title="Defaults">
|
||||
<link rel="stylesheet alternate" href="https://unpkg.com/docsify-themeable/dist/css/theme-simple-dark.css" title="Simple Dark">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="#/">EN</a>
|
||||
<a href="#/zh-cn/">中文</a>
|
||||
</nav>
|
||||
<div id="app">Loading...</div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'M5Stack Documentation',
|
||||
loadSidebar: true,
|
||||
alias: {
|
||||
'/.*/_sidebar.md': '/_sidebar.md'
|
||||
},
|
||||
loadNavbar: true,
|
||||
coverpage: false,
|
||||
auto2top: true,
|
||||
autoHeader: false,
|
||||
subMaxLevel: 3,
|
||||
maxLevel: 4,
|
||||
homepage : 'README.md',
|
||||
// logo: '/assets/logo.png',
|
||||
themeColor: '#3F51B5',
|
||||
mergeNavbar: true,
|
||||
// formatUpdated: '{MM}/{DD} {HH}:{mm}',
|
||||
|
||||
// formatUpdated: function(time) {
|
||||
// // ...
|
||||
|
||||
// return time;
|
||||
// },
|
||||
repo: 'https://github.com/watson8544/M5Stack-Documentation-docsify',
|
||||
search: {
|
||||
paths: 'auto',
|
||||
placeholder: 'Search',
|
||||
noData: 'No Results.',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify-copy-code"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-scss.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-json.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-c.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-objectivec.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user