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

Comparing version 0.0.20 to 0.0.21

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

@@ -24,6 +24,6 @@ export declare const button: {
     primaryStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    primaryStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    primaryStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    primaryStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    primaryComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    primaryHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    primaryFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    primaryActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    primaryDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     focusFocusRingColor: import("../../../FtCssVariables").FtCssVariable;
@@ -34,6 +34,6 @@ tertiaryBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     tertiaryStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    tertiaryStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    tertiaryStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    tertiaryStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    tertiaryComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    tertiaryDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     secondaryBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
@@ -43,6 +43,6 @@ secondaryColor: import("../../../FtCssVariables").FtCssVariable;
     secondaryStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    secondaryStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    secondaryStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    secondaryStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    secondaryComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    secondaryHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    secondaryFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    secondaryActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    secondaryDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     secondaryBorderColor: import("../../../FtCssVariables").FtCssVariable;
@@ -53,6 +53,6 @@ neutralBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     neutralStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    neutralStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    neutralStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    neutralStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    neutralComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    neutralHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    neutralFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    neutralActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    neutralDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/button.js

@@ -27,6 +27,6 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     primaryStateLayerColor: FtCssVariableFactory.extend("--ft-button-primary-state-layer-color", "", semantic.contentGlobalOnColor),
-    primaryStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-hover", "", foundation.opacity16),
-    primaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-focus", "", foundation.opacity16),
-    primaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-primary-state-layer-opacity-active", "", foundation.opacity24),
-    primaryComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-button-primary-component-opacity-disabled", "", foundation.opacity40),
+    primaryHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-primary-hover-state-layer-opacity", "", foundation.opacity16),
+    primaryFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-primary-focus-state-layer-opacity", "", foundation.opacity16),
+    primaryActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-primary-active-state-layer-opacity", "", foundation.opacity24),
+    primaryDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-button-primary-disabled-component-opacity", "", foundation.opacity40),
     focusFocusRingColor: FtCssVariableFactory.extend("--ft-button-focus-focus-ring-color", "", semantic.borderActionFocusRing),
@@ -37,6 +37,6 @@ tertiaryBackgroundColor: FtCssVariableFactory.create("--ft-button-tertiary-background-color", "", "COLOR", "rgba(0,0,0,0)"),
     tertiaryStateLayerColor: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-color", "", semantic.contentActionPrimary),
-    tertiaryStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-hover", "", foundation.opacity8),
-    tertiaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-focus", "", foundation.opacity8),
-    tertiaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-tertiary-state-layer-opacity-active", "", foundation.opacity16),
-    tertiaryComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-button-tertiary-component-opacity-disabled", "", foundation.opacity40),
+    tertiaryHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-tertiary-hover-state-layer-opacity", "", foundation.opacity8),
+    tertiaryFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-tertiary-focus-state-layer-opacity", "", foundation.opacity8),
+    tertiaryActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-tertiary-active-state-layer-opacity", "", foundation.opacity16),
+    tertiaryDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-button-tertiary-disabled-component-opacity", "", foundation.opacity40),
     secondaryBackgroundColor: FtCssVariableFactory.create("--ft-button-secondary-background-color", "", "COLOR", "rgba(0,0,0,0)"),
@@ -46,6 +46,6 @@ 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", "", foundation.opacity8),
-    secondaryStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-focus", "", foundation.opacity8),
-    secondaryStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-secondary-state-layer-opacity-active", "", foundation.opacity16),
-    secondaryComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-button-secondary-component-opacity-disabled", "", foundation.opacity40),
+    secondaryHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-secondary-hover-state-layer-opacity", "", foundation.opacity8),
+    secondaryFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-secondary-focus-state-layer-opacity", "", foundation.opacity8),
+    secondaryActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-secondary-active-state-layer-opacity", "", foundation.opacity16),
+    secondaryDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-button-secondary-disabled-component-opacity", "", foundation.opacity40),
     secondaryBorderColor: FtCssVariableFactory.extend("--ft-button-secondary-border-color", "", semantic.borderActionPrimary),
@@ -56,6 +56,6 @@ neutralBackgroundColor: FtCssVariableFactory.create("--ft-button-neutral-background-color", "", "COLOR", "rgba(0,0,0,0)"),
     neutralStateLayerColor: FtCssVariableFactory.extend("--ft-button-neutral-state-layer-color", "", semantic.contentGlobalSecondary),
-    neutralStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-button-neutral-state-layer-opacity-hover", "", foundation.opacity8),
-    neutralStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-button-neutral-state-layer-opacity-focus", "", foundation.opacity8),
-    neutralStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-button-neutral-state-layer-opacity-active", "", foundation.opacity16),
-    neutralComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-button-neutral-component-opacity-disabled", "", foundation.opacity40)
+    neutralHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-neutral-hover-state-layer-opacity", "", foundation.opacity8),
+    neutralFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-neutral-focus-state-layer-opacity", "", foundation.opacity8),
+    neutralActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-button-neutral-active-state-layer-opacity", "", foundation.opacity16),
+    neutralDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-button-neutral-disabled-component-opacity", "", foundation.opacity40)
 };

build/generated/ts/components/checkbox.d.ts

 export declare const checkbox: {
-    labelColor: import("../../../FtCssVariables").FtCssVariable;
+    color: import("../../../FtCssVariables").FtCssVariable;
     checkedBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     checkedStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    checkedColor: import("../../../FtCssVariables").FtCssVariable;
-    checkedStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    checkedStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    checkedStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    checkedComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    checkedIconColor: import("../../../FtCssVariables").FtCssVariable;
+    checkedHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    checkedFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    checkedActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    checkedDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     uncheckedBorderColor: import("../../../FtCssVariables").FtCssVariable;
     uncheckedStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    uncheckedStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    uncheckedStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    uncheckedStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    uncheckedComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    uncheckedHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    uncheckedFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    uncheckedActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    uncheckedDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     focusFocusRingColor: import("../../../FtCssVariables").FtCssVariable;
@@ -17,0 +17,0 @@ focusOutlineOffset: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/checkbox.js

@@ -5,16 +5,16 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
 export const checkbox = {
-    labelColor: FtCssVariableFactory.extend("--ft-checkbox-label-color", "", semantic.contentGlobalPrimary),
+    color: FtCssVariableFactory.extend("--ft-checkbox-color", "", semantic.contentGlobalPrimary),
     checkedBackgroundColor: FtCssVariableFactory.extend("--ft-checkbox-checked-background-color", "", semantic.contentActionPrimary),
     checkedStateLayerColor: FtCssVariableFactory.extend("--ft-checkbox-checked-state-layer-color", "", semantic.contentActionPrimary),
-    checkedColor: FtCssVariableFactory.extend("--ft-checkbox-checked-color", "", semantic.contentGlobalOnColor),
-    checkedStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-checkbox-checked-state-layer-opacity-hover", "", foundation.opacity16),
-    checkedStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-checkbox-checked-state-layer-opacity-focus", "", foundation.opacity16),
-    checkedStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-checkbox-checked-state-layer-opacity-active", "", foundation.opacity24),
-    checkedComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-checkbox-checked-component-opacity-disabled", "", foundation.opacity40),
+    checkedIconColor: FtCssVariableFactory.extend("--ft-checkbox-checked-icon-color", "", semantic.contentGlobalOnColor),
+    checkedHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-checkbox-checked-hover-state-layer-opacity", "", foundation.opacity16),
+    checkedFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-checkbox-checked-focus-state-layer-opacity", "", foundation.opacity16),
+    checkedActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-checkbox-checked-active-state-layer-opacity", "", foundation.opacity24),
+    checkedDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-checkbox-checked-disabled-component-opacity", "", foundation.opacity40),
     uncheckedBorderColor: FtCssVariableFactory.extend("--ft-checkbox-unchecked-border-color", "", foundation.colorGray80),
     uncheckedStateLayerColor: FtCssVariableFactory.extend("--ft-checkbox-unchecked-state-layer-color", "", foundation.colorGray80),
-    uncheckedStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-checkbox-unchecked-state-layer-opacity-hover", "", foundation.opacity16),
-    uncheckedStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-checkbox-unchecked-state-layer-opacity-focus", "", foundation.opacity16),
-    uncheckedStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-checkbox-unchecked-state-layer-opacity-active", "", foundation.opacity24),
-    uncheckedComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-checkbox-unchecked-component-opacity-disabled", "", foundation.opacity40),
+    uncheckedHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-checkbox-unchecked-hover-state-layer-opacity", "", foundation.opacity16),
+    uncheckedFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-checkbox-unchecked-focus-state-layer-opacity", "", foundation.opacity16),
+    uncheckedActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-checkbox-unchecked-active-state-layer-opacity", "", foundation.opacity24),
+    uncheckedDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-checkbox-unchecked-disabled-component-opacity", "", foundation.opacity40),
     focusFocusRingColor: FtCssVariableFactory.extend("--ft-checkbox-focus-focus-ring-color", "", semantic.borderActionFocusRing),
@@ -21,0 +21,0 @@ focusOutlineOffset: FtCssVariableFactory.create("--ft-checkbox-focus-outline-offset", "", "SIZE", "3px"),

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

@@ -28,15 +28,20 @@ export declare const chip: {
     neutralColor: import("../../../FtCssVariables").FtCssVariable;
+    neutralIconColor: import("../../../FtCssVariables").FtCssVariable;
     neutralBorderColor: import("../../../FtCssVariables").FtCssVariable;
     infoBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     infoColor: import("../../../FtCssVariables").FtCssVariable;
+    infoIconColor: import("../../../FtCssVariables").FtCssVariable;
     infoBorderColor: import("../../../FtCssVariables").FtCssVariable;
     successBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     successColor: import("../../../FtCssVariables").FtCssVariable;
+    successIconColor: import("../../../FtCssVariables").FtCssVariable;
     successBorderColor: import("../../../FtCssVariables").FtCssVariable;
     warningBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     warningColor: import("../../../FtCssVariables").FtCssVariable;
+    warningIconColor: import("../../../FtCssVariables").FtCssVariable;
     warningBorderColor: import("../../../FtCssVariables").FtCssVariable;
     errorBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     errorColor: import("../../../FtCssVariables").FtCssVariable;
+    errorIconColor: import("../../../FtCssVariables").FtCssVariable;
     errorBorderColor: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/chip.js

@@ -31,15 +31,20 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     neutralColor: FtCssVariableFactory.extend("--ft-chip-neutral-color", "", semantic.contentGlobalPrimary),
+    neutralIconColor: FtCssVariableFactory.extend("--ft-chip-neutral-icon-color", "", semantic.contentGlobalPrimary),
     neutralBorderColor: FtCssVariableFactory.extend("--ft-chip-neutral-border-color", "", semantic.borderGlobalSubtle),
     infoBackgroundColor: FtCssVariableFactory.extend("--ft-chip-info-background-color", "", semantic.backgroundInfoSubtle),
     infoColor: FtCssVariableFactory.extend("--ft-chip-info-color", "", semantic.contentInfoPrimary),
+    infoIconColor: FtCssVariableFactory.extend("--ft-chip-info-icon-color", "", semantic.contentInfoIconOnly),
     infoBorderColor: FtCssVariableFactory.extend("--ft-chip-info-border-color", "", semantic.borderInfoSubtle),
     successBackgroundColor: FtCssVariableFactory.extend("--ft-chip-success-background-color", "", semantic.backgroundSuccessSubtle),
     successColor: FtCssVariableFactory.extend("--ft-chip-success-color", "", semantic.contentSuccessPrimary),
+    successIconColor: FtCssVariableFactory.extend("--ft-chip-success-icon-color", "", semantic.contentSuccessIconOnly),
     successBorderColor: FtCssVariableFactory.extend("--ft-chip-success-border-color", "", semantic.borderSuccessSubtle),
     warningBackgroundColor: FtCssVariableFactory.extend("--ft-chip-warning-background-color", "", semantic.backgroundWarningSubtle),
     warningColor: FtCssVariableFactory.extend("--ft-chip-warning-color", "", semantic.contentWarningPrimary),
+    warningIconColor: FtCssVariableFactory.extend("--ft-chip-warning-icon-color", "", semantic.contentWarningIconOnly),
     warningBorderColor: FtCssVariableFactory.extend("--ft-chip-warning-border-color", "", semantic.borderWarningSubtle),
     errorBackgroundColor: FtCssVariableFactory.extend("--ft-chip-error-background-color", "", semantic.backgroundErrorSubtle),
     errorColor: FtCssVariableFactory.extend("--ft-chip-error-color", "", semantic.contentErrorPrimary),
+    errorIconColor: FtCssVariableFactory.extend("--ft-chip-error-icon-color", "", semantic.contentErrorIconOnly),
     errorBorderColor: FtCssVariableFactory.extend("--ft-chip-error-border-color", "", semantic.borderErrorSubtle)
 };

build/generated/ts/components/collapsible.d.ts

 export declare const collapsible: {
-    stateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    stateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    stateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    componentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    hoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    focusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    focusOutlineWidth: import("../../../FtCssVariables").FtCssVariable;
+    focusFocusRingColor: import("../../../FtCssVariables").FtCssVariable;
+    activeStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    disabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     horizontalPadding: import("../../../FtCssVariables").FtCssVariable;
     verticalPadding: import("../../../FtCssVariables").FtCssVariable;
-    focusOutlineWidth: import("../../../FtCssVariables").FtCssVariable;
-    focusFocusRingColor: import("../../../FtCssVariables").FtCssVariable;
     color: import("../../../FtCssVariables").FtCssVariable;
@@ -11,0 +11,0 @@ stateLayerColor: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/collapsible.js

@@ -5,10 +5,10 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
 export const collapsible = {
-    stateLayerOpacityHover: FtCssVariableFactory.extend("--ft-collapsible-state-layer-opacity-hover", "", foundation.opacity8),
-    stateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-collapsible-state-layer-opacity-focus", "", foundation.opacity8),
-    stateLayerOpacityActive: FtCssVariableFactory.extend("--ft-collapsible-state-layer-opacity-active", "", foundation.opacity16),
-    componentOpacityDisabled: FtCssVariableFactory.extend("--ft-collapsible-component-opacity-disabled", "", foundation.opacity40),
+    hoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-collapsible-hover-state-layer-opacity", "", foundation.opacity8),
+    focusStateLayerOpacity: FtCssVariableFactory.extend("--ft-collapsible-focus-state-layer-opacity", "", foundation.opacity8),
+    focusOutlineWidth: FtCssVariableFactory.create("--ft-collapsible-focus-outline-width", "", "SIZE", "3px"),
+    focusFocusRingColor: FtCssVariableFactory.extend("--ft-collapsible-focus-focus-ring-color", "", semantic.borderActionFocusRing),
+    activeStateLayerOpacity: FtCssVariableFactory.extend("--ft-collapsible-active-state-layer-opacity", "", foundation.opacity16),
+    disabledComponentOpacity: FtCssVariableFactory.extend("--ft-collapsible-disabled-component-opacity", "", foundation.opacity40),
     horizontalPadding: FtCssVariableFactory.extend("--ft-collapsible-horizontal-padding", "", foundation.spacing4),
     verticalPadding: FtCssVariableFactory.extend("--ft-collapsible-vertical-padding", "", foundation.spacing3),
-    focusOutlineWidth: FtCssVariableFactory.create("--ft-collapsible-focus-outline-width", "", "SIZE", "3px"),
-    focusFocusRingColor: FtCssVariableFactory.extend("--ft-collapsible-focus-focus-ring-color", "", semantic.borderActionFocusRing),
     color: FtCssVariableFactory.extend("--ft-collapsible-color", "", semantic.contentGlobalPrimary),
@@ -15,0 +15,0 @@ stateLayerColor: FtCssVariableFactory.extend("--ft-collapsible-state-layer-color", "", semantic.contentGlobalPrimary),

build/generated/ts/components/floating-menu.d.ts

 export declare const floatingMenu: {
+    height: import("../../../FtCssVariables").FtCssVariable;
     horizontalPadding: import("../../../FtCssVariables").FtCssVariable;
-    verticalPadding: import("../../../FtCssVariables").FtCssVariable;
     offIconColor: import("../../../FtCssVariables").FtCssVariable;
     offColor: import("../../../FtCssVariables").FtCssVariable;
     onColor: import("../../../FtCssVariables").FtCssVariable;
-    onIconColor: import("../../../FtCssVariables").FtCssVariable;
     onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
@@ -12,8 +11,8 @@ gap: import("../../../FtCssVariables").FtCssVariable;
     focusOutlineWidth: import("../../../FtCssVariables").FtCssVariable;
-    stateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    stateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    stateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    componentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    focusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    hoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    activeStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    disabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     iconSize: import("../../../FtCssVariables").FtCssVariable;
     backgroundColor: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/floating-menu.js

@@ -5,8 +5,7 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
 export const floatingMenu = {
+    height: FtCssVariableFactory.create("--ft-floating-menu-height", "", "SIZE", "50px"),
     horizontalPadding: FtCssVariableFactory.extend("--ft-floating-menu-horizontal-padding", "", foundation.spacing4),
-    verticalPadding: FtCssVariableFactory.extend("--ft-floating-menu-vertical-padding", "", foundation.spacing4),
     offIconColor: FtCssVariableFactory.extend("--ft-floating-menu-off-icon-color", "", semantic.contentGlobalPrimary),
     offColor: FtCssVariableFactory.extend("--ft-floating-menu-off-color", "", semantic.contentGlobalPrimary),
     onColor: FtCssVariableFactory.extend("--ft-floating-menu-on-color", "", semantic.contentActionPrimary),
-    onIconColor: FtCssVariableFactory.extend("--ft-floating-menu-on-icon-color", "", semantic.contentActionPrimary),
     onStateLayerColor: FtCssVariableFactory.extend("--ft-floating-menu-on-state-layer-color", "", semantic.contentActionPrimary),
@@ -16,8 +15,8 @@ gap: FtCssVariableFactory.extend("--ft-floating-menu-gap", "", foundation.spacing3),
     focusOutlineWidth: FtCssVariableFactory.create("--ft-floating-menu-focus-outline-width", "", "SIZE", "3px"),
-    stateLayerOpacityHover: FtCssVariableFactory.extend("--ft-floating-menu-state-layer-opacity-hover", "", foundation.opacity8),
-    stateLayerOpacityActive: FtCssVariableFactory.extend("--ft-floating-menu-state-layer-opacity-active", "", foundation.opacity16),
-    stateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-floating-menu-state-layer-opacity-focus", "", foundation.opacity8),
-    componentOpacityDisabled: FtCssVariableFactory.extend("--ft-floating-menu-component-opacity-disabled", "", foundation.opacity40),
+    focusStateLayerOpacity: FtCssVariableFactory.extend("--ft-floating-menu-focus-state-layer-opacity", "", foundation.opacity8),
+    hoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-floating-menu-hover-state-layer-opacity", "", foundation.opacity8),
+    activeStateLayerOpacity: FtCssVariableFactory.extend("--ft-floating-menu-active-state-layer-opacity", "", foundation.opacity16),
+    disabledComponentOpacity: FtCssVariableFactory.extend("--ft-floating-menu-disabled-component-opacity", "", foundation.opacity40),
     iconSize: FtCssVariableFactory.extend("--ft-floating-menu-icon-size", "", foundation.iconSize3),
     backgroundColor: FtCssVariableFactory.extend("--ft-floating-menu-background-color", "", semantic.backgroundGlobalOnSurface)
 };

build/generated/ts/components/notice.d.ts

@@ -11,5 +11,7 @@ export declare const notice: {
     infoColor: import("../../../FtCssVariables").FtCssVariable;
+    infoIconColor: import("../../../FtCssVariables").FtCssVariable;
     warningBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     warningBorderColor: import("../../../FtCssVariables").FtCssVariable;
     warningColor: import("../../../FtCssVariables").FtCssVariable;
+    warningIconColor: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/notice.js

@@ -14,5 +14,7 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     infoColor: FtCssVariableFactory.extend("--ft-notice-info-color", "", semantic.contentInfoPrimary),
+    infoIconColor: FtCssVariableFactory.extend("--ft-notice-info-icon-color", "", semantic.contentInfoIconOnly),
     warningBackgroundColor: FtCssVariableFactory.extend("--ft-notice-warning-background-color", "", semantic.backgroundWarningSubtle),
     warningBorderColor: FtCssVariableFactory.extend("--ft-notice-warning-border-color", "", semantic.borderWarningSubtle),
-    warningColor: FtCssVariableFactory.extend("--ft-notice-warning-color", "", semantic.contentWarningPrimary)
+    warningColor: FtCssVariableFactory.extend("--ft-notice-warning-color", "", semantic.contentWarningPrimary),
+    warningIconColor: FtCssVariableFactory.extend("--ft-notice-warning-icon-color", "", semantic.contentWarningIconOnly)
 };

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

@@ -7,16 +7,20 @@ export declare const notification: {
     infoColor: import("../../../FtCssVariables").FtCssVariable;
+    infoIconColor: import("../../../FtCssVariables").FtCssVariable;
     infoBorderColor: import("../../../FtCssVariables").FtCssVariable;
     successBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     successColor: import("../../../FtCssVariables").FtCssVariable;
+    successIconColor: import("../../../FtCssVariables").FtCssVariable;
     successBorderColor: import("../../../FtCssVariables").FtCssVariable;
     warningBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     warningColor: import("../../../FtCssVariables").FtCssVariable;
+    warningIconColor: import("../../../FtCssVariables").FtCssVariable;
     warningBorderColor: import("../../../FtCssVariables").FtCssVariable;
     errorBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     errorColor: import("../../../FtCssVariables").FtCssVariable;
+    errorIconColor: import("../../../FtCssVariables").FtCssVariable;
     errorBorderColor: import("../../../FtCssVariables").FtCssVariable;
     borderRadius: import("../../../FtCssVariables").FtCssVariable;
     borderWidth: import("../../../FtCssVariables").FtCssVariable;
-    gapLeading: import("../../../FtCssVariables").FtCssVariable;
-    gapTrailing: import("../../../FtCssVariables").FtCssVariable;
+    leadingGap: import("../../../FtCssVariables").FtCssVariable;
+    trailingGap: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/notification.js

@@ -10,16 +10,20 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     infoColor: FtCssVariableFactory.extend("--ft-notification-info-color", "", semantic.contentInfoPrimary),
+    infoIconColor: FtCssVariableFactory.extend("--ft-notification-info-icon-color", "", semantic.contentInfoIconOnly),
     infoBorderColor: FtCssVariableFactory.extend("--ft-notification-info-border-color", "", semantic.borderInfoSubtle),
     successBackgroundColor: FtCssVariableFactory.extend("--ft-notification-success-background-color", "", semantic.backgroundSuccessSubtle),
     successColor: FtCssVariableFactory.extend("--ft-notification-success-color", "", semantic.contentSuccessPrimary),
+    successIconColor: FtCssVariableFactory.extend("--ft-notification-success-icon-color", "", semantic.contentSuccessIconOnly),
     successBorderColor: FtCssVariableFactory.extend("--ft-notification-success-border-color", "", semantic.borderSuccessSubtle),
     warningBackgroundColor: FtCssVariableFactory.extend("--ft-notification-warning-background-color", "", semantic.backgroundWarningSubtle),
     warningColor: FtCssVariableFactory.extend("--ft-notification-warning-color", "", semantic.contentWarningPrimary),
+    warningIconColor: FtCssVariableFactory.extend("--ft-notification-warning-icon-color", "", semantic.contentWarningIconOnly),
     warningBorderColor: FtCssVariableFactory.extend("--ft-notification-warning-border-color", "", semantic.borderWarningSubtle),
     errorBackgroundColor: FtCssVariableFactory.extend("--ft-notification-error-background-color", "", semantic.backgroundErrorSubtle),
     errorColor: FtCssVariableFactory.extend("--ft-notification-error-color", "", semantic.contentErrorPrimary),
+    errorIconColor: FtCssVariableFactory.extend("--ft-notification-error-icon-color", "", semantic.contentErrorIconOnly),
     errorBorderColor: FtCssVariableFactory.extend("--ft-notification-error-border-color", "", semantic.borderErrorSubtle),
     borderRadius: FtCssVariableFactory.extend("--ft-notification-border-radius", "", foundation.borderRadiusPill),
     borderWidth: FtCssVariableFactory.create("--ft-notification-border-width", "", "SIZE", "1px"),
-    gapLeading: FtCssVariableFactory.extend("--ft-notification-gap-leading", "", foundation.spacing2),
-    gapTrailing: FtCssVariableFactory.extend("--ft-notification-gap-trailing", "", foundation.spacing8)
+    leadingGap: FtCssVariableFactory.extend("--ft-notification-leading-gap", "", foundation.spacing2),
+    trailingGap: FtCssVariableFactory.extend("--ft-notification-trailing-gap", "", foundation.spacing8)
 };

build/generated/ts/components/radio.d.ts

 export declare const radio: {
-    labelColor: import("../../../FtCssVariables").FtCssVariable;
-    selectedColor: import("../../../FtCssVariables").FtCssVariable;
+    color: import("../../../FtCssVariables").FtCssVariable;
+    selectedRadioColor: import("../../../FtCssVariables").FtCssVariable;
     selectedStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    selectedStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    selectedStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    selectedStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    selectedComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    selectedHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    selectedFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    selectedActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    selectedDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     unselectedStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    unselectedStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    unselectedStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    unselectedStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    unselectedComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    unselectedBorderColor: import("../../../FtCssVariables").FtCssVariable;
+    unselectedHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    unselectedFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    unselectedActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    unselectedDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     focusFocusRingColor: import("../../../FtCssVariables").FtCssVariable;
@@ -15,0 +16,0 @@ focusOutlineOffset: import("../../../FtCssVariables").FtCssVariable;

build/generated/ts/components/radio.js

@@ -5,14 +5,15 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
 export const radio = {
-    labelColor: FtCssVariableFactory.extend("--ft-radio-label-color", "", semantic.contentGlobalPrimary),
-    selectedColor: FtCssVariableFactory.extend("--ft-radio-selected-color", "", semantic.contentActionPrimary),
+    color: FtCssVariableFactory.extend("--ft-radio-color", "", semantic.contentGlobalPrimary),
+    selectedRadioColor: FtCssVariableFactory.extend("--ft-radio-selected-radio-color", "", semantic.contentActionPrimary),
     selectedStateLayerColor: FtCssVariableFactory.extend("--ft-radio-selected-state-layer-color", "", semantic.contentActionPrimary),
-    selectedStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-radio-selected-state-layer-opacity-hover", "", foundation.opacity16),
-    selectedStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-radio-selected-state-layer-opacity-focus", "", foundation.opacity16),
-    selectedStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-radio-selected-state-layer-opacity-active", "", foundation.opacity24),
-    selectedComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-radio-selected-component-opacity-disabled", "", foundation.opacity40),
-    unselectedStateLayerColor: FtCssVariableFactory.extend("--ft-radio-unselected-state-layer-color", "", foundation.colorGray80),
-    unselectedStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-radio-unselected-state-layer-opacity-hover", "", foundation.opacity16),
-    unselectedStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-radio-unselected-state-layer-opacity-focus", "", foundation.opacity16),
-    unselectedStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-radio-unselected-state-layer-opacity-active", "", foundation.opacity24),
-    unselectedComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-radio-unselected-component-opacity-disabled", "", foundation.opacity40),
+    selectedHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-radio-selected-hover-state-layer-opacity", "", foundation.opacity16),
+    selectedFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-radio-selected-focus-state-layer-opacity", "", foundation.opacity16),
+    selectedActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-radio-selected-active-state-layer-opacity", "", foundation.opacity24),
+    selectedDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-radio-selected-disabled-component-opacity", "", foundation.opacity40),
+    unselectedStateLayerColor: FtCssVariableFactory.extend("--ft-radio-unselected-state-layer-color", "", semantic.borderInputPrimary),
+    unselectedBorderColor: FtCssVariableFactory.extend("--ft-radio-unselected-border-color", "", semantic.borderInputPrimary),
+    unselectedHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-radio-unselected-hover-state-layer-opacity", "", foundation.opacity16),
+    unselectedFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-radio-unselected-focus-state-layer-opacity", "", foundation.opacity16),
+    unselectedActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-radio-unselected-active-state-layer-opacity", "", foundation.opacity24),
+    unselectedDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-radio-unselected-disabled-component-opacity", "", foundation.opacity40),
     focusFocusRingColor: FtCssVariableFactory.extend("--ft-radio-focus-focus-ring-color", "", semantic.borderActionFocusRing),
@@ -19,0 +20,0 @@ focusOutlineOffset: FtCssVariableFactory.create("--ft-radio-focus-outline-offset", "", "SIZE", "3px"),

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

@@ -10,2 +10,14 @@ export declare const switch_: {
     labelVerticalPadding: import("../../../FtCssVariables").FtCssVariable;
+    offHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offColor: import("../../../FtCssVariables").FtCssVariable;
+    offStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    onHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onColor: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
     iconHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
@@ -16,14 +28,2 @@ iconVerticalPadding: import("../../../FtCssVariables").FtCssVariable;
     optionBorderRadius: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    offComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
-    offColor: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    onComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
-    onColor: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/switch.js

@@ -13,2 +13,14 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     labelVerticalPadding: FtCssVariableFactory.extend("--ft-switch-label-vertical-padding", "", foundation.spacing1),
+    offHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-switch-off-hover-state-layer-opacity", "", foundation.opacity8),
+    offFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-switch-off-focus-state-layer-opacity", "", foundation.opacity8),
+    offActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-switch-off-active-state-layer-opacity", "", foundation.opacity16),
+    offDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-switch-off-disabled-component-opacity", "", foundation.opacity40),
+    offColor: FtCssVariableFactory.extend("--ft-switch-off-color", "", semantic.contentGlobalSubtle),
+    offStateLayerColor: FtCssVariableFactory.extend("--ft-switch-off-state-layer-color", "", semantic.contentGlobalSubtle),
+    onHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-switch-on-hover-state-layer-opacity", "", foundation.opacity8),
+    onFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-switch-on-focus-state-layer-opacity", "", foundation.opacity8),
+    onActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-switch-on-active-state-layer-opacity", "", foundation.opacity16),
+    onDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-switch-on-disabled-component-opacity", "", foundation.opacity40),
+    onColor: FtCssVariableFactory.extend("--ft-switch-on-color", "", semantic.contentActionPrimary),
+    onStateLayerColor: FtCssVariableFactory.extend("--ft-switch-on-state-layer-color", "", semantic.contentActionPrimary),
     iconHorizontalPadding: FtCssVariableFactory.extend("--ft-switch-icon-horizontal-padding", "", foundation.spacing1),
@@ -18,15 +30,3 @@ iconVerticalPadding: FtCssVariableFactory.extend("--ft-switch-icon-vertical-padding", "", foundation.spacing1),
     focusFocusRingColor: FtCssVariableFactory.extend("--ft-switch-focus-focus-ring-color", "", semantic.borderActionFocusRing),
-    optionBorderRadius: FtCssVariableFactory.extend("--ft-switch-option-border-radius", "", foundation.borderRadiusS),
-    offStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-switch-off-state-layer-opacity-hover", "", foundation.opacity8),
-    offStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-switch-off-state-layer-opacity-focus", "", foundation.opacity8),
-    offStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-switch-off-state-layer-opacity-active", "", foundation.opacity16),
-    offComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-switch-off-component-opacity-disabled", "", foundation.opacity40),
-    offColor: FtCssVariableFactory.extend("--ft-switch-off-color", "", semantic.contentGlobalSubtle),
-    offStateLayerColor: FtCssVariableFactory.extend("--ft-switch-off-state-layer-color", "", semantic.contentGlobalSubtle),
-    onStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-switch-on-state-layer-opacity-hover", "", foundation.opacity8),
-    onStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-switch-on-state-layer-opacity-focus", "", foundation.opacity8),
-    onStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-switch-on-state-layer-opacity-active", "", foundation.opacity16),
-    onComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-switch-on-component-opacity-disabled", "", foundation.opacity40),
-    onColor: FtCssVariableFactory.extend("--ft-switch-on-color", "", semantic.contentActionPrimary),
-    onStateLayerColor: FtCssVariableFactory.extend("--ft-switch-on-state-layer-color", "", semantic.contentActionPrimary)
+    optionBorderRadius: FtCssVariableFactory.extend("--ft-switch-option-border-radius", "", foundation.borderRadiusS)
 };

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

@@ -7,2 +7,14 @@ export declare const tabs: {
     labelGap: import("../../../FtCssVariables").FtCssVariable;
+    offHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offColor: import("../../../FtCssVariables").FtCssVariable;
+    offStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
+    onHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onColor: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
     iconHorizontalPadding: import("../../../FtCssVariables").FtCssVariable;
@@ -12,14 +24,2 @@ iconVerticalPadding: import("../../../FtCssVariables").FtCssVariable;
     focusFocusRingColor: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    offComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
-    offColor: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    onComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
-    onColor: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/tabs.js

@@ -10,18 +10,18 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     labelGap: FtCssVariableFactory.extend("--ft-tabs-label-gap", "", foundation.spacing1),
+    offHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-off-hover-state-layer-opacity", "", foundation.opacity8),
+    offFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-off-focus-state-layer-opacity", "", foundation.opacity8),
+    offActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-off-active-state-layer-opacity", "", foundation.opacity16),
+    offDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-tabs-off-disabled-component-opacity", "", foundation.opacity40),
+    offColor: FtCssVariableFactory.extend("--ft-tabs-off-color", "", semantic.contentGlobalSubtle),
+    offStateLayerColor: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-color", "", semantic.contentGlobalSubtle),
+    onHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-tabs-on-hover-state-layer-opacity", "", foundation.opacity8),
+    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),
+    onStateLayerColor: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-color", "", semantic.contentActionPrimary),
     iconHorizontalPadding: FtCssVariableFactory.extend("--ft-tabs-icon-horizontal-padding", "", foundation.spacing1),
     iconVerticalPadding: FtCssVariableFactory.extend("--ft-tabs-icon-vertical-padding", "", foundation.spacing4),
     focusOutlineWidth: FtCssVariableFactory.create("--ft-tabs-focus-outline-width", "", "SIZE", "2px"),
-    focusFocusRingColor: FtCssVariableFactory.extend("--ft-tabs-focus-focus-ring-color", "", semantic.borderActionFocusRing),
-    offStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-opacity-hover", "", foundation.opacity8),
-    offStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-opacity-focus", "", foundation.opacity8),
-    offStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-opacity-active", "", foundation.opacity16),
-    offComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-tabs-off-component-opacity-disabled", "", foundation.opacity40),
-    offColor: FtCssVariableFactory.extend("--ft-tabs-off-color", "", semantic.contentGlobalSubtle),
-    offStateLayerColor: FtCssVariableFactory.extend("--ft-tabs-off-state-layer-color", "", semantic.contentGlobalSubtle),
-    onStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-opacity-hover", "", foundation.opacity8),
-    onStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-opacity-focus", "", foundation.opacity8),
-    onStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-opacity-active", "", foundation.opacity16),
-    onComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-tabs-on-component-opacity-disabled", "", foundation.opacity40),
-    onColor: FtCssVariableFactory.extend("--ft-tabs-on-color", "", semantic.contentActionPrimary),
-    onStateLayerColor: FtCssVariableFactory.extend("--ft-tabs-on-state-layer-color", "", semantic.contentActionPrimary)
+    focusFocusRingColor: FtCssVariableFactory.extend("--ft-tabs-focus-focus-ring-color", "", semantic.borderActionFocusRing)
 };

build/generated/ts/components/toggle.d.ts

 export declare const toggle: {
-    offStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    offStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    offComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    offHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    offDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     offBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
     offIconColor: import("../../../FtCssVariables").FtCssVariable;
     offStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityHover: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityFocus: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerOpacityActive: import("../../../FtCssVariables").FtCssVariable;
-    onComponentOpacityDisabled: import("../../../FtCssVariables").FtCssVariable;
+    onHoverStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onFocusStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onActiveStateLayerOpacity: import("../../../FtCssVariables").FtCssVariable;
+    onDisabledComponentOpacity: import("../../../FtCssVariables").FtCssVariable;
     onBackgroundColor: import("../../../FtCssVariables").FtCssVariable;
+    onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
     onIconColor: import("../../../FtCssVariables").FtCssVariable;
-    onStateLayerColor: import("../../../FtCssVariables").FtCssVariable;
-    labelColor: import("../../../FtCssVariables").FtCssVariable;
+    color: import("../../../FtCssVariables").FtCssVariable;
     focusFocusRingColor: import("../../../FtCssVariables").FtCssVariable;
     gap: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/toggle.js

@@ -5,19 +5,19 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
 export const toggle = {
-    offStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-toggle-off-state-layer-opacity-hover", "", foundation.opacity16),
-    offStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-toggle-off-state-layer-opacity-focus", "", foundation.opacity16),
-    offStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-toggle-off-state-layer-opacity-active", "", foundation.opacity24),
-    offComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-toggle-off-component-opacity-disabled", "", foundation.opacity40),
+    offHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-toggle-off-hover-state-layer-opacity", "", foundation.opacity16),
+    offFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-toggle-off-focus-state-layer-opacity", "", foundation.opacity16),
+    offActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-toggle-off-active-state-layer-opacity", "", foundation.opacity24),
+    offDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-toggle-off-disabled-component-opacity", "", foundation.opacity40),
     offBackgroundColor: FtCssVariableFactory.extend("--ft-toggle-off-background-color", "", semantic.contentGlobalSubtle),
     offIconColor: FtCssVariableFactory.extend("--ft-toggle-off-icon-color", "", semantic.contentGlobalSubtle),
     offStateLayerColor: FtCssVariableFactory.extend("--ft-toggle-off-state-layer-color", "", semantic.contentGlobalSubtle),
-    onStateLayerOpacityHover: FtCssVariableFactory.extend("--ft-toggle-on-state-layer-opacity-hover", "", foundation.opacity16),
-    onStateLayerOpacityFocus: FtCssVariableFactory.extend("--ft-toggle-on-state-layer-opacity-focus", "", foundation.opacity16),
-    onStateLayerOpacityActive: FtCssVariableFactory.extend("--ft-toggle-on-state-layer-opacity-active", "", foundation.opacity24),
-    onComponentOpacityDisabled: FtCssVariableFactory.extend("--ft-toggle-on-component-opacity-disabled", "", foundation.opacity40),
+    onHoverStateLayerOpacity: FtCssVariableFactory.extend("--ft-toggle-on-hover-state-layer-opacity", "", foundation.opacity16),
+    onFocusStateLayerOpacity: FtCssVariableFactory.extend("--ft-toggle-on-focus-state-layer-opacity", "", foundation.opacity16),
+    onActiveStateLayerOpacity: FtCssVariableFactory.extend("--ft-toggle-on-active-state-layer-opacity", "", foundation.opacity24),
+    onDisabledComponentOpacity: FtCssVariableFactory.extend("--ft-toggle-on-disabled-component-opacity", "", foundation.opacity40),
     onBackgroundColor: FtCssVariableFactory.extend("--ft-toggle-on-background-color", "", semantic.contentActionPrimary),
+    onStateLayerColor: FtCssVariableFactory.extend("--ft-toggle-on-state-layer-color", "", semantic.contentActionPrimary),
     onIconColor: FtCssVariableFactory.extend("--ft-toggle-on-icon-color", "", semantic.contentActionPrimary),
-    onStateLayerColor: FtCssVariableFactory.extend("--ft-toggle-on-state-layer-color", "", semantic.contentActionPrimary),
-    labelColor: FtCssVariableFactory.extend("--ft-toggle-label-color", "", semantic.contentGlobalPrimary),
+    color: FtCssVariableFactory.extend("--ft-toggle-color", "", semantic.contentGlobalPrimary),
     focusFocusRingColor: FtCssVariableFactory.extend("--ft-toggle-focus-focus-ring-color", "", semantic.borderActionFocusRing),
     gap: FtCssVariableFactory.extend("--ft-toggle-gap", "", foundation.spacing3)
 };

build/generated/ts/components/tooltip.d.ts

@@ -5,6 +5,8 @@ export declare const tooltip: {
     borderRadius: import("../../../FtCssVariables").FtCssVariable;
-    label: import("../../../FtCssVariables").FtCssVariable;
-    background: import("../../../FtCssVariables").FtCssVariable;
+    color: import("../../../FtCssVariables").FtCssVariable;
+    backgroundColor: import("../../../FtCssVariables").FtCssVariable;
     backgroundOpacity: import("../../../FtCssVariables").FtCssVariable;
     shadow: import("../../../FtCssVariables").FtCssVariable;
+    maxWidth: import("../../../FtCssVariables").FtCssVariable;
+    gap: import("../../../FtCssVariables").FtCssVariable;
 };

build/generated/ts/components/tooltip.js

@@ -8,6 +8,8 @@ import { FtCssVariableFactory } from "../../../FtCssVariables";
     borderRadius: FtCssVariableFactory.extend("--ft-tooltip-border-radius", "", foundation.borderRadiusS),
-    label: FtCssVariableFactory.extend("--ft-tooltip-label", "", semantic.contentGlobalOnColor),
-    background: FtCssVariableFactory.extend("--ft-tooltip-background", "", semantic.contentGlobalPrimary),
+    color: FtCssVariableFactory.extend("--ft-tooltip-color", "", semantic.contentGlobalOnColor),
+    backgroundColor: FtCssVariableFactory.extend("--ft-tooltip-background-color", "", semantic.contentGlobalPrimary),
     backgroundOpacity: FtCssVariableFactory.extend("--ft-tooltip-background-opacity", "", foundation.opacity80),
-    shadow: FtCssVariableFactory.extend("--ft-tooltip-shadow", "", foundation.shadowElevation03)
+    shadow: FtCssVariableFactory.extend("--ft-tooltip-shadow", "", foundation.shadowElevation03),
+    maxWidth: FtCssVariableFactory.create("--ft-tooltip-max-width", "", "SIZE", "256px"),
+    gap: FtCssVariableFactory.extend("--ft-tooltip-gap", "", foundation.spacing05)
 };

build/generated/ts/foundation.d.ts

@@ -197,2 +197,3 @@ export declare const foundation: {
     shadowElevation24: import("../../FtCssVariables").FtCssVariable;
+    underline: import("../../FtCssVariables").FtCssVariable;
 };
@@ -298,2 +299,13 @@ export declare const typographyDisplay: {
 };
+export declare const typographyBody2MediumUnderline: {
+    fontFamily: import("../../FtCssVariables").FtCssVariable;
+    fontWeight: import("../../FtCssVariables").FtCssVariable;
+    lineHeight: import("../../FtCssVariables").FtCssVariable;
+    fontSize: import("../../FtCssVariables").FtCssVariable;
+    letterSpacing: import("../../FtCssVariables").FtCssVariable;
+    paragraphSpacing: import("../../FtCssVariables").FtCssVariable;
+    paragraphIndent: import("../../FtCssVariables").FtCssVariable;
+    textCase: import("../../FtCssVariables").FtCssVariable;
+    textDecoration: import("../../FtCssVariables").FtCssVariable;
+};
 export declare const typographyBody2Semibold: {
@@ -575,2 +587,13 @@ fontFamily: import("../../FtCssVariables").FtCssVariable;
     };
+    "body-2-medium-underline": {
+        fontFamily: import("../../FtCssVariables").FtCssVariable;
+        fontWeight: import("../../FtCssVariables").FtCssVariable;
+        lineHeight: import("../../FtCssVariables").FtCssVariable;
+        fontSize: import("../../FtCssVariables").FtCssVariable;
+        letterSpacing: import("../../FtCssVariables").FtCssVariable;
+        paragraphSpacing: import("../../FtCssVariables").FtCssVariable;
+        paragraphIndent: import("../../FtCssVariables").FtCssVariable;
+        textCase: import("../../FtCssVariables").FtCssVariable;
+        textDecoration: import("../../FtCssVariables").FtCssVariable;
+    };
     "body-2-semibold": {
@@ -754,2 +777,2 @@ fontFamily: import("../../FtCssVariables").FtCssVariable;
 export declare const typographyVariants: string[];
-export type TypographyVariants = "display" | "title-1" | "title-2" | "title-3" | "body-1" | "body-2" | "label-1" | "label-2" | "caption-1" | "caption-2" | "caption-3";
+export type TypographyVariants = "display" | "title-1" | "title-2" | "title-3" | "body-1" | "body-2" | "body-2-underline" | "label-1" | "label-2" | "caption-1" | "caption-2" | "caption-3";

build/generated/ts/foundation.js

@@ -66,17 +66,17 @@ import { FtCssVariableFactory } from "../../FtCssVariables";
     colorGreen700: FtCssVariableFactory.create("--ft-color-green-700", "", "COLOR", "#030d0a"),
-    colorOrange0: FtCssVariableFactory.create("--ft-color-orange-0", "", "COLOR", "#ee8d17"),
-    colorOrange10: FtCssVariableFactory.create("--ft-color-orange-10", "", "COLOR", "#fef6ec"),
-    colorOrange20: FtCssVariableFactory.create("--ft-color-orange-20", "", "COLOR", "#fbe7cd"),
-    colorOrange30: FtCssVariableFactory.create("--ft-color-orange-30", "", "COLOR", "#f9d8af"),
-    colorOrange40: FtCssVariableFactory.create("--ft-color-orange-40", "", "COLOR", "#f7c991"),
-    colorOrange50: FtCssVariableFactory.create("--ft-color-orange-50", "", "COLOR", "#f5ba72"),
-    colorOrange60: FtCssVariableFactory.create("--ft-color-orange-60", "", "COLOR", "#f2ab54"),
-    colorOrange70: FtCssVariableFactory.create("--ft-color-orange-70", "", "COLOR", "#f09c35"),
-    colorOrange100: FtCssVariableFactory.create("--ft-color-orange-100", "", "COLOR", "#cf7b14"),
-    colorOrange200: FtCssVariableFactory.create("--ft-color-orange-200", "", "COLOR", "#b06811"),
-    colorOrange300: FtCssVariableFactory.create("--ft-color-orange-300", "", "COLOR", "#90560e"),
-    colorOrange400: FtCssVariableFactory.create("--ft-color-orange-400", "", "COLOR", "#71430b"),
-    colorOrange500: FtCssVariableFactory.create("--ft-color-orange-500", "", "COLOR", "#523108"),
-    colorOrange600: FtCssVariableFactory.create("--ft-color-orange-600", "", "COLOR", "#331e05"),
-    colorOrange700: FtCssVariableFactory.create("--ft-color-orange-700", "", "COLOR", "#140c02"),
+    colorOrange0: FtCssVariableFactory.create("--ft-color-orange-0", "", "COLOR", "#F2700D"),
+    colorOrange10: FtCssVariableFactory.create("--ft-color-orange-10", "", "COLOR", "#FFF7EB"),
+    colorOrange20: FtCssVariableFactory.create("--ft-color-orange-20", "", "COLOR", "#FFEDD6"),
+    colorOrange30: FtCssVariableFactory.create("--ft-color-orange-30", "", "COLOR", "#FFDDB2"),
+    colorOrange40: FtCssVariableFactory.create("--ft-color-orange-40", "", "COLOR", "#FECB90"),
+    colorOrange50: FtCssVariableFactory.create("--ft-color-orange-50", "", "COLOR", "#FCB76E"),
+    colorOrange60: FtCssVariableFactory.create("--ft-color-orange-60", "", "COLOR", "#F9A34D"),
+    colorOrange70: FtCssVariableFactory.create("--ft-color-orange-70", "", "COLOR", "#F68B2C"),
+    colorOrange100: FtCssVariableFactory.create("--ft-color-orange-100", "", "COLOR", "#D35909"),
+    colorOrange200: FtCssVariableFactory.create("--ft-color-orange-200", "", "COLOR", "#B74706"),
+    colorOrange300: FtCssVariableFactory.create("--ft-color-orange-300", "", "COLOR", "#913503"),
+    colorOrange400: FtCssVariableFactory.create("--ft-color-orange-400", "", "COLOR", "#6F2601"),
+    colorOrange500: FtCssVariableFactory.create("--ft-color-orange-500", "", "COLOR", "#4D1800"),
+    colorOrange600: FtCssVariableFactory.create("--ft-color-orange-600", "", "COLOR", "#330F00"),
+    colorOrange700: FtCssVariableFactory.create("--ft-color-orange-700", "", "COLOR", "#140600"),
     colorRed0: FtCssVariableFactory.create("--ft-color-red-0", "", "COLOR", "#b40e2c"),
@@ -198,3 +198,4 @@ colorRed10: FtCssVariableFactory.create("--ft-color-red-10", "", "COLOR", "#f9ebed"),
     shadowElevation16: FtCssVariableFactory.create("--ft-shadow-elevation-16", "", "SHADOW", "0px 28px 52px 0px rgba(0,0,0,0.06), 0px 16px 29px 0px rgba(0,0,0,0.14), 0px 14px 15px 0px rgba(0,0,0,0.06)"),
-    shadowElevation24: FtCssVariableFactory.create("--ft-shadow-elevation-24", "", "SHADOW", "0px 40px 76px 0px rgba(0,0,0,0.06), 0px 24px 41px 0px rgba(0,0,0,0.14), 0px 22px 23px 0px rgba(0,0,0,0.06)")
+    shadowElevation24: FtCssVariableFactory.create("--ft-shadow-elevation-24", "", "SHADOW", "0px 40px 76px 0px rgba(0,0,0,0.06), 0px 24px 41px 0px rgba(0,0,0,0.14), 0px 22px 23px 0px rgba(0,0,0,0.06)"),
+    underline: FtCssVariableFactory.create("--ft-underline", "", "UNKNOWN", "underline")
 };
@@ -300,2 +301,13 @@ export const typographyDisplay = {
 };
+export const typographyBody2MediumUnderline = {
+    fontFamily: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-fontFamily", "", "UNKNOWN", "Inter"),
+    fontWeight: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-fontWeight", "", "UNKNOWN", "500"),
+    lineHeight: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-lineHeight", "", "SIZE", "135%"),
+    fontSize: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-fontSize", "", "SIZE", "0.875rem"),
+    letterSpacing: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-letterSpacing", "", "SIZE", "normal"),
+    paragraphSpacing: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-paragraphSpacing", "", "UNKNOWN", "normal"),
+    paragraphIndent: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-paragraphIndent", "", "UNKNOWN", "0"),
+    textCase: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-textCase", "", "UNKNOWN", "none"),
+    textDecoration: FtCssVariableFactory.create("--ft-typography-body-2-medium-underline-textDecoration", "", "UNKNOWN", "underline")
+};
 export const typographyBody2Semibold = {
@@ -487,2 +499,3 @@ fontFamily: FtCssVariableFactory.create("--ft-typography-body-2-semibold-fontFamily", "", "UNKNOWN", "Inter"),
     ["body-2-medium"]: typographyBody2Medium,
+    ["body-2-medium-underline"]: typographyBody2MediumUnderline,
     ["body-2-semibold"]: typographyBody2Semibold,
@@ -505,2 +518,2 @@ ["label-1-medium"]: typographyLabel1Medium,
 };
-export const typographyVariants = ["display", "title-1", "title-2", "title-3", "body-1", "body-2", "label-1", "label-2", "caption-1", "caption-2", "caption-3"];
+export const typographyVariants = ["display", "title-1", "title-2", "title-3", "body-1", "body-2", "body-2-underline", "label-1", "label-2", "caption-1", "caption-2", "caption-3"];

build/generated/ts/index.d.ts

 export * from "./foundation";
 export * from "./semantic";
 export * from "./components/button";
+export * from "./components/banner";
+export * from "./components/breadcrumb";
+export * from "./components/page-header";
+export * from "./components/modal";
+export * from "./components/text-input";
+export * from "./components/text-area";
 export * from "./components/floating-menu";
+export * from "./components/combobox-single-select";
+export * from "./components/combobox-multi-select";
+export * from "./components/popover";
 export * from "./components/tabs";
@@ -10,2 +19,3 @@ export * from "./components/collapsible";
 export * from "./components/chip";
+export * from "./components/border";
 export * from "./components/notice";
@@ -12,0 +22,0 @@ export * from "./components/checkbox";

build/generated/ts/index.js

 export * from "./foundation";
 export * from "./semantic";
 export * from "./components/button";
+export * from "./components/banner";
+export * from "./components/breadcrumb";
+export * from "./components/page-header";
+export * from "./components/modal";
+export * from "./components/text-input";
+export * from "./components/text-area";
 export * from "./components/floating-menu";
+export * from "./components/combobox-single-select";
+export * from "./components/combobox-multi-select";
+export * from "./components/popover";
 export * from "./components/tabs";
@@ -10,2 +19,3 @@ export * from "./components/collapsible";
 export * from "./components/chip";
+export * from "./components/border";
 export * from "./components/notice";
@@ -12,0 +22,0 @@ export * from "./components/checkbox";

build/generated/ts/semantic.d.ts

 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;
@@ -11,0 +7,0 @@ backgroundGlobalSurface: import("../../FtCssVariables").FtCssVariable;

build/generated/ts/semantic.js

@@ -5,9 +5,5 @@ import { FtCssVariableFactory } from "../../FtCssVariables";
     backgroundActionPrimary: FtCssVariableFactory.extend("--ft-background-action-primary", "Used as backgorund of primary action components.", foundation.colorBrand0),
-    backgroundErrorPrimary: FtCssVariableFactory.extend("--ft-background-error-primary", "Used as background of error components.", foundation.colorRed0),
     backgroundErrorSubtle: FtCssVariableFactory.extend("--ft-background-error-subtle", "Used as background of subtle error components.", foundation.colorRed10),
-    backgroundInfoPrimary: FtCssVariableFactory.extend("--ft-background-info-primary", "Used as background of information components.", foundation.colorCyan200),
     backgroundInfoSubtle: FtCssVariableFactory.extend("--ft-background-info-subtle", "Used as background of subtle information components.", foundation.colorCyan10),
-    backgroundWarningPrimary: FtCssVariableFactory.extend("--ft-background-warning-primary", "Used as background of warning components.", foundation.colorOrange300),
     backgroundWarningSubtle: FtCssVariableFactory.extend("--ft-background-warning-subtle", "Used as background of subtle information components.", foundation.colorOrange10),
-    backgroundSuccessPrimary: FtCssVariableFactory.extend("--ft-background-success-primary", "Used as background of success components.", foundation.colorGreen200),
     backgroundSuccessSubtle: FtCssVariableFactory.extend("--ft-background-success-subtle", "Used as background of subtle success components.", foundation.colorGreen10),
@@ -18,6 +14,6 @@ backgroundGlobalSurface: FtCssVariableFactory.extend("--ft-background-global-surface", "Used as app background.", foundation.colorWhite),
     contentActionPrimary: FtCssVariableFactory.extend("--ft-content-action-primary", "Used on label of primary action on light surface.", foundation.colorBrand0),
-    contentWarningPrimary: FtCssVariableFactory.extend("--ft-content-warning-primary", "Used on label of warning messages on light surface.", foundation.colorOrange300),
+    contentWarningPrimary: FtCssVariableFactory.extend("--ft-content-warning-primary", "Used on label of warning messages on light surface.", foundation.colorOrange200),
     contentWarningIconOnly: FtCssVariableFactory.extend("--ft-content-warning-icon-only", "Used on warning status icons alone", foundation.colorOrange0),
     contentErrorPrimary: FtCssVariableFactory.extend("--ft-content-error-primary", "Used on label of error messages on light surface.", foundation.colorRed0),
-    contentErrorIconOnly: FtCssVariableFactory.extend("--ft-content-error-icon-only", "Used on error status icons alone", foundation.colorRed0),
+    contentErrorIconOnly: FtCssVariableFactory.extend("--ft-content-error-icon-only", "Used on error status icons alone", foundation.colorRed70),
     contentInfoPrimary: FtCssVariableFactory.extend("--ft-content-info-primary", "Used on label of information messages on light surface.", foundation.colorCyan200),
@@ -33,3 +29,3 @@ contentInfoIconOnly: FtCssVariableFactory.extend("--ft-content-info-icon-only", "Used on info status icons alone", foundation.colorCyan0),
     borderActionFocusRing: FtCssVariableFactory.extend("--ft-border-action-focus-ring", "Focus ring is an additional border to indicate focus-visible state.", foundation.colorCyan0),
-    borderWarningPrimary: FtCssVariableFactory.extend("--ft-border-warning-primary", "Used as border for text fields in warning state and for buttons in warning color", foundation.colorOrange300),
+    borderWarningPrimary: FtCssVariableFactory.extend("--ft-border-warning-primary", "Used as border for text fields in warning state and for buttons in warning color", foundation.colorOrange200),
     borderWarningSubtle: FtCssVariableFactory.extend("--ft-border-warning-subtle", "Used as border for warning components.", foundation.colorOrange30),
@@ -36,0 +32,0 @@ borderSuccessPrimary: FtCssVariableFactory.extend("--ft-border-success-primary", "Used as border for success buttons.", foundation.colorGreen200),

package.json

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

253441

increased by23.44%

Number of package files

60

increased by50%

Lines of code

3455

increased by21.83%

No dependency changes