Skip to content

Commit

Permalink
feat(styles): update style-dictionary tokens to figma refactor values
Browse files Browse the repository at this point in the history
  • Loading branch information
@masoudmanson
masoudmanson committed Feb 16, 2024
1 parent d112fc6 commit eb02c2b
Show file tree
Hide file tree
Showing 19 changed files with 2,169 additions and 832 deletions.
10 changes: 7 additions & 3 deletions .storybook/manager-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,15 @@
href="https://user-images.githubusercontent.com/927990/204130290-897628ee-e89a-4911-89df-0956c9edf940.png"
sizes="48x48"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
rel="stylesheet"
crossorigin="anonymous"
/>
<title>SDS Design System</title>
<style>
Expand Down
10 changes: 7 additions & 3 deletions .storybook/preview-head.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
rel="stylesheet"
crossorigin="anonymous"
/>
25 changes: 15 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,24 +93,24 @@ export const Title - styled(Typography)`

```ts
import { css, SerializedStyles } from "@emotion/react";
import { styled } from '@mui/material/styles';
import { styled } from "@mui/material/styles";
import { getColors, getCorners } from "@czi-sds/components";
export const Tag = styled("div")`
// This is a callback function that returns more CSS rules, but the only way
// to access the custom theme object
${(props) => {
// getColors() is a selector that picks out colors from the theme object
const colors = getColors(props);
// getSpaces() is a selector that picks out spacings from the theme object
const spacings = getSpaces(props);
${(props) => {
// getColors() is a selector that picks out colors from the theme object
const colors = getColors(props);
// getSpaces() is a selector that picks out spacings from the theme object
const spacings = getSpaces(props);

return `
return `
background-color: ${colors?.gray[500]};
padding-bottom: ${spacings?.m}px;
margin-bottom: ${spacings?.xxl}px;
`;
}}
}}
`;
```
Expand Down Expand Up @@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
```html
// installs the sds font from google fonts
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
rel="stylesheet"
/>
```
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,5 +174,6 @@
"packages/*"
]
},
"main": "index.js"
"main": "index.js",
"packageManager": "yarn@4.1.0"
}
25 changes: 15 additions & 10 deletions packages/components/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,24 +93,24 @@ export const Title - styled(Typography)`

```ts
import { css, SerializedStyles } from "@emotion/react";
import { styled } from '@mui/material/styles';
import { styled } from "@mui/material/styles";
import { getColors, getCorners } from "@czi-sds/components";
export const Tag = styled("div")`
// This is a callback function that returns more CSS rules, but the only way
// to access the custom theme object
${(props) => {
// getColors() is a selector that picks out colors from the theme object
const colors = getColors(props);
// getSpaces() is a selector that picks out spacings from the theme object
const spacings = getSpaces(props);
${(props) => {
// getColors() is a selector that picks out colors from the theme object
const colors = getColors(props);
// getSpaces() is a selector that picks out spacings from the theme object
const spacings = getSpaces(props);

return `
return `
background-color: ${colors?.gray[500]};
padding-bottom: ${spacings?.m}px;
margin-bottom: ${spacings?.xxl}px;
`;
}}
}}
`;
```
Expand Down Expand Up @@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
```html
// installs the sds font from google fonts
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
rel="stylesheet"
/>
```
Expand Down
25 changes: 15 additions & 10 deletions packages/components/docs/eng-how-to.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,24 +78,24 @@ export const Title - styled(Typography)`

```ts
import { css, SerializedStyles } from "@emotion/react";
import { styled } from '@mui/material/styles';
import { styled } from "@mui/material/styles";
import { getColors, getCorners } from "@czi-sds/components";
export const Tag = styled("div")`
// This is a callback function that returns more CSS rules, but the only way
// to access the custom theme object
${(props) => {
// getColors() is a selector that picks out colors from the theme object
const colors = getColors(props);
// getSpaces() is a selector that picks out spacings from the theme object
const spacings = getSpaces(props);
${(props) => {
// getColors() is a selector that picks out colors from the theme object
const colors = getColors(props);
// getSpaces() is a selector that picks out spacings from the theme object
const spacings = getSpaces(props);

return `
return `
background-color: ${colors?.gray[500]};
padding-bottom: ${spacings?.m}px;
margin-bottom: ${spacings?.xxl}px;
`;
}}
}}
`;
```
Expand Down Expand Up @@ -125,9 +125,14 @@ To use the default theme in your React application, complete the following:
```html
// installs the sds font from google fonts
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
rel="stylesheet"
/>
```
Expand Down
Loading

0 comments on commit eb02c2b

Please sign in to comment.