Typography updates (#74)

nasa-jpl · Jun 1, 2023 · 294d8b4 · 294d8b4
1 parent 278f539
commit 294d8b4
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 30 deletions.
diff --git 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
@@ -10,33 +10,38 @@
   </head>
 
   <body>
-    <div>
-      <div class="st-typography-displayH1">Stellar Design System</div>
-      <div class="st-typography-displayBody">Base CSS Library</div>
+    <div class="header">
+      <div class="st-typography-displayH1 title">Stellar Design System</div>
+      <div class="st-typography-displayBody">
+        A CSS implementation of the Stellar design system for spacecraft operation tools.
+      </div>
     </div>
 
     <div>
-      <button onclick="switchTheme()" class="st-button secondary">Toggle Light/Dark</button>
+      <button onclick="switchTheme()" class="st-button secondary">Toggle Light/Dark Theme</button>
     </div>
-
     <section class="st-card">
       <div class="st-typography-header">Button</div>
-      <div>
+      <div class="button-row">
         <button class="st-button">Primary</button>
         <button class="st-button" disabled>Disabled</button>
         <button class="st-button secondary">Secondary</button>
         <button class="st-button secondary" disabled>Disabled</button>
         <button class="st-button tertiary">Tertiary</button>
         <button class="st-button tertiary" disabled>Disabled</button>
+        <button class="st-button icon"><img src="../icons/sol.svg" /></button>
+        <button class="st-button icon" disabled><img src="../icons/sol.svg" /></button>
       </div>
       <br />
-      <div>
+      <div class="button-row">
         <button class="st-button large">Primary</button>
         <button class="st-button large" disabled>Disabled</button>
         <button class="st-button large secondary">Secondary</button>
         <button class="st-button large secondary" disabled>Disabled</button>
         <button class="st-button large tertiary">Tertiary</button>
         <button class="st-button large tertiary" disabled>Disabled</button>
+        <button class="st-button large icon"><img src="../icons/sol.svg" /></button>
+        <button class="st-button large icon" disabled><img src="../icons/sol.svg" /></button>
       </div>
     </section>
 

diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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%;