@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/components/global/conic-gradient.js

@@ -1,21 +0,0 @@
-import 'conic-gradient';
-import memoize from './memoize';
-import supportsCss from './supports-css';
-const conicGradient = memoize(({ stops, size }) => (supportsCss('background-image: conic-gradient(white, black)')
-    ? `conic-gradient(${stops})`
-    : new ConicGradient({ stops, size })));
-export default (stops) => conicGradient(stops).toString();
-export const conicGradientWithMask = (mask, stops, size) => {
-    const gradient = conicGradient({ stops, size });
-    if (!mask.supports && gradient instanceof ConicGradient) {
-        Object.defineProperty(gradient, 'svg', {
-            value: gradient.svg.replace('<image ', `
-        ${mask.svgDefs}
-        <image mask="url(#${mask.maskId})" `)
-        });
-    }
-    return {
-        ...mask.css,
-        'background-image': gradient.toString()
-    };
-};

package/components/global/radial-gradient-mask.d.ts

@@ -1,9 +0,0 @@
-import type { PropertiesHyphen } from 'csstype';
-export interface RadialGradientMask {
-    supports: boolean;
-    css: PropertiesHyphen;
-    maskId?: string;
-    svgDefs?: string;
-}
-declare const _default: (length: string, stops: Record<string, string>) => RadialGradientMask;
-export default _default;

package/components/global/radial-gradient-mask.js

@@ -1,39 +0,0 @@
-import getUID from './get-uid';
-import supportsCss from './supports-css';
-const radialGradient = (length, stops) => `radial-gradient(${length}, ${Object.entries(stops).map(entry => entry.join(' ')).join(', ')})`;
-export default (length, stops) => {
-    for (const prefix of ['', '-webkit-']) {
-        const property = `${prefix}mask-image`;
-        const declaration = `${property}: radial-gradient(black, white)`;
-        if (supportsCss(declaration)) {
-            return {
-                supports: true,
-                css: {
-                    [property]: radialGradient(length, stops)
-                }
-            };
-        }
-    }
-    const gradientId = getUID('gradient');
-    const maskId = getUID('mask');
-    const svgDefs = `
-    <svg>
-      <defs>
-        <radialGradient id="${gradientId}">
-          ${Object.entries(stops).map(([color, offset]) => `
-            <stop offset="${offset}" stop-color="${color}"/>
-          `).join('')}
-        </radialGradient>
-        <mask id="${maskId}">
-          <rect height="100%" width="100%" fill="url(#${gradientId})"/>
-        </mask>
-      </defs>
-    </svg>
-  `;
-    return {
-        supports: false,
-        css: {},
-        maskId,
-        svgDefs
-    };
-};

package/components/global/supports-css.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (arg: string) => boolean;
-export default _default;

package/components/global/supports-css.js

@@ -1,14 +0,0 @@
-import memoize from './memoize';
-export default memoize((declaration) => {
-    const [property, value] = declaration.split(': ');
-    const camelCaseProperty = property.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
-    const div = document.createElement('div');
-    if (div.style[camelCaseProperty] === undefined) {
-        return false;
-    }
-    if (value) {
-        div.style[camelCaseProperty] = value;
-        return Boolean(div.style[camelCaseProperty]);
-    }
-    return true;
-});

package/components/global/theme.jsx

@@ -1,39 +0,0 @@
-import React, { createContext, forwardRef, memo } from 'react';
-var Theme;
-(function (Theme) {
-    Theme["LIGHT"] = "light";
-    Theme["DARK"] = "dark";
-})(Theme || (Theme = {}));
-export const ThemeContext = createContext(null);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getDisplayName = (Component) => Component.name ?? Component.displayName ?? 'Component';
-export const withTheme = (defaultTheme = Theme.LIGHT) => (ComposedComponent) => {
-    // eslint-disable-next-line react/display-name
-    const WithTheme = memo(forwardRef(({ theme, ...restProps }, ref) => (<ThemeContext.Consumer>
-          {contextTheme => {
-            const usedTheme = theme || contextTheme || defaultTheme;
-            const Component = ComposedComponent;
-            return (<ThemeContext.Provider value={usedTheme}>
-                <Component ref={ref} 
-            // https://github.com/Microsoft/TypeScript/issues/28938#issuecomment-450636046
-            {...restProps} theme={usedTheme}/>
-              </ThemeContext.Provider>);
-        }}
-        </ThemeContext.Consumer>)));
-    const WithThemeAndStatics = Object.assign(WithTheme, ComposedComponent, {
-        displayName: `withTheme(${getDisplayName(ComposedComponent)})`,
-        propTypes: null
-    });
-    return WithThemeAndStatics;
-};
-function applyTheme(params) {
-    if (!params || !params.element || !params.currentTheme) {
-        return;
-    }
-    if (params.prevTheme) {
-        params.element.classList.remove(params.prevTheme);
-    }
-    params.element.classList.add(params.currentTheme);
-}
-export { applyTheme };
-export default Theme;

package/components/global/variables_dark.d.ts

@@ -1,3 +0,0 @@
-import type { RingCSSProperties } from './variables';
-declare const variables: RingCSSProperties;
-export default variables;

package/components/global/variables_dark.js

@@ -1,53 +0,0 @@
-const variables = {
-    '--ring-line-color': '#475159',
-    '--ring-borders-color': '#406380',
-    '--ring-icon-color': '#80929d',
-    '--ring-icon-secondary-color': '#80929d',
-    '--ring-border-disabled-color': '#475159',
-    '--ring-border-hover-color': '#70b1e6',
-    '--ring-icon-error-color': '#c22731',
-    '--ring-icon-warning-color': '#cc8b00',
-    '--ring-icon-success-color': '#1c8c32',
-    '--ring-popup-border-components': '0, 42, 76',
-    '--ring-popup-border-color': 'rgba(var(--ring-popup-border-components), 0.1)',
-    '--ring-popup-shadow-color': 'rgba(var(--ring-popup-border-components), 0.15)',
-    '--ring-message-shadow-color': 'rgba(var(--ring-popup-border-components), 0.3)',
-    '--ring-pinned-shadow-color': '#000',
-    /* Text */
-    '--ring-hint-color': '#80929d',
-    '--ring-link-color': '#70b1e6',
-    '--ring-error-color': '#db5860',
-    '--ring-warning-color': '#eda200',
-    '--ring-success-color': '#59a869',
-    '--ring-text-color': '#bbb',
-    '--ring-heading-color': 'var(--ring-text-color)',
-    '--ring-secondary-color': '#80929d',
-    '--ring-disabled-color': '#80929d',
-    /* Background */
-    '--ring-content-background-color': '#23272b',
-    '--ring-popup-background-color': '#111314',
-    '--ring-sidebar-background-color': '#28343d',
-    '--ring-selected-background-color': '#062640',
-    '--ring-hover-background-color': '#0b1a26',
-    '--ring-message-background-color': 'var(--ring-popup-background-color)',
-    '--ring-navigation-background-color': '#111314',
-    '--ring-tag-background-color': '#3e4d59',
-    '--ring-removed-background-color': '#8f5247',
-    '--ring-warning-background-color': '#593d01',
-    '--ring-added-background-color': '#365947',
-    /* Code */
-    '--ring-code-background-color': '#2b2b2b',
-    '--ring-code-color': '#a9b7c6',
-    '--ring-code-meta-color': '#bbb529',
-    '--ring-code-keyword-color': '#cc7832',
-    '--ring-code-tag-background-color': '#2b2b2b',
-    '--ring-code-tag-color': '#e8BF6a',
-    '--ring-code-tag-font-weight': 'normal',
-    '--ring-code-field-color': '#9876aa',
-    '--ring-code-attribute-color': '#bababa',
-    '--ring-code-number-color': '#6897bb',
-    '--ring-code-string-color': '#6a8759',
-    '--ring-code-addition-color': '#447152',
-    '--ring-code-deletion-color': '#656e76'
-};
-export default variables;

package/components/loader-inline/inject-styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (arg: void) => void;
-export default _default;

package/components/loader-inline/inject-styles.js

@@ -1,17 +0,0 @@
-import { conicGradientWithMask } from '../global/conic-gradient';
-import { injectRuleSet } from '../global/inject-styles';
-import memoize from '../global/memoize';
-import radialGradientMask from '../global/radial-gradient-mask';
-import Theme from '../global/theme';
-import styles from './loader-inline.css';
-const IMAGE_SIZE = 32;
-export default memoize(() => {
-    const mask = radialGradientMask(styles.unit, {
-        /* eslint-disable @typescript-eslint/no-magic-numbers */
-        transparent: `${23 / 32 * 100}%`,
-        white: `${25 / 32 * 100}%`
-        /* eslint-enable */
-    });
-    injectRuleSet(`.${styles.loader}_${[Theme.LIGHT]}::after, .ring-loader-inline::after`, conicGradientWithMask(mask, '#ff00eb,#bd3bff,#008eff, #58ba00,#f48700,#ff00eb', IMAGE_SIZE));
-    injectRuleSet(`.${styles.loader}_${[Theme.DARK]}::after, .ring-loader-inline_dark::after`, conicGradientWithMask(mask, '#ff2eef,#d178ff,#289fff,#88d444,#ffe000,#ff2eef', IMAGE_SIZE));
-});

package/dist/_helpers/inject-styles.js

@@ -1,22 +0,0 @@
-import { conicGradientWithMask } from '../global/conic-gradient.js';
-import { injectRuleSet } from '../global/inject-styles.js';
-import memoize from '../global/memoize.js';
-import radialGradientMask from '../global/radial-gradient-mask.js';
-import Theme from '../global/theme.js';
-
-var modules_e49a3529 = {"unit":"8px","loader":"loader_rui_cf3e","spin":"spin_rui_cf3e","pulse":"pulse_rui_cf3e","children":"children_rui_cf3e"};
-
-const IMAGE_SIZE = 32;
-var injectStyles = memoize(() => {
-  const mask = radialGradientMask(modules_e49a3529.unit, {
-    /* eslint-disable @typescript-eslint/no-magic-numbers */
-    transparent: `${23 / 32 * 100}%`,
-    white: `${25 / 32 * 100}%`
-    /* eslint-enable */
-
-  });
-  injectRuleSet(`.${modules_e49a3529.loader}_${[Theme.LIGHT]}::after, .ring-loader-inline::after`, conicGradientWithMask(mask, '#ff00eb,#bd3bff,#008eff, #58ba00,#f48700,#ff00eb', IMAGE_SIZE));
-  injectRuleSet(`.${modules_e49a3529.loader}_${[Theme.DARK]}::after, .ring-loader-inline_dark::after`, conicGradientWithMask(mask, '#ff2eef,#d178ff,#289fff,#88d444,#ffe000,#ff2eef', IMAGE_SIZE));
-});
-
-export { injectStyles as i, modules_e49a3529 as m };