@hirobius/design-system 0.20.0 → 0.21.0

package/dist/types/src/app/design-system/generated-token-refs.d.ts

@@ -148,6 +148,7 @@ export declare const tokenRefs: {
                 readonly "4xl": "var(--primitive-typography-size-4xl)";
                 readonly "5xl": "var(--primitive-typography-size-5xl)";
                 readonly "6xl": "var(--primitive-typography-size-6xl)";
+                readonly code: "var(--primitive-typography-size-code)";
             };
             readonly weight: {
                 readonly regular: "var(--primitive-typography-weight-regular)";
@@ -161,6 +162,8 @@ export declare const tokenRefs: {
                 readonly snug: "var(--primitive-typography-lineHeight-snug)";
                 readonly normal: "var(--primitive-typography-lineHeight-normal)";
                 readonly relaxed: "var(--primitive-typography-lineHeight-relaxed)";
+                readonly display: "var(--primitive-typography-lineHeight-display)";
+                readonly body: "var(--primitive-typography-lineHeight-body)";
             };
             readonly letterSpacing: {
                 readonly tight: "var(--primitive-typography-letterSpacing-tight)";
@@ -389,26 +392,12 @@ export declare const tokenRefs: {
                 readonly letterSpacing: "var(--semantic-typography-display-letter-spacing)";
                 readonly lineHeight: "var(--semantic-typography-display-line-height)";
             };
-            readonly h1: {
-                readonly fontFamily: "var(--semantic-typography-h1-font-family)";
-                readonly fontSize: "var(--semantic-typography-h1-font-size)";
-                readonly fontWeight: "var(--semantic-typography-h1-font-weight)";
-                readonly letterSpacing: "var(--semantic-typography-h1-letter-spacing)";
-                readonly lineHeight: "var(--semantic-typography-h1-line-height)";
-            };
-            readonly h2: {
-                readonly fontFamily: "var(--semantic-typography-h2-font-family)";
-                readonly fontSize: "var(--semantic-typography-h2-font-size)";
-                readonly fontWeight: "var(--semantic-typography-h2-font-weight)";
-                readonly letterSpacing: "var(--semantic-typography-h2-letter-spacing)";
-                readonly lineHeight: "var(--semantic-typography-h2-line-height)";
-            };
-            readonly h3: {
-                readonly fontFamily: "var(--semantic-typography-h3-font-family)";
-                readonly fontSize: "var(--semantic-typography-h3-font-size)";
-                readonly fontWeight: "var(--semantic-typography-h3-font-weight)";
-                readonly letterSpacing: "var(--semantic-typography-h3-letter-spacing)";
-                readonly lineHeight: "var(--semantic-typography-h3-line-height)";
+            readonly title: {
+                readonly fontFamily: "var(--semantic-typography-title-font-family)";
+                readonly fontSize: "var(--semantic-typography-title-font-size)";
+                readonly fontWeight: "var(--semantic-typography-title-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-title-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-title-line-height)";
             };
             readonly body: {
                 readonly fontFamily: "var(--semantic-typography-body-font-family)";
@@ -433,14 +422,6 @@ export declare const tokenRefs: {
                 readonly letterSpacing: "var(--semantic-typography-caption-letter-spacing)";
                 readonly lineHeight: "var(--semantic-typography-caption-line-height)";
             };
-            readonly eyebrow: {
-                readonly fontFamily: "var(--semantic-typography-eyebrow-font-family)";
-                readonly fontSize: "var(--semantic-typography-eyebrow-font-size)";
-                readonly fontWeight: "var(--semantic-typography-eyebrow-font-weight)";
-                readonly letterSpacing: "var(--semantic-typography-eyebrow-letter-spacing)";
-                readonly lineHeight: "var(--semantic-typography-eyebrow-line-height)";
-                readonly textTransform: "var(--semantic-typography-eyebrow-text-transform)";
-            };
             readonly mono: {
                 readonly fontFamily: "var(--semantic-typography-mono-font-family)";
                 readonly fontSize: "var(--semantic-typography-mono-font-size)";
@@ -449,6 +430,34 @@ export declare const tokenRefs: {
                 readonly lineHeight: "var(--semantic-typography-mono-line-height)";
                 readonly maxWidth: "var(--semantic-typography-mono-max-width)";
             };
+            readonly h1: {
+                readonly fontFamily: "var(--semantic-typography-h1-font-family)";
+                readonly fontSize: "var(--semantic-typography-h1-font-size)";
+                readonly fontWeight: "var(--semantic-typography-h1-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-h1-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-h1-line-height)";
+            };
+            readonly h2: {
+                readonly fontFamily: "var(--semantic-typography-h2-font-family)";
+                readonly fontSize: "var(--semantic-typography-h2-font-size)";
+                readonly fontWeight: "var(--semantic-typography-h2-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-h2-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-h2-line-height)";
+            };
+            readonly h3: {
+                readonly fontFamily: "var(--semantic-typography-h3-font-family)";
+                readonly fontSize: "var(--semantic-typography-h3-font-size)";
+                readonly fontWeight: "var(--semantic-typography-h3-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-h3-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-h3-line-height)";
+            };
+            readonly eyebrow: {
+                readonly fontFamily: "var(--semantic-typography-eyebrow-font-family)";
+                readonly fontSize: "var(--semantic-typography-eyebrow-font-size)";
+                readonly fontWeight: "var(--semantic-typography-eyebrow-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-eyebrow-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-eyebrow-line-height)";
+            };
             readonly lineHeight: {
                 readonly none: "var(--semantic-typography-lineHeight-none)";
             };

package/dist/types/src/app/design-system/generated-token-values.d.ts

@@ -149,6 +149,7 @@ export declare const tokenValues: {
                 readonly "4xl": "36px";
                 readonly "5xl": "48px";
                 readonly "6xl": "60px";
+                readonly code: "13px";
             };
             readonly weight: {
                 readonly regular: "400";
@@ -162,6 +163,8 @@ export declare const tokenValues: {
                 readonly snug: "1.375";
                 readonly normal: "1.5";
                 readonly relaxed: "1.625";
+                readonly display: "1.05";
+                readonly body: "1.6";
             };
             readonly letterSpacing: {
                 readonly tight: "-0.01em";

package/dist/types/src/app/design-system/tokens.d.ts

@@ -159,41 +159,143 @@ declare const hds: {
             };
         };
         typography: {
+            /** @deprecated hds#483 — use `typeStyles.ui`.
+             * @removeIn 1.0.0 */
             label: React.CSSProperties;
+            /** @deprecated hds#483 — use `typeStyles.ui`.
+             * @removeIn 1.0.0 */
             labelDescriptive: React.CSSProperties;
+            /** @deprecated hds#483 — use `typeStyles.mono`.
+             * @removeIn 1.0.0 */
             labelTechnical: React.CSSProperties;
         };
     };
     typeStyles: {
         display: React.CSSProperties;
-        h1: React.CSSProperties;
-        h2: React.CSSProperties;
-        h3: React.CSSProperties;
+        title: React.CSSProperties;
         body: React.CSSProperties;
         ui: React.CSSProperties;
-        eyebrow: React.CSSProperties;
-        mono: React.CSSProperties;
-        small: React.CSSProperties;
         caption: React.CSSProperties;
+        mono: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
+        h1: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
+        h2: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
+        h3: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
         heading1: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
         heading2: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
         heading3: React.CSSProperties;
-        technical: React.CSSProperties;
-        badge: React.CSSProperties;
-        micro: React.CSSProperties;
-        displayXl: React.CSSProperties;
-        display1: React.CSSProperties;
-        display2: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
         headingHero: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
         headingSection: React.CSSProperties;
-        title: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.title`.
+         * @removeIn 1.0.0
+         */
+        display2: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.display`.
+         * @removeIn 1.0.0
+         */
+        displayXl: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.display`.
+         * @removeIn 1.0.0
+         */
+        display1: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.body`.
+         * @removeIn 1.0.0
+         */
         body2: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.body`.
+         * @removeIn 1.0.0
+         */
         bodyLarge: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.ui`.
+         * @removeIn 1.0.0
+         */
+        small: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.ui`.
+         * @removeIn 1.0.0
+         */
         bodySmall: React.CSSProperties;
-        monoXs: React.CSSProperties;
-        monoSm: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.ui`.
+         * @removeIn 1.0.0
+         */
         label: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.ui`.
+         * @removeIn 1.0.0
+         */
         labelDescriptive: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.caption`.
+         * @removeIn 1.0.0
+         */
+        eyebrow: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.caption`.
+         * @removeIn 1.0.0
+         */
+        badge: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.caption`.
+         * @removeIn 1.0.0
+         */
+        micro: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.mono`.
+         * @removeIn 1.0.0
+         */
+        technical: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.mono`.
+         * @removeIn 1.0.0
+         */
+        monoXs: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.mono`.
+         * @removeIn 1.0.0
+         */
+        monoSm: React.CSSProperties;
+        /**
+         * @deprecated hds#483 — use `typeStyles.mono`.
+         * @removeIn 1.0.0
+         */
         labelTechnical: React.CSSProperties;
     };
     iconSize: {

package/dist/types/src/index.d.ts

@@ -35,7 +35,6 @@ export * from './app/components/table.js';
 export * from './app/components/tag.js';
 export * from './app/components/text.js';
 export * from './app/components/kbd.js';
-export * from './app/components/status-dot.js';
 export * from './app/components/timestamp.js';
 export * from './app/components/blockquote.js';
 export * from './app/components/visually-hidden.js';
@@ -607,6 +606,13 @@ export declare const tokens: {
                     };
                     $description: string;
                 };
+                code: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                    $description: string;
+                };
             };
             weight: {
                 $type: string;
@@ -642,6 +648,14 @@ export declare const tokens: {
                     $value: number;
                     $description: string;
                 };
+                display: {
+                    $value: number;
+                    $description: string;
+                };
+                body: {
+                    $value: number;
+                    $description: string;
+                };
             };
             letterSpacing: {
                 $type: string;
@@ -1729,14 +1743,8 @@ export declare const tokens: {
                     lineHeight: string;
                 };
                 $description: string;
-                $extensions: {
-                    "com.figma.variables": {
-                        fontSize: string;
-                        note: string;
-                    };
-                };
             };
-            h1: {
+            title: {
                 $value: {
                     fontFamily: string;
                     fontSize: string;
@@ -1745,30 +1753,36 @@ export declare const tokens: {
                     lineHeight: string;
                 };
                 $description: string;
-                $extensions: {
-                    "com.figma.variables": {
-                        fontSize: string;
-                        note: string;
-                    };
-                };
             };
-            h2: {
+            body: {
                 $value: {
                     fontFamily: string;
                     fontSize: string;
                     fontWeight: string;
                     letterSpacing: string;
                     lineHeight: string;
+                    maxWidth: {
+                        value: number;
+                        unit: string;
+                    };
                 };
                 $description: string;
-                $extensions: {
-                    "com.figma.variables": {
-                        fontSize: string;
-                        note: string;
+            };
+            ui: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                    maxWidth: {
+                        value: number;
+                        unit: string;
                     };
                 };
+                $description: string;
             };
-            h3: {
+            caption: {
                 $value: {
                     fontFamily: string;
                     fontSize: string;
@@ -1777,14 +1791,8 @@ export declare const tokens: {
                     lineHeight: string;
                 };
                 $description: string;
-                $extensions: {
-                    "com.figma.variables": {
-                        fontSize: string;
-                        note: string;
-                    };
-                };
             };
-            body: {
+            mono: {
                 $value: {
                     fontFamily: string;
                     fontSize: string;
@@ -1798,21 +1806,18 @@ export declare const tokens: {
                 };
                 $description: string;
             };
-            ui: {
+            h1: {
                 $value: {
                     fontFamily: string;
                     fontSize: string;
                     fontWeight: string;
                     letterSpacing: string;
                     lineHeight: string;
-                    maxWidth: {
-                        value: number;
-                        unit: string;
-                    };
                 };
                 $description: string;
+                $deprecated: string;
             };
-            caption: {
+            h2: {
                 $value: {
                     fontFamily: string;
                     fontSize: string;
@@ -1821,31 +1826,29 @@ export declare const tokens: {
                     lineHeight: string;
                 };
                 $description: string;
+                $deprecated: string;
             };
-            eyebrow: {
+            h3: {
                 $value: {
                     fontFamily: string;
                     fontSize: string;
                     fontWeight: string;
                     letterSpacing: string;
                     lineHeight: string;
-                    textTransform: string;
                 };
                 $description: string;
+                $deprecated: string;
             };
-            mono: {
+            eyebrow: {
                 $value: {
                     fontFamily: string;
                     fontSize: string;
                     fontWeight: string;
                     letterSpacing: string;
                     lineHeight: string;
-                    maxWidth: {
-                        value: number;
-                        unit: string;
-                    };
                 };
                 $description: string;
+                $deprecated: string;
             };
             lineHeight: {
                 none: {

package/dist/variables.css

@@ -118,6 +118,7 @@
   --primitive-typography-size-4xl: 36px;
   --primitive-typography-size-5xl: 48px;
   --primitive-typography-size-6xl: 60px;
+  --primitive-typography-size-code: 13px;
   --primitive-typography-weight-regular: 400;
   --primitive-typography-weight-medium: 500;
   --primitive-typography-weight-bold: 700;
@@ -127,6 +128,8 @@
   --primitive-typography-lineHeight-snug: 1.375;
   --primitive-typography-lineHeight-normal: 1.5;
   --primitive-typography-lineHeight-relaxed: 1.625;
+  --primitive-typography-lineHeight-display: 1.05;
+  --primitive-typography-lineHeight-body: 1.6;
   --primitive-typography-letterSpacing-tight: -0.01em;
   --primitive-typography-letterSpacing-normal: 0em;
   --primitive-typography-letterSpacing-caps: 0.06em;
@@ -267,62 +270,67 @@
   --semantic-layout-grid-columns-desktop: var(--primitive-grid-columns-3);
   /* semantic.typography.display */
   --semantic-typography-display-font-family: var(--primitive-typography-family-display);
-  --semantic-typography-display-font-size: var(--primitive-typography-size-6xl);
+  --semantic-typography-display-font-size: var(--primitive-typography-size-5xl);
   --semantic-typography-display-font-weight: var(--primitive-typography-weight-bold);
   --semantic-typography-display-letter-spacing: var(--primitive-typography-letterSpacing-tight);
-  --semantic-typography-display-line-height: var(--primitive-typography-lineHeight-none);
-  /* semantic.typography.h1 */
-  --semantic-typography-h1-font-family: var(--primitive-typography-family-display);
-  --semantic-typography-h1-font-size: var(--primitive-typography-size-5xl);
-  --semantic-typography-h1-font-weight: var(--primitive-typography-weight-bold);
-  --semantic-typography-h1-letter-spacing: var(--primitive-typography-letterSpacing-tight);
-  --semantic-typography-h1-line-height: var(--primitive-typography-lineHeight-tight);
-  /* semantic.typography.h2 */
-  --semantic-typography-h2-font-family: var(--primitive-typography-family-display);
-  --semantic-typography-h2-font-size: var(--primitive-typography-size-3xl);
-  --semantic-typography-h2-font-weight: var(--primitive-typography-weight-bold);
-  --semantic-typography-h2-letter-spacing: var(--primitive-typography-letterSpacing-tight);
-  --semantic-typography-h2-line-height: 40px;
-  /* semantic.typography.h3 */
-  --semantic-typography-h3-font-family: var(--primitive-typography-family-display);
-  --semantic-typography-h3-font-size: var(--primitive-typography-size-xl);
-  --semantic-typography-h3-font-weight: var(--primitive-typography-weight-bold);
-  --semantic-typography-h3-letter-spacing: var(--primitive-typography-letterSpacing-normal);
-  --semantic-typography-h3-line-height: 28px;
+  --semantic-typography-display-line-height: var(--primitive-typography-lineHeight-display);
+  /* semantic.typography.title */
+  --semantic-typography-title-font-family: var(--primitive-typography-family-display);
+  --semantic-typography-title-font-size: var(--primitive-typography-size-2xl);
+  --semantic-typography-title-font-weight: var(--primitive-typography-weight-bold);
+  --semantic-typography-title-letter-spacing: var(--primitive-typography-letterSpacing-tight);
+  --semantic-typography-title-line-height: var(--primitive-typography-lineHeight-tight);
   /* semantic.typography.body */
   --semantic-typography-body-font-family: var(--primitive-typography-family-primary);
   --semantic-typography-body-font-size: var(--primitive-typography-size-base);
-  --semantic-typography-body-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-body-font-weight: var(--primitive-typography-weight-regular);
   --semantic-typography-body-letter-spacing: var(--primitive-typography-letterSpacing-normal);
-  --semantic-typography-body-line-height: 24px;
+  --semantic-typography-body-line-height: var(--primitive-typography-lineHeight-body);
   --semantic-typography-body-max-width: 60ch;
   /* semantic.typography.ui */
   --semantic-typography-ui-font-family: var(--primitive-typography-family-primary);
   --semantic-typography-ui-font-size: var(--primitive-typography-size-sm);
   --semantic-typography-ui-font-weight: var(--primitive-typography-weight-medium);
   --semantic-typography-ui-letter-spacing: var(--primitive-typography-letterSpacing-normal);
-  --semantic-typography-ui-line-height: 20px;
+  --semantic-typography-ui-line-height: var(--primitive-typography-lineHeight-normal);
   --semantic-typography-ui-max-width: 60ch;
   /* semantic.typography.caption */
   --semantic-typography-caption-font-family: var(--primitive-typography-family-primary);
   --semantic-typography-caption-font-size: var(--primitive-typography-size-xs);
   --semantic-typography-caption-font-weight: var(--primitive-typography-weight-medium);
   --semantic-typography-caption-letter-spacing: var(--primitive-typography-letterSpacing-normal);
-  --semantic-typography-caption-line-height: 16px;
-  /* semantic.typography.eyebrow */
-  --semantic-typography-eyebrow-font-family: var(--primitive-typography-family-primary);
-  --semantic-typography-eyebrow-font-size: var(--primitive-typography-size-xs);
-  --semantic-typography-eyebrow-font-weight: var(--primitive-typography-weight-medium);
-  --semantic-typography-eyebrow-letter-spacing: var(--primitive-typography-letterSpacing-caps);
-  --semantic-typography-eyebrow-line-height: 16px;
-  --semantic-typography-eyebrow-text-transform: uppercase;
+  --semantic-typography-caption-line-height: var(--primitive-typography-lineHeight-normal);
   /* semantic.typography.mono */
   --semantic-typography-mono-font-family: var(--primitive-typography-family-mono);
-  --semantic-typography-mono-font-size: var(--primitive-typography-size-sm);
+  --semantic-typography-mono-font-size: var(--primitive-typography-size-code);
   --semantic-typography-mono-font-weight: var(--primitive-typography-weight-regular);
   --semantic-typography-mono-letter-spacing: var(--primitive-typography-letterSpacing-normal);
-  --semantic-typography-mono-line-height: 20px;
+  --semantic-typography-mono-line-height: var(--primitive-typography-lineHeight-normal);
   --semantic-typography-mono-max-width: 60ch;
+  /* semantic.typography.h1 */
+  --semantic-typography-h1-font-family: var(--primitive-typography-family-display);
+  --semantic-typography-h1-font-size: var(--primitive-typography-size-2xl);
+  --semantic-typography-h1-font-weight: var(--primitive-typography-weight-bold);
+  --semantic-typography-h1-letter-spacing: var(--primitive-typography-letterSpacing-tight);
+  --semantic-typography-h1-line-height: var(--primitive-typography-lineHeight-tight);
+  /* semantic.typography.h2 */
+  --semantic-typography-h2-font-family: var(--primitive-typography-family-display);
+  --semantic-typography-h2-font-size: var(--primitive-typography-size-2xl);
+  --semantic-typography-h2-font-weight: var(--primitive-typography-weight-bold);
+  --semantic-typography-h2-letter-spacing: var(--primitive-typography-letterSpacing-tight);
+  --semantic-typography-h2-line-height: var(--primitive-typography-lineHeight-tight);
+  /* semantic.typography.h3 */
+  --semantic-typography-h3-font-family: var(--primitive-typography-family-display);
+  --semantic-typography-h3-font-size: var(--primitive-typography-size-2xl);
+  --semantic-typography-h3-font-weight: var(--primitive-typography-weight-bold);
+  --semantic-typography-h3-letter-spacing: var(--primitive-typography-letterSpacing-tight);
+  --semantic-typography-h3-line-height: var(--primitive-typography-lineHeight-tight);
+  /* semantic.typography.eyebrow */
+  --semantic-typography-eyebrow-font-family: var(--primitive-typography-family-primary);
+  --semantic-typography-eyebrow-font-size: var(--primitive-typography-size-xs);
+  --semantic-typography-eyebrow-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-eyebrow-letter-spacing: var(--primitive-typography-letterSpacing-normal);
+  --semantic-typography-eyebrow-line-height: var(--primitive-typography-lineHeight-normal);
   --semantic-typography-lineHeight-none: var(--primitive-typography-lineHeight-none);
   --semantic-docs-space-section: var(--primitive-space-12);
   --semantic-docs-space-paragraph: var(--primitive-space-6);