@iota/apps-ui-kit 0.6.0 → 0.7.0

package/src/lib/styles/utilities.css

@@ -0,0 +1,53 @@
+@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-iota-primary-60;
+        }
+    }
+
+    .state-layer-inverted {
+        &::after {
+            @apply bg-iota-primary-80;
+        }
+    }
+
+    .state-active {
+        &::after {
+            @apply opacity-12;
+        }
+    }
+}

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

@@ -2,20 +2,26 @@
 // 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,
+    IOTA_PRIMITIVES_COLOR_PALETTE,
+    IOTA_NAMES_COLOR_PALETTE,
+    SHADER_COLOR_PALETTE,
+} from '../constants/colors.constants';
+import {
     BORDER_RADIUS,
+    CUSTOM_FONT_SIZES,
     CUSTOM_SPACING,
+    FONT_FAMILIES,
     OPACITY,
     generateVariableSpacing,
 } from './constants';
-import { firefoxPlugin } from './plugins';
+import { THEMED_CUSTOM_COLORS } from './constants/customColors.constants';
+import { firefoxPlugin, namesVariant } from './plugins';
 
 export const BASE_CONFIG: Config = {
     content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
-    darkMode: 'class',
-    plugins: [firefoxPlugin],
+    darkMode: 'selector',
+    plugins: [firefoxPlugin, namesVariant],
     theme: {
         extend: {
             fontSize: {
@@ -38,12 +44,11 @@ export const BASE_CONFIG: Config = {
             },
             colors: {
                 ...IOTA_PRIMITIVES_COLOR_PALETTE,
+                ...IOTA_NAMES_COLOR_PALETTE,
                 ...SHADER_COLOR_PALETTE,
+                ...THEMED_CUSTOM_COLORS,
             },
-            fontFamily: {
-                'alliance-no2': ['AllianceNo2', 'sans-serif'],
-                inter: ['Inter', 'sans-serif'],
-            },
+            fontFamily: FONT_FAMILIES,
         },
     },
 };

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

@@ -0,0 +1,13 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const THEMED_CUSTOM_COLORS = {
+    'default-surface': 'var(--default-surface)',
+    'on-default': 'var(--on-default)',
+    'warning-surface': 'var(--warning-surface)',
+    'on-warning': 'var(--on-warning)',
+    'error-surface': 'var(--error-surface)',
+    'on-error': 'var(--on-error)',
+    'success-surface': 'var(--success-surface)',
+    'on-success': 'var(--on-success)',
+} as const;

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

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const FONT_FAMILIES: Record<string, string[]> = {
+    inter: ['Inter', 'sans-serif'],
+    'alliance-no2': ['AllianceNo2', 'sans-serif'],
+    'roboto-flex': ['Roboto Flex Variable', 'sans-serif'],
+} as const;

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

@@ -136,24 +136,24 @@ export const TEXT_HEADLINE_CLASSES: TailwindCustomFonts = {
         '24px',
         {
             lineHeight: '120%',
+            fontWeight: 'var(--headline-sm-font-weight)',
             letterSpacing: '-0.2px',
-            fontWeight: 500,
         },
     ],
     'text-headline-md': [
         '28px',
         {
             lineHeight: '120%',
+            fontWeight: 'var(--headline-md-font-weight)',
             letterSpacing: '-0.4px',
-            fontWeight: 500,
         },
     ],
     'text-headline-lg': [
         '32px',
         {
             lineHeight: '120%',
+            fontWeight: 'var(--headline-lg-font-weight)',
             letterSpacing: '-0.4px',
-            fontWeight: 500,
         },
     ],
 };
@@ -162,22 +162,22 @@ export const TEXT_DISPLAY_CLASSES: TailwindCustomFonts = {
     'text-display-sm': [
         '36px',
         {
-            lineHeight: '120%',
-            fontWeight: 500,
+            lineHeight: 'var(--display-sm-line-height)',
+            fontWeight: 'var(--display-sm-font-weight)',
         },
     ],
     'text-display-md': [
         '48px',
         {
-            lineHeight: '120%',
-            fontWeight: 500,
+            lineHeight: 'var(--display-md-line-height)',
+            fontWeight: 'var(--display-md-font-weight)',
         },
     ],
     'text-display-lg': [
         '60px',
         {
-            lineHeight: '120%',
-            fontWeight: 500,
+            lineHeight: 'var(--display-lg-line-height)',
+            fontWeight: 'var(--display-lg-font-weight)',
         },
     ],
 };

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

@@ -4,3 +4,4 @@
 export * from './scaling.constants';
 export * from './fontSizes.constants';
 export * from './variableSpacing.constants';
+export * from './fontFamily.constants';

package/src/lib/tailwind/plugins.ts

@@ -6,3 +6,7 @@ import plugin from 'tailwindcss/plugin';
 export const firefoxPlugin = plugin(({ addVariant }) => {
     addVariant('firefox', '@-moz-document url-prefix()');
 });
+
+export const namesVariant = plugin(({ addVariant }) => {
+    addVariant('names', '&:is(.names *)');
+});

package/src/storybook/blocks/Showcase.tsx

@@ -9,9 +9,9 @@ interface ShowcaseProps {
 export function Showcase({ children, title }: ShowcaseProps) {
     return (
         <div className="flex flex-col gap-2">
-            <code className="inline w-fit rounded-md bg-neutral-96 px-xxs">{title}</code>
+            <code className="inline w-fit rounded-md bg-iota-neutral-96 px-xxs">{title}</code>
             <div className="flex">
-                <div className="flex flex-row items-center justify-center rounded-xl border border-neutral-70 p-md">
+                <div className="flex flex-row items-center justify-center rounded-xl border border-iota-neutral-70 p-md">
                     {children}
                 </div>
             </div>

package/src/storybook/blocks/TypeSetItem.tsx

@@ -44,7 +44,7 @@ export function TypeSetItem({ sampleText, sizeText, fontClass }: TypeSetItemProp
     return (
         <div className="flex flex-row items-start gap-x-md">
             {styles && (
-                <div className="text-xs text-neutral-60">
+                <div className="text-xs text-iota-neutral-60">
                     {styles[FontStyleProperties.FontSize]}
                 </div>
             )}
@@ -59,9 +59,9 @@ export function TypeSetItem({ sampleText, sizeText, fontClass }: TypeSetItemProp
                             .map(([key, value], index) => (
                                 <Fragment key={index}>
                                     {index > 0 && (
-                                        <span className="text-xs text-neutral-60">|</span>
+                                        <span className="text-xs text-iota-neutral-60">|</span>
                                     )}
-                                    <span className="text-xs text-neutral-60">
+                                    <span className="text-xs text-iota-neutral-60">
                                         {key}: {value}
                                     </span>
                                 </Fragment>

package/src/storybook/stories/atoms/Skeleton.stories.tsx

@@ -17,7 +17,7 @@ export const SkeletonCard: Story = {
     render: () => (
         <Card>
             <CardImage shape={ImageShape.SquareRounded}>
-                <div className="h-10 w-10 animate-pulse bg-neutral-90 dark:bg-neutral-12" />
+                <div className="h-10 w-10 animate-pulse bg-iota-neutral-90 names:bg-names-neutral-12 dark:bg-iota-neutral-12" />
                 <Skeleton widthClass="w-10" heightClass="h-10" isRounded={false} />
             </CardImage>
             <div className="flex flex-col gap-y-xs">

package/src/storybook/stories/atoms/Tooltip.stories.tsx

@@ -12,7 +12,9 @@ const meta: Meta<typeof Tooltip> = {
         return (
             <div className="flex h-20 items-center p-sm">
                 <Tooltip {...props}>
-                    <span className="text-neutral-10 dark:text-neutral-92">Hover me</span>
+                    <span className="text-iota-neutral-10 names:text-names-neutral-92 dark:text-names-neutral-92">
+                        Hover me
+                    </span>
                 </Tooltip>
             </div>
         );
@@ -50,7 +52,7 @@ export const WithIcon: Story = {
     render: (props) => {
         return (
             <Tooltip {...props}>
-                <Info className="text-neutral-10 dark:text-neutral-92" />
+                <Info className="text-iota-neutral-10 names:text-names-neutral-92 dark:text-names-neutral-92" />
             </Tooltip>
         );
     },

package/src/storybook/stories/atoms/VisualAssetCard.stories.tsx

@@ -22,7 +22,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        assetSrc: 'https://d315pvdvxi2gex.cloudfront.net/528399e23c1bb7b14cced0b89.png',
+        assetType: VisualAssetType.Image,
+        src: 'https://d315pvdvxi2gex.cloudfront.net/528399e23c1bb7b14cced0b89.png',
         altText: 'IOTA Logo',
         onIconClick: () => {
             console.log('Icon clicked');
@@ -33,7 +34,7 @@ export const Default: Story = {
         assetTitle: 'IOTA Logo',
     },
     argTypes: {
-        assetSrc: {
+        src: {
             control: 'text',
         },
         altText: {

package/src/storybook/stories/components/VariableSpacingShowcase.tsx

@@ -8,7 +8,7 @@ import { VARIABLE_GAP_CLASSES, VARIABLE_PADDING_CLASSES } from '@/storybook/cons
 export function VariableSpacingShowcase() {
     return (
         <div className="flex flex-col gap-10">
-            <p className="text-headline-sm text-neutral-10">
+            <p className="text-headline-sm text-iota-neutral-10">
                 The variable spacing changes based on the screen size.
             </p>
 
@@ -39,7 +39,7 @@ export function VariableSpacingShowcase() {
 function DocumentedBlock({ title, children }: React.PropsWithChildren<{ title: string }>) {
     return (
         <div className="flex flex-col gap-y-4">
-            <h2 className="text-headline-md text-neutral-10">{title}</h2>
+            <h2 className="text-headline-md text-iota-neutral-10">{title}</h2>
             <div className="flex flex-row flex-wrap gap-10">{children}</div>
         </div>
     );

package/src/storybook/stories/design-tokens/colors.stories.mdx

@@ -1,6 +1,7 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 import {
     IOTA_PRIMITIVES_COLOR_PALETTE,
+    IOTA_NAMES_COLOR_PALETTE,
     SHADER_COLOR_PALETTE,
 } from '../../../lib/constants/colors.constants';
 
@@ -14,6 +15,14 @@ import {
     })}
 </ColorPalette>
 
+## Names
+
+<ColorPalette>
+    {Object.entries(IOTA_NAMES_COLOR_PALETTE).map(([color, values]) => {
+        return <ColorItem key={color} title={color} colors={values} />;
+    })}
+</ColorPalette>
+
 ## Shaders
 
 <ColorPalette>

package/src/storybook/stories/molecules/Account.stories.tsx

@@ -22,7 +22,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const Avatar = ({ isLocked }: { isLocked?: boolean }) => {
-    const circleFillClass = isLocked ? 'fill-neutral-80 dark:fill-neutral-30' : 'fill-primary-30';
+    const circleFillClass = isLocked
+        ? 'fill-iota-neutral-80 dark:fill-iota-neutral-30 names:fill-names-neutral-30'
+        : 'fill-iota-primary-30';
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"

package/src/storybook/stories/molecules/Search.stories.tsx

@@ -49,10 +49,10 @@ const meta: Meta<typeof Search> = {
                                     suggestion.supportingText ? 'justify-between' : 'justify-start',
                                 )}
                             >
-                                <span className="text-body-lg text-neutral-10 dark:text-neutral-92">
+                                <span className="text-body-lg text-iota-neutral-10 names:text-names-neutral-92 dark:text-iota-neutral-92">
                                     {suggestion.label}
                                 </span>
-                                <span className="text-body-md text-neutral-40 dark:text-neutral-60">
+                                <span className="text-body-md text-iota-neutral-40 names:text-names-neutral-60 dark:text-iota-neutral-60">
                                     {suggestion.supportingText}
                                 </span>
                             </div>

package/src/storybook/stories/molecules/TableCell.stories.tsx

@@ -38,7 +38,7 @@ const Avatar = () => {
             viewBox="0 0 33 32"
             fill="none"
         >
-            <circle cx="16.5" cy="16" r="16" className="fill-primary-40" />
+            <circle cx="16.5" cy="16" r="16" className="fill-iota-primary-40" />
         </svg>
     );
 };

package/src/storybook/stories/molecules/TextArea.stories.tsx

@@ -71,7 +71,7 @@ export const Default: Story = {
                     isVisibilityToggleEnabled
                     {...storyProps}
                 />
-                <div className="flex w-full justify-end">
+                <div className="flex w-full justify-end pt-2">
                     <Button onClick={() => onSubmit()} text="Submit" />
                 </div>
             </div>