@marwes-ui/presets 1.1.0 → 1.3.0

package/src/firstEdition/molecules/accordion-field.css

@@ -24,23 +24,22 @@
 }
 
 .mw-accordion-field__description {
-  opacity: 0.6;
   font-size: 0.875em;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
 }
 
 .mw-accordion-field__error {
   font-size: 0.875em;
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 /* State modifiers */
 .mw-accordion-field--disabled {
-  opacity: 0.7;
+  color: var(--mw-color-text-disabled, #595959);
   cursor: not-allowed;
 }
 
 .mw-accordion-field--invalid .mw-accordion-field__label .mw-p,
 .mw-accordion-field--invalid .mw-accordion-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/checkbox-field.css

@@ -43,7 +43,7 @@
     var(--mw-density-gap) /* checkbox size + margin + spacing to textfield */
   );
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 /* Optional state hooks */

package/src/firstEdition/molecules/checkbox-group-field.css

@@ -42,7 +42,7 @@
 
 .mw-checkbox-group-field__error {
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 .mw-checkbox-group-field--disabled .mw-checkbox-group-field__option {
@@ -52,7 +52,7 @@
 
 .mw-checkbox-group-field--invalid .mw-checkbox-group-field__label .mw-p,
 .mw-checkbox-group-field--invalid .mw-checkbox-group-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 @supports selector(:has(*)) {

package/src/firstEdition/molecules/input-field.css

@@ -16,7 +16,6 @@
   border: none;
   cursor: pointer;
   user-select: none;
-  opacity: 0.6;
   transition: opacity 0.2s ease;
   text-align: left;
   font: inherit;
@@ -55,22 +54,22 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
   transition: color 0.2s ease;
   border-radius: var(--mw-ui-radius, 4px);
 
   &:hover {
-    color: var(--mw-color-text, #111827);
-    background: var(--mw-color-surface, #f3f4f6);
+    color: var(--mw-color-text, #141414);
+    background: var(--mw-color-surface, #f5f5f5);
   }
 
   &:focus {
-    outline: 2px solid var(--mw-color-primary-base, #3b82f6);
+    outline: 2px solid var(--mw-color-primary-base, #2f31fc);
     outline-offset: 2px;
   }
 
   &:active {
-    background: var(--mw-color-border-subtle, #e5e7eb);
+    background: var(--mw-color-border-subtle, #d8d8d8);
   }
 }
 
@@ -81,7 +80,7 @@
   align-items: center;
   justify-content: center;
   padding: 6px; /* off-scale — no token */
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
   pointer-events: none;
 }
 
@@ -95,22 +94,22 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
   transition: color 0.2s ease;
   border-radius: var(--mw-ui-radius, 4px);
 
   &:hover {
-    color: var(--mw-color-text, #111827);
-    background: var(--mw-color-surface, #f3f4f6);
+    color: var(--mw-color-text, #141414);
+    background: var(--mw-color-surface, #f5f5f5);
   }
 
   &:focus {
-    outline: 2px solid var(--mw-color-primary-base, #3b82f6);
+    outline: 2px solid var(--mw-color-primary-base, #2f31fc);
     outline-offset: 2px;
   }
 
   &:active {
-    background: var(--mw-color-border-subtle, #e5e7eb);
+    background: var(--mw-color-border-subtle, #d8d8d8);
   }
 }
 
@@ -120,7 +119,7 @@
   justify-content: center;
   padding-left: var(--mw-spacing-sp-16);
   white-space: nowrap;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
   pointer-events: none;
   font-weight: 400;
   font-family: var(--mw-font-primary, inherit);
@@ -193,7 +192,6 @@
 
 /* Disabled — wrapper when symbol is present */
 .mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(:disabled) {
-  opacity: 0.2;
   cursor: not-allowed;
   pointer-events: none;
   border-color: var(--mw-color-border-disabled);
@@ -227,26 +225,25 @@
 }
 
 .mw-input-field__helper {
-  opacity: 0.6;
   font-size: 0.875em;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
 }
 
 .mw-input-field__error {
   font-size: 0.875em;
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 /* State modifiers */
 .mw-input-field--disabled .mw-input-field__label {
   cursor: not-allowed;
-  opacity: 0.6;
+  color: var(--mw-color-text-disabled, #595959);
 }
 
 /* Disabled state overwrite hover/focus states */
 .mw-input-field--disabled:hover .mw-input-field__label,
 .mw-input-field--disabled:focus-within .mw-input-field__label {
-  opacity: 0.6;
+  color: var(--mw-color-text-disabled, #595959);
 }
 
 .mw-input-field--readonly .mw-input-field__label {
@@ -256,5 +253,5 @@
 .mw-input-field--invalid .mw-input-field__label .mw-p,
 .mw-input-field--invalid .mw-input-field__error .mw-p {
   /* Label styling when field has error - could add red accent if needed  */
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/radio-group-field.css

@@ -44,7 +44,7 @@
 
 .mw-radio-group-field__error {
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 /* State modifiers */
@@ -55,5 +55,5 @@
 
 .mw-radio-group-field--invalid .mw-radio-group-field__label .mw-p,
 .mw-radio-group-field--invalid .mw-radio-group-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/slider-field.css

@@ -38,7 +38,7 @@
 }
 
 .mw-slider-field__description {
-  opacity: 0.75;
+  color: var(--mw-color-text-muted, #595959);
   font-size: var(--mw-density-font-size-sm);
 }
 
@@ -65,11 +65,11 @@
 
 .mw-slider-field__error {
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 .mw-slider-field--disabled {
-  opacity: 0.7;
+  color: var(--mw-color-text-disabled, #595959);
 }
 
 .mw-slider-field--disabled .mw-slider-field__label,
@@ -79,5 +79,5 @@
 
 .mw-slider-field--invalid .mw-slider-field__label .mw-p,
 .mw-slider-field--invalid .mw-slider-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/switch-field.css

@@ -23,7 +23,7 @@
 .mw-switch-field__error {
   margin-left: calc(var(--mw-spacing-sp-24) + var(--mw-density-gap));
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 .mw-switch-field--disabled .mw-switch-field__label {
@@ -33,5 +33,5 @@
 
 .mw-switch-field--invalid .mw-switch-field__label .mw-p,
 .mw-switch-field--invalid .mw-switch-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/radio.css

@@ -4,8 +4,8 @@
  *
  * Tokens (from Figma nodes.json):
  *   radio/surface (light): #f9fafb    (dark): #141414
- *   radio/border  (light): #e5e7eb    (dark): #374151
- *   radio/dot     (light): #2f31fc    (dark): #2f31fc  (= primary-base)
+ *   radio/border  (light): #d8d8d8    (dark): #474747
+ *   radio/dot     (light): #2f31fc    (dark): #5859fc  (= primary-base)
  *   radio/label   (light): #141414    (dark): #f9fafb  (= text)
  *   Dimensions: 18×18px circle, 10px inner dot (from Figma)
  */

package/src/firstEdition/rich-text.css

@@ -72,7 +72,7 @@
 }
 
 .mw-rich-text__toolbar-button:hover:not(:disabled) {
-  background: var(--mw-color-surface-elevated, #f3f4f6);
+  background: var(--mw-color-surface-elevated, #f5f5f5);
   color: var(--mw-color-text);
 }
 

package/src/firstEdition/select.css

@@ -100,8 +100,8 @@
   --mw-dropdown-list-surface: var(--mw-color-surface-elevated);
   --mw-dropdown-list-border: var(--mw-color-border);
   --mw-dropdown-item-surface: var(--mw-color-surface-elevated);
-  --mw-dropdown-item-surface-hover: var(--mw-color-surface-subtle, #f3f4f6);
-  --mw-dropdown-item-surface-pressed: var(--mw-color-border-subtle, #e5e7eb);
+  --mw-dropdown-item-surface-hover: var(--mw-color-surface-subtle, #f5f5f5);
+  --mw-dropdown-item-surface-pressed: var(--mw-color-border-subtle, #d8d8d8);
   --mw-dropdown-item-label: var(--mw-color-text);
   --mw-dropdown-item-check: var(--mw-color-primary-base);
   position: relative;
@@ -335,3 +335,42 @@
 .mw-theme--dark .mw-select-field__list {
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
 }
+
+.mw-input-field--select-date {
+  gap: 4px; /* Figma date field frame spacing */
+}
+
+.mw-input-field--select-date .mw-input-field__label {
+  opacity: 1;
+}
+
+.mw-input-field--select-date .mw-input-field__label p {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.mw-input-field--select-date .mw-input-field__helper p,
+.mw-input-field--select-date .mw-input-field__error p {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.mw-input-field--select-date .mw-select-field__trigger {
+  min-height: 40px;
+  padding: 12px 16px;
+  border-color: var(--mw-color-border-subtle, #d8d8d8);
+  border-radius: var(--mw-ui-radius, 4px);
+  color: var(--mw-color-text-muted, #595959);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.42px;
+  line-height: 16px;
+}
+
+.mw-input-field--select-date .mw-select-field__trigger-icon {
+  inline-size: 16px;
+  block-size: 16px;
+  color: var(--mw-color-icon-muted, #a3a3a3);
+}

package/src/firstEdition/skeleton.css

@@ -0,0 +1,95 @@
+/*
+ * Skeleton styles
+ * Figma reference:
+ * - page frame: .figma/marwes/pages/skeleton/skeleton_1921-34816.json
+ * - text: 120×12, radius 4, black 4% opacity
+ * - dark mode: lifted neutral fill against dark surfaces
+ * - circular: 40×40, radius 100
+ * - rectangular: 120×120, radius 4
+ */
+
+.mw-skeleton {
+  --mw-skeleton-base-color: color-mix(in srgb, var(--mw-color-text, #141414) 4%, transparent);
+  --mw-skeleton-highlight-color: color-mix(
+    in srgb,
+    var(--mw-color-text-inverted, #ffffff) 24%,
+    var(--mw-skeleton-base-color)
+  );
+
+  display: inline-block;
+  inline-size: var(--mw-skeleton-width, 120px);
+  block-size: var(--mw-skeleton-height, 12px);
+  min-inline-size: 1px;
+  min-block-size: 1px;
+  border-radius: var(--mw-skeleton-radius, 4px);
+  background: var(--mw-skeleton-base-color);
+  overflow: hidden;
+  vertical-align: middle;
+  flex: none;
+}
+
+.mw-theme--dark .mw-skeleton {
+  --mw-skeleton-base-color: color-mix(
+    in srgb,
+    var(--mw-color-text, #f9fafb) 12%,
+    var(--mw-color-surface-elevated, #2b2b2b)
+  );
+  --mw-skeleton-highlight-color: color-mix(
+    in srgb,
+    var(--mw-color-text, #f9fafb) 24%,
+    var(--mw-skeleton-base-color)
+  );
+}
+
+.mw-skeleton--text {
+  transform-origin: 0 55%;
+}
+
+.mw-skeleton--circular {
+  border-radius: 9999px;
+}
+
+.mw-skeleton--pulse {
+  animation: mw-skeleton-pulse 1400ms ease-in-out 500ms infinite;
+}
+
+.mw-skeleton--wave {
+  position: relative;
+}
+
+.mw-skeleton--wave::after {
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, var(--mw-skeleton-highlight-color), transparent);
+  animation: mw-skeleton-wave 1600ms linear 500ms infinite;
+  content: "";
+}
+
+@keyframes mw-skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.48;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes mw-skeleton-wave {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-skeleton--pulse {
+    animation-duration: 2400ms;
+  }
+
+  .mw-skeleton--wave::after {
+    animation-duration: 2600ms;
+  }
+}

package/src/firstEdition/slider.css

@@ -153,7 +153,7 @@
 }
 
 .mw-slider--disabled {
-  --mw-slider-track-background: var(--mw-color-border-disabled, #d1d5db);
+  --mw-slider-track-background: var(--mw-color-border-disabled, #a3a3a3);
   --mw-slider-track-fill: var(--mw-color-primary-disabled, rgba(47, 49, 252, 0.5));
   --mw-slider-thumb-border: var(--mw-color-primary-disabled, rgba(47, 49, 252, 0.5));
 

package/src/firstEdition/spinner.css

@@ -34,10 +34,17 @@
   transform-origin: center;
 }
 
-.mw-spinner--cross .mw-spinner__svg {
+/* ── Segment-shift variants (no SVG rotation, individual opacity cycling) ── */
+
+.mw-spinner--cross .mw-spinner__svg,
+.mw-spinner--dots-round .mw-spinner__svg,
+.mw-spinner--dots-square .mw-spinner__svg,
+.mw-spinner--lines .mw-spinner__svg {
   animation: none;
 }
 
+/* Cross — 4 segments */
+
 .mw-spinner--cross .mw-spinner__svg rect {
   animation: mw-spinner-cross-shift var(--mw-spinner-rotation-duration) steps(4, end) infinite;
 }
@@ -54,6 +61,108 @@
   animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
 }
 
+/* Dots-round — 8 circle segments */
+
+.mw-spinner--dots-round .mw-spinner__svg circle {
+  animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(2) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(3) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(4) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(5) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(6) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(7) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(8) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
+}
+
+/* Dots-square — 8 rect segments */
+
+.mw-spinner--dots-square .mw-spinner__svg rect {
+  animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(2) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(3) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(4) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(5) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(6) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(7) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(8) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
+}
+
+/* Lines — 8 rect segments */
+
+.mw-spinner--lines .mw-spinner__svg rect {
+  animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(2) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(3) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(4) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(5) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(6) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(7) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(8) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
+}
+
 @keyframes mw-spinner-rotate {
   from {
     transform: rotate(0deg);
@@ -83,12 +192,50 @@
   }
 }
 
+@keyframes mw-spinner-segment-shift-8 {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  12.5% {
+    opacity: 0.875;
+  }
+
+  25% {
+    opacity: 0.75;
+  }
+
+  37.5% {
+    opacity: 0.625;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  62.5% {
+    opacity: 0.375;
+  }
+
+  75% {
+    opacity: 0.25;
+  }
+
+  87.5% {
+    opacity: 0.125;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .mw-spinner__svg {
     animation-duration: 1600ms;
   }
 
-  .mw-spinner--cross .mw-spinner__svg rect {
+  .mw-spinner--cross .mw-spinner__svg rect,
+  .mw-spinner--dots-round .mw-spinner__svg circle,
+  .mw-spinner--dots-square .mw-spinner__svg rect,
+  .mw-spinner--lines .mw-spinner__svg rect {
     animation-duration: 1600ms;
   }
 }