@primer/primitives - npm Package Compare versions

Comparing version 0.0.0-a94bc22 to 0.0.0-aa92213

dist/js/colors/dark.d.ts

@@ -37,2 +37,3 @@ declare const _default: {
         warning: string;
+        white: string;
     };
@@ -62,2 +63,3 @@ icon: {
         canvasInverse: string;
+        canvasInset: string;
         primary: string;
@@ -77,6 +79,6 @@ secondary: string;
     shadow: {
-        small: string[];
-        medium: string[];
-        large: string[];
-        extraLarge: string[];
+        small: string;
+        medium: string;
+        large: string;
+        extraLarge: string;
         highlight: string;
@@ -102,22 +104,18 @@ inset: string;
             border: string;
-            shadow: string[];
+            shadow: string;
         };
     };
     fade: {
-        black: {
-            10: string;
-            15: string;
-            30: string;
-            50: string;
-            70: string;
-            85: string;
-        };
-        white: {
-            10: string;
-            15: string;
-            30: string;
-            50: string;
-            70: string;
-            85: string;
-        };
+        black10: string;
+        black15: string;
+        black30: string;
+        black50: string;
+        black70: string;
+        black85: string;
+        white10: string;
+        white15: string;
+        white30: string;
+        white50: string;
+        white70: string;
+        white85: string;
     };
@@ -153,3 +151,3 @@ alert: {
         border: string;
-        shadow: string[];
+        shadow: string;
         rowBorder: string;
@@ -161,26 +159,32 @@ };
     btn: {
+        text: string;
         bg: string;
         border: string;
-        text: string;
-        ic: string;
         shadow: string;
-        shadowHighlight: string;
-        bgHover: string;
-        bgActive: string;
-        shadowActive: string[];
-        shadowInputFocus: string[];
+        insetShadow: string;
+        hoverBg: string;
+        hoverBorder: string;
+        selectedBg: string;
+        focusBg: string;
+        focusBorder: string;
+        focusShadow: string;
+        shadowActive: string;
+        shadowInputFocus: string;
         primary: {
+            text: string;
             bg: string;
             border: string;
-            borderDisabled: string;
-            text: string;
-            ic: string;
             shadow: string;
-            shadowHighlight: string;
-            shadowSelected: string;
-            bgHover: string;
-            bgActive: string;
-            bgDisabled: string;
+            insetShadow: string;
+            hoverBg: string;
+            hoverBorder: string;
+            selectedBg: string;
+            selectedShadow: string;
             disabledText: string;
-            disabledShadow: string;
+            disabledBg: string;
+            disabledBorder: string;
+            focusBg: string;
+            focusBorder: string;
+            focusShadow: string;
+            icon: string;
             counterBg: string;
@@ -193,4 +197,4 @@ };
             hoverBorder: string;
-            hoverShadow: string[];
-            hoverInsetShadow: string[];
+            hoverShadow: string;
+            hoverInsetShadow: string;
             hoverCounterBg: string;
@@ -200,6 +204,8 @@ selectedText: string;
             selectedBorder: string;
-            selectedShadow: string[];
+            selectedShadow: string;
             disabledText: string;
+            disabledBg: string;
             disabledCounterBg: string;
-            focusShadow: string[];
+            focusBorder: string;
+            focusShadow: string;
             counterBg: string;
@@ -218,6 +224,8 @@ };
             selectedBorder: string;
-            selectedShadow: string[];
+            selectedShadow: string;
             disabledText: string;
+            disabledBg: string;
             disabledCounterBg: string;
-            focusShadow: string[];
+            focusBorder: string;
+            focusShadow: string;
             counterBg: string;
@@ -241,3 +249,3 @@ };
         border: string;
-        shadow: string[];
+        shadow: string;
     };
@@ -271,7 +279,2 @@ label: {
     };
-    topic: {
-        tagBg: string;
-        tagBorder: string;
-        tagText: string;
-    };
     input: {
@@ -308,3 +311,3 @@ bg: string;
         stackFadeMore: string;
-        childShadow: string[];
+        childShadow: string;
     };
@@ -324,3 +327,3 @@ toast: {
         borderSecondary: string;
-        shadow: string[];
+        shadow: string;
         backdropBg: string;
@@ -416,19 +419,47 @@ backdropBorder: string;
     };
-    iconFolder: string;
-    hlAuthorBg: string;
-    hlAuthorBorder: string;
-    logoSubdued: string;
-    discussionBorder: string;
-    diff: {
+    diffstat: {
         neutralBg: string;
         neutralBorder: string;
         deletionBg: string;
-        deletionBgStrong: string;
         deletionBorder: string;
-        deletionBorderStrong: string;
         additionBg: string;
-        additionBgStrong: string;
         additionBorder: string;
-        additionBorderStrong: string;
     };
+    iconFolder: string;
+    hlAuthorBg: string;
+    hlAuthorBorder: string;
+    logoSubdued: string;
+    discussionBorder: string;
+    diffBlob: {
+        numText: string;
+        numHoverText: string;
+        addition: {
+            numBg: string;
+            lineBg: string;
+            wordBg: string;
+        };
+        deletion: {
+            numBg: string;
+            lineBg: string;
+            wordBg: string;
+        };
+        hunk: {
+            text: string;
+            numBg: string;
+            lineBg: string;
+        };
+        emptyBlockBg: string;
+        selectedLineHighlightBg: string;
+        selectedLineHighlightBorder: string;
+        expander: {
+            icon: string;
+            hoverIcon: string;
+            hoverBg: string;
+        };
+        commentButton: {
+            icon: string;
+            bg: string;
+            gradientBg: string;
+        };
+    };
     globalNav: {
@@ -482,3 +513,35 @@ logo: string;
     };
+    topicTag: {
+        text: string;
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+    };
+    mergeBox: {
+        successIconBg: string;
+        successIconText: string;
+        successIconBorder: string;
+        successIndicatorBg: string;
+        successIndicatorBorder: string;
+        mergedIconBg: string;
+        mergedIconText: string;
+        mergedIconBorder: string;
+        mergedBoxBorder: string;
+        neutralIconBg: string;
+        neutralIconText: string;
+        neutralIconBorder: string;
+        neutralIndicatorBg: string;
+        neutralIndicatorBorder: string;
+        warningIconBg: string;
+        warningIconText: string;
+        warningIconBorder: string;
+        warningBoxBorder: string;
+        warningMergeHighlight: string;
+        errorIconBg: string;
+        errorIconText: string;
+        errorIconBorder: string;
+        errorIndicatorBg: string;
+        errorIndicatorBorder: string;
+    };
 };
 export default _default;

dist/js/colors/dark.js

@@ -214,3 +214,4 @@ "use strict";
         "success": "#56d364",
-        "warning": "#e3b341"
+        "warning": "#e3b341",
+        "white": "#f0f6fc"
     },
@@ -240,2 +241,3 @@ "icon": {
         "canvasInverse": "#f0f6fc",
+        "canvasInset": "#06090f",
         "primary": "#0d1117",
@@ -255,28 +257,8 @@ "secondary": "#0d1117",
     "shadow": {
-        "small": [
-            "0",
-            "1px",
-            "0",
-            "rgba(0,0,0,0)"
-        ],
-        "medium": [
-            "0",
-            "3px",
-            "6px",
-            "#010409"
-        ],
-        "large": [
-            "0",
-            "8px",
-            "24px",
-            "#010409"
-        ],
-        "extraLarge": [
-            "0",
-            "12px",
-            "48px",
-            "#010409"
-        ],
-        "highlight": "rgba(0,0,0,0)",
-        "inset": "rgba(0,0,0,0)"
+        "small": "0 0 rgba(0,0,0,0)",
+        "medium": "0 3px 6px #010409",
+        "large": "0 8px 24px #010409",
+        "extraLarge": "0 12px 48px #010409",
+        "highlight": "0 0 rgba(0,0,0,0)",
+        "inset": "0 0 rgba(0,0,0,0)"
     },
@@ -300,28 +282,18 @@ "state": {
             "border": "#388bfd",
-            "shadow": [
-                "0",
-                "0",
-                "0",
-                "3px",
-                "#0c2d6b"
-            ]
+            "shadow": "0 0 0 3px #0c2d6b"
         }
     },
     "fade": {
-        "black": {
-            "10": "rgba(1,4,9,0.1)",
-            "15": "rgba(1,4,9,0.15)",
-            "30": "rgba(1,4,9,0.3)",
-            "50": "rgba(1,4,9,0.5)",
-            "70": "rgba(1,4,9,0.7)",
-            "85": "rgba(1,4,9,0.85)"
-        },
-        "white": {
-            "10": "rgba(240,246,252,0.1)",
-            "15": "rgba(240,246,252,0.15)",
-            "30": "rgba(240,246,252,0.3)",
-            "50": "rgba(240,246,252,0.5)",
-            "70": "rgba(240,246,252,0.7)",
-            "85": "rgba(240,246,252,0.85)"
-        }
+        "black10": "rgba(1,4,9,0.1)",
+        "black15": "rgba(1,4,9,0.15)",
+        "black30": "rgba(1,4,9,0.3)",
+        "black50": "rgba(1,4,9,0.5)",
+        "black70": "rgba(1,4,9,0.7)",
+        "black85": "rgba(1,4,9,0.85)",
+        "white10": "rgba(240,246,252,0.1)",
+        "white15": "rgba(240,246,252,0.15)",
+        "white30": "rgba(240,246,252,0.3)",
+        "white50": "rgba(240,246,252,0.5)",
+        "white70": "rgba(240,246,252,0.7)",
+        "white85": "rgba(240,246,252,0.85)"
     },
@@ -357,8 +329,3 @@ "alert": {
         "border": "#484f58",
-        "shadow": [
-            "0",
-            "16px",
-            "32px",
-            "rgba(1,4,9,0.85)"
-        ],
+        "shadow": "0 16px 32px rgba(1,4,9,0.85)",
         "rowBorder": "#30363d"
@@ -370,38 +337,32 @@ },
     "btn": {
+        "text": "#f0f6fc",
         "bg": "#21262d",
-        "border": "rgba(240,246,252,0.1)",
-        "text": "#f0f6fc",
-        "ic": "#6e7681",
-        "shadow": "rgba(0,0,0,0)",
-        "shadowHighlight": "rgba(0,0,0,0)",
-        "bgHover": "#30363d",
-        "bgActive": "#21262d",
-        "shadowActive": [
-            "inset",
-            "0",
-            "0.15em",
-            "0.3em",
-            "rgba(1,4,9,0.15)"
-        ],
-        "shadowInputFocus": [
-            "0",
-            "0",
-            "0",
-            "0.2em",
-            "rgba(31,111,235,0.3)"
-        ],
+        "border": "#30363d",
+        "shadow": "0 0 rgba(0,0,0,0)",
+        "insetShadow": "0 0 rgba(0,0,0,0)",
+        "hoverBg": "#30363d",
+        "hoverBorder": "#8b949e",
+        "selectedBg": "#161b22",
+        "focusBg": "#21262d",
+        "focusBorder": "#8b949e",
+        "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
+        "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
+        "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
         "primary": {
+            "text": "#ffffff",
             "bg": "#238636",
             "border": "#2ea043",
-            "borderDisabled": "#238636",
-            "text": "#f0f6fc",
-            "ic": "#f0f6fc",
-            "shadow": "rgba(0,0,0,0)",
-            "shadowHighlight": "rgba(0,0,0,0)",
-            "shadowSelected": "rgba(0,0,0,0)",
-            "bgHover": "#2ea043",
-            "bgActive": "#238636",
-            "bgDisabled": "#238636",
+            "shadow": "0 0 rgba(0,0,0,0)",
+            "insetShadow": "0 0 rgba(0,0,0,0)",
+            "hoverBg": "#2ea043",
+            "hoverBorder": "#3fb950",
+            "selectedBg": "#238636",
+            "selectedShadow": "0 0 rgba(0,0,0,0)",
             "disabledText": "rgba(240,246,252,0.5)",
-            "disabledShadow": "rgba(0,0,0,0)",
+            "disabledBg": "#238636",
+            "disabledBorder": "#238636",
+            "focusBg": "#238636",
+            "focusBorder": "#3fb950",
+            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
+            "icon": "#f0f6fc",
             "counterBg": "rgba(240,246,252,0.2)"
@@ -414,35 +375,14 @@ },
             "hoverBorder": "#58a6ff",
-            "hoverShadow": [
-                "0",
-                "1px",
-                "0",
-                "rgba(1,4,9,0.1)"
-            ],
-            "hoverInsetShadow": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(240,246,252,0.03)"
-            ],
+            "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
+            "hoverInsetShadow": "inset 0 1px 0 rgba(240,246,252,0.03)",
             "hoverCounterBg": "rgba(240,246,252,0.2)",
             "selectedText": "#f0f6fc",
-            "selectedBg": "#1567e6",
-            "selectedBorder": "rgba(1,4,9,0.15)",
-            "selectedShadow": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(5,29,77,0.2)"
-            ],
+            "selectedBg": "#0d419d",
+            "selectedBorder": "rgba(240,246,252,0.1)",
+            "selectedShadow": "0 0 rgba(0,0,0,0)",
             "disabledText": "#58a6ff",
+            "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(31,111,235,0.05)",
-            "focusShadow": [
-                "0",
-                "0",
-                "0",
-                "3px",
-                "rgba(17,88,199,0.4)"
-            ],
+            "focusBorder": "#58a6ff",
+            "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)",
             "counterBg": "rgba(31,111,235,0.1)"
@@ -452,27 +392,17 @@ },
             "text": "#f85149",
-            "hoverText": "#f0f6fc",
+            "hoverText": "#ffffff",
             "hoverBg": "#da3633",
             "hoverBorder": "#f85149",
-            "hoverShadow": "rgba(0,0,0,0)",
-            "hoverInsetShadow": "rgba(0,0,0,0)",
-            "hoverCounterBg": "rgba(240,246,252,0.2)",
-            "selectedText": "#f0f6fc",
-            "selectedBg": "#d72a27",
-            "selectedBorder": "rgba(1,4,9,0.15)",
-            "selectedShadow": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(73,2,2,0.2)"
-            ],
+            "hoverShadow": "0 0 rgba(0,0,0,0)",
+            "hoverInsetShadow": "0 0 rgba(0,0,0,0)",
+            "hoverCounterBg": "rgba(255,255,255,0.2)",
+            "selectedText": "#ffffff",
+            "selectedBg": "#b62324",
+            "selectedBorder": "rgba(240,246,252,0.1)",
+            "selectedShadow": "0 0 rgba(0,0,0,0)",
             "disabledText": "#f85149",
+            "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(218,54,51,0.05)",
-            "focusShadow": [
-                "0",
-                "0",
-                "0",
-                "3px",
-                "rgba(182,35,36,0.4)"
-            ],
+            "focusBorder": "#f85149",
+            "focusShadow": "0 0 0 3px rgba(182,35,36,0.4)",
             "counterBg": "rgba(218,54,51,0.1)"
@@ -496,8 +426,3 @@ },
         "border": "#484f58",
-        "shadow": [
-            "0",
-            "16px",
-            "32px",
-            "rgba(1,4,9,0.85)"
-        ]
+        "shadow": "0 16px 32px rgba(1,4,9,0.85)"
     },
@@ -531,7 +456,2 @@ "label": {
     },
-    "topic": {
-        "tagBg": "#051d4d",
-        "tagBorder": "#051d4d",
-        "tagText": "#388bfd"
-    },
     "input": {
@@ -541,3 +461,3 @@ "bg": "#0d1117",
         "border": "rgba(240,246,252,0.1)",
-        "shadow": "rgba(0,0,0,0)",
+        "shadow": "0 0 rgba(0,0,0,0)",
         "disabledBg": "#161b22",
@@ -569,8 +489,3 @@ "disabledBorder": "#30363d",
         "stackFadeMore": "#21262d",
-        "childShadow": [
-            "-2px",
-            "-2px",
-            "0",
-            "#0d1117"
-        ]
+        "childShadow": "-2px -2px 0 #0d1117"
     },
@@ -590,8 +505,3 @@ "toast": {
         "borderSecondary": "#30363d",
-        "shadow": [
-            "0",
-            "0",
-            "18px",
-            "rgba(1,4,9,0.4)"
-        ],
+        "shadow": "0 0 18px rgba(1,4,9,0.4)",
         "backdropBg": "rgba(1,4,9,0.5)",
@@ -603,7 +513,7 @@ "backdropBorder": "#484f58",
     "box": {
-        "blueBorder": "#0d419d",
-        "rowYellowBg": "rgba(235,196,64,0.1)",
-        "rowBlueBg": "rgba(121,192,255,0.1)",
-        "headerBlueBg": "#0d1117",
-        "headerBlueBorder": "#30363d"
+        "blueBorder": "rgba(56,139,253,0.4)",
+        "rowYellowBg": "rgba(187,128,9,0.1)",
+        "rowBlueBg": "rbga(#388BFD, 0.1)",
+        "headerBlueBg": "rbga(#388BFD, 0.1)",
+        "headerBlueBorder": "rgba(56,139,253,0.4)"
     },
@@ -639,3 +549,3 @@ "popover": {
     "tabnav": {
-        "selectedBg": "#161b22"
+        "selectedBg": "#0d1117"
     },
@@ -689,19 +599,47 @@ "header": {
     },
-    "iconFolder": "#6e7681",
-    "hlAuthorBg": "#051d4d",
-    "hlAuthorBorder": "#0d419d",
-    "logoSubdued": "#30363d",
-    "discussionBorder": "#34513b",
-    "diff": {
+    "diffstat": {
         "neutralBg": "#30363d",
         "neutralBorder": "rgba(240,246,252,0.1)",
         "deletionBg": "#da3633",
-        "deletionBgStrong": "#f0f6fc",
         "deletionBorder": "#f85149",
-        "deletionBorderStrong": "#f0f6fc",
         "additionBg": "#238636",
-        "additionBgStrong": "#f0f6fc",
-        "additionBorder": "#2ea043",
-        "additionBorderStrong": "#f0f6fc"
+        "additionBorder": "#2ea043"
     },
+    "iconFolder": "#6e7681",
+    "hlAuthorBg": "#051d4d",
+    "hlAuthorBorder": "#0d419d",
+    "logoSubdued": "#30363d",
+    "discussionBorder": "#34513b",
+    "diffBlob": {
+        "numText": "rgba(240,246,252,0.3)",
+        "numHoverText": "rgba(240,246,252,0.6)",
+        "addition": {
+            "numBg": "rgba(35,134,54,0.3)",
+            "lineBg": "rgba(35,134,54,0.15)",
+            "wordBg": "rgba(35,134,54,0.3)"
+        },
+        "deletion": {
+            "numBg": "rgba(218,54,51,0.3)",
+            "lineBg": "rgba(218,54,51,0.15)",
+            "wordBg": "rgba(218,54,51,0.3)"
+        },
+        "hunk": {
+            "text": "#8b949e",
+            "numBg": "rgba(88,166,255,0.15)",
+            "lineBg": "rgba(88,166,255,0.1)"
+        },
+        "emptyBlockBg": "#161b22",
+        "selectedLineHighlightBg": "rgba(187,128,9,0.1)",
+        "selectedLineHighlightBorder": "#bb8009",
+        "expander": {
+            "icon": "#8b949e",
+            "hoverIcon": "#f0f6fc",
+            "hoverBg": "#1f6feb"
+        },
+        "commentButton": {
+            "icon": "#f0f6fc",
+            "bg": "#1f6feb",
+            "gradientBg": "#367eed"
+        }
+    },
     "globalNav": {
@@ -754,3 +692,35 @@ "logo": "#f0f6fc",
         }
+    },
+    "topicTag": {
+        "text": "#58a6ff",
+        "bg": "rgba(56,139,253,0.1)",
+        "hoverBg": "rgba(56,139,253,0.2)",
+        "activeBg": "rgba(56,139,253,0.15)"
+    },
+    "mergeBox": {
+        "successIconBg": "rgba(46,160,67,0.1)",
+        "successIconText": "#3fb950",
+        "successIconBorder": "rgba(46,160,67,0.4)",
+        "successIndicatorBg": "#238636",
+        "successIndicatorBorder": "#2ea043",
+        "mergedIconBg": "rgba(188,140,255,0.1)",
+        "mergedIconText": "#a371f7",
+        "mergedIconBorder": "rgba(188,140,255,0.4)",
+        "mergedBoxBorder": "rgba(188,140,255,0.4)",
+        "neutralIconBg": "rgba(213,221,229,0.1)",
+        "neutralIconText": "#8b949e",
+        "neutralIconBorder": "rgba(213,221,229,0.4)",
+        "neutralIndicatorBg": "#484f58",
+        "neutralIndicatorBorder": "#6e7681",
+        "warningIconBg": "rgba(187,128,9,0.1)",
+        "warningIconText": "#e3b341",
+        "warningIconBorder": "rgba(187,128,9,0.4)",
+        "warningBoxBorder": "rgba(187,128,9,0.4)",
+        "warningMergeHighlight": "rgba(187,128,9,0.1)",
+        "errorIconBg": "rgba(248,81,73,0.1)",
+        "errorIconText": "#f85149",
+        "errorIconBorder": "rgba(248,81,73,0.4)",
+        "errorIndicatorBg": "#da3633",
+        "errorIndicatorBorder": "#f85149"
     }
 };

dist/js/colors/index.d.ts

@@ -38,2 +38,3 @@ declare const _default: {
             warning: string;
+            white: string;
         };
@@ -63,2 +64,3 @@ icon: {
             canvasInverse: string;
+            canvasInset: string;
             primary: string;
@@ -78,6 +80,6 @@ secondary: string;
         shadow: {
-            small: string[];
-            medium: string[];
-            large: string[];
-            extraLarge: string[];
+            small: string;
+            medium: string;
+            large: string;
+            extraLarge: string;
             highlight: string;
@@ -103,22 +105,18 @@ inset: string;
                 border: string;
-                shadow: string[];
+                shadow: string;
             };
         };
         fade: {
-            black: {
-                10: string;
-                15: string;
-                30: string;
-                50: string;
-                70: string;
-                85: string;
-            };
-            white: {
-                10: string;
-                15: string;
-                30: string;
-                50: string;
-                70: string;
-                85: string;
-            };
+            black10: string;
+            black15: string;
+            black30: string;
+            black50: string;
+            black70: string;
+            black85: string;
+            white10: string;
+            white15: string;
+            white30: string;
+            white50: string;
+            white70: string;
+            white85: string;
         };
@@ -154,3 +152,3 @@ alert: {
             border: string;
-            shadow: string[];
+            shadow: string;
             rowBorder: string;
@@ -162,26 +160,32 @@ };
         btn: {
+            text: string;
             bg: string;
             border: string;
-            text: string;
-            ic: string;
             shadow: string;
-            shadowHighlight: string;
-            bgHover: string;
-            bgActive: string;
-            shadowActive: string[];
-            shadowInputFocus: string[];
+            insetShadow: string;
+            hoverBg: string;
+            hoverBorder: string;
+            selectedBg: string;
+            focusBg: string;
+            focusBorder: string;
+            focusShadow: string;
+            shadowActive: string;
+            shadowInputFocus: string;
             primary: {
+                text: string;
                 bg: string;
                 border: string;
-                borderDisabled: string;
-                text: string;
-                ic: string;
                 shadow: string;
-                shadowHighlight: string;
-                shadowSelected: string;
-                bgHover: string;
-                bgActive: string;
-                bgDisabled: string;
+                insetShadow: string;
+                hoverBg: string;
+                hoverBorder: string;
+                selectedBg: string;
+                selectedShadow: string;
                 disabledText: string;
-                disabledShadow: string;
+                disabledBg: string;
+                disabledBorder: string;
+                focusBg: string;
+                focusBorder: string;
+                focusShadow: string;
+                icon: string;
                 counterBg: string;
@@ -194,4 +198,4 @@ };
                 hoverBorder: string;
-                hoverShadow: string[];
-                hoverInsetShadow: string[];
+                hoverShadow: string;
+                hoverInsetShadow: string;
                 hoverCounterBg: string;
@@ -201,6 +205,8 @@ selectedText: string;
                 selectedBorder: string;
-                selectedShadow: string[];
+                selectedShadow: string;
                 disabledText: string;
+                disabledBg: string;
                 disabledCounterBg: string;
-                focusShadow: string[];
+                focusBorder: string;
+                focusShadow: string;
                 counterBg: string;
@@ -219,6 +225,8 @@ };
                 selectedBorder: string;
-                selectedShadow: string[];
+                selectedShadow: string;
                 disabledText: string;
+                disabledBg: string;
                 disabledCounterBg: string;
-                focusShadow: string[];
+                focusBorder: string;
+                focusShadow: string;
                 counterBg: string;
@@ -242,3 +250,3 @@ };
             border: string;
-            shadow: string[];
+            shadow: string;
         };
@@ -272,7 +280,2 @@ label: {
         };
-        topic: {
-            tagBg: string;
-            tagBorder: string;
-            tagText: string;
-        };
         input: {
@@ -309,3 +312,3 @@ bg: string;
             stackFadeMore: string;
-            childShadow: string[];
+            childShadow: string;
         };
@@ -325,3 +328,3 @@ toast: {
             borderSecondary: string;
-            shadow: string[];
+            shadow: string;
             backdropBg: string;
@@ -417,19 +420,47 @@ backdropBorder: string;
         };
-        iconFolder: string;
-        hlAuthorBg: string;
-        hlAuthorBorder: string;
-        logoSubdued: string;
-        discussionBorder: string;
-        diff: {
+        diffstat: {
             neutralBg: string;
             neutralBorder: string;
             deletionBg: string;
-            deletionBgStrong: string;
             deletionBorder: string;
-            deletionBorderStrong: string;
             additionBg: string;
-            additionBgStrong: string;
             additionBorder: string;
-            additionBorderStrong: string;
         };
+        iconFolder: string;
+        hlAuthorBg: string;
+        hlAuthorBorder: string;
+        logoSubdued: string;
+        discussionBorder: string;
+        diffBlob: {
+            numText: string;
+            numHoverText: string;
+            addition: {
+                numBg: string;
+                lineBg: string;
+                wordBg: string;
+            };
+            deletion: {
+                numBg: string;
+                lineBg: string;
+                wordBg: string;
+            };
+            hunk: {
+                text: string;
+                numBg: string;
+                lineBg: string;
+            };
+            emptyBlockBg: string;
+            selectedLineHighlightBg: string;
+            selectedLineHighlightBorder: string;
+            expander: {
+                icon: string;
+                hoverIcon: string;
+                hoverBg: string;
+            };
+            commentButton: {
+                icon: string;
+                bg: string;
+                gradientBg: string;
+            };
+        };
         globalNav: {
@@ -483,2 +514,34 @@ logo: string;
         };
+        topicTag: {
+            text: string;
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+        };
+        mergeBox: {
+            successIconBg: string;
+            successIconText: string;
+            successIconBorder: string;
+            successIndicatorBg: string;
+            successIndicatorBorder: string;
+            mergedIconBg: string;
+            mergedIconText: string;
+            mergedIconBorder: string;
+            mergedBoxBorder: string;
+            neutralIconBg: string;
+            neutralIconText: string;
+            neutralIconBorder: string;
+            neutralIndicatorBg: string;
+            neutralIndicatorBorder: string;
+            warningIconBg: string;
+            warningIconText: string;
+            warningIconBorder: string;
+            warningBoxBorder: string;
+            warningMergeHighlight: string;
+            errorIconBg: string;
+            errorIconText: string;
+            errorIconBorder: string;
+            errorIndicatorBg: string;
+            errorIndicatorBorder: string;
+        };
     };
@@ -521,2 +584,3 @@ light: {
             warning: string;
+            white: string;
         };
@@ -546,2 +610,3 @@ icon: {
             canvasInverse: string;
+            canvasInset: string;
             primary: string;
@@ -561,8 +626,8 @@ secondary: string;
         shadow: {
-            small: string[];
-            medium: string[];
-            large: string[];
-            extraLarge: string[];
-            highlight: string[];
-            inset: string[];
+            small: string;
+            medium: string;
+            large: string;
+            extraLarge: string;
+            highlight: string;
+            inset: string;
         };
@@ -586,22 +651,18 @@ state: {
                 border: string;
-                shadow: string[];
+                shadow: string;
             };
         };
         fade: {
-            black: {
-                10: string;
-                15: string;
-                30: string;
-                50: string;
-                70: string;
-                85: string;
-            };
-            white: {
-                10: string;
-                15: string;
-                30: string;
-                50: string;
-                70: string;
-                85: string;
-            };
+            black10: string;
+            black15: string;
+            black30: string;
+            black50: string;
+            black70: string;
+            black85: string;
+            white10: string;
+            white15: string;
+            white30: string;
+            white50: string;
+            white70: string;
+            white85: string;
         };
@@ -637,3 +698,3 @@ alert: {
             border: string;
-            shadow: string[];
+            shadow: string;
             rowBorder: string;
@@ -645,26 +706,32 @@ };
         btn: {
+            text: string;
             bg: string;
             border: string;
-            text: string;
-            ic: string;
-            shadow: string[];
-            shadowHighlight: string[];
-            bgHover: string;
-            bgActive: string;
-            shadowActive: string[];
-            shadowInputFocus: string[];
+            shadow: string;
+            insetShadow: string;
+            hoverBg: string;
+            hoverBorder: string;
+            selectedBg: string;
+            focusBg: string;
+            focusBorder: string;
+            focusShadow: string;
+            shadowActive: string;
+            shadowInputFocus: string;
             primary: {
+                text: string;
                 bg: string;
                 border: string;
-                borderDisabled: string;
-                text: string;
-                ic: string;
-                shadow: string[];
-                shadowHighlight: string[];
-                shadowSelected: string[];
-                bgHover: string;
-                bgActive: string;
-                bgDisabled: string;
+                shadow: string;
+                insetShadow: string;
+                hoverBg: string;
+                hoverBorder: string;
+                selectedBg: string;
+                selectedShadow: string;
                 disabledText: string;
-                disabledShadow: string[];
+                disabledBg: string;
+                disabledBorder: string;
+                focusBg: string;
+                focusBorder: string;
+                focusShadow: string;
+                icon: string;
                 counterBg: string;
@@ -677,4 +744,4 @@ };
                 hoverBorder: string;
-                hoverShadow: string[];
-                hoverInsetShadow: string[];
+                hoverShadow: string;
+                hoverInsetShadow: string;
                 hoverCounterBg: string;
@@ -684,6 +751,8 @@ selectedText: string;
                 selectedBorder: string;
-                selectedShadow: string[];
+                selectedShadow: string;
                 disabledText: string;
+                disabledBg: string;
                 disabledCounterBg: string;
-                focusShadow: string[];
+                focusBorder: string;
+                focusShadow: string;
                 counterBg: string;
@@ -696,4 +765,4 @@ };
                 hoverBorder: string;
-                hoverShadow: string[];
-                hoverInsetShadow: string[];
+                hoverShadow: string;
+                hoverInsetShadow: string;
                 hoverCounterBg: string;
@@ -703,6 +772,8 @@ selectedText: string;
                 selectedBorder: string;
-                selectedShadow: string[];
+                selectedShadow: string;
                 disabledText: string;
+                disabledBg: string;
                 disabledCounterBg: string;
-                focusShadow: string[];
+                focusBorder: string;
+                focusShadow: string;
                 counterBg: string;
@@ -726,3 +797,3 @@ };
             border: string;
-            shadow: string[];
+            shadow: string;
         };
@@ -756,7 +827,2 @@ label: {
         };
-        topic: {
-            tagBg: string;
-            tagBorder: string;
-            tagText: string;
-        };
         input: {
@@ -766,3 +832,3 @@ bg: string;
             border: string;
-            shadow: string[];
+            shadow: string;
             disabledBg: string;
@@ -794,3 +860,3 @@ disabledBorder: string;
             stackFadeMore: string;
-            childShadow: string[];
+            childShadow: string;
         };
@@ -810,3 +876,3 @@ toast: {
             borderSecondary: string;
-            shadow: string[];
+            shadow: string;
             backdropBg: string;
@@ -902,19 +968,47 @@ backdropBorder: string;
         };
-        iconFolder: string;
-        hlAuthorBg: string;
-        hlAuthorBorder: string;
-        logoSubdued: string;
-        discussionBorder: string;
-        diff: {
+        diffstat: {
             neutralBg: string;
             neutralBorder: string;
             deletionBg: string;
-            deletionBgStrong: string;
             deletionBorder: string;
-            deletionBorderStrong: string;
             additionBg: string;
-            additionBgStrong: string;
             additionBorder: string;
-            additionBorderStrong: string;
         };
+        iconFolder: string;
+        hlAuthorBg: string;
+        hlAuthorBorder: string;
+        logoSubdued: string;
+        discussionBorder: string;
+        diffBlob: {
+            numText: string;
+            numHoverText: string;
+            addition: {
+                numBg: string;
+                lineBg: string;
+                wordBg: string;
+            };
+            deletion: {
+                numBg: string;
+                lineBg: string;
+                wordBg: string;
+            };
+            hunk: {
+                text: string;
+                numBg: string;
+                lineBg: string;
+            };
+            emptyBlockBg: string;
+            selectedLineHighlightBg: string;
+            selectedLineHighlightBorder: string;
+            expander: {
+                icon: string;
+                hoverIcon: string;
+                hoverBg: string;
+            };
+            commentButton: {
+                icon: string;
+                bg: string;
+                gradientBg: string;
+            };
+        };
         globalNav: {
@@ -968,4 +1062,36 @@ logo: string;
         };
+        topicTag: {
+            text: string;
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+        };
+        mergeBox: {
+            successIconBg: string;
+            successIconText: string;
+            successIconBorder: string;
+            successIndicatorBg: string;
+            successIndicatorBorder: string;
+            mergedIconBg: string;
+            mergedIconText: string;
+            mergedIconBorder: string;
+            mergedBoxBorder: string;
+            neutralIconBg: string;
+            neutralIconText: string;
+            neutralIconBorder: string;
+            neutralIndicatorBg: string;
+            neutralIndicatorBorder: string;
+            warningIconBg: string;
+            warningIconText: string;
+            warningIconBorder: string;
+            warningBoxBorder: string;
+            warningMergeHighlight: string;
+            errorIconBg: string;
+            errorIconText: string;
+            errorIconBorder: string;
+            errorIndicatorBg: string;
+            errorIndicatorBorder: string;
+        };
     };
 };
 export default _default;

dist/js/colors/light.d.ts

@@ -37,2 +37,3 @@ declare const _default: {
         warning: string;
+        white: string;
     };
@@ -62,2 +63,3 @@ icon: {
         canvasInverse: string;
+        canvasInset: string;
         primary: string;
@@ -77,8 +79,8 @@ secondary: string;
     shadow: {
-        small: string[];
-        medium: string[];
-        large: string[];
-        extraLarge: string[];
-        highlight: string[];
-        inset: string[];
+        small: string;
+        medium: string;
+        large: string;
+        extraLarge: string;
+        highlight: string;
+        inset: string;
     };
@@ -102,22 +104,18 @@ state: {
             border: string;
-            shadow: string[];
+            shadow: string;
         };
     };
     fade: {
-        black: {
-            10: string;
-            15: string;
-            30: string;
-            50: string;
-            70: string;
-            85: string;
-        };
-        white: {
-            10: string;
-            15: string;
-            30: string;
-            50: string;
-            70: string;
-            85: string;
-        };
+        black10: string;
+        black15: string;
+        black30: string;
+        black50: string;
+        black70: string;
+        black85: string;
+        white10: string;
+        white15: string;
+        white30: string;
+        white50: string;
+        white70: string;
+        white85: string;
     };
@@ -153,3 +151,3 @@ alert: {
         border: string;
-        shadow: string[];
+        shadow: string;
         rowBorder: string;
@@ -161,26 +159,32 @@ };
     btn: {
+        text: string;
         bg: string;
         border: string;
-        text: string;
-        ic: string;
-        shadow: string[];
-        shadowHighlight: string[];
-        bgHover: string;
-        bgActive: string;
-        shadowActive: string[];
-        shadowInputFocus: string[];
+        shadow: string;
+        insetShadow: string;
+        hoverBg: string;
+        hoverBorder: string;
+        selectedBg: string;
+        focusBg: string;
+        focusBorder: string;
+        focusShadow: string;
+        shadowActive: string;
+        shadowInputFocus: string;
         primary: {
+            text: string;
             bg: string;
             border: string;
-            borderDisabled: string;
-            text: string;
-            ic: string;
-            shadow: string[];
-            shadowHighlight: string[];
-            shadowSelected: string[];
-            bgHover: string;
-            bgActive: string;
-            bgDisabled: string;
+            shadow: string;
+            insetShadow: string;
+            hoverBg: string;
+            hoverBorder: string;
+            selectedBg: string;
+            selectedShadow: string;
             disabledText: string;
-            disabledShadow: string[];
+            disabledBg: string;
+            disabledBorder: string;
+            focusBg: string;
+            focusBorder: string;
+            focusShadow: string;
+            icon: string;
             counterBg: string;
@@ -193,4 +197,4 @@ };
             hoverBorder: string;
-            hoverShadow: string[];
-            hoverInsetShadow: string[];
+            hoverShadow: string;
+            hoverInsetShadow: string;
             hoverCounterBg: string;
@@ -200,6 +204,8 @@ selectedText: string;
             selectedBorder: string;
-            selectedShadow: string[];
+            selectedShadow: string;
             disabledText: string;
+            disabledBg: string;
             disabledCounterBg: string;
-            focusShadow: string[];
+            focusBorder: string;
+            focusShadow: string;
             counterBg: string;
@@ -212,4 +218,4 @@ };
             hoverBorder: string;
-            hoverShadow: string[];
-            hoverInsetShadow: string[];
+            hoverShadow: string;
+            hoverInsetShadow: string;
             hoverCounterBg: string;
@@ -219,6 +225,8 @@ selectedText: string;
             selectedBorder: string;
-            selectedShadow: string[];
+            selectedShadow: string;
             disabledText: string;
+            disabledBg: string;
             disabledCounterBg: string;
-            focusShadow: string[];
+            focusBorder: string;
+            focusShadow: string;
             counterBg: string;
@@ -242,3 +250,3 @@ };
         border: string;
-        shadow: string[];
+        shadow: string;
     };
@@ -272,7 +280,2 @@ label: {
     };
-    topic: {
-        tagBg: string;
-        tagBorder: string;
-        tagText: string;
-    };
     input: {
@@ -282,3 +285,3 @@ bg: string;
         border: string;
-        shadow: string[];
+        shadow: string;
         disabledBg: string;
@@ -310,3 +313,3 @@ disabledBorder: string;
         stackFadeMore: string;
-        childShadow: string[];
+        childShadow: string;
     };
@@ -326,3 +329,3 @@ toast: {
         borderSecondary: string;
-        shadow: string[];
+        shadow: string;
         backdropBg: string;
@@ -418,19 +421,47 @@ backdropBorder: string;
     };
-    iconFolder: string;
-    hlAuthorBg: string;
-    hlAuthorBorder: string;
-    logoSubdued: string;
-    discussionBorder: string;
-    diff: {
+    diffstat: {
         neutralBg: string;
         neutralBorder: string;
         deletionBg: string;
-        deletionBgStrong: string;
         deletionBorder: string;
-        deletionBorderStrong: string;
         additionBg: string;
-        additionBgStrong: string;
         additionBorder: string;
-        additionBorderStrong: string;
     };
+    iconFolder: string;
+    hlAuthorBg: string;
+    hlAuthorBorder: string;
+    logoSubdued: string;
+    discussionBorder: string;
+    diffBlob: {
+        numText: string;
+        numHoverText: string;
+        addition: {
+            numBg: string;
+            lineBg: string;
+            wordBg: string;
+        };
+        deletion: {
+            numBg: string;
+            lineBg: string;
+            wordBg: string;
+        };
+        hunk: {
+            text: string;
+            numBg: string;
+            lineBg: string;
+        };
+        emptyBlockBg: string;
+        selectedLineHighlightBg: string;
+        selectedLineHighlightBorder: string;
+        expander: {
+            icon: string;
+            hoverIcon: string;
+            hoverBg: string;
+        };
+        commentButton: {
+            icon: string;
+            bg: string;
+            gradientBg: string;
+        };
+    };
     globalNav: {
@@ -484,3 +515,35 @@ logo: string;
     };
+    topicTag: {
+        text: string;
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+    };
+    mergeBox: {
+        successIconBg: string;
+        successIconText: string;
+        successIconBorder: string;
+        successIndicatorBg: string;
+        successIndicatorBorder: string;
+        mergedIconBg: string;
+        mergedIconText: string;
+        mergedIconBorder: string;
+        mergedBoxBorder: string;
+        neutralIconBg: string;
+        neutralIconText: string;
+        neutralIconBorder: string;
+        neutralIndicatorBg: string;
+        neutralIndicatorBorder: string;
+        warningIconBg: string;
+        warningIconText: string;
+        warningIconBorder: string;
+        warningBoxBorder: string;
+        warningMergeHighlight: string;
+        errorIconBg: string;
+        errorIconText: string;
+        errorIconBorder: string;
+        errorIndicatorBg: string;
+        errorIndicatorBorder: string;
+    };
 };
 export default _default;

dist/js/colors/light.js

@@ -214,3 +214,4 @@ "use strict";
         "success": "#22863a",
-        "warning": "#b08800"
+        "warning": "#b08800",
+        "white": "#ffffff"
     },
@@ -240,2 +241,3 @@ "icon": {
         "canvasInverse": "#24292e",
+        "canvasInset": "#f6f8fa",
         "primary": "#ffffff",
@@ -255,40 +257,8 @@ "secondary": "#fafbfc",
     "shadow": {
-        "small": [
-            "0",
-            "1px",
-            "0",
-            "rgba(27,31,35,0.04)"
-        ],
-        "medium": [
-            "0",
-            "3px",
-            "6px",
-            "rgba(149,157,165,0.15)"
-        ],
-        "large": [
-            "0",
-            "8px",
-            "24px",
-            "rgba(149,157,165,0.2)"
-        ],
-        "extraLarge": [
-            "0",
-            "12px",
-            "48px",
-            "rgba(149,157,165,0.3)"
-        ],
-        "highlight": [
-            "inset",
-            "0",
-            "1px",
-            "0",
-            "rgba(255,255,255,0.25)"
-        ],
-        "inset": [
-            "inset",
-            "0",
-            "1px",
-            "0",
-            "rgba(225,228,232,0.2)"
-        ]
+        "small": "0 1px 0 rgba(27,31,35,0.04)",
+        "medium": "0 3px 6px rgba(149,157,165,0.15)",
+        "large": "0 8px 24px rgba(149,157,165,0.2)",
+        "extraLarge": "0 12px 48px rgba(149,157,165,0.3)",
+        "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
+        "inset": "inset 0 1px 0 rgba(225,228,232,0.2)"
     },
@@ -312,28 +282,18 @@ "state": {
             "border": "#0366d6",
-            "shadow": [
-                "0",
-                "0",
-                "0",
-                "3px",
-                "rgba(3,102,214,0.3)"
-            ]
+            "shadow": "0 0 0 3px rgba(3,102,214,0.3)"
         }
     },
     "fade": {
-        "black": {
-            "10": "rgba(27,31,35,0.1)",
-            "15": "rgba(27,31,35,0.15)",
-            "30": "rgba(27,31,35,0.3)",
-            "50": "rgba(27,31,35,0.5)",
-            "70": "rgba(27,31,35,0.7)",
-            "85": "rgba(27,31,35,0.85)"
-        },
-        "white": {
-            "10": "rgba(255,255,255,0.1)",
-            "15": "rgba(255,255,255,0.15)",
-            "30": "rgba(255,255,255,0.3)",
-            "50": "rgba(255,255,255,0.5)",
-            "70": "rgba(255,255,255,0.7)",
-            "85": "rgba(255,255,255,0.85)"
-        }
+        "black10": "rgba(27,31,35,0.1)",
+        "black15": "rgba(27,31,35,0.15)",
+        "black30": "rgba(27,31,35,0.3)",
+        "black50": "rgba(27,31,35,0.5)",
+        "black70": "rgba(27,31,35,0.7)",
+        "black85": "rgba(27,31,35,0.85)",
+        "white10": "rgba(255,255,255,0.1)",
+        "white15": "rgba(255,255,255,0.15)",
+        "white30": "rgba(255,255,255,0.3)",
+        "white50": "rgba(255,255,255,0.5)",
+        "white70": "rgba(255,255,255,0.7)",
+        "white85": "rgba(255,255,255,0.85)"
     },
@@ -369,8 +329,3 @@ "alert": {
         "border": "#e1e4e8",
-        "shadow": [
-            "0",
-            "3px",
-            "6px",
-            "rgba(149,157,165,0.15)"
-        ],
+        "shadow": "0 3px 6px rgba(149,157,165,0.15)",
         "rowBorder": "#eaecef"
@@ -382,72 +337,32 @@ },
     "btn": {
+        "text": "#24292e",
         "bg": "#fafbfc",
         "border": "rgba(27,31,35,0.15)",
-        "text": "#24292e",
-        "ic": "#6a737d",
-        "shadow": [
-            "0",
-            "1px",
-            "0",
-            "rgba(27,31,35,0.04)"
-        ],
-        "shadowHighlight": [
-            "inset",
-            "0",
-            "1px",
-            "0",
-            "rgba(255,255,255,0.25)"
-        ],
-        "bgHover": "#f3f4f6",
-        "bgActive": "#edeff2",
-        "shadowActive": [
-            "inset",
-            "0",
-            "0.15em",
-            "0.3em",
-            "rgba(27,31,35,0.15)"
-        ],
-        "shadowInputFocus": [
-            "0",
-            "0",
-            "0",
-            "0.2em",
-            "rgba(3,102,214,0.3)"
-        ],
+        "shadow": "0 1px 0 rgba(27,31,35,0.04)",
+        "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+        "hoverBg": "#f3f4f6",
+        "hoverBorder": "rgba(27,31,35,0.15)",
+        "selectedBg": "#edeff2",
+        "focusBg": "#fafbfc",
+        "focusBorder": "rgba(27,31,35,0.15)",
+        "focusShadow": "0 0 0 3px rgba(3,102,214,0.3)",
+        "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,35,0.15)",
+        "shadowInputFocus": "0 0 0 0.2em rgba(3,102,214,0.3)",
         "primary": {
+            "text": "#ffffff",
             "bg": "#2ea44f",
             "border": "rgba(27,31,35,0.15)",
-            "borderDisabled": "rgba(27,31,35,0.1)",
-            "text": "#ffffff",
-            "ic": "rgba(255,255,255,0.8)",
-            "shadow": [
-                "0",
-                "1px",
-                "0",
-                "rgba(27,31,35,0.1)"
-            ],
-            "shadowHighlight": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(255,255,255,0.03)"
-            ],
-            "shadowSelected": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(20,70,32,0.2)"
-            ],
-            "bgHover": "#2c974b",
-            "bgActive": "#2a8f47",
-            "bgDisabled": "#94d3a2",
+            "shadow": "0 1px 0 rgba(27,31,35,0.1)",
+            "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
+            "hoverBg": "#2c974b",
+            "hoverBorder": "rgba(27,31,35,0.15)",
+            "selectedBg": "#2a8f47",
+            "selectedShadow": "inset 0 1px 0 rgba(20,70,32,0.2)",
             "disabledText": "rgba(255,255,255,0.8)",
-            "disabledShadow": [
-                "0",
-                "0",
-                "0",
-                "3px",
-                "rgba(46,164,79,0.4)"
-            ],
+            "disabledBg": "#94d3a2",
+            "disabledBorder": "rgba(27,31,35,0.1)",
+            "focusBg": "#2ea44f",
+            "focusBorder": "rgba(27,31,35,0.15)",
+            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
+            "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
@@ -460,15 +375,4 @@ },
             "hoverBorder": "rgba(27,31,35,0.15)",
-            "hoverShadow": [
-                "0",
-                "1px",
-                "0",
-                "rgba(27,31,35,0.1)"
-            ],
-            "hoverInsetShadow": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(255,255,255,0.03)"
-            ],
+            "hoverShadow": "0 1px 0 rgba(27,31,35,0.1)",
+            "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
             "hoverCounterBg": "rgba(255,255,255,0.2)",
@@ -478,18 +382,8 @@ "selectedText": "#ffffff",
             "selectedBorder": "rgba(27,31,35,0.15)",
-            "selectedShadow": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(5,38,76,0.2)"
-            ],
+            "selectedShadow": "inset 0 1px 0 rgba(5,38,76,0.2)",
             "disabledText": "rgba(3,102,214,0.5)",
+            "disabledBg": "#fafbfc",
             "disabledCounterBg": "rgba(3,102,214,0.05)",
-            "focusShadow": [
-                "0",
-                "0",
-                "0",
-                "3px",
-                "rgba(0,92,197,0.4)"
-            ],
+            "focusBorder": "rgba(27,31,35,0.15)",
+            "focusShadow": "0 0 0 3px rgba(0,92,197,0.4)",
             "counterBg": "rgba(3,102,214,0.1)"
@@ -502,15 +396,4 @@ },
             "hoverBorder": "rgba(27,31,35,0.15)",
-            "hoverShadow": [
-                "0",
-                "1px",
-                "0",
-                "rgba(27,31,35,0.1)"
-            ],
-            "hoverInsetShadow": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(255,255,255,0.03)"
-            ],
+            "hoverShadow": "0 1px 0 rgba(27,31,35,0.1)",
+            "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
             "hoverCounterBg": "rgba(255,255,255,0.2)",
@@ -520,18 +403,8 @@ "selectedText": "#ffffff",
             "selectedBorder": "rgba(27,31,35,0.15)",
-            "selectedShadow": [
-                "inset",
-                "0",
-                "1px",
-                "0",
-                "rgba(134,24,29,0.2)"
-            ],
+            "selectedShadow": "inset 0 1px 0 rgba(134,24,29,0.2)",
             "disabledText": "rgba(215,58,73,0.5)",
+            "disabledBg": "#fafbfc",
             "disabledCounterBg": "rgba(215,58,73,0.05)",
-            "focusShadow": [
-                "0",
-                "0",
-                "0",
-                "3px",
-                "rgba(203,36,49,0.4)"
-            ],
+            "focusBorder": "rgba(27,31,35,0.15)",
+            "focusShadow": "0 0 0 3px rgba(203,36,49,0.4)",
             "counterBg": "rgba(215,58,73,0.1)"
@@ -555,8 +428,3 @@ },
         "border": "#e1e4e8",
-        "shadow": [
-            "0",
-            "8px",
-            "24px",
-            "rgba(149,157,165,0.2)"
-        ]
+        "shadow": "0 8px 24px rgba(149,157,165,0.2)"
     },
@@ -590,7 +458,2 @@ "label": {
     },
-    "topic": {
-        "tagBg": "#f1f8ff",
-        "tagBorder": "#f1f8ff",
-        "tagText": "#0366d6"
-    },
     "input": {
@@ -600,9 +463,3 @@ "bg": "#ffffff",
         "border": "#e1e4e8",
-        "shadow": [
-            "inset",
-            "0",
-            "1px",
-            "2px",
-            "rgba(27,31,35,0.075)"
-        ],
+        "shadow": "inset 0 1px 2px rgba(27,31,35,0.075)",
         "disabledBg": "#ffffff",
@@ -634,8 +491,3 @@ "disabledBorder": "#e1e4e8",
         "stackFadeMore": "#e1e4e8",
-        "childShadow": [
-            "-2px",
-            "-2px",
-            "0",
-            "rgba(255,255,255,0.8)"
-        ]
+        "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
     },
@@ -655,8 +507,3 @@ "toast": {
         "borderSecondary": "#eaecef",
-        "shadow": [
-            "0",
-            "0",
-            "18px",
-            "rgba(27,31,35,0.4)"
-        ],
+        "shadow": "0 0 18px rgba(27,31,35,0.4)",
         "backdropBg": "rgba(27,31,35,0.5)",
@@ -741,3 +588,3 @@ "backdropBorder": "rgba(0,0,0,0)",
     "verifiedBadge": {
-        "text": "#85e89d",
+        "text": "#22863a",
         "bg": "#ffffff",
@@ -753,19 +600,47 @@ "border": "#e1e4e8"
     },
-    "iconFolder": "#79b8ff",
-    "hlAuthorBg": "#f1f8ff",
-    "hlAuthorBorder": "#c8e1ff",
-    "logoSubdued": "#d1d5da",
-    "discussionBorder": "#a2cbac",
-    "diff": {
+    "diffstat": {
         "neutralBg": "#d1d5da",
         "neutralBorder": "#d1d5da",
         "deletionBg": "#d73a49",
-        "deletionBgStrong": "#1b1f23",
         "deletionBorder": "#d73a49",
-        "deletionBorderStrong": "#1b1f23",
         "additionBg": "#28a745",
-        "additionBgStrong": "#1b1f23",
-        "additionBorder": "#28a745",
-        "additionBorderStrong": "#1b1f23"
+        "additionBorder": "#28a745"
     },
+    "iconFolder": "#79b8ff",
+    "hlAuthorBg": "#f1f8ff",
+    "hlAuthorBorder": "#c8e1ff",
+    "logoSubdued": "#d1d5da",
+    "discussionBorder": "#a2cbac",
+    "diffBlob": {
+        "numText": "rgba(27,31,35,0.3)",
+        "numHoverText": "rgba(27,31,35,0.6)",
+        "addition": {
+            "numBg": "#cdffd8",
+            "lineBg": "#e6ffed",
+            "wordBg": "#acf2bd"
+        },
+        "deletion": {
+            "numBg": "#ffdce0",
+            "lineBg": "#ffeef0",
+            "wordBg": "#fdb8c0"
+        },
+        "hunk": {
+            "text": "rgba(27,31,35,0.7)",
+            "numBg": "#dbedff",
+            "lineBg": "#f1f8ff"
+        },
+        "emptyBlockBg": "#fafbfc",
+        "selectedLineHighlightBg": "rgba(255,223,93,0.2)",
+        "selectedLineHighlightBorder": "#ffd33d",
+        "expander": {
+            "icon": "#586069",
+            "hoverIcon": "#ffffff",
+            "hoverBg": "#0366d6"
+        },
+        "commentButton": {
+            "icon": "#ffffff",
+            "bg": "#0366d6",
+            "gradientBg": "#0372ef"
+        }
+    },
     "globalNav": {
@@ -818,3 +693,35 @@ "logo": "#ffffff",
         }
+    },
+    "topicTag": {
+        "text": "#0366d6",
+        "bg": "#f1f8ff",
+        "hoverBg": "#ddeeff",
+        "activeBg": "#e7f3ff"
+    },
+    "mergeBox": {
+        "successIconBg": "#28a745",
+        "successIconText": "#ffffff",
+        "successIconBorder": "rgba(0,0,0,0)",
+        "successIndicatorBg": "#28a745",
+        "successIndicatorBorder": "rgba(0,0,0,0)",
+        "mergedIconBg": "#6f42c1",
+        "mergedIconText": "#ffffff",
+        "mergedIconBorder": "rgba(0,0,0,0)",
+        "mergedBoxBorder": "#6f42c1",
+        "neutralIconBg": "#6a737d",
+        "neutralIconText": "#ffffff",
+        "neutralIconBorder": "rgba(0,0,0,0)",
+        "neutralIndicatorBg": "#6a737d",
+        "neutralIndicatorBorder": "rgba(0,0,0,0)",
+        "warningIconBg": "#dbab09",
+        "warningIconText": "#ffffff",
+        "warningIconBorder": "rgba(0,0,0,0)",
+        "warningBoxBorder": "#ffd33d",
+        "warningMergeHighlight": "rgba(0,0,0,0)",
+        "errorIconBg": "#d73a49",
+        "errorIconText": "#ffffff",
+        "errorIconBorder": "rgba(0,0,0,0)",
+        "errorIndicatorBg": "#d73a49",
+        "errorIndicatorBorder": "rgba(0,0,0,0)"
     }
 };

dist/js/index.d.ts

@@ -39,2 +39,3 @@ declare const _default: {
                 warning: string;
+                white: string;
             };
@@ -64,2 +65,3 @@ icon: {
                 canvasInverse: string;
+                canvasInset: string;
                 primary: string;
@@ -79,6 +81,6 @@ secondary: string;
             shadow: {
-                small: string[];
-                medium: string[];
-                large: string[];
-                extraLarge: string[];
+                small: string;
+                medium: string;
+                large: string;
+                extraLarge: string;
                 highlight: string;
@@ -104,22 +106,18 @@ inset: string;
                     border: string;
-                    shadow: string[];
+                    shadow: string;
                 };
             };
             fade: {
-                black: {
-                    10: string;
-                    15: string;
-                    30: string;
-                    50: string;
-                    70: string;
-                    85: string;
-                };
-                white: {
-                    10: string;
-                    15: string;
-                    30: string;
-                    50: string;
-                    70: string;
-                    85: string;
-                };
+                black10: string;
+                black15: string;
+                black30: string;
+                black50: string;
+                black70: string;
+                black85: string;
+                white10: string;
+                white15: string;
+                white30: string;
+                white50: string;
+                white70: string;
+                white85: string;
             };
@@ -155,3 +153,3 @@ alert: {
                 border: string;
-                shadow: string[];
+                shadow: string;
                 rowBorder: string;
@@ -163,26 +161,32 @@ };
             btn: {
+                text: string;
                 bg: string;
                 border: string;
-                text: string;
-                ic: string;
                 shadow: string;
-                shadowHighlight: string;
-                bgHover: string;
-                bgActive: string;
-                shadowActive: string[];
-                shadowInputFocus: string[];
+                insetShadow: string;
+                hoverBg: string;
+                hoverBorder: string;
+                selectedBg: string;
+                focusBg: string;
+                focusBorder: string;
+                focusShadow: string;
+                shadowActive: string;
+                shadowInputFocus: string;
                 primary: {
+                    text: string;
                     bg: string;
                     border: string;
-                    borderDisabled: string;
-                    text: string;
-                    ic: string;
                     shadow: string;
-                    shadowHighlight: string;
-                    shadowSelected: string;
-                    bgHover: string;
-                    bgActive: string;
-                    bgDisabled: string;
+                    insetShadow: string;
+                    hoverBg: string;
+                    hoverBorder: string;
+                    selectedBg: string;
+                    selectedShadow: string;
                     disabledText: string;
-                    disabledShadow: string;
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBg: string;
+                    focusBorder: string;
+                    focusShadow: string;
+                    icon: string;
                     counterBg: string;
@@ -195,4 +199,4 @@ };
                     hoverBorder: string;
-                    hoverShadow: string[];
-                    hoverInsetShadow: string[];
+                    hoverShadow: string;
+                    hoverInsetShadow: string;
                     hoverCounterBg: string;
@@ -202,6 +206,8 @@ selectedText: string;
                     selectedBorder: string;
-                    selectedShadow: string[];
+                    selectedShadow: string;
                     disabledText: string;
+                    disabledBg: string;
                     disabledCounterBg: string;
-                    focusShadow: string[];
+                    focusBorder: string;
+                    focusShadow: string;
                     counterBg: string;
@@ -220,6 +226,8 @@ };
                     selectedBorder: string;
-                    selectedShadow: string[];
+                    selectedShadow: string;
                     disabledText: string;
+                    disabledBg: string;
                     disabledCounterBg: string;
-                    focusShadow: string[];
+                    focusBorder: string;
+                    focusShadow: string;
                     counterBg: string;
@@ -243,3 +251,3 @@ };
                 border: string;
-                shadow: string[];
+                shadow: string;
             };
@@ -273,7 +281,2 @@ label: {
             };
-            topic: {
-                tagBg: string;
-                tagBorder: string;
-                tagText: string;
-            };
             input: {
@@ -310,3 +313,3 @@ bg: string;
                 stackFadeMore: string;
-                childShadow: string[];
+                childShadow: string;
             };
@@ -326,3 +329,3 @@ toast: {
                 borderSecondary: string;
-                shadow: string[];
+                shadow: string;
                 backdropBg: string;
@@ -418,19 +421,47 @@ backdropBorder: string;
             };
-            iconFolder: string;
-            hlAuthorBg: string;
-            hlAuthorBorder: string;
-            logoSubdued: string;
-            discussionBorder: string;
-            diff: {
+            diffstat: {
                 neutralBg: string;
                 neutralBorder: string;
                 deletionBg: string;
-                deletionBgStrong: string;
                 deletionBorder: string;
-                deletionBorderStrong: string;
                 additionBg: string;
-                additionBgStrong: string;
                 additionBorder: string;
-                additionBorderStrong: string;
             };
+            iconFolder: string;
+            hlAuthorBg: string;
+            hlAuthorBorder: string;
+            logoSubdued: string;
+            discussionBorder: string;
+            diffBlob: {
+                numText: string;
+                numHoverText: string;
+                addition: {
+                    numBg: string;
+                    lineBg: string;
+                    wordBg: string;
+                };
+                deletion: {
+                    numBg: string;
+                    lineBg: string;
+                    wordBg: string;
+                };
+                hunk: {
+                    text: string;
+                    numBg: string;
+                    lineBg: string;
+                };
+                emptyBlockBg: string;
+                selectedLineHighlightBg: string;
+                selectedLineHighlightBorder: string;
+                expander: {
+                    icon: string;
+                    hoverIcon: string;
+                    hoverBg: string;
+                };
+                commentButton: {
+                    icon: string;
+                    bg: string;
+                    gradientBg: string;
+                };
+            };
             globalNav: {
@@ -484,2 +515,34 @@ logo: string;
             };
+            topicTag: {
+                text: string;
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+            };
+            mergeBox: {
+                successIconBg: string;
+                successIconText: string;
+                successIconBorder: string;
+                successIndicatorBg: string;
+                successIndicatorBorder: string;
+                mergedIconBg: string;
+                mergedIconText: string;
+                mergedIconBorder: string;
+                mergedBoxBorder: string;
+                neutralIconBg: string;
+                neutralIconText: string;
+                neutralIconBorder: string;
+                neutralIndicatorBg: string;
+                neutralIndicatorBorder: string;
+                warningIconBg: string;
+                warningIconText: string;
+                warningIconBorder: string;
+                warningBoxBorder: string;
+                warningMergeHighlight: string;
+                errorIconBg: string;
+                errorIconText: string;
+                errorIconBorder: string;
+                errorIndicatorBg: string;
+                errorIndicatorBorder: string;
+            };
         };
@@ -522,2 +585,3 @@ light: {
                 warning: string;
+                white: string;
             };
@@ -547,2 +611,3 @@ icon: {
                 canvasInverse: string;
+                canvasInset: string;
                 primary: string;
@@ -562,8 +627,8 @@ secondary: string;
             shadow: {
-                small: string[];
-                medium: string[];
-                large: string[];
-                extraLarge: string[];
-                highlight: string[];
-                inset: string[];
+                small: string;
+                medium: string;
+                large: string;
+                extraLarge: string;
+                highlight: string;
+                inset: string;
             };
@@ -587,22 +652,18 @@ state: {
                     border: string;
-                    shadow: string[];
+                    shadow: string;
                 };
             };
             fade: {
-                black: {
-                    10: string;
-                    15: string;
-                    30: string;
-                    50: string;
-                    70: string;
-                    85: string;
-                };
-                white: {
-                    10: string;
-                    15: string;
-                    30: string;
-                    50: string;
-                    70: string;
-                    85: string;
-                };
+                black10: string;
+                black15: string;
+                black30: string;
+                black50: string;
+                black70: string;
+                black85: string;
+                white10: string;
+                white15: string;
+                white30: string;
+                white50: string;
+                white70: string;
+                white85: string;
             };
@@ -638,3 +699,3 @@ alert: {
                 border: string;
-                shadow: string[];
+                shadow: string;
                 rowBorder: string;
@@ -646,26 +707,32 @@ };
             btn: {
+                text: string;
                 bg: string;
                 border: string;
-                text: string;
-                ic: string;
-                shadow: string[];
-                shadowHighlight: string[];
-                bgHover: string;
-                bgActive: string;
-                shadowActive: string[];
-                shadowInputFocus: string[];
+                shadow: string;
+                insetShadow: string;
+                hoverBg: string;
+                hoverBorder: string;
+                selectedBg: string;
+                focusBg: string;
+                focusBorder: string;
+                focusShadow: string;
+                shadowActive: string;
+                shadowInputFocus: string;
                 primary: {
+                    text: string;
                     bg: string;
                     border: string;
-                    borderDisabled: string;
-                    text: string;
-                    ic: string;
-                    shadow: string[];
-                    shadowHighlight: string[];
-                    shadowSelected: string[];
-                    bgHover: string;
-                    bgActive: string;
-                    bgDisabled: string;
+                    shadow: string;
+                    insetShadow: string;
+                    hoverBg: string;
+                    hoverBorder: string;
+                    selectedBg: string;
+                    selectedShadow: string;
                     disabledText: string;
-                    disabledShadow: string[];
+                    disabledBg: string;
+                    disabledBorder: string;
+                    focusBg: string;
+                    focusBorder: string;
+                    focusShadow: string;
+                    icon: string;
                     counterBg: string;
@@ -678,4 +745,4 @@ };
                     hoverBorder: string;
-                    hoverShadow: string[];
-                    hoverInsetShadow: string[];
+                    hoverShadow: string;
+                    hoverInsetShadow: string;
                     hoverCounterBg: string;
@@ -685,6 +752,8 @@ selectedText: string;
                     selectedBorder: string;
-                    selectedShadow: string[];
+                    selectedShadow: string;
                     disabledText: string;
+                    disabledBg: string;
                     disabledCounterBg: string;
-                    focusShadow: string[];
+                    focusBorder: string;
+                    focusShadow: string;
                     counterBg: string;
@@ -697,4 +766,4 @@ };
                     hoverBorder: string;
-                    hoverShadow: string[];
-                    hoverInsetShadow: string[];
+                    hoverShadow: string;
+                    hoverInsetShadow: string;
                     hoverCounterBg: string;
@@ -704,6 +773,8 @@ selectedText: string;
                     selectedBorder: string;
-                    selectedShadow: string[];
+                    selectedShadow: string;
                     disabledText: string;
+                    disabledBg: string;
                     disabledCounterBg: string;
-                    focusShadow: string[];
+                    focusBorder: string;
+                    focusShadow: string;
                     counterBg: string;
@@ -727,3 +798,3 @@ };
                 border: string;
-                shadow: string[];
+                shadow: string;
             };
@@ -757,7 +828,2 @@ label: {
             };
-            topic: {
-                tagBg: string;
-                tagBorder: string;
-                tagText: string;
-            };
             input: {
@@ -767,3 +833,3 @@ bg: string;
                 border: string;
-                shadow: string[];
+                shadow: string;
                 disabledBg: string;
@@ -795,3 +861,3 @@ disabledBorder: string;
                 stackFadeMore: string;
-                childShadow: string[];
+                childShadow: string;
             };
@@ -811,3 +877,3 @@ toast: {
                 borderSecondary: string;
-                shadow: string[];
+                shadow: string;
                 backdropBg: string;
@@ -903,19 +969,47 @@ backdropBorder: string;
             };
-            iconFolder: string;
-            hlAuthorBg: string;
-            hlAuthorBorder: string;
-            logoSubdued: string;
-            discussionBorder: string;
-            diff: {
+            diffstat: {
                 neutralBg: string;
                 neutralBorder: string;
                 deletionBg: string;
-                deletionBgStrong: string;
                 deletionBorder: string;
-                deletionBorderStrong: string;
                 additionBg: string;
-                additionBgStrong: string;
                 additionBorder: string;
-                additionBorderStrong: string;
             };
+            iconFolder: string;
+            hlAuthorBg: string;
+            hlAuthorBorder: string;
+            logoSubdued: string;
+            discussionBorder: string;
+            diffBlob: {
+                numText: string;
+                numHoverText: string;
+                addition: {
+                    numBg: string;
+                    lineBg: string;
+                    wordBg: string;
+                };
+                deletion: {
+                    numBg: string;
+                    lineBg: string;
+                    wordBg: string;
+                };
+                hunk: {
+                    text: string;
+                    numBg: string;
+                    lineBg: string;
+                };
+                emptyBlockBg: string;
+                selectedLineHighlightBg: string;
+                selectedLineHighlightBorder: string;
+                expander: {
+                    icon: string;
+                    hoverIcon: string;
+                    hoverBg: string;
+                };
+                commentButton: {
+                    icon: string;
+                    bg: string;
+                    gradientBg: string;
+                };
+            };
             globalNav: {
@@ -969,2 +1063,34 @@ logo: string;
             };
+            topicTag: {
+                text: string;
+                bg: string;
+                hoverBg: string;
+                activeBg: string;
+            };
+            mergeBox: {
+                successIconBg: string;
+                successIconText: string;
+                successIconBorder: string;
+                successIndicatorBg: string;
+                successIndicatorBorder: string;
+                mergedIconBg: string;
+                mergedIconText: string;
+                mergedIconBorder: string;
+                mergedBoxBorder: string;
+                neutralIconBg: string;
+                neutralIconText: string;
+                neutralIconBorder: string;
+                neutralIndicatorBg: string;
+                neutralIndicatorBorder: string;
+                warningIconBg: string;
+                warningIconText: string;
+                warningIconBorder: string;
+                warningBoxBorder: string;
+                warningMergeHighlight: string;
+                errorIconBg: string;
+                errorIconText: string;
+                errorIconBorder: string;
+                errorIndicatorBg: string;
+                errorIndicatorBorder: string;
+            };
         };
@@ -971,0 +1097,0 @@ };

dist/json/colors/dark.json

@@ -212,3 +212,4 @@ {
     "success": "#56d364",
-    "warning": "#e3b341"
+    "warning": "#e3b341",
+    "white": "#f0f6fc"
   },
@@ -238,2 +239,3 @@ "icon": {
     "canvasInverse": "#f0f6fc",
+    "canvasInset": "#06090f",
     "primary": "#0d1117",
@@ -253,28 +255,8 @@ "secondary": "#0d1117",
   "shadow": {
-    "small": [
-      "0",
-      "1px",
-      "0",
-      "rgba(0,0,0,0)"
-    ],
-    "medium": [
-      "0",
-      "3px",
-      "6px",
-      "#010409"
-    ],
-    "large": [
-      "0",
-      "8px",
-      "24px",
-      "#010409"
-    ],
-    "extraLarge": [
-      "0",
-      "12px",
-      "48px",
-      "#010409"
-    ],
-    "highlight": "rgba(0,0,0,0)",
-    "inset": "rgba(0,0,0,0)"
+    "small": "0 0 rgba(0,0,0,0)",
+    "medium": "0 3px 6px #010409",
+    "large": "0 8px 24px #010409",
+    "extraLarge": "0 12px 48px #010409",
+    "highlight": "0 0 rgba(0,0,0,0)",
+    "inset": "0 0 rgba(0,0,0,0)"
   },
@@ -298,28 +280,18 @@ "state": {
       "border": "#388bfd",
-      "shadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "#0c2d6b"
-      ]
+      "shadow": "0 0 0 3px #0c2d6b"
     }
   },
   "fade": {
-    "black": {
-      "10": "rgba(1,4,9,0.1)",
-      "15": "rgba(1,4,9,0.15)",
-      "30": "rgba(1,4,9,0.3)",
-      "50": "rgba(1,4,9,0.5)",
-      "70": "rgba(1,4,9,0.7)",
-      "85": "rgba(1,4,9,0.85)"
-    },
-    "white": {
-      "10": "rgba(240,246,252,0.1)",
-      "15": "rgba(240,246,252,0.15)",
-      "30": "rgba(240,246,252,0.3)",
-      "50": "rgba(240,246,252,0.5)",
-      "70": "rgba(240,246,252,0.7)",
-      "85": "rgba(240,246,252,0.85)"
-    }
+    "black10": "rgba(1,4,9,0.1)",
+    "black15": "rgba(1,4,9,0.15)",
+    "black30": "rgba(1,4,9,0.3)",
+    "black50": "rgba(1,4,9,0.5)",
+    "black70": "rgba(1,4,9,0.7)",
+    "black85": "rgba(1,4,9,0.85)",
+    "white10": "rgba(240,246,252,0.1)",
+    "white15": "rgba(240,246,252,0.15)",
+    "white30": "rgba(240,246,252,0.3)",
+    "white50": "rgba(240,246,252,0.5)",
+    "white70": "rgba(240,246,252,0.7)",
+    "white85": "rgba(240,246,252,0.85)"
   },
@@ -355,8 +327,3 @@ "alert": {
     "border": "#484f58",
-    "shadow": [
-      "0",
-      "16px",
-      "32px",
-      "rgba(1,4,9,0.85)"
-    ],
+    "shadow": "0 16px 32px rgba(1,4,9,0.85)",
     "rowBorder": "#30363d"
@@ -368,38 +335,32 @@ },
   "btn": {
+    "text": "#f0f6fc",
     "bg": "#21262d",
-    "border": "rgba(240,246,252,0.1)",
-    "text": "#f0f6fc",
-    "ic": "#6e7681",
-    "shadow": "rgba(0,0,0,0)",
-    "shadowHighlight": "rgba(0,0,0,0)",
-    "bgHover": "#30363d",
-    "bgActive": "#21262d",
-    "shadowActive": [
-      "inset",
-      "0",
-      "0.15em",
-      "0.3em",
-      "rgba(1,4,9,0.15)"
-    ],
-    "shadowInputFocus": [
-      "0",
-      "0",
-      "0",
-      "0.2em",
-      "rgba(31,111,235,0.3)"
-    ],
+    "border": "#30363d",
+    "shadow": "0 0 rgba(0,0,0,0)",
+    "insetShadow": "0 0 rgba(0,0,0,0)",
+    "hoverBg": "#30363d",
+    "hoverBorder": "#8b949e",
+    "selectedBg": "#161b22",
+    "focusBg": "#21262d",
+    "focusBorder": "#8b949e",
+    "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
+    "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
+    "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
     "primary": {
+      "text": "#ffffff",
       "bg": "#238636",
       "border": "#2ea043",
-      "borderDisabled": "#238636",
-      "text": "#f0f6fc",
-      "ic": "#f0f6fc",
-      "shadow": "rgba(0,0,0,0)",
-      "shadowHighlight": "rgba(0,0,0,0)",
-      "shadowSelected": "rgba(0,0,0,0)",
-      "bgHover": "#2ea043",
-      "bgActive": "#238636",
-      "bgDisabled": "#238636",
+      "shadow": "0 0 rgba(0,0,0,0)",
+      "insetShadow": "0 0 rgba(0,0,0,0)",
+      "hoverBg": "#2ea043",
+      "hoverBorder": "#3fb950",
+      "selectedBg": "#238636",
+      "selectedShadow": "0 0 rgba(0,0,0,0)",
       "disabledText": "rgba(240,246,252,0.5)",
-      "disabledShadow": "rgba(0,0,0,0)",
+      "disabledBg": "#238636",
+      "disabledBorder": "#238636",
+      "focusBg": "#238636",
+      "focusBorder": "#3fb950",
+      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
+      "icon": "#f0f6fc",
       "counterBg": "rgba(240,246,252,0.2)"
@@ -412,35 +373,14 @@ },
       "hoverBorder": "#58a6ff",
-      "hoverShadow": [
-        "0",
-        "1px",
-        "0",
-        "rgba(1,4,9,0.1)"
-      ],
-      "hoverInsetShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(240,246,252,0.03)"
-      ],
+      "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
+      "hoverInsetShadow": "inset 0 1px 0 rgba(240,246,252,0.03)",
       "hoverCounterBg": "rgba(240,246,252,0.2)",
       "selectedText": "#f0f6fc",
-      "selectedBg": "#1567e6",
-      "selectedBorder": "rgba(1,4,9,0.15)",
-      "selectedShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(5,29,77,0.2)"
-      ],
+      "selectedBg": "#0d419d",
+      "selectedBorder": "rgba(240,246,252,0.1)",
+      "selectedShadow": "0 0 rgba(0,0,0,0)",
       "disabledText": "#58a6ff",
+      "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(31,111,235,0.05)",
-      "focusShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(17,88,199,0.4)"
-      ],
+      "focusBorder": "#58a6ff",
+      "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)",
       "counterBg": "rgba(31,111,235,0.1)"
@@ -450,27 +390,17 @@ },
       "text": "#f85149",
-      "hoverText": "#f0f6fc",
+      "hoverText": "#ffffff",
       "hoverBg": "#da3633",
       "hoverBorder": "#f85149",
-      "hoverShadow": "rgba(0,0,0,0)",
-      "hoverInsetShadow": "rgba(0,0,0,0)",
-      "hoverCounterBg": "rgba(240,246,252,0.2)",
-      "selectedText": "#f0f6fc",
-      "selectedBg": "#d72a27",
-      "selectedBorder": "rgba(1,4,9,0.15)",
-      "selectedShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(73,2,2,0.2)"
-      ],
+      "hoverShadow": "0 0 rgba(0,0,0,0)",
+      "hoverInsetShadow": "0 0 rgba(0,0,0,0)",
+      "hoverCounterBg": "rgba(255,255,255,0.2)",
+      "selectedText": "#ffffff",
+      "selectedBg": "#b62324",
+      "selectedBorder": "rgba(240,246,252,0.1)",
+      "selectedShadow": "0 0 rgba(0,0,0,0)",
       "disabledText": "#f85149",
+      "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(218,54,51,0.05)",
-      "focusShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(182,35,36,0.4)"
-      ],
+      "focusBorder": "#f85149",
+      "focusShadow": "0 0 0 3px rgba(182,35,36,0.4)",
       "counterBg": "rgba(218,54,51,0.1)"
@@ -494,8 +424,3 @@ },
     "border": "#484f58",
-    "shadow": [
-      "0",
-      "16px",
-      "32px",
-      "rgba(1,4,9,0.85)"
-    ]
+    "shadow": "0 16px 32px rgba(1,4,9,0.85)"
   },
@@ -529,7 +454,2 @@ "label": {
   },
-  "topic": {
-    "tagBg": "#051d4d",
-    "tagBorder": "#051d4d",
-    "tagText": "#388bfd"
-  },
   "input": {
@@ -539,3 +459,3 @@ "bg": "#0d1117",
     "border": "rgba(240,246,252,0.1)",
-    "shadow": "rgba(0,0,0,0)",
+    "shadow": "0 0 rgba(0,0,0,0)",
     "disabledBg": "#161b22",
@@ -567,8 +487,3 @@ "disabledBorder": "#30363d",
     "stackFadeMore": "#21262d",
-    "childShadow": [
-      "-2px",
-      "-2px",
-      "0",
-      "#0d1117"
-    ]
+    "childShadow": "-2px -2px 0 #0d1117"
   },
@@ -588,8 +503,3 @@ "toast": {
     "borderSecondary": "#30363d",
-    "shadow": [
-      "0",
-      "0",
-      "18px",
-      "rgba(1,4,9,0.4)"
-    ],
+    "shadow": "0 0 18px rgba(1,4,9,0.4)",
     "backdropBg": "rgba(1,4,9,0.5)",
@@ -601,7 +511,7 @@ "backdropBorder": "#484f58",
   "box": {
-    "blueBorder": "#0d419d",
-    "rowYellowBg": "rgba(235,196,64,0.1)",
-    "rowBlueBg": "rgba(121,192,255,0.1)",
-    "headerBlueBg": "#0d1117",
-    "headerBlueBorder": "#30363d"
+    "blueBorder": "rgba(56,139,253,0.4)",
+    "rowYellowBg": "rgba(187,128,9,0.1)",
+    "rowBlueBg": "rbga(#388BFD, 0.1)",
+    "headerBlueBg": "rbga(#388BFD, 0.1)",
+    "headerBlueBorder": "rgba(56,139,253,0.4)"
   },
@@ -637,3 +547,3 @@ "popover": {
   "tabnav": {
-    "selectedBg": "#161b22"
+    "selectedBg": "#0d1117"
   },
@@ -687,19 +597,47 @@ "header": {
   },
-  "iconFolder": "#6e7681",
-  "hlAuthorBg": "#051d4d",
-  "hlAuthorBorder": "#0d419d",
-  "logoSubdued": "#30363d",
-  "discussionBorder": "#34513b",
-  "diff": {
+  "diffstat": {
     "neutralBg": "#30363d",
     "neutralBorder": "rgba(240,246,252,0.1)",
     "deletionBg": "#da3633",
-    "deletionBgStrong": "#f0f6fc",
     "deletionBorder": "#f85149",
-    "deletionBorderStrong": "#f0f6fc",
     "additionBg": "#238636",
-    "additionBgStrong": "#f0f6fc",
-    "additionBorder": "#2ea043",
-    "additionBorderStrong": "#f0f6fc"
+    "additionBorder": "#2ea043"
   },
+  "iconFolder": "#6e7681",
+  "hlAuthorBg": "#051d4d",
+  "hlAuthorBorder": "#0d419d",
+  "logoSubdued": "#30363d",
+  "discussionBorder": "#34513b",
+  "diffBlob": {
+    "numText": "rgba(240,246,252,0.3)",
+    "numHoverText": "rgba(240,246,252,0.6)",
+    "addition": {
+      "numBg": "rgba(35,134,54,0.3)",
+      "lineBg": "rgba(35,134,54,0.15)",
+      "wordBg": "rgba(35,134,54,0.3)"
+    },
+    "deletion": {
+      "numBg": "rgba(218,54,51,0.3)",
+      "lineBg": "rgba(218,54,51,0.15)",
+      "wordBg": "rgba(218,54,51,0.3)"
+    },
+    "hunk": {
+      "text": "#8b949e",
+      "numBg": "rgba(88,166,255,0.15)",
+      "lineBg": "rgba(88,166,255,0.1)"
+    },
+    "emptyBlockBg": "#161b22",
+    "selectedLineHighlightBg": "rgba(187,128,9,0.1)",
+    "selectedLineHighlightBorder": "#bb8009",
+    "expander": {
+      "icon": "#8b949e",
+      "hoverIcon": "#f0f6fc",
+      "hoverBg": "#1f6feb"
+    },
+    "commentButton": {
+      "icon": "#f0f6fc",
+      "bg": "#1f6feb",
+      "gradientBg": "#367eed"
+    }
+  },
   "globalNav": {
@@ -752,3 +690,35 @@ "logo": "#f0f6fc",
     }
+  },
+  "topicTag": {
+    "text": "#58a6ff",
+    "bg": "rgba(56,139,253,0.1)",
+    "hoverBg": "rgba(56,139,253,0.2)",
+    "activeBg": "rgba(56,139,253,0.15)"
+  },
+  "mergeBox": {
+    "successIconBg": "rgba(46,160,67,0.1)",
+    "successIconText": "#3fb950",
+    "successIconBorder": "rgba(46,160,67,0.4)",
+    "successIndicatorBg": "#238636",
+    "successIndicatorBorder": "#2ea043",
+    "mergedIconBg": "rgba(188,140,255,0.1)",
+    "mergedIconText": "#a371f7",
+    "mergedIconBorder": "rgba(188,140,255,0.4)",
+    "mergedBoxBorder": "rgba(188,140,255,0.4)",
+    "neutralIconBg": "rgba(213,221,229,0.1)",
+    "neutralIconText": "#8b949e",
+    "neutralIconBorder": "rgba(213,221,229,0.4)",
+    "neutralIndicatorBg": "#484f58",
+    "neutralIndicatorBorder": "#6e7681",
+    "warningIconBg": "rgba(187,128,9,0.1)",
+    "warningIconText": "#e3b341",
+    "warningIconBorder": "rgba(187,128,9,0.4)",
+    "warningBoxBorder": "rgba(187,128,9,0.4)",
+    "warningMergeHighlight": "rgba(187,128,9,0.1)",
+    "errorIconBg": "rgba(248,81,73,0.1)",
+    "errorIconText": "#f85149",
+    "errorIconBorder": "rgba(248,81,73,0.4)",
+    "errorIndicatorBg": "#da3633",
+    "errorIndicatorBorder": "#f85149"
   }
 }

dist/json/colors/light.json

@@ -212,3 +212,4 @@ {
     "success": "#22863a",
-    "warning": "#b08800"
+    "warning": "#b08800",
+    "white": "#ffffff"
   },
@@ -238,2 +239,3 @@ "icon": {
     "canvasInverse": "#24292e",
+    "canvasInset": "#f6f8fa",
     "primary": "#ffffff",
@@ -253,40 +255,8 @@ "secondary": "#fafbfc",
   "shadow": {
-    "small": [
-      "0",
-      "1px",
-      "0",
-      "rgba(27,31,35,0.04)"
-    ],
-    "medium": [
-      "0",
-      "3px",
-      "6px",
-      "rgba(149,157,165,0.15)"
-    ],
-    "large": [
-      "0",
-      "8px",
-      "24px",
-      "rgba(149,157,165,0.2)"
-    ],
-    "extraLarge": [
-      "0",
-      "12px",
-      "48px",
-      "rgba(149,157,165,0.3)"
-    ],
-    "highlight": [
-      "inset",
-      "0",
-      "1px",
-      "0",
-      "rgba(255,255,255,0.25)"
-    ],
-    "inset": [
-      "inset",
-      "0",
-      "1px",
-      "0",
-      "rgba(225,228,232,0.2)"
-    ]
+    "small": "0 1px 0 rgba(27,31,35,0.04)",
+    "medium": "0 3px 6px rgba(149,157,165,0.15)",
+    "large": "0 8px 24px rgba(149,157,165,0.2)",
+    "extraLarge": "0 12px 48px rgba(149,157,165,0.3)",
+    "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
+    "inset": "inset 0 1px 0 rgba(225,228,232,0.2)"
   },
@@ -310,28 +280,18 @@ "state": {
       "border": "#0366d6",
-      "shadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(3,102,214,0.3)"
-      ]
+      "shadow": "0 0 0 3px rgba(3,102,214,0.3)"
     }
   },
   "fade": {
-    "black": {
-      "10": "rgba(27,31,35,0.1)",
-      "15": "rgba(27,31,35,0.15)",
-      "30": "rgba(27,31,35,0.3)",
-      "50": "rgba(27,31,35,0.5)",
-      "70": "rgba(27,31,35,0.7)",
-      "85": "rgba(27,31,35,0.85)"
-    },
-    "white": {
-      "10": "rgba(255,255,255,0.1)",
-      "15": "rgba(255,255,255,0.15)",
-      "30": "rgba(255,255,255,0.3)",
-      "50": "rgba(255,255,255,0.5)",
-      "70": "rgba(255,255,255,0.7)",
-      "85": "rgba(255,255,255,0.85)"
-    }
+    "black10": "rgba(27,31,35,0.1)",
+    "black15": "rgba(27,31,35,0.15)",
+    "black30": "rgba(27,31,35,0.3)",
+    "black50": "rgba(27,31,35,0.5)",
+    "black70": "rgba(27,31,35,0.7)",
+    "black85": "rgba(27,31,35,0.85)",
+    "white10": "rgba(255,255,255,0.1)",
+    "white15": "rgba(255,255,255,0.15)",
+    "white30": "rgba(255,255,255,0.3)",
+    "white50": "rgba(255,255,255,0.5)",
+    "white70": "rgba(255,255,255,0.7)",
+    "white85": "rgba(255,255,255,0.85)"
   },
@@ -367,8 +327,3 @@ "alert": {
     "border": "#e1e4e8",
-    "shadow": [
-      "0",
-      "3px",
-      "6px",
-      "rgba(149,157,165,0.15)"
-    ],
+    "shadow": "0 3px 6px rgba(149,157,165,0.15)",
     "rowBorder": "#eaecef"
@@ -380,72 +335,32 @@ },
   "btn": {
+    "text": "#24292e",
     "bg": "#fafbfc",
     "border": "rgba(27,31,35,0.15)",
-    "text": "#24292e",
-    "ic": "#6a737d",
-    "shadow": [
-      "0",
-      "1px",
-      "0",
-      "rgba(27,31,35,0.04)"
-    ],
-    "shadowHighlight": [
-      "inset",
-      "0",
-      "1px",
-      "0",
-      "rgba(255,255,255,0.25)"
-    ],
-    "bgHover": "#f3f4f6",
-    "bgActive": "#edeff2",
-    "shadowActive": [
-      "inset",
-      "0",
-      "0.15em",
-      "0.3em",
-      "rgba(27,31,35,0.15)"
-    ],
-    "shadowInputFocus": [
-      "0",
-      "0",
-      "0",
-      "0.2em",
-      "rgba(3,102,214,0.3)"
-    ],
+    "shadow": "0 1px 0 rgba(27,31,35,0.04)",
+    "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+    "hoverBg": "#f3f4f6",
+    "hoverBorder": "rgba(27,31,35,0.15)",
+    "selectedBg": "#edeff2",
+    "focusBg": "#fafbfc",
+    "focusBorder": "rgba(27,31,35,0.15)",
+    "focusShadow": "0 0 0 3px rgba(3,102,214,0.3)",
+    "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,35,0.15)",
+    "shadowInputFocus": "0 0 0 0.2em rgba(3,102,214,0.3)",
     "primary": {
+      "text": "#ffffff",
       "bg": "#2ea44f",
       "border": "rgba(27,31,35,0.15)",
-      "borderDisabled": "rgba(27,31,35,0.1)",
-      "text": "#ffffff",
-      "ic": "rgba(255,255,255,0.8)",
-      "shadow": [
-        "0",
-        "1px",
-        "0",
-        "rgba(27,31,35,0.1)"
-      ],
-      "shadowHighlight": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(255,255,255,0.03)"
-      ],
-      "shadowSelected": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(20,70,32,0.2)"
-      ],
-      "bgHover": "#2c974b",
-      "bgActive": "#2a8f47",
-      "bgDisabled": "#94d3a2",
+      "shadow": "0 1px 0 rgba(27,31,35,0.1)",
+      "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
+      "hoverBg": "#2c974b",
+      "hoverBorder": "rgba(27,31,35,0.15)",
+      "selectedBg": "#2a8f47",
+      "selectedShadow": "inset 0 1px 0 rgba(20,70,32,0.2)",
       "disabledText": "rgba(255,255,255,0.8)",
-      "disabledShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(46,164,79,0.4)"
-      ],
+      "disabledBg": "#94d3a2",
+      "disabledBorder": "rgba(27,31,35,0.1)",
+      "focusBg": "#2ea44f",
+      "focusBorder": "rgba(27,31,35,0.15)",
+      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
+      "icon": "rgba(255,255,255,0.8)",
       "counterBg": "rgba(255,255,255,0.2)"
@@ -458,15 +373,4 @@ },
       "hoverBorder": "rgba(27,31,35,0.15)",
-      "hoverShadow": [
-        "0",
-        "1px",
-        "0",
-        "rgba(27,31,35,0.1)"
-      ],
-      "hoverInsetShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(255,255,255,0.03)"
-      ],
+      "hoverShadow": "0 1px 0 rgba(27,31,35,0.1)",
+      "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
       "hoverCounterBg": "rgba(255,255,255,0.2)",
@@ -476,18 +380,8 @@ "selectedText": "#ffffff",
       "selectedBorder": "rgba(27,31,35,0.15)",
-      "selectedShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(5,38,76,0.2)"
-      ],
+      "selectedShadow": "inset 0 1px 0 rgba(5,38,76,0.2)",
       "disabledText": "rgba(3,102,214,0.5)",
+      "disabledBg": "#fafbfc",
       "disabledCounterBg": "rgba(3,102,214,0.05)",
-      "focusShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(0,92,197,0.4)"
-      ],
+      "focusBorder": "rgba(27,31,35,0.15)",
+      "focusShadow": "0 0 0 3px rgba(0,92,197,0.4)",
       "counterBg": "rgba(3,102,214,0.1)"
@@ -500,15 +394,4 @@ },
       "hoverBorder": "rgba(27,31,35,0.15)",
-      "hoverShadow": [
-        "0",
-        "1px",
-        "0",
-        "rgba(27,31,35,0.1)"
-      ],
-      "hoverInsetShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(255,255,255,0.03)"
-      ],
+      "hoverShadow": "0 1px 0 rgba(27,31,35,0.1)",
+      "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
       "hoverCounterBg": "rgba(255,255,255,0.2)",
@@ -518,18 +401,8 @@ "selectedText": "#ffffff",
       "selectedBorder": "rgba(27,31,35,0.15)",
-      "selectedShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(134,24,29,0.2)"
-      ],
+      "selectedShadow": "inset 0 1px 0 rgba(134,24,29,0.2)",
       "disabledText": "rgba(215,58,73,0.5)",
+      "disabledBg": "#fafbfc",
       "disabledCounterBg": "rgba(215,58,73,0.05)",
-      "focusShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(203,36,49,0.4)"
-      ],
+      "focusBorder": "rgba(27,31,35,0.15)",
+      "focusShadow": "0 0 0 3px rgba(203,36,49,0.4)",
       "counterBg": "rgba(215,58,73,0.1)"
@@ -553,8 +426,3 @@ },
     "border": "#e1e4e8",
-    "shadow": [
-      "0",
-      "8px",
-      "24px",
-      "rgba(149,157,165,0.2)"
-    ]
+    "shadow": "0 8px 24px rgba(149,157,165,0.2)"
   },
@@ -588,7 +456,2 @@ "label": {
   },
-  "topic": {
-    "tagBg": "#f1f8ff",
-    "tagBorder": "#f1f8ff",
-    "tagText": "#0366d6"
-  },
   "input": {
@@ -598,9 +461,3 @@ "bg": "#ffffff",
     "border": "#e1e4e8",
-    "shadow": [
-      "inset",
-      "0",
-      "1px",
-      "2px",
-      "rgba(27,31,35,0.075)"
-    ],
+    "shadow": "inset 0 1px 2px rgba(27,31,35,0.075)",
     "disabledBg": "#ffffff",
@@ -632,8 +489,3 @@ "disabledBorder": "#e1e4e8",
     "stackFadeMore": "#e1e4e8",
-    "childShadow": [
-      "-2px",
-      "-2px",
-      "0",
-      "rgba(255,255,255,0.8)"
-    ]
+    "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
   },
@@ -653,8 +505,3 @@ "toast": {
     "borderSecondary": "#eaecef",
-    "shadow": [
-      "0",
-      "0",
-      "18px",
-      "rgba(27,31,35,0.4)"
-    ],
+    "shadow": "0 0 18px rgba(27,31,35,0.4)",
     "backdropBg": "rgba(27,31,35,0.5)",
@@ -739,3 +586,3 @@ "backdropBorder": "rgba(0,0,0,0)",
   "verifiedBadge": {
-    "text": "#85e89d",
+    "text": "#22863a",
     "bg": "#ffffff",
@@ -751,19 +598,47 @@ "border": "#e1e4e8"
   },
-  "iconFolder": "#79b8ff",
-  "hlAuthorBg": "#f1f8ff",
-  "hlAuthorBorder": "#c8e1ff",
-  "logoSubdued": "#d1d5da",
-  "discussionBorder": "#a2cbac",
-  "diff": {
+  "diffstat": {
     "neutralBg": "#d1d5da",
     "neutralBorder": "#d1d5da",
     "deletionBg": "#d73a49",
-    "deletionBgStrong": "#1b1f23",
     "deletionBorder": "#d73a49",
-    "deletionBorderStrong": "#1b1f23",
     "additionBg": "#28a745",
-    "additionBgStrong": "#1b1f23",
-    "additionBorder": "#28a745",
-    "additionBorderStrong": "#1b1f23"
+    "additionBorder": "#28a745"
   },
+  "iconFolder": "#79b8ff",
+  "hlAuthorBg": "#f1f8ff",
+  "hlAuthorBorder": "#c8e1ff",
+  "logoSubdued": "#d1d5da",
+  "discussionBorder": "#a2cbac",
+  "diffBlob": {
+    "numText": "rgba(27,31,35,0.3)",
+    "numHoverText": "rgba(27,31,35,0.6)",
+    "addition": {
+      "numBg": "#cdffd8",
+      "lineBg": "#e6ffed",
+      "wordBg": "#acf2bd"
+    },
+    "deletion": {
+      "numBg": "#ffdce0",
+      "lineBg": "#ffeef0",
+      "wordBg": "#fdb8c0"
+    },
+    "hunk": {
+      "text": "rgba(27,31,35,0.7)",
+      "numBg": "#dbedff",
+      "lineBg": "#f1f8ff"
+    },
+    "emptyBlockBg": "#fafbfc",
+    "selectedLineHighlightBg": "rgba(255,223,93,0.2)",
+    "selectedLineHighlightBorder": "#ffd33d",
+    "expander": {
+      "icon": "#586069",
+      "hoverIcon": "#ffffff",
+      "hoverBg": "#0366d6"
+    },
+    "commentButton": {
+      "icon": "#ffffff",
+      "bg": "#0366d6",
+      "gradientBg": "#0372ef"
+    }
+  },
   "globalNav": {
@@ -816,3 +691,35 @@ "logo": "#ffffff",
     }
+  },
+  "topicTag": {
+    "text": "#0366d6",
+    "bg": "#f1f8ff",
+    "hoverBg": "#ddeeff",
+    "activeBg": "#e7f3ff"
+  },
+  "mergeBox": {
+    "successIconBg": "#28a745",
+    "successIconText": "#ffffff",
+    "successIconBorder": "rgba(0,0,0,0)",
+    "successIndicatorBg": "#28a745",
+    "successIndicatorBorder": "rgba(0,0,0,0)",
+    "mergedIconBg": "#6f42c1",
+    "mergedIconText": "#ffffff",
+    "mergedIconBorder": "rgba(0,0,0,0)",
+    "mergedBoxBorder": "#6f42c1",
+    "neutralIconBg": "#6a737d",
+    "neutralIconText": "#ffffff",
+    "neutralIconBorder": "rgba(0,0,0,0)",
+    "neutralIndicatorBg": "#6a737d",
+    "neutralIndicatorBorder": "rgba(0,0,0,0)",
+    "warningIconBg": "#dbab09",
+    "warningIconText": "#ffffff",
+    "warningIconBorder": "rgba(0,0,0,0)",
+    "warningBoxBorder": "#ffd33d",
+    "warningMergeHighlight": "rgba(0,0,0,0)",
+    "errorIconBg": "#d73a49",
+    "errorIconText": "#ffffff",
+    "errorIconBorder": "rgba(0,0,0,0)",
+    "errorIndicatorBg": "#d73a49",
+    "errorIndicatorBorder": "rgba(0,0,0,0)"
   }
 }

dist/ts/colors/dark.ts

@@ -212,3 +212,4 @@ export default {
     "success": "#56d364",
-    "warning": "#e3b341"
+    "warning": "#e3b341",
+    "white": "#f0f6fc"
   },
@@ -238,2 +239,3 @@ "icon": {
     "canvasInverse": "#f0f6fc",
+    "canvasInset": "#06090f",
     "primary": "#0d1117",
@@ -253,28 +255,8 @@ "secondary": "#0d1117",
   "shadow": {
-    "small": [
-      "0",
-      "1px",
-      "0",
-      "rgba(0,0,0,0)"
-    ],
-    "medium": [
-      "0",
-      "3px",
-      "6px",
-      "#010409"
-    ],
-    "large": [
-      "0",
-      "8px",
-      "24px",
-      "#010409"
-    ],
-    "extraLarge": [
-      "0",
-      "12px",
-      "48px",
-      "#010409"
-    ],
-    "highlight": "rgba(0,0,0,0)",
-    "inset": "rgba(0,0,0,0)"
+    "small": "0 0 rgba(0,0,0,0)",
+    "medium": "0 3px 6px #010409",
+    "large": "0 8px 24px #010409",
+    "extraLarge": "0 12px 48px #010409",
+    "highlight": "0 0 rgba(0,0,0,0)",
+    "inset": "0 0 rgba(0,0,0,0)"
   },
@@ -298,28 +280,18 @@ "state": {
       "border": "#388bfd",
-      "shadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "#0c2d6b"
-      ]
+      "shadow": "0 0 0 3px #0c2d6b"
     }
   },
   "fade": {
-    "black": {
-      "10": "rgba(1,4,9,0.1)",
-      "15": "rgba(1,4,9,0.15)",
-      "30": "rgba(1,4,9,0.3)",
-      "50": "rgba(1,4,9,0.5)",
-      "70": "rgba(1,4,9,0.7)",
-      "85": "rgba(1,4,9,0.85)"
-    },
-    "white": {
-      "10": "rgba(240,246,252,0.1)",
-      "15": "rgba(240,246,252,0.15)",
-      "30": "rgba(240,246,252,0.3)",
-      "50": "rgba(240,246,252,0.5)",
-      "70": "rgba(240,246,252,0.7)",
-      "85": "rgba(240,246,252,0.85)"
-    }
+    "black10": "rgba(1,4,9,0.1)",
+    "black15": "rgba(1,4,9,0.15)",
+    "black30": "rgba(1,4,9,0.3)",
+    "black50": "rgba(1,4,9,0.5)",
+    "black70": "rgba(1,4,9,0.7)",
+    "black85": "rgba(1,4,9,0.85)",
+    "white10": "rgba(240,246,252,0.1)",
+    "white15": "rgba(240,246,252,0.15)",
+    "white30": "rgba(240,246,252,0.3)",
+    "white50": "rgba(240,246,252,0.5)",
+    "white70": "rgba(240,246,252,0.7)",
+    "white85": "rgba(240,246,252,0.85)"
   },
@@ -355,8 +327,3 @@ "alert": {
     "border": "#484f58",
-    "shadow": [
-      "0",
-      "16px",
-      "32px",
-      "rgba(1,4,9,0.85)"
-    ],
+    "shadow": "0 16px 32px rgba(1,4,9,0.85)",
     "rowBorder": "#30363d"
@@ -368,38 +335,32 @@ },
   "btn": {
+    "text": "#f0f6fc",
     "bg": "#21262d",
-    "border": "rgba(240,246,252,0.1)",
-    "text": "#f0f6fc",
-    "ic": "#6e7681",
-    "shadow": "rgba(0,0,0,0)",
-    "shadowHighlight": "rgba(0,0,0,0)",
-    "bgHover": "#30363d",
-    "bgActive": "#21262d",
-    "shadowActive": [
-      "inset",
-      "0",
-      "0.15em",
-      "0.3em",
-      "rgba(1,4,9,0.15)"
-    ],
-    "shadowInputFocus": [
-      "0",
-      "0",
-      "0",
-      "0.2em",
-      "rgba(31,111,235,0.3)"
-    ],
+    "border": "#30363d",
+    "shadow": "0 0 rgba(0,0,0,0)",
+    "insetShadow": "0 0 rgba(0,0,0,0)",
+    "hoverBg": "#30363d",
+    "hoverBorder": "#8b949e",
+    "selectedBg": "#161b22",
+    "focusBg": "#21262d",
+    "focusBorder": "#8b949e",
+    "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
+    "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
+    "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
     "primary": {
+      "text": "#ffffff",
       "bg": "#238636",
       "border": "#2ea043",
-      "borderDisabled": "#238636",
-      "text": "#f0f6fc",
-      "ic": "#f0f6fc",
-      "shadow": "rgba(0,0,0,0)",
-      "shadowHighlight": "rgba(0,0,0,0)",
-      "shadowSelected": "rgba(0,0,0,0)",
-      "bgHover": "#2ea043",
-      "bgActive": "#238636",
-      "bgDisabled": "#238636",
+      "shadow": "0 0 rgba(0,0,0,0)",
+      "insetShadow": "0 0 rgba(0,0,0,0)",
+      "hoverBg": "#2ea043",
+      "hoverBorder": "#3fb950",
+      "selectedBg": "#238636",
+      "selectedShadow": "0 0 rgba(0,0,0,0)",
       "disabledText": "rgba(240,246,252,0.5)",
-      "disabledShadow": "rgba(0,0,0,0)",
+      "disabledBg": "#238636",
+      "disabledBorder": "#238636",
+      "focusBg": "#238636",
+      "focusBorder": "#3fb950",
+      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
+      "icon": "#f0f6fc",
       "counterBg": "rgba(240,246,252,0.2)"
@@ -412,35 +373,14 @@ },
       "hoverBorder": "#58a6ff",
-      "hoverShadow": [
-        "0",
-        "1px",
-        "0",
-        "rgba(1,4,9,0.1)"
-      ],
-      "hoverInsetShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(240,246,252,0.03)"
-      ],
+      "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
+      "hoverInsetShadow": "inset 0 1px 0 rgba(240,246,252,0.03)",
       "hoverCounterBg": "rgba(240,246,252,0.2)",
       "selectedText": "#f0f6fc",
-      "selectedBg": "#1567e6",
-      "selectedBorder": "rgba(1,4,9,0.15)",
-      "selectedShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(5,29,77,0.2)"
-      ],
+      "selectedBg": "#0d419d",
+      "selectedBorder": "rgba(240,246,252,0.1)",
+      "selectedShadow": "0 0 rgba(0,0,0,0)",
       "disabledText": "#58a6ff",
+      "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(31,111,235,0.05)",
-      "focusShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(17,88,199,0.4)"
-      ],
+      "focusBorder": "#58a6ff",
+      "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)",
       "counterBg": "rgba(31,111,235,0.1)"
@@ -450,27 +390,17 @@ },
       "text": "#f85149",
-      "hoverText": "#f0f6fc",
+      "hoverText": "#ffffff",
       "hoverBg": "#da3633",
       "hoverBorder": "#f85149",
-      "hoverShadow": "rgba(0,0,0,0)",
-      "hoverInsetShadow": "rgba(0,0,0,0)",
-      "hoverCounterBg": "rgba(240,246,252,0.2)",
-      "selectedText": "#f0f6fc",
-      "selectedBg": "#d72a27",
-      "selectedBorder": "rgba(1,4,9,0.15)",
-      "selectedShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(73,2,2,0.2)"
-      ],
+      "hoverShadow": "0 0 rgba(0,0,0,0)",
+      "hoverInsetShadow": "0 0 rgba(0,0,0,0)",
+      "hoverCounterBg": "rgba(255,255,255,0.2)",
+      "selectedText": "#ffffff",
+      "selectedBg": "#b62324",
+      "selectedBorder": "rgba(240,246,252,0.1)",
+      "selectedShadow": "0 0 rgba(0,0,0,0)",
       "disabledText": "#f85149",
+      "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(218,54,51,0.05)",
-      "focusShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(182,35,36,0.4)"
-      ],
+      "focusBorder": "#f85149",
+      "focusShadow": "0 0 0 3px rgba(182,35,36,0.4)",
       "counterBg": "rgba(218,54,51,0.1)"
@@ -494,8 +424,3 @@ },
     "border": "#484f58",
-    "shadow": [
-      "0",
-      "16px",
-      "32px",
-      "rgba(1,4,9,0.85)"
-    ]
+    "shadow": "0 16px 32px rgba(1,4,9,0.85)"
   },
@@ -529,7 +454,2 @@ "label": {
   },
-  "topic": {
-    "tagBg": "#051d4d",
-    "tagBorder": "#051d4d",
-    "tagText": "#388bfd"
-  },
   "input": {
@@ -539,3 +459,3 @@ "bg": "#0d1117",
     "border": "rgba(240,246,252,0.1)",
-    "shadow": "rgba(0,0,0,0)",
+    "shadow": "0 0 rgba(0,0,0,0)",
     "disabledBg": "#161b22",
@@ -567,8 +487,3 @@ "disabledBorder": "#30363d",
     "stackFadeMore": "#21262d",
-    "childShadow": [
-      "-2px",
-      "-2px",
-      "0",
-      "#0d1117"
-    ]
+    "childShadow": "-2px -2px 0 #0d1117"
   },
@@ -588,8 +503,3 @@ "toast": {
     "borderSecondary": "#30363d",
-    "shadow": [
-      "0",
-      "0",
-      "18px",
-      "rgba(1,4,9,0.4)"
-    ],
+    "shadow": "0 0 18px rgba(1,4,9,0.4)",
     "backdropBg": "rgba(1,4,9,0.5)",
@@ -601,7 +511,7 @@ "backdropBorder": "#484f58",
   "box": {
-    "blueBorder": "#0d419d",
-    "rowYellowBg": "rgba(235,196,64,0.1)",
-    "rowBlueBg": "rgba(121,192,255,0.1)",
-    "headerBlueBg": "#0d1117",
-    "headerBlueBorder": "#30363d"
+    "blueBorder": "rgba(56,139,253,0.4)",
+    "rowYellowBg": "rgba(187,128,9,0.1)",
+    "rowBlueBg": "rbga(#388BFD, 0.1)",
+    "headerBlueBg": "rbga(#388BFD, 0.1)",
+    "headerBlueBorder": "rgba(56,139,253,0.4)"
   },
@@ -637,3 +547,3 @@ "popover": {
   "tabnav": {
-    "selectedBg": "#161b22"
+    "selectedBg": "#0d1117"
   },
@@ -687,19 +597,47 @@ "header": {
   },
-  "iconFolder": "#6e7681",
-  "hlAuthorBg": "#051d4d",
-  "hlAuthorBorder": "#0d419d",
-  "logoSubdued": "#30363d",
-  "discussionBorder": "#34513b",
-  "diff": {
+  "diffstat": {
     "neutralBg": "#30363d",
     "neutralBorder": "rgba(240,246,252,0.1)",
     "deletionBg": "#da3633",
-    "deletionBgStrong": "#f0f6fc",
     "deletionBorder": "#f85149",
-    "deletionBorderStrong": "#f0f6fc",
     "additionBg": "#238636",
-    "additionBgStrong": "#f0f6fc",
-    "additionBorder": "#2ea043",
-    "additionBorderStrong": "#f0f6fc"
+    "additionBorder": "#2ea043"
   },
+  "iconFolder": "#6e7681",
+  "hlAuthorBg": "#051d4d",
+  "hlAuthorBorder": "#0d419d",
+  "logoSubdued": "#30363d",
+  "discussionBorder": "#34513b",
+  "diffBlob": {
+    "numText": "rgba(240,246,252,0.3)",
+    "numHoverText": "rgba(240,246,252,0.6)",
+    "addition": {
+      "numBg": "rgba(35,134,54,0.3)",
+      "lineBg": "rgba(35,134,54,0.15)",
+      "wordBg": "rgba(35,134,54,0.3)"
+    },
+    "deletion": {
+      "numBg": "rgba(218,54,51,0.3)",
+      "lineBg": "rgba(218,54,51,0.15)",
+      "wordBg": "rgba(218,54,51,0.3)"
+    },
+    "hunk": {
+      "text": "#8b949e",
+      "numBg": "rgba(88,166,255,0.15)",
+      "lineBg": "rgba(88,166,255,0.1)"
+    },
+    "emptyBlockBg": "#161b22",
+    "selectedLineHighlightBg": "rgba(187,128,9,0.1)",
+    "selectedLineHighlightBorder": "#bb8009",
+    "expander": {
+      "icon": "#8b949e",
+      "hoverIcon": "#f0f6fc",
+      "hoverBg": "#1f6feb"
+    },
+    "commentButton": {
+      "icon": "#f0f6fc",
+      "bg": "#1f6feb",
+      "gradientBg": "#367eed"
+    }
+  },
   "globalNav": {
@@ -752,3 +690,35 @@ "logo": "#f0f6fc",
     }
+  },
+  "topicTag": {
+    "text": "#58a6ff",
+    "bg": "rgba(56,139,253,0.1)",
+    "hoverBg": "rgba(56,139,253,0.2)",
+    "activeBg": "rgba(56,139,253,0.15)"
+  },
+  "mergeBox": {
+    "successIconBg": "rgba(46,160,67,0.1)",
+    "successIconText": "#3fb950",
+    "successIconBorder": "rgba(46,160,67,0.4)",
+    "successIndicatorBg": "#238636",
+    "successIndicatorBorder": "#2ea043",
+    "mergedIconBg": "rgba(188,140,255,0.1)",
+    "mergedIconText": "#a371f7",
+    "mergedIconBorder": "rgba(188,140,255,0.4)",
+    "mergedBoxBorder": "rgba(188,140,255,0.4)",
+    "neutralIconBg": "rgba(213,221,229,0.1)",
+    "neutralIconText": "#8b949e",
+    "neutralIconBorder": "rgba(213,221,229,0.4)",
+    "neutralIndicatorBg": "#484f58",
+    "neutralIndicatorBorder": "#6e7681",
+    "warningIconBg": "rgba(187,128,9,0.1)",
+    "warningIconText": "#e3b341",
+    "warningIconBorder": "rgba(187,128,9,0.4)",
+    "warningBoxBorder": "rgba(187,128,9,0.4)",
+    "warningMergeHighlight": "rgba(187,128,9,0.1)",
+    "errorIconBg": "rgba(248,81,73,0.1)",
+    "errorIconText": "#f85149",
+    "errorIconBorder": "rgba(248,81,73,0.4)",
+    "errorIndicatorBg": "#da3633",
+    "errorIndicatorBorder": "#f85149"
   }
 }

dist/ts/colors/light.ts

@@ -212,3 +212,4 @@ export default {
     "success": "#22863a",
-    "warning": "#b08800"
+    "warning": "#b08800",
+    "white": "#ffffff"
   },
@@ -238,2 +239,3 @@ "icon": {
     "canvasInverse": "#24292e",
+    "canvasInset": "#f6f8fa",
     "primary": "#ffffff",
@@ -253,40 +255,8 @@ "secondary": "#fafbfc",
   "shadow": {
-    "small": [
-      "0",
-      "1px",
-      "0",
-      "rgba(27,31,35,0.04)"
-    ],
-    "medium": [
-      "0",
-      "3px",
-      "6px",
-      "rgba(149,157,165,0.15)"
-    ],
-    "large": [
-      "0",
-      "8px",
-      "24px",
-      "rgba(149,157,165,0.2)"
-    ],
-    "extraLarge": [
-      "0",
-      "12px",
-      "48px",
-      "rgba(149,157,165,0.3)"
-    ],
-    "highlight": [
-      "inset",
-      "0",
-      "1px",
-      "0",
-      "rgba(255,255,255,0.25)"
-    ],
-    "inset": [
-      "inset",
-      "0",
-      "1px",
-      "0",
-      "rgba(225,228,232,0.2)"
-    ]
+    "small": "0 1px 0 rgba(27,31,35,0.04)",
+    "medium": "0 3px 6px rgba(149,157,165,0.15)",
+    "large": "0 8px 24px rgba(149,157,165,0.2)",
+    "extraLarge": "0 12px 48px rgba(149,157,165,0.3)",
+    "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
+    "inset": "inset 0 1px 0 rgba(225,228,232,0.2)"
   },
@@ -310,28 +280,18 @@ "state": {
       "border": "#0366d6",
-      "shadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(3,102,214,0.3)"
-      ]
+      "shadow": "0 0 0 3px rgba(3,102,214,0.3)"
     }
   },
   "fade": {
-    "black": {
-      "10": "rgba(27,31,35,0.1)",
-      "15": "rgba(27,31,35,0.15)",
-      "30": "rgba(27,31,35,0.3)",
-      "50": "rgba(27,31,35,0.5)",
-      "70": "rgba(27,31,35,0.7)",
-      "85": "rgba(27,31,35,0.85)"
-    },
-    "white": {
-      "10": "rgba(255,255,255,0.1)",
-      "15": "rgba(255,255,255,0.15)",
-      "30": "rgba(255,255,255,0.3)",
-      "50": "rgba(255,255,255,0.5)",
-      "70": "rgba(255,255,255,0.7)",
-      "85": "rgba(255,255,255,0.85)"
-    }
+    "black10": "rgba(27,31,35,0.1)",
+    "black15": "rgba(27,31,35,0.15)",
+    "black30": "rgba(27,31,35,0.3)",
+    "black50": "rgba(27,31,35,0.5)",
+    "black70": "rgba(27,31,35,0.7)",
+    "black85": "rgba(27,31,35,0.85)",
+    "white10": "rgba(255,255,255,0.1)",
+    "white15": "rgba(255,255,255,0.15)",
+    "white30": "rgba(255,255,255,0.3)",
+    "white50": "rgba(255,255,255,0.5)",
+    "white70": "rgba(255,255,255,0.7)",
+    "white85": "rgba(255,255,255,0.85)"
   },
@@ -367,8 +327,3 @@ "alert": {
     "border": "#e1e4e8",
-    "shadow": [
-      "0",
-      "3px",
-      "6px",
-      "rgba(149,157,165,0.15)"
-    ],
+    "shadow": "0 3px 6px rgba(149,157,165,0.15)",
     "rowBorder": "#eaecef"
@@ -380,72 +335,32 @@ },
   "btn": {
+    "text": "#24292e",
     "bg": "#fafbfc",
     "border": "rgba(27,31,35,0.15)",
-    "text": "#24292e",
-    "ic": "#6a737d",
-    "shadow": [
-      "0",
-      "1px",
-      "0",
-      "rgba(27,31,35,0.04)"
-    ],
-    "shadowHighlight": [
-      "inset",
-      "0",
-      "1px",
-      "0",
-      "rgba(255,255,255,0.25)"
-    ],
-    "bgHover": "#f3f4f6",
-    "bgActive": "#edeff2",
-    "shadowActive": [
-      "inset",
-      "0",
-      "0.15em",
-      "0.3em",
-      "rgba(27,31,35,0.15)"
-    ],
-    "shadowInputFocus": [
-      "0",
-      "0",
-      "0",
-      "0.2em",
-      "rgba(3,102,214,0.3)"
-    ],
+    "shadow": "0 1px 0 rgba(27,31,35,0.04)",
+    "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+    "hoverBg": "#f3f4f6",
+    "hoverBorder": "rgba(27,31,35,0.15)",
+    "selectedBg": "#edeff2",
+    "focusBg": "#fafbfc",
+    "focusBorder": "rgba(27,31,35,0.15)",
+    "focusShadow": "0 0 0 3px rgba(3,102,214,0.3)",
+    "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,35,0.15)",
+    "shadowInputFocus": "0 0 0 0.2em rgba(3,102,214,0.3)",
     "primary": {
+      "text": "#ffffff",
       "bg": "#2ea44f",
       "border": "rgba(27,31,35,0.15)",
-      "borderDisabled": "rgba(27,31,35,0.1)",
-      "text": "#ffffff",
-      "ic": "rgba(255,255,255,0.8)",
-      "shadow": [
-        "0",
-        "1px",
-        "0",
-        "rgba(27,31,35,0.1)"
-      ],
-      "shadowHighlight": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(255,255,255,0.03)"
-      ],
-      "shadowSelected": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(20,70,32,0.2)"
-      ],
-      "bgHover": "#2c974b",
-      "bgActive": "#2a8f47",
-      "bgDisabled": "#94d3a2",
+      "shadow": "0 1px 0 rgba(27,31,35,0.1)",
+      "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
+      "hoverBg": "#2c974b",
+      "hoverBorder": "rgba(27,31,35,0.15)",
+      "selectedBg": "#2a8f47",
+      "selectedShadow": "inset 0 1px 0 rgba(20,70,32,0.2)",
       "disabledText": "rgba(255,255,255,0.8)",
-      "disabledShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(46,164,79,0.4)"
-      ],
+      "disabledBg": "#94d3a2",
+      "disabledBorder": "rgba(27,31,35,0.1)",
+      "focusBg": "#2ea44f",
+      "focusBorder": "rgba(27,31,35,0.15)",
+      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
+      "icon": "rgba(255,255,255,0.8)",
       "counterBg": "rgba(255,255,255,0.2)"
@@ -458,15 +373,4 @@ },
       "hoverBorder": "rgba(27,31,35,0.15)",
-      "hoverShadow": [
-        "0",
-        "1px",
-        "0",
-        "rgba(27,31,35,0.1)"
-      ],
-      "hoverInsetShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(255,255,255,0.03)"
-      ],
+      "hoverShadow": "0 1px 0 rgba(27,31,35,0.1)",
+      "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
       "hoverCounterBg": "rgba(255,255,255,0.2)",
@@ -476,18 +380,8 @@ "selectedText": "#ffffff",
       "selectedBorder": "rgba(27,31,35,0.15)",
-      "selectedShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(5,38,76,0.2)"
-      ],
+      "selectedShadow": "inset 0 1px 0 rgba(5,38,76,0.2)",
       "disabledText": "rgba(3,102,214,0.5)",
+      "disabledBg": "#fafbfc",
       "disabledCounterBg": "rgba(3,102,214,0.05)",
-      "focusShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(0,92,197,0.4)"
-      ],
+      "focusBorder": "rgba(27,31,35,0.15)",
+      "focusShadow": "0 0 0 3px rgba(0,92,197,0.4)",
       "counterBg": "rgba(3,102,214,0.1)"
@@ -500,15 +394,4 @@ },
       "hoverBorder": "rgba(27,31,35,0.15)",
-      "hoverShadow": [
-        "0",
-        "1px",
-        "0",
-        "rgba(27,31,35,0.1)"
-      ],
-      "hoverInsetShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(255,255,255,0.03)"
-      ],
+      "hoverShadow": "0 1px 0 rgba(27,31,35,0.1)",
+      "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
       "hoverCounterBg": "rgba(255,255,255,0.2)",
@@ -518,18 +401,8 @@ "selectedText": "#ffffff",
       "selectedBorder": "rgba(27,31,35,0.15)",
-      "selectedShadow": [
-        "inset",
-        "0",
-        "1px",
-        "0",
-        "rgba(134,24,29,0.2)"
-      ],
+      "selectedShadow": "inset 0 1px 0 rgba(134,24,29,0.2)",
       "disabledText": "rgba(215,58,73,0.5)",
+      "disabledBg": "#fafbfc",
       "disabledCounterBg": "rgba(215,58,73,0.05)",
-      "focusShadow": [
-        "0",
-        "0",
-        "0",
-        "3px",
-        "rgba(203,36,49,0.4)"
-      ],
+      "focusBorder": "rgba(27,31,35,0.15)",
+      "focusShadow": "0 0 0 3px rgba(203,36,49,0.4)",
       "counterBg": "rgba(215,58,73,0.1)"
@@ -553,8 +426,3 @@ },
     "border": "#e1e4e8",
-    "shadow": [
-      "0",
-      "8px",
-      "24px",
-      "rgba(149,157,165,0.2)"
-    ]
+    "shadow": "0 8px 24px rgba(149,157,165,0.2)"
   },
@@ -588,7 +456,2 @@ "label": {
   },
-  "topic": {
-    "tagBg": "#f1f8ff",
-    "tagBorder": "#f1f8ff",
-    "tagText": "#0366d6"
-  },
   "input": {
@@ -598,9 +461,3 @@ "bg": "#ffffff",
     "border": "#e1e4e8",
-    "shadow": [
-      "inset",
-      "0",
-      "1px",
-      "2px",
-      "rgba(27,31,35,0.075)"
-    ],
+    "shadow": "inset 0 1px 2px rgba(27,31,35,0.075)",
     "disabledBg": "#ffffff",
@@ -632,8 +489,3 @@ "disabledBorder": "#e1e4e8",
     "stackFadeMore": "#e1e4e8",
-    "childShadow": [
-      "-2px",
-      "-2px",
-      "0",
-      "rgba(255,255,255,0.8)"
-    ]
+    "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
   },
@@ -653,8 +505,3 @@ "toast": {
     "borderSecondary": "#eaecef",
-    "shadow": [
-      "0",
-      "0",
-      "18px",
-      "rgba(27,31,35,0.4)"
-    ],
+    "shadow": "0 0 18px rgba(27,31,35,0.4)",
     "backdropBg": "rgba(27,31,35,0.5)",
@@ -739,3 +586,3 @@ "backdropBorder": "rgba(0,0,0,0)",
   "verifiedBadge": {
-    "text": "#85e89d",
+    "text": "#22863a",
     "bg": "#ffffff",
@@ -751,19 +598,47 @@ "border": "#e1e4e8"
   },
-  "iconFolder": "#79b8ff",
-  "hlAuthorBg": "#f1f8ff",
-  "hlAuthorBorder": "#c8e1ff",
-  "logoSubdued": "#d1d5da",
-  "discussionBorder": "#a2cbac",
-  "diff": {
+  "diffstat": {
     "neutralBg": "#d1d5da",
     "neutralBorder": "#d1d5da",
     "deletionBg": "#d73a49",
-    "deletionBgStrong": "#1b1f23",
     "deletionBorder": "#d73a49",
-    "deletionBorderStrong": "#1b1f23",
     "additionBg": "#28a745",
-    "additionBgStrong": "#1b1f23",
-    "additionBorder": "#28a745",
-    "additionBorderStrong": "#1b1f23"
+    "additionBorder": "#28a745"
   },
+  "iconFolder": "#79b8ff",
+  "hlAuthorBg": "#f1f8ff",
+  "hlAuthorBorder": "#c8e1ff",
+  "logoSubdued": "#d1d5da",
+  "discussionBorder": "#a2cbac",
+  "diffBlob": {
+    "numText": "rgba(27,31,35,0.3)",
+    "numHoverText": "rgba(27,31,35,0.6)",
+    "addition": {
+      "numBg": "#cdffd8",
+      "lineBg": "#e6ffed",
+      "wordBg": "#acf2bd"
+    },
+    "deletion": {
+      "numBg": "#ffdce0",
+      "lineBg": "#ffeef0",
+      "wordBg": "#fdb8c0"
+    },
+    "hunk": {
+      "text": "rgba(27,31,35,0.7)",
+      "numBg": "#dbedff",
+      "lineBg": "#f1f8ff"
+    },
+    "emptyBlockBg": "#fafbfc",
+    "selectedLineHighlightBg": "rgba(255,223,93,0.2)",
+    "selectedLineHighlightBorder": "#ffd33d",
+    "expander": {
+      "icon": "#586069",
+      "hoverIcon": "#ffffff",
+      "hoverBg": "#0366d6"
+    },
+    "commentButton": {
+      "icon": "#ffffff",
+      "bg": "#0366d6",
+      "gradientBg": "#0372ef"
+    }
+  },
   "globalNav": {
@@ -816,3 +691,35 @@ "logo": "#ffffff",
     }
+  },
+  "topicTag": {
+    "text": "#0366d6",
+    "bg": "#f1f8ff",
+    "hoverBg": "#ddeeff",
+    "activeBg": "#e7f3ff"
+  },
+  "mergeBox": {
+    "successIconBg": "#28a745",
+    "successIconText": "#ffffff",
+    "successIconBorder": "rgba(0,0,0,0)",
+    "successIndicatorBg": "#28a745",
+    "successIndicatorBorder": "rgba(0,0,0,0)",
+    "mergedIconBg": "#6f42c1",
+    "mergedIconText": "#ffffff",
+    "mergedIconBorder": "rgba(0,0,0,0)",
+    "mergedBoxBorder": "#6f42c1",
+    "neutralIconBg": "#6a737d",
+    "neutralIconText": "#ffffff",
+    "neutralIconBorder": "rgba(0,0,0,0)",
+    "neutralIndicatorBg": "#6a737d",
+    "neutralIndicatorBorder": "rgba(0,0,0,0)",
+    "warningIconBg": "#dbab09",
+    "warningIconText": "#ffffff",
+    "warningIconBorder": "rgba(0,0,0,0)",
+    "warningBoxBorder": "#ffd33d",
+    "warningMergeHighlight": "rgba(0,0,0,0)",
+    "errorIconBg": "#d73a49",
+    "errorIconText": "#ffffff",
+    "errorIconBorder": "rgba(0,0,0,0)",
+    "errorIndicatorBg": "#d73a49",
+    "errorIndicatorBorder": "rgba(0,0,0,0)"
   }
 }

package.json

 {
   "name": "@primer/primitives",
-  "version": "0.0.0-a94bc22",
+  "version": "0.0.0-aa92213",
   "description": "Typography, spacing, and color primitives for Primer design system",
@@ -34,2 +34,3 @@ "files": [
     "@types/chalk": "^2.2.0",
+    "@types/lodash": "^4.14.163",
     "@types/mkdirp": "^1.0.1",
@@ -40,2 +41,3 @@ "@types/node": "^14.0.26",
     "deep-shape-equals": "^0.1.2",
+    "lodash": "^4.17.20",
     "mkdirp": "^1.0.4",
@@ -42,0 +44,0 @@ "node-sass": "^4.14.1",

No alert changes

Improved metrics

Total package byte prevSize

247665

increased by10.08%

Lines of code

7605

increased by0.12%

Worsened metrics

Dev dependency count

13

increased by18.18%

No dependency changes