From 81a4651e6c5e72a8b07bf7bda09676c2272143f7 Mon Sep 17 00:00:00 2001 From: barsnes Date: Fri, 21 Jun 2024 09:54:48 +0200 Subject: [PATCH] add border radius support to theme --- apps/theme/app/page.tsx | 14 ++++++++++ .../ThemeToolbar/ThemeToolbar.module.css | 3 ++- .../components/ThemeToolbar/ThemeToolbar.tsx | 27 +++++++++++++++++-- apps/theme/store.ts | 4 +++ apps/theme/utils/tokenMapping.ts | 9 +++++++ packages/css/checkbox.css | 2 +- 6 files changed, 55 insertions(+), 4 deletions(-) diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx index adec18d1f7..488f7bc33e 100644 --- a/apps/theme/app/page.tsx +++ b/apps/theme/app/page.tsx @@ -40,11 +40,13 @@ export default function Home() { const brandOneTheme = useThemeStore((state) => state.brandOneTheme); const brandTwoTheme = useThemeStore((state) => state.brandTwoTheme); const brandThreeTheme = useThemeStore((state) => state.brandThreeTheme); + const borderRadius = useThemeStore((state) => state.borderRadius); const setAccentTheme = useThemeStore((state) => state.setAccentTheme); const setNeutralTheme = useThemeStore((state) => state.setNeutralTheme); const setBrandOneTheme = useThemeStore((state) => state.setBrandOneTheme); const setBrandTwoTheme = useThemeStore((state) => state.setBrandTwoTheme); const setBrandThreeTheme = useThemeStore((state) => state.setBrandThreeTheme); + const setBorderRadius = useThemeStore((state) => state.setBorderRadius); const selectedColor = useThemeStore((state) => state.selectedColor); @@ -118,6 +120,14 @@ export default function Home() { }; }); + /* Set border radius token when it changes */ + useEffect(() => { + const previewElem = document.getElementById('preview'); + if (previewElem) { + previewElem.style.setProperty('--ds-border-radius-base', borderRadius); + } + }, [borderRadius]); + /** * Check if the header should be sticky */ @@ -256,6 +266,10 @@ export default function Home() { onContrastModeChanged={(mode) => { setContrastMode(mode); }} + onBorderRadiusChanged={(radius) => { + setBorderRadius(radius); + }} + borderRadius={borderRadius} /> diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css b/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css index ad0d1c9500..ff7f7e8a59 100644 --- a/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css +++ b/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css @@ -2,8 +2,9 @@ display: flex; align-items: flex-end; justify-content: center; - gap: 32px; + gap: var(--ds-spacing-4); padding: 12px 0; + flex-wrap: wrap; } .pickersContainer { diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx index 6dd1225c47..28e730e836 100644 --- a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx +++ b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx @@ -1,7 +1,6 @@ import type { CssColor } from '@adobe/leonardo-contrast-colors'; import cl from 'clsx/lite'; import { NativeSelect } from '@digdir/designsystemet-react'; -import type { ChangeEvent } from 'react'; import type { ColorError, ColorType, @@ -20,19 +19,25 @@ type ThemeToolbarProps = { brand1Error: ColorError; brand2Error: ColorError; brand3Error: ColorError; + borderRadius: string; onColorChanged: (type: ColorType, color: CssColor) => void; onContrastModeChanged: (mode: 'aa' | 'aaa') => void; + onBorderRadiusChanged: (radius: string) => void; contrastMode: ContrastMode; }; +export const borderRadii = ['0', '0.25rem', '0.5rem', '0.75rem', '1rem']; + export const ThemeToolbar = ({ accentError, neutralError, brand1Error, brand2Error, brand3Error, + borderRadius, onColorChanged, onContrastModeChanged, + onBorderRadiusChanged, contrastMode, }: ThemeToolbarProps) => { const accentTheme = useThemeStore((state) => state.accentTheme); @@ -90,7 +95,7 @@ export const ThemeToolbar = ({ size='md' className={classes.contrastSelect} value={contrastMode} - onChange={(e: ChangeEvent) => { + onChange={(e) => { onContrastModeChanged(e.target.value as 'aa' | 'aaa'); }} > @@ -98,6 +103,24 @@ export const ThemeToolbar = ({ +
+ onBorderRadiusChanged(e.target.value)} + > + {borderRadii.map((radius) => ( + + ))} + +
void; selectedColor: { color: ColorInfo; type: ColorType }; setSelectedColor: (color: ColorInfo, type: ColorType) => void; + borderRadius: string; + setBorderRadius: (radius: string) => void; }; const defaultTheme = () => { @@ -67,6 +69,8 @@ export const useThemeStore = create( }, type: 'accent', }, + borderRadius: '0.25rem', + setBorderRadius: (radius) => set({ borderRadius: radius }), setSelectedColor: (color, type) => set({ selectedColor: { color: color, type: type } }), setAccentTheme: (theme, color) => set({ accentTheme: { theme, color } }), diff --git a/apps/theme/utils/tokenMapping.ts b/apps/theme/utils/tokenMapping.ts index 46b7c5b29a..c31adb4852 100644 --- a/apps/theme/utils/tokenMapping.ts +++ b/apps/theme/utils/tokenMapping.ts @@ -86,6 +86,15 @@ export const mapTokens = () => { setToken('--ds-color-focus-outer', 'var(--neutral-13)'); setToken('--ds-color-focus-inner', 'var(--neutral-1)'); + + setToken('--ds-border-radius-sm', 'calc(var(--ds-border-radius-base)*0.5)'); + setToken('--ds-border-radius-md', 'calc(var(--ds-border-radius-base)*1)'); + setToken('--ds-border-radius-lg', 'calc(var(--ds-border-radius-base)*2)'); + setToken('--ds-border-radius-xl', 'calc(var(--ds-border-radius-base)*3)'); + setToken('--ds-border-radius-2xl', 'calc(var(--ds-border-radius-base)*4)'); + setToken('--ds-border-radius-3xl', 'calc(var(--ds-border-radius-base)*6)'); + setToken('--ds-border-radius-4xl', 'calc(var(--ds-border-radius-base)*8)'); + setToken('--ds-border-radius-full', '624.9375rem'); }; const setToken = (token: string, color: string) => { diff --git a/packages/css/checkbox.css b/packages/css/checkbox.css index e78800ac2b..c6d4daacfd 100644 --- a/packages/css/checkbox.css +++ b/packages/css/checkbox.css @@ -29,7 +29,7 @@ cursor: pointer; box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color); background: var(--dsc-checkbox-background); - border-radius: var(--ds-border-radius-md); + border-radius: min(0.25rem, var(--ds-border-radius-md)); } .ds-checkbox__input::before {