winduum 0.1.5 → 0.1.7

package/src/tailwind.css

@@ -0,0 +1,3 @@
+@import "base/tailwind/base.css";
+@import "base/tailwind/utilities.css";
+@import "base/tailwind/gutters.css";

package/src/{styles/ui → ui}/Checkbox.css

@@ -96,7 +96,7 @@
     }
   }
 
-  @nest &.is-invalid, .is-validated & :where(input):invalid {
+  &.is-invalid, .is-validated & :where(input):invalid {
     --ui-checkbox-bg-raw: var(--color-error);
     --ui-checkbox-border-color-raw: var(--color-error);
     --ui-checkbox-checked-bg-raw: var(--color-error);

package/src/{styles/ui → ui}/Input.css

@@ -188,7 +188,7 @@
     }
   }
 
-  @nest &.is-invalid, .is-validated & :where(input, textarea, select):invalid {
+  &.is-invalid, .is-validated & :where(input, textarea, select):invalid {
     --ui-input-bg: rgb(var(--color-error) / 0.1);
     --ui-input-border-opacity: 1;
     --ui-input-border-color: var(--color-error);

package/src/{styles/ui → ui}/Switch.css

@@ -8,7 +8,7 @@
   --ui-switch-validity-offset: 0.375rem;
   --ui-switch-box-shadow: none;
 
-  @nest .dark & {
+  .dark & {
     --ui-switch-bg-raw: var(--color-background-300);
   }
 

package/src/{styles/ui → ui}/Text.css

@@ -134,7 +134,7 @@
     font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
     background-color: rgb(27 31 35 / 0.05);
 
-    @nest .dark & {
+    .dark & {
       background-color: rgb(var(--color-background-100));
       color: rgb(var(--color-primary));
     }

package/tailwind.config.cjs

@@ -1,7 +1,8 @@
 module.exports = {
   darkMode: 'class',
   content: [
-    './src/**/*.{js,html}'
+    './src/**/*.{js,html}',
+    './playground/**/*.{js,html,vue}'
   ],
   plugins: [
     require('winduum')()

package/utils/tailwind.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+
 var plugin = require('tailwindcss/plugin');
 var twColors = require('tailwindcss/colors');
 var lodash = require('lodash');
@@ -74,13 +75,11 @@ const tailwindColorsAccent = (colors = []) => {
             const rgb = hexToRgb(color[1]);
 
             result[`.accent-${color[0]}`] = {
-                '--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
-                'accent-color': 'rgb(var(--color-accent))'
+                '--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`
             };
         } else {
             result[`.accent-${color}`] = {
-                '--color-accent': `var(--color-${color})`,
-                'accent-color': 'rgb(var(--color-accent))'
+                '--color-accent': `var(--color-${color})`
             };
         }
     });
@@ -96,13 +95,11 @@ const tailwindColorsCurrent = (colors = []) => {
             const rgb = hexToRgb(color[1]);
 
             result[`.text-${color[0]}`] = {
-                '--color-current': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
-                'color': 'rgb(var(--color-current))'
+                '--color-current': `${rgb[0]} ${rgb[1]} ${rgb[2]}`
             };
         } else {
             result[`.text-${color}`] = {
-                '--color-current': `var(--color-${color})`,
-                'color': 'rgb(var(--color-current))'
+                '--color-current': `var(--color-${color})`
             };
         }
     });
@@ -140,9 +137,7 @@ const createPlugin = (userConfig = {}) => {
     }, {
         corePlugins: {
             preflight: false,
-            container: false,
-            accentColor: false,
-            textColor: false
+            container: false
         },
         theme: {
             extend: {

package/utils/tailwind.js

@@ -72,13 +72,11 @@ export const tailwindColorsAccent = (colors = []) => {
             const rgb = hexToRgb(color[1])
 
             result[`.accent-${color[0]}`] = {
-                '--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
-                'accent-color': 'rgb(var(--color-accent))'
+                '--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`
             }
         } else {
             result[`.accent-${color}`] = {
-                '--color-accent': `var(--color-${color})`,
-                'accent-color': 'rgb(var(--color-accent))'
+                '--color-accent': `var(--color-${color})`
             }
         }
     })
@@ -94,13 +92,11 @@ export const tailwindColorsCurrent = (colors = []) => {
             const rgb = hexToRgb(color[1])
 
             result[`.text-${color[0]}`] = {
-                '--color-current': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
-                'color': 'rgb(var(--color-current))'
+                '--color-current': `${rgb[0]} ${rgb[1]} ${rgb[2]}`
             }
         } else {
             result[`.text-${color}`] = {
-                '--color-current': `var(--color-${color})`,
-                'color': 'rgb(var(--color-current))'
+                '--color-current': `var(--color-${color})`
             }
         }
     })
@@ -138,9 +134,7 @@ export const createPlugin = (userConfig = {}) => {
     }, {
         corePlugins: {
             preflight: false,
-            container: false,
-            accentColor: false,
-            textColor: false
+            container: false
         },
         theme: {
             extend: {

package/src/App.vue

@@ -1,12 +0,0 @@
-<script setup>
-    import Btn from './templates/Btn.vue'
-</script>
-
-<template>
-    <Btn variant="-wide" size="-lg">Button</Btn>
-</template>
-
-<style scoped>
-    @import "tailwindcss/utilities";
-    @import "styles/ui/Btn.css";
-</style>

package/src/badge.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="font-sans">
-<head>
-    <meta charset="UTF-8">
-    <title>Winduum UI</title>
-    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
-    <link rel="stylesheet" href="/src/styles/main.css">
-    <link rel="stylesheet" href="/src/styles/tailwind.css">
-    <script src="/src/scripts/main.js" type="module"></script>
-</head>
-<body class="bg-blue-100/10 dark:bg-dark p-md flex flex-col items-start gap-4">
-    <div class="ui-badge">Badge</div>
-    <div class="ui-badge rounded-full">
-        <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-        </svg>
-        Badge
-    </div>
-    <div class="ui-badge is-sm">Badge</div>
-    <div class="ui-badge is-outline is-sm">Badge</div>
-    <a class="ui-badge is-muted">Badge</a>
-    <button class="ui-badge accent-secondary is-circle">
-        9
-    </button>
-    <div class="ui-badge-group">
-        <div class="ui-badge accent-dark">
-            <span>npm</span>
-        </div>
-        <div class="ui-badge accent-success">
-            <span>7.1.2</span>
-        </div>
-    </div>
-    <div class="ui-badge-group">
-        <div class="ui-badge is-outline accent-dark">
-            <span>npm</span>
-        </div>
-        <div class="ui-badge is-outline accent-info">
-            <span>7.1.2</span>
-        </div>
-    </div>
-</body>
-</html>

package/src/btn.html

@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="font-sans">
-<head>
-    <meta charset="UTF-8">
-    <title>Winduum UI</title>
-    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
-    <link rel="stylesheet" href="/src/styles/main.css">
-    <link rel="stylesheet" href="/src/styles/tailwind.css">
-    <script src="/src/scripts/main.js" type="module"></script>
-    <script src="/src/scripts/vue.js" type="module"></script>
-</head>
-<body class="bg-blue-100/10 dark:bg-dark p-md flex flex-col items-start gap-4">
-    <button class="ui-btn is-lg w-full is-hover-fill">Button</button>
-    <button class="ui-btn is-wide">Button</button>
-    <button class="ui-btn bg-gradient-to-br from-purple-600 to-blue-500 is-outline-gradient is-hover-fill">Button</button>
-    <button class="ui-btn bg-gradient-to-br from-purple-600 to-blue-500">Button</button>
-    <button class="ui-btn accent-secondary is-raised">Button</button>
-    <button class="ui-btn text-dark is-raised">Button</button>
-    <button class="ui-btn accent-error is-outline">Button</button>
-    <button class="ui-btn is-outline is-hover-fill">Button</button>
-    <button class="ui-btn text-default is-outline is-hover-fill">Button</button>
-    <button class="ui-btn is-text is-hover-fill">Button</button>
-    <button class="ui-btn text-default is-text">Button</button>
-    <button class="ui-btn is-muted">Button</button>
-    <button class="ui-btn is-muted">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
-        </svg>
-        Button
-    </button>
-
-    <div class="ui-btn-group">
-        <button class="ui-btn is-outline">Button</button>
-        <button class="ui-btn is-outline">Button</button>
-        <button class="ui-btn is-outline">Button</button>
-    </div>
-
-    <div class="flex gap-2">
-        <button class="ui-btn is-square">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
-            </svg>
-        </button>
-        <button class="ui-btn is-outline is-square">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
-            </svg>
-        </button>
-        <button class="ui-btn text-default is-text is-circle">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
-            </svg>
-        </button>
-    </div>
-
-    <button class="ui-btn bg-secondary is-outline is-sm is-active is-loading">Button</button>
-    <button class="ui-btn is-lg">Button</button>
-
-    <div class="col flex-row gap-2">
-        <button class="bg-white p-xs" id="action-btn-disabled">disabled</button>
-        <button class="bg-white p-xs" id="action-btn-active">active</button>
-        <button class="bg-white p-xs" id="action-btn-loading">loading</button>
-        <button class="bg-white p-xs" id="action-btn-dark">dark</button>
-    </div>
-
-    <div id="app"></div>
-
-    <script>
-        document.getElementById('action-btn-active').addEventListener('click', () => {
-            if (!document.querySelector('.ui-btn.is-active')) {
-                document.querySelectorAll('.ui-btn').forEach(element => element.classList.add('is-active'))
-            } else {
-                document.querySelectorAll('.ui-btn').forEach(element => element.classList.remove('is-active'))
-            }
-        })
-
-        document.getElementById('action-btn-loading').addEventListener('click', () => {
-            if (!document.querySelector('.ui-btn.is-loading')) {
-                document.querySelectorAll('.ui-btn').forEach(element => element.classList.add('is-loading'))
-            } else {
-                document.querySelectorAll('.ui-btn').forEach(element => element.classList.remove('is-loading'))
-            }
-        })
-
-        document.getElementById('action-btn-disabled').addEventListener('click', () => {
-            if (!document.querySelector('.ui-btn:disabled')) {
-                document.querySelectorAll('.ui-btn').forEach(element => element.setAttribute('disabled', ''))
-            } else {
-                document.querySelectorAll('.ui-btn').forEach(element => element.removeAttribute('disabled'))
-            }
-        })
-
-        document.getElementById('action-btn-dark').addEventListener('click', () => {
-            if (!document.documentElement.classList.contains('dark')) {
-                document.documentElement.classList.add('dark')
-            } else {
-                document.documentElement.classList.remove('dark')
-            }
-        })
-    </script>
-</body>
-</html>

package/src/common.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="font-sans">
-<head>
-    <meta charset="UTF-8">
-    <title>Winduum UI</title>
-    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
-    <link rel="stylesheet" href="/src/styles/main.css">
-    <link rel="stylesheet" href="/src/styles/tailwind.css">
-    <script src="/src/scripts/main.js" type="module"></script>
-</head>
-<body class="bg-blue-100/10 dark:bg-dark dark:text-light p-md flex flex-col items-start gap-4">
-    <div class="ui-image aspect-square w-24 rounded">
-        <img src="https://via.placeholder.com/128" alt="" loading="lazy">
-    </div>
-    <h1 class="ui-heading is-lg">Heading H1</h1>
-    <h2 class="ui-heading">Heading H2</h2>
-    <h3 class="ui-heading is-sm">Heading H3</h3>
-    <h1 class="ui-title is-lg">Title H1</h1>
-    <h2 class="ui-title">Title H2</h2>
-    <h3 class="ui-title uppercase text-accent is-sm">Title H3</h3>
-    <a class="ui-link is-underline" href="#">Link</a>
-    <progress class="ui-progress accent-error" value="50" max="100">15%</progress>
-    <progress class="ui-progress is-sm" max="100">15%</progress>
-
-    <div class="ui-notice accent-success">
-        Success notice
-    </div>
-
-    <div class="ui-notice accent-error">
-        <div class="ui-text">
-            <h4>Nicely done!</h4>
-            <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
-        </div>
-        <button class="ui-btn">
-            <span>Button</span>
-        </button>
-    </div>
-
-    <div class="ui-text">
-        <h4>Nicely done!</h4>
-        <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
-    </div>
-
-    <div class="col flex-row gap-2">
-        <button class="bg-accent p-xs" id="action-btn-dark">dark</button>
-    </div>
-
-    <script>
-        document.getElementById('action-btn-dark').addEventListener('click', () => {
-            if (!document.documentElement.classList.contains('dark')) {
-                document.documentElement.classList.add('dark')
-            } else {
-                document.documentElement.classList.remove('dark')
-            }
-        })
-    </script>
-</body>
-</html>

package/src/form.html

@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="font-sans">
-<head>
-    <meta charset="UTF-8">
-    <title>Winduum UI</title>
-    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
-    <link rel="stylesheet" href="/src/styles/main.css">
-    <link rel="stylesheet" href="/src/styles/tailwind.css">
-    <script src="/src/scripts/main.js" type="module"></script>
-</head>
-<body class="bg-blue-100/10 dark:bg-dark dark:text-light p-md flex flex-col items-start gap-4">
-<form class="grid grid-cols-12 gap-4 is-validated" novalidate>
-    <div class="c-field col-span-4">
-        <label class="ui-label" for="validationCustom01">First name</label>
-        <div class="ui-input">
-            <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
-        </div>
-    </div>
-    <div class="c-field col-span-4">
-        <label class="ui-label" for="validationCustom02">Last name</label>
-        <div class="ui-input">
-            <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
-        </div>
-    </div>
-    <div class="c-field col-span-4">
-        <label class="ui-label" for="validationCustomUsername">Username</label>
-        <div class="ui-input-group">
-            <div class="ui-btn accent-default bg-opacity-10 text-default is-raised is-square">
-                @
-            </div>
-            <div class="ui-input">
-                <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
-                <svg class="icon-r text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                </svg>
-            </div>
-        </div>
-
-        <div class="ui-info text-error" hidden>
-            Please choose a username.
-        </div>
-    </div>
-    <div class="c-field col-span-6">
-        <label class="ui-label" for="validationCustom03">City</label>
-        <div class="ui-input">
-            <input type="text" class="form-control" id="validationCustom03" required>
-            <svg class="icon-r text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-            </svg>
-        </div>
-        <div class="ui-info text-error" hidden>
-            Please provide a valid city.
-        </div>
-    </div>
-    <div class="c-field col-span-3">
-        <label for="validationCustom04" class="ui-label">State</label>
-        <div class="ui-select">
-            <select class="form-select" id="validationCustom04" required>
-                <option selected disabled value="">Choose...</option>
-                <option>...</option>
-            </select>
-            <svg class="icon-r text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-            </svg>
-        </div>
-        <div class="ui-info text-error" hidden>
-            Please select a valid state.
-        </div>
-    </div>
-    <div class="c-field col-span-3">
-        <label for="validationCustom05" class="ui-label">Zip</label>
-        <div class="ui-input">
-            <input type="text" class="form-control" id="validationCustom05" required>
-            <svg class="icon-r text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-            </svg>
-        </div>
-        <div class="ui-info text-error" hidden>
-            Please provide a valid zip.
-        </div>
-    </div>
-    <div class="c-field col-span-12">
-        <div class="ui-checkbox is-required">
-            <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
-            <label class="form-check-label" for="invalidCheck">
-                Agree to terms and conditions
-            </label>
-        </div>
-        <div class="ui-info text-error" hidden>
-            You must agree before submitting.
-        </div>
-    </div>
-    <div class="c-field col-span-12">
-        <button class="ui-btn" type="submit">Submit form</button>
-    </div>
-</form>
-</body>
-</html>

package/src/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="font-sans">
-<head>
-    <meta charset="UTF-8">
-    <title>Winduum UI</title>
-    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
-    <link rel="stylesheet" href="/src/styles/main.css">
-    <link rel="stylesheet" href="/src/styles/tailwind.css">
-</head>
-<body class="bg-blue-100/10 dark:bg-dark p-md flex flex-col items-start gap-4 text-lg font-bold text-primary">
-    <a href="/common.html">ui-heading, ui-title, ui-link, ui-image</a>
-    <a href="/badge.html">ui-badge</a>
-    <a href="/btn.html">ui-btn</a>
-    <a href="/input.html">ui-input</a>
-    <div class="animate-bounce">asd</div>
-</body>
-</html>