@handijit/ui 1.0.0 → 2.0.0

package/build/scss/_mixins.scss

@@ -2,25 +2,25 @@
 @use 'variables' as *;
 
 @mixin for-mobile {
-  @media (max-width: #{$breakpoint-mobile}) {
+  @media (max-width: #{$breakpoint-sm}) {
     @content;
   }
 }
 
 @mixin for-tablet-portrait {
-  @media (max-width: #{$breakpoint-tablet-portrait}) {
+  @media (max-width: #{$breakpoint-md}) {
     @content;
   }
 }
 
 @mixin for-tablet {
-  @media (max-width: #{$breakpoint-tablet}) {
+  @media (max-width: #{$breakpoint-lg}) {
     @content;
   }
 }
 
 @mixin for-desktop-up {
-  @media (min-width: #{$breakpoint-tablet + 1px}) {
+  @media (min-width: #{$breakpoint-lg + 1px}) {
     @content;
   }
 }
@@ -51,8 +51,8 @@
   }
 
   transition:
-    opacity $duration $ease-out,
-    translate $duration $ease-out,
+    opacity $duration $ease-standard,
+    translate $duration $ease-standard,
     overlay $duration allow-discrete,
     display $duration allow-discrete;
 
@@ -79,25 +79,13 @@
   }
 }
 
-// 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) {
+// The defaults are state layers: a transparent row darkens (light) or lightens (dark) on ANY
+// surface, a floating one included. A row with a fill of its own passes its own three colours.
+@mixin interactive-surface($rest: transparent, $hover: $state-hover, $pressed: $state-pressed) {
   background-color: $rest;
   transition:
-    background-color $duration-fast $ease-out,
-    translate $duration-instant $ease-out;
+    background-color $duration-fast $ease-standard,
+    translate $duration-fast $ease-standard;
 
   &:hover:not(:disabled):not([aria-disabled='true']) {
     background-color: $hover;
@@ -121,7 +109,7 @@
   &::backdrop {
     opacity: 0;
     transition:
-      opacity $duration $ease-out,
+      opacity $duration $ease-standard,
       overlay $duration allow-discrete,
       display $duration allow-discrete;
   }
@@ -154,8 +142,15 @@
   padding-right: max(#{$padding}, env(safe-area-inset-right, 0px));
 }
 
+// Written by `useSheetViewport` while a sheet is open: the visual viewport's height and the part of
+// the layout viewport the on-screen keyboard covers. Component-private, not theme values.
+$sheet-height: var(--ui-sheet-height, 100dvh);
+$sheet-inset-bottom: var(--ui-sheet-inset-bottom, 0px);
 $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-bottom, 0px))'};
 
+// Height of the application's sticky header; the application sets `--ui-header-height`.
+$header-offset: var(--ui-header-height, 0px);
+
 @mixin safe-bottom($padding: $space-3) {
   padding-bottom: max(#{$padding}, calc(env(safe-area-inset-bottom, 0px) - #{$sheet-lift}));
 }
@@ -182,16 +177,16 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   display: flex;
   flex-direction: column;
   gap: $gap;
-  padding-block: $space-6 $space-9;
+  padding-block: $space-6 $space-16;
 
   @include for-tablet {
     gap: $space-5;
-    padding-block: $space-5 $space-8;
+    padding-block: $space-5 $space-12;
   }
 
   @include for-mobile {
     gap: $space-4;
-    padding-block: $space-4 $space-7;
+    padding-block: $space-4 $space-10;
   }
 }
 
@@ -232,30 +227,30 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
 
 // ⚠ 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;
+@mixin card($interactive: false, $radius: $radius-md) {
+  background-color: $bg-surface;
   border: 1px solid $border;
   border-radius: $radius;
 
   @include for-mobile {
-    border-radius: $radius-md;
+    border-radius: $radius-sm;
   }
 
   @if $interactive {
     transition:
-      border-color $duration-fast $ease-out,
-      box-shadow $duration-fast $ease-out,
-      transform $duration-fast $ease-out;
+      border-color $duration-fast $ease-standard,
+      box-shadow $duration-fast $ease-standard,
+      transform $duration-fast $ease-standard;
 
     &:hover {
       border-color: $border-strong;
-      box-shadow: $shadow-md;
+      box-shadow: $shadow-2;
       transform: translateY(-2px);
     }
 
     &:active {
       transform: translateY(0);
-      box-shadow: $shadow-xs;
+      box-shadow: $shadow-1;
     }
 
     @include reduced-motion {
@@ -269,7 +264,7 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   }
 }
 
-@mixin bottom-sheet($max-height: 88dvh, $duration: $duration-normal) {
+@mixin bottom-sheet($max-height: 88dvh, $duration: $duration-base) {
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -283,16 +278,18 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   margin: 0;
   padding: 0;
   border: none;
-  border-radius: $radius-xl $radius-xl 0 0;
-  background-color: $surface;
+  border-radius: $radius-lg $radius-lg 0 0;
+  background-color: $bg-overlay;
   color: $text;
-  box-shadow: $shadow-xl;
+  box-shadow: $shadow-3;
   overflow: hidden;
-  animation: $anim-slide-up $duration $ease-out;
+  animation: $anim-slide-up $duration $ease-standard;
+
+  @include focus-ring($focus, -2px);
 
   &::backdrop {
     background-color: $scrim;
-    animation: $anim-fade-in $duration $ease-out;
+    animation: $anim-fade-in $duration $ease-standard;
   }
 
   @include reduced-motion {
@@ -304,14 +301,14 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   }
 }
 
-@mixin panel($radius: $radius-lg) {
-  background-color: $surface;
+@mixin panel($radius: $radius-md) {
+  background-color: $bg-surface;
   border: 1px solid $border;
   border-radius: $radius;
   overflow: hidden;
 
   @include for-mobile {
-    border-radius: $radius-md;
+    border-radius: $radius-sm;
   }
 }
 
@@ -321,7 +318,7 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   justify-content: space-between;
   padding: $space-4 $space-5;
   border-bottom: 1px solid $border;
-  background-color: $surface;
+  background-color: $bg-surface;
 
   @include for-mobile {
     padding: $space-3 $space-4;
@@ -340,82 +337,88 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
 
 @mixin tint($tone: neutral) {
   @if $tone == success {
-    background-color: $ok-bg;
-    border: 1px solid $ok-line;
-    color: $ok-fg;
+    background-color: $success-bg;
+    border: 1px solid $success-line;
+    color: $success-fg;
   } @else if $tone == warning {
-    background-color: $warn-bg;
-    border: 1px solid $warn-line;
-    color: $warn-fg;
+    background-color: $warning-bg;
+    border: 1px solid $warning-line;
+    color: $warning-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;
+    background-color: $danger-bg;
+    border: 1px solid $danger-line;
+    color: $danger-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;
+    background-color: $info-bg;
+    border: 1px solid $info-line;
+    color: $info-fg;
+  } @else if $tone == highlight {
+    // Turquoise is a fill: the line is mixed from it, the text uses the readable `highlight-text`.
+    background-color: $highlight-soft;
+    border: 1px solid color-mix(in srgb, #{$highlight} 45%, transparent);
+    color: $highlight-text;
+  } @else if $tone == neutral {
+    background-color: $bg-raised;
+    border: 1px solid $border;
+    color: $text-2;
   } @else {
-    background-color: $off-bg;
-    border: 1px solid $off-line;
-    color: $off-fg;
+    @error 'tint(): unknown tone `#{$tone}`. Valid: success, warning, danger, info, highlight, neutral.';
   }
 }
 
-@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}.';
+// A whole design type role: family, size, line height, weight, letter spacing and stretch.
+// Roles: display, h1, h2, h3, h4, lead, body, small, caption, code.
+@mixin type($role: body) {
+  @if list.index($type-roles, $role) == null {
+    @error 'type(): unknown role `#{$role}`. Valid: #{$type-roles}.';
   }
 
-  $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;
+  @if list.index((display, h1, h2, h3, h4), $role) != null {
+    font-family: $font-display;
+  } @else if $role == code {
+    font-family: $font-mono;
   } @else {
-    font-family: $font-ui;
-    line-height: $leading-snug;
+    font-family: $font-body;
   }
 
-  @if $index >= $xxl-index {
-    letter-spacing: $tracking-tight;
-  } @else if $index >= $lg-index {
-    letter-spacing: $tracking-snug;
-  } @else {
-    letter-spacing: normal;
+  font-size: var(--hd-type-#{$role}-size);
+  font-weight: var(--hd-type-#{$role}-weight);
+  font-stretch: var(--hd-type-#{$role}-stretch);
+  line-height: var(--hd-type-#{$role}-line-height);
+  letter-spacing: var(--hd-type-#{$role}-letter-spacing);
+}
+
+// A heading in one of the design heading roles, in the text colour.
+@mixin heading($role: h3) {
+  @if list.index((display, h1, h2, h3, h4), $role) == null {
+    @error 'heading(): `#{$role}` is not a heading role. Valid: display, h1, h2, h3, h4.';
   }
+
+  @include type($role);
+
+  color: $text;
 }
 
-@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;
+// The title of a block inside a surface (panel, dialog, sheet): body size in the body font. The
+// smallest heading role (h4, 18px) is too loud next to 13-15px content.
+@mixin block-title {
+  font-family: $font-body;
+  font-size: $font-size-body;
+  font-weight: $weight-semibold;
+  line-height: $leading-snug;
+  letter-spacing: normal;
   color: $text;
+}
+
+@mixin page-title {
+  @include heading(h2);
+
   text-wrap: balance;
 }
 
 @mixin overline {
-  font-family: $font-ui;
-  font-size: $font-size-2xs;
+  font-family: $font-body;
+  font-size: $font-size-caption;
   font-weight: $weight-semibold;
   letter-spacing: $tracking-wide;
   text-transform: uppercase;
@@ -423,28 +426,28 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
 }
 
 @mixin label {
-  font-family: $font-ui;
-  font-size: $font-size-sm;
+  font-family: $font-body;
+  font-size: $font-size-small;
   font-weight: $weight-medium;
   line-height: $leading-snug;
   color: $text;
 }
 
-@mixin muted($size: $font-size-sm) {
+@mixin muted($size: $font-size-small) {
   font-size: $size;
   line-height: $leading-normal;
   color: $text-2;
 }
 
-@mixin technical-text($size: $font-size-sm) {
+@mixin technical-text($size: $font-size-small) {
   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;
+@mixin money($size: $font-size-h4) {
+  font-family: $font-display;
   font-size: $size;
   font-weight: $weight-bold;
   font-variant-numeric: tabular-nums;
@@ -462,17 +465,117 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
 
 // 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) {
+@mixin focus-ring-shape($color: $focus, $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) {
+@mixin focus-ring($color: $focus, $offset: 2px) {
   &:focus-visible {
     @include focus-ring-shape($color, $offset);
   }
 }
 
+// A checkbox or a radio DRAWN with the theme. The native control keeps the browser's own greys in
+// the dark theme and only takes the checked fill from `accent-color`. The mark is a clip-path, not
+// an image: nothing here needs `img-src data:` in a Content-Security-Policy.
+// Forced colours: the native control comes back, it already follows the system palette.
+@mixin choice-control($shape: check) {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  border: 1.5px solid $text-3;
+  border-radius: $radius-xs;
+  background-color: $bg-surface;
+  cursor: pointer;
+  transition:
+    background-color $duration-fast $ease-standard,
+    border-color $duration-fast $ease-standard;
+
+  @if $shape == radio {
+    border-radius: $radius-pill;
+  }
+
+  &::before {
+    content: '';
+    width: 10px;
+    height: 10px;
+    background-color: $on-primary;
+    scale: 0;
+    transition: scale $duration-fast $ease-standard;
+
+    @if $shape == radio {
+      width: 8px;
+      height: 8px;
+      border-radius: $radius-pill;
+    } @else {
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    }
+  }
+
+  &:hover:not(:disabled) {
+    border-color: $text-2;
+  }
+
+  &:checked,
+  &:indeterminate {
+    background-color: $primary;
+    border-color: $primary;
+
+    &::before {
+      scale: 1;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: $primary-hover;
+      border-color: $primary-hover;
+    }
+  }
+
+  @if $shape != radio {
+    &:indeterminate::before {
+      clip-path: inset(40% 5%);
+    }
+  }
+
+  &:disabled {
+    background-color: $bg-disabled;
+    border-color: $border-strong;
+    cursor: not-allowed;
+  }
+
+  // A passive checked control gives the role colour back; the MARK carries the choice.
+  &:checked:disabled,
+  &:indeterminate:disabled {
+    background-color: $text-disabled;
+    border-color: transparent;
+
+    &::before {
+      background-color: $bg-surface;
+    }
+  }
+
+  @include reduced-motion {
+    transition: none;
+
+    &::before {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    appearance: auto;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
 @mixin tap-target($size: $tap-target-size) {
   position: relative;
 
@@ -506,7 +609,7 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
 }
 
 @mixin passive-surface {
-  background-color: $surface-2;
+  background-color: $bg-raised;
   border-color: $border;
   cursor: not-allowed;
 
@@ -517,18 +620,30 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
 
 @mixin input-base {
   width: 100%;
-  font-family: $font-ui;
-  font-size: $font-size-control;
+  font-family: $font-body;
+  font-size: $font-size-body;
   line-height: $leading-snug;
   color: $text;
-  background-color: $surface;
+  background-color: $bg-surface;
   border: 1px solid $border-strong;
-  border-radius: $radius-md;
-  padding: $space-3 $space-4;
-  min-height: $tap-target-size;
+  border-radius: $radius-sm;
+  padding: $space-2 $space-3;
+  // The height of a MEDIUM button: a field and a button on one row share one line.
+  min-height: 40px;
+
+  // A finger needs the full tap target, and iOS Safari zooms into a field smaller than 16px.
+  @include for-mobile {
+    min-height: $tap-target-size;
+    font-size: $font-size-control;
+  }
+
+  @include for-touch {
+    min-height: $tap-target-size;
+    font-size: $font-size-control;
+  }
   transition:
-    border-color $duration-fast $ease-out,
-    box-shadow $duration-fast $ease-out;
+    border-color $duration-fast $ease-standard,
+    box-shadow $duration-fast $ease-standard;
 
   // 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).
@@ -546,8 +661,8 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
 
   &:focus {
     outline: none;
-    border-color: $ring-color;
-    box-shadow: $ring;
+    border-color: $focus;
+    box-shadow: $focus-halo;
   }
 
   &:disabled {
@@ -558,7 +673,7 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
     border-color: $danger-solid;
 
     &:focus {
-      box-shadow: $ring-danger;
+      box-shadow: $danger-halo;
     }
   }
 
@@ -567,26 +682,33 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   }
 }
 
-// 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).
+// DENSE SIZE (`size="sm"`): 32px — the height of a SMALL button, so a button, a select and a field
+// in one toolbar or filter bar share one line. Comes AFTER `input-base`.
 //
-// `$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.
+// `$is-text-entry`: a text field goes back to `font-size-control` (>= 16px) on a narrow or touch
+// screen — iOS Safari zooms the page when a focused field is smaller and never zooms back. A
+// `Select` trigger is a button: no zoom on focus, so the flag is off there.
 @mixin input-sm($is-text-entry: false) {
-  min-height: 36px;
+  min-height: 32px;
   padding-block: 0;
   padding-inline: $space-3;
-  font-size: $font-size-sm;
+  font-size: $font-size-small;
+
+  // The dense size stays dense on a phone too; `input-base` raised the box there.
+  @include for-mobile {
+    min-height: 32px;
+    font-size: $font-size-small;
 
-  @if $is-text-entry {
-    @include for-mobile {
+    @if $is-text-entry {
       font-size: $font-size-control;
     }
+  }
+
+  @include for-touch {
+    min-height: 32px;
+    font-size: $font-size-small;
 
-    @include for-touch {
+    @if $is-text-entry {
       font-size: $font-size-control;
     }
   }
@@ -597,17 +719,17 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   flex-wrap: wrap;
   align-items: flex-end;
   gap: $space-3;
-  background-color: $surface;
+  background-color: $bg-surface;
   border: 1px solid $border;
-  border-radius: $radius-md;
+  border-radius: $radius-sm;
   padding: $space-3;
 }
 
 @mixin data-table {
   width: 100%;
   border-collapse: collapse;
-  font-family: $font-ui;
-  font-size: $font-size-sm;
+  font-family: $font-body;
+  font-size: $font-size-small;
 
   th,
   td {
@@ -618,14 +740,14 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   }
 
   thead th {
-    background-color: $surface-2;
+    background-color: $bg-raised;
     font-weight: $weight-semibold;
     color: $text-2;
     white-space: nowrap;
   }
 
   tbody tr:hover {
-    background-color: $surface-inset;
+    background-color: $bg-inset;
   }
 }
 
@@ -693,16 +815,12 @@ $sheet-lift: #{'max(env(safe-area-inset-bottom, 0px), var(--ui-sheet-inset-botto
   }
 }
 
+// `bg-inset` is a WELL — near black in the dark theme, where a placeholder would read as a hole.
 @mixin skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--ui-skeleton-a) 0%,
-    var(--ui-skeleton-b) 50%,
-    var(--ui-skeleton-a) 100%
-  );
+  background: linear-gradient(90deg, #{$bg-disabled} 0%, #{$border} 50%, #{$bg-disabled} 100%);
   background-size: 200% 100%;
   animation: $anim-shimmer $duration-shimmer ease-in-out infinite;
-  border-radius: $radius-sm;
+  border-radius: $radius-xs;
 
   @include reduced-motion {
     animation: none;