@fab1o978/react-ui 0.1.8 → 0.2.0

package/dist/index.css

@@ -1669,4 +1669,498 @@
 .RichTextEditor_module_editorContent .ProseMirror ::selection {
   background: var(--rich-text-editor-accent-light, var(--accent-light));
 }
+
+/* src/components/ColorWheel/ColorWheel.module.scss */
+.ColorWheel_module_root {
+  --bg: #ECEAE3;
+  --surface: #FFFFFF;
+  --surface-2: #E3E0D8;
+  --border: #D2CDC0;
+  --text: #1A1913;
+  --text-dim: #726F64;
+  --text-faint: #A8A398;
+  --shadow-soft: 0 1px 2px rgba(30, 25, 15, 0.08);
+  --check-a: #d8d4c8;
+  --check-b: #f4f2ec;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  .ColorWheel_module_root:not([data-theme=light]):not([data-theme=dark]) {
+    --bg: #131217;
+    --surface: #1C1B22;
+    --surface-2: #26252E;
+    --border: #34333D;
+    --text: #ECEAF0;
+    --text-dim: #8E8C99;
+    --text-faint: #605E6B;
+    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
+    --check-a: #37353f;
+    --check-b: #201f26;
+    color-scheme: dark;
+  }
+}
+[data-theme=light] .ColorWheel_module_root:not([data-theme=light]):not([data-theme=dark]) {
+  --bg: #ECEAE3;
+  --surface: #FFFFFF;
+  --surface-2: #E3E0D8;
+  --border: #D2CDC0;
+  --text: #1A1913;
+  --text-dim: #726F64;
+  --text-faint: #A8A398;
+  --shadow-soft: 0 1px 2px rgba(30, 25, 15, 0.08);
+  --check-a: #d8d4c8;
+  --check-b: #f4f2ec;
+  color-scheme: light;
+}
+[data-theme=dark] .ColorWheel_module_root:not([data-theme=light]):not([data-theme=dark]) {
+  --bg: #131217;
+  --surface: #1C1B22;
+  --surface-2: #26252E;
+  --border: #34333D;
+  --text: #ECEAF0;
+  --text-dim: #8E8C99;
+  --text-faint: #605E6B;
+  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --check-a: #37353f;
+  --check-b: #201f26;
+  color-scheme: dark;
+}
+.ColorWheel_module_root[data-theme=dark] {
+  --bg: #131217;
+  --surface: #1C1B22;
+  --surface-2: #26252E;
+  --border: #34333D;
+  --text: #ECEAF0;
+  --text-dim: #8E8C99;
+  --text-faint: #605E6B;
+  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --check-a: #37353f;
+  --check-b: #201f26;
+  color-scheme: dark;
+}
+.ColorWheel_module_root[data-theme=light] {
+  --bg: #ECEAE3;
+  --surface: #FFFFFF;
+  --surface-2: #E3E0D8;
+  --border: #D2CDC0;
+  --text: #1A1913;
+  --text-dim: #726F64;
+  --text-faint: #A8A398;
+  --shadow-soft: 0 1px 2px rgba(30, 25, 15, 0.08);
+  --check-a: #d8d4c8;
+  --check-b: #f4f2ec;
+  color-scheme: light;
+}
+.ColorWheel_module_root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  font-family:
+    -apple-system,
+    "Segoe UI",
+    Inter,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  color: var(--text);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ColorWheel_module_root,
+  .ColorWheel_module_root *,
+  .ColorWheel_module_root *::before,
+  .ColorWheel_module_root *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+.ColorWheel_module_recents {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 30px;
+  background: var(--surface-2);
+  border-radius: 999px;
+  padding: 5px 8px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), var(--shadow-soft);
+}
+.ColorWheel_module_chipWrap {
+  position: relative;
+  flex: none;
+  animation: ColorWheel_module_chipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+.ColorWheel_module_chip {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: block;
+  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.22), var(--shadow-soft);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.ColorWheel_module_chip:hover {
+  transform: scale(1.14) translateY(-1px);
+  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.3), 0 4px 10px -3px rgba(0, 0, 0, 0.3);
+}
+.ColorWheel_module_chip:active {
+  transform: scale(1.02);
+}
+.ColorWheel_module_chipRemove {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  background: var(--surface);
+  color: var(--text-dim);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(128, 128, 128, 0.25);
+  cursor: pointer;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.6);
+  transition:
+    opacity 0.12s ease,
+    transform 0.12s ease,
+    color 0.12s ease;
+}
+.ColorWheel_module_chipRemove svg {
+  width: 8px;
+  height: 8px;
+}
+.ColorWheel_module_chipRemove:hover {
+  color: var(--text);
+}
+.ColorWheel_module_chipWrap:hover .ColorWheel_module_chipRemove {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+@keyframes ColorWheel_module_chipIn {
+  0% {
+    transform: scale(0) rotate(-25deg);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+}
+.ColorWheel_module_picker {
+  position: relative;
+  margin-top: 82px;
+  height: 265px;
+  width: 272px;
+}
+.ColorWheel_module_glow {
+  position: absolute;
+  width: 340px;
+  height: 340px;
+  left: 50%;
+  top: 88px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  opacity: 0.55;
+  pointer-events: none;
+  z-index: 0;
+}
+.ColorWheel_module_modeToggle {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  transform: translate(-50%, calc(-50% - 156px));
+  z-index: 3;
+  display: grid;
+  background: var(--surface-2);
+  border-radius: 999px;
+  padding: 3px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), var(--shadow-soft);
+}
+.ColorWheel_module_modePill {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 3px;
+  border-radius: 999px;
+  background: var(--surface);
+  box-shadow: var(--shadow-soft);
+  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ColorWheel_module_modeButton {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 22px;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 10.5px;
+  font-weight: 700;
+  line-height: 22px;
+  letter-spacing: 0.02em;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.ColorWheel_module_modeButton.ColorWheel_module_active {
+  color: var(--text);
+}
+.ColorWheel_module_modeButton:hover:not(.ColorWheel_module_active) {
+  color: var(--text);
+}
+.ColorWheel_module_stage {
+  position: absolute;
+  top: -48px;
+  left: 50%;
+  width: 272px;
+  height: 272px;
+  transform: translateX(-50%);
+  touch-action: none;
+}
+.ColorWheel_module_stageShadow {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 10px 18px rgba(0, 0, 0, 0.22);
+  pointer-events: none;
+}
+.ColorWheel_module_ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 2;
+  -webkit-mask:
+    radial-gradient(
+      circle closest-side,
+      transparent 0 92px,
+      black 93px 100%);
+  mask:
+    radial-gradient(
+      circle closest-side,
+      transparent 0 92px,
+      black 93px 100%);
+}
+.ColorWheel_module_hueHandlePivot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  z-index: 3;
+  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ColorWheel_module_root[data-dragging=true] .ColorWheel_module_hueHandlePivot {
+  transition: none;
+}
+.ColorWheel_module_hueHandle {
+  position: absolute;
+  top: -114px;
+  left: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.15);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  z-index: 3;
+}
+.ColorWheel_module_alphaArcShadowWrap {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  width: 380px;
+  height: 380px;
+  transform: translate(calc(-50% + 1px), calc(-50% + 5px));
+  z-index: 1;
+  pointer-events: none;
+  filter: blur(7px);
+}
+.ColorWheel_module_alphaArcShadow {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.22);
+  clip-path: path("M 328.56,270 A 160 160 0 0 1 51.44,270 L 65.29,262 A 144 144 0 0 0 314.71,262 Z");
+}
+.ColorWheel_module_alphaArc {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  width: 380px;
+  height: 380px;
+  transform: translate(-50%, -50%);
+  touch-action: none;
+  cursor: grab;
+  z-index: 2;
+  background: var(--surface-2);
+  clip-path: path("M 328.56,270 A 160 160 0 0 1 51.44,270 L 65.29,262 A 144 144 0 0 0 314.71,262 Z");
+}
+.ColorWheel_module_alphaArcFill {
+  position: absolute;
+  inset: 0;
+}
+.ColorWheel_module_alphaArcCap {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  z-index: 2;
+  pointer-events: none;
+  background: var(--surface-2);
+}
+.ColorWheel_module_alphaArcCapStart {
+  transform: translate(calc(-50% + 131.6px), calc(-50% + 76px));
+}
+.ColorWheel_module_alphaArcCapEnd {
+  transform: translate(calc(-50% - 131.6px), calc(-50% + 76px));
+}
+.ColorWheel_module_alphaArcHandle {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
+  z-index: 3;
+  pointer-events: none;
+  transition: transform 0.12s ease;
+}
+.ColorWheel_module_root[data-dragging=true] .ColorWheel_module_alphaArcHandle {
+  transition: none;
+}
+.ColorWheel_module_currentDisc {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 156px;
+  height: 156px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 2;
+  box-shadow: 0 10px 24px -8px rgba(20, 16, 10, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  background-image:
+    linear-gradient(
+      45deg,
+      var(--check-a) 25%,
+      transparent 25%,
+      transparent 75%,
+      var(--check-a) 75%),
+    linear-gradient(
+      45deg,
+      var(--check-a) 25%,
+      transparent 25%,
+      transparent 75%,
+      var(--check-a) 75%);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  background-color: var(--check-b);
+}
+.ColorWheel_module_discFill {
+  position: absolute;
+  inset: 0;
+}
+.ColorWheel_module_currentHex,
+.ColorWheel_module_currentHexInput {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  font-family:
+    "SF Mono",
+    "IBM Plex Mono",
+    "JetBrains Mono",
+    Consolas,
+    "Liberation Mono",
+    monospace;
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.ColorWheel_module_currentHex {
+  display: grid;
+  place-items: center;
+  cursor: text;
+  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.ColorWheel_module_currentHex.ColorWheel_module_copied {
+  transform: scale(1.06);
+}
+.ColorWheel_module_currentHexInput {
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+}
+.ColorWheel_module_currentHexInput::selection {
+  background: rgba(255, 255, 255, 0.35);
+}
+.ColorWheel_module_discBadge {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: none;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  z-index: 3;
+  transition: transform 0.15s ease, filter 0.15s ease;
+}
+.ColorWheel_module_discBadge:hover {
+  filter: brightness(1.15);
+}
+.ColorWheel_module_discBadge svg {
+  width: 15px;
+  height: 15px;
+}
+.ColorWheel_module_discBadgeTop {
+  transform: translate(-50%, calc(-50% - 46px));
+}
+.ColorWheel_module_discBadgeTop:active {
+  transform: translate(-50%, calc(-50% - 46px)) scale(0.92);
+}
+.ColorWheel_module_discBadgeTop.ColorWheel_module_pulse {
+  animation: ColorWheel_module_badgePulseTop 0.4s ease;
+}
+.ColorWheel_module_discBadgeBottom {
+  transform: translate(-50%, calc(-50% + 46px));
+}
+.ColorWheel_module_discBadgeBottom:active {
+  transform: translate(-50%, calc(-50% + 46px)) scale(0.92);
+}
+@keyframes ColorWheel_module_badgePulseTop {
+  0% {
+    transform: translate(-50%, calc(-50% - 46px)) scale(1);
+  }
+  40% {
+    transform: translate(-50%, calc(-50% - 46px)) scale(1.28);
+  }
+  100% {
+    transform: translate(-50%, calc(-50% - 46px)) scale(1);
+  }
+}
 /*# sourceMappingURL=index.css.map */