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

package/dist/generic.d.ts

@@ -627,6 +627,13 @@ declare const tokens: {
       originalName: "backgroundNeutralMinimal"
       path: string[]
     },
+    {
+      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: string[]
+    },
     {
       value: "#ffffff"
       name: "backgroundSurface"
@@ -637,7 +644,7 @@ declare const tokens: {
     {
       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: string[]
     },
@@ -1041,7 +1048,7 @@ declare const tokens: {
       path: string[]
     },
     {
-      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"
@@ -1051,8 +1058,8 @@ declare const tokens: {
   "foreground": [
     {
       value: "#082d35"
-      name: "foregroundBody"
-      description: "Body foreground. Used as global default for all text."
+      name: "foregroundCanvas"
+      description: "Canvas foreground. Used for the default foreground of your app."
       originalName: "foregroundNeutral"
       path: string[]
     },
@@ -1401,5 +1408,121 @@ declare const tokens: {
       originalName: "colorWhite"
       path: string[]
     }
+  ],
+  "rgb": [
+    {
+      value: "255, 255, 255"
+      name: "rgbBackgroundSurface"
+      originalName: "backgroundSurface"
+      path: string[]
+    },
+    {
+      value: "230, 235, 236"
+      name: "rgbBackgroundNeutral"
+      originalName: "backgroundNeutral"
+      path: string[]
+    },
+    {
+      value: "83, 116, 123"
+      name: "rgbBackgroundNeutralBold"
+      originalName: "backgroundNeutralBold"
+      path: string[]
+    },
+    {
+      value: "34, 63, 68"
+      name: "rgbBackgroundNeutralStrong"
+      originalName: "backgroundNeutralStrong"
+      path: string[]
+    },
+    {
+      value: "232, 241, 243"
+      name: "rgbBackgroundAccent"
+      originalName: "backgroundAccent"
+      path: string[]
+    },
+    {
+      value: "91, 155, 169"
+      name: "rgbBackgroundAccentBold"
+      originalName: "backgroundAccentBold"
+      path: string[]
+    },
+    {
+      value: "21, 112, 132"
+      name: "rgbBackgroundAccentStrong"
+      originalName: "backgroundAccentStrong"
+      path: string[]
+    },
+    {
+      value: "255, 239, 240"
+      name: "rgbBackgroundDanger"
+      originalName: "backgroundDanger"
+      path: string[]
+    },
+    {
+      value: "255, 59, 61"
+      name: "rgbBackgroundDangerBold"
+      originalName: "backgroundDangerBold"
+      path: string[]
+    },
+    {
+      value: "223, 0, 31"
+      name: "rgbBackgroundDangerStrong"
+      originalName: "backgroundDangerStrong"
+      path: string[]
+    },
+    {
+      value: "255, 242, 218"
+      name: "rgbBackgroundWarning"
+      originalName: "backgroundWarning"
+      path: string[]
+    },
+    {
+      value: "255, 185, 0"
+      name: "rgbBackgroundWarningBold"
+      originalName: "backgroundWarningBold"
+      path: string[]
+    },
+    {
+      value: "220, 159, 0"
+      name: "rgbBackgroundWarningStrong"
+      originalName: "backgroundWarningStrong"
+      path: string[]
+    },
+    {
+      value: "219, 255, 223"
+      name: "rgbBackgroundSuccess"
+      originalName: "backgroundSuccess"
+      path: string[]
+    },
+    {
+      value: "34, 160, 71"
+      name: "rgbBackgroundSuccessBold"
+      originalName: "backgroundSuccessBold"
+      path: string[]
+    },
+    {
+      value: "27, 130, 56"
+      name: "rgbBackgroundSuccessStrong"
+      originalName: "backgroundSuccessStrong"
+      path: string[]
+    },
+    {
+      value: "225, 249, 255"
+      name: "rgbBackgroundInfo"
+      originalName: "backgroundInfo"
+      path: string[]
+    },
+    {
+      value: "0, 150, 175"
+      name: "rgbBackgroundInfoBold"
+      originalName: "backgroundInfoBold"
+      path: string[]
+    },
+    {
+      value: "0, 122, 146"
+      name: "rgbBackgroundInfoStrong"
+      originalName: "backgroundInfoStrong"
+      path: string[]
+    }
   ]
 };

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",
@@ -1878,13 +1891,13 @@ export default {
   "foreground": [
     {
       "value": "#082d35",
-      "name": "foregroundBody",
-      "description": "Body foreground. Used as global default for all text.",
+      "name": "foregroundCanvas",
+      "description": "Canvas foreground. Used for the default foreground of your app.",
       "originalName": "foregroundNeutral",
       "path": [
         "color",
         "foreground",
-        "body"
+        "canvas"
       ]
     },
     {
@@ -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,10 +232,10 @@ module.exports = {
       "default": "#e6ebec",
       "subtle": "#f3f5f6"
     },
-    "inverse": "rgba(255, 255, 255, 0.1)"
+    "inverse": "rgba(255, 255, 255, 0.113)"
   },
   "foreground": {
-    "body": "#082d35",
+    "canvas": "#082d35",
     "link": "#11596a",
     "neutral": {
       "default": "#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,8 +182,8 @@
 @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-foreground-body: #082d35;
+@value color-background-inverse: rgba(255, 255, 255, 0.113);
+@value color-foreground-canvas: #082d35;
 @value color-foreground-link: #11596a;
 @value color-foreground-neutral: #082d35;
 @value color-foreground-neutral-moderate: #223f44;
@@ -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 14:05:04 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,8 +188,8 @@
   --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-foreground-body: #082d35;
+  --color-background-inverse: rgba(255, 255, 255, 0.113);
+  --color-foreground-canvas: #082d35;
   --color-foreground-link: #11596a;
   --color-foreground-neutral: #082d35;
   --color-foreground-neutral-moderate: #223f44;
@@ -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,10 +233,10 @@ declare const tokens: {
       "default": "#e6ebec",
       "subtle": "#f3f5f6"
     },
-    "inverse": "rgba(255, 255, 255, 0.1)"
+    "inverse": "rgba(255, 255, 255, 0.113)"
   },
   "foreground": {
-    "body": "#082d35",
+    "canvas": "#082d35",
     "link": "#11596a",
     "neutral": {
       "default": "#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"
+      }
+    }
   }
 };