@quen-ui/theme 0.0.13

package/README.md

@@ -0,0 +1,61 @@
+# @quen-ui/theme
+
+Design system theme: tokens, variables, and a provider for use in React applications.
+Provides a consistent visual style for components from `@quen-ui/components`.
+
+## Installation
+
+```bash
+npm install @quen-ui/theme
+```
+
+## Quick Start
+
+Wrap your app in `QuenUIProvider` so that all design system components have access to tokens and CSS variables:
+
+```tsx
+import { QuenUIProvider, QuenUIDarkTheme } from '@design-system/theme';
+import { Button } from '@design-system/components';
+
+export function App() {
+  return (
+    <QuenUIProvider theme={QuenUIDarkTheme}>
+      <Button view="primary">Example</Button>
+    </QuenUIProvider>
+  );
+}
+```
+
+## Tokens
+
+The package defines design tokens: colors, typography, padding, sizes, etc.
+They are available as CSS variables and JavaScript objects.
+
+
+Example: using a CSS Variable
+
+```css
+.my-class {
+  color: var(--quen-ui-primary-color);
+  background: var(--quen-ui-color-body);
+}
+```
+
+Example: using a token in code
+
+```tsx
+import { useTheme } from '@design-system/theme';
+
+function Example() {
+  const theme = useTheme();
+  return <div style={{ color: theme.textColor }}>Текст</div>;
+}
+```
+
+Example: using with styled-components
+
+```ts
+const Container = styled.div`
+  background: ${({ theme }) => theme.colors.gray[9]}
+`
+```

package/dist/QuenUIProvider.cjs.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const styledComponents = require("styled-components");
+const react = require("react");
+const injectCssVarsFromTheme = require("./injectCssVarsFromTheme.cjs.js");
+const QuenUIProvider = ({
+  theme,
+  children
+}) => {
+  react.useEffect(() => {
+    injectCssVarsFromTheme.injectCssVarsFromTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme, children });
+};
+exports.QuenUIProvider = QuenUIProvider;

package/dist/QuenUIProvider.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { IQuenUITheme } from './theme/types';
+export declare const QuenUIProvider: ({ theme, children }: {
+    theme: IQuenUITheme;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/QuenUIProvider.es.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { ThemeProvider } from "styled-components";
+import { useEffect } from "react";
+import { injectCssVarsFromTheme } from "./injectCssVarsFromTheme.es.js";
+const QuenUIProvider = ({
+  theme,
+  children
+}) => {
+  useEffect(() => {
+    injectCssVarsFromTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children });
+};
+export {
+  QuenUIProvider
+};

package/dist/colors/index.cjs.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const QUEN_UI_LIGHT_COLORS = {
+  violet: {
+    1: "#edeafc",
+    2: "#dcd5fa",
+    3: "#cac1f8",
+    4: "#b9acf5",
+    5: "#a798f3",
+    6: "#9683f1",
+    7: "#846fee",
+    8: "#735aec",
+    9: "#6246ea"
+  },
+  gray: {
+    1: "#fffffe",
+    2: "#e2e2e1",
+    3: "#c6c6c5",
+    4: "#aaaaa9",
+    5: "#8d8d8d",
+    6: "#717170",
+    7: "#555554",
+    8: "#383838",
+    9: "#1c1c1c"
+  },
+  grayViolet: {
+    1: "#f9f9fc",
+    2: "#f4f4fa",
+    3: "#efeff7",
+    4: "#eaeaf5",
+    5: "#e5e5f2",
+    6: "#e0e0f0",
+    7: "#dbdbed",
+    8: "#d6d6eb",
+    9: "#d1d1e9"
+  },
+  green: {
+    1: "#e2f5f0",
+    2: "#c6ebe2",
+    3: "#aae1d4",
+    4: "#8dd7c6",
+    5: "#71ceb8",
+    6: "#55c4aa",
+    7: "#38ba9c",
+    8: "#1cb08e",
+    9: "#00a780"
+  },
+  red: {
+    1: "#fcecec",
+    2: "#f9d9d9",
+    3: "#f6c7c7",
+    4: "#f3b4b4",
+    5: "#f0a2a2",
+    6: "#ed8f8f",
+    7: "#ea7d7d",
+    8: "#e76a6a",
+    9: "#e45858"
+  },
+  yellow: {
+    1: "#fefeef",
+    2: "#fdfddf",
+    3: "#fdfccf",
+    4: "#fcfbbf",
+    5: "#fbfbb0",
+    6: "#fbfaa0",
+    7: "#faf990",
+    8: "#f9f880",
+    9: "#f9f871"
+  },
+  orange: {
+    1: "#fff8eb",
+    2: "#fff1d7",
+    3: "#ffeac3",
+    4: "#ffe3af",
+    5: "#ffdd9c",
+    6: "#ffd688",
+    7: "#ffcf74",
+    8: "#ffc860",
+    9: "#ffc24d"
+  }
+};
+const QUEN_UI_DARK_COLORS = {
+  violet: {
+    1: "#0a071a",
+    2: "#150f34",
+    3: "#20174e",
+    4: "#2b1f68",
+    5: "#362682",
+    6: "#412e9c",
+    7: "#4c36b6",
+    8: "#573ed0",
+    9: "#6246ea"
+  },
+  gray: {
+    1: "#1c1c1c",
+    2: "#383838",
+    3: "#555554",
+    4: "#717170",
+    5: "#8d8d8d",
+    6: "#aaaaa9",
+    7: "#c6c6c5",
+    8: "#e2e2e1",
+    9: "#fffffe"
+  },
+  grayViolet: {
+    1: "#171719",
+    2: "#2e2e33",
+    3: "#45454d",
+    4: "#5c5c67",
+    5: "#747481",
+    6: "#8b8b9b",
+    7: "#a2a2b5",
+    8: "#b9b9cf",
+    9: "#d1d1e9"
+  },
+  green: {
+    1: "#00120e",
+    2: "#00251c",
+    3: "#00372a",
+    4: "#004a38",
+    5: "#005c47",
+    6: "#006f55",
+    7: "#008163",
+    8: "#009471",
+    9: "#00a780"
+  },
+  red: {
+    1: "#190909",
+    2: "#321313",
+    3: "#4c1d1d",
+    4: "#652727",
+    5: "#7e3030",
+    6: "#983a3a",
+    7: "#b14444",
+    8: "#ca4e4e",
+    9: "#e45858"
+  },
+  yellow: {
+    1: "#1b1b0c",
+    2: "#373719",
+    3: "#535225",
+    4: "#6e6e32",
+    5: "#8a893e",
+    6: "#a6a54b",
+    7: "#c1c057",
+    8: "#dddc64",
+    9: "#f9f871"
+  },
+  orange: {
+    1: "#1c1508",
+    2: "#382b11",
+    3: "#554019",
+    4: "#715622",
+    5: "#8d6b2a",
+    6: "#aa8133",
+    7: "#c6963b",
+    8: "#e2ac44",
+    9: "#ffc24d"
+  }
+};
+exports.QUEN_UI_DARK_COLORS = QUEN_UI_DARK_COLORS;
+exports.QUEN_UI_LIGHT_COLORS = QUEN_UI_LIGHT_COLORS;

package/dist/colors/index.d.ts

@@ -0,0 +1,3 @@
+import { TQuenUIColors } from './types';
+export declare const QUEN_UI_LIGHT_COLORS: TQuenUIColors;
+export declare const QUEN_UI_DARK_COLORS: TQuenUIColors;

package/dist/colors/index.es.js

@@ -0,0 +1,162 @@
+const QUEN_UI_LIGHT_COLORS = {
+  violet: {
+    1: "#edeafc",
+    2: "#dcd5fa",
+    3: "#cac1f8",
+    4: "#b9acf5",
+    5: "#a798f3",
+    6: "#9683f1",
+    7: "#846fee",
+    8: "#735aec",
+    9: "#6246ea"
+  },
+  gray: {
+    1: "#fffffe",
+    2: "#e2e2e1",
+    3: "#c6c6c5",
+    4: "#aaaaa9",
+    5: "#8d8d8d",
+    6: "#717170",
+    7: "#555554",
+    8: "#383838",
+    9: "#1c1c1c"
+  },
+  grayViolet: {
+    1: "#f9f9fc",
+    2: "#f4f4fa",
+    3: "#efeff7",
+    4: "#eaeaf5",
+    5: "#e5e5f2",
+    6: "#e0e0f0",
+    7: "#dbdbed",
+    8: "#d6d6eb",
+    9: "#d1d1e9"
+  },
+  green: {
+    1: "#e2f5f0",
+    2: "#c6ebe2",
+    3: "#aae1d4",
+    4: "#8dd7c6",
+    5: "#71ceb8",
+    6: "#55c4aa",
+    7: "#38ba9c",
+    8: "#1cb08e",
+    9: "#00a780"
+  },
+  red: {
+    1: "#fcecec",
+    2: "#f9d9d9",
+    3: "#f6c7c7",
+    4: "#f3b4b4",
+    5: "#f0a2a2",
+    6: "#ed8f8f",
+    7: "#ea7d7d",
+    8: "#e76a6a",
+    9: "#e45858"
+  },
+  yellow: {
+    1: "#fefeef",
+    2: "#fdfddf",
+    3: "#fdfccf",
+    4: "#fcfbbf",
+    5: "#fbfbb0",
+    6: "#fbfaa0",
+    7: "#faf990",
+    8: "#f9f880",
+    9: "#f9f871"
+  },
+  orange: {
+    1: "#fff8eb",
+    2: "#fff1d7",
+    3: "#ffeac3",
+    4: "#ffe3af",
+    5: "#ffdd9c",
+    6: "#ffd688",
+    7: "#ffcf74",
+    8: "#ffc860",
+    9: "#ffc24d"
+  }
+};
+const QUEN_UI_DARK_COLORS = {
+  violet: {
+    1: "#0a071a",
+    2: "#150f34",
+    3: "#20174e",
+    4: "#2b1f68",
+    5: "#362682",
+    6: "#412e9c",
+    7: "#4c36b6",
+    8: "#573ed0",
+    9: "#6246ea"
+  },
+  gray: {
+    1: "#1c1c1c",
+    2: "#383838",
+    3: "#555554",
+    4: "#717170",
+    5: "#8d8d8d",
+    6: "#aaaaa9",
+    7: "#c6c6c5",
+    8: "#e2e2e1",
+    9: "#fffffe"
+  },
+  grayViolet: {
+    1: "#171719",
+    2: "#2e2e33",
+    3: "#45454d",
+    4: "#5c5c67",
+    5: "#747481",
+    6: "#8b8b9b",
+    7: "#a2a2b5",
+    8: "#b9b9cf",
+    9: "#d1d1e9"
+  },
+  green: {
+    1: "#00120e",
+    2: "#00251c",
+    3: "#00372a",
+    4: "#004a38",
+    5: "#005c47",
+    6: "#006f55",
+    7: "#008163",
+    8: "#009471",
+    9: "#00a780"
+  },
+  red: {
+    1: "#190909",
+    2: "#321313",
+    3: "#4c1d1d",
+    4: "#652727",
+    5: "#7e3030",
+    6: "#983a3a",
+    7: "#b14444",
+    8: "#ca4e4e",
+    9: "#e45858"
+  },
+  yellow: {
+    1: "#1b1b0c",
+    2: "#373719",
+    3: "#535225",
+    4: "#6e6e32",
+    5: "#8a893e",
+    6: "#a6a54b",
+    7: "#c1c057",
+    8: "#dddc64",
+    9: "#f9f871"
+  },
+  orange: {
+    1: "#1c1508",
+    2: "#382b11",
+    3: "#554019",
+    4: "#715622",
+    5: "#8d6b2a",
+    6: "#aa8133",
+    7: "#c6963b",
+    8: "#e2ac44",
+    9: "#ffc24d"
+  }
+};
+export {
+  QUEN_UI_DARK_COLORS,
+  QUEN_UI_LIGHT_COLORS
+};

package/dist/colors/types.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const QUENUI_COlORS_PALETTE = ["violet", "gray", "grayViolet", "red", "yellow", "green", "orange"];
+exports.QUENUI_COlORS_PALETTE = QUENUI_COlORS_PALETTE;

package/dist/colors/types.d.ts

@@ -0,0 +1,14 @@
+export declare const QUENUI_COlORS_PALETTE: readonly ["violet", "gray", "grayViolet", "red", "yellow", "green", "orange"];
+export interface IQuenUIColor {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+}
+export type TDefaultQuenUIColors = typeof QUENUI_COlORS_PALETTE[number];
+export type TQuenUIColors = Record<TDefaultQuenUIColors, IQuenUIColor>;

package/dist/colors/types.es.js

@@ -0,0 +1,4 @@
+const QUENUI_COlORS_PALETTE = ["violet", "gray", "grayViolet", "red", "yellow", "green", "orange"];
+export {
+  QUENUI_COlORS_PALETTE
+};

package/dist/constants/control.cjs.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const polished = require("polished");
+const QUENUI_DEFAULT_CONTROL = {
+  radius: polished.rem(4),
+  borderWidth: polished.rem(1),
+  height: {
+    l: polished.rem(48),
+    m: polished.rem(40),
+    s: polished.rem(32),
+    xs: polished.rem(24)
+  }
+};
+exports.QUENUI_DEFAULT_CONTROL = QUENUI_DEFAULT_CONTROL;

package/dist/constants/control.d.ts

@@ -0,0 +1,2 @@
+import { IQuenUIThemeControl } from '../types/control';
+export declare const QUENUI_DEFAULT_CONTROL: IQuenUIThemeControl;

package/dist/constants/control.es.js

@@ -0,0 +1,14 @@
+import { rem } from "polished";
+const QUENUI_DEFAULT_CONTROL = {
+  radius: rem(4),
+  borderWidth: rem(1),
+  height: {
+    l: rem(48),
+    m: rem(40),
+    s: rem(32),
+    xs: rem(24)
+  }
+};
+export {
+  QUENUI_DEFAULT_CONTROL
+};

package/dist/constants/font.cjs.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const polished = require("polished");
+const QUENUI_DEFAULT_FONT = {
+  header: {
+    size: {
+      "2xl": polished.rem(56),
+      xl: polished.rem(40),
+      l: polished.rem(32),
+      m: polished.rem(28),
+      s: polished.rem(24),
+      xs: polished.rem(16)
+    },
+    lineHeight: {
+      "2xl": polished.rem(64),
+      xl: polished.rem(48),
+      l: polished.rem(40),
+      m: polished.rem(32),
+      s: polished.rem(24),
+      xs: polished.rem(16)
+    },
+    weight: 700
+  },
+  text: {
+    size: {
+      xl: polished.rem(24),
+      l: polished.rem(20),
+      m: polished.rem(16),
+      s: polished.rem(14),
+      xs: polished.rem(12)
+    },
+    lineHeight: {
+      xl: polished.rem(32),
+      l: polished.rem(28),
+      m: polished.rem(24),
+      s: polished.rem(20),
+      xs: polished.rem(16)
+    },
+    weight: 400
+  }
+};
+exports.QUENUI_DEFAULT_FONT = QUENUI_DEFAULT_FONT;

package/dist/constants/font.d.ts

@@ -0,0 +1,2 @@
+import { IQuenUIFont } from '../types/fonts';
+export declare const QUENUI_DEFAULT_FONT: IQuenUIFont;

package/dist/constants/font.es.js

@@ -0,0 +1,42 @@
+import { rem } from "polished";
+const QUENUI_DEFAULT_FONT = {
+  header: {
+    size: {
+      "2xl": rem(56),
+      xl: rem(40),
+      l: rem(32),
+      m: rem(28),
+      s: rem(24),
+      xs: rem(16)
+    },
+    lineHeight: {
+      "2xl": rem(64),
+      xl: rem(48),
+      l: rem(40),
+      m: rem(32),
+      s: rem(24),
+      xs: rem(16)
+    },
+    weight: 700
+  },
+  text: {
+    size: {
+      xl: rem(24),
+      l: rem(20),
+      m: rem(16),
+      s: rem(14),
+      xs: rem(12)
+    },
+    lineHeight: {
+      xl: rem(32),
+      l: rem(28),
+      m: rem(24),
+      s: rem(20),
+      xs: rem(16)
+    },
+    weight: 400
+  }
+};
+export {
+  QUENUI_DEFAULT_FONT
+};

package/dist/constants/space.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const polished = require("polished");
+const QUENUI_DEFAULT_SPACE = {
+  l: polished.rem(24),
+  m: polished.rem(16),
+  s: polished.rem(12),
+  xs: polished.rem(8)
+};
+exports.QUENUI_DEFAULT_SPACE = QUENUI_DEFAULT_SPACE;

package/dist/constants/space.d.ts

@@ -0,0 +1,2 @@
+import { IQuenUIThemeSpace } from '../types/space';
+export declare const QUENUI_DEFAULT_SPACE: IQuenUIThemeSpace;

package/dist/constants/space.es.js

@@ -0,0 +1,10 @@
+import { rem } from "polished";
+const QUENUI_DEFAULT_SPACE = {
+  l: rem(24),
+  m: rem(16),
+  s: rem(12),
+  xs: rem(8)
+};
+export {
+  QUENUI_DEFAULT_SPACE
+};

package/dist/createTheme.cjs.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers = require("@quen-ui/helpers");
+const lightTheme = require("./theme/lightTheme.cjs.js");
+const createTheme = (newTheme, defaultTheme = lightTheme.QuenUILightTheme) => {
+  return helpers.deepMerge(defaultTheme, newTheme);
+};
+exports.createTheme = createTheme;

package/dist/createTheme.d.ts

@@ -0,0 +1,3 @@
+import { TDeepPartial } from '@quen-ui/helpers';
+import { IQuenUITheme } from './theme/types';
+export declare const createTheme: (newTheme: TDeepPartial<IQuenUITheme>, defaultTheme?: IQuenUITheme) => IQuenUITheme<import('./colors/types').TQuenUIColors> & TDeepPartial<IQuenUITheme<import('./colors/types').TQuenUIColors>>;

package/dist/createTheme.es.js

@@ -0,0 +1,8 @@
+import { deepMerge } from "@quen-ui/helpers";
+import { QuenUILightTheme } from "./theme/lightTheme.es.js";
+const createTheme = (newTheme, defaultTheme = QuenUILightTheme) => {
+  return deepMerge(defaultTheme, newTheme);
+};
+export {
+  createTheme
+};

package/dist/index.cjs.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const font = require("./constants/font.cjs.js");
+const space = require("./constants/space.cjs.js");
+const control = require("./constants/control.cjs.js");
+const index = require("./colors/index.cjs.js");
+const darkTheme = require("./theme/darkTheme.cjs.js");
+const lightTheme = require("./theme/lightTheme.cjs.js");
+const types = require("./colors/types.cjs.js");
+const QuenUIProvider = require("./QuenUIProvider.cjs.js");
+const useTheme = require("./useTheme.cjs.js");
+const createTheme = require("./createTheme.cjs.js");
+const injectCssVarsFromTheme = require("./injectCssVarsFromTheme.cjs.js");
+exports.QUENUI_DEFAULT_FONT = font.QUENUI_DEFAULT_FONT;
+exports.QUENUI_DEFAULT_SPACE = space.QUENUI_DEFAULT_SPACE;
+exports.QUENUI_DEFAULT_CONTROL = control.QUENUI_DEFAULT_CONTROL;
+exports.QUEN_UI_DARK_COLORS = index.QUEN_UI_DARK_COLORS;
+exports.QUEN_UI_LIGHT_COLORS = index.QUEN_UI_LIGHT_COLORS;
+exports.QuenUIDarkTheme = darkTheme.QuenUIDarkTheme;
+exports.QuenUILightTheme = lightTheme.QuenUILightTheme;
+exports.QUENUI_COlORS_PALETTE = types.QUENUI_COlORS_PALETTE;
+exports.QuenUIProvider = QuenUIProvider.QuenUIProvider;
+exports.useTheme = useTheme.useTheme;
+exports.createTheme = createTheme.createTheme;
+exports.getVariables = injectCssVarsFromTheme.getVariables;
+exports.injectCssVarsFromTheme = injectCssVarsFromTheme.injectCssVarsFromTheme;

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { QUENUI_DEFAULT_FONT } from './constants/font';
+export { QUENUI_DEFAULT_SPACE } from './constants/space';
+export { QUENUI_DEFAULT_CONTROL } from './constants/control';
+export { QUEN_UI_DARK_COLORS, QUEN_UI_LIGHT_COLORS } from './colors';
+export { QuenUIDarkTheme } from './theme/darkTheme';
+export { QuenUILightTheme } from './theme/lightTheme';
+export { QUENUI_COlORS_PALETTE } from './colors/types';
+export { QuenUIProvider } from './QuenUIProvider';
+export type { IQuenUIFont } from './types/fonts';
+export type { IQuenUIThemeControl } from './types/control';
+export type { IQuenUIThemeSpace } from './types/space';
+export type { IQuenUITheme } from './theme/types';
+export type { IQuenUIColor, TDefaultQuenUIColors } from './colors/types';
+export { useTheme } from './useTheme';
+export { createTheme } from './createTheme';
+export { injectCssVarsFromTheme, getVariables } from './injectCssVarsFromTheme';

package/dist/index.es.js

@@ -0,0 +1,26 @@
+import { QUENUI_DEFAULT_FONT } from "./constants/font.es.js";
+import { QUENUI_DEFAULT_SPACE } from "./constants/space.es.js";
+import { QUENUI_DEFAULT_CONTROL } from "./constants/control.es.js";
+import { QUEN_UI_DARK_COLORS, QUEN_UI_LIGHT_COLORS } from "./colors/index.es.js";
+import { QuenUIDarkTheme } from "./theme/darkTheme.es.js";
+import { QuenUILightTheme } from "./theme/lightTheme.es.js";
+import { QUENUI_COlORS_PALETTE } from "./colors/types.es.js";
+import { QuenUIProvider } from "./QuenUIProvider.es.js";
+import { useTheme } from "./useTheme.es.js";
+import { createTheme } from "./createTheme.es.js";
+import { getVariables, injectCssVarsFromTheme } from "./injectCssVarsFromTheme.es.js";
+export {
+  QUENUI_COlORS_PALETTE,
+  QUENUI_DEFAULT_CONTROL,
+  QUENUI_DEFAULT_FONT,
+  QUENUI_DEFAULT_SPACE,
+  QUEN_UI_DARK_COLORS,
+  QUEN_UI_LIGHT_COLORS,
+  QuenUIDarkTheme,
+  QuenUILightTheme,
+  QuenUIProvider,
+  createTheme,
+  getVariables,
+  injectCssVarsFromTheme,
+  useTheme
+};

package/dist/injectCssVarsFromTheme.cjs.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const toCssVarName = (path) => `--quen-ui-${path.join("-")}`;
+const extractVars = (obj, path = []) => {
+  return Object.entries(obj).flatMap(([key, value]) => {
+    const currentPath = [...path, key];
+    if (typeof value === "object" && value !== null) {
+      return extractVars(value, currentPath);
+    }
+    return [[toCssVarName(currentPath), value]];
+  });
+};
+const getVariables = (theme) => {
+  const entries = [];
+  entries.push(["--quen-ui-font-family", theme.fontFamily]);
+  entries.push(["--quen-ui-text-color", theme.textColor]);
+  entries.push(["--quen-ui-color-body", theme.colorBody]);
+  entries.push(["--quen-ui-primary-color", theme.primaryColor]);
+  entries.push(...extractVars(theme.colors, ["color"]));
+  entries.push(...extractVars(theme.control, ["control"]));
+  entries.push(...extractVars(theme.space, ["space"]));
+  if (theme.fonts) {
+    entries.push(...extractVars(theme.fonts, ["fonts"]));
+  }
+  return entries;
+};
+const injectCssVarsFromTheme = (theme, root = document.documentElement) => {
+  for (const [key, value] of getVariables(theme)) {
+    root.style.setProperty(key, value);
+  }
+};
+exports.getVariables = getVariables;
+exports.injectCssVarsFromTheme = injectCssVarsFromTheme;

package/dist/injectCssVarsFromTheme.d.ts

@@ -0,0 +1,3 @@
+import { IQuenUITheme } from './theme/types';
+export declare const getVariables: (theme: IQuenUITheme) => [string, string][];
+export declare const injectCssVarsFromTheme: (theme: IQuenUITheme, root?: HTMLElement) => void;

package/dist/injectCssVarsFromTheme.es.js

@@ -0,0 +1,33 @@
+const toCssVarName = (path) => `--quen-ui-${path.join("-")}`;
+const extractVars = (obj, path = []) => {
+  return Object.entries(obj).flatMap(([key, value]) => {
+    const currentPath = [...path, key];
+    if (typeof value === "object" && value !== null) {
+      return extractVars(value, currentPath);
+    }
+    return [[toCssVarName(currentPath), value]];
+  });
+};
+const getVariables = (theme) => {
+  const entries = [];
+  entries.push(["--quen-ui-font-family", theme.fontFamily]);
+  entries.push(["--quen-ui-text-color", theme.textColor]);
+  entries.push(["--quen-ui-color-body", theme.colorBody]);
+  entries.push(["--quen-ui-primary-color", theme.primaryColor]);
+  entries.push(...extractVars(theme.colors, ["color"]));
+  entries.push(...extractVars(theme.control, ["control"]));
+  entries.push(...extractVars(theme.space, ["space"]));
+  if (theme.fonts) {
+    entries.push(...extractVars(theme.fonts, ["fonts"]));
+  }
+  return entries;
+};
+const injectCssVarsFromTheme = (theme, root = document.documentElement) => {
+  for (const [key, value] of getVariables(theme)) {
+    root.style.setProperty(key, value);
+  }
+};
+export {
+  getVariables,
+  injectCssVarsFromTheme
+};

package/dist/theme/darkTheme.cjs.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("../colors/index.cjs.js");
+const control = require("../constants/control.cjs.js");
+const space = require("../constants/space.cjs.js");
+const font = require("../constants/font.cjs.js");
+const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
+const QuenUIDarkTheme = {
+  colors: index.QUEN_UI_DARK_COLORS,
+  primaryColor: "violet",
+  textColor: index.QUEN_UI_DARK_COLORS.gray["9"],
+  fontFamily: DEFAULT_FONT_FAMILY,
+  control: control.QUENUI_DEFAULT_CONTROL,
+  space: space.QUENUI_DEFAULT_SPACE,
+  fonts: font.QUENUI_DEFAULT_FONT,
+  colorBody: "#1c1c1c",
+  components: {}
+};
+exports.QuenUIDarkTheme = QuenUIDarkTheme;

package/dist/theme/darkTheme.d.ts

@@ -0,0 +1,2 @@
+import { IQuenUITheme } from './types';
+export declare const QuenUIDarkTheme: IQuenUITheme;

package/dist/theme/darkTheme.es.js

@@ -0,0 +1,19 @@
+import { QUEN_UI_DARK_COLORS } from "../colors/index.es.js";
+import { QUENUI_DEFAULT_CONTROL } from "../constants/control.es.js";
+import { QUENUI_DEFAULT_SPACE } from "../constants/space.es.js";
+import { QUENUI_DEFAULT_FONT } from "../constants/font.es.js";
+const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
+const QuenUIDarkTheme = {
+  colors: QUEN_UI_DARK_COLORS,
+  primaryColor: "violet",
+  textColor: QUEN_UI_DARK_COLORS.gray["9"],
+  fontFamily: DEFAULT_FONT_FAMILY,
+  control: QUENUI_DEFAULT_CONTROL,
+  space: QUENUI_DEFAULT_SPACE,
+  fonts: QUENUI_DEFAULT_FONT,
+  colorBody: "#1c1c1c",
+  components: {}
+};
+export {
+  QuenUIDarkTheme
+};

package/dist/theme/lightTheme.cjs.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("../colors/index.cjs.js");
+const control = require("../constants/control.cjs.js");
+const space = require("../constants/space.cjs.js");
+const font = require("../constants/font.cjs.js");
+const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
+const QuenUILightTheme = {
+  colors: index.QUEN_UI_LIGHT_COLORS,
+  primaryColor: "violet",
+  textColor: index.QUEN_UI_LIGHT_COLORS.gray["9"],
+  fontFamily: DEFAULT_FONT_FAMILY,
+  control: control.QUENUI_DEFAULT_CONTROL,
+  space: space.QUENUI_DEFAULT_SPACE,
+  fonts: font.QUENUI_DEFAULT_FONT,
+  colorBody: "#fffffe",
+  components: {}
+};
+exports.QuenUILightTheme = QuenUILightTheme;

package/dist/theme/lightTheme.d.ts

@@ -0,0 +1,2 @@
+import { IQuenUITheme } from './types';
+export declare const QuenUILightTheme: IQuenUITheme;

package/dist/theme/lightTheme.es.js

@@ -0,0 +1,19 @@
+import { QUEN_UI_LIGHT_COLORS } from "../colors/index.es.js";
+import { QUENUI_DEFAULT_CONTROL } from "../constants/control.es.js";
+import { QUENUI_DEFAULT_SPACE } from "../constants/space.es.js";
+import { QUENUI_DEFAULT_FONT } from "../constants/font.es.js";
+const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
+const QuenUILightTheme = {
+  colors: QUEN_UI_LIGHT_COLORS,
+  primaryColor: "violet",
+  textColor: QUEN_UI_LIGHT_COLORS.gray["9"],
+  fontFamily: DEFAULT_FONT_FAMILY,
+  control: QUENUI_DEFAULT_CONTROL,
+  space: QUENUI_DEFAULT_SPACE,
+  fonts: QUENUI_DEFAULT_FONT,
+  colorBody: "#fffffe",
+  components: {}
+};
+export {
+  QuenUILightTheme
+};

package/dist/theme/types.d.ts

@@ -0,0 +1,15 @@
+import { TQuenUIColors } from '../colors/types';
+import { IQuenUIThemeControl } from '../types/control';
+import { IQuenUIThemeSpace } from '../types/space';
+import { IQuenUIFont } from '../types/fonts';
+export interface IQuenUITheme<C extends TQuenUIColors = TQuenUIColors> {
+    colors: C;
+    primaryColor: keyof TQuenUIColors;
+    colorBody: string;
+    textColor: string;
+    fontFamily: string;
+    control: IQuenUIThemeControl;
+    space: IQuenUIThemeSpace;
+    fonts: IQuenUIFont;
+    components: Record<string, any>;
+}

package/dist/types/control.d.ts

@@ -0,0 +1,10 @@
+export interface IQuenUIThemeControl {
+    radius: string;
+    borderWidth: string;
+    height: {
+        l: string;
+        m: string;
+        s: string;
+        xs: string;
+    };
+}

package/dist/types/fonts.d.ts

@@ -0,0 +1,38 @@
+export interface IQuenUIFont {
+    header: {
+        size: {
+            "2xl": string;
+            xl: string;
+            l: string;
+            m: string;
+            s: string;
+            xs: string;
+        };
+        lineHeight: {
+            "2xl": string;
+            xl: string;
+            l: string;
+            m: string;
+            s: string;
+            xs: string;
+        };
+        weight: number;
+    };
+    text: {
+        size: {
+            xl: string;
+            l: string;
+            m: string;
+            s: string;
+            xs: string;
+        };
+        lineHeight: {
+            xl: string;
+            l: string;
+            m: string;
+            s: string;
+            xs: string;
+        };
+        weight: number;
+    };
+}

package/dist/types/space.d.ts

@@ -0,0 +1,6 @@
+export interface IQuenUIThemeSpace {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+}

package/dist/useTheme.cjs.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const styledComponents = require("styled-components");
+const useTheme = () => {
+  const theme = react.useContext(styledComponents.ThemeContext);
+  if (!theme) {
+    throw new Error("useTheme must be used within a QuenUIProvider");
+  }
+  return theme;
+};
+exports.useTheme = useTheme;

package/dist/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { IQuenUITheme } from './theme/types';
+export declare const useTheme: () => IQuenUITheme;

package/dist/useTheme.es.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
+const useTheme = () => {
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error("useTheme must be used within a QuenUIProvider");
+  }
+  return theme;
+};
+export {
+  useTheme
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@quen-ui/theme",
+  "private": false,
+  "version": "0.0.13",
+  "type": "module",
+  "homepage": "https://quen-ui.github.io/quen-ui/",
+  "author": "QuenUI",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "dependencies": {
+    "@quen-ui/helpers": "*",
+    "styled-components": "^6.1.15"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^4.3.4",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "components",
+    "react",
+    "react-components",
+    "design",
+    "frontend",
+    "library",
+    "ui",
+    "ui-kit",
+    "theme",
+    "styled-components"
+  ],
+  "license": "MIT"
+}