@code-coaching/vuetiful 0.25.0 → 0.27.0

package/src/styles/typography.css

@@ -1,101 +0,0 @@
-/* Stylesheet: typography.css */
-
-@layer base {
-  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 px-1 py-0.5;
-  }
-
-  /* === 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

@@ -1,156 +0,0 @@
-/* === Variants === */
-/* A canned set of reusabled variant styles. */
-
-@layer components {
-  /* 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 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 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 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 !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 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;
-  }
-}

package/src/tailwind/core.cjs

@@ -1,37 +0,0 @@
-// 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(),
-      },
-    },
-  }
-);