diff --git a/.changeset/forty-books-clean.md b/.changeset/forty-books-clean.md new file mode 100644 index 00000000000..2e7f2c8e14c --- /dev/null +++ b/.changeset/forty-books-clean.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Include all shadow variables in theme object diff --git a/src/__tests__/theme.ts b/src/__tests__/theme.ts new file mode 100644 index 00000000000..0f5033bf4e6 --- /dev/null +++ b/src/__tests__/theme.ts @@ -0,0 +1,41 @@ +import {isShadowValue} from '../utils/theme' + +describe('isShadowValue', () => { + it('accepts transparent', () => { + expect(isShadowValue('0 0 0 transparent')).toBe(true) + }) + + it('accepts hex colors', () => { + expect(isShadowValue('0 0 0 #ff0000')).toBe(true) + expect(isShadowValue('0 0 0 #ff0')).toBe(true) + }) + + it('accepts rgba colors', () => { + expect(isShadowValue('0 0 0 rgb(255, 0, 0)')).toBe(true) + expect(isShadowValue('0 0 0 rgba(255,0,0,0.2)')).toBe(true) + }) + + it('accepts px values', () => { + expect(isShadowValue('12px 24px 0 #000')).toBe(true) + }) + + it('accepts em values', () => { + expect(isShadowValue('0.5em 1em 0 #000')).toBe(true) + }) + + it('accepts inset values', () => { + expect(isShadowValue('inset 12px 24px 0 #000')).toBe(true) + }) + + it('rejects individual colors', () => { + expect(isShadowValue('red')).toBe(false) + expect(isShadowValue('#f00')).toBe(false) + expect(isShadowValue('rgb(255, 0, 0)')).toBe(false) + }) + + it('rejects individual numeric values', () => { + expect(isShadowValue('0')).toBe(false) + expect(isShadowValue('12px')).toBe(false) + expect(isShadowValue('0.5em')).toBe(false) + }) +}) diff --git a/src/utils/theme.js b/src/utils/theme.js index 555647c12b5..4b6a54afe92 100644 --- a/src/utils/theme.js +++ b/src/utils/theme.js @@ -14,7 +14,7 @@ function fontStack(fonts) { // will not be needed. function isShadowValue(value) { - return typeof value === 'string' && /(inset\s|)([0-9.empx\s]+){1,4}rgb[a]?\(.*\)/.test(value) + return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value) } function isColorValue(value) {