From 1200671633b75351626ee1d5ad11542816e113da Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Tue, 6 Feb 2024 14:12:23 +0100
Subject: [PATCH 01/16] chore: cleanup safelist

---
 .../shared/src/components/inputs/Input.svelte |  6 ++--
 packages/shared/tailwind.config.js            | 31 -------------------
 2 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/packages/shared/src/components/inputs/Input.svelte b/packages/shared/src/components/inputs/Input.svelte
index 0fe7495e76..9d8e3c9b55 100644
--- a/packages/shared/src/components/inputs/Input.svelte
+++ b/packages/shared/src/components/inputs/Input.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount, createEventDispatcher, tick } from 'svelte'
     import { Text, InputContainer, TextPropTypes, TextType } from '@ui'
+    import { TextAlignment, TEXT_ALIGNMENT_MAP } from '@bloomwalletio/ui'
     import { DECIMAL_SEPARATORS, formatNumber, getDecimalSeparator, parseCurrency } from '@core/i18n'
     import { localize } from '@core/i18n'
 
@@ -26,7 +27,7 @@
     export let clearBackground = false
     export let clearPadding = false
     export let clearBorder = false
-    export let alignment: 'left' | 'right' | 'center' | 'justify' = 'left'
+    export let alignment: TextAlignment = 'left'
     export let textProps: TextPropTypes = { type: TextType.p, fontSize: '11', lineHeight: '140' }
     export let hasFocus = false
     export let validationFunction: ((arg: string) => void) | undefined = undefined
@@ -161,8 +162,9 @@
                         {value}
                         bind:this={inputElement}
                         {maxlength}
-                        class="w-full text-{alignment}
+                        class="w-full
                             bg-surface dark:bg-surface-dark
+                            {TEXT_ALIGNMENT_MAP[alignment]}
                             {disabled
                             ? 'text-gray-400 dark:text-gray-700'
                             : 'text-gray-800 dark:text-white'} {inputClasses}"
diff --git a/packages/shared/tailwind.config.js b/packages/shared/tailwind.config.js
index 9fd4cd095d..fcc58808ca 100644
--- a/packages/shared/tailwind.config.js
+++ b/packages/shared/tailwind.config.js
@@ -13,12 +13,6 @@ module.exports = {
     presets: [BLOOM_UI_PRESET],
     plugins: [exposeDarkModeStrategy],
     safelist: [
-        {
-            pattern: /^from-/,
-        },
-        {
-            pattern: /^to-/,
-        },
         {
             pattern: /^bg-/,
             variants: ['dark'],
@@ -29,37 +23,12 @@ module.exports = {
         {
             pattern: /^text-/,
         },
-        {
-            pattern: /^font-/,
-        },
-        {
-            pattern: /^grid-cols-/,
-            variants: ['sm', 'md', 'lg', 'xl', '2xl'],
-        },
         {
             pattern: /^col-span-/,
         },
-        {
-            pattern: /^rounded-/,
-        },
-        {
-            pattern: /^p-/,
-        },
-        {
-            pattern: /^px-/,
-        },
-        {
-            pattern: /^divide-/,
-        },
         {
             pattern: /^shadow/,
         },
-        {
-            pattern: /^sr-only/,
-        },
-        {
-            pattern: /^h-/,
-        },
     ].concat(BLOOM_UI_PRESET?.safelist),
     theme: {
         extend: {

From 4c8d4ad47821fa11eacc7befd6246a4be69abfee Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Tue, 6 Feb 2024 14:55:20 +0100
Subject: [PATCH 02/16] chore: remove dynamic class names

---
 .../desktop/views/components/Background.svelte     |  3 +--
 .../shared/src/components/StrengthMeter.svelte     | 14 ++++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/desktop/views/components/Background.svelte b/packages/desktop/views/components/Background.svelte
index b3b6604541..b0ab190df7 100644
--- a/packages/desktop/views/components/Background.svelte
+++ b/packages/desktop/views/components/Background.svelte
@@ -2,12 +2,11 @@
     import appFeatures from '@features/app.features'
     import { BgGradient, Particles } from '.'
 
-    export let surface: 0 | 1 | 2 | 'brand' | 'invert' = 0
     export let gradient: 'spread' | 'center' | undefined = undefined
     export let particles: boolean = false
 </script>
 
-<div class="absolute inset-0 flex items-center justify-center bg-surface-{surface} dark:bg-surface-{surface}-dark">
+<div class="absolute inset-0 flex items-center justify-center bg-surface-0 dark:bg-surface-0-dark">
     {#if gradient}
         <BgGradient variant={gradient} />
     {/if}
diff --git a/packages/shared/src/components/StrengthMeter.svelte b/packages/shared/src/components/StrengthMeter.svelte
index df7765eec9..fb05b7f9f7 100644
--- a/packages/shared/src/components/StrengthMeter.svelte
+++ b/packages/shared/src/components/StrengthMeter.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
-    import { Pill, Text } from '@bloomwalletio/ui'
+    import { Color, Pill, Text } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
 
     export let strength: 0 | 1 | 2 | 3 | 4 | undefined = undefined
 
-    const STRENGTH_COLORS = ['danger', 'orange', 'warning', 'info', 'success']
+    const STRENGTH_COLORS_MAP: Record<number, [Color, string]> = {
+        0: ['danger', 'bg-danger'],
+        1: ['orange', 'bg-orange'],
+        2: ['warning', 'bg-warning'],
+        3: ['info', 'bg-info'],
+        4: ['success', 'bg-success'],
+    }
     const STRENGTH_LEVELS = 4
 </script>
 
@@ -12,13 +18,13 @@
     <strength-meter>
         <text-container>
             <Text>{localize('general.passwordStrength')}</Text>
-            <Pill color={STRENGTH_COLORS[strength]}>
+            <Pill color={STRENGTH_COLORS_MAP[strength][0]}>
                 {localize(`general.passwordStrength${strength}`).toLocaleUpperCase()}
             </Pill>
         </text-container>
         <strength-block-container class:ghost={strength === 0}>
             {#each Array(STRENGTH_LEVELS) as _, i}
-                <strength-block class="bg-{STRENGTH_COLORS[strength > i ? i + 1 : 0]}" class:ghost={strength <= i} />
+                <strength-block class={STRENGTH_COLORS_MAP[strength > i ? i + 1 : 0][1]} class:ghost={strength <= i} />
             {/each}
         </strength-block-container>
     </strength-meter>

From 040f29c22067fb31e66182ea18d8b8e8cbf8a309 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Wed, 7 Feb 2024 11:15:43 +0100
Subject: [PATCH 03/16] chore: remove dynamic classes from tooltip

---
 .../network-config/views/ConnectLedgerDeviceDrawer.svelte | 7 ++++---
 packages/shared/src/components/Tooltip.svelte             | 8 ++------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/desktop/views/dashboard/drawers/network-config/views/ConnectLedgerDeviceDrawer.svelte b/packages/desktop/views/dashboard/drawers/network-config/views/ConnectLedgerDeviceDrawer.svelte
index 9a891528ee..b29a9a09ef 100644
--- a/packages/desktop/views/dashboard/drawers/network-config/views/ConnectLedgerDeviceDrawer.svelte
+++ b/packages/desktop/views/dashboard/drawers/network-config/views/ConnectLedgerDeviceDrawer.svelte
@@ -5,6 +5,7 @@
     import { LedgerConnectionState, ledgerConnectionState } from '@core/ledger'
     import { Router } from '@core/router'
     import { Animation, FontWeight, Icon, Pane, Text, TextType } from '@ui'
+    import { Icon as IconName } from '@auxiliary/icon'
     import { NetworkConfigRoute, networkConfigRouter } from '../'
 
     export let drawerRouter: Router<NetworkConfigRoute>
@@ -42,10 +43,10 @@
                 {#each requirements as [bool, locale], idx}
                     <div class="flex flex-row items-center space-x-2 p-4">
                         <Icon
-                            icon={`status-${bool ? 'success' : 'error'}`}
-                            classes={`text-white bg-${bool ? 'green' : 'red'}-600 rounded-full`}
+                            icon={bool ? IconName.StatusSuccess : IconName.StatusError}
+                            classes={`text-white ${bool ? 'bg-green' : 'bg-red'}-600 rounded-full`}
                         />
-                        <Text type="p" fontWeight={FontWeight.semibold}
+                        <Text type={TextType.p} fontWeight={FontWeight.semibold}
                             >{localize(`${LOCALE_BASE_PATH}.requirements.${locale}`)}</Text
                         >
                     </div>
diff --git a/packages/shared/src/components/Tooltip.svelte b/packages/shared/src/components/Tooltip.svelte
index 6c7ab5d552..7fb6c5df5b 100644
--- a/packages/shared/src/components/Tooltip.svelte
+++ b/packages/shared/src/components/Tooltip.svelte
@@ -10,10 +10,6 @@
     export let offset: number = 10
     export let inlineStyle: string = ''
     export let size: 'small' | 'medium' | undefined = 'medium'
-    export let backgroundColor = 'white'
-    export let darkBackgroundColor = 'gray-900'
-    export let borderColor = 'white'
-    export let darkBorderColor = 'gray-700'
 
     let tooltip: HTMLElement
     let top = 0
@@ -70,13 +66,13 @@
 <tooltip
     class="{size} shadow-elevation-4 fixed text-center z-10 whitespace-pre-line
     {size === 'small' ? 'px-2 py-1 rounded-md' : 'p-4 rounded-xl'}
-    w-auto max-w-60 shadow-lg border border-solid bg-{backgroundColor} dark:bg-{darkBackgroundColor} border-{borderColor} dark:border-{darkBorderColor} {position} {classes}"
+    w-auto max-w-60 shadow-lg border border-solid bg-white dark:bg-surface-dark border-white dark:border-stroke-dark {position} {classes}"
     class:darkmode={$darkMode}
     style="top: {top}px; left:{left}px; {inlineStyle}"
     bind:this={tooltip}
 >
     <slot />
-    <triangle class="border-{borderColor} dark:border-{darkBorderColor}">
+    <triangle class="border-white dark:border-stroke-dark">
         <inner-triangle class="border-gray-700" />
     </triangle>
 </tooltip>

From 68d93f76d2034beef89f7ccdb1626b0c4eaa7bb1 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Wed, 7 Feb 2024 11:21:19 +0100
Subject: [PATCH 04/16] chore: remove dynamic classes from ButtonTile

---
 .../views/components/ButtonTile.svelte        | 21 ++++++++++---------
 .../views/ChooseNetworkView.svelte            |  5 +----
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/desktop/views/components/ButtonTile.svelte b/packages/desktop/views/components/ButtonTile.svelte
index fa92d5244b..02f5f25111 100644
--- a/packages/desktop/views/components/ButtonTile.svelte
+++ b/packages/desktop/views/components/ButtonTile.svelte
@@ -8,13 +8,20 @@
     export let icon: IconName | undefined = undefined
     export let iconSize: IconSize = 'base'
     export let iconColor: keyof typeof colors = 'brand'
-    export let iconColorShade: string | undefined = undefined
-    export let backgroundColor: string | undefined = undefined
     export let disabled: boolean = false
     export let hidden: boolean = false
     export let selected: boolean = false
 
     export let onClick: () => unknown
+
+    const ICON_BACKGROUND_MAP: Record<string, string> = {
+        'blue-900': 'bg-shimmer',
+        '#ffffff': 'bg-black', // IOTA
+        brand: 'bg-brand/20',
+        info: 'bg-info/20',
+        orange: 'bg-orange/20',
+        success: 'bg-success/20',
+    }
 </script>
 
 {#if !hidden}
@@ -25,15 +32,9 @@
                     <slot name="icon" />
                 {:else if icon}
                     <icon-container
-                        class="w-12 h-12 flex justify-center items-center rounded-xl {backgroundColor
-                            ? `bg-${backgroundColor}`
-                            : `bg-${iconColor}/20`}"
+                        class="w-12 h-12 flex justify-center items-center rounded-xl {ICON_BACKGROUND_MAP[iconColor]}"
                     >
-                        <Icon
-                            name={icon}
-                            customColor={iconColorShade ? `${iconColor}-${iconColorShade}` : iconColor}
-                            size={iconSize}
-                        />
+                        <Icon name={icon} customColor={iconColor} size={iconSize} />
                     </icon-container>
                 {/if}
             </div>
diff --git a/packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte b/packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte
index 1fed270095..7c2311fe5f 100644
--- a/packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte
+++ b/packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte
@@ -97,7 +97,6 @@
             icon={IconName.Iota}
             iconSize="md"
             iconColor="#ffffff"
-            backgroundColor="black"
             hidden={features?.onboarding?.[OnboardingNetworkType.Iota]?.hidden}
             disabled={!features?.onboarding?.[OnboardingNetworkType.Iota]?.enabled}
             onClick={() => onNetworkClick(OnboardingNetworkType.Iota)}
@@ -112,9 +111,7 @@
             )}
             icon={IconName.Shimmer}
             iconSize="md"
-            iconColor="blue"
-            iconColorShade="900"
-            backgroundColor="shimmer"
+            iconColor="blue-900"
             hidden={features?.onboarding?.[OnboardingNetworkType.Shimmer]?.hidden}
             disabled={!features?.onboarding?.[OnboardingNetworkType.Shimmer]?.enabled}
             onClick={() => onNetworkClick(OnboardingNetworkType.Shimmer)}

From fc7895758b95c2286dcded35a0536750a46d49b4 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Wed, 7 Feb 2024 11:43:27 +0100
Subject: [PATCH 05/16] chore: remove bg- pattern from tailwind config

---
 packages/shared/src/components/boxes/Box.svelte           | 8 ++++----
 .../shared/src/components/inputs/InputContainer.svelte    | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/shared/src/components/boxes/Box.svelte b/packages/shared/src/components/boxes/Box.svelte
index 65fdccc265..5ed4eab318 100644
--- a/packages/shared/src/components/boxes/Box.svelte
+++ b/packages/shared/src/components/boxes/Box.svelte
@@ -3,8 +3,8 @@
     export let row = false
     export let clearBackground = false
     export let clearPadding = false
-    export let backgroundColor = 'surface'
-    export let darkBackgroundColor = 'surface-dark'
+    export let backgroundColor = 'bg-surface'
+    export let darkBackgroundColor = 'dark:bg-surface-dark'
     export let classes = ''
 </script>
 
@@ -14,8 +14,8 @@
         ${col ? 'flex-col' : ''}
         ${row ? 'flex-row' : ''}
         ${clearPadding ? '' : 'px-4 py-4'}
-        ${backgroundColor && !clearBackground ? 'bg-' + backgroundColor : ''}  
-        ${darkBackgroundColor && !clearBackground ? 'dark:bg-' + darkBackgroundColor : ''}
+        ${backgroundColor && !clearBackground ? backgroundColor : ''}  
+        ${darkBackgroundColor && !clearBackground ? darkBackgroundColor : ''}
         ${classes}
     `}
 >
diff --git a/packages/shared/src/components/inputs/InputContainer.svelte b/packages/shared/src/components/inputs/InputContainer.svelte
index b4cf241443..10e8c88ab3 100644
--- a/packages/shared/src/components/inputs/InputContainer.svelte
+++ b/packages/shared/src/components/inputs/InputContainer.svelte
@@ -7,8 +7,8 @@
     export let isFocused: boolean = false
     export let error: string = ''
     export let classes: string = ''
-    export let backgroundColor = 'bg-surface'
-    export let darkBackgroundColor = 'bg-surface-dark'
+    export let backgroundColor: string | undefined
+    export let darkBackgroundColor: string | undefined
     export let clearBackground = false
     export let clearPadding = false
     export let clearBorder = false

From 9316b0aa641ecd43ef4af7f65edae0c6c442225a Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Wed, 7 Feb 2024 11:53:17 +0100
Subject: [PATCH 06/16] chore: cleanup old spinner

---
 packages/shared/src/components/Spinner.svelte | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/shared/src/components/Spinner.svelte b/packages/shared/src/components/Spinner.svelte
index b75d06d44a..ad6155c21c 100644
--- a/packages/shared/src/components/Spinner.svelte
+++ b/packages/shared/src/components/Spinner.svelte
@@ -1,26 +1,20 @@
 <script lang="ts">
-    import { Icon, Text } from '@ui'
+    import { Icon } from '@ui'
+    import { Icon as IconName } from '@auxiliary/icon'
 
     export let busy = false
-    export let message = ''
     export let size = 24
-    export let color = 'gray-500'
-    export let darkColor = 'white'
-    export let classes = ''
 </script>
 
-{#if busy || message}
-    <spinner-container class={`flex flex-row items-center ${classes}`}>
+{#if busy}
+    <spinner-container class={'flex flex-row items-center'}>
         {#if busy}
             <Icon
-                icon="refresh"
+                icon={IconName.Refresh}
                 width={size}
                 height={size}
-                classes={`animate-spin-reverse text-${color} dark:text-${darkColor}`}
+                classes={'animate-spin-reverse text-gray-500 dark:text-white'}
             />
         {/if}
-        {#if message}
-            <Text type="p" classes="ml-2" secondary>{message}</Text>
-        {/if}
     </spinner-container>
 {/if}

From cb63d084a364e0f54618fd71b254a4a99c611e5e Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Wed, 7 Feb 2024 13:54:48 +0100
Subject: [PATCH 07/16] chore: remove custom safelist

---
 packages/shared/tailwind.config.js | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/packages/shared/tailwind.config.js b/packages/shared/tailwind.config.js
index fcc58808ca..a603edf9fb 100644
--- a/packages/shared/tailwind.config.js
+++ b/packages/shared/tailwind.config.js
@@ -12,24 +12,7 @@ module.exports = {
     content: [...SHARED_CONTENT_ROUTES, ...NODE_MODULES_ROUTES, ...DESKTOP_CONTENT_ROUTES],
     presets: [BLOOM_UI_PRESET],
     plugins: [exposeDarkModeStrategy],
-    safelist: [
-        {
-            pattern: /^bg-/,
-            variants: ['dark'],
-        },
-        {
-            pattern: /^border-/,
-        },
-        {
-            pattern: /^text-/,
-        },
-        {
-            pattern: /^col-span-/,
-        },
-        {
-            pattern: /^shadow/,
-        },
-    ].concat(BLOOM_UI_PRESET?.safelist),
+    safelist: [BLOOM_UI_PRESET?.safelist],
     theme: {
         extend: {
             ...BLOOM_UI_PRESET?.theme?.extend,

From 469772207118fe7b7f303daad96394ef26dbfac6 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Wed, 7 Feb 2024 14:41:50 +0100
Subject: [PATCH 08/16] chore: remov safelist

---
 packages/shared/tailwind.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/shared/tailwind.config.js b/packages/shared/tailwind.config.js
index a603edf9fb..01b8c93383 100644
--- a/packages/shared/tailwind.config.js
+++ b/packages/shared/tailwind.config.js
@@ -12,7 +12,6 @@ module.exports = {
     content: [...SHARED_CONTENT_ROUTES, ...NODE_MODULES_ROUTES, ...DESKTOP_CONTENT_ROUTES],
     presets: [BLOOM_UI_PRESET],
     plugins: [exposeDarkModeStrategy],
-    safelist: [BLOOM_UI_PRESET?.safelist],
     theme: {
         extend: {
             ...BLOOM_UI_PRESET?.theme?.extend,

From 366461a26b6efbf7ec288e140ecb5586b044e12c Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Wed, 7 Feb 2024 15:55:49 +0100
Subject: [PATCH 09/16] chore: update ui kit

---
 packages/shared/package.json | 2 +-
 yarn.lock                    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/shared/package.json b/packages/shared/package.json
index 94108ba03b..00ba7c543c 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.19.10",
+        "@bloomwalletio/ui": "0.19.11",
         "@iota/bundle": "1.0.0-beta.30",
         "@iota/converter": "1.0.0-beta.30",
         "@iota/crypto.js": "1.8.6",
diff --git a/yarn.lock b/yarn.lock
index 2aa4a8fb90..b0b438525a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -377,10 +377,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.19.10":
-  version "0.19.10"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.19.10/93b7c4b247878295c34237a176cb1ca5bc9038f2#93b7c4b247878295c34237a176cb1ca5bc9038f2"
-  integrity sha512-kgACAP249JsD/HWFVMNuAzD2fyMAFNeFl83hbfE3JyBEvS6eNul9KxwYdUUCNgKf0WBResR3SBeRUGTSnL644g==
+"@bloomwalletio/ui@0.19.11":
+  version "0.19.11"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.19.11/a2aeebec2672d81d26c6713f8b3773ad0d9d59d5#a2aeebec2672d81d26c6713f8b3773ad0d9d59d5"
+  integrity sha512-jcBzKk6SpWIwP1SJ3uxe5BaZbRPZgEwajy2sVH1/jT9Fw2cxB/1dV49hXatB+8wsozwG347YrO0tB0KVnkzJ2w==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"

From c7468576a301280906137aa6b7b6abf8bbeecd53 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Thu, 8 Feb 2024 14:48:45 +0100
Subject: [PATCH 10/16] chore: cleanup AccountSwitcher

---
 packages/desktop/components/AccountSwitcher.svelte | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/desktop/components/AccountSwitcher.svelte b/packages/desktop/components/AccountSwitcher.svelte
index c13131d027..a6805bbed7 100644
--- a/packages/desktop/components/AccountSwitcher.svelte
+++ b/packages/desktop/components/AccountSwitcher.svelte
@@ -4,8 +4,8 @@
     import { setSelectedAccount } from '@core/account/actions'
     import { selectedAccount } from '@core/account/stores'
     import { formatCurrency, localize } from '@core/i18n'
-    import { activeProfile, visibleActiveAccounts } from '@core/profile/stores'
-    import { allAccountFiatBalances, selectedAccountTokens } from '@core/token/stores'
+    import { visibleActiveAccounts } from '@core/profile/stores'
+    import { allAccountFiatBalances } from '@core/token/stores'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
 
     export let navbar: boolean = false
@@ -13,8 +13,6 @@
 
     const menu: Menu | undefined = undefined
 
-    $: baseCoin = $selectedAccountTokens[$activeProfile?.network?.id]?.baseCoin
-
     function onAccountClick(accountIndex: number): void {
         setSelectedAccount(accountIndex)
         menu?.close()

From f5f9669ab36d0558d96b813878c5b1a4e6840f8e Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Mon, 12 Feb 2024 14:53:04 +0100
Subject: [PATCH 11/16] chore: remove dynamic classes

---
 packages/shared/src/components/Text.svelte    | 29 ++++++++-----------
 .../src/components/atoms/MenuItem.svelte      | 10 +++++--
 .../components/badges/StrongholdBadge.svelte  |  2 +-
 .../src/components/inputs/AmountInput.svelte  |  2 +-
 .../components/inputs/InputContainer.svelte   |  4 +--
 .../src/components/inputs/TextInput.svelte    |  2 +-
 .../components/inputs/TokenAmountInput.svelte | 13 +++++----
 7 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/packages/shared/src/components/Text.svelte b/packages/shared/src/components/Text.svelte
index 1bc83ff71b..3e0e171ee5 100644
--- a/packages/shared/src/components/Text.svelte
+++ b/packages/shared/src/components/Text.svelte
@@ -17,19 +17,14 @@
     export let darkColor = ''
     export let overrideLeading = false
     export let classes = '' // ISSUE: https://github.com/tailwindlabs/tailwindcss/discussions/1446
-    export let whitespace: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | undefined = undefined
 
-    const DARKMODE_PREFIX = 'dark:'
-    const TEXT_PREFIX = 'text-'
-    const LEADING_PREFIX = 'leading-'
-    const WHITESPACE_PREFIX = 'whitespace-'
-    const DEFAULT_TEXT_COLOUR = TEXT_PREFIX + 'gray-800'
-    const DEFAULT_TEXT_DARK_COLOUR = DARKMODE_PREFIX + TEXT_PREFIX + 'white'
-    const ERROR_TEXT_COLOUR = TEXT_PREFIX + 'red-500'
-    const DISABLED_TEXT_COLOUR = TEXT_PREFIX + 'gray-400'
-    const DISABLED_TEXT_DARK_COLOUR = TEXT_PREFIX + 'gray-600'
-    const HIGHLIGHT_TEXT_COLOUR = TEXT_PREFIX + 'blue-500'
-    const SECONDARY_TEXT_COLOUR = TEXT_PREFIX + 'gray-500'
+    const DEFAULT_TEXT_COLOUR = 'text-gray-800'
+    const DEFAULT_TEXT_DARK_COLOUR = 'dark:text-white'
+    const ERROR_TEXT_COLOUR = 'text-red-500'
+    const DISABLED_TEXT_COLOUR = 'text-gray-400'
+    const DISABLED_TEXT_DARK_COLOUR = 'text-gray-600'
+    const HIGHLIGHT_TEXT_COLOUR = 'text-blue-500'
+    const SECONDARY_TEXT_COLOUR = 'text-gray-500'
 
     interface ICustomClass {
         fontWeight: FontWeight
@@ -97,11 +92,11 @@
         },
     }
 
-    $: formattedFontSize = fontSize ? TEXT_PREFIX + fontSize : ''
-    $: formattedLineHeight = lineHeight ? LEADING_PREFIX + lineHeight : ''
-    $: formattedColor = color ? TEXT_PREFIX + color : ''
-    $: formattedDarkColor = darkColor ? DARKMODE_PREFIX + TEXT_PREFIX + darkColor : ''
-    $: formattedWhitespace = whitespace ? WHITESPACE_PREFIX + whitespace : undefined
+    $: formattedFontSize = fontSize ?? ''
+    $: formattedLineHeight = lineHeight ? 'leading-160' : ''
+    $: formattedColor = color ?? ''
+    $: formattedDarkColor = darkColor ?? ''
+    $: formattedWhitespace = 'whitespace-pre'
 
     let _fontSize: string
     let _lineHeight: string
diff --git a/packages/shared/src/components/atoms/MenuItem.svelte b/packages/shared/src/components/atoms/MenuItem.svelte
index f2b3be945d..d90ac5be33 100644
--- a/packages/shared/src/components/atoms/MenuItem.svelte
+++ b/packages/shared/src/components/atoms/MenuItem.svelte
@@ -49,12 +49,18 @@
         {/if}
         <div class="flex flex-col text-left">
             <text-container class:disabled={isDisabled} class={variant}>
-                <Text color={isDisabled ? 'gray-400' : 'gray-800'} darkColor={isDisabled ? 'gray-700' : 'white'}>
+                <Text
+                    color={isDisabled ? 'text-gray-400' : 'text-gray-800'}
+                    darkColor={isDisabled ? 'dark:text-gray-700' : 'dark:text-white'}
+                >
                     {title}
                 </Text>
             </text-container>
             {#if subtitle}
-                <Text color={isDisabled ? 'gray-400' : 'gray-600'} darkColor={isDisabled ? 'gray-700' : 'gray-500'}>
+                <Text
+                    color={isDisabled ? 'text-gray-400' : 'text-gray-600'}
+                    darkColor={isDisabled ? 'dark:text-gray-700' : 'dark:text-ray-500'}
+                >
                     {subtitle}
                 </Text>
             {/if}
diff --git a/packages/shared/src/components/badges/StrongholdBadge.svelte b/packages/shared/src/components/badges/StrongholdBadge.svelte
index 218b8b4020..70059de211 100644
--- a/packages/shared/src/components/badges/StrongholdBadge.svelte
+++ b/packages/shared/src/components/badges/StrongholdBadge.svelte
@@ -25,7 +25,7 @@
 </stronghold-badge>
 {#if isTooltipVisible}
     <Tooltip anchor={tooltipAnchor} size="small" position={Position.Right} offset={6}>
-        <Text color="gray-600" darkColor="gray-400" classes="text-left" smaller>
+        <Text color="text-gray-600" darkColor="dark:text-gray-400" classes="text-left" smaller>
             {localize('tooltips.updateStronghold.profileBadge').replace('. ', '.\n')}
         </Text>
     </Tooltip>
diff --git a/packages/shared/src/components/inputs/AmountInput.svelte b/packages/shared/src/components/inputs/AmountInput.svelte
index df88306cbb..ff83382faa 100644
--- a/packages/shared/src/components/inputs/AmountInput.svelte
+++ b/packages/shared/src/components/inputs/AmountInput.svelte
@@ -4,7 +4,7 @@
     import { activeProfile } from '@core/profile/stores'
 
     export let inputElement: HTMLInputElement | undefined = undefined
-    export let fontSize = '64'
+    export let fontSize = 'text-64'
     export let fontWeight = FontWeight.semibold
     export let disabled = false
     export let hasFocus = false
diff --git a/packages/shared/src/components/inputs/InputContainer.svelte b/packages/shared/src/components/inputs/InputContainer.svelte
index 10e8c88ab3..1a13f70393 100644
--- a/packages/shared/src/components/inputs/InputContainer.svelte
+++ b/packages/shared/src/components/inputs/InputContainer.svelte
@@ -7,8 +7,8 @@
     export let isFocused: boolean = false
     export let error: string = ''
     export let classes: string = ''
-    export let backgroundColor: string | undefined
-    export let darkBackgroundColor: string | undefined
+    export let backgroundColor: string | undefined = undefined
+    export let darkBackgroundColor: string | undefined = undefined
     export let clearBackground = false
     export let clearPadding = false
     export let clearBorder = false
diff --git a/packages/shared/src/components/inputs/TextInput.svelte b/packages/shared/src/components/inputs/TextInput.svelte
index 37ab47f56f..0016bdc9b6 100644
--- a/packages/shared/src/components/inputs/TextInput.svelte
+++ b/packages/shared/src/components/inputs/TextInput.svelte
@@ -12,7 +12,7 @@
     // Text Props
     export let textType = TextType.p
     export let fontWeight: FontWeight = FontWeight.normal
-    export let fontSize = 'sm'
+    export let fontSize = 'text-32'
     export let lineHeight = '140'
 
     export function validate(): void {
diff --git a/packages/shared/src/components/inputs/TokenAmountInput.svelte b/packages/shared/src/components/inputs/TokenAmountInput.svelte
index 8dd146c094..eb30918ec0 100644
--- a/packages/shared/src/components/inputs/TokenAmountInput.svelte
+++ b/packages/shared/src/components/inputs/TokenAmountInput.svelte
@@ -23,7 +23,7 @@
     let amountInputElement: HTMLInputElement | undefined
     let error: string | undefined
     let inputLength = 0
-    let fontSize = '64'
+    let fontSize: string
     let maxLength = 0
 
     $: inputtedAmount,
@@ -35,6 +35,7 @@
     $: rawAmount =
         inputtedAmount && token?.metadata ? convertToRawAmount(inputtedAmount, token.metadata, unit) : BigInt(0)
     $: fiatAmount = token ? getFiatValueFromTokenAmount(rawAmount, token) : undefined
+    $: maxWidth = `${(inputLength * Number((/\d+/.exec(fontSize))?.[0] ?? 0) * 2) / 3}px`
 
     function getInputLength(): number {
         const length = inputtedAmount?.length || 1
@@ -70,11 +71,11 @@
 
     function getFontSizeForInputLength(): string {
         if (inputLength < 10) {
-            return '64'
+            return 'text-64'
         } else if (inputLength < 14) {
-            return '48'
+            return 'text-48'
         } else {
-            return '32'
+            return 'text-32'
         }
     }
 
@@ -96,7 +97,7 @@
     <InputContainer {error} clearBackground clearPadding clearBorder classes="w-full flex flex-col items-center">
         <div class="flex flex-row items-end space-x-0.5">
             <div class="flex flex-row w-full items-center">
-                <amount-wrapper style:--max-width={`${(inputLength * Number(fontSize) * 2) / 3}px`}>
+                <amount-wrapper style:--max-width={maxWidth}>
                     <AmountInput
                         bind:inputElement={amountInputElement}
                         bind:amount={inputtedAmount}
@@ -116,7 +117,7 @@
             </Text>
         </div>
     </InputContainer>
-    <Text fontWeight={FontWeight.semibold} color="gray-600" darkColor="gray-600">
+    <Text fontWeight={FontWeight.semibold} color="text-gray-600" darkColor="dark:text-ray-600">
         {formatCurrency(fiatAmount) || '--'}
     </Text>
 </div>

From f0703e5e0db513b614fc68f7d26ac01bb06a9ceb Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Mon, 12 Feb 2024 16:24:25 +0100
Subject: [PATCH 12/16] fix: send amount text

---
 packages/shared/src/components/Text.svelte     |  8 +++-----
 .../src/components/enums/font-weight.enum.ts   | 18 +++++++++---------
 .../components/molecules/SelectorInput.svelte  |  2 +-
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/shared/src/components/Text.svelte b/packages/shared/src/components/Text.svelte
index 3e0e171ee5..c43a8552dd 100644
--- a/packages/shared/src/components/Text.svelte
+++ b/packages/shared/src/components/Text.svelte
@@ -17,6 +17,7 @@
     export let darkColor = ''
     export let overrideLeading = false
     export let classes = '' // ISSUE: https://github.com/tailwindlabs/tailwindcss/discussions/1446
+    export let whitespace: 'whitespace-pre' | undefined = undefined
 
     const DEFAULT_TEXT_COLOUR = 'text-gray-800'
     const DEFAULT_TEXT_DARK_COLOUR = 'dark:text-white'
@@ -93,16 +94,14 @@
     }
 
     $: formattedFontSize = fontSize ?? ''
-    $: formattedLineHeight = lineHeight ? 'leading-160' : ''
+    $: formattedLineHeight = lineHeight ? 'leading-140' : ''
     $: formattedColor = color ?? ''
     $: formattedDarkColor = darkColor ?? ''
-    $: formattedWhitespace = 'whitespace-pre'
 
     let _fontSize: string
     let _lineHeight: string
     let _color: string
     let _darkColor: string
-    let _whitespace: string
 
     // Format custom inputs
     function setCustomStyles(): void {
@@ -110,7 +109,6 @@
         _lineHeight = formattedLineHeight
         _color = formattedColor
         _darkColor = formattedDarkColor
-        _whitespace = formattedWhitespace
     }
 
     // Adjust font for old override classes
@@ -161,7 +159,7 @@
         ...(_lineHeight && { lineHeight: _lineHeight }),
         ...((overrideColor || _color) && { color: _color }),
         ...((overrideColor || _darkColor) && { darkColor: _darkColor }),
-        ...(_whitespace && { whitespace: _whitespace }),
+        ...(whitespace && { whitespace }),
     }
 
     let customClassesString: string
diff --git a/packages/shared/src/components/enums/font-weight.enum.ts b/packages/shared/src/components/enums/font-weight.enum.ts
index af7a99bf27..9cbd8c60ad 100644
--- a/packages/shared/src/components/enums/font-weight.enum.ts
+++ b/packages/shared/src/components/enums/font-weight.enum.ts
@@ -1,11 +1,11 @@
 export enum FontWeight {
-    thin = 'font-100',
-    extralight = 'font-200',
-    light = 'font-300',
-    normal = 'font-400',
-    medium = 'font-500',
-    semibold = 'font-600',
-    bold = 'font-700',
-    extrabold = 'font-800',
-    black = 'font-900',
+    thin = 'font-thin',
+    extralight = 'font-extralight',
+    light = 'font-light',
+    normal = 'font-normal',
+    medium = 'font-medium',
+    semibold = 'font-semibold',
+    bold = 'font-bold',
+    extrabold = 'font-extrabold',
+    black = 'font-black',
 }
diff --git a/packages/shared/src/components/molecules/SelectorInput.svelte b/packages/shared/src/components/molecules/SelectorInput.svelte
index 827a419471..de6b03efa2 100644
--- a/packages/shared/src/components/molecules/SelectorInput.svelte
+++ b/packages/shared/src/components/molecules/SelectorInput.svelte
@@ -83,7 +83,7 @@
     >
         <div slot="right">
             {#if selected?.key && selected?.value}
-                <Text slot="right" type={TextType.pre} fontSize="sm" color="gray-600" whitespace="pre">
+                <Text slot="right" type={TextType.pre} fontSize="sm" color="gray-600" whitespace="whitespace-pre">
                     {truncateString(selected.displayedValue ?? selected.value, 9, 9)}
                 </Text>
             {/if}

From c52466c48deed7553d23b2276dbdfe907de00581 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Mon, 12 Feb 2024 16:36:09 +0100
Subject: [PATCH 13/16] chore: lint

---
 packages/shared/src/components/inputs/TokenAmountInput.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/inputs/TokenAmountInput.svelte b/packages/shared/src/components/inputs/TokenAmountInput.svelte
index 68abf801cd..4f43a6bfe9 100644
--- a/packages/shared/src/components/inputs/TokenAmountInput.svelte
+++ b/packages/shared/src/components/inputs/TokenAmountInput.svelte
@@ -37,7 +37,7 @@
     $: rawAmount =
         inputtedAmount && token?.metadata ? convertToRawAmount(inputtedAmount, token.metadata, unit) : BigInt(0)
     $: fiatAmount = token ? getFiatValueFromTokenAmount(rawAmount, token) : undefined
-    $: maxWidth = `${(inputLength * Number((/\d+/.exec(fontSize))?.[0] ?? 0) * 2) / 3}px`
+    $: maxWidth = `${(inputLength * Number(/\d+/.exec(fontSize)?.[0] ?? 0) * 2) / 3}px`
 
     function getInputLength(): number {
         const length = inputtedAmount?.length || 1

From b76207325cfc882eb7ae90f3d14181a6f05aa481 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Tue, 13 Feb 2024 12:07:53 +0100
Subject: [PATCH 14/16] fix: text-32

---
 .../src/components/inputs/TokenAmountWithSliderInput.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/inputs/TokenAmountWithSliderInput.svelte b/packages/shared/src/components/inputs/TokenAmountWithSliderInput.svelte
index bb0cf97f8c..e9df8dcaa9 100644
--- a/packages/shared/src/components/inputs/TokenAmountWithSliderInput.svelte
+++ b/packages/shared/src/components/inputs/TokenAmountWithSliderInput.svelte
@@ -111,7 +111,7 @@
             clearPadding
             clearBorder
             {disabled}
-            fontSize="32"
+            fontSize="text-32"
         />
     </div>
 

From 5c9aa1b358402f8920ad43fcc0bb134a7888bc15 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Fri, 16 Feb 2024 17:07:21 +0100
Subject: [PATCH 15/16] chore: remove background map

---
 .../desktop/views/components/ButtonTile.svelte    | 15 +++++----------
 .../network-setup/views/ChooseNetworkView.svelte  |  2 ++
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/desktop/views/components/ButtonTile.svelte b/packages/desktop/views/components/ButtonTile.svelte
index 02f5f25111..2a1e7ae993 100644
--- a/packages/desktop/views/components/ButtonTile.svelte
+++ b/packages/desktop/views/components/ButtonTile.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Icon, IconName, type IconSize, Tile, Text, TailwindPreset } from '@bloomwalletio/ui'
+    import { getHexColorFromColor, Icon, IconName, type IconSize, Tile, Text, TailwindPreset } from '@bloomwalletio/ui'
 
     const colors = TailwindPreset.theme.extend.colors
 
@@ -8,20 +8,14 @@
     export let icon: IconName | undefined = undefined
     export let iconSize: IconSize = 'base'
     export let iconColor: keyof typeof colors = 'brand'
+    export let backgroundColor: string | undefined = undefined
     export let disabled: boolean = false
     export let hidden: boolean = false
     export let selected: boolean = false
 
     export let onClick: () => unknown
 
-    const ICON_BACKGROUND_MAP: Record<string, string> = {
-        'blue-900': 'bg-shimmer',
-        '#ffffff': 'bg-black', // IOTA
-        brand: 'bg-brand/20',
-        info: 'bg-info/20',
-        orange: 'bg-orange/20',
-        success: 'bg-success/20',
-    }
+    const background = getHexColorFromColor(backgroundColor ?? `${iconColor}/20`)
 </script>
 
 {#if !hidden}
@@ -32,7 +26,8 @@
                     <slot name="icon" />
                 {:else if icon}
                     <icon-container
-                        class="w-12 h-12 flex justify-center items-center rounded-xl {ICON_BACKGROUND_MAP[iconColor]}"
+                        class="w-12 h-12 flex justify-center items-center rounded-xl"
+                        style={`background-color: ${background}`}
                     >
                         <Icon name={icon} customColor={iconColor} size={iconSize} />
                     </icon-container>
diff --git a/packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte b/packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte
index f1f5091ed5..475f764a3f 100644
--- a/packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte
+++ b/packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte
@@ -97,6 +97,7 @@
             icon={IconName.Iota}
             iconSize="md"
             iconColor="#ffffff"
+            backgroundColor="#000000"
             hidden={features?.onboarding?.[OnboardingNetworkType.Iota]?.hidden}
             disabled={!features?.onboarding?.[OnboardingNetworkType.Iota]?.enabled}
             onClick={() => onNetworkClick(OnboardingNetworkType.Iota)}
@@ -112,6 +113,7 @@
             icon={IconName.Shimmer}
             iconSize="md"
             iconColor="blue-900"
+            backgroundColor="shimmer"
             hidden={features?.onboarding?.[OnboardingNetworkType.Shimmer]?.hidden}
             disabled={!features?.onboarding?.[OnboardingNetworkType.Shimmer]?.enabled}
             onClick={() => onNetworkClick(OnboardingNetworkType.Shimmer)}

From e6a7862be545984af9dfca27e9fa210d1dbde943 Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Tue, 20 Feb 2024 09:33:11 +0000
Subject: [PATCH 16/16] chore: update bloom ui kit to 0.20.3

---
 packages/shared/package.json | 2 +-
 yarn.lock                    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/shared/package.json b/packages/shared/package.json
index 14a40f207d..621e0a97d4 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.20.1",
+        "@bloomwalletio/ui": "0.20.3",
         "@ethereumjs/rlp": "4.0.1",
         "@ethereumjs/tx": "5.2.1",
         "@ethereumjs/util": "9.0.2",
diff --git a/yarn.lock b/yarn.lock
index a7ee91a0d5..51e2bd2299 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.20.1":
-  version "0.20.1"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.1/c33346879feefa970875731a6b3eaf030630fc89#c33346879feefa970875731a6b3eaf030630fc89"
-  integrity sha512-ba+TSRFt0YOuzFsFmdyspQBgACBfDvU8Ilu/DbO5qcIhqhFWY87gbSHYK/YFjrKFgDjXaCFIM+sAYfuzD6Hxsg==
+"@bloomwalletio/ui@0.20.3":
+  version "0.20.3"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.3/4ff384a8f0e32eb1d7ac72ecccdeabd5670030f8#4ff384a8f0e32eb1d7ac72ecccdeabd5670030f8"
+  integrity sha512-QEHsdq9isrs+m6osZRdafRFgac5k4Zcxn5AtQAwFjG0za/R6nAlP3zrs6GQpjGwglpIBMjNMMrXtt+8p+StKPQ==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"