contain-css-svelte 0.0.13 → 0.0.15

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};
+  }

package/dist/sass/_mixins.scss

@@ -1,348 +1,10 @@
 @import 'containers';
-
-@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 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};
-}
-
-@mixin color-props ($prefixes...) {
-  background: var-no-fallbacks(--bg, $prefixes...);
-  color: var-no-fallbacks(--fg, $prefixes...);  
-  --link-bg: #{vars(link-bg, $prefixes...)};
-  --link-fg: #{vars(link-fg, $prefixes...)};
-}
-
-@mixin typography-props-bare($prefixes...) {
-  font-family: vars(font-family, $prefixes...);
-  text-transform: vars(text-transform, $prefixes...);
-  text-decoration: vars(text-decoration, $prefixes...);
-  font-size: vars(font-size, $prefixes...);
-  font-weight: vars(font-weight, $prefixes...);
-  line-height: vars(line-height, $prefixes...);
-  letter-spacing: vars(letter-spacing, $prefixes...);
-  text-indent: vars(indent, $prefixes...);
-  font-variant: vars(font-variant, $prefixes...);
-  text-align: vars(text-align, $prefixes...);
-}
-
-@mixin typography-props ($prefixes...) {
-  font-family: var-no-fallbacks(--font-family, $prefixes...);
-  text-transform: var-no-fallbacks(--text-transform, $prefixes...);
-  text-decoration: var-no-fallbacks(--text-decoration, $prefixes...);
-  font-size: var-no-fallbacks(--font-size, $prefixes...);
-  font-weight: var-no-fallbacks(--font-weight, $prefixes...);
-  line-height: var-no-fallbacks(--line-height, $prefixes...);
-  letter-spacing: var-no-fallbacks(--letter-spacing, $prefixes...);
-  margin-top: var-no-fallbacks(--margin, $prefixes...);
-  margin-top: var-no-fallbacks(--margin-top, $prefixes...);
-  margin-bottom: var-no-fallbacks(--margin, $prefixes...);
-  margin-bottom: var-no-fallbacks(--margin-bottom, $prefixes...);
-  text-indent: var-no-fallbacks(--indent, $prefixes...);
-  font-variant: var-no-fallbacks(--font-variant, $prefixes...);
-  text-align: var-no-fallbacks(--text-align, $prefixes...);
-}
-
-@mixin typography-container-props ($prefixes...) {
-
-  max-width: var-with-fallbacks(--line-width, append($prefixes, unset)...);
-  margin-left: auto;
-  margin-right: auto;
-  font-family: var-with-fallbacks(--body-font-family, append($prefixes, var(--font-family))...);
-
-  @include typography-props($prefixes...);  
-  & :global(p),:global(blockquote),:global(dl),:global(ul),:global(ol), {
-    max-width: var-with-fallbacks(--line-width, append($prefixes, 40em)...);
-    font-family: var-with-fallbacks(--body-font-family, append($prefixes, var(--font-family))...);
-    line-height: var-with-fallbacks(--line-height, append($prefixes, 1.5)...);
-    margin-left: auto;
-    margin-right: auto;
-    font-weight: var-no-fallbacks(--body-font-weight, $prefixes...);
-  }  
-  & :global(h1),
-   :global(h2),
-   :global(h3),
-   :global(h4),
-   :global(h5),
-   :global(h6) {
-    
-    @include color-props(heading);
-    max-width: var-with-fallbacks(--line-width, append($prefixes, unset)...);
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: var-with-fallbacks(--heading-margin-bottom, append($prefixes, 0)...);
-    margin-top: var-with-fallbacks(--heading-margin-top, append($prefixes, 1.5em)...);
-  }  
-  & :global(p) {
-    @include typography-props-bare(
-      append(map-prefixes(
-          paragraph,
-          $prefixes
-      ),paragraph)...);
-  }
-  &   :global(p:first-of-type),
-    :global(h1 + p),
-    :global(h2 + p),
-    :global(h3 + p),
-    :global(h4 + p),
-    :global(h5 + p),
-    :global(h6 + p) {
-    @include typography-props-bare(
-      append(map-prefixes(
-          first-paragraph,
-          $prefixes
-      ),first-paragraph)...);
-    }
-  & :global(p:first-of-type::first-line) {
-    @include typography-props-bare(
-      append(map-prefixes(
-          first-line,
-          $prefixes
-      ),first-line)...);
-    
-  }
-
-  & :global(p:first-of-type::first-letter) {    
-    @include typography-props-bare(
-      map-prefixes(
-        first-letter,
-        $prefixes
-      )...);
-    @include color-props(first-letter,
-      first-line,
-      );
-  }  
-}
-
-@mixin padding-props ($prefixes...) {
-  padding: var-with-fallbacks(--padding, append($prefixes, 4px)...);
-}
-
-@mixin border-props-border ($prefixes...) {
-  border: 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}: var-with-fallbacks(--#{$p}-#{$dir},
-        append($prefixes,          
-          var-with-fallbacks(--border,$prefixes...)
-        )...) */
-    } 
-  }
-}
-@mixin border-props-none ($prefixes...) {
-  border: 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}: var-with-fallbacks(--#{$p}-#{$dir},
-      append($prefixes,
-        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: 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: var-with-fallbacks(--square-radius, append($prefixes, 0)...);
-}
-
-@mixin box-props($prefixes...) {
-  // Using the var-with-fallbacks function for each property
-  box-sizing: border-box;
-  @include padding-props($prefixes...);
-  @include border-props-none($prefixes...);
-  border-radius: 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: var-with-fallbacks(--radius, append($prefixes, 0)...); 
-}
-
-@mixin box-props-bottom ($prefixes...) {
-  // Using the var-with-fallbacks function for each property
-  box-sizing: border-box;
-  @include padding-props($prefixes...);
-  @include border-props-none($prefixes...);
-  border-bottom-right-radius: var-with-fallbacks(--border-radius, $prefixes...);
-  border-bottom-left-radius: var-with-fallbacks(--border-radius, $prefixes...);
-}
-@mixin box-props-top ($prefixes...) {
-  // Using the var-with-fallbacks function for each property
-  box-sizing: border-box;
-  @include padding-props($prefixes...);
-  @include border-props-none($prefixes...);  
-  border-top-right-radius: var-with-fallbacks(--border-radius, $prefixes...);
-  border-top-left-radius: var-with-fallbacks(--border-radius, $prefixes...);
-}
-
-@mixin box-shadow($prefixes...) {  
-  //works:  
-  $shadow-distance: var-with-fallbacks(--shadow-distance, append($prefixes, var(--space-md))...);
-  $shadow-blur: var-with-fallbacks(--shadow-blur, append($prefixes, var(--space))...);
-  $shadow-color: var-with-fallbacks(--shadow-color, append($prefixes, rgba(127, 127, 127, 0.4))...);
-  
-  box-shadow: $shadow-distance $shadow-distance $shadow-blur $shadow-color;
-}
-
-@mixin clickable($prefixes...) {
-  cursor: var-with-fallbacks(--cursor,append($prefixes, pointer)...);
-  transition: filter,transform var-with-fallbacks(--transition,append($prefixes,300ms)...);
-  &:hover {
-    filter: var-with-fallbacks(--hover-filter, append($prefixes, brightness(1.4))...);
-    transform: var-with-fallbacks(--hover-transform, append($prefixes, none)...);
-    
-  }
-  &:active {
-      filter: var-with-fallbacks(--active-filter, append($prefixes, brightness(0.9))...);
-      transform: var-with-fallbacks(--active-transform, append($prefixes, none)...);      
-    }
-}
-
-@mixin custom-scrollbar($prefixes...) {
-  overflow-y: auto;
-
-  // Customizing the scrollbar
-  &::-webkit-scrollbar {
-    width: var-with-fallbacks(--scrollbar-width, append($prefixes, var(--space-md))...);
-    height: var-with-fallbacks(--scrollbar-height, append($prefixes, var(--gap))...);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var-with-fallbacks(--scrollbar-track-bg, append($prefixes, var(--bg))...);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var-with-fallbacks(--scrollbar-thumb-bg, append($prefixes, var(--stripe-bg))...);
-
-    border-radius: var-with-fallbacks(--scrollbar-thumb-radius, append($prefixes, var(--border-radius))...);
-
-    &:hover {
-      background: var-with-fallbacks(--scrollbar-thumb-hover-bg, append($prefixes, var(--secondary-bg))...);
-      
-    }
-  }
-
-  // For Firefox
-  scrollbar-width: var-with-fallbacks(--scrollbar-width, append($prefixes, thin)...);
-  scrollbar-color: var-with-fallbacks(--scrollbar-thumb-bg, append($prefixes, #888)...) var-with-fallbacks(--scrollbar-track-bg, append($prefixes, var(--border-color))...);
-}
+@import 'functions';
+@import 'color';
+@import 'typography';
+@import 'box';
+@import 'affordances';
+@import 'responsive';
 
 /* Convenience groupings */
 
@@ -354,77 +16,3 @@ $rectProps : (border);
     @content
   }
 }
-/* Warning: because we define a fallback
-  media query, the media query can override the container
-  if we stack a bunch of these in a row and aren't thoughtful about the order.
-  Put min-width queries *after* max-width queries so that smaller
-  container queries don't get their styles overridden by large media queries.
-  */
-    @mixin responsive-content($max-width: null, $min-width: null, $max-height: null, $min-height: null) {
-  
-      // Max-width and Max-height
-      @if $max-width and $max-height {
-        @media (max-width: #{$max-width}) and (max-height: #{$max-height}) {
-          @content;
-        }
-  
-        @container (max-width: #{$max-width}) and (max-height: #{$max-height}) {
-          @content;
-        }
-      }
-  
-      // Max-width only
-      @else if $max-width {
-        @media (max-width: #{$max-width}) {
-          @content;
-        }
-  
-        @container (max-width: #{$max-width}) {
-          @content;
-        }
-      }
-  
-      // Max-height only
-      @else if $max-height {
-        @media (max-height: #{$max-height}) {
-          @content;
-        }
-  
-        @container (max-height: #{$max-height}) {
-          @content;
-        }
-      }
-  
-      // Min-width and Min-height
-      @if $min-width and $min-height {
-        @media (min-width: #{$min-width}) and (min-height: #{$min-height}) {
-          @content;
-        }
-  
-        @container (min-width: #{$min-width}) and (min-height: #{$min-height}) {
-          @content;
-        }
-      }
-  
-      // Min-width only
-      @else if $min-width {
-        @media (min-width: #{$min-width}) {
-          @content;
-        }
-  
-        @container (min-width: #{$min-width}) {
-          @content;
-        }
-      }
-  
-      // Min-height only
-      @else if $min-height {
-        @media (min-height: #{$min-height}) {
-          @content;
-        }
-  
-        @container (min-height: #{$min-height}) {
-          @content;
-        }
-      }
-    }

package/dist/sass/_responsive.scss

@@ -0,0 +1,75 @@
+
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+  @mixin responsive-content($max-width: null, $min-width: null, $max-height: null, $min-height: null) {
+
+    // Max-width and Max-height
+    @if $max-width and $max-height {
+      @media (max-width: #{$max-width}) and (max-height: #{$max-height}) {
+        @content;
+      }
+
+      @container (max-width: #{$max-width}) and (max-height: #{$max-height}) {
+        @content;
+      }
+    }
+
+    // Max-width only
+    @else if $max-width {
+      @media (max-width: #{$max-width}) {
+        @content;
+      }
+
+      @container (max-width: #{$max-width}) {
+        @content;
+      }
+    }
+
+    // Max-height only
+    @else if $max-height {
+      @media (max-height: #{$max-height}) {
+        @content;
+      }
+
+      @container (max-height: #{$max-height}) {
+        @content;
+      }
+    }
+
+    // Min-width and Min-height
+    @if $min-width and $min-height {
+      @media (min-width: #{$min-width}) and (min-height: #{$min-height}) {
+        @content;
+      }
+
+      @container (min-width: #{$min-width}) and (min-height: #{$min-height}) {
+        @content;
+      }
+    }
+
+    // Min-width only
+    @else if $min-width {
+      @media (min-width: #{$min-width}) {
+        @content;
+      }
+
+      @container (min-width: #{$min-width}) {
+        @content;
+      }
+    }
+
+    // Min-height only
+    @else if $min-height {
+      @media (min-height: #{$min-height}) {
+        @content;
+      }
+
+      @container (min-height: #{$min-height}) {
+        @content;
+      }
+    }
+  }