@seed-design/css 0.0.4 → 0.0.6

package/recipes/badge.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const badgeSlotNames = [
-  [
-    "root",
-    "seed-badge__root"
-  ]
-];
-
 const defaultVariant = {
   "size": "medium",
   "variant": "solid",
@@ -98,13 +91,10 @@ export const badgeVariantMap = {
 export const badgeVariantKeys = Object.keys(badgeVariantMap);
 
 export function badge(props) {
-  return Object.fromEntries(
-    badgeSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-badge",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/control-chip.css

@@ -1,4 +1,4 @@
-.seed-control-chip__root {
+.seed-control-chip {
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -22,13 +22,13 @@
     --seed-count-font-weight: var(--seed-font-weight-medium);
     --seed-count-color: var(--seed-color-fg-neutral-muted);
 }
-.seed-control-chip__root:is(:focus, [data-focus]) {
+.seed-control-chip:is(:focus, [data-focus]) {
     outline: none;
 }
-.seed-control-chip__root:is(:active, [data-active]) {
+.seed-control-chip:is(:active, [data-active]) {
     background: var(--seed-color-bg-layer-default-pressed);
 }
-.seed-control-chip__root:is(:checked, [data-checked]) {
+.seed-control-chip:is(:checked, [data-checked]) {
     box-shadow: none;
     background: var(--seed-color-bg-neutral-solid-muted);
     color: var(--seed-color-palette-static-white);
@@ -38,10 +38,10 @@
     --seed-icon-color: var(--seed-color-palette-static-white);
     --seed-count-color: var(--seed-color-palette-static-white-alpha-800);
 }
-.seed-control-chip__root:is(:checked, [data-checked]):is(:active, [data-active]) {
+.seed-control-chip:is(:checked, [data-checked]):is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-solid-muted-pressed);
 }
-.seed-control-chip__root:is(:disabled, [disabled], [data-disabled]) {
+.seed-control-chip:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
@@ -49,7 +49,7 @@
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
     --seed-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-control-chip__root--size_medium {
+.seed-control-chip--size_medium {
     min-height: var(--seed-dimension-x9);
     padding-block: var(--seed-dimension-x2);
     gap: var(--seed-dimension-x1);
@@ -59,7 +59,7 @@
     --seed-icon-size: var(--seed-dimension-x4);
     --seed-count-font-size: var(--seed-font-size-t4);
 }
-.seed-control-chip__root--size_small {
+.seed-control-chip--size_small {
     min-height: var(--seed-dimension-x8);
     padding-block: var(--seed-dimension-x1_5);
     gap: var(--seed-dimension-x1);
@@ -69,15 +69,17 @@
     --seed-icon-size: var(--seed-dimension-x4);
     --seed-count-font-size: var(--seed-font-size-t4);
 }
-.seed-control-chip__root--size_medium-layout_withText {
+.seed-control-chip--layout_withText {}
+.seed-control-chip--layout_iconOnly {}
+.seed-control-chip--size_medium-layout_withText {
     padding-inline: var(--seed-dimension-x3_5);
 }
-.seed-control-chip__root--size_medium-layout_iconOnly {
+.seed-control-chip--size_medium-layout_iconOnly {
     min-width: var(--seed-dimension-x9);
 }
-.seed-control-chip__root--size_small-layout_withText {
+.seed-control-chip--size_small-layout_withText {
     padding-inline: var(--seed-dimension-x3);
 }
-.seed-control-chip__root--size_small-layout_iconOnly {
+.seed-control-chip--size_small-layout_iconOnly {
     min-width: var(--seed-dimension-x8);
 }

package/recipes/control-chip.d.ts

@@ -15,13 +15,11 @@ declare type ControlChipVariantMap = {
 
 export declare type ControlChipVariantProps = Partial<ControlChipVariant>;
 
-export declare type ControlChipSlotName = "root";
-
 export declare const controlChipVariantMap: ControlChipVariantMap;
 
 export declare const controlChip: ((
   props?: ControlChipVariantProps,
-) => Record<ControlChipSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends ControlChipVariantProps>(
     props: T,
   ) => [ControlChipVariantProps, Omit<T, keyof ControlChipVariantProps>];

package/recipes/control-chip.mjs

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

package/recipes/extended-action-sheet-item.css

@@ -1,4 +1,4 @@
-.seed-extended-action-sheet-item__root {
+.seed-extended-action-sheet-item {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -12,20 +12,20 @@
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
 }
-.seed-extended-action-sheet-item__root:is(:active, [data-active]) {
+.seed-extended-action-sheet-item:is(:active, [data-active]) {
     background-color: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-extended-action-sheet-item__root:last-child {
+.seed-extended-action-sheet-item:last-child {
     box-shadow: none;
 }
-.seed-extended-action-sheet-item__root {
+.seed-extended-action-sheet-item {
     --seed-prefix-icon-size: 22px;
 }
-.seed-extended-action-sheet-item__root--tone_neutral {
+.seed-extended-action-sheet-item--tone_neutral {
     color: var(--seed-color-fg-neutral);
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-extended-action-sheet-item__root--tone_critical {
+.seed-extended-action-sheet-item--tone_critical {
     color: var(--seed-color-fg-critical);
     --seed-prefix-icon-color: var(--seed-color-fg-critical);
 }

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

@@ -11,13 +11,11 @@ declare type ExtendedActionSheetItemVariantMap = {
 
 export declare type ExtendedActionSheetItemVariantProps = Partial<ExtendedActionSheetItemVariant>;
 
-export declare type ExtendedActionSheetItemSlotName = "root";
-
 export declare const extendedActionSheetItemVariantMap: ExtendedActionSheetItemVariantMap;
 
 export declare const extendedActionSheetItem: ((
   props?: ExtendedActionSheetItemVariantProps,
-) => Record<ExtendedActionSheetItemSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends ExtendedActionSheetItemVariantProps>(
     props: T,
   ) => [ExtendedActionSheetItemVariantProps, Omit<T, keyof ExtendedActionSheetItemVariantProps>];

package/recipes/extended-action-sheet-item.mjs

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

package/recipes/extended-fab.css

@@ -1,4 +1,4 @@
-.seed-extended-fab__root {
+.seed-extended-fab {
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -12,37 +12,37 @@
     flex-shrink: 0;
     font-family: inherit;
 }
-.seed-extended-fab__root:is(:focus, [data-focus]) {
+.seed-extended-fab:is(:focus, [data-focus]) {
     outline: none;
 }
-.seed-extended-fab__root:is(:disabled, [disabled], [data-disabled]) {
+.seed-extended-fab:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.seed-extended-fab__root {
+.seed-extended-fab {
     border-radius: var(--seed-radius-full);
     box-shadow: 0px 2px 6px 0px #00000026;
 }
-.seed-extended-fab__root--variant_neutralSolid {
+.seed-extended-fab--variant_neutralSolid {
     background: var(--seed-color-bg-neutral-inverted);
     color: var(--seed-color-fg-neutral-inverted);
 }
-.seed-extended-fab__root--variant_neutralSolid:is(:active, [data-active]) {
+.seed-extended-fab--variant_neutralSolid:is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-inverted-pressed);
 }
-.seed-extended-fab__root--variant_neutralSolid {
+.seed-extended-fab--variant_neutralSolid {
     --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
 }
-.seed-extended-fab__root--variant_layerFloating {
+.seed-extended-fab--variant_layerFloating {
     background: var(--seed-color-bg-layer-floating);
     color: var(--seed-color-fg-neutral);
 }
-.seed-extended-fab__root--variant_layerFloating:is(:active, [data-active]) {
+.seed-extended-fab--variant_layerFloating:is(:active, [data-active]) {
     background: var(--seed-color-bg-layer-floating-pressed);
 }
-.seed-extended-fab__root--variant_layerFloating {
+.seed-extended-fab--variant_layerFloating {
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-extended-fab__root--size_small {
+.seed-extended-fab--size_small {
     padding-inline: var(--seed-dimension-x3_5);
     padding-block: var(--seed-dimension-x2_5);
     min-height: 40px;
@@ -52,7 +52,7 @@
     font-weight: var(--seed-font-weight-medium);
     --seed-prefix-icon-size: 16px;
 }
-.seed-extended-fab__root--size_medium {
+.seed-extended-fab--size_medium {
     padding-inline: var(--seed-dimension-x4);
     padding-block: var(--seed-dimension-x3);
     min-height: 48px;

package/recipes/extended-fab.d.ts

@@ -15,13 +15,11 @@ declare type ExtendedFabVariantMap = {
 
 export declare type ExtendedFabVariantProps = Partial<ExtendedFabVariant>;
 
-export declare type ExtendedFabSlotName = "root";
-
 export declare const extendedFabVariantMap: ExtendedFabVariantMap;
 
 export declare const extendedFab: ((
   props?: ExtendedFabVariantProps,
-) => Record<ExtendedFabSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends ExtendedFabVariantProps>(
     props: T,
   ) => [ExtendedFabVariantProps, Omit<T, keyof ExtendedFabVariantProps>];

package/recipes/extended-fab.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const extendedFabSlotNames = [
-  [
-    "root",
-    "seed-extended-fab__root"
-  ]
-];
-
 const defaultVariant = {
   "variant": "neutralSolid",
   "size": "medium"
@@ -28,13 +21,10 @@ export const extendedFabVariantMap = {
 export const extendedFabVariantKeys = Object.keys(extendedFabVariantMap);
 
 export function extendedFab(props) {
-  return Object.fromEntries(
-    extendedFabSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-extended-fab",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/fab.css

@@ -1,4 +1,4 @@
-.seed-fab__root {
+.seed-fab {
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -11,13 +11,13 @@
     text-decoration: none;
     font-family: inherit;
 }
-.seed-fab__root:is(:focus, [data-focus]) {
+.seed-fab:is(:focus, [data-focus]) {
     outline: none;
 }
-.seed-fab__root:is(:disabled, [disabled], [data-disabled]) {
+.seed-fab:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.seed-fab__root {
+.seed-fab {
     background: var(--seed-color-bg-layer-floating);
     border-radius: var(--seed-radius-full);
     box-shadow: 0px 2px 6px 0px #00000026;
@@ -26,6 +26,6 @@
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-fab__root:is(:active, [data-active]) {
+.seed-fab:is(:active, [data-active]) {
     background: var(--seed-color-bg-layer-floating-pressed);
 }

package/recipes/fab.d.ts

@@ -8,13 +8,11 @@ declare type FabVariantMap = {
 
 export declare type FabVariantProps = Partial<FabVariant>;
 
-export declare type FabSlotName = "root";
-
 export declare const fabVariantMap: FabVariantMap;
 
 export declare const fab: ((
   props?: FabVariantProps,
-) => Record<FabSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends FabVariantProps>(
     props: T,
   ) => [FabVariantProps, Omit<T, keyof FabVariantProps>];

package/recipes/fab.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const fabSlotNames = [
-  [
-    "root",
-    "seed-fab__root"
-  ]
-];
-
 const defaultVariant = {};
 
 const compoundVariants = [];
@@ -16,13 +9,10 @@ export const fabVariantMap = {};
 export const fabVariantKeys = Object.keys(fabVariantMap);
 
 export function fab(props) {
-  return Object.fromEntries(
-    fabSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-fab",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/help-bubble.css

@@ -25,8 +25,8 @@
 }
 .seed-help-bubble__arrow {
     fill: var(--seed-color-bg-neutral-solid);
-    width: 10px;
-    height: 6px;
+    width: 12px;
+    height: 8px;
 }
 .seed-help-bubble__title {
     color: var(--seed-color-palette-static-white);

package/recipes/inline-banner.css

@@ -46,7 +46,6 @@
     cursor: pointer;
     display: flex;
     align-items: center;
-    height: var(--seed-dimension-x10);
     margin-left: var(--seed-dimension-x4);
     font-size: var(--seed-font-size-t2);
     line-height: var(--seed-line-height-t2);

package/recipes/link-content.css

@@ -1,4 +1,4 @@
-.seed-link-content__root {
+.seed-link-content {
     display: inline-flex;
     align-items: center;
     cursor: pointer;
@@ -15,24 +15,27 @@
     color: var(--seed-box-color);
     --seed-suffix-icon-color: var(--seed-box-color)
 }
-.seed-link-content__root--weight_bold {
+.seed-link-content--weight_bold {
     font-weight: var(--seed-font-weight-bold)
 }
-.seed-link-content__root--weight_regular {
+.seed-link-content--weight_regular {
     font-weight: var(--seed-font-weight-regular)
 }
-.seed-link-content__root--size_t6 {
+.seed-link-content--size_t6 {
     font-size: var(--seed-font-size-t6);
     line-height: var(--seed-line-height-t6);
+    gap: var(--seed-dimension-x0_5);
     --seed-suffix-icon-size: var(--seed-dimension-x4)
 }
-.seed-link-content__root--size_t5 {
+.seed-link-content--size_t5 {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
+    gap: var(--seed-dimension-x0_5);
     --seed-suffix-icon-size: var(--seed-dimension-x3_5)
 }
-.seed-link-content__root--size_t4 {
+.seed-link-content--size_t4 {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
+    gap: var(--seed-dimension-x0_5);
     --seed-suffix-icon-size: var(--seed-dimension-x3)
 }

package/recipes/link-content.d.ts

@@ -15,13 +15,11 @@ declare type LinkContentVariantMap = {
 
 export declare type LinkContentVariantProps = Partial<LinkContentVariant>;
 
-export declare type LinkContentSlotName = "root";
-
 export declare const linkContentVariantMap: LinkContentVariantMap;
 
 export declare const linkContent: ((
   props?: LinkContentVariantProps,
-) => Record<LinkContentSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends LinkContentVariantProps>(
     props: T,
   ) => [LinkContentVariantProps, Omit<T, keyof LinkContentVariantProps>];

package/recipes/link-content.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const linkContentSlotNames = [
-  [
-    "root",
-    "seed-link-content__root"
-  ]
-];
-
 const defaultVariant = {
   "size": "t4",
   "weight": "regular"
@@ -29,13 +22,10 @@ export const linkContentVariantMap = {
 export const linkContentVariantKeys = Object.keys(linkContentVariantMap);
 
 export function linkContent(props) {
-  return Object.fromEntries(
-    linkContentSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-link-content",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/manner-temp-badge.css

@@ -1,4 +1,4 @@
-.seed-manner-temp-badge__root {
+.seed-manner-temp-badge {
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -16,27 +16,27 @@
     line-height: var(--seed-line-height-t1);
     font-weight: var(--seed-font-weight-bold)
 }
-.seed-manner-temp-badge__root--level_l1 {
+.seed-manner-temp-badge--level_l1 {
     background-color: var(--seed-color-manner-temp-l1-bg);
     color: var(--seed-color-manner-temp-l1-text)
 }
-.seed-manner-temp-badge__root--level_l2 {
+.seed-manner-temp-badge--level_l2 {
     background-color: var(--seed-color-manner-temp-l2-bg);
     color: var(--seed-color-manner-temp-l2-text)
 }
-.seed-manner-temp-badge__root--level_l3 {
+.seed-manner-temp-badge--level_l3 {
     background-color: var(--seed-color-manner-temp-l3-bg);
     color: var(--seed-color-manner-temp-l3-text)
 }
-.seed-manner-temp-badge__root--level_l4 {
+.seed-manner-temp-badge--level_l4 {
     background-color: var(--seed-color-manner-temp-l4-bg);
     color: var(--seed-color-manner-temp-l4-text)
 }
-.seed-manner-temp-badge__root--level_l5 {
+.seed-manner-temp-badge--level_l5 {
     background-color: var(--seed-color-manner-temp-l5-bg);
     color: var(--seed-color-manner-temp-l5-text)
 }
-.seed-manner-temp-badge__root--level_l6 {
+.seed-manner-temp-badge--level_l6 {
     background-color: var(--seed-color-manner-temp-l6-bg);
     color: var(--seed-color-manner-temp-l6-text)
 }

package/recipes/manner-temp-badge.d.ts

@@ -11,13 +11,11 @@ declare type MannerTempBadgeVariantMap = {
 
 export declare type MannerTempBadgeVariantProps = Partial<MannerTempBadgeVariant>;
 
-export declare type MannerTempBadgeSlotName = "root";
-
 export declare const mannerTempBadgeVariantMap: MannerTempBadgeVariantMap;
 
 export declare const mannerTempBadge: ((
   props?: MannerTempBadgeVariantProps,
-) => Record<MannerTempBadgeSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends MannerTempBadgeVariantProps>(
     props: T,
   ) => [MannerTempBadgeVariantProps, Omit<T, keyof MannerTempBadgeVariantProps>];

package/recipes/manner-temp-badge.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const mannerTempBadgeSlotNames = [
-  [
-    "root",
-    "seed-manner-temp-badge__root"
-  ]
-];
-
 const defaultVariant = {
   "level": "l1"
 };
@@ -27,13 +20,10 @@ export const mannerTempBadgeVariantMap = {
 export const mannerTempBadgeVariantKeys = Object.keys(mannerTempBadgeVariantMap);
 
 export function mannerTempBadge(props) {
-  return Object.fromEntries(
-    mannerTempBadgeSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-manner-temp-badge",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }