refactor(Spinner): update default color to 'default', adjust size to …

…'lg', and modify example button colors
themesberg · Jan 13, 2025 · 23138b3 · 23138b3
1 parent aee2985
commit 23138b3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/apps/web/examples/spinner/spinner.loadingButtons.tsx b/apps/web/examples/spinner/spinner.loadingButtons.tsx
@@ -8,10 +8,10 @@ export function Component() {
   return (
     <div className="flex flex-row gap-3">
       <Button>
-        <Spinner aria-label="Spinner button example" size="sm" />
+        <Spinner aria-label="Spinner button example" size="sm" light />
         <span className="pl-3">Loading...</span>
       </Button>
-      <Button color="gray">
+      <Button color="alternative">
         <Spinner aria-label="Alternate spinner button example" size="sm" />
         <span className="pl-3">Loading...</span>
       </Button>
@@ -24,10 +24,10 @@ export function Component() {
   return (
     <div className="flex flex-row gap-3">
       <Button>
-        <Spinner aria-label="Spinner button example" size="sm" />
+        <Spinner aria-label="Spinner button example" size="sm" light />
         <span className="pl-3">Loading...</span>
       </Button>
-      <Button color="gray">
+      <Button color="alternative">
         <Spinner aria-label="Alternate spinner button example" size="sm" />
         <span className="pl-3">Loading...</span>
       </Button>

diff --git a/packages/ui/src/components/Spinner/Spinner.tsx b/packages/ui/src/components/Spinner/Spinner.tsx
@@ -28,6 +28,7 @@ export interface SpinnerTheme {
 export interface SpinnerColors
   extends Pick<FlowbiteColors, "failure" | "gray" | "info" | "pink" | "purple" | "success" | "warning"> {
   [key: string]: string;
+  default: string;
 }
 
 export interface SpinnerSizes extends Pick<FlowbiteSizes, "xs" | "sm" | "md" | "lg" | "xl"> {
@@ -42,9 +43,9 @@ export interface SpinnerProps extends Omit<ComponentProps<"span">, "color">, The
 
 export function Spinner({
   className,
-  color = "info",
+  color = "default",
   light,
-  size = "md",
+  size = "lg",
   theme: customTheme,
   clearTheme,
   applyTheme,

diff --git a/packages/ui/src/components/Spinner/theme.ts b/packages/ui/src/components/Spinner/theme.ts
@@ -4,6 +4,7 @@ import type { SpinnerTheme } from "./Spinner";
 export const spinnerTheme: SpinnerTheme = createTheme({
   base: "inline animate-spin text-gray-200",
   color: {
+    default: "fill-primary-600",
     failure: "fill-red-600",
     gray: "fill-gray-600",
     info: "fill-cyan-600",
@@ -16,6 +17,7 @@ export const spinnerTheme: SpinnerTheme = createTheme({
     off: {
       base: "dark:text-gray-600",
       color: {
+        default: "",
         failure: "",
         gray: "dark:fill-gray-300",
         info: "",
@@ -28,6 +30,7 @@ export const spinnerTheme: SpinnerTheme = createTheme({
     on: {
       base: "",
       color: {
+        default: "",
         failure: "",
         gray: "",
         info: "",