ados-rcm 1.0.599 → 1.0.600

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/dist/AModule/AComponents/AButton/AThemeButton.d.ts +3 -3
  2. package/dist/AModule/AComponents/ATheme/ATheme.d.ts +33 -33
  3. package/dist/AModule/AComponents/ATheme/ATheme2.d.ts +71 -48
  4. package/dist/AModule/AComponents/ATheme/DesignTokens.d.ts +170 -0
  5. package/dist/AModule/AComponents/ATheme/DevTokens.d.ts +207 -0
  6. package/dist/index.cjs.js +27 -27
  7. package/dist/index.es.js +5696 -5913
  8. package/package.json +1 -1
  9. package/dist/AModule/AComponents/ATheme/Tokens.d.ts +0 -170
package/dist/AModule/AComponents/AButton/AThemeButton.d.ts CHANGED
@@ -1,17 +1,17 @@
1
1
  import { IABaseProps } from '../ABase/ABase';
2
2
  import { TSemanticModes } from '../ATheme/ATheme2';
3
3
  export interface IAThemeButtonProps extends Omit<IABaseProps, 'onChange'> {
4
- onChange?: (newThemeName: TSemanticModes) => void;
4
+ onChange?: (newSemanticMode: TSemanticModes) => void;
5
5
  }
6
6
  /**
7
7
  * AThemeButton
8
8
  *
9
9
  * Description : AThemeButton is a button for changing themes between Default and Dark.
10
- * If you want to control othere themes, you might need ATheme.functions.
10
+ * If you want to control othere themes, you might need AThemes.functions.
11
11
  *
12
12
  * Basic Usage :
13
13
  *
14
14
  * if (case 1)
15
- * <AThemeButton onChange={(newThemeName : 'Default' | 'Dark') => setCurrentThemeName(string)} />
15
+ * <AThemeButton onChange={(newSemanticMode : TSemanticModes) => setCurrentSemanticMode(newSemanticMode)} />
16
16
  */
17
17
  export declare const AThemeButton: (props: IAThemeButtonProps) => import("react/jsx-runtime").JSX.Element;
package/dist/AModule/AComponents/ATheme/ATheme.d.ts CHANGED
@@ -21,7 +21,7 @@ export declare const AFrameStyleKeys: readonly ["--ADivideFrame_DividerInner_bac
21
21
  export declare const AFloatMenuKeys: readonly ["--AFloatMenu_background-color", "--AFloatMenu_hover_background-color", "--AFloatMenu_color"];
22
22
  export declare const ALoadingBorderKeys: readonly ["--ALoadingBorder_background-color", "--ALoadingBorder_ProgressBar_background-color", "--ALoadingBorder_Cover_background-color"];
23
23
  export declare const ComponentStyleKeys: readonly ["--ABase_Dimming_background-color", "--ATooltip_background-color", "--ATooltip_color", "--AButton_Primary_border", "--AButton_Primary_background-color", "--AButton_Primary_color", "--AButton_Primary_hover_background-color", "--AButton_Primary_active_background-color", "--AButton_Secondary_border", "--AButton_Secondary_background-color", "--AButton_Secondary_color", "--AButton_Secondary_hover_background-color", "--AButton_Secondary_active_background-color", "--AInput_Primary_background-color", "--AInput_Primary_border", "--AInput_Primary_color", "--AInput_Primary_hover_border", "--AInput_Primary_focus_background-color", "--AInput_Primary_focus_border", "--AInput_Secondary_background-color", "--AInput_Secondary_border", "--AInput_Secondary_color", "--AInput_Secondary_hover_border", "--AInput_Secondary_focus_border", "--AInput_ReadOnly_background-color", "--AInput_ReadOnly_border", "--AInput_ReadOnly_color", "--AInput_Error_HelperText_color", "--AInput_Error_background-color", "--AInput_Error_border", "--AInput_Error_color", "--AInput_Error_placeholder_color", "--ATextArea_Primary_background-color", "--ATextArea_Primary_border", "--ATextArea_Primary_color", "--ATextArea_Primary_hover_border", "--ATextArea_Primary_focus_background-color", "--ATextArea_Primary_focus_border", "--ATextArea_Secondary_background-color", "--ATextArea_Secondary_border", "--ATextArea_Secondary_color", "--ATextArea_Secondary_hover_border", "--ATextArea_Secondary_focus_border", "--ATextArea_ReadOnly_background-color", "--ATextArea_ReadOnly_border", "--ATextArea_ReadOnly_color", "--ATextArea_Error_background-color", "--ATextArea_Error_border", "--ATextArea_Error_color", "--ATextArea_Error_placeholder_color", "--ACheckBox_color", "--ADialog_Paper_background-color", "--ADialog_background-color", "--ADialog_border", "--ADialog_Body_Title_font", "--ADialog_Action_background-color", "--ASelect_Primary_border", "--ASelect_Primary_hover_border", "--ASelect_Primary_Arrow_color", "--ASelect_Primary_Options_background-color", "--ASelect_Primary_Options_border", "--ASelect_Primary_Option_hover_background-color", "--ASelect_Primary_Option_active_background-color", "--ASelect_Primary_Option_Selected_background-color", "--ASelect_Secondary_background-color", "--ASelect_Secondary_Arrow_color", "--ASelect_Secondary_Options_background-color", "--ASelect_Secondary_Options_border", "--ASelect_Secondary_Option_hover_background-color", "--ASelect_Secondary_Option_active_background-color", "--ASelect_Secondary_Option_Selected_background-color", "--AMultiSelect_Primary_border", "--AMultiSelect_Primary_hover_border", "--AMultiSelect_Primary_Arrow_color", "--AMultiSelect_Primary_Options_background-color", "--AMultiSelect_Primary_Options_border", "--AMultiSelect_Primary_Option_hover_background-color", "--AMultiSelect_Primary_Option_active_background-color", "--AMultiSelect_Primary_Option_Selected_background-color", "--AMultiSelect_Secondary_background-color", "--AMultiSelect_Secondary_Arrow_color", "--AMultiSelect_Secondary_Options_background-color", "--AMultiSelect_Secondary_Options_border", "--AMultiSelect_Secondary_Option_hover_background-color", "--AMultiSelect_Secondary_Option_active_background-color", "--AMultiSelect_Secondary_Option_Selected_background-color", "--ATree_background-color", "--ATree_Indent_border", "--ATreeHeader_border-bottom", "--ATreeBodyHeader_border-bottom", "--ATreeItem_hover_background-color", "--ATreeItem_active_background-color", "--ATreeItem_select_background-color", "--ATreeItem_search_background-color", "--ATreeItem_search_border-top", "--ATreeItem_search_border-bottom", "--ATreeItem_select_color", "--ASwitch_Track_Falsy_border-color", "--ASwitch_Track_Truthy_border-color", "--ATab_font", "--ATab_Option_IsSelected_font", "--ATab_IndicatorTrack_Primary_border-bottom", "--ATab_Indicator_Primary_background-color", "--ATab_Option_Secondary_border", "--ATab_Option_Secondary_IsSelected_border-bottom", "--ATab_Option_Secondary_IsDisabled_border", "--AFileBox_border", "--AFileBox_background-color", "--AFileBox_SelectedFile_color", "--AFileBox_Dropping_color", "--AFileBox_Dropping_font", "--AListView_border-top", "--AListView_Row_border-bottom", "--AListView_Label_border-left", "--AListView_Label_font", "--AListView_Rendered_border-left", "--AStepper_OutCircle_background-color", "--AStepper_OutCircle_IsOver_background-color", "--AStepper_InCircle_background-color", "--AStepper_InCircle_IsOver_background-color", "--AStepper_Line_background-color", "--AStepper_Line_IsOver_background-color", "--ADatePicker_Anchor_border", "--ADatePicker_Anchor_color", "--ADatePicker_Anchor_hover_border", "--ADatePicker_Anchor_focus_border", "--ADatePicker_Anchor_Icon_Primary_color", "--ADatePicker_Anchor_Icon_Secondary_color", "--ADatePicker_background-color", "--ADatePicker_border", "--ADatePicker_StringInputContainer_background-color", "--ADatePicker_String_border", "--ADatePicker_Prev_background-color", "--ADatePicker_Prev_border-right", "--ADatePicker_Next_background-color", "--ADatePicker_Next_border-left", "--ADatePicker_Cell_color", "--ADatePicker_Cell_IsNotCurrentMonth_color", "--ADatePicker_Cell_IsDisabled_color", "--ADatePicker_Cell_IsSelected_background-color", "--ADatePicker_Cell_IsSelected_color", "--ADatePicker_Cell_IsHovered_background-color", "--ADateRangePicker_Anchor_border", "--ADateRangePicker_Anchor_color", "--ADateRangePicker_Anchor_hover_border", "--ADateRangePicker_Anchor_focus_border", "--ADateRangePicker_Anchor_Icon_Primary_color", "--ADateRangePicker_Anchor_Icon_Secondary_color", "--ADateRangePicker_background-color", "--ADateRangePicker_border", "--ADateRangePicker_StringInputContainer_background-color", "--ADateRangePicker_String_border", "--ADateRangePicker_Prev_background-color", "--ADateRangePicker_Prev_border-right", "--ADateRangePicker_Next_background-color", "--ADateRangePicker_Next_border-left", "--ADateRangePicker_Cell_color", "--ADateRangePicker_Cell_IsNotCurrentMonth_color", "--ADateRangePicker_Cell_IsDisabled_color", "--ADateRangePicker_Cell_IsSelected_background-color", "--ADateRangePicker_Cell_IsSelected_color", "--ADateRangePicker_Cell_IsHovered_background-color", "--AIconButton_Primary_color", "--AIconButton_Primary_background-color", "--AIconButton_Primary_border", "--AIconButton_Primary_hover_border", "--ATableBody_TRow_border-bottom", "--ATableBody_TRow_IsSelected_background-color", "--ATableBody_TRow_IsSelectable_hover_background-color", "--ATableBody_TH_color", "--ATableBody_TH_font-size", "--ATableBody_TD_font-size", "--ATableBody_TD_IsMarked_background-color", "--ATableBody_Resizer_hover_ResizerCenter_background-color", "--ATableBody_Resizer_active_ResizerCenter_background-color", "--ATableBody_Resizer_active_ResizerOut_background-color", "--ATableBody_Resizer_active_ResizerIn_background-color", "--ATableFooter_Button_IsSelected_background-color", "--ATableFooter_Button_IsSelected_color", "--ATableFooter_Button_IsDisabled_color", "--ATableFilter_SubFilters_background-color", "--ATableFilter_SubFilters_border", "--ATableFilter_Icon_color", "--ADivideFrame_DividerInner_background-color", "--AFloatMenu_background-color", "--AFloatMenu_hover_background-color", "--AFloatMenu_color"];
24
- export type TComponentStyleKeys = (typeof ComponentStyleKeys)[number];
24
+ type TComponentStyleKeys = (typeof ComponentStyleKeys)[number];
25
25
  export type TSemantic = {
26
26
  [key in TComponentStyleKeys]: string | undefined;
27
27
  } & {
@@ -183,22 +183,22 @@ declare const Semantic: {
183
183
  readonly '--ABase_Dimming_background-color': "var(--fill-background)";
184
184
  readonly '--ATooltip_background-color': "var(--content-secondary)";
185
185
  readonly '--ATooltip_color': "var(--ui-elevation)";
186
- readonly '--AButton_Primary_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
187
- readonly '--AButton_Primary_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
188
- readonly '--AButton_Primary_color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
186
+ readonly '--AButton_Primary_border': "1px solid var(--button-fill-rest-primary)";
187
+ readonly '--AButton_Primary_background-color': "var(--button-fill-rest-primary)";
188
+ readonly '--AButton_Primary_color': "var(--button-text-primary)";
189
189
  readonly '--AButton_Primary_hover_background-color': "var(--button-fill-hover-primary)";
190
190
  readonly '--AButton_Primary_active_background-color': "var(--button-fill-press-primary)";
191
- readonly '--AButton_Secondary_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
192
- readonly '--AButton_Secondary_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
193
- readonly '--AButton_Secondary_color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
191
+ readonly '--AButton_Secondary_border': "1px solid var(--button-stroke-secondary)";
192
+ readonly '--AButton_Secondary_background-color': "var(--button-fill-rest-secondary)";
193
+ readonly '--AButton_Secondary_color': "var(--button-text-secondary)";
194
194
  readonly '--AButton_Secondary_hover_background-color': "var(--button-fill-hover-secondary)";
195
195
  readonly '--AButton_Secondary_active_background-color': "var(--button-fill-press-secondary)";
196
- readonly '--AInput_Primary_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
197
- readonly '--AInput_Primary_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
198
- readonly '--AInput_Primary_color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
196
+ readonly '--AInput_Primary_background-color': "var(--textinput-fill-rest)";
197
+ readonly '--AInput_Primary_border': "1px solid var(--textinput-fill-rest)";
198
+ readonly '--AInput_Primary_color': "var(--content-secondary)";
199
199
  readonly '--AInput_Primary_hover_border': "1px solid var(--textinput-stroke-active)";
200
200
  readonly '--AInput_Primary_focus_background-color': "var(--textinput-fill-active)";
201
- readonly '--AInput_Primary_focus_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
201
+ readonly '--AInput_Primary_focus_border': "1px solid var(--textinput-stroke-active)";
202
202
  readonly '--AInput_Secondary_background-color': "inherit";
203
203
  readonly '--AInput_Secondary_border': "1px solid var(--content-tertiary)";
204
204
  readonly '--AInput_Secondary_color': "var(--content-secondary)";
@@ -212,12 +212,12 @@ declare const Semantic: {
212
212
  readonly '--AInput_Error_border': "1px solid var(--textinput-stroke-error)";
213
213
  readonly '--AInput_Error_color': "var(--error-text)";
214
214
  readonly '--AInput_Error_placeholder_color': "var(--error-text)";
215
- readonly '--ATextArea_Primary_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
216
- readonly '--ATextArea_Primary_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
217
- readonly '--ATextArea_Primary_color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
218
- readonly '--ATextArea_Primary_hover_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
219
- readonly '--ATextArea_Primary_focus_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
220
- readonly '--ATextArea_Primary_focus_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
215
+ readonly '--ATextArea_Primary_background-color': "var(--textinput-fill-rest)";
216
+ readonly '--ATextArea_Primary_border': "1px solid var(--textinput-fill-rest)";
217
+ readonly '--ATextArea_Primary_color': "var(--content-secondary)";
218
+ readonly '--ATextArea_Primary_hover_border': "1px solid var(--textinput-stroke-active)";
219
+ readonly '--ATextArea_Primary_focus_background-color': "var(--textinput-fill-active)";
220
+ readonly '--ATextArea_Primary_focus_border': "1px solid var(--textinput-stroke-active)";
221
221
  readonly '--ATextArea_Secondary_background-color': "inherit";
222
222
  readonly '--ATextArea_Secondary_border': "1px solid var(--content-tertiary)";
223
223
  readonly '--ATextArea_Secondary_color': "var(--content-secondary)";
@@ -230,17 +230,17 @@ declare const Semantic: {
230
230
  readonly '--ATextArea_Error_border': "1px solid var(--textinput-stroke-error)";
231
231
  readonly '--ATextArea_Error_color': "var(--error-text)";
232
232
  readonly '--ATextArea_Error_placeholder_color': "var(--error-text)";
233
- readonly '--ACheckBox_color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
234
- readonly '--ADialog_Paper_background-color': "#00000057";
235
- readonly '--ADialog_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
236
- readonly '--ADialog_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
233
+ readonly '--ACheckBox_color': "var(--content-primary)";
234
+ readonly '--ADialog_Paper_background-color': "#00000060";
235
+ readonly '--ADialog_background-color': "var(--dialog-background)";
236
+ readonly '--ADialog_border': "1px solid var(--dialog-stroke)";
237
237
  readonly '--ADialog_Body_Title_font': "700 20px pretendard";
238
- readonly '--ADialog_Action_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
239
- readonly '--ASelect_Primary_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
240
- readonly '--ASelect_Primary_hover_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
241
- readonly '--ASelect_Primary_Arrow_color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
242
- readonly '--ASelect_Primary_Options_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
243
- readonly '--ASelect_Primary_Options_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
238
+ readonly '--ADialog_Action_background-color': "var(--dialog-depth)";
239
+ readonly '--ASelect_Primary_border': "1px solid var(--content-tertiary)";
240
+ readonly '--ASelect_Primary_hover_border': "1px solid var(--stroke-primary)";
241
+ readonly '--ASelect_Primary_Arrow_color': "var(--content-primary)";
242
+ readonly '--ASelect_Primary_Options_background-color': "var(--ui-elevation)";
243
+ readonly '--ASelect_Primary_Options_border': "1px solid var(--content-primary)";
244
244
  readonly '--ASelect_Primary_Option_hover_background-color': "var(--content-quaternary)";
245
245
  readonly '--ASelect_Primary_Option_active_background-color': "var(--content-quaternary)";
246
246
  readonly '--ASelect_Primary_Option_Selected_background-color': "var(--highlight-primary)";
@@ -251,11 +251,11 @@ declare const Semantic: {
251
251
  readonly '--ASelect_Secondary_Option_hover_background-color': "var(--content-quaternary)";
252
252
  readonly '--ASelect_Secondary_Option_active_background-color': "var(--content-quaternary)";
253
253
  readonly '--ASelect_Secondary_Option_Selected_background-color': "var(--highlight-primary)";
254
- readonly '--AMultiSelect_Primary_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
254
+ readonly '--AMultiSelect_Primary_border': "1px solid var(--content-tertiary)";
255
255
  readonly '--AMultiSelect_Primary_hover_border': "1px solid var(--stroke-primary)";
256
- readonly '--AMultiSelect_Primary_Arrow_color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
257
- readonly '--AMultiSelect_Primary_Options_background-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
258
- readonly '--AMultiSelect_Primary_Options_border': "1px solid var(#ffffff)" | "1px solid var(#000000)" | "1px solid var(#fcfcfc)" | "1px solid var(#efefef)" | "1px solid var(#e2e2e2)" | "1px solid var(#d6d6d6)" | "1px solid var(#c9c9c9)" | "1px solid var(#bababa)" | "1px solid var(#a5a5a5)" | "1px solid var(#898989)" | "1px solid var(#4c4c4c)" | "1px solid var(#333333)" | "1px solid var(#191919)" | "1px solid var(#0c0c0c)" | "1px solid var(#e50000)" | "1px solid var(#00e517)" | "1px solid var(#ff670f)" | "1px solid var(#386fff)" | "1px solid var(#2c2c2c)";
256
+ readonly '--AMultiSelect_Primary_Arrow_color': "var(--content-primary)";
257
+ readonly '--AMultiSelect_Primary_Options_background-color': "var(--ui-elevation)";
258
+ readonly '--AMultiSelect_Primary_Options_border': "1px solid var(--content-primary)";
259
259
  readonly '--AMultiSelect_Primary_Option_hover_background-color': "var(--content-quaternary)";
260
260
  readonly '--AMultiSelect_Primary_Option_active_background-color': "var(--content-quaternary)";
261
261
  readonly '--AMultiSelect_Primary_Option_Selected_background-color': "var(--highlight-primary)";
@@ -277,8 +277,8 @@ declare const Semantic: {
277
277
  readonly '--ATreeItem_search_border-top': "1px dashed var(--content-primary)";
278
278
  readonly '--ATreeItem_search_border-bottom': "1px dashed var(--content-primary)";
279
279
  readonly '--ATreeItem_select_color': "var(--content-primary)";
280
- readonly '--ASwitch_Track_Falsy_border-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
281
- readonly '--ASwitch_Track_Truthy_border-color': "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
280
+ readonly '--ASwitch_Track_Falsy_border-color': "var(--switch-fill-track-off)";
281
+ readonly '--ASwitch_Track_Truthy_border-color': "var(--switch-fill-track-on)";
282
282
  readonly '--ATab_font': "500 16px pretendard";
283
283
  readonly '--ATab_Option_IsSelected_font': "700 16px pretendard";
284
284
  readonly '--ATab_IndicatorTrack_Primary_border-bottom': "1px solid var(--tapbutton-stroke-rest)";
package/dist/AModule/AComponents/ATheme/ATheme2.d.ts CHANGED
@@ -1,55 +1,74 @@
1
+ import { designTokens } from './DesignTokens';
2
+ import { devTokens } from './DevTokens';
3
+ export type TTokens = typeof designTokens;
4
+ export type TDevTokens = typeof devTokens;
5
+ export type TPalette = (typeof designTokens.palette)['mode-1'];
1
6
  export declare const paletteModes: "mode-1"[];
2
- export type TPalletteModes = (typeof paletteModes)[number];
3
- export declare const paletteColors: ("common-100" | "common-0" | "brand-b-color" | "neutral-20" | "neutral-5" | "neutral-73" | "neutral-79" | "neutral-65" | "neutral-89" | "neutral-94" | "orange-53" | "green-45" | "red-45" | "neutral-84" | "neutral-99" | "neutral-30" | "neutral-54" | "neutral-10" | "neutral-15" | "neutral-42" | "cool-neutral-99" | "cool-neutral-94" | "cool-neutral-89" | "cool-neutral-84" | "cool-neutral-79" | "cool-neutral-73" | "cool-neutral-65" | "cool-neutral-54" | "cool-neutral-42" | "cool-neutral-30" | "cool-neutral-20" | "cool-neutral-10" | "cool-neutral-5" | "red-99" | "red-95" | "red-90" | "red-84" | "red-76" | "red-66" | "red-53" | "red-34" | "red-30" | "red-24" | "red-10" | "green-99" | "green-95" | "green-90" | "green-84" | "green-76" | "green-66" | "green-48" | "green-34" | "green-30" | "green-24" | "green-10" | "blue-99" | "blue-95" | "blue-90" | "blue-84" | "blue-76" | "blue-66" | "blue-53" | "blue-45" | "blue-34" | "blue-30" | "blue-24" | "blue-10" | "orange-99" | "orange-95" | "orange-90" | "orange-84" | "orange-76" | "orange-66" | "orange-45" | "orange-34" | "orange-30" | "orange-24" | "orange-10" | "violet-99" | "violet-95" | "violet-90" | "violet-84" | "violet-76" | "violet-66" | "violet-53" | "violet-45" | "violet-34" | "violet-28" | "violet-24" | "violet-10" | "cyan-99" | "cyan-95" | "cyan-90" | "cyan-84" | "cyan-76" | "cyan-66" | "cyan-50" | "cyan-45" | "cyan-40" | "cyan-30" | "cyan-21" | "cyan-10" | "pink-99" | "pink-95" | "pink-90" | "pink-84" | "pink-76" | "pink-66" | "pink-53" | "pink-45" | "pink-40" | "pink-30" | "pink-21" | "pink-10" | "lime-99" | "lime-95" | "lime-90" | "lime-84" | "lime-76" | "lime-66" | "lime-49" | "lime-45" | "lime-40" | "lime-30" | "lime-21" | "lime-10")[];
4
- export type TPalletteColors = (typeof paletteColors)[number];
5
- declare function applyPaletteMode(mode: TPalletteModes): void;
7
+ export type TPaletteModes = (typeof paletteModes)[number];
8
+ export declare const paletteKeys: ("common-100" | "common-0" | "brand-b-color" | "neutral-20" | "neutral-5" | "neutral-73" | "neutral-79" | "neutral-65" | "neutral-89" | "neutral-94" | "orange-53" | "green-45" | "red-45" | "neutral-84" | "neutral-99" | "neutral-30" | "neutral-54" | "neutral-10" | "neutral-15" | "neutral-42" | "cool-neutral-99" | "cool-neutral-94" | "cool-neutral-89" | "cool-neutral-84" | "cool-neutral-79" | "cool-neutral-73" | "cool-neutral-65" | "cool-neutral-54" | "cool-neutral-42" | "cool-neutral-30" | "cool-neutral-20" | "cool-neutral-10" | "cool-neutral-5" | "red-99" | "red-95" | "red-90" | "red-84" | "red-76" | "red-66" | "red-53" | "red-34" | "red-30" | "red-24" | "red-10" | "green-99" | "green-95" | "green-90" | "green-84" | "green-76" | "green-66" | "green-48" | "green-34" | "green-30" | "green-24" | "green-10" | "blue-99" | "blue-95" | "blue-90" | "blue-84" | "blue-76" | "blue-66" | "blue-53" | "blue-45" | "blue-34" | "blue-30" | "blue-24" | "blue-10" | "orange-99" | "orange-95" | "orange-90" | "orange-84" | "orange-76" | "orange-66" | "orange-45" | "orange-34" | "orange-30" | "orange-24" | "orange-10" | "violet-99" | "violet-95" | "violet-90" | "violet-84" | "violet-76" | "violet-66" | "violet-53" | "violet-45" | "violet-34" | "violet-28" | "violet-24" | "violet-10" | "cyan-99" | "cyan-95" | "cyan-90" | "cyan-84" | "cyan-76" | "cyan-66" | "cyan-50" | "cyan-45" | "cyan-40" | "cyan-30" | "cyan-21" | "cyan-10" | "pink-99" | "pink-95" | "pink-90" | "pink-84" | "pink-76" | "pink-66" | "pink-53" | "pink-45" | "pink-40" | "pink-30" | "pink-21" | "pink-10" | "lime-99" | "lime-95" | "lime-90" | "lime-84" | "lime-76" | "lime-66" | "lime-49" | "lime-45" | "lime-40" | "lime-30" | "lime-21" | "lime-10")[];
9
+ export type TPaletteKeys = (typeof paletteKeys)[number];
10
+ interface IPaletteModeChangeEvent {
11
+ type: 'paletteModeChange';
12
+ listener: (newPaletteMode: TPaletteModes) => void;
13
+ }
14
+ /**
15
+ * changePaletteMode : (mode: TPaletteModes) => void
16
+ *
17
+ * Description : change the palette mode. it will be applied immediately.
18
+ */
19
+ declare function changePaletteMode(mode: TPaletteModes): void;
20
+ /**
21
+ * editPalette : (palette: Partial<TPalette>, mode: TPaletteModes | 'all') => void
22
+ *
23
+ * Description : edit the color of the palette. it will be applied immediately.
24
+ */
25
+ declare function editPalette(palette: Partial<TPalette>, mode?: TPaletteModes | 'all'): void;
26
+ export type TSemantic = typeof designTokens.semantic.light;
6
27
  export declare const semanticModes: ("light" | "dark")[];
7
28
  export type TSemanticModes = (typeof semanticModes)[number];
8
- export declare function applySemanticMode(mode: TSemanticModes): void;
9
- export declare const semanticColors: ("static-white" | "static-black" | "acent-brand" | "label-normal" | "label-strong" | "label-neutral" | "line-normal" | "line-strong" | "line-neutral" | "background-normal" | "elevation-0" | "elevation-10" | "elevation-20" | "alert-warning" | "alert-success" | "alert-danger")[];
10
- export type TSemanticColors = (typeof semanticColors)[number];
11
- export declare function fetchToken(key: TSemanticColors, semanticMode?: TSemanticModes): "#ffffff" | "#000000" | "#fcfcfc" | "#efefef" | "#e2e2e2" | "#d6d6d6" | "#c9c9c9" | "#bababa" | "#a5a5a5" | "#898989" | "#4c4c4c" | "#333333" | "#191919" | "#0c0c0c" | "#e50000" | "#00e517" | "#ff670f" | "#386fff" | "#2c2c2c";
12
- export declare const ABaseStyleKeys: readonly ["--ABase_Dimming_background-color"];
13
- export declare const ATooltipStyleKeys: readonly ["--ATooltip_background-color", "--ATooltip_color"];
14
- export declare const AButtonStyleKeys: readonly ["--AButton_Primary_border-color", "--AButton_Primary_background-color", "--AButton_Primary_color", "--AButton_Primary_hover_background-color", "--AButton_Primary_active_background-color", "--AButton_Secondary_border-color", "--AButton_Secondary_background-color", "--AButton_Secondary_color", "--AButton_Secondary_hover_background-color", "--AButton_Secondary_active_background-color"];
15
- export declare const AInputStyleKeys: readonly ["--AInput_Primary_background-color", "--AInput_Primary_border-color", "--AInput_Primary_color", "--AInput_Primary_hover_border-color", "--AInput_Primary_focus_background-color", "--AInput_Primary_focus_border-color", "--AInput_Secondary_background-color", "--AInput_Secondary_border-color", "--AInput_Secondary_color", "--AInput_Secondary_hover_border-color", "--AInput_Secondary_focus_border-color", "--AInput_ReadOnly_background-color", "--AInput_ReadOnly_border-color", "--AInput_ReadOnly_color", "--AInput_Error_HelperText_color", "--AInput_Error_background-color", "--AInput_Error_border-color", "--AInput_Error_color", "--AInput_Error_placeholder_color"];
16
- export declare const ATextAreaStyleKeys: readonly ["--ATextArea_Primary_background-color", "--ATextArea_Primary_border-color", "--ATextArea_Primary_color", "--ATextArea_Primary_hover_border-color", "--ATextArea_Primary_focus_background-color", "--ATextArea_Primary_focus_border-color", "--ATextArea_Secondary_background-color", "--ATextArea_Secondary_border-color", "--ATextArea_Secondary_color", "--ATextArea_Secondary_hover_border-color", "--ATextArea_Secondary_focus_border-color", "--ATextArea_ReadOnly_background-color", "--ATextArea_ReadOnly_border-color", "--ATextArea_ReadOnly_color", "--ATextArea_Error_background-color", "--ATextArea_Error_border-color", "--ATextArea_Error_color", "--ATextArea_Error_placeholder_color"];
17
- export declare const ACheckBoxStyleKeys: readonly ["--ACheckBox_color"];
18
- export declare const ADialogStyleKeys: readonly ["--ADialog_Paper_background-color", "--ADialog_background-color", "--ADialog_border-color", "--ADialog_Action_background-color"];
19
- export declare const ASelectStyleKeys: readonly ["--ASelect_Primary_border-color", "--ASelect_Primary_hover_border-color", "--ASelect_Primary_Arrow_color", "--ASelect_Primary_Options_background-color", "--ASelect_Primary_Options_border-color", "--ASelect_Primary_Option_hover_background-color", "--ASelect_Primary_Option_active_background-color", "--ASelect_Primary_Option_Selected_background-color", "--ASelect_Secondary_background-color", "--ASelect_Secondary_Arrow_color", "--ASelect_Secondary_Options_background-color", "--ASelect_Secondary_Options_border-color", "--ASelect_Secondary_Option_hover_background-color", "--ASelect_Secondary_Option_active_background-color", "--ASelect_Secondary_Option_Selected_background-color"];
20
- export declare const AMultiSelectStyleKeys: readonly ["--AMultiSelect_Primary_border-color", "--AMultiSelect_Primary_hover_border-color", "--AMultiSelect_Primary_Arrow_color", "--AMultiSelect_Primary_Options_background-color", "--AMultiSelect_Primary_Options_border-color", "--AMultiSelect_Primary_Option_hover_background-color", "--AMultiSelect_Primary_Option_active_background-color", "--AMultiSelect_Primary_Option_Selected_background-color", "--AMultiSelect_Secondary_background-color", "--AMultiSelect_Secondary_Arrow_color", "--AMultiSelect_Secondary_Options_background-color", "--AMultiSelect_Secondary_Options_border-color", "--AMultiSelect_Secondary_Option_hover_background-color", "--AMultiSelect_Secondary_Option_active_background-color", "--AMultiSelect_Secondary_Option_Selected_background-color"];
21
- export declare const ATreeStyleKeys: readonly ["--ATree_background-color", "--ATree_Indent_border-color", "--ATreeBodyHeader_border-bottom-color", "--ATreeItem_hover_background-color", "--ATreeItem_active_background-color", "--ATreeItem_select_background-color", "--ATreeItem_search_background-color", "--ATreeItem_search_border-top-color", "--ATreeItem_search_border-bottom-color", "--ATreeItem_select_color"];
22
- export declare const ASwitchStyleKeys: readonly ["--ASwitch_Track_Falsy_border-color", "--ASwitch_Track_Truthy_border-color"];
23
- export declare const ATabStyleKeys: readonly ["--ATab_IndicatorTrack_Primary_border-bottom-color", "--ATab_Indicator_Primary_background-color", "--ATab_Option_Secondary_border-color", "--ATab_Option_Secondary_IsSelected_border-bottom-color", "--ATab_Option_Secondary_IsDisabled_border-color"];
24
- export declare const AFileBoxStyleKeys: readonly ["--AFileBox_border-color", "--AFileBox_background-color", "--AFileBox_SelectedFile_color", "--AFileBox_Dropping_color"];
25
- export declare const AListViewStyleKeys: readonly ["--AListView_border-top-color", "--AListView_Row_border-bottom-color", "--AListView_Label_border-left-color", "--AListView_Rendered_border-left-color"];
26
- export declare const AStepperStyleKeys: readonly ["--AStepper_OutCircle_background-color", "--AStepper_OutCircle_IsOver_background-color", "--AStepper_InCircle_background-color", "--AStepper_InCircle_IsOver_background-color", "--AStepper_Line_background-color", "--AStepper_Line_IsOver_background-color"];
27
- export declare const ADatePickerStyleKeys: readonly ["--ADatePicker_Anchor_border-color", "--ADatePicker_Anchor_color", "--ADatePicker_Anchor_hover_border-color", "--ADatePicker_Anchor_focus_border-color", "--ADatePicker_Anchor_Icon_Primary_color", "--ADatePicker_Anchor_Icon_Secondary_color", "--ADatePicker_background-color", "--ADatePicker_border-color", "--ADatePicker_StringInputContainer_background-color", "--ADatePicker_String_border-color", "--ADatePicker_Prev_background-color", "--ADatePicker_Prev_border-right-color", "--ADatePicker_Next_background-color", "--ADatePicker_Next_border-left-color", "--ADatePicker_Cell_color", "--ADatePicker_Cell_IsNotCurrentMonth_color", "--ADatePicker_Cell_IsDisabled_color", "--ADatePicker_Cell_IsSelected_background-color", "--ADatePicker_Cell_IsSelected_color", "--ADatePicker_Cell_IsHovered_background-color"];
28
- export declare const ADateRangePickerStyleKeys: readonly ["--ADateRangePicker_Anchor_border-color", "--ADateRangePicker_Anchor_color", "--ADateRangePicker_Anchor_hover_border-color", "--ADateRangePicker_Anchor_focus_border-color", "--ADateRangePicker_Anchor_Icon_Primary_color", "--ADateRangePicker_Anchor_Icon_Secondary_color", "--ADateRangePicker_background-color", "--ADateRangePicker_border-color", "--ADateRangePicker_StringInputContainer_background-color", "--ADateRangePicker_String_border-color", "--ADateRangePicker_Prev_background-color", "--ADateRangePicker_Prev_border-right-color", "--ADateRangePicker_Next_background-color", "--ADateRangePicker_Next_border-left-color", "--ADateRangePicker_Cell_color", "--ADateRangePicker_Cell_IsNotCurrentMonth_color", "--ADateRangePicker_Cell_IsDisabled_color", "--ADateRangePicker_Cell_IsSelected_background-color", "--ADateRangePicker_Cell_IsSelected_color", "--ADateRangePicker_Cell_IsHovered_background-color"];
29
- export declare const AIconButtonStyleKeys: readonly ["--AIconButton_Primary_color", "--AIconButton_Primary_background-color", "--AIconButton_Primary_border-color", "--AIconButton_Primary_hover_border-color"];
30
- export declare const ATableStyleKeys: readonly ["--ATableBody_TRow_border-bottom-color", "--ATableBody_TRow_IsSelected_background-color", "--ATableBody_TRow_IsSelectable_hover_background-color", "--ATableBody_TH_color", "--ATableBody_TD_IsMarked_background-color", "--ATableBody_Resizer_hover_ResizerCenter_background-color", "--ATableBody_Resizer_active_ResizerCenter_background-color", "--ATableBody_Resizer_active_ResizerOut_background-color", "--ATableBody_Resizer_active_ResizerIn_background-color", "--ATableFooter_Button_IsSelected_background-color", "--ATableFooter_Button_IsSelected_color", "--ATableFooter_Button_IsDisabled_color", "--ATableFilter_SubFilters_background-color", "--ATableFilter_SubFilters_border-color", "--ATableFilter_Icon_color"];
31
- export declare const AFrameStyleKeys: readonly ["--ADivideFrame_DividerInner_background-color"];
32
- export declare const AFloatMenuKeys: readonly ["--AFloatMenu_background-color", "--AFloatMenu_hover_background-color", "--AFloatMenu_color"];
33
- export declare const ALoadingBorderKeys: readonly ["--ALoadingBorder_background-color", "--ALoadingBorder_ProgressBar_background-color", "--ALoadingBorder_Cover_background-color"];
34
- export declare const ComponentStyleKeys: readonly ["--ABase_Dimming_background-color", "--ATooltip_background-color", "--ATooltip_color", "--AButton_Primary_border-color", "--AButton_Primary_background-color", "--AButton_Primary_color", "--AButton_Primary_hover_background-color", "--AButton_Primary_active_background-color", "--AButton_Secondary_border-color", "--AButton_Secondary_background-color", "--AButton_Secondary_color", "--AButton_Secondary_hover_background-color", "--AButton_Secondary_active_background-color", "--AInput_Primary_background-color", "--AInput_Primary_border-color", "--AInput_Primary_color", "--AInput_Primary_hover_border-color", "--AInput_Primary_focus_background-color", "--AInput_Primary_focus_border-color", "--AInput_Secondary_background-color", "--AInput_Secondary_border-color", "--AInput_Secondary_color", "--AInput_Secondary_hover_border-color", "--AInput_Secondary_focus_border-color", "--AInput_ReadOnly_background-color", "--AInput_ReadOnly_border-color", "--AInput_ReadOnly_color", "--AInput_Error_HelperText_color", "--AInput_Error_background-color", "--AInput_Error_border-color", "--AInput_Error_color", "--AInput_Error_placeholder_color", "--ATextArea_Primary_background-color", "--ATextArea_Primary_border-color", "--ATextArea_Primary_color", "--ATextArea_Primary_hover_border-color", "--ATextArea_Primary_focus_background-color", "--ATextArea_Primary_focus_border-color", "--ATextArea_Secondary_background-color", "--ATextArea_Secondary_border-color", "--ATextArea_Secondary_color", "--ATextArea_Secondary_hover_border-color", "--ATextArea_Secondary_focus_border-color", "--ATextArea_ReadOnly_background-color", "--ATextArea_ReadOnly_border-color", "--ATextArea_ReadOnly_color", "--ATextArea_Error_background-color", "--ATextArea_Error_border-color", "--ATextArea_Error_color", "--ATextArea_Error_placeholder_color", "--ACheckBox_color", "--ADialog_Paper_background-color", "--ADialog_background-color", "--ADialog_border-color", "--ADialog_Action_background-color", "--ASelect_Primary_border-color", "--ASelect_Primary_hover_border-color", "--ASelect_Primary_Arrow_color", "--ASelect_Primary_Options_background-color", "--ASelect_Primary_Options_border-color", "--ASelect_Primary_Option_hover_background-color", "--ASelect_Primary_Option_active_background-color", "--ASelect_Primary_Option_Selected_background-color", "--ASelect_Secondary_background-color", "--ASelect_Secondary_Arrow_color", "--ASelect_Secondary_Options_background-color", "--ASelect_Secondary_Options_border-color", "--ASelect_Secondary_Option_hover_background-color", "--ASelect_Secondary_Option_active_background-color", "--ASelect_Secondary_Option_Selected_background-color", "--AMultiSelect_Primary_border-color", "--AMultiSelect_Primary_hover_border-color", "--AMultiSelect_Primary_Arrow_color", "--AMultiSelect_Primary_Options_background-color", "--AMultiSelect_Primary_Options_border-color", "--AMultiSelect_Primary_Option_hover_background-color", "--AMultiSelect_Primary_Option_active_background-color", "--AMultiSelect_Primary_Option_Selected_background-color", "--AMultiSelect_Secondary_background-color", "--AMultiSelect_Secondary_Arrow_color", "--AMultiSelect_Secondary_Options_background-color", "--AMultiSelect_Secondary_Options_border-color", "--AMultiSelect_Secondary_Option_hover_background-color", "--AMultiSelect_Secondary_Option_active_background-color", "--AMultiSelect_Secondary_Option_Selected_background-color", "--ATree_background-color", "--ATree_Indent_border-color", "--ATreeBodyHeader_border-bottom-color", "--ATreeItem_hover_background-color", "--ATreeItem_active_background-color", "--ATreeItem_select_background-color", "--ATreeItem_search_background-color", "--ATreeItem_search_border-top-color", "--ATreeItem_search_border-bottom-color", "--ATreeItem_select_color", "--ASwitch_Track_Falsy_border-color", "--ASwitch_Track_Truthy_border-color", "--ATab_IndicatorTrack_Primary_border-bottom-color", "--ATab_Indicator_Primary_background-color", "--ATab_Option_Secondary_border-color", "--ATab_Option_Secondary_IsSelected_border-bottom-color", "--ATab_Option_Secondary_IsDisabled_border-color", "--AFileBox_border-color", "--AFileBox_background-color", "--AFileBox_SelectedFile_color", "--AFileBox_Dropping_color", "--AListView_border-top-color", "--AListView_Row_border-bottom-color", "--AListView_Label_border-left-color", "--AListView_Rendered_border-left-color", "--AStepper_OutCircle_background-color", "--AStepper_OutCircle_IsOver_background-color", "--AStepper_InCircle_background-color", "--AStepper_InCircle_IsOver_background-color", "--AStepper_Line_background-color", "--AStepper_Line_IsOver_background-color", "--ADatePicker_Anchor_border-color", "--ADatePicker_Anchor_color", "--ADatePicker_Anchor_hover_border-color", "--ADatePicker_Anchor_focus_border-color", "--ADatePicker_Anchor_Icon_Primary_color", "--ADatePicker_Anchor_Icon_Secondary_color", "--ADatePicker_background-color", "--ADatePicker_border-color", "--ADatePicker_StringInputContainer_background-color", "--ADatePicker_String_border-color", "--ADatePicker_Prev_background-color", "--ADatePicker_Prev_border-right-color", "--ADatePicker_Next_background-color", "--ADatePicker_Next_border-left-color", "--ADatePicker_Cell_color", "--ADatePicker_Cell_IsNotCurrentMonth_color", "--ADatePicker_Cell_IsDisabled_color", "--ADatePicker_Cell_IsSelected_background-color", "--ADatePicker_Cell_IsSelected_color", "--ADatePicker_Cell_IsHovered_background-color", "--ADateRangePicker_Anchor_border-color", "--ADateRangePicker_Anchor_color", "--ADateRangePicker_Anchor_hover_border-color", "--ADateRangePicker_Anchor_focus_border-color", "--ADateRangePicker_Anchor_Icon_Primary_color", "--ADateRangePicker_Anchor_Icon_Secondary_color", "--ADateRangePicker_background-color", "--ADateRangePicker_border-color", "--ADateRangePicker_StringInputContainer_background-color", "--ADateRangePicker_String_border-color", "--ADateRangePicker_Prev_background-color", "--ADateRangePicker_Prev_border-right-color", "--ADateRangePicker_Next_background-color", "--ADateRangePicker_Next_border-left-color", "--ADateRangePicker_Cell_color", "--ADateRangePicker_Cell_IsNotCurrentMonth_color", "--ADateRangePicker_Cell_IsDisabled_color", "--ADateRangePicker_Cell_IsSelected_background-color", "--ADateRangePicker_Cell_IsSelected_color", "--ADateRangePicker_Cell_IsHovered_background-color", "--AIconButton_Primary_color", "--AIconButton_Primary_background-color", "--AIconButton_Primary_border-color", "--AIconButton_Primary_hover_border-color", "--ATableBody_TRow_border-bottom-color", "--ATableBody_TRow_IsSelected_background-color", "--ATableBody_TRow_IsSelectable_hover_background-color", "--ATableBody_TH_color", "--ATableBody_TD_IsMarked_background-color", "--ATableBody_Resizer_hover_ResizerCenter_background-color", "--ATableBody_Resizer_active_ResizerCenter_background-color", "--ATableBody_Resizer_active_ResizerOut_background-color", "--ATableBody_Resizer_active_ResizerIn_background-color", "--ATableFooter_Button_IsSelected_background-color", "--ATableFooter_Button_IsSelected_color", "--ATableFooter_Button_IsDisabled_color", "--ATableFilter_SubFilters_background-color", "--ATableFilter_SubFilters_border-color", "--ATableFilter_Icon_color", "--ADivideFrame_DividerInner_background-color", "--AFloatMenu_background-color", "--AFloatMenu_hover_background-color", "--AFloatMenu_color", "--ALoadingBorder_background-color", "--ALoadingBorder_ProgressBar_background-color", "--ALoadingBorder_Cover_background-color"];
35
- export type TComponentStyleKeys = (typeof ComponentStyleKeys)[number];
36
- type TTheme = {
37
- [key in TComponentStyleKeys]: TSemanticColors;
38
- };
39
- type TCustomTheme = {
40
- [key in TComponentStyleKeys]: string;
29
+ export declare const semanticKeys: ("static-white" | "static-black" | "acent-brand" | "label-normal" | "label-strong" | "label-neutral" | "line-normal" | "line-strong" | "line-neutral" | "background-normal" | "elevation-0" | "elevation-10" | "elevation-20" | "alert-warning" | "alert-success" | "alert-danger")[];
30
+ export type TSemanticKeys = (typeof semanticKeys)[number];
31
+ interface ISemanticModeChangeEvent {
32
+ type: 'semanticModeChange';
33
+ listener: (newSemanticMode: TSemanticModes) => void;
34
+ }
35
+ /**
36
+ * changeSemanticMode : (mode: TSemanticModes) => void
37
+ *
38
+ * Description : change the semantic mode. it will be applied immediately.
39
+ */
40
+ export declare function changeSemanticMode(mode: TSemanticModes): void;
41
+ /**
42
+ * editSemantic : (semantic: Partial<TSemantic>, mode: TSemanticModes | 'all') => void
43
+ *
44
+ * Description : edit the color of the semantic. it will be applied immediately.
45
+ */
46
+ declare function editSemantic(semantic: Partial<TSemantic>, mode?: TSemanticModes | 'all'): void;
47
+ export type TComponentStyle = typeof devTokens;
48
+ export type TComponentHardStyle = {
49
+ [key in keyof TComponentStyle]: TSemanticKeys;
41
50
  };
42
- declare function applyTheme(theme?: Partial<TTheme>): void;
43
- declare function applyCustomTheme(theme: Partial<TCustomTheme>): void;
51
+ /**
52
+ * editComponentStyle : (theme: Partial<TComponentStyle>) => void
53
+ *
54
+ * Description : edit componentStyle with semantic names. it will be applied immediately.
55
+ */
56
+ declare function editComponentStyle(theme: Partial<TComponentStyle>): void;
57
+ /**
58
+ * editComponentStyleWithSemantic : (theme: Partial<TComponentHardStyle>) => void
59
+ *
60
+ * Description : edit componentStyle with raw string. it will be applied immediately.
61
+ */
62
+ declare function editComponentStyleWithSemantic(theme: Partial<TComponentHardStyle>): void;
44
63
  interface IInitParams {
45
64
  /**
46
- * themeName?: TSemanticModes
65
+ * semanticMode?: TSemanticModes
47
66
  *
48
- * Description: The theme name to be set.
67
+ * Description: semanticMode will be set to the given value.
49
68
  *
50
69
  * Priority : 1
51
70
  */
52
- themeName?: TSemanticModes;
71
+ semanticMode?: TSemanticModes;
53
72
  /**
54
73
  * save?: 'localStorage' | 'sessionStorage'
55
74
  *
@@ -67,17 +86,21 @@ interface IInitParams {
67
86
  */
68
87
  followDeviceSetting?: boolean;
69
88
  }
70
- declare function init({ themeName, save, followDeviceSetting }: IInitParams): void;
89
+ declare function init({ semanticMode, save, followDeviceSetting }: IInitParams): void;
71
90
  declare function getCurrentPaletteMode(): "mode-1";
72
91
  declare function getCurrentSemanticMode(): "light" | "dark";
92
+ type TAThemeEvent = IPaletteModeChangeEvent | ISemanticModeChangeEvent;
93
+ declare function addEventListener<T extends TAThemeEvent>(param: T): void;
73
94
  export declare const AThemes: {
74
95
  init: typeof init;
75
- fetchToken: typeof fetchToken;
76
- applyPaletteMode: typeof applyPaletteMode;
77
- applySemanticMode: typeof applySemanticMode;
78
- applyTheme: typeof applyTheme;
79
- applyCustomTheme: typeof applyCustomTheme;
96
+ changePaletteMode: typeof changePaletteMode;
97
+ editPalette: typeof editPalette;
98
+ changeSemanticMode: typeof changeSemanticMode;
99
+ editSemantic: typeof editSemantic;
100
+ editComponentStyle: typeof editComponentStyle;
101
+ editComponentStyleWithSemantic: typeof editComponentStyleWithSemantic;
80
102
  getCurrentPaletteMode: typeof getCurrentPaletteMode;
81
103
  getCurrentSemanticMode: typeof getCurrentSemanticMode;
104
+ addEventListener: typeof addEventListener;
82
105
  };
83
106
  export {};
package/dist/AModule/AComponents/ATheme/DesignTokens.d.ts ADDED
@@ -0,0 +1,170 @@
1
+ export declare const designTokens: {
2
+ palette: {
3
+ 'mode-1': {
4
+ 'common-100': string;
5
+ 'common-0': string;
6
+ 'neutral-99': string;
7
+ 'neutral-94': string;
8
+ 'neutral-89': string;
9
+ 'neutral-84': string;
10
+ 'neutral-79': string;
11
+ 'neutral-73': string;
12
+ 'neutral-65': string;
13
+ 'neutral-54': string;
14
+ 'neutral-42': string;
15
+ 'neutral-30': string;
16
+ 'neutral-20': string;
17
+ 'neutral-10': string;
18
+ 'neutral-5': string;
19
+ 'cool-neutral-99': string;
20
+ 'cool-neutral-94': string;
21
+ 'cool-neutral-89': string;
22
+ 'cool-neutral-84': string;
23
+ 'cool-neutral-79': string;
24
+ 'cool-neutral-73': string;
25
+ 'cool-neutral-65': string;
26
+ 'cool-neutral-54': string;
27
+ 'cool-neutral-42': string;
28
+ 'cool-neutral-30': string;
29
+ 'cool-neutral-20': string;
30
+ 'cool-neutral-10': string;
31
+ 'cool-neutral-5': string;
32
+ 'red-99': string;
33
+ 'red-95': string;
34
+ 'red-90': string;
35
+ 'red-84': string;
36
+ 'red-76': string;
37
+ 'red-66': string;
38
+ 'red-53': string;
39
+ 'red-45': string;
40
+ 'red-34': string;
41
+ 'red-30': string;
42
+ 'red-24': string;
43
+ 'red-10': string;
44
+ 'green-99': string;
45
+ 'green-95': string;
46
+ 'green-90': string;
47
+ 'green-84': string;
48
+ 'green-76': string;
49
+ 'green-66': string;
50
+ 'green-48': string;
51
+ 'green-45': string;
52
+ 'green-34': string;
53
+ 'green-30': string;
54
+ 'green-24': string;
55
+ 'green-10': string;
56
+ 'blue-99': string;
57
+ 'blue-95': string;
58
+ 'blue-90': string;
59
+ 'blue-84': string;
60
+ 'blue-76': string;
61
+ 'blue-66': string;
62
+ 'blue-53': string;
63
+ 'blue-45': string;
64
+ 'blue-34': string;
65
+ 'blue-30': string;
66
+ 'blue-24': string;
67
+ 'blue-10': string;
68
+ 'orange-99': string;
69
+ 'orange-95': string;
70
+ 'orange-90': string;
71
+ 'orange-84': string;
72
+ 'orange-76': string;
73
+ 'orange-66': string;
74
+ 'orange-53': string;
75
+ 'orange-45': string;
76
+ 'orange-34': string;
77
+ 'orange-30': string;
78
+ 'orange-24': string;
79
+ 'orange-10': string;
80
+ 'violet-99': string;
81
+ 'violet-95': string;
82
+ 'violet-90': string;
83
+ 'violet-84': string;
84
+ 'violet-76': string;
85
+ 'violet-66': string;
86
+ 'violet-53': string;
87
+ 'violet-45': string;
88
+ 'violet-34': string;
89
+ 'violet-28': string;
90
+ 'violet-24': string;
91
+ 'violet-10': string;
92
+ 'cyan-99': string;
93
+ 'cyan-95': string;
94
+ 'cyan-90': string;
95
+ 'cyan-84': string;
96
+ 'cyan-76': string;
97
+ 'cyan-66': string;
98
+ 'cyan-50': string;
99
+ 'cyan-45': string;
100
+ 'cyan-40': string;
101
+ 'cyan-30': string;
102
+ 'cyan-21': string;
103
+ 'cyan-10': string;
104
+ 'pink-99': string;
105
+ 'pink-95': string;
106
+ 'pink-90': string;
107
+ 'pink-84': string;
108
+ 'pink-76': string;
109
+ 'pink-66': string;
110
+ 'pink-53': string;
111
+ 'pink-45': string;
112
+ 'pink-40': string;
113
+ 'pink-30': string;
114
+ 'pink-21': string;
115
+ 'pink-10': string;
116
+ 'lime-99': string;
117
+ 'lime-95': string;
118
+ 'lime-90': string;
119
+ 'lime-84': string;
120
+ 'lime-76': string;
121
+ 'lime-66': string;
122
+ 'lime-49': string;
123
+ 'lime-45': string;
124
+ 'lime-40': string;
125
+ 'lime-30': string;
126
+ 'lime-21': string;
127
+ 'lime-10': string;
128
+ 'brand-b-color': string;
129
+ 'neutral-15': string;
130
+ };
131
+ };
132
+ semantic: {
133
+ light: {
134
+ 'static-white': string;
135
+ 'static-black': string;
136
+ 'acent-brand': string;
137
+ 'label-normal': string;
138
+ 'label-strong': string;
139
+ 'label-neutral': string;
140
+ 'line-normal': string;
141
+ 'line-strong': string;
142
+ 'line-neutral': string;
143
+ 'background-normal': string;
144
+ 'elevation-0': string;
145
+ 'elevation-10': string;
146
+ 'elevation-20': string;
147
+ 'alert-warning': string;
148
+ 'alert-success': string;
149
+ 'alert-danger': string;
150
+ };
151
+ dark: {
152
+ 'static-white': string;
153
+ 'static-black': string;
154
+ 'acent-brand': string;
155
+ 'label-normal': string;
156
+ 'label-strong': string;
157
+ 'label-neutral': string;
158
+ 'line-normal': string;
159
+ 'line-strong': string;
160
+ 'line-neutral': string;
161
+ 'background-normal': string;
162
+ 'elevation-0': string;
163
+ 'elevation-10': string;
164
+ 'elevation-20': string;
165
+ 'alert-warning': string;
166
+ 'alert-success': string;
167
+ 'alert-danger': string;
168
+ };
169
+ };
170
+ };