From dd58eb6814da653dbb96b32666f3f57c1afe2069 Mon Sep 17 00:00:00 2001
From: neo773 <62795688+neo773@users.noreply.github.com>
Date: Tue, 10 Mar 2026 20:56:53 +0530
Subject: [PATCH] Fix linaria css regressions (#18492)
before
after (fixed icon alignment)
before
after (fixed chart colors)
before
after (fixed buttons text color)
before
after (fixed missing border on :active state)
---------
Co-authored-by: Charles Bochet
---
.../activities/components/ActivityList.tsx | 1 -
.../activities/tasks/components/TaskList.tsx | 2 +-
.../PageLayoutRecordPageRenderer.tsx | 2 -
.../components/PageLayoutRendererContent.tsx | 1 +
.../PageLayoutVerticalListViewer.tsx | 5 +-
.../components/GraphWidgetBarChart.tsx | 6 +-
.../components/GraphWidgetGaugeChart.tsx | 5 +-
.../components/GraphWidgetLineChart.tsx | 6 +-
.../components/GraphWidgetPieChart.tsx | 6 +-
.../graph/utils/createGraphColorRegistry.ts | 656 +++++++++---------
.../widget-card/components/WidgetCard.tsx | 15 +
.../profile/components/EmailField.tsx | 3 +-
.../ChartColorGradientOption.tsx | 6 +-
.../ChartColorPaletteOption.tsx | 6 +-
.../ui/input/components/SettingsTextInput.tsx | 1 +
.../modules/ui/input/components/TextInput.tsx | 9 +-
.../PageHeaderToggleSidePanelButton.tsx | 1 +
.../button/components/AnimatedButton.tsx | 15 +-
.../input/button/components/Button/Button.tsx | 17 +-
19 files changed, 396 insertions(+), 367 deletions(-)
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
index 902ec3dbed..59ff8a1211 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
@@ -3,7 +3,6 @@ import { Card } from 'twenty-ui/layout';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledListContainer = styled.div`
- max-width: 100%;
width: 100%;
> * {
diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx
index df9501e9d8..6abcbaf7f7 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx
@@ -20,7 +20,7 @@ const StyledContainer = styled.div`
flex-direction: column;
justify-content: center;
padding: 8px ${themeCssVariables.spacing[6]};
- width: 100%;
+ width: calc(100% - ${themeCssVariables.spacing[12]});
`;
const StyledTitleBar = styled.div`
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx
index feba2185d5..81d5cd2578 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx
@@ -33,8 +33,6 @@ const StyledContentContainer = styled.div<{ isInSidePanel: boolean }>`
background: ${themeCssVariables.background.primary};
flex: 1;
overflow-y: auto;
- padding-bottom: ${({ isInSidePanel }) =>
- isInSidePanel ? themeCssVariables.spacing[16] : 0};
`;
export const PageLayoutRecordPageRenderer = ({
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
index 8127032df0..991aeac0a4 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
@@ -48,6 +48,7 @@ const StyledPageLayoutTabListContainer = styled.div`
const StyledScrollWrapperContainer = styled.div`
flex: 1;
+ min-height: 0;
`;
export const PageLayoutRendererContent = () => {
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
index 1320c61b0b..54bff28327 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
@@ -28,10 +28,7 @@ const StyledVerticalListContainer = styled.div<{
const StyledFieldsWidgetWrapper = styled.div<{
variant: PageLayoutVerticalListViewerVariant;
-}>`
- padding: ${({ variant }) =>
- variant === 'side-column' ? themeCssVariables.spacing[1] : '0'};
-`;
+}>``;
type PageLayoutVerticalListViewerProps = {
widgets: PageLayoutWidget[];
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-bar-chart/components/GraphWidgetBarChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-bar-chart/components/GraphWidgetBarChart.tsx
index 15de9dab83..457903efc0 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-bar-chart/components/GraphWidgetBarChart.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-bar-chart/components/GraphWidgetBarChart.tsx
@@ -23,8 +23,9 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { styled } from '@linaria/react';
-import { useMemo, useRef, useState } from 'react';
+import { useContext, useMemo, useRef, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
+import { ThemeContext } from 'twenty-ui/theme-constants';
import { useDebouncedCallback } from 'use-debounce';
import { BarChartLayout } from '~/generated-metadata/graphql';
@@ -83,7 +84,8 @@ export const GraphWidgetBarChart = ({
customFormatter,
onSliceClick,
}: GraphWidgetBarChartProps) => {
- const colorRegistry = createGraphColorRegistry();
+ const { theme } = useContext(ThemeContext);
+ const colorRegistry = createGraphColorRegistry(theme.color);
const [chartWidth, setChartWidth] = useState(0);
const [chartHeight, setChartHeight] = useState(0);
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-gauge-chart/components/GraphWidgetGaugeChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-gauge-chart/components/GraphWidgetGaugeChart.tsx
index ffe0727b32..d9a6808ed8 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-gauge-chart/components/GraphWidgetGaugeChart.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-gauge-chart/components/GraphWidgetGaugeChart.tsx
@@ -16,7 +16,9 @@ import {
type RadialBarCustomLayerProps,
ResponsiveRadialBar,
} from '@nivo/radial-bar';
+import { useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
+import { ThemeContext } from 'twenty-ui/theme-constants';
import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
type GraphWidgetGaugeChartProps = {
@@ -69,7 +71,8 @@ export const GraphWidgetGaugeChart = ({
customFormatter,
onGaugeClick,
}: GraphWidgetGaugeChartProps) => {
- const colorRegistry = createGraphColorRegistry();
+ const { theme } = useContext(ThemeContext);
+ const colorRegistry = createGraphColorRegistry(theme.color);
const formatOptions: GraphValueFormatOptions = {
displayType,
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/components/GraphWidgetLineChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/components/GraphWidgetLineChart.tsx
index 7ff92e5651..2c363ec336 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/components/GraphWidgetLineChart.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/components/GraphWidgetLineChart.tsx
@@ -34,8 +34,9 @@ import {
type Point,
type SliceTooltipProps,
} from '@nivo/line';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useContext, useRef, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
+import { ThemeContext } from 'twenty-ui/theme-constants';
import { useDebouncedCallback } from 'use-debounce';
type CrosshairLayerProps = LineCustomSvgLayerProps;
@@ -91,7 +92,8 @@ export const GraphWidgetLineChart = ({
customFormatter,
onSliceClick,
}: GraphWidgetLineChartProps) => {
- const colorRegistry = createGraphColorRegistry();
+ const { theme } = useContext(ThemeContext);
+ const colorRegistry = createGraphColorRegistry(theme.color);
const chartTheme = useLineChartTheme();
const containerRef = useRef(null);
const [chartWidth, setChartWidth] = useState(0);
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx
index 3aa37a93da..b5570bfeaf 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx
@@ -1,5 +1,4 @@
import { GraphWidgetChartContainer } from '@/page-layout/widgets/graph/components/GraphWidgetChartContainer';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphWidgetLegend';
import { CHART_MOTION_CONFIG } from '@/page-layout/widgets/graph/constants/ChartMotionConfig';
import { CustomArcsLayer } from '@/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer';
@@ -24,10 +23,12 @@ import {
import {
type MouseEvent as ReactMouseEvent,
useCallback,
+ useContext,
useMemo,
useRef,
} from 'react';
import { isDefined } from 'twenty-shared/utils';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import {
type PieChartConfiguration,
type PieChartDataItem,
@@ -88,7 +89,8 @@ export const GraphWidgetPieChart = ({
showDataLabels = false,
showCenterMetric = true,
}: GraphWidgetPieChartProps) => {
- const colorRegistry = createGraphColorRegistry();
+ const { theme } = useContext(ThemeContext);
+ const colorRegistry = createGraphColorRegistry(theme.color);
const containerRef = useRef(null);
const setGraphWidgetPieTooltip = useSetAtomComponentState(
graphWidgetPieTooltipComponentState,
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts
index a93db5c047..8da21d9c2c 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts
@@ -1,455 +1,457 @@
import { type GraphColorRegistry } from '@/page-layout/widgets/graph/types/GraphColorRegistry';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { type ThemeType } from 'twenty-ui/theme-constants';
-export const createGraphColorRegistry = (): GraphColorRegistry => ({
+export const createGraphColorRegistry = (
+ colorSource: ThemeType['color'],
+): GraphColorRegistry => ({
blue: {
name: 'blue',
- solid: themeCssVariables.color.blue8,
+ solid: colorSource.blue8,
variations: [
- themeCssVariables.color.blue1,
- themeCssVariables.color.blue2,
- themeCssVariables.color.blue3,
- themeCssVariables.color.blue4,
- themeCssVariables.color.blue5,
- themeCssVariables.color.blue6,
- themeCssVariables.color.blue7,
- themeCssVariables.color.blue8,
- themeCssVariables.color.blue9,
- themeCssVariables.color.blue10,
- themeCssVariables.color.blue11,
- themeCssVariables.color.blue12,
+ colorSource.blue1,
+ colorSource.blue2,
+ colorSource.blue3,
+ colorSource.blue4,
+ colorSource.blue5,
+ colorSource.blue6,
+ colorSource.blue7,
+ colorSource.blue8,
+ colorSource.blue9,
+ colorSource.blue10,
+ colorSource.blue11,
+ colorSource.blue12,
],
},
purple: {
name: 'purple',
- solid: themeCssVariables.color.purple8,
+ solid: colorSource.purple8,
variations: [
- themeCssVariables.color.purple1,
- themeCssVariables.color.purple2,
- themeCssVariables.color.purple3,
- themeCssVariables.color.purple4,
- themeCssVariables.color.purple5,
- themeCssVariables.color.purple6,
- themeCssVariables.color.purple7,
- themeCssVariables.color.purple8,
- themeCssVariables.color.purple9,
- themeCssVariables.color.purple10,
- themeCssVariables.color.purple11,
- themeCssVariables.color.purple12,
+ colorSource.purple1,
+ colorSource.purple2,
+ colorSource.purple3,
+ colorSource.purple4,
+ colorSource.purple5,
+ colorSource.purple6,
+ colorSource.purple7,
+ colorSource.purple8,
+ colorSource.purple9,
+ colorSource.purple10,
+ colorSource.purple11,
+ colorSource.purple12,
],
},
turquoise: {
name: 'turquoise',
- solid: themeCssVariables.color.turquoise8,
+ solid: colorSource.turquoise8,
variations: [
- themeCssVariables.color.turquoise1,
- themeCssVariables.color.turquoise2,
- themeCssVariables.color.turquoise3,
- themeCssVariables.color.turquoise4,
- themeCssVariables.color.turquoise5,
- themeCssVariables.color.turquoise6,
- themeCssVariables.color.turquoise7,
- themeCssVariables.color.turquoise8,
- themeCssVariables.color.turquoise9,
- themeCssVariables.color.turquoise10,
- themeCssVariables.color.turquoise11,
- themeCssVariables.color.turquoise12,
+ colorSource.turquoise1,
+ colorSource.turquoise2,
+ colorSource.turquoise3,
+ colorSource.turquoise4,
+ colorSource.turquoise5,
+ colorSource.turquoise6,
+ colorSource.turquoise7,
+ colorSource.turquoise8,
+ colorSource.turquoise9,
+ colorSource.turquoise10,
+ colorSource.turquoise11,
+ colorSource.turquoise12,
],
},
orange: {
name: 'orange',
- solid: themeCssVariables.color.orange8,
+ solid: colorSource.orange8,
variations: [
- themeCssVariables.color.orange1,
- themeCssVariables.color.orange2,
- themeCssVariables.color.orange3,
- themeCssVariables.color.orange4,
- themeCssVariables.color.orange5,
- themeCssVariables.color.orange6,
- themeCssVariables.color.orange7,
- themeCssVariables.color.orange8,
- themeCssVariables.color.orange9,
- themeCssVariables.color.orange10,
- themeCssVariables.color.orange11,
- themeCssVariables.color.orange12,
+ colorSource.orange1,
+ colorSource.orange2,
+ colorSource.orange3,
+ colorSource.orange4,
+ colorSource.orange5,
+ colorSource.orange6,
+ colorSource.orange7,
+ colorSource.orange8,
+ colorSource.orange9,
+ colorSource.orange10,
+ colorSource.orange11,
+ colorSource.orange12,
],
},
pink: {
name: 'pink',
- solid: themeCssVariables.color.pink8,
+ solid: colorSource.pink8,
variations: [
- themeCssVariables.color.pink1,
- themeCssVariables.color.pink2,
- themeCssVariables.color.pink3,
- themeCssVariables.color.pink4,
- themeCssVariables.color.pink5,
- themeCssVariables.color.pink6,
- themeCssVariables.color.pink7,
- themeCssVariables.color.pink8,
- themeCssVariables.color.pink9,
- themeCssVariables.color.pink10,
- themeCssVariables.color.pink11,
- themeCssVariables.color.pink12,
+ colorSource.pink1,
+ colorSource.pink2,
+ colorSource.pink3,
+ colorSource.pink4,
+ colorSource.pink5,
+ colorSource.pink6,
+ colorSource.pink7,
+ colorSource.pink8,
+ colorSource.pink9,
+ colorSource.pink10,
+ colorSource.pink11,
+ colorSource.pink12,
],
},
yellow: {
name: 'yellow',
- solid: themeCssVariables.color.yellow8,
+ solid: colorSource.yellow8,
variations: [
- themeCssVariables.color.yellow1,
- themeCssVariables.color.yellow2,
- themeCssVariables.color.yellow3,
- themeCssVariables.color.yellow4,
- themeCssVariables.color.yellow5,
- themeCssVariables.color.yellow6,
- themeCssVariables.color.yellow7,
- themeCssVariables.color.yellow8,
- themeCssVariables.color.yellow9,
- themeCssVariables.color.yellow10,
- themeCssVariables.color.yellow11,
- themeCssVariables.color.yellow12,
+ colorSource.yellow1,
+ colorSource.yellow2,
+ colorSource.yellow3,
+ colorSource.yellow4,
+ colorSource.yellow5,
+ colorSource.yellow6,
+ colorSource.yellow7,
+ colorSource.yellow8,
+ colorSource.yellow9,
+ colorSource.yellow10,
+ colorSource.yellow11,
+ colorSource.yellow12,
],
},
red: {
name: 'red',
- solid: themeCssVariables.color.red8,
+ solid: colorSource.red8,
variations: [
- themeCssVariables.color.red1,
- themeCssVariables.color.red2,
- themeCssVariables.color.red3,
- themeCssVariables.color.red4,
- themeCssVariables.color.red5,
- themeCssVariables.color.red6,
- themeCssVariables.color.red7,
- themeCssVariables.color.red8,
- themeCssVariables.color.red9,
- themeCssVariables.color.red10,
- themeCssVariables.color.red11,
- themeCssVariables.color.red12,
+ colorSource.red1,
+ colorSource.red2,
+ colorSource.red3,
+ colorSource.red4,
+ colorSource.red5,
+ colorSource.red6,
+ colorSource.red7,
+ colorSource.red8,
+ colorSource.red9,
+ colorSource.red10,
+ colorSource.red11,
+ colorSource.red12,
],
},
green: {
name: 'green',
- solid: themeCssVariables.color.green8,
+ solid: colorSource.green8,
variations: [
- themeCssVariables.color.green1,
- themeCssVariables.color.green2,
- themeCssVariables.color.green3,
- themeCssVariables.color.green4,
- themeCssVariables.color.green5,
- themeCssVariables.color.green6,
- themeCssVariables.color.green7,
- themeCssVariables.color.green8,
- themeCssVariables.color.green9,
- themeCssVariables.color.green10,
- themeCssVariables.color.green11,
- themeCssVariables.color.green12,
+ colorSource.green1,
+ colorSource.green2,
+ colorSource.green3,
+ colorSource.green4,
+ colorSource.green5,
+ colorSource.green6,
+ colorSource.green7,
+ colorSource.green8,
+ colorSource.green9,
+ colorSource.green10,
+ colorSource.green11,
+ colorSource.green12,
],
},
sky: {
name: 'sky',
- solid: themeCssVariables.color.sky8,
+ solid: colorSource.sky8,
variations: [
- themeCssVariables.color.sky1,
- themeCssVariables.color.sky2,
- themeCssVariables.color.sky3,
- themeCssVariables.color.sky4,
- themeCssVariables.color.sky5,
- themeCssVariables.color.sky6,
- themeCssVariables.color.sky7,
- themeCssVariables.color.sky8,
- themeCssVariables.color.sky9,
- themeCssVariables.color.sky10,
- themeCssVariables.color.sky11,
- themeCssVariables.color.sky12,
+ colorSource.sky1,
+ colorSource.sky2,
+ colorSource.sky3,
+ colorSource.sky4,
+ colorSource.sky5,
+ colorSource.sky6,
+ colorSource.sky7,
+ colorSource.sky8,
+ colorSource.sky9,
+ colorSource.sky10,
+ colorSource.sky11,
+ colorSource.sky12,
],
},
gray: {
name: 'gray',
- solid: themeCssVariables.color.gray8,
+ solid: colorSource.gray8,
variations: [
- themeCssVariables.color.gray1,
- themeCssVariables.color.gray2,
- themeCssVariables.color.gray3,
- themeCssVariables.color.gray4,
- themeCssVariables.color.gray5,
- themeCssVariables.color.gray6,
- themeCssVariables.color.gray7,
- themeCssVariables.color.gray8,
- themeCssVariables.color.gray9,
- themeCssVariables.color.gray10,
- themeCssVariables.color.gray11,
- themeCssVariables.color.gray12,
+ colorSource.gray1,
+ colorSource.gray2,
+ colorSource.gray3,
+ colorSource.gray4,
+ colorSource.gray5,
+ colorSource.gray6,
+ colorSource.gray7,
+ colorSource.gray8,
+ colorSource.gray9,
+ colorSource.gray10,
+ colorSource.gray11,
+ colorSource.gray12,
],
},
tomato: {
name: 'tomato',
- solid: themeCssVariables.color.tomato8,
+ solid: colorSource.tomato8,
variations: [
- themeCssVariables.color.tomato1,
- themeCssVariables.color.tomato2,
- themeCssVariables.color.tomato3,
- themeCssVariables.color.tomato4,
- themeCssVariables.color.tomato5,
- themeCssVariables.color.tomato6,
- themeCssVariables.color.tomato7,
- themeCssVariables.color.tomato8,
- themeCssVariables.color.tomato9,
- themeCssVariables.color.tomato10,
- themeCssVariables.color.tomato11,
- themeCssVariables.color.tomato12,
+ colorSource.tomato1,
+ colorSource.tomato2,
+ colorSource.tomato3,
+ colorSource.tomato4,
+ colorSource.tomato5,
+ colorSource.tomato6,
+ colorSource.tomato7,
+ colorSource.tomato8,
+ colorSource.tomato9,
+ colorSource.tomato10,
+ colorSource.tomato11,
+ colorSource.tomato12,
],
},
ruby: {
name: 'ruby',
- solid: themeCssVariables.color.ruby8,
+ solid: colorSource.ruby8,
variations: [
- themeCssVariables.color.ruby1,
- themeCssVariables.color.ruby2,
- themeCssVariables.color.ruby3,
- themeCssVariables.color.ruby4,
- themeCssVariables.color.ruby5,
- themeCssVariables.color.ruby6,
- themeCssVariables.color.ruby7,
- themeCssVariables.color.ruby8,
- themeCssVariables.color.ruby9,
- themeCssVariables.color.ruby10,
- themeCssVariables.color.ruby11,
- themeCssVariables.color.ruby12,
+ colorSource.ruby1,
+ colorSource.ruby2,
+ colorSource.ruby3,
+ colorSource.ruby4,
+ colorSource.ruby5,
+ colorSource.ruby6,
+ colorSource.ruby7,
+ colorSource.ruby8,
+ colorSource.ruby9,
+ colorSource.ruby10,
+ colorSource.ruby11,
+ colorSource.ruby12,
],
},
crimson: {
name: 'crimson',
- solid: themeCssVariables.color.crimson8,
+ solid: colorSource.crimson8,
variations: [
- themeCssVariables.color.crimson1,
- themeCssVariables.color.crimson2,
- themeCssVariables.color.crimson3,
- themeCssVariables.color.crimson4,
- themeCssVariables.color.crimson5,
- themeCssVariables.color.crimson6,
- themeCssVariables.color.crimson7,
- themeCssVariables.color.crimson8,
- themeCssVariables.color.crimson9,
- themeCssVariables.color.crimson10,
- themeCssVariables.color.crimson11,
- themeCssVariables.color.crimson12,
+ colorSource.crimson1,
+ colorSource.crimson2,
+ colorSource.crimson3,
+ colorSource.crimson4,
+ colorSource.crimson5,
+ colorSource.crimson6,
+ colorSource.crimson7,
+ colorSource.crimson8,
+ colorSource.crimson9,
+ colorSource.crimson10,
+ colorSource.crimson11,
+ colorSource.crimson12,
],
},
plum: {
name: 'plum',
- solid: themeCssVariables.color.plum8,
+ solid: colorSource.plum8,
variations: [
- themeCssVariables.color.plum1,
- themeCssVariables.color.plum2,
- themeCssVariables.color.plum3,
- themeCssVariables.color.plum4,
- themeCssVariables.color.plum5,
- themeCssVariables.color.plum6,
- themeCssVariables.color.plum7,
- themeCssVariables.color.plum8,
- themeCssVariables.color.plum9,
- themeCssVariables.color.plum10,
- themeCssVariables.color.plum11,
- themeCssVariables.color.plum12,
+ colorSource.plum1,
+ colorSource.plum2,
+ colorSource.plum3,
+ colorSource.plum4,
+ colorSource.plum5,
+ colorSource.plum6,
+ colorSource.plum7,
+ colorSource.plum8,
+ colorSource.plum9,
+ colorSource.plum10,
+ colorSource.plum11,
+ colorSource.plum12,
],
},
violet: {
name: 'violet',
- solid: themeCssVariables.color.violet8,
+ solid: colorSource.violet8,
variations: [
- themeCssVariables.color.violet1,
- themeCssVariables.color.violet2,
- themeCssVariables.color.violet3,
- themeCssVariables.color.violet4,
- themeCssVariables.color.violet5,
- themeCssVariables.color.violet6,
- themeCssVariables.color.violet7,
- themeCssVariables.color.violet8,
- themeCssVariables.color.violet9,
- themeCssVariables.color.violet10,
- themeCssVariables.color.violet11,
- themeCssVariables.color.violet12,
+ colorSource.violet1,
+ colorSource.violet2,
+ colorSource.violet3,
+ colorSource.violet4,
+ colorSource.violet5,
+ colorSource.violet6,
+ colorSource.violet7,
+ colorSource.violet8,
+ colorSource.violet9,
+ colorSource.violet10,
+ colorSource.violet11,
+ colorSource.violet12,
],
},
iris: {
name: 'iris',
- solid: themeCssVariables.color.iris8,
+ solid: colorSource.iris8,
variations: [
- themeCssVariables.color.iris1,
- themeCssVariables.color.iris2,
- themeCssVariables.color.iris3,
- themeCssVariables.color.iris4,
- themeCssVariables.color.iris5,
- themeCssVariables.color.iris6,
- themeCssVariables.color.iris7,
- themeCssVariables.color.iris8,
- themeCssVariables.color.iris9,
- themeCssVariables.color.iris10,
- themeCssVariables.color.iris11,
- themeCssVariables.color.iris12,
+ colorSource.iris1,
+ colorSource.iris2,
+ colorSource.iris3,
+ colorSource.iris4,
+ colorSource.iris5,
+ colorSource.iris6,
+ colorSource.iris7,
+ colorSource.iris8,
+ colorSource.iris9,
+ colorSource.iris10,
+ colorSource.iris11,
+ colorSource.iris12,
],
},
cyan: {
name: 'cyan',
- solid: themeCssVariables.color.cyan8,
+ solid: colorSource.cyan8,
variations: [
- themeCssVariables.color.cyan1,
- themeCssVariables.color.cyan2,
- themeCssVariables.color.cyan3,
- themeCssVariables.color.cyan4,
- themeCssVariables.color.cyan5,
- themeCssVariables.color.cyan6,
- themeCssVariables.color.cyan7,
- themeCssVariables.color.cyan8,
- themeCssVariables.color.cyan9,
- themeCssVariables.color.cyan10,
- themeCssVariables.color.cyan11,
- themeCssVariables.color.cyan12,
+ colorSource.cyan1,
+ colorSource.cyan2,
+ colorSource.cyan3,
+ colorSource.cyan4,
+ colorSource.cyan5,
+ colorSource.cyan6,
+ colorSource.cyan7,
+ colorSource.cyan8,
+ colorSource.cyan9,
+ colorSource.cyan10,
+ colorSource.cyan11,
+ colorSource.cyan12,
],
},
jade: {
name: 'jade',
- solid: themeCssVariables.color.jade8,
+ solid: colorSource.jade8,
variations: [
- themeCssVariables.color.jade1,
- themeCssVariables.color.jade2,
- themeCssVariables.color.jade3,
- themeCssVariables.color.jade4,
- themeCssVariables.color.jade5,
- themeCssVariables.color.jade6,
- themeCssVariables.color.jade7,
- themeCssVariables.color.jade8,
- themeCssVariables.color.jade9,
- themeCssVariables.color.jade10,
- themeCssVariables.color.jade11,
- themeCssVariables.color.jade12,
+ colorSource.jade1,
+ colorSource.jade2,
+ colorSource.jade3,
+ colorSource.jade4,
+ colorSource.jade5,
+ colorSource.jade6,
+ colorSource.jade7,
+ colorSource.jade8,
+ colorSource.jade9,
+ colorSource.jade10,
+ colorSource.jade11,
+ colorSource.jade12,
],
},
grass: {
name: 'grass',
- solid: themeCssVariables.color.grass8,
+ solid: colorSource.grass8,
variations: [
- themeCssVariables.color.grass1,
- themeCssVariables.color.grass2,
- themeCssVariables.color.grass3,
- themeCssVariables.color.grass4,
- themeCssVariables.color.grass5,
- themeCssVariables.color.grass6,
- themeCssVariables.color.grass7,
- themeCssVariables.color.grass8,
- themeCssVariables.color.grass9,
- themeCssVariables.color.grass10,
- themeCssVariables.color.grass11,
- themeCssVariables.color.grass12,
+ colorSource.grass1,
+ colorSource.grass2,
+ colorSource.grass3,
+ colorSource.grass4,
+ colorSource.grass5,
+ colorSource.grass6,
+ colorSource.grass7,
+ colorSource.grass8,
+ colorSource.grass9,
+ colorSource.grass10,
+ colorSource.grass11,
+ colorSource.grass12,
],
},
mint: {
name: 'mint',
- solid: themeCssVariables.color.mint8,
+ solid: colorSource.mint8,
variations: [
- themeCssVariables.color.mint1,
- themeCssVariables.color.mint2,
- themeCssVariables.color.mint3,
- themeCssVariables.color.mint4,
- themeCssVariables.color.mint5,
- themeCssVariables.color.mint6,
- themeCssVariables.color.mint7,
- themeCssVariables.color.mint8,
- themeCssVariables.color.mint9,
- themeCssVariables.color.mint10,
- themeCssVariables.color.mint11,
- themeCssVariables.color.mint12,
+ colorSource.mint1,
+ colorSource.mint2,
+ colorSource.mint3,
+ colorSource.mint4,
+ colorSource.mint5,
+ colorSource.mint6,
+ colorSource.mint7,
+ colorSource.mint8,
+ colorSource.mint9,
+ colorSource.mint10,
+ colorSource.mint11,
+ colorSource.mint12,
],
},
lime: {
name: 'lime',
- solid: themeCssVariables.color.lime8,
+ solid: colorSource.lime8,
variations: [
- themeCssVariables.color.lime1,
- themeCssVariables.color.lime2,
- themeCssVariables.color.lime3,
- themeCssVariables.color.lime4,
- themeCssVariables.color.lime5,
- themeCssVariables.color.lime6,
- themeCssVariables.color.lime7,
- themeCssVariables.color.lime8,
- themeCssVariables.color.lime9,
- themeCssVariables.color.lime10,
- themeCssVariables.color.lime11,
- themeCssVariables.color.lime12,
+ colorSource.lime1,
+ colorSource.lime2,
+ colorSource.lime3,
+ colorSource.lime4,
+ colorSource.lime5,
+ colorSource.lime6,
+ colorSource.lime7,
+ colorSource.lime8,
+ colorSource.lime9,
+ colorSource.lime10,
+ colorSource.lime11,
+ colorSource.lime12,
],
},
bronze: {
name: 'bronze',
- solid: themeCssVariables.color.bronze8,
+ solid: colorSource.bronze8,
variations: [
- themeCssVariables.color.bronze1,
- themeCssVariables.color.bronze2,
- themeCssVariables.color.bronze3,
- themeCssVariables.color.bronze4,
- themeCssVariables.color.bronze5,
- themeCssVariables.color.bronze6,
- themeCssVariables.color.bronze7,
- themeCssVariables.color.bronze8,
- themeCssVariables.color.bronze9,
- themeCssVariables.color.bronze10,
- themeCssVariables.color.bronze11,
- themeCssVariables.color.bronze12,
+ colorSource.bronze1,
+ colorSource.bronze2,
+ colorSource.bronze3,
+ colorSource.bronze4,
+ colorSource.bronze5,
+ colorSource.bronze6,
+ colorSource.bronze7,
+ colorSource.bronze8,
+ colorSource.bronze9,
+ colorSource.bronze10,
+ colorSource.bronze11,
+ colorSource.bronze12,
],
},
gold: {
name: 'gold',
- solid: themeCssVariables.color.gold8,
+ solid: colorSource.gold8,
variations: [
- themeCssVariables.color.gold1,
- themeCssVariables.color.gold2,
- themeCssVariables.color.gold3,
- themeCssVariables.color.gold4,
- themeCssVariables.color.gold5,
- themeCssVariables.color.gold6,
- themeCssVariables.color.gold7,
- themeCssVariables.color.gold8,
- themeCssVariables.color.gold9,
- themeCssVariables.color.gold10,
- themeCssVariables.color.gold11,
- themeCssVariables.color.gold12,
+ colorSource.gold1,
+ colorSource.gold2,
+ colorSource.gold3,
+ colorSource.gold4,
+ colorSource.gold5,
+ colorSource.gold6,
+ colorSource.gold7,
+ colorSource.gold8,
+ colorSource.gold9,
+ colorSource.gold10,
+ colorSource.gold11,
+ colorSource.gold12,
],
},
brown: {
name: 'brown',
- solid: themeCssVariables.color.brown8,
+ solid: colorSource.brown8,
variations: [
- themeCssVariables.color.brown1,
- themeCssVariables.color.brown2,
- themeCssVariables.color.brown3,
- themeCssVariables.color.brown4,
- themeCssVariables.color.brown5,
- themeCssVariables.color.brown6,
- themeCssVariables.color.brown7,
- themeCssVariables.color.brown8,
- themeCssVariables.color.brown9,
- themeCssVariables.color.brown10,
- themeCssVariables.color.brown11,
- themeCssVariables.color.brown12,
+ colorSource.brown1,
+ colorSource.brown2,
+ colorSource.brown3,
+ colorSource.brown4,
+ colorSource.brown5,
+ colorSource.brown6,
+ colorSource.brown7,
+ colorSource.brown8,
+ colorSource.brown9,
+ colorSource.brown10,
+ colorSource.brown11,
+ colorSource.brown12,
],
},
amber: {
name: 'amber',
- solid: themeCssVariables.color.amber8,
+ solid: colorSource.amber8,
variations: [
- themeCssVariables.color.amber1,
- themeCssVariables.color.amber2,
- themeCssVariables.color.amber3,
- themeCssVariables.color.amber4,
- themeCssVariables.color.amber5,
- themeCssVariables.color.amber6,
- themeCssVariables.color.amber7,
- themeCssVariables.color.amber8,
- themeCssVariables.color.amber9,
- themeCssVariables.color.amber10,
- themeCssVariables.color.amber11,
- themeCssVariables.color.amber12,
+ colorSource.amber1,
+ colorSource.amber2,
+ colorSource.amber3,
+ colorSource.amber4,
+ colorSource.amber5,
+ colorSource.amber6,
+ colorSource.amber7,
+ colorSource.amber8,
+ colorSource.amber9,
+ colorSource.amber10,
+ colorSource.amber11,
+ colorSource.amber12,
],
},
});
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
index fbd553dec8..172cf6d895 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
@@ -102,6 +102,21 @@ const StyledWidgetCard = styled.div`
width: 100%;
&:hover {
+ border-bottom-color: ${(props) => {
+ const { variant, isEditable, isLastWidget } = props;
+ if (variant === 'side-column' && !isEditable && isLastWidget !== true) {
+ return themeCssVariables.border.color.light;
+ }
+ if (
+ props.isEditable &&
+ !props.isDragging &&
+ !props.isEditing &&
+ !props.isResizing
+ ) {
+ return themeCssVariables.border.color.strong;
+ }
+ return computeBorderColor(props);
+ }};
border-color: ${(props) => {
if (
props.isEditable &&
diff --git a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
index d85a5b768f..94fafc95ea 100644
--- a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
@@ -32,8 +32,9 @@ const StyledActionWrapper = styled.div`
`;
const StyledActionButtonContainer = styled.div`
- align-items: center;
+ align-items: stretch;
display: inline-flex;
+ height: 100%;
justify-content: center;
`;
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
index a245aea865..3b97cbad0c 100644
--- a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
@@ -3,9 +3,10 @@ import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/crea
import { generateGroupColor } from '@/page-layout/widgets/graph/utils/generateGroupColor';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { styled } from '@linaria/react';
+import { useContext } from 'react';
import { ColorSample } from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { type ThemeColor } from 'twenty-ui/theme';
type ChartColorGradientOptionProps = {
colorOption: {
@@ -32,7 +33,8 @@ export const ChartColorGradientOption = ({
}: ChartColorGradientOptionProps) => {
const colorName = colorOption.colorName as ThemeColor;
- const colorRegistry = createGraphColorRegistry();
+ const { theme } = useContext(ThemeContext);
+ const colorRegistry = createGraphColorRegistry(theme.color);
const colorSamples = (
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
index 6670a6c419..edf9d4da5b 100644
--- a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
@@ -4,10 +4,11 @@ import { getColorSchemeByIndex } from '@/page-layout/widgets/graph/utils/getColo
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
+import { useContext } from 'react';
import { ColorSample } from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { getMainColorNameFromPaletteColorName } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { type ThemeColor } from 'twenty-ui/theme';
type ChartColorPaletteOptionProps = {
selectedItemId: string | null;
@@ -26,7 +27,8 @@ export const ChartColorPaletteOption = ({
currentColor,
onSelectColor,
}: ChartColorPaletteOptionProps) => {
- const colorRegistry = createGraphColorRegistry();
+ const { theme } = useContext(ThemeContext);
+ const colorRegistry = createGraphColorRegistry(theme.color);
const paletteColors = Array.from(
{ length: CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT },
diff --git a/packages/twenty-front/src/modules/ui/input/components/SettingsTextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/SettingsTextInput.tsx
index 4a81bc28db..9d62dbe5cd 100644
--- a/packages/twenty-front/src/modules/ui/input/components/SettingsTextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/SettingsTextInput.tsx
@@ -29,6 +29,7 @@ export const SettingsTextInput = ({
autoFocusOnMount,
autoSelectOnMount,
dataTestId,
+ className,
...props
}: SettingsTextInputProps) => {
const inputRef = useRef(null);
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
index aad0dc2a65..77b67d8f39 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
@@ -165,11 +165,10 @@ const StyledInput = styled.input<
}
&:focus {
- ${({ error }) => {
- return `
- border-color: ${error ? themeCssVariables.border.color.danger : themeCssVariables.color.blue};
- `;
- }};
+ border-color: ${({ error }) =>
+ error
+ ? themeCssVariables.border.color.danger
+ : themeCssVariables.color.blue};
}
`;
diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleSidePanelButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleSidePanelButton.tsx
index abe8f7c48b..c8deedf482 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleSidePanelButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleSidePanelButton.tsx
@@ -55,6 +55,7 @@ const AnimatedIcon = ({
strokeWidth={theme.icon.stroke.md}
strokeLinecap="round"
strokeLinejoin="round"
+ style={{ display: 'block' }}
>
{/* Center dot */}
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
index d549ea3aa4..b49596203d 100644
--- a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
@@ -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 =
diff --git a/packages/twenty-ui/src/input/button/components/Button/Button.tsx b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
index c3fe12c058..23b6dd479a 100644
--- a/packages/twenty-ui/src/input/button/components/Button/Button.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
@@ -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