From bd8b6675b3d7549caa7501378d574bc90fa995d7 Mon Sep 17 00:00:00 2001
From: roman <bonchevskyi@gmail.com>
Date: Thu, 20 Aug 2026 15:45:00 +0200
Subject: [PATCH] refactor(styles): migrate styles from Flow to TypeScript

---
 .../{theme.test.js => theme.test.ts}          |  0
 src/styles/constants/README.md                |  2 +-
 src/styles/{theme.js => theme.js.flow}        |  0
 src/styles/theme.ts                           | 59 +++++++++++++++++++
 .../{variables.js => variables.js.flow}       |  0
 5 files changed, 60 insertions(+), 1 deletion(-)
 rename src/styles/__tests__/{theme.test.js => theme.test.ts} (100%)
 rename src/styles/{theme.js => theme.js.flow} (100%)
 create mode 100644 src/styles/theme.ts
 rename src/styles/{variables.js => variables.js.flow} (100%)

diff --git a/src/styles/__tests__/theme.test.js b/src/styles/__tests__/theme.test.ts
similarity index 100%
rename from src/styles/__tests__/theme.test.js
rename to src/styles/__tests__/theme.test.ts
diff --git a/src/styles/constants/README.md b/src/styles/constants/README.md
index bb7285358a..26f664b9e9 100644
--- a/src/styles/constants/README.md
+++ b/src/styles/constants/README.md
@@ -3,6 +3,6 @@
 Changes to style constants are heavily discouraged. Please ask whether your change is truly necessary, or if you could use tokens from another design system instead.
 
 If a constant must be added or changed:
-* Manually update variables.js, variables.json, and variables.ts. See previous commits in this directory for examples.
+* Manually update variables.js.flow, variables.json, and variables.ts. See previous commits in this directory for examples.
 * Example: https://github.com/box/box-ui-elements/pull/3068/files
 * A review from the box-ui-elements team is required
diff --git a/src/styles/theme.js b/src/styles/theme.js.flow
similarity index 100%
rename from src/styles/theme.js
rename to src/styles/theme.js.flow
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
new file mode 100644
index 0000000000..35b980c45b
--- /dev/null
+++ b/src/styles/theme.ts
@@ -0,0 +1,59 @@
+// export our theme to the provider
+// This is globally available in styled-components when interpolating a function like so:
+// ${(props) => props.theme}
+// Or using import { withTheme } from 'styled-components';
+
+import * as vars from './variables';
+
+const theme = {
+    base: {
+        background: vars.white,
+        backgroundHover: vars.bdlGray05,
+        backgroundActive: vars.bdlGray10,
+        foreground: vars.bdlGray,
+        border: vars.bdlGray30,
+
+        buttonForeground: vars.black,
+        buttonBackground: vars.white,
+        buttonBackgroundHover: vars.bdlGray05,
+        buttonBackgroundActive: vars.bdlGray10,
+        buttonBorder: vars.bdlGray30,
+        buttonBorderHover: vars.bdlGray30,
+        buttonBorderActive: vars.bdlGray30,
+
+        progressBarBackground: vars.bdlGray40,
+
+        scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',
+        gridUnitPx: parseInt(vars.bdlGridUnitPx, 10), // grid unit in pixels (as number for computations)
+    },
+
+    // Primary or brand color
+    primary: {
+        background: vars.bdlBoxBlue,
+        backgroundActive: '#004eac',
+        backgroundGradient: '#0055bc',
+        backgroundHover: '#006ae9',
+        border: vars.bdlBoxBlue,
+
+        buttonBackground: vars.bdlBoxBlue,
+        buttonBackgroundActive: '#004eac',
+        buttonBackgroundHover: '#006ae9',
+        buttonBorder: vars.bdlBoxBlue,
+        buttonBorderActive: '#004eac',
+        buttonBorderHover: '#006ae9',
+        buttonForeground: vars.white,
+        foreground: vars.white,
+
+        progressBarBackground: '#006ae9',
+
+        scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',
+    },
+
+    // TODO: Should be the same keys as the default if applicable
+    modes: {
+        admin: {},
+        dark: {},
+    },
+};
+
+export default theme;
diff --git a/src/styles/variables.js b/src/styles/variables.js.flow
similarity index 100%
rename from src/styles/variables.js
rename to src/styles/variables.js.flow