@dnb/eufemia 10.10.0 → 10.12.0

package/cjs/components/section/Section.d.ts

@@ -3,54 +3,80 @@
  *
  */
 import React from 'react';
-import type { DynamicElement, SpacingProps } from '../../shared/types';
+import type { DynamicElement, ResponsiveProp, SpacingProps } from '../../shared/types';
 export type SectionVariants = 'error' | 'info' | 'warning' | 'success';
 export type SectionStyleTypes = 'divider' | 'white' | 'transparent'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'lavender'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'pistachio'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'emerald-green'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'sea-green'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'fire-red'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'fire-red-8'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'sand-yellow'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'black-3'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'mint-green'
-/** @deprecated in v11 use "variant" prop instead */
+/** @deprecated in v11 use "variant" or "backgroundColor" prop instead */
  | 'mint-green-12';
 export type SectionSpacing = boolean | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+export type TextColor = string;
+export type OutlineColor = string | boolean;
+export type BackgroundColor = string;
 export type SectionProps = {
     /**
      * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop
      */
     variant?: SectionVariants | string;
     /**
-     * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.
+     * Define if the background color should break-out to a fullscreen view. Defaults to `true`.
      */
-    style_type?: SectionStyleTypes | string;
+    breakout?: boolean | ResponsiveProp<boolean>;
+    /**
+     * Define if the section should have rounded corners. Defaults to `false`.
+     */
+    roundedCorner?: boolean | ResponsiveProp<boolean>;
+    /**
+     * Define a custom border color. Use a Eufemia color.
+     */
+    outline?: OutlineColor | ResponsiveProp<OutlineColor>;
+    /**
+     * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.
+     */
+    textColor?: TextColor | ResponsiveProp<TextColor>;
     /**
-     * Will add spacing around the given content. If `true`, then `large` is used. See the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). Defaults to `false`.
+     * Define a custom background color, instead of a variant. Use a Eufemia color.
      */
-    spacing?: SectionSpacing;
+    backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>;
     /**
      * Define what HTML element should be used. Defaults to `<section>`.
      */
     element?: DynamicElement;
+    /**
+     * Define a React.Ref.
+     */
+    innerRef?: React.RefObject<HTMLElement>;
+    /**
+     * @deprecated in v11 use "innerSpace" prop instead */
+    spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>;
+    /**
+     * @deprecated in v11 use "background" prop instead */
+    style_type?: SectionStyleTypes | string;
+    /**
+     * @deprecated in v11 use "innerRef" prop instead */
     inner_ref?: React.RefObject<HTMLElement>;
-    className?: string;
-    children?: React.ReactNode;
 };
 export type SectionAllProps = SectionProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 declare function Section(localProps: SectionAllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Section {
+    var _name: string;
     var _supportsSpacingProps: boolean;
 }
 export default Section;

package/cjs/components/section/Section.js

@@ -8,9 +8,10 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _componentHelper = require("../../shared/component-helper");
-var _SpacingHelper = require("../space/SpacingHelper");
-const _excluded = ["element", "variant", "style_type", "spacing", "inner_ref", "className", "children"];
+var _Space = _interopRequireDefault(require("../space/Space"));
+const _excluded = ["element", "variant", "breakout", "roundedCorner", "textColor", "backgroundColor", "outline", "innerRef", "className", "children", "spacing", "style_type", "inner_ref"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -27,22 +28,56 @@ function Section(localProps) {
   const {
       element,
       variant,
-      style_type,
-      spacing,
-      inner_ref,
+      breakout = true,
+      roundedCorner,
+      textColor,
+      backgroundColor,
+      outline,
+      innerRef,
       className,
-      children
+      children,
+      spacing,
+      style_type,
+      inner_ref
     } = props,
     attributes = _objectWithoutProperties(props, _excluded);
   const params = _objectSpread({
-    className: (0, _classnames.default)(`dnb-section dnb-section--${variant ? variant : style_type || 'default'}`, (0, _SpacingHelper.createSpacingClasses)(props), className, spacing && `dnb-section--spacing-${(0, _componentHelper.isTrue)(spacing) ? 'large' : spacing}`)
+    className: (0, _classnames.default)(`dnb-section dnb-section--${variant ? variant : style_type || 'default'}`, className, spacing && `dnb-section--spacing-${(0, _componentHelper.isTrue)(spacing) ? 'large' : spacing}`)
   }, attributes);
   const internalRef = _react.default.useRef();
-  const elementRef = inner_ref || internalRef;
-  params['ref'] = elementRef;
-  (0, _componentHelper.validateDOMAttributes)(props, params);
-  const Element = element || 'section';
-  return _react.default.createElement(Element, params, children);
+  const elementRef = innerRef || inner_ref || internalRef;
+  params.innerRef = elementRef;
+  const styleObj = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, computeStyle(breakout, 'breakout', value => `var(--breakout--${value ? 'on' : 'off'})`)), computeStyle(roundedCorner, 'rounded-corner', value => value && 'var(--rounded-corner--value)')), computeStyle(textColor, 'text-color', value => getColor(value))), computeStyle(backgroundColor, 'background-color', value => getColor(value))), computeStyle(outline, 'outline-color', value => String(value) === 'true' ? 'var(--outline-color--value)' : getColor(value))), params === null || params === void 0 ? void 0 : params.style);
+  return _react.default.createElement(_Space.default, _extends({}, params, {
+    element: element,
+    style: styleObj
+  }), children);
+}
+function getColor(value) {
+  return value ? !/#|var/.test(value) ? `var(--color-${value})` : value : undefined;
+}
+function computeStyle(property, name, valueCallback) {
+  let media = property;
+  if (media !== null && typeof media !== 'object') {
+    media = {
+      small: property,
+      medium: property,
+      large: property
+    };
+  }
+  const result = {};
+  for (const size in media) {
+    var _media;
+    if (typeof ((_media = media) === null || _media === void 0 ? void 0 : _media[size]) !== 'undefined') {
+      var _media2;
+      const value = valueCallback((_media2 = media) === null || _media2 === void 0 ? void 0 : _media2[size]);
+      if (typeof value === 'string') {
+        result[`--${name}--${size}`] = value;
+      }
+    }
+  }
+  return result;
 }
+Section._name = 'Section';
 Section._supportsSpacingProps = true;
 //# sourceMappingURL=Section.js.map

package/cjs/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_excluded","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","prototype","propertyIsEnumerable","sourceKeys","defaultProps","element","Section","localProps","context","React","useContext","Context","props","extendPropsWithContext","variant","style_type","spacing","inner_ref","className","children","attributes","params","classnames","createSpacingClasses","isTrue","internalRef","useRef","elementRef","validateDOMAttributes","Element","createElement","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.\n   */\n  style_type?: SectionStyleTypes | string\n\n  /**\n   * Will add spacing around the given content. If `true`, then `large` is used. See the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). Defaults to `false`.\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  inner_ref?: React.RefObject<HTMLElement>\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    style_type,\n    spacing,\n    inner_ref,\n\n    className,\n    children,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      createSpacingClasses(props),\n      className\n    ),\n    ...(attributes as Record<string, unknown>),\n  }\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = inner_ref || internalRef\n  params['ref'] = elementRef\n\n  validateDOMAttributes(props, params)\n\n  const Element = element || 'section'\n\n  return <Element {...params}>{children}</Element>\n}\n\nSection._supportsSpacingProps = true\n"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAKA,IAAAI,cAAA,GAAAJ,OAAA;AAA6D,MAAAK,SAAA;AAAA,SAAAN,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,QAAAC,MAAA,EAAAC,cAAA,QAAAC,IAAA,GAAAC,MAAA,CAAAD,IAAA,CAAAF,MAAA,OAAAG,MAAA,CAAAC,qBAAA,QAAAC,OAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAJ,MAAA,GAAAC,cAAA,KAAAI,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAAJ,MAAA,CAAAK,wBAAA,CAAAR,MAAA,EAAAO,GAAA,EAAAE,UAAA,OAAAP,IAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,IAAA,EAAAG,OAAA,YAAAH,IAAA;AAAA,SAAAU,cAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAf,OAAA,CAAAI,MAAA,CAAAc,MAAA,OAAAC,OAAA,WAAAC,GAAA,IAAAC,eAAA,CAAAP,MAAA,EAAAM,GAAA,EAAAF,MAAA,CAAAE,GAAA,SAAAhB,MAAA,CAAAkB,yBAAA,GAAAlB,MAAA,CAAAmB,gBAAA,CAAAT,MAAA,EAAAV,MAAA,CAAAkB,yBAAA,CAAAJ,MAAA,KAAAlB,OAAA,CAAAI,MAAA,CAAAc,MAAA,GAAAC,OAAA,WAAAC,GAAA,IAAAhB,MAAA,CAAAoB,cAAA,CAAAV,MAAA,EAAAM,GAAA,EAAAhB,MAAA,CAAAK,wBAAA,CAAAS,MAAA,EAAAE,GAAA,iBAAAN,MAAA;AAAA,SAAAO,gBAAAxB,GAAA,EAAAuB,GAAA,EAAAK,KAAA,IAAAL,GAAA,GAAAM,cAAA,CAAAN,GAAA,OAAAA,GAAA,IAAAvB,GAAA,IAAAO,MAAA,CAAAoB,cAAA,CAAA3B,GAAA,EAAAuB,GAAA,IAAAK,KAAA,EAAAA,KAAA,EAAAf,UAAA,QAAAiB,YAAA,QAAAC,QAAA,oBAAA/B,GAAA,CAAAuB,GAAA,IAAAK,KAAA,WAAA5B,GAAA;AAAA,SAAA6B,eAAAG,GAAA,QAAAT,GAAA,GAAAU,YAAA,CAAAD,GAAA,2BAAAT,GAAA,gBAAAA,GAAA,GAAAW,MAAA,CAAAX,GAAA;AAAA,SAAAU,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAK,IAAA,CAAAP,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAE,SAAA,4DAAAP,IAAA,gBAAAF,MAAA,GAAAU,MAAA,EAAAT,KAAA;AAAA,SAAAU,yBAAAxB,MAAA,EAAAyB,QAAA,QAAAzB,MAAA,yBAAAJ,MAAA,GAAA8B,6BAAA,CAAA1B,MAAA,EAAAyB,QAAA,OAAAvB,GAAA,EAAAL,CAAA,MAAAX,MAAA,CAAAC,qBAAA,QAAAwC,gBAAA,GAAAzC,MAAA,CAAAC,qBAAA,CAAAa,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAA8B,gBAAA,CAAA5B,MAAA,EAAAF,CAAA,MAAAK,GAAA,GAAAyB,gBAAA,CAAA9B,CAAA,OAAA4B,QAAA,CAAAG,OAAA,CAAA1B,GAAA,uBAAAhB,MAAA,CAAA2C,SAAA,CAAAC,oBAAA,CAAAT,IAAA,CAAArB,MAAA,EAAAE,GAAA,aAAAN,MAAA,CAAAM,GAAA,IAAAF,MAAA,CAAAE,GAAA,cAAAN,MAAA;AAAA,SAAA8B,8BAAA1B,MAAA,EAAAyB,QAAA,QAAAzB,MAAA,yBAAAJ,MAAA,WAAAmC,UAAA,GAAA7C,MAAA,CAAAD,IAAA,CAAAe,MAAA,OAAAE,GAAA,EAAAL,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAkC,UAAA,CAAAhC,MAAA,EAAAF,CAAA,MAAAK,GAAA,GAAA6B,UAAA,CAAAlC,CAAA,OAAA4B,QAAA,CAAAG,OAAA,CAAA1B,GAAA,kBAAAN,MAAA,CAAAM,GAAA,IAAAF,MAAA,CAAAE,GAAA,YAAAN,MAAA;AAsE7D,MAAMoC,YAAY,GAAG;EACnBC,OAAO,EAAE;AACX,CAAC;AAEc,SAASC,OAAOA,CAACC,UAA2B,EAAE;EAC3D,MAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,gBAAO,CAAC;EAGzC,MAAMC,KAAK,GAAG,IAAAC,uCAAsB,EAClCN,UAAU,EACVH,YAAY,EACZI,OAAO,CAACF,OACV,CAAC;EAED,MAAM;MACJD,OAAO;MACPS,OAAO;MACPC,UAAU;MACVC,OAAO;MACPC,SAAS;MAETC,SAAS;MACTC;IAGF,CAAC,GAAGP,KAAK;IADJQ,UAAU,GAAAxB,wBAAA,CACXgB,KAAK,EAAA9D,SAAA;EAET,MAAMuE,MAAM,GAAAtD,aAAA;IACVmD,SAAS,EAAE,IAAAI,mBAAU,8BAEHR,OAAO,GAAGA,OAAO,GAAGC,UAAU,IAAI,SAAU,IAG5D,IAAAQ,mCAAoB,EAACX,KAAK,CAAC,EAC3BM,SAAS,EAHTF,OAAO,IACJ,wBAAuB,IAAAQ,uBAAM,EAACR,OAAO,CAAC,GAAG,OAAO,GAAGA,OAAQ,EAGhE;EAAC,GACGI,UAAU,CACf;EAED,MAAMK,WAAW,GAAGhB,cAAK,CAACiB,MAAM,CAAc,CAAC;EAC/C,MAAMC,UAAU,GAAGV,SAAS,IAAIQ,WAAW;EAC3CJ,MAAM,CAAC,KAAK,CAAC,GAAGM,UAAU;EAE1B,IAAAC,sCAAqB,EAAChB,KAAK,EAAES,MAAM,CAAC;EAEpC,MAAMQ,OAAO,GAAGxB,OAAO,IAAI,SAAS;EAEpC,OAAO9D,MAAA,CAAAU,OAAA,CAAA6E,aAAA,CAACD,OAAO,EAAKR,MAAM,EAAGF,QAAkB,CAAC;AAClD;AAEAb,OAAO,CAACyB,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","defaultProps","element","Section","localProps","context","React","useContext","Context","props","extendPropsWithContext","variant","breakout","roundedCorner","textColor","backgroundColor","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","params","classnames","isTrue","internalRef","useRef","elementRef","styleObj","computeStyle","getColor","style","createElement","test","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype Attributes = Record<string, unknown> & { style?: React.CSSProperties }\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    ...attributes,\n  } as Attributes\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n  params.innerRef = elementRef\n\n  const styleObj = {\n    ...computeStyle(\n      breakout,\n      'breakout',\n      (value) => `var(--breakout--${value ? 'on' : 'off'})`\n    ),\n    ...computeStyle(\n      roundedCorner,\n      'rounded-corner',\n      (value) => value && 'var(--rounded-corner--value)'\n    ),\n    ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n    ...computeStyle(backgroundColor, 'background-color', (value) =>\n      getColor(value)\n    ),\n    ...computeStyle(outline, 'outline-color', (value) =>\n      String(value) === 'true'\n        ? 'var(--outline-color--value)'\n        : getColor(value)\n    ),\n    ...params?.style,\n  } as React.CSSProperties\n\n  return (\n    <Space {...params} element={element} style={styleObj}>\n      {children}\n    </Space>\n  )\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}

package/cjs/components/section/style/dnb-section.css

@@ -8,18 +8,74 @@
 .dnb-section {
   position: relative;
   display: flow-root;
+  --breakout--on: visible;
+  --breakout--off: hidden;
+  --rounded-corner--value: 0.75rem;
+  --outline: 0 0 0 1px var(--outline-color, transparent);
+  --top: 0;
+  --left: -100vw;
+  --width: 100vw;
+  --height: 100%;
+  box-shadow: var(--outline, none);
+  color: var(--text-color, black);
+  border-radius: var(--rounded-corner, 0);
+}
+.dnb-section[style*="--background-color"] {
+  background-color: var(--background-color, white);
 }
 .dnb-section::after {
   content: "";
+  visibility: var(--breakout, hidden);
   position: absolute;
   z-index: -15;
-  left: -100vw;
-  top: 0;
-  width: 100vw;
-  height: 100%;
-  color: var(--color-mint-green-12); /** deprecated: should be white in v11 */
+  left: var(--left);
+  top: var(--top);
+  width: var(--width);
+  height: var(--height);
+  color: var(--background-color, currentcolor);
   background-color: currentcolor;
-  box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
+  --box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
+    297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
+  box-shadow: var(--box-shadow);
+}
+.dnb-section:not([style*="--breakout"]) {
+  --breakout: var(--breakout--on);
+}
+@media screen and (max-width: 60em) {
+  .dnb-section {
+    --breakout: var(--breakout--small, var(--breakout--fallback));
+    --background-color--value: var(--background-color--small);
+    --text-color--value: var(--text-color--small);
+    --outline-color: var(--outline-color--small);
+    --rounded-corner: var(
+      --rounded-corner--small,
+      var(--rounded-corner--fallback)
+    );
+  }
+}
+@media screen and (max-width: 59.9375em) and (min-width: 40.0625em) {
+  .dnb-section {
+    --breakout: var(--breakout--medium, var(--breakout--fallback));
+    --background-color--value: var(--background-color--medium);
+    --text-color--value: var(--text-color--medium);
+    --outline-color: var(--outline-color--medium);
+    --rounded-corner: var(
+      --rounded-corner--medium,
+      var(--rounded-corner--fallback)
+    );
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-section {
+    --breakout: var(--breakout--large, var(--breakout--fallback));
+    --background-color--value: var(--background-color--large);
+    --text-color--value: var(--text-color--large);
+    --outline-color: var(--outline-color--large);
+    --rounded-corner: var(
+      --rounded-corner--large,
+      var(--rounded-corner--fallback)
+    );
+  }
 }
 .dnb-section .dnb-section::after {
   z-index: -14;
@@ -46,20 +102,26 @@
   z-index: -7;
 }
 .dnb-section--spacing-x-small {
-  padding: var(--spacing-x-small) 0;
+  padding-top: var(--spacing-x-small);
+  padding-bottom: var(--spacing-x-small);
 }
 .dnb-section--spacing-small {
-  padding: var(--spacing-small) 0;
+  padding-top: var(--spacing-small);
+  padding-bottom: var(--spacing-small);
 }
 .dnb-section--spacing-medium {
-  padding: var(--spacing-medium) 0;
+  padding-top: var(--spacing-medium);
+  padding-bottom: var(--spacing-medium);
+}
+.dnb-section--spacing, .dnb-section--spacing-large {
+  padding-top: var(--spacing-large);
+  padding-bottom: var(--spacing-large);
 }
 .dnb-section--spacing-x-large {
-  padding: var(--spacing-x-large) 0;
+  padding-top: var(--spacing-x-large);
+  padding-bottom: var(--spacing-x-large);
 }
 .dnb-section--spacing-xx-large {
-  padding: var(--spacing-xx-large) 0;
-}
-.dnb-section--spacing, .dnb-section--spacing-large {
-  padding: var(--spacing-large) 0;
+  padding-top: var(--spacing-xx-large);
+  padding-bottom: var(--spacing-xx-large);
 }

package/cjs/components/section/style/dnb-section.min.css

@@ -1 +1,7 @@
-.dnb-section{display:flow-root;position:relative}.dnb-section:after{background-color:currentcolor;box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;color:var(--color-mint-green-12);content:"";height:100%;left:-100vw;position:absolute;top:0;width:100vw;z-index:-15}.dnb-section .dnb-section:after{z-index:-14}.dnb-section .dnb-section .dnb-section:after{z-index:-13}.dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-12}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-11}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-10}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-9}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-8}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-7}.dnb-section--spacing-x-small{padding:var(--spacing-x-small) 0}.dnb-section--spacing-small{padding:var(--spacing-small) 0}.dnb-section--spacing-medium{padding:var(--spacing-medium) 0}.dnb-section--spacing-x-large{padding:var(--spacing-x-large) 0}.dnb-section--spacing-xx-large{padding:var(--spacing-xx-large) 0}.dnb-section--spacing,.dnb-section--spacing-large{padding:var(--spacing-large) 0}
+.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.75rem;--outline:0 0 0 1px var(--outline-color,transparent);--top:0;--left:-100vw;--width:100vw;--height:100%;border-radius:var(--rounded-corner,0);box-shadow:var(--outline,none);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--rounded-corner:var(
+      --rounded-corner--small,var(--rounded-corner--fallback)
+    )}}@media screen and (max-width:59.9375em) and (min-width:40.0625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--rounded-corner:var(
+      --rounded-corner--medium,var(--rounded-corner--fallback)
+    )}}@media screen and (min-width:60em){.dnb-section{--breakout:var(--breakout--large,var(--breakout--fallback));--background-color--value:var(--background-color--large);--text-color--value:var(--text-color--large);--outline-color:var(--outline-color--large);--rounded-corner:var(
+      --rounded-corner--large,var(--rounded-corner--fallback)
+    )}}.dnb-section .dnb-section:after{z-index:-14}.dnb-section .dnb-section .dnb-section:after{z-index:-13}.dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-12}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-11}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-10}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-9}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-8}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-7}.dnb-section--spacing-x-small{padding-bottom:var(--spacing-x-small);padding-top:var(--spacing-x-small)}.dnb-section--spacing-small{padding-bottom:var(--spacing-small);padding-top:var(--spacing-small)}.dnb-section--spacing-medium{padding-bottom:var(--spacing-medium);padding-top:var(--spacing-medium)}.dnb-section--spacing,.dnb-section--spacing-large{padding-bottom:var(--spacing-large);padding-top:var(--spacing-large)}.dnb-section--spacing-x-large{padding-bottom:var(--spacing-x-large);padding-top:var(--spacing-x-large)}.dnb-section--spacing-xx-large{padding-bottom:var(--spacing-xx-large);padding-top:var(--spacing-xx-large)}

package/cjs/components/section/style/dnb-section.scss

@@ -12,26 +12,76 @@
   // it eliminates margin-collapsing
   display: flow-root;
 
+  --breakout--on: visible;
+  --breakout--off: hidden;
+  --rounded-corner--value: 0.75rem;
+  --outline: 0 0 0 1px var(--outline-color, transparent);
+  --top: 0;
+  --left: -100vw;
+  --width: 100vw;
+  --height: 100%;
+
+  box-shadow: var(--outline, none);
+  color: var(--text-color, black);
+  border-radius: var(--rounded-corner, 0);
+
+  &[style*='--background-color'] {
+    background-color: var(--background-color, white);
+  }
+
   &::after {
     content: '';
+    visibility: var(--breakout, hidden);
     position: absolute;
     z-index: -15;
-    left: -100vw;
-    top: 0;
-    width: 100vw;
-    height: 100%;
-    color: var(
-      --color-mint-green-12
-    ); /** deprecated: should be white in v11 */
+    left: var(--left);
+    top: var(--top);
+    width: var(--width);
+    height: var(--height);
+    color: var(--background-color, currentcolor);
     background-color: currentcolor;
 
+    --box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
+      297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
+
     // we use box-shadow to avoid a horizontal scrollbar
     // We lower the left position, so we get an overlap
-    box-shadow:
-      99vw 0 0 0 currentcolor,
-      198vw 0 0 0 currentcolor,
-      297vw 0 0 0 currentcolor,
-      396vw 0 0 0 currentcolor;
+    box-shadow: var(--box-shadow);
+  }
+
+  &:not([style*='--breakout']) {
+    --breakout: var(--breakout--on);
+  }
+
+  @include allBelow(medium) {
+    --breakout: var(--breakout--small, var(--breakout--fallback));
+    --background-color--value: var(--background-color--small);
+    --text-color--value: var(--text-color--small);
+    --outline-color: var(--outline-color--small);
+    --rounded-corner: var(
+      --rounded-corner--small,
+      var(--rounded-corner--fallback)
+    );
+  }
+  @include allBetween(small, medium) {
+    --breakout: var(--breakout--medium, var(--breakout--fallback));
+    --background-color--value: var(--background-color--medium);
+    --text-color--value: var(--text-color--medium);
+    --outline-color: var(--outline-color--medium);
+    --rounded-corner: var(
+      --rounded-corner--medium,
+      var(--rounded-corner--fallback)
+    );
+  }
+  @include allAbove(medium) {
+    --breakout: var(--breakout--large, var(--breakout--fallback));
+    --background-color--value: var(--background-color--large);
+    --text-color--value: var(--text-color--large);
+    --outline-color: var(--outline-color--large);
+    --rounded-corner: var(
+      --rounded-corner--large,
+      var(--rounded-corner--fallback)
+    );
   }
 
   & &::after {
@@ -66,28 +116,30 @@
     z-index: -7;
   }
 
+  // deprecated and can be removed in v11
   &--spacing-x-small {
-    padding: var(--spacing-x-small) 0;
+    padding-top: var(--spacing-x-small);
+    padding-bottom: var(--spacing-x-small);
   }
-
   &--spacing-small {
-    padding: var(--spacing-small) 0;
+    padding-top: var(--spacing-small);
+    padding-bottom: var(--spacing-small);
   }
-
   &--spacing-medium {
-    padding: var(--spacing-medium) 0;
+    padding-top: var(--spacing-medium);
+    padding-bottom: var(--spacing-medium);
+  }
+  &--spacing,
+  &--spacing-large {
+    padding-top: var(--spacing-large);
+    padding-bottom: var(--spacing-large);
   }
-
   &--spacing-x-large {
-    padding: var(--spacing-x-large) 0;
+    padding-top: var(--spacing-x-large);
+    padding-bottom: var(--spacing-x-large);
   }
-
   &--spacing-xx-large {
-    padding: var(--spacing-xx-large) 0;
-  }
-
-  &--spacing,
-  &--spacing-large {
-    padding: var(--spacing-large) 0;
+    padding-top: var(--spacing-xx-large);
+    padding-bottom: var(--spacing-xx-large);
   }
 }

package/cjs/components/section/style/themes/dnb-section-theme-sbanken.css

@@ -1,39 +1,34 @@
-.dnb-section--transparent::after {
-  color: transparent;
+.dnb-section {
+  --background-color: var(--sb-color-white);
+  --outline-color--value: var(--sb-color-gray-light-2);
 }
-.dnb-section--default, .dnb-section--divider {
-  color: var(--sb-color-text);
+.dnb-section--transparent {
+  --background-color: transparent;
 }
-.dnb-section--default::after, .dnb-section--divider::after {
-  color: var(--sb-color-violet-light-4);
+.dnb-section--default, .dnb-section--divider {
+  --text-color: var(--text-color--value, var(--sb-color-text));
+  --background-color: var(
+    --background-color--value,
+    var(--sb-color-violet-light-4)
+  );
 }
 .dnb-section--white {
-  color: var(--sb-color-text);
-}
-.dnb-section--white::after {
-  color: var(--sb-color-white);
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-white);
 }
 .dnb-section--error {
-  color: var(--sb-color-text);
-}
-.dnb-section--error::after {
-  color: var(--sb-color-magenta-light-2);
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-magenta-light-2);
 }
 .dnb-section--info {
-  color: var(--sb-color-text);
-}
-.dnb-section--info::after {
-  color: var(--sb-color-gray-light-2);
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-gray-light-2);
 }
 .dnb-section--warning {
-  color: var(--sb-color-text);
-}
-.dnb-section--warning::after {
-  color: var(--sb-color-yellow-light-3);
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-yellow-light-3);
 }
 .dnb-section--success {
-  color: var(--sb-color-text);
-}
-.dnb-section--success::after {
-  color: var(--sb-color-green-light-2);
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-green-light-2);
 }

package/cjs/components/section/style/themes/dnb-section-theme-sbanken.min.css

@@ -1 +1,3 @@
-.dnb-section--transparent:after{color:transparent}.dnb-section--default,.dnb-section--divider{color:var(--sb-color-text)}.dnb-section--default:after,.dnb-section--divider:after{color:var(--sb-color-violet-light-4)}.dnb-section--white{color:var(--sb-color-text)}.dnb-section--white:after{color:var(--sb-color-white)}.dnb-section--error{color:var(--sb-color-text)}.dnb-section--error:after{color:var(--sb-color-magenta-light-2)}.dnb-section--info{color:var(--sb-color-text)}.dnb-section--info:after{color:var(--sb-color-gray-light-2)}.dnb-section--warning{color:var(--sb-color-text)}.dnb-section--warning:after{color:var(--sb-color-yellow-light-3)}.dnb-section--success{color:var(--sb-color-text)}.dnb-section--success:after{color:var(--sb-color-green-light-2)}
+.dnb-section{--background-color:var(--sb-color-white);--outline-color--value:var(--sb-color-gray-light-2)}.dnb-section--transparent{--background-color:transparent}.dnb-section--default,.dnb-section--divider{--text-color:var(--text-color--value,var(--sb-color-text));--background-color:var(
+    --background-color--value,var(--sb-color-violet-light-4)
+  )}.dnb-section--white{--text-color:var(--sb-color-text);--background-color:var(--sb-color-white)}.dnb-section--error{--text-color:var(--sb-color-text);--background-color:var(--sb-color-magenta-light-2)}.dnb-section--info{--text-color:var(--sb-color-text);--background-color:var(--sb-color-gray-light-2)}.dnb-section--warning{--text-color:var(--sb-color-text);--background-color:var(--sb-color-yellow-light-3)}.dnb-section--success{--text-color:var(--sb-color-text);--background-color:var(--sb-color-green-light-2)}

package/cjs/components/section/style/themes/dnb-section-theme-sbanken.scss

@@ -1,56 +1,42 @@
 .dnb-section {
+  --background-color: var(--sb-color-white);
+  --outline-color--value: var(--sb-color-gray-light-2);
+
   &--transparent {
-    &::after {
-      color: transparent;
-    }
+    --background-color: transparent;
   }
 
   &--default,
   &--divider {
-    color: var(--sb-color-text);
-
-    &::after {
-      color: var(--sb-color-violet-light-4);
-    }
+    --text-color: var(--text-color--value, var(--sb-color-text));
+    --background-color: var(
+      --background-color--value,
+      var(--sb-color-violet-light-4)
+    );
   }
 
   &--white {
-    color: var(--sb-color-text);
-
-    &::after {
-      color: var(--sb-color-white);
-    }
+    --text-color: var(--sb-color-text);
+    --background-color: var(--sb-color-white);
   }
 
   &--error {
-    color: var(--sb-color-text);
-
-    &::after {
-      color: var(--sb-color-magenta-light-2);
-    }
+    --text-color: var(--sb-color-text);
+    --background-color: var(--sb-color-magenta-light-2);
   }
 
   &--info {
-    color: var(--sb-color-text);
-
-    &::after {
-      color: var(--sb-color-gray-light-2);
-    }
+    --text-color: var(--sb-color-text);
+    --background-color: var(--sb-color-gray-light-2);
   }
 
   &--warning {
-    color: var(--sb-color-text);
-
-    &::after {
-      color: var(--sb-color-yellow-light-3);
-    }
+    --text-color: var(--sb-color-text);
+    --background-color: var(--sb-color-yellow-light-3);
   }
 
   &--success {
-    color: var(--sb-color-text);
-
-    &::after {
-      color: var(--sb-color-green-light-2);
-    }
+    --text-color: var(--sb-color-text);
+    --background-color: var(--sb-color-green-light-2);
   }
 }