diff --git a/docs/blocks/administration/Billing.story.tsx b/docs/blocks/administration/Billing.story.tsx index d4382647..96ef5919 100644 --- a/docs/blocks/administration/Billing.story.tsx +++ b/docs/blocks/administration/Billing.story.tsx @@ -32,7 +32,7 @@ export const BillingFull = () => (

Billing

-

+

Easily manage your account, view invoices, and track payments conveniently in one place. Explore flexible subscription options and manage your billing preferences effortlessly. @@ -66,7 +66,7 @@ export const BillingFull = () => (

$1000 - + /Year
@@ -96,7 +96,7 @@ export const BillingFull = () => ( Billing period
Monthly - + (renews Mar 15, 2024)
@@ -177,14 +177,14 @@ export const PayAndBilling = () => { ...defaultChipTheme.colors.info, variants: { ...defaultChipTheme?.colors?.info?.variants, - filled: `${defaultChipTheme?.colors?.info?.variants?.filled} text-panel-content bg-info/10 border-info` + filled: `${defaultChipTheme?.colors?.info?.variants?.filled} text-text-primary bg-info/10 border-info` } }, success: { ...defaultChipTheme.colors.success, variants: { ...defaultChipTheme?.colors?.success?.variants, - filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` + filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-text-primary bg-success/10 border-success` } } } @@ -201,7 +201,7 @@ export const PayAndBilling = () => {

Pay & Billing

-

+

Manage your plan and payments

@@ -253,12 +253,12 @@ export const PayAndBilling = () => { contentClassName="flex justify-between items-start" >
- + Monthly plan
$1000{' '} - + /Month
@@ -289,7 +289,7 @@ export const PayAndBilling = () => {
- + Renews on Mar 15, 2024 @@ -298,7 +298,7 @@ export const PayAndBilling = () => {
Usage - + Your usage is renewed every month
@@ -315,7 +315,7 @@ export const PayAndBilling = () => {
-
+
Design Credits {
-
+
Design Credits {
-
+
Design Credits (
Current Subscription - + Your account is billed monthly and the next payment is due{' '} - + March 15, 2024
-
+
Selected plan
-
+
Team
-
+
Price
-
+
@@ -520,16 +520,16 @@ export const BillingSubscription = () => (
-
+
Seats
-
+
@@ -538,16 +538,16 @@ export const BillingSubscription = () => (
-
+
Yearly Cost
-
+
@@ -690,14 +690,14 @@ export const BillingInformation = () => { ...defaultChipTheme.colors.warning, variants: { ...defaultChipTheme?.colors?.warning?.variants, - filled: `${defaultChipTheme?.colors?.warning?.variants?.filled} text-panel-content bg-warning/10 border-warning` + filled: `${defaultChipTheme?.colors?.warning?.variants?.filled} text-text-primary bg-warning/10 border-warning` } }, success: { ...defaultChipTheme.colors.success, variants: { ...defaultChipTheme?.colors?.success?.variants, - filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` + filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-text-primary bg-success/10 border-success` } } } @@ -709,7 +709,7 @@ export const BillingInformation = () => { animate={{ y: 0, opacity: 1 }} className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm md:min-w-[960px] md:max-w-[1200px]" > -
+
@@ -725,7 +725,7 @@ export const BillingInformation = () => { Teams Plan
- + Organization plan - collaborate on projects with your team
@@ -749,7 +749,7 @@ export const BillingInformation = () => {
$62/mo - + 65 Seats
@@ -770,13 +770,13 @@ export const BillingInformation = () => {
- + Card information Visa ending in 0315
- + Name on card Austin McDaniel @@ -793,13 +793,13 @@ export const BillingInformation = () => {
- + Next billing date Mar 15, 2025
- + Billing address @@ -811,7 +811,7 @@ export const BillingInformation = () => {
- + Invoice Date
@@ -842,7 +842,7 @@ export const BillingInformation = () => {
- + Status
@@ -879,7 +879,7 @@ export const BillingInformation = () => {
- + Card Used
@@ -899,7 +899,7 @@ export const BillingInformation = () => { > - + Visa ending in 0315
@@ -921,7 +921,7 @@ export const BillingInformation = () => { > - + Visa ending in 0315
@@ -955,7 +955,7 @@ export const BillingInformation = () => { > - + Visa ending in 0315
diff --git a/docs/blocks/administration/Team.story.tsx b/docs/blocks/administration/Team.story.tsx index b2c060f5..0e2c7f01 100644 --- a/docs/blocks/administration/Team.story.tsx +++ b/docs/blocks/administration/Team.story.tsx @@ -99,7 +99,7 @@ export const TeamGeneral = () => {

General

-

+

Effectively manage your team's workflow with our intuitive application. Streamline task delegation, monitor progress, and foster seamless collaboration among team members. Stay informed, @@ -119,7 +119,7 @@ export const TeamGeneral = () => {

Users - + Manage user accounts, permissions, and access levels within the app to ensure smooth operation and security. @@ -153,7 +153,7 @@ export const TeamGeneral = () => { .map((user, index) => ( <> @@ -186,7 +186,7 @@ export const TeamGeneral = () => { width="16" height="16" viewBox="0 0 16 16" - className="text-panel-content" + className="text-text-primary" fill="currentColor" > @@ -201,7 +201,7 @@ export const TeamGeneral = () => { width="16" height="16" viewBox="0 0 16 16" - className="text-panel-content" + className="text-text-primary" fill="currentColor" > @@ -216,7 +216,7 @@ export const TeamGeneral = () => {
- + Showing 10 of 25 @@ -304,7 +304,7 @@ export const TeamMinimal = () => {
On teams - + You're currently on these teams.
@@ -344,13 +344,13 @@ export const TeamMinimal = () => {
Your team - + Manage your existing team and change roles/permissions.
- + @@ -367,7 +367,7 @@ export const TeamMinimal = () => { .map((user, index) => ( <>
Name Email
@@ -383,7 +383,7 @@ export const TeamMinimal = () => { width="16" height="16" viewBox="0 0 16 16" - className="text-panel-content" + className="text-text-primary" fill="currentColor" > @@ -404,7 +404,7 @@ export const TeamMinimal = () => {
- + Showing 10 of 25 @@ -484,7 +484,7 @@ export const TeamRoles = () => {

Team Members

- + Manage user accounts, permissions, and access levels within the app to ensure smooth operation and security. @@ -510,14 +510,14 @@ export const TeamRoles = () => {
Admins (3) -

+

Manage user accounts, permissions, and access levels within the app to ensure smooth operation and security.

- +
{ .map((user, index) => ( <>
@@ -585,7 +585,7 @@ export const TeamRoles = () => { width="16" height="16" viewBox="0 0 16 16" - className="text-panel-content" + className="text-text-primary" fill="currentColor" > @@ -600,7 +600,7 @@ export const TeamRoles = () => { width="17" height="16" viewBox="0 0 17 16" - className="text-panel-content" + className="text-text-primary" fill="currentColor" > @@ -645,14 +645,14 @@ export const TeamRoles = () => {
Users (12) -

+

Manage user accounts, permissions, and access levels within the app to ensure smooth operation and security.

- +
{ .map((user, index) => ( <>
@@ -720,7 +720,7 @@ export const TeamRoles = () => { width="16" height="16" viewBox="0 0 16 16" - className="text-panel-content" + className="text-text-primary" fill="currentColor" > @@ -735,7 +735,7 @@ export const TeamRoles = () => { width="17" height="16" viewBox="0 0 17 16" - className="text-panel-content" + className="text-text-primary" fill="currentColor" > diff --git a/docs/blocks/authentication/ForgotPassword.story.tsx b/docs/blocks/authentication/ForgotPassword.story.tsx index cbce9a09..7496aa56 100644 --- a/docs/blocks/authentication/ForgotPassword.story.tsx +++ b/docs/blocks/authentication/ForgotPassword.story.tsx @@ -61,7 +61,7 @@ export const ForgotPassword = () => {

Reset your password

- + Welcome to Reablocks, powered by Good Code @@ -180,7 +180,7 @@ export const ForgotPasswordFull = () => {

Forgot Password?

- + Forgot your password? No worries! Simply enter your email address below, and we'll send you instructions on how to reset it. @@ -261,7 +261,7 @@ export const ForgotPasswordMinimal = () => {

Forgot Password?

- + Forgot your password? No worries! Simply enter your email address below, and we'll send you instructions on how to reset it. @@ -318,7 +318,7 @@ export const ForgotPasswordMinimal = () => { {isSubmitting ? 'Sending...' : 'Get Link'} - + Remember password? @@ -355,7 +355,7 @@ export const ResetPassword = () => {
-
+
{

Reset Password?

- + Forgot your password? No worries! Simply enter your email address below, and we'll send you instructions on how to reset it. @@ -447,9 +447,9 @@ export const ResetPassword = () => {
-
-
-
+
+
+
@@ -471,7 +471,7 @@ export const ResetPasswordMinimal = () => { >
-
+
{

Reset Password?

- + Forgot your password? No worries! Simply enter your email address below, and we'll send you instructions on how to reset it. @@ -537,7 +537,7 @@ export const ResetPasswordMinimal = () => { {isSubmitting ? 'Sending...' : 'Reset Password'} - + Remember your password? {

Log In or create account

- + Welcome to Reablocks, powered by Good Code
@@ -129,7 +129,7 @@ export const Login = () => { > Sign up with Google -
+ @@ -237,7 +237,7 @@ export const LoginBasic = () => { > Sign up -
+ -
+ @@ -521,7 +521,7 @@ export const LoginPassword = () => { > {isSubmitting ? 'Logging in...' : 'Login'} - -
+
By signing in, you agree to our { >
-
+
{

One Time Password

-
+
Please verify your identity using your registered email or phone number and follow the prompts to complete the password reset process. @@ -1035,10 +1035,10 @@ export const Mfa = () => { {isSubmitting ? 'Verifying...' : 'Verify'} -
+
Are you facing any problems with receiving the code?
-
+ -
- +
+ Remember your password? {

Enter your code

-
+
We sent a code to{' '} austin@goodcode.us @@ -1144,7 +1144,7 @@ export const MfaLogin = () => { /> -
+
Didn't receive a email?
{

Set up your two-factor authentication.

-
+
Scan this code with your Google authenticator app to continue this process.
diff --git a/docs/blocks/authentication/Register.story.tsx b/docs/blocks/authentication/Register.story.tsx index 8902fbb8..aeab2c1f 100644 --- a/docs/blocks/authentication/Register.story.tsx +++ b/docs/blocks/authentication/Register.story.tsx @@ -77,7 +77,7 @@ export const Register = () => {

Welcome to Reablocks

-

+

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. @@ -165,7 +165,7 @@ export const Register = () => { > {isSubmitting ? 'Signing up...' : 'Sign up →'} -

+ -
+
-
+
Already have an account? {

Welcome to Reablocks

-

+

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. @@ -662,7 +662,7 @@ export const RegisterV2 = () => { > {isSubmitting ? 'Creating...' : 'Create Account →'} -

+ -
+
Already have an account? { > {isSubmitting ? 'Signing up...' : 'Sign up →'} -
+ -
+
Already have an account? (
No Results Found - + There are no results matching your search criteria. Try adjusting your filters or search terms to find what you're looking for. @@ -39,7 +39,7 @@ export const NoResults = () => (
Documentation
- + Learn how to integrate our tools with your app.
@@ -75,7 +75,7 @@ export const NoResults = () => (
API's
- + Explore all API references.
@@ -111,7 +111,7 @@ export const NoResults = () => (
Guide
- + Easy-to-follow installation guides.
@@ -147,7 +147,7 @@ export const NoResults = () => (
Blog
- + Read our latest news.
@@ -179,7 +179,7 @@ export const MissingInfo = () => ( contentClassName="flex flex-col gap-2 items-center text-center" > Missing Info - + Oops! It seems like something is missing. Try adjusting your search criteria or check back later. @@ -242,7 +242,7 @@ export const NothingToDisplay = () => ( Nothing to display - + We couldn't find any data to show here. Try refining your search or come back later to see if there's anything new. diff --git a/docs/blocks/foundation/NotFound.story.tsx b/docs/blocks/foundation/NotFound.story.tsx index 1c1b2bf0..64009491 100644 --- a/docs/blocks/foundation/NotFound.story.tsx +++ b/docs/blocks/foundation/NotFound.story.tsx @@ -840,7 +840,7 @@ export const NotFound = () => (
-
+
We lost this page
@@ -1121,7 +1121,7 @@ export const LostPage = () => ( 404 Error
-
+
We lost this page
diff --git a/docs/blocks/foundation/Support.story.tsx b/docs/blocks/foundation/Support.story.tsx index 4041731f..b467e3df 100644 --- a/docs/blocks/foundation/Support.story.tsx +++ b/docs/blocks/foundation/Support.story.tsx @@ -28,7 +28,7 @@ export const Support = () => {

Report an issue

-
+
Found a bug? Please let us know so we can fix it.
diff --git a/src/data/Pager/PagerTheme.ts b/src/data/Pager/PagerTheme.ts index c4dcc82c..32471f81 100644 --- a/src/data/Pager/PagerTheme.ts +++ b/src/data/Pager/PagerTheme.ts @@ -41,7 +41,7 @@ export const pagerTheme: PagerTheme = { ...baseTheme.pages, page: { base: [baseTheme.pages.page.base, 'text-slate-500'].join(' '), - active: [baseTheme.pages.page.active, '!text-surface-content'].join(' ') + active: [baseTheme.pages.page.active, '!text-text-primary'].join(' ') } }, control: [ diff --git a/src/data/Redact/RedactTheme.ts b/src/data/Redact/RedactTheme.ts index 4ece7bec..5464ab23 100644 --- a/src/data/Redact/RedactTheme.ts +++ b/src/data/Redact/RedactTheme.ts @@ -10,7 +10,7 @@ const baseTheme: RedactTheme = { export const redactTheme: RedactTheme = { ...baseTheme, - base: [baseTheme.base, 'text-surface-content'].join(' ') + base: [baseTheme.base, 'text-text-primary'].join(' ') }; export const legacyRedactTheme: RedactTheme = { diff --git a/src/data/Sort/SortTheme.ts b/src/data/Sort/SortTheme.ts index 2fac7940..bba8e2f5 100644 --- a/src/data/Sort/SortTheme.ts +++ b/src/data/Sort/SortTheme.ts @@ -20,7 +20,7 @@ const baseTheme: SortTheme = { export const sortTheme: SortTheme = { ...baseTheme, - base: [baseTheme.base, 'text-surface-content'].join(' ') + base: [baseTheme.base, 'text-text-primary'].join(' ') }; export const legacySortTheme: SortTheme = { diff --git a/src/elements/Arrow/ArrowTheme.ts b/src/elements/Arrow/ArrowTheme.ts index a7f4e874..05759c64 100644 --- a/src/elements/Arrow/ArrowTheme.ts +++ b/src/elements/Arrow/ArrowTheme.ts @@ -16,7 +16,7 @@ const baseTheme: ArrowTheme = { export const arrowTheme: ArrowTheme = { ...baseTheme, - base: [baseTheme.base, 'text-surface-content'].join(' ') + base: [baseTheme.base, 'text-text-primary'].join(' ') }; export const legacyArrowTheme: ArrowTheme = { diff --git a/src/elements/AvatarGroup/AvatarGroupTheme.ts b/src/elements/AvatarGroup/AvatarGroupTheme.ts index 0ea9b75d..3942f111 100644 --- a/src/elements/AvatarGroup/AvatarGroupTheme.ts +++ b/src/elements/AvatarGroup/AvatarGroupTheme.ts @@ -12,7 +12,7 @@ const baseTheme: AvatarGroupTheme = { export const avatarGroupTheme: AvatarGroupTheme = { ...baseTheme, - base: [baseTheme.base, 'text-surface-content'].join(' ') + base: [baseTheme.base, 'text-text-primary'].join(' ') }; export const legacyAvatarGroupTheme: AvatarGroupTheme = { diff --git a/src/elements/Badge/BadgeTheme.ts b/src/elements/Badge/BadgeTheme.ts index d7c493e9..5692c506 100644 --- a/src/elements/Badge/BadgeTheme.ts +++ b/src/elements/Badge/BadgeTheme.ts @@ -44,9 +44,9 @@ export const badgeTheme: BadgeTheme = { positions: baseTheme.positions, colors: { default: 'bg-white text-black', - primary: 'bg-primary text-surface-content', - secondary: 'bg-secondary text-surface-content', - error: 'bg-error text-surface-content' + primary: 'bg-primary text-text-primary', + secondary: 'bg-secondary text-text-primary', + error: 'bg-error text-text-primary' } }; diff --git a/src/elements/Button/ButtonTheme.ts b/src/elements/Button/ButtonTheme.ts index aeac42c4..402b1687 100644 --- a/src/elements/Button/ButtonTheme.ts +++ b/src/elements/Button/ButtonTheme.ts @@ -91,7 +91,7 @@ const baseTheme: Partial = { }; export const buttonTheme: ButtonTheme = { - base: [baseTheme.base, 'text-surface-content font-semibold'].join(' '), + base: [baseTheme.base, 'text-text-primary font-semibold'].join(' '), disabled: [ baseTheme.disabled, 'data-[variant=filled]:disabled:bg-gray-600 disabled:text-gray-400 border-gray-500' @@ -111,33 +111,33 @@ export const buttonTheme: ButtonTheme = { default: { filled: 'bg-gray-800 hover:bg-gray-700 border-gray-800', outline: 'border-secondary border', - text: 'text-surface-content' + text: 'text-text-primary' }, primary: { filled: - 'bg-primary hover:bg-primary-hover border-primary text-surface-content', + 'bg-primary hover:bg-primary-hover border-primary text-text-primary', outline: 'border border-primary', text: 'text-primary hover:text-primary-hover' }, secondary: { - filled: 'bg-secondary hover:bg-secondary-hover !text-surface-content', + filled: 'bg-secondary hover:bg-secondary-hover !text-text-primary', outline: 'border border-secondary', text: 'text-secondary hover:text-secondary-hover' }, success: { filled: - 'bg-success hover:bg-success-hover border-success text-surface-content', + 'bg-success hover:bg-success-hover border-success text-text-primary', outline: 'border border-success', text: 'text-success hover:text-success-hover' }, warning: { filled: - 'bg-warning hover:bg-warning-hover border-warning text-surface-content', + 'bg-warning hover:bg-warning-hover border-warning text-text-primary', outline: 'border border-warning', text: 'text-warning hover:text-warning-hover' }, error: { - filled: 'bg-error hover:bg-error-hover border-error text-surface-content', + filled: 'bg-error hover:bg-error-hover border-error text-text-primary', outline: 'border border-error', text: 'text-error hover:text-error-hover' } diff --git a/src/elements/Chip/Chip.story.tsx b/src/elements/Chip/Chip.story.tsx index 1a771905..dc64dd07 100644 --- a/src/elements/Chip/Chip.story.tsx +++ b/src/elements/Chip/Chip.story.tsx @@ -114,35 +114,35 @@ export const CustomTheme = () => { ...chipTheme.colors.secondary, variants: { ...chipTheme.colors.secondary.variants, - filled: `${chipTheme?.colors?.secondary?.variants?.filled} bg-panel-content text-panel` + filled: `${chipTheme?.colors?.secondary?.variants?.filled} dark:bg-gray-100 light:bg-gray-900 text-panel` } }, info: { ...chipTheme.colors.info, variants: { ...chipTheme.colors.info.variants, - filled: `${chipTheme?.colors?.info?.variants?.filled} text-panel-content bg-info/10 border-info` + filled: `${chipTheme?.colors?.info?.variants?.filled} text-text-primary bg-info/10 border-info` } }, error: { ...chipTheme.colors.error, variants: { ...chipTheme.colors.error.variants, - filled: `${chipTheme?.colors?.error?.variants?.filled} text-panel-content bg-error/10 border-error` + filled: `${chipTheme?.colors?.error?.variants?.filled} text-text-primary bg-error/10 border-error` } }, warning: { ...chipTheme.colors.warning, variants: { ...chipTheme.colors.warning.variants, - filled: `${chipTheme?.colors?.warning?.variants?.filled} text-panel-content bg-warning/10 border-warning` + filled: `${chipTheme?.colors?.warning?.variants?.filled} text-text-primary bg-warning/10 border-warning` } }, success: { ...chipTheme.colors.success, variants: { ...chipTheme.colors.success.variants, - filled: `${chipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` + filled: `${chipTheme?.colors?.success?.variants?.filled} text-text-primary bg-success/10 border-success` } } } diff --git a/src/elements/Chip/ChipTheme.ts b/src/elements/Chip/ChipTheme.ts index 13f75e58..04accb6d 100644 --- a/src/elements/Chip/ChipTheme.ts +++ b/src/elements/Chip/ChipTheme.ts @@ -148,8 +148,8 @@ export const chipTheme: ChipTheme = { colors: { default: { variants: { - filled: 'bg-panel border-panel text-panel-content', - outline: 'text-panel-content border-panel-content' + filled: 'bg-panel border-panel text-text-primary', + outline: 'text-text-primary dark:border-gray-100 light:border-gray-900' }, selectable: { base: `${baseTheme.colors.default.selectable.base}`, @@ -186,7 +186,7 @@ export const chipTheme: ChipTheme = { }, secondary: { variants: { - filled: 'bg-secondary border-secondary text-panel-content', + filled: 'bg-secondary border-secondary text-text-primary', outline: 'text-secondary border-panel-accent' }, selectable: { diff --git a/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts b/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts index eda73edf..f627d11e 100644 --- a/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts +++ b/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts @@ -18,7 +18,7 @@ export const commandPaletteInputTheme: CommandPaletteInputTheme = { ), input: [ baseTheme.input, - 'bg-panel text-panel-content placeholder:placeholder-accent' + 'bg-panel text-text-primary placeholder:placeholder-accent' ].join(' ') }; diff --git a/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts b/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts index 5f01f16f..c7642aff 100644 --- a/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts +++ b/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts @@ -12,7 +12,7 @@ const baseTheme: CommandPaletteItemTheme = { export const commandPaletteItemTheme: CommandPaletteItemTheme = { ...baseTheme, - active: [baseTheme.active, 'bg-primary text-panel-content'].join(' '), + active: [baseTheme.active, 'bg-primary text-text-primary'].join(' '), clickable: [ baseTheme.clickable, 'hover:bg-primary-hover/70 dark:hover:bg-primary-hover hover:dark:text-white' diff --git a/src/elements/Loader/DotsLoaderTheme.ts b/src/elements/Loader/DotsLoaderTheme.ts index cc0261c3..b88c8c21 100644 --- a/src/elements/Loader/DotsLoaderTheme.ts +++ b/src/elements/Loader/DotsLoaderTheme.ts @@ -21,7 +21,7 @@ const baseTheme: DotsLoaderTheme = { export const dotsLoaderTheme: DotsLoaderTheme = { ...baseTheme, - dot: [baseTheme.dot, 'bg-surface-content'].join(' ') + dot: [baseTheme.dot, 'light:bg-gray-900 dark:bg-gray-100'].join(' ') }; export const legacyLoaderTheme: DotsLoaderTheme = { diff --git a/src/form/Calendar/CalendarTheme.ts b/src/form/Calendar/CalendarTheme.ts index 5ce8d535..1eac57f2 100644 --- a/src/form/Calendar/CalendarTheme.ts +++ b/src/form/Calendar/CalendarTheme.ts @@ -79,19 +79,18 @@ export const calendarTheme: CalendarTheme = { ...baseTheme, header: { ...baseTheme.header, - base: [baseTheme.header.base, 'text-panel-secondary-content'].join(' ') + base: [baseTheme.header.base, 'text-text-secondary'].join(' ') }, days: { ...baseTheme.days, day: [ baseTheme.days.day, - 'border-transparent text-panel-secondary-content opacity-90 hover:bg-primary-hover hover:text-black' - ].join(' '), - header: [baseTheme.days.header, 'text-panel-secondary-content'].join(' '), - outside: [ - baseTheme.days.outside, - 'opacity-40 text-panel-secondary-content' + 'border-transparent text-text-secondary opacity-90 hover:bg-primary-hover hover:text-black' ].join(' '), + header: [baseTheme.days.header, 'text-text-secondary'].join(' '), + outside: [baseTheme.days.outside, 'opacity-40 text-text-secondary'].join( + ' ' + ), selected: [ baseTheme.days.selected, 'text-black border-transparent light:text-white light:border-transparent opacity-100' @@ -100,16 +99,15 @@ export const calendarTheme: CalendarTheme = { baseTheme.days.hover, 'bg-primary-active text-black border-transparent light:text-white opacity-100' ].join(' '), - today: [ - baseTheme.days.today, - 'border-panel-content text-panel-content opacity-100' - ].join(' ') + today: [baseTheme.days.today, 'border-panel-accent text-text-primary'].join( + ' ' + ) }, months: { ...baseTheme.months, month: [ baseTheme.months.month, - 'hover:bg-primary-hover hover:text-black border-transparent text-panel-secondary-content light:hover:text-white' + 'hover:bg-primary-hover hover:text-black border-transparent text-text-secondary light:hover:text-white' ].join(' '), selected: [ baseTheme.years.selected, @@ -120,7 +118,7 @@ export const calendarTheme: CalendarTheme = { ...baseTheme.years, year: [ baseTheme.years.year, - 'hover:bg-primary-hover hover:text-black border-transparent text-panel-secondary-content light:hover:text-white' + 'hover:bg-primary-hover hover:text-black border-transparent text-text-secondary light:hover:text-white' ].join(' '), selected: [ baseTheme.years.selected, diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts index 300795da..f4046591 100644 --- a/src/form/Checkbox/CheckboxTheme.ts +++ b/src/form/Checkbox/CheckboxTheme.ts @@ -73,7 +73,7 @@ export const checkboxTheme: CheckboxTheme = { check: [baseTheme.check, 'stroke-primary'].join(' '), label: { ...baseTheme.label, - base: [baseTheme.label.base, 'text-surface-content'].join(' ') + base: [baseTheme.label.base, 'text-text-primary'].join(' ') }, boxVariants: { hover: { diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts index 7bee60d6..d5df00dc 100644 --- a/src/form/Input/InputTheme.ts +++ b/src/form/Input/InputTheme.ts @@ -44,7 +44,7 @@ export const inputTheme: InputTheme = { ...baseTheme, base: [ baseTheme.base, - 'bg-panel border border-panel-accent text-surface-content hover:border-panel-accent light:hover:border-panel-accent', + 'bg-panel border border-panel-accent text-text-primary hover:border-panel-accent light:hover:border-panel-accent', 'hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)]', 'hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-[2] hover:after:rounded hover:after:-bottom-[1px] hover:after:inset-x-0.5' ].join(' '), @@ -53,14 +53,14 @@ export const inputTheme: InputTheme = { 'focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)]', 'focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-[2] focus-within:after:rounded focus-within:after:-bottom-[1px] focus-within:after:inset-x-0.5' ].join(' '), - input: [baseTheme.input, ' placeholder-accent'].join(' '), + input: [baseTheme.input, 'placeholder-accent'].join(' '), disabled: [ baseTheme.disabled, 'disabled-within:bg-dark-disabled disabled-within:after:content-none' ].join(' '), adornment: { ...baseTheme.adornment, - base: [baseTheme.adornment.base, 'text-surface-content'].join(' ') + base: [baseTheme.adornment.base, 'text-text-primary'].join(' ') } }; diff --git a/src/form/Radio/RadioTheme.ts b/src/form/Radio/RadioTheme.ts index ee670f88..2a61ea78 100644 --- a/src/form/Radio/RadioTheme.ts +++ b/src/form/Radio/RadioTheme.ts @@ -62,8 +62,8 @@ export const radioTheme: RadioTheme = { ...baseTheme, label: { ...baseTheme.label, - base: [baseTheme.label.base, 'text-panel-secondary-content'].join(' '), - checked: [baseTheme.label.checked, 'text-panel-content'].join(' '), + base: [baseTheme.label.base, 'text-text-secondary'].join(' '), + checked: [baseTheme.label.checked, 'text-text-primary'].join(' '), disabled: [baseTheme.label.disabled, '!text-secondary-inactive/40'].join( ' ' ) diff --git a/src/form/Range/RangeTheme.ts b/src/form/Range/RangeTheme.ts index 317f73f3..68c82709 100644 --- a/src/form/Range/RangeTheme.ts +++ b/src/form/Range/RangeTheme.ts @@ -51,7 +51,7 @@ export const rangeTheme: RangeTheme = { ' ' ) }, - tooltip: [baseTheme.tooltip, 'text-surface-content bg-surface'].join(' ') + tooltip: [baseTheme.tooltip, 'text-text-primary bg-surface'].join(' ') }; export const legacyRangeTheme: RangeTheme = { diff --git a/src/form/Select/SelectInput/SelectInputTheme.ts b/src/form/Select/SelectInput/SelectInputTheme.ts index fdef1511..49588348 100644 --- a/src/form/Select/SelectInput/SelectInputTheme.ts +++ b/src/form/Select/SelectInput/SelectInputTheme.ts @@ -53,12 +53,10 @@ const baseTheme: SelectInputTheme = { suffix: { container: 'flex items-center justify-center', button: 'disabled:cursor-not-allowed', - refresh: - 'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-panel-secondary-content', + refresh: 'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary', loader: 'mr-2.5', - close: - 'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-panel-secondary-content', - expand: '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-panel-secondary-content' + close: 'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary', + expand: '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary' }, disabled: 'cursor-not-allowed text-disabled hover:after:content-none', unfilterable: 'caret-transparent', @@ -92,7 +90,7 @@ export const selectInputTheme: SelectInputTheme = { ...baseTheme, base: [ baseTheme.base, - 'bg-panel text-panel-content border-panel-accent border-solid hover:border-panel-accent light:hover:border-panel-accent', + 'bg-panel text-text-primary border-panel-accent border-solid hover:border-panel-accent light:hover:border-panel-accent', 'hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)]', 'focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)]', 'hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-[2] hover:after:rounded hover:after:-bottom-[0px] hover:after:inset-x-0.5', @@ -104,7 +102,7 @@ export const selectInputTheme: SelectInputTheme = { ].join(' '), disabled: [ baseTheme.disabled, - 'text-panel-secondary-content/40 border-surface light:hover:border-surface' + 'text-text-secondary/40 border-surface light:hover:border-surface' ].join(' '), error: [baseTheme.error, 'border-error light:border-error/20'].join(' '), suffix: { @@ -115,13 +113,13 @@ export const selectInputTheme: SelectInputTheme = { ...baseTheme.chip, base: [ baseTheme.chip.base, - '[&>svg]:fill-panel-content disabled:[&>svg]:fill-panel-secondary-content/40' + '[&>svg]:fill-text-primary disabled:[&>svg]:fill-text-secondary/40' ].join(' '), hover: [baseTheme.chip.hover, 'hover:brightness-150'].join(' '), focused: [baseTheme.chip.focused, 'border-panel-accent'].join(' '), removeButton: [ baseTheme.chip.removeButton, - '[&>svg]:fill-panel-content disabled:[&>svg]:fill-panel-secondary-content/40' + '[&>svg]:fill-text-primary disabled:[&>svg]:fill-text-secondary/40' ].join(' ') } }; diff --git a/src/form/Select/SelectMenu/SelectMenuTheme.ts b/src/form/Select/SelectMenu/SelectMenuTheme.ts index 91f21bdc..95fbefcd 100644 --- a/src/form/Select/SelectMenu/SelectMenuTheme.ts +++ b/src/form/Select/SelectMenu/SelectMenuTheme.ts @@ -58,18 +58,18 @@ export const selectMenuTheme: SelectMenuTheme = { ...baseTheme, base: [ baseTheme.base, - 'bg-panel text-panel-content border-panel-accent border-t-transparent' + 'bg-panel text-text-primary border-panel-accent border-t-transparent' ].join(' '), groupItem: { ...baseTheme.groupItem, - title: [baseTheme.groupItem.title, 'text-surface-content'].join(' ') + title: [baseTheme.groupItem.title, 'text-text-primary'].join(' ') }, option: { ...baseTheme.option, - base: [baseTheme.option.base, 'text-panel-secondary-content '].join(' '), + base: [baseTheme.option.base, 'text-text-secondary '].join(' '), hover: [ baseTheme.option.hover, - 'hover:bg-vulcan hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-panel-secondary-content' + 'hover:bg-vulcan hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary' ].join(' '), active: [baseTheme.option.active, 'bg-vulcan hover:text-mystic'].join(' '), selected: [baseTheme.option.selected, 'text-primary-active'].join(' ') diff --git a/src/layers/Dialog/DialogTheme.tsx b/src/layers/Dialog/DialogTheme.tsx index 19e445ff..1afd1483 100644 --- a/src/layers/Dialog/DialogTheme.tsx +++ b/src/layers/Dialog/DialogTheme.tsx @@ -28,11 +28,11 @@ export const dialogTheme: DialogTheme = { ...baseTheme, inner: [ baseTheme.inner, - 'bg-panel text-panel-content border border-panel-accent rounded shadow-2xl' + 'bg-panel text-text-primary border border-panel-accent rounded shadow-2xl' ].join(' '), header: { ...baseTheme.header, - closeButton: [baseTheme.header.closeButton, 'text-panel-content'].join(' ') + closeButton: [baseTheme.header.closeButton, 'text-text-primary'].join(' ') } }; diff --git a/src/layers/Drawer/DrawerTheme.ts b/src/layers/Drawer/DrawerTheme.ts index e27ca0b6..9f2c2ea6 100644 --- a/src/layers/Drawer/DrawerTheme.ts +++ b/src/layers/Drawer/DrawerTheme.ts @@ -40,7 +40,7 @@ const baseTheme: DrawerTheme = { export const drawerTheme: DrawerTheme = { ...baseTheme, - base: [baseTheme.base, 'bg-panel text-panel-content'].join(' ') + base: [baseTheme.base, 'bg-panel text-text-primary'].join(' ') }; export const legacyDrawerTheme: DrawerTheme = { diff --git a/src/layers/Menu/MenuTheme.tsx b/src/layers/Menu/MenuTheme.tsx index 6bc6d98d..ba253511 100644 --- a/src/layers/Menu/MenuTheme.tsx +++ b/src/layers/Menu/MenuTheme.tsx @@ -10,7 +10,7 @@ const baseTheme: MenuTheme = { export const menuTheme: MenuTheme = { ...baseTheme, - inner: [baseTheme.inner, 'text-panel-content bg-panel'].join(' ') + inner: [baseTheme.inner, 'text-text-primary bg-panel'].join(' ') }; export const legacyMenuTheme: MenuTheme = { diff --git a/src/layers/Notification/NotificationTheme.ts b/src/layers/Notification/NotificationTheme.ts index 2f2c34e4..bbaa9b01 100644 --- a/src/layers/Notification/NotificationTheme.ts +++ b/src/layers/Notification/NotificationTheme.ts @@ -59,7 +59,7 @@ const baseTheme: NotificationTheme = { closeContainer: 'inline-flex items-center', action: 'ml-auto mr-2 items-center flex', closeButton: - 'cursor-pointer text-sm font-semibold m-0 border-0 text-panel-content hover:text-panel-content/70', + 'cursor-pointer text-sm font-semibold m-0 border-0 text-text-primary hover:text-text-primary/70', body: 'opacity-70 text-sm mt-1' } }; @@ -70,7 +70,7 @@ export const notificationTheme: NotificationTheme = { ...baseTheme.notification, base: [ baseTheme.notification.base, - 'bg-panel text-panel-content border-panel-accent border' + 'bg-panel text-text-primary border-panel-accent border' ].join(' ') } }; diff --git a/src/layers/Popover/PopoverTheme.ts b/src/layers/Popover/PopoverTheme.ts index 6b285a56..b2d5cc01 100644 --- a/src/layers/Popover/PopoverTheme.ts +++ b/src/layers/Popover/PopoverTheme.ts @@ -10,7 +10,7 @@ const baseTheme: PopoverTheme = { export const popoverTheme: PopoverTheme = { ...baseTheme, - base: [baseTheme.base, 'bg-panel text-panel-content'].join(' ') + base: [baseTheme.base, 'bg-panel text-text-primary'].join(' ') }; export const legacyPopoverTheme: PopoverTheme = { diff --git a/src/layers/Tooltip/TooltipTheme.ts b/src/layers/Tooltip/TooltipTheme.ts index e86a3480..e403955e 100644 --- a/src/layers/Tooltip/TooltipTheme.ts +++ b/src/layers/Tooltip/TooltipTheme.ts @@ -10,7 +10,7 @@ const baseTheme: TooltipTheme = { export const tooltipTheme: TooltipTheme = { ...baseTheme, - base: [baseTheme.base, 'bg-panel-accent text-surface-content'].join(' ') + base: [baseTheme.base, 'bg-panel-accent text-text-primary'].join(' ') }; export const legacyTooltipTheme: TooltipTheme = { diff --git a/src/layout/Breadcrumbs/BreadcrumbsTheme.ts b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts index 484e7458..deb4144c 100644 --- a/src/layout/Breadcrumbs/BreadcrumbsTheme.ts +++ b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts @@ -10,7 +10,7 @@ export const breadcrumbsTheme: BreadcrumbsTheme = { base: '', separator: '[&>svg]:size-3.5', list: 'flex gap-2 items-center', - link: 'hover:text-panel-content text-panel-secondary-content transition-colors', + link: 'hover:text-text-primary text-text-secondary transition-colors', activePage: 'text-primary pointer-events-none' }; diff --git a/src/layout/Card/CardTheme.tsx b/src/layout/Card/CardTheme.tsx index 341a7a80..312f6fa5 100644 --- a/src/layout/Card/CardTheme.tsx +++ b/src/layout/Card/CardTheme.tsx @@ -18,7 +18,7 @@ export const cardTheme: CardTheme = { ...baseTheme, base: [ baseTheme.base, - 'bg-panel border border-panel-accent text-panel-content' + 'bg-panel border border-panel-accent text-text-primary' ].join(' ') }; diff --git a/src/layout/List/ListTheme.ts b/src/layout/List/ListTheme.ts index efe3ca72..526f503a 100644 --- a/src/layout/List/ListTheme.ts +++ b/src/layout/List/ListTheme.ts @@ -53,13 +53,13 @@ const baseTheme: ListTheme = { export const listTheme = { ...baseTheme, - base: [baseTheme.base, 'text-surface-content'].join(' '), - header: [baseTheme.header, 'text-surface-content'].join(' '), + base: [baseTheme.base, 'text-text-primary'].join(' '), + header: [baseTheme.header, 'text-text-primary'].join(' '), listItem: { ...baseTheme.listItem, base: [ baseTheme.listItem.base, - 'hover:bg-panel-accent hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-panel-secondary-content [&:has(h3)]:hover:bg-transparent' + 'hover:bg-panel-accent hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary [&:has(h3)]:hover:bg-transparent' ].join(' '), active: [ baseTheme.listItem.active, @@ -67,7 +67,7 @@ export const listTheme = { ].join(' '), disabled: [ baseTheme.listItem.disabled, - 'opacity-40 text-panel-secondary-content' + 'opacity-40 text-text-secondary' ].join(' ') } }; diff --git a/src/layout/Stack/StackTheme.ts b/src/layout/Stack/StackTheme.ts index bf75613a..e5c715c8 100644 --- a/src/layout/Stack/StackTheme.ts +++ b/src/layout/Stack/StackTheme.ts @@ -48,7 +48,7 @@ const baseTheme: StackTheme = { export const stackTheme = { ...baseTheme, - base: [baseTheme.base, 'text-surface-content'].join(' ') + base: [baseTheme.base, 'text-text-primary'].join(' ') }; export const legacyStackTheme = { diff --git a/src/layout/Tabs/TabsTheme.ts b/src/layout/Tabs/TabsTheme.ts index 0a0ad500..6db045c4 100644 --- a/src/layout/Tabs/TabsTheme.ts +++ b/src/layout/Tabs/TabsTheme.ts @@ -60,8 +60,8 @@ const baseTheme: TabsTheme = { tab: { base: 'relative', button: - 'transition-colors text-panel-secondary-content font-bold hover:text-primary-hover', - selected: 'text-panel-content', + 'transition-colors text-text-secondary font-bold hover:text-primary-hover', + selected: 'text-text-primary', disabled: 'cursor-not-allowed opacity-40', size: { small: 'pb-1 text-sm', diff --git a/src/layout/Tree/TreeTheme.ts b/src/layout/Tree/TreeTheme.ts index 5e2fccf8..56d00218 100644 --- a/src/layout/Tree/TreeTheme.ts +++ b/src/layout/Tree/TreeTheme.ts @@ -38,13 +38,13 @@ const baseTheme: TreeTheme = { export const treeTheme: TreeTheme = { ...baseTheme, - arrow: [baseTheme.arrow, 'fill-surface-content'].join(' '), + arrow: [baseTheme.arrow, 'fill-text-primary'].join(' '), node: { ...baseTheme.node, - base: [baseTheme.node.base, 'text-surface-content'].join(' '), + base: [baseTheme.node.base, 'text-text-primary'].join(' '), button: { ...baseTheme.node.button, - icon: [baseTheme.node.button.icon, 'fill-surface-content'].join(' ') + icon: [baseTheme.node.button.icon, 'fill-text-primary'].join(' ') } } }; diff --git a/tailwind.config.ts b/tailwind.config.ts index 1d20520d..90de7425 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,4 @@ import { type Config } from 'tailwindcss'; -import colors from 'tailwindcss/colors'; import plugin from 'tailwindcss/plugin'; import { createThemes } from 'tw-colors'; import { colorPalette } from './src/utils/Theme/themes/colorPalette'; @@ -86,16 +85,16 @@ const config: Config = { panel: { // Panel backgrounds, such as cards, tables, popovers, dialogs, dropdown menus, etc. DEFAULT: colorPalette['white'], - content: colorPalette['vulcan'], - 'secondary-content': colorPalette.gray[700], accent: colorPalette['mystic'] }, surface: { // Form component backgrounds, such as text fields, checkboxes, select, etc. DEFAULT: colorPalette.gray[300], - content: colorPalette.black, - accent: colorPalette.blue[500], - disabled: colors.gray[300] + accent: colorPalette.blue[500] + }, + text: { + primary: colorPalette['vulcan'], + secondary: colorPalette.gray[700] } }, dark: { @@ -138,16 +137,16 @@ const config: Config = { panel: { // Panel backgrounds, such as cards, tables, popovers, dialogs, dropdown menus, etc. DEFAULT: colorPalette['black-pearl'], - content: colorPalette['athens-gray'], - 'secondary-content': colorPalette['waterloo'], accent: colorPalette['charade'] }, surface: { // Form component backgrounds, such as text fields, checkboxes, select, etc. DEFAULT: colorPalette['charade'], - content: colorPalette['athens-gray'], - accent: colorPalette.blue[500], - disabled: colors.gray[800] + accent: colorPalette.blue[500] + }, + text: { + primary: colorPalette['athens-gray'], + secondary: colorPalette['waterloo'] } } }),