Le third times the charm

Convert newComponents to token system Add new cyberstorm-theme package
thunderstore-io · Oct 25, 2024 · d013736 · d013736
1 parent 39d0889
commit d013736
Show file tree

Hide file tree

Showing 72 changed files with 1,606 additions and 1,179 deletions.
diff --git a/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css b/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
@@ -3,6 +3,7 @@
   flex-direction: row;
   gap: var(--gap--16);
   justify-content: space-between;
+  color: var(--color-tertiary);
 }
 
 .searchTextInput {

diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -1,6 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import {
-  Container,
   CardCommunity,
   CommunityCardSkeleton,
   EmptyState,
@@ -30,6 +29,7 @@ import {
 } from "@remix-run/react";
 import { Communities } from "@thunderstore/dapper/types";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
+import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 export const meta: MetaFunction = () => {
   return [
@@ -131,20 +131,18 @@ export default function CommunitiesPage() {
         Communities
       </NewBreadCrumbs>
       <header className="project-root__page-header">
-        <Heading
-          csLevel="1"
-          csStyleLevel="2"
-          csVariant="primary"
-          mode="display"
-        >
+        <Heading csLevel="1" csSize="2" csVariant="primary" mode="display">
           Communities
         </Heading>
       </header>
       <main className="project-root__main">
-        <Container
-          rootClasses={searchAndOrderStyles.root}
-          csVariant="tertiary"
-          csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]}
+        <div
+          className={classnames(
+            searchAndOrderStyles.root,
+            "fontWeightBold",
+            "lineHeightAuto",
+            "fontSizeS"
+          )}
         >
           <div className={searchAndOrderStyles.searchTextInput}>
             <label htmlFor="communitiesSearchInput">Search</label>
@@ -154,7 +152,6 @@ export default function CommunitiesPage() {
               placeholder="Search communities..."
               clearValue={() => setSearchValue("")}
               leftIcon={<FontAwesomeIcon icon={faSearch} />}
-              csColor="cyber-green"
               id="communitiesSearchInput"
             />
           </div>
@@ -168,7 +165,7 @@ export default function CommunitiesPage() {
               id="communitiesSortBy"
             />
           </div>
-        </Container>
+        </div>
 
         <CommunitiesList communitiesData={communitiesData} />
         {/* {navigation.state === "loading" ? (

diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
@@ -1,4 +1,5 @@
 import "@thunderstore/cyberstorm-styles";
+import "@thunderstore/cyberstorm-theme";
 import "./styles/index.css";
 import {
   Links,

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx
@@ -21,14 +21,12 @@ export function DesktopLoginPopover() {
       trigger={
         <NewButton
           csVariant="primary"
-          csColor="purple"
-          csSize="l"
+          csSize="big"
           rootClasses={styles.loginButton}
           {...{
             popovertarget: "navAccount",
             popovertargetaction: "open",
           }}
-          csTextStyles={["fontSizeS", "fontWeightBold", "lineHeightAuto"]}
         >
           <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faArrowRightToBracket} />
@@ -67,7 +65,7 @@ export function DesktopLoginPopover() {
         <Heading
           mode="heading"
           csLevel="2"
-          csStyleLevel="3"
+          csSize="3"
           rootClasses={styles.loginTitle}
         >
           Log in to Thunderstore

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css
@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--color-primary);
 }
 
 .focus:not([data-highlighted]) a svg {
@@ -11,3 +12,7 @@
 .root {
   min-width: 14rem;
 }
+
+.link {
+  color: var(--color-primary);
+}
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx
@@ -10,28 +10,34 @@ import {
   NewButton,
   NewLink,
 } from "@thunderstore/cyberstorm";
+import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 export function DevelopersDropDown() {
   return (
     <>
       <NewDropDown
         trigger={
-          <NewButton csSize="l" csVariant="tertiary" csColor="surface">
+          <NewButton
+            csSize="big"
+            csVariant="secondary"
+            csModifiers={["subtle"]}
+          >
             Developers
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faCaretDown} />
             </NewIcon>
           </NewButton>
         }
-        csVariant="default"
-        csColor="surface"
         rootClasses={styles.root}
       >
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={classnames(
+              styles.link,
+              "fontSizeS",
+              "fontWeightRegular"
+            )}
             href="/api/docs"
           >
             API Docs
@@ -40,8 +46,11 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={classnames(
+              styles.link,
+              "fontSizeS",
+              "fontWeightRegular"
+            )}
             href="/package/create/docs/"
           >
             Package Format Docs
@@ -50,8 +59,11 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={classnames(
+              styles.link,
+              "fontSizeS",
+              "fontWeightRegular"
+            )}
             href="/tools/manifest-v1-validator/"
           >
             Manifest Validator
@@ -60,8 +72,11 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={classnames(
+              styles.link,
+              "fontSizeS",
+              "fontWeightRegular"
+            )}
             href="/tools/markdown-preview/"
           >
             Markdown Preview
@@ -70,10 +85,12 @@ export function DevelopersDropDown() {
         <NewDropDownItem rootClasses={styles.focus}>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={classnames(
+              styles.externalLink,
+              "fontSizeS",
+              "fontWeightRegular"
+            )}
             href="https://github.com/thunderstore-io"
-            rootClasses={styles.externalLink}
           >
             Github
             <NewIcon csMode="inline" noWrapper>

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx
@@ -39,7 +39,7 @@ export function LoginList() {
       <Heading
         mode="heading"
         csLevel="2"
-        csStyleLevel="3"
+        csSize="3"
         rootClasses={styles.loginTitle}
       >
         Log in to Thunderstore

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx
@@ -44,8 +44,9 @@ export function MobileUserPopoverContent(props: { user: CurrentUser }) {
           }}
           aria-label="Back"
           mode="iconButton"
-          csSize="m"
-          csVariant="tertiaryDimmed"
+          csSize="medium"
+          csVariant="secondary"
+          csModifiers={["subtle", "dimmed"]}
           icon={faLongArrowLeft}
         />
       }

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css
@@ -36,6 +36,11 @@
   width: 1.655rem;
   height: 1.463rem;
   margin: 0 0.75rem;
+  color: var(--color-cyber-green--7);
+}
+
+.logoWrapper:hover {
+  color: var(--color-cyber-green--9);
 }
 
 .dropDownItem {
@@ -71,12 +76,12 @@
   align-items: center;
   align-self: stretch;
   justify-content: space-between;
-  color: var(--color-primary);
   background: transparent;
 }
 
 .mobileNavMenuDevelopersButtonIcon {
   height: 0.875rem;
+  color: var(--color-tertiary);
 }
 
 .mobileNavItem {
@@ -112,6 +117,7 @@ button.mobileNavItem {
   align-items: center;
   align-self: stretch;
   padding: 1rem;
+  color: var(--color-primary);
 }
 
 .accountPopoverUser {
@@ -209,6 +215,10 @@ button.mobileNavItem {
   --text-color: #8683be;
 }
 
+.loginLegalTextLinks {
+  color: var(--color-tertiary);
+}
+
 .mobileMenu {
   display: none;
 }
@@ -238,12 +248,15 @@ 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--s);
 }
 
 .headerRightSide {
@@ -265,6 +278,7 @@ button.mobileNavItem {
   align-self: stretch;
   padding: var(--space--16);
   border-radius: var(--border-radius--8);
+  color: var(--color-primary);
 }
 
 .navMenuItem:hover {