v3 colors (#206)

* New color palette vars

* Typography

Author: quietbits

@stellar/design-system-website/docs/foundations/colors.mdx

@@ -2,6 +2,6 @@
   "label": "Typography",
   "link": {
     "type": "generated-index",
-    "description": "Typography (including headings, paragraph, and other text types) examples and documentation. These components don’t have any special props, and inherit their native HTML attributes."
+    "description": "Typography (including headings, paragraph, and other text types) examples and documentation."
   }
 }

@stellar/design-system-website/docs/foundations/typography/_category_.json

@@ -0,0 +1,20 @@
+---
+slug: /code
+description: "Display text in computer code style."
+---
+
+# Code
+
+<ComponentDescription componentName="Code" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Code">
+  <Code size="xs">Code</Code>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Code" />

@stellar/design-system-website/docs/foundations/typography/caption.mdx

@@ -0,0 +1,20 @@
+---
+slug: /display
+description: "Generic titles and captions that are not headings."
+---
+
+# Display
+
+<ComponentDescription componentName="Display" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Display">
+  <Display size="xs">Display</Caption>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Display" />

@stellar/design-system-website/docs/foundations/typography/code.mdx

@@ -0,0 +1,22 @@
+---
+slug: /text
+description: "Display text as p, div, or span."
+---
+
+# Text
+
+<ComponentDescription componentName="Text" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Text">
+  <Text as="p" size="xs">
+    Text
+  </Text>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Text" />

@stellar/design-system-website/docs/foundations/typography/display.mdx

@@ -35,20 +35,20 @@ Install SDS by using the package manager of your choice.
 npm install @stellar/design-system
 ```
 
-Add Google Fonts (`Inter Tight`, `Inter`, and `Roboto Mono`) to the `index.html`
-file or CSS/styles file.
+Add Google Fonts (`Inter` and `Inconsolata`) to the `index.html` file or
+CSS/styles file.
 
 ```html
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  href="https://fonts.googleapis.com/css2?family=Inter+Tight&family=Inter:wght@400;500;600&family=Roboto+Mono&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Inconsolata:wght@500&display=swap"
   rel="stylesheet"
 />
 ```
 
 ```css
-@import url("https://fonts.googleapis.com/css2?family=Inter+Tight&family=Inter:wght@400;500;600&family=Roboto+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Inconsolata:wght@500&display=swap");
 ```
 
 Add the main CSS file to your project (for example, the main `index` file of

@stellar/design-system-website/docs/foundations/typography/paragraph.mdx

@@ -1,6 +1,6 @@
 import { ComponentPreview } from "@site/src/components/PreviewBlock";
 
-export const titlePreview: ComponentPreview = {
+export const codePreview: ComponentPreview = {
   options: [
     {
       type: "select",
@@ -18,10 +18,6 @@ export const titlePreview: ComponentPreview = {
           value: "md",
           label: "MD",
         },
-        {
-          value: "lg",
-          label: "LG",
-        },
       ],
     },
   ],

@stellar/design-system-website/docs/foundations/typography/text.mdx

@@ -0,0 +1,68 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const displayPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "as",
+      options: [
+        {
+          value: "div",
+          label: "div",
+        },
+        {
+          value: "span",
+          label: "span",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "xs",
+          label: "XS",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+        {
+          value: "xl",
+          label: "XL",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "weight",
+      options: [
+        {
+          value: "regular",
+          label: "Regular",
+        },
+        {
+          value: "medium",
+          label: "Medium",
+        },
+        {
+          value: "semi-bold",
+          label: "Semi-Bold",
+        },
+        {
+          value: "bold",
+          label: "Bold",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/docs/foundations/typography/title.mdx

@@ -56,9 +56,27 @@ export const headingPreview: ComponentPreview = {
           value: "xl",
           label: "XL",
         },
+      ],
+    },
+    {
+      type: "select",
+      prop: "weight",
+      options: [
+        {
+          value: "regular",
+          label: "Regular",
+        },
+        {
+          value: "medium",
+          label: "Medium",
+        },
+        {
+          value: "semi-bold",
+          label: "Semi-Bold",
+        },
         {
-          value: "xxl",
-          label: "XXL",
+          value: "bold",
+          label: "Bold",
         },
       ],
     },