breakpoint tokens and media queries (#13)

* update

* update

.changeset/olive-wolves-tan.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': minor
+---
+
+Add token values for breakpoints. Create the mixins folder and use tokens to as basis for media query mixins.

css/src/mixins/index.scss

@@ -0,0 +1 @@
+@import 'media-queries.scss';

css/src/mixins/media-queries.scss

@@ -0,0 +1,70 @@
+// Responsiveness
+
+@mixin from($device) {
+	@media screen and (min-width: $device) {
+		@content;
+	}
+}
+
+@mixin until($device) {
+	@media screen and (max-width: $device - 1px),
+		screen and (min-resolution: 120dpi) and (max-width: $device - 0.1px) {
+		@content;
+	}
+}
+
+// Orientation
+
+@mixin orientation-portrait {
+	@media screen and (max-aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (max-aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+@mixin orientation-landscape {
+	@media screen and (min-aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (min-aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+@mixin orientation-square {
+	@media screen and (aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+// Mobile-first media queries
+
+@mixin small-only {
+	@media screen and (max-width: $breakpoint-medium - 1),
+		screen and (min-resolution: 120dpi) and (min-width: $breakpoint-small) and (max-width: $breakpoint-medium - 0.1px) {
+		@content;
+	}
+}
+
+@mixin small {
+	@media screen and (min-width: $breakpoint-small), print {
+		@content;
+	}
+}
+
+@mixin medium {
+	@media screen and (min-width: $breakpoint-medium), print {
+		@content;
+	}
+}
+
+@mixin large {
+	@media screen and (min-width: $breakpoint-large) {
+		@content;
+	}
+}
+
+@mixin massive {
+	@media screen and (min-width: $breakpoint-massive) {
+		@content;
+	}
+}

css/src/tokens/breakpoints.scss

@@ -0,0 +1,8 @@
+// The horizontal gap tied to containers
+$container-gap: 64px !default;
+
+// Breakpoints
+$breakpoint-small: 540px !default;
+$breakpoint-medium: 768px !default;
+$breakpoint-large: 1088px !default;
+$breakpoint-massive: 1472px !default;