Merge pull request #1250 from thunderstore-io/10-31-rename_subtle_mod…

…ifier_to_ghost

Rename subtle modifier to ghost

apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx

@@ -16,11 +16,7 @@ export function DevelopersDropDown() {
     <>
       <NewDropDown
         trigger={
-          <NewButton
-            csSize="big"
-            csVariant="secondary"
-            csModifiers={["subtle"]}
-          >
+          <NewButton csSize="big" csVariant="secondary" csModifiers={["ghost"]}>
             Developers
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faCaretDown} />

apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx

@@ -44,7 +44,7 @@ export function MobileUserPopoverContent(props: { user: CurrentUser }) {
           aria-label="Back"
           csSize="medium"
           csVariant="secondary"
-          csModifiers={["subtle", "dimmed"]}
+          csModifiers={["ghost", "dimmed"]}
           icon={faLongArrowLeft}
         />
       }

apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx

@@ -59,7 +59,7 @@ export function Navigation(props: {
             linkId="Communities"
             csSize="big"
             csVariant="secondary"
-            csModifiers={["subtle"]}
+            csModifiers={["ghost"]}
           >
             Communities
           </LinkButton>
@@ -173,7 +173,7 @@ export function MobileNavigationMenu() {
               aria-label="Back to previous menu"
               csSize="medium"
               csVariant="secondary"
-              csModifiers={["subtle", "dimmed"]}
+              csModifiers={["ghost", "dimmed"]}
               icon={faLongArrowLeft}
             />
           }

apps/cyberstorm-storybook/stories/newComponents/LinkButton.stories.tsx

@@ -57,7 +57,7 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
       </LinkButton>
       <LinkButton
         csVariant="secondary"
-        csModifiers={["subtle"]}
+        csModifiers={["ghost"]}
         {...args}
         primitiveType="link"
         href="https://example.com"
@@ -161,7 +161,7 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
       </LinkButton>
       <LinkButton
         csVariant="secondary"
-        csModifiers={["subtle"]}
+        csModifiers={["ghost"]}
         {...args}
         primitiveType="cyberstormLink"
         linkId="Communities"

packages/cyberstorm-theme/src/components/Button/Button.css

@@ -77,11 +77,11 @@
   }
 
   /* MODIFIERS */
-  .ts-button:where(:not(.ts-variant--special)):where(.ts-modifier--subtle):where(:not(:hover, :active)) {
+  .ts-button:where(:not(.ts-variant--special)):where(.ts-modifier--ghost):where(:not(:hover, :active)) {
     --button-background-color: transparent;
   }
 
-  .ts-button:where(.ts-variant--special):where(.ts-modifier--subtle):where(:not(:hover, :active)) {
+  .ts-button:where(.ts-variant--special):where(.ts-modifier--ghost):where(:not(:hover, :active)) {
     background: transparent;
   }
 

packages/cyberstorm-theme/src/components/Button/Button.ts

@@ -24,7 +24,7 @@ export const ButtonSizesList = ["big", "medium", "small", "xsmall"] as const;
 export type ButtonSizes = "big" | "medium" | "small" | "xsmall";
 
 // Modifiers
-export const ButtonModifiersList = ["disabled", "subtle", "dimmed"] as const;
+export const ButtonModifiersList = ["disabled", "ghost", "dimmed"] as const;
 // There is an issue with Typescript (eslint) and prettier disagreeing if
 // the type should have parentheses
 // prettier-ignore

packages/cyberstorm-theme/src/components/Button/IconButton.css

@@ -67,11 +67,11 @@
   }
 
   /* MODIFIERS */
-  .ts-iconbutton:where(:not(.ts-variant--special)):where(.ts-modifier--subtle):where(:not(:hover, :active)) {
+  .ts-iconbutton:where(:not(.ts-variant--special)):where(.ts-modifier--ghost):where(:not(:hover, :active)) {
     --iconbutton-background-color: transparent;
   }
 
-  .ts-iconbutton:where(.ts-variant--special):where(.ts-modifier--subtle):where(:not(:hover, :active)) {
+  .ts-iconbutton:where(.ts-variant--special):where(.ts-modifier--ghost):where(:not(:hover, :active)) {
     background: transparent;
   }
 

packages/cyberstorm-theme/src/components/Button/IconButton.ts

@@ -26,11 +26,7 @@ export const IconButtonSizesList = ["medium", "small", "xsmall"] as const;
 export type IconButtonSizes = "medium" | "small" | "xsmall";
 
 // Modifiers
-export const IconButtonModifiersList = [
-  "disabled",
-  "subtle",
-  "dimmed",
-] as const;
+export const IconButtonModifiersList = ["disabled", "ghost", "dimmed"] as const;
 // There is an issue with Typescript (eslint) and prettier disagreeing if
 // the type should have parentheses
 // prettier-ignore

packages/cyberstorm-theme/src/components/DropDown/DropDown.ts

@@ -8,7 +8,7 @@ export const DropDownSizesList = ["medium"] as const;
 export type DropDownSizes = "medium";
 
 // Modifiers
-export const DropDownModifiersList = ["disabled", "subtle", "dimmed"] as const;
+export const DropDownModifiersList = ["disabled", "ghost", "dimmed"] as const;
 // There is an issue with Typescript (eslint) and prettier disagreeing if
 // the type should have parentheses
 // prettier-ignore
@@ -26,7 +26,7 @@ export type DropDownItemSizes = "medium";
 // Modifiers
 export const DropDownItemModifiersList = [
   "disabled",
-  "subtle",
+  "ghost",
   "dimmed",
 ] as const;
 // There is an issue with Typescript (eslint) and prettier disagreeing if
@@ -44,7 +44,7 @@ export const DropDownDividerSizesList = ["medium"] as const;
 export type DropDownDividerSizes = "medium";
 
 // Modifiers
-export const DropDownDividerModifiersList = ["subtle", "dimmed"] as const;
+export const DropDownDividerModifiersList = ["ghost", "dimmed"] as const;
 // There is an issue with Typescript (eslint) and prettier disagreeing if
 // the type should have parentheses
 // prettier-ignore

packages/cyberstorm-theme/src/components/Heading/Heading.ts

@@ -12,7 +12,7 @@ export const HeadingSizesList = ["1", "2", "3", "4", "5", "6"] as const;
 export type HeadingSizes = "1" | "2" | "3" | "4" | "5" | "6";
 
 // Modifiers
-export const HeadingModifiersList = ["subtle", "dimmed"] as const;
+export const HeadingModifiersList = ["ghost", "dimmed"] as const;
 // There is an issue with Typescript (eslint) and prettier disagreeing if
 // the type should have parentheses
 // prettier-ignore

packages/cyberstorm-theme/src/components/TextInput/TextInput.ts

@@ -7,7 +7,7 @@ export const TextInputSizesList = ["default", "textarea", "small"] as const;
 export type TextInputSizes = "default" | "textarea" | "small";
 
 // Modifiers
-export const TextInputModifiersList = ["disabled", "subtle", "dimmed"] as const;
+export const TextInputModifiersList = ["disabled", "ghost", "dimmed"] as const;
 // There is an issue with Typescript (eslint) and prettier disagreeing if
 // the type should have parentheses
 // prettier-ignore

packages/cyberstorm/src/newComponents/Menu/Menu.tsx

@@ -50,7 +50,7 @@ export function Menu(props: Props) {
                 popovertargetaction: "close",
               }}
               csVariant="secondary"
-              csModifiers={["subtle", "dimmed"]}
+              csModifiers={["ghost", "dimmed"]}
               tooltipText="Close"
               aria-label="Close"
               icon={faXmark}

packages/cyberstorm/src/newComponents/Modal/Modal.tsx

@@ -37,7 +37,7 @@ export function Modal(props: Props) {
           }}
           csVariant="secondary"
           csSize="medium"
-          csModifiers={["subtle"]}
+          csModifiers={["ghost"]}
           tooltipText="Close"
           icon={faXmark}
         />