Updated styles and tokens

design/README.md

@@ -0,0 +1,20 @@
+# Welcome UI
+
+Welcome to our design system documentation! Below you will find the entire content of the documentation separated by the main categories. Use this page to navigate and find what you are looking for!
+
+## Content
+
+### Foundations
+- [Design tokens](./foundations/design-tokens.md)
+- [Typography](./foundations/typography.md)
+
+### Components
+- [Component overview](./components/component-overview.md)
+- [Component detail](./components/component-detail.md)
+- [Button](./components/button.md)
+- [Component detail test](./components/component-detail-test.md)
+- [Button](./components/button-1.md)
+
+## Generated documentation
+
+This documentation was generated by [Supernova.io](https://supernova.io). Don't modify it manually as it will be overriden next time generator runs!

design/components/button-1.md

@@ -0,0 +1,18 @@
+
+# Button
+
+Buttons are clickable items communicating actions that can be performed.
+
+---
+
+## Anatomy
+
+A button comprises a label in a container that can also display an icon, an arrow or both.
+
+- *Label* Concise wording that will trigger a related action.
+
+- *Icon* (optional) Pictogram that can dress the button and further explain the label. Can either be left-aligned or right-aligned.
+
+- *Arrow* (optional) Pictogram that indicates a dropdown. By default the arrow points down. When the dropdown is open, the arrow points up.
+
+- *Container* Background of the component that can either be filled, outlined or null.

design/components/button.md

@@ -0,0 +1,16 @@
+
+# Button
+
+---
+
+```javascript  
+import { Button } from '@welcome-ui/button';
+
+export default function Test(props) {
+ return (
+   <Button>
+     Click me!
+   </Button>
+ );
+}  
+```

design/components/component-detail-test.md

@@ -0,0 +1,58 @@
+
+# Component detail test
+
+---
+
+> Yay:  
+> This template contains some sample content on components, and a suggested page layout. You can use what you like from it to create your own documentation, and delete anything you don’t want to keep.
+
+## Component title
+
+![Img](https://studio-assets.supernova.io/design-systems/36078/3801231c-d932-45a2-a361-e6cab2e6a287.png)
+
+> Some extra info:  
+> Start with an image or Figma frame showing your component. Include a short description in a text block if required, and then add a component checklist block to display selected properties of the component in detail.
+
+### Usage 
+
+> Some extra info:  
+> You can include usage guidelines, so the consumers of your design system know when to use this component, or when to avoid it. For example, should this component only be used in a banner? Should it always be placed next to a button component?
+
+
+| Column 1 | Column 2 |  
+| --- | --- |  
+| *Do * | *Don't* |  
+|  |  |  
+
+
+### Variants
+
+> Some extra info:  
+> Define how the user can interact with the component here. Does it have different sizes, or types? You can list any different states here, like hover, or focus. Connect your Figma file containing your components and display these variants in a Frame block.
+
+
+![Danger, Size=Large, Style=Ghost, Left icon=False, Right icon=False, Square icon=False, Circle icon=False, State=Active](https://studio-assets.supernova.io/design-systems/36078/bdf562ef-d491-4088-baa5-e147be3b33d5.png)  
+Danger, Size=Large, Style=Ghost, Left icon=False, Right icon=False, Square icon=False, Circle icon=False, State=Active  
+![Disabled, Size=Large, Left icon=False, Right icon=False, Square icon=False, Circle icon=False](https://studio-assets.supernova.io/design-systems/36078/d83327af-76d5-44fb-9de5-dd930dd61d88.png)  
+Disabled, Size=Large, Left icon=False, Right icon=False, Square icon=False, Circle icon=False  
+
+
+### Content guidelines
+
+> Some extra info:  
+> You might also want to add some information on what content should populate this component. For example, you could include some brief rules on error messaging for your error toast component.
+
+
+| Column 1 | Column 2 |  
+| --- | --- |  
+| *Do * | *Don't* |  
+|  |  |  
+
+
+### Code block
+
+> Some extra info:  
+> Finally, when documenting individual components from your design system in detail, it’s nice to include a code block for that component too. Reach out to your developers to discover how best to display their code in one of our code blocks. 
+
+> Yay:  
+> You can [learn more about components in our documentation](https://learn.supernova.io/latest/design-systems/components/components-101.html). 

design/components/component-detail.md

@@ -0,0 +1,53 @@
+
+# Component detail
+
+---
+
+> Yay:  
+> This template contains some sample content on components, and a suggested page layout. You can use what you like from it to create your own documentation, and delete anything you don’t want to keep.
+
+## Component title
+
+> Some extra info:  
+> Start with an image or Figma frame showing your component. Include a short description in a text block if required, and then add a component checklist block to display selected properties of the component in detail.
+
+### Usage
+
+> Some extra info:  
+> You can include usage guidelines, so the consumers of your design system know when to use this component, or when to avoid it. For example, should this component only be used in a banner? Should it always be placed next to a button component?
+
+
+| Column 1 | Column 2 |  
+| --- | --- |  
+| *Do * | *Don't* |  
+|  |  |  
+
+
+### Variants
+
+> Some extra info:  
+> Define how the user can interact with the component here. Does it have different sizes, or types? You can list any different states here, like hover, or focus. Connect your Figma file containing your components and display these variants in a Frame block.
+
+
+
+
+
+### Content guidelines
+
+> Some extra info:  
+> You might also want to add some information on what content should populate this component. For example, you could include some brief rules on error messaging for your error toast component.
+
+
+| Column 1 | Column 2 |  
+| --- | --- |  
+| *Do * | *Don't* |  
+|  |  |  
+
+
+### Code block
+
+> Some extra info:  
+> Finally, when documenting individual components from your design system in detail, it’s nice to include a code block for that component too. Reach out to your developers to discover how best to display their code in one of our code blocks. 
+
+> Yay:  
+> You can [learn more about components in our documentation](https://learn.supernova.io/latest/design-systems/components/components-101.html). 

design/components/component-overview.md

@@ -0,0 +1,16 @@
+
+# Component overview
+
+---
+
+> Yay:  
+> This template contains a suggested page layout for showing an overview of your design system components, including links to each component page in your documentation. 
+You can use what you like from it to create your own documentation, and delete anything you don’t want to keep. 
+
+### Components
+
+> Some extra info:  
+> You can use a Component Overview block to show a table with all your components, and links to them in Figma.
+
+> Yay:  
+> You can [learn more about components in our documentation](https://learn.supernova.io/latest/design-systems/components/components-101.html). 

design/foundations/design-tokens.md

@@ -0,0 +1,61 @@
+
+# Design tokens
+
+---
+
+> Yay:  
+> This template contains some sample content on styles and design tokens. It’s ideal for documenting a specific token type, like colors. You can use what you like from it to create your own documentation, and delete anything you don’t want to keep.
+
+## Base tokens
+
+> Some extra info:  
+> Use a token list block, or token group block, to display the base set of tokens for this style. This is where you pick all your base colors, like ‘Red 500’ or ‘Blue 300’, for example.
+
+Token list:
+
+Token group:
+
+
+**Token Group Shades / Dark**:    
+100: rgb(229, 229, 229)  
+400: rgb(153, 153, 153)  
+500: rgb(115, 115, 115)  
+700: rgb(76, 76, 76)  
+900: rgb(0, 0, 0)  
+
+
+### Usage
+
+> Some extra info:  
+> Include information on how and when to use these tokens. There are a lot of ways to show this information, but we usually recommend a simple bullet list block or table block.
+
+*Use base tokens for*
+
+- 
+
+*Don’t use base tokens for*
+
+- 
+
+## Semantic tokens
+
+> Some extra info:  
+> Use a token list block, or token group block, to display the semantic set of tokens for this style. This is where you show semantic layers of design tokens, like ‘Color Primary’ or ‘Color Background Page’, for example.
+
+### Usage
+
+> Some extra info:  
+> Include information on how and when to use these tokens. There are a lot of ways to show this information, but we usually recommend a simple bullet list block or table block.
+
+*Use semantic tokens for*
+
+- 
+
+*Don’t use semantic tokens for*
+
+- 
+
+---
+
+> Yay:  
+> You can [learn more about tokens](https://learn.supernova.io/latest/design-systems/tokens/tokens-101.html) in our documentation.

design/foundations/typography.md

@@ -0,0 +1,42 @@
+
+# Typography
+
+---
+
+> Yay:  
+> This template contains some sample content on typography documentation, and a suggested page layout. You can use what you like from it to create your own documentation, and delete anything you don’t want to keep.
+
+## Font family
+
+> Some extra info:  
+> Start by sharing the font used in your design system. You can use an image or Figam frame block to show a preview of the fonts you're using. 
+
+### Available styles
+
+> Some extra info:  
+> Show readers how your font styles are named in Figma, and what each style’s intended use is, for example, 'Header 1', or 'Helper text'. 
+You can use a token group or token list block for this. 
+
+Token list:
+
+Token group:
+
+### Weight
+
+> Some extra info:  
+> Add a frame from your Figma source file detailing the weights your typeface is available in, and include some guidelines on when to use each weight.
+
+
+
+
+
+
+| Column 1 | Column 2 |  
+| --- | --- |  
+| Weight | Use |  
+| Bold | In callout text
+To emphasize certain words in text |  
+| Semi-bold | In button text |  
+|  |  |  
+|  |  |  
+|  |  |  

design/welcome.md

@@ -0,0 +1,68 @@
+
+# Welcome!
+
+You’ve landed in your new design system documentation.
+
+---
+
+In case you're not too sure where to begin, we've provided some templates for you to fill out. You can also learn more about different parts of the product, and how to join our community, right here.
+
+Enjoy exploring Supernova! 
+
+---
+
+## Documentation templates
+
+To help get you started with your design system documentation, we’ve added some templates you can use — they have some suggestions on what to include, and share some of examples of blocks you can use to show off your design system content. You can absolutely use any template for any purpose, but this is how we’ve set them up:
+
+
+| Column 1 | Column 2 |  
+| --- | --- |  
+| Template | Use |  
+| *Design tokens* | Documenting specific design attributes — colors, shadows, radii, and so on. |  
+| *Typography* | Documenting the type stack you’re using. |  
+| *Component overview* | Displaying an overview of all the components in your design system, with links to either Figma, or pages in your documentation, or both. |  
+| *Component detail* | Documenting a component (or set of components) — buttons, input fields, modals, popovers, and so on. |  
+
+
+You can duplicate any of these templates, and fill them with your own content, or siply overwrite what's already in there if you only want to use them once. 
+
+### Sharing your documentation
+
+Nobody will have access to your documentation until you share it.
+
+Everything in the editor will be autosaved, so your work will be preserved if you need to step away and come back to it later.
+
+You can click the `*Publish*` button to build and update your documentation site. Even after you publish, your documentation can still only be seen by people you've shared it with (if any).
+
+When you make changes in the editor (or change certain documentation settings), they won’t be seen in your live documentation until you Publish it again.
+
+You can also adjust your privacy settings in the Settings page, so you can choose whether your documentation is publicly available, or can only be seen by those who are logged in to your workspace and have the link.
+
+## Want to explore everything else in Supernova first?
+
+You can access all the other parts of the platform from the left navigation menu. Here’s a quick tour if you’re not sure where to start.
+
+### Design system data
+
+This is where all the data in your design system lives. Here, you can edit and manage design tokens, components, assets and so on. This data is then used to populate things your design system documentation.
+
+[Learn more](https://learn.supernova.io/latest/design-systems/guide-to-design-systems.html)
+
+### Data sources
+
+In this section, you can choose sources for your design system data, and import content from them. This basically means importing design tokens, components, etc. from your Figma libraries. You can also import data via our Tokens Studio integration.
+
+[Learn more](https://learn.supernova.io/latest/design-systems/add-design-system-content/data-sources/overview.html)
+
+### Code integration
+
+Here, you can export your design system data as code, set up integrations with your repositories, and automate your code delivery for seamless hand-off.
+
+[Learn more](https://learn.supernova.io/latest/code-integration/guide-to-code-integration.html)
+
+---
+
+## Join our community
+
+You can find support, helpful tips, and plenty of design system chat in our [Discord community](https://discord.com/invite/9Au3xFTG7x/).