dxc-technology / halstack-react

Library of components for building SPAs with React and Halstack Design System
https://developer.dxc.com/halstack/
Apache License 2.0
15 stars 14 forks source link

Contextual menu tokens #1985

Closed GomezIvann closed 6 months ago

GomezIvann commented 6 months ago

Checklist

Description We are adding both advanced and opinionated tokens to the Contextual Menu component. Here are the proposed ones.

Advanced tokens

    fontFamily: CoreTokens.type_sans,
    backgroundColor: CoreTokens.color_white,
    borderColor: CoreTokens.color_grey_200,
    menuItemFontColor: CoreTokens.color_grey_900,
    menuItemFontSize: CoreTokens.type_scale_02,
    menuItemFontStyle: CoreTokens.type_normal,
    menuItemFontWeight: CoreTokens.type_regular,
    menuItemLineHeight: "24px",
    hoverMenuItemBackgroundColor: CoreTokens.color_grey_100,
    activeMenuItemBackgroundColor: CoreTokens.color_grey_100,
    selectedMenuItemBackgroundColor: CoreTokens.color_purple_100,
    hoverSelectedMenuItemBackgroundColor: CoreTokens.color_purple_200,
    activeSelectedMenuItemBackgroundColor: CoreTokens.color_purple_200,
    selectedMenuItemFontWeight: CoreTokens.type_semibold,
    sectionTitleFontColor: CoreTokens.color_grey_900,
    sectionTitleFontSize: CoreTokens.type_scale_03,
    sectionTitleFontStyle: CoreTokens.type_normal,
    sectionTitleFontWeight: CoreTokens.type_semibold,
    sectionTitleLineHeight: "24px",
    iconColor: CoreTokens.color_grey_900,
    iconSize: "16px",

Opinionated tokens

    accentColor: string;
    baseColor: string;
    fontColor: string;
    iconColor: string;

image

Closes #1975