@ogidor/dashboard 1.0.12 → 1.0.13

package/README.md

@@ -32,7 +32,7 @@ sync — out of the box.
 - **Structural Sync** — adding, removing, or renaming a widget in any window instantly appears in all open windows via `BroadcastChannel`.
 - **Persistent Layout** — state is saved to `localStorage` on every change and restored on reload.
 - **Content-Agnostic Cards** — you own the card body; stamp any Angular component, chart, or markup inside via `ng-template`.
-- **Fully Themeable** — 20 colour tokens plus font family, controllable via a typed `DashboardTheme` input or CSS custom properties.
+- **Fully Themeable** — 32 colour tokens plus font family, controllable via a typed `DashboardTheme` input or CSS custom properties.
 
 ---
 
@@ -297,35 +297,47 @@ export interface DashboardConfig {
 
 ```typescript
 export interface DashboardTheme {
-  // Layout
-  backgroundColor?:          string;  // outer wrapper          default: #000000
-  panelColor?:               string;  // main panel             default: #1c1c1e
-  widgetCardColor?:          string;  // card background        default: #2c2c2e
-  foreColor?:                string;  // text / labels          default: #8e8e93
-  accentColor?:              string;  // active states, buttons default: #0a84ff
-  dangerColor?:              string;  // destructive actions    default: #ff453a
-  fontFamily?:               string;  // global font stack      default: system-ui
-
-  // Header & Tabs
-  tabsContainerColor?:       string;  // pill background        default: rgba(44,44,46,0.6)
-  tabActiveColor?:           string;  // active tab bg          default: #3a3a3c
-  tabActiveTextColor?:       string;  // active tab text        default: #ffffff
-  tabHoverTextColor?:        string;  // hovered tab text       default: #e5e5ea
-  addWidgetButtonTextColor?: string;  // Add Widget label       default: #ffffff
-
-  // Pop-out Window
-  popoutTitleColor?:         string;  // pop-out title text     default: #ffffff
-
-  // Widget Card
-  widgetTitleColor?:         string;  // card title             default: #ffffff
-  dragHandleColor?:          string;  // drag dots              default: rgba(255,255,255,0.2)
-  widgetBorderColor?:        string;  // card border            default: rgba(255,255,255,0.07)
-  widgetButtonBgColor?:      string;  // icon button bg         default: rgba(255,255,255,0.07)
-  widgetButtonColor?:        string;  // icon button colour     default: rgba(255,255,255,0.5)
-
-  // Grid
-  placeholderColor?:         string;  // drag ghost overlay     default: #0a84ff
-  resizeHandleColor?:        string;  // resize icon            default: rgba(255,255,255,0.25)
+  // ── Layout ──
+  backgroundColor?:          string;  // outer wrapper              default: #000000
+  panelColor?:               string;  // main panel bg              default: #1c1c1e
+  panelBorderColor?:         string;  // panel & pop-out border     default: rgba(255,255,255,0.05)
+  widgetCardColor?:          string;  // card background            default: #2c2c2e
+  foreColor?:                string;  // text / labels              default: #8e8e93
+  accentColor?:              string;  // active states, buttons     default: #0a84ff
+  accentTintColor?:          string;  // light accent hover bg      default: rgba(10,132,255,0.15)
+  accentTintStrongColor?:    string;  // strong accent active bg    default: rgba(10,132,255,0.25)
+  dangerColor?:              string;  // destructive actions        default: #ff453a
+  dangerTintColor?:          string;  // light danger hover bg      default: rgba(255,69,58,0.22)
+  fontFamily?:               string;  // global font stack          default: system-ui
+
+  // ── Header & Tabs ──
+  tabsContainerColor?:       string;  // pill container bg          default: rgba(44,44,46,0.6)
+  tabActiveColor?:           string;  // active tab bg              default: #3a3a3c
+  tabActiveTextColor?:       string;  // active tab text            default: #ffffff
+  tabHoverTextColor?:        string;  // hovered tab text           default: #e5e5ea
+  tabHoverBgColor?:          string;  // hovered tab bg             default: rgba(255,255,255,0.05)
+  addWidgetButtonTextColor?: string;  // Add Widget label           default: #ffffff
+  overflowBtnBgColor?:       string;  // "+N more" button bg        default: rgba(255,255,255,0.08)
+  overflowBtnBorderColor?:   string;  // "+N more" button border    default: rgba(255,255,255,0.12)
+
+  // ── Tab-switcher overlay ──
+  overlayBgColor?:           string;  // dimmed backdrop            default: rgba(0,0,0,0.55)
+  sheetBorderColor?:         string;  // sheet border & dividers    default: rgba(255,255,255,0.08)
+  scrollbarColor?:           string;  // scrollbar thumb            default: rgba(255,255,255,0.15)
+
+  // ── Pop-out Window ──
+  popoutTitleColor?:         string;  // pop-out title text         default: #ffffff
+
+  // ── Widget Card ──
+  widgetTitleColor?:         string;  // card title                 default: #ffffff
+  dragHandleColor?:          string;  // drag dots                  default: rgba(255,255,255,0.2)
+  widgetBorderColor?:        string;  // card border                default: rgba(255,255,255,0.07)
+  widgetButtonBgColor?:      string;  // icon button bg             default: rgba(255,255,255,0.07)
+  widgetButtonColor?:        string;  // icon button colour         default: rgba(255,255,255,0.5)
+
+  // ── Grid ──
+  placeholderColor?:         string;  // drag ghost overlay         default: #0a84ff
+  resizeHandleColor?:        string;  // resize icon                default: rgba(255,255,255,0.25)
 }
 ```
 
@@ -341,11 +353,13 @@ Pass a partial `DashboardTheme` to `[theme]`. Only provided fields are overridde
 
 ```typescript
 theme: DashboardTheme = {
-  accentColor:        '#6c63ff',
-  tabActiveColor:     '#2a2a38',
-  tabActiveTextColor: '#ffffff',
-  widgetTitleColor:   '#f0f0f0',
-  placeholderColor:   '#6c63ff',
+  accentColor:           '#6c63ff',
+  accentTintColor:       'rgba(108,99,255,0.15)',
+  accentTintStrongColor: 'rgba(108,99,255,0.25)',
+  tabActiveColor:        '#2a2a38',
+  tabActiveTextColor:    '#ffffff',
+  widgetTitleColor:      '#f0f0f0',
+  placeholderColor:      '#6c63ff',
 };
 ```
 
@@ -355,37 +369,49 @@ theme: DashboardTheme = {
 
 ### CSS Custom Properties
 
-Every token is also available as a CSS variable. Use them in your global stylesheet:
+Every token is also available as a CSS variable on the `app-dashboard` host element:
 
 ```css
 app-dashboard {
-  /* Layout */
+  /* ── Layout ── */
   --dash-bg:                   #0d0d0d;
   --dash-panel-bg:             #161616;
+  --dash-panel-border:         rgba(255,255,255,0.06);
   --dash-card-bg:              #1f1f1f;
   --dash-fore-color:           #a0a0a0;
   --dash-accent-color:         #6c63ff;
+  --dash-accent-tint:          rgba(108,99,255,0.15);
+  --dash-accent-tint-strong:   rgba(108,99,255,0.25);
   --dash-danger-color:         #e84545;
+  --dash-danger-tint:          rgba(232,69,69,0.22);
   --dash-font-family:          'Inter', sans-serif;
 
-  /* Header / Tabs */
+  /* ── Header / Tabs ── */
   --dash-tabs-container-color: rgba(30,30,32,0.7);
   --dash-tab-active-color:     #2a2a2e;
   --dash-tab-active-text:      #ffffff;
   --dash-tab-hover-text:       #d0d0d5;
+  --dash-tab-hover-bg:         rgba(255,255,255,0.05);
   --dash-add-widget-text:      #ffffff;
+  --dash-overflow-btn-bg:      rgba(255,255,255,0.08);
+  --dash-overflow-btn-border:  rgba(255,255,255,0.12);
 
-  /* Pop-out */
+  /* ── Tab-switcher overlay ── */
+  --dash-overlay-bg:           rgba(0,0,0,0.6);
+  --dash-sheet-border:         rgba(255,255,255,0.08);
+  --dash-scrollbar-color:      rgba(255,255,255,0.15);
+
+  /* ── Pop-out ── */
   --dash-popout-title-color:   #ffffff;
 
-  /* Widget card */
+  /* ── Widget card ── */
   --dash-widget-title-color:   #ffffff;
   --dash-drag-handle-color:    rgba(255,255,255,0.2);
   --dash-widget-border-color:  rgba(255,255,255,0.07);
   --dash-widget-btn-bg:        rgba(255,255,255,0.07);
   --dash-widget-btn-color:     rgba(255,255,255,0.5);
 
-  /* Grid */
+  /* ── Grid ── */
   --dash-placeholder-color:    #6c63ff;
   --dash-resize-handle-color:  rgba(255,255,255,0.25);
 }
@@ -397,16 +423,26 @@ app-dashboard {
 |---|---|---|
 | `--dash-bg` | `backgroundColor` | `#000000` |
 | `--dash-panel-bg` | `panelColor` | `#1c1c1e` |
+| `--dash-panel-border` | `panelBorderColor` | `rgba(255,255,255,0.05)` |
 | `--dash-card-bg` | `widgetCardColor` | `#2c2c2e` |
 | `--dash-fore-color` | `foreColor` | `#8e8e93` |
 | `--dash-accent-color` | `accentColor` | `#0a84ff` |
+| `--dash-accent-tint` | `accentTintColor` | `rgba(10,132,255,0.15)` |
+| `--dash-accent-tint-strong` | `accentTintStrongColor` | `rgba(10,132,255,0.25)` |
 | `--dash-danger-color` | `dangerColor` | `#ff453a` |
+| `--dash-danger-tint` | `dangerTintColor` | `rgba(255,69,58,0.22)` |
 | `--dash-font-family` | `fontFamily` | system-ui stack |
 | `--dash-tabs-container-color` | `tabsContainerColor` | `rgba(44,44,46,0.6)` |
 | `--dash-tab-active-color` | `tabActiveColor` | `#3a3a3c` |
 | `--dash-tab-active-text` | `tabActiveTextColor` | `#ffffff` |
 | `--dash-tab-hover-text` | `tabHoverTextColor` | `#e5e5ea` |
+| `--dash-tab-hover-bg` | `tabHoverBgColor` | `rgba(255,255,255,0.05)` |
 | `--dash-add-widget-text` | `addWidgetButtonTextColor` | `#ffffff` |
+| `--dash-overflow-btn-bg` | `overflowBtnBgColor` | `rgba(255,255,255,0.08)` |
+| `--dash-overflow-btn-border` | `overflowBtnBorderColor` | `rgba(255,255,255,0.12)` |
+| `--dash-overlay-bg` | `overlayBgColor` | `rgba(0,0,0,0.55)` |
+| `--dash-sheet-border` | `sheetBorderColor` | `rgba(255,255,255,0.08)` |
+| `--dash-scrollbar-color` | `scrollbarColor` | `rgba(255,255,255,0.15)` |
 | `--dash-popout-title-color` | `popoutTitleColor` | `#ffffff` |
 | `--dash-widget-title-color` | `widgetTitleColor` | `#ffffff` |
 | `--dash-drag-handle-color` | `dragHandleColor` | `rgba(255,255,255,0.2)` |

package/app/models.d.ts

@@ -40,14 +40,22 @@ export interface DashboardTheme {
     backgroundColor?: string;
     /** Background color of the main content panel. Default: `#1c1c1e` */
     panelColor?: string;
+    /** Subtle border on the main panel and pop-out header. Default: `rgba(255,255,255,0.05)` */
+    panelBorderColor?: string;
     /** Background color of individual widget cards. Default: `#2c2c2e` */
     widgetCardColor?: string;
     /** Primary foreground/text color. Default: `#8e8e93` */
     foreColor?: string;
     /** Primary accent color (active tabs, buttons, etc.). Default: `#0a84ff` */
     accentColor?: string;
+    /** Light tint of the accent color used for hover backgrounds. Default: `rgba(10,132,255,0.15)` */
+    accentTintColor?: string;
+    /** Stronger tint of the accent color used for active card backgrounds. Default: `rgba(10,132,255,0.25)` */
+    accentTintStrongColor?: string;
     /** Danger color used on remove-widget button hover. Default: `#ff453a` */
     dangerColor?: string;
+    /** Light tint of the danger color used for hover backgrounds. Default: `rgba(255,69,58,0.22)` */
+    dangerTintColor?: string;
     /** Font family applied to the whole dashboard. Default: system-ui stack */
     fontFamily?: string;
     /** Background of the tabs pill container. Default: `rgba(44,44,46,0.6)` */
@@ -58,8 +66,20 @@ export interface DashboardTheme {
     tabActiveTextColor?: string;
     /** Text color of hovered (inactive) tabs. Default: `#e5e5ea` */
     tabHoverTextColor?: string;
+    /** Background of a hovered (inactive) tab. Default: `rgba(255,255,255,0.05)` */
+    tabHoverBgColor?: string;
     /** Text color of the "Add Widget" button. Default: `#ffffff` */
     addWidgetButtonTextColor?: string;
+    /** Background of the overflow "+N" button. Default: `rgba(255,255,255,0.08)` */
+    overflowBtnBgColor?: string;
+    /** Border of the overflow "+N" button. Default: `rgba(255,255,255,0.12)` */
+    overflowBtnBorderColor?: string;
+    /** Background of the full-screen overlay behind the tab-switcher sheet. Default: `rgba(0,0,0,0.55)` */
+    overlayBgColor?: string;
+    /** Border color of the tab-switcher sheet and its inner dividers. Default: `rgba(255,255,255,0.08)` */
+    sheetBorderColor?: string;
+    /** Scrollbar thumb color inside the tab-switcher grid. Default: `rgba(255,255,255,0.15)` */
+    scrollbarColor?: string;
     /** Text color of the pop-out page title. Default: `#ffffff` */
     popoutTitleColor?: string;
     /** Text color of the widget card title. Default: `#ffffff` */