contain-css-svelte 0.0.13 → 0.0.14

package/dist/sass/_affordances.scss

@@ -0,0 +1,51 @@
+
+@use 'functions' as fn;
+
+@mixin clickable($prefixes...) {
+    cursor: fn.var-with-fallbacks(--cursor,append($prefixes, pointer)...);
+    transition: filter,transform fn.var-with-fallbacks(--transition,append($prefixes,300ms)...);
+    &:hover {
+      filter: fn.var-with-fallbacks(--hover-filter, append($prefixes, brightness(1.4))...);
+      transform: fn.var-with-fallbacks(--hover-transform, append($prefixes, none)...);
+      
+    }
+    &:active {
+        filter: fn.var-with-fallbacks(--active-filter, append($prefixes, brightness(0.9))...);
+        transform: fn.var-with-fallbacks(--active-transform, append($prefixes, none)...);      
+      }
+    &:disabled {
+      cursor: fn.var-with-fallbacks(--disabled-cursor, append($prefixes, not-allowed)...);
+      transform: fn.var-with-fallbacks(--disabled-transform, append($prefixes, none)...);
+      filter: fn.var-with-fallbacks(--disabled-filter, append($prefixes, grayscale(0.5))...);
+    }
+  }
+  
+  @mixin custom-scrollbar($prefixes...) {
+    overflow-y: auto;
+  
+    // Customizing the scrollbar
+    &::-webkit-scrollbar {
+      width: fn.var-with-fallbacks(--scrollbar-width, append($prefixes, var(--space-md))...);
+      height: fn.var-with-fallbacks(--scrollbar-height, append($prefixes, var(--gap))...);
+    }
+  
+    &::-webkit-scrollbar-track {
+      background: fn.var-with-fallbacks(--scrollbar-track-bg, append($prefixes, var(--bg))...);
+    }
+  
+    &::-webkit-scrollbar-thumb {
+      background: fn.var-with-fallbacks(--scrollbar-thumb-bg, append($prefixes, var(--stripe-bg))...);
+  
+      border-radius: fn.var-with-fallbacks(--scrollbar-thumb-radius, append($prefixes, var(--border-radius))...);
+  
+      &:hover {
+        background: fn.var-with-fallbacks(--scrollbar-thumb-hover-bg, append($prefixes, var(--secondary-bg))...);
+        
+      }
+    }
+  
+    // For Firefox
+    scrollbar-width: fn.var-with-fallbacks(--scrollbar-width, append($prefixes, thin)...);
+    scrollbar-color: fn.var-with-fallbacks(--scrollbar-thumb-bg, append($prefixes, #888)...) fn.var-with-fallbacks(--scrollbar-track-bg, append($prefixes, var(--border-color))...);
+  }
+  

package/dist/sass/_box.scss

@@ -0,0 +1,112 @@
+
+@use 'functions' as fn;
+
+@mixin padding-props ($prefixes...) {
+    padding: fn.var-with-fallbacks(--padding, append($prefixes, 4px)...);
+  }
+  
+  @mixin border-props-border ($prefixes...) {
+    border: fn.var-with-fallbacks(
+      --border, 
+      append(
+        $prefixes, 
+        var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))
+      )...);  
+    $directions: (
+      top,
+      right,
+      bottom,
+      left
+    );
+    $rectProps : (border);
+  
+    // Loop through each direction
+    @each $dir in $directions {
+      // Apply prop for each direction
+       @each $p in $rectProps {
+        /* #{$p}-#{$dir}: fn.var-with-fallbacks(--#{$p}-#{$dir},
+          append($prefixes,          
+            fn.var-with-fallbacks(--border,$prefixes...)
+          )...) */
+      } 
+    }
+  }
+  @mixin border-props-none ($prefixes...) {
+    border: fn.var-with-fallbacks(--border, append($prefixes,inherit)...);
+    $directions: (
+      top,
+      right,
+      bottom,
+      left
+    );
+  $rectProps : (border);
+  
+  // Loop through each direction
+  @each $dir in $directions {
+  
+    // Apply prop for each direction
+    @each $p in $rectProps {
+      #{$p}-#{$dir}: fn.var-with-fallbacks(--#{$p}-#{$dir},
+        append($prefixes,
+          fn.var-with-fallbacks(--border,append($prefixes,none)...)
+        )...);
+    }
+  }
+  }
+  
+  @mixin box-props-square-border($prefixes...) {
+    box-sizing: border-box;
+    
+    @include border-props-border($prefixes...);
+    @include padding-props($prefixes...);
+    border-radius: fn.var-with-fallbacks(--square-radius, append($prefixes, 0)...);
+  }
+  
+  @mixin box-props-square($prefixes...) {
+    box-sizing: border-box;   
+    @include border-props-none($prefixes...);
+    @include padding-props($prefixes...);
+    border-radius: fn.var-with-fallbacks(--square-radius, append($prefixes, 0)...);
+  }
+  
+  @mixin box-props($prefixes...) {
+    // Using the fn.var-with-fallbacks function for each property
+    box-sizing: border-box;
+    @include padding-props($prefixes...);
+    @include border-props-none($prefixes...);
+    border-radius: fn.var-with-fallbacks(--border-radius, append($prefixes,none)...);
+  }
+  
+  @mixin box-props-border($prefixes...) {
+    box-sizing: border-box;
+    @include border-props-border($prefixes..., var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)));
+    @include padding-props($prefixes...);
+    border-radius: fn.var-with-fallbacks(--radius, append($prefixes, 0)...); 
+  }
+  
+  @mixin box-props-bottom ($prefixes...) {
+    // Using the fn.var-with-fallbacks function for each property
+    box-sizing: border-box;
+    @include padding-props($prefixes...);
+    @include border-props-none($prefixes...);
+    border-bottom-right-radius: fn.var-with-fallbacks(--border-radius, $prefixes...);
+    border-bottom-left-radius: fn.var-with-fallbacks(--border-radius, $prefixes...);
+  }
+  @mixin box-props-top ($prefixes...) {
+    // Using the fn.var-with-fallbacks function for each property
+    box-sizing: border-box;
+    @include padding-props($prefixes...);
+    @include border-props-none($prefixes...);  
+    border-top-right-radius: fn.var-with-fallbacks(--border-radius, $prefixes...);
+    border-top-left-radius: fn.var-with-fallbacks(--border-radius, $prefixes...);
+  }
+  
+  @mixin box-shadow($prefixes...) {  
+    //works:  
+    $shadow-distance: fn.var-with-fallbacks(--shadow-distance, append($prefixes, var(--space-md))...);
+    $shadow-blur: fn.var-with-fallbacks(--shadow-blur, append($prefixes, var(--space))...);
+    $shadow-color: fn.var-with-fallbacks(--shadow-color, append($prefixes, rgba(127, 127, 127, 0.4))...);
+    
+    box-shadow: $shadow-distance $shadow-distance $shadow-blur $shadow-color;
+  }
+  

package/dist/sass/_color.scss

@@ -0,0 +1,8 @@
+@use 'functions' as fn;
+
+@mixin color-props ($prefixes...) {
+    background: fn.var-no-fallbacks(--bg, $prefixes...);
+    color: fn.var-no-fallbacks(--fg, $prefixes...);  
+    --link-bg: #{fn.vars(link-bg, $prefixes...)};
+    --link-fg: #{fn.vars(link-fg, $prefixes...)};
+  }

package/dist/sass/_functions.scss

@@ -0,0 +1,113 @@
+
+@function var-with-fallbacks($base-var, $args...) {
+    // Remove the initial -- from the base variable for concatenation purposes
+    $base-var-name: str-slice($base-var, 3);
+    $fallback : nth($args,length($args));
+  
+    // Initialize the result with the final fallback value
+    $result: var($base-var,$fallback);
+  
+    // Check if only one argument (apart from $base-var) is provided
+    @if length($args)==1 {
+      // Only one argument means it's the fallback value
+      @return var(#{$base-var}, #{$fallback});
+    }
+  
+    // Iterate through the prefixes in reverse order
+    @for $i from length($args)-1 through 1 {
+      $prefix: nth($args,$i);
+      // Construct the variable name by concatenating the prefix and base variable name
+      // e.g., --card-bg if $prefix is 'card' and $base-var-name is 'bg'
+      $prefixed-var: unquote('--#{$prefix}-#{$base-var-name}');
+      // Nest the current prefixed variable as a fallback to the current result
+      $result: var(#{$prefixed-var}, #{$result});
+    }
+  
+    // Return the final CSS var() function with all fallbacks
+    // e.g., var(--card-bg, var(--container-bg, var(--bg, white)))
+    @return #{$result};
+  }
+  
+  @function var-no-fallbacks($base-var, $args...) {
+    // Remove the initial -- from the base variable for concatenation purposes
+    $base-var-name: str-slice($base-var, 3);  
+  
+    // Initialize the result with the final fallback value
+    $result: var($base-var, unset);
+  
+    // Iterate through the prefixes in reverse order
+    @for $i from length($args) through 1 {
+      $prefix: nth($args, $i);
+      // Construct the variable name by concatenating the prefix and base variable name
+      // e.g., --card-bg if $prefix is 'card' and $base-var-name is 'bg'
+      $prefixed-var: unquote('--#{$prefix}-#{$base-var-name}');
+      // Nest the current prefixed variable as a fallback to the current result
+      $result: var(#{$prefixed-var}, #{$result});
+    }
+  
+    // Return the final CSS var() function with all fallbacks
+    // e.g., var(--card-bg, var(--container-bg, var(--bg))
+    @return #{$result};
+  }
+  
+  @function generate-var-name($prefix, $suffix) {
+    @return unquote('--#{$prefix}-#{$suffix}');
+  }
+  
+  @function map-prefixes($base, $prefixes) {
+    $result: (
+    );
+  
+    @each $prefix in $prefixes {
+      $result: append($result, unquote('#{$prefix}-#{$base}'), comma);
+    }
+  
+    @return $result;
+  }
+  
+  @function map-prefixes-include-base ($base, $prefixes) {
+    $result: (
+      $base
+    );
+  
+  @each $prefix in $prefixes {
+    $result: append($result, unquote('#{$prefix}-#{$base}'), comma);
+  }
+  
+  @return $result;
+  }
+  
+  
+  @function vars ($suffix, $args...) {
+    // Initialize the result with the first prefixed variable
+    $prefix: nth($args, length($args));
+    $result: var(generate-var-name($prefix, $suffix), inherit);
+  
+    // Iterate through the rest of the prefixes
+    @for $i from length($args) through 1 {
+      $prefix: nth($args, $i);
+      $prefixed-var: generate-var-name($prefix,$suffix);
+      // Nest the current prefixed variable as a fallback to the current result
+      $result: var(#{$prefixed-var}, #{$result});
+    }
+  
+    // Return the final CSS var() function with all fallbacks
+    @return #{$result};
+  }
+  
+  @function vars-suffix-fallback ($suffix, $args...) {
+    // Initialize the result with the first prefixed variable
+    $prefix: nth($args, length($args));
+    $result: var(--#{$suffix}, inherit);
+  
+    // Iterate through the rest of the prefixes
+    @for $i from length($args) through 1 {
+      $prefix: nth($args, $i);
+      $prefixed-var: generate-var-name($prefix, $suffix);
+      // Nest the current prefixed variable as a fallback to the current result
+      $result: var(#{$prefixed-var}, #{$result});
+    }
+  
+    // Return the final CSS var() function with all fallbacks
+    @return #{$result};
+  }