properties
changelog

List Marker Style

Style list markers and bullets.

Usage:

  • @list marker-*;

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    list: {
      marker: {
        property: "list-style-type: <v><i>;",
        values: {
          // default
          plain: "none",
          dot: "disc",
          circle: "circle",
          square: "square",
          greek: "lower-greek",
          devanagari: "devanagari",
          gujarati: "gujarati",
          number: {
            DEFAULT: "decimal",
            "leading-zero": "decimal-leading-zero",
          },
          roman: {
            lower: "lower-roman",
            DEFAULT: "upper-roman",
          },
          alpha: {
            DEFAULT: "lower-alpha, lower-latin",
            upper: "upper-alpha, upper-latin",
          },

          // unicode, emoji
          hyphen: `"-"`,
          chevron: {
            DEFAULT: `"›"`,
            double: `"»"`,
          },
          target: `"☉"`,
          arrow: `"➤"`,
          star: `"★"`,
          heart: `"♥"`,
          check: `"✓"`,
          asterisk: `"∗"`,
        },
      },
    },
  },
};

export default shilpConfig;

Published at:

Last updated at: