@mirai/ui 2.1.22 → 2.1.23

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/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.23",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",