Fix/theme json sass

gulpfile.js

@@ -15,6 +15,9 @@ const gulp = require( 'gulp' );
 const { config: watchConfig } = require( 'gulp-wp/tasks/watch' );
 const config = {
 	tasks: {
+		styles: {
+			watch: [ 'src/styles/**/*.*', 'theme.json' ],
+		},
 		build: {
 			build: [ 'styles', 'scripts', 'blocks' ],
 		},

languages/theme-scaffold.pot

@@ -1,4 +1,4 @@
-# Copyright (C) 2021 Theme Scaffold
+# Copyright (C) 2022 Theme Scaffold
 # This file is distributed under the same license as the Theme Scaffold package.
 msgid ""
 msgstr ""
@@ -73,19 +73,19 @@ msgstr ""
 msgid "Toggle Menu"
 msgstr ""
 
-#: inc/setup.php:99
+#: inc/setup.php:100
 msgid "Primary"
 msgstr ""
 
-#: inc/setup.php:100
+#: inc/setup.php:101
 msgid "Secondary"
 msgstr ""
 
-#: inc/setup.php:114
+#: inc/setup.php:115
 msgid "Sidebar"
 msgstr ""
 
-#: inc/setup.php:116
+#: inc/setup.php:117
 msgid "Add widgets here."
 msgstr ""
 

package.json

@@ -7,8 +7,8 @@
 		"url": "git+https://github.com/BlackbirdDigital/wp-theme-scaffold.git"
 	},
 	"scripts": {
-		"start": "gulp-wp",
-		"build": "gulp-wp build"
+		"start": "gulp",
+		"build": "gulp build"
 	},
 	"dependencies": {
 		"normalize.scss": "^0.1.0"

src/styles/base/elements/_text.scss

@@ -42,7 +42,7 @@ var {
 
 abbr,
 acronym {
-	border-bottom: 1px dotted theme.get-var( 'theme-colors', 'text' );
+	border-bottom: 1px dotted theme.get-var( 'theme-colors', 'foreground' );
 	cursor: help;
 }
 

src/styles/base/typography/_global.scss

@@ -10,7 +10,7 @@ input,
 select,
 optgroup,
 textarea {
-	color: theme.get-var( 'theme-colors', 'text' );
+	color: theme.get-var( 'theme-colors', 'foreground' );
 	font-family: theme.get-var( 'font-families', 'serif' );
 	font-size: 1rem;
 	line-height: 1.5;

src/styles/modules/_block-container.scss

@@ -8,45 +8,10 @@
 @use '../settings/theme';
 
 .block-container {
-	padding: 0 theme.get-var( 'sizes', 'gutter' );
+	padding-inline: theme.get-var( 'sizes', 'gutter' );
 
 	> * {
 		max-width: theme.get-var( 'layout', 'default' );
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.alignnarrow,
-	.alignwide,
-	.alignextrawide,
-	.alignfull {
-		> * {
-			max-width: unset;
-		}
-	}
-
-	.alignnarrow {
-		max-width: theme.get-var( 'layout', 'narrow' );
-	}
-
-	.alignwide {
-		max-width: theme.get-var( 'layout', 'wide' );
-	}
-
-	.alignextrawide {
-		max-width: theme.get-var( 'layout', 'extra-wide' );
-	}
-
-	.alignfull {
-		width: 100vw; // maybe just unset width?
-		max-width: none;
-		margin-inline: calc( #{theme.get-var( 'sizes', 'gutter' )} * -1 );
-	}
-
-	.alignleft {
-	}
-	.alignright {
-	}
-	.aligncenter {
+		margin-inline: auto;
 	}
 }

src/styles/modules/_site-header.scss

@@ -3,6 +3,7 @@
  */
 
 @use '../tools/layout';
+@use '../tools/respond';
 
 .site-header {
 	&__nav {
@@ -17,7 +18,7 @@
 		display: block;
 	}
 
-	@media screen and ( min-width: 37.5em ) {
+	@include respond.to( 'tablet' ) {
 		.menu-toggle {
 			display: none;
 		}

src/styles/settings/_theme-json.js

@@ -11,20 +11,24 @@ Object.keys( custom ).map( ( customKey ) => {
 } );
 
 /**
- *
+ * Create a Sass-compatible map.
  * @param {object} object Single-layer object with key-value pairs.
  * @returns {object} Object with quoted keys for maximum Sass compatibility.
  */
 function sassMap( object ) {
 	return Object.entries( object ).reduce( ( acc, [ key, value ] ) => {
-		// Both key and value are quoted. Keys in case they are a recognized CSS color name, and values for things like comma-separated lists.
-		acc[ quote( key ) ] = quote( value );
+		// Key must be quoted to avoid weirdness with color names and other reserved keywords.
+		// Comma-separated values are transformed into an array (sass list).
+		acc[ quote( key ) ] =
+			typeof value === 'string' && value.includes( ',' )
+				? value.split( ',' ).map( ( s ) => s.trim() )
+				: value;
 		return acc;
 	}, {} );
 }
 
 /**
- * Quoted string utility
+ * Quoted string utility.
  * @param {string} value String value to be quoted
  * @returns {string} Quoted string
  */

src/styles/settings/_theme.scss

@@ -21,9 +21,6 @@
 
 /**
  * Get a custom map.
- *
- * WARNING: If you use this directly for values, you MUST use sass:string.unquote!
- * Instead, it is recommended to use get-var() below.
  */
 @function get-map( $map-name ) {
 	@if has-map( $map-name ) {
@@ -46,7 +43,7 @@
  */
 @function get( $map-name, $key ) {
 	$map: get-map( $map-name );
-	@return string.unquote( map.get( $map, $key ) );
+	@return map.get( $map, $key );
 }
 
 /**

src/styles/tools/_convert.scss

@@ -1,9 +1,15 @@
 /**
- * Tools: convert
+ * Tools: convert.
  *
  * Value conversion tools.
  */
 
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
 $base-font-size: 16; // px
 
 /**
@@ -39,95 +45,3 @@ $base-font-size: 16; // px
 
 	@return $pixels / $context * 1rem;
 }
-
-/**
- * Convert string to a number.
- *
- * https://gist.github.com/KittyGiraudel/9fa19d254864f33d4a80
- *
- * @param {String | Number} $value - Value to be parsed
- *
- * @return {Number}
- */
-@function to-number( $value ) {
-	@if type-of( $value ) == 'number' {
-		@return $value;
-	} @else if type-of( $value ) != 'string' {
-		$_: log( 'Value for `to-number` should be a number or a string.' );
-	}
-
-	$result: 0;
-	$digits: 0;
-	$minus: str-slice( $value, 1, 1 ) == '-';
-	$numbers: (
-		'0': 0,
-		'1': 1,
-		'2': 2,
-		'3': 3,
-		'4': 4,
-		'5': 5,
-		'6': 6,
-		'7': 7,
-		'8': 8,
-		'9': 9,
-	);
-
-	@for $i from if( $minus, 2, 1 ) through str-length( $value ) {
-		$character: str-slice( $value, $i, $i );
-
-		@if not(
-			index( map-keys( $numbers ), $character ) or $character == '.'
-		)
-		{
-			@return to-length(
-				if( $minus, -$result, $result ),
-				str-slice( $value, $i )
-			);
-		}
-
-		@if $character == '.' {
-			$digits: 1;
-		} @else if $digits == 0 {
-			$result: $result * 10 + map-get( $numbers, $character );
-		} @else {
-			$digits: $digits * 10;
-			$result: $result + map-get( $numbers, $character ) / $digits;
-		}
-	}
-
-	@return if( $minus, -$result, $result );
-}
-
-/**
- * Add a unit to a value. Used in the to-number function.
- *
- * @param {Number} $value - Value to add unit to
- * @param {String} $unit - String representation of the unit
- *
- * @return {Number} - `$value` expressed in `$unit`
- */
-@function to-length( $value, $unit ) {
-	$units: (
-		'px': 1px,
-		'cm': 1cm,
-		'mm': 1mm,
-		'%': 1%,
-		'ch': 1ch,
-		'pc': 1pc,
-		'in': 1in,
-		'em': 1em,
-		'rem': 1rem,
-		'pt': 1pt,
-		'ex': 1ex,
-		'vw': 1vw,
-		'vh': 1vh,
-		'vmin': 1vmin,
-		'vmax': 1vmax,
-	);
-
-	@if not index( map-keys( $units ), $unit ) {
-		$_: log( 'Invalid unit `#{$unit}`.' );
-	}
-
-	@return $value * map-get( $units, $unit );
-}

src/styles/tools/_respond.scss

@@ -22,7 +22,7 @@
 @mixin to( $breakpoint, $direction: 'min-width' ) {
 	$breakpoints: theme.get-map( 'breakpoints' );
 	@if map.has-key( $breakpoints, $breakpoint ) {
-		$width: convert.to-number( theme.get( 'breakpoints', $breakpoint ) );
+		$width: theme.get( 'breakpoints', $breakpoint );
 		// If max-width, treat like <, not <=.
 		// NOTE: Once Media Queries Level 4 Range Syntax is well supported this will be much easier: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4
 		@if $direction == 'max-width' {

src/styles/utilities/_accessibility.scss

@@ -24,7 +24,7 @@
 		box-shadow: 0 0 2px 2px rgba( 0, 0, 0, 0.6 );
 		clip: auto !important;
 		clip-path: none;
-		color: theme.get-var( 'theme-colors', 'text' );
+		color: theme.get-var( 'theme-colors', 'foreground' );
 		display: block;
 		font-size: 0.875rem;
 		font-weight: 700;

src/styles/utilities/_alignments.scss

@@ -5,7 +5,32 @@
 @use '../settings/theme';
 @use '../tools/layout';
 
-// NOTE: block alignment styles can be found in tools/layout.
+.alignnarrow,
+.alignwide,
+.alignextrawide,
+.alignfull {
+	> * {
+		max-width: unset;
+	}
+}
+
+.alignnarrow {
+	max-width: theme.get-var( 'layout', 'narrow' );
+}
+
+.alignwide {
+	max-width: theme.get-var( 'layout', 'wide' );
+}
+
+.alignextrawide {
+	max-width: theme.get-var( 'layout', 'extra-wide' );
+}
+
+.alignfull {
+	width: 100vw; // maybe just unset width?
+	max-width: none;
+	margin-inline: calc( #{theme.get-var( 'sizes', 'gutter' )} * -1 );
+}
 
 // RECOMMENDED STYLE
 .alignleft {

style.css

@@ -5,7 +5,7 @@ Author: Blackbird Digital
 Author URI: https://blackbird.digital/
 Description: A scaffold for rapid custom theme development by Blackbird Digital.
 Version: 1.0.0
-Tested up to: 5.8.1
+Tested up to: 5.9
 Requires PHP: 7.3
 License: GNU General Public License v2 or later
 License URI: LICENSE