Feat/web elevation

ui-parts/theme/stories/constants.ts

@@ -0,0 +1,5 @@
+import type { ElevationRole }  from './interfaces.js'
+import type { ElevationState } from './interfaces.js'
+
+export const roles: Array<ElevationRole> = ['xs', 'sm', 'md', 'lg']
+export const states: Array<ElevationState> = ['default', 'hover', 'pressed', 'disabled']

ui-parts/theme/stories/elevation.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta }                from '@storybook/react'
+import type { StoryObj }            from '@storybook/react'
+
+import type { ElevationStoryProps } from './interfaces.js'
+
+import { darkTheme }                from '@atls-ui/theme'
+import { lightTheme }               from '@atls-ui/theme'
+
+import { roles }                    from './constants.js'
+import { states }                   from './constants.js'
+
+const meta: Meta<ElevationStoryProps> = {
+  title: 'Theme/Elevation',
+  args: {
+    theme: 'light',
+  },
+  argTypes: {
+    theme: {
+      control: 'inline-radio',
+      options: ['light', 'dark'],
+    },
+  },
+  render: ({ theme: themeName }) => {
+    const theme = themeName === 'light' ? lightTheme : darkTheme
+    const surface = themeName === 'light' ? theme.colors.surface.soft : theme.colors.surface.muted
+
+    return (
+      <div
+        style={{
+          minHeight: '100vh',
+          padding: '48px',
+          color: theme.colors.text.primary,
+          background: theme.colors.surface.base,
+          fontFamily: 'sans-serif',
+        }}
+      >
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: `80px repeat(${states.length}, minmax(140px, 1fr))`,
+            gap: '32px',
+            alignItems: 'center',
+          }}
+        >
+          <div />
+          {states.map((state) => (
+            <strong key={state}>{state}</strong>
+          ))}
+
+          {roles.map((role) => (
+            <div key={role} style={{ display: 'contents' }}>
+              <strong>{role}</strong>
+              {states.map((state) => (
+                <div
+                  key={`${role}-${state}`}
+                  style={{
+                    display: 'grid',
+                    placeItems: 'center',
+                    minHeight: '112px',
+                    padding: '24px',
+                    borderRadius: '16px',
+                    color: theme.colors.text.primary,
+                    background: surface,
+                    boxShadow: theme.elevations[role][state],
+                  }}
+                >
+                  Surface
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        <div
+          style={{
+            width: 'min(480px, 100%)',
+            marginTop: '64px',
+            padding: '32px',
+            borderRadius: '16px',
+            color: theme.colors.text.primary,
+            background: surface,
+            boxShadow: theme.elevations.modal.default,
+          }}
+        >
+          <strong>modal</strong>
+          <p style={{ marginBottom: 0 }}>Overlay surface</p>
+        </div>
+      </div>
+    )
+  },
+}
+
+export default meta
+
+export const Elevation: StoryObj<ElevationStoryProps> = {}

ui-parts/theme/stories/interfaces.ts

@@ -0,0 +1,7 @@
+export type ThemeName = 'dark' | 'light'
+export type ElevationRole = 'lg' | 'md' | 'sm' | 'xs'
+export type ElevationState = 'default' | 'disabled' | 'hover' | 'pressed'
+
+export interface ElevationStoryProps {
+  theme: ThemeName
+}

ui/theme/src/theme.ts

@@ -1,26 +1,31 @@
 import type { BordersTokens }    from './tokens/index.js'
 import type { Colors }           from './tokens/index.js'
+import type { ElevationsTokens } from './tokens/index.js'
 import type { TypographyTokens } from './tokens/index.js'
 
 import { borders }               from './tokens/index.js'
 import { darkColors }            from './tokens/index.js'
+import { elevations }            from './tokens/index.js'
 import { lightColors }           from './tokens/index.js'
 import { typography }            from './tokens/index.js'
 
 export interface Theme {
   borders: BordersTokens
   colors: Colors
+  elevations: ElevationsTokens
   typography: TypographyTokens
 }
 
 export const lightTheme: Theme = {
   borders: borders(lightColors),
   colors: lightColors,
+  elevations: elevations(lightColors),
   typography,
 }
 
 export const darkTheme: Theme = {
   borders: borders(darkColors),
   colors: darkColors,
+  elevations: elevations(darkColors),
   typography,
 }

ui/theme/src/tokens/colors/dark.ts

@@ -6,7 +6,7 @@ export const darkColors: Colors = {
     hover: '#7AA7FF',
     pressed: '#3F74FF',
     disabled: '#5F8FFF',
-    subtle: '#394A6B',
+    subtle: '#5F8FFF4D',
   },
   surface: {
     base: '#111111',

ui/theme/src/tokens/colors/light.ts

@@ -6,7 +6,7 @@ export const lightColors: Colors = {
     hover: '#1643A3',
     pressed: '#12357F',
     disabled: '#1E56C740',
-    subtle: '#6B86C8',
+    subtle: '#1E56C740',
   },
   surface: {
     base: '#F8F9FF',

ui/theme/src/tokens/elevation/blurs.ts

@@ -0,0 +1,14 @@
+export const shadowBlurs = {
+  xs5: '1px',
+  xs4: '2px',
+  xs3: '3px',
+  xs2: '4px',
+  xs: '5px',
+  sm: '6px',
+  md: '8px',
+  lg: '12px',
+  xl: '14px',
+  xl2: '16px',
+  xl3: '20px',
+} as const
+

ui/theme/src/tokens/elevation/elevations.ts

@@ -0,0 +1,184 @@
+import type { Colors }           from '../colors/index.js'
+import type { ElevationsTokens } from './interfaces.js'
+
+import { shadowBlurs }           from './blurs.js'
+import { shadowOffsets }         from './offsets.js'
+import { shadowSpreads }         from './spreads.js'
+import { createElevation }       from './utils/index.js'
+
+export const elevations = (colors: Colors): ElevationsTokens => ({
+  xs: {
+    default: createElevation({
+      color: colors.elevation.xs,
+      offsetY: shadowOffsets.xs,
+      blur: shadowBlurs.xs4,
+    }),
+    hover: createElevation(
+      {
+        color: colors.elevation.xs,
+        offsetY: shadowOffsets.xs,
+        blur: shadowBlurs.xs3,
+        spread: shadowSpreads.xs,
+      },
+      {
+        color: colors.action.subtle,
+        offsetX: shadowOffsets.xs,
+        offsetY: shadowOffsets.md,
+        blur: shadowBlurs.sm,
+        spread: shadowSpreads.negativeSm,
+      }
+    ),
+    pressed: createElevation(
+      {
+        color: colors.elevation.xs,
+        offsetY: shadowOffsets.xs,
+        blur: shadowBlurs.xs5,
+        inset: true,
+      },
+      {
+        color: colors.elevation.xs,
+        offsetY: shadowOffsets.xs,
+        blur: shadowBlurs.xs5,
+        spread: shadowSpreads.negativeXs,
+      }
+    ),
+    disabled: createElevation({
+      color: colors.elevation.xs,
+      offsetY: shadowOffsets.xs,
+      blur: shadowBlurs.xs5,
+    }),
+  },
+  sm: {
+    default: createElevation({
+      color: colors.elevation.sm,
+      offsetY: shadowOffsets.sm,
+      blur: shadowBlurs.sm,
+    }),
+    hover: createElevation(
+      {
+        color: colors.elevation.sm,
+        offsetY: shadowOffsets.sm,
+        blur: shadowBlurs.md,
+        spread: shadowSpreads.xs,
+      },
+      {
+        color: colors.action.subtle,
+        offsetX: shadowOffsets.xs,
+        offsetY: shadowOffsets.lg,
+        blur: shadowBlurs.md,
+        spread: shadowSpreads.negativeSm,
+      }
+    ),
+    pressed: createElevation(
+      {
+        color: colors.elevation.sm,
+        offsetY: shadowOffsets.xs,
+        blur: shadowBlurs.xs4,
+        inset: true,
+      },
+      {
+        color: colors.elevation.sm,
+        offsetY: shadowOffsets.xs,
+        blur: shadowBlurs.xs3,
+        spread: shadowSpreads.negativeSm,
+      }
+    ),
+    disabled: createElevation({
+      color: colors.elevation.sm,
+      offsetY: shadowOffsets.xs,
+      blur: shadowBlurs.xs4,
+    }),
+  },
+  md: {
+    default: createElevation({
+      color: colors.elevation.md,
+      offsetY: shadowOffsets.lg,
+      blur: shadowBlurs.lg,
+    }),
+    hover: createElevation(
+      {
+        color: colors.elevation.md,
+        offsetY: shadowOffsets.lg,
+        blur: shadowBlurs.xl,
+      },
+      {
+        color: colors.action.subtle,
+        offsetX: shadowOffsets.xs,
+        offsetY: shadowOffsets.xl,
+        blur: shadowBlurs.xl,
+        spread: shadowSpreads.negativeLg,
+      }
+    ),
+    pressed: createElevation(
+      {
+        color: colors.elevation.md,
+        offsetY: shadowOffsets.xs,
+        blur: shadowBlurs.xs3,
+        inset: true,
+      },
+      {
+        color: colors.elevation.md,
+        offsetY: shadowOffsets.sm,
+        blur: shadowBlurs.sm,
+        spread: shadowSpreads.negativeXs,
+      }
+    ),
+    disabled: createElevation({
+      color: colors.elevation.md,
+      offsetY: shadowOffsets.sm,
+      blur: shadowBlurs.xs,
+    }),
+  },
+  lg: {
+    default: createElevation({
+      color: colors.elevation.lg,
+      offsetY: shadowOffsets.xl,
+      blur: shadowBlurs.lg,
+      spread: shadowSpreads.negativeLg,
+    }),
+    hover: createElevation(
+      {
+        color: colors.elevation.lg,
+        offsetY: shadowOffsets.xl2,
+        blur: shadowBlurs.xl2,
+        spread: shadowSpreads.negativeLg,
+      },
+      {
+        color: colors.action.subtle,
+        offsetX: shadowOffsets.xs,
+        offsetY: shadowOffsets.xl,
+        blur: shadowBlurs.md,
+        spread: shadowSpreads.negativeXs,
+      }
+    ),
+    pressed: createElevation(
+      {
+        color: colors.elevation.lg,
+        offsetY: shadowOffsets.sm,
+        blur: shadowBlurs.xs2,
+        inset: true,
+      },
+      {
+        color: colors.elevation.lg,
+        offsetY: shadowOffsets.md,
+        blur: shadowBlurs.md,
+        spread: shadowSpreads.negativeLg,
+      }
+    ),
+    disabled: createElevation({
+      color: colors.elevation.lg,
+      offsetY: shadowOffsets.md,
+      blur: shadowBlurs.sm,
+      spread: shadowSpreads.negativeMd,
+    }),
+  },
+  modal: {
+    default: createElevation({
+      color: colors.elevation.md,
+      offsetY: shadowOffsets.xl3,
+      blur: shadowBlurs.xl3,
+      spread: shadowSpreads.negativeSm,
+    }),
+  },
+})
+

ui/theme/src/tokens/elevation/index.ts

@@ -0,0 +1,7 @@
+export * from './blurs.js'
+export * from './elevations.js'
+export type * from './interfaces.js'
+export * from './offsets.js'
+export * from './spreads.js'
+export * from './utils/index.js'
+