@iota/apps-ui-kit 0.6.0 → 0.7.1

package/src/lib/styles/fonts.css

@@ -3,3 +3,5 @@
 
 @import '@fontsource/inter/400.css';
 @import '@fontsource/inter/500.css';
+
+@import '@fontsource-variable/roboto-flex/full.css';

package/src/lib/styles/index.css

@@ -3,147 +3,16 @@
 
 @import './fonts.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/base';
+@import './base.css';
 
-@layer base {
-    .text-display-lg,
-    .text-display-md,
-    .text-display-sm,
-    .text-headline-lg,
-    .text-headline-md,
-    .text-headline-sm {
-        @apply font-alliance-no2;
-    }
+@import 'tailwindcss/components';
+@import './components.css';
 
-    .text-title-lg,
-    .text-title-md,
-    .text-title-sm,
-    .text-body-lg,
-    .text-body-md,
-    .text-body-sm,
-    .text-body-ds-lg,
-    .text-body-ds-md,
-    .text-body-ds-sm,
-    .text-label-lg,
-    .text-label-md,
-    .text-label-sm {
-        @apply font-inter;
-    }
+@import 'tailwindcss/utilities';
+@import './utilities.css';
 
-    .text-display-lg,
-    .text-display-md,
-    .text-display-sm,
-    .text-headline-lg,
-    .text-headline-md,
-    .text-headline-sm,
-    .text-body-ds-lg {
-        font-variant-alternates: 'ss02';
-    }
-
-    .text-label-md {
-        font-variant-alternates: 'ss01';
-    }
-
-    input:-webkit-autofill,
-    input:-webkit-autofill:enabled,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus {
-        @apply appearance-none !bg-transparent !bg-none;
-        @apply !text-neutral-92 dark:!text-neutral-10;
-        transition: background-color 5000s ease-in-out 0s;
-        -webkit-text-fill-color: theme('colors.neutral.92') !important;
-    }
-
-    :root:not(.dark) {
-        input:-webkit-autofill,
-        input:-webkit-autofill:enabled,
-        input:-webkit-autofill:hover,
-        input:-webkit-autofill:focus {
-            -webkit-text-fill-color: theme('colors.neutral.10') !important;
-        }
-    }
-}
-
-@layer utilities {
-    .state-layer,
-    .state-layer-inverted,
-    .state-active {
-        &::after {
-            content: '';
-            border-radius: inherit;
-            @apply absolute;
-            @apply h-full w-full;
-            @apply left-0 top-0;
-            @apply transition-opacity duration-75;
-            @apply pointer-events-none;
-        }
-    }
-
-    .state-layer,
-    .state-layer-inverted {
-        &::after {
-            @apply opacity-0;
-        }
-
-        &:hover::after {
-            @apply opacity-8;
-        }
-
-        &:active::after {
-            @apply opacity-12;
-        }
-
-        &:disabled::after {
-            @apply opacity-0;
-        }
-    }
-
-    .state-active,
-    .state-layer {
-        &::after {
-            @apply bg-primary-60;
-        }
-    }
-
-    .state-layer-inverted {
-        &::after {
-            @apply bg-primary-80;
-        }
-    }
-
-    .state-active {
-        &::after {
-            @apply opacity-12;
-        }
-    }
-}
-
-@-moz-document url-prefix() {
-    * {
-        scrollbar-width: thin;
-        scrollbar-color: theme('colors.neutral.30') transparent;
-    }
-
-    :root:not(.dark) {
-        * {
-            scrollbar-color: theme('colors.neutral.80') transparent;
-        }
-    }
-}
-
-@supports selector(::-webkit-scrollbar) {
-    *::-webkit-scrollbar {
-        @apply w-3.5;
-    }
-
-    *::-webkit-scrollbar-track {
-        @apply rounded-xl bg-transparent;
-    }
-
-    *::-webkit-scrollbar-thumb {
-        @apply shadow-[inset_0_0_10px_10px] shadow-neutral-80 dark:shadow-neutral-30;
-        @apply rounded-xl border-4 border-solid border-transparent;
-    }
-}
+@import './variables/general-variables.css';
+@import './variables/light-variables.css';
+@import './variables/dark-variables.css';
+@import './variables/names-variables.css';

package/src/lib/styles/utilities.css

@@ -0,0 +1,61 @@
+@layer utilities {
+    .state-layer,
+    .state-layer-inverted,
+    .state-active,
+    .state-layer-secondary {
+        &::after {
+            content: '';
+            border-radius: inherit;
+            @apply absolute;
+            @apply h-full w-full;
+            @apply left-0 top-0;
+            @apply transition-opacity duration-75;
+            @apply pointer-events-none;
+        }
+    }
+
+    .state-layer,
+    .state-layer-secondary,
+    .state-layer-inverted {
+        &::after {
+            @apply opacity-0;
+        }
+
+        &:hover::after {
+            @apply opacity-8;
+        }
+
+        &:active::after {
+            @apply opacity-12;
+        }
+
+        &:disabled::after {
+            @apply opacity-0;
+        }
+    }
+
+    .state-active,
+    .state-layer {
+        &::after {
+            background-color: var(--state-layer-bg-color);
+        }
+    }
+
+    .state-layer-inverted {
+        &::after {
+            background-color: var(--state-layer-inverted-bg-color);
+        }
+    }
+
+    .state-layer-secondary {
+        &::after {
+            background-color: var(--state-layer-secondary-bg-color);
+        }
+    }
+
+    .state-active {
+        &::after {
+            @apply opacity-12;
+        }
+    }
+}

package/src/lib/styles/variables/dark-variables.css

@@ -0,0 +1,262 @@
+:root.dark {
+    /* COLORS */
+    --warning-surface: theme('colors.iota-warning.10');
+    --on-warning: theme('colors.iota-warning.90');
+    --error-surface: theme('colors.iota-error.10');
+    --on-error: theme('colors.iota-error.90');
+    --success-surface: theme('colors.iota-tertiary.10');
+    --on-success: theme('colors.iota-tertiary.90');
+    --default-surface: theme('colors.iota-primary.10');
+    --on-default: theme('colors.iota-neutral.90');
+
+    /* STATE LAYER */
+    --state-layer-bg-color: theme('colors.iota-primary.60');
+    --state-layer-secondary-bg-color: theme('colors.shader-primary-dark.100');
+    --state-layer-inverted-bg-color: theme('colors.iota-primary.80');
+
+    /* ---------------- ATOMS ---------------- */
+
+    /* BADGE */
+    --badge-bg-color-neutral: theme('colors.iota-neutral.12');
+    --badge-text-color-neutral: theme('colors.iota-neutral.92');
+    --badge-border-color-neutral: theme('colors.iota-neutral.12');
+    --badge-bg-color-primary: theme('colors.iota-primary.30');
+    --badge-border-color-primary: theme('colors.iota-primary.30');
+    --badge-text-color-primary: theme('colors.iota-neutral.100');
+    --badge-bg-color-primary-soft: theme('colors.iota-primary.10');
+    --badge-text-color-primary-soft: theme('colors.iota-primary.90');
+    --badge-border-color-soft: theme('colors.iota-primary.10');
+
+    /* INFOBOX */
+    --infobox-text-title: theme('colors.iota-neutral.92');
+    --infobox-supporting-text: theme('colors.iota-neutral.60');
+
+    /* BUTTON */
+    --button-bg-color-primary: theme('colors.iota-primary.30');
+    --button-bg-color-disabled-primary: theme('colors.iota-neutral.30');
+    --button-bg-color-secondary: theme('colors.iota-neutral.20');
+    --button-bg-color-error: theme('colors.iota-error.10');
+    --button-border-color-outline: theme('colors.iota-neutral.60');
+    --button-text-color-primary: theme('colors.iota-primary.100');
+    --button-text-color-neutral: theme('colors.iota-neutral.92');
+    --button-text-color-error: theme('colors.iota-error.90');
+
+    /* BUTTON PILL */
+    --button-pill-border-color: theme('colors.iota-neutral.40');
+    --button-pill-text-color: theme('colors.iota-neutral.60');
+
+    /* HEADER */
+    --header-bg-color: theme('colors.iota-neutral.6');
+    --header-text-color: theme('colors.iota-neutral.92');
+
+    /* LABEL */
+    --label-text-primary-neutral: theme('colors.iota-neutral.92');
+    --label-text-secondary-neutral: theme('colors.iota-neutral.40');
+
+    /* KEY VALUE */
+    --key-supporting-text-color: theme('colors.iota-neutral.40');
+    --key-value-hover-text-color: theme('colors.iota-neutral.92');
+    --key-value-key-text-color: theme('colors.iota-neutral.60');
+
+    /* CHECKBOX */
+    --checkbox-border-color-default: theme('colors.iota-neutral.20');
+    --checkbox-border-color-checked: theme('colors.iota-primary.30');
+    --checkbox-border-color-disabled: theme('colors.iota-neutral.30');
+    --checkbox-border-color-disabled-checked: theme('colors.iota-neutral.40');
+    --checkbox-bg-color-checked: theme('colors.iota-primary.30');
+    --checkbox-bg-color-disabled-checked: theme('colors.iota-neutral.40');
+    --checkbox-text-color: theme('colors.iota-neutral.60');
+    --checkbox-text-color-checked: theme('colors.white');
+    --checkbox-label-text-color: theme('colors.iota-neutral.60');
+
+    /* DIVIDER */
+    --divider-bg-color: theme('colors.shader-neutral-dark.8');
+
+    /* BUTTON SEGMENT */
+    --button-segment-text-color-default: theme('colors.iota-neutral.40');
+    --button-segment-text-color-hover: theme('colors.iota-neutral.60');
+    --button-segment-text-color-focused: theme('colors.iota-neutral.60');
+    --button-segment-text-color-selected: theme('colors.iota-neutral.92');
+    --button-segment-underline-default-color: theme('colors.shader-neutral-dark.8');
+    --button-segment-underline-hover-color: theme('colors.iota-neutral.40');
+    --button-segment-underline-selected-color: theme('colors.iota-primary.80');
+    --button-segment-bg-color-selected: theme('colors.iota-neutral.6');
+
+    /* LOADING INDICATOR */
+    --loading-indicator-color: theme('colors.iota-primary.80');
+
+    /* LIST ITEM */
+    --list-item-color: theme('colors.iota-neutral.92');
+    --list-item-border-color: theme('colors.shader-neutral-dark.8');
+    --list-item-highlight-bg: theme('colors.shader-inverted-dark.16');
+
+    /* PANEL */
+    --panel-bg: theme('colors.iota-neutral.6');
+    --panel-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* RADIO BUTTON */
+    --radio-icon-color: theme('colors.iota-neutral.60');
+    --radio-icon-checked-color: theme('colors.iota-primary.30');
+    --radio-icon-checked-disabled-color: theme('colors.iota-neutral.40');
+    --radio-label-color: theme('colors.iota-neutral.60');
+
+    /* SECONDARY TEXT */
+    --secondary-text-color: theme('colors.iota-neutral.60');
+    --secondary-text-error-color: theme('colors.iota-error.90');
+
+    /* SKELETON */
+    --skeleton-bg: theme('colors.iota-neutral.12');
+    --skeleton-secondary-bg: theme('colors.iota-neutral.10');
+
+    /* TOGGLE */
+    --toggle-bg-active: theme('colors.iota-primary.30');
+    --toggle-border-active: theme('colors.iota-primary.30');
+    --toggle-bg-inactive: theme('colors.iota-neutral.6');
+    --toggle-border-inactive: theme('colors.iota-neutral.40');
+    --toggle-bg-disabled-active: theme('colors.iota-neutral.70');
+    --toggle-border-disabled-active: theme('colors.iota-neutral.70');
+    --toggle-thumb-color: theme('colors.iota-neutral.60');
+    --toggle-thumb-color-checked: theme('colors.iota-neutral.100');
+    --toggle-label-color: theme('colors.iota-neutral.60');
+
+    /* TOOLTIP */
+    --tooltip-bg: theme('colors.iota-neutral.30');
+    --tooltip-text-color: theme('colors.iota-neutral.92');
+
+    /* VISUAL ASSET CARD */
+    --visual-asset-placeholder-bg: theme('colors.iota-neutral.10');
+    --visual-asset-placeholder-icon: theme('colors.iota-neutral.60');
+    --visual-asset-title-color: theme('colors.iota-neutral.100');
+    --visual-asset-icon-color: theme('colors.iota-neutral.100');
+
+    /* ---------------- MOLECULES ---------------- */
+
+    /* ACCOUNT */
+    --account-title-color: theme('colors.iota-neutral.92');
+    --account-icon-color: theme('colors.iota-neutral.60');
+    --account-check-active-color: theme('colors.iota-primary.80');
+    --account-check-inactive-color: theme('colors.iota-neutral.60');
+
+    /* ADDRESS */
+    --address-text-color: theme('colors.iota-neutral.60');
+
+    /* CARD */
+    --card-filled-bg: theme('colors.iota-neutral.10');
+    --card-image-bg-solid: theme('colors.iota-neutral.10');
+    --card-image-bg-white: theme('colors.iota-neutral.6');
+    --card-action-link-color: theme('colors.iota-neutral.92');
+    --card-action-title-color: theme('colors.iota-neutral.92');
+    --card-action-subtitle-color: theme('colors.iota-neutral.40');
+    --card-body-title-color: theme('colors.iota-neutral.92');
+    --card-body-subtitle-color: theme('colors.iota-neutral.60');
+
+    /* CHIP */
+    --chip-bg-selected-outline: theme('colors.iota-primary.10');
+    --chip-bg-elevated: theme('colors.iota-primary.10');
+    --chip-bg-brand: theme('colors.iota-primary.30');
+    --chip-border-default: theme('colors.iota-neutral.40');
+    --chip-text-default: theme('colors.iota-neutral.60');
+    --chip-text-secondary: theme('colors.iota-neutral.92');
+    --chip-focus-ring: theme('colors.iota-primary.80');
+    --chip-border-color-brand: theme('colors.iota-primary.30');
+    --chip-text-brand: theme('colors.iota-primary.100');
+    --chip-bg-selected-overlay: theme('colors.shader-primary-dark.16');
+    --chip-close-icon-opacity: 100;
+
+    --chip-outline-color: theme('colors.shader-primary-dark.16');
+    --chip-outline-color-hover: theme('colors.shader-primary-dark.8');
+    --chip-outline-color-active: theme('colors.shader-primary-dark.12');
+
+    --chip-bg-color-hover: theme('colors.shader-primary-dark.8');
+    --chip-bg-color-active: theme('colors.shader-primary-dark.12');
+    --chip-bg-color-focus: theme('colors.shader-primary-dark.12');
+
+    /* DISPLAY STATS */
+    --display-stats-bg-default: theme('colors.iota-neutral.10');
+    --display-stats-bg-highlight: theme('colors.iota-primary.80');
+    --display-stats-bg-secondary: theme('colors.iota-secondary.10');
+
+    --display-stats-text-default: theme('colors.iota-neutral.92');
+    --display-stats-text-highlight: theme('colors.iota-primary.10');
+    --display-stats-text-secondary: theme('colors.iota-neutral.92');
+
+    --display-stats-icon-color: theme('colors.iota-neutral.92');
+    --display-stats-copy-icon-color: theme('colors.iota-neutral.40');
+
+    /* DROPDOWN */
+    --dropdown-bg: theme('colors.iota-neutral.6');
+    --dropdown-border-color: theme('colors.iota-neutral.20');
+
+    /* INPUT */
+    --input-text-color: theme('colors.iota-neutral.92');
+    --input-placeholder-color: rgba(136, 146, 161, 0.4); /* neutral.60 with 40% opacity */
+    --input-label-color: theme('colors.iota-neutral.60');
+    --input-border-color: theme('colors.iota-neutral.20');
+    --input-border-hover-color: theme('colors.iota-neutral.60');
+    --input-border-error-color: theme('colors.iota-error.80');
+    --input-border-focus-color: theme('colors.iota-primary.80');
+    --input-caret-color: theme('colors.iota-primary.80');
+    --input-icon-color: theme('colors.iota-neutral.92');
+    --input-copy-icon-color: theme('colors.iota-neutral.40');
+    --input-visibility-bar-color: rgba(23, 29, 38, 0.6); /* neutral.10 with 60% opacity */
+
+    /* NAVBAR ITEM */
+    --navbar-item-icon-color: theme('colors.iota-neutral.60');
+    --navbar-item-icon-selected-color: theme('colors.iota-neutral.92');
+    --navbar-item-label-color: theme('colors.iota-neutral.40');
+    --navbar-item-label-selected-color: theme('colors.iota-neutral.92');
+
+    /* SEARCH */
+    --search-text-color: theme('colors.iota-neutral.92');
+    --search-placeholder-color: theme('colors.iota-neutral.60');
+    --search-border-color: theme('colors.iota-neutral.40');
+    --search-bg-color-filled: theme('colors.iota-neutral.12');
+    --search-suggestion-bg-color: theme('colors.iota-neutral.10');
+    --search-selected-index-bg-color: theme('colors.shader-inverted-dark.16');
+
+    /* SEGMENTED BUTTON */
+    --segmented-filled-bg-color: theme('colors.iota-neutral.10');
+    --segmented-outlined-border-color: theme('colors.iota-neutral.40');
+
+    /* SELECT */
+    --select-border-color: theme('colors.iota-neutral.20');
+    --select-border-hover-color: theme('colors.iota-neutral.60');
+    --select-border-focus-color: theme('colors.iota-primary.80');
+    --select-border-error-color: theme('colors.iota-error.80');
+    --select-icon-color: theme('colors.iota-neutral.92');
+    --select-label-color: theme('colors.iota-neutral.92');
+
+    /* TABLE CELL */
+    --table-cell-supporting-label-color: theme('colors.iota-neutral.40');
+    --table-cell-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* TABLE HEADER CELL */
+    --table-header-text-color: theme('colors.iota-neutral.92');
+
+    /* TITLE */
+    --title-main-color: theme('colors.iota-neutral.92');
+    --title-subtitle-color: theme('colors.iota-neutral.40');
+    --title-icon-color: theme('colors.iota-neutral.40');
+    /* ---------------- ORGANISMS ---------------- */
+
+    /* ACCORDION */
+    --accordion-bg: theme('colors.iota-neutral.6');
+    --accordion-icon-color: theme('colors.iota-neutral.92');
+    --accordion-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* DIALOG */
+    --dialog-content-bg: theme('colors.iota-neutral.6');
+    --dialog-title-color: theme('colors.iota-neutral.92');
+    --dialog-body-color: theme('colors.iota-neutral.60');
+
+    /* NAVBAR */
+    --navbar-icon-color: theme('colors.iota-neutral.92');
+    --navbar-slideout-bg: theme('colors.iota-neutral.6');
+
+    /* TABLE */
+    --table-text-color: theme('colors.iota-neutral.60');
+
+    /* DIALOG */
+    --dialog-outline: none;
+    --dialog-overlay-bg: theme('colors.shader-neutral-light.48');
+}

package/src/lib/styles/variables/general-variables.css

@@ -0,0 +1,9 @@
+:root {
+    /* GRADIENTS */
+    --names-gradient-primary: linear-gradient(
+        223deg,
+        theme('colors.names-solid.purple') 0%,
+        theme('colors.names-solid.blue') 49.98%,
+        theme('colors.names-solid.green') 99.95%
+    );
+}