@inntechcorp/it-design 3.1.24 → 4.0.0-beta.2

package/dist/css/alert.css

@@ -0,0 +1,122 @@
+/* ================================= */
+/* ALERT COMPONENT STYLES            */
+/* ================================= */
+@layer components {
+
+  /* ===== BASE ===== */
+  .itd-alert {
+    row-gap: calc(var(--itd-spacing) * 0.5);
+
+    &:has(> svg) {
+      grid-template-columns: calc(var(--itd-spacing) * 4) 1fr;
+      column-gap: calc(var(--itd-spacing) * 3);
+    }
+
+    &:not(:has(> svg)) {
+      grid-template-columns: 0 1fr;
+      column-gap: 0;
+    }
+
+    & > svg {
+      width: calc(var(--itd-spacing) * 4);
+      height: calc(var(--itd-spacing) * 4);
+      --itd-translate-y: calc(var(--itd-spacing) * 0.5);
+      translate: var(--itd-translate-x) var(--itd-translate-y);
+    }
+  }
+
+  .itd-alert .itd-alert-title {
+    color: var(--itd-color-text);
+  }
+
+  .itd-alert .itd-alert-description {
+    color: var(--itd-color-text-muted);
+  }
+
+  /* ===== NEUTRAL ===== */
+  .itd-alert.itd-alert-neutral.itd-alert-default {
+    background: var(--itd-card);
+    border: 1px solid var(--itd-color-border);
+  }
+
+  .itd-alert.itd-alert-neutral.itd-alert-filled {
+    background: var(--itd-color-background-alt);
+    border: 1px solid transparent;
+  }
+
+  .itd-alert.itd-alert-neutral.itd-alert-default,
+  .itd-alert.itd-alert-neutral.itd-alert-filled {
+    & .itd-alert-title { color: var(--itd-color-text); }
+    & .itd-alert-description { color: var(--itd-color-text-muted); }
+    & svg { color: var(--itd-color-text); }
+  }
+
+  /* ===== SUCCESS ===== */
+  .itd-alert.itd-alert-success.itd-alert-default {
+    border: 1px solid var(--itd-color-alert-success-border);
+  }
+
+  .itd-alert.itd-alert-success.itd-alert-filled {
+    border: 1px solid transparent;
+  }
+
+  .itd-alert.itd-alert-success.itd-alert-default,
+  .itd-alert.itd-alert-success.itd-alert-filled {
+    background: var(--itd-color-alert-success-background);
+    & .itd-alert-title { color: var(--itd-color-alert-success-title); }
+    & .itd-alert-description { color: var(--itd-color-alert-success-text); }
+    & svg { color: var(--itd-color-alert-success-title); }
+  }
+
+  /* ===== INFO ===== */
+  .itd-alert.itd-alert-info.itd-alert-default {
+    border: 1px solid var(--itd-color-alert-info-border);
+  }
+
+  .itd-alert.itd-alert-info.itd-alert-filled {
+    border: 1px solid transparent;
+  }
+
+  .itd-alert.itd-alert-info.itd-alert-default,
+  .itd-alert.itd-alert-info.itd-alert-filled {
+    background: var(--itd-color-alert-info-background);
+    & .itd-alert-title { color: var(--itd-color-alert-info-title); }
+    & .itd-alert-description { color: var(--itd-color-alert-info-text); }
+    & svg { color: var(--itd-color-alert-info-title); }
+  }
+
+  /* ===== WARNING ===== */
+  .itd-alert.itd-alert-warning.itd-alert-default {
+    border: 1px solid var(--itd-color-alert-warning-border);
+  }
+
+  .itd-alert.itd-alert-warning.itd-alert-filled {
+    border: 1px solid transparent;
+  }
+
+  .itd-alert.itd-alert-warning.itd-alert-default,
+  .itd-alert.itd-alert-warning.itd-alert-filled {
+    background: var(--itd-color-alert-warning-background);
+    & .itd-alert-title { color: var(--itd-color-alert-warning-title); }
+    & .itd-alert-description { color: var(--itd-color-alert-warning-text); }
+    & svg { color: var(--itd-color-alert-warning-title); }
+  }
+
+  /* ===== ERROR ===== */
+  .itd-alert.itd-alert-error.itd-alert-default {
+    border: 1px solid var(--itd-color-alert-error-border);
+  }
+
+  .itd-alert.itd-alert-error.itd-alert-filled {
+    border: 1px solid transparent;
+  }
+
+  .itd-alert.itd-alert-error.itd-alert-default,
+  .itd-alert.itd-alert-error.itd-alert-filled {
+    background: var(--itd-color-alert-error-background);
+    & .itd-alert-title { color: var(--itd-color-alert-error-title); }
+    & .itd-alert-description { color: var(--itd-color-alert-error-text); }
+    & svg { color: var(--itd-color-alert-error-title); }
+  }
+
+}

package/dist/css/base.css

@@ -0,0 +1,392 @@
+/* ================================= */
+/* BASE - Design Tokens & Core Styles */
+/* ITD Design System Foundation */
+/* ================================= */
+@layer base {
+  :root,
+  [data-theme="light"] {
+    /* ================================= */
+    /* COLOR SCHEME */
+    /* ================================= */
+    color-scheme: light;
+    
+    /* ================================= */
+    /* TEXT RENDERING */
+    /* ================================= */
+  }
+
+  @supports (text-wrap: pretty) {
+    :root,
+    [data-theme="light"] {
+      text-wrap: pretty;
+    }
+  }
+
+  @supports (hanging-punctuation: first allow-end) {
+    :root,
+    [data-theme="light"] {
+      hanging-punctuation: first allow-end;
+    }
+  }
+
+  :root,
+  [data-theme="light"] {
+    
+    /* ================================= */
+    /* TYPOGRAPHY */
+    /* ================================= */
+    --itd-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+                    "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial,
+                    "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",
+                    sans-serif;
+    
+    --itd-text-xs: .75rem;
+    --itd-text-xs--line-height: calc(1 / .75);
+    --itd-text-sm: .875rem;
+    --itd-text-sm--line-height: calc(1.25 / .875);
+    --itd-text-default: 1rem;
+    --itd-text-default--line-height: calc(1.5 / 1);
+    --itd-text-lg: 1.125rem;
+    --itd-text-lg--line-height: calc(1.75 / 1.125);
+    --itd-text-xl: 1.25rem;
+    --itd-text-xl--line-height: calc(1.75 / 1.25);
+    --itd-text-2xl: 1.5rem;
+    --itd-text-2xl--line-height: calc(2 / 1.5);
+    --itd-text-3xl: 1.875rem;
+    --itd-text-3xl--line-height: calc(2.25 / 1.875);
+    --itd-text-4xl: 2.25rem;
+    --itd-text-4xl--line-height: calc(2.5 / 2.25);
+    --itd-text-5xl: 3rem;
+    --itd-text-5xl--line-height: 1;
+    --itd-text-7xl: 4.5rem;
+    --itd-text-7xl--line-height: 1;
+    
+    --itd-font-weight-normal: 400;
+    --itd-font-weight-medium: 500;
+    --itd-font-weight-semibold: 600;
+    --itd-font-weight-bold: 700;
+    --itd-font-weight-extrabold: 800;
+
+    /* ================================= */
+    /* TRACKING */
+    /* ================================= */
+    --itd-tracking-tighter: -.05em;
+    --itd-tracking-tight: -.025em;
+    --itd-tracking-widest: .1em;
+
+    /* ================================= */
+    /* SPACING */
+    /* ================================= */
+    --itd-spacing: .25rem;
+
+    /* ================================= */
+    /* COMPONENT SIZE SCALE              */
+    /* Button, Input, Select, DatePicker */
+    /* TextArea, Upload — hepsi bu       */
+    /* token'ları kullanır.              */
+    /* ================================= */
+    --itd-size-xs-h:     calc(var(--itd-spacing) * 6);     /* 24px */
+    --itd-size-xs-px:    calc(var(--itd-spacing) * 2);     /* 8px  */
+    --itd-size-xs-gap:   calc(var(--itd-spacing) * 1);     /* 4px  */
+    --itd-size-xs-font:  var(--itd-text-xs);
+    --itd-size-xs-icon:  calc(var(--itd-spacing) * 3);     /* 12px */
+
+    --itd-size-sm-h:     calc(var(--itd-spacing) * 7);     /* 28px */
+    --itd-size-sm-px:    calc(var(--itd-spacing) * 3);     /* 12px */
+    --itd-size-sm-gap:   calc(var(--itd-spacing) * 1.5);   /* 6px  */
+    --itd-size-sm-font:  var(--itd-text-xs);
+    --itd-size-sm-icon:  calc(var(--itd-spacing) * 3.5);   /* 14px */
+
+    --itd-size-md-h:     calc(var(--itd-spacing) * 8);     /* 32px */
+    --itd-size-md-px:    calc(var(--itd-spacing) * 3);     /* 12px */
+    --itd-size-md-gap:   calc(var(--itd-spacing) * 1.5);   /* 6px  */
+    --itd-size-md-font:  var(--itd-text-sm);
+    --itd-size-md-icon:  calc(var(--itd-spacing) * 4);     /* 16px */
+
+    --itd-size-df-h:     calc(var(--itd-spacing) * 9);     /* 36px */
+    --itd-size-df-px:    calc(var(--itd-spacing) * 4);     /* 16px */
+    --itd-size-df-gap:   calc(var(--itd-spacing) * 2);     /* 8px  */
+    --itd-size-df-font:  var(--itd-text-sm);
+    --itd-size-df-icon:  calc(var(--itd-spacing) * 4);     /* 16px */
+
+    --itd-size-lg-h:     calc(var(--itd-spacing) * 10);    /* 40px */
+    --itd-size-lg-px:    calc(var(--itd-spacing) * 6);     /* 24px */
+    --itd-size-lg-gap:   calc(var(--itd-spacing) * 2);     /* 8px  */
+    --itd-size-lg-font:  var(--itd-text-default);
+    --itd-size-lg-icon:  calc(var(--itd-spacing) * 5);     /* 20px */
+
+    --itd-size-xlg-h:    calc(var(--itd-spacing) * 11);    /* 44px */
+    --itd-size-xlg-px:   calc(var(--itd-spacing) * 8);     /* 32px */
+    --itd-size-xlg-gap:  calc(var(--itd-spacing) * 2);     /* 8px  */
+    --itd-size-xlg-font: var(--itd-text-lg);
+    --itd-size-xlg-icon: calc(var(--itd-spacing) * 6);     /* 24px */
+
+    /* ================================= */
+    /* BORDER RADIUS */
+    /* ================================= */
+    --itd-radius: .625rem;
+    --itd-radius-xs: .125rem;
+    --itd-radius-sm: calc(var(--itd-radius) - 4px);
+    --itd-radius-md: calc(var(--itd-radius) - 2px);
+    --itd-radius-lg: var(--itd-radius);
+    --itd-radius-xl: calc(var(--itd-radius) + 4px);
+    --itd-radius-2xl: 1rem;
+
+    /* ================================= */
+    /* LAYOUT */
+    /* ================================= */
+    --itd-container-xs: 20rem;
+    --itd-container-sm: 24rem;
+    --itd-container-md: 28rem;
+    --itd-container-lg: 32rem;
+    --itd-container-xl: 36rem;
+    --itd-container-2xl: 42rem;
+    --itd-container-3xl: 48rem;
+    --itd-container-4xl: 56rem;
+
+    /* ================================= */
+    /* THEME COLORS (Light Theme Default) */
+    /* ================================= */
+    /* Bu değerler ITDThemeProvider tarafından otomatik güncellenir */
+    --itd-text: oklch(0.35 0.02 250);
+    --itd-text-muted: oklch(0.55 0.02 250);
+    --itd-border: oklch(0.85 0.01 250);
+    --itd-ring: oklch(0.62 0.18 250);
+    --itd-link: oklch(0.62 0.18 250);
+    --itd-link-hover: oklch(0.52 0.18 250);
+    --itd-selection-bg: oklch(0.145 0 0);
+    --itd-selection-fg: oklch(1 0 0);
+    --itd-placeholder-color: oklch(0.65 0.01 250);
+    --itd-scrollbar-thumb: oklch(0.16 0.04 250 / 0.5);
+    --itd-scrollbar-thumb-hover: oklch(0.16 0.04 250);
+    
+  }
+
+  body,
+  .itd-provider,
+  #itd-modal-root,
+  #itd-tooltip-root,
+  #itd-notification-root {
+    font-family: var(--itd-font-sans);
+    color: var(--itd-text);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  a {
+    cursor: pointer;
+    color: inherit;
+    text-decoration-line: none;
+    text-underline-offset: 4px;
+    border-radius: var(--itd-radius-xs);
+  }
+
+  a:hover {
+    text-decoration-line: underline;
+  }
+
+  a:focus-visible {
+    outline: 2px solid var(--itd-ring);
+    outline-offset: 2px;
+  }
+
+  * {
+    border-color: var(--itd-border);
+    outline-color: var(--itd-ring);
+  }
+
+  /* Mouse tıklamalarında outline gizle, sadece klavyede göster */
+  :focus {
+    outline: none;
+  }
+
+  /* Sadece non-form elementler için global ring */
+  /* Form elementleri kendi component wrapper'larında yönetilir */
+  :focus-visible:not(:is(input, select, textarea, button)) {
+    outline: 2px solid var(--itd-ring);
+    outline-offset: 2px;
+  }
+
+  /* Yüksek kontrast tercihinde outline daha belirgin */
+  @media (prefers-contrast: more) {
+    :focus-visible {
+      outline-width: 3px;
+    }
+  }
+
+  ::selection {
+    background-color: var(--itd-selection-bg);
+    color: var(--itd-selection-fg);
+  }
+
+  /* ========== Dark Theme Color Scheme ========== */
+  /* Styled-components theme ile yönetiliyor ama başlangıç değerleri */
+  [data-theme="dark"] {
+    color-scheme: dark;
+    
+    /* ITDThemeProvider tarafından override edilir */
+    --itd-text: oklch(0.85 0.02 250);
+    --itd-text-muted: oklch(0.65 0.02 250);
+    --itd-border: oklch(0.30 0.01 250);
+    --itd-ring: oklch(0.72 0.20 250);
+    --itd-link: oklch(0.75 0.20 250);
+    --itd-link-hover: oklch(0.70 0.20 250);
+    --itd-selection-bg: oklch(0.85 0.02 250);
+    --itd-selection-fg: oklch(0.12 0 0);
+    --itd-placeholder-color: oklch(0.62 0.02 250);
+    --itd-scrollbar-thumb: oklch(0.63 0.2 256.42 / 0.5);
+    --itd-scrollbar-thumb-hover: oklch(0.63 0.2 256.42);
+  }
+
+  /* ========== Smooth Scrolling (Opsiyonel) ========== */
+  /* Sadece klavye ile sayfa içi gezinmede smooth scroll */
+  html:focus-within {
+    scroll-behavior: smooth;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+      scroll-behavior: auto;
+    }
+  }
+
+  /* ========== Scrollbar Styling ========== */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--itd-scrollbar-thumb) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: calc(var(--itd-spacing) * 3);
+    height: calc(var(--itd-spacing) * 3);
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--itd-scrollbar-thumb);
+    border-radius: 9999px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--itd-scrollbar-thumb-hover);
+  }
+
+  /* Yüksek kontrast tercihinde scrollbar daha belirgin */
+  @media (prefers-contrast: more) {
+    :root {
+      --itd-scrollbar-thumb: oklch(0.12 0.05 250 / 0.7);
+      --itd-scrollbar-thumb-hover: oklch(0.12 0.05 250);
+    }
+    
+    [data-theme="dark"] {
+      --itd-scrollbar-thumb: oklch(0.70 0.25 256.42 / 0.7);
+      --itd-scrollbar-thumb-hover: oklch(0.70 0.25 256.42);
+    }
+  }
+
+  /* ========== Skip Link (Accessibility) ========== */
+  .skip-link {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    transform: translateY(-150%);
+    background: Canvas;
+    color: CanvasText;
+    padding: calc(var(--itd-spacing) * 2) calc(var(--itd-spacing) * 4);
+    z-index: 9999;
+    text-decoration: none;
+    border-radius: var(--itd-spacing);
+  }
+
+  .skip-link:focus {
+    transform: translateY(0);
+    outline: 2px solid var(--itd-ring);
+    outline-offset: 2px;
+  }
+
+  /* ================================= */
+  /* THEME TRANSITION KILLER           */
+  /* ================================= */
+  .itd-no-transition,
+  .itd-no-transition *,
+  .itd-no-transition *::before,
+  .itd-no-transition *::after {
+    transition: none !important;
+  }
+
+}
+
+/* ================================= */
+/* COMPONENT SIZE CLASSES            */
+/* Tüm interactive component'lar     */
+/* (Button, Input, Select, vb.) bu   */
+/* class'ları ortak kullanır.        */
+/* ================================= */
+@layer components {
+
+  .itd-size-xs {
+    height: var(--itd-size-xs-h);
+    padding-inline: var(--itd-size-xs-px);
+    gap: var(--itd-size-xs-gap);
+    font-size: var(--itd-size-xs-font);
+    font-weight: var(--itd-font-weight-medium);
+  }
+
+  .itd-size-sm {
+    height: var(--itd-size-sm-h);
+    padding-inline: var(--itd-size-sm-px);
+    gap: var(--itd-size-sm-gap);
+    font-size: var(--itd-size-sm-font);
+    font-weight: var(--itd-font-weight-medium);
+  }
+
+  .itd-size-md {
+    height: var(--itd-size-md-h);
+    padding-inline: var(--itd-size-md-px);
+    gap: var(--itd-size-md-gap);
+    font-size: var(--itd-size-md-font);
+    font-weight: var(--itd-font-weight-medium);
+  }
+
+  .itd-size-df {
+    height: var(--itd-size-df-h);
+    padding-inline: var(--itd-size-df-px);
+    gap: var(--itd-size-df-gap);
+    font-size: var(--itd-size-df-font);
+    font-weight: var(--itd-font-weight-medium);
+  }
+
+  .itd-size-lg {
+    height: var(--itd-size-lg-h);
+    padding-inline: var(--itd-size-lg-px);
+    gap: var(--itd-size-lg-gap);
+    font-size: var(--itd-size-lg-font);
+    font-weight: var(--itd-font-weight-medium);
+  }
+
+  .itd-size-xlg {
+    height: var(--itd-size-xlg-h);
+    padding-inline: var(--itd-size-xlg-px);
+    gap: var(--itd-size-xlg-gap);
+    font-size: var(--itd-size-xlg-font);
+    font-weight: var(--itd-font-weight-medium);
+  }
+
+}
+
+/* ================================= */
+/* SPINNER ANIMATION                 */
+/* ================================= */
+@keyframes itd-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.animate-spin {
+  animation: itd-spin 0.75s linear infinite;
+}