Fix linaria css regressions (#18492)
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
@@ -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%;
|
||||
|
||||
> * {
|
||||
|
||||
@@ -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`
|
||||
|
||||
-2
@@ -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 = ({
|
||||
|
||||
@@ -48,6 +48,7 @@ const StyledPageLayoutTabListContainer = styled.div`
|
||||
|
||||
const StyledScrollWrapperContainer = styled.div`
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
`;
|
||||
|
||||
export const PageLayoutRendererContent = () => {
|
||||
|
||||
+1
-4
@@ -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[];
|
||||
|
||||
+4
-2
@@ -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<number>(0);
|
||||
const [chartHeight, setChartHeight] = useState<number>(0);
|
||||
|
||||
+4
-1
@@ -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,
|
||||
|
||||
+4
-2
@@ -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<LineSeries>;
|
||||
@@ -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<HTMLDivElement>(null);
|
||||
const [chartWidth, setChartWidth] = useState(0);
|
||||
|
||||
+4
-2
@@ -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<HTMLDivElement>(null);
|
||||
const setGraphWidgetPieTooltip = useSetAtomComponentState(
|
||||
graphWidgetPieTooltipComponentState,
|
||||
|
||||
+329
-327
@@ -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,
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
+15
@@ -102,6 +102,21 @@ const StyledWidgetCard = styled.div<WidgetCardStyledProps>`
|
||||
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 &&
|
||||
|
||||
@@ -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;
|
||||
`;
|
||||
|
||||
|
||||
+4
-2
@@ -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 = (
|
||||
<StyledColorSamplesContainer>
|
||||
|
||||
+4
-2
@@ -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 },
|
||||
|
||||
@@ -29,6 +29,7 @@ export const SettingsTextInput = ({
|
||||
autoFocusOnMount,
|
||||
autoSelectOnMount,
|
||||
dataTestId,
|
||||
className,
|
||||
...props
|
||||
}: SettingsTextInputProps) => {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
@@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
+1
@@ -55,6 +55,7 @@ const AnimatedIcon = ({
|
||||
strokeWidth={theme.icon.stroke.md}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
{/* Center dot */}
|
||||
|
||||
@@ -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 =
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user