@iota/apps-ui-kit 0.0.0-experimental-20250613144451

package/src/lib/components/organisms/table/TableContext.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
+
+export interface TableProviderProps {
+    /**
+     * Numeric indexes of the selected rows.
+     */
+    selectedRowIndexes: Set<number>;
+    /**
+     * Numeric indexes of all the rows.
+     */
+    rowIndexes: number[];
+}
+
+type TableContextProps = {
+    isHeaderChecked: boolean;
+    selectedRowIndexes: Set<number>;
+    isHeaderIndeterminate: boolean;
+};
+
+export const TableContext = createContext<TableContextProps>({
+    isHeaderChecked: false,
+    selectedRowIndexes: new Set(),
+    isHeaderIndeterminate: false,
+});
+
+export const useTableContext = () => {
+    const context = useContext(TableContext);
+    return context;
+};
+
+export function TableProvider({
+    children,
+    selectedRowIndexes,
+    rowIndexes,
+    ...props
+}: PropsWithChildren<TableProviderProps>) {
+    const isHeaderChecked = rowIndexes.length === selectedRowIndexes.size;
+    const isHeaderIndeterminate = !isHeaderChecked && selectedRowIndexes.size > 0;
+
+    return (
+        <TableContext.Provider
+            value={{
+                ...props,
+                isHeaderChecked,
+                selectedRowIndexes,
+                isHeaderIndeterminate,
+            }}
+        >
+            {children}
+        </TableContext.Provider>
+    );
+}

package/src/lib/components/organisms/table/index.ts

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

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

@@ -0,0 +1,133 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const IOTA_PRIMITIVES_COLOR_PALETTE = {
+    primary: {
+        '0': '#000000',
+        '10': '#061244',
+        '20': '#182b8a',
+        '30': '#3131ff',
+        '40': '#2563f5',
+        '50': '#3f80f0',
+        '60': '#5b9cfe',
+        '70': '#85b5fb',
+        '80': '#adceff',
+        '90': '#d5e8ff',
+        '100': '#ffffff',
+    },
+    secondary: {
+        '0': '#000000',
+        '10': '#051631',
+        '20': '#17345f',
+        '30': '#2d4c7a',
+        '40': '#4b648a',
+        '50': '#637ca2',
+        '60': '#7e97bd',
+        '70': '#96b3d5',
+        '80': '#b6cde8',
+        '90': '#dde9f7',
+        '100': '#ffffff',
+    },
+    tertiary: {
+        '0': '#000000',
+        '10': '#071f22',
+        '20': '#18393b',
+        '30': '#185b60',
+        '40': '#317479',
+        '50': '#498c91',
+        '60': '#64a7ac',
+        '70': '#7fc2c7',
+        '80': '#9adde2',
+        '90': '#c2f1f4',
+        '100': '#ffffff',
+    },
+    error: {
+        '0': '#000000',
+        '10': '#330009',
+        '20': '#610012',
+        '30': '#b51431',
+        '40': '#ce2d4a',
+        '50': '#e64562',
+        '60': '#ff607d',
+        '70': '#ff889e',
+        '80': '#ffb0be',
+        '90': '#ffd9e0',
+        '100': '#ffffff',
+    },
+    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',
+    },
+    warning: {
+        '10': '#422C00',
+        '20': '#2D1E00',
+        '60': '#BE8F32',
+        '90': '#FFE3AB',
+    },
+};
+
+export const SHADER_COLOR_PALETTE = {
+    'shader-primary-dark': {
+        '0': '#bed8ff00',
+        '8': '#bed8ff14',
+        '12': '#bed8ff1e',
+        '16': '#bed8ff28',
+        '48': '#bed8ff7a',
+        '72': '#bed8ffb7',
+    },
+    'shader-inverted-dark': {
+        '0': '#002f6d00',
+        '8': '#002f6d14',
+        '12': '#002f6d1e',
+        '16': '#002f6d28',
+        '48': '#002f6d7a',
+        '72': '#002f6db7',
+    },
+    'shader-neutral-dark': {
+        '0': '#bed8ff00',
+        '8': '#bed8ff14',
+        '12': '#bed8ff1e',
+        '16': '#bed8ff28',
+        '48': '#bed8ff7a',
+        '72': '#bed8ffb7',
+    },
+    'shader-primary-light': {
+        0: '#0067ee00',
+        8: '#0067ee14',
+        12: '#0067ee1e',
+        16: '#0067ee28',
+        48: '#0067ee7a',
+        72: '#0067eeb7',
+    },
+    'shader-inverted-light': {
+        0: '#bed8ff00',
+        8: '#bed8ff14',
+        12: '#bed8ff1e',
+        16: '#bed8ff28',
+        48: '#bed8ff7a',
+        72: '#bed8ffb7',
+    },
+    'shader-neutral-light': {
+        0: '#002f6d00',
+        8: '#002f6d14',
+        12: '#002f6d1e',
+        16: '#002f6d28',
+        48: '#002f6d7a',
+        72: '#002f6db7',
+    },
+};

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,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './screenSize.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/index.ts

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

package/src/lib/styles/fonts.css

@@ -0,0 +1,5 @@
+/* Copyright (c) 2024 IOTA Stiftung
+ SPDX-License-Identifier: Apache-2.0 */
+
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/500.css';

package/src/lib/styles/index.css

@@ -0,0 +1,149 @@
+/* Copyright (c) 2024 IOTA Stiftung
+ SPDX-License-Identifier: Apache-2.0 */
+
+@import './fonts.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    .text-display-lg,
+    .text-display-md,
+    .text-display-sm,
+    .text-headline-lg,
+    .text-headline-md,
+    .text-headline-sm {
+        @apply font-alliance-no2;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+}

package/src/lib/tailwind/base.presets.ts

@@ -0,0 +1,49 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Config } from 'tailwindcss';
+import { IOTA_PRIMITIVES_COLOR_PALETTE, SHADER_COLOR_PALETTE } from '../constants/colors.constants';
+import {
+    CUSTOM_FONT_SIZES,
+    BORDER_RADIUS,
+    CUSTOM_SPACING,
+    OPACITY,
+    generateVariableSpacing,
+} from './constants';
+import { firefoxPlugin } from './plugins';
+
+export const BASE_CONFIG: Config = {
+    content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+    darkMode: 'class',
+    plugins: [firefoxPlugin],
+    theme: {
+        extend: {
+            fontSize: {
+                ...CUSTOM_FONT_SIZES,
+            },
+            borderRadius: {
+                ...BORDER_RADIUS,
+            },
+            spacing: (utils) => {
+                const screens = utils.theme('screens');
+                const variableSpacing = generateVariableSpacing(screens);
+                return {
+                    ...CUSTOM_SPACING,
+                    ...variableSpacing,
+                };
+            },
+            opacity: {
+                ...OPACITY,
+                30: '0.3',
+            },
+            colors: {
+                ...IOTA_PRIMITIVES_COLOR_PALETTE,
+                ...SHADER_COLOR_PALETTE,
+            },
+            fontFamily: {
+                'alliance-no2': ['AllianceNo2', 'sans-serif'],
+                inter: ['Inter', 'sans-serif'],
+            },
+        },
+    },
+};

package/src/lib/tailwind/constants/fontSizes.constants.ts

@@ -0,0 +1,201 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ThemeConfig } from 'tailwindcss/types/config';
+
+type TailwindFontSize = ThemeConfig['fontSize'];
+
+export type TailwindFontSizeConfig = Partial<{
+    lineHeight: string;
+    letterSpacing: string;
+    fontWeight: string | number;
+}>;
+
+export type TailwindCustomFonts = Record<
+    string,
+    [
+        string,
+        Partial<{
+            lineHeight: string;
+            letterSpacing: string;
+            fontWeight: string | number;
+        }>,
+    ]
+>;
+
+export const TEXT_LABEL_CLASSES: TailwindCustomFonts = {
+    'text-label-sm': [
+        '11px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.2px',
+            fontWeight: 500,
+        },
+    ],
+    'text-label-md': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+    'text-label-lg': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+} satisfies TailwindFontSize;
+
+export const TEXT_BODY_CLASSES: TailwindCustomFonts = {
+    'text-body-sm': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-md': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-lg': [
+        '16px',
+        {
+            lineHeight: '24px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+};
+
+export const TEXT_BODY_DISAMBIGUOUS_CLASSES: TailwindCustomFonts = {
+    'text-body-ds-sm': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-ds-md': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-ds-lg': [
+        '16px',
+        {
+            lineHeight: '24px',
+            letterSpacing: '0.2px',
+            fontWeight: 400,
+        },
+    ],
+};
+
+export const TEXT_TITLE_CLASSES: TailwindCustomFonts = {
+    'text-title-sm': [
+        '14px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+    'text-title-md': [
+        '16px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.15px',
+            fontWeight: 500,
+        },
+    ],
+    'text-title-lg': [
+        '20px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.4px',
+            fontWeight: 500,
+        },
+    ],
+};
+
+export const TEXT_HEADLINE_CLASSES: TailwindCustomFonts = {
+    'text-headline-sm': [
+        '24px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.2px',
+            fontWeight: 500,
+        },
+    ],
+    'text-headline-md': [
+        '28px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.4px',
+            fontWeight: 500,
+        },
+    ],
+    'text-headline-lg': [
+        '32px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.4px',
+            fontWeight: 500,
+        },
+    ],
+};
+
+export const TEXT_DISPLAY_CLASSES: TailwindCustomFonts = {
+    'text-display-sm': [
+        '36px',
+        {
+            lineHeight: '120%',
+            fontWeight: 500,
+        },
+    ],
+    'text-display-md': [
+        '48px',
+        {
+            lineHeight: '120%',
+            fontWeight: 500,
+        },
+    ],
+    'text-display-lg': [
+        '60px',
+        {
+            lineHeight: '120%',
+            fontWeight: 500,
+        },
+    ],
+};
+
+const CUSTOM_TEXT_CLASSES: TailwindCustomFonts = {
+    ...TEXT_LABEL_CLASSES,
+    ...TEXT_BODY_CLASSES,
+    ...TEXT_BODY_DISAMBIGUOUS_CLASSES,
+    ...TEXT_TITLE_CLASSES,
+    ...TEXT_HEADLINE_CLASSES,
+    ...TEXT_DISPLAY_CLASSES,
+};
+
+// Remove the 'text-' prefix from the keys to match the TailwindCSS font size keys
+export const CUSTOM_FONT_SIZES: TailwindCustomFonts = Object.entries(CUSTOM_TEXT_CLASSES).reduce(
+    (acc, [className, properties]) => {
+        const key = className.startsWith('text-') ? className.replace('text-', '') : className;
+        return { ...acc, [key]: properties };
+    },
+    {},
+);

package/src/lib/tailwind/constants/index.ts

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

package/src/lib/tailwind/constants/scaling.constants.ts

@@ -0,0 +1,41 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { pxToRem } from '../helpers';
+
+type TailwindScale = Record<string, string> & { DEFAULT?: string };
+
+export const BORDER_RADIUS: TailwindScale = {
+    none: pxToRem(0),
+    sm: pxToRem(2),
+    DEFAULT: pxToRem(4),
+    md: pxToRem(6),
+    lg: pxToRem(8),
+    xl: pxToRem(12),
+    '2xl': pxToRem(16),
+    '3xl': pxToRem(24),
+    full: pxToRem(120),
+};
+
+export const CUSTOM_SPACING: TailwindScale = {
+    none: pxToRem(0),
+    xxxs: pxToRem(2),
+    xxs: pxToRem(4),
+    xs: pxToRem(8),
+    sm: pxToRem(12),
+    md: pxToRem(16),
+    lg: pxToRem(24),
+    xl: pxToRem(32),
+    '2xl': pxToRem(48),
+};
+
+export const OPACITY: TailwindScale = {
+    0: '0',
+    8: '0.08',
+    12: '0.12',
+    16: '0.16',
+    40: '0.4',
+    60: '0.6',
+    80: '0.8',
+    100: '1',
+};