@geoit/ui 0.0.2

package/src/lib/styles/design-tokens.scss

@@ -0,0 +1,143 @@
+/**
+ * GEO UI design tokens — single source of truth for colors, radius, typography.
+ * Components MUST use these CSS variables; never hardcode hex colors or radii.
+ */
+:root {
+  /* Primary */
+  --geo-color-primary-default: #9a4828;
+  --geo-color-primary-hover: #7d3a20;
+  --geo-color-primary-light: #b5643f;
+  --geo-color-primary-dark: #2c1810;
+  --geo-color-primary-background: #faf5ed;
+  --geo-color-primary-background-alt: #f5f0e8;
+  --geo-color-primary-border: #e8e0d8;
+  --geo-color-primary-surface-light: #f8e6de;
+  /* Secondary button hover */
+  --geo-color-primary-secondary-hover: #faf5ed;
+
+  /* Neutral */
+  --geo-color-neutral-900: #111827;
+  --geo-color-neutral-800: #212121;
+  --geo-color-neutral-700: #374151;
+  --geo-color-neutral-500: #6b7280;
+  --geo-color-neutral-400: #9ca3af;
+  --geo-color-neutral-300: #d1d5db;
+  --geo-color-neutral-200: #e5e7eb;
+  --geo-color-neutral-100: #f3f4f6;
+  --geo-color-neutral-white: #ffffff;
+  --geo-color-neutral-disabled-text: #8f9294;
+
+  /* Success */
+  --geo-color-success-dark: #166534;
+  --geo-color-success-default: #22c55e;
+  --geo-color-success-light: #dcfce7;
+
+  /* Error */
+  --geo-color-error-dark: #991b1b;
+  --geo-color-error-default: #dc2626;
+  --geo-color-error-light: #fee2e2;
+
+  /* Warning */
+  --geo-color-warning-dark: #92400e;
+  --geo-color-warning-default: #f59e0b;
+  --geo-color-warning-light: #fef3c7;
+
+  /* Info */
+  --geo-color-info-dark: #1e40af;
+  --geo-color-info-default: #3b82f6;
+  --geo-color-info-light: #dbeafe;
+
+  /* Teal — status badge (Trả kết quả) */
+  --geo-color-teal-dark: #0f766e;
+  --geo-color-teal-default: #14b8a6;
+  --geo-color-teal-light: #ccfbf1;
+
+  /* Semantic aliases (legacy-friendly names used by components) */
+  --color-primary: var(--geo-color-primary-default);
+  --color-primary-hover: var(--geo-color-primary-hover);
+  --color-primary-dark: var(--geo-color-primary-dark);
+  --color-primary-light: var(--geo-color-primary-light);
+  --color-primary-surface: var(--geo-color-primary-surface-light);
+  --color-primary-surface-hover: var(--geo-color-primary-background);
+  --color-primary-secondary-hover: var(--geo-color-primary-secondary-hover);
+  --color-primary-border: var(--geo-color-primary-border);
+  --color-primary-background: var(--geo-color-primary-background);
+  --color-primary-background-alt: var(--geo-color-primary-background-alt);
+
+  --color-ink: var(--geo-color-neutral-900);
+  --color-ink-strong: var(--geo-color-neutral-900);
+  --color-ink-body: var(--geo-color-neutral-700);
+  --color-ink-muted: var(--geo-color-neutral-500);
+  --color-ink-subtle: var(--geo-color-neutral-400);
+  --color-disabled-text: var(--geo-color-neutral-disabled-text);
+
+  --color-surface-white: var(--geo-color-neutral-white);
+  --color-surface-muted: var(--geo-color-neutral-100);
+  --color-surface-border: var(--geo-color-neutral-200);
+  --color-surface-divider: var(--geo-color-neutral-100);
+  --color-border: var(--geo-color-neutral-300);
+  --color-border-subtle: var(--geo-color-primary-border);
+
+  --color-success: var(--geo-color-success-default);
+  --color-success-dark: var(--geo-color-success-dark);
+  --color-success-light: var(--geo-color-success-light);
+
+  --color-error: var(--geo-color-error-default);
+  --color-error-dark: var(--geo-color-error-dark);
+  --color-error-light: var(--geo-color-error-light);
+  --color-danger: var(--geo-color-error-default);
+  --color-danger-dark: var(--geo-color-error-dark);
+  --color-danger-light: var(--geo-color-error-light);
+
+  --color-warning: var(--geo-color-warning-default);
+  --color-warning-dark: var(--geo-color-warning-dark);
+  --color-warning-light: var(--geo-color-warning-light);
+
+  --color-info: var(--geo-color-info-default);
+  --color-info-dark: var(--geo-color-info-dark);
+  --color-info-light: var(--geo-color-info-light);
+
+  --color-teal: var(--geo-color-teal-default);
+  --color-teal-dark: var(--geo-color-teal-dark);
+  --color-teal-light: var(--geo-color-teal-light);
+
+  /* Spacing / radius shared — default corner radius 6px */
+  --geo-radius: 6px;
+  --geo-radius-sm: var(--geo-radius);
+  --geo-radius-md: var(--geo-radius);
+  --geo-radius-lg: var(--geo-radius);
+  --geo-control-height: 40px;
+
+  /* Typography — Inter + type scale */
+  --geo-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --geo-font-weight-regular: 400;
+  --geo-font-weight-medium: 500;
+  --geo-font-weight-semibold: 600;
+  --geo-font-weight-bold: 700;
+
+  --geo-font-size-h1: 28px;
+  --geo-line-height-h1: 36px;
+  --geo-font-size-h2: 24px;
+  --geo-line-height-h2: 32px;
+  --geo-font-size-h3: 20px;
+  --geo-line-height-h3: 28px;
+  --geo-font-size-h4: 16px;
+  --geo-line-height-h4: 24px;
+  --geo-font-size-subtitle: 14px;
+  --geo-line-height-subtitle: 20px;
+  --geo-font-size-body: 14px;
+  --geo-line-height-body: 20px;
+  --geo-font-size-body-small: 13px;
+  --geo-line-height-body-small: 18px;
+  --geo-font-size-caption: 12px;
+  --geo-line-height-caption: 16px;
+  --geo-font-size-overline: 11px;
+  --geo-line-height-overline: 16px;
+  --geo-font-size-tiny: 10px;
+  --geo-line-height-tiny: 14px;
+
+  /* Legacy size aliases */
+  --geo-font-size-sm: var(--geo-font-size-body-small);
+  --geo-font-size-md: var(--geo-font-size-body);
+  --geo-font-size-lg: var(--geo-font-size-h4);
+}

package/src/lib/styles/geo-toast-notification.scss

@@ -0,0 +1,129 @@
+/**
+ * Ant Design notification skin — khi mở qua GeoToastService.
+ * Gắn class `geo-toast-notice geo-toast-notice--{type}` lên notice.
+ */
+.ant-notification-notice.geo-toast-notice {
+  position: relative;
+  padding: 12px 12px 12px 16px;
+  width: 480px;
+  max-width: calc(100vw - 32px);
+  border-radius: var(--geo-radius);
+  border: 1px solid transparent;
+  box-shadow: none;
+  overflow: hidden;
+  font-family: var(--geo-font-family);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 5px;
+  }
+
+  .ant-notification-notice-with-icon .ant-notification-notice-message {
+    margin-bottom: 2px;
+    margin-left: 30px;
+    font-size: var(--geo-font-size-body);
+    font-weight: var(--geo-font-weight-bold);
+    line-height: var(--geo-line-height-body);
+  }
+
+  .ant-notification-notice-with-icon .ant-notification-notice-description {
+    margin-left: 30px;
+    font-size: var(--geo-font-size-body-small);
+    font-weight: var(--geo-font-weight-regular);
+    line-height: var(--geo-line-height-body-small);
+    color: var(--geo-color-neutral-800);
+  }
+
+  .ant-notification-notice-icon {
+    margin-left: 4px;
+    font-size: 20px;
+    line-height: 20px;
+  }
+
+  .ant-notification-notice-close {
+    top: 12px;
+    right: 12px;
+    color: inherit;
+  }
+
+  &.geo-toast-notice--no-icon {
+    .ant-notification-notice-message,
+    .ant-notification-notice-description {
+      margin-left: 0;
+    }
+
+    .ant-notification-notice-icon {
+      display: none;
+    }
+  }
+
+  &.geo-toast-notice--no-close {
+    .ant-notification-notice-close {
+      display: none;
+    }
+  }
+
+  &--success {
+    background: var(--geo-color-success-light);
+    border-color: color-mix(in srgb, var(--geo-color-success-default) 45%, var(--geo-color-success-light));
+
+    &::before {
+      background: var(--geo-color-success-default);
+    }
+
+    .ant-notification-notice-icon,
+    .ant-notification-notice-message,
+    .ant-notification-notice-close {
+      color: var(--geo-color-success-default);
+    }
+  }
+
+  &--error {
+    background: var(--geo-color-error-light);
+    border-color: color-mix(in srgb, var(--geo-color-error-default) 40%, var(--geo-color-error-light));
+
+    &::before {
+      background: var(--geo-color-error-default);
+    }
+
+    .ant-notification-notice-icon,
+    .ant-notification-notice-message,
+    .ant-notification-notice-close {
+      color: var(--geo-color-error-default);
+    }
+  }
+
+  &--warning {
+    background: var(--geo-color-warning-light);
+    border-color: color-mix(in srgb, var(--geo-color-warning-default) 45%, var(--geo-color-warning-light));
+
+    &::before {
+      background: var(--geo-color-warning-default);
+    }
+
+    .ant-notification-notice-icon,
+    .ant-notification-notice-message,
+    .ant-notification-notice-close {
+      color: var(--geo-color-warning-default);
+    }
+  }
+
+  &--info {
+    background: var(--geo-color-info-light);
+    border-color: color-mix(in srgb, var(--geo-color-info-default) 40%, var(--geo-color-info-light));
+
+    &::before {
+      background: var(--geo-color-info-default);
+    }
+
+    .ant-notification-notice-icon,
+    .ant-notification-notice-message,
+    .ant-notification-notice-close {
+      color: var(--geo-color-info-default);
+    }
+  }
+}

package/src/lib/styles/scrollbar.scss

@@ -0,0 +1,38 @@
+/**
+ * Cross-browser scrollbar mixins — thumb colors from GEO design tokens.
+ */
+@mixin geo-scrollbar($size: var(--scrollbar-size, 8px)) {
+  scrollbar-width: thin;
+  scrollbar-color: var(--geo-color-neutral-400) transparent;
+
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 999px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--geo-color-neutral-400);
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    min-height: 40px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--geo-color-neutral-500);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+.geo-scrollbar {
+  @include geo-scrollbar();
+}

package/src/lib/styles/theme.scss

@@ -0,0 +1,153 @@
+/**
+ * ng-zorro theme overrides mapped to GEO design tokens.
+ * Loaded after ng-zorro CSS so Ant Design primitives follow the palette.
+ */
+
+/* Primary / brand */
+.ant-btn-primary {
+  background-color: var(--geo-color-primary-default);
+  border-color: var(--geo-color-primary-default);
+
+  &:not(:disabled):hover {
+    background-color: var(--geo-color-primary-hover);
+    border-color: var(--geo-color-primary-hover);
+  }
+}
+
+.ant-checkbox-checked .ant-checkbox-inner,
+.ant-radio-checked .ant-radio-inner {
+  background-color: var(--geo-color-primary-default);
+  border-color: var(--geo-color-primary-default);
+}
+
+.ant-radio-inner::after {
+  background-color: var(--geo-color-neutral-white);
+}
+
+.ant-switch-checked {
+  background: var(--geo-color-primary-default);
+}
+
+.ant-tabs-ink-bar,
+.ant-slider-track,
+.ant-pagination-item-active {
+  background: var(--geo-color-primary-default);
+  border-color: var(--geo-color-primary-default);
+}
+
+.ant-pagination-item-active a {
+  color: var(--geo-color-primary-default);
+}
+
+.ant-input:hover,
+.ant-input:focus,
+.ant-input-focused,
+.ant-select:not(.ant-select-disabled):hover .ant-select-selector,
+.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector,
+.ant-picker:hover,
+.ant-picker-focused {
+  border-color: var(--geo-color-primary-default) !important;
+}
+
+.ant-input:focus,
+.ant-input-focused,
+.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector,
+.ant-picker-focused {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--geo-color-primary-default) 16%, transparent) !important;
+}
+
+.ant-menu-light .ant-menu-item-selected,
+.ant-menu-light .ant-menu-item:hover {
+  color: var(--geo-color-primary-default);
+}
+
+.ant-tag-success {
+  color: var(--geo-color-success-dark);
+  background: var(--geo-color-success-light);
+  border-color: var(--geo-color-success-default);
+}
+
+.ant-tag-error {
+  color: var(--geo-color-error-dark);
+  background: var(--geo-color-error-light);
+  border-color: var(--geo-color-error-default);
+}
+
+.ant-tag-warning {
+  color: var(--geo-color-warning-dark);
+  background: var(--geo-color-warning-light);
+  border-color: var(--geo-color-warning-default);
+}
+
+.ant-tag-processing {
+  color: var(--geo-color-info-dark);
+  background: var(--geo-color-info-light);
+  border-color: var(--geo-color-info-default);
+}
+
+@import './geo-toast-notification';
+
+/* Default corner radius for Ant Design primitives */
+.ant-btn,
+.ant-input,
+.ant-input-affix-wrapper,
+.ant-input-number,
+.ant-select:not(.ant-select-customize-input) .ant-select-selector,
+.ant-picker,
+.ant-modal-content,
+.ant-modal-confirm-body-wrapper,
+.ant-notification-notice,
+.ant-card,
+.ant-alert,
+.ant-dropdown-menu,
+.ant-select-dropdown,
+.ant-picker-panel-container,
+.ant-pagination-item,
+.ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination-next .ant-pagination-item-link {
+  border-radius: var(--geo-radius);
+}
+
+body {
+  color: var(--geo-color-neutral-900);
+  background: var(--geo-color-neutral-white);
+  font-family: var(--geo-font-family);
+  font-size: var(--geo-font-size-body);
+  font-weight: var(--geo-font-weight-regular);
+  line-height: var(--geo-line-height-body);
+}
+
+/* Align Ant Design Typography defaults with GEO type scale */
+.ant-typography {
+  font-family: var(--geo-font-family);
+  color: var(--geo-color-neutral-900);
+}
+
+.ant-typography h1,
+h1.ant-typography {
+  font-size: var(--geo-font-size-h1);
+  font-weight: var(--geo-font-weight-bold);
+  line-height: var(--geo-line-height-h1);
+}
+
+.ant-typography h2,
+h2.ant-typography {
+  font-size: var(--geo-font-size-h2);
+  font-weight: var(--geo-font-weight-bold);
+  line-height: var(--geo-line-height-h2);
+}
+
+.ant-typography h3,
+h3.ant-typography {
+  font-size: var(--geo-font-size-h3);
+  font-weight: var(--geo-font-weight-bold);
+  line-height: var(--geo-line-height-h3);
+}
+
+.ant-typography h4,
+h4.ant-typography {
+  font-size: var(--geo-font-size-h4);
+  font-weight: var(--geo-font-weight-bold);
+  line-height: var(--geo-line-height-h4);
+}
+