lexgui 8.0.0 → 8.1.1

package/build/lexgui.css

@@ -88,7 +88,10 @@
     --global-font-size: 0.875rem; /* 14px */
     --global-font-size-lg: 1rem; /* 16px */
     --global-font-size-xl: 1.125rem; /* 18px */
-    --global-font-size-xxl: 1.375rem; /* 22px */
+    --global-font-size-xxl: 1.4rem; /* 22px */
+    --global-font-size-3xl: 1.8rem;
+    --global-font-size-4xl: 2.5rem;
+    --global-font-size-5xl: 2.75rem;
 
     --global-text-primary: light-dark(#0a0a0a, #e5e5e5);
     --global-text-secondary: light-dark(#262626, #d5d5d5);
@@ -833,7 +836,7 @@ a svg, svg path {
     box-shadow: 0 2px 6px #101010bb;
     border-radius: 12px;
     z-index: 101;
-    background-color: var(--global-background-secondary);
+    background-color: var(--global-background);
 }
 
 .lexdialog:has(.lexselect) {
@@ -1128,6 +1131,7 @@ a svg, svg path {
     animation-duration: 400ms;
 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 	will-change: transform, opacity;
+    overflow: hidden;
 }
 
 @keyframes enterBottom {
@@ -1176,18 +1180,26 @@ a svg, svg path {
 
 .lexsheet[data-side="top"]{
 	animation-name: enterTop;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
 }
 
 .lexsheet[data-side="right"]{
 	animation-name: enterRight;
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
 }
 
 .lexsheet[data-side="bottom"]{
 	animation-name: enterBottom;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
 }
 
 .lexsheet[data-side="left"]{
 	animation-name: enterLeft;
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
 }
 
 /* Dropdown Menu */
@@ -1330,7 +1342,7 @@ a svg, svg path {
 
 .lexpanel {
     margin: 0;
-    padding: var(--spacing-xs);
+    padding: var(--spacing-sm);
     overflow: hidden;
     overflow-y: scroll;
 }
@@ -1426,6 +1438,7 @@ a svg, svg path {
     color: var(--global-text-primary);
     line-height: 2;
     overflow: hidden;
+    transition: background-color 0.1s linear;
 }
 
 .lexinlinecomponents .lexcomponentname.float-center {
@@ -1517,18 +1530,21 @@ a svg, svg path {
     border-bottom: 1px solid #c1c1c1;
 }
 
-.lexcomponent input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
+.lexcomponent input {
     font-family: var(--global-font);
-    padding: var(--spacing-sm);
-    color: var(--global-text-primary);
-    --background-color: var(--global-color-secondary);
-    background-color: var(--background-color);
-    outline: none;
-    border-radius: 6px;
+    border-radius: 0.5rem;
     border: 1px solid var(--global-color-transparent);
     transition-property: color, background-color, border-color;
     transition-timing-function: ease-out;
     transition-duration: .15s;
+    outline: none;
+}
+
+.lexcomponent input:not(.lexcheckbox, .lextoggle, .lexrangeslider, .lexcounter) {
+    padding: var(--spacing-sm);
+    color: var(--global-text-primary);
+    --background-color: var(--global-color-secondary);
+    background-color: var(--background-color);
 }
 
 .lexcomponent input:not(.lexcheckbox, .lextoggle, .lexrangeslider, .outline):hover {
@@ -1791,7 +1807,7 @@ a svg, svg path {
     --border-color: var(--global-border-color);
     background-color: var(--button-color);
     border: 1px solid transparent;
-    border-radius: 6px;
+    border-radius: 0.5rem;
     min-width: 1.8rem;
     height: calc(var(--spacing-md) * 4);
     align-content: center;
@@ -1835,11 +1851,15 @@ a svg, svg path {
     border-color: var(--border-color);
 }
 
-.lexbutton:hover:not(.outline, .bg-none) {
+.lexbutton.bg-none {
+    border-radius: unset;
+}
+
+.lexbutton:hover:not(.outline, .bg-none, :disabled) {
     background-color: color-mix(in srgb, var(--button-color), #000 9%) !important;
 }
 
-:root[data-theme="light"] .lexbutton:hover:not(.outline) {
+:root[data-theme="light"] .lexbutton:hover:not(.outline, .bg-none, :disabled) {
     background-color: color-mix(in srgb, var(--button-color), #fff 9%) !important;
 }
 
@@ -1854,12 +1874,22 @@ a svg, svg path {
 .lexbutton:active:not(.lexbutton.combo) {
     background-color: color-mix(in srgb, var(--button-color), #fff 4%);
 }
+
 :root[data-theme="light"] .lexbutton:active:not(.lexbutton.combo) {
     background-color: color-mix(in srgb, var(--button-color), #000 4%);
 }
 
-.lexbutton:disabled, .lexbutton:disabled a {
+.lexbutton:disabled, .lexbutton:disabled a, .lexbutton:disabled svg {
+    color: var(--global-text-quaternary);
+}
+
+.lexbutton:disabled {
     color: var(--global-text-quaternary);
+    cursor: default;
+}
+
+.lexbutton:disabled:not(.bg-none) {
+    background-color: color-mix(in srgb, var(--button-color), #000 4%) !important;
 }
 
 .lexbutton.selected {
@@ -2549,14 +2579,16 @@ input[type=number] {
 }
 
 .lexinputslider {
+    --track-height: 0.25rem;
+    --thumb-height: 0.75rem;
+    --color: var(--global-text-quaternary);
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     border: none !important;
     width: 100%;
-    height: 1px;
+    height: var(--track-height);
     outline: none;
-    opacity: 0.7;
     transition: opacity .2s;
     -moz-transition: .2s;
     -webkit-transition: .2s;
@@ -2567,44 +2599,57 @@ input[type=number] {
 }
 
 .lexinputslider::-moz-range-track {
-    height: 1px;
-    background: #a19dc9;
+    height: var(--track-height);
+    background: var(--color);
+    border-radius: 0.5rem;
 }
 
 .lexinputslider::-webkit-slider-runnable-track {
-    height: 1px;
-    background: #a19dc9;
+    height: var(--track-height);
+    background: var(--color);
+    border-radius: 0.5rem;
 }
 
 .lexinputslider::-webkit-slider-thumb {
     appearance: none;
     -webkit-appearance: none;
-    margin-top: -6px;
-    width: 12px;
-    height: 12px;
-    border: 1px solid #c9c7de;
-    border-radius: 6px;
-    background: var(--global-color-accent);
+    margin-top: calc(var(--thumb-height) * -0.5 + var(--track-height) * 0.5);
+    width: var(--thumb-height);
+    height: var(--thumb-height);
+    border-radius: 50%;
+    background: light-dark(var(--global-color-primary), var(--global-text-primary));
     cursor: pointer;
+    box-shadow: 0px 0px 2px 1px var(--global-color-secondary);
+}
+
+:root[data-theme="light"] .lexinputslider::-webkit-slider-thumb {
+    box-shadow: none;
+    border: 1px solid var(--global-text-primary);
 }
 
 .lexinputslider::-moz-range-thumb {
-    margin-top: -8px;
-    width: 8px;
-    height: 8px;
-    border-radius: 6px;
-    background: #a19dc9;
+    margin-top: calc(var(--thumb-height) * -0.5 + var(--track-height) * 0.5);
+    width: var(--thumb-height);
+    height: var(--thumb-height);
+    border-radius: 50%;
+    background: light-dark(var(--global-color-primary), var(--global-text-primary));
     cursor: pointer;
+    box-shadow: 0px 0px 2px 1px var(--global-color-secondary);
+}
+
+:root[data-theme="light"] .lexinputslider::-moz-range-thumb {
+    box-shadow: none;
+    border: 1px solid var(--global-text-primary);
 }
 
 /* Range Component */
 
 .lexrangeslider {
     --range-thumb-color: var(--global-color-primary);
-    --range-thumb-size: 1rem;
+    --range-thumb-size: 0.75rem;
     --range-progress: currentColor;
     --range-fill: 1;
-    --range-thumb-padding: 0.2rem;
+    --range-thumb-padding: 0.1rem;
     --range-bg: color-mix(in oklab,currentColor 20%,#0000);
     --range-dir: 1;
     --radius-selector: 0.5rem;
@@ -4069,34 +4114,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     cursor: pointer;
 }
 
-/* Counter Component */
-
-.lexcounter {
-    display: flex;
-    place-content: center;
-}
-
-.lexcounterbox {
-    display: grid;
-    text-align: -webkit-center;
-    text-align: center;
-    margin-left: 16px;
-    margin-right: 16px;
-}
-
-.lexcounterbox .lexcountervalue {
-    width: 100%;
-    font-size: var(--global-font-size-xxl);
-    font-weight: 700;
-}
-
-.lexcounterbox .lexcounterlabel {
-    width: 100%;
-    margin-top: -18px;
-    font-size: var(--global-font-size-sm);
-    color: var(--global-text-secondary);
-}
-
 /* Table Component */
 
 .lextable {
@@ -6228,13 +6245,13 @@ ul.lexassetscontent {
 .text-center { text-align: center }
 .text-end { text-align: end }
 
-.leading-none { line-height: 1 }
-.leading-tight { line-height: 1.25 }
-.leading-snug { line-height: 1.375 }
-.leading-normal { line-height: 1.5 }
-.leading-relaxed { line-height: 1.625 }
-.leading-loose { line-height: 2 }
-.leading-inherit { line-height: inherit }
+.leading-none { line-height: 1 !important }
+.leading-tight { line-height: 1.25 !important }
+.leading-snug { line-height: 1.375 !important }
+.leading-normal { line-height: 1.5 !important }
+.leading-relaxed { line-height: 1.625 !important }
+.leading-loose { line-height: 2 !important }
+.leading-inherit { line-height: inherit !important }
 
 .leading-3 { line-height: 0.75rem }
 .leading-4 { line-height: 1rem }
@@ -6464,7 +6481,10 @@ ul.lexassetscontent {
 .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 }
+.text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+.text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+.text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+.text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 
 .font-light { font-weight: 300 }
 .font-normal { font-weight: 400 }
@@ -6665,6 +6685,38 @@ ul.lexassetscontent {
 
 /* Media queries for sizes */
 
+@media (min-width: 420px) {
+    .xs\:hidden { display: none !important }
+    .xs\:block { display: block !important }
+    .xs\:inline { display: inline !important }
+    .xs\:flex { display: flex !important }
+    .xs\:grid { display: grid !important }
+    .xs\:inline-flex { display: inline-flex !important }
+    .xs\:inline-block { display: inline-block !important }
+    .xs\:flex-fill { flex: 1 0 0% !important }
+
+    .xs\:w-full { width: 100% !important }
+    .xs\:w-screen { width: 100vw !important }
+    .xs\:w-auto { width: auto !important }
+    .xs\:h-full { height: 100% !important }
+    .xs\:h-screen { height: 100vh !important }
+    .xs\:h-auto { height: auto !important }
+    .xs\:w-2\/3 { width: 66.666% !important}
+    .xs\:w-1\/2 { width: 50% !important }
+    .xs\:w-1\/3 { width: 33.333% !important }
+    .xs\:w-1\/4 { width: 25% !important }
+
+    .xs\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .xs\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .xs\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .xs\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .xs\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .xs\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .xs\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .xs\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .xs\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
+}
+
 @media (min-width: 768px) {
     .sm\:hidden { display: none !important }
     .sm\:block { display: block !important }
@@ -6681,9 +6733,20 @@ ul.lexassetscontent {
     .sm\:h-full { height: 100% !important }
     .sm\:h-screen { height: 100vh !important }
     .sm\:h-auto { height: auto !important }
+    .sm\:w-2\/3 { width: 66.666% !important}
     .sm\:w-1\/2 { width: 50% !important }
     .sm\:w-1\/3 { width: 33.333% !important }
     .sm\:w-1\/4 { width: 25% !important }
+
+    .sm\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .sm\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .sm\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .sm\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .sm\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .sm\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .sm\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .sm\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .sm\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 @media (min-width: 1024px) {
@@ -6702,9 +6765,20 @@ ul.lexassetscontent {
     .md\:h-full { height: 100% !important }
     .md\:h-screen { height: 100vh !important }
     .md\:h-auto { height: auto !important }
+    .md\:w-2\/3 { width: 66.666% !important}
     .md\:w-1\/2 { width: 50% !important }
     .md\:w-1\/3 { width: 33.333% !important }
     .md\:w-1\/4 { width: 25% !important }
+
+    .md\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .md\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .md\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .md\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .md\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .md\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .md\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .md\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .md\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 @media (min-width: 1440px) {
@@ -6723,9 +6797,20 @@ ul.lexassetscontent {
     .lg\:h-full { height: 100% !important }
     .lg\:h-screen { height: 100vh !important }
     .lg\:h-auto { height: auto !important }
+    .lg\:w-2\/3 { width: 66.666% !important}
     .lg\:w-1\/2 { width: 50% !important }
     .lg\:w-1\/3 { width: 33.333% !important }
     .lg\:w-1\/4 { width: 25% !important }
+
+    .lg\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .lg\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .lg\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .lg\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .lg\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .lg\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .lg\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .lg\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .lg\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 @media (min-width: 1920px) {
@@ -6744,9 +6829,20 @@ ul.lexassetscontent {
     .xl\:h-full { height: 100% !important }
     .xl\:h-screen { height: 100vh !important }
     .xl\:h-auto { height: auto !important }
+    .xl\:w-2\/3 { width: 66.666% !important}
     .xl\:w-1\/2 { width: 50% !important }
     .xl\:w-1\/3 { width: 33.333% !important }
     .xl\:w-1\/4 { width: 25% !important }
+
+    .xl\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .xl\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .xl\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .xl\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .xl\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .xl\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .xl\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .xl\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .xl\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 @media (min-width: 2560px) {
@@ -6765,9 +6861,20 @@ ul.lexassetscontent {
     .xxl\:h-full { height: 100% !important }
     .xxl\:h-screen { height: 100vh !important }
     .xxl\:h-auto { height: auto !important }
+    .xxl\:w-2\/3 { width: 66.666% !important}
     .xxl\:w-1\/2 { width: 50% !important }
     .xxl\:w-1\/3 { width: 33.333% !important }
     .xxl\:w-1\/4 { width: 25% !important }
+
+    .xxl\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .xxl\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .xxl\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .xxl\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .xxl\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .xxl\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .xxl\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .xxl\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .xxl\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 /* lexguidocs.css @jxarco */