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

Comparing version 0.1.0 to 0.1.1

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

@@ -61,2 +61,3 @@ export declare const button: {
     tertiarySuccessBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
+    tertiarySuccessColor: import("../../../FtCssVariables").FtCssVariable;
     tertiarySuccessIconColor: import("../../../FtCssVariables").FtCssVariable;
@@ -102,2 +103,7 @@ tertiarySuccessStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
     secondaryBrandBorderColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryNeutralBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryNeutralColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryNeutralIconColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryNeutralStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    secondaryNeutralBorderColor: import("../../../FtCssVariables").FtCssVariable;
     secondaryInfoHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
@@ -112,2 +118,7 @@ secondaryInfoFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
     secondaryInfoStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    secondarySuccessBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
+    secondarySuccessBorderColor: import("../../../FtCssVariables").FtCssVariable;
+    secondarySuccessColor: import("../../../FtCssVariables").FtCssVariable;
+    secondarySuccessIconColor: import("../../../FtCssVariables").FtCssVariable;
+    secondarySuccessStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
     secondaryWarningHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
@@ -114,0 +125,0 @@ secondaryWarningFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/button.js

@@ -64,2 +64,3 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     tertiarySuccessBackgroundColor: FtCssVariableFactory.create("--ft-button-tertiary-success-background-color", "", "COLOR", "rgba(0,0,0,0)"),
+    tertiarySuccessColor: FtCssVariableFactory.extend("--ft-button-tertiary-success-color", "", semantic.contentSuccessPrimary),
     tertiarySuccessIconColor: FtCssVariableFactory.extend("--ft-button-tertiary-success-icon-color", "", semantic.contentSuccessPrimary),
@@ -105,2 +106,7 @@ tertiarySuccessStateLayerColor: FtCssVariableFactory.extend("--ft-button-tertiary-success-state-layer-color", "", semantic.contentSuccessPrimary),
     secondaryBrandBorderColor: FtCssVariableFactory.extend("--ft-button-secondary-brand-border-color", "", semantic.borderActionPrimary),
+    secondaryNeutralBackgroundColor: FtCssVariableFactory.create("--ft-button-secondary-neutral-background-color", "", "COLOR", "rgba(0,0,0,0)"),
+    secondaryNeutralColor: FtCssVariableFactory.extend("--ft-button-secondary-neutral-color", "", semantic.contentGlobalSecondary),
+    secondaryNeutralIconColor: FtCssVariableFactory.extend("--ft-button-secondary-neutral-icon-color", "", semantic.contentGlobalSecondary),
+    secondaryNeutralStateLayerColor: FtCssVariableFactory.extend("--ft-button-secondary-neutral-state-layer-color", "", semantic.contentGlobalSecondary),
+    secondaryNeutralBorderColor: FtCssVariableFactory.extend("--ft-button-secondary-neutral-border-color", "", semantic.borderNeutralPrimary),
     secondaryInfoHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-secondary-info-hover-state-layer-opacity", "", foundation.opacity8),
@@ -115,2 +121,7 @@ secondaryInfoFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-secondary-info-focus-state-layer-opacity", "", foundation.opacity8),
     secondaryInfoStateLayerColor: FtCssVariableFactory.extend("--ft-button-secondary-info-state-layer-color", "", semantic.contentInfoPrimary),
+    secondarySuccessBackgroundColor: FtCssVariableFactory.create("--ft-button-secondary-success-background-color", "", "COLOR", "rgba(0,0,0,0)"),
+    secondarySuccessBorderColor: FtCssVariableFactory.extend("--ft-button-secondary-success-border-color", "", semantic.borderSuccessPrimary),
+    secondarySuccessColor: FtCssVariableFactory.extend("--ft-button-secondary-success-color", "", semantic.contentSuccessPrimary),
+    secondarySuccessIconColor: FtCssVariableFactory.extend("--ft-button-secondary-success-icon-color", "", semantic.contentSuccessPrimary),
+    secondarySuccessStateLayerColor: FtCssVariableFactory.extend("--ft-button-secondary-success-state-layer-color", "", semantic.contentSuccessPrimary),
     secondaryWarningHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-secondary-warning-hover-state-layer-opacity", "", foundation.opacity8),
@@ -117,0 +128,0 @@ secondaryWarningFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-secondary-warning-focus-state-layer-opacity", "", foundation.opacity8),

build/generated/ts/components/modal.d.ts

 export declare const modal: {
-    smallContainerWidth: import("../../../FtCssVariables").FtCssVariable;
-    largeContainerWidth: import("../../../FtCssVariables").FtCssVariable;
+    smallContainerTargetWidth: import("../../../FtCssVariables").FtCssVariable;
+    smallContainerMargin: import("../../../FtCssVariables").FtCssVariable;
+    mediumContainerTargetWidth: import("../../../FtCssVariables").FtCssVariable;
+    mediumContainerMargin: import("../../../FtCssVariables").FtCssVariable;
+    largeContainerTargetWidth: import("../../../FtCssVariables").FtCssVariable;
+    largeContainerMargin: import("../../../FtCssVariables").FtCssVariable;
     overlayBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
@@ -12,3 +16,2 @@ overlayOpacity: import("../../../FtCssVariables").FtCssVariable;
     bodyVerticalGap: import("../../../FtCssVariables").FtCssVariable;
-    containerMargin: import("../../../FtCssVariables").FtCssVariable;
     headerBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
@@ -22,4 +25,4 @@ headerBorderColor: import("../../../FtCssVariables").FtCssVariable;
     headerGap: import("../../../FtCssVariables").FtCssVariable;
-    headerBorderBottom: import("../../../FtCssVariables").FtCssVariable;
+    headerBorderBottomWidth: import("../../../FtCssVariables").FtCssVariable;
     borderRadius: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/modal.js

@@ -5,4 +5,8 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
 export const modal = {
-    smallContainerWidth: FtCssVariableFactory.create("--ft-modal-small-container-width", "", "SIZE", "600px"),
-    largeContainerWidth: FtCssVariableFactory.create("--ft-modal-large-container-width", "", "SIZE", "900px"),
+    smallContainerTargetWidth: FtCssVariableFactory.create("--ft-modal-small-container-target-width", "", "SIZE", "560px"),
+    smallContainerMargin: FtCssVariableFactory.extend("--ft-modal-small-container-margin", "", foundation.spacing6),
+    mediumContainerTargetWidth: FtCssVariableFactory.create("--ft-modal-medium-container-target-width", "", "SIZE", "800px"),
+    mediumContainerMargin: FtCssVariableFactory.extend("--ft-modal-medium-container-margin", "", foundation.spacing6),
+    largeContainerTargetWidth: FtCssVariableFactory.create("--ft-modal-large-container-target-width", "", "SIZE", "1040px"),
+    largeContainerMargin: FtCssVariableFactory.extend("--ft-modal-large-container-margin", "", foundation.spacing6),
     overlayBackgroundColor: FtCssVariableFactory.extend("--ft-modal-overlay-background-color", "", foundation.colorGray700),
@@ -16,3 +20,2 @@ overlayOpacity: FtCssVariableFactory.extend("--ft-modal-overlay-opacity", "", foundation.opacity40),
     bodyVerticalGap: FtCssVariableFactory.extend("--ft-modal-body-vertical-gap", "", foundation.spacing6),
-    containerMargin: FtCssVariableFactory.extend("--ft-modal-container-margin", "", foundation.spacing3),
     headerBackgroundColor: FtCssVariableFactory.extend("--ft-modal-header-background-color", "", semantic.backgroundGlobalOnSurface),
@@ -26,4 +29,4 @@ headerBorderColor: FtCssVariableFactory.extend("--ft-modal-header-border-color", "", semantic.borderGlobalSubtle),
     headerGap: FtCssVariableFactory.extend("--ft-modal-header-gap", "", foundation.spacing2),
-    headerBorderBottom: FtCssVariableFactory.create("--ft-modal-header-border-bottom", "", "SIZE", "1px"),
+    headerBorderBottomWidth: FtCssVariableFactory.create("--ft-modal-header-border-bottom-width", "", "SIZE", "1px"),
     borderRadius: FtCssVariableFactory.extend("--ft-modal-border-radius", "", foundation.borderRadiusM)
 };

build/generated/ts/index.d.ts

@@ -23,2 +23,3 @@ export * from "./foundation";
 export * from "./components/chart";
+export * from "./components/page-designer";
 export * from "./components/notice";
@@ -25,0 +26,0 @@ export * from "./components/checkbox";

build/generated/ts/index.js

@@ -23,2 +23,3 @@ export * from "./foundation";
 export * from "./components/chart";
+export * from "./components/page-designer";
 export * from "./components/notice";
@@ -25,0 +26,0 @@ export * from "./components/checkbox";

package.json

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

316389

2.88%

Number of package files

70

2.94%

Lines of code

4182

2.4%

No dependency changes