Skip to content

Commit

Permalink
Add px units to shadow token values (#10796)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lgriffee @mrcthms
lgriffee authored and mrcthms committed Oct 12, 2023
1 parent 2ddcba5 commit 65a1429
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions polaris-tokens/src/themes/base/shadow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,84 +68,84 @@ export const shadow: {
value: 'none',
},
'shadow-100': {
value: '0 1px 0 0 rgba(26, 26, 26, 0.07)',
value: '0px 1px 0px 0px rgba(26, 26, 26, 0.07)',
},
'shadow-200': {
value: '0 3px 1px -1px rgba(26, 26, 26, 0.07)',
value: '0px 3px 1px -1px rgba(26, 26, 26, 0.07)',
},
'shadow-300': {
value: '0 4px 6px -2px rgba(26, 26, 26, 0.20)',
value: '0px 4px 6px -2px rgba(26, 26, 26, 0.20)',
},
'shadow-400': {
value: '0 8px 16px -4px rgba(26, 26, 26, 0.22)',
value: '0px 8px 16px -4px rgba(26, 26, 26, 0.22)',
},
'shadow-500': {
value: '0 12px 20px -8px rgba(26, 26, 26, 0.24)',
value: '0px 12px 20px -8px rgba(26, 26, 26, 0.24)',
},
'shadow-600': {
value: '0 20px 20px -8px rgba(26, 26, 26, 0.28)',
value: '0px 20px 20px -8px rgba(26, 26, 26, 0.28)',
},
'shadow-bevel-100': {
value:
'1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.5) inset',
},
'shadow-inset-100': {
value:
'0 1px 2px 0 rgba(26, 26, 26, 0.15) inset, 0 1px 1px 0 rgba(26, 26, 26, 0.15) inset',
'0px 1px 2px 0px rgba(26, 26, 26, 0.15) inset, 0px 1px 1px 0px rgba(26, 26, 26, 0.15) inset',
},
'shadow-inset-200': {
value:
'0 2px 1px 0 rgba(26, 26, 26, 0.20) inset, 1px 0 1px 0 rgba(26, 26, 26, 0.12) inset, -1px 0 1px 0 rgba(26, 26, 26, 0.12) inset',
'0px 2px 1px 0px rgba(26, 26, 26, 0.20) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset, -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset',
},
'shadow-button': {
value:
'0 1px 0 0 #E3E3E3 inset, 1px 0 0 0 #E3E3E3 inset, -1px 0 0 0 #E3E3E3 inset, 0 -1px 0 0 #B5B5B5 inset',
'0px 1px 0px 0px #E3E3E3 inset, 1px 0px 0px 0px #E3E3E3 inset, -1px 0px 0px 0px #E3E3E3 inset, 0px -1px 0px 0px #B5B5B5 inset',
},
'shadow-button-hover': {
value:
'0 1px 0 0 #EBEBEB inset, -1px 0 0 0 #EBEBEB inset, 1px 0 0 0 #EBEBEB inset, 0 -1px 0 0 #CCC inset',
'0px 1px 0px 0px #EBEBEB inset, -1px 0px 0px 0px #EBEBEB inset, 1px 0px 0px 0px #EBEBEB inset, 0px -1px 0px 0px #CCC inset',
},
'shadow-button-inset': {
value:
'0 2px 1px 0 rgba(26, 26, 26, 0.20) inset, 1px 0 1px 0 rgba(26, 26, 26, 0.12) inset, -1px 0 1px 0 rgba(26, 26, 26, 0.12) inset',
'0px 2px 1px 0px rgba(26, 26, 26, 0.20) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset, -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset',
},
'shadow-button-primary': {
value:
'0px 2px 0px 0px rgba(255, 255, 255, 0.2) inset, 2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 1px #000 inset, 0px 1px 0px 0px #000 inset',
},
'shadow-button-primary-hover': {
value:
'0 1px 0 0 rgba(255, 255, 255, 0.24) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1px 0 0 #000 inset, 0 -1px 0 1px #1A1A1A',
'0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1px 0px 0px #000 inset, 0px -1px 0px 1px #1A1A1A',
},
'shadow-button-primary-inset': {
value: '0 3px 0 0 #000 inset',
value: '0px 3px 0px 0px #000 inset',
},
'shadow-button-primary-critical': {
value:
'0 1px 0 0 rgba(255, 255, 255, 0.48) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset',
'0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
},
'shadow-button-primary-critical-hover': {
value:
'0 1px 0 0 rgba(255, 255, 255, 0.48) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset',
'0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
},
'shadow-button-primary-critical-inset': {
value:
'0 2px 0 0 rgba(0, 0, 0, 0.60) inset, 1px 0 1px 0 rgba(0, 0, 0, 0.20) inset, -1px 0 1px 0 rgba(0, 0, 0, 0.20) inset',
'0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset',
},
'shadow-button-primary-success': {
value:
'0 1px 0 0 rgba(255, 255, 255, 0.48) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset',
'0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
},
'shadow-button-primary-success-hover': {
value:
'0 1px 0 0 rgba(255, 255, 255, 0.48) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset',
'0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
},
'shadow-button-primary-success-inset': {
value:
'0 2px 0 0 rgba(0, 0, 0, 0.60) inset, 1px 0 1px 0 rgba(0, 0, 0, 0.20) inset, -1px 0 1px 0 rgba(0, 0, 0, 0.20) inset',
'0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset',
},
'shadow-border-inset': {
value: '0 0 0 1px rgba(0, 0, 0, 0.08) inset',
value: '0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset',
},
'shadow-inset-lg': {
value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
Expand Down

0 comments on commit 65a1429

Please sign in to comment.