lexgui 0.5.2 → 0.5.4

package/build/utilities.css

@@ -0,0 +1,314 @@
+/* Colors */
+/* Using !important to override anything written in main stylesheet */
+
+.bg-primary { background-color: var(--global-color-primary) !important }
+.bg-secondary { background-color: var(--global-color-secondary) !important }
+.bg-tertiary { background-color: var(--global-color-tertiary) !important }
+.bg-quaternary { background-color: var(--global-color-quaternary) !important }
+.bg-accent { background-color: var(--global-color-accent) !important }
+.bg-contrast { background-color: var(--global-text-primary) !important }
+.bg-warning { background-color: var(--global-color-warning) !important }
+.bg-error { background-color: var(--global-color-error) !important }
+.bg-none { background: none !important }
+
+.hover\:bg-primary:hover { background-color: var(--global-color-primary) !important }
+.hover\:bg-secondary:hover { background-color: var(--global-color-secondary) !important }
+.hover\:bg-tertiary:hover { background-color: var(--global-color-tertiary) !important }
+.hover\:bg-quaternary:hover { background-color: var(--global-color-quaternary) !important }
+.hover\:bg-accent:hover { background-color: var(--global-color-accent) !important }
+.hover\:bg-contrast:hover { background-color: var(--global-text-primary) !important }
+.hover\:bg-warning:hover { background-color: var(--global-color-warning) !important }
+.hover\:bg-error:hover { background-color: var(--global-color-error) !important }
+.hover\:bg-none:hover { background: none !important }
+
+.fg-primary { color: var(--global-text-primary) !important }
+.fg-secondary { color: var(--global-text-secondary) !important }
+.fg-tertiary { color: var(--global-text-tertiary) !important }
+.fg-quaternary { color: var(--global-text-quaternary) !important }
+.fg-accent { color: var(--global-color-accent) !important }
+.fg-contrast { color: var(--global-color-primary) !important }
+.fg-warning { color: var(--global-color-warning) !important }
+.fg-error { color: var(--global-color-error) !important }
+
+.hover\:fg-primary:hover { color: var(--global-text-primary) !important }
+.hover\:fg-secondary:hover { color: var(--global-text-secondary) !important }
+.hover\:fg-tertiary:hover { color: var(--global-text-tertiary) !important }
+.hover\:fg-quaternary:hover { color: var(--global-text-quaternary) !important }
+.hover\:fg-accent:hover { color: var(--global-color-accent) !important }
+.hover\:fg-contrast:hover { color: var(--global-color-primary) !important }
+.hover\:fg-warning:hover { color: var(--global-color-warning) !important }
+.hover\:fg-error:hover { color: var(--global-color-error) !important }
+
+/* Layout */
+
+.flex { display: flex }
+.inline-flex { display: inline-flex }
+.grid { display: grid }
+.block { display: block }
+.inline-block { display: inline-block }
+.hidden { display: none !important }
+
+.overflow-auto { overflow: auto }
+.overflow-scroll { overflow: scroll }
+.overflow-hidden { overflow: hidden }
+.overflow-x-auto { overflow-x: auto }
+.overflow-y-auto { overflow-y: auto }
+.overflow-x-hidden { overflow-x: hidden }
+
+.truncate { overflow: hidden; text-overflow: ellipsis }
+.truncate, .whitespace-nowrap { white-space: nowrap }
+.whitespace-pre-wrap { white-space: pre-wrap }
+.whitespace-break-spaces { white-space: break-spaces }
+
+.text-balance { text-wrap: balance }
+.break-words { overflow-wrap: break-word }
+
+.line-clamp-1, .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical }
+.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1 }
+.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2 }
+
+.flex-col { flex-direction: column }
+.flex-row { flex-direction: row }
+.flex-wrap { flex-wrap: wrap }
+
+.items-start { place-items: start }
+.items-center { place-items: center }
+.items-end { place-items: end }
+
+.justify-start { justify-content: start }
+.justify-center { justify-content: center }
+.justify-end { justify-content: end }
+.justify-between { justify-content: space-between }
+.justify-around { justify-content: space-around }
+
+.self-start { place-self: start }
+.self-center { place-self: center }
+.self-end { place-self: end }
+
+.gap-0 { gap: 0 }
+.gap-0\.5 { gap: 0.125rem }
+.gap-1 { gap: 0.25rem }
+.gap-2 { gap: 0.5rem }
+.gap-3 { gap: 0.75rem }
+.gap-4 { gap: 1rem }
+.gap-5 { gap: 1.25rem }
+.gap-6 { gap: 1.5rem }
+.gap-7 { gap: 1.75rem }
+.gap-8 { gap: 2rem }
+
+/* Spacing */
+
+.mt-auto { margin-top: auto }
+.mb-auto { margin-bottom: auto }
+.ml-auto { margin-left: auto }
+.mr-auto { margin-right: auto }
+
+.m-0 { margin: 0 }
+.m-1 { margin: 0.25rem }
+.m-2 { margin: 0.5rem }
+.m-3 { margin: 0.75rem }
+.m-4 { margin: 1rem }
+.m-5 { margin: 1.25rem }
+.m-6 { margin: 1.5rem }
+.m-7 { margin: 1.75rem }
+.m-8 { margin: 2rem }
+
+.mt-0 { margin-top: 0 }
+.mt-1 { margin-top: 0.25rem }
+.mt-2 { margin-top: 0.5rem }
+.mt-3 { margin-top: 0.75rem }
+.mt-4 { margin-top: 1rem }
+.mt-5 { margin-top: 1.25rem }
+.mt-6 { margin-top: 1.5rem }
+.mt-7 { margin-top: 1.75rem }
+.mt-8 { margin-top: 2rem }
+
+.mb-0 { margin-bottom: 0 }
+.mb-1 { margin-bottom: 0.25rem }
+.mb-2 { margin-bottom: 0.5rem }
+.mb-3 { margin-bottom: 0.75rem }
+.mb-4 { margin-bottom: 1rem }
+.mb-5 { margin-bottom: 1.25rem }
+.mb-6 { margin-bottom: 1.5rem }
+.mb-7 { margin-bottom: 1.75rem }
+.mb-8 { margin-bottom: 2rem }
+
+.ml-0 { margin-left: 0 }
+.ml-1 { margin-left: 0.25rem }
+.ml-2 { margin-left: 0.5rem }
+.ml-3 { margin-left: 0.75rem }
+.ml-4 { margin-left: 1rem }
+.ml-5 { margin-left: 1.25rem }
+.ml-6 { margin-left: 1.5rem }
+.ml-7 { margin-left: 1.75rem }
+.ml-8 { margin-left: 2rem }
+
+.mr-0 { margin-right: 0 }
+.mr-1 { margin-right: 0.25rem }
+.mr-2 { margin-right: 0.5rem }
+.mr-3 { margin-right: 0.75rem }
+.mr-4 { margin-right: 1rem }
+.mr-5 { margin-right: 1.25rem }
+.mr-6 { margin-right: 1.5rem }
+.mr-7 { margin-right: 1.75rem }
+.mr-8 { margin-right: 2rem }
+
+.p-0 { padding: 0 }
+.p-1 { padding: 0.25rem }
+.p-2 { padding: 0.5rem }
+.p-3 { padding: 0.75rem }
+.p-4 { padding: 1rem }
+.p-5 { padding: 1.25rem }
+.p-6 { padding: 1.5rem }
+.p-7 { padding: 1.75rem }
+.p-8 { padding: 2rem }
+
+.pt-0 { padding-top: 0 }
+.pt-1 { padding-top: 0.25rem }
+.pt-2 { padding-top: 0.5rem }
+.pt-3 { padding-top: 0.75rem }
+.pt-4 { padding-top: 1rem }
+.pt-5 { padding-top: 1.25rem }
+.pt-6 { padding-top: 1.5rem }
+.pt-7 { padding-top: 1.75rem }
+.pt-8 { padding-top: 2rem }
+
+.pb-0 { padding-bottom: 0 }
+.pb-1 { padding-bottom: 0.25rem }
+.pb-2 { padding-bottom: 0.5rem }
+.pb-3 { padding-bottom: 0.75rem }
+.pb-4 { padding-bottom: 1rem }
+.pb-5 { padding-bottom: 1.25rem }
+.pb-6 { padding-bottom: 1.5rem }
+.pb-7 { padding-bottom: 1.75rem }
+.pb-8 { padding-bottom: 2rem }
+
+.pl-0 { padding-left: 0 }
+.pl-1 { padding-left: 0.25rem }
+.pl-2 { padding-left: 0.75rem }
+.pl-3 { padding-left: 0.5rem }
+.pl-4 { padding-left: 1rem }
+.pl-5 { padding-left: 1.25rem }
+.pl-6 { padding-left: 1.5rem }
+.pl-7 { padding-left: 1.75rem }
+.pl-8 { padding-left: 2rem }
+
+.pr-0 { padding-right: 0 }
+.pr-1 { padding-right: 0.25rem }
+.pr-2 { padding-right: 0.5rem }
+.pr-3 { padding-right: 0.75rem }
+.pr-4 { padding-right: 1rem }
+.pr-5 { padding-right: 1.25rem }
+.pr-6 { padding-right: 1.5rem }
+.pr-7 { padding-right: 1.75rem }
+.pr-8 { padding-right: 2rem }
+
+.px-0 { padding-left: 0; padding-right: 0 }
+.px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
+.px-4 { padding-left: 1rem; padding-right: 1rem }
+.px-5 { padding-left: 1.25rem; padding-right: 1.25rem }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
+.px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
+.px-8 { padding-left: 2rem; padding-right: 2rem }
+.px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
+.px-12 { padding-left: 3rem; padding-right: 3rem }
+
+.py-0 { padding-top: 0; padding-bottom: 0 }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem }
+.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
+.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
+.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
+.py-8 { padding-top: 2rem; padding-bottom: 2rem }
+.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
+.py-12 { padding-top: 3rem; padding-bottom: 3rem }
+
+/* Typography */
+
+.text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+.text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+.text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+.text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+.text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+.text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.6rem }
+
+.font-light { font-weight: 300 }
+.font-normal { font-weight: 400 }
+.font-medium { font-weight: 500 }
+.font-semibold { font-weight: 600 }
+.font-bold { font-weight: 700 }
+.font-extrabold { font-weight: 800 }
+
+.italic { font-style: italic }
+
+.uppercase { text-transform: uppercase }
+.capitalize { text-transform: capitalize }
+
+/* Width / Height */
+
+.w-full { width: 100% }
+.w-screen { width: 100vw }
+.h-full { height: 100% }
+.h-screen { height: 100vh }
+
+/* Positioning */
+
+.relative { position: relative }
+.absolute { position: absolute }
+.fixed { position: fixed }
+.sticky { position: sticky }
+
+.top-0 { top: 0 }
+.right-0 { right: 0 }
+.bottom-0 { bottom: 0 }
+.left-0 { left: 0 }
+
+.z-0 { z-index: 0 }
+.z-10 { z-index: 10 }
+.z-50 { z-index: 50 }
+.z-100 { z-index: 100 }
+.z-1000 { z-index: 1000 }
+
+/* Borders / Radius / Shadow */
+
+.border { border: 1px solid var(--global-color-tertiary) }
+
+.border-top { border-top: 1px solid var(--global-color-tertiary) }
+.border-bottom { border-bottom: 1px solid var(--global-color-tertiary) }
+.border-left { border-left: 1px solid var(--global-color-tertiary) }
+.border-right { border-right: 1px solid var(--global-color-tertiary) }
+
+.border-2 { border-width: 2px }
+
+.border-t-0 { border-top-width: 0 }
+.border-b-0 { border-bottom-width: 0 }
+.border-l-0 { border-left-width: 0 }
+.border-r-0 { border-right-width: 0 }
+
+.rounded-none { border-radius: 0 }
+.rounded { border-radius: 0.25rem }
+.rounded-lg { border-radius: 0.5rem }
+.rounded-full { border-radius: 9999px }
+
+.shadow { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) }
+.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) }
+.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) }
+
+/* Interaction / Misc */
+
+.cursor-pointer { cursor: pointer }
+.pointer-events-none { pointer-events: none }
+.pointer-events-auto { pointer-events: auto }
+
+.select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
+
+.opacity-0 { opacity: 0 }
+.opacity-50 { opacity: 0.5 }
+.opacity-100 { opacity: 1 }
+
+.ease-in { transition-timing-function: ease-in }
+.ease-out { transition-timing-function: ease-out }

package/changelog.md

@@ -2,7 +2,36 @@
 
 ## dev
 
-## 0.5.2 (master)
+## 0.5.4 (master)
+
+Widgets:
+- Added support for disabling resize in TextArea Widget `options.resize: false`.
+- Added support for using LX.ICONS on Button Widgets.
+- Tooltips supported in Button Widget `options.tooltip`. Uses either `options.title` or `name` as content.
+
+`LX.makeContainer` now accepts `innerHTML` and `parent` params.
+Started work on tooltips `LX.asTooltip(trigger, content)`.
+Added support for adding a class to LexGUI root on init `options.rootClass`.
+Added support for adding a class to Sidebar/Menubar areas on `Area.addSidebar` and `Area.addMenubar`.
+Added `options.asElement` to return `LX.badge` as HTMLElement instead of html string.
+Support for using LX.ICONS on sidebar entry icons. Keep FA icons as legacy by now.
+Minor CSS improvements. Added more class utilities.
+
+## 0.5.3
+
+Widgets:
+- Fixed Select Widget filter issues.
+- Fixed Color Widget not updating hex code on pasting value.
+
+`Panel.endLine` now accepts `className` as first param to allow more customization.
+Remove `gap` by default in inline widgets container.
+Changed global font family to Geist Sans.
+Started support for tailwind-like utility css classes.
+Fixed Select Widget inside Dialog when opening above selector.
+Improve styling for supported widgets. Better consistency.
+Added new demo example showcasing all widgets.
+
+## 0.5.2
 
 Table Widget:
 - Fixed manual-sort not modifying inner data.