fractalstyler2 0.1.0 → 0.3.0

package/dist/styles/_06_recipes.sass

@@ -0,0 +1,189 @@
+// =============================================================================
+// 06_RECIPES — macro mixins. Compositions of molecules and atoms.
+// -----------------------------------------------------------------------------
+// Recipes are mixins, NOT locked CSS classes. They take arguments and allow
+// custom components to compose standard patterns with flexible parameters.
+// =============================================================================
+
+@use '01_config' as *
+@use '04_atoms' as *
+@use '05_molecules' as *
+
+// Universal interactive control primitive (Button, Select trigger, Accordion header)
+=control($size: md, $radius: 4)
+	+row(null, center)
+	+gap(2xs)
+	+radius($radius)
+	+border(all, var(--border))
+	+bg(surface)
+	+ink(primary)
+	+weight(500)
+	user-select: none
+	cursor: pointer
+	text-decoration: none
+	transition: background 120ms ease, border-color 120ms ease, transform 80ms ease
+
+	@if $size == sm
+		height: var(--control-h-sm, 26px)
+		+px(2xs)
+		+type(xs)
+	@else if $size == lg
+		height: var(--control-h-lg, 38px)
+		+px(s)
+		+type(md)
+	@else
+		height: var(--control-h-md, 32px)
+		+px(xs)
+		+type(sm)
+
+	&:hover
+		+bg(raised)
+		border-color: var(--border-subtle)
+
+	&:active
+		transform: scale(0.985)
+
+	&:focus-visible
+		+ring
+
+	&:disabled, &[aria-disabled='true']
+		opacity: 0.5
+		cursor: not-allowed
+		pointer-events: none
+
+// Select input recipe (with embedded SVG chevron and optical line-height)
+=select($size: md, $radius: 4)
+	+control($size, $radius)
+	appearance: none
+	-webkit-appearance: none
+	padding-right: 28px
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237F91AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
+	background-repeat: no-repeat
+	background-position: right 8px center
+	line-height: 1.2
+	cursor: pointer
+	width: 100%
+
+// Partition divider recipe with guaranteed breathing room
+=partition($side: top, $pad: s)
+	@if $side == top
+		margin-top: auto
+		padding-top: space($pad)
+		border-top: 1px solid var(--border)
+	@else if $side == bottom
+		margin-bottom: space($pad)
+		padding-bottom: space($pad)
+		border-bottom: 1px solid var(--border)
+
+// Pure CSS collapsible transition (0fr -> 1fr grid transition)
+=collapsible
+	display: grid
+	grid-template-rows: 0fr
+	transition: grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1)
+
+	&[data-open='true'], &[aria-expanded='true']
+		grid-template-rows: 1fr
+
+	> .collapsible-inner
+		overflow: hidden
+		min-height: 0
+
+// Marquee animation recipe
+=marquee($speed: 30s, $gap: 1rem)
+	overflow: hidden
+	display: flex
+	user-select: none
+	gap: $gap
+	position: relative
+
+	&[data-fade='true']
+		mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)
+
+	> [data-slot='marquee-track']
+		display: flex
+		flex-shrink: 0
+		justify-content: space-around
+		gap: $gap
+		min-width: 100%
+		animation: marquee-scroll $speed linear infinite
+
+	&[data-pause='true']:hover > [data-slot='marquee-track']
+		animation-play-state: paused
+
+// Card recipe — surface material + top-anchored vertical stack
+=card($bg: surface, $pad: null, $radius: 6, $elevation: none)
+	+surface($bg, $pad, $radius, $elevation)
+	+box(stretch, start)
+	+gap(s)
+	height: 100%
+	text-align: left
+
+// Button recipe
+=button($size: md, $radius: 4)
+	+control($size, $radius)
+	justify-content: center
+
+// Badge recipe — compact pill chip with subtle border
+=badge
+	+row(center, center)
+	display: inline-flex
+	+gap(3xs)
+	+px(2xs)
+	+type(xs)
+	+weight(500)
+	+radius(3)
+	+bg(raised)
+	+ink(secondary)
+	+border(all, var(--border))
+	padding-block: 2px
+
+// Input recipe — text entry field
+=input
+	display: block
+	+w(100%)
+	+px(xs)
+	+type(sm)
+	+leading(1.5)
+	+border(all, var(--border))
+	+radius(4)
+	+bg(input)
+	+ink(primary)
+	height: var(--control-h-md, 32px)
+	transition: border-color 120ms ease, box-shadow 120ms ease
+	&:focus-visible, &:focus
+		outline: none
+		border-color: var(--theme-color)
+		box-shadow: 0 0 0 2px var(--ring)
+
+// Keycap recipe
+=kbd
+	display: inline-block
+	+px(3xs)
+	+type(xs)
+	+leading(1)
+	+radius(3)
+	+bg(raised)
+	border: 1px solid var(--border)
+	font-family: var(--font-mono)
+	padding-block: 2px
+
+// Overlay & Dialog surfaces
+=dialog-surface
+	+bg(dialog)
+	+border(all, var(--border))
+	+radius(6)
+	+shadow(lg)
+	max-width: min(92vw, 540px)
+	width: 100%
+
+=popover-surface
+	+bg(popover)
+	+border(all, var(--border))
+	+radius(6)
+	+shadow(md)
+
+// Divider recipe
+=divider
+	border: none
+	+border(top)
+	margin-block: space(s)

package/dist/styles/{_base.sass → _07_base.sass}

@@ -1,5 +1,5 @@
 // =============================================================================
-// BASE — a minimal, opinionated reset so the tokens actually reach the page.
+// 07_BASE — a minimal, opinionated reset so the tokens actually reach the page.
 // Kept tiny: box model, sane media defaults, and wiring body to the palette.
 // =============================================================================
 
@@ -8,6 +8,7 @@
 
 html
 	-webkit-text-size-adjust: 100%
+	font-family: var(--font-sans)
 
 body
 	margin: 0
@@ -32,7 +33,7 @@ body
 
 :where(a)
 	color: inherit
-	text-decoration-color: var(--border-strong)
+	text-decoration-color: var(--border-subtle)
 
 :where(button, input, select, textarea)
 	font: inherit

package/dist/styles/_08_blocks.sass

@@ -0,0 +1,433 @@
+// =============================================================================
+// 08_BLOCKS — baseline semantic classes composed from fractal recipes.
+// -----------------------------------------------------------------------------
+// Blocks provide convenient markup classes without locking down arbitrary
+// paddings or scale tokens. State is expressed via data-*/aria-* attributes.
+// =============================================================================
+
+@use 'fractals' as *
+
+.surface
+	+surface(surface, null, 6)
+	+box(stretch, start)
+	&[data-role='raised']
+		+bg(raised)
+	&[data-role='bg']
+		+bg(bg)
+	&[data-role='panel']
+		+bg(panel)
+	&[data-role='popover']
+		+bg(popover)
+	&[data-role='dialog']
+		+bg(dialog)
+
+.card
+	+card($pad: null, $radius: 6)
+	&[data-elevated]
+		+shadow(md)
+	> :is(footer, .card-footer, .meta-bottom)
+		margin-top: auto
+		padding-top: var(--space-xs)
+		border-top: 1px solid var(--border)
+
+.panel
+	+surface(panel, null, 4)
+
+.popover
+	+surface(popover, null, 6, md)
+
+.dialog
+	+surface(dialog, null, 6, lg)
+
+.terminal
+	+surface(terminal, null, 4)
+	font-family: var(--font-mono)
+	color: var(--text-inverse)
+
+.canvas
+	+bg(canvas)
+
+.badge
+	+badge
+	&[data-status='released']
+		color: var(--theme-color)
+		background: rgba(16, 185, 129, 0.1)
+		border-color: rgba(16, 185, 129, 0.25)
+	&[data-status='wip']
+		color: #d97706
+		background: rgba(245, 158, 11, 0.1)
+		border-color: rgba(245, 158, 11, 0.25)
+	&[data-status='archived']
+		+ink(muted)
+	&[data-status='planned']
+		color: #6366f1
+		background: rgba(99, 102, 241, 0.1)
+		border-color: rgba(99, 102, 241, 0.25)
+
+.avatar
+	+center
+	+square(var(--avatar-size, 40px))
+	+radius(full)
+	+bg(raised)
+	+ink(secondary)
+	+border(all, var(--border))
+	overflow: hidden
+
+.input
+	+input
+
+.select
+	+select(md)
+	&.sm
+		+select(sm)
+	&.lg
+		+select(lg)
+
+.divider
+	+divider
+
+.kbd
+	+kbd
+
+.button
+	+button(md, 4)
+	background: var(--bg-surface)
+	&.sm
+		+control(sm, 4)
+		justify-content: center
+	&.lg
+		+control(lg, 4)
+		justify-content: center
+	&.primary
+		background: var(--theme-color)
+		color: var(--text-inverse)
+		border-color: var(--theme-color)
+		&:hover
+			background: var(--theme-color-alt)
+			border-color: var(--theme-color-alt)
+	&.ghost
+		background: transparent
+		+ink(secondary)
+		border-color: var(--border)
+		&:hover
+			+bg(raised)
+			+ink(primary)
+			border-color: var(--border-subtle)
+	&[data-active]
+		+bg(bg)
+		+ink(primary)
+		border-color: var(--border-subtle)
+		+shadow(sm)
+
+button.is-icon, a.is-icon
+	+row(center, center)
+	background: none
+	border: none
+	padding: 0
+	+ink(secondary)
+	cursor: pointer
+	text-decoration: none
+	transition: color 120ms ease
+	&:hover
+		+ink(primary)
+	svg
+		height: 16px
+		width: 16px
+
+// --- Accordion ---------------------------------------------------------------
+.accordion
+	+box
+	+border(all, var(--border))
+	+radius(6)
+	+bg(surface)
+	overflow: hidden
+
+.accordion-item
+	+border(bottom, var(--border))
+	&:last-child
+		border-bottom: none
+
+.accordion-trigger
+	+row(between, center)
+	width: 100%
+	padding: var(--space-xs) var(--space-s)
+	+bg(surface)
+	+ink(primary)
+	+type(sm)
+	+weight(500)
+	border: none
+	cursor: pointer
+	user-select: none
+	text-align: left
+	transition: background 120ms ease
+	&:hover
+		+bg(raised)
+	.accordion-icon
+		transition: transform 140ms ease
+		+ink(muted)
+
+.accordion-item[data-open='true']
+	.accordion-trigger .accordion-icon
+		transform: rotate(180deg)
+		+ink(primary)
+
+.accordion-content
+	+collapsible
+	.accordion-body
+		padding: 0 var(--space-s) var(--space-s) var(--space-s)
+		+type(sm)
+		+ink(secondary)
+		line-height: 1.6
+
+// --- Dialog Modal ------------------------------------------------------------
+dialog.dialog-modal
+	position: fixed
+	inset: 0
+	margin: auto
+	border: none
+	background: transparent
+	padding: 0
+	max-width: min(92vw, 520px)
+	width: 100%
+	z-index: var(--z-modal, 200)
+
+	&::backdrop
+		background: rgba(0, 0, 0, 0.55)
+		backdrop-filter: blur(4px)
+		-webkit-backdrop-filter: blur(4px)
+
+	> .dialog-card
+		+dialog-surface
+		+box
+		+gap(m)
+		+pad(m)
+
+// --- Drawer ------------------------------------------------------------------
+.drawer
+	position: fixed
+	top: 0
+	bottom: 0
+	z-index: var(--z-modal, 200)
+	width: min(85vw, 360px)
+	+bg(surface)
+	+border(all, var(--border))
+	+shadow(lg)
+	transition: transform 200ms ease-out
+	&.right
+		right: 0
+		transform: translateX(105%)
+		+border(left, var(--border))
+	&.left
+		left: 0
+		transform: translateX(-105%)
+		+border(right, var(--border))
+	&[data-open='true']
+		transform: translateX(0)
+
+// --- Tabs --------------------------------------------------------------------
+.tab-list
+	+row(null, center)
+	+gap(3xs)
+	+pad(3xs)
+	+radius(4)
+	+bg(raised)
+	width: fit-content
+	max-width: 100%
+
+.tab-trigger
+	+row(center, center)
+	+px(xs)
+	+type(xs)
+	+weight(500)
+	+radius(3)
+	height: var(--control-h-sm, 26px)
+	border: none
+	background: transparent
+	+ink(secondary)
+	cursor: pointer
+	user-select: none
+	white-space: nowrap
+	transition: all 120ms ease
+	&:hover
+		+ink(primary)
+	&[data-active='true'], &[aria-selected='true']
+		+bg(surface)
+		+ink(primary)
+		+border(all, var(--border))
+		+shadow(sm)
+
+// --- Switch ------------------------------------------------------------------
+.switch-track
+	position: relative
+	display: inline-flex
+	align-items: center
+	flex-shrink: 0
+	width: 36px
+	height: 20px
+	+radius(full)
+	+bg(raised)
+	+border(all, var(--border))
+	cursor: pointer
+	user-select: none
+	padding: 2px
+	transition: background 140ms ease, border-color 140ms ease
+
+	&[data-checked='true']
+		background: var(--theme-color)
+		border-color: var(--theme-color)
+
+.switch-thumb
+	display: block
+	width: 14px
+	height: 14px
+	+radius(full)
+	background: var(--text-primary)
+	transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1), background 140ms ease
+	will-change: transform
+
+.switch-track[data-checked='true'] .switch-thumb
+	transform: translateX(16px)
+	background: var(--text-inverse)
+
+// --- Field -------------------------------------------------------------------
+.field
+	+box
+	+gap(3xs)
+	width: 100%
+
+.field-label
+	+type(xs)
+	+weight(600)
+	text-transform: uppercase
+	letter-spacing: 0.05em
+	+ink(secondary)
+
+.field-error
+	+type(xs)
+	color: #dc2626
+	margin-top: 2px
+
+// --- Marquee -----------------------------------------------------------------
+.marquee, [data-slot="marquee"]
+	overflow: hidden
+	display: flex
+	user-select: none
+	gap: var(--marquee-gap, 1rem)
+	position: relative
+	width: 100%
+
+	&[data-fade="true"]
+		mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)
+
+	[data-slot="marquee-track"]
+		display: flex
+		flex-shrink: 0
+		justify-content: space-around
+		gap: var(--marquee-gap, 1rem)
+		min-width: 100%
+		animation: marquee-scroll var(--marquee-speed, 30s) linear infinite
+
+	&[data-pause="true"]:hover [data-slot="marquee-track"]
+		animation-play-state: paused
+
+	&[data-vertical="true"]
+		flex-direction: column
+		height: 300px
+		&[data-fade="true"]
+			mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%)
+		[data-slot="marquee-track"]
+			flex-direction: column
+			min-height: 100%
+			animation-name: marquee-scroll-vertical
+
+@keyframes marquee-scroll
+	from
+		transform: translateX(0)
+	to
+		transform: translateX(calc(-100% - var(--marquee-gap, 1rem)))
+
+@keyframes marquee-scroll-vertical
+	from
+		transform: translateY(0)
+	to
+		transform: translateY(calc(-100% - var(--marquee-gap, 1rem)))
+
+// --- Animated Badge ----------------------------------------------------------
+[data-slot="badge"]
+	position: relative
+	display: inline-flex
+	align-items: center
+	overflow: hidden
+	border: 1px solid var(--border)
+	border-radius: var(--radius-full)
+	font-weight: 500
+	white-space: nowrap
+	color: var(--text-secondary)
+	background: var(--bg-surface)
+
+	&[data-size="sm"]
+		height: 1.5rem
+		gap: var(--space-3xs)
+		padding: 0 var(--space-2xs)
+		font-size: var(--text-xs)
+	&[data-size="md"]
+		height: 1.75rem
+		gap: var(--space-2xs)
+		padding: 0 var(--space-xs)
+		font-size: var(--text-xs)
+
+	&[data-status="info"], &[data-status="loading"]
+		border-color: var(--theme-color)
+		color: var(--theme-color)
+		background: var(--bg-raised)
+	&[data-status="success"]
+		border-color: #10b981
+		color: #10b981
+	&[data-status="warning"]
+		border-color: #f59e0b
+		color: #f59e0b
+	&[data-status="danger"]
+		border-color: #ef4444
+		color: #ef4444
+
+[data-slot="badge-icon"], [data-slot="badge-label"]
+	position: relative
+	z-index: 1
+	display: inline-flex
+	animation: badge-roll 0.42s cubic-bezier(0.16, 1, 0.3, 1)
+
+[data-slot="badge-icon"]
+	align-items: center
+	justify-content: center
+
+[data-status="loading"] [data-slot="badge-icon"]
+	animation: badge-spin 1s linear infinite
+
+[data-slot="badge-pulse"]
+	position: absolute
+	inset: 0
+	border-radius: inherit
+	background: currentColor
+	animation: badge-pulse 1.6s ease-in-out infinite
+
+@keyframes badge-roll
+	from
+		transform: translateY(80%)
+		opacity: 0
+		filter: blur(4px)
+
+@keyframes badge-spin
+	to
+		transform: rotate(360deg)
+
+@keyframes badge-pulse
+	0%, 100%
+		opacity: 0.08
+		transform: scale(0.94)
+	50%
+		opacity: 0.18
+		transform: scale(1.08)
+
+@media (prefers-reduced-motion: reduce)
+	[data-slot="badge-icon"], [data-slot="badge-label"], [data-slot="badge-pulse"], [data-slot="marquee-track"]
+		animation: none !important