docs: enable stylelint color-function-notation

eslint · Oct 29, 2022 · c5d5d6d · c5d5d6d
1 parent 8a15968
commit c5d5d6d
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }