@fluid-topics/ft-typography 2.0.38 → 2.1.0

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

@@ -1,90 +1,90 @@
 export declare const FtTypographyCssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyTitleCssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyTitleDenseCssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographySubtitle1CssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographySubtitle2CssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyBody1CssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyBody2CssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyCaptionCssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyBreadcrumbCssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyOverlineCssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyButtonCssVariables: {
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    letterSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textTransform: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtTypographyTitle: import("lit").CSSResult;
 export declare const FtTypographyTitleDense: import("lit").CSSResult;

package/build/index.d.ts

@@ -1,7 +1,4 @@
 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";
 import "./define";

package/build/index.js

@@ -1,7 +1,4 @@
 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";
 import "./define";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-typography",
-    "version": "2.0.38",
+    "version": "2.1.0",
     "description": "Typography components",
     "keywords": [
         "Lit"
@@ -19,9 +19,9 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/design-system-variables": "3.4.1",
-        "@fluid-topics/ft-wc-utils": "2.0.38",
+        "@fluid-topics/design-system-variables": "3.5.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
         "lit": "3.1.0"
     },
-    "gitHead": "8a5f1d6fb69ac18ec2e6d05dcf82e036d7423c35"
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
 }

package/build/ftds-typography.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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";
-export 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);

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

@@ -1,21 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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))];