vega-frontend-monorepo/libs/tailwindcss-config/src/vega-custom-classes.js

64 lines
1.9 KiB
JavaScript

const plugin = require('tailwindcss/plugin');
const colors = require('tailwindcss/colors');
const theme = require('./theme');
const vegaCustomClasses = plugin(function ({ addUtilities }) {
addUtilities({
'.calt': {
fontFeatureSettings: "'calt'",
},
'.liga': {
fontFeatureSettings: "'liga'",
},
// Fix for Firefox to make it inherit font-feature-settings from the default theme
'button, input, optgroup, select, textarea': {
fontFeatureSettings: 'inherit',
},
'.syntax-highlighter-wrapper .hljs': {
fontSize: '1rem',
fontFamily: "'Roboto Mono', monospace",
display: 'block',
overflowX: 'auto',
padding: '1em',
background: colors.white,
color: colors.neutral[700],
border: `1px solid ${colors.neutral[300]}`,
},
'.syntax-highlighter-wrapper-sm .hljs': {
fontSize: '0.875rem',
lineHeight: '1.25rem',
},
'.dark .syntax-highlighter-wrapper .hljs': {
background: colors.neutral[800],
color: theme.colors.vega.green.DEFAULT,
border: 0,
},
'.syntax-highlighter-wrapper .hljs-literal': {
color: theme.colors.vega.pink.DEFAULT,
},
'.syntax-highlighter-wrapper .hljs-number': {
color: theme.colors.vega.orange.DEFAULT,
},
'.syntax-highlighter-wrapper .hljs-string': {
color: theme.colors.vega.blue.DEFAULT,
},
'.clip-path-rounded': {
clipPath: 'circle(50%)',
},
'.color-scheme-dark': {
colorScheme: 'dark',
},
'.rtl-dir': {
direction: 'rtl',
},
'.dashed-background': {
background: `repeating-linear-gradient(0deg, transparent, transparent 2px, ${colors.neutral[900]} 2px, ${colors.neutral[900]} 4px)`,
},
'.dark .dashed-background': {
background: `repeating-linear-gradient(0deg, transparent, transparent 2px, ${colors.neutral[200]} 2px, ${colors.neutral[200]} 4px)`,
},
});
});
module.exports = vegaCustomClasses;