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

package/dist/css/properties.css

@@ -0,0 +1,299 @@
+@layer properties {
+
+  @property --itd-content {
+    syntax: "*"; inherits: false; initial-value: "";
+  }
+  @property --itd-border-style {
+    syntax: "*"; inherits: false; initial-value: solid;
+  }
+
+  /* initial -> normal (≈400) */
+  @property --itd-font-weight {
+    syntax: "*"; inherits: false; initial-value: normal;
+  }
+
+  @property --itd-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+  @property --itd-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+  @property --itd-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
+
+  @property --itd-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
+  @property --itd-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
+  @property --itd-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
+
+  @property --itd-rotate-x {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+  @property --itd-rotate-y {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+  @property --itd-rotate-z {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+
+  @property --itd-skew-x {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+  @property --itd-skew-y {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+
+  @property --itd-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
+  @property --itd-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
+
+  @property --itd-gradient-position {
+    syntax: "*"; inherits: false; initial-value: 0%;
+  }
+  @property --itd-gradient-from { syntax: "*"; inherits: false; initial-value: #0000; }
+  @property --itd-gradient-via {  syntax: "*"; inherits: false; initial-value: #0000; }
+  @property --itd-gradient-to {   syntax: "*"; inherits: false; initial-value: #0000; }
+
+  @property --itd-gradient-stops {
+    syntax: "*"; inherits: false; initial-value: "";
+  }
+  @property --itd-gradient-via-stops {
+    syntax: "*"; inherits: false; initial-value: "";
+  }
+
+  @property --itd-gradient-from-position { syntax: "*"; inherits: false; initial-value: 0%; }
+  @property --itd-gradient-via-position  { syntax: "*"; inherits: false; initial-value: 50%; }
+  @property --itd-gradient-to-position   { syntax: "*"; inherits: false; initial-value: 100%; }
+
+  @property --itd-leading {
+    syntax: "*"; inherits: false; initial-value: normal;
+  }
+  @property --itd-tracking {  
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+
+  @property --itd-ordinal {
+    syntax: "*"; inherits: false; initial-value: normal;
+  }
+  @property --itd-slashed-zero {
+    syntax: "*"; inherits: false; initial-value: normal;
+  }
+  @property --itd-numeric-figure {
+    syntax: "*"; inherits: false; initial-value: normal;
+  }
+  @property --itd-numeric-spacing {
+    syntax: "*"; inherits: false; initial-value: normal;
+  }
+  @property --itd-numeric-fraction {
+    syntax: "*"; inherits: false; initial-value: normal;
+  }
+
+  @property --itd-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+  @property --itd-shadow-color {
+    syntax: "*"; inherits: false; initial-value: transparent;
+  }
+  @property --itd-shadow-alpha { syntax: "*"; inherits: false; initial-value: 100%; }
+
+  @property --itd-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+  @property --itd-inset-shadow-color {
+    syntax: "*"; inherits: false; initial-value: transparent;
+  }
+  @property --itd-inset-shadow-alpha { syntax: "*"; inherits: false; initial-value: 100%; }
+
+  @property --itd-ring-color {
+    syntax: "*"; inherits: false; initial-value: transparent;
+  }
+  @property --itd-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+  @property --itd-inset-ring-color {
+    syntax: "*"; inherits: false; initial-value: transparent;
+  }
+  @property --itd-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+  @property --itd-ring-inset {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+  @property --itd-ring-offset-width { syntax: "*"; inherits: false; initial-value: 0px; }
+  @property --itd-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
+  @property --itd-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+
+  @property --itd-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
+
+  @property --itd-blur {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+  @property --itd-brightness {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+  @property --itd-contrast {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+  @property --itd-grayscale {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+  @property --itd-hue-rotate {
+    syntax: "*"; inherits: false; initial-value: 0deg;
+  }
+  @property --itd-invert {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+  @property --itd-opacity {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+  @property --itd-saturate {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+  @property --itd-sepia {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+
+  @property --itd-drop-shadow {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+  @property --itd-drop-shadow-color {
+    syntax: "*"; inherits: false; initial-value: transparent;
+  }
+  @property --itd-drop-shadow-alpha { syntax: "*"; inherits: false; initial-value: 100%; }
+  @property --itd-drop-shadow-size {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+
+  @property --itd-backdrop-blur {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+  @property --itd-backdrop-brightness {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+  @property --itd-backdrop-contrast {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+  @property --itd-backdrop-grayscale {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+  @property --itd-backdrop-hue-rotate {
+    syntax: "*"; inherits: false; initial-value: 0deg;
+  }
+  @property --itd-backdrop-invert {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+  @property --itd-backdrop-opacity {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+  @property --itd-backdrop-saturate {
+    syntax: "*"; inherits: false; initial-value: 1;
+  }
+  @property --itd-backdrop-sepia {
+    syntax: "*"; inherits: false; initial-value: 0;
+  }
+
+  @property --itd-duration { syntax: "*"; inherits: false; initial-value: 0s; }
+  @property --itd-ease {     syntax: "*"; inherits: false; initial-value: ease; }
+
+  @property --itd-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; }
+  @property --itd-animation-direction { syntax: "*"; inherits: false; initial-value: normal; }
+  @property --itd-animation-duration {
+    syntax: "*"; inherits: false; initial-value: 0s;
+  }
+  @property --itd-animation-fill-mode {
+    syntax: "*"; inherits: false; initial-value: none;
+  }
+  @property --itd-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; }
+
+  @property --itd-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; }
+  @property --itd-enter-rotate {  syntax: "*"; inherits: false; initial-value: 0; }
+  @property --itd-enter-scale {   syntax: "*"; inherits: false; initial-value: 1; }
+  @property --itd-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+  @property --itd-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+
+  @property --itd-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; }
+  @property --itd-exit-rotate {  syntax: "*"; inherits: false; initial-value: 0; }
+  @property --itd-exit-scale {   syntax: "*"; inherits: false; initial-value: 1; }
+  @property --itd-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+  @property --itd-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
+    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *,
+    :before,
+    :after,
+    ::backdrop {
+      --itd-content:"";
+      --itd-border-style: solid;
+      --itd-font-weight: initial;
+      --itd-translate-x: 0;
+      --itd-translate-y: 0;
+      --itd-translate-z: 0;
+      --itd-scale-x: 1;
+      --itd-scale-y: 1;
+      --itd-scale-z: 1;
+      --itd-rotate-x: initial;
+      --itd-rotate-y: initial;
+      --itd-rotate-z: initial;
+      --itd-skew-x: initial;
+      --itd-skew-y: initial;
+      --itd-space-y-reverse: 0;
+      --itd-space-x-reverse: 0;
+      --itd-gradient-position: initial;
+      --itd-gradient-from: #0000;
+      --itd-gradient-via: #0000;
+      --itd-gradient-to: #0000;
+      --itd-gradient-stops: initial;
+      --itd-gradient-via-stops: initial;
+      --itd-gradient-from-position: 0%;
+      --itd-gradient-via-position: 50%;
+      --itd-gradient-to-position: 100%;
+      --itd-leading: initial;
+      --itd-tracking: initial;
+      --itd-ordinal: initial;
+      --itd-slashed-zero: initial;
+      --itd-numeric-figure: initial;
+      --itd-numeric-spacing: initial;
+      --itd-numeric-fraction: initial;
+      --itd-shadow: 0 0 #0000;
+      --itd-shadow-color: initial;
+      --itd-shadow-alpha: 100%;
+      --itd-inset-shadow: 0 0 #0000;
+      --itd-inset-shadow-color: initial;
+      --itd-inset-shadow-alpha: 100%;
+      --itd-ring-color: initial;
+      --itd-ring-shadow: 0 0 #0000;
+      --itd-inset-ring-color: initial;
+      --itd-inset-ring-shadow: 0 0 #0000;
+      --itd-ring-inset: initial;
+      --itd-ring-offset-width: 0px;
+      --itd-ring-offset-color: #fff;
+      --itd-ring-offset-shadow: 0 0 #0000;
+      --itd-outline-style: solid;
+      --itd-blur: initial;
+      --itd-brightness: initial;
+      --itd-contrast: initial;
+      --itd-grayscale: initial;
+      --itd-hue-rotate: initial;
+      --itd-invert: initial;
+      --itd-opacity: initial;
+      --itd-saturate: initial;
+      --itd-sepia: initial;
+      --itd-drop-shadow: initial;
+      --itd-drop-shadow-color: initial;
+      --itd-drop-shadow-alpha: 100%;
+      --itd-drop-shadow-size: initial;
+      --itd-backdrop-blur: initial;
+      --itd-backdrop-brightness: initial;
+      --itd-backdrop-contrast: initial;
+      --itd-backdrop-grayscale: initial;
+      --itd-backdrop-hue-rotate: initial;
+      --itd-backdrop-invert: initial;
+      --itd-backdrop-opacity: initial;
+      --itd-backdrop-saturate: initial;
+      --itd-backdrop-sepia: initial;
+      --itd-duration: initial;
+      --itd-ease: initial;
+      --itd-animation-delay: 0s;
+      --itd-animation-direction: normal;
+      --itd-animation-duration: initial;
+      --itd-animation-fill-mode: none;
+      --itd-animation-iteration-count: 1;
+      --itd-enter-opacity: 1;
+      --itd-enter-rotate: 0;
+      --itd-enter-scale: 1;
+      --itd-enter-translate-x: 0;
+      --itd-enter-translate-y: 0;
+      --itd-exit-opacity: 1;
+      --itd-exit-rotate: 0;
+      --itd-exit-scale: 1;
+      --itd-exit-translate-x: 0;
+      --itd-exit-translate-y: 0;
+    }
+  }
+}

package/dist/css/reset.css

@@ -0,0 +1,310 @@
+/* ================================= */
+/* RESET - Modern CSS Reset for ITD */
+/* Based on modern CSS reset standards: */
+/* - normalize.css by Nicolas Gallagher */
+/* - modern-normalize by sindresorhus */
+/* - Tailwind CSS Preflight */
+/* All under MIT License */
+/* Optimized for ITD Design System */
+/* ================================= */
+@layer reset {
+
+  /* ========== Universal Box Model ========== */
+  *,
+  *::before,
+  *::after,
+  ::backdrop {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ========== Document & Root ========== */
+  html,
+  :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    font-family: var(--itd-font-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    margin: 0;
+    line-height: inherit;
+  }
+
+  /* ========== Role-based Cursor ========== */
+  :where([role="button"]) {
+    cursor: pointer;
+  }
+
+  :where([aria-disabled="true"]) {
+    cursor: not-allowed;
+  }
+
+  /* ========== Horizontal Rule ========== */
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  /* ========== Typography ========== */
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--itd-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    position: relative;
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* ========== Table ========== */
+  table {
+    text-indent: 0;
+    border-collapse: collapse;
+  }
+
+  /* ========== Lists ========== */
+  /* list-style: none kasıtlı olarak eklenmedi */
+  /* İsteyen utilities'teki .list-none kullanabilir */
+
+  /* ========== Details & Dialog ========== */
+  details {
+    display: block;
+  }
+
+  summary {
+    display: list-item;
+    cursor: pointer;
+    list-style: none;
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  dialog {
+    margin: auto;
+    padding: 0;
+    border: none;
+  }
+
+  /* ========== Media ========== */
+  img,
+  svg {
+    display: block;
+  }
+
+  img {
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  svg {
+    overflow: hidden;
+  }
+
+  /* ========== Form Elements ========== */
+  /* :where() ile düşük spesifikite - kolay override için */
+  :where(button, input, optgroup, select, textarea) {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    background-color: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  :where(button, select) {
+    text-transform: none;
+  }
+
+  :where(input[type='button'], input[type='reset'], input[type='submit'], button) {
+    -webkit-appearance: button;
+    appearance: button;
+    background-image: none;
+  }
+
+  ::file-selector-button {
+    -webkit-appearance: button;
+    appearance: button;
+    background-color: transparent;
+    background-image: none;
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin-inline-end: 4px;
+  }
+
+  /* Remove default button styles */
+  :where(button) {
+    cursor: pointer;
+  }
+
+  :where(button:disabled) {
+    cursor: not-allowed;
+  }
+
+  /* Optgroup */
+  :where(optgroup) {
+    font-weight: bolder;
+  }
+
+  /* ========== Placeholders ========== */
+  :where(input::placeholder, textarea::placeholder) {
+    color: var(--itd-placeholder-color, currentColor);
+    opacity: 0.6;
+  }
+
+  @supports (color: color-mix(in oklab, red, red)) {
+    :where(input::placeholder, textarea::placeholder) {
+      color: color-mix(in oklab, currentColor 55%, transparent);
+      opacity: 1;
+    }
+  }
+
+  /* ========== Autofill Nötralizasyonu ========== */
+  /* Tema renkleriyle çakışmaması için */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus {
+    -webkit-text-fill-color: currentColor;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  /* ========== Textarea ========== */
+  textarea {
+    resize: vertical;
+  }
+
+  /* ========== Search Input ========== */
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /* ========== Number Input Spinners ========== */
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /* Firefox number input spinner gizleme (opsiyonel) */
+  input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  /* ========== Date/Time Inputs ========== */
+  ::-webkit-date-and-time-value {
+    min-height: 1.5em;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  /* ========== Validation ========== */
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /* ========== Hidden Elements ========== */
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+
+  /* ========== Selection ========== */
+  ::selection {
+    background-color: var(--itd-selection-bg, rgba(59, 130, 246, 0.2));
+    color: var(--itd-selection-fg, inherit);
+  }
+
+  /* ========== Text Rendering ========== */
+  body {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* ========== Accessibility: Forced Colors (High Contrast) ========== */
+  @media (forced-colors: active) {
+    ::selection {
+      forced-color-adjust: none;
+    }
+
+    :where(button, input, select, textarea):focus {
+      outline: 1px solid CanvasText;
+    }
+  }
+
+  /* ========== Accessibility: Focus-visible Fallback ========== */
+  @supports not selector(:focus-visible) {
+    :where(:focus) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+  
+}
+