Claro DS Tailwind Theme (light/dark)

claro-dark-theme.css

.dark {
  /* Generalmente en dark mode solo se modificaran los valores para los token de colores, lo iportante esque conserven exactamente el mismo nombre las paletas de colores definidades en :root
   */
  --color-claro-50: #470c08;
  --color-claro-100: #82211a;
  --color-claro-200: #9d2017;
  --color-claro-300: #be2217;
  --color-claro-400: #da291c;
  --color-claro-500: #f54b3e;
  --color-claro-600: #fd766c;
  --color-claro-700: #ffa8a2;
  --color-claro-800: #ffccc8;
  --color-claro-900: #ffe3e1;
  --color-claro-950: #fef3f2;

  --color-neutral-contrast: #fff;
  --color-background: #282727;
  --color-foreground: #ffffff;
  /*
  aqui se modifican los valores de los tokens de colores para dark mode referentes al background y foreground
  --background: #282727e5;
  --foreground: #ffffffe5;
  */
}

claro-global.css

@import "tailwindcss";
@import "./claro-root-theme.css";
@import "./claro-dark-theme.css";
@variant dark (&:where(.dark, .dark *));

@theme inline {
  /*
    IMPORTANTE: Los nombres de los archivos debe ser tal cual los que se ven en la zona de @imports de lo contrario no funcionara, estos pueden cambiar pero siempre debe hacer match el nombre del archivo con el que aparece en la importacion.

    IMPORTANTE: Se debe conservar directiva: lo que se define con el "@" para el correcto funcionamiento, esta debe ser la estructua de los archivos

    ___

    aqui un poco de la documentacion importante de tailwind con respecto a la customizacion de temas
    https://tailwindcss.com/docs/theme#:~:text=variable%20namespaces%20documentation.-,Theme%20variable%20namespaces,-Theme%20variables%20are

    https://tailwindcss.com/docs/theme#default-theme-variable-reference:~:text=xl%22)%3B-,Default%20theme%20variable%20reference,-For%20reference%2C%20here%27s

    copiar todo el link para que ir a la zona referenciada de la pagina
  */

  /* colors (background, text, border, etc...) */
  /* IMPORTANTE: el prefijo para colores es --color */
  /* SUGERENCIA: se plantea una modificacion en como se define el nombre del token semantico con respecto a colores
    originalmente era asi: --color-bg-primary-default
    y ahora es: --color-primary-bg-default
    con esto viene a resolver algo que nos pasaba al momento de usar esto en desarrollo
    ej: antes se tenia bg-bg-primary-default es bg-bg es redundante y tiene a confundir, mientras que usando la sugerencia planteada quedaria asi: bg-primary-bg-default
    donde el primer "bg" le dice a tailwind donde quiero aplicar el color (bg --> background), el "primary" hace referencia a la paleta del color, el siguiente "bg" es la parte semantica, que indica de donde proviene el color y por ultimo el "default" seria su nivel de intensidad (default, soft, strong, subtle)
    aplicando la sugerencia nos ayudaria a nosotros y a futuros equipos de trabajo a enteder mejor la aplicacion de colores
  */
  --color-primary-bg-default: var(--color-claro-400);
  --color-primary-bg-soft: var(--color-claro-200);
  --color-primary-bg-strong: var(--color-claro-950);
  --color-primary-bg-subtle: var(--color-claro-700);

  --color-primary-text-default: var(--color-claro-400);
  --color-primary-text-logo: var(--color-claro-500);
  --color-primary-text-soft: var(--color-claro-700);
  --color-primary-text-strong: var(--color-claro-100);
  --color-primary-text-subtle: var(--color-claro-900);

  --color-primary-border-default: var(--color-claro-400);
  --color-primary-border-soft: var(--color-claro-700);
  --color-primary-border-strong: var(--color-claro-100);
  --color-primary-border-subtle: var(--color-claro-900);

  --color-primary-bg-action-hover: var(--color-claro-300);
  --color-primary-bg-action-pressed: var(--color-claro-200);

  --color-neutral-text-contrast: var(--color-neutral-contrast);
  --color-background: var(--color-background);
  --color-foreground: var(--color-foreground);

  /* breakpoints */
  --breakpoint-desktop: var(--breakpoint-desktop);

  /* shadows */
  /* IMPORTANTE: prefijo (namespace) para definir shadow es --shadow */
  --shadow-none: var(--shadow-none);
  --shadow-overlay-s: var(--shadow-overlay-small);
  --shadow-overlay-m: var(--shadow-overlay-medium);
  --shadow-overlay-l: var(--shadow-overlay-large);

  /* inset shadows */
  /* IMPORTANTE: prefijo (namespace) para definir shadow internas  es --inset-shadow */
  --shadow-inset-s: var(--shadow-inset-small);
  --shadow-inset-m: var(--shadow-inset-medium);
  --shadow-inset-l: var(--shadow-inset-large);

  /* drop shadows */
  /* IMPORTANTE: prefijo (namespace) para definir drop shadows es --drop-shadow */
  --drop-shadow-s: var(--shadow-drop-small);
  --drop-shadow-m: var(--shadow-drop-medium);
  --drop-shadow-l: var(--shadow-drop-large);

  /* text shadows */
  /* IMPORTANTE: prefijo (namespace) para definir text shadows es --text-shadow */
  --text-shadow-s: var(--shadow-text-small);
  --text-shadow-m: var(--shadow-text-medium);
  --text-shadow-l: var(--shadow-text-large);

  /* aspect ratio */
  /* IMPORTANTE: prefijo (namespace) para definir aspect ratio es --aspect */
  --aspect-4/3: var(--aspect-ratio-4-3);

  /* blur */
  /* IMPORTANTE: prefijo (namespace) para definir blur filter es --blur */
  --blur-dense: var(--blur-filter-3xl);
  --blur-light: var(--blur-filter);
  --blur-medium: var(--blur-filter-xl);
  --blur-thick: var(--blur-filter-2xl);
  --blur-thin: var(--blur-filter-md);

  /* font-weight */
  /* IMPORTANTE: prefijo (namespace) para definir el font weight es --font-weight */
  --font-weight-regular: var(--font-weight-regular);
  --font-weight-medium: var(--font-weight-medium);
  --font-weight-bold: var(--font-weight-bold);

  /* font-family */
  /* IMPORTANTE: prefijo (namespace) para definir el font family es --font */
  --font-family: var(--font-family);

  /* font-size y line height */
  /* IMPORTANTE: prefijo (namespace) para definir el font size es --text y si se agrega el --line-height ademas se le asignara el alto de linea especificamente al font-size apuntado, como se muestra acontinuacion
  */
  /* SUGERENCIA: aqui se puede apreciar como el token semantico esta siendo practicamente identica al token primitivo, porque se esta usando --text-12 que hace referencia a 12px que se recibe del primitivo, lo ideal es evitar esto y que el token semantico sea algo como --text-xs, porque a futuro ese --text-xs puede tener el valor 14px y no romperia la semantica, en cuanto a text-12 con un valor de 14px ya no seria semantico e incluso contraproducente, esto viene observado del uso de tamaño de fuentes en el figma  */
  --text-*: initial; /* esto es para que tailwind no genere las utilidades de font-size por defecto (solo crearia estas que se estan declarando mas abajo) */
  --text-12: var(--font-size-12);
  --text-12--line-height: var(--line-height-14);
  --text-14: var(--font-size-14);
  --text-14--line-height: var(--line-height-16);
  --text-24: var(--font-size-24);
  --text-24--line-height: var(--line-height-28);

  /* letter spacing */
  /* IMPORTANTE: prefijo (namespace) para definir letter spacing es --tracking */
  --tracking-none: var(--letter-spacing-none);

  /* radius */
  /* IMPORTANTE: prefijo (namespace) para definir border radius es --radius */
  --radius-*: initial; /* esto es para que tailwind no genere las utilidades de border-radius por defecto (solo crearia estas que se estan declarando mas abajo) */
  --radius-button-default: var(--border-radius-full);
  --radius-button-small: var(--border-radius-full);
  --radius-small: var(--border-radius-8);
  --radius-medium: var(--border-radius-12);
  --radius-large: var(--border-radius-16);

  /* spacing base */
  /* IMPORTANTE: prefijo (namespace segun tailwind) para definir cualquier spacing es --spacing, esto lo dejara disponible para, height,   width, padding, margin, gap, etc...
  por eso disnticion semantica para agrupar cuales spacing se usaran para gap, paading y segun lo que sea necesario
  */
  --spacing: var(--spacing-base);

  /* gap */
  --spacing-gap-tile: var(--spacing-12);
  --spacing-gap-grid: var(--spacing-16);
  --spacing-gap-block: var(--spacing-24);

  /* padding */
  --spacing-padding-compact: var(--spacing-8);
  --spacing-padding-base: var(--spacing-12);
  --spacing-padding-box: var(--spacing-16);

  /* OBS GENERALES:
    dentro de lo posible usar la misma nomenclarura en el nombre de los semanticos
    ej: los shadow estan de la siguiente manera, shadow-overlay-s, -m, -l y los radius (algunos) son radius-small, -medium, -large
    lo ideal es que sean de una forma todos, para mantener todo lo mas homogeneo posible
  */
}

claro-root-theme.css

:root {
  /* COLORES */
  /* (seguir formato de 50 hasta 950) */
  --color-claro-50: #fef3f2;
  --color-claro-100: #ffe3e1;
  --color-claro-200: #ffccc8;
  --color-claro-300: #ffa8a2;
  --color-claro-400: #fd766c;
  --color-claro-500: #f54b3e;
  --color-claro-600: #da291c;
  --color-claro-700: #be2217;
  --color-claro-800: #9d2017;
  --color-claro-900: #82211a;
  --color-claro-950: #470c08;

  --color-neutral-contrast: #000;
  --color-white: #fff;
  --color-back: #000;
  --color-background: #ffffff;
  --color-foreground: #565656;
  /* con respecto a los colores, seria bueno definir un color para el background de toda la app, como tambien un color para el texto
    como referencia esto se usa mucho de esta forma
    --background: #ffffffe5;
    --foreground: #282727e5 --> color para texto
    y de esta forma poder modificarlos directamente en el tema dark, ver en tema dark
  */

  /* REDONDEADOS */
  /* pueden ser tratados como px, se pueden crear tantos como sean necesarios */
  --border-radius-none: 0px;
  --border-radius-8: 8px;
  --border-radius-12: 12px;
  --border-radius-16: 16px;
  --border-radius-full: 9999px;

  /* SPACING
    Proporcionar un spacing base, esto para que se generen las utilizades de tailwind referentes a spacing con respecto a la base
    proporcionada
    IMPORTANTE: spacing "base" debe ser tratado en rem
   */
  --spacing-base: 0.25rem; /* --> se define el spacing base*/
  /* ¿Que hace esto?
    Define la unidad mas pequeña disponible para las utilidades de spacing en TAILWIND (padding, margin, gap, height, width)
    Otra variable importante es el font-size del browser, este valor no se debe manipular y por defecto es de 16px (es un estandar)
    ej: p-1 (padding 1) --> internamente se hace un calculo con la siguiente formula: (N * --spacing-base * --font-size), donde N es el valor que se recibe desde la utilidad de tailwind (p-N) para este caso N = 1 (p-1)
    quedando de la siguiente forma: (1 * 0.25rem * 16px) = 4px, para p-2 seria (2 * 0.25rem * 16px) = 8px y asi sucesivamente
    Los valores de p-N (token de tailwind para padding), m-N (token de tailwind para margin) se utilizan para hacer el calculo antes mencionado, donde N es cualquier valor que se desee, tailwind se encarga de hacer el calculo y proporcionar el resultado, por eso la importancia de definir una base
   */

  /* SPACING ESPECIFICOS Y CUSTOM */
  /* se pueden crear tantos spacing especificos o custom como se desee
    estos pueden ser definidos en px para una mayor comodidad, y los nombres pueden hacer referencia a los valores en px, por ejemplo
    --spacing-16: 16px; o algo mas descriptivo como --spacing-large: 42px; etc...
    y se puede ser tan especifico en valor como sea necesario, solo tener en cuanta que estos son valores especificos y no seran parte de las utilidades que genera tailwind, seran utilizados como referencias para los token semanticos
    ej: token primitivo: --spacing-16: 16px;
        token semantico: --spacing-gap-large: var(--spacing-16);
        utilidad de tailwind generada: gap-large
  */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-custom: 3.234px;
  /* IMPORTANTE: los valores negativos son generados automaticamente por tailwind, solo definiendo su valor positivo
    ej: el token semantico --spacing-custom: var(--spacing-16) que usa el token primitivo del ejemplo, generará el valor 16px y -16px de forma automatica, quedando disponible para el uso
  */

  /* PESO DE LA FUENTE */
  /* definicion de peso de la fuente, sus valores se definen sin px o rem, solo el valor numerico y nombres descriptivos */
  --font-weight-regular: 400;
  --font-weight-light: 300;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* TAMAÑO DE LA FUENTE */
  /* definicion de tamaños de fuente, con nombres descriptivos o con respecto a su unidad en px */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-24: 24px;

  /* ALTO DE LA LINEA */
  /* definicion de alto de linea, con nombres descriptivos o con respecto a su unidad en px */
  --line-height-14: 14px;
  --line-height-16: 16px;
  --line-height-28: 28px;

  /* SEPARACION ENTRE LETRAS */
  /* definicion de separacion de caracteres con nombres descriptivos */
  --letter-spacing-none: 0em;

  /* SOMBRAS */
  /* defincion de estilos de sombras, con nombres descriptivos
    IMPORTANTE: siempre tratar de crear las sombras con un color por defecto
    se agregan ejemplos de las distintas formas de aplicar shadows, por si se llegan a utilizar, se pueden omitir las que no van al caso
  */
  --shadow-none: none;
  --shadow-overlay-small: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-overlay-medium:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-overlay-large:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* sombras internas */
  --shadow-inset-small: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-inset-medium: inset 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-inset-large:
    inset 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  /* sombras para contornos (utilises para svg, para que la sombra sigan su forma) */
  --shadow-drop-small: drop-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.05));
  --shadow-drop-medium: drop-shadow(
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05)
  );
  --shadow-drop-large: drop-shadow(
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04)
  );
  /* sombras para textos */
  --shadow-text-small: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-text-medium:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-text-large:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* FILTROS BLUR */
  /* Definicion de efectos de blur, con nombres descriptivos o con respecto a su unidad en px */
  --blur-filter: 8px;
  --blur-filter-md: 12px;
  --blur-filter-xl: 24px;
  --blur-filter-2xl: 40px;
  --blur-filter-3xl: 64px;

  /* ASPECT RATIO */
  /* defincion de aspect ratio, con nombres descriptivos */
  --aspect-ratio-4-3: 4 / 3;

  /* BREAKPOINTS */
  --breakpoint-desktop: 64rem; /* --> equivale a 1024px*/

  /* OBS GENERALES:
    lo ideal seria tratar de evitar el uso de px y usar rem en cuanto a font-size y spacing (a no ser de que sea muy custom)
  */
}

Los archivos claro-root-theme y claro-dark-theme, contemplan los primitivos y el claro-global serian los semánticos y que ya estaría generando los token que quedarían disponibles para tailwind.