refactor: rename preset-theme package to preset-base

jmjuanes · Jul 2, 2022 · bdc0948 · bdc0948
1 parent 44b2edb
commit bdc0948
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,7 @@
+---
+title: Base theme
+---
+
+import Readme from "../../packages/preset-base/README.md";
+
+<Readme />
diff --git a/docs/packages/theme.mdx b/docs/packages/theme.mdx
diff --git a/packages/preset-theme/README.md → packages/preset-base/README.md b/packages/preset-theme/README.md → packages/preset-base/README.md
@@ -1,4 +1,4 @@
-# @siimple/preset-theme
+# @siimple/preset-base
 
 Default theme preset for the **siimple CSS toolkit**.
 
@@ -7,15 +7,15 @@ 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
 
 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 → packages/preset-base/index.js b/packages/preset-theme/index.js → packages/preset-base/index.js
diff --git a/packages/preset-theme/package.json → packages/preset-base/package.json b/packages/preset-theme/package.json → 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 <josemi@siimple.xyz>",
     "type": "module",
     "license": "MIT",

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,20 +21,20 @@ 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"],
         background: colors.royal["100"],
         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
@@ -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
@@ -2,15 +2,15 @@ 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;
 
 // Available modules from siimple
 const modules = {
     "colors": colors,
     // "preset-helpers/utils": helpersUtils,
-    "preset-theme": theme,
+    "preset-base": theme,
 };
 
 let prevConfig = null;