rails_onboarding 0.7.2 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '02148dd5e0d60a6d6ac13ba3836f0643dd29e35021d42c7fde9253ee79d041f3'
-  data.tar.gz: e7432a5a0f8ba216053bb1a465a7a66daf705db75c408942c90879e112a2b77b
+  metadata.gz: 968d937235787bd7b4b096707cd9e44f2152d11c5b9d6f92f8f684d4b0807e98
+  data.tar.gz: f3b564a235899a551598ae48c9877ef5090261240a9e5b33cf0f63af6c155fc4
 SHA512:
-  metadata.gz: 1034bcf0f0e15a1f7a7b12b1bf246d182fba115bbf2ea04410e70aaedd80879911ea0a774ea194188b0ac6f4e834a381df307ab3b7cb05521fd26f52fe56cef3
-  data.tar.gz: 804e5be1c12dff7c2d218d2b08dc5b15f7850aeaae2c4073a96411174fc87e3008df2712650c834ca5af4cdcd88bcd5accda653a68b3e2a6c0934ec649a0e492
+  metadata.gz: 35466bcb9f4c22021d9a8012cb4f0fc0bf3a2b3ccaeedf270f0681711d1a686e41b6a3e102b6a5084955ca7b0c2bc5ad84203b284303604b1e27c5c93a032a58
+  data.tar.gz: 1674b9b08636d82c3d71fb78b80d8aae49d7f7510f91ff948dbbf642c79ddf21118248d465bce33b84e5630c24ee37b04cdfc2d30542047cc50fa2469210babd

data/app/assets/javascripts/rails_onboarding/progress_controller.js

@@ -149,8 +149,8 @@ export default class extends Controller {
       </div>
     `
 
-        // Position tooltip (top/left are viewport-relative and computed per
-        // call, so they stay inline; everything else lives in .step-tooltip)
+        // Position tooltip (top/left are computed per call, so they stay inline;
+        // everything else lives in .step-tooltip)
         document.body.appendChild(tooltip)
         this.positionTooltip(tooltip, targetElement)
 
@@ -179,8 +179,12 @@ export default class extends Controller {
             top = rect.top - tooltipRect.height - 8
         }
 
-        tooltip.style.top = `${top}px`
-        tooltip.style.left = `${left}px`
+        // The maths above is all in viewport space (getBoundingClientRect,
+        // window.innerWidth/Height), but .step-tooltip is `position: absolute`
+        // on document.body, so add the scroll offset when applying. See the same
+        // conversion in tooltip_controller.js#positionTooltip.
+        tooltip.style.top = `${top + window.scrollY}px`
+        tooltip.style.left = `${left + window.scrollX}px`
     }
 
     // Advance to next step (for testing/demo purposes)

data/app/assets/javascripts/rails_onboarding/tooltip_controller.js

@@ -784,9 +784,16 @@ export default class extends Controller {
         
         let { position, top, left, arrowPosition } = bestPosition
 
-        // Apply position
-        this.tooltip.style.top = `${top}px`
-        this.tooltip.style.left = `${left}px`
+        // Apply position, converting viewport coordinates to document ones.
+        // Everything above - getBoundingClientRect, the edge clamping in
+        // calculatePosition, the collision checks in scorePosition - works in
+        // viewport space, but .onboarding-tooltip is `position: absolute` on
+        // document.body, so top/left are resolved against the document. Without
+        // the scroll offset the tooltip lands a full scroll position away from
+        // its trigger. Absolute (not fixed) is deliberate: it keeps the tooltip
+        // glued to the trigger if the page scrolls while it's open.
+        this.tooltip.style.top = `${top + viewport.scrollY}px`
+        this.tooltip.style.left = `${left + viewport.scrollX}px`
         
         // Style arrow based on final position
         if (arrow) {

data/app/assets/stylesheets/rails_onboarding/accessibility.css

@@ -26,8 +26,8 @@
   position: absolute;
   top: -2.5rem;
   left: var(--onboarding-space-md);
-  background: var(--onboarding-primary);
-  color: white;
+  background: var(--onboarding-primary-fill);
+  color: var(--onboarding-on-primary);
   padding: var(--onboarding-space-sm) var(--onboarding-space-md);
   border-radius: 0.375rem;
   text-decoration: none;

data/app/assets/stylesheets/rails_onboarding/application.css

@@ -40,6 +40,19 @@
   --onboarding-primary: #6366f1;
   --onboarding-primary-hover: #4f46e5;
   --onboarding-secondary: #64748b;
+
+  /* The brand colour doing its other job: filling a surface that carries a
+     label - buttons, step markers, the progress bar, the tooltip bubble. It
+     defaults to --onboarding-primary, so a host that sets nothing sees exactly
+     what it saw before.
+     Set it when one value cannot do both. In a dark theme it usually cannot:
+     text on a dark page has to be light, a fill behind a light label has to be
+     dark, and against a #16151a background those requirements (luminance
+     >= 0.21 and <= 0.18) do not overlap at WCAG AA. Splitting them lets a host
+     keep readable brand text *and* a readable button, instead of choosing. */
+  --onboarding-primary-fill: var(--onboarding-primary);
+  --onboarding-primary-fill-hover: var(--onboarding-primary-hover);
+  --onboarding-on-primary: #ffffff;
   --onboarding-success: #10b981;
   --onboarding-warning: #f59e0b;
   --onboarding-danger: #ef4444;
@@ -173,9 +186,9 @@
 }
 
 .onboarding-banner-continue {
-  background: var(--onboarding-primary);
-  color: white;
-  border: 2px solid var(--onboarding-primary);
+  background: var(--onboarding-primary-fill);
+  color: var(--onboarding-on-primary);
+  border: 2px solid var(--onboarding-primary-fill);
   padding: var(--onboarding-space-sm) var(--onboarding-space-lg);
   border-radius: 0.5rem;
   font-weight: 600;
@@ -186,8 +199,8 @@
 }
 
 .onboarding-banner-continue:hover {
-  background: var(--onboarding-primary-hover);
-  border-color: var(--onboarding-primary-hover);
+  background: var(--onboarding-primary-fill-hover);
+  border-color: var(--onboarding-primary-fill-hover);
 }
 
 .onboarding-banner-skip {
@@ -236,7 +249,7 @@
 .onboarding-progress-fill {
   height: 100%;
   width: var(--onboarding-progress-width, 0%);
-  background: linear-gradient(90deg, var(--onboarding-primary), var(--onboarding-success));
+  background: linear-gradient(90deg, var(--onboarding-primary-fill), var(--onboarding-success));
   border-radius: 0.25rem;
   transition: width 0.3s ease;
 }
@@ -277,9 +290,9 @@
 }
 
 .progress-step.onboarding-current .step-marker {
-  background: var(--onboarding-primary);
-  border: 2px solid var(--onboarding-primary);
-  color: white;
+  background: var(--onboarding-primary-fill);
+  border: 2px solid var(--onboarding-primary-fill);
+  color: var(--onboarding-on-primary);
 }
 
 .progress-step.onboarding-completed .step-marker {
@@ -442,8 +455,8 @@
 }
 
 .time-estimate {
-  background: linear-gradient(135deg, var(--onboarding-primary), var(--onboarding-success));
-  color: white;
+  background: linear-gradient(135deg, var(--onboarding-primary-fill), var(--onboarding-success));
+  color: var(--onboarding-on-primary);
   padding: var(--onboarding-space-lg);
   border-radius: 0.75rem;
   text-align: center;
@@ -679,8 +692,8 @@
 }
 
 .feature-button {
-  background: var(--onboarding-primary);
-  color: white;
+  background: var(--onboarding-primary-fill);
+  color: var(--onboarding-on-primary);
   border: none;
   padding: var(--onboarding-space-sm) var(--onboarding-space-lg);
   border-radius: 0.5rem;
@@ -690,7 +703,7 @@
 }
 
 .feature-button:hover {
-  background: var(--onboarding-primary-hover);
+  background: var(--onboarding-primary-fill-hover);
   transform: translateY(-1px);
 }
 
@@ -729,9 +742,9 @@
 }
 
 .primary-action {
-  background: var(--onboarding-primary);
-  color: white;
-  border: 2px solid var(--onboarding-primary);
+  background: var(--onboarding-primary-fill);
+  color: var(--onboarding-on-primary);
+  border: 2px solid var(--onboarding-primary-fill);
   padding: var(--onboarding-space-md) var(--onboarding-space-xl);
   border-radius: 0.75rem;
   font-weight: 600;
@@ -745,8 +758,8 @@
 }
 
 .primary-action:hover:not(:disabled) {
-  background: var(--onboarding-primary-hover);
-  border-color: var(--onboarding-primary-hover);
+  background: var(--onboarding-primary-fill-hover);
+  border-color: var(--onboarding-primary-fill-hover);
   transform: translateY(-2px);
   box-shadow: var(--onboarding-shadow-lg);
 }
@@ -867,8 +880,8 @@
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 50%;
-  background: var(--onboarding-primary);
-  color: white;
+  background: var(--onboarding-primary-fill);
+  color: var(--onboarding-on-primary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -929,8 +942,8 @@
 }
 
 .close-help {
-  background: var(--onboarding-primary);
-  color: white;
+  background: var(--onboarding-primary-fill);
+  color: var(--onboarding-on-primary);
   border: none;
   padding: var(--onboarding-space-xs) var(--onboarding-space-md);
   border-radius: 0.375rem;

data/app/assets/stylesheets/rails_onboarding/mobile.css

@@ -490,7 +490,7 @@
   .onboarding-progress-fill,
   .time-estimate,
   .milestone-points {
-    background: var(--onboarding-primary);
+    background: var(--onboarding-primary-fill);
   }
 
   /* Disable hover animations on mobile */

data/app/assets/stylesheets/rails_onboarding/tooltips.css

@@ -169,8 +169,8 @@
 }
 
 .tooltip-action {
-  background: var(--onboarding-primary);
-  color: white;
+  background: var(--onboarding-primary-fill);
+  color: var(--onboarding-on-primary);
   border: none;
   padding: var(--onboarding-space-xs) var(--onboarding-space-sm);
   border-radius: 0.375rem;
@@ -181,7 +181,7 @@
 }
 
 .tooltip-action:hover {
-  background: var(--onboarding-primary-hover);
+  background: var(--onboarding-primary-fill-hover);
 }
 
 .tooltip-action.onboarding-secondary {
@@ -195,8 +195,8 @@
 
 /* Feature tooltips (specific to onboarding features) */
 .feature-tooltip {
-  background: linear-gradient(135deg, var(--onboarding-primary), var(--onboarding-success));
-  color: white;
+  background: linear-gradient(135deg, var(--onboarding-primary-fill), var(--onboarding-success));
+  color: var(--onboarding-on-primary);
   padding: var(--onboarding-space-lg);
   border-radius: 1rem;
   max-width: 24rem;

data/app/assets/stylesheets/rails_onboarding/utilities.css

@@ -152,7 +152,7 @@
 .onboarding-bg-primary { background-color: var(--onboarding-background); }
 .onboarding-bg-surface { background-color: var(--onboarding-surface); }
 .onboarding-bg-elevated { background-color: var(--onboarding-surface-elevated); }
-.onboarding-bg-brand { background-color: var(--onboarding-primary); }
+.onboarding-bg-brand { background-color: var(--onboarding-primary-fill); }
 .onboarding-bg-success { background-color: var(--onboarding-success); }
 .onboarding-bg-warning { background-color: var(--onboarding-warning); }
 .onboarding-bg-danger { background-color: var(--onboarding-danger); }

data/lib/rails_onboarding/version.rb

@@ -1,3 +1,3 @@
 module RailsOnboarding
-  VERSION = "0.7.2"
+  VERSION = "0.8.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_onboarding
 version: !ruby/object:Gem::Version
-  version: 0.7.2
+  version: 0.8.1
 platform: ruby
 authors:
 - David Lewis
@@ -282,7 +282,7 @@ licenses:
 metadata:
   allowed_push_host: https://rubygems.org
   homepage_uri: https://github.com/bunnahabhain/rails_onboarding
-  source_code_uri: https://github.com/bunnahabhain/rails_onboarding/tree/v0.7.2
+  source_code_uri: https://github.com/bunnahabhain/rails_onboarding/tree/v0.8.1
   changelog_uri: https://github.com/bunnahabhain/rails_onboarding/blob/master/docs/CHANGELOG.md
 rdoc_options: []
 require_paths: