typography.css

/* Stylesheet: typography-next.css */

/*
This represents the OPT-IN typography styles.
*/

@layer components {
	/* === Headings === */

	.h1 {
		@apply font-heading-token text-3xl md:text-5xl;
	}
	.h2 {
		@apply font-heading-token text-2xl md:text-4xl;
	}
	.h3 {
		@apply font-heading-token text-xl md:text-2xl;
	}
	.h4 {
		@apply font-heading-token text-lg md:text-xl;
	}
	.h5 {
		@apply font-heading-token text-base md:text-lg;
	}
	.h6 {
		@apply font-heading-token text-sm md:text-base;
	}

	/* === Elements === */

	/* p { ... } */

	.anchor {
		@apply text-primary-700 dark:text-primary-500 hover:brightness-110 underline;
	}

	.blockquote {
		@apply text-token text-base italic border-l-8 border-l-secondary-500 px-4 pl-4;
	}

	/* Keyboard */
	.kbd {
		@apply font-sans font-bold text-sm;
		@apply bg-surface-300-600-token px-1.5 py-[3px] rounded;
		@apply ring-[1px] ring-surface-900 ring-inset;
		@apply border-b-2 border-surface-900;
	}

	/* Timestamps */
	.time {
		@apply text-sm text-surface-500 dark:text-surface-400;
	}

	/* === Preformatted / Code === */
	/* For use outside of Skeleton's CodeBlock component */

	.pre {
		@apply font-mono text-base bg-neutral-900/90 text-white p-4 whitespace-pre-wrap overflow-x-auto rounded-container-token;
	}

	.code {
		@apply font-mono text-xs text-primary-700 dark:text-primary-400 whitespace-nowrap;
		@apply bg-primary-500/30 dark:bg-primary-500/20;
		@apply py-0.5 px-1 rounded;
	}

	/* === Insertions / Deletions  ==== */
	/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins */
	/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del */

	.ins,
	.del {
		@apply block relative p-0.5 pl-5;
		text-decoration: none;
	}

	.ins::before,
	.del::before {
		@apply absolute left-1 font-mono;
	}
	.ins::before {
		content: '+';
	}
	.del::before {
		content: '−';
	}

	.ins {
		@apply font-mono bg-success-500 text-on-success-token;
	}
	.del {
		@apply font-mono bg-error-500 text-on-error-token;
	}
}