danarakca-design-system 1.0.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "danarakca-design-system",
+  "version": "1.0.0",
+  "description": "Keu Design System - Shared UI components library",
+  "keywords": [
+    "angular",
+    "ui",
+    "design-system",
+    "components",
+    "kemenkeu"
+  ],
+  "author": "CORE APBN Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pensikeu/danarakca-design-system"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "ckeditor5": ">=44.0.0",
+    "@ckeditor/ckeditor5-angular": ">=9.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/danarakca-design-system.mjs",
+  "typings": "types/danarakca-design-system.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/danarakca-design-system.d.ts",
+      "default": "./fesm2022/danarakca-design-system.mjs"
+    }
+  },
+  "type": "module"
+}

package/src/lib/keu-ui.theme.scss

@@ -0,0 +1,5 @@
+/* =============================================================================
+ * Danarakca Design System — Global Tokens
+ * Import this file in your root styles to enable all keu-* CSS variables.
+ * ========================================================================== */
+@import './styles/tokens';

package/src/lib/styles/_tokens.scss

@@ -0,0 +1,330 @@
+// =============================================================================
+// Danarakca Design System — Design Tokens
+// =============================================================================
+
+:root {
+  // ===========================================================================
+  // GLOBAL COLORS — WARNA PUBLIK
+  // ===========================================================================
+
+  // Primary (Blue)
+  --keu-primary-900: #002847;
+  --keu-primary-800: #003661;
+  --keu-primary-700: #00437A;
+  --keu-primary-600: #005FAC; // base
+  --keu-primary-500: #2278BF;
+  --keu-primary-400: #4391D0;
+  --keu-primary-300: #67ABE0;
+  --keu-primary-200: #A8D1F0;
+  --keu-primary-100: #D2E8F9;
+  --keu-primary-50: #F0F8FE;
+
+  // Accent (Gold)
+  --keu-accent-900: #412E01;
+  --keu-accent-800: #5A4001;
+  --keu-accent-700: #745102;
+  --keu-accent-600: #A67503;
+  --keu-accent-500: #D89803;
+  --keu-accent-400: #FCB813; // base
+  --keu-accent-300: #FCC545;
+  --keu-accent-200: #FDD577;
+  --keu-accent-100: #FFECBD;
+  --keu-accent-50: #FEF4DC;
+
+  // Neutral (Gray)
+  --keu-neutral-900: #111827;
+  --keu-neutral-800: #1F2937;
+  --keu-neutral-700: #374151;
+  --keu-neutral-600: #4B5563;
+  --keu-neutral-500: #6B7280;
+  --keu-neutral-400: #9CA3AF;
+  --keu-neutral-300: #D1D5DB;
+  --keu-neutral-200: #E5E7EB;
+  --keu-neutral-100: #F3F4F6;
+  --keu-neutral-50: #F5F8FA;
+
+  // Red / Danger
+  --keu-danger-900: #7F1D1D;
+  --keu-danger-800: #991B1B;
+  --keu-danger-700: #B91C1C;
+  --keu-danger-600: #DC2626;
+  --keu-danger-500: #EF4444; // base
+  --keu-danger-400: #F87171;
+  --keu-danger-300: #FCA5A5;
+  --keu-danger-200: #FECACA;
+  --keu-danger-100: #FEE2E2;
+  --keu-danger-50: #FEF2F2;
+
+  // Green / Success
+  --keu-success-900: #03513A;
+  --keu-success-800: #026345;
+  --keu-success-700: #007D55;
+  --keu-success-600: #009C66;
+  --keu-success-500: #09C380; // base
+  --keu-success-400: #2DDA96;
+  --keu-success-300: #69ECB4;
+  --keu-success-200: #A4F6CE;
+  --keu-success-100: #CFFCE4;
+  --keu-success-50: #EBFEF4;
+
+  // ===========================================================================
+  // ESELON 1 COLORS — WARNA UNIT
+  // ===========================================================================
+
+  // Sekretariat Jenderal
+  --keu-setjen-900: #2B1F08;
+  --keu-setjen-800: #412E0B;
+  --keu-setjen-700: #5C3F0A;
+  --keu-setjen-600: #8A5F0F;
+  --keu-setjen-500: #C2820A;
+  --keu-setjen-400: #FFA600; // base
+  --keu-setjen-300: #FFB833;
+  --keu-setjen-200: #FFCA66;
+  --keu-setjen-100: #FFDB99;
+  --keu-setjen-50: #FFEDCC;
+
+  // Inspektorat Jenderal
+  --keu-itjen-900: #4A290D;
+  --keu-itjen-800: #65350B;
+  --keu-itjen-700: #834007;
+  --keu-itjen-600: #BD5800;
+  --keu-itjen-500: #F27000; // base
+  --keu-itjen-400: #FF8924;
+  --keu-itjen-300: #FFA557;
+  --keu-itjen-200: #FFC08A;
+  --keu-itjen-100: #FFDCBD;
+  --keu-itjen-50: #FFEEDA;
+
+  // Direktorat Jenderal Pajak
+  --keu-djp-900: #4D4C19;
+  --keu-djp-800: #737326;
+  --keu-djp-700: #A3A329;
+  --keu-djp-600: #D9D926;
+  --keu-djp-500: #E6E51A;
+  --keu-djp-400: #FFFF00; // base
+  --keu-djp-300: #FFFF33;
+  --keu-djp-200: #FFFF66;
+  --keu-djp-100: #FFFF99;
+  --keu-djp-50: #FFFFCC;
+
+  // Direktorat Jenderal Bea dan Cukai
+  --keu-djbc-900: #1F450C;
+  --keu-djbc-800: #327114;
+  --keu-djbc-700: #3BB800;
+  --keu-djbc-600: #4FDF0C;
+  --keu-djbc-500: #4CED00; // base
+  --keu-djbc-400: #67FF1F;
+  --keu-djbc-300: #89FF52;
+  --keu-djbc-200: #ACFF85;
+  --keu-djbc-100: #CFFFB8;
+  --keu-djbc-50: #F1FFEB;
+
+  // Direktorat Jenderal Anggaran
+  --keu-dja-900: #000638;
+  --keu-dja-800: #000852;
+  --keu-dja-700: #000B6B;
+  --keu-dja-600: #00109E;
+  --keu-dja-500: #0015D1;
+  --keu-dja-400: #031CFF; // base
+  --keu-dja-300: #384CFF;
+  --keu-dja-200: #6B7AFF;
+  --keu-dja-100: #9EA8FF;
+  --keu-dja-50: #DDDFF4;
+
+  // Direktorat Jenderal Perbendaharaan
+  --keu-djpb-900: #002333;
+  --keu-djpb-800: #00354D;
+  --keu-djpb-700: #004766;
+  --keu-djpb-600: #006B99;
+  --keu-djpb-500: #337FBD;
+  --keu-djpb-400: #00B2FF; // base
+  --keu-djpb-300: #33C1FF;
+  --keu-djpb-200: #66D1FF;
+  --keu-djpb-100: #9EDEFA;
+  --keu-djpb-50: #D4EDF7;
+
+  // Direktorat Jenderal Kekayaan Negara
+  --keu-djkn-900: #003300;
+  --keu-djkn-800: #006600;
+  --keu-djkn-700: #007E00; // base
+  --keu-djkn-600: #00B200;
+  --keu-djkn-500: #17CF17;
+  --keu-djkn-400: #3CDD3C;
+  --keu-djkn-300: #67E467;
+  --keu-djkn-200: #93EC93;
+  --keu-djkn-100: #BEF4BE;
+  --keu-djkn-50: #E9FBE9;
+
+  // Direktorat Jenderal Perimbangan Keuangan
+  --keu-djpk-900: #4D0009;
+  --keu-djpk-800: #61000B;
+  --keu-djpk-700: #7A000E;
+  --keu-djpk-600: #AD0014;
+  --keu-djpk-500: #E00019;
+  --keu-djpk-400: #FF142F;
+  --keu-djpk-300: #FF455A; // base
+  --keu-djpk-200: #FF7A89;
+  --keu-djpk-100: #FFADB7;
+  --keu-djpk-50: #FFE0E4;
+
+  // Badan Kebijakan Fiskal
+  --keu-bkf-900: #07142C;
+  --keu-bkf-800: #0B1F42;
+  --keu-bkf-700: #12336E;
+  --keu-bkf-600: #19489A;
+  --keu-bkf-500: #205CC6;
+  --keu-bkf-400: #3975DF; // base
+  --keu-bkf-300: #6594E6;
+  --keu-bkf-200: #91B3ED;
+  --keu-bkf-100: #BDD1F4;
+  --keu-bkf-50: #E9F0FB;
+
+  // Badan Pendidikan dan Pelatihan Keuangan (BPPK)
+  --keu-bppk-900: #002847;
+  --keu-bppk-800: #262626;
+  --keu-bppk-700: #333333;
+  --keu-bppk-600: #4D4D4D;
+  --keu-bppk-500: #666666;
+  --keu-bppk-400: #808080;
+  --keu-bppk-300: #999999; // base
+  --keu-bppk-200: #B3B3B3;
+  --keu-bppk-100: #CCCCCC;
+  --keu-bppk-50: #F2F2F2;
+
+  // Direktorat Jenderal Pengelolaan dan Pembiayaan & Resiko
+  --keu-djppr-900: #59005C;
+  --keu-djppr-800: #700075;
+  --keu-djppr-700: #8A0090; // base
+  --keu-djppr-600: #BB00C2;
+  --keu-djppr-500: #DF0CE9;
+  --keu-djppr-400: #E43EEA;
+  --keu-djppr-300: #E96CEF;
+  --keu-djppr-200: #F19AF4;
+  --keu-djppr-100: #F7C8F9;
+  --keu-djppr-50: #FCE8FC;
+
+  // ===========================================================================
+  // SEMANTIC TOKENS
+  // ===========================================================================
+  --keu-color-primary: var(--keu-primary-600);
+  --keu-color-accent: var(--keu-accent-400);
+  --keu-color-success: var(--keu-success-500);
+  --keu-color-danger: var(--keu-danger-500);
+  --keu-color-warning: var(--keu-accent-400);
+
+  --keu-color-text: var(--keu-neutral-900);
+  --keu-color-text-secondary: var(--keu-neutral-600);
+  --keu-color-text-disabled: var(--keu-neutral-400);
+  --keu-color-text-inverse: #ffffff;
+
+  --keu-color-bg: #ffffff;
+  --keu-color-bg-secondary: var(--keu-neutral-50);
+  --keu-color-bg-disabled: var(--keu-neutral-100);
+
+  --keu-color-border: var(--keu-neutral-300);
+  --keu-color-border-focus: var(--keu-primary-600);
+
+  // ===========================================================================
+  // GRID
+  // ===========================================================================
+  --keu-grid-columns-desktop: 12;
+  --keu-grid-columns-tablet: 8;
+  --keu-grid-columns-mobile: 4;
+
+  --keu-grid-gutter-desktop: 24px;   /* 1440px+ dan 984+ */
+  --keu-grid-gutter-tablet: 16px;    /* 744+ dan 464+ */
+  --keu-grid-gutter-mobile: 8px;     /* 375+ dan 320+ */
+
+  --keu-grid-margin-desktop-xl: 80px;  /* 1440px+ */
+  --keu-grid-margin-desktop: 40px;     /* 984+ */
+  --keu-grid-margin-tablet: 24px;      /* 744+ */
+  --keu-grid-margin-mobile: 16px;      /* 464+ dan lebih kecil */
+
+  --keu-breakpoint-xs:  320px;
+  --keu-breakpoint-sm:  375px;
+  --keu-breakpoint-md:  464px;
+  --keu-breakpoint-lg:  744px;
+  --keu-breakpoint-xl:  984px;
+  --keu-breakpoint-2xl: 1440px;
+
+  // ===========================================================================
+  // SPACING
+  // ===========================================================================
+  --keu-spacing-0:   0rem;     /* 0px    */
+  --keu-spacing-0-5: 0.125rem; /* 2px    */
+  --keu-spacing-1:   0.25rem;  /* 4px    */
+  --keu-spacing-2:   0.5rem;   /* 8px    */
+  --keu-spacing-3:   0.75rem;  /* 12px   */
+  --keu-spacing-4:   1rem;     /* 16px   */
+  --keu-spacing-5:   1.25rem;  /* 20px   */
+  --keu-spacing-6:   1.5rem;   /* 24px   */
+  --keu-spacing-8:   2rem;     /* 32px   */
+  --keu-spacing-10:  2.5rem;   /* 40px   */
+  --keu-spacing-12:  3rem;     /* 48px   */
+  --keu-spacing-16:  4rem;     /* 64px   */
+  --keu-spacing-20:  5rem;     /* 80px   */
+  --keu-spacing-24:  6rem;     /* 96px   */
+  --keu-spacing-32:  8rem;     /* 128px  */
+  --keu-spacing-40:  10rem;    /* 160px  */
+  --keu-spacing-48:  12rem;    /* 192px  */
+  --keu-spacing-56:  14rem;    /* 224px  */
+  --keu-spacing-64:  16rem;    /* 256px  */
+  --keu-spacing-80:  20rem;    /* 320px  */
+  --keu-spacing-96:  24rem;    /* 384px  */
+  --keu-spacing-120: 30rem;    /* 480px  */
+  --keu-spacing-140: 35rem;    /* 560px  */
+  --keu-spacing-160: 40rem;    /* 640px  */
+  --keu-spacing-180: 45rem;    /* 720px  */
+  --keu-spacing-192: 48rem;    /* 768px  */
+  --keu-spacing-256: 64rem;    /* 1024px */
+  --keu-spacing-320: 80rem;    /* 1280px */
+  --keu-spacing-360: 90rem;    /* 1440px */
+  --keu-spacing-400: 100rem;   /* 1600px */
+  --keu-spacing-480: 120rem;   /* 1920px */
+
+  // ===========================================================================
+  // BORDER RADIUS
+  // ===========================================================================
+  --keu-radius-none: 0px;
+  --keu-radius-xxs:  0.125rem; /* 2px  */
+  --keu-radius-xs:   0.25rem;  /* 4px  */
+  --keu-radius-sm:   0.375rem; /* 6px  */
+  --keu-radius-md:   0.5rem;   /* 8px  */
+  --keu-radius-lg:   0.625rem; /* 10px */
+  --keu-radius-xl:   0.75rem;  /* 12px */
+  --keu-radius-2xl:  1rem;     /* 16px */
+  --keu-radius-3xl:  1.25rem;  /* 20px */
+  --keu-radius-4xl:  1.5rem;   /* 24px */
+  --keu-radius-full: 9999px;
+
+  // ===========================================================================
+  // TYPOGRAPHY
+  // ===========================================================================
+  --keu-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --keu-font-size-xs: 0.75rem;
+  --keu-font-size-sm: 0.875rem;
+  --keu-font-size-md: 1rem;
+  --keu-font-size-lg: 1.125rem;
+  --keu-font-size-xl: 1.25rem;
+  --keu-font-size-2xl: 1.5rem;
+  --keu-font-size-3xl: 2rem;
+
+  --keu-font-weight-regular: 400;
+  --keu-font-weight-medium: 500;
+  --keu-font-weight-semibold: 600;
+  --keu-font-weight-bold: 700;
+
+  // ===========================================================================
+  // SHADOWS
+  // ===========================================================================
+  --keu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --keu-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --keu-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+
+  // ===========================================================================
+  // TRANSITIONS
+  // ===========================================================================
+  --keu-transition-fast: 150ms ease;
+  --keu-transition-normal: 250ms ease;
+  --keu-transition-slow: 350ms ease;
+}

package/src/lib/styles/_utilities.scss

@@ -0,0 +1,83 @@
+// =============================================================================
+// KEU-UI UTILITY CLASSES
+// Spacing  : keu-p-*, keu-px-*, keu-py-*, keu-pt-*, keu-pr-*, keu-pb-*, keu-pl-*
+//            keu-m-*, keu-mx-*, keu-my-*, keu-mt-*, keu-mr-*, keu-mb-*, keu-ml-*
+//            keu-gap-*, keu-gap-x-*, keu-gap-y-*
+// Radius   : keu-rounded-*
+// =============================================================================
+
+// Spacing scale map (name -> CSS var)
+$keu-spacing: (
+  '0':    --keu-spacing-0,
+  '0-5':  --keu-spacing-0-5,
+  '1':    --keu-spacing-1,
+  '2':    --keu-spacing-2,
+  '3':    --keu-spacing-3,
+  '4':    --keu-spacing-4,
+  '5':    --keu-spacing-5,
+  '6':    --keu-spacing-6,
+  '8':    --keu-spacing-8,
+  '10':   --keu-spacing-10,
+  '12':   --keu-spacing-12,
+  '16':   --keu-spacing-16,
+  '20':   --keu-spacing-20,
+  '24':   --keu-spacing-24,
+  '32':   --keu-spacing-32,
+  '40':   --keu-spacing-40,
+  '48':   --keu-spacing-48,
+  '56':   --keu-spacing-56,
+  '64':   --keu-spacing-64,
+  '80':   --keu-spacing-80,
+  '96':   --keu-spacing-96,
+);
+
+$keu-radius: (
+  'none': --keu-radius-none,
+  'xxs':  --keu-radius-xxs,
+  'xs':   --keu-radius-xs,
+  'sm':   --keu-radius-sm,
+  'md':   --keu-radius-md,
+  'lg':   --keu-radius-lg,
+  'xl':   --keu-radius-xl,
+  '2xl':  --keu-radius-2xl,
+  '3xl':  --keu-radius-3xl,
+  '4xl':  --keu-radius-4xl,
+  'full': --keu-radius-full,
+);
+
+// --- Spacing utilities -------------------------------------------------------
+
+@each $key, $var in $keu-spacing {
+  // padding all
+  .keu-p-#{$key}   { padding:        var(#{$var}) !important; }
+  // padding axis
+  .keu-px-#{$key}  { padding-inline: var(#{$var}) !important; }
+  .keu-py-#{$key}  { padding-block:  var(#{$var}) !important; }
+  // padding side
+  .keu-pt-#{$key}  { padding-top:    var(#{$var}) !important; }
+  .keu-pr-#{$key}  { padding-right:  var(#{$var}) !important; }
+  .keu-pb-#{$key}  { padding-bottom: var(#{$var}) !important; }
+  .keu-pl-#{$key}  { padding-left:   var(#{$var}) !important; }
+
+  // margin all
+  .keu-m-#{$key}   { margin:         var(#{$var}) !important; }
+  // margin axis
+  .keu-mx-#{$key}  { margin-inline:  var(#{$var}) !important; }
+  .keu-my-#{$key}  { margin-block:   var(#{$var}) !important; }
+  // margin side
+  .keu-mt-#{$key}  { margin-top:     var(#{$var}) !important; }
+  .keu-mr-#{$key}  { margin-right:   var(#{$var}) !important; }
+  .keu-mb-#{$key}  { margin-bottom:  var(#{$var}) !important; }
+  .keu-ml-#{$key}  { margin-left:    var(#{$var}) !important; }
+
+  // gap
+  .keu-gap-#{$key}   { gap:         var(#{$var}) !important; }
+  .keu-gap-x-#{$key} { column-gap:  var(#{$var}) !important; }
+  .keu-gap-y-#{$key} { row-gap:     var(#{$var}) !important; }
+}
+
+// --- Radius utilities --------------------------------------------------------
+
+@each $key, $var in $keu-radius {
+  .keu-rounded-#{$key} { border-radius: var(#{$var}) !important; }
+}