thunderstore-io · Oksamies · Jan 8, 2025 · Jan 3, 2025
diff --git a/apps/cyberstorm-remix/app/Markdown.module.css b/apps/cyberstorm-remix/app/Markdown.module.css
@@ -103,6 +103,8 @@
   font-family: var(--font-family-monospace);
   font-style: normal;
   line-height: 150%;
+  white-space: break-spaces;
+  overflow-wrap: break-word;
   background: #0d0d21;
 }
 

diff --git a/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css b/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 {

diff --git a/apps/cyberstorm-remix/app/p/packageListing.css b/apps/cyberstorm-remix/app/p/packageListing.css
@@ -10,6 +10,7 @@
     flex-direction: column;
     flex-grow: 1;
     gap: var(--space-32);
+    min-width: 0;
   }
 
   .nimbus-packagelisting__sidebar {

diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/Required.css b/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);
 }
diff --git a/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.css b/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.css
@@ -0,0 +1,34 @@
+.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;
+}
+
+.nimbus-packagelisting__tabs__versions__columns__version {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-md);
+  line-height: var(--line-height-md);
+}
+
+.nimbus-packagelisting__tabs__versions__columns__uploaddate {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-md);
+  line-height: var(--line-height-md);
+}
+
+.nimbus-packagelisting__tabs__versions__columns__downloads {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-md);
+  line-height: var(--line-height-md);
+}
diff --git a/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.module.css b/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.module.css
diff --git a/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx b/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx
@@ -1,9 +1,18 @@
-import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { 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,
+  NewButton,
+  NewIcon,
+  NewTable,
+  NewTableRows,
+  NewTableLabels,
+  Heading,
+  NewAlert,
+} from "@thunderstore/cyberstorm";
 import { LoaderFunctionArgs } from "@remix-run/node";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { ApiError } from "@thunderstore/thunderstore-api";
@@ -83,73 +92,99 @@ 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 = [
-  { value: "Version", disableSort: false },
-  { value: "Upload date", disableSort: false },
-  { value: "Downloads", disableSort: false },
-  { value: "", disableSort: true },
-  { value: "", disableSort: true },
+const columns: NewTableLabels = [
+  {
+    value: "Version",
+    disableSort: false,
+    columnClasses: "nimbus-packagelisting__tabs__versions__columns__version",
+  },
+  {
+    value: "Upload date",
+    disableSort: false,
+    columnClasses: "nimbus-packagelisting__tabs__versions__columns__uploaddate",
+  },
+  {
+    value: "Downloads",
+    disableSort: false,
+    columnClasses: "nimbus-packagelisting__tabs__versions__columns__downloads",
+  },
+  { value: "Actions", disableSort: true },
 ];
 
 const ModManagerBanner = () => (
-  <Alert
-    content={
-      <span>
-        Please note that the install buttons only work if you have compatible
-        client software installed, such as the{" "}
-        <a
-          href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
-          className={styles.alertLink}
-        >
-          Thunderstore Mod Manager.
-        </a>{" "}
-        Otherwise use the zip download links instead.
-      </span>
-    }
-    variant={"info"}
-    icon={<FontAwesomeIcon icon={faCircleExclamation} />}
-  />
+  <NewAlert csVariant="info">
+    Please note that the install buttons only work if you have compatible client
+    software installed, such as the{" "}
+    <a
+      href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
+      // className={styles.alertLink}
+    >
+      Thunderstore Mod Manager.
+    </a>{" "}
+    Otherwise use the zip download links instead.
+  </NewAlert>
 );
 
 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>
 );
diff --git a/packages/cyberstorm-theme/src/components.tsx b/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,
@@ -75,6 +83,12 @@ export {
   type TagModifiers,
   TagModifiersList,
 } from "./components/Tag/Tag";
+export {
+  type AlertVariants,
+  AlertVariantsList,
+  type AlertSizes,
+  AlertSizesList,
+} from "./components/Alert/Alert";
 export {
   type MetaItemVariants,
   MetaItemVariantsList,

diff --git a/packages/cyberstorm-theme/src/components/Alert/Alert.css b/packages/cyberstorm-theme/src/components/Alert/Alert.css
@@ -0,0 +1,72 @@
+@layer theme-components {
+  /* SIZES */
+  .ts-alert:where(.ts-size--small) {
+    --alert-gap: var(--alert-sm-gap);
+    --alert-padding-block: var(--alert-sm-padding-block);
+    --alert-padding-inline: var(--alert-sm-padding-inline);
+    --alert-font-size: var(--alert-sm-font-size);
+    --alert-font-weight: var(--alert-sm-font-weight);
+    --alert-line-height: var(--alert-sm-line-height);
+    --alert-icon-width: var(--alert-sm-icon-width);
+    --alert-icon-height: var(--alert-sm-icon-height);
+    --alert-border-radius: var(--alert-sm-border-radius);
+  }
+
+  /* VARIANTS */
+  .ts-alert:where(.ts-variant--danger) {
+    --alert-background-color: var(--alert-danger-bg-color--default);
+    --alert-border-color: var(--alert-danger-border-color--default);
+    --alert-icon-color: var(--alert-danger-icon-color--default);
+    --alert-color: var(--alert-danger-text-color--default);
+  }
+
+  .ts-alert:where(.ts-variant--info) {
+    --alert-background-color: var(--alert-info-bg-color--default);
+    --alert-border-color: var(--alert-info-border-color--default);
+    --alert-icon-color: var(--alert-info-icon-color--default);
+    --alert-color: var(--alert-info-text-color--default);
+  }
+
+  .ts-alert:where(.ts-variant--success) {
+    --alert-background-color: var(--alert-success-bg-color--default);
+    --alert-border-color: var(--alert-success-border-color--default);
+    --alert-icon-color: var(--alert-success-icon-color--default);
+    --alert-color: var(--alert-success-text-color--default);
+  }
+
+  .ts-alert:where(.ts-variant--warning) {
+    --alert-background-color: var(--alert-warning-bg-color--default);
+    --alert-border-color: var(--alert-warning-border-color--default);
+    --alert-icon-color: var(--alert-warning-icon-color--default);
+    --alert-color: var(--alert-warning-text-color--default);
+  }
+
+  /* TOKENS */
+  :root {
+    --alert-danger-bg-color--default: var(--color-accent-red-2);
+    --alert-danger-border-color--default: var(--color-accent-red-7);
+    --alert-danger-icon-color--default: var(--color-accent-red-7);
+    --alert-danger-text-color--default: var(--color-accent-red-11);
+    --alert-info-bg-color--default: var(--color-accent-blue-2);
+    --alert-info-border-color--default: var(--color-accent-blue-7);
+    --alert-info-icon-color--default: var(--color-accent-blue-7);
+    --alert-info-text-color--default: var(--color-accent-blue-11);
+    --alert-success-bg-color--default: var(--color-accent-green-2);
+    --alert-success-border-color--default: var(--color-accent-green-7);
+    --alert-success-icon-color--default: var(--color-accent-green-7);
+    --alert-success-text-color--default: var(--color-accent-green-11);
+    --alert-warning-bg-color--default: var(--color-accent-yellow-2);
+    --alert-warning-border-color--default: var(--color-accent-yellow-7);
+    --alert-warning-icon-color--default: var(--color-accent-yellow-7);
+    --alert-warning-text-color--default: var(--color-accent-yellow-11);
+    --alert-sm-gap: var(--space-16);
+    --alert-sm-padding-block: var(--space-16);
+    --alert-sm-padding-inline: var(--space-24);
+    --alert-sm-font-size: var(--font-size-body-md);
+    --alert-sm-font-weight: var(--font-weight-regular);
+    --alert-sm-line-height: var(--line-height-md);
+    --alert-sm-icon-width: 1.125rem;
+    --alert-sm-icon-height: 1.375rem;
+    --alert-sm-border-radius: var(--radius-sm);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Alert/Alert.ts b/packages/cyberstorm-theme/src/components/Alert/Alert.ts
@@ -0,0 +1,12 @@
+// Variants
+export const AlertVariantsList = [
+  "info",
+  "success",
+  "warning",
+  "danger",
+] as const;
+export type AlertVariants = "info" | "success" | "warning" | "danger";
+
+// Sizes
+export const AlertSizesList = ["small"] as const;
+export type AlertSizes = "small";