@solid-design-system/mcp 7.0.0-next.6 → 7.0.0-next.8

package/metadata/packages/templates/teaser.md

@@ -4,13 +4,11 @@ title: Teaser
 components:
   - sd-button
   - sd-chip
-  - sd-chip--primary-200
-  - sd-chip--primary-500
-  - sd-chip--white
-  - sd-flag
-  - sd-flag--neutral-200
-  - sd-flag--neutral-300
-  - sd-flag--white
+  - sd-chip--color-neutral
+  - sd-chip--color-white
+  - sd-chip--shade-low
+  - sd-chip--sharp
+  - sd-chip--size-lg
   - sd-headline
   - sd-headline--inverted
   - sd-headline--size-3xl
@@ -165,7 +163,7 @@ version: 1.0.0
 </div>
 ```
 
-## Template: Teaser with Chip and Flag
+## Template: Teaser with Chip
 
 ```html
 <div class="flex flex-col gap-8">
@@ -179,8 +177,10 @@ version: 1.0.0
         alt="Colleagues in a casual office meeting, smiling and interacting, symbolizing collaboration and the value of office spaces."
         class="aspect-video object-cover"
       />
-      <span class="absolute top-3 left-4 sd-chip sd-chip--primary-500">Remote Work</span>
-      <span class="absolute top-2 right-0 sd-flag sd-flag--white">Research</span>
+      <span class="absolute top-3 left-4 sd-chip sd-chip--color-white">Remote Work</span>
+      <span class="absolute top-3 right-0 sd-chip sd-chip--color-neutral sd-chip--shade-low sd-chip--size-lg"
+        >Research</span
+      >
     </div>
     <div slot="meta" class="meta-info">
       <span class="sd-meta sd-meta--inverted sd-meta--light sd-meta--size-sm sd-meta--pipe">05.06.2024</span>
@@ -200,8 +200,11 @@ version: 1.0.0
     <h3 slot="headline" class="sd-headline sd-headline--size-lg">
       ECB interest rate cut: a trend reversal on the real estate markets?
     </h3>
-    <span class="absolute top-3 left-4 sd-chip sd-chip--primary-200">Investment</span>
-    <span class="absolute top-2 right-0 sd-flag sd-flag--neutral-200">Trends</span>
+    <span class="absolute top-3 left-4 sd-chip">Investment</span>
+    <span
+      class="absolute top-3 right-0 sd-chip sd-chip--color-neutral sd-chip--shade-low sd-chip--size-lg sd-chip--sharp"
+      >Trends</span
+    >
     <div slot="media" class="flex flex-wrap h-[189px] content-center justify-center">
       <sd-icon class="text-[96px]" name="content/house-percent" color="primary"></sd-icon>
     </div>
@@ -232,8 +235,11 @@ version: 1.0.0
         alt="City skyline, highlighting growth in real estate transactions."
         class="aspect-video sm:aspect-[3/4] md:aspect-[16/9] object-cover w-full"
       />
-      <span class="absolute top-3 left-4 sd-chip sd-chip--white">Real Estate</span>
-      <span class="absolute top-2 right-0 sd-flag sd-flag--neutral-300">Analytics</span>
+      <span class="absolute top-3 left-4 sd-chip sd-chip--color-white">Real Estate</span>
+      <span
+        class="absolute top-3 right-0 sd-chip sd-chip--color-neutral sd-chip--shade-low sd-chip--size-lg sd-chip--sharp"
+        >Analytics</span
+      >
     </div>
   </sd-teaser>
 </div>

package/metadata/packages/tokens/docs/installation.md

@@ -416,10 +416,6 @@ Deprecated variables:
 - `--sd-button--size-md-border-radius` replace with `--sd-button-border-radius`
 - `--sd-button--size-sm-border-radius` replace with `--sd-button-border-radius`
 - `--sd-button--secondary--inverted--color-border` replace with `--sd-button-secondary-inverted-color-border`
-- `--sd-chip-font-size` replace with `--sd-marker-font-size`
-- `--sd-chip-border-width` replace with `--sd-marker-border-width`
-- `--sd-chip-font-weight` replace with `--sd-marker-font-weight`
-- `--sd-flag-border-width` replace with `--sd-marker-border-width`
 - `--sd-form-control-color-icon` replace with `--sd-form-control-color-icon-fill`
 - `--sd-menu-color-icon` replace with `--sd-menu-item-color-icon-fill`
 - `--sd-menu-color-text` replace with `--sd-menu-item-color-text`

package/metadata/packages/tokens/docs/usage.md

@@ -136,22 +136,6 @@ The following CSS variables (tokens) are deprecated and will be removed in a fut
     <td>`--sd-button--secondary--inverted--color-border`</td>
     <td>`--sd-button-secondary-inverted-color-border`</td>
   </tr>
-  <tr>
-    <td>`--sd-chip-font-size`</td>
-    <td>`--sd-marker-font-size`</td>
-  </tr>
-  <tr>
-    <td>`--sd-chip-border-width`</td>
-    <td>`--sd-marker-border-width`</td>
-  </tr>
-  <tr>
-    <td>`--sd-chip-font-weight`</td>
-    <td>`--sd-marker-font-weight`</td>
-  </tr>
-  <tr>
-    <td>`--sd-flag-border-width`</td>
-    <td>`--sd-marker-border-width`</td>
-  </tr>
   <tr>
     <td>`--sd-form-control-color-icon`</td>
     <td>`--sd-form-control-color-icon-fill`</td>

package/metadata/packages/tokens/tokens.json

@@ -32,6 +32,8 @@
     "--background-color-neutral-500",
     "--background-color-neutral-600",
     "--background-color-neutral-800",
+    "--background-color-neutral-blue",
+    "--background-color-neutral-grey",
     "--background-color-primary-100",
     "--background-color-primary-200",
     "--background-color-primary-300",
@@ -40,6 +42,7 @@
     "--background-color-primary",
     "--background-color-success",
     "--background-color-warning",
+    "--background-color-white-translucent",
     "--background-color-white",
     "--border-color-accent-550",
     "--border-color-accent",
@@ -49,6 +52,7 @@
     "--border-color-neutral-500",
     "--border-color-neutral-600",
     "--border-color-neutral-800",
+    "--border-color-neutral-blue",
     "--border-color-primary-100",
     "--border-color-primary-200",
     "--border-color-primary-400",

package/package.json

@@ -20,9 +20,9 @@
     "prettier": "^3.9.5",
     "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "@solid-design-system/components": "7.0.0-next.6",
-    "@solid-design-system/styles": "7.0.0-next.6",
-    "@solid-design-system/tokens": "7.0.0-next.6"
+    "@solid-design-system/components": "7.0.0-next.8",
+    "@solid-design-system/styles": "7.0.0-next.8",
+    "@solid-design-system/tokens": "7.0.0-next.8"
   },
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "7.0.0-next.6",
+  "version": "7.0.0-next.8",
   "scripts": {
     "build": "pnpm run build:components && pnpm run build:tokens && pnpm run build:ts && pnpm run build:metadata && cd ../.. && pnpm exec prettier --write --log-level warn packages/mcp/metadata",
     "build:components": "cd ../components && pnpm exec node scripts/make-metadata.js --outdir dist",

package/metadata/packages/styles/sd-flag/info.md

@@ -1,45 +0,0 @@
-## Overview
-
-`sd-flag` – Used as a small, non-interactive label that represents a category.
-
-## API
-
-### Examples
-
-Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
-
-- sd-flag/variants
-
-## Guidelines
-
-### Use Cases
-
-- Indicate the status of items with visual labels, such as “New,” “Featured,” “Expired,” or “Limited Stock”.
-- Label content type, like “Video,” “Article,” or “Podcast” to help users quickly identify the nature of the content.
-
-### Rules
-
-### Label and Styling
-
-- Keep flag text short and easily scannable. Long text disrupts layouts and diminishes the flag’s visual impact.
-- Use the “&--variant” property to apply the color variant that best works on the background, keeping it consistent throughout the product.
-
-### Chips and Flags
-
-- [sd-chip](./?path=/docs/styles-sd-chip--docs) and sd-flag can be used for similar purposes. Use them consistently throughout your product and, if both are needed, be sure to define which categories each should be used for (e.g. a chip on an article teaser informs about its subject, the flag about the type of article).
-
-### Chips and Tags
-
-- Use only as a non-interactive element; for interactive elements (e.g., a dynamic filter), use [sd-tag](./?path=/docs/styles-sd-tag--docs) instead.
-
-### Accessibility
-
-- Present flags as static labels (no focus or click behavior) to ensure screen readers don’t treat them as actionable elements.
-- If the flag conveys crucial information (e.g., “Expired”), include that text in the accessible name or description for the surrounding context.
-
-### Related Templates
-
-- flag--docs
-- teaser--docs
-
-Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-flag/stories/variants.md

@@ -1,40 +0,0 @@
-<sd-notification variant="info" open class="only-theme-kid mb-4">Add "shadow-sm" manually with css property box-shadow.</sd-notification>
-/
-export default {
-title: 'Styles/sd-flag',
-tags: ['!dev', 'autodocs'],
-component: 'sd-flag',
-parameters: {
-...parameters,
-design: {
-type: 'figma',
-url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2106-34451&t=ohgrgpEVGgKzqMzU-4'
-}
-},
-args: overrideArgs([{ type: 'slot', name: 'default', value: 'Flag' }]),
-argTypes
-};
-export const Default = {
-render: (args: any) => {
-return generateTemplate({
-options: { templateContent: '<span class="%CLASSES%">%SLOT%</span>' },
-args
-});
-}
-};
-/**
-Use the `sd-flag--*` classes for alternative appearances:
-
-- neutral-200 is the default appearance
-- `sd-flag--neutral-300`
-- `sd-flag--neutral-500`
-- `sd-flag--white`
-
-```html
-<div class="flex gap-4 bg-neutral-100 p-8">
-  <div class="sd-flag">Default</div>
-  <div class="sd-flag sd-flag--neutral-300">Neutral 300</div>
-  <div class="sd-flag sd-flag--neutral-500">Neutral 500</div>
-  <div class="sd-flag sd-flag--white">White</div>
-</div>
-```

package/metadata/packages/templates/flag.md

@@ -1,38 +0,0 @@
----
-name: flag
-title: Flag
-components:
-  - sd-flag
-  - sd-flag--neutral-200
-  - sd-flag--neutral-300
-  - sd-flag--neutral-500
-  - sd-flag--white
-version: 1.0.0
----
-
-## Template: Background Options
-
-```html
-<div class="grid grid-cols-2 grid-rows-3">
-  <div class="bg-white pt-[32px] flex justify-end border border-neutral-200">
-    <div class="sd-flag sd-flag--neutral-200">neutral-200</div>
-  </div>
-  <div class="bg-neutral-100 pt-[32px] flex justify-end">
-    <div class=" sd-flag sd-flag--neutral-300">neutral-300</div>
-  </div>
-  <div class="bg-primary-100 pt-[32px] flex justify-end">
-    <div class="sd-flag sd-flag--neutral-500">neutral-500</div>
-  </div>
-  <div class="bg-primary pt-[32px] flex justify-end">
-    <div class="sd-flag sd-flag--white">white</div>
-  </div>
-  <div slot="media" class="relative">
-    <img
-      class="aspect-video object-cover"
-      src="./placeholders/images/coffeeshop.jpg"
-      alt="A group of people sitting in a coffee shop"
-    />
-    <div class="absolute top-[32px] right-0 sd-flag sd-flag--white">white</div>
-  </div>
-</div>
-```