chore: remove filled icon style setting

app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts

@@ -67,15 +67,5 @@ describe(
         anvilSnapshot.matchSnapshotForDeployMode(`AppThemingCorner${corner}`);
       });
     });
-
-    it("6. Icon Style", () => {
-      ["Filled", "Outlined"].forEach((iconStyle) => {
-        anvilSnapshot.setIconStyle(iconStyle);
-
-        anvilSnapshot.matchSnapshotForCanvasMode(`AppThemingIcon${iconStyle}`);
-        anvilSnapshot.matchSnapshotForPreviewMode(`AppThemingIcon${iconStyle}`);
-        anvilSnapshot.matchSnapshotForDeployMode(`AppThemingIcon${iconStyle}`);
-      });
-    });
   },
 );

app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts

@@ -19,7 +19,6 @@ export class AnvilSnapshot {
     densityOptions: "[data-testid=t--anvil-theme-settings-density] > div",
     sizingOptions: "[data-testid=t--anvil-theme-settings-sizing] > div",
     cornersOptions: "[data-testid=t--anvil-theme-settings-corners] > div",
-    iconStyleOptions: "[data-testid=t--anvil-theme-settings-icon-style] > div",
   };
 
   /**
@@ -163,14 +162,6 @@ export class AnvilSnapshot {
     });
   };
 
-  public setIconStyle = (iconStyle: string) => {
-    this.updateThemeOption(() => {
-      cy.get(this.locators.iconStyleOptions)
-        .contains(iconStyle)
-        .click({ force: true });
-    });
-  };
-
   public updateThemeOption = (callback: () => void) => {
     this.appSettings.OpenAppSettings();
     this.appSettings.GoToThemeSettings();

app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx

@@ -10,7 +10,7 @@ import {
 } from "./";
 
 import type { ColorMode } from "../../color";
-import type { TokenSource, IconStyle } from "../../token";
+import type { TokenSource } from "../../token";
 
 const tokensAccessor = new TokensAccessor({
   ...(defaultTokens as TokenSource),
@@ -22,14 +22,12 @@ export interface UseThemeProps {
   borderRadius?: string;
   userDensity?: number;
   userSizing?: number;
-  iconStyle?: IconStyle;
 }
 
 export function useTheme(props: UseThemeProps = {}) {
   const {
     borderRadius,
     colorMode = "light",
-    iconStyle = "outlined",
     seedColor,
     userDensity = 1,
     userSizing = 1,
@@ -88,9 +86,6 @@ export function useTheme(props: UseThemeProps = {}) {
     tokensAccessor.updateOuterSpacing(outerSpacing);
     tokensAccessor.updateInnerSpacing(innerSpacing);
 
-    // Icon style
-    tokensAccessor.updateIconStyle(iconStyle);
-
     // Icon size
     if (iconSize != null) {
       tokensAccessor.updateIconSize(iconSize);
@@ -110,7 +105,6 @@ export function useTheme(props: UseThemeProps = {}) {
       ...tokensAccessor.getSizing(),
       ...tokensAccessor.getOuterSpacing(),
       ...tokensAccessor.getInnerSpacing(),
-      iconStyle: tokensAccessor.getIconStyle(),
       ...tokensAccessor.getIconSize(),
       ...tokensAccessor.getStrokeWidth(),
     };
@@ -122,7 +116,6 @@ export function useTheme(props: UseThemeProps = {}) {
     sizing,
     outerSpacing,
     innerSpacing,
-    iconStyle,
     iconSize,
     strokeWidth,
   ]);

app/client/packages/design-system/theming/src/theme/src/types.ts

@@ -2,12 +2,11 @@ import type { ReactNode } from "react";
 import type { CSSProperties } from "react";
 
 import type { ColorMode } from "../../color";
-import type { Typography, ThemeToken, IconStyle } from "../../token";
+import type { Typography, ThemeToken } from "../../token";
 
 export type Theme = ThemeToken & {
   typography?: Typography;
   colorMode?: ColorMode;
-  iconStyle?: IconStyle;
 };
 
 export interface ThemeProviderProps {

app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts

@@ -8,7 +8,6 @@ import type {
   TokenSource,
   TokenType,
   Typography,
-  IconStyle,
 } from "./types";
 
 export class TokensAccessor {
@@ -23,7 +22,6 @@ export class TokensAccessor {
   private innerSpacing?: TokenObj;
   private sizing?: TokenObj;
   private zIndex?: TokenObj;
-  private iconStyle?: IconStyle;
   private strokeWidth?: TokenObj;
   private iconSize?: TokenObj;
 
@@ -33,7 +31,6 @@ export class TokensAccessor {
     boxShadow,
     colorMode,
     iconSize,
-    iconStyle,
     innerSpacing,
     opacity,
     outerSpacing,
@@ -54,7 +51,6 @@ export class TokensAccessor {
     this.innerSpacing = innerSpacing;
     this.typography = typography;
     this.zIndex = zIndex;
-    this.iconStyle = iconStyle;
     this.strokeWidth = strokeWidth;
     this.iconSize = iconSize;
   }
@@ -112,10 +108,6 @@ export class TokensAccessor {
     this.sizing = sizing;
   };
 
-  updateIconStyle = (iconStyle: IconStyle) => {
-    this.iconStyle = iconStyle;
-  };
-
   updateStrokeWidth = (strokeWidth: TokenObj) => {
     this.strokeWidth = strokeWidth;
   };
@@ -139,7 +131,6 @@ export class TokensAccessor {
       ...this.getStrokeWidth(),
       ...this.getIconSize(),
       colorMode: this.getColorMode(),
-      iconStyle: this.getIconStyle(),
     };
   };
 
@@ -224,10 +215,6 @@ export class TokensAccessor {
     return this.colorMode;
   };
 
-  getIconStyle = () => {
-    return this.iconStyle;
-  };
-
   getStrokeWidth = () => {
     if (this.strokeWidth == null) return {} as ThemeToken;
 

app/client/packages/design-system/theming/src/token/src/types.ts

@@ -34,7 +34,6 @@ export interface TokenSource {
   sizing?: TokenObj;
   outerSpacing?: TokenObj;
   innerSpacing?: TokenObj;
-  iconStyle?: IconStyle;
   strokeWidth?: TokenObj;
   iconSize?: TokenObj;
 }
@@ -106,8 +105,6 @@ export type Typography = {
   [key in keyof typeof TYPOGRAPHY_VARIANTS]: TypographyVariantMetric;
 };
 
-export type IconStyle = "outlined" | "filled";
-
 export const APP_MAX_WIDTH = {
   Unlimited: "UNLIMITED",
   Large: "LARGE",

app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx

@@ -1,32 +1,19 @@
 import type { Component, Ref } from "react";
 import React, { Suspense, forwardRef, lazy, useMemo } from "react";
-import { useThemeContext } from "@appsmith/wds-theming";
 
 import { ICONS } from "./icons";
 import styles from "./styles.module.css";
 import type { IconProps } from "./types";
 import { FallbackIcon } from "./FallbackIcon";
 
 const _Icon = (props: IconProps, ref: Ref<Component>) => {
-  const { color, filled: filledProp, name, size = "medium", ...rest } = props;
-  const theme = useThemeContext();
-  const filled = theme.iconStyle === "filled" || filledProp;
+  const { color, name, size = "medium", ...rest } = props;
 
   const Icon = useMemo(() => {
     const pascalName = ICONS[name];
 
     return lazy(async () =>
       import("@tabler/icons-react").then((module) => {
-        if (Boolean(filled)) {
-          const filledVariant = `${pascalName}Filled`;
-
-          if (filledVariant in module) {
-            return {
-              default: module[filledVariant] as React.ComponentType,
-            };
-          }
-        }
-
         if (pascalName in module) {
           return {
             default: module[pascalName] as React.ComponentType,
@@ -36,7 +23,7 @@ const _Icon = (props: IconProps, ref: Ref<Component>) => {
         return { default: FallbackIcon };
       }),
     );
-  }, [name, filled]);
+  }, [name]);
 
   return (
     <Suspense