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

Align and update tokens with Figma component library #232

Merged
merged 3 commits into from
Jun 20, 2024
Merged
Show file tree
Hide file tree
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
82 changes: 41 additions & 41 deletions docs/blocks/administration/Billing.story.tsx

Large diffs are not rendered by default.

46 changes: 23 additions & 23 deletions docs/blocks/administration/Team.story.tsx

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions docs/blocks/authentication/ForgotPassword.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const ForgotPassword = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Reset your password
</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Copy link
Member

Choose a reason for hiding this comment

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

text-text-secondary - Not in love w/ that.

Welcome to Reablocks, powered by Good Code
</span>
</div>
Expand Down Expand Up @@ -180,7 +180,7 @@ export const ForgotPasswordFull = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Forgot Password?
</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Forgot your password? No worries! Simply enter your email address
below, and we'll send you instructions on how to reset it.
</span>
Expand Down Expand Up @@ -261,7 +261,7 @@ export const ForgotPasswordMinimal = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Forgot Password?
</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Forgot your password? No worries! Simply enter your email address
below, and we'll send you instructions on how to reset it.
</span>
Expand Down Expand Up @@ -318,7 +318,7 @@ export const ForgotPasswordMinimal = () => {
{isSubmitting ? 'Sending...' : 'Get Link'}
</Button>
<Stack className="w-full" justifyContent="center">
<span className="text-sm text-panel-secondary-content">
<span className="text-sm text-text-secondary">
Remember password?
</span>
<a href="#" className="text-primary text-lg font-semibold">
Expand Down Expand Up @@ -355,7 +355,7 @@ export const ResetPassword = () => {
</a>
</Stack>
<div className="w-full flex flex-col grow items-center justify-center text-center pt-2 mb-14">
<div className="p-3 border border-panel-secondary-content rounded mb-3">
<div className="p-3 border border-secondary-inactive rounded mb-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
Expand All @@ -367,7 +367,7 @@ export const ResetPassword = () => {
</svg>
</div>
<h4 className="text-2xl font-sans font-bold mb-0">Reset Password?</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Forgot your password? No worries! Simply enter your email address
below, and we'll send you instructions on how to reset it.
</span>
Expand Down Expand Up @@ -447,9 +447,9 @@ export const ResetPassword = () => {
</div>
<Stack justifyContent="center">
<div className="h-[4px] w-[60px] bg-primary rounded" />
<div className="h-[4px] w-[60px] bg-surface-disabled rounded" />
<div className="h-[4px] w-[60px] bg-surface-disabled rounded" />
<div className="h-[4px] w-[60px] bg-surface-disabled rounded" />
<div className="h-[4px] w-[60px] dark:bg-gray-800 light:bg-gray-300 rounded" />
<div className="h-[4px] w-[60px] dark:bg-gray-800 light:bg-gray-300 rounded" />
<div className="h-[4px] w-[60px] dark:bg-gray-800 light:bg-gray-300 rounded" />
</Stack>
</Card>
</motion.div>
Expand All @@ -471,7 +471,7 @@ export const ResetPasswordMinimal = () => {
>
<Card className="w-full p-12">
<div className="flex flex-col items-center justify-center text-center pt-2 mb-10">
<div className="p-3 border border-panel-secondary-content rounded mb-3">
<div className="p-3 border border-secondary-inactive rounded mb-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
Expand All @@ -483,7 +483,7 @@ export const ResetPasswordMinimal = () => {
</svg>
</div>
<h4 className="text-2xl font-sans font-bold mb-0">Reset Password?</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Forgot your password? No worries! Simply enter your email address
below, and we'll send you instructions on how to reset it.
</span>
Expand Down Expand Up @@ -537,7 +537,7 @@ export const ResetPasswordMinimal = () => {
{isSubmitting ? 'Sending...' : 'Reset Password'}
</Button>
<Stack className="w-full" justifyContent="center">
<span className="text-sm text-panel-secondary-content">
<span className="text-sm text-text-secondary">
Remember your password?
</span>
<a
Expand Down
20 changes: 10 additions & 10 deletions docs/blocks/authentication/Login.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const Login = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Log In or create account
</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Welcome to Reablocks, powered by Good Code
</span>
</div>
Expand Down Expand Up @@ -129,7 +129,7 @@ export const Login = () => {
>
Sign up with Google
</Button>
<div className="mt-5 text-sm text-panel-secondary-content flex items-center justify-center gap-2">
<div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
By signing in, you agree to our
<a
href="#"
Expand Down Expand Up @@ -170,7 +170,7 @@ export const LoginBasic = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Log In or create account
</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Welcome to Reablocks, powered by Good Code
</span>
</div>
Expand Down Expand Up @@ -237,7 +237,7 @@ export const LoginBasic = () => {
>
Sign up
</Button>
<div className="mt-5 text-sm text-panel-secondary-content flex items-center justify-center gap-2">
<div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
By signing in, you agree to our
<a
href="#"
Expand Down Expand Up @@ -281,7 +281,7 @@ export const LoginFull = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Log In or create account
</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Welcome to Reablocks, powered by Good Code
</span>
<form
Expand Down Expand Up @@ -389,7 +389,7 @@ export const LoginFull = () => {
Sign up with Microsoft
</Button>
</div>
<div className="mt-5 text-sm text-panel-secondary-content flex items-center justify-center gap-1.5">
<div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-1.5">
By signing in, you agree to our
<a
href="#"
Expand Down Expand Up @@ -435,7 +435,7 @@ export const LoginPassword = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Log In or create account
</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Welcome to Reablocks, powered by Good Code
</span>
</div>
Expand Down Expand Up @@ -521,7 +521,7 @@ export const LoginPassword = () => {
>
{isSubmitting ? 'Logging in...' : 'Login'}
</Button>
<div className="mt-5 text-sm text-panel-secondary-content flex items-center justify-center gap-2">
<div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
Don't have an account?
<a
href="#"
Expand Down Expand Up @@ -555,7 +555,7 @@ export const LoginSocial = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Log In or create account
</h4>
<span className="text-base text-panel-secondary-content font-sans">
<span className="text-base text-text-secondary font-sans">
Welcome to Reablocks, powered by Good Code
</span>
</div>
Expand Down Expand Up @@ -664,7 +664,7 @@ export const LoginSocial = () => {
Sign up with Microsoft
</Button>
</div>
<div className="mt-5 text-sm text-panel-secondary-content flex items-center justify-center gap-2">
<div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
By signing in, you agree to our
<a
href="#"
Expand Down
18 changes: 9 additions & 9 deletions docs/blocks/authentication/Mfa.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -977,7 +977,7 @@ export const Mfa = () => {
>
<Card className="w-full">
<div className="flex flex-col items-center justify-center pt-2 pb-5 text-center">
<div className="p-3 border border-panel-secondary-content rounded mb-3">
<div className="p-3 border border-secondary-inactive rounded mb-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
Expand All @@ -991,7 +991,7 @@ export const Mfa = () => {
<h1 className="mt-2 mb-0 text-2xl font-sans font-bold">
One Time Password
</h1>
<div className="text-panel-secondary-content text-base">
<div className="text-text-secondary text-base">
Please verify your identity using your registered email or phone
number and follow the prompts to complete the password reset
process.
Expand Down Expand Up @@ -1035,10 +1035,10 @@ export const Mfa = () => {
</svg>
{isSubmitting ? 'Verifying...' : 'Verify'}
</Button>
<div className="text-center text-panel-secondary-content text-sm mt-5">
<div className="text-center text-text-secondary text-sm mt-5">
Are you facing any problems with receiving the code?
</div>
<div className="mt-2.5 mb-5 text-panel-secondary-content text-sm flex items-center justify-center gap-5">
<div className="mt-2.5 mb-5 text-text-secondary text-sm flex items-center justify-center gap-5">
<a
href="#"
className="text-primary hover:text-primary-hover text-lg inline-flex items-center gap-2"
Expand All @@ -1056,8 +1056,8 @@ export const Mfa = () => {
</a>
</div>
<Divider variant="secondary" className="my-4" />
<div className="mt-5 text-panel-secondary-content text-sm flex items-center justify-center gap-5">
<span className="text-panel-secondary-content text-sm">
<div className="mt-5 text-text-secondary text-sm flex items-center justify-center gap-5">
<span className="text-text-secondary text-sm">
Remember your password?
</span>
<a
Expand Down Expand Up @@ -1117,7 +1117,7 @@ export const MfaLogin = () => {
<h1 className="mt-2 mb-0 text-2xl font-sans font-bold">
Enter your code
</h1>
<div className="text-panel-secondary-content text-base">
<div className="text-text-secondary text-base">
We sent a code to{' '}
<a href="#" className="text-primary">
[email protected]
Expand All @@ -1144,7 +1144,7 @@ export const MfaLogin = () => {
/>
</Block>
<Stack justifyContent="spaceBetween" className="mb-[190px]">
<div className="text-center text-panel-secondary-content text-base">
<div className="text-center text-text-secondary text-base">
Didn't receive a email?
</div>
<a
Expand Down Expand Up @@ -1206,7 +1206,7 @@ export const MfaAuthenticator = () => {
<h1 className="mb-0 text-2xl font-sans font-bold">
Set up your two-factor authentication.
</h1>
<div className="text-panel-secondary-content">
<div className="text-text-secondary">
Scan this code with your Google authenticator app to continue this
process.
</div>
Expand Down
20 changes: 10 additions & 10 deletions docs/blocks/authentication/Register.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export const Register = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Welcome to Reablocks
</h4>
<p className="text-base text-panel-secondary-content font-sans">
<p className="text-base text-text-secondary font-sans">
Welcome! Let's get started by creating your account. Please provide
your email address and choose a secure password to begin accessing
our platform's features.
Expand Down Expand Up @@ -165,7 +165,7 @@ export const Register = () => {
>
{isSubmitting ? 'Signing up...' : 'Sign up →'}
</Button>
<div className="mt-5 text-sm text-panel-secondary-content flex items-center justify-center gap-2">
<div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
By signing in, you agree to our
<a
href="#"
Expand All @@ -182,7 +182,7 @@ export const Register = () => {
</a>
</div>
<Divider className="mt-5 mb-5" variant="secondary" />
<div className="mt-5 text-panel-secondary-content text-sm flex items-center justify-center gap-2">
<div className="mt-5 text-text-secondary text-sm flex items-center justify-center gap-2">
Already have an account?
<a
href="#"
Expand Down Expand Up @@ -219,7 +219,7 @@ export const RegisterFull = () => {
<h4 className="text-2xl font-sans font-bold mb-0">
Welcome to Reablocks
</h4>
<p className="text-base text-panel-secondary-content font-sans">
<p className="text-base text-text-secondary font-sans">
Excited to have you onboard! Start by creating your account to gain
access to our platform. Simply provide your email, choose a
password, and include any necessary information about your company
Expand Down Expand Up @@ -507,7 +507,7 @@ export const RegisterFull = () => {
</div>
<Divider variant="secondary" className="mt-4" />
<div className="flex flex-col items-center justify-between md:flex-row">
<div className="text-panel-secondary-content text-sm flex items-center justify-center gap-2">
<div className="text-text-secondary text-sm flex items-center justify-center gap-2">
Already have an account?
<a
href="#"
Expand Down Expand Up @@ -553,7 +553,7 @@ export const RegisterV2 = () => {
<h4 className="text-2xl font-sans font-bold mb-0 text-center">
Welcome to Reablocks
</h4>
<p className="text-base text-panel-secondary-content font-sans text-center">
<p className="text-base text-text-secondary font-sans text-center">
Welcome! Let's get started by creating your account. Please provide
your email address and choose a secure password to begin accessing
our platform's features.
Expand Down Expand Up @@ -662,7 +662,7 @@ export const RegisterV2 = () => {
>
{isSubmitting ? 'Creating...' : 'Create Account →'}
</Button>
<div className="mt-5 text-sm text-panel-secondary-content flex items-center justify-center gap-2">
<div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
By signing in, you agree to our
<a
href="#"
Expand All @@ -679,7 +679,7 @@ export const RegisterV2 = () => {
</a>
</div>
<Divider className="mt-5 mb-5" variant="secondary" />
<div className="mt-5 text-panel-secondary-content text-sm flex items-center justify-center gap-2">
<div className="mt-5 text-text-secondary text-sm flex items-center justify-center gap-2">
Already have an account?
<a
href="#"
Expand Down Expand Up @@ -851,7 +851,7 @@ export const RegisterWithSocial = () => {
>
{isSubmitting ? 'Signing up...' : 'Sign up →'}
</Button>
<div className="mt-5 text-sm text-panel-secondary-content flex items-center justify-center gap-2">
<div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
By signing in, you agree to our
<a
href="#"
Expand All @@ -868,7 +868,7 @@ export const RegisterWithSocial = () => {
</a>
</div>
<Divider className="mt-5 mb-5" variant="secondary" />
<div className="mt-5 text-panel-secondary-content text-sm flex items-center justify-center gap-2">
<div className="mt-5 text-text-secondary text-sm flex items-center justify-center gap-2">
Already have an account?
<a
href="#"
Expand Down
Loading
Loading