Skip to content

Commit bbe1604

Browse files
mitrotasiosmitrotasios
authored
fix: remove global styles / scope CSS (#119)
* add tremor-base * testing * wip * wip * wip * fix: remove global css styles * update ChartTooltip * remove tremor-elem class * fix tooltip font * Update tremor.css * minor fixes * Update tremor.css * add comments to css
1 parent bae0f89 commit bbe1604

File tree

49 files changed

+418
-82
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+418
-82
lines changed

‎src/components/chart-elements/AreaChart/AreaChart.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,12 @@ const AreaChart = ({
4646
}: BaseChartProps) => {
4747
const [legendHeight, setLegendHeight] = useState(60);
4848
return (
49-
<div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
49+
<div
50+
className={ classNames(
51+
'tremor-base tr-w-full',
52+
parseHeight(height), parseMarginTop(marginTop)
53+
) }
54+
>
5055
<ResponsiveContainer width="100%" height="100%">
5156
<ReChartsAreaChart data={ data }>
5257
{ showGridLines ? (

‎src/components/chart-elements/BarChart/BarChart.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,12 @@ const BarChart = ({
5454
}: BarChartProps) => {
5555
const [legendHeight, setLegendHeight] = useState(60);
5656
return (
57-
<div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
57+
<div className={ classNames(
58+
'tremor-base tr-w-full',
59+
parseHeight(height),
60+
parseMarginTop(marginTop)
61+
) }
62+
>
5863
<ResponsiveContainer width="100%" height="100%">
5964
<ReChartsBarChart
6065
data={ data }

‎src/components/chart-elements/LineChart/LineChart.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,12 @@ const LineChart = ({
4545
}: BaseChartProps) => {
4646
const [legendHeight, setLegendHeight] = useState(60);
4747
return (
48-
<div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
48+
<div className={ classNames(
49+
'tremor-base tr-w-full',
50+
parseHeight(height),
51+
parseMarginTop(marginTop)
52+
) }
53+
>
4954
<ResponsiveContainer width="100%" height="100%">
5055
<ReChartsLineChart data={ data }>
5156
{ showGridLines ? (

‎src/components/chart-elements/common/ChartTooltip.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ const ChartTooltipRow = ({ value, name, color }: ChartTooltipRowProps) => (
3636
boxShadow.md,
3737
) } />
3838
<p className={ classNames(
39+
'text-elem tr-font-medium tr-tabular-nums tr-text-right tr-whitespace-nowrap',
3940
getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
40-
'tr-font-medium tr-tabular-nums tr-text-right tr-whitespace-nowrap'
4141
) }>
4242
{ value }
4343
</p>
4444
</div>
4545
<p className={ classNames(
46-
'tr-text-right tr-whitespace-nowrap',
46+
'text-elem tr-text-right tr-whitespace-nowrap',
4747
getColorVariantsFromColorThemeValue(defaultColors.text).textColor,
4848
fontWeight.sm,
4949
) }>
@@ -79,6 +79,7 @@ const ChartTooltip = ({ active, payload, label, colors = themeColorRange, valueF
7979
border.sm.bottom,
8080
) }>
8181
<p className={ classNames(
82+
'text-elem',
8283
getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
8384
fontWeight.md,
8485
) }>

‎src/components/icon-elements/Badge/Badge.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const Badge = ({
3737
const badgeSize = isValidSize(size) ? size : Sizes.SM;
3838
const Icon = icon ? icon : null;
3939
return (
40-
<div className={classNames(parseMarginTop(marginTop))}>
40+
<div className={classNames('tremor-base', parseMarginTop(marginTop))}>
4141
<Tooltip content={tooltip} className={tooltip ? '' : 'tr-hidden'}>
4242
<span className={classNames(
4343
'tr-flex-shrink-0 tr-inline-flex tr-justify-center tr-items-center',
@@ -59,7 +59,7 @@ const Badge = ({
5959
)}
6060
/>
6161
) : null}
62-
<p className="tr-whitespace-nowrap">{text}</p>
62+
<p className="text-elem tr-whitespace-nowrap">{text}</p>
6363
</span>
6464
</Tooltip>
6565
</div>

‎src/components/icon-elements/BadgeDelta/BadgeDelta.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ const BadgeDelta = ({
4646
const badgeSize = isValidSize(size) ? size : Sizes.SM;
4747

4848
return(
49-
<span className={ classNames(parseMarginTop(marginTop)) }>
50-
<Tooltip content={ tooltip } className={ tooltip ? '' : 'tr-hidden' }>
49+
<span className={ classNames('tremor-base', parseMarginTop(marginTop)) }>
50+
<Tooltip content={ tooltip } className={ classNames( tooltip ? '' : 'tr-hidden') }>
5151
<span className={ classNames(
5252
'tr-flex-shrink-0 tr-inline-flex tr-justify-center tr-items-center',
5353
borderRadius.full.all,
@@ -66,7 +66,7 @@ const BadgeDelta = ({
6666
iconSizes[badgeSize].width,
6767
) }
6868
/>
69-
{ text ? <p className="tr-whitespace-nowrap">{ text }</p> : null}
69+
{ text ? <p className="text-elem tr-whitespace-nowrap">{ text }</p> : null}
7070
</span>
7171
</Tooltip>
7272
</span>

‎src/components/icon-elements/Icon/Icon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ const Icon = ({
4141
const iconColors = isBaseColor(color) ? colors[iconVariant][color] : colors[iconVariant][BaseColors.Blue];
4242
const Icon = icon;
4343
return (
44-
<span className={classNames(parseMarginTop(marginTop))}>
45-
<Tooltip content={tooltip} className={tooltip ? '' : 'tr-hidden'}>
44+
<span className={classNames('tremor-base', parseMarginTop(marginTop))}>
45+
<Tooltip content={tooltip} className={classNames(tooltip ? '' : 'tr-hidden') }>
4646
<span
4747
className={classNames(
4848
'tr-inline-flex tr-flex-shrink-0 tr-items-center',

‎src/components/input-elements/Button/Button.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,12 @@ const Button = ({
4949
const buttonImportance = isValidImportance(importance) ? importance : Importances.Primary;
5050
const Icon = icon ? icon : null;
5151
return (
52-
<span className={classNames(parseMarginTop(marginTop))}>
52+
<span className={classNames('tremor-base', parseMarginTop(marginTop))}>
5353
<button
5454
type="button"
5555
onClick={handleClick}
5656
className={classNames(
57-
'tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group',
57+
'input-elem tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group',
5858
'focus:tr-outline-none focus:tr-ring-2 focus:tr-ring-offset-2 focus:tr-ring-transparent',
5959
borderRadius.md.all,
6060
border.sm.all,
@@ -84,7 +84,7 @@ const Button = ({
8484
aria-hidden="true"
8585
/>
8686
) : null}
87-
<p className="tr-whitespace-nowrap">
87+
<p className="text-elem tr-whitespace-nowrap">
8888
{text}
8989
</p>
9090
{Icon && (iconPosition === HorizontalPositions.Right) ? (

‎src/components/input-elements/ButtonInline/ButtonInline.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ const ButtonInline = ({
3737
const buttonSize = isValidSize(size) ? size : Sizes.SM;
3838
const Icon = icon ? icon : null;
3939
return (
40-
<span className={classNames(parseMarginTop(marginTop))}>
40+
<span className={classNames('tremor-base', parseMarginTop(marginTop))}>
4141
<button
4242
type="button"
4343
onClick={handleClick}
4444
className={classNames(
45-
'tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group tr-font-medium',
45+
'input-elem tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group tr-font-medium',
4646
'focus:tr-outline-none focus:tr-ring-none',
4747
buttonProportions[buttonSize].fontSize,
4848
getColorVariantsFromColorThemeValue(getColorTheme(color).text).textColor,
@@ -62,7 +62,7 @@ const ButtonInline = ({
6262
aria-hidden="true"
6363
/>
6464
) : null}
65-
<p className="tr-whitespace-nowrap">{text}</p>
65+
<p className="text-elem tr-whitespace-nowrap">{text}</p>
6666
{Icon && (iconPosition === HorizontalPositions.Right) ? (
6767
<Icon
6868
className={classNames(

‎src/components/input-elements/Datepicker/Datepicker.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ const Datepicker = ({
152152

153153
return (
154154
<div className={ classNames(
155-
'tr-relative tr-w-full',
155+
'tremor-base tr-relative tr-w-full',
156156
parseMarginTop(marginTop),
157157
parseMaxWidth(maxWidth),
158158
) }>
@@ -168,7 +168,7 @@ const Datepicker = ({
168168
ref={ datePickerRef }
169169
onClick={ () => setShowDatePickerModal(!showDatePickerModal) }
170170
className={ classNames(
171-
'tr-flex tr-items-center tr-w-full tr-truncate',
171+
'input-elem tr-flex tr-items-center tr-w-full tr-truncate',
172172
'focus:tr-ring-2 focus:tr-outline-none focus:tr-z-10',
173173
enableRelativeDates ? border.none.right : classNames(borderRadius.md.right, border.sm.right),
174174
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
@@ -194,7 +194,7 @@ const Datepicker = ({
194194
aria-hidden="true"
195195
/>
196196
<p className={ classNames(
197-
'tr-whitespace-nowrap tr-truncate',
197+
'text-elem tr-whitespace-nowrap tr-truncate',
198198
fontSize.sm,
199199
fontWeight.md,
200200
selectedStartDay
@@ -209,7 +209,7 @@ const Datepicker = ({
209209
ref={ dropdownRef }
210210
onClick={ () => setShowDropdownModal(!showDropdownModal) }
211211
className={ classNames(
212-
'tr-inline-flex tr-justify-between tr-w-48 tr-truncate',
212+
'input-elem tr-inline-flex tr-justify-between tr-w-48 tr-truncate',
213213
'focus:tr-ring-2 focus:tr-outline-none',
214214
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
215215
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
@@ -224,7 +224,7 @@ const Datepicker = ({
224224
) }
225225
>
226226
<p className={ classNames(
227-
'tr-whitespace-nowrap tr-truncate',
227+
'text-elem tr-whitespace-nowrap tr-truncate',
228228
fontSize.sm,
229229
fontWeight.md,
230230
selectedRelativeFilterOption
@@ -277,7 +277,7 @@ const Datepicker = ({
277277
type="button"
278278
onClick={() => previousMonth(firstDayCurrentMonth, setCurrentMonth)}
279279
className={ classNames(
280-
'tr-inline-flex focus:tr-outline-none focus:tr-ring-2',
280+
'input-elem tr-inline-flex focus:tr-outline-none focus:tr-ring-2',
281281
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
282282
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
283283
getColorVariantsFromColorThemeValue(defaultColors.ring).focusRingColor,
@@ -302,6 +302,7 @@ const Datepicker = ({
302302
/>
303303
</button>
304304
<h2 className={ classNames(
305+
'text-elem',
305306
getColorVariantsFromColorThemeValue(defaultColors.darkestText).textColor,
306307
fontSize.sm,
307308
fontWeight.lg,
@@ -313,7 +314,7 @@ const Datepicker = ({
313314
onClick={() => nextMonth(firstDayCurrentMonth, setCurrentMonth)}
314315
type="button"
315316
className={ classNames(
316-
'tr-inline-flex focus:tr-outline-none focus:tr-ring-2',
317+
'input-elem tr-inline-flex focus:tr-outline-none focus:tr-ring-2',
317318
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
318319
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
319320
getColorVariantsFromColorThemeValue(defaultColors.ring).focusRingColor,
@@ -377,7 +378,7 @@ const Datepicker = ({
377378
onPointerEnter={ () => setHoveredDay(day) }
378379
onPointerLeave={ () => setHoveredDay(null) }
379380
className={classNames(
380-
'tr-w-full tr-flex tr-items-center tr-justify-center',
381+
'input-elem tr-w-full tr-flex tr-items-center tr-justify-center',
381382
getDayBgColorClassName(
382383
day,
383384
selectedStartDay,
@@ -429,7 +430,7 @@ const Datepicker = ({
429430
setShowDropdownModal(false);
430431
} }
431432
className={ classNames(
432-
'tr-flex tr-items-center tr-justify-between tr-w-full tr-truncate',
433+
'input-elem tr-flex tr-items-center tr-justify-between tr-w-full tr-truncate',
433434
spacing.twoXl.paddingLeft,
434435
spacing.twoXl.paddingRight,
435436
spacing.md.paddingTop,
@@ -446,7 +447,7 @@ const Datepicker = ({
446447
)
447448
) }
448449
>
449-
<p className="tr-whitespace-nowrap tr-truncate">
450+
<p className="text-elem tr-whitespace-nowrap tr-truncate">
450451
{ filterOption.name }
451452
</p>
452453
</button>

‎src/components/input-elements/Dropdown/Dropdown.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const Dropwdown = ({
6262
<div
6363
ref={ dropdownRef }
6464
className={ classNames(
65-
'tr-relative tr-w-full tr-min-w-[10rem]',
65+
'tremor-base tr-relative tr-w-full tr-min-w-[10rem]',
6666
parseMaxWidth(maxWidth),
6767
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
6868
parseMarginTop(marginTop),
@@ -73,7 +73,7 @@ const Dropwdown = ({
7373
>
7474
<button
7575
className={ classNames(
76-
'tr-flex tr-justify-between tr-items-center tr-w-full',
76+
'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',
7777
'focus:tr-ring-2 focus:tr-outline-0',
7878
getColorVariantsFromColorThemeValue(defaultColors.white).bgColor,
7979
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
@@ -87,7 +87,7 @@ const Dropwdown = ({
8787
onClick={ () => setShowModal(!showModal) }
8888
>
8989
<p className={ classNames(
90-
'tr-whitespace-nowrap tr-truncate',
90+
'text-elem tr-whitespace-nowrap tr-truncate',
9191
fontSize.sm,
9292
fontWeight.md,
9393
selectedItem

‎src/components/input-elements/Dropdown/DropdownItem.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const DropdownItem = ({
3030
<button
3131
onClick={() => privateProps!.handleDropdownItemClick(value)}
3232
className={classNames(
33-
'tr-flex tr-items-center tr-justify-between tr-w-full',
33+
'input-elem tr-flex tr-items-center tr-justify-between tr-w-full',
3434
spacing.twoXl.paddingLeft,
3535
spacing.twoXl.paddingRight,
3636
spacing.md.paddingTop,
@@ -65,7 +65,7 @@ const DropdownItem = ({
6565
aria-hidden="true"
6666
/>
6767
) : null}
68-
<p className="tr-whitespace-nowrap tr-truncate">{text}</p>
68+
<p className="text-elem tr-whitespace-nowrap tr-truncate">{text}</p>
6969
</div>
7070
</button>
7171
);

‎src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const MultiSelectBox = ({
9494
<div
9595
ref={ dropdownRef }
9696
className={ classNames(
97-
'tr-relative tr-w-full tr-min-w-[10rem]',
97+
'tremor-base tr-relative tr-w-full tr-min-w-[10rem]',
9898
parseMaxWidth(maxWidth),
9999
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
100100
parseMarginTop(marginTop),
@@ -105,7 +105,7 @@ const MultiSelectBox = ({
105105
>
106106
<button
107107
className={ classNames(
108-
'tr-flex tr-justify-between tr-items-center tr-w-full',
108+
'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',
109109
'focus:tr-ring-2 focus:tr-outline-0',
110110
getColorVariantsFromColorThemeValue(defaultColors.white).bgColor,
111111
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
@@ -119,7 +119,7 @@ const MultiSelectBox = ({
119119
onClick={ () => setShowModal(!showModal) }
120120
>
121121
<p className={ classNames(
122-
'tr-whitespace-nowrap tr-truncate',
122+
'text-elem tr-whitespace-nowrap tr-truncate',
123123
fontSize.sm,
124124
fontWeight.md,
125125
selectedItems.length !==0
@@ -187,7 +187,7 @@ const MultiSelectBox = ({
187187
type="input"
188188
placeholder="Search"
189189
className={ classNames(
190-
'tr-w-full focus:tr-outline-none focus:tr-ring-none',
190+
'input-elem tr-w-full focus:tr-outline-none focus:tr-ring-none',
191191
getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
192192
getColorVariantsFromColorThemeValue(defaultColors.transparent).bgColor,
193193
spacing.sm.paddingTop,

‎src/components/input-elements/MultiSelectBox/MultiSelectBoxItem.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const MultiSelectBoxItem = ({
2929
<button
3030
onClick={ () => privateProps!.handleMultiSelectBoxItemClick(value) }
3131
className={ classNames(
32-
'tr-flex tr-items-center tr-justify-between tr-w-full',
32+
'input-elem tr-flex tr-items-center tr-justify-between tr-w-full',
3333
spacing.twoXl.paddingLeft,
3434
spacing.twoXl.paddingRight,
3535
spacing.md.paddingTop,
@@ -43,7 +43,7 @@ const MultiSelectBoxItem = ({
4343
<input
4444
type="checkbox"
4545
className={ classNames(
46-
'tr-flex-none focus:tr-ring-none focus:tr-outline-none tr-cursor-pointer',
46+
'input-elem tr-flex-none focus:tr-ring-none focus:tr-outline-none tr-cursor-pointer',
4747
getColorVariantsFromColorThemeValue(defaultColors.lightRing).focusRingColor,
4848
getColorVariantsFromColorThemeValue(getColorTheme(BaseColors.Blue).text).textColor,
4949
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
@@ -54,7 +54,7 @@ const MultiSelectBoxItem = ({
5454
checked={ privateProps!.isActive }
5555
readOnly={ true }
5656
/>
57-
<p className="tr-whitespace-nowrap tr-truncate">{ text }</p>
57+
<p className="text-elem tr-whitespace-nowrap tr-truncate">{ text }</p>
5858
</div>
5959
</button>
6060
);

0 commit comments

Comments
 (0)