winduum 0.1.10 → 0.1.12

package/README.md

@@ -8,9 +8,9 @@
   <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/winduum.svg" alt="node compatility"></a>
 </p>
 
-# 🎨 Winduum
+# 🎨 [Winduum](https://winduum.dev)
 
-> Still in very-early development.
+> Still in early development.
 
 Modern, modular, small CSS component framework build on top of **TailwindCSS**
 
@@ -21,5 +21,9 @@ Modern, modular, small CSS component framework build on top of **TailwindCSS**
 
 It's a mix of words **Tailwind** _(Popular CSS utility framework)_ and **Tuum** _(Estonian word for "core")_.<br>
 
-Winduum approach to **Tailwind** is little different. It encourages to write components in CSS or other (pre/post)-processors.
-And to use TailwindCSS only for utility classes to enhance the components. It also leverages the use of CSS properties as much possible.
+Essentially provides ways to leverage use of **CSS properties** as much possible and do more in CSS. Because we ❤️ CSS and this is a small modest CSS framework.
+
+Its approach to **TailwindCSS** is little different. It encourages to write components in CSS or other (pre/post)-processors.
+And to use utility classes to enhance the components.
+
+As a CSS framework it provides only basic UI components. You can extend them with your own components or only use [TailwindCSS plugin](https://winduum.dev/docs/config) with its benefits and make your own complex UX/UI project written mostly in CSS/SASS/LESS.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "main": "index.js",
   "scripts": {
@@ -16,9 +16,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "css-has-pseudo": "^5.0.2",
-    "eslint": "^8.34.0",
+    "eslint": "^8.36.0",
     "eslint-config-standard": "^17.0.0",
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",

package/src/base/default.css

@@ -21,3 +21,18 @@
   border-top: 2px solid rgb(var(--color-current) / var(--tw-border-opacity, 1));
   border-radius: var(--rounded);
 }
+
+:where(html) {
+  font-family: var(--font-primary);
+  font-weight: var(--font-normal);
+  height: 100%;
+  line-height: 1.5;
+  cursor: default;
+}
+
+:where(body) {
+  min-height: 100%;
+  background-color: rgb(var(--color-background));
+  color: rgb(var(--color-default));
+  accent-color: rgb(var(--color-accent));
+}

package/src/base/reset.css

@@ -77,12 +77,6 @@ meter {
   -webkit-user-drag: element;
 }
 
-/* apply default cursor */
-:where(html) {
-  cursor: default;
-  color: rgb(var(--color-default))
-}
-
 /* apply text cursor */
 :where(input, textarea) {
   cursor: text;

package/src/components/+.css

@@ -1,2 +1,2 @@
-@import "Dialog.css";
-@import "Field.css";
+@import "dialog.css";
+@import "field.css";

package/src/components/{Dialog.css → dialog.css}

@@ -2,7 +2,6 @@
   --c-dialog-py: 1.5rem;
   --c-dialog-px: 1.5rem;
   --c-dialog-width: 35rem;
-  --c-dialog-offset-y: 2rem;
   --c-dialog-animation-duration: var(--transition-duration);
 
   animation: var(--c-dialog-animation-duration) ease 0s backwards 1 fade-in-down;

package/src/libraries/+.css

@@ -1,2 +1,2 @@
-@import "Dialog.css";
-@import "Ripple.css";
+@import "dialog.css";
+@import "ripple.css";

package/src/libraries/{Dialog.css → dialog.css}

@@ -1,6 +1,5 @@
 :where(.lib-dialog) {
-  --lib-dialog-bg: var(--color-dark);
-  --lib-dialog-opacity: 0.8;
+  --lib-ripple-bg: rgb(var(--color-dark) / var(--tw-bg-opacity, 0.8));
   --lib-dialog-py: 2rem;
   --lib-dialog-px: 1.5rem;
   --lib-dialog-animation-duration: var(--transition-duration);
@@ -10,7 +9,7 @@
   position: fixed;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
-  background-color: rgb(var(--lib-dialog-bg) / var(--lib-dialog-opacity));
+  background-color: var(--lib-ripple-bg);
   overscroll-behavior: contain;
   display: flex;
   visibility: hidden;

package/src/libraries/{Dialog.js → dialog.js}

@@ -20,8 +20,8 @@ const dialogSelector = selector => typeof selector === 'string'
 
 const dialogDismiss = async (options) => {
     await Promise.allSettled(dialogSelector(options.selector).getAnimations().map(animation => animation.finished))
-    options.remove && dialogSelector(options.selector).remove()
     dialogSelector(options.selector).setAttribute('inert', '')
+    options.remove && dialogSelector(options.selector).remove()
 
     if (!document.querySelector('dialog[open]')) {
         document.documentElement.classList.remove(defaultOptions.openClass)
@@ -85,4 +85,4 @@ const fetchDialog = async ({ url, showOptions = {} }) => {
         .then(async ({ content }) => await showDialog({ content, ...showOptions }))
 }
 
-export { showDialog, closeDialog, fetchDialog }
+export { showDialog, closeDialog, fetchDialog, dialogSelector, dialogDismiss }

package/src/ui/+.css

@@ -1,16 +1,16 @@
-@import "Badge.css";
-@import "Btn.css";
-@import "Checkbox.css";
-@import "Heading.css";
-@import "Image.css";
-@import "Info.css";
-@import "Input.css";
-@import "Label.css";
-@import "Link.css";
-@import "Notice.css";
-@import "Progress.css";
-@import "Radio.css";
-@import "Select.css";
-@import "Switch.css";
-@import "Text.css";
-@import "Title.css";
+@import "badge.css";
+@import "btn.css";
+@import "checkbox.css";
+@import "heading.css";
+@import "image.css";
+@import "info.css";
+@import "input.css";
+@import "label.css";
+@import "link.css";
+@import "notice.css";
+@import "progress.css";
+@import "radio.css";
+@import "select.css";
+@import "switch.css";
+@import "text.css";
+@import "title.css";

package/utils/tailwind.js

@@ -4,8 +4,9 @@ import lodash from 'lodash'
 
 export const defaultConfig = {
     colors: [
-        'background', 'default', 'light', 'dark', 'primary', 'secondary',
-        'warning', 'error', 'info', 'success', 'accent', `current`
+        'default', 'light', 'dark', 'primary', 'secondary',
+        'warning', 'error', 'info', 'success', 'accent', `current`,
+        'background', 'background-lighter', 'background-darker'
     ],
     fontFamily: ['primary', 'secondary'],
     fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],