@inntechcorp/it-design 3.1.3 → 3.1.4

package/dist/global.css

@@ -1,366 +1,146 @@
-/* ================================= */
-/* LAYER DECLARATIONS */
-/* ================================= */
-@layer reset, base, components, utilities;
-
-/* ================================= */
-/* RESET */
-/* ================================= */
-@layer reset {
-
-  /* ---- universal box-model / tap highlight ---- */
-  *,::before,::after,::backdrop {
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: transparent;
-    margin: 0;
-    padding: 0;
-  }
-
-  /* ---- 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; }
-
-  /* ---- 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; }
-
-  /* ---- vendor fixes ---- */
-  ::-webkit-search-decoration { -webkit-appearance: none; }
-  ::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto; }
-
-  /* ---- hidden attr ---- */
-  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
-
-  /* ---- 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; }
+body {
   
-}
-
-/* ================================= */
-/* 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);
-    
-  }
-
-  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: var(--itd-link);
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: var(--itd-link-hover);
-  }
-
-  * {
-    border-color: var(--itd-border);
-  }
-
-  :focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  ::selection {
-    background: var(--itd-selection);
-    color: var(--itd-selection-fg);
-  }
+  padding: 0;
+  margin: 0;
 
 }
 
-/* ================================= */
-/* COMPONENTS (Transitions etc.) */
-/* ================================= */
-@layer components {
-
-  /* Modal Transitions */
-  .modal-enter {
-    opacity: 0;
-    transform: translateY(-20px) scale(0.95);
-  }
+*, ::after, ::before {
+  box-sizing                  : border-box;
+  -webkit-tap-highlight-color : transparent;
+  -webkit-font-smoothing      : antialiased;
+  margin    : 0px;
+  padding   : 0px;
+  outline   : none;
+}
 
-  .modal-enter-active {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    transition: opacity 300ms, transform 300ms;
-    transition-delay: .3s;
-  }
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  outline: 0;
+  font-weight: bold;
+}
 
-  .modal-exit {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+a {
+  cursor: pointer;
+  color: #029CFD;
+  text-decoration: none;
+}
 
-  .modal-exit-active {
-    opacity: 0;
-    transform: translateY(-20px) scale(0.95);
-    transition: opacity 300ms, transform 300ms;
-  }
+a:hover {
+  color: #0083d4;
+}
 
-  /* Select Menu Transitions */
-  .itd-select-dropdown-transition-enter {
-    opacity: 0;
-    transform: translateY(-5px) scale(0.975);
-  }
+button, span, input, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
 
-  .itd-select-dropdown-transition-enter-active {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    transition: opacity 200ms, transform 200ms;
-  }
+input {
+  background: transparent;
+  border: none;
+}
 
-  .itd-select-dropdown-transition-exit {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+input, textarea {
+  &::placeholder {
+    color: inherit;
   }
+}
 
-  .itd-select-dropdown-transition-exit-active {
-    opacity: 0;
-    transform: translateY(-5px) scale(0.975);
-    transition: opacity 200ms, transform 200ms;
-  }
+button {
+  border: none;
+}
 
-  /* DatePicker Modal Transitions */
-  .datepicker-modal-enter {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.975);
-  }
+textarea {
+  vertical-align: top;
+  vertical-align: text-top;
+}
 
-  .datepicker-modal-enter-active {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    transition: opacity 200ms, transform 200ms;
-  }
+.itd-provider, #itd-modal-root, #itd-tooltip-root, #itd-notification-root {
 
-  .datepicker-modal-exit {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+  font-size   : 0.875rem;
+  line-height : 1rem;
+  font-weight : 500;
+  font-family : "Inter", sans-serif;
+  color       : #555;
+  -webkit-font-smoothing: antialiased;
 
-  .datepicker-modal-exit-active {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.975);
-    transition: opacity 200ms, transform 200ms;
-  }
+}
 
+.os-theme-dark {
+  --os-size: 8px;
+  --os-handle-bg: #3598fe80;
+  --os-handle-bg-hover: #3598fe;
+  --os-handle-bg-active: #3598fe;
 }
 
 /* ================================= */
-/* UTILITIES (Temel Layout & Spacing) */
+/* Component Transitions */
 /* ================================= */
-/* 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); }
+/* Modal Transitions */
+.modal-enter {
+  opacity: 0 !important;
+  transform: translate(-50%, -40%) !important;
+}
 
-  /* 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); }
+.modal-enter-active {
+  opacity: 1 !important;
+  transform: translate(-50%, -50%) !important;
+  transition: opacity 300ms, transform 300ms !important;
+  transition-delay: .3s !important;
+}
 
-  .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); }
+.modal-exit {
+  opacity: 1 !important;
+  transform: translate(-50%, -50%) !important;
+}
 
-  .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); }
+.modal-exit-active {
+  opacity: 0 !important;
+  transform: translate(-50%, -40%) !important;
+  transition: opacity 300ms, transform 300ms !important;
+}
 
-  /* ================================= */
-  /* POSITION & Z-INDEX */
-  /* ================================= */
-  .relative { position: relative; }
-  .absolute { position: absolute; }
-  .fixed { position: fixed; }
-  .sticky { position: sticky; }
+/* Select Menu Transitions */
+.select-menu-enter {
+  opacity: 0 !important;
+  transform: translateY(-10px) !important;
+}
 
-  .z-0 { z-index: 0; }
-  .z-10 { z-index: 10; }
-  .z-20 { z-index: 20; }
-  .z-50 { z-index: 50; }
+.select-menu-enter-active {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  transition: opacity 250ms, transform 250ms !important;
+}
 
-  /* ================================= */
-  /* ORDER */
-  /* ================================= */
-  .order-first { order: -9999; }
-  .order-last { order: 9999; }
+.select-menu-exit {
+  opacity: 1 !important;
+}
 
-  /* ================================= */
-  /* 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;
-  }
+.select-menu-exit-active {
+  opacity: 0 !important;
+  transform: translateY(-10px) !important;
+  transition: opacity 250ms, transform 250ms !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; }
+/* DatePicker Modal Transitions */
+.datepicker-modal-enter {
+  opacity: 0 !important;
+  transform: translateY(-10px) !important;
+}
 
-  /* ================================= */
-  /* CURSOR */
-  /* ================================= */
-  .cursor-pointer { cursor: pointer; }
-  .cursor-default { cursor: default; }
+.datepicker-modal-enter-active {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  transition: opacity 250ms, transform 250ms !important;
+}
 
+.datepicker-modal-exit {
+  opacity: 1 !important;
 }
+
+.datepicker-modal-exit-active {
+  opacity: 0 !important;
+  transform: translateY(-10px) !important;
+  transition: opacity 250ms, transform 250ms !important;
+}

package/dist/helpers/index.d.ts

@@ -10,10 +10,6 @@ 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';