@code-coaching/vuetiful 0.26.0 → 0.27.0

package/src/styles/highlight-js.css

@@ -1,116 +0,0 @@
-/* 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 bg-green-700 text-lime-300;
-}
-
-/* Pink / Red */
-.hljs-deletion {
-  /* color: #ffdcd7; */
-  /* background-color: #67060c; */
-  @apply bg-rose-700 text-rose-300;
-}

package/src/styles/tailwind.css

@@ -1,16 +0,0 @@
-/* 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/transitions.css

@@ -1,2 +0,0 @@
-@import 'transitions/fade.css';
-@import 'transitions/slide.css';

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(),
-      },
-    },
-  }
-);