@consta/uikit 5.0.0-beta.1 → 5.0.0-beta.2

package/__internal__/src/hooks/useThemeVars/helpers.d.ts

@@ -0,0 +1,12 @@
+export declare const defaultVars: {
+    readonly color: {
+        readonly primary: readonly ["--color-bg-default", "--color-bg-secondary", "--color-bg-brand", "--color-bg-link", "--color-bg-border", "--color-bg-stripe", "--color-bg-ghost", "--color-bg-tone", "--color-bg-soft", "--color-bg-system", "--color-bg-normal", "--color-bg-success", "--color-bg-caution", "--color-bg-warning", "--color-bg-alert", "--color-bg-critical", "--color-typo-primary", "--color-typo-secondary", "--color-typo-ghost", "--color-typo-brand", "--color-typo-system", "--color-typo-normal", "--color-typo-success", "--color-typo-caution", "--color-typo-warning", "--color-typo-alert", "--color-typo-critical", "--color-typo-link", "--color-typo-link-minor", "--color-typo-link-hover", "--color-scroll-bg", "--color-scroll-thumb", "--color-scroll-thumb-hover", "--color-control-bg-default", "--color-control-typo-default", "--color-control-typo-placeholder", "--color-control-bg-border-default", "--color-control-bg-border-default-hover", "--color-control-bg-border-focus", "--color-control-bg-focus", "--color-control-bg-active", "--color-control-bg-primary", "--color-control-bg-primary-hover", "--color-control-typo-primary", "--color-control-typo-primary-hover", "--color-control-bg-secondary", "--color-control-bg-border-secondary", "--color-control-bg-border-secondary-hover", "--color-control-typo-secondary", "--color-control-typo-secondary-hover", "--color-control-bg-ghost", "--color-control-bg-ghost-hover", "--color-control-typo-ghost", "--color-control-typo-ghost-hover", "--color-control-bg-clear", "--color-control-bg-clear-hover", "--color-control-typo-clear", "--color-control-typo-clear-hover", "--color-control-bg-disable", "--color-control-bg-border-disable", "--color-control-typo-disable"];
+        readonly accent: readonly ["--color-bg-default", "--color-bg-secondary", "--color-bg-brand", "--color-bg-link", "--color-bg-border", "--color-bg-stripe", "--color-bg-ghost", "--color-bg-tone", "--color-bg-soft", "--color-bg-system", "--color-bg-normal", "--color-bg-success", "--color-bg-caution", "--color-bg-warning", "--color-bg-alert", "--color-bg-critical", "--color-typo-primary", "--color-typo-secondary", "--color-typo-ghost", "--color-typo-brand", "--color-typo-system", "--color-typo-normal", "--color-typo-success", "--color-typo-caution", "--color-typo-warning", "--color-typo-alert", "--color-typo-critical", "--color-typo-link", "--color-typo-link-minor", "--color-typo-link-hover", "--color-scroll-bg", "--color-scroll-thumb", "--color-scroll-thumb-hover", "--color-control-bg-default", "--color-control-typo-default", "--color-control-typo-placeholder", "--color-control-bg-border-default", "--color-control-bg-border-default-hover", "--color-control-bg-border-focus", "--color-control-bg-focus", "--color-control-bg-active", "--color-control-bg-primary", "--color-control-bg-primary-hover", "--color-control-typo-primary", "--color-control-typo-primary-hover", "--color-control-bg-secondary", "--color-control-bg-border-secondary", "--color-control-bg-border-secondary-hover", "--color-control-typo-secondary", "--color-control-typo-secondary-hover", "--color-control-bg-ghost", "--color-control-bg-ghost-hover", "--color-control-typo-ghost", "--color-control-typo-ghost-hover", "--color-control-bg-clear", "--color-control-bg-clear-hover", "--color-control-typo-clear", "--color-control-typo-clear-hover", "--color-control-bg-disable", "--color-control-bg-border-disable", "--color-control-typo-disable"];
+        readonly invert: readonly ["--color-bg-default", "--color-bg-secondary", "--color-bg-brand", "--color-bg-link", "--color-bg-border", "--color-bg-stripe", "--color-bg-ghost", "--color-bg-tone", "--color-bg-soft", "--color-bg-system", "--color-bg-normal", "--color-bg-success", "--color-bg-caution", "--color-bg-warning", "--color-bg-alert", "--color-bg-critical", "--color-typo-primary", "--color-typo-secondary", "--color-typo-ghost", "--color-typo-brand", "--color-typo-system", "--color-typo-normal", "--color-typo-success", "--color-typo-caution", "--color-typo-warning", "--color-typo-alert", "--color-typo-critical", "--color-typo-link", "--color-typo-link-minor", "--color-typo-link-hover", "--color-scroll-bg", "--color-scroll-thumb", "--color-scroll-thumb-hover", "--color-control-bg-default", "--color-control-typo-default", "--color-control-typo-placeholder", "--color-control-bg-border-default", "--color-control-bg-border-default-hover", "--color-control-bg-border-focus", "--color-control-bg-focus", "--color-control-bg-active", "--color-control-bg-primary", "--color-control-bg-primary-hover", "--color-control-typo-primary", "--color-control-typo-primary-hover", "--color-control-bg-secondary", "--color-control-bg-border-secondary", "--color-control-bg-border-secondary-hover", "--color-control-typo-secondary", "--color-control-typo-secondary-hover", "--color-control-bg-ghost", "--color-control-bg-ghost-hover", "--color-control-typo-ghost", "--color-control-typo-ghost-hover", "--color-control-bg-clear", "--color-control-bg-clear-hover", "--color-control-typo-clear", "--color-control-typo-clear-hover", "--color-control-bg-disable", "--color-control-bg-border-disable", "--color-control-typo-disable"];
+    };
+    readonly control: readonly ["--control-radius", "--control-border-width", "--control-height-l", "--control-height-m", "--control-height-s", "--control-height-xs", "--control-box-size-m", "--control-box-size-l", "--control-space-l", "--control-space-m", "--control-space-s", "--control-space-xs", "--control-text-size-l", "--control-text-size-m", "--control-text-size-s", "--control-text-size-xs"];
+    readonly font: readonly ["--font-primary", "--font-mono"];
+    readonly size: readonly ["--size-text-2xs", "--size-text-xs", "--size-text-s", "--size-text-m", "--size-text-l", "--size-text-xl", "--size-text-2xl", "--size-text-3xl", "--size-text-4xl", "--size-text-5xl", "--size-text-6xl", "--line-height-text-2xs", "--line-height-text-xs", "--line-height-text-s", "--line-height-text-m", "--line-height-text-l"];
+    readonly space: readonly ["--space-3xs", "--space-2xs", "--space-xs", "--space-s", "--space-m", "--space-l", "--space-xl", "--space-2xl", "--space-3xl", "--space-4xl", "--space-5xl", "--space-6xl"];
+    readonly shadow: readonly ["--shadow-group", "--shadow-layer", "--shadow-modal"];
+};

package/__internal__/src/hooks/useThemeVars/helpers.js

@@ -0,0 +1,2 @@
+var cssColorVars=["--color-bg-default","--color-bg-secondary","--color-bg-brand","--color-bg-link","--color-bg-border","--color-bg-stripe","--color-bg-ghost","--color-bg-tone","--color-bg-soft","--color-bg-system","--color-bg-normal","--color-bg-success","--color-bg-caution","--color-bg-warning","--color-bg-alert","--color-bg-critical","--color-typo-primary","--color-typo-secondary","--color-typo-ghost","--color-typo-brand","--color-typo-system","--color-typo-normal","--color-typo-success","--color-typo-caution","--color-typo-warning","--color-typo-alert","--color-typo-critical","--color-typo-link","--color-typo-link-minor","--color-typo-link-hover","--color-scroll-bg","--color-scroll-thumb","--color-scroll-thumb-hover","--color-control-bg-default","--color-control-typo-default","--color-control-typo-placeholder","--color-control-bg-border-default","--color-control-bg-border-default-hover","--color-control-bg-border-focus","--color-control-bg-focus","--color-control-bg-active","--color-control-bg-primary","--color-control-bg-primary-hover","--color-control-typo-primary","--color-control-typo-primary-hover","--color-control-bg-secondary","--color-control-bg-border-secondary","--color-control-bg-border-secondary-hover","--color-control-typo-secondary","--color-control-typo-secondary-hover","--color-control-bg-ghost","--color-control-bg-ghost-hover","--color-control-typo-ghost","--color-control-typo-ghost-hover","--color-control-bg-clear","--color-control-bg-clear-hover","--color-control-typo-clear","--color-control-typo-clear-hover","--color-control-bg-disable","--color-control-bg-border-disable","--color-control-typo-disable"],cssControlVars=["--control-radius","--control-border-width","--control-height-l","--control-height-m","--control-height-s","--control-height-xs","--control-box-size-m","--control-box-size-l","--control-space-l","--control-space-m","--control-space-s","--control-space-xs","--control-text-size-l","--control-text-size-m","--control-text-size-s","--control-text-size-xs"],cssFontVars=["--font-primary","--font-mono"],cssSizeVars=["--size-text-2xs","--size-text-xs","--size-text-s","--size-text-m","--size-text-l","--size-text-xl","--size-text-2xl","--size-text-3xl","--size-text-4xl","--size-text-5xl","--size-text-6xl","--line-height-text-2xs","--line-height-text-xs","--line-height-text-s","--line-height-text-m","--line-height-text-l"],cssSpaceVars=["--space-3xs","--space-2xs","--space-xs","--space-s","--space-m","--space-l","--space-xl","--space-2xl","--space-3xl","--space-4xl","--space-5xl","--space-6xl"],cssShadowVars=["--shadow-group","--shadow-layer","--shadow-modal"];export var defaultVars={color:{primary:cssColorVars,accent:cssColorVars,invert:cssColorVars},control:cssControlVars,font:cssFontVars,size:cssSizeVars,space:cssSpaceVars,shadow:cssShadowVars};
+//# sourceMappingURL=helpers.js.map

package/__internal__/src/hooks/useThemeVars/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","names":["cssColorVars","cssControlVars","cssFontVars","cssSizeVars","cssSpaceVars","cssShadowVars","defaultVars","color","primary","accent","invert","control","font","size","space","shadow"],"sources":["../../../../../src/hooks/useThemeVars/helpers.ts"],"sourcesContent":["const cssColorVars = [\n  '--color-bg-default',\n  '--color-bg-secondary',\n  '--color-bg-brand',\n  '--color-bg-link',\n  '--color-bg-border',\n  '--color-bg-stripe',\n  '--color-bg-ghost',\n  '--color-bg-tone',\n  '--color-bg-soft',\n  '--color-bg-system',\n  '--color-bg-normal',\n  '--color-bg-success',\n  '--color-bg-caution',\n  '--color-bg-warning',\n  '--color-bg-alert',\n  '--color-bg-critical',\n  '--color-typo-primary',\n  '--color-typo-secondary',\n  '--color-typo-ghost',\n  '--color-typo-brand',\n  '--color-typo-system',\n  '--color-typo-normal',\n  '--color-typo-success',\n  '--color-typo-caution',\n  '--color-typo-warning',\n  '--color-typo-alert',\n  '--color-typo-critical',\n  '--color-typo-link',\n  '--color-typo-link-minor',\n  '--color-typo-link-hover',\n  '--color-scroll-bg',\n  '--color-scroll-thumb',\n  '--color-scroll-thumb-hover',\n  '--color-control-bg-default',\n  '--color-control-typo-default',\n  '--color-control-typo-placeholder',\n  '--color-control-bg-border-default',\n  '--color-control-bg-border-default-hover',\n  '--color-control-bg-border-focus',\n  '--color-control-bg-focus',\n  '--color-control-bg-active',\n  '--color-control-bg-primary',\n  '--color-control-bg-primary-hover',\n  '--color-control-typo-primary',\n  '--color-control-typo-primary-hover',\n  '--color-control-bg-secondary',\n  '--color-control-bg-border-secondary',\n  '--color-control-bg-border-secondary-hover',\n  '--color-control-typo-secondary',\n  '--color-control-typo-secondary-hover',\n  '--color-control-bg-ghost',\n  '--color-control-bg-ghost-hover',\n  '--color-control-typo-ghost',\n  '--color-control-typo-ghost-hover',\n  '--color-control-bg-clear',\n  '--color-control-bg-clear-hover',\n  '--color-control-typo-clear',\n  '--color-control-typo-clear-hover',\n  '--color-control-bg-disable',\n  '--color-control-bg-border-disable',\n  '--color-control-typo-disable',\n] as const;\n\nconst cssControlVars = [\n  '--control-radius',\n  '--control-border-width',\n  '--control-height-l',\n  '--control-height-m',\n  '--control-height-s',\n  '--control-height-xs',\n  '--control-box-size-m',\n  '--control-box-size-l',\n  '--control-space-l',\n  '--control-space-m',\n  '--control-space-s',\n  '--control-space-xs',\n  '--control-text-size-l',\n  '--control-text-size-m',\n  '--control-text-size-s',\n  '--control-text-size-xs',\n] as const;\n\nconst cssFontVars = ['--font-primary', '--font-mono'] as const;\n\nconst cssSizeVars = [\n  '--size-text-2xs',\n  '--size-text-xs',\n  '--size-text-s',\n  '--size-text-m',\n  '--size-text-l',\n  '--size-text-xl',\n  '--size-text-2xl',\n  '--size-text-3xl',\n  '--size-text-4xl',\n  '--size-text-5xl',\n  '--size-text-6xl',\n  '--line-height-text-2xs',\n  '--line-height-text-xs',\n  '--line-height-text-s',\n  '--line-height-text-m',\n  '--line-height-text-l',\n] as const;\n\nconst cssSpaceVars = [\n  '--space-3xs',\n  '--space-2xs',\n  '--space-xs',\n  '--space-s',\n  '--space-m',\n  '--space-l',\n  '--space-xl',\n  '--space-2xl',\n  '--space-3xl',\n  '--space-4xl',\n  '--space-5xl',\n  '--space-6xl',\n] as const;\n\nconst cssShadowVars = [\n  '--shadow-group',\n  '--shadow-layer',\n  '--shadow-modal',\n] as const;\n\nexport const defaultVars = {\n  color: {\n    primary: cssColorVars,\n    accent: cssColorVars,\n    invert: cssColorVars,\n  },\n  control: cssControlVars,\n  font: cssFontVars,\n  size: cssSizeVars,\n  space: cssSpaceVars,\n  shadow: cssShadowVars,\n} as const;\n"],"mappings":"GAAMA,aAAY,CAAG,CACnB,oBADmB,CAEnB,sBAFmB,CAGnB,kBAHmB,CAInB,iBAJmB,CAKnB,mBALmB,CAMnB,mBANmB,CAOnB,kBAPmB,CAQnB,iBARmB,CASnB,iBATmB,CAUnB,mBAVmB,CAWnB,mBAXmB,CAYnB,oBAZmB,CAanB,oBAbmB,CAcnB,oBAdmB,CAenB,kBAfmB,CAgBnB,qBAhBmB,CAiBnB,sBAjBmB,CAkBnB,wBAlBmB,CAmBnB,oBAnBmB,CAoBnB,oBApBmB,CAqBnB,qBArBmB,CAsBnB,qBAtBmB,CAuBnB,sBAvBmB,CAwBnB,sBAxBmB,CAyBnB,sBAzBmB,CA0BnB,oBA1BmB,CA2BnB,uBA3BmB,CA4BnB,mBA5BmB,CA6BnB,yBA7BmB,CA8BnB,yBA9BmB,CA+BnB,mBA/BmB,CAgCnB,sBAhCmB,CAiCnB,4BAjCmB,CAkCnB,4BAlCmB,CAmCnB,8BAnCmB,CAoCnB,kCApCmB,CAqCnB,mCArCmB,CAsCnB,yCAtCmB,CAuCnB,iCAvCmB,CAwCnB,0BAxCmB,CAyCnB,2BAzCmB,CA0CnB,4BA1CmB,CA2CnB,kCA3CmB,CA4CnB,8BA5CmB,CA6CnB,oCA7CmB,CA8CnB,8BA9CmB,CA+CnB,qCA/CmB,CAgDnB,2CAhDmB,CAiDnB,gCAjDmB,CAkDnB,sCAlDmB,CAmDnB,0BAnDmB,CAoDnB,gCApDmB,CAqDnB,4BArDmB,CAsDnB,kCAtDmB,CAuDnB,0BAvDmB,CAwDnB,gCAxDmB,CAyDnB,4BAzDmB,CA0DnB,kCA1DmB,CA2DnB,4BA3DmB,CA4DnB,mCA5DmB,CA6DnB,8BA7DmB,C,CAgEfC,cAAc,CAAG,CACrB,kBADqB,CAErB,wBAFqB,CAGrB,oBAHqB,CAIrB,oBAJqB,CAKrB,oBALqB,CAMrB,qBANqB,CAOrB,sBAPqB,CAQrB,sBARqB,CASrB,mBATqB,CAUrB,mBAVqB,CAWrB,mBAXqB,CAYrB,oBAZqB,CAarB,uBAbqB,CAcrB,uBAdqB,CAerB,uBAfqB,CAgBrB,wBAhBqB,C,CAmBjBC,WAAW,CAAG,CAAC,gBAAD,CAAmB,aAAnB,C,CAEdC,WAAW,CAAG,CAClB,iBADkB,CAElB,gBAFkB,CAGlB,eAHkB,CAIlB,eAJkB,CAKlB,eALkB,CAMlB,gBANkB,CAOlB,iBAPkB,CAQlB,iBARkB,CASlB,iBATkB,CAUlB,iBAVkB,CAWlB,iBAXkB,CAYlB,wBAZkB,CAalB,uBAbkB,CAclB,sBAdkB,CAelB,sBAfkB,CAgBlB,sBAhBkB,C,CAmBdC,YAAY,CAAG,CACnB,aADmB,CAEnB,aAFmB,CAGnB,YAHmB,CAInB,WAJmB,CAKnB,WALmB,CAMnB,WANmB,CAOnB,YAPmB,CAQnB,aARmB,CASnB,aATmB,CAUnB,aAVmB,CAWnB,aAXmB,CAYnB,aAZmB,C,CAefC,aAAa,CAAG,CACpB,gBADoB,CAEpB,gBAFoB,CAGpB,gBAHoB,C,CAMtB,MAAO,IAAMC,YAAW,CAAG,CACzBC,KAAK,CAAE,CACLC,OAAO,CAAER,YADJ,CAELS,MAAM,CAAET,YAFH,CAGLU,MAAM,CAAEV,YAHH,CADkB,CAMzBW,OAAO,CAAEV,cANgB,CAOzBW,IAAI,CAAEV,WAPmB,CAQzBW,IAAI,CAAEV,WARmB,CASzBW,KAAK,CAAEV,YATkB,CAUzBW,MAAM,CAAEV,aAViB,CAApB"}

package/__internal__/src/hooks/useThemeVars/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useThemeVars';
+export { defaultVars } from './helpers';

package/__internal__/src/hooks/useThemeVars/index.js

@@ -0,0 +1,2 @@
+export*from"./useThemeVars";export{defaultVars}from"./helpers";
+//# sourceMappingURL=index.js.map

package/__internal__/src/hooks/useThemeVars/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["defaultVars"],"sources":["../../../../../src/hooks/useThemeVars/index.ts"],"sourcesContent":["export * from './useThemeVars';\n\nexport { defaultVars } from './helpers';\n"],"mappings":"AAAA,4BAEA,OAASA,WAAT"}

package/__internal__/src/hooks/useThemeVars/useThemeVars.d.ts

@@ -0,0 +1,58 @@
+import { defaultVars } from './helpers';
+export declare type Vars = {
+    readonly color: {
+        readonly primary: readonly string[];
+        readonly accent: readonly string[];
+        readonly invert: readonly string[];
+    };
+    readonly control: readonly string[];
+    readonly font: readonly string[];
+    readonly size: readonly string[];
+    readonly space: readonly string[];
+    readonly shadow: readonly string[];
+};
+export declare type ThemeVars<T extends Vars = typeof defaultVars> = {
+    color: {
+        primary: {
+            [key in T['color']['primary'][number]]: string;
+        };
+        accent: {
+            [key in T['color']['accent'][number]]: string;
+        };
+        invert: {
+            [key in T['color']['invert'][number]]: string;
+        };
+    };
+    control: {
+        [key in T['control'][number]]: string;
+    };
+    font: {
+        [key in T['font'][number]]: string;
+    };
+    size: {
+        [key in T['size'][number]]: string;
+    };
+    space: {
+        [key in T['space'][number]]: string;
+    };
+    shadow: {
+        [key in T['shadow'][number]]: string;
+    };
+};
+declare type UseThemeVarsOptions<T> = {
+    vars?: T;
+    deps?: [];
+};
+export declare const useThemeVars: <T extends Vars = {
+    readonly color: {
+        readonly primary: readonly ["--color-bg-default", "--color-bg-secondary", "--color-bg-brand", "--color-bg-link", "--color-bg-border", "--color-bg-stripe", "--color-bg-ghost", "--color-bg-tone", "--color-bg-soft", "--color-bg-system", "--color-bg-normal", "--color-bg-success", "--color-bg-caution", "--color-bg-warning", "--color-bg-alert", "--color-bg-critical", "--color-typo-primary", "--color-typo-secondary", "--color-typo-ghost", "--color-typo-brand", "--color-typo-system", "--color-typo-normal", "--color-typo-success", "--color-typo-caution", "--color-typo-warning", "--color-typo-alert", "--color-typo-critical", "--color-typo-link", "--color-typo-link-minor", "--color-typo-link-hover", "--color-scroll-bg", "--color-scroll-thumb", "--color-scroll-thumb-hover", "--color-control-bg-default", "--color-control-typo-default", "--color-control-typo-placeholder", "--color-control-bg-border-default", "--color-control-bg-border-default-hover", "--color-control-bg-border-focus", "--color-control-bg-focus", "--color-control-bg-active", "--color-control-bg-primary", "--color-control-bg-primary-hover", "--color-control-typo-primary", "--color-control-typo-primary-hover", "--color-control-bg-secondary", "--color-control-bg-border-secondary", "--color-control-bg-border-secondary-hover", "--color-control-typo-secondary", "--color-control-typo-secondary-hover", "--color-control-bg-ghost", "--color-control-bg-ghost-hover", "--color-control-typo-ghost", "--color-control-typo-ghost-hover", "--color-control-bg-clear", "--color-control-bg-clear-hover", "--color-control-typo-clear", "--color-control-typo-clear-hover", "--color-control-bg-disable", "--color-control-bg-border-disable", "--color-control-typo-disable"];
+        readonly accent: readonly ["--color-bg-default", "--color-bg-secondary", "--color-bg-brand", "--color-bg-link", "--color-bg-border", "--color-bg-stripe", "--color-bg-ghost", "--color-bg-tone", "--color-bg-soft", "--color-bg-system", "--color-bg-normal", "--color-bg-success", "--color-bg-caution", "--color-bg-warning", "--color-bg-alert", "--color-bg-critical", "--color-typo-primary", "--color-typo-secondary", "--color-typo-ghost", "--color-typo-brand", "--color-typo-system", "--color-typo-normal", "--color-typo-success", "--color-typo-caution", "--color-typo-warning", "--color-typo-alert", "--color-typo-critical", "--color-typo-link", "--color-typo-link-minor", "--color-typo-link-hover", "--color-scroll-bg", "--color-scroll-thumb", "--color-scroll-thumb-hover", "--color-control-bg-default", "--color-control-typo-default", "--color-control-typo-placeholder", "--color-control-bg-border-default", "--color-control-bg-border-default-hover", "--color-control-bg-border-focus", "--color-control-bg-focus", "--color-control-bg-active", "--color-control-bg-primary", "--color-control-bg-primary-hover", "--color-control-typo-primary", "--color-control-typo-primary-hover", "--color-control-bg-secondary", "--color-control-bg-border-secondary", "--color-control-bg-border-secondary-hover", "--color-control-typo-secondary", "--color-control-typo-secondary-hover", "--color-control-bg-ghost", "--color-control-bg-ghost-hover", "--color-control-typo-ghost", "--color-control-typo-ghost-hover", "--color-control-bg-clear", "--color-control-bg-clear-hover", "--color-control-typo-clear", "--color-control-typo-clear-hover", "--color-control-bg-disable", "--color-control-bg-border-disable", "--color-control-typo-disable"];
+        readonly invert: readonly ["--color-bg-default", "--color-bg-secondary", "--color-bg-brand", "--color-bg-link", "--color-bg-border", "--color-bg-stripe", "--color-bg-ghost", "--color-bg-tone", "--color-bg-soft", "--color-bg-system", "--color-bg-normal", "--color-bg-success", "--color-bg-caution", "--color-bg-warning", "--color-bg-alert", "--color-bg-critical", "--color-typo-primary", "--color-typo-secondary", "--color-typo-ghost", "--color-typo-brand", "--color-typo-system", "--color-typo-normal", "--color-typo-success", "--color-typo-caution", "--color-typo-warning", "--color-typo-alert", "--color-typo-critical", "--color-typo-link", "--color-typo-link-minor", "--color-typo-link-hover", "--color-scroll-bg", "--color-scroll-thumb", "--color-scroll-thumb-hover", "--color-control-bg-default", "--color-control-typo-default", "--color-control-typo-placeholder", "--color-control-bg-border-default", "--color-control-bg-border-default-hover", "--color-control-bg-border-focus", "--color-control-bg-focus", "--color-control-bg-active", "--color-control-bg-primary", "--color-control-bg-primary-hover", "--color-control-typo-primary", "--color-control-typo-primary-hover", "--color-control-bg-secondary", "--color-control-bg-border-secondary", "--color-control-bg-border-secondary-hover", "--color-control-typo-secondary", "--color-control-typo-secondary-hover", "--color-control-bg-ghost", "--color-control-bg-ghost-hover", "--color-control-typo-ghost", "--color-control-typo-ghost-hover", "--color-control-bg-clear", "--color-control-bg-clear-hover", "--color-control-typo-clear", "--color-control-typo-clear-hover", "--color-control-bg-disable", "--color-control-bg-border-disable", "--color-control-typo-disable"];
+    };
+    readonly control: readonly ["--control-radius", "--control-border-width", "--control-height-l", "--control-height-m", "--control-height-s", "--control-height-xs", "--control-box-size-m", "--control-box-size-l", "--control-space-l", "--control-space-m", "--control-space-s", "--control-space-xs", "--control-text-size-l", "--control-text-size-m", "--control-text-size-s", "--control-text-size-xs"];
+    readonly font: readonly ["--font-primary", "--font-mono"];
+    readonly size: readonly ["--size-text-2xs", "--size-text-xs", "--size-text-s", "--size-text-m", "--size-text-l", "--size-text-xl", "--size-text-2xl", "--size-text-3xl", "--size-text-4xl", "--size-text-5xl", "--size-text-6xl", "--line-height-text-2xs", "--line-height-text-xs", "--line-height-text-s", "--line-height-text-m", "--line-height-text-l"];
+    readonly space: readonly ["--space-3xs", "--space-2xs", "--space-xs", "--space-s", "--space-m", "--space-l", "--space-xl", "--space-2xl", "--space-3xl", "--space-4xl", "--space-5xl", "--space-6xl"];
+    readonly shadow: readonly ["--shadow-group", "--shadow-layer", "--shadow-modal"];
+}>(options?: UseThemeVarsOptions<T> | undefined) => ThemeVars<T>;
+export {};

package/__internal__/src/hooks/useThemeVars/useThemeVars.js

@@ -0,0 +1,2 @@
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{useMemo}from"react";import{cnTheme,useTheme}from"../../components/Theme/Theme";import{getStyleProps}from"../useStyleProps";import{defaultVars}from"./helpers";var addElements=function(){for(var a=[],b=0;b<arguments.length;b++){var c=0>b||arguments.length<=b?void 0:arguments[b],d=document.createElement("div");d.setAttribute("class",cnTheme(c)),document.body.append(d),a.push(d)}return a},removeElements=function(a){for(var b=0;b<a.length;b++)document.body.removeChild(a[b])};export var useThemeVars=function(a){var b=(null===a||void 0===a?void 0:a.vars)||defaultVars,c=useTheme(),d=c.theme;return useMemo(function(){var a=addElements(_objectSpread(_objectSpread({},d),{},{color:d.color.primary}),{color:d.color.accent},{color:d.color.invert}),c={color:{primary:getStyleProps(a[0],b.color.primary),accent:getStyleProps(a[1],b.color.accent),invert:getStyleProps(a[2],b.color.invert)},control:getStyleProps(a[0],b.control),font:getStyleProps(a[0],b.font),size:getStyleProps(a[0],b.size),space:getStyleProps(a[0],b.space),shadow:getStyleProps(a[0],b.shadow)};return removeElements(a),c},[d.color.primary,d.color.accent,d.color.invert,d.control,d.font,d.size,d.space,d.shadow].concat(_toConsumableArray(null!==a&&void 0!==a&&a.deps?a.deps:[])))};
+//# sourceMappingURL=useThemeVars.js.map

package/__internal__/src/hooks/useThemeVars/useThemeVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeVars.js","names":["useMemo","cnTheme","useTheme","getStyleProps","defaultVars","addElements","elements","index","length","mods","element","document","createElement","setAttribute","body","append","push","removeElements","array","removeChild","useThemeVars","options","variables","vars","theme","color","primary","accent","invert","themeVars","control","font","size","space","shadow","deps"],"sources":["../../../../../src/hooks/useThemeVars/useThemeVars.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\nimport { useMemo } from 'react';\n\nimport { cnTheme, useTheme } from '##/components/Theme/Theme';\nimport { getStyleProps } from '##/hooks/useStyleProps';\n\nimport { defaultVars } from './helpers';\n\nexport type Vars = {\n  readonly color: {\n    readonly primary: readonly string[];\n    readonly accent: readonly string[];\n    readonly invert: readonly string[];\n  };\n  readonly control: readonly string[];\n  readonly font: readonly string[];\n  readonly size: readonly string[];\n  readonly space: readonly string[];\n  readonly shadow: readonly string[];\n};\n\nexport type ThemeVars<T extends Vars = typeof defaultVars> = {\n  color: {\n    primary: { [key in T['color']['primary'][number]]: string };\n    accent: { [key in T['color']['accent'][number]]: string };\n    invert: { [key in T['color']['invert'][number]]: string };\n  };\n  control: { [key in T['control'][number]]: string };\n  font: { [key in T['font'][number]]: string };\n  size: { [key in T['size'][number]]: string };\n  space: { [key in T['space'][number]]: string };\n  shadow: { [key in T['shadow'][number]]: string };\n};\n\ntype UseThemeVarsOptions<T> = {\n  vars?: T;\n  deps?: [];\n};\n\nconst addElements = (...array: {}[]): HTMLDivElement[] => {\n  const elements: HTMLDivElement[] = [];\n  for (let index = 0; index < array.length; index++) {\n    const mods = array[index];\n    const element = document.createElement('div');\n    element.setAttribute('class', cnTheme(mods));\n    document.body.append(element);\n    elements.push(element);\n  }\n  return elements;\n};\n\nconst removeElements = (array: HTMLDivElement[]) => {\n  for (let index = 0; index < array.length; index++) {\n    document.body.removeChild(array[index]);\n  }\n};\n\nexport const useThemeVars = <T extends Vars = typeof defaultVars>(\n  options?: UseThemeVarsOptions<T>,\n) => {\n  const variables = options?.vars || defaultVars;\n\n  const { theme } = useTheme();\n\n  return useMemo(() => {\n    const elements = addElements(\n      {\n        ...theme,\n        color: theme.color.primary,\n      },\n      { color: theme.color.accent },\n      { color: theme.color.invert },\n    );\n\n    const themeVars = {\n      color: {\n        primary: getStyleProps(elements[0], variables.color.primary),\n        accent: getStyleProps(elements[1], variables.color.accent),\n        invert: getStyleProps(elements[2], variables.color.invert),\n      },\n      control: getStyleProps(elements[0], variables.control),\n      font: getStyleProps(elements[0], variables.font),\n      size: getStyleProps(elements[0], variables.size),\n      space: getStyleProps(elements[0], variables.space),\n      shadow: getStyleProps(elements[0], variables.shadow),\n    } as ThemeVars<T>;\n\n    removeElements(elements);\n\n    return themeVars;\n  }, [\n    theme.color.primary,\n    theme.color.accent,\n    theme.color.invert,\n    theme.control,\n    theme.font,\n    theme.size,\n    theme.space,\n    theme.shadow,\n    ...(options?.deps ? options.deps : []),\n  ]);\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.2",
   "keywords": [
     "ui-kit",
     "design-system",

package/useThemeVars/index.d.ts

@@ -0,0 +1 @@
+export * from "../__internal__/src/hooks/useThemeVars";

package/useThemeVars/index.js

@@ -0,0 +1 @@
+export * from "../__internal__/src/hooks/useThemeVars";