Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Breaking change] Derived tokens from tokens library #690

Merged
merged 8 commits into from
Feb 3, 2023
Merged

[Breaking change] Derived tokens from tokens library #690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c9f422d
Refactor gradients, shadows, focus, radius & transition styles to com…
riitasointi Aug 4, 2022
f1159f0
Update suomifi-design-tokens to version 4.1.0 (derived tokens)
riitasointi Aug 26, 2022
5bd886c
radius --> radiuses, focus --> focuses in newer component styles
riitasointi Jan 31, 2023
1ce0ed2
Update tokens to 4.2.0
riitasointi Jan 31, 2023
cd38a7c
Update snapshots
riitasointi Jan 31, 2023
1e7f62c
Update tokens to 5.0.0
riitasointi Feb 1, 2023
0b2f453
Update snapshots
riitasointi Feb 1, 2023
b2a1b24
Fix styleguidist themevalues.md page
riitasointi Feb 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions .styleguidist/themevalues.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

### Colors

Theme colors is of type _`ColorDesignTokens`_ and defines all the colors and gradients used in the components.
Theme category colors is of type _`ColorDesignTokens`_ and defines all the colors and gradients used in the components.

```js noeditor
import { SuomifiThemeConsumer } from '../src/core/theme';
Expand All @@ -17,7 +17,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps';

### Spacing

Theme spacing is of type _`SpacingDesignTokens`_ and defines external spacing used between more complex elements as well as some parts of internal spacing.
Theme category spacing is of type _`SpacingDesignTokens`_ and defines external spacing used between more complex elements as well as some parts of internal spacing.

```js noeditor
import { SuomifiThemeConsumer } from '../src/core/theme';
Expand All @@ -32,7 +32,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps';

### Typography

Theme typography is of type _`TypographyDesignTokens`_ and defines most typography styles used in the components.
Theme category typography is of type _`TypographyDesignTokens`_ and defines most typography styles used in the components.

```js noeditor
import { SuomifiThemeConsumer } from '../src/core/theme';
Expand All @@ -50,7 +50,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps';

### Gradients

Theme gradients is of type _`GradientDesignTokens`_ and defines all gradient colors used in the components. By default, gradients are based on color design tokens.
Theme category gradients is of type _`GradientDesignTokens`_ and defines all gradient colors used in the components. By default, gradients are based on color design tokens.

```js noeditor
import { SuomifiThemeConsumer } from '../src/core/theme';
Expand All @@ -65,37 +65,37 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps';

### Focus

Theme focus is of type _`FocusDesignTokens`_ and defines all focus styles used in the library. By default, focus styles are based on color, spacing and radius design tokens.
Theme category focuses is of type _`FocusDesignTokens`_ and defines all focus styles used in the library. By default, focus styles are based on color, spacing and radius design tokens.

```js noeditor
import { SuomifiThemeConsumer } from '../src/core/theme';
import { ThemeProps } from '../src/docs/Theme/ThemeProps';

<SuomifiThemeConsumer>
{({ suomifiTheme }) => (
<ThemeProps title="focus:" values={suomifiTheme.focus} />
<ThemeProps title="focus:" values={suomifiTheme.focuses} />
)}
</SuomifiThemeConsumer>;
```

### Radius

Theme focus is of type _`RadiusDesignTokens`_ and defines all focus styles used in the library.
Theme category radiuses is of type _`RadiusDesignTokens`_ and defines all radius styles used in the library.

```js noeditor
import { SuomifiThemeConsumer } from '../src/core/theme';
import { ThemeProps } from '../src/docs/Theme/ThemeProps';

<SuomifiThemeConsumer>
{({ suomifiTheme }) => (
<ThemeProps title="radius:" values={suomifiTheme.radius} />
<ThemeProps title="radius:" values={suomifiTheme.radiuses} />
)}
</SuomifiThemeConsumer>;
```

### Shadows

Theme focus is of type _`ShadowDesignTokens`_ and defines all shadow styles used in the library. By default, shadow styles are based on color design tokens.
Theme category shadows is of type _`ShadowDesignTokens`_ and defines all shadow styles used in the library. By default, shadow styles are based on color design tokens.

```js noeditor
import { SuomifiThemeConsumer } from '../src/core/theme';
Expand All @@ -110,7 +110,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps';

### Transitions

Theme focus is of type _`TransitionDesignTokens`_ and defines all shadow styles used in the library. By default, shadow styles are based on color design tokens.
Theme category transitions is of type _`TransitionDesignTokens`_ and defines the most commonly used transition styles used in the library.

```js noeditor
import { SuomifiThemeConsumer } from '../src/core/theme';
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@
"react-modal": "3.15.1",
"react-popper": "2.3.0",
"react-svg": "15.1.3",
"suomifi-design-tokens": "4.0.0",
"suomifi-design-tokens": "5.0.0",
"suomifi-icons": "6.3.0"
},
"peerDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions src/core/Alert/Alert/Alert.baseStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ export const baseStyles = (theme: SuomifiTheme) => css`
margin-right: ${theme.spacing.xs};
margin-bottom: ${theme.spacing.insetM};
border: 1px solid transparent;
border-radius: ${theme.radius.basic};
border-radius: ${theme.radiuses.basic};
white-space: nowrap;

&:focus-visible {
outline: 0;
position: relative;

&:after {
${theme.focus.absoluteFocus}
${theme.focuses.absoluteFocus}
}
}
&:active {
Expand Down
6 changes: 3 additions & 3 deletions src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ exports[`props children should match snapshot 1`] = `
}

.c1.fi-alert {
color: hsl(0,0%,16%);
color: hsl(0,0%,13%);
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
Expand Down Expand Up @@ -223,11 +223,11 @@ exports[`props children should match snapshot 1`] = `
}

.c1.fi-alert .fi-alert_style-wrapper .fi-alert_close-button:active {
background: linear-gradient(-180deg,hsl(202,7%,80%) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(-180deg,hsl(202,7%,80%) 0%,hsla(0,0%,100%,0) 100%);
}

.c1.fi-alert .fi-alert_style-wrapper .fi-alert_close-button:hover {
border-color: hsl(0,0%,16%);
border-color: hsl(0,0%,13%);
}

.c1.fi-alert .fi-alert_style-wrapper .fi-alert_close-button .fi-icon {
Expand Down
2 changes: 1 addition & 1 deletion src/core/Alert/InlineAlert/__snapshots__/InlineAlert.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ exports[`children should match snapshot 1`] = `
}

.c1.fi-inline-alert {
color: hsl(0,0%,16%);
color: hsl(0,0%,13%);
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/core/Block/__snapshots__/Block.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ exports[`calling render with the same component on the same container does not r
}

.c1 {
color: hsl(0,0%,16%);
color: hsl(0,0%,13%);
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
Expand Down
8 changes: 4 additions & 4 deletions src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ exports[`calling render with the same component on the same container does not r
}

.c1 {
color: hsl(0,0%,16%);
color: hsl(0,0%,13%);
display: block;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
Expand All @@ -170,14 +170,14 @@ exports[`calling render with the same component on the same container does not r
}

.c1 .fi-breadcrumb_list {
color: hsl(0,0%,16%);
color: hsl(0,0%,13%);
list-style: none;
margin: 0;
padding: 0;
}

.c1 .fi-breadcrumb_item {
color: hsl(0,0%,16%);
color: hsl(0,0%,13%);
list-style: none;
float: left;
}
Expand Down Expand Up @@ -218,9 +218,9 @@ exports[`calling render with the same component on the same container does not r
}

.c7.fi-link:focus {
outline: 0;
border-radius: 2px;
box-shadow: 0 0 0 2px hsl(196,77%,44%);
outline: 0;
}

.c7.fi-link:hover,
Expand Down
4 changes: 2 additions & 2 deletions src/core/Button/Button.baseStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const baseStyles = (theme: SuomifiTheme) => css`
min-height: 40px;
color: ${theme.colors.whiteBase};
background: ${theme.gradients.highlightBaseToHighlightDark1};
border-radius: ${theme.radius.basic};
border-radius: ${theme.radiuses.basic};
text-align: center;
text-shadow: ${theme.shadows.invertTextShadow};
cursor: pointer;
Expand All @@ -111,7 +111,7 @@ export const baseStyles = (theme: SuomifiTheme) => css`
position: relative;

&::after {
${theme.focus.absoluteFocus}
${theme.focuses.absoluteFocus}
}
}

Expand Down
Loading