@nationaldesignstudio/react 0.3.0 → 0.5.1

package/dist/packages/tokens/dist/semantic/typography/base.js

@@ -0,0 +1,858 @@
+const i = {
+  semantic: {
+    typography: {
+      $extensions: {
+        "nds.theme": {
+          category: "typography",
+          name: "base"
+        },
+        "nds.figmaSync": {
+          collectionKey: "96f5387fdb03cd6bbd3a7de7ead150f46afac330",
+          collectionName: "Typography",
+          modeMapping: { modeName: "Value" }
+        }
+      },
+      // =====================================================================
+      // HEADING GROUP
+      // Shared font properties for all headings
+      // =====================================================================
+      heading: {
+        font: {
+          $type: "fontFamily",
+          $value: "{primitive.font-family.inter-tight}",
+          $description: "Headline font family - shared across all headings"
+        },
+        weight: {
+          $type: "fontWeight",
+          $value: "{primitive.font-weight.semibold}",
+          $description: "Headline weight (600) - shared across all headings"
+        }
+      },
+      // H1 Display (XL) - Large hero typography
+      h1: {
+        display: {
+          $extensions: {
+            "nds.utility": {
+              name: "typography-h1-display",
+              responsive: !0,
+              inherit: {
+                fontFamily: "heading.font",
+                fontWeight: "heading.weight"
+              }
+            }
+          },
+          lg: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.128}",
+              $description: "H1 display font size (lg breakpoint)"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.128}",
+              $description: "H1 display line height (lg breakpoint)"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.128}",
+              $description: "H1 display letter spacing (lg breakpoint)"
+            }
+          },
+          md: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.96}"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.96}"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.96}"
+            }
+          },
+          sm: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.64}"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.64}"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.64}"
+            }
+          }
+        },
+        // Regular H1 - flattened breakpoint structure
+        $extensions: {
+          "nds.utility": {
+            name: "typography-h1",
+            responsive: !0,
+            inherit: {
+              fontFamily: "heading.font",
+              fontWeight: "heading.weight"
+            }
+          }
+        },
+        lg: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.96}",
+            $description: "H1 font size (lg breakpoint)"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.96}",
+            $description: "H1 line height (lg breakpoint)"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.96}",
+            $description: "H1 letter spacing (lg breakpoint)"
+          }
+        },
+        md: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.72}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.72}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.72}"
+          }
+        },
+        sm: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.48}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.48}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.48}"
+          }
+        }
+      },
+      // H2
+      h2: {
+        $extensions: {
+          "nds.utility": {
+            name: "typography-h2",
+            responsive: !0,
+            inherit: {
+              fontFamily: "heading.font",
+              fontWeight: "heading.weight"
+            }
+          }
+        },
+        lg: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.72}",
+            $description: "H2 font size (lg breakpoint)"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.72}",
+            $description: "H2 line height (lg breakpoint)"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.72}",
+            $description: "H2 letter spacing (lg breakpoint)"
+          }
+        },
+        md: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.64}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.64}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.64}"
+          }
+        },
+        sm: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.48}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.48}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.48}"
+          }
+        }
+      },
+      // H3
+      h3: {
+        $extensions: {
+          "nds.utility": {
+            name: "typography-h3",
+            responsive: !0,
+            inherit: {
+              fontFamily: "heading.font",
+              fontWeight: "heading.weight"
+            }
+          }
+        },
+        lg: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.64}",
+            $description: "H3 font size (lg breakpoint)"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.64}",
+            $description: "H3 line height (lg breakpoint)"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.64}",
+            $description: "H3 letter spacing (lg breakpoint)"
+          }
+        },
+        md: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.48}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.48}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.48}"
+          }
+        },
+        sm: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.32}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.32}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.32}"
+          }
+        }
+      },
+      // H4
+      h4: {
+        $extensions: {
+          "nds.utility": {
+            name: "typography-h4",
+            responsive: !0,
+            inherit: {
+              fontFamily: "heading.font",
+              fontWeight: "heading.weight"
+            }
+          }
+        },
+        lg: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.48}",
+            $description: "H4 font size (lg breakpoint)"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.48}",
+            $description: "H4 line height (lg breakpoint)"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.48}",
+            $description: "H4 letter spacing (lg breakpoint)"
+          }
+        },
+        md: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.32}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.32}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.32}"
+          }
+        },
+        sm: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.24}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.24}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.24}"
+          }
+        }
+      },
+      // H5
+      h5: {
+        $extensions: {
+          "nds.utility": {
+            name: "typography-h5",
+            responsive: !0,
+            inherit: {
+              fontFamily: "heading.font",
+              fontWeight: "heading.weight"
+            }
+          }
+        },
+        lg: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.32}",
+            $description: "H5 font size (lg breakpoint)"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.32}",
+            $description: "H5 line height (lg breakpoint)"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.32}",
+            $description: "H5 letter spacing (lg breakpoint)"
+          }
+        },
+        md: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.24}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.24}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.24}"
+          }
+        },
+        sm: {
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.21}"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.21}"
+          },
+          tracking: {
+            $type: "dimension",
+            $value: "{primitive.letter-spacing.21}"
+          }
+        }
+      },
+      // =====================================================================
+      // TEXT GROUP
+      // Body text, overline, and caption
+      // =====================================================================
+      body: {
+        font: {
+          $type: "fontFamily",
+          $value: "{primitive.font-family.inter}",
+          $description: "Body font family"
+        },
+        weight: {
+          $type: "fontWeight",
+          $value: "{primitive.font-weight.regular}",
+          $description: "Body font weight"
+        },
+        // Body Large - responsive typography
+        lg: {
+          $extensions: {
+            "nds.utility": {
+              name: "typography-body-lg",
+              responsive: !0,
+              inherit: {
+                fontFamily: "body.font",
+                fontWeight: "body.weight"
+              }
+            }
+          },
+          lg: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.21}",
+              $description: "Body lg font size (lg breakpoint)"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.21}",
+              $description: "Body lg line height (lg breakpoint)"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.21}",
+              $description: "Body lg letter spacing (lg breakpoint)"
+            }
+          },
+          md: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.18}"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.18}"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.18}"
+            }
+          },
+          sm: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.16}"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.16}"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.16}"
+            }
+          }
+        },
+        // Body Medium - responsive typography
+        md: {
+          $extensions: {
+            "nds.utility": {
+              name: "typography-body-md",
+              responsive: !0,
+              inherit: {
+                fontFamily: "body.font",
+                fontWeight: "body.weight"
+              }
+            }
+          },
+          lg: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.18}",
+              $description: "Body md font size (lg breakpoint)"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.18}",
+              $description: "Body md line height (lg breakpoint)"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.18}",
+              $description: "Body md letter spacing (lg breakpoint)"
+            }
+          },
+          md: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.16}"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.16}"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.16}"
+            }
+          },
+          sm: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.14}"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.14}"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.14}"
+            }
+          }
+        },
+        // Body Small - responsive typography
+        sm: {
+          $extensions: {
+            "nds.utility": {
+              name: "typography-body-sm",
+              responsive: !0,
+              inherit: {
+                fontFamily: "body.font",
+                fontWeight: "body.weight"
+              }
+            }
+          },
+          lg: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.14}",
+              $description: "Body sm font size (lg breakpoint)"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.14}",
+              $description: "Body sm line height (lg breakpoint)"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.14}",
+              $description: "Body sm letter spacing (lg breakpoint)"
+            }
+          },
+          md: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.14}"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.14}"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.14}"
+            }
+          },
+          sm: {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.12}"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.12}"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.12}"
+            }
+          }
+        }
+      },
+      // Overline - Small caps/label text
+      overline: {
+        $extensions: {
+          "nds.utility": {
+            name: "typography-overline",
+            inherit: {
+              fontFamily: "body.font"
+            }
+          }
+        },
+        size: {
+          $type: "dimension",
+          $value: "{primitive.font-size.14}",
+          $description: "Overline font size"
+        },
+        "line-height": {
+          $type: "dimension",
+          $value: "{primitive.line-height.24}",
+          $description: "Overline line height"
+        },
+        tracking: {
+          $type: "dimension",
+          $value: "{primitive.letter-spacing.14}",
+          $description: "Overline letter spacing"
+        }
+      },
+      // Caption - Small supplementary text
+      caption: {
+        $extensions: {
+          "nds.utility": {
+            name: "typography-caption",
+            inherit: {
+              fontFamily: "body.font"
+            }
+          }
+        },
+        size: {
+          $type: "dimension",
+          $value: "{primitive.font-size.11}",
+          $description: "Caption font size"
+        },
+        "line-height": {
+          $type: "dimension",
+          $value: "{primitive.line-height.11}",
+          $description: "Caption line height"
+        },
+        tracking: {
+          $type: "dimension",
+          $value: "{primitive.letter-spacing.11}",
+          $description: "Caption letter spacing"
+        }
+      },
+      // =====================================================================
+      // UI GROUP
+      // Button, link, and interactive element typography
+      // =====================================================================
+      ui: {
+        button: {
+          font: {
+            $type: "fontFamily",
+            $value: "{primitive.font-family.inter}",
+            $description: "Button font family"
+          },
+          weight: {
+            $type: "fontWeight",
+            $value: "{primitive.font-weight.medium}",
+            $description: "Button font weight"
+          },
+          lg: {
+            $extensions: {
+              "nds.utility": {
+                name: "typography-ui-button-lg",
+                inherit: {
+                  fontFamily: "ui.button.font",
+                  fontWeight: "ui.button.weight"
+                }
+              }
+            },
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.18}",
+              $description: "lg button font size"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.18}",
+              $description: "lg button line height"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.button}",
+              $description: "lg button letter spacing"
+            }
+          },
+          md: {
+            $extensions: {
+              "nds.utility": {
+                name: "typography-ui-button-md",
+                inherit: {
+                  fontFamily: "ui.button.font",
+                  fontWeight: "ui.button.weight"
+                }
+              }
+            },
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.16}",
+              $description: "md button font size"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.16}",
+              $description: "md button line height"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.button}",
+              $description: "md button letter spacing"
+            }
+          },
+          sm: {
+            $extensions: {
+              "nds.utility": {
+                name: "typography-ui-button-sm",
+                inherit: {
+                  fontFamily: "ui.button.font",
+                  fontWeight: "ui.button.weight"
+                }
+              }
+            },
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.14}",
+              $description: "sm button font size"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.14}",
+              $description: "sm button line height"
+            },
+            tracking: {
+              $type: "dimension",
+              $value: "{primitive.letter-spacing.button}",
+              $description: "sm button letter spacing"
+            }
+          }
+        },
+        link: {
+          weight: {
+            $type: "fontWeight",
+            $value: "{primitive.font-weight.medium}",
+            $description: "Link font weight"
+          }
+        },
+        label: {
+          $extensions: {
+            "nds.utility": {
+              name: "typography-ui-label",
+              inherit: {
+                fontFamily: "ui.label.font",
+                fontWeight: "ui.label.weight"
+              }
+            }
+          },
+          font: {
+            $type: "fontFamily",
+            $value: "{primitive.font-family.inter}",
+            $description: "Label font family"
+          },
+          weight: {
+            $type: "fontWeight",
+            $value: "{primitive.font-weight.medium}",
+            $description: "Label font weight"
+          },
+          size: {
+            $type: "dimension",
+            $value: "{primitive.font-size.14}",
+            $description: "Label font size"
+          },
+          "line-height": {
+            $type: "dimension",
+            $value: "{primitive.line-height.14}",
+            $description: "Label line height"
+          }
+        },
+        // Text - General UI text ramp for buttons, captions, and other UI elements
+        text: {
+          font: {
+            $type: "fontFamily",
+            $value: "{primitive.font-family.inter}",
+            $description: "UI text font family"
+          },
+          weight: {
+            $type: "fontWeight",
+            $value: "{primitive.font-weight.medium}",
+            $description: "UI text font weight"
+          },
+          xs: {
+            $extensions: {
+              "nds.utility": {
+                name: "typography-ui-text-xs",
+                inherit: {
+                  fontFamily: "ui.text.font",
+                  fontWeight: "ui.text.weight"
+                }
+              }
+            },
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.12}",
+              $description: "Extra small UI text font size (12px) - for small buttons, captions"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.12}",
+              $description: "Extra small UI text line height (16px)"
+            }
+          },
+          sm: {
+            $extensions: {
+              "nds.utility": {
+                name: "typography-ui-text-sm",
+                inherit: {
+                  fontFamily: "ui.text.font",
+                  fontWeight: "ui.text.weight"
+                }
+              }
+            },
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.14}",
+              $description: "Small UI text font size (14px) - for default buttons"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.14}",
+              $description: "Small UI text line height (20px)"
+            }
+          },
+          md: {
+            $extensions: {
+              "nds.utility": {
+                name: "typography-ui-text-md",
+                inherit: {
+                  fontFamily: "ui.text.font",
+                  fontWeight: "ui.text.weight"
+                }
+              }
+            },
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.16}",
+              $description: "Medium UI text font size (16px) - for large buttons"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.16}",
+              $description: "Medium UI text line height (24px)"
+            }
+          },
+          lg: {
+            $extensions: {
+              "nds.utility": {
+                name: "typography-ui-text-lg",
+                inherit: {
+                  fontFamily: "ui.text.font",
+                  fontWeight: "ui.text.weight"
+                }
+              }
+            },
+            size: {
+              $type: "dimension",
+              $value: "{primitive.font-size.18}",
+              $description: "Large UI text font size (18px) - optional larger size"
+            },
+            "line-height": {
+              $type: "dimension",
+              $value: "{primitive.line-height.28}",
+              $description: "Large UI text line height (28px)"
+            }
+          }
+        }
+      }
+    }
+  }
+};
+export {
+  i as baseTypographyTokens
+};
+//# sourceMappingURL=base.js.map