Skip to content

Commit

Permalink
Add CSS variables (#5437)
Browse files Browse the repository at this point in the history 
* Add CSS variables + remove unused SCSS variables

* Prefixing css variables

* Updating the doc

* Replace darken() and lighten() sass functions by using CSS color-mix() runtime function so it can be used with css variables
  • Loading branch information
@quentin-bettoum
quentin-bettoum authored Oct 8, 2023
1 parent ff68c88 commit 2197d6a
Show file tree
Hide file tree
Showing 14 changed files with 189 additions and 140 deletions.
2 changes: 1 addition & 1 deletion dist/css/grapes.min.css
View file

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions docs/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -703,6 +703,19 @@ To complete our builder let's customize its color palette and to make it more vi
}
```

There is also a bunch of [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that you can use to customize the styles of the editor.

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;
}
```


And here is our final result:

<Demo id="final-result">
Expand Down
8 changes: 4 additions & 4 deletions src/styles/scss/_gjs_assets.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
position: relative;
height: 70px;
width: 30%;
background-color: $mainColor;
background-color: var(--grapes-main-color);
border-radius: 2px;
float: left;
overflow: hidden;
Expand Down Expand Up @@ -102,7 +102,7 @@
}

.#{$am-prefix}asset {
border-bottom: 1px solid darken($mainDkColor, 3%);
border-bottom: 1px solid darken-color(var(--grapes-main-dark-color), 3%);
padding: 5px;
cursor: pointer;
position: relative;
Expand All @@ -115,11 +115,11 @@
}

.#{$am-prefix}highlight {
background-color: $mainLhColor;
background-color: var(--grapes-main-light-color);
}

.#{$am-prefix}assets-cont {
background-color: $mainDklColor;
background-color: var(--grapes-secondary-dark-color);
border-radius: 3px;
box-sizing: border-box;
padding: 10px;
Expand Down
31 changes: 13 additions & 18 deletions src/styles/scss/_gjs_canvas.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
$frameAnimation: 0.35s ease !default;
$canvasTop: 40px !default;
$guide_pad: 5px !default;

.#{$prefix} {
Expand Down Expand Up @@ -193,14 +192,14 @@ $guide_pad: 5px !default;

.#{$cv-prefix}canvas {
box-sizing: border-box;
width: (100% - $leftWidth);
height: calc(100% - #{$canvasTop});
width: calc(100% - var(--grapes-left-width));
height: calc(100% - var(--grapes-canvas-top));
bottom: 0;
overflow: hidden;
z-index: 1;
position: absolute;
left: 0;
top: $canvasTop;
top: var(--grapes-canvas-top);

&-bg {
background-color: rgba(0, 0, 0, 0.15);
Expand Down Expand Up @@ -247,19 +246,19 @@ $guide_pad: 5px !default;
.#{$app-prefix}highlighter,
.#{$app-prefix}highlighter-sel {
position: absolute;
outline: 1px solid $colorBlue;
outline: 1px solid var(--grapes-color-blue);
outline-offset: -1px;
pointer-events: none;
width: 100%;
height: 100%;
}

.#{$app-prefix}highlighter-warning {
outline: 3px solid $colorYell;
outline: 3px solid var(--grapes-color-yellow);
}

.#{$app-prefix}highlighter-sel {
outline: 2px solid $colorBlue;
outline: 2px solid var(--grapes-color-blue);
outline-offset: -2px;
}

Expand Down Expand Up @@ -304,7 +303,7 @@ $guide_pad: 5px !default;

.#{$app-prefix}toolbar {
position: absolute;
background-color: $colorBlue;
background-color: var(--grapes-color-blue);
white-space: nowrap;
color: white;
z-index: 10;
Expand Down Expand Up @@ -335,10 +334,6 @@ $guide_pad: 5px !default;
z-index: 9;
}

.#{$app-prefix}margin-v {

}

.#{$app-prefix}margin-v-el,
.#{$app-prefix}padding-v-el,
.#{$app-prefix}fixedmargin-v-el,
Expand All @@ -364,11 +359,11 @@ $guide_pad: 5px !default;
.#{$app-prefix}resizer-h {
pointer-events: all;
position: absolute;
border: 3px solid $colorBlue;
border: 3px solid var(--grapes-color-blue);
width: 10px;
height: 10px;
background-color: #fff;
margin: $hndlMargin;
margin: var(--grapes-handle-margin);
}

.#{$app-prefix}resizer-h-tl {
Expand All @@ -385,22 +380,22 @@ $guide_pad: 5px !default;

.#{$app-prefix}resizer-h-tc {
top: 0;
margin: $hndlMargin auto;
margin: var(--grapes-handle-margin) auto;
left: 0;
right: 0;
cursor: ns-resize;
}

.#{$app-prefix}resizer-h-cl {
left: 0;
margin: auto $hndlMargin;
margin: auto var(--grapes-handle-margin);
top: 0;
bottom: 0;
cursor: ew-resize;
}

.#{$app-prefix}resizer-h-cr {
margin: auto $hndlMargin;
margin: auto var(--grapes-handle-margin);
top: 0;
bottom: 0;
right: 0;
Expand All @@ -415,7 +410,7 @@ $guide_pad: 5px !default;

.#{$app-prefix}resizer-h-bc {
bottom: 0;
margin: $hndlMargin auto;
margin: var(--grapes-handle-margin) auto;
left: 0;
right: 0;
cursor: ns-resize;
Expand Down
52 changes: 26 additions & 26 deletions src/styles/scss/_gjs_inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
@mixin rangeThumbStyle() {
height: 10px;
width: 10px;
border: 1px solid $mainDkColor;
border: 1px solid var(--grapes-main-dark-color);
border-radius: 100%;
background-color: $fontColor;
background-color: var(--grapes-font-color);
cursor: pointer;
}

@mixin rangeTrackStyle() {
background-color: $mainDkColor;
background-color: var(--grapes-main-dark-color);
border-radius: 1px;
margin-top: 3px;
height: 3px;
Expand All @@ -37,7 +37,7 @@
&select:-moz-focusring,
&select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $mainLhlColor;
text-shadow: 0 0 0 var(--grapes-secondary-light-color);
}

&input:focus,
Expand All @@ -60,7 +60,7 @@
box-sizing: border-box;
width: 100%;
position: relative;
padding: $inputPadding;
padding: var(--grapes-input-padding);
z-index: 1;

&:focus {
Expand Down Expand Up @@ -96,12 +96,12 @@
.#{$sm-prefix}select option,
.#{$app-prefix}fields option,
.#{$sm-prefix}unit option {
background-color: $mainColor;
color: $fontColor;
background-color: var(--grapes-main-color);
color: var(--grapes-font-color);
}

.#{$app-prefix}field {
background-color: $mainDkColor;
background-color: var(--grapes-main-dark-color);
border: none;
box-shadow: none;
border-radius: 2px;
Expand All @@ -126,8 +126,8 @@
bottom: 0;
top: 0;
margin: auto;
right: $inputPadding;
border-top: 4px solid $arrowColor;
right: var(--grapes-input-padding);
border-top: 4px solid var(--grapes-arrow-color);
position: absolute;
height: 0;
width: 0;
Expand All @@ -144,7 +144,7 @@
width: 9px;
z-index: 10;
bottom: 0;
right: $inputPadding - 2px;
right: calc(var(--grapes-input-padding) - 2px);
top: 0;
}

Expand All @@ -156,20 +156,20 @@

.#{$app-prefix}field-color {
input {
padding-right: $colorpSize;
padding-right: var(--grapes-color-input-padding);
box-sizing: border-box;
}
}

.#{$app-prefix}field-colorp {
border-left: 1px solid $mainDkColor;
border-left: 1px solid var(--grapes-main-dark-color);
box-sizing: border-box;
height: 100%;
padding: 2px;
position: absolute;
right: 0;
top: 0;
width: $colorpSize;
width: var(--grapes-color-input-padding);
z-index: 10;

.#{$app-prefix}checker-bg {
Expand All @@ -188,11 +188,11 @@
}

.#{$app-prefix}field-color-picker {
background-color: $fontColor;
background-color: var(--grapes-font-color);
cursor: pointer;
height: 100%;
width: 100%;
box-shadow: 0 0 1px $mainDkColor;
box-shadow: 0 0 1px var(--grapes-main-dark-color);
border-radius: 1px;
position: absolute;
top: 0;
Expand Down Expand Up @@ -220,14 +220,14 @@
.#{$app-prefix}radio-item {
flex: 1 1 auto;
text-align: center;
border-left: 1px solid $darkTextShadow;
border-left: 1px solid var(--grapes-dark-text-shadow);

&:first-child {
border: none;
}

&:hover {
background: $mainDkColor;
background: var(--grapes-main-dark-color);
}

input {
Expand All @@ -246,7 +246,7 @@
.#{$app-prefix}radio-item-label {
cursor: pointer;
display: block;
padding: $inputPadding;
padding: var(--grapes-input-padding);
}

.#{$app-prefix}field-units {
Expand All @@ -262,7 +262,7 @@
right: 10px;
top: 3px;
font-size: 10px;
color: $arrowColor;
color: var(--grapes-arrow-color);
cursor: pointer;
}

Expand All @@ -277,13 +277,13 @@
width: 0;
border-left: 3px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid $arrowColor;
border-top: 4px solid var(--grapes-arrow-color);
bottom: 4px;
cursor: pointer;
}

.#{$app-prefix}field-arrow-u {
border-bottom: 4px solid $arrowColor;
border-bottom: 4px solid var(--grapes-arrow-color);
border-top: none;
top: 4px;
}
Expand Down Expand Up @@ -339,15 +339,15 @@
.#{$app-prefix}btn {
&-prim {
color: inherit;
background-color: $mainLhColor;
background-color: var(--grapes-main-light-color);
border-radius: 2px;
padding: 3px 6px;
padding: $inputPadding;
padding: var(--grapes-input-padding);
cursor: pointer;
border: none;

&:active {
background-color: $mainLhColor;
background-color: var(--grapes-main-light-color);
}
}

Expand All @@ -369,7 +369,7 @@
.#{$app-prefix}add-trasp {
background: none;
border: none;
color: $fontColor;
color: var(--grapes-font-color);
cursor: pointer;
font-size: 1em;
border-radius: 2px;
Expand Down
6 changes: 3 additions & 3 deletions src/styles/scss/_gjs_layers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ $layerNameSpacing: 5px !default;

.#{$nv-prefix} {
&selected-parent {
border: 1px solid $colorYell;
border: 1px solid var(--grapes-color-yellow);
}

&opac50 {
Expand All @@ -15,7 +15,7 @@ $layerNameSpacing: 5px !default;
text-align: left;
position: relative;
background-color: rgba(0, 0, 0, 0.1);
font-size: $fontSizeS;
font-size: var(--grapes-font-size);
display: grid;

&-hidden {
Expand Down Expand Up @@ -160,7 +160,7 @@ $layerNameSpacing: 5px !default;
padding: 1px;

&.#{$nv-prefix}insert {
background-color: $colorGreen;
background-color: var(--grapes-color-green);
}
}
}
Expand Down
Loading

0 comments on commit 2197d6a

Please sign in to comment.