@code-coaching/vuetiful 0.4.0 → 0.5.0

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

package/src/styles/variants.css

@@ -2,155 +2,155 @@
 /* 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;
-	}
+  /* Outline -- supports ringed and host variants */
+  .variant-outline-primary {
+    @apply ring-[1px] ring-inset ring-primary-500 dark:ring-primary-500;
+  }
+  .variant-outline-secondary {
+    @apply ring-[1px] ring-inset ring-secondary-500 dark:ring-secondary-500;
+  }
+  .variant-outline-tertiary {
+    @apply ring-[1px] ring-inset ring-tertiary-500 dark:ring-tertiary-500;
+  }
+  .variant-outline-success {
+    @apply ring-[1px] ring-inset ring-success-500 dark:ring-success-500;
+  }
+  .variant-outline-warning {
+    @apply ring-[1px] ring-inset ring-warning-500 dark:ring-warning-500;
+  }
+  .variant-outline-error {
+    @apply ring-[1px] ring-inset ring-error-500 dark:ring-error-500;
+  }
+  .variant-outline,
+  .variant-outline-surface {
+    @apply ring-[1px] ring-inset ring-surface-500 dark:ring-surface-500;
+  }
 
-	/* ------------------------ */
+  /* ------------------------ */
 
-	/* 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;
-	}
+  /* Filled */
+  .variant-filled {
+    @apply bg-surface-900-50-token text-surface-50-900-token;
+  }
+  .variant-filled-primary {
+    @apply bg-primary-500 text-on-primary-token dark:bg-primary-500 dark:text-on-primary-token;
+  }
+  .variant-filled-secondary {
+    @apply bg-secondary-500 text-on-secondary-token dark:bg-secondary-500 dark:text-on-secondary-token;
+  }
+  .variant-filled-tertiary {
+    @apply bg-tertiary-500 text-on-tertiary-token dark:bg-tertiary-500 dark:text-on-tertiary-token;
+  }
+  .variant-filled-success {
+    @apply bg-success-500 text-on-success-token dark:bg-success-500 dark:text-on-success-token;
+  }
+  .variant-filled-warning {
+    @apply bg-warning-500 text-on-warning-token dark:bg-warning-500 dark:text-on-warning-token;
+  }
+  .variant-filled-error {
+    @apply bg-error-500 text-on-error-token dark:bg-error-500 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;
-	}
+  /* Ringed */
+  .variant-ringed {
+    @apply variant-outline bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-primary {
+    @apply variant-outline-primary bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-secondary {
+    @apply variant-outline-secondary bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-tertiary {
+    @apply variant-outline-tertiary bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-success {
+    @apply variant-outline-success bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-warning {
+    @apply variant-outline-warning bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-error {
+    @apply variant-outline-error bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-surface {
+    @apply variant-outline-surface bg-transparent dark:bg-transparent;
+  }
 
-	/* 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;
-	}
+  /* Ghost */
+  .variant-ghost-primary {
+    @apply variant-outline-primary bg-primary-500/20 dark:bg-primary-500/20;
+  }
+  .variant-ghost-secondary {
+    @apply variant-outline-secondary bg-secondary-500/20 dark:bg-secondary-500/20;
+  }
+  .variant-ghost-tertiary {
+    @apply variant-outline-tertiary bg-tertiary-500/20 dark:bg-tertiary-500/20;
+  }
+  .variant-ghost-success {
+    @apply variant-outline-success bg-success-500/20 dark:bg-success-500/20;
+  }
+  .variant-ghost-warning {
+    @apply variant-outline-warning bg-warning-500/20 dark:bg-warning-500/20;
+  }
+  .variant-ghost-error {
+    @apply variant-outline-error bg-error-500/20 dark:bg-error-500/20;
+  }
+  .variant-ghost,
+  .variant-ghost-surface {
+    @apply variant-outline-surface bg-surface-500/20 dark:bg-surface-500/20;
+  }
 
-	/* 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;
-	}
+  /* Soft */
+  .variant-soft-primary {
+    @apply bg-primary-400/20 !ring-0 text-primary-700-200-token dark:bg-primary-500/20;
+  }
+  .variant-soft-secondary {
+    @apply bg-secondary-400/20 !ring-0 text-secondary-700-200-token dark:bg-secondary-500/20;
+  }
+  .variant-soft-tertiary {
+    @apply bg-tertiary-400/20 !ring-0 text-tertiary-700-200-token dark:bg-tertiary-500/20;
+  }
+  .variant-soft-success {
+    @apply bg-success-400/20 !ring-0 text-success-700-200-token dark:bg-success-500/20;
+  }
+  .variant-soft-warning {
+    @apply bg-warning-400/20 !ring-0 text-warning-700-200-token dark:bg-warning-500/20;
+  }
+  .variant-soft-error {
+    @apply bg-error-400/20 !ring-0 text-error-700-200-token dark:bg-error-500/20;
+  }
+  .variant-soft,
+  .variant-soft-surface {
+    @apply bg-surface-400/20 !ring-0 text-surface-700-200-token dark:bg-surface-500/20;
+  }
 
-	/* 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;
-	}
+  /* Glass */
+  .variant-glass-primary {
+    @apply bg-primary-500/20 backdrop-blur-lg dark:bg-primary-500/20;
+  }
+  .variant-glass-secondary {
+    @apply bg-secondary-500/20 backdrop-blur-lg dark:bg-secondary-500/20;
+  }
+  .variant-glass-tertiary {
+    @apply bg-tertiary-500/20 backdrop-blur-lg dark:bg-tertiary-500/20;
+  }
+  .variant-glass-success {
+    @apply bg-success-500/20 backdrop-blur-lg dark:bg-success-500/20;
+  }
+  .variant-glass-warning {
+    @apply bg-warning-500/20 backdrop-blur-lg dark:bg-warning-500/20;
+  }
+  .variant-glass-error {
+    @apply bg-error-500/20 backdrop-blur-lg dark:bg-error-500/20;
+  }
+  .variant-glass-surface {
+    @apply bg-surface-500/20 backdrop-blur-lg dark:bg-surface-500/20;
+  }
+  .variant-glass {
+    @apply bg-surface-50/30 backdrop-blur-lg dark:bg-surface-900/30;
+  }
 }