ywana-core8 0.1.75 → 0.1.76

package/src/html/color.css

@@ -1,18 +1,447 @@
 .color-field {
     flex: 1;
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
+    gap: 0.5rem;
     padding: .5rem;
-    overflow: hidden;
+    overflow: visible;
+    max-height: none;
+    min-height: auto;
+    position: relative;
+}
+
+.color-field__label {
+    color: var(--primary-color);
+    font-size: .9rem;
+    font-weight: normal;
+    pointer-events: none;
+    margin-bottom: 0.25rem;
+    display: block;
+}
+
+/* Enhanced Color Field Styles - New functionality while maintaining compatibility */
+
+/* Size variants */
+.color-field--small {
+    padding: 0.25rem;
+}
+
+.color-field--small .color-field__label {
+    font-size: 0.8rem;
+}
+
+.color-field--medium {
+    padding: 0.5rem;
+}
+
+.color-field--large {
+    padding: 0.75rem;
+}
+
+.color-field--large .color-field__label {
+    font-size: 1rem;
+}
+
+/* Variant styles */
+.color-field--outlined {
+    border: 1px solid var(--divider-color, #e0e0e0);
+    border-radius: 4px;
+    background-color: transparent;
+}
+
+.color-field--filled {
+    background-color: var(--background-color-light, #f5f5f5);
+    border-radius: 4px 4px 0 0;
+    border-bottom: 1px solid var(--divider-color, #e0e0e0);
+}
+
+/* State styles */
+.color-field--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.color-field--focused {
+    outline: 2px solid var(--primary-color, #2196f3);
+    outline-offset: 2px;
+}
+
+.color-field--error,
+.color-field--invalid {
+    border-color: var(--error-color, #f44336);
+}
+
+.color-field--error .color-field__label,
+.color-field--invalid .color-field__label {
+    color: var(--error-color, #f44336);
+}
+
+.color-field--required .color-field__required {
+    color: var(--error-color, #f44336);
+    margin-left: 0.25rem;
+}
+
+/* Input container */
+.color-field__input-container {
     display: flex;
-    max-height: 3.5rem;
-    min-height: 3.5;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+}
+
+/* Color preview */
+.color-field__preview {
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--divider-color, #e0e0e0);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-size: 8px 8px;
+    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+}
+
+.color-field__preview .color-field__no-color {
+    color: var(--text-color-light, #666);
+}
+
+/* Main color input */
+.color-field__input {
+    flex: 1;
+    height: 2rem;
+    border: 1px solid var(--divider-color, #e0e0e0);
+    border-radius: 4px;
+    background: none;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 0.2s ease;
+}
+
+.color-field__input:focus {
+    border-color: var(--primary-color, #2196f3);
+}
+
+.color-field__input:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+/* Clear button */
+.color-field__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: none;
+    background: none;
+    border-radius: 50%;
+    cursor: pointer;
+    color: var(--text-color-light, #666);
+    transition: background-color 0.2s ease;
+}
+
+.color-field__clear:hover:not(:disabled) {
+    background-color: var(--hover-color, rgba(0, 0, 0, 0.04));
+}
+
+.color-field__clear:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+/* Color value display */
+.color-field__value {
+    margin-top: 0.25rem;
+}
+
+/* Preset colors */
+.color-field__presets {
+    margin-top: 0.5rem;
+}
+
+.color-field__presets-label {
+    margin-bottom: 0.25rem;
+    display: block;
+}
+
+.color-field__presets-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(1.5rem, 1fr));
+    gap: 0.25rem;
+    max-width: 12rem;
+}
+
+.color-field__preset {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 1px solid var(--divider-color, #e0e0e0);
+    border-radius: 2px;
+    cursor: pointer;
+    transition: transform 0.1s ease, box-shadow 0.2s ease;
+    background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-size: 4px 4px;
+    background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
+}
+
+.color-field__preset:hover:not(:disabled) {
+    transform: scale(1.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.color-field__preset:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+/* Helper text */
+.color-field__helper {
+    margin-top: 0.25rem;
+}
+
+.color-field__helper--error {
+    color: var(--error-color, #f44336);
+}
+
+/* Color Picker Component */
+.color-picker {
+    position: relative;
+    display: inline-block;
+}
+
+.color-picker__trigger {
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--divider-color, #e0e0e0);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: transform 0.1s ease, box-shadow 0.2s ease;
+    background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-size: 8px 8px;
+    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+}
+
+.color-picker__trigger:hover:not(:disabled) {
+    transform: scale(1.05);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.color-picker__trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.color-picker__dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    background: white;
+    border: 1px solid var(--divider-color, #e0e0e0);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 0.5rem;
+    margin-top: 0.25rem;
+}
+
+.color-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 0.25rem;
+    width: 8rem;
+}
+
+.color-picker__option {
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid var(--divider-color, #e0e0e0);
+    border-radius: 2px;
+    cursor: pointer;
+    transition: transform 0.1s ease;
+}
+
+.color-picker__option:hover {
+    transform: scale(1.2);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .color-field {
+        padding: 0.25rem;
+    }
+
+    .color-field__preview {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+    .color-field__input {
+        height: 1.5rem;
+    }
+
+    .color-field__presets-grid {
+        grid-template-columns: repeat(auto-fill, minmax(1.25rem, 1fr));
+        max-width: 10rem;
+    }
+
+    .color-field__preset {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+
+    .color-picker__trigger {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+    .color-picker__grid {
+        grid-template-columns: repeat(4, 1fr);
+        width: 6rem;
+    }
+}
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+    .color-field__label {
+        color: var(--primary-color-dark, #64b5f6);
+    }
+
+    .color-field--outlined {
+        border-color: var(--divider-color-dark, #616161);
+    }
+
+    .color-field--filled {
+        background-color: var(--background-color-light-dark, #424242);
+        border-bottom-color: var(--divider-color-dark, #616161);
+    }
+
+    .color-field__preview,
+    .color-field__preset,
+    .color-picker__trigger {
+        border-color: var(--divider-color-dark, #616161);
+    }
+
+    .color-field__input {
+        border-color: var(--divider-color-dark, #616161);
+        background-color: var(--background-color-dark, #303030);
+        color: var(--text-color-dark, #ffffff);
+    }
+
+    .color-field__input:focus {
+        border-color: var(--primary-color-dark, #64b5f6);
+    }
+
+    .color-field__clear {
+        color: var(--text-color-light-dark, #cccccc);
+    }
+
+    .color-field__clear:hover:not(:disabled) {
+        background-color: var(--hover-color-dark, rgba(255, 255, 255, 0.08));
+    }
+
+    .color-picker__dropdown {
+        background-color: var(--background-color-dark, #303030);
+        border-color: var(--divider-color-dark, #616161);
+    }
+
+    .color-picker__option {
+        border-color: var(--divider-color-dark, #616161);
+    }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+    .color-field--focused {
+        outline-width: 3px;
+    }
+
+    .color-field__preview,
+    .color-field__preset,
+    .color-picker__trigger,
+    .color-field__input {
+        border-width: 2px;
+    }
+
+    .color-field__input:focus {
+        outline: 2px solid currentColor;
+    }
 }
 
-.color-field>label { 
-    flex:1;
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .color-field__input,
+    .color-field__clear,
+    .color-field__preset,
+    .color-picker__trigger,
+    .color-picker__option {
+        transition: none;
+    }
+
+    .color-field__preset:hover:not(:disabled),
+    .color-picker__trigger:hover:not(:disabled) {
+        transform: none;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .color-field {
+        break-inside: avoid;
+        border: 1px solid black !important;
+        background: white !important;
+    }
+
+    .color-field__preview,
+    .color-field__preset,
+    .color-picker__trigger {
+        border: 1px solid black !important;
+    }
+
+    .color-field__clear,
+    .color-picker__dropdown {
+        display: none !important;
+    }
+
+    .color-field__input {
+        border: 1px solid black !important;
+        background: white !important;
+        color: black !important;
+    }
+}
+
+/* Backward compatibility - maintain original styles */
+.color-field>label {
+    flex: 1;
     color: var(--primary-color);
     font-size: .9rem;
     font-weight: normal;
     pointer-events: none;
+}
+
+/* Legacy support for old structure */
+.color-field.legacy {
+    flex-direction: row;
+    align-items: flex-end;
+    max-height: 3.5rem;
+    min-height: 3.5rem;
+}
+
+.color-field.legacy .color-field__label {
+    flex: 1;
+    margin-bottom: 0;
 }