Include all shadow variables in theme object (#1309)

.changeset/forty-books-clean.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Include all shadow variables in theme object

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)
+  })
+})

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) {