Init commit

tailwind/custom/base.css

@@ -0,0 +1,11 @@
+/**
+ * Custom styles to immediately follow Tailwind’s `base` layer
+ */
+
+/**
+ * This uses the background and foreground colors declared in the `theme.json`
+ * file and is applied both to the front end 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: FamiliaRosaTheme
+Theme URI: https://josevi.dev
+Author: Josevi Canet
+Author URI: https://underscoretw.com/
+Description: A custom theme based on _tw
+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: familiarosatheme
+Tags:
+
+This theme, like WordPress, is licensed under the GPL.
+Use it to make something cool, have fun, and share what you've learned.
+
+FamiliaRosaTheme is based on _tw https://underscoretw.com/, (C) 2021-2025 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-2025 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/adding-custom-styles#adding-custom-utilities
+ */

tailwind/partials/footer.css

@@ -0,0 +1,21 @@
+/**
+ * Because this code is used in both `tailwind.css` and `tailwind-editor.css`,
+ * we import it from here to avoid duplication.
+ */
+
+/**
+ * Add Tailwind's component classes and any component classes registered by
+ * plugins, then add custom component classes.
+ *
+ * The `components.css` file is located in a subfolder to allow for additional
+ * components files from, e.g., vendor packages. Those files need to be
+ * manually added below.
+ */
+@import "../custom/components/components.css";
+
+/**
+ * Add Tailwind's utility classes and any utility classes registered by
+ * plugins, then add custom utility classes.
+ */
+@import "tailwindcss/utilities";
+@import "../custom/utilities.css";

tailwind/partials/header.css

@@ -0,0 +1,25 @@
+/**
+ * Because this code is used in both `tailwind.css` and `tailwind-editor.css`,
+ * we import it from here to avoid duplication.
+ */
+
+/**
+ * Add Tailwind Typography and a corresponding config file.
+ */
+@plugin "@_tw/typography";
+@config "../tailwind-typography.config.js";
+
+/**
+ * Add the WordPress file header.
+ */
+@import "../custom/file-header.css";
+
+/**
+ * Add both the default Tailwind theme and your custom theme.
+ */
+@import "../tailwind-theme.css";
+
+/**
+ * Add custom `@font-face` rules.
+ */
+@import "../custom/fonts.css";

tailwind/tailwind-editor-extra.css

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+/**
+ * This allows you to use classes from both the default Tailwind theme and
+ * your custom theme.
+ */
+@reference "./tailwind-theme.css";
+
+.entry-header,
+.entry-content {
+	@apply px-8;
+}

tailwind/tailwind-editor.css

@@ -0,0 +1,26 @@
+/**
+ * This file outputs to `style-editor.css`, your main block editor style sheet.
+ *
+ * You probably won’t need to edit this file. You’re more likely to want to
+ * edit `./tailwind/tailwind-theme.css`, which contains your project’s custom
+ * design tokens, or files in the `./tailwind/custom` folder.
+ */
+
+/**
+ * Because this file shares code with `tailwind.css`, we import the shared code
+ * to avoid duplication.
+ */
+@import "./partials/header.css";
+
+/**
+ * Add your custom base styles.
+ */
+@layer base {
+	@import "./custom/base.css";
+}
+
+/**
+ * Because this file shares code with `tailwind.css`, we import the shared code
+ * to avoid duplication.
+ */
+@import "./partials/footer.css";

tailwind/tailwind-theme.css

@@ -0,0 +1,36 @@
+/**
+ * Add your design tokens as Tailwind theme variables.
+ *
+ * https://tailwindcss.com/docs/theme
+ */
+
+/**
+ * Import Tailwind’s default theme.
+ */
+@import "tailwindcss/theme";
+
+/**
+ * Your theme variables are merged with Tailwind’s defaults, either extending
+ * the default theme with new variables or overriding the values of existing
+ * variables.
+ */
+@theme {
+	/**
+	 * These theme variables use CSS variables set by WordPress using values
+	 * from your `theme.json` file.
+	 *
+	 * If you are using the classic editor, you may need to use hardcoded
+	 * color values instead of the `var()` functions below.
+	 */
+	--color-background: var(--wp--preset--color--background);
+	--color-foreground: var(--wp--preset--color--foreground);
+	--color-primary: var(--wp--preset--color--primary);
+	--color-secondary: var(--wp--preset--color--secondary);
+	--color-tertiary: var(--wp--preset--color--tertiary);
+	--container-content: var(--wp--style--global--content-size);
+	--container-wide: var(--wp--style--global--wide-size);
+
+	/**
+	 * Add your theme below:
+	 */
+}

tailwind/tailwind-typography.config.js

@@ -0,0 +1,165 @@
+/**
+ * Tailwind Typography can only be configured via JavaScript, using a legacy
+ * configuration file like this one.
+ */
+
+// 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
+				 * `-neutral` with `-FamiliaRosaTheme`.
+				 */
+				familiarosatheme: {
+					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.css

@@ -0,0 +1,25 @@
+/**
+ * This file outputs to `style.css`, your main front-end style sheet.
+ *
+ * You probably won’t need to edit this file. You’re more likely to want to
+ * edit `./tailwind/tailwind-theme.css`, which contains your project’s custom
+ * design tokens, or files in the `./tailwind/custom` folder.
+ */
+
+/**
+ * Because this file shares code with `tailwind-editor.css`, we import the
+ * shared code to avoid duplication.
+ */
+@import "./partials/header.css";
+
+/**
+ * Add Tailwind’s Preflight styles followed by your custom base styles.
+ */
+@import "tailwindcss/preflight";
+@import "./custom/base.css";
+
+/**
+ * Because this file shares code with `tailwind-editor.css`, we import the
+ * shared code to avoid duplication.
+ */
+@import "./partials/footer.css";