Personalización

Cada sitio carga ds-uikit.css y después su theme.css. El tema solo cambia colores y tipografías. Espacios, radios, sombras y tamaños son iguales en toda la familia Dreamsign.

Cómo funciona

1. El kit trae sus valores por defecto (los de Dreamsign) en la capa ds.tokens.
2. El theme.css va sin capa y redefine en :root las variables que quieras cambiar.
3. Los componentes leen esas variables, así que cambian solos.

theme.css

:root {
  --ds-color-primary: #0f766e;
  --ds-color-primary-hover: #115e59;
  --ds-font-family-base: "DM Sans", system-ui, sans-serif;
}

El tema solo define colores sólidos. Las transparencias (fondos suaves, el hover del botón ghost) se calculan en el kit con color-mix().

Tema de prueba

theme-demo.css cambia primary, secondary, marca, neutros y fuentes. Usa el selector Tema para comparar con Dreamsign.

MóvilTabletEscritorioCompleto

HTML

<button type="button" class="btn btn--primary">Primary</button>
<button type="button" class="btn btn--secondary">Secondary</button>
<button type="button" class="btn btn--success">Success</button>
<button type="button" class="btn btn--danger">Danger</button>
<button type="button" class="btn btn--warning">Warning</button>
<button type="button" class="btn btn--info">Info</button>
<button type="button" class="btn">Neutro</button>

React

export default function BotonVariantes() {
  return (
    <>
      <button type="button" className="btn btn--primary">Primary</button>
      <button type="button" className="btn btn--secondary">Secondary</button>
      <button type="button" className="btn btn--success">Success</button>
      <button type="button" className="btn btn--danger">Danger</button>
      <button type="button" className="btn btn--warning">Warning</button>
      <button type="button" className="btn btn--info">Info</button>
      <button type="button" className="btn">Neutro</button>
    </>
  );
}

themes/theme-demo.css

/*
 * Tema de prueba para dsUIKit.
 * Cambia primary, secondary, marca, neutros y fuentes. El resto de las
 * variables (feedback) mantiene los valores por defecto del kit.
 */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:wght@600;700&display=swap");

:root {
  --ds-color-primary: #0f766e;
  --ds-color-primary-hover: #115e59;
  --ds-color-primary-contrast: #fff;
  --ds-color-secondary: #fb923c;
  --ds-color-secondary-hover: #ea580c;
  --ds-color-secondary-contrast: #1c1917;

  --ds-color-brand-start: #e11d48;
  --ds-color-brand-end: #7c3aed;

  --ds-color-text: #1c1917;
  --ds-color-text-muted: #57534e;
  --ds-color-body-bg: #fafaf9;
  --ds-color-surface: #fff;
  --ds-color-border: #e7e5e4;

  --ds-font-family-base: "DM Sans", system-ui, sans-serif;
  --ds-font-family-heading: "Fraunces", Georgia, serif;
}

Crear un tema

1. Copia theme-dreamsign.css (está en Descargas): trae todas las variables públicas.
2. Cambia los valores. Las que no cambies se pueden borrar.
3. Carga la fuente en el mismo archivo con @import, o con <link> en el HTML (es más rápido y permite preconnect).

Variables públicas

Color

Variable	Valor por defecto	Uso
--ds-color-primary	#007cbd	Color de interacción: botones, enlaces y foco.
--ds-color-primary-hover	#025b8b	Primary en hover y estado activo.
--ds-color-primary-contrast	#fff	Texto sobre primary.
--ds-color-secondary	#ffc107	Color secundario de acciones.
--ds-color-secondary-hover	#c99807	Secondary en hover y estado activo.
--ds-color-secondary-contrast	#000	Texto sobre secondary.
--ds-color-brand-start	#932771	Inicio del degradado de marca.
--ds-color-brand-end	#662d91	Fin del degradado de marca.
--ds-gradient-brand	linear-gradient(41deg, var(--ds-color-brand-start), var(--ds-color-brand-end))	Degradado de identidad (heros, cabeceras, firmas).
--ds-color-success	#529c4e	Éxito: color base.
--ds-color-success-bg	#eaffe9	Éxito: fondo suave.
--ds-color-success-border	#96cf93	Éxito: borde.
--ds-color-success-strong	#3a7d3a	Éxito: tono fuerte (hover, texto sobre fondo suave).
--ds-color-success-contrast	#fff	Texto sobre success.
--ds-color-danger	#bb4848	Error: color base.
--ds-color-danger-bg	#ffe9e9	Error: fondo suave.
--ds-color-danger-border	#f0baba	Error: borde.
--ds-color-danger-strong	#920a0a	Error: tono fuerte.
--ds-color-danger-contrast	#fff	Texto sobre danger.
--ds-color-warning	#ffc107	Advertencia: color base.
--ds-color-warning-bg	#fffbe9	Advertencia: fondo suave.
--ds-color-warning-border	#eedd91	Advertencia: borde.
--ds-color-warning-strong	#c99807	Advertencia: tono fuerte.
--ds-color-warning-contrast	#000	Texto sobre warning.
--ds-color-info	#95cfe6	Información: color base.
--ds-color-info-bg	#dff6ff	Información: fondo suave.
--ds-color-info-border	#d6eafd	Información: borde.
--ds-color-info-strong	#4c85b6	Información: tono fuerte.
--ds-color-info-contrast	#000	Texto sobre info.
--ds-color-text	#1e1e1e	Texto principal.
--ds-color-text-muted	#6d6d6d	Texto secundario (ayudas, fechas, notas).
--ds-color-body-bg	#fff	Fondo de la página.
--ds-color-surface	#fff	Fondo de cards, menús y modales.
--ds-color-border	#e5e7eb	Bordes y separadores.

Tipografía

Variable	Valor por defecto	Uso
--ds-font-family-base	system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif	Fuente del texto.
--ds-font-family-heading	var(--ds-font-family-base)	Fuente de los títulos.
--ds-font-size-xs	clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem)	12–13 px
--ds-font-size-sm	clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem)	14–15 px
--ds-font-size-base	1rem	16 px
--ds-font-size-lg	clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem)	18–20 px
--ds-font-size-xl	clamp(1.5rem, 1.3rem + 1vw, 2rem)	24–32 px
--ds-font-size-2xl	clamp(2rem, 1.7rem + 1.5vw, 3rem)	32–48 px
--ds-font-size-3xl	clamp(2.5rem, 2rem + 2vw, 4rem)	40–64 px
--ds-font-weight-regular	400	Peso normal.
--ds-font-weight-medium	500	Peso medio.
--ds-font-weight-semibold	600	Peso seminegrita.
--ds-font-weight-bold	700	Peso negrita (títulos).
--ds-line-height-tight	1.1	Interlineado de títulos.
--ds-line-height-base	1.5	Interlineado general.
--ds-line-height-relaxed	1.7	Interlineado de párrafos.

Variables internas

Son fijas en toda la familia y el tema no las cambia.

Ver variables internas

Variable	Valor por defecto	Uso
--ds-radius-sm	6px	6 px
--ds-radius-md	0.5rem	8 px
--ds-radius-lg	1rem	16 px (cards)
--ds-radius-xl	2rem	32 px
--ds-radius-full	999px	Píldora (botones e inputs).
--ds-space-1	0.25rem	4 px
--ds-space-2	0.5rem	8 px
--ds-space-3	0.75rem	12 px
--ds-space-4	1rem	16 px
--ds-space-5	1.5rem	24 px
--ds-space-6	2rem	32 px
--ds-space-7	3rem	48 px
--ds-space-8	4rem	64 px
--ds-shadow-sm	0 0.5em 1em -0.125em rgb(10 10 10 / 0.1), 0 0 0 1px rgb(10 10 10 / 0.02)	Cards.
--ds-shadow-md	0 0.5rem 1rem rgb(0 0 0 / 0.1)	Menús desplegables.
--ds-shadow-lg	0 1rem 3rem rgb(0 0 0 / 0.175)	Modales y elementos flotantes.
--ds-z-dropdown	1000
--ds-z-sticky	1020
--ds-z-fixed	1030
--ds-z-overlay	1040
--ds-z-modal	1050
--ds-z-popover	1070
--ds-z-toast	1090
--ds-z-loader	1100
--ds-duration-fast	0.2s	Hover, foco y cambios de color.
--ds-duration-base	0.35s	Paneles y desplazamientos.
--ds-duration-slow	0.5s	Entradas y salidas grandes.
--ds-easing	ease

Variables de componente

Cada componente expone variables con el formato --ds-{componente}-{propiedad}, como --ds-btn-bg. Sirven para ajustes puntuales en el CSS de un sitio, sin tocar el kit:

sitio.css

.hero .btn {
  --ds-btn-padding-x: 1.5rem;
}

La lista de cada componente está en su página, por ejemplo en Botón.