@mt-gloss/styles 0.0.3

package/src/lib/components/_animations.scss

@@ -0,0 +1,314 @@
+// ============================================
+// ANIMATIONS: CSS Keyframes & Utility Classes
+// ============================================
+
+@use '../tokens' as *;
+
+// --- DURATION VARIABLES ---
+$duration-instant: 0ms;
+$duration-fast: 100ms;
+$duration-normal: 200ms;
+$duration-slow: 300ms;
+$duration-slower: 400ms;
+
+// --- EASING VARIABLES ---
+$easing-linear: linear;
+$easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+$easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+$easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+$easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+// --- KEYFRAMES ---
+
+// Fade
+@keyframes gloss-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes gloss-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+// Fade + Scale
+@keyframes gloss-fade-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes gloss-fade-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+// Slide Up
+@keyframes gloss-slide-up-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes gloss-slide-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+// Slide Down
+@keyframes gloss-slide-down-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes gloss-slide-down-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+// Slide Left
+@keyframes gloss-slide-left-in {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes gloss-slide-left-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+}
+
+// Slide Right
+@keyframes gloss-slide-right-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes gloss-slide-right-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+}
+
+// Zoom
+@keyframes gloss-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes gloss-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
+// Spin (for loaders)
+@keyframes gloss-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Pulse
+@keyframes gloss-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+// Bounce
+@keyframes gloss-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+// Shake (for errors)
+@keyframes gloss-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+// --- ANIMATION CLASSES ---
+
+// Fade
+.gloss-animate-fade-in {
+  animation: gloss-fade-in $duration-normal $easing-ease-out forwards;
+}
+
+.gloss-animate-fade-out {
+  animation: gloss-fade-out $duration-normal $easing-ease-out forwards;
+}
+
+// Fade + Scale
+.gloss-animate-fade-scale-in {
+  animation: gloss-fade-scale-in $duration-fast $easing-ease-out forwards;
+}
+
+.gloss-animate-fade-scale-out {
+  animation: gloss-fade-scale-out $duration-fast $easing-ease-out forwards;
+}
+
+// Slide Up
+.gloss-animate-slide-up-in {
+  animation: gloss-slide-up-in $duration-normal $easing-ease-out forwards;
+}
+
+.gloss-animate-slide-up-out {
+  animation: gloss-slide-up-out $duration-normal $easing-ease-out forwards;
+}
+
+// Slide Down
+.gloss-animate-slide-down-in {
+  animation: gloss-slide-down-in $duration-normal $easing-ease-out forwards;
+}
+
+.gloss-animate-slide-down-out {
+  animation: gloss-slide-down-out $duration-normal $easing-ease-out forwards;
+}
+
+// Spin
+.gloss-animate-spin {
+  animation: gloss-spin 1s linear infinite;
+}
+
+// Pulse
+.gloss-animate-pulse {
+  animation: gloss-pulse 2s $easing-ease-in-out infinite;
+}
+
+// Bounce
+.gloss-animate-bounce {
+  animation: gloss-bounce 1s $easing-ease-in-out infinite;
+}
+
+// Shake
+.gloss-animate-shake {
+  animation: gloss-shake 0.4s $easing-ease-in-out;
+}
+
+// --- TRANSITION UTILITIES ---
+
+.gloss-transition-none {
+  transition: none !important;
+}
+
+.gloss-transition-all {
+  transition: all $duration-normal $easing-ease-out;
+}
+
+.gloss-transition-colors {
+  transition: color $duration-normal $easing-ease-out,
+              background-color $duration-normal $easing-ease-out,
+              border-color $duration-normal $easing-ease-out;
+}
+
+.gloss-transition-opacity {
+  transition: opacity $duration-normal $easing-ease-out;
+}
+
+.gloss-transition-transform {
+  transition: transform $duration-normal $easing-ease-out;
+}
+
+// --- REDUCED MOTION ---
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/lib/components/_async.scss

@@ -0,0 +1,75 @@
+// ============================================
+// COMPONENT: ASYNC / LOADING
+// ============================================
+
+@use '../tokens' as *;
+@use '../mixins' as *;
+
+.gloss-async {
+  position: relative;
+
+  &.gloss-async--loading .gloss-input {
+    border-color: transparent;
+  }
+
+  &.gloss-async--loading .gloss-async__container {
+    opacity: 1;
+  }
+}
+
+.gloss-async__container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.gloss-async__rect,
+.gloss-async__chaser {
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: none;
+  stroke-width: 2px;
+  width: 100%;
+  height: 100%;
+  rx: 10px;
+}
+
+.gloss-async__rect {
+  stroke: $color-blue-100;
+}
+
+.gloss-async__chaser {
+  stroke: $color-blue-500;
+  stroke-dasharray: 100 300;
+  stroke-dashoffset: 0;
+  animation: dash-rotate 2s linear infinite;
+}
+
+// --- ASYNC COLOR VARIANTS ---
+.gloss-async--green {
+  .gloss-async__rect {
+    stroke: $color-green-100;
+  }
+
+  .gloss-async__chaser {
+    stroke: $color-green-500;
+  }
+}
+
+// --- SPINNER (INLINE) ---
+.gloss-spinner-inline {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  margin-right: $space-1;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spinner 0.8s linear infinite;
+}

package/src/lib/components/_badge.scss

@@ -0,0 +1,135 @@
+// ============================================
+// COMPONENT: BADGE
+// ============================================
+
+@use '../tokens' as *;
+
+// --- BASE BADGE ---
+.gloss-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: $radius-full;
+  vertical-align: middle;
+}
+
+// --- SIZES ---
+.gloss-badge--sm {
+  font-size: 0.625rem;
+  padding: 2px 6px;
+  min-height: 16px;
+}
+
+.gloss-badge--md {
+  font-size: $text-xs;
+  padding: 3px 8px;
+  min-height: 20px;
+}
+
+.gloss-badge--lg {
+  font-size: $text-sm;
+  padding: 4px 10px;
+  min-height: 24px;
+}
+
+// --- DOT VARIANT ---
+.gloss-badge--dot {
+  padding: 0;
+  min-width: 8px;
+  min-height: 8px;
+  width: 8px;
+  height: 8px;
+
+  &.gloss-badge--sm {
+    width: 6px;
+    height: 6px;
+    min-width: 6px;
+    min-height: 6px;
+  }
+
+  &.gloss-badge--lg {
+    width: 10px;
+    height: 10px;
+    min-width: 10px;
+    min-height: 10px;
+  }
+}
+
+// --- COLOR VARIANTS (solid) ---
+.gloss-badge--default {
+  background: $color-gray-100;
+  color: $alias-text-secondary;
+  border: 1px solid $alias-border-default;
+}
+
+.gloss-badge--primary {
+  background: $alias-primary;
+  color: $color-white;
+  border: 1px solid $alias-primary;
+}
+
+.gloss-badge--success {
+  background: $color-green-600;
+  color: $color-white;
+  border: 1px solid $color-green-600;
+}
+
+.gloss-badge--warning {
+  background: $color-amber-500;
+  color: $color-white;
+  border: 1px solid $color-amber-500;
+}
+
+.gloss-badge--error {
+  background: $color-red-600;
+  color: $color-white;
+  border: 1px solid $color-red-600;
+}
+
+.gloss-badge--info {
+  background: $color-blue-500;
+  color: $color-white;
+  border: 1px solid $color-blue-500;
+}
+
+// --- SOFT VARIANTS ---
+.gloss-badge--soft {
+  &.gloss-badge--default {
+    background: $color-gray-100;
+    color: $alias-text-secondary;
+    border-color: $color-gray-200;
+  }
+
+  &.gloss-badge--primary {
+    background: $color-blue-50;
+    color: $color-blue-700;
+    border-color: $color-blue-200;
+  }
+
+  &.gloss-badge--success {
+    background: $color-green-50;
+    color: $color-green-700;
+    border-color: $color-green-200;
+  }
+
+  &.gloss-badge--warning {
+    background: $color-amber-100;
+    color: $color-amber-600;
+    border-color: $color-amber-200;
+  }
+
+  &.gloss-badge--error {
+    background: $color-red-50;
+    color: $color-red-700;
+    border-color: $color-red-200;
+  }
+
+  &.gloss-badge--info {
+    background: $color-blue-50;
+    color: $color-blue-700;
+    border-color: $color-blue-200;
+  }
+}