Skip to content

Commit

Permalink
again
Browse files Browse the repository at this point in the history
  • Loading branch information
@mimarz
mimarz committed Aug 26, 2024
1 parent f84de70 commit e84089b
Show file tree
Hide file tree
Showing 8 changed files with 22 additions and 205 deletions.
4 changes: 4 additions & 0 deletions apps/_components/src/CodeSnippet/CodeSnippet.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
height: fit-content;
}

.codeSnippet > pre {
padding-right: var(--ds-spacing-11) !important;
}

.copyButton {
position: absolute;
top: var(--ds-spacing-2);
Expand Down
4 changes: 2 additions & 2 deletions apps/_components/src/CodeSnippet/CodeSnippet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const plugins = [
];

type CodeSnippetProps = {
language?: 'css' | 'html' | 'ts' | 'markdown' | 'js' | 'json';
language?: 'css' | 'html' | 'ts' | 'markdown' | 'js' | 'json' | 'sh';
children?: string;
};

Expand Down Expand Up @@ -85,7 +85,7 @@ const CodeSnippet = ({
</Tooltip>
<SyntaxHighlighter
style={nightOwl}
language='jsx'
language={language}
customStyle={{
fontSize: '15px',
margin: 0,
Expand Down
197 changes: 5 additions & 192 deletions apps/theme/components/TokenModal/TokenModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,9 @@ import {
Tabs,
Tooltip,
} from '@digdir/designsystemet-react';
import type { ColorInfo, ThemeColors } from '@digdir/designsystemet/color';
import { generateScaleForColor } from '@digdir/designsystemet/color';
import { ArrowForwardIcon } from '@navikt/aksel-icons';
import { CodeSnippet } from '@repo/components';
import { useEffect, useRef, useState } from 'react';

import { Settings } from '../../settings';
import type { modeType } from '../../types';
import { useRef, useState } from 'react';

import classes from './TokenModal.module.css';

Expand All @@ -37,114 +32,10 @@ export const TokenModal = ({
borderRadius,
}: TokenModalProps) => {
const modalRef = useRef<HTMLDialogElement>(null);
const [JSONTheme, setJSONTheme] = useState('');
const [css, setCss] = useState(
':root { --color-1: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; }',
);
const [toolTipText, setToolTipText] = useState('Kopier nettaddresse');
const [showGlobals, setShowGlobals] = useState(false);

const generateJsonForColor = (colorArray: ColorInfo[]) => {
const obj: { [key: string]: { value: string; type: string } } = {};
for (let i = 0; i < colorArray.length; i++) {
if (i === 13 && colorArray.length >= 14) {
obj['contrast-1'] = {
value: colorArray[i].hex,
type: 'color',
};
} else if (i === 14 && colorArray.length >= 15) {
obj['contrast-2'] = {
value: colorArray[i].hex,
type: 'color',
};
} else {
obj[i + 1] = { value: colorArray[i].hex, type: 'color' };
}
}
return obj;
};

const genereateGlobalsJson = (theme: modeType) => {
const blueScale = generateScaleForColor(Settings.blueBaseColor, theme);
const greenScale = generateScaleForColor(Settings.greenBaseColor, theme);
const orangeScale = generateScaleForColor(Settings.orangeBaseColor, theme);
const purpleScale = generateScaleForColor(Settings.purpleBaseColor, theme);
const redScale = generateScaleForColor(Settings.redBaseColor, theme);
const yellowScale = generateScaleForColor(Settings.yellowBaseColor, theme);

const obj = {
global: {
blue: generateJsonForColor(blueScale),
green: generateJsonForColor(greenScale),
orange: generateJsonForColor(orangeScale),
purple: generateJsonForColor(purpleScale),
red: generateJsonForColor(redScale),
yellow: generateJsonForColor(yellowScale),
},
};

const json = JSON.stringify(obj, null, '\t');
setJSONTheme(json);
};

const generateThemeJson = (theme: modeType) => {
const accentColors = generateScaleForColor(accentColor, theme);
const neutralColors = generateScaleForColor(neutralColor, theme);
const brand1Colors = generateScaleForColor(brand1Color, theme);
const brand2Colors = generateScaleForColor(brand2Color, theme);
const brand3Colors = generateScaleForColor(brand3Color, theme);

const obj = {
theme: {
accent: generateJsonForColor(accentColors),
neutral: generateJsonForColor(neutralColors),
brand1: generateJsonForColor(brand1Colors),
brand2: generateJsonForColor(brand2Colors),
brand3: generateJsonForColor(brand3Colors),
},
};

const json = JSON.stringify(obj, null, '\t');
setJSONTheme(json);
};

const generateCSSVars = (theme: modeType) => {
const accentColors = generateScaleForColor(accentColor, theme);
const neutralColors = generateScaleForColor(neutralColor, theme);
const brand1Colors = generateScaleForColor(brand1Color, theme);
const brand2Colors = generateScaleForColor(brand2Color, theme);
const brand3Colors = generateScaleForColor(brand3Color, theme);

const obj = {
theme: {
accent: generateJsonForColor(accentColors),
neutral: generateJsonForColor(neutralColors),
brand1: generateJsonForColor(brand1Colors),
brand2: generateJsonForColor(brand2Colors),
brand3: generateJsonForColor(brand3Colors),
},
};

let CSS = '';

if (theme === 'light') {
CSS = ':root, [data-ds-theme="light"] {';
} else if (theme === 'dark') {
CSS = '[data-ds-theme="dark"] {';
} else {
CSS = '[data-ds-theme="contrast"] {';
}

CSS += `--ds-border-radius-base: ${borderRadius};`;
const [toolTipText, setToolTipText] = useState('Kopier nettaddresse');

for (const key in obj.theme) {
for (const color in obj.theme[key as ThemeColors]) {
CSS += `--ds-color-${key}-${color}: ${obj.theme[key as ThemeColors][color].value};`;
}
}
CSS += '}';
return CSS;
};
const cliSnippet = `npx @digdir/designsystemet tokens create --accent "${accentColor}" --neutral "${neutralColor}" --brand1 "${brand1Color}" --brand2 "${brand2Color}" --brand3 "${brand3Color}"`;

const onButtonClick = () => {
setToolTipText('Kopiert!');
Expand All @@ -153,23 +44,10 @@ export const TokenModal = ({
});
};

useEffect(() => {
generateThemeJson('light');
const lightCSS = generateCSSVars('light');
const darkCSS = generateCSSVars('dark');
const contrastCSS = generateCSSVars('contrast');
setCss(lightCSS + darkCSS + contrastCSS);
}, []);

return (
<Modal.Root>
<Modal.Trigger
onClick={() => {
generateThemeJson('light');
const lightCSS = generateCSSVars('light');
const darkCSS = generateCSSVars('dark');
const contrastCSS = generateCSSVars('contrast');
setCss(lightCSS + darkCSS + contrastCSS);
return modalRef.current?.showModal();
}}
>
Expand Down Expand Up @@ -203,73 +81,8 @@ export const TokenModal = ({
</Modal.Header>
<Modal.Content className={classes.modalContent}>
<div className={classes.content}>
<button
tabIndex={-1}
className={classes.hiddenGlobalBtn}
onClick={() => setShowGlobals(!showGlobals)}
></button>
<div className={classes.column}>
<Heading className={classes.title} size='xs'>
Json til Figma
</Heading>
<div className={classes.tabs}>
<Tabs.Root defaultValue='value1' size='sm'>
<Tabs.List>
<Tabs.Tab
onClick={() => generateThemeJson('light')}
value='value1'
>
Light Mode
</Tabs.Tab>
<Tabs.Tab
onClick={() => generateThemeJson('dark')}
value='value2'
>
Dark Mode
</Tabs.Tab>
{showGlobals && (
<>
<Tabs.Tab
onClick={() => generateThemeJson('contrast')}
value='value3'
>
Contrast Mode
</Tabs.Tab>
<Tabs.Tab
onClick={() => genereateGlobalsJson('light')}
value='value4'
>
G:Light
</Tabs.Tab>
<Tabs.Tab
onClick={() => genereateGlobalsJson('dark')}
value='value5'
>
G:Dark
</Tabs.Tab>
<Tabs.Tab
onClick={() => genereateGlobalsJson('contrast')}
value='value6'
>
G:Contrast
</Tabs.Tab>
</>
)}
</Tabs.List>
</Tabs.Root>
</div>
<div className={classes.snippet}>
<CodeSnippet language='json'>{JSONTheme}</CodeSnippet>
</div>
</div>
<div className={classes.column}>
<Heading className={classes.title} size='xs'>
CSS variabler
</Heading>

<div className={classes.snippet}>
<CodeSnippet language='css'>{css}</CodeSnippet>
</div>
<div className={classes.snippet}>
<CodeSnippet language='js'>{cliSnippet}</CodeSnippet>
</div>
</div>
</Modal.Content>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@digdir/designsystemet",
"version": "0.1.0-next.24",
"version": "0.1.0-next.29",
"description": "CLI for Designsystemet",
"author": "Designsystemet team",
"repository": {
Expand Down
6 changes: 3 additions & 3 deletions packages/cli/src/colors/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export * from './utils';
export * from './theme';
export * from './types';
export * from './utils.js';
export * from './theme.js';
export * from './types.js';
4 changes: 2 additions & 2 deletions packages/cli/src/colors/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import type { CssColor } from '@adobe/leonardo-contrast-colors';
import { BackgroundColor, Color, Theme } from '@adobe/leonardo-contrast-colors';
import { Hsluv } from 'hsluv';

import type { ColorInfo, ColorMode, ColorNumber, ContrastMode, GlobalColors, ThemeColors, ThemeInfo } from './types';
import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from './utils';
import type { ColorInfo, ColorMode, ColorNumber, ContrastMode, GlobalColors, ThemeColors, ThemeInfo } from './types.js';
import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from './utils.js';

export const baseColors: Record<GlobalColors, CssColor> = {
blue: '#0A71C0',
Expand Down
8 changes: 4 additions & 4 deletions packages/cli/src/tokens/create/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import fs from 'node:fs/promises';
import path from 'node:path';
import type { CssColor } from '@adobe/leonardo-contrast-colors';
import * as R from 'ramda';
import { baseColors, generateScaleForColor } from '../../colors';
import type { ColorInfo, ColorMode, ThemeColors } from '../../colors';
import generateMetadataJson from '../../init/generateMetadataJson';
import generateThemesJson from '../../init/generateThemesJson';
import { baseColors, generateScaleForColor } from '../../colors/index.js';
import type { ColorInfo, ColorMode, ThemeColors } from '../../colors/index.js';
import generateMetadataJson from '../../init/generateMetadataJson.js';
import generateThemesJson from '../../init/generateThemesJson.js';

type Colors = Record<ThemeColors, CssColor>;
type Typography = Record<string, string>;
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/src/tokens/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { createTokens } from './create/index';
export { createTokens } from './create/index.js';

0 comments on commit e84089b

Please sign in to comment.