@gem-sdk/styles 1.0.0

package/src/css/helpers/_transform.css

@@ -0,0 +1,36 @@
+/* Transform Helpers */
+
+[style*="--$(prefix)translate:"],
+[style*="--$(prefix)translatex:"],
+[style*="--$(prefix)translatey:"],
+[style*="--$(prefix)scale:"],
+[style*="--$(prefix)rotate:"],
+[style*="--$(prefix)skew:"] {
+  transform: 
+    translate(var(--$(prefix)translate, 0)) 
+    translateX(var(--$(prefix)translatex, 0)) 
+    translateY(var(--$(prefix)translatey, 0)) 
+    scale(var(--$(prefix)scale, 100%)) 
+    rotate(var(--$(prefix)rotate, 0)) 
+    skew(var(--$(prefix)skew, 0));
+}
+
+[style*="--$(prefix)translate-hvr:"],
+[style*="--$(prefix)translatex-hvr:"],
+[style*="--$(prefix)translatey-hvr:"],
+[style*="--$(prefix)scale-hvr:"],
+[style*="--$(prefix)rotate-hvr:"],
+[style*="--$(prefix)skew-hvr:"] {
+  transition: var(--$(prefix)transition);
+
+  &:hover {
+    transform: 
+      translate(var(--$(prefix)translate-hvr, 0)) 
+      translateX(var(--$(prefix)translatex-hvr, 0)) 
+      translateY(var(--$(prefix)translatey-hvr, 0))
+      scale(var(--$(prefix)scale-hvr, 100%)) 
+      rotate(var(--$(prefix)rotate-hvr, 0))
+      skew(var(--$(prefix)skew-hvr, 0));
+  }
+}
+

package/src/css/helpers/_typography.css

@@ -0,0 +1,54 @@
+/* Typography Helpers */
+
+[style*="--$(prefix)line-clamp:"] {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--$(prefix)line-clamp);
+}
+
+@media only screen and (--tablet-viewport) {
+  [style*="--$(prefix)line-clamp-tablet:"] {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--$(prefix)line-clamp-tablet);
+  }
+}
+
+@media only screen and (--mobile-viewport) {
+  [style*="--$(prefix)line-clamp-mobile:"] {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--$(prefix)line-clamp-mobile);
+  }
+}
+
+[style*="--$(prefix)text-3d:"] {
+  text-shadow: 6px 6px 10px   rgba(255,255,255,.1),
+               6px 6px        var(--$(prefix)text-3d), 
+               5.75px 5.75px  var(--$(prefix)text-3d), 
+               5.5px 5.5px    var(--$(prefix)text-3d), 
+               5.25px 5.25px  var(--$(prefix)text-3d),
+               5px 5px        var(--$(prefix)text-3d), 
+               4.75px 4.75px  var(--$(prefix)text-3d), 
+               4.5px 4.5px    var(--$(prefix)text-3d), 
+               4.25px 4.25px  var(--$(prefix)text-3d),
+               4px 4px        var(--$(prefix)text-3d),
+               3.75px 3.75px  var(--$(prefix)text-3d),
+               3.5px 3.5px    var(--$(prefix)text-3d),
+               3.25px 3.25px  var(--$(prefix)text-3d),
+               3px 3px        var(--$(prefix)text-3d),
+               2.75px 2.75px  var(--$(prefix)text-3d),
+               2.5px 2.5px    var(--$(prefix)text-3d),
+               2.25px 2.25px  var(--$(prefix)text-3d),
+               2px 2px        var(--$(prefix)text-3d),
+               1.75px 1.75px  var(--$(prefix)text-3d),
+               1.5px 1.5px    var(--$(prefix)text-3d),
+               1.25px 1.25px  var(--$(prefix)text-3d),
+               1px 1px        var(--$(prefix)text-3d),
+               .75px .75px    var(--$(prefix)text-3d),
+               .5px .5px      var(--$(prefix)text-3d),
+               .25px .25px    var(--$(prefix)text-3d);
+}

package/src/css/medias.css

@@ -0,0 +1,2 @@
+@custom-media --tablet-viewport (max-width: 1023px);
+@custom-media --mobile-viewport (max-width: 767px);

package/src/css/mixins.css

@@ -0,0 +1,133 @@
+
+
+@define-mixin svar-mq $prop, $var {
+  [style*="--$(prefix)$(var):"] {
+    $(prop): var(--$(prefix)$(var));
+  }
+
+  [style*="--$(prefix)hvr-$(var):"]:hover {
+    $(prop): var(--$(prefix)hvr-$(var));
+  }
+  /* .group:hover {
+    [style*="--$(prefix)hvr-$(var):"] {
+      $(prop): var(--$(prefix)hvr-$(var));
+    }
+  } */
+
+  [style*="--$(prefix)focus-$(var):"]:focus {
+    $(prop): var(--$(prefix)focus-$(var));
+  }
+  /* .group:focus {
+    [style*="--$(prefix)focus-$(var):"] {
+      $(prop): var(--$(prefix)focus-$(var));
+    }
+  } */
+  
+
+  @media only screen and (--tablet-viewport) {
+    [style*="--$(prefix)$(var)-tablet:"] {
+      $(prop): var(--$(prefix)$(var)-tablet);
+    }
+
+    [style*="--$(prefix)hvr-$(var)-tablet:"]:hover {
+      $(prop): var(--$(prefix)hvr-$(var)-tablet);
+    }
+    /* .group:hover {
+      [style*="--$(prefix)hvr-$(var)-tablet:"] {
+        $(prop): var(--$(prefix)hvr-$(var)-tablet);
+      }
+    } */
+
+    [style*="--$(prefix)focus-$(var)-tablet:"]:focus {
+      $(prop): var(--$(prefix)focus-$(var)-tablet);
+    }
+    /* .group:focus {
+      [style*="--$(prefix)focus-$(var)-tablet:"] {
+        $(prop): var(--$(prefix)focus-$(var)-tablet);
+      }
+    } */
+  }
+
+  @media only screen and (--mobile-viewport) {
+    [style*="--$(prefix)$(var)-mobile:"] {
+      $(prop): var(--$(prefix)$(var)-mobile);
+    }
+
+    [style*="--$(prefix)hvr-$(var)-mobile:"]:hover {
+      $(prop): var(--$(prefix)hvr-$(var)-mobile);
+    }
+    /* .group:hover {
+      [style*="--$(prefix)hvr-$(var)-mobile:"] {
+        $(prop): var(--$(prefix)hvr-$(var)-mobile);
+      }
+    } */
+
+    [style*="--$(prefix)focus-$(var)-mobile:"]:focus {
+      $(prop): var(--$(prefix)focus-$(var)-mobile);
+    }
+    /* .group:focus {
+      [style*="--$(prefix)focus-$(var)-mobile:"] {
+        $(prop): var(--$(prefix)focus-$(var)-mobile);
+      }
+    } */
+  }
+}
+
+@define-mixin svar $prop, $var {
+  [style*="--$(prefix)$(var):"] {
+    $(prop): var(--$(prefix)$(var));
+  }
+
+  [style*="--$(prefix)hvr-$(var):"]:hover {
+    $(prop): var(--$(prefix)hvr-$(var));
+  }
+  /* .group:hover {
+    [style*="--$(prefix)hvr-$(var):"] {
+      $(prop): var(--$(prefix)hvr-$(var));
+    }
+  } */
+
+  [style*="--$(prefix)focus-$(var):"]:focus {
+    $(prop): var(--$(prefix)focus-$(var));
+  }
+  /* .group:focus {
+    [style*="--$(prefix)focus-$(var):"] {
+      $(prop): var(--$(prefix)focus-$(var));
+    }
+  } */
+  
+}
+
+@define-mixin svar:hover $prop, $var {
+  [style*="--$(prefix)hvr-$(var):"]:hover {
+    $(prop): var(--$(prefix)$(var));
+  }
+  /* .group:hover {
+    [style*="--$(prefix)hvr-$(var):"] {
+      $(prop): var(--$(prefix)$(var));
+    }  
+  } */
+}
+
+@define-mixin svar:focus $prop, $var {
+  [style*="--$(prefix)focus-$(var):"]:focus {
+    $(prop): var(--$(prefix)$(var));
+  }
+  /* .group:focus {
+    [style*="--$(prefix)focus-$(var):"] {
+      $(prop): var(--$(prefix)$(var));
+    }  
+  } */
+}
+
+@define-mixin svar:before $prop, $var {
+  [style*="--$(prefix)$(var):"]::before {
+    $(prop): var(--$(prefix)$(var));
+  }
+}
+
+@define-mixin svar:after $prop, $var {
+  [style*="--$(prefix)$(var):"]::after {
+    $(prop): var(--$(prefix)$(var));
+  }
+}

package/src/css/utilities/_background.css

@@ -0,0 +1,22 @@
+/* Background */
+@mixin svar-mq background, bg;
+@mixin svar-mq background-attachment, bga;
+@mixin svar-mq background-color, bgc;
+@mixin svar-mq background-image, bgi;
+@mixin svar-mq background-position, bgp;
+@mixin svar-mq background-repeat, bgr;
+@mixin svar-mq background-size, bgs;
+
+@mixin svar:hover background, bg;
+@mixin svar:hover background-color, bgc;
+
+@mixin svar:focus background, bg;
+@mixin svar:focus background-color, bgc;
+
+[style*="--$(prefix)grad-top:"] {
+  background-image: linear-gradient(0deg, transparent, var(--$(prefix)grad-bottom));
+}
+
+[style*="--$(prefix)grad-bottom:"] {
+  background-image: linear-gradient(180deg, transparent, var(--$(prefix)grad-bottom));
+}

package/src/css/utilities/_border.css

@@ -0,0 +1,21 @@
+/* Border */
+@mixin svar-mq border, b;
+@mixin svar-mq border-color, bc;
+@mixin svar-mq border-style, bs;
+@mixin svar-mq border-width, bw;
+@mixin svar-mq border-radius, br;
+@mixin svar-mq border-radius, radius;
+@mixin svar-mq border-top, bt;
+@mixin svar-mq border-left, bl;
+@mixin svar-mq border-right, br;
+@mixin svar-mq border-bottom, bb;
+@mixin svar-mq border-top-left-radius, btlr;
+@mixin svar-mq border-top-right-radius, btrr;
+@mixin svar-mq border-bottom-left-radius, bblr;
+@mixin svar-mq border-bottom-right-radius, bbrr;
+
+@mixin svar:hover border, b;
+@mixin svar:hover border-color, bc;
+
+@mixin svar:focus border, b;
+@mixin svar:focus border-color, bc;

package/src/css/utilities/_flex.css

@@ -0,0 +1,12 @@
+/* Flex */
+@mixin svar-mq flex, fx;
+@mixin svar-mq flex-direction, fd;
+@mixin svar-mq flex-wrap, fw;
+@mixin svar-mq align-content, ac;
+@mixin svar-mq align-items, ai;
+@mixin svar-mq align-self, as;
+@mixin svar-mq justify-content, jc;
+@mixin svar-mq flex-grow, fg;
+@mixin svar-mq flex-shrink, fs;
+@mixin svar-mq flex-basis, fb;
+@mixin svar-mq order, o;

package/src/css/utilities/_grid.css

@@ -0,0 +1,15 @@
+/* Grid */
+@mixin svar-mq grid-template-columns, gtc;
+@mixin svar-mq grid-template-rows, gtr;
+@mixin svar-mq grid-auto-columns, gac;
+@mixin svar-mq grid-auto-rows, gar;
+@mixin svar-mq grid-column, gc;
+@mixin svar-mq grid-row, gr;
+@mixin svar-mq grid-gap, gg;
+@mixin svar-mq place-self, ps;
+@mixin svar-mq justify-items, ji;
+@mixin svar-mq justify-self, js;
+
+[style*="--$(prefix)grid-cols:"] {
+  grid-template-columns: repeat(var(--$(prefix)grid-cols), minmax(0, 1fr));
+}

package/src/css/utilities/_interact.css

@@ -0,0 +1,8 @@
+/* Interact */
+@mixin svar user-select, us;
+@mixin svar outline, oe;
+@mixin svar pointer-events, pe;
+@mixin svar scroll-behavior, sb;
+@mixin svar cursor, cur;
+
+@mixin svar:hover cursor, cur;

package/src/css/utilities/_layout.css

@@ -0,0 +1,12 @@
+/* Layout */
+@mixin svar-mq display, d;
+@mixin svar-mq float, ft;
+@mixin svar-mq position, pos;
+@mixin svar-mq top, top;
+@mixin svar-mq left, left;
+@mixin svar-mq right, right;
+@mixin svar-mq bottom, bottom;
+@mixin svar-mq object-fit, objf;
+@mixin svar-mq object-position, objp;
+@mixin svar-mq visibility, v;
+@mixin svar-mq z-index, z;

package/src/css/utilities/_misc.css

@@ -0,0 +1,12 @@
+/* Misc */
+@mixin svar all, all;
+@mixin svar-mq box-shadow, boxs;
+@mixin svar-mq content, ct;
+@mixin svar-mq opacity, op;
+@mixin svar-mq box-shadow, bs;
+@mixin svar clear, cr;
+@mixin svar content, ct;
+@mixin svar filter, fr;
+@mixin svar-mq aspect-ratio, aspect;
+
+/* @mixin svar:hover opacity, op; */

package/src/css/utilities/_overflow.css

@@ -0,0 +1,3 @@
+@mixin svar overflow, of;
+@mixin svar overflow-x, ofx;
+@mixin svar overflow-y, ofy;

package/src/css/utilities/_sizing.css

@@ -0,0 +1,7 @@
+/* Sizing */
+@mixin svar-mq width, w;
+@mixin svar-mq height, h;
+@mixin svar-mq min-width, minw;
+@mixin svar-mq min-height, minh;
+@mixin svar-mq max-width, maxw;
+@mixin svar-mq max-height, maxh;

package/src/css/utilities/_spacing.css

@@ -0,0 +1,13 @@
+/* Spacing */
+@mixin svar box-sizing, bxs;
+@mixin svar-mq padding, p;
+@mixin svar-mq padding-left, pl;
+@mixin svar-mq padding-right, pr;
+@mixin svar-mq padding-top, pt;
+@mixin svar-mq padding-bottom, pb;
+@mixin svar-mq margin, m;
+@mixin svar-mq margin-left, ml;
+@mixin svar-mq margin-right, mr;
+@mixin svar-mq margin-top, mt;
+@mixin svar-mq margin-bottom, mb;
+

package/src/css/utilities/_transform.css

@@ -0,0 +1,4 @@
+/* Transform */
+@mixin svar-mq transform, t;
+@mixin svar-mq transform-origin, to;
+@mixin svar-mq transform-style, tc;

package/src/css/utilities/_transition.css

@@ -0,0 +1,6 @@
+/* Animation */
+@mixin svar-mq transition, tn;
+@mixin svar-mq transition-delay, td;
+@mixin svar-mq transition-duration, tdn;
+@mixin svar-mq transition-property, tp;
+@mixin svar-mq transition-timing-function, ttf;

package/src/css/utilities/_typography.css

@@ -0,0 +1,33 @@
+/* Typography */
+@mixin svar-mq color, c;
+@mixin svar-mq font-family, ff;
+@mixin svar-mq font-size, size;
+@mixin svar-mq font-style, fs;
+@mixin svar-mq font-weight, weight;
+@mixin svar-mq letter-spacing, ls;
+@mixin svar-mq line-height, lh;
+@mixin svar-mq list-style, lis;
+@mixin svar-mq list-style-type, list;
+@mixin svar-mq list-style-position, lisp;
+@mixin svar-mq text-align, ta;
+@mixin svar-mq text-decoration, td;
+@mixin svar-mq text-shadow, ts;
+@mixin svar-mq text-transform, tt;
+@mixin svar-mq writing-mode, wm;
+@mixin svar-mq vertical-align, va;
+
+@mixin svar-mq white-space, ws;
+@mixin svar-mq word-break, wb;
+
+@mixin svar-mq column-count, cc;
+@mixin svar-mq column-gap, cg;
+@mixin svar-mq row-gap, rg;
+@mixin svar-mq column-rule, cr;
+@mixin svar-mq column-span, cs;
+
+@mixin svar-mq direction, dir;
+
+[style*="--$(prefix)bi:"] {
+  page-break-inside: var(--$(prefix) bi);
+  break-inside: var(--$(prefix) bi);
+}

package/src/css/utilities/all.css

@@ -0,0 +1,113 @@
+@mixin svar-mq align-content, ac;
+@mixin svar-mq align-items, ai;
+@mixin svar-mq align-self, as;
+@mixin svar-mq aspect-ratio, aspect;
+@mixin svar-mq background, bg;
+@mixin svar-mq background-attachment, bga;
+@mixin svar-mq background-color, bgc;
+@mixin svar-mq background-image, bgi;
+@mixin svar-mq background-position, bgp;
+@mixin svar-mq background-repeat, bgr;
+@mixin svar-mq background-size, bgs;
+@mixin svar-mq border, b;
+@mixin svar-mq border-bottom, bb;
+@mixin svar-mq border-color, bc;
+@mixin svar-mq border-bottom-left-radius, bblr;
+@mixin svar-mq border-bottom-right-radius, bbrr;
+@mixin svar-mq border-color, bc;
+@mixin svar-mq border-left, bl;
+@mixin svar-mq border-radius, radius;
+@mixin svar-mq border-right, br;
+@mixin svar-mq border-style, bs;
+@mixin svar-mq border-top, bt;
+@mixin svar-mq border-width, bw;
+@mixin svar-mq bottom, bottom;
+@mixin svar-mq box-shadow, shadow;
+@mixin svar box-sizing, bxs;
+@mixin svar-mq clear, cr;
+@mixin svar-mq color, c;
+@mixin svar color, hvr-c;
+@mixin svar-mq column-count, cc;
+@mixin svar-mq column-fill, cf;
+@mixin svar-mq column-gap, cg;
+@mixin svar-mq column-rule, cr;
+@mixin svar-mq column-span, cs;
+@mixin svar content, ct;
+@mixin svar cursor, cur;
+@mixin svar direction, dir;
+@mixin svar-mq display, d;
+@mixin svar filter, fr;
+@mixin svar-mq flex, fx;
+@mixin svar-mq flex-basis, fb;
+@mixin svar-mq flex-direction, fd;
+@mixin svar-mq flex-grow, fg;
+@mixin svar-mq flex-shrink, fs;
+@mixin svar-mq flex-wrap, fw;
+@mixin svar-mq float, ft;
+@mixin svar-mq font-family, ff;
+@mixin svar-mq font-size, size;
+@mixin svar-mq font-style, fs;
+@mixin svar-mq font-weight, weight;
+@mixin svar-mq grid-auto-columns, gac;
+@mixin svar-mq grid-auto-rows, gar;
+@mixin svar-mq grid-column, gc;
+@mixin svar-mq grid-gap, gg;
+@mixin svar-mq grid-row, gr;
+@mixin svar-mq grid-template-columns, gtc;
+@mixin svar-mq grid-template-rows, gtr;
+@mixin svar-mq height, h;
+@mixin svar-mq justify-content, jc;
+@mixin svar-mq left, left;
+@mixin svar-mq letter-spacing, ls;
+@mixin svar-mq line-height, lh;
+@mixin svar-mq list-style, lis;
+@mixin svar-mq list-style-position, lisp;
+@mixin svar-mq list-style-type, list;
+@mixin svar-mq margin, m;
+@mixin svar-mq margin-bottom, mb;
+@mixin svar-mq margin-left, ml;
+@mixin svar-mq margin-right, mr;
+@mixin svar-mq margin-top, mt;
+@mixin svar-mq max-height, maxh;
+@mixin svar-mq max-width, maxw;
+@mixin svar-mq min-height, minh;
+@mixin svar-mq min-width, minw;
+@mixin svar-mq object-fit, objf;
+@mixin svar-mq object-position, objp;
+@mixin svar-mq opacity, op;
+@mixin svar-mq order, o;
+@mixin svar outline, oe;
+@mixin svar overflow, of;
+@mixin svar overflow-x, ofx;
+@mixin svar overflow-y, ofy;
+@mixin svar-mq padding, p;
+@mixin svar-mq padding-bottom, pb;
+@mixin svar-mq padding-left, pl;
+@mixin svar-mq padding-right, pr;
+@mixin svar-mq padding-top, pt;
+@mixin svar pointer-events, pe;
+@mixin svar-mq position, pos;
+@mixin svar-mq right, right;
+@mixin svar-mq row-gap, rg;
+@mixin svar scroll-behavior, sb;
+@mixin svar-mq text-align, ta;
+@mixin svar-mq text-decoration, td;
+@mixin svar-mq text-shadow, ts;
+@mixin svar-mq text-transform, tt;
+@mixin svar-mq top, top;
+@mixin svar-mq transform, t;
+@mixin svar-mq transform-origin, ta;
+@mixin svar-mq transform-style, ts;
+@mixin svar-mq transition, tn;
+@mixin svar-mq transition-delay, td;
+@mixin svar-mq transition-duration, tnd;
+@mixin svar-mq transition-property, tp;
+@mixin svar-mq transition-timing-function, ttf;
+@mixin svar user-select, us;
+@mixin svar-mq vertical-align, va;
+@mixin svar-mq visibility, v;
+@mixin svar-mq white-space, ws;
+@mixin svar-mq width, w;
+@mixin svar-mq word-break, wb;
+@mixin svar-mq writing-mode, wm;
+@mixin svar-mq z-index, z;

package/src/css/variables.css

@@ -0,0 +1 @@
+$prefix: ;

package/src/index.js

@@ -0,0 +1,5 @@
+const preset = require('./preset');
+const properties = require('./properties');
+
+module.exports.preset = preset;
+module.exports.properties = properties;

package/src/plugins/animation.js

@@ -0,0 +1,109 @@
+const plugin = require('tailwindcss/plugin');
+
+const animation = plugin(
+  function ({ theme, matchUtilities }) {
+    matchUtilities(
+      {
+        'animation-delay': (value) => ({
+          animationDelay: value,
+        }),
+      },
+      { values: theme('animationDelay') },
+    );
+    matchUtilities(
+      {
+        'animation-duration': (value) => ({
+          animationDuration: value,
+        }),
+      },
+      { values: theme('animationDuration') },
+    );
+    matchUtilities({
+      'animation-name': (value) => ({
+        animationName: value,
+      }),
+    });
+    matchUtilities({
+      'animation-timing-function': (value) => ({
+        animationTimingFunction: value,
+      }),
+    });
+    matchUtilities({
+      'animation-direction': (value) => ({
+        animationDirection: value,
+      }),
+    });
+    matchUtilities({
+      'animation-iteration-count': (value) => ({
+        animationIterationCount: value,
+      }),
+    });
+    matchUtilities({
+      'animation-fill-mode': (value) => ({
+        animationFillMode: value,
+      }),
+    });
+  },
+  {
+    theme: {
+      animationDelay: {
+        none: '0s',
+        75: '75ms',
+        100: '100ms',
+        150: '150ms',
+        200: '200ms',
+        300: '300ms',
+        400: '400ms',
+        500: '500ms',
+        600: '600ms',
+        700: '700ms',
+        800: '800ms',
+        900: '900ms',
+        1000: '1000ms',
+        1100: '1100ms',
+        1200: '1200ms',
+        1300: '1300ms',
+        1400: '1400ms',
+        1500: '1500ms',
+        2000: '2000ms',
+        3000: '3000ms',
+        4000: '4000ms',
+        5000: '5000ms',
+        6000: '6000ms',
+        7000: '7000ms',
+        8000: '8000ms',
+        9000: '9000ms',
+      },
+      animationDuration: {
+        none: '0s',
+        75: '75ms',
+        100: '100ms',
+        150: '150ms',
+        200: '200ms',
+        300: '300ms',
+        400: '400ms',
+        500: '500ms',
+        600: '600ms',
+        700: '700ms',
+        800: '800ms',
+        900: '900ms',
+        1000: '1000ms',
+        1100: '1100ms',
+        1200: '1200ms',
+        1300: '1300ms',
+        1400: '1400ms',
+        1500: '1500ms',
+        2000: '2000ms',
+        3000: '3000ms',
+        4000: '4000ms',
+        5000: '5000ms',
+        6000: '6000ms',
+        7000: '7000ms',
+        8000: '8000ms',
+        9000: '9000ms',
+      },
+    },
+  },
+);
+
+module.exports = animation;