mary.my.id / aglais
personal web client for Bluesky
typescript solidjs bluesky atcute
fork atom

feat: more changes to color palettes

mary.my.id 6fd92dc3 2bb19d48

verified
options
unified split
Changed files
+14 -11
src
components
button.tsx
icon-button.tsx
sidebar.tsx
styles
app.css
views
main
home.tsx
tailwind.config.js
+2 -2
src/components/button.tsx
··· 76 76 cn += ` border border-outline-lg text-contrast`; 77 77 78 78 if (!isDisabled()) { 79 - cn += ` hover:bg-contrast/md active:bg-contrast/md-pressed`; 79 + cn += ` hover:bg-contrast-hinted/md active:bg-contrast-hinted/md-pressed`; 80 80 } else { 81 81 cn += ` opacity-50`; 82 82 } ··· 84 84 cn += ` text-contrast`; 85 85 86 86 if (!isDisabled()) { 87 - cn += ` hover:bg-contrast/md active:bg-contrast/md-pressed`; 87 + cn += ` hover:bg-contrast-hinted/md active:bg-contrast-hinted/md-pressed`; 88 88 } else { 89 89 cn += ` opacity-50`; 90 90 }
+2 -2
src/components/icon-button.tsx
··· 43 43 cn += ` text-contrast`; 44 44 45 45 if (!isDisabled()) { 46 - cn += ` hover:bg-contrast/md active:bg-contrast/md-pressed`; 46 + cn += ` hover:bg-contrast-hinted/md active:bg-contrast-hinted/md-pressed`; 47 47 } else { 48 48 cn += ` opacity-50`; 49 49 } ··· 51 51 cn += ` border border-outline-lg text-contrast`; 52 52 53 53 if (!isDisabled()) { 54 - cn += ` hover:bg-contrast/md active:bg-contrast/md-pressed`; 54 + cn += ` hover:bg-contrast-hinted/md active:bg-contrast-hinted/md-pressed`; 55 55 } else { 56 56 cn += ` opacity-50`; 57 57 }
+2 -2
src/components/sidebar.tsx
··· 39 39 <button 40 40 role="menuitem" 41 41 onClick={props.onClick} 42 - class="flex gap-4 px-4 py-3 text-contrast hover:bg-contrast/md active:bg-contrast/md-pressed" 42 + class="flex gap-4 px-4 py-3 text-contrast hover:bg-contrast/md active:bg-contrast/sm-pressed" 43 43 > 44 44 <div class="mt-0.5 text-xl"> 45 45 {(() => { ··· 69 69 role="menuitem" 70 70 href={props.href} 71 71 onClick={close} 72 - class="flex gap-4 px-4 py-3 text-contrast hover:bg-contrast/md active:bg-contrast/md-pressed" 72 + class="flex gap-4 px-4 py-3 text-contrast hover:bg-contrast/md active:bg-contrast/sm-pressed" 73 73 > 74 74 <div class="mt-0.5 text-xl"> 75 75 {(() => {
+6 -4
src/styles/app.css
··· 41 41 .theme-light { 42 42 --p-background: 255 255 255; 43 43 --p-contrast: 20 20 20; 44 + --p-contrast-hinted: 25 25 25; 44 45 --p-contrast-muted: 100 100 100; 45 46 --p-contrast-overlay: 0 0 0; 46 47 --p-outline: 243 243 243; ··· 51 52 .theme-dark { 52 53 --p-background: 0 0 0; 53 54 --p-contrast: 255 255 255; 54 - --p-contrast-muted: 118 118 118; 55 + --p-contrast-hinted: 244 244 244; 56 + --p-contrast-muted: 123 123 123; 55 57 --p-contrast-overlay: 98 110 127; 56 - --p-outline: 51 51 51; 57 - --p-outline-md: 54 54 54; 58 - --p-outline-lg: 100 100 100; 58 + --p-outline: 54 54 54; 59 + --p-outline-md: 57 57 57; 60 + --p-outline-lg: 113 113 113; 59 61 } 60 62 }
+1 -1
src/views/main/home.tsx
··· 26 26 </Page.HeaderAccessory> 27 27 28 28 <div class="flex min-w-0 grow"> 29 - <button class="-mx-2 flex items-center gap-1 overflow-hidden rounded px-2 py-1 hover:bg-contrast/md active:bg-contrast/md-pressed"> 29 + <button class="-mx-2 flex items-center gap-1 overflow-hidden rounded px-2 py-1 hover:bg-contrast-hinted/md active:bg-contrast-hinted/md-pressed"> 30 30 <span class="overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold"> 31 31 {'Following'} 32 32 </span>
+1
tailwind.config.js
··· 82 82 background: `rgb(var(--p-background))`, 83 83 contrast: { 84 84 DEFAULT: `rgb(var(--p-contrast))`, 85 + hinted: `rgb(var(--p-contrast-hinted))`, 85 86 muted: `rgb(var(--p-contrast-muted))`, 86 87 overlay: `rgb(var(--p-contrast-overlay))`, 87 88 },