#51 Improve theme styles (#64)

* #51 Improve preset and component styles * #51 Correct DatePicker styling * #51 Improve docs * #51 Improve Modal stories, rollback ModalIcon * #51 Return 'small' to preset, add Toggle icon tokens --------- Co-authored-by: Felix Beceic <[email protected]>
croz-ltd · Mar 20, 2023 · 7a34e43 · 7a34e43
1 parent 9ca33f4
commit 7a34e43
Show file tree

Hide file tree

Showing 27 changed files with 286 additions and 235 deletions.
diff --git a/libs/alert/src/Modal.tsx b/libs/alert/src/Modal.tsx
@@ -169,12 +169,12 @@ function Modal<T = unknown>({ isOpen, onClose, state, icon, children, canDismiss
     tokens.Container.Content.container.backgroundColor,
     tokens.Container.Content.container.borderRadius,
     tokens.Container.Content.container.padding,
-    tokens.Container.Content.container.boxShadow
+    tokens.Container.Content.container.boxShadow,
   );
 
   const overlayInnerClassName = cx(
     tokens.Container.Overlay.inner.master,
-    tokens.Container.Overlay.inner.backgroundColor
+    tokens.Container.Overlay.inner.backgroundColor,
   );
 
   return (
@@ -211,7 +211,7 @@ function ModalDismiss({ ariaLabel = "Close", dismissIcon, ...props }: ModalDismi
   const dismissButtonClassName = cx(
     tokens.Dismiss.button.master,
     tokens.Dismiss.button.color,
-    tokens.Dismiss.button.hover
+    tokens.Dismiss.button.hover,
   );
 
   const finalDismissIcon = useIcon("dismiss", dismissIcon);
@@ -230,7 +230,7 @@ function ModalContent({ title, children, ...props }: ModalContentProps) {
     tokens.Content.title.fontSize,
     tokens.Content.title.lineHeight,
     tokens.Content.title.fontWeight,
-    tokens.Content.title.color
+    tokens.Content.title.color,
   );
 
   return (

diff --git a/libs/core/src/PageHeading.tsx b/libs/core/src/PageHeading.tsx
@@ -87,7 +87,7 @@ function PageHeading({ children, className, ...props }: PageHeadingProps) {
   return (
     <header>
       {breadcrumbs && <div className={tokens.breadcrumbs}>{breadcrumbs}</div>}
-      <div className={`md:flex md:items-center md:justify-between ${className}`}>
+      <div className={`${tokens.container} ${className}`}>
         {title && (
           <div className={tokens.master}>
             {title}
@@ -128,7 +128,7 @@ function PageHeadingTitle({ children, ...props }: PageHeadingTitleProps) {
     tokens.title.fontSize,
     tokens.title.fontWeight,
     tokens.title.lineHeight,
-    tokens.title.color
+    tokens.title.color,
   );
   return <h2 className={pageHeadingTitleClassName}>{children}</h2>;
 }
@@ -144,7 +144,7 @@ function PageHeadingSubtitle({ children, ...props }: PageHeadingSubtitleProps) {
     tokens.subtitle.marginTop,
     tokens.subtitle.fontSize,
     tokens.subtitle.lineHeight,
-    tokens.subtitle.color
+    tokens.subtitle.color,
   );
   return <p className={pageHeadingSubtitleClassName}>{children}</p>;
 }

diff --git a/libs/core/src/ProgressBar.tsx b/libs/core/src/ProgressBar.tsx
@@ -137,6 +137,7 @@ export function Step({ active, children, ...props }: StepProps) {
 
   const indexIconDivClassName = cx(
     tokens.indexIcon.master,
+    tokens.indexIcon.borderRadius,
     { [tokens.indexIcon.backgroundColor]: before || completed },
     { [tokens.indexIcon.borderWidth]: (active || after) && !completed },
     { [tokens.indexIcon.borderColor]: active },
@@ -145,6 +146,9 @@ export function Step({ active, children, ...props }: StepProps) {
 
   const textIndexClassName = cx(
     tokens.textIndex.master,
+    tokens.textIndex.fontSize,
+    tokens.textIndex.fontWeight,
+    tokens.textIndex.lineHeight,
     { [tokens.textIndex.color]: active && !completed },
     { [tokens.textIndex.beforeTextColor]: before || completed },
     { [tokens.textIndex.afterTextColor]: after },
@@ -154,9 +158,6 @@ export function Step({ active, children, ...props }: StepProps) {
     tokens.stepContainer.master,
     tokens.stepContainer.padding,
     tokens.stepContainer.margin,
-    tokens.stepContainer.fontSize,
-    tokens.stepContainer.fontWeight,
-    tokens.stepContainer.lineHeight,
   );
 
   const finalCompletedIcon = useIcon("completed", props.completedIcon, {

diff --git a/libs/date/src/DatePicker.tsx b/libs/date/src/DatePicker.tsx
@@ -503,7 +503,10 @@ function DatePickerDay({ dayLabel, date, ...props }: DatePickerDayProps) {
 
   const dayButtonClassName = cx(
     tokens.DatePicker.Button.base,
-    { [tokens.DatePicker.Button.selected]: datePicker.isDateSelected(date) },
+    {
+      [tokens.DatePicker.Button.selected]:
+        datePicker.isDateSelected(date) && !datePicker.isFirstOrLastSelectedDate(date),
+    },
     { [tokens.DatePicker.Button.firstOrLast]: datePicker.isFirstOrLastSelectedDate(date) },
     { [tokens.DatePicker.Button.hovered]: datePicker.isDateHovered(date) && isDateRange },
     {

diff --git a/libs/form-elements/src/Toggle.tsx b/libs/form-elements/src/Toggle.tsx
@@ -83,22 +83,23 @@ export default function Toggle({
     tokens.base,
     { [tokens.backgroundColor]: checked },
     { [tokens.gray]: !checked },
-    { [tokens.disabled]: disabled }
+    { [tokens.disabled]: disabled },
   );
   const toggleClassName = cx(
     tokens.toggle,
     { "translate-x-5": checked },
     { "translate-x-0": !checked },
-    { [tokens.disabled]: disabled }
+    { [tokens.disabled]: disabled },
   );
+  const iconClassName = cx(tokens.icon.master, tokens.icon.margin);
 
   const finalCheckedIcon = useIcon("completed", checkedIcon, {
-    className: "flex items-center mt-[3px] ml-[3px]",
-    size: 3,
+    className: iconClassName,
+    size: tokens.icon.size,
   });
   const finalUncheckedIcon = useIcon("dismiss", uncheckedIcon, {
-    className: "flex items-center mt-[3px] ml-[3px]",
-    size: 3,
+    className: iconClassName,
+    size: tokens.icon.size,
   });
 
   return (

diff --git a/libs/menu/src/DropdownMenu.tsx b/libs/menu/src/DropdownMenu.tsx
@@ -41,13 +41,13 @@ export type DropdownMenuMenuProps = {
 
   /**
    * Custom icon serving as a dropdown menu open button.
-   * If you wish to show this icon as a leading icon (before the title), set the 'leadingIcon' prop to 'true'.
+   * If you wish to show this icon as a leading icon (before the title), set the 'iconPlacement' prop to 'leading'.
    */
   openExpanderIcon?: React.ReactElement;
 
   /**
    * Custom icon serving as a dropdown menu close button.
-   * If you wish to show this icon as a leading icon (before the title), set the 'leadingIcon' prop to 'true'.
+   * If you wish to show this icon as a leading icon (before the title), set the 'iconPlacement' prop to 'leading'.
    */
   closeExpanderIcon?: React.ReactElement;
 
@@ -123,7 +123,7 @@ function DropdownMenu({
   const iconClassName = cx(
     { [tokens.Icon.color.default]: iconColor === "default" },
     { [tokens.Icon.color.dark]: iconColor === "dark" },
-    { [tokens.Icon.color.light]: iconColor === "light" }
+    { [tokens.Icon.color.light]: iconColor === "light" },
   );
 
   const iconProps = { className: iconClassName, size: 3 };
@@ -139,7 +139,7 @@ function DropdownMenu({
   );
 
   return (
-    <Dropdown className={className}>
+    <Dropdown>
       <Dropdown.Button>
         {menuType === "text" && (
           <Button
@@ -194,8 +194,9 @@ export function DropdownMenuItem({
     tokens.MenuItem.master,
     tokens.MenuItem.padding,
     tokens.MenuItem.fontSize,
+    tokens.MenuItem.textColor,
     tokens.MenuItem.transition,
-    { [tokens.MenuItem.disabled]: disabled }
+    { [tokens.MenuItem.disabled]: disabled },
   );
 
   return (
@@ -223,28 +224,28 @@ function DropdownMenuContainer({
     tokens.MenuContainer.width,
     tokens.MenuContainer.borderRadius,
     tokens.MenuContainer.boxShadow,
-    tokens.MenuContainer.backgroundColor
+    tokens.MenuContainer.backgroundColor,
   );
 
   const menuInnerContainerClassName = cx(
     tokens.MenuInnerContainer.borderRadius,
     tokens.MenuInnerContainer.boxShadow,
     tokens.MenuInnerContainer.backgroundColor[backgroundColor],
-    "overflow-y-auto scrollbar"
+    "overflow-y-auto scrollbar",
   );
 
   const menuContainerChildrenClassName = cx(
     tokens.MenuContainerChildren.master,
     tokens.MenuContainerChildren.padding,
-    tokens.MenuContainerChildren.textColor[backgroundColor]
+    tokens.MenuContainerChildren.textColor[backgroundColor],
   );
 
   const containerPadding: number = React.useMemo(() => {
     if (childrenContainerRef !== null && childrenContainerRef.current !== null) {
       return parseInt(
         getComputedStyle(childrenContainerRef.current as Element)
           .getPropertyValue("padding-top")
-          .match(/\d{1,3}/g)?.[0] || "2"
+          .match(/\d{1,3}/g)?.[0] || "2",
       );
     }
     return 2;

diff --git a/libs/menu/src/TopNavigation.tsx b/libs/menu/src/TopNavigation.tsx
@@ -72,7 +72,6 @@ export type TopNavigationProps = {
 
 type TopNavigationTokensProps = {
   topNavigationTokens?: ComponentTokens<"TopNavigation">;
-  sidebarNavigationTokens?: ComponentTokens<"SidebarNavigation">;
 };
 
 export type TopNavigationItemProps = {
@@ -272,7 +271,6 @@ function TopNavigation({
   ...props
 }: TopNavigationProps) {
   const topNavigationTokens = useTokens("TopNavigation", props.topNavigationTokens);
-  const sidebarNavigationTokens = useTokens("SidebarNavigation", props.sidebarNavigationTokens);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const [dropdownOpened, setDropdownOpened] = React.useState(false);
@@ -298,18 +296,18 @@ function TopNavigation({
     topNavigationTokens.base.padding,
     { [topNavigationTokens.base.dark]: color === "dark" },
     { [topNavigationTokens.base.light]: color === "light" },
-    { [topNavigationTokens.base.default]: color === "default" }
+    { [topNavigationTokens.base.default]: color === "default" },
   );
 
   const logoClassName = cx(
     topNavigationTokens.logo.master,
     { "hidden md:inline-flex": dropdownOpened },
     { [topNavigationTokens.logo.withTopRightAction.master]: topRightAction },
     { [topNavigationTokens.logo.withTopRightAction.margin]: topRightAction },
-    { [topNavigationTokens.logo.withoutTopRightAction]: !topRightAction }
+    { [topNavigationTokens.logo.withoutTopRightAction]: !topRightAction },
   );
 
-  const navButtonClassName = cx(sidebarNavigationTokens.navButtons.master, sidebarNavigationTokens.navButtons[color]);
+  const navButtonClassName = cx(topNavigationTokens.navButtons.master, topNavigationTokens.navButtons[color]);
 
   const menuButtonClassName = cx(topNavigationTokens.navButtons.hover);
 
@@ -391,7 +389,7 @@ function TopNavigationMenuContainer({
   const innerMenuContainerClassName = cx(
     tokens.innerMenuContainer,
     { [className]: variant === "basic" || variant === "contained" },
-    { "justify-start mt-2 pb-3": variant === "centered" }
+    { "justify-start mt-2 pb-3": variant === "centered" },
   );
 
   return (
@@ -430,7 +428,7 @@ export function TopNavigationItem({
     { [tokens.Item.inactive[color]]: !active },
     { [tokens.Item.active[color]]: active },
     { [tokens.Item.active.fontWeight]: active },
-    { [tokens.Item.expandable.container]: isExpandable }
+    { [tokens.Item.expandable.container]: isExpandable },
   );
 
   const containerClassName = cx(
@@ -439,7 +437,7 @@ export function TopNavigationItem({
     tokens.Item.expandable.subitemsContainer.width,
     { [tokens.Item.expandable.subitemsContainer.dark]: color === "dark" },
     { [tokens.Item.expandable.subitemsContainer.light]: color === "light" },
-    { [tokens.Item.expandable.subitemsContainer.default]: color === "default" }
+    { [tokens.Item.expandable.subitemsContainer.default]: color === "default" },
   );
 
   const iconProps = { className: "ml-1", size: 3 };
@@ -516,7 +514,7 @@ export function TopNavigationDropdown({
   const mobileIconClassName = cx(
     { [dropdownMenuTokens.Icon.color.default]: iconColor === "default" },
     { [dropdownMenuTokens.Icon.color.dark]: iconColor === "dark" },
-    { [dropdownMenuTokens.Icon.color.light]: iconColor === "light" }
+    { [dropdownMenuTokens.Icon.color.light]: iconColor === "light" },
   );
 
   const containerClassName = cx(
@@ -526,7 +524,7 @@ export function TopNavigationDropdown({
     topNavigationTokens.Item.expandable.subitemsContainer.width,
     { [topNavigationTokens.Item.expandable.subitemsContainer.dark]: iconColor === "light" },
     { [topNavigationTokens.Item.expandable.subitemsContainer.light]: iconColor === "dark" },
-    { [topNavigationTokens.Item.expandable.subitemsContainer.default]: iconColor === "default" }
+    { [topNavigationTokens.Item.expandable.subitemsContainer.default]: iconColor === "default" },
   );
 
   return (
@@ -579,9 +577,10 @@ export function TopNavigationDropdownItem({
     tokens.smallDropdownItem.fontSize,
     tokens.smallDropdownItem.transition,
     { [tokens.smallDropdownItem.base.fontWeight]: !active },
+    { [tokens.smallDropdownItem.base[color]]: !active },
     { [tokens.smallDropdownItem.active[color]]: active },
     { [tokens.smallDropdownItem.active.fontWeight]: active },
-    className
+    className,
   );
 
   const dropdownItemClassName = cx(
@@ -592,7 +591,7 @@ export function TopNavigationDropdownItem({
     { [tokens.dropdownItem.base.fontWeight]: !active },
     { [tokens.dropdownItem.base[color]]: !active },
     { [tokens.dropdownItem.active[color]]: active },
-    { [tokens.dropdownItem.active.fontWeight]: active }
+    { [tokens.dropdownItem.active.fontWeight]: active },
   );
 
   const iconTextWrapper = (text: React.ReactNode) => {