@primer/primitives 4.8.0-rc.1848ecd → 4.8.0-rc.bdc0e17

package/CHANGELOG.md

@@ -8,6 +8,10 @@
   - `light_protanopia`
   - `dark_protanopia`
 
+### Patch Changes
+
+- [#235](https://github.com/primer/primitives/pull/235) [`ac4edb8`](https://github.com/primer/primitives/commit/ac4edb8be96d885babfc09f8fae23d5e4458fd94) Thanks [@simurai](https://github.com/simurai)! - Add `canvasDefaultTransparent` app color variable
+
 ## 4.7.1
 
 ### Patch Changes

package/dist/js/colors/dark.d.ts

@@ -514,6 +514,7 @@ declare const _default: {
         gradientIn: string;
         gradientOut: string;
     };
+    canvasDefaultTransparent: string;
     marketingIcon: {
         primary: string;
         secondary: string;

package/dist/js/colors/dark.js

@@ -604,6 +604,7 @@ exports.default = {
         "gradientIn": "#0d1117",
         "gradientOut": "rgba(240,246,252,0)"
     },
+    "canvasDefaultTransparent": "rgba(13,17,23,0)",
     "marketingIcon": {
         "primary": "#79c0ff",
         "secondary": "#1f6feb"

package/dist/js/colors/dark_dimmed.d.ts

@@ -514,6 +514,7 @@ declare const _default: {
         gradientIn: string;
         gradientOut: string;
     };
+    canvasDefaultTransparent: string;
     marketingIcon: {
         primary: string;
         secondary: string;

package/dist/js/colors/dark_dimmed.js

@@ -604,6 +604,7 @@ exports.default = {
         "gradientIn": "#22272e",
         "gradientOut": "rgba(205,217,229,0)"
     },
+    "canvasDefaultTransparent": "rgba(34,39,46,0)",
     "marketingIcon": {
         "primary": "#6cb6ff",
         "secondary": "#316dca"

package/dist/js/colors/dark_high_contrast.d.ts

@@ -514,6 +514,7 @@ declare const _default: {
         gradientIn: string;
         gradientOut: string;
     };
+    canvasDefaultTransparent: string;
     marketingIcon: {
         primary: string;
         secondary: string;

package/dist/js/colors/dark_high_contrast.js

@@ -604,6 +604,7 @@ exports.default = {
         "gradientIn": "#0a0c10",
         "gradientOut": "rgba(255,255,255,0)"
     },
+    "canvasDefaultTransparent": "rgba(10,12,16,0)",
     "marketingIcon": {
         "primary": "#91cbff",
         "secondary": "#409eff"

package/dist/js/colors/dark_protanopia.d.ts

@@ -514,6 +514,7 @@ declare const _default: {
         gradientIn: string;
         gradientOut: string;
     };
+    canvasDefaultTransparent: string;
     marketingIcon: {
         primary: string;
         secondary: string;

package/dist/js/colors/dark_protanopia.js

@@ -604,6 +604,7 @@ exports.default = {
         "gradientIn": "#0d1117",
         "gradientOut": "rgba(240,246,252,0)"
     },
+    "canvasDefaultTransparent": "rgba(13,17,23,0)",
     "marketingIcon": {
         "primary": "#79c0ff",
         "secondary": "#1f6feb"

package/dist/js/colors/index.d.ts

@@ -515,6 +515,7 @@ declare const _default: {
             gradientIn: string;
             gradientOut: string;
         };
+        canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -1441,6 +1442,7 @@ declare const _default: {
             gradientIn: string;
             gradientOut: string;
         };
+        canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -2367,6 +2369,7 @@ declare const _default: {
             gradientIn: string;
             gradientOut: string;
         };
+        canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -3293,6 +3296,7 @@ declare const _default: {
             gradientIn: string;
             gradientOut: string;
         };
+        canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -4219,6 +4223,7 @@ declare const _default: {
             gradientIn: string;
             gradientOut: string;
         };
+        canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
             secondary: string;
@@ -5145,6 +5150,7 @@ declare const _default: {
             gradientIn: string;
             gradientOut: string;
         };
+        canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
             secondary: string;

package/dist/js/colors/light.d.ts

@@ -514,6 +514,7 @@ declare const _default: {
         gradientIn: string;
         gradientOut: string;
     };
+    canvasDefaultTransparent: string;
     marketingIcon: {
         primary: string;
         secondary: string;

package/dist/js/colors/light.js

@@ -604,6 +604,7 @@ exports.default = {
         "gradientIn": "#ffffff",
         "gradientOut": "rgba(255,255,255,0)"
     },
+    "canvasDefaultTransparent": "rgba(255,255,255,0)",
     "marketingIcon": {
         "primary": "#218bff",
         "secondary": "#54aeff"

package/dist/js/colors/light_protanopia.d.ts

@@ -514,6 +514,7 @@ declare const _default: {
         gradientIn: string;
         gradientOut: string;
     };
+    canvasDefaultTransparent: string;
     marketingIcon: {
         primary: string;
         secondary: string;

package/dist/js/colors/light_protanopia.js

@@ -604,6 +604,7 @@ exports.default = {
         "gradientIn": "#ffffff",
         "gradientOut": "rgba(255,255,255,0)"
     },
+    "canvasDefaultTransparent": "rgba(255,255,255,0)",
     "marketingIcon": {
         "primary": "#218bff",
         "secondary": "#54aeff"

package/dist/js/index.d.ts

@@ -516,6 +516,7 @@ declare const _default: {
                 gradientIn: string;
                 gradientOut: string;
             };
+            canvasDefaultTransparent: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -1442,6 +1443,7 @@ declare const _default: {
                 gradientIn: string;
                 gradientOut: string;
             };
+            canvasDefaultTransparent: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -2368,6 +2370,7 @@ declare const _default: {
                 gradientIn: string;
                 gradientOut: string;
             };
+            canvasDefaultTransparent: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -3294,6 +3297,7 @@ declare const _default: {
                 gradientIn: string;
                 gradientOut: string;
             };
+            canvasDefaultTransparent: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -4220,6 +4224,7 @@ declare const _default: {
                 gradientIn: string;
                 gradientOut: string;
             };
+            canvasDefaultTransparent: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;
@@ -5146,6 +5151,7 @@ declare const _default: {
                 gradientIn: string;
                 gradientOut: string;
             };
+            canvasDefaultTransparent: string;
             marketingIcon: {
                 primary: string;
                 secondary: string;

package/dist/json/colors/dark.json

@@ -602,6 +602,7 @@
     "gradientIn": "#0d1117",
     "gradientOut": "rgba(240,246,252,0)"
   },
+  "canvasDefaultTransparent": "rgba(13,17,23,0)",
   "marketingIcon": {
     "primary": "#79c0ff",
     "secondary": "#1f6feb"

package/dist/json/colors/dark_dimmed.json

@@ -602,6 +602,7 @@
     "gradientIn": "#22272e",
     "gradientOut": "rgba(205,217,229,0)"
   },
+  "canvasDefaultTransparent": "rgba(34,39,46,0)",
   "marketingIcon": {
     "primary": "#6cb6ff",
     "secondary": "#316dca"

package/dist/json/colors/dark_high_contrast.json

@@ -602,6 +602,7 @@
     "gradientIn": "#0a0c10",
     "gradientOut": "rgba(255,255,255,0)"
   },
+  "canvasDefaultTransparent": "rgba(10,12,16,0)",
   "marketingIcon": {
     "primary": "#91cbff",
     "secondary": "#409eff"

package/dist/json/colors/dark_protanopia.json

@@ -602,6 +602,7 @@
     "gradientIn": "#0d1117",
     "gradientOut": "rgba(240,246,252,0)"
   },
+  "canvasDefaultTransparent": "rgba(13,17,23,0)",
   "marketingIcon": {
     "primary": "#79c0ff",
     "secondary": "#1f6feb"

package/dist/json/colors/light.json

@@ -602,6 +602,7 @@
     "gradientIn": "#ffffff",
     "gradientOut": "rgba(255,255,255,0)"
   },
+  "canvasDefaultTransparent": "rgba(255,255,255,0)",
   "marketingIcon": {
     "primary": "#218bff",
     "secondary": "#54aeff"

package/dist/json/colors/light_protanopia.json

@@ -602,6 +602,7 @@
     "gradientIn": "#ffffff",
     "gradientOut": "rgba(255,255,255,0)"
   },
+  "canvasDefaultTransparent": "rgba(255,255,255,0)",
   "marketingIcon": {
     "primary": "#218bff",
     "secondary": "#54aeff"

package/dist/scss/colors/_dark.scss

@@ -425,6 +425,7 @@
     --color-intro-shelf-gradient-right: rgba(46,160,67,0.15);
     --color-intro-shelf-gradient-in: #0d1117;
     --color-intro-shelf-gradient-out: rgba(240,246,252,0);
+    --color-canvas-default-transparent: rgba(13,17,23,0);
     --color-marketing-icon-primary: #79c0ff;
     --color-marketing-icon-secondary: #1f6feb;
     --color-search-keyword-hl: rgba(210,153,34,0.4);

package/dist/scss/colors/_dark_dimmed.scss

@@ -425,6 +425,7 @@
     --color-intro-shelf-gradient-right: rgba(70,149,74,0.15);
     --color-intro-shelf-gradient-in: #22272e;
     --color-intro-shelf-gradient-out: rgba(205,217,229,0);
+    --color-canvas-default-transparent: rgba(34,39,46,0);
     --color-marketing-icon-primary: #6cb6ff;
     --color-marketing-icon-secondary: #316dca;
     --color-search-keyword-hl: rgba(198,144,38,0.4);

package/dist/scss/colors/_dark_high_contrast.scss

@@ -425,6 +425,7 @@
     --color-intro-shelf-gradient-right: rgba(9,180,58,0.15);
     --color-intro-shelf-gradient-in: #0a0c10;
     --color-intro-shelf-gradient-out: rgba(255,255,255,0);
+    --color-canvas-default-transparent: rgba(10,12,16,0);
     --color-marketing-icon-primary: #91cbff;
     --color-marketing-icon-secondary: #409eff;
     --color-search-keyword-hl: rgba(240,183,47,0.4);

package/dist/scss/colors/_dark_protanopia.scss

@@ -425,6 +425,7 @@
     --color-intro-shelf-gradient-right: rgba(21,133,253,0.15);
     --color-intro-shelf-gradient-in: #0d1117;
     --color-intro-shelf-gradient-out: rgba(240,246,252,0);
+    --color-canvas-default-transparent: rgba(13,17,23,0);
     --color-marketing-icon-primary: #79c0ff;
     --color-marketing-icon-secondary: #1f6feb;
     --color-search-keyword-hl: rgba(210,153,34,0.4);

package/dist/scss/colors/_light.scss

@@ -425,6 +425,7 @@
     --color-intro-shelf-gradient-right: #dafbe1;
     --color-intro-shelf-gradient-in: #ffffff;
     --color-intro-shelf-gradient-out: rgba(255,255,255,0);
+    --color-canvas-default-transparent: rgba(255,255,255,0);
     --color-marketing-icon-primary: #218bff;
     --color-marketing-icon-secondary: #54aeff;
     --color-search-keyword-hl: #fff8c5;

package/dist/scss/colors/_light_protanopia.scss

@@ -425,6 +425,7 @@
     --color-intro-shelf-gradient-right: #c0f6ff;
     --color-intro-shelf-gradient-in: #ffffff;
     --color-intro-shelf-gradient-out: rgba(255,255,255,0);
+    --color-canvas-default-transparent: rgba(255,255,255,0);
     --color-marketing-icon-primary: #218bff;
     --color-marketing-icon-secondary: #54aeff;
     --color-search-keyword-hl: #fff8c5;

package/dist/ts/colors/dark.ts

@@ -602,6 +602,7 @@ export default {
     "gradientIn": "#0d1117",
     "gradientOut": "rgba(240,246,252,0)"
   },
+  "canvasDefaultTransparent": "rgba(13,17,23,0)",
   "marketingIcon": {
     "primary": "#79c0ff",
     "secondary": "#1f6feb"

package/dist/ts/colors/dark_dimmed.ts

@@ -602,6 +602,7 @@ export default {
     "gradientIn": "#22272e",
     "gradientOut": "rgba(205,217,229,0)"
   },
+  "canvasDefaultTransparent": "rgba(34,39,46,0)",
   "marketingIcon": {
     "primary": "#6cb6ff",
     "secondary": "#316dca"

package/dist/ts/colors/dark_high_contrast.ts

@@ -602,6 +602,7 @@ export default {
     "gradientIn": "#0a0c10",
     "gradientOut": "rgba(255,255,255,0)"
   },
+  "canvasDefaultTransparent": "rgba(10,12,16,0)",
   "marketingIcon": {
     "primary": "#91cbff",
     "secondary": "#409eff"

package/dist/ts/colors/dark_protanopia.ts

@@ -602,6 +602,7 @@ export default {
     "gradientIn": "#0d1117",
     "gradientOut": "rgba(240,246,252,0)"
   },
+  "canvasDefaultTransparent": "rgba(13,17,23,0)",
   "marketingIcon": {
     "primary": "#79c0ff",
     "secondary": "#1f6feb"

package/dist/ts/colors/light.ts

@@ -602,6 +602,7 @@ export default {
     "gradientIn": "#ffffff",
     "gradientOut": "rgba(255,255,255,0)"
   },
+  "canvasDefaultTransparent": "rgba(255,255,255,0)",
   "marketingIcon": {
     "primary": "#218bff",
     "secondary": "#54aeff"

package/dist/ts/colors/light_protanopia.ts

@@ -602,6 +602,7 @@ export default {
     "gradientIn": "#ffffff",
     "gradientOut": "rgba(255,255,255,0)"
   },
+  "canvasDefaultTransparent": "rgba(255,255,255,0)",
   "marketingIcon": {
     "primary": "#218bff",
     "secondary": "#54aeff"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "4.8.0-rc.1848ecd",
+  "version": "4.8.0-rc.bdc0e17",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist"