@tremolo-ui/react 0.1.5 → 0.2.0

package/dist/index.css

@@ -1,7 +1,3 @@
-:root {
-  --tremolo-theme-color: #4e76e6;
-}
-
 .tremolo-no-select {
   user-select: none;
 }
@@ -12,53 +8,79 @@
   overflow: visible;
   outline: 0;
 
-  &:focus,
-  &:hover {
-    > .tremolo-knob-active-line {
-      color: #4e76e6;
-    }
-
-    > .tremolo-knob-inactive-line {
-      color: #ddd;
-    }
-
-    > .tremolo-knob-thumb {
-      color: #ccc;
-    }
-  }
-
   &[aria-readonly='true'] {
     cursor: not-allowed;
   }
-
-  &[aria-disabled='true'] {
-    > .tremolo-knob-active-line {
-      color: #5d6478;
-    }
-  }
 }
 
 .tremolo-knob-active-line {
   overflow: visible;
-  color: #7998ec;
+  color: oklch(69.2% 0.17548 266.373);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(59.5% 0.17548 266.373);
+  }
+
+  :where(.tremolo-knob[aria-disabled='true']) & {
+    color: oklch(50.5% 0.03307 270.021);
+  }
 }
 
 .tremolo-knob-inactive-line {
-  color: #eee;
+  color: oklch(95% 0 0);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(90% 0 0);
+  }
 }
 
 .tremolo-knob-thumb {
-  color: #d0d0d0;
+  color: oklch(85.7% 0 0);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(84.5% 0 0);
+  }
 }
 
 .tremolo-knob-thumb-line {
-  color: #eee;
+  color: oklch(94.2% 0 0);
+}
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-active-line {
+    color: oklch(59.5% 0.17548 266.373);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(65.2% 0.17548 266.373);
+    }
+  }
+
+  .tremolo-knob-inactive-line {
+    color: oklch(41.7% 0 0);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(44.59% 0 0);
+    }
+  }
+
+  .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(84.2% 0 0);
+  }
 }
 
 .tremolo-number-input-wrapper {
   --border-radius: 4px;
   --stepper-width: 20px;
-  --active-color: var(--tremolo-theme-color);
+  --active-color: oklch(59.5% 0.17548 266.373);
+  --border-color: oklch(81% 0 0);
 
   display: inline-flex;
   flex-direction: row;
@@ -66,13 +88,13 @@
   width: 140px;
   height: min-content;
   border-style: solid;
-  border-color: #c1c1c1;
+  border-color: var(--border-color);
   border-width: 0px;
   outline: none;
   transition: all 0.1s;
 
   &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
-    border-color: #f34343;
+    border-color: oklch(64.245% 0.21266 25.499);
   }
 
   &[data-variant='outline'] {
@@ -80,29 +102,30 @@
     border-radius: var(--border-radius);
 
     &: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'] {
+    --bg: oklch(95.88% 0 0);
     border-width: 1px;
     border-radius: var(--border-radius);
     border-color: transparent;
-    background-color: #edf2f7;
+    background-color: var(--bg);
 
     &: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);
     }
@@ -112,11 +135,11 @@
     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);
     }
@@ -173,7 +196,7 @@
 .tremolo-number-input-increment-stepper {
   border-inline-start-width: 1px;
   border-inline-start-style: solid;
-  border-inline-start-color: #ccc;
+  border-inline-start-color: oklch(84.522% 0 0);
   font-size: calc(0.75rem);
   display: flex;
   justify-content: center;
@@ -185,7 +208,7 @@
   border-top-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
-    background-color: #3443560e;
+    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
   }
 
   &[aria-disabled='true'] {
@@ -200,8 +223,8 @@
 .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;
+  border-inline-start-color: oklch(84.522% 0 0);
+  border-top: 1px solid oklch(84.522% 0 0);
   font-size: calc(0.75rem);
   display: flex;
   justify-content: center;
@@ -213,7 +236,7 @@
   border-bottom-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
-    background-color: #3443560e;
+    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
   }
 
   &[aria-disabled='true'] {
@@ -225,6 +248,20 @@
   }
 }
 
+: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;
@@ -234,10 +271,10 @@
 }
 
 .tremolo-piano-white-key {
-  --bg: white;
-  --color: black;
-  --active-bg: #ccc;
-  --active-color: black;
+  --bg: oklch(100% 0 0);
+  --color: oklch(0% 0 0);
+  --active-bg: oklch(92% 0 0);
+  --active-color: oklch(0% 0 0);
 
   box-sizing: border-box;
   position: absolute;
@@ -260,10 +297,10 @@
 }
 
 .tremolo-piano-black-key {
-  --color: white;
-  --bg: #333;
-  --active-color: white;
-  --active-bg: #666;
+  --color: oklch(100% 0 0);
+  --bg: oklch(32% 0 0);
+  --active-color: oklch(100% 0 0);
+  --active-bg: oklch(44% 0 0);
 
   box-sizing: border-box;
   position: absolute;
@@ -307,6 +344,15 @@
   max-width: calc(100% - 16px);
 }
 
+: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-slider {
   display: inline-block;
   cursor: pointer;
@@ -325,14 +371,14 @@
 }
 
 .tremolo-slider-thumb {
-  --color: var(--tremolo-theme-color);
+  --color: oklch(59.5% 0.17548 266.373);
 
   background: var(--color);
   border-radius: 50%;
   outline: none;
 
   &[aria-disabled='true'] {
-    background: #5d6478;
+    background: oklch(50.462% 0.03307 270.021);
   }
 
   &[aria-readonly='false']:focus {
@@ -342,8 +388,8 @@
 }
 
 .tremolo-slider-track {
-  --active: #7998ec;
-  --inactive: #eee;
+  --active: oklch(69.212% 0.12903 267.633);
+  --inactive: oklch(95% 0 0);
 
   position: relative;
 
@@ -356,13 +402,13 @@
   }
 
   &:hover {
-    --active: #6387e9;
+    --active: oklch(64.276% 0.15244 266.932);
     --inactive: #e0e0e0;
   }
 
   &[aria-disabled='true'] {
-    --active: #858890;
-    --inactive: #ddd;
+    --active: oklch(75.327% 0.01237 264.547);
+    --inactive: oklch(89.755% 0.0001 271.152);
   }
 }
 
@@ -373,7 +419,7 @@
 
 .tremolo-slider-scale-option {
   display: flex;
-  color: #222;
+  color: oklch(25.197% 0.00003 271.152);
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -395,13 +441,38 @@
   text-align: right;
 }
 
+:where(.dark, [data-theme='dark']) {
+  .tremolo-slider-thumb {
+    --color: oklch(64.5% 0.17548 266.373);
+
+    &:hover {
+      --color: oklch(67.5% 0.17548 266.373);
+    }
+  }
+
+  .tremolo-slider-track {
+    --active: oklch(59.5% 0.17548 266.373);
+    --inactive: oklch(41.7% 0 0);
+
+    &:hover {
+      --active: oklch(62.5% 0.17548 266.373);
+      --inactive: oklch(44.7% 0 0);
+    }
+
+    &[aria-disabled='true'] {
+      --active: oklch(75.327% 0.01237 264.547);
+      --inactive: oklch(89.755% 0.0001 271.152);
+    }
+  }
+}
+
 .tremolo-xy-pad {
   display: inline-block;
   cursor: pointer;
 }
 
 .tremolo-xy-pad-area {
-  --color: #eee;
+  --color: oklch(95% 0 0);
 
   position: relative;
   background-color: var(--color);
@@ -414,21 +485,35 @@
 }
 
 .tremolo-xy-pad-thumb {
-  --color: var(--tremolo-theme-color);
+  --color: oklch(59.5% 0.17548 266.373);
 
   border-radius: 50%;
   outline: none;
   background-color: var(--color);
 
   &[aria-disabled='true'] {
-    background-color: #5d6478;
+    background-color: oklch(50.462% 0.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);
+  }
+
+  .tremolo-xy-pad-thumb {
+    --color: oklch(64.5% 0.17548 266.373);
+
+    &:hover {
+      --color: oklch(67.5% 0.17548 266.373);
+    }
+  }
+}
+
 
 /*# sourceMappingURL=index.css.map*/

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","names":[],"sources":["../src/styles/global.css","../src/components/Knob/index.css","../src/components/NumberInput/index.css","../src/components/Piano/index.css","../src/components/Slider/index.css","../src/components/XYPad/index.css"],"sourcesContent":[":root {\n  --tremolo-theme-color: #4e76e6;\n}\n\n.tremolo-no-select {\n  user-select: none;\n}\n",".tremolo-knob {\n  display: inline-block;\n  cursor: pointer;\n  overflow: visible;\n  outline: 0;\n\n  &:focus,\n  &:hover {\n    > .tremolo-knob-active-line {\n      color: #4e76e6;\n    }\n\n    > .tremolo-knob-inactive-line {\n      color: #ddd;\n    }\n\n    > .tremolo-knob-thumb {\n      color: #ccc;\n    }\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-disabled='true'] {\n    > .tremolo-knob-active-line {\n      color: #5d6478;\n    }\n  }\n}\n\n.tremolo-knob-active-line {\n  overflow: visible;\n  color: #7998ec;\n}\n\n.tremolo-knob-inactive-line {\n  color: #eee;\n}\n\n.tremolo-knob-thumb {\n  color: #d0d0d0;\n}\n\n.tremolo-knob-thumb-line {\n  color: #eee;\n}\n",".tremolo-number-input-wrapper {\n  --border-radius: 4px;\n  --stepper-width: 20px;\n  --active-color: var(--tremolo-theme-color);\n\n  display: inline-flex;\n  flex-direction: row;\n  position: relative;\n  width: 140px;\n  height: min-content;\n  border-style: solid;\n  border-color: #c1c1c1;\n  border-width: 0px;\n  outline: none;\n  transition: all 0.1s;\n\n  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {\n    border-color: #f34343;\n  }\n\n  &[data-variant='outline'] {\n    border-width: 1px;\n    border-radius: var(--border-radius);\n\n    &:hover {\n      border-color: #909090;\n    }\n\n    &:focus-within {\n      border-color: var(--active-color);\n      box-shadow: 0px 0px 0px 2px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-variant='filled'] {\n    border-width: 1px;\n    border-radius: var(--border-radius);\n    border-color: transparent;\n    background-color: #edf2f7;\n\n    &:hover {\n      background-color: #e4e9ee;\n    }\n\n    &:focus-within {\n      background-color: inherit;\n      border-color: var(--active-color);\n      box-shadow: 0px 0px 0px 2px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-variant='flushed'] {\n    border-bottom-width: 1px;\n\n    &:hover {\n      border-color: #909090;\n    }\n\n    &:focus-within {\n      border-color: var(--active-color);\n      box-shadow: 0px 2px 0px 0px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-stepper='false'] {\n    --stepper-width: 0px;\n  }\n}\n\n.tremolo-number-input {\n  display: block;\n  color: inherit;\n  width: calc(100% - 20px - var(--stepper-width));\n  background-color: inherit;\n  font: inherit;\n  padding: 6px 10px;\n\n  margin: 0;\n  border: none;\n  outline: none;\n  appearance: none;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-number-input-stepper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--stepper-width);\n  transition: all 0.1s linear;\n\n  &[data-dynamic='true'] {\n    opacity: 0;\n    transform: translateX(40%);\n  }\n}\n\n:is(\n    .tremolo-number-input-wrapper:hover,\n    .tremolo-number-input-wrapper:focus-within\n  )\n  .tremolo-number-input-stepper {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.tremolo-number-input-increment-stepper {\n  border-inline-start-width: 1px;\n  border-inline-start-style: solid;\n  border-inline-start-color: #ccc;\n  font-size: calc(0.75rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 1 0%;\n  max-height: 50%;\n  user-select: none;\n  cursor: pointer;\n  border-top-right-radius: var(--border-radius);\n\n  &[aria-disabled='false']:active {\n    background-color: #3443560e;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-number-input-decrement-stepper {\n  border-inline-start-width: 1px;\n  border-inline-start-style: solid;\n  border-inline-start-color: #ccc;\n  border-top: 1px solid #ccc;\n  font-size: calc(0.75rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 1 0%;\n  max-height: 50%;\n  user-select: none;\n  cursor: pointer;\n  border-bottom-right-radius: var(--border-radius);\n\n  &[aria-disabled='false']:active {\n    background-color: #3443560e;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n",".tremolo-piano {\n  display: inline-block;\n  box-sizing: border-box;\n  user-select: none;\n  touch-action: none;\n  position: relative;\n}\n\n.tremolo-piano-white-key {\n  --bg: white;\n  --color: black;\n  --active-bg: #ccc;\n  --active-color: black;\n\n  box-sizing: border-box;\n  position: absolute;\n  background-color: var(--bg);\n  -webkit-tap-highlight-color: transparent;\n  color: var(--color);\n  border: 1px solid #555;\n  border-radius: 0px 0px 8px 8px;\n  cursor: pointer;\n  z-index: 1;\n\n  &[data-active='true'] {\n    background-color: var(--active-bg);\n    color: var(--active-color);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-piano-black-key {\n  --color: white;\n  --bg: #333;\n  --active-color: white;\n  --active-bg: #666;\n\n  box-sizing: border-box;\n  position: absolute;\n  background-color: var(--bg);\n  -webkit-tap-highlight-color: transparent;\n  color: var(--color);\n  border: 1px solid #555;\n  border-radius: 0px 0px 8px 8px;\n  cursor: pointer;\n  z-index: 2;\n\n  &[data-active='true'] {\n    background-color: var(--active-bg);\n    color: var(--active-color);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-piano-key-label-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  height: 100%;\n}\n\n.tremolo-piano-key-label {\n  box-sizing: content-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 0.6rem;\n  height: 10px;\n  margin-bottom: 10px;\n  padding: 4px;\n  border-radius: 4px;\n  border: 1px solid #888;\n  aspect-ratio: 1;\n  max-width: calc(100% - 16px);\n}\n",".tremolo-slider {\n  display: inline-block;\n  cursor: pointer;\n  outline: 0;\n  -webkit-tap-highlight-color: transparent;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-slider-thumb-wrapper {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 100;\n}\n\n.tremolo-slider-thumb {\n  --color: var(--tremolo-theme-color);\n\n  background: var(--color);\n  border-radius: 50%;\n  outline: none;\n\n  &[aria-disabled='true'] {\n    background: #5d6478;\n  }\n\n  &[aria-readonly='false']:focus {\n    box-shadow: 0px 0px 0px 3px\n      color-mix(in srgb, var(--color) 20%, transparent);\n  }\n}\n\n.tremolo-slider-track {\n  --active: #7998ec;\n  --inactive: #eee;\n\n  position: relative;\n\n  &[data-vertical='false'] {\n    min-width: 50px;\n  }\n\n  &[data-vertical='true'] {\n    min-height: 50px;\n  }\n\n  &:hover {\n    --active: #6387e9;\n    --inactive: #e0e0e0;\n  }\n\n  &[aria-disabled='true'] {\n    --active: #858890;\n    --inactive: #ddd;\n  }\n}\n\n.tremolo-slider-scale {\n  display: block;\n  position: relative;\n}\n\n.tremolo-slider-scale-option {\n  display: flex;\n  color: #222;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  translate: -50% 0;\n  z-index: 10;\n\n  &[data-vertical='true'] {\n    flex-direction: row;\n    translate: 0 -50%;\n  }\n}\n\n.tremolo-slider-scale-option-mark {\n  background-color: currentColor;\n}\n\n.tremolo-slider-scale-option-label {\n  text-align: right;\n}\n",".tremolo-xy-pad {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.tremolo-xy-pad-area {\n  --color: #eee;\n\n  position: relative;\n  background-color: var(--color);\n}\n\n.tremolo-xy-pad-thumb-wrapper {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 100;\n}\n\n.tremolo-xy-pad-thumb {\n  --color: var(--tremolo-theme-color);\n\n  border-radius: 50%;\n  outline: none;\n  background-color: var(--color);\n\n  &[aria-disabled='true'] {\n    background-color: #5d6478;\n  }\n\n  &:focus {\n    box-shadow: 0px 0px 0px 3px\n      color-mix(in srgb, var(--color) 20%, transparent);\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;;ACNA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AC/CA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACxKA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AChFA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;ACtFA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"index.css","names":[],"sources":["../src/styles/global.css","../src/components/Knob/index.css","../src/components/NumberInput/index.css","../src/components/Piano/index.css","../src/components/Slider/index.css","../src/components/XYPad/index.css"],"sourcesContent":[".tremolo-no-select {\n  user-select: none;\n}\n",".tremolo-knob {\n  display: inline-block;\n  cursor: pointer;\n  overflow: visible;\n  outline: 0;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-knob-active-line {\n  overflow: visible;\n  color: oklch(69.2% 0.17548 266.373);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: oklch(59.5% 0.17548 266.373);\n  }\n\n  :where(.tremolo-knob[aria-disabled='true']) & {\n    color: oklch(50.5% 0.03307 270.021);\n  }\n}\n\n.tremolo-knob-inactive-line {\n  color: oklch(95% 0 0);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: oklch(90% 0 0);\n  }\n}\n\n.tremolo-knob-thumb {\n  color: oklch(85.7% 0 0);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: oklch(84.5% 0 0);\n  }\n}\n\n.tremolo-knob-thumb-line {\n  color: oklch(94.2% 0 0);\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-knob-active-line {\n    color: oklch(59.5% 0.17548 266.373);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(65.2% 0.17548 266.373);\n    }\n  }\n\n  .tremolo-knob-inactive-line {\n    color: oklch(41.7% 0 0);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(44.59% 0 0);\n    }\n  }\n\n  .tremolo-knob-thumb {\n    color: oklch(48.6% 0 0);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(51.7% 0 0);\n    }\n  }\n\n  .tremolo-knob-thumb-line {\n    color: oklch(84.2% 0 0);\n  }\n}\n",".tremolo-number-input-wrapper {\n  --border-radius: 4px;\n  --stepper-width: 20px;\n  --active-color: oklch(59.5% 0.17548 266.373);\n  --border-color: oklch(81% 0 0);\n\n  display: inline-flex;\n  flex-direction: row;\n  position: relative;\n  width: 140px;\n  height: min-content;\n  border-style: solid;\n  border-color: var(--border-color);\n  border-width: 0px;\n  outline: none;\n  transition: all 0.1s;\n\n  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {\n    border-color: oklch(64.245% 0.21266 25.499);\n  }\n\n  &[data-variant='outline'] {\n    border-width: 1px;\n    border-radius: var(--border-radius);\n\n    &:hover {\n      --border-color: oklch(65.335% 0 0);\n    }\n\n    &:focus-within {\n      --border-color: var(--active-color);\n      box-shadow: 0px 0px 0px 2px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-variant='filled'] {\n    --bg: oklch(95.88% 0 0);\n    border-width: 1px;\n    border-radius: var(--border-radius);\n    border-color: transparent;\n    background-color: var(--bg);\n\n    &:hover {\n      --bg: oklch(93.166% 0 0);\n    }\n\n    &:focus-within {\n      background-color: inherit;\n      --border-color: var(--active-color);\n      box-shadow: 0px 0px 0px 2px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-variant='flushed'] {\n    border-bottom-width: 1px;\n\n    &:hover {\n      --border-color: oklch(65.335% 0 0);\n    }\n\n    &:focus-within {\n      --border-color: var(--active-color);\n      box-shadow: 0px 2px 0px 0px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-stepper='false'] {\n    --stepper-width: 0px;\n  }\n}\n\n.tremolo-number-input {\n  display: block;\n  color: inherit;\n  width: calc(100% - 20px - var(--stepper-width));\n  background-color: inherit;\n  font: inherit;\n  padding: 6px 10px;\n\n  margin: 0;\n  border: none;\n  outline: none;\n  appearance: none;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-number-input-stepper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--stepper-width);\n  transition: all 0.1s linear;\n\n  &[data-dynamic='true'] {\n    opacity: 0;\n    transform: translateX(40%);\n  }\n}\n\n:is(\n    .tremolo-number-input-wrapper:hover,\n    .tremolo-number-input-wrapper:focus-within\n  )\n  .tremolo-number-input-stepper {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.tremolo-number-input-increment-stepper {\n  border-inline-start-width: 1px;\n  border-inline-start-style: solid;\n  border-inline-start-color: oklch(84.522% 0 0);\n  font-size: calc(0.75rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 1 0%;\n  max-height: 50%;\n  user-select: none;\n  cursor: pointer;\n  border-top-right-radius: var(--border-radius);\n\n  &[aria-disabled='false']:active {\n    background-color: oklch(37.798% 0.03812 254.612 / 0.055);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-number-input-decrement-stepper {\n  border-inline-start-width: 1px;\n  border-inline-start-style: solid;\n  border-inline-start-color: oklch(84.522% 0 0);\n  border-top: 1px solid oklch(84.522% 0 0);\n  font-size: calc(0.75rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 1 0%;\n  max-height: 50%;\n  user-select: none;\n  cursor: pointer;\n  border-bottom-right-radius: var(--border-radius);\n\n  &[aria-disabled='false']:active {\n    background-color: oklch(37.798% 0.03812 254.612 / 0.055);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-number-input-wrapper {\n    --border-color: oklch(52% 0 0);\n\n    &[data-variant='filled'] {\n      --bg: oklch(43.5% 0 0);\n\n      &:hover {\n        --bg: oklch(46.6% 0 0);\n      }\n    }\n  }\n}\n",".tremolo-piano {\n  display: inline-block;\n  box-sizing: border-box;\n  user-select: none;\n  touch-action: none;\n  position: relative;\n}\n\n.tremolo-piano-white-key {\n  --bg: oklch(100% 0 0);\n  --color: oklch(0% 0 0);\n  --active-bg: oklch(92% 0 0);\n  --active-color: oklch(0% 0 0);\n\n  box-sizing: border-box;\n  position: absolute;\n  background-color: var(--bg);\n  -webkit-tap-highlight-color: transparent;\n  color: var(--color);\n  border: 1px solid #555;\n  border-radius: 0px 0px 8px 8px;\n  cursor: pointer;\n  z-index: 1;\n\n  &[data-active='true'] {\n    background-color: var(--active-bg);\n    color: var(--active-color);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-piano-black-key {\n  --color: oklch(100% 0 0);\n  --bg: oklch(32% 0 0);\n  --active-color: oklch(100% 0 0);\n  --active-bg: oklch(44% 0 0);\n\n  box-sizing: border-box;\n  position: absolute;\n  background-color: var(--bg);\n  -webkit-tap-highlight-color: transparent;\n  color: var(--color);\n  border: 1px solid #555;\n  border-radius: 0px 0px 8px 8px;\n  cursor: pointer;\n  z-index: 2;\n\n  &[data-active='true'] {\n    background-color: var(--active-bg);\n    color: var(--active-color);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-piano-key-label-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  height: 100%;\n}\n\n.tremolo-piano-key-label {\n  box-sizing: content-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 0.6rem;\n  height: 10px;\n  margin-bottom: 10px;\n  padding: 4px;\n  border-radius: 4px;\n  border: 1px solid #888;\n  aspect-ratio: 1;\n  max-width: calc(100% - 16px);\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-piano-white-key {\n    --bg: oklch(80% 0 0);\n    --color: oklch(0% 0 0);\n    --active-bg: oklch(72% 0 0);\n    --active-color: oklch(0% 0 0);\n  }\n}\n",".tremolo-slider {\n  display: inline-block;\n  cursor: pointer;\n  outline: 0;\n  -webkit-tap-highlight-color: transparent;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-slider-thumb-wrapper {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 100;\n}\n\n.tremolo-slider-thumb {\n  --color: oklch(59.5% 0.17548 266.373);\n\n  background: var(--color);\n  border-radius: 50%;\n  outline: none;\n\n  &[aria-disabled='true'] {\n    background: oklch(50.462% 0.03307 270.021);\n  }\n\n  &[aria-readonly='false']:focus {\n    box-shadow: 0px 0px 0px 3px\n      color-mix(in srgb, var(--color) 20%, transparent);\n  }\n}\n\n.tremolo-slider-track {\n  --active: oklch(69.212% 0.12903 267.633);\n  --inactive: oklch(95% 0 0);\n\n  position: relative;\n\n  &[data-vertical='false'] {\n    min-width: 50px;\n  }\n\n  &[data-vertical='true'] {\n    min-height: 50px;\n  }\n\n  &:hover {\n    --active: oklch(64.276% 0.15244 266.932);\n    --inactive: #e0e0e0;\n  }\n\n  &[aria-disabled='true'] {\n    --active: oklch(75.327% 0.01237 264.547);\n    --inactive: oklch(89.755% 0.0001 271.152);\n  }\n}\n\n.tremolo-slider-scale {\n  display: block;\n  position: relative;\n}\n\n.tremolo-slider-scale-option {\n  display: flex;\n  color: oklch(25.197% 0.00003 271.152);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  translate: -50% 0;\n  z-index: 10;\n\n  &[data-vertical='true'] {\n    flex-direction: row;\n    translate: 0 -50%;\n  }\n}\n\n.tremolo-slider-scale-option-mark {\n  background-color: currentColor;\n}\n\n.tremolo-slider-scale-option-label {\n  text-align: right;\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-slider-thumb {\n    --color: oklch(64.5% 0.17548 266.373);\n\n    &:hover {\n      --color: oklch(67.5% 0.17548 266.373);\n    }\n  }\n\n  .tremolo-slider-track {\n    --active: oklch(59.5% 0.17548 266.373);\n    --inactive: oklch(41.7% 0 0);\n\n    &:hover {\n      --active: oklch(62.5% 0.17548 266.373);\n      --inactive: oklch(44.7% 0 0);\n    }\n\n    &[aria-disabled='true'] {\n      --active: oklch(75.327% 0.01237 264.547);\n      --inactive: oklch(89.755% 0.0001 271.152);\n    }\n  }\n}\n",".tremolo-xy-pad {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.tremolo-xy-pad-area {\n  --color: oklch(95% 0 0);\n\n  position: relative;\n  background-color: var(--color);\n}\n\n.tremolo-xy-pad-thumb-wrapper {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 100;\n}\n\n.tremolo-xy-pad-thumb {\n  --color: oklch(59.5% 0.17548 266.373);\n\n  border-radius: 50%;\n  outline: none;\n  background-color: var(--color);\n\n  &[aria-disabled='true'] {\n    background-color: oklch(50.462% 0.03307 270.021);\n  }\n\n  &[aria-readonly='false']:focus {\n    box-shadow: 0px 0px 0px 3px\n      color-mix(in srgb, var(--color) 20%, transparent);\n  }\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-xy-pad-area {\n    --color: oklch(41.7% 0 0);\n  }\n\n  .tremolo-xy-pad-thumb {\n    --color: oklch(64.5% 0.17548 266.373);\n\n    &:hover {\n      --color: oklch(67.5% 0.17548 266.373);\n    }\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACxEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;ACxLA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACzFA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AC/GA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA"}