hakumi_components 0.1.3.pre

data/app/javascript/stylesheets/components/_color_picker.scss

@@ -0,0 +1,387 @@
+// Hakumi Color Picker Component
+@use '../variables' as *;
+
+.hakumi-color-picker {
+    --hakumi-color-picker-bg: var(--color-bg-container);
+    --hakumi-color-picker-border: var(--color-border);
+    --hakumi-color-picker-text: var(--color-text);
+    --hakumi-color-picker-muted: var(--color-text-tertiary);
+    --hakumi-color-picker-panel-bg: var(--color-bg-elevated);
+    --hakumi-color-picker-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);
+    --hakumi-color-picker-primary: var(--color-primary);
+    --hakumi-color-picker-primary-hover: var(--color-primary-hover);
+
+    display: inline-block;
+    position: relative;
+    color: var(--hakumi-color-picker-text);
+    font-size: 14px;
+    line-height: 1.5715;
+
+    &-trigger {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        outline: none;
+        user-select: none;
+
+        &:focus-visible {
+            outline: 2px solid var(--hakumi-color-picker-primary);
+            outline-offset: 2px;
+        }
+    }
+
+    &-color-block {
+        position: relative;
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+        border: 1px solid var(--hakumi-color-picker-border);
+        background-color: #1677ff;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        overflow: hidden;
+
+        background-image:
+            linear-gradient(45deg, #d3d3d3 25%, transparent 25%),
+            linear-gradient(-45deg, #d3d3d3 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, #d3d3d3 75%),
+            linear-gradient(-45deg, transparent 75%, #d3d3d3 75%);
+        background-size: 8px 8px;
+        background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+
+        &:hover {
+            border-color: var(--hakumi-color-picker-primary-hover);
+        }
+    }
+
+    &-trigger-sm &-color-block {
+        width: 24px;
+        height: 24px;
+    }
+
+    &-trigger-lg &-color-block {
+        width: 40px;
+        height: 40px;
+    }
+
+    &-clear-btn {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        background: rgba(0, 0, 0, 0.6);
+        border: none;
+        border-radius: 0 3px 0 4px;
+        cursor: pointer;
+        padding: 0;
+        z-index: 1;
+
+        svg {
+            fill: white;
+        }
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.8);
+        }
+    }
+
+    &-color-block:hover &-clear-btn,
+    &-trigger:hover &-clear-btn {
+        display: flex;
+    }
+
+    &-text {
+        font-size: 14px;
+        color: var(--hakumi-color-picker-text);
+        user-select: none;
+    }
+
+    &-panel {
+        position: absolute;
+        top: calc(100% + 8px);
+        left: 0;
+        width: 280px;
+        padding: 12px;
+        border-radius: 8px;
+        background: var(--hakumi-color-picker-panel-bg);
+        box-shadow: var(--hakumi-color-picker-shadow);
+        border: 1px solid var(--hakumi-color-picker-border);
+        z-index: 1050;
+        transition: opacity 0.2s ease;
+
+        &-hidden {
+            display: none;
+        }
+    }
+
+    &-panel-select {
+        margin-bottom: 12px;
+    }
+
+    &-saturation {
+        position: relative;
+        width: 100%;
+        height: 180px;
+        border-radius: 4px;
+        background: red;
+        cursor: crosshair;
+        user-select: none;
+
+        background-image: linear-gradient(to right, #fff, transparent);
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to top, #000, transparent);
+            pointer-events: none;
+        }
+    }
+
+    &-saturation-handler {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    &-saturation-handler-circle {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 2px solid #fff;
+        border-radius: 50%;
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+    }
+
+    &-slider-container {
+        margin-bottom: 12px;
+    }
+
+    &-slider {
+        position: relative;
+        width: 100%;
+        height: 12px;
+        border-radius: 6px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    &-slider-hue {
+        background: linear-gradient(
+            to right,
+            #ff0000 0%,
+            #ffff00 17%,
+            #00ff00 33%,
+            #00ffff 50%,
+            #0000ff 67%,
+            #ff00ff 83%,
+            #ff0000 100%
+        );
+    }
+
+    &-slider-alpha {
+        background:
+            linear-gradient(to right, transparent, #1677ff),
+            conic-gradient(#d3d3d3 0.25turn, #fff 0turn 0.5turn, #d3d3d3 0turn 0.75turn, #fff 0turn 1turn);
+        background-size: 100%, 8px 8px;
+        border: 1px solid var(--hakumi-color-picker-border);
+    }
+
+    &-slider-handler {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 16px;
+        height: 16px;
+        border: 2px solid #fff;
+        border-radius: 50%;
+        background: #fff;
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+        transform: translate(-50%, -50%);
+        cursor: grab;
+        z-index: 1;
+
+        &:active {
+            cursor: grabbing;
+        }
+    }
+
+    &-input-container {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 12px;
+    }
+
+    &-color-input {
+        flex: 1;
+
+        &-full {
+            flex: 1;
+            max-width: 100%;
+        }
+    }
+
+    &-input-field {
+        width: 100%;
+        padding: 4px 8px;
+        border-radius: 4px;
+        border: 1px solid var(--hakumi-color-picker-border);
+        background: var(--hakumi-color-picker-bg);
+        color: var(--hakumi-color-picker-text);
+        font-size: 12px;
+        transition: all 0.2s ease;
+
+        &:focus {
+            outline: none;
+            border-color: var(--hakumi-color-picker-primary);
+            box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+        }
+
+        &.hakumi-color-picker-input-invalid {
+            border-color: var(--color-error);
+        }
+    }
+
+    &-format-select {
+        flex-shrink: 0;
+    }
+
+    &-format-selector {
+        padding: 4px 8px;
+        border-radius: 4px;
+        border: 1px solid var(--hakumi-color-picker-border);
+        background: var(--hakumi-color-picker-bg);
+        color: var(--hakumi-color-picker-text);
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:focus {
+            outline: none;
+            border-color: var(--hakumi-color-picker-primary);
+            box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+        }
+
+        &:hover {
+            border-color: var(--hakumi-color-picker-primary-hover);
+        }
+    }
+
+    &-presets {
+        border-top: 1px solid var(--hakumi-color-picker-border);
+        padding-top: 12px;
+    }
+
+    &-preset-group {
+        &:not(:last-child) {
+            margin-bottom: 12px;
+        }
+    }
+
+    &-preset-label {
+        font-size: 12px;
+        color: var(--hakumi-color-picker-muted);
+        margin-bottom: 8px;
+        font-weight: 500;
+    }
+
+    &-preset-colors {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
+        gap: 8px;
+    }
+
+    &-preset-color {
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        cursor: pointer;
+        border: 1px solid var(--hakumi-color-picker-border);
+        transition: all 0.2s ease;
+        position: relative;
+
+        background-image:
+            linear-gradient(45deg, #d3d3d3 25%, transparent 25%),
+            linear-gradient(-45deg, #d3d3d3 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, #d3d3d3 75%),
+            linear-gradient(-45deg, transparent 75%, #d3d3d3 75%);
+        background-size: 4px 4px;
+        background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
+
+        &:hover {
+            transform: scale(1.15);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            z-index: 1;
+        }
+
+        &:active {
+            transform: scale(1.05);
+        }
+    }
+
+    &-open &-trigger &-color-block {
+        border-color: var(--hakumi-color-picker-primary);
+        box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+
+        &,
+        & * {
+            cursor: not-allowed !important;
+            pointer-events: none;
+        }
+    }
+
+    &-hover-trigger:not(&-disabled):hover &-trigger &-color-block {
+        border-color: var(--hakumi-color-picker-primary-hover);
+    }
+
+    &[data-placement="top_left"] &-panel,
+    &[data-placement="top"] &-panel {
+        bottom: calc(100% + 8px);
+        top: auto;
+    }
+
+    &[data-placement="top_right"] &-panel {
+        bottom: calc(100% + 8px);
+        top: auto;
+        right: 0;
+        left: auto;
+    }
+
+    &[data-placement="bottom_right"] &-panel {
+        right: 0;
+        left: auto;
+    }
+}
+
+[data-theme='dark'] .hakumi-color-picker {
+    --hakumi-color-picker-bg: var(--color-bg-container);
+    --hakumi-color-picker-border: var(--color-border-secondary);
+    --hakumi-color-picker-text: var(--color-text);
+    --hakumi-color-picker-muted: var(--color-text-quaternary);
+    --hakumi-color-picker-panel-bg: var(--color-bg-elevated);
+    --hakumi-color-picker-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.35),
+        0 3px 6px -4px rgba(0, 0, 0, 0.45),
+        0 9px 28px 8px rgba(0, 0, 0, 0.25);
+}

data/app/javascript/stylesheets/components/_container.scss

@@ -0,0 +1,45 @@
+// Hakumi Container Component
+@use '../variables' as *;
+
+.hakumi-container {
+  box-sizing: border-box;
+  width: min(var(--hakumi-container-max-width, 100%), 100%);
+  margin-left: 0;
+  margin-right: 0;
+
+  &-centered {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &-padded {
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+
+  &-full-height {
+    min-height: 100vh;
+  }
+
+  &--narrow {
+    --hakumi-container-max-width: 640px;
+  }
+
+  &--default {
+    --hakumi-container-max-width: 960px;
+  }
+
+  &--wide {
+    --hakumi-container-max-width: 1200px;
+  }
+
+  &--xl {
+    --hakumi-container-max-width: 1600px;
+  }
+
+  &--fluid {
+    width: 100%;
+    --hakumi-container-max-width: 100%;
+  }
+}