@fluid-topics/ftds-typography 2.1.0

package/build/ftds-typography.properties.d.ts

@@ -0,0 +1,21 @@
+export declare enum FtdsTypographyVariants {
+    display = "display",
+    title1 = "title-1",
+    title2 = "title-2",
+    title3 = "title-3",
+    body1regular = "body-1-regular",
+    body1medium = "body-1-medium",
+    body1semibold = "body-1-semibold",
+    body2regular = "body-2-regular",
+    body2medium = "body-2-medium",
+    body2semibold = "body-2-semibold",
+    caption1medium = "caption-1-medium",
+    caption1semibold = "caption-1-semibold",
+    caption2medium = "caption-2-medium",
+    caption2semibold = "caption-2-semibold",
+    caption2bold = "caption-2-bold"
+}
+export interface FtdsTypographyProperties {
+    element?: string;
+    variant: FtdsTypographyVariants;
+}

package/build/ftds-typography.properties.js

@@ -0,0 +1,18 @@
+export var FtdsTypographyVariants;
+(function (FtdsTypographyVariants) {
+    FtdsTypographyVariants["display"] = "display";
+    FtdsTypographyVariants["title1"] = "title-1";
+    FtdsTypographyVariants["title2"] = "title-2";
+    FtdsTypographyVariants["title3"] = "title-3";
+    FtdsTypographyVariants["body1regular"] = "body-1-regular";
+    FtdsTypographyVariants["body1medium"] = "body-1-medium";
+    FtdsTypographyVariants["body1semibold"] = "body-1-semibold";
+    FtdsTypographyVariants["body2regular"] = "body-2-regular";
+    FtdsTypographyVariants["body2medium"] = "body-2-medium";
+    FtdsTypographyVariants["body2semibold"] = "body-2-semibold";
+    FtdsTypographyVariants["caption1medium"] = "caption-1-medium";
+    FtdsTypographyVariants["caption1semibold"] = "caption-1-semibold";
+    FtdsTypographyVariants["caption2medium"] = "caption-2-medium";
+    FtdsTypographyVariants["caption2semibold"] = "caption-2-semibold";
+    FtdsTypographyVariants["caption2bold"] = "caption-2-bold";
+})(FtdsTypographyVariants || (FtdsTypographyVariants = {}));

package/build/ftds-typography.styles.d.ts

@@ -0,0 +1,19 @@
+import { typographies } from "@fluid-topics/design-system-variables";
+import { CSSResult } from "lit";
+export { typographyDisplay as FtdsTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyTitle1 as FtdsTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
+export { typographyTitle2 as FtdsTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
+export { typographyTitle3 as FtdsTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody1Regular as FtdsTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody1Medium as FtdsTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody1Semibold as FtdsTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody2Regular as FtdsTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody2Medium as FtdsTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody2Semibold as FtdsTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption1Medium as FtdsTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption1Semibold as FtdsTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption2Medium as FtdsTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption2Semibold as FtdsTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption2Bold as FtdsTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
+export declare function buildDsTypographyCss(variant: keyof typeof typographies, selector?: string | CSSResult): CSSResult;
+export declare const FtdsTypographyStyles: CSSResult[][];

package/build/ftds-typography.styles.js

@@ -0,0 +1,32 @@
+import { typographies } from "@fluid-topics/design-system-variables";
+import { css, unsafeCSS, } from "lit";
+export { typographyDisplay as FtdsTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyTitle1 as FtdsTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
+export { typographyTitle2 as FtdsTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
+export { typographyTitle3 as FtdsTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody1Regular as FtdsTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody1Medium as FtdsTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody1Semibold as FtdsTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody2Regular as FtdsTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody2Medium as FtdsTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyBody2Semibold as FtdsTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption1Medium as FtdsTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption1Semibold as FtdsTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption2Medium as FtdsTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption2Semibold as FtdsTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption2Bold as FtdsTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
+export function buildDsTypographyCss(variant, selector) {
+    const typographyVariables = typographies[variant];
+    return css `
+        ${selector ? unsafeCSS(selector) : css `.ftds-typography--${unsafeCSS(variant)}`} {
+            font-family: ${typographyVariables.fontFamily};
+            font-size: ${typographyVariables.fontSize};
+            font-weight: ${typographyVariables.fontWeight};
+            letter-spacing: ${typographyVariables.letterSpacing};
+            line-height: ${typographyVariables.lineHeight};
+            text-decoration: ${typographyVariables.textDecoration};
+            text-transform: ${typographyVariables.textCase};
+        }
+    `;
+}
+export const FtdsTypographyStyles = [Object.keys(typographies).map((v) => buildDsTypographyCss(v))];

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ftds-typography.styles";
+export * from "./ftds-typography.properties";
+export * from "./ftds-typography";
+import "./define";

package/build/index.js

@@ -0,0 +1,4 @@
+export * from "./ftds-typography.styles";
+export * from "./ftds-typography.properties";
+export * from "./ftds-typography";
+import "./define";

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@fluid-topics/ftds-typography",
+    "version": "2.1.0",
+    "description": "The design system typography component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-typography.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}