From 4b9cd5b5868ae276d8bb8aa8687a322a2383ccc8 Mon Sep 17 00:00:00 2001
From: Arina Gazhina <gazhina@internet.ru>
Date: Mon, 24 Aug 2026 21:40:34 +0300
Subject: [PATCH 1/3] feat(theme): add web opacity tokens

---
 ui/theme/src/tokens/effects/index.ts   |  1 +
 ui/theme/src/tokens/effects/opacity.ts | 14 ++++++++++++++
 ui/theme/src/tokens/index.ts           |  1 +
 3 files changed, 16 insertions(+)
 create mode 100644 ui/theme/src/tokens/effects/index.ts
 create mode 100644 ui/theme/src/tokens/effects/opacity.ts

diff --git a/ui/theme/src/tokens/effects/index.ts b/ui/theme/src/tokens/effects/index.ts
new file mode 100644
index 000000000..42eaaf5e2
--- /dev/null
+++ b/ui/theme/src/tokens/effects/index.ts
@@ -0,0 +1 @@
+export * from './opacity.js'
diff --git a/ui/theme/src/tokens/effects/opacity.ts b/ui/theme/src/tokens/effects/opacity.ts
new file mode 100644
index 000000000..1d111b745
--- /dev/null
+++ b/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
diff --git a/ui/theme/src/tokens/index.ts b/ui/theme/src/tokens/index.ts
index 41f7e7d43..f8d49a9eb 100644
--- a/ui/theme/src/tokens/index.ts
+++ b/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 './layout/spaces.js'
 export * from './opacities.js'
 export * from './layout/radii.js'

From 5d50db6b290a578cb4ccf9502202785bb5ab527f Mon Sep 17 00:00:00 2001
From: Arina Gazhina <gazhina@internet.ru>
Date: Mon, 24 Aug 2026 21:40:35 +0300
Subject: [PATCH 2/3] chore(theme): mark opacities as legacy

---
 ui/theme/src/tokens/opacities.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/theme/src/tokens/opacities.ts b/ui/theme/src/tokens/opacities.ts
index 0146b7595..016b372dc 100644
--- a/ui/theme/src/tokens/opacities.ts
+++ b/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,

From 6ac702c276cd933f215b66273b4b0b3bd0a17037 Mon Sep 17 00:00:00 2001
From: Arina Gazhina <gazhina@internet.ru>
Date: Tue, 25 Aug 2026 04:57:40 +0300
Subject: [PATCH 3/3] feat(theme): add opacity story

---
 ui-parts/design/src/main.ts                   |  4 +-
 ui-parts/theme/stories/opacity/constants.ts   | 14 ++++
 ui-parts/theme/stories/opacity/interfaces.ts  |  8 ++
 .../theme/stories/opacity/opacity.stories.tsx | 79 +++++++++++++++++++
 4 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 ui-parts/theme/stories/opacity/constants.ts
 create mode 100644 ui-parts/theme/stories/opacity/interfaces.ts
 create mode 100644 ui-parts/theme/stories/opacity/opacity.stories.tsx

diff --git a/ui-parts/design/src/main.ts b/ui-parts/design/src/main.ts
index 6df24ce82..749194cb1 100644
--- a/ui-parts/design/src/main.ts
+++ b/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'),
diff --git a/ui-parts/theme/stories/opacity/constants.ts b/ui-parts/theme/stories/opacity/constants.ts
new file mode 100644
index 000000000..5240620c0
--- /dev/null
+++ b/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',
+]
diff --git a/ui-parts/theme/stories/opacity/interfaces.ts b/ui-parts/theme/stories/opacity/interfaces.ts
new file mode 100644
index 000000000..8c273cff6
--- /dev/null
+++ b/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
+}
diff --git a/ui-parts/theme/stories/opacity/opacity.stories.tsx b/ui-parts/theme/stories/opacity/opacity.stories.tsx
new file mode 100644
index 000000000..7225e1a51
--- /dev/null
+++ b/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> = {}