dumi 2.0.18 → 2.1.0

package/dist/client/theme-api/context.d.ts

@@ -11,7 +11,7 @@ interface ISiteContext {
         routeId: string;
     }>;
     components: Record<string, AtomComponentAsset>;
-    locales: NonNullable<ILocalesConfig>;
+    locales: ILocalesConfig;
     themeConfig: IThemeConfig;
     loading: boolean;
     setLoading: (status: boolean) => void;

package/dist/client/theme-api/index.d.ts

@@ -10,6 +10,7 @@ export type { IPreviewerProps } from './types';
 export { useAtomAssets } from './useAtomAssets';
 export { useLocale } from './useLocale';
 export { useNavData } from './useNavData';
+export { usePrefersColor } from './usePrefersColor';
 export { useRouteMeta } from './useRouteMeta';
 export { useFullSidebarData, useSidebarData } from './useSidebarData';
 export { useSiteSearch } from './useSiteSearch';

package/dist/client/theme-api/index.js

@@ -9,6 +9,7 @@ export { openStackBlitz } from "./openStackBlitz";
 export { useAtomAssets } from "./useAtomAssets";
 export { useLocale } from "./useLocale";
 export { useNavData } from "./useNavData";
+export { usePrefersColor } from "./usePrefersColor";
 export { useRouteMeta } from "./useRouteMeta";
 export { useFullSidebarData, useSidebarData } from "./useSidebarData";
 export { useSiteSearch } from "./useSiteSearch";

package/dist/client/theme-api/types.d.ts

@@ -162,6 +162,10 @@ export interface IThemeConfig {
     })[]>;
     sidebar?: Record<string, ISidebarGroup[]>;
     footer?: string;
+    prefersColor: {
+        default: 'light' | 'dark' | 'auto';
+        switch: boolean;
+    };
     [key: string]: any;
 }
 export declare type IRoutesById = Record<string, {

package/dist/client/theme-api/usePrefersColor.d.ts

@@ -0,0 +1,7 @@
+export declare type IColorValue = 'light' | 'dark';
+export declare type IPrefersColorValue = IColorValue | 'auto';
+/**
+ * hook for get/set prefers-color-schema, use to control color mode for theme package
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+ */
+export declare const usePrefersColor: () => [IColorValue, IPrefersColorValue, (val: IPrefersColorValue) => void];

package/dist/client/theme-api/usePrefersColor.js

@@ -0,0 +1,199 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { PREFERS_COLOR_ATTR, PREFERS_COLOR_LS_KEY } from "../../constants";
+import { useSiteData } from 'dumi';
+import { useCallback, useEffect, useState } from 'react';
+var colorChanger;
+
+var ColorChanger = /*#__PURE__*/function () {
+  /**
+   * current color
+   * @note  exclude `auto`
+   */
+
+  /**
+   * current prefers color
+   * @note  include `auto`
+   */
+
+  /**
+   * color change callbacks
+   */
+  function ColorChanger(opts) {
+    var _this = this;
+
+    _classCallCheck(this, ColorChanger);
+
+    _defineProperty(this, "color", void 0);
+
+    _defineProperty(this, "prefersColor", void 0);
+
+    _defineProperty(this, "callbacks", []);
+
+    this.prefersColor = navigator.cookieEnabled && // read from localStorage first, because `auto` will not be set to attr
+    localStorage.getItem(PREFERS_COLOR_LS_KEY) || // then use default value from themeConfig
+    opts.default;
+    this.color = document.documentElement.getAttribute(PREFERS_COLOR_ATTR); // listen prefers color change
+
+    ['light', 'dark'].forEach(function (color) {
+      var mediaQueryList = _this.getColorMedia(color);
+
+      var handler = function handler(ev) {
+        // only apply media prefers color in auto mode
+        if (ev.matches && _this.prefersColor === 'auto') {
+          _this.color = color;
+          document.documentElement.setAttribute(PREFERS_COLOR_ATTR, color);
+
+          _this.applyCallbacks();
+        }
+      }; // compatible with Safari 13-
+
+      /* istanbul ignore else */
+
+
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.addEventListener('change', handler);
+      } else if (mediaQueryList.addListener) {
+        mediaQueryList.addListener(handler);
+      }
+    });
+  }
+  /**
+   * get media instance for prefers color
+   * @param color   prefers color
+   */
+
+
+  _createClass(ColorChanger, [{
+    key: "getColorMedia",
+    value: function getColorMedia(color) {
+      return window.matchMedia("(prefers-color-scheme: ".concat(color, ")"));
+    }
+    /**
+     * detect color whether matches current color mode
+     * @param color   expected color
+     */
+
+  }, {
+    key: "isColorMode",
+    value: function isColorMode(color) {
+      return this.getColorMedia(color).matches;
+    }
+    /**
+     * apply all event change callbacks
+     */
+
+  }, {
+    key: "applyCallbacks",
+    value: function applyCallbacks() {
+      var _this2 = this;
+
+      this.callbacks.forEach(function (cb) {
+        return cb({
+          color: _this2.color,
+          prefersColor: _this2.prefersColor
+        });
+      });
+    }
+    /**
+     * listen color change
+     * @param cb  callback
+     */
+
+  }, {
+    key: "listen",
+    value: function listen(cb) {
+      this.callbacks.push(cb);
+    }
+    /**
+     * unlisten color change
+     * @param cb  callback
+     */
+
+  }, {
+    key: "unlisten",
+    value: function unlisten(cb) {
+      this.callbacks.splice(this.callbacks.indexOf(cb), 1);
+    }
+    /**
+     * set prefers color
+     */
+
+  }, {
+    key: "tryPrefersColor",
+    value: function tryPrefersColor(color) {
+      if (navigator.cookieEnabled) {
+        localStorage.setItem(PREFERS_COLOR_LS_KEY, color);
+      }
+
+      this.prefersColor = color;
+      this.color = color === 'auto' ? this.isColorMode('dark') ? 'dark' : 'light' : color;
+      document.documentElement.setAttribute(PREFERS_COLOR_ATTR, color);
+      this.applyCallbacks();
+      return color;
+    }
+  }]);
+
+  return ColorChanger;
+}();
+/**
+ * hook for get/set prefers-color-schema, use to control color mode for theme package
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+ */
+
+
+export var usePrefersColor = function usePrefersColor() {
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      color = _useState2[0],
+      setColor = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prefersColor = _useState4[0],
+      setPrefersColor = _useState4[1];
+
+  var tryPrefersColor = useCallback(function (val) {
+    colorChanger.tryPrefersColor(val);
+  }, []);
+  var colorChangeHandler = useCallback(function (args) {
+    setColor(args.color);
+    setPrefersColor(args.prefersColor);
+  }, []);
+  useEffect(function () {
+    var _colorChanger;
+
+    // lazy initialize, for SSR
+    (_colorChanger = colorChanger) !== null && _colorChanger !== void 0 ? _colorChanger : colorChanger = new ColorChanger({
+      default: themeConfig.prefersColor.default
+    });
+    colorChanger.listen(colorChangeHandler);
+    setColor(colorChanger.color);
+    setPrefersColor(colorChanger.prefersColor);
+    return function () {
+      return colorChanger.unlisten(colorChangeHandler);
+    };
+  }, []);
+  return [color, prefersColor, tryPrefersColor];
+};

package/dist/constants.d.ts

@@ -3,6 +3,8 @@ export declare const LOCAL_THEME_DIR: string;
 export declare const LOCAL_PAGES_DIR: string;
 export declare const THEME_PREFIX = "dumi-theme-";
 export declare const SP_ROUTE_PREFIX = "~";
+export declare const PREFERS_COLOR_ATTR = "data-prefers-color";
+export declare const PREFERS_COLOR_LS_KEY = "dumi:prefers-color";
 export declare const PICKED_PKG_FIELDS: {
     name: string;
     description: string;

package/dist/constants.js

@@ -24,6 +24,8 @@ __export(constants_exports, {
   LOCAL_PAGES_DIR: () => LOCAL_PAGES_DIR,
   LOCAL_THEME_DIR: () => LOCAL_THEME_DIR,
   PICKED_PKG_FIELDS: () => PICKED_PKG_FIELDS,
+  PREFERS_COLOR_ATTR: () => PREFERS_COLOR_ATTR,
+  PREFERS_COLOR_LS_KEY: () => PREFERS_COLOR_LS_KEY,
   SP_ROUTE_PREFIX: () => SP_ROUTE_PREFIX,
   THEME_PREFIX: () => THEME_PREFIX,
   USELESS_TMP_FILES: () => USELESS_TMP_FILES
@@ -34,6 +36,8 @@ var LOCAL_THEME_DIR = `${LOCAL_DUMI_DIR}/theme`;
 var LOCAL_PAGES_DIR = `${LOCAL_DUMI_DIR}/pages`;
 var THEME_PREFIX = "dumi-theme-";
 var SP_ROUTE_PREFIX = "~";
+var PREFERS_COLOR_ATTR = "data-prefers-color";
+var PREFERS_COLOR_LS_KEY = "dumi:prefers-color";
 var PICKED_PKG_FIELDS = {
   name: "",
   description: "",
@@ -62,6 +66,8 @@ var USELESS_TMP_FILES = ["tsconfig.json", "typings.d.ts"];
   LOCAL_PAGES_DIR,
   LOCAL_THEME_DIR,
   PICKED_PKG_FIELDS,
+  PREFERS_COLOR_ATTR,
+  PREFERS_COLOR_LS_KEY,
   SP_ROUTE_PREFIX,
   THEME_PREFIX,
   USELESS_TMP_FILES

package/dist/features/configPlugins/index.js

@@ -31,7 +31,8 @@ var configPlugins_default = (api) => {
       codeBlockMode: "active"
     },
     themeConfig: {
-      footer: `Copyright \xA9 ${new Date().getFullYear()} | Powered by <a href="https://d.umijs.org" target="_blank" rel="noreferrer">dumi</a>`
+      footer: `Copyright \xA9 ${new Date().getFullYear()} | Powered by <a href="https://d.umijs.org" target="_blank" rel="noreferrer">dumi</a>`,
+      prefersColor: { default: "light", switch: true }
     }
   };
   const schemas = (0, import_schema.getSchemas)();

package/dist/features/derivative.js

@@ -47,14 +47,16 @@ function safeExcludeInMFSU(api, excludes) {
 var derivative_default = (api) => {
   api.describe({ key: "dumi:derivative" });
   api.onCheck(() => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     (0, import_assert.default)(!api.config.mpa, "MPA mode is not supported in dumi!");
     (0, import_assert.default)(!api.config.vite, "Vite mode is not supported yet!");
-    (0, import_assert.default)(((_a = api.config.mfsu) == null ? void 0 : _a.strategy) !== "eager", "MFSU eager mode is not supported yet!");
-    (0, import_assert.default)(((_b = api.config.mfsu) == null ? void 0 : _b.esbuild) !== true, "MFSU esbuild bundler is not supported yet!");
+    if (typeof api.config.mfsu === "object") {
+      (0, import_assert.default)(api.config.mfsu.strategy !== "eager", "MFSU eager mode is not supported yet!");
+      (0, import_assert.default)(api.config.mfsu.esbuild !== true, "MFSU esbuild bundler is not supported yet!");
+    }
     (0, import_assert.default)(!api.config.ssr || api.config.ssr.builder === "webpack", "Only `webpack` builder is supported in SSR mode!");
-    (0, import_assert.default)(((_c = api.config.cssLoader) == null ? void 0 : _c.modules) === void 0, "CSS Modules is not supported! Because it is not suitable for UI library development, please use normal CSS, Less, etc. instead.");
-    if (((_d = api.userConfig.history) == null ? void 0 : _d.type) === "hash") {
+    (0, import_assert.default)(((_a = api.config.cssLoader) == null ? void 0 : _a.modules) === void 0, "CSS Modules is not supported! Because it is not suitable for UI library development, please use normal CSS, Less, etc. instead.");
+    if (((_b = api.userConfig.history) == null ? void 0 : _b.type) === "hash") {
       import_plugin_utils.logger.warn("Hash history is temporarily incompatible, it is recommended to use browser history for now.");
     }
     try {

package/dist/features/routes.js

@@ -53,6 +53,10 @@ function flatRoute(route, docLayoutId) {
     route.path = route.path === "*" ? route.path : route.absPath.slice(1);
   }
 }
+function kebabCaseRoute(route) {
+  route.path = route.path.split("/").map((p) => import_plugin_utils.lodash.kebabCase(p)).join("/");
+  route.absPath = route.absPath.split("/").map((p) => import_plugin_utils.lodash.kebabCase(p)).join("/");
+}
 function getClientPageFile(file, cwd) {
   try {
     return import_plugin_utils.resolve.sync(`dumi/dist/${file}`, {
@@ -164,6 +168,7 @@ var routes_default = (api) => {
         throw new Error(`Invalid route path: ${route.path}, please rename it with only alphanumeric, dash and slash.
     at ${route.file}`);
       } else if (!route.isLayout) {
+        kebabCaseRoute(route);
         flatRoute(route, docLayoutId);
         localizeUmiRoute(route, api.config.locales);
       }

package/dist/features/sitemap.js

@@ -46,7 +46,7 @@ var sitemap_default = (api) => {
       hostname: api.config.sitemap.hostname,
       xmlns: { video: false, image: false, news: false, xhtml: false }
     });
-    const exclude = ["/404"].concat(api.config.sitemap.exclude);
+    const exclude = ["/404"].concat(api.config.sitemap.exclude || []);
     const writeStream = import_fs.default.createWriteStream(import_path.default.join(api.paths.absOutputPath, "sitemap.xml"));
     smis.pipe(writeStream);
     Object.values(api.appData.routes).forEach((route) => {

package/dist/features/theme/index.js

@@ -115,6 +115,8 @@ var theme_default = (api) => {
     memo.alias["dumi/theme-default"] = DEFAULT_THEME_PATH;
     memo.extraBabelIncludes ?? (memo.extraBabelIncludes = []);
     memo.extraBabelIncludes.push(import_path.default.resolve(__dirname, "../../client/theme-api"));
+    memo.theme ?? (memo.theme = {});
+    memo.theme["dark-selector"] = `~'[${import_constants.PREFERS_COLOR_ATTR}="dark"]'`;
     return memo;
   });
   api.onGenerateFiles(() => {
@@ -193,6 +195,24 @@ export default function DumiContextWrapper() {
 }`
     });
   });
+  api.addEntryCodeAhead(() => {
+    const { prefersColor } = api.config.themeConfig;
+    if (prefersColor.switch === false && prefersColor.default !== "auto") {
+      return `document.documentElement.setAttribute('${import_constants.PREFERS_COLOR_ATTR}', '${prefersColor.default}');`;
+    }
+    return `(function () {
+  var cache = typeof navigator !== 'undefined' && navigator.cookieEnabled && typeof window.localStorage !== 'undefined' && localStorage.getItem('dumi:prefers-color') || '${prefersColor.default}';
+  var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  var enums = ['light', 'dark', 'auto'];
+
+  document.documentElement.setAttribute(
+    '${import_constants.PREFERS_COLOR_ATTR}',
+    cache === enums[2]
+      ? (isDark ? enums[1] : enums[0])
+      : (enums.indexOf(cache) > -1 ? cache : enums[0])
+  );
+})();`;
+  });
   if (require("@umijs/core/package").__npminstall_done && import_fs.default.existsSync(localThemePath) && import_fs.default.lstatSync(localThemePath).isSymbolicLink()) {
     api.chainWebpack((memo) => {
       const devThemeNodeModules = import_path.default.join(api.cwd, "../node_modules");

package/dist/loaders/markdown/transformer/rehypeDemo.js

@@ -140,7 +140,7 @@ function rehypeDemo(opts) {
             let component = "";
             if (codeType === "external") {
               const chunkName = [vFile.data.frontmatter.atomId, "demos"].filter(Boolean).join("__");
-              parseOpts.fileAbsPath = codeNode.properties.src;
+              parseOpts.fileAbsPath = (0, import_plugin_utils.winPath)(codeNode.properties.src);
               parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, import_path.default.parse(parseOpts.fileAbsPath.replace(/\/index\.(j|t)sx?$/, "")).name, vFile.data.frontmatter.atomId);
               component = `React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
               if (codeValue)

package/dist/types.d.ts

@@ -6,9 +6,14 @@ import type { IThemeLoadResult } from "./features/theme/loader";
 import type { IModify } from '@umijs/core';
 import type { AssetsPackage, ExampleBlockAsset } from 'dumi-assets-types';
 import type { Element } from 'hast';
-import type { IApi as IUmiApi } from 'umi';
-import { defineConfig as defineUmiConfig } from 'umi';
-declare type IUmiConfig = Parameters<typeof defineUmiConfig>[0];
+import type { defineConfig as defineUmiConfig, IApi as IUmiApi } from 'umi';
+declare type Subset<K> = {
+    [attr in keyof K]?: K[attr] extends Array<any> ? K[attr] : K[attr] extends object ? Subset<K[attr]> : K[attr] extends object | null ? Subset<K[attr]> | null : K[attr] extends object | null | undefined ? Subset<K[attr]> | null | undefined : K[attr];
+};
+declare type NoStringIndex<T> = {
+    [K in keyof T as string extends K ? never : K]: T[K];
+};
+declare type IUmiConfig = Omit<NoStringIndex<Parameters<typeof defineUmiConfig>[0]>, 'resolve' | 'extraRemarkPlugins' | 'extraRehypePlugins' | 'themeConfig'>;
 interface IDumiExtendsConfig {
     resolve: {
         docDirs: (string | {
@@ -39,10 +44,13 @@ interface IDumiExtendsConfig {
     extraRehypePlugins?: (string | Function | [string | Function, object])[];
 }
 export declare type IDumiConfig = IUmiConfig & IDumiExtendsConfig;
-export interface IDumiUserConfig extends Partial<Omit<IDumiConfig, 'resolve' | 'locales'>>, IUmiConfig {
-    resolve?: Partial<IDumiConfig['resolve']>;
-    locales?: (IDumiConfig['locales'][0] | Omit<IDumiConfig['locales'][0], 'base'>)[];
-}
+export declare type IDumiUserConfig = Subset<Omit<IDumiConfig, 'locales'>> & {
+    locales?: Exclude<IDumiConfig['locales'][0], {
+        base: string;
+    }>[] | Omit<Exclude<IDumiConfig['locales'][0], {
+        suffix: string;
+    }>, 'base'>[];
+};
 export declare abstract class IDumiTechStack {
     /**
      * tech stack name, such as 'react'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.18",
+  "version": "2.1.0",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

package/theme-default/builtins/Badge/index.less

@@ -14,20 +14,40 @@
   &[type='info'] {
     color: @c-primary;
     background: lighten(@c-primary, 40%);
+
+    @{dark-selector} & {
+      color: @c-primary;
+      background: darken(@c-primary-dark, 20%);
+    }
   }
 
   &[type='warning'] {
     color: @c-warning;
     background: lighten(@c-warning, 48%);
+
+    @{dark-selector} & {
+      color: @c-warning;
+      background: darken(@c-warning-dark, 20%);
+    }
   }
 
   &[type='success'] {
     color: @c-success;
     background: lighten(@c-success, 54%);
+
+    @{dark-selector} & {
+      color: @c-success;
+      background: darken(@c-success-dark, 9%);
+    }
   }
 
   &[type='error'] {
     color: @c-error;
     background: lighten(@c-error, 47%);
+
+    @{dark-selector} & {
+      color: @c-error;
+      background: darken(@c-error-dark, 18%);
+    }
   }
 }

package/theme-default/builtins/Container/index.less

@@ -1,5 +1,18 @@
 @import (reference) '../../styles/variables.less';
 
+.container-colors(@bg-color, @title-color, @text-color) {
+  background: @bg-color;
+
+  > h4,
+  > svg {
+    color: @title-color;
+  }
+
+  > section {
+    color: @text-color;
+  }
+}
+
 .@{prefix}-container.markdown {
   padding: 18px 0;
   padding-inline-start: 44px;
@@ -39,60 +52,48 @@
   &[data-type='info'] {
     @color: darken(desaturate(@c-primary, 45%), 10%);
 
-    background: lighten(@c-primary, 42%);
+    .container-colors(lighten(@c-primary, 42%), @color, desaturate(@color, 20%));
 
-    > h4,
-    > svg {
-      color: @color;
-    }
+    @{dark-selector} & {
+      @color: lighten(desaturate(@c-primary-dark, 45%), 20%);
 
-    > section {
-      color: desaturate(@color, 20%);
+      .container-colors(darken(@c-primary-dark, 26%), @color, desaturate(@color, 20%));
     }
   }
 
   &[data-type='warning'] {
     @color: darken(desaturate(@c-warning, 20%), 2%);
 
-    background: lighten(@c-warning, 51%);
+    .container-colors(lighten(@c-warning, 51%), @color, desaturate(@color, 24%));
 
-    > h4,
-    > svg {
-      color: @color;
-    }
+    @{dark-selector} & {
+      @color: lighten(desaturate(@c-warning, 20%), 3%);
 
-    > section {
-      color: desaturate(@color, 24%);
+      .container-colors(darken(@c-warning-dark, 18%), @color, desaturate(@color, 20%));
     }
   }
 
   &[data-type='success'] {
     @color: darken(desaturate(@c-success, 5%), 1%);
 
-    background: lighten(@c-success, 59%);
+    .container-colors(lighten(@c-success, 59%), @color, desaturate(@color, 22%));
 
-    > h4,
-    > svg {
-      color: @color;
-    }
+    @{dark-selector} & {
+      @color: lighten(desaturate(@c-success, 5%), 5%);
 
-    > section {
-      color: desaturate(@color, 22%);
+      .container-colors(darken(@c-success-dark, 10%), @color, desaturate(@color, 20%));
     }
   }
 
   &[data-type='error'] {
     @color: darken(desaturate(@c-error, 20%), 1%);
 
-    background: lighten(@c-error, 51%);
+    .container-colors(lighten(@c-error, 51%), @color, desaturate(@color, 25%));
 
-    > h4,
-    > svg {
-      color: @color;
-    }
+    @{dark-selector} & {
+      @color: lighten(desaturate(@c-error, 20%), 5%);
 
-    > section {
-      color: desaturate(@color, 25%);
+      .container-colors(darken(@c-error-dark, 22%), @color, desaturate(@color, 20%));
     }
   }
 }