@marwes-ui/presets 0.0.4 → 1.0.0

package/src/firstEdition/avatar.css

@@ -0,0 +1,204 @@
+/*
+ * Avatar component styles
+ * Figma refs:
+ * - .figma/marwes/components/avatar.json
+ * - .figma/marwes/pages/-avatar/-avatar_1574-27460.json
+ * - .figma/marwes/pages/-avatar/-avatar-dark_1574-27570.json
+ *
+ * Current implementation covers:
+ * - Avatar atom: 3 sizes × 3 content types
+ * - AvatarBadge molecule: online status indicator
+ * - AvatarGroup molecule: stacked medium avatars with overflow counter
+ */
+
+.mw-avatar {
+  --mw-avatar-size: 40px;
+  --mw-avatar-font-size: 13px;
+  --mw-avatar-line-height: 17px;
+  --mw-avatar-letter-spacing: -0.39px;
+  --mw-avatar-icon-size: 18px;
+  --mw-avatar-surface: var(--mw-color-primary-base, #2f31fc);
+  --mw-avatar-border-width: 0px;
+  --mw-avatar-border-color: transparent;
+  --mw-avatar-label: var(--mw-color-primary-label, #ffffff);
+  --mw-avatar-image-fallback: var(--mw-color-primary-base, #2f31fc);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--mw-avatar-size);
+  height: var(--mw-avatar-size);
+  overflow: hidden;
+  box-sizing: border-box;
+  border: var(--mw-avatar-border-width) solid var(--mw-avatar-border-color);
+  border-radius: 9999px;
+  background: var(--mw-avatar-surface);
+  color: var(--mw-avatar-label);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-avatar-font-size);
+  font-weight: 500;
+  line-height: var(--mw-avatar-line-height);
+  letter-spacing: var(--mw-avatar-letter-spacing);
+}
+
+.mw-avatar--small {
+  --mw-avatar-size: 32px;
+  --mw-avatar-font-size: 12px;
+  --mw-avatar-line-height: 16px;
+  --mw-avatar-letter-spacing: -0.36px;
+  --mw-avatar-icon-size: 14px;
+}
+
+.mw-avatar--medium {
+  --mw-avatar-size: 40px;
+  --mw-avatar-font-size: 13px;
+  --mw-avatar-line-height: 17px;
+  --mw-avatar-letter-spacing: -0.39px;
+  --mw-avatar-icon-size: 18px;
+}
+
+.mw-avatar--large {
+  --mw-avatar-size: 48px;
+  --mw-avatar-font-size: 15px;
+  --mw-avatar-line-height: 19px;
+  --mw-avatar-letter-spacing: -0.45px;
+  --mw-avatar-icon-size: 22px;
+}
+
+.mw-avatar--icon {
+  --mw-avatar-surface: var(--mw-color-surface-elevated);
+  --mw-avatar-border-width: 1px;
+  --mw-avatar-border-color: var(--mw-color-border);
+  --mw-avatar-label: var(--mw-color-text-muted);
+}
+
+.mw-avatar--image {
+  --mw-avatar-surface: var(--mw-color-surface-elevated);
+  --mw-avatar-border-width: 0.5px;
+  --mw-avatar-border-color: var(--mw-color-border-subtle);
+}
+
+.mw-avatar__initials {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  color: inherit;
+  line-height: inherit;
+  text-transform: uppercase;
+}
+
+.mw-avatar__icon {
+  width: var(--mw-avatar-icon-size);
+  height: var(--mw-avatar-icon-size);
+  color: inherit;
+}
+
+.mw-avatar__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--mw-avatar-image-fallback);
+  object-fit: cover;
+}
+
+.mw-theme--dark .mw-avatar--icon {
+  --mw-avatar-surface: var(--mw-color-surface-elevated);
+  --mw-avatar-border-color: var(--mw-color-border);
+  --mw-avatar-label: var(--mw-color-text-muted);
+}
+
+.mw-theme--dark .mw-avatar--image {
+  --mw-avatar-surface: var(--mw-color-surface-elevated);
+  --mw-avatar-border-color: var(--mw-color-border-subtle);
+  --mw-avatar-image-fallback: var(--mw-color-primary-disabled);
+}
+
+.mw-avatar-badge {
+  position: relative;
+  display: inline-flex;
+  line-height: 0;
+}
+
+.mw-avatar-badge--small {
+  --mw-avatar-badge-indicator-size: 8px;
+}
+
+.mw-avatar-badge--medium {
+  --mw-avatar-badge-indicator-size: 10px;
+}
+
+.mw-avatar-badge--large {
+  --mw-avatar-badge-indicator-size: 12px;
+}
+
+.mw-avatar-badge__indicator {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: var(--mw-avatar-badge-indicator-size);
+  height: var(--mw-avatar-badge-indicator-size);
+  border: 2px solid var(--mw-color-surface, #f9fafb);
+  border-radius: 9999px;
+  background: var(--mw-color-success-base, #16a34a);
+  box-sizing: border-box;
+}
+
+.mw-theme--dark .mw-avatar-badge__indicator {
+  border-color: var(--mw-color-surface, #141414);
+}
+
+.mw-avatar-group {
+  --mw-avatar-group-overlap: 12px;
+  --mw-avatar-group-stroke: var(--mw-color-surface, #f9fafb);
+  --mw-avatar-group-stroke-width: 2.5px;
+  --mw-avatar-group-counter-surface: var(--mw-color-surface, #f9fafb);
+  --mw-avatar-group-counter-label: var(--mw-color-text-muted);
+
+  min-inline-size: 0;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  border: none;
+  padding: 0;
+}
+
+.mw-avatar-group__item,
+.mw-avatar-group__counter {
+  position: relative;
+  margin-left: calc(var(--mw-avatar-group-overlap) * -1);
+}
+
+.mw-avatar-group__item:first-child {
+  margin-left: 0;
+}
+
+.mw-avatar-group__item > .mw-avatar {
+  box-shadow: 0 0 0 var(--mw-avatar-group-stroke-width) var(--mw-avatar-group-stroke);
+}
+
+.mw-avatar-group__counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  background: var(--mw-avatar-group-counter-surface);
+  box-shadow: 0 0 0 var(--mw-avatar-group-stroke-width) var(--mw-avatar-group-counter-surface);
+  color: var(--mw-avatar-group-counter-label);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: -0.36px;
+  box-sizing: border-box;
+}
+
+.mw-theme--dark .mw-avatar-group {
+  --mw-avatar-group-stroke: var(--mw-color-surface, #141414);
+  --mw-avatar-group-counter-surface: var(--mw-color-surface, #141414);
+  --mw-avatar-group-counter-label: var(--mw-color-text-muted);
+}

package/src/firstEdition/badge.css

@@ -0,0 +1,139 @@
+/*
+ * Badge Component Styles
+ * Validated against:
+ * - .figma/marwes/components/checkboxbadge.json
+ * - .figma/marwes/pages/-badge/-badge_1364-11603.json
+ * - .figma/marwes/pages/-badge/-badge-dark_2276-56582.json
+ * - .figma/marwes/pages/-badge/component-container_1369-6125.json
+ *
+ * The live sync uses exact semantic badge tones rather than generic color-mix()
+ * derivations, especially for the remaining semantic tones and dark-mode surfaces.
+ */
+
+.mw-badge {
+  --mw-badge-surface: transparent;
+  --mw-badge-border: transparent;
+  --mw-badge-label: inherit;
+  --mw-badge-radius: var(--mw-ui-radius, 4px);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mw-spacing-sp-4);
+  padding: var(--mw-spacing-sp-2) var(--mw-spacing-sp-8);
+  border: none;
+  border-radius: var(--mw-badge-radius);
+  box-shadow: inset 0 0 0 1px var(--mw-badge-border);
+  background: var(--mw-badge-surface);
+  color: var(--mw-badge-label);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+/* ============================================
+   LIGHT VARIANTS
+   ============================================ */
+
+.mw-badge--neutral {
+  --mw-badge-surface: var(--mw-color-surface-subtle);
+  --mw-badge-border: var(--mw-color-border-subtle);
+  --mw-badge-label: var(--mw-color-text-muted);
+}
+
+.mw-badge--info {
+  --mw-badge-surface: color-mix(in srgb, var(--mw-color-info-base) 12%, var(--mw-color-surface));
+  --mw-badge-border: color-mix(
+    in srgb,
+    var(--mw-color-info-base) 45%,
+    var(--mw-color-border-subtle)
+  );
+  --mw-badge-label: var(--mw-color-info-base);
+}
+
+.mw-badge--success {
+  --mw-badge-surface: color-mix(in srgb, var(--mw-color-success-base) 12%, var(--mw-color-surface));
+  --mw-badge-border: color-mix(
+    in srgb,
+    var(--mw-color-success-base) 45%,
+    var(--mw-color-border-subtle)
+  );
+  --mw-badge-label: var(--mw-color-success-base);
+}
+
+.mw-badge--warning {
+  --mw-badge-surface: color-mix(in srgb, var(--mw-color-warning-base) 16%, var(--mw-color-surface));
+  --mw-badge-border: color-mix(
+    in srgb,
+    var(--mw-color-warning-base) 50%,
+    var(--mw-color-border-subtle)
+  );
+  --mw-badge-label: var(--mw-color-warning-base);
+}
+
+.mw-badge--error {
+  --mw-badge-surface: color-mix(in srgb, var(--mw-color-danger-base) 12%, var(--mw-color-surface));
+  --mw-badge-border: color-mix(
+    in srgb,
+    var(--mw-color-danger-base) 45%,
+    var(--mw-color-border-subtle)
+  );
+  --mw-badge-label: var(--mw-color-danger-base);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+.mw-theme--dark .mw-badge--neutral {
+  --mw-badge-surface: var(--mw-color-surface-subtle);
+  --mw-badge-border: var(--mw-color-border-subtle);
+  --mw-badge-label: var(--mw-color-text-muted);
+}
+
+.mw-theme--dark .mw-badge--info {
+  --mw-badge-surface: color-mix(in srgb, var(--mw-color-info-base) 18%, var(--mw-color-surface));
+  --mw-badge-border: color-mix(
+    in srgb,
+    var(--mw-color-info-base) 55%,
+    var(--mw-color-border-subtle)
+  );
+  --mw-badge-label: var(--mw-color-info-base);
+}
+
+.mw-theme--dark .mw-badge--success {
+  --mw-badge-surface: color-mix(in srgb, var(--mw-color-success-base) 18%, var(--mw-color-surface));
+  --mw-badge-border: color-mix(
+    in srgb,
+    var(--mw-color-success-base) 55%,
+    var(--mw-color-border-subtle)
+  );
+  --mw-badge-label: var(--mw-color-success-base);
+}
+
+.mw-theme--dark .mw-badge--warning {
+  --mw-badge-surface: color-mix(in srgb, var(--mw-color-warning-base) 20%, var(--mw-color-surface));
+  --mw-badge-border: color-mix(
+    in srgb,
+    var(--mw-color-warning-base) 60%,
+    var(--mw-color-border-subtle)
+  );
+  --mw-badge-label: var(--mw-color-warning-base);
+}
+
+.mw-theme--dark .mw-badge--error {
+  --mw-badge-surface: color-mix(in srgb, var(--mw-color-danger-base) 18%, var(--mw-color-surface));
+  --mw-badge-border: color-mix(
+    in srgb,
+    var(--mw-color-danger-base) 55%,
+    var(--mw-color-border-subtle)
+  );
+  --mw-badge-label: var(--mw-color-danger-base);
+}
+
+.mw-badge-group__items {
+  display: inline-flex;
+  gap: var(--mw-spacing-sp-4);
+}

package/src/firstEdition/button.css

@@ -0,0 +1,219 @@
+/* ============================================
+   Button Component Styles - firstEdition
+   Based on Figma node: 1:1072 (Buttons)
+   
+   Design Specifications:
+   - States: default, hover, active, disabled, error
+   - Variants: primary, secondary, text
+   - Icon positions: left, right, none
+   - Focus: 2px #2684FF outline + 2px offset
+   - Disabled: opacity 20% (light), 40% (dark)
+   
+   Figma Variants:
+   - Primary: 1:1080, 1:1085, 1:1090
+   - Secondary: 1:1095, 1:1100, 1:1105  
+   - Text: 1:1110, 1:1115, 1:1120
+   ============================================ */
+
+/* BASE */
+.mw-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px; /* off-scale — icon-to-label spacing */
+  height: var(--mw-density-height);
+  padding: 0 var(--mw-density-padding-x);
+  border-radius: var(--mw-ui-radius);
+  border: 1px solid transparent;
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size);
+  font-weight: 500;
+  line-height: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: all 150ms ease;
+}
+
+/* FOCUS STATE - Figma spec: 2px white space + 2px Accessible blue outline */
+.mw-btn:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+/* PRIMARY - Solid filled button */
+.mw-btn--primary {
+  background: var(--mw-color-primary-base);
+  color: var(--mw-color-primary-label);
+  border-color: var(--mw-color-primary-base);
+}
+
+.mw-btn--primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.mw-btn--primary:active:not(:disabled) {
+  opacity: 0.95;
+}
+
+/* SECONDARY - Outlined button */
+.mw-btn--secondary {
+  background: transparent;
+  color: var(--mw-color-primary-base);
+  border-color: var(--mw-color-primary-base);
+}
+
+.mw-btn--secondary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--mw-color-primary-base) 8%, transparent);
+}
+
+.mw-btn--secondary:active:not(:disabled) {
+  background: color-mix(in srgb, var(--mw-color-primary-base) 12%, transparent);
+}
+
+/* NEUTRAL - Quiet outlined button for cancel/close/filter-style actions */
+.mw-btn--neutral {
+  background: transparent;
+  color: var(--mw-color-text);
+  border-color: color-mix(in srgb, var(--mw-color-text) 10%, transparent);
+}
+
+.mw-btn--neutral:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--mw-color-text) 4%, transparent);
+}
+
+.mw-btn--neutral:active:not(:disabled) {
+  background: color-mix(in srgb, var(--mw-color-text) 8%, transparent);
+}
+
+/* TEXT - Minimal text-only button, content-hugging (no fixed height).
+   Uses the same 6px icon-to-label spacing as every other button. */
+.mw-btn.mw-btn--text {
+  background: transparent;
+  color: var(--mw-color-text);
+  border-color: transparent;
+  height: auto;
+  padding: 0.25rem 0.5rem;
+  line-height: 1;
+  border-radius: var(--mw-ui-radius);
+}
+
+.mw-btn--text:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--mw-color-text) 8%, transparent);
+}
+
+.mw-btn--text:active:not(:disabled) {
+  background: color-mix(in srgb, var(--mw-color-text) 12%, transparent);
+}
+
+.mw-btn.mw-btn--text[data-action="navigate"] {
+  padding: 0.125rem 0;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* SIZES */
+.mw-btn--xs {
+  height: 30px;
+  padding: 0 10px; /* off-scale — no token */
+  font-size: 12px;
+}
+
+.mw-btn--sm {
+  height: 34px;
+  padding: 0 12px; /* off-scale — no token */
+  font-size: 13px;
+}
+
+.mw-btn--md {
+  height: 40px;
+  padding: 12px 16px; /* off-scale — no token */
+  font-size: 14px;
+}
+
+.mw-btn--lg {
+  height: 46px;
+  padding: 0 16px;
+  font-size: 15px;
+}
+
+/* DISABLED STATE - Figma spec: opacity 20% (#000000 20% for light mode) */
+.mw-btn:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+/* Dark mode disabled state: #FFFFFF 40% (middle of 20-60% range from Figma) */
+.mw-theme--dark .mw-btn:disabled {
+  opacity: 0.4;
+}
+
+/* ERROR STATE - Figma node: 1:1072 includes error state */
+.mw-btn[data-error="true"],
+.mw-btn--error {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-btn--primary[data-error="true"],
+.mw-btn--primary.mw-btn--error {
+  background: var(--mw-color-danger-base);
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-btn--secondary[data-error="true"],
+.mw-btn--secondary.mw-btn--error {
+  color: var(--mw-color-danger-base);
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-btn--text[data-error="true"],
+.mw-btn--text.mw-btn--error {
+  color: var(--mw-color-danger-base);
+}
+
+/* SUCCESS - Positive confirmation actions */
+.mw-btn--success {
+  background: var(--mw-color-success-base);
+  color: var(--mw-color-success-label);
+  border-color: var(--mw-color-success-base);
+}
+
+.mw-btn--success:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.mw-btn--success:active:not(:disabled) {
+  opacity: 0.95;
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+/* Dark mode: Primary button hover state uses opacity instead of lightening */
+.mw-theme--dark .mw-btn--primary:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+.mw-theme--dark .mw-btn--primary:active:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* Dark mode: Neutral button uses the softer ghost border from Figma */
+.mw-theme--dark .mw-btn--neutral {
+  border-color: color-mix(in srgb, var(--mw-color-text) 18%, transparent);
+}
+
+/* Dark mode: Error state for Secondary button (red outline on dark background) */
+.mw-theme--dark .mw-btn--secondary[data-error="true"],
+.mw-theme--dark .mw-btn--secondary.mw-btn--error {
+  border-color: var(--mw-color-danger-base);
+  color: var(--mw-color-danger-base);
+}
+
+/* Dark mode: Error state for Primary button */
+.mw-theme--dark .mw-btn--primary[data-error="true"],
+.mw-theme--dark .mw-btn--primary.mw-btn--error {
+  background: var(--mw-color-danger-base);
+  border-color: var(--mw-color-danger-base);
+  color: var(--mw-color-danger-label);
+}

package/src/firstEdition/card.css

@@ -0,0 +1,136 @@
+/*
+ * Card component styles
+ * Figma frames:
+ * - light states: 1364:11556
+ * - dark states: 1368:5891
+ *
+ * Live Figma values from the synced state matrix:
+ * - container: 8px radius, 24px padding, 8px gap
+ * - title: 16/18, weight 500
+ * - body: 14/18, weight 400
+ *
+ * Light mode:
+ * - default border: #e5e7eb
+ * - hover/pressed border: #a3a3a3
+ * - focus border: #2f31fc
+ * - disabled surface: #f3f4f6
+ * - disabled text: #737373
+ *
+ * Dark mode:
+ * - default surface/border: #474747
+ * - pressed surface: #2e2e2e
+ * - focus border: #5859fc
+ * - disabled surface: #000000
+ * - disabled text: #595959
+ */
+
+.mw-card {
+  --mw-card-surface: var(--mw-color-surface-elevated, #ffffff);
+  --mw-card-border: var(--mw-color-border-subtle, #e5e7eb);
+  --mw-card-title: var(--mw-color-text, #141414);
+  --mw-card-body: color-mix(
+    in srgb,
+    var(--mw-color-text, #141414) 65%,
+    var(--mw-color-background, #ffffff)
+  );
+  --mw-card-radius: calc(var(--mw-ui-radius, 4px) * 2);
+
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+  padding: 24px;
+  box-sizing: border-box;
+  background: var(--mw-card-surface);
+  border: 1px solid var(--mw-card-border);
+  border-radius: var(--mw-card-radius);
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.mw-card__header {
+  min-width: 0;
+}
+
+.mw-card__title {
+  display: block;
+  margin: 0;
+  color: var(--mw-card-title);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.mw-card__body {
+  min-width: 0;
+  margin: 0;
+  color: var(--mw-card-body);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.mw-card:hover,
+.mw-card--state-hover {
+  --mw-card-border: color-mix(in srgb, var(--mw-color-border, #141414) 70%, transparent);
+}
+
+.mw-card:active,
+.mw-card--state-pressed {
+  --mw-card-border: color-mix(in srgb, var(--mw-color-border, #141414) 70%, transparent);
+}
+
+.mw-card:focus-visible,
+.mw-card--state-focus {
+  --mw-card-border: var(--mw-color-focus, #2f31fc);
+  outline: none;
+}
+
+.mw-card--disabled,
+.mw-card[data-disabled="true"],
+.mw-card[aria-disabled="true"] {
+  --mw-card-surface: var(--mw-color-surface-disabled, #f3f4f6);
+  --mw-card-border: var(--mw-color-border-disabled, #e5e7eb);
+  --mw-card-title: var(--mw-color-text-disabled, #737373);
+  --mw-card-body: var(--mw-color-text-disabled, #737373);
+
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.mw-theme--dark .mw-card {
+  --mw-card-surface: var(--mw-color-surface-elevated, #474747);
+  --mw-card-border: var(--mw-color-border-subtle, #474747);
+  --mw-card-title: var(--mw-color-text, #f9fafb);
+  --mw-card-body: color-mix(
+    in srgb,
+    var(--mw-color-text, #f9fafb) 65%,
+    var(--mw-color-background, #141414)
+  );
+}
+
+.mw-theme--dark .mw-card:hover,
+.mw-theme--dark .mw-card--state-hover {
+  --mw-card-border: color-mix(in srgb, var(--mw-color-border, #f9fafb) 70%, transparent);
+}
+
+.mw-theme--dark .mw-card:active,
+.mw-theme--dark .mw-card--state-pressed {
+  --mw-card-surface: var(--mw-color-surface-subtle, #2e2e2e);
+  --mw-card-border: color-mix(in srgb, var(--mw-color-border, #f9fafb) 70%, transparent);
+}
+
+.mw-theme--dark .mw-card:focus-visible,
+.mw-theme--dark .mw-card--state-focus {
+  --mw-card-border: var(--mw-color-focus, #5859fc);
+}
+
+.mw-theme--dark .mw-card--disabled,
+.mw-theme--dark .mw-card[data-disabled="true"],
+.mw-theme--dark .mw-card[aria-disabled="true"] {
+  --mw-card-surface: var(--mw-color-surface-disabled, #000000);
+  --mw-card-border: var(--mw-color-border-disabled, #474747);
+  --mw-card-title: var(--mw-color-text-disabled, #595959);
+  --mw-card-body: var(--mw-color-text-disabled, #595959);
+}