@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/mockup.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Mockup — Device frame chrome around content */
 
 .rf-mockup {
@@ -7,40 +8,6 @@
 	--mockup-chrome: #2a2a2a;
 	--mockup-chrome-text: #999;
 	--mockup-scale: 1;
-	display: block;
-	width: 100%;
-	container-type: inline-size;
-	background-color: transparent;
-}
-
-/* Inside a placed showcase, let device frame use natural width */
-.rf-showcase[data-place] .rf-mockup {
-	width: auto;
-	max-width: 100%;
-	container-type: normal;
-}
-.rf-showcase[data-place] .rf-mockup__frame {
-	zoom: var(--mockup-scale, 1);
-}
-
-/* ── Fit mode: none (native pixel size) ── */
-
-.rf-mockup[data-fit="none"] {
-	display: inline-block;
-	width: auto;
-	container-type: normal;
-}
-
-.rf-mockup[data-fit="none"] .rf-mockup__frame {
-	zoom: normal;
-	transform: scale(var(--mockup-scale, 1));
-	transform-origin: top center;
-	margin-inline: 0;
-}
-
-.rf-mockup[data-fit="none"].rf-mockup--browser,
-.rf-mockup[data-fit="none"].rf-mockup--browser-dark {
-	display: block;
 }
 
 /* ── Color modifiers ── */
@@ -63,23 +30,11 @@
 	--mockup-chrome-text: #999;
 }
 
-/* ── Frame (wraps everything) ── */
-
-.rf-mockup__frame {
-	position: relative;
-	margin-inline: auto;
-	zoom: calc(var(--mockup-scale, 1) * min(1, tan(atan2(100cqi, var(--mockup-device-width, 100cqi)))));
-}
-
 /* ── Viewport (content area) ── */
 
 .rf-mockup__viewport {
-	overflow: auto;
 	background: var(--rf-color-bg);
 }
-.rf-mockup__viewport img {
-	display: block;
-}
 
 .rf-mockup__viewport > *:first-child {
 	margin-top: 0;
@@ -93,8 +48,8 @@
 
 .rf-mockup__label {
 	text-align: center;
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	margin-top: 0.75rem;
 }
@@ -107,41 +62,19 @@
 
 .rf-mockup__bezel {
 	background: var(--mockup-bezel);
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}
-
-/* ── Notch variants ── */
-
-.rf-mockup__notch {
-	position: absolute;
-	top: 0;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 2;
 }
 
 .rf-mockup__notch[data-notch="dynamic-island"] {
-	width: 120px;
-	height: 34px;
-	top: 12px;
 	background: #000;
 	border-radius: 20px;
 }
 
 .rf-mockup__notch[data-notch="classic"] {
-	width: 150px;
-	height: 28px;
-	top: 0;
 	background: var(--mockup-bezel);
 	border-radius: 0 0 20px 20px;
 }
 
 .rf-mockup__notch[data-notch="punch-hole"] {
-	width: 12px;
-	height: 12px;
-	top: 16px;
 	background: #000;
 	border-radius: var(--rf-radius-full);
 }
@@ -149,17 +82,11 @@
 /* ── Status bar ── */
 
 .rf-mockup__status-bar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
 	padding: 0 1.5rem;
-	height: 44px;
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	background: var(--rf-color-bg);
-	position: relative;
-	z-index: 1;
 }
 
 .rf-mockup__status-time {
@@ -168,26 +95,18 @@
 
 .rf-mockup__status-icons::after {
 	content: '\25CF\25CF\25CF \25AE 100%';
-	font-size: 0.625rem;
-	letter-spacing: 0.05em;
+	font-size: var(--rf-text-xs);
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
 
 /* ── Home indicator ── */
 
 .rf-mockup__home-indicator {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 32px;
 	background: var(--rf-color-bg);
 }
 
 .rf-mockup__home-indicator::after {
-	content: '';
-	display: block;
-	width: 134px;
-	height: 5px;
 	background: var(--rf-color-text);
 	border-radius: var(--rf-radius-full);
 	opacity: 0.2;
@@ -332,26 +251,18 @@
 /* ── Title bar (browser / macbook) ── */
 
 .rf-mockup__title-bar {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
 	padding: 0.625rem 1rem;
 	background: var(--mockup-chrome);
-	min-height: 2.5rem;
 }
 
 /* ── Traffic lights ── */
 
 .rf-mockup__traffic-lights {
-	display: flex;
 	gap: 0.5rem;
-	flex-shrink: 0;
 }
 
 .rf-mockup__traffic-light {
-	display: block;
-	width: 12px;
-	height: 12px;
 	border-radius: var(--rf-radius-full);
 }
 
@@ -370,23 +281,17 @@
 /* ── Address bar (browser only) ── */
 
 .rf-mockup__address-bar {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	max-width: 60%;
 	margin: 0 auto;
 	padding: 0.25rem 0.75rem;
 	background: rgba(255, 255, 255, 0.08);
 	border-radius: var(--rf-radius-sm);
-	min-height: 1.75rem;
 }
 
 .rf-mockup__url {
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-sans);
 	color: var(--mockup-chrome-text);
 	white-space: nowrap;
-	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
@@ -457,13 +362,9 @@
 	background: linear-gradient(to bottom, var(--mockup-bezel), color-mix(in srgb, var(--mockup-bezel), #000 15%));
 	padding: 0.5rem 2rem 0.75rem;
 	border-radius: 0 0 var(--rf-radius-md) var(--rf-radius-md);
-	display: flex;
-	justify-content: center;
 }
 
 .rf-mockup__trackpad {
-	width: 40%;
-	height: 6px;
 	background: color-mix(in srgb, var(--mockup-bezel), #fff 10%);
 	border-radius: var(--rf-radius-full);
 	margin-top: 0.25rem;
@@ -509,14 +410,6 @@
 	border: 1px dashed var(--rf-color-border);
 	border-radius: var(--rf-radius-sm);
 }
-
-/* ═══════════════════════════════════════
-   CONTEXT: inside preview
-   ═══════════════════════════════════════ */
-
-.rf-grid .rf-mockup {
-	justify-self: center;
-}
 .rf-preview .rf-mockup {
 	margin: 0;
 }
@@ -536,3 +429,5 @@
 		background: rgba(0, 0, 0, 0.15);
 	}
 }
+
+}