@tremolo-ui/react 0.1.6 → 0.2.1

package/dist/index.css

@@ -1,415 +1,437 @@
-:root {
-  --tremolo-theme-color: oklch(59.5% 0.17548 266.373);
+.tremolo-user-select-none {
+  user-select: none;
 }
 
-.tremolo-no-select {
-  user-select: none;
+.tremolo-cursor-pointer {
+  cursor: pointer;
+}
+
+.tremolo-cursor-move {
+  cursor: move;
+}
+
+.tremolo-cursor-grabbing {
+  cursor: grabbing;
 }
 
+.tremolo-cursor-none {
+  cursor: none;
+}
 .tremolo-knob {
+  cursor: grab;
+  outline: 0;
   display: inline-block;
-  cursor: pointer;
   overflow: visible;
-  outline: 0;
 
-  &[aria-readonly='true'] {
+  &[aria-readonly="true"] {
     cursor: not-allowed;
   }
+
+  &[data-dragging="true"] {
+    cursor: inherit;
+  }
 }
 
 .tremolo-knob-active-line {
+  color: oklch(69.2% .17548 266.373);
   overflow: visible;
-  color: oklch(69.2% 0.17548 266.373);
 
   :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: var(--tremolo-theme-color);
+    color: oklch(59.5% .17548 266.373);
   }
 
-  :where(.tremolo-knob[aria-disabled='true']) & {
-    color: oklch(50.5% 0.03307 270.021);
+  :where(.tremolo-knob[aria-disabled="true"]) & {
+    color: oklch(50.5% .03307 270.021);
   }
 }
 
-:where(.dark, [data-theme='dark']) {
-  .tremolo-knob-active-line {
-    color: var(--tremolo-theme-color);
+.tremolo-knob-inactive-line {
+  color: oklch(95% 0 0);
 
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(65.2% 0.17548 266.373);
-    }
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(90% 0 0);
   }
 }
 
-.tremolo-knob-inactive-line {
-  color: oklch(95% 0 0);
+.tremolo-knob-thumb {
+  color: oklch(85.7% 0 0);
 
   :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(90% 0 0);
+    color: oklch(84.5% 0 0);
   }
 }
 
-:where(.dark, [data-theme='dark']) {
-  .tremolo-knob-inactive-line {
-    color: oklch(41.7% 0 0);
+.tremolo-knob-thumb-line {
+  color: oklch(94.2% 0 0);
+}
+
+:where(.dark, [data-theme="dark"]) {
+  & .tremolo-knob-active-line {
+    color: oklch(59.5% .17548 266.373);
 
     :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(44.59% 0 0);
+      color: oklch(65.2% .17548 266.373);
     }
   }
-}
 
-.tremolo-knob-thumb {
-  color: oklch(85.7% 0 0);
+  & .tremolo-knob-inactive-line {
+    color: oklch(41.7% 0 0);
 
-  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(84.5% 0 0);
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(44.59% 0 0);
+    }
   }
-}
 
-:where(.dark, [data-theme='dark']) {
-  .tremolo-knob-thumb {
+  & .tremolo-knob-thumb {
     color: oklch(48.6% 0 0);
 
     :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
       color: oklch(51.7% 0 0);
     }
   }
-}
-
-.tremolo-knob-thumb-line {
-  color: oklch(94.2% 0 0);
-}
 
-:where(.dark, [data-theme='dark']) {
-  .tremolo-knob-thumb-line {
+  & .tremolo-knob-thumb-line {
     color: oklch(84.2% 0 0);
   }
 }
-
 .tremolo-number-input-wrapper {
   --border-radius: 4px;
   --stepper-width: 20px;
-  --active-color: var(--tremolo-theme-color);
-
-  display: inline-flex;
+  --active-color: oklch(59.5% .17548 266.373);
+  --border-color: oklch(81% 0 0);
+  border-style: solid;
+  border-color: var(--border-color);
+  border-width: 0;
+  outline: none;
   flex-direction: row;
-  position: relative;
   width: 140px;
   height: min-content;
-  border-style: solid;
-  border-color: #c1c1c1;
-  border-width: 0px;
-  outline: none;
-  transition: all 0.1s;
+  transition: all .1s;
+  display: inline-flex;
+  position: relative;
 
-  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
-    border-color: #f34343;
+  &:not(:focus-within):has( > .tremolo-number-input[data-error="true"]) {
+    border-color: oklch(64.245% .21266 25.499);
   }
 
-  &[data-variant='outline'] {
-    border-width: 1px;
+  &[data-variant="outline"] {
     border-radius: var(--border-radius);
+    border-width: 1px;
 
     &:hover {
-      border-color: #909090;
+      --border-color: oklch(65.335% 0 0);
     }
 
     &:focus-within {
-      border-color: var(--active-color);
+      --border-color: var(--active-color);
       box-shadow: 0px 0px 0px 2px
         color-mix(in srgb, var(--active-color) 10%, transparent);
     }
   }
 
-  &[data-variant='filled'] {
-    border-width: 1px;
+  &[data-variant="filled"] {
+    --bg: oklch(95.88% 0 0);
     border-radius: var(--border-radius);
-    border-color: transparent;
-    background-color: #edf2f7;
+    background-color: var(--bg);
+    border-width: 1px;
+    border-color: #0000;
 
     &:hover {
-      background-color: #e4e9ee;
+      --bg: oklch(93.166% 0 0);
     }
 
     &:focus-within {
       background-color: inherit;
-      border-color: var(--active-color);
+      --border-color: var(--active-color);
       box-shadow: 0px 0px 0px 2px
         color-mix(in srgb, var(--active-color) 10%, transparent);
     }
   }
 
-  &[data-variant='flushed'] {
+  &[data-variant="flushed"] {
     border-bottom-width: 1px;
 
     &:hover {
-      border-color: #909090;
+      --border-color: oklch(65.335% 0 0);
     }
 
     &:focus-within {
-      border-color: var(--active-color);
+      --border-color: var(--active-color);
       box-shadow: 0px 2px 0px 0px
         color-mix(in srgb, var(--active-color) 10%, transparent);
     }
   }
 
-  &[data-stepper='false'] {
+  &[data-stepper="false"] {
     --stepper-width: 0px;
   }
 }
 
 .tremolo-number-input {
-  display: block;
   color: inherit;
   width: calc(100% - 20px - var(--stepper-width));
   background-color: inherit;
   font: inherit;
-  padding: 6px 10px;
-
-  margin: 0;
+  appearance: none;
   border: none;
   outline: none;
-  appearance: none;
+  margin: 0;
+  padding: 6px 10px;
+  display: block;
 
-  &[aria-readonly='true'] {
+  &[aria-readonly="true"] {
     cursor: not-allowed;
   }
 }
 
 .tremolo-number-input-stepper {
-  display: flex;
-  flex-direction: column;
   height: 100%;
+  width: var(--stepper-width);
+  flex-direction: column;
+  transition: all .1s linear;
+  display: flex;
   position: absolute;
   top: 0;
   right: 0;
-  width: var(--stepper-width);
-  transition: all 0.1s linear;
 
-  &[data-dynamic='true'] {
+  &[data-dynamic="true"] {
     opacity: 0;
     transform: translateX(40%);
   }
 }
 
-:is(
-    .tremolo-number-input-wrapper:hover,
-    .tremolo-number-input-wrapper:focus-within
-  )
-  .tremolo-number-input-stepper {
+:is(.tremolo-number-input-wrapper:hover, .tremolo-number-input-wrapper:focus-within) .tremolo-number-input-stepper {
   opacity: 1;
   transform: translateX(0);
 }
 
 .tremolo-number-input-increment-stepper {
-  border-inline-start-width: 1px;
-  border-inline-start-style: solid;
-  border-inline-start-color: #ccc;
-  font-size: calc(0.75rem);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1 1 0%;
-  max-height: 50%;
   user-select: none;
   cursor: pointer;
   border-top-right-radius: var(--border-radius);
+  border-inline-start: 1px solid oklch(84.522% 0 0);
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  max-height: 50%;
+  font-size: .75rem;
+  display: flex;
 
-  &[aria-disabled='false']:active {
-    background-color: #3443560e;
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
+  &[aria-disabled="false"]:active {
+    background-color: oklch(37.798% .03812 254.612 / .055);
   }
 
-  &[aria-readonly='true'] {
+  &[aria-disabled="true"], &[aria-readonly="true"] {
     cursor: not-allowed;
   }
 }
 
 .tremolo-number-input-decrement-stepper {
-  border-inline-start-width: 1px;
-  border-inline-start-style: solid;
-  border-inline-start-color: #ccc;
-  border-top: 1px solid #ccc;
-  font-size: calc(0.75rem);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1 1 0%;
-  max-height: 50%;
+  border-inline-start: 1px solid oklch(84.522% 0 0);
   user-select: none;
   cursor: pointer;
   border-bottom-right-radius: var(--border-radius);
+  border-top: 1px solid oklch(84.522% 0 0);
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  max-height: 50%;
+  font-size: .75rem;
+  display: flex;
 
-  &[aria-disabled='false']:active {
-    background-color: #3443560e;
+  &[aria-disabled="false"]:active {
+    background-color: oklch(37.798% .03812 254.612 / .055);
   }
 
-  &[aria-disabled='true'] {
+  &[aria-disabled="true"], &[aria-readonly="true"] {
     cursor: not-allowed;
   }
+}
 
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
+:where(.dark, [data-theme="dark"]) {
+  & .tremolo-number-input-wrapper {
+    --border-color: oklch(52% 0 0);
+
+    &[data-variant="filled"] {
+      --bg: oklch(43.5% 0 0);
+
+      &:hover {
+        --bg: oklch(46.6% 0 0);
+      }
+    }
   }
 }
-
 .tremolo-piano {
-  display: inline-block;
   box-sizing: border-box;
   user-select: none;
   touch-action: none;
+  display: inline-block;
   position: relative;
 }
 
 .tremolo-piano-white-key {
   --bg: oklch(100% 0 0);
   --color: oklch(0% 0 0);
-  --active-bg: oklch(90% 0 0);
+  --active-bg: oklch(92% 0 0);
   --active-color: oklch(0% 0 0);
-
   box-sizing: border-box;
-  position: absolute;
   background-color: var(--bg);
   -webkit-tap-highlight-color: transparent;
   color: var(--color);
-  border: 1px solid #555;
-  border-radius: 0px 0px 8px 8px;
   cursor: pointer;
   z-index: 1;
+  border: 1px solid #555;
+  border-radius: 0 0 8px 8px;
+  position: absolute;
 
-  &[data-active='true'] {
+  &[data-active="true"] {
     background-color: var(--active-bg);
     color: var(--active-color);
   }
 
-  &[aria-disabled='true'] {
+  &[aria-disabled="true"] {
     cursor: not-allowed;
   }
 }
 
 .tremolo-piano-black-key {
   --color: oklch(100% 0 0);
-  --bg: oklch(32.109% 0.00004 271.152);
+  --bg: oklch(32% 0 0);
   --active-color: oklch(100% 0 0);
-  --active-bg: oklch(47.836% 0.00005 271.152);
-
+  --active-bg: oklch(44% 0 0);
   box-sizing: border-box;
-  position: absolute;
   background-color: var(--bg);
   -webkit-tap-highlight-color: transparent;
   color: var(--color);
-  border: 1px solid #555;
-  border-radius: 0px 0px 8px 8px;
   cursor: pointer;
   z-index: 2;
+  border: 1px solid #555;
+  border-radius: 0 0 8px 8px;
+  position: absolute;
 
-  &[data-active='true'] {
+  &[data-active="true"] {
     background-color: var(--active-bg);
     color: var(--active-color);
   }
 
-  &[aria-disabled='true'] {
+  &[aria-disabled="true"] {
     cursor: not-allowed;
   }
 }
 
 .tremolo-piano-key-label-wrapper {
-  display: flex;
   justify-content: center;
   align-items: end;
   height: 100%;
+  display: flex;
 }
 
 .tremolo-piano-key-label {
   box-sizing: content-box;
-  display: flex;
+  aspect-ratio: 1;
+  border: 1px solid #888;
+  border-radius: 4px;
   justify-content: center;
   align-items: center;
-  font-size: 0.6rem;
+  max-width: calc(100% - 16px);
   height: 10px;
   margin-bottom: 10px;
   padding: 4px;
-  border-radius: 4px;
-  border: 1px solid #888;
-  aspect-ratio: 1;
-  max-width: calc(100% - 16px);
+  font-size: .6rem;
+  display: flex;
 }
 
-:where(.dark, [data-theme='dark']) {
-  .tremolo-piano-white-key {
-    --bg: oklch(48.193% 0.00005 271.152);
-    --color: oklch(100% 0 0);
-    --active-bg: oklch(52.78% 0.00006 271.152);
-    --active-color: oklch(100% 0 0);
+:where(.dark, [data-theme="dark"]) {
+  & .tremolo-piano-white-key {
+    --bg: oklch(80% 0 0);
+    --color: oklch(0% 0 0);
+    --active-bg: oklch(72% 0 0);
+    --active-color: oklch(0% 0 0);
   }
+}
+.tremolo-points-editor {
+  position: relative;
+}
 
-  .tremolo-piano-black-key {
-    --color: oklch(100% 0 0);
-    --bg: oklch(32.109% 0 0);
-    --active-color: oklch(100% 0 0);
-    --active-bg: oklch(38.666% 0.00004 271.152);
-  }
+.tremolo-points-editor-background {
+  z-index: 0;
+  position: absolute;
+  inset: 0;
 }
 
+.tremolo-points-editor-container {
+  z-index: 10;
+  position: absolute;
+  inset: 0;
+}
+
+.tremolo-points-editor-point {
+  --color: oklch(59.5% .17548 266.373);
+  cursor: grab;
+  background-color: var(--color);
+  border-radius: 50%;
+  outline: none;
+  position: absolute;
+  translate: -50% -50%;
+
+  &[data-dragging="true"] {
+    cursor: inherit;
+  }
+}
 .tremolo-slider {
-  display: inline-block;
   cursor: pointer;
-  outline: 0;
   -webkit-tap-highlight-color: transparent;
+  outline: 0;
+  display: inline-block;
 
-  &[aria-readonly='true'] {
+  &[aria-readonly="true"] {
     cursor: not-allowed;
   }
 }
 
 .tremolo-slider-thumb-wrapper {
+  z-index: 100;
   position: absolute;
   translate: -50% -50%;
-  z-index: 100;
 }
 
 .tremolo-slider-thumb {
-  --color: var(--tremolo-theme-color);
-
+  --color: oklch(59.5% .17548 266.373);
   background: var(--color);
   border-radius: 50%;
   outline: none;
 
-  &[aria-disabled='true'] {
-    background: #5d6478;
+  &[aria-disabled="true"] {
+    background: oklch(50.462% .03307 270.021);
   }
 
-  &[aria-readonly='false']:focus {
+  &[aria-readonly="false"]:focus {
     box-shadow: 0px 0px 0px 3px
       color-mix(in srgb, var(--color) 20%, transparent);
   }
 }
 
 .tremolo-slider-track {
-  --active: #7998ec;
-  --inactive: #eee;
-
+  --active: oklch(69.212% .12903 267.633);
+  --inactive: oklch(95% 0 0);
   position: relative;
 
-  &[data-vertical='false'] {
+  &[data-vertical="false"] {
     min-width: 50px;
   }
 
-  &[data-vertical='true'] {
+  &[data-vertical="true"] {
     min-height: 50px;
   }
 
   &:hover {
-    --active: #6387e9;
+    --active: oklch(64.276% .15244 266.932);
     --inactive: #e0e0e0;
   }
 
-  &[aria-disabled='true'] {
-    --active: #858890;
-    --inactive: #ddd;
+  &[aria-disabled="true"] {
+    --active: oklch(75.327% .01237 264.547);
+    --inactive: oklch(89.755% .0001 271.152);
   }
 }
 
@@ -419,16 +441,16 @@
 }
 
 .tremolo-slider-scale-option {
-  display: flex;
-  color: #222;
+  color: oklch(25.197% .00003 271.152);
+  z-index: 10;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  display: flex;
   position: absolute;
-  translate: -50% 0;
-  z-index: 10;
+  translate: -50%;
 
-  &[data-vertical='true'] {
+  &[data-vertical="true"] {
     flex-direction: row;
     translate: 0 -50%;
   }
@@ -442,40 +464,73 @@
   text-align: right;
 }
 
+:where(.dark, [data-theme="dark"]) {
+  & .tremolo-slider-thumb {
+    --color: oklch(64.5% .17548 266.373);
+
+    &:hover {
+      --color: oklch(67.5% .17548 266.373);
+    }
+  }
+
+  & .tremolo-slider-track {
+    --active: oklch(59.5% .17548 266.373);
+    --inactive: oklch(41.7% 0 0);
+
+    &:hover {
+      --active: oklch(62.5% .17548 266.373);
+      --inactive: oklch(44.7% 0 0);
+    }
+
+    &[aria-disabled="true"] {
+      --active: oklch(75.327% .01237 264.547);
+      --inactive: oklch(89.755% .0001 271.152);
+    }
+  }
+}
 .tremolo-xy-pad {
-  display: inline-block;
   cursor: pointer;
+  display: inline-block;
 }
 
 .tremolo-xy-pad-area {
-  --color: #eee;
-
-  position: relative;
+  --color: oklch(95% 0 0);
   background-color: var(--color);
+  position: relative;
 }
 
 .tremolo-xy-pad-thumb-wrapper {
+  z-index: 100;
   position: absolute;
   translate: -50% -50%;
-  z-index: 100;
 }
 
 .tremolo-xy-pad-thumb {
-  --color: var(--tremolo-theme-color);
-
+  --color: oklch(59.5% .17548 266.373);
+  background-color: var(--color);
   border-radius: 50%;
   outline: none;
-  background-color: var(--color);
 
-  &[aria-disabled='true'] {
-    background-color: #5d6478;
+  &[aria-disabled="true"] {
+    background-color: oklch(50.462% .03307 270.021);
   }
 
-  &:focus {
+  &[aria-readonly="false"]:focus {
     box-shadow: 0px 0px 0px 3px
       color-mix(in srgb, var(--color) 20%, transparent);
   }
 }
 
+:where(.dark, [data-theme="dark"]) {
+  & .tremolo-xy-pad-area {
+    --color: oklch(41.7% 0 0);
+  }
 
-/*# sourceMappingURL=index.css.map*/
+  & .tremolo-xy-pad-thumb {
+    --color: oklch(64.5% .17548 266.373);
+
+    &:hover {
+      --color: oklch(67.5% .17548 266.373);
+    }
+  }
+}