From 278f539e62f9eb348e762b5cc9ce21d24e42e22f Mon Sep 17 00:00:00 2001 From: Aaron Plave Date: Tue, 16 May 2023 09:06:38 -0700 Subject: [PATCH] Dark mode updates (#72) --- example/index.css | 9 +++++++++ example/index.html | 2 +- package-lock.json | 4 ++-- package.json | 2 +- scss/table.scss | 2 ++ scss/themes/dark.scss | 28 +++++++++++++++++++++------- scss/variables.scss | 3 +-- 7 files changed, 37 insertions(+), 13 deletions(-) diff --git a/example/index.css b/example/index.css index 454338d..2845214 100644 --- a/example/index.css +++ b/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; } diff --git a/example/index.html b/example/index.html index 98943d0..a89feed 100644 --- a/example/index.html +++ b/example/index.html @@ -133,7 +133,7 @@
Typography
-
+
Display H1
Display H2
Display H3
diff --git a/package-lock.json b/package-lock.json index a7568f5..e3f9795 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nasa-jpl/stellar", - "version": "1.1.6", + "version": "1.1.7", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@nasa-jpl/stellar", - "version": "1.1.6", + "version": "1.1.7", "license": "MIT", "devDependencies": { "sass": "^1.60.0", diff --git a/package.json b/package.json index bd84c5a..0aaac6e 100644 --- a/package.json +++ b/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", diff --git a/scss/table.scss b/scss/table.scss index 43f68bf..906e7b2 100644 --- a/scss/table.scss +++ b/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); } } diff --git a/scss/themes/dark.scss b/scss/themes/dark.scss index cc01ffb..d2b4e1d 100644 --- a/scss/themes/dark.scss +++ b/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); + } diff --git a/scss/variables.scss b/scss/variables.scss index cdcb93a..ee8dc00 100644 --- a/scss/variables.scss +++ b/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);