Merge pull request #626 from appwrite/feat-new-pink

feat: new pink

Author: TorstenDittmann

package-lock.json

@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@appwrite.io/console": "^0.3.0",
-        "@appwrite.io/pink": "0.1.0-next.9",
-        "@appwrite.io/pink-icons": "^0.1.0-next.9",
+        "@appwrite.io/pink": "0.1.0",
+        "@appwrite.io/pink-icons": "^0.1.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",
         "@sentry/tracing": "^7.66.0",

package.json

@@ -382,9 +382,9 @@
     }
 
     :global(.theme-dark) .card {
-        --cmd-center-bg: hsl(var(--color-neutral-100-new));
+        --cmd-center-bg: hsl(var(--color-neutral-100));
         --cmd-center-border: hsl(var(--color-neutral-150));
-        --cmd-center-shadow: 0px 16px 32px 0px hsl(var(--color-neutral-110-new));
+        --cmd-center-shadow: 0px 16px 32px 0px hsl(var(--color-neutral-110));
 
         --kbd-bg: hsl(var(--color-neutral-150));
 
@@ -394,8 +394,8 @@
         --result-bg: hsl(var(--color-neutral-200));
         --footer-bg: linear-gradient(
             180deg,
-            hsl(var(--color-neutral-100-new)) 0%,
-            hsl(var(--color-neutral-85-new)) 100%
+            hsl(var(--color-neutral-100)) 0%,
+            hsl(var(--color-neutral-85)) 100%
         );
 
         --icon-color: hsl(var(--color-neutral-70));

src/lib/commandCenter/panels/template.svelte

@@ -2,7 +2,6 @@
     import { toggle } from '$lib/helpers/array';
     import { isHTMLInputElement } from '$lib/helpers/types';
     import { TableCell } from '.';
-    import { InputCheckbox } from '../forms';
 
     export let id: string;
     export let selectedIds: string[] = [];
@@ -30,9 +29,10 @@
         tabindex="-1"
         on:click={handleClick}
         on:keypress={handleClick} />
-    <InputCheckbox
-        bind:element={el}
-        id="select-{id}"
+    <input
+        {id}
+        type="checkbox"
+        bind:this={el}
         checked={selectedIds.includes(id)}
         on:click={handleClick} />
 </TableCell>

src/lib/elements/table/cellCheck.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
     import { isHTMLInputElement } from '$lib/helpers/types';
-
     import { TableCellHead } from '.';
-    import { InputCheckbox } from '../forms';
 
     export let selected: string[] = [];
     export let pageItemsIds: string[] = [];
@@ -25,9 +23,10 @@
 </script>
 
 <TableCellHead width={10}>
-    <InputCheckbox
+    <input
         id="select-all"
         indeterminate={someSelected && !allSelected}
+        type="checkbox"
         checked={allSelected}
         on:click={handleClick} />
 </TableCellHead>

src/lib/elements/table/cellHeadCheck.svelte

@@ -213,76 +213,6 @@
         pointer-events: none;
     }
 
-    :root {
-        /** Neutral **/
-
-        --color-neutral-0-new: 0 0% 100%; /* #ffffff */
-        --color-neutral-5-new: 240 11% 98%; /* #FAFAFB */
-        --color-neutral-10-new: 240 9% 94%; /* #EDEDF0 */
-        --color-neutral-15-new: 240 4% 85%; /* #D8D8DB */
-        --color-neutral-20-new: 240 3% 77%; /* #C3C3C6 */
-
-        --color-neutral-50-new: 240 2% 52%; /* #818186 */
-        --color-neutral-60-new: 240 2% 43%; /* #6C6C71 */
-        --color-neutral-70-new: 240 3% 35%; /* #56565C */
-
-        --color-neutral-80-new: 240 4% 27%; /* #414146 */
-        --color-neutral-85-new: 240 4% 18%; /* #2D2D31 */
-        --color-neutral-90-new: 240 7% 12%; /* #1D1D21 */
-        --color-neutral-100-new: 240 6% 10%; /* #19191C */
-        --color-neutral-110-new: 240 5% 8%; /* #141416 */
-
-        --color-neutral-0: var(--color-neutral-0-new);
-        --color-neutral-5: var(--color-neutral-5-new);
-        --color-neutral-10: var(--color-neutral-10-new);
-        --color-neutral-30: var(--color-neutral-15-new);
-        --color-neutral-50: var(--color-neutral-20-new);
-
-        --color-neutral-70: var(--color-neutral-50-new);
-        --color-neutral-100: var(--color-neutral-60-new);
-        --color-neutral-120: var(--color-neutral-70-new);
-
-        --color-neutral-150: var(--color-neutral-80-new);
-        --color-neutral-200: var(--color-neutral-85-new);
-        --color-neutral-300: var(--color-neutral-90-new);
-        --color-neutral-400: var(--color-neutral-100-new);
-        --color-neutral-500: var(--color-neutral-110-new);
-
-        // --color-neutral-0:   0    0% 100%;   /* #ffffff */
-        // --color-neutral-5:   240 11%  98%;   /* #FAFAFB */
-        // --color-neutral-10:  240  9%  94%;   /* #EDEDF0 */
-        // --color-neutral-15:  240  4%  85%;   /* #D8D8DB */
-        // --color-neutral-20:  240  3%  77%;   /* #C3C3C6 */
-
-        // --color-neutral-50:  240  2%  52%;   /* #818186 */
-        // --color-neutral-60:  240  2%  43%;   /* #6C6C71 */
-        // --color-neutral-70:  240  3%  35%;   /* #56565C */
-
-        // --color-neutral-80:  240  4%  27%;   /* #414146 */
-        // --color-neutral-85:  240  4%  18%;   /* #2D2D31 */
-        // --color-neutral-90:  240  7%  12%;   /* #1D1D21 */
-        // --color-neutral-100: 240  6%  10%;   /* #19191C */
-    }
-
-    .theme-dark .modal::backdrop {
-        background-color: hsl(240 5% 8% / 0.6);
-    }
-
-    .theme-dark .card-header {
-        background: var(--url) #18181b;
-        background-repeat: no-repeat;
-        background-position: top right;
-    }
-    .theme-light .card-header {
-        background-color: #fbfbfc;
-        background-repeat: no-repeat;
-        background-position: top right;
-    }
-
-    .theme-dark .card {
-        --p-card-bg-color: var(--color-neutral-100-new);
-    }
-
     .is-cloud {
         --heading-font: 'Aeonik Pro', arial, sans-serif;
         .heading-level {