@code-coaching/vuetiful 0.25.0 → 0.27.0

package/src/styles/elements/forms.css

@@ -1,269 +0,0 @@
-/* Stylesheet: forms.css */
-
-@layer base {
-  /* === Resets === */
-
-  fieldset,
-  legend,
-  label {
-    @apply block;
-  }
-
-  /* Placeholders */
-  ::-moz-placeholder {
-    @apply text-surface-500-400-token;
-  }
-  :-ms-input-placeholder {
-    @apply text-surface-500-400-token;
-  }
-  ::placeholder {
-    @apply text-surface-500-400-token;
-  }
-
-  /* Date Calendar Picker (Webkit) */
-  ::-webkit-calendar-picker-indicator {
-    @apply dark:invert;
-  }
-
-  /* Progress Bar */
-  progress {
-    webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    @apply h-2 w-full overflow-hidden rounded-token;
-    @apply bg-surface-400-500-token;
-  }
-  progress::-webkit-progress-bar {
-    @apply bg-surface-400-500-token;
-  }
-  progress::-webkit-progress-value {
-    @apply bg-surface-900-50-token;
-  }
-  ::-moz-progress-bar {
-    @apply bg-surface-900-50-token;
-  }
-  :indeterminate::-moz-progress-bar {
-    width: 0;
-  }
-
-  /* Range Input */
-  /* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
-  [type='range'] {
-    @apply w-full accent-surface-900 dark:accent-surface-50;
-  }
-
-  /* === Text Labeling === */
-
-  .legend {
-    @apply text-xl font-heading-token md:text-2xl;
-  }
-
-  .label {
-    @apply space-y-1;
-  }
-
-  /* === Core Styles === */
-
-  .input,
-  .textarea,
-  .select,
-  .input-group {
-    @apply w-full transition duration-200;
-    /* Background */
-    @apply bg-surface-200-700-token hover:brightness-105 focus:brightness-105;
-    /* Ring */
-    @apply !ring-0;
-    /* Border */
-    @apply border-token border-surface-400-500-token focus-within:border-primary-500;
-  }
-
-  /* Base Inputs */
-  .input,
-  .input-group {
-    @apply rounded-token;
-  }
-
-  /* Container Inputs */
-  .textarea,
-  .select {
-    @apply rounded-container-token;
-  }
-
-  /* Select (size/multiple) */
-  .select {
-    @apply space-y-1 p-2 pr-8;
-  }
-  .select[size] {
-    @apply bg-none;
-  }
-  .select optgroup {
-    @apply space-y-1 font-bold;
-  }
-  .select optgroup option {
-    @apply ml-0 pl-0;
-  }
-  .select optgroup option:first-of-type {
-    @apply mt-3;
-  }
-  .select optgroup option:last-child {
-    @apply !mb-3;
-  }
-  .select option {
-    @apply cursor-pointer px-4 py-2 bg-surface-200-700-token rounded-token;
-  }
-  .select option:checked {
-    /* https://stackoverflow.com/questions/50618602/change-color-of-selected-option-in-select-multiple */
-    /* prettier-ignore */
-    background: rgb(var(--color-primary-500)) linear-gradient(0deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) 100%);
-    @apply text-on-primary-token;
-  }
-
-  /* Checkbox & Radio */
-  .checkbox,
-  .radio {
-    @apply h-5 w-5 cursor-pointer rounded !ring-0;
-    /* Background */
-    @apply bg-surface-200-700-token hover:brightness-105 focus:brightness-105;
-    /* Border */
-    @apply border-token border-surface-400-500-token focus:border-primary-500;
-  }
-  .checkbox:checked,
-  .radio:checked {
-    @apply bg-primary-500 hover:bg-primary-500 focus:bg-primary-500 focus:ring-0;
-  }
-  .radio {
-    @apply rounded-token;
-  }
-
-  /* === Specialized === */
-
-  /* File Inputs */
-  .input[type='file'] {
-    @apply p-1;
-  }
-
-  /* Color Picker */
-  /* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
-  .input[type='color'] {
-    @apply h-10 w-10 cursor-pointer overflow-hidden border-none rounded-token;
-    -webkit-appearance: none; /* WebKit Only */
-  }
-  .input[type='color']::-webkit-color-swatch-wrapper {
-    @apply p-0;
-  }
-  .input[type='color']::-webkit-color-swatch {
-    @apply border-none hover:brightness-110;
-  }
-  .input[type='color']::-moz-color-swatch {
-    @apply border-none;
-  }
-
-  /* === States === */
-
-  .input:disabled,
-  .textarea:disabled,
-  .select:disabled {
-    @apply !cursor-not-allowed !opacity-50 hover:!brightness-100;
-  }
-
-  .input[readonly],
-  .textarea[readonly],
-  .select[readonly] {
-    @apply !cursor-not-allowed !border-0 hover:!brightness-100;
-  }
-
-  /* === Input Groups === */
-
-  .input-group {
-    @apply grid overflow-hidden;
-  }
-  .input-group input,
-  .input-group select {
-    @apply border-0 bg-transparent ring-0;
-  }
-  .input-group select option {
-    @apply bg-surface-200-700-token;
-  }
-  .input-group div,
-  .input-group a,
-  .input-group button {
-    @apply flex items-center justify-between px-4;
-  }
-  .input-group-divider input,
-  .input-group-divider select,
-  .input-group-divider div,
-  .input-group-divider a {
-    @apply border-l border-surface-400-500-token focus:border-surface-400-500-token;
-    /* Disable Ring */
-    @apply !ring-0;
-    /* Prevent buttons from being squished */
-    @apply !min-w-fit;
-  }
-  .input-group-divider *:first-child {
-    @apply !border-l-0;
-  }
-  .input-group-shim {
-    @apply bg-surface-400/10 text-surface-600-300-token;
-  }
-
-  /* === Variants === */
-
-  /* success */
-  .input-success {
-    @apply !border-success-500 !bg-success-200 !text-success-700;
-  }
-  .input-success::-moz-placeholder {
-    @apply text-success-700;
-  }
-  .input-success:-ms-input-placeholder {
-    @apply text-success-700;
-  }
-  .input-success::placeholder {
-    @apply text-success-700;
-  }
-
-  /* warning */
-  .input-warning {
-    @apply !border-warning-500 !bg-warning-200 !text-warning-700;
-  }
-  .input-warning::-moz-placeholder {
-    @apply text-warning-700;
-  }
-  .input-warning:-ms-input-placeholder {
-    @apply text-warning-700;
-  }
-  .input-warning::placeholder {
-    @apply text-warning-700;
-  }
-
-  /* error */
-  .input-error {
-    @apply !border-error-500 !bg-error-200 !text-error-500;
-  }
-  .input-error::-moz-placeholder {
-    @apply text-error-500;
-  }
-  .input-error:-ms-input-placeholder {
-    @apply text-error-500;
-  }
-  .input-error::placeholder {
-    @apply text-error-500;
-  }
-
-  /* === Variants === */
-
-  /* Material */
-  .variant-form-material {
-    /* Border Radius */
-    @apply !rounded-bl-none !rounded-br-none !rounded-tl !rounded-tr;
-    /* Background */
-    @apply bg-surface-500/10 dark:bg-surface-500/20;
-    /* Border */
-    @apply border-0 border-b-2;
-    /* Blur */
-    @apply backdrop-blur;
-  }
-  .variant-form-material[type='file'] {
-    @apply !py-1.5;
-  }
-}

package/src/styles/elements/lists.css

@@ -1,48 +0,0 @@
-/* Tailwind Elements: button.css */
-
-@layer components {
-  /* === Lists (Parents) === */
-
-  .list,
-  .list-dl,
-  .list-nav ul {
-    /* List Style */
-    @apply list-none;
-    /* Spacing */
-    @apply space-y-1;
-  }
-
-  /* === 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-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;
-  }
-}

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

@@ -1,29 +0,0 @@
-/* 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 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 === */
-
-  a.logo-item {
-    @apply hover:brightness-110;
-  }
-}

package/src/styles/elements/modals.css

@@ -1,15 +0,0 @@
-/* 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

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

package/src/styles/elements/popups.css

@@ -1,16 +0,0 @@
-/* Tailwind Elements: popups.css */
-
-/* === Popup === */
-
-[data-popup] {
-  /* https://floating-ui.com/docs/computeposition#usage */
-  @apply absolute left-0 top-0; /* max-w-max */
-  /* Set hidden on page load */
-  @apply hidden;
-  /* Transitions */
-  @apply transition-opacity duration-200;
-}
-
-[data-popup] .arrow {
-  @apply absolute h-2 w-2 rotate-45;
-}

package/src/styles/elements/tables.css

@@ -1,102 +0,0 @@
-/* Elements: tables.css */
-
-@layer components {
-  .table-container {
-    @apply w-full overflow-x-auto 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 ==== */
-
-  .table-hover tbody tr {
-    @apply hover:bg-surface-500/20 even:hover:bg-surface-500/20;
-  }
-
-  .table-interactive tbody tr {
-    @apply cursor-pointer hover:bg-primary-hover-token even:hover:bg-primary-hover-token;
-  }
-
-  /* === Sort Styles ==== */
-
-  [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-dsc {
-    @apply after:opacity-50 after:!content-['↑'];
-  }
-
-  /* === Table Head === */
-
-  .table thead {
-    @apply border-b border-surface-500/20 bg-surface-200-700-token;
-  }
-
-  .table thead tr {
-    @apply text-left capitalize;
-  }
-
-  .table thead th {
-    @apply p-4 font-bold;
-  }
-
-  /* === 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 whitespace-nowrap px-3 py-4 align-top text-sm 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 text-left capitalize;
-  }
-
-  .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

@@ -1,19 +0,0 @@
-/* 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

@@ -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';