From 446bb13cad9ab7d0e2cf79cf6a19bc6c5194e7fb Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Fri, 29 Mar 2019 10:02:33 -0700
Subject: [PATCH 01/13] date stacked component initial commit

---
 core/dist/css/decanter.css                    | 17 +++++++++++
 .../date-stacked/_date-stacked.scss           | 30 +++++++++++++++++++
 .../scss/components/date-stacked/index.scss   |  8 +++++
 core/src/scss/components/index.scss           |  1 +
 .../components/date-stacked/date-stacked.json |  4 +++
 .../components/date-stacked/date-stacked.twig | 24 +++++++++++++++
 kss/builder/decanter/kss-assets/css/kss.css   |  3 ++
 kss/builder/decanter/scss/_date-stacked.scss  |  7 +++++
 kss/builder/decanter/scss/kss.scss            |  1 +
 package-lock.json                             |  2 +-
 10 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 core/src/scss/components/date-stacked/_date-stacked.scss
 create mode 100644 core/src/scss/components/date-stacked/index.scss
 create mode 100644 core/src/templates/components/date-stacked/date-stacked.json
 create mode 100644 core/src/templates/components/date-stacked/date-stacked.twig
 create mode 100644 kss/builder/decanter/scss/_date-stacked.scss

diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
index 81a23284d..dcefad13a 100644
--- a/core/dist/css/decanter.css
+++ b/core/dist/css/decanter.css
@@ -6923,6 +6923,23 @@ button,
   -webkit-transform: translateX(-50%) translateY(-50%) translateY(-3rem);
           transform: translateX(-50%) translateY(-50%) translateY(-3rem); }
 
+.su-date-stacked {
+  border: 1px solid #C6C6C6;
+  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1);
+          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1);
+  margin-right: 0;
+  padding: 20px 25px;
+  background: #2e2d29;
+  color: #ffffff;
+  text-align: center; }
+  .su-date-stacked .su-date-month {
+    font-size: 1.25em;
+    font-weight: 100;
+    line-height: 1.2;
+    text-transform: uppercase; }
+  .su-date-stacked .su-date-day {
+    font-weight: 400; }
+
 .su-global-footer {
   background-color: #8c1515;
   color: #ffffff; }
diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
new file mode 100644
index 000000000..f63f04f22
--- /dev/null
+++ b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+//
+// Date Stacked
+//
+// Abbreviated month stacked on top of numerical day of the month.
+//
+// Markup: ../templates/components/date-stacked/date-stacked.twig
+//
+// Style guide: Components.Date Stacked
+//
+.su-date-stacked {
+  @include box-shadow('shallow')
+  @include margin(null 0 null null);
+  @include padding(20px 25px);
+  background: $color-black;
+  color: $color-white;
+  text-align: center;
+
+  .su-date-month {
+    @include modular-typography(1);
+    font-weight: $font-x-light;
+    line-height: $displays-line-height;
+    text-transform: uppercase;
+  }
+
+  .su-date-day {
+    font-weight: $font-regular;
+  }
+}
diff --git a/core/src/scss/components/date-stacked/index.scss b/core/src/scss/components/date-stacked/index.scss
new file mode 100644
index 000000000..1682b9b06
--- /dev/null
+++ b/core/src/scss/components/date-stacked/index.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+///
+/// ROLL UP
+///
+
+@import
+'date-stacked';
diff --git a/core/src/scss/components/index.scss b/core/src/scss/components/index.scss
index 6a6178b5f..a9fe2ee96 100644
--- a/core/src/scss/components/index.scss
+++ b/core/src/scss/components/index.scss
@@ -12,6 +12,7 @@
   'button/index',
   'card/index',
   'cta/index',
+  'date-stacked/index',
   'global-footer/index',
   'hero/index',
   'link/index',
diff --git a/core/src/templates/components/date-stacked/date-stacked.json b/core/src/templates/components/date-stacked/date-stacked.json
new file mode 100644
index 000000000..cb794cede
--- /dev/null
+++ b/core/src/templates/components/date-stacked/date-stacked.json
@@ -0,0 +1,4 @@
+{
+  "month_of_year": "Oct",
+  "day_of_month": "31"
+}
diff --git a/core/src/templates/components/date-stacked/date-stacked.twig b/core/src/templates/components/date-stacked/date-stacked.twig
new file mode 100644
index 000000000..82563c9f5
--- /dev/null
+++ b/core/src/templates/components/date-stacked/date-stacked.twig
@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Date Stacked Component.
+ *
+ * Abbreviated month stacked on top of numerical day of the month.
+ *
+ * Available variables:
+ * - attributes: For additional HTML attributes not already provided.
+ * - modifier_class: Additional css classes to change look and behaviour.
+ * - month_of_year: The abbreviated month of the year.
+ * - day_of_month: The day of the month in digit form.
+ */
+#}
+<div{{ attributes }} class="su-date-stacked {{ modifier_class }}">
+  {% if month_of_year is not empty %}
+    <div class="su-date-month">{{ month_of_year }}</div>
+  {% endif %}
+
+  {% if day_of_month is not empty %}
+    <div class="su-date-day">{{ day_of_month }}</div>
+  {% endif %}
+
+</div>
diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index 8355e9df2..a3bab06cc 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -786,6 +786,9 @@ sub {
 #kssref-components-cta .kss-modifier__example {
   max-width: 600px; }
 
+#kssref-components-date-stacked .su-date-stacked {
+  max-width: 93px; }
+
 .kss-modifier__wrapper .flex-item {
   padding: 10px;
   background-color: #4d4f53;
diff --git a/kss/builder/decanter/scss/_date-stacked.scss b/kss/builder/decanter/scss/_date-stacked.scss
new file mode 100644
index 000000000..c064b69af
--- /dev/null
+++ b/kss/builder/decanter/scss/_date-stacked.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+#kssref-components-date-stacked {
+  .su-date-stacked {
+    max-width: 93px;
+  }
+}
diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss
index 3cf55eb28..d6f3fdddf 100644
--- a/kss/builder/decanter/scss/kss.scss
+++ b/kss/builder/decanter/scss/kss.scss
@@ -43,6 +43,7 @@
   'colors-demo',
   'content',
   'cta',
+  'date-stacked',
   'flex-grid',
   'fullscreen',
   'global-footer',
diff --git a/package-lock.json b/package-lock.json
index d22699484..24d42b6ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "decanter",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

From c9f9dfe52b2854ee7ce6ec6958975976921f0f26 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Fri, 29 Mar 2019 11:39:18 -0700
Subject: [PATCH 02/13] CC FIXUP

---
 core/src/scss/components/date-stacked/_date-stacked.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
index f63f04f22..7e26371c3 100644
--- a/core/src/scss/components/date-stacked/_date-stacked.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -10,7 +10,7 @@
 // Style guide: Components.Date Stacked
 //
 .su-date-stacked {
-  @include box-shadow('shallow')
+  @include box-shadow('shallow');
   @include margin(null 0 null null);
   @include padding(20px 25px);
   background: $color-black;

From a867df39c00144ea20972a2a9e4d11dd49fdef3a Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Thu, 4 Apr 2019 09:46:00 -0700
Subject: [PATCH 03/13] CC FIXUP

---
 core/src/scss/components/index.scss | 30 ++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/core/src/scss/components/index.scss b/core/src/scss/components/index.scss
index a9fe2ee96..d55bd5da8 100644
--- a/core/src/scss/components/index.scss
+++ b/core/src/scss/components/index.scss
@@ -7,18 +7,18 @@
 // Style guide: Components
 
 @import
-  'alert/index',
-  'brand-bar/index',
-  'button/index',
-  'card/index',
-  'cta/index',
-  'date-stacked/index',
-  'global-footer/index',
-  'hero/index',
-  'link/index',
-  'logo/index',
-  'lockup/index',
-  'main-nav/index',
-  'quote/index',
-  'site-search/index',
-  'skiplinks/index';
+'alert/index',
+'brand-bar/index',
+'button/index',
+'card/index',
+'cta/index',
+'date-stacked/index',
+'global-footer/index',
+'hero/index',
+'link/index',
+'logo/index',
+'lockup/index',
+'main-nav/index',
+'quote/index',
+'site-search/index',
+'skiplinks/index';

From 350f758549f8a1579901a80501baceb8649ca3d4 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Thu, 4 Apr 2019 10:16:22 -0700
Subject: [PATCH 04/13] clean up

---
 core/dist/css/decanter.css                               | 8 +++-----
 core/src/scss/components/date-stacked/_date-stacked.scss | 6 ++----
 kss/builder/decanter/kss-assets/css/kss.css              | 2 +-
 kss/builder/decanter/scss/_date-stacked.scss             | 2 +-
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
index 2c70bef8a..a6530e807 100644
--- a/core/dist/css/decanter.css
+++ b/core/dist/css/decanter.css
@@ -6935,12 +6935,10 @@ button,
   color: #ffffff;
   text-align: center; }
   .su-date-stacked .su-date-month {
-    font-size: 1.25em;
-    font-weight: 100;
-    line-height: 1.2;
-    text-transform: uppercase; }
+    font-size: 1.25em; }
   .su-date-stacked .su-date-day {
-    font-weight: 400; }
+    font-size: 1.5625em;
+    font-weight: 600; }
 
 .su-global-footer {
   background-color: #8c1515;
diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
index 7e26371c3..e632ed782 100644
--- a/core/src/scss/components/date-stacked/_date-stacked.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -19,12 +19,10 @@
 
   .su-date-month {
     @include modular-typography(1);
-    font-weight: $font-x-light;
-    line-height: $displays-line-height;
-    text-transform: uppercase;
   }
 
   .su-date-day {
-    font-weight: $font-regular;
+    @include modular-typography(2);
+    font-weight: $font-semi-bold;
   }
 }
diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index 8406d82c9..9ad293a70 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -787,7 +787,7 @@ sub {
   max-width: 600px; }
 
 #kssref-components-date-stacked .su-date-stacked {
-  max-width: 93px; }
+  max-width: 103px; }
 
 .kss-modifier__wrapper .flex-item {
   padding: 10px;
diff --git a/kss/builder/decanter/scss/_date-stacked.scss b/kss/builder/decanter/scss/_date-stacked.scss
index c064b69af..8748fc9d8 100644
--- a/kss/builder/decanter/scss/_date-stacked.scss
+++ b/kss/builder/decanter/scss/_date-stacked.scss
@@ -2,6 +2,6 @@
 
 #kssref-components-date-stacked {
   .su-date-stacked {
-    max-width: 93px;
+    max-width: 103px;
   }
 }

From a763dadb12a5ed44b78ec8cd41ddf131d433c34c Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Thu, 11 Apr 2019 11:31:29 -0700
Subject: [PATCH 05/13] updated default styles for component based on new
 design

---
 core/dist/css/decanter.css                    | 30 ++++++++++++++-----
 .../date-stacked/_date-stacked.scss           | 10 +++----
 kss/builder/decanter/kss-assets/css/kss.css   |  2 +-
 kss/builder/decanter/scss/_date-stacked.scss  |  2 +-
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
index a6530e807..3be2404b0 100644
--- a/core/dist/css/decanter.css
+++ b/core/dist/css/decanter.css
@@ -6926,19 +6926,33 @@ button,
           transform: translateX(-50%) translateY(-50%) translateY(-3rem); }
 
 .su-date-stacked {
-  border: 1px solid #C6C6C6;
-  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1);
-          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1);
-  margin-right: 0;
-  padding: 20px 25px;
   background: #2e2d29;
   color: #ffffff;
   text-align: center; }
+  @media only screen and (min-width: 0) {
+    .su-date-stacked {
+      padding: 1.6rem; } }
+  @media only screen and (min-width: 768px) {
+    .su-date-stacked {
+      padding: 1.8rem; } }
+  @media only screen and (min-width: 1500px) {
+    .su-date-stacked {
+      padding: 1.9rem; } }
   .su-date-stacked .su-date-month {
-    font-size: 1.25em; }
+    font-size: 2rem; }
+    @media (max-width: 767px) {
+      .su-date-stacked .su-date-month {
+        font-size: 1.6rem; } }
   .su-date-stacked .su-date-day {
-    font-size: 1.5625em;
-    font-weight: 600; }
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-top: 0;
+    clear: both;
+    font-weight: 700;
+    line-height: 1.2;
+    font-size: 1.953125em; }
+    .su-date-stacked .su-date-day a {
+      text-decoration: none; }
 
 .su-global-footer {
   background-color: #8c1515;
diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
index e632ed782..1026a104a 100644
--- a/core/src/scss/components/date-stacked/_date-stacked.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -10,19 +10,17 @@
 // Style guide: Components.Date Stacked
 //
 .su-date-stacked {
-  @include box-shadow('shallow');
-  @include margin(null 0 null null);
-  @include padding(20px 25px);
+  @include modular-spacing('padding', 0);
   background: $color-black;
   color: $color-white;
   text-align: center;
 
   .su-date-month {
-    @include modular-typography(1);
+    @include big-paragraph;
   }
 
   .su-date-day {
-    @include modular-typography(2);
-    font-weight: $font-semi-bold;
+    @include types;
+    @include type-b;
   }
 }
diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index 9ad293a70..d13a510b6 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -787,7 +787,7 @@ sub {
   max-width: 600px; }
 
 #kssref-components-date-stacked .su-date-stacked {
-  max-width: 103px; }
+  max-width: 105px; }
 
 .kss-modifier__wrapper .flex-item {
   padding: 10px;
diff --git a/kss/builder/decanter/scss/_date-stacked.scss b/kss/builder/decanter/scss/_date-stacked.scss
index 8748fc9d8..ce1c50807 100644
--- a/kss/builder/decanter/scss/_date-stacked.scss
+++ b/kss/builder/decanter/scss/_date-stacked.scss
@@ -2,6 +2,6 @@
 
 #kssref-components-date-stacked {
   .su-date-stacked {
-    max-width: 103px;
+    max-width: 105px;
   }
 }

From 90003c1a55a8f05266a1f16de4e5a0a1989cb781 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Thu, 11 Apr 2019 16:03:18 -0700
Subject: [PATCH 06/13] no bg variant

---
 core/dist/css/decanter.css                           |  6 ++++++
 .../date-stacked/_date-stacked--no-background.scss   | 12 ++++++++++++
 .../scss/components/date-stacked/_date-stacked.scss  |  2 ++
 core/src/scss/components/date-stacked/index.scss     |  3 ++-
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 core/src/scss/components/date-stacked/_date-stacked--no-background.scss

diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
index 3be2404b0..b1673b763 100644
--- a/core/dist/css/decanter.css
+++ b/core/dist/css/decanter.css
@@ -6954,6 +6954,12 @@ button,
     .su-date-stacked .su-date-day a {
       text-decoration: none; }
 
+.su-date-stacked--no-background {
+  padding: 0;
+  background: none;
+  color: #2e2d29;
+  text-align: left; }
+
 .su-global-footer {
   background-color: #8c1515;
   color: #ffffff; }
diff --git a/core/src/scss/components/date-stacked/_date-stacked--no-background.scss b/core/src/scss/components/date-stacked/_date-stacked--no-background.scss
new file mode 100644
index 000000000..b33a5cc95
--- /dev/null
+++ b/core/src/scss/components/date-stacked/_date-stacked--no-background.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+//
+// Date Stacked No Background
+//
+
+.su-date-stacked--no-background {
+  @include padding(0);
+  background: none;
+  color: $color-black;
+  text-align: left;
+}
diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
index 1026a104a..d2166ce78 100644
--- a/core/src/scss/components/date-stacked/_date-stacked.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -5,6 +5,8 @@
 //
 // Abbreviated month stacked on top of numerical day of the month.
 //
+// .su-date-stacked--no-background - Black type on transparent background
+//
 // Markup: ../templates/components/date-stacked/date-stacked.twig
 //
 // Style guide: Components.Date Stacked
diff --git a/core/src/scss/components/date-stacked/index.scss b/core/src/scss/components/date-stacked/index.scss
index 1682b9b06..95907dc14 100644
--- a/core/src/scss/components/date-stacked/index.scss
+++ b/core/src/scss/components/date-stacked/index.scss
@@ -5,4 +5,5 @@
 ///
 
 @import
-'date-stacked';
+'date-stacked',
+'date-stacked--no-background';

From bc6321609fe5688a1f87f826c1191741b9421b5a Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Mon, 15 Apr 2019 10:39:04 -0700
Subject: [PATCH 07/13] styleguide responsiveness

---
 kss/builder/decanter/kss-assets/css/kss.css  |  8 +++++++-
 kss/builder/decanter/scss/_date-stacked.scss | 10 +++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index d13a510b6..a041ecc67 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -787,7 +787,13 @@ sub {
   max-width: 600px; }
 
 #kssref-components-date-stacked .su-date-stacked {
-  max-width: 105px; }
+  max-width: 87px; }
+  @media only screen and (min-width: 768px) and (max-width: 991px) {
+    #kssref-components-date-stacked .su-date-stacked {
+      max-width: 101px; } }
+  @media only screen and (min-width: 1500px) {
+    #kssref-components-date-stacked .su-date-stacked {
+      max-width: 105px; } }
 
 .kss-modifier__wrapper .flex-item {
   padding: 10px;
diff --git a/kss/builder/decanter/scss/_date-stacked.scss b/kss/builder/decanter/scss/_date-stacked.scss
index ce1c50807..d6a081163 100644
--- a/kss/builder/decanter/scss/_date-stacked.scss
+++ b/kss/builder/decanter/scss/_date-stacked.scss
@@ -2,6 +2,14 @@
 
 #kssref-components-date-stacked {
   .su-date-stacked {
-    max-width: 105px;
+    max-width: 87px;
+
+    @include grid-media-only('md') {
+      max-width: 101px;
+    }
+
+    @include grid-media-only('2xl') {
+      max-width: 105px;
+    }
   }
 }

From ac2def3740fb530075235a79446f4e4f461c9a46 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Mon, 15 Apr 2019 15:21:25 -0700
Subject: [PATCH 08/13] max width and BEM FIXUP

---
 core/dist/css/decanter.css                        | 15 +++++++++++----
 .../components/date-stacked/_date-stacked.scss    | 13 +++++++++++--
 .../components/date-stacked/date-stacked.twig     |  4 ++--
 kss/builder/decanter/kss-assets/css/kss.css       |  9 ---------
 kss/builder/decanter/scss/_date-stacked.scss      | 15 ---------------
 kss/builder/decanter/scss/kss.scss                |  1 -
 6 files changed, 24 insertions(+), 33 deletions(-)
 delete mode 100644 kss/builder/decanter/scss/_date-stacked.scss

diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
index b1673b763..24a3bc80c 100644
--- a/core/dist/css/decanter.css
+++ b/core/dist/css/decanter.css
@@ -6928,6 +6928,7 @@ button,
 .su-date-stacked {
   background: #2e2d29;
   color: #ffffff;
+  max-width: 87px;
   text-align: center; }
   @media only screen and (min-width: 0) {
     .su-date-stacked {
@@ -6938,12 +6939,18 @@ button,
   @media only screen and (min-width: 1500px) {
     .su-date-stacked {
       padding: 1.9rem; } }
-  .su-date-stacked .su-date-month {
+  @media only screen and (min-width: 768px) and (max-width: 991px) {
+    .su-date-stacked {
+      max-width: 101px; } }
+  @media only screen and (min-width: 1500px) {
+    .su-date-stacked {
+      max-width: 105px; } }
+  .su-date-stacked .su-date-stacked__month {
     font-size: 2rem; }
     @media (max-width: 767px) {
-      .su-date-stacked .su-date-month {
+      .su-date-stacked .su-date-stacked__month {
         font-size: 1.6rem; } }
-  .su-date-stacked .su-date-day {
+  .su-date-stacked .su-date-stacked__day {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin-top: 0;
@@ -6951,7 +6958,7 @@ button,
     font-weight: 700;
     line-height: 1.2;
     font-size: 1.953125em; }
-    .su-date-stacked .su-date-day a {
+    .su-date-stacked .su-date-stacked__day a {
       text-decoration: none; }
 
 .su-date-stacked--no-background {
diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
index d2166ce78..289a716f1 100644
--- a/core/src/scss/components/date-stacked/_date-stacked.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -15,13 +15,22 @@
   @include modular-spacing('padding', 0);
   background: $color-black;
   color: $color-white;
+  max-width: 87px;
   text-align: center;
 
-  .su-date-month {
+  @include grid-media-only('md') {
+    max-width: 101px;
+  }
+
+  @include grid-media-only('2xl') {
+    max-width: 105px;
+  }
+
+  .su-date-stacked__month {
     @include big-paragraph;
   }
 
-  .su-date-day {
+  .su-date-stacked__day {
     @include types;
     @include type-b;
   }
diff --git a/core/src/templates/components/date-stacked/date-stacked.twig b/core/src/templates/components/date-stacked/date-stacked.twig
index 82563c9f5..13e6febcc 100644
--- a/core/src/templates/components/date-stacked/date-stacked.twig
+++ b/core/src/templates/components/date-stacked/date-stacked.twig
@@ -14,11 +14,11 @@
 #}
 <div{{ attributes }} class="su-date-stacked {{ modifier_class }}">
   {% if month_of_year is not empty %}
-    <div class="su-date-month">{{ month_of_year }}</div>
+    <div class="su-date-stacked__month">{{ month_of_year }}</div>
   {% endif %}
 
   {% if day_of_month is not empty %}
-    <div class="su-date-day">{{ day_of_month }}</div>
+    <div class="su-date-stacked__day">{{ day_of_month }}</div>
   {% endif %}
 
 </div>
diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index a041ecc67..6fb0d7b51 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -786,15 +786,6 @@ sub {
 #kssref-components-cta .kss-modifier__example {
   max-width: 600px; }
 
-#kssref-components-date-stacked .su-date-stacked {
-  max-width: 87px; }
-  @media only screen and (min-width: 768px) and (max-width: 991px) {
-    #kssref-components-date-stacked .su-date-stacked {
-      max-width: 101px; } }
-  @media only screen and (min-width: 1500px) {
-    #kssref-components-date-stacked .su-date-stacked {
-      max-width: 105px; } }
-
 .kss-modifier__wrapper .flex-item {
   padding: 10px;
   background-color: #4d4f53;
diff --git a/kss/builder/decanter/scss/_date-stacked.scss b/kss/builder/decanter/scss/_date-stacked.scss
deleted file mode 100644
index d6a081163..000000000
--- a/kss/builder/decanter/scss/_date-stacked.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@charset "UTF-8";
-
-#kssref-components-date-stacked {
-  .su-date-stacked {
-    max-width: 87px;
-
-    @include grid-media-only('md') {
-      max-width: 101px;
-    }
-
-    @include grid-media-only('2xl') {
-      max-width: 105px;
-    }
-  }
-}
diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss
index d6f3fdddf..3cf55eb28 100644
--- a/kss/builder/decanter/scss/kss.scss
+++ b/kss/builder/decanter/scss/kss.scss
@@ -43,7 +43,6 @@
   'colors-demo',
   'content',
   'cta',
-  'date-stacked',
   'flex-grid',
   'fullscreen',
   'global-footer',

From 69a37c6468ae68ba064c68b3713bbb23b6ee96d9 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Thu, 18 Apr 2019 08:36:53 -0700
Subject: [PATCH 09/13] incorporate time tag

---
 core/dist/css/decanter.css                               | 9 +++++----
 .../date-stacked/_date-stacked--no-background.scss       | 1 -
 core/src/scss/components/date-stacked/_date-stacked.scss | 2 ++
 .../templates/components/date-stacked/date-stacked.twig  | 4 ++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
index 24a3bc80c..832e553db 100644
--- a/core/dist/css/decanter.css
+++ b/core/dist/css/decanter.css
@@ -6946,7 +6946,8 @@ button,
     .su-date-stacked {
       max-width: 105px; } }
   .su-date-stacked .su-date-stacked__month {
-    font-size: 2rem; }
+    font-size: 2rem;
+    display: block; }
     @media (max-width: 767px) {
       .su-date-stacked .su-date-stacked__month {
         font-size: 1.6rem; } }
@@ -6957,15 +6958,15 @@ button,
     clear: both;
     font-weight: 700;
     line-height: 1.2;
-    font-size: 1.953125em; }
+    font-size: 1.953125em;
+    display: block; }
     .su-date-stacked .su-date-stacked__day a {
       text-decoration: none; }
 
 .su-date-stacked--no-background {
   padding: 0;
   background: none;
-  color: #2e2d29;
-  text-align: left; }
+  color: #2e2d29; }
 
 .su-global-footer {
   background-color: #8c1515;
diff --git a/core/src/scss/components/date-stacked/_date-stacked--no-background.scss b/core/src/scss/components/date-stacked/_date-stacked--no-background.scss
index b33a5cc95..decb68bcd 100644
--- a/core/src/scss/components/date-stacked/_date-stacked--no-background.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked--no-background.scss
@@ -8,5 +8,4 @@
   @include padding(0);
   background: none;
   color: $color-black;
-  text-align: left;
 }
diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
index 289a716f1..ecbdf8742 100644
--- a/core/src/scss/components/date-stacked/_date-stacked.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -28,10 +28,12 @@
 
   .su-date-stacked__month {
     @include big-paragraph;
+    display: block;
   }
 
   .su-date-stacked__day {
     @include types;
     @include type-b;
+    display: block;
   }
 }
diff --git a/core/src/templates/components/date-stacked/date-stacked.twig b/core/src/templates/components/date-stacked/date-stacked.twig
index 13e6febcc..2042948bf 100644
--- a/core/src/templates/components/date-stacked/date-stacked.twig
+++ b/core/src/templates/components/date-stacked/date-stacked.twig
@@ -14,11 +14,11 @@
 #}
 <div{{ attributes }} class="su-date-stacked {{ modifier_class }}">
   {% if month_of_year is not empty %}
-    <div class="su-date-stacked__month">{{ month_of_year }}</div>
+    <time class="su-date-stacked__month" datetime="{{ month_of_year }}">{{ month_of_year }}</time>
   {% endif %}
 
   {% if day_of_month is not empty %}
-    <div class="su-date-stacked__day">{{ day_of_month }}</div>
+    <time class="su-date-stacked__day" datetime="{{ day_of_month }}">{{ day_of_month }}</time>
   {% endif %}
 
 </div>

From 3ead959567b1e923936d65e2f55e1834c17ac693 Mon Sep 17 00:00:00 2001
From: Sherakama <sherakama@gmail.com>
Date: Thu, 13 Jun 2019 15:19:51 -0700
Subject: [PATCH 10/13] Update date-stacked.twig

---
 core/src/templates/components/date-stacked/date-stacked.twig | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/core/src/templates/components/date-stacked/date-stacked.twig b/core/src/templates/components/date-stacked/date-stacked.twig
index 2042948bf..0384317b5 100644
--- a/core/src/templates/components/date-stacked/date-stacked.twig
+++ b/core/src/templates/components/date-stacked/date-stacked.twig
@@ -12,13 +12,16 @@
  * - day_of_month: The day of the month in digit form.
  */
 #}
+{% set day_of_month_time = day_of_month %}
+
 <div{{ attributes }} class="su-date-stacked {{ modifier_class }}">
   {% if month_of_year is not empty %}
+    {% set day_of_month_time = month_of_year ~ "-" ~ day_of_month %}
     <time class="su-date-stacked__month" datetime="{{ month_of_year }}">{{ month_of_year }}</time>
   {% endif %}
 
   {% if day_of_month is not empty %}
-    <time class="su-date-stacked__day" datetime="{{ day_of_month }}">{{ day_of_month }}</time>
+    <time class="su-date-stacked__day" datetime="{{ day_of_month_time }}">{{ day_of_month }}</time>
   {% endif %}
 
 </div>

From ff43b19cc22a86ef14d884ffa2bd4a2fd0a4d96c Mon Sep 17 00:00:00 2001
From: Shea McKinney <sherakama@gmail.com>
Date: Tue, 18 Jun 2019 13:05:42 -0700
Subject: [PATCH 11/13] fixup! color maps

---
 .../components/date-stacked/_date-stacked--no-background.scss | 2 +-
 core/src/scss/components/date-stacked/_date-stacked.scss      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/src/scss/components/date-stacked/_date-stacked--no-background.scss b/core/src/scss/components/date-stacked/_date-stacked--no-background.scss
index decb68bcd..ee4bbe0dd 100644
--- a/core/src/scss/components/date-stacked/_date-stacked--no-background.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked--no-background.scss
@@ -7,5 +7,5 @@
 .su-date-stacked--no-background {
   @include padding(0);
   background: none;
-  color: $color-black;
+  color: color(text--high-contrast);
 }
diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
index ecbdf8742..2858fec1e 100644
--- a/core/src/scss/components/date-stacked/_date-stacked.scss
+++ b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -13,8 +13,8 @@
 //
 .su-date-stacked {
   @include modular-spacing('padding', 0);
-  background: $color-black;
-  color: $color-white;
+  background: color(bg--reverse);
+  color: color(text--reverse);
   max-width: 87px;
   text-align: center;
 

From 9a7290e8b8fd06e083d1591b5d15e7ff3207b988 Mon Sep 17 00:00:00 2001
From: Shea McKinney <sherakama@gmail.com>
Date: Tue, 18 Jun 2019 13:13:44 -0700
Subject: [PATCH 12/13] fixup! build.

---
 core/dist/css/decanter.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
index 053eaf1c1..9f38178ef 100644
--- a/core/dist/css/decanter.css
+++ b/core/dist/css/decanter.css
@@ -7891,7 +7891,7 @@ button,
 .su-date-stacked--no-background {
   padding: 0;
   background: none;
-  color: #2e2d29; }
+  color: #000; }
 
 .su-global-footer {
   background-color: #8c1515;

From bdd75b4e5ce7c584e7e63c81f09d8d3214390851 Mon Sep 17 00:00:00 2001
From: Sherakama <sherakama@gmail.com>
Date: Tue, 18 Jun 2019 14:41:39 -0700
Subject: [PATCH 13/13] Update date-stacked.twig

---
 .../src/templates/components/date-stacked/date-stacked.twig | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/core/src/templates/components/date-stacked/date-stacked.twig b/core/src/templates/components/date-stacked/date-stacked.twig
index 0384317b5..b50ee9350 100644
--- a/core/src/templates/components/date-stacked/date-stacked.twig
+++ b/core/src/templates/components/date-stacked/date-stacked.twig
@@ -12,16 +12,14 @@
  * - day_of_month: The day of the month in digit form.
  */
 #}
-{% set day_of_month_time = day_of_month %}
 
 <div{{ attributes }} class="su-date-stacked {{ modifier_class }}">
   {% if month_of_year is not empty %}
-    {% set day_of_month_time = month_of_year ~ "-" ~ day_of_month %}
-    <time class="su-date-stacked__month" datetime="{{ month_of_year }}">{{ month_of_year }}</time>
+    <span class="su-date-stacked__month">{{ month_of_year }}</span>
   {% endif %}
 
   {% if day_of_month is not empty %}
-    <time class="su-date-stacked__day" datetime="{{ day_of_month_time }}">{{ day_of_month }}</time>
+    <span class="su-date-stacked__day">{{ day_of_month }}</span>
   {% endif %}
 
 </div>