fix(style): datetime shortcode text blends with dark background

- When span.current-timestamp (and related shortcodes) are children of .article--content, the text isn't visible in the dark theme--it blends with the background.
- Add specific style settings for datetime shortcodes so that the timestamp text is visible outside of a table.

Author: jstirnaman

assets/js/datetime.js

@@ -2,8 +2,12 @@ import $ from 'jquery';
 
 var date = new Date();
 var currentTimestamp = date.toISOString().replace(/^(.*)(\.\d+)(Z)/, '$1$3'); // 2023-01-01T12:34:56Z
-var currentTime = date.toISOString().replace(/(^.*T)(.*)(Z)/, '$2') + '084216'; // 12:34:56.000084216
 
+// Microsecond offset appended to the current time string for formatting purposes
+const MICROSECOND_OFFSET = '084216';
+
+var currentTime =
+  date.toISOString().replace(/(^.*T)(.*)(Z)/, '$2') + MICROSECOND_OFFSET; // 12:34:56.000084216
 function currentDate(offset = 0, trimTime = false) {
   let outputDate = new Date(date);
   outputDate.setDate(outputDate.getDate() + offset);

assets/styles/layouts/_datetime.scss

@@ -0,0 +1,18 @@
+/*
+  Datetime Components
+  ----------------------------------------------
+*/
+
+.current-timestamp,
+.current-date,
+.current-time,
+.enterprise-eol-date {
+  color: $current-timestamp-color;
+  display: inline-block;
+  font-family: $proxima;
+  white-space: nowrap;
+}
+
+.nowrap {
+  white-space: nowrap;
+}

assets/styles/styles-default.scss

@@ -23,6 +23,7 @@
         "layouts/syntax-highlighting",
         "layouts/algolia-search-overrides",
         "layouts/landing",
+        "layouts/datetime",
         "layouts/error-page",
         "layouts/footer-widgets",
         "layouts/modals",

assets/styles/themes/_theme-dark.scss

@@ -203,6 +203,12 @@ $article-btn-text-hover: $g20-white;
 $article-nav-icon-bg: $g5-pepper;
 $article-nav-acct-bg: $g3-castle;
 
+// Datetime shortcode colors
+$current-timestamp-color: $g15-platinum;
+$current-date-color: $g15-platinum;
+$current-time-color: $g15-platinum;
+$enterprise-eol-date-color: $g15-platinum;
+
 // Error Page Colors
 $error-page-btn: $b-pool;
 $error-page-btn-text: $g20-white;

assets/styles/themes/_theme-light.scss

@@ -203,6 +203,12 @@ $article-btn-text-hover: $g20-white !default;
 $article-nav-icon-bg: $g6-smoke !default;
 $article-nav-acct-bg: $g5-pepper !default;
 
+// Datetime Colors
+$current-timestamp-color: $article-text !default;
+$current-date-color: $article-text !default;
+$current-time-color: $article-text !default;
+$enterprise-eol-date-color: $article-text !default;
+
 // Error Page Colors
 $error-page-btn: $b-pool !default;
 $error-page-btn-text: $g20-white !default;

content/example.md

@@ -1351,4 +1351,22 @@ and all the rows with the `hum` field will be in another.
 | 2022-01-01T10:00:00Z | home         | Living Room | temp   | 21.8   |
 
 {{% /tab-content %}}
-{{< /tabs-wrapper >}}
+{{< /tabs-wrapper >}}
+
+## datetime/current-timestamp shortcode
+
+### Default usage 
+
+{{< datetime/current-timestamp >}}
+
+### Format YYYY-MM-DD HH:mm:ss
+
+{{< datetime/current-timestamp format="YYYY-MM-DD HH:mm:ss" >}}
+
+### Format with UTC timezone
+
+{{< datetime/current-timestamp format="YYYY-MM-DD HH:mm:ss" timezone="UTC" >}}
+
+### Format with America/New_York timezone
+
+{{< datetime/current-timestamp format="YYYY-MM-DD HH:mm:ss" timezone="America/New_York" >}}