Skip to content

Commit 6637a72

Browse files
lukasoppermannlukasoppermann
committed
update readme
1 parent 19f251f commit 6637a72

14 files changed

+35
-2838
lines changed

‎README.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,15 @@ Every property of a style will be converted to an individual token. For a `Text
4747
### Custom design tokens
4848
The plugin also supports custom tokens for `borders`, `radii` & `spaces`.
4949

50-
Every custom design token must be within a Frame with a name starting with _tokens.
50+
- Every custom design token must be within a `Frame` with a name starting with `_tokens`.
51+
- The token itself has to have a name starting with `sizes`, `borders` or `radii` and has to be a `Rectangle` or `Main Component`. This is so that the plugin can identify what is and what isn't a token.
5152

53+
If you wanted to create a custom spacer token for an `8px` space you would do the following:
54+
55+
1. Create a new `Frame` and name ot `_tokens/spacers` (Note: It must start with `_tokens`)
56+
2. Create a new `Component`, set its width to `8px` (currently only width is used for size elements)
57+
3. Name the new component `sizes/spacers/8px` (Note: It must start with `sizes`, `borders` or `radii`)
58+
4. Run the plugin `Design Tokens > Export Design Tokens`
5259

5360
### Available properties
5461
To allow for maximum customizability I decided to provide all values that Fimga provides. Many are not applicable to for example `css` but may be usable in other languages.

‎manifest.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"main": "dist/plugin.js",
66
"ui": "ui/settings.html",
77
"menu": [
8-
{"name": "Export Design Tokens", "command": "export"},
9-
{"name": "Settings", "command": "settings"}
8+
{"name": "Export Design Tokens", "command": "export"}
109
]
1110
}

‎tests/amazn-style-dictionary/build/android/colors.xml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
<!--
44
Do not edit directly
5-
Generated on Sat, 26 Sep 2020 12:57:16 GMT
5+
Generated on Mon, 28 Sep 2020 11:44:15 GMT
66
-->
77
<resources>
8+
<color name="color_whatever">#ff010101</color>
89

910
</resources>

‎tests/amazn-style-dictionary/build/android/font_dimens.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<!--
44
Do not edit directly
5-
Generated on Sat, 26 Sep 2020 12:57:16 GMT
5+
Generated on Mon, 28 Sep 2020 11:44:15 GMT
66
-->
77
<resources>
88

‎tests/amazn-style-dictionary/build/css/_variables.css

Lines changed: 2 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,8 @@
11
/**
22
* Do not edit directly
3-
* Generated on Sat, 26 Sep 2020 12:57:16 GMT
3+
* Generated on Mon, 28 Sep 2020 11:44:15 GMT
44
*/
55

66
:root {
7-
--sizes-8: 8;
8-
--sizes-11: 11;
9-
--sizes-spacers-16: 16;
10-
--sizes-spacers-32: 32; /* 32px spacer component */
11-
--borders-2-of-them-stroke-align: inside;
12-
--borders-2-of-them-dash-pattern: ;
13-
--borders-2-of-them-stroke-cap: none;
14-
--borders-2-of-them-stroke-join: miter;
15-
--borders-2-of-them-stroke-miter-angle: 4;
16-
--borders-2-of-them-stroke-weight: 1;
17-
--borders-2-of-them-stroke: rgba(0, 0, 0, 1);
18-
--borders-red-1-px-stroke-align: inside;
19-
--borders-red-1-px-dash-pattern: ;
20-
--borders-red-1-px-stroke-cap: none;
21-
--borders-red-1-px-stroke-join: miter;
22-
--borders-red-1-px-stroke-miter-angle: 4;
23-
--borders-red-1-px-stroke-weight: 1;
24-
--borders-red-1-px-stroke: rgba(1, 0.029, 0.029, 1);
25-
--borders-green-4-px-dotted-stroke-align: inside;
26-
--borders-green-4-px-dotted-dash-pattern: 20,20;
27-
--borders-green-4-px-dotted-stroke-cap: round;
28-
--borders-green-4-px-dotted-stroke-join: round;
29-
--borders-green-4-px-dotted-stroke-miter-angle: 4;
30-
--borders-green-4-px-dotted-stroke-weight: 4;
31-
--borders-green-4-px-dotted-stroke: rgba(0.25, 1, 0.73, 1);
32-
--borders-green-4-px-gradient-stroke-align: inside;
33-
--borders-green-4-px-gradient-dash-pattern: 4,3;
34-
--borders-green-4-px-gradient-stroke-cap: arrow_lines;
35-
--borders-green-4-px-gradient-stroke-join: miter;
36-
--borders-green-4-px-gradient-stroke-miter-angle: 2.613;
37-
--borders-green-4-px-gradient-stroke-weight: 4;
38-
--radii-mixed-radius: mixed;
39-
--radii-mixed-radius-type: mixed;
40-
--radii-mixed-smoothing: 0.62;
41-
--colors-orange: rgba(1, 0.5, 0.25, 1); /* Our primary color */
42-
--colors-green: rgba(0.25, 1, 0.73, 1);
43-
--colors-blue: rgba(0.017, 0.292, 1, 1);
44-
--colors-secondary-green: rgba(0.14, 0.688, 0.195, 1);
45-
--colors-secondary-yellow: rgba(1, 0.72, 0, 1);
46-
--utilities-error: rgba(1, 0, 0, 1);
47-
--grid-base-0-pattern: columns;
48-
--grid-base-0-gutter-size: 20;
49-
--grid-base-0-alignment: stretch;
50-
--grid-base-0-count: 5;
51-
--grid-base-0-offset: 10;
52-
--grid-base-1-pattern: rows;
53-
--grid-base-1-section-size: 8;
54-
--grid-base-1-gutter-size: 10;
55-
--grid-base-1-alignment: center;
56-
--grid-base-1-count: 5;
57-
--grid-base-2-pattern: columns;
58-
--grid-base-2-section-size: 1;
59-
--grid-base-2-gutter-size: 20;
60-
--grid-base-2-alignment: max;
61-
--grid-base-2-count: 5;
62-
--grid-base-2-offset: 1;
63-
--grid-base-3-pattern: columns;
64-
--grid-base-3-section-size: 34;
65-
--grid-base-3-gutter-size: 20;
66-
--grid-base-3-alignment: min;
67-
--grid-base-3-count: 5;
68-
--grid-base-3-offset: 13;
69-
--grid-base-4-pattern: rows;
70-
--grid-base-4-section-size: 8;
71-
--grid-base-4-gutter-size: 20;
72-
--grid-base-4-alignment: min;
73-
--grid-base-4-count: 5;
74-
--grid-base-4-offset: 10;
75-
--grid-base-5-pattern: grid;
76-
--grid-base-5-section-size: 8;
77-
--grid-weird-grid-with-comment-pattern: columns;
78-
--grid-weird-grid-with-comment-section-size: 21;
79-
--grid-weird-grid-with-comment-gutter-size: 13;
80-
--grid-weird-grid-with-comment-alignment: max;
81-
--grid-weird-grid-with-comment-count: 5;
82-
--grid-weird-grid-with-comment-offset: 23;
83-
--grid-centered-pattern: columns;
84-
--grid-centered-section-size: 11;
85-
--grid-centered-gutter-size: 20;
86-
--grid-centered-alignment: center;
87-
--grid-centered-count: 5;
88-
--count-auto-pattern: rows;
89-
--count-auto-section-size: 100;
90-
--count-auto-gutter-size: 21;
91-
--count-auto-alignment: min;
92-
--count-auto-count: auto;
93-
--count-auto-offset: 30;
94-
--body-h-3-font-size: 20;
95-
--body-h-3-text-decoration: none;
96-
--body-h-3-font-family: Roboto;
97-
--body-h-3-font-style: Medium;
98-
--body-h-3-letter-spacing: 2;
99-
--body-h-3-line-height: 160;
100-
--body-h-3-paragraph-indent: 5;
101-
--body-h-3-paragraph-spacing: 8;
102-
--body-h-3-text-case: uppercase;
103-
--effect-shadow-type: dropShadow;
104-
--effect-shadow-radius: 4;
105-
--effect-shadow-color: rgba(0, 0, 0, 0.25);
106-
--effect-shadow-spread: 0;
107-
--effect-layer-blur-type: layerBlur;
108-
--effect-layer-blur-radius: 4;
109-
--effect-background-blur-type: backgroundBlur;
110-
--effect-background-blur-radius: 4;
111-
--inner-shadow-0-type: innerShadow;
112-
--inner-shadow-0-radius: 4;
113-
--inner-shadow-0-color: rgba(0, 0, 0, 0.25);
114-
--inner-shadow-0-spread: 0;
115-
--inner-shadow-1-type: innerShadow;
116-
--inner-shadow-1-radius: 10;
117-
--inner-shadow-1-color: rgba(0, 0, 0, 0.15);
118-
--inner-shadow-1-spread: 0;
7+
--color-whatever: #010101;
1198
}

‎tests/amazn-style-dictionary/build/ios-swift/StyleDictionary.swift

Lines changed: 2 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -3,123 +3,12 @@
33
// StyleDictionary.swift
44
//
55
// Do not edit directly
6-
// Generated on Sat, 26 Sep 2020 12:57:16 GMT
6+
// Generated on Mon, 28 Sep 2020 11:44:15 GMT
77
//
88

99

1010
import UIKit
1111

1212
public class StyleDictionary {
13-
public static let bodyH3FontFamily = Roboto
14-
public static let bodyH3FontSize = 20
15-
public static let bodyH3FontStyle = Medium
16-
public static let bodyH3LetterSpacing = 2
17-
public static let bodyH3LineHeight = 160
18-
public static let bodyH3ParagraphIndent = 5
19-
public static let bodyH3ParagraphSpacing = 8
20-
public static let bodyH3TextCase = uppercase
21-
public static let bodyH3TextDecoration = none
22-
public static let borders2OfThemDashPattern =
23-
public static let borders2OfThemStroke = rgba(0, 0, 0, 1)
24-
public static let borders2OfThemStrokeAlign = inside
25-
public static let borders2OfThemStrokeCap = none
26-
public static let borders2OfThemStrokeJoin = miter
27-
public static let borders2OfThemStrokeMiterAngle = 4
28-
public static let borders2OfThemStrokeWeight = 1
29-
public static let bordersGreen4PxDottedDashPattern = 20,20
30-
public static let bordersGreen4PxDottedStroke = rgba(0.25, 1, 0.73, 1)
31-
public static let bordersGreen4PxDottedStrokeAlign = inside
32-
public static let bordersGreen4PxDottedStrokeCap = round
33-
public static let bordersGreen4PxDottedStrokeJoin = round
34-
public static let bordersGreen4PxDottedStrokeMiterAngle = 4
35-
public static let bordersGreen4PxDottedStrokeWeight = 4
36-
public static let bordersGreen4PxGradientDashPattern = 4,3
37-
public static let bordersGreen4PxGradientStrokeAlign = inside
38-
public static let bordersGreen4PxGradientStrokeCap = arrow_lines
39-
public static let bordersGreen4PxGradientStrokeJoin = miter
40-
public static let bordersGreen4PxGradientStrokeMiterAngle = 2.613
41-
public static let bordersGreen4PxGradientStrokeWeight = 4
42-
public static let bordersRed1PxDashPattern =
43-
public static let bordersRed1PxStroke = rgba(1, 0.029, 0.029, 1)
44-
public static let bordersRed1PxStrokeAlign = inside
45-
public static let bordersRed1PxStrokeCap = none
46-
public static let bordersRed1PxStrokeJoin = miter
47-
public static let bordersRed1PxStrokeMiterAngle = 4
48-
public static let bordersRed1PxStrokeWeight = 1
49-
public static let colorsBlue = rgba(0.017, 0.292, 1, 1)
50-
public static let colorsGreen = rgba(0.25, 1, 0.73, 1)
51-
public static let colorsOrange = rgba(1, 0.5, 0.25, 1)
52-
public static let colorsSecondaryGreen = rgba(0.14, 0.688, 0.195, 1)
53-
public static let colorsSecondaryYellow = rgba(1, 0.72, 0, 1)
54-
public static let countAutoAlignment = min
55-
public static let countAutoCount = auto
56-
public static let countAutoGutterSize = 21
57-
public static let countAutoOffset = 30
58-
public static let countAutoPattern = rows
59-
public static let countAutoSectionSize = 100
60-
public static let effectBackgroundBlurRadius = 4
61-
public static let effectBackgroundBlurType = backgroundBlur
62-
public static let effectLayerBlurRadius = 4
63-
public static let effectLayerBlurType = layerBlur
64-
public static let effectShadowColor = rgba(0, 0, 0, 0.25)
65-
public static let effectShadowRadius = 4
66-
public static let effectShadowSpread = 0
67-
public static let effectShadowType = dropShadow
68-
public static let gridBase0Alignment = stretch
69-
public static let gridBase0Count = 5
70-
public static let gridBase0GutterSize = 20
71-
public static let gridBase0Offset = 10
72-
public static let gridBase0Pattern = columns
73-
public static let gridBase1Alignment = center
74-
public static let gridBase1Count = 5
75-
public static let gridBase1GutterSize = 10
76-
public static let gridBase1Pattern = rows
77-
public static let gridBase1SectionSize = 8
78-
public static let gridBase2Alignment = max
79-
public static let gridBase2Count = 5
80-
public static let gridBase2GutterSize = 20
81-
public static let gridBase2Offset = 1
82-
public static let gridBase2Pattern = columns
83-
public static let gridBase2SectionSize = 1
84-
public static let gridBase3Alignment = min
85-
public static let gridBase3Count = 5
86-
public static let gridBase3GutterSize = 20
87-
public static let gridBase3Offset = 13
88-
public static let gridBase3Pattern = columns
89-
public static let gridBase3SectionSize = 34
90-
public static let gridBase4Alignment = min
91-
public static let gridBase4Count = 5
92-
public static let gridBase4GutterSize = 20
93-
public static let gridBase4Offset = 10
94-
public static let gridBase4Pattern = rows
95-
public static let gridBase4SectionSize = 8
96-
public static let gridBase5Pattern = grid
97-
public static let gridBase5SectionSize = 8
98-
public static let gridCenteredAlignment = center
99-
public static let gridCenteredCount = 5
100-
public static let gridCenteredGutterSize = 20
101-
public static let gridCenteredPattern = columns
102-
public static let gridCenteredSectionSize = 11
103-
public static let gridWeirdGridWithCommentAlignment = max
104-
public static let gridWeirdGridWithCommentCount = 5
105-
public static let gridWeirdGridWithCommentGutterSize = 13
106-
public static let gridWeirdGridWithCommentOffset = 23
107-
public static let gridWeirdGridWithCommentPattern = columns
108-
public static let gridWeirdGridWithCommentSectionSize = 21
109-
public static let innerShadow0Color = rgba(0, 0, 0, 0.25)
110-
public static let innerShadow0Radius = 4
111-
public static let innerShadow0Spread = 0
112-
public static let innerShadow0Type = innerShadow
113-
public static let innerShadow1Color = rgba(0, 0, 0, 0.15)
114-
public static let innerShadow1Radius = 10
115-
public static let innerShadow1Spread = 0
116-
public static let innerShadow1Type = innerShadow
117-
public static let radiiMixedRadius = mixed
118-
public static let radiiMixedRadiusType = mixed
119-
public static let radiiMixedSmoothing = 0.62
120-
public static let sizes11 = 11
121-
public static let sizes8 = 8
122-
public static let sizesSpacers16 = 16
123-
public static let sizesSpacers32 = 32
124-
public static let utilitiesError = rgba(1, 0, 0, 1)
13+
public static let colorWhatever = UIColor(red: 0.004, green: 0.004, blue: 0.004, alpha:1)
12514
}

‎tests/amazn-style-dictionary/build/ios-swift/StyleDictionaryColor.swift

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
// StyleDictionaryColor.swift
44
//
55
// Do not edit directly
6-
// Generated on Sat, 26 Sep 2020 12:57:16 GMT
6+
// Generated on Mon, 28 Sep 2020 11:44:15 GMT
77
//
88

99
import UIKit
1010

1111
public enum StyleDictionaryColor {
12-
12+
public static let whatever = UIColor(red: 0.004, green: 0.004, blue: 0.004, alpha:1)
1313
}

‎tests/amazn-style-dictionary/build/ios-swift/StyleDictionarySize.swift

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// StyleDictionarySize.swift
44
//
55
// Do not edit directly
6-
// Generated on Sat, 26 Sep 2020 12:57:16 GMT
6+
// Generated on Mon, 28 Sep 2020 11:44:15 GMT
77
//
88

99
import UIKit

‎tests/amazn-style-dictionary/build/ios/StyleDictionaryColor.h

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,14 @@
33
// StyleDictionaryColor.h
44
//
55
// Do not edit directly
6-
// Generated on Sat, 26 Sep 2020 12:57:16 GMT
6+
// Generated on Mon, 28 Sep 2020 11:44:15 GMT
77
//
88

99
#import <UIKit/UIKit.h>
1010

1111

1212
typedef NS_ENUM(NSInteger, StyleDictionaryColorName) {
13-
Borders2OfThemStroke,
14-
BordersRed1PxStroke,
15-
BordersGreen4PxDottedStroke,
16-
ColorsOrange,
17-
ColorsGreen,
18-
ColorsBlue,
19-
ColorsSecondaryGreen,
20-
ColorsSecondaryYellow,
21-
UtilitiesError,
22-
EffectShadowColor,
23-
InnerShadow0Color,
24-
InnerShadow1Color
13+
ColorWhatever
2514
};
2615

2716
@interface StyleDictionaryColor : NSObject

‎tests/amazn-style-dictionary/build/ios/StyleDictionaryColor.m

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// StyleDictionaryColor.m
44
//
55
// Do not edit directly
6-
// Generated on Sat, 26 Sep 2020 12:57:16 GMT
6+
// Generated on Mon, 28 Sep 2020 11:44:15 GMT
77
//
88

99
#import "StyleDictionaryColor.h"
@@ -21,18 +21,7 @@ + (NSArray *)values {
2121

2222
dispatch_once(&onceToken, ^{
2323
colorArray = @[
24-
rgba(0, 0, 0, 1),
25-
rgba(1, 0.029, 0.029, 1),
26-
rgba(0.25, 1, 0.73, 1),
27-
rgba(1, 0.5, 0.25, 1),
28-
rgba(0.25, 1, 0.73, 1),
29-
rgba(0.017, 0.292, 1, 1),
30-
rgba(0.14, 0.688, 0.195, 1),
31-
rgba(1, 0.72, 0, 1),
32-
rgba(1, 0, 0, 1),
33-
rgba(0, 0, 0, 0.25),
34-
rgba(0, 0, 0, 0.25),
35-
rgba(0, 0, 0, 0.15)
24+
[UIColor colorWithRed:0.004f green:0.004f blue:0.004f alpha:1.000f]
3625
];
3726
});
3827

0 commit comments

Comments
 (0)