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

package/dist/css/button.css

@@ -0,0 +1,380 @@
+/* ================================= */
+/* BUTTON COMPONENT STYLES           */
+/* ================================= */
+@layer components {
+
+  /* ===== BASE ===== */
+  .itd-button {
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    box-sizing: border-box;
+    background: none;
+    border: 1px solid transparent;
+    outline: 0 solid transparent;
+    outline-offset: var(--itd-ring-offset);
+    transition:
+      outline 100ms linear,
+      border var(--itd-transition-duration) var(--itd-transition-timing-function),
+      background-color var(--itd-transition-duration) var(--itd-transition-timing-function);
+
+    & span,
+    & svg {
+      transition-property: color;
+      transition-duration: var(--itd-transition-duration);
+      transition-timing-function: var(--itd-transition-timing-function);
+    }
+
+    & svg {
+      flex-shrink: 0;
+      pointer-events: none;
+    }
+
+    & svg:not([class*='size-']):not(.itd-spinner) {
+      width: var(--itd-size-df-icon);
+      height: var(--itd-size-df-icon);
+    }
+
+    & .itd-button-content {
+      display: inline-flex;
+      align-items: center;
+      gap: inherit;
+    }
+  }
+
+  /* ===== SIZES (icon sizing from tokens) ===== */
+  .itd-button.itd-button-xs {
+    & svg:not([class*='size-']):not(.itd-spinner) {
+      width: var(--itd-size-xs-icon);
+      height: var(--itd-size-xs-icon);
+    }
+  }
+
+  .itd-button.itd-button-sm {
+    & svg:not([class*='size-']):not(.itd-spinner) {
+      width: var(--itd-size-sm-icon);
+      height: var(--itd-size-sm-icon);
+    }
+  }
+
+  .itd-button.itd-button-md,
+  .itd-button.itd-button-icon-sm,
+  .itd-button.itd-button-icon {
+    & svg:not([class*='size-']):not(.itd-spinner) {
+      width: var(--itd-size-md-icon);
+      height: var(--itd-size-md-icon);
+    }
+  }
+
+  .itd-button.itd-button-lg,
+  .itd-button.itd-button-icon-lg {
+    & svg:not([class*='size-']):not(.itd-spinner) {
+      width: var(--itd-size-lg-icon);
+      height: var(--itd-size-lg-icon);
+    }
+  }
+
+  .itd-button.itd-button-xlg {
+    & svg:not([class*='size-']):not(.itd-spinner) {
+      width: var(--itd-size-xlg-icon);
+      height: var(--itd-size-xlg-icon);
+    }
+  }
+
+  /* ===== DEFAULT VARIANT ===== */
+  .itd-button.itd-button-default {
+    box-shadow: var(--itd-box-shadow);
+    background-color: var(--itd-primary);
+    border: 1px solid transparent;
+    color: var(--itd-primary-foreground);
+
+    & svg { color: var(--itd-primary-foreground); }
+
+    &:hover, &.active { background-color: var(--itd-primary-hover); }
+
+    &[disabled] {
+      background-color: var(--itd-color-disabled-bg);
+      border: 1px solid var(--itd-color-disabled-border);
+      box-shadow: none;
+      color: var(--itd-color-disabled-text);
+      & svg { color: var(--itd-color-disabled-text); }
+    }
+  }
+
+  /* ===== GHOST VARIANT ===== */
+  .itd-button.itd-button-ghost {
+    background-color: transparent;
+    border: 1px solid transparent;
+
+    & span, & div.icon svg { color: var(--itd-color-text); }
+
+    &:hover, &.active {
+      background-color: var(--itd-color-button-ghost-hover-bg);
+      color: var(--itd-accent-foreground);
+      & svg { color: var(--itd-accent-foreground); }
+    }
+
+    &[disabled] {
+      background-color: var(--itd-color-disabled-bg);
+      border: 1px solid var(--itd-color-disabled-border);
+      color: var(--itd-color-disabled-text);
+      & svg { color: var(--itd-color-disabled-text); }
+    }
+  }
+
+  /* ===== SOLID VARIANT ===== */
+  .itd-button.itd-button-solid {
+    background-color: var(--itd-color-background-alt-hover);
+    border: 1px solid transparent;
+    box-shadow: none;
+    color: var(--itd-secondary-foreground);
+
+    & svg { color: var(--itd-secondary-foreground); }
+
+    &:hover, &.active {
+      background-color: var(--itd-secondary-hover);
+      color: var(--itd-primary);
+      & svg { color: var(--itd-primary); }
+    }
+
+    &[disabled] {
+      background-color: var(--itd-color-disabled-bg);
+      border: 1px solid var(--itd-color-disabled-border);
+      color: var(--itd-color-disabled-text);
+      & svg { color: var(--itd-color-disabled-text); }
+    }
+  }
+
+  /* ===== FILLED VARIANT ===== */
+  .itd-button.itd-button-filled {
+    background-color: var(--itd-color-button-filled-bg);
+    border: 1px solid transparent;
+    color: var(--itd-primary);
+
+    & svg { color: var(--itd-primary); }
+
+    &:hover, &.active {
+      background-color: var(--itd-primary);
+      color: var(--itd-primary-foreground);
+      & svg { color: var(--itd-primary-foreground); }
+    }
+
+    &[disabled] {
+      background-color: var(--itd-color-disabled-bg);
+      border: 1px solid var(--itd-color-disabled-border);
+      box-shadow: none;
+      color: var(--itd-color-disabled-text);
+      & svg { color: var(--itd-color-disabled-text); }
+    }
+  }
+
+  /* ===== OUTLINE VARIANT ===== */
+  .itd-button.itd-button-outline {
+    box-shadow: var(--itd-box-shadow);
+    border: 1px solid var(--itd-color-border);
+    background-color: var(--itd-color-button-outline-bg);
+    color: var(--itd-color-text);
+
+    & svg { color: var(--itd-color-text); }
+
+    &:hover, &.active {
+      background-color: var(--itd-color-button-outline-hover-bg);
+      border-color: var(--itd-color-border);
+      color: var(--itd-color-text);
+      & svg { color: var(--itd-color-text); }
+    }
+
+    &[disabled] {
+      background-color: var(--itd-color-disabled-bg);
+      border: 1px solid var(--itd-color-disabled-border);
+      box-shadow: none;
+      color: var(--itd-color-disabled-text);
+      & svg { color: var(--itd-color-disabled-text); }
+    }
+  }
+
+  /* ===== LINK VARIANT ===== */
+  .itd-button.itd-button-link {
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: var(--itd-color-text);
+
+    & svg { color: var(--itd-color-text); }
+
+    &:hover, &.active {
+      color: var(--itd-primary);
+      text-underline-offset: 4px;
+      text-decoration: underline;
+      & svg { color: var(--itd-primary); }
+    }
+
+    &[disabled] {
+      background-color: var(--itd-color-disabled-bg);
+      border: 1px solid var(--itd-color-disabled-border);
+      color: var(--itd-color-disabled-text);
+      & svg { color: var(--itd-color-disabled-text); }
+    }
+  }
+
+  /* ===== PRIMARY VARIANT ===== */
+  .itd-button.itd-button-primary {
+    background: linear-gradient(-45deg, var(--itd-primary-gradient-start), var(--itd-primary-gradient-end));
+
+    & span, & div.icon svg { color: #ffffff; }
+
+    &:hover {
+      background: linear-gradient(-45deg, var(--itd-primary-hover-start), var(--itd-primary-hover-end));
+      & span, & div.icon svg { color: #ffffff; }
+    }
+
+    &[disabled] {
+      background: linear-gradient(-45deg, #477db4, #215283);
+      & span, & div.icon svg { color: var(--itd-button-disabled-text); }
+    }
+  }
+
+  /* ===== SECONDARY VARIANT ===== */
+  .itd-button.itd-button-secondary {
+    background: linear-gradient(-45deg, #ebebeb, #ffffff);
+
+    & span, & div.icon svg { color: #000000; }
+
+    &:hover {
+      background: linear-gradient(-45deg, #CDCDCD, #ebebeb);
+      & span, & div.icon svg { color: #000000; }
+    }
+
+    &[disabled] {
+      background: linear-gradient(-45deg, #CDCDCD, #A7A7A7);
+      & span, & div.icon svg { color: rgb(0, 0, 0, 30); }
+    }
+  }
+
+  /* ===== GENERIC VARIANT ===== */
+  .itd-button.itd-button-generic {
+    background-color: var(--itd-button-generic-bg);
+
+    & span, & div.icon svg { color: #ffffff; }
+
+    &:hover {
+      background: var(--itd-button-generic-hover-bg);
+      & span, & div.icon svg { color: #ffffff; }
+    }
+
+    &[disabled] {
+      background: var(--itd-button-disabled-bg);
+      & span, & div.icon svg { color: rgb(255, 255, 255, 30); }
+    }
+  }
+
+  /* ===== REQUEST VARIANT ===== */
+  .itd-button.itd-button-request {
+    background: linear-gradient(90deg, #0BE881 0%, #02B964 99%);
+
+    & span, & div.icon svg { color: var(--itd-color-text); }
+
+    &:hover {
+      background: linear-gradient(90deg, #16E886 0%, #0DD578 99%);
+      & span, & div.icon svg { color: var(--itd-color-text); }
+    }
+
+    &[disabled] {
+      background: linear-gradient(90deg, #05B663 0%, #028246 97%);
+      & span, & div.icon svg { color: rgb(29, 38, 73, 30); }
+    }
+  }
+
+  /* ===== APPROVE VARIANT ===== */
+  .itd-button.itd-button-approve {
+    background: linear-gradient(90deg, #FFB142 0%, #D88A1C 100%);
+
+    & span, & div.icon svg { color: var(--itd-color-text); }
+
+    &:hover {
+      background: linear-gradient(90deg, #FFC067 0%, #FFB346 100%);
+      & span, & div.icon svg { color: var(--itd-color-text); }
+    }
+
+    &[disabled] {
+      background: linear-gradient(90deg, #C88930 0%, #A86A13 98%);
+      & span, & div.icon svg { color: rgb(29, 38, 73, 30); }
+    }
+  }
+
+  /* ===== REJECT VARIANT ===== */
+  .itd-button.itd-button-reject {
+    background: linear-gradient(90deg, #B33939 0%, #971B1B 100%);
+
+    & span, & div.icon svg { color: #ffffff; }
+
+    &:hover {
+      background: linear-gradient(90deg, #DC5050 0%, #C52D2D 100%);
+      & span, & div.icon svg { color: #ffffff; }
+    }
+
+    &[disabled] {
+      background: linear-gradient(90deg, #872626 0%, #731010 100%);
+      & span, & div.icon svg { color: rgb(29, 38, 73, 30); }
+    }
+  }
+
+  /* ===== PENDING VARIANT ===== */
+  .itd-button.itd-button-pending {
+    cursor: default;
+    background-color: #1F2952;
+
+    & span, & div.icon svg { color: #ffffff99; }
+
+    &:hover {
+      background-color: #1F2952;
+      & span, & div.icon svg { color: #ffffff99; }
+    }
+
+    &[disabled] {
+      background-color: #1F2952;
+      & span, & div.icon svg { color: rgb(29, 38, 73, 30); }
+    }
+  }
+
+  /* ===== REQUESTED VARIANT ===== */
+  .itd-button.itd-button-requested {
+    cursor: default;
+    background-color: #1F295280;
+
+    & span, & div.icon svg { color: var(--itd-button-disabled-text); }
+
+    &:hover {
+      background-color: #1F295280;
+      & span, & div.icon svg { color: var(--itd-button-disabled-text); }
+    }
+
+    &[disabled] {
+      background-color: #1F295280;
+      & span, & div.icon svg { color: rgb(29, 38, 73, 30); }
+    }
+  }
+
+  /* ===== STATES ===== */
+  .itd-button[disabled] {
+    cursor: not-allowed;
+    border: 1px solid var(--itd-color-disabled-border);
+
+    & button { pointer-events: none; }
+  }
+
+  .itd-button.itd-button-loading {
+    cursor: progress;
+
+    & > *:not(.itd-spin-spinner) { opacity: 0; }
+  }
+
+  .itd-button:active:not([disabled]) {
+    transform: translateY(1px);
+  }
+
+  .itd-button:focus-visible {
+    outline: var(--itd-ring-width) solid var(--itd-color-border-focus-ring);
+  }
+
+}

package/dist/css/card.css

@@ -0,0 +1,58 @@
+/* ================================= */
+/* CARD COMPONENT STYLES             */
+/* ================================= */
+@layer components {
+
+  .itd-card > .itd-spin {
+    height: 100%;
+  }
+
+  .itd-card.itd-card-default {
+    border: 1px solid var(--itd-color-border);
+  }
+
+  .itd-card.itd-card-filled {
+    box-shadow: var(--itd-card-shadow);
+  }
+
+  .itd-card.itd-card-default,
+  .itd-card.itd-card-filled {
+    background-color: var(--itd-card);
+    color: var(--itd-card-foreground);
+    border-radius: calc(var(--itd-border-radius) + 4px);
+    font-size: var(--itd-text-sm);
+    line-height: var(--itd-text-sm--line-height);
+  }
+
+  .itd-card-content {
+    padding-block: calc(var(--itd-spacing) * 6);
+  }
+
+  .itd-card-header:not(.itd-card-header-separator) + .itd-card-content {
+    padding-block-start: 0;
+  }
+
+  .itd-card .itd-card-description {
+    color: var(--itd-color-text-muted-foreground);
+  }
+
+  .itd-card .itd-card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--itd-color-card-overlay);
+    z-index: 1000;
+  }
+
+  .itd-card-header-separator {
+    border-bottom: 1px solid var(--itd-color-border);
+  }
+
+  .itd-card-footer {
+    border-top: 1px solid var(--itd-color-border);
+    background-color: var(--itd-color-background-footer);
+  }
+
+}

package/dist/css/checkbox.css

@@ -0,0 +1,251 @@
+/* ================================= */
+/* CHECKBOX COMPONENT STYLES         */
+/* ================================= */
+@layer components {
+
+  /* ===== WRAPPER ===== */
+  .itd-checkbox {
+    display: flex;
+    align-items: center;
+    position: relative;
+    min-height: calc(var(--itd-spacing) * 5);
+
+    & .itd-checkbox-label {
+      font-size: var(--itd-size-df-font);
+      font-weight: var(--itd-font-weight-normal);
+      transition-property: color;
+      transition-duration: var(--itd-transition-duration);
+      transition-timing-function: var(--itd-transition-timing-function);
+
+      & a {
+        text-decoration: none;
+        &:hover { text-decoration: underline; }
+      }
+    }
+
+    &.itd-checkbox-readonly {
+      pointer-events: none;
+      & .itd-checkbox-label { pointer-events: none; }
+    }
+
+    &.itd-checkbox-disabled {
+      cursor: not-allowed;
+      pointer-events: auto;
+    }
+  }
+
+  /* ===== INNER WRAPPER ===== */
+  .itd-checkbox-inner-wrapper {
+    min-height: calc(var(--itd-spacing) * 5);
+    gap: calc(var(--itd-spacing) * 2);
+    display: flex;
+    align-items: center;
+    position: relative;
+    flex-direction: row;
+  }
+
+  /* ===== CHECKMARK ===== */
+  .itd-checkbox-checkmark {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(var(--itd-spacing) * 5);
+    min-width: calc(var(--itd-spacing) * 5);
+    position: relative;
+    border-radius: min(calc(var(--itd-border-radius) - 2px), 6px);
+
+    &::before {
+      content: "";
+      mask-image: url('data:image/svg+xml,<svg width="14px" height="10.4691315px" viewBox="0 0 14 10.4691315" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group" fill="%23000000" fill-rule="nonzero"><polygon id="Path" points="12.1454315 0 5.01223756 6.61750794 1.9955597 3.39820863 0 5.26815795 4.87359619 10.4691315 14 2.01029968"></polygon></g></g></svg>');
+      width: calc(var(--itd-spacing) * 3.5);
+      height: calc(var(--itd-spacing) * 2.62);
+      background-color: var(--itd-primary);
+      transform: scale(0.1);
+      opacity: 0;
+    }
+
+    &[data-animated]::before {
+      transition-property: transform;
+      transition-duration: calc(var(--itd-transition-duration) / 2);
+      transition-timing-function: var(--itd-transition-timing-function);
+    }
+
+    &[data-checked]::before {
+      transform: scale(0.85);
+      opacity: 0.85;
+    }
+
+    &[data-indeterminate]::before {
+      mask-image: none;
+      width: calc(var(--itd-spacing) * 2.5);
+      height: calc(var(--itd-spacing) * 0.5);
+      border-radius: 2px;
+      opacity: 1;
+      transform: none;
+      background-color: var(--itd-primary-foreground);
+    }
+  }
+
+  /* ===== CHECKBOX INPUT ===== */
+  .itd-checkbox-input {
+    appearance: none;
+    position: absolute;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    margin: 0;
+    padding: 0;
+    outline: 0 solid transparent;
+    outline-offset: var(--itd-ring-offset);
+    border-radius: min(calc(var(--itd-border-radius) - 2px), 6px);
+    -webkit-user-select: none;
+    user-select: none;
+
+    &[data-readonly="true"] {
+      transition: outline 100ms linear;
+    }
+
+    &[data-readonly="false"] {
+      transition:
+        outline 100ms linear,
+        border-color var(--itd-transition-duration) var(--itd-transition-timing-function);
+    }
+
+    & svg { pointer-events: none; }
+
+    &:focus-visible {
+      border-color: var(--itd-color-focus-primary);
+      outline: var(--itd-ring-width) solid var(--itd-color-focus-primary-ring);
+    }
+  }
+
+  .itd-checkbox-error .itd-checkbox-input:focus-visible {
+    border-color: var(--itd-color-error-border);
+    outline: var(--itd-ring-width) solid var(--itd-color-error-outline);
+  }
+
+  /* ===== VARIANT: DEFAULT ===== */
+  .itd-checkbox.itd-checkbox-default {
+
+    & input {
+      border: 1px solid var(--itd-color-border);
+      box-shadow: var(--itd-box-shadow);
+    }
+
+    & .itd-checkbox-checkmark {
+      background-color: var(--itd-color-background-bordered);
+    }
+
+    & .itd-checkbox-label {
+      color: var(--itd-color-control-label);
+
+      & a { color: var(--itd-primary); }
+      & a:hover { color: var(--itd-primary-hover); }
+    }
+
+    &.itd-checkbox-keyboard-active:not(.itd-checkbox-selected):not(.itd-checkbox-disabled) {
+      & input { border: 1px solid var(--itd-color-border-hover); }
+      & .itd-checkbox-label { color: var(--itd-color-text); }
+    }
+
+    &.itd-checkbox-selected {
+      & input { border: 1px solid var(--itd-primary); }
+      & .itd-checkbox-checkmark::before { background-color: var(--itd-primary); }
+      & .itd-checkbox-label { color: var(--itd-color-text); }
+    }
+
+    &.itd-checkbox-error input {
+      border: 1px solid var(--itd-color-error-border);
+    }
+
+    &.itd-checkbox-disabled {
+      & input { border: 1px solid var(--itd-color-disabled-border); }
+
+      & .itd-checkbox-checkmark {
+        background-color: var(--itd-color-disabled-bg);
+        pointer-events: none;
+        &::before { background-color: var(--itd-color-disabled-border); }
+        & svg { fill: var(--itd-color-disabled-text); }
+      }
+
+      & .itd-checkbox-label {
+        color: var(--itd-color-disabled-text);
+        pointer-events: none;
+      }
+    }
+
+    &:not(.itd-checkbox-error):not(.itd-checkbox-selected):not(.itd-checkbox-disabled):hover {
+      & input { border: 1px solid var(--itd-color-border-hover); }
+      & .itd-checkbox-label { color: var(--itd-color-text); }
+    }
+  }
+
+  /* ===== VARIANT: FILLED ===== */
+  .itd-checkbox.itd-checkbox-filled {
+
+    &:not(.itd-checkbox-readonly) {
+      transition-property: all;
+      transition-duration: var(--itd-transition-duration);
+      transition-timing-function: var(--itd-transition-timing-function);
+    }
+
+    & .itd-checkbox-checkmark {
+      background: var(--itd-color-background-alt-hover);
+    }
+
+    & .itd-checkbox-label {
+      color: var(--itd-color-control-label);
+      & a { color: var(--itd-primary); }
+      & a:hover { color: var(--itd-primary); }
+    }
+
+    &.itd-checkbox-keyboard-active:not(.itd-checkbox-selected):not(.itd-checkbox-disabled) {
+      & .itd-checkbox-checkmark { background: var(--itd-color-background-alt-hover); }
+      & .itd-checkbox-label { color: var(--itd-color-text); }
+    }
+
+    &.itd-checkbox-selected {
+      & .itd-checkbox-checkmark { background: var(--itd-primary); }
+      & .itd-checkbox-checkmark::before { background-color: var(--itd-primary-foreground); }
+      & .itd-checkbox-label { color: var(--itd-color-text); }
+    }
+
+    &.itd-checkbox-error input {
+      border: 1px solid var(--itd-color-error-border);
+    }
+
+    &.itd-checkbox-disabled {
+      & input { border: 1px solid var(--itd-color-disabled-border); }
+
+      & .itd-checkbox-checkmark {
+        background-color: var(--itd-color-disabled-bg);
+        pointer-events: none;
+        &::before { background-color: var(--itd-color-disabled-border); }
+        & svg { fill: var(--itd-color-disabled-text); }
+      }
+
+      & .itd-checkbox-label {
+        color: var(--itd-color-disabled-text);
+        pointer-events: none;
+      }
+    }
+
+    &:not(.itd-checkbox-error):not(.itd-checkbox-selected):not(.itd-checkbox-disabled):hover {
+      & .itd-checkbox-checkmark { background: var(--itd-color-background-alt-hover); }
+      & .itd-checkbox-label { color: var(--itd-color-text); }
+    }
+  }
+
+  /* ===== GROUP ===== */
+  .itd-checkbox-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: calc(var(--itd-spacing) * 2.5);
+  }
+
+}