npm - @primer/primitives - Versions diffs - 8.2.4-rc.a5404ac4 → 8.2.4-rc.b7bbf7a5 - Mend

@primer/primitives 8.2.4-rc.a5404ac4 → 8.2.4-rc.b7bbf7a5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/dist/css/functional/themes/dark-colorblind.css +2 -2
package/dist/css/functional/themes/dark-dimmed.css +2 -2
package/dist/css/functional/themes/dark-high-contrast.css +172 -172
package/dist/css/functional/themes/dark-tritanopia.css +2 -2
package/dist/css/functional/themes/dark.css +2 -2
package/dist/css/functional/themes/light-colorblind.css +2 -2
package/dist/css/functional/themes/light-high-contrast.css +116 -116
package/dist/css/functional/themes/light-tritanopia.css +2 -2
package/dist/css/functional/themes/light.css +2 -2
package/dist/docs/functional/themes/dark-colorblind.json +4 -4
package/dist/docs/functional/themes/dark-dimmed.json +5 -5
package/dist/docs/functional/themes/dark-high-contrast.json +226 -226
package/dist/docs/functional/themes/dark-tritanopia.json +4 -4
package/dist/docs/functional/themes/dark.json +5 -5
package/dist/docs/functional/themes/light-colorblind.json +2 -2
package/dist/docs/functional/themes/light-high-contrast.json +174 -174
package/dist/docs/functional/themes/light-tritanopia.json +2 -2
package/dist/docs/functional/themes/light.json +2 -2
package/dist/figma/themes/dark-colorblind.json +43 -43
package/dist/figma/themes/dark-dimmed.json +62 -62
package/dist/figma/themes/dark-high-contrast.json +358 -358
package/dist/figma/themes/dark-tritanopia.json +43 -43
package/dist/figma/themes/dark.json +62 -62
package/dist/figma/themes/light-colorblind.json +4 -4
package/dist/figma/themes/light-high-contrast.json +222 -222
package/dist/figma/themes/light-tritanopia.json +4 -4
package/dist/figma/themes/light.json +4 -4
package/dist/internalCss/dark-colorblind.css +2 -2
package/dist/internalCss/dark-dimmed.css +2 -2
package/dist/internalCss/dark-high-contrast.css +172 -172
package/dist/internalCss/dark-tritanopia.css +2 -2
package/dist/internalCss/dark.css +2 -2
package/dist/internalCss/light-colorblind.css +2 -2
package/dist/internalCss/light-high-contrast.css +116 -116
package/dist/internalCss/light-tritanopia.css +2 -2
package/dist/internalCss/light.css +2 -2
package/dist/styleLint/functional/themes/dark-colorblind.json +4 -4
package/dist/styleLint/functional/themes/dark-dimmed.json +5 -5
package/dist/styleLint/functional/themes/dark-high-contrast.json +226 -226
package/dist/styleLint/functional/themes/dark-tritanopia.json +4 -4
package/dist/styleLint/functional/themes/dark.json +5 -5
package/dist/styleLint/functional/themes/light-colorblind.json +2 -2
package/dist/styleLint/functional/themes/light-high-contrast.json +174 -174
package/dist/styleLint/functional/themes/light-tritanopia.json +2 -2
package/dist/styleLint/functional/themes/light.json +2 -2
package/package.json +28 -28
package/src/formats/cssAdvanced.ts +3 -3
package/src/formats/cssCustomMedia.ts +2 -2
package/src/formats/javascriptCommonJs.ts +2 -2
package/src/formats/javascriptEsm.ts +2 -2
package/src/formats/jsonFigma.ts +2 -2
package/src/formats/jsonNestedPrefixed.ts +2 -2
package/src/formats/jsonOneDimensional.ts +2 -2
package/src/formats/jsonPostCssFallback.ts +2 -2
package/src/formats/typescriptExportDefinition.ts +2 -2
package/src/schemas/designToken.ts +1 -1
package/src/schemas/validTokenType.ts +1 -1
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +397 -0
package/src/tokens/functional/color/dark/primitives-dark.json5 +4 -4
package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +348 -0
package/src/tokens/functional/color/light/primitives-light.json5 +2 -2

package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 CHANGED Viewed

@@ -19,6 +19,10 @@
       $value: '{base.color.neutral.4}',
       $type: 'color',
     },
+    neutral: {
+      $value: '{base.color.neutral.3}',
+      $type: 'color',
+    },
     accent: {
       $value: '{base.color.blue.3}',
       $type: 'color',
@@ -58,6 +62,11 @@
       $type: 'color',
     },
     neutral: {
+      muted: {
+        $value: '{base.color.neutral.5}',
+        $type: 'color',
+        alpha: 0.1,
+      },
       emphasis: {
         $value: '{base.color.neutral.4}',
         $type: 'color',
@@ -69,6 +78,10 @@
         $type: 'color',
         alpha: 0.1,
       },
+      emphasis: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+      },
     },
     success: {
       muted: {
@@ -76,6 +89,10 @@
         $type: 'color',
         alpha: 0.14,
       },
+      emphasis: {
+        $value: '{base.color.green.4}',
+        $type: 'color',
+      },
     },
     open: {
       muted: {
@@ -90,6 +107,10 @@
         $type: 'color',
         alpha: 0.09,
       },
+      emphasis: {
+        $value: '{base.color.red.4}',
+        $type: 'color',
+      },
     },
     closed: {
       muted: {
@@ -104,6 +125,16 @@
         $type: 'color',
         alpha: 0.088,
       },
+      emphasis: {
+        $value: '{base.color.orange.4}',
+        $type: 'color',
+      },
+    },
+    attention: {
+      emphasis: {
+        $value: '{base.color.yellow.4}',
+        $type: 'color',
+      },
     },
     done: {
       muted: {
@@ -111,6 +142,24 @@
         $type: 'color',
         alpha: 0.09,
       },
+      emphasis: {
+        $value: '{base.color.purple.4}',
+        $type: 'color',
+      },
+    },
+    upsell: {
+      muted: {
+        $value: '{bgColor.done.muted}',
+        $type: 'color',
+        alpha: 0.09,
+      },
+    },
+    upsell: {
+      muted: {
+        $value: '{bgColor.done.muted}',
+        $type: 'color',
+        alpha: 0.09,
+      },
     },
     sponsors: {
       muted: {
@@ -118,6 +167,10 @@
         $type: 'color',
         alpha: 0.09,
       },
+      emphasis: {
+        $value: '{base.color.pink.4}',
+        $type: 'color',
+      },
     },
   },
   borderColor: {
@@ -505,4 +558,348 @@
       },
     },
   },
+  display: {
+    blue: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.blue.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.blue.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.blue.6}',
+          $type: 'color',
+        },
+      },
+    },
+    indigo: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.indigo.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.indigo.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.indigo.6}',
+          $type: 'color',
+        },
+      },
+    },
+    gray: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.gray.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.gray.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.gray.6}',
+          $type: 'color',
+        },
+      },
+    },
+    cyan: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.cyan.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.cyan.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.cyan.6}',
+          $type: 'color',
+        },
+      },
+    },
+    teal: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.teal.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.teal.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.teal.6}',
+          $type: 'color',
+        },
+      },
+    },
+    pine: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.pine.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.pine.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.pine.6}',
+          $type: 'color',
+        },
+      },
+    },
+    green: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.green.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.green.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.green.6}',
+          $type: 'color',
+        },
+      },
+    },
+    lime: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.lime.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.lime.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.lime.6}',
+          $type: 'color',
+        },
+      },
+    },
+    olive: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.olive.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.olive.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.olive.6}',
+          $type: 'color',
+        },
+      },
+    },
+    lemon: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.lemon.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.lemon.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.lemon.6}',
+          $type: 'color',
+        },
+      },
+    },
+    yellow: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.yellow.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.yellow.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.yellow.6}',
+          $type: 'color',
+        },
+      },
+    },
+    orange: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.orange.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.orange.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.orange.6}',
+          $type: 'color',
+        },
+      },
+    },
+    red: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.red.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.red.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.red.6}',
+          $type: 'color',
+        },
+      },
+    },
+    coral: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.coral.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.coral.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.coral.6}',
+          $type: 'color',
+        },
+      },
+    },
+    pink: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.pink.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.pink.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.pink.6}',
+          $type: 'color',
+        },
+      },
+    },
+    plum: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.plum.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.plum.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.plum.6}',
+          $type: 'color',
+        },
+      },
+    },
+    purple: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.purple.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.purple.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.purple.6}',
+          $type: 'color',
+        },
+      },
+    },
+    brown: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.brown.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.brown.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.brown.6}',
+          $type: 'color',
+        },
+      },
+    },
+    auburn: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.auburn.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.auburn.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.auburn.6}',
+          $type: 'color',
+        },
+      },
+    },
+  },
 }

package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED Viewed

@@ -105,7 +105,7 @@
       },
     },
     neutral: {
-      $value: '{base.color.neutral.4}',
+      $value: '{base.color.neutral.2}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -639,7 +639,7 @@
         alpha: 0.1,
       },
       emphasis: {
-        $value: '{base.color.red.5}',
+        $value: '{bgColor.danger.emphasis}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -689,7 +689,7 @@
     },
     upsell: {
       muted: {
-        $value: '{base.color.purple.4}',
+        $value: '{bgColor.done.muted}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -705,7 +705,7 @@
         alpha: 0.15,
       },
       emphasis: {
-        $value: '{base.color.purple.5}',
+        $value: '{bgColor.done.emphasis}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {