Merge pull request #1288 from thunderstore-io/01-17-update_navigation…

…_styles

Update Navigation styles

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

@@ -19,9 +19,8 @@ export function DesktopLoginPopover() {
       popoverId={"navAccount"}
       trigger={
         <NewButton
-          csVariant="primary"
-          csSize="big"
-          rootClasses={styles.loginButton}
+          csVariant="accent"
+          csSize="small"
           {...{
             popovertarget: "navAccount",
             popovertargetaction: "open",

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

@@ -29,7 +29,7 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            rootClasses={classnames(styles.link, "ts-dropdown__item")}
+            rootClasses={"ts-dropdown__item"}
             href="/api/docs"
           >
             API Docs
@@ -38,7 +38,7 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            rootClasses={classnames(styles.link, "ts-dropdown__item")}
+            rootClasses={"ts-dropdown__item"}
             href="/package/create/docs/"
           >
             Package Format Docs
@@ -47,7 +47,7 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            rootClasses={classnames(styles.link, "ts-dropdown__item")}
+            rootClasses={"ts-dropdown__item"}
             href="/tools/manifest-v1-validator/"
           >
             Manifest Validator
@@ -56,7 +56,7 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            rootClasses={classnames(styles.link, "ts-dropdown__item")}
+            rootClasses={"ts-dropdown__item"}
             href="/tools/markdown-preview/"
           >
             Markdown Preview

apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css

@@ -67,6 +67,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+  color: var(--color-text-primary);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-body-lg);
 }
@@ -220,12 +221,11 @@ button.mobileNavItem {
 }
 
 .loginLegalText {
+  color: #8683be;
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-body-sm);
   line-height: var(--line-height-lg);
   text-align: center;
-
-  --text-color: #8683be;
 }
 
 .loginLegalTextLinks {
@@ -260,18 +260,6 @@ button.mobileNavItem {
   }
 }
 
-.getAppButton {
-  height: 2.25rem;
-  padding: 0.75rem 0.812rem;
-}
-
-.loginButton {
-  height: 2.25rem !important;
-  padding: 0.75rem !important;
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-body-md);
-}
-
 .headerRightSide {
   display: flex;
   gap: 1rem;

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

@@ -65,12 +65,11 @@ export function Navigation(props: {
           <NewButton
             primitiveType="link"
             href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
-            csSize="medium"
-            csVariant="accent"
-            rootClasses={styles.getAppButton}
+            csSize="small"
+            csVariant="secondary"
             aria-label="Get Thunderstore Mod Manager App"
           >
-            Get App
+            Get Manager
           </NewButton>
           {hydrationCheck && currentUser ? (
             <DesktopUserDropdown user={currentUser} />

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

@@ -9,13 +9,18 @@
   .ts-dropdown:where(.ts-size--medium) {
     --dropdown-border-radius: var(--dropdown-md-border-radius);
     --dropdown-padding: var(--dropdown-md-padding);
+    --dropdown-gap: var(--dropdown-md-gap);
 
     & > *:where(:not(.ts-dropdown__divider)) {
       --dropdown__item-gap: var(--dropdown-item-md-gap);
       --dropdown__item-padding: var(--dropdown-item-md-padding);
       --dropdown__item-font-weight: var(--dropdown-item-md-font-weight);
       --dropdown__item-font-size: var(--dropdown-item-md-font-size);
     }
+
+    & > .ts-dropdown__divider {
+      --dropdown__divider-margin: var(--divider-md-margin);
+    }
   }
 
   .ts-dropdown:where(.ts-variant--primary) {
@@ -33,8 +38,14 @@
       --dropdown__item-color: var(--dropdown-item-text-color--hover);
       --dropdown__item-icon-color: var(--dropdown-item-icon-color--hover);
     }
+
+    & > .ts-dropdown__divider:where(.ts-variant--primary) {
+      --dropdown__divider-height: var(--divider-height);
+      --dropdown__divider-background-color: var(--divider-bg-color);
+    }
   }
 
+  /* Dropdown Item */
   .ts-dropdown__item:where(.ts-modifier--danger) {
     --dropdown__item-background-color: var(
       --dropdown-item-danger-bg-color--default
@@ -75,11 +86,6 @@
     }
   }
 
-  .ts-dropdown__divider:where(.ts-variant--primary) {
-    --dropdown__divider-height: var(--divider-height);
-    --dropdown__divider-background-color: var(--divider-bg-color);
-  }
-
   @keyframes fade-in {
     from {
       opacity: 0;
@@ -91,6 +97,7 @@
   }
 
   :root {
+    --dropdown-md-gap: 0.25rem;
     --dropdown-bg-color--default: var(--color-surface-4);
     --dropdown-border-color--default: var(--color-surface-a6);
     --dropdown-item-bg-color--default: #0000;
@@ -112,12 +119,13 @@
     --dropdown-item-disabled-text-color--default: var(--color-text-tertiary);
     --dropdown-item-disabled-text-color--hover: var(--color-text-tertiary);
     --dropdown-md-border-radius: var(--radius-md);
-    --dropdown-md-padding: var(--space-8) 0;
+    --dropdown-md-padding: var(--space-4) 0;
     --dropdown-item-md-gap: var(--gap-md);
     --dropdown-item-md-padding: var(--space-12) var(--space-16);
     --dropdown-item-md-font-weight: var(--font-weight-regular);
     --dropdown-item-md-font-size: var(--font-size-body-md);
     --divider-bg-color: var(--color-surface-a6);
     --divider-height: 0.063rem;
+    --divider-md-margin: 0.25rem 0rem;
   }
 }

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

@@ -3,75 +3,73 @@
 
   /* VARIANTS */
   .ts-select:where(.ts-variant--default) {
-    --select-background-color: var(--dropdown-bg-color--default);
-    --select-border-color: var(--dropdown-border-color--default);
+    --select-background-color: var(--select-bg-color--default);
+    --select-border-color: var(--select-border-color--default);
     --select-box-shadow: var(--shadow-lg);
     --select-animation: fade-in var(--animation-duration-md) ease;
     --select-border: var(--space-px) var(--select-border-color) solid;
   }
 
   /* SIZES */
   .ts-select:where(.ts-size--medium) {
-    --select-border-radius: var(--dropdown-md-border-radius);
-    --select-padding: var(--dropdown-md-padding);
+    --select-border-radius: var(--select-md-border-radius);
+    --select-padding: var(--select-md-padding);
   }
 
   /* SELECT ITEM */
 
   /* VARIANTS */
   .ts-select__item:where(.ts-variant--default) {
-    --select__item-background-color: var(--dropdown-item-bg-color--default);
-    --select__item-color: var(--dropdown-item-text-color--default);
-    --icon-color: var(--dropdown-item-icon-color--default);
+    --select__item-background-color: var(--select-item-bg-color--default);
+    --select__item-color: var(--select-item-text-color--default);
+    --icon-color: var(--select-item-icon-color--default);
 
     &[data-highlighted] {
-      --select__item-background-color: var(--dropdown-item-bg-color--hover);
-      --select__item-color: var(--dropdown-item-text-color--hover);
-      --icon-color: var(--dropdown-item-icon-color--hover);
+      --select__item-background-color: var(--select-item-bg-color--hover);
+      --select__item-color: var(--select-item-text-color--hover);
+      --icon-color: var(--select-item-icon-color--hover);
     }
   }
 
   .ts-select__item:where(.ts-variant--danger) {
     --select__item-background-color: var(
-      --dropdown-item-danger-bg-color--default
+      --select-item-danger-bg-color--default
     );
-    --select__item-color: var(--dropdown-item-danger-text-color--default);
-    --icon-color: var(--dropdown-item-danger-icon-color--default);
+    --select__item-color: var(--select-item-danger-text-color--default);
+    --icon-color: var(--select-item-danger-icon-color--default);
 
     &[data-highlighted] {
       --select__item-background-color: var(
-        --dropdown-item-danger-bg-color--hover
+        --select-item-danger-bg-color--hover
       );
-      --select__item-color: var(--dropdown-item-danger-text-color--hover);
-      --icon-color: var(--dropdown-item-danger-icon-color--hover);
+      --select__item-color: var(--select-item-danger-text-color--hover);
+      --icon-color: var(--select-item-danger-icon-color--hover);
     }
   }
 
   .ts-select__item:where(.ts-variant--disabled) {
     --select__item-background-color: var(
-      --dropdown-item-disabled-bg-color--default
+      --select-item-disabled-bg-color--default
     );
-    --select__item-color: var(--dropdown-item-disabled-text-color--default);
-    --select__item-icon-color: var(
-      --dropdown-item-disabled-icon-color--default
-    );
-    --icon-color: var(--dropdown-item-disabled-icon-color--default);
+    --select__item-color: var(--select-item-disabled-text-color--default);
+    --select__item-icon-color: var(--select-item-disabled-icon-color--default);
+    --icon-color: var(--select-item-disabled-icon-color--default);
 
     &[data-highlighted] {
       --select__item-background-color: var(
-        --dropdown-item-disabled-bg-color--hover
+        --select-item-disabled-bg-color--hover
       );
-      --select__item-color: var(--dropdown-item-disabled-text-color--hover);
-      --icon-color: var(--dropdown-item-disabled-icon-color--hover);
+      --select__item-color: var(--select-item-disabled-text-color--hover);
+      --icon-color: var(--select-item-disabled-icon-color--hover);
     }
   }
 
   /* SIZES */
   .ts-select__item:where(.ts-size--medium) {
-    --select__item-gap: var(--dropdown-item-md-gap);
-    --select__item-padding: var(--dropdown-item-md-padding);
-    --select__item-font-weight: var(--dropdown-item-md-font-weight);
-    --select__item-font-size: var(--dropdown-item-md-font-size);
+    --select__item-gap: var(--select-item-md-gap);
+    --select__item-padding: var(--select-item-md-padding);
+    --select__item-font-weight: var(--select-item-md-font-weight);
+    --select__item-font-size: var(--select-item-md-font-size);
   }
 
   /* SELECT TRIGGER */
@@ -93,32 +91,32 @@
   }
 
   :root {
-    --dropdown-bg-color--default: var(--color-surface-4);
-    --dropdown-border-color--default: var(--color-surface-a6);
-    --dropdown-item-bg-color--default: #0000;
-    --dropdown-item-bg-color--hover: var(--color-surface-a7);
-    --dropdown-item-icon-color--default: var(--color-text-tertiary);
-    --dropdown-item-icon-color--hover: var(--color-text-primary);
-    --dropdown-item-text-color--default: var(--color-text-primary);
-    --dropdown-item-text-color--hover: var(--color-text-primary);
-    --dropdown-item-danger-bg-color--default: #0000;
-    --dropdown-item-danger-bg-color--hover: var(--color-accent-red-6);
-    --dropdown-item-danger-icon-color--default: var(--color-accent-red-7);
-    --dropdown-item-danger-icon-color--hover: #fff;
-    --dropdown-item-danger-text-color--default: var(--color-accent-red-7);
-    --dropdown-item-danger-text-color--hover: #fff;
-    --dropdown-item-disabled-bg-color--default: #0000;
-    --dropdown-item-disabled-bg-color--hover: #0000;
-    --dropdown-item-disabled-icon-color--default: var(--color-text-tertiary);
-    --dropdown-item-disabled-icon-color--hover: var(--color-text-tertiary);
-    --dropdown-item-disabled-text-color--default: var(--color-text-tertiary);
-    --dropdown-item-disabled-text-color--hover: var(--color-text-tertiary);
-    --dropdown-md-border-radius: var(--radius-md);
-    --dropdown-md-padding: var(--space-8) 0;
-    --dropdown-item-md-gap: var(--gap-md);
-    --dropdown-item-md-padding: var(--space-12) var(--space-16);
-    --dropdown-item-md-font-weight: var(--font-weight-regular);
-    --dropdown-item-md-font-size: var(--font-size-body-md);
+    --select-bg-color--default: var(--color-surface-4);
+    --select-border-color--default: var(--color-surface-a6);
+    --select-item-bg-color--default: #0000;
+    --select-item-bg-color--hover: var(--color-surface-a7);
+    --select-item-icon-color--default: var(--color-text-tertiary);
+    --select-item-icon-color--hover: var(--color-text-primary);
+    --select-item-text-color--default: var(--color-text-primary);
+    --select-item-text-color--hover: var(--color-text-primary);
+    --select-item-danger-bg-color--default: #0000;
+    --select-item-danger-bg-color--hover: var(--color-accent-red-6);
+    --select-item-danger-icon-color--default: var(--color-accent-red-7);
+    --select-item-danger-icon-color--hover: #fff;
+    --select-item-danger-text-color--default: var(--color-accent-red-7);
+    --select-item-danger-text-color--hover: #fff;
+    --select-item-disabled-bg-color--default: #0000;
+    --select-item-disabled-bg-color--hover: #0000;
+    --select-item-disabled-icon-color--default: var(--color-text-tertiary);
+    --select-item-disabled-icon-color--hover: var(--color-text-tertiary);
+    --select-item-disabled-text-color--default: var(--color-text-tertiary);
+    --select-item-disabled-text-color--hover: var(--color-text-tertiary);
+    --select-md-border-radius: var(--radius-md);
+    --select-md-padding: var(--space-4) 0;
+    --select-item-md-gap: var(--gap-md);
+    --select-item-md-padding: var(--space-12) var(--space-16);
+    --select-item-md-font-weight: var(--font-weight-regular);
+    --select-item-md-font-size: var(--font-size-body-md);
     --select-trigger-md-font-weight: var(--font-weight-bold);
     --select-trigger-md-font-size: var(--font-size-body-md);
   }

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

@@ -2,48 +2,23 @@
   /* SELECT */
 
   /* VARIANTS */
-  .ts-table:where(.ts-variant--default) {
-    --select-background-color: var(--dropdown-bg-color--default);
-    --select-border-color: var(--dropdown-border-color--default);
-    --select-box-shadow: var(--shadow-lg);
-    --select-animation: fade-in var(--animation-duration-md) ease;
-    --select-border: var(--space-px) var(--select-border-color) solid;
-  }
+
+  /* .ts-table:where(.ts-variant--default) {
+    --table-background-color: var(--dropdown-bg-color--default);
+    --table-border-color: var(--dropdown-border-color--default);
+    --table-box-shadow: var(--shadow-lg);
+    --table-animation: fade-in var(--animation-duration-md) ease;
+    --table-border: var(--space-px) var(--select-border-color) solid;
+  } */
 
   /* SIZES */
-  .ts-table:where(.ts-size--medium) {
-    --select-border-radius: var(--dropdown-md-border-radius);
-    --select-padding: var(--dropdown-md-padding);
-  }
+
+  /* .ts-table:where(.ts-size--medium) {
+    --table-border-radius: var(--dropdown-md-border-radius);
+    --table-padding: var(--dropdown-md-padding);
+  } */
 
   :root {
-    --dropdown-bg-color--default: var(--color-surface-4);
-    --dropdown-border-color--default: var(--color-surface-a6);
-    --dropdown-item-bg-color--default: #0000;
-    --dropdown-item-bg-color--hover: var(--color-surface-a7);
-    --dropdown-item-icon-color--default: var(--color-text-tertiary);
-    --dropdown-item-icon-color--hover: var(--color-text-primary);
-    --dropdown-item-text-color--default: var(--color-text-primary);
-    --dropdown-item-text-color--hover: var(--color-text-primary);
-    --dropdown-item-danger-bg-color--default: #0000;
-    --dropdown-item-danger-bg-color--hover: var(--color-accent-red-6);
-    --dropdown-item-danger-icon-color--default: var(--color-accent-red-7);
-    --dropdown-item-danger-icon-color--hover: #fff;
-    --dropdown-item-danger-text-color--default: var(--color-accent-red-7);
-    --dropdown-item-danger-text-color--hover: #fff;
-    --dropdown-item-disabled-bg-color--default: #0000;
-    --dropdown-item-disabled-bg-color--hover: #0000;
-    --dropdown-item-disabled-icon-color--default: var(--color-text-tertiary);
-    --dropdown-item-disabled-icon-color--hover: var(--color-text-tertiary);
-    --dropdown-item-disabled-text-color--default: var(--color-text-tertiary);
-    --dropdown-item-disabled-text-color--hover: var(--color-text-tertiary);
-    --dropdown-md-border-radius: var(--radius-md);
-    --dropdown-md-padding: var(--space-8) 0;
-    --dropdown-item-md-gap: var(--gap-md);
-    --dropdown-item-md-padding: var(--space-12) var(--space-16);
-    --dropdown-item-md-font-weight: var(--font-weight-regular);
-    --dropdown-item-md-font-size: var(--font-size-body-md);
-    --select-trigger-md-font-weight: var(--font-weight-bold);
-    --select-trigger-md-font-size: var(--font-size-body-md);
+    --table-bg-color--default: var(--color-surface-4);
   }
 }