@xplortech/apollo-core 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 
 ---
+
+## [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

@@ -1401,6 +1401,7 @@ textarea[class^="xpl-"] {
   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 {
@@ -1463,32 +1464,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 +1486,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 +2897,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 +2965,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 {
@@ -4153,11 +4129,10 @@ 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 {
@@ -4172,14 +4147,13 @@ 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 {
@@ -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,8 +4177,7 @@ 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 {
@@ -4208,20 +4185,15 @@ a.xpl-list-item:focus {
 }
 
 .xpl-main-nav footer .xpl-nav-item > a svg {
+        color: var(--xpl-color-text-secondary-dm);
         fill: currentColor;
-        --tw-text-opacity: 1;
-        color: rgba(153, 155, 168, var(--tw-text-opacity));
       }
 
 .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
 }
 
@@ -5432,6 +5404,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 +5442,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 +5449,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 +5459,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);
 }