@seed-design/css 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/action-button.d.ts

@@ -1,14 +1,14 @@
 declare interface ActionButtonVariant {
   /**
-  * @default brandSolid
+  * @default "brandSolid"
   */
   variant: "brandSolid" | "neutralSolid" | "neutralWeak" | "criticalSolid" | "brandOutline" | "neutralOutline" | "ghost";
 /**
-  * @default medium
+  * @default "medium"
   */
   size: "xsmall" | "small" | "medium" | "large";
 /**
-  * @default withText
+  * @default "withText"
   */
   layout: "withText" | "iconOnly";
 }

package/recipes/action-chip.d.ts

@@ -1,10 +1,10 @@
 declare interface ActionChipVariant {
   /**
-  * @default medium
+  * @default "medium"
   */
   size: "medium" | "small";
 /**
-  * @default withText
+  * @default "withText"
   */
   layout: "withText" | "iconOnly";
 }

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

@@ -1,6 +1,6 @@
 declare interface ActionSheetItemVariant {
   /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "critical";
 }

package/recipes/app-bar-main.d.ts

@@ -1,18 +1,18 @@
 declare interface AppBarMainVariant {
   /**
-  * @default titleOnly
+  * @default "titleOnly"
   */
   layout: "titleOnly" | "withSubtitle";
 /**
-  * @default cupertino
+  * @default "cupertino"
   */
   theme: "cupertino" | "android";
 /**
-  * @default slideFromRightIOS
+  * @default "slideFromRightIOS"
   */
   transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
 /**
-  * @default layer
+  * @default "layer"
   */
   tone: "layer" | "transparent";
 }

package/recipes/app-bar.d.ts

@@ -1,14 +1,14 @@
 declare interface AppBarVariant {
   /**
-  * @default cupertino
+  * @default "cupertino"
   */
   theme: "cupertino" | "android";
 /**
-  * @default slideFromRightIOS
+  * @default "slideFromRightIOS"
   */
   transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
 /**
-  * @default layer
+  * @default "layer"
   */
   tone: "layer" | "transparent";
 /**

package/recipes/app-screen.d.ts

@@ -1,18 +1,18 @@
 declare interface AppScreenVariant {
   /**
-  * @default cupertino
+  * @default "cupertino"
   */
   theme: "cupertino" | "android";
 /**
-  * @default slideFromRightIOS
+  * @default "slideFromRightIOS"
   */
   transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
 /**
-  * @default appBar
+  * @default "appBar"
   */
   layerOffsetTop: "none" | "safeArea" | "appBar";
 /**
-  * @default none
+  * @default "none"
   */
   layerOffsetBottom: "none" | "safeArea";
 }

package/recipes/avatar.d.ts

@@ -4,7 +4,7 @@ declare interface AvatarVariant {
   */
   size: "20" | "24" | "36" | "42" | "48" | "64" | "80" | "96" | "108";
 /**
-  * @default none
+  * @default "none"
   */
   badgeMask: "none" | "circle" | "flower" | "shield";
 }

package/recipes/badge.d.ts

@@ -1,14 +1,14 @@
 declare interface BadgeVariant {
   /**
-  * @default medium
+  * @default "medium"
   */
   size: "medium" | "large";
 /**
-  * @default solid
+  * @default "solid"
   */
   variant: "weak" | "solid" | "outline";
 /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "brand" | "informative" | "positive" | "warning" | "critical";
 }

package/recipes/bottom-sheet.d.ts

@@ -1,6 +1,6 @@
 declare interface BottomSheetVariant {
   /**
-  * @default left
+  * @default "left"
   */
   headerAlign: "left" | "center";
 }

package/recipes/callout.d.ts

@@ -1,6 +1,6 @@
 declare interface CalloutVariant {
   /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "informative" | "warning" | "critical" | "magic";
 }

package/recipes/checkbox.d.ts

@@ -1,14 +1,14 @@
 declare interface CheckboxVariant {
   /**
-  * @default default
+  * @default "default"
   */
   weight: "default" | "stronger";
 /**
-  * @default square
+  * @default "square"
   */
   variant: "square" | "ghost";
 /**
-  * @default medium
+  * @default "medium"
   */
   size: "large" | "medium";
 }

package/recipes/chip-tabs.d.ts

@@ -1,10 +1,10 @@
 declare interface ChipTabsVariant {
   /**
-  * @default neutralSolid
+  * @default "neutralSolid"
   */
   variant: "neutralSolid" | "brandSolid";
 /**
-  * @default hug
+  * @default "hug"
   */
   contentLayout: "fill" | "hug";
 /**

package/recipes/chip.css

@@ -25,23 +25,18 @@
 .seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.seed-chip__root {
-    --seed-icon-color: inherit;
-}
 .seed-chip__label {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: var(--seed-font-weight-medium);
     padding-inline: var(--seed-dimension-x1_5);
-    color: inherit;
 }
 .seed-chip__prefixIcon {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
     padding-left: var(--seed-dimension-x1_5);
-    --seed-icon-color: inherit;
 }
 .seed-chip__prefixAvatar {
     display: inline-flex;
@@ -53,88 +48,93 @@
     align-items: center;
     flex-shrink: 0;
     padding-right: var(--seed-dimension-x1_5);
-    --seed-icon-color: inherit;
 }
 .seed-chip__root--variant_solid {
     background: var(--seed-color-bg-neutral-weak);
-    color: var(--seed-color-fg-neutral);
+    --seed-icon-color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_solid:is(:checked, [data-checked]) {
     box-shadow: none;
     background: var(--seed-color-bg-neutral-inverted);
-    color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
 }
 .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
     background: var(--seed-color-bg-neutral-weak-pressed);
-    color: var(--seed-color-fg-neutral);
-    --seed-icon-color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
     background: var(--seed-color-bg-neutral-inverted-pressed);
-    color: var(--seed-color-fg-neutral-inverted);
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
 }
 .seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
     opacity: 0.5;
 }
-.seed-chip__root--variant_solid {
-    --seed-icon-color: var(--seed-color-fg-neutral);
+.seed-chip__label--variant_solid {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-chip__label--variant_solid:is(:checked, [data-checked]) {
+    color: var(--seed-color-fg-neutral-inverted);
+}
+.seed-chip__prefixIcon--variant_solid {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-chip__suffixIcon--variant_solid {
+    color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_outlineStrong {
     background: var(--seed-color-bg-layer-default);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
-    color: var(--seed-color-fg-neutral);
+    --seed-icon-color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
     background: var(--seed-color-bg-layer-default-pressed);
-    color: var(--seed-color-fg-neutral);
-    --seed-icon-color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
     background: var(--seed-color-bg-neutral-inverted);
-    color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
 }
 .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
     background: var(--seed-color-bg-neutral-inverted-pressed);
-    color: var(--seed-color-fg-neutral-inverted);
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
 }
 .seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
     opacity: 0.5;
 }
-.seed-chip__root--variant_outlineStrong {
-    --seed-icon-color: var(--seed-color-fg-neutral);
+.seed-chip__label--variant_outlineStrong {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-chip__label--variant_outlineStrong:is(:checked, [data-checked]) {
+    color: var(--seed-color-fg-neutral-inverted);
+}
+.seed-chip__prefixIcon--variant_outlineStrong {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-chip__suffixIcon--variant_outlineStrong {
+    color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_outlineWeak {
     background: var(--seed-color-bg-layer-default);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
-    color: var(--seed-color-fg-neutral);
+    --seed-icon-color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
     background: var(--seed-color-bg-layer-default-pressed);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
-    color: var(--seed-color-fg-neutral);
-    --seed-icon-color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
     background: var(--seed-color-bg-neutral-weak);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
-    color: var(--seed-color-fg-neutral);
-    --seed-icon-color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
     background: var(--seed-color-bg-neutral-weak-pressed);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
-    color: var(--seed-color-fg-neutral);
-    --seed-icon-color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
     opacity: 0.5;
 }
-.seed-chip__root--variant_outlineWeak {
-    --seed-icon-color: var(--seed-color-fg-neutral);
+.seed-chip__label--variant_outlineWeak {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-chip__prefixIcon--variant_outlineWeak {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-chip__suffixIcon--variant_outlineWeak {
+    color: var(--seed-color-fg-neutral);
 }
 .seed-chip__root--size_large {
     height: 40px;

package/recipes/chip.d.ts

@@ -1,14 +1,14 @@
 declare interface ChipVariant {
   /**
-  * @default solid
+  * @default "solid"
   */
   variant: "solid" | "outlineStrong" | "outlineWeak";
 /**
-  * @default medium
+  * @default "medium"
   */
   size: "large" | "medium" | "small";
 /**
-  * @default withText
+  * @default "withText"
   */
   layout: "iconOnly" | "withText";
 }

package/recipes/contextual-floating-button.d.ts

@@ -1,10 +1,10 @@
 declare interface ContextualFloatingButtonVariant {
   /**
-  * @default solid
+  * @default "solid"
   */
   variant: "solid" | "layer";
 /**
-  * @default withText
+  * @default "withText"
   */
   layout: "withText" | "iconOnly";
 }

package/recipes/control-chip.d.ts

@@ -1,10 +1,10 @@
 declare interface ControlChipVariant {
   /**
-  * @default medium
+  * @default "medium"
   */
   size: "medium" | "small";
 /**
-  * @default withText
+  * @default "withText"
   */
   layout: "withText" | "iconOnly";
 }

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

@@ -1,6 +1,6 @@
 declare interface ExtendedActionSheetItemVariant {
   /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "critical";
 }

package/recipes/extended-fab.d.ts

@@ -1,10 +1,10 @@
 declare interface ExtendedFabVariant {
   /**
-  * @default neutralSolid
+  * @default "neutralSolid"
   */
   variant: "neutralSolid" | "layerFloating";
 /**
-  * @default medium
+  * @default "medium"
   */
   size: "small" | "medium";
 }

package/recipes/identity-placeholder.d.ts

@@ -1,6 +1,6 @@
 declare interface IdentityPlaceholderVariant {
   /**
-  * @default person
+  * @default "person"
   */
   identity: "person";
 }

package/recipes/inline-banner.d.ts

@@ -1,6 +1,6 @@
 declare interface InlineBannerVariant {
   /**
-  * @default neutralWeak
+  * @default "neutralWeak"
   */
   variant: "neutralWeak" | "positiveWeak" | "informativeWeak" | "warningWeak" | "warningSolid" | "criticalWeak" | "criticalSolid";
 }

package/recipes/link-content.d.ts

@@ -1,10 +1,10 @@
 declare interface LinkContentVariant {
   /**
-  * @default regular
+  * @default "regular"
   */
   weight: "bold" | "regular";
 /**
-  * @default t4
+  * @default "t4"
   */
   size: "t6" | "t5" | "t4";
 }

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

@@ -1,6 +1,6 @@
 declare interface MannerTempBadgeVariant {
   /**
-  * @default l1
+  * @default "l1"
   */
   level: "l1" | "l2" | "l3" | "l4" | "l5" | "l6";
 }

package/recipes/manner-temp.d.ts

@@ -1,6 +1,6 @@
 declare interface MannerTempVariant {
   /**
-  * @default l1
+  * @default "l1"
   */
   level: "l1" | "l2" | "l3" | "l4" | "l5" | "l6";
 }

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

@@ -1,10 +1,10 @@
 declare interface MenuSheetItemVariant {
   /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "critical";
 /**
-  * @default left
+  * @default "left"
   */
   labelAlign: "left" | "center";
 }

package/recipes/notification-badge-positioner.d.ts

@@ -1,10 +1,10 @@
 declare interface NotificationBadgePositionerVariant {
   /**
-  * @default icon
+  * @default "icon"
   */
   attach: "icon" | "text";
 /**
-  * @default large
+  * @default "large"
   */
   size: "small" | "large";
 }

package/recipes/notification-badge.d.ts

@@ -1,6 +1,6 @@
 declare interface NotificationBadgeVariant {
   /**
-  * @default large
+  * @default "large"
   */
   size: "small" | "large";
 }

package/recipes/page-banner.d.ts

@@ -1,10 +1,10 @@
 declare interface PageBannerVariant {
   /**
-  * @default weak
+  * @default "weak"
   */
   variant: "weak" | "solid";
 /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "informative" | "positive" | "warning" | "critical";
 }

package/recipes/progress-circle.d.ts

@@ -1,6 +1,6 @@
 declare interface ProgressCircleVariant {
   /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "brand" | "staticWhite" | "inherit";
 /**

package/recipes/radio.d.ts

@@ -1,6 +1,6 @@
 declare interface RadioVariant {
   /**
-  * @default medium
+  * @default "medium"
   */
   size: "large" | "medium";
 }

package/recipes/reaction-button.d.ts

@@ -1,6 +1,6 @@
 declare interface ReactionButtonVariant {
   /**
-  * @default small
+  * @default "small"
   */
   size: "xsmall" | "small";
 }

package/recipes/skeleton.d.ts

@@ -4,7 +4,7 @@ declare interface SkeletonVariant {
   */
   radius: "0" | "8" | "16" | "full";
 /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "magic";
 }

package/recipes/snackbar.d.ts

@@ -1,6 +1,6 @@
 declare interface SnackbarVariant {
   /**
-  * @default default
+  * @default "default"
   */
   variant: "default" | "positive" | "critical";
 }

package/recipes/tabs.d.ts

@@ -1,14 +1,14 @@
 declare interface TabsVariant {
   /**
-  * @default fill
+  * @default "fill"
   */
   triggerLayout: "fill" | "hug";
 /**
-  * @default hug
+  * @default "hug"
   */
   contentLayout: "fill" | "hug";
 /**
-  * @default small
+  * @default "small"
   */
   size: "small" | "medium";
 /**

package/recipes/text-field.d.ts

@@ -1,6 +1,6 @@
 declare interface TextFieldVariant {
   /**
-  * @default medium
+  * @default "medium"
   */
   size: "xlarge" | "large" | "medium";
 }

package/recipes/text.d.ts

@@ -1,14 +1,14 @@
 declare interface TextVariant {
   /**
-  * @default t5Regular
+  * @default "t5Regular"
   */
   textStyle: "screenTitle" | "articleBody" | "t1Regular" | "t1Medium" | "t1Bold" | "t2Regular" | "t2Medium" | "t2Bold" | "t3Regular" | "t3Medium" | "t3Bold" | "t4Regular" | "t4Medium" | "t4Bold" | "t5Regular" | "t5Medium" | "t5Bold" | "t6Regular" | "t6Medium" | "t6Bold" | "t7Regular" | "t7Medium" | "t7Bold" | "t8Bold" | "t9Bold" | "t10Bold";
 /**
-  * @default none
+  * @default "none"
   */
   maxLines: "none" | "single" | "multi";
 /**
-  * @default none
+  * @default "none"
   */
   textDecorationLine: "none" | "line-through";
 }

package/recipes/toggle-button.d.ts

@@ -1,10 +1,10 @@
 declare interface ToggleButtonVariant {
   /**
-  * @default brandSolid
+  * @default "brandSolid"
   */
   variant: "brandSolid" | "neutralWeak";
 /**
-  * @default small
+  * @default "small"
   */
   size: "xsmall" | "small";
 }