minora 0.1.0

package/src/tokens.css

@@ -0,0 +1,542 @@
+/* ============================================================
+   ELEGANT MINIMALIST UI KIT — Design Tokens
+   tokens.css
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');
+
+:root {
+
+  /* ──────────────────────────────────────────────────────────
+     COLOR: NEUTRAL SCALE
+     Base: cool gray dengan sentuhan warm — cocok untuk
+     background, text, dan border minimal.
+  ────────────────────────────────────────────────────────── */
+  --color-neutral-50:  #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+  --color-neutral-950: #0c0a09;
+
+  /* ──────────────────────────────────────────────────────────
+     COLOR: ACCENT — Warm Gold (Champagne)
+     Dipilih karena: timeless, sophisticated, dan menonjol
+     secara subtle di atas neutral. Cocok untuk CTA, highlight,
+     dan elemen dekoratif minimalis.
+  ────────────────────────────────────────────────────────── */
+  --color-accent-50:  #fdf8ef;
+  --color-accent-100: #faefd9;
+  --color-accent-200: #f4dbb0;
+  --color-accent-300: #eac07c;
+  --color-accent-400: #dfa04a;
+  --color-accent-500: #d4872e;   /* — primary accent — */
+  --color-accent-600: #bb6b21;
+  --color-accent-700: #9a531e;
+  --color-accent-800: #7c421f;
+  --color-accent-900: #65371c;
+  --color-accent-950: #381b0c;
+
+  /* ──────────────────────────────────────────────────────────
+     COLOR: SEMANTIC
+     Minimal — hanya 3 shade per semantic (light/default/dark)
+     agar tidak berlebihan.
+  ────────────────────────────────────────────────────────── */
+
+  /* Success */
+  --color-success-light:   #f0fdf4;
+  --color-success:         #16a34a;
+  --color-success-dark:    #14532d;
+  --color-success-border:  #bbf7d0;
+
+  /* Warning */
+  --color-warning-light:   #fffbeb;
+  --color-warning:         #b45309;
+  --color-warning-dark:    #78350f;
+  --color-warning-border:  #fde68a;
+
+  /* Error */
+  --color-error-light:     #fef2f2;
+  --color-error:           #dc2626;
+  --color-error-dark:      #7f1d1d;
+  --color-error-border:    #fecaca;
+
+  /* Info */
+  --color-info-light:      #f0f9ff;
+  --color-info:            #0284c7;
+  --color-info-dark:       #0c4a6e;
+  --color-info-border:     #bae6fd;
+
+  /* ──────────────────────────────────────────────────────────
+     TYPOGRAPHY
+     Pairing: Playfair Display (serif) + Inter (sans-serif)
+     — Klasik bertemu modern. Playfair memberi kesan mewah
+       pada heading; Inter memastikan keterbacaan di body.
+  ────────────────────────────────────────────────────────── */
+  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
+  --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+
+  /* Font Scale */
+  --text-xs:   0.75rem;    /*  12px */
+  --text-sm:   0.875rem;   /*  14px */
+  --text-base: 1rem;       /*  16px */
+  --text-lg:   1.125rem;   /*  18px */
+  --text-xl:   1.25rem;    /*  20px */
+  --text-2xl:  1.5rem;     /*  24px */
+  --text-3xl:  1.875rem;   /*  30px */
+  --text-4xl:  2.25rem;    /*  36px */
+  --text-5xl:  3rem;       /*  48px */
+
+  /* Line Height */
+  --leading-none:    1;
+  --leading-tight:   1.25;
+  --leading-snug:    1.375;
+  --leading-normal:  1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose:   2;
+
+  /* Letter Spacing */
+  --tracking-tighter: -0.05em;
+  --tracking-tight:   -0.025em;
+  --tracking-normal:   0em;
+  --tracking-wide:     0.025em;
+  --tracking-wider:    0.05em;
+  --tracking-widest:   0.1em;
+
+  /* Font Weight */
+  --font-light:    300;
+  --font-regular:  400;
+  --font-medium:   500;
+  --font-semibold: 600;
+  --font-bold:     700;
+
+  /* ──────────────────────────────────────────────────────────
+     SPACING — Base 4px
+     Setiap unit = 4px. Scale mengikuti pola Tailwind default
+     sehingga class seperti p-4 = 16px (4 × 4px).
+  ────────────────────────────────────────────────────────── */
+  --space-px:  1px;
+  --space-0:   0px;
+  --space-0-5: 2px;    /* 0.5 × 4 */
+  --space-0-25: 1px;   /* 0.25 × 4 — hairline */
+  --space-0-75: 3px;   /* 0.75 × 4 — fine detail */
+  --space-1:   4px;
+  --space-1-5: 6px;
+  --space-2:   8px;
+  --space-2-5: 10px;
+  --space-3:   12px;
+  --space-3-5: 14px;
+  --space-4:   16px;
+  --space-5:   20px;
+  --space-6:   24px;
+  --space-7:   28px;
+  --space-8:   32px;
+  --space-9:   36px;
+  --space-10:  40px;
+  --space-11:  44px;
+  --space-12:  48px;
+  --space-14:  56px;
+  --space-16:  64px;
+  --space-20:  80px;
+  --space-24:  96px;
+  --space-28:  112px;
+  --space-32:  128px;
+
+  /* ──────────────────────────────────────────────────────────
+     BORDER RADIUS — Minimal
+     Hanya dua level: sm (4px) dan md (8px).
+     Filosofi: sudut tajam memberi kesan tegas dan refined.
+  ────────────────────────────────────────────────────────── */
+  --radius-none: 0px;
+  --radius-sm:   4px;
+  --radius-md:   8px;
+
+  /* ──────────────────────────────────────────────────────────
+     SHADOW — 2 Level, Subtle
+     Tidak dramatis. Hanya memberi kedalaman yang halus.
+     sm: untuk card dan input hover.
+     md: untuk dropdown dan modal.
+  ────────────────────────────────────────────────────────── */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04),
+               0 1px 3px 0 rgb(0 0 0 / 0.03);
+
+  --shadow-md: 0 2px 8px -1px rgb(0 0 0 / 0.07),
+               0 4px 6px -2px rgb(0 0 0 / 0.04);
+
+  /* ──────────────────────────────────────────────────────────
+     TRANSITION — Smooth & Fast
+     Fast: interaksi micro (hover, focus).
+     Normal: perpindahan state (expand, collapse).
+  ────────────────────────────────────────────────────────── */
+  --duration-fast:   150ms;
+  --duration-normal: 200ms;
+  --duration-slow:   300ms;
+
+  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --transition-colors:   color var(--duration-fast) var(--ease-in-out),
+                         background-color var(--duration-fast) var(--ease-in-out),
+                         border-color var(--duration-fast) var(--ease-in-out);
+
+  --transition-shadow:   box-shadow var(--duration-normal) var(--ease-out);
+
+  --transition-all:      all var(--duration-normal) var(--ease-in-out);
+
+  /* ──────────────────────────────────────────────────────────
+     BORDER
+  ────────────────────────────────────────────────────────── */
+  --border-width:   1px;
+  --border-width-2: 2px;
+  --border-color:   var(--color-neutral-200);
+  --border-color-strong: var(--color-neutral-300);
+
+  /* ──────────────────────────────────────────────────────────
+     FOCUS RING
+  ────────────────────────────────────────────────────────── */
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-color: var(--color-accent-500);
+
+  /* ──────────────────────────────────────────────────────────
+     PILL RADIUS (for fully rounded elements: badges, avatars)
+  ────────────────────────────────────────────────────────── */
+  --radius-pill: 9999px;
+
+  /* ──────────────────────────────────────────────────────────
+     TRANSFORM — Active/pressed states
+  ────────────────────────────────────────────────────────── */
+  --scale-active: 0.97;
+
+  /* ──────────────────────────────────────────────────────────
+     AVATAR — Status indicator sizes
+  ────────────────────────────────────────────────────────── */
+  --avatar-status-xs-size: 8px;
+  --avatar-status-xs-dot:  4px;
+  --avatar-status-xs-border: var(--border-width);
+
+  --avatar-status-sm-size: 10px;
+  --avatar-status-sm-dot:  5px;
+  --avatar-status-sm-border: 1.5px;
+
+  --avatar-status-md-size: 12px;
+  --avatar-status-md-dot:  6px;
+  --avatar-status-md-border: var(--border-width-2);
+
+  --avatar-status-lg-size: 16px;
+  --avatar-status-lg-dot:  8px;
+  --avatar-status-lg-border: var(--border-width-2);
+
+  --avatar-status-xl-size: 20px;
+  --avatar-status-xl-dot:  10px;
+  --avatar-status-xl-border: 2.5px;
+
+  /* ──────────────────────────────────────────────────────────
+     AVATAR GROUP — Overlap spacing
+  ────────────────────────────────────────────────────────── */
+  --avatar-group-sm-overlap: -6px;
+  --avatar-group-md-overlap: -8px;
+  --avatar-group-lg-overlap: -12px;
+
+  /* ──────────────────────────────────────────────────────────
+     AVATAR — Group border and hover
+  ────────────────────────────────────────────────────────── */
+  --avatar-group-border: var(--color-neutral-50);
+  --avatar-group-hover-lift: -2px;
+
+  /* ──────────────────────────────────────────────────────────
+     AVATAR — Tooltip
+  ────────────────────────────────────────────────────────── */
+  --avatar-tooltip-offset-y: 4px;
+
+  /* ──────────────────────────────────────────────────────────
+     COMPONENT SIZES — Button
+  ────────────────────────────────────────────────────────── */
+  --btn-sm-height:   var(--space-8);   /* 32px */
+  --btn-md-height:   var(--space-10);  /* 40px */
+  --btn-lg-height:   var(--space-12);  /* 48px */
+
+  /* ──────────────────────────────────────────────────────────
+     COMPONENT SIZES — Badge & Tag
+  ────────────────────────────────────────────────────────── */
+  --badge-sm-height: 20px;
+  --badge-md-height: 24px;
+  --tag-sm-height:   24px;
+  --tag-md-height:   28px;
+
+  /* ──────────────────────────────────────────────────────────
+     COMPONENT SIZES — Input & Textarea
+  ────────────────────────────────────────────────────────── */
+  --input-sm-height:   var(--space-8);   /* 32px */
+  --input-md-height:   var(--space-10);  /* 40px */
+  --input-lg-height:   var(--space-12);  /* 48px */
+
+  --textarea-min-rows: 3;
+  --textarea-max-rows: 10;
+
+  /* ──────────────────────────────────────────────────────────
+     INPUT — Focus ring variant (overrides default accent)
+  ────────────────────────────────────────────────────────── */
+  --input-focus-color:      var(--color-accent-500);
+  --input-focus-error:       var(--color-error);
+  --input-focus-success:     var(--color-success);
+  --input-focus-warning:     var(--color-warning);
+
+  /* ──────────────────────────────────────────────────────────
+     INPUT — Placeholder & icon color
+  ────────────────────────────────────────────────────────── */
+  --input-placeholder-color: var(--color-neutral-400);
+  --input-icon-color:        var(--color-neutral-400);
+  --input-addon-text-color:  var(--color-neutral-500);
+  --input-addon-bg:          var(--color-neutral-100);
+  --input-helper-color:      var(--color-neutral-500);
+  --input-label-color:       var(--color-neutral-700);
+  --input-text-color:        var(--color-neutral-800);
+  --input-bg:                #ffffff;
+  --input-filled-bg:         var(--color-neutral-50);
+  --input-disabled-opacity:  0.5;
+  --input-disabled-cursor:   not-allowed;
+  --input-clear-size:        var(--space-4);
+
+  /* ──────────────────────────────────────────────────────────
+     COMPONENT SIZES — Select
+  ────────────────────────────────────────────────────────── */
+  --select-sm-height:   var(--space-8);   /* 32px */
+  --select-md-height:   var(--space-10);  /* 40px */
+  --select-lg-height:   var(--space-12);  /* 48px */
+  --select-dropdown-max-height: 240px;
+  --select-option-height: 36px;
+
+  /* ──────────────────────────────────────────────────────────
+     SELECT — Colors & shadows
+  ────────────────────────────────────────────────────────── */
+  --select-bg:             #ffffff;
+  --select-dropdown-shadow: var(--shadow-md);
+  --select-option-hover-bg: var(--color-neutral-50);
+  --select-option-active-bg: var(--color-neutral-100);
+  --select-group-label-color: var(--color-neutral-500);
+  --select-search-border: var(--color-neutral-200);
+  --select-counter-bg: var(--color-neutral-200);
+  --select-counter-min-width: var(--space-6);
+  --select-counter-height: var(--badge-sm-height);
+  --select-search-min-width: var(--space-20);
+
+  /* ──────────────────────────────────────────────────────────
+     COMPONENT SIZES — Checkbox & Radio
+  ────────────────────────────────────────────────────────── */
+  --checkbox-sm: var(--space-3);    /* 12px */
+  --checkbox-md: var(--space-4);    /* 16px */
+  --checkbox-lg: var(--space-5);    /* 20px */
+
+  /* ──────────────────────────────────────────────────────────
+     CHECKBOX & RADIO — Colors
+  ────────────────────────────────────────────────────────── */
+  --control-bg:              var(--color-neutral-100);
+  --control-border:          var(--color-neutral-300);
+  --control-checked-bg:      var(--color-accent-500);
+  --control-checked-border:  var(--color-accent-500);
+  --control-disabled-opacity: 0.4;
+  --control-gap:             var(--space-2);
+
+  /* ──────────────────────────────────────────────────────────
+     COMPONENT SIZES — Toggle / Switch
+  ────────────────────────────────────────────────────────── */
+  --switch-sm-track-w:       32px;
+  --switch-sm-track-h:       18px;
+  --switch-sm-thumb:         14px;
+  --switch-sm-translate:     14px;
+
+  --switch-md-track-w:       40px;
+  --switch-md-track-h:       22px;
+  --switch-md-thumb:         18px;
+  --switch-md-translate:     18px;
+
+  --switch-lg-track-w:       48px;
+  --switch-lg-track-h:       26px;
+  --switch-lg-thumb:         22px;
+  --switch-lg-translate:     22px;
+
+  /* ──────────────────────────────────────────────────────────
+     TOGGLE / SWITCH — Colors
+  ────────────────────────────────────────────────────────── */
+  --switch-track-off:        var(--color-neutral-300);
+  --switch-track-on:         var(--color-accent-500);
+  --switch-thumb:            #ffffff;
+  --switch-disabled-opacity: 0.5;
+  --switch-thumb-shadow:     0 1px 2px 0 rgb(0 0 0 / 0.15);
+  --switch-label-font-size:  9px;
+  --switch-spinner-inset:    2px;
+
+  /* ──────────────────────────────────────────────────────────
+     TOAST / NOTIFICATION
+  ────────────────────────────────────────────────────────── */
+  --toast-max-width:       384px;
+  --toast-min-width:       280px;
+  --toast-font-size:       var(--text-sm);
+  --toast-icon-size:       var(--space-5);
+  --toast-shadow:          0 4px 12px -2px rgb(0 0 0 / 0.08),
+                           0 2px 6px -1px rgb(0 0 0 / 0.06);
+  --toast-border-radius:   var(--radius-md);
+  --toast-bg:              #ffffff;
+  --toast-progress-height: 3px;
+  --toast-default-duration: 4000ms;
+  --toast-slide-duration:  300ms;
+  --toast-stack-gap:       var(--space-3);
+  --toast-icon-margin:     var(--space-0-25);
+  --toast-close-margin:    -2px;
+  --toast-action-underline-offset: 2px;
+
+  /* ──────────────────────────────────────────────────────────
+     NOTIFICATION PANEL
+  ────────────────────────────────────────────────────────── */
+  --notif-panel-width:       384px;
+  --notif-panel-max-height:  480px;
+  --notif-avatar-size:       var(--space-10);
+
+  /* ──────────────────────────────────────────────────────────
+     MODAL / DIALOG
+  ────────────────────────────────────────────────────────── */
+  --modal-overlay-bg:      rgb(0 0 0 / 0.3);
+  --modal-overlay-blur:    4px;
+  --modal-bg:              #ffffff;
+  --modal-shadow:          0 8px 24px -4px rgb(0 0 0 / 0.08),
+                           0 20px 48px -8px rgb(0 0 0 / 0.06);
+  --modal-radius:          var(--radius-md);
+  --modal-sm:              400px;
+  --modal-md:              560px;
+  --modal-lg:              720px;
+  --modal-xl:              900px;
+  --modal-max-w:           calc(100vw - var(--space-8));
+  --modal-max-h:           calc(100vh - var(--space-12));
+  --modal-padding:         var(--space-6);
+  --modal-header-padding:  var(--space-4) var(--space-6);
+  --modal-footer-padding:  var(--space-4) var(--space-6);
+  --modal-body-padding:    var(--space-6);
+  --modal-open-duration:   250ms;
+  --modal-open-ease:       cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* ──────────────────────────────────────────────────────────
+     TOOLTIP / POPOVER
+  ────────────────────────────────────────────────────────── */
+  --tooltip-bg:              var(--color-neutral-900);
+  --tooltip-color:           var(--color-neutral-50);
+  --tooltip-font-size:       var(--text-xs);
+  --tooltip-padding:         var(--space-1-5) var(--space-2-5);
+  --tooltip-border-radius:   var(--radius-sm);
+  --tooltip-arrow-size:      6px;
+  --tooltip-shadow:          0 2px 4px 0 rgb(0 0 0 / 0.1);
+  --tooltip-light-bg:        var(--color-neutral-50);
+  --tooltip-light-color:     var(--color-neutral-800);
+  --tooltip-light-border:    var(--color-neutral-200);
+  --tooltip-in-duration:     150ms;
+  --tooltip-out-duration:    80ms;
+  --tooltip-show-delay:      300ms;
+  --tooltip-hide-delay:      100ms;
+  --tooltip-max-width:       240px;
+  --tooltip-rich-max-width:  280px;
+
+  --popover-bg:              #ffffff;
+  --popover-color:           var(--color-neutral-800);
+  --popover-min-width:       280px;
+  --popover-max-width:       384px;
+  --popover-border-radius:   var(--radius-md);
+  --popover-shadow:          var(--shadow-md);
+  --popover-border:          var(--color-neutral-200);
+
+  /* ──────────────────────────────────────────────────────────
+     ALERT / INLINE MESSAGE / PAGE BANNER
+  ────────────────────────────────────────────────────────── */
+  --alert-padding:           var(--space-4);
+  --alert-padding-compact:   var(--space-2-5) var(--space-3);
+  --alert-radius:            var(--radius-sm);
+  --alert-border-accent:     3px;
+  --alert-icon-size:         var(--space-5);
+  --alert-font-size:         var(--text-sm);
+  --alert-max-width:         720px;
+  --alert-slide-duration:    var(--duration-normal);
+
+  --alert-subtle-success-bg:   var(--color-success-light);
+  --alert-subtle-success-accent: var(--color-success);
+  --alert-subtle-error-bg:     var(--color-error-light);
+  --alert-subtle-error-accent:   var(--color-error);
+  --alert-subtle-warning-bg:   var(--color-warning-light);
+  --alert-subtle-warning-accent: var(--color-warning);
+  --alert-subtle-info-bg:      var(--color-info-light);
+  --alert-subtle-info-accent:    var(--color-info);
+  --alert-subtle-neutral-bg:   var(--color-neutral-100);
+  --alert-subtle-neutral-accent: var(--color-neutral-400);
+
+  --alert-filled-success-bg:   var(--color-success);
+  --alert-filled-error-bg:     var(--color-error);
+  --alert-filled-warning-bg:   var(--color-warning);
+  --alert-filled-info-bg:      var(--color-info);
+  --alert-filled-neutral-bg:   var(--color-neutral-700);
+
+  --inline-msg-font-size:    var(--text-xs);
+  --inline-msg-icon-size:    var(--space-3-5);
+
+  --page-banner-padding:   var(--space-2-5) var(--space-4);
+  --page-banner-font-size: var(--text-sm);
+  --page-banner-bg:        var(--color-accent-500);
+  --page-banner-color:     var(--color-neutral-50);
+  --page-banner-text-max:  640px;
+  --page-banner-max-h:     200px;
+  --alert-max-h:           2000px;
+  --alert-hover-underline: 2px;
+
+  /* ──────────────────────────────────────────────────────────
+     Z-INDEX SCALE
+  ────────────────────────────────────────────────────────── */
+  --z-base:      0;
+  --z-raised:    10;
+  --z-dropdown:  100;
+  --z-overlay:   200;
+  --z-tooltip:   250;
+  --z-modal:     300;
+  --z-toast:     400;
+
+  /* ──────────────────────────────────────────────────────────
+     ANIMATION — Spinner / loading
+  ────────────────────────────────────────────────────────── */
+  --anim-spin-duration:    0.8s;
+  --anim-spinner-fast:     0.6s;
+  --anim-check-draw-delay: 200ms;
+}
+
+/* ──────────────────────────────────────────────────────────────
+   BASE RESET — Terapkan token sebagai default
+────────────────────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: var(--font-regular);
+  line-height: var(--leading-normal);
+  color: var(--color-neutral-800);
+  background-color: var(--color-neutral-50);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-serif);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  color: var(--color-neutral-900);
+}