@sapphire-ion/framework 0.30.0

package/themes/styles/mixins.scss

@@ -0,0 +1,467 @@
+@use "sass:math";
+
+@for $i from 1 through 100 {
+  .modal-w-#{$i}{
+      @media (orientation: landscape) {
+          --width: #{$i + '%'};
+      }
+  }
+}
+@for $i from 1 through 100 {
+  .modal-h-#{$i}{
+      @media (orientation: landscape) {
+          --height: #{$i + '%'};
+      }
+  }
+}
+@for $i from 1 through 100 {
+  .modal-size-#{$i}{
+      @media (orientation: landscape) {
+          --height: #{$i + '%'};
+          --width: #{$i + '%'};
+      }
+  }
+}
+
+$colors: primary, secondary, tertiary, success, warning, danger, light, medium, dark, translucid;
+$steps : 5, 7, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95;
+//[ Text Colors ]
+@mixin text-colors($colors){
+	@each $color in $colors {
+		.text-#{$color} {
+			color: var(--ion-color-#{$color})
+		}
+    .hover\:text-#{$color} {
+      @apply transition-all ease-in-out duration-300;
+      &:hover{
+        color: var(--ion-color-#{$color});
+      }
+    }
+
+    .\!text-#{$color} {
+			color: var(--ion-color-#{$color}) !important;
+		}
+    .hover\:\!text-#{$color} {
+      @apply transition-all ease-in-out duration-300;
+      &:hover{
+        color: var(--ion-color-#{$color}) !important;
+      }
+    }
+	}
+}
+@mixin text-colors-steps($colors, $steps){
+	@each $color in $colors {
+    @each $step in $steps {
+      .text-#{$color}\/#{$step} {
+        color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+      .hover\:text-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+
+      .\!text-#{$color}\/#{$step} {
+        color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100)) !important
+        );
+      }
+      .hover\:\!text-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100)) !important
+          );
+        }
+      }
+    }
+	}
+}
+@include text-colors($colors);
+@include text-colors-steps($colors, $steps);
+
+//[ BG Colors ]
+@mixin bg-colors($colors){
+  @each $color in $colors {
+    .bg-#{$color} {
+      background-color: var(--ion-color-#{$color});
+    }
+    .hover\:bg-#{$color} {
+       @apply transition-all ease-in-out duration-300;
+      &:hover{
+        background-color: var(--ion-color-#{$color});
+      }
+    }
+
+    .\!bg-#{$color} {
+      background-color: var(--ion-color-#{$color}) !important;
+    }
+    .hover\:\!bg-#{$color} {
+       @apply transition-all ease-in-out duration-300;
+      &:hover{
+        background-color: var(--ion-color-#{$color}) !important;
+      }
+    }
+	}
+}
+@mixin bg-colors-steps($colors, $steps){
+	@each $color in $colors {
+    @each $step in $steps {
+      .bg-#{$color}\/#{$step} {
+        background-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+      .hover\:bg-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          background-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+
+      .\!bg-#{$color}\/#{$step} {
+        background-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100)) !important
+        );
+      }
+      .hover\:\!bg-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          background-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100)) !important
+          );
+        }
+      }
+    }
+	}
+}
+
+@include bg-colors($colors);
+@include bg-colors-steps($colors, $steps);
+
+//[ Borders ]
+@mixin border-colors($colors){
+  @each $color in $colors {
+    .border-#{$color} {
+      border-color: var(--ion-color-#{$color});
+    }
+    .border-t-#{$color} {
+      border-top-color   : var(--ion-color-#{$color});
+    }
+    .border-b-#{$color} {
+      border-bottom-color: var(--ion-color-#{$color});
+    }
+    .border-y-#{$color} {
+      border-top-color   : var(--ion-color-#{$color});
+      border-bottom-color: var(--ion-color-#{$color});
+    }
+
+    .border-l-#{$color} {
+      border-left-color   : var(--ion-color-#{$color});
+    }
+    .border-r-#{$color} {
+      border-right-color: var(--ion-color-#{$color});
+    }
+    .border-x-#{$color} {
+      border-left-color : var(--ion-color-#{$color});
+      border-right-color: var(--ion-color-#{$color});
+    }
+
+    .hover\:border-#{$color} {
+       @apply transition-all ease-in-out duration-300;
+      &:hover{
+        border-color: var(--ion-color-#{$color});
+      }
+    }
+
+    .hover\:border-t-#{$color} {
+      @apply transition-all ease-in-out duration-300;
+      &:hover{
+        border-top-color: var(--ion-color-#{$color});
+      }
+    }
+    .hover\:border-b-#{$color} {
+      @apply transition-all ease-in-out duration-300;
+      &:hover{
+        border-bottom-color: var(--ion-color-#{$color});
+      }
+    }
+    .hover\:border-y-#{$color} {
+      @apply transition-all ease-in-out duration-300;
+      &:hover{
+        border-bottom-color: var(--ion-color-#{$color});
+        border-top-color   : var(--ion-color-#{$color});
+      }
+    }
+
+    .hover\:border-l-#{$color} {
+      @apply transition-all ease-in-out duration-300;
+      &:hover{
+        border-left-color: var(--ion-color-#{$color});
+      }
+    }
+    .hover\:border-r-#{$color} {
+      @apply transition-all ease-in-out duration-300;
+      &:hover{
+        border-right-color: var(--ion-color-#{$color});
+      }
+    }
+    .hover\:border-x-#{$color} {
+      @apply transition-all ease-in-out duration-300;
+      &:hover{
+        border-left-color : var(--ion-color-#{$color});
+        border-right-color: var(--ion-color-#{$color});
+      }
+    }
+	}
+}
+@mixin border-colors-steps($colors, $steps){
+	@each $color in $colors {
+    @each $step in $steps {
+      .border-#{$color}\/#{$step} {
+        border-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+
+      .border-t-#{$color}\/#{$step} {
+        border-top-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+      .border-b-#{$color}\/#{$step} {
+        border-bottom-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+      .border-y-#{$color}\/#{$step} {
+        border-top-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+        border-bottom-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+
+      .border-l-#{$color}\/#{$step} {
+        border-left-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+      .border-r-#{$color}\/#{$step} {
+        border-right-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+      .border-x-#{$color}\/#{$step} {
+        border-left-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+        border-right-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+        );
+      }
+
+      .hover\:border-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          border-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+
+      .hover\:border-t-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          border-top-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+      .hover\:border-b-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          border-bottom-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+      .hover\:border-y-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          border-bottom-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+          border-top-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+
+      .hover\:border-l-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          border-left-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+      .hover\:border-r-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          border-right-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+      .hover\:border-x-#{$color}\/#{$step}{
+        @apply transition-all ease-in-out duration-300;
+        &:hover{
+          border-left-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+          border-right-color: color-mix(
+            in srgb, 
+            var(--ion-color-#{$color}) 
+                math.percentage(math.div($step, 100)), 
+            transparent 
+                math.percentage(math.div(100 - $step, 100))
+          );
+        }
+      }
+    }
+	}
+}
+
+@include border-colors($colors);
+@include border-colors-steps($colors, $steps);
+
+
+.mask-x{
+  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%);
+}
+
+.mask-y{
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%);
+}
+
+$steps-mask: 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50;
+@mixin masks($steps){
+  @each $step in $steps {
+    .mask-x\/#{$step} {
+      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) math.percentage(math.div($step, 100)), rgba(0, 0, 0, 1) math.percentage(math.div(100 - $step, 100)), rgba(0, 0, 0, 0) 100%);
+    }
+    .mask-y\/#{$step} {
+      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) math.percentage(math.div($step, 100)), rgba(0, 0, 0, 1) math.percentage(math.div(100 - $step, 100)), rgba(0, 0, 0, 0) 100%);
+    }
+  }
+}
+@include masks($steps-mask);

package/themes/styles/styles.scss

@@ -0,0 +1 @@
+@import "./../src/lib/components/inputs/inputs.scss";

package/themes/styles/translucid.scss

@@ -0,0 +1,21 @@
+$translucid-background-color           : color-mix(in srgb, var(--ion-color-light)     95%, transparent 5%);
+$translucid-primary-background-color   : color-mix(in srgb, var(--ion-color-primary)   30%, transparent 70%);
+$translucid-secondary-background-color : color-mix(in srgb, var(--ion-color-secondary) 30%, transparent 70%);
+$translucid-tertiary-background-color  : color-mix(in srgb, var(--ion-color-tertiary)  30%, transparent 70%);
+$translucid-success-background-color   : color-mix(in srgb, var(--ion-color-success)   30%, transparent 70%);
+$translucid-warning-background-color   : color-mix(in srgb, var(--ion-color-warning)   30%, transparent 70%);
+$translucid-danger-background-color    : color-mix(in srgb, var(--ion-color-danger)    30%, transparent 70%);
+$translucid-dark-background-color      : color-mix(in srgb, var(--ion-color-dark)      30%, transparent 70%);
+$translucid-medium-background-color    : color-mix(in srgb, var(--ion-color-medium)    30%, transparent 70%);
+$translucid-light-background-color     : color-mix(in srgb, var(--ion-color-light)     30%, transparent 70%);
+
+$translucid-border-color           : var(--ion-color-step-250);
+$translucid-border-color-primary   : color-mix(in srgb, var(--ion-color-primary)   20%, transparent 80%);
+$translucid-border-color-secondary : color-mix(in srgb, var(--ion-color-secondary) 20%, transparent 80%);
+$translucid-border-color-tertiary  : color-mix(in srgb, var(--ion-color-tertiary)  20%, transparent 80%);
+$translucid-border-color-success   : color-mix(in srgb, var(--ion-color-success)   20%, transparent 80%);
+$translucid-border-color-warning   : color-mix(in srgb, var(--ion-color-warning)   20%, transparent 80%);
+$translucid-border-color-danger    : color-mix(in srgb, var(--ion-color-danger)    20%, transparent 80%);
+$translucid-border-color-dark      : color-mix(in srgb, var(--ion-color-dark)      20%, transparent 80%);
+$translucid-border-color-medium    : color-mix(in srgb, var(--ion-color-medium)    20%, transparent 80%);
+$translucid-border-color-light     : color-mix(in srgb, var(--ion-color-light)     20%, transparent 80%);