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

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

@@ -6,7 +6,7 @@
     flex: auto;
     flex-direction: column;
     min-height: 0;
-    background: var(--hakumi-color-bg-layout);
+    background: var(--color-bg-light);
 
     &,
     * {
@@ -27,9 +27,9 @@
 .hakumi-layout-header {
     height: 64px;
     padding: 0 50px;
-    color: var(--hakumi-color-text);
+    color: var(--color-text);
     line-height: 64px;
-    background: var(--hakumi-color-bg-header);
+    background: var(--color-bg-container);
 }
 
 
@@ -41,17 +41,17 @@
 
 .hakumi-layout-footer {
     padding: 24px 50px;
-    color: var(--hakumi-color-text);
+    color: var(--color-text);
     font-size: 14px;
-    background: var(--hakumi-color-bg-layout);
+    background: var(--color-bg-light);
 }
 
 
 .hakumi-layout-sider {
     position: relative;
     min-width: 0;
-    background: var(--hakumi-color-bg-sider);
-    transition: all 0.2s;
+    background: var(--color-bg-light);
+    transition: all $transition-duration-base;
 
     &-children {
         height: 100%;
@@ -68,15 +68,15 @@
         bottom: 0;
         z-index: 1;
         height: 48px;
-        color: #fff;
+        color: var(--color-text-inverse);
         line-height: 48px;
         text-align: center;
-        background: rgba(0, 0, 0, 0.25);
+        background: var(--color-fill-secondary);
         cursor: pointer;
-        transition: all 0.2s;
+        transition: all $transition-duration-base;
 
         &:hover {
-            background: rgba(0, 0, 0, 0.4);
+            background: var(--color-fill-tertiary);
         }
     }
 
@@ -92,17 +92,17 @@
             z-index: 1;
             width: 36px;
             height: 42px;
-            color: #fff;
+            color: var(--color-text-inverse);
             font-size: 18px;
             line-height: 42px;
             text-align: center;
-            background: var(--hakumi-color-bg-sider);
+            background: var(--color-bg-light);
             border-radius: 0 4px 4px 0;
             cursor: pointer;
-            transition: background 0.3s ease;
+            transition: background $transition-duration-slow ease;
 
             &:hover {
-                background: rgba(0, 0, 0, 0.6);
+                background: var(--color-fill-secondary);
             }
 
             &::after {
@@ -112,7 +112,7 @@
                 bottom: 0;
                 left: 0;
                 background: transparent;
-                transition: all 0.3s;
+                transition: all $transition-duration-slow;
                 content: '';
             }
         }
@@ -120,32 +120,33 @@
 
 
     &-light {
-        background: #fff;
+        background: var(--color-bg-container);
 
         .hakumi-layout-sider-trigger {
-            color: var(--hakumi-color-text);
-            background: #fff;
-            border-top: 1px solid var(--hakumi-color-border);
+            color: var(--color-text);
+            background: var(--color-bg-container);
+            border-top: 1px solid var(--color-border);
         }
 
         .hakumi-layout-sider-zero-width-trigger {
-            color: var(--hakumi-color-text);
-            background: #fff;
-            border: 1px solid var(--hakumi-color-border);
+            color: var(--color-text);
+            background: var(--color-bg-container);
+            border: 1px solid var(--color-border);
         }
     }
 
 
+    // Dark sider theme - uses specific dark navy colors
     &-dark {
         background: #001529;
 
         .hakumi-layout-sider-trigger {
-            color: rgba(255, 255, 255, 0.85);
+            color: var(--color-text-inverse);
             background: #002140;
         }
 
         .hakumi-layout-sider-zero-width-trigger {
-            color: #fff;
+            color: var(--color-text-inverse);
             background: #001529;
         }
     }
@@ -195,4 +196,4 @@
         min-width: 0 !important;
         width: 0 !important;
     }
-}
+}

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

@@ -10,7 +10,7 @@
   line-height: 0;
   list-style: none;
   outline: none;
-  transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
+  transition: width $transition-duration-slow cubic-bezier(0.2, 0, 0, 1);
 
   &-root {
     background: var(--color-bg-container);
@@ -40,14 +40,14 @@
     padding: 0 20px;
     vertical-align: bottom;
     color: var(--color-text);
-    transition: color 0.3s;
+    transition: color $transition-duration-slow;
 
     &::after {
       position: absolute;
       inset-inline: 20px;
       bottom: 0;
       border-bottom: 2px solid transparent;
-      transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: border-color $transition-duration-slow $ease-in-out;
       content: "";
     }
   }
@@ -105,7 +105,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;
       z-index: 1050;
 
 
@@ -159,7 +159,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--color-text);
-    transition: all 0.3s;
+    transition: all $transition-duration-slow;
 
     &:hover:not(.hakumi-menu-item-disabled):not(.hakumi-menu-item-selected) {
       background-color: var(--color-bg-spot);
@@ -276,7 +276,7 @@
       opacity: 0;
       visibility: hidden;
       transform: translateX(-4px);
-      transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
+      transition: opacity $transition-duration-base, transform $transition-duration-base, visibility $transition-duration-base;
       z-index: 1050;
     }
 
@@ -302,7 +302,7 @@
   .hakumi-menu-sub {
     max-height: 0;
     overflow: hidden;
-    transition: max-height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: max-height $transition-duration-slow $ease-in-out;
 
     .hakumi-menu-item-link,
     .hakumi-menu-item-content,
@@ -393,7 +393,7 @@
       overflow-y: auto;
       overflow-x: hidden;
       transform: translateX(-4px);
-      transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
+      transition: opacity $transition-duration-base, transform $transition-duration-base, visibility $transition-duration-base;
       z-index: 1050;
 
 
@@ -447,7 +447,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: all $transition-duration-slow;
 
   &:hover {
     background-color: var(--color-bg-spot);
@@ -488,10 +488,10 @@
 
     &.hakumi-menu-item-selected {
       background-color: var(--color-error);
-      color: #fff;
+      color: var(--color-text-inverse);
 
       .hakumi-menu-item-icon {
-        color: #fff;
+        color: var(--color-text-inverse);
       }
     }
   }
@@ -515,7 +515,7 @@
     margin-inline-end: 10px;
     font-size: 14px;
     color: var(--color-text-secondary);
-    transition: color 0.3s;
+    transition: color $transition-duration-slow;
   }
 }
 
@@ -535,7 +535,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    transition: all 0.3s;
+    transition: all $transition-duration-slow;
 
     &:hover {
       background-color: var(--color-bg-spot);
@@ -553,7 +553,7 @@
     height: 10px;
     color: var(--color-text-secondary);
     transform-style: preserve-3d;
-    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: transform $transition-duration-slow $ease-in-out;
 
     &::before,
     &::after {
@@ -624,7 +624,7 @@
     color: var(--color-text-tertiary);
     font-size: 12px;
     line-height: 1.5;
-    transition: all 0.3s;
+    transition: all $transition-duration-slow;
   }
 
   &-list {

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

@@ -25,7 +25,7 @@
         -webkit-backdrop-filter: blur(2px);
 
 
-        transition: opacity 0.2s, backdrop-filter 0.2s;
+        transition: opacity $transition-duration-base, backdrop-filter $transition-duration-base;
     }
 
     .hakumi-modal-wrap {
@@ -96,7 +96,7 @@
             border: 0;
             outline: 0;
             cursor: pointer;
-            transition: color 0.2s;
+            transition: color $transition-duration-base;
             user-select: none;
 
             &:hover {
@@ -156,30 +156,30 @@
 
 .hakumi-modal-root {
     .hakumi-modal-mask {
-        &.fade-enter {
+        &.hakumi-fade-enter {
             opacity: 0;
             backdrop-filter: blur(0px);
             -webkit-backdrop-filter: blur(0px);
         }
 
-        &.fade-enter-active {
+        &.hakumi-fade-enter-active {
             opacity: 1;
             backdrop-filter: blur(2px);
             -webkit-backdrop-filter: blur(2px);
-            transition: opacity 0.2s, backdrop-filter 0.2s;
+            transition: opacity $transition-duration-base, backdrop-filter $transition-duration-base;
         }
 
-        &.fade-leave {
+        &.hakumi-fade-leave {
             opacity: 1;
             backdrop-filter: blur(2px);
             -webkit-backdrop-filter: blur(2px);
         }
 
-        &.fade-leave-active {
+        &.hakumi-fade-leave-active {
             opacity: 0;
             backdrop-filter: blur(0px);
             -webkit-backdrop-filter: blur(0px);
-            transition: opacity 0.2s, backdrop-filter 0.2s;
+            transition: opacity $transition-duration-base, backdrop-filter $transition-duration-base;
         }
     }
 }
@@ -193,8 +193,8 @@
 .hakumi-zoom-enter-active {
     opacity: 1;
     transform: scale(1);
-    transition: opacity 0.3s cubic-bezier(0.08, 0.82, 0.17, 1),
-        transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
+    transition: opacity $transition-duration-slow $ease-out-circ,
+        transform $transition-duration-slow $ease-out-circ;
 }
 
 .hakumi-zoom-leave {
@@ -205,8 +205,8 @@
 .hakumi-zoom-leave-active {
     opacity: 0;
     transform: scale(0.2);
-    transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
-        transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+    transition: opacity $transition-duration-slow $ease-in-out-circ,
+        transform $transition-duration-slow $ease-in-out-circ;
 }
 
 // Modal Confirm variant
@@ -220,4 +220,4 @@
     p {
         margin: 0;
     }
-}
+}

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

@@ -69,7 +69,7 @@
         border-radius: 8px;
         box-shadow: var(--shadow-base);
         pointer-events: all;
-        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: all $transition-duration-slow $ease-in-out;
 
         &-enter {
             opacity: 0;
@@ -101,7 +101,7 @@
             opacity: 0;
             transform: translateX(100%) !important;
             filter: blur(5px);
-            transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+            transition: all $transition-duration-base $ease-in-out;
 
             .hakumi-notification-topLeft &,
             .hakumi-notification-bottomLeft & {
@@ -172,7 +172,7 @@
             border: none;
             background: transparent;
             cursor: pointer;
-            transition: color 0.2s;
+            transition: color $transition-duration-base;
             font-size: 14px;
             display: flex;
             align-items: center;

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

@@ -17,7 +17,7 @@
     cursor: auto;
     user-select: text;
     opacity: 0;
-    transition: opacity 0.3s, transform 0.3s;
+    transition: opacity $transition-duration-slow, transform $transition-duration-slow;
     pointer-events: none;
     width: max-content;
     min-width: 160px;

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

@@ -42,7 +42,7 @@
     border-radius: var(--border-radius-sm);
     cursor: pointer;
     user-select: none;
-    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+    transition: background-color $transition-duration-base ease, color $transition-duration-base ease, box-shadow $transition-duration-base ease;
 
     &:not(.hakumi-segmented-item-selected):hover {
       background-color: var(--color-control-item-bg-hover);
@@ -134,9 +134,9 @@
   top: 0;
   left: 0;
   border-radius: var(--border-radius-sm);
-  background-color: var(--color-bg-container, #fff);
+  background-color: var(--color-bg-container, var(--color-text-inverse));
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), var(--shadow-xs, none);
-  transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
+  transition: transform $transition-duration-base ease, width $transition-duration-base ease, height $transition-duration-base ease, opacity $transition-duration-base ease;
   pointer-events: none;
   opacity: 0;
   z-index: 0;

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

@@ -25,7 +25,7 @@
         background-color: var(--color-bg-container);
         border: 1px solid var(--color-border);
         border-radius: 6px;
-        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: all $transition-duration-base $ease-in-out;
         width: 100%;
         height: 32px;
         padding: 0 30px 0 11px;
@@ -138,7 +138,7 @@
         margin-top: -6px;
         font-size: 12px;
         pointer-events: none;
-        transition: transform 0.3s;
+        transition: transform $transition-duration-slow;
 
         .hakumi-select-open & {
             transform: rotate(180deg);
@@ -165,7 +165,7 @@
         background: var(--color-bg-container);
         cursor: pointer;
         opacity: 0;
-        transition: color 0.3s ease, opacity 0.15s ease;
+        transition: color $transition-duration-slow ease, opacity 0.15s ease;
         text-rendering: optimizeLegibility;
 
         &:hover {
@@ -206,7 +206,7 @@
         scrollbar-width: thin;
         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);
         z-index: 1050;
         margin-top: 4px;
 
@@ -238,7 +238,7 @@
         font-size: 14px;
         line-height: 22px;
         cursor: pointer;
-        transition: background 0.3s ease;
+        transition: background $transition-duration-slow ease;
         border-radius: 4px;
 
         &-option-content {
@@ -401,7 +401,7 @@
             .hakumi-select-dropdown {
                 opacity: 0;
                 visibility: hidden;
-                transition: opacity 0.2s, visibility 0.2s;
+                transition: opacity $transition-duration-base, visibility $transition-duration-base;
                 display: block !important;
             }
             

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

@@ -59,7 +59,7 @@
     left: 50%;
     transform: translateX(-50%);
     background-color: var(--color-bg-spotlight);
-    color: #fff;
+    color: var(--color-text-inverse);
     font-size: $font-size-sm;
     line-height: 1;
     padding: 6px 8px;

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

@@ -102,12 +102,12 @@
   z-index: 1;
   background-color: color-mix(in srgb, var(--color-bg-container) 72%, transparent);
   border-radius: var(--border-radius-base);
-  transition: opacity 0.2s ease;
+  transition: opacity $transition-duration-base ease;
 }
 
 .hakumi-spin-nested-loading .hakumi-spin-container {
   position: relative;
-  transition: opacity 0.2s ease;
+  transition: opacity $transition-duration-base ease;
 }
 
 .hakumi-spin-nested-loading:not(.hakumi-spin-spinning) .hakumi-spin-overlay {

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

@@ -50,7 +50,7 @@
       width: 9999px;
       height: 1px;
       background: var(--color-border);
-      transition: background 0.3s;
+      transition: background $transition-duration-slow;
       content: "";
     }
 
@@ -120,7 +120,7 @@
       inset-inline-start: 15px;
       width: 1px;
       background: var(--color-border);
-      transition: background 0.3s;
+      transition: background $transition-duration-slow;
     }
 
     .hakumi-steps-item:last-child .hakumi-steps-item-container::after {
@@ -301,7 +301,7 @@
       height: 1px;
       background: var(--color-border);
       border-radius: 1px;
-      transition: background 0.3s;
+      transition: background $transition-duration-slow;
       content: "";
     }
   }
@@ -321,7 +321,7 @@
     border: 1px solid var(--color-border);
     border-radius: 50%;
     background: var(--color-bg-container);
-    transition: background-color 0.3s, border-color 0.3s;
+    transition: background-color $transition-duration-slow, border-color $transition-duration-slow;
     margin-inline-end: 8px;
 
     .hakumi-steps-icon {
@@ -575,7 +575,7 @@
     stroke: var(--color-primary);
     stroke-width: 4;
     stroke-linecap: round;
-    transition: stroke-dasharray 0.3s;
+    transition: stroke-dasharray $transition-duration-slow;
   }
 }
 
@@ -629,7 +629,7 @@
       height: 8px;
       background: var(--color-border);
       border-radius: 100px;
-      transition: all 0.3s;
+      transition: all $transition-duration-slow;
     }
   }
 
@@ -675,7 +675,7 @@
       inset-inline-start: 4px;
       width: 1px;
       background: var(--color-border);
-      transition: background 0.3s;
+      transition: background $transition-duration-slow;
     }
 
     .hakumi-steps-item:last-child .hakumi-steps-item-container::after {
@@ -736,7 +736,7 @@
       width: 0;
       height: 2px;
       background-color: var(--color-primary);
-      transition: width 0.3s, inset-inline-start 0.3s;
+      transition: width $transition-duration-slow, inset-inline-start $transition-duration-slow;
       content: "";
     }
 
@@ -772,7 +772,7 @@
     height: 100%;
     padding-bottom: 12px;
     text-align: start;
-    transition: opacity 0.3s;
+    transition: opacity $transition-duration-slow;
   }
 
   .hakumi-steps-item-icon {
@@ -909,7 +909,7 @@
     background-color: transparent;
     border-radius: var(--border-radius-sm);
     cursor: pointer;
-    transition: background-color 0.2s;
+    transition: background-color $transition-duration-base;
   }
 
   .hakumi-steps-item:hover .hakumi-steps-item-container {

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

@@ -1,4 +1,5 @@
 // Hakumi Switch Component
+@use '../variables' as *;
 
 .hakumi-switch {
     position: relative;
@@ -8,7 +9,7 @@
     background-color: var(--color-border);
     border-radius: 999px;
     cursor: pointer;
-    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: background-color $transition-duration-base cubic-bezier(0.4, 0, 0.2, 1);
     vertical-align: middle;
     line-height: 22px;
     overflow: hidden;
@@ -19,7 +20,7 @@
 
     &.hakumi-switch-disabled {
         cursor: not-allowed;
-        background-color: rgba(0, 0, 0, 0.25);
+        background-color: var(--color-disabled);
     }
 
     &.hakumi-switch-loading {
@@ -51,7 +52,7 @@
     border-radius: 50%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
     transform: translateX(0);
-    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform $transition-duration-base cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .hakumi-switch-loading-icon {
@@ -84,8 +85,8 @@
     grid-column: 1;
     grid-row: 1;
     white-space: nowrap;
-    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: opacity $transition-duration-base cubic-bezier(0.4, 0, 0.2, 1),
+                transform $transition-duration-base cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .hakumi-switch-inner-checked {
@@ -112,7 +113,7 @@
     }
 
     .hakumi-switch-inner {
-        color: #fff;
+        color: var(--color-text-inverse);
     }
 
     .hakumi-switch-inner-checked {
@@ -135,18 +136,18 @@
 .hakumi-switch-disabled {
     .hakumi-switch-handle {
         box-shadow: none;
-        background-color: rgba(255, 255, 255, 0.8);
+        background-color: var(--color-bg-container);
     }
 
     .hakumi-switch-inner {
-        color: rgba(0, 0, 0, 0.4);
+        color: var(--color-text-tertiary);
     }
 
     &.hakumi-switch-checked {
-        background-color: rgba(24, 144, 255, 0.4);
+        opacity: 0.4;
 
         .hakumi-switch-inner {
-            color: rgba(255, 255, 255, 0.6);
+            color: var(--color-text-inverse);
         }
     }
 }