pallote-css 0.3.10 → 0.3.12

package/dist/styles/common/_variables.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "sass:string";
+
 // —————————————————————————————————————————————————————————————————
 // dependencies
 // color palette
@@ -26,16 +29,16 @@ $contrast: #000A1E !default;
 
 // grey
 
-$grey-90: mix($contrast, $main, 90%) !default;
-$grey-80: mix($contrast, $main, 80%) !default;
-$grey-70: mix($contrast, $main, 70%) !default;
-$grey-60: mix($contrast, $main, 60%) !default;
-$grey-50: mix($contrast, $main, 50%) !default;
-$grey-40: mix($contrast, $main, 40%) !default;
-$grey-30: mix($contrast, $main, 30%) !default;
-$grey-20: mix($contrast, $main, 20%) !default;
-$grey-10: mix($contrast, $main, 10%) !default;
-$grey-5: mix($contrast, $main, 5%) !default;
+$grey-90: color.mix($contrast, $main, 90%) !default;
+$grey-80: color.mix($contrast, $main, 80%) !default;
+$grey-70: color.mix($contrast, $main, 70%) !default;
+$grey-60: color.mix($contrast, $main, 60%) !default;
+$grey-50: color.mix($contrast, $main, 50%) !default;
+$grey-40: color.mix($contrast, $main, 40%) !default;
+$grey-30: color.mix($contrast, $main, 30%) !default;
+$grey-20: color.mix($contrast, $main, 20%) !default;
+$grey-10: color.mix($contrast, $main, 10%) !default;
+$grey-5: color.mix($contrast, $main, 5%) !default;
 
 // background
 
@@ -55,35 +58,35 @@ $text-contrast-disabled: rgba($text-contrast, 0.3) !default;
 // brand
 
 $primary: #0076AC !default;
-$primary-light: mix($main, $primary, 70%) !default;
-$primary-dark: mix($contrast, $primary, 50%) !default;
+$primary-light: color.mix($main, $primary, 70%) !default;
+$primary-dark: color.mix($contrast, $primary, 50%) !default;
 $primary-contrast: $text-contrast !default;
 
 $secondary: #C24889 !default;
-$secondary-light: mix($main, $secondary, 70%) !default;
-$secondary-dark: mix($contrast, $secondary, 50%) !default;
+$secondary-light: color.mix($main, $secondary, 70%) !default;
+$secondary-dark: color.mix($contrast, $secondary, 50%) !default;
 $secondary-contrast: $text-contrast !default;
 
 // feedback
 
 $success: #27AE60 !default;
-$success-light: mix($main, $success, 70%) !default;
-$success-dark: mix($contrast, $success, 50%) !default;
+$success-light: color.mix($main, $success, 70%) !default;
+$success-dark: color.mix($contrast, $success, 50%) !default;
 $success-contrast: $text-contrast !default;
 
 $info: #17A0CC !default;
-$info-light: mix($main, $info, 70%) !default;
-$info-dark: mix($contrast, $info, 50%) !default;
+$info-light: color.mix($main, $info, 70%) !default;
+$info-dark: color.mix($contrast, $info, 50%) !default;
 $info-contrast: $text-contrast !default;
 
 $warning: #FFDC46 !default;
-$warning-light: mix($main, $warning, 70%) !default;
-$warning-dark: mix($contrast, $warning, 50%) !default;
+$warning-light: color.mix($main, $warning, 70%) !default;
+$warning-dark: color.mix($contrast, $warning, 50%) !default;
 $warning-contrast: $text !default;
 
 $error: #EB5757 !default;
-$error-light: mix($main, $error, 70%) !default;
-$error-dark: mix($contrast, $error, 50%) !default;
+$error-light: color.mix($main, $error, 70%) !default;
+$error-dark: color.mix($contrast, $error, 50%) !default;
 $error-contrast: $text-contrast !default;
 
 // others
@@ -129,11 +132,11 @@ $nav-item: $spacing-md !default;
 
 // Functions to unquote and remove spaces
 @function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
   
   @if $index {
     @return str-replace(
-      str-slice($string, 1, $index - 1) + $replace + str-slice($string, $index + str-length($search), str-length($string)),
+      string.slice($string, 1, $index - 1) + $replace + string.slice($string, $index + string.length($search), string.length($string)),
       $search,
       $replace
     );
@@ -142,7 +145,7 @@ $nav-item: $spacing-md !default;
   @return $string;
 }
 @function clean-string($string) {
-  @return str-replace(unquote($string), " ");
+  @return str-replace(string.unquote($string), " ");
 }
 
 // typefaces

package/dist/styles/components/_accordion.scss

@@ -1,3 +1,6 @@
+@use "../common/mixins";
+@use "../common/variables";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // size
@@ -14,13 +17,13 @@
 
   &__item {
     position: relative;
-    background-color: $hover;
+    background-color: variables.$hover;
     width: 100%;
   }
 
   &__control,
   &__content {
-    transition: padding $transition-md;
+    transition: padding variables.$transition-md;
     will-change: padding;
   }
 
@@ -31,12 +34,12 @@
     cursor: pointer;
 
     &:after {
-      content: url($icons-path + 'phosphor/caret-down.svg');
-      transition: transform $transition-md;
+      // content: url(variables.$icons-path + 'phosphor/caret-down.svg');
+      transition: transform variables.$transition-md;
       will-change: transform;
       position: absolute;
-      height: $spacing-md;
-      width: $spacing-md;
+      height: variables.$spacing-md;
+      width: variables.$spacing-md;
       transform-origin: center 60%;
       pointer-events: none;
     }
@@ -45,7 +48,7 @@
   &__content {
     max-height: 0;
     overflow: hidden;
-    transition: max-height $transition-md;
+    transition: max-height variables.$transition-md;
     will-change: max-height;
   }
 }
@@ -93,9 +96,9 @@
 
 .accordion {
 
-  @include size(md, $spacing-sm);
-  &--sm { @include size(sm, $spacing-xs); }
-  &--lg { @include size(lg, $spacing-md); }
+  @include size(md, variables.$spacing-sm);
+  &--sm { @include size(sm, variables.$spacing-xs); }
+  &--lg { @include size(lg, variables.$spacing-md); }
 }
 
 // —————————————————————————————————————————————————————————————————
@@ -105,12 +108,12 @@
 .accordion--transparent {
 
   .accordion__item {
-    transition: background-color $transition-md, margin $transition-md;
+    transition: background-color variables.$transition-md, margin variables.$transition-md;
     will-change: background-color, margin;
     background-color: transparent;
 
-    @include hover { background-color: $hover; }
-    &--active { background-color: $hover; }
+    @include mixins.hover { background-color: variables.$hover; }
+    &--active { background-color: variables.$hover; }
     
     &:not(:last-child):not(.accordion__item--active) {
       margin-bottom: 0;

package/dist/styles/components/_alert.scss

@@ -1,3 +1,7 @@
+@use "../common/mixins";
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // color
@@ -7,51 +11,51 @@
 // noIcon
 // —————————————————————————————————————————————————————————————————
 
-$spacing-alert: $spacing-sm;
+$spacing-alert: variables.$spacing-sm;
 
 // —————————————————————————————————————————————————————————————————
 // elements
 // —————————————————————————————————————————————————————————————————
 
 .alert {
-  border-radius: $spacing-sm;
-  background-color: $info-light;
-  color: $text;
+  border-radius: variables.$spacing-sm;
+  background-color: variables.$info-light;
+  color: variables.$text;
   padding: $spacing-alert $spacing-alert*2;
   position: fixed;
-  top: $spacing-md;
-  right: $spacing-md;
+  top: variables.$spacing-md;
+  right: variables.$spacing-md;
   width: fit-content;
-  max-width: $spacing-xxl*3;
+  max-width: variables.$spacing-xxl*3;
   z-index: 20;
 
   &:not(.alert--bar) {
-    padding-left: $spacing-lg + $spacing-sm;
+    padding-left: variables.$spacing-lg + variables.$spacing-sm;
   }
 
-  @include responsive(down, mobile) {
-    @include calc(max-width, '100vw - '$spacing-md);
+  @include mixins.responsive(down, mobile) {
+    @include mixins.calc(max-width, '100vw - 'variables.$spacing-md);
     right: 8px;
-    top: $spacing-sm;
+    top: variables.$spacing-sm;
   }
   
-  @include responsive(down, mobile-sm) {
-    @include calc(width, '100vw - '$spacing-md);
+  @include mixins.responsive(down, mobile-sm) {
+    @include mixins.calc(width, '100vw - 'variables.$spacing-md);
   }
 
   &:before {
     content: "";
     position: absolute;
     top: $spacing-alert;
-    left: $spacing-sm;
-    height: $spacing-md*1.5;
-    width: $spacing-md*1.5;
+    left: variables.$spacing-sm;
+    height: variables.$spacing-md*1.5;
+    width: variables.$spacing-md*1.5;
     background-size: cover;
     background-repeat: no-repeat;
   }
 
   &__title {
-    font-weight: $font-bold !important;
+    font-weight: variables.$font-bold !important;
   }
 
   &__subtitle {
@@ -60,16 +64,16 @@ $spacing-alert: $spacing-sm;
   }
 
   &__close {
-    transition: opacity $transition-md;
+    transition: opacity variables.$transition-md;
     position: absolute;
-    top: $spacing-sm;
-    right: $spacing-sm;
+    top: variables.$spacing-sm;
+    right: variables.$spacing-sm;
     line-height: 0;
 
     svg {
-      width: $spacing-sm;
-      height: $spacing-sm;
-      fill: $success-dark
+      width: variables.$spacing-sm;
+      height: variables.$spacing-sm;
+      fill: variables.$success-dark
     }
 
     &:hover {
@@ -82,23 +86,23 @@ $spacing-alert: $spacing-sm;
 // color
 // —————————————————————————————————————————————————————————————————
 
-@mixin color($color, $background-color: $info-light, $border-color: $info) {
-  @if $color == success { $background-color: $success-light; $border-color: $success; } 
-  @else if $color == info { $background-color: $info-light; $border-color: $info; } 
-  @else if $color == warning { $background-color: $warning-light; $border-color: $warning; } 
-  @else if $color == error { $background-color: $error-light; $border-color: $error; } 
+@mixin color($color, $background-color: variables.$info-light, $border-color: variables.$info) {
+  @if $color == success { $background-color: variables.$success-light; $border-color: variables.$success; } 
+  @else if $color == info { $background-color: variables.$info-light; $border-color: variables.$info; } 
+  @else if $color == warning { $background-color: variables.$warning-light; $border-color: variables.$warning; } 
+  @else if $color == error { $background-color: variables.$error-light; $border-color: variables.$error; } 
 
   background-color: $background-color;
   border: 1px solid $border-color;
-  color: $text;
+  color: variables.$text;
 
-  &:not(.alert--bar):before {
+  // &:not(.alert--bar):before {
 
-    @if $color == success { content: url($icons-path + 'phosphor/check-circle.svg'); }
-    @else if $color == info { content: url($icons-path + 'phosphor/info.svg'); }
-    @else if $color == warning { content: url($icons-path + 'phosphor/warning.svg'); }
-    @else if $color == error { content: url($icons-path + 'phosphor/x-circle.svg'); }
-  }
+  //   @if $color == success { content: url(variables.$icons-path + 'phosphor/check-circle.svg'); }
+  //   @else if $color == info { content: url(variables.$icons-path + 'phosphor/info.svg'); }
+  //   @else if $color == warning { content: url(variables.$icons-path + 'phosphor/warning.svg'); }
+  //   @else if $color == error { content: url(variables.$icons-path + 'phosphor/x-circle.svg'); }
+  // }
 }
 
 .alert {
@@ -154,12 +158,12 @@ $spacing-alert: $spacing-sm;
   &:before {
     top: $spacing-alert*0.5;
     left: $spacing-alert*0.5;
-    height: $spacing-md*1.25;
-    width: $spacing-md*1.25;
+    height: variables.$spacing-md*1.25;
+    width: variables.$spacing-md*1.25;
   }
 
   &:not(.alert--bar) {
-    padding-left: $spacing-md*1.75;
+    padding-left: variables.$spacing-md*1.75;
   }
 
   .alert__title {
@@ -181,10 +185,10 @@ $spacing-alert: $spacing-sm;
 .alert.alert {
 
   &--noIcon {    
-    padding-left: $spacing-md;
+    padding-left: variables.$spacing-md;
     
     &.alert--dense {
-      padding-left: $spacing-sm;
+      padding-left: variables.$spacing-sm;
     }
     
     &:before {

package/dist/styles/components/_breadcrumbs.scss

@@ -1,3 +1,6 @@
+@use "../common/mixins";
+@use "../common/variables";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // separator
@@ -11,7 +14,7 @@
   display: inline-flex;
   align-items: baseline;
 
-  @include responsive(down, tablet) {
+  @include mixins.responsive(down, tablet) {
     flex-direction: column;
   }
 
@@ -19,17 +22,17 @@
     cursor: pointer;
 
     &:not(:first-child) {
-      margin-left: $spacing-xs;
+      margin-left: variables.$spacing-xs;
 
       &:before {
         content: "/";
-        margin-right: $spacing-xs;
-        color: $text-alt;
+        margin-right: variables.$spacing-xs;
+        color: variables.$text-alt;
         display: inline-block; // required to remove underline on hover for before element
       }
     }
 
-    @include hover {
+    @include mixins.hover {
       text-decoration: underline;
     }
   }

package/dist/styles/components/_button.scss

@@ -1,3 +1,9 @@
+@use "sass:color";
+@use "sass:list";
+@use "../common/mixins";
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // kind
@@ -18,11 +24,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: $border-radius-md;
+  border-radius: variables.$border-radius-md;
   position: relative;
   line-height: 0;
   text-transform: uppercase;
-  font-weight: $font-bold;
+  font-weight: variables.$font-bold;
   white-space: nowrap;
   outline-offset: 2px;
   width: fit-content;
@@ -58,7 +64,7 @@
 
   @if $value == xs or $value == sm {
     @extend %overline;
-    border-radius: $border-radius-sm;
+    border-radius: variables.$border-radius-sm;
   }
   @if $value == md { @extend %body; }
   @if $value == lg { @extend %subtitle; }
@@ -98,57 +104,57 @@
 @mixin color($prefix, $colors...) {
 
   @each $i in $colors {
-    .#{$prefix}#{nth($i, 1)} {
-      background-color: nth($i, 2);
-      color: nth($i, 3);
+    .#{$prefix}#{list.nth($i, 1)} {
+      background-color: list.nth($i, 2);
+      color: list.nth($i, 3);
 
       &:focus {
-        outline: 2px solid nth($i, 2);
+        outline: 2px solid list.nth($i, 2);
       }
     
-      @include hover {
+      @include mixins.hover {
 
         &:not(.button-disabled) {
-          background-color: mix(black, nth($i, 2), 20%);
+          background-color: color.mix(black, list.nth($i, 2), 20%);
         }
       }
 
       &.button-stroke {
         background-color: transparent;
-        border: 1px solid nth($i, 2);
-        color: $text;
+        border: 1px solid list.nth($i, 2);
+        color: variables.$text;
 
-        @include hover {
+        @include mixins.hover {
 
           &:not(.button-disabled) {
-            background-color: $hover;
+            background-color: variables.$hover;
           }
         }
 
-        svg { stroke: $text; }
+        svg { stroke: variables.$text; }
       }
       
       &.button-transparent {
         background-color: transparent;
-        color: nth($i, 2);
+        color: list.nth($i, 2);
 
-        @include hover { background-color: $hover; }
-        svg { stroke: nth($i, 2); }
+        @include mixins.hover { background-color: variables.$hover; }
+        svg { stroke: list.nth($i, 2); }
       }
     }
   }
 }
 
 @include color('button',
-  '' $primary $primary-contrast,
-  '-secondary' $secondary $secondary-contrast,
-  '-grey' $text-disabled $text,
-  '-success' $success $success-contrast,
-  '-info' $info $info-contrast,
-  '-warning' $warning $warning-contrast,
-  '-error' $error $error-contrast,
-  '-main' $main $text,
-  '-contrast' $contrast $text-contrast
+  '' variables.$primary variables.$primary-contrast,
+  '-secondary' variables.$secondary variables.$secondary-contrast,
+  '-grey' variables.$text-disabled variables.$text,
+  '-success' variables.$success variables.$success-contrast,
+  '-info' variables.$info variables.$info-contrast,
+  '-warning' variables.$warning variables.$warning-contrast,
+  '-error' variables.$error variables.$error-contrast,
+  '-main' variables.$main variables.$text,
+  '-contrast' variables.$contrast variables.$text-contrast
 );
 
 // —————————————————————————————————————————————————————————————————

package/dist/styles/components/_buttons.scss

@@ -1,3 +1,5 @@
+@use "../common/mixins";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // direction
@@ -16,8 +18,8 @@
   gap: .5rem;
   
   // larger spacing on small and touch devices
-  @include responsive(down, mobile) { gap: 1rem; }
-  @include responsive-touch { gap: 1rem; }
+  @include mixins.responsive(down, mobile) { gap: 1rem; }
+  @include mixins.responsive-touch { gap: 1rem; }
 }
 
 // —————————————————————————————————————————————————————————————————

package/dist/styles/components/_card.scss

@@ -1,3 +1,6 @@
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // size
@@ -17,10 +20,10 @@
   align-items: stretch;
   width: 100%;
   overflow: hidden; // hide corners when CardMedia has fullWidth prop set to true
-  border: $border;
+  border: variables.$border;
 
   &:not(.card--transparent) {
-    background-color: $background-paper;
+    background-color: variables.$background-paper;
   }
 
   &__media {
@@ -32,12 +35,12 @@
       background-position: center center;
       width: 100%;
       height: 100%;
-      background-color: $overlay;
+      background-color: variables.$overlay;
       overflow: hidden;
       padding-bottom: 50%;
       
       .card--transparent & {
-        background-color: $overlay-contrast;
+        background-color: variables.$overlay-contrast;
       }
     }
   }
@@ -81,7 +84,7 @@
       flex-direction: column;
 
       >*:not(:last-child) {
-        margin-bottom: $spacing-md;
+        margin-bottom: variables.$spacing-md;
       }
     }
   }
@@ -98,7 +101,7 @@
   } 
   
   &.card--hasShadow {
-    box-shadow: 0 0 $size $size*0.25 rgba($main ,0.3);
+    box-shadow: 0 0 $size $size*0.25 rgba(variables.$main ,0.3);
   }
 
   > .card__media,
@@ -226,11 +229,11 @@
 }
 
 .card {
-  @include size(md, $spacing-md+$spacing-sm);
-  &--xs.card { @include size(xs, $spacing-sm+$spacing-xs); }
-  &--sm.card { @include size(sm, $spacing-md); }
-  &--lg.card { @include size(lg, $spacing-lg); }
-  &--xl.card { @include size(xl, $spacing-lg+$spacing-sm); }
+  @include size(md, variables.$spacing-md+variables.$spacing-sm);
+  &--xs.card { @include size(xs, variables.$spacing-sm+variables.$spacing-xs); }
+  &--sm.card { @include size(sm, variables.$spacing-md); }
+  &--lg.card { @include size(lg, variables.$spacing-lg); }
+  &--xl.card { @include size(xl, variables.$spacing-lg+variables.$spacing-sm); }
 }
 
 // —————————————————————————————————————————————————————————————————

package/dist/styles/components/_divider.scss

@@ -1,3 +1,5 @@
+@use "../common/variables";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // direction
@@ -10,7 +12,7 @@
 
 .divider {
   display: inline-block;
-  background-color: $border-color;
+  background-color: variables.$border-color;
   height: 1px;
   width: 100%;
 }

package/dist/styles/components/_form.scss

@@ -1,3 +1,6 @@
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // dense
@@ -22,7 +25,7 @@
 
 	&_title {
 		@extend %subtitle;
-		font-weight: $font-bold;
+		font-weight: variables.$font-bold;
 	}
 }
 

package/dist/styles/components/_grid.scss

@@ -1,3 +1,6 @@
+@use "../common/mixins";
+@use "../common/variables";
+
 // —————————————————————————————————————————————————————————————————
 // variables
 // elements
@@ -15,7 +18,7 @@
 // variables
 // —————————————————————————————————————————————————————————————————
 
-$col:	calc(100% / 12);
+variables.$col:	calc(100% / 12);
 
 // —————————————————————————————————————————————————————————————————
 // elements
@@ -130,16 +133,16 @@ $col:	calc(100% / 12);
 @for $colWidth from 1 through 12 {
 
   .grid--#{$colWidth} {
-    width: $colWidth*$col;
+    width: $colWidth*variables.$col;
 
     &.grid {
-      width: $colWidth*$col;
+      width: $colWidth*variables.$col;
     }
 
     @for $spacingWidth from 1 through 12 {
 
       &.grid--spacing#{$spacingWidth} {
-        width: calc(#{$colWidth*$col} + #{$spacingWidth * 0.5rem});
+        width: calc(#{$colWidth*variables.$col} + #{$spacingWidth * 0.5rem});
       }
     }
   }
@@ -147,21 +150,21 @@ $col:	calc(100% / 12);
 
 @mixin break-width($breakpoint) {
 
-  @include responsive(up, $breakpoint) {
+  @include mixins.responsive(up, $breakpoint) {
 
     @for $colWidth from 1 through 12 {
 
       &#{$colWidth} {
-        width: $colWidth*$col;
+        width: $colWidth*variables.$col;
 
         &.grid {
-          width: $colWidth*$col;
+          width: $colWidth*variables.$col;
         }
 
         @for $spacingWidth from 1 through 12 {
 
           &.grid--spacing#{$spacingWidth} {
-            width: calc(#{$colWidth*$col} + #{$spacingWidth * 0.5rem});
+            width: calc(#{$colWidth*variables.$col} + #{$spacingWidth * 0.5rem});
           }
         }
       }