@onetype/framework 2.0.41 → 2.0.43

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

@@ -1,176 +0,0 @@
-.e-64e877b 
-{
-	display: flex;
-}
-
-/* Button Base */
-.e-64e877b > .holder
-{
-	position: relative;
-	border: 1px solid transparent;
-	border-radius: var(--ot-radius-m);
-	padding: 4px var(--ot-spacing-m);
-	cursor: pointer;
-	outline: none;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--ot-spacing-s);
-	background: transparent;
-	color: var(--ot-text-1);
-	font-size: var(--ot-size-m);
-	font-weight: 500;
-	text-decoration: none;
-	white-space: nowrap;
-	overflow: hidden;
-	user-select: none;
-	
-	-webkit-tap-highlight-color: transparent;
-	transition:
-		background 0.2s ease,
-		border-color 0.2s ease,
-		color 0.2s ease,
-		box-shadow 0.2s ease,
-		transform 0.15s ease;
-}
-
-/* Content wrapper */
-.e-64e877b > .holder > .content
-{
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--ot-spacing-s);
-	transition: transform 0.2s ease;
-}
-
-/* Text */
-.e-64e877b > .holder > .content > .text
-{
-	line-height: 1;
-}
-
-/* Icons */
-.e-64e877b > .holder > .content > i
-{
-	font-size: 18px;
-	transition: transform 0.2s ease;
-}
-
-.e-64e877b > .holder > .content > .icon-left
-{
-	margin-right: -2px;
-}
-
-.e-64e877b > .holder > .content > .icon-right
-{
-	margin-left: -2px;
-}
-
-/* Hover - subtle lift */
-.e-64e877b > .holder:hover
-{
-	transform: translateY(-1px);
-}
-
-.e-64e877b > .holder:hover > .content > .icon-right
-{
-	transform: translateX(2px);
-}
-
-/* Active - press down */
-.e-64e877b > .holder:active
-{
-	transform: translateY(0) scale(0.98);
-	transition-duration: 0.1s;
-}
-
-/* Focus visible - premium glow ring */
-.e-64e877b > .holder:focus-visible
-{
-	outline: none;
-	box-shadow:
-		0 0 0 2px var(--ot-bg-1),
-		0 0 0 4px var(--ot-brand);
-}
-
-/* Disabled */
-.e-64e877b > .holder[disabled="true"]
-{
-	opacity: 0.5;
-	cursor: not-allowed;
-	pointer-events: none;
-	transform: none;
-}
-
-/* Loading */
-.e-64e877b > .holder[loading="true"]
-{
-	cursor: wait;
-	pointer-events: none;
-}
-
-/* Spinner */
-.e-64e877b > .holder > .spinner
-{
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.e-64e877b > .holder > .spinner > i
-{
-	font-size: 18px;
-	animation: e-button-spin 0.8s linear infinite;
-}
-
-@keyframes e-button-spin
-{
-	from { transform: rotate(0deg); }
-	to { transform: rotate(360deg); }
-}
-
-/* Ripple effect */
-.e-64e877b > .holder > .ripple
-{
-	position: absolute;
-	border-radius: 50%;
-	background: currentColor;
-	opacity: 0.15;
-	transform: scale(0);
-	animation: e-button-ripple 0.6s ease-out forwards;
-	pointer-events: none;
-}
-
-@keyframes e-button-ripple
-{
-	to
-	{
-		transform: scale(2.5);
-		opacity: 0;
-	}
-}
-
-/* Full width */
-.e-64e877b > .holder[variant*="full"]
-{
-	width: 100%;
-}
-
-/* Rounded (pill) */
-.e-64e877b > .holder[variant*="rounded"]
-{
-	border-radius: 100px;
-}
-
-/* Icon only - square aspect */
-.e-64e877b > .holder[variant*="icon-only"]
-{
-	padding: 0;
-	aspect-ratio: 1;
-}
-
-.e-64e877b > .holder[variant*="icon-only"] > .content > i
-{
-	margin: 0;
-}

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

@@ -1,78 +0,0 @@
-/* Small */
-.e-64e877b > .holder[variant*="size-s"]
-{
-	height: var(--ot-height-s);
-	padding: 0 var(--ot-spacing-s);
-	font-size: var(--ot-size-s);
-	gap: var(--ot-spacing-x);
-}
-
-.e-64e877b > .holder[variant*="size-s"] > .content
-{
-	gap: var(--ot-spacing-x);
-}
-
-.e-64e877b > .holder[variant*="size-s"] > .content > i,
-.e-64e877b > .holder[variant*="size-s"] > .spinner > i
-{
-	font-size: 14px;
-}
-
-/* Medium (default) */
-.e-64e877b > .holder[variant*="size-m"]
-{
-	height: var(--ot-height-m);
-	padding: 0 var(--ot-spacing-m);
-	font-size: var(--ot-size-m);
-	gap: var(--ot-spacing-s);
-}
-
-.e-64e877b > .holder[variant*="size-m"] > .content
-{
-	gap: var(--ot-spacing-s);
-}
-
-.e-64e877b > .holder[variant*="size-m"] > .content > i,
-.e-64e877b > .holder[variant*="size-m"] > .spinner > i
-{
-	font-size: 18px;
-}
-
-/* Large */
-.e-64e877b > .holder[variant*="size-l"]
-{
-	height: var(--ot-height-l);
-	padding: 0 var(--ot-spacing-l);
-	font-size: var(--ot-size-l);
-	gap: var(--ot-spacing-m);
-}
-
-.e-64e877b > .holder[variant*="size-l"] > .content
-{
-	gap: var(--ot-spacing-m);
-}
-
-.e-64e877b > .holder[variant*="size-l"] > .content > i,
-.e-64e877b > .holder[variant*="size-l"] > .spinner > i
-{
-	font-size: 22px;
-}
-
-/* Icon-only size adjustments */
-.e-64e877b > .holder[variant*="icon-only"][variant*="size-s"]
-{
-	width: var(--ot-height-s);
-	padding: 0;
-}
-
-.e-64e877b > .holder[variant*="icon-only"][variant*="size-m"]
-{
-	width: var(--ot-height-m);
-	padding: 0;
-}
-
-.e-64e877b > .holder[variant*="icon-only"][variant*="size-l"]
-{
-	width: var(--ot-height-l);
-	padding: 0;
-}

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);
-}