@seed-design/css 0.2.0 → 0.2.3

package/vars/component/chip.d.ts

@@ -45,18 +45,6 @@ export declare const vars: {
     "pressed": {
       "root": {
         "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "disabled": {
@@ -84,18 +72,6 @@ export declare const vars: {
     "selectedPressed": {
       "root": {
         "color": "var(--seed-color-bg-neutral-inverted-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
       }
     },
     "selectedDisabled": {
@@ -126,21 +102,7 @@ export declare const vars: {
     },
     "pressed": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "strokeWidth": "1px",
         "color": "var(--seed-color-bg-layer-default-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "disabled": {
@@ -168,18 +130,6 @@ export declare const vars: {
     "selectedPressed": {
       "root": {
         "color": "var(--seed-color-bg-neutral-inverted-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
       }
     },
     "selectedDisabled": {
@@ -210,21 +160,7 @@ export declare const vars: {
     },
     "pressed": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "strokeWidth": "1px",
         "color": "var(--seed-color-bg-layer-default-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "disabled": {
@@ -235,39 +171,12 @@ export declare const vars: {
     "selected": {
       "root": {
         "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
-        "strokeWidth": "1px",
         "color": "var(--seed-color-bg-neutral-weak)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "selectedPressed": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
-        "strokeWidth": "1px",
         "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "selectedDisabled": {

package/vars/component/chip.mjs

@@ -45,18 +45,6 @@ export const vars = {
     "pressed": {
       "root": {
         "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "disabled": {
@@ -84,18 +72,6 @@ export const vars = {
     "selectedPressed": {
       "root": {
         "color": "var(--seed-color-bg-neutral-inverted-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
       }
     },
     "selectedDisabled": {
@@ -126,21 +102,7 @@ export const vars = {
     },
     "pressed": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "strokeWidth": "1px",
         "color": "var(--seed-color-bg-layer-default-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "disabled": {
@@ -168,18 +130,6 @@ export const vars = {
     "selectedPressed": {
       "root": {
         "color": "var(--seed-color-bg-neutral-inverted-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
       }
     },
     "selectedDisabled": {
@@ -210,21 +160,7 @@ export const vars = {
     },
     "pressed": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "strokeWidth": "1px",
         "color": "var(--seed-color-bg-layer-default-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "disabled": {
@@ -235,39 +171,12 @@ export const vars = {
     "selected": {
       "root": {
         "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
-        "strokeWidth": "1px",
         "color": "var(--seed-color-bg-neutral-weak)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "selectedPressed": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
-        "strokeWidth": "1px",
         "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "selectedDisabled": {

package/vars/component/index.d.ts

@@ -10,6 +10,7 @@ export { vars as bottomSheetCloseButton } from "./bottom-sheet-close-button";
 export { vars as bottomSheet } from "./bottom-sheet";
 export { vars as callout } from "./callout";
 export { vars as checkbox } from "./checkbox";
+export { vars as checkmark } from "./checkmark";
 export { vars as chipTab } from "./chip-tab";
 export { vars as chipTablist } from "./chip-tablist";
 export { vars as chip } from "./chip";
@@ -27,6 +28,7 @@ export { vars as helpBubble } from "./help-bubble";
 export { vars as identityPlaceholder } from "./identity-placeholder";
 export { vars as inlineBanner } from "./inline-banner";
 export { vars as linkContent } from "./link-content";
+export { vars as listItem } from "./list-item";
 export { vars as mannerTempBadge } from "./manner-temp-badge";
 export { vars as mannerTemp } from "./manner-temp";
 export { vars as menuSheetCloseButton } from "./menu-sheet-close-button";
@@ -36,6 +38,7 @@ export { vars as notificationBadge } from "./notification-badge";
 export { vars as pageBanner } from "./page-banner";
 export { vars as progressCircle } from "./progress-circle";
 export { vars as radio } from "./radio";
+export { vars as radiomark } from "./radiomark";
 export { vars as reactionButton } from "./reaction-button";
 export { vars as segmentedControlItem } from "./segmented-control-item";
 export { vars as segmentedControl } from "./segmented-control";

package/vars/component/index.mjs

@@ -10,6 +10,7 @@ export { vars as bottomSheetCloseButton } from "./bottom-sheet-close-button.mjs"
 export { vars as bottomSheet } from "./bottom-sheet.mjs";
 export { vars as callout } from "./callout.mjs";
 export { vars as checkbox } from "./checkbox.mjs";
+export { vars as checkmark } from "./checkmark.mjs";
 export { vars as chipTab } from "./chip-tab.mjs";
 export { vars as chipTablist } from "./chip-tablist.mjs";
 export { vars as chip } from "./chip.mjs";
@@ -27,6 +28,7 @@ export { vars as helpBubble } from "./help-bubble.mjs";
 export { vars as identityPlaceholder } from "./identity-placeholder.mjs";
 export { vars as inlineBanner } from "./inline-banner.mjs";
 export { vars as linkContent } from "./link-content.mjs";
+export { vars as listItem } from "./list-item.mjs";
 export { vars as mannerTempBadge } from "./manner-temp-badge.mjs";
 export { vars as mannerTemp } from "./manner-temp.mjs";
 export { vars as menuSheetCloseButton } from "./menu-sheet-close-button.mjs";
@@ -36,6 +38,7 @@ export { vars as notificationBadge } from "./notification-badge.mjs";
 export { vars as pageBanner } from "./page-banner.mjs";
 export { vars as progressCircle } from "./progress-circle.mjs";
 export { vars as radio } from "./radio.mjs";
+export { vars as radiomark } from "./radiomark.mjs";
 export { vars as reactionButton } from "./reaction-button.mjs";
 export { vars as segmentedControlItem } from "./segmented-control-item.mjs";
 export { vars as segmentedControl } from "./segmented-control.mjs";

package/vars/component/list-item.d.ts

@@ -0,0 +1,72 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "colorDuration": "var(--seed-duration-d3)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x0_5)",
+        "paddingRight": "var(--seed-dimension-x2_5)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "detail": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "prefix": {
+        "paddingRight": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "22px",
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffix": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "suffixText": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "suffixIcon": {
+        "size": "18px",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "highlighted": {
+      "root": {
+        "color": "var(--seed-color-palette-carrot-100)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "title": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "detail": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/list-item.mjs

@@ -0,0 +1,72 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "colorDuration": "var(--seed-duration-d3)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x0_5)",
+        "paddingRight": "var(--seed-dimension-x2_5)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "detail": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "prefix": {
+        "paddingRight": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "22px",
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffix": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "suffixText": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "suffixIcon": {
+        "size": "18px",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "highlighted": {
+      "root": {
+        "color": "var(--seed-color-palette-carrot-100)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "title": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "detail": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/radio.d.ts

@@ -1,76 +1,52 @@
 export declare const vars: {
   "base": {
     "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-layer-default)",
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "cornerRadius": "var(--seed-radius-full)"
-      },
-      "icon": {
-        "cornerRadius": "var(--seed-radius-full)"
-      }
-    },
-    "enabledPressed": {
-      "root": {
-        "color": "var(--seed-color-bg-layer-default-pressed)"
-      }
-    },
-    "enabledSelected": {
-      "root": {
-        "color": "var(--seed-color-bg-brand-solid)",
-        "strokeWidth": "0px"
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
       },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "enabledSelectedPressed": {
       "root": {
-        "color": "var(--seed-color-bg-brand-solid-pressed)"
+        "gap": "var(--seed-dimension-x2)"
       }
     },
     "disabled": {
-      "root": {
-        "color": "var(--seed-color-palette-gray-300)"
-      }
-    },
-    "disabledSelected": {
-      "root": {
-        "strokeColor": "var(--seed-color-palette-gray-300)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-gray-300)"
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
       }
     }
   },
-  "sizeLarge": {
+  "weightDefault": {
     "enabled": {
-      "root": {
-        "size": "var(--seed-dimension-x6)"
-      },
-      "icon": {
-        "size": "var(--seed-dimension-x2_5)"
+      "label": {
+        "fontWeight": "var(--seed-font-weight-regular)"
       }
-    },
-    "disabled": {
-      "icon": {
-        "size": "var(--seed-dimension-x3)"
+    }
+  },
+  "weightStronger": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
       }
     }
   },
   "sizeMedium": {
     "enabled": {
       "root": {
-        "size": "var(--seed-dimension-x5)"
+        "minHeight": "var(--seed-dimension-x8)"
       },
-      "icon": {
-        "size": "var(--seed-dimension-x2)"
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
       }
-    },
-    "disabled": {
-      "icon": {
-        "size": "var(--seed-dimension-x2_5)"
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
       }
     }
   }

package/vars/component/radio.mjs

@@ -1,76 +1,52 @@
 export const vars = {
   "base": {
     "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-layer-default)",
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "cornerRadius": "var(--seed-radius-full)"
-      },
-      "icon": {
-        "cornerRadius": "var(--seed-radius-full)"
-      }
-    },
-    "enabledPressed": {
-      "root": {
-        "color": "var(--seed-color-bg-layer-default-pressed)"
-      }
-    },
-    "enabledSelected": {
-      "root": {
-        "color": "var(--seed-color-bg-brand-solid)",
-        "strokeWidth": "0px"
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
       },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "enabledSelectedPressed": {
       "root": {
-        "color": "var(--seed-color-bg-brand-solid-pressed)"
+        "gap": "var(--seed-dimension-x2)"
       }
     },
     "disabled": {
-      "root": {
-        "color": "var(--seed-color-palette-gray-300)"
-      }
-    },
-    "disabledSelected": {
-      "root": {
-        "strokeColor": "var(--seed-color-palette-gray-300)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-gray-300)"
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
       }
     }
   },
-  "sizeLarge": {
+  "weightDefault": {
     "enabled": {
-      "root": {
-        "size": "var(--seed-dimension-x6)"
-      },
-      "icon": {
-        "size": "var(--seed-dimension-x2_5)"
+      "label": {
+        "fontWeight": "var(--seed-font-weight-regular)"
       }
-    },
-    "disabled": {
-      "icon": {
-        "size": "var(--seed-dimension-x3)"
+    }
+  },
+  "weightStronger": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
       }
     }
   },
   "sizeMedium": {
     "enabled": {
       "root": {
-        "size": "var(--seed-dimension-x5)"
+        "minHeight": "var(--seed-dimension-x8)"
       },
-      "icon": {
-        "size": "var(--seed-dimension-x2)"
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
       }
-    },
-    "disabled": {
-      "icon": {
-        "size": "var(--seed-dimension-x2_5)"
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
       }
     }
   }