From 06e8980f3c14784505534c47c8f8647ce84c2f69 Mon Sep 17 00:00:00 2001
From: Will Bjorn <30843002+wibjorn@users.noreply.github.com>
Date: Tue, 9 Mar 2021 09:08:49 -0800
Subject: [PATCH] breakpoint tokens and media queries (#13)

* update

* update
---
 .changeset/olive-wolves-tan.md    |  5 +++
 css/src/mixins/index.scss         |  1 +
 css/src/mixins/media-queries.scss | 70 +++++++++++++++++++++++++++++++
 css/src/tokens/breakpoints.scss   |  8 ++++
 4 files changed, 84 insertions(+)
 create mode 100644 .changeset/olive-wolves-tan.md
 create mode 100644 css/src/mixins/index.scss
 create mode 100644 css/src/mixins/media-queries.scss
 create mode 100644 css/src/tokens/breakpoints.scss

diff --git a/.changeset/olive-wolves-tan.md b/.changeset/olive-wolves-tan.md
new file mode 100644
index 00000000..800ab995
--- /dev/null
+++ b/.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.
diff --git a/css/src/mixins/index.scss b/css/src/mixins/index.scss
new file mode 100644
index 00000000..3db06b8b
--- /dev/null
+++ b/css/src/mixins/index.scss
@@ -0,0 +1 @@
+@import 'media-queries.scss';
diff --git a/css/src/mixins/media-queries.scss b/css/src/mixins/media-queries.scss
new file mode 100644
index 00000000..23900214
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/css/src/tokens/breakpoints.scss b/css/src/tokens/breakpoints.scss
new file mode 100644
index 00000000..ae9c3136
--- /dev/null
+++ b/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;