@headspace_designsystem/hsds-web-library 0.1.0

package/dist/tokens/semantic/typography.d.ts

@@ -0,0 +1,253 @@
+export interface TypeStyle {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: string;
+    letterSpacing: string;
+}
+export declare const desktopTypeScale: {
+    readonly heading: {
+        /** Heading 3XL — 64px Bold, lh 1.0, ls -3px */
+        readonly '3xl': {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1";
+            letterSpacing: "-3px";
+        };
+        /** Heading 2XL — 56px Bold, lh 1.1, ls -3px */
+        readonly '2xl': {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.1";
+            letterSpacing: "-3px";
+        };
+        /** Heading XL — 48px Bold, lh 1.1, ls -3px */
+        readonly xl: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.1";
+            letterSpacing: "-3px";
+        };
+        /** Heading L — 40px Bold, lh 1.2, ls -3px */
+        readonly l: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+        /** Heading M — 32px Bold, lh 1.2, ls -3px */
+        readonly m: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+        /** Heading S — 24px Bold, lh 1.2, ls -3px */
+        readonly s: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+    };
+    readonly body: {
+        /** Body L — 20px Regular, lh 1.5, ls 0 */
+        readonly l: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Body M — 18px Regular, lh 1.5, ls 0 */
+        readonly m: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Body S — 16px Regular, lh 1.5, ls 0 */
+        readonly s: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Body XS — 14px Regular, lh 1.5, ls 0 */
+        readonly xs: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Body 2XS — 12px Regular, lh 1.5, ls 0 */
+        readonly '2xs': {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Body 3XS — 10px Regular, lh 1.5, ls 0 */
+        readonly '3xs': {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+    };
+    readonly label: {
+        /** Label L — 20px Bold, lh 1.2, ls -3px */
+        readonly l: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+        /** Label M — 18px Bold, lh 1.2, ls -3px */
+        readonly m: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+        /** Label S — 16px Bold, lh 1.2, ls -3px */
+        readonly s: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+        /** Label XS — 14px Bold, lh 1.2, ls -3px */
+        readonly xs: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+        /** Label 2XS — 12px Bold, lh 1.2, ls -3px */
+        readonly '2xs': {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+        /** Label 3XS — 10px Bold, lh 1.2, ls -3px */
+        readonly '3xs': {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 700;
+            lineHeight: "1.2";
+            letterSpacing: "-3px";
+        };
+    };
+    readonly link: {
+        /** Link L — 20px Regular, lh 1.5, ls 0 */
+        readonly l: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Link M — 18px Regular, lh 1.5, ls 0 */
+        readonly m: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Link S — 16px Regular, lh 1.5, ls 0 */
+        readonly s: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Link XS — 14px Regular, lh 1.5, ls 0 */
+        readonly xs: {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Link 2XS — 12px Regular, lh 1.5, ls 0 */
+        readonly '2xs': {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+        /** Link 3XS — 10px Regular, lh 1.5, ls 0 */
+        readonly '3xs': {
+            fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "0px";
+        };
+    };
+    readonly utility: {
+        /** Utility L — 14px Mono, lh 1.5, ls 4px */
+        readonly l: {
+            fontFamily: "\"Apercu Mono\", \"Apercu\", ui-monospace, monospace";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "4px";
+        };
+        /** Utility M — 12px Mono, lh 1.5, ls 4px */
+        readonly m: {
+            fontFamily: "\"Apercu Mono\", \"Apercu\", ui-monospace, monospace";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "4px";
+        };
+        /** Utility S — 10px Mono, lh 1.5, ls 4px */
+        readonly s: {
+            fontFamily: "\"Apercu Mono\", \"Apercu\", ui-monospace, monospace";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "4px";
+        };
+        /** Utility XS — 8px Mono, lh 1.5, ls 4px */
+        readonly xs: {
+            fontFamily: "\"Apercu Mono\", \"Apercu\", ui-monospace, monospace";
+            fontSize: string;
+            fontWeight: 400;
+            lineHeight: "1.5";
+            letterSpacing: "4px";
+        };
+    };
+    /** Caption — 20px Medium, lh 1.2, ls -3px */
+    readonly caption: {
+        fontFamily: "\"Headspace Apercu\", \"Apercu\", system-ui, sans-serif";
+        fontSize: string;
+        fontWeight: 500;
+        lineHeight: "1.2";
+        letterSpacing: "-3px";
+    };
+};
+export type DesktopTypeScale = typeof desktopTypeScale;
+//# sourceMappingURL=typography.d.ts.map

package/dist/tokens/semantic/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/tokens/semantic/typography.ts"],"names":[],"mappings":"AAqBA,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB;AAID,eAAO,MAAM,gBAAgB;;QAEzB,+CAA+C;;;;;;;;QAQ/C,+CAA+C;;;;;;;;QAQ/C,8CAA8C;;;;;;;;QAQ9C,6CAA6C;;;;;;;;QAQ7C,6CAA6C;;;;;;;;QAQ7C,6CAA6C;;;;;;;;;;QAW7C,0CAA0C;;;;;;;;QAQ1C,0CAA0C;;;;;;;;QAQ1C,0CAA0C;;;;;;;;QAQ1C,2CAA2C;;;;;;;;QAQ3C,4CAA4C;;;;;;;;QAQ5C,4CAA4C;;;;;;;;;;QAW5C,2CAA2C;;;;;;;;QAQ3C,2CAA2C;;;;;;;;QAQ3C,2CAA2C;;;;;;;;QAQ3C,4CAA4C;;;;;;;;QAQ5C,6CAA6C;;;;;;;;QAQ7C,6CAA6C;;;;;;;;;;QAW7C,0CAA0C;;;;;;;;QAQ1C,0CAA0C;;;;;;;;QAQ1C,0CAA0C;;;;;;;;QAQ1C,2CAA2C;;;;;;;;QAQ3C,4CAA4C;;;;;;;;QAQ5C,4CAA4C;;;;;;;;;;QAW5C,4CAA4C;;;;;;;;QAQ5C,4CAA4C;;;;;;;;QAQ5C,4CAA4C;;;;;;;;QAQ5C,4CAA4C;;;;;;;;;IAU9C,6CAA6C;;;;;;;;CAQrC,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,OAAO,gBAAgB,CAAC"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@headspace_designsystem/hsds-web-library",
+  "version": "0.1.0",
+  "description": "HeadSpace Design System — web component library (React + TypeScript + Emotion)",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/hsds-web-library.umd.js",
+  "module": "./dist/hsds-web-library.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/hsds-web-library.es.js",
+      "require": "./dist/hsds-web-library.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.0.0",
+    "@emotion/styled": ">=11.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.12.0",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@types/node": "^25.3.3",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.2.0"
+  }
+}