extras/forms-inputs/general.css

@@ -1,174 +0,0 @@
-
-label {
-	display: block;
-	color: var(--theme-text-body);
-	font-family: var(--font-body);
-	font-size: 1rem;
-	margin-block-start: 1rem;
-}
-
-label:not(:first-of-type) {
-	margin-block-start: 2rem;
-}
-
-label.radio {
-	display: flex;
-	margin-block: 1rem;
-	justify-content: flex-start;
-}
-
-input,
-textarea {
-	display: block;
-	margin-block-start: 0.35rem;
-	margin-block-end: 1rem;
-	border: 0.125rem var(--theme-border-input) solid;
-	border-radius: 0.25rem;
-	color: var(--theme-text-body);
-	background-color: var(--theme-bg-input);
-	padding: 0.5rem;
-	font-family: var(--font-body);
-	font-size: 1rem;
-	width: 20rem;
-}
-
-input[disabled],
-textarea[disabled] {
-	opacity: 0.4;
-	cursor: default;
-	pointer-events: none;
-}
-
-input[type='text']:invalid,
-input[type='password']:invalid,
-textarea:invalid {
-	border-color: var(--theme-border-input-invalid);
-}
-
-input[type='text'][readonly] {
-	color: var(--theme-text-light);
-	border-color: var(--theme-line);
-}
-
-input[type='checkbox'] {
-	width: 1rem;
-	height: 1rem;
-	padding: 0;
-}
-
-input[type='checkbox'] + label {
-	margin-inline-start: 0.5rem;
-	margin-inline-end: 2rem;
-}
-
-input[type='radio'] {
-	flex: 0 0 2rem;
-	margin: 0.2rem;
-}
-
-textarea {
-	line-height: 1.7rem;
-	font-family: var(--font-monospace);
-}
-
-::-webkit-input-placeholder {
-	color: var(--theme-text-light);
-}
-
-button {
-	padding: 0.5rem 1.5rem;
-	border-radius: 0.5rem;
-	font-size: 1rem;
-	margin-block-start: 1rem;
-	margin-inline-end: 1rem;
-	cursor: pointer;
-	user-select: none;
-	appearance: none;
-	color: var(--theme-text-button-primary);
-	background: var(--theme-bg-button-primary);
-	text-decoration: none;
-	font-size: 1rem;
-	font-family: var(--font-body);
-	font-weight: 700;
-	line-height: 2rem;
-	display: flex;
-	align-items: center;
-}
-
-button.icon-only {
-	padding: 0.5rem;
-}
-
-button svg.icon {
-	--icon-size: 2rem;
-}
-
-button:not(.icon-only) svg.icon:first-child {
-	margin-inline-end: 0.5rem;
-}
-
-button:not(.icon-only) svg.icon:last-child {
-	margin-inline-start: 0.5rem;
-}
-
-button[data-style='secondary'] {
-	color: var(--theme-text-button-secondary);
-	background: var(--theme-bg-button-secondary);
-}
-
-button:not([disabled]):hover {
-	background: var(--theme-bg-button-primary-hover);
-}
-
-button[data-style='secondary']:not([disabled]):hover {
-	background: var(--theme-bg-button-secondary-hover);
-}
-
-button[disabled] {
-	opacity: 0.4;
-	cursor: default;
-	pointer-events: none;
-}
-
-select {
-	display: block;
-	margin-block-start: 0.35rem;
-	margin-block-end: 1rem;
-	border: 0.125rem var(--theme-border-input) solid;
-	border-radius: 0.25rem;
-	color: var(--theme-text-body);
-	background-color: var(--theme-bg-input);
-	padding: 0.5rem;
-	font-family: var(--font-body);
-	font-size: 1rem;
-	width: 20rem;
-	cursor: pointer;
-}
-
-select[disabled] {
-	opacity: 0.4;
-	cursor: default;
-	pointer-events: none;
-}
-
-select option {
-	color: var(--theme-text-body);
-	background-color: var(--theme-bg-input);
-	padding: 0.5rem;
-	font-family: var(--font-body);
-	font-size: 1rem;
-}
-
-:is(table, .table) :is(input, select) {
-	margin-block: 0;
-}
-
-p.error-box {
-	margin: 0;
-	padding: 0.5rem;
-	border-radius: 0.25rem;
-	color: var(--theme-text-error-box);
-	background: var(--theme-bg-error-box);
-	border: 0.1rem solid var(--theme-border-error-box);
-}
-

extras/theme-animation.css

@@ -1,112 +0,0 @@
-
-/* todo: is there a better way to handle defining these animations? despite efforts,
-   this implementation still has some degree of transition stacking / delays in nested
-   svg contexts in chrome */
-
-/* BG Color Only */
-body[data-color-transition-enabled],
-body[data-color-transition-enabled] :is(
-	[data-bg-transition]:not([data-color-transition]):not([data-border-transition]),
-	button
-) {
-	transition: background linear .5s;
-}
-
-/* Border Color Only */
-body[data-color-transition-enabled] :is(
-	[data-border-transition]:not([data-bg-transition]):not([data-color-transition])
-) {
-	transition: border-color linear .5s;
-}
-
-/* Color Only */
-body[data-color-transition-enabled] :is(
-	[data-color-transition]:not([data-bg-transition]):not([data-border-transition]),
-	p,
-	a:not(h1 a),
-	span:not(p span),
-	time:not(p time),
-	li:not([role='doc-footnote']), dt, dd,
-	h1, h2, h3, h4, h5, h6,
-	td, th
-) {
-	transition: color linear .5s;
-}
-
-/* BG and Color */
-body[data-color-transition-enabled] :is(
-	[data-bg-transition][data-color-transition]:not([data-border-transition]),
-	pre,
-	code:not(pre code),
-	samp:not(pre samp),
-	mark,
-	[role='doc-footnote']
-) {
-	transition:
-		color linear .5s,
-		background linear .5s;
-}
-
-/* BG and Border */
-body[data-color-transition-enabled] :is(
-	[data-bg-transition][data-border-transition]:not([data-color-transition]),
-	#root > footer,
-	p.error-box,
-	.popup form,
-	#outline
-) {
-	transition:
-		background linear .5s,
-		border-color linear .5s;
-}
-
-/** Color and Border */
-body[data-color-transition-enabled] :is(
-	[data-color-transition][data-border-transition]:not([data-bg-transition]),
-	tbody tr,
-	.tbody .tr
-) {
-	transition:
-		color linear .5s,
-		border-color linear .5s;
-}
-
-/* BG, Color, and Border */
-body[data-color-transition-enabled] :is(
-	[data-bg-transition][data-border-transition][data-color-transition],
-	input, textarea, select,
-	blockquote,
-	:is(section, aside):is([role='note'], .info, .highlight, .warning, .problem)
-) {
-	transition:
-		color linear .5s,
-		background linear .5s,
-		border-color linear .5s;
-}
-
-/* Fill and Stroke */
-body[data-color-transition-enabled] svg :is(
-	[fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *),
-	[style*='fill:'][style*='stroke:']:not([style*='fill:'][style*='stroke:'] *)
-) {
-	transition:
-		fill linear .5s,
-		stroke linear .5s;
-}
-
-/* Fill Only */
-body[data-color-transition-enabled] svg :is(
-	[fill^='var(']:not([stroke^='var(']):not([fill^='var('] *),
-	[style*='fill:']:not([style*='stroke:']):not([style*='fill:'] *)
-) {
-	transition: fill linear .5s;
-}
-
-/* Stroke Only */
-body[data-color-transition-enabled] :is(
-	svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *),
-	svg [style*='stroke:']:not([style*='fill:']):not([style*='stroke:'] *)
-	svg.icon
- ) {
-	transition: stroke linear .5s;
-}

extras/typography/dense.css

@@ -1,54 +0,0 @@
-
-:root {
-	font-size: 14px;
-}
-
-@media (max-width: 400px) {
-	:root {
-		font-size: 12px;
-	}
-}
-
-@media (min-width: 1600px) or (min-height: 1600px) {
-	:root {
-		font-size: calc(12px + 80vw / 400);
-	}
-}
-
-@media print {
-	:root {
-		font-size: 12px;
-	}
-}
-
-
-
-
-/* ===== Headings ===== */
-
-h2 {
-	margin-block: 2.5rem 1rem;
-}
-
-
-
-
-
-/* ===== Paragraphs ===== */
-
-p {
-	line-height: 1.5;
-	margin-block: 1rem;
-}
-
-
-
-
-
-
-/* ===== Lists ===== */
-
-li {
-	line-height: 1.5;
-	margin-block: 0.25rem;
-}

extras/typography/general.css

@@ -1,404 +0,0 @@
-
-/* ===== Headings ===== */
-
-h1, h2, h3, h4, h5, h6 {
-	font-family: var(--font-heading);
-	line-height: 1;
-	color: var(--theme-text-heading);
-}
-
-h1 {
-	font-size: 2rem;
-	font-weight: 300;
-	margin-block-end: 1rem;
-}
-
-h2 {
-	font-size: 2rem;
-	font-weight: 500;
-}
-
-h3 {
-	font-size: 1.17rem;
-}
-
-h3, h4, h5, h6 {
-	margin-block: 3rem 1rem;
-}
-
-h5, h6 {
-	font-size: 0.9rem;
-	font-weight: 600;
-}
-
-h6 {
-	font-weight: 500;
-}
-
-:not(li) > :is(h1, h2, h3, h4, h5, h6),
-li > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
-	padding-block-start: 1rem;
-}
-
-:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3),
-:is(h1, h2, h3):first-child {
-	margin-block-start: 1rem;
-}
-
-:is(h1, h2, h3, h4, h5, h6) + :is(h4, h5, h6),
-:is(h4, h5, h6):first-child {
-	margin-block-start: 0;
-}
-
-a.heading-anchor {
-	color: var(--theme-text-light);
-	opacity: 0.3;
-	margin-inline-start: 0.5rem;
-}
-
-:is(h1, h2, h3, h4, h5, h6):hover > a.heading-anchor {
-	opacity: 1;
-}
-
-:is(h1, h2, h3, h4, h5, h6) svg.icon:not(.heading-anchor > svg) {
-	--icon-size: 1em;
-}
-
-
-
-
-
-
-/* ===== Paragraphs ===== */
-
-p {
-	margin-inline: 0;
-	font-size: 1rem;
-	font-family: var(--font-body);
-	color: var(--theme-text-body);
-}
-
-
-
-
-/* ===== Links ===== */
-
-a {
-	font-family: inherit;
-	color: var(--theme-text-link);
-}
-
-a:active,
-a:hover,
-a:focus {
-	color: var(--theme-text-link-active);
-}
-
-a:visited {
-	color: var(--theme-text-link-visited);
-}
-
-a.icon-link {
-	display: inline-flex;
-	column-gap: 0.3rem;
-	align-items: center;
-}
-
-a.icon-link svg.icon {
-	--icon-size: 1rem;
-}
-
-
-
-
-
-
-/* ===== Lists ===== */
-
-ul, ol {
-	padding-inline-start: 2.5rem;
-}
-
-li, dt, dd {
-	font-family: var(--font-body);
-	color: var(--theme-text-body);
-}
-
-li {
-	font-size: 1rem;
-}
-
-ul[role='doc-endnotes'] {
-	list-style: none;
-	padding-inline-start: 1rem;
-}
-
-[role='doc-footnote']:target {
-	background: var(--theme-bg-heavy);
-}
-
-dl {
-	padding: 1rem;
-}
-
-dt, dd {
-	/*  */
-}
-
-dt {
-	font-weight: 700;
-}
-
-dt p {
-	margin-block-end: 1rem;
-}
-
-dt:not(:first-of-type) {
-	margin-block-start: 2rem;
-}
-
-/* dd {
-	margin-inline-start: 1rem;
-	padding-inline-start: 1rem;
-	padding-block: 0.125rem;
-	border-inline-start: 0.5rem var(--theme-line) solid;
-	background: var(--theme-bg-heavy)
-} */
-
-dd p {
-	margin-block: 1rem;
-}
-
-.cite-label {
-	font-weight: 600;
-}
-
-
-
-
-
-/* ===== Mark / Highlight ===== */
-
-mark {
-	color: var(--theme-text-highlight);
-	background-color: var(--theme-bg-text-highlight);
-	padding: 0.2rem;
-}
-
-
-
-
-
-
-/* ===== User Selection ===== */
-
-::selection {
-	fill: var(--theme-text-selection) !important;
-	color: var(--theme-text-selection) !important;
-	background-color: var(--theme-bg-text-selection) !important;
-}
-
-
-
-
-
-
-/* ===== Tables ===== */
-
-table, .table, td, .td {
-	color: var(--theme-text-body);
-	font-family: var(--font-body);
-}
-
-table, .table {
-	display: table;
-	margin-block: 2rem;
-	border-collapse: collapse;
-}
-
-table, th, td,
-.table, .th, .td {
-	font-size: 1rem;
-	line-height: 1.75;
-}
-
-thead, .thead {
-	display: table-header-group;
-}
-
-tbody, .tbody {
-	display: table-row-group;
-}
-
-tbody tr,
-.tbody .tr {
-	border-top: 1px var(--theme-line) solid;
-}
-
-tr, .tr {
-	display: table-row;
-}
-
-th, .th {
-	text-align: center;
-	font-weight: 700;
-	color: var(--theme-text-heading);
-}
-
-th, .th,
-td, .td {
-	padding-block: 0.5rem;
-	padding-inline: 1rem;
-	display: table-cell;
-}
-
-td, .td {
-	display: table-cell;
-	font-weight: 300;
-	vertical-align: top;
-}
-
-:is(td, .td):not(:last-of-type) {
-	border-inline-end: 0.1rem solid var(--theme-line);
-}
-
-:is(table, .table) :is(input, select) {
-	margin-block: 0;
-}
-
-table dl {
-	padding: 0;
-}
-
-
-
-
-
-
-/* ===== Pre-formatted Blocks ===== */
-
-pre {
-	color: var(--theme-code-normal);
-	font-family: var(--font-monospace);
-	margin-block: 3rem;
-	margin-inline: 2rem;
-	padding-block: 0.5rem;
-	padding-inline: 1rem;
-	border: 0.1rem solid var(--theme-line);
-	border-radius: 1rem;
-	font-size: 1rem;
-	overflow: auto;
-	background: var(--theme-bg-light);
-}
-
-
-
-
-/* ===== Code / Sample Output ===== */
-
-code, samp {
-	font-size: 1rem;
-	color: var(--theme-code-normal);
-	font-family: var(--font-monospace);
-}
-
-:not(pre) > :is(code, samp) {
-	color: inherit;
-	background: var(--theme-bg-light);
-	padding-inline: 0.25rem;
-	border: 0.1rem solid var(--theme-line);
-}
-
-
-
-
-
-/* ===== Note Blocks ===== */
-
-:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) {
-	font-size: 1rem;
-	color: var(--theme-text-light);
-	padding-block: 0.6rem;
-	padding-inline-start: 1rem;
-	margin: 1rem;
-	border-inline-start: 0.8rem solid var(--theme-line);
-	background: var(--theme-bg-light);
-}
-
-:is(aside, section).info {
-	border-inline-start-color: var(--theme-accent-info);
-}
-
-:is(aside, section).highlight {
-	border-inline-start-color: var(--theme-accent-highlight);
-}
-
-:is(aside, section).warning {
-	border-inline-start-color: var(--theme-accent-warning);
-}
-
-:is(aside, section).problem {
-	border-inline-start-color: var(--theme-accent-problem);
-}
-
-
-
-
-
-/* ===== Figure Captions ===== */
-
-figcaption {
-	font-family: var(--font-body);
-	text-align: center;
-	font-size: 0.85rem;
-	margin-block-start: 1rem;
-	color: var(--theme-text-light);
-	max-width: 60vw;
-	margin-inline: auto;
-}
-
-
-
-
-
-/* ===== Block Quotes ===== */
-
-blockquote {
-	margin-block: 2rem;
-	margin-inline: 1rem;
-	padding-block: 0.5rem;
-	padding-inline: 1.5rem;
-	border-inline-start: 0.25rem var(--theme-line) solid;
-}
-
-blockquote p {
-	margin: 0;
-}
-
-
-
-
-
-
-/* ===== Small Spans ===== */
-
-small {
-	font-size: 0.8rem;
-	font-family: var(--font-body);
-	color: var(--theme-text-body);
-}
-
-
-
-
-
-/* ===== Horizontal Rules ===== */
-
-hr {
-	border-block-start-width: 0.1rem;
-	border-style: solid;
-	border-color: var(--theme-line);
-	width: 90%;
-	margin-block: 4rem 6rem;
-}
-

extras/typography/spacious.css

@@ -1,54 +0,0 @@
-
-:root {
-	font-size: 16px;
-}
-
-@media (max-width: 400px) {
-	:root {
-		font-size: 14px;
-	}
-}
-
-@media (min-width: 1600px) or (min-height: 1600px) {
-	:root {
-		font-size: calc(12px + 100vw / 400);
-	}
-}
-
-@media print {
-	:root {
-		font-size: 12px;
-	}
-}
-
-
-
-
-/* ===== Headings ===== */
-
-h2 {
-	margin-block: 4rem 1rem;
-}
-
-
-
-
-
-/* ===== Paragraphs ===== */
-
-p {
-	line-height: 1.75;
-	margin-block: 1.25rem;
-}
-
-
-
-
-
-
-/* ===== Lists ===== */
-
-li {
-	line-height: 1.75;
-	margin-block: 0.5rem;
-}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@doc-utils/docs2website",
-  "version": "0.1.3",
+  "version": "0.1.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@doc-utils/docs2website",
-      "version": "0.1.3",
+      "version": "0.1.2",
       "dependencies": {
         "@doc-utils/color-themes": "^0.1.14",
         "@doc-utils/jsonschema2markdown": "^0.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doc-utils/docs2website",
-  "version": "0.1.3",
+  "version": "0.1.2",
   "publishConfig": {
     "registry": "https://gitea.home.jbrumond.me/api/packages/doc-utils/npm/"
   },

src/template.ts

@@ -42,13 +42,6 @@ export async function load_extras() {
 		'components/outline-button.js',
 		'components/outline-inline.js',
 		'prism.css',
-		'typography/spacious.css',
-		'typography/dense.css',
-		'typography/general.css',
-		'theme-animation.css',
-		'forms-inputs/spacious.css',
-		'forms-inputs/dense.css',
-		'forms-inputs/general.css',
 	];
 
 	const promises = extras_files.map((file) => load_from_dir(extras_dir, file));