@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/global/variables.css

@@ -0,0 +1,180 @@
+/* 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: 212, 212, 212;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #d4d4d4 */
+  --ring-border-unselected-disabled-components: 232, 232, 232;
+  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */ /* TODO remove in 6.0 */
+  --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-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,90 @@
+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-border-unselected-disabled-color'?: Property.Color;
+    '--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,128 @@
+/* stylelint-disable color-no-hex */
+
+:global(.ring-ui-theme-dark),
+.dark,
+:root.dark {
+  --ring-line-components: 71, 81, 89;
+  --ring-line-color: rgb(var(--ring-line-components)); /* #475159 */
+  --ring-borders-components: 64, 99, 128;
+  --ring-borders-color: rgb(var(--ring-borders-components)); /* #406380 */
+  --ring-icon-components: 128, 146, 157;
+  --ring-icon-color: rgb(var(--ring-icon-components)); /* #80929d */
+  --ring-icon-secondary-components: 128, 146, 157;
+  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #80929d */
+  --ring-border-disabled-components: 54, 54, 54;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #363636 */
+  --ring-border-selected-disabled-components: 54, 54, 54;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #363636 */
+  --ring-border-unselected-disabled-components: 54, 54, 54;
+  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */ /* TODO remove in 6.0 */
+  --ring-icon-disabled-components: 80, 82, 83;
+  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #505253 */
+  --ring-border-hover-components: 112, 177, 230;
+  --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #70b1e6 */
+  --ring-main-components: 0, 142, 255;
+  --ring-main-color: rgb(var(--ring-main-components)); /* #008eff */
+  --ring-action-link-components: var(--ring-main-components);
+  --ring-action-link-color: rgb(var(--ring-main-components)); /* #008eff */
+  --ring-main-hover-components: 0, 126, 229;
+  --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #007ee5 */
+  --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: 71, 212, 100;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #47d464 */
+  --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-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 */
+
+  /* Text */
+  --ring-hint-components: 128, 146, 157;
+  --ring-hint-color: rgb(var(--ring-hint-components)); /* #80929d */
+  --ring-link-components: 112, 177, 230;
+  --ring-link-color: rgb(var(--ring-link-components)); /* #70b1e6 */
+  --ring-error-components: 219, 88, 96;
+  --ring-error-color: rgb(var(--ring-error-components)); /* #db5860 */
+  --ring-warning-components: 237, 162, 0;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #eda200 */
+  --ring-success-components: 71, 212, 100;
+  --ring-success-color: rgb(var(--ring-success-components)); /* #47d464 */
+  --ring-text-components: 187, 187, 187;
+  --ring-text-color: rgb(var(--ring-text-components)); /* #bbb */
+  --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: 128, 146, 157;
+  --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #80929d */
+  --ring-disabled-components: 81, 95, 104;
+  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #515F68 */
+
+  /* Background */
+  --ring-content-background-components: 35, 39, 43;
+  --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #23272b */
+  --ring-popup-background-components: 17, 19, 20;
+  --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #111314 */
+  --ring-sidebar-background-components: 40, 52, 61;
+  --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #28343d */
+  --ring-selected-background-components: 6, 38, 64;
+  --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #062640 */
+  --ring-hover-background-components: 11, 26, 38;
+  --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #0b1a26 */
+  --ring-navigation-background-components: 17, 19, 20;
+  --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #111314 */
+  --ring-tag-background-components: 62, 77, 89;
+  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #3e4d59 */
+  --ring-tag-hover-background-components: 51, 62, 71;
+  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #333e47 */
+  --ring-removed-background-components: 143, 82, 71;
+  --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #8f5247 */
+  --ring-warning-background-components: 89, 61, 1;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #593d01 */
+  --ring-added-background-components: 54, 89, 71;
+  --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #365947 */
+  --ring-disabled-background-components: 44, 47, 51;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #2C2F33 */
+  --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>);
+    }
+}