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

Comparing version 0.0.3 to 0.0.5

build/generated/ts/components/button.js

 import { FtCssVariableFactory } from "../../../FtCssVariables";
+import { foundation } from "../foundation";
 import { semantic } from "../semantic";
 export const button = {
-    secondaryColor: FtCssVariableFactory.extend("--ft-button-secondary-color", "", semantic.contentActionActive),
+    largeHeight: FtCssVariableFactory.create("--ft-button-large-height", "", "SIZE", "40"),
+    largeHorizontalPadding: FtCssVariableFactory.extend("--ft-button-large-horizontal-padding", "", foundation.spacing5),
+    largeGap: FtCssVariableFactory.extend("--ft-button-large-gap", "", foundation.spacing2),
+    largeBorderRadius: FtCssVariableFactory.extend("--ft-button-large-border-radius", "", foundation.borderRadiusM),
+    largeIconSize: FtCssVariableFactory.extend("--ft-button-large-icon-size", "", foundation.iconSize2),
+    largeBorderWidth: FtCssVariableFactory.create("--ft-button-large-border-width", "", "UNKNOWN", "1"),
+    smallHeight: FtCssVariableFactory.create("--ft-button-small-height", "", "SIZE", "30"),
+    smallHorizontalPadding: FtCssVariableFactory.extend("--ft-button-small-horizontal-padding", "", foundation.spacing4),
+    smallGap: FtCssVariableFactory.extend("--ft-button-small-gap", "", foundation.spacing2),
+    smallBorderRadius: FtCssVariableFactory.extend("--ft-button-small-border-radius", "", foundation.borderRadiusS),
+    smallIconSize: FtCssVariableFactory.extend("--ft-button-small-icon-size", "", foundation.iconSize1),
+    smallBorderWidth: FtCssVariableFactory.create("--ft-button-small-border-width", "", "UNKNOWN", "1"),
+    primaryBackgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", "", semantic.backgroundActionPrimary),
+    primaryColor: FtCssVariableFactory.extend("--ft-button-primary-color", "", semantic.contentOnColor),
+    primaryIconColor: FtCssVariableFactory.extend("--ft-button-primary-icon-color", "", semantic.contentOnColor),
+    primaryStateLayerColor: FtCssVariableFactory.extend("--ft-button-primary-state-layer-color", "", semantic.contentOnColor),
+    primaryStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-hover", "", semantic.opacityHover),
+    primaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-active", "", semantic.opacityActive),
+    primaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-focus", "", semantic.opacityFocus),
+    primaryStateLayerOpacityDisabled: FtCssVariableFactory.create("--ft-button-primary-state-layer-opacity-disabled", "", "NUMBER", "0"),
+    primaryOpacityDisabled: FtCssVariableFactory.extend("--ft-button-primary-opacity-disabled", "", semantic.opacityDisabled),
+    primaryFilterDisabled: FtCssVariableFactory.create("--ft-button-primary-filter-disabled", "", "UNKNOWN", "filter: greyscale(1)"),
+    tertiaryBackgroundColor: FtCssVariableFactory.create("--ft-button-tertiary-background-color", "", "COLOR", "rgba(0,0,0,0)"),
     tertiaryColor: FtCssVariableFactory.extend("--ft-button-tertiary-color", "", semantic.contentAction),
-    primaryBackgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", "", semantic.backgroundAction),
-    primaryBorderColor: FtCssVariableFactory.extend("--ft-button-primary-border-color", "", semantic.borderAction)
+    tertiaryIconColor: FtCssVariableFactory.extend("--ft-button-tertiary-icon-color", "", semantic.contentAction),
+    tertiaryStateLayerColor: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-color", "", semantic.contentAction),
+    tertiaryStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-hover", "", semantic.opacityHover),
+    tertiaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-active", "", semantic.opacityActive),
+    tertiaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-focus", "", semantic.opacityFocus),
+    tertiaryStateLayerOpacityDisabled: FtCssVariableFactory.create("--ft-button-tertiary-state-layer-opacity-disabled", "", "NUMBER", "0"),
+    tertiaryOpacityDisabled: FtCssVariableFactory.extend("--ft-button-tertiary-opacity-disabled", "", semantic.opacityDisabled),
+    tertiaryFilterDisabled: FtCssVariableFactory.create("--ft-button-tertiary-filter-disabled", "", "UNKNOWN", "filter: greyscale(1)"),
+    secondaryBackgroundColor: FtCssVariableFactory.extend("--ft-button-secondary-background-color", "", foundation.colorWhite),
+    secondaryColor: FtCssVariableFactory.extend("--ft-button-secondary-color", "", semantic.contentAction),
+    secondaryIconColor: FtCssVariableFactory.extend("--ft-button-secondary-icon-color", "", semantic.contentAction),
+    secondaryStateLayerColor: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-color", "", semantic.contentAction),
+    secondaryStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-hover", "", semantic.opacityHover),
+    secondaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-active", "", semantic.opacityActive),
+    secondaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-focus", "", semantic.opacityFocus),
+    secondaryStateLayerOpacityDisabled: FtCssVariableFactory.create("--ft-button-secondary-state-layer-opacity-disabled", "", "NUMBER", "0"),
+    secondaryOpacityDisabled: FtCssVariableFactory.extend("--ft-button-secondary-opacity-disabled", "", semantic.opacityDisabled),
+    secondaryFilterDisabled: FtCssVariableFactory.create("--ft-button-secondary-filter-disabled", "", "UNKNOWN", "filter: greyscale(1)")
 };

build/generated/ts/foundation.d.ts

@@ -7,20 +7,20 @@ import { FtCssVariables } from "../../FtCssVariables";
 export declare const typographyTitle3: FtCssVariables;
+export declare const typographyBody1Regular: FtCssVariables;
 export declare const typographyBody1Medium: FtCssVariables;
 export declare const typographyBody1Semibold: FtCssVariables;
-export declare const typographyBody1Regular: FtCssVariables;
+export declare const typographyBody2Regular: FtCssVariables;
 export declare const typographyBody2Medium: FtCssVariables;
 export declare const typographyBody2Semibold: FtCssVariables;
-export declare const typographyBody2Regular: FtCssVariables;
+export declare const typographyLabel1Medium: FtCssVariables;
+export declare const typographyLabel1Semibold: FtCssVariables;
 export declare const typographyLabel1Bold: FtCssVariables;
-export declare const typographyLabel1Semibold: FtCssVariables;
-export declare const typographyLabel1Medium: FtCssVariables;
+export declare const typographyLabel2Medium: FtCssVariables;
+export declare const typographyLabel2Semibold: FtCssVariables;
 export declare const typographyLabel2Bold: FtCssVariables;
-export declare const typographyLabel2Semibold: FtCssVariables;
-export declare const typographyLabel2Medium: FtCssVariables;
+export declare const typographyCaption1Medium: FtCssVariables;
+export declare const typographyCaption1Semibold: FtCssVariables;
 export declare const typographyCaption1Bold: FtCssVariables;
-export declare const typographyCaption1Semibold: FtCssVariables;
-export declare const typographyCaption1Medium: FtCssVariables;
+export declare const typographyCaption2Medium: FtCssVariables;
+export declare const typographyCaption2Semibold: FtCssVariables;
 export declare const typographyCaption2Bold: FtCssVariables;
-export declare const typographyCaption2Semibold: FtCssVariables;
-export declare const typographyCaption2Medium: FtCssVariables;
 export declare const typographies: {
@@ -31,20 +31,22 @@ display: FtCssVariables;
     "title-3": FtCssVariables;
+    "body-1-regular": FtCssVariables;
     "body-1-medium": FtCssVariables;
     "body-1-semibold": FtCssVariables;
-    "body-1-regular": FtCssVariables;
+    "body-2-regular": FtCssVariables;
     "body-2-medium": FtCssVariables;
     "body-2-semibold": FtCssVariables;
-    "body-2-regular": FtCssVariables;
+    "label-1-medium": FtCssVariables;
+    "label-1-semibold": FtCssVariables;
     "label-1-bold": FtCssVariables;
-    "label-1-semibold": FtCssVariables;
-    "label-1-medium": FtCssVariables;
+    "label-2-medium": FtCssVariables;
+    "label-2-semibold": FtCssVariables;
     "label-2-bold": FtCssVariables;
-    "label-2-semibold": FtCssVariables;
-    "label-2-medium": FtCssVariables;
+    "caption-1-medium": FtCssVariables;
+    "caption-1-semibold": FtCssVariables;
     "caption-1-bold": FtCssVariables;
-    "caption-1-semibold": FtCssVariables;
-    "caption-1-medium": FtCssVariables;
+    "caption-2-medium": FtCssVariables;
+    "caption-2-semibold": FtCssVariables;
     "caption-2-bold": FtCssVariables;
-    "caption-2-semibold": FtCssVariables;
-    "caption-2-medium": FtCssVariables;
 };
+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";

build/generated/ts/foundation.js

@@ -96,17 +96,17 @@ import { FtCssVariableFactory } from "../../FtCssVariables";
     colorError700: FtCssVariableFactory.create("--ft-color-error-700", "", "COLOR", "#0f0104"),
-    spacing1: FtCssVariableFactory.create("--ft-spacing-1", "", "SIZE", "4px"),
-    spacing2: FtCssVariableFactory.create("--ft-spacing-2", "", "SIZE", "calc(var(--ft-spacing-2, \"4px\")*2)"),
-    spacing3: FtCssVariableFactory.create("--ft-spacing-3", "", "SIZE", "calc(var(--ft-spacing-3, \"4px\")*3)"),
-    spacing4: FtCssVariableFactory.create("--ft-spacing-4", "", "SIZE", "calc(var(--ft-spacing-4, \"4px\")*4)"),
-    spacing5: FtCssVariableFactory.create("--ft-spacing-5", "", "SIZE", "calc(var(--ft-spacing-5, \"4px\")*5)"),
-    spacing6: FtCssVariableFactory.create("--ft-spacing-6", "", "SIZE", "calc(var(--ft-spacing-6, \"4px\")*6)"),
-    spacing8: FtCssVariableFactory.create("--ft-spacing-8", "", "SIZE", "calc(var(--ft-spacing-8, \"4px\")*8)"),
-    spacing10: FtCssVariableFactory.create("--ft-spacing-10", "", "SIZE", "calc(var(--ft-spacing-10, \"4px\")*10)"),
-    spacing12: FtCssVariableFactory.create("--ft-spacing-12", "", "SIZE", "calc(var(--ft-spacing-12, \"4px\")*12)"),
-    spacing16: FtCssVariableFactory.create("--ft-spacing-16", "", "SIZE", "calc(var(--ft-spacing-16, \"4px\")*16)"),
-    spacing20: FtCssVariableFactory.create("--ft-spacing-20", "", "SIZE", "calc(var(--ft-spacing-20, \"4px\")*20)"),
-    spacing24: FtCssVariableFactory.create("--ft-spacing-24", "", "SIZE", "calc(var(--ft-spacing-24, \"4px\")*24)"),
-    spacing28: FtCssVariableFactory.create("--ft-spacing-28", "", "SIZE", "calc(var(--ft-spacing-28, \"4px\")*28)"),
-    spacing32: FtCssVariableFactory.create("--ft-spacing-32", "", "SIZE", "calc(var(--ft-spacing-32, \"4px\")*32)"),
-    spacing05: FtCssVariableFactory.create("--ft-spacing-0-5", "", "SIZE", "calc(var(--ft-spacing-0-5, \"4px\")*0.5)"),
+    spacing1: FtCssVariableFactory.create("--ft-spacing-1", "", "SIZE", "0.25rem"),
+    spacing2: FtCssVariableFactory.create("--ft-spacing-2", "", "SIZE", "calc(var(--ft-spacing-2, \"0.25rem\")*2)"),
+    spacing3: FtCssVariableFactory.create("--ft-spacing-3", "", "SIZE", "calc(var(--ft-spacing-3, \"0.25rem\")*3)"),
+    spacing4: FtCssVariableFactory.create("--ft-spacing-4", "", "SIZE", "calc(var(--ft-spacing-4, \"0.25rem\")*4)"),
+    spacing5: FtCssVariableFactory.create("--ft-spacing-5", "", "SIZE", "calc(var(--ft-spacing-5, \"0.25rem\")*5)"),
+    spacing6: FtCssVariableFactory.create("--ft-spacing-6", "", "SIZE", "calc(var(--ft-spacing-6, \"0.25rem\")*6)"),
+    spacing8: FtCssVariableFactory.create("--ft-spacing-8", "", "SIZE", "calc(var(--ft-spacing-8, \"0.25rem\")*8)"),
+    spacing10: FtCssVariableFactory.create("--ft-spacing-10", "", "SIZE", "calc(var(--ft-spacing-10, \"0.25rem\")*10)"),
+    spacing12: FtCssVariableFactory.create("--ft-spacing-12", "", "SIZE", "calc(var(--ft-spacing-12, \"0.25rem\")*12)"),
+    spacing16: FtCssVariableFactory.create("--ft-spacing-16", "", "SIZE", "calc(var(--ft-spacing-16, \"0.25rem\")*16)"),
+    spacing20: FtCssVariableFactory.create("--ft-spacing-20", "", "SIZE", "calc(var(--ft-spacing-20, \"0.25rem\")*20)"),
+    spacing24: FtCssVariableFactory.create("--ft-spacing-24", "", "SIZE", "calc(var(--ft-spacing-24, \"0.25rem\")*24)"),
+    spacing28: FtCssVariableFactory.create("--ft-spacing-28", "", "SIZE", "calc(var(--ft-spacing-28, \"0.25rem\")*28)"),
+    spacing32: FtCssVariableFactory.create("--ft-spacing-32", "", "SIZE", "calc(var(--ft-spacing-32, \"0.25rem\")*32)"),
+    spacing05: FtCssVariableFactory.create("--ft-spacing-0-5", "", "SIZE", "calc(var(--ft-spacing-0-5, \"0.25rem\")*0.5)"),
     borderRadiusS: FtCssVariableFactory.create("--ft-border-radius-s", "", "SIZE", "4px"),
@@ -117,3 +117,7 @@ borderRadiusM: FtCssVariableFactory.create("--ft-border-radius-m", "", "SIZE", "8px"),
     borderRadiusPill: FtCssVariableFactory.create("--ft-border-radius-pill", "", "SIZE", "999px"),
-    borderRadiusRound: FtCssVariableFactory.create("--ft-border-radius-round", "", "SIZE", "50%")
+    borderRadiusRound: FtCssVariableFactory.create("--ft-border-radius-round", "", "SIZE", "50%"),
+    iconSize1: FtCssVariableFactory.create("--ft-icon-size-1", "", "SIZE", "12"),
+    iconSize2: FtCssVariableFactory.create("--ft-icon-size-2", "", "SIZE", "16"),
+    iconSize3: FtCssVariableFactory.create("--ft-icon-size-3", "", "SIZE", "24"),
+    iconSize4: FtCssVariableFactory.create("--ft-icon-size-4", "", "SIZE", "32")
 };
@@ -124,3 +128,3 @@ export const typographyDisplay = {
     lineHeight: FtCssVariableFactory.create("--ft-typography-display-lineHeight", "", "SIZE", "120%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-display-fontSize", "", "SIZE", "2,5rem"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-display-fontSize", "", "SIZE", "2.5rem"),
     letterSpacing: FtCssVariableFactory.create("--ft-typography-display-letterSpacing", "", "SIZE", "-0.02em")
@@ -139,3 +143,3 @@ };
     lineHeight: FtCssVariableFactory.create("--ft-typography-title-2-lineHeight", "", "SIZE", "120%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-title-2-fontSize", "", "SIZE", "1,5rem"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-title-2-fontSize", "", "SIZE", "1.5rem"),
     letterSpacing: FtCssVariableFactory.create("--ft-typography-title-2-letterSpacing", "", "SIZE", "-0.02em")
@@ -147,5 +151,11 @@ };
     lineHeight: FtCssVariableFactory.create("--ft-typography-title-3-lineHeight", "", "SIZE", "120%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-title-3-fontSize", "", "SIZE", "1,25rem"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-title-3-fontSize", "", "SIZE", "1.25rem"),
     letterSpacing: FtCssVariableFactory.create("--ft-typography-title-3-letterSpacing", "", "SIZE", "-0.01em")
 };
+export const typographyBody1Regular = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-body-1-regular-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-body-1-regular-fontWeight", "", "UNKNOWN", "400"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-body-1-regular-lineHeight", "", "SIZE", "135%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-body-1-regular-fontSize", "", "SIZE", "1rem")
+};
 export const typographyBody1Medium = {
@@ -163,7 +173,7 @@ fontFamily: FtCssVariableFactory.create("--ft-typography-body-1-medium-fontFamily", "", "UNKNOWN", "Inter"),
 };
-export const typographyBody1Regular = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-body-1-regular-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-body-1-regular-fontWeight", "", "UNKNOWN", "400"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-body-1-regular-lineHeight", "", "SIZE", "135%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-body-1-regular-fontSize", "", "SIZE", "1rem")
+export const typographyBody2Regular = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-body-2-regular-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-body-2-regular-fontWeight", "", "UNKNOWN", "400"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-body-2-regular-lineHeight", "", "SIZE", "135%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-body-2-regular-fontSize", "", "SIZE", "0,875rem")
 };
@@ -182,16 +192,10 @@ export const typographyBody2Medium = {
 };
-export const typographyBody2Regular = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-body-2-regular-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-body-2-regular-fontWeight", "", "UNKNOWN", "400"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-body-2-regular-lineHeight", "", "SIZE", "135%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-body-2-regular-fontSize", "", "SIZE", "0,875rem")
+export const typographyLabel1Medium = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-label-1-medium-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-label-1-medium-fontWeight", "", "UNKNOWN", "500"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-label-1-medium-lineHeight", "", "SIZE", "110%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-label-1-medium-fontSize", "", "SIZE", "0,875rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-label-1-medium-letterSpacing", "", "SIZE", "0.04em"),
+    textCase: FtCssVariableFactory.create("--ft-typography-label-1-medium-textCase", "", "UNKNOWN", "uppercase")
 };
-export const typographyLabel1Bold = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-label-1-bold-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-label-1-bold-fontWeight", "", "UNKNOWN", "700"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-label-1-bold-lineHeight", "", "SIZE", "110%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-label-1-bold-fontSize", "", "SIZE", "0,875rem"),
-    letterSpacing: FtCssVariableFactory.create("--ft-typography-label-1-bold-letterSpacing", "", "SIZE", "0.04em"),
-    textCase: FtCssVariableFactory.create("--ft-typography-label-1-bold-textCase", "", "UNKNOWN", "uppercase")
-};
 export const typographyLabel1Semibold = {
@@ -205,17 +209,17 @@ fontFamily: FtCssVariableFactory.create("--ft-typography-label-1-semibold-fontFamily", "", "UNKNOWN", "Inter"),
 };
-export const typographyLabel1Medium = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-label-1-medium-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-label-1-medium-fontWeight", "", "UNKNOWN", "500"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-label-1-medium-lineHeight", "", "SIZE", "110%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-label-1-medium-fontSize", "", "SIZE", "0,875rem"),
-    letterSpacing: FtCssVariableFactory.create("--ft-typography-label-1-medium-letterSpacing", "", "SIZE", "0.04em"),
-    textCase: FtCssVariableFactory.create("--ft-typography-label-1-medium-textCase", "", "UNKNOWN", "uppercase")
+export const typographyLabel1Bold = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-label-1-bold-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-label-1-bold-fontWeight", "", "UNKNOWN", "700"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-label-1-bold-lineHeight", "", "SIZE", "110%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-label-1-bold-fontSize", "", "SIZE", "0,875rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-label-1-bold-letterSpacing", "", "SIZE", "0.04em"),
+    textCase: FtCssVariableFactory.create("--ft-typography-label-1-bold-textCase", "", "UNKNOWN", "uppercase")
 };
-export const typographyLabel2Bold = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-label-2-bold-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-label-2-bold-fontWeight", "", "UNKNOWN", "700"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-label-2-bold-lineHeight", "", "SIZE", "110%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-label-2-bold-fontSize", "", "SIZE", "0,75rem"),
-    letterSpacing: FtCssVariableFactory.create("--ft-typography-label-2-bold-letterSpacing", "", "SIZE", "0.04em"),
-    textCase: FtCssVariableFactory.create("--ft-typography-label-2-bold-textCase", "", "UNKNOWN", "uppercase")
+export const typographyLabel2Medium = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-label-2-medium-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-label-2-medium-fontWeight", "", "UNKNOWN", "500"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-label-2-medium-lineHeight", "", "SIZE", "110%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-label-2-medium-fontSize", "", "SIZE", "0,75rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-label-2-medium-letterSpacing", "", "SIZE", "0.04em"),
+    textCase: FtCssVariableFactory.create("--ft-typography-label-2-medium-textCase", "", "UNKNOWN", "uppercase")
 };
@@ -230,17 +234,17 @@ export const typographyLabel2Semibold = {
 };
-export const typographyLabel2Medium = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-label-2-medium-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-label-2-medium-fontWeight", "", "UNKNOWN", "500"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-label-2-medium-lineHeight", "", "SIZE", "110%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-label-2-medium-fontSize", "", "SIZE", "0,75rem"),
-    letterSpacing: FtCssVariableFactory.create("--ft-typography-label-2-medium-letterSpacing", "", "SIZE", "0.04em"),
-    textCase: FtCssVariableFactory.create("--ft-typography-label-2-medium-textCase", "", "UNKNOWN", "uppercase")
+export const typographyLabel2Bold = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-label-2-bold-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-label-2-bold-fontWeight", "", "UNKNOWN", "700"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-label-2-bold-lineHeight", "", "SIZE", "110%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-label-2-bold-fontSize", "", "SIZE", "0,75rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-label-2-bold-letterSpacing", "", "SIZE", "0.04em"),
+    textCase: FtCssVariableFactory.create("--ft-typography-label-2-bold-textCase", "", "UNKNOWN", "uppercase")
 };
-export const typographyCaption1Bold = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-1-bold-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-1-bold-fontWeight", "", "UNKNOWN", "700"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-1-bold-lineHeight", "", "SIZE", "130%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-caption-1-bold-fontSize", "", "SIZE", "0,75rem"),
-    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-1-bold-letterSpacing", "", "SIZE", "inherit"),
-    textCase: FtCssVariableFactory.create("--ft-typography-caption-1-bold-textCase", "", "UNKNOWN", "inherit")
+export const typographyCaption1Medium = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-1-medium-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-1-medium-fontWeight", "", "UNKNOWN", "500"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-1-medium-lineHeight", "", "SIZE", "130%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-caption-1-medium-fontSize", "", "SIZE", "0,75rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-1-medium-letterSpacing", "", "SIZE", "inherit"),
+    textCase: FtCssVariableFactory.create("--ft-typography-caption-1-medium-textCase", "", "UNKNOWN", "inherit")
 };
@@ -255,17 +259,17 @@ export const typographyCaption1Semibold = {
 };
-export const typographyCaption1Medium = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-1-medium-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-1-medium-fontWeight", "", "UNKNOWN", "500"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-1-medium-lineHeight", "", "SIZE", "130%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-caption-1-medium-fontSize", "", "SIZE", "0,75rem"),
-    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-1-medium-letterSpacing", "", "SIZE", "inherit"),
-    textCase: FtCssVariableFactory.create("--ft-typography-caption-1-medium-textCase", "", "UNKNOWN", "inherit")
+export const typographyCaption1Bold = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-1-bold-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-1-bold-fontWeight", "", "UNKNOWN", "700"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-1-bold-lineHeight", "", "SIZE", "130%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-caption-1-bold-fontSize", "", "SIZE", "0,75rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-1-bold-letterSpacing", "", "SIZE", "inherit"),
+    textCase: FtCssVariableFactory.create("--ft-typography-caption-1-bold-textCase", "", "UNKNOWN", "inherit")
 };
-export const typographyCaption2Bold = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-2-bold-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-2-bold-fontWeight", "", "UNKNOWN", "700"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-2-bold-lineHeight", "", "SIZE", "130%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-caption-2-bold-fontSize", "", "SIZE", "0,6875rem"),
-    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-2-bold-letterSpacing", "", "SIZE", "inherit"),
-    textCase: FtCssVariableFactory.create("--ft-typography-caption-2-bold-textCase", "", "UNKNOWN", "inherit")
+export const typographyCaption2Medium = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-2-medium-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-2-medium-fontWeight", "", "UNKNOWN", "500"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-2-medium-lineHeight", "", "SIZE", "130%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-caption-2-medium-fontSize", "", "SIZE", "0,6875rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-2-medium-letterSpacing", "", "SIZE", "inherit"),
+    textCase: FtCssVariableFactory.create("--ft-typography-caption-2-medium-textCase", "", "UNKNOWN", "inherit")
 };
@@ -280,9 +284,9 @@ export const typographyCaption2Semibold = {
 };
-export const typographyCaption2Medium = {
-    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-2-medium-fontFamily", "", "UNKNOWN", "Inter"),
-    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-2-medium-fontWeight", "", "UNKNOWN", "500"),
-    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-2-medium-lineHeight", "", "SIZE", "130%"),
-    fontSize: FtCssVariableFactory.create("--ft-typography-caption-2-medium-fontSize", "", "SIZE", "0,6875rem"),
-    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-2-medium-letterSpacing", "", "SIZE", "inherit"),
-    textCase: FtCssVariableFactory.create("--ft-typography-caption-2-medium-textCase", "", "UNKNOWN", "inherit")
+export const typographyCaption2Bold = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-caption-2-bold-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-caption-2-bold-fontWeight", "", "UNKNOWN", "700"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-caption-2-bold-lineHeight", "", "SIZE", "130%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-caption-2-bold-fontSize", "", "SIZE", "0,6875rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-caption-2-bold-letterSpacing", "", "SIZE", "inherit"),
+    textCase: FtCssVariableFactory.create("--ft-typography-caption-2-bold-textCase", "", "UNKNOWN", "inherit")
 };
@@ -294,20 +298,21 @@ export const typographies = {
     ["title-3"]: typographyTitle3,
+    ["body-1-regular"]: typographyBody1Regular,
     ["body-1-medium"]: typographyBody1Medium,
     ["body-1-semibold"]: typographyBody1Semibold,
-    ["body-1-regular"]: typographyBody1Regular,
+    ["body-2-regular"]: typographyBody2Regular,
     ["body-2-medium"]: typographyBody2Medium,
     ["body-2-semibold"]: typographyBody2Semibold,
-    ["body-2-regular"]: typographyBody2Regular,
+    ["label-1-medium"]: typographyLabel1Medium,
+    ["label-1-semibold"]: typographyLabel1Semibold,
     ["label-1-bold"]: typographyLabel1Bold,
-    ["label-1-semibold"]: typographyLabel1Semibold,
-    ["label-1-medium"]: typographyLabel1Medium,
+    ["label-2-medium"]: typographyLabel2Medium,
+    ["label-2-semibold"]: typographyLabel2Semibold,
     ["label-2-bold"]: typographyLabel2Bold,
-    ["label-2-semibold"]: typographyLabel2Semibold,
-    ["label-2-medium"]: typographyLabel2Medium,
+    ["caption-1-medium"]: typographyCaption1Medium,
+    ["caption-1-semibold"]: typographyCaption1Semibold,
     ["caption-1-bold"]: typographyCaption1Bold,
-    ["caption-1-semibold"]: typographyCaption1Semibold,
-    ["caption-1-medium"]: typographyCaption1Medium,
-    ["caption-2-bold"]: typographyCaption2Bold,
+    ["caption-2-medium"]: typographyCaption2Medium,
     ["caption-2-semibold"]: typographyCaption2Semibold,
-    ["caption-2-medium"]: typographyCaption2Medium
+    ["caption-2-bold"]: typographyCaption2Bold
 };
+export const typographyVariants = ["display", "title-1", "title-2", "title-3", "body-1", "body-2", "label-1", "label-2", "caption-1", "caption-2"];

build/generated/ts/index.d.ts

 export * from "./foundation";
 export * from "./semantic";
 export * from "./components/button";
-export * from "./components/chip";

build/generated/ts/index.js

 export * from "./foundation";
 export * from "./semantic";
 export * from "./components/button";
-export * from "./components/chip";

build/generated/ts/semantic.js

 import { FtCssVariableFactory } from "../../FtCssVariables";
 import { foundation } from "./foundation";
 export const semantic = {
-    backgroundAction: FtCssVariableFactory.extend("--ft-background-action", "", foundation.colorPrimary0),
-    backgroundActionHover: FtCssVariableFactory.extend("--ft-background-action-hover", "", foundation.colorPrimary100),
-    backgroundActionActive: FtCssVariableFactory.extend("--ft-background-action-active", "", foundation.colorPrimary70),
-    backgroundErrorPrimary: FtCssVariableFactory.extend("--ft-background-error-primary", "", foundation.colorError0),
-    backgroundErrorActive: FtCssVariableFactory.extend("--ft-background-error-active", "", foundation.colorError70),
-    backgroundErrorHover: FtCssVariableFactory.extend("--ft-background-error-hover", "", foundation.colorError100),
-    backgroundErrorSubtle: FtCssVariableFactory.extend("--ft-background-error-subtle", "", foundation.colorError10),
-    backgroundErrorSubtleHover: FtCssVariableFactory.extend("--ft-background-error-subtle-hover", "", foundation.colorError20),
-    backgroundWarning: FtCssVariableFactory.extend("--ft-background-warning", "", foundation.colorWarning300),
-    backgroundWarningSubtle: FtCssVariableFactory.extend("--ft-background-warning-subtle", "", foundation.colorWarning10),
-    backgroundSuccess: FtCssVariableFactory.extend("--ft-background-success", "", foundation.colorSuccess200),
-    backgroundSuccessSubtle: FtCssVariableFactory.extend("--ft-background-success-subtle", "", foundation.colorSuccess10),
-    contentAction: FtCssVariableFactory.extend("--ft-content-action", "", foundation.colorPrimary0),
-    contentWarning: FtCssVariableFactory.extend("--ft-content-warning", "", foundation.colorWarning300),
-    contentInfo: FtCssVariableFactory.extend("--ft-content-info", "", foundation.colorInfo200),
-    contentError: FtCssVariableFactory.extend("--ft-content-error", "", foundation.colorError0),
+    backgroundActionPrimary: FtCssVariableFactory.extend("--ft-background-action-primary", "Used as backgorund of primary action components.", foundation.colorPrimary0),
+    backgroundInfoPrimary: FtCssVariableFactory.extend("--ft-background-info-primary", "Used as background of information components.", foundation.colorInfo200),
+    backgroundInfoSubtle: FtCssVariableFactory.extend("--ft-background-info-subtle", "Used as background of subtle information components.", foundation.colorInfo10),
+    backgroundErrorPrimary: FtCssVariableFactory.extend("--ft-background-error-primary", "Used as background of error components.", foundation.colorError0),
+    backgroundErrorSubtle: FtCssVariableFactory.extend("--ft-background-error-subtle", "Used as background of subtle error components.", foundation.colorError10),
+    backgroundWarningPrimary: FtCssVariableFactory.extend("--ft-background-warning-primary", "Used as background of warning components.", foundation.colorWarning300),
+    backgroundWarningSubtle: FtCssVariableFactory.extend("--ft-background-warning-subtle", "Used as background of subtle information components.", foundation.colorWarning10),
+    backgroundSuccessPrimary: FtCssVariableFactory.extend("--ft-background-success-primary", "Used as background of success components.", foundation.colorSuccess200),
+    backgroundSuccessSubtle: FtCssVariableFactory.extend("--ft-background-success-subtle", "Used as background of subtle success components.", foundation.colorSuccess10),
+    backgroundSurface: FtCssVariableFactory.extend("--ft-background-surface", "Used as app background.", foundation.colorWhite),
+    backgroundOnSurface: FtCssVariableFactory.extend("--ft-background-on-surface", "Used as background on element on the base base background, like cards.", foundation.colorNeutral10),
+    backgroundOnSurfaceDark: FtCssVariableFactory.extend("--ft-background-on-surface-dark", "Used as background on element that need background separation.", foundation.colorNeutral30),
+    contentAction: FtCssVariableFactory.extend("--ft-content-action", "Used on label of primary action on light surface.", foundation.colorPrimary0),
+    contentWarning: FtCssVariableFactory.extend("--ft-content-warning", "Used on label of warning messages on light surface.", foundation.colorWarning300),
+    contentInfo: FtCssVariableFactory.extend("--ft-content-info", "Used on label of information messages on light surface.", foundation.colorInfo200),
+    contentError: FtCssVariableFactory.extend("--ft-content-error", "Used on label of error messages on light surface.", foundation.colorError0),
     contentNegative: FtCssVariableFactory.extend("--ft-content-negative", "", foundation.colorInfo200),
-    contentSuccess: FtCssVariableFactory.extend("--ft-content-success", "", foundation.colorSuccess200),
-    contentActionHover: FtCssVariableFactory.extend("--ft-content-action-hover", "", foundation.colorPrimary100),
-    contentActionActive: FtCssVariableFactory.extend("--ft-content-action-active", "", foundation.colorPrimary70),
+    contentSuccess: FtCssVariableFactory.extend("--ft-content-success", "Used on label of success messages on light surface.", foundation.colorSuccess200),
     contentPrimary: FtCssVariableFactory.extend("--ft-content-primary", "Used for main content on the page.", foundation.colorNeutral500),
-    contentSecondary: FtCssVariableFactory.extend("--ft-content-secondary", "Used for secondary content, often paired with primary content.", foundation.colorNeutral100),
-    contentSubtle: FtCssVariableFactory.extend("--ft-content-subtle", "Used for placeholder.", foundation.colorNeutral80),
+    contentSecondary: FtCssVariableFactory.extend("--ft-content-secondary", "Used for secondary content, often paired with primary content.\nAlso for action icons.", foundation.colorNeutral200),
+    contentSubtle: FtCssVariableFactory.extend("--ft-content-subtle", "Used for placeholder, unselected items in a tab component or breadcrumb.", foundation.colorNeutral0),
     contentOnColor: FtCssVariableFactory.extend("--ft-content-on-color", "Used for content on a dominant color.", foundation.colorWhite),
-    borderAction: FtCssVariableFactory.extend("--ft-border-action", "", foundation.colorPrimary0),
-    borderActionHover: FtCssVariableFactory.extend("--ft-border-action-hover", "", foundation.colorPrimary100),
-    borderActionActive: FtCssVariableFactory.extend("--ft-border-action-active", "", foundation.colorPrimary70),
-    borderWarning: FtCssVariableFactory.extend("--ft-border-warning", "", foundation.colorWarning300),
-    borderSuccess: FtCssVariableFactory.extend("--ft-border-success", "", foundation.colorSuccess200),
-    borderError: FtCssVariableFactory.extend("--ft-border-error", "", foundation.colorError0),
-    borderInfo: FtCssVariableFactory.extend("--ft-border-info", "", foundation.colorInfo200),
-    borderWarningSubtle: FtCssVariableFactory.extend("--ft-border-warning-subtle", "", foundation.colorWarning40),
-    borderSubtle: FtCssVariableFactory.extend("--ft-border-subtle", "", foundation.colorNeutral30),
-    borderPrimary: FtCssVariableFactory.extend("--ft-border-primary", "", foundation.colorNeutral60),
-    colorMain: FtCssVariableFactory.extend("--ft-color-main", "", foundation.colorNeutral10)
+    borderActionPrimary: FtCssVariableFactory.extend("--ft-border-action-primary", "Used as border for primary action components.", foundation.colorPrimary0),
+    borderActionFocus: FtCssVariableFactory.extend("--ft-border-action-focus", "Focus is an additional border to indicate focus state.", foundation.colorPrimary0),
+    borderWarningPrimary: FtCssVariableFactory.extend("--ft-border-warning-primary", "Used as border for warning components.", foundation.colorWarning300),
+    borderSuccessPrimary: FtCssVariableFactory.extend("--ft-border-success-primary", "Used as border for success components.", foundation.colorSuccess200),
+    borderErrorPrimary: FtCssVariableFactory.extend("--ft-border-error-primary", "Used as border for error components.", foundation.colorError0),
+    borderInfoPrimary: FtCssVariableFactory.extend("--ft-border-info-primary", "Used as border for information components.", foundation.colorInfo200),
+    borderSubtle: FtCssVariableFactory.extend("--ft-border-subtle", "Used as border to deliminate an area filled with background.on-surface and separators.", foundation.colorNeutral30),
+    borderPrimary: FtCssVariableFactory.extend("--ft-border-primary", "Used as border for element like input.", foundation.colorNeutral50),
+    opacityHover: FtCssVariableFactory.create("--ft-opacity-hover", "Used with a color to indicate hover state.\nThe color of a state layer should be the same as the one used for the content.", "NUMBER", "0.08"),
+    opacityFocus: FtCssVariableFactory.create("--ft-opacity-focus", "Used with a color to indicate focus state.\nThe color of a state layer should be the same as the one used for the content.", "NUMBER", "0.12"),
+    opacityActive: FtCssVariableFactory.create("--ft-opacity-active", "Used with a color to indicate active state.\nThe color of a state layer should be the same as the one used for the content.", "NUMBER", "0.12"),
+    opacityDisabled: FtCssVariableFactory.create("--ft-opacity-disabled", "Used with a color to indicate active state.\nThe color of a state layer should be the same as the one used for the content.", "NUMBER", "0.4")
 };

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59436

increased by14.04%

Lines of code

805

increased by4.27%

Worsened metrics

Number of package files

16

decreased by-11.11%

No dependency changes