From 2e2d2ff5bc951a3c41d17a5c83c5d99f0b283689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Mon, 18 Dec 2023 17:22:01 +0100 Subject: [PATCH 1/8] First iteration of the new Container component --- lib/src/common/coreTokens.ts | 58 +- lib/src/common/variables.ts | 1924 +++++++++++------------ lib/src/container/Container.stories.tsx | 153 ++ lib/src/container/Container.tsx | 91 ++ lib/src/container/types.ts | 83 + 5 files changed, 1326 insertions(+), 983 deletions(-) create mode 100644 lib/src/container/Container.stories.tsx create mode 100644 lib/src/container/Container.tsx create mode 100644 lib/src/container/types.ts diff --git a/lib/src/common/coreTokens.ts b/lib/src/common/coreTokens.ts index f87f68aef..26109f3d1 100644 --- a/lib/src/common/coreTokens.ts +++ b/lib/src/common/coreTokens.ts @@ -1,6 +1,8 @@ -const CORE_TOKENS = { - inherit: "inherit", - +/** + * Halstack Color Palette + * @link https://developer.dxc.com/halstack/next/principles/color/ + */ +const ColorTokens = { // Color // Absolutes color_black: "#000000", @@ -102,6 +104,37 @@ const CORE_TOKENS = { color_orange_700: "#c26c0a", color_orange_800: "#915108", color_orange_900: "#613605", +}; +export const getColorToken = (key: ColorTokenKeys) => ColorTokens[key]; +export type ColorTokenKeys = keyof typeof ColorTokens; + +/** + * Halstack Spacing Principles + * @link https://developer.dxc.com/halstack/next/principles/spacing/ + */ +const SpacingTokens = { + spacing_0: "0rem", + spacing_2: "0.125rem", + spacing_4: "0.25rem", + spacing_8: "0.5rem", + spacing_12: "0.75rem", + spacing_16: "1rem", + spacing_24: "1.5rem", + spacing_32: "2rem", + spacing_40: "2.5rem", + spacing_48: "3rem", + spacing_56: "3.5rem", + spacing_64: "4rem", + spacing_80: "5rem", + spacing_96: "6rem", + spacing_112: "7rem", +} + +const CoreTokens = { + ...ColorTokens, + ...SpacingTokens, + + inherit: "inherit", // Typography type_sans: "Open Sans, sans-serif", @@ -143,23 +176,6 @@ const CORE_TOKENS = { type_leading_loose_01: "1.715em", type_leading_loose_02: "2em", - // Spacing - spacing_0: "0rem", - spacing_2: "0.125rem", - spacing_4: "0.25rem", - spacing_8: "0.5rem", - spacing_12: "0.75rem", - spacing_16: "1rem", - spacing_24: "1.5rem", - spacing_32: "2rem", - spacing_40: "2.5rem", - spacing_48: "3rem", - spacing_56: "3.5rem", - spacing_64: "4rem", - spacing_80: "5rem", - spacing_96: "6rem", - spacing_112: "7rem", - // Border border_width_0: "0px", border_width_1: "1px", @@ -174,4 +190,4 @@ const CORE_TOKENS = { border_none: "none", }; -export default CORE_TOKENS; +export default CoreTokens; diff --git a/lib/src/common/variables.ts b/lib/src/common/variables.ts index 06d486b73..0e8736440 100644 --- a/lib/src/common/variables.ts +++ b/lib/src/common/variables.ts @@ -1,63 +1,63 @@ -import CORE_TOKENS from "./coreTokens"; +import CoreTokens from "./coreTokens"; export const componentTokens = { accordion: { - backgroundColor: CORE_TOKENS.color_white, - hoverBackgroundColor: CORE_TOKENS.color_purple_100, - arrowColor: CORE_TOKENS.color_purple_700, - disabledArrowColor: CORE_TOKENS.color_grey_500, - assistiveTextFontFamily: CORE_TOKENS.type_sans, - assistiveTextFontSize: CORE_TOKENS.type_scale_03, - assistiveTextFontWeight: CORE_TOKENS.type_light, - assistiveTextFontStyle: CORE_TOKENS.type_italic, - assistiveTextLetterSpacing: CORE_TOKENS.type_spacing_wide_01, - assistiveTextFontColor: CORE_TOKENS.color_grey_700, - disabledAssistiveTextFontColor: CORE_TOKENS.color_grey_500, + backgroundColor: CoreTokens.color_white, + hoverBackgroundColor: CoreTokens.color_purple_100, + arrowColor: CoreTokens.color_purple_700, + disabledArrowColor: CoreTokens.color_grey_500, + assistiveTextFontFamily: CoreTokens.type_sans, + assistiveTextFontSize: CoreTokens.type_scale_03, + assistiveTextFontWeight: CoreTokens.type_light, + assistiveTextFontStyle: CoreTokens.type_italic, + assistiveTextLetterSpacing: CoreTokens.type_spacing_wide_01, + assistiveTextFontColor: CoreTokens.color_grey_700, + disabledAssistiveTextFontColor: CoreTokens.color_grey_500, assistiveTextMinWidth: "100px", assistiveTextPaddingRight: "24px", assistiveTextPaddingLeft: "0px", - titleLabelFontFamily: CORE_TOKENS.type_sans, - titleLabelFontSize: CORE_TOKENS.type_scale_03, - titleLabelFontWeight: CORE_TOKENS.type_regular, - titleLabelFontStyle: CORE_TOKENS.type_normal, - titleLabelFontColor: CORE_TOKENS.color_black, - disabledTitleLabelFontColor: CORE_TOKENS.color_grey_500, + titleLabelFontFamily: CoreTokens.type_sans, + titleLabelFontSize: CoreTokens.type_scale_03, + titleLabelFontWeight: CoreTokens.type_regular, + titleLabelFontStyle: CoreTokens.type_normal, + titleLabelFontColor: CoreTokens.color_black, + disabledTitleLabelFontColor: CoreTokens.color_grey_500, titleLabelPaddingTop: "0px", titleLabelPaddingBottom: "0px", titleLabelPaddingLeft: "0px", titleLabelPaddingRight: "16px", - focusBorderColor: CORE_TOKENS.color_blue_600, - focusBorderStyle: CORE_TOKENS.border_solid, + focusBorderColor: CoreTokens.color_blue_600, + focusBorderStyle: CoreTokens.border_solid, focusBorderThickness: "2px", borderRadius: "4px", boxShadowOffsetX: "0px", boxShadowOffsetY: "6px", boxShadowBlur: "10px", - boxShadowColor: CORE_TOKENS.color_grey_200_a, - iconColor: CORE_TOKENS.color_purple_700, - disabledIconColor: CORE_TOKENS.color_grey_500, + boxShadowColor: CoreTokens.color_grey_200_a, + iconColor: CoreTokens.color_purple_700, + disabledIconColor: CoreTokens.color_grey_500, iconSize: "24px", iconMarginLeft: "0px", iconMarginRigth: "12px", - accordionGroupSeparatorBorderColor: CORE_TOKENS.color_grey_200_a, + accordionGroupSeparatorBorderColor: CoreTokens.color_grey_200_a, accordionGroupSeparatorBorderThickness: "1px", accordionGroupSeparatorBorderRadius: "0px", - accordionGroupSeparatorBorderStyle: CORE_TOKENS.border_solid, + accordionGroupSeparatorBorderStyle: CoreTokens.border_solid, }, alert: { - titleFontFamily: CORE_TOKENS.type_sans, - titleFontColor: CORE_TOKENS.color_black, - titleFontSize: CORE_TOKENS.type_scale_01, - titleFontStyle: CORE_TOKENS.type_normal, - titleFontWeight: CORE_TOKENS.type_bold, - titleTextTransform: CORE_TOKENS.type_uppercase, + titleFontFamily: CoreTokens.type_sans, + titleFontColor: CoreTokens.color_black, + titleFontSize: CoreTokens.type_scale_01, + titleFontStyle: CoreTokens.type_normal, + titleFontWeight: CoreTokens.type_bold, + titleTextTransform: CoreTokens.type_uppercase, titlePaddingRight: "0px", titlePaddingLeft: "0px", - inlineTextFontFamily: CORE_TOKENS.type_sans, - inlineTextFontColor: CORE_TOKENS.color_black, - inlineTextFontSize: CORE_TOKENS.type_scale_01, - inlineTextFontStyle: CORE_TOKENS.type_normal, - inlineTextFontWeight: CORE_TOKENS.type_regular, + inlineTextFontFamily: CoreTokens.type_sans, + inlineTextFontColor: CoreTokens.color_black, + inlineTextFontSize: CoreTokens.type_scale_01, + inlineTextFontStyle: CoreTokens.type_normal, + inlineTextFontWeight: CoreTokens.type_regular, inlineTextPaddingLeft: "0px", inlineTextPaddingRight: "0px", contentPaddingLeft: "0px", @@ -65,53 +65,53 @@ export const componentTokens = { contentPaddingTop: "20px", contentPaddingBottom: "30px", borderRadius: "4px", - borderStyle: CORE_TOKENS.border_solid, + borderStyle: CoreTokens.border_solid, borderThickness: "1px", - infoBorderColor: CORE_TOKENS.color_blue_800, - successBorderColor: CORE_TOKENS.color_green_700, - warningBorderColor: CORE_TOKENS.color_yellow_700, - errorBorderColor: CORE_TOKENS.color_red_700, + infoBorderColor: CoreTokens.color_blue_800, + successBorderColor: CoreTokens.color_green_700, + warningBorderColor: CoreTokens.color_yellow_700, + errorBorderColor: CoreTokens.color_red_700, iconSize: "24px", iconPaddingLeft: "0px", iconPaddingRight: "0px", - infoIconColor: CORE_TOKENS.color_blue_800, - successIconColor: CORE_TOKENS.color_green_700, - warningIconColor: CORE_TOKENS.color_yellow_700, - errorIconColor: CORE_TOKENS.color_red_700, - infoBackgroundColor: CORE_TOKENS.color_blue_100, - successBackgroundColor: CORE_TOKENS.color_green_100, - warningBackgroundColor: CORE_TOKENS.color_yellow_100, - errorBackgroundColor: CORE_TOKENS.color_red_100, - hoverActionBackgroundColor: CORE_TOKENS.color_grey_100_a, - activeActionBackgroundColor: CORE_TOKENS.color_grey_200_a, - focusActionBorderColor: CORE_TOKENS.color_blue_600, - overlayColor: CORE_TOKENS.color_grey_800_a, + infoIconColor: CoreTokens.color_blue_800, + successIconColor: CoreTokens.color_green_700, + warningIconColor: CoreTokens.color_yellow_700, + errorIconColor: CoreTokens.color_red_700, + infoBackgroundColor: CoreTokens.color_blue_100, + successBackgroundColor: CoreTokens.color_green_100, + warningBackgroundColor: CoreTokens.color_yellow_100, + errorBackgroundColor: CoreTokens.color_red_100, + hoverActionBackgroundColor: CoreTokens.color_grey_100_a, + activeActionBackgroundColor: CoreTokens.color_grey_200_a, + focusActionBorderColor: CoreTokens.color_blue_600, + overlayColor: CoreTokens.color_grey_800_a, }, box: { - backgroundColor: CORE_TOKENS.color_white, - borderRadius: CORE_TOKENS.border_radius_medium, - borderThickness: CORE_TOKENS.border_width_0, - borderStyle: CORE_TOKENS.border_none, - borderColor: CORE_TOKENS.color_transparent, + backgroundColor: CoreTokens.color_white, + borderRadius: CoreTokens.border_radius_medium, + borderThickness: CoreTokens.border_width_0, + borderStyle: CoreTokens.border_none, + borderColor: CoreTokens.color_transparent, noneShadowDepthShadowOffsetX: "none", noneShadowDepthShadowOffsetY: "none", noneShadowDepthShadowBlur: "none", noneShadowDepthShadowSpread: "none", - noneShadowDepthShadowColor: CORE_TOKENS.color_transparent, + noneShadowDepthShadowColor: CoreTokens.color_transparent, oneShadowDepthShadowOffsetX: "0px", oneShadowDepthShadowOffsetY: "3px", oneShadowDepthShadowBlur: "6px", oneShadowDepthShadowSpread: "0px", - oneShadowDepthShadowColor: CORE_TOKENS.color_grey_300_a, + oneShadowDepthShadowColor: CoreTokens.color_grey_300_a, twoShadowDepthShadowOffsetX: "0px", twoShadowDepthShadowOffsetY: "3px", twoShadowDepthShadowBlur: "10px", twoShadowDepthShadowSpread: "0px", - twoShadowDepthShadowColor: CORE_TOKENS.color_grey_300_a, + twoShadowDepthShadowColor: CoreTokens.color_grey_300_a, }, bulletedList: { - fontColor: CORE_TOKENS.color_black, - fontColorOnDark: CORE_TOKENS.color_white, + fontColor: CoreTokens.color_black, + fontColorOnDark: CoreTokens.color_white, bulletIconHeight: "1.5rem", bulletIconWidth: "1.5rem", bulletHeight: "5px", @@ -119,436 +119,436 @@ export const componentTokens = { bulletMarginRight: "0.5rem", }, button: { - labelFontLineHeight: CORE_TOKENS.type_leading_normal, - labelLetterSpacing: CORE_TOKENS.type_spacing_wide_01, - paddingLeft: CORE_TOKENS.spacing_8, - paddingRight: CORE_TOKENS.spacing_8, - paddingTop: CORE_TOKENS.spacing_8, - paddingBottom: CORE_TOKENS.spacing_8, - focusBorderColor: CORE_TOKENS.color_blue_600, - focusBorderColorOnDark: CORE_TOKENS.color_blue_600, - primaryBackgroundColor: CORE_TOKENS.color_purple_700, - primaryBackgroundColorOnDark: CORE_TOKENS.color_purple_700, - primaryFontColor: CORE_TOKENS.color_white, - primaryFontColorOnDark: CORE_TOKENS.color_white, - primaryHoverBackgroundColor: CORE_TOKENS.color_purple_800, - primaryHoverBackgroundColorOnDark: CORE_TOKENS.color_purple_600, - primaryActiveBackgroundColor: CORE_TOKENS.color_purple_900, - primaryActiveBackgroundColorOnDark: CORE_TOKENS.color_purple_800, - primaryDisabledBackgroundColor: CORE_TOKENS.color_grey_100, - primaryDisabledBackgroundColorOnDark: CORE_TOKENS.color_grey_800, - primaryDisabledFontColor: CORE_TOKENS.color_grey_500, - primaryDisabledFontColorOnDark: CORE_TOKENS.color_grey_500, - primaryBorderThickness: CORE_TOKENS.border_width_0, - primaryBorderStyle: CORE_TOKENS.border_none, - primaryBorderRadius: CORE_TOKENS.border_radius_medium, - primaryFontFamily: CORE_TOKENS.type_sans, - primaryFontSize: CORE_TOKENS.type_scale_03, - primaryFontWeight: CORE_TOKENS.type_regular, - secondaryBackgroundColor: CORE_TOKENS.color_transparent, - secondaryBackgroundColorOnDark: CORE_TOKENS.color_transparent, - secondaryFontColor: CORE_TOKENS.color_purple_700, - secondaryFontColorOnDark: CORE_TOKENS.color_white, - secondaryHoverFontColor: CORE_TOKENS.color_white, - secondaryHoverFontColorOnDark: CORE_TOKENS.color_black, - secondaryBorderColor: CORE_TOKENS.color_purple_700, - secondaryBorderColorOnDark: CORE_TOKENS.color_white, - secondaryHoverBackgroundColor: CORE_TOKENS.color_purple_700, - secondaryHoverBackgroundColorOnDark: CORE_TOKENS.color_white, - secondaryActiveBackgroundColor: CORE_TOKENS.color_purple_900, - secondaryActiveBackgroundColorOnDark: CORE_TOKENS.color_grey_200, - secondaryDisabledBackgroundColor: CORE_TOKENS.color_transparent, - secondaryDisabledBackgroundColorOnDark: CORE_TOKENS.color_transparent, - secondaryDisabledFontColor: CORE_TOKENS.color_grey_500, - secondaryDisabledFontColorOnDark: CORE_TOKENS.color_grey_500, - secondaryDisabledBorderColor: CORE_TOKENS.color_grey_500, - secondaryDisabledBorderColorOnDark: CORE_TOKENS.color_grey_500, - secondaryBorderThickness: CORE_TOKENS.border_width_1, - secondaryBorderStyle: CORE_TOKENS.border_solid, - secondaryBorderRadius: CORE_TOKENS.border_radius_medium, - secondaryFontFamily: CORE_TOKENS.type_sans, - secondaryFontSize: CORE_TOKENS.type_scale_03, - secondaryFontWeight: CORE_TOKENS.type_regular, - textBackgroundColor: CORE_TOKENS.color_transparent, - textBackgroundColorOnDark: CORE_TOKENS.color_transparent, - textFontColor: CORE_TOKENS.color_purple_700, - textFontColorOnDark: CORE_TOKENS.color_white, - textHoverBackgroundColor: CORE_TOKENS.color_purple_100, - textHoverBackgroundColorOnDark: CORE_TOKENS.color_grey_800, - textActiveBackgroundColor: CORE_TOKENS.color_purple_200, - textActiveBackgroundColorOnDark: CORE_TOKENS.color_grey_700, - textDisabledBackgroundColor: CORE_TOKENS.color_transparent, - textDisabledBackgroundColorOnDark: CORE_TOKENS.color_transparent, - textDisabledFontColor: CORE_TOKENS.color_grey_500, - textDisabledFontColorOnDark: CORE_TOKENS.color_grey_500, - textBorderThickness: CORE_TOKENS.border_width_0, - textBorderStyle: CORE_TOKENS.border_none, - textBorderRadius: CORE_TOKENS.border_radius_medium, - textFontFamily: CORE_TOKENS.type_sans, - textFontSize: CORE_TOKENS.type_scale_03, - textFontWeight: CORE_TOKENS.type_regular, + labelFontLineHeight: CoreTokens.type_leading_normal, + labelLetterSpacing: CoreTokens.type_spacing_wide_01, + paddingLeft: CoreTokens.spacing_8, + paddingRight: CoreTokens.spacing_8, + paddingTop: CoreTokens.spacing_8, + paddingBottom: CoreTokens.spacing_8, + focusBorderColor: CoreTokens.color_blue_600, + focusBorderColorOnDark: CoreTokens.color_blue_600, + primaryBackgroundColor: CoreTokens.color_purple_700, + primaryBackgroundColorOnDark: CoreTokens.color_purple_700, + primaryFontColor: CoreTokens.color_white, + primaryFontColorOnDark: CoreTokens.color_white, + primaryHoverBackgroundColor: CoreTokens.color_purple_800, + primaryHoverBackgroundColorOnDark: CoreTokens.color_purple_600, + primaryActiveBackgroundColor: CoreTokens.color_purple_900, + primaryActiveBackgroundColorOnDark: CoreTokens.color_purple_800, + primaryDisabledBackgroundColor: CoreTokens.color_grey_100, + primaryDisabledBackgroundColorOnDark: CoreTokens.color_grey_800, + primaryDisabledFontColor: CoreTokens.color_grey_500, + primaryDisabledFontColorOnDark: CoreTokens.color_grey_500, + primaryBorderThickness: CoreTokens.border_width_0, + primaryBorderStyle: CoreTokens.border_none, + primaryBorderRadius: CoreTokens.border_radius_medium, + primaryFontFamily: CoreTokens.type_sans, + primaryFontSize: CoreTokens.type_scale_03, + primaryFontWeight: CoreTokens.type_regular, + secondaryBackgroundColor: CoreTokens.color_transparent, + secondaryBackgroundColorOnDark: CoreTokens.color_transparent, + secondaryFontColor: CoreTokens.color_purple_700, + secondaryFontColorOnDark: CoreTokens.color_white, + secondaryHoverFontColor: CoreTokens.color_white, + secondaryHoverFontColorOnDark: CoreTokens.color_black, + secondaryBorderColor: CoreTokens.color_purple_700, + secondaryBorderColorOnDark: CoreTokens.color_white, + secondaryHoverBackgroundColor: CoreTokens.color_purple_700, + secondaryHoverBackgroundColorOnDark: CoreTokens.color_white, + secondaryActiveBackgroundColor: CoreTokens.color_purple_900, + secondaryActiveBackgroundColorOnDark: CoreTokens.color_grey_200, + secondaryDisabledBackgroundColor: CoreTokens.color_transparent, + secondaryDisabledBackgroundColorOnDark: CoreTokens.color_transparent, + secondaryDisabledFontColor: CoreTokens.color_grey_500, + secondaryDisabledFontColorOnDark: CoreTokens.color_grey_500, + secondaryDisabledBorderColor: CoreTokens.color_grey_500, + secondaryDisabledBorderColorOnDark: CoreTokens.color_grey_500, + secondaryBorderThickness: CoreTokens.border_width_1, + secondaryBorderStyle: CoreTokens.border_solid, + secondaryBorderRadius: CoreTokens.border_radius_medium, + secondaryFontFamily: CoreTokens.type_sans, + secondaryFontSize: CoreTokens.type_scale_03, + secondaryFontWeight: CoreTokens.type_regular, + textBackgroundColor: CoreTokens.color_transparent, + textBackgroundColorOnDark: CoreTokens.color_transparent, + textFontColor: CoreTokens.color_purple_700, + textFontColorOnDark: CoreTokens.color_white, + textHoverBackgroundColor: CoreTokens.color_purple_100, + textHoverBackgroundColorOnDark: CoreTokens.color_grey_800, + textActiveBackgroundColor: CoreTokens.color_purple_200, + textActiveBackgroundColorOnDark: CoreTokens.color_grey_700, + textDisabledBackgroundColor: CoreTokens.color_transparent, + textDisabledBackgroundColorOnDark: CoreTokens.color_transparent, + textDisabledFontColor: CoreTokens.color_grey_500, + textDisabledFontColorOnDark: CoreTokens.color_grey_500, + textBorderThickness: CoreTokens.border_width_0, + textBorderStyle: CoreTokens.border_none, + textBorderRadius: CoreTokens.border_radius_medium, + textFontFamily: CoreTokens.type_sans, + textFontSize: CoreTokens.type_scale_03, + textFontWeight: CoreTokens.type_regular, }, card: { height: "220px", width: "400px", }, checkbox: { - backgroundColorChecked: CORE_TOKENS.color_blue_800, - backgroundColorCheckedOnDark: CORE_TOKENS.color_grey_200, - hoverBackgroundColorChecked: CORE_TOKENS.color_blue_900, - hoverBackgroundColorCheckedOnDark: CORE_TOKENS.color_white, - disabledBackgroundColorChecked: CORE_TOKENS.color_grey_500, - disabledBackgroundColorCheckedOnDark: CORE_TOKENS.color_grey_800, - readOnlyBackgroundColorChecked: CORE_TOKENS.color_grey_500, - hoverReadOnlyBackgroundColorChecked: CORE_TOKENS.color_grey_600, - borderColor: CORE_TOKENS.color_blue_800, - borderColorOnDark: CORE_TOKENS.color_grey_200, - hoverBorderColor: CORE_TOKENS.color_blue_900, - hoverBorderColorOnDark: CORE_TOKENS.color_white, - disabledBorderColor: CORE_TOKENS.color_grey_500, - disabledBorderColorOnDark: CORE_TOKENS.color_grey_800, - readOnlyBorderColor: CORE_TOKENS.color_grey_500, - hoverReadOnlyBorderColor: CORE_TOKENS.color_grey_600, - checkColor: CORE_TOKENS.color_white, - checkColorOnDark: CORE_TOKENS.color_black, - disabledCheckColor: CORE_TOKENS.color_white, - disabledCheckColorOnDark: CORE_TOKENS.color_grey_500, - readOnlyCheckColor: CORE_TOKENS.color_white, - fontFamily: CORE_TOKENS.type_sans, - fontSize: CORE_TOKENS.type_scale_02, - fontWeight: CORE_TOKENS.type_regular, - fontColor: CORE_TOKENS.color_black, - fontColorOnDark: CORE_TOKENS.color_white, - disabledFontColor: CORE_TOKENS.color_grey_500, - disabledFontColorOnDark: CORE_TOKENS.color_grey_500, - focusColor: CORE_TOKENS.color_blue_600, - focusColorOnDark: CORE_TOKENS.color_blue_600, + backgroundColorChecked: CoreTokens.color_blue_800, + backgroundColorCheckedOnDark: CoreTokens.color_grey_200, + hoverBackgroundColorChecked: CoreTokens.color_blue_900, + hoverBackgroundColorCheckedOnDark: CoreTokens.color_white, + disabledBackgroundColorChecked: CoreTokens.color_grey_500, + disabledBackgroundColorCheckedOnDark: CoreTokens.color_grey_800, + readOnlyBackgroundColorChecked: CoreTokens.color_grey_500, + hoverReadOnlyBackgroundColorChecked: CoreTokens.color_grey_600, + borderColor: CoreTokens.color_blue_800, + borderColorOnDark: CoreTokens.color_grey_200, + hoverBorderColor: CoreTokens.color_blue_900, + hoverBorderColorOnDark: CoreTokens.color_white, + disabledBorderColor: CoreTokens.color_grey_500, + disabledBorderColorOnDark: CoreTokens.color_grey_800, + readOnlyBorderColor: CoreTokens.color_grey_500, + hoverReadOnlyBorderColor: CoreTokens.color_grey_600, + checkColor: CoreTokens.color_white, + checkColorOnDark: CoreTokens.color_black, + disabledCheckColor: CoreTokens.color_white, + disabledCheckColorOnDark: CoreTokens.color_grey_500, + readOnlyCheckColor: CoreTokens.color_white, + fontFamily: CoreTokens.type_sans, + fontSize: CoreTokens.type_scale_02, + fontWeight: CoreTokens.type_regular, + fontColor: CoreTokens.color_black, + fontColorOnDark: CoreTokens.color_white, + disabledFontColor: CoreTokens.color_grey_500, + disabledFontColorOnDark: CoreTokens.color_grey_500, + focusColor: CoreTokens.color_blue_600, + focusColorOnDark: CoreTokens.color_blue_600, checkLabelSpacing: "8px", }, chip: { - backgroundColor: CORE_TOKENS.color_grey_200, - disabledBackgroundColor: CORE_TOKENS.color_grey_100, - fontFamily: CORE_TOKENS.type_sans, - fontSize: CORE_TOKENS.type_scale_03, - fontStyle: CORE_TOKENS.type_normal, - fontWeight: CORE_TOKENS.type_regular, - fontColor: CORE_TOKENS.color_black, - disabledFontColor: CORE_TOKENS.color_grey_500, - borderColor: CORE_TOKENS.color_transparent, + backgroundColor: CoreTokens.color_grey_200, + disabledBackgroundColor: CoreTokens.color_grey_100, + fontFamily: CoreTokens.type_sans, + fontSize: CoreTokens.type_scale_03, + fontStyle: CoreTokens.type_normal, + fontWeight: CoreTokens.type_regular, + fontColor: CoreTokens.color_black, + disabledFontColor: CoreTokens.color_grey_500, + borderColor: CoreTokens.color_transparent, borderRadius: "80px", - borderThickness: CORE_TOKENS.border_width_0, - borderStyle: CORE_TOKENS.border_solid, + borderThickness: CoreTokens.border_width_0, + borderStyle: CoreTokens.border_solid, contentPaddingLeft: "16px", contentPaddingRight: "16px", contentPaddingTop: "0px", contentPaddingBottom: "0px", iconSize: "24px", iconSpacing: "8px", - iconColor: CORE_TOKENS.color_grey_800, - hoverIconColor: CORE_TOKENS.color_grey_900, - activeIconColor: CORE_TOKENS.color_black, - disabledIconColor: CORE_TOKENS.color_grey_500, - focusColor: CORE_TOKENS.color_blue_600, - focusBorderStyle: CORE_TOKENS.border_solid, - focusBorderThickness: CORE_TOKENS.border_width_2, - focusBorderRadius: CORE_TOKENS.border_radius_medium, + iconColor: CoreTokens.color_grey_800, + hoverIconColor: CoreTokens.color_grey_900, + activeIconColor: CoreTokens.color_black, + disabledIconColor: CoreTokens.color_grey_500, + focusColor: CoreTokens.color_blue_600, + focusBorderStyle: CoreTokens.border_solid, + focusBorderThickness: CoreTokens.border_width_2, + focusBorderRadius: CoreTokens.border_radius_medium, }, dateInput: { - pickerBackgroundColor: CORE_TOKENS.color_white, - pickerFontColor: CORE_TOKENS.color_black, - pickerBorderColor: CORE_TOKENS.color_grey_400, - pickerSelectedBackgroundColor: CORE_TOKENS.color_purple_700, - pickerSelectedFontColor: CORE_TOKENS.color_white, - pickerHoverBackgroundColor: CORE_TOKENS.color_purple_200, - pickerHoverFontColor: CORE_TOKENS.color_black, - pickerActiveBackgroundColor: CORE_TOKENS.color_purple_800, - pickerActiveFontColor: CORE_TOKENS.color_white, - pickerNonCurrentMonthFontColor: CORE_TOKENS.color_grey_500, - pickerCurrentDateBorderColor: CORE_TOKENS.color_purple_300, - pickerCurrentDateFontColor: CORE_TOKENS.color_black, - pickerCurrentYearFontColor: CORE_TOKENS.color_purple_700, - pickerHeaderBackgroundColor: CORE_TOKENS.color_transparent, - pickerHeaderFontColor: CORE_TOKENS.color_black, - pickerHeaderHoverBackgroundColor: CORE_TOKENS.color_purple_200, - pickerHeaderHoverFontColor: CORE_TOKENS.color_black, - pickerHeaderActiveBackgroundColor: CORE_TOKENS.color_purple_800, - pickerHeaderActiveFontColor: CORE_TOKENS.color_white, - pickerFocusColor: CORE_TOKENS.color_blue_600, - pickerBorderWidth: CORE_TOKENS.border_width_1, - pickerBorderStyle: CORE_TOKENS.border_solid, - pickerFocusWidth: CORE_TOKENS.border_width_2, - pickerCurrentDateBorderWidth: CORE_TOKENS.border_width_1, - pickerFontFamily: CORE_TOKENS.type_sans, - pickerFontSize: CORE_TOKENS.type_scale_02, - pickerFontWeight: CORE_TOKENS.type_regular, - pickerInteractedYearFontSize: CORE_TOKENS.type_scale_05, - pickerHeaderFontSize: CORE_TOKENS.type_scale_02, + pickerBackgroundColor: CoreTokens.color_white, + pickerFontColor: CoreTokens.color_black, + pickerBorderColor: CoreTokens.color_grey_400, + pickerSelectedBackgroundColor: CoreTokens.color_purple_700, + pickerSelectedFontColor: CoreTokens.color_white, + pickerHoverBackgroundColor: CoreTokens.color_purple_200, + pickerHoverFontColor: CoreTokens.color_black, + pickerActiveBackgroundColor: CoreTokens.color_purple_800, + pickerActiveFontColor: CoreTokens.color_white, + pickerNonCurrentMonthFontColor: CoreTokens.color_grey_500, + pickerCurrentDateBorderColor: CoreTokens.color_purple_300, + pickerCurrentDateFontColor: CoreTokens.color_black, + pickerCurrentYearFontColor: CoreTokens.color_purple_700, + pickerHeaderBackgroundColor: CoreTokens.color_transparent, + pickerHeaderFontColor: CoreTokens.color_black, + pickerHeaderHoverBackgroundColor: CoreTokens.color_purple_200, + pickerHeaderHoverFontColor: CoreTokens.color_black, + pickerHeaderActiveBackgroundColor: CoreTokens.color_purple_800, + pickerHeaderActiveFontColor: CoreTokens.color_white, + pickerFocusColor: CoreTokens.color_blue_600, + pickerBorderWidth: CoreTokens.border_width_1, + pickerBorderStyle: CoreTokens.border_solid, + pickerFocusWidth: CoreTokens.border_width_2, + pickerCurrentDateBorderWidth: CoreTokens.border_width_1, + pickerFontFamily: CoreTokens.type_sans, + pickerFontSize: CoreTokens.type_scale_02, + pickerFontWeight: CoreTokens.type_regular, + pickerInteractedYearFontSize: CoreTokens.type_scale_05, + pickerHeaderFontSize: CoreTokens.type_scale_02, }, dialog: { - overlayColor: CORE_TOKENS.color_grey_800_a, - backgroundColor: CORE_TOKENS.color_white, + overlayColor: CoreTokens.color_grey_800_a, + backgroundColor: CoreTokens.color_white, closeIconWidth: "24px", closeIconHeight: "24px", closeIconTopPosition: "20px", closeIconRightPosition: "20px", - closeIconBackgroundColor: CORE_TOKENS.color_transparent, - closeIconBorderColor: CORE_TOKENS.border_none, - closeIconColor: CORE_TOKENS.color_black, - closeIconBorderThickness: CORE_TOKENS.border_width_0, - closeIconBorderStyle: CORE_TOKENS.border_solid, + closeIconBackgroundColor: CoreTokens.color_transparent, + closeIconBorderColor: CoreTokens.border_none, + closeIconColor: CoreTokens.color_black, + closeIconBorderThickness: CoreTokens.border_width_0, + closeIconBorderStyle: CoreTokens.border_solid, closeIconBorderRadius: "2px", boxShadowOffsetX: "0px", boxShadowOffsetY: "1px", boxShadowBlur: "3px", - boxShadowColor: CORE_TOKENS.color_grey_300_a, + boxShadowColor: CoreTokens.color_grey_300_a, }, dropdown: { - buttonBackgroundColor: CORE_TOKENS.color_white, - hoverButtonBackgroundColor: CORE_TOKENS.color_grey_100, - activeButtonBackgroundColor: CORE_TOKENS.color_grey_300, - buttonFontFamily: CORE_TOKENS.type_sans, - buttonFontSize: CORE_TOKENS.type_scale_03, - buttonFontStyle: CORE_TOKENS.type_normal, - buttonFontWeight: CORE_TOKENS.type_regular, - buttonFontColor: CORE_TOKENS.color_black, + buttonBackgroundColor: CoreTokens.color_white, + hoverButtonBackgroundColor: CoreTokens.color_grey_100, + activeButtonBackgroundColor: CoreTokens.color_grey_300, + buttonFontFamily: CoreTokens.type_sans, + buttonFontSize: CoreTokens.type_scale_03, + buttonFontStyle: CoreTokens.type_normal, + buttonFontWeight: CoreTokens.type_regular, + buttonFontColor: CoreTokens.color_black, buttonIconSize: "20px", buttonIconSpacing: "10px", - buttonIconColor: CORE_TOKENS.color_black, + buttonIconColor: CoreTokens.color_black, buttonPaddingTop: "0px", buttonPaddingBottom: "0px", buttonPaddingLeft: "16px", buttonPaddingRight: "16px", - disabledColor: CORE_TOKENS.color_grey_500, - disabledButtonBackgroundColor: CORE_TOKENS.color_transparent, - disabledBorderColor: CORE_TOKENS.color_transparent, - optionBackgroundColor: CORE_TOKENS.color_white, - hoverOptionBackgroundColor: CORE_TOKENS.color_grey_100, - activeOptionBackgroundColor: CORE_TOKENS.color_grey_300, - optionFontFamily: CORE_TOKENS.type_sans, - optionFontSize: CORE_TOKENS.type_scale_root, - optionFontStyle: CORE_TOKENS.type_normal, - optionFontWeight: CORE_TOKENS.type_regular, - optionFontColor: CORE_TOKENS.color_black, + disabledColor: CoreTokens.color_grey_500, + disabledButtonBackgroundColor: CoreTokens.color_transparent, + disabledBorderColor: CoreTokens.color_transparent, + optionBackgroundColor: CoreTokens.color_white, + hoverOptionBackgroundColor: CoreTokens.color_grey_100, + activeOptionBackgroundColor: CoreTokens.color_grey_300, + optionFontFamily: CoreTokens.type_sans, + optionFontSize: CoreTokens.type_scale_root, + optionFontStyle: CoreTokens.type_normal, + optionFontWeight: CoreTokens.type_regular, + optionFontColor: CoreTokens.color_black, optionIconSize: "20px", optionIconSpacing: "10px", - optionIconColor: CORE_TOKENS.color_black, + optionIconColor: CoreTokens.color_black, optionPaddingTop: "6px", optionPaddingBottom: "6px", optionPaddingLeft: "16px", optionPaddingRight: "16px", caretIconSize: "24px", - caretIconColor: CORE_TOKENS.color_black, + caretIconColor: CoreTokens.color_black, caretIconSpacing: "12px", borderRadius: "4px", - borderStyle: CORE_TOKENS.border_none, - borderThickness: CORE_TOKENS.border_width_0, - borderColor: CORE_TOKENS.color_transparent, - scrollBarThumbColor: CORE_TOKENS.color_grey_700, - scrollBarTrackColor: CORE_TOKENS.color_grey_300, - focusColor: CORE_TOKENS.color_blue_600, + borderStyle: CoreTokens.border_none, + borderThickness: CoreTokens.border_width_0, + borderColor: CoreTokens.color_transparent, + scrollBarThumbColor: CoreTokens.color_grey_700, + scrollBarTrackColor: CoreTokens.color_grey_300, + focusColor: CoreTokens.color_blue_600, }, fileInput: { - dropBorderColor: CORE_TOKENS.color_black, - fileItemBorderColor: CORE_TOKENS.color_grey_300, - fileNameFontColor: CORE_TOKENS.color_black, - labelFontColor: CORE_TOKENS.color_black, - helperTextFontColor: CORE_TOKENS.color_black, - dropLabelFontColor: CORE_TOKENS.color_black, - disabledLabelFontColor: CORE_TOKENS.color_grey_500, - disabledHelperTextFontcolor: CORE_TOKENS.color_grey_500, - disabledDropLabelFontColor: CORE_TOKENS.color_grey_500, - focusDropBorderColor: CORE_TOKENS.color_blue_600, - disabledDropBorderColor: CORE_TOKENS.color_grey_500, - dragoverDropBackgroundColor: CORE_TOKENS.color_blue_50, - activeFileItemIconBackgrounColor: CORE_TOKENS.color_grey_300, - errorFileItemBorderColor: CORE_TOKENS.color_red_700, - errorFileItemBackgroundColor: CORE_TOKENS.color_red_50, - errorFilePreviewBackgroundColor: CORE_TOKENS.color_red_200, - errorFileItemIconColor: CORE_TOKENS.color_red_700, - fileItemIconBackgroundColor: CORE_TOKENS.color_grey_100, - deleteFileItemColor: CORE_TOKENS.color_black, - errorMessageFontColor: CORE_TOKENS.color_red_700, - labelFontFamily: CORE_TOKENS.type_sans, - labelFontSize: CORE_TOKENS.type_scale_02, - labelFontWeight: CORE_TOKENS.type_semibold, - labelLineHeight: CORE_TOKENS.type_leading_loose_01, - fileItemFontFamily: CORE_TOKENS.type_sans, - fileItemFontSize: CORE_TOKENS.type_scale_02, - fileItemFontWeight: CORE_TOKENS.type_regular, - fileItemLineHeight: CORE_TOKENS.type_leading_normal, - helperTextFontFamily: CORE_TOKENS.type_sans, - helperTextFontSize: CORE_TOKENS.type_scale_01, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextLineHeight: CORE_TOKENS.type_leading_normal, - dropLabelFontFamily: CORE_TOKENS.type_sans, - dropLabelFontSize: CORE_TOKENS.type_scale_03, - dropLabelFontWeight: CORE_TOKENS.type_regular, - errorMessageFontFamily: CORE_TOKENS.type_sans, - errorMessageFontSize: CORE_TOKENS.type_scale_01, - errorMessageFontWeight: CORE_TOKENS.type_regular, - errorMessageLineHeight: CORE_TOKENS.type_leading_normal, - dropBorderThickness: CORE_TOKENS.border_width_1, - dropBorderStyle: CORE_TOKENS.border_dashed, - dropBorderRadius: CORE_TOKENS.border_radius_large, - fileItemBorderThickness: CORE_TOKENS.border_width_1, - fileItemBorderStyle: CORE_TOKENS.border_solid, - fileItemBorderRadius: CORE_TOKENS.border_radius_medium, - hoverDeleteFileItemBackgroundColor: CORE_TOKENS.color_grey_100_a, - activeDeleteFileItemBackgroundColor: CORE_TOKENS.color_grey_300_a, - focusDeleteFileItemBorderColor: CORE_TOKENS.color_blue_600, - filePreviewBackgroundColor: CORE_TOKENS.color_grey_100, - filePreviewIconColor: CORE_TOKENS.color_grey_600, - errorFilePreviewIconColor: CORE_TOKENS.color_red_700, + dropBorderColor: CoreTokens.color_black, + fileItemBorderColor: CoreTokens.color_grey_300, + fileNameFontColor: CoreTokens.color_black, + labelFontColor: CoreTokens.color_black, + helperTextFontColor: CoreTokens.color_black, + dropLabelFontColor: CoreTokens.color_black, + disabledLabelFontColor: CoreTokens.color_grey_500, + disabledHelperTextFontcolor: CoreTokens.color_grey_500, + disabledDropLabelFontColor: CoreTokens.color_grey_500, + focusDropBorderColor: CoreTokens.color_blue_600, + disabledDropBorderColor: CoreTokens.color_grey_500, + dragoverDropBackgroundColor: CoreTokens.color_blue_50, + activeFileItemIconBackgrounColor: CoreTokens.color_grey_300, + errorFileItemBorderColor: CoreTokens.color_red_700, + errorFileItemBackgroundColor: CoreTokens.color_red_50, + errorFilePreviewBackgroundColor: CoreTokens.color_red_200, + errorFileItemIconColor: CoreTokens.color_red_700, + fileItemIconBackgroundColor: CoreTokens.color_grey_100, + deleteFileItemColor: CoreTokens.color_black, + errorMessageFontColor: CoreTokens.color_red_700, + labelFontFamily: CoreTokens.type_sans, + labelFontSize: CoreTokens.type_scale_02, + labelFontWeight: CoreTokens.type_semibold, + labelLineHeight: CoreTokens.type_leading_loose_01, + fileItemFontFamily: CoreTokens.type_sans, + fileItemFontSize: CoreTokens.type_scale_02, + fileItemFontWeight: CoreTokens.type_regular, + fileItemLineHeight: CoreTokens.type_leading_normal, + helperTextFontFamily: CoreTokens.type_sans, + helperTextFontSize: CoreTokens.type_scale_01, + helperTextFontWeight: CoreTokens.type_regular, + helperTextLineHeight: CoreTokens.type_leading_normal, + dropLabelFontFamily: CoreTokens.type_sans, + dropLabelFontSize: CoreTokens.type_scale_03, + dropLabelFontWeight: CoreTokens.type_regular, + errorMessageFontFamily: CoreTokens.type_sans, + errorMessageFontSize: CoreTokens.type_scale_01, + errorMessageFontWeight: CoreTokens.type_regular, + errorMessageLineHeight: CoreTokens.type_leading_normal, + dropBorderThickness: CoreTokens.border_width_1, + dropBorderStyle: CoreTokens.border_dashed, + dropBorderRadius: CoreTokens.border_radius_large, + fileItemBorderThickness: CoreTokens.border_width_1, + fileItemBorderStyle: CoreTokens.border_solid, + fileItemBorderRadius: CoreTokens.border_radius_medium, + hoverDeleteFileItemBackgroundColor: CoreTokens.color_grey_100_a, + activeDeleteFileItemBackgroundColor: CoreTokens.color_grey_300_a, + focusDeleteFileItemBorderColor: CoreTokens.color_blue_600, + filePreviewBackgroundColor: CoreTokens.color_grey_100, + filePreviewIconColor: CoreTokens.color_grey_600, + errorFilePreviewIconColor: CoreTokens.color_red_700, }, footer: { height: "124px", - backgroundColor: CORE_TOKENS.color_black, - bottomLinksDividerColor: CORE_TOKENS.color_blue_600, + backgroundColor: CoreTokens.color_black, + bottomLinksDividerColor: CoreTokens.color_blue_600, bottomLinksDividerThickness: "1px", - bottomLinksDividerStyle: CORE_TOKENS.border_solid, + bottomLinksDividerStyle: CoreTokens.border_solid, bottomLinksDividerSpacing: "8px", - bottomLinksFontFamily: CORE_TOKENS.type_sans, - bottomLinksFontSize: CORE_TOKENS.type_scale_01, - bottomLinksFontStyle: CORE_TOKENS.type_normal, - bottomLinksFontWeight: CORE_TOKENS.type_regular, - bottomLinksFontColor: CORE_TOKENS.color_white, - bottomLinksTextDecoration: CORE_TOKENS.type_no_line, - copyrightFontFamily: CORE_TOKENS.type_sans, - copyrightFontSize: CORE_TOKENS.type_scale_01, - copyrightFontStyle: CORE_TOKENS.type_normal, - copyrightFontWeight: CORE_TOKENS.type_regular, - copyrightFontColor: CORE_TOKENS.color_white, + bottomLinksFontFamily: CoreTokens.type_sans, + bottomLinksFontSize: CoreTokens.type_scale_01, + bottomLinksFontStyle: CoreTokens.type_normal, + bottomLinksFontWeight: CoreTokens.type_regular, + bottomLinksFontColor: CoreTokens.color_white, + bottomLinksTextDecoration: CoreTokens.type_no_line, + copyrightFontFamily: CoreTokens.type_sans, + copyrightFontSize: CoreTokens.type_scale_01, + copyrightFontStyle: CoreTokens.type_normal, + copyrightFontWeight: CoreTokens.type_regular, + copyrightFontColor: CoreTokens.color_white, logo: "", logoHeight: "32px", logoWidth: "auto", socialLinksSize: "24px", socialLinksGutter: "16px", - socialLinksColor: CORE_TOKENS.color_white, + socialLinksColor: CoreTokens.color_white, }, header: { - backgroundColor: CORE_TOKENS.color_white, - hamburguerFocusColor: CORE_TOKENS.color_blue_600, - hamburguerFontFamily: CORE_TOKENS.type_sans, - hamburguerFontStyle: CORE_TOKENS.type_normal, - hamburguerFontColor: CORE_TOKENS.color_black, + backgroundColor: CoreTokens.color_white, + hamburguerFocusColor: CoreTokens.color_blue_600, + hamburguerFontFamily: CoreTokens.type_sans, + hamburguerFontStyle: CoreTokens.type_normal, + hamburguerFontColor: CoreTokens.color_black, hamburguerFontSize: "10px", - hamburguerFontWeight: CORE_TOKENS.type_semibold, - hamburguerTextTransform: CORE_TOKENS.type_uppercase, - hamburguerIconColor: CORE_TOKENS.color_black, - hamburguerHoverColor: CORE_TOKENS.color_grey_200, + hamburguerFontWeight: CoreTokens.type_semibold, + hamburguerTextTransform: CoreTokens.type_uppercase, + hamburguerIconColor: CoreTokens.color_black, + hamburguerHoverColor: CoreTokens.color_grey_200, logo: "", logoResponsive: "", logoHeight: "40px", logoWidth: "auto", - menuBackgroundColor: CORE_TOKENS.color_white, + menuBackgroundColor: CoreTokens.color_white, menuZindex: "2000", menuTabletWidth: "60vw", menuMobileWidth: "100vw", minHeight: "64px", - overlayColor: CORE_TOKENS.color_grey_800_a, + overlayColor: CoreTokens.color_grey_800_a, overlayOpacity: "0.7", overlayZindex: "1600", paddingTop: "0px", paddingBottom: "0px", paddingRight: "24px", paddingLeft: "24px", - underlinedColor: CORE_TOKENS.color_black, + underlinedColor: CoreTokens.color_black, underlinedThickness: "2px", - underlinedStyle: CORE_TOKENS.border_solid, - contentColor: CORE_TOKENS.color_black, - contentColorOnDark: CORE_TOKENS.color_white, + underlinedStyle: CoreTokens.border_solid, + contentColor: CoreTokens.color_black, + contentColorOnDark: CoreTokens.color_white, }, heading: { - level1FontColor: CORE_TOKENS.inherit, - level1FontFamily: CORE_TOKENS.type_sans, - level1FontSize: CORE_TOKENS.type_scale_07, - level1FontStyle: CORE_TOKENS.type_normal, - level1FontWeight: CORE_TOKENS.type_semibold, - level1LineHeight: CORE_TOKENS.type_leading_compact_01, - level1LetterSpacing: CORE_TOKENS.type_spacing_tight_01, - level2FontColor: CORE_TOKENS.inherit, - level2FontFamily: CORE_TOKENS.type_sans, - level2FontSize: CORE_TOKENS.type_scale_05, - level2FontStyle: CORE_TOKENS.type_normal, - level2FontWeight: CORE_TOKENS.type_semibold, - level2LineHeight: CORE_TOKENS.type_leading_normal, - level2LetterSpacing: CORE_TOKENS.type_spacing_normal, - level3FontColor: CORE_TOKENS.inherit, - level3FontFamily: CORE_TOKENS.type_sans, - level3FontSize: CORE_TOKENS.type_scale_04, - level3FontStyle: CORE_TOKENS.type_normal, - level3FontWeight: CORE_TOKENS.type_semibold, - level3LineHeight: CORE_TOKENS.type_leading_compact_01, - level3LetterSpacing: CORE_TOKENS.type_spacing_wide_01, - level4FontColor: CORE_TOKENS.inherit, - level4FontFamily: CORE_TOKENS.type_sans, - level4FontSize: CORE_TOKENS.type_scale_03, - level4FontStyle: CORE_TOKENS.type_normal, - level4FontWeight: CORE_TOKENS.type_semibold, - level4LineHeight: CORE_TOKENS.type_leading_normal, - level4LetterSpacing: CORE_TOKENS.type_spacing_normal, - level5FontColor: CORE_TOKENS.inherit, - level5FontFamily: CORE_TOKENS.type_sans, - level5FontSize: CORE_TOKENS.type_scale_02, - level5FontStyle: CORE_TOKENS.type_normal, - level5FontWeight: CORE_TOKENS.type_semibold, - level5LineHeight: CORE_TOKENS.type_leading_normal, - level5LetterSpacing: CORE_TOKENS.type_spacing_wide_01, + level1FontColor: CoreTokens.inherit, + level1FontFamily: CoreTokens.type_sans, + level1FontSize: CoreTokens.type_scale_07, + level1FontStyle: CoreTokens.type_normal, + level1FontWeight: CoreTokens.type_semibold, + level1LineHeight: CoreTokens.type_leading_compact_01, + level1LetterSpacing: CoreTokens.type_spacing_tight_01, + level2FontColor: CoreTokens.inherit, + level2FontFamily: CoreTokens.type_sans, + level2FontSize: CoreTokens.type_scale_05, + level2FontStyle: CoreTokens.type_normal, + level2FontWeight: CoreTokens.type_semibold, + level2LineHeight: CoreTokens.type_leading_normal, + level2LetterSpacing: CoreTokens.type_spacing_normal, + level3FontColor: CoreTokens.inherit, + level3FontFamily: CoreTokens.type_sans, + level3FontSize: CoreTokens.type_scale_04, + level3FontStyle: CoreTokens.type_normal, + level3FontWeight: CoreTokens.type_semibold, + level3LineHeight: CoreTokens.type_leading_compact_01, + level3LetterSpacing: CoreTokens.type_spacing_wide_01, + level4FontColor: CoreTokens.inherit, + level4FontFamily: CoreTokens.type_sans, + level4FontSize: CoreTokens.type_scale_03, + level4FontStyle: CoreTokens.type_normal, + level4FontWeight: CoreTokens.type_semibold, + level4LineHeight: CoreTokens.type_leading_normal, + level4LetterSpacing: CoreTokens.type_spacing_normal, + level5FontColor: CoreTokens.inherit, + level5FontFamily: CoreTokens.type_sans, + level5FontSize: CoreTokens.type_scale_02, + level5FontStyle: CoreTokens.type_normal, + level5FontWeight: CoreTokens.type_semibold, + level5LineHeight: CoreTokens.type_leading_normal, + level5LetterSpacing: CoreTokens.type_spacing_wide_01, }, image: { - captionFontColor: CORE_TOKENS.color_grey_900, - captionFontFamily: CORE_TOKENS.type_sans, - captionFontSize: CORE_TOKENS.type_scale_02, - captionFontStyle: CORE_TOKENS.type_normal, - captionFontWeight: CORE_TOKENS.type_regular, - captionLineHeight: CORE_TOKENS.type_leading_normal, + captionFontColor: CoreTokens.color_grey_900, + captionFontFamily: CoreTokens.type_sans, + captionFontSize: CoreTokens.type_scale_02, + captionFontStyle: CoreTokens.type_normal, + captionFontWeight: CoreTokens.type_regular, + captionLineHeight: CoreTokens.type_leading_normal, }, link: { - fontColor: CORE_TOKENS.color_blue_800, - fontFamily: CORE_TOKENS.inherit, - fontSize: CORE_TOKENS.inherit, - fontStyle: CORE_TOKENS.type_normal, - fontWeight: CORE_TOKENS.type_regular, + fontColor: CoreTokens.color_blue_800, + fontFamily: CoreTokens.inherit, + fontSize: CoreTokens.inherit, + fontStyle: CoreTokens.type_normal, + fontWeight: CoreTokens.type_regular, iconSize: "16px", iconSpacing: "4px", underlineSpacing: "0px", - underlineStyle: CORE_TOKENS.border_solid, + underlineStyle: CoreTokens.border_solid, underlineThickness: "1px", - disabledFontColor: CORE_TOKENS.color_grey_500, - hoverFontColor: CORE_TOKENS.color_blue_800, - hoverUnderlineColor: CORE_TOKENS.color_blue_800, - visitedFontColor: CORE_TOKENS.color_purple_700, - visitedUnderlineColor: CORE_TOKENS.color_purple_700, - activeFontColor: CORE_TOKENS.color_black, - activeUnderlineColor: CORE_TOKENS.color_black, - focusColor: CORE_TOKENS.color_blue_600, + disabledFontColor: CoreTokens.color_grey_500, + hoverFontColor: CoreTokens.color_blue_800, + hoverUnderlineColor: CoreTokens.color_blue_800, + visitedFontColor: CoreTokens.color_purple_700, + visitedUnderlineColor: CoreTokens.color_purple_700, + activeFontColor: CoreTokens.color_black, + activeUnderlineColor: CoreTokens.color_black, + focusColor: CoreTokens.color_blue_600, }, navTabs: { - selectedBackgroundColor: CORE_TOKENS.color_white, - unselectedBackgroundColor: CORE_TOKENS.color_white, - hoverBackgroundColor: CORE_TOKENS.color_grey_100, - pressedBackgroundColor: CORE_TOKENS.color_grey_200, - selectedFontColor: CORE_TOKENS.color_grey_700, - unselectedFontColor: CORE_TOKENS.color_grey_700, - disabledFontColor: CORE_TOKENS.color_grey_500, - focusOutline: CORE_TOKENS.color_blue_600, - selectedUnderlineColor: CORE_TOKENS.color_purple_700, - dividerColor: CORE_TOKENS.color_grey_400, - fontFamily: CORE_TOKENS.type_sans, - fontSize: CORE_TOKENS.type_scale_03, - fontStyle: CORE_TOKENS.type_normal, - fontWeight: CORE_TOKENS.type_regular, - selectedIconColor: CORE_TOKENS.color_grey_700, - unselectedIconColor: CORE_TOKENS.color_grey_700, - disabledIconColor: CORE_TOKENS.color_grey_500, + selectedBackgroundColor: CoreTokens.color_white, + unselectedBackgroundColor: CoreTokens.color_white, + hoverBackgroundColor: CoreTokens.color_grey_100, + pressedBackgroundColor: CoreTokens.color_grey_200, + selectedFontColor: CoreTokens.color_grey_700, + unselectedFontColor: CoreTokens.color_grey_700, + disabledFontColor: CoreTokens.color_grey_500, + focusOutline: CoreTokens.color_blue_600, + selectedUnderlineColor: CoreTokens.color_purple_700, + dividerColor: CoreTokens.color_grey_400, + fontFamily: CoreTokens.type_sans, + fontSize: CoreTokens.type_scale_03, + fontStyle: CoreTokens.type_normal, + fontWeight: CoreTokens.type_regular, + selectedIconColor: CoreTokens.color_grey_700, + unselectedIconColor: CoreTokens.color_grey_700, + disabledIconColor: CoreTokens.color_grey_500, }, paginator: { - backgroundColor: CORE_TOKENS.color_grey_100, - fontColor: CORE_TOKENS.color_black, - fontFamily: CORE_TOKENS.type_sans, - fontSize: CORE_TOKENS.type_scale_02, - fontStyle: CORE_TOKENS.type_normal, - fontWeight: CORE_TOKENS.type_regular, + backgroundColor: CoreTokens.color_grey_100, + fontColor: CoreTokens.color_black, + fontFamily: CoreTokens.type_sans, + fontSize: CoreTokens.type_scale_02, + fontStyle: CoreTokens.type_normal, + fontWeight: CoreTokens.type_regular, fontTextTransform: "none", verticalPadding: "0.75rem", horizontalPadding: "2rem", @@ -562,340 +562,340 @@ export const componentTokens = { totalItemsContainerMarginLeft: "0px", }, paragraph: { - fontColor: CORE_TOKENS.color_black, - fontColorOnDark: CORE_TOKENS.color_white, + fontColor: CoreTokens.color_black, + fontColorOnDark: CoreTokens.color_white, display: "block", - fontSize: CORE_TOKENS.type_scale_03, - fontWeight: CORE_TOKENS.type_regular, + fontSize: CoreTokens.type_scale_03, + fontWeight: CoreTokens.type_regular, }, progressBar: { - trackLineColor: CORE_TOKENS.color_purple_700, - trackLineColorOnDark: CORE_TOKENS.color_purple_500, - totalLineColor: CORE_TOKENS.color_grey_200, - labelFontFamily: CORE_TOKENS.type_sans, - labelFontSize: CORE_TOKENS.type_scale_01, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_regular, - labelFontColor: CORE_TOKENS.color_black, - labelFontColorOnDark: CORE_TOKENS.color_white, - labelFontTextTransform: CORE_TOKENS.type_uppercase, - valueFontFamily: CORE_TOKENS.type_sans, - valueFontSize: CORE_TOKENS.type_scale_01, - valueFontStyle: CORE_TOKENS.type_normal, - valueFontWeight: CORE_TOKENS.type_regular, - valueFontColor: CORE_TOKENS.color_black, - valueFontColorOnDark: CORE_TOKENS.color_white, - valueFontTextTransform: CORE_TOKENS.type_uppercase, - helperTextFontColor: CORE_TOKENS.color_black, - helperTextFontColorOnDark: CORE_TOKENS.color_white, - helperTextFontSize: CORE_TOKENS.type_scale_01, - helperTextFontStyle: CORE_TOKENS.type_normal, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextFontFamily: CORE_TOKENS.type_sans, + trackLineColor: CoreTokens.color_purple_700, + trackLineColorOnDark: CoreTokens.color_purple_500, + totalLineColor: CoreTokens.color_grey_200, + labelFontFamily: CoreTokens.type_sans, + labelFontSize: CoreTokens.type_scale_01, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_regular, + labelFontColor: CoreTokens.color_black, + labelFontColorOnDark: CoreTokens.color_white, + labelFontTextTransform: CoreTokens.type_uppercase, + valueFontFamily: CoreTokens.type_sans, + valueFontSize: CoreTokens.type_scale_01, + valueFontStyle: CoreTokens.type_normal, + valueFontWeight: CoreTokens.type_regular, + valueFontColor: CoreTokens.color_black, + valueFontColorOnDark: CoreTokens.color_white, + valueFontTextTransform: CoreTokens.type_uppercase, + helperTextFontColor: CoreTokens.color_black, + helperTextFontColorOnDark: CoreTokens.color_white, + helperTextFontSize: CoreTokens.type_scale_01, + helperTextFontStyle: CoreTokens.type_normal, + helperTextFontWeight: CoreTokens.type_regular, + helperTextFontFamily: CoreTokens.type_sans, thickness: "9px", borderRadius: "5px", - overlayColor: CORE_TOKENS.color_grey_800_a, - overlayFontColor: CORE_TOKENS.color_white, + overlayColor: CoreTokens.color_grey_800_a, + overlayFontColor: CoreTokens.color_white, }, quickNav: { - fontColor: CORE_TOKENS.color_grey_700, - hoverFontColor: CORE_TOKENS.color_purple_600, - dividerBorderColor: CORE_TOKENS.color_grey_400, - focusBorderColor: CORE_TOKENS.color_blue_600, - focusBorderStyle: CORE_TOKENS.border_solid, - focusBorderThickness: CORE_TOKENS.border_width_2, - focusBorderRadius: CORE_TOKENS.border_width_2, - paddingTop: CORE_TOKENS.spacing_8, - paddingBottom: CORE_TOKENS.spacing_8, - paddingLeft: CORE_TOKENS.spacing_16, - paddingRight: CORE_TOKENS.spacing_16, - fontFamily: CORE_TOKENS.type_sans, - fontSize: CORE_TOKENS.type_scale_02, - fontStyle: CORE_TOKENS.type_normal, - fontWeight: CORE_TOKENS.type_regular, + fontColor: CoreTokens.color_grey_700, + hoverFontColor: CoreTokens.color_purple_600, + dividerBorderColor: CoreTokens.color_grey_400, + focusBorderColor: CoreTokens.color_blue_600, + focusBorderStyle: CoreTokens.border_solid, + focusBorderThickness: CoreTokens.border_width_2, + focusBorderRadius: CoreTokens.border_width_2, + paddingTop: CoreTokens.spacing_8, + paddingBottom: CoreTokens.spacing_8, + paddingLeft: CoreTokens.spacing_16, + paddingRight: CoreTokens.spacing_16, + fontFamily: CoreTokens.type_sans, + fontSize: CoreTokens.type_scale_02, + fontStyle: CoreTokens.type_normal, + fontWeight: CoreTokens.type_regular, }, radioGroup: { - fontFamily: CORE_TOKENS.type_sans, - radioInputColor: CORE_TOKENS.color_blue_700, - hoverRadioInputColor: CORE_TOKENS.color_blue_800, - focusBorderColor: CORE_TOKENS.color_blue_600, - activeRadioInputColor: CORE_TOKENS.color_blue_900, - errorRadioInputColor: CORE_TOKENS.color_red_700, - hoverErrorRadioInputColor: CORE_TOKENS.color_red_800, - activeErrorRadioInputColor: CORE_TOKENS.color_red_900, - readOnlyRadioInputColor: CORE_TOKENS.color_grey_500, - hoverReadOnlyRadioInputColor: CORE_TOKENS.color_grey_600, - activeReadOnlyRadioInputColor: CORE_TOKENS.color_grey_700, - disabledRadioInputColor: CORE_TOKENS.color_grey_500, - disabledLabelFontColor: CORE_TOKENS.color_grey_500, - disabledHelperTextFontColor: CORE_TOKENS.color_grey_500, - disabledRadioInputLabelFontColor: CORE_TOKENS.color_grey_500, - errorMessageColor: CORE_TOKENS.color_red_700, - labelFontColor: CORE_TOKENS.color_black, - labelFontSize: CORE_TOKENS.type_scale_02, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_semibold, - labelLineHeight: CORE_TOKENS.type_leading_loose_01, - optionalLabelFontWeight: CORE_TOKENS.type_regular, - helperTextFontColor: CORE_TOKENS.color_black, - helperTextFontSize: CORE_TOKENS.type_scale_01, - helperTextFontStyle: CORE_TOKENS.type_normal, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextLineHeight: CORE_TOKENS.type_leading_normal, - radioInputLabelFontColor: CORE_TOKENS.color_black, - radioInputLabelFontSize: CORE_TOKENS.type_scale_02, - radioInputLabelFontStyle: CORE_TOKENS.type_normal, - radioInputLabelFontWeight: CORE_TOKENS.type_regular, - radioInputLabelLineHeight: CORE_TOKENS.type_leading_loose_01, - groupLabelMargin: CORE_TOKENS.spacing_8, - radioInputLabelMargin: CORE_TOKENS.spacing_8, - groupVerticalGutter: CORE_TOKENS.spacing_4, - groupHorizontalGutter: CORE_TOKENS.spacing_32, + fontFamily: CoreTokens.type_sans, + radioInputColor: CoreTokens.color_blue_700, + hoverRadioInputColor: CoreTokens.color_blue_800, + focusBorderColor: CoreTokens.color_blue_600, + activeRadioInputColor: CoreTokens.color_blue_900, + errorRadioInputColor: CoreTokens.color_red_700, + hoverErrorRadioInputColor: CoreTokens.color_red_800, + activeErrorRadioInputColor: CoreTokens.color_red_900, + readOnlyRadioInputColor: CoreTokens.color_grey_500, + hoverReadOnlyRadioInputColor: CoreTokens.color_grey_600, + activeReadOnlyRadioInputColor: CoreTokens.color_grey_700, + disabledRadioInputColor: CoreTokens.color_grey_500, + disabledLabelFontColor: CoreTokens.color_grey_500, + disabledHelperTextFontColor: CoreTokens.color_grey_500, + disabledRadioInputLabelFontColor: CoreTokens.color_grey_500, + errorMessageColor: CoreTokens.color_red_700, + labelFontColor: CoreTokens.color_black, + labelFontSize: CoreTokens.type_scale_02, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_semibold, + labelLineHeight: CoreTokens.type_leading_loose_01, + optionalLabelFontWeight: CoreTokens.type_regular, + helperTextFontColor: CoreTokens.color_black, + helperTextFontSize: CoreTokens.type_scale_01, + helperTextFontStyle: CoreTokens.type_normal, + helperTextFontWeight: CoreTokens.type_regular, + helperTextLineHeight: CoreTokens.type_leading_normal, + radioInputLabelFontColor: CoreTokens.color_black, + radioInputLabelFontSize: CoreTokens.type_scale_02, + radioInputLabelFontStyle: CoreTokens.type_normal, + radioInputLabelFontWeight: CoreTokens.type_regular, + radioInputLabelLineHeight: CoreTokens.type_leading_loose_01, + groupLabelMargin: CoreTokens.spacing_8, + radioInputLabelMargin: CoreTokens.spacing_8, + groupVerticalGutter: CoreTokens.spacing_4, + groupHorizontalGutter: CoreTokens.spacing_32, }, select: { - fontFamily: CORE_TOKENS.type_sans, - disabledColor: CORE_TOKENS.color_grey_500, - enabledInputBorderColor: CORE_TOKENS.color_black, - hoverInputBorderColor: CORE_TOKENS.color_purple_500, - focusInputBorderColor: CORE_TOKENS.color_blue_600, - errorInputBorderColor: CORE_TOKENS.color_red_700, - hoverInputErrorBorderColor: CORE_TOKENS.color_red_600, - disabledInputBorderColor: CORE_TOKENS.color_grey_500, - disabledInputBackgroundColor: CORE_TOKENS.color_grey_100, - inputMarginTop: CORE_TOKENS.spacing_4, - inputMarginBottom: CORE_TOKENS.spacing_4, - errorMessageColor: CORE_TOKENS.color_red_700, - errorIconColor: CORE_TOKENS.color_red_700, - labelFontColor: CORE_TOKENS.color_black, - labelFontSize: CORE_TOKENS.type_scale_02, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_semibold, - labelLineHeight: CORE_TOKENS.type_leading_loose_01, - optionalLabelFontWeight: CORE_TOKENS.type_regular, - helperTextFontColor: CORE_TOKENS.color_black, - helperTextFontSize: CORE_TOKENS.type_scale_01, - helperTextFontStyle: CORE_TOKENS.type_normal, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextLineHeight: CORE_TOKENS.type_leading_normal, - placeholderFontColor: CORE_TOKENS.color_grey_800_a, - valueFontColor: CORE_TOKENS.color_black, - valueFontSize: CORE_TOKENS.type_scale_03, - valueFontStyle: CORE_TOKENS.type_normal, - valueFontWeight: CORE_TOKENS.type_regular, - actionIconColor: CORE_TOKENS.color_black, - hoverActionIconColor: CORE_TOKENS.color_black, - activeActionIconColor: CORE_TOKENS.color_black, - actionBackgroundColor: CORE_TOKENS.color_transparent, - hoverActionBackgroundColor: CORE_TOKENS.color_grey_100, - activeActionBackgroundColor: CORE_TOKENS.color_grey_300, - listOptionFontColor: CORE_TOKENS.color_black, - listOptionFontSize: CORE_TOKENS.type_scale_02, - listOptionFontStyle: CORE_TOKENS.type_normal, - listOptionFontWeight: CORE_TOKENS.type_regular, - listOptionIconColor: CORE_TOKENS.color_black, - listOptionDividerColor: CORE_TOKENS.color_grey_200, - listGroupLabelFontWeight: CORE_TOKENS.type_semibold, - focusListOptionBorderColor: CORE_TOKENS.color_blue_600, - systemMessageFontColor: CORE_TOKENS.color_grey_700, - collapseIndicatorColor: CORE_TOKENS.color_black, - listDialogBackgroundColor: CORE_TOKENS.color_white, - listDialogBorderColor: CORE_TOKENS.color_grey_400, - selectedListOptionBackgroundColor: CORE_TOKENS.color_blue_100, - selectedHoverListOptionBackgroundColor: CORE_TOKENS.color_blue_200, - selectedActiveListOptionBackgroundColor: CORE_TOKENS.color_blue_300, - selectedListOptionIconColor: CORE_TOKENS.color_blue_900, - unselectedHoverListOptionBackgroundColor: CORE_TOKENS.color_grey_100, - unselectedActiveListOptionBackgroundColor: CORE_TOKENS.color_grey_200, - selectionIndicatorFontColor: CORE_TOKENS.color_black, - selectionIndicatorFontSize: CORE_TOKENS.type_scale_01, - selectionIndicatorFontStyle: CORE_TOKENS.type_regular, - selectionIndicatorFontWeight: CORE_TOKENS.type_normal, - selectionIndicatorBorderColor: CORE_TOKENS.color_grey_400, - selectionIndicatorBackgroundColor: CORE_TOKENS.color_grey_50, - enabledSelectionIndicatorActionBackgroundColor: CORE_TOKENS.color_transparent, - enabledSelectionIndicatorActionIconColor: CORE_TOKENS.color_black, - hoverSelectionIndicatorActionBackgroundColor: CORE_TOKENS.color_grey_100, - hoverSelectionIndicatorActionIconColor: CORE_TOKENS.color_black, - activeSelectionIndicatorActionBackgroundColor: CORE_TOKENS.color_grey_300, - activeSelectionIndicatorActionIconColor: CORE_TOKENS.color_black, + fontFamily: CoreTokens.type_sans, + disabledColor: CoreTokens.color_grey_500, + enabledInputBorderColor: CoreTokens.color_black, + hoverInputBorderColor: CoreTokens.color_purple_500, + focusInputBorderColor: CoreTokens.color_blue_600, + errorInputBorderColor: CoreTokens.color_red_700, + hoverInputErrorBorderColor: CoreTokens.color_red_600, + disabledInputBorderColor: CoreTokens.color_grey_500, + disabledInputBackgroundColor: CoreTokens.color_grey_100, + inputMarginTop: CoreTokens.spacing_4, + inputMarginBottom: CoreTokens.spacing_4, + errorMessageColor: CoreTokens.color_red_700, + errorIconColor: CoreTokens.color_red_700, + labelFontColor: CoreTokens.color_black, + labelFontSize: CoreTokens.type_scale_02, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_semibold, + labelLineHeight: CoreTokens.type_leading_loose_01, + optionalLabelFontWeight: CoreTokens.type_regular, + helperTextFontColor: CoreTokens.color_black, + helperTextFontSize: CoreTokens.type_scale_01, + helperTextFontStyle: CoreTokens.type_normal, + helperTextFontWeight: CoreTokens.type_regular, + helperTextLineHeight: CoreTokens.type_leading_normal, + placeholderFontColor: CoreTokens.color_grey_800_a, + valueFontColor: CoreTokens.color_black, + valueFontSize: CoreTokens.type_scale_03, + valueFontStyle: CoreTokens.type_normal, + valueFontWeight: CoreTokens.type_regular, + actionIconColor: CoreTokens.color_black, + hoverActionIconColor: CoreTokens.color_black, + activeActionIconColor: CoreTokens.color_black, + actionBackgroundColor: CoreTokens.color_transparent, + hoverActionBackgroundColor: CoreTokens.color_grey_100, + activeActionBackgroundColor: CoreTokens.color_grey_300, + listOptionFontColor: CoreTokens.color_black, + listOptionFontSize: CoreTokens.type_scale_02, + listOptionFontStyle: CoreTokens.type_normal, + listOptionFontWeight: CoreTokens.type_regular, + listOptionIconColor: CoreTokens.color_black, + listOptionDividerColor: CoreTokens.color_grey_200, + listGroupLabelFontWeight: CoreTokens.type_semibold, + focusListOptionBorderColor: CoreTokens.color_blue_600, + systemMessageFontColor: CoreTokens.color_grey_700, + collapseIndicatorColor: CoreTokens.color_black, + listDialogBackgroundColor: CoreTokens.color_white, + listDialogBorderColor: CoreTokens.color_grey_400, + selectedListOptionBackgroundColor: CoreTokens.color_blue_100, + selectedHoverListOptionBackgroundColor: CoreTokens.color_blue_200, + selectedActiveListOptionBackgroundColor: CoreTokens.color_blue_300, + selectedListOptionIconColor: CoreTokens.color_blue_900, + unselectedHoverListOptionBackgroundColor: CoreTokens.color_grey_100, + unselectedActiveListOptionBackgroundColor: CoreTokens.color_grey_200, + selectionIndicatorFontColor: CoreTokens.color_black, + selectionIndicatorFontSize: CoreTokens.type_scale_01, + selectionIndicatorFontStyle: CoreTokens.type_regular, + selectionIndicatorFontWeight: CoreTokens.type_normal, + selectionIndicatorBorderColor: CoreTokens.color_grey_400, + selectionIndicatorBackgroundColor: CoreTokens.color_grey_50, + enabledSelectionIndicatorActionBackgroundColor: CoreTokens.color_transparent, + enabledSelectionIndicatorActionIconColor: CoreTokens.color_black, + hoverSelectionIndicatorActionBackgroundColor: CoreTokens.color_grey_100, + hoverSelectionIndicatorActionIconColor: CoreTokens.color_black, + activeSelectionIndicatorActionBackgroundColor: CoreTokens.color_grey_300, + activeSelectionIndicatorActionIconColor: CoreTokens.color_black, }, sidenav: { - backgroundColor: CORE_TOKENS.color_grey_100, - titleFontFamily: CORE_TOKENS.type_sans, - titleFontSize: CORE_TOKENS.type_scale_04, - titleFontStyle: CORE_TOKENS.type_normal, - titleFontWeight: CORE_TOKENS.type_semibold, - titleFontColor: CORE_TOKENS.color_grey_800, + backgroundColor: CoreTokens.color_grey_100, + titleFontFamily: CoreTokens.type_sans, + titleFontSize: CoreTokens.type_scale_04, + titleFontStyle: CoreTokens.type_normal, + titleFontWeight: CoreTokens.type_semibold, + titleFontColor: CoreTokens.color_grey_800, titleFontTextTransform: "none", - titleFontLetterSpacing: CORE_TOKENS.type_spacing_normal, - groupTitleFontFamily: CORE_TOKENS.type_sans, - groupTitleFontSize: CORE_TOKENS.type_scale_02, - groupTitleFontStyle: CORE_TOKENS.type_normal, - groupTitleFontWeight: CORE_TOKENS.type_semibold, - groupTitleFontColor: CORE_TOKENS.color_black, - groupTitleHoverBackgroundColor: CORE_TOKENS.color_grey_200, - groupTitleActiveBackgroundColor: CORE_TOKENS.color_grey_800, - groupTitleSelectedFontColor: CORE_TOKENS.color_white, - groupTitleSelectedBackgroundColor: CORE_TOKENS.color_grey_800, - groupTitleSelectedHoverFontColor: CORE_TOKENS.color_white, - groupTitleSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_900, - groupTitleFontTextTransform: CORE_TOKENS.type_uppercase, - groupTitleFontLetterSpacing: CORE_TOKENS.type_spacing_wide_02, - linkFontFamily: CORE_TOKENS.type_sans, - linkFontSize: CORE_TOKENS.type_scale_02, - linkFontStyle: CORE_TOKENS.type_normal, - linkFontWeight: CORE_TOKENS.type_regular, - linkFontColor: CORE_TOKENS.color_grey_800, - linkHoverBackgroundColor: CORE_TOKENS.color_grey_200, - linkSelectedFontColor: CORE_TOKENS.color_white, - linkSelectedBackgroundColor: CORE_TOKENS.color_grey_800, - linkSelectedHoverFontColor: CORE_TOKENS.color_white, - linkSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_900, + titleFontLetterSpacing: CoreTokens.type_spacing_normal, + groupTitleFontFamily: CoreTokens.type_sans, + groupTitleFontSize: CoreTokens.type_scale_02, + groupTitleFontStyle: CoreTokens.type_normal, + groupTitleFontWeight: CoreTokens.type_semibold, + groupTitleFontColor: CoreTokens.color_black, + groupTitleHoverBackgroundColor: CoreTokens.color_grey_200, + groupTitleActiveBackgroundColor: CoreTokens.color_grey_800, + groupTitleSelectedFontColor: CoreTokens.color_white, + groupTitleSelectedBackgroundColor: CoreTokens.color_grey_800, + groupTitleSelectedHoverFontColor: CoreTokens.color_white, + groupTitleSelectedHoverBackgroundColor: CoreTokens.color_grey_900, + groupTitleFontTextTransform: CoreTokens.type_uppercase, + groupTitleFontLetterSpacing: CoreTokens.type_spacing_wide_02, + linkFontFamily: CoreTokens.type_sans, + linkFontSize: CoreTokens.type_scale_02, + linkFontStyle: CoreTokens.type_normal, + linkFontWeight: CoreTokens.type_regular, + linkFontColor: CoreTokens.color_grey_800, + linkHoverBackgroundColor: CoreTokens.color_grey_200, + linkSelectedFontColor: CoreTokens.color_white, + linkSelectedBackgroundColor: CoreTokens.color_grey_800, + linkSelectedHoverFontColor: CoreTokens.color_white, + linkSelectedHoverBackgroundColor: CoreTokens.color_grey_900, linkFontTextTransform: "none", - linkFontLetterSpacing: CORE_TOKENS.type_spacing_wide_01, - linkTextDecoration: CORE_TOKENS.type_no_line, + linkFontLetterSpacing: CoreTokens.type_spacing_wide_01, + linkTextDecoration: CoreTokens.type_no_line, linkMarginTop: "4px", linkMarginBottom: "4px", linkMarginRight: "16px", linkMarginLeft: "16px", - linkFocusColor: CORE_TOKENS.color_blue_600, - scrollBarThumbColor: CORE_TOKENS.color_grey_200_a, - scrollBarTrackColor: CORE_TOKENS.color_transparent, + linkFocusColor: CoreTokens.color_blue_600, + scrollBarThumbColor: CoreTokens.color_grey_200_a, + scrollBarTrackColor: CoreTokens.color_transparent, }, slider: { - fontFamily: CORE_TOKENS.type_sans, - limitValuesFontColor: CORE_TOKENS.color_black, - limitValuesFontColorOnDark: CORE_TOKENS.color_white, - limitValuesFontSize: CORE_TOKENS.type_scale_03, - limitValuesFontStyle: CORE_TOKENS.type_normal, - limitValuesFontWeight: CORE_TOKENS.type_regular, - limitValuesFontLetterSpacing: CORE_TOKENS.type_spacing_normal, - disabledLimitValuesFontColor: CORE_TOKENS.color_grey_500, - labelFontFamily: CORE_TOKENS.type_sans, - labelFontSize: CORE_TOKENS.type_scale_02, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_semibold, - labelLineHeight: CORE_TOKENS.type_leading_loose_01, - helperTextFontFamily: CORE_TOKENS.type_sans, - helperTextFontSize: CORE_TOKENS.type_scale_01, - helperTextFontStyle: CORE_TOKENS.type_normal, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextLineHeight: CORE_TOKENS.type_leading_normal, - fontColor: CORE_TOKENS.color_black, - fontColorOnDark: CORE_TOKENS.color_white, - labelFontColor: CORE_TOKENS.color_black, - labelFontColorOnDark: CORE_TOKENS.color_white, - helperTextFontColor: CORE_TOKENS.color_black, - helperTextFontColorOnDark: CORE_TOKENS.color_white, - disabledLabelFontColor: CORE_TOKENS.color_grey_500, - disabledLabelFontColorOnDark: CORE_TOKENS.color_grey_500, - disabledHelperTextFontColor: CORE_TOKENS.color_grey_500, - disabledHelperTextFontColorOnDark: CORE_TOKENS.color_grey_500, + fontFamily: CoreTokens.type_sans, + limitValuesFontColor: CoreTokens.color_black, + limitValuesFontColorOnDark: CoreTokens.color_white, + limitValuesFontSize: CoreTokens.type_scale_03, + limitValuesFontStyle: CoreTokens.type_normal, + limitValuesFontWeight: CoreTokens.type_regular, + limitValuesFontLetterSpacing: CoreTokens.type_spacing_normal, + disabledLimitValuesFontColor: CoreTokens.color_grey_500, + labelFontFamily: CoreTokens.type_sans, + labelFontSize: CoreTokens.type_scale_02, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_semibold, + labelLineHeight: CoreTokens.type_leading_loose_01, + helperTextFontFamily: CoreTokens.type_sans, + helperTextFontSize: CoreTokens.type_scale_01, + helperTextFontStyle: CoreTokens.type_normal, + helperTextFontWeight: CoreTokens.type_regular, + helperTextLineHeight: CoreTokens.type_leading_normal, + fontColor: CoreTokens.color_black, + fontColorOnDark: CoreTokens.color_white, + labelFontColor: CoreTokens.color_black, + labelFontColorOnDark: CoreTokens.color_white, + helperTextFontColor: CoreTokens.color_black, + helperTextFontColorOnDark: CoreTokens.color_white, + disabledLabelFontColor: CoreTokens.color_grey_500, + disabledLabelFontColorOnDark: CoreTokens.color_grey_500, + disabledHelperTextFontColor: CoreTokens.color_grey_500, + disabledHelperTextFontColorOnDark: CoreTokens.color_grey_500, thumbHeight: "12px", thumbWidth: "12px", hoverThumbHeight: "14px", hoverThumbWidth: "14px", thumbVerticalPosition: "12px", hoverThumbVerticalPosition: "11px", - thumbBackgroundColor: CORE_TOKENS.color_blue_800, - thumbBackgroundColorOnDark: CORE_TOKENS.color_blue_600, + thumbBackgroundColor: CoreTokens.color_blue_800, + thumbBackgroundColorOnDark: CoreTokens.color_blue_600, hoverThumbScale: "1.166666", - hoverThumbBackgroundColor: CORE_TOKENS.color_blue_900, - hoverThumbBackgroundColorOnDark: CORE_TOKENS.color_blue_900, + hoverThumbBackgroundColor: CoreTokens.color_blue_900, + hoverThumbBackgroundColorOnDark: CoreTokens.color_blue_900, activeThumbScale: "1.166666", - activeThumbBackgroundColor: CORE_TOKENS.color_blue_900, - activeThumbBackgroundColorOnDark: CORE_TOKENS.color_blue_900, - focusThumbBackgroundColor: CORE_TOKENS.color_blue_800, - focusThumbBackgroundColorOnDark: CORE_TOKENS.color_blue_600, + activeThumbBackgroundColor: CoreTokens.color_blue_900, + activeThumbBackgroundColorOnDark: CoreTokens.color_blue_900, + focusThumbBackgroundColor: CoreTokens.color_blue_800, + focusThumbBackgroundColorOnDark: CoreTokens.color_blue_600, tickHeight: "4px", tickWidth: "4px", tickVerticalPosition: "11px", - tickBackgroundColor: CORE_TOKENS.color_blue_800, - tickBackgroundColorOnDark: CORE_TOKENS.color_blue_600, + tickBackgroundColor: CoreTokens.color_blue_800, + tickBackgroundColorOnDark: CoreTokens.color_blue_600, trackLineThickness: "2px", trackLineVerticalPosition: "50%", - trackLineColor: CORE_TOKENS.color_blue_800, - trackLineColorOnDark: CORE_TOKENS.color_blue_600, + trackLineColor: CoreTokens.color_blue_800, + trackLineColorOnDark: CoreTokens.color_blue_600, totalLineThickness: "2px", totalLineVerticalPosition: "50%", - totalLineColor: CORE_TOKENS.color_grey_200_a, - totalLineColorOnDark: CORE_TOKENS.color_grey_400, + totalLineColor: CoreTokens.color_grey_200_a, + totalLineColorOnDark: CoreTokens.color_grey_400, disabledThumbVerticalPosition: "10px", - disabledThumbBackgroundColor: CORE_TOKENS.color_grey_500, + disabledThumbBackgroundColor: CoreTokens.color_grey_500, disabledThumbBackgroundColorOnDark: "#575757", disabledTickVerticalPosition: "11px", - disabledTickBackgroundColor: CORE_TOKENS.color_grey_500, - disabledTickBackgroundColorOnDark: CORE_TOKENS.color_grey_500, - disabledTrackLineColor: CORE_TOKENS.color_grey_500, - disabledTrackLineColorOnDark: CORE_TOKENS.color_grey_500, - disabledTotalLineColor: CORE_TOKENS.color_grey_100, - disabledTotalLineColorOnDark: CORE_TOKENS.color_grey_700, - focusColor: CORE_TOKENS.color_blue_600, - focusColorOnDark: CORE_TOKENS.color_blue_600, - floorLabelMarginRight: CORE_TOKENS.type_scale_03, - ceilLabelMarginLeft: CORE_TOKENS.type_scale_03, - inputMarginLeft: CORE_TOKENS.type_scale_06, + disabledTickBackgroundColor: CoreTokens.color_grey_500, + disabledTickBackgroundColorOnDark: CoreTokens.color_grey_500, + disabledTrackLineColor: CoreTokens.color_grey_500, + disabledTrackLineColorOnDark: CoreTokens.color_grey_500, + disabledTotalLineColor: CoreTokens.color_grey_100, + disabledTotalLineColorOnDark: CoreTokens.color_grey_700, + focusColor: CoreTokens.color_blue_600, + focusColorOnDark: CoreTokens.color_blue_600, + floorLabelMarginRight: CoreTokens.type_scale_03, + ceilLabelMarginLeft: CoreTokens.type_scale_03, + inputMarginLeft: CoreTokens.type_scale_06, }, spinner: { - trackCircleColor: CORE_TOKENS.color_purple_700, - trackCircleColorOverlay: CORE_TOKENS.color_purple_500, - totalCircleColor: CORE_TOKENS.color_white, - labelFontFamily: CORE_TOKENS.type_sans, - labelFontSize: CORE_TOKENS.type_scale_02, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_regular, - labelFontColor: CORE_TOKENS.color_black, - labelFontColorOnDark: CORE_TOKENS.color_white, + trackCircleColor: CoreTokens.color_purple_700, + trackCircleColorOverlay: CoreTokens.color_purple_500, + totalCircleColor: CoreTokens.color_white, + labelFontFamily: CoreTokens.type_sans, + labelFontSize: CoreTokens.type_scale_02, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_regular, + labelFontColor: CoreTokens.color_black, + labelFontColorOnDark: CoreTokens.color_white, labelTextAlign: "center", - progressValueFontFamily: CORE_TOKENS.type_sans, - progressValueFontSize: CORE_TOKENS.type_scale_02, - progressValueFontStyle: CORE_TOKENS.type_normal, - progressValueFontWeight: CORE_TOKENS.type_bold, - progressValueFontColor: CORE_TOKENS.inherit, - progressValueFontColorOnDark: CORE_TOKENS.color_white, + progressValueFontFamily: CoreTokens.type_sans, + progressValueFontSize: CoreTokens.type_scale_02, + progressValueFontStyle: CoreTokens.type_normal, + progressValueFontWeight: CoreTokens.type_bold, + progressValueFontColor: CoreTokens.inherit, + progressValueFontColorOnDark: CoreTokens.color_white, progressValueTextAlign: "center", - overlayBackgroundColor: CORE_TOKENS.color_black, + overlayBackgroundColor: CoreTokens.color_black, overlayOpacity: "0.8", - overlayLabelFontFamily: CORE_TOKENS.type_sans, - overlayLabelFontSize: CORE_TOKENS.type_scale_02, - overlayLabelFontStyle: CORE_TOKENS.type_normal, - overlayLabelFontWeight: CORE_TOKENS.type_regular, - overlayLabelFontColor: CORE_TOKENS.color_white, + overlayLabelFontFamily: CoreTokens.type_sans, + overlayLabelFontSize: CoreTokens.type_scale_02, + overlayLabelFontStyle: CoreTokens.type_normal, + overlayLabelFontWeight: CoreTokens.type_regular, + overlayLabelFontColor: CoreTokens.color_white, overlayLabelTextAlign: "center", - overlayProgressValueFontFamily: CORE_TOKENS.type_sans, - overlayProgressValueFontSize: CORE_TOKENS.type_scale_02, - overlayProgressValueFontStyle: CORE_TOKENS.type_normal, - overlayProgressValueFontWeight: CORE_TOKENS.type_bold, - overlayProgressValueFontColor: CORE_TOKENS.color_white, + overlayProgressValueFontFamily: CoreTokens.type_sans, + overlayProgressValueFontSize: CoreTokens.type_scale_02, + overlayProgressValueFontStyle: CoreTokens.type_normal, + overlayProgressValueFontWeight: CoreTokens.type_bold, + overlayProgressValueFontColor: CoreTokens.color_white, overlayProgressValueTextAlign: "center", }, switch: { - checkedTrackBackgroundColor: CORE_TOKENS.color_purple_700, - checkedTrackBackgroundColorOnDark: CORE_TOKENS.color_purple_700, - checkedThumbBackgroundColor: CORE_TOKENS.color_white, - checkedThumbBackgroundColorOnDark: CORE_TOKENS.color_white, - uncheckedTrackBackgroundColor: CORE_TOKENS.color_grey_400, - uncheckedTrackBackgroundColorOnDark: CORE_TOKENS.color_grey_400, - uncheckedThumbBackgroundColor: CORE_TOKENS.color_white, - uncheckedThumbBackgroundColorOnDark: CORE_TOKENS.color_white, - disabledCheckedTrackBackgroundColor: CORE_TOKENS.color_purple_100, + checkedTrackBackgroundColor: CoreTokens.color_purple_700, + checkedTrackBackgroundColorOnDark: CoreTokens.color_purple_700, + checkedThumbBackgroundColor: CoreTokens.color_white, + checkedThumbBackgroundColorOnDark: CoreTokens.color_white, + uncheckedTrackBackgroundColor: CoreTokens.color_grey_400, + uncheckedTrackBackgroundColorOnDark: CoreTokens.color_grey_400, + uncheckedThumbBackgroundColor: CoreTokens.color_white, + uncheckedThumbBackgroundColorOnDark: CoreTokens.color_white, + disabledCheckedTrackBackgroundColor: CoreTokens.color_purple_100, disabledCheckedTrackBackgroundColorOnDark: "#1c0b24", - disabledCheckedThumbBackgroundColor: CORE_TOKENS.color_white, - disabledCheckedThumbBackgroundColorOnDark: CORE_TOKENS.color_white, - disabledUncheckedTrackBackgroundColor: CORE_TOKENS.color_grey_100, + disabledCheckedThumbBackgroundColor: CoreTokens.color_white, + disabledCheckedThumbBackgroundColorOnDark: CoreTokens.color_white, + disabledUncheckedTrackBackgroundColor: CoreTokens.color_grey_100, disabledUncheckedTrackBackgroundColorOnDark: "#363636", - disabledUncheckedThumbBackgroundColor: CORE_TOKENS.color_white, - disabledUncheckedThumbBackgroundColorOnDark: CORE_TOKENS.color_white, - disabledLabelFontColor: CORE_TOKENS.color_grey_500, + disabledUncheckedThumbBackgroundColor: CoreTokens.color_white, + disabledUncheckedThumbBackgroundColorOnDark: CoreTokens.color_white, + disabledLabelFontColor: CoreTokens.color_grey_500, disabledLabelFontColorOnDark: "#575757", - disabledLabelFontStyle: CORE_TOKENS.type_normal, - labelFontFamily: CORE_TOKENS.type_sans, - labelFontSize: CORE_TOKENS.type_scale_root, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_regular, - labelFontColor: CORE_TOKENS.color_black, - labelFontColorOnDark: CORE_TOKENS.color_white, - thumbFocusColor: CORE_TOKENS.color_blue_600, + disabledLabelFontStyle: CoreTokens.type_normal, + labelFontFamily: CoreTokens.type_sans, + labelFontSize: CoreTokens.type_scale_root, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_regular, + labelFontColor: CoreTokens.color_black, + labelFontColorOnDark: CoreTokens.color_white, + thumbFocusColor: CoreTokens.color_blue_600, thumbFocusColorOnDark: "#1682ff", thumbHeight: "24px", thumbWidth: "24px", @@ -906,14 +906,14 @@ export const componentTokens = { }, table: { rowSeparatorThickness: "1px", - rowSeparatorStyle: CORE_TOKENS.border_solid, - rowSeparatorColor: CORE_TOKENS.color_grey_300, - dataBackgroundColor: CORE_TOKENS.color_white, - dataFontFamily: CORE_TOKENS.type_sans, - dataFontSize: CORE_TOKENS.type_scale_02, - dataFontStyle: CORE_TOKENS.type_normal, - dataFontWeight: CORE_TOKENS.type_regular, - dataFontColor: CORE_TOKENS.color_black, + rowSeparatorStyle: CoreTokens.border_solid, + rowSeparatorColor: CoreTokens.color_grey_300, + dataBackgroundColor: CoreTokens.color_white, + dataFontFamily: CoreTokens.type_sans, + dataFontSize: CoreTokens.type_scale_02, + dataFontStyle: CoreTokens.type_normal, + dataFontWeight: CoreTokens.type_regular, + dataFontColor: CoreTokens.color_black, dataFontTextTransform: "none", dataPaddingTop: "14px", dataPaddingBottom: "12px", @@ -921,13 +921,13 @@ export const componentTokens = { dataPaddingLeft: "40px", dataTextAlign: "left", dataTextLineHeight: "normal", - headerBackgroundColor: CORE_TOKENS.color_purple_700, + headerBackgroundColor: CoreTokens.color_purple_700, headerBorderRadius: "4px", - headerFontFamily: CORE_TOKENS.type_sans, - headerFontSize: CORE_TOKENS.type_scale_02, - headerFontStyle: CORE_TOKENS.type_normal, - headerFontWeight: CORE_TOKENS.type_regular, - headerFontColor: CORE_TOKENS.color_white, + headerFontFamily: CoreTokens.type_sans, + headerFontSize: CoreTokens.type_scale_02, + headerFontStyle: CoreTokens.type_normal, + headerFontWeight: CoreTokens.type_regular, + headerFontColor: CoreTokens.color_white, headerFontTextTransform: "none", headerPaddingTop: "16px", headerPaddingBottom: "16px", @@ -935,42 +935,42 @@ export const componentTokens = { headerPaddingLeft: "40px", headerTextAlign: "left", headerTextLineHeight: "normal", - scrollBarThumbColor: CORE_TOKENS.color_grey_700, - scrollBarTrackColor: CORE_TOKENS.color_grey_300, - sortIconColor: CORE_TOKENS.color_white, + scrollBarThumbColor: CoreTokens.color_grey_700, + scrollBarTrackColor: CoreTokens.color_grey_300, + sortIconColor: CoreTokens.color_white, }, tabs: { - fontFamily: CORE_TOKENS.type_sans, - fontSize: CORE_TOKENS.type_scale_03, - fontStyle: CORE_TOKENS.type_normal, - fontWeight: CORE_TOKENS.type_semibold, + fontFamily: CoreTokens.type_sans, + fontSize: CoreTokens.type_scale_03, + fontStyle: CoreTokens.type_normal, + fontWeight: CoreTokens.type_semibold, fontTextTransform: "none", - selectedBackgroundColor: CORE_TOKENS.color_white, - selectedFontColor: CORE_TOKENS.color_purple_700, - selectedIconColor: CORE_TOKENS.color_purple_700, - selectedUnderlineColor: CORE_TOKENS.color_purple_700, + selectedBackgroundColor: CoreTokens.color_white, + selectedFontColor: CoreTokens.color_purple_700, + selectedIconColor: CoreTokens.color_purple_700, + selectedUnderlineColor: CoreTokens.color_purple_700, selectedUnderlineThickness: "2px", - unselectedBackgroundColor: CORE_TOKENS.color_white, - unselectedFontColor: CORE_TOKENS.color_grey_700, - unselectedIconColor: CORE_TOKENS.color_grey_700, - disabledFontColor: CORE_TOKENS.color_grey_500, - disabledIconColor: CORE_TOKENS.color_grey_500, - disabledFontStyle: CORE_TOKENS.type_normal, + unselectedBackgroundColor: CoreTokens.color_white, + unselectedFontColor: CoreTokens.color_grey_700, + unselectedIconColor: CoreTokens.color_grey_700, + disabledFontColor: CoreTokens.color_grey_500, + disabledIconColor: CoreTokens.color_grey_500, + disabledFontStyle: CoreTokens.type_normal, disabledBadgeBackgroundColor: "#0000004d", - hoverBackgroundColor: CORE_TOKENS.color_purple_100, - pressedBackgroundColor: CORE_TOKENS.color_purple_200, - pressedFontWeight: CORE_TOKENS.type_semibold, - dividerColor: CORE_TOKENS.color_grey_400, + hoverBackgroundColor: CoreTokens.color_purple_100, + pressedBackgroundColor: CoreTokens.color_purple_200, + pressedFontWeight: CoreTokens.type_semibold, + dividerColor: CoreTokens.color_grey_400, dividerThickness: "1px", - focusOutline: CORE_TOKENS.color_purple_700, + focusOutline: CoreTokens.color_purple_700, scrollButtonsWidth: "48px", - badgeBackgroundColor: CORE_TOKENS.color_red_700, - badgeFontFamily: CORE_TOKENS.type_sans, + badgeBackgroundColor: CoreTokens.color_red_700, + badgeFontFamily: CoreTokens.type_sans, badgeFontSize: "10px", - badgeFontStyle: CORE_TOKENS.type_normal, + badgeFontStyle: CoreTokens.type_normal, badgeFontWeight: "500", - badgeFontColor: CORE_TOKENS.color_white, - badgeLetterSpacing: CORE_TOKENS.type_spacing_wide_02, + badgeFontColor: CoreTokens.color_white, + badgeLetterSpacing: CoreTokens.type_spacing_wide_02, badgeWidth: "16px", badgeHeight: "16px", badgeRadius: "10px", @@ -979,276 +979,276 @@ export const componentTokens = { badgeRadiusWithNotificationNumber: "10px", }, tag: { - fontFamily: CORE_TOKENS.type_sans, - fontColor: CORE_TOKENS.color_black, - fontSize: CORE_TOKENS.type_scale_02, - fontStyle: CORE_TOKENS.type_normal, - fontWeight: CORE_TOKENS.type_regular, + fontFamily: CoreTokens.type_sans, + fontColor: CoreTokens.color_black, + fontSize: CoreTokens.type_scale_02, + fontStyle: CoreTokens.type_normal, + fontWeight: CoreTokens.type_regular, labelPaddingTop: "0px", labelPaddingBottom: "0px", labelPaddingLeft: "16px", labelPaddingRight: "16px", height: "40px", - iconColor: CORE_TOKENS.color_white, + iconColor: CoreTokens.color_white, iconSectionWidth: "40px", iconHeight: "24px", iconWidth: "auto", - focusColor: CORE_TOKENS.color_blue_600, + focusColor: CoreTokens.color_blue_600, }, textarea: { - fontFamily: CORE_TOKENS.type_sans, - enabledBorderColor: CORE_TOKENS.color_black, - enabledBorderColorOnDark: CORE_TOKENS.color_white, - hoverBorderColor: CORE_TOKENS.color_purple_500, - hoverBorderColorOnDark: CORE_TOKENS.color_purple_500, - focusBorderColor: CORE_TOKENS.color_blue_600, - focusBorderColorOnDark: CORE_TOKENS.color_blue_600, - disabledBorderColor: CORE_TOKENS.color_grey_500, - disabledBorderColorOnDark: CORE_TOKENS.color_grey_500, - disabledContainerFillColor: CORE_TOKENS.color_grey_100, - disabledContainerFillColorOnDark: CORE_TOKENS.color_grey_700, - readOnlyBorderColor: CORE_TOKENS.color_grey_500, - hoverReadOnlyBorderColor: CORE_TOKENS.color_grey_600, - errorBorderColor: CORE_TOKENS.color_red_700, - errorBorderColorOnDark: CORE_TOKENS.color_red_500, - hoverErrorBorderColor: CORE_TOKENS.color_red_600, + fontFamily: CoreTokens.type_sans, + enabledBorderColor: CoreTokens.color_black, + enabledBorderColorOnDark: CoreTokens.color_white, + hoverBorderColor: CoreTokens.color_purple_500, + hoverBorderColorOnDark: CoreTokens.color_purple_500, + focusBorderColor: CoreTokens.color_blue_600, + focusBorderColorOnDark: CoreTokens.color_blue_600, + disabledBorderColor: CoreTokens.color_grey_500, + disabledBorderColorOnDark: CoreTokens.color_grey_500, + disabledContainerFillColor: CoreTokens.color_grey_100, + disabledContainerFillColorOnDark: CoreTokens.color_grey_700, + readOnlyBorderColor: CoreTokens.color_grey_500, + hoverReadOnlyBorderColor: CoreTokens.color_grey_600, + errorBorderColor: CoreTokens.color_red_700, + errorBorderColorOnDark: CoreTokens.color_red_500, + hoverErrorBorderColor: CoreTokens.color_red_600, hoverErrorBorderColorOnDark: "#fe677b", - inputMarginTop: CORE_TOKENS.spacing_4, - inputMarginBottom: CORE_TOKENS.spacing_4, - errorMessageColor: CORE_TOKENS.color_red_700, - errorMessageColorOnDark: CORE_TOKENS.color_red_500, - labelFontColor: CORE_TOKENS.color_black, - labelFontColorOnDark: CORE_TOKENS.color_white, - labelFontSize: CORE_TOKENS.type_scale_02, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_semibold, - labelLineHeight: CORE_TOKENS.type_leading_loose_01, - disabledLabelFontColor: CORE_TOKENS.color_grey_500, - disabledLabelFontColorOnDark: CORE_TOKENS.color_grey_500, - optionalLabelFontWeight: CORE_TOKENS.type_regular, - helperTextFontColor: CORE_TOKENS.color_black, - helperTextFontColorOnDark: CORE_TOKENS.color_white, - helperTextFontSize: CORE_TOKENS.type_scale_01, - helperTextFontStyle: CORE_TOKENS.type_normal, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextLineHeight: CORE_TOKENS.type_leading_normal, - disabledHelperTextFontColor: CORE_TOKENS.color_grey_500, - disabledHelperTextFontColorOnDark: CORE_TOKENS.color_grey_500, - placeholderFontColor: CORE_TOKENS.color_grey_800_a, - placeholderFontColorOnDark: CORE_TOKENS.color_grey_100, - disabledPlaceholderFontColor: CORE_TOKENS.color_grey_500, - disabledPlaceholderFontColorOnDark: CORE_TOKENS.color_grey_500, - valueFontColor: CORE_TOKENS.color_black, - valueFontColorOnDark: CORE_TOKENS.color_white, - valueFontSize: CORE_TOKENS.type_scale_03, - valueFontStyle: CORE_TOKENS.type_normal, - valueFontWeight: CORE_TOKENS.type_regular, - disabledValueFontColor: CORE_TOKENS.color_grey_500, - disabledValueFontColorOnDark: CORE_TOKENS.color_grey_500, + inputMarginTop: CoreTokens.spacing_4, + inputMarginBottom: CoreTokens.spacing_4, + errorMessageColor: CoreTokens.color_red_700, + errorMessageColorOnDark: CoreTokens.color_red_500, + labelFontColor: CoreTokens.color_black, + labelFontColorOnDark: CoreTokens.color_white, + labelFontSize: CoreTokens.type_scale_02, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_semibold, + labelLineHeight: CoreTokens.type_leading_loose_01, + disabledLabelFontColor: CoreTokens.color_grey_500, + disabledLabelFontColorOnDark: CoreTokens.color_grey_500, + optionalLabelFontWeight: CoreTokens.type_regular, + helperTextFontColor: CoreTokens.color_black, + helperTextFontColorOnDark: CoreTokens.color_white, + helperTextFontSize: CoreTokens.type_scale_01, + helperTextFontStyle: CoreTokens.type_normal, + helperTextFontWeight: CoreTokens.type_regular, + helperTextLineHeight: CoreTokens.type_leading_normal, + disabledHelperTextFontColor: CoreTokens.color_grey_500, + disabledHelperTextFontColorOnDark: CoreTokens.color_grey_500, + placeholderFontColor: CoreTokens.color_grey_800_a, + placeholderFontColorOnDark: CoreTokens.color_grey_100, + disabledPlaceholderFontColor: CoreTokens.color_grey_500, + disabledPlaceholderFontColorOnDark: CoreTokens.color_grey_500, + valueFontColor: CoreTokens.color_black, + valueFontColorOnDark: CoreTokens.color_white, + valueFontSize: CoreTokens.type_scale_03, + valueFontStyle: CoreTokens.type_normal, + valueFontWeight: CoreTokens.type_regular, + disabledValueFontColor: CoreTokens.color_grey_500, + disabledValueFontColorOnDark: CoreTokens.color_grey_500, }, textInput: { - fontFamily: CORE_TOKENS.type_sans, - enabledBorderColor: CORE_TOKENS.color_black, - enabledBorderColorOnDark: CORE_TOKENS.color_white, - hoverBorderColor: CORE_TOKENS.color_purple_500, - hoverBorderColorOnDark: CORE_TOKENS.color_purple_500, - focusBorderColor: CORE_TOKENS.color_blue_600, - focusBorderColorOnDark: CORE_TOKENS.color_blue_600, - disabledBorderColor: CORE_TOKENS.color_grey_500, - disabledBorderColorOnDark: CORE_TOKENS.color_grey_500, - disabledContainerFillColor: CORE_TOKENS.color_grey_100, - disabledContainerFillColorOnDark: CORE_TOKENS.color_grey_700, - readOnlyBorderColor: CORE_TOKENS.color_grey_500, - hoverReadOnlyBorderColor: CORE_TOKENS.color_grey_600, - errorBorderColor: CORE_TOKENS.color_red_700, - errorBorderColorOnDark: CORE_TOKENS.color_red_500, - hoverErrorBorderColor: CORE_TOKENS.color_red_600, + fontFamily: CoreTokens.type_sans, + enabledBorderColor: CoreTokens.color_black, + enabledBorderColorOnDark: CoreTokens.color_white, + hoverBorderColor: CoreTokens.color_purple_500, + hoverBorderColorOnDark: CoreTokens.color_purple_500, + focusBorderColor: CoreTokens.color_blue_600, + focusBorderColorOnDark: CoreTokens.color_blue_600, + disabledBorderColor: CoreTokens.color_grey_500, + disabledBorderColorOnDark: CoreTokens.color_grey_500, + disabledContainerFillColor: CoreTokens.color_grey_100, + disabledContainerFillColorOnDark: CoreTokens.color_grey_700, + readOnlyBorderColor: CoreTokens.color_grey_500, + hoverReadOnlyBorderColor: CoreTokens.color_grey_600, + errorBorderColor: CoreTokens.color_red_700, + errorBorderColorOnDark: CoreTokens.color_red_500, + hoverErrorBorderColor: CoreTokens.color_red_600, hoverErrorBorderColorOnDark: "#fe677b", - inputMarginTop: CORE_TOKENS.spacing_4, - inputMarginBottom: CORE_TOKENS.spacing_4, - errorMessageColor: CORE_TOKENS.color_red_700, - errorMessageColorOnDark: CORE_TOKENS.color_red_500, - errorIconColor: CORE_TOKENS.color_red_700, - errorIconColorOnDark: CORE_TOKENS.color_red_500, - labelFontColor: CORE_TOKENS.color_black, - labelFontColorOnDark: CORE_TOKENS.color_white, - labelFontSize: CORE_TOKENS.type_scale_02, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_semibold, - labelLineHeight: CORE_TOKENS.type_leading_loose_01, - disabledLabelFontColor: CORE_TOKENS.color_grey_500, - disabledLabelFontColorOnDark: CORE_TOKENS.color_grey_500, - optionalLabelFontWeight: CORE_TOKENS.type_regular, - helperTextFontColor: CORE_TOKENS.color_black, - helperTextFontColorOnDark: CORE_TOKENS.color_white, - helperTextFontSize: CORE_TOKENS.type_scale_01, - helperTextFontStyle: CORE_TOKENS.type_normal, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextLineHeight: CORE_TOKENS.type_leading_normal, - disabledHelperTextFontColor: CORE_TOKENS.color_grey_500, - disabledHelperTextFontColorOnDark: CORE_TOKENS.color_grey_500, - prefixColor: CORE_TOKENS.color_grey_700, - prefixColorOnDark: CORE_TOKENS.color_white, - suffixColor: CORE_TOKENS.color_grey_700, - suffixColorOnDark: CORE_TOKENS.color_white, - disabledPrefixColor: CORE_TOKENS.color_grey_400, - disabledSuffixColor: CORE_TOKENS.color_grey_400, - disabledPrefixColorOnDark: CORE_TOKENS.color_grey_500, - disabledSuffixColorOnDark: CORE_TOKENS.color_grey_500, - placeholderFontColor: CORE_TOKENS.color_grey_800_a, - placeholderFontColorOnDark: CORE_TOKENS.color_grey_100, - disabledPlaceholderFontColor: CORE_TOKENS.color_grey_500, - disabledPlaceholderFontColorOnDark: CORE_TOKENS.color_grey_500, - valueFontColor: CORE_TOKENS.color_black, - valueFontColorOnDark: CORE_TOKENS.color_white, - valueFontSize: CORE_TOKENS.type_scale_03, - valueFontStyle: CORE_TOKENS.type_normal, - valueFontWeight: CORE_TOKENS.type_regular, - disabledValueFontColor: CORE_TOKENS.color_grey_500, - disabledValueFontColorOnDark: CORE_TOKENS.color_grey_500, - actionIconColor: CORE_TOKENS.color_black, - actionIconColorOnDark: CORE_TOKENS.color_white, - disabledActionIconColor: CORE_TOKENS.color_grey_500, - disabledActionIconColorOnDark: CORE_TOKENS.color_grey_500, - hoverActionIconColor: CORE_TOKENS.color_black, - hoverActionIconColorOnDark: CORE_TOKENS.color_white, - focusActionIconColor: CORE_TOKENS.color_black, - focusActionIconColorOnDark: CORE_TOKENS.color_white, - activeActionIconColor: CORE_TOKENS.color_black, - activeActionIconColorOnDark: CORE_TOKENS.color_black, - actionBackgroundColor: CORE_TOKENS.color_transparent, - actionBackgroundColorOnDark: CORE_TOKENS.color_transparent, - disabledActionBackgroundColor: CORE_TOKENS.color_transparent, - disabledActionBackgroundColorOnDark: CORE_TOKENS.color_transparent, - hoverActionBackgroundColor: CORE_TOKENS.color_grey_100, - hoverActionBackgroundColorOnDark: CORE_TOKENS.color_grey_700, - focusActionBorderColor: CORE_TOKENS.color_blue_600, - focusActionBorderColorOnDark: CORE_TOKENS.color_blue_600, - activeActionBackgroundColor: CORE_TOKENS.color_grey_300, - activeActionBackgroundColorOnDark: CORE_TOKENS.color_grey_500, - listDialogBackgroundColor: CORE_TOKENS.color_white, - listDialogBorderColor: CORE_TOKENS.color_grey_400, - listOptionDividerColor: CORE_TOKENS.color_grey_200, - listOptionFontColor: CORE_TOKENS.color_black, - listOptionFontSize: CORE_TOKENS.type_scale_02, - listOptionFontStyle: CORE_TOKENS.type_normal, - listOptionFontWeight: CORE_TOKENS.type_regular, - systemMessageFontColor: CORE_TOKENS.color_grey_700, - errorListDialogFontColor: CORE_TOKENS.color_black, - errorListDialogBackgroundColor: CORE_TOKENS.color_red_50, - errorListDialogBorderColor: CORE_TOKENS.color_red_700, - hoverListOptionBackgroundColor: CORE_TOKENS.color_grey_100, - activeListOptionBackgroundColor: CORE_TOKENS.color_grey_300, - focusListOptionBorderColor: CORE_TOKENS.color_blue_600, + inputMarginTop: CoreTokens.spacing_4, + inputMarginBottom: CoreTokens.spacing_4, + errorMessageColor: CoreTokens.color_red_700, + errorMessageColorOnDark: CoreTokens.color_red_500, + errorIconColor: CoreTokens.color_red_700, + errorIconColorOnDark: CoreTokens.color_red_500, + labelFontColor: CoreTokens.color_black, + labelFontColorOnDark: CoreTokens.color_white, + labelFontSize: CoreTokens.type_scale_02, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_semibold, + labelLineHeight: CoreTokens.type_leading_loose_01, + disabledLabelFontColor: CoreTokens.color_grey_500, + disabledLabelFontColorOnDark: CoreTokens.color_grey_500, + optionalLabelFontWeight: CoreTokens.type_regular, + helperTextFontColor: CoreTokens.color_black, + helperTextFontColorOnDark: CoreTokens.color_white, + helperTextFontSize: CoreTokens.type_scale_01, + helperTextFontStyle: CoreTokens.type_normal, + helperTextFontWeight: CoreTokens.type_regular, + helperTextLineHeight: CoreTokens.type_leading_normal, + disabledHelperTextFontColor: CoreTokens.color_grey_500, + disabledHelperTextFontColorOnDark: CoreTokens.color_grey_500, + prefixColor: CoreTokens.color_grey_700, + prefixColorOnDark: CoreTokens.color_white, + suffixColor: CoreTokens.color_grey_700, + suffixColorOnDark: CoreTokens.color_white, + disabledPrefixColor: CoreTokens.color_grey_400, + disabledSuffixColor: CoreTokens.color_grey_400, + disabledPrefixColorOnDark: CoreTokens.color_grey_500, + disabledSuffixColorOnDark: CoreTokens.color_grey_500, + placeholderFontColor: CoreTokens.color_grey_800_a, + placeholderFontColorOnDark: CoreTokens.color_grey_100, + disabledPlaceholderFontColor: CoreTokens.color_grey_500, + disabledPlaceholderFontColorOnDark: CoreTokens.color_grey_500, + valueFontColor: CoreTokens.color_black, + valueFontColorOnDark: CoreTokens.color_white, + valueFontSize: CoreTokens.type_scale_03, + valueFontStyle: CoreTokens.type_normal, + valueFontWeight: CoreTokens.type_regular, + disabledValueFontColor: CoreTokens.color_grey_500, + disabledValueFontColorOnDark: CoreTokens.color_grey_500, + actionIconColor: CoreTokens.color_black, + actionIconColorOnDark: CoreTokens.color_white, + disabledActionIconColor: CoreTokens.color_grey_500, + disabledActionIconColorOnDark: CoreTokens.color_grey_500, + hoverActionIconColor: CoreTokens.color_black, + hoverActionIconColorOnDark: CoreTokens.color_white, + focusActionIconColor: CoreTokens.color_black, + focusActionIconColorOnDark: CoreTokens.color_white, + activeActionIconColor: CoreTokens.color_black, + activeActionIconColorOnDark: CoreTokens.color_black, + actionBackgroundColor: CoreTokens.color_transparent, + actionBackgroundColorOnDark: CoreTokens.color_transparent, + disabledActionBackgroundColor: CoreTokens.color_transparent, + disabledActionBackgroundColorOnDark: CoreTokens.color_transparent, + hoverActionBackgroundColor: CoreTokens.color_grey_100, + hoverActionBackgroundColorOnDark: CoreTokens.color_grey_700, + focusActionBorderColor: CoreTokens.color_blue_600, + focusActionBorderColorOnDark: CoreTokens.color_blue_600, + activeActionBackgroundColor: CoreTokens.color_grey_300, + activeActionBackgroundColorOnDark: CoreTokens.color_grey_500, + listDialogBackgroundColor: CoreTokens.color_white, + listDialogBorderColor: CoreTokens.color_grey_400, + listOptionDividerColor: CoreTokens.color_grey_200, + listOptionFontColor: CoreTokens.color_black, + listOptionFontSize: CoreTokens.type_scale_02, + listOptionFontStyle: CoreTokens.type_normal, + listOptionFontWeight: CoreTokens.type_regular, + systemMessageFontColor: CoreTokens.color_grey_700, + errorListDialogFontColor: CoreTokens.color_black, + errorListDialogBackgroundColor: CoreTokens.color_red_50, + errorListDialogBorderColor: CoreTokens.color_red_700, + hoverListOptionBackgroundColor: CoreTokens.color_grey_100, + activeListOptionBackgroundColor: CoreTokens.color_grey_300, + focusListOptionBorderColor: CoreTokens.color_blue_600, }, toggleGroup: { - containerBackgroundColor: CORE_TOKENS.color_grey_50, - containerBorderColor: CORE_TOKENS.color_grey_500, - labelFontColor: CORE_TOKENS.color_black, - disabledLabelFontColor: CORE_TOKENS.color_grey_500, - helperTextFontColor: CORE_TOKENS.color_black, - disabledHelperTextFontcolor: CORE_TOKENS.color_grey_500, - unselectedBackgroundColor: CORE_TOKENS.color_grey_200, - unselectedHoverBackgroundColor: CORE_TOKENS.color_grey_300, - unselectedActiveBackgroundColor: CORE_TOKENS.color_purple_700, - unselectedDisabledBackgroundColor: CORE_TOKENS.color_grey_100, - unselectedFontColor: CORE_TOKENS.color_black, - unselectedDisabledFontColor: CORE_TOKENS.color_grey_500, - selectedBackgroundColor: CORE_TOKENS.color_purple_700, - selectedHoverBackgroundColor: CORE_TOKENS.color_purple_800, - selectedActiveBackgroundColor: CORE_TOKENS.color_purple_900, - selectedDisabledBackgroundColor: CORE_TOKENS.color_purple_100, - selectedFontColor: CORE_TOKENS.color_white, - selectedDisabledFontColor: CORE_TOKENS.color_purple_300, - focusColor: CORE_TOKENS.color_blue_600, - labelFontFamily: CORE_TOKENS.type_sans, - labelFontSize: CORE_TOKENS.type_scale_02, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_semibold, - labelLineHeight: CORE_TOKENS.type_leading_loose_01, - helperTextFontFamily: CORE_TOKENS.type_sans, - helperTextFontSize: CORE_TOKENS.type_scale_01, - helperTextFontStyle: CORE_TOKENS.type_normal, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextLineHeight: CORE_TOKENS.type_leading_normal, - optionLabelFontFamily: CORE_TOKENS.type_sans, - optionLabelFontSize: CORE_TOKENS.type_scale_03, - optionLabelFontStyle: CORE_TOKENS.type_normal, - optionLabelFontWeight: CORE_TOKENS.type_regular, - iconPaddingRight: CORE_TOKENS.spacing_8, - iconPaddingLeft: CORE_TOKENS.spacing_8, - labelPaddingLeft: CORE_TOKENS.spacing_24, - labelPaddingRight: CORE_TOKENS.spacing_24, - iconMarginRight: CORE_TOKENS.spacing_8, - containerMarginTop: CORE_TOKENS.spacing_4, - optionBorderThickness: CORE_TOKENS.border_width_0, - optionBorderStyle: CORE_TOKENS.border_none, - optionBorderRadius: CORE_TOKENS.border_radius_medium, - containerBorderThickness: CORE_TOKENS.border_width_1, - containerBorderStyle: CORE_TOKENS.border_solid, - containerBorderRadius: CORE_TOKENS.border_radius_large, - optionFocusBorderThickness: CORE_TOKENS.border_width_2, + containerBackgroundColor: CoreTokens.color_grey_50, + containerBorderColor: CoreTokens.color_grey_500, + labelFontColor: CoreTokens.color_black, + disabledLabelFontColor: CoreTokens.color_grey_500, + helperTextFontColor: CoreTokens.color_black, + disabledHelperTextFontcolor: CoreTokens.color_grey_500, + unselectedBackgroundColor: CoreTokens.color_grey_200, + unselectedHoverBackgroundColor: CoreTokens.color_grey_300, + unselectedActiveBackgroundColor: CoreTokens.color_purple_700, + unselectedDisabledBackgroundColor: CoreTokens.color_grey_100, + unselectedFontColor: CoreTokens.color_black, + unselectedDisabledFontColor: CoreTokens.color_grey_500, + selectedBackgroundColor: CoreTokens.color_purple_700, + selectedHoverBackgroundColor: CoreTokens.color_purple_800, + selectedActiveBackgroundColor: CoreTokens.color_purple_900, + selectedDisabledBackgroundColor: CoreTokens.color_purple_100, + selectedFontColor: CoreTokens.color_white, + selectedDisabledFontColor: CoreTokens.color_purple_300, + focusColor: CoreTokens.color_blue_600, + labelFontFamily: CoreTokens.type_sans, + labelFontSize: CoreTokens.type_scale_02, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_semibold, + labelLineHeight: CoreTokens.type_leading_loose_01, + helperTextFontFamily: CoreTokens.type_sans, + helperTextFontSize: CoreTokens.type_scale_01, + helperTextFontStyle: CoreTokens.type_normal, + helperTextFontWeight: CoreTokens.type_regular, + helperTextLineHeight: CoreTokens.type_leading_normal, + optionLabelFontFamily: CoreTokens.type_sans, + optionLabelFontSize: CoreTokens.type_scale_03, + optionLabelFontStyle: CoreTokens.type_normal, + optionLabelFontWeight: CoreTokens.type_regular, + iconPaddingRight: CoreTokens.spacing_8, + iconPaddingLeft: CoreTokens.spacing_8, + labelPaddingLeft: CoreTokens.spacing_24, + labelPaddingRight: CoreTokens.spacing_24, + iconMarginRight: CoreTokens.spacing_8, + containerMarginTop: CoreTokens.spacing_4, + optionBorderThickness: CoreTokens.border_width_0, + optionBorderStyle: CoreTokens.border_none, + optionBorderRadius: CoreTokens.border_radius_medium, + containerBorderThickness: CoreTokens.border_width_1, + containerBorderStyle: CoreTokens.border_solid, + containerBorderRadius: CoreTokens.border_radius_large, + optionFocusBorderThickness: CoreTokens.border_width_2, }, wizard: { - visitedStepFontColor: CORE_TOKENS.color_black, - visitedStepBackgroundColor: CORE_TOKENS.color_white, - visitedStepBorderColor: CORE_TOKENS.color_black, - unvisitedStepFontColor: CORE_TOKENS.color_grey_700, - unvisitedLabelFontColor: CORE_TOKENS.color_grey_700, - unvisitedHelperTextFontColor: CORE_TOKENS.color_grey_700, - unvisitedStepBackgroundColor: CORE_TOKENS.color_transparent, - unvisitedStepBorderColor: CORE_TOKENS.color_grey_700, - selectedStepFontColor: CORE_TOKENS.color_white, - selectedStepBackgroundColor: CORE_TOKENS.color_purple_700, - selectedStepBorderColor: CORE_TOKENS.color_purple_700, - selectedLabelFontColor: CORE_TOKENS.color_black, - selectedHelperTextFontColor: CORE_TOKENS.color_black, + visitedStepFontColor: CoreTokens.color_black, + visitedStepBackgroundColor: CoreTokens.color_white, + visitedStepBorderColor: CoreTokens.color_black, + unvisitedStepFontColor: CoreTokens.color_grey_700, + unvisitedLabelFontColor: CoreTokens.color_grey_700, + unvisitedHelperTextFontColor: CoreTokens.color_grey_700, + unvisitedStepBackgroundColor: CoreTokens.color_transparent, + unvisitedStepBorderColor: CoreTokens.color_grey_700, + selectedStepFontColor: CoreTokens.color_white, + selectedStepBackgroundColor: CoreTokens.color_purple_700, + selectedStepBorderColor: CoreTokens.color_purple_700, + selectedLabelFontColor: CoreTokens.color_black, + selectedHelperTextFontColor: CoreTokens.color_black, selectedStepWidth: "32px", selectedStepHeight: "32px", selectedStepBorderThickness: "2px", - selectedStepBorderStyle: CORE_TOKENS.border_solid, + selectedStepBorderStyle: CoreTokens.border_solid, selectedStepBorderRadius: "45px", - stepFontSize: CORE_TOKENS.type_scale_03, - stepFontFamily: CORE_TOKENS.type_sans, - stepFontStyle: CORE_TOKENS.type_normal, - stepFontWeight: CORE_TOKENS.type_regular, - stepFontTracking: CORE_TOKENS.type_spacing_wide_02, + stepFontSize: CoreTokens.type_scale_03, + stepFontFamily: CoreTokens.type_sans, + stepFontStyle: CoreTokens.type_normal, + stepFontWeight: CoreTokens.type_regular, + stepFontTracking: CoreTokens.type_spacing_wide_02, stepIconSize: "20px", stepWidth: "32px", stepHeight: "32px", stepBorderThickness: "2px", - stepBorderStyle: CORE_TOKENS.border_solid, + stepBorderStyle: CoreTokens.border_solid, stepBorderRadius: "45px", - visitedLabelFontColor: CORE_TOKENS.color_black, - labelFontSize: CORE_TOKENS.type_scale_03, - labelFontFamily: CORE_TOKENS.type_sans, - labelFontStyle: CORE_TOKENS.type_normal, - labelFontWeight: CORE_TOKENS.type_regular, - labelFontTracking: CORE_TOKENS.type_spacing_normal, + visitedLabelFontColor: CoreTokens.color_black, + labelFontSize: CoreTokens.type_scale_03, + labelFontFamily: CoreTokens.type_sans, + labelFontStyle: CoreTokens.type_normal, + labelFontWeight: CoreTokens.type_regular, + labelFontTracking: CoreTokens.type_spacing_normal, labelFontTextTransform: "none", labelTextAlign: "left", - helperTextFontSize: CORE_TOKENS.type_scale_02, - helperTextFontFamily: CORE_TOKENS.type_sans, - helperTextFontStyle: CORE_TOKENS.type_normal, - helperTextFontWeight: CORE_TOKENS.type_regular, - helperTextFontTracking: CORE_TOKENS.type_spacing_normal, + helperTextFontSize: CoreTokens.type_scale_02, + helperTextFontFamily: CoreTokens.type_sans, + helperTextFontStyle: CoreTokens.type_normal, + helperTextFontWeight: CoreTokens.type_regular, + helperTextFontTracking: CoreTokens.type_spacing_normal, helperTextFontTextTransform: "none", - visitedHelperTextFontColor: CORE_TOKENS.color_black, + visitedHelperTextFontColor: CoreTokens.color_black, helperTextTextAlign: "left", - disabledStepBackgroundColor: CORE_TOKENS.color_grey_100, - disabledStepFontColor: CORE_TOKENS.color_grey_500, - disabledLabelFontColor: CORE_TOKENS.color_grey_500, - disabledHelperTextFontColor: CORE_TOKENS.color_grey_500, - disabledStepBorderColor: CORE_TOKENS.color_grey_100, + disabledStepBackgroundColor: CoreTokens.color_grey_100, + disabledStepFontColor: CoreTokens.color_grey_500, + disabledLabelFontColor: CoreTokens.color_grey_500, + disabledHelperTextFontColor: CoreTokens.color_grey_500, + disabledStepBorderColor: CoreTokens.color_grey_100, disabledStepWidth: "32px", disabledStepHeight: "32px", disabledStepBorderThickness: "2px", - disabledStepBorderStyle: CORE_TOKENS.border_solid, + disabledStepBorderStyle: CoreTokens.border_solid, disabledStepBorderRadius: "45px", separatorBorderThickness: "1px", - separatorBorderStyle: CORE_TOKENS.border_solid, - separatorColor: CORE_TOKENS.color_grey_700, - focusColor: CORE_TOKENS.color_blue_600, + separatorBorderStyle: CoreTokens.border_solid, + separatorColor: CoreTokens.color_grey_700, + focusColor: CoreTokens.color_blue_600, }, }; diff --git a/lib/src/container/Container.stories.tsx b/lib/src/container/Container.stories.tsx new file mode 100644 index 000000000..595eff451 --- /dev/null +++ b/lib/src/container/Container.stories.tsx @@ -0,0 +1,153 @@ +import React from "react"; +import Title from "../../.storybook/components/Title"; +import ExampleContainer from "../../.storybook/components/ExampleContainer"; +import DxcContainer from "./Container"; + +export default { + title: "Container", + component: DxcContainer, +}; + +export const Chromatic = () => ( + <> + + <ExampleContainer> + <DxcContainer + boxSizing="border-box" + width="200px" + height="200px" + background={{ color: "color_purple_400" }} + border={{ width: "thick", color: "color_purple_600", style:"solid", radius: "4px" }} + padding="medium" + > + <b>Example text</b> + </DxcContainer> + </ExampleContainer> + <Title title="Background image" level={4} /> + <ExampleContainer> + <DxcContainer + background={{ + image: "url(https://www.laecuaciondigital.com/wp-content/uploads/2023/10/DXC-Technology.png)", + position: "50%", + }} + width="500px" + height="500px" + > + <p>Example text</p> + </DxcContainer> + </ExampleContainer> + <Title title="Positioning of boxes" level={4} /> + <ExampleContainer> + <DxcContainer + position="relative" + width="fit-content" + border={{ color: "color_purple_400", width: "2px", style: "dashed", radius: "4px" }} + margin={{ bottom: "xxlarge" }} + > + <DxcContainer display="inline-block" background={{ color: "color_purple_400" }} width="50px" height="50px"> + <b>1</b> + </DxcContainer> + <DxcContainer display="inline-block" background={{ color: "color_purple_400" }} width="50px" height="50px"> + <b>2</b> + </DxcContainer> + <DxcContainer + display="inline-block" + position="absolute" + inset={{ top: "25px", left: "0" }} + background={{ color: "color_blue_500" }} + width="50px" + height="50px" + zIndex={1} + > + <b>3</b> + </DxcContainer> + </DxcContainer> + </ExampleContainer> + <Title title="Margin collapse" level={4} /> + <ExampleContainer> + <DxcContainer + width="fit-content" + border={{ color: "color_purple_400", width: "2px", style: "dashed", radius: "4px" }} + > + <DxcContainer + background={{ color: "color_purple_400" }} + width="50px" + height="50px" + margin={{ bottom: "medium" }} + > + <b>1</b> + </DxcContainer> + <DxcContainer background={{ color: "color_purple_400" }} width="50px" height="50px" margin={{ top: "large" }}> + <b>2</b> + </DxcContainer> + </DxcContainer> + </ExampleContainer> + <Title title="Overflow" level={4} /> + <ExampleContainer> + <DxcContainer overflow={{ x: "auto" }} maxHeight="100px" width="fit-content"> + <DxcContainer + border={{ width: "1px", style: "solid", color: "color_black" }} + background={{ color: "color_purple_400" }} + width="50px" + height="50px" + > + <b>1</b> + </DxcContainer> + <DxcContainer + border={{ width: "1px", style: "solid", color: "color_black" }} + background={{ color: "color_purple_400" }} + width="50px" + height="50px" + > + <b>2</b> + </DxcContainer> + <DxcContainer + border={{ width: "1px", style: "solid", color: "color_black" }} + background={{ color: "color_purple_400" }} + width="50px" + height="50px" + > + <b>3</b> + </DxcContainer> + </DxcContainer> + </ExampleContainer> + <Title title="Float" level={4} /> + <ExampleContainer> + <DxcContainer padding="medium" border={{ width: "1px", style: "solid", color: "color_black" }}> + <DxcContainer float="right" background={{ color: "color_purple_400" }} width="100px" height="100px"> + <b>Floating text</b> + </DxcContainer> + <p style={{ margin: 0 }}> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl + quam tincidunt ligula, eget aliquam eros quam quis nunc. Donec euismod, nisl eget ultricies aliquam, nisl + velit aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam + nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, + quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, quis + aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, quis aliquam + nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, quis aliquam nisl. + </p> + </DxcContainer> + <Title title="Box shadow and opacity" level={4} /> + <ExampleContainer> + <DxcContainer + padding="medium" + outline={{ width: "1px", style: "solid", color: "color_black" }} + boxShadow="10px 5px 5px #fe0123" + opacity="0.75" + > + <p style={{ margin: 0 }}> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl + quam tincidunt ligula, eget aliquam eros quam quis nunc. Donec euismod, nisl eget ultricies aliquam, nisl + velit aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl. + </p> + </DxcContainer> + </ExampleContainer> + </ExampleContainer> + </> +); diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx new file mode 100644 index 000000000..a7461cb09 --- /dev/null +++ b/lib/src/container/Container.tsx @@ -0,0 +1,91 @@ +import React from "react"; +import styled from "styled-components"; +import ContainerPropsType from "./types"; +import { getColorToken } from "../common/coreTokens"; + +/** + * This values correspond to the spaces defined in the design system + * https://developer.dxc.com/halstack/next/principles/spacing/#component-spacing-tokens + */ +const spaces = { + xxsmall: "4px", + xsmall: "8px", + small: "12px", + medium: "16px", + large: "24px", + xlarge: "32px", + xxlarge: "48px", +}; + +const DxcContainer = (props: ContainerPropsType) => <Container {...props} />; + +const Container = styled.div<ContainerPropsType>` + box-sizing: ${({ boxSizing }) => boxSizing}; + display: ${({ display }) => display}; + width: ${({ width }) => width}; + height: ${({ height }) => height}; + max-width: ${({ maxWidth }) => maxWidth}; + max-height: ${({ maxHeight }) => maxHeight}; + min-width: ${({ minWidth }) => minWidth}; + min-height: ${({ minHeight }) => minHeight}; + position: ${({ position }) => position}; + top: ${({ inset }) => inset?.top}; + right: ${({ inset }) => inset?.right}; + bottom: ${({ inset }) => inset?.bottom}; + left: ${({ inset }) => inset?.left}; + float: ${({ float }) => float}; + z-index: ${({ zIndex }) => zIndex}; + box-shadow: ${({ boxShadow }) => boxShadow}; + opacity: ${({ opacity }) => opacity}; + outline: ${({ outline }) => `${outline?.width} ${outline?.style} ${getColorToken(outline?.color)}`}; + outline-offset: ${({ outline }) => outline?.offset}; + + margin: ${({ margin }) => (typeof margin === "string" ? `${spaces[margin]}` : "")}; + margin-top: ${({ margin }) => (typeof margin === "object" ? spaces[margin.top] : "")}; + margin-right: ${({ margin }) => (typeof margin === "object" ? spaces[margin.right] : "")}; + margin-bottom: ${({ margin }) => (typeof margin === "object" ? spaces[margin.bottom] : "")}; + margin-left: ${({ margin }) => (typeof margin === "object" ? spaces[margin.left] : "")}; + + padding: ${({ padding }) => (typeof padding === "string" ? `${spaces[padding]}` : "")}; + padding-top: ${({ padding }) => (typeof padding === "object" ? spaces[padding.top] : "")}; + padding-right: ${({ padding }) => (typeof padding === "object" ? spaces[padding.right] : "")}; + padding-bottom: ${({ padding }) => (typeof padding === "object" ? spaces[padding.bottom] : "")}; + padding-left: ${({ padding }) => (typeof padding === "object" ? spaces[padding.left] : "")}; + + border: ${({ border }) => + border && "width" in border ? `${border?.width} ${border?.style} ${getColorToken(border?.color)}` : ""}; + border-radius: ${({ border }) => (border && "radius" in border ? `${border?.radius}` : "")}; + border-top: ${({ border }) => + border && "top" in border ? `${border?.top?.width} ${border?.top?.style} ${getColorToken(border?.top?.color)}` : ""}; + border-top-right-radius: ${({ border }) => (border && "top" in border ? `${border?.top?.rightRadius}` : "")}; + border-top-left-radius: ${({ border }) => (border && "top" in border ? `${border?.top?.leftRadius}` : "")}; + border-right: ${({ border }) => + border && "right" in border + ? `${border?.right?.width} ${border?.right?.style} ${getColorToken(border?.right?.color)}` + : ""}; + border-bottom: ${({ border }) => + border && "bottom" in border + ? `${border?.bottom?.width} ${border?.bottom?.style} ${getColorToken(border?.bottom?.color)}` + : ""}; + border-bottom-right-radius: ${({ border }) => (border && "bottom" in border ? `${border?.bottom?.rightRadius}` : "")}; + border-bottom-left-radius: ${({ border }) => (border && "bottom" in border ? `${border?.bottom?.leftRadius}` : "")}; + border-left: ${({ border }) => + border && "left" in border + ? `${border?.left?.width} ${border?.left?.style} ${getColorToken(border?.left?.color)}` + : ""}; + + overflow: ${({ overflow }) => (typeof overflow !== "object" ? overflow : "")}; + overflow-x: ${({ overflow }) => (typeof overflow === "object" ? `${overflow?.x}` : "")}; + overflow-y: ${({ overflow }) => (typeof overflow === "object" ? `${overflow?.y}` : "")}; + + background-attachment: ${({ background }) => background?.attachment}; + background-clip: ${({ background }) => background?.clip}; + background-color: ${({ background }) => getColorToken(background?.color)}; + background-image: ${({ background }) => background?.image}; + background-origin: ${({ background }) => background?.origin}; + background-position: ${({ background }) => background?.position}; + background-repeat: ${({ background }) => background?.repeat}; + background-size: ${({ background }) => background?.size}; +`; + +export default DxcContainer; diff --git a/lib/src/container/types.ts b/lib/src/container/types.ts new file mode 100644 index 000000000..aeec0f372 --- /dev/null +++ b/lib/src/container/types.ts @@ -0,0 +1,83 @@ +import { ColorTokenKeys } from "../common/coreTokens"; + +type SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"; +type Space = + | SpacingValues + | { + top?: SpacingValues; + right?: SpacingValues; + bottom?: SpacingValues; + left?: SpacingValues; + }; + +type Inset = { + top?: string; + right?: string; + bottom?: string; + left?: string; +}; + +type Background = { + attachment?: string; + clip?: string; + color?: ColorTokenKeys; + image?: string; + origin?: string; + position?: string; + repeat?: string; + size?: string; +}; + +type BorderGenericProperties = { + width?: string; + style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"; + color?: ColorTokenKeys; +} +type BorderProperties = BorderGenericProperties & { + radius?: string; +}; +type TopBottomBorder = BorderGenericProperties & { + rightRadius?: string; + leftRadius?: string; +}; +type Border = + | BorderProperties + | { + top?: TopBottomBorder; + right?: BorderGenericProperties; + bottom?: TopBottomBorder; + left?: BorderGenericProperties; + }; + +type Outline = BorderGenericProperties & { + offset?: string; +}; + +type OverflowValues = "visible" | "hidden" | "clip" | "scroll" | "auto"; +type Overflow = OverflowValues | { x?: OverflowValues; y?: OverflowValues }; + +type Props = { + boxSizing?: "border-box" | "content-box"; + display?: "block" | "inline-block" | "inline" | "none"; + width?: string; + height?: string; + maxWidth?: string; + maxHeight?: string; + minWidth?: string; + minHeight?: string; + padding?: Space; + border?: Border; + margin?: Space; + overflow?: Overflow; + position?: "static" | "relative" | "absolute" | "fixed" | "sticky"; + inset?: Inset; + float?: "left" | "right" | "none"; + zIndex?: "auto" | number; + background?: Background; + boxShadow?: string; + opacity?: string; + outline?: Outline; + children: React.ReactNode; +}; + +export default Props; From bb62eab6516484f473f1584b544df49b0917ff65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Tue, 19 Dec 2023 13:37:36 +0100 Subject: [PATCH 2/8] New tests for the Container component --- lib/src/container/Container.stories.tsx | 54 ++++++++++++++++++++++++- lib/src/container/Container.tsx | 13 ++++-- lib/src/container/types.ts | 1 + 3 files changed, 64 insertions(+), 4 deletions(-) diff --git a/lib/src/container/Container.stories.tsx b/lib/src/container/Container.stories.tsx index 595eff451..441fe1d58 100644 --- a/lib/src/container/Container.stories.tsx +++ b/lib/src/container/Container.stories.tsx @@ -2,6 +2,8 @@ import React from "react"; import Title from "../../.storybook/components/Title"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import DxcContainer from "./Container"; +import DxcParagraph from "../paragraph/Paragraph"; +import DxcTypography from "../typography/Typography"; export default { title: "Container", @@ -17,7 +19,7 @@ export const Chromatic = () => ( width="200px" height="200px" background={{ color: "color_purple_400" }} - border={{ width: "thick", color: "color_purple_600", style:"solid", radius: "4px" }} + border={{ width: "thick", color: "color_purple_600", style: "solid", radius: "4px" }} padding="medium" > <b>Example text</b> @@ -148,6 +150,56 @@ export const Chromatic = () => ( </p> </DxcContainer> </ExampleContainer> + <Title title="Background color provider" level={4} /> + <ExampleContainer> + <DxcContainer padding="medium" background={{ color: "color_black" }}> + <DxcParagraph> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl + quam tincidunt ligula, eget aliquam eros quam quis nunc. Donec euismod, nisl eget ultricies aliquam, nisl + velit aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl. + </DxcParagraph> + </DxcContainer> + </ExampleContainer> + <Title title="Building a listbox component" level={4} /> + <ExampleContainer> + <Listbox suggestions={["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"]} /> + </ExampleContainer> </ExampleContainer> </> ); + +const Listbox = ({ suggestions = [] }: { suggestions: string[] }): JSX.Element => ( + <DxcContainer + boxSizing="border-box" + boxShadow="0 4px 6px -1px rgba(0, 0, 0, 0.1)" + border={{ width: "1px", style: "solid", color: "color_grey_400", radius: "0.25rem" }} + background={{ color: "color_white" }} + padding={{ top: "xxsmall", bottom: "xxsmall" }} + maxHeight="304px" + width="200px" + overflow={{ x: "hidden", y: "auto" }} + > + {suggestions.map((suggestion, index) => ( + <DxcContainer padding={{ left: "xsmall", right: "xsmall" }}> + <DxcContainer + border={ + index !== suggestions.length - 1 + ? { bottom: { width: "1px", style: "solid", color: "color_grey_200" } } + : undefined + } + padding={{ top: "xxsmall", bottom: "xxsmall", left: "xxsmall", right: "xxsmall" }} + overflow="hidden" + > + <DxcTypography whiteSpace="nowrap" textOverflow="ellipsis" lineHeight="1.715em"> + {suggestion} + </DxcTypography> + </DxcContainer> + </DxcContainer> + ))} + </DxcContainer> +); diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx index a7461cb09..334e5e50f 100644 --- a/lib/src/container/Container.tsx +++ b/lib/src/container/Container.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled from "styled-components"; import ContainerPropsType from "./types"; import { getColorToken } from "../common/coreTokens"; +import { BackgroundColorProvider } from "../BackgroundColorContext"; /** * This values correspond to the spaces defined in the design system @@ -17,7 +18,11 @@ const spaces = { xxlarge: "48px", }; -const DxcContainer = (props: ContainerPropsType) => <Container {...props} />; +const DxcContainer = (props: ContainerPropsType) => ( + <BackgroundColorProvider color={getColorToken(props?.background?.color)}> + <Container {...props} /> + </BackgroundColorProvider> +); const Container = styled.div<ContainerPropsType>` box-sizing: ${({ boxSizing }) => boxSizing}; @@ -56,7 +61,9 @@ const Container = styled.div<ContainerPropsType>` border && "width" in border ? `${border?.width} ${border?.style} ${getColorToken(border?.color)}` : ""}; border-radius: ${({ border }) => (border && "radius" in border ? `${border?.radius}` : "")}; border-top: ${({ border }) => - border && "top" in border ? `${border?.top?.width} ${border?.top?.style} ${getColorToken(border?.top?.color)}` : ""}; + border && "top" in border + ? `${border?.top?.width} ${border?.top?.style} ${getColorToken(border?.top?.color)}` + : ""}; border-top-right-radius: ${({ border }) => (border && "top" in border ? `${border?.top?.rightRadius}` : "")}; border-top-left-radius: ${({ border }) => (border && "top" in border ? `${border?.top?.leftRadius}` : "")}; border-right: ${({ border }) => @@ -77,7 +84,7 @@ const Container = styled.div<ContainerPropsType>` overflow: ${({ overflow }) => (typeof overflow !== "object" ? overflow : "")}; overflow-x: ${({ overflow }) => (typeof overflow === "object" ? `${overflow?.x}` : "")}; overflow-y: ${({ overflow }) => (typeof overflow === "object" ? `${overflow?.y}` : "")}; - + background-attachment: ${({ background }) => background?.attachment}; background-clip: ${({ background }) => background?.clip}; background-color: ${({ background }) => getColorToken(background?.color)}; diff --git a/lib/src/container/types.ts b/lib/src/container/types.ts index aeec0f372..38b7cefed 100644 --- a/lib/src/container/types.ts +++ b/lib/src/container/types.ts @@ -78,6 +78,7 @@ type Props = { opacity?: string; outline?: Outline; children: React.ReactNode; + as?: keyof HTMLElementTagNameMap; }; export default Props; From 6826e6acdf6b68c277b889d2a1799e288d784987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Tue, 19 Dec 2023 14:33:25 +0100 Subject: [PATCH 3/8] Adding transient props to remove wrong html properties --- lib/src/container/Container.stories.tsx | 5 +++-- lib/src/container/Container.tsx | 22 +++++++++++----------- lib/src/container/types.ts | 10 +++++++++- 3 files changed, 23 insertions(+), 14 deletions(-) diff --git a/lib/src/container/Container.stories.tsx b/lib/src/container/Container.stories.tsx index 441fe1d58..2c126ee40 100644 --- a/lib/src/container/Container.stories.tsx +++ b/lib/src/container/Container.stories.tsx @@ -19,8 +19,9 @@ export const Chromatic = () => ( width="200px" height="200px" background={{ color: "color_purple_400" }} - border={{ width: "thick", color: "color_purple_600", style: "solid", radius: "4px" }} + border={{ bottom: { width: "thick", color: "color_purple_600", style: "solid", leftRadius: "0.25rem", rightRadius: "0.25rem" } }} padding="medium" + margin="large" > <b>Example text</b> </DxcContainer> @@ -181,7 +182,7 @@ const Listbox = ({ suggestions = [] }: { suggestions: string[] }): JSX.Element = background={{ color: "color_white" }} padding={{ top: "xxsmall", bottom: "xxsmall" }} maxHeight="304px" - width="200px" + width="250px" overflow={{ x: "hidden", y: "auto" }} > {suggestions.map((suggestion, index) => ( diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx index 334e5e50f..49536cb01 100644 --- a/lib/src/container/Container.tsx +++ b/lib/src/container/Container.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import ContainerPropsType from "./types"; +import ContainerPropsType, { StyledProps } from "./types"; import { getColorToken } from "../common/coreTokens"; import { BackgroundColorProvider } from "../BackgroundColorContext"; @@ -18,17 +18,17 @@ const spaces = { xxlarge: "48px", }; -const DxcContainer = (props: ContainerPropsType) => ( +const DxcContainer = ({ display, width, height, opacity, overflow, ...props }: ContainerPropsType) => ( <BackgroundColorProvider color={getColorToken(props?.background?.color)}> - <Container {...props} /> + <Container $display={display} $width={width} $height={height} $opacity={opacity} $overflow={overflow} {...props} /> </BackgroundColorProvider> ); -const Container = styled.div<ContainerPropsType>` +const Container = styled.div<StyledProps>` box-sizing: ${({ boxSizing }) => boxSizing}; - display: ${({ display }) => display}; - width: ${({ width }) => width}; - height: ${({ height }) => height}; + display: ${({ $display }) => $display}; + width: ${({ $width }) => $width}; + height: ${({ $height }) => $height}; max-width: ${({ maxWidth }) => maxWidth}; max-height: ${({ maxHeight }) => maxHeight}; min-width: ${({ minWidth }) => minWidth}; @@ -41,7 +41,7 @@ const Container = styled.div<ContainerPropsType>` float: ${({ float }) => float}; z-index: ${({ zIndex }) => zIndex}; box-shadow: ${({ boxShadow }) => boxShadow}; - opacity: ${({ opacity }) => opacity}; + opacity: ${({ $opacity }) => $opacity}; outline: ${({ outline }) => `${outline?.width} ${outline?.style} ${getColorToken(outline?.color)}`}; outline-offset: ${({ outline }) => outline?.offset}; @@ -81,9 +81,9 @@ const Container = styled.div<ContainerPropsType>` ? `${border?.left?.width} ${border?.left?.style} ${getColorToken(border?.left?.color)}` : ""}; - overflow: ${({ overflow }) => (typeof overflow !== "object" ? overflow : "")}; - overflow-x: ${({ overflow }) => (typeof overflow === "object" ? `${overflow?.x}` : "")}; - overflow-y: ${({ overflow }) => (typeof overflow === "object" ? `${overflow?.y}` : "")}; + overflow: ${({ $overflow }) => (typeof $overflow !== "object" ? $overflow : "")}; + overflow-x: ${({ $overflow }) => (typeof $overflow === "object" ? `${$overflow?.x}` : "")}; + overflow-y: ${({ $overflow }) => (typeof $overflow === "object" ? `${$overflow?.y}` : "")}; background-attachment: ${({ background }) => background?.attachment}; background-clip: ${({ background }) => background?.clip}; diff --git a/lib/src/container/types.ts b/lib/src/container/types.ts index 38b7cefed..60cf7e3a8 100644 --- a/lib/src/container/types.ts +++ b/lib/src/container/types.ts @@ -32,7 +32,7 @@ type BorderGenericProperties = { width?: string; style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"; color?: ColorTokenKeys; -} +}; type BorderProperties = BorderGenericProperties & { radius?: string; }; @@ -81,4 +81,12 @@ type Props = { as?: keyof HTMLElementTagNameMap; }; +export type StyledProps = Omit<Props, "display" | "width" | "height" | "opacity" | "overflow"> & { + $display?: "block" | "inline-block" | "inline" | "none"; + $width?: string; + $height?: string; + $opacity?: string; + $overflow?: Overflow; +}; + export default Props; From 768eacd7786f54130c76c9c7101afad3aaf6ac13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Tue, 19 Dec 2023 16:15:07 +0100 Subject: [PATCH 4/8] Small updates on the stories --- lib/src/container/Container.stories.tsx | 80 ++++++++++++++----------- 1 file changed, 44 insertions(+), 36 deletions(-) diff --git a/lib/src/container/Container.stories.tsx b/lib/src/container/Container.stories.tsx index 2c126ee40..732f93b9d 100644 --- a/lib/src/container/Container.stories.tsx +++ b/lib/src/container/Container.stories.tsx @@ -19,7 +19,15 @@ export const Chromatic = () => ( width="200px" height="200px" background={{ color: "color_purple_400" }} - border={{ bottom: { width: "thick", color: "color_purple_600", style: "solid", leftRadius: "0.25rem", rightRadius: "0.25rem" } }} + border={{ + bottom: { + width: "thick", + color: "color_purple_600", + style: "solid", + leftRadius: "0.25rem", + rightRadius: "0.25rem", + }, + }} padding="medium" margin="large" > @@ -131,41 +139,41 @@ export const Chromatic = () => ( nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, quis aliquam nisl. </p> </DxcContainer> - <Title title="Box shadow and opacity" level={4} /> - <ExampleContainer> - <DxcContainer - padding="medium" - outline={{ width: "1px", style: "solid", color: "color_black" }} - boxShadow="10px 5px 5px #fe0123" - opacity="0.75" - > - <p style={{ margin: 0 }}> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl - quam tincidunt ligula, eget aliquam eros quam quis nunc. Donec euismod, nisl eget ultricies aliquam, nisl - velit aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl. - </p> - </DxcContainer> - </ExampleContainer> - <Title title="Background color provider" level={4} /> - <ExampleContainer> - <DxcContainer padding="medium" background={{ color: "color_black" }}> - <DxcParagraph> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl - quam tincidunt ligula, eget aliquam eros quam quis nunc. Donec euismod, nisl eget ultricies aliquam, nisl - velit aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit - aliquam nunc, quis aliquam nisl. - </DxcParagraph> - </DxcContainer> - </ExampleContainer> + </ExampleContainer> + <Title title="Box shadow and opacity" level={4} /> + <ExampleContainer> + <DxcContainer + padding="medium" + outline={{ width: "1px", style: "solid", color: "color_black" }} + boxShadow="10px 5px 5px #fe0123" + opacity="0.75" + > + <p style={{ margin: 0 }}> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl + quam tincidunt ligula, eget aliquam eros quam quis nunc. Donec euismod, nisl eget ultricies aliquam, nisl + velit aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam + nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, + quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, quis + aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, quis aliquam + nisl. + </p> + </DxcContainer> + </ExampleContainer> + <Title title="Background color provider" level={4} /> + <ExampleContainer> + <DxcContainer padding="medium" background={{ color: "color_black" }}> + <DxcParagraph> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl + quam tincidunt ligula, eget aliquam eros quam quis nunc. Donec euismod, nisl eget ultricies aliquam, nisl + velit aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit + aliquam nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam + nunc, quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, + quis aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, quis + aliquam nisl nunc vel nisl. Donec euismod, nisl eget ultricies aliquam, nisl velit aliquam nunc, quis aliquam + nisl. + </DxcParagraph> + </DxcContainer> <Title title="Building a listbox component" level={4} /> <ExampleContainer> <Listbox suggestions={["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"]} /> From 5d549530fceef357451ab1dbad1c08556704c8a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 20 Dec 2023 09:45:54 +0100 Subject: [PATCH 5/8] Adding the component to the exported list --- lib/src/main.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/main.ts b/lib/src/main.ts index b1da653c2..cfef4248e 100644 --- a/lib/src/main.ts +++ b/lib/src/main.ts @@ -41,6 +41,7 @@ import DxcParagraph from "./paragraph/Paragraph"; import DxcBulletedList from "./bulleted-list/BulletedList"; import DxcGrid from "./grid/Grid"; import DxcImage from "./image/Image"; +import DxcContainer from "./container/Container"; import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext"; import { BackgroundColorProvider } from "./BackgroundColorContext"; @@ -93,4 +94,5 @@ export { DxcBulletedList, DxcGrid, DxcImage, + DxcContainer, }; From e3732c6e7b0b3a77df52728c58b5c9c24283246f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 27 Dec 2023 12:52:18 +0100 Subject: [PATCH 6/8] Removing opacity and as props --- lib/src/container/Container.tsx | 5 ++--- lib/src/container/types.ts | 3 --- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx index 49536cb01..0c2b783b4 100644 --- a/lib/src/container/Container.tsx +++ b/lib/src/container/Container.tsx @@ -18,9 +18,9 @@ const spaces = { xxlarge: "48px", }; -const DxcContainer = ({ display, width, height, opacity, overflow, ...props }: ContainerPropsType) => ( +const DxcContainer = ({ display, width, height, overflow, ...props }: ContainerPropsType) => ( <BackgroundColorProvider color={getColorToken(props?.background?.color)}> - <Container $display={display} $width={width} $height={height} $opacity={opacity} $overflow={overflow} {...props} /> + <Container $display={display} $width={width} $height={height} $overflow={overflow} {...props} /> </BackgroundColorProvider> ); @@ -41,7 +41,6 @@ const Container = styled.div<StyledProps>` float: ${({ float }) => float}; z-index: ${({ zIndex }) => zIndex}; box-shadow: ${({ boxShadow }) => boxShadow}; - opacity: ${({ $opacity }) => $opacity}; outline: ${({ outline }) => `${outline?.width} ${outline?.style} ${getColorToken(outline?.color)}`}; outline-offset: ${({ outline }) => outline?.offset}; diff --git a/lib/src/container/types.ts b/lib/src/container/types.ts index 60cf7e3a8..93597ed27 100644 --- a/lib/src/container/types.ts +++ b/lib/src/container/types.ts @@ -75,17 +75,14 @@ type Props = { zIndex?: "auto" | number; background?: Background; boxShadow?: string; - opacity?: string; outline?: Outline; children: React.ReactNode; - as?: keyof HTMLElementTagNameMap; }; export type StyledProps = Omit<Props, "display" | "width" | "height" | "opacity" | "overflow"> & { $display?: "block" | "inline-block" | "inline" | "none"; $width?: string; $height?: string; - $opacity?: string; $overflow?: Overflow; }; From cc5a47c4adca0e132607d857775d09b27004a634 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 27 Dec 2023 12:56:05 +0100 Subject: [PATCH 7/8] Updating variable naming in core tokens --- lib/src/common/coreTokens.ts | 10 +++++----- lib/src/container/Container.tsx | 18 +++++++++--------- lib/src/container/types.ts | 6 +++--- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/lib/src/common/coreTokens.ts b/lib/src/common/coreTokens.ts index 26109f3d1..793832602 100644 --- a/lib/src/common/coreTokens.ts +++ b/lib/src/common/coreTokens.ts @@ -1,8 +1,8 @@ /** * Halstack Color Palette - * @link https://developer.dxc.com/halstack/next/principles/color/ + * @link https://developer.dxc.com/halstack/next/principles/color/usage/#color-tokens-core-color-tokens */ -const ColorTokens = { +const CoreColorTokens = { // Color // Absolutes color_black: "#000000", @@ -105,8 +105,8 @@ const ColorTokens = { color_orange_800: "#915108", color_orange_900: "#613605", }; -export const getColorToken = (key: ColorTokenKeys) => ColorTokens[key]; -export type ColorTokenKeys = keyof typeof ColorTokens; +export const getCoreColorToken = (key: CoreColorTokens) => CoreColorTokens[key]; +export type CoreColorTokens = keyof typeof CoreColorTokens; /** * Halstack Spacing Principles @@ -131,7 +131,7 @@ const SpacingTokens = { } const CoreTokens = { - ...ColorTokens, + ...CoreColorTokens, ...SpacingTokens, inherit: "inherit", diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx index 0c2b783b4..a11aec0d2 100644 --- a/lib/src/container/Container.tsx +++ b/lib/src/container/Container.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; import ContainerPropsType, { StyledProps } from "./types"; -import { getColorToken } from "../common/coreTokens"; +import { getCoreColorToken } from "../common/coreTokens"; import { BackgroundColorProvider } from "../BackgroundColorContext"; /** @@ -19,7 +19,7 @@ const spaces = { }; const DxcContainer = ({ display, width, height, overflow, ...props }: ContainerPropsType) => ( - <BackgroundColorProvider color={getColorToken(props?.background?.color)}> + <BackgroundColorProvider color={getCoreColorToken(props?.background?.color)}> <Container $display={display} $width={width} $height={height} $overflow={overflow} {...props} /> </BackgroundColorProvider> ); @@ -41,7 +41,7 @@ const Container = styled.div<StyledProps>` float: ${({ float }) => float}; z-index: ${({ zIndex }) => zIndex}; box-shadow: ${({ boxShadow }) => boxShadow}; - outline: ${({ outline }) => `${outline?.width} ${outline?.style} ${getColorToken(outline?.color)}`}; + outline: ${({ outline }) => `${outline?.width} ${outline?.style} ${getCoreColorToken(outline?.color)}`}; outline-offset: ${({ outline }) => outline?.offset}; margin: ${({ margin }) => (typeof margin === "string" ? `${spaces[margin]}` : "")}; @@ -57,27 +57,27 @@ const Container = styled.div<StyledProps>` padding-left: ${({ padding }) => (typeof padding === "object" ? spaces[padding.left] : "")}; border: ${({ border }) => - border && "width" in border ? `${border?.width} ${border?.style} ${getColorToken(border?.color)}` : ""}; + border && "width" in border ? `${border?.width} ${border?.style} ${getCoreColorToken(border?.color)}` : ""}; border-radius: ${({ border }) => (border && "radius" in border ? `${border?.radius}` : "")}; border-top: ${({ border }) => border && "top" in border - ? `${border?.top?.width} ${border?.top?.style} ${getColorToken(border?.top?.color)}` + ? `${border?.top?.width} ${border?.top?.style} ${getCoreColorToken(border?.top?.color)}` : ""}; border-top-right-radius: ${({ border }) => (border && "top" in border ? `${border?.top?.rightRadius}` : "")}; border-top-left-radius: ${({ border }) => (border && "top" in border ? `${border?.top?.leftRadius}` : "")}; border-right: ${({ border }) => border && "right" in border - ? `${border?.right?.width} ${border?.right?.style} ${getColorToken(border?.right?.color)}` + ? `${border?.right?.width} ${border?.right?.style} ${getCoreColorToken(border?.right?.color)}` : ""}; border-bottom: ${({ border }) => border && "bottom" in border - ? `${border?.bottom?.width} ${border?.bottom?.style} ${getColorToken(border?.bottom?.color)}` + ? `${border?.bottom?.width} ${border?.bottom?.style} ${getCoreColorToken(border?.bottom?.color)}` : ""}; border-bottom-right-radius: ${({ border }) => (border && "bottom" in border ? `${border?.bottom?.rightRadius}` : "")}; border-bottom-left-radius: ${({ border }) => (border && "bottom" in border ? `${border?.bottom?.leftRadius}` : "")}; border-left: ${({ border }) => border && "left" in border - ? `${border?.left?.width} ${border?.left?.style} ${getColorToken(border?.left?.color)}` + ? `${border?.left?.width} ${border?.left?.style} ${getCoreColorToken(border?.left?.color)}` : ""}; overflow: ${({ $overflow }) => (typeof $overflow !== "object" ? $overflow : "")}; @@ -86,7 +86,7 @@ const Container = styled.div<StyledProps>` background-attachment: ${({ background }) => background?.attachment}; background-clip: ${({ background }) => background?.clip}; - background-color: ${({ background }) => getColorToken(background?.color)}; + background-color: ${({ background }) => getCoreColorToken(background?.color)}; background-image: ${({ background }) => background?.image}; background-origin: ${({ background }) => background?.origin}; background-position: ${({ background }) => background?.position}; diff --git a/lib/src/container/types.ts b/lib/src/container/types.ts index 93597ed27..2dd7e4454 100644 --- a/lib/src/container/types.ts +++ b/lib/src/container/types.ts @@ -1,4 +1,4 @@ -import { ColorTokenKeys } from "../common/coreTokens"; +import { CoreColorTokens } from "../common/coreTokens"; type SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"; type Space = @@ -20,7 +20,7 @@ type Inset = { type Background = { attachment?: string; clip?: string; - color?: ColorTokenKeys; + color?: CoreColorTokens; image?: string; origin?: string; position?: string; @@ -31,7 +31,7 @@ type Background = { type BorderGenericProperties = { width?: string; style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"; - color?: ColorTokenKeys; + color?: CoreColorTokens; }; type BorderProperties = BorderGenericProperties & { radius?: string; From 8e16cf4080b4b35c54e7a5db394a261887954643 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Thu, 28 Dec 2023 15:15:17 +0100 Subject: [PATCH 8/8] Separating borderRadius from regular border prop --- lib/src/container/Container.tsx | 6 +----- lib/src/container/types.ts | 20 +++++++------------- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx index a11aec0d2..ee6ae8ff9 100644 --- a/lib/src/container/Container.tsx +++ b/lib/src/container/Container.tsx @@ -58,13 +58,10 @@ const Container = styled.div<StyledProps>` border: ${({ border }) => border && "width" in border ? `${border?.width} ${border?.style} ${getCoreColorToken(border?.color)}` : ""}; - border-radius: ${({ border }) => (border && "radius" in border ? `${border?.radius}` : "")}; border-top: ${({ border }) => border && "top" in border ? `${border?.top?.width} ${border?.top?.style} ${getCoreColorToken(border?.top?.color)}` : ""}; - border-top-right-radius: ${({ border }) => (border && "top" in border ? `${border?.top?.rightRadius}` : "")}; - border-top-left-radius: ${({ border }) => (border && "top" in border ? `${border?.top?.leftRadius}` : "")}; border-right: ${({ border }) => border && "right" in border ? `${border?.right?.width} ${border?.right?.style} ${getCoreColorToken(border?.right?.color)}` @@ -73,12 +70,11 @@ const Container = styled.div<StyledProps>` border && "bottom" in border ? `${border?.bottom?.width} ${border?.bottom?.style} ${getCoreColorToken(border?.bottom?.color)}` : ""}; - border-bottom-right-radius: ${({ border }) => (border && "bottom" in border ? `${border?.bottom?.rightRadius}` : "")}; - border-bottom-left-radius: ${({ border }) => (border && "bottom" in border ? `${border?.bottom?.leftRadius}` : "")}; border-left: ${({ border }) => border && "left" in border ? `${border?.left?.width} ${border?.left?.style} ${getCoreColorToken(border?.left?.color)}` : ""}; + border-radius: ${({ borderRadius }) => borderRadius}; overflow: ${({ $overflow }) => (typeof $overflow !== "object" ? $overflow : "")}; overflow-x: ${({ $overflow }) => (typeof $overflow === "object" ? `${$overflow?.x}` : "")}; diff --git a/lib/src/container/types.ts b/lib/src/container/types.ts index 2dd7e4454..72f8f7af2 100644 --- a/lib/src/container/types.ts +++ b/lib/src/container/types.ts @@ -28,28 +28,21 @@ type Background = { size?: string; }; -type BorderGenericProperties = { +type BorderProperties = { width?: string; style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"; color?: CoreColorTokens; }; -type BorderProperties = BorderGenericProperties & { - radius?: string; -}; -type TopBottomBorder = BorderGenericProperties & { - rightRadius?: string; - leftRadius?: string; -}; type Border = | BorderProperties | { - top?: TopBottomBorder; - right?: BorderGenericProperties; - bottom?: TopBottomBorder; - left?: BorderGenericProperties; + top?: BorderProperties; + right?: BorderProperties; + bottom?: BorderProperties; + left?: BorderProperties; }; -type Outline = BorderGenericProperties & { +type Outline = BorderProperties & { offset?: string; }; @@ -67,6 +60,7 @@ type Props = { minHeight?: string; padding?: Space; border?: Border; + borderRadius?: string; margin?: Space; overflow?: Overflow; position?: "static" | "relative" | "absolute" | "fixed" | "sticky";