Skip to content

[PB-5614]:feat/create new colors and update Suite launcher #104

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.

Sign up for GitHub

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

Merged
jaaaaavier merged 2 commits into from
May 27, 2026
Merged

[PB-5614]:feat/create new colors and update Suite launcher #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
36ab08d
feat: create new colors and update Suite launcher
jaaaaavier May 26, 2026
5e836b8
Update package.json
jaaaaavier May 27, 2026
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@internxt/ui",
"version": "0.1.16",
"version": "0.1.17",
"description": "Library of Internxt components",
"repository": {
"type": "git",
Expand Down
8 changes: 4 additions & 4 deletions src/components/navigation/suiteLauncher/SuiteLauncher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default function SuiteLauncher({
);

const panel = (
<div className="w-64 flex flex-wrap p-2" data-testid="suite-launcher-panel">
<div className="w-64 flex flex-wrap p-4" data-testid="suite-launcher-panel">
{suiteArray.map((suiteApp, idx) => (
<div
key={idx}
Expand All @@ -74,7 +74,7 @@ export default function SuiteLauncher({
cloneElement(suiteApp.icon as JSX.Element, {
size: 26,
className:
`${suiteApp.icon.props?.className ?? ''} ${suiteApp.isMain ? 'text-primary' : ''} ` +
`${suiteApp.icon.props?.className ?? ''} ${suiteApp.isMain ? 'text-primary' : 'text-gray-55'} ` +
`${suiteApp.availableSoon || suiteApp.isLocked ? 'opacity-50 filter grayscale' : ''}`,
weight: suiteApp.isMain ? 'fill' : 'regular',
})
Expand All @@ -84,7 +84,7 @@ export default function SuiteLauncher({

<div className="mt-1 flex items-center">
<span
className={`text-xs ${suiteApp.isMain ? 'text-primary font-medium' : 'text-gray-60'}`}
className={`text-xs font-medium whitespace-nowrap ${suiteApp.isMain ? 'text-primary' : 'text-gray-55'}`}
style={{ lineHeight: 1, opacity: suiteApp.availableSoon || suiteApp.isLocked ? 0.5 : 1 }}
>
{suiteApp.title}
Expand All @@ -93,7 +93,7 @@ export default function SuiteLauncher({
{suiteApp.availableSoon && (
<div className="flex rounded-sm px-1 ml-1 py-0.5 bg-purple-1 dark:bg-purple-10 items-center">
<span
className="font-medium dark:font-normal text-purple-10 dark:text-purple-1"
Copy link
Copy Markdown
Collaborator

@xabg2 xabg2 May 26, 2026

Choose a reason for hiding this comment

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

Did you check that it looks good in both light and dark mode? Just to be sure.

Copy link
Copy Markdown
Contributor Author

@jaaaaavier jaaaaavier May 26, 2026

Choose a reason for hiding this comment

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

Yes!
Captura de pantalla 2026-05-26 a las 11 32 47

className="font-medium text-purple-10 dark:text-purple-1"
style={{ lineHeight: 1, fontSize: 'xx-small' }}
>
{soonText ?? 'Soon'}
Expand Down
5 changes: 5 additions & 0 deletions src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
--color-gray-30: rgb(var(--color-gray-30-rgb));
--color-gray-40: rgb(var(--color-gray-40-rgb));
--color-gray-50: rgb(var(--color-gray-50-rgb));
--color-gray-55: rgb(var(--color-gray-55-rgb));
--color-gray-60: rgb(var(--color-gray-60-rgb));
--color-gray-70: rgb(var(--color-gray-70-rgb));
--color-gray-80: rgb(var(--color-gray-80-rgb));
Expand Down Expand Up @@ -62,6 +63,7 @@ button {
--color-gray-30-rgb: 199 199 205;
--color-gray-40-rgb: 174 174 179;
--color-gray-50-rgb: 142 142 148;
--color-gray-55-rgb: 115 115 115;
--color-gray-60-rgb: 99 99 103;
--color-gray-70-rgb: 72 72 75;
--color-gray-80-rgb: 58 58 59;
Expand Down Expand Up @@ -95,6 +97,7 @@ button {
--color-gray-30-rgb: 99 99 103;
--color-gray-40-rgb: 142 142 148;
--color-gray-50-rgb: 174 174 179;
--color-gray-55-rgb: 115 115 115;
--color-gray-60-rgb: 199 199 205;
--color-gray-70-rgb: 209 209 215;
--color-gray-80-rgb: 229 229 235;
Expand Down Expand Up @@ -130,6 +133,7 @@ button {
--color-gray-30-rgb: 99 99 103;
--color-gray-40-rgb: 142 142 148;
--color-gray-50-rgb: 174 174 179;
--color-gray-55-rgb: 115 115 115;
--color-gray-60-rgb: 199 199 205;
--color-gray-70-rgb: 209 209 215;
--color-gray-80-rgb: 229 229 235;
Expand Down Expand Up @@ -163,6 +167,7 @@ button {
--color-gray-30-rgb: 199 199 205;
--color-gray-40-rgb: 174 174 179;
--color-gray-50-rgb: 142 142 148;
--color-gray-55-rgb: 115 115 115;
--color-gray-60-rgb: 99 99 103;
--color-gray-70-rgb: 72 72 75;
--color-gray-80-rgb: 58 58 59;
Expand Down
Loading