@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/cjs/lib/theming/ThemeContext.md

@@ -1,265 +1,264 @@
-Для кастомизации компонентов используется ThemeContext, реализуемый через `React.Context<Theme>`
-
-Механизм работы: динамические стили генерируются в зависимости от темы в процессе render'а с помощью <a href="https://www.npmjs.com/package/emotion" target="_blank">emotion</a>, полученные классы добавляются в `className` соответствующих элементов.
-
-Тема задается с помощью `ThemeContext.Provider`:
-
-```jsx static
-import { ThemeContext } from '@skbkontur/react-ui';
-
-<ThemeContext.Provider value={theme}>{/* ... */}</ThemeContext.Provider>;
-```
-
-Использовать тему в компоненте можно через `ThemeContext.Consumer`:
-
-```jsx static
-import { ThemeContext, Button } from '@skbkontur/react-ui';
-
-<ThemeContext.Consumer>
-  {theme => /* ... */ }
-</ThemeContext.Consumer>
-```
-
-`useContext` в функциональных компонентах:
-
-```typescript static
-const theme = useContext(ThemeContext);
-```
-
-или задать `contextType` для класса:
-
-```typescript static
-public static contextType = ThemeContext;
-public context: Theme = this.context;
-```
-
-Список существующих тем:
-
-| Имя                 | Описание          |
-| ------------------- | ----------------- |
-| `DEFAULT_THEME`     | Тема по умолчанию |
-| `FLAT_THEME`        | Плоская тема      |
-| `DEFAULT_THEME_8PX` | 8px тема          |
-| `FLAT_THEME_8PX`    | Плоская 8px тема  |
-
-## Примеры использования
-
-### Подключение плоской темы
-
-```jsx harmony
-import { ThemeContext, FLAT_THEME } from '@skbkontur/react-ui';
-import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
-
-<ThemeContext.Provider value={FLAT_THEME}>
-  <ShowcaseGroup title="Flat Theme" />
-</ThemeContext.Provider>;
-```
-
-### Создание собственной темы
-
-Собственные значения нужно передать в `ThemeFactory.create` и получившуюся тему можно использовать в `ThemeContext.Provider`. `ThemeFactory` расширяет переданный объект, задавая в качестве прототипа объект темы по умолчанию.
-
-```jsx harmony
-import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
-import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
-
-const myTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' });
-
-<ThemeContext.Provider value={myTheme}>
-  <ShowcaseGroup title="My Theme" />
-</ThemeContext.Provider>;
-```
-
-Вторым аргументом `ThemeFactory.create` может принимать объект, который будет использован в качестве базовой темы.
-
-```jsx static
-import { ThemeFactory } from '@skbkontur/react-ui';
-import { FLAT_THEME } from '@skbkontur/react-ui/lib/theming/themes/FlatTheme';
-
-const myFlatTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' }, FLAT_THEME);
-```
-
-### Использование темы в своих компонентах
-
-```jsx harmony
-import { useContext } from 'react';
-import { ThemeContext, Button } from '@skbkontur/react-ui';
-
-function ButtonLinkWrapper(props) {
-  const theme = useContext(ThemeContext);
-
-  return (
-    <Button use="link" {...props}>
-      {props.children}
-      <span style={{ color: theme.textColorDefault }}> ↗</span>
-    </Button>
-  );
-}
-
-<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
-```
-
-### Добавление своих переменных
-
-Если вы хотите дополнить одну из тем новыми переменными для своих компонентов, то вы можете использовать отдельный контекст в расширенным объектом темы.
-
-```jsx harmony
-import { useContext } from 'react';
-import { ThemeFactory, Button } from '@skbkontur/react-ui';
-
-const MyThemeContext = React.createContext(ThemeFactory.create({ myTextColor: 'orange' }));
-
-MyThemeContext.displayName = 'MyThemeContext';
-
-function ButtonLinkWrapper(props) {
-  const theme = useContext(MyThemeContext);
-
-  return (
-    <Button use="link" {...props}>
-      {props.children}
-      <span style={{ color: theme.myTextColor }}> ↗</span>
-    </Button>
-  );
-}
-
-<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
-```
-
-### Кастомизация в legacy-приложениях
-
-В случае, если контролы рендерятся через какую-то общую обертку, достаточно добавить в нее `ThemeContext.Provider` с вашей темой. В противном случае, вам подойдет метод `ThemeFactory.overrideDefaultTheme()`.
-
-```typescript static
-import theme from './theme/theme';
-import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
-
-ThemeFactory.overrideDefaultTheme(theme);
-```
-
-### Варианты кастомизации:
-
-Несколько тем одновременно:
-<br/>
-
-```jsx harmony
-import { ThemeContext, FLAT_THEME as flatTheme } from '@skbkontur/react-ui';
-import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
-
-const CombinedComponents = () => (
-  <>
-    <ShowcaseGroup title="Default" />
-    <ThemeContext.Provider value={flatTheme}>
-      <div>
-        <ShowcaseGroup title="Flat" />
-      </div>
-    </ThemeContext.Provider>
-  </>
-);
-
-<CombinedComponents />;
-```
-
-Вложенные темы:
-<br/>
-
-```jsx harmony
-import { ThemeContext, FLAT_THEME as flatTheme, DEFAULT_THEME as defaultTheme } from '@skbkontur/react-ui';
-import { darkTheme } from '@skbkontur/react-ui/internal/ThemePlayground/darkTheme';
-import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
-
-const wrapperStyles = {
-  border: '1px solid rgb(188, 187, 187)',
-  padding: '0 15px 15px',
-  marginTop: 25,
-};
-
-const NestedThemes = () => (
-  <ThemeContext.Provider value={flatTheme}>
-    <div style={{ ...wrapperStyles, width: 750 }}>
-      <ShowcaseGroup title="Flat Theme" />
-      <ThemeContext.Provider value={defaultTheme}>
-        <div style={wrapperStyles}>
-          <ShowcaseGroup title="Default Theme" />
-          <ThemeContext.Provider value={darkTheme}>
-            <div style={{ ...wrapperStyles, background: '#000', color: '#fff' }}>
-              <ShowcaseGroup title="Dark Theme" />
-            </div>
-          </ThemeContext.Provider>
-        </div>
-      </ThemeContext.Provider>
-    </div>
-  </ThemeContext.Provider>
-);
-
-<NestedThemes />;
-```
-
-## Кастомизация @skbkontur/react-ui-addons
-
-Компоненты `@skbkontur/react-ui-addons` так же поддерживают кастомизацию через `ThemeContext` из `@skbkontur/react-ui`. Достаточно переопределить нужные переменные, которые перечислены на страницах компонентов в [докумендации аддонов](http://ui.gitlab-pages.kontur.host/docs/#/react-ui-addons).
-
-```tsx static
-import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
-import { Logotype, AddonsThemeIn } from '@skbkontur/react-ui-addons';
-
-const myTheme = ThemeFactory.create<AddonsThemeIn>({
-  logoColor: 'black',
-});
-
-<ThemeContext.Provider value={myTheme}>
-  <Logotype />
-</ThemeContext.Provider>;
-```
-
-## Дополнительно
-
-### ColorFunctions.ts / DimensionFunctions.ts
-
-Несколько функций по работе с цветом вынесены из less в js, их можно использовать в своих темах (_ColorFunctions.ts_):
-
-```typescript static
-lighten(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
-darken(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
-contrast(colorString: string, darkString?: string, lightString?: string, threshold: number = 0.43): string
-red(colorString: string): string
-green(colorString: string): string
-blue(colorString: string): string
-alpha(colorString: string): string
-isValid(colorString: string): boolean // проверяет, можно ли распарсить строку в цвет
-```
-
-Документацию по их работе можно найти на сайте [less](http://lesscss.org/functions/#color-operations).
-В качестве colorString можно передать цвет в одном из форматов: `keyword`, `hex`, `rgb(r, g, b)`, `rgba(r, g, b, a)`, `hsl(h, s, l)`, `hsla(h, s, l, a)`.
-В качестве `amount` можно передать строку вида 'N%' или число от 0 до 1.
-Все значения больше или меньше возможных обрезаются. Например, для `rgba(300, -100, 123, 20)` `r=255, g=0, b=123, a=1`.
-Если распарсить `colorString` не получилось - выбрасывается исключение.
-Если это возможно, результат возвращается в том же виде, что и входная строка:
-
-```typescript static
-lighten('hsl(90, 0.8, 0.2)', '20%') === 'hsl(90, 0.8, 0.4)';
-lighten('rgba(50, 50, 50, 0.2)', '20%') === 'rgba(102, 102, 102, 0.2)';
-lighten('#80e619', 0.2) === '#b3f075';
-lighten('crimson', '20%') === '#f16581';
-```
-
-Для работы с размерами предусмотрена одна функция (_DimensionFunctions.ts_):
-
-```typescript static
-shift(value: string, shift: string): string
-
-// пример
-DimensionFunctions.shift('100%', '-20') === '80%'
-DimensionFunctions.shift('2em', '+2') === '4em'
-DimensionFunctions.shift('12', '+1') === '13px'  //если единица измерения не указана - используется px
-DimensionFunctions.shift('10.2', '12.333451') === '22.5335px' //дробная часть округляется до 4 знаков
-```
-
-### Список кастомизируемых компонентов
-
-Посмотреть, какие компоненты можно кастомизировать, а также увидеть, какие переменные используются в каждом из них, можно в [таблице](#/Customization/ThemeShowcase)
-Информация собирается в рантайме с помощью `Proxy`, поэтому в IE таблица не отображается.
-
-### Playground
-
-Внутренний компонент `Playground` (_components/internal/ThemePlayground/Playground.tsx_) можно использовать для построения своей темы.
-Для удобства в редакторе добавлено действие "вывести тему в консоль".
+Для кастомизации компонентов используется ThemeContext, реализуемый через `React.Context<Theme>`
+
+Механизм работы: динамические стили генерируются в зависимости от темы в процессе render'а с помощью <a href="https://www.npmjs.com/package/emotion" target="_blank">emotion</a>, полученные классы добавляются в `className` соответствующих элементов.
+
+Тема задается с помощью `ThemeContext.Provider`:
+
+```jsx static
+import { ThemeContext } from '@skbkontur/react-ui';
+
+<ThemeContext.Provider value={theme}>{/* ... */}</ThemeContext.Provider>;
+```
+
+Использовать тему в компоненте можно через `ThemeContext.Consumer`:
+
+```jsx static
+import { ThemeContext, Button } from '@skbkontur/react-ui';
+
+<ThemeContext.Consumer>
+  {theme => /* ... */ }
+</ThemeContext.Consumer>
+```
+
+`useContext` в функциональных компонентах:
+
+```typescript static
+const theme = useContext(ThemeContext);
+```
+
+или задать `contextType` для класса:
+
+```typescript static
+public static contextType = ThemeContext;
+public context: Theme = this.context;
+```
+
+Список существующих тем:
+
+| Имя                     | Описание         |
+| ----------------------- | ---------------- |
+| `DEFAULT_THEME`         | Дефолтная        |
+| `DEFAULT_THEME_8PX_OLD` | Старая дефолтная |
+| `FLAT_THEME_8PX_OLD`    | Старая плоская   |
+
+## Примеры использования
+
+### Подключение старой плоской темы
+
+```jsx harmony
+import {ThemeContext, FLAT_THEME_8PX_OLD} from '@skbkontur/react-ui';
+import {ShowcaseGroup} from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+<ThemeContext.Provider value={FLAT_THEME_8PX_OLD}>
+  <ShowcaseGroup title="Flat Theme Old"/>
+</ThemeContext.Provider>;
+```
+
+### Создание собственной темы
+
+Собственные значения нужно передать в `ThemeFactory.create` и получившуюся тему можно использовать в `ThemeContext.Provider`. `ThemeFactory` расширяет переданный объект, задавая в качестве прототипа объект темы по умолчанию.
+
+```jsx harmony
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const myTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' });
+
+<ThemeContext.Provider value={myTheme}>
+  <ShowcaseGroup title="My Theme" />
+</ThemeContext.Provider>;
+```
+
+Вторым аргументом `ThemeFactory.create` может принимать объект, который будет использован в качестве базовой темы.
+
+```jsx static
+import { ThemeFactory } from '@skbkontur/react-ui';
+import { FLAT_THEME_8PX_OLD } from '@skbkontur/react-ui/lib/theming/themes/FlatTheme8pxOld';
+
+const myFlatTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' }, FLAT_THEME_8PX_OLD);
+```
+
+### Использование темы в своих компонентах
+
+```jsx harmony
+import { useContext } from 'react';
+import { ThemeContext, Button } from '@skbkontur/react-ui';
+
+function ButtonLinkWrapper(props) {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <Button use="link" {...props}>
+      {props.children}
+      <span style={{ color: theme.textColorDefault }}> ↗</span>
+    </Button>
+  );
+}
+
+<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
+```
+
+### Добавление своих переменных
+
+Если вы хотите дополнить одну из тем новыми переменными для своих компонентов, то вы можете использовать отдельный контекст в расширенным объектом темы.
+
+```jsx harmony
+import { useContext } from 'react';
+import { ThemeFactory, Button } from '@skbkontur/react-ui';
+
+const MyThemeContext = React.createContext(ThemeFactory.create({ myTextColor: 'orange' }));
+
+MyThemeContext.displayName = 'MyThemeContext';
+
+function ButtonLinkWrapper(props) {
+  const theme = useContext(MyThemeContext);
+
+  return (
+    <Button use="link" {...props}>
+      {props.children}
+      <span style={{ color: theme.myTextColor }}> ↗</span>
+    </Button>
+  );
+}
+
+<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
+```
+
+### Кастомизация в legacy-приложениях
+
+В случае, если контролы рендерятся через какую-то общую обертку, достаточно добавить в нее `ThemeContext.Provider` с вашей темой. В противном случае, вам подойдет метод `ThemeFactory.overrideDefaultTheme()`.
+
+```typescript static
+import theme from './theme/theme';
+import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
+
+ThemeFactory.overrideDefaultTheme(theme);
+```
+
+### Варианты кастомизации:
+
+Несколько тем одновременно:
+<br/>
+
+```jsx harmony
+import { ThemeContext, FLAT_THEME_8PX_OLD as flatTheme8pxOld } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const CombinedComponents = () => (
+  <>
+    <ShowcaseGroup title="Default" />
+    <ThemeContext.Provider value={flatTheme8pxOld}>
+      <div>
+        <ShowcaseGroup title="Flat old" />
+      </div>
+    </ThemeContext.Provider>
+  </>
+);
+
+<CombinedComponents />;
+```
+
+Вложенные темы:
+<br/>
+
+```jsx harmony
+import { ThemeContext, FLAT_THEME_8PX_OLD as flatTheme8pxOld, DEFAULT_THEME as defaultTheme } from '@skbkontur/react-ui';
+import { darkTheme } from '@skbkontur/react-ui/internal/ThemePlayground/darkTheme';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const wrapperStyles = {
+  border: '1px solid rgb(188, 187, 187)',
+  padding: '0 15px 15px',
+  marginTop: 25,
+};
+
+const NestedThemes = () => (
+  <ThemeContext.Provider value={flatTheme8pxOld}>
+    <div style={{ ...wrapperStyles, width: 750 }}>
+      <ShowcaseGroup title="Flat Old Theme" />
+      <ThemeContext.Provider value={defaultTheme}>
+        <div style={wrapperStyles}>
+          <ShowcaseGroup title="Default Theme" />
+          <ThemeContext.Provider value={darkTheme}>
+            <div style={{ ...wrapperStyles, background: '#000', color: '#fff' }}>
+              <ShowcaseGroup title="Dark Theme" />
+            </div>
+          </ThemeContext.Provider>
+        </div>
+      </ThemeContext.Provider>
+    </div>
+  </ThemeContext.Provider>
+);
+
+<NestedThemes />;
+```
+
+## Кастомизация @skbkontur/react-ui-addons
+
+Компоненты `@skbkontur/react-ui-addons` так же поддерживают кастомизацию через `ThemeContext` из `@skbkontur/react-ui`. Достаточно переопределить нужные переменные, которые перечислены на страницах компонентов в [докумендации аддонов](https://ui.gitlab-pages.kontur.host/docs/#/react-ui-addons).
+
+```tsx static
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { Logotype, AddonsThemeIn } from '@skbkontur/react-ui-addons';
+
+const myTheme = ThemeFactory.create<AddonsThemeIn>({
+  logoColor: 'black',
+});
+
+<ThemeContext.Provider value={myTheme}>
+  <Logotype />
+</ThemeContext.Provider>;
+```
+
+## Дополнительно
+
+### ColorFunctions.ts / DimensionFunctions.ts
+
+Несколько функций по работе с цветом вынесены из less в js, их можно использовать в своих темах (_ColorFunctions.ts_):
+
+```typescript static
+lighten(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
+darken(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
+contrast(colorString: string, darkString?: string, lightString?: string, threshold: number = 0.43): string
+red(colorString: string): string
+green(colorString: string): string
+blue(colorString: string): string
+alpha(colorString: string): string
+isValid(colorString: string): boolean // проверяет, можно ли распарсить строку в цвет
+```
+
+Документацию по их работе можно найти на сайте [less](http://lesscss.org/functions/#color-operations).
+В качестве colorString можно передать цвет в одном из форматов: `keyword`, `hex`, `rgb(r, g, b)`, `rgba(r, g, b, a)`, `hsl(h, s, l)`, `hsla(h, s, l, a)`.
+В качестве `amount` можно передать строку вида 'N%' или число от 0 до 1.
+Все значения больше или меньше возможных обрезаются. Например, для `rgba(300, -100, 123, 20)` `r=255, g=0, b=123, a=1`.
+Если распарсить `colorString` не получилось - выбрасывается исключение.
+Если это возможно, результат возвращается в том же виде, что и входная строка:
+
+```typescript static
+lighten('hsl(90, 0.8, 0.2)', '20%') === 'hsl(90, 0.8, 0.4)';
+lighten('rgba(50, 50, 50, 0.2)', '20%') === 'rgba(102, 102, 102, 0.2)';
+lighten('#80e619', 0.2) === '#b3f075';
+lighten('crimson', '20%') === '#f16581';
+```
+
+Для работы с размерами предусмотрена одна функция (_DimensionFunctions.ts_):
+
+```typescript static
+shift(value: string, shift: string): string
+
+// пример
+DimensionFunctions.shift('100%', '-20') === '80%'
+DimensionFunctions.shift('2em', '+2') === '4em'
+DimensionFunctions.shift('12', '+1') === '13px'  //если единица измерения не указана - используется px
+DimensionFunctions.shift('10.2', '12.333451') === '22.5335px' //дробная часть округляется до 4 знаков
+```
+
+### Список кастомизируемых компонентов
+
+Посмотреть, какие компоненты можно кастомизировать, а также увидеть, какие переменные используются в каждом из них, можно в [таблице](#/Customization/ThemeShowcase)
+Информация собирается в рантайме с помощью `Proxy`, поэтому в IE таблица не отображается.
+
+### Playground
+
+Внутренний компонент `Playground` (_components/internal/ThemePlayground/Playground.tsx_) можно использовать для построения своей темы.
+Для удобства в редакторе добавлено действие "вывести тему в консоль".

package/cjs/lib/theming/ThemeFactory.d.ts

@@ -1,7 +1,6 @@
 import { Theme, ThemeIn } from './Theme';
 export declare class ThemeFactory {
     static create<T extends {}>(theme: ThemeIn & T, baseTheme?: Theme): Readonly<Theme & T>;
-    static isFullTheme(theme: ThemeIn | Theme): theme is Theme;
     static overrideDefaultTheme(theme: ThemeIn): void;
     static getKeys<T extends Theme>(theme: T): (keyof T)[];
     private static constructTheme;

package/cjs/lib/theming/ThemeFactory.js

@@ -1,15 +1,11 @@
-"use strict";exports.__esModule = true;exports.ThemeFactory = void 0;var _DefaultTheme = require("../../internal/themes/DefaultTheme");
+"use strict";exports.__esModule = true;exports.ThemeFactory = void 0;var _DefaultTheme = require("../../internal/themes/DefaultTheme");var
 
 
-var _ThemeHelpers = require("./ThemeHelpers");var
 
 ThemeFactory = /*#__PURE__*/function () {function ThemeFactory() {}ThemeFactory.
-  create = function create(theme, baseTheme) {if (baseTheme === void 0) {baseTheme = _DefaultTheme.DefaultThemeInternal;}
-    return this.constructTheme(baseTheme, theme);
-  };ThemeFactory.
-
-  isFullTheme = function isFullTheme(theme) {
-    return (0, _ThemeHelpers.isFullTheme)(theme);
+  create = function create(theme, baseTheme) {
+    var base = baseTheme || _DefaultTheme.DefaultThemeInternal;
+    return this.constructTheme(base, theme);
   };ThemeFactory.
 
   overrideDefaultTheme = function overrideDefaultTheme(theme) {

package/cjs/lib/theming/ThemeFactory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ThemeFactory.ts"],"names":["ThemeFactory","create","theme","baseTheme","DefaultThemeInternal","constructTheme","isFullTheme","overrideDefaultTheme","Object","keys","forEach","variableName","descriptor","getOwnPropertyDescriptor","defineProperty","getKeys","key","includes","push","getPrototypeOf","sort","base","newTheme","propName","freeze"],"mappings":"qEAAA;;;AAGA,8C;;AAEaA,Y;AACGC,EAAAA,M,GAAd,gBAAmCC,KAAnC,EAAuDC,SAAvD,EAAqH,KAA9DA,SAA8D,cAA9DA,SAA8D,GAA3CC,kCAA2C;AACnH,WAAO,KAAKC,cAAL,CAAoBF,SAApB,EAA+BD,KAA/B,CAAP;AACD,G;;AAEaI,EAAAA,W,GAAd,qBAA0BJ,KAA1B,EAAkE;AAChE,WAAO,+BAAYA,KAAZ,CAAP;AACD,G;;AAEaK,EAAAA,oB,GAAd,8BAAmCL,KAAnC,EAAmD;AACjDM,IAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,EAAmBQ,OAAnB,CAA2B,UAAAC,YAAY,EAAI;AACzC,UAAMC,UAAU,GAAGJ,MAAM,CAACK,wBAAP,CAAgCX,KAAhC,EAAuCS,YAAvC,CAAnB;AACAH,MAAAA,MAAM,CAACM,cAAP,CAAsBV,kCAAtB,EAA4CO,YAA5C,EAA0DC,UAA1D;AACD,KAHD;AAID,G;;AAEaG,EAAAA,O,GAAd,iBAAuCb,KAAvC,EAAiD;AAC/C,QAAMO,IAAoB,GAAG,EAA7B;AACA,WAAOP,KAAK,IAAI,IAAhB,EAAsB;AACnBM,MAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,CAAD,CAAuCQ,OAAvC,CAA+C,UAAAM,GAAG,EAAI;AACpD,YAAI,CAACP,IAAI,CAACQ,QAAL,CAAcD,GAAd,CAAL,EAAyB;AACvBP,UAAAA,IAAI,CAACS,IAAL,CAAUF,GAAV;AACD;AACF,OAJD;AAKAd,MAAAA,KAAK,GAAGM,MAAM,CAACW,cAAP,CAAsBjB,KAAtB,CAAR;AACD;AACD,WAAOO,IAAI,CAACW,IAAL,EAAP;AACD,G;;AAEcf,EAAAA,c,GAAf,wBAA8BgB,IAA9B,EAA2CnB,KAA3C,EAA2D;AACzD,QAAMoB,QAAQ,GAAGd,MAAM,CAACP,MAAP,CAAcoB,IAAd,CAAjB;AACAb,IAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,EAAmBQ,OAAnB,CAA2B,UAAAa,QAAQ,EAAI;AACrC,UAAMX,UAAU,GAAGJ,MAAM,CAACK,wBAAP,CAAgCX,KAAhC,EAAuCqB,QAAvC,CAAnB;AACAf,MAAAA,MAAM,CAACM,cAAP,CAAsBQ,QAAtB,EAAgCC,QAAhC,EAA0CX,UAA1C;AACD,KAHD;;AAKA,WAAOJ,MAAM,CAACgB,MAAP,CAAcF,QAAd,CAAP;AACD,G","sourcesContent":["import { DefaultThemeInternal } from '../../internal/themes/DefaultTheme';\r\n\r\nimport { Theme, ThemeIn } from './Theme';\r\nimport { isFullTheme } from './ThemeHelpers';\r\n\r\nexport class ThemeFactory {\r\n  public static create<T extends {}>(theme: ThemeIn & T, baseTheme: Theme = DefaultThemeInternal): Readonly<Theme & T> {\r\n    return this.constructTheme(baseTheme, theme);\r\n  }\r\n\r\n  public static isFullTheme(theme: ThemeIn | Theme): theme is Theme {\r\n    return isFullTheme(theme);\r\n  }\r\n\r\n  public static overrideDefaultTheme(theme: ThemeIn) {\r\n    Object.keys(theme).forEach(variableName => {\r\n      const descriptor = Object.getOwnPropertyDescriptor(theme, variableName)!;\r\n      Object.defineProperty(DefaultThemeInternal, variableName, descriptor);\r\n    });\r\n  }\r\n\r\n  public static getKeys<T extends Theme>(theme: T) {\r\n    const keys: Array<keyof T> = [];\r\n    while (theme != null) {\r\n      (Object.keys(theme) as Array<keyof T>).forEach(key => {\r\n        if (!keys.includes(key)) {\r\n          keys.push(key);\r\n        }\r\n      });\r\n      theme = Object.getPrototypeOf(theme);\r\n    }\r\n    return keys.sort();\r\n  }\r\n\r\n  private static constructTheme(base: Theme, theme: ThemeIn) {\r\n    const newTheme = Object.create(base);\r\n    Object.keys(theme).forEach(propName => {\r\n      const descriptor = Object.getOwnPropertyDescriptor(theme, propName)!;\r\n      Object.defineProperty(newTheme, propName, descriptor);\r\n    });\r\n\r\n    return Object.freeze(newTheme);\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["ThemeFactory.ts"],"names":["ThemeFactory","create","theme","baseTheme","base","DefaultThemeInternal","constructTheme","overrideDefaultTheme","Object","keys","forEach","variableName","descriptor","getOwnPropertyDescriptor","defineProperty","getKeys","key","includes","push","getPrototypeOf","sort","newTheme","propName","freeze"],"mappings":"qEAAA,kE;;;;AAIaA,Y;AACGC,EAAAA,M,GAAd,gBAAmCC,KAAnC,EAAuDC,SAAvD,EAA+F;AAC7F,QAAMC,IAAI,GAAGD,SAAS,IAAIE,kCAA1B;AACA,WAAO,KAAKC,cAAL,CAAoBF,IAApB,EAA0BF,KAA1B,CAAP;AACD,G;;AAEaK,EAAAA,oB,GAAd,8BAAmCL,KAAnC,EAAmD;AACjDM,IAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,EAAmBQ,OAAnB,CAA2B,UAACC,YAAD,EAAkB;AAC3C,UAAMC,UAAU,GAAGJ,MAAM,CAACK,wBAAP,CAAgCX,KAAhC,EAAuCS,YAAvC,CAAnB;AACAH,MAAAA,MAAM,CAACM,cAAP,CAAsBT,kCAAtB,EAA4CM,YAA5C,EAA0DC,UAA1D;AACD,KAHD;AAID,G;;AAEaG,EAAAA,O,GAAd,iBAAuCb,KAAvC,EAAiD;AAC/C,QAAMO,IAAoB,GAAG,EAA7B;AACA,WAAOP,KAAK,IAAI,IAAhB,EAAsB;AACnBM,MAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,CAAD,CAAuCQ,OAAvC,CAA+C,UAACM,GAAD,EAAS;AACtD,YAAI,CAACP,IAAI,CAACQ,QAAL,CAAcD,GAAd,CAAL,EAAyB;AACvBP,UAAAA,IAAI,CAACS,IAAL,CAAUF,GAAV;AACD;AACF,OAJD;AAKAd,MAAAA,KAAK,GAAGM,MAAM,CAACW,cAAP,CAAsBjB,KAAtB,CAAR;AACD;AACD,WAAOO,IAAI,CAACW,IAAL,EAAP;AACD,G;;AAEcd,EAAAA,c,GAAf,wBAA8BF,IAA9B,EAA2CF,KAA3C,EAA2D;AACzD,QAAMmB,QAAQ,GAAGb,MAAM,CAACP,MAAP,CAAcG,IAAd,CAAjB;AACAI,IAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,EAAmBQ,OAAnB,CAA2B,UAACY,QAAD,EAAc;AACvC,UAAMV,UAAU,GAAGJ,MAAM,CAACK,wBAAP,CAAgCX,KAAhC,EAAuCoB,QAAvC,CAAnB;AACAd,MAAAA,MAAM,CAACM,cAAP,CAAsBO,QAAtB,EAAgCC,QAAhC,EAA0CV,UAA1C;AACD,KAHD;;AAKA,WAAOJ,MAAM,CAACe,MAAP,CAAcF,QAAd,CAAP;AACD,G","sourcesContent":["import { DefaultThemeInternal } from '../../internal/themes/DefaultTheme';\n\nimport { Theme, ThemeIn } from './Theme';\n\nexport class ThemeFactory {\n  public static create<T extends {}>(theme: ThemeIn & T, baseTheme?: Theme): Readonly<Theme & T> {\n    const base = baseTheme || DefaultThemeInternal;\n    return this.constructTheme(base, theme);\n  }\n\n  public static overrideDefaultTheme(theme: ThemeIn) {\n    Object.keys(theme).forEach((variableName) => {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, variableName)!;\n      Object.defineProperty(DefaultThemeInternal, variableName, descriptor);\n    });\n  }\n\n  public static getKeys<T extends Theme>(theme: T) {\n    const keys: Array<keyof T> = [];\n    while (theme != null) {\n      (Object.keys(theme) as Array<keyof T>).forEach((key) => {\n        if (!keys.includes(key)) {\n          keys.push(key);\n        }\n      });\n      theme = Object.getPrototypeOf(theme);\n    }\n    return keys.sort();\n  }\n\n  private static constructTheme(base: Theme, theme: ThemeIn) {\n    const newTheme = Object.create(base);\n    Object.keys(theme).forEach((propName) => {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, propName)!;\n      Object.defineProperty(newTheme, propName, descriptor);\n    });\n\n    return Object.freeze(newTheme);\n  }\n}\n"]}

package/cjs/lib/theming/ThemeHelpers.d.ts

@@ -1,11 +1 @@
-import { Theme, ThemeIn } from './Theme';
 export declare const exposeGetters: <T extends object>(theme: T) => T;
-export declare const REACT_UI_FULL_THEME_KEY = "__IS_REACT_UI_THEME__";
-export declare const REACT_UI_8PX_THEME_KEY = "__IS_REACT_UI_8PX_THEME__";
-export declare const REACT_UI_FLAT_THEME_KEY = "__IS_REACT_UI_FLAT_THEME__";
-export declare const isFullTheme: (theme: Theme | ThemeIn) => boolean;
-export declare const markAsFullTheme: <T extends object>(theme: T) => T;
-export declare const is8pxTheme: (theme: Theme | ThemeIn) => boolean;
-export declare const markAs8pxTheme: <T extends object>(theme: T) => T;
-export declare const isFlatTheme: (theme: Theme | ThemeIn) => boolean;
-export declare const markAsFlatTheme: <T extends object>(theme: T) => T;