@gem-sdk/styles 2.0.0-dev.895 → 2.0.0-staging.127

package/src/css/builds/toolbar.css

@@ -127,21 +127,16 @@
     [data-toolbar-icon-parent],
     [data-toolbar-zoom-out],
     [data-toolbar-duplicate],
+    [data-toolbar-title],
     [data-toolbar-delete] {
       display: none;
     }
-
-    .gp-gen-content-toolbar {
-      border-right-width: 0px;
-      button:hover {
-        background: transparent;
-      }
-    }
   }
 
   [data-toolbar][data-toolbar-theme-section='true'] {
     background-color: #9144da;
     color: #fff;
+    border-width: 0;
 
     &[data-toolbar-active] [data-toolbar-show-parent] {
       &:before {
@@ -210,19 +205,19 @@
   }
 
   [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
-    background: #29845A;
+    background: #29845a;
     padding: 4px;
   }
 
   [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover] {
     &:hover {
-      background: #29845A;
+      background: #29845a;
     }
   }
 
   [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-active] {
     &:hover {
-      background: #29845A;
+      background: #29845a;
     }
   }
 
@@ -237,6 +232,14 @@
     color: #fff;
     border-radius: 8px;
 
+    .interaction-suffix {
+      display: flex !important;
+    }
+
+    .interaction-use-custom-element {
+      display: block;
+    }
+
     &:hover {
       background: #151515;
     }
@@ -258,10 +261,10 @@
     }
 
     &[data-toolbar-shopify-section='true'] {
-      background: #29845A;
+      background: #29845a;
 
       &[data-toolbar-hover-focus] {
-        background: #29845A;
+        background: #29845a;
       }
     }
 
@@ -320,6 +323,7 @@
 
     [data-toolbar-duplicate],
     [data-toolbar-delete],
+    [data-toolbar-title],
     [data-toolbar-zoom-out],
     [data-toolbar-active-create-theme-section] {
       display: block;
@@ -374,13 +378,6 @@
     [data-toolbar-create-theme-section] {
       display: none;
     }
-
-    .gp-gen-content-toolbar {
-        border-right-width: 1px;
-        button:hover {
-          background: #3B3B3B;
-        }
-    }
   }
 
   [data-toolbar][data-toolbar-active-overflow],
@@ -403,13 +400,62 @@
     border-color: #424242;
   }
 
-  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
+  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
+    [data-toolbar-create-theme-section] {
     border-color: #424242;
   }
 
-  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
   [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
     border-color: #424242;
+
+    .gp-gen-content-btn {
+      border-right-width: 1px;
+      border-color: #6a6a6a;
+
+      button:hover {
+        background: #3b3b3b;
+      }
+    }
+  }
+
+  [data-toolbar][data-toolbar-section='false'][data-toolbar-active] {
+    .gp-gen-content-btn {
+      &:before {
+        position: absolute;
+        content: '';
+        background: #424242;
+        width: 1px;
+        height: calc(100% - 4px);
+        right: 2px;
+        top: 2px;
+      }
+
+      button:hover,
+      button.gp-toolbar-ai-active {
+        background: #3b3b3b;
+      }
+    }
+  }
+
+  [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] {
+    .gp-gen-content-btn {
+      border-color: #af7edd;
+
+      &:before {
+        background: #af7edd;
+      }
+
+      button:hover,
+      button.gp-toolbar-ai-active {
+        background: #af7edd;
+      }
+    }
+  }
+
+  [data-toolbar][data-toolbar-hover-focus] {
+    .gp-gen-content-btn {
+      display: none;
+    }
   }
 
   [data-toolbar][data-toolbar-editor-inline-focus] {
@@ -423,7 +469,7 @@
 
   [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover-focus],
   [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-active] {
-    border-color: #29845A;
+    border-color: #29845a;
   }
 
   [data-toolbar][data-toolbar-active][data-toolbar-limit='true'],
@@ -455,12 +501,6 @@
     transition: opacity 0ms ease-in-out;
   }
 
-  &[data-section-exceeded][data-toolbar-wrap] {
-    [data-outline][data-outline-section='true'] {
-      border-color: #f44336;
-    }
-  }
-
   /* State Outline */
   [data-outline][data-outline-hover],
   [data-outline][data-outline-force-hover] {
@@ -519,15 +559,14 @@
       top: 0px;
       left: 0px;
       width: calc(100% + 4px);
-      height: calc(100% + 4px);
+      height: calc(100%);
       z-index: 0;
     }
   }
 
   [data-component-tag='Section'] {
-
     /* disable divider */
-    >[data-toolbar] [data-toolbar-show-parent] {
+    > [data-toolbar] [data-toolbar-show-parent] {
       margin-right: 0px;
 
       &:before {
@@ -546,7 +585,7 @@
   [data-outline][data-outline-shopify-section='true'],
   [data-outline][data-outline-shopify-section='true'][data-outline-hover-focus],
   [data-outline][data-outline-shopify-section='true'][data-outline-active] {
-    border-color: #29845A;
+    border-color: #29845a;
     z-index: 0;
   }
 
@@ -557,13 +596,18 @@
     border-color: #f44336;
   }
 
+  [data-outline][data-outline-error='true'] {
+    border-color: #f44336 !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+
   [data-outline][data-outline-parent-hover],
   [data-outline][data-outline-section][data-outline-parent-hover] {
     border-style: dashed;
   }
 
   [data-theme-section] {
-
     /* disable delay animation on theme section */
     [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus],
     [data-outline][data-outline-hover][data-outline-hover-focus],
@@ -587,7 +631,6 @@
   }
 
   [data-shopify-section] {
-
     /* disable delay animation on shopify section */
     [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus],
     [data-outline][data-outline-hover][data-outline-hover-focus],
@@ -598,7 +641,7 @@
 
     [data-toolbar-add-top],
     [data-toolbar-add-bottom] {
-      border-color: #29845A;
+      border-color: #29845a;
     }
   }
 
@@ -774,7 +817,7 @@
         }
 
         [data-value-number] {
-          font-family: Inter;
+          font-family: Inter, sans-serif;
           background-color: #3c67ff;
           border-radius: 6px;
           color: #fff;
@@ -835,6 +878,15 @@
     display: none;
   }
 
+  [data-toolbar-title].active {
+    [data-toolbar-tooltip] {
+      opacity: 1;
+    }
+
+    background-color: rgba(225, 225, 225, 0.2);
+    position: relative;
+  }
+
   /* Tooltips */
   [data-toolbar-tooltip-trigger] {
     [data-toolbar-tooltip] {
@@ -932,7 +984,6 @@
     [data-toolbar-tooltip] {
       left: unset;
       right: 0;
-      margin-top: 12px;
 
       &[data-toolbar-tooltip-position='bottom'] {
         &::after {
@@ -957,8 +1008,7 @@
 
       &[data-toolbar-tooltip-position='top'] {
         margin-bottom: 12px;
-        left: 50%;
-        transform: translateX(-50%);
+        transform: translateX(-91px);
       }
 
       &[data-toolbar-tooltip-position='bottom'] {
@@ -974,99 +1024,74 @@
     }
   }
 
-  [data-toolbar-tooltip-trigger][data-toolbar-add-top],
-  [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] {
-    [data-toolbar-tooltip] {
-      margin-bottom: 12px;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  /* Resize column */
-  [data-column] {
-    z-index: 10;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    pointer-events: none;
+  [data-toolbar-tooltip-trigger][data-toolbar-delete] {
+    position: relative;
 
-    [data-column-hand-drag] {
-      justify-content: center;
-      align-items: center;
-      visibility: hidden;
-      opacity: 0;
-      cursor: grab;
-      pointer-events: auto;
-
-      [data-column-hand-visual] {
-        border-radius: 2px;
-        width: 3px;
-        height: 80%;
-        background-color: #d6d6d6;
-        transition: all 0.2s;
-      }
+    [data-toolbar-tooltip] {
+      width: 206px;
+      white-space: normal;
+      font-size: 12px;
+      line-height: 20px;
+      text-align: left;
+      padding: 8px;
 
-      [data-column-hand-visual-drag] {
-        position: absolute;
-        top: 50%;
+      &[data-toolbar-tooltip-position='top'] {
+        margin-bottom: 12px;
         left: 50%;
-        transform: translate(-50%, -50%);
-        color: #3c67ff;
-        visibility: hidden;
-        opacity: 0;
-        transition: all 0.2s;
-        width: 16px;
-
-        svg {
-          width: 16px;
-          height: 16px;
-          transform: rotate(45deg);
-        }
+        transform: translateX(-50%);
       }
 
-      &:hover,
-      &[data-column-hand-drag-active='true'] {
-        [data-column-hand-visual] {
-          background-color: #3c67ff;
-        }
+      &[data-toolbar-tooltip-position='bottom'] {
+        top: 36px;
+        right: -4px;
+        left: unset;
 
-        [data-column-hand-visual-drag] {
-          visibility: visible;
-          opacity: 1;
+        &::after {
+          right: 10px;
+          left: unset;
         }
       }
     }
   }
 
-  [data-column][data-column-theme-section='true'] {
-    [data-column-hand-drag] {
-      [data-column-hand-visual-drag] {
-        color: #9144da;
+  [data-toolbar-title] {
+    position: relative;
+  }
+
+  [data-toolbar-tooltip-trigger],
+  [data-toolbar-title] {
+    [data-toolbar-tooltip] {
+      width: 145px;
+      white-space: normal;
+      font-size: 12px;
+      line-height: 20px;
+      text-align: left;
+      padding: 8px;
+
+      &[data-toolbar-tooltip-position='top'] {
+        margin-bottom: 12px;
+        transform: translateX(-64px);
       }
 
-      &:hover,
-      &[data-column-hand-drag-active='true'] {
-        [data-column-hand-visual] {
-          background-color: #9144da;
-        }
+      &[data-toolbar-tooltip-position='bottom'] {
+        top: 36px;
+        right: -4px;
+        left: unset;
 
-        [data-column-hand-visual-drag] {
-          visibility: visible;
-          opacity: 1;
+        &::after {
+          right: 10px;
+          left: unset;
         }
       }
     }
   }
 
-  [data-column][data-column-visible],
-  [data-column][data-column-force-visible='true'],
-  [data-column][data-column-is-drag-visible='true'] {
-    [data-column-hand-drag] {
-      visibility: visible;
-      opacity: 1;
+  [data-toolbar-tooltip-trigger][data-toolbar-add-top],
+  [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] {
+    [data-toolbar-tooltip] {
+      margin-bottom: 12px;
+      left: 50%;
+      transform: translateX(-50%);
     }
   }
 }
@@ -1102,7 +1127,7 @@
     min-width: 284px;
     display: flex;
     flex-direction: column;
-    border-radius: 12px;
+    border-radius: 3px;
     position: absolute;
     right: -4px;
     top: 100%;
@@ -1122,7 +1147,7 @@
 
   .theme-section-tooltip__image {
     background: #212121;
-    border-radius: 12px 12px 0 0;
+    border-radius: 3px 3px 0 0;
     padding-top: 16px;
     padding-bottom: 8px;
     padding-left: 21px;
@@ -1151,11 +1176,38 @@
       font-weight: 400;
       line-height: 24px;
     }
+
+    &-limit {
+      border-radius: 8px;
+
+      &__title {
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      &-desc {
+        color: #f9f9f9;
+      }
+
+      button {
+        cursor: pointer;
+        width: 100%;
+        text-align: center;
+        background: #3c67ff;
+        border-radius: 3px;
+        height: 40px;
+        font-size: 12px;
+        line-height: 20px;
+        color: #f9f9f9;
+        font-weight: 500;
+        transition: all 0.15s ease-in;
+      }
+    }
   }
 
   .theme-section-tooltip__action {
     padding: 16px;
-    border-radius: 0 0 12px 12px;
+    border-radius: 0 0 3px 3px;
     border-top: solid 1px #3b3b3b;
     background: #151515;
     display: flex;
@@ -1166,7 +1218,7 @@
       width: 100%;
       text-align: center;
       background: #3c67ff;
-      border-radius: 8px;
+      border-radius: 3px;
       height: 40px;
       font-size: 14px;
       line-height: 24px;
@@ -1228,7 +1280,8 @@
     transition: opacity 0.25s;
   }
 
-  [data-onboarding-wrapper] {}
+  [data-onboarding-wrapper] {
+  }
 
   [data-icon] {
     position: absolute;
@@ -1268,9 +1321,11 @@
     top: -4px;
     left: 16px;
     /* Popover */
-    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
+    box-shadow:
+      0px 4px 16px 0px rgba(0, 0, 0, 0.12),
+      0px -4px 16px 0px rgba(0, 0, 0, 0.06);
 
-    &[data-position="top"] {
+    &[data-position='top'] {
       top: unset;
       bottom: -4px;
     }
@@ -1283,10 +1338,10 @@
     z-index: 99;
     border-radius: 8px;
     background-color: transparent;
-    transition: background .25s;
+    transition: background 0.25s;
 
     &:hover {
-      background-color: #E2E2E2;
+      background-color: #e2e2e2;
     }
 
     svg {
@@ -1304,7 +1359,7 @@
 
   h3 {
     color: #212121;
-    font-family: Inter;
+    font-family: Inter, sans-serif;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
@@ -1315,7 +1370,7 @@
 
   p {
     color: #676767;
-    font-family: Inter;
+    font-family: Inter, sans-serif;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -1324,6 +1379,6 @@
   }
 }
 
-[data-slot="children"] {
-  font-family: Inter;
+[data-slot='children'] {
+  font-family: Inter, sans-serif;
 }

package/src/css/helpers/_layout.css

@@ -2,22 +2,31 @@
 
 .wrapper,
 [style*="--$(prefix)wrapper:"] {
-  max-width: var(--$(prefix)wrapper);
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: var(--$(prefix)gutter);
-  padding-right: var(--$(prefix)gutter);
+  max-width: var(--$(
+      prefix)wrapper
+  );
+margin-left: auto;
+margin-right: auto;
+padding-left: var(--$(
+    prefix)gutter
+);
+padding-right: var(--$(
+    prefix)gutter
+);
 
-  @media only screen and (min-width:640px) {
-    --$(prefix)gutter: var(--$(prefix)gutter-sm);
-  }
-  @media only screen and (min-width:768px) {
-    --$(prefix)gutter: var(--$(prefix)gutter-md);
-  }
-  @media only screen and (min-width:1024px) {
-    --$(prefix)gutter: var(--$(prefix)gutter-lg);
-  }
-  @media only screen and (min-width:1280px) {
-    --$(prefix)gutter: var(--$(prefix)gutter-xl);
-  }
+@media only screen and (min-width:640px) {
+  --$(prefix)gutter: var(--$(prefix)gutter-sm);
+}
+
+@media only screen and (min-width:768px) {
+  --$(prefix)gutter: var(--$(prefix)gutter-md);
+}
+
+@media only screen and (min-width:1025px) {
+  --$(prefix)gutter: var(--$(prefix)gutter-lg);
+}
+
+@media only screen and (min-width:1280px) {
+  --$(prefix)gutter: var(--$(prefix)gutter-xl);
+}
 }

package/src/css/medias.css

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

package/src/css/utilities/_whitespace.css

@@ -0,0 +1 @@
+@mixin svar white-space, ws;

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

@@ -336,12 +336,12 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap',
   },
-  // {
-  //   property: 'grid-row',
-  //   shortHand: 'gr',
-  //   mediaQuery: true,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row',
-  // },
+  {
+    property: 'grid-row',
+    shortHand: 'gr',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row',
+  },
   {
     property: 'grid-template-columns',
     shortHand: 'gtc',
@@ -489,7 +489,7 @@ module.exports = [
   },
   // {
   //   property: 'rotate',
-  //   shortHand: 'rt',
+  //   shortHand: 'rotate',
   //   mediaQuery: true,
   //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/rotate',
   // },
@@ -709,12 +709,12 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility',
   },
-  // {
-  //   property: 'white-space',
-  //   shortHand: 'ws',
-  //   mediaQuery: true,
-  //   mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space',
-  // },
+  {
+    property: 'white-space',
+    shortHand: 'ws',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space',
+  },
   {
     property: 'width',
     shortHand: 'w',
@@ -739,4 +739,10 @@ module.exports = [
     mediaQuery: true,
     mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/z-index',
   },
+  {
+    property: 'writing-mode',
+    shortHand: 'wm',
+    mediaQuery: true,
+    mdnReference: 'https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode',
+  },
 ];