@shohojdhara/atomix 0.2.8 → 0.3.0

package/dist/themes/applemix.css

@@ -3081,6 +3081,10 @@ a, a:hover {
 .c-card--filled {
   background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
 }
+.c-card--glass {
+  max-width: none;
+  background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
+}
 .c-card--outlined {
   background-color: transparent;
   border-width: var(--atomix-card-border-width);
@@ -3090,22 +3094,22 @@ a, a:hover {
   border: none;
 }
 .c-card--elevated {
-  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-md);
 }
 .c-card--elevation-none {
   box-shadow: none;
 }
 .c-card--elevation-sm {
-  box-shadow: var(--atomix-box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--atomix-box-shadow-sm);
 }
 .c-card--elevation-md {
-  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-md);
 }
 .c-card--elevation-lg {
-  box-shadow: var(--atomix-box-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-lg);
 }
 .c-card--elevation-xl {
-  box-shadow: var(--atomix-box-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-xl);
 }
 .c-card--disabled {
   opacity: 0.6;
@@ -3127,7 +3131,7 @@ a, a:hover {
   content: "";
   position: absolute;
   inset: 0;
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--atomix-card-bg-hover);
   -webkit-backdrop-filter: blur(1px);
           backdrop-filter: blur(1px);
   z-index: 1;
@@ -3139,7 +3143,7 @@ a, a:hover {
 .c-card--selected {
   --atomix-card-border-color: var(--atomix-brand-border-subtle);
   --atomix-card-border-width: 2px;
-  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-md);
 }
 .c-card--interactive {
   cursor: pointer;
@@ -3147,7 +3151,7 @@ a, a:hover {
 }
 .c-card--interactive:hover:not(.c-card--interactive--disabled) {
   transform: translateY(-2px);
-  box-shadow: var(--atomix-box-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-lg);
 }
 .c-card--interactive:active:not(.c-card--interactive--disabled) {
   transform: translateY(0);
@@ -3157,54 +3161,66 @@ a, a:hover {
   --atomix-card-bg-hover: var(--atomix-brand-bg-subtle);
   --atomix-card-border-color: var(--atomix-brand-border-subtle);
   --atomix-card-title-color: var(--atomix-brand-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-brand-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-brand-bg-subtle);
 }
 .c-card--secondary {
   --atomix-card-bg: var(--atomix-secondary-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-secondary-bg-subtle);
   --atomix-card-border-color: var(--atomix-secondary-border-subtle);
   --atomix-card-title-color: var(--atomix-secondary-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-secondary-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-secondary-bg-subtle);
 }
 .c-card--success {
   --atomix-card-bg: var(--atomix-success-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-success-bg-subtle);
   --atomix-card-border-color: var(--atomix-success-border-subtle);
   --atomix-card-title-color: var(--atomix-success-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-success-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-success-bg-subtle);
 }
 .c-card--info {
   --atomix-card-bg: var(--atomix-info-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-info-bg-subtle);
   --atomix-card-border-color: var(--atomix-info-border-subtle);
   --atomix-card-title-color: var(--atomix-info-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-info-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-info-bg-subtle);
 }
 .c-card--warning {
   --atomix-card-bg: var(--atomix-warning-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-warning-bg-subtle);
   --atomix-card-border-color: var(--atomix-warning-border-subtle);
   --atomix-card-title-color: var(--atomix-warning-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-warning-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-warning-bg-subtle);
 }
 .c-card--error {
   --atomix-card-bg: var(--atomix-error-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-error-bg-subtle);
   --atomix-card-border-color: var(--atomix-error-border-subtle);
   --atomix-card-title-color: var(--atomix-error-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-error-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-error-bg-subtle);
 }
 .c-card--light {
   --atomix-card-bg: var(--atomix-light);
   --atomix-card-bg-hover: var(--atomix-light-hover);
   --atomix-card-border-color: var(--atomix-light);
   --atomix-card-title-color: var(--atomix-dark);
-  --atomix-card-text-color: rgba(0, 0, 0, 0.7);
+  --atomix-card-text-color: var(--atomix-dark);
+  --atomix-card-icon-bg: var(--atomix-dark);
+  --atomix-card-icon-color: var(--atomix-light);
 }
 .c-card--dark {
   --atomix-card-bg: var(--atomix-dark);
   --atomix-card-bg-hover: var(--atomix-dark-hover);
   --atomix-card-border-color: var(--atomix-dark);
   --atomix-card-title-color: var(--atomix-light);
-  --atomix-card-text-color: rgba(255, 255, 255, 0.8);
-}
-.c-card--glass {
-  max-width: none;
-  background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
+  --atomix-card-text-color: var(--atomix-light);
+  --atomix-card-icon-bg: var(--atomix-light);
+  --atomix-card-icon-color: var(--atomix-dark);
 }
 .c-card__loading {
   position: absolute;
@@ -3221,8 +3237,8 @@ a, a:hover {
   height: 2.5rem;
   border: 4px solid;
   border-color: var(--atomix-border-primary, rgba(0, 0, 0, 0.15));
-  border-top-color: var(--atomix-brand-text-emphasis, var(--atomix-primary, #7c3aed));
-  border-right-color: var(--atomix-brand-text-emphasis, var(--atomix-primary, #7c3aed));
+  border-top-color: var(--atomix-brand-text-emphasis, var(--atomix-primary));
+  border-right-color: var(--atomix-brand-text-emphasis, var(--atomix-primary));
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   background-color: transparent;
@@ -9458,30 +9474,30 @@ a, a:hover {
     padding: 1rem 1rem;
   }
 }
-@media (max-width: 991.98px) {
-  .c-side-menu__wrapper {
-    height: 0px;
-    overflow: hidden;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: var(--atomix-side-menu-wrapper-transition);
-  }
+.c-side-menu__wrapper {
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition: var(--atomix-side-menu-wrapper-transition);
+  height: 0px;
 }
-@media (max-width: 991.98px) {
-  .c-side-menu__inner {
-    padding-top: var(--atomix-side-menu-inner-padding-top);
-  }
+.c-side-menu__inner {
+  padding-top: var(--atomix-side-menu-inner-padding-top);
 }
 .c-side-menu__title {
   color: var(--atomix-side-menu-title-color);
   font-size: var(--atomix-side-menu-title-font-size);
   font-weight: var(--atomix-side-menu-title-font-weight);
+  margin: 0;
   margin-bottom: var(--atomix-side-menu-title-spacer-y);
-  margin: 0 0 var(--atomix-side-menu-title-spacer-y) 0;
+}
+.c-side-menu__toggler .c-side-menu__title {
+  margin-bottom: 0;
+  flex: 1 1;
 }
 .c-side-menu__toggler {
-  display: none;
+  display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
@@ -9495,19 +9511,18 @@ a, a:hover {
           user-select: none;
   transition: var(--atomix-side-menu-toggler-transition);
   text-align: left;
-}
-@media (max-width: 991.98px) {
-  .c-side-menu__toggler {
-    display: flex;
-  }
+  margin: 0;
 }
 .c-side-menu__toggler:hover {
   background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 50%, transparent);
 }
-.c-side-menu__toggler:focus {
+.c-side-menu__toggler:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
   outline-offset: 2px;
 }
+.c-side-menu__toggler:focus:not(:focus-visible) {
+  outline: none;
+}
 .c-side-menu__toggler:active {
   transform: scale(0.98);
 }
@@ -9519,6 +9534,23 @@ a, a:hover {
 .c-side-menu__toggler-icon {
   transition: var(--atomix-side-menu-toggler-transition);
   font-size: 0.875em;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center;
+}
+.c-side-menu__toggler--nested {
+  margin-bottom: var(--atomix-side-menu-item-gap);
+}
+.c-side-menu__nested-wrapper {
+  overflow: hidden;
+  transition: var(--atomix-side-menu-wrapper-transition);
+  height: 0px;
+  margin: 0;
+}
+.c-side-menu__nested-inner {
+  display: block;
 }
 .c-side-menu__list {
   list-style: none;
@@ -9531,6 +9563,9 @@ a, a:hover {
 .c-side-menu__list:last-child {
   margin-bottom: 0;
 }
+.c-side-menu__item {
+  display: block;
+}
 .c-side-menu__link {
   display: flex;
   align-items: center;
@@ -9546,16 +9581,20 @@ a, a:hover {
   text-decoration: none;
   cursor: pointer;
   transition: var(--atomix-side-menu-item-transition);
+  position: relative;
 }
 .c-side-menu__link:hover {
   color: var(--atomix-side-menu-item-hover-color);
   background-color: color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 50%, transparent);
   text-decoration: none;
 }
-.c-side-menu__link:focus {
+.c-side-menu__link:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
   outline-offset: 2px;
 }
+.c-side-menu__link:focus:not(:focus-visible) {
+  outline: none;
+}
 .c-side-menu__link:active {
   transform: scale(0.98);
 }
@@ -9582,9 +9621,15 @@ a, a:hover {
   background-color: transparent;
   border-bottom: none;
 }
-.c-side-menu.is-open .c-side-menu__toggler-icon {
+.c-side-menu.is-open .c-side-menu__toggler .c-side-menu__toggler-icon {
   transform: rotate(90deg);
 }
+.c-side-menu__toggler--nested.is-open .c-side-menu__toggler-icon {
+  transform: rotate(90deg);
+}
+.c-side-menu__toggler--nested.is-open + .c-side-menu__nested-wrapper {
+  height: auto;
+}
 .dark-mode .c-side-menu {
   --atomix-side-menu-bg: var(--atomix-gray-9);
   --atomix-side-menu-border-color: var(--atomix-gray-7);
@@ -9602,6 +9647,18 @@ a, a:hover {
   .c-side-menu .c-side-menu__toggler-icon {
     transition: none;
   }
+  .c-side-menu .c-side-menu__toggler:active {
+    transform: none;
+  }
+  .c-side-menu .c-side-menu__link:active {
+    transform: none;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-side-menu .c-side-menu__toggler:focus-visible,
+  .c-side-menu .c-side-menu__link:focus-visible {
+    outline-width: 3px;
+  }
 }
 .c-skeleton {
   --atomix-skeleton-width: 100%;