style(Slug): adjust padding with hollow dot, fix text colors

carbon-design-system · Oct 25, 2023 · 7fc334b · 7fc334b
1 parent 96a0c08
commit 7fc334b
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 8 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -271,6 +271,15 @@ Array [
   "skeletonElement",
   "slow01",
   "slow02",
+  "slugBackground",
+  "slugBackgroundHover",
+  "slugCalloutAuraEnd",
+  "slugCalloutAuraStart",
+  "slugCalloutGradientBottom",
+  "slugCalloutGradientTop",
+  "slugGradient",
+  "slugGradientHover",
+  "slugHollowHover",
   "spacing",
   "spacing01",
   "spacing02",

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -554,7 +554,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+                d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"
               />
             </svg>
           </button>
@@ -985,7 +985,7 @@ exports[`DataTable renders as expected - Component API should render and match s
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+                d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"
               />
             </svg>
           </button>

diff --git a/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -61,7 +61,7 @@ exports[`TableToolbarSearch renders as expected - Component API should render 1`
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+          d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"
         />
       </svg>
     </button>

diff --git a/packages/react/src/components/Slug/Slug.stories.js b/packages/react/src/components/Slug/Slug.stories.js
@@ -26,15 +26,15 @@ export default {
 
 const aiContent = (
   <div>
-    <p>AI Explained</p>
+    <p className="secondary">AI Explained</p>
     <h1>84%</h1>
-    <p className="bold">Confidence score</p>
-    <p>
+    <p className="secondary bold">Confidence score</p>
+    <p className="secondary">
       Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
       eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
     </p>
     <hr />
-    <p>Model type</p>
+    <p className="secondary">Model type</p>
     <p className="bold">Foundation model</p>
   </div>
 );

diff --git a/packages/react/src/components/Slug/slug-story.scss b/packages/react/src/components/Slug/slug-story.scss
@@ -19,6 +19,10 @@
   font-weight: 600;
 }
 
+.slug-container .cds--toggletip-content .secondary {
+  color: theme.$text-secondary;
+}
+
 .slug-container .cds--toggletip-content h1 {
   margin-bottom: 1rem;
 }

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -127,6 +127,15 @@ describe('@carbon/styles/scss/theme', () => {
         "support-caution-major",
         "support-caution-minor",
         "support-caution-undefined",
+        "slug-background",
+        "slug-gradient",
+        "slug-background-hover",
+        "slug-gradient-hover",
+        "slug-hollow-hover",
+        "slug-callout-gradient-top",
+        "slug-callout-gradient-bottom",
+        "slug-callout-aura-start",
+        "slug-callout-aura-end",
         "highlight",
         "overlay",
         "toggle-off",

diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
@@ -238,6 +238,15 @@ $sizes: (
     inline-size: convert.to-rem(6px);
   }
 
+  .#{$prefix}--ai-slug--hollow
+    .#{$prefix}--ai-slug__button--sm
+    .#{$prefix}--ai-slug__text,
+  .#{$prefix}--ai-slug--hollow
+    .#{$prefix}--ai-slug__button--md
+    .#{$prefix}--ai-slug__text {
+    padding-inline-start: convert.to-rem(9px);
+  }
+
   .#{$prefix}--ai-slug__button--lg .#{$prefix}--ai-slug__text::before,
   .#{$prefix}--ai-slug--hollow
     .#{$prefix}--ai-slug__button--lg
@@ -302,7 +311,6 @@ $sizes: (
     border: 1px solid $border-subtle;
     border-radius: 16px;
     // 84px seems to make this fully opaque?
-    // If we want slight transparency, maybe 2px or 3px
     backdrop-filter: blur(25px);
     background: linear-gradient(
         0deg,