houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix linaria css regressions (#18492)

Browse Source 
before
<img width="310" height="60" alt="SCR-20260309-ctul"
src="https://github.com/user-attachments/assets/7141d495-b8f2-4fd6-bf3b-36bb2b11d1aa"
/>

after (fixed icon alignment)
<img width="235" height="67" alt="SCR-20260309-ctel"
src="https://github.com/user-attachments/assets/36078039-93dc-4c2c-b553-0bbcde4cb81c"
/>

before
<img width="637" height="318" alt="SCR-20260309-ctnp"
src="https://github.com/user-attachments/assets/34b66129-d619-43a2-8896-aa92b511644e"
/>

after (fixed chart colors)
<img width="650" height="317" alt="SCR-20260309-cthj"
src="https://github.com/user-attachments/assets/82c095b1-34bb-4ae4-a8f2-7a3746a31b0a"
/>


before



<img width="909" height="650" alt="image"
src="https://github.com/user-attachments/assets/14649aed-bfa8-4b9d-aa35-f4de2bfaddd6"
/>


after (fixed buttons text color)
<img width="930" height="646" alt="SCR-20260309-csob"
src="https://github.com/user-attachments/assets/c724a849-dabe-406c-8258-0674211374f2"
/>

before

<img width="544" height="141" alt="image"
src="https://github.com/user-attachments/assets/815c3b70-2f7c-42ca-8a32-3fbd5fe4c556"
/>


after (fixed missing border on :active state)

<img width="554" height="145" alt="image"
src="https://github.com/user-attachments/assets/845b1afd-36b6-4ae4-b6ef-c49ccbd89c10"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
neo773
2026-03-10 20:56:53 +05:30
committed by GitHub
parent 926dd545f4
commit dd58eb6814
19 changed files with 396 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
+8 -7
View File
@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
import { Pill } from '@ui/components/Pill/Pill';
import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
import {
type ButtonAccent,
type ButtonPosition,
@@ -106,7 +107,7 @@ const computeAnimatedButtonDynamicStyles = (
}`
: 'none';
result.color = !inverted
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.color.blue;
if (!disabled) {
result.hoverBackground = !inverted
@@ -170,10 +171,10 @@ const computeAnimatedButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.background.transparent.primary
: focus
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
@@ -212,10 +213,10 @@ const computeAnimatedButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.background.transparent.primary
: focus
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
@@ -254,10 +255,10 @@ const computeAnimatedButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.background.transparent.primary
: focus
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
packages/twenty-ui/src/input/button/components/Button/Button.tsx
+9 -8
View File
@@ -4,6 +4,7 @@ import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/Butto
import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon';
import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon';
import { themeCssVariables } from '@ui/theme-constants';
import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
import { useIsMobile } from '@ui/utilities';
import { type ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
import React, { useMemo, useState } from 'react';
@@ -127,7 +128,7 @@ const computeButtonDynamicStyles = (
}`
: 'none';
result.color = !inverted
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.color.blue;
if (!disabled) {
result.hoverBackground = !inverted
@@ -190,10 +191,10 @@ const computeButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.background.transparent.primary
: focus
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
@@ -231,10 +232,10 @@ const computeButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.background.transparent.primary
: focus
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
@@ -272,10 +273,10 @@ const computeButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.background.transparent.primary
: focus
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
@@ -415,7 +416,7 @@ const computeButtonWrapperColor = (
: themeCssVariables.font.color.secondary;
case 'blue':
return !inverted
? themeCssVariables.grayScale.gray1
? GRAY_SCALE_LIGHT.gray1
: themeCssVariables.color.blue;
case 'danger':
return !inverted