Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
pandacss-preset-typography
Advanced tools
Readme
A 🐼 PandaCSS typography preset inspired by the TailwindCSS typography plugin
npm install --save-dev pandacss-preset-typography
Add the preset to your PandaCSS configuration (panda.config.ts
)
import { defineConfig } from "@pandacss/dev";
// Import the preset. The name can be anything you want
import typographyPreset from "pandacss-preset-typography";
export default defineConfig({
presets: [
typographyPreset(),
// Re-add the panda presets if you want to keep
// the default keyframes, breakpoints, tokens
// and textStyles provided by PandaCSS
"@pandacss/dev/presets",
],
});
The preset generates a prose
recipe for you that you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.
You can provide 5 different sizes: sm
, base
, lg
, xl
and 2xl
. If you provide no options, the default size is set as base
or as whatever you've set it as in the options.
// Import it from wherever you export panda to, also make sure
// you change the name 'prose' if you've set a custom name.
import { prose } from "@pandacss/out/recipes";
export function Page() {
return <div className={prose({ size: "lg" })}></div>;
}
Just like in TailwindCSS, there's also an extra .lead
class you can apply to any element within the scope of prose
to get a nice lead paragraph.
You can change the default options as shown below.
...
presets: [
typographyPreset({
recipe: {
// Name of the recipe export
name: "prose",
className: "prose",
// Sizes you want to include
sizes: ["sm", "base", "lg", "xl", "2xl"],
defaultSize: "base",
// Enable/disable not-prose functionality
// just like in TailwindCSS
notProse: false,
// notProse: true,
// notProse: {
// className: "not-prose",
// },
semanticTokens: {
// defaults: true,
defaults: {
// Set a color palette to use for the defaults.
// It only works with colors that have a numeric scale (11x)
// from 50 to 950. (50, 100, 200, ..., 800, 900, 950).
colorPalette: "slate",
},
// The prefix to use for semantic tokens.
// ex: --colors-<prefix>-body
prefix: "prose",
},
},
}),
],
Colors are currently being handled by CSS variables. The default colors are as followed:
{
semanticTokens: {
colors: {
// Or whatever name you've set as the semantic tokens
// prefix or recipe name
prose: {
body: {
value: "{colors.slate.700}",
},
heading: {
value: "{colors.slate.900}",
},
lead: {
value: "{colors.slate.600}",
},
link: {
value: "{colors.slate.900}",
},
bold: {
value: "{colors.slate.900}",
},
counter: {
value: "{colors.slate.500}",
},
bullet: {
value: "{colors.slate.300}",
},
hrBorder: {
value: "{colors.slate.200}",
},
quote: {
value: "{colors.slate.900}",
},
quoteBorder: {
value: "{colors.slate.200}",
},
caption: {
value: "{colors.slate.500}",
},
kbd: {
value: "{colors.slate.900}",
},
kbdShadow: {
// Expects an RGB value
value: "0 0 0",
},
code: {
value: "{colors.slate.900}",
},
preCode: {
value: "{colors.slate.200}",
},
preBg: {
value: "{colors.slate.800}",
},
thBorder: {
value: "{colors.slate.300}",
},
tdBorder: {
value: "{colors.slate.200}",
},
},
},
},
}
If you have the Radix Colors preset installed for example, you'll get dark mode support out of the box by providing the colors as shown below. These colors combinations aren't fully tested, so change according to preference.
{
semanticTokens: {
colors: {
// Or whatever name you've set as the semantic tokens
// prefix or recipe name
prose: {
body: {
value: "{colors.slate.12}",
},
heading: {
value: "{colors.slate.12}",
},
lead: {
value: "{colors.slate.12}",
},
link: {
value: "{colors.blue.11}",
},
bold: {
value: "{colors.slate.12}",
},
counter: {
value: "{colors.slate.11}",
},
bullet: {
value: "{colors.slate.11}",
},
hrBorder: {
value: "{colors.slate.6}",
},
quote: {
value: "{colors.slate.11}",
},
quoteBorder: {
value: "{colors.slate.6}",
},
caption: {
value: "{colors.slate.11}",
},
kbd: {
value: "{colors.slate.11}",
},
kbdShadow: {
// Expects an RGB value
value: "0 0 0",
},
code: {
value: "{colors.amber.11}",
},
preCode: {
value: "{colors.slate.12}",
},
preBg: {
value: "{colors.slate.2}",
},
thBorder: {
value: "{colors.slate.6}",
},
tdBorder: {
value: "{colors.slate.6}",
},
},
},
},
}
FAQs
A 🐼 PandaCSS typography preset inspired by the TailwindCSS typography plugin
The npm package pandacss-preset-typography receives a total of 540 weekly downloads. As such, pandacss-preset-typography popularity was classified as not popular.
We found that pandacss-preset-typography demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.