Adding media query sass vars, mixins and docs (#15053)

* Adding media query sass vars, mixins and docs

* Updates to docs and fixing page order in storybook

.storybook/3.COLORS.stories.mdx

@@ -1,20 +1,12 @@
 import { Meta } from '@storybook/addon-docs';
-import ActionaleMessage from '../ui/components/ui/actionable-message';
 import designTokenDiagramImage from './images/design.token.graphic.svg';
 
-<Meta title="Design Tokens / Color" />
+<Meta title="Foundations / Color" />
 
 # Color
 
 Color is used to express style and communicate meaning.
 
-<ActionaleMessage
-  type="warning"
-  message="We are in the process of consolidating all of our colors, making them accessible and enabling theming. Many of the colors used throughout the codebase are deprecated please follow the guide below to ensure you are using the correct colors when building MetaMask UI"
-/>
-
-<br />
-
 ## Design tokens
 
 We are importing design tokens as CSS variables from [@metamask/design-tokens](https://github.com/MetaMask/design-tokens) repo to help consolidate colors and enable theming across all MetaMask products.

.storybook/4.BREAKPOINTS.stories.mdx

@@ -0,0 +1,125 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundations / Breakpoints" />
+
+# Breakpoints
+
+Breakpoints are used for responsive layout
+
+## Screen Sizes
+
+There are 4 screen sizes that make up the breakpoints for the MetaMask extension
+
+- base: `0px`
+- sm: `576px`
+- md: `768px`
+- lg: `1280px`
+
+### SCSS
+
+There are Sass variables and mixins available for use for both min and max screens sizes
+
+### Variables
+
+```css
+$screen-sm-max /* 575px */
+$screen-md-max /* 767px */
+$screen-lg-max /* 1279px */
+
+$screen-sm-min /* 576px */
+$screen-md-min /* 768px */
+$screen-lg-min /* 1280px */
+```
+
+### Mixins
+
+```css
+/* Max screen size */
+@include screen-sm-max {
+  /* equivalent css @media screen and (max-width: 575px) */
+}
+@include screen-md-max {
+  /* equivalent css @media screen and (max-width: 767px) */
+}
+@include screen-lg-max {
+  /* equivalent css @media screen and (max-width: 1279px) */
+}
+
+/* Min screen size */
+@include screen-sm-min {
+  /* equivalent css @media screen and (min-width: 576px) */
+}
+@include screen-md-min {
+  /* equivalent css @media screen and (min-width: 768px) */
+}
+@include screen-lg-min {
+  /* equivalent css @media screen and (min-width: 1280px) */
+}
+```
+
+Migrating from the old sass variables to the new mixins looks like this
+
+```css
+/* Max width */
+/* Instead of the media query and sass variable */
+@media screen and (max-width: $break-small) {
+  right: 16px;
+}
+
+/* Use the sass mixin */
+@include screen-sm-max {
+  right: 16px;
+}
+
+/* Min width */
+/* Instead of the media query and sass variable */
+@media screen and (min-width: $break-large) {
+  left: 16px;
+}
+
+/* Use the sass mixin */
+@include screen-sm-min {
+  left: 16px;
+}
+```
+
+## Takeaways
+
+- Try to avoid using static media queries in your code.
+- Try to use the provided SCSS mixins
+
+### ❌ Don't do this
+
+Don't use static media queries in your code.
+
+```css
+/**
+* Don't do this
+* Static media queries create inconsistency and could break the UI if we want to update them in future
+**/
+.account-menu {
+  @media screen and (min-width: 769px) {
+    right: calc((100vw - 80vw) / 2);
+  }
+
+  @media screen and (min-width: 1281px) {
+    right: calc((100vw - 65vw) / 2);
+  }
+}
+```
+
+### ✅ Do this
+
+Do use the provided Sass mixins
+
+```css
+.account-menu {
+  @include screen-md-min {
+    right: calc((100vw - 80vw) / 2);
+  }
+
+  @include screen-lg-min {
+    right: calc((100vw - 65vw) / 2);
+  }
+}
+```

.storybook/preview.js

@@ -30,7 +30,7 @@ addParameters({
     storySort: {
       order: [
         'Getting Started',
-        'Design Tokens',
+        'Foundations',
         'Components',
         ['UI', 'App'],
         'Pages',

ui/css/design-system/breakpoints.scss

@@ -1,5 +1,66 @@
+@use "sass:map";
+
 /*
-Responsive Breakpoints
+Responsive breakpoints
+*/
+
+// Screen sizes
+$screen-sizes-map: (
+  'sm':  576px,
+  'md': 768px,
+  'lg': 1280px,
+);
+
+// Max width screen size
+$screen-sm-max: calc(#{map.get($screen-sizes-map, "sm")} - 1px);
+$screen-md-max: calc(#{map.get($screen-sizes-map, "md")} - 1px);
+$screen-lg-max: calc(#{map.get($screen-sizes-map, "lg")} - 1px);
+
+// Min width screen size
+$screen-sm-min: map.get($screen-sizes-map, "sm");
+$screen-md-min: map.get($screen-sizes-map, "md");
+$screen-lg-min: map.get($screen-sizes-map, "lg");
+
+// Max width media query mixins
+@mixin screen-sm-max {
+  @media screen and (max-width: $screen-sm-max) {
+    @content;
+  };
+}
+
+@mixin screen-md-max {
+  @media screen and (max-width: $screen-md-max) {
+    @content;
+  };
+}
+
+@mixin screen-lg-max {
+  @media screen and (max-width: $screen-lg-max) {
+    @content;
+  };
+}
+
+// Min width media query mixins
+@mixin screen-sm-min {
+  @media screen and (min-width: $screen-sm-min) {
+    @content;
+  };
+}
+
+@mixin screen-md-min {
+  @media screen and (min-width: $screen-md-min) {
+    @content;
+  };
+}
+
+@mixin screen-lg-min {
+  @media screen and (min-width: $screen-lg-min) {
+    @content;
+  };
+}
+
+/*
+DEPRECATED
 */
 $break-small: 575px;
 $break-midpoint: 780px;