@gem-sdk/styles 1.60.7 → 2.0.0-dev.1082

package/src/css/utilities/all.css

@@ -77,9 +77,9 @@
 @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 overflow, of;
+@mixin svar-mq overflow-x, ofx;
+@mixin svar-mq overflow-y, ofy;
 @mixin svar-mq padding, p;
 @mixin svar-mq padding-bottom, pb;
 @mixin svar-mq padding-left, pl;

package/src/preset.js

@@ -8,7 +8,7 @@ const preset = {
   },
   theme: {
     screens: {
-      tablet: { max: '1023px' },
+      tablet: { max: '1024px' },
       mobile: { max: '767px' },
     },
     extend: {
@@ -131,7 +131,7 @@ const preset = {
         },
       },
       maxWidth: {
-        tablet: '1023px',
+        tablet: '1024px',
         mobile: '767px',
       },
       textColor: {

package/src/properties.js

@@ -12,6 +12,12 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items',
   },
+  {
+    property: 'align-self',
+    shortHand: 'as',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self',
+  },
   // {
   //   property: 'align-self',
   //   shortHand: 'as',
@@ -84,12 +90,48 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width',
   },
+  {
+    property: 'border-left-width',
+    shortHand: 'blw',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width',
+  },
+  {
+    property: 'border-right-width',
+    shortHand: 'brw',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width',
+  },
+  {
+    property: 'border-top-width',
+    shortHand: 'btw',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width',
+  },
   {
     property: 'border-bottom-color',
     shortHand: 'bbc',
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color',
   },
+  {
+    property: 'border-top-color',
+    shortHand: 'btc',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color',
+  },
+  {
+    property: 'border-left-color',
+    shortHand: 'blc',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color',
+  },
+  {
+    property: 'border-right-color',
+    shortHand: 'brc',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color',
+  },
   {
     property: 'border-color',
     shortHand: 'bc',
@@ -366,6 +408,12 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content',
   },
+  {
+    property: 'justify-self',
+    shortHand: 'js',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self',
+  },
   {
     property: 'left',
     shortHand: 'left',
@@ -523,24 +571,24 @@ module.exports = [
   //   mediaQuery: false,
   //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline',
   // },
-  // {
-  //   property: 'overflow',
-  //   shortHand: 'of',
-  //   mediaQuery: false,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow',
-  // },
-  // {
-  //   property: 'overflow-x',
-  //   shortHand: 'ofx',
-  //   mediaQuery: false,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x',
-  // },
-  // {
-  //   property: 'overflow-y',
-  //   shortHand: 'ofy',
-  //   mediaQuery: false,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y',
-  // },
+  {
+    property: 'overflow',
+    shortHand: 'of',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow',
+  },
+  {
+    property: 'overflow-x',
+    shortHand: 'ofx',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x',
+  },
+  {
+    property: 'overflow-y',
+    shortHand: 'ofy',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y',
+  },
   {
     property: 'place-content',
     shortHand: 'pc',

package/types/globals.d.ts

@@ -37,6 +37,33 @@ declare namespace React {
     '--hvr-ai-mobile'?: CSSProperties['alignItems'];
     '--focus-ai-mobile'?: CSSProperties['alignItems'];
 
+    /**
+     * **CSS Property**: `align-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+     */
+
+    '--as'?: CSSProperties['alignSelf'];
+    '--hvr-as'?: CSSProperties['alignSelf'];
+    '--focus-as'?: CSSProperties['alignSelf'];
+
+    /**
+     * **CSS Property**: `align-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+     */
+    '--as-tablet'?: CSSProperties['alignSelf'];
+    '--hvr-as-tablet'?: CSSProperties['alignSelf'];
+    '--focus-as-tablet'?: CSSProperties['alignSelf'];
+    /**
+     * **CSS Property**: `align-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+     */
+    '--as-mobile'?: CSSProperties['alignSelf'];
+    '--hvr-as-mobile'?: CSSProperties['alignSelf'];
+    '--focus-as-mobile'?: CSSProperties['alignSelf'];
+
     /**
      * **CSS Property**: `aspect-ratio`
      *
@@ -334,6 +361,87 @@ declare namespace React {
     '--hvr-bbw-mobile'?: CSSProperties['borderBottomWidth'];
     '--focus-bbw-mobile'?: CSSProperties['borderBottomWidth'];
 
+    /**
+     * **CSS Property**: `border-left-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
+     */
+
+    '--blw'?: CSSProperties['borderLeftWidth'];
+    '--hvr-blw'?: CSSProperties['borderLeftWidth'];
+    '--focus-blw'?: CSSProperties['borderLeftWidth'];
+
+    /**
+     * **CSS Property**: `border-left-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
+     */
+    '--blw-tablet'?: CSSProperties['borderLeftWidth'];
+    '--hvr-blw-tablet'?: CSSProperties['borderLeftWidth'];
+    '--focus-blw-tablet'?: CSSProperties['borderLeftWidth'];
+    /**
+     * **CSS Property**: `border-left-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
+     */
+    '--blw-mobile'?: CSSProperties['borderLeftWidth'];
+    '--hvr-blw-mobile'?: CSSProperties['borderLeftWidth'];
+    '--focus-blw-mobile'?: CSSProperties['borderLeftWidth'];
+
+    /**
+     * **CSS Property**: `border-right-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
+     */
+
+    '--brw'?: CSSProperties['borderRightWidth'];
+    '--hvr-brw'?: CSSProperties['borderRightWidth'];
+    '--focus-brw'?: CSSProperties['borderRightWidth'];
+
+    /**
+     * **CSS Property**: `border-right-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
+     */
+    '--brw-tablet'?: CSSProperties['borderRightWidth'];
+    '--hvr-brw-tablet'?: CSSProperties['borderRightWidth'];
+    '--focus-brw-tablet'?: CSSProperties['borderRightWidth'];
+    /**
+     * **CSS Property**: `border-right-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
+     */
+    '--brw-mobile'?: CSSProperties['borderRightWidth'];
+    '--hvr-brw-mobile'?: CSSProperties['borderRightWidth'];
+    '--focus-brw-mobile'?: CSSProperties['borderRightWidth'];
+
+    /**
+     * **CSS Property**: `border-top-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
+     */
+
+    '--btw'?: CSSProperties['borderTopWidth'];
+    '--hvr-btw'?: CSSProperties['borderTopWidth'];
+    '--focus-btw'?: CSSProperties['borderTopWidth'];
+
+    /**
+     * **CSS Property**: `border-top-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
+     */
+    '--btw-tablet'?: CSSProperties['borderTopWidth'];
+    '--hvr-btw-tablet'?: CSSProperties['borderTopWidth'];
+    '--focus-btw-tablet'?: CSSProperties['borderTopWidth'];
+    /**
+     * **CSS Property**: `border-top-width`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
+     */
+    '--btw-mobile'?: CSSProperties['borderTopWidth'];
+    '--hvr-btw-mobile'?: CSSProperties['borderTopWidth'];
+    '--focus-btw-mobile'?: CSSProperties['borderTopWidth'];
+
     /**
      * **CSS Property**: `border-bottom-color`
      *
@@ -361,6 +469,87 @@ declare namespace React {
     '--hvr-bbc-mobile'?: CSSProperties['borderBottomColor'];
     '--focus-bbc-mobile'?: CSSProperties['borderBottomColor'];
 
+    /**
+     * **CSS Property**: `border-top-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color
+     */
+
+    '--btc'?: CSSProperties['borderTopColor'];
+    '--hvr-btc'?: CSSProperties['borderTopColor'];
+    '--focus-btc'?: CSSProperties['borderTopColor'];
+
+    /**
+     * **CSS Property**: `border-top-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color
+     */
+    '--btc-tablet'?: CSSProperties['borderTopColor'];
+    '--hvr-btc-tablet'?: CSSProperties['borderTopColor'];
+    '--focus-btc-tablet'?: CSSProperties['borderTopColor'];
+    /**
+     * **CSS Property**: `border-top-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color
+     */
+    '--btc-mobile'?: CSSProperties['borderTopColor'];
+    '--hvr-btc-mobile'?: CSSProperties['borderTopColor'];
+    '--focus-btc-mobile'?: CSSProperties['borderTopColor'];
+
+    /**
+     * **CSS Property**: `border-left-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color
+     */
+
+    '--blc'?: CSSProperties['borderLeftColor'];
+    '--hvr-blc'?: CSSProperties['borderLeftColor'];
+    '--focus-blc'?: CSSProperties['borderLeftColor'];
+
+    /**
+     * **CSS Property**: `border-left-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color
+     */
+    '--blc-tablet'?: CSSProperties['borderLeftColor'];
+    '--hvr-blc-tablet'?: CSSProperties['borderLeftColor'];
+    '--focus-blc-tablet'?: CSSProperties['borderLeftColor'];
+    /**
+     * **CSS Property**: `border-left-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color
+     */
+    '--blc-mobile'?: CSSProperties['borderLeftColor'];
+    '--hvr-blc-mobile'?: CSSProperties['borderLeftColor'];
+    '--focus-blc-mobile'?: CSSProperties['borderLeftColor'];
+
+    /**
+     * **CSS Property**: `border-right-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color
+     */
+
+    '--brc'?: CSSProperties['borderRightColor'];
+    '--hvr-brc'?: CSSProperties['borderRightColor'];
+    '--focus-brc'?: CSSProperties['borderRightColor'];
+
+    /**
+     * **CSS Property**: `border-right-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color
+     */
+    '--brc-tablet'?: CSSProperties['borderRightColor'];
+    '--hvr-brc-tablet'?: CSSProperties['borderRightColor'];
+    '--focus-brc-tablet'?: CSSProperties['borderRightColor'];
+    /**
+     * **CSS Property**: `border-right-color`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color
+     */
+    '--brc-mobile'?: CSSProperties['borderRightColor'];
+    '--hvr-brc-mobile'?: CSSProperties['borderRightColor'];
+    '--focus-brc-mobile'?: CSSProperties['borderRightColor'];
+
     /**
      * **CSS Property**: `border-color`
      *
@@ -1090,6 +1279,33 @@ declare namespace React {
     '--hvr-jc-mobile'?: CSSProperties['justifyContent'];
     '--focus-jc-mobile'?: CSSProperties['justifyContent'];
 
+    /**
+     * **CSS Property**: `justify-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+     */
+
+    '--js'?: CSSProperties['justifySelf'];
+    '--hvr-js'?: CSSProperties['justifySelf'];
+    '--focus-js'?: CSSProperties['justifySelf'];
+
+    /**
+     * **CSS Property**: `justify-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+     */
+    '--js-tablet'?: CSSProperties['justifySelf'];
+    '--hvr-js-tablet'?: CSSProperties['justifySelf'];
+    '--focus-js-tablet'?: CSSProperties['justifySelf'];
+    /**
+     * **CSS Property**: `justify-self`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+     */
+    '--js-mobile'?: CSSProperties['justifySelf'];
+    '--hvr-js-mobile'?: CSSProperties['justifySelf'];
+    '--focus-js-mobile'?: CSSProperties['justifySelf'];
+
     /**
      * **CSS Property**: `left`
      *
@@ -1603,6 +1819,87 @@ declare namespace React {
     '--hvr-o-mobile'?: CSSProperties['order'];
     '--focus-o-mobile'?: CSSProperties['order'];
 
+    /**
+     * **CSS Property**: `overflow`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     */
+
+    '--of'?: CSSProperties['overflow'];
+    '--hvr-of'?: CSSProperties['overflow'];
+    '--focus-of'?: CSSProperties['overflow'];
+
+    /**
+     * **CSS Property**: `overflow`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     */
+    '--of-tablet'?: CSSProperties['overflow'];
+    '--hvr-of-tablet'?: CSSProperties['overflow'];
+    '--focus-of-tablet'?: CSSProperties['overflow'];
+    /**
+     * **CSS Property**: `overflow`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     */
+    '--of-mobile'?: CSSProperties['overflow'];
+    '--hvr-of-mobile'?: CSSProperties['overflow'];
+    '--focus-of-mobile'?: CSSProperties['overflow'];
+
+    /**
+     * **CSS Property**: `overflow-x`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
+     */
+
+    '--ofx'?: CSSProperties['overflowX'];
+    '--hvr-ofx'?: CSSProperties['overflowX'];
+    '--focus-ofx'?: CSSProperties['overflowX'];
+
+    /**
+     * **CSS Property**: `overflow-x`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
+     */
+    '--ofx-tablet'?: CSSProperties['overflowX'];
+    '--hvr-ofx-tablet'?: CSSProperties['overflowX'];
+    '--focus-ofx-tablet'?: CSSProperties['overflowX'];
+    /**
+     * **CSS Property**: `overflow-x`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
+     */
+    '--ofx-mobile'?: CSSProperties['overflowX'];
+    '--hvr-ofx-mobile'?: CSSProperties['overflowX'];
+    '--focus-ofx-mobile'?: CSSProperties['overflowX'];
+
+    /**
+     * **CSS Property**: `overflow-y`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
+     */
+
+    '--ofy'?: CSSProperties['overflowY'];
+    '--hvr-ofy'?: CSSProperties['overflowY'];
+    '--focus-ofy'?: CSSProperties['overflowY'];
+
+    /**
+     * **CSS Property**: `overflow-y`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
+     */
+    '--ofy-tablet'?: CSSProperties['overflowY'];
+    '--hvr-ofy-tablet'?: CSSProperties['overflowY'];
+    '--focus-ofy-tablet'?: CSSProperties['overflowY'];
+    /**
+     * **CSS Property**: `overflow-y`
+     *
+     * **Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
+     */
+    '--ofy-mobile'?: CSSProperties['overflowY'];
+    '--hvr-ofy-mobile'?: CSSProperties['overflowY'];
+    '--focus-ofy-mobile'?: CSSProperties['overflowY'];
+
     /**
      * **CSS Property**: `place-content`
      *

package/types/types.d.ts

@@ -1,5 +1,6 @@
 export type ShortHandProperty =
   | 'ai'
+  | 'as'
   | 'aspect'
   | 'bg'
   | 'bga'
@@ -11,7 +12,13 @@ export type ShortHandProperty =
   | 'b'
   | 'bb'
   | 'bbw'
+  | 'blw'
+  | 'brw'
+  | 'btw'
   | 'bbc'
+  | 'btc'
+  | 'blc'
+  | 'brc'
   | 'bc'
   | 'bblr'
   | 'bbrr'
@@ -39,6 +46,7 @@ export type ShortHandProperty =
   | 'gtr'
   | 'h'
   | 'jc'
+  | 'js'
   | 'left'
   | 'ls'
   | 'line-clamp'
@@ -58,6 +66,9 @@ export type ShortHandProperty =
   | 'objf'
   | 'op'
   | 'o'
+  | 'of'
+  | 'ofx'
+  | 'ofy'
   | 'pc'
   | 'p'
   | 'pb'