@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/global/url.js

@@ -0,0 +1,136 @@
+/**
+ * @description Provides a set of utilities for URL manipulation.
+ */
+/**
+ * @const {RegExp}
+ */
+const ORIGIN_PATTERN = /^[a-z]+:\/\/[^/]+/i;
+/**
+ * @const {RegExp}
+ */
+const ABSOLUTE_URL_PATTERN = /^[a-z]+:\/\//i;
+/**
+ * @const {RegExp}
+ */
+export const ENDING_SLASH_PATTERN = /\/$/;
+/**
+ * Get URI from the <base> tag
+ * @return {string|undefined} base URI
+ */
+export function getBaseURI() {
+    const baseElement = document.getElementsByTagName('base')[0];
+    return baseElement ? baseElement.href : undefined;
+}
+/**
+ * Get absolute URI from the <base> tag
+ * @return {string} absolute base URI
+ */
+export function getAbsoluteBaseURL() {
+    const baseUrl = getBaseURI();
+    const host = `${window.location.protocol}//${window.location.host}`;
+    let uri;
+    if (baseUrl) {
+        uri = ABSOLUTE_URL_PATTERN.test(baseUrl) ? baseUrl : host + baseUrl;
+    }
+    else {
+        uri = host;
+    }
+    return uri;
+}
+/**
+ * Get origin from the URL
+ * @param {string} url URL to extract origin from
+ * @returns {string|undefined} origin
+ */
+export function getOrigin(url) {
+    const matches = url.match(ORIGIN_PATTERN);
+    if (matches) {
+        return matches[0];
+    }
+    return undefined;
+}
+/**
+ * Get absolute URI from current page
+ * @return {string} absolute URL of current page
+ */
+export function getAbsoluteURL() {
+    return window.location.href.split('#')[0];
+}
+/**
+ * Fixes the URL
+ * If the URL is relative and the page contains a <base> TAG, the URL will be converted to absolute
+ * <base href="/">: some/path => /some/path
+ * @param {string} url URL to fix
+ * @param {Function} baseURIGetter a function that returns base URI
+ * @return {string} fixed URL
+ */
+export function fixUrl(url, baseURIGetter = getBaseURI) {
+    if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1 && url.indexOf('/') !== 0) {
+        const baseUrl = baseURIGetter();
+        if (baseUrl) {
+            return baseUrl + url;
+        }
+    }
+    return url;
+}
+export function joinBaseURLAndPath(baseUrl, path) {
+    if (!baseUrl || path.indexOf('http://') !== -1 || path.indexOf('https://') !== -1) {
+        return path;
+    }
+    return baseUrl + path;
+}
+/**
+ * Parses a queryString into an object.
+ * ```
+ * parseQueryString("access_token=2YotnFZFEjr1zCsicMWpAA&state=xyz&token_type=example&expires_in=3600");
+ * // is {access_token: "2YotnFZFEjr1zCsicMWpAA", state: "xyz", token_type: "example", expires_in: "3600"}
+ * ```
+ * @param {string} queryString query parameter string to parse
+ * @return {AuthResponse} object with query parameters map
+ */
+export function parseQueryString(queryString) {
+    if (queryString == null) {
+        return {};
+    }
+    const queryParameterPairRE = /([^&;=]+)=?([^&;]*)/g;
+    const FIRST_PAIR_ELEMENT = 1;
+    const SECOND_PAIR_ELEMENT = 2;
+    const urlParams = {};
+    function decode(s) {
+        return decodeURIComponent(s.replace(/\+/g, ' '));
+    }
+    let matchedQueryPair;
+    while ((matchedQueryPair = queryParameterPairRE.exec(queryString)) != null) {
+        urlParams[decode(matchedQueryPair[FIRST_PAIR_ELEMENT])] =
+            decode(matchedQueryPair[SECOND_PAIR_ELEMENT]);
+    }
+    return urlParams;
+}
+function customEncodeURIComponent(str) {
+    const commaRE = /%2C/g;
+    return encodeURIComponent(String(str)).replace(commaRE, ',');
+}
+/**
+ * Takes a URL as input and a params object.
+ * Each property in the params is added to the URL as query string parameters
+ * @param {string} url URL to add parameters to
+ * @param {Object} params parameters to add
+ * @returns {string} encoded URL
+ */
+export function encodeURL(url, params) {
+    const equalsSign = '=';
+    const firstSeparator = (url.indexOf('?') === -1) ? '?' : '&';
+    let res = url;
+    let k;
+    let i = 0;
+    for (k in params) {
+        if (params.hasOwnProperty(k) && params[k] != null) {
+            res += (i++ === 0 ? firstSeparator : '&') +
+                customEncodeURIComponent(k) + equalsSign + customEncodeURIComponent(params[k]);
+        }
+    }
+    return res;
+}
+export function isDataURI(uri) {
+    return uri.indexOf('data:') === 0;
+}

package/components/global/use-event-callback.d.ts

@@ -0,0 +1 @@
+export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/components/global/use-event-callback.js

@@ -0,0 +1,14 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+export default function useEventCallback(fn) {
+    const ref = useRef();
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => {
+        const { current } = ref;
+        if (current == null) {
+            throw new Error('callback created in useEventCallback can only be called from event handlers');
+        }
+        return current(...args);
+    }, []);
+}

package/components/global/variables.css

@@ -0,0 +1,179 @@
+/* stylelint-disable color-no-hex */
+
+.light,
+:root {
+  --ring-unit: 8px;
+
+  /* Element */
+  --ring-line-components: 223, 229, 235;
+  --ring-line-color: rgb(var(--ring-line-components)); /* #dfe5eb */
+  --ring-borders-components: 197, 209, 219;
+  --ring-borders-color: rgb(var(--ring-borders-components)); /* #c5d1db */
+  --ring-icon-components: 184, 209, 229;
+  --ring-icon-color: rgb(var(--ring-icon-components)); /* #b8d1e5 */
+  --ring-icon-secondary-components: 153, 153, 153;
+  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #999 */
+  --ring-border-disabled-components: 232, 232, 232;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
+  --ring-border-selected-disabled-components: 199, 199, 199;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #C7C7C7 */
+  --ring-icon-disabled-components: 212, 212, 212;
+  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
+  --ring-border-hover-components: 128, 198, 255;
+  --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #80c6ff */
+  --ring-icon-hover-components: var(--ring-link-hover-color);
+  --ring-icon-hover-color: var(--ring-link-hover-color);
+  --ring-main-components: 0, 128, 229;
+  --ring-main-color: rgb(var(--ring-main-components)); /* #0080e5 */
+  --ring-action-link-components: var(--ring-main-components);
+  --ring-action-link-color: rgb(var(--ring-main-components)); /* #0080e5 */
+  --ring-main-hover-components: 0, 112, 204;
+  --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #0070cc */
+  --ring-icon-error-components: 219, 88, 96;
+  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #db5860 */
+  --ring-icon-warning-components: 237, 162, 0;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #eda200 */
+  --ring-icon-success-components: 89, 168, 105;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #59a869 */
+  --ring-pale-control-components: 207, 219, 229;
+  --ring-pale-control-color: rgb(var(--ring-pale-control-components)); /* #cfdbe5 */
+  --ring-popup-border-components: 0, 28, 54;
+  --ring-popup-border-color: var(--ring-line-color);
+  --ring-popup-shadow-components: rgba(var(--ring-popup-border-components), 0.1);
+  --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.1);
+  --ring-popup-secondary-shadow-color: rgba(var(--ring-popup-border-components), 0.04);
+  --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
+  --ring-pinned-shadow-components: 115, 117, 119;
+  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #737577 */
+  --ring-button-danger-hover-components: var(--ring-icon-error-color);
+  --ring-button-danger-hover-color: var(--ring-icon-error-color);
+  --ring-button-primary-border-components: 0, 98, 178;
+  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #0062b2 */
+  --ring-dialog-overlay-components: 0, 0, 0;
+  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
+  --ring-dialog-shadow: 0 4px 24px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
+
+  /* Text */
+  --ring-search-components: 102, 158, 204;
+  --ring-search-color: rgb(var(--ring-search-components)); /* #669ecc */
+  --ring-hint-components: 64, 99, 128;
+  --ring-hint-color: rgb(var(--ring-hint-components)); /* #406380 */
+  --ring-link-components: 15, 91, 153;
+  --ring-link-color: rgb(var(--ring-link-components)); /* #0f5b99 */
+  --ring-link-hover-components: 255, 0, 140;
+  --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #ff008c */
+  --ring-error-components: 169, 15, 26;
+  --ring-error-color: rgb(var(--ring-error-components)); /* #a90f1a */
+  --ring-warning-components: 178, 92, 0;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #b25c00 */
+  --ring-success-components: 12, 117, 35;
+  --ring-success-color: rgb(var(--ring-success-components)); /* #0c7523 */
+  --ring-text-components: 31, 35, 38;
+  --ring-text-color: rgb(var(--ring-text-components)); /* #1f2326 */
+  --ring-active-text-color: var(--ring-text-color);
+  --ring-white-text-components: 255, 255, 255;
+  --ring-white-text-color: rgb(var(--ring-white-text-components)); /* #fff */
+  --ring-heading-color: var(--ring-text-color);
+  --ring-secondary-components: 115, 117, 119;
+  --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #737577 */
+  --ring-disabled-components: 153, 153, 153;
+  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #999 */
+
+  /* Background */
+  --ring-content-background-components: 255, 255, 255;
+  --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #fff */
+  --ring-popup-background-components: 255, 255, 255;
+  --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #fff */
+  --ring-sidebar-background-components: 247, 249, 250;
+  --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #f7f9fa */
+  --ring-selected-background-components: 212, 237, 255;
+  --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #d4edff */
+  --ring-hover-background-components: 235, 246, 255;
+  --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #ebf6ff */
+  --ring-navigation-background-components: 255, 255, 255;
+  --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #fff */
+  --ring-tag-background-components: 230, 236, 242;
+  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #e6ecf2 */
+  --ring-tag-hover-background-components: 211, 218, 224;
+  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #d3dae0 */
+  --ring-removed-background-components: 255, 213, 203;
+  --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #ffd5cb */
+  --ring-warning-background-components: 250, 236, 205;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #faeccd */
+  --ring-added-background-components: 216, 240, 216;
+  --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #d8f0d8 */
+  --ring-disabled-background-components: 245, 245, 245;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #f5f5f5 */
+  --ring-disabled-selected-background-components: 232, 232, 232;
+  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #e8e8e8 */
+  --ring-button-danger-active-components: 255, 231, 232;
+  --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #ffe7e8 */
+  --ring-button-loader-background-components: 51, 163, 255;
+  --ring-button-loader-background: rgb(var(--ring-button-loader-background-components)); /* #33a3ff */
+  --ring-button-primary-background-components: 26, 152, 255;
+  --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #1a98ff */
+  --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #ffffff80 */
+
+  /* Code */
+  --ring-code-background-color: var(--ring-content-background-color);
+  --ring-code-components: 0, 0, 0;
+  --ring-code-color: rgb(var(--ring-code-components)); /* #000 */
+  --ring-code-comment-components: 112, 112, 112;
+  --ring-code-comment-color: rgb(var(--ring-code-comment-components)); /* #707070 */
+  --ring-code-meta-components: 112, 112, 112;
+  --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #707070 */
+  --ring-code-keyword-components: 0, 0, 128;
+  --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #000080 */
+  --ring-code-tag-background-components: 239, 239, 239;
+  --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #efefef */
+  --ring-code-tag-color: var(--ring-code-keyword-color);
+  --ring-code-tag-font-weight: bold;
+  --ring-code-field-components: 102, 14, 122;
+  --ring-code-field-color: rgb(var(--ring-code-field-components)); /* #660e7a */
+  --ring-code-attribute-components: 0, 0, 255;
+  --ring-code-attribute-color: rgb(var(--ring-code-attribute-components)); /* #00f */
+  --ring-code-number-color: var(--ring-code-attribute-color);
+  --ring-code-string-components: 0, 122, 0;
+  --ring-code-string-color: rgb(var(--ring-code-string-components)); /* #007a00 */
+  --ring-code-addition-components: 170, 222, 170;
+  --ring-code-addition-color: rgb(var(--ring-code-addition-components)); /* #aadeaa */
+  --ring-code-deletion-components: 200, 200, 200;
+  --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #c8c8c8 */
+
+  /* Metrics */
+  --ring-border-radius: 4px;
+  --ring-border-radius-small: 2px;
+  --ring-font-size-larger: 15px;
+  --ring-font-size: 14px;
+  --ring-font-size-smaller: 12px;
+  --ring-line-height-taller: 21px;
+  --ring-line-height: 20px;
+  --ring-line-height-lower: 18px;
+  --ring-line-height-lowest: 16px;
+  --ring-ease: 0.3s ease-out;
+  --ring-fast-ease: 0.15s ease-out;
+  --ring-font-family: system-ui, Arial, sans-serif;
+  --ring-font-family-monospace:
+    Menlo,
+    "Bitstream Vera Sans Mono",
+    "Ubuntu Mono",
+    Consolas,
+    "Courier New",
+    Courier,
+    monospace;
+
+  /* Common z-index-values */
+
+  /* Invisible element is an absolutely positioned element which should be below */
+  /* all other elements on the page */
+  --ring-invisible-element-z-index: -1;
+
+  /* z-index for position: fixed elements */
+  --ring-fixed-z-index: 1;
+
+  /* Elements that should overlay all other elements on the page */
+  --ring-overlay-z-index: 5;
+
+  /* Alerts should de displayed above overlays */
+  --ring-alert-z-index: 6;
+}

package/components/global/variables.d.ts

@@ -0,0 +1,89 @@
+import type { Property } from 'csstype';
+export interface RingCSSProperties {
+    '--ring-unit'?: string;
+    '--ring-line-color'?: Property.BorderColor;
+    '--ring-borders-color'?: Property.BorderColor;
+    '--ring-icon-color'?: Property.Color;
+    '--ring-icon-secondary-color'?: Property.Color;
+    '--ring-border-disabled-color'?: Property.BorderColor;
+    '--ring-icon-disabled-color'?: Property.Color;
+    '--ring-border-hover-color'?: Property.BorderColor;
+    '--ring-icon-hover-color'?: Property.Color;
+    '--ring-main-color'?: Property.Color;
+    '--ring-main-hover-color'?: Property.Color;
+    '--ring-icon-error-color'?: Property.Color;
+    '--ring-icon-warning-color'?: Property.Color;
+    '--ring-icon-success-color'?: Property.Color;
+    '--ring-pale-control-color'?: Property.Color;
+    '--ring-popup-border-components'?: string;
+    '--ring-popup-border-color'?: Property.BorderColor;
+    '--ring-popup-shadow-color'?: Property.Color;
+    '--ring-message-shadow-color'?: Property.Color;
+    '--ring-pinned-shadow-color'?: Property.Color;
+    '--ring-button-danger-hover-color'?: Property.Color;
+    '--ring-button-primary-border-color'?: Property.Color;
+    '--ring-search-color'?: Property.Color;
+    '--ring-hint-color'?: Property.Color;
+    '--ring-link-color'?: Property.Color;
+    '--ring-link-hover-color'?: Property.Color;
+    '--ring-error-color'?: Property.Color;
+    '--ring-warning-color'?: Property.Color;
+    '--ring-success-color'?: Property.Color;
+    '--ring-text-color'?: Property.Color;
+    '--ring-active-text-color'?: Property.Color;
+    '--ring-white-text-color'?: Property.Color;
+    '--ring-heading-color'?: Property.Color;
+    '--ring-secondary-color'?: Property.Color;
+    '--ring-disabled-color'?: Property.Color;
+    '--ring-content-background-color'?: Property.BackgroundColor;
+    '--ring-popup-background-color'?: Property.BackgroundColor;
+    '--ring-sidebar-background-color'?: Property.BackgroundColor;
+    '--ring-selected-background-color'?: Property.BackgroundColor;
+    '--ring-hover-background-color'?: Property.BackgroundColor;
+    '--ring-navigation-background-color'?: Property.BackgroundColor;
+    '--ring-tag-background-color'?: Property.BackgroundColor;
+    '--ring-tag-hover-background-color'?: Property.BackgroundColor;
+    '--ring-removed-background-color'?: Property.BackgroundColor;
+    '--ring-warning-background-color'?: Property.BackgroundColor;
+    '--ring-added-background-color'?: Property.BackgroundColor;
+    '--ring-disabled-background-color'?: Property.BackgroundColor;
+    '--ring-disabled-selected-background-color'?: Property.BackgroundColor;
+    '--ring-button-danger-active-color'?: Property.BackgroundColor;
+    '--ring-button-loader-background'?: Property.BackgroundColor;
+    '--ring-button-primary-background-color'?: Property.BackgroundColor;
+    '--ring-code-background-color'?: Property.BackgroundColor;
+    '--ring-code-color'?: Property.Color;
+    '--ring-code-comment-color'?: Property.Color;
+    '--ring-code-meta-color'?: Property.Color;
+    '--ring-code-keyword-color'?: Property.Color;
+    '--ring-code-tag-background-color'?: Property.BackgroundColor;
+    '--ring-code-tag-color'?: Property.Color;
+    '--ring-code-tag-font-weight'?: Property.FontWeight;
+    '--ring-code-field-color'?: Property.Color;
+    '--ring-code-attribute-color'?: Property.Color;
+    '--ring-code-number-color'?: Property.Color;
+    '--ring-code-string-color'?: Property.Color;
+    '--ring-code-addition-color'?: Property.Color;
+    '--ring-code-deletion-color'?: Property.Color;
+    '--ring-border-radius'?: Property.BorderRadius;
+    '--ring-border-radius-small'?: Property.BorderRadius;
+    '--ring-font-size-larger'?: Property.FontSize;
+    '--ring-font-size'?: Property.FontSize;
+    '--ring-font-size-smaller'?: Property.FontSize;
+    '--ring-line-height-taller'?: Property.LineHeight;
+    '--ring-line-height'?: Property.LineHeight;
+    '--ring-line-height-lower'?: Property.LineHeight;
+    '--ring-line-height-lowest'?: Property.LineHeight;
+    '--ring-ease'?: string;
+    '--ring-fast-ease'?: string;
+    '--ring-font-family'?: Property.FontFamily;
+    '--ring-font-family-monospace'?: Property.FontFamily;
+    '--ring-invisible-element-z-index'?: Property.ZIndex;
+    '--ring-fixed-z-index'?: Property.ZIndex;
+    '--ring-overlay-z-index'?: Property.ZIndex;
+    '--ring-alert-z-index'?: Property.ZIndex;
+}
+declare module 'csstype' {
+    interface Properties extends RingCSSProperties {
+    }
+}

package/components/global/variables.js

@@ -0,0 +1 @@
+export {};

package/components/global/variables_dark.css

@@ -0,0 +1,132 @@
+/* stylelint-disable color-no-hex */
+
+:global(.ring-ui-theme-dark),
+.dark,
+:root.dark {
+  --ring-line-components: 57, 59, 64;
+  --ring-line-color: rgb(var(--ring-line-components)); /* #393B40 */
+  --ring-borders-components: 90, 93, 99;
+  --ring-borders-color: rgb(var(--ring-borders-components)); /* #5A5D63 */
+  --ring-icon-components: 119, 124, 136;
+  --ring-icon-color: rgb(var(--ring-icon-components)); /* #777C88 */
+  --ring-icon-secondary-components: 121, 126, 139;
+  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #797E8B */
+  --ring-border-disabled-components: 73, 73, 73;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #494949 */
+  --ring-border-selected-disabled-components: 97, 97, 97;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #616161 */
+  --ring-icon-disabled-components: 64, 66, 71;
+  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #404247 */
+  --ring-border-hover-components: 77, 100, 148;
+  --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #4D6494 */
+  --ring-main-components: 53, 116, 240;
+  --ring-main-color: rgb(var(--ring-main-components)); /* #3574F0 */
+  --ring-action-link-components: 135, 166, 227;
+  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #87A6E3 */
+  --ring-main-hover-components: 45, 105, 224;
+  --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #2D69E0 */
+  --ring-icon-error-components: 193, 88, 88;
+  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #c15858 */
+  --ring-icon-warning-components: 194, 161, 81;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #C2A151 */
+  --ring-icon-success-components: 94, 156, 98;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #5E9C62 */
+  --ring-popup-border-components: 57, 59, 64;
+  --ring-popup-border-color: rgb(var(--ring-popup-border-components)); /* #393b40 */
+  --ring-popup-shadow-color: rgba(0, 0, 0, 0.31);
+  --ring-popup-secondary-shadow-color: rgba(0, 0, 0, 0.37);
+  --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
+  --ring-pinned-shadow-components: 0, 0, 0;
+  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */
+  --ring-button-danger-hover-color: var(--ring-error-color);
+  --ring-button-primary-border-components: 128, 198, 255;
+  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #80c6ff */
+  --ring-dialog-overlay-components: 0, 0, 0;
+  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
+  --ring-dialog-shadow: 0 4px 16px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
+
+  /* Text */
+  --ring-hint-components: 128, 146, 157;
+  --ring-hint-color: rgb(var(--ring-hint-components)); /* #80929d */
+  --ring-link-components: 133, 166, 227;
+  --ring-link-color: rgb(var(--ring-link-components)); /* #87A6E3 */
+  --ring-link-hover-components: 224, 103, 178;
+  --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #E067B2 */
+  --ring-error-components: 222, 99, 99;
+  --ring-error-color: rgb(var(--ring-error-components)); /* #DE6363 */
+  --ring-warning-components: 218, 179, 88;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #DAB358 */
+  --ring-success-components: 109, 182, 115;
+  --ring-success-color: rgb(var(--ring-success-components)); /* #6DB673 */
+  --ring-text-components: 195, 198, 204;
+  --ring-text-color: rgb(var(--ring-text-components)); /* #C3C6CC */
+  --ring-active-text-components: 255, 255, 255;
+  --ring-active-text-color: rgb(var(--ring-active-text-components)); /* #fff */
+  --ring-heading-color: var(--ring-text-color);
+  --ring-secondary-components: 137, 141, 148;
+  --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #898D94 */
+  --ring-disabled-components: 100, 103, 110;
+  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #64676E */
+
+  /* Background */
+  --ring-content-background-components: 37, 38, 41;
+  --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #252629 */
+  --ring-popup-background-components: 41, 43, 46;
+  --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #292B2E */
+  --ring-sidebar-background-components: 32, 33, 36;
+  --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #202124 */
+  --ring-selected-background-components: 49, 67, 105;
+  --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #314369 */
+  --ring-hover-background-components: 40, 51, 71;
+  --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #283347 */
+  --ring-navigation-background-components: 17, 19, 20;
+  --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #111314 */
+  --ring-tag-background-components: 53, 55, 59;
+  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #35373B */
+  --ring-tag-hover-background-components: 50, 52, 57;
+  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #323439 */
+  --ring-removed-background-components: 95, 53, 53;
+  --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5f3535 */
+  --ring-warning-background-components: 94, 77, 51;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #5e4d33 */
+  --ring-added-background-components: 51, 76, 53;
+  --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #334c35 */
+  --ring-disabled-background-components: 45, 47, 50;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #2D2F32 */
+  --ring-disabled-selected-background-components: 44, 47, 51;
+  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
+  --ring-button-danger-active-components: 38, 8, 10;
+  --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #26080a */
+  --ring-button-primary-background-components: 0, 126, 229;
+  --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #007ee5 */
+  --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #23272b80 */
+
+  /* Code */
+  --ring-code-background-components: 43, 43, 43;
+  --ring-code-background-color: rgb(var(--ring-code-background-components)); /* #2b2b2b */
+  --ring-code-components: 169, 183, 198;
+  --ring-code-color: rgb(var(--ring-code-components)); /* #a9b7c6 */
+  --ring-code-meta-components: 187, 181, 41;
+  --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #bbb529 */
+  --ring-code-keyword-components: 204, 120, 50;
+  --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #cc7832 */
+  --ring-code-tag-background-components: 43, 43, 43;
+  --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #2b2b2b */
+  --ring-code-tag-components: 232, 191, 106;
+  --ring-code-tag-color: rgb(var(--ring-code-tag-components)); /* #e8bf6a */
+  --ring-code-tag-font-weight: normal;
+  --ring-code-field-components: 152, 118, 170;
+  --ring-code-field-color: rgb(var(--ring-code-tag-font-weight)); /* #9876aa */
+  --ring-code-attribute-components: 186, 186, 186;
+  --ring-code-attribute-color: rgb(var(--ring-code-attribute-components)); /* #bababa */
+  --ring-code-number-components: 104, 151, 187;
+  --ring-code-number-color: rgb(var(--ring-code-number-components)); /* #6897bb */
+  --ring-code-string-components: 106, 135, 89;
+  --ring-code-string-color: rgb(var(--ring-code-string-components)); /* #6a8759 */
+  --ring-code-addition-components: 68, 113, 82;
+  --ring-code-addition-color: rgb(var(--ring-code-addition-components)); /* #447152 */
+  --ring-code-deletion-components: 101, 110, 118;
+  --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #656e76 */
+
+  color-scheme: dark;
+}

package/components/grid/col.d.ts

@@ -0,0 +1,31 @@
+import React, { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface ColProps {
+    children?: ReactNode;
+    xs?: boolean | number | null | undefined;
+    sm?: boolean | number | null | undefined;
+    md?: boolean | number | null | undefined;
+    lg?: boolean | number | null | undefined;
+    xsOffset?: number | null | undefined;
+    smOffset?: number | null | undefined;
+    mdOffset?: number | null | undefined;
+    lgOffset?: number | null | undefined;
+    reverse?: boolean | null | undefined;
+    className?: string | null | undefined;
+}
+export default class Col extends Component<ColProps> {
+    static propTypes: {
+        xs: PropTypes.Requireable<NonNullable<number | boolean | null | undefined>>;
+        sm: PropTypes.Requireable<NonNullable<number | boolean | null | undefined>>;
+        md: PropTypes.Requireable<NonNullable<number | boolean | null | undefined>>;
+        lg: PropTypes.Requireable<NonNullable<number | boolean | null | undefined>>;
+        xsOffset: PropTypes.Requireable<number>;
+        smOffset: PropTypes.Requireable<number>;
+        mdOffset: PropTypes.Requireable<number>;
+        lgOffset: PropTypes.Requireable<number>;
+        reverse: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}

package/components/grid/col.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './grid.css';
+const ModifierType = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
+const classMap = {
+    xs: 'col-xs',
+    sm: 'col-sm',
+    md: 'col-md',
+    lg: 'col-lg',
+    xsOffset: 'col-xs-offset',
+    smOffset: 'col-sm-offset',
+    mdOffset: 'col-md-offset',
+    lgOffset: 'col-lg-offset'
+};
+/**
+ * Converts props like "xs=9 xsOffset={2}" to classes "col-xs-9 col-xs-offset-2"
+ * @param {Object} props incoming props
+ * @returns {Array} result classnames
+ */
+function getClassNames(props) {
+    return Object.entries(props).
+        filter(([key]) => classMap[key]).
+        map(([key, value]) => styles[Number.isInteger(value) ? `${classMap[key]}-${value}` : classMap[key]]);
+}
+export default class Col extends Component {
+    static propTypes = {
+        xs: ModifierType,
+        sm: ModifierType,
+        md: ModifierType,
+        lg: ModifierType,
+        xsOffset: PropTypes.number,
+        smOffset: PropTypes.number,
+        mdOffset: PropTypes.number,
+        lgOffset: PropTypes.number,
+        reverse: PropTypes.bool,
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, reverse, ...restProps } = this.props;
+        const classes = classNames(styles.col, className, getClassNames(restProps), {
+            [styles.reverse]: reverse
+        });
+        return (<div className={classes}>
+        {children}
+      </div>);
+    }
+}