Up CSS variables prefix

GrapesJS · Oct 8, 2023 · c1a6315 · c1a6315
1 parent 2197d6a
commit c1a6315
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 160 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -708,10 +708,10 @@ There is also a bunch of [CSS custom properties (variables)](https://developer.m
 For example, you could achieve the same result as above by doing this:
 ```css
 :root {
-  --grapes-primary-color: #78366a;
-  --grapes-secondary-color: rgba(255, 255, 255, 0.7);
-  --grapes-tertiary-color: #ec5896;
-  --grapes-quaternary-color: #ec5896;
+  --gjs-primary-color: #78366a;
+  --gjs-secondary-color: rgba(255, 255, 255, 0.7);
+  --gjs-tertiary-color: #ec5896;
+  --gjs-quaternary-color: #ec5896;
 }
 ```
 

diff --git a/src/styles/scss/_gjs_assets.scss b/src/styles/scss/_gjs_assets.scss
@@ -48,7 +48,7 @@
   position: relative;
   height: 70px;
   width: 30%;
-  background-color: var(--grapes-main-color);
+  background-color: var(--gjs-main-color);
   border-radius: 2px;
   float: left;
   overflow: hidden;
@@ -102,7 +102,7 @@
 }
 
 .#{$am-prefix}asset {
-  border-bottom: 1px solid darken-color(var(--grapes-main-dark-color), 3%);
+  border-bottom: 1px solid darken-color(var(--gjs-main-dark-color), 3%);
   padding: 5px;
   cursor: pointer;
   position: relative;
@@ -115,11 +115,11 @@
 }
 
 .#{$am-prefix}highlight {
-  background-color: var(--grapes-main-light-color);
+  background-color: var(--gjs-main-light-color);
 }
 
 .#{$am-prefix}assets-cont {
-  background-color: var(--grapes-secondary-dark-color);
+  background-color: var(--gjs-secondary-dark-color);
   border-radius: 3px;
   box-sizing: border-box;
   padding: 10px;

diff --git a/src/styles/scss/_gjs_canvas.scss b/src/styles/scss/_gjs_canvas.scss
@@ -192,14 +192,14 @@ $guide_pad: 5px !default;
 
 .#{$cv-prefix}canvas {
   box-sizing: border-box;
-  width: calc(100% - var(--grapes-left-width));
-  height: calc(100% - var(--grapes-canvas-top));
+  width: calc(100% - var(--gjs-left-width));
+  height: calc(100% - var(--gjs-canvas-top));
   bottom: 0;
   overflow: hidden;
   z-index: 1;
   position: absolute;
   left: 0;
-  top: var(--grapes-canvas-top);
+  top: var(--gjs-canvas-top);
 
   &-bg {
     background-color: rgba(0, 0, 0, 0.15);
@@ -246,19 +246,19 @@ $guide_pad: 5px !default;
   .#{$app-prefix}highlighter,
   .#{$app-prefix}highlighter-sel {
     position: absolute;
-    outline: 1px solid var(--grapes-color-blue);
+    outline: 1px solid var(--gjs-color-blue);
     outline-offset: -1px;
     pointer-events: none;
     width: 100%;
     height: 100%;
   }
 
   .#{$app-prefix}highlighter-warning {
-    outline: 3px solid var(--grapes-color-yellow);
+    outline: 3px solid var(--gjs-color-yellow);
   }
 
   .#{$app-prefix}highlighter-sel {
-    outline: 2px solid var(--grapes-color-blue);
+    outline: 2px solid var(--gjs-color-blue);
     outline-offset: -2px;
   }
 
@@ -303,7 +303,7 @@ $guide_pad: 5px !default;
 
 .#{$app-prefix}toolbar {
   position: absolute;
-  background-color: var(--grapes-color-blue);
+  background-color: var(--gjs-color-blue);
   white-space: nowrap;
   color: white;
   z-index: 10;
@@ -359,11 +359,11 @@ $guide_pad: 5px !default;
 .#{$app-prefix}resizer-h {
   pointer-events: all;
   position: absolute;
-  border: 3px solid var(--grapes-color-blue);
+  border: 3px solid var(--gjs-color-blue);
   width: 10px;
   height: 10px;
   background-color: #fff;
-  margin: var(--grapes-handle-margin);
+  margin: var(--gjs-handle-margin);
 }
 
 .#{$app-prefix}resizer-h-tl {
@@ -380,22 +380,22 @@ $guide_pad: 5px !default;
 
 .#{$app-prefix}resizer-h-tc {
   top: 0;
-  margin: var(--grapes-handle-margin) auto;
+  margin: var(--gjs-handle-margin) auto;
   left: 0;
   right: 0;
   cursor: ns-resize;
 }
 
 .#{$app-prefix}resizer-h-cl {
   left: 0;
-  margin: auto var(--grapes-handle-margin);
+  margin: auto var(--gjs-handle-margin);
   top: 0;
   bottom: 0;
   cursor: ew-resize;
 }
 
 .#{$app-prefix}resizer-h-cr {
-  margin: auto var(--grapes-handle-margin);
+  margin: auto var(--gjs-handle-margin);
   top: 0;
   bottom: 0;
   right: 0;
@@ -410,7 +410,7 @@ $guide_pad: 5px !default;
 
 .#{$app-prefix}resizer-h-bc {
   bottom: 0;
-  margin: var(--grapes-handle-margin) auto;
+  margin: var(--gjs-handle-margin) auto;
   left: 0;
   right: 0;
   cursor: ns-resize;

diff --git a/src/styles/scss/_gjs_inputs.scss b/src/styles/scss/_gjs_inputs.scss
@@ -3,14 +3,14 @@
 @mixin rangeThumbStyle() {
   height: 10px;
   width: 10px;
-  border: 1px solid var(--grapes-main-dark-color);
+  border: 1px solid var(--gjs-main-dark-color);
   border-radius: 100%;
-  background-color: var(--grapes-font-color);
+  background-color: var(--gjs-font-color);
   cursor: pointer;
 }
 
 @mixin rangeTrackStyle() {
-  background-color: var(--grapes-main-dark-color);
+  background-color: var(--gjs-main-dark-color);
   border-radius: 1px;
   margin-top: 3px;
   height: 3px;
@@ -37,7 +37,7 @@
   &select:-moz-focusring,
   &select select:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 var(--grapes-secondary-light-color);
+    text-shadow: 0 0 0 var(--gjs-secondary-light-color);
   }
 
   &input:focus,
@@ -60,7 +60,7 @@
       box-sizing: border-box;
       width: 100%;
       position: relative;
-      padding: var(--grapes-input-padding);
+      padding: var(--gjs-input-padding);
       z-index: 1;
 
       &:focus {
@@ -96,12 +96,12 @@
 .#{$sm-prefix}select option,
 .#{$app-prefix}fields option,
 .#{$sm-prefix}unit option {
-  background-color: var(--grapes-main-color);
-  color: var(--grapes-font-color);
+  background-color: var(--gjs-main-color);
+  color: var(--gjs-font-color);
 }
 
 .#{$app-prefix}field {
-  background-color: var(--grapes-main-dark-color);
+  background-color: var(--gjs-main-dark-color);
   border: none;
   box-shadow: none;
   border-radius: 2px;
@@ -126,8 +126,8 @@
     bottom: 0;
     top: 0;
     margin: auto;
-    right: var(--grapes-input-padding);
-    border-top: 4px solid var(--grapes-arrow-color);
+    right: var(--gjs-input-padding);
+    border-top: 4px solid var(--gjs-arrow-color);
     position: absolute;
     height: 0;
     width: 0;
@@ -144,7 +144,7 @@
     width: 9px;
     z-index: 10;
     bottom: 0;
-    right: calc(var(--grapes-input-padding) - 2px);
+    right: calc(var(--gjs-input-padding) - 2px);
     top: 0;
   }
 
@@ -156,20 +156,20 @@
 
 .#{$app-prefix}field-color {
   input {
-    padding-right: var(--grapes-color-input-padding);
+    padding-right: var(--gjs-color-input-padding);
     box-sizing: border-box;
   }
 }
 
 .#{$app-prefix}field-colorp {
-  border-left: 1px solid var(--grapes-main-dark-color);
+  border-left: 1px solid var(--gjs-main-dark-color);
   box-sizing: border-box;
   height: 100%;
   padding: 2px;
   position: absolute;
   right: 0;
   top: 0;
-  width: var(--grapes-color-input-padding);
+  width: var(--gjs-color-input-padding);
   z-index: 10;
 
   .#{$app-prefix}checker-bg {
@@ -188,11 +188,11 @@
 }
 
 .#{$app-prefix}field-color-picker {
-  background-color: var(--grapes-font-color);
+  background-color: var(--gjs-font-color);
   cursor: pointer;
   height: 100%;
   width: 100%;
-  box-shadow: 0 0 1px var(--grapes-main-dark-color);
+  box-shadow: 0 0 1px var(--gjs-main-dark-color);
   border-radius: 1px;
   position: absolute;
   top: 0;
@@ -220,14 +220,14 @@
 .#{$app-prefix}radio-item {
   flex: 1 1 auto;
   text-align: center;
-  border-left: 1px solid var(--grapes-dark-text-shadow);
+  border-left: 1px solid var(--gjs-dark-text-shadow);
 
   &:first-child {
     border: none;
   }
 
   &:hover {
-    background: var(--grapes-main-dark-color);
+    background: var(--gjs-main-dark-color);
   }
 
   input {
@@ -246,7 +246,7 @@
 .#{$app-prefix}radio-item-label {
   cursor: pointer;
   display: block;
-  padding: var(--grapes-input-padding);
+  padding: var(--gjs-input-padding);
 }
 
 .#{$app-prefix}field-units {
@@ -262,7 +262,7 @@
   right: 10px;
   top: 3px;
   font-size: 10px;
-  color: var(--grapes-arrow-color);
+  color: var(--gjs-arrow-color);
   cursor: pointer;
 }
 
@@ -277,13 +277,13 @@
   width: 0;
   border-left: 3px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid var(--grapes-arrow-color);
+  border-top: 4px solid var(--gjs-arrow-color);
   bottom: 4px;
   cursor: pointer;
 }
 
 .#{$app-prefix}field-arrow-u {
-  border-bottom: 4px solid var(--grapes-arrow-color);
+  border-bottom: 4px solid var(--gjs-arrow-color);
   border-top: none;
   top: 4px;
 }
@@ -339,15 +339,15 @@
 .#{$app-prefix}btn {
   &-prim {
     color: inherit;
-    background-color: var(--grapes-main-light-color);
+    background-color: var(--gjs-main-light-color);
     border-radius: 2px;
     padding: 3px 6px;
-    padding: var(--grapes-input-padding);
+    padding: var(--gjs-input-padding);
     cursor: pointer;
     border: none;
 
     &:active {
-      background-color: var(--grapes-main-light-color);
+      background-color: var(--gjs-main-light-color);
     }
   }
 
@@ -369,7 +369,7 @@
 .#{$app-prefix}add-trasp {
   background: none;
   border: none;
-  color: var(--grapes-font-color);
+  color: var(--gjs-font-color);
   cursor: pointer;
   font-size: 1em;
   border-radius: 2px;

diff --git a/src/styles/scss/_gjs_layers.scss b/src/styles/scss/_gjs_layers.scss
@@ -3,7 +3,7 @@ $layerNameSpacing: 5px !default;
 
 .#{$nv-prefix} {
   &selected-parent {
-    border: 1px solid var(--grapes-color-yellow);
+    border: 1px solid var(--gjs-color-yellow);
   }
 
   &opac50 {
@@ -15,7 +15,7 @@ $layerNameSpacing: 5px !default;
     text-align: left;
     position: relative;
     background-color: rgba(0, 0, 0, 0.1);
-    font-size: var(--grapes-font-size);
+    font-size: var(--gjs-font-size);
     display: grid;
 
     &-hidden {
@@ -160,7 +160,7 @@ $layerNameSpacing: 5px !default;
       padding: 1px;
 
       &.#{$nv-prefix}insert {
-        background-color: var(--grapes-color-green);
+        background-color: var(--gjs-color-green);
       }
     }
   }

diff --git a/src/styles/scss/_gjs_modal.scss b/src/styles/scss/_gjs_modal.scss
@@ -1,6 +1,6 @@
 .#{$mdl-prefix} {
   &container {
-    font-family: var(--grapes-main-font);
+    font-family: var(--gjs-main-font);
     overflow-y: auto;
     position: fixed;
     background-color: rgba(0, 0, 0, 0.5);
@@ -48,7 +48,7 @@
 
   &header {
     position: relative;
-    border-bottom: 1px solid var(--grapes-main-dark-color);
+    border-bottom: 1px solid var(--gjs-main-dark-color);
     padding: 15px 15px 7px;
   }
 }