Panels for Nora

assets/styles/layout/_docsearch.scss

@@ -141,7 +141,7 @@
     --docsearch-spacing: 1rem;
     --docsearch-hit-color: var(--text-color);
     --docsearch-highlight-color: var(--primary-color);
-    --docsearch-hit-active-color: var(--primary-inverse-color);
+    --docsearch-hit-active-color: var(--primary-contrast-color);
     --docsearch-searchbox-shadow: none;
 }
 

assets/styles/layout/_news.scss

@@ -32,7 +32,7 @@
         overflow: hidden;
         min-width: 0%;
         font-weight: 500;
-        color: var(--primary-inverse-color);
+        color: var(--primary-contrast-color);
     }
 
     .layout-news-link {
@@ -44,7 +44,7 @@
     .layout-news-link,
     .layout-news-link:visited,
     .layout-news-link:active {
-        color:var(--primary-inverse-color);
+        color:var(--primary-contrast-color);
         font-weight:700;
     }
     .layout-news-link:hover {
@@ -52,7 +52,7 @@
     }
 
     .layout-news-close {
-        color:var(--primary-inverse-color);
+        color:var(--primary-contrast-color);
         line-height: 1.5;
         cursor: pointer;
         display: inline-flex;

assets/styles/layout/_topbar.scss

@@ -100,7 +100,7 @@
             background-color: var(--primary-color);
             
             i {
-                color: var(--primary-inverse-color);
+                color: var(--primary-contrast-color);
             }
         }
 

assets/styles/layout/landing/_blocks.scss

@@ -160,7 +160,7 @@
                 background: var(--primary-color);
 
                 &:before {
-                    background: var(--primary-inverse-color) !important ;
+                    background: var(--primary-contrast-color) !important ;
                 }
             }
 

assets/styles/layout/landing/_main.scss

@@ -74,7 +74,7 @@
 
         &.active {
             background: var(--primary-color);
-            color: var(--primary-inverse-color);
+            color: var(--primary-contrast-color);
 
             &:hover {
                 background: var(--primary-hover-color);

assets/styles/layout/templates/_templates.scss

@@ -1653,7 +1653,7 @@
         overflow: hidden;
         position: relative;
         background-color: var(--primary-color);
-        color: var(--primary-inverse-color);
+        color: var(--primary-contrast-color);
         border: 1px solid var(--border-color);
         padding: 0.5rem 1rem;
         font-size: 1rem;

assets/styles/layout/variables/main/_dark.scss

@@ -1,7 +1,7 @@
 :root[class="p-dark"] {
     --primary-text-color:var(--p-primary-400);
     --primary-color: var(--p-primary-color);
-    --primary-inverse-color:var(--p-primary-inverse-color);
+    --primary-contrast-color:var(--p-primary-contrast-color);
     --primary-hover-color: var(--p-primary-hover-color);
     --text-color: var(--p-text-color);
     --text-secondary-color: var(--p-text-muted-color);

assets/styles/layout/variables/main/_light.scss

@@ -1,7 +1,7 @@
 :root {
     --primary-text-color:var(--p-primary-600);
     --primary-color: var(--p-primary-color);
-    --primary-inverse-color:var(--p-primary-inverse-color);
+    --primary-contrast-color:var(--p-primary-contrast-color);
     --primary-hover-color: var(--p-primary-hover-color);
     --text-color: var(--p-text-color);
     --text-secondary-color: var(--p-text-muted-color);

components/doc/codeeditor/templates.js

@@ -427,7 +427,7 @@ const staticStyles = {
     global: `:root {
     --primary-text-color: var(--p-primary-600);
     --primary-color: var(--p-primary-color);
-    --primary-inverse-color: var(--p-primary-inverse-color);
+    --primary-contrast-color: var(--p-primary-inverse-color);
     --primary-hover-color: var(--p-primary-hover-color);
     --text-color: var(--p-surface-700);
     --text-secondary-color: var(--p-surface-500);
@@ -438,7 +438,7 @@ const staticStyles = {
 :root[class='p-dark'] {
     --primary-text-color: var(--p-primary-400);
     --primary-color: var(--p-primary-color);
-    --primary-inverse-color: var(--p-primary-inverse-color);
+    --primary-contrast-color: var(--p-primary-inverse-color);
     --primary-hover-color: var(--p-primary-hover-color);
     --text-color: var(--p-surface-0);
     --text-secondary-color: var(--p-surface-400);

components/lib/themes/aura/panel/index.js

@@ -9,6 +9,7 @@ export default {
         background: 'transparent',
         color: '{text.color}',
         padding: '1.125rem',
+        borderColor: '{content.border.color}',
         borderWidth: '0',
         borderRadius: '0'
     },

components/lib/themes/nora/accordion/index.js

@@ -1,21 +1,21 @@
 export default {
     panel: {
-        borderWidth: '0 0 1px 0',
+        borderWidth: '0',
         borderColor: '{content.border.color}'
     },
     header: {
-        color: '{text.muted.color}',
+        background: '{content.background}',
+        hoverBackground: '{content.hover.background}',
+        activeBackground: '{content.background}',
+        activeHoverBackground: '{content.hover.background}',
+        color: '{text.color}',
         hoverColor: '{text.color}',
         activeColor: '{text.color}',
         padding: '1.125rem',
-        fontWeight: '600',
+        fontWeight: '700',
         borderRadius: '0',
-        borderWidth: '0',
+        borderWidth: '0 1px 1px 1px',
         borderColor: '{content.border.color}',
-        background: '{content.background}',
-        hoverBackground: '{content.background}',
-        activeBackground: '{content.background}',
-        activeHoverBackground: '{content.background}',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
@@ -24,14 +24,14 @@ export default {
             shadow: '{focus.ring.shadow}'
         },
         toggleIcon: {
-            color: '{text.muted.color}',
+            color: '{text.color}',
             hoverColor: '{text.color}',
             activeColor: '{text.color}',
             activeHoverColor: '{text.color}'
         },
         first: {
             topBorderRadius: '{content.border.radius}',
-            borderWidth: '0'
+            borderWidth: '1px'
         },
         last: {
             bottomBorderRadius: '{content.border.radius}',
@@ -39,10 +39,10 @@ export default {
         }
     },
     content: {
-        borderWidth: '0',
+        borderWidth: '0 1px 1px 1px',
         borderColor: '{content.border.color}',
         background: '{content.background}',
         color: '{text.color}',
-        padding: '0 1.125rem 1.125rem 1.125rem'
+        padding: '1.125rem'
     }
 };

components/lib/themes/nora/fieldset/index.js

@@ -4,7 +4,7 @@ export default {
         borderColor: '{content.border.color}',
         borderRadius: '{content.border.radius}',
         color: '{content.color}',
-        padding: '0 1.125rem 1.125rem 1.125rem'
+        padding: '0.75rem 1.125rem 1.125rem 1.125rem'
     },
     legend: {
         background: '{content.background}',
@@ -13,7 +13,7 @@ export default {
         hoverColor: '{content.hover.color}',
         borderRadius: '{content.border.radius}',
         borderWidth: '1px',
-        borderColor: 'transparent',
+        borderColor: '{content.border.color}',
         padding: '0.5rem 0.75rem',
         gap: '0.5rem',
         fontWeight: '600',

components/lib/themes/nora/panel/index.js

@@ -9,17 +9,18 @@ export default {
         background: 'transparent',
         color: '{text.color}',
         padding: '1.125rem',
-        borderWidth: '0',
+        borderWidth: '0 0 1px 0',
+        borderColor: '{content.border.color}',
         borderRadius: '0'
     },
     toggleableHeader: {
         padding: '0.375rem 1.125rem'
     },
     title: {
-        fontWeight: '600'
+        fontWeight: '700'
     },
     content: {
-        padding: '0 1.125rem 1.125rem 1.125rem'
+        padding: '1.125rem'
     },
     footer: {
         padding: '0 1.125rem 1.125rem 1.125rem'