Skip to content

Commit

Permalink
Svg classes added (fill, stroke, stroke-width)
Browse files Browse the repository at this point in the history
  • Loading branch information
atakantepe committed Aug 24, 2023
1 parent 3651a98 commit aa28ea2
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 1 deletion.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@
- Scale classes added to Transform
- New cursor pointer options added
- Box sizing classes added
- Outline classes added (width, color, style, offset)
- Outline classes added (width, color, style, offset)
- Svg classes added (fill, stroke, stroke-width)
2 changes: 2 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const animation = require('./lib/animation');
const variables = require('./lib/variables');
const filters = require("./lib/filters");
const outline = require("./lib/outline");
const svg = require("./lib/svg");
module.exports = (opts = {}) => {
return {
postcssPlugin: 'postcss-primeflex',
Expand Down Expand Up @@ -61,6 +62,7 @@ module.exports = (opts = {}) => {
variables(atRule, _opts);
filters(atRule, _opts);
outline(atRule, _opts);
svg(atRule, _opts);
atRule.remove();
}
}
Expand Down
41 changes: 41 additions & 0 deletions lib/svg.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
const { styleClass } = require("./utils");

module.exports = (root, opts) => {
const colorNames = ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'gray', 'red', 'primary'];
const colorShades = [50,100,200,300,400,500,600,700,800,900];

const fill = {
'fill-none': 'none',
'fill-inherit': 'inherit',
'fill-current': 'currentColor',
'fill-transparent': 'transparent',
'fill-white': '#ffffff',
'fill-black': '#000000',
};

const stroke = {
'stroke-none': 'none',
'stroke-inherit': 'inherit',
'stroke-current': 'currentColor',
'stroke-transparent': 'transparent',
'stroke-white': '#ffffff',
'stroke-black': '#000000',
};

const strokeWidth = {
'stroke-0': '0',
'stroke-1': '1',
'stroke-2': '2',
};

for (let color of colorNames) {
for (let cs of colorShades) {
fill['fill-' + color + '-' + cs] = 'var(--' + color + '-' + cs + ')';
stroke['stroke-' + color + '-' + cs] = 'var(--' + color + '-' + cs + ')';
}
}

styleClass('fill', fill, root, opts, true, true);
styleClass('stroke', stroke, root, opts, true, true);
styleClass('stroke-width', strokeWidth, root, opts, true, true);
};

0 comments on commit aa28ea2

Please sign in to comment.