Skip to content

Commit

Permalink
add dark switcher to storefront on tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
Barsnes committed Jul 4, 2024
1 parent cfbe6ce commit 6dbb1c5
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,5 @@ _farge - stryke - vekt_ <br/>
<TokenList
type='color'
showThemePicker={true}
showModeSwitcher={false}
showModeSwitcher={true}
/>
12 changes: 6 additions & 6 deletions apps/storefront/components/Tokens/TokenList/TokenList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import {
import { ClipboardButton } from '@digdir/components';

import { capitalizeString } from '../../../utils/StringHelpers';
import * as tokens from '../../../tokens';
import * as tokensLight from '../../../tokens/light';
import * as tokensDark from '../../../tokens/dark';
import { TokenColor } from '../TokenColor/TokenColor';
import { TokenFontSize } from '../TokenFontSize/TokenFontSize';
import { TokenShadow } from '../TokenShadow/TokenShadow';
Expand Down Expand Up @@ -185,6 +186,8 @@ const TokenList = ({
const [mode, setMode] = useState<'light' | 'dark'>('light');
const [cardColumns, setCardColumns] = useState<CardColumnType>(3);

const tokens = mode === 'light' ? tokensLight : tokensDark;

useEffect(() => {
setCardColumns(type === 'color' ? 3 : 2);
}, [type]);
Expand All @@ -207,10 +210,7 @@ const TokenList = ({
);

return (
<div
className={classes.tokens}
data-ds-color-mode={mode}
>
<div className={classes.tokens}>
<div className={classes.package}>
<Link href='https://www.npmjs.com/package/@digdir/designsystemet-theme'>
<img
Expand Down Expand Up @@ -247,7 +247,7 @@ const TokenList = ({
{showModeSwitcher && (
<DropdownMenu.Root>
<DropdownMenu.Trigger variant='secondary'>
Mode: {mode}
Mode: {capitalizeString(mode)}
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item onClick={() => setMode('light')}>
Expand Down
4 changes: 4 additions & 0 deletions apps/storefront/tokens/dark.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export * as digdir from './digdir/dark';
export * as tilsynet from './uutilsynet/dark';
export * as altinn from './altinn/dark';
export * as portal from './portal/dark';
File renamed without changes.

0 comments on commit 6dbb1c5

Please sign in to comment.