@inntechcorp/it-design 2.2.90 → 3.1.1

package/dist/global.css

@@ -1,146 +1,366 @@
-body {
-  
-  padding: 0;
-  margin: 0;
+/* ================================= */
+/* LAYER DECLARATIONS */
+/* ================================= */
+@layer reset, base, components, utilities;
 
-}
+/* ================================= */
+/* RESET */
+/* ================================= */
+@layer reset {
 
-*, ::after, ::before {
-  box-sizing                  : border-box;
-  -webkit-tap-highlight-color : transparent;
-  -webkit-font-smoothing      : antialiased;
-  margin    : 0px;
-  padding   : 0px;
-  outline   : none;
-}
+  /* ---- universal box-model / tap highlight ---- */
+  *,::before,::after,::backdrop {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    margin: 0;
+    padding: 0;
+  }
 
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-  outline: 0;
-  font-weight: bold;
-}
+  /* ---- element varsayılan sıfırlamaları ---- */
+  menu,ol,ul { list-style: none; }
+  h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
+  a { color: inherit; text-decoration: inherit; }
+  b,strong { font-weight: bolder; }
+  small { font-size: 80%; }
+  sub,sup { position: relative; line-height: 0; font-size: 75%; vertical-align: baseline; }
+  sub { bottom: -.25em; } sup { top: -.5em; }
+  table { border-collapse: collapse; text-indent: 0; border-color: inherit; }
+  img,svg,video,canvas,iframe,embed,object { display: block; }
+  img,video { max-width: 100%; height: auto; }
 
-a {
-  cursor: pointer;
-  color: #029CFD;
-  text-decoration: none;
-}
+  /* ---- form elements ---- */
+  button,input,select,textarea,optgroup {
+    font: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    outline: none;
+    opacity: 1;
+  }
+  ::file-selector-button {
+    font: inherit;
+    color: inherit;
+    background-color: transparent;
+    border-radius: 0;
+  }
+  textarea { resize: vertical; }
 
-a:hover {
-  color: #0083d4;
-}
+  /* ---- vendor fixes ---- */
+  ::-webkit-search-decoration { -webkit-appearance: none; }
+  ::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto; }
 
-button, span, input, textarea {
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
+  /* ---- hidden attr ---- */
+  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
 
-input {
-  background: transparent;
-  border: none;
+  /* ---- misc ---- */
+  hr { height: 0; border: 0; border-top: 1px solid currentColor; }
+  abbr[title] { text-decoration: underline dotted; }
+  progress { vertical-align: baseline; }
+  summary { display: list-item; }
+  
 }
 
-input, textarea {
-  &::placeholder {
-    color: inherit;
+/* ================================= */
+/* BASE */
+/* ================================= */
+@layer base {
+  :root {
+    /* ================================= */
+    /* TYPOGRAPHY */
+    /* ================================= */
+    --itd-font-sans: 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;
+
+    /* ================================= */
+    /* SPACING */
+    /* ================================= */
+    --itd-spacing: .25rem;
+
+    /* ================================= */
+    /* 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: oklch(0.145 0 0);
+    --itd-selection-fg: oklch(1 0 0);
+    
   }
-}
 
-button {
-  border: none;
-}
+  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;
+  }
 
-textarea {
-  vertical-align: top;
-  vertical-align: text-top;
-}
+  a {
+    cursor: pointer;
+    color: var(--itd-link);
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--itd-link-hover);
+  }
 
-.itd-provider, #itd-modal-root, #itd-tooltip-root, #itd-notification-root {
+  * {
+    border-color: var(--itd-border);
+  }
 
-  font-size   : 0.875rem;
-  line-height : 1rem;
-  font-weight : 500;
-  font-family : "Inter", sans-serif;
-  color       : #555;
-  -webkit-font-smoothing: antialiased;
+  :focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
 
-}
+  ::selection {
+    background: var(--itd-selection);
+    color: var(--itd-selection-fg);
+  }
 
-.os-theme-dark {
-  --os-size: 8px;
-  --os-handle-bg: #3598fe80;
-  --os-handle-bg-hover: #3598fe;
-  --os-handle-bg-active: #3598fe;
 }
 
 /* ================================= */
-/* Component Transitions */
+/* COMPONENTS (Transitions etc.) */
 /* ================================= */
+@layer components {
 
-/* Modal Transitions */
-.modal-enter {
-  opacity: 0 !important;
-  transform: translate(-50%, -40%) !important;
-}
+  /* Modal Transitions */
+  .modal-enter {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
 
-.modal-enter-active {
-  opacity: 1 !important;
-  transform: translate(-50%, -50%) !important;
-  transition: opacity 300ms, transform 300ms !important;
-  transition-delay: .3s !important;
-}
+  .modal-enter-active {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 300ms, transform 300ms;
+    transition-delay: .3s;
+  }
 
-.modal-exit {
-  opacity: 1 !important;
-  transform: translate(-50%, -50%) !important;
-}
+  .modal-exit {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 
-.modal-exit-active {
-  opacity: 0 !important;
-  transform: translate(-50%, -40%) !important;
-  transition: opacity 300ms, transform 300ms !important;
-}
+  .modal-exit-active {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+    transition: opacity 300ms, transform 300ms;
+  }
 
-/* Select Menu Transitions */
-.select-menu-enter {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-}
+  /* Select Menu Transitions */
+  .itd-select-dropdown-transition-enter {
+    opacity: 0;
+    transform: translateY(-5px) scale(0.975);
+  }
 
-.select-menu-enter-active {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
+  .itd-select-dropdown-transition-enter-active {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 200ms, transform 200ms;
+  }
 
-.select-menu-exit {
-  opacity: 1 !important;
-}
+  .itd-select-dropdown-transition-exit {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 
-.select-menu-exit-active {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
+  .itd-select-dropdown-transition-exit-active {
+    opacity: 0;
+    transform: translateY(-5px) scale(0.975);
+    transition: opacity 200ms, transform 200ms;
+  }
 
-/* DatePicker Modal Transitions */
-.datepicker-modal-enter {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-}
+  /* DatePicker Modal Transitions */
+  .datepicker-modal-enter {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.975);
+  }
 
-.datepicker-modal-enter-active {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
+  .datepicker-modal-enter-active {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 200ms, transform 200ms;
+  }
+
+  .datepicker-modal-exit {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .datepicker-modal-exit-active {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.975);
+    transition: opacity 200ms, transform 200ms;
+  }
 
-.datepicker-modal-exit {
-  opacity: 1 !important;
 }
 
-.datepicker-modal-exit-active {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
+/* ================================= */
+/* UTILITIES (Temel Layout & Spacing) */
+/* ================================= */
+/* Tailwind kullanmayanlar için temel utilities */
+/* Tailwind kullananlar için: Bu layer'ı devre dışı bırakabilirsiniz */
+@layer utilities {
+
+  /* ================================= */
+  /* DISPLAY */
+  /* ================================= */
+  .block { display: block; }
+  .inline-block { display: inline-block; }
+  .inline { display: inline; }
+  .hidden { display: none; }
+  .invisible { visibility: hidden; }
+  .visible { visibility: visible; }
+
+  /* FLEX */
+  .flex { display: flex; }
+  .inline-flex { display: inline-flex; }
+  .flex-row { flex-direction: row; }
+  .flex-col { flex-direction: column; }
+  .flex-wrap { flex-wrap: wrap; }
+  .items-center { align-items: center; }
+  .items-start { align-items: flex-start; }
+  .items-end { align-items: flex-end; }
+  .justify-center { justify-content: center; }
+  .justify-between { justify-content: space-between; }
+  .justify-start { justify-content: flex-start; }
+  .justify-end { justify-content: flex-end; }
+
+  /* GRID */
+  .grid { display: grid; }
+  .inline-grid { display: inline-grid; }
+  .place-items-center { place-items: center; }
+
+  /* GAP */
+  .gap-1 { gap: calc(var(--itd-spacing) * 1); }
+  .gap-2 { gap: calc(var(--itd-spacing) * 2); }
+  .gap-3 { gap: calc(var(--itd-spacing) * 3); }
+  .gap-4 { gap: calc(var(--itd-spacing) * 4); }
+  .gap-6 { gap: calc(var(--itd-spacing) * 6); }
+  .gap-8 { gap: calc(var(--itd-spacing) * 8); }
+
+  /* PADDING */
+  .p-0 { padding: 0; }
+  .p-1 { padding: calc(var(--itd-spacing) * 1); }
+  .p-2 { padding: calc(var(--itd-spacing) * 2); }
+  .p-3 { padding: calc(var(--itd-spacing) * 3); }
+  .p-4 { padding: calc(var(--itd-spacing) * 4); }
+  .p-6 { padding: calc(var(--itd-spacing) * 6); }
+
+  .px-0 { padding-inline: 0; }
+  .px-2 { padding-inline: calc(var(--itd-spacing) * 2); }
+  .px-3 { padding-inline: calc(var(--itd-spacing) * 3); }
+  .px-4 { padding-inline: calc(var(--itd-spacing) * 4); }
+  .px-6 { padding-inline: calc(var(--itd-spacing) * 6); }
+
+  .py-0 { padding-block: 0; }
+  .py-2 { padding-block: calc(var(--itd-spacing) * 2); }
+  .py-3 { padding-block: calc(var(--itd-spacing) * 3); }
+  .py-4 { padding-block: calc(var(--itd-spacing) * 4); }
+  .py-6 { padding-block: calc(var(--itd-spacing) * 6); }
+
+  /* ================================= */
+  /* POSITION & Z-INDEX */
+  /* ================================= */
+  .relative { position: relative; }
+  .absolute { position: absolute; }
+  .fixed { position: fixed; }
+  .sticky { position: sticky; }
+
+  .z-0 { z-index: 0; }
+  .z-10 { z-index: 10; }
+  .z-20 { z-index: 20; }
+  .z-50 { z-index: 50; }
+
+  /* ================================= */
+  /* ORDER */
+  /* ================================= */
+  .order-first { order: -9999; }
+  .order-last { order: 9999; }
+
+  /* ================================= */
+  /* TYPOGRAPHY */
+  /* ================================= */
+  /* !important: Styled-components'i override etmek için gerekli */
+  .text-xs {
+    font-size: var(--itd-text-xs) !important;
+    line-height: var(--itd-text-xs--line-height) !important;
+  }
+  .text-sm {
+    font-size: var(--itd-text-sm) !important;
+    line-height: var(--itd-text-sm--line-height) !important;
+  }
+  .text-default {
+    font-size: var(--itd-text-default) !important;
+    line-height: var(--itd-text-default--line-height) !important;
+  }
+  .text-lg {
+    font-size: var(--itd-text-lg) !important;
+    line-height: var(--itd-text-lg--line-height) !important;
+  }
+
+  .font-normal { font-weight: var(--itd-font-weight-normal) !important; }
+  .font-medium { font-weight: var(--itd-font-weight-medium) !important; }
+  .font-semibold { font-weight: var(--itd-font-weight-semibold) !important; }
+  .font-bold { font-weight: var(--itd-font-weight-bold) !important; }
+
+  /* ================================= */
+  /* CURSOR */
+  /* ================================= */
+  .cursor-pointer { cursor: pointer; }
+  .cursor-default { cursor: default; }
+
+}

package/dist/helpers/index.d.ts

@@ -10,6 +10,10 @@ export { default as GetCurrencySymbol } from './currency/GetCurrencySymbol';
 export { default as GetDecimalByCurrency } from './currency/GetDecimalByCurrency';
 export { default as AddDefaultThemeStyle } from './theme/AddDefaultThemeStyle';
 export { default as UpdateThemeStyle } from './theme/UpdateThemeStyle';
+export { default as GenerateColorScale, generateColorScaleFromBase } from './theme/GenerateColorScale';
+export { hexToRgba, withOpacity, getContrastText } from './theme/Color';
+export { TYPOGRAPHY_TOKENS, SPACING_TOKENS, ICON_TOKENS, INPUT_SIZE_MAP, SELECT_SIZE_MAP, BUTTON_SIZE_MAP, ALERT_TOKENS, CARD_TOKENS, MODAL_TOKENS } from './theme/tokens';
+export { injectDesignTokens, injectThemeColors, CSS_VARIABLES_MAP } from './theme/cssVariables';
 export { default as IsValidJSON } from './json/IsValidJSON';
 export { default as AddZero } from './math/AddZero';
 export { default as RemoveUnits } from './remover/RemoveUnits';

package/dist/helpers/theme/Color.d.ts

@@ -0,0 +1,19 @@
+/**
+ * HEX to RGBA converter
+ * @param hex - The hex color string
+ * @param alpha - The alpha value (0-1)
+ * @returns The RGBA color string
+ */
+export declare function hexToRgba(hex: string, alpha?: number): string;
+/**
+ * With opacity helper
+ * @param color - The color string
+ * @param alpha - The alpha value (0-1)
+ * @returns The color string with opacity
+ */
+export declare function withOpacity(color: string, alpha?: number): string;
+/**
+ * Returns the contrast text color for a given color (light/dark)
+ * Supports OKLCH and HEX formats
+ */
+export declare function getContrastText(color: string): string;

package/dist/helpers/theme/GenerateColorScale.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Generate a 50-950 color scale from a single base color (base is 600).
+ * Supports both HEX (#rrggbb) and OKLCH (oklch(L C H)) formats.
+ *
+ * The algorithm uses Tailwind CSS OKLCH color scales as reference,
+ * with specific lightness/chroma/hue curves per color band.
+ */
+export type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export type ColorScale = Record<Shade, string>;
+export declare function generateColorScaleFromBase(baseColor: string, options?: {
+    clampLightness?: {
+        min?: number;
+        max?: number;
+    };
+}): ColorScale;
+export default generateColorScaleFromBase;

package/dist/helpers/theme/cssVariables.d.ts

@@ -0,0 +1,30 @@
+/**
+ * CSS Variables Generator
+ * tokens.ts'deki değerleri CSS custom properties'e dönüştürür
+ */
+/**
+ * Design token'larını CSS variables olarak inject eder
+ * Bu fonksiyon ITDThemeProvider tarafından otomatik çağrılır
+ */
+export declare function injectDesignTokens(): void;
+/**
+ * CSS variables'ları export et (dokümantasyon için)
+ */
+export declare const CSS_VARIABLES_MAP: {
+    readonly '--itd-text-xs': "0.725rem";
+    readonly '--itd-text-sm': "0.75rem";
+    readonly '--itd-text-md': "0.825rem";
+    readonly '--itd-text-df': "0.875rem";
+    readonly '--itd-text-lg': "0.875rem";
+    readonly '--itd-text-xl': "0.875rem";
+    readonly '--itd-font-weight-normal': 400;
+    readonly '--itd-font-weight-medium': 500;
+    readonly '--itd-font-weight-semibold': 600;
+    readonly '--itd-font-weight-bold': 700;
+    readonly '--itd-spacing': "0.25rem";
+};
+/**
+ * Verilen theme objesini CSS variables olarak inject eder
+ * @param theme - Styled-components theme objesi
+ */
+export declare function injectThemeColors(theme: Record<string, string>): void;

package/dist/helpers/theme/dark.d.ts

@@ -1,3 +1,3 @@
-import type { ITDTheme } from '../../types/Theme';
+import type { ITDTheme } from "../../types/Theme";
 declare const darkTheme: ITDTheme;
 export default darkTheme;

package/dist/helpers/theme/index.d.ts

@@ -1,5 +1,9 @@
 export { default as AddDefaultThemeStyle } from './AddDefaultThemeStyle';
 export { default as UpdateThemeStyle } from './UpdateThemeStyle';
+export { default as GenerateColorScale, generateColorScaleFromBase } from './GenerateColorScale';
+export { hexToRgba, withOpacity, getContrastText } from './Color';
 export { default as lightTheme } from './light';
 export { default as darkTheme } from './dark';
 export { default as themes } from './themes.js';
+export { TYPOGRAPHY_TOKENS, SPACING_TOKENS, ICON_TOKENS, INPUT_SIZE_MAP, SELECT_SIZE_MAP, BUTTON_SIZE_MAP, ALERT_TOKENS, CARD_TOKENS, MODAL_TOKENS } from './tokens';
+export { injectDesignTokens, injectThemeColors, CSS_VARIABLES_MAP } from './cssVariables';

package/dist/helpers/theme/light.d.ts

@@ -1,3 +1,3 @@
-import type { ITDTheme } from '../../types/Theme';
+import type { ITDTheme } from "../../types/Theme";
 declare const lightTheme: ITDTheme;
 export default lightTheme;