@code-coaching/vuetiful 0.4.1 → 0.5.0

package/src/styles/elements/logo-clouds.css

@@ -1,29 +1,29 @@
 /* Tailwind Elements: logo-clouds.css */
 
 @layer components {
-	.logo-cloud {
-		@apply grid overflow-hidden;
-		/* Theme: Rounded */
-		@apply rounded-container-token;
-	}
+  .logo-cloud {
+    @apply grid overflow-hidden;
+    /* Theme: Rounded */
+    @apply rounded-container-token;
+  }
 
-	/* === Logo Item (Child) === */
+  /* === Logo Item (Child) === */
 
-	.logo-item {
-		@apply: flex-auto text-center space-x-4 shadow;
-		/* Center Contents */
-		@apply flex justify-center items-center space-x-4;
-		/* Background */
-		@apply bg-surface-100-800-token;
-		/* Text */
-		@apply text-base font-bold text-black dark:text-white;
-		/* Padding */
-		@apply py-4 md:py-8;
-	}
+  .logo-item {
+    @apply: flex-auto text-center space-x-4 shadow;
+    /* Center Contents */
+    @apply flex items-center justify-center space-x-4;
+    /* Background */
+    @apply bg-surface-100-800-token;
+    /* Text */
+    @apply text-base font-bold text-black dark:text-white;
+    /* Padding */
+    @apply py-4 md:py-8;
+  }
 
-	/* === States === */
+  /* === States === */
 
-	a.logo-item {
-		@apply hover:brightness-110;
-	}
+  a.logo-item {
+    @apply hover:brightness-110;
+  }
 }

package/src/styles/elements/modals.css

@@ -3,13 +3,13 @@
 /* === Modal (helpers) === */
 
 .w-modal-slim {
-	@apply w-full max-w-[400px];
+  @apply w-full max-w-[400px];
 }
 
 .w-modal {
-	@apply w-full max-w-[640px];
+  @apply w-full max-w-[640px];
 }
 
 .w-modal-wide {
-	@apply w-full max-w-[80%];
+  @apply w-full max-w-[80%];
 }

package/src/styles/elements/placeholders.css

@@ -1,17 +1,17 @@
 /* Tailwind Elements: placeholders.css */
 
 @layer components {
-	/* === Base === */
+  /* === Base === */
 
-	.placeholder {
-		@apply bg-surface-300-600-token h-5;
-		/* Theme: Rounded */
-		@apply rounded-token;
-	}
+  .placeholder {
+    @apply h-5 bg-surface-300-600-token;
+    /* Theme: Rounded */
+    @apply rounded-token;
+  }
 
-	/* === Shapes === */
+  /* === Shapes === */
 
-	.placeholder-circle {
-		@apply bg-surface-300-600-token aspect-square rounded-full;
-	}
+  .placeholder-circle {
+    @apply aspect-square rounded-full bg-surface-300-600-token;
+  }
 }

package/src/styles/elements/popups.css

@@ -3,14 +3,14 @@
 /* === Popup === */
 
 [data-popup] {
-	/* https://floating-ui.com/docs/computeposition#usage */
-	@apply absolute top-0 left-0; /* max-w-max */
-	/* Set hidden on page load */
-	@apply hidden;
-	/* Transitions */
-	@apply transition-opacity duration-200;
+  /* https://floating-ui.com/docs/computeposition#usage */
+  @apply absolute top-0 left-0; /* max-w-max */
+  /* Set hidden on page load */
+  @apply hidden;
+  /* Transitions */
+  @apply transition-opacity duration-200;
 }
 
 [data-popup] .arrow {
-	@apply absolute rotate-45 w-2 h-2;
+  @apply absolute h-2 w-2 rotate-45;
 }

package/src/styles/elements/tables.css

@@ -1,102 +1,102 @@
 /* Elements: tables.css */
 
 @layer components {
-	.table-container {
-		@apply overflow-x-auto w-full rounded-container-token;
-	}
+  .table-container {
+    @apply w-full overflow-x-auto rounded-container-token;
+  }
 
-	.table {
-		@apply w-full overflow-hidden table-auto;
-		/* background */
-		@apply bg-surface-100-800-token;
-		/* Theme: Rounded */
-		@apply rounded-container-token;
-	}
+  .table {
+    @apply w-full table-auto overflow-hidden;
+    /* background */
+    @apply bg-surface-100-800-token;
+    /* Theme: Rounded */
+    @apply rounded-container-token;
+  }
 
-	/* === Hover Styles ==== */
+  /* === Hover Styles ==== */
 
-	.table-hover tbody tr {
-		@apply hover:bg-surface-500/20 even:hover:bg-surface-500/20;
-	}
+  .table-hover tbody tr {
+    @apply hover:bg-surface-500/20 even:hover:bg-surface-500/20;
+  }
 
-	.table-interactive tbody tr {
-		@apply hover:bg-primary-hover-token even:hover:bg-primary-hover-token cursor-pointer;
-	}
+  .table-interactive tbody tr {
+    @apply cursor-pointer hover:bg-primary-hover-token even:hover:bg-primary-hover-token;
+  }
 
-	/* === Sort Styles ==== */
+  /* === Sort Styles ==== */
 
-	[data-sort] {
-		@apply hover:bg-primary-hover-token cursor-pointer;
-		/* Sort Icon - invisible by default */
-		@apply after:opacity-0 after:!ml-2 after:!content-['↓'];
-	}
+  [data-sort] {
+    @apply cursor-pointer hover:bg-primary-hover-token;
+    /* Sort Icon - invisible by default */
+    @apply after:!ml-2 after:opacity-0 after:!content-['↓'];
+  }
 
-	.table-sort-asc {
-		@apply after:opacity-50 after:!content-['↓'];
-	}
+  .table-sort-asc {
+    @apply after:opacity-50 after:!content-['↓'];
+  }
 
-	.table-sort-dsc {
-		@apply after:opacity-50 after:!content-['↑'];
-	}
+  .table-sort-dsc {
+    @apply after:opacity-50 after:!content-['↑'];
+  }
 
-	/* === Table Head === */
+  /* === Table Head === */
 
-	.table thead {
-		@apply bg-surface-200-700-token border-b border-surface-500/20;
-	}
+  .table thead {
+    @apply border-b border-surface-500/20 bg-surface-200-700-token;
+  }
 
-	.table thead tr {
-		@apply capitalize text-left;
-	}
+  .table thead tr {
+    @apply text-left capitalize;
+  }
 
-	.table thead th {
-		@apply font-bold p-4;
-	}
+  .table thead th {
+    @apply p-4 font-bold;
+  }
 
-	/* === Table Body === */
+  /* === Table Body === */
 
-	.table tbody tr {
-		@apply border-b border-surface-500/20 even:bg-surface-500/5;
-	}
+  .table tbody tr {
+    @apply border-b border-surface-500/20 even:bg-surface-500/5;
+  }
 
-	.table tbody td {
-		/* NOTE: removed this to allow wrapping */
-		@apply text-sm px-3 py-4 align-top whitespace-nowrap lg:whitespace-normal;
-	}
+  .table tbody td {
+    /* NOTE: removed this to allow wrapping */
+    @apply whitespace-nowrap px-3 py-4 align-top text-sm lg:whitespace-normal;
+  }
 
-	.table-compact tbody td {
-		@apply !py-3;
-	}
+  .table-compact tbody td {
+    @apply !py-3;
+  }
 
-	.table-comfortable tbody td {
-		@apply !py-5;
-	}
+  .table-comfortable tbody td {
+    @apply !py-5;
+  }
 
-	/* === Table Foot === */
+  /* === Table Foot === */
 
-	.table tfoot {
-		@apply bg-surface-100-800-token;
-	}
+  .table tfoot {
+    @apply bg-surface-100-800-token;
+  }
 
-	.table tfoot tr {
-		@apply capitalize text-left;
-	}
+  .table tfoot tr {
+    @apply text-left capitalize;
+  }
 
-	.table tfoot th,
-	.table tfoot td {
-		@apply p-4;
-	}
+  .table tfoot th,
+  .table tfoot td {
+    @apply p-4;
+  }
 
-	/* === Rows Specific === */
+  /* === Rows Specific === */
 
-	.table-row-checked {
-		@apply !bg-secondary-500/20;
-	}
+  .table-row-checked {
+    @apply !bg-secondary-500/20;
+  }
 
-	/* === Cells Specific === */
+  /* === Cells Specific === */
 
-	/* Source: https://stackoverflow.com/questions/11267154/fit-cell-width-to-content */
-	.table-cell-fit {
-		@apply w-[1%] whitespace-nowrap;
-	}
+  /* Source: https://stackoverflow.com/questions/11267154/fit-cell-width-to-content */
+  .table-cell-fit {
+    @apply w-[1%] whitespace-nowrap;
+  }
 }

package/src/styles/elements.css

@@ -2,18 +2,18 @@
 /* Import AFTER your theme, but BEFORE your global stylesheet. */
 /* Recommended as the LAST stylesheet in the set */
 
-@import 'elements/alerts.css';
-@import 'elements/badges.css';
-@import 'elements/breadcrumbs.css';
-@import 'elements/buttons.css';
-@import 'elements/cards.css';
-@import 'elements/chips.css';
-@import 'elements/forms.css';
-@import 'elements/lists.css';
-@import 'elements/logo-clouds.css';
-@import 'elements/placeholders.css';
-@import 'elements/tables.css';
+@import "elements/alerts.css";
+@import "elements/badges.css";
+@import "elements/breadcrumbs.css";
+@import "elements/buttons.css";
+@import "elements/cards.css";
+@import "elements/chips.css";
+@import "elements/forms.css";
+@import "elements/lists.css";
+@import "elements/logo-clouds.css";
+@import "elements/placeholders.css";
+@import "elements/tables.css";
 
 /* Utilities */
-@import 'elements/modals.css';
-@import 'elements/popups.css';
+@import "elements/modals.css";
+@import "elements/popups.css";

package/src/styles/highlight-js.css

@@ -8,8 +8,8 @@
 .hljs-template-variable,
 .hljs-type,
 .hljs-variable.language_ {
-	/* color: #ff7b72; */
-	@apply text-red-400;
+  /* color: #ff7b72; */
+  @apply text-red-400;
 }
 
 /* Purple */
@@ -17,8 +17,8 @@
 .hljs-title.class_,
 .hljs-title.class_.inherited__,
 .hljs-title.function_ {
-	/* color: #d2a8ff; */
-	@apply text-purple-400;
+  /* color: #d2a8ff; */
+  @apply text-purple-400;
 }
 
 /* Sky */
@@ -32,31 +32,31 @@
 .hljs-selector-class,
 .hljs-selector-id,
 .hljs-variable {
-	/* color: #79c0ff; */
-	@apply text-sky-300;
+  /* color: #79c0ff; */
+  @apply text-sky-300;
 }
 
 /* Blue */
 .hljs-meta .hljs-string,
 .hljs-regexp,
 .hljs-string {
-	/* color: #a5d6ff; */
-	@apply text-blue-400;
+  /* color: #a5d6ff; */
+  @apply text-blue-400;
 }
 
 /* Amber (types) */
 .hljs-built_in,
 .hljs-symbol {
-	/* color: #ffa657; */
-	@apply text-amber-400;
+  /* color: #ffa657; */
+  @apply text-amber-400;
 }
 
 /* Gray (Medium) */
 .hljs-code,
 .hljs-comment,
 .hljs-formula {
-	/* color: #8b949e; */
-	@apply text-neutral-500;
+  /* color: #8b949e; */
+  @apply text-neutral-500;
 }
 
 /* Green (Tags) */
@@ -64,53 +64,53 @@
 .hljs-quote,
 .hljs-selector-pseudo,
 .hljs-selector-tag {
-	/* color: #7ee787; */
-	@apply text-green-400;
+  /* color: #7ee787; */
+  @apply text-green-400;
 }
 
 /* Pink (Light) */
 .hljs-subst {
-	/* color: #c9d1d9; */
-	@apply text-pink-300;
+  /* color: #c9d1d9; */
+  @apply text-pink-300;
 }
 
 /* Sky */
 .hljs-section {
-	/* color: #1f6feb; */
-	/* font-weight: 700; */
-	@apply font-bold text-sky-400;
+  /* color: #1f6feb; */
+  /* font-weight: 700; */
+  @apply font-bold text-sky-400;
 }
 
 /* Yellow */
 .hljs-bullet {
-	/* color: #f2cc60; */
-	@apply text-yellow-400;
+  /* color: #f2cc60; */
+  @apply text-yellow-400;
 }
 
 /* Gray (Light) */
 .hljs-emphasis {
-	/* color: #c9d1d9; */
-	/* font-style: italic; */
-	@apply italic text-neutral-200;
+  /* color: #c9d1d9; */
+  /* font-style: italic; */
+  @apply italic text-neutral-200;
 }
 
 /* Gray (Light) */
 .hljs-strong {
-	/* color: #c9d1d9; */
-	/* font-weight: 700; */
-	@apply font-bold text-neutral-200;
+  /* color: #c9d1d9; */
+  /* font-weight: 700; */
+  @apply font-bold text-neutral-200;
 }
 
 /* Lime / Green */
 .hljs-addition {
-	/* color: #aff5b4; */
-	/* background-color: #033a16; */
-	@apply text-lime-300 bg-green-700;
+  /* color: #aff5b4; */
+  /* background-color: #033a16; */
+  @apply bg-green-700 text-lime-300;
 }
 
 /* Pink / Red */
 .hljs-deletion {
-	/* color: #ffdcd7; */
-	/* background-color: #67060c; */
-	@apply text-rose-300 bg-rose-700;
+  /* color: #ffdcd7; */
+  /* background-color: #67060c; */
+  @apply bg-rose-700 text-rose-300;
 }

package/src/styles/typography.css

@@ -1,101 +1,101 @@
 /* Stylesheet: typography.css */
 
 @layer base {
-	body {
-		@apply font-token text-token;
-	}
-
-	/* === Headings === */
-
-	h1:not(.unstyled):is(:not(.prose *)) {
-		@apply font-heading-token text-3xl md:text-5xl;
-	}
-	h2:not(.unstyled):is(:not(.prose *)) {
-		@apply font-heading-token text-2xl md:text-4xl;
-	}
-	h3:not(.unstyled):is(:not(.prose *)) {
-		@apply font-heading-token text-xl md:text-2xl;
-	}
-	h4:not(.unstyled):is(:not(.prose *)) {
-		@apply font-heading-token text-lg md:text-xl;
-	}
-	h5:not(.unstyled):is(:not(.prose *)) {
-		@apply font-heading-token text-base md:text-lg;
-	}
-	h6:not(.unstyled):is(:not(.prose *)) {
-		@apply font-heading-token text-sm md:text-base;
-	}
-
-	/* === Elements === */
-
-	p:not(.unstyled):is(:not(.prose *)) {
-		/* NOTE: do not hardcode a text color style here. It makes color overrides difficult. */
-		@apply text-base;
-	}
-
-	a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(a.card):not(
-			.list-nav a
-		) {
-		@apply text-primary-700 dark:text-primary-500 hover:brightness-110 underline;
-	}
-
-	blockquote:not(.unstyled):is(:not(.prose *)) {
-		@apply text-token text-base italic border-l-8 border-l-secondary-500 px-4 pl-4;
-	}
-
-	/* Keyboard */
-	kbd:not(.unstyled):is(:not(.prose *)) {
-		@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;
-	}
-
-	/* === Code Blocks === */
-	/* For use outside of Skeleton's CodeBlock component */
-
-	pre:not(.unstyled):not(.code-block pre):is(:not(.prose *)) {
-		@apply font-mono text-base bg-neutral-900/90 text-white p-4 whitespace-pre-wrap overflow-x-auto rounded-container-token;
-	}
-
-	code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
-		@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:not(.unstyled):is(:not(.prose *)),
-	del:not(.unstyled):is(:not(.prose *)) {
-		@apply block relative p-0.5 pl-5;
-		text-decoration: none;
-	}
-
-	ins:not(.unstyled):is(:not(.prose *))::before,
-	del:not(.unstyled):is(:not(.prose *))::before {
-		@apply absolute left-1 font-mono;
-	}
-	ins:not(.unstyled):is(:not(.prose *))::before {
-		content: '+';
-	}
-	del:not(.unstyled):is(:not(.prose *))::before {
-		content: '−';
-	}
-
-	ins:not(.unstyled):is(:not(.prose *)) {
-		@apply font-mono bg-success-500 text-on-success-token;
-	}
-	del:not(.unstyled):is(:not(.prose *)) {
-		@apply font-mono bg-error-500 text-on-error-token;
-	}
-
-	/* === Date/Time === */
-	/* Useful for displaying timestamps */
-
-	time:not(.unstyled):is(:not(.prose *)) {
-		@apply text-sm text-surface-500 dark:text-surface-400;
-	}
+  body {
+    @apply font-token text-token;
+  }
+
+  /* === Headings === */
+
+  h1:not(.unstyled):is(:not(.prose *)) {
+    @apply text-3xl font-heading-token md:text-5xl;
+  }
+  h2:not(.unstyled):is(:not(.prose *)) {
+    @apply text-2xl font-heading-token md:text-4xl;
+  }
+  h3:not(.unstyled):is(:not(.prose *)) {
+    @apply text-xl font-heading-token md:text-2xl;
+  }
+  h4:not(.unstyled):is(:not(.prose *)) {
+    @apply text-lg font-heading-token md:text-xl;
+  }
+  h5:not(.unstyled):is(:not(.prose *)) {
+    @apply text-base font-heading-token md:text-lg;
+  }
+  h6:not(.unstyled):is(:not(.prose *)) {
+    @apply text-sm font-heading-token md:text-base;
+  }
+
+  /* === Elements === */
+
+  p:not(.unstyled):is(:not(.prose *)) {
+    /* NOTE: do not hardcode a text color style here. It makes color overrides difficult. */
+    @apply text-base;
+  }
+
+  a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(
+      .logo-item
+    ):not(a.card):not(.list-nav a) {
+    @apply text-primary-700 underline hover:brightness-110 dark:text-primary-500;
+  }
+
+  blockquote:not(.unstyled):is(:not(.prose *)) {
+    @apply border-l-8 border-l-secondary-500 px-4 pl-4 text-base italic text-token;
+  }
+
+  /* Keyboard */
+  kbd:not(.unstyled):is(:not(.prose *)) {
+    @apply font-sans text-sm font-bold;
+    @apply rounded px-1.5 py-[3px] bg-surface-300-600-token;
+    @apply ring-[1px] ring-inset ring-surface-900;
+    @apply border-b-2 border-surface-900;
+  }
+
+  /* === Code Blocks === */
+  /* For use outside of Skeleton's CodeBlock component */
+
+  pre:not(.unstyled):not(.code-block pre):is(:not(.prose *)) {
+    @apply overflow-x-auto whitespace-pre-wrap bg-neutral-900/90 p-4 font-mono text-base text-white rounded-container-token;
+  }
+
+  code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
+    @apply whitespace-nowrap font-mono text-xs text-primary-700 dark:text-primary-400;
+    @apply bg-primary-500/30 dark:bg-primary-500/20;
+    @apply rounded py-0.5 px-1;
+  }
+
+  /* === 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:not(.unstyled):is(:not(.prose *)),
+  del:not(.unstyled):is(:not(.prose *)) {
+    @apply relative block p-0.5 pl-5;
+    text-decoration: none;
+  }
+
+  ins:not(.unstyled):is(:not(.prose *))::before,
+  del:not(.unstyled):is(:not(.prose *))::before {
+    @apply absolute left-1 font-mono;
+  }
+  ins:not(.unstyled):is(:not(.prose *))::before {
+    content: "+";
+  }
+  del:not(.unstyled):is(:not(.prose *))::before {
+    content: "−";
+  }
+
+  ins:not(.unstyled):is(:not(.prose *)) {
+    @apply bg-success-500 font-mono text-on-success-token;
+  }
+  del:not(.unstyled):is(:not(.prose *)) {
+    @apply bg-error-500 font-mono text-on-error-token;
+  }
+
+  /* === Date/Time === */
+  /* Useful for displaying timestamps */
+
+  time:not(.unstyled):is(:not(.prose *)) {
+    @apply text-sm text-surface-500 dark:text-surface-400;
+  }
 }