Merge pull request #15 from philippebeck/dev

Release 0.4.7
philippebeck · Dec 3, 2024 · 408c05e · 408c05e
2 parents 06184fb + df4bc1b
commit 408c05e
Show file tree

Hide file tree

Showing 39 changed files with 409 additions and 489 deletions.
diff --git a/dist/index.es.js.map b/dist/index.es.js.map
diff --git a/dist/index.umd.js.map b/dist/index.umd.js.map
diff --git a/dist/style.css b/dist/style.css
diff --git a/lib/assets/_style-mix.scss b/lib/assets/_style-mix.scss
diff --git a/lib/assets/_style-var.scss b/lib/assets/_style-var.scss
diff --git a/lib/assets/style.scss b/lib/assets/style.scss
@@ -1,20 +1,80 @@
-@import './style-var';
-@import './style-mix';
+//! ********** VARIABLES **********
 
-//! ********** FONTS **********
+$xs: 360px;  // mobile portrait
+$sm: 768px;  // mobile landscape & tablet portrait
+$md: 1024px; // tablet landscape
+$lg: 1366px; // small laptop
+$xl: 1920px; // large laptop & desktop
+
+$breakpoints: (
+  "xs": $xs,
+  "sm": $sm,
+  "md": $md,
+  "lg": $lg,
+  "xl": $xl
+) !default;
+
+$font-families: Geologica, Trocchi, UbuntuMono;
+
+$sans-serif: Geologica, Helvetica, sans-serif;
+$serif: Trocchi, Times, serif;
+$monospace: UbuntuMono, Courier, monospace;
+
+$primary:   hsl(270, 100%, 80%);
+$secondary: hsl(120, 100%, 80%);
+$white:     hsl(  0,   0%, 99%);
+$silver:    hsl(  0,   0%, 80%);
+$gray:      hsl(  0,   0%, 20%);
+$black:     hsl(  0,   0%,  1%);
+
+$transforms: (
+  "grow-min": scale(0.7, 0.7),
+  "grow-max": scale(0, 0),
+
+  "slide-top":    translateY(100%),
+  "slide-right":  translateX(-100%),
+
+  "turn-x":   rotateX(360deg),
+  "turn-y":   rotateY(360deg),
+  "turn-z":   rotateZ(360deg),
+  "turn-xy":  rotate3d(1, 1, 0, 360deg),
+  "turn-xz":  rotate3d(1, 0, 1, 360deg),
+  "turn-yz":  rotate3d(0, 1, 1, 360deg),
+  "turn-3d":  rotate3d(1, 1, 1, 360deg)
+) !default;
+
+//! ********** MIXINS **********
+
+@mixin font-face($font-family) {
+  @font-face {
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      local("#{$font-family}-Regular"),
+      url("/fonts/#{$font-family}-Regular.woff2") format("woff2");
+  }
+}
+
+@mixin keyframes($key, $value) {
+  @keyframes #{$key} {
+    from {
+      transform: #{$value};
+    }
+  }
+}
+
+//! ********** MAIN **********
 
 @each $font-family in $font-families {
   @include font-face($font-family);
 }
 
-//! ********** KEYFRAMES **********
-
 @each $key, $value in $transforms {
   @include keyframes($key, $value);
 }
 
-//! ********** APP **********
-
 body {
   margin: 0;
   font-family: $sans-serif;

diff --git a/lib/atoms/card/card.scss b/lib/atoms/card/card.scss
@@ -1,7 +1,5 @@
 @import '../../assets/style';
 
-//! ********** CARD **********
-
 $radius: 10px;
 
 .card {

diff --git a/lib/atoms/collapse/_collapse-mix.scss b/lib/atoms/collapse/_collapse-mix.scss
diff --git a/lib/atoms/collapse/_collapse-var.scss b/lib/atoms/collapse/_collapse-var.scss
diff --git a/lib/atoms/collapse/collapse.scss b/lib/atoms/collapse/collapse.scss
@@ -1,11 +1,36 @@
 @import '../../assets/style';
-@import './collapse-var';
-@import './collapse-mix';
 
-//! ********** COLLAPSE **********
+//! ********** VARIABLES **********
 
-.collapse {
+$radius: 5px;
+$width: 150px;
+
+$radius-ratios: (
+  "xs": 2,
+  "sm": 4,
+  "md": 5,
+  "lg": 6,
+  "xl": 7
+  ) !default;
+
+$width-sizes: (
+  "xs": 10px,
+  "sm": 40px,
+  "md": 60px,
+  "lg": 80px,
+  "xl": 100px
+  ) !default;
+
+//! ********** MIXIN **********
 
+@mixin collapse($ratio, $size) {
+  border-radius: calc($radius * $ratio);
+  width: calc($width + $size);
+}
+
+//! ********** MAIN **********
+
+.collapse {
   & > figure {
     margin: 20px;
   }

diff --git a/lib/atoms/link/_link-mix.scss b/lib/atoms/link/_link-mix.scss
diff --git a/lib/atoms/link/_link-var.scss b/lib/atoms/link/_link-var.scss
diff --git a/lib/atoms/link/link.scss b/lib/atoms/link/link.scss
@@ -1,8 +1,40 @@
 @import '../../assets/style';
-@import './link-var';
-@import './link-mix';
 
-//! ********** LINK **********
+//! ********** VARIABLES **********
+
+$gap: 5px;
+$padding: 5px;
+
+$gap-ratios: (
+  "xs": 1.5,
+  "sm": 2.5,
+  "md": 3,
+  "lg": 3.5,
+  "xl": 4
+) !default;
+
+$padding-ratios: (
+  "xs": 1.5,
+  "sm": 2.5,
+  "md": 3,
+  "lg": 3.5,
+  "xl": 4
+) !default;
+
+//! ********** MIXIN **********
+
+@mixin link($gap-ratio, $padding-ratio) {
+  .link,
+  .btn {
+    gap: calc($gap * $gap-ratio);
+  }
+
+  .btn {
+    padding: calc($padding * $padding-ratio / 2) calc($padding * $padding-ratio);
+  }
+}
+
+//! ********** MAIN **********
 
 .link,
 .btn {

diff --git a/lib/atoms/list/_list-mix.scss b/lib/atoms/list/_list-mix.scss
diff --git a/lib/atoms/list/_list-var.scss b/lib/atoms/list/_list-var.scss
diff --git a/lib/atoms/list/list.scss b/lib/atoms/list/list.scss
@@ -1,8 +1,24 @@
 @import '../../assets/style';
-@import './list-var';
-@import './list-mix';
 
-//! ********** LIST **********
+//! ********** VARIABLES **********
+
+$gap-size: 5px;
+
+$gap-ratios: (
+  "xs": 1.5,
+  "sm": 2.5,
+  "md": 3,
+  "lg": 3.5,
+  "xl": 4
+  ) !default;
+
+  //! ********** MIXIN **********
+
+@mixin list($ratio) {
+  gap: calc($gap-size * $ratio);
+}
+
+//! ********** MAIN **********
 
 .list {
   display: flex;

diff --git a/lib/molecules/button/_button-mix.scss b/lib/molecules/button/_button-mix.scss
diff --git a/lib/molecules/button/_button-var.scss b/lib/molecules/button/_button-var.scss