Chore: update tailwindcss & cleanup safelist

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}

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,13 +8,14 @@
     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 background = getHexColorFromColor(backgroundColor ?? `${iconColor}/20`)
 </script>
 
 {#if !hidden}
@@ -25,15 +26,10 @@
                     <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"
+                        style={`background-color: ${background}`}
                     >
-                        <Icon
-                            name={icon}
-                            customColor={iconColorShade ? `${iconColor}-${iconColorShade}` : iconColor}
-                            size={iconSize}
-                        />
+                        <Icon name={icon} customColor={iconColor} size={iconSize} />
                     </icon-container>
                 {/if}
             </div>

packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte

@@ -97,7 +97,7 @@
             icon={IconName.Iota}
             iconSize="md"
             iconColor="#ffffff"
-            backgroundColor="black"
+            backgroundColor="#000000"
             hidden={features?.onboarding?.[OnboardingNetworkType.Iota]?.hidden}
             disabled={!features?.onboarding?.[OnboardingNetworkType.Iota]?.enabled}
             onClick={() => onNetworkClick(OnboardingNetworkType.Iota)}
@@ -112,8 +112,7 @@
             )}
             icon={IconName.Shimmer}
             iconSize="md"
-            iconColor="blue"
-            iconColorShade="900"
+            iconColor="blue-900"
             backgroundColor="shimmer"
             hidden={features?.onboarding?.[OnboardingNetworkType.Shimmer]?.hidden}
             disabled={!features?.onboarding?.[OnboardingNetworkType.Shimmer]?.enabled}

packages/shared/package.json

@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <[email protected]>",
     "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",

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}

packages/shared/src/components/StrengthMeter.svelte

@@ -1,24 +1,30 @@
 <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>
 
 {#if strength !== undefined}
     <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>

packages/shared/src/components/Text.svelte

@@ -17,19 +17,15 @@
     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
+    export let whitespace: 'whitespace-pre' | 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,25 +93,22 @@
         },
     }
 
-    $: 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-140' : ''
+    $: formattedColor = color ?? ''
+    $: formattedDarkColor = darkColor ?? ''
 
     let _fontSize: string
     let _lineHeight: string
     let _color: string
     let _darkColor: string
-    let _whitespace: string
 
     // Format custom inputs
     function setCustomStyles(): void {
         _fontSize = formattedFontSize
         _lineHeight = formattedLineHeight
         _color = formattedColor
         _darkColor = formattedDarkColor
-        _whitespace = formattedWhitespace
     }
 
     // Adjust font for old override classes
@@ -166,7 +159,7 @@
         ...(_lineHeight && { lineHeight: _lineHeight }),
         ...((overrideColor || _color) && { color: _color }),
         ...((overrideColor || _darkColor) && { darkColor: _darkColor }),
-        ...(_whitespace && { whitespace: _whitespace }),
+        ...(whitespace && { whitespace }),
     }
 
     let customClassesString: string

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>

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>

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}
     `}
 >

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',
 }

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

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}"

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 = undefined
+    export let darkBackgroundColor: string | undefined = undefined
     export let clearBackground = false
     export let clearPadding = false
     export let clearBorder = false

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 {