build
This commit is contained in:
parent
13d9caf677
commit
5c0b1ba655
GPG key ID:
579388D585F70417
1
node_modules/.bin/siimple
generated
vendored
Symbolic link
1
node_modules/.bin/siimple
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../siimple/cli.js
|
||||
20
node_modules/.yarn-integrity
generated
vendored
Normal file
20
node_modules/.yarn-integrity
generated
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"systemParams": "linux-x64-93",
|
||||
"modulesFolders": [
|
||||
"node_modules"
|
||||
],
|
||||
"flags": [],
|
||||
"linkedModules": [],
|
||||
"topLevelPatterns": [
|
||||
"siimple@^4.1.0"
|
||||
],
|
||||
"lockfileEntries": {
|
||||
"@siimple/colors@^0.1.0": "https://registry.yarnpkg.com/@siimple/colors/-/colors-0.1.0.tgz#f09edcec32d0106fbf42ecfe7f56a350f1fae6c2",
|
||||
"@siimple/core@^0.1.0": "https://registry.yarnpkg.com/@siimple/core/-/core-0.1.0.tgz#432784ca4aac2b035f810d8e987fc92d7776d2a6",
|
||||
"@siimple/modules@^0.1.0": "https://registry.yarnpkg.com/@siimple/modules/-/modules-0.1.0.tgz#466239f591fcf6fdc8be135ce88278a5e2ed51c3",
|
||||
"@siimple/preset-base@^0.1.0": "https://registry.yarnpkg.com/@siimple/preset-base/-/preset-base-0.1.0.tgz#debc153cd31c15635f2c7d4521597987ec78cc24",
|
||||
"siimple@^4.1.0": "https://registry.yarnpkg.com/siimple/-/siimple-4.1.0.tgz#33ca1a052a9bf3fd2b1c0d3bc51e67237ec5d341"
|
||||
},
|
||||
"files": [],
|
||||
"artifacts": {}
|
||||
}
|
||||
34
node_modules/@siimple/colors/README.md
generated
vendored
Normal file
34
node_modules/@siimple/colors/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
# @siimple/colors
|
||||
|
||||
A color palette for the **siimple CSS toolkit**.
|
||||
|
||||
## Install
|
||||
|
||||
Install this module using **npm**:
|
||||
|
||||
```bash
|
||||
$ npm install --save @siimple/colors
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
You can use the colors exported by this module in your `siimple.config.js` file, for example to generate your colors scale:
|
||||
|
||||
```js
|
||||
import colors from "@siimple/colors";
|
||||
|
||||
export default {
|
||||
colors: {
|
||||
text: colors.gray["700"],
|
||||
background: colors.gray["100"],
|
||||
primary: colors.mint["600"],
|
||||
},
|
||||
// ...other configuration
|
||||
};
|
||||
```
|
||||
|
||||
Check out the [full list of available colors](https://www.siimple.xyz/colors).
|
||||
|
||||
## License
|
||||
|
||||
[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
|
||||
156
node_modules/@siimple/colors/index.js
generated
vendored
Normal file
156
node_modules/@siimple/colors/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
export default {
|
||||
gray: {
|
||||
"100": "#f6f7f9",
|
||||
"200": "#ebedef",
|
||||
"300": "#d4d8dd",
|
||||
"400": "#a4abb6",
|
||||
"500": "#747c8b",
|
||||
"600": "#4b5563",
|
||||
"700": "#363f4f",
|
||||
"800": "#1d2734",
|
||||
"900": "#101623"
|
||||
},
|
||||
neutral: {
|
||||
"100": "#fafafa",
|
||||
"200": "#eaeaec",
|
||||
"300": "#dadadd",
|
||||
"400": "#a7a7af",
|
||||
"500": "#76767f",
|
||||
"600": "#55555e",
|
||||
"700": "#44444b",
|
||||
"800": "#2c2c30",
|
||||
"900": "#1d1d20"
|
||||
},
|
||||
warm: {
|
||||
"100": "#fafaf9",
|
||||
"200": "#f0f0ef",
|
||||
"300": "#e0dddc",
|
||||
"400": "#b2aca9",
|
||||
"500": "#817974",
|
||||
"600": "#5d5651",
|
||||
"700": "#48423d",
|
||||
"800": "#2e2a29",
|
||||
"900": "#211e1c"
|
||||
},
|
||||
red: {
|
||||
"100": "#fef6f6",
|
||||
"200": "#fbe5e5",
|
||||
"300": "#f7c5c5",
|
||||
"400": "#eb7870",
|
||||
"500": "#e23636",
|
||||
"600": "#a61c1c",
|
||||
"700": "#7a1515",
|
||||
"800": "#500c0c",
|
||||
"900": "#350808"
|
||||
},
|
||||
orange: {
|
||||
"100": "#fef8f6",
|
||||
"200": "#fde9e2",
|
||||
"300": "#fbd0c1",
|
||||
"400": "#f38d68",
|
||||
"500": "#e85621",
|
||||
"600": "#ae3d13",
|
||||
"700": "#832c0c",
|
||||
"800": "#551c07",
|
||||
"900": "#381305"
|
||||
},
|
||||
beige: {
|
||||
"100": "#fdf9f6",
|
||||
"200": "#faefe5",
|
||||
"300": "#f4dcc7",
|
||||
"400": "#e6a875",
|
||||
"500": "#d97c30",
|
||||
"600": "#a45a1e",
|
||||
"700": "#7d4517",
|
||||
"800": "#4e2b0e",
|
||||
"900": "#341c09"
|
||||
},
|
||||
yellow: {
|
||||
"100": "#fffcf5",
|
||||
"200": "#fef6e1",
|
||||
"300": "#feebbe",
|
||||
"400": "#fbc850",
|
||||
"500": "#f0a905",
|
||||
"600": "#be8004",
|
||||
"700": "#905604",
|
||||
"800": "#593103",
|
||||
"900": "#3b2002"
|
||||
},
|
||||
green: {
|
||||
"100": "#f7fdf9",
|
||||
"200": "#e7f9ee",
|
||||
"300": "#cbf1d9",
|
||||
"400": "#72da9b",
|
||||
"500": "#34c56e",
|
||||
"600": "#299956",
|
||||
"700": "#1e713f",
|
||||
"800": "#134929",
|
||||
"900": "#0d301b"
|
||||
},
|
||||
mint: {
|
||||
"100": "#f7fdfb",
|
||||
"200": "#e7f8f4",
|
||||
"300": "#cbf0e7",
|
||||
"400": "#80dbc4",
|
||||
"500": "#38c7a3",
|
||||
"600": "#2b977c",
|
||||
"700": "#21735f",
|
||||
"800": "#14483b",
|
||||
"900": "#0d3027"
|
||||
},
|
||||
aqua: {
|
||||
"100": "#f6fcfe",
|
||||
"200": "#e4f7fb",
|
||||
"300": "#c1ecf6",
|
||||
"400": "#75d7ea",
|
||||
"500": "#21bede",
|
||||
"600": "#1991a9",
|
||||
"700": "#136e81",
|
||||
"800": "#0c4550",
|
||||
"900": "#082e35"
|
||||
},
|
||||
blue: {
|
||||
"100": "#f5f9ff",
|
||||
"200": "#cce2ff",
|
||||
"300": "#9bc5fd",
|
||||
"400": "#63a8fd",
|
||||
"500": "#1c76fd",
|
||||
"600": "#025cca",
|
||||
"700": "#024597",
|
||||
"800": "#022464",
|
||||
"900": "#011232"
|
||||
},
|
||||
royal: {
|
||||
"100": "#f6f7fd",
|
||||
"200": "#e5e7fa",
|
||||
"300": "#c7cbf4",
|
||||
"400": "#7d85e3",
|
||||
"500": "#3542d4",
|
||||
"600": "#202ba2",
|
||||
"700": "#18217b",
|
||||
"800": "#0f144d",
|
||||
"900": "#0a0d33"
|
||||
},
|
||||
purple: {
|
||||
"100": "#f9f7fd",
|
||||
"200": "#ebe5fa",
|
||||
"300": "#d5c8f3",
|
||||
"400": "#9678e2",
|
||||
"500": "#6235d4",
|
||||
"600": "#4622a0",
|
||||
"700": "#351a7a",
|
||||
"800": "#21104c",
|
||||
"900": "#160b32"
|
||||
},
|
||||
pink: {
|
||||
"100": "#fdf6fa",
|
||||
"200": "#fae5f1",
|
||||
"300": "#f5c7e0",
|
||||
"400": "#e675b3",
|
||||
"500": "#d9308d",
|
||||
"600": "#a41e68",
|
||||
"700": "#7d174f",
|
||||
"800": "#4e0e31",
|
||||
"900": "#340921"
|
||||
},
|
||||
};
|
||||
16
node_modules/@siimple/colors/package.json
generated
vendored
Normal file
16
node_modules/@siimple/colors/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "@siimple/colors",
|
||||
"version": "0.1.0",
|
||||
"description": "A color palette for the siimple css toolkit",
|
||||
"author": "Josemi Juanes <josemi@siimple.xyz>",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/jmjuanes/siimple",
|
||||
"bugs": "https://github.com/jmjuanes/siimple/issues",
|
||||
"homepage": "https://www.siimple.xyz",
|
||||
"main": "index.js",
|
||||
"keywords": [
|
||||
"siimple",
|
||||
"colors"
|
||||
]
|
||||
}
|
||||
107
node_modules/@siimple/core/README.md
generated
vendored
Normal file
107
node_modules/@siimple/core/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
# @siimple/core
|
||||
|
||||
The core engine of the **siimple CSS toolkit**, that can be used for building your own themeable CSS framework.
|
||||
|
||||
## Install
|
||||
|
||||
Install this package using **npm**:
|
||||
|
||||
```bash
|
||||
$ npm install --save @siimple/core
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### css(config)
|
||||
|
||||
Given a [configuration object](https://www.siimple.xyz/configuration), this method will generate a CSS string with the parsed styles in `config.styles` and using the provided theme in the configuration object.
|
||||
|
||||
```js
|
||||
import {css} from "@siimple/core";
|
||||
|
||||
const result = css({
|
||||
useBorderBox: false,
|
||||
useRootStyles: false,
|
||||
colors: {
|
||||
primary: "#34dde5",
|
||||
},
|
||||
styles: {
|
||||
button: {
|
||||
backgroundColor: "primary",
|
||||
color: "white",
|
||||
p: "2rem",
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
This will generate the following CSS string:
|
||||
|
||||
```css
|
||||
button {
|
||||
background-color: #34dde5;
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
}
|
||||
```
|
||||
|
||||
### mergeStyles(source, target)
|
||||
|
||||
Performs a **deep merge** of the styles defined in the `target` object into the `source` object, and returns the merged styles object.
|
||||
|
||||
```js
|
||||
import {mergeStyles} from "@siimple/core";
|
||||
|
||||
const sourceStyles = {
|
||||
".button": {
|
||||
backgroundColor: "primary",
|
||||
color: "white",
|
||||
padding: "1.5rem",
|
||||
"&:hover": {
|
||||
backgroundColor: "secondary",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const mergedStyles = mergeStyles(sourceStyles, {
|
||||
".button": {
|
||||
borderRadius: "0.5rem",
|
||||
"&:hover": {
|
||||
backgroundColor: "inherit",
|
||||
opacity: "0.5",
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
In the previous example the merged styles will be:
|
||||
|
||||
```js
|
||||
mergedStyles = {
|
||||
".button": {
|
||||
backgroundColor: "primary",
|
||||
borderRadius: "0.5rem",
|
||||
color: "white",
|
||||
padding: "1.5rem",
|
||||
"&:hover": {
|
||||
backgroundColor: "inherit",
|
||||
opacity: "0.5",
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### mergeConfig(source, target)
|
||||
|
||||
This function will return a new configuration object as a result of performing a **deep merge** of the `target` configuration object into `source`.
|
||||
|
||||
```js
|
||||
import {mergeConfig} from "@siimple/core";
|
||||
|
||||
const config = mergeConfig({ /* source */}, {/* target */});
|
||||
```
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
|
||||
301
node_modules/@siimple/core/index.js
generated
vendored
Normal file
301
node_modules/@siimple/core/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,301 @@
|
|||
// Css properties to scales mapping
|
||||
const scales = {
|
||||
backgroundColor: "colors",
|
||||
borderColor: "colors",
|
||||
borderBottomColor: "colors",
|
||||
borderLeftColor: "colors",
|
||||
borderRightColor: "colors",
|
||||
borderTopColor: "colors",
|
||||
borderRadius: "radius",
|
||||
borderBottomLeftRadius: "radius",
|
||||
borderBottomRightRadius: "radius",
|
||||
borderTopLeftRadius: "radius",
|
||||
borderTopRightRadius: "radius",
|
||||
borderWidth: "sizes",
|
||||
borderBottomWidth: "sizes",
|
||||
borderLeftWidth: "sizes",
|
||||
borderRightWidth: "sizes",
|
||||
borderTopWidth: "sizes",
|
||||
bottom: "spacing",
|
||||
boxShadow: "shadows",
|
||||
color: "colors",
|
||||
fill: "colors",
|
||||
fontFamily: "fonts",
|
||||
fontSize: "fontSizes",
|
||||
fontWeight: "fontWeights",
|
||||
height: "sizes",
|
||||
left: "spacing",
|
||||
lineHeight: "lineHeights",
|
||||
margin: "spacing",
|
||||
marginBottom: "spacing",
|
||||
marginLeft: "spacing",
|
||||
marginRight: "spacing",
|
||||
marginTop: "spacing",
|
||||
maxHeight: "sizes",
|
||||
maxWidth: "sizes",
|
||||
minHeight: "sizes",
|
||||
minWidth: "sizes",
|
||||
opacity: "opacities",
|
||||
padding: "spacing",
|
||||
paddingBottom: "spacing",
|
||||
paddingLeft: "spacing",
|
||||
paddingRight: "spacing",
|
||||
paddingTop: "spacing",
|
||||
right: "spacing",
|
||||
textShadow: "shadows",
|
||||
top: "spacing",
|
||||
width: "sizes",
|
||||
};
|
||||
|
||||
// CSS aliases
|
||||
const aliases = {
|
||||
bc: ["border-color"],
|
||||
bg: ["background-color"],
|
||||
m: ["margin"],
|
||||
mb: ["margin-bottom"],
|
||||
ml: ["margin-left"],
|
||||
mr: ["margin-right"],
|
||||
mt: ["margin-top"],
|
||||
mx: ["margin-left", "margin-right"],
|
||||
my: ["margin-top", "margin-bottom"],
|
||||
p: ["padding"],
|
||||
pb: ["padding-bottom"],
|
||||
pl: ["padding-left"],
|
||||
pr: ["padding-right"],
|
||||
pt: ["padding-top"],
|
||||
px: ["padding-left", "padding-right"],
|
||||
py: ["padding-top", "padding-bottom"],
|
||||
radius: ["border-radius"],
|
||||
size: ["width", "height"],
|
||||
};
|
||||
|
||||
// Merge two object
|
||||
const mergeObject = (source, target) => ({...source, ...target});
|
||||
|
||||
// Get value in object from path
|
||||
const getInObject = (obj, path) => {
|
||||
return path.split(".").reduce((o, p) => o?.[p], obj);
|
||||
};
|
||||
|
||||
// Exclude a field from the specified object
|
||||
const excludeInObject = (obj, field) => {
|
||||
return Object.fromEntries(Object.entries(obj).filter(e => e[0] !== field));
|
||||
};
|
||||
|
||||
// Tiny reducer alias
|
||||
const toObject = (list, fn) => list.reduce(fn, {});
|
||||
|
||||
// Replace variables in the provided string
|
||||
const format = (str, vars) => {
|
||||
return str.replace(/\{\{\s*([^{}\s]+)\s*\}\}/g, (match, key) => {
|
||||
return typeof vars[key] !== "undefined" ? vars[key].toString() : match;
|
||||
});
|
||||
};
|
||||
|
||||
// Merge configurations
|
||||
export const mergeConfig = (source, target) => ({
|
||||
...source,
|
||||
...target,
|
||||
prefix: target.prefix || source.prefix || "",
|
||||
breakpoints: target.breakpoints || source.breakpoints || {},
|
||||
root: mergeObject(source.root || {}, target.root || {}),
|
||||
styles: mergeStyles(source.styles || {}, target.styles || {}),
|
||||
});
|
||||
|
||||
// Parse CSS property name
|
||||
const parseProperty = prop => {
|
||||
return (aliases[prop] || [prop]).map(item => {
|
||||
return item.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
|
||||
})
|
||||
};
|
||||
|
||||
// Wrap CSS Rule
|
||||
const wrapRule = (ruleName, ruleContent, separator) => {
|
||||
return `${ruleName} {${separator || ""}${ruleContent}${separator || ""}}`;
|
||||
};
|
||||
|
||||
// Generate media query rule
|
||||
const buildMediaQuery = values => {
|
||||
const conditions = Object.keys(values).map(key => {
|
||||
if (values[key] === null || (key !== "min" && key !== "max")) {
|
||||
return null; // Not valid condition
|
||||
}
|
||||
// Return this condition
|
||||
return `(${key}-width: ${values[key]})`;
|
||||
});
|
||||
// Return the media rule
|
||||
return `@media screen and ${conditions.filter(item => !!item).join(" and ")}`;
|
||||
};
|
||||
|
||||
// Merge CSS styles
|
||||
export const mergeStyles = (source, target) => {
|
||||
Object.keys(target).forEach(key => {
|
||||
// Check for @font-face attribute
|
||||
if (key === "@font-face") {
|
||||
if (typeof source["@font-face"] !== "undefined") {
|
||||
source[key] = [source[key]].flat(1).concat(target[key]).flat(1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Check for object property --> deep merge
|
||||
else if (typeof source[key] === "object" && typeof target[key] === "object") {
|
||||
return mergeStyles(source[key], target[key]);
|
||||
}
|
||||
// Other value --> override source property
|
||||
source[key] = target[key];
|
||||
});
|
||||
return source;
|
||||
};
|
||||
|
||||
// Build css value
|
||||
export const buildValue = (property, value, config, vars) => {
|
||||
const values = [value].flat(1);
|
||||
if (values[0] === "value" && typeof vars["value"] !== "undefined") {
|
||||
values[0] = vars["value"]; // Replace value for vars
|
||||
}
|
||||
if (scales[property] && typeof values[0] === "string") {
|
||||
const key = scales[property];
|
||||
values[0] = config[key]?.[values[0]] || values[0];
|
||||
}
|
||||
return values.join(" ");
|
||||
};
|
||||
|
||||
// Build mixin styles
|
||||
export const buildMixin = (styles, theme, prev) => {
|
||||
prev = prev || new Set();
|
||||
if (typeof styles.apply === "string" && styles.apply) {
|
||||
// Check for circular mixins found
|
||||
if (prev.has(styles.apply)) {
|
||||
const items = Array.from(prev);
|
||||
throw new Error(`Circular mixins found: ${items.join("->")}->${styles.apply}`);
|
||||
}
|
||||
// Apply styles from this mixin
|
||||
prev.add(styles.apply);
|
||||
let appliedStyles = getInObject(theme, styles.apply) || {};
|
||||
if (appliedStyles.default && typeof appliedStyles.default === "object") {
|
||||
appliedStyles = appliedStyles.default;
|
||||
}
|
||||
return {
|
||||
...excludeInObject(styles, "apply"),
|
||||
...buildMixin(appliedStyles, theme, prev),
|
||||
};
|
||||
}
|
||||
// No mixin to apply --> return styles
|
||||
return styles;
|
||||
};
|
||||
|
||||
// Build css rule
|
||||
export const buildRule = (parent, styles, config, vars) => {
|
||||
if (styles && Array.isArray(styles)) {
|
||||
return styles.map(item => buildRule(parent, item, config, vars)).flat();
|
||||
}
|
||||
// Check for mixins to apply to this styles
|
||||
if (typeof styles.apply === "string" && styles.apply) {
|
||||
return buildRule(parent, buildMixin(styles, config), config, vars);
|
||||
}
|
||||
const result = [""];
|
||||
Object.keys(styles).forEach(key => {
|
||||
// key = key.trim(); //Trim current key
|
||||
const value = styles[key];
|
||||
if (value === null) {
|
||||
return; // Ignore this property
|
||||
}
|
||||
//Check for object value --> build wrapped style
|
||||
else if (typeof value === "object" && Array.isArray(value) === false) {
|
||||
// Check for breakpoints rule
|
||||
if (key === "@breakpoints") {
|
||||
return Object.keys(config.breakpoints || {}).forEach(breakpointName => {
|
||||
const mediaQuery = buildMediaQuery(config.breakpoints[breakpointName]);
|
||||
const newContent = buildRule(parent, value, config, {
|
||||
...(vars || {}),
|
||||
breakpoint: breakpointName,
|
||||
});
|
||||
if (newContent.length === 0) {
|
||||
return; // Skip this rule
|
||||
}
|
||||
// Wrap the media rule
|
||||
return result.push(wrapRule(mediaQuery, newContent.join("\n"), "\n"));
|
||||
});
|
||||
}
|
||||
// Check for theme rule
|
||||
else if (/^@theme (\w*)$/.test(key.trim())) {
|
||||
const scale = key.trim().match(/^@theme (\w*)$/)[1];
|
||||
return Object.keys(config[scale] || {}).forEach(name => {
|
||||
const newContent = buildRule(parent, value, config, {
|
||||
...(vars || {}),
|
||||
name: name,
|
||||
value: config[scale][name],
|
||||
});
|
||||
return result.push(newContent.join("\n"));
|
||||
});
|
||||
}
|
||||
// Check for media rule --> wrap content inside the media rule
|
||||
else if (/^@/.test(key)) {
|
||||
const newContent = buildRule(parent, value, config, vars || {});
|
||||
if (newContent.length === 0) {
|
||||
return; // Skip this rule
|
||||
}
|
||||
// Wrap the media rule
|
||||
return result.push(wrapRule(key, newContent.join("\n"), "\n"));
|
||||
}
|
||||
// Add nested styles
|
||||
return result.push(buildRule(parent.map(p => key.replace(/&/g, p)), value, config, vars));
|
||||
}
|
||||
// Other value --> append to the current css
|
||||
parseProperty(key).forEach(prop => {
|
||||
result[0] = result[0] + `${prop}:${buildValue(key, value, config, vars)};`;
|
||||
});
|
||||
});
|
||||
// Wrap the main rule
|
||||
if (result[0] !== "") {
|
||||
result[0] = wrapRule(format(parent.join(","), vars), result[0], "");
|
||||
}
|
||||
// Filter items to remove empty
|
||||
return result.flat(2).filter(value => {
|
||||
return typeof value === "string" && value !== "";
|
||||
});
|
||||
};
|
||||
|
||||
// Build css styles
|
||||
export const buildStyles = (styles, config) => {
|
||||
const result = Object.keys(styles || {}).map(key => {
|
||||
const value = styles[key];
|
||||
// Check for at rule (media or keyframes)
|
||||
if (/^@(media|keyframes)/.test(key.trim())) {
|
||||
return wrapRule(key, buildStyles(value, config), "\n");
|
||||
}
|
||||
// Other value --> parse as regular classname
|
||||
return buildRule([key], value, config, {
|
||||
prefix: config.prefix || "",
|
||||
});
|
||||
});
|
||||
return result.flat().join("\n");
|
||||
};
|
||||
|
||||
// Generate CSS styles from a configuration object
|
||||
export const css = config => {
|
||||
const styles = {};
|
||||
// Add borderbox styles
|
||||
if (typeof config.useBorderBox === "undefined" || !!config.useBorderBox) {
|
||||
styles["html"] = {
|
||||
boxSizing: "border-box",
|
||||
};
|
||||
styles["*,*:before,*:after"] = {
|
||||
boxSizing: "inherit",
|
||||
};
|
||||
}
|
||||
// Add root styles
|
||||
if (typeof config.useRootStyles === "undefined" || !!config.useRootStyles) {
|
||||
styles["html"] = {
|
||||
...(styles["html"] || {}),
|
||||
background: "background",
|
||||
color: "text",
|
||||
...(config.root || {}),
|
||||
};
|
||||
}
|
||||
// Add custom styles
|
||||
if (config.styles) {
|
||||
mergeStyles(styles, config.styles);
|
||||
}
|
||||
return buildStyles(styles, config);
|
||||
};
|
||||
15
node_modules/@siimple/core/package.json
generated
vendored
Normal file
15
node_modules/@siimple/core/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "@siimple/core",
|
||||
"version": "0.1.0",
|
||||
"description": "Core module of the siimple css toolkit",
|
||||
"author": "Josemi Juanes <josemi@siimple.xyz>",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/jmjuanes/siimple",
|
||||
"bugs": "https://github.com/jmjuanes/siimple/issues",
|
||||
"homepage": "https://www.siimple.xyz",
|
||||
"main": "index.js",
|
||||
"keywords": [
|
||||
"siimple"
|
||||
]
|
||||
}
|
||||
53
node_modules/@siimple/modules/README.md
generated
vendored
Normal file
53
node_modules/@siimple/modules/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
# @siimple/modules
|
||||
|
||||
Core modules for the **siimple CSS toolkit**.
|
||||
|
||||
> This package is included in the main `siimple` package and a separate installation is not required.
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
$ npm install --save @siimple/modules
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
> This module is already integrated in the build process of the `siimple` main package, so you do not need to use the `injectModules` function.
|
||||
|
||||
You can use the `injectModules` function to inject core modules in your configuration, using the `modules` field of your configuration object:
|
||||
|
||||
```js
|
||||
import {css} from "@siimple/core";
|
||||
import {injectModules} from "@siimple/modules";
|
||||
|
||||
const result = css(injectModules({
|
||||
modules: [
|
||||
"button",
|
||||
"markup",
|
||||
"reset",
|
||||
],
|
||||
// ...other configuration
|
||||
}));
|
||||
```
|
||||
|
||||
Individual modules can be also manually injected in the `styles` field of your configuration:
|
||||
|
||||
```js
|
||||
import {elements} from "@siimple/modules";
|
||||
|
||||
export default {
|
||||
modules: false, // Disable all modules by default
|
||||
// ...other configuration
|
||||
styles: {
|
||||
...elements.button,
|
||||
...elements.card,
|
||||
// ... other styles
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
|
||||
786
node_modules/@siimple/modules/elements.js
generated
vendored
Normal file
786
node_modules/@siimple/modules/elements.js
generated
vendored
Normal file
|
|
@ -0,0 +1,786 @@
|
|||
const columns = {
|
||||
"one-fifth": "20%",
|
||||
"one-quarter": "25%",
|
||||
"one-third": "33.33%",
|
||||
"two-fifths": "40%",
|
||||
"half": "50%",
|
||||
"three-fifths": "60%",
|
||||
"two-thirds": "66.66%",
|
||||
"three-quarters": "75%",
|
||||
"four-fifths": "80%",
|
||||
"full": "100%",
|
||||
};
|
||||
|
||||
export const elements = {
|
||||
alert: {
|
||||
".{{prefix}}alert": {
|
||||
alignItems: "center",
|
||||
backgroundColor: "primary",
|
||||
borderRadius: "0.5rem",
|
||||
color: "white",
|
||||
display: "flex",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
marginTop: "0px",
|
||||
minWidth: "0px",
|
||||
padding: "1.25rem",
|
||||
position: "relative",
|
||||
"&.is-secondary": {
|
||||
backgroundColor: "secondary",
|
||||
color: "white",
|
||||
},
|
||||
apply: "alerts",
|
||||
},
|
||||
},
|
||||
badge: {
|
||||
".{{prefix}}badge": {
|
||||
backgroundColor: "primary",
|
||||
borderRadius: "0.25rem",
|
||||
color: "white",
|
||||
display: "inline-block",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: "bold",
|
||||
lineHeight: "1.25rem",
|
||||
padding: ["0.25rem", "0.5rem"],
|
||||
textDecoration: "none",
|
||||
verticalAlign: "text-top",
|
||||
"&.is-secondary": {
|
||||
backgroundColor: "secondary",
|
||||
color: "white",
|
||||
},
|
||||
apply: "badges",
|
||||
},
|
||||
},
|
||||
button: {
|
||||
".{{prefix}}button": {
|
||||
appearance: "none",
|
||||
backgroundColor: "primary",
|
||||
border: "0px",
|
||||
borderRadius: "0.5rem",
|
||||
color: "white",
|
||||
cursor: "pointer",
|
||||
display: "inline-block",
|
||||
fontFamily: "inherit",
|
||||
fontSize: "inherit",
|
||||
fontWeight: "bold",
|
||||
lineHeight: "inherit",
|
||||
minWidth: "0px",
|
||||
padding: ["0.75rem", "1.5rem"],
|
||||
textAlign: "center",
|
||||
textDecoration: "none",
|
||||
userSelect: "none",
|
||||
verticalAlign: "middle",
|
||||
"&:hover": {
|
||||
textDecoration: "none",
|
||||
transitionDuration: "0.3s",
|
||||
transitionProperty: "background-color",
|
||||
},
|
||||
"&.is-secondary": {
|
||||
backgroundColor: "secondary",
|
||||
color: "white",
|
||||
},
|
||||
"&.is-full": {
|
||||
display: "block",
|
||||
width: "100%",
|
||||
},
|
||||
"&.is-disabled,&:disabled": {
|
||||
cursor: ["not-allowed", "!important"],
|
||||
opacity: ["0.6", "!important"],
|
||||
},
|
||||
apply: "buttons",
|
||||
},
|
||||
},
|
||||
card: {
|
||||
".{{prefix}}card": {
|
||||
backgroundColor: "white",
|
||||
borderRadius: "0.5rem",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
padding: "2rem",
|
||||
textDecoration: ["none", "!important"],
|
||||
width: "100%",
|
||||
apply: "cards",
|
||||
},
|
||||
},
|
||||
checkbox: {
|
||||
".{{prefix}}checkbox": {
|
||||
appearance: "none",
|
||||
backgroundColor: "muted",
|
||||
borderRadius: "0.25rem",
|
||||
boxSizing: "border-box",
|
||||
color: "white",
|
||||
cursor: "pointer",
|
||||
display: "inline-block",
|
||||
height: "1.125rem",
|
||||
margin: "0.1875rem",
|
||||
position: "relative",
|
||||
width: "1.125rem",
|
||||
verticalAlign: "top",
|
||||
"&:after": {
|
||||
backgroundColor: "transparent",
|
||||
content: "''",
|
||||
height: "0.375rem",
|
||||
position: "absolute",
|
||||
},
|
||||
"&:checked,&:indeterminate": {
|
||||
backgroundColor: "primary",
|
||||
transitionDuration: "0.3s",
|
||||
transitionProperty: "background-color",
|
||||
},
|
||||
"&:indeterminate:after": {
|
||||
borderBottomColor: "white",
|
||||
borderBottomStyle: "solid",
|
||||
borderBottomWidth: "0.125rem",
|
||||
left: "0.3125rem",
|
||||
top: "0.25rem",
|
||||
width: "0.5rem",
|
||||
},
|
||||
"&:checked:after": {
|
||||
borderBottomColor: "white",
|
||||
borderBottomStyle: "solid",
|
||||
borderBottomWidth: "0.125rem",
|
||||
borderLeftColor: "white",
|
||||
borderLeftStyle: "solid",
|
||||
borderLeftWidth: "0.125rem",
|
||||
left: "0.25rem",
|
||||
top: "0.3125rem",
|
||||
transform: "rotate(-45deg)",
|
||||
width: "0.625rem",
|
||||
},
|
||||
apply: "forms.checkbox",
|
||||
},
|
||||
},
|
||||
close: {
|
||||
".{{prefix}}close": {
|
||||
appearance: "none",
|
||||
backgroundColor: "transparent",
|
||||
border: "none",
|
||||
color: "currentColor",
|
||||
cursor: "pointer",
|
||||
display: "inline-flex",
|
||||
height: "1rem",
|
||||
opacity: "0.6",
|
||||
position: "relative",
|
||||
transition: ["opacity", "0.3s"],
|
||||
width: "1rem",
|
||||
"&:hover": {
|
||||
opacity: "1.0",
|
||||
},
|
||||
"&:before,&:after": {
|
||||
backgroundColor: "currentColor",
|
||||
borderRadius: "1px",
|
||||
content: "''",
|
||||
height: "3px",
|
||||
left: "0px",
|
||||
position: "absolute",
|
||||
top: "6px",
|
||||
width: "1rem",
|
||||
},
|
||||
"&:before": {
|
||||
transform: "rotate(45deg)",
|
||||
},
|
||||
"&:after": {
|
||||
transform: "rotate(-45deg)",
|
||||
},
|
||||
apply: "buttons.close",
|
||||
},
|
||||
},
|
||||
column: {
|
||||
".{{prefix}}column": {
|
||||
flex: "1",
|
||||
minHeight: "0",
|
||||
padding: "1rem",
|
||||
width: "100%",
|
||||
// Responsive column sizes
|
||||
...Object.fromEntries(Object.keys(columns).map(column => {
|
||||
const styles = {
|
||||
flex: "none",
|
||||
width: columns[column],
|
||||
"@breakpoints": {
|
||||
"&-{{breakpoint}}": {
|
||||
flex: "none",
|
||||
width: columns[column],
|
||||
},
|
||||
},
|
||||
};
|
||||
return [`&.is-${column}`, styles];
|
||||
})),
|
||||
apply: "columns",
|
||||
},
|
||||
".{{prefix}}columns": {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
marginLeft: "-1rem",
|
||||
marginRight: "-1rem",
|
||||
},
|
||||
},
|
||||
container: {
|
||||
".{{prefix}}container": {
|
||||
display: "block",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
maxWidth: "1264px",
|
||||
paddingLeft: "1.5rem",
|
||||
paddingRight: "1.5rem",
|
||||
width: "100%",
|
||||
apply: "layout.container",
|
||||
},
|
||||
},
|
||||
crumb: {
|
||||
".{{prefix}}crumb": {
|
||||
color: "currentColor",
|
||||
cursor: "pointer",
|
||||
fontWeight: "bold",
|
||||
opacity: "0.6",
|
||||
paddingBottom: "0.5rem",
|
||||
paddingLeft: "0.75rem",
|
||||
paddingRight: "1.5rem",
|
||||
paddingTop: "0.5rem",
|
||||
position: "relative",
|
||||
textDecoration: "none",
|
||||
"&:hover": {
|
||||
opacity: "1.0",
|
||||
transition: ["opacity", "0.3s"],
|
||||
},
|
||||
"&:not(:last-child)::after": {
|
||||
borderRightColor: "currentColor",
|
||||
borderRightWidth: "2px",
|
||||
borderRightStyle: "solid",
|
||||
borderTopWidth: "2px",
|
||||
borderTopStyle: "solid",
|
||||
borderTopColor: "currentColor",
|
||||
content: "''",
|
||||
display: "block",
|
||||
height: "0.5rem",
|
||||
position: "absolute",
|
||||
right: "0.25rem",
|
||||
top: "1rem",
|
||||
transform: "rotate(45deg)",
|
||||
width: "0.5rem",
|
||||
},
|
||||
"&.is-active": {
|
||||
cursor: "default",
|
||||
opacity: "1.0",
|
||||
pointerEvents: "none",
|
||||
},
|
||||
apply: "links.crumb",
|
||||
},
|
||||
".{{prefix}}crumbs": {
|
||||
borderRadius: "default",
|
||||
display: "flex",
|
||||
flexWrap: "nowrap",
|
||||
marginBottom: "1rem",
|
||||
overflow: "hidden",
|
||||
overflowX: "auto",
|
||||
padding: "0.5rem",
|
||||
whiteSpace: ["nowrap", "!important"],
|
||||
},
|
||||
},
|
||||
divider: {
|
||||
".{{prefix}}divider": {
|
||||
backgroundColor: "muted",
|
||||
border: "0px",
|
||||
display: "block",
|
||||
height: "0.125rem",
|
||||
padding: "0px",
|
||||
"&:not(:first-child)": {
|
||||
marginTop: "1rem",
|
||||
},
|
||||
"&:not(:last-child)": {
|
||||
marginBottom: "1rem",
|
||||
},
|
||||
apply: "styles.hr",
|
||||
},
|
||||
},
|
||||
input: {
|
||||
".{{prefix}}input": {
|
||||
backgroundColor: "muted",
|
||||
borderColor: "transparent",
|
||||
borderStyle: "solid",
|
||||
borderWidth: "0.125rem",
|
||||
borderRadius: "0.5rem",
|
||||
boxSizing: "border-box",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
fontFamily: "inherit",
|
||||
fontSize: "inherit",
|
||||
fontWeight: "normal",
|
||||
lineHeight: "inherit",
|
||||
margin: "0px",
|
||||
minWidth: "0px",
|
||||
outline: "0px",
|
||||
padding: ["0.625rem", "1rem"],
|
||||
// verticalAlign: "top",
|
||||
width: "100%",
|
||||
"&:focus": {
|
||||
borderColor: "primary",
|
||||
},
|
||||
apply: "forms.input",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
".{{prefix}}label": {
|
||||
alignItems: "center",
|
||||
color: "inherit",
|
||||
display: "flex",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
minWidth: "0px",
|
||||
paddingBottom: "0.25rem",
|
||||
paddingTop: "0.25rem",
|
||||
width: "100%",
|
||||
apply: "forms.label",
|
||||
},
|
||||
},
|
||||
menu: {
|
||||
".{{prefix}}menu": {
|
||||
appearance: "none",
|
||||
backgroundColor: "muted",
|
||||
borderColor: "transparent",
|
||||
borderRadius: "0.5rem",
|
||||
borderStyle: "solid",
|
||||
borderWidth: "0.125rem",
|
||||
color: "currentColor",
|
||||
cursor: "pointer",
|
||||
display: "block",
|
||||
height: "3rem",
|
||||
opacity: "0.8",
|
||||
paddingLeft: "0.75rem",
|
||||
paddingRight: "0.75rem",
|
||||
position: "relative",
|
||||
width: "3rem",
|
||||
zIndex: "400",
|
||||
"&:hover": {
|
||||
opacity: "1.0",
|
||||
},
|
||||
"&:before": {
|
||||
borderTop: ["0.25rem", "solid", "currentColor"],
|
||||
borderBottom: ["0.25rem", "solid", "currentColor"],
|
||||
content: "''",
|
||||
height: "1.25rem",
|
||||
left: "0.5rem",
|
||||
position: "absolute",
|
||||
width: "1.75rem",
|
||||
top: "0.75rem",
|
||||
},
|
||||
"&:after": {
|
||||
backgroundColor: "currentColor",
|
||||
content: "''",
|
||||
height: "0.25rem",
|
||||
left: "0.5rem",
|
||||
position: "absolute",
|
||||
width: "1.75rem",
|
||||
top: "1.25rem",
|
||||
},
|
||||
apply: "buttons.menu",
|
||||
},
|
||||
},
|
||||
modal: {
|
||||
".{{prefix}}modal": {
|
||||
backgroundColor: "white",
|
||||
borderRadius: "0.5rem",
|
||||
display: "block",
|
||||
maxHeight: "90vh",
|
||||
maxWidth: "600px",
|
||||
overflowY: "auto",
|
||||
padding: "2rem",
|
||||
width: "100%",
|
||||
apply: "dialogs.modal",
|
||||
},
|
||||
},
|
||||
navlink: {
|
||||
".{{prefix}}navlink": {
|
||||
borderRadius: "0.5rem",
|
||||
color: "inherit",
|
||||
cursor: "pointer",
|
||||
display: "block",
|
||||
fontWeight: "bold",
|
||||
margin: "0px",
|
||||
padding: "0.75rem",
|
||||
textDecoration: ["none", "!important"],
|
||||
userSelect: "none",
|
||||
whiteSpace: "nowrap",
|
||||
width: "100%",
|
||||
"&:hover": {
|
||||
color: "primary",
|
||||
},
|
||||
"&.is-active": {
|
||||
color: "primary",
|
||||
},
|
||||
"&.is-disabled": {
|
||||
opacity: "0.5",
|
||||
pointerEvents: "none",
|
||||
},
|
||||
apply: "links.nav",
|
||||
},
|
||||
},
|
||||
paragraph: {
|
||||
".{{prefix}}paragraph": {
|
||||
display: "block",
|
||||
marginBottom: "1rem",
|
||||
marginTop: "0px",
|
||||
apply: "text.paragraph",
|
||||
},
|
||||
},
|
||||
progress: {
|
||||
".{{prefix}}progress": {
|
||||
appearance: "none",
|
||||
backgroundColor: "muted",
|
||||
border: "none",
|
||||
borderRadius: "999px",
|
||||
color: "primary",
|
||||
display: "block",
|
||||
height: "0.5rem",
|
||||
margin: ["0px", "!important"],
|
||||
overflow: "hidden",
|
||||
padding: ["0px", "!important"],
|
||||
width: "100%",
|
||||
"&::-webkit-progress-bar": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
"&::-webkit-progress-value": {
|
||||
backgroundColor: "currentColor",
|
||||
},
|
||||
"&::-moz-progress-bar": {
|
||||
backgroundColor: "currentColor",
|
||||
},
|
||||
apply: "forms.progress",
|
||||
},
|
||||
},
|
||||
radio: {
|
||||
".{{prefix}}radio": {
|
||||
appearance: "none",
|
||||
boxSizing: "border-box",
|
||||
color: "primary",
|
||||
cursor: "pointer",
|
||||
display: "inline-block",
|
||||
height: "1.25rem",
|
||||
margin: "0.125rem",
|
||||
position: "relative",
|
||||
width: "1.25rem",
|
||||
"&:before": {
|
||||
borderColor: "muted",
|
||||
borderStyle: "solid",
|
||||
borderRadius: "100%",
|
||||
borderWidth: "0.1875rem",
|
||||
content: "''",
|
||||
display: "block",
|
||||
height: "1.25rem",
|
||||
left: "0px",
|
||||
position: "absolute",
|
||||
top: "0px",
|
||||
width: "1.25rem",
|
||||
},
|
||||
"&:after": {
|
||||
backgroundColor: "transparent",
|
||||
borderRadius: "999px",
|
||||
content: "''",
|
||||
display: "block",
|
||||
height: "0.5rem",
|
||||
left: "0.375rem",
|
||||
position: "absolute",
|
||||
top: "0.375rem",
|
||||
width: "0.5rem",
|
||||
},
|
||||
"&:hover:after": {
|
||||
backgroundColor: "muted",
|
||||
},
|
||||
"&:checked:after": {
|
||||
backgroundColor: ["currentColor", "!important"],
|
||||
},
|
||||
"&:checked:before": {
|
||||
borderColor: ["currentColor", "!important"],
|
||||
},
|
||||
apply: "forms.radio",
|
||||
},
|
||||
},
|
||||
scrim: {
|
||||
".{{prefix}}scrim": {
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
left: "0px",
|
||||
overflowY: "hidden",
|
||||
overflowX: "hidden",
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
width: "100%",
|
||||
zIndex: "400",
|
||||
apply: "dialogs.scrim",
|
||||
},
|
||||
},
|
||||
select: {
|
||||
".{{prefix}}select": {
|
||||
// appearance: "none",
|
||||
backgroundColor: "muted",
|
||||
borderColor: "transparent",
|
||||
borderStyle: "solid",
|
||||
borderWidth: "0.125rem",
|
||||
borderRadius: "0.5rem",
|
||||
boxSizing: "border-box",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
fontSize: "inherit",
|
||||
lineHeight: "inherit",
|
||||
margin: "0px",
|
||||
minHeight: "3rem",
|
||||
minWidth: "0px",
|
||||
outline: "0px",
|
||||
padding: ["0.625rem", "1rem"],
|
||||
// verticalAlign: "top",
|
||||
width: "100%",
|
||||
"&:focus": {
|
||||
borderColor: "primary",
|
||||
},
|
||||
apply: "forms.select",
|
||||
},
|
||||
},
|
||||
slider: {
|
||||
".{{prefix}}slider": {
|
||||
appearance: "none",
|
||||
backgroundColor: "muted",
|
||||
borderRadius: "1rem",
|
||||
color: "primary",
|
||||
cursor: "pointer",
|
||||
display: "block",
|
||||
height: "0.25rem",
|
||||
marginBottom: "0.5rem",
|
||||
marginTop: "0.5rem",
|
||||
minWidth: "0px",
|
||||
outline: "none",
|
||||
transition: ["opacity", "0.2s"],
|
||||
width: "100%",
|
||||
"&:-webkit-slider-thumb,&:-moz-range-thumb,&:-ms-thumb": {
|
||||
backgroundColor: "currentColor",
|
||||
border: "none",
|
||||
borderRadius: "999px",
|
||||
boxSizing: "border-box",
|
||||
height: "1rem",
|
||||
width: "1rem",
|
||||
},
|
||||
"&:-webkit-slider-thumb": {
|
||||
appearance: "none",
|
||||
},
|
||||
"&:-ms-thumb": {
|
||||
marginTop: "0px",
|
||||
},
|
||||
apply: "forms.slider",
|
||||
},
|
||||
},
|
||||
spinner: {
|
||||
".{{prefix}}spinner": {
|
||||
color: "primary",
|
||||
display: "inline-block",
|
||||
height: "2rem",
|
||||
position: "relative",
|
||||
width: "2rem",
|
||||
"&:before,&:after": {
|
||||
border: ["0.25rem", "solid", "transparent"],
|
||||
borderRadius: "100%",
|
||||
content: "''",
|
||||
display: "block",
|
||||
height: "2rem",
|
||||
left: "0px",
|
||||
position: "absolute",
|
||||
top: "0px",
|
||||
width: "2rem",
|
||||
},
|
||||
"&:before": {
|
||||
borderColor: "currentColor",
|
||||
opacity: "0.2",
|
||||
},
|
||||
"&:after": {
|
||||
animationDuration: "1s",
|
||||
animationIterationCount: "infinite",
|
||||
animationName: "spinnerAnimation",
|
||||
animationTimingFunction: "linear",
|
||||
borderTopColor: "currentColor",
|
||||
},
|
||||
"&.is-secondary": {
|
||||
color: "secondary"
|
||||
},
|
||||
apply: "spinners",
|
||||
},
|
||||
"@keyframes spinnerAnimation": {
|
||||
from: {
|
||||
transform: "rotate(0deg)",
|
||||
},
|
||||
to: {
|
||||
transform: "rotate(359deg)",
|
||||
},
|
||||
},
|
||||
},
|
||||
switch: {
|
||||
".{{prefix}}switch": {
|
||||
appearance: "none",
|
||||
boxSizing: "border-box",
|
||||
color: "primary",
|
||||
cursor: "pointer",
|
||||
display: "inline-block",
|
||||
height: "1.25rem",
|
||||
position: "relative",
|
||||
width: "2rem",
|
||||
"&:after": {
|
||||
backgroundColor: "white",
|
||||
borderRadius: "100%",
|
||||
content: "''",
|
||||
display: "block",
|
||||
height: "0.875rem",
|
||||
left: "0.1875rem",
|
||||
position: "absolute",
|
||||
top: "0.1875rem",
|
||||
transition: ["left", "0.3s", "ease"],
|
||||
width: "0.875rem",
|
||||
zIndex: "2",
|
||||
},
|
||||
"&:before": {
|
||||
backgroundColor: "muted",
|
||||
borderRadius: "2rem",
|
||||
content: "''",
|
||||
display: "block",
|
||||
height: "100%",
|
||||
left: "0px",
|
||||
position: "absolute",
|
||||
top: "0px",
|
||||
transition: ["background-color", "0.3s", "ease"],
|
||||
width: "100%",
|
||||
zIndex: "1",
|
||||
},
|
||||
"&:checked:after": {
|
||||
left: "1rem",
|
||||
},
|
||||
"&:checked:before": {
|
||||
backgroundColor: "currentColor",
|
||||
},
|
||||
apply: "forms.switch",
|
||||
},
|
||||
},
|
||||
table: {
|
||||
".{{prefix}}table": {
|
||||
backgroundColor: "transparent",
|
||||
borderCollapse: "separate",
|
||||
borderSpacing: "0",
|
||||
borderWidth: "0px",
|
||||
boxSizing: "border-box",
|
||||
display: "table",
|
||||
marginBottom: "2rem",
|
||||
width: "100%",
|
||||
"& tr": {
|
||||
boxSizing: "border-box",
|
||||
display: "table-row",
|
||||
},
|
||||
"& th,& td": {
|
||||
// backgroundColor: "white",
|
||||
boxSizing: "border-box",
|
||||
display: "table-cell",
|
||||
lineHeight: "inherit",
|
||||
padding: "1rem", // "1.5rem",
|
||||
},
|
||||
"& thead": {
|
||||
boxSizing: "border-box",
|
||||
display: "table-header-group",
|
||||
},
|
||||
"& thead th": {
|
||||
fontWeight: "600",
|
||||
textAlign: "left",
|
||||
verticalAlign: "bottom",
|
||||
},
|
||||
"& tbody": {
|
||||
display: "table-row-group",
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
"& tbody td": {
|
||||
verticalAlign: "top",
|
||||
},
|
||||
"& thead tr:first-child th:first-child": {
|
||||
borderTopLeftRadius: "0.5rem",
|
||||
},
|
||||
"& thead tr:first-child th:last-child": {
|
||||
borderTopRightRadius: "0.5rem",
|
||||
},
|
||||
"& tbody tr:last-child td:first-child": {
|
||||
borderBottomLeftRadius: "0.5rem",
|
||||
},
|
||||
"& tbody tr:last-child td:last-child": {
|
||||
borderBottomRightRadius: "0.5rem",
|
||||
},
|
||||
"&.is-divided": {
|
||||
"& thead th": {
|
||||
borderBottomColor: "muted",
|
||||
borderBottomStyle: "solid",
|
||||
borderBottomWidth: "0.125rem",
|
||||
},
|
||||
"& tbody td": {
|
||||
borderTopColor: "muted",
|
||||
borderTopStyle: "solid",
|
||||
borderTopWidth: "0.125rem",
|
||||
},
|
||||
},
|
||||
"&.is-bordered": {
|
||||
"& th,& td": {
|
||||
borderColor: "muted",
|
||||
borderStyle: "solid",
|
||||
borderWidth: "0.125rem",
|
||||
},
|
||||
"& th:not(:last-child),& td:not(:last-child)": {
|
||||
borderRightWidth: ["0px", "!important"],
|
||||
},
|
||||
"& tbody tr:not(:last-child) td": {
|
||||
borderBottomWidth: ["0px", "!important"],
|
||||
},
|
||||
},
|
||||
"&.is-fixed": {
|
||||
tableLayout: "fixed",
|
||||
},
|
||||
apply: "styles.table",
|
||||
},
|
||||
},
|
||||
textarea: {
|
||||
".{{prefix}}textarea": {
|
||||
backgroundColor: "muted",
|
||||
borderColor: "transparent",
|
||||
borderStyle: "solid",
|
||||
borderWidth: "0.125rem",
|
||||
borderRadius: "0.5rem",
|
||||
boxSizing: "border-box",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
fontFamily: "inherit",
|
||||
fontSize: "inherit",
|
||||
lineHeight: "inherit",
|
||||
margin: "0px",
|
||||
minWidth: "0px",
|
||||
outline: "0px",
|
||||
padding: ["0.625rem", "1rem"],
|
||||
resize: "vertical",
|
||||
// verticalAlign: "top",
|
||||
width: "100%",
|
||||
"&:focus": {
|
||||
borderColor: "primary",
|
||||
},
|
||||
apply: "forms.textarea",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
".{{prefix}}title": {
|
||||
display: "block",
|
||||
// fontSize: "2.5rem",
|
||||
fontWeight: "heading",
|
||||
lineHeight: "heading",
|
||||
marginBottom: "0.5em",
|
||||
padding: "0px",
|
||||
"&:not(:first-child)": {
|
||||
marginTop: "2rem",
|
||||
},
|
||||
...Object.fromEntries([6,5,4,3,2,1].map(index => {
|
||||
const headingConfig = {
|
||||
fontSize: `${index}`,
|
||||
};
|
||||
return [`&.is-${(7 - index)}`, headingConfig];
|
||||
})),
|
||||
apply: "text.heading",
|
||||
},
|
||||
},
|
||||
};
|
||||
701
node_modules/@siimple/modules/helpers.js
generated
vendored
Normal file
701
node_modules/@siimple/modules/helpers.js
generated
vendored
Normal file
|
|
@ -0,0 +1,701 @@
|
|||
import {generateHelpers} from "./utils.js";
|
||||
|
||||
// Common values
|
||||
const colorsValues = {
|
||||
white: "#fff",
|
||||
black: "#000",
|
||||
current: "currentColor",
|
||||
transparent: "transparent",
|
||||
};
|
||||
const sizesValues = {
|
||||
none: "0px",
|
||||
one: "1px",
|
||||
half: "50%",
|
||||
full: "100%",
|
||||
};
|
||||
|
||||
// Build helpers
|
||||
export const helpers = {
|
||||
// Colors
|
||||
backgroundColor: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "bg",
|
||||
properties: ["backgroundColor"],
|
||||
states: ["default", "hover", "focus"],
|
||||
responsive: false,
|
||||
scale: "colors",
|
||||
values: colorsValues,
|
||||
}),
|
||||
textColor: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "text",
|
||||
properties: ["color"],
|
||||
states: ["default", "hover", "focus"],
|
||||
responsive: false,
|
||||
scale: "colors",
|
||||
values: colorsValues,
|
||||
}),
|
||||
// Font
|
||||
// font: generateHelpers({
|
||||
// prefix: "has",
|
||||
// shortcut: "font",
|
||||
// properties: ["fontFamily"],
|
||||
// states: ["default"],
|
||||
// responsive: false,
|
||||
// scale: "fonts",
|
||||
// }),
|
||||
// Font sizes
|
||||
fontSize: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "size",
|
||||
properties: ["fontSize"],
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
scale: "fontSizes",
|
||||
}),
|
||||
// Font weights
|
||||
fontWeight: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "weight",
|
||||
properties: ["fontWeight"],
|
||||
states: ["default"],
|
||||
values: {
|
||||
light: "300",
|
||||
normal: "400",
|
||||
medium: "500",
|
||||
bold: "700",
|
||||
black: "900",
|
||||
},
|
||||
}),
|
||||
// Line heights
|
||||
lineHeight: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "lh",
|
||||
properties: ["lineHeight"],
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
values: {
|
||||
none: "1",
|
||||
tight: "1.25",
|
||||
normal: "1.5",
|
||||
loose: "2",
|
||||
},
|
||||
}),
|
||||
// Opacities
|
||||
opacity: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "opacity",
|
||||
properties: ["opacity"],
|
||||
states: ["default", "hover"],
|
||||
responsive: false,
|
||||
scale: "opacities",
|
||||
}),
|
||||
// Radius
|
||||
radius: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "radius",
|
||||
properties: ["borderRadius"],
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
scale: "radius",
|
||||
}),
|
||||
// Shadows
|
||||
shadow: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "shadow",
|
||||
properties: ["boxShadow"],
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
scale: "shadows",
|
||||
}),
|
||||
// Sizes
|
||||
width: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "w",
|
||||
properties: ["width"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "sizes",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
screen: "100vw",
|
||||
},
|
||||
}),
|
||||
minWidth: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "minw",
|
||||
properties: ["min-width"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "sizes",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
screen: "100vw",
|
||||
},
|
||||
}),
|
||||
maxWidth: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "maxw",
|
||||
properties: ["max-width"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "sizes",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
screen: "100vw",
|
||||
},
|
||||
}),
|
||||
height: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "h",
|
||||
properties: ["height"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "sizes",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
screen: "100vh",
|
||||
},
|
||||
}),
|
||||
minHeight: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "minh",
|
||||
properties: ["min-height"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "sizes",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
screen: "100vh",
|
||||
},
|
||||
}),
|
||||
maxHeight: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "maxh",
|
||||
properties: ["max-height"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "sizes",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
screen: "100vh",
|
||||
},
|
||||
}),
|
||||
size: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "s",
|
||||
properties: ["height", "width"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "sizes",
|
||||
values: sizesValues,
|
||||
}),
|
||||
// Position
|
||||
...Object.fromEntries(["bottom","left","right","top"].map(position => {
|
||||
return [position, generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: position,
|
||||
properties: [position],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
values: sizesValues,
|
||||
})];
|
||||
})),
|
||||
// spacing
|
||||
padding: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "p",
|
||||
properties: ["padding"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
paddingX: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "px",
|
||||
properties: ["padding-left", "padding-right"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
paddingY: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "py",
|
||||
properties: ["padding-top", "padding-bottom"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
paddingTop: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "pt",
|
||||
properties: ["padding-top"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
paddingBottom: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "pb",
|
||||
properties: ["padding-bottom"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
paddingLeft: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "pl",
|
||||
properties: ["padding-left"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
paddingRight: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "pr",
|
||||
properties: ["padding-right"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
margin: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "m",
|
||||
properties: ["margin"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
marginX: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "mx",
|
||||
properties: ["margin-left", "margin-right"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
marginY: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "my",
|
||||
properties: ["margin-top", "margin-bottom"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
marginTop: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "mt",
|
||||
properties: ["margin-top"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
marginBottom: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "mb",
|
||||
properties: ["margin-bottom"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
marginLeft: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "ml",
|
||||
properties: ["margin-left"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
marginRight: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "mr",
|
||||
properties: ["margin-right"],
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
scale: "space",
|
||||
values: {
|
||||
...sizesValues,
|
||||
auto: "auto",
|
||||
},
|
||||
}),
|
||||
// Flexbox
|
||||
flex: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "flex",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["flex"],
|
||||
values: {
|
||||
"none": "none",
|
||||
"initial": "initial",
|
||||
"auto": "auto",
|
||||
},
|
||||
}),
|
||||
flexDirection: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "direction",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["flex-direction"],
|
||||
values: {
|
||||
"row": "row",
|
||||
"column": "column",
|
||||
"row-rev": "row-reverse",
|
||||
"column-rev": "column-reverse",
|
||||
},
|
||||
}),
|
||||
flexGrow: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "flex",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["flex-grow"],
|
||||
values: {
|
||||
"grow": "1",
|
||||
"no-grow": "0",
|
||||
},
|
||||
}),
|
||||
flexShrink: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "flex",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["flex-shrink"],
|
||||
values: {
|
||||
"shrink": "1",
|
||||
"no-shrink": "0",
|
||||
},
|
||||
}),
|
||||
flexWrap: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "flex",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["flex-wrap"],
|
||||
values: {
|
||||
"wrap": "wrap",
|
||||
"wrap-rev": "wrap-reverse",
|
||||
"no-wrap": "nowrap",
|
||||
},
|
||||
}),
|
||||
alignContent: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "content",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["align-content"],
|
||||
values: {
|
||||
start: "flex-start",
|
||||
end: "flex-end",
|
||||
center: "center",
|
||||
between: "space-between",
|
||||
around: "space-around",
|
||||
evenly: "space-evenly",
|
||||
},
|
||||
}),
|
||||
alignItems: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "items",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["align-items"],
|
||||
values: {
|
||||
start: "flex-start",
|
||||
end: "flex-end",
|
||||
center: "center",
|
||||
stretch: "stretch",
|
||||
baseline: "baseline",
|
||||
},
|
||||
}),
|
||||
alignSelf: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "self",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["align-self"],
|
||||
values: {
|
||||
auto: "auto",
|
||||
start: "flex-start",
|
||||
end: "flex-end",
|
||||
center: "center",
|
||||
stretch: "stretch",
|
||||
baseline: "baseline",
|
||||
},
|
||||
}),
|
||||
justifyContent: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "justify",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["justify-content"],
|
||||
values: {
|
||||
start: "flex-start",
|
||||
end: "flex-end",
|
||||
center: "center",
|
||||
between: "space-between",
|
||||
around: "space-around",
|
||||
evenly: "space-evenly",
|
||||
},
|
||||
}),
|
||||
justifyItems: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "justify-items",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["justify-items"],
|
||||
values: {
|
||||
start: "start",
|
||||
end: "end",
|
||||
center: "center",
|
||||
stretch: "stretch",
|
||||
},
|
||||
}),
|
||||
justifySelf: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "justify-self",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["justify-self"],
|
||||
values: {
|
||||
auto: "auto",
|
||||
start: "start",
|
||||
end: "end",
|
||||
center: "center",
|
||||
stretch: "stretch",
|
||||
},
|
||||
}),
|
||||
order: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "order",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["order"],
|
||||
values: {
|
||||
none: "0",
|
||||
first: "-999",
|
||||
last: "999",
|
||||
},
|
||||
}),
|
||||
// Text
|
||||
textAlign: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "text",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["text-align"],
|
||||
values: {
|
||||
justified: "justify",
|
||||
left: "left",
|
||||
center: "center",
|
||||
right: "right",
|
||||
},
|
||||
}),
|
||||
// Vertical align
|
||||
verticalAlign: generateHelpers({
|
||||
prefix: "has",
|
||||
shortcut: "align",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["vertical-align"],
|
||||
values: {
|
||||
"baseline": "baseline",
|
||||
"top": "top",
|
||||
"middle": "middle",
|
||||
"bottom": "bottom",
|
||||
"text-top": "text-top",
|
||||
"text-bottom": "text-bottom",
|
||||
},
|
||||
}),
|
||||
// Cursor
|
||||
cursor: generateHelpers({
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["cursor"],
|
||||
important: true,
|
||||
values: {
|
||||
"clickable": ["pointer", "!important"],
|
||||
"not-allowed": ["not-allowed", "!important"],
|
||||
},
|
||||
}),
|
||||
// Display
|
||||
display: generateHelpers({
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["display"],
|
||||
values: {
|
||||
"block": "block",
|
||||
"flex": "flex",
|
||||
"inline": "inline",
|
||||
"inline-block": "inline-block",
|
||||
"inline-flex": "inline-flex",
|
||||
"hidden": "none",
|
||||
},
|
||||
}),
|
||||
// Float
|
||||
float: generateHelpers({
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["float"],
|
||||
values: {
|
||||
"aligned-left": "left",
|
||||
"aligned-right": "right",
|
||||
},
|
||||
}),
|
||||
// Overflow
|
||||
overflow: generateHelpers({
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["overflow"],
|
||||
values: {
|
||||
"clipped": ["hidden", "!important"],
|
||||
"scrollable": ["auto", "!important"],
|
||||
},
|
||||
}),
|
||||
// Position
|
||||
position: generateHelpers({
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: true,
|
||||
properties: ["position"],
|
||||
values: {
|
||||
"relative": "relative",
|
||||
"absolute": "absolute",
|
||||
"sticky": "sticky",
|
||||
"fixed": "fixed",
|
||||
},
|
||||
}),
|
||||
// Text transform
|
||||
textTransform: generateHelpers([
|
||||
{
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["fontStyle"],
|
||||
values: {
|
||||
italic: "italic"
|
||||
},
|
||||
},
|
||||
{
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["textDecoration"],
|
||||
values: {
|
||||
"underlined": "underline",
|
||||
"not-underlined": ["none", "!important"],
|
||||
},
|
||||
},
|
||||
{
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["textTransform"],
|
||||
values: {
|
||||
"capitalized": "capitalize",
|
||||
"lowercase": "lowercase",
|
||||
"uppercase": "uppercase",
|
||||
},
|
||||
},
|
||||
]),
|
||||
// Negative selectors
|
||||
negative: generateHelpers([
|
||||
{
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["borderRadius"],
|
||||
values: {
|
||||
"radiusless": ["0px", "!important"],
|
||||
},
|
||||
},
|
||||
{
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["boxShadow"],
|
||||
values: {
|
||||
"shadowless": ["none", "!important"],
|
||||
},
|
||||
},
|
||||
{
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["userSelect"],
|
||||
values: {
|
||||
"unselectable": ["none", "!important"],
|
||||
},
|
||||
},
|
||||
{
|
||||
prefix: "is",
|
||||
states: ["default"],
|
||||
responsive: false,
|
||||
properties: ["opacity"],
|
||||
values: {
|
||||
transparent: ["0", "!important"],
|
||||
},
|
||||
},
|
||||
]),
|
||||
};
|
||||
39
node_modules/@siimple/modules/index.js
generated
vendored
Normal file
39
node_modules/@siimple/modules/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import {elements} from "./elements.js";
|
||||
import {helpers} from "./helpers.js";
|
||||
import {markup} from "./markup.js";
|
||||
import {reset} from "./reset.js";
|
||||
|
||||
const all = {
|
||||
...elements,
|
||||
...helpers,
|
||||
markup,
|
||||
reset,
|
||||
};
|
||||
|
||||
export const injectModules = config => {
|
||||
const styles = {};
|
||||
// Check for array --> only include specified modules
|
||||
if (config.modules && Array.isArray(config.modules)) {
|
||||
config.modules.forEach(key => {
|
||||
all[key] && Object.assign(styles, all[key]);
|
||||
});
|
||||
}
|
||||
// Check for object or undefined --> exclude modules
|
||||
else if (typeof config.modules === "undefined" || config.modules) {
|
||||
const excludeModules = new Set();
|
||||
Object.keys(config.modules || {}).forEach(key => {
|
||||
if (typeof config.modules[key] === "boolean" && !config.modules[key]) {
|
||||
excludeModules.add(key);
|
||||
}
|
||||
});
|
||||
Object.keys(all).forEach(key => {
|
||||
!excludeModules.has(key) && Object.assign(styles, all[key]);
|
||||
});
|
||||
}
|
||||
return Object.assign(config, {
|
||||
styles: {
|
||||
...styles,
|
||||
...(config.styles || {}),
|
||||
},
|
||||
});
|
||||
};
|
||||
74
node_modules/@siimple/modules/markup.js
generated
vendored
Normal file
74
node_modules/@siimple/modules/markup.js
generated
vendored
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
export const markup = {
|
||||
p: {
|
||||
fontWeight: "body",
|
||||
lineHeight: "body",
|
||||
marginBottom: "1rem",
|
||||
marginTop: "0px",
|
||||
apply: "text.paragraph",
|
||||
},
|
||||
a: {
|
||||
color: "primary",
|
||||
apply: "text.link",
|
||||
},
|
||||
small: {
|
||||
fontSize: "0",
|
||||
apply: "text.small",
|
||||
},
|
||||
"strong,b": {
|
||||
fontWeight: "bold",
|
||||
apply: "text.strong",
|
||||
},
|
||||
pre: {
|
||||
fontFamily: "monospace",
|
||||
overflowX: "auto",
|
||||
},
|
||||
code: {
|
||||
color: "primary",
|
||||
fontFamily: "monospace",
|
||||
fontSize: "0",
|
||||
fontWeight: "bold",
|
||||
textDecoration: "none",
|
||||
apply: "text.code",
|
||||
},
|
||||
hr: {
|
||||
backgroundColor: "muted",
|
||||
border: "0px",
|
||||
display: "block",
|
||||
height: "0.125rem",
|
||||
padding: "0px",
|
||||
"&:not(:first-child)": {
|
||||
marginTop: "1rem",
|
||||
},
|
||||
"&:not(:last-child)": {
|
||||
marginBottom: "1rem",
|
||||
},
|
||||
},
|
||||
blockquote: {
|
||||
borderLeft: ["0.25rem", "solid", "currentColor"],
|
||||
color: "currentColor",
|
||||
display: "block",
|
||||
marginBottom: "1rem",
|
||||
marginLeft: "0px",
|
||||
marginRight: "0px",
|
||||
opacity: "0.6",
|
||||
paddingBottom: "0.75rem",
|
||||
paddingLeft: "1.25rem",
|
||||
paddingRight: "0.75rem",
|
||||
paddingTop: "0.75rem",
|
||||
},
|
||||
table: {
|
||||
width: "100%",
|
||||
},
|
||||
...Object.fromEntries([6,5,4,3,2,1].map(index => {
|
||||
const headingNumber = 7 - index;
|
||||
const headingConfig = {
|
||||
color: "inherit",
|
||||
fontFamily: "heading",
|
||||
fontSize: `${index}`,
|
||||
fontWeight: "heading",
|
||||
lineHeight: "heading",
|
||||
apply: "text.heading",
|
||||
};
|
||||
return [`h${(headingNumber)}`, headingConfig];
|
||||
})),
|
||||
};
|
||||
17
node_modules/@siimple/modules/package.json
generated
vendored
Normal file
17
node_modules/@siimple/modules/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "@siimple/modules",
|
||||
"version": "0.1.0",
|
||||
"description": "Core modules for the siimple css toolkit",
|
||||
"author": "Josemi Juanes <josemi@siimple.xyz>",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/jmjuanes/siimple",
|
||||
"bugs": "https://github.com/jmjuanes/siimple/issues",
|
||||
"homepage": "https://www.siimple.xyz",
|
||||
"main": "index.js",
|
||||
"keywords": [
|
||||
"siimple",
|
||||
"modules",
|
||||
"core"
|
||||
]
|
||||
}
|
||||
55
node_modules/@siimple/modules/reset.js
generated
vendored
Normal file
55
node_modules/@siimple/modules/reset.js
generated
vendored
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
export const reset = {
|
||||
// Reset box sizing of all elements
|
||||
// *,
|
||||
// *:before,
|
||||
// *:after {
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
// Set default html style
|
||||
html: {
|
||||
// boxSizing: "border-box",
|
||||
scrollBehavior: "smooth",
|
||||
},
|
||||
// Set default body style
|
||||
body: {
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
minHeight: "100vh",
|
||||
textRendering: "optimizeLegibility",
|
||||
"-webkit-font-smoothing": "antialiased",
|
||||
"-moz-osx-font-smoothing": "grayscale",
|
||||
},
|
||||
// Reset margins on lists
|
||||
"ul,ol,dl": {
|
||||
marginBottom: "1rem",
|
||||
marginTop: "0",
|
||||
},
|
||||
// Reset margins on paragraphs
|
||||
p: {
|
||||
marginBottom: "1rem",
|
||||
marginTop: "0",
|
||||
},
|
||||
// Fix bold weight (in firefox)
|
||||
"strong,b": {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
// Make images and videos responsive by default
|
||||
"img,video": {
|
||||
display: "block",
|
||||
height: "auto",
|
||||
maxWidth: "100%",
|
||||
},
|
||||
// Remove border from iframe
|
||||
iframe: {
|
||||
border: "0",
|
||||
},
|
||||
// Reset table border
|
||||
table: {
|
||||
borderCollapse: "collapse",
|
||||
borderSpacing: "0",
|
||||
},
|
||||
// td,
|
||||
// th {
|
||||
// padding: 0;
|
||||
// }
|
||||
};
|
||||
61
node_modules/@siimple/modules/utils.js
generated
vendored
Normal file
61
node_modules/@siimple/modules/utils.js
generated
vendored
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// Helpers generator
|
||||
export const generateHelpers = helpers => {
|
||||
return [helpers].flat().reduce((styles, item) => {
|
||||
const prefix = [item.prefix, item.shortcut].filter(n => !!n).join("-");
|
||||
// Themeable helpers
|
||||
if (item.scale) {
|
||||
const themeStyles = {
|
||||
[`@theme ${item.scale}`]: {
|
||||
"&": Object.fromEntries(item.properties.map(name => {
|
||||
return [name, "value"];
|
||||
})),
|
||||
},
|
||||
};
|
||||
// Generate states
|
||||
item.states.forEach(state => {
|
||||
if (state === "default") {
|
||||
styles[`.${prefix}-{{name}}`] = themeStyles;
|
||||
}
|
||||
else if (state === "focus" || state === "hover") {
|
||||
styles[`.${prefix}-{{name}}-${state}:${state}`] = themeStyles;
|
||||
}
|
||||
});
|
||||
// Responsive
|
||||
if (!!item.responsive) {
|
||||
styles[`.${prefix}-{{name}}-{{breakpoint}}`] = {
|
||||
"@breakpoints": themeStyles,
|
||||
};
|
||||
}
|
||||
// return [`.has-${item.shortcut}{{name}}`, helperStyles];
|
||||
}
|
||||
// Additional helpers
|
||||
if (item.values) {
|
||||
Object.keys(item.values).map(name => {
|
||||
const valueStyles = Object.fromEntries(item.properties.map(property => {
|
||||
return [property, item.values[name]];
|
||||
}));
|
||||
// Generate states
|
||||
item.states.forEach(state => {
|
||||
if (state === "default") {
|
||||
styles[`.${prefix}-${name}`] = valueStyles;
|
||||
}
|
||||
else if (state === "hover" || state === "focus") {
|
||||
styles[`.${prefix}-${name}-${state}:${state}`] = valueStyles;
|
||||
}
|
||||
});
|
||||
// Responsive styles
|
||||
if (!!item.responsive) {
|
||||
styles[`.${prefix}-${name}-{{breakpoint}}`] = {
|
||||
"@breakpoints": {
|
||||
"&": valueStyles,
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
// return [`.has-${item.shortcut}`, helperStyles];
|
||||
}
|
||||
// Generate helper block
|
||||
// return [`.${[item.prefix, item.shortcut].filter(n => !!n).join("-")}`, styles];
|
||||
return styles;
|
||||
}, {});
|
||||
};
|
||||
34
node_modules/@siimple/preset-base/README.md
generated
vendored
Normal file
34
node_modules/@siimple/preset-base/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
# @siimple/preset-base
|
||||
|
||||
Default theme preset for the **siimple CSS toolkit**.
|
||||
|
||||
## Install
|
||||
|
||||
Install this package using **npm**:
|
||||
|
||||
```bash
|
||||
$ npm install --save @siimple/preset-base
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Use the base theme in your `siimple.config.js` file:
|
||||
|
||||
```js
|
||||
import base from "@siimple/preset-base";
|
||||
|
||||
export default {
|
||||
// Import all default scales, breakpoints and root styles
|
||||
...base,
|
||||
// Extend default theme scales
|
||||
colors: {
|
||||
...base.colors,
|
||||
text: "#000",
|
||||
},
|
||||
// ...other configuration
|
||||
};
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
|
||||
153
node_modules/@siimple/preset-base/index.js
generated
vendored
Normal file
153
node_modules/@siimple/preset-base/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import colors from "@siimple/colors";
|
||||
|
||||
export const extraColors = {
|
||||
inherit: "inherit",
|
||||
white: "#fff",
|
||||
black: "#000",
|
||||
current: "currentColor",
|
||||
transparent: "transparent",
|
||||
};
|
||||
|
||||
export const fonts = {
|
||||
sans: [
|
||||
"-apple-system",
|
||||
"BlinkMacSystemFont",
|
||||
"'Segoe UI'",
|
||||
"Roboto",
|
||||
"'Helvetica Neue'",
|
||||
"Arial",
|
||||
"sans-serif",
|
||||
].join(","),
|
||||
serif: [
|
||||
"Georgia",
|
||||
"Cambria",
|
||||
"'Times New Roman'",
|
||||
"Times",
|
||||
"serif",
|
||||
].join(","),
|
||||
monospace: [
|
||||
"SFMono-Regular",
|
||||
"Menlo",
|
||||
"Monaco",
|
||||
"Consolas",
|
||||
"'Liberation Mono'",
|
||||
"'Courier New'",
|
||||
"monospace",
|
||||
].join(","),
|
||||
};
|
||||
|
||||
export const screens = {
|
||||
tablet: "640px",
|
||||
desktop: "1264px",
|
||||
widescreen: "1504px",
|
||||
};
|
||||
|
||||
export const sizes = {
|
||||
"0": "0px",
|
||||
"1": "0.25rem",
|
||||
"2": "0.5rem",
|
||||
"3": "0.75rem",
|
||||
"4": "1rem",
|
||||
"6": "1.5rem",
|
||||
"8": "2rem",
|
||||
"12": "3rem",
|
||||
"16": "4rem",
|
||||
"24": "6rem",
|
||||
"32": "8rem",
|
||||
"40": "10rem",
|
||||
"48": "12rem",
|
||||
"64": "16rem",
|
||||
"80": "20rem",
|
||||
"96": "24rem",
|
||||
};
|
||||
|
||||
export default {
|
||||
breakpoints: {
|
||||
mobile: {
|
||||
max: screens.tablet,
|
||||
},
|
||||
tablet: {
|
||||
min: screens.tablet,
|
||||
},
|
||||
desktop: {
|
||||
min: screens.desktop,
|
||||
},
|
||||
widescreen: {
|
||||
min: screens.widescreen,
|
||||
},
|
||||
},
|
||||
colors: {
|
||||
primary: colors.blue["500"],
|
||||
secondary: colors.royal["500"],
|
||||
muted: colors.gray["200"],
|
||||
text: colors.gray["700"],
|
||||
heading: colors.gray["800"],
|
||||
background: "#fff",
|
||||
// All colors
|
||||
...Object.keys(colors).reduce((prev, name) => ({
|
||||
...prev,
|
||||
...Object.fromEntries(Object.keys(colors[name]).map(shade => {
|
||||
return [`${name}-${shade}`, colors[name][shade]];
|
||||
})),
|
||||
}), {}),
|
||||
// ...extraColors,
|
||||
},
|
||||
fonts: {
|
||||
body: fonts.sans,
|
||||
heading: "inherit",
|
||||
sans: fonts.sans,
|
||||
monospace: fonts.monospace,
|
||||
},
|
||||
fontSizes: [
|
||||
"0.875rem", // 0
|
||||
"16px", // 1
|
||||
"1.25rem", // 2
|
||||
"1.5rem", // 3
|
||||
"1.75rem", // 4
|
||||
"2rem", // 5
|
||||
"2.5rem", // 6
|
||||
"3rem",
|
||||
"3.5rem",
|
||||
"4rem",
|
||||
"4.5rem",
|
||||
],
|
||||
fontWeights: {
|
||||
body: "400",
|
||||
bold: "700",
|
||||
heading: "700",
|
||||
},
|
||||
lineHeights: {
|
||||
heading: "1.25",
|
||||
body: "1.5",
|
||||
},
|
||||
opacities: {
|
||||
"0": 0,
|
||||
"25": 0.25,
|
||||
"50": 0.5,
|
||||
"75": 0.75,
|
||||
"100": 100,
|
||||
},
|
||||
radius: {
|
||||
sm: "0.25rem",
|
||||
md: "0.5rem",
|
||||
lg: "0.75rem",
|
||||
xl: "1rem",
|
||||
full: "9999px",
|
||||
},
|
||||
shadows: {
|
||||
sm: "0 0.25rem 1rem -0.125rem rgba(54,63,79,0.15),0 0 0 1px rgba(54,63,79,0.02)",
|
||||
md: "0 0.5rem 1rem -0.25rem rgba(54,63,79,0.2), 0 0 0 1px rgba(54,63,79,0.02)",
|
||||
lg: "0rem 1rem 1rem -0.5rem rgba(54,63,79,0.25),0 0 0 1px rgba(54,63,79,0.02)",
|
||||
},
|
||||
sizes: sizes,
|
||||
space: sizes,
|
||||
// Default root styles
|
||||
root: {
|
||||
backgroundColor: "background",
|
||||
color: "text",
|
||||
fontFamily: "body",
|
||||
fontSize: "1",
|
||||
fontWeight: "body",
|
||||
lineHeight: "body",
|
||||
},
|
||||
};
|
||||
20
node_modules/@siimple/preset-base/package.json
generated
vendored
Normal file
20
node_modules/@siimple/preset-base/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "@siimple/preset-base",
|
||||
"version": "0.1.0",
|
||||
"description": "Base theme preset for the siimple css toolkit",
|
||||
"author": "Josemi Juanes <josemi@siimple.xyz>",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/jmjuanes/siimple",
|
||||
"bugs": "https://github.com/jmjuanes/siimple/issues",
|
||||
"homepage": "https://www.siimple.xyz",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"@siimple/colors": "^0.1.0"
|
||||
},
|
||||
"keywords": [
|
||||
"siimple",
|
||||
"preset",
|
||||
"theme"
|
||||
]
|
||||
}
|
||||
179
node_modules/siimple/README.md
generated
vendored
Normal file
179
node_modules/siimple/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
|
||||
|
||||
|
||||
[](https://npmjs.com/package/siimple)
|
||||
[](https://github.com/jmjuanes/siimple/discussions)
|
||||
[](https://github.com/jmjuanes/siimple)
|
||||
|
||||
> **siimple**: a minimal and themeable CSS toolkit for flat and clean designs.
|
||||
|
||||
## Links
|
||||
|
||||
- Documentation: https://www.siimple.xyz/docs.
|
||||
- Online playground: https://www.siimple.xyz/playground.
|
||||
- Report a bug or request a feature: https://github.com/jmjuanes/siimple/issues.
|
||||
- Get help: https://github.com/jmjuanes/siimple/discussions.
|
||||
|
||||
## Features
|
||||
|
||||
- **Modular UI blocks**: **siimple** provides a collection of small UI blocks, called **elements**, that you can use to build complex UI components.
|
||||
- **Themeable**: customize **siimple** with your project specific colors, fonts, and more!
|
||||
- **Fast**: generate your customized version of **siimple** in milliseconds.
|
||||
- **Tiny**: the core of **siimple** has less than 500 lines of code.
|
||||
- **Pure CSS in JS implementation**: **siimple** implements a pure CSS in JS parser with no dependencies.
|
||||
- **Easy to extend**: extend **siimple** with reusable styles and themes.
|
||||
|
||||
## Usage
|
||||
|
||||
### CLI usage
|
||||
|
||||
Make sure you have **Node.js 14.x** installed on your computer. Add **siimple** to your project running the following command:
|
||||
|
||||
```bash
|
||||
$ npm install --save siimple
|
||||
```
|
||||
|
||||
Create a file called `siimple.config.js` with your configuration:
|
||||
|
||||
```js
|
||||
import colors from "@siimple/colors";
|
||||
import base from "@siimple/preset-base";
|
||||
|
||||
export default {
|
||||
...base,
|
||||
useRootStyles: false,
|
||||
useBorderBox: true,
|
||||
prefix: "",
|
||||
colors: {
|
||||
primary: colors.blue["500"],
|
||||
secondary: colors.mint["600"],
|
||||
text: colors.gray["800"],
|
||||
background: "#fff",
|
||||
muted: colors.gray["200"],
|
||||
},
|
||||
fonts: {
|
||||
body: ["Roboto", "sans-serif"],
|
||||
heading: ["Montserrat", "sans-serif"],
|
||||
code: ["monospace"],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Generate your customized version of **siimple**:
|
||||
|
||||
```bash
|
||||
$ npx siimple -c ./siimple.config.js -o ./output.css
|
||||
```
|
||||
|
||||
> **Note**: **siimple** uses ECMAScript modules, so you will need to set `"type": "module"` in your `package.json` file or use `.mjs` as the extension for your configuration file (`siimple.config.mjs`).
|
||||
|
||||
## Configuration
|
||||
|
||||
A configuration file is where you can provide your custom theme scales, variants and styles for generating your customized version of **siimple** or to adapt it to your project look and feel.
|
||||
|
||||
Read more about the [configuration](https://www.siimple.xyz/docs/configuration/).
|
||||
|
||||
### Core modules (added in v4.1.0)
|
||||
|
||||
In the `modules` field of your configuration you can disable the core modules (elements, helpers, markup or reset) that you do not need for your project.
|
||||
|
||||
```js title=siimple.config.js
|
||||
export default {
|
||||
modules: {
|
||||
button: false,
|
||||
badge: false,
|
||||
margin: false,
|
||||
reset: false,
|
||||
},
|
||||
// ...other configuration
|
||||
};
|
||||
```
|
||||
|
||||
### Theme scales
|
||||
|
||||
Use the theme scales to configure the list of CSS properties specific for your project, that includes colors, fonts, sizes, and more!
|
||||
|
||||
```js title=siimple.config.js
|
||||
import colors from "@siimple/colors";
|
||||
|
||||
export default {
|
||||
colors: {
|
||||
primary: colors.blue["500"],
|
||||
secondary: colors.mint["600"],
|
||||
text: colors.gray["800"],
|
||||
background: "#fff",
|
||||
},
|
||||
fonts: {
|
||||
body: ["Roboto", "sans-serif"],
|
||||
heading: ["Montserrat", "sans-serif"],
|
||||
monospace: ["monospace"],
|
||||
},
|
||||
// ...other configuration
|
||||
};
|
||||
```
|
||||
|
||||
Read more about [theming](https://www.siimple.xyz/docs/theme).
|
||||
|
||||
### Mixins
|
||||
|
||||
Mixins can be used to recycle blocks of styles and to change the look and feel of elements.
|
||||
|
||||
```js title=siimple.config.js
|
||||
export default {
|
||||
buttons: {
|
||||
backgroundColor: "primary",
|
||||
color: "white",
|
||||
},
|
||||
// ...other theme configuration
|
||||
styles: {
|
||||
"button": {
|
||||
// ...other button styles
|
||||
apply: "buttons",
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom styles
|
||||
|
||||
You can specify your custom styles in the configuration file, using a [CSS-in-JS styles syntax](https://www.siimple.xyz/docs/guides/styles).
|
||||
|
||||
```js
|
||||
export default {
|
||||
// ...other configuration
|
||||
styles: {
|
||||
".comment": {
|
||||
backgroundColor: "gray",
|
||||
color: "currentColor",
|
||||
padding: "1rem",
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
This will generate:
|
||||
|
||||
```css
|
||||
.comment {
|
||||
background-color: gray;
|
||||
color: currentColor;
|
||||
padding: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
### Presets
|
||||
|
||||
Presets allows to extend **siimple** using reusable theme scales (like colors and fonts) and styles. Presets can be imported and used in your configuration file:
|
||||
|
||||
```js
|
||||
import base from "@siimple/preset-base";
|
||||
|
||||
export default {
|
||||
...base,
|
||||
// ...other configuration
|
||||
};
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
|
||||
52
node_modules/siimple/cli.js
generated
vendored
Executable file
52
node_modules/siimple/cli.js
generated
vendored
Executable file
|
|
@ -0,0 +1,52 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
import {css} from "@siimple/core";
|
||||
import {injectModules} from "@siimple/modules";
|
||||
|
||||
// Get CLI arguments
|
||||
const getArguments = () => {
|
||||
const args = process.argv.slice(2);
|
||||
const configIndex = args.indexOf("-c");
|
||||
const outputIndex = args.indexOf("-o");
|
||||
return {
|
||||
config: configIndex > -1 && args[configIndex + 1] ? args[configIndex + 1] : null,
|
||||
output: outputIndex > -1 && args[outputIndex + 1] ? args[outputIndex + 1] : null,
|
||||
};
|
||||
};
|
||||
|
||||
// Resolve configuration
|
||||
const resolveConfig = configPath => {
|
||||
return import(configPath).then(rawConfig => rawConfig.default);
|
||||
};
|
||||
|
||||
// Generate siimple CSS
|
||||
process.nextTick(() => {
|
||||
const args = getArguments();
|
||||
if (!args.config) {
|
||||
console.error("No input configuration provided. Use the '-c' option.");
|
||||
return process.exit(1);
|
||||
}
|
||||
const configPath = path.resolve(process.cwd(), args.config);
|
||||
if (!fs.existsSync(configPath)) {
|
||||
console.error(`Configuration file '${configPath}' does not exist.`);
|
||||
return process.exit(1);
|
||||
}
|
||||
// Import configuration
|
||||
return resolveConfig(configPath).then(config => {
|
||||
return css(injectModules(config));
|
||||
}).then(result => {
|
||||
// Print file in stdout
|
||||
if (!args.output) {
|
||||
return process.stdout.write(result);
|
||||
}
|
||||
// Save to file
|
||||
const outputPath = path.resolve(process.cwd(), args.output);
|
||||
fs.writeFileSync(outputPath, result, "utf8");
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
process.exit(1);
|
||||
});
|
||||
});
|
||||
6
node_modules/siimple/index.js
generated
vendored
Normal file
6
node_modules/siimple/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// Export the same API from @siimple/core
|
||||
export {css, mergeConfig, mergeStyles} from "@siimple/core";
|
||||
export {injectModules} from "@siimple/modules";
|
||||
|
||||
// Export base theme
|
||||
export {default as base} from "@siimple/preset-base";
|
||||
28
node_modules/siimple/package.json
generated
vendored
Normal file
28
node_modules/siimple/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "siimple",
|
||||
"version": "4.1.0",
|
||||
"description": "A minimal and themeable CSS framework for flat and clean designs.",
|
||||
"author": "Josemi Juanes <josemi@siimple.xyz>",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/jmjuanes/siimple",
|
||||
"bugs": "https://github.com/jmjuanes/siimple/issues",
|
||||
"homepage": "https://www.siimple.xyz",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
"siimple": "./cli.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@siimple/core": "^0.1.0",
|
||||
"@siimple/modules": "^0.1.0",
|
||||
"@siimple/preset-base": "^0.1.0"
|
||||
},
|
||||
"keywords": [
|
||||
"siimple",
|
||||
"flat",
|
||||
"minimal",
|
||||
"themeable",
|
||||
"css",
|
||||
"css-framework"
|
||||
]
|
||||
}
|
||||
14
node_modules/siimple/siimple.config.js
generated
vendored
Normal file
14
node_modules/siimple/siimple.config.js
generated
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import theme from "@siimple/preset-base";
|
||||
// import colors from "@siimple/colors";
|
||||
|
||||
export default {
|
||||
useRootStyles: true,
|
||||
useBorderBox: true,
|
||||
prefix: "",
|
||||
...theme,
|
||||
sizes: {
|
||||
...theme.sizes,
|
||||
"192": "48rem",
|
||||
},
|
||||
styles: {},
|
||||
};
|
||||
1
node_modules/siimple/siimple.css
generated
vendored
Normal file
1
node_modules/siimple/siimple.css
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue