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

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

@@ -220,7 +220,7 @@
     align-items: center;
     justify-content: center;
 
-    &.is-expanded .hakumi-table-expand-icon {
+    &.hakumi-table-expand-button-expanded .hakumi-table-expand-icon {
       transform: rotate(45deg);
     }
   }
@@ -232,7 +232,7 @@
     border-right: 2px solid var(--table-muted-color);
     border-bottom: 2px solid var(--table-muted-color);
     transform: rotate(-45deg);
-    transition: transform 0.2s ease;
+    transition: transform $transition-duration-base ease;
   }
 
   &-expanded-row {
@@ -243,7 +243,7 @@
       vertical-align: top;
     }
 
-    &:not(.is-expanded) td {
+    &:not(.hakumi-table-row-expanded) td {
       padding: 0 !important;
     }
   }
@@ -307,7 +307,7 @@
     }
   }
 
-  &-size-middle {
+  &-size-default {
     .hakumi-table-thead th,
     .hakumi-table-tbody td,
     .hakumi-table-summary td {
@@ -346,7 +346,7 @@
     background: var(--table-row-bg);
     color: var(--table-text-color);
     font-size: inherit;
-    transition: border-color 0.2s, box-shadow 0.2s;
+    transition: border-color $transition-duration-base, box-shadow $transition-duration-base;
 
     &:focus {
       border-color: var(--color-primary, #1677ff);
@@ -373,7 +373,7 @@
   color: var(--table-muted-color);
   padding: 4px;
   border-radius: 4px;
-  transition: color 0.2s, background-color 0.2s;
+  transition: color $transition-duration-base, background-color $transition-duration-base;
 
   &:hover {
     color: var(--table-text-color);

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

@@ -82,12 +82,12 @@
     &-checked {
       background: var(--color-primary);
       border-color: var(--color-primary);
-      color: #fff;
+      color: var(--color-text-inverse);
 
       &:hover {
         background: var(--color-primary-hover);
         border-color: var(--color-primary-hover);
-        color: #fff;
+        color: var(--color-text-inverse);
       }
     }
   }

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

@@ -17,9 +17,9 @@
   max-width: 250px;
   visibility: hidden;
   opacity: 0;
-  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
-              visibility 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
-              transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: opacity $transition-duration-base $ease-in-out,
+              visibility $transition-duration-base $ease-in-out,
+              transform $transition-duration-base $ease-in-out;
   pointer-events: none;
 
   &-visible {
@@ -49,7 +49,7 @@
     min-width: 32px;
     min-height: 32px;
     padding: 6px 8px;
-    color: #fff;
+    color: var(--color-text-inverse);
     text-align: start;
     text-decoration: none;
     word-wrap: break-word;

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

@@ -31,7 +31,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;
@@ -96,7 +96,7 @@
     margin-top: -6px;
     font-size: 12px;
     pointer-events: none;
-    transition: transform 0.3s;
+    transition: transform $transition-duration-slow;
 
     .hakumi-tree-select-open & {
       transform: rotate(180deg);
@@ -121,7 +121,7 @@
     background: var(--hakumi-tree-select-clear-bg);
     cursor: pointer;
     opacity: 0;
-    transition: color 0.3s ease, opacity 0.15s ease;
+    transition: color $transition-duration-slow ease, opacity 0.15s ease;
 
     &:hover {
       color: var(--color-text-tertiary);

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

@@ -26,7 +26,7 @@
         color: var(--color-link);
         cursor: pointer;
         text-decoration: none;
-        transition: color 0.2s;
+        transition: color $transition-duration-base;
 
         &:hover {
             color: var(--color-link-hover);
@@ -69,7 +69,7 @@
         margin-left: 4px;
         color: var(--color-link);
         cursor: pointer;
-        transition: color 0.2s;
+        transition: color $transition-duration-base;
 
         &:hover {
             color: var(--color-link-hover);
@@ -136,7 +136,7 @@ h5.hakumi-typography,
     pointer-events: none;
     z-index: 1070;
     opacity: 0;
-    transition: opacity 0.2s ease;
+    transition: opacity $transition-duration-base ease;
     box-shadow: var(--shadow-base);
 
     &.hakumi-typography-tooltip-success {

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

@@ -308,7 +308,7 @@
           background: rgba(255, 255, 255, 0.2);
           border: none;
           border-radius: 50%;
-          color: #fff;
+          color: var(--color-text-inverse);
           cursor: pointer;
           font-size: 16px;
           transition: background-color $transition-duration-base $ease-in-out, transform $transition-duration-base $ease-in-out;
@@ -405,7 +405,7 @@
     background: rgba(255, 255, 255, 0.1);
     border: none;
     border-radius: 50%;
-    color: #fff;
+    color: var(--color-text-inverse);
     cursor: pointer;
     font-size: 18px;
     transition: background-color $transition-duration-base $ease-in-out;
@@ -431,7 +431,7 @@
     background: rgba(255, 255, 255, 0.1);
     border: none;
     border-radius: 50%;
-    color: #fff;
+    color: var(--color-text-inverse);
     cursor: pointer;
     font-size: 24px;
     transition: background-color $transition-duration-base $ease-in-out;
@@ -491,7 +491,7 @@
       background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
-      color: #fff;
+      color: var(--color-text-inverse);
       font-size: 12px;
       font-weight: 500;
       opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hakumi-dev/hakumi-components",
-  "version": "0.1.18-pre",
+  "version": "0.1.19-pre",
   "type": "module",
   "description": "Hakumi Components for Rails and modern JavaScript frameworks",
   "keywords": [
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@hotwired/stimulus": "^3.0.0",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.25.0",
     "jsdom": "^27.4.0",
     "sass": "^1.77.0"
   },