@handijit/ui 0.0.0-stage → 1.0.0

package/build/scss/_mixins.scss

@@ -0,0 +1,710 @@
+@use 'sass:list';
+@use 'variables' as *;
+
+@mixin for-mobile {
+  @media (max-width: #{$breakpoint-mobile}) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait {
+  @media (max-width: #{$breakpoint-tablet-portrait}) {
+    @content;
+  }
+}
+
+@mixin for-tablet {
+  @media (max-width: #{$breakpoint-tablet}) {
+    @content;
+  }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: #{$breakpoint-tablet + 1px}) {
+    @content;
+  }
+}
+
+@mixin for-touch {
+  @media (hover: none) and (pointer: coarse) {
+    @content;
+  }
+}
+
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+@mixin for-rtl {
+  [dir='rtl'] & {
+    @content;
+  }
+}
+
+@mixin surface-transition($shift: 6px, $duration: $duration-fast, $has-shift: true) {
+  opacity: 0;
+
+  @if $has-shift {
+    translate: 0 $shift;
+  }
+
+  transition:
+    opacity $duration $ease-out,
+    translate $duration $ease-out,
+    overlay $duration allow-discrete,
+    display $duration allow-discrete;
+
+  &[open] {
+    opacity: 1;
+
+    @if $has-shift {
+      translate: 0 0;
+    }
+  }
+
+  @starting-style {
+    &[open] {
+      opacity: 0;
+
+      @if $has-shift {
+        translate: 0 $shift;
+      }
+    }
+  }
+
+  @include reduced-motion {
+    transition: none;
+  }
+}
+
+// Koyu temaya özgü kural — açık seçim ve sistem tercihi, `_tokens.generated.scss` ile AYNI seçiciler.
+// ⚠ Tema alt ağaca kapsamlandırılamaz (bkz. CLAUDE.md "Marka şeridi"); bu yalnızca KÖKE bakar.
+@mixin for-dark {
+  :root[data-ui-theme='dark'] & {
+    @content;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-ui-theme]) & {
+      @content;
+    }
+  }
+}
+
+@mixin interactive-surface($rest: transparent, $hover: $surface-2, $pressed: $surface-3) {
+  background-color: $rest;
+  transition:
+    background-color $duration-fast $ease-out,
+    translate $duration-instant $ease-out;
+
+  &:hover:not(:disabled):not([aria-disabled='true']) {
+    background-color: $hover;
+  }
+
+  &:active:not(:disabled):not([aria-disabled='true']) {
+    background-color: $pressed;
+    translate: 0 1px;
+  }
+
+  @include reduced-motion {
+    transition: none;
+
+    &:active:not(:disabled):not([aria-disabled='true']) {
+      translate: none;
+    }
+  }
+}
+
+@mixin backdrop-transition($duration: $duration-fast) {
+  &::backdrop {
+    opacity: 0;
+    transition:
+      opacity $duration $ease-out,
+      overlay $duration allow-discrete,
+      display $duration allow-discrete;
+  }
+
+  &[open]::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  @include reduced-motion {
+    &::backdrop {
+      transition: none;
+    }
+  }
+}
+
+@mixin mirror-in-rtl {
+  @include for-rtl {
+    transform: scaleX(-1);
+  }
+}
+
+@mixin safe-inline($padding: $space-4) {
+  padding-left: max(#{$padding}, env(safe-area-inset-left, 0px));
+  padding-right: max(#{$padding}, env(safe-area-inset-right, 0px));
+}
+
+$sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-bottom, 0px))'};
+
+@mixin safe-bottom($padding: $space-3) {
+  padding-bottom: max(#{$padding}, calc(env(safe-area-inset-bottom, 0px) - #{$sheet-lift}));
+}
+
+@mixin container($width: $container-max-width) {
+  width: 100%;
+  max-width: $width;
+  margin-inline: auto;
+
+  @include safe-inline($desktop-padding);
+
+  @include for-tablet {
+    @include safe-inline($tablet-padding);
+  }
+
+  @include for-mobile {
+    @include safe-inline($mobile-padding);
+  }
+}
+
+@mixin page($width: $container-max-width, $gap: $space-6) {
+  @include container($width);
+
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+  padding-block: $space-6 $space-9;
+
+  @include for-tablet {
+    gap: $space-5;
+    padding-block: $space-5 $space-8;
+  }
+
+  @include for-mobile {
+    gap: $space-4;
+    padding-block: $space-4 $space-7;
+  }
+}
+
+@mixin stack($gap: $space-4) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+@mixin row($gap: $space-3, $align: center) {
+  display: flex;
+  align-items: $align;
+  gap: $gap;
+}
+
+@mixin wrap-row($gap: $space-3, $align: center) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: $align;
+  gap: $gap;
+}
+
+@mixin auto-grid($min: 240px, $gap: $space-4) {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax($min, 1fr));
+  gap: $gap;
+}
+
+@mixin sticky-below-header($gap: $space-4) {
+  position: sticky;
+
+  @if $gap == 0 or $gap == 0px {
+    top: $header-offset;
+  } @else {
+    top: calc(#{$header-offset} + #{$gap});
+  }
+}
+
+// ⚠ Kart ve panel DURURKEN gölge taşımaz: derinliği renk bloğu (krem sayfa / açık kart) ve
+// kenarlık kurar. Gölge yalnızca geçici katmanda, kipsel yüzeyde ve tıklanabilir kartın hover'ında.
+@mixin card($interactive: false, $radius: $radius-lg) {
+  background-color: $surface;
+  border: 1px solid $border;
+  border-radius: $radius;
+
+  @include for-mobile {
+    border-radius: $radius-md;
+  }
+
+  @if $interactive {
+    transition:
+      border-color $duration-fast $ease-out,
+      box-shadow $duration-fast $ease-out,
+      transform $duration-fast $ease-out;
+
+    &:hover {
+      border-color: $border-strong;
+      box-shadow: $shadow-md;
+      transform: translateY(-2px);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: $shadow-xs;
+    }
+
+    @include reduced-motion {
+      transition: none;
+
+      &:hover,
+      &:active {
+        transform: none;
+      }
+    }
+  }
+}
+
+@mixin bottom-sheet($max-height: 88dvh, $duration: $duration-normal) {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  inset: auto 0 #{$sheet-lift} 0;
+  width: 100%;
+  max-width: none;
+  max-height: max(
+    min(50dvh, 320px),
+    min(#{$max-height}, calc(#{$sheet-height} - #{$space-5} - env(safe-area-inset-top, 0px)))
+  );
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: $radius-xl $radius-xl 0 0;
+  background-color: $surface;
+  color: $text;
+  box-shadow: $shadow-xl;
+  overflow: hidden;
+  animation: $anim-slide-up $duration $ease-out;
+
+  &::backdrop {
+    background-color: $scrim;
+    animation: $anim-fade-in $duration $ease-out;
+  }
+
+  @include reduced-motion {
+    animation: none;
+
+    &::backdrop {
+      animation: none;
+    }
+  }
+}
+
+@mixin panel($radius: $radius-lg) {
+  background-color: $surface;
+  border: 1px solid $border;
+  border-radius: $radius;
+  overflow: hidden;
+
+  @include for-mobile {
+    border-radius: $radius-md;
+  }
+}
+
+@mixin panel-header {
+  @include wrap-row($space-3);
+
+  justify-content: space-between;
+  padding: $space-4 $space-5;
+  border-bottom: 1px solid $border;
+  background-color: $surface;
+
+  @include for-mobile {
+    padding: $space-3 $space-4;
+  }
+}
+
+@mixin panel-body($gap: $space-4) {
+  @include stack($gap);
+
+  padding: $space-5;
+
+  @include for-mobile {
+    padding: $space-4;
+  }
+}
+
+@mixin tint($tone: neutral) {
+  @if $tone == success {
+    background-color: $ok-bg;
+    border: 1px solid $ok-line;
+    color: $ok-fg;
+  } @else if $tone == warning {
+    background-color: $warn-bg;
+    border: 1px solid $warn-line;
+    color: $warn-fg;
+  } @else if $tone == danger {
+    background-color: $bad-bg;
+    border: 1px solid $bad-line;
+    color: $bad-fg;
+  } @else if $tone == oem {
+    background-color: $oem-bg;
+    border: 1px solid $oem-line;
+    color: $oem-fg;
+  } @else if $tone == alt {
+    background-color: $alt-bg;
+    border: 1px solid $alt-line;
+    color: $alt-fg;
+  } @else if $tone == info {
+    // Bilgi NÖTR: anlamı ikon taşır (1.4.1). 4.x'te yeşil rol tintiydi ve Alert'in varsayılan tonu
+    // olduğu için yeşili her uyarıya taşıyordu.
+    background-color: $selected-tint;
+    border: 1px solid $border-strong;
+    color: $text;
+  } @else {
+    background-color: $off-bg;
+    border: 1px solid $off-line;
+    color: $off-fg;
+  }
+}
+
+@mixin heading($step: xl, $weight: $weight-semibold) {
+  $index: list.index($font-steps, $step);
+
+  @if $index == null {
+    @error 'heading(): bilinmeyen kademe `#{$step}`. Gecerli olanlar: #{$font-steps}.';
+  }
+
+  $lg-index: list.index($font-steps, lg);
+  $xxl-index: list.index($font-steps, 2xl);
+
+  font-size: var(--ui-font-size-#{$step});
+  font-weight: $weight;
+  line-height: $leading-tight;
+  color: $text;
+
+  @if $index >= $lg-index {
+    font-family: $font-heading;
+  } @else {
+    font-family: $font-ui;
+    line-height: $leading-snug;
+  }
+
+  @if $index >= $xxl-index {
+    letter-spacing: $tracking-tight;
+  } @else if $index >= $lg-index {
+    letter-spacing: $tracking-snug;
+  } @else {
+    letter-spacing: normal;
+  }
+}
+
+@mixin page-title {
+  font-family: $font-heading;
+  font-size: clamp(#{$font-size-2xl}, 2.2vw + 1rem, #{$font-size-3xl});
+  font-weight: $weight-bold;
+  line-height: $leading-tight;
+  letter-spacing: $tracking-tight;
+  color: $text;
+  text-wrap: balance;
+}
+
+@mixin overline {
+  font-family: $font-ui;
+  font-size: $font-size-2xs;
+  font-weight: $weight-semibold;
+  letter-spacing: $tracking-wide;
+  text-transform: uppercase;
+  color: $text-2;
+}
+
+@mixin label {
+  font-family: $font-ui;
+  font-size: $font-size-sm;
+  font-weight: $weight-medium;
+  line-height: $leading-snug;
+  color: $text;
+}
+
+@mixin muted($size: $font-size-sm) {
+  font-size: $size;
+  line-height: $leading-normal;
+  color: $text-2;
+}
+
+@mixin technical-text($size: $font-size-sm) {
+  font-family: $font-mono;
+  font-size: $size;
+  letter-spacing: 0.02em;
+  font-variant-numeric: tabular-nums;
+}
+
+@mixin money($size: $font-size-lg) {
+  font-family: $font-heading;
+  font-size: $size;
+  font-weight: $weight-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: $tracking-tight;
+  white-space: nowrap;
+  color: $text;
+}
+
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+// Odak halkası: kalınlık ve dış pay tüketicinin ezebildiği bileşen değişkenleri (6.0). Site halkayı
+// öğenin kendi yüzeyine çekmek istiyorsa `--ui-ring-offset: -2px` yazar; sınıf başına ezme gerekmez.
+@mixin focus-ring-shape($color: $ring-color, $offset: 2px) {
+  outline: var(--ui-ring-width, 2px) solid $color;
+  outline-offset: var(--ui-ring-offset, #{$offset});
+}
+
+@mixin focus-ring($color: $ring-color, $offset: 2px) {
+  &:focus-visible {
+    @include focus-ring-shape($color, $offset);
+  }
+}
+
+@mixin tap-target($size: $tap-target-size) {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: max(100%, #{$size});
+    height: max(100%, #{$size});
+  }
+}
+
+// PASIF YUZEY: pasiflik dolgunun geri cekilmesiyle bildirilir, metnin silinmesiyle degil.
+// `opacity` YASAK: metni de soluklastirip kontrast esigini sessizce dusuruyor; `text-3` /
+// `surface-2` cifti ise `check-contrast`te olculuyor.
+//
+// Zorlanmis renk kipinde token'lar sistem rengine eziliyor ve `text-3` CanvasText olur, yani
+// opacity'nin o kipte de verdigi pasif ipucu kaybolur. Sistem rengi EBEVEYNDEN MIRAS KALMAZ:
+// kendi rengini yazan her cocuk ayri ayri GrayText ister (olculdu: pasif `fieldset` GrayText,
+// icindeki `legend` CanvasText).
+@mixin passive-text {
+  color: $text-3;
+
+  @media (forced-colors: active) {
+    color: GrayText;
+
+    @content;
+  }
+}
+
+@mixin passive-surface {
+  background-color: $surface-2;
+  border-color: $border;
+  cursor: not-allowed;
+
+  @include passive-text {
+    border-color: GrayText;
+  }
+}
+
+@mixin input-base {
+  width: 100%;
+  font-family: $font-ui;
+  font-size: $font-size-control;
+  line-height: $leading-snug;
+  color: $text;
+  background-color: $surface;
+  border: 1px solid $border-strong;
+  border-radius: $radius-md;
+  padding: $space-3 $space-4;
+  min-height: $tap-target-size;
+  transition:
+    border-color $duration-fast $ease-out,
+    box-shadow $duration-fast $ease-out;
+
+  // Yer tutucu rengi ayrı bir değişken: `text-3` metin rengine yakın temalarda boş alan dolu
+  // görünüyordu (6.0; tüketici `--ui-placeholder` yazar).
+  &::placeholder {
+    color: var(--ui-placeholder, #{$text-3});
+  }
+
+  /*
+   * Hover cizgisi bir ton koyulasir. Eskiden metin tonuna (`text-3`) atliyordu: acik ve ince cizgili
+   * temalarda hover'da alan kalin cerceveli gorunuyordu. Karisim token tanimlamaz; tema degerlerini izler.
+   */
+  &:hover:not(:disabled):not([aria-invalid='true']) {
+    border-color: color-mix(in oklab, #{$border-strong}, #{$text} 30%);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $ring-color;
+    box-shadow: $ring;
+  }
+
+  &:disabled {
+    @include passive-surface;
+  }
+
+  &[aria-invalid='true'] {
+    border-color: $danger-solid;
+
+    &:focus {
+      box-shadow: $ring-danger;
+    }
+  }
+
+  @include reduced-motion {
+    transition: none;
+  }
+}
+
+// YOGUN OLCU (`size="sm"`): arac cubugu ve filtre seridi icin 36px — `Button` SMALL ile ayni
+// yukseklik, yani ayni seritteki dugme, secim ve girdi tek hizada durur. `input-base`ten SONRA
+// gelir. 5.5'e kadar yalniz `Select`te vardi: `DateField` 44px'te kaliyor ve `Select sm` ile ayni
+// seritte 36 / 45,7px'lik kutular cikiyordu (olculdu: bir backtest panelinin ust cubugu, Chrome).
+//
+// `$is-text-entry`: metin girdisi dar ekranda ve dokunmatikte `font-size-control`a (>= 16px)
+// doner — iOS Safari 16px altindaki girdiye odaklaninca sayfayi buyutur ve geri kucultmez.
+// `Select` tetikleyicisi bir dugme; odakta buyutme yok, o yuzden bayrak onda kapali.
+@mixin input-sm($is-text-entry: false) {
+  min-height: 36px;
+  padding-block: 0;
+  padding-inline: $space-3;
+  font-size: $font-size-sm;
+
+  @if $is-text-entry {
+    @include for-mobile {
+      font-size: $font-size-control;
+    }
+
+    @include for-touch {
+      font-size: $font-size-control;
+    }
+  }
+}
+
+@mixin filter-surface {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: $space-3;
+  background-color: $surface;
+  border: 1px solid $border;
+  border-radius: $radius-md;
+  padding: $space-3;
+}
+
+@mixin data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: $font-ui;
+  font-size: $font-size-sm;
+
+  th,
+  td {
+    padding: $space-3;
+    text-align: start;
+    border-bottom: 1px solid $border;
+    vertical-align: middle;
+  }
+
+  thead th {
+    background-color: $surface-2;
+    font-weight: $weight-semibold;
+    color: $text-2;
+    white-space: nowrap;
+  }
+
+  tbody tr:hover {
+    background-color: $surface-inset;
+  }
+}
+
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@mixin hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@mixin custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: $border-strong transparent;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $border-strong;
+    border-radius: $radius-pill;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $text-3;
+  }
+}
+
+@mixin scroll-row($gap: $space-4) {
+  display: flex;
+  gap: $gap;
+  // Kapsayıcı blok: içindeki gizli metin (`visually-hidden`) kabın dışına taşmaz.
+  position: relative;
+  overflow-x: auto;
+  scroll-snap-type: x proximity;
+  -webkit-overflow-scrolling: touch;
+  padding-block: $space-1 $space-3;
+
+  @include hide-scrollbar;
+
+  > * {
+    scroll-snap-align: start;
+    flex-shrink: 0;
+  }
+}
+
+@mixin skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--ui-skeleton-a) 0%,
+    var(--ui-skeleton-b) 50%,
+    var(--ui-skeleton-a) 100%
+  );
+  background-size: 200% 100%;
+  animation: $anim-shimmer $duration-shimmer ease-in-out infinite;
+  border-radius: $radius-sm;
+
+  @include reduced-motion {
+    animation: none;
+  }
+}