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

package/components/dialog/dialog.d.ts

@@ -24,7 +24,7 @@ export default class Dialog extends PureComponent<DialogProps> {
         label: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         contentClassName: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         show: PropTypes.Validator<boolean>;
         showCloseButton: PropTypes.Requireable<boolean>;
         closeButtonInside: PropTypes.Requireable<boolean>;

package/components/dialog-ng/dialog-ng__template.js

@@ -3,6 +3,7 @@ export default `<div
   ng-class="[!dialog.inSidebar && dialog.dialogStyles.container]"
   ng-click="dialog.handleClick($event)"
   ng-attr-data-portaltarget="{{!dialog.inSidebar  ? 'dialog-ng-popup-container' : null}}"
+  ng-attr-data-test="ring-dialog-container"
 >
   <div ng-class="[dialog.dialogStyles.innerContainer]">
     <div data-anchor="dialog-container"

package/components/dropdown/dropdown.d.ts

@@ -6,7 +6,7 @@ export interface AnchorProps {
     active: boolean;
     pinned: boolean;
 }
-export interface DropdownProps extends HTMLAttributes<HTMLElement> {
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     anchor: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode);
     children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode);
     initShown: boolean;
@@ -32,7 +32,7 @@ export default class Dropdown extends Component<DropdownProps, DropdownState> {
          * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
          * React element should render some interactive HTML element like `button` or `a`
          */
-        anchor: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        anchor: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
         children: PropTypes.Validator<PropTypes.ReactElementLike | ((...args: any[]) => any)>;
         initShown: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;

package/components/error-bubble/error-bubble-legacy.css

@@ -20,7 +20,7 @@
 
   border-radius: var(--ring-border-radius);
   background: var(--ring-popup-background-color);
-  box-shadow: 0 2px 16px 0 var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-popup-shadow);
 
   font-family: var(--ring-font-family);
 

package/components/error-bubble/error-bubble.css

@@ -30,7 +30,7 @@
   border-radius: var(--ring-border-radius);
 
   background: var(--ring-popup-background-color);
-  box-shadow: 0 2px 16px 0 var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-popup-shadow);
 
   font-size: 12px;
   line-height: 22px;

package/components/global/angular-component-factory.js

@@ -1,8 +1,8 @@
 import angular from 'angular';
 
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
 
+import {render, unmountComponentAtNode} from './react-render-adapter';
 import RingAngularComponent from './ring-angular-component';
 
 import DomRenderer from './react-dom-renderer';

package/components/global/controls-height.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare enum ControlsHeight {
+    S = "S",
+    M = "M",
+    L = "L"
+}
+export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;

package/components/global/controls-height.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export var ControlsHeight;
+(function (ControlsHeight) {
+    ControlsHeight["S"] = "S";
+    ControlsHeight["M"] = "M";
+    ControlsHeight["L"] = "L";
+})(ControlsHeight || (ControlsHeight = {}));
+export const ControlsHeightContext = createContext(ControlsHeight.M);

package/components/global/promise-with-timeout.d.ts

@@ -1,4 +1,5 @@
 export interface PromiseWithTimeoutConfig {
     error?: Error | null | undefined;
+    onTimeout?: () => void | undefined;
 }
-export default function promiseWithTimeout<T>(promise: Promise<T>, timeout: number, { error }: PromiseWithTimeoutConfig): Promise<unknown>;
+export default function promiseWithTimeout<T>(promise: Promise<T>, timeout: number, { error, onTimeout }: PromiseWithTimeoutConfig): Promise<unknown>;

package/components/global/promise-with-timeout.js

@@ -1,8 +1,11 @@
 // Useful for using fetch with timeout
 // https://github.com/github/fetch/issues/175#issuecomment-284787564
-export default function promiseWithTimeout(promise, timeout, { error }) {
+export default function promiseWithTimeout(promise, timeout, { error, onTimeout = () => { } }) {
     return new Promise((resolve, reject) => {
-        setTimeout(() => reject(error || new Error('Timeout')), timeout);
+        setTimeout(() => {
+            onTimeout();
+            reject(error || new Error('Timeout'));
+        }, timeout);
         promise.then(resolve, reject);
     });
 }

package/components/global/react-render-adapter.d.ts

@@ -0,0 +1,29 @@
+import type { ReactChild, ReactElement, ReactNode } from 'react';
+import { unmountComponentAtNode as legacyUnmountComponentAtNode } from 'react-dom';
+export declare let render: (element: ReactElement, container: Element | DocumentFragment) => void;
+export declare let unmountComponentAtNode: typeof legacyUnmountComponentAtNode;
+export declare let hydrate: (element: ReactElement, container: Element | Document) => void;
+interface Root {
+    render(children: ReactChild | Iterable<ReactNode>): void;
+    unmount(): void;
+}
+interface RootOptions {
+    /**
+     * Prefix for `useId`.
+     */
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+}
+interface HydrationOptions {
+    /**
+     * Prefix for `useId`.
+     */
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+}
+interface Client {
+    createRoot(container: Element | DocumentFragment, options?: RootOptions): Root;
+    hydrateRoot(container: Element | Document, initialChildren: ReactChild | Iterable<ReactNode>, options?: HydrationOptions): Root;
+}
+export declare function setClient({ createRoot, hydrateRoot }: Client): void;
+export {};

package/components/global/react-render-adapter.js

@@ -0,0 +1,36 @@
+// Allows overriding ReactDOM.render when using React 18:
+// import * as client from 'react-dom/client'
+// import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
+//
+// setClient(client)
+import {
+  render as legacyRender,
+  unmountComponentAtNode as legacyUnmountComponentAtNode,
+  hydrate as legacyHydrate
+} from 'react-dom';
+
+/* eslint-disable import/no-mutable-exports */
+export let render = legacyRender;
+export let unmountComponentAtNode = legacyUnmountComponentAtNode;
+export let hydrate = legacyHydrate;
+/* eslint-enable */
+
+export function setClient({createRoot, hydrateRoot}) {
+  const roots = new WeakMap();
+
+  render = (element, container) => {
+    let root = roots.get(container);
+    if (root == null) {
+      root = createRoot(container);
+      roots.set(container, root);
+    }
+    root.render(element);
+  };
+
+  unmountComponentAtNode = container => roots.get(container)?.unmount();
+
+  hydrate = (element, container) => {
+    const root = hydrateRoot(container, element);
+    roots.set(container, root);
+  };
+}

package/components/global/rerender-hoc.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, RefAttributes } from 'react';
 export interface RerenderableComponent<P, S> extends Component<P, S> {
     node?: HTMLElement | null;
 }
@@ -13,18 +13,14 @@ export interface RerenderableComponentClass<P, S> {
  */
 export default function rerenderHOC<P, S>(ComposedComponent: RerenderableComponentClass<P, S>): {
     new (props: P): {
-        _propsCache: Readonly<P> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        rerender(props?: Partial<P>, callback?: (() => void) | undefined): void | Element | Component<P, any, any>;
+        _propsCache: P & RefAttributes<unknown>;
+        rerender(props?: Partial<P>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        context: unknown;
         setState<K extends keyof S>(state: S | ((prevState: Readonly<S>, props: Readonly<P>) => S | Pick<S, K> | null) | Pick<S, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         render(): import("react").ReactNode;
-        readonly props: Readonly<P> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
+        readonly props: Readonly<P>;
         state: Readonly<S>;
         refs: {
             [key: string]: import("react").ReactInstance;

package/components/global/rerender-hoc.js

@@ -1,5 +1,6 @@
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { render } from './react-render-adapter';
+import composeRefs from './composeRefs';
 /**
  * Wraps a component to add a "rerender" method
  * @param ComposedComponent
@@ -20,7 +21,8 @@ export default function rerenderHOC(ComposedComponent) {
                 }
             }
             this._propsCache = Object.assign({}, this.props, this._propsCache, props);
-            return render(createElement(this.constructor, this._propsCache), container, callback);
+            this._propsCache.ref = composeRefs(this._propsCache.ref, callback);
+            render(createElement(this.constructor, this._propsCache), container);
         }
     };
 }

package/components/global/theme.d.ts

@@ -1,26 +1,13 @@
-import React, { RefAttributes, ExoticComponent, PropsWithoutRef, FunctionComponent } from 'react';
+import React, { HTMLAttributes } from 'react';
 declare enum Theme {
+    AUTO = "auto",
     LIGHT = "light",
     DARK = "dark"
 }
-export declare const ThemeContext: React.Context<Theme | null>;
-export interface ThemeOuterProps {
-    theme?: Theme | null | undefined;
+export declare function useTheme(): Theme.LIGHT | Theme.DARK;
+export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: Theme;
+    passToPopups?: boolean;
 }
-export interface ThemeProps {
-    theme: Theme;
-}
-declare type ClassComponentType<T, P> = T extends React.Component<P> ? new (props: P) => T : never;
-declare type ExoticComponentType<T, P> = ExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
-declare type AnyComponentType<T, P> = ClassComponentType<T, P> | FunctionComponent<P> | ExoticComponentType<T, P>;
-export declare const withTheme: (defaultTheme?: Theme) => <T, P extends ThemeProps, S>(ComposedComponent: AnyComponentType<T, P> & S) => React.NamedExoticComponent<React.PropsWithRef<React.PropsWithoutRef<Omit<JSX.LibraryManagedAttributes<ClassComponentType<T, P> & S, P> | JSX.LibraryManagedAttributes<React.FunctionComponent<P> & S, P> | JSX.LibraryManagedAttributes<ExoticComponentType<T, P> & S, P>, "theme"> & ThemeOuterProps> & React.RefAttributes<T>>> & {
-    readonly type: React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<JSX.LibraryManagedAttributes<ClassComponentType<T, P> & S, P> | JSX.LibraryManagedAttributes<React.FunctionComponent<P> & S, P> | JSX.LibraryManagedAttributes<ExoticComponentType<T, P> & S, P>, "theme"> & ThemeOuterProps> & React.RefAttributes<T>>;
-} & { [K in keyof S]: S[K]; };
-export interface ApplyThemeParams {
-    element?: Element | null | undefined;
-    prevTheme?: string | null | undefined;
-    currentTheme?: string | null | undefined;
-}
-declare function applyTheme(params: ApplyThemeParams): void;
-export { applyTheme };
+export declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
 export default Theme;

package/components/global/theme.js

@@ -0,0 +1,40 @@
+import React, { useMemo, useState, useEffect, forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
+import { getPopupContainer } from '../popup/popup';
+import styles from './variables_dark.css';
+import getUID from './get-uid';
+var Theme;
+(function (Theme) {
+    Theme["AUTO"] = "auto";
+    Theme["LIGHT"] = "light";
+    Theme["DARK"] = "dark";
+})(Theme || (Theme = {}));
+const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+export function useTheme() {
+    const [dark, setDark] = useState(darkMatcher.matches);
+    useEffect(() => {
+        const onChange = (e) => setDark(e.matches);
+        darkMatcher.addEventListener('change', onChange);
+        return () => darkMatcher.removeEventListener('change', onChange);
+    }, []);
+    return dark ? Theme.DARK : Theme.LIGHT;
+}
+export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, ...restProps }, ref) {
+    const systemTheme = useTheme();
+    const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+    const id = useMemo(() => getUID('popups-with-theme-'), []);
+    const themeClasses = classNames({ [styles.dark]: resolvedTheme === Theme.DARK });
+    const parentTarget = useContext(PopupTargetContext);
+    return (<div ref={ref} className={classNames(className, themeClasses)} {...restProps}>{passToPopups
+            ? (<PopupTarget id={id}>
+              {target => (<>
+                  {children}
+                  {createPortal(target, parentTarget && getPopupContainer(parentTarget) || document.body)}
+                </>)}
+            </PopupTarget>)
+            : children}
+    </div>);
+});
+export default Theme;

package/components/global/variables.css

@@ -5,44 +5,45 @@
 
   /* Element */
   --ring-line-color: #dfe5eb;
-  --ring-dark-line-color: #475159;
-  --ring-borders-color: #b8d1e5;
-  --ring-dark-borders-color: #406380;
-  --ring-icon-color: var(--ring-borders-color);
+  --ring-borders-color: #c5d1db;
+  --ring-icon-color: #b8d1e5;
   --ring-icon-secondary-color: #999;
-  --ring-border-disabled-color: #dbdbdb;
-  --ring-icon-disabled-color: #bbb;
+  --ring-border-disabled-color: #d4d4d4;
+  --ring-border-unselected-disabled-color: #e8e8e8;
+  --ring-icon-disabled-color: #d4d4d4;
   --ring-border-hover-color: #80c6ff;
-  --ring-dark-border-hover-color: #70b1e6;
   --ring-icon-hover-color: var(--ring-link-hover-color);
-  --ring-main-color: #008eff;
-  --ring-main-hover-color: #007ee5;
+  --ring-main-color: #0080e5;
+  --ring-main-hover-color: #0070cc;
   --ring-icon-error-color: #db5860;
   --ring-icon-warning-color: #eda200;
   --ring-icon-success-color: #59a869;
   --ring-pale-control-color: #cfdbe5;
-  --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-popup-border-components: 0, 28, 54;
+  --ring-popup-border-color: var(--ring-line-color);
+  --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-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);
   --ring-pinned-shadow-color: #737577;
+  --ring-button-danger-hover-color: var(--ring-icon-error-color);
+  --ring-button-primary-border-color: #0062b2;
 
   /* Text */
   --ring-search-color: #669ecc;
   --ring-hint-color: #406380;
   --ring-link-color: #0f5b99;
   --ring-link-hover-color: #ff008c;
-  --ring-error-color: #c22731;
-  --ring-warning-color: #cc8b00;
-  --ring-success-color: #1b8833;
+  --ring-error-color: #a90f1a;
+  --ring-warning-color: #b25c00;
+  --ring-success-color: #0c7523;
   --ring-text-color: #1f2326;
-  --ring-dark-text-color: #fff;
+  --ring-active-text-color: var(--ring-text-color);
+  --ring-white-text-color: #fff;
   --ring-heading-color: var(--ring-text-color);
   --ring-secondary-color: #737577;
-  --ring-dark-secondary-color: #888;
   --ring-disabled-color: #999;
-  --ring-dark-disabled-color: #444;
-  --ring-dark-active-color: #ccc;
 
   /* Background */
   --ring-content-background-color: #fff;
@@ -50,13 +51,16 @@
   --ring-sidebar-background-color: #f7f9fa;
   --ring-selected-background-color: #d4edff;
   --ring-hover-background-color: #ebf6ff;
-  --ring-dark-selected-background-color: #002a4d;
-  --ring-message-background-color: #111314;
-  --ring-navigation-background-color: #000;
+  --ring-navigation-background-color: #fff;
   --ring-tag-background-color: #e6ecf2;
+  --ring-tag-hover-background-color: #d3dae0;
   --ring-removed-background-color: #ffd5cb;
   --ring-warning-background-color: #faeccd;
-  --ring-added-background-color: #bce8bb;
+  --ring-added-background-color: #d8f0d8;
+  --ring-disabled-background-color: #f5f5f5;
+  --ring-button-danger-active-color: #ffe7e8;
+  --ring-button-loader-background: #33a3ff;
+  --ring-button-primary-background-color: #1a98ff;
 
   /* Code */
   --ring-code-background-color: var(--ring-content-background-color);
@@ -75,10 +79,10 @@
   --ring-code-deletion-color: #c8c8c8;
 
   /* Metrics */
-  --ring-border-radius: 3px;
+  --ring-border-radius: 4px;
   --ring-border-radius-small: 2px;
-  --ring-font-size-larger: 14px;
-  --ring-font-size: 13px;
+  --ring-font-size-larger: 15px;
+  --ring-font-size: 14px;
   --ring-font-size-smaller: 12px;
   --ring-line-height-taller: 21px;
   --ring-line-height: 20px;

package/components/global/variables.d.ts

@@ -2,15 +2,13 @@ import type { Property } from 'csstype';
 export interface RingCSSProperties {
     '--ring-unit'?: string;
     '--ring-line-color'?: Property.BorderColor;
-    '--ring-dark-line-color'?: Property.BorderColor;
     '--ring-borders-color'?: Property.BorderColor;
-    '--ring-dark-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-dark-border-hover-color'?: Property.BorderColor;
     '--ring-icon-hover-color'?: Property.Color;
     '--ring-main-color'?: Property.Color;
     '--ring-main-hover-color'?: Property.Color;
@@ -23,6 +21,8 @@ export interface RingCSSProperties {
     '--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;
@@ -31,25 +31,26 @@ export interface RingCSSProperties {
     '--ring-warning-color'?: Property.Color;
     '--ring-success-color'?: Property.Color;
     '--ring-text-color'?: Property.Color;
-    '--ring-dark-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-dark-secondary-color'?: Property.Color;
     '--ring-disabled-color'?: Property.Color;
-    '--ring-dark-disabled-color'?: Property.Color;
-    '--ring-dark-active-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-dark-selected-background-color'?: Property.BackgroundColor;
-    '--ring-message-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-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;

package/components/global/variables_dark.css

@@ -0,0 +1,67 @@
+/* stylelint-disable color-no-hex */
+
+.dark {
+  --ring-line-color: #475159;
+  --ring-borders-color: #406380;
+  --ring-icon-color: #80929d;
+  --ring-icon-secondary-color: #80929d;
+  --ring-border-disabled-color: #475159;
+  --ring-border-unselected-disabled-color: #363636;
+  --ring-icon-disabled-color: #505253;
+  --ring-border-hover-color: #70b1e6;
+  --ring-main-color: #008eff;
+  --ring-main-hover-color: #007ee5;
+  --ring-icon-error-color: #db5860;
+  --ring-icon-warning-color: #eda200;
+  --ring-icon-success-color: #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-color: #000;
+  --ring-button-danger-hover-color: var(--ring-error-color);
+  --ring-button-primary-border-color: #80c6ff;
+
+  /* Text */
+  --ring-hint-color: #80929d;
+  --ring-link-color: #70b1e6;
+  --ring-error-color: #db5860;
+  --ring-warning-color: #eda200;
+  --ring-success-color: #47d464;
+  --ring-text-color: #bbb;
+  --ring-active-text-color: #fff;
+  --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-navigation-background-color: #111314;
+  --ring-tag-background-color: #3e4d59;
+  --ring-tag-hover-background-color: #333e47;
+  --ring-removed-background-color: #8f5247;
+  --ring-warning-background-color: #593d01;
+  --ring-added-background-color: #365947;
+  --ring-disabled-background-color: #303030;
+  --ring-button-danger-active-color: #26080a;
+  --ring-button-primary-background-color: #007ee5;
+
+  /* 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;
+}

package/components/header/header.css

@@ -1,22 +1,18 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
+@value link, active from "../link/link.css";
 @value height: calc(unit * 8);
 @value compensate: 3px;
 @value compensated: calc(height - compensate);
 
-.light {
-  background-color: transparent;
+:root {
+  --ring-header-link-color: var(--ring-link-color);
 }
 
 .dark {
-  color: var(--ring-dark-text-color);
-  background-color: var(--ring-navigation-background-color);
-
-  /* override link */
-  & > a {
-    color: var(--ring-dark-secondary-color);
-  }
+  --ring-header-link-color: var(--ring-text-color);
 }
 
 .header {
@@ -27,6 +23,10 @@
   box-sizing: border-box;
   height: height;
 
+  color: var(--ring-text-color);
+
+  background-color: var(--ring-navigation-background-color);
+
   line-height: compensated;
 
   & > * {
@@ -36,6 +36,15 @@
     height: height;
     padding: 0 calc(unit * 1.5) compensate;
   }
+
+  /* override link */
+  & .link {
+    color: var(--ring-header-link-color);
+  }
+
+  & .active {
+    color: var(--ring-active-text-color);
+  }
 }
 
 .headerSpaced {
@@ -154,7 +163,7 @@
 
     content: "";
 
-    border: 1px solid var(--ring-dark-text-color);
+    border: 1px solid var(--ring-white-text-color);
     border-radius: 50%;
     background-color: var(--ring-link-hover-color);
   }