Merge pull request #10 from SandroMiguel/dark-theme

feat: add dark theme

CONTRIBUTING.md

@@ -0,0 +1,49 @@
+# Contributing to Cecilia Classless
+
+Thank you for considering contributing to Cecilia Classless! We welcome contributions from everyone.
+
+### Getting Started
+
+1. Fork the repository and clone it locally.
+2. Install dependencies by running `yarn install`.
+3. Make your changes or add new features.
+4. Test your changes to ensure they work as expected.
+5. Commit your changes and push them to your fork.
+6. Submit a pull request with a clear description of your changes.
+
+## Development Environment
+
+To set up your development environment, you'll need:
+
+-   Node.js and npm installed on your machine.
+-   Your favorite code editor.
+
+## Customizing Variables
+
+Cecilia Classless offers a set of customizable CSS variables to allow for easy theming and customization. To customize default values, override the desired CSS variables in your own stylesheet. Here are some key variables you can customize:
+
+```css
+/* Import Cecilia-Classless */
+@import 'cecilia-classless.css';
+
+/* Override default values */
+:root {
+    --cecilia-color-base: #1f1f1f;
+    --cecilia-primary-color: #007bff;
+    --cecilia-secondary-color: #6c757d;
+    /* Add more custom variable overrides here */
+}
+```
+
+## Theming
+
+Cecilia Classless uses a default theme that is compiled when specific variables for a custom theme are not defined. To customize the theme, simply define the desired CSS variables in your own stylesheet. Here's an example of how to create a custom theme:
+
+```css
+/* Custom theme */
+:root {
+    --color-base: #ffffff; /* Base text color */
+    --background-color: #1f1f1f; /* Default background color */
+    /* Add more custom variable overrides for your theme */
+}
+```

README.md

@@ -58,6 +58,29 @@ Here's an example of how you can replace the default values:
 }
 ```
 
+| Variable                            | Description                                     | Default Value                                                          |
+| ----------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------- |
+| `--cecilia-sm-container-max-width`  | Maximum width for small containers.             | `540px`                                                                |
+| `--cecilia-md-container-max-width`  | Maximum width for medium containers.            | `720px`                                                                |
+| `--cecilia-lg-container-max-width`  | Maximum width for large containers.             | `960px`                                                                |
+| `--cecilia-xl-container-max-width`  | Maximum width for extra large containers.       | `1140px`                                                               |
+| `--cecilia-xxl-container-max-width` | Maximum width for extra extra large containers. | `1400px`                                                               |
+| `--cecilia-font-family-base`        | Base font family.                               | `'ubuntu', 'roboto', 'arial', sans-serif'`                             |
+| `--cecilia-font-family-code`        | Font family for code elements.                  | `'monospace', 'consolas', "Liberation Mono", "Courier New", 'courier'` |
+| `--cecilia-font-size-base`          | Base font size for the document.                | `1rem`                                                                 |
+| `--cecilia-font-weight-base`        | Base font weight for the document.              | `400`                                                                  |
+| `--cecilia-line-height-base`        | Base line height for the document.              | `1.5`                                                                  |
+| `--cecilia-h1-font-size`            | Font size for h1 headings.                      | `calc(var(--cecilia-font-size-base) * 2.5)`                            |
+| `--cecilia-h2-font-size`            | Font size for h2 headings.                      | `calc(var(--cecilia-font-size-base) * 2)`                              |
+| `--cecilia-h3-font-size`            | Font size for h3 headings.                      | `calc(var(--cecilia-font-size-base) * 1.75)`                           |
+| `--cecilia-h4-font-size`            | Font size for h4 headings.                      | `calc(var(--cecilia-font-size-base) * 1.5)`                            |
+| `--cecilia-h5-font-size`            | Font size for h5 headings.                      | `calc(var(--cecilia-font-size-base) * 1.25)`                           |
+| `--cecilia-h6-font-size`            | Font size for h6 headings.                      | `calc(var(--cecilia-font-size-base) * 1.1)`                            |
+| `--cecilia-headings-margin-bottom`  | Margin bottom for headings.                     | `0.6rem`                                                               |
+| `--cecilia-headings-line-height`    | Line height for headings.                       | `1.2`                                                                  |
+| `--cecilia-background-color`        | Default background color.                       | `#fff`                                                                 |
+| `--cecilia-color-base`              | Base text color.                                | `#1f1f1f`                                                              |
+
 ## Credits
 
 -   [Normalize.css](https://necolas.github.io/normalize.css/): Browser style reset used by Cecilia Classless.