init commit

tailwind/.eslintrc

@@ -0,0 +1,5 @@
+{
+	"env": {
+		"node": true
+	}
+}

tailwind/custom/base.css

@@ -0,0 +1,16 @@
+/**
+ * Custom styles to immediately follow Tailwind’s `base` layer
+ *
+ * “Add things like base typography styles [or] opinionated global resets.”
+ *
+ * — from https://tailwindcss.com/docs/plugins#adding-base-styles
+ */
+
+/**
+ * This uses the background and foreground colors declared in the
+ * `theme.json` file and is applied both to the frontend and in the block
+ * editor.
+*/
+body {
+	@apply bg-background text-foreground font-sans;
+}

tailwind/custom/components/components.css

@@ -0,0 +1,56 @@
+/**
+ * Custom styles to immediately follow Tailwind’s `components` layer
+ *
+ * “Add more opinionated, complex classes like buttons, form controls, alerts,
+ * etc; the sort of pre-built components you often see in other frameworks that
+ * you might need to override with utility classes.”
+ *
+ * — from https://tailwindcss.com/docs/plugins#adding-components
+ */
+
+/**
+ * Post title styles
+ *
+ * These will be applied to all headings with a `page-title` or `entry-title`
+ * class on the frontend and to the post title in the block editor.
+ *
+ * The supplied styles are meant to match the default `h1` classes from
+ * Tailwind Typography.
+ */
+.page-title,
+.entry-title {
+	@apply max-w-content mx-auto mb-6 text-3xl font-extrabold text-neutral-900;
+}
+
+/**
+ * Layout styles for centered content areas
+ *
+ * If you are controlling the width of your content area with styles applied
+ * to its container, you can delete the following styles whose selectors begin
+ * with `.page-content >` and `.entry-content >`. For more details, please see
+ * the following:
+ *
+ * https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/
+ */
+.page-content > *,
+.entry-content > * {
+	/* Content width from the `theme.json` file */
+	@apply max-w-content mx-auto;
+}
+
+.entry-content > .alignwide {
+	/* Wide width from the `theme.json` file */
+	@apply max-w-wide;
+}
+
+.entry-content > .alignfull {
+	@apply max-w-none;
+}
+
+.entry-content > .alignleft {
+	@apply float-left mr-8;
+}
+
+.entry-content > .alignright {
+	@apply float-right ml-8;
+}

tailwind/custom/file-header.css

@@ -0,0 +1,23 @@
+/*!
+Theme Name: Valier
+Theme URI: https://josevi.dev
+Author: Josevi Canet
+Author URI: https://josevi.dev
+Description: Cumtom theme
+Version: 0.1.0
+Tested up to: 6.2
+Requires PHP: 7.4
+License: GNU General Public License v2 or later
+License URI: LICENSE
+Text Domain: vlr
+Tags:
+
+This theme, like WordPress, is licensed under the GPL.
+Use it to make something cool, have fun, and share what you've learned.
+
+Valier is based on _tw https://underscoretw.com/, (C) 2021-2023 Greg Sullivan
+_tw is distributed under the terms of the GNU GPL v2 or later.
+
+_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2023 Automattic, Inc.
+Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
+*/

tailwind/custom/fonts.css

@@ -0,0 +1,5 @@
+/**
+ * Custom `@font-face` rules
+ *
+ * These will be added immediately before Tailwind’s `base` layer.
+ */

tailwind/custom/utilities.css

@@ -0,0 +1,8 @@
+/**
+ * Custom styles to immediately follow Tailwind’s `utilities` layer
+ *
+ * Add your own utility classes to this theme. Complex utility classes should
+ * be added using Tailwind’s plugin system:
+ *
+ * https://tailwindcss.com/docs/plugins#adding-utilities
+ */

tailwind/tailwind-editor-extra.css

@@ -0,0 +1,17 @@
+/**
+ * Additional styles applied only to the WordPress editor
+ *
+ * It is sometimes necessary to add additional styles for the WordPress block
+ * editor, generally to improve the editor experience. For example, you may
+ * want to tweak the appearance of the title area to better match your site’s
+ * front end, or you may need to change the appearance of a block to better
+ * distinguish between its fields while editing.
+ *
+ * Those styles should be added in this file, and they will be added only to
+ * the block editor.
+ */
+
+.entry-header,
+.entry-content {
+	@apply px-8;
+}

tailwind/tailwind-typography.config.js

@@ -0,0 +1,160 @@
+// Copied from Tailwind Typography.
+const hexToRgb = (hex) => {
+	if (typeof hex !== 'string' || hex.length === 0) {
+		return hex;
+	}
+
+	hex = hex.replace('#', '');
+	hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex;
+	const r = parseInt(hex.substring(0, 2), 16);
+	const g = parseInt(hex.substring(2, 4), 16);
+	const b = parseInt(hex.substring(4, 6), 16);
+	return `${r} ${g} ${b}`;
+};
+
+module.exports = {
+	theme: {
+		extend: {
+			typography: (theme) => ({
+				/**
+				 * Tailwind Typography’s default styles are opinionated, and
+				 * you may need to override them if you have mockups to
+				 * replicate. You can view the default modifiers here:
+				 *
+				 * https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
+				 */
+
+				DEFAULT: {
+					css: [
+						{
+							/**
+							 * By default, max-width is set to 65 characters.
+							 * This is a good default for readability, but
+							 * often in conflict with client-supplied designs.
+							 * A value of false removes the max-width property.
+							 */
+							maxWidth: false,
+
+							/**
+							 * Tailwind Typography uses the font weights 400
+							 * through 900. If you’re not using a variable font,
+							 * you may need to limit the number of supported
+							 * weights. Below are all of the default weights,
+							 * ready to be overridden.
+							 */
+							// a: {
+							// 	fontWeight: '500',
+							// },
+							// strong: {
+							// 	fontWeight: '600',
+							// },
+							// 'ol > li::marker': {
+							// 	fontWeight: '400',
+							// },
+							// dt: {
+							// 	fontWeight: '600',
+							// },
+							// blockquote: {
+							// 	fontWeight: '500',
+							// },
+							// h1: {
+							// 	fontWeight: '800',
+							// },
+							// 'h1 strong': {
+							// 	fontWeight: '900',
+							// },
+							// h2: {
+							// 	fontWeight: '700',
+							// },
+							// 'h2 strong': {
+							// 	fontWeight: '800',
+							// },
+							// h3: {
+							// 	fontWeight: '600',
+							// },
+							// 'h3 strong': {
+							// 	fontWeight: '700',
+							// },
+							// h4: {
+							// 	fontWeight: '600',
+							// },
+							// 'h4 strong': {
+							// 	fontWeight: '700',
+							// },
+							// kbd: {
+							// 	fontWeight: '500',
+							// },
+							// code: {
+							// 	fontWeight: '600',
+							// },
+							// pre: {
+							// 	fontWeight: '400',
+							// },
+							// 'thead th': {
+							// 	fontWeight: '600',
+							// },
+						},
+					],
+				},
+
+				/**
+				 * By default, _tw uses Tailwind Typography’s Neutral gray
+				 * scale. If you are adapting an existing design and you need
+				 * to set specific colors throughout, you can do so here. In
+				 * your `./theme/functions.php file, you will need to replace
+				 * `prose-neutral` with `prose-valier`.
+				 */
+				valier: {
+					css: {
+						'--tw-prose-body': theme('colors.foreground'),
+						'--tw-prose-headings': theme('colors.foreground'),
+						'--tw-prose-lead': theme('colors.foreground'),
+						'--tw-prose-links': theme('colors.primary'),
+						'--tw-prose-bold': theme('colors.foreground'),
+						'--tw-prose-counters': theme('colors.primary'),
+						'--tw-prose-bullets': theme('colors.primary'),
+						'--tw-prose-hr': theme('colors.foreground'),
+						'--tw-prose-quotes': theme('colors.foreground'),
+						'--tw-prose-quote-borders': theme('colors.primary'),
+						'--tw-prose-captions': theme('colors.foreground'),
+						'--tw-prose-kbd': theme('colors.foreground'),
+						'--tw-prose-kbd-shadows': hexToRgb(
+							theme('colors.foreground')
+						),
+						'--tw-prose-code': theme('colors.foreground'),
+						'--tw-prose-pre-code': theme('colors.background'),
+						'--tw-prose-pre-bg': theme('colors.foreground'),
+						'--tw-prose-th-borders': theme('colors.foreground'),
+						'--tw-prose-td-borders': theme('colors.foreground'),
+						'--tw-prose-invert-body': theme('colors.background'),
+						'--tw-prose-invert-headings':
+							theme('colors.background'),
+						'--tw-prose-invert-lead': theme('colors.background'),
+						'--tw-prose-invert-links': theme('colors.primary'),
+						'--tw-prose-invert-bold': theme('colors.background'),
+						'--tw-prose-invert-counters': theme('colors.primary'),
+						'--tw-prose-invert-bullets': theme('colors.primary'),
+						'--tw-prose-invert-hr': theme('colors.background'),
+						'--tw-prose-invert-quotes': theme('colors.background'),
+						'--tw-prose-invert-quote-borders':
+							theme('colors.primary'),
+						'--tw-prose-invert-captions':
+							theme('colors.background'),
+						'--tw-prose-invert-kbd': theme('colors.background'),
+						'--tw-prose-invert-kbd-shadows': hexToRgb(
+							theme('colors.background')
+						),
+						'--tw-prose-invert-code': theme('colors.foreground'),
+						'--tw-prose-invert-pre-code':
+							theme('colors.background'),
+						'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+						'--tw-prose-invert-th-borders':
+							theme('colors.background'),
+						'--tw-prose-invert-td-borders':
+							theme('colors.background'),
+					},
+				},
+			}),
+		},
+	},
+};

tailwind/tailwind.config.js

@@ -0,0 +1,33 @@
+// Set the Preflight flag based on the build target.
+const includePreflight = 'editor' === process.env._TW_TARGET ? false : true;
+
+module.exports = {
+	presets: [
+		// Manage Tailwind Typography's configuration in a separate file.
+		require('./tailwind-typography.config.js'),
+	],
+	content: [
+		// Ensure changes to PHP files and `theme.json` trigger a rebuild.
+		'./theme/**/*.php',
+	],
+	theme: {
+		// Extend the default Tailwind theme.
+		extend: {},
+	},
+	corePlugins: {
+		// Disable Preflight base styles in builds targeting the editor.
+		preflight: includePreflight,
+	},
+	plugins: [
+		// Add Tailwind Typography (via _tw fork).
+		require('@_tw/typography'),
+
+		// Extract colors and widths from `theme.json`.
+		require('@_tw/themejson'),
+
+		// Uncomment below to add additional first-party Tailwind plugins.
+		// require('@tailwindcss/forms'),
+		// require('@tailwindcss/aspect-ratio'),
+		// require('@tailwindcss/container-queries'),
+	],
+};

tailwind/tailwind.css

@@ -0,0 +1,37 @@
+@import "./custom/file-header.css";
+/**
+ * The line above injects the WordPress file header. It needs to be first,
+ * before this comment.
+ */
+
+/**
+ * This injects custom `@font-face` rules.
+ */
+@import "./custom/fonts.css";
+
+/**
+ * This injects Tailwind's base styles and any base styles registered by
+ * plugins, then adds custom base styles.
+ */
+@import "tailwindcss/base";
+@import "./custom/base.css";
+
+/**
+ * This injects Tailwind's component classes and any component classes
+ * registered by plugins, then adds custom component classes.
+ *
+ * The `@import-glob` line imports all CSS files from the `components`
+ * directory (except for `components.css`, which is imported on the following
+ * line). This is meant to simplify the process of integrating styles from
+ * JavaScript components or WordPress plugins.
+ */
+@import "tailwindcss/components";
+@import-glob "./custom/components/**/!(components).css";
+@import "./custom/components/components.css";
+
+/**
+ * This injects Tailwind's utility classes and any utility classes registered
+ * by plugins, then adds custom utility classes.
+ */
+@import "tailwindcss/utilities";
+@import "./custom/utilities.css";