@onetype/framework 2.0.21 → 2.0.24

package/lib/items/elements/form/button/styles/variants.css

@@ -0,0 +1,421 @@
+/* ============================================
+   SOLID VARIANTS - Bold, confident, primary actions
+   ============================================ */
+
+/* Brand */
+.e-64e877b > .holder[variant*="brand"]
+{
+	background: var(--ot-brand);
+	border-color: var(--ot-brand);
+	color: white;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.1),
+		0 2px 8px var(--ot-brand-opacity);
+}
+
+.e-64e877b > .holder[variant*="brand"] > .content > i,
+.e-64e877b > .holder[variant*="brand"] > .spinner > i
+{
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="brand"]:hover
+{
+	background: var(--ot-brand-hover);
+	border-color: var(--ot-brand-hover);
+	box-shadow:
+		0 4px 12px var(--ot-brand-opacity),
+		0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.e-64e877b > .holder[variant*="brand"]:focus-visible
+{
+	box-shadow:
+		0 0 0 2px var(--ot-bg-1),
+		0 0 0 4px var(--ot-brand);
+}
+
+/* Blue */
+.e-64e877b > .holder[variant*="blue"]:not([variant*="soft-blue"]):not([variant*="outline-blue"])
+{
+	background: var(--ot-blue);
+	border-color: var(--ot-blue);
+	color: white;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.1),
+		0 2px 8px var(--ot-blue-opacity);
+}
+
+.e-64e877b > .holder[variant*="blue"]:not([variant*="soft-blue"]):not([variant*="outline-blue"]) > .content > i,
+.e-64e877b > .holder[variant*="blue"]:not([variant*="soft-blue"]):not([variant*="outline-blue"]) > .spinner > i
+{
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="blue"]:not([variant*="soft-blue"]):not([variant*="outline-blue"]):hover
+{
+	background: var(--ot-blue-hover);
+	border-color: var(--ot-blue-hover);
+	box-shadow:
+		0 4px 12px var(--ot-blue-opacity),
+		0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.e-64e877b > .holder[variant*="blue"]:focus-visible
+{
+	box-shadow:
+		0 0 0 2px var(--ot-bg-1),
+		0 0 0 4px var(--ot-blue);
+}
+
+/* Red */
+.e-64e877b > .holder[variant*="red"]:not([variant*="soft-red"]):not([variant*="outline-red"])
+{
+	background: var(--ot-red);
+	border-color: var(--ot-red);
+	color: white;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.1),
+		0 2px 8px var(--ot-red-opacity);
+}
+
+.e-64e877b > .holder[variant*="red"]:not([variant*="soft-red"]):not([variant*="outline-red"]) > .content > i,
+.e-64e877b > .holder[variant*="red"]:not([variant*="soft-red"]):not([variant*="outline-red"]) > .spinner > i
+{
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="red"]:not([variant*="soft-red"]):not([variant*="outline-red"]):hover
+{
+	background: var(--ot-red-hover);
+	border-color: var(--ot-red-hover);
+	box-shadow:
+		0 4px 12px var(--ot-red-opacity),
+		0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.e-64e877b > .holder[variant*="red"]:focus-visible
+{
+	box-shadow:
+		0 0 0 2px var(--ot-bg-1),
+		0 0 0 4px var(--ot-red);
+}
+
+/* Orange */
+.e-64e877b > .holder[variant*="orange"]:not([variant*="soft-orange"]):not([variant*="outline-orange"])
+{
+	background: var(--ot-orange);
+	border-color: var(--ot-orange);
+	color: white;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.1),
+		0 2px 8px var(--ot-orange-opacity);
+}
+
+.e-64e877b > .holder[variant*="orange"]:not([variant*="soft-orange"]):not([variant*="outline-orange"]) > .content > i,
+.e-64e877b > .holder[variant*="orange"]:not([variant*="soft-orange"]):not([variant*="outline-orange"]) > .spinner > i
+{
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="orange"]:not([variant*="soft-orange"]):not([variant*="outline-orange"]):hover
+{
+	background: var(--ot-orange-hover);
+	border-color: var(--ot-orange-hover);
+	box-shadow:
+		0 4px 12px var(--ot-orange-opacity),
+		0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.e-64e877b > .holder[variant*="orange"]:focus-visible
+{
+	box-shadow:
+		0 0 0 2px var(--ot-bg-1),
+		0 0 0 4px var(--ot-orange);
+}
+
+/* Green */
+.e-64e877b > .holder[variant*="green"]:not([variant*="soft-green"]):not([variant*="outline-green"])
+{
+	background: var(--ot-green);
+	border-color: var(--ot-green);
+	color: white;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.1),
+		0 2px 8px var(--ot-green-opacity);
+}
+
+.e-64e877b > .holder[variant*="green"]:not([variant*="soft-green"]):not([variant*="outline-green"]) > .content > i,
+.e-64e877b > .holder[variant*="green"]:not([variant*="soft-green"]):not([variant*="outline-green"]) > .spinner > i
+{
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="green"]:not([variant*="soft-green"]):not([variant*="outline-green"]):hover
+{
+	background: var(--ot-green-hover);
+	border-color: var(--ot-green-hover);
+	box-shadow:
+		0 4px 12px var(--ot-green-opacity),
+		0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.e-64e877b > .holder[variant*="green"]:focus-visible
+{
+	box-shadow:
+		0 0 0 2px var(--ot-bg-1),
+		0 0 0 4px var(--ot-green);
+}
+
+
+/* ============================================
+   SOFT VARIANTS - Subtle, secondary actions
+   ============================================ */
+
+.e-64e877b > .holder[variant*="soft-brand"]
+{
+	background: var(--ot-brand-opacity);
+	border-color: transparent;
+	color: var(--ot-brand);
+}
+
+.e-64e877b > .holder[variant*="soft-brand"]:hover
+{
+	background: var(--ot-brand);
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="soft-blue"]
+{
+	background: var(--ot-blue-opacity);
+	border-color: transparent;
+	color: var(--ot-blue);
+}
+
+.e-64e877b > .holder[variant*="soft-blue"]:hover
+{
+	background: var(--ot-blue);
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="soft-red"]
+{
+	background: var(--ot-red-opacity);
+	border-color: transparent;
+	color: var(--ot-red);
+}
+
+.e-64e877b > .holder[variant*="soft-red"]:hover
+{
+	background: var(--ot-red);
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="soft-orange"]
+{
+	background: var(--ot-orange-opacity);
+	border-color: transparent;
+	color: var(--ot-orange);
+}
+
+.e-64e877b > .holder[variant*="soft-orange"]:hover
+{
+	background: var(--ot-orange);
+	color: white;
+}
+
+.e-64e877b > .holder[variant*="soft-green"]
+{
+	background: var(--ot-green-opacity);
+	border-color: transparent;
+	color: var(--ot-green);
+}
+
+.e-64e877b > .holder[variant*="soft-green"]:hover
+{
+	background: var(--ot-green);
+	color: white;
+}
+
+
+/* ============================================
+   OUTLINE VARIANTS - Bordered, tertiary actions
+   ============================================ */
+
+.e-64e877b > .holder[variant*="outline-brand"]
+{
+	background: transparent;
+	border-color: var(--ot-brand);
+	color: var(--ot-brand);
+}
+
+.e-64e877b > .holder[variant*="outline-brand"]:hover
+{
+	background: var(--ot-brand-opacity);
+}
+
+.e-64e877b > .holder[variant*="outline-blue"]
+{
+	background: transparent;
+	border-color: var(--ot-blue);
+	color: var(--ot-blue);
+}
+
+.e-64e877b > .holder[variant*="outline-blue"]:hover
+{
+	background: var(--ot-blue-opacity);
+}
+
+.e-64e877b > .holder[variant*="outline-red"]
+{
+	background: transparent;
+	border-color: var(--ot-red);
+	color: var(--ot-red);
+}
+
+.e-64e877b > .holder[variant*="outline-red"]:hover
+{
+	background: var(--ot-red-opacity);
+}
+
+.e-64e877b > .holder[variant*="outline-orange"]
+{
+	background: transparent;
+	border-color: var(--ot-orange);
+	color: var(--ot-orange);
+}
+
+.e-64e877b > .holder[variant*="outline-orange"]:hover
+{
+	background: var(--ot-orange-opacity);
+}
+
+.e-64e877b > .holder[variant*="outline-green"]
+{
+	background: transparent;
+	border-color: var(--ot-green);
+	color: var(--ot-green);
+}
+
+.e-64e877b > .holder[variant*="outline-green"]:hover
+{
+	background: var(--ot-green-opacity);
+}
+
+
+/* ============================================
+   BACKGROUND VARIANTS - Neutral surface buttons
+   ============================================ */
+
+.e-64e877b > .holder[variant*="bg-1"]
+{
+	background: var(--ot-bg-1);
+	border-color: var(--ot-bg-1-border);
+	color: var(--ot-text-1);
+}
+
+.e-64e877b > .holder[variant*="bg-1"]:hover
+{
+	background: var(--ot-bg-1-hover);
+	border-color: var(--ot-bg-2-border);
+}
+
+.e-64e877b > .holder[variant*="bg-2"]
+{
+	background: var(--ot-bg-2);
+	border-color: var(--ot-bg-2-border);
+	color: var(--ot-text-1);
+}
+
+.e-64e877b > .holder[variant*="bg-2"]:hover
+{
+	background: var(--ot-bg-2-hover);
+	border-color: var(--ot-bg-3-border);
+}
+
+.e-64e877b > .holder[variant*="bg-3"]
+{
+	background: var(--ot-bg-3);
+	border-color: var(--ot-bg-3-border);
+	color: var(--ot-text-1);
+}
+
+.e-64e877b > .holder[variant*="bg-3"]:hover
+{
+	background: var(--ot-bg-3-hover);
+	border-color: var(--ot-bg-4-border);
+}
+
+.e-64e877b > .holder[variant*="bg-4"]
+{
+	background: var(--ot-bg-4);
+	border-color: var(--ot-bg-4-border);
+	color: var(--ot-text-1);
+}
+
+.e-64e877b > .holder[variant*="bg-4"]:hover
+{
+	background: var(--ot-bg-4-hover);
+}
+
+
+/* ============================================
+   SPECIAL VARIANTS
+   ============================================ */
+
+/* Ghost - minimal, text-like */
+.e-64e877b > .holder[variant*="ghost"]
+{
+	background: transparent;
+	border-color: transparent;
+	color: var(--ot-text-2);
+}
+
+.e-64e877b > .holder[variant*="ghost"]:hover
+{
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
+}
+
+/* Border - neutral outlined */
+.e-64e877b > .holder[variant*="border"]
+{
+	background: transparent;
+	border-color: var(--ot-bg-1-border);
+	color: var(--ot-text-1);
+}
+
+.e-64e877b > .holder[variant*="border"]:hover
+{
+	background: var(--ot-bg-2);
+	border-color: var(--ot-bg-3-border);
+}
+
+/* Transparent - no background, subtle hover */
+.e-64e877b > .holder[variant*="transparent"]
+{
+	background: transparent;
+	border-color: transparent;
+	color: var(--ot-text-1);
+}
+
+.e-64e877b > .holder[variant*="transparent"]:hover
+{
+	background: var(--ot-bg-2-opacity);
+}
+
+/* Glass - frosted glass effect */
+.e-64e877b > .holder[variant*="glass"]
+{
+	background: var(--ot-bg-1-opacity);
+	border-color: var(--ot-bg-2-border);
+	color: var(--ot-text-1);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+}
+
+.e-64e877b > .holder[variant*="glass"]:hover
+{
+	background: var(--ot-bg-2-opacity);
+	border-color: var(--ot-bg-3-border);
+}

package/lib/items/elements/form/checkbox/checkbox.js

@@ -0,0 +1,58 @@
+onetype.AddonReady('elements', (elements) =>
+{
+    elements.ItemAdd({
+        id: 'form-checkbox',
+        icon: 'check_box',
+        name: 'Checkbox',
+        description: 'Checkbox input with custom styling, indeterminate state support, and variant options for different UI themes.',
+        category: 'Form',
+        author: 'OneType',
+        config: {
+            name: {
+                type: 'string'
+            },
+            value: {
+                type: 'string'
+            },
+            checked: {
+                type: 'boolean'
+            },
+            disabled: {
+                type: 'boolean'
+            },
+            variant: {
+                type: 'array',
+                value: ['bg-1'],
+                options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
+            },
+            size: {
+                type: 'string',
+                value: 'm',
+                options: ['s', 'm', 'l']
+            },
+            onChange: {
+                type: 'function'
+            },
+            onClick: {
+                type: 'function'
+            }
+        },
+        render: function()
+        {
+            return `
+                <div class="holder" :variant="variant.join(' ')" :size="size">
+                    <input
+                        type="checkbox"
+                        :name="name"
+                        :value="value"
+                        :checked="checked"
+                        :disabled="disabled"
+                        ot-change="onChange"
+                        ot-click="onClick"
+                    />
+                    <span class="checkbox-mark"></span>
+                </div>
+            `;
+        }
+	});
+});

package/lib/items/elements/form/checkbox/styles/base.css

@@ -0,0 +1,52 @@
+.e-f249baa > .holder
+{
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.e-f249baa input[type="checkbox"]
+{
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.e-f249baa .checkbox-mark
+{
+    display: block;
+    border-radius: var(--ot-radius-s);
+    border: 1px solid;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.e-f249baa .checkbox-mark::after
+{
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    width: 4px;
+    height: 8px;
+    border: solid;
+    border-width: 0 2px 2px 0;
+    transform: translate(-50%, -60%) rotate(45deg) scale(0);
+    transition: all 0.2s ease;
+}
+
+.e-f249baa input[type="checkbox"]:checked ~ .checkbox-mark::after
+{
+    transform: translate(-50%, -60%) rotate(45deg) scale(1);
+}
+
+.e-f249baa input[type="checkbox"]:disabled ~ .checkbox-mark
+{
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/lib/items/elements/form/checkbox/styles/sizes.css

@@ -0,0 +1,39 @@
+/* Sizes */
+.e-f249baa > .holder[size="s"] .checkbox-mark
+{
+    width: 16px;
+    height: 16px;
+}
+
+.e-f249baa > .holder[size="s"] .checkbox-mark::after
+{
+    width: 3px;
+    height: 6px;
+    border-width: 0 1.5px 1.5px 0;
+}
+
+.e-f249baa > .holder[size="m"] .checkbox-mark
+{
+    width: 20px;
+    height: 20px;
+}
+
+.e-f249baa > .holder[size="m"] .checkbox-mark::after
+{
+    width: 4px;
+    height: 8px;
+    border-width: 0 2px 2px 0;
+}
+
+.e-f249baa > .holder[size="l"] .checkbox-mark
+{
+    width: 24px;
+    height: 24px;
+}
+
+.e-f249baa > .holder[size="l"] .checkbox-mark::after
+{
+    width: 5px;
+    height: 10px;
+    border-width: 0 2.5px 2.5px 0;
+}

package/lib/items/elements/form/checkbox/styles/variants.css

@@ -0,0 +1,121 @@
+/* Variants */
+.e-f249baa > .holder[variant="transparent"] .checkbox-mark
+{
+    background: transparent;
+    border-color: transparent;
+}
+
+.e-f249baa > .holder[variant="transparent"] .checkbox-mark::after
+{
+    border-color: var(--ot-text-1);
+}
+
+.e-f249baa > .holder[variant="border"] .checkbox-mark
+{
+    background: transparent;
+    border-color: var(--ot-bg-1-border);
+}
+
+.e-f249baa > .holder[variant="border"]:hover .checkbox-mark
+{
+    border-color: var(--ot-bg-2-border);
+}
+
+.e-f249baa > .holder[variant="border"] input[type="checkbox"]:checked ~ .checkbox-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-f249baa > .holder[variant="border"] .checkbox-mark::after
+{
+    border-color: white;
+}
+
+.e-f249baa > .holder[variant="bg-1"] .checkbox-mark
+{
+    background: var(--ot-bg-1);
+    border-color: var(--ot-bg-1-border);
+}
+
+.e-f249baa > .holder[variant="bg-1"]:hover .checkbox-mark
+{
+    background: var(--ot-bg-1-hover);
+}
+
+.e-f249baa > .holder[variant="bg-1"] input[type="checkbox"]:checked ~ .checkbox-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-f249baa > .holder[variant="bg-1"] .checkbox-mark::after
+{
+    border-color: white;
+}
+
+.e-f249baa > .holder[variant="bg-2"] .checkbox-mark
+{
+    background: var(--ot-bg-2);
+    border-color: var(--ot-bg-2-border);
+}
+
+.e-f249baa > .holder[variant="bg-2"]:hover .checkbox-mark
+{
+    background: var(--ot-bg-2-hover);
+}
+
+.e-f249baa > .holder[variant="bg-2"] input[type="checkbox"]:checked ~ .checkbox-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-f249baa > .holder[variant="bg-2"] .checkbox-mark::after
+{
+    border-color: white;
+}
+
+.e-f249baa > .holder[variant="bg-3"] .checkbox-mark
+{
+    background: var(--ot-bg-3);
+    border-color: var(--ot-bg-3-border);
+}
+
+.e-f249baa > .holder[variant="bg-3"]:hover .checkbox-mark
+{
+    background: var(--ot-bg-3-hover);
+}
+
+.e-f249baa > .holder[variant="bg-3"] input[type="checkbox"]:checked ~ .checkbox-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-f249baa > .holder[variant="bg-3"] .checkbox-mark::after
+{
+    border-color: white;
+}
+
+.e-f249baa > .holder[variant="bg-4"] .checkbox-mark
+{
+    background: var(--ot-bg-4);
+    border-color: var(--ot-bg-4-border);
+}
+
+.e-f249baa > .holder[variant="bg-4"]:hover .checkbox-mark
+{
+    background: var(--ot-bg-4-hover);
+}
+
+.e-f249baa > .holder[variant="bg-4"] input[type="checkbox"]:checked ~ .checkbox-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-f249baa > .holder[variant="bg-4"] .checkbox-mark::after
+{
+    border-color: white;
+}