Package Detail page versions tab

apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css

@@ -12,12 +12,6 @@
   .nimbus-commoncomponents-listingdependency__image {
     flex-shrink: 0;
     width: 80px;
-
-    > svg {
-      width: 40px;
-      height: 40px;
-      color: var(--color-surface-a10);
-    }
   }
 
   .nimbus-commoncomponents-listingdependency__info {

apps/cyberstorm-remix/app/p/tabs/Required/Required.css

@@ -1,29 +1,29 @@
 .nimbus-packagelisting__tabs__required {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--gap-md);
 }
 
 .nimbus-packagelisting__tabs__required__title {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--gap-md);
   align-items: flex-start;
   align-self: stretch;
-  padding-bottom: 24px;
+  padding-bottom: var(--space-24);
 }
 
 .nimbus-packagelisting__tabs__required__title__description {
   color: var(--color-text-secondary);
-  font-weight: 400;
-  line-height: 150%;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-md);
 }
 
 .nimbus-packagelisting__tabs__required__body {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--gap-xxxs);
   align-items: flex-start;
   align-self: stretch;
-  padding-bottom: 32px;
+  padding-bottom: var(--space-32);
 }

apps/cyberstorm-remix/app/p/tabs/Versions/Versions.css

@@ -0,0 +1,13 @@
+.nimbus-packagelisting__tabs__versions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.nimbus-packagelisting__tabs__versions__actionscell {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+  align-self: stretch;
+  justify-content: flex-end;
+}

apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx

@@ -1,9 +1,21 @@
-import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCircleExclamation,
+  faDownload,
+} from "@fortawesome/free-solid-svg-icons";
 import { faBoltLightning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import styles from "./Versions.module.css";
-import { Table, Sort, Alert, Button } from "@thunderstore/cyberstorm";
+import "./Versions.css";
+import {
+  NewTableSort,
+  Alert,
+  NewButton,
+  NewIcon,
+  NewTable,
+  NewTableRows,
+  NewTableLabels,
+  Heading,
+} from "@thunderstore/cyberstorm";
 import { LoaderFunctionArgs } from "@remix-run/node";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { ApiError } from "@thunderstore/thunderstore-api";
@@ -83,36 +95,46 @@ export default function Versions() {
     return <div>{message}</div>;
   }
 
-  const tableRows = versions.map((v) => [
+  const tableRows: NewTableRows = versions.map((v) => [
     { value: v.version_number, sortValue: v.version_number },
     {
       value: new Date(v.datetime_created).toUTCString(),
       sortValue: v.datetime_created,
     },
     { value: v.download_count.toLocaleString(), sortValue: v.download_count },
-    { value: <DownloadLink {...v} />, sortValue: 0 },
-    { value: <InstallLink {...v} />, sortValue: 0 },
+    {
+      value: (
+        <div className="nimbus-packagelisting__tabs__versions__actionscell">
+          <DownloadLink {...v} />
+          <InstallLink {...v} />
+        </div>
+      ),
+      sortValue: 0,
+    },
   ]);
 
   return (
-    <div className={styles.main}>
+    <div className="nimbus-packagelisting__tabs__versions">
       <ModManagerBanner />
-      <Table
+      <NewTable
+        titleRowContent={
+          <Heading csSize="3" csLevel="3">
+            Versions
+          </Heading>
+        }
         headers={columns}
         rows={tableRows}
-        sortDirection={Sort.ASC}
-        variant="itemListSmall"
+        sortDirection={NewTableSort.ASC}
       />
     </div>
   );
 }
 
-const columns = [
+const columns: NewTableLabels = [
   { value: "Version", disableSort: false },
   { value: "Upload date", disableSort: false },
   { value: "Downloads", disableSort: false },
-  { value: "", disableSort: true },
-  { value: "", disableSort: true },
+  { value: "Actions", disableSort: true },
 ];
 
 const ModManagerBanner = () => (
@@ -123,7 +145,7 @@ const ModManagerBanner = () => (
         client software installed, such as the{" "}
         <a
           href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
-          className={styles.alertLink}
+          // className={styles.alertLink}
         >
           Thunderstore Mod Manager.
         </a>{" "}
@@ -136,20 +158,30 @@ const ModManagerBanner = () => (
 );
 
 const DownloadLink = (props: { download_url: string }) => (
-  <a href={props.download_url}>
-    <Button.Root plain paddingSize="large" colorScheme="transparentAccent">
-      <Button.ButtonLabel>Download</Button.ButtonLabel>
-    </Button.Root>
-  </a>
+  <NewButton
+    csVariant="secondary"
+    csModifiers={["ghost"]}
+    csSize="small"
+    primitiveType="link"
+    href={props.download_url}
+  >
+    <NewIcon noWrapper csMode="inline">
+      <FontAwesomeIcon icon={faDownload} />
+    </NewIcon>
+    Download
+  </NewButton>
 );
 
 const InstallLink = (props: { install_url: string }) => (
-  <a href={props.install_url}>
-    <Button.Root plain paddingSize="large" colorScheme="primary">
-      <Button.ButtonIcon>
-        <FontAwesomeIcon icon={faBoltLightning} />
-      </Button.ButtonIcon>
-      <Button.ButtonLabel>Install</Button.ButtonLabel>
-    </Button.Root>
-  </a>
+  <NewButton
+    csVariant="secondary"
+    csSize="small"
+    primitiveType="link"
+    href={props.install_url}
+  >
+    <NewIcon noWrapper csMode="inline">
+      <FontAwesomeIcon icon={faBoltLightning} />
+    </NewIcon>
+    Install
+  </NewButton>
 );

packages/cyberstorm-theme/src/components.tsx

@@ -50,6 +50,14 @@ export {
   type SelectModifiers,
   SelectModifiersList,
 } from "./components/Select/Select";
+export {
+  type TableVariants,
+  TableVariantsList,
+  type TableSizes,
+  TableSizesList,
+  type TableModifiers,
+  TableModifiersList,
+} from "./components/Table/Table";
 export {
   type TextInputVariants,
   TextInputVariantsList,

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

@@ -0,0 +1,125 @@
+@layer theme-components {
+  /* 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;
+  }
+
+  /* SIZES */
+  .ts-table:where(.ts-size--medium) {
+    --select-border-radius: var(--dropdown-md-border-radius);
+    --select-padding: var(--dropdown-md-padding);
+  }
+
+  /* SELECT ITEM */
+
+  /* VARIANTS */
+  .ts-table__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);
+
+    &[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);
+    }
+  }
+
+  .ts-table__item:where(.ts-variant--danger) {
+    --select__item-background-color: var(
+      --dropdown-item-danger-bg-color--default
+    );
+    --select__item-color: var(--dropdown-item-danger-text-color--default);
+    --icon-color: var(--dropdown-item-danger-icon-color--default);
+
+    &[data-highlighted] {
+      --select__item-background-color: var(
+        --dropdown-item-danger-bg-color--hover
+      );
+      --select__item-color: var(--dropdown-item-danger-text-color--hover);
+      --icon-color: var(--dropdown-item-danger-icon-color--hover);
+    }
+  }
+
+  .ts-table__item:where(.ts-variant--disabled) {
+    --select__item-background-color: var(
+      --dropdown-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);
+
+    &[data-highlighted] {
+      --select__item-background-color: var(
+        --dropdown-item-disabled-bg-color--hover
+      );
+      --select__item-color: var(--dropdown-item-disabled-text-color--hover);
+      --icon-color: var(--dropdown-item-disabled-icon-color--hover);
+    }
+  }
+
+  /* SIZES */
+  .ts-table__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 TRIGGER */
+
+  /* SIZES */
+  .ts-table__trigger:where(.ts-size--medium) {
+    --select__trigger-font-weight: var(--select-trigger-md-font-weight);
+    --select__trigger-font-size: var(--select-trigger-md-font-size);
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  :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);
+  }
+}

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

@@ -0,0 +1,15 @@
+// Table ROOT
+// Variants
+export const TableVariantsList = ["default"] as const;
+export type TableVariants = "default";
+
+// Sizes
+export const TableSizesList = ["medium"] as const;
+export type TableSizes = "medium";
+
+// Modifiers
+export const TableModifiersList = [] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type TableModifiers = typeof TableModifiersList[number];

packages/cyberstorm-theme/src/index.tsx

@@ -10,6 +10,7 @@ import "./components/TextInput/TextInput.css";
 import "./components/Icon/Icon.css";
 import "./components/BreadCrumbs/BreadCrumbs.css";
 import "./components/Select/Select.css";
+import "./components/Table/Table.css";
 import "./components/Tag/Tag.css";
 import "./components/MetaItem/MetaItem.css";
 import "./components/Link/Link.css";

packages/cyberstorm/src/index.ts

@@ -123,3 +123,9 @@ export {
 export { Image } from "./newComponents/Image/Image";
 export { AdContainer } from "./newComponents/AdContainer/AdContainer";
 export { Tabs } from "./newComponents/Tabs/Tabs";
+export {
+  Table as NewTable,
+  TableSort as NewTableSort,
+  type TableRows as NewTableRows,
+  type TableLabels as NewTableLabels,
+} from "./newComponents/Table/Table";