Skip to content

Commit f335813

Browse files
cedric07cedric07
committed
Move colors in theme json and change SCSS variables to the new name based on the new generated theme-json SCSS variable file
1 parent d2202cd commit f335813

File tree

17 files changed

+54
-151
lines changed

17 files changed

+54
-151
lines changed

‎inc/Services/Editor.php‎

Lines changed: 0 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ public function get_service_name(): string {
3737
* @param Service_Container $container
3838
*/
3939
public function boot( Service_Container $container ): void {
40-
$this->after_theme_setup();
4140
/**
4241
* Load editor style css for admin and frontend
4342
*/
@@ -58,84 +57,6 @@ public function boot( Service_Container $container ): void {
5857
add_filter( 'allowed_block_types_all', [ $this, 'gutenberg_blocks_allowed' ], 10, 2 );
5958
}
6059

61-
/**
62-
* Register :
63-
* - theme_supports
64-
* - color palettes
65-
* - font sizes
66-
* - etc.
67-
*
68-
*/
69-
private function after_theme_setup(): void {
70-
71-
//color palettes
72-
add_theme_support(
73-
'editor-color-palette',
74-
[
75-
[
76-
'name' => __( 'Black', 'beapi-frontend-framework' ),
77-
'slug' => 'black',
78-
'color' => '#000'
79-
],
80-
[
81-
'name' => __( 'White', 'beapi-frontend-framework' ),
82-
'slug' => 'white',
83-
'color' => '#fff'
84-
],
85-
[
86-
'name' => __( 'Yellow 500', 'beapi-frontend-framework' ),
87-
'slug' => 'yellow-500',
88-
'color' => '#ffe600'
89-
],
90-
[
91-
'name' => __( 'Grey 100', 'beapi-frontend-framework' ),
92-
'slug' => 'grey-100',
93-
'color' => '#eee'
94-
],
95-
[
96-
'name' => __( 'Grey 200', 'beapi-frontend-framework' ),
97-
'slug' => 'grey-200',
98-
'color' => '#ccc'
99-
],
100-
[
101-
'name' => __( 'Grey 300', 'beapi-frontend-framework' ),
102-
'slug' => 'grey-300',
103-
'color' => '#aaa'
104-
],
105-
[
106-
'name' => __( 'Grey 400', 'beapi-frontend-framework' ),
107-
'slug' => 'grey-400',
108-
'color' => '#999'
109-
],
110-
[
111-
'name' => __( 'Grey 500', 'beapi-frontend-framework' ),
112-
'slug' => 'grey-500',
113-
'color' => '#888'
114-
],
115-
[
116-
'name' => __( 'Grey 600', 'beapi-frontend-framework' ),
117-
'slug' => 'grey-600',
118-
'color' => '#777'
119-
],
120-
[
121-
'name' => __( 'Grey 700', 'beapi-frontend-framework' ),
122-
'slug' => 'grey-700',
123-
'color' => '#555'
124-
],
125-
[
126-
'name' => __( 'Grey 800', 'beapi-frontend-framework' ),
127-
'slug' => 'grey-800',
128-
'color' => '#333'
129-
],
130-
[
131-
'name' => __( 'Grey 900', 'beapi-frontend-framework' ),
132-
'slug' => 'grey-900',
133-
'color' => '#111'
134-
],
135-
]
136-
);
137-
}
138-
13960
/**
14061
* editor style
14162
*/

‎src/scss/01-abstract/_variables.scss‎

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,19 @@
11
@use "sass:map";
22
@use "sass:math";
3+
@use "./theme-json" as *;
34

45
$entry-file-name: "undefined";
56

67
/**
78
* Variables
89
*/
910

10-
// ==========
11-
// Colors
12-
// ==========
13-
14-
// ----
15-
// Dark/Light colors
16-
// ----
17-
$color-light: #fff;
18-
$color-dark: #000;
19-
20-
// ----
21-
// Grey colors
22-
// ----
23-
$color-grey-100: var(--wp--preset--color--grey-100);
24-
$color-grey-200: var(--wp--preset--color--grey-200);
25-
$color-grey-300: var(--wp--preset--color--grey-300);
26-
$color-grey-400: var(--wp--preset--color--grey-400);
27-
$color-grey-500: var(--wp--preset--color--grey-500);
28-
$color-grey-600: var(--wp--preset--color--grey-600);
29-
$color-grey-700: var(--wp--preset--color--grey-700);
30-
$color-grey-800: var(--wp--preset--color--grey-800);
31-
$color-grey-900: var(--wp--preset--color--grey-900);
32-
33-
// ----
34-
// Palette colors
35-
// ----
36-
$color-yellow-500: var(--wp--preset--color--yellow-500);
37-
3811
// ----
3912
// Theme colors
4013
// ----
41-
$color-primary: $color-yellow-500;
42-
$color-secondary: $color-grey-400;
43-
$color-text: $color-grey-900;
14+
$color-primary: $settings-color-yellow-500;
15+
$color-secondary: $settings-color-grey-400;
16+
$color-text: $settings-color-grey-900;
4417

4518
/**
4619
* Sizes
@@ -87,7 +60,7 @@ $breakpoints: (
8760
// ----
8861
// border
8962
// ----
90-
$base-border-color: $color-grey-800;
63+
$base-border-color: $settings-color-grey-800;
9164
$base-border: 1px solid $base-border-color;
9265
$base-border-radius: 3px;
9366

@@ -103,13 +76,9 @@ $font-family-primary: "Poppins", "Poppins-fallback", sans-serif;
10376
// Font Size
10477
// ----
10578
$font-size-base: var(--paragraph--font-size-default);
106-
$font-size-xs: 14px;
107-
$font-size-sm: 16px;
108-
$font-size-md: 18px;
109-
$font-size-lg: 24px;
110-
$font-size-xl: 32px;
111-
$font-size-xxl: 48px;
112-
$font-size-xxxl: 56px;
79+
$font-size-sm: var(--paragraph--font-size-small);
80+
$font-size-lg: var(--paragraph--font-size-large);
81+
$font-size-xl: var(--paragraph--font-size-huge);
11382

11483
// ----
11584
// Line Height

‎src/scss/02-tools/_f-get-svg-url.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "../01-abstract/variables" as *;
2+
@use "../01-abstract/theme-json" as *;
23
@use "sass:color";
34
@use "sass:list";
45
@use "sass:map";
@@ -33,7 +34,7 @@
3334
*
3435
*/
3536

36-
@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") {
37+
@function get-svg-url($name: null, $fill: $settings-color-black, $opacity: 1, $style: "") {
3738

3839
$svgs: (
3940
// name-of-the-svg: (viewBox, content of the svg element)

‎src/scss/02-tools/_m-bg-fullwidth.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "../01-abstract/variables" as *;
2+
@use "../01-abstract/theme-json" as *;
23
@use "m-style-only" as *;
34

45
/**
@@ -11,12 +12,12 @@
1112
* Examples :
1213
*
1314
* .test {
14-
* @include bg-fullwidth($color-dark);
15+
* @include bg-fullwidth($settings-color-black);
1516
* }
1617
*
1718
*/
1819

19-
@mixin bg-fullwidth($color: $color-grey-100) {
20+
@mixin bg-fullwidth($color: $settings-color-grey-100) {
2021
position: relative;
2122

2223
&::before {

‎src/scss/02-tools/_m-btn.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "../01-abstract/variables" as *;
2+
@use "../01-abstract/theme-json" as *;
23
@use "m-hover" as *;
34

45
/**
@@ -34,7 +35,7 @@
3435
font-size: 12px;
3536
font-weight: 700;
3637
line-height: 16px;
37-
color: $color-dark;
38+
color: $settings-color-black;
3839
text-align: center;
3940
background-color: $color-primary;
4041
border-radius: 10px;
@@ -48,7 +49,7 @@
4849

4950
@mixin btn-block-hover {
5051
color: $color-primary;
51-
background-color: $color-dark;
52+
background-color: $settings-color-black;
5253
}
5354

5455
// Coloring

‎src/scss/02-tools/_m-checkbox-custom.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "../01-abstract/variables" as *;
2+
@use "../01-abstract/theme-json" as *;
23
@use "m-rtl" as *;
34
@use "m-sr-only" as *;
45

@@ -42,7 +43,7 @@
4243
height: $size;
4344
margin: 0;
4445
content: "";
45-
background-color: $color-light;
46+
background-color: $settings-color-white;
4647
border: $border-width solid $color;
4748

4849
@include rtl {

‎src/scss/02-tools/_m-scrollbar.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
* Examples :
2727
*
2828
* .my-scrollbar-custom {
29-
* @include scrollbar-color(10px, $color-primary, $color-dark);
29+
* @include scrollbar-color(10px, $color-primary, $settings-color-black);
3030
* }
3131
*
3232
*/

‎src/scss/02-tools/_m-select-custom.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "../01-abstract/variables" as *;
2+
@use "../01-abstract/theme-json" as *;
23
@use "f-get-svg-url" as *;
34
@use "m-rtl" as *;
45
@use "sass:color";
@@ -25,12 +26,12 @@
2526
font-size: 16px; // prevent iOS zoom
2627
line-height: 1.15;
2728
color: $color-text;
28-
background-color: $color-light;
29-
background-image: get-svg-url("down"), linear-gradient(to bottom, $color-light 0%, $color-light 100%);
29+
background-color: $settings-color-white;
30+
background-image: get-svg-url("down"), linear-gradient(to bottom, $settings-color-white 0%, $settings-color-white 100%);
3031
background-repeat: no-repeat, repeat;
3132
background-position: right 10px top 50%, 0 0;
3233
background-size: 10px auto, 100%;
33-
border: 1px solid $color-grey-500;
34+
border: 1px solid $settings-color-grey-500;
3435
border-radius: 10px;
3536
appearance: none;
3637

@@ -50,6 +51,6 @@
5051

5152
// Hover style
5253
&:hover {
53-
border-color: $color-grey-400;
54+
border-color: $settings-color-grey-400;
5455
}
5556
}

‎src/scss/03-base/_body.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "../01-abstract/variables" as *;
2+
@use "../01-abstract/theme-json" as *;
23
@use "../02-tools/m-rtl" as *;
34

45
html {
@@ -38,5 +39,5 @@ body {
3839
font-size: $font-size-base;
3940
font-weight: normal;
4041
color: $color-text;
41-
background-color: $color-light;
42+
background-color: $settings-color-white;
4243
}

‎src/scss/03-base/_forms.scss‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "../01-abstract/variables" as *;
2+
@use "../01-abstract/theme-json" as *;
23
@use "../02-tools/f-assign-inputs" as *;
34
@use "../02-tools/f-get-svg-url" as *;
45
@use "../02-tools/m-checkbox-custom" as *;
@@ -34,22 +35,22 @@ $all-text-inputs: assign-inputs($text-inputs-list);
3435
font-family: $font-family-primary;
3536
line-height: 1;
3637
color: $color-text;
37-
background: $color-light;
38-
border: 1px solid $color-grey-500;
38+
background: $settings-color-white;
39+
border: 1px solid $settings-color-grey-500;
3940
border-radius: 10px; //reset border radius for ios
4041
transition: border-color .5s ease;
4142
appearance: none;
4243

4344
&::placeholder {
44-
color: $color-grey-600;
45+
color: $settings-color-grey-600;
4546
}
4647

4748
&:hover {
48-
border-color: $color-grey-500;
49+
border-color: $settings-color-grey-500;
4950
}
5051

5152
&:focus {
52-
border-color: $color-grey-500;
53+
border-color: $settings-color-grey-500;
5354
}
5455
}
5556

@@ -108,7 +109,7 @@ $all-text-inputs: assign-inputs($text-inputs-list);
108109
width: 16px;
109110
height: 16px;
110111
cursor: pointer;
111-
background-image: get-svg-url("close", $color-dark);
112+
background-image: get-svg-url("close", $settings-color-black);
112113
background-repeat: no-repeat;
113114
background-size: contain;
114115
-webkit-appearance: none;

0 commit comments

Comments
 (0)