@apollo/brand - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

CHANGELOG.md

 # @apollo/brand
 
+## 0.2.6
+
+### Patch Changes
+
+- d81f7d4: Adds new tokens to replace `alpha` values and updates `bg` mappings for `dark` mode
+
 ## 0.2.5
@@ -4,0 +10,0 @@

dist/colors/primitives.d.ts

 export declare const orange: {
+    700: string;
     600: string;
@@ -38,2 +39,3 @@ 500: string;
 export declare const blue: {
+    600: string;
     500: string;
@@ -47,2 +49,3 @@ 400: string;
     500: string;
+    450: string;
     400: string;
@@ -54,2 +57,3 @@ 300: string;
 export declare const red: {
+    600: string;
     500: string;
@@ -62,2 +66,3 @@ 400: string;
 export declare const yellow: {
+    600: string;
     500: string;
@@ -70,2 +75,3 @@ 400: string;
 export declare const green: {
+    600: string;
     500: string;
@@ -78,2 +84,3 @@ 400: string;
 export declare const purple: {
+    600: string;
     500: string;
@@ -80,0 +87,0 @@ 400: string;

dist/colors/primitives.js

@@ -5,2 +5,3 @@ "use strict";
 exports.orange = {
+    700: "#59301D",
     600: "#652100",
@@ -42,2 +43,3 @@ 500: "#B03900",
 exports.blue = {
+    600: "#0D3352",
     500: "#00417D",
@@ -51,2 +53,3 @@ 400: "#005AAF",
     500: "#15252D",
+    450: "#182C35",
     400: "#254250",
@@ -58,2 +61,3 @@ 300: "#365E72",
 exports.red = {
+    600: "#4D282C",
     500: "#822727",
@@ -66,2 +70,3 @@ 400: "#D63530",
 exports.yellow = {
+    600: "#283022",
     500: "#7D6800",
@@ -74,2 +79,3 @@ 400: "#AF9200",
 exports.green = {
+    600: "#183130",
     500: "#22543D",
@@ -82,2 +88,3 @@ 400: "#25855A",
 exports.purple = {
+    600: "#321859",
     500: "#310050",
@@ -84,0 +91,0 @@ 400: "#56008B",

dist/colors/tokens.d.ts

@@ -1,2 +0,2 @@
-type Token = {
+export type ColorToken = {
     base: string;
@@ -284,10 +284,10 @@ dark: string;
 export declare const brand: {
-    nebula: Token;
-    primary: Token;
-    satellite: Token;
-    secondary: Token;
-    regolith: Token;
-    tertiary: Token;
-    horizon: Token;
-    accent: Token;
+    nebula: ColorToken;
+    primary: ColorToken;
+    satellite: ColorToken;
+    secondary: ColorToken;
+    regolith: ColorToken;
+    tertiary: ColorToken;
+    horizon: ColorToken;
+    accent: ColorToken;
 };
@@ -346,2 +346,1 @@ export declare const code: {
 };
-export {};

dist/colors/tokens.js

@@ -5,7 +5,2 @@ "use strict";
 const primitives_1 = require("./primitives");
-const toAlphaHex = (opacity) => {
-    return Math.round(opacity * 255)
-        .toString(16)
-        .toUpperCase();
-};
 exports.border = {
@@ -144,7 +139,7 @@ primary: {
         base: primitives_1.green[100],
-        dark: primitives_1.green[500] + toAlphaHex(0.3),
+        dark: primitives_1.green[600],
     },
     error: {
         base: primitives_1.red[100],
-        dark: primitives_1.red[400] + toAlphaHex(0.3),
+        dark: primitives_1.red[600],
     },
@@ -157,3 +152,3 @@ errorSelected: {
         base: primitives_1.orange[100],
-        dark: primitives_1.orange[400] + toAlphaHex(0.3),
+        dark: primitives_1.orange[700],
     },
@@ -166,7 +161,7 @@ warningSelected: {
         base: primitives_1.silver[400],
-        dark: primitives_1.navy[400] + toAlphaHex(0.3),
+        dark: primitives_1.navy[450],
     },
     info: {
         base: primitives_1.blue[100],
-        dark: primitives_1.blue[400] + toAlphaHex(0.3),
+        dark: primitives_1.blue[600],
     },
@@ -179,7 +174,7 @@ notice: {
         base: primitives_1.purple[100],
-        dark: primitives_1.purple[300],
+        dark: primitives_1.purple[600],
     },
     highlight: {
         base: primitives_1.yellow[100],
-        dark: primitives_1.yellow[500] + toAlphaHex(0.2),
+        dark: primitives_1.yellow[600],
     },
@@ -186,0 +181,0 @@ searchHighlight: {

package.json

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

src/colors/primitives.ts

 export const orange = {
+  700: "#59301D",
   600: "#652100",
@@ -44,2 +45,3 @@ 500: "#B03900",
 export const blue = {
+  600: "#0D3352",
   500: "#00417D",
@@ -54,2 +56,3 @@ 400: "#005AAF",
   500: "#15252D",
+  450: "#182C35",
   400: "#254250",
@@ -62,2 +65,3 @@ 300: "#365E72",
 export const red = {
+  600: "#4D282C",
   500: "#822727",
@@ -71,2 +75,3 @@ 400: "#D63530",
 export const yellow = {
+  600: "#283022",
   500: "#7D6800",
@@ -80,2 +85,3 @@ 400: "#AF9200",
 export const green = {
+  600: "#183130",
   500: "#22543D",
@@ -89,2 +95,3 @@ 400: "#25855A",
 export const purple = {
+  600: "#321859",
   500: "#310050",
@@ -91,0 +98,0 @@ 400: "#56008B",

src/colors/tokens.ts

@@ -15,3 +15,3 @@ import {
 
-type Token = {
+export type ColorToken = {
   base: string;
@@ -21,10 +21,4 @@ dark: string;
 
-type Tokens = Record<string, Token>;
+type Tokens = Record<string, ColorToken>;
 
-const toAlphaHex = (opacity: number) => {
-  return Math.round(opacity * 255)
-    .toString(16)
-    .toUpperCase();
-};
-
 export const border = {
@@ -166,7 +160,7 @@ primary: {
     base: green[100],
-    dark: green[500] + toAlphaHex(0.3),
+    dark: green[600],
   },
   error: {
     base: red[100],
-    dark: red[400] + toAlphaHex(0.3),
+    dark: red[600],
   },
@@ -179,3 +173,3 @@ errorSelected: {
     base: orange[100],
-    dark: orange[400] + toAlphaHex(0.3),
+    dark: orange[700],
   },
@@ -188,7 +182,7 @@ warningSelected: {
     base: silver[400],
-    dark: navy[400] + toAlphaHex(0.3),
+    dark: navy[450],
   },
   info: {
     base: blue[100],
-    dark: blue[400] + toAlphaHex(0.3),
+    dark: blue[600],
   },
@@ -201,7 +195,7 @@ notice: {
     base: purple[100],
-    dark: purple[300],
+    dark: purple[600],
   },
   highlight: {
     base: yellow[100],
-    dark: yellow[500] + toAlphaHex(0.2),
+    dark: yellow[600],
   },
@@ -313,3 +307,3 @@ searchHighlight: {
 
-const nebula: Token = {
+const nebula: ColorToken = {
   base: navy[500],
@@ -319,3 +313,3 @@ dark: navy[100],
 
-const satellite: Token = {
+const satellite: ColorToken = {
   base: gray[400],
@@ -325,3 +319,3 @@ dark: gray[400],
 
-const regolith: Token = {
+const regolith: ColorToken = {
   base: beige[500],
@@ -331,3 +325,3 @@ dark: beige[400],
 
-const horizon: Token = {
+const horizon: ColorToken = {
   base: orange[400],
@@ -334,0 +328,0 @@ dark: orange[300],

tsconfig.json

@@ -6,5 +6,3 @@ {
   },
-  "exclude": [
-    "dist"
-  ]
-}
+  "exclude": ["dist"]
+}

No alert changes

Improved metrics

Lines of code

1675

increased by0.54%

Worsened metrics

Total package byte prevSize

58484

decreased by-0.07%

No dependency changes