From 53fa1a59913fbf71f3a3bd05f795792fcf6c4eb6 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 15 Feb 2022 09:03:34 -0800
Subject: [PATCH 1/2] feat: Prefix custom color-scheme attribute

---
 src/components/AppProvider/AppProvider.tsx             |  2 +-
 src/components/CustomProperties/CustomProperties.tsx   |  2 +-
 src/components/CustomProperties/styles.ts              | 10 +++++-----
 .../CustomProperties/tests/CustomProperties.test.tsx   | 10 +++++-----
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/AppProvider/AppProvider.tsx b/src/components/AppProvider/AppProvider.tsx
index 76f997f9d9a..05681b827d5 100644
--- a/src/components/AppProvider/AppProvider.tsx
+++ b/src/components/AppProvider/AppProvider.tsx
@@ -99,7 +99,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
     // Inlining the following custom properties to maintain backward
     // compatibility with the legacy ThemeProvider implementation.
     document.body.setAttribute(
-      'color-scheme',
+      'p-color-scheme',
       this.props.colorScheme || DEFAULT_COLOR_SCHEME,
     );
     document.body.style.backgroundColor = 'var(--p-background)';
diff --git a/src/components/CustomProperties/CustomProperties.tsx b/src/components/CustomProperties/CustomProperties.tsx
index b5d1516392a..259948075a5 100644
--- a/src/components/CustomProperties/CustomProperties.tsx
+++ b/src/components/CustomProperties/CustomProperties.tsx
@@ -44,7 +44,7 @@ export function CustomProperties(props: CustomPropertiesProps) {
 
   return (
     <Component
-      color-scheme={colorScheme}
+      p-color-scheme={colorScheme}
       className={className}
       // TODO: Remove this inline style when we update individual components
       // to set their own color and background-color properties.
diff --git a/src/components/CustomProperties/styles.ts b/src/components/CustomProperties/styles.ts
index b9e1633bae5..ff67ba7466f 100644
--- a/src/components/CustomProperties/styles.ts
+++ b/src/components/CustomProperties/styles.ts
@@ -17,9 +17,9 @@ const lightDeclarations = getColorSchemeDeclarations(
 /**
  * Creates CSS Rules for each color-scheme.
  * @example:
- * [color-scheme="light"] {...}
- * [color-scheme="dark"] {...}
- * [color-scheme="dim"] {...}
+ * [p-color-scheme="light"] {...}
+ * [p-color-scheme="dark"] {...}
+ * [p-color-scheme="dim"] {...}
  */
 export function getColorSchemeRules(
   tokens: Tokens,
@@ -29,7 +29,7 @@ export function getColorSchemeRules(
     .map((key) => {
       const colorScheme = key as ColorScheme;
 
-      const selector = `[color-scheme="${colorScheme}"]`;
+      const selector = `[p-color-scheme="${colorScheme}"]`;
       const properties = getColorSchemeDeclarations(
         colorScheme,
         tokens,
@@ -61,7 +61,7 @@ export function getColorSchemeDeclarations(
   osColorSchemes: OSColorSchemes,
 ) {
   return [
-    `color-scheme:${osColorSchemes[colorScheme]};`,
+    `p-color-scheme:${osColorSchemes[colorScheme]};`,
     getCustomProperties(tokens.colorSchemes[colorScheme]),
   ].join('');
 }
diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx
index 87c99a7c2b8..be1aac5a086 100644
--- a/src/components/CustomProperties/tests/CustomProperties.test.tsx
+++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx
@@ -21,7 +21,7 @@ import {
 } from '../styles';
 
 interface ColorSchemeAttribute {
-  'color-scheme': ColorScheme;
+  'p-color-scheme': ColorScheme;
 }
 
 const mockTokenGroup: TokenGroup = {
@@ -94,7 +94,7 @@ describe('<CustomProperties />', () => {
 
       expect(
         (customProperties.find('div')!.props as ColorSchemeAttribute)[
-          'color-scheme'
+          'p-color-scheme'
         ],
       ).toBe(DEFAULT_COLOR_SCHEME);
     });
@@ -106,7 +106,7 @@ describe('<CustomProperties />', () => {
 
       expect(
         (customProperties.find('div')!.props as ColorSchemeAttribute)[
-          'color-scheme'
+          'p-color-scheme'
         ],
       ).toBe('light');
     });
@@ -118,7 +118,7 @@ describe('<CustomProperties />', () => {
 
       expect(
         (customProperties.find('div')!.props as ColorSchemeAttribute)[
-          'color-scheme'
+          'p-color-scheme'
         ],
       ).toBe('dark');
     });
@@ -177,7 +177,7 @@ describe('<CustomProperties />', () => {
       const expectedRules = Object.keys(mockColorSchemes)
         .map(
           (colorScheme) =>
-            `[color-scheme="${colorScheme}"]{${expectedColorSchemeDeclarations(
+            `[p-color-scheme="${colorScheme}"]{${expectedColorSchemeDeclarations(
               colorScheme as ColorScheme,
             )}}`,
         )

From 0e32bffe7d1e278b8cc2c79bae1478f16dcffa13 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 15 Feb 2022 09:12:28 -0800
Subject: [PATCH 2/2] Update src/components/CustomProperties/styles.ts

---
 src/components/CustomProperties/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CustomProperties/styles.ts b/src/components/CustomProperties/styles.ts
index ff67ba7466f..cb0232a6c05 100644
--- a/src/components/CustomProperties/styles.ts
+++ b/src/components/CustomProperties/styles.ts
@@ -61,7 +61,7 @@ export function getColorSchemeDeclarations(
   osColorSchemes: OSColorSchemes,
 ) {
   return [
-    `p-color-scheme:${osColorSchemes[colorScheme]};`,
+    `color-scheme:${osColorSchemes[colorScheme]};`,
     getCustomProperties(tokens.colorSchemes[colorScheme]),
   ].join('');
 }