ds-smart-ui/src/assets/styles/global.css

Smart UI v1.0.5 — A production-ready React component library by PT Praisindo Teknologi. Covers inputs, navigation, data display, feedback, and layout with a unified design system, semantic Typography tokens, and full Storybook documentation.

@import "./designTokens.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Block .block
Element .block__element
Modifier .block__element--modifier */

body {
  font-family: var(--font-family);
}

@layer utilities {
  /* SidebarMenu */
  .sidebar-menu__item {
    @apply flex items-center p-2 w-full rounded-[8px] transition-all ease-in duration-150;
  }
  .sidebar-menu__icon {
    @apply flex;
  }
  .sidebar-menu__label {
    @apply ml-2;
  }
  .sidebar-menu__item--size-sm {
    @apply !text-[14px];
  }
  .sidebar-menu__item--size-md {
    @apply !text-[16px];
  }
  .sidebar-menu__item--size-lg {
    @apply !text-[18px];
  }
  .sidebar-menu__item--active {
    @apply bg-primary-500 text-primary-100 hover:bg-primary-700 font-medium;
  }
  .sidebar-menu__item--inactive {
    @apply text-light-500 hover:bg-light-200;
  }
  .sidebar-menu__icon--left {
    @apply mr-1;
  }
  .sidebar-menu__icon--right {
    @apply ml-2;
  }
  /* END SidebarMenu */

  /* InputField Base */
  .input-field {
    @apply flex w-full text-dark-800 border border-light-200 placeholder:text-special-placeholder disabled:cursor-not-allowed disabled:bg-special-disabled;
    transition:
      border-color 0.2s ease-in-out,
      outline 0.2s ease-in-out,
      box-shadow 0.2s ease-in-out;
    cursor: auto;
    background-color: var(--color-white);
  }

  .input-field--disabled {
    @apply cursor-not-allowed pointer-events-none;
    background-color: var(--color-special-disabled);
    border-color: var(--color-light-200);
    color: var(--color-dark-600);
    tab-index: -1;
  }

  .input-field--disabled:focus {
    border-color: var(--color-light-200);
    outline: none;
    box-shadow: none;
  }

  /* InputField Focus States */
  .input-field:focus,
  .input-field:active {
    border-color: var(--color-primary-500);
    outline: var(--outline-color-primary) !important;
    box-shadow: var();
  }

  .input-field:disabled,
  .input-field:disabled:focus,
  .input-field:disabled:active {
    background: var(--color-special-disabled);
    border-color: var(--color-light-200);
    color: var(--color-dark-600);
    outline: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* InputField Size Variants */
  .input-field--sm {
    @apply p-[10px] h-[44px];
    font-size: var(--font-size-xs);
  }

  .input-field--md {
    @apply p-[15px] h-[52px];
    font-size: var(--font-size-sm);
  }

  .input-field--lg {
    @apply px-[18px] py-[20px] h-[62px];
    font-size: var(--font-size-md);
  }

  /* InputField Border Radius Variants */
  .input-field--rounded-none {
    border-radius: var(--border-radius-none);
  }

  .input-field--rounded-sm {
    border-radius: var(--border-radius-sm);
  }

  .input-field--rounded-md {
    border-radius: var(--border-radius-md);
  }

  .input-field--rounded-lg {
    border-radius: var(--border-radius-lg);
  }

  .input-field--rounded-full {
    border-radius: var(--border-radius-full);
  }

  /* InputField Layout Components */
  .input-field__container {
    display: flex;
    flex-direction: column;
  }

  .input-field__wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* InputField Icons */
  .input-field__icon-start,
  .input-field__icon-end {
    color: var(--color-dark-400);
    position: absolute;
    pointer-events: none;
  }

  .input-field__icon-start {
    left: 12px;
  }

  .input-field__icon-end {
    right: 12px;
  }

  .input-field__clickable {
    pointer-events: auto !important;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* InputField Color Variants */
  .input-field--primary:focus,
  .input-field--primary:active {
    border-color: var(--color-primary-500);
    outline: var(--outline-color-primary) !important;
    box-shadow: var(--shadow-color-primary);
  }

  .input-field--secondary:focus,
  .input-field--secondary:active {
    border-color: var(--color-secondary-500);
    outline: var(--outline-color-secondary) !important;
    box-shadow: var(--shadow-color-secondary);
  }

  .input-field--success:focus,
  .input-field--success:active {
    border-color: var(--color-success-500);
    outline: var(--outline-color-success) !important;
    box-shadow: var(--shadow-color-success);
  }

  .input-field--warning:focus,
  .input-field--warning:active {
    border-color: var(--color-warning-500);
    outline: var(--outline-color-warning) !important;
    box-shadow: var(--shadow-color-warning);
  }

  .input-field--danger:focus,
  .input-field--danger:active {
    border-color: var(--color-danger-500);
    outline: var(--outline-color-danger) !important;
    box-shadow: var(--shadow-color-danger);
  }

  .input-field--info:focus,
  .input-field--info:active {
    border-color: var(--color-info-500);
    outline: var(--outline-color-info) !important;
    box-shadow: var(--shadow-color-info);
  }

  .input-field--light:focus,
  .input-field--light:active {
    border-color: var(--color-light-300);
    outline: var(--outline-color-light) !important;
    box-shadow: var(--shadow-color-light);
  }

  .input-field--dark:focus,
  .input-field--dark:active {
    border-color: var(--color-dark-800);
    outline: var(--outline-color-dark) !important;
    box-shadow: var(--shadow-color-dark);
  }

  /* InputField Error State */
  .input-field--error {
    border-color: var(--color-danger-500);
  }

  .input-field--error:focus,
  .input-field--error:active {
    border-color: var(--color-danger-500);
    outline: var(--outline-color-danger) !important;
    box-shadow: var(--shadow-color-danger);
  }

  .input-field--clickable {
    pointer-events: auto !important;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    padding-right: 3rem;
  }

  /* WebKit (Chrome, Edge, Safari) */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    position: absolute;
    opacity: 0.6;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    cursor: pointer;
  }
  /* END InputField */
}