Support brands

Author: Florian Torres

README.md

@@ -1,7 +1,6 @@
 <img src="./readme-icon.png" alt="Supernova Logo" style="max-width:100%;">
 
-
-[Supernova](https://supernova.io) is a design system platform that allows you to seamlessly translate your design system data to production-ready code. Supernova works with any platform or tech stack, is used by many developers and organizations around the world, and can help you save time by replacing manual and repetitive tasks that all developers hate. To learn everything Supernova, please check out our [developer documentation](https://developers.supernova.io/).
+[Supernova](https://supernova.io) is a design system platform that manages your assets, tokens, components and allows you to write spectacular documentations for your entire teams. And because you found your way here, you are probably interested in its most advanced functionality - automatic hand-off of design and development assets, tokens and data in general. To learn everything Supernova, please check out our [developer documentation](https://developers.supernova.io/).
 
 
 # Tailwind Exporter
@@ -134,48 +133,62 @@ You can generate all production ready-code either manually using Supernova's [VS
 
 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).
 
+
 ## Reporting Bugs or Requesting Features
 
 In order to faciliate easy communication and speed up delivery of fixes and features for this exporter, we require everyone to log all issues and feature requests through the issue tracking of this repository. 
 
 Please read through the [existing issues](../../issues) before you open a new issue! It might be that we have already discussed it before. If you are sure your request wasn't mentioned just yet, proceed to [open a new issue](../../issues) and fill in the required information. Thank you!
 
+
 ## Contributing
 
-If you have an idea for improving this exporter package or want a specific issue fixed quickly, we would love to see you contribute to its development! 
+If you have an idea for improving this exporter package or want a specific issue fixed quickly, we would love to see you contribute to its development!  
+
+There are multiple ways you can contribute, so we have written a [contribution guide](https://developers.supernova.io/building-exporters/contribution-and-requests) that will walk your through the process. Any pull requests to this repository are very welcome. 
+
+Would love to help us build more but maybe need a little bit of support? [Join our community](https://community.supernova.io) and drop us a message, we will support any of your wild ideas!
 
-There are multiple ways you can contribute, so we have written a [contribution guide](https://developers.supernova.io/building-exporters/contribution-and-requests) that will walk your through the process. Any pull requests to this repository are very welcome.
 
 ## License
 
 This exporter is distributed under the [MIT license](./LICENSE.md). [We absolutely encourage you](https://developers.supernova.io/building-exporters/cloning-exporters) to clone it and modify it for your purposes, so it fits the requirements of your stack. If you see that you have created something amazing in the process that others would benefit from, we strongly recommend you consider [publishing it back to the community](https://developers.supernova.io/building-exporters/sharing-exporters-with-others) as well.
 
+
 ## Useful Links
 
 - To learn more about Supernova, [go visit our website](https://supernova.io)
 - To join our community of fellow developers where we try to push what is possible with design systems and code automation, join our [community discord](https://community.supernova.io)
 - To understand everything you can do with Supernova and how much time and resources it can save you, go read our [product documentation](https://learn.supernova.io/)
 - Finally, to learn everything about what exporters are and how you can integrate with your codebase, go read our [developer documentation](https://developers.supernova.io/)
 
-## Other Supernova Exporters
+
+## Supernova Maintained Exporters
 
 We are developing and maintaining exporters for many major technologies. Here are all the official exporters maintained by Supernova:
 
-- [iOS Exporter](https://github.com/Supernova-Studio/exporter-ios)
+- [iOS Token & Style Exporter](https://github.com/Supernova-Studio/exporter-ios)
 - [iOS Localization Exporter](https://github.com/Supernova-Studio/exporter-ios-localization)
-- [Android Exporter](https://github.com/Supernova-Studio/exporter-android)
-- [React Exporter](https://github.com/Supernova-Studio/exporter-react)
-- [Flutter Exporter](https://github.com/Supernova-Studio/exporter-flutter)
-- [Angular Exporter](https://github.com/Supernova-Studio/exporter-angular)
-- [Typescript Exporter](https://github.com/Supernova-Studio/exporter-typescript)
-- [CSS Exporter](https://github.com/Supernova-Studio/exporter-css)
-- [LESS Exporter](https://github.com/Supernova-Studio/exporter-less)
-- [SCSS Exporter](https://github.com/Supernova-Studio/exporter-scss)
+- [Android Token & Style Exporter](https://github.com/Supernova-Studio/exporter-android)
+- [React Token & Style Exporter](https://github.com/Supernova-Studio/exporter-react)
+- [Flutter Token & Style Exporter](https://github.com/Supernova-Studio/exporter-flutter)
+- [Angular Token & Style Exporter](https://github.com/Supernova-Studio/exporter-angular)
+- [Typescript Token & Style Exporter](https://github.com/Supernova-Studio/exporter-typescript)
+- [CSS Token & Style Exporter](https://github.com/Supernova-Studio/exporter-css)
+- [LESS Token & Style Exporter](https://github.com/Supernova-Studio/exporter-less)
+- [SCSS Token & Style Exporter](https://github.com/Supernova-Studio/exporter-scss)
+- [Style Dictionary Exporter](https://github.com/Supernova-Studio/exporter-style-dictionary)
 
+Additionally, you can also use asset exporters for all major targets, enjoy!:
 
-Additionally, we are also developing and maintaining exporters for specific use cases:
+- [SVG Asset Exporter](https://github.com/Supernova-Studio/exporter-svg-assets)
+- [PDF Asset Exporter](https://github.com/Supernova-Studio/exporter-pdf-assets)
+- [PNG Asset Exporter](https://github.com/Supernova-Studio/exporter-png-assets)
+- [iOS Asset Catalogue Exporter](https://github.com/Supernova-Studio/exporter-ios-asset-catalogue)
+- [React Native Asset Exporter](https://github.com/Supernova-Studio/exporter-react-native-assets)
+- [Android Asset Exporter](https://github.com/Supernova-Studio/exporter-android-assets)
+- [Flutter PNG Asset Exporter](https://github.com/Supernova-Studio/exporter-flutter-png-assets)
+- [Flutter SVG Asset Exporter](https://github.com/Supernova-Studio/exporter-flutter-svg-assets)
 
-- [Style Dictionary Exporter](https://github.com/Supernova-Studio/exporter-style-dictionary)
-- [HTML Preview Exporter](https://github.com/Supernova-Studio/exporter-html-preview)
+To browse all exporters created by our amazing community, please visit the [Supernova](https://supernova.io) Exporter Store. 
 
-To browse all exporters created by our amazing community, please visit the [Supernova](https://supernova.io) Exporter Store.

exporter.json

@@ -6,7 +6,8 @@
     "organization": "Ascanio",
     "homepage": "https://ascan.io",
     "source_dir": "src",
-    "version": "1.2.0",
+    "version": "1.2",
+    "usesBrands": true,
     "config": {
         "sources": "sources.json",
         "output": "output.json",
@@ -21,4 +22,4 @@
         "Tokens",
         "Styles"
     ]
-}
+}

src/borders.pr

@@ -6,7 +6,8 @@ and their value rendered using `rendered-border` blueprint
 
 *}
 :root {
-{[ for token in ds.tokensByType("Border") ]}
+{[ let brand = ds.currentBrand() /]}
+{[ for token in ds.tokensByType("Border", brand.id) ]}
     {[ inject "rendered-token-var" context token /]}
 
 

src/colors.pr

@@ -6,7 +6,8 @@ and their value rendered using `rendered-color` blueprint
 
 *}
 :root {
-{[ for token in ds.tokensByType("Color") ]}
+{[ let brand = ds.currentBrand() /]}
+{[ for token in ds.tokensByType("Color", brand.id) ]}
     {[ inject "rendered-token-var" context token /]}
 
 

src/gradients.pr

@@ -6,7 +6,8 @@ and their value rendered using `gradient-color` blueprint
 
 *}
 :root {
-{[ for token in ds.tokensByType("Gradient") ]}
+{[ let brand = ds.currentBrand() /]}
+{[ for token in ds.tokensByType("Gradient", brand.id) ]}
     {[ inject "rendered-token-var" context token /]}
 
 

src/main-renderers/rendered-description.pr

@@ -20,4 +20,4 @@ Rendered as:
 
 /* description */
 *}
-{[ if (context.description && context.description.count() > 0) ]}/* {{ context.description.replacing("*/", "* /") }} */{[/]}
+{[ if (context.description && context.description.count() > 0) ]}/* {{ context.description.replacing("*/", "* /") }} */{[/]}

src/main-renderers/tailwind-variables.pr

@@ -1,23 +1,26 @@
 module.exports = {
     'colors': {
-    {[ const colorGroup = ds.tokenGroupTreeByType("Color") /]}
+    {[ let brand = ds.currentBrand() /]}
+    {[ const colorGroup = ds.tokenGroupTreeByType("Color", brand.id) /]}
     {[ traverse colorGroup property subgroups into subgroup ]}
         {[ if !subgroup.isRoot ]}
         '{{ subgroup.name.lowercased() }}': {
         {[ const tokens = ds.tokensByGroupId(subgroup.id) /]}
         {[ for token in tokens ]}
             {[ let tokenName = token.name.replacing("$", "") /]}
-            '{{ ((tokenName === "main") ? "DEFAULT" : tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]} 
+            '{{ ((tokenName === "main") ? "DEFAULT" : tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]}
+
         {[/]}
         },
         {[/]}
     {[/]}
     },
     'boxShadow': {
-    {[ const shadowTokens = ds.tokensByType("Shadow") /]}
+    {[ const shadowTokens = ds.tokensByType("Shadow", brand.id) /]}
     {[ for token in shadowTokens ]}
-        {[ let tokenName = token.name.replacing("$", "") /]}
-        '{{ ((tokenName === "box-shadow") ? "DEFAULT" : tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]} 
+        {[ let tokenName = token.name.replacing("$", "").replacing(" ", "-") /]}
+        '{{ ((tokenName === "box-shadow") ? "DEFAULT" : tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]}
+
     {[/]}
     }
 }

src/measures.pr

@@ -6,7 +6,8 @@ and their value rendered using `rendered-measure` blueprint
 
 *}
 :root {
-{[ for token in ds.tokensByType("Measure") ]}
+{[ let brand = ds.currentBrand() /]}
+{[ for token in ds.tokensByType("Measure", brand.id) ]}
     {[ inject "rendered-token-var" context token /]}
 
 

src/shadows.pr

@@ -6,7 +6,8 @@ and their value rendered using `shadow-color` blueprint
 
 *}
 :root {
-{[ for token in ds.tokensByType("Shadow") ]}
+{[ let brand = ds.currentBrand() /]}
+{[ for token in ds.tokensByType("Shadow", brand.id) ]}
     {[ inject "rendered-token-var" context token /]}
 
 

src/token-renderers/rendered-gradient.pr

@@ -40,8 +40,8 @@ linear-gradient(
 {[ let gradientType = "linear-gradient" /]}
 {[ let gradientDirection = gradientAngle(context.from, context.to).rounded(2).toString().suffixed("deg") /]}
 {[ if (context.type === "Radial") ]}
-  {[ set "gradientType" = "radial-gradient" /]}
-  {[ set "gradientDirection" = "circle at center" /]}
+  {[ "gradientType" = "radial-gradient" /]}
+  {[ "gradientDirection" = "circle at center" /]}
 {[/]}
 {{ gradientType }}(
   {{ gradientDirection }},

src/token-renderers/rendered-measure.pr

@@ -20,11 +20,11 @@ Note: Value is passed as `context` property because it is injected
 {[ let unit = "px" /]}
 {[ switch context.unit ]}
 {[ case "Points"]}
-{[ set unit = "pt"/]}
+{[ unit = "pt"/]}
 {[ case "Percent"]}
-{[ set unit = "%"/]}
+{[ unit = "%"/]}
 {[ case "Ems"]}
-{[ set unit = "em"/]}
+{[ unit = "em"/]}
 {[/]}
 {{ context.measure }}{{ unit }}
 {[/]}

src/typography.pr

@@ -5,10 +5,11 @@ Tokens are named by their group path and then name,
 and their value rendered using `rendered-color` blueprint
 
 *}
-{[ const allTokens = ds.tokensByType("Typography") /]}
+{[ let brand = ds.currentBrand() /]}
+{[ const allTokens = ds.tokensByType("Typography", brand.id) /]}
 {[ for token in allTokens ]}
 {[ if !token.referencedToken ]}
-{[ inject "rendered-token-class" context { "token": token, "allTokens": allTokens }  /]} 
+{[ inject "rendered-token-class" context { "token": token, "allTokens": allTokens } /]} 
 
 
 {[/]}