From 00620e4058346e5fa2350b06819ac6a6246eeda3 Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 5 Oct 2023 11:34:57 +0200 Subject: [PATCH] fix(Text): remove default color neutral --- .changeset/old-wolves-fail.md | 5 + .../__snapshots__/index.spec.tsx.snap | 10 +- .../__snapshots__/index.spec.tsx.snap | 10 +- .../__snapshots__/index.spec.tsx.snap | 5 +- .../__snapshots__/index.spec.tsx.snap | 10 +- .../__snapshots__/index.test.tsx.snap | 45 +++----- .../__tests__/__snapshots__/index.tsx.snap | 75 +++++-------- .../__tests__/__snapshots__/Tooltip.tsx.snap | 5 +- .../__tests__/__snapshots__/index.tsx.snap | 10 +- .../__snapshots__/index.test.tsx.snap | 35 +++--- .../__snapshots__/index.test.tsx.snap | 15 +-- .../__tests__/__snapshots__/index.tsx.snap | 50 ++++----- .../__snapshots__/index.test.tsx.snap | 50 ++++----- .../__snapshots__/index.test.tsx.snap | 7 +- .../__snapshots__/index.test.tsx.snap | 50 ++++----- .../__snapshots__/index.test.tsx.snap | 5 +- .../__snapshots__/index.test.tsx.snap | 5 +- .../__snapshots__/index.test.tsx.snap | 25 ++--- .../__snapshots__/index.test.tsx.snap | 85 ++++++-------- .../__snapshots__/index.test.tsx.snap | 75 +++---------- .../__snapshots__/index.test.tsx.snap | 28 ++--- .../__snapshots__/index.test.tsx.snap | 105 +++++++----------- packages/ui/src/components/Text/index.tsx | 11 +- .../__snapshots__/index.test.tsx.snap | 20 ++-- .../__snapshots__/index.test.tsx.snap | 5 +- .../__snapshots__/index.test.tsx.snap | 30 ++--- 26 files changed, 302 insertions(+), 474 deletions(-) create mode 100644 .changeset/old-wolves-fail.md diff --git a/.changeset/old-wolves-fail.md b/.changeset/old-wolves-fail.md new file mode 100644 index 0000000000..257cd2cae5 --- /dev/null +++ b/.changeset/old-wolves-fail.md @@ -0,0 +1,5 @@ +--- +'@ultraviolet/ui': minor +--- + +Fix `` component to remove default color neutral and make it unset allowing text to inherit it's color from parent diff --git a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap index 7ca4c34ad7..1b4cf41832 100644 --- a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap +++ b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap @@ -54,8 +54,7 @@ exports[`CheckboxField should render correctly checked 1`] = ` flex-wrap: nowrap; } -.cache-tjeurz { - color: #3f4250; +.cache-103o9w9 { font-size: 16px; font-family: Asap; font-weight: 500; @@ -337,7 +336,7 @@ exports[`CheckboxField should render correctly checked 1`] = ` class="cache-tjrecv ehpbis70" > Label  @@ -516,8 +515,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] = flex-wrap: nowrap; } -.cache-tjeurz { - color: #3f4250; +.cache-103o9w9 { font-size: 16px; font-family: Asap; font-weight: 500; @@ -809,7 +807,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] = class="cache-tjrecv ehpbis70" > CheckboxGroupField events  Label  @@ -395,8 +394,7 @@ exports[`RadioField should trigger events correctly 1`] = ` flex-wrap: nowrap; } -.cache-tjeurz { - color: #3f4250; +.cache-103o9w9 { font-size: 16px; font-family: Asap; font-weight: 500; @@ -569,7 +567,7 @@ exports[`RadioField should trigger events correctly 1`] = ` class="cache-tjrecv ehpbis70" > RadioGroupField events  diff --git a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap index d947592bcb..6e2d2970c0 100644 --- a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap +++ b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap @@ -171,8 +171,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1` flex-wrap: wrap; } -.cache-1d1sal { - color: #3f4250; +.cache-1x5z0oq { font-size: 16px; font-family: Asap; font-weight: 400; @@ -213,7 +212,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1` class="cache-hvmk6w e17p0ih03" >

hello

diff --git a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap index 7a77416d61..2966fa07f9 100644 --- a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap +++ b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap @@ -54,8 +54,7 @@ exports[`GroupField should render correctly checked 1`] = ` flex-wrap: nowrap; } -.cache-tjeurz { - color: #3f4250; +.cache-103o9w9 { font-size: 16px; font-family: Asap; font-weight: 500; @@ -259,7 +258,7 @@ exports[`GroupField should render correctly checked 1`] = ` class="cache-tjrecv ehpbis70" > Label  @@ -384,8 +383,7 @@ exports[`GroupField should trigger events correctly with required prop 1`] = ` flex-wrap: nowrap; } -.cache-tjeurz { - color: #3f4250; +.cache-103o9w9 { font-size: 16px; font-family: Asap; font-weight: 500; @@ -599,7 +597,7 @@ exports[`GroupField should trigger events correctly with required prop 1`] = ` class="cache-tjrecv ehpbis70" > ToggleGroupField events 

Sample Alert

@@ -278,8 +277,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment flex-wrap: wrap; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -311,7 +309,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment class="cache-4ixw4c-Stack-TextStack e17p0ih03" >

Sample Alert

@@ -439,8 +437,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment flex-wrap: wrap; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -472,7 +469,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment class="cache-4ixw4c-Stack-TextStack e17p0ih03" >

Sample Alert

@@ -600,8 +597,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment flex-wrap: wrap; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -633,7 +629,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment class="cache-4ixw4c-Stack-TextStack e17p0ih03" >

Sample Alert

@@ -761,8 +757,7 @@ exports[`Alert renders correctly with buttonText and onClickButton 1`] = ` flex-wrap: wrap; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -849,7 +844,7 @@ exports[`Alert renders correctly with buttonText and onClickButton 1`] = ` class="cache-4ixw4c-Stack-TextStack e17p0ih03" >

Sample Alert

@@ -1130,8 +1125,7 @@ exports[`Alert renders correctly with closable and onClose 1`] = ` flex-wrap: wrap; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1229,7 +1223,7 @@ exports[`Alert renders correctly with closable and onClose 1`] = ` class="cache-4ixw4c-Stack-TextStack e17p0ih03" >

Sample Alert

@@ -1371,8 +1365,7 @@ exports[`Alert renders correctly with default values 1`] = ` flex-wrap: wrap; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1404,7 +1397,7 @@ exports[`Alert renders correctly with default values 1`] = ` class="cache-4ixw4c-Stack-TextStack e17p0ih03" >

Sample Alert

@@ -1532,8 +1525,7 @@ exports[`Alert renders correctly with disabled 1`] = ` flex-wrap: wrap; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1612,7 +1604,7 @@ exports[`Alert renders correctly with disabled 1`] = ` class="cache-4ixw4c-Stack-TextStack e17p0ih03" >

Sample Alert

@@ -1759,8 +1751,7 @@ exports[`Alert renders correctly with title 1`] = ` text-decoration: none; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1797,7 +1788,7 @@ exports[`Alert renders correctly with title 1`] = ` title

Sample Alert

diff --git a/packages/ui/src/components/Badge/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/Badge/__tests__/__snapshots__/index.tsx.snap index 30ca73b219..3ac5b4e69e 100644 --- a/packages/ui/src/components/Badge/__tests__/__snapshots__/index.tsx.snap +++ b/packages/ui/src/components/Badge/__tests__/__snapshots__/index.tsx.snap @@ -2,8 +2,7 @@ exports[`Badge renders correctly prominence default 1`] = ` - .cache-6f2izv-StyledText-StyledSpan { - color: #3f4250; + .cache-ytbijv-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -41,7 +40,7 @@ exports[`Badge renders correctly prominence default 1`] = ` } Sample badge @@ -50,8 +49,7 @@ exports[`Badge renders correctly prominence default 1`] = ` exports[`Badge renders correctly prominence strong 1`] = ` - .cache-fscxeq-StyledText-StyledSpan { - color: #3f4250; + .cache-i376ie-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -89,7 +87,7 @@ exports[`Badge renders correctly prominence strong 1`] = ` } Sample badge @@ -98,8 +96,7 @@ exports[`Badge renders correctly prominence strong 1`] = ` exports[`Badge renders correctly sentiment danger 1`] = ` - .cache-z9kyl8-StyledText-StyledSpan { - color: #3f4250; + .cache-2vl9kx-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -137,7 +134,7 @@ exports[`Badge renders correctly sentiment danger 1`] = ` } Sample badge @@ -146,8 +143,7 @@ exports[`Badge renders correctly sentiment danger 1`] = ` exports[`Badge renders correctly sentiment info 1`] = ` - .cache-o7c0gk-StyledText-StyledSpan { - color: #3f4250; + .cache-b86jtl-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -185,7 +181,7 @@ exports[`Badge renders correctly sentiment info 1`] = ` } Sample badge @@ -194,8 +190,7 @@ exports[`Badge renders correctly sentiment info 1`] = ` exports[`Badge renders correctly sentiment neutral 1`] = ` - .cache-6f2izv-StyledText-StyledSpan { - color: #3f4250; + .cache-ytbijv-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -233,7 +228,7 @@ exports[`Badge renders correctly sentiment neutral 1`] = ` } Sample badge @@ -242,8 +237,7 @@ exports[`Badge renders correctly sentiment neutral 1`] = ` exports[`Badge renders correctly sentiment primary 1`] = ` - .cache-1uuj7dt-StyledText-StyledSpan { - color: #3f4250; + .cache-g2jlbn-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -281,7 +275,7 @@ exports[`Badge renders correctly sentiment primary 1`] = ` } Sample badge @@ -290,8 +284,7 @@ exports[`Badge renders correctly sentiment primary 1`] = ` exports[`Badge renders correctly sentiment secondary 1`] = ` - .cache-1sruvm5-StyledText-StyledSpan { - color: #3f4250; + .cache-o2efa7-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -329,7 +322,7 @@ exports[`Badge renders correctly sentiment secondary 1`] = ` } Sample badge @@ -338,8 +331,7 @@ exports[`Badge renders correctly sentiment secondary 1`] = ` exports[`Badge renders correctly sentiment success 1`] = ` - .cache-ad2fjs-StyledText-StyledSpan { - color: #3f4250; + .cache-xw7nr3-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -377,7 +369,7 @@ exports[`Badge renders correctly sentiment success 1`] = ` } Sample badge @@ -386,8 +378,7 @@ exports[`Badge renders correctly sentiment success 1`] = ` exports[`Badge renders correctly sentiment warning 1`] = ` - .cache-zvya2g-StyledText-StyledSpan { - color: #3f4250; + .cache-1ohm9qk-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -425,7 +416,7 @@ exports[`Badge renders correctly sentiment warning 1`] = ` } Sample badge @@ -434,8 +425,7 @@ exports[`Badge renders correctly sentiment warning 1`] = ` exports[`Badge renders correctly size large 1`] = ` - .cache-fiqya7-StyledText-StyledSpan { - color: #3f4250; + .cache-yst8vd-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -473,7 +463,7 @@ exports[`Badge renders correctly size large 1`] = ` } Sample badge @@ -482,8 +472,7 @@ exports[`Badge renders correctly size large 1`] = ` exports[`Badge renders correctly size medium 1`] = ` - .cache-6f2izv-StyledText-StyledSpan { - color: #3f4250; + .cache-ytbijv-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -521,7 +510,7 @@ exports[`Badge renders correctly size medium 1`] = ` } Sample badge @@ -530,8 +519,7 @@ exports[`Badge renders correctly size medium 1`] = ` exports[`Badge renders correctly size small 1`] = ` - .cache-1k0nst5-StyledText-StyledSpan { - color: #3f4250; + .cache-qj7c2-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -569,7 +557,7 @@ exports[`Badge renders correctly size small 1`] = ` } Sample badge @@ -578,8 +566,7 @@ exports[`Badge renders correctly size small 1`] = ` exports[`Badge renders correctly when disabled 1`] = ` - .cache-1qliy49-StyledText-StyledSpan { - color: #727683; + .cache-mfm356-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -617,7 +604,7 @@ exports[`Badge renders correctly when disabled 1`] = ` } Sample badge @@ -626,8 +613,7 @@ exports[`Badge renders correctly when disabled 1`] = ` exports[`Badge renders correctly with default values 1`] = ` - .cache-6f2izv-StyledText-StyledSpan { - color: #3f4250; + .cache-ytbijv-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -665,7 +651,7 @@ exports[`Badge renders correctly with default values 1`] = ` } Sample badge @@ -674,8 +660,7 @@ exports[`Badge renders correctly with default values 1`] = ` exports[`Badge renders correctly with icon 1`] = ` - .cache-6f2izv-StyledText-StyledSpan { - color: #3f4250; + .cache-ytbijv-StyledText-StyledSpan { font-size: 16px; font-family: Asap; font-weight: 500; @@ -722,7 +707,7 @@ exports[`Badge renders correctly with icon 1`] = ` }

2020-02-20

diff --git a/packages/ui/src/components/Card/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/Card/__tests__/__snapshots__/index.tsx.snap index 906bbac04c..ccd7cb778c 100644 --- a/packages/ui/src/components/Card/__tests__/__snapshots__/index.tsx.snap +++ b/packages/ui/src/components/Card/__tests__/__snapshots__/index.tsx.snap @@ -169,8 +169,7 @@ exports[`Card renders correctly with disabled and header 1`] = ` cursor: not-allowed; } -.cache-50796r-StyledText { - color: #b5b7bd; +.cache-gm8eja-StyledText { font-size: 25px; font-family: Asap; font-weight: 400; @@ -200,7 +199,7 @@ exports[`Card renders correctly with disabled and header 1`] = ` data-disabled="true" >

Title

@@ -244,8 +243,7 @@ exports[`Card renders correctly with header 1`] = ` cursor: not-allowed; } -.cache-177neqt-StyledText { - color: #3f4250; +.cache-gm8eja-StyledText { font-size: 25px; font-family: Asap; font-weight: 400; @@ -275,7 +273,7 @@ exports[`Card renders correctly with header 1`] = ` data-disabled="false" >

Title

diff --git a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap index 1219764659..e32140b1db 100644 --- a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap @@ -54,8 +54,7 @@ exports[`CheckboxGroup renders correctly 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -334,7 +333,7 @@ exports[`CheckboxGroup renders correctly 1`] = ` class="cache-oey408-Stack ehpbis70" > Label  @@ -512,8 +511,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -815,7 +813,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = ` class="cache-oey408-Stack ehpbis70" > Label  @@ -993,8 +991,7 @@ exports[`CheckboxGroup renders correctly with error content 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -1285,7 +1282,7 @@ exports[`CheckboxGroup renders correctly with error content 1`] = ` class="cache-oey408-Stack ehpbis70" > Label  @@ -1468,8 +1465,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -1738,8 +1734,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = ` justify-content: normal; } -.cache-5q2bke-StyledText { - color: #727683; +.cache-n5sgp8-StyledText { font-size: 14px; font-family: Asap; font-weight: 400; @@ -1760,7 +1755,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = ` class="cache-oey408-Stack ehpbis70" > Label  @@ -1881,7 +1876,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = `

Helper content

@@ -1943,8 +1938,7 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`] flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -2223,7 +2217,7 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`] class="cache-oey408-Stack ehpbis70" > Label  @@ -2401,8 +2395,7 @@ exports[`CheckboxGroup renders correctly with required prop 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -2691,7 +2684,7 @@ exports[`CheckboxGroup renders correctly with required prop 1`] = ` class="cache-oey408-Stack ehpbis70" > Label 

enero de 2021

@@ -3276,8 +3275,7 @@ exports[`DateInput renders correctly with date-fns locale fr 1`] = ` background-color: #ffffff; } -.cache-wxjl9p-StyledText-StyledText { - color: #3f4250; +.cache-48r42q-StyledText-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -3460,7 +3458,7 @@ exports[`DateInput renders correctly with date-fns locale fr 1`] = ` class="cache-10umtls-TopHeaderDiv e1bm75lk1" >

janvier 2021

@@ -4306,8 +4304,7 @@ exports[`DateInput renders correctly with date-fns locale ru 1`] = ` background-color: #ffffff; } -.cache-wxjl9p-StyledText-StyledText { - color: #3f4250; +.cache-48r42q-StyledText-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -4490,7 +4487,7 @@ exports[`DateInput renders correctly with date-fns locale ru 1`] = ` class="cache-10umtls-TopHeaderDiv e1bm75lk1" >

январь 2021 г.

diff --git a/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.tsx.snap index f2ab3b7c5a..6288c50353 100644 --- a/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.tsx.snap +++ b/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.tsx.snap @@ -100,8 +100,7 @@ exports[`EmptySpace should work with border 1`] = ` flex-wrap: nowrap; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -149,7 +148,7 @@ exports[`EmptySpace should work with border 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

@@ -266,8 +265,7 @@ exports[`EmptySpace should work with image 1`] = ` flex-wrap: nowrap; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -320,7 +318,7 @@ exports[`EmptySpace should work with image 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

@@ -437,8 +435,7 @@ exports[`EmptySpace should work with image as component 1`] = ` flex-wrap: nowrap; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -490,7 +487,7 @@ exports[`EmptySpace should work with image as component 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

@@ -607,8 +604,7 @@ exports[`EmptySpace should work with learn more 1`] = ` flex-wrap: nowrap; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -739,7 +735,7 @@ exports[`EmptySpace should work with learn more 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

@@ -870,8 +866,7 @@ exports[`EmptySpace should work with primary button 1`] = ` flex-wrap: nowrap; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -919,7 +914,7 @@ exports[`EmptySpace should work with primary button 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

@@ -1042,8 +1037,7 @@ exports[`EmptySpace should work with secondary button 1`] = ` flex-wrap: nowrap; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1091,7 +1085,7 @@ exports[`EmptySpace should work with secondary button 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

@@ -1213,8 +1207,7 @@ exports[`EmptySpace should work with size 1`] = ` flex-wrap: nowrap; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1262,7 +1255,7 @@ exports[`EmptySpace should work with size 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

@@ -1379,8 +1372,7 @@ exports[`EmptySpace should work with title 1`] = ` flex-wrap: nowrap; } -.cache-95t317-StyledText-CenteredText { - color: #222638; +.cache-1qhlrst-StyledText-CenteredText { font-size: 21px; font-family: Asap; font-weight: 500; @@ -1392,8 +1384,7 @@ exports[`EmptySpace should work with title 1`] = ` text-align: center; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1441,12 +1432,12 @@ exports[`EmptySpace should work with title 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

test

@@ -1563,8 +1554,7 @@ exports[`EmptySpace should work without parameters 1`] = ` flex-wrap: nowrap; } -.cache-158hhn0-StyledText-CenteredText { - color: #3f4250; +.cache-hkgojg-StyledText-CenteredText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1612,7 +1602,7 @@ exports[`EmptySpace should work without parameters 1`] = ` class="cache-1cm1duh-Stack ehpbis70" >

test

diff --git a/packages/ui/src/components/Meter/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Meter/__tests__/__snapshots__/index.test.tsx.snap index 0b43dac5fc..457642046e 100644 --- a/packages/ui/src/components/Meter/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Meter/__tests__/__snapshots__/index.test.tsx.snap @@ -2,8 +2,7 @@ exports[`Meter render with 1`] = ` - .cache-q12lm2-StyledText { - color: #3f4250; + .cache-1rc8nuc-StyledText { font-size: 14px; font-family: Asap; font-weight: 500; @@ -14,8 +13,7 @@ exports[`Meter render with 1`] = ` text-decoration: none; } -.cache-38hwf5-StyledText-StyledStrength { - color: #3f4250; +.cache-thxd76-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -54,12 +52,12 @@ exports[`Meter render with 1`] = ` title="MyTitle" >

MyTitle veryWeak @@ -78,8 +76,7 @@ exports[`Meter render with 1`] = ` exports[`Meter render with medium password 1`] = ` - .cache-q12lm2-StyledText { - color: #3f4250; + .cache-1rc8nuc-StyledText { font-size: 14px; font-family: Asap; font-weight: 500; @@ -90,8 +87,7 @@ exports[`Meter render with medium password 1`] = ` text-decoration: none; } -.cache-15cg294-StyledText-StyledStrength { - color: #3f4250; +.cache-1vhjy0h-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -130,12 +126,12 @@ exports[`Meter render with medium password 1`] = ` title="MyTitle" >

MyTitle medium @@ -154,8 +150,7 @@ exports[`Meter render with medium password 1`] = ` exports[`Meter render with strong value 1`] = ` - .cache-q12lm2-StyledText { - color: #3f4250; + .cache-1rc8nuc-StyledText { font-size: 14px; font-family: Asap; font-weight: 500; @@ -166,8 +161,7 @@ exports[`Meter render with strong value 1`] = ` text-decoration: none; } -.cache-1a9xin5-StyledText-StyledStrength { - color: #3f4250; +.cache-127r8j4-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -206,12 +200,12 @@ exports[`Meter render with strong value 1`] = ` title="MyTitle" >

MyTitle strong @@ -230,8 +224,7 @@ exports[`Meter render with strong value 1`] = ` exports[`Meter render with very strong value 1`] = ` - .cache-q12lm2-StyledText { - color: #3f4250; + .cache-1rc8nuc-StyledText { font-size: 14px; font-family: Asap; font-weight: 500; @@ -242,8 +235,7 @@ exports[`Meter render with very strong value 1`] = ` text-decoration: none; } -.cache-1a9xin5-StyledText-StyledStrength { - color: #3f4250; +.cache-127r8j4-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -282,12 +274,12 @@ exports[`Meter render with very strong value 1`] = ` title="MyTitle" >

MyTitle veryStrong @@ -306,8 +298,7 @@ exports[`Meter render with very strong value 1`] = ` exports[`Meter render with weak value 1`] = ` - .cache-q12lm2-StyledText { - color: #3f4250; + .cache-1rc8nuc-StyledText { font-size: 14px; font-family: Asap; font-weight: 500; @@ -318,8 +309,7 @@ exports[`Meter render with weak value 1`] = ` text-decoration: none; } -.cache-25z33a-StyledText-StyledStrength { - color: #3f4250; +.cache-yzxiz0-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -358,12 +348,12 @@ exports[`Meter render with weak value 1`] = ` title="MyTitle" >

MyTitle weak diff --git a/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap index 624c434855..f3bfccfaa0 100644 --- a/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap @@ -40,8 +40,7 @@ exports[`PasswordCheck render with custom values 1`] = ` min-height: 20px; } -.cache-3yrr08-StyledText { - color: #3f4250; +.cache-n5sgp8-StyledText { font-size: 14px; font-family: Asap; font-weight: 400; @@ -76,7 +75,7 @@ exports[`PasswordCheck render with custom values 1`] = ` />

That's a beautiful custom password check we have right there

@@ -93,7 +92,7 @@ exports[`PasswordCheck render with custom values 1`] = ` />

That's a second beautiful custom password check we have right there

diff --git a/packages/ui/src/components/PasswordStrengthMeter/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/PasswordStrengthMeter/__tests__/__snapshots__/index.test.tsx.snap index 74550b4a5b..fc43069d79 100644 --- a/packages/ui/src/components/PasswordStrengthMeter/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/PasswordStrengthMeter/__tests__/__snapshots__/index.test.tsx.snap @@ -2,8 +2,7 @@ exports[`PasswordStrengthMeter render with empty password 1`] = ` - .cache-1xhsk3w-StyledText-StyledTitle { - color: #3f4250; + .cache-1nrumjn-StyledText-StyledTitle { font-size: 14px; font-family: Asap; font-weight: 500; @@ -17,8 +16,7 @@ exports[`PasswordStrengthMeter render with empty password 1`] = ` line-height: 22px; } -.cache-38hwf5-StyledText-StyledStrength { - color: #3f4250; +.cache-thxd76-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -53,12 +51,12 @@ exports[`PasswordStrengthMeter render with empty password 1`] = ` title="MyTitle" >

MyTitle

veryWeak @@ -76,8 +74,7 @@ exports[`PasswordStrengthMeter render with empty password 1`] = ` exports[`PasswordStrengthMeter render with medium password 1`] = ` - .cache-1xhsk3w-StyledText-StyledTitle { - color: #3f4250; + .cache-1nrumjn-StyledText-StyledTitle { font-size: 14px; font-family: Asap; font-weight: 500; @@ -91,8 +88,7 @@ exports[`PasswordStrengthMeter render with medium password 1`] = ` line-height: 22px; } -.cache-38hwf5-StyledText-StyledStrength { - color: #3f4250; +.cache-thxd76-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -127,12 +123,12 @@ exports[`PasswordStrengthMeter render with medium password 1`] = ` title="MyTitle" >

MyTitle

veryWeak @@ -150,8 +146,7 @@ exports[`PasswordStrengthMeter render with medium password 1`] = ` exports[`PasswordStrengthMeter render with strong password 1`] = ` - .cache-1xhsk3w-StyledText-StyledTitle { - color: #3f4250; + .cache-1nrumjn-StyledText-StyledTitle { font-size: 14px; font-family: Asap; font-weight: 500; @@ -165,8 +160,7 @@ exports[`PasswordStrengthMeter render with strong password 1`] = ` line-height: 22px; } -.cache-38hwf5-StyledText-StyledStrength { - color: #3f4250; +.cache-thxd76-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -201,12 +195,12 @@ exports[`PasswordStrengthMeter render with strong password 1`] = ` title="MyTitle" >

MyTitle

veryWeak @@ -224,8 +218,7 @@ exports[`PasswordStrengthMeter render with strong password 1`] = ` exports[`PasswordStrengthMeter render with very strong password 1`] = ` - .cache-1xhsk3w-StyledText-StyledTitle { - color: #3f4250; + .cache-1nrumjn-StyledText-StyledTitle { font-size: 14px; font-family: Asap; font-weight: 500; @@ -239,8 +232,7 @@ exports[`PasswordStrengthMeter render with very strong password 1`] = ` line-height: 22px; } -.cache-38hwf5-StyledText-StyledStrength { - color: #3f4250; +.cache-thxd76-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -275,12 +267,12 @@ exports[`PasswordStrengthMeter render with very strong password 1`] = ` title="MyTitle" >

MyTitle

veryWeak @@ -298,8 +290,7 @@ exports[`PasswordStrengthMeter render with very strong password 1`] = ` exports[`PasswordStrengthMeter render with weak password 1`] = ` - .cache-1xhsk3w-StyledText-StyledTitle { - color: #3f4250; + .cache-1nrumjn-StyledText-StyledTitle { font-size: 14px; font-family: Asap; font-weight: 500; @@ -313,8 +304,7 @@ exports[`PasswordStrengthMeter render with weak password 1`] = ` line-height: 22px; } -.cache-38hwf5-StyledText-StyledStrength { - color: #3f4250; +.cache-thxd76-StyledText-StyledStrength { font-size: 14px; font-family: Asap; font-weight: 500; @@ -349,12 +339,12 @@ exports[`PasswordStrengthMeter render with weak password 1`] = ` title="MyTitle" >

MyTitle

veryWeak diff --git a/packages/ui/src/components/PieChart/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/PieChart/__tests__/__snapshots__/index.test.tsx.snap index 893d1fe10c..c10ec7cc4a 100644 --- a/packages/ui/src/components/PieChart/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/PieChart/__tests__/__snapshots__/index.test.tsx.snap @@ -1416,8 +1416,7 @@ exports[`PieChart renders correctly with empty legend placeholder 1`] = ` margin-left: 20px; } -.cache-1cozjuw-StyledText { - color: #3f4250; +.cache-1ku5ov3-StyledText { font-size: 16px; font-family: Asap; font-weight: 400; @@ -1498,7 +1497,7 @@ exports[`PieChart renders correctly with empty legend placeholder 1`] = ` class="cache-16mg1da-EmptyLegend epjfe5p1" >

I am a legend

diff --git a/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap index 1104fafb37..46b35aa677 100644 --- a/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap @@ -966,8 +966,7 @@ exports[`Radio renders correctly when helper 1`] = ` fill: #ffffff; } -.cache-1xgtf28-StyledText-MargedText { - color: #727683; +.cache-1azzkcd-StyledText-MargedText { font-size: 14px; font-family: Asap; font-weight: 400; @@ -1028,7 +1027,7 @@ exports[`Radio renders correctly when helper 1`] = `

Helper

diff --git a/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap index f44e60c68d..c1b9bd1007 100644 --- a/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap @@ -54,8 +54,7 @@ exports[`RadioGroup renders correctly 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -225,7 +224,7 @@ exports[`RadioGroup renders correctly 1`] = ` class="cache-oey408-Stack ehpbis70" > Label  @@ -392,8 +391,7 @@ exports[`RadioGroup renders correctly with direction row 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -586,7 +584,7 @@ exports[`RadioGroup renders correctly with direction row 1`] = ` class="cache-oey408-Stack ehpbis70" > Label  @@ -753,8 +751,7 @@ exports[`RadioGroup renders correctly with error content 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -936,7 +933,7 @@ exports[`RadioGroup renders correctly with error content 1`] = ` class="cache-oey408-Stack ehpbis70" > Label  @@ -1108,8 +1105,7 @@ exports[`RadioGroup renders correctly with helper content 1`] = ` flex-wrap: nowrap; } -.cache-vjvakd-StyledText { - color: #3f4250; +.cache-1fjokpj-StyledText { font-size: 16px; font-family: Asap; font-weight: 500; @@ -1269,8 +1265,7 @@ exports[`RadioGroup renders correctly with helper content 1`] = ` fill: #ffffff; } -.cache-5q2bke-StyledText { - color: #727683; +.cache-n5sgp8-StyledText { font-size: 14px; font-family: Asap; font-weight: 400; @@ -1291,7 +1286,7 @@ exports[`RadioGroup renders correctly with helper content 1`] = ` class="cache-oey408-Stack ehpbis70" > Label  @@ -1401,7 +1396,7 @@ exports[`RadioGroup renders correctly with helper content 1`] = `

Helper content

diff --git a/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap index 904897f8f4..d571b6155d 100644 --- a/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap @@ -41,8 +41,7 @@ exports[`Snippet renders correctly 1`] = ` width: 100%; } -.cache-1hiu8ya-StyledText-PreText { - color: #3f4250; +.cache-19hs08a-StyledText-PreText { font-size: 14px; font-family: JetBrains; font-weight: 400; @@ -159,7 +158,7 @@ exports[`Snippet renders correctly 1`] = ` class="cache-jdits0-Stack-StyledStack e1q0gj905" > 
         
         
           
           
             Show 
             
         
           
           
             Show 
             
         
           
           
             Show 
             
       
         
       
         
         
           
           
             Show 
             
         
           
           
             Test 
             
       
         
       
         
         
           
           
             Hide 
             
       
       
         
           Step 1
@@ -183,7 +182,7 @@ exports[`Stepper renders correctly with all selected 1`] = `
         
       
       
         
           Step 2
@@ -202,7 +201,7 @@ exports[`Stepper renders correctly with all selected 1`] = `
         3
       
       
         
           Step 3
@@ -304,8 +303,7 @@ exports[`Stepper renders correctly with animation 1`] = `
   min-height: 50%;
 }
 
-.cache-1e0garm-StyledText-StyledText {
-  color: #3f4250;
+.cache-1soyd85-StyledText-StyledText {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -406,19 +404,6 @@ exports[`Stepper renders correctly with animation 1`] = `
   font-size: 16px;
 }
 
-.cache-xlb2zz-StyledText-StyledText {
-  color: #727683;
-  font-size: 14px;
-  font-family: Asap;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 20px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-top: 8px;
-}
-
 

@@ -438,7 +423,7 @@ exports[`Stepper renders correctly with animation 1`] = `
         
       

       
         
           Step 1
@@ -457,7 +442,7 @@ exports[`Stepper renders correctly with animation 1`] = `
         2
       
       
         
           Step 2
@@ -476,7 +461,7 @@ exports[`Stepper renders correctly with animation 1`] = `
         3
       
       
         
           Step 3
@@ -559,8 +544,7 @@ exports[`Stepper renders correctly with default props 1`] = `
   font-size: 16px;
 }
 
-.cache-1e0garm-StyledText-StyledText {
-  color: #3f4250;
+.cache-1soyd85-StyledText-StyledText {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -615,19 +599,6 @@ exports[`Stepper renders correctly with default props 1`] = `
   font-size: 16px;
 }
 
-.cache-xlb2zz-StyledText-StyledText {
-  color: #727683;
-  font-size: 14px;
-  font-family: Asap;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 20px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-top: 8px;
-}
-
 

@@ -640,7 +611,7 @@ exports[`Stepper renders correctly with default props 1`] = `
         1
       

       
         
           Step 1
@@ -659,7 +630,7 @@ exports[`Stepper renders correctly with default props 1`] = `
         2
       
       
         
           Step 2
@@ -678,7 +649,7 @@ exports[`Stepper renders correctly with default props 1`] = `
         3
       
       
         
           Step 3
@@ -770,8 +741,7 @@ exports[`Stepper renders correctly with selected prop 1`] = `
   min-height: 50%;
 }
 
-.cache-1e0garm-StyledText-StyledText {
-  color: #3f4250;
+.cache-1soyd85-StyledText-StyledText {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -870,19 +840,6 @@ exports[`Stepper renders correctly with selected prop 1`] = `
   font-size: 16px;
 }
 
-.cache-xlb2zz-StyledText-StyledText {
-  color: #727683;
-  font-size: 14px;
-  font-family: Asap;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 20px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-top: 8px;
-}
-
 

@@ -902,7 +859,7 @@ exports[`Stepper renders correctly with selected prop 1`] = `
         
       

       
         
           Step 1
@@ -921,7 +878,7 @@ exports[`Stepper renders correctly with selected prop 1`] = `
         2
       
       
         
           Step 2
@@ -940,7 +897,7 @@ exports[`Stepper renders correctly with selected prop 1`] = `
         3
       
       
         
           Step 3
diff --git a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
index 6de79a78a5..7736520f9d 100644
--- a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -966,8 +966,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
   filter: grayscale(1) opacity(50%);
 }
 
-.cache-137fywg-StyledText-StyledSpan-StyledBadge {
-  color: #3f4250;
+.cache-1j5fucp-StyledText-StyledSpan-StyledBadge {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -1006,8 +1005,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
   margin-left: 8px;
 }
 
-.cache-wvxa5r-StyledText-StyledSpan-StyledBadge {
-  color: #3f4250;
+.cache-7ufp81-StyledText-StyledSpan-StyledBadge {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -1276,7 +1274,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
     >
       First
       
         2
       
@@ -1312,7 +1310,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
     >
       Counter
       
         12
       
@@ -1328,7 +1326,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
     >
       Counter no items
       
         0
       
@@ -1343,7 +1341,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
     >
       Conter and badge
       
         12
       
@@ -1711,8 +1709,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
   filter: grayscale(1) opacity(50%);
 }
 
-.cache-137fywg-StyledText-StyledSpan-StyledBadge {
-  color: #3f4250;
+.cache-1j5fucp-StyledText-StyledSpan-StyledBadge {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -1751,8 +1748,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
   margin-left: 8px;
 }
 
-.cache-wvxa5r-StyledText-StyledSpan-StyledBadge {
-  color: #3f4250;
+.cache-7ufp81-StyledText-StyledSpan-StyledBadge {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -1933,7 +1929,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
           >
             First
             
               2
             
@@ -1969,7 +1965,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
           >
             Counter
             
               12
             
@@ -1985,7 +1981,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
           >
             Counter no items
             
               0
             
@@ -2000,7 +1996,7 @@ exports[`Tabs renders correctly with Tabs with prop 1`] = `
           >
             Conter and badge
             
               12
             
diff --git a/packages/ui/src/components/Text/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Text/__tests__/__snapshots__/index.test.tsx.snap
index 55fd1f565e..5f350bb589 100644
--- a/packages/ui/src/components/Text/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Text/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,8 +2,7 @@
 
 exports[`Text renders correctly with dir 1`] = `
 
-  .cache-1a550u1-StyledText {
-  color: #3f4250;
+  .cache-2nzsas-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -21,7 +20,7 @@ exports[`Text renders correctly with dir 1`] = `
     style="margin-bottom: 16px; margin-top: 8px; width: 500px;"
   >
     

       This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -32,8 +31,7 @@ exports[`Text renders correctly with dir 1`] = `
 
 exports[`Text renders correctly with htmlFor 1`] = `
 
-  .cache-1cozjuw-StyledText {
-  color: #3f4250;
+  .cache-1ku5ov3-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -48,7 +46,7 @@ exports[`Text renders correctly with htmlFor 1`] = `
     style="margin-bottom: 16px; margin-top: 8px; width: 500px;"
   >
     

       This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -59,8 +57,7 @@ exports[`Text renders correctly with htmlFor 1`] = `
 
 exports[`Text renders correctly with placement 1`] = `
 
-  .cache-1dq3yrz-StyledText {
-  color: #3f4250;
+  .cache-csp97-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -76,7 +73,7 @@ exports[`Text renders correctly with placement 1`] = `
     style="margin-bottom: 16px; margin-top: 8px; width: 500px;"
   >
     

       This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     

@@ -86,8 +83,7 @@ exports[`Text renders correctly with placement 1`] = `
 
 exports[`Text renders correctly with tooltip 1`] = `
 
-  .cache-1a550u1-StyledText {
-  color: #3f4250;
+  .cache-2nzsas-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -105,7 +101,7 @@ exports[`Text renders correctly with tooltip 1`] = `
     style="margin-bottom: 16px; margin-top: 8px; width: 500px;"
   >
     

       This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     

@@ -115,8 +111,7 @@ exports[`Text renders correctly with tooltip 1`] = `
 
 exports[`Text renders correctly with type="body" 1`] = `
 
-  .cache-1cozjuw-StyledText {
-  color: #3f4250;
+  .cache-1ku5ov3-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -128,7 +123,7 @@ exports[`Text renders correctly with type="body" 1`] = `
 }
 
 

     body
   

@@ -137,8 +132,7 @@ exports[`Text renders correctly with type="body" 1`] = `
 
 exports[`Text renders correctly with type="bodySmall" 1`] = `
 
-  .cache-3yrr08-StyledText {
-  color: #3f4250;
+  .cache-n5sgp8-StyledText {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -150,7 +144,7 @@ exports[`Text renders correctly with type="bodySmall" 1`] = `
 }
 
 

     bodySmall
   

@@ -159,8 +153,7 @@ exports[`Text renders correctly with type="bodySmall" 1`] = `
 
 exports[`Text renders correctly with type="bodySmallStrong" 1`] = `
 
-  .cache-q12lm2-StyledText {
-  color: #3f4250;
+  .cache-1rc8nuc-StyledText {
   font-size: 14px;
   font-family: Asap;
   font-weight: 500;
@@ -172,7 +165,7 @@ exports[`Text renders correctly with type="bodySmallStrong" 1`] = `
 }
 
 

     bodySmallStrong
   

@@ -181,8 +174,7 @@ exports[`Text renders correctly with type="bodySmallStrong" 1`] = `
 
 exports[`Text renders correctly with type="bodySmallStronger" 1`] = `
 
-  .cache-1tbjykd-StyledText {
-  color: #3f4250;
+  .cache-1ry8ffz-StyledText {
   font-size: 14px;
   font-family: Asap;
   font-weight: 600;
@@ -194,7 +186,7 @@ exports[`Text renders correctly with type="bodySmallStronger" 1`] = `
 }
 
 

     bodySmallStronger
   

@@ -203,8 +195,7 @@ exports[`Text renders correctly with type="bodySmallStronger" 1`] = `
 
 exports[`Text renders correctly with type="bodyStrong" 1`] = `
 
-  .cache-vjvakd-StyledText {
-  color: #3f4250;
+  .cache-1fjokpj-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -216,7 +207,7 @@ exports[`Text renders correctly with type="bodyStrong" 1`] = `
 }
 
 

     bodyStrong
   

@@ -225,8 +216,7 @@ exports[`Text renders correctly with type="bodyStrong" 1`] = `
 
 exports[`Text renders correctly with type="bodyStronger" 1`] = `
 
-  .cache-mtzm4a-StyledText {
-  color: #3f4250;
+  .cache-7s2z53-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 600;
@@ -238,7 +228,7 @@ exports[`Text renders correctly with type="bodyStronger" 1`] = `
 }
 
 

     bodyStronger
   

@@ -247,8 +237,7 @@ exports[`Text renders correctly with type="bodyStronger" 1`] = `
 
 exports[`Text renders correctly with type="caption" 1`] = `
 
-  .cache-1n9bdhb-StyledText {
-  color: #3f4250;
+  .cache-a4hls9-StyledText {
   font-size: 12px;
   font-family: Asap;
   font-weight: 500;
@@ -260,7 +249,7 @@ exports[`Text renders correctly with type="caption" 1`] = `
 }
 
 

     caption
   

@@ -269,8 +258,7 @@ exports[`Text renders correctly with type="caption" 1`] = `
 
 exports[`Text renders correctly with type="captionSmall" 1`] = `
 
-  .cache-1jwst9u-StyledText {
-  color: #3f4250;
+  .cache-1j8a2me-StyledText {
   font-size: 10px;
   font-family: Asap;
   font-weight: 500;
@@ -282,7 +270,7 @@ exports[`Text renders correctly with type="captionSmall" 1`] = `
 }
 
 

     captionSmall
   

@@ -291,8 +279,7 @@ exports[`Text renders correctly with type="captionSmall" 1`] = `
 
 exports[`Text renders correctly with type="code" 1`] = `
 
-  .cache-dm68rn-StyledText {
-  color: #3f4250;
+  .cache-imijze-StyledText {
   font-size: 14px;
   font-family: JetBrains;
   font-weight: 400;
@@ -304,7 +291,7 @@ exports[`Text renders correctly with type="code" 1`] = `
 }
 
 

     code
   

@@ -313,8 +300,7 @@ exports[`Text renders correctly with type="code" 1`] = `
 
 exports[`Text renders correctly with type="heading" 1`] = `
 
-  .cache-177neqt-StyledText {
-  color: #3f4250;
+  .cache-gm8eja-StyledText {
   font-size: 25px;
   font-family: Asap;
   font-weight: 400;
@@ -326,7 +312,7 @@ exports[`Text renders correctly with type="heading" 1`] = `
 }
 
 

     heading
   

@@ -335,8 +321,7 @@ exports[`Text renders correctly with type="heading" 1`] = `
 
 exports[`Text renders correctly with type="headingLarge" 1`] = `
 
-  .cache-tet9cc-StyledText {
-  color: #3f4250;
+  .cache-if8msg-StyledText {
   font-size: 35px;
   font-family: Asap;
   font-weight: 400;
@@ -348,7 +333,7 @@ exports[`Text renders correctly with type="headingLarge" 1`] = `
 }
 
 

     headingLarge
   

@@ -357,8 +342,7 @@ exports[`Text renders correctly with type="headingLarge" 1`] = `
 
 exports[`Text renders correctly with type="headingSmall" 1`] = `
 
-  .cache-xsaqrl-StyledText {
-  color: #3f4250;
+  .cache-1foondh-StyledText {
   font-size: 21px;
   font-family: Asap;
   font-weight: 500;
@@ -370,7 +354,7 @@ exports[`Text renders correctly with type="headingSmall" 1`] = `
 }
 
 

     headingSmall
   

@@ -379,8 +363,7 @@ exports[`Text renders correctly with type="headingSmall" 1`] = `
 
 exports[`Text with disabled 1`] = `
 
-  .cache-14bkb4-StyledText {
-  color: #b5b7bd;
+  .cache-1ku5ov3-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -392,7 +375,7 @@ exports[`Text with disabled 1`] = `
 }
 
 

     Lorem Ipsum
   

@@ -401,8 +384,7 @@ exports[`Text with disabled 1`] = `
 
 exports[`Text with italic 1`] = `
 
-  .cache-1ej6qvw-StyledText {
-  color: #3f4250;
+  .cache-32bkwo-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -415,7 +397,7 @@ exports[`Text with italic 1`] = `
 }
 
 

     Lorem Ipsum
   

@@ -424,8 +406,7 @@ exports[`Text with italic 1`] = `
 
 exports[`Text with multiple nested chidldren renders correctly 1`] = `
 
-  .cache-1cozjuw-StyledText {
-  color: #3f4250;
+  .cache-1ku5ov3-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -436,8 +417,7 @@ exports[`Text with multiple nested chidldren renders correctly 1`] = `
   text-decoration: none;
 }
 
-.cache-177neqt-StyledText {
-  color: #3f4250;
+.cache-gm8eja-StyledText {
   font-size: 25px;
   font-family: Asap;
   font-weight: 400;
@@ -449,14 +429,14 @@ exports[`Text with multiple nested chidldren renders correctly 1`] = `
 }
 
 

     Lorem
     
       Ipsum
     
     
       
         Dolor
@@ -491,8 +471,7 @@ exports[`Text with prominence stronger on non neutral 1`] = `
 
 exports[`Text with underline 1`] = `
 
-  .cache-j6vt80-StyledText {
-  color: #3f4250;
+  .cache-17upp17-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 400;
@@ -506,7 +485,7 @@ exports[`Text with underline 1`] = `
 }
 
 

     Lorem Ipsum
   

diff --git a/packages/ui/src/components/Text/index.tsx b/packages/ui/src/components/Text/index.tsx
index b0a089f0cb..9dabc3622c 100644
--- a/packages/ui/src/components/Text/index.tsx
+++ b/packages/ui/src/components/Text/index.tsx
@@ -39,7 +39,7 @@ const generateStyles = ({
   prominence: ProminenceProps
   theme: Theme
   variant: TextVariant
-  sentiment: Color
+  sentiment?: Color
   oneLine: boolean
   disabled: boolean
   italic: boolean
@@ -51,13 +51,14 @@ const generateStyles = ({
       ? capitalize(PROMINENCES.default)
       : capitalize(PROMINENCES[prominence])
 
-  const themeColor = theme.colors[sentiment]
+  const themeColor = sentiment ? theme.colors[sentiment] : undefined
   const text = `text${definedProminence}${
     disabled ? 'Disabled' : ''
   }` as keyof typeof themeColor
+  const textColor = sentiment ? theme.colors[sentiment][text] : undefined
 
   return `
-    color: ${theme.colors[sentiment][text]};
+    ${sentiment ? `color: ${textColor};` : ''}
 
     font-size: ${theme.typography[variant].fontSize};
     font-family: ${theme.typography[variant].fontFamily};
@@ -117,7 +118,7 @@ const StyledText = styled('div', {
     ].includes(prop),
 })<{
   placement?: PlacementProps
-  sentiment: Color
+  sentiment?: Color
   prominence: ProminenceProps
   variant: TextVariant
   oneLine: boolean
@@ -148,7 +149,7 @@ export const Text = ({
   htmlFor,
   'data-testid': dataTestId,
 }: TextProps) => {
-  const computedSentiment = sentiment ?? color ?? 'neutral'
+  const computedSentiment = sentiment ?? color
 
   const [isTruncated, setIsTruncated] = useState(false)
   const elementRef = useRef(null)
diff --git a/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap
index b2b1dfae9a..b310bd289e 100644
--- a/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -2903,8 +2903,7 @@ exports[`TextInput should render correctly with multiple right components 1`] =
   min-height: 20px;
 }
 
-.cache-1uooiep-StyledText-UnitLabel {
-  color: #727683;
+.cache-pif1mo-StyledText-UnitLabel {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -3004,7 +3003,7 @@ exports[`TextInput should render correctly with multiple right components 1`] =
             />
           
           

             px
           

@@ -3690,8 +3689,7 @@ exports[`TextInput should render correctly with unit is px 1`] = `
   min-width: 24px;
 }
 
-.cache-1uooiep-StyledText-UnitLabel {
-  color: #727683;
+.cache-pif1mo-StyledText-UnitLabel {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -3748,7 +3746,7 @@ exports[`TextInput should render correctly with unit is px 1`] = `
           class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           

             px
           

@@ -3927,8 +3925,7 @@ exports[`TextInput should render correctly with unit is px and required 1`] = `
   min-width: 24px;
 }
 
-.cache-1uooiep-StyledText-UnitLabel {
-  color: #727683;
+.cache-pif1mo-StyledText-UnitLabel {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -3993,7 +3990,7 @@ exports[`TextInput should render correctly with unit is px and required 1`] = `
           class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           

             px
           

@@ -6656,8 +6653,7 @@ exports[`TextInput should render unit with required 1`] = `
   min-width: 24px;
 }
 
-.cache-1uooiep-StyledText-UnitLabel {
-  color: #727683;
+.cache-pif1mo-StyledText-UnitLabel {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -6722,7 +6718,7 @@ exports[`TextInput should render unit with required 1`] = `
           class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           

             px
           

diff --git a/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap
index 93cfc30395..f5a5e9f367 100644
--- a/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -1569,8 +1569,7 @@ exports[`Toggle renders correctly with helper 1`] = `
   justify-content: normal;
 }
 
-.cache-5q2bke-StyledText {
-  color: #727683;
+.cache-n5sgp8-StyledText {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -1686,7 +1685,7 @@ exports[`Toggle renders correctly with helper 1`] = `
         This is a label
       

       

         This is a helper
       

diff --git a/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
index 5b1a769884..dfc976f186 100644
--- a/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -54,8 +54,7 @@ exports[`ToggleGroup renders correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-vjvakd-StyledText {
-  color: #3f4250;
+.cache-1fjokpj-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -256,7 +255,7 @@ exports[`ToggleGroup renders correctly 1`] = `
         class="cache-oey408-Stack ehpbis70"
       >
         
           Label 
         
@@ -380,8 +379,7 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-vjvakd-StyledText {
-  color: #3f4250;
+.cache-1fjokpj-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -582,7 +580,7 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
         class="cache-oey408-Stack ehpbis70"
       >
         
           Label 
         
@@ -706,8 +704,7 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-vjvakd-StyledText {
-  color: #3f4250;
+.cache-1fjokpj-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -920,7 +917,7 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
         class="cache-oey408-Stack ehpbis70"
       >
         
           Label 
         
@@ -1049,8 +1046,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-vjvakd-StyledText {
-  color: #3f4250;
+.cache-1fjokpj-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -1241,8 +1237,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
   cursor: not-allowed;
 }
 
-.cache-5q2bke-StyledText {
-  color: #727683;
+.cache-n5sgp8-StyledText {
   font-size: 14px;
   font-family: Asap;
   font-weight: 400;
@@ -1263,7 +1258,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
         class="cache-oey408-Stack ehpbis70"
       >
         
           Label 
         
@@ -1330,7 +1325,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
       

     
     

       Helper content
     

@@ -1392,8 +1387,7 @@ exports[`ToggleGroup renders correctly with required prop 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-vjvakd-StyledText {
-  color: #3f4250;
+.cache-1fjokpj-StyledText {
   font-size: 16px;
   font-family: Asap;
   font-weight: 500;
@@ -1604,7 +1598,7 @@ exports[`ToggleGroup renders correctly with required prop 1`] = `
         class="cache-oey408-Stack ehpbis70"
       >
         
           Label