Replace red/green with danger/success

techniq · techniq · commit 25052be7cc92 · 2024-02-06T10:15:35.000-05:00
diff --git a/packages/svelte-ux/src/lib/components/ApiDocs.svelte b/packages/svelte-ux/src/lib/components/ApiDocs.svelte
@@ -48,7 +48,7 @@
           <div slot="actions" class="flex flex-wrap justify-end gap-1">
             {#if prop.isRequired}
               <div
-                class="inline-block border bg-red-500/10 border-red-500 text-red-600 px-2 rounded-full text-xs"
+                class="inline-block border bg-danger/10 border-danger text-danger-600 px-2 rounded-full text-xs"
               >
                 Required
               </div>
@@ -160,7 +160,7 @@
         <ListItem
           list="type"
           icon={mdiBullhorn}
-          avatar={{ size: 'sm', class: 'text-xs text-white bg-green-500' }}
+          avatar={{ size: 'sm', class: 'text-xs text-white bg-success-500' }}
         >
           <div slot="title">{event.name}</div>
 
@@ -212,7 +212,7 @@
           <div slot="actions" class="flex flex-wrap justify-end gap-1">
             {#if prop.isRequired}
               <div
-                class="inline-block border bg-red-500/10 border-red-500 text-red-600 px-2 rounded-full text-xs"
+                class="inline-block border bg-danger/10 border-danger text-danger-600 px-2 rounded-full text-xs"
               >
                 Required
               </div>
diff --git a/packages/svelte-ux/src/lib/components/ErrorNotification.svelte b/packages/svelte-ux/src/lib/components/ErrorNotification.svelte
@@ -19,7 +19,7 @@
 <Toggle let:on={open} let:toggle>
   <Notification actions="below" closeIcon on:close>
     <div slot="icon" class="self-start">
-      <Icon path={mdiAlertCircle} class="text-red-500" />
+      <Icon path={mdiAlertCircle} class="text-danger" />
     </div>
     <div slot="title">{title}</div>
 
diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
@@ -91,7 +91,7 @@
           class={cls(
             'text-sm  px-2 rounded',
             status === 'beta' && 'bg-yellow-500/20 text-yellow-800',
-            status === 'deprecated' && 'bg-red-500/20 text-red-900'
+            status === 'deprecated' && 'bg-danger/20 text-danger-900'
           )}
         >
           {status}
diff --git a/packages/svelte-ux/src/routes/docs/actions/dataBackground/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/dataBackground/+page.svelte
@@ -130,7 +130,7 @@
           <td
             class={cls(
               'text-right border tabular-nums',
-              value > 0 ? 'from-green-300 to-green-500' : 'from-red-500 to-red-300'
+              value > 0 ? 'from-success-300 to-success-500' : 'from-danger to-danger-300'
             )}
             use:dataBackground={{
               value,
diff --git a/packages/svelte-ux/src/routes/docs/actions/mouse/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/mouse/+page.svelte
@@ -42,7 +42,7 @@
 <Preview>
   <div class="h-40">
     <div
-      class="w-10 h-10 bg-red-500 rounded cursor-move"
+      class="w-10 h-10 bg-danger rounded cursor-move"
       use:movable
       on:movestart={() => {
         coords.stiffness = 1;
@@ -69,7 +69,7 @@
 <Preview>
   <div class="h-40">
     <div
-      class="w-10 h-10 bg-red-500 rounded cursor-move"
+      class="w-10 h-10 bg-danger rounded cursor-move"
       use:movable={{ step: 25 }}
       on:movestart={() => {
         coords.stiffness = 1;
@@ -96,7 +96,7 @@
 <Preview>
   <div class="h-40">
     <div
-      class="w-10 h-10 bg-red-500 rounded cursor-move"
+      class="w-10 h-10 bg-danger rounded cursor-move"
       use:movable={{ stepPercent: 0.1 }}
       on:movestart={() => {
         coords.stiffness = 1;
@@ -123,7 +123,7 @@
 <Preview>
   <div class="h-40">
     <div
-      class="w-10 h-10 bg-red-500 rounded cursor-move"
+      class="w-10 h-10 bg-danger rounded cursor-move"
       use:movable={{ axis: 'x' }}
       on:movestart={() => {
         coords.stiffness = 1;
diff --git a/packages/svelte-ux/src/routes/docs/actions/observer/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/observer/+page.svelte
@@ -68,9 +68,9 @@
       use:intersection={{ threshold: 1 }}
       on:intersecting={(e) => {
         if (e.detail.isIntersecting) {
-          e.target.classList.add('bg-red-500');
+          e.target.classList.add('bg-danger');
         } else {
-          e.target.classList.remove('bg-red-500');
+          e.target.classList.remove('bg-danger');
         }
       }}
       class="transition-colors duration-500"
diff --git a/packages/svelte-ux/src/routes/docs/components/Card/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Card/+page.svelte
@@ -110,10 +110,10 @@
       </div>
     </Card>
     <Card title="Title" subheading="with content">
-      <div slot="contents" class="bg-red-500/10">Contents</div>
+      <div slot="contents" class="bg-danger/10">Contents</div>
     </Card>
     <Card title="Title" subheading="with tall content">
-      <div slot="contents" class="bg-red-500/10 h-40">Contents</div>
+      <div slot="contents" class="bg-danger/10 h-40">Contents</div>
     </Card>
   </div>
 </Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/Icon/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Icon/+page.svelte
@@ -58,18 +58,18 @@
 <h2>Color</h2>
 
 <Preview>
-  <Icon path={mdiAccount} class="text-red-500" />
+  <Icon path={mdiAccount} class="text-danger" />
   <Icon path={mdiAccount} class="text-blue-500" />
-  <Icon path={mdiAccount} class="text-green-500" />
+  <Icon path={mdiAccount} class="text-success-500" />
   <Icon path={mdiAccount} class="text-surface-content/50" />
-  <Icon svgUrl="https://api.iconify.design/mdi:account.svg" class="text-red-500" />
+  <Icon svgUrl="https://api.iconify.design/mdi:account.svg" class="text-danger" />
   <Icon
     svg={'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>'}
     class="fill-blue-500"
   />
   <Icon
     svgUrl="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/user.svg"
-    class="text-green-500"
+    class="text-success-500"
   />
   <Icon path={mdiAccount} style="color:red" />
 </Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
@@ -54,7 +54,7 @@
     <svelte:fragment slot="beforeOptions" let:selection>
       {#if selection.isMaxSelected()}
         <div
-          class="bg-red-50 border-red-500 text-red-600 border text-sm font-semibold p-2 rounded mb-1"
+          class="bg-danger/5 border-danger text-danger-600 border text-sm font-semibold p-2 rounded mb-1"
           transition:slide
         >
           Maximum selection reached
@@ -123,7 +123,7 @@
     <MultiSelect {options} {value} on:change={(e) => (value = e.detail.value)} inlineSearch max={2}>
       <div slot="actions" let:selection class="flex items-center">
         {#if selection.isMaxSelected()}
-          <div class="text-sm text-red-500">Maximum selection reached</div>
+          <div class="text-sm text-danger">Maximum selection reached</div>
         {/if}
       </div>
     </MultiSelect>
@@ -148,7 +148,7 @@
         {indeterminate}
         on:change={onChange}
       >
-        <span class="uppercase text-red-500">{label}</span>
+        <span class="uppercase text-danger">{label}</span>
       </MultiSelectOption>
     </MultiSelect>
   </div>
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte
@@ -57,7 +57,7 @@
     <svelte:fragment slot="beforeOptions" let:selection>
       {#if selection.isMaxSelected()}
         <div
-          class="bg-red-50 border-red-500 text-red-600 border text-sm font-semibold p-2 rounded mb-1"
+          class="bg-danger/5 border-danger text-danger-600 border text-sm font-semibold p-2 rounded mb-1"
           transition:slide
         >
           Maximum selection reached
@@ -106,7 +106,7 @@
   <MultiSelectField {options} {value} on:change={(e) => (value = e.detail.value)} max={2}>
     <div slot="actions" let:selection class="flex items-center">
       {#if selection.isMaxSelected()}
-        <div class="text-sm text-red-500">Maximum selection reached</div>
+        <div class="text-sm text-danger">Maximum selection reached</div>
       {/if}
     </div>
   </MultiSelectField>
@@ -144,7 +144,7 @@
       {indeterminate}
       on:change={onChange}
     >
-      <span class="uppercase text-red-500">{label}</span>
+      <span class="uppercase text-danger">{label}</span>
     </MultiSelectOption>
   </MultiSelectField>
 </Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
@@ -170,7 +170,7 @@
             root: 'py-1',
           }}
         >
-          <span class="uppercase text-red-500">{label}</span>
+          <span class="uppercase text-danger">{label}</span>
         </MultiSelectOption>
       </MultiSelectMenu>
     </ToggleButton>
diff --git a/packages/svelte-ux/src/routes/docs/components/Notification/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Notification/+page.svelte
@@ -15,7 +15,7 @@
   <div class="w-[400px]">
     <Notification open closeIcon>
       <div slot="icon">
-        <Icon path={mdiCheckCircleOutline} class="text-green-500" />
+        <Icon path={mdiCheckCircleOutline} class="text-success-500" />
       </div>
       <div slot="title">Successfully Saved!</div>
       <div slot="description">Anyone with a link can now view this file.</div>
diff --git a/packages/svelte-ux/src/routes/docs/components/ProgressCircle/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ProgressCircle/+page.svelte
@@ -165,9 +165,9 @@
 <Preview>
   <div class="flex gap-4">
     <ProgressCircle class="text-blue-500" />
-    <ProgressCircle class="text-red-500" />
+    <ProgressCircle class="text-danger" />
     <ProgressCircle class="text-purple-500" />
-    <ProgressCircle class="text-green-500" />
+    <ProgressCircle class="text-success-500" />
     <ProgressCircle class="text-orange-500" />
   </div>
 </Preview>
@@ -177,9 +177,9 @@
 <Preview>
   <div class="flex gap-4">
     <ProgressCircle class="text-blue-500 [--track-color:theme(colors.blue.100)]" track />
-    <ProgressCircle class="text-red-500 [--track-color:theme(colors.red.100)]" track />
+    <ProgressCircle class="text-danger [--track-color:theme(colors.red.100)]" track />
     <ProgressCircle class="text-purple-500 [--track-color:theme(colors.purple.100)]" track />
-    <ProgressCircle class="text-green-500 [--track-color:theme(colors.green.100)]" track />
+    <ProgressCircle class="text-success-500 [--track-color:theme(colors.green.100)]" track />
     <ProgressCircle class="text-orange-500 [--track-color:theme(colors.orange.100)]" track />
   </div>
 </Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte
@@ -121,7 +121,7 @@
       }}
       classes={{
         value:
-          'font-bold text-transparent bg-clip-text bg-gradient-to-b from-green-200 via-cyan-400 to-blue-500',
+          'font-bold text-transparent bg-clip-text bg-gradient-to-b from-success-200 via-cyan-400 to-blue-500',
       }}
     />
   </span>
@@ -243,7 +243,7 @@
   <ScrollingValue
     bind:value
     {axis}
-    classes={{ value: 'text-6xl first:bg-red-500/50 last:bg-green-500/50' }}
+    classes={{ value: 'text-6xl first:bg-danger/50 last:bg-success-500/50' }}
   />
   <div class="grid grid-flow-col">
     <Button on:click={() => (value -= 100)}>-100</Button>
diff --git a/packages/svelte-ux/src/routes/docs/components/SpringValue/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SpringValue/+page.svelte
@@ -68,7 +68,7 @@
 
 <Preview>
   <SpringValue {value} let:value>
-    <span class={cls('tabular-nums', (value ?? 0) < 0 ? 'text-red-500' : 'text-green-500')}>
+    <span class={cls('tabular-nums', (value ?? 0) < 0 ? 'text-danger' : 'text-success-500')}>
       {$format(value, 'decimal')}
     </span>
   </SpringValue>
diff --git a/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte
@@ -488,7 +488,7 @@
   <TextField
     label="Search"
     base
-    class="pl-2 text-red-500 bg-red-500/10 rounded-full"
+    class="pl-2 text-danger bg-danger/10 rounded-full"
   />
 </Preview>
 -->
diff --git a/packages/svelte-ux/src/routes/docs/components/TweenedValue/+page.svelte b/packages/svelte-ux/src/routes/docs/components/TweenedValue/+page.svelte
@@ -70,7 +70,7 @@
 
 <Preview>
   <TweenedValue {value} let:value>
-    <span class={cls('tabular-nums', (value ?? 0) < 0 ? 'text-red-500' : 'text-green-500')}>
+    <span class={cls('tabular-nums', (value ?? 0) < 0 ? 'text-danger' : 'text-success')}>
       {$format(value, 'decimal')}
     </span>
   </TweenedValue>

Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@`
`91`	`91`	`class={cls(`
`92`	`92`	`'text-sm px-2 rounded',`
`93`	`93`	`status === 'beta' && 'bg-yellow-500/20 text-yellow-800',`
`94`		`- status === 'deprecated' && 'bg-red-500/20 text-red-900'`
	`94`	`+ status === 'deprecated' && 'bg-danger/20 text-danger-900'`
`95`	`95`	`)}`
`96`	`96`	`>`
`97`	`97`	`{status}`