@fluid-topics/design-system-variables - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

build/FtCssVariables.d.ts

 import { CSSResult } from "lit";
-export type FtCssVariableCategory = "COLOR" | "NUMBER" | "SIZE" | "POSITION" | "DISPLAY" | "UNKNOWN" | "BORDER-STYLE";
+export type FtCssVariableCategory = "COLOR" | "NUMBER" | "SIZE" | "POSITION" | "DISPLAY" | "BORDER-STYLE" | "SHADOW" | "UNKNOWN";
 export declare class FtCssVariableFactory {
@@ -4,0 +4,0 @@ static create(name: string, description: string, category: FtCssVariableCategory, defaultValue: string | CSSResult): FtCssVariable;

build/generated/ts/components/chip.js

@@ -34,12 +34,12 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     infoColor: FtCssVariableFactory.extend("--ft-chip-info-color", "", semantic.contentInfoPrimary),
-    infoBorderColor: FtCssVariableFactory.extend("--ft-chip-info-border-color", "", semantic.borderInfoPrimary),
+    infoBorderColor: FtCssVariableFactory.extend("--ft-chip-info-border-color", "", semantic.borderInfoSubtle),
     successBackgroundColor: FtCssVariableFactory.extend("--ft-chip-success-background-color", "", semantic.backgroundSuccessSubtle),
     successColor: FtCssVariableFactory.extend("--ft-chip-success-color", "", semantic.contentSuccessPrimary),
-    successBorderColor: FtCssVariableFactory.extend("--ft-chip-success-border-color", "", semantic.borderSuccessPrimary),
+    successBorderColor: FtCssVariableFactory.extend("--ft-chip-success-border-color", "", semantic.borderSuccessSubtle),
     warningBackgroundColor: FtCssVariableFactory.extend("--ft-chip-warning-background-color", "", semantic.backgroundWarningSubtle),
     warningColor: FtCssVariableFactory.extend("--ft-chip-warning-color", "", semantic.contentWarningPrimary),
-    warningBorderColor: FtCssVariableFactory.extend("--ft-chip-warning-border-color", "", semantic.borderWarningPrimary),
+    warningBorderColor: FtCssVariableFactory.extend("--ft-chip-warning-border-color", "", semantic.borderWarningSubtle),
     errorBackgroundColor: FtCssVariableFactory.extend("--ft-chip-error-background-color", "", semantic.backgroundErrorSubtle),
     errorColor: FtCssVariableFactory.extend("--ft-chip-error-color", "", semantic.contentErrorPrimary),
-    errorBorderColor: FtCssVariableFactory.extend("--ft-chip-error-border-color", "", semantic.borderErrorPrimary)
+    errorBorderColor: FtCssVariableFactory.extend("--ft-chip-error-border-color", "", semantic.borderErrorSubtle)
 };

build/generated/ts/components/notice.js

@@ -12,7 +12,7 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     infoBackgroundColor: FtCssVariableFactory.extend("--ft-notice-info-background-color", "", semantic.backgroundInfoSubtle),
-    infoBorderColor: FtCssVariableFactory.extend("--ft-notice-info-border-color", "", semantic.borderInfoPrimary),
+    infoBorderColor: FtCssVariableFactory.extend("--ft-notice-info-border-color", "", semantic.borderInfoSubtle),
     infoColor: FtCssVariableFactory.extend("--ft-notice-info-color", "", semantic.contentInfoPrimary),
     warningBackgroundColor: FtCssVariableFactory.extend("--ft-notice-warning-background-color", "", semantic.backgroundWarningSubtle),
-    warningBorderColor: FtCssVariableFactory.extend("--ft-notice-warning-border-color", "", semantic.borderWarningPrimary),
+    warningBorderColor: FtCssVariableFactory.extend("--ft-notice-warning-border-color", "", semantic.borderWarningSubtle),
     warningColor: FtCssVariableFactory.extend("--ft-notice-warning-color", "", semantic.contentWarningPrimary)
 };

build/generated/ts/components/notification.js

@@ -10,12 +10,12 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     infoColor: FtCssVariableFactory.extend("--ft-notification-info-color", "", semantic.contentInfoPrimary),
-    infoBorderColor: FtCssVariableFactory.extend("--ft-notification-info-border-color", "", semantic.borderInfoPrimary),
+    infoBorderColor: FtCssVariableFactory.extend("--ft-notification-info-border-color", "", semantic.borderInfoSubtle),
     successBackgroundColor: FtCssVariableFactory.extend("--ft-notification-success-background-color", "", semantic.backgroundSuccessSubtle),
     successColor: FtCssVariableFactory.extend("--ft-notification-success-color", "", semantic.contentSuccessPrimary),
-    successBorderColor: FtCssVariableFactory.extend("--ft-notification-success-border-color", "", semantic.borderSuccessPrimary),
+    successBorderColor: FtCssVariableFactory.extend("--ft-notification-success-border-color", "", semantic.borderSuccessSubtle),
     warningBackgroundColor: FtCssVariableFactory.extend("--ft-notification-warning-background-color", "", semantic.backgroundWarningSubtle),
     warningColor: FtCssVariableFactory.extend("--ft-notification-warning-color", "", semantic.contentWarningPrimary),
-    warningBorderColor: FtCssVariableFactory.extend("--ft-notification-warning-border-color", "", semantic.borderWarningPrimary),
+    warningBorderColor: FtCssVariableFactory.extend("--ft-notification-warning-border-color", "", semantic.borderWarningSubtle),
     errorBackgroundColor: FtCssVariableFactory.extend("--ft-notification-error-background-color", "", semantic.backgroundErrorSubtle),
     errorColor: FtCssVariableFactory.extend("--ft-notification-error-color", "", semantic.contentErrorPrimary),
-    errorBorderColor: FtCssVariableFactory.extend("--ft-notification-error-border-color", "", semantic.borderErrorPrimary),
+    errorBorderColor: FtCssVariableFactory.extend("--ft-notification-error-border-color", "", semantic.borderErrorSubtle),
     borderRadius: FtCssVariableFactory.extend("--ft-notification-border-radius", "", foundation.borderRadiusPill),
@@ -22,0 +22,0 @@ borderWidth: FtCssVariableFactory.create("--ft-notification-border-width", "", "SIZE", "1px"),

build/generated/ts/components/switch.d.ts

@@ -21,2 +21,8 @@ export declare const switch_: {
     offStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
+    onComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    onColor: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/switch.js

@@ -23,3 +23,9 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     offColor: FtCssVariableFactory.extend("--ft-switch-off-color", "", semantic.contentGlobalSubtle),
-    offStateLayerColor: FtCssVariableFactory.extend("--ft-switch-off-state-layer-color", "", semantic.contentGlobalSubtle)
+    offStateLayerColor: FtCssVariableFactory.extend("--ft-switch-off-state-layer-color", "", semantic.contentGlobalSubtle),
+    onStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-switch-on-state-layer-opacity-hover", "", foundation.opacity8),
+    onStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-switch-on-state-layer-opacity-focus", "", foundation.opacity8),
+    onStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-switch-on-state-layer-opacity-active", "", foundation.opacity16),
+    onComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-switch-on-component-opacity-disabled", "", foundation.opacity40),
+    onColor: FtCssVariableFactory.extend("--ft-switch-on-color", "", semantic.contentActionPrimary),
+    onStateLayerColor: FtCssVariableFactory.extend("--ft-switch-on-state-layer-color", "", semantic.contentActionPrimary)
 };

build/generated/ts/components/tabs.d.ts

@@ -7,2 +7,18 @@ export declare const tabs: {
     labelGap: import("../../../FtCssVariables").FtCssVariable;
+    iconHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
+    iconVerticalPadding: import("../../../FtCssVariables").FtCssVariable;
+    focusOutlineWidth: import("../../../FtCssVariables").FtCssVariable;
+    focusFocusRingColor: import("../../../FtCssVariables").FtCssVariable;
+    offStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
+    offStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
+    offStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
+    offComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    offColor: import("../../../FtCssVariables").FtCssVariable;
+    offStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
+    onComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    onColor: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/tabs.js

 import { FtCssVariableFactory } from "../../../FtCssVariables";
 import { foundation } from "../foundation";
+import { semantic } from "../semantic";
 export const tabs = {
@@ -8,3 +9,19 @@ topLeftBorderRadius: FtCssVariableFactory.extend("--ft-tabs-top-left-border-radius", "", foundation.borderRadiusS),
     labelVerticalPadding: FtCssVariableFactory.extend("--ft-tabs-label-vertical-padding", "", foundation.spacing3),
-    labelGap: FtCssVariableFactory.extend("--ft-tabs-label-gap", "", foundation.spacing1)
+    labelGap: FtCssVariableFactory.extend("--ft-tabs-label-gap", "", foundation.spacing1),
+    iconHorizontalPadding: FtCssVariableFactory.extend("--ft-tabs-icon-horizontal-padding", "", foundation.spacing1),
+    iconVerticalPadding: FtCssVariableFactory.extend("--ft-tabs-icon-vertical-padding", "", foundation.spacing4),
+    focusOutlineWidth: FtCssVariableFactory.create("--ft-tabs-focus-outline-width", "", "SIZE", "2px"),
+    focusFocusRingColor: FtCssVariableFactory.extend("--ft-tabs-focus-focus-ring-color", "", semantic.borderActionFocusRing),
+    offStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-opacity-hover", "", foundation.opacity8),
+    offStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-opacity-focus", "", foundation.opacity8),
+    offStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-opacity-active", "", foundation.opacity16),
+    offComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-tabs-off-component-opacity-disabled", "", foundation.opacity40),
+    offColor: FtCssVariableFactory.extend("--ft-tabs-off-color", "", semantic.contentGlobalSubtle),
+    offStateLayerColor: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-color", "", semantic.contentGlobalSubtle),
+    onStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-opacity-hover", "", foundation.opacity8),
+    onStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-opacity-focus", "", foundation.opacity8),
+    onStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-opacity-active", "", foundation.opacity16),
+    onComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-tabs-on-component-opacity-disabled", "", foundation.opacity40),
+    onColor: FtCssVariableFactory.extend("--ft-tabs-on-color", "", semantic.contentActionPrimary),
+    onStateLayerColor: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-color", "", semantic.contentActionPrimary)
 };

build/generated/ts/foundation.d.ts

@@ -188,2 +188,11 @@ export declare const foundation: {
     opacity80: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation01: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation02: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation03: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation04: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation06: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation08: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation12: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation16: import("../../FtCssVariables").FtCssVariable;
+    shadowElevation24: import("../../FtCssVariables").FtCssVariable;
 };
@@ -432,2 +441,35 @@ export declare const typographyDisplay: {
 };
+export declare const typographyCaption3Medium: {
+    fontFamily: import("../../FtCssVariables").FtCssVariable;
+    fontWeight: import("../../FtCssVariables").FtCssVariable;
+    lineHeight: import("../../FtCssVariables").FtCssVariable;
+    fontSize: import("../../FtCssVariables").FtCssVariable;
+    letterSpacing: import("../../FtCssVariables").FtCssVariable;
+    textCase: import("../../FtCssVariables").FtCssVariable;
+    paragraphSpacing: import("../../FtCssVariables").FtCssVariable;
+    paragraphIndent: import("../../FtCssVariables").FtCssVariable;
+    textDecoration: import("../../FtCssVariables").FtCssVariable;
+};
+export declare const typographyCaption3Semibold: {
+    fontFamily: import("../../FtCssVariables").FtCssVariable;
+    fontWeight: import("../../FtCssVariables").FtCssVariable;
+    lineHeight: import("../../FtCssVariables").FtCssVariable;
+    fontSize: import("../../FtCssVariables").FtCssVariable;
+    letterSpacing: import("../../FtCssVariables").FtCssVariable;
+    textCase: import("../../FtCssVariables").FtCssVariable;
+    paragraphSpacing: import("../../FtCssVariables").FtCssVariable;
+    paragraphIndent: import("../../FtCssVariables").FtCssVariable;
+    textDecoration: import("../../FtCssVariables").FtCssVariable;
+};
+export declare const typographyCaption3Bold: {
+    fontFamily: import("../../FtCssVariables").FtCssVariable;
+    fontWeight: import("../../FtCssVariables").FtCssVariable;
+    lineHeight: import("../../FtCssVariables").FtCssVariable;
+    fontSize: import("../../FtCssVariables").FtCssVariable;
+    letterSpacing: import("../../FtCssVariables").FtCssVariable;
+    textCase: import("../../FtCssVariables").FtCssVariable;
+    paragraphSpacing: import("../../FtCssVariables").FtCssVariable;
+    paragraphIndent: import("../../FtCssVariables").FtCssVariable;
+    textDecoration: import("../../FtCssVariables").FtCssVariable;
+};
 export declare const typographies: {
@@ -676,4 +718,37 @@ display: {
     };
+    "caption-3-medium": {
+        fontFamily: import("../../FtCssVariables").FtCssVariable;
+        fontWeight: import("../../FtCssVariables").FtCssVariable;
+        lineHeight: import("../../FtCssVariables").FtCssVariable;
+        fontSize: import("../../FtCssVariables").FtCssVariable;
+        letterSpacing: import("../../FtCssVariables").FtCssVariable;
+        textCase: import("../../FtCssVariables").FtCssVariable;
+        paragraphSpacing: import("../../FtCssVariables").FtCssVariable;
+        paragraphIndent: import("../../FtCssVariables").FtCssVariable;
+        textDecoration: import("../../FtCssVariables").FtCssVariable;
+    };
+    "caption-3-semibold": {
+        fontFamily: import("../../FtCssVariables").FtCssVariable;
+        fontWeight: import("../../FtCssVariables").FtCssVariable;
+        lineHeight: import("../../FtCssVariables").FtCssVariable;
+        fontSize: import("../../FtCssVariables").FtCssVariable;
+        letterSpacing: import("../../FtCssVariables").FtCssVariable;
+        textCase: import("../../FtCssVariables").FtCssVariable;
+        paragraphSpacing: import("../../FtCssVariables").FtCssVariable;
+        paragraphIndent: import("../../FtCssVariables").FtCssVariable;
+        textDecoration: import("../../FtCssVariables").FtCssVariable;
+    };
+    "caption-3-bold": {
+        fontFamily: import("../../FtCssVariables").FtCssVariable;
+        fontWeight: import("../../FtCssVariables").FtCssVariable;
+        lineHeight: import("../../FtCssVariables").FtCssVariable;
+        fontSize: import("../../FtCssVariables").FtCssVariable;
+        letterSpacing: import("../../FtCssVariables").FtCssVariable;
+        textCase: import("../../FtCssVariables").FtCssVariable;
+        paragraphSpacing: import("../../FtCssVariables").FtCssVariable;
+        paragraphIndent: import("../../FtCssVariables").FtCssVariable;
+        textDecoration: import("../../FtCssVariables").FtCssVariable;
+    };
 };
 export declare const typographyVariants: string[];
-export type TypographyVariants = "display" | "title-1" | "title-2" | "title-3" | "body-1" | "body-2" | "label-1" | "label-2" | "caption-1" | "caption-2";
+export type TypographyVariants = "display" | "title-1" | "title-2" | "title-3" | "body-1" | "body-2" | "label-1" | "label-2" | "caption-1" | "caption-2" | "caption-3";

build/generated/ts/foundation.js

@@ -188,3 +188,12 @@ import { FtCssVariableFactory } from "../../FtCssVariables";
     opacity40: FtCssVariableFactory.create("--ft-opacity-40", "", "NUMBER", "0.4"),
-    opacity80: FtCssVariableFactory.create("--ft-opacity-80", "", "NUMBER", "0.8")
+    opacity80: FtCssVariableFactory.create("--ft-opacity-80", "", "NUMBER", "0.8"),
+    shadowElevation01: FtCssVariableFactory.create("--ft-shadow-elevation-01", "", "SHADOW", "0px 1px 4px 0px rgba(0,0,0,0.06), 0px 1px 2px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.06)"),
+    shadowElevation02: FtCssVariableFactory.create("--ft-shadow-elevation-02", "", "SHADOW", "0px 4px 10px 0px rgba(0,0,0,0.06), 0px 2px 5px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.06)"),
+    shadowElevation03: FtCssVariableFactory.create("--ft-shadow-elevation-03", "", "SHADOW", "0px 6px 13px 0px rgba(0,0,0,0.06), 0px 3px 7px 0px rgba(0,0,0,0.14), 0px 1px 2px 0px rgba(0,0,0,0.06)"),
+    shadowElevation04: FtCssVariableFactory.create("--ft-shadow-elevation-04", "", "SHADOW", "0px 8px 16px 0px rgba(0,0,0,0.06), 0px 4px 9px 0px rgba(0,0,0,0.14), 0px 2px 3px 0px rgba(0,0,0,0.06)"),
+    shadowElevation06: FtCssVariableFactory.create("--ft-shadow-elevation-06", "", "SHADOW", "0px 12px 22px 0px rgba(0,0,0,0.06), 0px 6px 13px 0px rgba(0,0,0,0.14), 0px 4px 5px 0px rgba(0,0,0,0.06)"),
+    shadowElevation08: FtCssVariableFactory.create("--ft-shadow-elevation-08", "", "SHADOW", "0px 16px 28px 0px rgba(0,0,0,0.06), 0px 8px 17px 0px rgba(0,0,0,0.14), 0px 6px 7px 0px rgba(0,0,0,0.06)"),
+    shadowElevation12: FtCssVariableFactory.create("--ft-shadow-elevation-12", "", "SHADOW", "0px 22px 40px 0px rgba(0,0,0,0.06), 0px 12px 23px 0px rgba(0,0,0,0.14), 0px 10px 11px 0px rgba(0,0,0,0.06)"),
+    shadowElevation16: FtCssVariableFactory.create("--ft-shadow-elevation-16", "", "SHADOW", "0px 28px 52px 0px rgba(0,0,0,0.06), 0px 16px 29px 0px rgba(0,0,0,0.14), 0px 14px 15px 0px rgba(0,0,0,0.06)"),
+    shadowElevation24: FtCssVariableFactory.create("--ft-shadow-elevation-24", "", "SHADOW", "0px 40px 76px 0px rgba(0,0,0,0.06), 0px 24px 41px 0px rgba(0,0,0,0.14), 0px 22px 23px 0px rgba(0,0,0,0.06)")
 };
@@ -215,3 +224,3 @@ export const typographyDisplay = {
     fontFamily: FtCssVariableFactory.create("--ft-typography-title-2-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-title-2-fontWeight", "", "UNKNOWN", "600"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-title-2-fontWeight", "", "UNKNOWN", "500"),
     lineHeight: FtCssVariableFactory.create("--ft-typography-title-2-lineHeight", "", "SIZE", "120%"),
@@ -227,3 +236,3 @@ fontSize: FtCssVariableFactory.create("--ft-typography-title-2-fontSize", "", "SIZE", "1.25rem"),
     fontFamily: FtCssVariableFactory.create("--ft-typography-title-3-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-title-3-fontWeight", "", "UNKNOWN", "600"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-title-3-fontWeight", "", "UNKNOWN", "500"),
     lineHeight: FtCssVariableFactory.create("--ft-typography-title-3-lineHeight", "", "SIZE", "120%"),
@@ -435,2 +444,35 @@ fontSize: FtCssVariableFactory.create("--ft-typography-title-3-fontSize", "", "SIZE", "1.125rem"),
 };
+export const typographyCaption3Medium = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-3-medium-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-3-medium-fontWeight", "", "UNKNOWN", "500"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-3-medium-lineHeight", "", "SIZE", "130%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-caption-3-medium-fontSize", "", "SIZE", "0.625rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-3-medium-letterSpacing", "", "SIZE", "normal"),
+    textCase: FtCssVariableFactory.create("--ft-typography-caption-3-medium-textCase", "", "UNKNOWN", "none"),
+    paragraphSpacing: FtCssVariableFactory.create("--ft-typography-caption-3-medium-paragraphSpacing", "", "UNKNOWN", "normal"),
+    paragraphIndent: FtCssVariableFactory.create("--ft-typography-caption-3-medium-paragraphIndent", "", "UNKNOWN", "0"),
+    textDecoration: FtCssVariableFactory.create("--ft-typography-caption-3-medium-textDecoration", "", "UNKNOWN", "none")
+};
+export const typographyCaption3Semibold = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-fontWeight", "", "UNKNOWN", "600"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-lineHeight", "", "SIZE", "130%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-fontSize", "", "SIZE", "0.625rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-letterSpacing", "", "SIZE", "normal"),
+    textCase: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-textCase", "", "UNKNOWN", "none"),
+    paragraphSpacing: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-paragraphSpacing", "", "UNKNOWN", "normal"),
+    paragraphIndent: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-paragraphIndent", "", "UNKNOWN", "0"),
+    textDecoration: FtCssVariableFactory.create("--ft-typography-caption-3-semibold-textDecoration", "", "UNKNOWN", "none")
+};
+export const typographyCaption3Bold = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-3-bold-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-3-bold-fontWeight", "", "UNKNOWN", "700"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-3-bold-lineHeight", "", "SIZE", "130%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-caption-3-bold-fontSize", "", "SIZE", "0.625rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-3-bold-letterSpacing", "", "SIZE", "normal"),
+    textCase: FtCssVariableFactory.create("--ft-typography-caption-3-bold-textCase", "", "UNKNOWN", "none"),
+    paragraphSpacing: FtCssVariableFactory.create("--ft-typography-caption-3-bold-paragraphSpacing", "", "UNKNOWN", "normal"),
+    paragraphIndent: FtCssVariableFactory.create("--ft-typography-caption-3-bold-paragraphIndent", "", "UNKNOWN", "0"),
+    textDecoration: FtCssVariableFactory.create("--ft-typography-caption-3-bold-textDecoration", "", "UNKNOWN", "none")
+};
 export const typographies = {
@@ -458,4 +500,7 @@ ["display"]: typographyDisplay,
     ["caption-2-semibold"]: typographyCaption2Semibold,
-    ["caption-2-bold"]: typographyCaption2Bold
+    ["caption-2-bold"]: typographyCaption2Bold,
+    ["caption-3-medium"]: typographyCaption3Medium,
+    ["caption-3-semibold"]: typographyCaption3Semibold,
+    ["caption-3-bold"]: typographyCaption3Bold
 };
-export const typographyVariants = ["display", "title-1", "title-2", "title-3", "body-1", "body-2", "label-1", "label-2", "caption-1", "caption-2"];
+export const typographyVariants = ["display", "title-1", "title-2", "title-3", "body-1", "body-2", "label-1", "label-2", "caption-1", "caption-2", "caption-3"];

build/generated/ts/index.d.ts

 export * from "./foundation";
 export * from "./semantic";
 export * from "./components/button";
+export * from "./components/floating-menu";
 export * from "./components/tabs";
+export * from "./components/collapsible";
 export * from "./components/switch";
@@ -13,1 +15,2 @@ export * from "./components/chart";
 export * from "./components/notification";
+export * from "./components/tooltip";

build/generated/ts/index.js

 export * from "./foundation";
 export * from "./semantic";
 export * from "./components/button";
+export * from "./components/floating-menu";
 export * from "./components/tabs";
+export * from "./components/collapsible";
 export * from "./components/switch";
@@ -13,1 +15,2 @@ export * from "./components/chart";
 export * from "./components/notification";
+export * from "./components/tooltip";

build/generated/ts/semantic.d.ts

@@ -21,4 +21,4 @@ export declare const semantic: {
     contentInfoIconOnly: import("../../FtCssVariables").FtCssVariable;
+    contentSuccessPrimary: import("../../FtCssVariables").FtCssVariable;
     contentSuccessIconOnly: import("../../FtCssVariables").FtCssVariable;
-    contentSuccessPrimary: import("../../FtCssVariables").FtCssVariable;
     contentGlobalPrimary: import("../../FtCssVariables").FtCssVariable;
@@ -31,8 +31,12 @@ contentGlobalSecondary: import("../../FtCssVariables").FtCssVariable;
     borderWarningPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderWarningSubtle: import("../../FtCssVariables").FtCssVariable;
     borderSuccessPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderSuccessSubtle: import("../../FtCssVariables").FtCssVariable;
     borderErrorPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderErrorSubtle: import("../../FtCssVariables").FtCssVariable;
     borderInfoPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderInfoSubtle: import("../../FtCssVariables").FtCssVariable;
+    borderGlobalPrimary: import("../../FtCssVariables").FtCssVariable;
     borderGlobalSubtle: import("../../FtCssVariables").FtCssVariable;
-    borderGlobalPrimary: import("../../FtCssVariables").FtCssVariable;
     borderInputPrimary: import("../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/semantic.js

@@ -23,4 +23,4 @@ import { FtCssVariableFactory } from "../../FtCssVariables";
     contentInfoIconOnly: FtCssVariableFactory.extend("--ft-content-info-icon-only", "Used on info status icons alone", foundation.colorCyan0),
+    contentSuccessPrimary: FtCssVariableFactory.extend("--ft-content-success-primary", "Used on label of success messages on light surface.", foundation.colorGreen200),
     contentSuccessIconOnly: FtCssVariableFactory.extend("--ft-content-success-icon-only", "Used on success status icons alone", foundation.colorGreen0),
-    contentSuccessPrimary: FtCssVariableFactory.extend("--ft-content-success-primary", "Used on label of success messages on light surface.", foundation.colorGreen200),
     contentGlobalPrimary: FtCssVariableFactory.extend("--ft-content-global-primary", "Used for main content on the page.", foundation.colorGray500),
@@ -32,9 +32,13 @@ contentGlobalSecondary: FtCssVariableFactory.extend("--ft-content-global-secondary", "Used for secondary content, often paired with primary content.\nAlso for action icons.", foundation.colorGray200),
     borderActionFocusRing: FtCssVariableFactory.extend("--ft-border-action-focus-ring", "Focus ring is an additional border to indicate focus-visible state.", foundation.colorCyan0),
-    borderWarningPrimary: FtCssVariableFactory.extend("--ft-border-warning-primary", "Used as border for warning components.", foundation.colorOrange30),
-    borderSuccessPrimary: FtCssVariableFactory.extend("--ft-border-success-primary", "Used as border for success components.", foundation.colorGreen30),
-    borderErrorPrimary: FtCssVariableFactory.extend("--ft-border-error-primary", "Used as border for error components.", foundation.colorRed30),
-    borderInfoPrimary: FtCssVariableFactory.extend("--ft-border-info-primary", "Used as border for information components.", foundation.colorCyan30),
+    borderWarningPrimary: FtCssVariableFactory.extend("--ft-border-warning-primary", "Used as border for text fields in warning state and for buttons in warning color", foundation.colorOrange300),
+    borderWarningSubtle: FtCssVariableFactory.extend("--ft-border-warning-subtle", "Used as border for warning components.", foundation.colorOrange30),
+    borderSuccessPrimary: FtCssVariableFactory.extend("--ft-border-success-primary", "Used as border for success buttons.", foundation.colorGreen200),
+    borderSuccessSubtle: FtCssVariableFactory.extend("--ft-border-success-subtle", "Used as border for success components.", foundation.colorGreen30),
+    borderErrorPrimary: FtCssVariableFactory.extend("--ft-border-error-primary", "Used as border for text fields in error states.", foundation.colorRed0),
+    borderErrorSubtle: FtCssVariableFactory.extend("--ft-border-error-subtle", "Used as border for error components.", foundation.colorRed30),
+    borderInfoPrimary: FtCssVariableFactory.extend("--ft-border-info-primary", "Used as border for buttons in info color.", foundation.colorCyan200),
+    borderInfoSubtle: FtCssVariableFactory.extend("--ft-border-info-subtle", "Used as border for information components.", foundation.colorCyan30),
+    borderGlobalPrimary: FtCssVariableFactory.extend("--ft-border-global-primary", "Used as border for element like input.", foundation.colorGray50),
     borderGlobalSubtle: FtCssVariableFactory.extend("--ft-border-global-subtle", "Used as border to deliminate an area filled with background.on-surface and separators.", foundation.colorGray30),
-    borderGlobalPrimary: FtCssVariableFactory.extend("--ft-border-global-primary", "Used as border for element like input.", foundation.colorGray50),
     borderInputPrimary: FtCssVariableFactory.extend("--ft-border-input-primary", "Used as border for checkboxes and radio buttons", foundation.colorGray80)
 };

package.json

 {
   "name": "@fluid-topics/design-system-variables",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Generated design system variables to use in web components",
@@ -5,0 +5,0 @@ "main": "build/index.js",

No alert changes

Improved metrics

Total package byte prevSize

205309

16.74%

Number of package files

40

17.65%

Lines of code

2836

15%

No dependency changes