[noticket] Remove legacy variants, add color shades

CHANGELOG.md

@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.0] - 2021-10-15
+### Added
+- Color shades for `gray` and `orange`
+  - They reflect the percentage of color intensity (`gray-100`, `gray-80`, ...)
+- `@tailwindcss/forms` is not part of the default plugins
+
+### Removed
+- **Breaking**: Configuration for using legacy colors and font sizes has been removed
+
 ## [0.5.1] - 2021-03-03
 ### Removed
 - `@tailwindcss/ui` dependency
@@ -45,7 +54,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Initial implementation
 
-[Unreleased]: https://github.com/kellerkinderDE/eslint-config/compare/0.5.1...HEAD
+[Unreleased]: https://github.com/kellerkinderDE/eslint-config/compare/1.0.0...HEAD
+[1.0.0]: https://github.com/kellerkinderDE/eslint-config/compare/0.5.1...1.0.0
 [0.5.1]: https://github.com/kellerkinderDE/eslint-config/compare/0.5.0...0.5.1
 [0.5.0]: https://github.com/kellerkinderDE/eslint-config/compare/0.4.0...0.5.0
 [0.4.0]: https://github.com/kellerkinderDE/eslint-config/compare/0.3.0...0.4.0

README.md

@@ -4,8 +4,6 @@
 
 This package provides the Kellerkinder [TailwindCSS](https://tailwindcss.com) configuration.
 
-> :warning: This is a pre-release, so use it with caution.
-
 ## Requirements
 This config has been developed and tested with the following requirements:
 * NodeJS >= 12
@@ -14,12 +12,59 @@ This config has been developed and tested with the following requirements:
 * Autoprefixer >= 10.0.0
 
 ## Installation
-In order to use this configuration, run the following scripts in your NodeJS project:
+In order to install this configuration, run the following scripts in your NodeJS project:
 
 ```bash
 $ npm i tailwindcss postcss autoprefixer @kellerkinder/tailwind-config
 ```
 
+## Usage
+In order to use this configuration, you can implement it as a preset in your `tailwind.config.js`:
+
+```js
+// tailwind.config.js
+const createK10rPreset = require('@kellerkinder/tailwind-config');
+
+module.exports = {
+    presets: [
+        createK10rPreset(),
+    ],
+    // ... rest of your config
+};
+```
+
+## Features
+This preset offers the following features.
+
+### Tailwind Forms
+The plugins `@tailwindcss/forms` is included in this configuration to provide out-of-the-box support for [TailwindUI](https://tailwindui.com).
+
+### Corporate Identity Colors
+The [Kellerkinder](https://kellerkinder.de) corporate identity colors are provided.
+
+**Primary color**: `#171c21`
+
+* Shades
+  * `gray-100`
+  * `gray-80`
+  * `gray-60`
+  * `gray-40`
+  * `gray-20`
+* Aliases
+  * `primary`
+
+**Secondary color**: `#f56600`
+
+* Shades
+  * `orange-100`
+  * `orange-80`
+  * `orange-60`
+  * `orange-40`
+  * `orange-20`
+* Aliases
+  * `secondary`
+  * `accent`
+
 ## Changelog
 This project adheres to [Semantic Versioning](https://semver.org/).
 Please refer to the [CHANGELOG.md](CHANGELOG.md) for detailed changes and

index.js

@@ -1,14 +1,8 @@
-const createLegacyConfig = require('./lib/legacy');
+const colors = require('./lib/theme/colors');
 const plugins = require('./lib/plugins');
 
-module.exports = (config) => {
-    const {
-        colors,
-        fontSize,
-    } = createLegacyConfig(config);
-
+module.exports = () => {
     return {
-        important: true,
         theme: {
             screens: {
                 sm: '576px',
@@ -21,25 +15,7 @@ module.exports = (config) => {
                 mono: ['IBM Plex Mono', 'monospace'],
             },
             extend: {
-                colors: {
-                    ...colors,
-                    code: {
-                        1: '#f4f5f7',
-                        2: '#172b4d',
-                    },
-                    body: '#eff3f6',
-                    primary: '#171c21',
-                    secondary: '#ec681b',
-                    secondaryHover: '#ec3b13',
-                    corporate: '#ec681b',
-                    corporateHover: '#ec3b13',
-                    initial: 'initial',
-                },
-                borderColor: (theme) => {
-                    return {
-                        corporate: theme('colors.secondary'),
-                    };
-                },
+                colors,
                 lineHeight: {
                     normal: '1.7',
                     relaxed: '1.85',
@@ -66,7 +42,6 @@ module.exports = (config) => {
                     };
                 },
                 fontSize: {
-                    ...fontSize,
                     pagetitle: '2.4em',
                     table: '.95em',
                     xxs: '.72rem',

lib/plugins/index.js

@@ -1,5 +1,8 @@
+const tailwindForms = require('@tailwindcss/forms');
+
 const emptyVariant = require('./empty-variant');
 
 module.exports = [
     emptyVariant,
+    tailwindForms,
 ];

lib/theme/colors.js

@@ -0,0 +1,24 @@
+const Values = require('values.js');
+
+const gray = new Values('#171c21');
+const orange = new Values('#f56600');
+
+module.exports = {
+    gray: {
+        100: gray.hex,
+        80: gray.tint(20).hex,
+        60: gray.tint(40).hex,
+        40: gray.tint(60).hex,
+        20: gray.tint(80).hex,
+    },
+    orange: {
+        100: orange.hex,
+        80: orange.tint(20).hex,
+        60: orange.tint(40).hex,
+        40: orange.tint(60).hex,
+        20: orange.tint(80).hex,
+    },
+    primary: gray.hex,
+    secondary: orange.hex,
+    accent: orange.hex,
+};