@marwes-ui/presets 0.0.4 → 1.0.1

package/src/firstEdition/radio.css

@@ -0,0 +1,121 @@
+/*
+ * Radio Component Styles
+ * Figma: 1368:6734 (light) / 1368:6900 (dark)
+ *
+ * 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/label   (light): #141414    (dark): #f9fafb  (= text)
+ *   Dimensions: 18×18px circle, 10px inner dot (from Figma)
+ */
+
+.mw-radio {
+  --mw-radio-surface: var(--mw-color-surface);
+  --mw-radio-border: var(--mw-color-border-subtle);
+  --mw-radio-dot: var(--mw-color-primary-base, #2f31fc);
+
+  /* Reset native appearance */
+  appearance: none;
+  -webkit-appearance: none;
+
+  /* Grid centering for ::before dot */
+  display: inline-grid;
+  place-content: center;
+
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  margin: 0;
+  border: 1.5px solid var(--mw-radio-border);
+  background: var(--mw-radio-surface);
+
+  cursor: pointer;
+  vertical-align: middle;
+  flex-shrink: 0;
+  transition: border-color 150ms ease, background 150ms ease;
+  font-family: var(--mw-font-primary, inherit);
+}
+
+/* Inner dot — hidden by default, scales in when checked */
+.mw-radio::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--mw-radio-dot);
+  transform: scale(0);
+  transition: transform 180ms ease;
+}
+
+/* ============================================
+   CHECKED STATE
+   ============================================ */
+
+.mw-radio:checked {
+  border-color: var(--mw-radio-border);
+  background: var(--mw-radio-surface);
+}
+
+.mw-radio:checked::before {
+  transform: scale(1);
+}
+
+/* ============================================
+   HOVER STATE
+   ============================================ */
+
+.mw-radio:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--mw-radio-border) 60%, var(--mw-radio-dot));
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.mw-radio:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.mw-radio:disabled,
+.mw-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+
+/* ============================================
+   INVALID STATE
+   ============================================ */
+
+.mw-radio--invalid,
+.mw-radio[aria-invalid="true"] {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-radio:checked.mw-radio--invalid::before,
+.mw-radio:checked[aria-invalid="true"]::before {
+  background: var(--mw-color-danger-base);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+.mw-theme--dark .mw-radio {
+  --mw-radio-surface: var(--mw-color-surface);
+  --mw-radio-border: var(--mw-color-border-subtle);
+}
+
+.mw-theme--dark .mw-radio:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--mw-color-text) 40%, var(--mw-radio-dot));
+}
+
+.mw-theme--dark .mw-radio:disabled,
+.mw-theme--dark .mw-radio--disabled {
+  opacity: 0.4;
+}

package/src/firstEdition/rich-text.css

@@ -0,0 +1,134 @@
+/*
+ * RichText Component Styles
+ * Textarea-like rich text editor with inline formatting toolbar.
+ */
+
+.mw-rich-text {
+  width: 260px;
+  border-radius: var(--mw-ui-radius);
+  border: 1px solid var(--mw-color-border);
+  background: var(--mw-color-surface);
+  color: var(--mw-color-text);
+  transition: border-color 150ms ease, outline 150ms ease;
+}
+
+.mw-rich-text:hover:not([data-disabled="true"]):not(:has(.mw-rich-text__editor:focus-visible)) {
+  border-color: color-mix(in srgb, var(--mw-color-border) 70%, var(--mw-color-text));
+}
+
+.mw-rich-text:has(.mw-rich-text__editor:focus-visible) {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+.mw-rich-text.is-invalid,
+.mw-rich-text--danger,
+.mw-input-field--invalid .mw-rich-text {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-rich-text.is-invalid:has(.mw-rich-text__editor:focus-visible),
+.mw-rich-text--danger:has(.mw-rich-text__editor:focus-visible),
+.mw-input-field--invalid .mw-rich-text:has(.mw-rich-text__editor:focus-visible) {
+  outline-color: var(--mw-color-danger-base);
+}
+
+.mw-rich-text--success {
+  border-color: var(--mw-color-success-base);
+}
+
+.mw-rich-text--success:has(.mw-rich-text__editor:focus-visible) {
+  outline-color: var(--mw-color-success-base);
+}
+
+.mw-rich-text[data-disabled="true"] {
+  opacity: 0.2;
+  cursor: not-allowed;
+  border-color: var(--mw-color-border-disabled);
+  background: var(--mw-color-surface-disabled);
+  color: var(--mw-color-text-disabled);
+}
+
+.mw-rich-text__toolbar {
+  display: flex;
+  gap: var(--mw-spacing-sp-4, 4px);
+  padding: var(--mw-spacing-sp-8);
+  border-bottom: 1px solid var(--mw-color-border);
+}
+
+.mw-rich-text__toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--mw-ui-radius, 4px);
+  background: transparent;
+  color: var(--mw-color-text-muted);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.mw-rich-text__toolbar-button:hover:not(:disabled) {
+  background: var(--mw-color-surface-elevated, #f3f4f6);
+  color: var(--mw-color-text);
+}
+
+.mw-rich-text__toolbar-button:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+.mw-rich-text__toolbar-button[data-active="true"] {
+  background: color-mix(in srgb, var(--mw-color-primary-base) 12%, transparent);
+  color: var(--mw-color-primary-base);
+}
+
+.mw-rich-text__toolbar-button:disabled {
+  cursor: not-allowed;
+}
+
+.mw-rich-text__editor {
+  min-height: calc(var(--mw-density-height) * 3);
+  padding: var(--mw-density-padding-y) var(--mw-density-padding-x);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size);
+  line-height: 1.5;
+  color: inherit;
+  outline: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.mw-rich-text__editor[data-empty="true"]::before {
+  content: attr(data-placeholder);
+  color: var(--mw-color-text-muted);
+  pointer-events: none;
+}
+
+.mw-rich-text__editor p {
+  margin: 0;
+}
+
+.mw-rich-text__editor p + p {
+  margin-top: var(--mw-spacing-sp-8);
+}
+
+.mw-rich-text__editor strong {
+  font-weight: 700;
+}
+
+.mw-rich-text__editor em {
+  font-style: italic;
+}
+
+.mw-rich-text__editor u {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.mw-rich-text[data-readonly="true"] .mw-rich-text__editor {
+  cursor: default;
+}

package/src/firstEdition/select.css

@@ -0,0 +1,337 @@
+/*
+ * Select Component Styles
+ * Figma references:
+ * - Compact select atom: 1364:7707
+ * - Dropdown field trigger: 1364:7701
+ * - Dropdown token mapping:
+ *   dropdown/list-surface -> --mw-dropdown-list-surface
+ *   dropdown/list-border  -> --mw-dropdown-list-border
+ *   dropdown/item-surface -> --mw-dropdown-item-surface
+ *   dropdown/item-label   -> --mw-dropdown-item-label
+ *   dropdown/item-check   -> --mw-dropdown-item-check
+ *
+ * Color-token guidance:
+ * - See packages/presets/COLORS.md
+ * - Use --mw-color-text for neutral black/white emphasis
+ * - Use --mw-color-primary-base for brand-accent emphasis
+ */
+
+.mw-select__control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+  min-width: 96px;
+  max-width: 100%;
+  max-inline-size: 100%;
+}
+
+.mw-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  field-sizing: fixed;
+  box-sizing: border-box;
+  display: block;
+  min-height: 34px;
+  padding: 8px 32px 8px 12px; /* off-scale — no token */
+  border-radius: var(--mw-ui-radius);
+  border: 1px solid var(--mw-color-border);
+  background-color: var(--mw-color-surface);
+  color: var(--mw-color-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 14px;
+  line-height: 16px;
+  width: auto;
+  min-width: 96px;
+  max-width: 100%;
+  max-inline-size: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: border-color 150ms ease, outline 150ms ease, background-color 150ms ease;
+}
+
+.mw-select__control-icon {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--mw-color-text-muted);
+}
+
+.mw-select[data-placeholder-selected="true"] {
+  color: var(--mw-color-text-muted);
+}
+
+.mw-select--native {
+  appearance: auto;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  padding-right: 12px;
+}
+
+.mw-input-field__input-wrapper .mw-select__control {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+.mw-input-field__input-wrapper .mw-select {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  min-height: 42px;
+  padding: 12px 40px 12px 16px; /* off-scale — no token */
+}
+
+.mw-input-field__input-wrapper .mw-select--native {
+  padding: 12px; /* off-scale — native select keeps browser arrow padding */
+}
+
+.mw-input-field__input-wrapper .mw-select-field__control {
+  --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-label: var(--mw-color-text);
+  --mw-dropdown-item-check: var(--mw-color-primary-base);
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+.mw-select-field__trigger {
+  appearance: none;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px; /* off-scale — no token */
+  width: 100%;
+  max-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  min-height: 40px;
+  padding: 8px 12px; /* off-scale — no token */
+  border-radius: var(--mw-ui-radius);
+  border: 1px solid var(--mw-color-border);
+  background-color: var(--mw-color-surface);
+  color: var(--mw-color-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 14px;
+  line-height: 16px;
+  text-align: left;
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 150ms ease, outline 150ms ease, background-color 150ms ease, color 150ms
+    ease;
+}
+
+.mw-select-field__trigger-text {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.mw-select-field__trigger--placeholder,
+.mw-select-field__trigger[data-placeholder-selected="true"] {
+  color: var(--mw-color-text-muted);
+}
+
+.mw-select-field__trigger-icon {
+  flex-shrink: 0;
+  color: var(--mw-color-text-muted);
+  transition: transform 150ms ease;
+}
+
+.mw-select__control:has(.mw-select:focus-visible) .mw-select__control-icon,
+.mw-select__control:has(.mw-select:hover:not(:disabled):not(:focus)) .mw-select__control-icon {
+  color: var(--mw-color-text);
+}
+
+.mw-select-field__trigger:hover:not(:disabled):not(:focus-visible) {
+  border-color: color-mix(in srgb, var(--mw-color-border) 70%, var(--mw-color-text));
+}
+
+.mw-select-field__trigger:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+.mw-select-field__trigger.is-invalid {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-select-field__trigger.is-invalid:focus-visible {
+  outline-color: var(--mw-color-danger-base);
+}
+
+.mw-select-field__trigger:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+  pointer-events: none;
+  border-color: var(--mw-color-border-disabled);
+  background-color: var(--mw-color-surface-disabled);
+  color: var(--mw-color-text-disabled);
+}
+
+.mw-select-field__control--open .mw-select-field__trigger,
+.mw-select-field__trigger--open {
+  border-color: var(--mw-color-border-strong);
+}
+
+.mw-select-field__control--open .mw-select-field__trigger-icon,
+.mw-select-field__trigger--open .mw-select-field__trigger-icon {
+  color: var(--mw-color-text);
+  transform: rotate(180deg);
+}
+
+.mw-select-field__list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  width: 100%;
+  max-width: 100%;
+  padding: var(--mw-spacing-sp-4) 0;
+  border: 1px solid var(--mw-dropdown-list-border);
+  border-radius: var(--mw-ui-radius);
+  background-color: var(--mw-dropdown-list-surface);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
+}
+
+.mw-select-field__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px; /* off-scale — no token */
+  padding: var(--mw-spacing-sp-8) var(--mw-spacing-sp-16);
+  background-color: var(--mw-dropdown-item-surface);
+  color: var(--mw-dropdown-item-label);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 14px;
+  line-height: 16px;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.mw-select-field__option--active:not(.mw-select-field__option--disabled),
+.mw-select-field__option:hover:not(.mw-select-field__option--disabled) {
+  background-color: var(--mw-dropdown-item-surface-hover);
+}
+
+.mw-select-field__option:active:not(.mw-select-field__option--disabled) {
+  background-color: var(--mw-dropdown-item-surface-pressed);
+}
+
+.mw-select-field__option--selected {
+  font-weight: 400;
+}
+
+.mw-select-field__option--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.mw-select-field__option-label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.mw-select-field__option-check {
+  flex-shrink: 0;
+  color: var(--mw-dropdown-item-check);
+}
+
+.mw-select:hover:not(:disabled):not(:focus) {
+  border-color: color-mix(in srgb, var(--mw-color-border) 70%, var(--mw-color-text));
+}
+
+.mw-select:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+.mw-select.is-invalid,
+.mw-select--danger {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-select.is-invalid:focus-visible,
+.mw-select--danger:focus-visible {
+  outline-color: var(--mw-color-danger-base);
+}
+
+.mw-select--success {
+  border-color: var(--mw-color-success-base);
+}
+
+.mw-select--success:focus-visible {
+  outline-color: var(--mw-color-success-base);
+}
+
+.mw-select:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+  pointer-events: none;
+  border-color: var(--mw-color-border-disabled);
+  background-color: var(--mw-color-surface-disabled);
+  color: var(--mw-color-text-disabled);
+}
+
+.mw-select__control:has(.mw-select:disabled) .mw-select__control-icon {
+  color: var(--mw-color-text-disabled);
+}
+
+.mw-theme--dark .mw-select {
+  background-color: var(--mw-color-surface-elevated);
+}
+
+.mw-select-field__trigger:disabled .mw-select-field__trigger-icon {
+  color: var(--mw-color-text-disabled);
+}
+
+.mw-theme--dark .mw-select-field__trigger {
+  background-color: var(--mw-color-surface-elevated);
+}
+
+.mw-theme--dark .mw-input-field__input-wrapper .mw-select-field__control {
+  --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: color-mix(
+    in srgb,
+    var(--mw-color-surface-elevated) 88%,
+    var(--mw-color-text) 12%
+  );
+  --mw-dropdown-item-surface-pressed: color-mix(
+    in srgb,
+    var(--mw-color-surface-elevated) 78%,
+    var(--mw-color-text) 22%
+  );
+  --mw-dropdown-item-label: var(--mw-color-text);
+  --mw-dropdown-item-check: var(--mw-color-primary-base);
+}
+
+.mw-theme--dark .mw-select-field__list {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
+}