From 483b41753a1be927e9c55d6f6752149e86de7713 Mon Sep 17 00:00:00 2001
From: Jason Stirnaman <stirnamanj@gmail.com>
Date: Wed, 28 May 2025 10:16:32 -0500
Subject: [PATCH] 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.

---
 assets/js/datetime.js                  |  6 +++++-
 assets/styles/layouts/_datetime.scss   | 18 ++++++++++++++++++
 assets/styles/styles-default.scss      |  1 +
 assets/styles/themes/_theme-dark.scss  |  6 ++++++
 assets/styles/themes/_theme-light.scss |  6 ++++++
 content/example.md                     | 20 +++++++++++++++++++-
 6 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 assets/styles/layouts/_datetime.scss

diff --git a/assets/js/datetime.js b/assets/js/datetime.js
index 3c5666d2d..5c463e545 100644
--- a/assets/js/datetime.js
+++ b/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);
diff --git a/assets/styles/layouts/_datetime.scss b/assets/styles/layouts/_datetime.scss
new file mode 100644
index 000000000..dc8f20bdf
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss
index 1e8b162f9..5fd3eed2d 100644
--- a/assets/styles/styles-default.scss
+++ b/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",
diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss
index b46051152..800740cf1 100644
--- a/assets/styles/themes/_theme-dark.scss
+++ b/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;
diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss
index c19e91ab2..eb9e530f3 100644
--- a/assets/styles/themes/_theme-light.scss
+++ b/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;
diff --git a/content/example.md b/content/example.md
index 13786d29e..44800941f 100644
--- a/content/example.md
+++ b/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 >}}
\ No newline at end of file
+{{< /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" >}}