@sylwellsoftware/fray 1.1.1 → 1.3.0

package/styles/structural.css

@@ -4,6 +4,7 @@
         .fray-fill-vertical {
             box-sizing: border-box;
             background: var(--application-background);
+            color: var(--ui-color);
             font-family: var(--font-family);
             font-size: var(--font-size);
             line-height: var(--line-height);
@@ -24,8 +25,18 @@
         }
 
         .colored {
-            background: linear-gradient(15deg, var(--c1) 0%, var(--c2) 65%, var(--c2) 65%, var(--c3) 100%);
+            --colored-base-bg:
+                    linear-gradient(
+                            15deg,
+                            var(--c1) 0%,
+                            var(--c2) 65%,
+                            var(--c2) 65%,
+                            var(--c3) 100%
+                    );
+
+            background: var(--colored-base-bg);
             box-shadow: var(--colored-shadow);
+            border-radius: var(--ui-border-radius);
         }
 
         .island {
@@ -99,6 +110,7 @@ fray-quadcheckbox,
 fray-tricheckbox {
             display: inline-flex;
             line-height: 1;
+            height: 1.4em;
         }
 
         fray-checkbox > label,
@@ -621,15 +633,24 @@ fray-dialog > dialog {
             }
         }
 
+fray-app {
+            box-sizing: border-box;
+            display: block;
+            background: var(--application-background);
+            color: var(--ui-color);
+            font-family: var(--font-family);
+            font-size: var(--font-size);
+            line-height: var(--line-height);
+        }
+
 fray-grouppanel {
-            display: grid;
-            grid-template-columns: 1.5rem minmax(0, 1fr);
+            display: flex;
+            flex-flow: row nowrap;
             align-items: stretch;
             box-sizing: border-box;
             min-width: 0;
             min-height: 0;
             column-gap: 0.35rem;
-            row-gap: 0;
             padding-block: 0.125rem;
             padding-inline: 0.125rem 0.35rem;
             border: 1px solid var(--ui-border-color);
@@ -640,29 +661,22 @@ fray-grouppanel {
             display: grid;
             place-items: center;
             box-sizing: border-box;
-            width: 100%;
+            width: 1.7em;
             min-width: 0;
             min-height: 0;
             padding: 0.125em;
             border-radius: var(--ui-border-radius);
-        }
-
-        fray-grouppanel > fray-header > h1,
-        fray-grouppanel > fray-header > h2,
-        fray-grouppanel > fray-header > h3,
-        fray-grouppanel > fray-header > h4,
-        fray-grouppanel > fray-header > h5,
-        fray-grouppanel > fray-header > h6 {
-            font-weight: 650;
-            white-space: nowrap;
             writing-mode: vertical-rl;
             transform: rotate(180deg);
+            font-weight: normal;
+            font-size: var(--ui-font-size);
         }
 
         fray-grouppanel > fray-content {
             display: block;
             min-width: 0;
             min-height: 0;
+            margin-left: .25em;
         }
 
 fray-header {
@@ -738,6 +752,86 @@ fray-listview {
             padding: var(--ui-padding);
         }
 
+fray-navigationbar {
+            display: block;
+            flex: 0 0 auto;
+            min-width: 0;
+            color: var(--navigation-bar-color);
+            background: var(--navigation-bar-background);
+            border: var(--navigation-bar-border);
+            box-shadow: var(--navigation-bar-shadow);
+        }
+
+        fray-navigationbar > nav,
+        fray-navigationbar > nav > ul {
+            min-width: 0;
+        }
+
+        fray-navigationbar > nav > ul {
+            display: flex;
+            flex-flow: row wrap;
+            gap: var(--navigation-bar-gap);
+
+            align-items: center;
+            justify-content: center;
+            margin: 0;
+            padding: var(--navigation-bar-padding);
+            list-style: none;
+        }
+
+        fray-navigationbar > nav > ul > li {
+            display: flex;
+        }
+
+        fray-navigationbar > nav > ul > li > a,
+        fray-navigationbar > nav > ul > li > span[aria-disabled="true"] {
+            display: inline-flex;
+            align-items: center;
+            min-height: var(--control-min-height, 2rem);
+            padding: var(--navigation-link-padding);
+            box-sizing: border-box;
+            color: var(--navigation-link-color);
+            background: var(--navigation-link-background);
+            border: var(--navigation-link-border);
+            border-radius: var(--navigation-link-radius);
+            box-shadow: var(--navigation-link-shadow);
+            font-family: inherit;
+            font-size: 1.1rem;
+            line-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
+            text-decoration: none;
+            white-space: nowrap;
+        }
+
+        fray-navigationbar > nav > ul > li > a:hover {
+            color: var(--navigation-link-color-hover);
+            background: var(--navigation-link-background-hover);
+        }
+
+        fray-navigationbar > nav > ul > li > a:active {
+            color: var(--navigation-link-color-active);
+            background: var(--navigation-link-background-active);
+        }
+
+        fray-navigationbar > nav > ul > li > a[aria-current="page"] {
+            color: var(--navigation-link-color-current);
+            background: var(--navigation-link-background-current);
+            box-shadow: var(--navigation-link-shadow-current);
+            font-weight: var(--navigation-link-font-weight-current);
+        }
+
+        fray-navigationbar > nav > ul > li > a:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: 1px;
+            box-shadow: var(--focus-ring);
+        }
+
+        fray-navigationbar > nav > ul > li > span[aria-disabled="true"] {
+            color: var(--navigation-link-color-disabled);
+            background: var(--navigation-link-background-disabled);
+            border: var(--navigation-link-border);
+            cursor: not-allowed;
+        }
+
 fray-panel {
             background: var(--panel-background);
             border: var(--panel-border);
@@ -880,6 +974,28 @@ fray-progressbar {
             }
         }
 
+fray-routeoutlet {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        fray-routeoutlet > div {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: auto;
+        }
+
+        fray-routeoutlet > div[hidden] {
+            display: none;
+        }
+
 fray-sidebar {
             display: flex;
             min-width: 0;

package/themes/base.css

@@ -70,8 +70,8 @@
 @layer theme {
   :root {
     /* Foundation */
-    --font-family: sans-serif;
-    --font-size: 14px;
+    --font-family: Helvetica, sans-serif;
+    --font-size: 12px;
     --line-height: normal;
     --control-min-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
     --space-xs: 0px;
@@ -209,6 +209,29 @@
     --toggle-inactive-separator-block-inset: 0;
 
     /* Navigation components */
+    --navigation-bar-background: transparent;
+    --navigation-bar-color: var(--ui-color);
+    --navigation-bar-border: 0 solid transparent;
+    --navigation-bar-shadow: none;
+    --navigation-bar-padding: var(--space-sm);
+    --navigation-bar-gap: var(--space-md);
+    --navigation-link-color: var(--palette-primary-700);
+    --navigation-link-color-hover: var(--palette-primary-900);
+    --navigation-link-color-active: var(--palette-primary-900);
+    --navigation-link-color-current: var(--ui-color);
+    --navigation-link-color-disabled: var(--input-color-disabled);
+    --navigation-link-background: transparent;
+    --navigation-link-background-hover: var(--palette-primary-100);
+    --navigation-link-background-active: var(--palette-primary-100);
+    --navigation-link-background-current: transparent;
+    --navigation-link-background-disabled: transparent;
+    --navigation-link-border: 0 solid transparent;
+    --navigation-link-border-current: 2px solid var(--palette-primary);
+    --navigation-link-shadow: none;
+    --navigation-link-shadow-current: none;
+    --navigation-link-padding: var(--space-xs) var(--space-sm);
+    --navigation-link-radius: var(--radius-sm);
+    --navigation-link-font-weight-current: 700;
     --tabline-background: var(--palette-neutral-100);
     --tabline-padding-inline-start: 0px;
     --tab-active-background: var(--palette-neutral-50);
@@ -239,12 +262,16 @@
     --colored-dark: var(--palette-primary-dark);
     --colored-contrast: var(--palette-contrast-light);
     --colored-shadow: none;
+    --c1: unset;
+    --c2: unset;
+    --c3: unset;
+    --colored-base-bg: linear-gradient(15deg, var(--c1) 0%, var(--c2) 65%, var(--c2) 65%, var(--c3) 100%);
     --block-graph-block-radius: 0.25em;
     --block-graph-block-shadow: var(--colored-shadow);
 
     /* Structural compatibility aliases */
-    --base-font-size: 14px;
-    --ui-font-size: var(--base-font-size);
+    --base-font-size: var(--base-font-size);
+    --ui-font-size: var(--font-size);
     --ui-padding: 6px;
     --ui-padding-h: 6px;
     --ui-padding-v: 0px;

package/themes/java/theme.css

@@ -12,6 +12,9 @@
     --button-border: 2px outset var(--palette-light);
     --input-shadow: inset 1px 1px 1px color-mix(in oklch, var(--palette-dark) 30%, transparent);
     --toolbar-border: 2px outset var(--palette-light);
+    --navigation-bar-border: 2px outset var(--palette-light);
+    --navigation-link-border: 1px outset var(--palette-light);
+    --navigation-link-border-current: 1px inset var(--palette-dark);
     --working-background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklch, var(--palette-dark) 12%, transparent) 4px 8px);
     --button-border-style-active: inset;
   }

package/themes/shiny/theme.css

@@ -2,6 +2,8 @@
 /* Shiny changes theme tokens only. Components own all consuming selectors. */
 @layer theme {
   :root {
+    --base-font-size: 14px;
+
     /* Foundation and shared chrome */
     color-scheme: only light;
     --box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.3);
@@ -11,6 +13,7 @@
     --ui-gradient-2: linear-gradient( to bottom, var(--ui-primary-bg-color) 9px, var(--ui-primary-bg-color) 13px, var(--ui-dark-bg-color) 100% );
     --shiny-ui-gradient: var(--ui-gradient);
     --shiny-ui-gradient-2: var(--ui-gradient-2);
+    --shiny-background: radial-gradient(140% 75% at 30% 10%, #fff2, #fff3 47%, #fff0 55%, #fff0), linear-gradient(to bottom, var(--palette-primary-900) 0%, var(--palette-primary) 65%, var(--palette-primary) 66%, var(--palette-primary-400) 100%);
     --text-color: var(--palette-primary-900);
     --ui-color: var(--text-color);
 
@@ -22,9 +25,7 @@
     --island-margin: var(--space-sm);
     --island-border: 1px solid rgb(255 255 255 / 0.45);
     --island-shadow: 0px 1px 2.5px 0px #666;
-    --section-header-background:
-      radial-gradient(100% 50% at 40% 10%, var(--palette-light-clear), var(--palette-light-clear) 30%, var(--palette-light-faint) 110%, var(--palette-light-clear) 120%, var(--palette-light-clear) calc(120% + 1%)),
-      linear-gradient(1deg, var(--palette-primary-900) 0%, var(--palette-primary) 65%, var(--palette-primary) 65%, var(--palette-primary-200) 100%);
+    --section-header-background: var(--shiny-background);
     --section-header-color: var(--palette-contrast-light);
     --section-header-shadow:
       inset -1px 1px 2px 0px #0003,
@@ -32,6 +33,7 @@
       inset -1px 1px 1px 0px #0006,
       inset 1px -1px 1px 0px #fff5,
       0px 1px 2px 0px #000a;
+    --mini-shadow: 0px 1px 1px 0px #000a;
 
     --sidebar-background:
       linear-gradient(135deg, rgb(255 255 255 / 0.4), transparent 55%),
@@ -100,6 +102,14 @@
     --toggle-inactive-separator-block-inset: 0.35rem;
 
     /* Navigation components */
+    --navigation-bar-background: var(--ui-gradient-2);
+    --navigation-bar-color: var(--text-color);
+    --navigation-bar-shadow: var(--panel-shadow);
+    --navigation-link-color-current: white;
+    --navigation-link-background-hover: var(--section-header-background);
+    --navigation-link-color-hover: white;
+    --navigation-link-background-current: var(--section-header-background);
+    --navigation-link-shadow-current: var(--mini-shadow);
     --tabline-background: var(--shiny-ui-gradient-2);
     --tabline-padding-inline-start: 5px;
     --tab-button-background: var(--shiny-ui-gradient);
@@ -119,7 +129,20 @@
       inset -1px 1px 1px 1px #0006,
       inset 1px -1px 1px 1px #fff5,
       -1px 1px 3px 0 #0006;
+
     --colored-shadow: inset -2px 2px 2px 0px #0006, inset 2px -2px 2px 0px #fff5, -3px 3px 4px 0px #0006;
     --block-graph-block-border: none;
   }
 }
+
+.colored {
+ background: radial-gradient(140% 75% at 30% 10%, #fff0, #fff1 47%, #fff0 55%, #fff0), var(--colored-base-bg);
+}
+
+nav > ul > li {
+  border-radius: var(--ui-border-radius);
+}
+
+fray-navigationbar nav > ul > li > a {
+  line-height: 1.7em;
+}