@apollo/brand - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

CHANGELOG.md

 # @apollo/brand
 
+## 0.2.0
+
+### Minor Changes
+
+- 4182a75: update semantic tokens: color changes, remove control, add flowchart
+
 ## 0.1.2
@@ -4,0 +10,0 @@

dist/colors/tokens.d.ts

@@ -104,2 +104,6 @@ type Token = {
     };
+    white: {
+        base: string;
+        dark: string;
+    };
 };
@@ -155,39 +159,37 @@ export declare const bg: {
     };
-};
-export declare const button: {
-    primary: {
+    white: {
         base: string;
         dark: string;
     };
-    primaryHover: {
+    selected: {
         base: string;
         dark: string;
     };
-    destructive: {
+    unselected: {
         base: string;
         dark: string;
     };
-    destructiveHover: {
+};
+export declare const button: {
+    primary: {
         base: string;
         dark: string;
     };
-    secondary: {
+    primaryHover: {
         base: string;
         dark: string;
     };
-    secondaryHover: {
+    destructive: {
         base: string;
         dark: string;
     };
-    disabled: {
+    destructiveHover: {
         base: string;
         dark: string;
     };
-};
-export declare const control: {
-    selected: {
+    secondary: {
         base: string;
         dark: string;
     };
-    unselected: {
+    secondaryHover: {
         base: string;
@@ -238,2 +240,6 @@ dark: string;
     };
+    white: {
+        base: string;
+        dark: string;
+    };
 };
@@ -251,27 +257,27 @@ export declare const brand: {
 export declare const code: {
-    primary: {
+    a: {
         base: string;
         dark: string;
     };
-    regularTypes: {
+    b: {
         base: string;
         dark: string;
     };
-    returnTypes: {
+    c: {
         base: string;
         dark: string;
     };
-    fields: {
+    d: {
         base: string;
         dark: string;
     };
-    directives: {
+    e: {
         base: string;
         dark: string;
     };
-    comments: {
+    f: {
         base: string;
         dark: string;
     };
-    descriptions: {
+    g: {
         base: string;
@@ -281,2 +287,24 @@ dark: string;
 };
+export declare const flowchart: {
+    text: {
+        base: string;
+        dark: string;
+    };
+    a: {
+        base: string;
+        dark: string;
+    };
+    b: {
+        base: string;
+        dark: string;
+    };
+    c: {
+        base: string;
+        dark: string;
+    };
+    e: {
+        base: string;
+        dark: string;
+    };
+};
 export {};

dist/colors/tokens.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.code = exports.brand = exports.icon = exports.control = exports.button = exports.bg = exports.text = exports.border = void 0;
+exports.flowchart = exports.code = exports.brand = exports.icon = exports.button = exports.bg = exports.text = exports.border = void 0;
 const primitives_1 = require("./primitives");
@@ -8,7 +8,7 @@ exports.border = {
         base: primitives_1.silver[500],
-        dark: primitives_1.navy[400],
+        dark: primitives_1.navy[200],
     },
     secondary: {
         base: primitives_1.silver[400],
-        dark: primitives_1.navy[200],
+        dark: primitives_1.navy[300],
     },
@@ -102,5 +102,9 @@ hover: {
     inverted: {
-        base: primitives_1.white,
+        base: primitives_1.silver[100],
         dark: primitives_1.navy[500],
     },
+    white: {
+        base: primitives_1.silver[100],
+        dark: primitives_1.silver[100],
+    },
 };
@@ -118,3 +122,3 @@ exports.bg = {
         base: primitives_1.green[100],
-        dark: primitives_1.green[200],
+        dark: primitives_1.green[400],
     },
@@ -131,3 +135,3 @@ error: {
         base: primitives_1.orange[100],
-        dark: primitives_1.orange[500],
+        dark: primitives_1.orange[400],
     },
@@ -151,3 +155,3 @@ warningSelected: {
     input: {
-        base: primitives_1.white,
+        base: primitives_1.silver[100],
         dark: primitives_1.navy[400],
@@ -157,4 +161,16 @@ },
         base: primitives_1.silver[400],
-        dark: primitives_1.black[200],
+        dark: primitives_1.navy[400],
     },
+    white: {
+        base: primitives_1.silver[100],
+        dark: primitives_1.silver[100],
+    },
+    selected: {
+        base: primitives_1.navy[400],
+        dark: primitives_1.navy[200],
+    },
+    unselected: {
+        base: primitives_1.gray[500],
+        dark: primitives_1.gray[400],
+    },
 };
@@ -179,3 +195,3 @@ exports.button = {
     secondary: {
-        base: primitives_1.white,
+        base: primitives_1.silver[100],
         dark: primitives_1.black[100],
@@ -192,21 +208,4 @@ },
 };
-exports.control = {
-    selected: {
-        base: primitives_1.orange[300],
-        dark: primitives_1.orange[400],
-    },
-    unselected: {
-        base: primitives_1.gray[400],
-        dark: primitives_1.navy[300],
-    },
-    disabled: {
-        base: primitives_1.orange[200],
-        dark: primitives_1.orange[200],
-    },
-};
 exports.icon = {
-    primary: {
-        base: primitives_1.gray[600],
-        dark: primitives_1.silver[500],
-    },
+    primary: exports.text.primary,
     secondary: {
@@ -237,13 +236,17 @@ base: primitives_1.gray[500],
     disabled: {
-        base: primitives_1.silver[400],
+        base: primitives_1.gray[200],
         dark: primitives_1.navy[300],
     },
     inverted: {
-        base: primitives_1.white,
+        base: primitives_1.silver[100],
         dark: primitives_1.navy[500],
     },
+    white: {
+        base: primitives_1.silver[100],
+        dark: primitives_1.silver[100],
+    },
 };
 const nebula = {
     base: primitives_1.navy[500],
-    dark: primitives_1.navy[300],
+    dark: primitives_1.navy[100],
 };
@@ -255,3 +258,3 @@ const satellite = {
 const regolith = {
-    base: primitives_1.beige[400],
+    base: primitives_1.beige[500],
     dark: primitives_1.beige[400],
@@ -274,27 +277,27 @@ };
 exports.code = {
-    primary: {
+    a: {
         base: primitives_1.gray[500],
         dark: primitives_1.gray[200],
     },
-    regularTypes: {
+    b: {
         base: primitives_1.blue[400],
         dark: primitives_1.blue[200],
     },
-    returnTypes: {
+    c: {
         base: primitives_1.purple[300],
         dark: primitives_1.purple[200],
     },
-    fields: {
+    d: {
         base: primitives_1.green[500],
         dark: primitives_1.green[300],
     },
-    directives: {
+    e: {
         base: primitives_1.yellow[500],
         dark: primitives_1.yellow[300],
     },
-    comments: {
+    f: {
         base: primitives_1.navy[300],
         dark: primitives_1.navy[100],
     },
-    descriptions: {
+    g: {
         base: primitives_1.orange[500],
@@ -304,2 +307,15 @@ dark: primitives_1.orange[200],
 };
+exports.flowchart = {
+    text: exports.text.primary,
+    a: exports.code.e,
+    b: exports.code.d,
+    c: {
+        base: primitives_1.orange[400],
+        dark: primitives_1.orange[300],
+    },
+    e: {
+        base: primitives_1.blue[300],
+        dark: primitives_1.blue[200],
+    },
+};
 //# sourceMappingURL=tokens.js.map

package.json

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

src/colors/tokens.ts

@@ -12,3 +12,2 @@ import {
   silver,
-  white,
   yellow,
@@ -22,10 +21,12 @@ } from "./primitives";
 
+type Tokens = Record<string, Token>;
+
 export const border = {
   primary: {
     base: silver[500],
-    dark: navy[400],
+    dark: navy[200],
   },
   secondary: {
     base: silver[400],
-    dark: navy[200],
+    dark: navy[300],
   },
@@ -68,3 +69,3 @@ hover: {
   },
-} satisfies Record<string, Token>;
+} satisfies Tokens;
 
@@ -121,6 +122,10 @@ export const text = {
   inverted: {
-    base: white,
+    base: silver[100],
     dark: navy[500],
   },
-} satisfies Record<string, Token>;
+  white: {
+    base: silver[100],
+    dark: silver[100],
+  },
+} satisfies Tokens;
 
@@ -138,3 +143,3 @@ export const bg = {
     base: green[100],
-    dark: green[200],
+    dark: green[400],
   },
@@ -151,3 +156,3 @@ error: {
     base: orange[100],
-    dark: orange[500],
+    dark: orange[400],
   },
@@ -171,3 +176,3 @@ warningSelected: {
   input: {
-    base: white,
+    base: silver[100],
     dark: navy[400],
@@ -177,5 +182,17 @@ },
     base: silver[400],
-    dark: black[200],
+    dark: navy[400],
   },
-} satisfies Record<string, Token>;
+  white: {
+    base: silver[100],
+    dark: silver[100],
+  },
+  selected: {
+    base: navy[400],
+    dark: navy[200],
+  },
+  unselected: {
+    base: gray[500],
+    dark: gray[400],
+  },
+} satisfies Tokens;
 
@@ -200,3 +217,3 @@ export const button = {
   secondary: {
-    base: white,
+    base: silver[100],
     dark: black[100],
@@ -212,24 +229,6 @@ },
   },
-} satisfies Record<string, Token>;
+} satisfies Tokens;
 
-export const control = {
-  selected: {
-    base: orange[300],
-    dark: orange[400],
-  },
-  unselected: {
-    base: gray[400],
-    dark: navy[300],
-  },
-  disabled: {
-    base: orange[200],
-    dark: orange[200],
-  },
-} satisfies Record<string, Token>;
-
 export const icon = {
-  primary: {
-    base: gray[600],
-    dark: silver[500],
-  },
+  primary: text.primary,
   secondary: {
@@ -260,14 +259,18 @@ base: gray[500],
   disabled: {
-    base: silver[400],
+    base: gray[200],
     dark: navy[300],
   },
   inverted: {
-    base: white,
+    base: silver[100],
     dark: navy[500],
   },
-} satisfies Record<string, Token>;
+  white: {
+    base: silver[100],
+    dark: silver[100],
+  },
+} satisfies Tokens;
 
 const nebula: Token = {
   base: navy[500],
-  dark: navy[300],
+  dark: navy[100],
 };
@@ -281,3 +284,3 @@
 const regolith: Token = {
-  base: beige[400],
+  base: beige[500],
   dark: beige[400],
@@ -300,33 +303,47 @@ };
   accent: horizon,
-} satisfies Record<string, Token>;
+} satisfies Tokens;
 
 export const code = {
-  primary: {
+  a: {
     base: gray[500],
     dark: gray[200],
   },
-  regularTypes: {
+  b: {
     base: blue[400],
     dark: blue[200],
   },
-  returnTypes: {
+  c: {
     base: purple[300],
     dark: purple[200],
   },
-  fields: {
+  d: {
     base: green[500],
     dark: green[300],
   },
-  directives: {
+  e: {
     base: yellow[500],
     dark: yellow[300],
   },
-  comments: {
+  f: {
     base: navy[300],
     dark: navy[100],
   },
-  descriptions: {
+  g: {
     base: orange[500],
     dark: orange[200],
   },
-} satisfies Record<string, Token>;
+} satisfies Tokens;
+
+export const flowchart = {
+  text: text.primary,
+  a: code.e,
+  b: code.d,
+  c: {
+    base: orange[400],
+    dark: orange[300],
+  },
+  e: {
+    base: blue[300],
+    dark: blue[200],
+  },
+};

No alert changes

Improved metrics

Total package byte prevSize

54113

increased by2.63%

Lines of code

1540

increased by4.05%

No dependency changes