From dc17a49e6a8f2f71e689f4666bcf0384111deb36 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Wed, 16 Jun 2021 09:18:31 -0600
Subject: [PATCH] Include all shadow variables in theme object (#1309)

---
 .changeset/forty-books-clean.md |  5 ++++
 src/__tests__/theme.ts          | 41 +++++++++++++++++++++++++++++++++
 src/utils/theme.js              |  2 +-
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/forty-books-clean.md
 create mode 100644 src/__tests__/theme.ts

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