@mantis-core/styles 0.1.0

package/scss/rich-text-preview.scss

@@ -0,0 +1,287 @@
+.rich-text-preview {
+  --rtf-font-size: 1rem;
+  --rtf-line-height: 1.75;
+
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  font-size: var(--rtf-font-size);
+  line-height: var(--rtf-line-height);
+  overflow-wrap: anywhere;
+  word-break: normal;
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  p {
+    margin: 0 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--primary);
+    font-family: var(--font-display);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+    margin: 1.5em 0 0.6em;
+    text-wrap: balance;
+  }
+
+  h1 {
+    font-size: clamp(1.75rem, 2.5vw, 2.35rem);
+  }
+
+  h2 {
+    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
+  }
+
+  h3 {
+    font-size: clamp(1.3rem, 1.7vw, 1.55rem);
+  }
+
+  h4 {
+    font-size: clamp(1.12rem, 1.3vw, 1.28rem);
+  }
+
+  h5 {
+    font-size: 1.05rem;
+  }
+
+  h6 {
+    font-size: 0.95rem;
+  }
+
+  a {
+    color: var(--accent);
+    font-weight: 600;
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 3px;
+  }
+
+  a:hover {
+    color: color-mix(in oklch, var(--accent), black 14%);
+  }
+
+  ul:not(.todo-list),
+  ol:not(.todo-list) {
+    list-style-position: outside;
+    margin: 0 0 1rem;
+    padding-inline-start: 1.5rem;
+  }
+
+  ul:not(.todo-list) {
+    list-style-type: disc;
+  }
+
+  ul ul:not(.todo-list) {
+    list-style-type: circle;
+  }
+
+  ul ul ul:not(.todo-list),
+  ul ul ul ul:not(.todo-list) {
+    list-style-type: square;
+  }
+
+  ol:not(.todo-list) {
+    list-style-type: decimal;
+  }
+
+  ol ol:not(.todo-list) {
+    list-style-type: lower-latin;
+  }
+
+  ol ol ol:not(.todo-list) {
+    list-style-type: lower-roman;
+  }
+
+  li {
+    display: list-item;
+    margin: 0.35rem 0;
+  }
+
+  li::marker {
+    color: currentColor;
+  }
+
+  ul ul,
+  ul ol,
+  ol ol,
+  ol ul {
+    margin-bottom: 0.35rem;
+    margin-top: 0.35rem;
+  }
+
+  blockquote {
+    background-color: color-mix(in oklch, var(--accent), white 90%);
+    border-left: 4px solid color-mix(in oklch, var(--accent), black 10%);
+    border-radius: 0.75rem;
+    color: color-mix(in oklch, var(--foreground), black 6%);
+    margin: 1.25rem 0;
+    padding: 0.85rem 1rem;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid color-mix(in oklch, var(--border), var(--foreground) 10%);
+    margin: 1.6rem 0;
+  }
+
+  figure {
+    margin: 1.25rem 0;
+  }
+
+  img {
+    border-radius: 0.9rem;
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+
+  figure.table {
+    margin: 1.4rem 0;
+    overflow-x: auto;
+  }
+
+  table {
+    border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 6%);
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 0.95em;
+    margin: 0;
+    width: 100%;
+  }
+
+  th,
+  td {
+    border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 6%);
+    padding: 0.55rem 0.7rem;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    background-color: color-mix(in oklch, var(--muted), white 45%);
+    color: color-mix(in oklch, var(--foreground), black 8%);
+    font-weight: 700;
+  }
+
+  tbody tr:nth-child(even) td {
+    background-color: color-mix(in oklch, var(--muted), white 72%);
+  }
+
+  pre {
+    background-color: color-mix(in oklch, var(--muted), black 8%);
+    border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 8%);
+    border-radius: 0.8rem;
+    margin: 1.25rem 0;
+    overflow-x: auto;
+    padding: 0.85rem 1rem;
+  }
+
+  code {
+    background-color: color-mix(in oklch, var(--muted), white 40%);
+    border-radius: 0.35rem;
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace;
+    font-size: 0.9em;
+    padding: 0.12rem 0.35rem;
+  }
+
+  pre code {
+    background-color: transparent;
+    border-radius: 0;
+    font-size: 0.9rem;
+    padding: 0;
+  }
+
+  .text-tiny {
+    font-size: 0.75em;
+  }
+
+  .text-small {
+    font-size: 0.88em;
+  }
+
+  .text-big {
+    font-size: 1.22em;
+  }
+
+  .text-huge {
+    font-size: 1.58em;
+  }
+
+  .ck-text-left {
+    text-align: left;
+  }
+
+  .ck-text-center {
+    text-align: center;
+  }
+
+  .ck-text-right {
+    text-align: right;
+  }
+
+  .ck-text-justify {
+    text-align: justify;
+  }
+
+  .image-style-side {
+    float: right;
+    margin: 0 0 1rem 1rem;
+    max-width: min(50%, 20rem);
+  }
+}
+
+.rich-text-preview--sm {
+  --rtf-font-size: 0.95rem;
+  --rtf-line-height: 1.65;
+}
+
+.rich-text-preview--md {
+  --rtf-font-size: 1rem;
+  --rtf-line-height: 1.75;
+}
+
+.rich-text-preview--lg {
+  --rtf-font-size: 1.06rem;
+  --rtf-line-height: 1.78;
+}
+
+@media (max-width: 768px) {
+  .rich-text-preview {
+    figure.table {
+      margin-left: -0.1rem;
+      margin-right: -0.1rem;
+      padding-bottom: 0.25rem;
+    }
+
+    table {
+      font-size: 0.9em;
+      min-width: 36rem;
+    }
+
+    .image-style-side {
+      float: none;
+      margin: 1rem 0;
+      max-width: 100%;
+    }
+  }
+}

package/scss/select-button.scss

@@ -0,0 +1,110 @@
+// ===================================
+// SELECT BUTTON (ToggleInlineButton)
+// ===================================
+// Las variantes se generan a partir de los mismos tokens CSS
+// que usa el resto del design system (globals.scss).
+// Para un rebranding basta con cambiar las variables --primary,
+// --secondary, etc. en globals.scss; este archivo no requiere tocase.
+//
+// Clases de PrimeReact relevantes:
+//   .p-selectbutton            → contenedor raíz
+//   .p-button                  → cada opción
+//   .p-highlight               → opción seleccionada
+//   .p-focus                   → opción con foco
+//   .p-disabled                → opción deshabilitada
+// ===================================
+@use "sass:map";
+
+// ===================================
+// MIXIN PRINCIPAL
+// ===================================
+
+// Genera los estilos para una variante del SelectButton.
+// Los botones sin seleccionar tienen estilo outlined;
+// los seleccionados (.p-highlight) tienen estilo sólido.
+@mixin selectbutton-variant($color, $text-color: #ffffff) {
+  // ---------- Opción NO seleccionada ----------
+  .p-button {
+    background-color: transparent;
+    border-color: var(#{$color});
+    color: var(#{$color});
+    transition:
+      background-color 0.2s,
+      border-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
+
+    &:not(.p-disabled):not(.p-highlight):hover {
+      background-color: color-mix(in oklch, var(#{$color}), transparent 88%);
+      border-color: color-mix(in oklch, var(#{$color}), black 10%);
+      color: color-mix(in oklch, var(#{$color}), black 10%);
+    }
+
+    // ---------- Opción SELECCIONADA ----------
+    &.p-highlight {
+      background-color: var(#{$color});
+      border-color: var(#{$color});
+      color: $text-color;
+
+      &:not(.p-disabled):hover {
+        background-color: color-mix(in oklch, var(#{$color}), black 10%);
+        border-color: color-mix(in oklch, var(#{$color}), black 10%);
+      }
+    }
+
+    // ---------- Foco ----------
+    &.p-focus {
+      box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(#{$color}) 40%, transparent);
+    }
+
+    // ---------- Deshabilitado ----------
+    &.p-disabled {
+      opacity: 0.6;
+    }
+  }
+}
+
+// ===================================
+// VARIANTES (mismo mapa que buttons.scss)
+// ===================================
+
+$selectbutton-variants: (
+  primary: (
+    color: --primary,
+    text: var(--primary-foreground),
+  ),
+  secondary: (
+    color: --secondary,
+    text: var(--secondary-foreground),
+  ),
+  accent: (
+    color: --accent,
+    text: var(--accent-foreground),
+  ),
+  success: (
+    color: --success,
+    text: var(--success-foreground),
+  ),
+  warning: (
+    color: --warning,
+    text: var(--warning-foreground),
+  ),
+  error: (
+    color: --error,
+    text: var(--error-foreground),
+  ),
+  info: (
+    color: --info,
+    text: var(--info-foreground),
+  ),
+  "gray": (
+    color: --bluegray-500,
+    text: #ffffff,
+  ),
+);
+
+@each $name, $cfg in $selectbutton-variants {
+  .p-selectbutton-#{$name} {
+    @include selectbutton-variant(map.get($cfg, "color"), map.get($cfg, "text"));
+  }
+}

package/scss/select.scss

@@ -0,0 +1,177 @@
+@use "sass:map";
+
+// ===================================
+// SELECT (react-select wrapper)
+// ===================================
+// Este archivo centraliza el branding del componente Select.
+// Para rebranding basta con cambiar los tokens en globals.scss.
+
+$select-variants: (
+  "primary": (
+    color: --primary,
+    text: --primary-foreground,
+  ),
+  "secondary": (
+    color: --secondary,
+    text: --secondary-foreground,
+  ),
+  "accent": (
+    color: --accent,
+    text: --accent-foreground,
+  ),
+  "success": (
+    color: --success,
+    text: --success-foreground,
+  ),
+  "warning": (
+    color: --warning,
+    text: --warning-foreground,
+  ),
+  "error": (
+    color: --error,
+    text: --error-foreground,
+  ),
+  "info": (
+    color: --info,
+    text: --info-foreground,
+  ),
+  "gray": (
+    color: --bluegray-500,
+    text: --primary-foreground,
+  ),
+  "danger": (
+    color: --error,
+    text: --error-foreground,
+  ),
+);
+
+.select-input {
+  --select-accent: var(--primary);
+  --select-accent-foreground: var(--primary-foreground);
+  --select-border: var(--border);
+  --select-surface: var(--card);
+  --select-muted: var(--muted-foreground);
+  --select-text: var(--foreground);
+}
+
+@each $name, $cfg in $select-variants {
+  .select-input.select-variant-#{$name} {
+    --select-accent: var(#{map.get($cfg, "color")});
+    --select-accent-foreground: var(#{map.get($cfg, "text")});
+  }
+}
+
+.select-input .react-select__control {
+  min-height: 48px;
+  border-radius: 6px;
+  border-color: var(--select-border);
+  background-color: var(--input);
+  box-shadow: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+
+  &:hover {
+    border-color: color-mix(in oklch, var(--select-accent), black 12%);
+  }
+}
+
+.select-input .react-select__control--is-focused {
+  border-color: var(--select-accent);
+  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--select-accent) 35%, transparent);
+}
+
+.select-input .react-select__value-container,
+.select-input .react-select__indicators {
+  min-height: 48px;
+}
+
+.select-input .react-select__placeholder {
+  color: var(--select-muted);
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.select-input .react-select__single-value {
+  color: var(--select-text);
+}
+
+.select-input .react-select__indicator {
+  color: color-mix(in oklch, var(--select-accent), black 20%);
+}
+
+.select-input .react-select__indicator:hover {
+  color: color-mix(in oklch, var(--select-accent), black 30%);
+}
+
+.select-input .react-select__indicator-separator {
+  background-color: color-mix(in oklch, var(--select-border), black 10%);
+}
+
+.select-input .react-select__control--is-disabled {
+  background-color: color-mix(in oklch, var(--muted), white 15%);
+  border-color: color-mix(in oklch, var(--select-border), black 5%);
+  opacity: 0.8;
+  cursor: not-allowed;
+}
+
+.select-input.select-invalid .react-select__control,
+.select-input.select-invalid .react-select__control:hover {
+  border-color: var(--error);
+}
+
+.select-input.select-invalid .react-select__control--is-focused {
+  border-color: var(--error);
+  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--error) 35%, transparent);
+}
+
+.react-select__menu,
+.react-select__menu-portal .react-select__menu {
+  border: 1px solid color-mix(in oklch, var(--select-accent, var(--primary)), black 8%);
+  border-radius: 12px;
+  background-color: var(--select-surface, var(--card));
+  box-shadow:
+    0 10px 24px color-mix(in srgb, var(--select-accent, var(--primary)) 14%, transparent),
+    0 2px 8px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.react-select__menu-list,
+.react-select__menu-portal .react-select__menu-list {
+  padding: 0.35rem;
+}
+
+.react-select__option,
+.react-select__menu-portal .react-select__option {
+  border-radius: 8px;
+  margin-bottom: 2px;
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease;
+}
+
+.react-select__option--is-focused,
+.react-select__menu-portal .react-select__option--is-focused {
+  background-color: color-mix(in oklch, var(--select-accent, var(--primary)), transparent 88%);
+  color: color-mix(in oklch, var(--select-accent, var(--primary)), black 20%);
+}
+
+.react-select__option--is-selected,
+.react-select__menu-portal .react-select__option--is-selected {
+  background-color: var(--select-accent, var(--primary));
+  color: var(--select-accent-foreground, var(--primary-foreground));
+}
+
+.react-select__option--is-selected.react-select__option--is-focused,
+.react-select__menu-portal .react-select__option--is-selected.react-select__option--is-focused {
+  background-color: color-mix(in oklch, var(--select-accent, var(--primary)), black 12%);
+}
+
+.react-select__no-options-message,
+.react-select__loading-message,
+.react-select__menu-portal .react-select__no-options-message,
+.react-select__menu-portal .react-select__loading-message {
+  color: var(--select-muted, var(--muted-foreground));
+}