Small Style Updates (#29)

* push updates

* remove class

Author: colegoldsmith

src/css/doc.css

@@ -329,8 +329,6 @@
 
 .doc table.grid-all > thead th,
 .doc table.grid-rows > thead th {
-  border-bottom-width: var(--ds-space-q);
-  border-color: var(--ds-primary-outlined-border);
   font-size: calc(13 / var(--rem-base) * 1rem);
   color: var(--ds-text-tertiary);
   letter-spacing: 0.65px;

src/css/docsearch.css

@@ -44,15 +44,17 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
   @include text-body;
 
   color: var(--ds-text-placeholder);
-  margin-right: var(--ds-space-3);
+  margin-right: var(--ds-space-5);
 }
 
 .DocSearch .DocSearch-Button {
+  min-width: var(--ds-space-5);
   transition: var(--ds-transition);
   height: var(--ds-space-5);
   border-radius: 6px;
   border: 1px solid var(--ds-neutral-outlined-border);
   margin: 0;
+  justify-content: center;
 
   &:hover {
     background-color: var(--ds-neutral-outlined-hover-bg);
@@ -68,6 +70,19 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
   text-decoration: underline;
 }
 
+.DocSearch .DocSearch-Search-Icon {
+  display: none;
+}
+
+.DocSearch .DocSearch-Button-Container::before,
+.DocSearch .DocSearch-MagnifierLabel::before {
+  font-family: "Material Icons Outlined", sans-serif;
+  font-weight: 400;
+  font-size: calc(18 / var(--rem-base) * 1rem);
+  content: "\e8b6";
+  color: var(--ds-text-primary);
+}
+
 @media screen and (max-width: 768px) {
   .DocSearch.DocSearch-Container {
     position: fixed;
@@ -82,7 +97,7 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
   --docsearch-icon-stroke-width: 1.4;
   --docsearch-highlight-color: var(--ds-text-primary);
   --docsearch-muted-color: var(--ds-text-placeholder);
-  --docsearch-container-background: rgba(0, 0, 0, 0.5);
+  --docsearch-container-background: var(--ds-background-backdrop);
   --docsearch-logo-color: var(--ds-text-primary);
 
   /* modal */
@@ -118,7 +133,7 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
 
 html[data-theme='dark'] .DocSearch {
   --docsearch-text-color: var(--ds-text-primary);
-  --docsearch-container-background: rgba(20, 20, 20, 0.7);
+  --docsearch-container-background: var(--ds-background-backdrop);
   --docsearch-modal-background: var(--ds-background-body);
   --docsearch-modal-shadow: none;
   --docsearch-searchbox-background: none;

src/css/ds-dark.css

@@ -7,6 +7,7 @@
   --ds-background-level3: var(--ds-neutral-600);
   --ds-background-surface: var(--ds-neutral-900);
   --ds-background-tooltip: var(--ds-neutral-0);
+  --ds-background-backdrop: rgba(10, 10, 10, 0.6);
   --ds-cyan-main: var(--ds-cyan-400);
   --ds-failure-main: var(--ds-failure-400);
   --ds-failure-outlined-active-bg: var(--ds-failure-500);

src/css/ds-light.css

@@ -2,11 +2,12 @@
   --ds-divider: var(--ds-neutral-200);
   --ds-focus-visible: var(--ds-neutral-900);
   --ds-background-body: var(--ds-common-white);
-  --ds-background-level1: var(--ds-neutral-100);
-  --ds-background-level2: var(--ds-neutral-200);
-  --ds-background-level3: var(--ds-neutral-300);
+  --ds-background-level1: var(--ds-neutral-0);
+  --ds-background-level2: var(--ds-neutral-50);
+  --ds-background-level3: var(--ds-neutral-100);
   --ds-background-surface: var(--ds-common-white);
   --ds-background-tooltip: var(--ds-neutral-900);
+  --ds-background-backdrop: rgba(0, 0, 0, 0.6);
   --ds-cyan-main: var(--ds-cyan-600);
   --ds-failure-main: var(--ds-failure-500);
   --ds-failure-outlined-active-bg: var(--ds-failure-100);

src/css/ds-vars.css

@@ -6,6 +6,7 @@
   --ds-cyan-200: #99d9ff;
   --ds-cyan-300: #7cf;
   --ds-cyan-400: #33b1ff;
+  --ds-cyan-50: #c9ecff;
   --ds-cyan-500: #1a92e1;
   --ds-cyan-600: #0072c3;
   --ds-cyan-700: #005698;
@@ -16,6 +17,7 @@
   --ds-failure-200: #f6b2ba;
   --ds-failure-300: #ec7985;
   --ds-failure-400: #e34853;
+  --ds-failure-50: #fddde1;
   --ds-failure-500: #d91620;
   --ds-failure-600: #b00f16;
   --ds-failure-700: #86070b;
@@ -26,6 +28,7 @@
   --ds-magenta-200: #ffc0dc;
   --ds-magenta-300: #ffaacf;
   --ds-magenta-400: #ff7eb6;
+  --ds-magenta-50: #ffd7e9;
   --ds-magenta-500: #e85293;
   --ds-magenta-600: #d02670;
   --ds-magenta-700: #a21854;
@@ -36,6 +39,7 @@
   --ds-neutral-200: #ced0d2;
   --ds-neutral-300: #a6aaae;
   --ds-neutral-400: #898d91;
+  --ds-neutral-50: #edeeee;
   --ds-neutral-500: #6b6f73;
   --ds-neutral-600: #5a5d60;
   --ds-neutral-700: #494a4d;
@@ -46,6 +50,7 @@
   --ds-orange-200: #ffc49a;
   --ds-orange-300: #ffae75;
   --ds-orange-400: #ff832b;
+  --ds-orange-50: #ffe0cb;
   --ds-orange-500: #dd6916;
   --ds-orange-600: #ba4e00;
   --ds-orange-700: #8c3c00;
@@ -56,6 +61,7 @@
   --ds-primary-200: #d7a7df;
   --ds-primary-300: #ba68c8;
   --ds-primary-400: #9946b9;
+  --ds-primary-50: #ecd6f0;
   --ds-primary-500: #7724aa;
   --ds-primary-600: #611c9b;
   --ds-primary-700: #4a148c;
@@ -66,6 +72,7 @@
   --ds-success-200: #8cd092;
   --ds-success-300: #6bc074;
   --ds-success-400: #42a056;
+  --ds-success-50: #ccf0ce;
   --ds-success-500: #198038;
   --ds-success-600: #116d36;
   --ds-success-700: #095933;
@@ -76,6 +83,7 @@
   --ds-teal-200: #9ef0f0;
   --ds-teal-300: #53d7d5;
   --ds-teal-400: #08bdba;
+  --ds-teal-50: #cbf7f7;
   --ds-teal-500: #049d9a;
   --ds-teal-600: #007d79;
   --ds-teal-700: #005f5f;
@@ -86,6 +94,7 @@
   --ds-warning-200: #f5c783;
   --ds-warning-300: #ea9f26;
   --ds-warning-400: #cc7b1d;
+  --ds-warning-50: #fde5c9;
   --ds-warning-500: #ad5713;
   --ds-warning-600: #8f4a0a;
   --ds-warning-700: #703c00;

src/css/header.css

@@ -50,7 +50,7 @@ body {
   font-family: "Material Icons Outlined", sans-serif;
   font-weight: 400;
   font-size: calc(20 / var(--rem-base) * 1rem);
-  content: "\e5d2";
+  content: "\e5d4";
 }
 
 .navbar-burger.is-active::before {

src/css/nav.css

@@ -68,7 +68,7 @@ html.is-clipped--nav {
 .nav-panel-menu {
   overflow-y: auto;
   overscroll-behavior: none;
-  height: var(--nav-panel-menu-height);
+  height: 100%;
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {
@@ -79,6 +79,8 @@ html.is-clipped--nav {
   min-height: 100%;
   line-height: var(--nav-line-height);
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .nav-menu > .nav-list {
@@ -170,6 +172,7 @@ html.is-clipped--nav {
 .secondary-nav-list {
   margin: 0;
   padding: var(--ds-space-2) 0;
+  margin-top: auto;
 }
 
 .secondary-nav-list .nav-item {

src/css/toolbar.css

@@ -9,6 +9,7 @@
   top: var(--navbar-height);
   z-index: var(--z-index-toolbar);
   padding-left: var(--ds-space-3);
+  padding-bottom: var(--ds-space-1);
 }
 
 .toolbar ul li:last-of-type {

src/css/tutorial-info.css

@@ -1,5 +1,6 @@
 .tutorial-info {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--ds-space-2h);
   margin-bottom: var(--ds-space-3);

src/css/vars.css

@@ -107,13 +107,12 @@
   --site-padding: var(--ds-space-4);
   --site-padding--mobile: var(--ds-space-2);
   --navbar-height: calc(100 / var(--rem-base) * 1rem);
-  --toolbar-height: calc(40 / var(--rem-base) * 1rem);
+  --toolbar-height: calc(48 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
   --body-top: var(--navbar-height);
   --body-min-height: calc(100vh - var(--body-top));
   --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
   --nav-height--desktop: var(--body-min-height);
-  --nav-panel-menu-height: calc(100% - var(--drawer-height));
   --nav-panel-explore-height: calc(50% + var(--drawer-height));
   --nav-width: calc(300 / var(--rem-base) * 1rem);
   --logo-width: calc(300 / var(--rem-base) * 1rem);
@@ -131,3 +130,9 @@
   /* transitions */
   --ds-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, outline-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
+
+@media screen and (max-width: 1023.5px) {
+  :root {
+    --navbar-height: calc(74 / var(--rem-base) * 1rem);
+  }
+}