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.

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

chore: ⬆️ Upgrade @tokens-studio/sd-transforms to 1.2.2 #2236

Merged
merged 3 commits into from
Aug 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Skygger kan hjelpe svaksynte til å identifisere komponenter. Bruk av skygger og

Vi har ulike styrker på skyggene, fra xsmall til xlarge. De ulike styrkene brukes for å antyde høyden til overflaten. Overflater i høyere høyder har større skygger, mens de på lavere høyder bør ha mindre skygger. Skygger skal skape et hierarki slik at det som ligger over eller under noe annet kommer tydeligere frem.

<TokenList type='boxShadow' />
<TokenList type='shadow' />

### Eksempel

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,10 @@ Størrelser (`sizing`) brukes til å definere bredde og høyde på elementer.
Avstand (`spacing`) brukes til å sette marging og padding. Settet med avstander som er definert i tokens gir oss mulighet til å definere verdier for _"Auto Layout"_ i Figma og sikrer dermed konsistent design på tvers av grensesnitt.

<TokenList
type='sizing'
type='dimension'
hideValue={true}
/>

<TokenList
type='spacing'
hideValue={true}
/>

## Men hvorfor må vi ha både `sizing` og `spacing` når de er helt like?

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.bar {
height: 36px;
width: 72px;
background-color: var(--ds-color-accent-base-default);
}
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
const TokenBorderRadius = () => {
return (
<div>
dfsdfsd
<div>dsaf</div>
</div>
);
import classes from './TokenBorderRadius.module.css';

const TokenBorderRadius = ({ value }: { value: string }) => {
return <div className={classes.bar} style={{ borderRadius: value }}></div>;
};

export { TokenBorderRadius };
19 changes: 14 additions & 5 deletions apps/storefront/components/Tokens/TokenList/TokenList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,11 @@ import { TokenFontSize } from '../TokenFontSize/TokenFontSize';
import { TokenShadow } from '../TokenShadow/TokenShadow';
import { TokenSize } from '../TokenSize/TokenSize';

import { TokenBorderRadius } from '../TokenBorderRadius/TokenBorderRadius';
import classes from './TokenList.module.css';

type TokenListProps = {
type: 'color' | 'typography' | 'boxShadow' | 'sizing' | 'spacing';
type: 'color' | 'typography' | 'shadow' | 'dimension';
token?: string;
showThemePicker?: boolean;
showModeSwitcher: boolean;
Expand Down Expand Up @@ -52,7 +53,11 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
<Table.Body>
{tokens.map(([, tokens]) => {
return tokens.map((token) => {
const pxSize = `${parseFloat(token.value as string) * 16}px`;
const value = token.value as string;
const pxSize = /\b\d+px\b/.test(value)
? value
: `${parseFloat(value) * 16}px`;
const isBorderRadius = token.path.includes('border-radius');

return (
<Table.Row key={token.name}>
Expand All @@ -66,7 +71,11 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
<Table.Cell>{token.value}</Table.Cell>
<Table.Cell>{pxSize}</Table.Cell>
<Table.Cell>
<TokenSize value={pxSize} />
{isBorderRadius ? (
<TokenBorderRadius value={pxSize} />
) : (
<TokenSize value={pxSize} />
)}
</Table.Cell>
</Table.Row>
);
Expand Down Expand Up @@ -131,7 +140,7 @@ const TokenCard = ({ token, type, hideValue, ...rest }: TokenCardProps) => {
<div className={classes.preview}>
{type === 'color' && <TokenColor value={val} token={token} />}
{type === 'typography' && <TokenFontSize value={val} />}
{type === 'boxShadow' && <TokenShadow value={val} />}
{type === 'shadow' && <TokenShadow value={val} />}
</div>

<div className={classes.textContainer}>
Expand Down Expand Up @@ -252,7 +261,7 @@ const TokenList = ({
{sectionedTokens.map(([section, tokens]) => {
const tokens_ = tokens as [string, Token[]][];
const List = () => {
if (['spacing', 'sizing'].includes(type)) {
if (type === 'dimension') {
return <TokensTable tokens={tokens_} />;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@
height: 36px;
background-color: var(--ds-color-accent-base-default);
border-radius: 2px;
max-width: 300px;
}
Loading
Loading