dasar-ui 1.1.0 → 1.3.0

package/projects/dasar-ui/src/lib/services/theme.service.ts

@@ -1,643 +0,0 @@
-import {
-  DasarThemeButton,
-  DasarThemeCalendar,
-  DasarThemeCard,
-  DasarThemeChip,
-  DasarThemeColors,
-  DasarThemeConfig,
-  DasarThemeDatepicker,
-  DasarThemeInput,
-  DasarThemeSelect,
-  DasarThemeCommon,
-  DasarThemeMenu,
-} from '@models/theme.model';
-import { DASAR_THEME_PROVIDER } from '../components/dasar-theme-provider/dasar-theme-provider';
-import {
-  DOCUMENT,
-  inject,
-  Injectable,
-  PLATFORM_ID,
-  Renderer2,
-  RendererFactory2,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-export const commonMap: Record<keyof DasarThemeCommon, string> = {
-  primaryColor: '--theme-primary-color',
-  primaryHoverColor: '--theme-primary-hover-color',
-  primaryActiveColor: '--theme-primary-active-color',
-  primarySurfaceColor: '--theme-primary-surface-color',
-  textPrimaryColor: '--theme-text-primary-color',
-  textSecondaryColor: '--theme-text-secondary-color',
-  textDisabledColor: '--theme-text-disabled-color',
-  textInverseColor: '--theme-text-inverse-color',
-  bgDefaultColor: '--theme-bg-default-color',
-  bgSurfaceColor: '--theme-bg-surface-color',
-  bgWindowColor: '--theme-bg-window-color',
-  bgHoverColor: '--theme-bg-hover-color',
-  borderSubtleColor: '--theme-border-subtle-color',
-  borderStrongColor: '--theme-border-strong-color',
-  fontSans: '--font-sans',
-  fontHero: '--font-hero',
-  fontWeightRegular: '--font-weight-regular',
-  fontWeightMedium: '--font-weight-medium',
-  fontWeightSemibold: '--font-weight-semibold',
-  fontWeightBold: '--font-weight-bold',
-  fontSizeXss: '--font-size-xss',
-  fontSizeXs: '--font-size-xs',
-  fontSizeSm: '--font-size-sm',
-  fontSizeBase: '--font-size-base',
-  fontSizeLg: '--font-size-lg',
-  fontSizeXl: '--font-size-xl',
-  lineHeightNormal: '--line-height-normal',
-  lineHeightTight: '--line-height-tight',
-};
-export const buttonMap: Record<keyof DasarThemeButton, string> = {
-  fontWeight: '--btn-font-weight',
-  gap: '--btn-gap',
-  heightXs: '--btn-height-xs',
-  paddingHorizontalXs: '--btn-padding-horizontal-xs',
-  iconSizeXs: '--btn-icon-size-xs',
-  heightSm: '--btn-height-sm',
-  paddingHorizontalSm: '--btn-padding-horizontal-sm',
-  iconSizeSm: '--btn-icon-size-sm',
-  heightMd: '--btn-height-md',
-  paddingHorizontalMd: '--btn-padding-horizontal-md',
-  iconSizeMd: '--btn-icon-size-md',
-  heightLg: '--btn-height-lg',
-  paddingHorizontalLg: '--btn-padding-horizontal-lg',
-  iconSizeLg: '--btn-icon-size-lg',
-  heightXl: '--btn-height-xl',
-  paddingHorizontalXl: '--btn-padding-horizontal-xl',
-  iconSizeXl: '--btn-icon-size-xl',
-  radiusNone: '--btn-radius-none',
-  radiusXs: '--btn-radius-xs',
-  radiusSm: '--btn-radius-sm',
-  radiusMd: '--btn-radius-md',
-  radiusLg: '--btn-radius-lg',
-  radiusXl: '--btn-radius-xl',
-  radiusFull: '--btn-radius-full',
-  disabledBg: '--btn-disabled-bg',
-  disabledBorder: '--btn-disabled-border',
-  disabledColor: '--btn-disabled-color',
-  primaryBg: '--btn-primary-bg',
-  primaryBorder: '--btn-primary-border',
-  primaryColor: '--btn-primary-color',
-  primaryHoverBg: '--btn-primary-hover-bg',
-  primaryHoverBorder: '--btn-primary-hover-border',
-  primaryFocusRing: '--btn-primary-focus-ring',
-  primarySubtleBg: '--btn-primary-subtle-bg',
-  primarySubtleColor: '--btn-primary-subtle-color',
-  primarySubtleHoverBg: '--btn-primary-subtle-hover-bg',
-  primarySubtleHoverColor: '--btn-primary-subtle-hover-color',
-  primaryOutlineBorder: '--btn-primary-outline-border',
-  primaryOutlineColor: '--btn-primary-outline-color',
-  primaryOutlineHoverBg: '--btn-primary-outline-hover-bg',
-  successBg: '--btn-success-bg',
-  successBorder: '--btn-success-border',
-  successColor: '--btn-success-color',
-  successFocusRing: '--btn-success-focus-ring',
-  successSubtleBg: '--btn-success-subtle-bg',
-  successSubtleColor: '--btn-success-subtle-color',
-  successSubtleHoverBg: '--btn-success-subtle-hover-bg',
-  successSubtleHoverColor: '--btn-success-subtle-hover-color',
-  successOutlineBorder: '--btn-success-outline-border',
-  successOutlineColor: '--btn-success-outline-color',
-  successOutlineHoverBg: '--btn-success-outline-hover-bg',
-  warningBg: '--btn-warning-bg',
-  warningBorder: '--btn-warning-border',
-  warningColor: '--btn-warning-color',
-  warningFocusRing: '--btn-warning-focus-ring',
-  warningSubtleBg: '--btn-warning-subtle-bg',
-  warningSubtleColor: '--btn-warning-subtle-color',
-  warningSubtleHoverBg: '--btn-warning-subtle-hover-bg',
-  warningSubtleHoverColor: '--btn-warning-subtle-hover-color',
-  warningOutlineBorder: '--btn-warning-outline-border',
-  warningOutlineColor: '--btn-warning-outline-color',
-  warningOutlineHoverBg: '--btn-warning-outline-hover-bg',
-  dangerBg: '--btn-danger-bg',
-  dangerBorder: '--btn-danger-border',
-  dangerColor: '--btn-danger-color',
-  dangerFocusRing: '--btn-danger-focus-ring',
-  dangerSubtleBg: '--btn-danger-subtle-bg',
-  dangerSubtleColor: '--btn-danger-subtle-color',
-  dangerSubtleHoverBg: '--btn-danger-subtle-hover-bg',
-  dangerSubtleHoverColor: '--btn-danger-subtle-hover-color',
-  dangerOutlineBorder: '--btn-danger-outline-border',
-  dangerOutlineColor: '--btn-danger-outline-color',
-  dangerOutlineHoverBg: '--btn-danger-outline-hover-bg',
-  secondaryBg: '--btn-secondary-bg',
-  secondaryBorder: '--btn-secondary-border',
-  secondaryColor: '--btn-secondary-color',
-  secondaryHoverBg: '--btn-secondary-hover-bg',
-  secondaryFocusRing: '--btn-secondary-focus-ring',
-  secondarySubtleBg: '--btn-secondary-subtle-bg',
-  secondarySubtleColor: '--btn-secondary-subtle-color',
-  secondarySubtleHoverBg: '--btn-secondary-subtle-hover-bg',
-  secondarySubtleHoverColor: '--btn-secondary-subtle-hover-color',
-  secondaryOutlineBorder: '--btn-secondary-outline-border',
-  secondaryOutlineColor: '--btn-secondary-outline-color',
-  secondaryOutlineHoverBg: '--btn-secondary-outline-hover-bg',
-  ghostColor: '--btn-ghost-color',
-  ghostHoverBg: '--btn-ghost-hover-bg',
-  ghostHoverColor: '--btn-ghost-hover-color',
-  ghostFocusRing: '--btn-ghost-focus-ring',
-};
-export const inputMap: Record<keyof DasarThemeInput, string> = {
-  wrapperGap: '--input-wrapper-gap',
-  gap: '--input-gap',
-  color: '--input-color',
-  labelFontsize: '--input-label-font-size',
-  labelFontWeight: '--input-label-font-weight',
-  labelColor: '--input-label-color',
-  labelRightFontsize: '--input-label-right-font-size',
-  labelRightColor: '--input-label-right-color',
-  heightXs: '--input-height-xs',
-  paddingHorizontalXs: '--input-padding-horizontal-xs',
-  heightSm: '--input-height-sm',
-  paddingHorizontalSm: '--input-padding-horizontal-sm',
-  heightMd: '--input-height-md',
-  paddingHorizontalMd: '--input-padding-horizontal-md',
-  heightLg: '--input-height-lg',
-  paddingHorizontalLg: '--input-padding-horizontal-lg',
-  heightXl: '--input-height-xl',
-  paddingHorizontalXl: '--input-padding-horizontal-xl',
-  radiusNone: '--input-radius-none',
-  radiusXs: '--input-radius-xs',
-  radiusSm: '--input-radius-sm',
-  radiusMd: '--input-radius-md',
-  radiusLg: '--input-radius-lg',
-  radiusXl: '--input-radius-xl',
-  radiusFull: '--input-radius-full',
-  outlineBg: '--input-outline-bg',
-  outlineBorder: '--input-outline-border',
-  outlineHoverBorder: '--input-outline-hover-border',
-  outlineFocusBorder: '--input-outline-focus-border',
-  outlineFocusRing: '--input-outline-focus-ring',
-  filledBg: '--input-filled-bg',
-  filledBorder: '--input-filled-border',
-  filledHoverBg: '--input-filled-hover-bg',
-  filledFocusBg: '--input-filled-focus-bg',
-  filledFocusBorder: '--input-filled-focus-border',
-  filledFocusRing: '--input-filled-focus-ring',
-  errorBorder: '--input-error-border',
-  errorFocusRing: '--input-error-focus-ring',
-  disabledBg: '--input-disabled-bg',
-  disabledBorder: '--input-disabled-border',
-  disabledOpacity: '--input-disabled-opacity',
-  placeholderColor: '--input-placeholder-color',
-  autofillBg: '--input-autofill-bg',
-  autofillColor: '--input-autofill-color',
-  hintFontSize: '--input-hint-font-size',
-  hintColor: '--input-hint-color',
-  hintErrorColor: '--input-hint-error-color',
-};
-export const calendarMap: Record<keyof DasarThemeCalendar, string> = {
-  calendarBg: '--calendar-bg',
-  outlineBorder: '--calendar-outline-border',
-  outlineBg: '--calendar-outline-bg',
-  padding: '--calendar-padding',
-  paddingMd: '--calendar-padding-md',
-  radiusNone: '--calendar-radius-none',
-  radiusXs: '--calendar-radius-xs',
-  radiusSm: '--calendar-radius-sm',
-  radiusMd: '--calendar-radius-md',
-  radiusLg: '--calendar-radius-lg',
-  radiusXl: '--calendar-radius-xl',
-  radiusFull: '--calendar-radius-full',
-  headerMarginBottom: '--calendar-header-margin-bottom',
-  headerGap: '--calendar-header-gap',
-  titleGap: '--calendar-title-gap',
-  chevronColor: '--calendar-chevron-color',
-  titleFontWeight: '--calendar-title-font-weight',
-  titleColor: '--calendar-title-color',
-  titleFontSize: '--calendar-title-font-size',
-  actionsGap: '--calendar-actions-gap',
-  gridBorder: '--calendar-grid-border',
-  gridRadiusNone: '--calendar-grid-radius-none',
-  gridRadiusXs: '--calendar-grid-radius-xs',
-  gridRadiusSm: '--calendar-grid-radius-sm',
-  gridRadiusMd: '--calendar-grid-radius-md',
-  gridRadiusLg: '--calendar-grid-radius-lg',
-  gridRadiusXl: '--calendar-grid-radius-xl',
-  gridRadiusFull: '--calendar-grid-radius-full',
-  weekdayFontWeight: '--calendar-weekday-font-weight',
-  weekdayColor: '--calendar-weekday-color',
-  weekdayPaddingBottom: '--calendar-weekday-padding-bottom',
-  weekdayFontSize: '--calendar-weekday-font-size',
-  cellBg: '--calendar-cell-bg',
-  otherMonthBg: '--calendar-other-month-bg',
-  dashboardCellPadding: '--calendar-dashboard-cell-padding',
-  dashboardCellMinHeight: '--calendar-dashboard-cell-min-height',
-  dashboardCellPaddingSm: '--calendar-dashboard-cell-padding-sm',
-  dashboardCellMinHeightSm: '--calendar-dashboard-cell-min-height-sm',
-  dashboardCellPaddingMd: '--calendar-dashboard-cell-padding-md',
-  dashboardCellMinHeightMd: '--calendar-dashboard-cell-min-height-md',
-  dashboardCellHoverBg: '--calendar-dashboard-cell-hover-bg',
-  dashboardBoxSize: '--calendar-dashboard-box-size',
-  todayColor: '--calendar-today-color',
-  todayBg: '--calendar-today-bg',
-  selectedIndicator: '--calendar-selected-indicator',
-  dashboardSelectedBg: '--calendar-dashboard-selected-bg',
-  dropdownCellHeight: '--calendar-dropdown-cell-height',
-  dropdownCellHoverBg: '--calendar-dropdown-cell-hover-bg',
-  dropdownNumberFontWeight: '--calendar-dropdown-number-font-weight',
-  dropdownNumberColor: '--calendar-dropdown-number-color',
-  dropdownNumberFontSize: '--calendar-dropdown-number-font-size',
-  dropdownBoxSize: '--calendar-dropdown-box-size',
-  dropdownOtherMonthColor: '--calendar-dropdown-other-month-color',
-  dropdownSelectedBg: '--calendar-dropdown-selected-bg',
-  dropdownSelectedColor: '--calendar-dropdown-selected-color',
-  dropdownSelectedFontWeight: '--calendar-dropdown-selected-font-weight',
-  dropdownTodayBorder: '--calendar-dropdown-today-border',
-  dropdownTodayColor: '--calendar-dropdown-today-color',
-  pickerBorder: '--calendar-picker-border',
-  pickerBg: '--calendar-picker-bg',
-  pickerRadius: '--calendar-picker-radius',
-  pickerMaxHeight: '--calendar-picker-max-height',
-  pickerCellBorder: '--calendar-picker-cell-border',
-  pickerCellFontWeight: '--calendar-picker-cell-font-weight',
-  pickerCellColor: '--calendar-picker-cell-color',
-  pickerCellBg: '--calendar-picker-cell-bg',
-  pickerCellRadius: '--calendar-picker-cell-radius',
-  pickerCellHeight: '--calendar-picker-cell-height',
-  pickerCellHoverBg: '--calendar-picker-cell-hover-bg',
-  pickerCellHoverBorder: '--calendar-picker-cell-hover-border',
-  pickerSelectedBg: '--calendar-picker-selected-bg',
-  pickerSelectedColor: '--calendar-picker-selected-color',
-  pickerSelectedBorder: '--calendar-picker-selected-border',
-  pickerSelectedFontWeight: '--calendar-picker-selected-font-weight',
-};
-export const datepickerMap: Record<keyof DasarThemeDatepicker, string> = {
-  disabledOpacity: '--datepicker-disabled-opacity',
-  disabledBg: '--datepicker-disabled-bg',
-  wrapperGap: '--datepicker-wrapper-gap',
-  errorBorder: '--datepicker-error-border',
-  errorFocusRing: '--datepicker-error-focus-ring',
-  labelFontsize: '--datepicker-label-font-size',
-  labelFontWeight: '--datepicker-label-font-weight',
-  labelColor: '--datepicker-label-color',
-  labelMarginBottom: '--datepicker-label-margin-bottom',
-  labelRightFontsize: '--datepicker-label-right-font-size',
-  labelRightFontWeight: '--datepicker-label-right-font-weight',
-  labelRightColor: '--datepicker-label-right-color',
-  hintFontSize: '--datepicker-hint-font-size',
-  hintColor: '--datepicker-hint-color',
-  hintErrorColor: '--datepicker-hint-error-color',
-  triggerColor: '--datepicker-trigger-color',
-  gap: '--datepicker-gap',
-  radiusSm: '--datepicker-radius-sm',
-  triggerValueColor: '--datepicker-trigger-value-color',
-  iconColor: '--datepicker-icon-color',
-  clearIconColor: '--datepicker-clear-icon-color',
-  heightXs: '--datepicker-height-xs',
-  paddingHorizontalXs: '--datepicker-padding-horizontal-xs',
-  heightSm: '--datepicker-height-sm',
-  paddingHorizontalSm: '--datepicker-padding-horizontal-sm',
-  heightMd: '--datepicker-height-md',
-  paddingHorizontalMd: '--datepicker-padding-horizontal-md',
-  heightLg: '--datepicker-height-lg',
-  paddingHorizontalLg: '--datepicker-padding-horizontal-lg',
-  heightXl: '--datepicker-height-xl',
-  paddingHorizontalXl: '--datepicker-padding-horizontal-xl',
-  radiusNone: '--datepicker-radius-none',
-  radiusXs: '--datepicker-radius-xs',
-  radiusMd: '--datepicker-radius-md',
-  radiusLg: '--datepicker-radius-lg',
-  radiusXl: '--datepicker-radius-xl',
-  radiusFull: '--datepicker-radius-full',
-  outlineBg: '--datepicker-outline-bg',
-  outlineBorder: '--datepicker-outline-border',
-  outlineHoverBorder: '--datepicker-outline-hover-border',
-  outlineFocusBorder: '--datepicker-outline-focus-border',
-  outlineFocusRing: '--datepicker-outline-focus-ring',
-  filledBg: '--datepicker-filled-bg',
-  filledBorder: '--datepicker-filled-border',
-  filledHoverBg: '--datepicker-filled-hover-bg',
-  filledFocusBg: '--datepicker-filled-focus-bg',
-  filledFocusBorder: '--datepicker-filled-focus-border',
-  filledFocusRing: '--datepicker-filled-focus-ring',
-  subtleBg: '--datepicker-subtle-bg',
-  subtleBorder: '--datepicker-subtle-border',
-  subtleHoverBg: '--datepicker-subtle-hover-bg',
-  subtleFocusBg: '--datepicker-subtle-focus-bg',
-  dropdownShadow: '--datepicker-dropdown-shadow',
-  dropdownBg: '--datepicker-dropdown-bg',
-  dropdownBorder: '--datepicker-dropdown-border',
-  dropdownRadius: '--datepicker-dropdown-radius',
-  dropdownZIndex: '--datepicker-dropdown-z-index',
-  dropdownWidth: '--datepicker-dropdown-width',
-};
-export const chipMap: Record<keyof DasarThemeChip, string> = {
-  closeMarginRight: '--chip-close-margin-right',
-  closeMarginLeft: '--chip-close-margin-left',
-  closeHoverBg: '--chip-close-hover-bg',
-  closePadding: '--chip-close-padding',
-  innerGap: '--chip-inner-gap',
-};
-export const selectMap: Record<keyof DasarThemeSelect, string> = {
-  wrapperGap: '--select-wrapper-gap',
-  labelFontsize: '--select-label-font-size',
-  labelFontWeight: '--select-label-font-weight',
-  labelColor: '--select-label-color',
-  labelRightFontsize: '--select-label-right-font-size',
-  labelRightColor: '--select-label-right-color',
-  paddingLeft: '--select-padding-left',
-  radiusSm: '--select-radius-sm',
-  gap: '--select-gap',
-  color: '--select-color',
-  outlineBg: '--select-outline-bg',
-  outlineBorder: '--select-outline-border',
-  outlineHoverBorder: '--select-outline-hover-border',
-  outlineFocusBorder: '--select-outline-focus-border',
-  outlineFocusRing: '--select-outline-focus-ring',
-  filledBg: '--select-filled-bg',
-  filledBorder: '--select-filled-border',
-  filledHoverBg: '--select-filled-hover-bg',
-  filledFocusBg: '--select-filled-focus-bg',
-  filledFocusBorder: '--select-filled-focus-border',
-  filledFocusRing: '--select-filled-focus-ring',
-  errorBorder: '--select-error-border',
-  errorFocusRing: '--select-error-focus-ring',
-  disabledBg: '--select-disabled-bg',
-  disabledBorder: '--select-disabled-border',
-  disabledOpacity: '--select-disabled-opacity',
-  heightXs: '--select-height-xs',
-  paddingHorizontalXs: '--select-padding-horizontal-xs',
-  heightSm: '--select-height-sm',
-  paddingHorizontalSm: '--select-padding-horizontal-sm',
-  heightMd: '--select-height-md',
-  paddingHorizontalMd: '--select-padding-horizontal-md',
-  heightLg: '--select-height-lg',
-  paddingHorizontalLg: '--select-padding-horizontal-lg',
-  heightXl: '--select-height-xl',
-  paddingHorizontalXl: '--select-padding-horizontal-xl',
-  radiusNone: '--select-radius-none',
-  radiusXs: '--select-radius-xs',
-  radiusMd: '--select-radius-md',
-  radiusLg: '--select-radius-lg',
-  radiusXl: '--select-radius-xl',
-  radiusFull: '--select-radius-full',
-  valueColor: '--select-value-color',
-  placeholderColor: '--select-placeholder-color',
-  searchColor: '--select-search-color',
-  searchPlaceholderColor: '--select-search-placeholder-color',
-  loaderColor: '--select-loader-color',
-  arrowColor: '--select-arrow-color',
-  dropdownMaxHeight: '--select-dropdown-max-height',
-  dropdownBg: '--select-dropdown-bg',
-  dropdownBorder: '--select-dropdown-border',
-  dropdownRadius: '--select-dropdown-radius',
-  dropdownShadow: '--select-dropdown-shadow',
-  dropdownZIndex: '--select-dropdown-z-index',
-  optionPaddingY: '--select-option-padding-y',
-  optionPaddingX: '--select-option-padding-x',
-  optionFontSize: '--select-option-font-size',
-  optionColor: '--select-option-color',
-  optionHoverBg: '--select-option-hover-bg',
-  optionSelectedBg: '--select-option-selected-bg',
-  optionSelectedColor: '--select-option-selected-color',
-  optionSelectedFontWeight: '--select-option-selected-font-weight',
-  optionDisabledColor: '--select-option-disabled-color',
-  stateColor: '--select-state-color',
-  hintFontSize: '--select-hint-font-size',
-  hintColor: '--select-hint-color',
-  hintErrorColor: '--select-hint-error-color',
-};
-export const cardMap: Record<keyof DasarThemeCard, string> = {
-  background: '--card-background',
-  outlineBorder: '--card-outline-border',
-  elevatedBorder: '--card-elevated-border',
-  elevatedShadow: '--card-elevated-shadow',
-  radiusNone: '--card-radius-none',
-  radiusXs: '--card-radius-xs',
-  radiusSm: '--card-radius-sm',
-  radiusMd: '--card-radius-md',
-  radiusLg: '--card-radius-lg',
-  radiusXl: '--card-radius-xl',
-  radiusFull: '--card-radius-full',
-  normalHeaderPaddingVertical: '--card-normal-header-padding-vertical',
-  normalHeaderPaddingHorizontal: '--card-normal-header-padding-horizontal',
-  normalBodyPaddingVertical: '--card-normal-body-padding-vertical',
-  normalBodyPaddingHorizontal: '--card-normal-body-padding-horizontal',
-  normalActionsPadding: '--card-normal-actions-padding',
-  compactHeaderPadding: '--card-compact-header-padding',
-  compactBodyPadding: '--card-compact-body-padding',
-  compactActionsPadding: '--card-compact-actions-padding',
-  fontSizeSm: '--card-font-size-sm',
-  fontSizeMd: '--card-font-size-md',
-  fontSizeLg: '--card-font-size-lg',
-  headerBorder: '--card-header-border',
-  titleColor: '--card-title-color',
-  titleFontWeight: '--card-title-font-weight',
-  bodyColor: '--card-body-color',
-  captionColor: '--card-caption-color',
-  captionFontSize: '--card-caption-font-size',
-  actionsBackground: '--card-actions-background',
-  actionsGap: '--card-actions-gap',
-};
-export const menuMap: Record<keyof DasarThemeMenu, string> = {
-  triggerPaddingHorizontal: '--menu-trigger-padding-horizontal',
-  triggerGap: '--menu-trigger-gap',
-  outlineBorder: '--menu-outline-border',
-  outlineBackground: '--menu-outline-background',
-  outlineHoverBorder: '--menu-outline-hover-border',
-  outlineFocusBorder: '--menu-outline-focus-border',
-  outlineFocusRing: '--menu-outline-focus-ring',
-  filledBorder: '--menu-filled-border',
-  filledBackground: '--menu-filled-background',
-  filledHoverBackground: '--menu-filled-hover-background',
-  filledFocusBackground: '--menu-filled-focus-background',
-  filledFocusBorder: '--menu-filled-focus-border',
-  filledFocusRing: '--menu-filled-focus-ring',
-  disabledOpacity: '--menu-disabled-opacity',
-  heightSm: '--menu-height-sm',
-  fontSizeSm: '--menu-font-size-sm',
-  heightMd: '--menu-height-md',
-  fontSizeMd: '--menu-font-size-md',
-  heightLg: '--menu-height-lg',
-  fontSizeLg: '--menu-font-size-lg',
-  radiusNone: '--menu-radius-none',
-  radiusXs: '--menu-radius-xs',
-  radiusSm: '--menu-radius-sm',
-  radiusMd: '--menu-radius-md',
-  radiusLg: '--menu-radius-lg',
-  radiusXl: '--menu-radius-xl',
-  radiusFull: '--menu-radius-full',
-  panelMinWidth: '--menu-panel-min-width',
-  panelBackground: '--menu-panel-background',
-  panelBorder: '--menu-panel-border',
-  panelRadius: '--menu-panel-radius',
-  panelShadow: '--menu-panel-shadow',
-  panelPadding: '--menu-panel-padding',
-  panelZIndex: '--menu-panel-z-index',
-  panelOffset: '--menu-panel-offset',
-  itemGap: '--menu-item-gap',
-  itemPaddingVertical: '--menu-item-padding-vertical',
-  itemPaddingHorizontal: '--menu-item-padding-horizontal',
-  itemFontSize: '--menu-item-font-size',
-  itemColor: '--menu-item-color',
-  itemRadius: '--menu-item-radius',
-  itemHoverBackground: '--menu-item-hover-background',
-  itemHoverColor: '--menu-item-hover-color',
-  itemDisabledColor: '--menu-item-disabled-color',
-  dividerHeight: '--menu-divider-height',
-  dividerBackground: '--menu-divider-background',
-  dividerMarginVertical: '--menu-divider-margin-vertical',
-};
-export const tableMap: Record<string, string> = {
-  radius: '--table-radius',
-  background: '--table-background',
-  outlineBorder: '--table-outline-border',
-  filledBackground: '--table-filled-background',
-  filledBorder: '--table-filled-border',
-  filledRowBorder: '--table-filled-row-border',
-  filledRowBackground: '--table-filled-row-background',
-  elevatedBorder: '--table-elevated-border',
-  elevatedShadow: '--table-elevated-shadow',
-  radiusNone: '--table-radius-none',
-  borderlessBackground: '--table-borderless-background',
-  fontSizeSm: '--table-font-size-sm',
-  fontSizeMd: '--table-font-size-md',
-  fontSizeLg: '--table-font-size-lg',
-  compactPaddingVertical: '--table-compact-padding-vertical',
-  compactPaddingHorizontal: '--table-compact-padding-horizontal',
-  normalPaddingVertical: '--table-normal-padding-vertical',
-  normalPaddingHorizontal: '--table-normal-padding-horizontal',
-  relaxedPaddingVertical: '--table-relaxed-padding-vertical',
-  relaxedPaddingHorizontal: '--table-relaxed-padding-horizontal',
-  color: '--table-color',
-  headerBackground: '--table-header-background',
-  headerFontWeight: '--table-header-font-weight',
-  headerColor: '--table-header-color',
-  headerHoverBackground: '--table-header-hover-background',
-  headerContentGap: '--table-header-content-gap',
-  sortIndicatorSize: '--table-sort-indicator-size',
-  sortActiveColor: '--table-sort-active-color',
-  rowBorder: '--table-row-border',
-  rowHoverBackground: '--table-row-hover-background',
-  rowHoverIndicatorWidth: '--table-row-hover-indicator-width',
-  rowHoverIndicatorColor: '--table-row-hover-indicator-color',
-  stripeBackground: '--table-stripe-background',
-  expandBtnColor: '--table-expand-btn-color',
-  expandBtnRadius: '--table-expand-btn-radius',
-  expandBtnHoverBackground: '--table-expand-btn-hover-background',
-  expandBtnHoverColor: '--table-expand-btn-hover-color',
-  stateCellPadding: '--table-state-cell-padding',
-  stateContentGap: '--table-state-content-gap',
-  stateContentColor: '--table-state-content-color',
-  spinnerTrack: '--table-spinner-track',
-  spinnerColor: '--table-spinner-color',
-  emptyContentGap: '--table-empty-content-gap',
-  emptyTitleFontWeight: '--table-empty-title-font-weight',
-  emptyTitleColor: '--table-empty-title-color',
-  emptyTitleFontSize: '--table-empty-title-font-size',
-  emptyDescColor: '--table-empty-desc-color',
-  emptyDescFontSize: '--table-empty-desc-font-size',
-  paginationPaddingVertical: '--table-pagination-padding-vertical',
-  paginationPaddingHorizontal: '--table-pagination-padding-horizontal',
-  paginationBorder: '--table-pagination-border',
-  paginationBackground: '--table-pagination-background',
-};
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DasarThemeService {
-  private themeState = new BehaviorSubject<DasarThemeConfig>({
-    mode: 'light',
-  });
-  public theme$: Observable<DasarThemeConfig> = this.themeState.asObservable();
-  private initialConfig = inject(DASAR_THEME_PROVIDER, { optional: true });
-  private platformId = inject(PLATFORM_ID);
-  private document = inject(DOCUMENT);
-  private renderer: Renderer2;
-
-  constructor(rendererFactory: RendererFactory2) {
-    this.renderer = rendererFactory.createRenderer(null, null);
-    // Apply initial component configuration if provided via provider
-    if (this.initialConfig) {
-      this.setGlobalTheme(this.initialConfig);
-    }
-  }
-
-  public setGlobalTheme(config: DasarThemeConfig, targetElement?: HTMLElement) {
-    // Guard against SSR crashes when document is undefined on the server
-    if (!isPlatformBrowser(this.platformId)) {
-      this.themeState.next(config);
-      return;
-    }
-    const root = targetElement || this.document.documentElement;
-    if (config.mode === 'dark') {
-      this.renderer.setAttribute(root, 'data-theme', 'dark');
-    } else {
-      this.renderer.removeAttribute(root, 'data-theme');
-    }
-    if (config.colors) {
-      this.injectColors(root, config.colors);
-    }
-    if (config.tokens?.[config.mode]?.common) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.common, commonMap);
-    }
-    if (config.tokens?.[config.mode]?.button) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.button, buttonMap);
-    }
-    if (config.tokens?.[config.mode]?.input) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.input, inputMap);
-    }
-    if (config.tokens?.[config.mode]?.calendar) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.calendar, calendarMap);
-    }
-    if (config.tokens?.[config.mode]?.datepicker) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.datepicker, datepickerMap);
-    }
-    if (config.tokens?.[config.mode]?.chip) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.chip, chipMap);
-    }
-    if (config.tokens?.[config.mode]?.select) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.select, selectMap);
-    }
-    if (config.tokens?.[config.mode]?.card) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.card, cardMap);
-    }
-    if (config.tokens?.[config.mode]?.menu) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.menu, menuMap);
-    }
-    if (config.tokens?.[config.mode]?.table) {
-      this.injectMappedTokens(root, config.tokens?.[config.mode]?.table, tableMap);
-    }
-    // Update TS State
-    this.themeState.next(config);
-  }
-
-  public themeVariable(): DasarThemeConfig {
-    return this.themeState.getValue();
-  }
-
-  private injectMappedTokens(
-    element: HTMLElement,
-    payload: any,
-    dictionary: Record<string, string>,
-  ) {
-    Object.entries(payload).forEach(([key, value]) => {
-      const cssVar = dictionary[key];
-      if (cssVar && value !== undefined && value !== null) {
-        this.renderer.setStyle(element, cssVar, String(value));
-      }
-    });
-  }
-
-  private injectColors(element: HTMLElement, colors: DasarThemeColors) {
-    Object.entries(colors).forEach(([paletteName, shades]) => {
-      if (shades && typeof shades === 'object') {
-        Object.entries(shades).forEach(([shadeKey, value]) => {
-          if (value !== undefined && value !== null) {
-            const cssVar = `--dasar-${paletteName}-${shadeKey}`;
-            this.renderer.setStyle(element, cssVar, String(value));
-          }
-        });
-      }
-    });
-  }
-}