diff --git a/.gitignore b/.gitignore index 2386b581..0db15097 100644 --- a/.gitignore +++ b/.gitignore @@ -84,3 +84,7 @@ package-lock.json ### conf-img assets/conf-img/*.json + +### theme.json +src/scss/01-abstract/_theme-json.scss +theme.json diff --git a/config/plugins.js b/config/plugins.js index 8cd63bb7..8ed7d1c0 100644 --- a/config/plugins.js +++ b/config/plugins.js @@ -10,10 +10,14 @@ const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extract const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const WebpackImageSizesPlugin = require('./webpack-image-sizes-plugin') +const WebpackThemeJsonPlugin = require('./webpack-theme-json-plugin') module.exports = { get: function (mode) { const plugins = [ + new WebpackThemeJsonPlugin({ + watch: mode !== 'production', + }), new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*', '!images', '!images/**'], }), diff --git a/config/webpack-theme-json-plugin.js b/config/webpack-theme-json-plugin.js new file mode 100644 index 00000000..56ddcee6 --- /dev/null +++ b/config/webpack-theme-json-plugin.js @@ -0,0 +1,191 @@ +const chalk = require('chalk') +const path = require('path') +const fs = require('fs') + +const logId = '[' + chalk.blue('WebpackThemeJsonPlugin') + ']' + +class WebpackThemeJsonPlugin { + /** + * constructor + * @param {Object} options = { + * context: string - default: '../src/theme-json' + * output: string - default: '../theme.json' + * scssOutput: string - default: '../src/scss/00-variables/_theme-json.scss' + * watch: boolean - default: false + * } + */ + constructor(options) { + // folders + this._context = options.context || path.resolve(__dirname, '../src/theme-json') + '/' + this._output = options.output || path.resolve(__dirname, '../theme.json') + this._scssOutput = options.scssOutput || path.resolve(__dirname, '../src/scss/01-abstract/_theme-json.scss') + + if (options.watch) { + fs.watch(this._context, () => { + this.refresh() + }) + } + + this.refresh() + } + + /** + * apply + */ + apply() {} + + /** + * Generate theme json file + */ + generateThemeJson() { + const jsonFiles = fs.readdirSync(this._context, { + withFileTypes: true, + }) + const themeJson = {} + + jsonFiles.forEach((file) => { + if (file.isFile() && file.name.endsWith('.json')) { + let json = fs.readFileSync(this._context + file.name, 'utf8') + + try { + json = JSON.parse(json) + } catch (e) { + // eslint-disable-next-line no-console + console.error(logId, 'Error parsing JSON file:', file.name) + } + + if (isPlainObject(json)) { + extend(true, themeJson, json) + } else { + // eslint-disable-next-line no-console + console.error(logId, 'JSON file is not a plain object:', file.name) + } + } + }) + + fs.writeFileSync(this._output, JSON.stringify(themeJson, null, 2)) + // eslint-disable-next-line no-console + console.log(logId, 'JSON files successfully generated !') + + return this + } + + /** + * Generate scss variables file + */ + generateScssVariables() { + const comment = [ + '/**', + ' * Theme JSON', + ' * scss variables are extracted from theme.json', + ' *', + " * !!! DON'T EDIT THIS FILE !!!", + ' *', + ' */', + ] + const tasks = { + 'settings-color-palette'(key, value) { + let result = '' + const palette = [] + + for (const color of value) { + const colorVar = getVariableName('settings-color-' + color.slug) + result += `${colorVar}: ${color.color};\n` + palette.push(`${color.slug}: ${colorVar}`) + } + + return result + `$settings-palette: (\n\t${palette.join(',\n\t')}\n);\n` + }, + 'settings-custom': 'default', + 'settings-spacing-spacingSizes'(key, value) { + let result = '' + + for (const spacing of value) { + result += `${getVariableName('settings-spacing-' + spacing.slug)}: ${spacing.size};\n` + } + + return result + }, + } + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const taskNames = Object.keys(tasks) + let jsonFile = fs.readFileSync(this._output, 'utf8') + + // check if the theme.json file is valid + try { + jsonFile = JSON.parse(jsonFile) + } catch (e) { + // eslint-disable-next-line no-console + console.error(logId, 'Error parsing JSON file:', this._output) + return this + } + + // format the scss variable name + function getVariableName(id) { + return `$${id.replace(/([A-Z])/g, '-$1').toLowerCase()}` + } + + // traverse the theme.json file and generate the scss variables + function traverse(obj, parents = [], result = '') { + for (const key in obj) { + const id = (parents.length > 0 ? parents.join('-') + '-' : '') + key + const taskName = taskNames.filter((t) => (id.startsWith(t) ? t : null))[0] + const task = taskName ? tasks[taskName] : null + + if (isPlainObject(obj[key])) { + result += traverse(obj[key], [...parents, key]) + } else if (task) { + if (task === 'default' && typeof obj[key] === 'string') { + result += `${getVariableName(id)}: ${obj[key]};\n` + } else if (typeof task === 'function') { + result += task(key, obj[key]) + } + } + } + + return result + } + + fs.writeFileSync(this._scssOutput, comment.join('\n') + '\n' + traverse(jsonFile)) + + return this + } + + /** + * Refresh the theme json and scss variables files + */ + refresh() { + this.generateThemeJson() + this.generateScssVariables() + return this + } +} + +// ---- +// utils +// ---- +function isPlainObject(o) { + return o?.constructor === Object || Object.getPrototypeOf(o ?? 0) === null +} + +function extend() { + const args = arguments + const firstArgIsBool = typeof args[0] === 'boolean' + const deep = firstArgIsBool ? args[0] : false + const start = firstArgIsBool ? 1 : 0 + const rt = isPlainObject(args[start]) ? args[start] : {} + + for (let i = start + 1; i < args.length; i++) { + for (const prop in args[i]) { + if (deep && isPlainObject(args[i][prop])) { + rt[prop] = extend(true, {}, rt[prop], args[i][prop]) + } else if (typeof args[i][prop] !== 'undefined') { + rt[prop] = args[i][prop] + } + } + } + + return rt +} + +module.exports = WebpackThemeJsonPlugin diff --git a/inc/Services/Editor.php b/inc/Services/Editor.php index f8b1cebb..8cce42dc 100644 --- a/inc/Services/Editor.php +++ b/inc/Services/Editor.php @@ -37,7 +37,6 @@ public function get_service_name(): string { * @param Service_Container $container */ public function boot( Service_Container $container ): void { - $this->after_theme_setup(); /** * Load editor style css for admin and frontend */ @@ -48,11 +47,6 @@ public function boot( Service_Container $container ): void { */ $this->register_custom_block_styles(); - /** - * Customize theme.json settings - */ - add_filter( 'wp_theme_json_data_theme', [ $this, 'filter_theme_json_theme' ], 10, 1 ); - /** * Load editor JS for ADMIN */ @@ -63,86 +57,6 @@ public function boot( Service_Container $container ): void { add_filter( 'allowed_block_types_all', [ $this, 'gutenberg_blocks_allowed' ], 10, 2 ); } - /** - * Register : - * - theme_supports - * - color palettes - * - font sizes - * - etc. - * - */ - private function after_theme_setup(): void { - - //color palettes - add_theme_support( - 'editor-color-palette', - [ - [ - 'name' => __( 'Dark', 'beapi-frontend-framework' ), - 'slug' => 'dark', - 'color' => '#000000', - ], - [ - 'name' => __( 'Light', 'beapi-frontend-framework' ), - 'slug' => 'light', - 'color' => '#ffffff', - ], - [ - 'name' => __( 'Primary', 'beapi-frontend-framework' ), - 'slug' => 'primary', - 'color' => '#ffff00', - ], - [ - 'name' => __( 'Secondary', 'beapi-frontend-framework' ), - 'slug' => 'secondary', - 'color' => '#00ffff', - ], - ] - ); - // font sizes - add_theme_support( - 'editor-font-sizes', - [ - [ - 'name' => __( 'Title 6', 'beapi-frontend-framework' ), - 'shortName' => 'h6', - 'size' => 14, - 'slug' => 'h6', - ], - [ - 'name' => __( 'Title 5', 'beapi-frontend-framework' ), - 'shortName' => 'h5', - 'size' => 16, - 'slug' => 'h5', - ], - [ - 'name' => __( 'Title 4', 'beapi-frontend-framework' ), - 'shortName' => 'h4', - 'size' => 18, - 'slug' => 'h4', - ], - [ - 'name' => __( 'Title 3', 'beapi-frontend-framework' ), - 'shortName' => 'h3', - 'size' => 24, - 'slug' => 'h3', - ], - [ - 'name' => __( 'Title 2', 'beapi-frontend-framework' ), - 'shortName' => 'h2', - 'size' => 40, - 'slug' => 'h2', - ], - [ - 'name' => __( 'Title 1', 'beapi-frontend-framework' ), - 'shortName' => 'h1', - 'size' => 58, - 'slug' => 'h1', - ], - ] - ); - } - /** * editor style */ @@ -159,27 +73,6 @@ private function style(): void { add_editor_style( 'dist/' . $file ); } - /** - * Theme.json settings - * See https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/ - * - * @param \WP_Theme_JSON_Data $theme_json Class to access and update the underlying data. - * - * @return \WP_Theme_JSON_Data - */ - public function filter_theme_json_theme( \WP_Theme_JSON_Data $theme_json ): \WP_Theme_JSON_Data { - $custom_theme_json = [ - 'version' => 2, - 'settings' => [ - 'typography' => [ - 'dropCap' => false, - ], - ], - ]; - - return $theme_json->update_with( $custom_theme_json ); - } - /** * Editor script */ @@ -267,6 +160,25 @@ private function register_custom_block_styles() { 'label' => __( 'Huge', 'beapi-frontend-framework' ), ] ); + + for ( $i = 1; $i <= 6; $i++ ) { + $style = [ + 'name' => 'h' . $i, + 'label' => sprintf( __( 'Style H%s', 'beapi-frontend-framework' ), $i ), + ]; + + // heading + register_block_style( + 'core/heading', + $style + ); + + // paragraph + register_block_style( + 'core/paragraph', + $style + ); + } } /** diff --git a/page.php b/page.php index d31c5b43..39a68874 100644 --- a/page.php +++ b/page.php @@ -8,7 +8,7 @@

-
+

-
+
column : 72px and gutter -> 40px -* -* The max width of the fluid size container is for example 2200px. -* -* $column-preset: ( -* // preset for desktop -* d : ( -* column-width: 121.4724, // (2220 * 72 / 1304) - Container width : 2200px (1304px on 1440px viewport) - Column width : 121px (72px on 1440px viewport) -* gutter-width: 67.4846, // (2200 * 40 / 1304) - Gutter width : 67px (40px on 1440px viewport) -* total-column: 12 -* ), -* // preset for tablet -* t : ( -* column-width: 121.4724, -* gutter-width: 67.4846, -* total-column: 12 -* ), -* // preset for mobile -* m : ( -* column-width: 36, -* gutter-width: 24, -* total-column: 6 -* ) -* ); +* Only use for setup the grid to use the column mixin -> Corresponding to the layout settings in theme.json (1160px) +* The default and wide size is defined in the theme.json file. */ $column-preset: ( // preset for desktop @@ -113,19 +42,6 @@ $column-preset: ( ) ); -// ---- -// Containers -// ---- -$container-default-column-length: 8; -$container-default: ( - map.get(map.get($column-preset, d), column-width) * $container-default-column-length + map.get(map.get($column-preset, d), gutter-width) * ($container-default-column-length - 1) -) * 1px; -$container-wide: ( - map.get(map.get($column-preset, d), column-width) * map.get(map.get($column-preset, d), total-column) + map.get(map.get($column-preset, d), gutter-width) * (map.get(map.get($column-preset, d), total-column) - 1) -) * 1px; -$external-gutter: 50px; -$external-gutter-mobile: 20px; - // ---- // Breakpoints // Based on WordPress breakpoints (https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss) @@ -139,14 +55,12 @@ $breakpoints: ( md: 1080, mdl: 1279, // Do not use 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1 l: 1440, - container-default: math.div($container-default + $external-gutter-mobile * 2, 1px), - container-wide: math.div($container-wide + $external-gutter * 2, 1px), ); // ---- // border // ---- -$base-border-color: $color-grey-800; +$base-border-color: $settings-color-grey-800; $base-border: 1px solid $base-border-color; $base-border-radius: 3px; @@ -156,21 +70,17 @@ $base-border-radius: 3px; // ---- // Font Family // ---- -$font-family-primary: "Poppins", sans-serif; +$font-family-primary: "Poppins", "Poppins-fallback", sans-serif; // ---- // Font Size // ---- -$font-size-base: 16px; -$font-size-xs: 14px; -$font-size-sm: 16px; -$font-size-md: 18px; -$font-size-lg: 24px; -$font-size-xl: 32px; -$font-size-xxl: 48px; -$font-size-xxxl: 56px; +$font-size-base: var(--paragraph--font-size-default); +$font-size-sm: var(--paragraph--font-size-small); +$font-size-lg: var(--paragraph--font-size-large); +$font-size-xl: var(--paragraph--font-size-huge); // ---- // Line Height // ---- -$line-height-base: 1.4; +$line-height-base: var(--paragraph--line-height-default); diff --git a/src/scss/02-tools/_f-column.scss b/src/scss/02-tools/_f-column.scss index 2e2085d6..ff2c1575 100644 --- a/src/scss/02-tools/_f-column.scss +++ b/src/scss/02-tools/_f-column.scss @@ -141,5 +141,5 @@ $width: column-px($device, $nb-column, $nb-gutter, true); - @return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))}); + @return calc((100% - var(--responsive--gutter)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))}); } diff --git a/src/scss/02-tools/_f-get-svg-url.scss b/src/scss/02-tools/_f-get-svg-url.scss index b04a8810..221ba9dd 100644 --- a/src/scss/02-tools/_f-get-svg-url.scss +++ b/src/scss/02-tools/_f-get-svg-url.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "sass:color"; @use "sass:list"; @use "sass:map"; @@ -33,7 +34,7 @@ * */ -@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") { +@function get-svg-url($name: null, $fill: $settings-color-black, $opacity: 1, $style: "") { $svgs: ( // name-of-the-svg: (viewBox, content of the svg element) diff --git a/src/scss/02-tools/_m-align.scss b/src/scss/02-tools/_m-align.scss index a43c4536..e4a7e675 100644 --- a/src/scss/02-tools/_m-align.scss +++ b/src/scss/02-tools/_m-align.scss @@ -17,12 +17,14 @@ * */ +@use "../01-abstract/theme-json" as *; + @mixin align($direction: left) { float: $direction; @if ($direction == left) { - margin-inline-end: var(--spacing--block-1); + margin-inline-end: $settings-spacing-sm; } @else { - margin-inline-start: var(--spacing--block-1); + margin-inline-start: $settings-spacing-sm; } } diff --git a/src/scss/02-tools/_m-bg-fullwidth.scss b/src/scss/02-tools/_m-bg-fullwidth.scss index fdbf6568..fb2786f3 100644 --- a/src/scss/02-tools/_m-bg-fullwidth.scss +++ b/src/scss/02-tools/_m-bg-fullwidth.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "m-style-only" as *; /** @@ -11,12 +12,12 @@ * Examples : * * .test { - * @include bg-fullwidth($color-dark); + * @include bg-fullwidth($settings-color-black); * } * */ -@mixin bg-fullwidth($color: $color-grey-100) { +@mixin bg-fullwidth($color: $settings-color-grey-100) { position: relative; &::before { diff --git a/src/scss/02-tools/_m-block-vertical-spacing.scss b/src/scss/02-tools/_m-block-vertical-spacing.scss deleted file mode 100644 index 13d440ce..00000000 --- a/src/scss/02-tools/_m-block-vertical-spacing.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use "f-context-selector"; - -/** - * Block vertical spacing - */ - -/** - * Block vertical spacing - Make a top and bottom spacing between blocks - * - * @author Cédric Andrietti - * - * @param $type - * @param $spacing - * - * Examples : - * - * .my-block { - * @include block-vertical-spacing(var(--spacing--block-6)); - * } - * - * .my-block { - * @include block-vertical-spacing(padding, var(--spacing--block-4)); - * } - * - */ -@mixin block-vertical-spacing($type : margin, $spacing : var(--spacing--block-3)) { - #{f-context-selector.context-selector(".blocks-container > &", ".is-root-container > &, .is-root-container > .wp-block[data-align] > &, .is-root-container > .acf-block-preview > &, .is-root-container > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block-beapi-manual-block &, .is-root-container > .wp-block[data-align] > .acf-block-preview > &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-manual-block &")} { - #{$type}-top: $spacing; - #{$type}-bottom: $spacing; - - @if $type == padding { - margin-top: 0; - margin-bottom: 0; - } - } -} diff --git a/src/scss/02-tools/_m-btn.scss b/src/scss/02-tools/_m-btn.scss index b120d59e..982658eb 100644 --- a/src/scss/02-tools/_m-btn.scss +++ b/src/scss/02-tools/_m-btn.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "m-hover" as *; /** @@ -34,7 +35,7 @@ font-size: 12px; font-weight: 700; line-height: 16px; - color: $color-dark; + color: $settings-color-black; text-align: center; background-color: $color-primary; border-radius: 10px; @@ -48,7 +49,7 @@ @mixin btn-block-hover { color: $color-primary; - background-color: $color-dark; + background-color: $settings-color-black; } // Coloring diff --git a/src/scss/02-tools/_m-checkbox-custom.scss b/src/scss/02-tools/_m-checkbox-custom.scss index 63a99ed0..625c6c45 100644 --- a/src/scss/02-tools/_m-checkbox-custom.scss +++ b/src/scss/02-tools/_m-checkbox-custom.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "m-rtl" as *; @use "m-sr-only" as *; @@ -42,7 +43,7 @@ height: $size; margin: 0; content: ""; - background-color: $color-light; + background-color: $settings-color-white; border: $border-width solid $color; @include rtl { diff --git a/src/scss/02-tools/_m-container.scss b/src/scss/02-tools/_m-container.scss index bdd855d9..31207c8e 100644 --- a/src/scss/02-tools/_m-container.scss +++ b/src/scss/02-tools/_m-container.scss @@ -15,7 +15,7 @@ * */ -@mixin container($size: $container-wide) { - width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2)); +@mixin container($size: var(--wp--style--global--wide-size)) { + width: min(#{$size}, 100% - var(--responsive--gutter)); margin-inline: auto; } diff --git a/src/scss/02-tools/_m-declare-font-face.scss b/src/scss/02-tools/_m-declare-font-face.scss index 487833e3..3743a62e 100644 --- a/src/scss/02-tools/_m-declare-font-face.scss +++ b/src/scss/02-tools/_m-declare-font-face.scss @@ -24,7 +24,7 @@ * */ -@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style : normal, $font-stretch : normal, $font-format : "woff2") { +@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style : normal, $font-stretch : normal, $font-format : "woff2", $unicode-range : "U+0-10FFFF") { @font-face { font-family: "#{$font-family}"; font-style: $font-style; @@ -32,6 +32,6 @@ font-stretch: $font-stretch; src: url(#{$font-filename}.woff2) format("#{$font-format}"); font-display: swap; - unicode-range: U+0-10FFFF; /* cutting of the font file for better loading */ + unicode-range: unquote($unicode-range); /* cutting of the font file for better loading */ } } diff --git a/src/scss/02-tools/_m-scrollbar.scss b/src/scss/02-tools/_m-scrollbar.scss index 389feeae..8fd5d080 100644 --- a/src/scss/02-tools/_m-scrollbar.scss +++ b/src/scss/02-tools/_m-scrollbar.scss @@ -26,7 +26,7 @@ * Examples : * * .my-scrollbar-custom { - * @include scrollbar-color(10px, $color-primary, $color-dark); + * @include scrollbar-color(10px, $color-primary, $settings-color-black); * } * */ diff --git a/src/scss/02-tools/_m-select-custom.scss b/src/scss/02-tools/_m-select-custom.scss index 07d558b8..80ca3d14 100644 --- a/src/scss/02-tools/_m-select-custom.scss +++ b/src/scss/02-tools/_m-select-custom.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "f-get-svg-url" as *; @use "m-rtl" as *; @use "sass:color"; @@ -25,12 +26,12 @@ font-size: 16px; // prevent iOS zoom line-height: 1.15; color: $color-text; - background-color: $color-light; - background-image: get-svg-url("down"), linear-gradient(to bottom, $color-light 0%, $color-light 100%); + background-color: $settings-color-white; + background-image: get-svg-url("down"), linear-gradient(to bottom, $settings-color-white 0%, $settings-color-white 100%); background-repeat: no-repeat, repeat; background-position: right 10px top 50%, 0 0; background-size: 10px auto, 100%; - border: 1px solid $color-grey-500; + border: 1px solid $settings-color-grey-500; border-radius: 10px; appearance: none; @@ -50,6 +51,6 @@ // Hover style &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); + border-color: $settings-color-grey-400; } } diff --git a/src/scss/03-base/_body.scss b/src/scss/03-base/_body.scss index 2c9b1408..fcd08741 100644 --- a/src/scss/03-base/_body.scss +++ b/src/scss/03-base/_body.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "../02-tools/m-rtl" as *; html { @@ -38,5 +39,5 @@ body { font-size: $font-size-base; font-weight: normal; color: $color-text; - background-color: $color-light; + background-color: $settings-color-white; } diff --git a/src/scss/03-base/_fonts.scss b/src/scss/03-base/_fonts.scss index 674dd2b9..dee0dc3a 100644 --- a/src/scss/03-base/_fonts.scss +++ b/src/scss/03-base/_fonts.scss @@ -30,6 +30,15 @@ @include Poppins.faces($weights: (300, 400, 500, 700), $styles: normal); @include Poppins.faces($weights: (300, 400, 500, 700), $styles: italic); +// Fallbacks for DM Sans to improve cls +// https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins +@font-face { + font-family: Poppins-fallback; + src: local("Arial"); + size-adjust: 112.5%; + ascent-override: 109%; +} + /** * Custom font here * diff --git a/src/scss/03-base/_forms.scss b/src/scss/03-base/_forms.scss index 73fa8049..39d56994 100644 --- a/src/scss/03-base/_forms.scss +++ b/src/scss/03-base/_forms.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "../02-tools/f-assign-inputs" as *; @use "../02-tools/f-get-svg-url" as *; @use "../02-tools/m-checkbox-custom" as *; @@ -34,23 +35,22 @@ $all-text-inputs: assign-inputs($text-inputs-list); font-family: $font-family-primary; line-height: 1; color: $color-text; - background: color.adjust($color-light, $lightness: -5%); - border: 1px solid $color-grey-500; + background: $settings-color-white; + border: 1px solid $settings-color-grey-500; border-radius: 10px; //reset border radius for ios transition: border-color .5s ease; appearance: none; &::placeholder { - color: color.adjust($color-text, $lightness: 50%); + color: $settings-color-grey-600; } &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); + border-color: $settings-color-grey-500; } &:focus { - color: color.adjust($color-text, $lightness: -10%); - border-color: color.adjust($color-grey-500, $lightness: -20%); + border-color: $settings-color-grey-500; } } @@ -109,7 +109,7 @@ $all-text-inputs: assign-inputs($text-inputs-list); width: 16px; height: 16px; cursor: pointer; - background-image: get-svg-url("close", $color-dark); + background-image: get-svg-url("close", $settings-color-black); background-repeat: no-repeat; background-size: contain; -webkit-appearance: none; diff --git a/src/scss/03-base/_print.scss b/src/scss/03-base/_print.scss index 493b2e19..9b68b66d 100644 --- a/src/scss/03-base/_print.scss +++ b/src/scss/03-base/_print.scss @@ -1,9 +1,10 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @media print { * { font-family: Arial, Helvetica, sans-serif !important; - color: $color-dark !important; + color: $settings-color-black !important; text-decoration: none; text-shadow: none !important; background: transparent !important; diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss index ce97ab19..a287db1e 100644 --- a/src/scss/03-base/_variables-css.scss +++ b/src/scss/03-base/_variables-css.scss @@ -8,22 +8,12 @@ * Heading */ // Font size - --heading--font-size-h1: 56px; - --heading--font-size-h2: 48px; - --heading--font-size-h3: 36px; - --heading--font-size-h4: 32px; - --heading--font-size-h5: 24px; - --heading--font-size-h6: 18px; - - /** - * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it - * - * --heading--font-size-h1: #{fluid-size(58px, 156px)}; - * --heading--font-size-h2: #{fluid-size(47px, 96px)}; - * --heading--font-size-h3: #{fluid-size(38px, 52px)}; - * --heading--font-size-h4: #{fluid-size(32px, 45px)}; - * --heading--font-size-h5: #{fluid-size(28px, 34px)}; - */ + --heading--font-size-h1: #{fluid-size(45px, 56px)}; + --heading--font-size-h2: #{fluid-size(32px, 48px)}; + --heading--font-size-h3: #{fluid-size(24px, 36px)}; + --heading--font-size-h4: #{fluid-size(20px, 32px)}; + --heading--font-size-h5: #{fluid-size(18px, 24px)}; + --heading--font-size-h6: #{fluid-size(16px, 18px)}; // Line height --heading--line-height-h1: 1.25; @@ -37,19 +27,10 @@ * paragraph */ // Font size - --paragraph--font-size-huge: 32px; - --paragraph--font-size-large: 24px; - --paragraph--font-size-small: 14px; - --paragraph--font-size-default: 16px; - - /** - * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it - * - * --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; - * --paragraph--font-size-large: #{fluid-size(20px, 24px)}; - * --paragraph--font-size-small: #{fluid-size(12px, 14px)}; - * --paragraph--font-size-default: #{fluid-size(14px, 16px)}; - */ + --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; + --paragraph--font-size-large: #{fluid-size(20px, 24px)}; + --paragraph--font-size-small: #{fluid-size(12px, 14px)}; + --paragraph--font-size-default: #{fluid-size(14px, 16px)}; // line height --paragraph--line-height-huge: 1.4; @@ -57,40 +38,6 @@ --paragraph--line-height-small: 1.4; --paragraph--line-height-default: 1.4; - /* - * Spacing - */ - --spacing--block-1: 16px; - --spacing--block-2: 32px; - --spacing--block-3: 48px; - --spacing--block-4: 64px; - - /** - * Spacing fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it - * - * Fluid spacing : - * --spacing--block-1: #{fluid-size(16px, 32px)}; - * --spacing--block-2: #{fluid-size(32px, 64px)}; - * --spacing--block-3: #{fluid-size(48px, 96px)}; - * --spacing--block-4: #{fluid-size(64px, 128px)}; - * - * Fixed spacings : - * --spacing--fixed--block-1: 16px; - * ... - */ - - /* - * Gutters - */ - --responsive--gutter: #{$external-gutter-mobile}; - - /* - * Alignments - */ - --responsive--aligndefault-width: calc(100% - calc(var(--responsive--gutter) * 2)); - --responsive--alignwide-width: calc(100% - calc(var(--responsive--gutter) * 2)); - --responsive--alignfull-width: 100%; - /* * Animation speeds */ @@ -122,20 +69,13 @@ } } } +} - @include breakpoints(md) { - /* - * Spacing - * /!\ IMPORTANT : Remove it if you use fluid size function instead /!\ - */ - --spacing--block-1: 32px; - --spacing--block-2: 64px; - --spacing--block-3: 96px; - --spacing--block-4: 128px; - - /* - * Gutters - */ - --responsive--gutter: #{$external-gutter}; - } +body { + /* + * Gutters : In the body because WordPress generate this variable in the body and not in the root + */ + --responsive--gutter-left: var(--wp--style--root--padding-left); + --responsive--gutter-right: var(--wp--style--root--padding-right); + --responsive--gutter: calc(var(--responsive--gutter-left) + var(--responsive--gutter-right)); } diff --git a/src/scss/04-utilities/_container.scss b/src/scss/04-utilities/_container.scss index 74dc2474..cc4d67c3 100644 --- a/src/scss/04-utilities/_container.scss +++ b/src/scss/04-utilities/_container.scss @@ -8,5 +8,5 @@ } .container-default { - @include container($container-default); + @include container(var(--wp--style--global--content-size)); } diff --git a/src/scss/04-utilities/_lazyload.scss b/src/scss/04-utilities/_lazyload.scss index 075e5804..ccf51aaa 100644 --- a/src/scss/04-utilities/_lazyload.scss +++ b/src/scss/04-utilities/_lazyload.scss @@ -1,9 +1,10 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "sass:math"; .lazyload, .lazyloading { - background: $color-grey-200; + background: $settings-color-grey-200; opacity: 0; } @@ -43,7 +44,7 @@ $loading-dimensions: 50px; width: $loading-dimensions; height: $loading-dimensions; content: ""; - border: 5px solid $color-light; + border: 5px solid $settings-color-white; border-top-color: transparent; border-radius: $loading-dimensions; opacity: 1; diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss index 67a14edb..8028324c 100644 --- a/src/scss/04-utilities/_palette.scss +++ b/src/scss/04-utilities/_palette.scss @@ -1,12 +1,30 @@ -@use "../01-abstract/variables" as *; -@use "sass:map"; +@use "../01-abstract/theme-json.scss" as *; -@each $name, $colors in $palette { - .has-#{$name}-color { - color: map.get($colors, color); +/* + * Palette : Usefully to get the color or background color of a parent element + * Usage Example: + * Use these classes to store a color value in a CSS variable. + * This allows any child element to reuse the parent's background color. + * + * HTML: + *
+ * + * I will use the parent's background as my text color + * + *
+ * + * CSS: + * .child-element { + * color: var(--background-color); + * } + */ + +@each $color-name, $color-value in $settings-palette { + .has-#{$color-name}-color { + --color: #{$color-value}; } - .has-#{$name}-background-color { - background-color: map.get($colors, color); + .has-#{$color-name}-background-color { + --background-color: #{$color-value}; } } diff --git a/src/scss/05-components/_searchform.scss b/src/scss/05-components/_searchform.scss index 647af03e..505d316a 100644 --- a/src/scss/05-components/_searchform.scss +++ b/src/scss/05-components/_searchform.scss @@ -2,11 +2,13 @@ * Searchform */ +@use "../01-abstract/theme-json" as *; + .searchform { position: relative; &__field[type="search"] { - padding-inline-end: var(--spacing--block-1); + padding-inline-end: $settings-spacing-sm; } &__submit { diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss index f291675e..f298bd30 100644 --- a/src/scss/06-blocks/_gutenberg.scss +++ b/src/scss/06-blocks/_gutenberg.scss @@ -6,24 +6,12 @@ @use "../02-tools/m-heading" as *; @include editor-only { - // ---- - // Post title style - // ---- - .editor-post-title { - - @include heading(h1); - - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); - margin-bottom: var(--spacing--block-3); - } - // ---- // Editor UI font styles // ---- .wp-block.block-editor-default-block-appender > textarea { - font-family: var(--global--font-secondary); - font-size: $font-size-md; + font-family: $font-family-primary; + font-size: $font-size-base; } // ---- @@ -53,103 +41,3 @@ line-height: .66; text-transform: uppercase; } - -#{context-selector(".blocks-container", ".is-root-container")} { - // ---- - // Alignements horizontaux - // ---- - > :where(*) { - width: #{$container-default}; - max-width: var(--responsive--aligndefault-width); - margin-right: auto; - margin-left: auto; - } - - #{context-selector(".alignwide", "[data-align='wide']")} { - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); - } - - #{context-selector(".alignfull", "[data-align='full']")} { - width: 100%; - max-width: var(--responsive--alignfull-width); - } - - .alignleft { - - @include align; - } - - .alignright { - - @include align(right); - } - - .aligncenter { - display: block; - margin-right: auto; - margin-left: auto; - clear: both; - } - - .alignleft, - .alignright, - .aligncenter { - margin-bottom: var(--spacing--block-1); - } - - :where(.is-layout-flex), - :where(.is-layout-grid) { - gap: get-gutter-width(); - } - - // ---- - // Alignements verticaux - // ---- - > *, - [class*="inner-container"]:not(.is-layout-grid) > * { - margin-top: var(--spacing--block-1); - margin-bottom: var(--spacing--block-1); - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - - &.alignleft, - &.alignright, - &.alignleft:first-child + *, - &.alignright:first-child + *, - &.alignfull.has-background { - margin-top: 0; - } - - &:last-child, - &.alignfull.has-background { - margin-bottom: 0; - } - - /* Reset alignleft and alignright margins after alignfull */ - &.alignfull + .alignleft, - &.alignfull + .alignright { - margin-top: var(--spacing--block-1); - } - } - - @include editor-only { - - > * { - - &:last-child { - margin-bottom: var(--spacing--block-1); - } - } - - [class*="inner-container"] > * { - max-width: none; - } - } -} diff --git a/src/scss/06-blocks/core/_columns.scss b/src/scss/06-blocks/core/_columns.scss index 4dde94b0..d86092eb 100644 --- a/src/scss/06-blocks/core/_columns.scss +++ b/src/scss/06-blocks/core/_columns.scss @@ -1,19 +1,12 @@ -@use "../../02-tools/m-block-vertical-spacing" as *; +@use "../../01-abstract/theme-json" as *; @use "../../02-tools/m-breakpoint" as *; .wp-block-columns { - --wp-block-columns-row-gap: var(--spacing--block-2); - --wp-block-columns-column-gap: #{get_gutter-width()}; - - @include block-vertical-spacing(); - - row-gap: var(--wp-block-columns-row-gap); - column-gap: var(--wp-block-columns-column-gap) !important; justify-content: space-between; .wp-block-column { &.has-background { - padding: var(--spacing--block-1); + padding: $settings-spacing-sm; } } diff --git a/src/scss/06-blocks/core/_freeform.scss b/src/scss/06-blocks/core/_freeform.scss index 85c6dcea..769ab867 100644 --- a/src/scss/06-blocks/core/_freeform.scss +++ b/src/scss/06-blocks/core/_freeform.scss @@ -15,8 +15,7 @@ // Backend Classic editor container .mce-content-body { - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); + max-width: var(--wp--style--global--wide-size); margin: 0; } } diff --git a/src/scss/06-blocks/core/_group.scss b/src/scss/06-blocks/core/_group.scss index 0522f4f0..65c4c4f7 100644 --- a/src/scss/06-blocks/core/_group.scss +++ b/src/scss/06-blocks/core/_group.scss @@ -1,3 +1,4 @@ +@use "../../01-abstract/theme-json" as *; @use "../../02-tools/m-breakpoint" as *; @use "../../02-tools/m-editor-only" as *; @@ -8,13 +9,8 @@ display: flow-root; } - &--no-inner-margin { - #{$el}__inner-container { - > * { - margin-top: 0; - margin-bottom: 0; - } - } + &.has-background { + padding: $settings-spacing-sm; } @include breakpoints(sm, max) { diff --git a/src/scss/06-blocks/core/_image.scss b/src/scss/06-blocks/core/_image.scss index cb98bc4b..6ad2b2da 100644 --- a/src/scss/06-blocks/core/_image.scss +++ b/src/scss/06-blocks/core/_image.scss @@ -1,4 +1,5 @@ @use "../../01-abstract/variables" as *; +@use "../../01-abstract/theme-json" as *; .wp-block-image { > img { @@ -7,7 +8,7 @@ } figcaption { - font-size: $font-size-xs; - color: $color-grey-600; + font-size: $font-size-sm; + color: $settings-color-grey-600; } } diff --git a/src/scss/06-blocks/core/_list.scss b/src/scss/06-blocks/core/_list.scss index ef73cd24..e056c54f 100644 --- a/src/scss/06-blocks/core/_list.scss +++ b/src/scss/06-blocks/core/_list.scss @@ -1,4 +1,5 @@ @use "../../01-abstract/variables" as *; +@use "../../01-abstract/theme-json" as *; @use "../../02-tools/f-context-selector" as *; @use "../../02-tools/m-rtl" as *; @@ -8,7 +9,7 @@ font-size: 16px; font-weight: 700; line-height: 1.3; - color: $color-dark; + color: $settings-color-black; } %marker-ul-default { @@ -18,7 +19,7 @@ width: 6px; height: 6px; content: ""; - background-color: $color-dark; + background-color: $settings-color-black; border-radius: 100%; @include rtl { @@ -31,8 +32,8 @@ --offset-item: 30px; --vertical-spaging-item: 16px; - ul, - ol { + ul:where(.wp-block-list), + ol:where(.wp-block-list) { &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { font-size: var(--paragraph--font-size-default, $font-size-base); line-height: var(--paragraph--line-height-default, $line-height-base); @@ -45,7 +46,7 @@ } } - ul { + ul:where(.wp-block-list) { &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { list-style-type: none; @@ -71,7 +72,7 @@ } } - ol { + ol:where(.wp-block-list) { padding-left: 10px; &:not([class*="no-list-style"]):not([role="list"]) { diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss index 83051742..988a5825 100644 --- a/src/scss/08-template-parts/_header.scss +++ b/src/scss/08-template-parts/_header.scss @@ -1,5 +1,6 @@ @use "../01-abstract/constants" as *; @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "../02-tools/f-column" as *; @use "../02-tools/m-breakpoint" as *; @use "../02-tools/m-hover" as *; @@ -19,7 +20,7 @@ top: var(--wp-admin-bar-height); z-index: 10; width: 100%; - background: var(--wp--preset--color--cyan-bluish-gray); + background: $settings-color-grey-500; } .container { @@ -40,7 +41,7 @@ &__menu-toggle { position: absolute; top: 14px; - right: var(--responsive--gutter); + right: var(--responsive--gutter-right); z-index: 2; width: 46px; height: 46px; @@ -52,7 +53,7 @@ @include rtl { right: auto; - left: var(--responsive--gutter); + left: var(--responsive--gutter-left); } > span { @@ -62,7 +63,7 @@ width: 20px; height: 2px; margin: -1px 0 0 -10px; - background: $color-light; + background: $settings-color-white; border-radius: 2px; transition: background-color .5s $ease-in-out-expo; @@ -74,7 +75,7 @@ width: 100%; height: 100%; content: ""; - background: $color-light; + background: $settings-color-white; border-radius: inherit; transition: transform .5s $ease-in-out-expo; } @@ -127,7 +128,7 @@ width: 50px; height: 50px; padding: 0; - color: $color-dark; + color: $settings-color-black; text-indent: -10000px; vertical-align: middle; cursor: pointer; @@ -166,7 +167,7 @@ &--menu-is-open { #{$el}__menu-toggle { > span { - background: rgba($color-light, 0); + background: rgba($settings-color-white, 0); &::before { transform: rotate(135deg); @@ -197,7 +198,7 @@ } > div { - padding: 76px calc(var(--responsive--gutter) * 2) 25px; + padding: 76px var(--responsive--gutter) 25px; } } @@ -209,7 +210,7 @@ padding-top: 22px; + li { - border-top: 1px solid $color-dark; + border-top: 1px solid $settings-color-black; } } } diff --git a/src/scss/08-template-parts/_hero.scss b/src/scss/08-template-parts/_hero.scss index aaa73f19..f8c43dc4 100644 --- a/src/scss/08-template-parts/_hero.scss +++ b/src/scss/08-template-parts/_hero.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "../02-tools/m-breakpoint" as *; @use "../02-tools/m-row-fullwidth" as *; @@ -9,14 +10,14 @@ .hero { @include row-fullwidth; - padding: var(--spacing--block-1) 0; - margin-bottom: var(--spacing--block-1); + padding: $settings-spacing-sm 0; + margin-bottom: $settings-spacing-sm; .container { position: relative; z-index: 4; padding: 20px; - background: rgba($color-light, .5); + background: rgba($settings-color-white, .5); } &__img { diff --git a/src/scss/editor.scss b/src/scss/editor.scss index 6e86ec30..7c6fad9d 100644 --- a/src/scss/editor.scss +++ b/src/scss/editor.scss @@ -30,11 +30,11 @@ variables.$entry-file-name: "editor"; @use "04-utilities/lazyload"; @use "04-utilities/seo"; @use "04-utilities/video-wrapper"; -@use "04-utilities/palette"; @use "04-utilities/container"; @use "04-utilities/sr-only"; @use "04-utilities/js-animation"; @use "04-utilities/aria"; +@use "04-utilities/palette"; /** * Blocks diff --git a/src/scss/style.scss b/src/scss/style.scss index 4ee6e41e..aa3766cc 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -34,11 +34,11 @@ variables.$entry-file-name: "style"; @use "04-utilities/lazyload"; @use "04-utilities/seo"; @use "04-utilities/video-wrapper"; -@use "04-utilities/palette"; @use "04-utilities/container"; @use "04-utilities/sr-only"; @use "04-utilities/js-animation"; @use "04-utilities/aria"; +@use "04-utilities/palette"; /** * Components diff --git a/src/theme-json/colors.json b/src/theme-json/colors.json new file mode 100644 index 00000000..90615c99 --- /dev/null +++ b/src/theme-json/colors.json @@ -0,0 +1,77 @@ +{ + "version": 3, + "settings": { + "color": { + "duotone": [], + "customDuotone": false, + "defaultDuotone": false, + "gradients": [], + "customGradient": false, + "defaultGradients": false, + "custom": false, + "defaultPalette": false, + "palette": [ + { + "name": "Noir", + "slug": "black", + "color": "#000" + }, + { + "name": "Blanc", + "slug": "white", + "color": "#fff" + }, + { + "name": "Jaune 500", + "slug": "yellow-500", + "color": "#ffe600" + }, + { + "name": "Gris 100", + "slug": "grey-100", + "color": "#eee" + }, + { + "name": "Gris 200", + "slug": "grey-200", + "color": "#ccc" + }, + { + "name": "Gris 300", + "slug": "grey-300", + "color": "#aaa" + }, + { + "name": "Gris 400", + "slug": "grey-400", + "color": "#999" + }, + { + "name": "Gris 500", + "slug": "grey-500", + "color": "#888" + }, + { + "name": "Gris 600", + "slug": "grey-600", + "color": "#777" + }, + { + "name": "Gris 700", + "slug": "grey-700", + "color": "#555" + }, + { + "name": "Gris 800", + "slug": "grey-800", + "color": "#333" + }, + { + "name": "Gris 900", + "slug": "grey-900", + "color": "#111" + } + ] + } + } +} \ No newline at end of file diff --git a/src/theme-json/settings.json b/src/theme-json/settings.json new file mode 100644 index 00000000..5b7bff1e --- /dev/null +++ b/src/theme-json/settings.json @@ -0,0 +1,28 @@ +{ + "version": 3, + "settings": { + "useRootPaddingAwareAlignments": true, + "layout": { + "contentSize": "760px", + "wideSize": "1160px" + }, + "border": { + "color": true, + "radius": true, + "style": true, + "width": true + }, + "shadow": { + "defaultPresets": false + } + }, + "styles": { + "spacing": { + "blockGap": "var(--wp--preset--spacing--sm)", + "padding": { + "right": "clamp(20px, calc(20px + 20 * ((100vw - 400px) / 880)), 40px)", + "left": "clamp(20px, calc(20px + 20 * ((100vw - 400px) / 880)), 40px)" + } + } + } +} \ No newline at end of file diff --git a/src/theme-json/spacings.json b/src/theme-json/spacings.json new file mode 100644 index 00000000..4d78c690 --- /dev/null +++ b/src/theme-json/spacings.json @@ -0,0 +1,34 @@ +{ + "version": 3, + "settings": { + "spacing": { + "blockGap": true, + "margin": true, + "padding": true, + "units": ["px", "em", "rem", "vh", "vw", "%"], + "defaultSpacingSizes": false, + "spacingSizes": [ + { + "slug": "xs", + "size": "16px", + "name": "xs (16px)" + }, + { + "slug": "sm", + "size": "32px", + "name": "sm (32px)" + }, + { + "slug": "md", + "size": "48px", + "name": "md (48px)" + }, + { + "slug": "lg", + "size": "64px", + "name": "lg (64px)" + } + ] + } + } +} \ No newline at end of file diff --git a/src/theme-json/typography.json b/src/theme-json/typography.json new file mode 100644 index 00000000..d9f5fe51 --- /dev/null +++ b/src/theme-json/typography.json @@ -0,0 +1,18 @@ +{ + "version": 3, + "settings": { + "typography": { + "fontSizes": [], + "defaultFontSizes": false, + "customFontSize": false, + "dropCap": false, + "fontStyle": false, + "fontWeight": false, + "lineHeight": false, + "letterSpacing": false, + "textDecoration": false, + "textTransform": false, + "fluid": true + } + } +} \ No newline at end of file