Design system/foundation

.gitignore

@@ -6,6 +6,9 @@
 /out-tsc
 /bazel-out
 
+# Claude Code worktrees (isolamento local de agente, nunca deve ir pro repo)
+.claude/worktrees/
+
 # Node
 /node_modules
 npm-debug.log

src/app/app.html

@@ -71,16 +71,13 @@
       <span>Time</span>
     </a>
       <span class="pokedex-frame__nav-divider" aria-hidden="true"></span>
-      <button
-        type="button"
-        class="pokedex-frame__theme-btn"
-        (click)="toggleDarkMode()"
-        [attr.aria-label]="isDarkMode() ? 'Modo claro' : 'Modo escuro'"
-        [matTooltip]="isDarkMode() ? 'Modo claro' : 'Modo escuro'"
-        matTooltipPosition="above"
-      >
-        <mat-icon>{{ isDarkMode() ? 'light_mode' : 'dark_mode' }}</mat-icon>
-      </button>
+      <app-icon-button
+        [icon]="isDarkMode() ? 'light_mode' : 'dark_mode'"
+        [ariaLabel]="isDarkMode() ? 'Modo claro' : 'Modo escuro'"
+        [tooltip]="isDarkMode() ? 'Modo claro' : 'Modo escuro'"
+        size="lg"
+        (clicked)="toggleDarkMode()"
+      />
   </nav>
   </div>
 </div>

src/app/app.scss

@@ -1,3 +1,5 @@
+@use '../styles/breakpoints' as bp;
+
 :host {
   display: block;
   min-height: 100dvh;
@@ -70,38 +72,6 @@
     align-items: center;
   }
 
-  &__theme-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: color-mix(in srgb, var(--dex-ink) 8%, transparent);
-    color: var(--dex-ink);
-    cursor: pointer;
-    flex-shrink: 0;
-    position: relative;
-    z-index: 1;
-
-    &:focus-visible {
-      outline: 2px solid var(--dex-gold);
-      outline-offset: 2px;
-    }
-
-    mat-icon {
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
-    }
-
-    &:hover {
-      background: color-mix(in srgb, var(--dex-ink) 16%, transparent);
-    }
-  }
-
   &__nav-divider {
     align-self: center;
     flex-shrink: 0;
@@ -234,7 +204,7 @@
 
 }
 
-@media (min-width: 768px) {
+@include bp.up(md) {
   .pokedex-frame {
     &__content--sheet {
       padding-bottom: 32px;
@@ -280,7 +250,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@include bp.up(lg) {
   .pokedex-frame {
     max-width: 1200px;
     margin: 0 auto;

src/app/app.ts

@@ -9,6 +9,7 @@ import { FavoritesService } from './core/services/favorites.service';
 import { PageBackgroundService } from './core/services/page-background.service';
 import { NavigationService } from './core/services/navigation.service';
 import { routeFade } from './shared/animations';
+import { IconButtonComponent } from './shared/components/icon-button/icon-button.component';
 
 /**
  * Resolve qualquer cor CSS (color-mix(), color(srgb ...), etc.) para um
@@ -32,7 +33,7 @@ function resolveToRgb(cssColor: string): string {
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, MatIconModule, MatTooltipModule],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, MatIconModule, MatTooltipModule, IconButtonComponent],
   templateUrl: './app.html',
   styleUrl: './app.scss',
   animations: [routeFade],

src/app/features/compare/compare.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/breakpoints' as bp;
+
 .compare {
   position: relative;
   width: 100%;
@@ -352,7 +354,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@include bp.down(md) {
   .dex-search .dex-search__icon {
     display: inline-flex;
     flex-shrink: 0;
@@ -459,7 +461,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@include bp.down(md) {
   .compare__search-row {
     gap: 6px;
 
@@ -469,7 +471,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@include bp.up(md) {
   .compare__hero-bg {
     height: 460px;
   }

src/app/features/favorites/favorites.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/breakpoints' as bp;
+
 .favorites__grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -112,7 +114,7 @@
   50% { transform: translateY(-8px); }
 }
 
-@media (min-width: 480px) {
+@include bp.up(sm) {
   .favorites__grid {
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 14px;

src/app/features/pokemon-detail/pokemon-detail.component.html

@@ -35,9 +35,7 @@
         <div class="pdetail__hero-shimmer" [class.pdetail__hero-shimmer--active]="isShiny()"></div>
         <img src="/pokeball.png" alt="" class="pdetail__watermark" aria-hidden="true" loading="lazy" />
         <div class="pdetail__actions">
-          <button type="button" class="pdetail__back" (click)="goBack()" aria-label="Voltar" matTooltip="Voltar" matTooltipPosition="right">
-            <mat-icon>arrow_back</mat-icon>
-          </button>
+          <app-icon-button icon="arrow_back" ariaLabel="Voltar" tooltip="Voltar" tooltipPosition="right" tone="transparent" size="lg" (clicked)="goBack()" />
           <div class="pdetail__nav-arrows">
             <a [routerLink]="prevId() ? ['/pokemon', prevId()] : null" class="pdetail__nav-btn" [class.pdetail__nav-btn--disabled]="!prevId()" [attr.aria-disabled]="!prevId() || null" aria-label="Pokémon anterior" matTooltip="Pokémon anterior" matTooltipPosition="above">
               <mat-icon>chevron_left</mat-icon>
@@ -47,17 +45,16 @@
             </a>
           </div>
           <div class="pdetail__action-group">
-            <button
-              type="button"
-              class="pdetail__action-btn"
-              [class.pdetail__action-btn--active]="isInTeam()"
-              (click)="toggleTeam()"
-              [attr.aria-label]="teamButtonLabel()"
-              [matTooltip]="teamButtonLabel()"
-              matTooltipPosition="left"
-            >
-              <mat-icon>{{ isInTeam() ? 'groups' : 'group_add' }}</mat-icon>
-            </button>
+            <app-icon-button
+              [icon]="isInTeam() ? 'groups' : 'group_add'"
+              [ariaLabel]="teamButtonLabel()"
+              [tooltip]="teamButtonLabel()"
+              tooltipPosition="left"
+              tone="on-photo"
+              size="lg"
+              [active]="isInTeam()"
+              (clicked)="toggleTeam()"
+            />
             <button
               type="button"
               class="pdetail__fav"

src/app/features/pokemon-detail/pokemon-detail.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/breakpoints' as bp;
+
 .pdetail {
   display: flex;
   flex-direction: column;
@@ -93,25 +95,6 @@
     padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 14px;
   }
 
-  &__back {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    border: none;
-    background: transparent;
-    padding: 0;
-    color: #fff;
-    cursor: pointer;
-    font-family: inherit;
-
-    &:focus-visible {
-      outline: 2px solid var(--dex-gold);
-      outline-offset: 2px;
-    }
-  }
-
   &__nav-arrows {
     display: flex;
     gap: 4px;
@@ -149,33 +132,6 @@
     gap: 4px;
   }
 
-  &__action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    border: none;
-    background: color-mix(in srgb, #fff 20%, transparent);
-    color: #fff;
-    cursor: pointer;
-    transition: background 0.15s ease;
-
-    &:focus-visible {
-      outline: 2px solid var(--dex-gold);
-      outline-offset: 2px;
-    }
-
-    &:hover {
-      background: color-mix(in srgb, #fff 35%, transparent);
-    }
-
-    &--active {
-      background: var(--dex-gold);
-      color: #000;
-    }
-  }
 
   &__fav {
     background: transparent;
@@ -1107,7 +1063,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@include bp.up(md) {
   .pdetail__sheet {
     padding: 12px 40px 40px;
   }
@@ -1128,7 +1084,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@include bp.up(lg) {
   .pdetail__actions {
     left: 50%;
     right: auto;

src/app/features/pokemon-detail/pokemon-detail.component.ts

@@ -16,6 +16,7 @@ import { PokemonDetail, PokemonExtras } from '../../core/models/pokemon.model';
 import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component';
 import { TypeBadgeComponent } from '../../shared/components/type-badge/type-badge.component';
 import { RadarChartComponent } from '../../shared/components/radar-chart/radar-chart.component';
+import { IconButtonComponent } from '../../shared/components/icon-button/icon-button.component';
 import { getPastelCardColor, getTypeColor } from '../../shared/type-colors';
 import { getStatPercent } from '../../shared/stat-utils';
 import { getStatColor, getStatLabel } from '../../shared/stat-labels';
@@ -53,7 +54,7 @@ const LEARN_METHOD_LABELS: Record<string, string> = {
 @Component({
   selector: 'app-pokemon-detail',
   standalone: true,
-  imports: [RouterLink, MatIconModule, MatTooltipModule, LoadingSpinnerComponent, TypeBadgeComponent, RadarChartComponent],
+  imports: [RouterLink, MatIconModule, MatTooltipModule, LoadingSpinnerComponent, TypeBadgeComponent, RadarChartComponent, IconButtonComponent],
   animations: [tabFade],
   templateUrl: './pokemon-detail.component.html',
   styleUrl: './pokemon-detail.component.scss',

src/app/features/pokemon-list/pokemon-list.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/breakpoints' as bp;
+
 .pokemon-list {
   position: relative;
   overflow: hidden;
@@ -344,13 +346,16 @@
   to { transform: rotate(360deg); }
 }
 
-@media (min-width: 480px) {
+@include bp.up(sm) {
   .pokemon-list__grid {
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 14px;
   }
 }
 
+// Literal (não bp.down) de propósito: o par com o breakpoint acima já era
+// max-width:480px, não 479px, e mantemos o valor original pra não mudar
+// o comportamento existente exatamente em 480px de largura.
 @media (max-width: 480px) {
   .pokemon-list__filters {
     padding: 12px 12px 6px;
@@ -372,7 +377,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@include bp.up(md) {
   .scroll-top-fab {
     right: 24px;
   }

src/app/features/team/team.component.html

@@ -351,9 +351,7 @@ <h3 class="team__analysis-name">{{ memberName(id) }}</h3>
               }
             </span>
           </div>
-          <button type="button" class="team__analysis-close" (click)="closeAnalysis()" aria-label="Fechar">
-            <mat-icon>close</mat-icon>
-          </button>
+          <app-icon-button icon="close" ariaLabel="Fechar" size="sm" (clicked)="closeAnalysis()" />
         </div>
 
         @if (statsById().get(id); as stats) {