tessl/npm-tss-react

Type safe CSS-in-JS API heavily inspired by react-jss

—

Pending

Overview

Eval results

Files

DSFR Integration

Name: tessl/npm-tss-react
Author: tessl

DSFR (Système de Design de l'État français) integration provides pre-configured TSS instances with French Government Design System context and dark mode detection capabilities.

Capabilities

DSFR TSS Instance

Pre-configured TSS instance with DSFR context including dark mode detection from @codegouvfr/react-dsfr.

import { tss } from "tss-react/dsfr";

/**
 * Pre-configured TSS instance with DSFR context
 * Context includes: { isDark: boolean }
 */
const tss: Tss<{ isDark: boolean }, {}, never, {}, never>;

Usage Example:

import { tss } from "tss-react/dsfr";

const useStyles = tss.create(({ isDark }) => ({
  container: {
    backgroundColor: isDark ? "#1e1e1e" : "#ffffff",
    color: isDark ? "#ffffff" : "#000000",
    padding: 16
  },
  button: {
    backgroundColor: isDark ? "#0a76f6" : "#000091",
    color: "#ffffff",
    border: "none",
    padding: "8px 16px",
    borderRadius: 4
  }
}));

function DSFRComponent() {
  const { classes } = useStyles();
  return (
    <div className={classes.container}>
      <button className={classes.button}>DSFR Button</button>
    </div>
  );
}

DSFR UseStyles Hook

Default useStyles hook from the DSFR TSS instance.

/**
 * Default useStyles hook with DSFR context
 * Equivalent to tss.create({})
 */
const useStyles: UseStyles<{ isDark: boolean }, {}, string, {}>;

Implementation Details

The DSFR integration is built using the useIsDark hook from @codegouvfr/react-dsfr:

// Internal implementation (for reference)
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
import { createTss } from "tss-react";

const { tss } = createTss({
  useContext: function useDsfrContext() {
    const { isDark } = useIsDark();
    return { isDark };
  }
});

Requirements

To use DSFR integration, you must install the required peer dependency:

npm install @codegouvfr/react-dsfr

Context Properties

isDark

interface DsfrContext {
  /** 
   * Boolean indicating if dark mode is currently active
   * Automatically detected from DSFR theme context
   */
  isDark: boolean;
}

Usage Patterns

Theme-Aware Components

import { tss } from "tss-react/dsfr";

const useStyles = tss
  .withName("ThemeAwareCard")
  .create(({ isDark }) => ({
    card: {
      backgroundColor: isDark ? "#2a2a2a" : "#f6f6f6",
      border: `1px solid ${isDark ? "#444" : "#ddd"}`,
      borderRadius: 8,
      padding: 20,
      boxShadow: isDark 
        ? "0 2px 8px rgba(0,0,0,0.3)" 
        : "0 2px 8px rgba(0,0,0,0.1)"
    },
    title: {
      color: isDark ? "#ffffff" : "#161616",
      fontSize: 18,
      fontWeight: 700,
      marginBottom: 12
    },
    content: {
      color: isDark ? "#e0e0e0" : "#3a3a3a",
      lineHeight: 1.5
    }
  }));

DSFR Component Library Integration

import { tss } from "tss-react/dsfr";

const useStyles = tss.create(({ isDark }) => ({
  dsfrButton: {
    // Base DSFR button styles
    fontFamily: "Marianne, arial, sans-serif",
    fontWeight: 500,
    fontSize: "1rem",
    lineHeight: "1.5rem",
    minHeight: "2.5rem",
    padding: "0.5rem 1rem",
    border: "none",
    borderRadius: "0.25rem",
    cursor: "pointer",
    
    // Theme-aware colors
    backgroundColor: isDark ? "#0a76f6" : "#000091",
    color: "#ffffff",
    
    "&:hover": {
      backgroundColor: isDark ? "#1f8aff" : "#1212ff"
    },
    
    "&:focus": {
      outline: `2px solid ${isDark ? "#8585f6" : "#0063cb"}`,
      outlineOffset: "2px"
    }
  }
}));