Dark mode updates (#72)

example/index.css

@@ -67,6 +67,15 @@ section > div:nth-of-type(2) {
   padding: 32px;
 }
 
+.st-theme-dark .img-container {
+  background: var(--st-gray-80);
+  color: var(--st-gray-10);
+}
+
+.st-theme-dark .img-container img {
+  filter: invert(1);
+}
+
 .theme-toggle {
   margin: 1rem;
 }

example/index.html

@@ -133,7 +133,7 @@
 
     <section class="st-card">
       <div class="st-typography-header">Typography</div>
-      <div>
+      <div style="gap: 4px; display: flex; flex-direction: column">
         <div class="st-typography-displayH1">Display H1</div>
         <div class="st-typography-displayH2">Display H2</div>
         <div class="st-typography-displayH3">Display H3</div>

package.json

@@ -2,7 +2,7 @@
   "name": "@nasa-jpl/stellar",
   "description": "A CSS implementation of the Stellar design system.",
   "type": "module",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "license": "MIT",
   "repository": {
     "type": "git",

scss/table.scss

@@ -13,6 +13,7 @@
     font-weight: var(--st-table-th-font-weight);
     line-height: var(--st-table-th-line-height);
     letter-spacing: var(--st-table-th-letter-spacing);
+    color: var(--st-table-th-color);
   }
 
   tr {
@@ -36,5 +37,6 @@
     font-weight: var(--st-table-td-font-weight);
     line-height: var(--st-table-td-line-height);
     letter-spacing: var(--st-table-td-letter-spacing);
+    color: var(--st-table-td-color);
   }
 }

scss/themes/dark.scss

@@ -6,11 +6,11 @@
 
   /* Typography. */
   --st-typography-header-color: var(--st-gray-10);
-  --st-typography-label-color: rgb(var(--st-gray-10-RGB) 0.65);
-  --st-typography-body-color: rgb(var(--st-gray-10-RGB) 0.9);
+  --st-typography-label-color: rgba(var(--st-gray-10-RGB), 0.65);
+  --st-typography-body-color: rgba(var(--st-gray-10-RGB), 0.9);
   --st-typography-medium-color: var(--st-gray-10);
   --st-typography-bold-color: var(--st-gray-10);
-  --st-typography-small-caps-color: rgb(var(--st-gray-10-RGB) 0.65);
+  --st-typography-small-caps-color: rgb(var(--st-gray-10-RGB), 0.65);
   --st-typography-display-h1-color: var(--st-gray-10);
   --st-typography-display-h2-color: var(--st-gray-10);
   --st-typography-display-h3-color: var(--st-gray-10);
@@ -19,19 +19,20 @@
   /* Button. */
   --st-button-primary-background-color: var(--st-primary-70);
   --st-button-primary-hover-background-color: var(--st-primary-60);
-  --st-button-secondary-color: rgb(var(--st-gray-10-RGB) 0.96);
+  --st-button-secondary-color: rgb(var(--st-gray-10-RGB), 0.96);
   --st-button-secondary-background-color: var(--st-gray-70);
   --st-button-secondary-border: none;
   --st-button-secondary-hover-background-color: var(--st-gray-60);
-  --st-button-tertiary-color: rgb(var(--st-gray-10-RGB) 0.96);
+  --st-button-tertiary-color: rgb(var(--st-gray-10-RGB), 0.96);
   --st-button-tertiary-hover-background-color: var(--st-gray-80);
-  --st-button-icon-color: rgb(var(--st-gray-10-RGB) 0.96);
+  --st-button-icon-color: rgb(var(--st-gray-10-RGB), 0.96);
   --st-button-icon-hover-background-color: var(--st-gray-80);
 
   /* Input. */
   --st-input-background-color: var(--st-gray-70);
+  --st-input-border: 1px solid var(--st-gray-60);
   --st-input-color: var(--st-gray-10);
-  --st-input-placeholder-color: var(--st-gray-40);
+  --st-input-placeholder-color: var(--st-gray-50);
 
   /* Select. */
   --st-select-background: var(--st-gray-70);
@@ -40,4 +41,17 @@
 
   /* Card (not represented in design system). */
   --st-card-border: 1px solid rgb(255 255 255 / 12.5%);
+
+  /* Table */
+  --st-table-th-background: var(--st-gray-90);
+  --st-table-th-box-shadow: inset 0px -1px 0px var(--st-gray-70);
+  --st-table-th-color: var(--st-gray-10);
+
+  --st-table-td-background: var(--st-gray-90);
+  --st-table-td-color: var(--st-gray-10);
+  --st-table-td-box-shadow: inset 0px -1px 0px var(--st-gray-70);
+
+  /* Badge */
+  --st-badge-background: var(--st-primary-40);
+
 }

scss/variables.scss

@@ -160,7 +160,7 @@
   --st-button-icon-min-width: var(--st-grid-unit3x);
 
   /* Input. */
-  --st-input-border: 1px solid var(--st-gray-15);
+  --st-input-border: 1px solid var(--st-gray-20);
   --st-input-background-color: var(--st-gray-10);
   --st-input-color: var(--st-gray-80);
   --st-input-error-background-color: rgb(255 119 96 / 20%);
@@ -198,7 +198,6 @@
   --st-table-th-font-weight: var(--st-typography-medium-font-weight);
   --st-table-th-font-size: var(--st-typography-medium-font-size);
   --st-table-th-line-height: var(--st-typography-medium-line-height);
-  --st-table-th-letter-spacing: var(--st-typography-medium-letter-spacing);
 
   --st-table-td-padding: var(--st-grid-unit);
   --st-table-td-background: var(--st-white);