@fluid-topics/ft-typography 1.3.45 → 1.3.46

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

@@ -9,27 +9,93 @@ export declare enum FtTypographyVariants {
     breadcrumb = "breadcrumb",
     overline = "overline",
     button = "button",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     display = "display",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     title1 = "title-1",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     title2 = "title-2",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     title3 = "title-3",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     body1regular = "body-1-regular",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     body1medium = "body-1-medium",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     body1semibold = "body-1-semibold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     body2regular = "body-2-regular",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     body2medium = "body-2-medium",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     body2semibold = "body-2-semibold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     label1medium = "label-1-medium",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     label1semibold = "label-1-semibold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     label1bold = "label-1-bold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     label2medium = "label-2-medium",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     label2semibold = "label-2-semibold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     label2bold = "label-2-bold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     caption1medium = "caption-1-medium",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     caption1semibold = "caption-1-semibold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     caption1bold = "caption-1-bold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     caption2medium = "caption-2-medium",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     caption2semibold = "caption-2-semibold",
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     caption2bold = "caption-2-bold"
 }
 export interface FtTypographyProperties {

package/build/ft-typography.properties.js

@@ -11,26 +11,92 @@ export var FtTypographyVariants;
     FtTypographyVariants["overline"] = "overline";
     FtTypographyVariants["button"] = "button";
     // New design system
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["display"] = "display";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["title1"] = "title-1";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["title2"] = "title-2";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["title3"] = "title-3";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["body1regular"] = "body-1-regular";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["body1medium"] = "body-1-medium";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["body1semibold"] = "body-1-semibold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["body2regular"] = "body-2-regular";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["body2medium"] = "body-2-medium";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["body2semibold"] = "body-2-semibold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["label1medium"] = "label-1-medium";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["label1semibold"] = "label-1-semibold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["label1bold"] = "label-1-bold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["label2medium"] = "label-2-medium";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["label2semibold"] = "label-2-semibold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["label2bold"] = "label-2-bold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["caption1medium"] = "caption-1-medium";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["caption1semibold"] = "caption-1-semibold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["caption1bold"] = "caption-1-bold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["caption2medium"] = "caption-2-medium";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["caption2semibold"] = "caption-2-semibold";
+    /**
+     * @deprecated use <ftds-typography> instead
+     */
     FtTypographyVariants["caption2bold"] = "caption-2-bold";
 })(FtTypographyVariants || (FtTypographyVariants = {}));

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

@@ -97,29 +97,29 @@ export declare const FtTypographyBreadcrumb: import("lit").CSSResult;
 export declare const FtTypographyOverline: import("lit").CSSResult;
 export declare const FtTypographyButton: import("lit").CSSResult;
 export declare const FtTypographyStyles: import("lit").CSSResult;
-export { typographyDisplay as FtTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyTitle1 as FtTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
-export { typographyTitle2 as FtTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
-export { typographyTitle3 as FtTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody1Regular as FtTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody1Medium as FtTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody1Semibold as FtTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody2Regular as FtTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody2Medium as FtTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody2Semibold as FtTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel1Medium as FtTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel1Semibold as FtTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel1Bold as FtTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel2Medium as FtTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel2Semibold as FtTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel2Bold as FtTypographyLabel2BoldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption1Medium as FtTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption1Semibold as FtTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption1Bold as FtTypographyCaption1BoldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption2Medium as FtTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption2Semibold as FtTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption2Bold as FtTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption3Medium as FtTypographyCaption3MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption3Semibold as FtTypographyCaption3SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption3Bold as FtTypographyCaption3BoldCssVariables } from "@fluid-topics/design-system-variables";
-export declare const FtdsTypographyStyles: import("lit").CSSResult[][];
+export { /** @deprecated use <ftds-typography> instead */ typographyDisplay as FtTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyTitle1 as FtTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyTitle2 as FtTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyTitle3 as FtTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody1Regular as FtTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody1Medium as FtTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody1Semibold as FtTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody2Regular as FtTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody2Medium as FtTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody2Semibold as FtTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel1Medium as FtTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel1Semibold as FtTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel1Bold as FtTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel2Medium as FtTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel2Semibold as FtTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel2Bold as FtTypographyLabel2BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption1Medium as FtTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption1Semibold as FtTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption1Bold as FtTypographyCaption1BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption2Medium as FtTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption2Semibold as FtTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption2Bold as FtTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption3Medium as FtTypographyCaption3MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption3Semibold as FtTypographyCaption3SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption3Bold as FtTypographyCaption3BoldCssVariables } from "@fluid-topics/design-system-variables";
+export declare const FtLegacyDsTypographyStyles: import("lit").CSSResult[][];

package/build/ft-typography.styles.js

@@ -1,6 +1,6 @@
 import { css } from "lit";
-import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
-import { typographies, } from "@fluid-topics/design-system-variables";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { typographies } from "@fluid-topics/design-system-variables";
 import { buildDsTypographyCss } from "./ft-typography.css.helper";
 const titleFontFamily = FtCssVariableFactory.extend("--ft-typography-font-family", "", designSystemVariables.titleFont);
 const contentFontFamily = FtCssVariableFactory.extend("--ft-typography-font-family", "", designSystemVariables.contentFont);
@@ -209,29 +209,29 @@ export const FtTypographyStyles = css `
         vertical-align: inherit;
     }
 `;
-export { typographyDisplay as FtTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyTitle1 as FtTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
-export { typographyTitle2 as FtTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
-export { typographyTitle3 as FtTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody1Regular as FtTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody1Medium as FtTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody1Semibold as FtTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody2Regular as FtTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody2Medium as FtTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyBody2Semibold as FtTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel1Medium as FtTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel1Semibold as FtTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel1Bold as FtTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel2Medium as FtTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel2Semibold as FtTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyLabel2Bold as FtTypographyLabel2BoldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption1Medium as FtTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption1Semibold as FtTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption1Bold as FtTypographyCaption1BoldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption2Medium as FtTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption2Semibold as FtTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption2Bold as FtTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption3Medium as FtTypographyCaption3MediumCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption3Semibold as FtTypographyCaption3SemiboldCssVariables } from "@fluid-topics/design-system-variables";
-export { typographyCaption3Bold as FtTypographyCaption3BoldCssVariables } from "@fluid-topics/design-system-variables";
-export const FtdsTypographyStyles = [Object.keys(typographies).map(v => buildDsTypographyCss(v))];
+export { /** @deprecated use <ftds-typography> instead */ typographyDisplay as FtTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyTitle1 as FtTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyTitle2 as FtTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyTitle3 as FtTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody1Regular as FtTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody1Medium as FtTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody1Semibold as FtTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody2Regular as FtTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody2Medium as FtTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyBody2Semibold as FtTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel1Medium as FtTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel1Semibold as FtTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel1Bold as FtTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel2Medium as FtTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel2Semibold as FtTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyLabel2Bold as FtTypographyLabel2BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption1Medium as FtTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption1Semibold as FtTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption1Bold as FtTypographyCaption1BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption2Medium as FtTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption2Semibold as FtTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption2Bold as FtTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption3Medium as FtTypographyCaption3MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption3Semibold as FtTypographyCaption3SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { /** @deprecated use <ftds-typography> instead */ typographyCaption3Bold as FtTypographyCaption3BoldCssVariables } from "@fluid-topics/design-system-variables";
+export const FtLegacyDsTypographyStyles = [Object.keys(typographies).map((v) => buildDsTypographyCss(v))];

package/build/ftds-typography.d.ts

@@ -0,0 +1,8 @@
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypographyProperties, FtdsTypographyVariants } from "./ftds-typography.properties";
+export declare class FtdsTypography extends FtLitElement implements FtdsTypographyProperties {
+    static styles: import("lit").CSSResult[][];
+    element?: string;
+    variant: FtdsTypographyVariants;
+    protected render(): import("lit-html").TemplateResult;
+}

package/build/ftds-typography.js

@@ -0,0 +1,41 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, unsafeStatic } from "lit/static-html.js";
+import { property } from "lit/decorators.js";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypographyVariants } from "./ftds-typography.properties";
+import { FtdsTypographyStyles } from "./ftds-typography.styles";
+class FtdsTypography extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = FtdsTypographyVariants.body2medium;
+    }
+    render() {
+        if (this.element) {
+            return html `
+                <${unsafeStatic(this.element)}
+                    part="text"
+                    class="ftds-typography ftds-typography--${this.variant}">
+                    <slot></slot>
+                </${unsafeStatic(this.element)}>
+            `;
+        }
+        return html `
+            <slot part="text" class="ftds-typography ftds-typography--${this.variant}"></slot>
+        `;
+    }
+}
+FtdsTypography.styles = [
+    ...FtdsTypographyStyles,
+];
+__decorate([
+    property()
+], FtdsTypography.prototype, "element", void 0);
+__decorate([
+    property()
+], FtdsTypography.prototype, "variant", void 0);
+export { FtdsTypography };

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

@@ -0,0 +1,28 @@
+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",
+    label1medium = "label-1-medium",
+    label1semibold = "label-1-semibold",
+    label1bold = "label-1-bold",
+    label2medium = "label-2-medium",
+    label2semibold = "label-2-semibold",
+    label2bold = "label-2-bold",
+    caption1medium = "caption-1-medium",
+    caption1semibold = "caption-1-semibold",
+    caption1bold = "caption-1-bold",
+    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,25 @@
+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["label1medium"] = "label-1-medium";
+    FtdsTypographyVariants["label1semibold"] = "label-1-semibold";
+    FtdsTypographyVariants["label1bold"] = "label-1-bold";
+    FtdsTypographyVariants["label2medium"] = "label-2-medium";
+    FtdsTypographyVariants["label2semibold"] = "label-2-semibold";
+    FtdsTypographyVariants["label2bold"] = "label-2-bold";
+    FtdsTypographyVariants["caption1medium"] = "caption-1-medium";
+    FtdsTypographyVariants["caption1semibold"] = "caption-1-semibold";
+    FtdsTypographyVariants["caption1bold"] = "caption-1-bold";
+    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,29 @@
+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 { typographyLabel1Medium as FtdsTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel1Semibold as FtdsTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel1Bold as FtdsTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel2Medium as FtdsTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel2Semibold as FtdsTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel2Bold as FtdsTypographyLabel2BoldCssVariables } 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 { typographyCaption1Bold as FtdsTypographyCaption1BoldCssVariables } 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 { typographyCaption3Medium as FtdsTypographyCaption3MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption3Semibold as FtdsTypographyCaption3SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption3Bold as FtdsTypographyCaption3BoldCssVariables } 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,42 @@
+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 { typographyLabel1Medium as FtdsTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel1Semibold as FtdsTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel1Bold as FtdsTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel2Medium as FtdsTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel2Semibold as FtdsTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyLabel2Bold as FtdsTypographyLabel2BoldCssVariables } 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 { typographyCaption1Bold as FtdsTypographyCaption1BoldCssVariables } 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 { typographyCaption3Medium as FtdsTypographyCaption3MediumCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption3Semibold as FtdsTypographyCaption3SemiboldCssVariables } from "@fluid-topics/design-system-variables";
+export { typographyCaption3Bold as FtdsTypographyCaption3BoldCssVariables } 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

@@ -1,3 +1,6 @@
 export * from "./ft-typography";
 export * from "./ft-typography.styles";
 export * from "./ft-typography.properties";
+export * from "./ftds-typography";
+export * from "./ftds-typography.styles";
+export * from "./ftds-typography.properties";

package/build/index.js

@@ -1,6 +1,11 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtTypography } from "./ft-typography";
+import { FtdsTypography } from "./ftds-typography";
 export * from "./ft-typography";
 export * from "./ft-typography.styles";
 export * from "./ft-typography.properties";
+export * from "./ftds-typography";
+export * from "./ftds-typography.styles";
+export * from "./ftds-typography.properties";
 customElement("ft-typography")(FtTypography);
+customElement("ftds-typography")(FtdsTypography);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-typography",
-  "version": "1.3.45",
+  "version": "1.3.46",
   "description": "Typography components",
   "keywords": [
     "Lit"
@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@fluid-topics/design-system-variables": "2.53.1",
-    "@fluid-topics/ft-wc-utils": "1.3.45",
+    "@fluid-topics/ft-wc-utils": "1.3.46",
     "lit": "3.1.0"
   },
-  "gitHead": "3fd3d1375535575f012653afcbcb81dc3c25b7c7"
+  "gitHead": "d6cf25d6ed0dead8c7aff4f94a493c35d12f1392"
 }