pallote-css 0.3.10 → 0.3.12

package/dist/styles/components/_section.scss

@@ -1,3 +1,7 @@
+@use "../common/mixins";
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // align
@@ -11,8 +15,8 @@
 // —————————————————————————————————————————————————————————————————
 
 .section {
-  @include clamp(padding-right, 1rem, 4vw, 4rem);
-  @include clamp(padding-left, 1rem, 4vw, 4rem);
+  @include mixins.clamp(padding-right, 1rem, 4vw, 4rem);
+  @include mixins.clamp(padding-left, 1rem, 4vw, 4rem);
   width: 100%;
   overflow: hidden; // prevent horizontal scroll on mobile
   position: relative;
@@ -21,10 +25,10 @@
   align-items: center;
 
   &_container {
-    @include clamp(padding-top, 2rem, 8vw, 4rem);
-    @include clamp(padding-bottom, 2rem, 8vw, 4rem);
+    @include mixins.clamp(padding-top, 2rem, 8vw, 4rem);
+    @include mixins.clamp(padding-bottom, 2rem, 8vw, 4rem);
     width: 100%;
-    max-width: $desktop;
+    max-width: variables.$desktop;
     position: relative; // needed to have the content over section-landing:before
   }
 
@@ -32,7 +36,7 @@
     display: flex;
     flex-direction: column;
 
-    & + .section_content { @include clamp(padding-top, 2rem, 8vw, 4rem); }
+    & + .section_content { @include mixins.clamp(padding-top, 2rem, 8vw, 4rem); }
     &-dense + .section_content { padding-top: 2rem; }
   }
 
@@ -40,19 +44,19 @@
     width: 100%;
 
     & + & {
-      @include clamp(padding-top, 2rem, 8vw, 4rem);
+      @include mixins.clamp(padding-top, 2rem, 8vw, 4rem);
     }
   }
 
   &_label {
-    color: $text-alt;
-    font-weight: $font-bold;
+    color: variables.$text-alt;
+    font-weight: variables.$font-bold;
   }
   
   &_title {
     @extend %h3;
-    color: $primary;
-    max-width: $desktop*0.75;
+    color: variables.$primary;
+    max-width: variables.$desktop*0.75;
     
     .section_label + & {
       margin-top: .5rem;
@@ -61,7 +65,7 @@
   
   &_subtitle {
     @extend %subtitle;
-    max-width: $max-width-subtitle;
+    max-width: variables.$max-width-subtitle;
     
     .section_title + & {
       margin-top: 2rem - 1rem;
@@ -110,10 +114,10 @@
 
 @mixin color(
   $background-color,
-  $title-color: $primary,
-  $color: $text,
-  $paper-color: $background-paper,
-  $border-color: $border-color
+  $title-color: variables.$primary,
+  $color: variables.$text,
+  $paper-color: variables.$background-paper,
+  $border-color: variables.$border-color
 ) {
   background-color: $background-color;
   color: $color;
@@ -133,21 +137,21 @@
 }
 
 .section {
-  &-default { @include color($background-default); }
-  &-paper { @include color($background-paper); }
+  &-default { @include color(variables.$background-default); }
+  &-paper { @include color(variables.$background-paper); }
   &-primary { @include color(
-    $primary, // background-color
-    $primary-contrast, // title-color
-    $primary-contrast, // color
-    $hover-contrast, // paper-color
-    $border-color-contrast // border-color
+    variables.$primary, // background-color
+    variables.$primary-contrast, // title-color
+    variables.$primary-contrast, // color
+    variables.$hover-contrast, // paper-color
+    variables.$border-color-contrast // border-color
   );}
   &-primaryLight { @include color(
-    $primary-light, // background-color
-    $text, // title-color
-    $text, // color
-    $hover-contrast, // paper-color
-    $border-color-contrast // border-color
+    variables.$primary-light, // background-color
+    variables.$text, // title-color
+    variables.$text, // color
+    variables.$hover-contrast, // paper-color
+    variables.$border-color-contrast // border-color
   );}
 }
 
@@ -160,11 +164,11 @@
   .section {
 
     &_container {
-      @include clamp(padding-top, 2rem, 10vw, 7rem);
-      @include clamp(padding-bottom, 2rem, 10vw, 7rem);
+      @include mixins.clamp(padding-top, 2rem, 10vw, 7rem);
+      @include mixins.clamp(padding-bottom, 2rem, 10vw, 7rem);
     }
 
-    &_title { @extend %h1; max-width: $desktop*0.5; }
+    &_title { @extend %h1; max-width: variables.$desktop*0.5; }
     &_subtitle { @extend %h5; }
     &_title + .section_subtitle { margin-top: 2rem; }
     &_title + .section_actions,

package/dist/styles/components/_sidebar.scss

@@ -1,57 +1,61 @@
+@use "../common/mixins";
+@use "../common/variables";
+@use "../utilities/text";
+
 $sidebar-width: 200px;
 
 .sidebar {
-  transition: left $transition-md;
-  @include calc(height, '100vh - '$navbar-height);
+  transition: left variables.$transition-md;
+  @include mixins.calc(height, '100vh - 'variables.$navbar-height);
   position: sticky;
   flex-shrink: 0;
-  border-right: $border;
+  border-right: variables.$border;
   width: $sidebar-width;
-  top: $navbar-height;
-  padding: $spacing-md;
+  top: variables.$navbar-height;
+  padding: variables.$spacing-md;
   overflow-y: scroll;
   scrollbar-color: light;  
   z-index: 11;
-  background-color: $background-default;
+  background-color: variables.$background-default;
   
   &.js-opened {
     left: 0;
   }
   
-  @include responsive(down, tablet) {
+  @include mixins.responsive(down, tablet) {
     position: fixed;
     height: 100vh;
     top: 0;
     left: -$sidebar-width;
-    padding-top: $navbar-height-sm;
+    padding-top: variables.$navbar-height-sm;
     z-index: 13;
   }
 
   &__button {
     content: '';
-    border: solid $text;
+    border: solid variables.$text;
     border-width: 0 2px 2px 0;
     padding: 4px;
     transform: rotate(-45deg);
-    margin-right: $spacing-md;
+    margin-right: variables.$spacing-md;
     display: none;
 
     .page--withSidebar & { display: initial; }
-    @include responsive(up, tablet) { display: none !important; }
+    @include mixins.responsive(up, tablet) { display: none !important; }
 
     &--close {
       position: absolute;
-      top: $navbar-height-sm*0.5;
-      left: $navbar-height-sm*0.5;
+      top: variables.$navbar-height-sm*0.5;
+      left: variables.$navbar-height-sm*0.5;
       transform: translateY(-50%) rotate(135deg);
     }
   }
 
   &__title {
     @extend %overline;
-    color: $text-alt;
-    font-weight: $font-bold;
-    margin-bottom: $spacing-xs;
+    color: variables.$text-alt;
+    font-weight: variables.$font-bold;
+    margin-bottom: variables.$spacing-xs;
     margin-left: 0;
   }
 }

package/dist/styles/components/_snippet.scss

@@ -1,3 +1,6 @@
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // default
@@ -14,26 +17,26 @@
   word-wrap: break-word;
   width: 100%;
   position: relative;
-  border-radius: $border-radius-sm;
+  border-radius: variables.$border-radius-sm;
   margin: 0;
-  padding: $spacing-sm $spacing-sm*1.5;
-  background-color: $hover;
-  border: $border;
+  padding: variables.$spacing-sm variables.$spacing-sm*1.5;
+  background-color: variables.$hover;
+  border: variables.$border;
   
   & + & {
-    margin-top: $spacing-sm;
+    margin-top: variables.$spacing-sm;
   }
 
   p > & {
-    margin-right: $spacing-xs;
-    margin-left: $spacing-xs;
+    margin-right: variables.$spacing-xs;
+    margin-left: variables.$spacing-xs;
   }
 
   .tag {
-    font-family: $font, $font-fallback;
+    font-family: variables.$font-fallback;
     float: right;
     margin-top: 1px;
-    margin-right: -$spacing-xs;
+    margin-right: -(variables.$spacing-xs);
   }
 }
 
@@ -46,24 +49,24 @@
   &:after {
     @extend %overline;
     content: "Default";
-    font-family: $font, $font-fallback;
+    font-family: variables.$font-fallback;
     float: right;
     margin-top: 1px;
-    margin-right: -$spacing-xs;
+    margin-right: -(variables.$spacing-xs);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-weight: $font-bold;
-    border-radius: $border-radius-sm;
+    font-weight: variables.$font-bold;
+    border-radius: variables.$border-radius-sm;
     white-space: nowrap; // prevent text to go on multiple lines
     position: absolute;
-    top: $spacing-sm;
-    right: $spacing-md*0.75;
-    height: $spacing-md;
-    padding-right: $spacing-xs;
-    padding-left: $spacing-xs;
+    top: variables.$spacing-sm;
+    right: variables.$spacing-md*0.75;
+    height: variables.$spacing-md;
+    padding-right: variables.$spacing-xs;
+    padding-left: variables.$spacing-xs;
     padding-bottom: 0.1em;
-    background-color: $text-disabled;
+    background-color: variables.$text-disabled;
   }
 }
 
@@ -73,10 +76,10 @@
 
 .snippet--dense {
   @extend %overline;
-  padding: $spacing-xs $spacing-sm !important;
+  padding: variables.$spacing-xs variables.$spacing-sm !important;
 
   &.snippet--default:after {
-    top: $spacing-xs;
-    right: $spacing-sm;
+    top: variables.$spacing-xs;
+    right: variables.$spacing-sm;
   }
 }

package/dist/styles/components/_status.scss

@@ -1,3 +1,6 @@
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // color
@@ -17,7 +20,7 @@ $spacing-status: .5rem;
     display: inline-block;
     height: $spacing-status;
     width: $spacing-status;
-    background-color: $text-alt;
+    background-color: variables.$text-alt;
     border-radius: 50%;
     margin-right: 0.35em;
     transform: translateY(-0.05em);
@@ -37,10 +40,10 @@ $spacing-status: .5rem;
 
 .status {
 
-  &-success { @include color($success); }
-  &-info { @include color($info); }
-  &-warning { @include color($warning); }
-  &-error { @include color($error); }
+  &-success { @include color(variables.$success); }
+  &-info { @include color(variables.$info); }
+  &-warning { @include color(variables.$warning); }
+  &-error { @include color(variables.$error); }
 }
 
 // —————————————————————————————————————————————————————————————————

package/dist/styles/components/_switch.scss

@@ -1,3 +1,6 @@
+@use "../common/mixins";
+@use "../common/variables";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // disabled
@@ -20,15 +23,15 @@ $spacing-switch: 1rem;
     opacity: 0;
 
     &:focus + .switch_switch {
-      outline: 2px solid $primary;
+      outline: 2px solid variables.$primary;
     }
 
     &:checked + .switch_switch {
-      background-color: $primary-light;
+      background-color: variables.$primary-light;
       
       .switch_toggle {
-        @include calc(left, '100% -'($spacing-switch));
-        background-color: $primary;
+        @include mixins.calc(left, '100% -'($spacing-switch));
+        background-color: variables.$primary;
       }
     }
   }
@@ -46,8 +49,8 @@ $spacing-switch: 1rem;
     cursor: pointer;
     width: $spacing-switch*2;
     height: $spacing-switch;
-    background: $input-background;
-    border: $border;
+    background: variables.$input-background;
+    border: variables.$border;
     border-radius: $spacing-switch;
     position: relative;
 
@@ -56,11 +59,11 @@ $spacing-switch: 1rem;
 
   &_toggle {
     position: absolute;
-    left: -$spacing-xs;
+    left: -(variables.$spacing-xs);
     width: $spacing-switch*1.25;
     height: $spacing-switch*1.25;
     border-radius: $spacing-switch*1.25;
-    background: $grey-50;
+    background: variables.$grey-50;
   }
 }
   

package/dist/styles/components/_tabs.scss

@@ -1,3 +1,6 @@
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // active
@@ -15,15 +18,15 @@
   &__controls {
     display: flex;
     width: 100%;
-    border-bottom: $border;
+    border-bottom: variables.$border;
   }
   
   &__item {
     position: relative;
     cursor: pointer;
-    padding: $spacing-sm $spacing-md;
-    border-top-left-radius: $border-radius-sm;
-    border-top-right-radius: $border-radius-sm;
+    padding: variables.$spacing-sm variables.$spacing-md;
+    border-top-left-radius: variables.$border-radius-sm;
+    border-top-right-radius: variables.$border-radius-sm;
     
     &:after {
       content: '';
@@ -36,7 +39,7 @@
   }
 
   &__panel {
-    padding: $spacing-md;
+    padding: variables.$spacing-md;
   }
 }
 
@@ -46,14 +49,14 @@
 
 .tabs__item:hover,
 .tabs__item--active {
-  background-color: $hover;
+  background-color: variables.$hover;
 }
 
 .tabs__item--active {
-  color: $primary;
+  color: variables.$primary;
 
   &:after {
-    background-color: $primary;
+    background-color: variables.$primary;
   }
 }
 
@@ -70,14 +73,14 @@
       flex-direction: column;
       width: 160px;
       border-bottom: 0;
-      border-right: $border;
+      border-right: variables.$border;
     }
     
     &__item {
       text-align: left;
-      border-top-left-radius: $border-radius-sm;
+      border-top-left-radius: variables.$border-radius-sm;
       border-top-right-radius: 0;
-      border-bottom-left-radius: $border-radius-sm;
+      border-bottom-left-radius: variables.$border-radius-sm;
         
       &:after {
         top: 0;
@@ -89,8 +92,8 @@
     }
 
     &__panel {
-      padding-top: $spacing-sm;
-      padding-bottom: $spacing-sm;
+      padding-top: variables.$spacing-sm;
+      padding-bottom: variables.$spacing-sm;
     }
   }
 }
@@ -105,11 +108,11 @@
 
     &__item {
       @extend %caption;
-      padding: $spacing-xs $spacing-sm;
+      padding: variables.$spacing-xs variables.$spacing-sm;
     }
 
     &__panel {
-      padding: $spacing-sm;
+      padding: variables.$spacing-sm;
     }  
   }
 }

package/dist/styles/components/_tag.scss

@@ -1,3 +1,7 @@
+@use "sass:list";
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // color
@@ -31,8 +35,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: $font-bold;
-  border-radius: $border-radius-sm;
+  font-weight: variables.$font-bold;
+  border-radius: variables.$border-radius-sm;
   white-space: nowrap; // prevent text to go on multiple lines
   height: 1.5rem;
   width: fit-content;
@@ -48,21 +52,21 @@
 @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);
     }
   }
 }
 
 @include color('tag',
-  '' $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
+  '' 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
 );
 
 // —————————————————————————————————————————————————————————————————