@code-coaching/vuetiful 0.0.0

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

@@ -0,0 +1,29 @@
+/* Tailwind Elements: logo-clouds.css */
+
+@layer components {
+	.logo-cloud {
+		@apply grid overflow-hidden;
+		/* Theme: Rounded */
+		@apply rounded-container-token;
+	}
+
+	/* === 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;
+	}
+
+	/* === States === */
+
+	a.logo-item {
+		@apply hover:brightness-110;
+	}
+}

package/src/styles/elements/modals.css

@@ -0,0 +1,15 @@
+/* Tailwind Elements: modals.css */
+
+/* === Modal (helpers) === */
+
+.w-modal-slim {
+	@apply w-full max-w-[400px];
+}
+
+.w-modal {
+	@apply w-full max-w-[640px];
+}
+
+.w-modal-wide {
+	@apply w-full max-w-[80%];
+}

package/src/styles/elements/placeholders.css

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

package/src/styles/elements/popups.css

@@ -0,0 +1,16 @@
+/* Tailwind Elements: popups.css */
+
+/* === 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;
+}
+
+[data-popup] .arrow {
+	@apply absolute rotate-45 w-2 h-2;
+}

package/src/styles/elements/tables.css

@@ -0,0 +1,102 @@
+/* Elements: tables.css */
+
+@layer components {
+	.table-container {
+		@apply overflow-x-auto w-full rounded-container-token;
+	}
+
+	.table {
+		@apply w-full overflow-hidden table-auto;
+		/* background */
+		@apply bg-surface-100-800-token;
+		/* Theme: Rounded */
+		@apply rounded-container-token;
+	}
+
+	/* === Hover Styles ==== */
+
+	.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;
+	}
+
+	/* === 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-['↓'];
+	}
+
+	.table-sort-asc {
+		@apply after:opacity-50 after:!content-['↓'];
+	}
+
+	.table-sort-dsc {
+		@apply after:opacity-50 after:!content-['↑'];
+	}
+
+	/* === Table Head === */
+
+	.table thead {
+		@apply bg-surface-200-700-token border-b border-surface-500/20;
+	}
+
+	.table thead tr {
+		@apply capitalize text-left;
+	}
+
+	.table thead th {
+		@apply font-bold p-4;
+	}
+
+	/* === Table Body === */
+
+	.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-compact tbody td {
+		@apply !py-3;
+	}
+
+	.table-comfortable tbody td {
+		@apply !py-5;
+	}
+
+	/* === Table Foot === */
+
+	.table tfoot {
+		@apply bg-surface-100-800-token;
+	}
+
+	.table tfoot tr {
+		@apply capitalize text-left;
+	}
+
+	.table tfoot th,
+	.table tfoot td {
+		@apply p-4;
+	}
+
+	/* === Rows Specific === */
+
+	.table-row-checked {
+		@apply !bg-secondary-500/20;
+	}
+
+	/* === Cells Specific === */
+
+	/* Source: https://stackoverflow.com/questions/11267154/fit-cell-width-to-content */
+	.table-cell-fit {
+		@apply w-[1%] whitespace-nowrap;
+	}
+}

package/src/styles/elements.css

@@ -0,0 +1,19 @@
+/* Stylesheet: elements.css */
+/* 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';
+
+/* Utilities */
+@import 'elements/modals.css';
+@import 'elements/popups.css';

package/src/styles/highlight-js.css

@@ -0,0 +1,116 @@
+/* Skeleton Highlight.js Theme */
+
+/* Red */
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+	/* color: #ff7b72; */
+	@apply text-red-400;
+}
+
+/* Purple */
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+	/* color: #d2a8ff; */
+	@apply text-purple-400;
+}
+
+/* Sky */
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+	/* color: #79c0ff; */
+	@apply text-sky-300;
+}
+
+/* Blue */
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+	/* color: #a5d6ff; */
+	@apply text-blue-400;
+}
+
+/* Amber (types) */
+.hljs-built_in,
+.hljs-symbol {
+	/* color: #ffa657; */
+	@apply text-amber-400;
+}
+
+/* Gray (Medium) */
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+	/* color: #8b949e; */
+	@apply text-neutral-500;
+}
+
+/* Green (Tags) */
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+	/* color: #7ee787; */
+	@apply text-green-400;
+}
+
+/* Pink (Light) */
+.hljs-subst {
+	/* color: #c9d1d9; */
+	@apply text-pink-300;
+}
+
+/* Sky */
+.hljs-section {
+	/* color: #1f6feb; */
+	/* font-weight: 700; */
+	@apply font-bold text-sky-400;
+}
+
+/* Yellow */
+.hljs-bullet {
+	/* color: #f2cc60; */
+	@apply text-yellow-400;
+}
+
+/* Gray (Light) */
+.hljs-emphasis {
+	/* 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;
+}
+
+/* Lime / Green */
+.hljs-addition {
+	/* color: #aff5b4; */
+	/* background-color: #033a16; */
+	@apply text-lime-300 bg-green-700;
+}
+
+/* Pink / Red */
+.hljs-deletion {
+	/* color: #ffdcd7; */
+	/* background-color: #67060c; */
+	@apply text-rose-300 bg-rose-700;
+}

package/src/styles/tailwind.css

@@ -0,0 +1,16 @@
+/* Stylesheet: tailwind.css */
+
+/* 
+https://tailwindcss.com/docs/functions-and-directives
+
+IMPORTANT:
+Be sure to remove these directives from your global CSS stylesheet.
+
+Tailwind directives should only be included ONCE per project.
+These directives should preceed ALL Skeleton stylesheets.
+*/
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;

package/src/styles/typography.css

@@ -0,0 +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;
+	}
+}

package/src/styles/variants.css

@@ -0,0 +1,156 @@
+/* === Variants === */
+/* A canned set of reusabled variant styles. */
+
+@layer components {
+	/* Outline -- supports ringed and host variants */
+	.variant-outline-primary {
+		@apply ring-[1px] ring-primary-500 dark:ring-primary-500 ring-inset;
+	}
+	.variant-outline-secondary {
+		@apply ring-[1px] ring-secondary-500 dark:ring-secondary-500 ring-inset;
+	}
+	.variant-outline-tertiary {
+		@apply ring-[1px] ring-tertiary-500 dark:ring-tertiary-500 ring-inset;
+	}
+	.variant-outline-success {
+		@apply ring-[1px] ring-success-500 dark:ring-success-500 ring-inset;
+	}
+	.variant-outline-warning {
+		@apply ring-[1px] ring-warning-500 dark:ring-warning-500 ring-inset;
+	}
+	.variant-outline-error {
+		@apply ring-[1px] ring-error-500 dark:ring-error-500 ring-inset;
+	}
+	.variant-outline,
+	.variant-outline-surface {
+		@apply ring-[1px] ring-surface-500 dark:ring-surface-500 ring-inset;
+	}
+
+	/* ------------------------ */
+
+	/* Filled */
+	.variant-filled {
+		@apply bg-surface-900-50-token text-surface-50-900-token;
+	}
+	.variant-filled-primary {
+		@apply bg-primary-500 dark:bg-primary-500 text-on-primary-token dark:text-on-primary-token;
+	}
+	.variant-filled-secondary {
+		@apply bg-secondary-500 dark:bg-secondary-500 text-on-secondary-token dark:text-on-secondary-token;
+	}
+	.variant-filled-tertiary {
+		@apply bg-tertiary-500 dark:bg-tertiary-500 text-on-tertiary-token dark:text-on-tertiary-token;
+	}
+	.variant-filled-success {
+		@apply bg-success-500 dark:bg-success-500 text-on-success-token dark:text-on-success-token;
+	}
+	.variant-filled-warning {
+		@apply bg-warning-500 dark:bg-warning-500 text-on-warning-token dark:text-on-warning-token;
+	}
+	.variant-filled-error {
+		@apply bg-error-500 dark:bg-error-500 text-on-error-token dark:text-on-error-token;
+	}
+	.variant-filled-surface {
+		@apply bg-surface-400-500-token text-on-surface-token dark:text-on-surface-token;
+	}
+
+	/* Ringed */
+	.variant-ringed {
+		@apply bg-transparent dark:bg-transparent variant-outline;
+	}
+	.variant-ringed-primary {
+		@apply bg-transparent dark:bg-transparent variant-outline-primary;
+	}
+	.variant-ringed-secondary {
+		@apply bg-transparent dark:bg-transparent variant-outline-secondary;
+	}
+	.variant-ringed-tertiary {
+		@apply bg-transparent dark:bg-transparent variant-outline-tertiary;
+	}
+	.variant-ringed-success {
+		@apply bg-transparent dark:bg-transparent variant-outline-success;
+	}
+	.variant-ringed-warning {
+		@apply bg-transparent dark:bg-transparent variant-outline-warning;
+	}
+	.variant-ringed-error {
+		@apply bg-transparent dark:bg-transparent variant-outline-error;
+	}
+	.variant-ringed-surface {
+		@apply bg-transparent dark:bg-transparent variant-outline-surface;
+	}
+
+	/* Ghost */
+	.variant-ghost-primary {
+		@apply bg-primary-500/20 dark:bg-primary-500/20 variant-outline-primary;
+	}
+	.variant-ghost-secondary {
+		@apply bg-secondary-500/20 dark:bg-secondary-500/20 variant-outline-secondary;
+	}
+	.variant-ghost-tertiary {
+		@apply bg-tertiary-500/20 dark:bg-tertiary-500/20 variant-outline-tertiary;
+	}
+	.variant-ghost-success {
+		@apply bg-success-500/20 dark:bg-success-500/20 variant-outline-success;
+	}
+	.variant-ghost-warning {
+		@apply bg-warning-500/20 dark:bg-warning-500/20 variant-outline-warning;
+	}
+	.variant-ghost-error {
+		@apply bg-error-500/20 dark:bg-error-500/20 variant-outline-error;
+	}
+	.variant-ghost,
+	.variant-ghost-surface {
+		@apply bg-surface-500/20 dark:bg-surface-500/20 variant-outline-surface;
+	}
+
+	/* Soft */
+	.variant-soft-primary {
+		@apply bg-primary-400/20 dark:bg-primary-500/20 text-primary-700-200-token !ring-0;
+	}
+	.variant-soft-secondary {
+		@apply bg-secondary-400/20 dark:bg-secondary-500/20 text-secondary-700-200-token !ring-0;
+	}
+	.variant-soft-tertiary {
+		@apply bg-tertiary-400/20 dark:bg-tertiary-500/20 text-tertiary-700-200-token !ring-0;
+	}
+	.variant-soft-success {
+		@apply bg-success-400/20 dark:bg-success-500/20 text-success-700-200-token !ring-0;
+	}
+	.variant-soft-warning {
+		@apply bg-warning-400/20 dark:bg-warning-500/20 text-warning-700-200-token !ring-0;
+	}
+	.variant-soft-error {
+		@apply bg-error-400/20 dark:bg-error-500/20 text-error-700-200-token !ring-0;
+	}
+	.variant-soft,
+	.variant-soft-surface {
+		@apply bg-surface-400/20 dark:bg-surface-500/20 text-surface-700-200-token !ring-0;
+	}
+
+	/* Glass */
+	.variant-glass-primary {
+		@apply bg-primary-500/20 dark:bg-primary-500/20 backdrop-blur-lg;
+	}
+	.variant-glass-secondary {
+		@apply bg-secondary-500/20 dark:bg-secondary-500/20 backdrop-blur-lg;
+	}
+	.variant-glass-tertiary {
+		@apply bg-tertiary-500/20 dark:bg-tertiary-500/20 backdrop-blur-lg;
+	}
+	.variant-glass-success {
+		@apply bg-success-500/20 dark:bg-success-500/20 backdrop-blur-lg;
+	}
+	.variant-glass-warning {
+		@apply bg-warning-500/20 dark:bg-warning-500/20 backdrop-blur-lg;
+	}
+	.variant-glass-error {
+		@apply bg-error-500/20 dark:bg-error-500/20 backdrop-blur-lg;
+	}
+	.variant-glass-surface {
+		@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg;
+	}
+	.variant-glass {
+		@apply bg-surface-50/30 dark:bg-surface-900/30 backdrop-blur-lg;
+	}
+}

package/src/tailwind/core.cjs

@@ -0,0 +1,37 @@
+// The Vuetiful Tailwind Plugin
+// Tailwind Docs: https://tailwindcss.com/docs/plugins
+// Vuetiful Docs: https://www.vuetiful.dev/docs/get-started
+
+const plugin = require("tailwindcss/plugin");
+
+// Vuetiful Theme Modules
+const themeColors = require("./theme/colors.cjs");
+// Vuetiful Design Token Modules
+const tokensBackgrounds = require("./tokens/backgrounds.cjs");
+const tokensBorders = require("./tokens/borders.cjs");
+const tokensBorderRadius = require("./tokens/border-radius.cjs");
+const tokensFills = require("./tokens/fills.cjs");
+const tokensText = require("./tokens/text.cjs");
+const tokensRings = require("./tokens/rings.cjs");
+
+module.exports = plugin(
+  ({ addUtilities }) => {
+    addUtilities({
+      // Implement Vuetiful design token classes
+      ...tokensBackgrounds(),
+      ...tokensBorders(),
+      ...tokensBorderRadius(),
+      ...tokensFills(),
+      ...tokensText(),
+      ...tokensRings(),
+    });
+  },
+  {
+    theme: {
+      extend: {
+        // Implement Vuetiful theme colors
+        colors: themeColors(),
+      },
+    },
+  }
+);