@handijit/ui 0.0.0-stage → 2.0.0

package/build/scss/_mixins.scss

@@ -0,0 +1,828 @@
+@use 'sass:list';
+@use 'variables' as *;
+
+@mixin for-mobile {
+  @media (max-width: #{$breakpoint-sm}) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait {
+  @media (max-width: #{$breakpoint-md}) {
+    @content;
+  }
+}
+
+@mixin for-tablet {
+  @media (max-width: #{$breakpoint-lg}) {
+    @content;
+  }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: #{$breakpoint-lg + 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-standard,
+    translate $duration $ease-standard,
+    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;
+  }
+}
+
+// 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-standard,
+    translate $duration-fast $ease-standard;
+
+  &: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-standard,
+      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));
+}
+
+// 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}));
+}
+
+@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-16;
+
+  @include for-tablet {
+    gap: $space-5;
+    padding-block: $space-5 $space-12;
+  }
+
+  @include for-mobile {
+    gap: $space-4;
+    padding-block: $space-4 $space-10;
+  }
+}
+
+@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-md) {
+  background-color: $bg-surface;
+  border: 1px solid $border;
+  border-radius: $radius;
+
+  @include for-mobile {
+    border-radius: $radius-sm;
+  }
+
+  @if $interactive {
+    transition:
+      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-2;
+      transform: translateY(-2px);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: $shadow-1;
+    }
+
+    @include reduced-motion {
+      transition: none;
+
+      &:hover,
+      &:active {
+        transform: none;
+      }
+    }
+  }
+}
+
+@mixin bottom-sheet($max-height: 88dvh, $duration: $duration-base) {
+  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-lg $radius-lg 0 0;
+  background-color: $bg-overlay;
+  color: $text;
+  box-shadow: $shadow-3;
+  overflow: hidden;
+  animation: $anim-slide-up $duration $ease-standard;
+
+  @include focus-ring($focus, -2px);
+
+  &::backdrop {
+    background-color: $scrim;
+    animation: $anim-fade-in $duration $ease-standard;
+  }
+
+  @include reduced-motion {
+    animation: none;
+
+    &::backdrop {
+      animation: none;
+    }
+  }
+}
+
+@mixin panel($radius: $radius-md) {
+  background-color: $bg-surface;
+  border: 1px solid $border;
+  border-radius: $radius;
+  overflow: hidden;
+
+  @include for-mobile {
+    border-radius: $radius-sm;
+  }
+}
+
+@mixin panel-header {
+  @include wrap-row($space-3);
+
+  justify-content: space-between;
+  padding: $space-4 $space-5;
+  border-bottom: 1px solid $border;
+  background-color: $bg-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: $success-bg;
+    border: 1px solid $success-line;
+    color: $success-fg;
+  } @else if $tone == warning {
+    background-color: $warning-bg;
+    border: 1px solid $warning-line;
+    color: $warning-fg;
+  } @else if $tone == danger {
+    background-color: $danger-bg;
+    border: 1px solid $danger-line;
+    color: $danger-fg;
+  } @else if $tone == info {
+    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 {
+    @error 'tint(): unknown tone `#{$tone}`. Valid: success, warning, danger, info, highlight, neutral.';
+  }
+}
+
+// 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}.';
+  }
+
+  @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-body;
+  }
+
+  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;
+}
+
+// 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-body;
+  font-size: $font-size-caption;
+  font-weight: $weight-semibold;
+  letter-spacing: $tracking-wide;
+  text-transform: uppercase;
+  color: $text-2;
+}
+
+@mixin label {
+  font-family: $font-body;
+  font-size: $font-size-small;
+  font-weight: $weight-medium;
+  line-height: $leading-snug;
+  color: $text;
+}
+
+@mixin muted($size: $font-size-small) {
+  font-size: $size;
+  line-height: $leading-normal;
+  color: $text-2;
+}
+
+@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-h4) {
+  font-family: $font-display;
+  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: $focus, $offset: 2px) {
+  outline: var(--ui-ring-width, 2px) solid $color;
+  outline-offset: var(--ui-ring-offset, #{$offset});
+}
+
+@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;
+
+  &::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: $bg-raised;
+  border-color: $border;
+  cursor: not-allowed;
+
+  @include passive-text {
+    border-color: GrayText;
+  }
+}
+
+@mixin input-base {
+  width: 100%;
+  font-family: $font-body;
+  font-size: $font-size-body;
+  line-height: $leading-snug;
+  color: $text;
+  background-color: $bg-surface;
+  border: 1px solid $border-strong;
+  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-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).
+  &::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: $focus;
+    box-shadow: $focus-halo;
+  }
+
+  &:disabled {
+    @include passive-surface;
+  }
+
+  &[aria-invalid='true'] {
+    border-color: $danger-solid;
+
+    &:focus {
+      box-shadow: $danger-halo;
+    }
+  }
+
+  @include reduced-motion {
+    transition: none;
+  }
+}
+
+// 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`: 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: 32px;
+  padding-block: 0;
+  padding-inline: $space-3;
+  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 {
+      font-size: $font-size-control;
+    }
+  }
+
+  @include for-touch {
+    min-height: 32px;
+    font-size: $font-size-small;
+
+    @if $is-text-entry {
+      font-size: $font-size-control;
+    }
+  }
+}
+
+@mixin filter-surface {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: $space-3;
+  background-color: $bg-surface;
+  border: 1px solid $border;
+  border-radius: $radius-sm;
+  padding: $space-3;
+}
+
+@mixin data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: $font-body;
+  font-size: $font-size-small;
+
+  th,
+  td {
+    padding: $space-3;
+    text-align: start;
+    border-bottom: 1px solid $border;
+    vertical-align: middle;
+  }
+
+  thead th {
+    background-color: $bg-raised;
+    font-weight: $weight-semibold;
+    color: $text-2;
+    white-space: nowrap;
+  }
+
+  tbody tr:hover {
+    background-color: $bg-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;
+  }
+}
+
+// `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, #{$bg-disabled} 0%, #{$border} 50%, #{$bg-disabled} 100%);
+  background-size: 200% 100%;
+  animation: $anim-shimmer $duration-shimmer ease-in-out infinite;
+  border-radius: $radius-xs;
+
+  @include reduced-motion {
+    animation: none;
+  }
+}