From c5d5d6d01e9ecfd6e0c7e5d7025105d0c913840a Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Sat, 29 Oct 2022 01:44:29 -0400
Subject: [PATCH] docs: enable stylelint color-function-notation

---
 docs/.stylelintrc.json                          | 1 -
 docs/src/assets/scss/carbon-ads.scss            | 6 +++---
 docs/src/assets/scss/components/buttons.scss    | 2 +-
 docs/src/assets/scss/components/docs-index.scss | 2 +-
 docs/src/assets/scss/components/index.scss      | 2 +-
 docs/src/assets/scss/tokens/ui.scss             | 6 +++---
 6 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/docs/.stylelintrc.json b/docs/.stylelintrc.json
index d2a61557dc46..1ee580e44c50 100644
--- a/docs/.stylelintrc.json
+++ b/docs/.stylelintrc.json
@@ -3,7 +3,6 @@
     "rules": {
         "alpha-value-notation": null,
         "at-rule-empty-line-before": null,
-        "color-function-notation": null,
         "color-hex-case": null,
         "custom-property-empty-line-before": null,
         "custom-property-pattern": null,
diff --git a/docs/src/assets/scss/carbon-ads.scss b/docs/src/assets/scss/carbon-ads.scss
index 085b0b736fe9..400ff350d8b3 100644
--- a/docs/src/assets/scss/carbon-ads.scss
+++ b/docs/src/assets/scss/carbon-ads.scss
@@ -19,7 +19,7 @@
     background-color: var(--body-background-color);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-    box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
+    box-shadow: 0 1px 4px 1px hsl(0 0% 0% / 0.1);
 
     .docs-main & {
         margin: 0 0 2rem;
@@ -31,8 +31,8 @@
 }
 
 .jumbotron #carbonads {
-    border: solid 1px hsla(250, 20%, 50%, .6);
-    background-color: hsla(0, 0%, 70%, .15);
+    border: solid 1px hsl(250 20% 50% / .6);
+    background-color: hsl(0 0% 70% / .15);
 }
 
 #carbonads a {
diff --git a/docs/src/assets/scss/components/buttons.scss b/docs/src/assets/scss/components/buttons.scss
index ca0aa72a726c..91031cd53367 100644
--- a/docs/src/assets/scss/components/buttons.scss
+++ b/docs/src/assets/scss/components/buttons.scss
@@ -60,7 +60,7 @@ a.c-btn {
 .c-btn--secondary {
     background-color: var(--secondary-button-background-color);
     color: var(--secondary-button-text-color);
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
+    box-shadow: 0 1px 2px rgb(16 24 40 / 0.1);
 
     &:hover {
         background-color: var(--secondary-button-hover-color);
diff --git a/docs/src/assets/scss/components/docs-index.scss b/docs/src/assets/scss/components/docs-index.scss
index d524a9b25892..e4feee687bf0 100644
--- a/docs/src/assets/scss/components/docs-index.scss
+++ b/docs/src/assets/scss/components/docs-index.scss
@@ -103,7 +103,7 @@
     border-radius: var(--border-radius);
     background-color: var(--secondary-button-background-color);
     color: var(--secondary-button-text-color);
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
+    box-shadow: 0 1px 2px rgb(16 24 40 / 0.1);
 
     &:hover {
         background-color: var(--secondary-button-hover-color);
diff --git a/docs/src/assets/scss/components/index.scss b/docs/src/assets/scss/components/index.scss
index 5989e1f48e7a..2cd47c965d0e 100644
--- a/docs/src/assets/scss/components/index.scss
+++ b/docs/src/assets/scss/components/index.scss
@@ -39,7 +39,7 @@
     border-radius: var(--border-radius);
     background-color: var(--secondary-button-background-color);
     color: var(--secondary-button-text-color);
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
+    box-shadow: 0 1px 2px rgb(16 24 40 / 0.1);
 
     &:hover {
         background-color: var(--secondary-button-hover-color);
diff --git a/docs/src/assets/scss/tokens/ui.scss b/docs/src/assets/scss/tokens/ui.scss
index 49380e12da85..6aa774a30bf2 100644
--- a/docs/src/assets/scss/tokens/ui.scss
+++ b/docs/src/assets/scss/tokens/ui.scss
@@ -1,9 +1,9 @@
 :root {
     // elevations
     --shadow-lg:
-        0 12px 16px -4px rgba(16, 24, 40, 0.1),
-        0 4px 6px -2px rgba(16, 24, 40, 0.05);
-    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
+        0 12px 16px -4px rgb(16 24 40 / 0.1),
+        0 4px 6px -2px rgb(16 24 40 / 0.05);
+    --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
 
     --border-radius: .5rem;
 }