@fractaldesign/fractalstyler 0.0.0-stage → 0.9.0

package/dist/styles/_07_interactions.sass

@@ -0,0 +1,212 @@
+@use '00_config' as *
+@use '00_tokens' as *
+
+.input
+	display: block
+	width: 100%
+	height: var(--height-lg)
+	padding-inline: var(--space-bs)
+	font-size: var(--text-md)
+	background: var(--bg-input)
+	color: var(--text-primary)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-sm)
+	&:focus-visible
+		outline: none
+		border-color: var(--theme-color)
+		box-shadow: 0 0 0 2px var(--ring)
+	&.small
+		height: var(--height-bs)
+		font-size: var(--text-sm)
+
+.select
+	display: block
+	width: 100%
+	height: var(--height-lg)
+	padding-inline: var(--space-bs)
+	font-size: var(--text-md)
+	background-color: var(--bg-input)
+	color: var(--text-primary)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-sm)
+	appearance: none
+	-webkit-appearance: none
+	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='%23697080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
+	background-repeat: no-repeat
+	background-position: right 8px center
+	cursor: pointer
+	&:focus-visible
+		outline: none
+		border-color: var(--theme-color)
+		box-shadow: 0 0 0 2px var(--ring)
+	&.small
+		height: var(--height-bs)
+		font-size: var(--text-sm)
+
+
+// --- The link family -------------------------------------------------------------
+.link
+	color: var(--theme-color)
+	text-decoration: none
+	transition: color var(--motionin1)
+	&:hover
+		color: var(--theme-color-alt)
+
+.link-plain
+	color: var(--text-primary)
+	text-decoration: none
+	transition: color var(--motionin1)
+	&:hover
+		color: var(--theme-color)
+
+.link-parent
+	color: var(--text-primary)
+	text-decoration: none
+	.link-title
+		transition: color var(--motionin1)
+	&:hover
+		.link-title
+			color: var(--theme-color)
+		
+a.nav-link
+	padding: var(--space-sm)
+	border-radius: var(--radius-sm)
+	&:hover
+		background: var(--state-hover)
+
+// --- The button quartet (nested — never standalone) -----------------------------
+button
+	display: flex
+	align-items: center
+	justify-content: center
+	height: var(--height-bs)
+	font-size: var(--text-md)
+	color: var(--text-primary)
+	text-decoration: none
+	cursor: pointer
+	user-select: none
+	transition: background var(--motionin1), border-color var(--motionin1), color var(--motionin1)
+	padding-inline: var(--space-md)
+	&:focus-visible
+		outline: 2px solid var(--ring)
+		outline-offset: 1px
+	&:disabled
+		opacity: 0.5
+		cursor: not-allowed
+		pointer-events: none
+	&.icon
+		height: 24px
+		width: 24px
+		border: 1px solid transparent
+		background: transparent
+		padding: 0
+		&:hover
+			background: var(--state-hover)
+	&.modern
+		border-radius: var(--space-xs)
+	&.primary
+		background: var(--theme-color)
+	&[data-variant="primary"]
+		background: var(--theme-color)
+		color: var(--white-fixed)
+		border: 1px solid var(--theme-color)
+		&:hover
+			background: var(--theme-color-alt)
+			border: 1px solid var(--theme-color-alt)
+	&[data-variant="secondary"]
+		background: var(--state-surface)
+		color: var(--text-primary)
+		border: 1px solid var(--border-strong)
+		&:hover
+			background: var(--state-hover)
+	&[data-variant="soft"]
+		background: var(--theme-color-sub)
+		color: var(--white-fixed)
+		border: 1px solid var(--theme-color-sub)
+		&:hover
+			border: 1px solid var(--text-primary)
+			color: var(--text-primary)
+	&[data-variant="outline"]
+		background: var(--bg)
+		color: var(--text-primary)
+		border: 1px solid var(--text-primary)
+		&:hover
+			background: var(--state-hover)
+	&[data-variant="ghost"]
+		background: transparent
+		color: var(--text-primary)
+		border: none
+		&:hover
+			background: var(--state-hover)
+	&[data-variant="link"]
+		background: transparent
+		color: var(--theme-color)
+		border: none
+		&:hover
+			text-decoration: underline
+	&[data-variant="destructive"]
+		background: var(--danger)
+		color: var(--white-fixed)
+		border: 1px solid var(--danger)
+		&:hover
+			animation: vibrating 60ms infinite forwards
+	&[data-shape="modern"]
+		border-radius: var(--radius-sm)
+	&[data-shape="curved"]
+		border-radius: var(--radius-md)
+	&[data-shape="round"]
+		border-radius: var(--radius-full)
+	&[data-size="sm"]
+		height: var(--height-sm)
+		font-size: var(--text-sm)
+	&[data-size="md"]
+		height: var(--height-md)
+		font-size: var(--text-md)
+	&[data-size="bs"]
+		height: var(--height-bs)
+		font-size: var(--text-bs)
+	&[data-size="lg"]
+		height: var(--height-lg)
+		font-size: var(--text-bs)
+
+@keyframes vibrating
+	0%
+		transform: scale(0)
+	50%
+		transform: scale(1.03)
+	100%
+		transform: scale(0)
+
+
+a.primary
+	background: var(--theme-color)
+	font-size: var(--text-lg)
+	color: var(--white-fixed)
+	height: 40px
+	align-items: center
+	justify-content: center
+	display: flex
+	min-width: 6rem
+	box-shadow: var(--shadow-sm)
+	transition: box-shadow var(--motionin1)
+	&.modern
+		border-radius: var(--space-xs)
+	&:hover
+		box-shadow: var(--shadow-bs)
+
+a.outline
+	background: transparent
+	font-size: var(--text-lg)
+	color: var(--text-primary)
+	align-items: center
+	justify-content: center
+	display: flex
+	min-width: 6rem
+	height: 40px
+	box-shadow: var(--shadow-sm)
+	border: 1px solid var(--text-primary)
+	transition: box-shadow var(--motionin1)
+	&.modern
+		border-radius: var(--space-xs)
+	&:hover
+		box-shadow: var(--shadow-bs)

package/dist/styles/_08_visuals.sass

@@ -0,0 +1,136 @@
+// ============================================================================
+// dress — L5. Skin and compositions. Emission order within this file follows
+// Contract 5: bare dress before compositions. Components own their own hover
+// states; there is no standalone .hover / .transition (registry ruling).
+// All compositions read the --radius-* channels so shape presets reach them.
+// ============================================================================
+
+@use 'sass:string'
+@use 'sass:list'
+@use 'sass:map'
+@use '00_config' as *
+@use '00_tokens' as *
+
+// --- Bare backgrounds (one declaration each) ----------------------------------
+.bg
+	background: var(--bg)
+.surface
+	background: var(--bg-surface)
+.panel
+	background: var(--bg-panel)
+.sunken
+	background: var(--bg-sunken)
+.raised
+	background: var(--bg-raised)
+.extra
+	background: var(--bg-extra)
+
+// --- Ink ----------------------------------------------------------------------
+.text-primary
+	color: var(--text-primary)
+.text-secondary
+	color: var(--text-secondary)
+.text-muted
+	color: var(--text-muted)
+.text-inverse
+	color: var(--text-inverse)
+.text-white
+	color: var(--white-fixed)
+.text-black
+	color: var(--black-fixed)
+.text-theme
+	color: var(--theme-color)
+.text-success
+	color: var(--success)
+.text-warning
+	color: var(--warning)
+.text-danger
+	color: var(--danger)
+.text-info
+	color: var(--info)
+
+// Status fills, mirroring the status inks above. A dot or chip that carries the
+// status as a background had no composable form before these, which made it a
+// reason to open _09_own.sass.
+.bg-success
+	background: var(--success)
+.bg-warning
+	background: var(--warning)
+.bg-danger
+	background: var(--danger)
+.bg-info
+	background: var(--info)
+
+// --- Lines (the partition-law set) ---------------------------------------------
+.border
+	border: 1px solid var(--border)
+.border-subtle
+	border: 1px solid var(--border-subtle)
+.border-strong
+	border: 1px solid var(--border-strong)
+.bt
+	border-top: 1px solid var(--border)
+.br
+	border-right: 1px solid var(--border)
+.bb
+	border-bottom: 1px solid var(--border)
+.bl
+	border-left: 1px solid var(--border)
+.bt-str
+	border-top: 1px solid var(--border-strong)
+.br-str
+	border-right: 1px solid var(--border-strong)
+.bb-str
+	border-bottom: 1px solid var(--border-strong)
+.bl-str
+	border-left: 1px solid var(--border-strong)
+.bt-sub
+	border-top: 1px solid var(--border-subtle)
+.br-sub
+	border-right: 1px solid var(--border-subtle)
+.bb-sub
+	border-bottom: 1px solid var(--border-subtle)
+.bl-sub
+	border-left: 1px solid var(--border-subtle)
+
+.shadow-xs
+	box-shadow: var(--shadow-xs)
+.shadow-sm
+	box-shadow: var(--shadow-sm)
+.shadow-md
+	box-shadow: var(--shadow-md)
+.shadow-bs
+	box-shadow: var(--shadow-bs)
+.shadow-lg
+	box-shadow: var(--shadow-lg)
+.shadow-xl
+	box-shadow: var(--shadow-xl)
+.shadow-2xl
+	box-shadow: var(--shadow-2xl)
+.shadow-3xl
+	box-shadow: var(--shadow-3xl)
+
+
+// --- Responsive visibility -----------------------------------------------------
+.hide-mobile
+	@media (max-width: 1024px)
+		display: none
+
+.hide-desktop
+	@media (min-width: 1025px)
+		display: none
+
+//special color classes
+
+.orange1
+	color: var(--orangepop1)
+.orange2
+	color: var(--orangepop2)
+.orange3
+	color: var(--orangepop3)
+.orange4
+	color: var(--orangepop4)
+.orange5
+	color: var(--orangepop5)
+.orange6
+	color: var(--orangepop6)

package/dist/styles/_09_own.sass

@@ -0,0 +1,174 @@
+@use '00_config' as *
+@use '00_tokens' as *
+
+.site-logomotif
+	height: 48px
+	transform-origin: center center
+	transition: transform 210ms var(--transin2)
+	&:hover
+		transform: scale(1.2)
+
+.logotype
+	height: 28px
+
+.project-circle
+	border-radius: 24px
+	width: 16px
+	height: 16px
+
+
+// Mascot (src/lib/comps/Mascot.svelte): CSS-only "3D feel" logo.
+// JS writes the --mascot-* custom properties on .mascot; all transforms live here.
+// Pupil/gloss translations are in SVG user units (1024 image space), hence `* 1px`.
+.mascot
+	display: inline-block
+	position: relative
+	flex: none
+	line-height: 0
+	perspective: var(--mascot-persp, 400px)
+
+.mascot-bob,
+.mascot-tilt
+	display: block
+
+.mascot-bobs .mascot-bob
+	animation: mascot-bob 3.6s ease-in-out infinite alternate
+
+.mascot-tilt
+	position: relative
+	transform: rotateX(var(--mascot-rx, 0deg)) rotateY(var(--mascot-ry, 0deg))
+	will-change: transform
+
+.mascot-base
+	display: block
+	user-select: none
+	-webkit-user-drag: none
+
+.mascot-overlay
+	position: absolute
+	inset: 0
+	width: 100%
+	height: 100%
+	overflow: visible
+	pointer-events: none
+
+.mascot-mask
+	mask-type: alpha
+
+.mascot-pupil-l
+	transform: translate(calc(var(--mascot-plx, 0) * 1px), calc(var(--mascot-ply, 0) * 1px))
+
+.mascot-pupil-r
+	transform: translate(calc(var(--mascot-prx, 0) * 1px), calc(var(--mascot-pry, 0) * 1px))
+
+.mascot-gloss
+	opacity: 0.42
+	transform: translate(calc(var(--mascot-gx, 400) * 1px), calc(var(--mascot-gy, 400) * 1px))
+
+.mascot-shade
+	opacity: 0.55
+	transform: translate(calc((1024 - var(--mascot-gx, 400)) * 1px), calc((1120 - var(--mascot-gy, 400)) * 1px))
+
+.mascot-blinks .mascot-lid
+	animation: mascot-blink 5.2s ease-in-out infinite
+
+@keyframes mascot-blink
+	0%, 93%, 100%
+		transform: translateY(0)
+	96%
+		transform: translateY(232px)
+
+@keyframes mascot-bob
+	from
+		transform: translateY(0)
+	to
+		transform: translateY(-3%)
+
+@media (prefers-reduced-motion: reduce)
+	.mascot-bobs .mascot-bob,
+	.mascot-blinks .mascot-lid
+		animation: none
+	.mascot-tilt
+		transform: none
+
+// MascotGL (src/lib/comps/MascotGL.svelte): WebGL2 lab version of the mascot.
+// The canvas overhangs the mascot box by 30% per side (EXTENT = 0.8) for tilt + shadow.
+.mascotgl
+	display: inline-block
+	position: relative
+	flex: none
+	line-height: 0
+
+.mascotgl-spacer
+	display: block
+
+.mascotgl-canvas
+	position: absolute
+	left: 50%
+	top: 50%
+	width: 160%
+	height: 160%
+	transform: translate(-50%, -50%)
+	pointer-events: none
+	opacity: 0
+
+.mascotgl-ready
+	opacity: 1
+
+// Header-sized: 15% overhang per side (EXTENT_COMPACT = 0.65), still outside the layout box.
+.mascotgl-compact .mascotgl-canvas
+	width: 130%
+	height: 130%
+
+h3, h2, h1
+	font-weight: 600
+
+.hero-name
+	font-weight: 800
+	font-size: calc(var(--text-5xl) * 2)
+	letter-spacing: -0.2rem
+
+.accordion
+	display: flex
+	flex-direction: column
+	gap: var(--space-xs)
+
+.accordion-item
+	border: 1px solid var(--border)
+	border-radius: var(--radius-md)
+	background: var(--bg-surface)
+	.accordion-content
+		display: grid
+		grid-template-rows: 0fr
+		padding: 0
+		transition: grid-template-rows var(--speed2) var(--transout1)
+	// The panel is what collapses. It needs min-height: 0 so the grid row can
+	// size it, and overflow: hidden so the content clips while closed — which
+	// is why it carries a name rather than being reached at by position.
+	.accordion-panel
+		overflow: hidden
+		min-height: 0
+	&.open .accordion-content
+		grid-template-rows: 1fr
+		padding: var(--space-xs)
+
+.accordion-trigger
+	display: flex
+	flex-direction: row
+	align-items: center
+	justify-content: space-between
+	width: 100%
+	min-height: var(--control-h-md)
+	padding: var(--space-xs)
+	font-weight: 500
+	font-size: var(--text-sm)
+	text-align: left
+	background: transparent
+	border: 0
+	cursor: pointer
+	user-select: none
+	&:hover
+		background: var(--bg-raised)
+	&:focus-visible
+		outline: 2px solid var(--ring)
+		outline-offset: -2px

package/dist/styles/colorpacks.sass

@@ -0,0 +1,119 @@
+$green90: #004b23
+$green80: #006400
+$green70: #007200
+$green60: #008000
+$green50: #38b000
+$green40: #70e000
+$green30: #9ef01a
+$green20: #ccff33
+$green55: #25a244
+$green56: #08a045
+$green45: #4ad66d
+$green46: #6ede8a
+
+$blue95: #051923
+$blue90: #012a4a
+$blue85: #003554
+$blue80: #013a63
+$blue70: #01497c
+$blue60: #014f86
+$blue55: #006494
+$blue50: #2a6f97
+$blue45: #0582ca
+$blue40: #2c7da0
+$blue30: #468faf
+$blue20: #61a5c2
+$blue10: #89c2d9
+
+$orange85: #03071e
+$orange80: #370617
+$orange75: #6a040f
+$orange70: #9d0208
+$orange65: #d00000
+$orange60: #dc2f02
+$orange55: #e85d04
+$orange50: #ff4800
+$orange45: #ff5400
+$orange40: #ff6000
+$orange35: #ff6d00
+$orange30: #ff7900
+$orange25: #ff8500
+$orange20: #ff9100
+$orange15: #ff9e00
+$orange10: #ffaa00
+
+$red80: #590d22
+$red75: #641220
+$red70: #6e1423
+$red65: #85182a
+$red60: #a11d33
+$red55: #a71e34
+$red50: #b21e35
+$red45: #bd1f36
+$red40: #c71f37
+$red35: #da1e37
+$red30: #e01e37
+$red25: #ff4d6d
+$red20: #ff758f
+$red15: #ff8fa3
+$red10: #ffb3c1
+$red05: #ffccd5
+$red00: #fff0f3
+$blue11: #1c558e
+$blue12: #1d4e89
+$blue13: #1a5b92
+$blue14: #14746f
+$blue15: #036666
+$blue16: #16679a
+$blue17: #0f80aa
+$blue18: #0899ba
+$blue19: #248277
+$blue20: #358f80
+$blue21: #04a6c2
+$blue22: #469d89
+$blue23: #56ab91
+$blue24: #00b2ca
+$blue25: #67b99a
+$blue26: #78c6a3
+$blue27: #20bac5
+$blue28: #3fc1c0
+$teal11: #88d4ab
+$teal12: #99e2b4
+$teal13: #47126b
+$teal14: #571089
+$teal15: #6411ad
+$teal16: #6d23b6
+$teal17: #6247aa
+$teal18: #7251b5
+$teal19: #815ac0
+$teal20: #822faf
+$teal21: #973aa8
+$teal22: #ac46a1
+$teal23: #c05299
+$teal24: #d55d92
+$teal25: #ea698b
+$teal26: #9163cb
+$teal27: #b185db
+$teal28: #c19ee0
+$teal29: #dac3e8
+$neutral11: #adb5bd
+$neutral12: #cccccc
+$neutral13: #ced4da
+$neutral14: #dee2e6
+$neutral15: #e9ecef
+$neutral16: #e6e6e9
+$neutral17: #e9ecef
+$neutral18: #f8f9fa
+$neutral19: #f2f2f2
+$neutral20: #f4f4f6
+$neutral21: #f2f2f2
+$neutral22: #f8f9fa
+$neutral23: #212529
+$neutral24: #343a40
+$neutral25: #495057
+$neutral26: #595959
+$neutral27: #66666e
+$neutral28: #6c757d
+$neutral29: #7f7f7f
+$neutral30: #9999a1
+$neutral31: #adb5bd

package/dist/styles/index.sass

@@ -0,0 +1,14 @@
+@forward '00_config'
+@forward '00_tokens'
+@forward '00_fonts'
+@use '00_config' as *
+@use '00_tokens' as *
+@use '01_base' as *
+@use '02_dimensions' as *
+@use '03_typography' as *
+@use '04_containers' as *
+@use '05_layouts' as *
+@use '06_shells' as *
+@use '07_interactions' as *
+@use '08_visuals' as *
+@use '09_own' as *