docs(site): minor layout updates to site

adobe · Jun 29, 2023 · 7481524 · 7481524
1 parent 6dae36c
commit 7481524
Show file tree

Hide file tree

Showing 5 changed files with 289 additions and 23 deletions.
diff --git a/docs/site/package.json b/docs/site/package.json
@@ -9,10 +9,9 @@
   },
   "dependencies": {
     "@spectrum-css/page": "^5.0.31",
-    "@spectrum-css/sidenav": "^3.0.50",
+    "@spectrum-css/table": "^4.0.58",
     "@spectrum-css/tokens": "^10.2.0",
-    "@spectrum-css/typography": "^5.0.24",
-    "@spectrum-css/vars": "^9.0.8",
+    "@spectrum-css/typography": "^5.0.25",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
     "glob-promise": "^6.0.2",
@@ -25,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/adobe/spectrum-tokens/issues"
   },
-  "homepage": "https://github.com/adobe/spectrum-tokens/tree/main/docs/visualizer#readme",
+  "homepage": "https://github.com/adobe/spectrum-tokens/tree/main/docs/site#readme",
   "keywords": [],
   "author": "Garth Braithwaite <[email protected]> (http://garthdb.com/)"
 }
diff --git a/docs/site/pages/_app.js b/docs/site/pages/_app.js
@@ -1,13 +1,11 @@
 import "@spectrum-css/tokens/dist/css/global-vars.css";
+import "@spectrum-css/tokens/dist/css/spectrum/custom-vars.css";
 import "@spectrum-css/tokens/dist/css/medium-vars.css";
 import "@spectrum-css/tokens/dist/css/light-vars.css";
 import "@spectrum-css/page/dist/index-vars.css";
-
-import "@spectrum-css/vars/dist/spectrum-global.css";
-import "@spectrum-css/vars/dist/spectrum-medium.css";
-import "@spectrum-css/vars/dist/spectrum-light.css";
+import "@spectrum-css/table/dist/index-vars.css";
 import "@spectrum-css/typography/dist/index-vars.css";
-import "@spectrum-css/sidenav/dist/index-vars.css";
+import "../styles/sidenav.css";
 
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />;

diff --git a/docs/site/pages/_document.js b/docs/site/pages/_document.js
@@ -1,5 +1,4 @@
 import { Html, Head, Main, NextScript } from "next/document";
-import Script from "next/script";
 
 export default function Document() {
   return (
@@ -9,7 +8,9 @@ export default function Document() {
       className='spectrum spectrum--medium spectrum--light'
     >
       <Head>
-        <Script src='/typekit.js' />
+        <link rel="preconnect" href="https://use.typekit.net" />
+        <link rel="dns-prefetch" href="https://use.typekit.net" />
+        <link rel="stylesheet" href="https://use.typekit.net/evk7lzt.css" />
       </Head>
       <body>
         <Main />

diff --git a/docs/site/styles/sidenav.css b/docs/site/styles/sidenav.css
@@ -0,0 +1,261 @@
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+
+
+.spectrum--medium {
+  --spectrum-global-dimension-size-50: 4px;
+  --spectrum-global-dimension-size-65: 5px;
+  --spectrum-global-dimension-size-75: 6px;
+  --spectrum-global-dimension-size-150: 12px;
+  --spectrum-global-dimension-size-200: 16px;
+  --spectrum-global-dimension-size-400: 32px;
+  --spectrum-global-dimension-font-size-100: 14px;
+}
+.spectrum--large {
+  --spectrum-global-dimension-size-50: 5px;
+  --spectrum-global-dimension-size-65: 6px;
+  --spectrum-global-dimension-size-75: 8px;
+  --spectrum-global-dimension-size-150: 15px;
+  --spectrum-global-dimension-size-200: 20px;
+  --spectrum-global-dimension-size-400: 40px;
+  --spectrum-global-dimension-font-size-100: 17px;
+}
+
+.spectrum {
+  --spectrum-alias-text-color-hover: var(--spectrum-gray-900);
+  --spectrum-alias-highlight-hover: rgba(0,0,0,0.06);
+  --spectrum-alias-background-color-transparent: transparent;
+  --spectrum-alias-text-color-disabled: var(--spectrum-gray--500);
+  --spectrum-alias-text-color: var(--spectrum-gray-800);
+  --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-75);
+  --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400);
+  --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100);
+  --spectrum-global-font-weight-bold: 700;
+  --spectrum-global-font-weight-regular: 400;
+  --spectrum-global-dimension-static-size-25: 2px;
+  --spectrum-global-font-letter-spacing-medium: 0.06em;
+}
+
+.spectrum-SideNav{
+  --spectrum-sidenav-item-padding-y:var(--spectrum-global-dimension-size-65);
+}
+
+.spectrum-SideNav{
+  list-style-type:none;
+  margin:0;
+  padding:0;
+}
+
+.spectrum-SideNav-item{
+  list-style-type:none;
+
+  margin-top:var(--spectrum-sidenav-item-gap, var(--spectrum-global-dimension-size-50));
+
+  margin-bottom:var(--spectrum-sidenav-item-gap, var(--spectrum-global-dimension-size-50));
+  margin-left:0;
+  margin-right:0;
+}
+
+.spectrum-SideNav-itemLink{
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:start;
+  box-sizing:border-box;
+
+  width:100%;
+  min-height:var(--spectrum-sidenav-item-height, var(--spectrum-alias-single-line-height));
+
+  padding-left:var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150));
+
+  padding-right:var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150));
+  padding-top:var(--spectrum-sidenav-item-padding-y);
+  padding-bottom:var(--spectrum-sidenav-item-padding-y);
+
+  border-radius:var(--spectrum-sidenav-item-border-radius, var(--spectrum-alias-border-radius-regular));
+
+  font-size:var(--spectrum-sidenav-item-text-size, var(--spectrum-alias-font-size-default));
+  font-weight:var(--spectrum-sidenav-item-text-font-weight, var(--spectrum-global-font-weight-regular));
+  font-style:normal;
+  text-decoration:none;
+
+  word-break:break-word;
+  -webkit-hyphens:auto;
+          hyphens:auto;
+
+  cursor:pointer;
+
+  transition:background-color var(--spectrum-global-animation-duration-100, 130ms) ease-out,
+    color var(--spectrum-global-animation-duration-100, 130ms) ease-out;
+}
+
+.spectrum-SideNav-itemLink:focus{
+    outline:none;
+  }
+
+.spectrum-SideNav-itemLink:before{
+    content:'';
+    position:absolute;
+    top:0;
+    right:0;
+    bottom:0;
+    left:0;
+    pointer-events:none;
+
+    border:var(--spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25)) solid transparent;
+    border-radius:var(--spectrum-sidenav-item-border-radius, var(--spectrum-alias-border-radius-regular));
+
+    transition:border var(--spectrum-global-animation-duration-100, 130ms) ease-out;
+  }
+
+[dir="ltr"] .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{
+    margin-right:var(--spectrum-sidenav-icon-gap, var(--spectrum-global-dimension-size-100));
+}
+
+[dir="rtl"] .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{
+    margin-left:var(--spectrum-sidenav-icon-gap, var(--spectrum-global-dimension-size-100));
+}
+
+.spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{
+    flex-shrink:0;
+  }
+
+[dir="ltr"] .spectrum-SideNav-heading{
+  margin-right:0;
+}
+
+[dir="rtl"] .spectrum-SideNav-heading{
+  margin-left:0;
+}
+
+[dir="ltr"] .spectrum-SideNav-heading{
+  margin-left:0;
+}
+
+[dir="rtl"] .spectrum-SideNav-heading{
+  margin-right:0;
+}
+
+.spectrum-SideNav-heading{
+  height:var(--spectrum-sidenav-heading-height, var(--spectrum-alias-single-line-height));
+  line-height:var(--spectrum-sidenav-heading-height, var(--spectrum-alias-single-line-height));
+
+  margin-top:var(--spectrum-sidenav-heading-gap-top, var(--spectrum-global-dimension-size-200));
+  margin-bottom:var(--spectrum-sidenav-heading-gap-bottom, var(--spectrum-global-dimension-size-50));
+  padding-top:0;
+  padding-bottom:0;
+  padding-left:var(--spectrum-sidenav-heading-padding-x, var(--spectrum-global-dimension-size-150));
+  padding-right:var(--spectrum-sidenav-heading-padding-x, var(--spectrum-global-dimension-size-150));
+
+  border-radius:var(--spectrum-sidenav-heading-border-radius, var(--spectrum-alias-border-radius-regular));
+
+  font-size:var(--spectrum-sidenav-heading-text-size, var(--spectrum-global-dimension-font-size-50));
+  font-weight:var(--spectrum-sidenav-heading-text-font-weight, var(--spectrum-global-font-weight-medium));
+  font-style:normal;
+  letter-spacing:var(--spectrum-sidenav-heading-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium));
+
+  text-transform:uppercase;
+}
+
+.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink{
+    font-weight:var(--spectrum-sidenav-multilevel-main-item-font-weight, var(--spectrum-global-font-weight-bold));
+  }
+
+.spectrum-SideNav--multiLevel .spectrum-SideNav{
+    margin:0;
+    padding:0;
+  }
+
+[dir="ltr"] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink{
+
+      padding-left:calc(var(--spectrum-sidenav-multilevel-item-margin-left, var(--spectrum-global-dimension-size-150)) + var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150)));
+}
+
+[dir="rtl"] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink{
+
+      padding-right:calc(var(--spectrum-sidenav-multilevel-item-margin-left, var(--spectrum-global-dimension-size-150)) + var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150)));
+}
+
+.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink{
+      font-weight:var(--spectrum-sidenav-item-text-font-weight, var(--spectrum-global-font-weight-regular));
+    }
+
+[dir="ltr"] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink{
+        padding-left:calc(var(--spectrum-sidenav-multilevel-item-margin-left, var(--spectrum-global-dimension-size-150)) + var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150)));
+}
+
+[dir="rtl"] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink{
+        padding-right:calc(var(--spectrum-sidenav-multilevel-item-margin-left, var(--spectrum-global-dimension-size-150)) + var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150)));
+}
+
+.spectrum-SideNav-item.is-selected > .spectrum-SideNav-itemLink{
+      color:var(--spectrum-sidenav-item-text-color-selected, var(--spectrum-alias-text-color-hover));
+      background-color:var(--spectrum-sidenav-item-background-color-selected, var(--spectrum-alias-highlight-hover));
+    }
+
+.spectrum-SideNav-item .is-active > .spectrum-SideNav-itemLink{
+      background-color:var(--spectrum-sidenav-item-background-color-down, var(--spectrum-alias-highlight-hover));
+    }
+
+.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink{
+      background-color:var(--spectrum-sidenav-item-background-color-disabled, var(--spectrum-alias-background-color-transparent));
+      color:var(--spectrum-sidenav-item-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+
+      cursor:default;
+      pointer-events:none;
+    }
+
+.spectrum-SideNav-itemLink{
+  background-color:var(--spectrum-sidenav-item-background-color, var(--spectrum-alias-background-color-transparent));
+  color:var(--spectrum-sidenav-item-text-color, var(--spectrum-alias-text-color));
+}
+
+.spectrum-SideNav-itemLink:hover{
+    background-color:var(--spectrum-sidenav-item-background-color-hover, var(--spectrum-alias-highlight-hover));
+    color:var(--spectrum-sidenav-item-text-color-hover, var(--spectrum-alias-text-color-hover));
+  }
+
+.spectrum-SideNav-itemLink:active{
+    background-color:var(--spectrum-sidenav-item-background-color-down, var(--spectrum-alias-highlight-hover));
+  }
+
+.spectrum-SideNav-itemLink.focus-ring{
+    background-color:var(--spectrum-sidenav-item-background-color-key-focus, var(--spectrum-alias-highlight-hover));
+    color:var(--spectrum-sidenav-item-text-color-key-focus, var(--spectrum-alias-text-color-hover));
+  }
+
+.spectrum-SideNav-itemLink.focus-ring::before{
+      border-color:var(--spectrum-sidenav-item-border-color-key-focus, var(--spectrum-alias-border-color-key-focus));
+    }
+
+.spectrum-SideNav-heading{
+  color:var(--spectrum-sidenav-heading-text-color, var(--spectrum-global-color-gray-700));
+}
+
+@media (forced-colors: active){
+  .spectrum-SideNav-item{
+    forced-color-adjust:none;
+    --spectrum-sidenav-item-text-color-selected:HighlightText;
+    --spectrum-sidenav-item-background-color-selected:Highlight;
+    --spectrum-sidenav-item-background-color-disabled:ButtonFace;
+    --spectrum-sidenav-item-text-color-disabled:GrayText;
+    --spectrum-sidenav-item-background-color:ButtonFace;
+    --spectrum-sidenav-item-text-color:ButtonText;
+    --spectrum-sidenav-item-background-color-hover:ButtonFace;
+    --spectrum-sidenav-item-text-color-hover:ButtonText;
+    --spectrum-sidenav-item-background-color-down:ButtonFace;
+    --spectrum-sidenav-item-background-color-key-focus:ButtonFace;
+    --spectrum-sidenav-item-text-color-key-focus:ButtonText;
+    --spectrum-sidenav-item-border-color-key-focus:ButtonText;
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml