Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Wizard): migrate to tailwind #4285

Merged
merged 2 commits into from
Mar 25, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/data/tailwind-migration-status.yaml
Original file line number Diff line number Diff line change
@@ -109,5 +109,5 @@ Toast: true
ToastRoot: true
Tooltip: true
Truncate: true
Wizard: false
WizardStep: false
Wizard: true
WizardStep: true
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions packages/orbit-components/src/Wizard/Wizard.ct-story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import * as React from "react";

import Wizard, { WizardStep } from ".";

export function WizardStory() {
return (["row", "column"] as const).map(direction => (
<>
<div className="p-md">
<Wizard
id={`wizard-single-${direction}`}
dataTest={`wizard-single-${direction}`}
direction={direction}
activeStep={0}
completedSteps={0}
>
<WizardStep title="Search" />
</Wizard>
</div>
<div className="p-md">
<Wizard
id={`wizard-completed-0-${direction}`}
direction={direction}
activeStep={1}
completedSteps={0}
>
<WizardStep title="Search" />
<WizardStep title="Passenger details" />
<WizardStep title="Ticket fare" />
<WizardStep title="Customize your trip" isCompleted />
<WizardStep title="Overview & Payment" />
</Wizard>
</div>
<div className="p-md">
<Wizard
id={`wizard-completed-2-${direction}`}
direction={direction}
activeStep={1}
completedSteps={2}
>
<WizardStep title="Search" />
<WizardStep title="Passenger details" />
<WizardStep title="Ticket fare" />
<WizardStep title="Customize your trip" isCompleted />
<WizardStep title="Overview & Payment" />
</Wizard>
</div>
<div className="p-md">
<Wizard
id={`wizard-completed-5-${direction}`}
direction={direction}
activeStep={4}
completedSteps={5}
labelClose="CLOSE"
labelProgress="PROGRESS"
>
<WizardStep title="Search" />
<WizardStep title="Passenger details" />
<WizardStep title="Ticket fare" />
<WizardStep title="Customize your trip" isCompleted />
<WizardStep title="Overview & Payment" />
</Wizard>
</div>
</>
));
}

export function WizardStoryHover({ direction }: { direction: "row" | "column" }) {
return (
<div className="p-md">
<Wizard id={React.useId()} direction={direction} activeStep={1} completedSteps={2}>
<WizardStep title="Search" />
<WizardStep title="Passenger details" />
<WizardStep title="Ticket fare" />
<WizardStep title="Customize your trip" isCompleted />
<WizardStep title="Overview & Payment" />
</Wizard>
</div>
);
}
87 changes: 87 additions & 0 deletions packages/orbit-components/src/Wizard/Wizard.ct.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import RenderInRtl from "../utils/rtl/RenderInRtl";
import { WizardStory, WizardStoryHover } from "./Wizard.ct-story";

test.describe("visual Wizard", () => {
async function maybeHoverByText(component, text: string) {
if ((await component.getByText(text).count()) === 0) {
return Promise.resolve();
}

return component.getByText(text).hover();
}

test("default", async ({ mount }) => {
const component = await mount(<WizardStory />);

await expect(component).toHaveScreenshot();
});

test("row hover completed step", async ({ mount }) => {
const component = await mount(<WizardStoryHover direction="row" />);
await maybeHoverByText(component, "Search");

await expect(component).toHaveScreenshot();
});

test("row hover active step", async ({ mount }) => {
const component = await mount(<WizardStoryHover direction="row" />);
await maybeHoverByText(component, "Passenger details");

await expect(component).toHaveScreenshot();
});

test("row hover inactive step", async ({ mount }) => {
const component = await mount(<WizardStoryHover direction="row" />);
await maybeHoverByText(component, "Overview & Payment");

await expect(component).toHaveScreenshot();
});

test("row hover completed inactive step", async ({ mount }) => {
const component = await mount(<WizardStoryHover direction="row" />);
await maybeHoverByText(component, "Customize your trip");

await expect(component).toHaveScreenshot();
});

test("column hover completed step", async ({ mount }) => {
const component = await mount(<WizardStoryHover direction="column" />);
await maybeHoverByText(component, "Search");

await expect(component).toHaveScreenshot();
});

test("column hover active step", async ({ mount }) => {
const component = await mount(<WizardStoryHover direction="column" />);
await maybeHoverByText(component, "Passenger details");

await expect(component).toHaveScreenshot();
});

test("column hover inactive step", async ({ mount }) => {
const component = await mount(<WizardStoryHover direction="column" />);
await maybeHoverByText(component, "Overview & Payment");

await expect(component).toHaveScreenshot();
});

test("column hover completed inactive step", async ({ mount }) => {
const component = await mount(<WizardStoryHover direction="column" />);
await maybeHoverByText(component, "Customize your trip");

await expect(component).toHaveScreenshot();
});

test("rtl", async ({ mount }) => {
const component = await mount(
<RenderInRtl>
<WizardStory />
</RenderInRtl>,
);

await expect(component).toHaveScreenshot();
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions packages/orbit-components/src/Wizard/Wizard.stories.tsx
Original file line number Diff line number Diff line change
@@ -37,10 +37,13 @@ export const Default = () => {
};

export const Rtl = () => {
const direction = select("direction", ["row", "column"], "row");

return (
<RenderInRtl>
<Wizard
id="wizard"
direction={direction}
completedSteps={3}
activeStep={3}
onChangeStep={action("onChangeStep")}
@@ -88,6 +91,8 @@ export const Playground = () => {
max: Math.min(completedSteps, steps.length - 1),
step: 1,
});
const direction = select("direction", ["row", "column"], "row");

return (
<Wizard
id="wizard"
@@ -96,6 +101,7 @@ export const Playground = () => {
completedSteps={completedSteps}
activeStep={activeStep}
onChangeStep={action("onChangeStep")}
direction={direction}
>
{steps.map(step => (
<WizardStep key={step} title={step} />
237 changes: 71 additions & 166 deletions packages/orbit-components/src/Wizard/WizardStep.tsx
Original file line number Diff line number Diff line change
@@ -1,148 +1,30 @@
"use client";

import * as React from "react";
import styled, { css } from "styled-components";
import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
import cx from "clsx";

import mq from "../utils/mediaQuery";
import ButtonLink from "../ButtonLink";
import Stack from "../Stack";
import Text from "../Text";
import useTheme from "../hooks/useTheme";
import WizardStepIcon, { StyledStepIconContainer } from "./WizardStepIcon";
import type { Status } from "./WizardContext";
import WizardStepIcon from "./WizardStepIcon";
import { WizardStepContext } from "./WizardContext";
import defaultTheme from "../defaultTheme";
import { left, right } from "../utils/rtl";
import type { WizardStepProps } from "./types";
import { resolveStepBorder } from "./helpers";

const StyledBorder = styled.div`
${({ theme }) => css`
border-top: 1px solid ${theme.orbit.paletteCloudNormal};
position: absolute;
bottom: 0px;
width: 100%;
left: 40px;
`}
`;

StyledBorder.defaultProps = {
theme: defaultTheme,
};

const StyledContainer = styled.li<{ isCompact?: boolean; status: Status }>`
${({ theme, isCompact, status }) => css`
position: relative;
margin: -1px 0;
${isCompact &&
css`
button {
border-radius: 0;
background: ${status === "disabled" && theme.orbit.paletteCloudLight};
opacity: ${status === "disabled" && "1"};
}
`}
${mq.desktop(css`
&:hover {
${StyledStepIconContainer} {
transition: box-shadow ${theme.orbit.durationFast} ease-in;
box-shadow: ${status !== "disabled" &&
`0 0 0 6px ${convertHexToRgba(theme.orbit.paletteProductNormal, 20)}`};
}
}
`)}
`}
`;

StyledContainer.defaultProps = {
theme: defaultTheme,
};

const StyledContent = styled.div`
/* place above progress bar */
position: relative;
`;

StyledContent.defaultProps = {
theme: defaultTheme,
};

const StyledActiveMarker = styled.div`
${({ theme }) => css`
position: absolute;
top: 1px;
${left}: 0;
bottom: 1px;
width: 2px;
border-top-${right}-radius: ${theme.orbit.borderRadiusNormal};
border-bottom-${right}-radius: ${theme.orbit.borderRadiusNormal};
background: ${theme.orbit.paletteProductNormal};
pointer-events: none;
`}
`;

StyledActiveMarker.defaultProps = {
theme: defaultTheme,
};

const StyledProgressBar = styled.div`
position: relative;
${resolveStepBorder};
`;

StyledProgressBar.defaultProps = {
theme: defaultTheme,
};

const StyledLabel = styled.div<{ active?: boolean }>`
${({ theme, active }) => css`
display: block;
span {
display: block;
color: ${theme.orbit.colorTextSecondary};
}
${active &&
css`
span {
font-weight: ${theme.orbit.fontWeightMedium};
color: ${theme.orbit.colorTextPrimary};
}
`}
`};
`;

StyledLabel.defaultProps = {
theme: defaultTheme,
};

const StyledButtonWrapper = styled.div<{ active?: boolean }>`
${({ theme, active }) => css`
cursor: pointer;
padding: 0 ${theme.orbit.spaceXSmall};
${!active &&
css`
&:hover,
&:focus {
${StyledLabel} {
span {
text-decoration: underline;
color: ${theme.orbit.colorTextPrimary};
}
}
}
`}
`}
`;

StyledButtonWrapper.defaultProps = {
theme: defaultTheme,
const ProgressBarPart = ({ isColumn, className }: { isColumn: boolean; className?: string }) => {
return (
<div
className={cx(
"absolute",
isColumn
? "w-xxxs h-xxl top-[calc(theme(size.icon-small)+1px)] ltr:left-[calc(theme(size.icon-small)+1px)] rtl:right-[calc(theme(size.icon-small)+1px)]"
: "h-xxxs top-[calc(theme(size.icon-small)/2-1px)] w-1/2",
className,
)}
/>
);
};

const WizardStep = ({ dataTest, title, onClick, isCompleted }: WizardStepProps) => {
const theme = useTheme();
const {
index,
status,
@@ -163,7 +45,13 @@ const WizardStep = ({ dataTest, title, onClick, isCompleted }: WizardStepProps)

if (isCompact) {
return (
<StyledContainer data-test={dataTest} isCompact={isCompact} status={status}>
<li
className={cx(
"relative -my-px [&_button]:rounded-none",
status === "disabled" && "[&_button]:bg-cloud-light [&_button]:opacity-100",
)}
data-test={dataTest}
>
<ButtonLink
disabled={status === "disabled"}
type="secondary"
@@ -180,9 +68,13 @@ const WizardStep = ({ dataTest, title, onClick, isCompleted }: WizardStepProps)
title
)}
</ButtonLink>
{isActive && <StyledActiveMarker />}
{status !== "disabled" && <StyledBorder />}
</StyledContainer>
{isActive && (
<div className="w-xxxs bg-product-normal rounded-e-normal absolute inset-y-px ltr:left-0 rtl:right-0" />
)}
{status !== "disabled" && (
<div className="border-cloud-normal ms-xxl absolute inset-x-0 bottom-0 border-t border-solid" />
)}
</li>
);
}

@@ -195,48 +87,61 @@ const WizardStep = ({ dataTest, title, onClick, isCompleted }: WizardStepProps)
spaceAfter={isColumnOnDesktop ? "large" : "none"}
>
<WizardStepIcon isCompleted={isCompleted} />
<div
css={css`
padding: ${theme.orbit.paddingBadge};
`}
>
<div className="px-xs">
{status === "disabled" ? (
<Text as="div" type="secondary" size="small" align="center">
{title}
</Text>
) : (
<StyledLabel active={isActive}>
<Text as="span" size="small" align="center">
<div
className={cx(
"block [&_span]:block",
!isActive &&
"group-hover/button:[&_span]:text-primary-foreground group-focus/button:[&_span]:text-primary-foreground group-hover/button:[&_span]:underline group-focus/button:[&_span]:underline",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a bit nitpick, but these hover and focus styles only applied on desktop and above. With this, this is being applied in tablet as well. I don't think there is a major problem, but I don't know how weird that effect might be on a touch device like a tablet.
To avoid any complications, and to keep 100% match, do you think you can add a desktop selector to these classes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don’t think breakpoints smaller than desktop imply touch device. You can still have a small window even on a computer with pointer device. Thus I prefer not restricting hover/focus on specific media queries. But if you prefer 100% match I’ll tweak it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My point was more the opposite: if we only have it for desktop and above, it is very unlikely to have hover effects on a touch device. But for the sake of simplification I don't mind keeping your approach as is 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if I follow but afaik the row timeline with hovers is visible from lm: and above. But anyway let’s keep it simple then 👍

)}
>
<Text
as="span"
size="small"
align="center"
type={isActive ? "primary" : "secondary"}
weight={isActive ? "medium" : "normal"}
>
{title}
</Text>
</StyledLabel>
</div>
)}
</div>
</Stack>
);

return (
<StyledContainer data-test={dataTest} isCompact={isCompact} status={status}>
<StyledProgressBar
status={status}
index={index}
isLastStep={isLastStep}
nextStepStatus={nextStepStatus}
isColumnOnDesktop={isColumnOnDesktop}
/>
<StyledContent>
<li className="group/container relative -my-px flex-1" data-test={dataTest}>
<div className="relative">
<ProgressBarPart
isColumn={isColumnOnDesktop}
className={cx(
isColumnOnDesktop ? "hidden" : "ltr:left-0 rtl:right-0",
status === "disabled" ? "bg-cloud-normal-hover" : "bg-product-normal",
)}
/>
<ProgressBarPart
isColumn={isColumnOnDesktop}
className={cx(
!isColumnOnDesktop && "ltr:right-0 rtl:left-0",
isColumnOnDesktop && isLastStep && "hidden",
status === "disabled" || nextStepStatus === "disabled"
? "bg-cloud-normal-hover"
: "bg-product-normal",
)}
/>
</div>
<div className="relative">
<Stack flex direction="column" align={isColumnOnDesktop ? "start" : "center"}>
{status === "disabled" ? (
<span
css={css`
padding: 0 ${theme.orbit.spaceXSmall};
`}
>
{step}
</span>
<span className="px-xs">{step}</span>
) : (
<StyledButtonWrapper
active={isActive}
<div
className="group/button px-xs cursor-pointer"
role="button"
tabIndex={0}
aria-current={isActive ? "step" : "false"}
@@ -252,11 +157,11 @@ const WizardStep = ({ dataTest, title, onClick, isCompleted }: WizardStepProps)
}}
>
{step}
</StyledButtonWrapper>
</div>
)}
</Stack>
</StyledContent>
</StyledContainer>
</div>
</li>
);
};

41 changes: 11 additions & 30 deletions packages/orbit-components/src/Wizard/WizardStepIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,25 @@
import * as React from "react";
import styled, { css } from "styled-components";
import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
import cx from "clsx";

import Text from "../Text";
import Check from "../icons/Check";
import useTheme from "../hooks/useTheme";
import defaultTheme from "../defaultTheme";
import { WizardStepContext } from "./WizardContext";

export const StyledStepIconContainer = styled.div<{ $disabled?: boolean; $glow?: boolean }>`
${({ theme, $disabled, $glow }) => css`
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: ${theme.orbit.borderRadiusFull};
background: ${$disabled
? theme.orbit.paletteCloudNormalHover
: theme.orbit.paletteProductNormal};
box-shadow: ${$glow && `0 0 0 4px ${convertHexToRgba(theme.orbit.paletteProductNormal, 20)}`};
position: relative;
top: -2px;
svg {
display: block;
}
`};
`;

StyledStepIconContainer.defaultProps = {
theme: defaultTheme,
};

const WizardStepIcon = ({ isCompleted }: { isCompleted?: boolean }) => {
const { index, status, isCompact, isActive } = React.useContext(WizardStepContext);
const theme = useTheme();

return (
<StyledStepIconContainer $disabled={status === "disabled"} $glow={isActive && !isCompact}>
<div
className={cx(
"-top-xxxs duration-fast relative flex size-[20px] items-center justify-center rounded-full transition-shadow ease-in",
status === "disabled"
? "bg-cloud-normal-hover"
: "bg-product-normal group-hover/container:shadow-wizard-step-icon-hover",
isActive && !isCompact && "shadow-wizard-step-icon-active",
)}
>
{isCompleted || status === "completed" ? (
<Check
size="small"
@@ -58,7 +39,7 @@ const WizardStepIcon = ({ isCompleted }: { isCompleted?: boolean }) => {
{typeof index === "number" ? index + 1 : null}
</Text>
)}
</StyledStepIconContainer>
</div>
);
};

71 changes: 0 additions & 71 deletions packages/orbit-components/src/Wizard/helpers.ts

This file was deleted.

60 changes: 12 additions & 48 deletions packages/orbit-components/src/Wizard/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import styled, { css } from "styled-components";
import cx from "clsx";

import WizardStep from "./WizardStep";
import { WizardStepContextProvider } from "./WizardContext";
@@ -12,35 +12,8 @@ import Portal from "../Portal";
import Modal from "../Modal";
import { CardSection } from "../Card";
import useMediaQuery from "../hooks/useMediaQuery";
import defaultTheme from "../defaultTheme";
import mq from "../utils/mediaQuery";
import type { Props, WizardStepProps } from "./types";

const unstyledListMixin = css`
list-style-type: none;
margin: 0;
padding: 0;
`;

// support column layout on desktop
// https://github.com/kiwicom/orbit/issues/3308
const StyledList = styled.ul<{ $direction?: "row" | "column" }>`
${({ $direction }) => css`
display: flex;
${unstyledListMixin};
${mq.largeMobile(css`
flex-direction: ${$direction};
li {
flex: 1 1 0%;
}
`)}
`}
`;

StyledList.defaultProps = {
theme: defaultTheme,
};

const Wizard = ({
dataTest,
lockScrolling = true,
@@ -100,13 +73,7 @@ const Wizard = ({
>
<Stack as="span" inline align="center">
{typeof labelProgress !== "undefined" && <b className="text-nowrap">{labelProgress}</b>}
<span
css={css`
font-weight: normal;
`}
>
{activeStepTitle}
</span>
<span className="font-normal">{activeStepTitle}</span>
</Stack>
</Button>
<Portal>
@@ -119,17 +86,9 @@ const Wizard = ({
setOpen(false);
}}
>
<nav
css={css`
/* matching this to ModalBody's border-radius */
padding-top: 9px;
`}
>
<ul
css={css`
${unstyledListMixin};
`}
>
{/* matching padding-top to ModalBody's border-radius */}
<nav className="orbit-wizard pt-[9px]">
<ul>
{steps}
<li>
<CardSection>
@@ -155,8 +114,13 @@ const Wizard = ({
}

return (
<nav>
<StyledList $direction={direction}>{steps}</StyledList>
<nav className="orbit-wizard">
<ul
className={cx("flex", direction === "column" ? "flex-col" : "flex-row")}
data-test={dataTest}
>
{steps}
</ul>
</nav>
);
};
Original file line number Diff line number Diff line change
@@ -1109,6 +1109,8 @@ exports[`orbitPreset should have preflight disabled 1`] = `
"raised": "0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24)",
"raised-reverse": "0 -4px 8px 0 rgba(37, 42, 49, 0.16),0 -8px 24px 0 rgba(37, 42, 49, 0.24)",
"switch": "inset 0 0 1px 0 rgba(7, 64, 92, 0.1),0 0 2px 0 rgba(37, 42, 49, 0.16),0 1px 4px 0 rgba(37, 42, 49, 0.12)",
"wizard-step-icon-active": "0 0 0 4px rgba(0, 165, 142, 0.2)",
"wizard-step-icon-hover": "0 0 0 6px rgba(0, 165, 142, 0.2)",
},
"boxShadowColor": {
"blue": {
8 changes: 8 additions & 0 deletions packages/orbit-tailwind-preset/src/index.ts
Original file line number Diff line number Diff line change
@@ -249,6 +249,14 @@ export default function orbitTailwindPreset(options?: Options): Config {
switch: `inset 0 0 1px 0 rgba(7, 64, 92, 0.1),${tokens.boxShadowAction}`,
"modal-scrolled": `inset 0 1px 0 ${tokens.paletteCloudNormal}, ${tokens.boxShadowFixedReverse}`,
modal: `inset 0 0 0 transparent, ${tokens.boxShadowFixedReverse}`,
"wizard-step-icon-hover": `0 0 0 6px ${convertHexToRgba(
tokens.paletteProductNormal,
20,
)}`,
"wizard-step-icon-active": `0 0 0 4px ${convertHexToRgba(
tokens.paletteProductNormal,
20,
)}`,
},
keyframes: {
"slow-pulse": {