From b2c53065cb9d3503c54c4f6b0cc9b5aeb34afda5 Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Tue, 16 Sep 2025 08:50:38 -0500 Subject: [PATCH] chore: regenerate Panda CSS styles and update settings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Regenerate CSS files reflecting component scaling changes - Add transform scale utilities for abacus components - Update Claude settings to allow memory quiz navigation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .claude/settings.local.json | 3 +- .../src__app__games__memory-quiz__page.css | 91 ++++--- .../src__components__InteractiveAbacus.css | 222 ++++++------------ apps/web/styled-system/styles.css | 170 +++++--------- 4 files changed, 194 insertions(+), 292 deletions(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 839ef9fe..48847e48 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -100,7 +100,8 @@ "Read(//Users/antialias/**)", "Bash(turbo run:*)", "Bash(npx turbo run:*)", - "Bash(open http://localhost:3003/guide)" + "Bash(open http://localhost:3003/guide)", + "Bash(open http://localhost:3000/games/memory-quiz)" ], "deny": [], "ask": [] diff --git a/apps/web/styled-system/chunks/src__app__games__memory-quiz__page.css b/apps/web/styled-system/chunks/src__app__games__memory-quiz__page.css index f87e9424..195dea46 100644 --- a/apps/web/styled-system/chunks/src__app__games__memory-quiz__page.css +++ b/apps/web/styled-system/chunks/src__app__games__memory-quiz__page.css @@ -1,5 +1,25 @@ @layer utilities { + .\[\&_svg\]\:w_100\% svg { + width: 100% + } + + .\[\&_svg\]\:h_100\% svg { + height: 100% + } + + .\[\&_svg\]\:max-w_100\% svg { + max-width: 100% + } + + .\[\&_svg\]\:max-h_100\% svg { + max-height: 100% + } + + .\[\&_svg\]\:object_contain svg { + object-fit: contain + } + .max-w_600px { max-width: 600px } @@ -139,21 +159,10 @@ .transition_transform_0\.3s_ease { transition: transform 0.3s ease } - .\[\&_svg\]\:w_100\% svg { - width: 100% - } - .\[\&_svg\]\:h_100\% svg { - height: 100% - } - .\[\&_svg\]\:max-w_100\% svg { - max-width: 100% - } - .\[\&_svg\]\:max-h_100\% svg { - max-height: 100% - } - .\[\&_svg\]\:object_contain svg { - object-fit: contain - } + + .transform_scale\(1\.5\) { + transform: scale(1.5) + } .p_16px { padding: 16px @@ -260,6 +269,14 @@ width: 100% } + .transform_scale\(2\.2\) { + transform: scale(2.2) + } + + .origin_center { + transform-origin: center + } + .bg_red\.500 { background: var(--colors-red-500) } @@ -814,6 +831,14 @@ height: 500pt } + .w_240pt { + width: 240pt + } + + .h_320pt { + height: 320pt + } + .w_120pt { width: 120pt } @@ -855,6 +880,18 @@ } @media (max-width: 768px) { + .\[\@media_\(max-width\:_768px\)\]\:gap_10px { + gap: 10px + } + } + @media (max-width: 480px) { + + .\[\@media_\(max-width\:_480px\)\]\:gap_8px { + gap: 8px + } + } + @media (max-width: 768px) { + .\[\@media_\(max-width\:_768px\)\]\:h_130px { height: 130px } @@ -887,6 +924,18 @@ min-width: 90px } } + @media (max-width: 768px) { + + .\[\@media_\(max-width\:_768px\)\]\:fs_40px { + font-size: 40px + } + } + @media (max-width: 480px) { + + .\[\@media_\(max-width\:_480px\)\]\:fs_32px { + font-size: 32px + } + } @media screen and (min-width: 48em) { .md\:px_4 { @@ -909,9 +958,6 @@ } @media (max-width: 768px) { - .\[\@media_\(max-width\:_768px\)\]\:gap_10px { - gap: 10px - } .\[\@media_\(max-width\:_768px\)\]\:h_130px { height: 130px } @@ -919,9 +965,6 @@ .\[\@media_\(max-width\:_768px\)\]\:min-w_100px { min-width: 100px } - .\[\@media_\(max-width\:_768px\)\]\:fs_40px { - font-size: 40px - } .\[\@media_\(max-width\:_768px\)\]\:gap_10px { gap: 10px @@ -941,9 +984,6 @@ } @media (max-width: 480px) { - .\[\@media_\(max-width\:_480px\)\]\:gap_8px { - gap: 8px - } .\[\@media_\(max-width\:_480px\)\]\:h_120px { height: 120px } @@ -951,9 +991,6 @@ .\[\@media_\(max-width\:_480px\)\]\:min-w_90px { min-width: 90px } - .\[\@media_\(max-width\:_480px\)\]\:fs_32px { - font-size: 32px - } .\[\@media_\(max-width\:_480px\)\]\:gap_8px { gap: 8px diff --git a/apps/web/styled-system/chunks/src__components__InteractiveAbacus.css b/apps/web/styled-system/chunks/src__components__InteractiveAbacus.css index 2323ec0a..61dd2a4a 100644 --- a/apps/web/styled-system/chunks/src__components__InteractiveAbacus.css +++ b/apps/web/styled-system/chunks/src__components__InteractiveAbacus.css @@ -1,91 +1,41 @@ @layer utilities { - .fs_3xl { - font-size: var(--font-sizes-3xl) - } - - .px_6 { - padding-inline: var(--spacing-6) - } - - .min-w_120px { - min-width: 120px - } - - .gap_3 { - gap: var(--spacing-3) - } - - .min-w_140px { - min-width: 140px - } - - .w_80px { - width: 80px - } - - .fs_xl { - font-size: var(--font-sizes-xl) - } - - .fs_2xl { - font-size: var(--font-sizes-2xl) - } - - .text_transparent { - color: var(--colors-transparent) - } - - .fs_1\.5rem { - font-size: 1.5rem - } - - .fs_1\.875rem { - font-size: 1.875rem - } - - .top_0 { - top: var(--spacing-0) - } - - .left_0 { - left: var(--spacing-0) - } - - .border_none { - border: var(--borders-none) - } - - .bg_transparent { - background: var(--colors-transparent) - } - - .font_bold { - font-weight: var(--font-weights-bold) - } - - .text_\#2563eb { - color: #2563eb - } - - .appearance_textfield { - appearance: textfield; - -webkit-appearance: textfield - } - - .font_inherit { - font-family: inherit - } - - .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:appearance_none::-webkit-outer-spin-button, .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:appearance_none::-webkit-inner-spin-button { - appearance: none; - -webkit-appearance: none + .\[\&_svg\]\:w_100\% svg { + width: 100% } - .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:m_0::-webkit-outer-spin-button, .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:m_0::-webkit-inner-spin-button { - margin: var(--spacing-0) + .\[\&_svg\]\:h_100\% svg { + height: 100% } + .\[\&_svg\]\:max-w_100\% svg { + max-width: 100% + } + + .\[\&_svg\]\:max-h_100\% svg { + max-height: 100% + } + + .\[\&_svg\]\:object_contain svg { + object-fit: contain + } + + .w_240 { + width: 240px + } + + .w_300 { + width: 300px + } + + .h_320 { + height: 320px + } + + .h_400 { + height: 400px + } + .gap_4 { gap: var(--spacing-4) } @@ -94,14 +44,6 @@ gap: var(--spacing-6) } - .w_240px { - width: 240px - } - - .w_300px { - width: 300px - } - .h_320px { height: 320px } @@ -150,6 +92,18 @@ height: 100% } + .overflow_hidden { + overflow: hidden + } + + .transform_scale\(2\.2\) { + transform: scale(2.2) + } + + .origin_center { + transform-origin: center + } + .transition_all_0\.3s_ease { transition: all 0.3s ease } @@ -160,12 +114,28 @@ transition: all 0.2s ease } - .bottom_-50px { - bottom: -50px + .bottom_-45px { + bottom: -45px } - .bottom_-60px { - bottom: -60px + .bottom_-55px { + bottom: -55px + } + + .w_240px { + width: 240px + } + + .w_300px { + width: 300px + } + + .gap_0 { + gap: var(--spacing-0) + } + + .cursor_default { + cursor: default } .bg_white { @@ -188,22 +158,10 @@ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) } - .min-w_160px { - min-width: 160px - } - - .cursor_default { - cursor: default - } - .pos_relative { position: relative } - .flex_1 { - flex: 1 1 0% - } - .ring_none { outline: var(--borders-none) } @@ -236,36 +194,12 @@ background: var(--colors-blue-400) } - .animation_pulse_1s_infinite { - animation: pulse 1s infinite - } - - .p_1 { - padding: var(--spacing-1) - } - .rounded_full { border-radius: var(--radii-full) } - .bg_blue\.50 { - background: var(--colors-blue-50) - } - - .text_blue\.600 { - color: var(--colors-blue-600) - } - - .w_6 { - width: var(--sizes-6) - } - - .h_6 { - height: var(--sizes-6) - } - - .shrink_0 { - flex-shrink: 0 + .animation_pulse_1s_infinite { + animation: pulse 1s infinite } .flex-wrap_nowrap { @@ -448,30 +382,6 @@ height: 240pt } - .\[\&\:focus\]\:text_blue\.600:focus { - color: var(--colors-blue-600) - } - - .\[\&\:focus\]\:bg_blue\.50:focus { - background: var(--colors-blue-50) - } - - .\[\&\:focus\]\:rounded_md:focus { - border-radius: var(--radii-md) - } - - .\[\&\:focus\]\:ring_none:focus { - outline: var(--borders-none) - } - - .\[\&\:focus\]\:border_none:focus { - border: var(--borders-none) - } - - .hover\:bg_blue\.100:is(:hover, [data-hover]) { - background: var(--colors-blue-100) - } - .hover\:shadow_0_12px_32px_rgba\(0\,_0\,_0\,_0\.15\):is(:hover, [data-hover]) { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) } diff --git a/apps/web/styled-system/styles.css b/apps/web/styled-system/styles.css index a478825a..ad83c6cc 100644 --- a/apps/web/styled-system/styles.css +++ b/apps/web/styled-system/styles.css @@ -137,6 +137,10 @@ transition: transform 0.3s ease } + .transform_scale\(1\.5\) { + transform: scale(1.5) + } + .max-h_60vh { max-height: 60vh } @@ -415,6 +419,10 @@ min-height: var(--sizes-0) } + .left_0 { + left: var(--spacing-0) + } + .w_100vw { width: 100vw } @@ -563,6 +571,10 @@ height: 100vh } + .shrink_0 { + flex-shrink: 0 + } + .d_inline-flex { display: inline-flex } @@ -583,6 +595,14 @@ height: 500pt } + .w_240pt { + width: 240pt + } + + .h_320pt { + height: 320pt + } + .from_blue\.50 { --gradient-from: var(--colors-blue-50) } @@ -723,10 +743,6 @@ max-width: 120px } - .transform_scale\(2\.2\) { - transform: scale(2.2) - } - .fs_2xs { font-size: var(--font-sizes-2xs) } @@ -1037,6 +1053,10 @@ position: sticky } + .top_0 { + top: var(--spacing-0) + } + .z_30 { z-index: 30 } @@ -1153,6 +1173,10 @@ opacity: 1 } + .px_6 { + padding-inline: var(--spacing-6) + } + .bg_green\.600 { background: var(--colors-green-600) } @@ -1177,6 +1201,10 @@ border-color: var(--colors-green-200) } + .bg_transparent { + background: var(--colors-transparent) + } + .text_green\.700 { color: var(--colors-green-700) } @@ -1322,80 +1350,22 @@ color: var(--colors-blue-800) } - .gap_0 { - gap: var(--spacing-0) - } - - .px_6 { - padding-inline: var(--spacing-6) - } - - .min-w_120px { - min-width: 120px - } - - .min-w_140px { - min-width: 140px - } - - .w_80px { - width: 80px - } - - .text_transparent { - color: var(--colors-transparent) - } - - .fs_1\.5rem { - font-size: 1.5rem - } - - .fs_1\.875rem { - font-size: 1.875rem - } - - .top_0 { - top: var(--spacing-0) - } - - .left_0 { - left: var(--spacing-0) - } - - .bg_transparent { - background: var(--colors-transparent) - } - - .text_\#2563eb { - color: #2563eb - } - - .appearance_textfield { - appearance: textfield; - -webkit-appearance: textfield - } - - .font_inherit { - font-family: inherit - } - - .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:appearance_none::-webkit-outer-spin-button, .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:appearance_none::-webkit-inner-spin-button { - appearance: none; - -webkit-appearance: none - } - - .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:m_0::-webkit-outer-spin-button, .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:m_0::-webkit-inner-spin-button { - margin: var(--spacing-0) - } - - .w_240px { + .w_240 { width: 240px } - .w_300px { + .w_300 { width: 300px } + .h_320 { + height: 320px + } + + .h_400 { + height: 400px + } + .h_320px { height: 320px } @@ -1444,6 +1414,10 @@ height: 100% } + .transform_scale\(2\.2\) { + transform: scale(2.2) + } + .transition_all_0\.3s_ease { transition: all 0.3s ease } @@ -1456,26 +1430,34 @@ transition: all 0.2s ease } - .bottom_-50px { - bottom: -50px + .bottom_-45px { + bottom: -45px } - .bottom_-60px { - bottom: -60px + .bottom_-55px { + bottom: -55px } - .shadow_0_4px_12px_rgba\(59\,_130\,_246\,_0\.15\) { - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) + .w_240px { + width: 240px } - .min-w_160px { - min-width: 160px + .w_300px { + width: 300px + } + + .gap_0 { + gap: var(--spacing-0) } .cursor_default { cursor: default } + .shadow_0_4px_12px_rgba\(59\,_130\,_246\,_0\.15\) { + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) + } + .ring_none { outline: var(--borders-none) } @@ -1508,10 +1490,6 @@ animation: pulse 1s infinite } - .shrink_0 { - flex-shrink: 0 - } - .flex-wrap_nowrap { flex-wrap: nowrap } @@ -2138,26 +2116,6 @@ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) } - .\[\&\:focus\]\:text_blue\.600:focus { - color: var(--colors-blue-600) - } - - .\[\&\:focus\]\:bg_blue\.50:focus { - background: var(--colors-blue-50) - } - - .\[\&\:focus\]\:rounded_md:focus { - border-radius: var(--radii-md) - } - - .\[\&\:focus\]\:ring_none:focus { - outline: var(--borders-none) - } - - .\[\&\:focus\]\:border_none:focus { - border: var(--borders-none) - } - .hover\:bg_red\.600:is(:hover, [data-hover]) { background: var(--colors-red-600) } @@ -2258,10 +2216,6 @@ background: var(--colors-brand-50) } - .hover\:bg_blue\.100:is(:hover, [data-hover]) { - background: var(--colors-blue-100) - } - .hover\:shadow_0_12px_32px_rgba\(0\,_0\,_0\,_0\.15\):is(:hover, [data-hover]) { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) }