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

Comparing version 0.0.23 to 0.0.24

build/generated/ts/components/banner.d.ts

 export declare const banner: {
     iconSize: import("../../../FtCssVariables").FtCssVariable;
     borderWidth: import("../../../FtCssVariables").FtCssVariable;
-    horizontalPadding: import("../../../FtCssVariables").FtCssVariable;
+    leftPadding: import("../../../FtCssVariables").FtCssVariable;
+    rightPadding: import("../../../FtCssVariables").FtCssVariable;
     verticalPadding: import("../../../FtCssVariables").FtCssVariable;
@@ -6,0 +7,0 @@ horizontalSideGap: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/banner.js

@@ -7,3 +7,4 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     borderWidth: FtCssVariableFactory.create("--ft-banner-border-width", "", "SIZE", "1px"),
-    horizontalPadding: FtCssVariableFactory.extend("--ft-banner-horizontal-padding", "", foundation.spacing6),
+    leftPadding: FtCssVariableFactory.extend("--ft-banner-left-padding", "", foundation.spacing6),
+    rightPadding: FtCssVariableFactory.extend("--ft-banner-right-padding", "", foundation.spacing6),
     verticalPadding: FtCssVariableFactory.extend("--ft-banner-vertical-padding", "", foundation.spacing6),
@@ -10,0 +11,0 @@ horizontalSideGap: FtCssVariableFactory.extend("--ft-banner-horizontal-side-gap", "", foundation.spacing6),

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

@@ -11,2 +11,11 @@ export declare const button: {
     largeIconOnlyWidth: import("../../../FtCssVariables").FtCssVariable;
+    mediumHeight: import("../../../FtCssVariables").FtCssVariable;
+    mediumHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
+    mediumGap: import("../../../FtCssVariables").FtCssVariable;
+    mediumBorderRadius: import("../../../FtCssVariables").FtCssVariable;
+    mediumIconSize: import("../../../FtCssVariables").FtCssVariable;
+    mediumBorderWidth: import("../../../FtCssVariables").FtCssVariable;
+    mediumFocusOutlineOffset: import("../../../FtCssVariables").FtCssVariable;
+    mediumFocusOutlineWidth: import("../../../FtCssVariables").FtCssVariable;
+    mediumIconOnlyWidth: import("../../../FtCssVariables").FtCssVariable;
     smallHeight: import("../../../FtCssVariables").FtCssVariable;
@@ -21,2 +30,8 @@ smallHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
     smallIconOnlyWidth: import("../../../FtCssVariables").FtCssVariable;
+    xSmallHeight: import("../../../FtCssVariables").FtCssVariable;
+    xSmallIconSize: import("../../../FtCssVariables").FtCssVariable;
+    xSmallFocusOutlineOffset: import("../../../FtCssVariables").FtCssVariable;
+    xSmallFocusOutlineWidth: import("../../../FtCssVariables").FtCssVariable;
+    xSmallIconOnlyWidth: import("../../../FtCssVariables").FtCssVariable;
+    roundBorderRadius: import("../../../FtCssVariables").FtCssVariable;
     primaryBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
@@ -23,0 +38,0 @@ primaryColor: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/button.js

@@ -14,11 +14,26 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     largeIconOnlyWidth: FtCssVariableFactory.create("--ft-button-large-icon-only-width", "", "SIZE", "40px"),
-    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),
+    mediumHeight: FtCssVariableFactory.create("--ft-button-medium-height", "", "SIZE", "30px"),
+    mediumHorizontalPadding: FtCssVariableFactory.extend("--ft-button-medium-horizontal-padding", "", foundation.spacing3),
+    mediumGap: FtCssVariableFactory.extend("--ft-button-medium-gap", "", foundation.spacing2),
+    mediumBorderRadius: FtCssVariableFactory.extend("--ft-button-medium-border-radius", "", foundation.borderRadiusS),
+    mediumIconSize: FtCssVariableFactory.extend("--ft-button-medium-icon-size", "", foundation.iconSize2),
+    mediumBorderWidth: FtCssVariableFactory.create("--ft-button-medium-border-width", "", "SIZE", "1px"),
+    mediumFocusOutlineOffset: FtCssVariableFactory.create("--ft-button-medium-focus-outline-offset", "", "SIZE", "2px"),
+    mediumFocusOutlineWidth: FtCssVariableFactory.create("--ft-button-medium-focus-outline-width", "", "SIZE", "2px"),
+    mediumIconOnlyWidth: FtCssVariableFactory.create("--ft-button-medium-icon-only-width", "", "SIZE", "30px"),
+    smallHeight: FtCssVariableFactory.create("--ft-button-small-height", "", "SIZE", "20px"),
+    smallHorizontalPadding: FtCssVariableFactory.extend("--ft-button-small-horizontal-padding", "", foundation.spacing2),
+    smallGap: FtCssVariableFactory.extend("--ft-button-small-gap", "", foundation.spacing1),
     smallBorderRadius: FtCssVariableFactory.extend("--ft-button-small-border-radius", "", foundation.borderRadiusS),
-    smallIconSize: FtCssVariableFactory.extend("--ft-button-small-icon-size", "", foundation.iconSize2),
+    smallIconSize: FtCssVariableFactory.extend("--ft-button-small-icon-size", "", foundation.iconSize1),
     smallBorderWidth: FtCssVariableFactory.create("--ft-button-small-border-width", "", "SIZE", "1px"),
     smallFocusOutlineOffset: FtCssVariableFactory.create("--ft-button-small-focus-outline-offset", "", "SIZE", "2px"),
     smallFocusOutlineWidth: FtCssVariableFactory.create("--ft-button-small-focus-outline-width", "", "SIZE", "2px"),
-    smallIconOnlyWidth: FtCssVariableFactory.create("--ft-button-small-icon-only-width", "", "SIZE", "30px"),
+    smallIconOnlyWidth: FtCssVariableFactory.create("--ft-button-small-icon-only-width", "", "SIZE", "20px"),
+    xSmallHeight: FtCssVariableFactory.create("--ft-button-x-small-height", "", "SIZE", "16px"),
+    xSmallIconSize: FtCssVariableFactory.extend("--ft-button-x-small-icon-size", "", foundation.iconSize1),
+    xSmallFocusOutlineOffset: FtCssVariableFactory.create("--ft-button-x-small-focus-outline-offset", "", "SIZE", "2px"),
+    xSmallFocusOutlineWidth: FtCssVariableFactory.create("--ft-button-x-small-focus-outline-width", "", "SIZE", "2px"),
+    xSmallIconOnlyWidth: FtCssVariableFactory.create("--ft-button-x-small-icon-only-width", "", "SIZE", "16px"),
+    roundBorderRadius: FtCssVariableFactory.extend("--ft-button-round-border-radius", "", foundation.borderRadiusPill),
     primaryBackgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", "", semantic.backgroundActionPrimary),
@@ -25,0 +40,0 @@ primaryColor: FtCssVariableFactory.extend("--ft-button-primary-color", "", semantic.contentGlobalOnColor),

build/generated/ts/components/chip.d.ts

 export declare const chip: {
+    largeMinHeight: import("../../../FtCssVariables").FtCssVariable;
     largeHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
-    largeVerticalPadding: import("../../../FtCssVariables").FtCssVariable;
+    largeButtonRightPadding: import("../../../FtCssVariables").FtCssVariable;
     largeGap: import("../../../FtCssVariables").FtCssVariable;
@@ -10,4 +11,5 @@ largeFocusOutlineOffset: import("../../../FtCssVariables").FtCssVariable;
     largeIconSize: import("../../../FtCssVariables").FtCssVariable;
+    mediumMinHeight: import("../../../FtCssVariables").FtCssVariable;
     mediumHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
-    mediumVerticalPadding: import("../../../FtCssVariables").FtCssVariable;
+    mediumButtonRightPadding: import("../../../FtCssVariables").FtCssVariable;
     mediumGap: import("../../../FtCssVariables").FtCssVariable;
@@ -19,4 +21,5 @@ mediumFocusOutlineOffset: import("../../../FtCssVariables").FtCssVariable;
     mediumIconSize: import("../../../FtCssVariables").FtCssVariable;
+    smallMinHeight: import("../../../FtCssVariables").FtCssVariable;
     smallHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
-    smallVerticalPadding: import("../../../FtCssVariables").FtCssVariable;
+    smallButtonRightPadding: import("../../../FtCssVariables").FtCssVariable;
     smallGap: import("../../../FtCssVariables").FtCssVariable;
@@ -23,0 +26,0 @@ smallFocusOutlineOffset: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/chip.js

@@ -5,4 +5,5 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
 export const chip = {
-    largeHorizontalPadding: FtCssVariableFactory.extend("--ft-chip-large-horizontal-padding", "", foundation.spacing4),
-    largeVerticalPadding: FtCssVariableFactory.extend("--ft-chip-large-vertical-padding", "", foundation.spacing2),
+    largeMinHeight: FtCssVariableFactory.create("--ft-chip-large-min-height", "", "SIZE", "36px"),
+    largeHorizontalPadding: FtCssVariableFactory.extend("--ft-chip-large-horizontal-padding", "", foundation.spacing3),
+    largeButtonRightPadding: FtCssVariableFactory.extend("--ft-chip-large-button-right-padding", "", foundation.spacing1),
     largeGap: FtCssVariableFactory.extend("--ft-chip-large-gap", "", foundation.spacing1),
@@ -14,4 +15,5 @@ largeFocusOutlineOffset: FtCssVariableFactory.create("--ft-chip-large-focus-outline-offset", "", "SIZE", "2px"),
     largeIconSize: FtCssVariableFactory.extend("--ft-chip-large-icon-size", "", foundation.iconSize3),
-    mediumHorizontalPadding: FtCssVariableFactory.extend("--ft-chip-medium-horizontal-padding", "", foundation.spacing3),
-    mediumVerticalPadding: FtCssVariableFactory.extend("--ft-chip-medium-vertical-padding", "", foundation.spacing1),
+    mediumMinHeight: FtCssVariableFactory.create("--ft-chip-medium-min-height", "", "SIZE", "24px"),
+    mediumHorizontalPadding: FtCssVariableFactory.extend("--ft-chip-medium-horizontal-padding", "", foundation.spacing2),
+    mediumButtonRightPadding: FtCssVariableFactory.extend("--ft-chip-medium-button-right-padding", "", foundation.spacing05),
     mediumGap: FtCssVariableFactory.extend("--ft-chip-medium-gap", "", foundation.spacing1),
@@ -23,4 +25,5 @@ mediumFocusOutlineOffset: FtCssVariableFactory.create("--ft-chip-medium-focus-outline-offset", "", "SIZE", "2px"),
     mediumIconSize: FtCssVariableFactory.extend("--ft-chip-medium-icon-size", "", foundation.iconSize2),
-    smallHorizontalPadding: FtCssVariableFactory.extend("--ft-chip-small-horizontal-padding", "", foundation.spacing2),
-    smallVerticalPadding: FtCssVariableFactory.extend("--ft-chip-small-vertical-padding", "", foundation.spacing05),
+    smallMinHeight: FtCssVariableFactory.create("--ft-chip-small-min-height", "", "SIZE", "20px"),
+    smallHorizontalPadding: FtCssVariableFactory.extend("--ft-chip-small-horizontal-padding", "", foundation.spacing1),
+    smallButtonRightPadding: FtCssVariableFactory.extend("--ft-chip-small-button-right-padding", "", foundation.spacing05),
     smallGap: FtCssVariableFactory.extend("--ft-chip-small-gap", "", foundation.spacing1),
@@ -27,0 +30,0 @@ smallFocusOutlineOffset: FtCssVariableFactory.create("--ft-chip-small-focus-outline-offset", "", "SIZE", "2px"),

build/generated/ts/components/notification.d.ts

 export declare const notification: {
     iconSize: import("../../../FtCssVariables").FtCssVariable;
-    horizontalPadding: import("../../../FtCssVariables").FtCssVariable;
+    leftPadding: import("../../../FtCssVariables").FtCssVariable;
+    rightPadding: import("../../../FtCssVariables").FtCssVariable;
     verticalPadding: import("../../../FtCssVariables").FtCssVariable;
@@ -5,0 +6,0 @@ infoBackgroundColor: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/notification.js

@@ -6,4 +6,5 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     iconSize: FtCssVariableFactory.extend("--ft-notification-icon-size", "", foundation.iconSize4),
-    horizontalPadding: FtCssVariableFactory.extend("--ft-notification-horizontal-padding", "", foundation.spacing4),
-    verticalPadding: FtCssVariableFactory.extend("--ft-notification-vertical-padding", "", foundation.spacing4),
+    leftPadding: FtCssVariableFactory.extend("--ft-notification-left-padding", "", foundation.spacing5),
+    rightPadding: FtCssVariableFactory.extend("--ft-notification-right-padding", "", foundation.spacing4),
+    verticalPadding: FtCssVariableFactory.extend("--ft-notification-vertical-padding", "", foundation.spacing3),
     infoBackgroundColor: FtCssVariableFactory.extend("--ft-notification-info-background-color", "", semantic.backgroundInfoSubtle),
@@ -10,0 +11,0 @@ infoColor: FtCssVariableFactory.extend("--ft-notification-info-color", "", semantic.contentInfoPrimary),

build/generated/ts/components/popover.d.ts

@@ -5,4 +5,2 @@ export declare const popover: {
     verticalPadding: import("../../../FtCssVariables").FtCssVariable;
-    iconColor: import("../../../FtCssVariables").FtCssVariable;
-    iconSize: import("../../../FtCssVariables").FtCssVariable;
     titleColor: import("../../../FtCssVariables").FtCssVariable;
@@ -9,0 +7,0 @@ bodyColor: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/popover.js

@@ -8,4 +8,2 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     verticalPadding: FtCssVariableFactory.extend("--ft-popover-vertical-padding", "", foundation.spacing6),
-    iconColor: FtCssVariableFactory.extend("--ft-popover-icon-color", "", semantic.contentGlobalSecondary),
-    iconSize: FtCssVariableFactory.extend("--ft-popover-icon-size", "", foundation.iconSize2),
     titleColor: FtCssVariableFactory.extend("--ft-popover-title-color", "", semantic.contentGlobalPrimary),
@@ -12,0 +10,0 @@ bodyColor: FtCssVariableFactory.extend("--ft-popover-body-color", "", semantic.contentGlobalSecondary),

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

@@ -9,2 +9,3 @@ export declare const tabs: {
     offHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offDefaultStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
     offFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
@@ -15,5 +16,5 @@ offDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     onHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onDefaultStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
     onFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
     onActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
-    onDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     onColor: import("../../../FtCssVariables").FtCssVariable;
@@ -20,0 +21,0 @@ onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/tabs.js

@@ -12,2 +12,3 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     offHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-off-hover-state-layer-opacity", "", foundation.opacity8),
+    offDefaultStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-off-default-state-layer-opacity", "", foundation.opacity0),
     offFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-off-focus-state-layer-opacity", "", foundation.opacity8),
@@ -18,5 +19,5 @@ offDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-tabs-off-disabled-component-opacity", "", foundation.opacity40),
     onHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-on-hover-state-layer-opacity", "", foundation.opacity8),
+    onDefaultStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-on-default-state-layer-opacity", "", foundation.opacity0),
     onFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-on-focus-state-layer-opacity", "", foundation.opacity8),
     onActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-on-active-state-layer-opacity", "", foundation.opacity16),
-    onDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-tabs-on-disabled-component-opacity", "", foundation.opacity40),
     onColor: FtCssVariableFactory.extend("--ft-tabs-on-color", "", semantic.contentActionPrimary),
@@ -23,0 +24,0 @@ onStateLayerColor: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-color", "", semantic.contentActionPrimary),

build/generated/ts/index.d.ts

 export * from "./foundation";
 export * from "./semantic";
 export * from "./components/button";
+export * from "./components/chip";
 export * from "./components/link";
@@ -21,3 +22,2 @@ export * from "./components/banner";
 export * from "./components/chart";
-export * from "./components/chip";
 export * from "./components/notice";
@@ -24,0 +24,0 @@ export * from "./components/checkbox";

build/generated/ts/index.js

 export * from "./foundation";
 export * from "./semantic";
 export * from "./components/button";
+export * from "./components/chip";
 export * from "./components/link";
@@ -21,3 +22,2 @@ export * from "./components/banner";
 export * from "./components/chart";
-export * from "./components/chip";
 export * from "./components/notice";
@@ -24,0 +24,0 @@ export * from "./components/checkbox";

build/index.d.ts

 export * from "./FtCssVariables";
 export * from "./generated/ts/index";
+export * from "./DesignSystemTypes";

build/index.js

 export * from "./FtCssVariables";
 export * from "./generated/ts/index";
+export * from "./DesignSystemTypes";

package.json

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

274227

increased by2.15%

Number of package files

66

increased by3.13%

Lines of code

3742

increased by2.6%

No dependency changes