diff --git a/README.md b/README.md
index 4eb2bd7b5..a973aef6f 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ Along with the main `siimple` package, the packages listed in the table below ar
| [@siimple/core](https://github.com/jmjuanes/siimple/tree/main/packages/core/) | Core engine of the siimple CSS toolkit. | :heavy_check_mark: |
| [@siimple/modules](https://github.com/jmjuanes/siimple/tree/main/packages/modules/) | Core modules of siimple. | :heavy_check_mark: |
| [@siimple/colors](https://github.com/jmjuanes/siimple/tree/main/packages/colors/) | Color palette for siimple. | :heavy_check_mark: |
-| [@siimple/preset-theme](https://github.com/jmjuanes/siimple/tree/main/packages/preset-theme/) | Default theme of siimple. | :heavy_check_mark: |
+| [@siimple/preset-base](https://github.com/jmjuanes/siimple/tree/main/packages/preset-base/) | Base theme of siimple. | :heavy_check_mark: |
The version of these packages are different from the main `siimple` package, but follows this convention: the version `4.x.y` of `siimple` equals to version `0.x.y` of all packages published in the `@siimple` organization.
diff --git a/docs/configuration.mdx b/docs/configuration.mdx
index 716f37600..15c233844 100644
--- a/docs/configuration.mdx
+++ b/docs/configuration.mdx
@@ -10,7 +10,7 @@ This is an example of a configuration file for **siimple**:
```js title=siimple.config.js
import colors from "@siimple/colors";
-import theme from "@siimple/preset-theme";
+import theme from "@siimple/preset-base";
export default {
...theme,
@@ -190,10 +190,10 @@ Styles defined in this section must follow the [styles syntax](/guides/styles) s
Presets allows you to extend **siimple** with reusable styles, mixins and theme scales.
```js title=siimple.config.js
-import theme from "@siimple/preset-theme";
+import base from "@siimple/preset-base";
export default {
- ...theme,
+ ...base,
// ...other configuration
};
```
diff --git a/docs/index.mdx b/docs/index.mdx
index 35013b75a..b389a1db6 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -26,13 +26,13 @@ You can use the siimple CLI tool to generate your customized version of siimple.
```js title=siimple.config.js
import colors from "@siimple/colors";
-import theme from "@siimple/preset-theme";
+import base from "@siimple/preset-base";
export default {
useRootStyles: false,
useBorderBox: true,
prefix: "",
- ...theme,
+ ...base,
colors: {
primary: colors.blue["500"],
secondary: colors.mint["600"],
diff --git a/docs/packages.mdx b/docs/packages.mdx
index ce285bde5..c779508bb 100644
--- a/docs/packages.mdx
+++ b/docs/packages.mdx
@@ -8,9 +8,4 @@ In addition with the original `siimple` package, we maintain the following packa
- [`@siimple/core`](/packages/core): the core and agnostic engine of **siimple**, that you can use for building your own CSS framework.
- [`@siimple/colors`](/packages/colors): our color palette.
-- [`@siimple/preset-theme`](/packages/theme): our default theme primitives, that includes colors, fonts, sizes and spaces.
-- [`@siimple/preset-elements`](/packages/elements): a preset for adding a collection of essential UI elements.
-- [`@siimple/preset-helpers`](/packages/helpers): a preset for adding CSS modifiers.
-- [`@siimple/preset-reboot`](/packages/reboot): a preset for adding CSS reset styles.
-- [`@siimple/preset-markup`](/packages/markup): a preset for styling markup elements.
-- [`@siimple/preset-icons`](/packages/icons): a preset for adding a collection of pure CSS icons.
+- [`@siimple/preset-base`](/packages/base): our default theme primitives, that includes colors, fonts, sizes and spaces.
diff --git a/docs/packages/base.mdx b/docs/packages/base.mdx
new file mode 100644
index 000000000..7a1c3e957
--- /dev/null
+++ b/docs/packages/base.mdx
@@ -0,0 +1,7 @@
+---
+title: Base theme
+---
+
+import Readme from "../../packages/preset-base/README.md";
+
+
diff --git a/docs/packages/theme.mdx b/docs/packages/theme.mdx
deleted file mode 100644
index b36514023..000000000
--- a/docs/packages/theme.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Theme
----
-
-import Readme from "../../packages/preset-theme/README.md";
-
-
diff --git a/packages/preset-theme/README.md b/packages/preset-base/README.md
similarity index 82%
rename from packages/preset-theme/README.md
rename to packages/preset-base/README.md
index fef0d6b5a..51edcb61b 100644
--- a/packages/preset-theme/README.md
+++ b/packages/preset-base/README.md
@@ -1,4 +1,4 @@
-# @siimple/preset-theme
+# @siimple/preset-base
Default theme preset for the **siimple CSS toolkit**.
@@ -7,7 +7,7 @@ Default theme preset for the **siimple CSS toolkit**.
Install this package using **npm**:
```bash
-$ npm install --save @siimple/preset-theme
+$ npm install --save @siimple/preset-base
```
## Usage
@@ -15,7 +15,7 @@ $ npm install --save @siimple/preset-theme
Use default theme in your `siimple.config.js` file:
```js
-import theme from "@siimple/preset-theme";
+import theme from "@siimple/preset-base";
export default {
// Import all default scales, breakpoints and root styles
diff --git a/packages/preset-theme/index.js b/packages/preset-base/index.js
similarity index 100%
rename from packages/preset-theme/index.js
rename to packages/preset-base/index.js
diff --git a/packages/preset-theme/package.json b/packages/preset-base/package.json
similarity index 80%
rename from packages/preset-theme/package.json
rename to packages/preset-base/package.json
index d66bc39fe..312193640 100644
--- a/packages/preset-theme/package.json
+++ b/packages/preset-base/package.json
@@ -1,7 +1,7 @@
{
- "name": "@siimple/preset-theme",
+ "name": "@siimple/preset-base",
"version": "0.0.2",
- "description": "Default theme preset for the siimple css toolkit",
+ "description": "Base theme preset for the siimple css toolkit",
"author": "Josemi Juanes ",
"type": "module",
"license": "MIT",
diff --git a/siimple/README.md b/siimple/README.md
index 1aa9c7752..08fad514a 100644
--- a/siimple/README.md
+++ b/siimple/README.md
@@ -34,10 +34,10 @@ Create a file called `siimple.config.js` with your configuration:
```js
import colors from "@siimple/colors";
-import theme from "@siimple/preset-theme";
+import base from "@siimple/preset-base";
export default {
- ...theme,
+ ...base,
useRootStyles: false,
useBorderBox: true,
prefix: "",
@@ -161,10 +161,10 @@ This will generate:
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 theme from "@siimple/preset-theme";
+import base from "@siimple/preset-base";
export default {
- ...theme,
+ ...base,
// ...other configuration
};
```
diff --git a/siimple/index.js b/siimple/index.js
index 80ff0b3f7..8b2c326eb 100644
--- a/siimple/index.js
+++ b/siimple/index.js
@@ -2,5 +2,5 @@
export {css, mergeConfig, mergeStyles} from "@siimple/core";
export {injectModules} from "@siimple/modules";
-// Export default theme
-export {default as theme} from "@siimple/preset-theme";
+// Export base theme
+export {default as base} from "@siimple/preset-base";
diff --git a/siimple/package.json b/siimple/package.json
index 13c8b8bae..2a90bbebc 100644
--- a/siimple/package.json
+++ b/siimple/package.json
@@ -15,7 +15,7 @@
"dependencies": {
"@siimple/core": "^0.0.2",
"@siimple/modules": "^0.1.0",
- "@siimple/preset-theme": "^0.0.2"
+ "@siimple/preset-base": "^0.0.2"
},
"keywords": [
"siimple",
diff --git a/siimple/siimple.config.js b/siimple/siimple.config.js
index 92acb4d9e..f3f9fd0db 100644
--- a/siimple/siimple.config.js
+++ b/siimple/siimple.config.js
@@ -1,4 +1,4 @@
-import theme from "@siimple/preset-theme";
+import theme from "@siimple/preset-base";
// import colors from "@siimple/colors";
export default {
diff --git a/website/docs/sidebar.js b/website/docs/sidebar.js
index 6b7c0500b..efad81e88 100644
--- a/website/docs/sidebar.js
+++ b/website/docs/sidebar.js
@@ -47,7 +47,7 @@ export const sidebarItems = [
{"group": "packages", "url": "/packages/core", "label": "@siimple/core"},
{"group": "packages", "url": "/packages/modules", "label": "@siimple/modules"},
{"group": "packages", "url": "/packages/colors", "label": "@siimple/colors"},
- {"group": "packages", "url": "/packages/theme", "label": "@siimple/preset-theme"},
+ {"group": "packages", "url": "/packages/base", "label": "@siimple/preset-base"},
{"group": "guides", "url": "/guides/styles", "label": "Styles syntax"},
{"group": "recipes", "url": "/recipes/features", "label": "Features"},
{"group": "recipes", "url": "/recipes/footer", "label": "Footer"},
diff --git a/website/landing/pages/index.mdx b/website/landing/pages/index.mdx
index 4cde6f820..0ab844d72 100644
--- a/website/landing/pages/index.mdx
+++ b/website/landing/pages/index.mdx
@@ -21,12 +21,12 @@ import {Welcome} from "../components/Welcome.js";
```js title=siimple.config.js
import colors from "@siimple/colors";
-import theme from "@siimple/preset-theme";
+import base from "@siimple/preset-base";
export default {
- ...theme,
+ ...base,
colors: {
- ...theme.colors,
+ ...base.colors,
primary: colors.royal["500"],
secondary: colors.mint["500"],
text: colors.royal["800"],
@@ -34,7 +34,7 @@ export default {
muted: colors.royal["200"],
},
fonts: {
- ...theme.fonts,
+ ...base.fonts,
heading: ["Nunito", "sans-serif"],
code: ["monospace"],
},
diff --git a/website/playground/defaults.js b/website/playground/defaults.js
index b321a4ba0..777945bd7 100644
--- a/website/playground/defaults.js
+++ b/website/playground/defaults.js
@@ -22,13 +22,13 @@ export const defaultConfig = `
// import colors from "@siimple/colors";
// You can import presets to extend siimple using reusable styles and themes
-import theme from "@siimple/preset-theme";
+import base from "@siimple/preset-base";
export default {
modules: {},
useBorderBox: true,
useRootStyles: true,
- ...theme,
+ ...base,
styles: {
// Include your custom styles
},
diff --git a/website/playground/worker.js b/website/playground/worker.js
index 94d1c899e..7057ccf77 100644
--- a/website/playground/worker.js
+++ b/website/playground/worker.js
@@ -2,7 +2,7 @@ import {css} from "@siimple/core";
import colors from "@siimple/colors";
import {injectModules} from "@siimple/modules";
// import * as helpersUtils from "@siimple/preset-helpers/utils.js";
-import theme from "@siimple/preset-theme";
+import theme from "@siimple/preset-base";
const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
@@ -10,7 +10,7 @@ const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
const modules = {
"colors": colors,
// "preset-helpers/utils": helpersUtils,
- "preset-theme": theme,
+ "preset-base": theme,
};
let prevConfig = null;