@mt-gloss/styles 0.0.3

package/src/lib/components/_specialized.scss

@@ -0,0 +1,590 @@
+// ============================================
+// COMPONENT: SPECIALIZED (FileUpload, ColorPicker, Rating)
+// ============================================
+
+@use '../tokens' as *;
+@use '../mixins' as *;
+
+// --- FILE UPLOAD ---
+.gloss-file-upload-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}
+
+.gloss-file-upload__label {
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $alias-text-primary;
+}
+
+.gloss-file-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.gloss-file-upload--dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $space-8 $space-6;
+  background: $color-gray-50;
+  border: 2px dashed $alias-border-default;
+  border-radius: $radius-lg;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+
+  &:hover:not(.gloss-file-upload--disabled) {
+    border-color: $alias-primary;
+    background: $color-blue-50;
+  }
+
+  &.gloss-file-upload--drag-over {
+    border-color: $alias-primary;
+    background: $color-blue-50;
+  }
+
+  &.gloss-file-upload--error {
+    border-color: $alias-border-error;
+  }
+
+  .gloss-file-upload__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $space-3;
+    text-align: center;
+
+    svg {
+      color: $alias-text-secondary;
+    }
+  }
+
+  .gloss-file-upload__text {
+    font-size: $text-sm;
+    color: $alias-text-secondary;
+  }
+
+  .gloss-file-upload__accept {
+    font-size: $text-xs;
+    color: $alias-text-tertiary;
+  }
+}
+
+.gloss-file-upload--button {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-2;
+  padding: $space-2 $space-4;
+  background: $alias-bg-surface;
+  border: 1px solid $alias-border-default;
+  border-radius: $radius-md;
+  font-family: $font-body;
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $alias-text-primary;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  @include shadow-input-default;
+
+  &:hover:not(:disabled) {
+    border-color: $alias-border-hover;
+    @include shadow-elevation-hover;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.gloss-file-upload--compact {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-2;
+  padding: $space-2 $space-3;
+  background: transparent;
+  border: none;
+  font-size: $text-sm;
+  color: $alias-primary;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  .gloss-file-upload__compact-text {
+    font-weight: 500;
+  }
+}
+
+.gloss-file-upload__files {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+  margin-top: $space-3;
+}
+
+.gloss-file-upload__file {
+  display: flex;
+  align-items: center;
+  gap: $space-3;
+  padding: $space-3;
+  background: $alias-bg-surface;
+  border: 1px solid $alias-border-default;
+  border-radius: $radius-md;
+
+  &--error {
+    border-color: $alias-border-error;
+    background: $alias-bg-error;
+  }
+}
+
+.gloss-file-upload__preview {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: $radius-sm;
+}
+
+.gloss-file-upload__file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  background: $color-gray-100;
+  border-radius: $radius-sm;
+  color: $alias-text-secondary;
+}
+
+.gloss-file-upload__file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.gloss-file-upload__file-name {
+  display: block;
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $alias-text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gloss-file-upload__file-size {
+  font-size: $text-xs;
+  color: $alias-text-secondary;
+}
+
+.gloss-file-upload__file-error {
+  display: block;
+  font-size: $text-xs;
+  color: $alias-text-error;
+}
+
+.gloss-file-upload__progress {
+  width: 100%;
+  height: 4px;
+  background: $color-gray-200;
+  border-radius: $radius-full;
+  overflow: hidden;
+  margin-top: $space-2;
+}
+
+.gloss-file-upload__progress-bar {
+  height: 100%;
+  background: $alias-primary;
+  transition: width 0.3s ease;
+}
+
+.gloss-file-upload__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: $radius-sm;
+  color: $alias-text-secondary;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: $color-gray-100;
+    color: $alias-text-primary;
+  }
+}
+
+.gloss-file-upload__helper {
+  display: flex;
+  align-items: center;
+  gap: $space-1;
+  font-size: $text-sm;
+  color: $alias-text-secondary;
+
+  &--error {
+    color: $alias-text-error;
+
+    svg {
+      color: $color-red-500;
+    }
+  }
+}
+
+// --- COLOR PICKER ---
+.gloss-color-picker-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}
+
+.gloss-color-picker__label {
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $alias-text-primary;
+}
+
+.gloss-color-picker {
+  position: relative;
+}
+
+.gloss-color-picker__trigger {
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+  width: 100%;
+  padding: $space-2 $space-3;
+  background: $color-white;
+  border: 1px solid $alias-border-default;
+  border-radius: $radius-md;
+  font-family: $font-body;
+  font-size: $text-sm;
+  color: $alias-text-primary;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  @include shadow-input-default;
+
+  &:hover:not(:disabled) {
+    border-color: $alias-border-hover;
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: $alias-border-focus;
+    @include shadow-input-focus;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  svg:last-child {
+    margin-left: auto;
+    color: $alias-text-secondary;
+  }
+}
+
+.gloss-color-picker__swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: $radius-sm;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+
+  &--large {
+    width: 40px;
+    height: 40px;
+    border-radius: $radius-md;
+    cursor: pointer;
+  }
+}
+
+.gloss-color-picker__value {
+  font-family: $font-mono;
+  font-size: $text-sm;
+}
+
+.gloss-color-picker__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: $space-1;
+  padding: $space-3;
+  background: $alias-bg-surface;
+  border: 1px solid $alias-border-default;
+  border-radius: $radius-lg;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  z-index: 100;
+  min-width: 240px;
+}
+
+.gloss-color-picker__content {
+  display: flex;
+  flex-direction: column;
+  gap: $space-3;
+}
+
+.gloss-color-picker__native-wrapper {
+  display: flex;
+  align-items: center;
+  gap: $space-3;
+}
+
+.gloss-color-picker__native {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: $radius-md;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: $radius-md;
+  }
+
+  &--hidden {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+}
+
+.gloss-color-picker__native-label {
+  font-size: $text-sm;
+  color: $alias-text-secondary;
+}
+
+.gloss-color-picker__presets {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: $space-1;
+}
+
+.gloss-color-picker__preset {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: transform 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &--selected {
+    border-color: $color-gray-800;
+  }
+}
+
+.gloss-color-picker__input-wrapper {
+  display: flex;
+}
+
+.gloss-color-picker__text-input {
+  width: 100%;
+  padding: $space-2 $space-3;
+  background: $color-white;
+  border: 1px solid $alias-border-default;
+  border-radius: $radius-md;
+  font-family: $font-mono;
+  font-size: $text-sm;
+  color: $alias-text-primary;
+
+  &:focus {
+    outline: none;
+    border-color: $alias-border-focus;
+  }
+}
+
+.gloss-color-picker__inline {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+}
+
+.gloss-color-picker__helper {
+  display: flex;
+  align-items: center;
+  gap: $space-1;
+  font-size: $text-sm;
+  color: $alias-text-secondary;
+
+  &--error {
+    color: $alias-text-error;
+
+    svg {
+      color: $color-red-500;
+    }
+  }
+}
+
+// --- RATING ---
+.gloss-rating-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}
+
+.gloss-rating__label {
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $alias-text-primary;
+}
+
+.gloss-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-2;
+}
+
+.gloss-rating__stars {
+  display: flex;
+  gap: $space-1;
+}
+
+.gloss-rating__star {
+  position: relative;
+  display: inline-flex;
+  color: $color-gray-300;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+
+  &:hover:not(.gloss-rating--readonly &) {
+    transform: scale(1.1);
+  }
+
+  &--filled,
+  &--half {
+    color: inherit;
+  }
+
+  svg {
+    fill: currentColor;
+  }
+}
+
+.gloss-rating__half,
+.gloss-rating__full-zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.gloss-rating__half--left {
+  left: 0;
+  width: 50%;
+}
+
+.gloss-rating__half--right {
+  right: 0;
+  width: 50%;
+}
+
+.gloss-rating__full-zone {
+  left: 0;
+  right: 0;
+}
+
+.gloss-rating__half-star {
+  position: relative;
+}
+
+.gloss-rating__half-filled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  overflow: hidden;
+}
+
+.gloss-rating__half-empty {
+  color: $color-gray-300;
+}
+
+.gloss-rating__value {
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $alias-text-secondary;
+  font-feature-settings: 'tnum';
+}
+
+.gloss-rating--readonly {
+  .gloss-rating__star {
+    cursor: default;
+
+    &:hover {
+      transform: none;
+    }
+  }
+}
+
+// Size variants
+.gloss-rating--sm {
+  .gloss-rating__stars {
+    gap: 2px;
+  }
+
+  .gloss-rating__value {
+    font-size: $text-xs;
+  }
+}
+
+.gloss-rating--lg {
+  .gloss-rating__stars {
+    gap: $space-2;
+  }
+
+  .gloss-rating__value {
+    font-size: $text-base;
+  }
+}
+
+.gloss-rating__helper {
+  display: flex;
+  align-items: center;
+  gap: $space-1;
+  font-size: $text-sm;
+  color: $alias-text-secondary;
+
+  &--error {
+    color: $alias-text-error;
+
+    svg {
+      color: $color-red-500;
+    }
+  }
+}

package/src/lib/components/_textarea.scss

@@ -0,0 +1,89 @@
+// ============================================
+// COMPONENT: TEXTAREA
+// ============================================
+
+@use '../tokens' as *;
+@use '../mixins' as *;
+
+.gloss-textarea {
+  width: 100%;
+  font-family: $font-body;
+  font-size: $text-base;
+  font-weight: 500;
+  color: $alias-text-primary;
+  background: $color-white;
+  border: 1px solid $alias-border-default;
+  border-radius: $radius-md;
+  padding: $space-3 $space-4;
+  @include shadow-input-default;
+  outline: none;
+  @include input-transition-default;
+  min-height: 100px;
+  line-height: 1.5;
+
+  &::placeholder {
+    color: $alias-text-tertiary;
+    font-weight: 400;
+  }
+
+  &:hover:not(:disabled):not(:focus):not(.gloss-textarea--error):not(.gloss-textarea--success) {
+    background: $alias-bg-hover;
+    border-color: $alias-border-hover;
+    @include input-transition-hover;
+  }
+
+  &:focus:not(.gloss-textarea--error):not(.gloss-textarea--success) {
+    background: $alias-bg-hover;
+    border-color: $alias-border-focus;
+    @include shadow-input-focus;
+    @include input-transition-focus;
+  }
+
+  &:disabled {
+    background: $alias-bg-disabled;
+    box-shadow: $shadow-input-disabled;
+    cursor: not-allowed;
+    color: $alias-text-tertiary;
+    border-color: transparent;
+    resize: none;
+  }
+}
+
+// --- SUCCESS STATE ---
+.gloss-textarea--success {
+  border-color: $alias-border-success;
+  @include shadow-input-default;
+
+  &:hover:not(:disabled):not(:focus) {
+    background: $alias-bg-hover;
+  }
+
+  &:focus {
+    background: $alias-bg-hover;
+    box-shadow: $shadow-input-success-focus;
+  }
+}
+
+// --- ERROR STATE ---
+.gloss-textarea--error {
+  border-color: $color-red-200;
+  background: $alias-bg-error;
+  color: $alias-text-error;
+  box-shadow: $shadow-input-error;
+
+  &:hover:not(:disabled):not(:focus) {
+    border-color: $color-red-400;
+  }
+
+  &:focus {
+    border-color: $color-red-400;
+    box-shadow: $shadow-input-error-focus;
+  }
+}
+
+// --- AUTO-RESIZE ---
+.gloss-textarea--auto-resize {
+  resize: none;
+  overflow: hidden;
+  transition: height 0.1s ease;
+}