@apollo/brand - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

 # @apollo/brand
 
+## 0.2.2
+
+### Patch Changes
+
+- d6a2049: Fix incorrect color tokens from design system and add new variants.
+
 ## 0.2.1
@@ -4,0 +10,0 @@

dist/colors/tokens.d.ts

@@ -10,2 +10,3 @@ type Token = {
     };
+    /** @deprecated This token has been removed. Please use `primary`. */
     secondary: {
@@ -43,2 +44,6 @@ base: string;
     };
+    highlight: {
+        base: string;
+        dark: string;
+    };
     focused: {
@@ -52,2 +57,6 @@ base: string;
     };
+    black: {
+        base: string;
+        dark: string;
+    };
 };
@@ -118,2 +127,6 @@ export declare const text: {
     };
+    black: {
+        base: string;
+        dark: string;
+    };
 };
@@ -161,10 +174,14 @@ export declare const bg: {
     };
-    input: {
+    highlight: {
         base: string;
         dark: string;
     };
-    disabled: {
+    tableHeader: {
         base: string;
         dark: string;
     };
+    input: {
+        base: string;
+        dark: string;
+    };
     white: {
@@ -174,2 +191,6 @@ base: string;
     };
+    black: {
+        base: string;
+        dark: string;
+    };
     selected: {
@@ -183,2 +204,6 @@ base: string;
     };
+    disabled: {
+        base: string;
+        dark: string;
+    };
 };
@@ -185,0 +210,0 @@ export declare const button: {

dist/colors/tokens.js

@@ -5,7 +5,13 @@ "use strict";
 const primitives_1 = require("./primitives");
+const toAlphaHex = (opacity) => {
+    return Math.round(opacity * 255)
+        .toString(16)
+        .toUpperCase();
+};
 exports.border = {
     primary: {
-        base: primitives_1.silver[500],
-        dark: primitives_1.navy[200],
+        base: primitives_1.silver[400],
+        dark: primitives_1.navy[400],
     },
+    /** @deprecated This token has been removed. Please use `primary`. */
     secondary: {
@@ -32,4 +38,4 @@ base: primitives_1.silver[400],
     neutral: {
-        base: primitives_1.gray[400],
-        dark: primitives_1.gray[200],
+        base: primitives_1.navy[400],
+        dark: primitives_1.navy[200],
     },
@@ -44,4 +50,8 @@ info: {
     },
+    highlight: {
+        base: primitives_1.yellow[400],
+        dark: primitives_1.yellow[400],
+    },
     focused: {
-        base: primitives_1.blue[200],
+        base: primitives_1.blue[400],
         dark: primitives_1.blue[200],
@@ -51,4 +61,8 @@ },
         base: primitives_1.silver[400],
-        dark: primitives_1.silver[200],
+        dark: primitives_1.navy[200],
     },
+    black: {
+        base: primitives_1.navy[400],
+        dark: primitives_1.navy[400],
+    },
 };
@@ -69,4 +83,4 @@ const heading = {
     placeholder: {
-        base: primitives_1.gray[300],
-        dark: primitives_1.navy[100],
+        base: primitives_1.gray[500],
+        dark: primitives_1.gray[200],
     },
@@ -79,4 +93,4 @@ heading,
     link: {
-        base: primitives_1.blue[400],
-        dark: primitives_1.blue[200],
+        base: primitives_1.gray[600],
+        dark: primitives_1.silver[500],
     },
@@ -89,7 +103,7 @@ success: {
         base: primitives_1.red[500],
-        dark: primitives_1.red[100],
+        dark: primitives_1.red[200],
     },
     warning: {
         base: primitives_1.orange[600],
-        dark: primitives_1.orange[100],
+        dark: primitives_1.orange[200],
     },
@@ -120,2 +134,6 @@ neutral: {
     },
+    black: {
+        base: primitives_1.gray[600],
+        dark: primitives_1.gray[600],
+    },
 };
@@ -133,7 +151,7 @@ exports.bg = {
         base: primitives_1.green[100],
-        dark: primitives_1.green[400],
+        dark: primitives_1.green[500] + toAlphaHex(0.3),
     },
     error: {
         base: primitives_1.red[100],
-        dark: primitives_1.red[400],
+        dark: primitives_1.red[400] + toAlphaHex(0.3),
     },
@@ -146,3 +164,3 @@ errorSelected: {
         base: primitives_1.orange[100],
-        dark: primitives_1.orange[400],
+        dark: primitives_1.orange[400] + toAlphaHex(0.3),
     },
@@ -155,7 +173,7 @@ warningSelected: {
         base: primitives_1.silver[400],
-        dark: primitives_1.navy[400],
+        dark: primitives_1.navy[400] + toAlphaHex(0.3),
     },
     info: {
         base: primitives_1.blue[100],
-        dark: primitives_1.blue[400],
+        dark: primitives_1.blue[400] + toAlphaHex(0.3),
     },
@@ -166,2 +184,10 @@ beta: {
     },
+    highlight: {
+        base: primitives_1.yellow[100],
+        dark: primitives_1.yellow[500] + toAlphaHex(0.2),
+    },
+    tableHeader: {
+        base: primitives_1.silver[300],
+        dark: primitives_1.navy[400],
+    },
     input: {
@@ -171,6 +197,2 @@ base: primitives_1.silver[100],
     },
-    disabled: {
-        base: primitives_1.silver[400],
-        dark: primitives_1.navy[400],
-    },
     white: {
@@ -180,5 +202,9 @@ base: primitives_1.silver[100],
     },
+    black: {
+        base: primitives_1.black[100],
+        dark: primitives_1.black[100],
+    },
     selected: {
-        base: primitives_1.navy[400],
-        dark: primitives_1.navy[200],
+        base: primitives_1.navy[300],
+        dark: primitives_1.navy[400],
     },
@@ -189,2 +215,6 @@ unselected: {
     },
+    disabled: {
+        base: primitives_1.silver[400],
+        dark: primitives_1.navy[400],
+    },
 };
@@ -218,3 +248,3 @@ exports.button = {
         base: primitives_1.silver[400],
-        dark: primitives_1.black[200],
+        dark: primitives_1.navy[400],
     },
@@ -266,3 +296,3 @@ };
 const satellite = {
-    base: primitives_1.gray[200],
+    base: primitives_1.gray[400],
     dark: primitives_1.gray[400],
@@ -269,0 +299,0 @@ };

package.json

 {
   "name": "@apollo/brand",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "UNLICENSED",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/colors/tokens.ts

@@ -22,7 +22,14 @@ import {
 
+const toAlphaHex = (opacity: number) => {
+  return Math.round(opacity * 255)
+    .toString(16)
+    .toUpperCase();
+};
+
 export const border = {
   primary: {
-    base: silver[500],
-    dark: navy[200],
+    base: silver[400],
+    dark: navy[400],
   },
+  /** @deprecated This token has been removed. Please use `primary`. */
   secondary: {
@@ -49,4 +56,4 @@ base: silver[400],
   neutral: {
-    base: gray[400],
-    dark: gray[200],
+    base: navy[400],
+    dark: navy[200],
   },
@@ -61,4 +68,8 @@ info: {
   },
+  highlight: {
+    base: yellow[400],
+    dark: yellow[400],
+  },
   focused: {
-    base: blue[200],
+    base: blue[400],
     dark: blue[200],
@@ -68,4 +79,8 @@ },
     base: silver[400],
-    dark: silver[200],
+    dark: navy[200],
   },
+  black: {
+    base: navy[400],
+    dark: navy[400],
+  },
 } satisfies Tokens;
@@ -88,4 +103,4 @@
   placeholder: {
-    base: gray[300],
-    dark: navy[100],
+    base: gray[500],
+    dark: gray[200],
   },
@@ -98,4 +113,4 @@ heading,
   link: {
-    base: blue[400],
-    dark: blue[200],
+    base: gray[600],
+    dark: silver[500],
   },
@@ -108,7 +123,7 @@ success: {
     base: red[500],
-    dark: red[100],
+    dark: red[200],
   },
   warning: {
     base: orange[600],
-    dark: orange[100],
+    dark: orange[200],
   },
@@ -139,2 +154,6 @@ neutral: {
   },
+  black: {
+    base: gray[600],
+    dark: gray[600],
+  },
 } satisfies Tokens;
@@ -153,7 +172,7 @@
     base: green[100],
-    dark: green[400],
+    dark: green[500] + toAlphaHex(0.3),
   },
   error: {
     base: red[100],
-    dark: red[400],
+    dark: red[400] + toAlphaHex(0.3),
   },
@@ -166,3 +185,3 @@ errorSelected: {
     base: orange[100],
-    dark: orange[400],
+    dark: orange[400] + toAlphaHex(0.3),
   },
@@ -175,7 +194,7 @@ warningSelected: {
     base: silver[400],
-    dark: navy[400],
+    dark: navy[400] + toAlphaHex(0.3),
   },
   info: {
     base: blue[100],
-    dark: blue[400],
+    dark: blue[400] + toAlphaHex(0.3),
   },
@@ -186,2 +205,10 @@ beta: {
   },
+  highlight: {
+    base: yellow[100],
+    dark: yellow[500] + toAlphaHex(0.2),
+  },
+  tableHeader: {
+    base: silver[300],
+    dark: navy[400],
+  },
   input: {
@@ -191,6 +218,2 @@ base: silver[100],
   },
-  disabled: {
-    base: silver[400],
-    dark: navy[400],
-  },
   white: {
@@ -200,5 +223,9 @@ base: silver[100],
   },
+  black: {
+    base: black[100],
+    dark: black[100],
+  },
   selected: {
-    base: navy[400],
-    dark: navy[200],
+    base: navy[300],
+    dark: navy[400],
   },
@@ -209,2 +236,6 @@ unselected: {
   },
+  disabled: {
+    base: silver[400],
+    dark: navy[400],
+  },
 } satisfies Tokens;
@@ -239,3 +270,3 @@
     base: silver[400],
-    dark: black[200],
+    dark: navy[400],
   },
@@ -290,3 +321,3 @@ } satisfies Tokens;
 const satellite: Token = {
-  base: gray[200],
+  base: gray[400],
   dark: gray[400],
@@ -293,0 +324,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

57579

increased by5.57%

Lines of code

1642

increased by5.46%

No dependency changes