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

Comparing version 0.0.6 to 0.0.7

build/generated/ts/components/button.d.ts

@@ -1,2 +0,48 @@
-import { FtCssVariables } from "../../../FtCssVariables";
-export declare const button: FtCssVariables;
+export declare const button: {
+    largeHeight: import("../../../FtCssVariables").FtCssVariable;
+    largeHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
+    largeGap: import("../../../FtCssVariables").FtCssVariable;
+    largeBorderRadius: import("../../../FtCssVariables").FtCssVariable;
+    largeIconSize: import("../../../FtCssVariables").FtCssVariable;
+    largeBorderWidth: import("../../../FtCssVariables").FtCssVariable;
+    smallHeight: import("../../../FtCssVariables").FtCssVariable;
+    smallHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
+    smallGap: import("../../../FtCssVariables").FtCssVariable;
+    smallBorderRadius: import("../../../FtCssVariables").FtCssVariable;
+    smallIconSize: import("../../../FtCssVariables").FtCssVariable;
+    smallBorderWidth: import("../../../FtCssVariables").FtCssVariable;
+    primaryBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
+    primaryColor: import("../../../FtCssVariables").FtCssVariable;
+    primaryIconColor: import("../../../FtCssVariables").FtCssVariable;
+    primaryStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    primaryStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
+    primaryStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
+    primaryStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
+    primaryStateLayerOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    primaryOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    primaryFilterDisabled: import("../../../FtCssVariables").FtCssVariable;
+    primaryFocus: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryColor: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryIconColor: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryStateLayerOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryFilterDisabled: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryFocus: import("../../../FtCssVariables").FtCssVariable;
+    secondaryBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryIconColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
+    secondaryStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
+    secondaryStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
+    secondaryStateLayerOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    secondaryOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    secondaryFilterDisabled: import("../../../FtCssVariables").FtCssVariable;
+    secondaryFocus: import("../../../FtCssVariables").FtCssVariable;
+    secondaryBorder: import("../../../FtCssVariables").FtCssVariable;
+};

build/generated/ts/components/button.js

@@ -5,14 +5,14 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
 export const button = {
-    largeHeight: FtCssVariableFactory.create("--ft-button-large-height", "", "SIZE", "40"),
-    largeHorizontalPadding: FtCssVariableFactory.extend("--ft-button-large-horizontal-padding", "", foundation.spacing5),
+    largeHeight: FtCssVariableFactory.create("--ft-button-large-height", "", "SIZE", "40px"),
+    largeHorizontalPadding: FtCssVariableFactory.extend("--ft-button-large-horizontal-padding", "", foundation.spacing4),
     largeGap: FtCssVariableFactory.extend("--ft-button-large-gap", "", foundation.spacing2),
-    largeBorderRadius: FtCssVariableFactory.extend("--ft-button-large-border-radius", "", foundation.borderRadiusM),
+    largeBorderRadius: FtCssVariableFactory.extend("--ft-button-large-border-radius", "", foundation.borderRadiusS),
     largeIconSize: FtCssVariableFactory.extend("--ft-button-large-icon-size", "", foundation.iconSize3),
-    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),
+    largeBorderWidth: FtCssVariableFactory.create("--ft-button-large-border-width", "", "UNKNOWN", "1px"),
+    smallHeight: FtCssVariableFactory.create("--ft-button-small-height", "", "SIZE", "30px"),
+    smallHorizontalPadding: FtCssVariableFactory.extend("--ft-button-small-horizontal-padding", "", foundation.spacing3),
     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.iconSize2),
-    smallBorderWidth: FtCssVariableFactory.create("--ft-button-small-border-width", "", "UNKNOWN", "1"),
+    smallBorderWidth: FtCssVariableFactory.create("--ft-button-small-border-width", "", "UNKNOWN", "1px"),
     primaryBackgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", "", semantic.backgroundActionPrimary),
@@ -22,8 +22,9 @@ primaryColor: FtCssVariableFactory.extend("--ft-button-primary-color", "", semantic.contentGlobalOnColor),
     primaryStateLayerColor: FtCssVariableFactory.extend("--ft-button-primary-state-layer-color", "", semantic.contentGlobalOnColor),
-    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),
+    primaryStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-hover", "", semantic.opacity16),
+    primaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-focus", "", semantic.opacity16),
+    primaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-active", "", semantic.opacity24),
+    primaryStateLayerOpacityDisabled: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-disabled", "", semantic.opacity0),
+    primaryOpacityDisabled: FtCssVariableFactory.extend("--ft-button-primary-opacity-disabled", "", semantic.opacity40),
     primaryFilterDisabled: FtCssVariableFactory.create("--ft-button-primary-filter-disabled", "", "UNKNOWN", "filter: grayscale(1)"),
+    primaryFocus: FtCssVariableFactory.extend("--ft-button-primary-focus", "", semantic.borderActionFocus),
     tertiaryBackgroundColor: FtCssVariableFactory.create("--ft-button-tertiary-background-color", "", "COLOR", "rgba(0,0,0,0)"),
@@ -33,8 +34,9 @@ tertiaryColor: FtCssVariableFactory.extend("--ft-button-tertiary-color", "", semantic.contentActionPrimary),
     tertiaryStateLayerColor: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-color", "", semantic.contentActionPrimary),
-    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),
+    tertiaryStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-hover", "", semantic.opacity8),
+    tertiaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-focus", "", semantic.opacity8),
+    tertiaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-active", "", semantic.opacity16),
+    tertiaryStateLayerOpacityDisabled: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-disabled", "", semantic.opacity0),
+    tertiaryOpacityDisabled: FtCssVariableFactory.extend("--ft-button-tertiary-opacity-disabled", "", semantic.opacity40),
     tertiaryFilterDisabled: FtCssVariableFactory.create("--ft-button-tertiary-filter-disabled", "", "UNKNOWN", "filter: grayscale(1)"),
+    tertiaryFocus: FtCssVariableFactory.extend("--ft-button-tertiary-focus", "", semantic.borderActionFocus),
     secondaryBackgroundColor: FtCssVariableFactory.extend("--ft-button-secondary-background-color", "", foundation.colorWhite),
@@ -44,8 +46,10 @@ secondaryColor: FtCssVariableFactory.extend("--ft-button-secondary-color", "", semantic.contentActionPrimary),
     secondaryStateLayerColor: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-color", "", semantic.contentActionPrimary),
-    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: grayscale(1)")
+    secondaryStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-hover", "", semantic.opacity8),
+    secondaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-focus", "", semantic.opacity8),
+    secondaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-active", "", semantic.opacity16),
+    secondaryStateLayerOpacityDisabled: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-disabled", "", semantic.opacity0),
+    secondaryOpacityDisabled: FtCssVariableFactory.extend("--ft-button-secondary-opacity-disabled", "", semantic.opacity40),
+    secondaryFilterDisabled: FtCssVariableFactory.create("--ft-button-secondary-filter-disabled", "", "UNKNOWN", "filter: grayscale(1)"),
+    secondaryFocus: FtCssVariableFactory.extend("--ft-button-secondary-focus", "", semantic.borderActionFocus),
+    secondaryBorder: FtCssVariableFactory.extend("--ft-button-secondary-border", "", semantic.borderActionPrimary)
 };

build/generated/ts/foundation.d.ts

 import { FtCssVariables } from "../../FtCssVariables";
-export declare const foundation: FtCssVariables;
+export declare const foundation: {
+    colorWhite: import("../../FtCssVariables").FtCssVariable;
+    colorGray0: import("../../FtCssVariables").FtCssVariable;
+    colorGray10: import("../../FtCssVariables").FtCssVariable;
+    colorGray20: import("../../FtCssVariables").FtCssVariable;
+    colorGray30: import("../../FtCssVariables").FtCssVariable;
+    colorGray40: import("../../FtCssVariables").FtCssVariable;
+    colorGray50: import("../../FtCssVariables").FtCssVariable;
+    colorGray60: import("../../FtCssVariables").FtCssVariable;
+    colorGray70: import("../../FtCssVariables").FtCssVariable;
+    colorGray80: import("../../FtCssVariables").FtCssVariable;
+    colorGray90: import("../../FtCssVariables").FtCssVariable;
+    colorGray100: import("../../FtCssVariables").FtCssVariable;
+    colorGray200: import("../../FtCssVariables").FtCssVariable;
+    colorGray300: import("../../FtCssVariables").FtCssVariable;
+    colorGray400: import("../../FtCssVariables").FtCssVariable;
+    colorGray500: import("../../FtCssVariables").FtCssVariable;
+    colorGray600: import("../../FtCssVariables").FtCssVariable;
+    colorGray700: import("../../FtCssVariables").FtCssVariable;
+    colorBrand0: import("../../FtCssVariables").FtCssVariable;
+    colorBrand10: import("../../FtCssVariables").FtCssVariable;
+    colorBrand20: import("../../FtCssVariables").FtCssVariable;
+    colorBrand30: import("../../FtCssVariables").FtCssVariable;
+    colorBrand40: import("../../FtCssVariables").FtCssVariable;
+    colorBrand50: import("../../FtCssVariables").FtCssVariable;
+    colorBrand60: import("../../FtCssVariables").FtCssVariable;
+    colorBrand70: import("../../FtCssVariables").FtCssVariable;
+    colorBrand100: import("../../FtCssVariables").FtCssVariable;
+    colorBrand200: import("../../FtCssVariables").FtCssVariable;
+    colorBrand300: import("../../FtCssVariables").FtCssVariable;
+    colorBrand400: import("../../FtCssVariables").FtCssVariable;
+    colorBrand500: import("../../FtCssVariables").FtCssVariable;
+    colorBrand600: import("../../FtCssVariables").FtCssVariable;
+    colorBrand700: import("../../FtCssVariables").FtCssVariable;
+    colorCyan0: import("../../FtCssVariables").FtCssVariable;
+    colorCyan10: import("../../FtCssVariables").FtCssVariable;
+    colorCyan20: import("../../FtCssVariables").FtCssVariable;
+    colorCyan30: import("../../FtCssVariables").FtCssVariable;
+    colorCyan40: import("../../FtCssVariables").FtCssVariable;
+    colorCyan50: import("../../FtCssVariables").FtCssVariable;
+    colorCyan60: import("../../FtCssVariables").FtCssVariable;
+    colorCyan70: import("../../FtCssVariables").FtCssVariable;
+    colorCyan100: import("../../FtCssVariables").FtCssVariable;
+    colorCyan200: import("../../FtCssVariables").FtCssVariable;
+    colorCyan300: import("../../FtCssVariables").FtCssVariable;
+    colorCyan400: import("../../FtCssVariables").FtCssVariable;
+    colorCyan500: import("../../FtCssVariables").FtCssVariable;
+    colorCyan600: import("../../FtCssVariables").FtCssVariable;
+    colorCyan700: import("../../FtCssVariables").FtCssVariable;
+    colorGreen0: import("../../FtCssVariables").FtCssVariable;
+    colorGreen10: import("../../FtCssVariables").FtCssVariable;
+    colorGreen20: import("../../FtCssVariables").FtCssVariable;
+    colorGreen30: import("../../FtCssVariables").FtCssVariable;
+    colorGreen40: import("../../FtCssVariables").FtCssVariable;
+    colorGreen50: import("../../FtCssVariables").FtCssVariable;
+    colorGreen60: import("../../FtCssVariables").FtCssVariable;
+    colorGreen70: import("../../FtCssVariables").FtCssVariable;
+    colorGreen100: import("../../FtCssVariables").FtCssVariable;
+    colorGreen200: import("../../FtCssVariables").FtCssVariable;
+    colorGreen300: import("../../FtCssVariables").FtCssVariable;
+    colorGreen400: import("../../FtCssVariables").FtCssVariable;
+    colorGreen500: import("../../FtCssVariables").FtCssVariable;
+    colorGreen600: import("../../FtCssVariables").FtCssVariable;
+    colorGreen700: import("../../FtCssVariables").FtCssVariable;
+    colorOrange0: import("../../FtCssVariables").FtCssVariable;
+    colorOrange10: import("../../FtCssVariables").FtCssVariable;
+    colorOrange20: import("../../FtCssVariables").FtCssVariable;
+    colorOrange30: import("../../FtCssVariables").FtCssVariable;
+    colorOrange40: import("../../FtCssVariables").FtCssVariable;
+    colorOrange50: import("../../FtCssVariables").FtCssVariable;
+    colorOrange60: import("../../FtCssVariables").FtCssVariable;
+    colorOrange70: import("../../FtCssVariables").FtCssVariable;
+    colorOrange100: import("../../FtCssVariables").FtCssVariable;
+    colorOrange200: import("../../FtCssVariables").FtCssVariable;
+    colorOrange300: import("../../FtCssVariables").FtCssVariable;
+    colorOrange400: import("../../FtCssVariables").FtCssVariable;
+    colorOrange500: import("../../FtCssVariables").FtCssVariable;
+    colorOrange600: import("../../FtCssVariables").FtCssVariable;
+    colorOrange700: import("../../FtCssVariables").FtCssVariable;
+    colorRed0: import("../../FtCssVariables").FtCssVariable;
+    colorRed10: import("../../FtCssVariables").FtCssVariable;
+    colorRed20: import("../../FtCssVariables").FtCssVariable;
+    colorRed30: import("../../FtCssVariables").FtCssVariable;
+    colorRed40: import("../../FtCssVariables").FtCssVariable;
+    colorRed50: import("../../FtCssVariables").FtCssVariable;
+    colorRed60: import("../../FtCssVariables").FtCssVariable;
+    colorRed70: import("../../FtCssVariables").FtCssVariable;
+    colorRed100: import("../../FtCssVariables").FtCssVariable;
+    colorRed200: import("../../FtCssVariables").FtCssVariable;
+    colorRed300: import("../../FtCssVariables").FtCssVariable;
+    colorRed400: import("../../FtCssVariables").FtCssVariable;
+    colorRed500: import("../../FtCssVariables").FtCssVariable;
+    colorRed600: import("../../FtCssVariables").FtCssVariable;
+    colorRed700: import("../../FtCssVariables").FtCssVariable;
+    spacing1: import("../../FtCssVariables").FtCssVariable;
+    spacing2: import("../../FtCssVariables").FtCssVariable;
+    spacing3: import("../../FtCssVariables").FtCssVariable;
+    spacing4: import("../../FtCssVariables").FtCssVariable;
+    spacing5: import("../../FtCssVariables").FtCssVariable;
+    spacing6: import("../../FtCssVariables").FtCssVariable;
+    spacing8: import("../../FtCssVariables").FtCssVariable;
+    spacing10: import("../../FtCssVariables").FtCssVariable;
+    spacing12: import("../../FtCssVariables").FtCssVariable;
+    spacing16: import("../../FtCssVariables").FtCssVariable;
+    spacing20: import("../../FtCssVariables").FtCssVariable;
+    spacing24: import("../../FtCssVariables").FtCssVariable;
+    spacing28: import("../../FtCssVariables").FtCssVariable;
+    spacing32: import("../../FtCssVariables").FtCssVariable;
+    spacing05: import("../../FtCssVariables").FtCssVariable;
+    borderRadiusS: import("../../FtCssVariables").FtCssVariable;
+    borderRadiusM: import("../../FtCssVariables").FtCssVariable;
+    borderRadiusL: import("../../FtCssVariables").FtCssVariable;
+    borderRadiusXl: import("../../FtCssVariables").FtCssVariable;
+    borderRadiusPill: import("../../FtCssVariables").FtCssVariable;
+    borderRadiusRound: import("../../FtCssVariables").FtCssVariable;
+    iconSize1: import("../../FtCssVariables").FtCssVariable;
+    iconSize2: import("../../FtCssVariables").FtCssVariable;
+    iconSize3: import("../../FtCssVariables").FtCssVariable;
+    iconSize4: import("../../FtCssVariables").FtCssVariable;
+    iconSize5: import("../../FtCssVariables").FtCssVariable;
+    iconSize6: import("../../FtCssVariables").FtCssVariable;
+};
 export declare const typographyDisplay: FtCssVariables;
@@ -4,0 +125,0 @@ export declare const typographyTitle1: FtCssVariables;

build/generated/ts/foundation.js

@@ -117,8 +117,8 @@ import { FtCssVariableFactory } from "../../FtCssVariables";
     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", "20"),
-    iconSize4: FtCssVariableFactory.create("--ft-icon-size-4", "", "SIZE", "24"),
-    iconSize5: FtCssVariableFactory.create("--ft-icon-size-5", "", "SIZE", "32"),
-    iconSize6: FtCssVariableFactory.create("--ft-icon-size-6", "", "SIZE", "48")
+    iconSize1: FtCssVariableFactory.create("--ft-icon-size-1", "", "SIZE", "12px"),
+    iconSize2: FtCssVariableFactory.create("--ft-icon-size-2", "", "SIZE", "16px"),
+    iconSize3: FtCssVariableFactory.create("--ft-icon-size-3", "", "SIZE", "20px"),
+    iconSize4: FtCssVariableFactory.create("--ft-icon-size-4", "", "SIZE", "24px"),
+    iconSize5: FtCssVariableFactory.create("--ft-icon-size-5", "", "SIZE", "32px"),
+    iconSize6: FtCssVariableFactory.create("--ft-icon-size-6", "", "SIZE", "48px")
 };
@@ -125,0 +125,0 @@ export const typographyDisplay = {

build/generated/ts/semantic.d.ts

@@ -1,2 +0,41 @@
-import { FtCssVariables } from "../../FtCssVariables";
-export declare const semantic: FtCssVariables;
+export declare const semantic: {
+    backgroundActionPrimary: import("../../FtCssVariables").FtCssVariable;
+    backgroundErrorPrimary: import("../../FtCssVariables").FtCssVariable;
+    backgroundErrorSubtle: import("../../FtCssVariables").FtCssVariable;
+    backgroundInfoPrimary: import("../../FtCssVariables").FtCssVariable;
+    backgroundInfoSubtle: import("../../FtCssVariables").FtCssVariable;
+    backgroundWarningPrimary: import("../../FtCssVariables").FtCssVariable;
+    backgroundWarningSubtle: import("../../FtCssVariables").FtCssVariable;
+    backgroundSuccessPrimary: import("../../FtCssVariables").FtCssVariable;
+    backgroundSuccessSubtle: import("../../FtCssVariables").FtCssVariable;
+    backgroundGlobalSurface: import("../../FtCssVariables").FtCssVariable;
+    backgroundGlobalOnSurface: import("../../FtCssVariables").FtCssVariable;
+    backgroundGlobalOnSurfaceDark: import("../../FtCssVariables").FtCssVariable;
+    contentActionPrimary: import("../../FtCssVariables").FtCssVariable;
+    contentWarningPrimary: import("../../FtCssVariables").FtCssVariable;
+    contentWarningIconOnly: import("../../FtCssVariables").FtCssVariable;
+    contentErrorPrimary: import("../../FtCssVariables").FtCssVariable;
+    contentErrorIconOnly: import("../../FtCssVariables").FtCssVariable;
+    contentInfoPrimary: import("../../FtCssVariables").FtCssVariable;
+    contentInfoIconOnly: import("../../FtCssVariables").FtCssVariable;
+    contentSuccessIconOnly: import("../../FtCssVariables").FtCssVariable;
+    contentSuccessPrimary: import("../../FtCssVariables").FtCssVariable;
+    contentGlobalPrimary: import("../../FtCssVariables").FtCssVariable;
+    contentGlobalSecondary: import("../../FtCssVariables").FtCssVariable;
+    contentGlobalSubtle: import("../../FtCssVariables").FtCssVariable;
+    contentGlobalOnColor: import("../../FtCssVariables").FtCssVariable;
+    borderActionPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderActionFocus: import("../../FtCssVariables").FtCssVariable;
+    borderWarningPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderSuccessPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderErrorPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderInfoPrimary: import("../../FtCssVariables").FtCssVariable;
+    borderGlobalSubtle: import("../../FtCssVariables").FtCssVariable;
+    borderGlobalPrimary: import("../../FtCssVariables").FtCssVariable;
+    opacity0: import("../../FtCssVariables").FtCssVariable;
+    opacity8: import("../../FtCssVariables").FtCssVariable;
+    opacity16: import("../../FtCssVariables").FtCssVariable;
+    opacity24: import("../../FtCssVariables").FtCssVariable;
+    opacity40: import("../../FtCssVariables").FtCssVariable;
+    opacity80: import("../../FtCssVariables").FtCssVariable;
+};

build/generated/ts/semantic.js

@@ -30,3 +30,3 @@ import { FtCssVariableFactory } from "../../FtCssVariables";
     borderActionPrimary: FtCssVariableFactory.extend("--ft-border-action-primary", "Used as border for primary action components.", foundation.colorBrand0),
-    borderActionFocus: FtCssVariableFactory.extend("--ft-border-action-focus", "Focus is an additional border to indicate focus state.", foundation.colorBrand0),
+    borderActionFocus: FtCssVariableFactory.extend("--ft-border-action-focus", "Focus is an additional border to indicate focus state.", foundation.colorCyan0),
     borderWarningPrimary: FtCssVariableFactory.extend("--ft-border-warning-primary", "Used as border for warning components.", foundation.colorOrange30),
@@ -38,6 +38,8 @@ borderSuccessPrimary: FtCssVariableFactory.extend("--ft-border-success-primary", "Used as border for success components.", foundation.colorGreen30),
     borderGlobalPrimary: FtCssVariableFactory.extend("--ft-border-global-primary", "Used as border for element like input.", foundation.colorGray50),
-    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")
+    opacity0: FtCssVariableFactory.create("--ft-opacity-0", "", "NUMBER", "0%"),
+    opacity8: FtCssVariableFactory.create("--ft-opacity-8", "The color of a state layer should be the same as the one used for the content.", "NUMBER", "8%"),
+    opacity16: FtCssVariableFactory.create("--ft-opacity-16", "The color of a state layer should be the same as the one used for the content.", "NUMBER", "16%"),
+    opacity24: FtCssVariableFactory.create("--ft-opacity-24", "", "NUMBER", "24%"),
+    opacity40: FtCssVariableFactory.create("--ft-opacity-40", "", "NUMBER", "40%"),
+    opacity80: FtCssVariableFactory.create("--ft-opacity-80", "", "NUMBER", "80%")
 };

package.json

 {
   "name": "@fluid-topics/design-system-variables",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "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

76551

increased by27.64%

Lines of code

1070

increased by32.1%

No dependency changes