SolidOS · bourgeoa · May 27, 2026 · May 2, 2026 · May 3, 2026 · May 3, 2026
diff --git a/src/databrowser.html b/src/databrowser.html
@@ -31,13 +31,13 @@
     -->
 
     <!-- Main content area — single visible region at a time -->
-    <main id="MainContent" role="main" tabindex="-1" aria-live="polite">
+    <div tabindex="-1" aria-live="polite">
       <div class="app-shell">
         <aside id="NavMenu" class="app-nav" aria-label="Application menu" hidden>
           <div id="NavMenuContent" class="menu-content"></div>
         </aside>
 
-        <div class="app-view">
+        <main id="MainContent" class="app-view">
           <!--
             Outline view: the primary RDF-subject browser.
             JS appends property-table <div>s (not <tr>s) here.
@@ -66,11 +66,11 @@
           >
           <!-- globalAppTabs appends tab widget here -->
           </section>
-        </div> <!-- .app-view -->
+        </main> <!-- .app-view -->
       </div> <!-- .app-shell -->
 
       <div id="MenuOverlay" class="menu-overlay" hidden aria-hidden="true"></div>
-    </main>
+    </div>
 
     <!-- Footer — populated by solid-ui initFooter() -->
     <footer id="PageFooter" role="contentinfo">

diff --git a/src/styles/mash-utilities.css b/src/styles/mash-utilities.css
@@ -595,7 +595,7 @@
   border-radius: var(--border-radius-base, 0.3125rem);
   border: 1px solid var(--gray-400, #99A1AF);
   background: var(--white, #FFF);
-  color: var(--gray-900, #101828);
+  color: var(--color-text-subheading, var(--gray-900, #101828));
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-medium, 500);
   padding: var(--spacing-2xs, 0.625rem);
@@ -614,7 +614,7 @@
 }
 
 .label {
-  color: var(--gray-600, #4A5565);
+  color: var(--color-text-secondary, #4A5565);
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-regular, 400);
 }

diff --git a/src/styles/mash.css b/src/styles/mash.css
@@ -41,11 +41,11 @@ html, body {
 
 #MainContent {
   flex: 1 1 auto;
+  min-width: 0;
   min-height: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
   container-type: inline-size;          /* enable @container queries */
-  display: flex;
 }
 
 #PageFooter {
@@ -56,7 +56,7 @@ html, body {
 /* ── New responsive app nav layout ── */
 .app-shell {
   display: flex;
-  flex: 1;          /* expand to fill #MainContent (display:flex row container) */
+  flex: 1;          /* expand to fill .app-shell row */
   min-width: 0;     /* prevent overflow in flex context */
   min-height: calc(100vh - var(--app-header-height) - 2.5rem); /* header + footer space */
   margin-top: var(--app-header-height);
@@ -707,114 +707,11 @@ div.exceptionPane pre {
   background-color: var(--color-cv-pane-bg);
 }
 
-/******************* Data Content Pane *****************/
-
-div.dataContentPane {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em; /* color: #404; */
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.nestedFormula {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em;
-  border-radius: 0.5em;
-}
-
-div.dataContentPane td {
-  padding-left: 0.2em;
-  padding-top: 0.1em;
-  padding-right: 0.2em;
-  padding-bottom: 0.05em;
-  /*	        vertical-align: middle; /*@@ Lalana's request*/
-  vertical-align: top; /*@@ Tims's request*/
-  /* With middel, you can't tell what is with what */
-  /* background-color: white; */
-}
-
-div.dataContentPane tr {
-  margin-bottom: 0.6em;
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
-.dataContentPane a {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:link {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:visited {
-  color: var(--color-text-link-visited);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:hover {
-  color: var(--color-text-link-hover);
-  text-decoration: underline;
-  font-weight: bold;
-}
-.dataContentPane a:active {
-  color: var(--color-text-link-active);
-  text-decoration: none;
-}
-
-.dataContentPane.embeddedText {
-  white-space: pre-wrap;
-}
-
-/* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */
-div.dataContentPane td.pred {
-  min-width: 12em;
-} /* Keep aligned with others better */
-div.dataContentPane td.pred a {
-  color: var(--color-text-muted);
-} /* Greyish as form field names have less info value */
-
-/* .collectionAsTables  {border-right: green 1px; margin: 0.2em;} */
-
-div.n3Pane {
-  padding: 1em;
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  color: var(--color-text-blue);
-}
-
 .imageView {
   border: 1em var(--color-background);
   margin: 1em;
 }
 
-.n3Pane pre {
-  font-size: 120%;
-}
-
-.RDFXMLPane pre {
-  font-size: 120%;
-}
-
-div.RDFXMLPane {
-  padding: 1em;
-  border-top: solid 2px var(--color-data-pane-border-top);
-  border-left: solid 2px var(--color-data-pane-border-top);
-  border-bottom: solid 2px var(--color-data-pane-border-side);
-  border-right: solid 2px var(--color-data-pane-border-side);
-  color: var(--color-text-brown);
-}
-
 /* Generic things useful anywhere */
 
 img.hideTillHover {
@@ -1233,6 +1130,8 @@ td.undetermined table {
   margin: 0.2em;
 }
 
+/* The following two classes were used for defaultPane
+I'm not sure if they are used anywhere else so i'm not deleting. */
 div.bottom-border {
   border: 0.2em solid transparent;
   width: 100%;

diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
@@ -7,7 +7,19 @@ html[data-theme="dark"] {
   /* Background and Text */
   --color-background: #1e1e1e;
   --color-text: #e0e0e0;
-  --color-text-secondary: #999;
+  --color-text-secondary: var(--gray-400, #99A1AF);
+  --color-text-subheading: var(--gray-100, #F3F4F6);
+  --color-text-detail: var(--gray-300, #D1D5DC);
+  --color-text-empty-state: var(--gray-200, #E5E7EB);
+  --color-icon-muted: var(--gray-400, #99A1AF); 
+  --color-text-overlay: var(--gray-100, #F3F4F6);
+  --color-text-accent-subtle: var(--gray-100, #F3F4F6);
+  --color-text-strong: var(--gray-100, #F3F4F6);
+  --color-text-strong-secondary: var(--gray-200, #E5E7EB);
+  --color-text-light: #555;
+  --color-text-ui: var(--gray-800, #1E2939);
+  --color-text-control: var(--gray-100, #F3F4F6);
+  --color-text-primary: var(--gray-300, #D1D5DC);
   --color-text-light: #555;
   --color-text-link: #66b3ff;
   --color-text-link-visited: #66b3ff;
@@ -19,6 +31,36 @@ html[data-theme="dark"] {
   --color-text-blue: #7cb9ff;
   --color-text-brown: #c4a660;
 
+   /* Button colors */
+  --color-surface-action: var(--color-primary, #B388FF);
+  --color-surface-action-hover: #c39cff;
+  --color-surface-accent-subtle: var(--grey-purple-900, #332746);
+  --color-surface-accent-subtle-hover: var(--grey-purple-700, #5e546d);
+  --color-surface-overlay: var(--gray-800, #1E2939);
+  --color-surface-overlay-header: var(--gray-900, #101828);
+  --color-surface-tertiary: var(--gray-800, #1E2939);
+  --color-surface-tertiary-hover: var(--gray-900, #101828);
+  --color-surface-chip: var(--color-card-bg, #2a2a2a);
+  --color-surface-framed-content: var(--color-card-bg, #2a2a2a);
+  --color-surface-placeholder: var(--gray-700, #364153);
+  --color-surface-subtle: rgba(255, 255, 255, 0.08);
+  --color-text-on-action: var(--gray-900, #101828);
+  --color-border-muted: var(--color-border-light, #666);
+  --color-border-action: var(--color-primary, #B388FF);
+  --color-focus-ring: var(--color-primary, #B388FF);
+  --color-focus-gap: var(--gray-900, #101828);
+  --dialog-cancel-button-background: transparent;
+  --dialog-cancel-button-text: var(--gray-100, #F3F4F6);
+  --dialog-cancel-button-border: var(--color-border-light, #666);
+  --dialog-cancel-button-hover-background: var(--color-primary, #B388FF);
+  --dialog-cancel-button-hover-text: var(--color-text-on-action, #1e1e1e);
+  --dialog-cancel-button-hover-border: var(--color-primary, #B388FF);
+
+  /* Error dialog box colors */
+  --dialog-error-background: rgba(176, 0, 32, 0.18);
+  --dialog-error-border: rgba(255, 118, 154, 0.5);
+  --dialog-error-text: #ffbbcd;
+
   /* Header */
   --color-header-row-bg: var(--grey-purple-900, #332746);
   --color-header-text: var(--white, #fff);
@@ -33,10 +75,14 @@ html[data-theme="dark"] {
   /* Borders */
   --color-border: #444;
   --color-border-dark: #555;
-  --color-border-darker: #333;
+  --color-border-darker: var(--gray-800, #1E2939);
   --color-border-light: #666;
+  --color-border-lighter: var(--gray-700, #364153);
+  --color-border-subtle: var(--gray-700, #364153);
   --color-border-pale: #555;
   --color-border-accent: #9999dd;
+  --color-border-button: var(--gray-700, #364153);
+  --color-border-button-hover: var(--gray-600, #4A5565);
 
   /* Status Colors */
   --color-selected-bg: #4a6e3a;
@@ -186,6 +232,7 @@ html[data-theme="dark"] {
   --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
   --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.3);
   --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.35);
+  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
   --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.3);
   --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.5);
   --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.4);

diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
@@ -52,19 +52,57 @@
   --black: #000;  /* Used for: text heading */
   --white: #FFF;
 
+
+  /* Button colors */
+  --color-surface-action: var(--color-primary, #7C4DFF);
+  --color-surface-action-hover: #6d3cf2;
+  --color-surface-accent-subtle: var(--lavender-300, #e6dcff);
+  --color-surface-accent-subtle-hover: var(--lavender-200, #E4DBFE);
+  --color-surface-overlay: var(--white, #FFF);
+  --color-surface-overlay-header: var(--slate-50, #F8FAFC);
+  --color-surface-tertiary: var(--gray-50, #F9FAFB);
+  --color-surface-tertiary-hover: var(--gray-100, #F3F4F6);
+  --color-surface-chip: var(--gray-100, #F3F4F6);
+  --color-surface-framed-content: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
+  --color-surface-subtle: rgba(15, 23, 43, 0.04);
+  --color-text-on-action: var(--white, #FFF);
+  --color-border-muted: var(--gray-300, #D1D5DC);
+  --color-border-action: var(--color-primary, #7C4DFF);
+  --color-focus-ring: var(--color-primary, #7C4DFF);
+  --color-focus-gap: var(--white, #FFF);
+  --dialog-cancel-button-background: transparent;
+  --dialog-cancel-button-text: var(--gray-800, #1E2939);
+  --dialog-cancel-button-border: var(--gray-300, #D1D5DC);
+  --dialog-cancel-button-hover-background: var(--blue-900, #083575);
+  --dialog-cancel-button-hover-text: var(--white, #FFF);
+  --dialog-cancel-button-hover-border: var(--blue-900, #083575);
+  --color-header-menu-item-hover: var(--lavender-300, #e6dcff);
+
+  /* Error dialog box colors */
+  --dialog-error-background: var(--pink-500, #ffdde6);
+  --dialog-error-border: var(--pink-700, #ff98b3);
+  --dialog-error-text: var(--red-600, #B00020);
+
   /* Background and Text */
   --color-background-old: #FFFFFF; /* White */
   --color-background: #F8F9FB; /* Light grey for overall background */
   --color-background-row-default: white;
   --color-background-row-alternate: #f0f0f0;
   --color-text: #1A1A1A; /* Used in login button */
+  --color-text-ui: var(--gray-100, #F3F4F6);
   --color-text-primary: var(--gray-700, #364153); /* new design */
+  --color-text-control: var(--slate-700, #314158);
   --color-text-secondary-old: #666;
   --color-text-secondary: var(--gray-600, #4A5565);
   --color-text-heading: var(--black, #000000); /* New design uses pure black for headings */
   --color-text-subheading: var(--gray-900, #101828); /* new design */
+  --color-text-overlay: var(--gray-800, #1E2939);
+  --color-text-accent-subtle: var(--color-text-control, var(--slate-700, #314158));
   --color-text-strong: var(--slate-900, #0F172B); /* new design */
   --color-text-strong-secondary: var(--slate-800, #1D293D); /* new design */
+  --color-text-detail: var(--slate-500, #62748E);
+  --color-text-empty-state: var(--gray-400, #99A1AF);
+  --color-icon-muted: var(--slate-400, #90A1B9);
   --color-text-light: #aaa;
   --color-text-link: #3B5998;
   --color-text-link-visited: #3B5998;
@@ -93,16 +131,19 @@
   --color-border-dark: #777;
   --color-border-darker: var(--gray-600, #4A5565); /* old #444 */
   --color-border-light: #aaa;
+  --color-border-subtle: var(--gray-100, #F3F4F6);
   --color-border-pale: #eee;
   --color-border-accent: #88c;
+  --color-border-button: var(--gray-300, #D1D5DC);
+  --color-border-button-hover: var(--gray-400, #99A1AF);
 
   /* Status Colors */
-  --color-selected-bg: #8F3;
-  --color-warning: red;
+  --color-selected-bg: var(--lavender-300, #e6dcff);
+  --color-warning: var(--red-600, #B00020);
   --color-success-bg: #dfd;
   --color-success-border: green;
   --color-failure-bg: white;
-  --color-failure-border: red;
+  --color-failure-border: var(--red-600, #B00020);
 
   /* Info and Alert Colors */
   --color-info-bg: #ccccff;
@@ -279,6 +320,7 @@
   --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12); /* Used in login button */
   --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
   --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
+  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
   --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
   --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
   --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);

diff --git a/static/browse-test.html b/static/browse-test.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"

diff --git a/static/browse.html b/static/browse.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"