Feat/web opacity

ui-parts/design/src/main.ts

@@ -16,8 +16,8 @@ const config: StorybookConfig = {
   stories: [
     '../../**/src/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
     '../../**/src/*.mdx',
-    '../../**/stories/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
-    '../../**/stories/*.mdx',
+    '../../**/stories/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+    '../../**/stories/**/*.mdx',
   ],
   addons: [
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),

ui-parts/theme/stories/opacity/constants.ts

@@ -0,0 +1,14 @@
+import type { OpacityName } from './interfaces.js'
+
+export const opacityNames: Array<OpacityName> = [
+  'none',
+  'xs2',
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  'xl2',
+  'xl3',
+  'full',
+]

ui-parts/theme/stories/opacity/interfaces.ts

@@ -0,0 +1,8 @@
+import type { OpacityTokens } from '@atls-ui/theme/tokens'
+
+export type ThemeName = 'dark' | 'light'
+export type OpacityName = keyof OpacityTokens
+
+export interface OpacityStoryProps {
+  theme: ThemeName
+}

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

@@ -0,0 +1,79 @@
+import type { Meta }              from '@storybook/react'
+import type { StoryObj }          from '@storybook/react'
+
+import type { OpacityStoryProps } from './interfaces.js'
+
+import { darkTheme }              from '@atls-ui/theme'
+import { lightTheme }             from '@atls-ui/theme'
+import { opacity }                from '@atls-ui/theme/tokens'
+
+import { opacityNames }           from './constants.js'
+
+const meta: Meta<OpacityStoryProps> = {
+  title: 'Theme/Opacity',
+  args: {
+    theme: 'light',
+  },
+  argTypes: {
+    theme: {
+      control: 'inline-radio',
+      options: ['light', 'dark'],
+    },
+  },
+  render: ({ theme: themeName }) => {
+    const theme = themeName === 'light' ? lightTheme : darkTheme
+
+    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: 'repeat(auto-fit, minmax(160px, 1fr))',
+            gap: '24px',
+          }}
+        >
+          {opacityNames.map((name) => (
+            <div key={name}>
+              <div style={{ marginBottom: '12px' }}>
+                <strong>{name}</strong>
+                <span style={{ marginLeft: '8px', color: theme.colors.text.secondary }}>
+                  {opacity[name] * 100}%
+                </span>
+              </div>
+              <div
+                style={{
+                  position: 'relative',
+                  minHeight: '120px',
+                  overflow: 'hidden',
+                  borderRadius: '16px',
+                  background: theme.colors.surface.muted,
+                }}
+              >
+                <div
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    background: theme.colors.action.base,
+                    opacity: opacity[name],
+                  }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  },
+}
+
+export default meta
+
+export const Opacity: StoryObj<OpacityStoryProps> = {}

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

@@ -0,0 +1 @@
+export * from './opacity.js'

ui/theme/src/tokens/effects/opacity.ts

@@ -0,0 +1,14 @@
+export const opacity = {
+  none: 0,
+  xs2: 0.04,
+  xs: 0.08,
+  sm: 0.12,
+  md: 0.16,
+  lg: 0.24,
+  xl: 0.4,
+  xl2: 0.64,
+  xl3: 0.8,
+  full: 1,
+} as const
+
+export type OpacityTokens = typeof opacity

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

@@ -11,4 +11,3 @@ export const shadowBlurs = {
   xl2: '16px',
   xl3: '20px',
 } as const
-

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

@@ -181,4 +181,3 @@ export const elevations = (colors: Colors): ElevationsTokens => ({
     }),
   },
 })
-

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

@@ -4,4 +4,3 @@ export type * from './interfaces.js'
 export * from './offsets.js'
 export * from './spreads.js'
 export * from './utils/index.js'
-

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

@@ -35,4 +35,3 @@ export interface ElevationsTokens {
   lg: PressableElevationStates
   modal: ElevationStates
 }
-

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

@@ -8,4 +8,3 @@ export const shadowOffsets = {
   xl2: '7px',
   xl3: '12px',
 } as const
-

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

@@ -6,4 +6,3 @@ export const shadowSpreads = {
   none: '0',
   xs: '1px',
 } as const
-

ui/theme/src/tokens/elevation/utils/createElevation.ts

@@ -17,4 +17,3 @@ export const createElevation = (...shadows: Array<ShadowOptions>): Elevation =>
       }) => `${inset ? 'inset ' : ''}${offsetX} ${offsetY} ${blur} ${spread} ${color}`
     )
     .join(', ')
-

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

@@ -1,2 +1 @@
 export * from './createElevation.js'
-

ui/theme/src/tokens/index.ts

@@ -1,6 +1,7 @@
 export * from './animations.js'
 export * from './borders/index.js'
 export * from './colors/index.js'
+export * from './effects/index.js'
 export * from './elevation/index.js'
 export * from './layout/spaces.js'
 export * from './opacities.js'

ui/theme/src/tokens/opacities.ts

@@ -1,3 +1,4 @@
+// TODO remove after components migration to opacity
 export const opacities = {
   transparent: 0,
   disabled: 0.5,