@seed-design/css 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -55,7 +55,8 @@
     "*.css"
   ],
   "devDependencies": {
-    "@seed-design/qvism-preset": "0.0.0"
+    "@seed-design/qvism-preset": "0.0.0",
+    "@seed-design/qvism-cli": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/recipes/action-button.css

@@ -1,4 +1,4 @@
-.seed-action-button__root {
+.seed-action-button {
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -12,17 +12,17 @@
     flex-shrink: 0;
     font-family: inherit;
 }
-.seed-action-button__root:is(:focus, [data-focus]) {
+.seed-action-button:is(:focus, [data-focus]) {
     outline: none;
 }
-.seed-action-button__root:is(:disabled, [disabled], [data-disabled]) {
+.seed-action-button:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.seed-action-button__root {
+.seed-action-button {
     transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
     font-weight: var(--seed-font-weight-bold);
 }
-.seed-action-button__root--variant_brandSolid {
+.seed-action-button--variant_brandSolid {
     background: var(--seed-color-bg-brand-solid);
     color: var(--seed-color-palette-static-white);
     --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -31,20 +31,20 @@
     --track-color: var(--seed-color-palette-static-white-alpha-200);
     --range-color: var(--seed-color-palette-static-white);
 }
-.seed-action-button__root--variant_brandSolid:is(:active, [data-active]) {
+.seed-action-button--variant_brandSolid:is(:active, [data-active]) {
     background: var(--seed-color-bg-brand-solid-pressed);
 }
-.seed-action-button__root--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
+.seed-action-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
     --seed-prefix-icon-color: var(--seed-color-fg-disabled);
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
     --seed-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-action-button__root--variant_brandSolid[data-loading] {
+.seed-action-button--variant_brandSolid[data-loading] {
     background: var(--seed-color-bg-brand-solid-pressed);
 }
-.seed-action-button__root--variant_neutralSolid {
+.seed-action-button--variant_neutralSolid {
     background: var(--seed-color-bg-neutral-inverted);
     color: var(--seed-color-fg-neutral-inverted);
     --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -53,20 +53,20 @@
     --track-color: var(--seed-color-palette-static-white-alpha-200);
     --range-color: var(--seed-color-palette-static-white);
 }
-.seed-action-button__root--variant_neutralSolid:is(:active, [data-active]) {
+.seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-inverted-pressed);
 }
-.seed-action-button__root--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
+.seed-action-button--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
     --seed-prefix-icon-color: var(--seed-color-fg-disabled);
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
     --seed-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-action-button__root--variant_neutralSolid[data-loading] {
+.seed-action-button--variant_neutralSolid[data-loading] {
     background: var(--seed-color-bg-neutral-inverted-pressed);
 }
-.seed-action-button__root--variant_neutralWeak {
+.seed-action-button--variant_neutralWeak {
     background: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral);
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -75,20 +75,20 @@
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
 }
-.seed-action-button__root--variant_neutralWeak:is(:active, [data-active]) {
+.seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-action-button__root--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
+.seed-action-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
     --seed-prefix-icon-color: var(--seed-color-fg-disabled);
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
     --seed-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-action-button__root--variant_neutralWeak[data-loading] {
+.seed-action-button--variant_neutralWeak[data-loading] {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-action-button__root--variant_criticalSolid {
+.seed-action-button--variant_criticalSolid {
     background: var(--seed-color-bg-critical-solid);
     color: var(--seed-color-palette-static-white);
     --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -97,20 +97,20 @@
     --track-color: var(--seed-color-palette-static-white-alpha-200);
     --range-color: var(--seed-color-palette-static-white);
 }
-.seed-action-button__root--variant_criticalSolid:is(:active, [data-active]) {
+.seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
     background: var(--seed-color-bg-critical-solid-pressed);
 }
-.seed-action-button__root--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
+.seed-action-button--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
     --seed-prefix-icon-color: var(--seed-color-fg-disabled);
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
     --seed-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-action-button__root--variant_criticalSolid[data-loading] {
+.seed-action-button--variant_criticalSolid[data-loading] {
     background: var(--seed-color-bg-critical-solid-pressed);
 }
-.seed-action-button__root--variant_brandOutline {
+.seed-action-button--variant_brandOutline {
     border-style: solid;
     background: var(--seed-color-bg-layer-default);
     border-width: 1px;
@@ -122,10 +122,10 @@
     --track-color: var(--seed-color-palette-carrot-200);
     --range-color: var(--seed-color-bg-brand-solid);
 }
-.seed-action-button__root--variant_brandOutline:is(:active, [data-active]) {
+.seed-action-button--variant_brandOutline:is(:active, [data-active]) {
     background: var(--seed-color-bg-layer-default-pressed);
 }
-.seed-action-button__root--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
+.seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-layer-default);
     border-color: var(--seed-color-stroke-neutral);
     color: var(--seed-color-fg-disabled);
@@ -133,10 +133,10 @@
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
     --seed-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-action-button__root--variant_brandOutline[data-loading] {
+.seed-action-button--variant_brandOutline[data-loading] {
     background: var(--seed-color-bg-layer-default);
 }
-.seed-action-button__root--variant_neutralOutline {
+.seed-action-button--variant_neutralOutline {
     border-style: solid;
     background: var(--seed-color-bg-layer-default);
     border-width: 1px;
@@ -148,10 +148,10 @@
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
 }
-.seed-action-button__root--variant_neutralOutline:is(:active, [data-active]) {
+.seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
     background: var(--seed-color-bg-layer-default-pressed);
 }
-.seed-action-button__root--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
+.seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-layer-default);
     border-color: var(--seed-color-stroke-neutral);
     color: var(--seed-color-fg-disabled);
@@ -159,10 +159,10 @@
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
     --seed-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-action-button__root--variant_neutralOutline[data-loading] {
+.seed-action-button--variant_neutralOutline[data-loading] {
     background: var(--seed-color-bg-layer-default);
 }
-.seed-action-button__root--size_xsmall {
+.seed-action-button--size_xsmall {
     height: var(--seed-dimension-x8);
     border-radius: var(--seed-radius-full);
     --size: 14px;
@@ -171,7 +171,7 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-size: var(--seed-dimension-x3_5);
 }
-.seed-action-button__root--size_small {
+.seed-action-button--size_small {
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-r2);
     --size: 14px;
@@ -180,7 +180,7 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-size: var(--seed-dimension-x4);
 }
-.seed-action-button__root--size_medium {
+.seed-action-button--size_medium {
     height: var(--seed-dimension-x10);
     border-radius: var(--seed-radius-r2);
     --size: 16px;
@@ -189,7 +189,7 @@
     --seed-suffix-icon-size: var(--seed-dimension-x4);
     --seed-icon-size: 18px;
 }
-.seed-action-button__root--size_large {
+.seed-action-button--size_large {
     height: var(--seed-dimension-x13);
     border-radius: var(--seed-radius-r3);
     --size: 18px;
@@ -198,46 +198,48 @@
     --seed-suffix-icon-size: 22px;
     --seed-icon-size: 22px;
 }
-.seed-action-button__root--size_xsmall-layout_withText {
+.seed-action-button--layout_withText {}
+.seed-action-button--layout_iconOnly {}
+.seed-action-button--size_xsmall-layout_withText {
     gap: var(--seed-dimension-x1);
     padding-inline: var(--seed-dimension-x3_5);
     padding-block: var(--seed-dimension-x1_5);
     font-size: var(--seed-font-size-t4);
 }
-.seed-action-button__root--size_xsmall-layout_iconOnly {
+.seed-action-button--size_xsmall-layout_iconOnly {
     min-width: var(--seed-dimension-x8);
     padding-inline: var(--seed-dimension-x1_5);
     padding-block: var(--seed-dimension-x1_5);
 }
-.seed-action-button__root--size_small-layout_withText {
+.seed-action-button--size_small-layout_withText {
     gap: var(--seed-dimension-x1);
     padding-inline: var(--seed-dimension-x3_5);
     padding-block: var(--seed-dimension-x2);
     font-size: var(--seed-font-size-t4);
 }
-.seed-action-button__root--size_small-layout_iconOnly {
+.seed-action-button--size_small-layout_iconOnly {
     min-width: var(--seed-dimension-x9);
     padding-inline: var(--seed-dimension-x2);
     padding-block: var(--seed-dimension-x2);
 }
-.seed-action-button__root--size_medium-layout_withText {
+.seed-action-button--size_medium-layout_withText {
     gap: var(--seed-dimension-x1);
     padding-inline: var(--seed-dimension-x4);
     padding-block: var(--seed-dimension-x2_5);
     font-size: var(--seed-font-size-t4);
 }
-.seed-action-button__root--size_medium-layout_iconOnly {
+.seed-action-button--size_medium-layout_iconOnly {
     min-width: var(--seed-dimension-x10);
     padding-inline: var(--seed-dimension-x2_5);
     padding-block: var(--seed-dimension-x2_5);
 }
-.seed-action-button__root--size_large-layout_withText {
+.seed-action-button--size_large-layout_withText {
     gap: var(--seed-dimension-x2);
     padding-inline: var(--seed-dimension-x5);
     padding-block: var(--seed-dimension-x3_5);
     font-size: var(--seed-font-size-t6);
 }
-.seed-action-button__root--size_large-layout_iconOnly {
+.seed-action-button--size_large-layout_iconOnly {
     min-width: var(--seed-dimension-x13);
     padding-inline: var(--seed-dimension-x3_5);
     padding-block: var(--seed-dimension-x3_5);

package/recipes/action-button.d.ts

@@ -19,13 +19,11 @@ declare type ActionButtonVariantMap = {
 
 export declare type ActionButtonVariantProps = Partial<ActionButtonVariant>;
 
-export declare type ActionButtonSlotName = "root";
-
 export declare const actionButtonVariantMap: ActionButtonVariantMap;
 
 export declare const actionButton: ((
   props?: ActionButtonVariantProps,
-) => Record<ActionButtonSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends ActionButtonVariantProps>(
     props: T,
   ) => [ActionButtonVariantProps, Omit<T, keyof ActionButtonVariantProps>];

package/recipes/action-button.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const actionButtonSlotNames = [
-  [
-    "root",
-    "seed-action-button__root"
-  ]
-];
-
 const defaultVariant = {
   "variant": "brandSolid",
   "size": "medium",
@@ -72,13 +65,10 @@ export const actionButtonVariantMap = {
 export const actionButtonVariantKeys = Object.keys(actionButtonVariantMap);
 
 export function actionButton(props) {
-  return Object.fromEntries(
-    actionButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-action-button",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/action-chip.css

@@ -1,4 +1,4 @@
-.seed-action-chip__root {
+.seed-action-chip {
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -23,13 +23,13 @@
     --seed-count-font-weight: var(--seed-font-weight-medium);
     --seed-count-color: var(--seed-color-fg-neutral-muted);
 }
-.seed-action-chip__root:is(:active, [data-active]) {
+.seed-action-chip:is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-action-chip__root:is(:focus, [data-focus]) {
+.seed-action-chip:is(:focus, [data-focus]) {
     outline: none;
 }
-.seed-action-chip__root:is(:disabled, [disabled], [data-disabled]) {
+.seed-action-chip:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
     cursor: not-allowed;
@@ -37,7 +37,7 @@
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
     --seed-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-action-chip__root--size_medium {
+.seed-action-chip--size_medium {
     min-height: var(--seed-dimension-x9);
     padding-block: var(--seed-dimension-x2);
     gap: var(--seed-dimension-x1);
@@ -47,7 +47,7 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-size: var(--seed-dimension-x4);
 }
-.seed-action-chip__root--size_small {
+.seed-action-chip--size_small {
     min-height: var(--seed-dimension-x8);
     padding-block: var(--seed-dimension-x1_5);
     gap: var(--seed-dimension-x1);
@@ -57,15 +57,17 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-size: var(--seed-dimension-x4);
 }
-.seed-action-chip__root--size_medium-layout_withText {
+.seed-action-chip--layout_withText {}
+.seed-action-chip--layout_iconOnly {}
+.seed-action-chip--size_medium-layout_withText {
     padding-inline: var(--seed-dimension-x3_5);
 }
-.seed-action-chip__root--size_medium-layout_iconOnly {
+.seed-action-chip--size_medium-layout_iconOnly {
     min-width: var(--seed-dimension-x9);
 }
-.seed-action-chip__root--size_small-layout_withText {
+.seed-action-chip--size_small-layout_withText {
     padding-inline: var(--seed-dimension-x3);
 }
-.seed-action-chip__root--size_small-layout_iconOnly {
+.seed-action-chip--size_small-layout_iconOnly {
     min-width: var(--seed-dimension-x8);
 }

package/recipes/action-chip.d.ts

@@ -15,13 +15,11 @@ declare type ActionChipVariantMap = {
 
 export declare type ActionChipVariantProps = Partial<ActionChipVariant>;
 
-export declare type ActionChipSlotName = "root";
-
 export declare const actionChipVariantMap: ActionChipVariantMap;
 
 export declare const actionChip: ((
   props?: ActionChipVariantProps,
-) => Record<ActionChipSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends ActionChipVariantProps>(
     props: T,
   ) => [ActionChipVariantProps, Omit<T, keyof ActionChipVariantProps>];

package/recipes/action-chip.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const actionChipSlotNames = [
-  [
-    "root",
-    "seed-action-chip__root"
-  ]
-];
-
 const defaultVariant = {
   "size": "medium",
   "layout": "withText"
@@ -45,13 +38,10 @@ export const actionChipVariantMap = {
 export const actionChipVariantKeys = Object.keys(actionChipVariantMap);
 
 export function actionChip(props) {
-  return Object.fromEntries(
-    actionChipSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-action-chip",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/action-sheet-item.css

@@ -1,4 +1,4 @@
-.seed-action-sheet-item__root {
+.seed-action-sheet-item {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11,10 +11,10 @@
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
 }
-.seed-action-sheet-item__root:is(:active, [data-active]) {
+.seed-action-sheet-item:is(:active, [data-active]) {
     background-color: var(--seed-color-bg-layer-floating-pressed);
 }
-.seed-action-sheet-item__root:after {
+.seed-action-sheet-item:after {
     content: '';
     display: block;
     position: absolute;
@@ -24,9 +24,9 @@
     height: 1px;
     background: var(--seed-color-stroke-neutral);
 }
-.seed-action-sheet-item__root--tone_neutral {
+.seed-action-sheet-item--tone_neutral {
     color: var(--seed-color-fg-neutral);
 }
-.seed-action-sheet-item__root--tone_critical {
+.seed-action-sheet-item--tone_critical {
     color: var(--seed-color-fg-critical);
 }

package/recipes/action-sheet-item.d.ts

@@ -11,13 +11,11 @@ declare type ActionSheetItemVariantMap = {
 
 export declare type ActionSheetItemVariantProps = Partial<ActionSheetItemVariant>;
 
-export declare type ActionSheetItemSlotName = "root";
-
 export declare const actionSheetItemVariantMap: ActionSheetItemVariantMap;
 
 export declare const actionSheetItem: ((
   props?: ActionSheetItemVariantProps,
-) => Record<ActionSheetItemSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends ActionSheetItemVariantProps>(
     props: T,
   ) => [ActionSheetItemVariantProps, Omit<T, keyof ActionSheetItemVariantProps>];

package/recipes/action-sheet-item.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const actionSheetItemSlotNames = [
-  [
-    "root",
-    "seed-action-sheet-item__root"
-  ]
-];
-
 const defaultVariant = {
   "tone": "neutral"
 };
@@ -23,13 +16,10 @@ export const actionSheetItemVariantMap = {
 export const actionSheetItemVariantKeys = Object.keys(actionSheetItemVariantMap);
 
 export function actionSheetItem(props) {
-  return Object.fromEntries(
-    actionSheetItemSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-action-sheet-item",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/app-bar.css

@@ -1,5 +1,6 @@
 .seed-app-bar__root {
     z-index: var(--z-index-app-bar);
+    top: var(--seed-safe-area-top);
     position: absolute;
     box-sizing: border-box;
     width: 100%;

package/recipes/badge.css

@@ -1,4 +1,4 @@
-.seed-badge__root {
+.seed-badge {
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -9,7 +9,7 @@
     -moz-osx-font-smoothing: grayscale;
     text-decoration: none
 }
-.seed-badge__root--size_medium {
+.seed-badge--size_medium {
     min-height: var(--seed-dimension-x5);
     padding-inline: var(--seed-dimension-x1_5);
     padding-block: var(--seed-dimension-x0_5);
@@ -17,7 +17,7 @@
     font-size: var(--seed-font-size-t1);
     line-height: var(--seed-line-height-t1)
 }
-.seed-badge__root--size_large {
+.seed-badge--size_large {
     min-height: var(--seed-dimension-x6);
     padding-inline: var(--seed-dimension-x2);
     padding-block: var(--seed-dimension-x1);
@@ -25,72 +25,77 @@
     font-size: var(--seed-font-size-t2);
     line-height: var(--seed-line-height-t2)
 }
-.seed-badge__root--variant_weak {
+.seed-badge--variant_weak {
     font-weight: var(--seed-font-weight-medium)
 }
-.seed-badge__root--variant_solid {
+.seed-badge--variant_solid {
     font-weight: var(--seed-font-weight-bold)
 }
-.seed-badge__root--variant_outline {
+.seed-badge--variant_outline {
     font-weight: var(--seed-font-weight-bold)
 }
-.seed-badge__root--tone_neutral-variant_weak {
+.seed-badge--tone_neutral {}
+.seed-badge--tone_brand {}
+.seed-badge--tone_informative {}
+.seed-badge--tone_positive {}
+.seed-badge--tone_critical {}
+.seed-badge--tone_neutral-variant_weak {
     background-color: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral-muted)
 }
-.seed-badge__root--tone_neutral-variant_solid {
+.seed-badge--tone_neutral-variant_solid {
     background-color: var(--seed-color-palette-gray-800);
     color: var(--seed-color-fg-neutral-inverted)
 }
-.seed-badge__root--tone_neutral-variant_outline {
+.seed-badge--tone_neutral-variant_outline {
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
     color: var(--seed-color-fg-neutral-muted)
 }
-.seed-badge__root--tone_brand-variant_weak {
+.seed-badge--tone_brand-variant_weak {
     background-color: var(--seed-color-palette-carrot-100);
     color: var(--seed-color-palette-carrot-900)
 }
-.seed-badge__root--tone_brand-variant_solid {
+.seed-badge--tone_brand-variant_solid {
     background-color: var(--seed-color-bg-brand-solid);
     color: var(--seed-color-palette-static-white)
 }
-.seed-badge__root--tone_brand-variant_outline {
+.seed-badge--tone_brand-variant_outline {
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
     color: var(--seed-color-fg-brand)
 }
-.seed-badge__root--tone_informative-variant_weak {
+.seed-badge--tone_informative-variant_weak {
     background-color: var(--seed-color-bg-informative-weak);
     color: var(--seed-color-fg-informative-contrast)
 }
-.seed-badge__root--tone_informative-variant_solid {
+.seed-badge--tone_informative-variant_solid {
     background-color: var(--seed-color-bg-informative-solid);
     color: var(--seed-color-palette-static-white)
 }
-.seed-badge__root--tone_informative-variant_outline {
+.seed-badge--tone_informative-variant_outline {
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative);
     color: var(--seed-color-fg-informative)
 }
-.seed-badge__root--tone_positive-variant_weak {
+.seed-badge--tone_positive-variant_weak {
     background-color: var(--seed-color-bg-positive-weak);
     color: var(--seed-color-fg-positive-contrast)
 }
-.seed-badge__root--tone_positive-variant_solid {
+.seed-badge--tone_positive-variant_solid {
     background-color: var(--seed-color-bg-positive-solid);
     color: var(--seed-color-palette-static-white)
 }
-.seed-badge__root--tone_positive-variant_outline {
+.seed-badge--tone_positive-variant_outline {
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive);
     color: var(--seed-color-fg-positive)
 }
-.seed-badge__root--tone_critical-variant_weak {
+.seed-badge--tone_critical-variant_weak {
     background-color: var(--seed-color-bg-critical-weak);
     color: var(--seed-color-fg-critical-contrast)
 }
-.seed-badge__root--tone_critical-variant_solid {
+.seed-badge--tone_critical-variant_solid {
     background-color: var(--seed-color-bg-critical-solid);
     color: var(--seed-color-palette-static-white)
 }
-.seed-badge__root--tone_critical-variant_outline {
+.seed-badge--tone_critical-variant_outline {
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical);
     color: var(--seed-color-fg-critical)
 }

package/recipes/badge.d.ts

@@ -19,13 +19,11 @@ declare type BadgeVariantMap = {
 
 export declare type BadgeVariantProps = Partial<BadgeVariant>;
 
-export declare type BadgeSlotName = "root";
-
 export declare const badgeVariantMap: BadgeVariantMap;
 
 export declare const badge: ((
   props?: BadgeVariantProps,
-) => Record<BadgeSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends BadgeVariantProps>(
     props: T,
   ) => [BadgeVariantProps, Omit<T, keyof BadgeVariantProps>];