@fest-lib/veela 0.1.1

package/src/scss/core/misc/_icons.scss

@@ -0,0 +1,109 @@
+@use "sass:map";
+@use "./functions" as config;
+
+// ============================================================================
+// ICON UTILITIES - Replace emoji with ui-icon components
+// ============================================================================
+
+/// Create a ui-icon element with specified icon
+/// @param {String} $icon - Phosphor icon name (e.g., "pencil", "check", "x")
+/// @param {String} $size - Icon size class (xs, sm, md, lg, xl)
+/// @param {String} $style - Icon style (duotone, fill, regular, thin, light, bold)
+/// @return {String} HTML for ui-icon element
+@function icon($icon, $size: "md", $style: "duotone") {
+    @return '<ui-icon icon="#{$icon}" icon-style="#{$style}" class="icon-#{$size}"></ui-icon>';
+}
+
+/// Common icon mappings for emoji replacement
+/// Maps emoji to appropriate Phosphor icon names
+$emoji-to-icon: (
+    "📝": "pencil",
+    "✏️": "pencil-simple",
+    "⚡": "lightning",
+    "⚙️": "gear",
+    "🖼️": "image",
+    "📄": "file-text",
+    "📋": "clipboard-text",
+    "✅": "check",
+    "⚠️": "warning",
+    "❌": "x",
+    "🔄": "arrow-clockwise",
+    "📤": "upload",
+    "📥": "download",
+    "💾": "floppy-disk",
+    "🗑️": "trash",
+    "➕": "plus",
+    "➖": "minus",
+    "🔍": "magnifying-glass",
+    "🎯": "target",
+    "🔧": "wrench",
+    "📁": "folder",
+    "🗂️": "folders",
+    "🎪": "tent",
+    "📊": "chart-bar",
+    "📈": "trend-up",
+    "📉": "trend-down",
+    "📌": "push-pin",
+    "🔗": "link",
+    "🔔": "bell",
+    "🌙": "moon",
+    "☀️": "sun",
+    "🎛️": "sliders",
+    "🔒": "lock",
+    "🔓": "lock-open",
+    "🎨": "paint-brush",
+    "💡": "lightbulb"
+);
+
+/// Get icon name from emoji
+/// @param {String} $emoji - Emoji character
+/// @return {String} Phosphor icon name
+@function emoji-to-icon($emoji) {
+    @return map.get($emoji-to-icon, $emoji);
+}
+
+/// Create icon from emoji (convenience function)
+/// @param {String} $emoji - Emoji to convert
+/// @param {String} $size - Icon size
+/// @param {String} $style - Icon style
+/// @return {String} HTML for ui-icon element
+@function icon-from-emoji($emoji, $size: "md", $style: "duotone") {
+    $icon-name: emoji-to-icon($emoji);
+    @if $icon-name == null {
+        @warn "No icon mapping found for emoji: #{$emoji}";
+        @return $emoji; // Fallback to original emoji
+    }
+    @return icon($icon-name, $size, $style);
+}
+
+// ============================================================================
+// ICON COMPONENT STYLES
+// ============================================================================
+
+@layer components {
+    // Ensure ui-icon elements are properly styled
+    ui-icon {
+        --icon-color: currentColor;
+        --icon-size: 1rem;
+        --icon-padding: 0.125rem;
+
+        display: inline-grid;
+        place-content: center;
+        place-items: center;
+        color: var(--icon-color);
+        aspect-ratio: 1;
+
+        &[class*="icon-"] {
+            // Size classes are handled by utilities
+        }
+
+        // Ensure icons don't interfere with text flow
+        vertical-align: middle;
+        margin-inline-end: 0.125rem;
+
+        // Last icon in text shouldn't have margin
+        &:last-child {
+            margin-inline-end: 0;
+        }
+    }
+}

package/src/scss/core/misc/_index.scss

@@ -0,0 +1,6 @@
+@forward "../interact/draggable";
+@forward "../interact/resizable";
+@forward "../interact/position";
+@forward "./utilities";
+@forward "./icons";
+@forward "../interact/viewport";

package/src/scss/core/misc/_layout.scss

@@ -0,0 +1,49 @@
+@mixin border-radius($radius) {
+    border-radius: $radius;
+}
+
+@mixin border($width, $style, $color) {
+    border: $width $style $color;
+}
+
+@mixin container-layout($name, $type: normal) {
+    container-name: #{$name};
+    container-type: #{$type};
+}
+
+@mixin grid() {
+    display: grid;
+}
+
+@mixin place($justify: center, $align: center) {
+    justify-items: $justify;
+    align-items: $align;
+}
+
+@mixin display($display, $direction: row, $justify: flex-start, $align: stretch) {
+    display: $display;
+    @if $display == flex {
+        flex-direction: $direction;
+        justify-content: $justify;
+        align-items: $align;
+    }
+}
+
+@mixin flex($direction: row, $justify: flex-start, $align: stretch) {
+    display: flex;
+    flex-direction: $direction;
+    justify-content: $justify;
+    align-items: $align;
+}
+
+@mixin text($size, $weight: 400, $color: inherit) {
+    font-size: $size;
+    font-weight: $weight;
+    color: $color;
+}
+
+@mixin text-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}