scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: design system box-shadows

Browse Source
This commit is contained in:
Michael Zetterberg
2025-03-31 07:23:21 +02:00
parent ebaea78fb3
commit effcc29f3a
4 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/design-system/generate/generate.ts
View File

@@ -179,7 +179,7 @@ json.collections.forEach((collection) => {
case 'DROP_SHADOW': {
const { r, g, b, a } = effect.color
const { x, y } = effect.offset
const value = `${x} ${y} ${effect.radius} ${effect.spread} rgba(${r}, ${g}, ${b}, ${a})`
const value = `${x}px ${y}px ${effect.radius}px ${effect.spread}px rgba(${r}, ${g}, ${b}, ${a})`
const token = `BoxShadow-${variable.name}`
const theme = themes.get(FALLBACK_THEME)

8
packages/design-system/lib/styles/base.css
View File

@@ -5,10 +5,10 @@
--Border-width-md: 2px;
--Border-width-none: 0px;
--Border-width-sm: 1px;
--BoxShadow-Level-1: 0 0 2 1 rgba(0, 0, 0, 0.1);
--BoxShadow-Level-2: 0 0 4 2 rgba(0, 0, 0, 0.1);
--BoxShadow-Level-3: 0 0 8 3 rgba(0, 0, 0, 0.1);
--BoxShadow-Level-4: 0 0 14 6 rgba(0, 0, 0, 0.1);
--BoxShadow-Level-1: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
--BoxShadow-Level-2: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
--BoxShadow-Level-3: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
--BoxShadow-Level-4: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
--Breakpoints-max-width: 767px;
--Breakpoints-min-width: 320px;
--Columns-Column: 4px;

8
packages/design-system/lib/styles/base.js
View File

@@ -104,8 +104,8 @@ export const theme = {
'Text size/3xs': 16,
'Text size/2xs': 16,
'Text size/lg': 24,
'BoxShadow-Level 1': '0 0 2 1 rgba(0, 0, 0, 0.1)',
'BoxShadow-Level 2': '0 0 4 2 rgba(0, 0, 0, 0.1)',
'BoxShadow-Level 3': '0 0 8 3 rgba(0, 0, 0, 0.1)',
'BoxShadow-Level 4': '0 0 14 6 rgba(0, 0, 0, 0.1)',
'BoxShadow-Level 1': '0px 0px 2px 1px rgba(0, 0, 0, 0.1)',
'BoxShadow-Level 2': '0px 0px 4px 2px rgba(0, 0, 0, 0.1)',
'BoxShadow-Level 3': '0px 0px 8px 3px rgba(0, 0, 0, 0.1)',
'BoxShadow-Level 4': '0px 0px 14px 6px rgba(0, 0, 0, 0.1)',
}

8
packages/design-system/lib/tokens/index.ts
View File

@@ -106,10 +106,10 @@ export const base = {
'Text size/3xs': { resolved: 16, alias: 'Size/300-16' },
'Text size/2xs': { resolved: 16, alias: 'Size/300-16' },
'Text size/lg': { resolved: 24, alias: 'Size/500-24' },
'BoxShadow-Level 1': { resolved: '0 0 2 1 rgba(0, 0, 0, 0.1)' },
'BoxShadow-Level 2': { resolved: '0 0 4 2 rgba(0, 0, 0, 0.1)' },
'BoxShadow-Level 3': { resolved: '0 0 8 3 rgba(0, 0, 0, 0.1)' },
'BoxShadow-Level 4': { resolved: '0 0 14 6 rgba(0, 0, 0, 0.1)' },
'BoxShadow-Level 1': { resolved: '0px 0px 2px 1px rgba(0, 0, 0, 0.1)' },
'BoxShadow-Level 2': { resolved: '0px 0px 4px 2px rgba(0, 0, 0, 0.1)' },
'BoxShadow-Level 3': { resolved: '0px 0px 8px 3px rgba(0, 0, 0, 0.1)' },
'BoxShadow-Level 4': { resolved: '0px 0px 14px 6px rgba(0, 0, 0, 0.1)' },
} as const
export const scandic = {
'Scandic/Grey/00': { resolved: '#F9F6F4' },