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

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,8 +183,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",
@@ -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 14:05:04 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,8 +189,8 @@ $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-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,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,10 +232,10 @@ export default {
       "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 @@ 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 14:05:04 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,8 +186,8 @@ $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-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;
@@ -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;

package/dist/internal/fillsWithTextColors.json

@@ -1,4 +1,48 @@
 [
+  {
+    "name": "CANVAS",
+    "palette": "canvas",
+    "textColors": [
+      {
+        "name": "NEUTRAL",
+        "rating": "AAA"
+      },
+      {
+        "name": "NEUTRAL_MODERATE",
+        "rating": "AAA"
+      },
+      {
+        "name": "NEUTRAL_SUBTLE",
+        "rating": "AA"
+      },
+      {
+        "name": "LINK",
+        "rating": "AAA"
+      }
+    ]
+  },
+  {
+    "name": "CANVAS_SUBTLE",
+    "palette": "canvas",
+    "textColors": [
+      {
+        "name": "NEUTRAL",
+        "rating": "AAA"
+      },
+      {
+        "name": "NEUTRAL_MODERATE",
+        "rating": "AAA"
+      },
+      {
+        "name": "NEUTRAL_SUBTLE",
+        "rating": "AA"
+      },
+      {
+        "name": "LINK",
+        "rating": "AAA"
+      }
+    ]
+  },
   {
     "name": "SURFACE",
     "palette": "surface",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volue/design-colors",
-  "version": "3.0.0-next.0",
+  "version": "3.0.0-next.2",
   "description": "Color primitives for Volue design primitives",
   "license": "UNLICENSED",
   "repository": {
@@ -60,15 +60,11 @@
     "format": "yarn run _prettier --write",
     "test": "run-p lint \"_prettier --check\"",
     "clean": "rimraf dist",
-    "_theo": "theo --setup theo.setup.js --transform web --dest dist",
     "build:tokens": "style-dictionary build",
     "build": "yarn run clean && yarn run build:tokens",
     "prepack": "yarn run build"
   },
   "devDependencies": {
-    "@fantasy-color/contrast-ratio-luminance": "2.1.0",
-    "@fantasy-color/from-hex": "2.1.0",
-    "@fantasy-color/luminance-rgb": "2.1.0",
     "change-case": "4.1.2",
     "color2k": "1.2.5",
     "eslint": "8.46.0",

package/src/functional.json

@@ -2,8 +2,14 @@
   "color": {
     "background": {
       "canvas": {
-        "value": "{color.background.neutral.minimal.value}",
-        "description": "Canvas background. Used for the background of your app."
+        "@": {
+          "value": "{color.background.neutral.minimal.value}",
+          "description": "Canvas background. Used for the background of your app."
+        },
+        "subtle": {
+          "value": "{color.background.neutral.subtle.@.value}",
+          "description": "Subtle canvas background. Used for the background of your app, e.g. when you create a card-based layout."
+        }
       },
       "surface": {
         "@": {
@@ -12,7 +18,7 @@
         },
         "subtle": {
           "value": "{color.background.neutral.moderate.@.value}",
-          "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."
         },
         "contrast": {
           "value": "{color.background.neutral.contrast.value}",
@@ -286,13 +292,13 @@
       "inverse": {
         "value": "{color.background.neutral.minimal.value}",
         "description": "Inverse background. Used for backgrounds of elements on a strong background.",
-        "alpha": 0.1
+        "alpha": 0.1125
       }
     },
     "foreground": {
-      "body": {
+      "canvas": {
         "value": "{color.foreground.neutral.@.value}",
-        "description": "Body foreground. Used as global default for all text."
+        "description": "Canvas foreground. Used for the default foreground of your app."
       },
       "link": {
         "value": "{color.foreground.accent.moderate.value}",

package/src/internal/fills.json

@@ -47,6 +47,15 @@
         }
       },
       "paletteGroups": {
+        "canvas": {
+          "@": {
+            "value": "{color.background.canvas.@.value}"
+          },
+          "subtle": {
+            "value": "{color.background.canvas.subtle.value}"
+          }
+        },
+
         "surface": {
           "@": {
             "value": "{color.background.surface.@.value}"

package/src/rgb-channels.json

@@ -0,0 +1,77 @@
+{
+  "color": {
+    "rgb": {
+      "background": {
+        "surface": {
+          "value": "{color.background.surface.@.value}"
+        },
+        "neutral": {
+          "@": {
+            "value": "{color.background.neutral.@.value}"
+          },
+          "bold": {
+            "value": "{color.background.neutral.bold.value}"
+          },
+          "strong": {
+            "value": "{color.background.neutral.strong.value}"
+          }
+        },
+        "accent": {
+          "@": {
+            "value": "{color.background.accent.@.value}"
+          },
+          "bold": {
+            "value": "{color.background.accent.bold.value}"
+          },
+          "strong": {
+            "value": "{color.background.accent.strong.@.value}"
+          }
+        },
+        "danger": {
+          "@": {
+            "value": "{color.background.danger.@.value}"
+          },
+          "bold": {
+            "value": "{color.background.danger.bold.value}"
+          },
+          "strong": {
+            "value": "{color.background.danger.strong.@.value}"
+          }
+        },
+        "warning": {
+          "@": {
+            "value": "{color.background.warning.@.value}"
+          },
+          "bold": {
+            "value": "{color.background.warning.bold.value}"
+          },
+          "strong": {
+            "value": "{color.background.warning.strong.@.value}"
+          }
+        },
+        "success": {
+          "@": {
+            "value": "{color.background.success.@.value}"
+          },
+          "bold": {
+            "value": "{color.background.success.bold.value}"
+          },
+          "strong": {
+            "value": "{color.background.success.strong.@.value}"
+          }
+        },
+        "info": {
+          "@": {
+            "value": "{color.background.info.@.value}"
+          },
+          "bold": {
+            "value": "{color.background.info.bold.value}"
+          },
+          "strong": {
+            "value": "{color.background.info.strong.@.value}"
+          }
+        }
+      }
+    }
+  }
+}