@onetype/framework 2.0.41 → 2.0.42

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

@@ -1,421 +0,0 @@
-/* ============================================
-   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/styles/base.css

@@ -1,52 +0,0 @@
-.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

@@ -1,39 +0,0 @@
-/* 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

@@ -1,121 +0,0 @@
-/* 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;
-}

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

@@ -1,26 +0,0 @@
-.e-20dcefe9 > .holder
-{
-    position: relative;
-}
-
-.e-20dcefe9 input
-{
-    width: 100%;
-    padding: 0 var(--ot-spacing-m);
-    border-radius: var(--ot-radius-m);
-    border: 1px solid;
-    background: transparent;
-    transition: all 0.2s ease;
-    outline: none;
-}
-
-.e-20dcefe9 input::placeholder
-{
-    color: var(--ot-text-2);
-}
-
-.e-20dcefe9 input:disabled
-{
-    opacity: 0.5;
-    cursor: not-allowed;
-}

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

@@ -1,15 +0,0 @@
-/* Sizes */
-.e-20dcefe9 > .holder[size="s"] input
-{
-    height: var(--ot-height-s);
-}
-
-.e-20dcefe9 > .holder[size="m"] input
-{
-    height: var(--ot-height-m);
-}
-
-.e-20dcefe9 > .holder[size="l"] input
-{
-    height: var(--ot-height-l);
-}