@code-coaching/vuetiful 0.4.1 → 0.5.0

package/src/styles/elements/chips.css

@@ -1,22 +1,22 @@
 /* Tailwind Elements: chips.css */
 
 @layer components {
-	.chip {
-		@apply px-3 py-1.5 whitespace-nowrap cursor-pointer;
-		/* Text */
-		@apply text-xs text-center;
-		/* Rounded */
-		@apply rounded;
-		/* Flex Columns */
-		@apply inline-flex justify-center items-center space-x-2;
-		/* States */
-		@apply hover:brightness-[1.15];
-		/* Transitions */
-		@apply transition-all;
-	}
+  .chip {
+    @apply cursor-pointer whitespace-nowrap px-3 py-1.5;
+    /* Text */
+    @apply text-center text-xs;
+    /* Rounded */
+    @apply rounded;
+    /* Flex Columns */
+    @apply inline-flex items-center justify-center space-x-2;
+    /* States */
+    @apply hover:brightness-[1.15];
+    /* Transitions */
+    @apply transition-all;
+  }
 
-	.chip-disabled,
-	.chip:disabled {
-		@apply !opacity-50 !cursor-not-allowed active:scale-100;
-	}
+  .chip-disabled,
+  .chip:disabled {
+    @apply !cursor-not-allowed !opacity-50 active:scale-100;
+  }
 }

package/src/styles/elements/forms.css

@@ -1,268 +1,269 @@
 /* Stylesheet: forms.css */
 
 @layer base {
-	/* === Resets === */
+  /* === Resets === */
 
-	fieldset,
-	legend,
-	label {
-		@apply block;
-	}
+  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;
-	}
+  /* 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;
-	}
+  /* Date Calendar Picker (Webkit) */
+  ::-webkit-calendar-picker-indicator {
+    @apply dark:invert;
+  }
 
-	/* Progress Bar */
-	progress {
-		webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		@apply w-full h-2 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;
-	}
+  /* 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;
-	}
+  /* 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 === */
+  /* === Text Labeling === */
 
-	.legend {
-		@apply font-heading-token text-xl md:text-2xl;
-	}
+  .legend {
+    @apply text-xl font-heading-token md:text-2xl;
+  }
 
-	.label {
-		@apply space-y-1;
-	}
+  .label {
+    @apply space-y-1;
+  }
 
-	/* === Core Styles === */
+  /* === Core Styles === */
 
-	.input,
-	.textarea,
-	.select,
-	.input-group {
-		@apply w-full transition duration-200;
-		/* Background */
-		@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105;
-		/* Ring */
-		@apply !ring-0;
-		/* Border */
-		@apply border-token border-surface-400-500-token focus-within:border-primary-500;
-	}
+  .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;
-	}
+  /* Base Inputs */
+  .input,
+  .input-group {
+    @apply rounded-token;
+  }
 
-	/* Container Inputs */
-	.textarea,
-	.select {
-		@apply rounded-container-token;
-	}
+  /* Container Inputs */
+  .textarea,
+  .select {
+    @apply rounded-container-token;
+  }
 
-	/* Select (size/multiple) */
-	.select {
-		@apply p-2 pr-8 space-y-1;
-	}
-	.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 bg-surface-200-700-token px-4 py-2 rounded-token cursor-pointer;
-	}
-	.select option:checked {
-		/* https://stackoverflow.com/questions/50618602/change-color-of-selected-option-in-select-multiple */
-		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;
-	}
+  /* 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 */
+    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 w-5 h-5 !ring-0 rounded cursor-pointer;
-		/* Background */
-		@apply bg-surface-200-700-token focus:brightness-105 hover: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;
-	}
+  /* 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 === */
+  /* === Specialized === */
 
-	/* File Inputs */
-	.input[type='file'] {
-		@apply p-1;
-	}
+  /* 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 border-none w-10 h-10 overflow-hidden rounded-token cursor-pointer;
-		-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;
-	}
+  /* 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 === */
+  /* === States === */
 
-	.input:disabled,
-	.textarea:disabled,
-	.select:disabled {
-		@apply !opacity-50 !cursor-not-allowed hover:!brightness-100;
-	}
+  .input:disabled,
+  .textarea:disabled,
+  .select:disabled {
+    @apply !cursor-not-allowed !opacity-50 hover:!brightness-100;
+  }
 
-	.input[readonly],
-	.textarea[readonly],
-	.select[readonly] {
-		@apply !border-0 !cursor-not-allowed hover:!brightness-100;
-	}
+  .input[readonly],
+  .textarea[readonly],
+  .select[readonly] {
+    @apply !cursor-not-allowed !border-0 hover:!brightness-100;
+  }
 
-	/* === Input Groups === */
+  /* === Input Groups === */
 
-	.input-group {
-		@apply grid overflow-hidden;
-	}
-	.input-group input,
-	.input-group select {
-		@apply border-0 ring-0 bg-transparent;
-	}
-	.input-group select option {
-		@apply bg-surface-200-700-token;
-	}
-	.input-group div,
-	.input-group a,
-	.input-group button {
-		@apply px-4 flex justify-between items-center;
-	}
-	.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;
-	}
+  .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 === */
+  /* === Variants === */
 
-	/* success */
-	.input-success {
-		@apply !bg-success-200 !border-success-500 !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;
-	}
+  /* 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 !bg-warning-200 !border-warning-500 !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;
-	}
+  /* 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 !bg-error-200 !border-error-500 !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;
-	}
+  /* 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 === */
+  /* === Variants === */
 
-	/* Material */
-	.variant-form-material {
-		/* Border Radius */
-		@apply !rounded-tl !rounded-tr !rounded-bl-none !rounded-br-none;
-		/* 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;
-	}
+  /* Material */
+  .variant-form-material {
+    /* Border Radius */
+    @apply !rounded-tl !rounded-tr !rounded-bl-none !rounded-br-none;
+    /* 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 +1,48 @@
 /* Tailwind Elements: button.css */
 
 @layer components {
-	/* === Lists (Parents) === */
+  /* === Lists (Parents) === */
 
-	.list,
-	.list-dl,
-	.list-nav ul {
-		/* List Style */
-		@apply list-none;
-		/* Spacing */
-		@apply space-y-1;
-	}
+  .list,
+  .list-dl,
+  .list-nav ul {
+    /* List Style */
+    @apply list-none;
+    /* Spacing */
+    @apply space-y-1;
+  }
 
-	/* === List Items (Children) === */
+  /* === 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 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-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;
-	}
+  .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;
+  }
 }