diff --git a/example/index.css b/example/index.css index 2845214..deec237 100644 --- a/example/index.css +++ b/example/index.css @@ -1,16 +1,33 @@ body { display: flex; flex-direction: column; - font-family: var(--st-typography-font-family); - font-size: 16px; gap: var(--st-grid-unit2x); - padding: var(--st-grid-unit2x); + margin: auto; + max-width: 1000px; + padding: 56px; } .st-theme-dark { background: var(--st-gray-100); } +.header { + display: flex; + flex-direction: column; + gap: var(--st-grid-unit3x); + margin-bottom: 24px; +} + +.title { + font-size: 60px; +} + +.button-row { + display: flex; + flex-direction: row; + gap: 4px; +} + section { padding: 1rem; } @@ -39,6 +56,7 @@ section > div:nth-of-type(2) { .color-square .color { border: 1px solid rgb(255 255 255 / 10%); + border-radius: 4px; height: 48px; width: 48px; } diff --git a/example/index.html b/example/index.html index a89feed..b706bc2 100644 --- a/example/index.html +++ b/example/index.html @@ -10,33 +10,38 @@ -
-
Stellar Design System
-
Base CSS Library
+
+
Stellar Design System
+
+ A CSS implementation of the Stellar design system for spacecraft operation tools. +
- +
-
Button
-
+
+ +

-
+
+ +
diff --git a/package-lock.json b/package-lock.json index e3f9795..9511267 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nasa-jpl/stellar", - "version": "1.1.7", + "version": "1.1.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@nasa-jpl/stellar", - "version": "1.1.7", + "version": "1.1.8", "license": "MIT", "devDependencies": { "sass": "^1.60.0", diff --git a/package.json b/package.json index 0aaac6e..58a19f5 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.7", + "version": "1.1.8", "license": "MIT", "repository": { "type": "git", diff --git a/scss/button.scss b/scss/button.scss index a6b1014..ad71a4c 100644 --- a/scss/button.scss +++ b/scss/button.scss @@ -68,7 +68,9 @@ min-width: var(--st-button-icon-min-width); &:hover { - background-color: var(--st-button-icon-hover-background-color); + &:not([disabled]) { + background-color: var(--st-button-icon-hover-background-color); + } } } } diff --git a/scss/typography.scss b/scss/typography.scss index e28ca2d..880dda1 100644 --- a/scss/typography.scss +++ b/scss/typography.scss @@ -1,3 +1,8 @@ +html, body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + .st-typography-header { font-family: var(--st-typography-header-font-family); color: var(--st-typography-header-color); @@ -53,7 +58,7 @@ letter-spacing: var(--st-typography-small-caps-letter-spacing); } -/* M20 GDS Display Font Definitions */ +/* Display Font Definitions */ .st-typography-displayH1 { font-family: var(--st-typography-display-h1-font-family); color: var(--st-typography-display-h1-color); diff --git a/scss/variables.scss b/scss/variables.scss index ee8dc00..4cf5594 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -70,38 +70,38 @@ --st-typography-header-font-family: var(--st-typography-font-family); --st-typography-header-color: var(--st-gray-100); - --st-typography-header-font-weight: 700; + --st-typography-header-font-weight: 500; --st-typography-header-font-size: 16px; --st-typography-header-line-height: 24px; - --st-typography-header-letter-spacing: 0.03em; + --st-typography-header-letter-spacing: -0.00011em; --st-typography-label-font-family: var(--st-typography-font-family); --st-typography-label-color: rgba(var(--st-gray-100-RGB), 0.65); - --st-typography-label-font-weight: 400; + --st-typography-label-font-weight: 500; --st-typography-label-font-size: 12px; --st-typography-label-line-height: 16px; - --st-typography-label-letter-spacing: 0.04em; + --st-typography-label-letter-spacing: 0.01em; --st-typography-body-font-family: var(--st-typography-font-family); --st-typography-body-color: rgba(var(--st-gray-100-RGB), 0.9); --st-typography-body-font-weight: 400; --st-typography-body-font-size: 12px; --st-typography-body-line-height: 16px; - --st-typography-body-letter-spacing: 0.04em; + --st-typography-body-letter-spacing: 0px; --st-typography-medium-font-family: var(--st-typography-font-family); --st-typography-medium-color: var(--st-gray-100); --st-typography-medium-font-weight: 500; --st-typography-medium-font-size: 12px; --st-typography-medium-line-height: 16px; - --st-typography-medium-letter-spacing: 0.025em; + --st-typography-medium-letter-spacing: 0px; --st-typography-bold-font-family: var(--st-typography-font-family); --st-typography-bold-color: var(--st-gray-100); --st-typography-bold-font-weight: 700; --st-typography-bold-font-size: 12px; - --st-typography-bold-line-height: 16px; - --st-typography-bold-letter-spacing: 0.05em; + --st-typography-bold-line-height: 15px; + --st-typography-bold-letter-spacing: 0.015em; --st-typography-small-caps-font-family: var(--st-typography-font-family); --st-typography-small-caps-color: rgba(var(--st-gray-100-RGB), 0.65); @@ -114,29 +114,29 @@ --st-typography-display-h1-color: var(--st-gray-100); --st-typography-display-h1-font-weight: 700; --st-typography-display-h1-font-size: 40px; - --st-typography-display-h1-line-height: 48px; - --st-typography-display-h1-letter-spacing: -0.02em; + --st-typography-display-h1-line-height: 56px; + --st-typography-display-h1-letter-spacing: -0.022em; --st-typography-display-h2-font-family: var(--st-typography-font-family); --st-typography-display-h2-color: var(--st-gray-100); --st-typography-display-h2-font-weight: 700; --st-typography-display-h2-font-size: 32px; - --st-typography-display-h2-line-height: 40px; - --st-typography-display-h2-letter-spacing: -0.005em; + --st-typography-display-h2-line-height: 42px; + --st-typography-display-h2-letter-spacing: -0.021em; --st-typography-display-h3-font-family: var(--st-typography-font-family); --st-typography-display-h3-color: var(--st-gray-100); --st-typography-display-h3-font-weight: 600; --st-typography-display-h3-font-size: 24px; --st-typography-display-h3-line-height: 32px; - --st-typography-display-h3-letter-spacing: 0; + --st-typography-display-h3-letter-spacing: -0.019em; --st-typography-display-body-font-family: var(--st-typography-font-family); --st-typography-display-body-color: var(--st-gray-100); --st-typography-display-body-font-weight: 400; --st-typography-display-body-font-size: 16px; - --st-typography-display-body-line-height: 24px; - --st-typography-display-body-letter-spacing: 0.01em; + --st-typography-display-body-line-height: 22px; + --st-typography-display-body-letter-spacing: -0.011em; /* Button. */ --st-button-disabled-opacity: 50%;