@mirai/ui 2.1.22 → 2.1.24

package/README.md

@@ -42,11 +42,11 @@ const MyComponent = () => (
 **Theming variables**
 
 ```css
---mirai-ui-checkbox-base: var(--mirai-ui-base);
+--mirai-ui-checkbox-background: var(--mirai-ui-base);
+--mirai-ui-checkbox-background-checked: var(--mirai-ui-accent);
+--mirai-ui-checkbox-background-disabled: var(--mirai-ui-content-border);
 --mirai-ui-checkbox-border-color: var(--mirai-ui-content-light);
 --mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
---mirai-ui-checkbox-checked: var(--mirai-ui-accent);
---mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
 --mirai-ui-checkbox-size: calc(var(--mirai-ui-space-M) + var(--mirai-ui-space-XXS));
 --mirai-ui-checkbox-size-mobile: var(--mirai-ui-space-L);
 ```
@@ -121,12 +121,12 @@ const MyComponent = () => (
 ```css
 --mirai-ui-input-background: var(--mirai-ui-base);
 --mirai-ui-input-color: var(--mirai-ui-content);
---mirai-ui-input-disabled: var(--mirai-ui-content-light);
---mirai-ui-input-focus-color: var(--mirai-ui-focus-color);
---mirai-ui-input-focus-shadow: var(--mirai-ui-focus-shadow);
---mirai-ui-input-focus-shadow-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
---mirai-ui-input-focus-shadow-warning: 0 0 0 calc(var(--mirai-ui-focus-width) * 0.66) var(--mirai-ui-error-background);
---mirai-ui-input-focus-shadow-success: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-success-border);
+--mirai-ui-input-color-active: var(--mirai-ui-focus-color);
+--mirai-ui-input-color-disabled: var(--mirai-ui-content-light);
+--mirai-ui-input-shadow-active: var(--mirai-ui-focus-shadow);
+--mirai-ui-input-shadow-active-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
+--mirai-ui-input-shadow-active-warning: 0 0 0 calc(var(--mirai-ui-focus-width) * 0.66) var(--mirai-ui-error-background);
+--mirai-ui-input-shadow-active-success: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-success-border);
 ```
 
 ### Layer
@@ -229,10 +229,9 @@ const MyComponent = () => (
 **Theming variables**
 
 ```css
---mirai-ui-radio-base: var(--mirai-ui-base);
---mirai-ui-radio-border: var(--mirai-ui-content-light);
---mirai-ui-radio-checked: var(--mirai-ui-accent);
---mirai-ui-radio-disabled: var(--mirai-ui-content-border);
+--mirai-ui-radio-background: var(--mirai-ui-base);
+--mirai-ui-radio-background-checked: var(--mirai-ui-accent);
+--mirai-ui-radio-background-disabled: var(--mirai-ui-content-border);
 --mirai-ui-radio-size: var(--mirai-ui-checkbox-size);
 --mirai-ui-radio-size-mobile: var(--mirai-ui-checkbox-size-mobile);
 ```
@@ -326,12 +325,11 @@ const MyComponent = () => (
 **Theming variables**
 
 ```css
---mirai-ui-switch-base: var(--mirai-ui-base);
---mirai-ui-switch-border-color: var(--mirai-ui-content-light);
+--mirai-ui-switch-background: var(--mirai-ui-base);
+--mirai-ui-switch-background-checked: var(--mirai-ui-accent);
+--mirai-ui-switch-background-disabled: var(--mirai-ui-content-border);
 --mirai-ui-switch-border-size: var(--mirai-ui-space-XXS);
 --mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
---mirai-ui-switch-checked: var(--mirai-ui-accent);
---mirai-ui-switch-disabled: var(--mirai-ui-content-border);
 --mirai-ui-switch-size: var(--mirai-ui-space-M);
 --mirai-ui-switch-size-mobile: calc(var(--mirai-ui-space-L) - var(--mirai-ui-space-XXS));
 ```
@@ -485,13 +483,13 @@ const MyComponent = (props) => {
 
 ```css
 --mirai-ui-button-background: var(--mirai-ui-accent);
+--mirai-ui-button-background-active: var(--mirai-ui-focus-color);
 --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
 --mirai-ui-button-busy-width: 0%;
 --mirai-ui-button-color: var(--mirai-ui-base);
 --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
---mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
+--mirai-ui-button-color-disabled: var(--mirai-ui-content-border);
 --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
---mirai-ui-button-focus-color: var(--mirai-ui-focus-color);
 --mirai-ui-button-font-weight: var(--mirai-ui-font-medium-weight);
 --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
 --mirai-ui-button-height: calc(var(--mirai-ui-space-XL) - var(--mirai-ui-space-XXS));
@@ -501,10 +499,10 @@ const MyComponent = (props) => {
 --mirai-ui-button-secondary-background: var(--mirai-ui-base);
 --mirai-ui-button-secondary-background-active: var(--mirai-ui-accent-background);
 --mirai-ui-button-secondary-color: var(--mirai-ui-button-background);
---mirai-ui-button-secondary-focus-color: var(--mirai-ui-button-focus-color);
---mirai-ui-button-secondary-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
+--mirai-ui-button-secondary-color-active: var(--mirai-ui-focus-color);
 --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
 --mirai-ui-button-transparent-color: var(--mirai-ui-content);
+--mirai-ui-button-transparent-color-active: var(--mirai-ui-focus-color);
 ```
 
 ### Calendar
@@ -567,13 +565,12 @@ const MyComponent = props => {
 --mirai-ui-calendar-caption-color: var(--mirai-ui-content-light);
 --mirai-ui-calendar-cell: var(--mirai-ui-space-XL);
 --mirai-ui-calendar-cell-border-radius: var(--mirai-ui-border-radius);
---mirai-ui-calendar-highlight-color: var(--mirai-ui-accent);
+--mirai-ui-calendar-color-active: var(--mirai-ui-accent);
 --mirai-ui-calendar-padding: var(--mirai-ui-space-XS);
 --mirai-ui-calendar-range-background: var(--mirai-ui-content-background);
 --mirai-ui-calendar-selected-background: var(--mirai-ui-accent);
 --mirai-ui-calendar-selected-color: var(--mirai-ui-base);
 --mirai-ui-calendar-weekday-color: var(--mirai-ui-content-light);
---mirai-ui-calendar-week-margin: 2px;
 ```
 
 ### Form
@@ -780,9 +777,8 @@ const MyComponent = () => {
 **Theming variables**
 
 ```css
---mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
---mirai-ui-input-option-gap-x: var(--mirai-ui-space-XS);
---mirai-ui-input-option-gap-y: var(--mirai-ui-space-M);
+--mirai-ui-input-option-gap: var(--mirai-ui-space-XS);
+--mirai-ui-input-option-margin-bottom: var(--mirai-ui-space-M);
 ```
 
 ### InputPhone
@@ -928,10 +924,10 @@ const MyComponent = (props) => {
 
 ```css
 --mirai-ui-input-text-border: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
---mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
---mirai-ui-input-text-focus: var(--mirai-ui-content);
---mirai-ui-input-text-gap: var(--mirai-ui-space-M);
---mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
+--mirai-ui-input-text-color-active: var(--mirai-ui-content);
+--mirai-ui-input-text-color-disabled: var(--mirai-ui-content-border);
+--mirai-ui-input-text-icon-size: var(--mirai-ui-font-size-headline-3);
+--mirai-ui-input-text-margin-bottom: var(--mirai-ui-space-M);
 --mirai-ui-input-text-padding-x: var(--mirai-ui-space-M);
 --mirai-ui-input-text-padding-y: var(--mirai-ui-space-XS);
 --mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
@@ -983,14 +979,13 @@ const MyComponent = () => {
 **Theming variables**
 
 ```css
---mirai-ui-menu-base: var(--mirai-ui-base);
+--mirai-ui-menu-background: var(--mirai-ui-base);
 --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
 --mirai-ui-menu-min-width: calc(var(--mirai-ui-breakpoint-S) / 2);
+--mirai-ui-menu-option-background-active: var(--mirai-ui-content-background);
+--mirai-ui-menu-option-color-active: var(--mirai-ui-content);
+--mirai-ui-menu-option-color-disabled: var(--mirai-ui-content-border);
 --mirai-ui-menu-shadow: var(--mirai-ui-shadow);
---mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
---mirai-ui-menu-option-hover-background: var(--mirai-ui-content-background);
---mirai-ui-menu-option-hover-color: var(--mirai-ui-content);
---mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
 ```
 
 ### Modal
@@ -1032,7 +1027,7 @@ const MyComponent = (props) => {
 --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
 --mirai-ui-modal-icon: var(--mirai-ui-font-size-headline-2);
 --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
---mirai-ui-modal-overflow: rgba(72, 72, 72, 0.2);
+--mirai-ui-modal-overflow-background: rgba(72, 72, 72, 0.2);
 --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
 ```
 
@@ -1067,8 +1062,8 @@ const Example = (props) => (
 ```css
 --mirai-ui-notification-border-radius: var(--mirai-ui-border-radius);
 --mirai-ui-notification-padding: var(--mirai-ui-space-S);
---mirai-ui-notification-padding-large: var(--mirai-ui-space-M);
---mirai-ui-notification-padding-small: var(--mirai-ui-space-XS);
+--mirai-ui-notification-large-padding: var(--mirai-ui-space-M);
+--mirai-ui-notification-small-padding: var(--mirai-ui-space-XS);
 ```
 
 ### Progress
@@ -1129,8 +1124,8 @@ const MyComponent = (props) => {
 **Theming variables**
 
 ```css
---mirai-ui-slider-button: var(--mirai-ui-base);
---mirai-ui-slider-button-icon: var(--mirai-ui-content);
+--mirai-ui-slider-button-background: var(--mirai-ui-base);
+--mirai-ui-slider-icon-color: var(--mirai-ui-content);
 --mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
 --mirai-ui-slider-overlay-color: var(--mirai-ui-base);
 --mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);

package/build/components/Button/Button.module.css

@@ -27,7 +27,7 @@
 
 /* -- variants */
 .button.disabled:not(.busy) {
-  background-color: var(--mirai-ui-button-disabled-background);
+  background-color: var(--mirai-ui-button-color-disabled);
   color: var(--mirai-ui-button-disabled-color);
 }
 
@@ -40,8 +40,8 @@
 .button:not(.disabled).secondary:active,
 .button:not(.disabled).secondary:hover {
   background-color: var(--mirai-ui-button-secondary-background-active);
-  box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-focus-color);
-  color: var(--mirai-ui-button-secondary-focus-color);
+  box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-color-active);
+  color: var(--mirai-ui-button-secondary-color-active);
 }
 
 .transparent {
@@ -52,12 +52,12 @@
 .transparent:not(.disabled):active,
 .transparent:not(.disabled):hover {
   background-color: var(--mirai-ui-button-transparent-background-active);
-  color: var(--mirai-ui-button-focus-color);
+  color: var(--mirai-ui-button-transparent-color-active);
 }
 
 .button:not(.disabled):not(.secondary):not(.transparent):active,
 .button:not(.disabled):not(.secondary):not(.transparent):hover {
-  background-color: var(--mirai-ui-button-focus-color);
+  background-color: var(--mirai-ui-button-background-active);
 }
 
 /* -- sizing */

package/build/components/Calendar/Calendar.module.css

@@ -42,7 +42,7 @@
 }
 
 .cell:not(.weekday) {
-  margin-bottom: var(--mirai-ui-calendar-week-margin);
+  margin-bottom: calc(var(--mirai-ui-space-XXS) / 2);
 }
 
 .vertical .weekdays {

package/build/components/InputNumber/InputNumber.module.css

@@ -1,5 +1,5 @@
 .inputNumber {
-  margin-bottom: var(--mirai-ui-input-text-gap);
+  margin-bottom: var(--mirai-ui-input-text-margin-bottom);
 }
 
 .texts {
@@ -10,15 +10,15 @@
   color: var(--mirai-ui-input-color);
   display: block;
   text-align: center;
-  width: var(--mirai-ui-input-number-value-width);
+  width: var(--mirai-ui-space-XL);
 }
 
 .value.disabled {
-  color: var(--mirai-ui-input-text-disabled);
+  color: var(--mirai-ui-input-text-color-disabled);
 }
 
 .label {
-  color: var(--mirai-ui-input-text-focus);
+  color: var(--mirai-ui-input-text-color-active);
 }
 
 .hint {

package/build/components/InputOption/InputOption.module.css

@@ -2,8 +2,8 @@
   align-items: center;
   display: flex;
   flex-direction: var(--mirai-ui-row-direction);
-  gap: var(--mirai-ui-input-option-gap-x);
-  margin-bottom: var(--mirai-ui-input-option-gap-y);
+  gap: var(--mirai-ui-input-option-gap);
+  margin-bottom: var(--mirai-ui-input-option-margin-bottom);
   position: relative;
   width: 100%;
 }
@@ -17,12 +17,12 @@
 }
 
 .label {
-  color: var(--mirai-ui-input-text-focus);
+  color: var(--mirai-ui-input-text-color-active);
 }
 
 @media only screen and (max-width: 480px) {
   .icon {
-    margin: calc(calc(var(--mirai-ui-checkbox-size-mobile) - var(--mirai-ui-input-text-icon)) / 2);
+    margin: calc(calc(var(--mirai-ui-checkbox-size-mobile) - var(--mirai-ui-input-text-icon-size)) / 2);
   }
 }
 

package/build/components/InputPhone/InputPhone.module.css

@@ -1,5 +1,5 @@
 .inputPhone {
-  margin-bottom: var(--mirai-ui-input-text-gap);
+  margin-bottom: var(--mirai-ui-input-text-margin-bottom);
 }
 
 .prefix {

package/build/components/InputText/InputText.module.css

@@ -1,6 +1,6 @@
 .inputContainer {
   flex: 1;
-  margin-bottom: var(--mirai-ui-input-text-gap);
+  margin-bottom: var(--mirai-ui-input-text-margin-bottom);
   position: relative;
 }
 
@@ -14,26 +14,26 @@
 }
 
 .inputBorder.disabled {
-  border-color: var(--mirai-ui-input-text-disabled);
+  border-color: var(--mirai-ui-input-text-color-disabled);
 }
 
 .inputBorder.error {
   border-color: var(--mirai-ui-error);
-  box-shadow: var(--mirai-ui-input-focus-shadow-warning);
+  box-shadow: var(--mirai-ui-input-shadow-active-warning);
 }
 
 .inputBorder.focus:not(.error):not(.warning):not(.success) {
-  border-color: var(--mirai-ui-input-focus-color);
-  box-shadow: var(--mirai-ui-input-focus-shadow);
+  border-color: var(--mirai-ui-input-color-active);
+  box-shadow: var(--mirai-ui-input-shadow-active);
 }
 
 .inputBorder.focus.error {
-  box-shadow: var(--mirai-ui-input-focus-shadow-error);
+  box-shadow: var(--mirai-ui-input-shadow-active-error);
 }
 
 /* .inputBorder.focus.success {
   border-color: var(--mirai-ui-success-dark);
-  box-shadow: var(--mirai-ui-input-focus-shadow-success);
+  box-shadow: var(--mirai-ui-input-shadow-active-success);
 } */
 
 .content {
@@ -43,10 +43,10 @@
 }
 
 .icon {
-  font-size: var(--mirai-ui-input-text-icon);
-  height: var(--mirai-ui-input-text-icon);
-  line-height: var(--mirai-ui-input-text-icon);
-  width: var(--mirai-ui-input-text-icon);
+  font-size: var(--mirai-ui-input-text-icon-size);
+  height: var(--mirai-ui-input-text-icon-size);
+  line-height: var(--mirai-ui-input-text-icon-size);
+  width: var(--mirai-ui-input-text-icon-size);
   margin: 0 calc(var(--mirai-ui-input-text-padding-x) / 3);
 }
 
@@ -61,11 +61,11 @@
 }
 
 .icon.expand:not(.reverse) {
-  margin-left: calc(var(--mirai-ui-input-text-icon) * -1);
+  margin-left: calc(var(--mirai-ui-input-text-icon-size) * -1);
 }
 
 .icon.expand.reverse {
-  margin-right: calc(var(--mirai-ui-input-text-icon) * -1);
+  margin-right: calc(var(--mirai-ui-input-text-icon-size) * -1);
 }
 
 .icon.expand,
@@ -128,7 +128,7 @@
 
 .text.disabled,
 .icon.disabled {
-  color: var(--mirai-ui-input-text-disabled);
+  color: var(--mirai-ui-input-text-color-disabled);
 }
 
 .text.error {
@@ -136,7 +136,7 @@
 }
 
 .text.focus:not(.error) {
-  color: var(--mirai-ui-input-text-focus);
+  color: var(--mirai-ui-input-text-color-active);
 }
 
 .text .required {

package/build/components/Menu/Menu.module.css

@@ -1,5 +1,5 @@
 .menu.desktop {
-  background-color: var(--mirai-ui-menu-base);
+  background-color: var(--mirai-ui-menu-background);
   border-radius: var(--mirai-ui-menu-border-radius);
   box-shadow: var(--mirai-ui-menu-shadow);
   min-width: var(--mirai-ui-menu-min-width);
@@ -13,27 +13,27 @@
   cursor: default;
   flex: 1;
   flex-direction: row;
-  padding: var(--mirai-ui-menu-option-padding);
+  padding: var(--mirai-ui-space-M);
   width: 100%;
 }
 
 .menu .option.value:hover:not(.disabled) {
-  background-color: var(--mirai-ui-menu-option-hover-background);
+  background-color: var(--mirai-ui-menu-option-background-active);
   cursor: pointer;
 }
 
 .menu .option.value:hover:not(.disabled) .icon,
 .menu .option.value:hover:not(.disabled) .label {
-  color: var(--mirai-ui-menu-option-hover-color);
+  color: var(--mirai-ui-menu-option-color-active);
   cursor: pointer;
 }
 
 .menu .option .content {
-  gap: var(--mirai-ui-menu-option-padding);
+  gap: var(--mirai-ui-space-M);
 }
 
 .menu .divider {
-  box-shadow: inset 0 calc(var(--mirai-ui-border-width) * -1) var(--mirai-ui-menu-option-disabled);
+  box-shadow: inset 0 calc(var(--mirai-ui-border-width) * -1) var(--mirai-ui-menu-option-color-disabled);
 }
 
 .menu .icon {
@@ -49,7 +49,7 @@
 
 .menu .option.disabled .icon,
 .menu .option.disabled .label {
-  color: var(--mirai-ui-menu-option-disabled);
+  color: var(--mirai-ui-menu-option-color-disabled);
   cursor: default;
 }
 
@@ -62,7 +62,7 @@
 
 @media only screen and (min-width: 481px) {
   .menu {
-    background-color: var(--mirai-ui-menu-base);
+    background-color: var(--mirai-ui-menu-background);
     border-radius: var(--mirai-ui-menu-border-radius);
     box-shadow: var(--mirai-ui-menu-shadow);
     min-width: var(--mirai-ui-menu-min-width);

package/build/components/Modal/Modal.module.css

@@ -77,7 +77,7 @@
 }
 
 .overflow {
-  background-color: var(--mirai-ui-modal-overflow);
+  background-color: var(--mirai-ui-modal-overflow-background);
   opacity: 0;
   transition: backdrop-filter var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);

package/build/components/Notification/Notification.module.css

@@ -37,11 +37,11 @@
 }
 
 .notification.outlined.large {
-  padding: var(--mirai-ui-notification-padding-large);
+  padding: var(--mirai-ui-notification-large-padding);
 }
 
 .notification.outlined.small {
-  padding: var(--mirai-ui-notification-padding-small);
+  padding: var(--mirai-ui-notification-small-padding);
 }
 
 .notification.outlined.contrast {
@@ -76,7 +76,7 @@
 
 .notification.large .texts {
   align-items: center;
-  gap: var(--mirai-ui-notification-padding-small);
+  gap: var(--mirai-ui-notification-small-padding);
 }
 
 .notification.large .texts * {

package/build/components/Slider/Slider.module.css

@@ -8,7 +8,7 @@
 
 .button {
   align-items: center;
-  background-color: var(--mirai-ui-slider-button);
+  background-color: var(--mirai-ui-slider-button-background);
   border-radius: 50%;
   box-shadow: var(--mirai-ui-modal-shadow);
   display: flex;
@@ -26,7 +26,7 @@
 }
 
 .button .icon {
-  color: var(--mirai-ui-slider-button-icon);
+  color: var(--mirai-ui-slider-icon-color);
 }
 
 .button.first {

package/build/primitives/Checkbox/Checkbox.module.css

@@ -3,7 +3,7 @@
 }
 
 .checkbox input {
-  background-color: var(--mirai-ui-checkbox-base);
+  background-color: var(--mirai-ui-checkbox-background);
   border: solid var(--mirai-ui-border-width) var(--mirai-ui-checkbox-border-color);
   border-radius: var(--mirai-ui-checkbox-border-radius);
   box-sizing: border-box;
@@ -21,37 +21,37 @@
 }
 
 .checkbox input:disabled {
-  border-color: var(--mirai-ui-checkbox-disabled);
+  border-color: var(--mirai-ui-checkbox-background-disabled);
 }
 
 .checkbox input:disabled.checked {
-  background-color: var(--mirai-ui-checkbox-disabled);
+  background-color: var(--mirai-ui-checkbox-background-disabled);
 }
 
 .checkbox input:not(:disabled).checked {
-  background-color: var(--mirai-ui-checkbox-checked);
-  border-color: var(--mirai-ui-checkbox-checked);
+  background-color: var(--mirai-ui-checkbox-background-checked);
+  border-color: var(--mirai-ui-checkbox-background-checked);
 }
 
 .checkbox input:not(:disabled).error {
   border-color: var(--mirai-ui-error);
-  box-shadow: var(--mirai-ui-input-focus-shadow-warning);
+  box-shadow: var(--mirai-ui-input-shadow-active-warning);
 }
 
 .checkbox input:not(:disabled):not(.error):not(:checked):focus,
 .checkbox input:not(:disabled):not(.error):not(:checked):hover {
-  border-color: var(--mirai-ui-input-focus-color);
-  box-shadow: var(--mirai-ui-input-focus-shadow);
+  border-color: var(--mirai-ui-input-color-active);
+  box-shadow: var(--mirai-ui-input-shadow-active);
 }
 
 .checkbox input:not(:disabled).error:focus,
 .checkbox input:not(:disabled).error:hover {
-  box-shadow: var(--mirai-ui-input-focus-shadow-error);
+  box-shadow: var(--mirai-ui-input-shadow-active-error);
 }
 
 .checkbox input:not(:disabled):checked:focus,
 .checkbox input:not(:disabled):checked:hover {
-  box-shadow: var(--mirai-ui-input-focus-shadow);
+  box-shadow: var(--mirai-ui-input-shadow-active);
 }
 
 /* -- reset defaults -------------------------------------------------------- */

package/build/primitives/Radio/Radio.module.css

@@ -3,8 +3,8 @@
 }
 
 .radio input {
-  background-color: var(--mirai-ui-radio-base);
-  border: solid var(--mirai-ui-border-width) var(--mirai-ui-radio-border);
+  background-color: var(--mirai-ui-radio-background);
+  border: solid var(--mirai-ui-border-width) var(--mirai-ui-border-color);
   border-radius: 50%;
   box-sizing: border-box;
   cursor: pointer;
@@ -33,20 +33,20 @@
 }
 
 .radio input:disabled {
-  border-color: var(--mirai-ui-radio-disabled);
+  border-color: var(--mirai-ui-radio-background-disabled);
 }
 
 .radio input:checked:not(:disabled) {
-  background-color: var(--mirai-ui-radio-checked);
-  border-color: var(--mirai-ui-radio-checked);
+  background-color: var(--mirai-ui-radio-background-checked);
+  border-color: var(--mirai-ui-radio-background-checked);
 }
 
 .radio input:checked:disabled ~ .checkmark {
-  background-color: var(--mirai-ui-radio-disabled);
+  background-color: var(--mirai-ui-radio-background-disabled);
 }
 
 .radio input:checked:not(:disabled) ~ .checkmark {
-  background-color: var(--mirai-ui-radio-base);
+  background-color: var(--mirai-ui-radio-background);
 }
 
 .radio input:not(:disabled).error {
@@ -55,18 +55,18 @@
 
 .radio input:not(:disabled):not(.error):not(:checked):focus,
 .radio input:not(:disabled):not(.error):not(:checked):hover {
-  border-color: var(--mirai-ui-input-focus-color);
-  box-shadow: var(--mirai-ui-input-focus-shadow);
+  border-color: var(--mirai-ui-input-color-active);
+  box-shadow: var(--mirai-ui-input-shadow-active);
 }
 
 .radio input:not(:disabled).error:focus,
 .radio input:not(:disabled).error:hover {
-  box-shadow: var(--mirai-ui-input-focus-shadow-error);
+  box-shadow: var(--mirai-ui-input-shadow-active-error);
 }
 
 .radio input:not(:disabled):checked:focus,
 .radio input:not(:disabled):checked:hover {
-  box-shadow: var(--mirai-ui-input-focus-shadow);
+  box-shadow: var(--mirai-ui-input-shadow-active);
 }
 
 /* -- reset defaults -------------------------------------------------------- */

package/build/primitives/ScrollView/ScrollView.js

@@ -68,6 +68,9 @@ var ScrollView = function ScrollView(_ref) {
       childList: true,
       subtree: true
     });
+    if (horizontal ? el.clientWidth !== el.scrollWidth : el.clientHeight !== el.scrollHeight) {
+      setValue(calcValue(el));
+    }
     return function () {
       return observer.disconnect();
     };

package/build/primitives/ScrollView/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["_propTypes","_interopRequireDefault","require","_react","_interopRequireWildcard","_helpers","_Icon","_Primitive","_View","_ScrollViewModule","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","iterator","f","next","done","isArray","_objectWithoutProperties","_objectWithoutPropertiesLoose","s","includes","propertyIsEnumerable","ScrollView","_ref","_ref$behavior","behavior","children","_ref$defaultScrollInd","defaultScrollIndicator","height","horizontal","_ref$scrollEventThrot","scrollEventThrottle","_ref$scrollIndicator","scrollIndicator","scrollTo","_ref$snap","snap","_ref$tag","tag","width","_ref$onScroll","onScroll","others","ref","useRef","_useState","useState","_useState2","setValue","timeout","useEffect","_ref2","el","current","callback","calcValue","observer","MutationObserver","observe","childList","subtree","disconnect","_current$scrollTo","_ref3","_ref3$current","undefined","setTimeout","clearTimeout","handleScroll","_ref4","target","_ref5","clientHeight","clientWidth","scrollHeight","scrollWidth","scrollTop","scrollLeft","x","parseInt","y","offsetX","offsetY","percentX","percentY","percent","React","createElement","Primitive","className","styles","style","scrollview","vertical","notIndicator","Fragment","View","indicator","hide","progress","concat","Icon","headline","level","ICON","RIGHT","DOWN","icon","exports","displayName","propTypes","PropTypes","string","node","isRequired","bool","number","func"],"sources":["../../../src/primitives/ScrollView/ScrollView.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON } from '../Icon';\nimport { Primitive } from '../Primitive';\nimport { View } from '../View';\nimport style from './ScrollView.module.css';\n\nconst ScrollView = ({\n  behavior = 'smooth',\n  children,\n  defaultScrollIndicator = false,\n  height,\n  horizontal,\n  scrollEventThrottle = 16, // * 60fps\n  scrollIndicator = false,\n  scrollTo,\n  snap = true,\n  tag = 'scrollview',\n  width,\n  onScroll = () => {},\n  ...others\n}) => {\n  const ref = useRef();\n\n  const [value, setValue] = useState();\n\n  let timeout = null;\n\n  useEffect(() => {\n    const { current: el } = ref || {};\n    if (!scrollIndicator || !el) return;\n\n    const callback = () => setValue(calcValue(el));\n    const observer = new MutationObserver(callback);\n    observer.observe(el, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref]);\n\n  useEffect(() => {\n    const { current = {} } = ref || {};\n    if (!current.scrollTo || scrollTo === undefined) return;\n\n    current.scrollTo({ [horizontal ? 'left' : 'top']: scrollTo, behavior });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollTo]);\n\n  useEffect(() => {\n    if (!value) return;\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    timeout = setTimeout(() => onScroll(value), scrollEventThrottle);\n\n    return () => clearTimeout(timeout);\n  }, [value]);\n\n  const handleScroll = ({ target } = {}) => setValue(calcValue(target));\n\n  const calcValue = ({ clientHeight, clientWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft } = {}) => {\n    const x = parseInt(scrollLeft, 10);\n    const y = parseInt(scrollTop, 10);\n    const offsetX = scrollWidth - clientWidth;\n    const offsetY = scrollHeight - clientHeight;\n\n    return (horizontal ? offsetX : offsetY) > 0\n      ? {\n          x,\n          y,\n          percentX: offsetX ? parseInt((x * 100) / offsetX, 10) : 0,\n          percentY: offsetY ? parseInt((y * 100) / offsetY, 10) : 0,\n        }\n      : undefined;\n  };\n\n  const percent =\n    scrollIndicator && !defaultScrollIndicator && value ? (horizontal ? value.percentX : value.percentY) : undefined;\n\n  return React.createElement(\n    Primitive,\n    {\n      ...others,\n      ref,\n      tag,\n      onScroll: handleScroll,\n      className: styles(\n        style.scrollview,\n        snap && style.snap,\n        horizontal ? style.horizontal : style.vertical,\n        (!scrollIndicator || !defaultScrollIndicator) && style.notIndicator,\n        others.className,\n      ),\n      style: { ...others.style, height, width },\n    },\n    <>\n      {children}\n      {percent >= 0 && (\n        <View\n          tag=\"scrollview-indicator\"\n          className={styles(\n            style.indicator,\n            horizontal ? style.horizontal : style.vertical,\n            percent > 95 && style.hide,\n          )}\n        >\n          <View\n            className={style.progress}\n            style={\n              horizontal ? { height: '100%', width: `${percent || 0}%` } : { height: `${percent || 0}%`, width: '100%' }\n            }\n          />\n          <Icon headline level={2} value={horizontal ? ICON.RIGHT : ICON.DOWN} className={style.icon} />\n        </View>\n      )}\n    </>,\n  );\n};\n\nScrollView.displayName = 'Primitive:ScrollView';\n\nScrollView.propTypes = {\n  behavior: PropTypes.string,\n  children: PropTypes.node.isRequired,\n  defaultScrollIndicator: PropTypes.bool,\n  height: PropTypes.number,\n  horizontal: PropTypes.bool,\n  scrollEventThrottle: PropTypes.number,\n  scrollIndicator: PropTypes.bool,\n  scrollTo: PropTypes.number,\n  snap: PropTypes.bool,\n  tag: PropTypes.string,\n  width: PropTypes.number,\n  onScroll: PropTypes.func,\n};\n\nexport { ScrollView };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ScrollView.js","names":["_propTypes","_interopRequireDefault","require","_react","_interopRequireWildcard","_helpers","_Icon","_Primitive","_View","_ScrollViewModule","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","iterator","f","next","done","isArray","_objectWithoutProperties","_objectWithoutPropertiesLoose","s","includes","propertyIsEnumerable","ScrollView","_ref","_ref$behavior","behavior","children","_ref$defaultScrollInd","defaultScrollIndicator","height","horizontal","_ref$scrollEventThrot","scrollEventThrottle","_ref$scrollIndicator","scrollIndicator","scrollTo","_ref$snap","snap","_ref$tag","tag","width","_ref$onScroll","onScroll","others","ref","useRef","_useState","useState","_useState2","setValue","timeout","useEffect","_ref2","el","current","callback","calcValue","observer","MutationObserver","observe","childList","subtree","clientWidth","scrollWidth","clientHeight","scrollHeight","disconnect","_current$scrollTo","_ref3","_ref3$current","undefined","setTimeout","clearTimeout","handleScroll","_ref4","target","_ref5","scrollTop","scrollLeft","x","parseInt","y","offsetX","offsetY","percentX","percentY","percent","React","createElement","Primitive","className","styles","style","scrollview","vertical","notIndicator","Fragment","View","indicator","hide","progress","concat","Icon","headline","level","ICON","RIGHT","DOWN","icon","exports","displayName","propTypes","PropTypes","string","node","isRequired","bool","number","func"],"sources":["../../../src/primitives/ScrollView/ScrollView.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON } from '../Icon';\nimport { Primitive } from '../Primitive';\nimport { View } from '../View';\nimport style from './ScrollView.module.css';\n\nconst ScrollView = ({\n  behavior = 'smooth',\n  children,\n  defaultScrollIndicator = false,\n  height,\n  horizontal,\n  scrollEventThrottle = 16, // * 60fps\n  scrollIndicator = false,\n  scrollTo,\n  snap = true,\n  tag = 'scrollview',\n  width,\n  onScroll = () => {},\n  ...others\n}) => {\n  const ref = useRef();\n\n  const [value, setValue] = useState();\n\n  let timeout = null;\n\n  useEffect(() => {\n    const { current: el } = ref || {};\n    if (!scrollIndicator || !el) return;\n\n    const callback = () => setValue(calcValue(el));\n    const observer = new MutationObserver(callback);\n    observer.observe(el, { childList: true, subtree: true });\n\n    if (horizontal ? el.clientWidth !== el.scrollWidth : el.clientHeight !== el.scrollHeight) {\n      setValue(calcValue(el));\n    }\n\n    return () => observer.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref]);\n\n  useEffect(() => {\n    const { current = {} } = ref || {};\n    if (!current.scrollTo || scrollTo === undefined) return;\n\n    current.scrollTo({ [horizontal ? 'left' : 'top']: scrollTo, behavior });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollTo]);\n\n  useEffect(() => {\n    if (!value) return;\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    timeout = setTimeout(() => onScroll(value), scrollEventThrottle);\n\n    return () => clearTimeout(timeout);\n  }, [value]);\n\n  const handleScroll = ({ target } = {}) => setValue(calcValue(target));\n\n  const calcValue = ({ clientHeight, clientWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft } = {}) => {\n    const x = parseInt(scrollLeft, 10);\n    const y = parseInt(scrollTop, 10);\n    const offsetX = scrollWidth - clientWidth;\n    const offsetY = scrollHeight - clientHeight;\n\n    return (horizontal ? offsetX : offsetY) > 0\n      ? {\n          x,\n          y,\n          percentX: offsetX ? parseInt((x * 100) / offsetX, 10) : 0,\n          percentY: offsetY ? parseInt((y * 100) / offsetY, 10) : 0,\n        }\n      : undefined;\n  };\n\n  const percent =\n    scrollIndicator && !defaultScrollIndicator && value ? (horizontal ? value.percentX : value.percentY) : undefined;\n\n  return React.createElement(\n    Primitive,\n    {\n      ...others,\n      ref,\n      tag,\n      onScroll: handleScroll,\n      className: styles(\n        style.scrollview,\n        snap && style.snap,\n        horizontal ? style.horizontal : style.vertical,\n        (!scrollIndicator || !defaultScrollIndicator) && style.notIndicator,\n        others.className,\n      ),\n      style: { ...others.style, height, width },\n    },\n    <>\n      {children}\n      {percent >= 0 && (\n        <View\n          tag=\"scrollview-indicator\"\n          className={styles(\n            style.indicator,\n            horizontal ? style.horizontal : style.vertical,\n            percent > 95 && style.hide,\n          )}\n        >\n          <View\n            className={style.progress}\n            style={\n              horizontal ? { height: '100%', width: `${percent || 0}%` } : { height: `${percent || 0}%`, width: '100%' }\n            }\n          />\n          <Icon headline level={2} value={horizontal ? ICON.RIGHT : ICON.DOWN} className={style.icon} />\n        </View>\n      )}\n    </>,\n  );\n};\n\nScrollView.displayName = 'Primitive:ScrollView';\n\nScrollView.propTypes = {\n  behavior: PropTypes.string,\n  children: PropTypes.node.isRequired,\n  defaultScrollIndicator: PropTypes.bool,\n  height: PropTypes.number,\n  horizontal: PropTypes.bool,\n  scrollEventThrottle: PropTypes.number,\n  scrollIndicator: PropTypes.bool,\n  scrollTo: PropTypes.number,\n  snap: PropTypes.bool,\n  tag: PropTypes.string,\n  width: PropTypes.number,\n  onScroll: PropTypes.func,\n};\n\nexport { ScrollView };\n"],"mappings":"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","ignoreList":[]}

package/build/primitives/Switch/Switch.module.css

@@ -20,7 +20,7 @@
 .switch .area {
   align-items: center;
   justify-content: center;
-  background-color: var(--mirai-ui-switch-border-color);
+  background-color: var(--mirai-ui-border-color);
   border-radius: var(--mirai-ui-switch-border-radius);
   cursor: pointer;
   display: flex;
@@ -31,16 +31,16 @@
 
 .switch:focus .area,
 .switch:hover .area {
-  box-shadow: var(--mirai-ui-input-focus-shadow);
+  box-shadow: var(--mirai-ui-input-shadow-active);
 }
 
 .switch .area.error {
   background-color: var(--mirai-ui-error);
-  box-shadow: var(--mirai-ui-input-focus-shadow-warning);
+  box-shadow: var(--mirai-ui-input-shadow-active-warning);
 }
 
 .switch .toggle {
-  background-color: var(--mirai-ui-switch-base);
+  background-color: var(--mirai-ui-switch-background);
   border-radius: calc(var(--mirai-ui-switch-border-radius) - var(--mirai-ui-switch-border-size));
   left: var(--mirai-ui-switch-border-size);
   position: absolute;
@@ -49,11 +49,11 @@
 }
 
 .switch input:checked + .area {
-  background-color: var(--mirai-ui-switch-checked);
+  background-color: var(--mirai-ui-switch-background-checked);
 }
 
 .switch input:disabled + .area {
-  background-color: var(--mirai-ui-switch-disabled);
+  background-color: var(--mirai-ui-switch-background-disabled);
   cursor: default;
 }
 
@@ -86,7 +86,7 @@
   }
 
   .switch:hover input:not(:checked):not(:disabled) + .area {
-    background-color: var(--mirai-ui-input-focus-color);
-    box-shadow: var(--mirai-ui-input-focus-shadow-error);
+    background-color: var(--mirai-ui-input-color-active);
+    box-shadow: var(--mirai-ui-input-shadow-active-error);
   }
 }

package/build/theme/default.theme.css

@@ -90,14 +90,14 @@
   --mirai-ui-input-min-height: var(--mirai-ui-space-XL);
 
   /* border */
+  --mirai-ui-border-color: var(--mirai-ui-content-light);
   --mirai-ui-border-radius: var(--mirai-ui-space-XXS);
   --mirai-ui-border-width: 1px;
 
   /* shadow */
-  --mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.1);
   --mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.15);
 
-  /* focus */
+  /* active (:active, :hover, internal states) */
   --mirai-ui-focus-color: var(--mirai-ui-accent-dark);
   --mirai-ui-focus-color-shadow: var(--mirai-ui-accent-border);
   --mirai-ui-focus-width: var(--mirai-ui-space-XXS);
@@ -112,25 +112,24 @@
 /* -------------------------------------------------------------------------- */
 :root {
   /* Checkbox */
-  --mirai-ui-checkbox-base: var(--mirai-ui-base);
+  --mirai-ui-checkbox-background: var(--mirai-ui-base);
+  --mirai-ui-checkbox-background-checked: var(--mirai-ui-accent);
+  --mirai-ui-checkbox-background-disabled: var(--mirai-ui-content-border);
   --mirai-ui-checkbox-border-color: var(--mirai-ui-content-light);
   --mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
-  --mirai-ui-checkbox-checked: var(--mirai-ui-accent);
-  --mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
   --mirai-ui-checkbox-size: calc(var(--mirai-ui-space-M) + var(--mirai-ui-space-XXS));
   --mirai-ui-checkbox-size-mobile: var(--mirai-ui-space-L);
 
-  /* Icon */
-
   /* Input */
   --mirai-ui-input-background: var(--mirai-ui-base);
   --mirai-ui-input-color: var(--mirai-ui-content);
-  --mirai-ui-input-disabled: var(--mirai-ui-content-light);
-  --mirai-ui-input-focus-color: var(--mirai-ui-focus-color);
-  --mirai-ui-input-focus-shadow: var(--mirai-ui-focus-shadow);
-  --mirai-ui-input-focus-shadow-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
-  --mirai-ui-input-focus-shadow-warning: 0 0 0 calc(var(--mirai-ui-focus-width) * 0.66) var(--mirai-ui-error-background);
-  --mirai-ui-input-focus-shadow-success: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-success-border);
+  --mirai-ui-input-color-active: var(--mirai-ui-focus-color);
+  --mirai-ui-input-color-disabled: var(--mirai-ui-content-light);
+  --mirai-ui-input-shadow-active: var(--mirai-ui-focus-shadow);
+  --mirai-ui-input-shadow-active-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
+  --mirai-ui-input-shadow-active-warning: 0 0 0 calc(var(--mirai-ui-focus-width) * 0.66)
+    var(--mirai-ui-error-background);
+  --mirai-ui-input-shadow-active-success: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-success-border);
 
   /* Layer */
   --mirai-ui-layer-content: var(--mirai-ui-layer-XL);
@@ -140,27 +139,19 @@
   --mirai-ui-layer-L: 10;
   --mirai-ui-layer-XL: 100;
 
-  /* Pressable */
-
   /* Radio */
-  --mirai-ui-radio-base: var(--mirai-ui-base);
-  --mirai-ui-radio-border: var(--mirai-ui-content-light);
-  --mirai-ui-radio-checked: var(--mirai-ui-accent);
-  --mirai-ui-radio-disabled: var(--mirai-ui-content-border);
+  --mirai-ui-radio-background: var(--mirai-ui-base);
+  --mirai-ui-radio-background-checked: var(--mirai-ui-accent);
+  --mirai-ui-radio-background-disabled: var(--mirai-ui-content-border);
   --mirai-ui-radio-size: var(--mirai-ui-checkbox-size);
   --mirai-ui-radio-size-mobile: var(--mirai-ui-checkbox-size-mobile);
 
-  /* ScrollView */
-
-  /* Select */
-
   /* Switch */
-  --mirai-ui-switch-base: var(--mirai-ui-base);
-  --mirai-ui-switch-border-color: var(--mirai-ui-content-light);
+  --mirai-ui-switch-background: var(--mirai-ui-base);
+  --mirai-ui-switch-background-checked: var(--mirai-ui-accent);
+  --mirai-ui-switch-background-disabled: var(--mirai-ui-content-border);
   --mirai-ui-switch-border-size: var(--mirai-ui-space-XXS);
   --mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
-  --mirai-ui-switch-checked: var(--mirai-ui-accent);
-  --mirai-ui-switch-disabled: var(--mirai-ui-content-border);
   --mirai-ui-switch-size: var(--mirai-ui-space-M);
   --mirai-ui-switch-size-mobile: calc(var(--mirai-ui-space-L) - var(--mirai-ui-space-XXS));
 
@@ -171,8 +162,6 @@
   --mirai-ui-text-brand-font-medium-weight: var(--mirai-ui-font-medium-weight);
   --mirai-ui-text-brand-font-bold: var(--mirai-ui-font-bold);
   --mirai-ui-text-brand-font-bold-weight: var(--mirai-ui-font-bold-weight);
-
-  /* View */
 }
 
 /* -------------------------------------------------------------------------- */
@@ -186,13 +175,13 @@
 
   /* Button */
   --mirai-ui-button-background: var(--mirai-ui-accent);
+  --mirai-ui-button-background-active: var(--mirai-ui-focus-color);
   --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
   --mirai-ui-button-busy-width: 0%;
   --mirai-ui-button-color: var(--mirai-ui-base);
   --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
-  --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
+  --mirai-ui-button-color-disabled: var(--mirai-ui-content-border);
   --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
-  --mirai-ui-button-focus-color: var(--mirai-ui-focus-color);
   --mirai-ui-button-font-weight: var(--mirai-ui-font-medium-weight);
   --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
   --mirai-ui-button-height: calc(var(--mirai-ui-space-XL) - var(--mirai-ui-space-XXS));
@@ -202,10 +191,10 @@
   --mirai-ui-button-secondary-background: var(--mirai-ui-base);
   --mirai-ui-button-secondary-background-active: var(--mirai-ui-accent-background);
   --mirai-ui-button-secondary-color: var(--mirai-ui-button-background);
-  --mirai-ui-button-secondary-focus-color: var(--mirai-ui-button-focus-color);
-  --mirai-ui-button-secondary-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
+  --mirai-ui-button-secondary-color-active: var(--mirai-ui-focus-color);
   --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
   --mirai-ui-button-transparent-color: var(--mirai-ui-content);
+  --mirai-ui-button-transparent-color-active: var(--mirai-ui-focus-color);
 
   /* Calendar */
   --mirai-ui-calendar-caption-color: var(--mirai-ui-content-light);
@@ -217,41 +206,29 @@
   --mirai-ui-calendar-selected-background: var(--mirai-ui-accent);
   --mirai-ui-calendar-selected-color: var(--mirai-ui-base);
   --mirai-ui-calendar-weekday-color: var(--mirai-ui-content-light);
-  --mirai-ui-calendar-week-margin: 2px;
-
-  /* Form */
-
-  /* InputDate */
-
-  /* InputNumber */
-  --mirai-ui-input-number-value-width: var(--mirai-ui-space-XL);
 
   /* InputOption */
-  --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
-  --mirai-ui-input-option-gap-x: var(--mirai-ui-space-XS);
-  --mirai-ui-input-option-gap-y: var(--mirai-ui-space-M);
-
-  /* InputSelect */
+  --mirai-ui-input-option-gap: var(--mirai-ui-space-XS);
+  --mirai-ui-input-option-margin-bottom: var(--mirai-ui-space-M);
 
   /* InputText */
   --mirai-ui-input-text-border: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
-  --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-input-text-focus: var(--mirai-ui-content);
-  --mirai-ui-input-text-gap: var(--mirai-ui-space-M);
-  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
+  --mirai-ui-input-text-color-active: var(--mirai-ui-content);
+  --mirai-ui-input-text-color-disabled: var(--mirai-ui-content-border);
+  --mirai-ui-input-text-icon-size: var(--mirai-ui-font-size-headline-3);
+  --mirai-ui-input-text-margin-bottom: var(--mirai-ui-space-M);
   --mirai-ui-input-text-padding-x: var(--mirai-ui-space-M);
   --mirai-ui-input-text-padding-y: var(--mirai-ui-space-XS);
   --mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
 
   /* Menu */
-  --mirai-ui-menu-base: var(--mirai-ui-base);
+  --mirai-ui-menu-background: var(--mirai-ui-base);
   --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
   --mirai-ui-menu-min-width: calc(var(--mirai-ui-breakpoint-S) / 2);
+  --mirai-ui-menu-option-background-active: var(--mirai-ui-content-background);
+  --mirai-ui-menu-option-color-active: var(--mirai-ui-content);
+  --mirai-ui-menu-option-color-disabled: var(--mirai-ui-content-border);
   --mirai-ui-menu-shadow: var(--mirai-ui-shadow);
-  --mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-menu-option-hover-background: var(--mirai-ui-content-background);
-  --mirai-ui-menu-option-hover-color: var(--mirai-ui-content);
-  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
 
   /* Modal */
   --mirai-ui-modal-background: var(--mirai-ui-base);
@@ -259,14 +236,14 @@
   --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
   --mirai-ui-modal-icon: var(--mirai-ui-font-size-headline-2);
   --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
-  --mirai-ui-modal-overflow: rgba(72, 72, 72, 0.2);
+  --mirai-ui-modal-overflow-background: rgba(72, 72, 72, 0.2);
   --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
 
   /* Notification */
   --mirai-ui-notification-border-radius: var(--mirai-ui-border-radius);
   --mirai-ui-notification-padding: var(--mirai-ui-space-S);
-  --mirai-ui-notification-padding-large: var(--mirai-ui-space-M);
-  --mirai-ui-notification-padding-small: var(--mirai-ui-space-XS);
+  --mirai-ui-notification-large-padding: var(--mirai-ui-space-M);
+  --mirai-ui-notification-small-padding: var(--mirai-ui-space-XS);
 
   /* Progress */
   --mirai-ui-progress-background: var(--mirai-ui-content-background);
@@ -275,8 +252,8 @@
   --mirai-ui-progress-motion: calc(var(--mirai-ui-motion-expand) * 3);
 
   /* Slider */
-  --mirai-ui-slider-button: var(--mirai-ui-base);
-  --mirai-ui-slider-button-icon: var(--mirai-ui-content);
+  --mirai-ui-slider-button-background: var(--mirai-ui-base);
+  --mirai-ui-slider-icon-color: var(--mirai-ui-content);
   --mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
   --mirai-ui-slider-overlay-color: var(--mirai-ui-base);
   --mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "2.1.22",
+  "version": "2.1.24",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",