@courtneyring/components-library 1.0.30 → 1.0.32

package/src/styles/_reveal.scss

@@ -0,0 +1,93 @@
+// _reveal.scss
+// Mixins and base styles for useReveal, useRevealGroup, useRevealChildren
+// ------------------------------------------------------------------
+// Usage:
+//   @use "reveal";
+//
+//   .myElement { @include reveal.fade-up; }
+//   .myElement { @include reveal.fade-in; }
+//   .myElement { @include reveal.fade-left; }
+//   .myElement { @include reveal.fade-right; }
+//   .myElement { @include reveal.scale-up; }
+
+@mixin base {
+    transition-delay: var(--reveal-delay, 0s);
+
+    &.is-visible {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+// Fade up (most common — replaces gsap y: 30)
+@mixin fade-up($duration: 0.6s, $ease: ease, $distance: 30px) {
+    opacity: 0;
+    transform: translateY($distance);
+    transition: opacity $duration $ease, transform $duration $ease;
+    @include base;
+}
+
+// Fade in (opacity only)
+@mixin fade-in($duration: 0.6s, $ease: ease) {
+    opacity: 0;
+    transition: opacity $duration $ease;
+    @include base;
+}
+
+// Fade from left
+@mixin fade-left($duration: 0.6s, $ease: ease, $distance: 24px) {
+    opacity: 0;
+    transform: translateX(-$distance);
+    transition: opacity $duration $ease, transform $duration $ease;
+    @include base;
+}
+
+// Fade from right
+@mixin fade-right($duration: 0.6s, $ease: ease, $distance: 24px) {
+    opacity: 0;
+    transform: translateX($distance);
+    transition: opacity $duration $ease, transform $duration $ease;
+    @include base;
+}
+
+// Scale up
+@mixin scale-up($duration: 0.6s, $ease: ease, $from: 0.92) {
+    opacity: 0;
+    transform: scale($from);
+    transition: opacity $duration $ease, transform $duration $ease;
+    @include base;
+}
+
+// Reduced motion override — put this once at the root level
+@mixin reduced-motion-reset {
+    @media (prefers-reduced-motion: reduce) {
+        * {
+            animation-duration: 0.01ms !important;
+            transition-duration: 0.01ms !important;
+        }
+    }
+}
+
+
+
+@mixin fade-from-white {
+    @keyframes fadeOutWhite {
+        0% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: white;
+        animation: fadeOutWhite 3s ease forwards;
+        z-index: 1;
+    }
+}

package/src/styles/_sizes.scss

@@ -0,0 +1,192 @@
+@use "sass:string";
+@use "sass:map";
+@use "breakpoints";
+@use "sass:list";
+// @use 'mixins';
+
+$container-padding-vals: (
+  xxs: (
+    h: 20,
+    v: 40,
+  ),
+  xs: (
+    h: 30,
+    v: 50,
+  ),
+  sm: (
+    h: 30,
+    v: 50,
+  ),
+  md-portrait: (
+    h: 30,
+    v: 50,
+  ),
+  md-landscape: (
+    h: 30,
+    v: 30,
+  ),
+  lg: (h: 50,
+    v: 70,
+  ),
+  xl: (h: 100,
+    v: 50,
+  ),
+  xxl: (h: 150,
+    v: 150,
+  ),
+);
+
+$container-padding-mobile: 20px;
+$container-padding-tablet: 50px 30px; //768+
+$container-padding-desktop-small: 100px; //1200+
+$container-padding-desktop-large: 150px; //1920+
+
+$container-max-width-xsmall: 1000px;
+$container-max-width-small: 1200px;
+$container-max-width: 1400px;
+$container-max-width-wide: 1800px;
+
+// @mixin respond($bp) {
+//   @media (min-width: map.get(breakpoints.$breakpoints, $bp)) {
+//     @content;
+//   }
+// }
+
+@mixin respond($bp, $orientation: null) {
+  $width: map.get(breakpoints.$breakpoints, $bp);
+
+  @if $width {
+    $media: "(min-width: #{$width})";
+
+    @if $orientation {
+      $media: "#{$media} and (orientation: #{$orientation})";
+    }
+
+    @media #{$media} {
+      @content;
+    }
+  }
+}
+
+@function parse-breakpoint-key($key) {
+  $parts: string.split($key, "-");
+
+  $bp: list.nth($parts, 1);
+  $orientation: if(list.length($parts) > 1, list.nth($parts, 2), null);
+
+  @return (bp: $bp, orientation: $orientation);
+}
+
+@mixin container-padding($selector, $exclude...) {
+  @each $key, $val in $container-padding-vals {
+    $parsed: parse-breakpoint-key($key);
+
+    $bp: map.get($parsed, bp);
+    $orientation: map.get($parsed, orientation);
+
+    @include respond($bp, $orientation) {
+
+      // @include respond($key) {
+      #{$selector} {
+        $h: map.get($val, h);
+        $v: map.get($val, v);
+
+        padding: #{$v}px #{$h}px;
+        scroll-margin-top: #{$v}px;
+      }
+    }
+  }
+
+  @each $direction in $exclude {
+    #{$selector} {
+      padding-#{$direction}: 0px;
+    }
+  }
+}
+
+//TODO: Fix me
+
+@function get-container-padding($bp, $orientation, $axis) {
+  // 1. Try size + orientation first
+  $key: if($orientation, "#{$bp}-#{$orientation}", $bp);
+  $val: map.get($container-padding-vals, $key);
+
+  @if $val {
+    @return map.get($val, $axis);
+  }
+
+  // 2. Try size only
+  $val: map.get($container-padding-vals, $bp);
+
+  @if $val {
+    @return map.get($val, $axis);
+  }
+
+  // 3. Fallback to smaller sizes (assumes $container-padding-vals is ordered small → large)
+  $found: null;
+
+  @each $k, $v in $container-padding-vals {
+
+    // stop at current or smaller size
+    @if index(map-keys($container-padding-vals), $k) <=index(map-keys($container-padding-vals), $bp) {
+      $found: $v;
+    }
+  }
+
+  @if $found {
+    @return map.get($found, $axis);
+  }
+
+  // 4. Default to 0 if nothing found
+  @return 0;
+}
+
+@mixin override-container($selector,
+  $vertical: true,
+  $horizontal: true,
+  $sizes,
+  $resets) {
+  @each $bp in $sizes {
+    $parsed: parse-breakpoint-key($bp);
+
+    $bp: map.get($parsed, bp);
+    $orientation: map.get($parsed, orientation);
+
+    @include respond($bp, $orientation) {
+
+      @if $vertical {
+        $v: get-container-padding($bp, $orientation, v);
+
+        #{$selector} {
+          margin-top: -#{$v}px;
+          margin-bottom: -#{$v}px;
+        }
+      }
+
+      @if $horizontal {
+        $h: get-container-padding($bp, $orientation, h);
+
+        #{$selector} {
+          width: calc(100% + #{$h * 2}px);
+          margin-left: -#{$h}px;
+        }
+      }
+    }
+  }
+
+  @each $bp in $resets {
+    $parsed: parse-breakpoint-key($bp);
+
+    $bp: map.get($parsed, bp);
+    $orientation: map.get($parsed, orientation);
+
+    @include respond($bp, $orientation) {
+      #{$selector} {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        width: 100%;
+        margin-left: 0px;
+      }
+    }
+  }
+}

package/src/styles/globals.scss

@@ -0,0 +1,77 @@
+@use "fonts";
+// @use './mixins';
+@use './breakpoints';
+// @use './colors';
+// @use './fonts';
+// @use './sizes';
+
+// html {
+//     overflow: hidden;
+//     height: 100%;
+// }
+
+// body {
+//     height: 100%;
+//     overflow: auto;
+// }
+
+html,
+body {
+  overscroll-behavior: none; /* prevents scroll chaining / overscroll glow */
+  height: 100%;
+}
+
+p,
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
+strong {
+  @include fonts.type("strong");
+}
+
+small {
+  @include fonts.type("small");
+  font-style: italic;
+}
+
+#rsvpify-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.typography--h2 {
+  @include fonts.type('h2');
+}
+.typography--h3 {
+  @include fonts.type('h3');
+}
+.typography--h4 {
+  // margin-top: 0;
+  @include fonts.type('h4');
+}
+
+.typography--body {
+  @include fonts.type('body');
+}
+
+.typography--strong {
+  @include fonts.type('strong');
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.mobile-break {
+  display: inline;
+}
+
+
+@include breakpoints.md {
+  .mobile-break {
+    display: none;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1 @@
+@forward 'breakpoints';

package/src/styles/variables.module.scss

@@ -0,0 +1,20 @@
+// @use './_colors' as *;
+@use "sass:string";
+@use "colors";
+
+$theme-colors: (
+  "colorPrimaryDark": colors.$color-primary-dark,
+  "colorPrimaryMedium": colors.$color-primary-medium,
+  "colorPrimaryLight": colors.$color-primary-light,
+  "colorSecondary": colors.$color-secondary,
+  "colorNeutralDark": colors.$color-neutral-dark,
+  "colorNeutralMedium": colors.$color-neutral-medium,
+  "colorNeutralLight": colors.$color-neutral-light,
+  "colorWhite": colors.$color-white,
+);
+
+:export {
+  @each $key, $value in $theme-colors {
+    #{string.unquote($key)}: $value;
+  }
+}