Skip to content

Commit

Permalink
Merge pull request #1448 from dxc-technology/gomezivann-themeGenerato…
Browse files Browse the repository at this point in the history 
…r-updates

Added remaining components to the Theme generator
  • Loading branch information
@raquelarrojo
raquelarrojo committed Jan 25, 2023
2 parents 8b61ced + 48fc309 commit 1b8b460
Show file tree
Hide file tree
Showing 14 changed files with 773 additions and 267 deletions.
220 changes: 110 additions & 110 deletions lib/src/common/variables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -651,99 +651,6 @@ export const componentTokens = {
level5LineHeight: globalTokens.type_leading_normal,
level5LetterSpacing: globalTokens.type_spacing_wide_01,
},
textInput: {
fontFamily: globalTokens.type_sans,
enabledBorderColor: globalTokens.hal_black,
enabledBorderColorOnDark: globalTokens.hal_white,
hoverBorderColor: globalTokens.hal_purple_l_65,
hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
focusBorderColor: globalTokens.hal_blue_l_50,
focusBorderColorOnDark: globalTokens.hal_blue_l_50,
disabledBorderColor: globalTokens.hal_grey_l_60,
disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
disabledContainerFillColor: globalTokens.hal_grey_l_95,
disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
errorBorderColor: globalTokens.hal_red_s_41,
errorBorderColorOnDark: globalTokens.hal_red_l_60,
hoverErrorBorderColor: globalTokens.color_red_600,
hoverErrorBorderColorOnDark: "#fe677b",
inputMarginTop: globalTokens.spacing_02,
inputMarginBottom: globalTokens.spacing_02,
errorMessageColor: globalTokens.hal_red_s_41,
errorMessageColorOnDark: globalTokens.hal_red_l_60,
errorIconColor: globalTokens.hal_red_s_41,
errorIconColorOnDark: globalTokens.hal_red_l_60,
labelFontColor: globalTokens.hal_black,
labelFontColorOnDark: globalTokens.hal_white,
labelFontSize: globalTokens.type_scale_02,
labelFontStyle: globalTokens.type_normal,
labelFontWeight: globalTokens.type_semibold,
labelLineHeight: globalTokens.type_leading_loose_01,
disabledLabelFontColor: globalTokens.hal_grey_l_60,
disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
optionalLabelFontWeight: globalTokens.type_regular,
helperTextFontColor: globalTokens.hal_black,
helperTextFontColorOnDark: globalTokens.hal_white,
helperTextFontSize: globalTokens.type_scale_01,
helperTextFontStyle: globalTokens.type_normal,
helperTextFontWeight: globalTokens.type_regular,
helperTextLineHeight: globalTokens.type_leading_normal,
disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
prefixColor: globalTokens.hal_grey_s_40,
prefixColorOnDark: globalTokens.hal_white,
suffixColor: globalTokens.hal_grey_s_40,
suffixColorOnDark: globalTokens.hal_white,
disabledPrefixColor: globalTokens.hal_grey_l_75,
disabledSuffixColor: globalTokens.hal_grey_l_75,
disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
placeholderFontColor: "#000000b3",
placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
valueFontColor: globalTokens.hal_black,
valueFontColorOnDark: globalTokens.hal_white,
valueFontSize: globalTokens.type_scale_03,
valueFontStyle: globalTokens.type_normal,
valueFontWeight: globalTokens.type_regular,
disabledValueFontColor: globalTokens.hal_grey_l_60,
disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
actionIconColor: globalTokens.hal_black,
actionIconColorOnDark: globalTokens.hal_white,
disabledActionIconColor: globalTokens.hal_grey_l_60,
disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
hoverActionIconColor: globalTokens.hal_black,
hoverActionIconColorOnDark: globalTokens.hal_white,
focusActionIconColor: globalTokens.hal_black,
focusActionIconColorOnDark: globalTokens.hal_white,
activeActionIconColor: globalTokens.hal_black,
activeActionIconColorOnDark: globalTokens.hal_black,
actionBackgroundColor: globalTokens.transparent,
actionBackgroundColorOnDark: globalTokens.transparent,
disabledActionBackgroundColor: globalTokens.transparent,
disabledActionBackgroundColorOnDark: globalTokens.transparent,
hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
focusActionBorderColor: globalTokens.hal_blue_l_50,
focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
activeActionBackgroundColor: globalTokens.hal_grey_l_80,
activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
listDialogBackgroundColor: globalTokens.hal_white,
listDialogBorderColor: globalTokens.hal_grey_l_75,
listOptionDividerColor: globalTokens.hal_grey_l_90,
listOptionFontColor: globalTokens.hal_black,
listOptionFontSize: globalTokens.type_scale_02,
listOptionFontStyle: globalTokens.type_normal,
listOptionFontWeight: globalTokens.type_regular,
systemMessageFontColor: globalTokens.hal_grey_s_40,
errorListDialogFontColor: globalTokens.hal_black,
errorListDialogBackgroundColor: globalTokens.color_red_50,
errorListDialogBorderColor: globalTokens.hal_red_s_41,
hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
focusListOptionBorderColor: globalTokens.hal_blue_l_50,
},
link: {
fontColor: globalTokens.hal_blue_s_35,
fontFamily: globalTokens.inherit,
Expand Down Expand Up @@ -1128,23 +1035,6 @@ export const componentTokens = {
trackWidth: "36px",
spaceBetweenLabelSwitch: "8px",
},
tag: {
fontFamily: globalTokens.type_sans,
fontColor: globalTokens.hal_black,
fontSize: globalTokens.type_scale_02,
fontStyle: globalTokens.type_normal,
fontWeight: globalTokens.type_regular,
labelPaddingTop: "0px",
labelPaddingBottom: "0px",
labelPaddingLeft: "16px",
labelPaddingRight: "16px",
height: "40px",
iconColor: globalTokens.hal_white,
iconSectionWidth: "40px",
iconHeight: "24px",
iconWidth: "auto",
focusColor: globalTokens.hal_blue_l_50,
},
table: {
rowSeparatorThickness: "1px",
rowSeparatorStyle: "solid",
Expand Down Expand Up @@ -1219,6 +1109,23 @@ export const componentTokens = {
badgeHeightWithNotificationNumber: "17px",
badgeRadiusWithNotificationNumber: "10px",
},
tag: {
fontFamily: globalTokens.type_sans,
fontColor: globalTokens.hal_black,
fontSize: globalTokens.type_scale_02,
fontStyle: globalTokens.type_normal,
fontWeight: globalTokens.type_regular,
labelPaddingTop: "0px",
labelPaddingBottom: "0px",
labelPaddingLeft: "16px",
labelPaddingRight: "16px",
height: "40px",
iconColor: globalTokens.hal_white,
iconSectionWidth: "40px",
iconHeight: "24px",
iconWidth: "auto",
focusColor: globalTokens.hal_blue_l_50,
},
textarea: {
fontFamily: globalTokens.type_sans,
enabledBorderColor: globalTokens.hal_black,
Expand Down Expand Up @@ -1268,6 +1175,99 @@ export const componentTokens = {
disabledValueFontColor: globalTokens.hal_grey_l_60,
disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
},
textInput: {
fontFamily: globalTokens.type_sans,
enabledBorderColor: globalTokens.hal_black,
enabledBorderColorOnDark: globalTokens.hal_white,
hoverBorderColor: globalTokens.hal_purple_l_65,
hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
focusBorderColor: globalTokens.hal_blue_l_50,
focusBorderColorOnDark: globalTokens.hal_blue_l_50,
disabledBorderColor: globalTokens.hal_grey_l_60,
disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
disabledContainerFillColor: globalTokens.hal_grey_l_95,
disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
errorBorderColor: globalTokens.hal_red_s_41,
errorBorderColorOnDark: globalTokens.hal_red_l_60,
hoverErrorBorderColor: globalTokens.color_red_600,
hoverErrorBorderColorOnDark: "#fe677b",
inputMarginTop: globalTokens.spacing_02,
inputMarginBottom: globalTokens.spacing_02,
errorMessageColor: globalTokens.hal_red_s_41,
errorMessageColorOnDark: globalTokens.hal_red_l_60,
errorIconColor: globalTokens.hal_red_s_41,
errorIconColorOnDark: globalTokens.hal_red_l_60,
labelFontColor: globalTokens.hal_black,
labelFontColorOnDark: globalTokens.hal_white,
labelFontSize: globalTokens.type_scale_02,
labelFontStyle: globalTokens.type_normal,
labelFontWeight: globalTokens.type_semibold,
labelLineHeight: globalTokens.type_leading_loose_01,
disabledLabelFontColor: globalTokens.hal_grey_l_60,
disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
optionalLabelFontWeight: globalTokens.type_regular,
helperTextFontColor: globalTokens.hal_black,
helperTextFontColorOnDark: globalTokens.hal_white,
helperTextFontSize: globalTokens.type_scale_01,
helperTextFontStyle: globalTokens.type_normal,
helperTextFontWeight: globalTokens.type_regular,
helperTextLineHeight: globalTokens.type_leading_normal,
disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
prefixColor: globalTokens.hal_grey_s_40,
prefixColorOnDark: globalTokens.hal_white,
suffixColor: globalTokens.hal_grey_s_40,
suffixColorOnDark: globalTokens.hal_white,
disabledPrefixColor: globalTokens.hal_grey_l_75,
disabledSuffixColor: globalTokens.hal_grey_l_75,
disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
placeholderFontColor: "#000000b3",
placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
valueFontColor: globalTokens.hal_black,
valueFontColorOnDark: globalTokens.hal_white,
valueFontSize: globalTokens.type_scale_03,
valueFontStyle: globalTokens.type_normal,
valueFontWeight: globalTokens.type_regular,
disabledValueFontColor: globalTokens.hal_grey_l_60,
disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
actionIconColor: globalTokens.hal_black,
actionIconColorOnDark: globalTokens.hal_white,
disabledActionIconColor: globalTokens.hal_grey_l_60,
disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
hoverActionIconColor: globalTokens.hal_black,
hoverActionIconColorOnDark: globalTokens.hal_white,
focusActionIconColor: globalTokens.hal_black,
focusActionIconColorOnDark: globalTokens.hal_white,
activeActionIconColor: globalTokens.hal_black,
activeActionIconColorOnDark: globalTokens.hal_black,
actionBackgroundColor: globalTokens.transparent,
actionBackgroundColorOnDark: globalTokens.transparent,
disabledActionBackgroundColor: globalTokens.transparent,
disabledActionBackgroundColorOnDark: globalTokens.transparent,
hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
focusActionBorderColor: globalTokens.hal_blue_l_50,
focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
activeActionBackgroundColor: globalTokens.hal_grey_l_80,
activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
listDialogBackgroundColor: globalTokens.hal_white,
listDialogBorderColor: globalTokens.hal_grey_l_75,
listOptionDividerColor: globalTokens.hal_grey_l_90,
listOptionFontColor: globalTokens.hal_black,
listOptionFontSize: globalTokens.type_scale_02,
listOptionFontStyle: globalTokens.type_normal,
listOptionFontWeight: globalTokens.type_regular,
systemMessageFontColor: globalTokens.hal_grey_s_40,
errorListDialogFontColor: globalTokens.hal_black,
errorListDialogBackgroundColor: globalTokens.color_red_50,
errorListDialogBorderColor: globalTokens.hal_red_s_41,
hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
focusListOptionBorderColor: globalTokens.hal_blue_l_50,
},
toggleGroup: {
containerBackgroundColor: globalTokens.color_grey_50,
containerBorderColor: globalTokens.hal_grey_l_60,
Expand Down
71 changes: 71 additions & 0 deletions website/public/dxc_footer_logo.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions website/public/dxc_header_logo.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 3 additions & 4 deletions website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,9 @@ const sections = [
<>
<DxcParagraph>
This component is not a 1-to-1 replacement of the <Code>ul</Code>{" "}
<Code>ol</Code>
native tags. These native tags have many different use-cases and the
Bulleted List only covers one of them: listing text items within a
document.
<Code>ol</Code> native tags. These native tags have many different
use-cases and the Bulleted List only covers one of them: listing text
items within a document.
</DxcParagraph>
<DxcParagraph>
Lists can be ordered or unordered. If the order of the list items
Expand Down

0 comments on commit 1b8b460

Please sign in to comment.