@iota/apps-ui-kit 0.0.0-dev-20251015065834

package/src/lib/constants/colors.constants.ts

@@ -0,0 +1,239 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const IOTA_PRIMITIVES_COLOR_PALETTE = {
+    'iota-primary': {
+        '0': '#000000',
+        '10': '#061244',
+        '20': '#182b8a',
+        '30': '#3131ff',
+        '40': '#2563f5',
+        '50': '#3f80f0',
+        '60': '#5b9cfe',
+        '70': '#85b5fb',
+        '80': '#adceff',
+        '90': '#d5e8ff',
+        '100': '#ffffff',
+    },
+    'iota-secondary': {
+        '0': '#000000',
+        '10': '#051631',
+        '20': '#17345f',
+        '30': '#2d4c7a',
+        '40': '#4b648a',
+        '50': '#637ca2',
+        '60': '#7e97bd',
+        '70': '#96b3d5',
+        '80': '#b6cde8',
+        '90': '#dde9f7',
+        '100': '#ffffff',
+    },
+    'iota-tertiary': {
+        '0': '#000000',
+        '10': '#071f22',
+        '20': '#18393b',
+        '30': '#185b60',
+        '40': '#317479',
+        '50': '#498c91',
+        '60': '#64a7ac',
+        '70': '#7fc2c7',
+        '80': '#9adde2',
+        '90': '#c2f1f4',
+        '100': '#ffffff',
+    },
+    'iota-error': {
+        '0': '#000000',
+        '10': '#330009',
+        '20': '#610012',
+        '30': '#b51431',
+        '40': '#ce2d4a',
+        '50': '#e64562',
+        '60': '#ff607d',
+        '70': '#ff889e',
+        '80': '#ffb0be',
+        '90': '#ffd9e0',
+        '100': '#ffffff',
+    },
+    'iota-neutral': {
+        '0': '#000000',
+        '4': '#0a0f17',
+        '6': '#0f141c',
+        '10': '#171d26',
+        '12': '#1c212b',
+        '20': '#253041',
+        '30': '#3c4656',
+        '40': '#545e6e',
+        '50': '#6e7787',
+        '60': '#8892a1',
+        '70': '#a8b2c0',
+        '80': '#cad4e2',
+        '90': '#dde4f0',
+        '92': '#e3eaf6',
+        '96': '#eff4fa',
+        '98': '#f8fafc',
+        '100': '#ffffff',
+    },
+    'iota-warning': {
+        '0': '#000000',
+        '10': '#2D1E00',
+        '20': '#422C00',
+        '30': '#674500',
+        '40': '#8C5D00',
+        '50': '#A47518',
+        '60': '#BE8F32',
+        '70': '#D9AA4D',
+        '80': '#F4C568',
+        '90': '#FFE3AB',
+        '100': '#FFFFFF',
+    },
+};
+
+export const IOTA_NAMES_COLOR_PALETTE = {
+    'names-primary': {
+        '0': '#000000',
+        '10': '#061244',
+        '20': '#182b8a',
+        '30': '#3131ff',
+        '40': '#2563f5',
+        '50': '#3f80f0',
+        '60': '#5b9cfe',
+        '70': '#85b5fb',
+        '80': '#adceff',
+        '90': '#d5e8ff',
+        '100': '#ffffff',
+    },
+    'names-secondary': {
+        '0': '#000000',
+        '10': '#051631',
+        '20': '#17345f',
+        '30': '#2d4c7a',
+        '40': '#4b648a',
+        '50': '#637ca2',
+        '60': '#7e97bd',
+        '70': '#96b3d5',
+        '80': '#b6cde8',
+        '90': '#dde9f7',
+        '100': '#ffffff',
+    },
+    'names-tertiary': {
+        '0': '#000000',
+        '10': '#00231F',
+        '20': '#00453D',
+        '30': '#00685C',
+        '40': '#008C7C',
+        '50': '#00AF9B',
+        '60': '#00D7BE',
+        '70': '#17F3D9',
+        '80': '#54FFEB',
+        '90': '#A6FFF4',
+        '100': '#ffffff',
+    },
+    'names-error': {
+        '0': '#000000',
+        '10': '#3D001F',
+        '20': '#620432',
+        '30': '#A30251',
+        '40': '#C90E6A',
+        '50': '#DC2B82',
+        '60': '#E35A9E',
+        '70': '#EF84B9',
+        '80': '#FCADD4',
+        '90': '#FFD7EB',
+        '100': '#ffffff',
+    },
+    'names-neutral': {
+        '0': '#000000',
+        '4': '#0A0D23',
+        '6': '#0F1228',
+        '10': '#181B31',
+        '12': '#20233C',
+        '20': '#2B2E45',
+        '30': '#404359',
+        '40': '#585B71',
+        '50': '#71748B',
+        '60': '#8C8FA5',
+        '70': '#ACAFC5',
+        '80': '#CED1E7',
+        '90': '#DFE2F8',
+        '92': '#E5E8FE',
+        '96': '#F0F2FF',
+        '98': '#F8F9FF',
+        '100': '#ffffff',
+    },
+    'names-solid': {
+        blue: '#3131FF',
+        purple: '#A139FF',
+        green: '#14F0D6',
+        neutral: '#20233C',
+    },
+    'names-warning': {
+        '0': '#000000',
+        '10': '#2D1E00',
+        '20': '#422C00',
+        '30': '#674500',
+        '40': '#8C5D00',
+        '50': '#A47518',
+        '60': '#BE8F32',
+        '70': '#D9AA4D',
+        '80': '#F4C568',
+        '90': '#FFE3AB',
+        '100': '#FFFFFF',
+    },
+};
+
+export const SHADER_COLOR_PALETTE = {
+    'shader-primary-dark': {
+        '0': '#bed8ff00',
+        '8': '#bed8ff14',
+        '12': '#bed8ff1e',
+        '16': '#bed8ff28',
+        '48': '#bed8ff7a',
+        '72': '#bed8ffb7',
+        '100': '#bed8ff',
+    },
+    'shader-inverted-dark': {
+        '0': '#002f6d00',
+        '8': '#002f6d14',
+        '12': '#002f6d1e',
+        '16': '#002f6d28',
+        '48': '#002f6d7a',
+        '72': '#002f6db7',
+        '100': '#002f6d',
+    },
+    'shader-neutral-dark': {
+        '0': '#bed8ff00',
+        '8': '#bed8ff14',
+        '12': '#bed8ff1e',
+        '16': '#bed8ff28',
+        '48': '#bed8ff7a',
+        '72': '#bed8ffb7',
+        '100': '#bed8ff',
+    },
+    'shader-primary-light': {
+        0: '#0067ee00',
+        8: '#0067ee14',
+        12: '#0067ee1e',
+        16: '#0067ee28',
+        48: '#0067ee7a',
+        72: '#0067eeb7',
+        100: '#0067ee',
+    },
+    'shader-inverted-light': {
+        0: '#bed8ff00',
+        8: '#bed8ff14',
+        12: '#bed8ff1e',
+        16: '#bed8ff28',
+        48: '#bed8ff7a',
+        72: '#bed8ffb7',
+        100: '#bed8ff',
+    },
+    'shader-neutral-light': {
+        0: '#002f6d00',
+        8: '#002f6d14',
+        12: '#002f6d1e',
+        16: '#002f6d28',
+        48: '#002f6d7a',
+        72: '#002f6db7',
+        100: '#002f6d',
+    },
+};

package/src/lib/constants/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './colors.constants';

package/src/lib/enums/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './screenSize.enums';
+export * from './theme.enums';

package/src/lib/enums/screenSize.enums.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ScreenSize {
+    Sm = 'sm',
+    Md = 'md',
+    Lg = 'lg',
+    Xl = 'xl',
+}

package/src/lib/enums/theme.enums.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum UIKitTheme {
+    Light = 'light',
+    Dark = 'dark',
+    Names = 'names',
+}

package/src/lib/index.ts

@@ -0,0 +1,10 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import './styles/index.css';
+
+export * from './tailwind';
+export * from './components';
+export * from './constants';
+export * from './enums';
+export * from './utils';

package/src/lib/styles/base.css

@@ -0,0 +1,144 @@
+@layer base {
+    .text-display-lg,
+    .text-display-md,
+    .text-display-sm,
+    .text-headline-lg,
+    .text-headline-md,
+    .text-headline-sm {
+        font-family: var(--font-family-heading);
+    }
+
+    .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 {
+        font-family: var(--font-family-text);
+    }
+
+    .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';
+        font-weight: var(--font-weight);
+        letter-spacing: var(--letter-spacing);
+    }
+
+    .text-label-md {
+        font-variant-alternates: 'ss01';
+    }
+
+    :root.names {
+        --roboto-flex-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750,
+            'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 640, 'slnt' 0, 'wdth' 130;
+
+        .text-display-lg,
+        .text-display-md,
+        .text-display-sm {
+            font-family: var(--font-family-heading);
+            font-variation-settings: var(--roboto-flex-variation-settings);
+        }
+
+        .text-headline-lg,
+        .text-headline-md,
+        .text-headline-sm,
+        .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 {
+            font-family: var(--font-family-text);
+        }
+
+        .text-headline-sm,
+        .text-headline-md,
+        .text-headline-lg {
+            font-feature-settings: 'ss01' on;
+        }
+
+        .font-roboto-flex {
+            font-variation-settings: var(--roboto-flex-variation-settings);
+        }
+    }
+
+    input:-webkit-autofill,
+    input:-webkit-autofill:enabled,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus {
+        @apply appearance-none !bg-transparent !bg-none;
+        @apply !text-iota-neutral-92 names:!text-names-neutral-10 dark:!text-iota-neutral-10;
+        transition: background-color 5000s ease-in-out 0s;
+        -webkit-text-fill-color: theme('colors.iota-neutral.92') !important;
+    }
+
+    :root:not(.dark):not(.names) {
+        input:-webkit-autofill,
+        input:-webkit-autofill:enabled,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:focus {
+            -webkit-text-fill-color: theme('colors.iota-neutral.10') !important;
+        }
+    }
+}
+
+@-moz-document url-prefix() {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: theme('colors.iota-neutral.30') transparent;
+    }
+
+    :root:not(.dark) {
+        * {
+            scrollbar-color: theme('colors.iota-neutral.80') transparent;
+        }
+    }
+}
+@supports selector(::-webkit-scrollbar) {
+    *::-webkit-scrollbar {
+        width: 0.875rem;
+        height: 0.875rem;
+    }
+
+    *::-webkit-scrollbar-track {
+        border-radius: 0.75rem;
+        background-color: transparent;
+    }
+
+    *::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 10px 10px #cad4e2;
+        border-radius: 0.75rem;
+        border: 4px solid transparent;
+    }
+
+    .dark *::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 10px 10px #3c4656;
+    }
+
+    .names *::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 10px 10px #3c4656;
+    }
+
+    *::-webkit-scrollbar-corner,
+    .dark *::-webkit-scrollbar-corner,
+    .names *::-webkit-scrollbar-corner {
+        background: transparent;
+    }
+}