vanilla-jui 1.7.26 → 1.7.28

package/src/css/themes/default/form.css

@@ -1,54 +1,42 @@
 @layer components {
-  .j-form,
-  .j-form .form-field,
-  .j-form .form-field .field-legend {
-    display: flex;
-  }
-
-  .j-form {
-    flex-direction: column;
-    gap: var(--s3);
-  }
-
   .j-form .form-field {
-    gap: var(--space);
-    margin: 0;
-  }
-
-  .j-form fieldset.form-field {
     border: 0;
     padding: 0;
+    margin: 0 0 var(--s3);
   }
 
-  .j-form .form-field {
-    flex-direction: column;
+  .j-form .form-field:last-of-type {
+    margin: 0;
   }
 
   .j-form .form-field .field-legend {
     color: var(--ui-fg-muted);
     font-size: var(--font-size-sm);
-    gap: var(--space);
+    display: block;
+    padding: 0;
+    margin-bottom: var(--space);
   }
 
   .j-form .field-legend.is-required::after {
     content: '*';
-    color: var(--state-danger);
+    color: var(--state-error);
+    margin-left: var(--space);
   }
 
   .j-form .form-field .field-control .help-block {
     font-size: var(--font-size-sm);
     color: var(--ui-fg-soft);
-    margin: 0;
+    margin: var(--space) 0 0;
   }
 
   .j-form .form-field .field-control .help-block[data-valid='false'] {
-    color: var(--state-danger);
+    color: var(--state-error);
   }
 
   .j-form .form-buttons {
     display: flex;
     gap: var(--s2);
-    margin-top: var(--s2);
+    margin-top: var(--s6);
   }
 
   .j-form [data-field-buttons] button {
@@ -276,7 +264,7 @@
     margin-left: 1px;
   }
 
-  .j-radio.is-group input[type='radio']:checked + span.radio-text {
+  .j-radio.is-group input[type='radio']:checked+span.radio-text {
     box-shadow: 0 0 0 1px var(--tone-solid);
     background-color: var(--tone-solid);
     z-index: 1;
@@ -332,11 +320,11 @@
   .j-checkbox label {
     display: flex;
     align-items: center;
-    gap: var(--checkbox-label-gap, var(--s2));
-    font-size: var(--checkbox-label-font-size, var(--font-size-md));
+    gap: calc(var(--space) * 1.5);
+    font-size: var(--font-size-md);
     height: var(--el-height-md);
-    padding: calc(var(--space)*2);
-    border-radius: var(--checkbox-label-border-radius, var(--radius-md));
+    padding: var(--s2);
+    border-radius: var(--radius-md);
   }
 
   .j-radio label,
@@ -345,7 +333,7 @@
   }
 
   .j-checkbox label:not(:has(input[type='checkbox']:disabled)):hover {
-    background-color: var(--checkbox-hover-bg-color, var(--ui-surface-hover));
+    background-color: var(--ui-surface-hover);
   }
 
   .j-checkbox input[type='checkbox'] {
@@ -440,33 +428,27 @@
     height: 1.5rem;
   }
 
-  .j-switch input[type='checkbox']:checked + .switch-slider {
+  .j-switch input[type='checkbox']:checked+.switch-slider {
     background-color: var(--tone-solid);
   }
 
-  .j-switch.is-sm input[type='checkbox']:checked + .switch-slider:after {
+  .j-switch.is-sm input[type='checkbox']:checked+.switch-slider:after {
     transform: translateX(0.75rem);
   }
 
-  .j-switch.is-md input[type='checkbox']:checked + .switch-slider:after {
+  .j-switch.is-md input[type='checkbox']:checked+.switch-slider:after {
     transform: translateX(1.125rem);
   }
 
-  .j-switch.is-lg input[type='checkbox']:checked + .switch-slider:after {
+  .j-switch.is-lg input[type='checkbox']:checked+.switch-slider:after {
     transform: translateX(1.5rem);
   }
 
-  .j-theme-gray
-    .j-switch
-    input[type='checkbox']:checked
-    + .switch-slider:after {
+  .j-theme-gray .j-switch input[type='checkbox']:checked+.switch-slider:after {
     background-color: var(--ui-bg);
   }
 
-  .j-theme-olive
-    .j-switch
-    input[type='checkbox']:checked
-    + .switch-slider:after {
+  .j-theme-olive .j-switch input[type='checkbox']:checked+.switch-slider:after {
     background-color: var(--ui-bg);
   }
 
@@ -564,31 +546,28 @@
     width: var(--input-height);
   }
 
-  .input-group > *:not(:first-child) {
+  .input-group>*:not(:first-child) {
     margin-left: -1px;
   }
 
-  .input-group > input.j-input:not(:first-child),
-  .input-group > select.j-select:not(:first-child),
-  .input-group
-    > :not(select.j-select)
-    + .el-addon:not(:first-child)
-    > .is-text {
+  .input-group>input.j-input:not(:first-child),
+  .input-group>select.j-select:not(:first-child),
+  .input-group> :not(select.j-select)+.el-addon:not(:first-child)>.is-text {
     border-left-color: transparent;
   }
 
-  .input-group > input.j-input:not(:first-child),
-  .input-group > select.j-select:not(:first-child),
-  .input-group > *:not(:first-child) > *,
-  .input-group > *:not(:first-child) > .is-text {
+  .input-group>input.j-input:not(:first-child),
+  .input-group>select.j-select:not(:first-child),
+  .input-group>*:not(:first-child)>*,
+  .input-group>*:not(:first-child)>.is-text {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .input-group > input.j-input:not(:last-child),
-  .input-group > select.j-select:not(:last-child),
-  .input-group > *:not(:last-child) > *,
-  .input-group > *:not(:last-child) > .is-text {
+  .input-group>input.j-input:not(:last-child),
+  .input-group>select.j-select:not(:last-child),
+  .input-group>*:not(:last-child)>*,
+  .input-group>*:not(:last-child)>.is-text {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -617,13 +596,13 @@
     --btn-box-shadow: none;
   }
 
-  .input-inner-group .el-addon + .j-input {
+  .input-inner-group .el-addon+.j-input {
     /* padding-inline: 0 var(--space); */
     padding-left: 0;
     padding-right: var(--space);
   }
 
-  .input-inner-group .el-addon + .j-select {
+  .input-inner-group .el-addon+.j-select {
     /* padding-inline-start: 2px; */
     padding-left: 2px;
   }
@@ -649,7 +628,7 @@
   .input-inner-group:has(input:focus),
   .input-inner-group:has(select:focus) {
     border-color: var(--tone-solid);
-    box-shadow: 0 0 0 4px var(--tone-ring);
+    box-shadow: 0 0 0 3px var(--tone-ring);
   }
 
   .input-inner-group .el-addon svg {
@@ -703,7 +682,7 @@
   .j-input[data-valid='false'],
   .j-select[data-valid='false'],
   .j-textarea[data-valid='false'] {
-    border-color: var(--state-danger);
+    border-color: var(--state-error);
     /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); */
   }
 
@@ -731,7 +710,7 @@
   .input-group .j-button:not(:disabled):active {
     outline: 0;
     border-color: var(--tone-solid);
-    box-shadow: 0 0 0 4px var(--tone-ring);
+    box-shadow: 0 0 0 3px var(--tone-ring);
   }
 
   .j-radio label input[type='radio']:focus-within {
@@ -774,7 +753,7 @@
     border-color: var(--ui-border);
   }
 
-  .j-radio.is-group label input[type='radio']:disabled + .radio-text {
+  .j-radio.is-group label input[type='radio']:disabled+.radio-text {
     cursor: not-allowed;
     background-color: var(--ui-disabled-bg);
     color: var(--ui-disabled-fg);
@@ -819,4 +798,4 @@
   .mobile .j-textarea {
     width: 100%;
   }
-}
+}

package/src/css/themes/default/menu.css

@@ -45,7 +45,7 @@
 
     text-decoration: underline;
     text-decoration-style: wavy;
-    text-decoration-color: var(--state-danger);
+    text-decoration-color: var(--state-error);
     text-underline-offset: 4px;
     padding: 4px 1rem;
 
@@ -54,7 +54,7 @@
   }
 
   .j-menu .menu .menu-item:not(:has(a)):hover {
-    background: var(--state-danger-subtle);
+    background: var(--state-error-subtle);
     border-radius: 4px;
   }
 
@@ -63,8 +63,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    background: var(--state-danger);
-    color: var(--state-danger-fg);
+    background: var(--state-error);
+    color: var(--state-error-fg);
     font-size: 12px;
     padding: 0 4px;
     border-radius: 4px;
@@ -95,11 +95,11 @@
     height: var(--menu-item-icon-size);
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children > a {
+  .j-menu .menu .menu-item.menu-item-has-children>a {
     position: relative;
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children > a::after {
+  .j-menu .menu .menu-item.menu-item-has-children>a::after {
     /* width: 0; */
     /* height: 0; */
     /* vertical-align: middle; */
@@ -111,7 +111,7 @@
     border-top: 4px solid currentColor;
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children:hover > a::after {
+  .j-menu .menu .menu-item.menu-item-has-children:hover>a::after {
     transform: rotate(180deg);
   }
 
@@ -124,11 +124,9 @@
     background-color: var(--ui-bg-subtle);
 
     @supports (color: color-mix(in srgb, red 50%, blue)) {
-      background-color: color-mix(
-        in srgb,
-        var(--ui-bg-subtle) 75%,
-        transparent
-      );
+      background-color: color-mix(in srgb,
+          var(--ui-bg-subtle) 75%,
+          transparent);
     }
 
     backdrop-filter: blur(4px);
@@ -150,36 +148,23 @@
     white-space: normal;
   }
 
-  .j-menu .menu > .menu-item.current-menu-item > a,
-  .j-menu .menu > .menu-item.current-menu-ancestor > a {
+  .j-menu .menu>.menu-item.current-menu-item>a,
+  .j-menu .menu>.menu-item.current-menu-ancestor>a {
     color: var(--tone-solid);
   }
 
-  .j-menu
-    .menu
-    .menu-item.current-menu-item
-    > .sub-menu
-    > .menu-item:not(.current-menu-item)
-    a {
+  .j-menu .menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item) a {
     color: inherit;
   }
 
-  .j-menu
-    .menu-item.current-menu-item
-    > .sub-menu
-    > .menu-item:not(.current-menu-item):hover
-    a {
+  .j-menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item):hover a {
     color: var(--tone-fg);
   }
 
   .j-menu .menu .menu-item .sub-menu .menu-item:hover a,
   .j-menu .menu .menu-item a:hover,
-  .j-menu .menu .menu-item.menu-item-has-children:hover > a,
-  .j-menu
-    .menu-item.menu-item-has-children:hover
-    > .sub-menu
-    > .menu-item.current-menu-item
-    a {
+  .j-menu .menu .menu-item.menu-item-has-children:hover>a,
+  .j-menu .menu-item.menu-item-has-children:hover>.sub-menu>.menu-item.current-menu-item a {
     background: var(--tone-soft);
     color: var(--tone-text);
   }
@@ -189,21 +174,18 @@
     z-index: var(--z-submenu);
   }
 
-  .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom'])
-    .menu
-    .menu-item.menu-item-has-children
-    > a {
+  .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom']) .menu .menu-item.menu-item-has-children>a {
     pointer-events: none;
   }
 
   /* list card menu */
-  .j-menu .menu-item.menu-item-has-children.list-menu:hover > .sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-menu:hover>.sub-menu {
     width: auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .j-menu .menu-item.list-menu > .sub-menu > .menu-item > a {
+  .j-menu .menu-item.list-menu>.sub-menu>.menu-item>a {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -211,13 +193,13 @@
     line-clamp: 1;
   }
 
-  .j-menu .menu-item.menu-item-has-children.list-menu:hover > .sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-menu:hover>.sub-menu {
     min-width: 240px;
     max-width: 360px;
     transform: translateX(-20%) translateY(1px);
   }
 
-  .j-menu .menu-item.list-menu > .sub-menu > .menu-item > a {
+  .j-menu .menu-item.list-menu>.sub-menu>.menu-item>a {
     padding: calc(var(--space) * 1.25) calc(var(--space) * 2.5);
     line-height: 1.75;
   }
@@ -265,10 +247,7 @@
     line-height: var(--line-height-paragraph);
   }
 
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children
-    > a::after {
+  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children>a::after {
     vertical-align: middle;
     position: absolute;
     right: 1rem;
@@ -278,10 +257,7 @@
     border-top: 4px solid transparent;
   }
 
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children:hover
-    > a::after {
+  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children:hover>a::after {
     transform: none;
   }
 
@@ -299,10 +275,7 @@
   }
 
   .j-menu[data-menu-type='mobile'] .menu .menu-item a:hover,
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children:hover
-    > a,
+  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children:hover>a,
   .j-menu[data-menu-type='mobile'] .menu .sub-menu .menu-item:hover a {
     background: inherit;
     color: inherit;
@@ -312,10 +285,7 @@
     background: var(--menu-item-active-bg);
   }
 
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > .sub-menu {
+  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
     visibility: visible;
     opacity: 1;
     z-index: var(--z-submenu);
@@ -356,10 +326,7 @@
     color: var(--ui-fg);
   }
 
-  .j-menu[data-menu-type='bottom']
-    > .menu
-    > .menu-item.menu-item-has-children
-    > a::after {
+  .j-menu[data-menu-type='bottom']>.menu>.menu-item.menu-item-has-children>a::after {
     content: '☰';
     font-size: var(--font-size-sm);
     margin-left: unset;
@@ -369,26 +336,17 @@
     transition: unset;
   }
 
-  .j-menu[data-menu-type='bottom']
-    > .menu
-    .menu-item.menu-item-has-children:hover
-    > a::after {
+  .j-menu[data-menu-type='bottom']>.menu .menu-item.menu-item-has-children:hover>a::after {
     transform: none;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent > a,
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item > a,
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > a {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent>a,
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item>a,
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children.is-active>a {
     color: var(--tone-solid);
   }
 
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu {
     opacity: 0;
     visibility: hidden;
     display: flex;
@@ -407,29 +365,17 @@
     z-index: -1;
   }
 
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > .sub-menu {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0%);
   }
 
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu
-    > .menu-item {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item {
     white-space: normal;
   }
 
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu
-    > .menu-item
-    > a {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item>a {
     min-height: var(--el-height-2xl);
     justify-content: center;
   }
@@ -493,4 +439,4 @@
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }
-}
+}

package/src/css/themes/default/tip.css

@@ -65,15 +65,15 @@
     margin: 6px 0;
   }
 
-  .j-tip .tip-content > *:first-child {
+  .j-tip .tip-content>*:first-child {
     margin-top: 0;
   }
 
-  .j-tip .tip-content > *:last-child {
+  .j-tip .tip-content>*:last-child {
     margin-bottom: 0;
   }
 
-  .j-tip.is-primary {
+  .j-tip.is-info {
     --tip-border-color: var(--state-info-border);
     --tip-bg: var(--state-info-soft);
     --tip-fg: var(--state-info-text);
@@ -91,9 +91,9 @@
     --tip-fg: var(--state-warning-text);
   }
 
-  .j-tip.is-danger {
-    --tip-border-color: var(--state-danger-border);
-    --tip-bg: var(--state-danger-soft);
-    --tip-fg: var(--state-danger-text);
+  .j-tip.is-error {
+    --tip-border-color: var(--state-error-border);
+    --tip-bg: var(--state-error-soft);
+    --tip-fg: var(--state-error-text);
   }
-}
+}

package/src/css/themes/default/toast.css

@@ -17,7 +17,7 @@
   .j-toast {
     --toast-fg: var(--ui-fg);
     --toast-bg: var(--ui-bg);
-    --toast-border-color: var(--ui-border);
+    --toast-border-color: var(--ui-border-subtle);
 
     gap: var(--s2);
     padding: var(--s3) var(--s4);
@@ -52,31 +52,35 @@
   }
 
   .j-toast.is-info {
-    --toast-bg: color-mix(in srgb, var(--ui-bg) 50%, transparent);
-  }
+    /* --toast-fg: var(--state-info-text); */
+    /* --toast-bg: var(--state-info-soft); */
+    /* --toast-border-color: var(--state-info-ring); */
 
-  .j-toast.is-primary {
-    --toast-fg: var(--state-info-text);
-    --toast-bg: var(--state-info-soft);
-    --toast-border-color: var(--state-info-ring);
+    --toast-fg: var(--state-info);
   }
 
   .j-toast.is-success {
-    --toast-fg: var(--state-success-text);
-    --toast-bg: var(--state-success-soft);
-    --toast-border-color: var(--state-success-ring);
+    /* --toast-fg: var(--state-success-text); */
+    /* --toast-bg: var(--state-success-soft); */
+    /* --toast-border-color: var(--state-success-ring); */
+
+    --toast-fg: var(--state-success);
   }
 
   .j-toast.is-warning {
-    --toast-fg: var(--state-warning-text);
-    --toast-bg: var(--state-warning-soft);
-    --toast-border-color: var(--state-warning-ring);
+    /* --toast-fg: var(--state-warning-text); */
+    /* --toast-bg: var(--state-warning-soft); */
+    /* --toast-border-color: var(--state-warning-ring); */
+
+    --toast-fg: var(--state-warning);
   }
 
   .j-toast.is-error {
-    --toast-fg: var(--state-danger-text);
-    --toast-bg: var(--state-danger-soft);
-    --toast-border-color: var(--state-danger-ring);
+    /* --toast-fg: var(--state-error-text); */
+    /* --toast-bg: var(--state-error-soft); */
+    /* --toast-border-color: var(--state-error-ring); */
+
+    --toast-fg: var(--state-error);
   }
 
   .j-toast-lite {
@@ -99,7 +103,7 @@
   }
 
   .j-toast.is-confirm {
-    --toast-bg: color-mix(in srgb, var(--ui-bg) 50%, transparent);
+    /* --toast-bg: color-mix(in srgb, var(--ui-bg) 50%, transparent); */
 
     gap: var(--s4);
     min-width: 280px;
@@ -117,4 +121,4 @@
     justify-content: flex-end;
     position: relative;
   }
-}
+}

package/src/css/themes/default/tooltip.css

@@ -41,9 +41,9 @@
   }
 
   .j-tooltip.is-error {
-    --tooltip-fg: var(--state-danger-fg);
-    --tooltip-bg: var(--state-danger-text);
-    --tooltip-border-color: var(--state-danger-border);
+    --tooltip-fg: var(--state-error-fg);
+    --tooltip-bg: var(--state-error-text);
+    --tooltip-border-color: var(--state-error-border);
   }
 
   .j-tooltip .el-text {
@@ -60,4 +60,4 @@
     background: unset;
     box-shadow: unset;
   }
-}
+}