@xplortech/apollo-core 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 
 ---
+
+## [0.5.2] - 2022-02-08
+
+## Added
+
+- Navigation Items now also style buttons. ([#80](https://github.com/xplor/apollo/pull/80))
+
+## Changed
+
+- Update css for some application shell related components. ([#80](https://github.com/xplor/apollo/pull/80))
+
+## Fixed
+
+- Secondary navigation items had pointer-events: none preventing them from working. ([#80](https://github.com/xplor/apollo/pull/80))
+
+## Removed
+
+- with-subnav prop from Application Shell. ([#80](https://github.com/xplor/apollo/pull/80))
+
+## [0.5.1] - 2022-02-02
+
+### Changed
+
+- Color variables in Main Nav, Utility Bar, Content Area and Application Shell to allow for colors to be overwritten ([#79](https://github.com/xplor/apollo/pull/79))
+- Add role="button" to xpl-button ([#79](https://github.com/xplor/apollo/pull/79))
+
 ## [0.5.0] - 2022-01-31
 
 ### Added

package/build/style.css

@@ -1394,23 +1394,16 @@ textarea[class^="xpl-"] {
 
 .xpl-application-shell {
   grid-template-areas:
-    "nav utility"
-    "nav content";
-  grid-template-columns: -webkit-min-content 1fr;
-  grid-template-columns: min-content 1fr;
+    "nav utility utility"
+    "nav subnav content";
+  grid-template-columns: -webkit-min-content -webkit-min-content 1fr;
+  grid-template-columns: min-content min-content 1fr;
   grid-template-rows: -webkit-min-content 1fr;
   grid-template-rows: min-content 1fr;
   max-height: 100vh;
+  background-color: var(--xpl-color-navigation-lm);
 }
 
-.xpl-application-shell--with_subnav {
-    grid-template-areas:
-      "nav utility utility"
-      "nav subnav content";
-    grid-template-columns: -webkit-min-content -webkit-min-content 1fr;
-    grid-template-columns: min-content min-content 1fr;
-  }
-
 .xpl-application-shell__nav {
     grid-area: nav;
     height: 100vh;
@@ -1463,32 +1456,14 @@ textarea[class^="xpl-"] {
 
 .xpl-application-shell__subnav {
     grid-area: subnav;
+    background-color: var(--xpl-color-foreground-lm);
+    border-color: var(--xpl-color-gray-200);
   }
 
 .xpl-application-shell__subnav nav {
       border-right: none;
     }
 
-.xpl-application-shell__subnav {
-    --tw-bg-opacity: 1;
-    background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
-}
-
-.dark .xpl-application-shell__subnav {
-    --tw-bg-opacity: 1;
-    background-color: rgba(32, 30, 41, var(--tw-bg-opacity))
-  }
-
-.xpl-application-shell__subnav {
-    --tw-border-opacity: 1;
-    border-color: rgba(238, 239, 243, var(--tw-border-opacity))
-  }
-
-.dark .xpl-application-shell__subnav {
-    --tw-border-opacity: 1;
-    border-color: rgba(106, 109, 125, var(--tw-border-opacity))
-  }
-
 @media (min-width: 1024px) {
     .xpl-application-shell__subnav {
       border-right-width: 1px
@@ -1503,25 +1478,23 @@ textarea[class^="xpl-"] {
 
 .xpl-application-shell__content {
     grid-area: content;
-    --tw-bg-opacity: 1;
-    background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
-  }
-
-.dark .xpl-application-shell__content {
-    --tw-bg-opacity: 1;
-    background-color: rgba(24, 22, 31, var(--tw-bg-opacity))
-  }
-
-.xpl-application-shell__content {
-    overflow-y: auto
+    background-color: var(--xpl-color-background-lm);
+    overflow-y: auto;
   }
 
 .xpl-application-shell {
-  --tw-bg-opacity: 1;
-  background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
   display: grid
 }
 
+.dark .xpl-application-shell__subnav {
+  background-color: var(--xpl-color-background-2-dm);
+  border-color: var(--xpl-color-gray-600);
+}
+
+.dark .xpl-application-shell__content {
+  background-color: var(--xpl-color-background-dm);
+}
+
 @media (max-width: 1023px) {
   .xpl-application-shell {
     grid-template-areas:
@@ -2916,6 +2889,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 .xpl-content-area-wrapper {
   height: 100%;
   min-width: 0;
+  background-color: var(--xpl-color-background-lm);
 }
 
 .xpl-content-area-wrapper__wide .xpl-content-area {
@@ -2983,15 +2957,9 @@ button.xpl-button--xs.xpl-button--icon-only {
     }
   }
 
-.xpl-content-area-wrapper {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 249, 250, var(--tw-bg-opacity))
-}
-
 .dark .xpl-content-area-wrapper {
-  background-color: var(--xpl-color-gray-1200);
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  background-color: var(--xpl-color-background-dm);
+  color: var(--xpl-color-text-primary-dm);
 }
 
 .dark .xpl-divider {
@@ -4142,7 +4110,8 @@ a.xpl-list-item:focus {
   width: 240px;
 }
 
-.xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type a {
+.xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type a,
+      .xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type button {
         margin-bottom: 74px;
       }
 
@@ -4153,16 +4122,16 @@ a.xpl-list-item:focus {
 .xpl-main-nav nav {
     grid-template-rows: 74px 1fr -webkit-min-content;
     grid-template-rows: 74px 1fr min-content;
+    background-color: var(--xpl-color-navigation-dm);
     display: grid;
     height: 100%;
     overflow-y: auto;
-    --tw-bg-opacity: 1;
-    background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
   }
 
-.xpl-main-nav .xpl-nav-item > a {
-    width: 240px;
-  }
+.xpl-main-nav .xpl-nav-item a,
+    .xpl-main-nav .xpl-nav-item button {
+      width: 240px;
+    }
 
 /* Brand Section */
 
@@ -4172,14 +4141,19 @@ a.xpl-list-item:focus {
   }
 
 .xpl-main-nav header p {
+      color: var(--xpl-color-text-primary-dm);
       display: grid;
       align-content: center;
       font-weight: 600;
       font-size: 1rem;
       line-height: 1.5rem;
       margin-left: 1rem;
-      --tw-text-opacity: 1;
-      color: rgba(255, 255, 255, var(--tw-text-opacity));
+    }
+
+.xpl-main-nav header img {
+      height: 42px;
+      width: 42px;
+      border-radius: 0.5rem;
     }
 
 .xpl-main-nav header {
@@ -4189,6 +4163,10 @@ a.xpl-list-item:focus {
     padding: 1rem
 }
 
+.xpl-main-nav footer {
+    background-color: var(--xpl-color-background-2-dm);
+  }
+
 .xpl-main-nav footer .xpl-avatar {
       margin-right: 1rem;
     }
@@ -4199,80 +4177,78 @@ a.xpl-list-item:focus {
       }
 
 .xpl-main-nav footer div p:first-of-type {
-        --tw-text-opacity: 1;
-        color: rgba(255, 255, 255, var(--tw-text-opacity));
+        color: var(--xpl-color-text-primary-dm);
       }
 
 .xpl-main-nav footer div {
       overflow-x: auto
 }
 
-.xpl-main-nav footer .xpl-nav-item > a svg {
-        fill: currentColor;
-        --tw-text-opacity: 1;
-        color: rgba(153, 155, 168, var(--tw-text-opacity));
-      }
+.xpl-main-nav footer .xpl-nav-item a svg, .xpl-main-nav footer .xpl-nav-item button svg {
+          color: var(--xpl-color-text-secondary-dm);
+          fill: currentColor;
+        }
 
 .xpl-main-nav footer {
-    --tw-bg-opacity: 1;
-    background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
     display: grid;
     align-items: flex-end;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
-    --tw-text-opacity: 1;
-    color: rgba(153, 155, 168, var(--tw-text-opacity));
     z-index: 20
 }
 
 /* Width for different screen sizes */
 
-.xpl-main-nav--md .xpl-nav-item a {
+.xpl-main-nav--md .xpl-nav-item a,
+      .xpl-main-nav--md .xpl-nav-item button {
         width: 112px;
       }
 
-.xpl-main-nav--md .xpl-nav-item a svg {
+.xpl-main-nav--md .xpl-nav-item a svg, .xpl-main-nav--md .xpl-nav-item button svg {
           margin-right: 0px;
         }
 
-.xpl-main-nav--md .xpl-nav-item a {
+.xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button {
         display: grid;
         justify-items: center;
         grid-auto-flow: row
-}
-
-.xpl-main-nav--md .xpl-avatar {
-      margin-left: 1rem;
-    }
+      }
 
-.xpl-main-nav--sm .xpl-nav-item a {
+.xpl-main-nav--sm .xpl-nav-item a,
+      .xpl-main-nav--sm .xpl-nav-item button {
         width: 74px;
       }
 
-.xpl-main-nav--sm .xpl-nav-item a p {
+.xpl-main-nav--sm .xpl-nav-item a p, .xpl-main-nav--sm .xpl-nav-item button p {
           display: none;
         }
 
-.xpl-main-nav--sm .xpl-nav-item a .flatpickr-dayp{
+.xpl-main-nav--sm .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm .xpl-nav-item button .flatpickr-dayp{
           visibility:hidden
         }
 
-.xpl-main-nav--sm .xpl-nav-item a svg {
+.xpl-main-nav--sm .xpl-nav-item a svg, .xpl-main-nav--sm .xpl-nav-item button svg {
           margin-right: 0px;
         }
 
-.xpl-main-nav--sm .xpl-nav-item a {
+.xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button {
         display: grid;
         justify-items: center;
         grid-auto-flow: row
-}
+      }
 
-.xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item a {
+.xpl-main-nav--sm .xpl-nav-item a,
+      .xpl-main-nav--sm .xpl-nav-item button,
+      .xpl-main-nav--md .xpl-nav-item a,
+      .xpl-main-nav--md .xpl-nav-item button {
         font-size: 0.875rem;
         line-height: 1rem;
+      }
+
+.xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button, .xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button {
         font-weight: 600;
         padding-top: 0.75rem;
-        padding-bottom: 0.75rem;
+        padding-bottom: 0.75rem
       }
 
 .xpl-main-nav--sm header p, .xpl-main-nav--md header p {
@@ -4293,20 +4269,20 @@ a.xpl-list-item:focus {
         margin-right: 0px;
       }
 
-.xpl-main-nav--sm footer .xpl-nav-item a p, .xpl-main-nav--sm footer .xpl-nav-item div p, .xpl-main-nav--md footer .xpl-nav-item a p, .xpl-main-nav--md footer .xpl-nav-item div p {
+.xpl-main-nav--sm footer .xpl-nav-item a p, .xpl-main-nav--sm footer .xpl-nav-item button p, .xpl-main-nav--sm footer .xpl-nav-item div p, .xpl-main-nav--md footer .xpl-nav-item a p, .xpl-main-nav--md footer .xpl-nav-item button p, .xpl-main-nav--md footer .xpl-nav-item div p {
             display: none;
           }
 
-.xpl-main-nav--sm footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item div .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item div .flatpickr-dayp{
+.xpl-main-nav--sm footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item button .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item div .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item button .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item div .flatpickr-dayp{
             visibility:hidden
           }
 
-.xpl-main-nav--sm footer .xpl-nav-item a, .xpl-main-nav--md footer .xpl-nav-item a {
+.xpl-main-nav--sm footer .xpl-nav-item a, .xpl-main-nav--sm footer .xpl-nav-item button, .xpl-main-nav--md footer .xpl-nav-item a, .xpl-main-nav--md footer .xpl-nav-item button {
           display: inline-flex;
-          margin-bottom: 0px;
+          margin-bottom: 0px
         }
 
-.xpl-nav-item a svg {
+.xpl-nav-item a svg, .xpl-nav-item button svg {
       height: 2rem;
       margin-right: 0.75rem;
       fill: currentColor;
@@ -4315,26 +4291,26 @@ a.xpl-list-item:focus {
       width: 2rem;
     }
 
-.xpl-nav-item a:hover svg, .xpl-nav-item a:focus svg {
+.xpl-nav-item a:hover svg, .xpl-nav-item a:focus svg, .xpl-nav-item a:active svg, .xpl-nav-item button:hover svg, .xpl-nav-item button:focus svg, .xpl-nav-item button:active svg {
         fill: currentColor;
         --tw-text-opacity: 1;
         color: rgba(255, 255, 255, var(--tw-text-opacity));
       }
 
-.xpl-nav-item a:hover, .xpl-nav-item a:focus {
+.xpl-nav-item a:hover, .xpl-nav-item a:focus, .xpl-nav-item a:active, .xpl-nav-item button:hover, .xpl-nav-item button:focus, .xpl-nav-item button:active {
       --tw-bg-opacity: 1;
       background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
       --tw-text-opacity: 1;
       color: rgba(255, 255, 255, var(--tw-text-opacity))
     }
 
-.xpl-nav-item a.active svg {
+.xpl-nav-item a.active svg, .xpl-nav-item button.active svg {
         fill: currentColor;
         --tw-text-opacity: 1;
         color: rgba(249, 145, 112, var(--tw-text-opacity));
       }
 
-.xpl-nav-item a.active {
+.xpl-nav-item a.active, .xpl-nav-item button.active {
       --tw-border-opacity: 1;
       border-color: rgba(249, 145, 112, var(--tw-border-opacity));
       border-style: solid;
@@ -4343,7 +4319,7 @@ a.xpl-list-item:focus {
       color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
 
-.xpl-nav-item a {
+.xpl-nav-item a, .xpl-nav-item button {
     display: flex;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -4351,14 +4327,23 @@ a.xpl-list-item:focus {
     padding-right: 1rem;
     --tw-text-opacity: 1;
     color: rgba(153, 155, 168, var(--tw-text-opacity));
-    width: 100%;
+    width: 100%
+  }
+
+.xpl-nav-item a, .xpl-nav-item button {
     background-color: transparent;
     border-color: transparent;
     border-style: solid;
     border-right-width: 4px;
     align-items: center;
     align-content: center
-}
+  }
+
+.xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button, .xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button {
+        justify-content: center;
+        padding-left: 0px;
+        padding-right: 0px
+      }
 
 .xpl-pagination {
   --tw-bg-opacity: 1;
@@ -4588,8 +4573,6 @@ a.xpl-list-item:focus {
 .xpl-secondary-nav nav::after {
         overflow: hidden;
 
-        pointer-events: none;
-
         position: absolute;
 
         top: 0px;
@@ -4684,7 +4667,6 @@ a.xpl-list-item:focus {
         background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
         --tw-border-opacity: 1;
         border-color: rgba(249, 145, 112, var(--tw-border-opacity));
-        pointer-events: none;
         --tw-text-opacity: 1;
         color: rgba(255, 255, 255, var(--tw-text-opacity));
       }
@@ -4694,7 +4676,6 @@ a.xpl-list-item:focus {
       background-color: rgba(254, 246, 244, var(--tw-bg-opacity));
       --tw-border-opacity: 1;
       border-color: rgba(249, 145, 112, var(--tw-border-opacity));
-      pointer-events: none;
       --tw-text-opacity: 1;
       color: rgba(48, 45, 59, var(--tw-text-opacity))
     }
@@ -4736,10 +4717,9 @@ a.xpl-list-item:focus {
   }
 
 @media (min-width: 1024px) {
-
-.xpl-secondary-nav {
-    width: 200px;
-}
+    .xpl-secondary-nav nav ul .xpl-nav-item a {
+      width: 200px;
+    }
   }
 
 .xpl-secondary-nav {
@@ -5432,6 +5412,12 @@ button.xpl-tag__close {
   transform: translateX(12px);
 }
 
+.xpl-utility-bar {
+  background-color: var(--xpl-color-gray-0);
+  border-color: var(--xpl-color-gray-300);
+  color: var(--xpl-color-gray-500);
+}
+
 .xpl-utility-bar ul >, .xpl-utility-bar nav >, .xpl-utility-bar xpl-breadcrumbs > {
       display: grid;
       align-content: center;
@@ -5464,26 +5450,6 @@ button.xpl-tag__close {
       display: flex;
     }
 
-.xpl-utility-bar {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
-}
-
-.dark .xpl-utility-bar {
-  --tw-bg-opacity: 1;
-  background-color: rgba(48, 45, 59, var(--tw-bg-opacity))
-}
-
-.xpl-utility-bar {
-  --tw-border-opacity: 1;
-  border-color: rgba(234, 235, 239, var(--tw-border-opacity))
-}
-
-.dark .xpl-utility-bar {
-  --tw-border-opacity: 1;
-  border-color: rgba(60, 56, 71, var(--tw-border-opacity))
-}
-
 .xpl-utility-bar {
   border-bottom-width: 1px;
   display: grid;
@@ -5491,16 +5457,6 @@ button.xpl-tag__close {
   padding-bottom: 0.75rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  --tw-text-opacity: 1;
-  color: rgba(153, 155, 168, var(--tw-text-opacity))
-}
-
-.dark .xpl-utility-bar {
-  --tw-text-opacity: 1;
-  color: rgba(234, 235, 239, var(--tw-text-opacity))
-}
-
-.xpl-utility-bar {
   grid-auto-flow: column
 }
 
@@ -5511,15 +5467,19 @@ button.xpl-tag__close {
   }
 }
 
+.dark .xpl-utility-bar {
+  background-color: var(--xpl-color-gray-900);
+  border-color: var(--xpl-color-gray-700);
+  color: var(--xpl-color-gray-300);
+}
+
 .xpl-utility-nav__bars {
   fill: currentColor;
+  color: var(--xpl-color-text-primary-lm);
   margin-left: 0.5rem;
   margin-right: 0.5rem;
-  --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
 
 .dark .xpl-utility-nav__bars {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity))
+  color: var(--xpl-color-text-primary-dm);
 }