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

package/dist/flat.common.js

@@ -122,6 +122,7 @@ const dataPink60 = "#e29dc9";
 const dataPink80 = "#e26ab5";
 const dataPink100 = "#bc3d91";
 const backgroundCanvas = "#ffffff";
+const backgroundCanvasSubtle = "#f9fafb";
 const backgroundSurface = "#ffffff";
 const backgroundSurfaceSubtle = "#f3f5f6";
 const backgroundSurfaceContrast = "#082d35";
@@ -181,8 +182,8 @@ const backgroundInfoStrong = "#007a92";
 const backgroundInfoStrongHover = "#005e72";
 const backgroundDisabled = "#e6ebec";
 const backgroundDisabledSubtle = "#f3f5f6";
-const backgroundInverse = "rgba(255, 255, 255, 0.1)";
-const foregroundBody = "#082d35";
+const backgroundInverse = "rgba(255, 255, 255, 0.113)";
+const foregroundCanvas = "#082d35";
 const foregroundLink = "#11596a";
 const foregroundNeutral = "#082d35";
 const foregroundNeutralModerate = "#223f44";
@@ -232,6 +233,25 @@ const borderDisabled = "#e6ebec";
 const borderDisabledSubtle = "#f3f5f6";
 const borderFocus = "#388597";
 const borderInverse = "rgba(255, 255, 255, 0.85)";
+const rgbBackgroundSurface = "255, 255, 255";
+const rgbBackgroundNeutral = "230, 235, 236";
+const rgbBackgroundNeutralBold = "83, 116, 123";
+const rgbBackgroundNeutralStrong = "34, 63, 68";
+const rgbBackgroundAccent = "232, 241, 243";
+const rgbBackgroundAccentBold = "91, 155, 169";
+const rgbBackgroundAccentStrong = "21, 112, 132";
+const rgbBackgroundDanger = "255, 239, 240";
+const rgbBackgroundDangerBold = "255, 59, 61";
+const rgbBackgroundDangerStrong = "223, 0, 31";
+const rgbBackgroundWarning = "255, 242, 218";
+const rgbBackgroundWarningBold = "255, 185, 0";
+const rgbBackgroundWarningStrong = "220, 159, 0";
+const rgbBackgroundSuccess = "219, 255, 223";
+const rgbBackgroundSuccessBold = "34, 160, 71";
+const rgbBackgroundSuccessStrong = "27, 130, 56";
+const rgbBackgroundInfo = "225, 249, 255";
+const rgbBackgroundInfoBold = "0, 150, 175";
+const rgbBackgroundInfoStrong = "0, 122, 146";
 
 module.exports = {
   colorWhite,
@@ -358,6 +378,7 @@ module.exports = {
   dataPink80,
   dataPink100,
   backgroundCanvas,
+  backgroundCanvasSubtle,
   backgroundSurface,
   backgroundSurfaceSubtle,
   backgroundSurfaceContrast,
@@ -418,7 +439,7 @@ module.exports = {
   backgroundDisabled,
   backgroundDisabledSubtle,
   backgroundInverse,
-  foregroundBody,
+  foregroundCanvas,
   foregroundLink,
   foregroundNeutral,
   foregroundNeutralModerate,
@@ -468,6 +489,25 @@ module.exports = {
   borderDisabledSubtle,
   borderFocus,
   borderInverse,
+  rgbBackgroundSurface,
+  rgbBackgroundNeutral,
+  rgbBackgroundNeutralBold,
+  rgbBackgroundNeutralStrong,
+  rgbBackgroundAccent,
+  rgbBackgroundAccentBold,
+  rgbBackgroundAccentStrong,
+  rgbBackgroundDanger,
+  rgbBackgroundDangerBold,
+  rgbBackgroundDangerStrong,
+  rgbBackgroundWarning,
+  rgbBackgroundWarningBold,
+  rgbBackgroundWarningStrong,
+  rgbBackgroundSuccess,
+  rgbBackgroundSuccessBold,
+  rgbBackgroundSuccessStrong,
+  rgbBackgroundInfo,
+  rgbBackgroundInfoBold,
+  rgbBackgroundInfoStrong,
   core: {
     colorWhite,
     colorGray0,
@@ -597,6 +637,7 @@ module.exports = {
   },
   background: {
     backgroundCanvas,
+    backgroundCanvasSubtle,
     backgroundSurface,
     backgroundSurfaceSubtle,
     backgroundSurfaceContrast,
@@ -659,7 +700,7 @@ module.exports = {
     backgroundInverse
   },
   foreground: {
-    foregroundBody,
+    foregroundCanvas,
     foregroundLink,
     foregroundNeutral,
     foregroundNeutralModerate,
@@ -711,5 +752,26 @@ module.exports = {
     borderDisabledSubtle,
     borderFocus,
     borderInverse
+  },
+  rgb: {
+    rgbBackgroundSurface,
+    rgbBackgroundNeutral,
+    rgbBackgroundNeutralBold,
+    rgbBackgroundNeutralStrong,
+    rgbBackgroundAccent,
+    rgbBackgroundAccentBold,
+    rgbBackgroundAccentStrong,
+    rgbBackgroundDanger,
+    rgbBackgroundDangerBold,
+    rgbBackgroundDangerStrong,
+    rgbBackgroundWarning,
+    rgbBackgroundWarningBold,
+    rgbBackgroundWarningStrong,
+    rgbBackgroundSuccess,
+    rgbBackgroundSuccessBold,
+    rgbBackgroundSuccessStrong,
+    rgbBackgroundInfo,
+    rgbBackgroundInfoBold,
+    rgbBackgroundInfoStrong
   }
 };

package/dist/flat.d.ts

@@ -122,6 +122,7 @@ export declare const dataPink60 = "#e29dc9";
 export declare const dataPink80 = "#e26ab5";
 export declare const dataPink100 = "#bc3d91";
 export declare const backgroundCanvas = "#ffffff";
+export declare const backgroundCanvasSubtle = "#f9fafb";
 export declare const backgroundSurface = "#ffffff";
 export declare const backgroundSurfaceSubtle = "#f3f5f6";
 export declare const backgroundSurfaceContrast = "#082d35";
@@ -181,8 +182,8 @@ export declare const backgroundInfoStrong = "#007a92";
 export declare const backgroundInfoStrongHover = "#005e72";
 export declare const backgroundDisabled = "#e6ebec";
 export declare const backgroundDisabledSubtle = "#f3f5f6";
-export declare const backgroundInverse = "rgba(255, 255, 255, 0.1)";
-export declare const foregroundBody = "#082d35";
+export declare const backgroundInverse = "rgba(255, 255, 255, 0.113)";
+export declare const foregroundCanvas = "#082d35";
 export declare const foregroundLink = "#11596a";
 export declare const foregroundNeutral = "#082d35";
 export declare const foregroundNeutralModerate = "#223f44";
@@ -232,6 +233,25 @@ export declare const borderDisabled = "#e6ebec";
 export declare const borderDisabledSubtle = "#f3f5f6";
 export declare const borderFocus = "#388597";
 export declare const borderInverse = "rgba(255, 255, 255, 0.85)";
+export declare const rgbBackgroundSurface = "255, 255, 255";
+export declare const rgbBackgroundNeutral = "230, 235, 236";
+export declare const rgbBackgroundNeutralBold = "83, 116, 123";
+export declare const rgbBackgroundNeutralStrong = "34, 63, 68";
+export declare const rgbBackgroundAccent = "232, 241, 243";
+export declare const rgbBackgroundAccentBold = "91, 155, 169";
+export declare const rgbBackgroundAccentStrong = "21, 112, 132";
+export declare const rgbBackgroundDanger = "255, 239, 240";
+export declare const rgbBackgroundDangerBold = "255, 59, 61";
+export declare const rgbBackgroundDangerStrong = "223, 0, 31";
+export declare const rgbBackgroundWarning = "255, 242, 218";
+export declare const rgbBackgroundWarningBold = "255, 185, 0";
+export declare const rgbBackgroundWarningStrong = "220, 159, 0";
+export declare const rgbBackgroundSuccess = "219, 255, 223";
+export declare const rgbBackgroundSuccessBold = "34, 160, 71";
+export declare const rgbBackgroundSuccessStrong = "27, 130, 56";
+export declare const rgbBackgroundInfo = "225, 249, 255";
+export declare const rgbBackgroundInfoBold = "0, 150, 175";
+export declare const rgbBackgroundInfoStrong = "0, 122, 146";
 export declare const core: {
   colorWhite: "#ffffff";
   colorGray0: "#f9fafb";
@@ -361,6 +381,7 @@ export declare const data: {
 };
 export declare const background: {
   backgroundCanvas: "#ffffff";
+  backgroundCanvasSubtle: "#f9fafb";
   backgroundSurface: "#ffffff";
   backgroundSurfaceSubtle: "#f3f5f6";
   backgroundSurfaceContrast: "#082d35";
@@ -420,10 +441,10 @@ export declare const background: {
   backgroundInfoStrongHover: "#005e72";
   backgroundDisabled: "#e6ebec";
   backgroundDisabledSubtle: "#f3f5f6";
-  backgroundInverse: "rgba(255, 255, 255, 0.1)";
+  backgroundInverse: "rgba(255, 255, 255, 0.113)";
 };
 export declare const foreground: {
-  foregroundBody: "#082d35";
+  foregroundCanvas: "#082d35";
   foregroundLink: "#11596a";
   foregroundNeutral: "#082d35";
   foregroundNeutralModerate: "#223f44";
@@ -475,4 +496,25 @@ export declare const border: {
   borderDisabledSubtle: "#f3f5f6";
   borderFocus: "#388597";
   borderInverse: "rgba(255, 255, 255, 0.85)";
+};
+export declare const rgb: {
+  rgbBackgroundSurface: "255, 255, 255";
+  rgbBackgroundNeutral: "230, 235, 236";
+  rgbBackgroundNeutralBold: "83, 116, 123";
+  rgbBackgroundNeutralStrong: "34, 63, 68";
+  rgbBackgroundAccent: "232, 241, 243";
+  rgbBackgroundAccentBold: "91, 155, 169";
+  rgbBackgroundAccentStrong: "21, 112, 132";
+  rgbBackgroundDanger: "255, 239, 240";
+  rgbBackgroundDangerBold: "255, 59, 61";
+  rgbBackgroundDangerStrong: "223, 0, 31";
+  rgbBackgroundWarning: "255, 242, 218";
+  rgbBackgroundWarningBold: "255, 185, 0";
+  rgbBackgroundWarningStrong: "220, 159, 0";
+  rgbBackgroundSuccess: "219, 255, 223";
+  rgbBackgroundSuccessBold: "34, 160, 71";
+  rgbBackgroundSuccessStrong: "27, 130, 56";
+  rgbBackgroundInfo: "225, 249, 255";
+  rgbBackgroundInfoBold: "0, 150, 175";
+  rgbBackgroundInfoStrong: "0, 122, 146";
 };

package/dist/flat.module.js

@@ -122,6 +122,7 @@ export const dataPink60 = "#e29dc9";
 export const dataPink80 = "#e26ab5";
 export const dataPink100 = "#bc3d91";
 export const backgroundCanvas = "#ffffff";
+export const backgroundCanvasSubtle = "#f9fafb";
 export const backgroundSurface = "#ffffff";
 export const backgroundSurfaceSubtle = "#f3f5f6";
 export const backgroundSurfaceContrast = "#082d35";
@@ -181,8 +182,8 @@ export const backgroundInfoStrong = "#007a92";
 export const backgroundInfoStrongHover = "#005e72";
 export const backgroundDisabled = "#e6ebec";
 export const backgroundDisabledSubtle = "#f3f5f6";
-export const backgroundInverse = "rgba(255, 255, 255, 0.1)";
-export const foregroundBody = "#082d35";
+export const backgroundInverse = "rgba(255, 255, 255, 0.113)";
+export const foregroundCanvas = "#082d35";
 export const foregroundLink = "#11596a";
 export const foregroundNeutral = "#082d35";
 export const foregroundNeutralModerate = "#223f44";
@@ -232,6 +233,25 @@ export const borderDisabled = "#e6ebec";
 export const borderDisabledSubtle = "#f3f5f6";
 export const borderFocus = "#388597";
 export const borderInverse = "rgba(255, 255, 255, 0.85)";
+export const rgbBackgroundSurface = "255, 255, 255";
+export const rgbBackgroundNeutral = "230, 235, 236";
+export const rgbBackgroundNeutralBold = "83, 116, 123";
+export const rgbBackgroundNeutralStrong = "34, 63, 68";
+export const rgbBackgroundAccent = "232, 241, 243";
+export const rgbBackgroundAccentBold = "91, 155, 169";
+export const rgbBackgroundAccentStrong = "21, 112, 132";
+export const rgbBackgroundDanger = "255, 239, 240";
+export const rgbBackgroundDangerBold = "255, 59, 61";
+export const rgbBackgroundDangerStrong = "223, 0, 31";
+export const rgbBackgroundWarning = "255, 242, 218";
+export const rgbBackgroundWarningBold = "255, 185, 0";
+export const rgbBackgroundWarningStrong = "220, 159, 0";
+export const rgbBackgroundSuccess = "219, 255, 223";
+export const rgbBackgroundSuccessBold = "34, 160, 71";
+export const rgbBackgroundSuccessStrong = "27, 130, 56";
+export const rgbBackgroundInfo = "225, 249, 255";
+export const rgbBackgroundInfoBold = "0, 150, 175";
+export const rgbBackgroundInfoStrong = "0, 122, 146";
 export const core = {
   colorWhite,
   colorGray0,
@@ -361,6 +381,7 @@ export const data = {
 };
 export const background = {
   backgroundCanvas,
+  backgroundCanvasSubtle,
   backgroundSurface,
   backgroundSurfaceSubtle,
   backgroundSurfaceContrast,
@@ -423,7 +444,7 @@ export const background = {
   backgroundInverse
 };
 export const foreground = {
-  foregroundBody,
+  foregroundCanvas,
   foregroundLink,
   foregroundNeutral,
   foregroundNeutralModerate,
@@ -475,4 +496,25 @@ export const border = {
   borderDisabledSubtle,
   borderFocus,
   borderInverse
+};
+export const rgb = {
+  rgbBackgroundSurface,
+  rgbBackgroundNeutral,
+  rgbBackgroundNeutralBold,
+  rgbBackgroundNeutralStrong,
+  rgbBackgroundAccent,
+  rgbBackgroundAccentBold,
+  rgbBackgroundAccentStrong,
+  rgbBackgroundDanger,
+  rgbBackgroundDangerBold,
+  rgbBackgroundDangerStrong,
+  rgbBackgroundWarning,
+  rgbBackgroundWarningBold,
+  rgbBackgroundWarningStrong,
+  rgbBackgroundSuccess,
+  rgbBackgroundSuccessBold,
+  rgbBackgroundSuccessStrong,
+  rgbBackgroundInfo,
+  rgbBackgroundInfoBold,
+  rgbBackgroundInfoStrong
 };

package/dist/generic.common.js

@@ -1119,7 +1119,20 @@ module.exports = {
       "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 @@ module.exports = {
     {
       "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 @@ module.exports = {
       ]
     },
     {
-      "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 @@ module.exports = {
   "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 @@ module.exports = {
         "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"
+      ]
+    }
   ]
 };