@capillaryjs/capillary-ui 1.1.0 → 1.3.0

package/themes/shiny/theme.css

@@ -7,8 +7,9 @@
     --box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.3);
     --button-shadow: -1px 1px 2px 1px rgba(0,0,0,0.5);
     --button-shadow-pressed: -1px 1px 2px 0px #0008;
-    --ui-gradient: linear-gradient( to top, var(--ui-primary-bg-color) 9px, var(--ui-primary-bg-color) 13px, var(--ui-dark-bg-color) 100% );
-    --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% );
+    /* Match legacy sRGB interpolation for palette-derived surface stops. */
+    --ui-gradient: linear-gradient( to top in srgb, var(--ui-primary-bg-color) 9px, var(--ui-primary-bg-color) 13px, var(--ui-dark-bg-color) 100% );
+    --ui-gradient-2: linear-gradient( to bottom in srgb, 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%);
@@ -20,8 +21,17 @@
     --panel-color: var(--text-color);
     --panel-border: none;
     --panel-radius: 0px;
+    --filter-panel-background:
+      linear-gradient(to bottom, #fff 0%, var(--ui-primary-bg-color) 70%, var(--ui-medium-bg-color) 100%);
+    --filter-panel-color: var(--text-color);
+    --filter-panel-border: 1px solid color-mix(in srgb, var(--palette-primary) 52%, var(--palette-light));
+    --filter-panel-radius: var(--ui-border-radius);
+    --filter-panel-shadow:
+      inset 1px 1px 0 rgb(255 255 255 / 0.82),
+      inset -1px -1px 0 rgb(0 0 0 / 0.12),
+      0 2px 5px rgb(0 0 0 / 0.34);
     --island-border: 0px solid rgb(255 255 255 / 0.45);
-    --island-shadow: 0px 1px 2.5px 0px #666;
+    --island-shadow: 0px 1px 2.5px 0px var(--palette-neutral-600);
     --section-header-background: var(--shiny-background);
     --section-header-color: var(--palette-contrast-light);
     --section-header-shadow:
@@ -31,6 +41,7 @@
       inset 1px -1px 1px 0px #fff5,
       0px 1px 2px 0px #000a;
     --mini-shadow: 0px 1px 1px 0px #000a;
+    --groupbox-section-header-color: unset;
 
     --sidebar-background:
       linear-gradient(135deg, rgb(255 255 255 / 0.4), transparent 55%),
@@ -48,23 +59,23 @@
     --button-background: var(--ui-gradient-2);
     --button-background-hover: var(--ui-gradient);
     --button-background-active: var(--ui-gradient);
-    --button-border: 1px solid #fff;
+    --button-border: 1px solid var(--palette-light);
     --button-shadow-active: var(--button-shadow-pressed);
 
-    --cbx-x-bg: radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0), linear-gradient(to bottom, #400 0%, #c00 65%, #e00 100%);
-    --cbx-x-color: #fff;
+    --cbx-x-bg: radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0), linear-gradient(to bottom, color-mix(in oklch, var(--palette-status-negative) 55%, #000) 0%, var(--palette-status-negative) 65%, color-mix(in oklch, var(--palette-status-negative) 82%, #fff) 100%);
+    --cbx-x-color: var(--palette-contrast-light);
     --cbx-x-border: 0px solid rgba(0,0,0,0);
     --cbx-x-shadow: inset 1px -1px 1px 0px #fffa, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
-    --cbx-o-bg: linear-gradient(to bottom, #ffffffd5 0%, #ffffffe5 100%), linear-gradient(to bottom, var(--palette-primary) 0%, var(--palette-primary) 100%);
+    --cbx-o-bg: linear-gradient(to bottom, #ffffffd5 0%, #ffffffe5 100%), linear-gradient(to bottom, var(--palette-status-neutral) 0%, var(--palette-status-neutral) 100%);
     --cbx-o-color: var(--ui-input-text-color);
     --cbx-o-border: 0px solid rgba(0,0,0,0);
     --cbx-o-shadow: inset 1px -1px 1px 0px #ffff, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
     --cbx-c-bg: var(--checkbox-box-background-checked);
-    --cbx-c-color: #fff;
+    --cbx-c-color: var(--palette-contrast-light);
     --cbx-c-border: 0px solid rgba(0,0,0,0);
     --cbx-c-shadow: inset 1px -1px 1px 0px #fff9, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
-    --cbx-r-bg: radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0), linear-gradient(to bottom, #030 0%, #0a0 65%, #0d0 100%);
-    --cbx-r-color: #fff;
+    --cbx-r-bg: radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0), linear-gradient(to bottom, color-mix(in oklch, var(--palette-status-positive) 55%, #000) 0%, var(--palette-status-positive) 65%, color-mix(in oklch, var(--palette-status-positive) 82%, #fff) 100%);
+    --cbx-r-color: var(--palette-contrast-light);
     --cbx-r-border: 0px solid rgba(0,0,0,0);
     --cbx-r-shadow: inset 1px -1px 1px 0px #fff8, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
 
@@ -102,9 +113,9 @@
     --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-color-current: var(--palette-contrast-light);
     --navigation-link-background-hover: var(--section-header-background);
-    --navigation-link-color-hover: white;
+    --navigation-link-color-hover: var(--palette-contrast-light);
     --navigation-link-background-current: var(--section-header-background);
     --navigation-link-shadow-current: var(--mini-shadow);
     --tabline-background: var(--shiny-ui-gradient-2);
@@ -116,10 +127,10 @@
     --tab-button-inactive-bottom-shadow: 0px 1px 3px 0px #000a;
 
     /* Status and graphical components */
-    --progress-track-background: linear-gradient(0deg, var(--ui-dark-bg-color) 0%, #f0f0f0 100%);
+    --progress-track-background: linear-gradient(0deg, var(--ui-dark-bg-color) 0%, var(--ui-primary-bg-color) 100%);
     --progress-value-background:
       radial-gradient(100% 50% at 40% 10%, #fff0, #fff0 30%, #ffffff15 110%, #fff0 120%, #fff0 calc(120% + 1%)),
-      linear-gradient(15deg, #1e5799 0%, var(--palette-primary) 65%, var(--palette-primary) 65%, #7db9e8 100%);
+      linear-gradient(15deg, var(--palette-primary-800) 0%, var(--palette-primary) 65%, var(--palette-primary) 65%, var(--palette-primary-300) 100%);
     --progress-value-shadow:
       inset -1px 1px 3px 0 #0003,
       inset 1px -1px 3px 0 #fff5,
@@ -159,6 +170,13 @@ cap-datatable > table > thead > tr > th[aria-sort] > button.sort {
 }
 
 cap-navigationbar + cap-toolbar {
-  border-top: 2px groove #fff;
+  border-top: 2px groove var(--palette-light);
   background: var(--ui-gradient);
 }
+
+cap-toggle > cap-options > button[role="radio"][aria-checked="true"]::before {
+  background: var(--toggle-button-background-checked);
+  border: var(--toggle-button-border-checked);
+  box-shadow: none;
+  inset-inline: var(--toggle-button-selected-inline-overlap);
+}

package/themes/soft/theme.css

@@ -0,0 +1,37 @@
+@charset "utf-8";
+
+/* Semantic port of the legacy Soft treatment. */
+@layer theme {
+  :root {
+    color-scheme: only light;
+    --font-family: Arial, Helvetica, sans-serif;
+    --panel-background: var(--ui-medium-bg-color);
+    --panel-color: var(--palette-neutral-900);
+    --panel-border: 0 solid transparent;
+    --panel-shadow: -1px 1px 1px var(--palette-neutral-400);
+    --panel-radius: 4px;
+    --island-border: 0 solid transparent;
+    --header-background: var(--palette-primary-600);
+    --header-color: var(--palette-contrast-light);
+    --toolbar-background: var(--ui-medium-bg-color);
+    --toolbar-color: var(--panel-color);
+    --table-header-background: var(--ui-dark-bg-color);
+    --table-header-color: var(--panel-color);
+    --table-row-background: var(--ui-primary-bg-color);
+    --table-row-alt-background: var(--ui-medium-bg-color);
+    --button-background: var(--ui-primary-bg-color);
+    --button-background-hover: var(--ui-dark-bg-color);
+    --button-background-active: var(--palette-primary-600);
+    --button-shadow: -1px 1px 1px rgb(0 0 0 / 0.5);
+    --button-shadow-active: -1px 1px 1px rgb(0 0 0 / 0.65);
+    --selection-background: var(--palette-primary-600);
+    --toggle-button-background-checked: var(--palette-primary-600);
+    --tabline-background: var(--ui-dark-bg-color);
+    --tab-active-background: var(--ui-medium-bg-color);
+    --tab-button-background: var(--ui-dark-bg-color);
+    --tab-button-background-active: var(--ui-medium-bg-color);
+    --tab-button-shadow: var(--panel-shadow);
+    --progress-track-background: var(--ui-dark-bg-color);
+    --progress-value-background: var(--palette-primary-600);
+  }
+}

package/themes/white/theme.css

@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+/* Semantic port of the airy, rounded legacy White treatment. */
+@layer theme {
+  :root {
+    color-scheme: only light;
+    --font-family: Arial, sans-serif;
+    --radius-sm: 15px;
+    --radius-md: 15px;
+    --radius-lg: 15px;
+    --ui-border-radius: 15px;
+    --application-background: var(--palette-neutral-300);
+    --panel-background: var(--palette-light);
+    --panel-color: var(--palette-neutral-900);
+    --panel-border: 0 solid transparent;
+    --panel-radius: 0;
+    --island-margin: 0;
+    --island-gap: 0px;
+    --island-padding: 1rem;
+    --island-border: 0 solid transparent;
+    --header-background: transparent;
+    --header-color: var(--palette-primary-600);
+    --section-header-background: var(--palette-primary-600);
+    --section-header-color: var(--palette-contrast-light);
+    --toolbar-background: var(--ui-primary-bg-color);
+    --toolbar-color: var(--panel-color);
+    --table-header-background: var(--ui-dark-bg-color);
+    --table-header-color: var(--panel-color);
+    --table-row-background: var(--palette-light);
+    --table-row-alt-background: var(--ui-primary-bg-color);
+    --input-background: var(--palette-light);
+    --input-border: 1px solid var(--palette-neutral-300);
+    --input-background-disabled: var(--palette-neutral-100);
+    --input-color-disabled: var(--palette-neutral-400);
+    --button-background: var(--ui-dark-bg-color);
+    --button-background-hover: var(--palette-primary);
+    --button-background-active: var(--palette-primary-600);
+    --button-border: 0 solid transparent;
+    --button-color: var(--palette-primary-700);
+    --button-color-disabled: var(--palette-neutral-500);
+    --toggle-button-background-checked: var(--palette-primary);
+    --tabline-background: var(--ui-primary-bg-color);
+    --tab-active-background: var(--palette-light);
+    --tab-button-background: var(--ui-dark-bg-color);
+    --tab-button-background-active: var(--palette-light);
+    --tab-button-shadow: none;
+    --navigation-bar-background: var(--palette-light);
+    --navigation-link-background-current: var(--palette-primary);
+    --navigation-link-color-current: var(--palette-contrast-light);
+    --progress-track-background: var(--ui-primary-bg-color);
+  }
+}