@code-coaching/vuetiful 0.4.0 → 0.5.0

package/src/styles/elements/lists.css

@@ -1,48 +1,48 @@
 /* Tailwind Elements: button.css */
 
 @layer components {
-	/* === Lists (Parents) === */
+  /* === Lists (Parents) === */
 
-	.list,
-	.list-dl,
-	.list-nav ul {
-		/* List Style */
-		@apply list-none;
-		/* Spacing */
-		@apply space-y-1;
-	}
+  .list,
+  .list-dl,
+  .list-nav ul {
+    /* List Style */
+    @apply list-none;
+    /* Spacing */
+    @apply space-y-1;
+  }
 
-	/* === List Items (Children) === */
+  /* === List Items (Children) === */
 
-	.list li {
-		/* @apply bg-red-500; */
-		@apply flex items-center space-x-4 whitespace-nowrap;
-		/* Padding */
-		@apply p-2;
-		/* Theme: Rounded */
-		@apply rounded-token;
-	}
+  .list li {
+    /* @apply bg-red-500; */
+    @apply flex items-center space-x-4 whitespace-nowrap;
+    /* Padding */
+    @apply p-2;
+    /* Theme: Rounded */
+    @apply rounded-token;
+  }
 
-	.list-dl div {
-		/* @apply bg-blue-500; */
-		@apply flex items-center space-x-4 whitespace-nowrap;
-		/* Padding */
-		@apply p-2;
-		/* Theme: Rounded */
-		@apply rounded-token;
-	}
+  .list-dl div {
+    /* @apply bg-blue-500; */
+    @apply flex items-center space-x-4 whitespace-nowrap;
+    /* Padding */
+    @apply p-2;
+    /* Theme: Rounded */
+    @apply rounded-token;
+  }
 
-	.list-nav a,
-	.list-nav button,
-	.list-option {
-		@apply flex items-center space-x-4 whitespace-nowrap;
-		/* Padding */
-		@apply px-4 py-2;
-		/* Hover */
-		@apply bg-primary-hover-token;
-		/* Cursor */
-		@apply cursor-pointer;
-		/* Theme: Rounded */
-		@apply rounded-token;
-	}
+  .list-nav a,
+  .list-nav button,
+  .list-option {
+    @apply flex items-center space-x-4 whitespace-nowrap;
+    /* Padding */
+    @apply px-4 py-2;
+    /* Hover */
+    @apply bg-primary-hover-token;
+    /* Cursor */
+    @apply cursor-pointer;
+    /* Theme: Rounded */
+    @apply rounded-token;
+  }
 }

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;
 }