StitchPress

Home / Docs / Designer skins

Designer skins

A skin sets the designer's colors, corner radii, spacing and font names. It never changes prices, orders, the design record or the Job Jacket. A skin is one small CSS file that only sets design tokens (CSS custom properties); it does not restyle components.

Choose a skin

  1. Go to StitchPress > Settings.
  2. Under Storefront, set Designer skin.
  3. Click Save Changes.

Two skins ship with StitchPress:

Skin Look
Default Light and neutral. Loaded on a fresh install and whenever the setting is empty or names a skin that does not exist.
Workshop Dark working surface with an amber accent, for dark themes. The stage behind the garment stays light, because garment photos are shot on white.

The setting is stored in the stp_skin option as the skin's file name without .css, so wp option update stp_skin workshop does the same from WP-CLI.

Skins and the Accent color setting

Accent color (StitchPress settings > Storefront) colors the buttons, selected swatches and focus rings in the designer. How it combines with a skin:

  • Default deliberately does not set an accent, so your Accent color applies.
  • Workshop sets its own amber accent. With Workshop selected, the Accent color setting has no effect.
  • Any custom skin that declares --stp-accent overrides the setting, because the skin loads after it. Leave --stp-accent and --stp-focus out of your skin if you want the setting to keep working.

What a skin can set

The full token table is in docs/SKIN-TOKENS.md in the plugin's source. In short, the tokens come in five groups:

  • Colors: accent (fill), text on the accent, accent used as text, body text and muted text, surfaces, borders, danger, success, notice, the top and tool bar ("chrome"), the canvas behind the garment, and the focus ring.
  • Radii: small, standard, large and card.
  • Spacing and sizes: gaps, swatch size, the touch target for drag handles, stage height and side drawer width.
  • Washes and shadows: tinted versions of the accent, success, danger, notice and chrome colors, white veils and slate shadows.
  • Fonts: the UI font and a display font, as family names only.

Rules a skin must follow:

  • Only redeclare tokens, on the selector .stp-capture, .stp-capture-launcher, .stp-cart-edit. No other selectors.
  • Name fonts your theme already loads. Never add @font-face, a font file or a font CDN link. A family the theme does not load falls back down its stack.
  • Keep the drag-handle touch target (--stp-handle-hit) at 44px or more.
  • Keep every text color at a contrast ratio of 4.5:1 or more against its background. If your accent is a light fill color such as gold, set --stp-accent-ink to a darker shade for text.
  • When you change the accent, chrome or success color, also set the matching washes (same color, same transparency), or the default blue, slate or green shows through.

Write a custom skin

Do not edit the files in the plugin's skins/ folder: a plugin update replaces them. Keep your skin in your theme or in a small plugin and point StitchPress at it with the stp_skin_url filter.

  1. Copy skins/default.css from the plugin as your starting point. It lists every token with its default value.
  2. Save it in your child theme as stitchpress-skin.css and change the values you want.
  3. Add this to the child theme's functions.php:
add_filter( 'stp_skin_url', function ( $url, $key ) {
    $file = get_stylesheet_directory() . '/stitchpress-skin.css';
    if ( ! file_exists( $file ) ) {
        return $url; // Keep the skin chosen in the settings.
    }
    // The version parameter makes browsers fetch the file again after you edit it.
    return add_query_arg( 'v', filemtime( $file ), get_stylesheet_directory_uri() . '/stitchpress-skin.css' );
}, 10, 2 );

The filter receives the URL of the skin StitchPress would load and that skin's key (after the fallback to default). Whatever URL you return is loaded instead. Return an empty string to load no skin at all; the designer then uses its built-in defaults, which look the same as Default.

To ship the skin as a small plugin instead, create wp-content/plugins/my-stitchpress-skin/my-stitchpress-skin.php with a plugin header, put the CSS file beside it, use the same filter, and build the URL with plugins_url( 'stitchpress-skin.css', __FILE__ ). Activate the plugin.

A skin loaded through the filter does not appear in the Designer skin dropdown. The dropdown lists the files in the plugin's skins/ folder. The stp_skin_choices filter can change that list, but choosing an entry with no matching file in skins/ loads Default (and your stp_skin_url filter then receives the key default).

Designer skin and Accent color are on the General tab of StitchPress > StitchPress settings, with a live preview.

Source: the plugin's docs/site/skins.md, rendered for StitchPress 1.0.0-rc4. Found an error? Tell support.