Skip to content
This repository was archived by the owner on Dec 28, 2022. It is now read-only.

Commit 8e873bb

Browse files
author
Florian Torres
committed
Pulsar 1.5 support + Readme update
1 parent 7e1150a commit 8e873bb

18 files changed

+35
-77
lines changed

‎README.md

Lines changed: 3 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ module.exports = {
8888
purge: [],
8989
darkMode: false,
9090
theme: {
91-
extend: designSystemVariables, // Add this line
91+
extend: designSystemVariables, // Add this line to extend tailwind theme with your design system
9292
},
9393
variants: {
9494
extend: {},
@@ -118,7 +118,7 @@ That's it ! You can now use the **Tailwind variables** in your templates :
118118

119119
<img src="./result-example.png" alt="Result example" style="width:600px;max-width:100%;">
120120

121-
Tokens supported for tailwind exporter :
121+
Tokens supported by Tailwind exporter :
122122

123123
- [x] Color definitions
124124
- [ ] Text Styles
@@ -128,47 +128,11 @@ Tokens supported for tailwind exporter :
128128
- [ ] Radii
129129
- [ ] Measures
130130

131-
---
132-
133-
The CSS allows you to **produce a CSS definitions** in such a way that it can be immediately used in your production codebase to style all your visual elements. Specifically, this exporter is capable of exporting the previews of:
134-
135-
- [x] Color definitions
136-
- [x] Text Styles
137-
- [x] Gradients
138-
- [x] Shadows
139-
- [x] Borders
140-
- [x] Radii
141-
- [x] Measures
142-
143131
You can generate all production ready-code either manually using Supernova's [VS Code extension](https://marketplace.visualstudio.com/items?itemName=SupernovaIO.pulsar-vsc-extension), or automate your code delivery pipeline using Supernova [Design Continuous Delivery](https://supernova.io/automated-code-delivery).
144132

145-
146-
## Example Usage
147-
148-
Once you have run the exporter against your design system, you can start using the code in your codebase right away. To use the output of the exporter, simply add the stylesheets to your html page, like this:
149-
150-
```
151-
<!DOCTYPE html>
152-
<html>
153-
<head>
154-
<meta charset="utf-8">
155-
<title>Style import test</title>
156-
<style>
157-
@import ".build/index.css";
158-
</style>
159-
</head>
160-
</html>
161-
```
162-
163-
Because tokens are defined as css variables, you can use them as such, anywhere you need that value (even in order definitions):
164-
165-
```
166-
<p style="color: var(--colorContrast)">...</p>
167-
```
168-
169133
## Installing
170134

171-
In order to make the Supernova CSS exporter available for your organization so you can start generating code from your design system, please follow the installation guide in our [developer documentation](https://developers.supernova.io/using-exporters/installing-exporters).
135+
In order to make the Supernova Tailwind exporter available for your organization so you can start generating code from your design system, please follow the installation guide in our [developer documentation](https://developers.supernova.io/using-exporters/installing-exporters).
172136

173137
## Reporting Bugs or Requesting Features
174138

@@ -215,9 +179,3 @@ Additionally, we are also developing and maintaining exporters for specific use
215179
- [HTML Preview Exporter](https://github.com/Supernova-Studio/exporter-html-preview)
216180

217181
To browse all exporters created by our amazing community, please visit the [Supernova](https://supernova.io) Exporter Store.
218-
219-
220-
221-
222-
223-

‎exporter.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"organization": "Ascanio",
77
"homepage": "https://ascan.io",
88
"source_dir": "src",
9-
"version": "1.1.0",
9+
"version": "1.2.0",
1010
"config": {
1111
"sources": "sources.json",
1212
"output": "output.json",

‎icon.png

10.2 KB
Loading

‎readme-icon.png

4.63 KB
Loading

‎src/borders.pr

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ and their value rendered using `rendered-border` blueprint
66

77
*}
88
:root {
9-
{[ for token in @ds.tokensByType("Border") ]}
9+
{[ for token in ds.tokensByType("Border") ]}
1010
{[ inject "rendered-token-var" context token /]}
1111

1212

‎src/colors.pr

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ and their value rendered using `rendered-color` blueprint
66

77
*}
88
:root {
9-
{[ for token in @ds.tokensByType("Color") ]}
9+
{[ for token in ds.tokensByType("Color") ]}
1010
{[ inject "rendered-token-var" context token /]}
1111

1212

‎src/gradients.pr

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ and their value rendered using `gradient-color` blueprint
66

77
*}
88
:root {
9-
{[ for token in @ds.tokensByType("Gradient") ]}
9+
{[ for token in ds.tokensByType("Gradient") ]}
1010
{[ inject "rendered-token-var" context token /]}
1111

1212

‎src/main-renderers/reference-wrapper.pr

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Note: Token is passed as `context` property because it is injected
1818

1919
/* description */
2020
*}
21-
{[ if @compare.null(context.referencedToken) ]}
22-
{{#body}}
23-
{[else]}
21+
{[ if !context.referencedToken ]}
22+
{{ #body }}
23+
{[ else ]}
2424
var(--{[ inject "rendered-name" context context.referencedToken /]}){[/]}

‎src/main-renderers/rendered-description.pr

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,4 @@ Rendered as:
2020

2121
/* description */
2222
*}
23-
{[ if @boolean.not(@compare.empty(context.description)) ]}/* {{ context.description.replacing("*/", "* /") }} */{[/]}
23+
{[ if (context.description && context.description.count() > 0) ]}/* {{ context.description.replacing("*/", "* /") }} */{[/]}

‎src/main-renderers/rendered-name.pr

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Rendered as:
2424
[group1][group2][...][name];
2525

2626
*}
27-
{[ let tokenGroup = @ds.tokenGroupContainingTokenId(context.id) /]}
27+
{[ let tokenGroup = ds.tokenGroupContainingTokenId(context.id) /]}
2828
{[ let prefix = "" /]}
2929
{[ switch context.tokenType ]}
3030
{[ case "Color" ]}{[ prefix = behavior.colorTokenPrefix /]}
@@ -35,5 +35,5 @@ Rendered as:
3535
{[ case "Gradient" ]}{[ prefix = behavior.gradientTokenPrefix /]}
3636
{[ default ]}{[ prefix = "" /]}
3737
{[/]}
38-
{[ let tokenName = @js.readableVariableName(context, tokenGroup, prefix) /]}
38+
{[ let tokenName = readableVariableName(context, tokenGroup, prefix) /]}
3939
{{ tokenName }}

‎src/main-renderers/rendered-token-class.pr

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Rendered as:
2929
{[ inject "rendered-description" context token /]}
3030
.{[ inject "rendered-name" context token /]}
3131

32-
{[ for alias in @js.findAliases(context.token, context.allTokens) ]}
32+
{[ for alias in findAliases(context.token, context.allTokens) ]}
3333
, {[ inject "rendered-description" context alias /]}
3434
.{[ inject "rendered-name" context alias /]}
3535
{[/]} {

‎src/main-renderers/tailwind-variables.pr

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22

33
module.exports = {
44
'colors': {
5-
{[ const colorGroup = @ds.tokenGroupTreeByType("Color") /]}
5+
{[ const colorGroup = ds.tokenGroupTreeByType("Color") /]}
66
{[ traverse colorGroup property subgroups into subgroup ]}
7-
{[ if @boolean.not(subgroup.isRoot) ]}
7+
{[ if !subgroup.isRoot ]}
88
'{{ subgroup.name.lowercased() }}': {
9-
{[ const tokens = @ds.tokensByGroupId(subgroup.id) /]}
9+
{[ const tokens = ds.tokensByGroupId(subgroup.id) /]}
1010
{[ for token in tokens ]}
1111
{[ let tokenName = token.name.replacing("$", "") /]}
12-
'{{ @boolean.ternaryValue(@compare.equals(tokenName, "main"), "DEFAULT", tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]}
12+
'{{ ((tokenName === "main") ? "DEFAULT" : tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]}
1313
{[/]}
1414
},
1515
{[/]}
1616
{[/]}
1717
},
1818
'boxShadow': {
19-
{[ const shadowTokens = @ds.tokensByType("Shadow") /]}
19+
{[ const shadowTokens = ds.tokensByType("Shadow") /]}
2020
{[ for token in shadowTokens ]}
2121
{[ let tokenName = token.name.replacing("$", "") /]}
22-
'{{ @boolean.ternaryValue(@compare.equals(tokenName, "box-shadow"), "DEFAULT", tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]}
22+
'{{ ((tokenName === "box-shadow") ? "DEFAULT" : tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]}
2323
{[/]}
2424
}
2525
}

‎src/measures.pr

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ and their value rendered using `rendered-measure` blueprint
66

77
*}
88
:root {
9-
{[ for token in @ds.tokensByType("Measure") ]}
9+
{[ for token in ds.tokensByType("Measure") ]}
1010
{[ inject "rendered-token-var" context token /]}
1111

1212

‎src/shadows.pr

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ and their value rendered using `shadow-color` blueprint
66

77
*}
88
:root {
9-
{[ for token in @ds.tokensByType("Shadow") ]}
9+
{[ for token in ds.tokensByType("Shadow") ]}
1010
{[ inject "rendered-token-var" context token /]}
1111

1212

‎src/token-renderers/rendered-color.pr

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Rendered as:
2727

2828
*}
2929
{[ inject "reference-wrapper" context context ]}
30-
{[ if @compare.lessThan(context.a, 255) ]}
30+
{[ if (context.a < 255) ]}
3131
#{{ context.hex }}
3232
{[ else ]}
3333
#{{ context.hex.substring(0, 6) }}

‎src/token-renderers/rendered-gradient.pr

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,15 @@ linear-gradient(
3838
*}
3939
{[ inject "reference-wrapper" context context ]}
4040
{[ let gradientType = "linear-gradient" /]}
41-
{[ let gradientDirection = @js.gradientAngle(context.from, context.to).rounded(2).toString().suffixed("deg") /]}
42-
{[ if @compare.equals(context.type, "Radial") ]}
41+
{[ let gradientDirection = gradientAngle(context.from, context.to).rounded(2).toString().suffixed("deg") /]}
42+
{[ if (context.type === "Radial") ]}
4343
{[ set "gradientType" = "radial-gradient" /]}
4444
{[ set "gradientDirection" = "circle at center" /]}
4545
{[/]}
4646
{{ gradientType }}(
4747
{{ gradientDirection }},
4848
{[ for stop in context.stops ]}
49-
{[ inject "rendered-color" context stop.color /]} {{ stop.position.multipliedBy(100).rounded(1) }}%{[ if @boolean.not(#last) ]}, {[/]}
49+
{[ inject "rendered-color" context stop.color /]} {{ (stop.position * 100).rounded(1) }}%{[ if !(#last) ]}, {[/]}
5050

5151
{[/]}
5252
)

‎src/token-renderers/rendered-typography.pr

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,18 @@ Rendered as:
5252

5353
*}
5454
{[ let fontStyle = "normal" /]}
55-
{[ if @ds.fonts.isItalic(context.font) ]}
56-
{[ set fontStyle = "italic" /]}
55+
{[ if ds.isFontItalic(context.font) ]}
56+
{[ fontStyle = "italic" /]}
5757
{[/]}
5858
font-family: "{{ context.font.family }}";
5959
font-style: {{ fontStyle }};
60-
font-weight: {{ @ds.fonts.weight(context.font) }};
60+
font-weight: {{ ds.fontWeight(context.font) }};
6161
font-size: {[ inject "rendered-measure" context context.fontSize /]};
62-
{[ if @compare.nonnull(context.lineHeight) ]}
62+
{[ if context.lineHeight ]}
6363
line-height: {[ inject "rendered-measure" context context.lineHeight /]};
6464
{[/]}
65-
letter-spacing: {[if @compare.equals(context.letterSpacing.unit, "Percent") ]}
66-
{{ context.letterSpacing.measure.dividedBy(100).rounded(2) }}em;
65+
letter-spacing: {[if (context.letterSpacing.unit === "Percent") ]}
66+
{{ (context.letterSpacing.measure / 100).rounded(2) }}em;
6767
{[ else ]}
6868
{[ inject "rendered-measure" context context.letterSpacing /]};
6969
{[/]}

‎src/typography.pr

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ Tokens are named by their group path and then name,
55
and their value rendered using `rendered-color` blueprint
66

77
*}
8-
{[ const allTokens = @ds.tokensByType("Typography") /]}
8+
{[ const allTokens = ds.tokensByType("Typography") /]}
99
{[ for token in allTokens ]}
10-
{[ if @compare.null(token.referencedToken) ]}
11-
{[ inject "rendered-token-class" context @init.dictionary().add("token", token).add("allTokens", allTokens) /]}
10+
{[ if !token.referencedToken ]}
11+
{[ inject "rendered-token-class" context { "token": token, "allTokens": allTokens } /]}
1212

1313

1414
{[/]}

0 commit comments

Comments
 (0)