@sdcorejs/angular 21.0.10 → 21.1.0

package/README.md

@@ -91,32 +91,41 @@ export const appConfig: ApplicationConfig = {
 
 ## Theming / SCSS Customization
 
+`sd-core.scss` emits the Angular Material M3 theme with `mat.theme(...)`.
+Prefer Core UI variables such as `--sd-primary`, `--sd-surface`, `--sd-text`,
+and `--sd-border` in application code. Material system variables remain an
+implementation detail for Angular Material overrides.
+
 ### CSS Variables
 
 `@sdcorejs/angular` sử dụng CSS custom properties (variables) để quản lý màu sắc. Mỗi màu được expose dưới dạng `--sd-<color>`.
 
 **Available color tokens / Các biến màu sắc:**
 
-| Variable               | Default   | Description     |
-| ---------------------- | --------- | --------------- |
-| `--sd-primary`         | `#2A66F4` | Màu chính       |
-| `--sd-primary-light`   | `#EAF1FF` | Màu chính nhạt  |
-| `--sd-primary-dark`    | `#1C4AD9` | Màu chính đậm   |
-| `--sd-secondary`       | `#212121` | Màu phụ         |
-| `--sd-secondary-light` | `#E9E9E9` | Màu phụ nhạt    |
-| `--sd-success`         | `#4CAF50` | Thành công      |
-| `--sd-success-light`   | `#DBEFDC` | Thành công nhạt |
-| `--sd-warning`         | `#FF9600` | Cảnh báo        |
-| `--sd-warning-light`   | `#FFEACC` | Cảnh báo nhạt   |
-| `--sd-error`           | `#F82C13` | Lỗi             |
-| `--sd-error-light`     | `#FED5D0` | Lỗi nhạt        |
-| `--sd-info`            | `#2962FF` | Thông tin       |
-| `--sd-info-light`      | `#E7E9FF` | Thông tin nhạt  |
-| `--sd-black500`        | `#212121` | Xám đậm nhất    |
-| `--sd-black400`        | `#757575` | Xám đậm         |
-| `--sd-black300`        | `#BFBFBF` | Xám trung       |
-| `--sd-black200`        | `#E6E6E6` | Xám nhạt        |
-| `--sd-black100`        | `#F2F2F2` | Xám nhạt nhất   |
+Core UI exposes a small public token surface: semantic palettes for component
+states, plus neutral tokens for surface, text, border, and disabled states.
+
+| Variable | Default bridge / fallback | Description |
+| -------- | ------------------------- | ----------- |
+| `--sd-primary` | `var(--mat-sys-primary, #005cbb)` | Main action color |
+| `--sd-primary-light` | `color-mix(in srgb, var(--sd-primary) 14%, white)` | Soft primary background |
+| `--sd-primary-dark` | `color-mix(in srgb, var(--sd-primary) 84%, black)` | Hover/active primary shade |
+| `--sd-primary-contrast` | `#ffffff` | Text/icon on primary |
+| `--sd-secondary` | `var(--mat-sys-secondary, #5c6270)` | Secondary action/accent |
+| `--sd-secondary-light` | `color-mix(in srgb, var(--sd-secondary) 12%, white)` | Soft secondary background |
+| `--sd-secondary-dark` | `color-mix(in srgb, var(--sd-secondary) 84%, black)` | Hover/active secondary shade |
+| `--sd-secondary-contrast` | `#ffffff` | Text/icon on secondary |
+| `--sd-info`, `--sd-success`, `--sd-warning`, `--sd-error` | Semantic base colors | Info, success, warning, and error states |
+| `--sd-*-light` / `--sd-*-dark` / `--sd-*-contrast` | Generated from each semantic base | Soft background, active shade, and readable foreground |
+| `--sd-surface` | `var(--mat-sys-surface, #fdfbff)` | App/page surface |
+| `--sd-surface-muted` | `var(--mat-sys-surface-container-highest, #e7e8ed)` | Muted neutral background |
+| `--sd-text` | `var(--mat-sys-on-surface, #1a1b1f)` | Primary text |
+| `--sd-text-secondary` | `var(--mat-sys-on-surface-variant, #44474f)` | Secondary text |
+| `--sd-text-muted` | `color-mix(in srgb, var(--sd-text) 62%, transparent)` | Muted text |
+| `--sd-border` | `var(--mat-sys-outline-variant, #c4c6d0)` | Divider/subtle border |
+| `--sd-border-strong` | `var(--mat-sys-outline, #74777f)` | Strong border/focus outline |
+| `--sd-disabled-bg` | `color-mix(in srgb, var(--sd-text) 8%, transparent)` | Disabled background |
+| `--sd-disabled-text` | `color-mix(in srgb, var(--sd-text) 60%, transparent)` | Disabled text/icon |
 
 ### Custom Theme / Tuỳ chỉnh theme
 
@@ -314,7 +323,7 @@ import { SdButton } from '@sdcorejs/angular/components/button';
 
 | Input        | Type                                       | Default       | Description                        |
 | ------------ | ------------------------------------------ | ------------- | ---------------------------------- |
-| `type`       | `'fill' \| 'light' \| 'outline' \| 'link'` | `'light'`     | Kiểu nút                           |
+| `type`       | `'fill' \| 'light' \| 'outline' \| 'text'` | `'light'`     | Kiểu nút                           |
 | `color`      | `Color`                                    | `'secondary'` | Màu sắc                            |
 | `size`       | `'sm' \| 'md' \| 'lg'`                     | `'sm'`        | Kích thước                         |
 | `title`      | `string`                                   | —             | Nhãn nút                           |
@@ -377,7 +386,7 @@ import { SdSection } from '@sdcorejs/angular/components/section';
 | `subTitle`    | `string`  | —           | Tiêu đề phụ                |
 | `icon`        | `string`  | —           | Icon Material              |
 | `iconColor`   | `Color`   | `'primary'` | Màu icon                   |
-| `collapsable` | `boolean` | `false`     | Cho phép thu gọn           |
+| `collapsible` | `boolean` | `false`     | Cho phép thu gọn           |
 | `collapsed`   | `boolean` | `false`     | Trạng thái ban đầu thu gọn |
 | `hideHeader`  | `boolean` | `false`     | Ẩn phần header             |
 
@@ -386,7 +395,7 @@ import { SdSection } from '@sdcorejs/angular/components/section';
   <!-- nội dung -->
 </sd-section>
 
-<sd-section title="Cài đặt nâng cao" icon="settings" collapsable [collapsed]="true">
+<sd-section title="Cài đặt nâng cao" icon="settings" collapsible [collapsed]="true">
   <!-- nội dung ẩn mặc định -->
 </sd-section>
 ```

package/assets/STYLE-GUIDE.md

@@ -94,54 +94,49 @@ projects/sdcorejs-angular/assets/
     │       └── _typography.scss       # T{n}{M|R} tokens + fs-* + font-weight-* + text-*
     └── themes/
         ├── default.scss               # sd.theme() mixin — override `--sd-*` color tokens
-        └── material-theme.scss        # Angular Material M2 theme baseline
+        └── material-theme.scss        # Angular Material M3 theme/token baseline
 ```
 
 ---
 
 ## 3. Hệ thống màu sắc
 
-Màu được định nghĩa dưới dạng **CSS custom properties** với prefix `--sd-*`, cho phép override runtime (không cần recompile SCSS).
+Màu được định nghĩa dưới dạng **CSS custom properties** với prefix `--sd-*`, cho phép override runtime (không cần recompile SCSS). Default theme bridge các token nền tảng sang Angular Material M3 `--mat-sys-*` khi có thể.
 
 ### 3.1 Color tokens
 
-| Token              | CSS variable           | Default     | Dùng cho |
+| Token | CSS variable | Default bridge / fallback | Use for |
 |---|---|---|---|
-| `primary`          | `--sd-primary`         | `#2A66F4`   | Màu chủ đạo — button, checkbox, accent |
-| `primary-light`    | `--sd-primary-light`   | `#EAF1FF`   | Background nhẹ của primary |
-| `primary-dark`     | `--sd-primary-dark`    | `#1C4AD9`   | Hover/active state của primary |
-| `info`             | `--sd-info`            | `#2962FF`   | Link, thông tin, badge info |
-| `info-light`       | `--sd-info-light`      | `#E7E9FF`   | Background nhẹ của info |
-| `info-dark`        | `--sd-info-dark`       | `#2240CC`   | Hover state của info |
-| `success`          | `--sd-success`         | `#4CAF50`   | Trạng thái thành công, validation OK |
-| `success-light`    | `--sd-success-light`   | `#DBEFDC`   | Background nhẹ của success |
-| `success-dark`     | `--sd-success-dark`    | `#39833C`   | Hover state của success |
-| `warning`          | `--sd-warning`         | `#FF9600`   | Cảnh báo, trạng thái cần chú ý |
-| `warning-light`    | `--sd-warning-light`   | `#FFEACC`   | Background nhẹ của warning |
-| `warning-dark`     | `--sd-warning-dark`    | `#BF7000`   | Hover state của warning |
-| `error`            | `--sd-error`           | `#F82C13`   | Lỗi, validation fail, trạng thái nguy hiểm |
-| `error-light`      | `--sd-error-light`     | `#FED5D0`   | Background nhẹ của error |
-| `error-dark`       | `--sd-error-dark`      | `#BA200E`   | Hover state của error |
-| `secondary`        | `--sd-secondary`       | `#212121`   | Text phụ, icon secondary |
-| `secondary-light`  | `--sd-secondary-light` | `#E9E9E9`   | Background nhẹ |
-| `secondary-dark`   | `--sd-secondary-dark`  | `#000000`   | — |
-| `light`            | `--sd-light`           | `#F8F9FA`   | Background trang, surface nhẹ |
-| `dark`             | `--sd-dark`            | `#343A40`   | Text đậm, dark surface |
-| `black500`         | `--sd-black500`        | `#212121`   | Text chính |
-| `black400`         | `--sd-black400`        | `#757575`   | Text phụ, placeholder |
-| `black300`         | `--sd-black300`        | `#BFBFBF`   | Divider, border nhẹ |
-| `black200`         | `--sd-black200`        | `#E6E6E6`   | Border mặc định, separator |
-| `black100`         | `--sd-black100`        | `#F2F2F2`   | Background disabled, row hover |
-
+| `primary` | `--sd-primary` | `var(--mat-sys-primary, #005cbb)` | Main action color |
+| `primary-light` | `--sd-primary-light` | `color-mix(in srgb, var(--sd-primary) 14%, white)` | Soft primary background |
+| `primary-dark` | `--sd-primary-dark` | `color-mix(in srgb, var(--sd-primary) 84%, black)` | Primary hover/active shade |
+| `primary-contrast` | `--sd-primary-contrast` | `#ffffff` | Text/icon on primary |
+| `secondary` | `--sd-secondary` | `var(--mat-sys-secondary, #5c6270)` | Secondary action/accent |
+| `secondary-light` | `--sd-secondary-light` | `color-mix(in srgb, var(--sd-secondary) 12%, white)` | Soft secondary background |
+| `secondary-dark` | `--sd-secondary-dark` | `color-mix(in srgb, var(--sd-secondary) 84%, black)` | Secondary hover/active shade |
+| `secondary-contrast` | `--sd-secondary-contrast` | `#ffffff` | Text/icon on secondary |
+| `info`, `success`, `warning`, `error` | `--sd-info`, ... | Semantic base colors | Info, success, warning, and error states |
+| `*-light` | `--sd-info-light`, ... | `color-mix(in srgb, var(--sd-*) 14%, white)` | Soft semantic background |
+| `*-dark` | `--sd-info-dark`, ... | `color-mix(in srgb, var(--sd-*) 84%, black)` | Semantic hover/active shade |
+| `*-contrast` | `--sd-info-contrast`, ... | `#ffffff` | Text/icon on semantic color |
+| `surface` | `--sd-surface` | `var(--mat-sys-surface, #fdfbff)` | Page/component surface |
+| `surface-muted` | `--sd-surface-muted` | `var(--mat-sys-surface-container-highest, #e7e8ed)` | Muted neutral background |
+| `text` | `--sd-text` | `var(--mat-sys-on-surface, #1a1b1f)` | Primary text |
+| `text-secondary` | `--sd-text-secondary` | `var(--mat-sys-on-surface-variant, #44474f)` | Secondary text |
+| `text-muted` | `--sd-text-muted` | `color-mix(in srgb, var(--sd-text) 62%, transparent)` | Muted text |
+| `border` | `--sd-border` | `var(--mat-sys-outline-variant, #c4c6d0)` | Divider/subtle border |
+| `border-strong` | `--sd-border-strong` | `var(--mat-sys-outline, #74777f)` | Strong border/focus outline |
+| `disabled-bg` | `--sd-disabled-bg` | `color-mix(in srgb, var(--sd-text) 8%, transparent)` | Disabled background |
+| `disabled-text` | `--sd-disabled-text` | `color-mix(in srgb, var(--sd-text) 60%, transparent)` | Disabled text/icon |
 ### 3.2 Color utility classes
 
 Mọi token ở §3.1 đều sinh 3 class:
 
 | Pattern         | Ví dụ                     |
 |---|---|
-| `.text-{token}` | `text-primary`, `text-error`, `text-black400` |
+| `.text-{token}` | `text-primary`, `text-error`, `text-secondary` |
 | `.bg-{token}`   | `bg-primary-light`, `bg-error-light`, `bg-white` |
-| `.border-{token}` | `border-primary`, `border-black200` |
+| `.border-{token}` | `border-primary`, `border-error` |
 
 `white` / `black` luôn có sẵn ngoài bảng trên: `.text-white` / `.text-black` / `.bg-white` / `.bg-black`.
 
@@ -154,7 +149,7 @@ Mọi token ở §3.1 đều sinh 3 class:
 .my-element {
   color: map.get(color.$color_map, 'primary');
   background: map.get(color.$color_map, 'primary-light');
-  border-color: map.get(color.$color_map, 'black200');
+  border-color: map.get(color.$color_map, 'border');
 }
 ```
 
@@ -376,16 +371,16 @@ rounded-full       // border-radius: 9999px (pill / circle)
 
 ### 9.2 Border utilities
 
-Border color default = `var(--sd-black200)`.
+Border color default = `var(--sd-border)`.
 
 | Class            | CSS |
 |---|---|
-| `border`         | `border: 1px solid var(--sd-black200)` |
+| `border`         | `border: 1px solid var(--sd-border)` |
 | `border-0`       | `border: 0` |
-| `border-top`     | `border-top: 1px solid var(--sd-black200)` |
-| `border-bottom`  | `border-bottom: 1px solid var(--sd-black200)` |
-| `border-left`    | `border-left: 1px solid var(--sd-black200)` |
-| `border-right`   | `border-right: 1px solid var(--sd-black200)` |
+| `border-top`     | `border-top: 1px solid var(--sd-border)` |
+| `border-bottom`  | `border-bottom: 1px solid var(--sd-border)` |
+| `border-left`    | `border-left: 1px solid var(--sd-border)` |
+| `border-right`   | `border-right: 1px solid var(--sd-border)` |
 
 Đổi màu border: kết hợp `.border` với `.border-{token}` (xem §3.2).
 
@@ -490,53 +485,44 @@ CSS shadow tĩnh, tương đương Angular Material `mat.elevation()` mixin như
 
 ## 14. Custom theme
 
-Trong `styles.scss` của host app, gọi `sd.theme()` để override màu, sau đó cấu hình Angular Material M2 palette tương ứng:
+Host apps can override SDCoreJS semantic tokens with `sd.theme()`. When an app owns the global Angular Material theme, use the Material M3 token API with `mat.theme()`.
 
 ```scss
 @use '@sdcorejs/angular/assets/scss/themes/default' as sd;
 @use '@angular/material' as mat;
-@include mat.core();
 
 html {
+  color-scheme: light;
+
   @include sd.theme(
     (
-      primary:         #AE7129,
-      primary-light:   #F4F2F1,
-      primary-dark:    #6B4414,
+      primary: #AE7129,
+      primary-light: #F4F2F1,
+      primary-dark: #6B4414,
     )
   );
-}
-
-// --- Angular Material M2 palette ---
-
-$custom-primary-palette: mat.m2-define-palette((
-  50: #F4F2F1, 100: #E7E1DA, 200: #DAC8B4, 300: #D1AC80, 400: #CD9450,
-  500: #AE7129, 600: #8D5A1E, 700: #6B4414, 800: #4B2F0E, 900: #34210A,
-  contrast: ( 600: white, 700: white, 800: white, 900: white )
-));
-
-$custom-accent-palette: mat.m2-define-palette((
-  50: #F1F3F1, 100: #DCE5DD, 200: #BBD3BC, 300: #8FC291, 400: #67B76A,
-  500: #4CAF50, 600: #3A8C3D, 700: #29692C, 800: #1C471E, 900: #132F14,
-  contrast: ( 700: white, 800: white, 900: white )
-));
-
-$custom-warn-palette: mat.m2-define-palette((
-  50: #F5F0F0, 100: #EAD9D6, 200: #E4B0AA, 300: #E6786B, 400: #EE4430,
-  500: #F82C13, 600: #D11801, 700: #9A1100, 800: #680B00, 900: #440700,
-  contrast: ( 600: white, 700: white, 800: white, 900: white )
-));
 
-$custom-theme: mat.m2-define-light-theme((
-  color:   ( primary: $custom-primary-palette, accent: $custom-accent-palette, warn: $custom-warn-palette ),
-  density: -3,
-));
-
-@include mat.all-component-themes($custom-theme);
+  @include mat.theme(
+    (
+      color: (
+        theme-type: light,
+        primary: mat.$azure-palette,
+        tertiary: mat.$green-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+}
 ```
 
-> `sd.theme()` chỉ cần khai báo những token muốn override — token không khai báo giữ default.
-> Cả `sd.theme()` và `mat.all-component-themes()` **phải** gọi trong `styles.scss`, không phải component SCSS.
+Prefer Material M3 system variables for Material-facing styles:
+`--mat-sys-primary`, `--mat-sys-on-primary`, `--mat-sys-surface`,
+`--mat-sys-on-surface`, `--mat-sys-error`, `--mat-sys-outline`, and
+`--mat-sys-outline-variant`.
+
+> `sd.theme()` only needs the tokens you want to override; omitted tokens keep their defaults.
+> Keep Material theme configuration in a global stylesheet, not component SCSS.
 
 ---
 

package/assets/scss/core/_inline-edit.scss

@@ -16,7 +16,7 @@
     color: var(--sd-text-secondary, #6b7280);
     transition: color 0.15s ease;
 
-    mat-icon {
+    sd-icon {
       font-size: 16px;
       width: 16px;
       height: 16px;

package/assets/scss/core/color.scss

@@ -1,31 +1,39 @@
 @use 'sass:map';
 
-$system-colors: 
-'primary',
-'primary-light',
-'primary-dark',
-'info',
-'info-light',
-'info-dark',
-'success',
-'success-light',
-'success-dark',
-'warning',
-'warning-light',
-'warning-dark', 
-'error',
-'error-light',
-'error-dark',
-'secondary',
-'secondary-light',
-'secondary-dark', 
-'light',
-'dark',
-'black500',
-'black400',
-'black300',
-'black200',
-'black100';
+$public-colors:
+  'primary',
+  'primary-light',
+  'primary-dark',
+  'primary-contrast',
+  'secondary',
+  'secondary-light',
+  'secondary-dark',
+  'secondary-contrast',
+  'info',
+  'info-light',
+  'info-dark',
+  'info-contrast',
+  'success',
+  'success-light',
+  'success-dark',
+  'success-contrast',
+  'warning',
+  'warning-light',
+  'warning-dark',
+  'warning-contrast',
+  'error',
+  'error-light',
+  'error-dark',
+  'error-contrast',
+  'surface',
+  'surface-muted',
+  'text',
+  'text-secondary',
+  'text-muted',
+  'border',
+  'border-strong',
+  'disabled-bg',
+  'disabled-text';
 
 @function create_var_map($colors) {
   $var-map: ();
@@ -37,38 +45,41 @@ $system-colors:
   @return $var-map;
 }
 
-
-$color_map: create_var_map($system-colors);
+$color_map: create_var_map($public-colors);
 $basic_color_map: (
-  'white': #FFF,
+  'white': #fff,
   'black': #000,
 );
 
-$disabled-bg: map.get($color-map, 'black100');
-$disabled-text: map.get($color-map, 'black400');
+$disabled-bg: map.get($color-map, 'disabled-bg');
+$disabled-text: map.get($color-map, 'disabled-text');
 
 @each $color, $value in map.merge($color_map, $basic_color_map) {
-  // Text
   .text-#{$color} {
     color: $value !important;
   }
-  // Background
+
   .bg-#{$color} {
     background: $value !important;
   }
-  // Border
+
   .border-#{$color} {
     border-color: $value !important;
   }
 }
-// $colorLights: $primary-light, $secondary-light, $info-light, $success-light, $warning-light, $error-light;
-// @each $color in $colorLights {
-//   // Text
-//   .text-#{$color} {
-//     color: $color;
-//   }
-//   // Background
-//   .bg-#{$color} {
-//     background: $color;
-//   }
-// }
+
+.text-secondary {
+  color: map.get($color_map, 'text-secondary') !important;
+}
+
+.text-muted {
+  color: map.get($color_map, 'text-muted') !important;
+}
+
+.text-body {
+  color: map.get($color_map, 'text') !important;
+}
+
+.bg-muted {
+  background: map.get($color_map, 'surface-muted') !important;
+}

package/assets/scss/core/form.scss

@@ -6,6 +6,18 @@
   font-size: 16px;
   width: 100%;
 
+  .sd-form-field-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    vertical-align: middle;
+
+    sd-icon {
+      flex: 0 0 auto;
+    }
+  }
+
   // Xử lý tô màu required
   .mat-mdc-form-field-required-marker {
     color: map.get(color.$color_map, 'error');
@@ -14,22 +26,22 @@
   // Xử lý màu border nhạt bớt
   .mat-mdc-notch-piece {
     &.mdc-notched-outline__leading {
-      border-color: map.get(color.$color_map, 'black200') !important;
+      border-color: map.get(color.$color_map, 'border') !important;
     }
     &.mdc-notched-outline__notch {
-      border-top-color: map.get(color.$color_map, 'black200') !important;
-      border-bottom-color: map.get(color.$color_map, 'black200') !important;
+      border-top-color: map.get(color.$color_map, 'border') !important;
+      border-bottom-color: map.get(color.$color_map, 'border') !important;
     }
     &.mdc-notched-outline__trailing {
-      border-color: map.get(color.$color_map, 'black200') !important;
+      border-color: map.get(color.$color_map, 'border') !important;
     }
   }
 
   // Xử lý icon
   .sd-suffix-icon {
-    color: #757575;
+    color: map.get(color.$color_map, 'text-secondary');
     &:hover {
-      color: #616161;
+      color: map.get(color.$color_map, 'text');
     }
   }
 
@@ -47,15 +59,15 @@
     padding: 0;
     background: transparent;
     cursor: pointer;
-    color: #757575;
+    color: map.get(color.$color_map, 'text-secondary');
     transition: background-color 80ms ease, color 80ms ease;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.06);
+      background: color-mix(in srgb, map.get(color.$color_map, 'text') 8%, transparent);
       color: map.get(color.$color_map, 'error');
     }
 
-    mat-icon {
+    sd-icon {
       font-size: 16px;
       width: 16px;
       height: 16px;

package/assets/scss/core/utilities/_base.scss

@@ -37,8 +37,8 @@ body {
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
-  background-color: #fff;
+  color: var(--sd-text, var(--mat-sys-on-surface, #1a1b1f));
+  background-color: var(--sd-surface, var(--mat-sys-surface, #fdfbff));
   text-align: left;
 }
 
@@ -128,7 +128,7 @@ sup { top: -0.5em; }
 // 7. Links
 // --------------------------------------------------------------------------
 a {
-  color: #007bff;
+  color: var(--sd-primary, var(--mat-sys-primary, #005cbb));
   text-decoration: none;
   background-color: transparent; // Xóa nền xám trên link active trong IE 10
 }

package/assets/scss/core/utilities/_border.scss

@@ -12,7 +12,7 @@
 // Border utilities
 //   border | border-0 | border-top | border-bottom | border-left | border-right
 // --------------------------------------------------------------------------
-$_border-color: var(--sd-black200);
+$_border-color: var(--sd-border);
 
 .border        { border: 1px solid $_border-color !important; }
 .border-0      { border: 0 !important; }

package/assets/scss/themes/default.scss

@@ -2,44 +2,58 @@
 @use "../core/color";
 
 $default-theme: (
-  primary: #2A66F4,
-  primary-light: #EAF1FF,
-  primary-dark: #1C4AD9,
-  info: #2962FF,
-  info-light: #E7E9FF,
-  info-dark: #2240CC,
-  success: #4CAF50,
-  success-light: #DBEFDC,
-  success-dark: #39833C,
-  warning: #FF9600,
-  warning-light: #FFEACC,
-  warning-dark: #BF7000,
-  error: #F82C13,
-  error-light: #FED5D0,
-  error-dark: #BA200E,
-  secondary: #212121,
-  secondary-light: #E9E9E9,
-  secondary-dark: #000000,
-  light: #f8f9fa,
-  dark: #343a40,
-  black500: #212121,
-  black400: #757575,
-  black300: #BFBFBF,
-  black200: #E6E6E6,
-  black100: #F2F2F2,
+  primary: var(--mat-sys-primary, #005cbb),
+  primary-light: color-mix(in srgb, var(--sd-primary) 14%, white),
+  primary-dark: color-mix(in srgb, var(--sd-primary) 84%, black),
+  primary-contrast: #ffffff,
+
+  secondary: var(--mat-sys-secondary, #5c6270),
+  secondary-light: color-mix(in srgb, var(--sd-secondary) 12%, white),
+  secondary-dark: color-mix(in srgb, var(--sd-secondary) 84%, black),
+  secondary-contrast: #ffffff,
+
+  info: #006a6a,
+  info-light: color-mix(in srgb, var(--sd-info) 14%, white),
+  info-dark: color-mix(in srgb, var(--sd-info) 84%, black),
+  info-contrast: #ffffff,
+
+  success: #2e7d32,
+  success-light: color-mix(in srgb, var(--sd-success) 14%, white),
+  success-dark: color-mix(in srgb, var(--sd-success) 84%, black),
+  success-contrast: #ffffff,
+
+  warning: #a66300,
+  warning-light: color-mix(in srgb, var(--sd-warning) 14%, white),
+  warning-dark: color-mix(in srgb, var(--sd-warning) 84%, black),
+  warning-contrast: #ffffff,
+
+  error: var(--mat-sys-error, #ba1a1a),
+  error-light: color-mix(in srgb, var(--sd-error) 14%, white),
+  error-dark: color-mix(in srgb, var(--sd-error) 84%, black),
+  error-contrast: #ffffff,
+
+  surface: var(--mat-sys-surface, #fdfbff),
+  surface-muted: var(--mat-sys-surface-container-highest, #e7e8ed),
+  text: var(--mat-sys-on-surface, #1a1b1f),
+  text-secondary: var(--mat-sys-on-surface-variant, #44474f),
+  text-muted: color-mix(in srgb, var(--sd-text) 62%, transparent),
+  border: var(--mat-sys-outline-variant, #c4c6d0),
+  border-strong: var(--mat-sys-outline, #74777f),
+  disabled-bg: color-mix(in srgb, var(--sd-text) 8%, transparent),
+  disabled-text: color-mix(in srgb, var(--sd-text) 60%, transparent),
 );
 
-// Can thiệp màu của Suffix/Prefix khi có lỗi
-// Chỉ áp dụng cho các component có hỗ trợ trailing icon
+// Keep Material form-field trailing icons aligned with the Core error palette.
 :root {
-  --mat-form-field-error-trailing-icon-color: #{map.get($default-theme, 'error')};
-  --mat-form-field-error-hover-trailing-icon-color: #{map.get($default-theme, 'error-dark')};
-  --mat-form-field-error-focus-trailing-icon-color: #{map.get($default-theme, 'error-dark')};
+  --mat-form-field-error-trailing-icon-color: var(--sd-error, #{map.get($default-theme, 'error')});
+  --mat-form-field-error-hover-trailing-icon-color: var(--sd-error-dark, #{map.get($default-theme, 'error-dark')});
+  --mat-form-field-error-focus-trailing-icon-color: var(--sd-error-dark, #{map.get($default-theme, 'error-dark')});
 }
 
-@mixin theme($theme) {
+@mixin theme($theme: ()) {
   $theme: map.merge($default-theme, $theme);
-  @each $color in color.$system-colors {
+
+  @each $color in color.$public-colors {
     --sd-#{$color}: #{map.get($theme, $color)};
   }
 }