5.0.0-alpha.1

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
-dist/
+# dist/ TODO ensure dist is not ignored when merged to main
 coverage/
 
 # Logs

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.0.0-alpha.1]
+
+### Uncategorized
+
+- chore: temporarily adding the dist folder to brand evolution branch to test in other projects
+- refactor: updated css variables naming
+- feat: updated css variables based on json
+- feat: updating json css and js with brand evolution colors
+
 ## [3.0.0]
 
 ### Added
@@ -290,7 +299,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial release.
 
-[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v3.0.0...HEAD
+[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v5.0.0-alpha.1...HEAD
+[5.0.0-alpha.1]: https://github.com/MetaMask/design-tokens/compare/v3.0.0...v5.0.0-alpha.1
 [3.0.0]: https://github.com/MetaMask/design-tokens/compare/v2.1.1...v3.0.0
 [2.1.1]: https://github.com/MetaMask/design-tokens/compare/v2.1.0...v2.1.1
 [2.1.0]: https://github.com/MetaMask/design-tokens/compare/v2.0.3...v2.1.0

dist/chunk-35JJ6V76.mjs

@@ -0,0 +1,134 @@
+import {
+  brandColor
+} from "./chunk-DBW6SE3C.mjs";
+
+// src/js/themes/darkTheme/colors.ts
+var colors = {
+  background: {
+    default: brandColor.grey800,
+    // For default neutral backgrounds
+    alternative: brandColor.grey900,
+    // For secondary neutral backgrounds.
+    defaultHover: "#313235",
+    // For "hover" states that use background-default.
+    defaultPressed: "#3f4145",
+    // For "pressed" states that use background-alternative.
+    alternativeHover: "#1f2123",
+    // For "hover" states that use background-alternative.
+    alternativePressed: "#2e3033",
+    // For "pressed" states that use background-alternative.
+    hover: "#ffffff0f",
+    // For "hover" state that use no background fill.  (black-6% | white-6%)
+    pressed: "#ffffff1f"
+    // For "pressed" state that use no background fill.  (black-12% | white-12%)
+  },
+  text: {
+    default: brandColor.grey000,
+    // For default neutral text.
+    alternative: brandColor.grey200,
+    // For softer contrast neutral text
+    muted: brandColor.grey400
+    // For the softest contrast neutral text (not accessible)
+  },
+  icon: {
+    default: brandColor.grey000,
+    // For default neutral icons
+    alternative: brandColor.grey200,
+    // For softer neutral icons
+    muted: brandColor.grey400
+    // For the weakest contrast neutral icons (not accessible)
+  },
+  border: {
+    default: brandColor.grey400,
+    // For soft contrast neutral border
+    muted: "#858b9a33"
+    // For the weakest  contrast neutral border (grey200-40% | grey400-20%)
+  },
+  overlay: {
+    default: "#00000066",
+    // For the default shade of screen (black-40%)
+    alternative: "#000000cc",
+    // For a stronger shade of screen (black-80%)
+    inverse: brandColor.grey000
+    // For elements used on top of overlay/alternative. Used for text, icon or border
+  },
+  primary: {
+    default: brandColor.blue300,
+    // For interactive, active, and selected semantics. Used for text, background, icon or border
+    alternative: brandColor.blue200,
+    // For the stronger contrast primary semantic elements.
+    muted: "#8b99ff26",
+    // For the weakest contrast primary semantic backgrounds. (blue500-10% | blue300-15%)
+    inverse: brandColor.grey900,
+    // For elements used on top of primary/default. Used for text, icon or border
+    defaultHover: "#a8b2ff",
+    // For the "hover" state of primary-default elements
+    defaultPressed: "#c7ceff"
+    // For the "pressed" state of primary-default elements
+  },
+  error: {
+    default: brandColor.red300,
+    // For the critical alert semantic elements. Used for text, background, icon or border
+    alternative: brandColor.red200,
+    // For the stronger contrast error semantic elements.
+    muted: "#ff758426",
+    // For the weakest contrast critical alert semantic backgrounds. (red500-10% | red300-15%)
+    inverse: brandColor.grey900,
+    // For elements used on top of error/default. Used for text, icon or border
+    defaultHover: "#ff94a0",
+    // For the "hover" state of error-default elements.
+    defaultPressed: "#ffb2bb"
+    // For the "pressed" state of error-default elements.
+  },
+  warning: {
+    default: brandColor.yellow100,
+    // For the caution alert semantic elements. Used for text, background, icon or border
+    muted: "#ffd95726",
+    // For the weakest contrast caution alert semantic backgrounds. (yellow500-10% | yellow100-15%)
+    inverse: brandColor.grey900,
+    // For elements used on top of warning/default. Used for text, icon or border
+    defaultHover: "#ffe794",
+    // For the "hover" state of warning-default elements
+    defaultPressed: "#ffeeb2"
+    // For the "pressed" state of warning-default elements
+  },
+  success: {
+    default: brandColor.green300,
+    // For the positive semantic elements. Used for text, background, icon or border
+    muted: "#4cb56426",
+    // For the weakest contrast positive semantic backgrounds. (green500-10% | green300-10%)
+    inverse: brandColor.grey900,
+    // For elements used on top of success/default. Used for text, icon or border
+    defaultHover: "#60bd76",
+    // For the "hover" state of success-default elements
+    defaultPressed: "#76c688"
+    // For the "pressed" state of success-default elements
+  },
+  info: {
+    default: brandColor.blue300,
+    // For informational read-only elements. Used for text, background, icon or border
+    muted: "#8b99ff26",
+    // For the weakest contrast informational semantic backgrounds.(blue500-10% | blue300-15%)
+    inverse: brandColor.grey900
+    // For elements used on top of info/default. Used for text, icon or border
+  },
+  flask: {
+    default: brandColor.purple300,
+    // For Flask primary accent color.
+    inverse: brandColor.grey900
+    // For elements used on top of flask/default. Used for text, icon or border
+  },
+  shadow: {
+    default: "#00000066",
+    // For neutral drop shadow color. (black-10% | black-40%)
+    primary: "#8b99ff33",
+    // For primary drop shadow color. (blue500-20% | blue300-20%)
+    error: "#ff758433"
+    // For critical/danger drop shadow color. (red50-20% | red300-20%)
+  }
+};
+
+export {
+  colors
+};
+//# sourceMappingURL=chunk-35JJ6V76.mjs.map

dist/chunk-37CYYNL2.mjs

@@ -0,0 +1,9 @@
+// src/js/typography/fontFamilies.ts
+var fontFamilies = {
+  euclidCircularB: "Euclid Circular B"
+};
+
+export {
+  fontFamilies
+};
+//# sourceMappingURL=chunk-37CYYNL2.mjs.map

dist/chunk-6CNXLMEO.js

@@ -0,0 +1 @@
+"use strict";//# sourceMappingURL=chunk-6CNXLMEO.js.map

dist/chunk-7HI3S7AK.js

@@ -0,0 +1 @@
+"use strict";//# sourceMappingURL=chunk-7HI3S7AK.js.map

dist/chunk-7SRGQ4DD.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-7SRGQ4DD.mjs.map

dist/chunk-ARVGVDA4.js

@@ -0,0 +1 @@
+"use strict";//# sourceMappingURL=chunk-ARVGVDA4.js.map

dist/chunk-CI27TEBG.mjs

@@ -0,0 +1,11 @@
+// src/js/typography/fontWeights.ts
+var fontWeights = {
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+
+export {
+  fontWeights
+};
+//# sourceMappingURL=chunk-CI27TEBG.mjs.map