Merge pull request #1299 from thunderstore-io/01-20-convert_and_updat…

…e_toast_styles

Convert and update Toast styles

apps/cyberstorm-remix/app/root.tsx

@@ -29,7 +29,7 @@ import {
 } from "cyberstorm/security/publicEnvVariables";
 import { useEffect, useRef, useState } from "react";
 import { useHydrated } from "remix-utils/use-hydrated";
-import Toast from "@thunderstore/cyberstorm/src/components/Toast";
+import Toast from "@thunderstore/cyberstorm/src/newComponents/Toast";
 import { SessionProvider, useSession } from "@thunderstore/ts-api-react";
 import { Footer } from "./commonComponents/Footer/Footer";
 import { NavigationWrapper } from "cyberstorm/navigation/NavigationWrapper";

apps/cyberstorm-storybook/stories/components/Toast.stories.tsx

@@ -28,33 +28,33 @@ MinimalToast.args = {
 const InfoToast = Template.bind({});
 InfoToast.args = {
   ...defaultArgs,
-  message:
+  children:
     "Lorem ipsum dolor sit amet, lollero pollero long ass text right here ellipsis just kidding it’s not that long.",
-  variant: "info",
+  csVariant: "info",
 };
 
 const DangerToast = Template.bind({});
 DangerToast.args = {
   ...defaultArgs,
-  message:
+  children:
     "Lorem ipsum dolor sit amet, lollero pollero long ass text right here ellipsis just kidding it’s not that long.",
-  variant: "danger",
+  csVariant: "danger",
 };
 
 const WarningToast = Template.bind({});
 WarningToast.args = {
   ...defaultArgs,
-  message:
+  children:
     "Lorem ipsum dolor sit amet, lollero pollero long ass text right here ellipsis just kidding it’s not that long.",
-  variant: "warning",
+  csVariant: "warning",
 };
 
 const SuccessToast = Template.bind({});
 SuccessToast.args = {
   ...defaultArgs,
-  message:
+  children:
     "Lorem ipsum dolor sit amet, lollero pollero long ass text right here ellipsis just kidding it’s not that long.",
-  variant: "success",
+  csVariant: "success",
 };
 
 export {

packages/cyberstorm-forms/src/useFormToaster.ts

@@ -1,4 +1,4 @@
-import { useToast } from "@thunderstore/cyberstorm/src/components/Toast/Provider";
+import { useToast } from "@thunderstore/cyberstorm/src/newComponents/Toast/Provider";
 
 export type UseFormToasterArgs = {
   successMessage: string;
@@ -17,15 +17,15 @@ export function useFormToaster({
   return {
     onSubmitSuccess: () => {
       toast.addToast({
-        variant: "success",
-        message: successMessage,
+        csVariant: "success",
+        children: successMessage,
         duration: 30000,
       });
     },
     onSubmitError: () => {
       toast.addToast({
-        variant: "danger",
-        message: errorMessage
+        csVariant: "danger",
+        children: errorMessage
           ? errorMessage
           : "Unknown error occurred. The error has been logged",
       });

packages/cyberstorm-theme/src/components.tsx

@@ -89,6 +89,12 @@ export {
   type AlertSizes,
   AlertSizesList,
 } from "./components/Alert/Alert";
+export {
+  type ToastVariants,
+  ToastVariantsList,
+  type ToastSizes,
+  ToastSizesList,
+} from "./components/Toast/Toast";
 export {
   type MetaItemVariants,
   MetaItemVariantsList,

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

@@ -0,0 +1,102 @@
+@layer theme-components {
+  /* SIZES */
+  .ts-toast:where(.ts-size--medium) {
+    --toast-gap: var(--toast-md-gap);
+    --toast-padding-block: var(--toast-md-padding-block);
+    --toast-padding-inline: var(--toast-md-padding-inline);
+    --toast-font-size: var(--toast-md-font-size);
+    --toast-font-weight: var(--toast-md-font-weight);
+    --toast-line-height: var(--toast-md-line-height);
+    --toast-icon-width: var(--toast-md-icon-width);
+    --toast-icon-height: var(--toast-md-icon-height);
+    --toast-border-radius: var(--toast-md-border-radius);
+    --toast-close-width: var(--toast-md-close-width);
+    --toast-close-height: var(--toast-md-close-height);
+    --toast-close-icon-width: var(--toast-md-close-icon-width);
+    --toast-close-icon-height: var(--toast-md-close-icon-height);
+  }
+
+  /* VARIANTS */
+  .ts-toast:where(.ts-variant--danger) {
+    --toast-background-color: var(--toast-danger-bg-color--default);
+    --toast-border-color: var(--toast-danger-border-color--default);
+    --toast-icon-color: var(--toast-danger-icon-color--default);
+    --toast-color: var(--toast-danger-text-color--default);
+    --toast-close-icon-color: var(--toast-danger-close-color--default);
+    --toast-close-icon-color-hover: var(--toast-danger-close-color--hover);
+  }
+
+  .ts-toast:where(.ts-variant--info) {
+    --toast-background-color: var(--toast-info-bg-color--default);
+    --toast-border-color: var(--toast-info-border-color--default);
+    --toast-icon-color: var(--toast-info-icon-color--default);
+    --toast-color: var(--toast-info-text-color--default);
+    --toast-close-icon-color: var(--toast-info-close-color--default);
+    --toast-close-icon-color-hover: var(--toast-info-close-color--hover);
+  }
+
+  .ts-toast:where(.ts-variant--success) {
+    --toast-background-color: var(--toast-success-bg-color--default);
+    --toast-border-color: var(--toast-success-border-color--default);
+    --toast-icon-color: var(--toast-success-icon-color--default);
+    --toast-color: var(--toast-success-text-color--default);
+    --toast-close-icon-color: var(--toast-success-close-color--default);
+    --toast-close-icon-color-hover: var(--toast-success-close-color--hover);
+  }
+
+  .ts-toast:where(.ts-variant--warning) {
+    --toast-background-color: var(--toast-warning-bg-color--default);
+    --toast-border-color: var(--toast-warning-border-color--default);
+    --toast-icon-color: var(--toast-warning-icon-color--default);
+    --toast-color: var(--toast-warning-text-color--default);
+    --toast-close-icon-color: var(--toast-warning-close-color--default);
+    --toast-close-icon-color-hover: var(--toast-warning-close-color--hover);
+  }
+
+  /* TOKENS */
+  :root {
+    --toast-danger-bg-color--default: var(--color-accent-red-3);
+    --toast-danger-border-color--default: var(--color-accent-red-7);
+    --toast-danger-close-color--default: var(--color-accent-red-7);
+    --toast-danger-close-color--hover: var(--color-accent-red-10);
+    --toast-danger-icon-color--default: var(--color-accent-red-7);
+    --toast-danger-text-color--default: var(--color-accent-red-11);
+    --toast-default-bg-color--default: var(--color-surface-6);
+    --toast-default-border-color--default: #5d5a9f;
+    --toast-default-close-color--default: var(--color-text-tertiary);
+    --toast-default-close-color--hover: var(--color-text-secondary);
+    --toast-default-icon-color--default: var(--color-text-accent);
+    --toast-default-text-color--default: var(--color-text-secondary);
+    --toast-info-bg-color--default: var(--color-accent-blue-3);
+    --toast-info-border-color--default: var(--color-accent-blue-7);
+    --toast-info-close-color--default: var(--color-accent-blue-7);
+    --toast-info-close-color--hover: var(--color-accent-blue-10);
+    --toast-info-icon-color--default: var(--color-accent-blue-7);
+    --toast-info-text-color--default: var(--color-accent-blue-11);
+    --toast-success-bg-color--default: var(--color-accent-green-3);
+    --toast-success-border-color--default: var(--color-accent-green-7);
+    --toast-success-close-color--default: var(--color-accent-green-7);
+    --toast-success-close-color--hover: var(--color-accent-green-10);
+    --toast-success-icon-color--default: var(--color-accent-green-7);
+    --toast-success-text-color--default: var(--color-accent-green-11);
+    --toast-warning-bg-color--default: var(--color-accent-yellow-3);
+    --toast-warning-border-color--default: var(--color-accent-yellow-7);
+    --toast-warning-close-color--default: var(--color-accent-yellow-7);
+    --toast-warning-close-color--hover: var(--color-accent-yellow-10);
+    --toast-warning-icon-color--default: var(--color-accent-yellow-7);
+    --toast-warning-text-color--default: var(--color-accent-yellow-11);
+    --toast-md-gap: var(--space-16);
+    --toast-md-padding-block: var(--space-16);
+    --toast-md-padding-inline: var(--space-24);
+    --toast-md-font-size: var(--font-size-body-md);
+    --toast-md-font-weight: var(--font-weight-regular);
+    --toast-md-line-height: var(--line-height-md);
+    --toast-md-icon-width: 1.125rem;
+    --toast-md-icon-height: 1.375rem;
+    --toast-md-border-radius: var(--radius-sm);
+    --toast-md-close-width: 1.875rem;
+    --toast-md-close-height: 1.875rem;
+    --toast-md-close-icon-width: 0.875rem;
+    --toast-md-close-icon-height: 0.875rem;
+  }
+}

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

@@ -0,0 +1,12 @@
+// Variants
+export const ToastVariantsList = [
+  "info",
+  "success",
+  "warning",
+  "danger",
+] as const;
+export type ToastVariants = "info" | "success" | "warning" | "danger";
+
+// Sizes
+export const ToastSizesList = ["medium"] as const;
+export type ToastSizes = "medium";

packages/cyberstorm-theme/src/index.tsx

@@ -12,6 +12,7 @@ import "./components/BreadCrumbs/BreadCrumbs.css";
 import "./components/Select/Select.css";
 import "./components/Table/Table.css";
 import "./components/Tag/Tag.css";
+import "./components/Toast/Toast.css";
 import "./components/Alert/Alert.css";
 import "./components/MetaItem/MetaItem.css";
 import "./components/Link/Link.css";

packages/cyberstorm/src/components/Providers.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Provider } from "@radix-ui/react-tooltip";
 import { ReactNode } from "react";
-import Toast from "./Toast";
+import Toast from "../newComponents/Toast";
 
 interface CyberstormProvidersProps {
   children: ReactNode | ReactNode[];