bariweb-widget 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/bariweb.iife.js +26 -13
  2. package/dist/bariweb.js +26 -13
  3. package/package.json +1 -1
package/dist/bariweb.iife.js CHANGED
@@ -24,7 +24,8 @@
24
24
 
25
25
  --bw-primary: #6d28d9;
26
26
  --bw-primary-light: #7c3aed;
27
- --bw-primary-fg: #ffffff;
27
+ --bw-primary-fg: #05050a; /* Changed default to charcoal */
28
+ --bw-primary-faded: rgba(109, 40, 217, 0.08);
28
29
  --bw-bg: #ffffff;
29
30
  --bw-fg: #0f172a;
30
31
  --bw-fg-muted: #64748b;
@@ -183,9 +184,10 @@
183
184
  .bw-tab:hover { background: var(--bw-bg-hover); color: var(--bw-fg); }
184
185
  .bw-tab[active] {
185
186
  background: var(--bw-primary);
186
- color: var(--bw-primary-fg);
187
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
187
+ color: var(--bw-primary-fg) !important;
188
+ box-shadow: none;
188
189
  }
190
+ .bw-tab[active] svg { color: var(--bw-primary-fg) !important; }
189
191
 
190
192
  /* ─── Content area ─── */
191
193
  .bw-content {
@@ -525,11 +527,11 @@
525
527
  user-select: none;
526
528
  overflow: hidden;
527
529
  }
528
- .settings-card:hover { border-color: var(--bw-primary); background: var(--bw-bg); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
530
+ .settings-card:hover { border-color: var(--bw-primary); background: var(--bw-bg-subtle); transform: translateY(-1px); }
529
531
  .settings-card[active] {
530
532
  border-color: var(--bw-primary);
531
- background: rgba(109, 40, 217, 0.06);
532
- box-shadow: 0 0 0 1px var(--bw-primary);
533
+ background: var(--bw-primary-faded);
534
+ box-shadow: inset 0 0 0 1px var(--bw-primary);
533
535
  }
534
536
  .settings-card[active] svg { color: var(--bw-primary); }
535
537
  .settings-card svg { width: 22px; height: 22px; color: var(--bw-fg-muted); transition: color 0.18s; }
@@ -549,7 +551,7 @@
549
551
  align-items: center;
550
552
  justify-content: center;
551
553
  }
552
- .active-badge svg { width: 10px; height: 10px; color: white; stroke-width: 3; }
554
+ .active-badge svg { width: 10px; height: 10px; color: var(--bw-primary-fg) !important; stroke-width: 3; }
553
555
 
554
556
  /* Color section */
555
557
  .color-section {
@@ -587,7 +589,7 @@
587
589
  color: var(--bw-fg-muted);
588
590
  transition: all 0.15s;
589
591
  }
590
- .color-tab[active] { background: var(--bw-primary); color: white; border-color: var(--bw-primary); }
592
+ .color-tab[active] { background: var(--bw-primary); color: var(--bw-primary-fg) !important; border-color: var(--bw-primary); }
591
593
 
592
594
  .hue-row {
593
595
  display: flex;
@@ -645,11 +647,11 @@
645
647
  min-height: 46px;
646
648
  }
647
649
  .ai-tool-btn:hover { border-color: var(--bw-primary); color: var(--bw-primary); background: rgba(109,40,217,0.04); }
648
- .ai-tool-btn.active { background: rgba(109,40,217,0.08); border-color: var(--bw-primary); color: var(--bw-primary); }
650
+ .ai-tool-btn.active { background: var(--bw-primary-faded); border-color: var(--bw-primary); color: var(--bw-primary); }
649
651
  .ai-tool-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
650
652
  .ai-tool-btn-label { flex: 1; }
651
- .ai-tool-badge { font-size: 10px; background: var(--bw-primary); color: white; padding: 2px 7px; border-radius: 99px; font-weight: 700; }
652
- .ai-tool-badge.on { background: #059669; }
653
+ .ai-tool-badge { font-size: 10px; background: var(--bw-primary); color: var(--bw-primary-fg); padding: 2px 7px; border-radius: 99px; font-weight: 700; }
654
+ .ai-tool-badge.on { background: #059669; color: var(--bw-fg, white); }
653
655
 
654
656
  /* ════════════════════════════════ */
655
657
  /* ADMIN PANEL */
@@ -681,7 +683,7 @@
681
683
  .admin-overlay input:focus { border-color: var(--bw-primary); }
682
684
  .admin-login-btn {
683
685
  width: 100%; padding: 12px; border-radius: var(--bw-radius-sm);
684
- background: var(--bw-primary); color: white; border: none;
686
+ background: var(--bw-primary); color: var(--bw-primary-fg) !important; border: none;
685
687
  font-weight: 700; font-size: 14px; cursor: pointer; margin-bottom: 8px;
686
688
  transition: all 0.2s;
687
689
  }
@@ -700,6 +702,17 @@
700
702
  }
701
703
  .auth-error { color: #ef4444; font-size: 12px; margin: 0 0 12px; }
702
704
  .admin-status { color: #059669; font-size: 14px; font-weight: 600; margin: 0 0 16px; }
705
+
706
+ /* Force all SVGs inside buttons to respect container color */
707
+ button svg {
708
+ color: inherit;
709
+ stroke: currentColor;
710
+ }
711
+
712
+ /* High specificity overrides for active states */
713
+ [active] svg, .active svg, .on svg {
714
+ color: inherit !important;
715
+ }
703
716
  `,mt=`bw-a11y-settings-v2`,U={monochrome:!1,darkHighContrast:!1,brightHighContrast:!1,lowSaturation:!1,highSaturation:!1,contrastMode:!1,customBgHue:null,customHeaderHue:null,customContentHue:null,activeColorTab:`background`,textScale:1,highlightHeaders:!1,enlargeButtons:!1,textSpacing:!1,dyslexicFont:!1,focusVisualizer:!1,cursorMagnifier:!1,animationsDisabled:!1,linkHighlight:!1},ht=class{constructor(e){this.settings={...U},(this.host=e).addController(this),this._loadSettings()}hostConnected(){this._applySettings()}_loadSettings(){let e=localStorage.getItem(mt);if(e)try{let t=JSON.parse(e);this.settings={...U,...t}}catch(e){console.error(`BariWeb: Failed to parse a11y settings`,e)}}_saveSettings(){localStorage.setItem(mt,JSON.stringify(this.settings)),this._applySettings(),this.host.requestUpdate()}_ensureGlobalStyles(){let e=`bw-global-a11y-styles`,t=document.getElementById(e);t||(t=document.createElement(`style`),t.id=e,document.head.appendChild(t)),t.textContent=`
704
717
  /* Global Filters */
705
718
  html {
@@ -1345,7 +1358,7 @@
1345
1358
  <!-- FAB Trigger -->
1346
1359
  <button class="trigger" @click=${this._toggle}
1347
1360
  aria-expanded=${this._isOpen} aria-label="Открыть/Закрыть меню доступности"
1348
- id="bw-trigger" style="position:fixed; bottom:24px; left:24px; width:60px; height:60px; border-radius:50%; background:var(--bw-primary,#6d28d9); color:white; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:auto; box-shadow:0 4px 20px rgba(109,40,217,0.4); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;">
1361
+ id="bw-trigger" style="position:fixed; bottom:24px; left:24px; width:60px; height:60px; border-radius:50%; background:var(--bw-primary, #6d28d9); color:var(--bw-primary-fg, #05050a); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:auto; box-shadow:0 4px 20px rgba(0,0,0,0.3); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;">
1349
1362
  ${this._isOpen?H.close:H.accessibility}
1350
1363
  </button>
1351
1364
  </div>
package/dist/bariweb.js CHANGED
@@ -1162,7 +1162,8 @@ var at = rt(K), q = (e) => F`${at(`
1162
1162
 
1163
1163
  --bw-primary: #6d28d9;
1164
1164
  --bw-primary-light: #7c3aed;
1165
- --bw-primary-fg: #ffffff;
1165
+ --bw-primary-fg: #05050a; /* Changed default to charcoal */
1166
+ --bw-primary-faded: rgba(109, 40, 217, 0.08);
1166
1167
  --bw-bg: #ffffff;
1167
1168
  --bw-fg: #0f172a;
1168
1169
  --bw-fg-muted: #64748b;
@@ -1321,9 +1322,10 @@ var at = rt(K), q = (e) => F`${at(`
1321
1322
  .bw-tab:hover { background: var(--bw-bg-hover); color: var(--bw-fg); }
1322
1323
  .bw-tab[active] {
1323
1324
  background: var(--bw-primary);
1324
- color: var(--bw-primary-fg);
1325
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
1325
+ color: var(--bw-primary-fg) !important;
1326
+ box-shadow: none;
1326
1327
  }
1328
+ .bw-tab[active] svg { color: var(--bw-primary-fg) !important; }
1327
1329
 
1328
1330
  /* ─── Content area ─── */
1329
1331
  .bw-content {
@@ -1663,11 +1665,11 @@ var at = rt(K), q = (e) => F`${at(`
1663
1665
  user-select: none;
1664
1666
  overflow: hidden;
1665
1667
  }
1666
- .settings-card:hover { border-color: var(--bw-primary); background: var(--bw-bg); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
1668
+ .settings-card:hover { border-color: var(--bw-primary); background: var(--bw-bg-subtle); transform: translateY(-1px); }
1667
1669
  .settings-card[active] {
1668
1670
  border-color: var(--bw-primary);
1669
- background: rgba(109, 40, 217, 0.06);
1670
- box-shadow: 0 0 0 1px var(--bw-primary);
1671
+ background: var(--bw-primary-faded);
1672
+ box-shadow: inset 0 0 0 1px var(--bw-primary);
1671
1673
  }
1672
1674
  .settings-card[active] svg { color: var(--bw-primary); }
1673
1675
  .settings-card svg { width: 22px; height: 22px; color: var(--bw-fg-muted); transition: color 0.18s; }
@@ -1687,7 +1689,7 @@ var at = rt(K), q = (e) => F`${at(`
1687
1689
  align-items: center;
1688
1690
  justify-content: center;
1689
1691
  }
1690
- .active-badge svg { width: 10px; height: 10px; color: white; stroke-width: 3; }
1692
+ .active-badge svg { width: 10px; height: 10px; color: var(--bw-primary-fg) !important; stroke-width: 3; }
1691
1693
 
1692
1694
  /* Color section */
1693
1695
  .color-section {
@@ -1725,7 +1727,7 @@ var at = rt(K), q = (e) => F`${at(`
1725
1727
  color: var(--bw-fg-muted);
1726
1728
  transition: all 0.15s;
1727
1729
  }
1728
- .color-tab[active] { background: var(--bw-primary); color: white; border-color: var(--bw-primary); }
1730
+ .color-tab[active] { background: var(--bw-primary); color: var(--bw-primary-fg) !important; border-color: var(--bw-primary); }
1729
1731
 
1730
1732
  .hue-row {
1731
1733
  display: flex;
@@ -1783,11 +1785,11 @@ var at = rt(K), q = (e) => F`${at(`
1783
1785
  min-height: 46px;
1784
1786
  }
1785
1787
  .ai-tool-btn:hover { border-color: var(--bw-primary); color: var(--bw-primary); background: rgba(109,40,217,0.04); }
1786
- .ai-tool-btn.active { background: rgba(109,40,217,0.08); border-color: var(--bw-primary); color: var(--bw-primary); }
1788
+ .ai-tool-btn.active { background: var(--bw-primary-faded); border-color: var(--bw-primary); color: var(--bw-primary); }
1787
1789
  .ai-tool-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
1788
1790
  .ai-tool-btn-label { flex: 1; }
1789
- .ai-tool-badge { font-size: 10px; background: var(--bw-primary); color: white; padding: 2px 7px; border-radius: 99px; font-weight: 700; }
1790
- .ai-tool-badge.on { background: #059669; }
1791
+ .ai-tool-badge { font-size: 10px; background: var(--bw-primary); color: var(--bw-primary-fg); padding: 2px 7px; border-radius: 99px; font-weight: 700; }
1792
+ .ai-tool-badge.on { background: #059669; color: var(--bw-fg, white); }
1791
1793
 
1792
1794
  /* ════════════════════════════════ */
1793
1795
  /* ADMIN PANEL */
@@ -1819,7 +1821,7 @@ var at = rt(K), q = (e) => F`${at(`
1819
1821
  .admin-overlay input:focus { border-color: var(--bw-primary); }
1820
1822
  .admin-login-btn {
1821
1823
  width: 100%; padding: 12px; border-radius: var(--bw-radius-sm);
1822
- background: var(--bw-primary); color: white; border: none;
1824
+ background: var(--bw-primary); color: var(--bw-primary-fg) !important; border: none;
1823
1825
  font-weight: 700; font-size: 14px; cursor: pointer; margin-bottom: 8px;
1824
1826
  transition: all 0.2s;
1825
1827
  }
@@ -1838,6 +1840,17 @@ var at = rt(K), q = (e) => F`${at(`
1838
1840
  }
1839
1841
  .auth-error { color: #ef4444; font-size: 12px; margin: 0 0 12px; }
1840
1842
  .admin-status { color: #059669; font-size: 14px; font-weight: 600; margin: 0 0 16px; }
1843
+
1844
+ /* Force all SVGs inside buttons to respect container color */
1845
+ button svg {
1846
+ color: inherit;
1847
+ stroke: currentColor;
1848
+ }
1849
+
1850
+ /* High specificity overrides for active states */
1851
+ [active] svg, .active svg, .on svg {
1852
+ color: inherit !important;
1853
+ }
1841
1854
  `, st = "bw-a11y-settings-v2", Y = {
1842
1855
  monochrome: !1,
1843
1856
  darkHighContrast: !1,
@@ -3219,7 +3232,7 @@ var _t = "bw-stt-lang-v1", vt = 200, yt = .015, bt = 1200, xt = 2e4, St = 350, Q
3219
3232
  <!-- FAB Trigger -->
3220
3233
  <button class="trigger" @click=${this._toggle}
3221
3234
  aria-expanded=${this._isOpen} aria-label="Открыть/Закрыть меню доступности"
3222
- id="bw-trigger" style="position:fixed; bottom:24px; left:24px; width:60px; height:60px; border-radius:50%; background:var(--bw-primary,#6d28d9); color:white; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:auto; box-shadow:0 4px 20px rgba(109,40,217,0.4); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;">
3235
+ id="bw-trigger" style="position:fixed; bottom:24px; left:24px; width:60px; height:60px; border-radius:50%; background:var(--bw-primary, #6d28d9); color:var(--bw-primary-fg, #05050a); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:auto; box-shadow:0 4px 20px rgba(0,0,0,0.3); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;">
3223
3236
  ${this._isOpen ? J.close : J.accessibility}
3224
3237
  </button>
3225
3238
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bariweb-widget",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "type": "module",
5
5
  "main": "./dist/bariweb.iife.js",
6
6
  "module": "./dist/bariweb.js",