Merge branch 'main' into status-text-indicator

.changeset/sour-experts-rest.md

@@ -0,0 +1,47 @@
+---
+"@salt-ds/theme": minor
+---
+
+Added new tokens
+
+| Tier       | Token                                    | Value                                   |
+| ---------- | ---------------------------------------- | --------------------------------------- |
+| Foundation | `--salt-typography-fontFamily-openSans`  | "Open Sans"                             |
+| Foundation | `--salt-typography-fontFamily-ptMono`    | "PT Mono"                               |
+| Palette    | `--salt-palette-text-fontFamily`         | `--salt-typography-fontFamily-openSans` |
+| Palette    | `--salt-palette-text-fontFamily-heading` | `--salt-typography-fontFamily-openSans` |
+| Palette    | `--salt-palette-text-fontFamily-code`    | `--salt-typography-fontFamily-ptMono`   |
+
+Updated existing token value mapping to use new tokens
+
+```diff
+- --salt-text-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
+- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
+- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
+- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
+- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
+- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
+- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
+- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
+- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
+- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
++ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
+- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
++ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
+```
+
+Deprecated below tokens, use replacement token instead
+
+```
+  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
+  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+```

.changeset/update-global-theme.md

@@ -0,0 +1,10 @@
+---
+"@salt-ds/theme": minor
+---
+
+Updated global theme css font family pointing to text chractertics instead of foundation value
+
+```diff
+- font-family: var(--salt-typography-fontFamily);
++ font-family: var(--salt-text-fontFamily);
+```

.storybook/styles.css

@@ -1,5 +1,5 @@
 .salt-theme .sbdocs {
-  font-family: var(--salt-typography-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
   letter-spacing: var(--salt-text-letterSpacing);
   line-height: var(--salt-text-lineHeight);
@@ -41,7 +41,7 @@
   color: var(--salt-color-gray-900);
   font-size: var(--salt-text-fontSize);
   line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-typography-fontFamily);
+  font-family: var(--salt-text-code-fontFamily);
   font-size: var(--salt-text-fontSize);
   letter-spacing: var(--salt-text-letterSpacing);
   line-height: var(--salt-text-lineHeight);

packages/lab/stories/skip-link/skip-link.stories.css

@@ -4,6 +4,6 @@
 
 .goalsList {
   font-size: var(--salt-text-fontSize);
-  font-family: var(--salt-typography-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-lineHeight);
 }

packages/theme/css/characteristics/text.css

@@ -13,65 +13,65 @@
   --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
 
   /* Body text (should be used as default) */
-  --salt-text-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
   --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
   --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
   --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
 
   /* Notation */
-  --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
   --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
   --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
   --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
 
   /* H1 */
-  --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
   --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
   --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
   --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
 
   /* H2 */
-  --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
   --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
   --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
   --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
 
   /* H3 */
-  --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
   --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
   --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
   --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
 
   /* H4 */
-  --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
   --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
   --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
   --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
 
   /* Label */
-  --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
   --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
   --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
   --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
 
   /* Display text */
-  --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
   --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
   --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
   --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
 
-  --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
   --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
   --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
   --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
 
-  --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
+  --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
   --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
   --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
   --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
 
   /* Code */
-  --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
+  --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
 }
 
 /* Sizes by density */

packages/theme/css/deprecated/foundations.css

@@ -24,6 +24,10 @@
   --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color); /* Use --salt-shadow-300 */
   --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color); /* Use --salt-shadow-400 */
   --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color); /* Use --salt-shadow-500 */
+
+  /* Typography */
+  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
+  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
 }
 
 .salt-theme[data-mode="light"] {

packages/theme/css/foundations/typography.css

@@ -1,6 +1,6 @@
 .salt-theme {
-  --salt-typography-fontFamily: "Open Sans";
-  --salt-typography-fontFamily-code: "PT Mono";
+  --salt-typography-fontFamily-openSans: "Open Sans";
+  --salt-typography-fontFamily-ptMono: "PT Mono";
 
   --salt-typography-fontWeight-light: 300;
   --salt-typography-fontWeight-regular: 400;

packages/theme/css/global.css

@@ -4,7 +4,7 @@
 
 .salt-theme {
   color: var(--salt-content-primary-foreground);
-  font-family: var(--salt-typography-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
   letter-spacing: var(--salt-text-letterSpacing);
   line-height: var(--salt-text-lineHeight);

packages/theme/css/palette/text.css

@@ -0,0 +1,5 @@
+.salt-theme {
+  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
+  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
+  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+}

packages/theme/css/theme.css

@@ -26,6 +26,7 @@
 @import url(palette/opacity.css);
 @import url(palette/positive.css);
 @import url(palette/success.css);
+@import url(palette/text.css);
 @import url(palette/warning.css);
 
 /* Each characteristic file references values from above foundations */

packages/theme/stories/introduction.mdx

@@ -120,7 +120,7 @@ Characteristics semantically group both palette and foundational tokens to provi
 | Separable                    | Components, or elements within a component that divide content, functions or regions | `--salt-separable-primary-borderColor`       | `--salt-palette-neutral-primary-border`            |
 | Status                       | Components indicating an informational, warning, error or success state              | `--salt-status-info-borderColor`             | `--salt-palette-info-border`                       |
 | Target                       | Components that form a target for draggable elements                                 | `--salt-target-borderStyle`                  | `dashed`                                           |
-| Text                         | All text components or HTML elements                                                 | `--salt-text-fontFamily`                     | `--salt-typography-fontFamily`                     |
+| Text                         | All text components or HTML elements                                                 | `--salt-text-fontFamily`                     | `--salt-palette-text-fontFamily-heading`           |
 | Track                        | Components that indicate a changeable value or progression                           | `--salt-track-borderStyle`                   | `solid`                                            |
 | Content                      | Provides default color values for text and icon display                              | `--salt-content-primary-foreground`          | `--salt-palette-neutral-primary-foreground`        |
 | **Deprecated:** Differential | Replaced with Status                                                                 | \*                                           | \*                                                 |

site/src/css/theme/theme.css

@@ -19,6 +19,7 @@
 
 .salt-theme[data-mode="light"],
 .salt-theme[data-mode="dark"] {
-  --salt-typography-fontFamily: var(--site-font-family);
-  --salt-typography-fontFamily-code: var(--site-font-family-code);
+  --salt-palette-text-fontFamily: var(--site-font-family);
+  --salt-palette-text-fontFamily-heading: var(--site-font-family);
+  --salt-palette-text-fontFamily-code: var(--site-font-family-code);
 }

tooling/css-variable-docgen-components/src/CharacteristicUsage.css

@@ -1,5 +1,5 @@
 .characteristicTokenDoc {
-  font-family: var(--salt-typography-fontFamily-code);
+  font-family: var(--salt-text-fontFamily-code);
   height: var(--salt-size-base);
   margin: var(--salt-size-unit);
 }