@hakumi-dev/hakumi-components 0.1.18-pre → 0.1.19-pre

package/app/javascript/stylesheets/components/_color_picker.scss

@@ -25,7 +25,7 @@
         align-items: center;
         gap: 8px;
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition: all $transition-duration-base ease;
         outline: none;
         user-select: none;
 
@@ -43,7 +43,7 @@
         border: 1px solid var(--hakumi-color-picker-border);
         background-color: #1677ff;
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition: all $transition-duration-base ease;
         overflow: hidden;
 
         background-image:
@@ -116,7 +116,7 @@
         box-shadow: var(--hakumi-color-picker-shadow);
         border: 1px solid var(--hakumi-color-picker-border);
         z-index: 1050;
-        transition: opacity 0.2s ease;
+        transition: opacity $transition-duration-base ease;
 
         &-hidden {
             display: none;
@@ -136,7 +136,7 @@
         cursor: crosshair;
         user-select: none;
 
-        background-image: linear-gradient(to right, #fff, transparent);
+        background-image: linear-gradient(to right, var(--color-text-inverse), transparent);
 
         &::after {
             content: '';
@@ -163,7 +163,7 @@
         position: absolute;
         width: 16px;
         height: 16px;
-        border: 2px solid #fff;
+        border: 2px solid var(--color-text-inverse);
         border-radius: 50%;
         box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
         transform: translate(-50%, -50%);
@@ -199,7 +199,7 @@
     &-slider-alpha {
         background:
             linear-gradient(to right, transparent, #1677ff),
-            conic-gradient(#d3d3d3 0.25turn, #fff 0turn 0.5turn, #d3d3d3 0turn 0.75turn, #fff 0turn 1turn);
+            conic-gradient(#d3d3d3 0.25turn, var(--color-text-inverse) 0turn 0.5turn, #d3d3d3 0turn 0.75turn, var(--color-text-inverse) 0turn 1turn);
         background-size: 100%, 8px 8px;
         border: 1px solid var(--hakumi-color-picker-border);
     }
@@ -210,9 +210,9 @@
         left: 0;
         width: 16px;
         height: 16px;
-        border: 2px solid #fff;
+        border: 2px solid var(--color-text-inverse);
         border-radius: 50%;
-        background: #fff;
+        background: var(--color-text-inverse);
         box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
         transform: translate(-50%, -50%);
         cursor: grab;
@@ -246,7 +246,7 @@
         background: var(--hakumi-color-picker-bg);
         color: var(--hakumi-color-picker-text);
         font-size: 12px;
-        transition: all 0.2s ease;
+        transition: all $transition-duration-base ease;
 
         &:focus {
             outline: none;
@@ -271,7 +271,7 @@
         color: var(--hakumi-color-picker-text);
         font-size: 12px;
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition: all $transition-duration-base ease;
 
         &:focus {
             outline: none;
@@ -314,7 +314,7 @@
         border-radius: 4px;
         cursor: pointer;
         border: 1px solid var(--hakumi-color-picker-border);
-        transition: all 0.2s ease;
+        transition: all $transition-duration-base ease;
         position: relative;
 
         background-image:

package/app/javascript/stylesheets/components/_date_picker.scss

@@ -75,7 +75,7 @@
         border: none;
         cursor: pointer;
         opacity: 0;
-        transition: color 0.2s ease, opacity 0.2s ease;
+        transition: color $transition-duration-base ease, opacity $transition-duration-base ease;
 
         &:hover {
             color: var(--color-text-secondary);
@@ -94,7 +94,7 @@
         margin-top: 4px;
         background-color: var(--color-bg-elevated);
         border-radius: 8px;
-        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+        box-shadow: var(--shadow-lg);
     }
 
     &-panel {
@@ -205,7 +205,7 @@
             cursor: pointer;
             font-size: 13px;
             line-height: 1.5;
-            transition: background 0.2s ease;
+            transition: background $transition-duration-base ease;
 
             &:hover:not(.hakumi-time-picker-cell-selected) {
                 background: var(--color-fill-tertiary);
@@ -243,7 +243,7 @@
         padding: 4px 12px;
         cursor: pointer;
         border-radius: 4px;
-        transition: background 0.2s ease;
+        transition: background $transition-duration-base ease;
         font-weight: 500;
 
         &:hover {

package/app/javascript/stylesheets/components/_descriptions.scss

@@ -85,8 +85,8 @@
         font-size: var(--font-size-sm);
     }
 
-    &-middle &-item-label,
-    &-middle &-item-content {
+    &-default &-item-label,
+    &-default &-item-content {
         padding: var(--spacing-sm) var(--spacing-md);
     }
 

package/app/javascript/stylesheets/components/_drawer.scss

@@ -12,14 +12,14 @@
     inset: 0;
     background-color: rgba(0, 0, 0, 0.45);
     opacity: 0;
-    transition: opacity 0.2s ease;
+    transition: opacity $transition-duration-base ease;
     pointer-events: auto;
   }
 
   &-content-wrapper {
     position: fixed;
     background: transparent;
-    transition: transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
+    transition: transform $transition-duration-slow $ease-out-circ;
     pointer-events: auto;
     display: flex;
   }
@@ -71,7 +71,7 @@
     cursor: pointer;
     padding: 0;
     color: var(--color-text-secondary);
-    transition: color 0.2s ease;
+    transition: color $transition-duration-base ease;
 
     &:hover {
       color: var(--color-text-heading);

package/app/javascript/stylesheets/components/_dropdown.scss

@@ -28,7 +28,7 @@
   opacity: 0;
   visibility: hidden;
   transform: translateY(-4px);
-  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
+  transition: opacity $transition-duration-base, transform $transition-duration-base, visibility $transition-duration-base;
   max-height: min(400px, calc(100vh - 16px));
   overflow-y: auto;
 
@@ -103,7 +103,7 @@
   padding: 0;
   margin: 0;
   border-radius: var(--border-radius-sm);
-  transition: background-color 0.2s;
+  transition: background-color $transition-duration-base;
 
   &:hover:not(.hakumi-dropdown-menu-item-disabled) {
     background-color: var(--color-bg-spot);

package/app/javascript/stylesheets/components/_flex.scss

@@ -60,7 +60,7 @@
         gap: var(--spacing-xs);
     }
 
-    &-gap-middle {
+    &-gap-default {
         gap: var(--spacing-md);
     }
 

package/app/javascript/stylesheets/components/_float_button.scss

@@ -25,7 +25,7 @@
     background: var(--color-bg-container);
     color: var(--color-text);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition: transform $transition-duration-base ease, box-shadow $transition-duration-base ease;
 
     &:hover {
       transform: translateY(-2px);
@@ -140,9 +140,9 @@
 .hakumi-float-button-back-top {
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease;
+  transition: opacity $transition-duration-base ease;
 
-  &.is-visible {
+  &.hakumi-float-button-back-top-visible {
     opacity: 1;
     pointer-events: auto;
   }
@@ -196,11 +196,11 @@
     pointer-events: none;
     visibility: hidden;
     transform: translateY(10px);
-    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, max-height 0.2s ease;
+    transition: opacity $transition-duration-base ease, transform $transition-duration-base ease, visibility $transition-duration-base ease, max-height $transition-duration-base ease;
     max-height: 0;
     padding: 0;
 
-    &.open {
+    &.hakumi-float-button-group-actions-open {
       display: flex;
       opacity: 1;
       pointer-events: auto;

package/app/javascript/stylesheets/components/_form_item.scss

@@ -0,0 +1,92 @@
+// Hakumi Form Item Component
+@use '../variables' as *;
+
+.hakumi-form-item {
+    margin-bottom: 24px;
+    vertical-align: top;
+
+
+    &-label {
+        display: inline-block;
+        flex-grow: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: start;
+        vertical-align: middle;
+        margin-bottom: 8px;
+        color: var(--color-text);
+        font-size: var(--font-size-base);
+        line-height: 1.5715;
+
+        >label {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            max-width: 100%;
+            height: 32px;
+            color: var(--color-text);
+            font-size: var(--font-size-base);
+
+            &::after {
+                content: ':';
+                position: relative;
+                top: -0.5px;
+                margin: 0 8px 0 2px;
+            }
+        }
+    }
+
+
+    &-required-mark {
+        display: inline-block;
+        margin-right: 4px;
+        color: var(--color-error);
+        font-size: var(--font-size-base);
+        line-height: 1;
+        content: '*';
+    }
+
+
+    &-control {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+
+        &-input {
+            position: relative;
+            display: flex;
+            align-items: center;
+            min-height: 32px;
+
+            &-content {
+                flex: auto;
+                max-width: 100%;
+            }
+        }
+    }
+
+
+    &-explain {
+        clear: both;
+        color: var(--color-text-secondary);
+        font-size: var(--font-size-sm);
+        line-height: 1.5715;
+        margin-top: 4px;
+
+        &-error {
+            color: var(--color-error);
+        }
+    }
+
+
+    &-extra {
+        clear: both;
+        min-height: 24px;
+        color: var(--color-text-secondary);
+        font-size: var(--font-size-sm);
+        line-height: 1.5715;
+        transition: color $transition-duration-base $ease-in-out;
+    }
+
+
+}

package/app/javascript/stylesheets/components/_image.scss

@@ -17,7 +17,7 @@
     &-placeholder {
         .hakumi-image-img {
             filter: blur(10px);
-            transition: filter 0.3s ease;
+            transition: filter $transition-duration-slow ease;
         }
 
         &.hakumi-image-loaded .hakumi-image-img {
@@ -35,7 +35,7 @@
         align-items: center;
         justify-content: center;
         background-color: var(--color-bg-spot);
-        transition: opacity 0.3s ease;
+        transition: opacity $transition-duration-slow ease;
 
         &-content {
             color: var(--color-text-tertiary);
@@ -82,11 +82,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #fff;
+        color: var(--color-text-inverse);
         background-color: rgba(0, 0, 0, 0.5);
         cursor: pointer;
         opacity: 0;
-        transition: opacity 0.3s ease;
+        transition: opacity $transition-duration-slow ease;
 
         &-info {
             display: flex;
@@ -127,7 +127,7 @@
     z-index: 1080;
     pointer-events: none;
     opacity: 0;
-    transition: opacity 0.3s ease;
+    transition: opacity $transition-duration-slow ease;
 
     &.hakumi-image-preview-active {
         opacity: 1;
@@ -175,7 +175,7 @@
     justify-content: center;
     max-width: 100%;
     max-height: 100%;
-    transition: transform 0.3s ease;
+    transition: transform $transition-duration-slow ease;
 }
 
 .hakumi-image-preview-img {
@@ -184,7 +184,7 @@
     object-fit: contain;
     cursor: grab;
     user-select: none;
-    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition: transform $transition-duration-slow $ease-out;
 
     &.hakumi-image-preview-img-dragging {
         cursor: grabbing;
@@ -208,10 +208,10 @@
     border: none;
     border-radius: 50%;
     cursor: pointer;
-    transition: background-color 0.2s, color 0.2s;
+    transition: background-color $transition-duration-base, color $transition-duration-base;
 
     &:hover {
-        color: #fff;
+        color: var(--color-text-inverse);
         background-color: rgba(255, 255, 255, 0.1);
     }
 
@@ -237,10 +237,10 @@
     border: none;
     border-radius: 50%;
     cursor: pointer;
-    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
+    transition: background-color $transition-duration-base, color $transition-duration-base, opacity $transition-duration-base;
 
     &:hover {
-        color: #fff;
+        color: var(--color-text-inverse);
         background-color: rgba(0, 0, 0, 0.2);
     }
 
@@ -290,10 +290,10 @@
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: background-color 0.2s, color 0.2s, opacity 0.2s;
+        transition: background-color $transition-duration-base, color $transition-duration-base, opacity $transition-duration-base;
 
         &:hover:not(:disabled) {
-            color: #fff;
+            color: var(--color-text-inverse);
             background-color: rgba(255, 255, 255, 0.1);
         }
 
@@ -340,11 +340,11 @@
 
 .hakumi-image-preview-img {
     &.hakumi-image-preview-img-zoom-in {
-        animation: imageZoomIn 0.3s ease forwards;
+        animation: imageZoomIn $transition-duration-slow ease forwards;
     }
 
     &.hakumi-image-preview-img-zoom-out {
-        animation: imageZoomOut 0.3s ease forwards;
+        animation: imageZoomOut $transition-duration-slow ease forwards;
     }
 }
 

package/app/javascript/stylesheets/components/_input.scss

@@ -4,118 +4,6 @@
 
 
 
-.hakumi-form-item {
-    margin-bottom: 24px;
-    vertical-align: top;
-
-
-    &-label {
-        display: inline-block;
-        flex-grow: 0;
-        overflow: hidden;
-        white-space: nowrap;
-        text-align: start;
-        vertical-align: middle;
-        margin-bottom: 8px;
-        color: var(--color-text);
-        font-size: var(--font-size-base);
-        line-height: 1.5715;
-
-        >label {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-            max-width: 100%;
-            height: 32px;
-            color: var(--color-text);
-            font-size: var(--font-size-base);
-
-            &::after {
-                content: ':';
-                position: relative;
-                top: -0.5px;
-                margin: 0 8px 0 2px;
-            }
-        }
-    }
-
-
-    &-required-mark {
-        display: inline-block;
-        margin-right: 4px;
-        color: var(--color-error);
-        font-size: var(--font-size-base);
-        line-height: 1;
-        content: '*';
-    }
-
-
-    &-control {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-
-        &-input {
-            position: relative;
-            display: flex;
-            align-items: center;
-            min-height: 32px;
-
-            &-content {
-                flex: auto;
-                max-width: 100%;
-            }
-        }
-    }
-
-
-    &-explain {
-        clear: both;
-        color: var(--color-text-secondary);
-        font-size: var(--font-size-sm);
-        line-height: 1.5715;
-        margin-top: 4px;
-
-        &-error {
-            color: var(--color-error);
-        }
-    }
-
-
-    &-extra {
-        clear: both;
-        min-height: 24px;
-        color: var(--color-text-secondary);
-        font-size: var(--font-size-sm);
-        line-height: 1.5715;
-        transition: color $transition-duration-base $ease-in-out;
-    }
-
-
-    &-has-error {
-
-        .hakumi-input,
-        .hakumi-input-affix-wrapper,
-        .hakumi-input:hover,
-        .hakumi-input-affix-wrapper:hover {
-            background-color: var(--color-component-bg);
-            border-color: var(--color-error);
-        }
-
-        .hakumi-input:focus,
-        .hakumi-input-affix-wrapper:focus,
-        .hakumi-input-focused,
-        .hakumi-input-affix-wrapper-focused {
-            border-color: var(--color-error-hover);
-            box-shadow: 0 0 0 2px var(--color-error-outline);
-            outline: 0;
-        }
-    }
-}
-
-
-
-
 .hakumi-input {
     box-sizing: border-box;
     margin: 0;
@@ -256,6 +144,28 @@
 
 
 
+.hakumi-form-item-has-error {
+    .hakumi-input,
+    .hakumi-input-affix-wrapper,
+    .hakumi-input:hover,
+    .hakumi-input-affix-wrapper:hover {
+        background-color: var(--color-component-bg);
+        border-color: var(--color-error);
+    }
+
+    .hakumi-input:focus,
+    .hakumi-input-affix-wrapper:focus,
+    .hakumi-input-focused,
+    .hakumi-input-affix-wrapper-focused {
+        border-color: var(--color-error-hover);
+        box-shadow: 0 0 0 2px var(--color-error-outline);
+        outline: 0;
+    }
+}
+
+
+
+
 .hakumi-input-prefix,
 .hakumi-input-suffix {
     display: flex;
@@ -404,4 +314,4 @@ html[data-theme='dark'] {
             color: rgba(255, 255, 255, 0.85);
         }
     }
-}
+}