@volue/design-colors 3.0.0-next.0 → 3.0.0-next.1

package/dist/generic.module.js

@@ -1119,7 +1119,20 @@ export default {
       "path": [
         "color",
         "background",
-        "canvas"
+        "canvas",
+        "@"
+      ]
+    },
+    {
+      "value": "#f9fafb",
+      "name": "backgroundCanvasSubtle",
+      "description": "Subtle canvas background. Used for the background of your app, e.g. when you create a card-based layout.",
+      "originalName": "backgroundNeutralSubtle",
+      "path": [
+        "color",
+        "background",
+        "canvas",
+        "subtle"
       ]
     },
     {
@@ -1137,7 +1150,7 @@ export default {
     {
       "value": "#f3f5f6",
       "name": "backgroundSurfaceSubtle",
-      "description": "Subtle surface background. Used for the background area of components that should stand out somewhat against default surface.",
+      "description": "Subtle surface background. Used for the background area of components that should stand out somewhat against default surface or app canvas.",
       "originalName": "backgroundNeutralModerate",
       "path": [
         "color",
@@ -1864,7 +1877,7 @@ export default {
       ]
     },
     {
-      "value": "rgba(255, 255, 255, 0.1)",
+      "value": "rgba(255, 255, 255, 0.113)",
       "name": "backgroundInverse",
       "description": "Inverse background. Used for backgrounds of elements on a strong background.",
       "originalName": "backgroundNeutralMinimal",
@@ -2473,5 +2486,234 @@ export default {
         "inverse"
       ]
     }
+  ],
+  "rgb": [
+    {
+      "value": "255, 255, 255",
+      "name": "rgbBackgroundSurface",
+      "originalName": "backgroundSurface",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "surface"
+      ]
+    },
+    {
+      "value": "230, 235, 236",
+      "name": "rgbBackgroundNeutral",
+      "originalName": "backgroundNeutral",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "neutral",
+        "@"
+      ]
+    },
+    {
+      "value": "83, 116, 123",
+      "name": "rgbBackgroundNeutralBold",
+      "originalName": "backgroundNeutralBold",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "neutral",
+        "bold"
+      ]
+    },
+    {
+      "value": "34, 63, 68",
+      "name": "rgbBackgroundNeutralStrong",
+      "originalName": "backgroundNeutralStrong",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "neutral",
+        "strong"
+      ]
+    },
+    {
+      "value": "232, 241, 243",
+      "name": "rgbBackgroundAccent",
+      "originalName": "backgroundAccent",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "accent",
+        "@"
+      ]
+    },
+    {
+      "value": "91, 155, 169",
+      "name": "rgbBackgroundAccentBold",
+      "originalName": "backgroundAccentBold",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "accent",
+        "bold"
+      ]
+    },
+    {
+      "value": "21, 112, 132",
+      "name": "rgbBackgroundAccentStrong",
+      "originalName": "backgroundAccentStrong",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "accent",
+        "strong"
+      ]
+    },
+    {
+      "value": "255, 239, 240",
+      "name": "rgbBackgroundDanger",
+      "originalName": "backgroundDanger",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "danger",
+        "@"
+      ]
+    },
+    {
+      "value": "255, 59, 61",
+      "name": "rgbBackgroundDangerBold",
+      "originalName": "backgroundDangerBold",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "danger",
+        "bold"
+      ]
+    },
+    {
+      "value": "223, 0, 31",
+      "name": "rgbBackgroundDangerStrong",
+      "originalName": "backgroundDangerStrong",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "danger",
+        "strong"
+      ]
+    },
+    {
+      "value": "255, 242, 218",
+      "name": "rgbBackgroundWarning",
+      "originalName": "backgroundWarning",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "warning",
+        "@"
+      ]
+    },
+    {
+      "value": "255, 185, 0",
+      "name": "rgbBackgroundWarningBold",
+      "originalName": "backgroundWarningBold",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "warning",
+        "bold"
+      ]
+    },
+    {
+      "value": "220, 159, 0",
+      "name": "rgbBackgroundWarningStrong",
+      "originalName": "backgroundWarningStrong",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "warning",
+        "strong"
+      ]
+    },
+    {
+      "value": "219, 255, 223",
+      "name": "rgbBackgroundSuccess",
+      "originalName": "backgroundSuccess",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "success",
+        "@"
+      ]
+    },
+    {
+      "value": "34, 160, 71",
+      "name": "rgbBackgroundSuccessBold",
+      "originalName": "backgroundSuccessBold",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "success",
+        "bold"
+      ]
+    },
+    {
+      "value": "27, 130, 56",
+      "name": "rgbBackgroundSuccessStrong",
+      "originalName": "backgroundSuccessStrong",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "success",
+        "strong"
+      ]
+    },
+    {
+      "value": "225, 249, 255",
+      "name": "rgbBackgroundInfo",
+      "originalName": "backgroundInfo",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "info",
+        "@"
+      ]
+    },
+    {
+      "value": "0, 150, 175",
+      "name": "rgbBackgroundInfoBold",
+      "originalName": "backgroundInfoBold",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "info",
+        "bold"
+      ]
+    },
+    {
+      "value": "0, 122, 146",
+      "name": "rgbBackgroundInfoStrong",
+      "originalName": "backgroundInfoStrong",
+      "path": [
+        "color",
+        "rgb",
+        "background",
+        "info",
+        "strong"
+      ]
+    }
   ]
 };

package/dist/index.common.js

@@ -127,7 +127,10 @@ module.exports = {
     "pink100": "#bc3d91"
   },
   "background": {
-    "canvas": "#ffffff",
+    "canvas": {
+      "default": "#ffffff",
+      "subtle": "#f9fafb"
+    },
     "surface": {
       "default": "#ffffff",
       "subtle": "#f3f5f6",
@@ -229,7 +232,7 @@ module.exports = {
       "default": "#e6ebec",
       "subtle": "#f3f5f6"
     },
-    "inverse": "rgba(255, 255, 255, 0.1)"
+    "inverse": "rgba(255, 255, 255, 0.113)"
   },
   "foreground": {
     "body": "#082d35",
@@ -312,5 +315,40 @@ module.exports = {
     },
     "focus": "#388597",
     "inverse": "rgba(255, 255, 255, 0.85)"
+  },
+  "rgb": {
+    "background": {
+      "surface": "255, 255, 255",
+      "neutral": {
+        "default": "230, 235, 236",
+        "bold": "83, 116, 123",
+        "strong": "34, 63, 68"
+      },
+      "accent": {
+        "default": "232, 241, 243",
+        "bold": "91, 155, 169",
+        "strong": "21, 112, 132"
+      },
+      "danger": {
+        "default": "255, 239, 240",
+        "bold": "255, 59, 61",
+        "strong": "223, 0, 31"
+      },
+      "warning": {
+        "default": "255, 242, 218",
+        "bold": "255, 185, 0",
+        "strong": "220, 159, 0"
+      },
+      "success": {
+        "default": "219, 255, 223",
+        "bold": "34, 160, 71",
+        "strong": "27, 130, 56"
+      },
+      "info": {
+        "default": "225, 249, 255",
+        "bold": "0, 150, 175",
+        "strong": "0, 122, 146"
+      }
+    }
   }
 };

package/dist/index.cssmodules.css

@@ -122,6 +122,7 @@
 @value color-data-pink80: #e26ab5;
 @value color-data-pink100: #bc3d91;
 @value color-background-canvas: #ffffff;
+@value color-background-canvas-subtle: #f9fafb;
 @value color-background-surface: #ffffff;
 @value color-background-surface-subtle: #f3f5f6;
 @value color-background-surface-contrast: #082d35;
@@ -181,7 +182,7 @@
 @value color-background-info-strong-hover: #005e72;
 @value color-background-disabled: #e6ebec;
 @value color-background-disabled-subtle: #f3f5f6;
-@value color-background-inverse: rgba(255, 255, 255, 0.1);
+@value color-background-inverse: rgba(255, 255, 255, 0.113);
 @value color-foreground-body: #082d35;
 @value color-foreground-link: #11596a;
 @value color-foreground-neutral: #082d35;
@@ -231,4 +232,23 @@
 @value color-border-disabled: #e6ebec;
 @value color-border-disabled-subtle: #f3f5f6;
 @value color-border-focus: #388597;
-@value color-border-inverse: rgba(255, 255, 255, 0.85);
+@value color-border-inverse: rgba(255, 255, 255, 0.85);
+@value color-rgb-background-surface: 255, 255, 255;
+@value color-rgb-background-neutral: 230, 235, 236;
+@value color-rgb-background-neutral-bold: 83, 116, 123;
+@value color-rgb-background-neutral-strong: 34, 63, 68;
+@value color-rgb-background-accent: 232, 241, 243;
+@value color-rgb-background-accent-bold: 91, 155, 169;
+@value color-rgb-background-accent-strong: 21, 112, 132;
+@value color-rgb-background-danger: 255, 239, 240;
+@value color-rgb-background-danger-bold: 255, 59, 61;
+@value color-rgb-background-danger-strong: 223, 0, 31;
+@value color-rgb-background-warning: 255, 242, 218;
+@value color-rgb-background-warning-bold: 255, 185, 0;
+@value color-rgb-background-warning-strong: 220, 159, 0;
+@value color-rgb-background-success: 219, 255, 223;
+@value color-rgb-background-success-bold: 34, 160, 71;
+@value color-rgb-background-success-strong: 27, 130, 56;
+@value color-rgb-background-info: 225, 249, 255;
+@value color-rgb-background-info-bold: 0, 150, 175;
+@value color-rgb-background-info-strong: 0, 122, 146;

package/dist/index.custom-properties.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 31 Jul 2023 12:44:48 GMT
+ * Generated on Fri, 04 Aug 2023 11:50:24 GMT
  */
 
 :root {
@@ -128,6 +128,7 @@
   --color-data-pink80: #e26ab5;
   --color-data-pink100: #bc3d91;
   --color-background-canvas: #ffffff;
+  --color-background-canvas-subtle: #f9fafb;
   --color-background-surface: #ffffff;
   --color-background-surface-subtle: #f3f5f6;
   --color-background-surface-contrast: #082d35;
@@ -187,7 +188,7 @@
   --color-background-info-strong-hover: #005e72;
   --color-background-disabled: #e6ebec;
   --color-background-disabled-subtle: #f3f5f6;
-  --color-background-inverse: rgba(255, 255, 255, 0.1);
+  --color-background-inverse: rgba(255, 255, 255, 0.113);
   --color-foreground-body: #082d35;
   --color-foreground-link: #11596a;
   --color-foreground-neutral: #082d35;
@@ -238,4 +239,23 @@
   --color-border-disabled-subtle: #f3f5f6;
   --color-border-focus: #388597;
   --color-border-inverse: rgba(255, 255, 255, 0.85);
+  --color-rgb-background-surface: 255, 255, 255;
+  --color-rgb-background-neutral: 230, 235, 236;
+  --color-rgb-background-neutral-bold: 83, 116, 123;
+  --color-rgb-background-neutral-strong: 34, 63, 68;
+  --color-rgb-background-accent: 232, 241, 243;
+  --color-rgb-background-accent-bold: 91, 155, 169;
+  --color-rgb-background-accent-strong: 21, 112, 132;
+  --color-rgb-background-danger: 255, 239, 240;
+  --color-rgb-background-danger-bold: 255, 59, 61;
+  --color-rgb-background-danger-strong: 223, 0, 31;
+  --color-rgb-background-warning: 255, 242, 218;
+  --color-rgb-background-warning-bold: 255, 185, 0;
+  --color-rgb-background-warning-strong: 220, 159, 0;
+  --color-rgb-background-success: 219, 255, 223;
+  --color-rgb-background-success-bold: 34, 160, 71;
+  --color-rgb-background-success-strong: 27, 130, 56;
+  --color-rgb-background-info: 225, 249, 255;
+  --color-rgb-background-info-bold: 0, 150, 175;
+  --color-rgb-background-info-strong: 0, 122, 146;
 }

package/dist/index.d.ts

@@ -128,7 +128,10 @@ declare const tokens: {
     "pink100": "#bc3d91"
   },
   "background": {
-    "canvas": "#ffffff",
+    "canvas": {
+      "default": "#ffffff",
+      "subtle": "#f9fafb"
+    },
     "surface": {
       "default": "#ffffff",
       "subtle": "#f3f5f6",
@@ -230,7 +233,7 @@ declare const tokens: {
       "default": "#e6ebec",
       "subtle": "#f3f5f6"
     },
-    "inverse": "rgba(255, 255, 255, 0.1)"
+    "inverse": "rgba(255, 255, 255, 0.113)"
   },
   "foreground": {
     "body": "#082d35",
@@ -313,5 +316,40 @@ declare const tokens: {
     },
     "focus": "#388597",
     "inverse": "rgba(255, 255, 255, 0.85)"
+  },
+  "rgb": {
+    "background": {
+      "surface": "255, 255, 255",
+      "neutral": {
+        "default": "230, 235, 236",
+        "bold": "83, 116, 123",
+        "strong": "34, 63, 68"
+      },
+      "accent": {
+        "default": "232, 241, 243",
+        "bold": "91, 155, 169",
+        "strong": "21, 112, 132"
+      },
+      "danger": {
+        "default": "255, 239, 240",
+        "bold": "255, 59, 61",
+        "strong": "223, 0, 31"
+      },
+      "warning": {
+        "default": "255, 242, 218",
+        "bold": "255, 185, 0",
+        "strong": "220, 159, 0"
+      },
+      "success": {
+        "default": "219, 255, 223",
+        "bold": "34, 160, 71",
+        "strong": "27, 130, 56"
+      },
+      "info": {
+        "default": "225, 249, 255",
+        "bold": "0, 150, 175",
+        "strong": "0, 122, 146"
+      }
+    }
   }
 };

package/dist/index.json

@@ -123,6 +123,7 @@
   "COLOR_DATA_PINK80": "#e26ab5",
   "COLOR_DATA_PINK100": "#bc3d91",
   "COLOR_BACKGROUND_CANVAS": "#ffffff",
+  "COLOR_BACKGROUND_CANVAS_SUBTLE": "#f9fafb",
   "COLOR_BACKGROUND_SURFACE": "#ffffff",
   "COLOR_BACKGROUND_SURFACE_SUBTLE": "#f3f5f6",
   "COLOR_BACKGROUND_SURFACE_CONTRAST": "#082d35",
@@ -182,7 +183,7 @@
   "COLOR_BACKGROUND_INFO_STRONG_HOVER": "#005e72",
   "COLOR_BACKGROUND_DISABLED": "#e6ebec",
   "COLOR_BACKGROUND_DISABLED_SUBTLE": "#f3f5f6",
-  "COLOR_BACKGROUND_INVERSE": "rgba(255, 255, 255, 0.1)",
+  "COLOR_BACKGROUND_INVERSE": "rgba(255, 255, 255, 0.113)",
   "COLOR_FOREGROUND_BODY": "#082d35",
   "COLOR_FOREGROUND_LINK": "#11596a",
   "COLOR_FOREGROUND_NEUTRAL": "#082d35",
@@ -232,5 +233,24 @@
   "COLOR_BORDER_DISABLED": "#e6ebec",
   "COLOR_BORDER_DISABLED_SUBTLE": "#f3f5f6",
   "COLOR_BORDER_FOCUS": "#388597",
-  "COLOR_BORDER_INVERSE": "rgba(255, 255, 255, 0.85)"
+  "COLOR_BORDER_INVERSE": "rgba(255, 255, 255, 0.85)",
+  "COLOR_RGB_BACKGROUND_SURFACE": "255, 255, 255",
+  "COLOR_RGB_BACKGROUND_NEUTRAL": "230, 235, 236",
+  "COLOR_RGB_BACKGROUND_NEUTRAL_BOLD": "83, 116, 123",
+  "COLOR_RGB_BACKGROUND_NEUTRAL_STRONG": "34, 63, 68",
+  "COLOR_RGB_BACKGROUND_ACCENT": "232, 241, 243",
+  "COLOR_RGB_BACKGROUND_ACCENT_BOLD": "91, 155, 169",
+  "COLOR_RGB_BACKGROUND_ACCENT_STRONG": "21, 112, 132",
+  "COLOR_RGB_BACKGROUND_DANGER": "255, 239, 240",
+  "COLOR_RGB_BACKGROUND_DANGER_BOLD": "255, 59, 61",
+  "COLOR_RGB_BACKGROUND_DANGER_STRONG": "223, 0, 31",
+  "COLOR_RGB_BACKGROUND_WARNING": "255, 242, 218",
+  "COLOR_RGB_BACKGROUND_WARNING_BOLD": "255, 185, 0",
+  "COLOR_RGB_BACKGROUND_WARNING_STRONG": "220, 159, 0",
+  "COLOR_RGB_BACKGROUND_SUCCESS": "219, 255, 223",
+  "COLOR_RGB_BACKGROUND_SUCCESS_BOLD": "34, 160, 71",
+  "COLOR_RGB_BACKGROUND_SUCCESS_STRONG": "27, 130, 56",
+  "COLOR_RGB_BACKGROUND_INFO": "225, 249, 255",
+  "COLOR_RGB_BACKGROUND_INFO_BOLD": "0, 150, 175",
+  "COLOR_RGB_BACKGROUND_INFO_STRONG": "0, 122, 146"
 }

package/dist/index.map.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 31 Jul 2023 12:44:48 GMT
+ * Generated on Fri, 04 Aug 2023 11:50:24 GMT
  */
 
 $colors-map: (
@@ -129,6 +129,7 @@ $colors-map: (
   'color-data-pink80': #e26ab5,
   'color-data-pink100': #bc3d91,
   'color-background-canvas': #ffffff,
+  'color-background-canvas-subtle': #f9fafb,
   'color-background-surface': #ffffff,
   'color-background-surface-subtle': #f3f5f6,
   'color-background-surface-contrast': #082d35,
@@ -188,7 +189,7 @@ $colors-map: (
   'color-background-info-strong-hover': #005e72,
   'color-background-disabled': #e6ebec,
   'color-background-disabled-subtle': #f3f5f6,
-  'color-background-inverse': rgba(255, 255, 255, 0.1),
+  'color-background-inverse': rgba(255, 255, 255, 0.113),
   'color-foreground-body': #082d35,
   'color-foreground-link': #11596a,
   'color-foreground-neutral': #082d35,
@@ -238,5 +239,24 @@ $colors-map: (
   'color-border-disabled': #e6ebec,
   'color-border-disabled-subtle': #f3f5f6,
   'color-border-focus': #388597,
-  'color-border-inverse': rgba(255, 255, 255, 0.85)
+  'color-border-inverse': rgba(255, 255, 255, 0.85),
+  'color-rgb-background-surface': 255, 255, 255,
+  'color-rgb-background-neutral': 230, 235, 236,
+  'color-rgb-background-neutral-bold': 83, 116, 123,
+  'color-rgb-background-neutral-strong': 34, 63, 68,
+  'color-rgb-background-accent': 232, 241, 243,
+  'color-rgb-background-accent-bold': 91, 155, 169,
+  'color-rgb-background-accent-strong': 21, 112, 132,
+  'color-rgb-background-danger': 255, 239, 240,
+  'color-rgb-background-danger-bold': 255, 59, 61,
+  'color-rgb-background-danger-strong': 223, 0, 31,
+  'color-rgb-background-warning': 255, 242, 218,
+  'color-rgb-background-warning-bold': 255, 185, 0,
+  'color-rgb-background-warning-strong': 220, 159, 0,
+  'color-rgb-background-success': 219, 255, 223,
+  'color-rgb-background-success-bold': 34, 160, 71,
+  'color-rgb-background-success-strong': 27, 130, 56,
+  'color-rgb-background-info': 225, 249, 255,
+  'color-rgb-background-info-bold': 0, 150, 175,
+  'color-rgb-background-info-strong': 0, 122, 146
 );

package/dist/index.module.js

@@ -127,7 +127,10 @@ export default {
     "pink100": "#bc3d91"
   },
   "background": {
-    "canvas": "#ffffff",
+    "canvas": {
+      "default": "#ffffff",
+      "subtle": "#f9fafb"
+    },
     "surface": {
       "default": "#ffffff",
       "subtle": "#f3f5f6",
@@ -229,7 +232,7 @@ export default {
       "default": "#e6ebec",
       "subtle": "#f3f5f6"
     },
-    "inverse": "rgba(255, 255, 255, 0.1)"
+    "inverse": "rgba(255, 255, 255, 0.113)"
   },
   "foreground": {
     "body": "#082d35",
@@ -312,5 +315,40 @@ export default {
     },
     "focus": "#388597",
     "inverse": "rgba(255, 255, 255, 0.85)"
+  },
+  "rgb": {
+    "background": {
+      "surface": "255, 255, 255",
+      "neutral": {
+        "default": "230, 235, 236",
+        "bold": "83, 116, 123",
+        "strong": "34, 63, 68"
+      },
+      "accent": {
+        "default": "232, 241, 243",
+        "bold": "91, 155, 169",
+        "strong": "21, 112, 132"
+      },
+      "danger": {
+        "default": "255, 239, 240",
+        "bold": "255, 59, 61",
+        "strong": "223, 0, 31"
+      },
+      "warning": {
+        "default": "255, 242, 218",
+        "bold": "255, 185, 0",
+        "strong": "220, 159, 0"
+      },
+      "success": {
+        "default": "219, 255, 223",
+        "bold": "34, 160, 71",
+        "strong": "27, 130, 56"
+      },
+      "info": {
+        "default": "225, 249, 255",
+        "bold": "0, 150, 175",
+        "strong": "0, 122, 146"
+      }
+    }
   }
 };

package/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 31 Jul 2023 12:44:48 GMT
+// Generated on Fri, 04 Aug 2023 11:50:24 GMT
 
 $color-white: #ffffff;
 $color-gray0: #f9fafb;
@@ -126,6 +126,7 @@ $color-data-pink60: #e29dc9;
 $color-data-pink80: #e26ab5;
 $color-data-pink100: #bc3d91;
 $color-background-canvas: #ffffff;
+$color-background-canvas-subtle: #f9fafb;
 $color-background-surface: #ffffff;
 $color-background-surface-subtle: #f3f5f6;
 $color-background-surface-contrast: #082d35;
@@ -185,7 +186,7 @@ $color-background-info-strong: #007a92;
 $color-background-info-strong-hover: #005e72;
 $color-background-disabled: #e6ebec;
 $color-background-disabled-subtle: #f3f5f6;
-$color-background-inverse: rgba(255, 255, 255, 0.1);
+$color-background-inverse: rgba(255, 255, 255, 0.113);
 $color-foreground-body: #082d35;
 $color-foreground-link: #11596a;
 $color-foreground-neutral: #082d35;
@@ -236,3 +237,22 @@ $color-border-disabled: #e6ebec;
 $color-border-disabled-subtle: #f3f5f6;
 $color-border-focus: #388597;
 $color-border-inverse: rgba(255, 255, 255, 0.85);
+$color-rgb-background-surface: 255, 255, 255;
+$color-rgb-background-neutral: 230, 235, 236;
+$color-rgb-background-neutral-bold: 83, 116, 123;
+$color-rgb-background-neutral-strong: 34, 63, 68;
+$color-rgb-background-accent: 232, 241, 243;
+$color-rgb-background-accent-bold: 91, 155, 169;
+$color-rgb-background-accent-strong: 21, 112, 132;
+$color-rgb-background-danger: 255, 239, 240;
+$color-rgb-background-danger-bold: 255, 59, 61;
+$color-rgb-background-danger-strong: 223, 0, 31;
+$color-rgb-background-warning: 255, 242, 218;
+$color-rgb-background-warning-bold: 255, 185, 0;
+$color-rgb-background-warning-strong: 220, 159, 0;
+$color-rgb-background-success: 219, 255, 223;
+$color-rgb-background-success-bold: 34, 160, 71;
+$color-rgb-background-success-strong: 27, 130, 56;
+$color-rgb-background-info: 225, 249, 255;
+$color-rgb-background-info-bold: 0, 150, 175;
+$color-rgb-background-info-strong: 0, 122, 146;