feat: brandshape restriction

.changeset/clear-cloths-carry.md

@@ -0,0 +1,7 @@
+---
+'@solid-design-system/components': minor
+---
+
+Restrict `sd-brandshape` to `ui-light` and `ui-dark` themes. When used in other themes, it will not be displayed.
+
+Use new variables to also restrict `transparent variants`.

.changeset/polite-lizards-accept.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/tokens': minor
+---
+
+Added new `sd-brandshape` tokens.

packages/components/src/components/brandshape/brandshape.ts

@@ -149,12 +149,12 @@ export default class SdBrandshape extends SolidElement {
           class=${cx(
             {
               'neutral-100': 'sd-brandshape--neutral-100-color-background',
-              primary: 'bg-primary',
+              primary: 'sd-brandshape--primary-color-background',
               white: 'sd-brandshape--white-color-background',
               'border-white': 'bg-transparent',
               'border-primary': 'bg-transparent',
-              'primary|80': 'bg-primary/80',
-              'white|80': 'bg-white/80',
+              'primary|80': 'sd-brandshape--primary-80-color-background',
+              'white|80': 'sd-brandshape--white-80-color-background',
               image: 'bg-transparent'
             }[this.variant],
             'w-full block absolute h-full top-0 left-0 z-0'
@@ -181,12 +181,12 @@ export default class SdBrandshape extends SolidElement {
       class=${cx(
         {
           'neutral-100': 'sd-brandshape--neutral-100-color-background',
-          primary: 'bg-primary',
+          primary: 'sd-brandshape--primary-color-background',
           white: 'sd-brandshape--white-color-background',
           'border-white': 'bg-transparent',
           'border-primary': 'bg-transparent',
-          'primary|80': 'bg-primary/80',
-          'white|80': 'bg-white/80',
+          'primary|80': 'sd-brandshape--primary-80-color-background',
+          'white|80': 'sd-brandshape--white-80-color-background',
           image: 'bg-transparent'
         }[this.variant],
         { top: 'bottom-0', bottom: 'top-0' }[position],
@@ -298,11 +298,11 @@ export default class SdBrandshape extends SolidElement {
       /* Stylized border */
 
       :host([variant='border-primary']) {
-        --internal-border-color: rgba(var(--sd-color-border-primary, rgba(var(--sd-color-primary))));
+        --internal-border-color: rgba(var(--sd-brandshape--primary-color-border, rgba(var(--sd-color-primary))));
       }
 
       :host([variant='border-white']) {
-        --internal-border-color: rgba(var(--sd-color-border-white, rgba(var(--sd-color-white))));
+        --internal-border-color: rgba(var(--sd-brandshape-color-border-white, rgba(var(--sd-color-white))));
       }
 
       :host([variant^='border-']) [part='stylized-container']::before {
@@ -322,19 +322,19 @@ export default class SdBrandshape extends SolidElement {
       }
 
       :host([variant='white']) [part='base'] {
-        fill: rgba(var(--sd-color-background-white, rgba(var(--sd-color-white))));
+        fill: rgba(var(--sd-brandshape--white-color-background, rgba(var(--sd-color-white))));
       }
 
       :host([variant='primary']) [part='base'] {
-        fill: rgba(var(--sd-color-background-primary, rgba(var(--sd-color-primary))));
+        fill: rgba(var(--sd-brandshape--primary-color-background, rgba(var(--sd-color-primary))));
       }
 
       :host([variant='primary|80']) [part='base'] {
-        fill: rgba(var(--sd-color-background-primary, rgba(var(--sd-color-primary))) / 0.8);
+        fill: rgba(var(--sd-brandshape--primary-80-color-background, rgba(var(--sd-color-primary))));
       }
 
       :host([variant='white|80']) [part='base'] {
-        fill: rgba(var(--sd-color-background-white, rgba(var(--sd-color-white))) / 0.8);
+        fill: rgba(var(--sd-brandshape--white-80-color-background, rgba(var(--sd-color-white))));
       }
     `
   ];

packages/docs/src/stories/components/brandshape.mdx

@@ -14,6 +14,8 @@ export const links = {
 export const content = `
 # Brandshape
 
+<sd-notification variant="info" open class="mb-4">Please notice that this component is only available for themes UI Light and UI Dark</sd-notification>
+
 Used as a container with brand character that visually emphasizes the content.
 
 <DefaultStory />

packages/docs/src/stories/components/brandshape.stories.ts

@@ -25,6 +25,12 @@ function getShapeCombinations(arr: string[]) {
 
 const shapes = getShapeCombinations(JSON.parse(argTypes['shapes'].defaultValue.replace(/'/g, '"')));
 
+/**
+ *
+ * <sd-notification variant="info" open class="mb-4">Please notice that this component is only available for themes UI Light and UI Dark</sd-notification>
+ *
+ */
+
 export default {
   title: 'Components/sd-brandshape',
   tags: ['!dev', 'autodocs'],
@@ -55,7 +61,21 @@ export default {
       ...argTypes['shapes'],
       options: shapes
     }
-  }
+  },
+  decorators: [
+    (story: () => typeof html) => html`
+      <style>
+        body:not(:has(.sd-theme-ui-light, .sd-theme-ui-dark)) .slot {
+          display: none;
+        }
+
+        body:not(:has(.sd-theme-ui-light, .sd-theme-ui-dark)) .inverted-wrapper {
+          background-color: transparent;
+        }
+      </style>
+      ${story()}
+    `
+  ]
 };
 
 export const Default = {
@@ -98,7 +118,7 @@ export const Variant = {
         <img slot="image" src="./placeholders/images/generic.jpg" alt="" />
       </sd-brandshape>
 
-      <div class="bg-primary">
+      <div class="bg-primary inverted-wrapper">
         <sd-brandshape variant="white">
           <div class="slot slot--border slot--text h-8 w-full">Default slot</div>
         </sd-brandshape>

packages/docs/src/stories/components/brandshape.test.stories.ts

@@ -20,7 +20,20 @@ export default {
   title: 'Components/sd-brandshape/Screenshots: sd-brandshape',
   component: 'sd-brandshape',
   tags: ['!autodocs'],
-  parameters: { ...parameters, controls: { disable: true } },
+  parameters: {
+    ...parameters,
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            enabled: false
+          }
+        ]
+      }
+    },
+    controls: { disable: true }
+  },
   args: overrideArgs([
     {
       type: 'slot',
@@ -41,7 +54,17 @@ export default {
       ...argTypes['shapes-attr'],
       control: 'text'
     }
-  }
+  },
+  decorators: [
+    (story: () => typeof html) => html`
+      <style>
+        .sb-show-main:not(.sd-theme-ui-light):not(.sd-theme-ui-dark) .slot {
+          display: none;
+        }
+      </style>
+      ${story()}
+    `
+  ]
 };
 
 const increaseColumnWidth = (): ConstantDefinition => {