@seed-design/lynx-css 0.10.2 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-css",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -38,11 +38,16 @@
       "types": "./vars/component/*.d.ts",
       "import": "./vars/component/*.mjs"
     },
+    "./scale-feedback": {
+      "types": "./scale-feedback/index.d.ts",
+      "import": "./scale-feedback/index.mjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "package.json",
     "recipes",
+    "scale-feedback",
     "vars",
     "*.css",
     "LICENSE",
@@ -50,12 +55,13 @@
   ],
   "scripts": {
     "rootage:generate": "bun rootage token-ts ./vars --prefix seed && rootage component-spec ./vars/component --prefix seed",
-    "qvism:generate": "bun qvism ./ ./recipes",
+    "qvism:generate": "bun qvism ./ ./recipes && bun run ./scripts/generate-scale-feedback.mjs",
     "lint:publish": "bun publint"
   },
   "devDependencies": {
     "@seed-design/qvism-cli": "0.0.0",
-    "@seed-design/lynx-qvism-preset": "0.0.0"
+    "@seed-design/lynx-qvism-preset": "0.0.0",
+    "@seed-design/rootage-artifacts": "2.9.0"
   },
   "publishConfig": {
     "access": "public"

package/recipes/accordion.css

@@ -23,6 +23,13 @@
     background-color: transparent;
     border: none
 }
+.seed-accordion__triggerContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    transform: scale(1)
+}
 .seed-accordion__pressedOverlay {
     position: absolute;
     top: 0;
@@ -166,6 +173,9 @@
 .seed-accordion__suffixIcon--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
+.seed-accordion__trigger--disabled_false:active .seed-accordion__pressedOverlay {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
 .seed-accordion__root--variant_separated-size_medium {
     gap: var(--seed-dimension-x3)
 }

package/recipes/accordion.d.ts

@@ -27,7 +27,7 @@ declare type AccordionVariantMap = {
 
 export declare type AccordionVariantProps = Partial<AccordionVariant>;
 
-export declare type AccordionSlotName = "root" | "item" | "header" | "trigger" | "pressedOverlay" | "prefix" | "body" | "title" | "description" | "suffixIcon" | "content" | "contentInner" | "divider";
+export declare type AccordionSlotName = "root" | "item" | "header" | "trigger" | "triggerContent" | "pressedOverlay" | "prefix" | "body" | "title" | "description" | "suffixIcon" | "content" | "contentInner" | "divider";
 
 export declare const accordionVariantMap: AccordionVariantMap;
 

package/recipes/accordion.mjs

@@ -18,6 +18,10 @@ const accordionSlotNames = [
     "trigger",
     "seed-accordion__trigger"
   ],
+  [
+    "triggerContent",
+    "seed-accordion__triggerContent"
+  ],
   [
     "pressedOverlay",
     "seed-accordion__pressedOverlay"

package/recipes/action-button.css

@@ -25,8 +25,7 @@
     margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
     margin-left: calc(var(--seed-box-bleed-left) * -1);
     margin-right: calc(var(--seed-box-bleed-right) * -1);
-    transform: scale(1);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-action-button__text {
     font-weight: var(--seed-font-weight-bold);
@@ -342,35 +341,44 @@
 .seed-action-button__root--variant_brandSolid-pressed_true {
     background: var(--seed-color-bg-brand-solid-pressed)
 }
+.seed-action-button__root--variant_brandSolid-disabled_false-loading_false:active {
+    background: var(--seed-color-bg-brand-solid-pressed)
+}
 .seed-action-button__root--variant_neutralSolid-pressed_true {
     background: var(--seed-color-bg-neutral-inverted-pressed)
 }
+.seed-action-button__root--variant_neutralSolid-disabled_false-loading_false:active {
+    background: var(--seed-color-bg-neutral-inverted-pressed)
+}
 .seed-action-button__root--variant_neutralWeak-pressed_true {
     background: var(--seed-color-bg-neutral-weak-pressed)
 }
+.seed-action-button__root--variant_neutralWeak-disabled_false-loading_false:active {
+    background: var(--seed-color-bg-neutral-weak-pressed)
+}
 .seed-action-button__root--variant_criticalSolid-pressed_true {
     background: var(--seed-color-bg-critical-solid-pressed)
 }
+.seed-action-button__root--variant_criticalSolid-disabled_false-loading_false:active {
+    background: var(--seed-color-bg-critical-solid-pressed)
+}
 .seed-action-button__root--variant_brandOutline-pressed_true {
     background: var(--seed-color-bg-transparent-pressed)
 }
-.seed-action-button__root--variant_neutralOutline-pressed_true {
+.seed-action-button__root--variant_brandOutline-disabled_false-loading_false:active {
     background: var(--seed-color-bg-transparent-pressed)
 }
-.seed-action-button__root--variant_ghost-pressed_true {
+.seed-action-button__root--variant_neutralOutline-pressed_true {
     background: var(--seed-color-bg-transparent-pressed)
 }
-.seed-action-button__root--size_xsmall-pressed_true {
-    transform: scale(var(--seed-scale-s95))
-}
-.seed-action-button__root--size_small-pressed_true {
-    transform: scale(var(--seed-scale-s97))
+.seed-action-button__root--variant_neutralOutline-disabled_false-loading_false:active {
+    background: var(--seed-color-bg-transparent-pressed)
 }
-.seed-action-button__root--size_medium-pressed_true {
-    transform: scale(var(--seed-scale-s97))
+.seed-action-button__root--variant_ghost-pressed_true {
+    background: var(--seed-color-bg-transparent-pressed)
 }
-.seed-action-button__root--size_large-pressed_true {
-    transform: scale(var(--seed-scale-s98))
+.seed-action-button__root--variant_ghost-disabled_false-loading_false:active {
+    background: var(--seed-color-bg-transparent-pressed)
 }
 .seed-action-button__root--variant_brandSolid-disabled_true {
     background: var(--seed-color-bg-disabled)

package/recipes/action-button.mjs

@@ -78,45 +78,64 @@ const compoundVariants = [
     "variant": "brandSolid",
     "pressed": true
   },
+  {
+    "variant": "brandSolid",
+    "disabled": false,
+    "loading": false
+  },
   {
     "variant": "neutralSolid",
     "pressed": true
   },
+  {
+    "variant": "neutralSolid",
+    "disabled": false,
+    "loading": false
+  },
   {
     "variant": "neutralWeak",
     "pressed": true
   },
+  {
+    "variant": "neutralWeak",
+    "disabled": false,
+    "loading": false
+  },
   {
     "variant": "criticalSolid",
     "pressed": true
   },
   {
-    "variant": "brandOutline",
-    "pressed": true
+    "variant": "criticalSolid",
+    "disabled": false,
+    "loading": false
   },
   {
-    "variant": "neutralOutline",
+    "variant": "brandOutline",
     "pressed": true
   },
   {
-    "variant": "ghost",
-    "pressed": true
+    "variant": "brandOutline",
+    "disabled": false,
+    "loading": false
   },
   {
-    "size": "xsmall",
+    "variant": "neutralOutline",
     "pressed": true
   },
   {
-    "size": "small",
-    "pressed": true
+    "variant": "neutralOutline",
+    "disabled": false,
+    "loading": false
   },
   {
-    "size": "medium",
+    "variant": "ghost",
     "pressed": true
   },
   {
-    "size": "large",
-    "pressed": true
+    "variant": "ghost",
+    "disabled": false,
+    "loading": false
   },
   {
     "variant": "brandSolid",

package/recipes/callout.css

@@ -175,18 +175,36 @@
 .seed-callout__root--tone_neutral-pressed_true {
     background-color: var(--seed-color-bg-neutral-weak-pressed)
 }
+.seed-callout__root--tone_neutral-interactive_true:active {
+    background-color: var(--seed-color-bg-neutral-weak-pressed)
+}
 .seed-callout__root--tone_informative-pressed_true {
     background-color: var(--seed-color-bg-informative-weak-pressed)
 }
+.seed-callout__root--tone_informative-interactive_true:active {
+    background-color: var(--seed-color-bg-informative-weak-pressed)
+}
 .seed-callout__root--tone_positive-pressed_true {
     background-color: var(--seed-color-bg-positive-weak-pressed)
 }
+.seed-callout__root--tone_positive-interactive_true:active {
+    background-color: var(--seed-color-bg-positive-weak-pressed)
+}
 .seed-callout__root--tone_warning-pressed_true {
     background-color: var(--seed-color-bg-warning-weak-pressed)
 }
+.seed-callout__root--tone_warning-interactive_true:active {
+    background-color: var(--seed-color-bg-warning-weak-pressed)
+}
 .seed-callout__root--tone_critical-pressed_true {
     background-color: var(--seed-color-bg-critical-weak-pressed)
 }
+.seed-callout__root--tone_critical-interactive_true:active {
+    background-color: var(--seed-color-bg-critical-weak-pressed)
+}
 .seed-callout__root--tone_magic-pressed_true {
     background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed))
+}
+.seed-callout__root--tone_magic-interactive_true:active {
+    background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed))
 }

package/recipes/callout.d.ts

@@ -7,6 +7,10 @@ declare interface CalloutVariant {
   * @default false
   */
   pressed: boolean;
+/**
+  * @default false
+  */
+  interactive: boolean;
 }
 
 declare type CalloutVariantMap = {

package/recipes/callout.mjs

@@ -38,7 +38,8 @@ const calloutSlotNames = [
 
 const defaultVariant = {
   "tone": "neutral",
-  "pressed": false
+  "pressed": false,
+  "interactive": false
 };
 
 const compoundVariants = [
@@ -46,25 +47,49 @@ const compoundVariants = [
     "tone": "neutral",
     "pressed": true
   },
+  {
+    "tone": "neutral",
+    "interactive": true
+  },
   {
     "tone": "informative",
     "pressed": true
   },
+  {
+    "tone": "informative",
+    "interactive": true
+  },
   {
     "tone": "positive",
     "pressed": true
   },
+  {
+    "tone": "positive",
+    "interactive": true
+  },
   {
     "tone": "warning",
     "pressed": true
   },
+  {
+    "tone": "warning",
+    "interactive": true
+  },
   {
     "tone": "critical",
     "pressed": true
   },
+  {
+    "tone": "critical",
+    "interactive": true
+  },
   {
     "tone": "magic",
     "pressed": true
+  },
+  {
+    "tone": "magic",
+    "interactive": true
   }
 ];
 
@@ -80,6 +105,10 @@ export const calloutVariantMap = {
   "pressed": [
     true,
     false
+  ],
+  "interactive": [
+    true,
+    false
   ]
 };
 

package/recipes/checkbox.css

@@ -14,21 +14,33 @@
     font-weight: var(--seed-font-weight-bold)
 }
 .seed-checkbox__root--size_medium {
-    min-height: var(--seed-dimension-x8);
-    --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2)
+    min-height: var(--seed-dimension-x8)
+}
+.seed-checkbox__control--size_medium {
+    margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-dimension-x5) / 2)
 }
 .seed-checkbox__label--size_medium {
     font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4)
+    line-height: var(--seed-line-height-t4);
+    margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2)
 }
 .seed-checkbox__root--size_large {
-    min-height: var(--seed-dimension-x9);
-    --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2)
+    min-height: var(--seed-dimension-x9)
+}
+.seed-checkbox__control--size_large {
+    margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-dimension-x6) / 2)
 }
 .seed-checkbox__label--size_large {
     font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5)
+    line-height: var(--seed-line-height-t5);
+    margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2)
 }
 .seed-checkbox__label--disabled_true {
     color: var(--seed-color-fg-disabled)
+}
+.seed-checkbox__root--disabled_false:active .seed-checkmark__root {
+    background-color: var(--seed-checkmark-pressed-color)
+}
+.seed-checkbox__root--disabled_false:active .seed-checkmark__background {
+    opacity: 1
 }

package/recipes/checkbox.d.ts

@@ -19,7 +19,7 @@ declare type CheckboxVariantMap = {
 
 export declare type CheckboxVariantProps = Partial<CheckboxVariant>;
 
-export declare type CheckboxSlotName = "root" | "label";
+export declare type CheckboxSlotName = "root" | "control" | "label";
 
 export declare const checkboxVariantMap: CheckboxVariantMap;
 

package/recipes/checkbox.mjs

@@ -6,6 +6,10 @@ const checkboxSlotNames = [
     "root",
     "seed-checkbox__root"
   ],
+  [
+    "control",
+    "seed-checkbox__control"
+  ],
   [
     "label",
     "seed-checkbox__label"

package/recipes/checkmark.css

@@ -3,8 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    flex: none;
-    margin-top: var(--checkmark-margin-top, 0)
+    flex: none
 }
 .seed-checkmark__background {
     position: absolute;
@@ -19,6 +18,7 @@
     position: absolute
 }
 .seed-checkmark__root--variant_square {
+    --seed-checkmark-pressed-color: var(--seed-color-bg-transparent-pressed);
     border-width: 1px;
     border-style: solid;
     border-color: var(--seed-color-stroke-neutral-weak);
@@ -74,25 +74,29 @@
     border-color: #00000000
 }
 .seed-checkmark__root--variant_square-tone_brand-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-brand-solid)
+    background-color: var(--seed-color-bg-brand-solid);
+    --seed-checkmark-pressed-color: var(--seed-color-bg-brand-solid-pressed)
 }
 .seed-checkmark__icon--variant_square-tone_brand-checked_true-disabled_false {
     color: var(--seed-color-palette-static-white)
 }
 .seed-checkmark__root--variant_square-tone_neutral-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted)
+    background-color: var(--seed-color-bg-neutral-inverted);
+    --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed)
 }
 .seed-checkmark__icon--variant_square-tone_neutral-checked_true-disabled_false {
     color: var(--seed-color-fg-neutral-inverted)
 }
 .seed-checkmark__root--variant_square-tone_brand-indeterminate_true-disabled_false {
-    background-color: var(--seed-color-bg-brand-solid)
+    background-color: var(--seed-color-bg-brand-solid);
+    --seed-checkmark-pressed-color: var(--seed-color-bg-brand-solid-pressed)
 }
 .seed-checkmark__icon--variant_square-tone_brand-indeterminate_true-disabled_false {
     color: var(--seed-color-palette-static-white)
 }
 .seed-checkmark__root--variant_square-tone_neutral-indeterminate_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted)
+    background-color: var(--seed-color-bg-neutral-inverted);
+    --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed)
 }
 .seed-checkmark__icon--variant_square-tone_neutral-indeterminate_true-disabled_false {
     color: var(--seed-color-fg-neutral-inverted)

package/recipes/chip.css

@@ -221,18 +221,36 @@
 .seed-chip__root--variant_solid-pressed_true-selected_false {
     background: var(--seed-color-bg-neutral-weak-alpha-pressed)
 }
+.seed-chip__root--variant_solid-selected_false-disabled_false:active {
+    background: var(--seed-color-bg-neutral-weak-alpha-pressed)
+}
 .seed-chip__root--variant_outlineStrong-pressed_true-selected_false {
     background: var(--seed-color-bg-transparent-pressed)
 }
+.seed-chip__root--variant_outlineStrong-selected_false-disabled_false:active {
+    background: var(--seed-color-bg-transparent-pressed)
+}
 .seed-chip__root--variant_outlineWeak-pressed_true-selected_false {
     background: var(--seed-color-bg-transparent-pressed)
 }
+.seed-chip__root--variant_outlineWeak-selected_false-disabled_false:active {
+    background: var(--seed-color-bg-transparent-pressed)
+}
 .seed-chip__root--variant_solid-selected_true-pressed_true {
     background: var(--seed-color-bg-neutral-inverted-pressed)
 }
+.seed-chip__root--variant_solid-selected_true-disabled_false:active {
+    background: var(--seed-color-bg-neutral-inverted-pressed)
+}
 .seed-chip__root--variant_outlineStrong-selected_true-pressed_true {
     background: var(--seed-color-bg-neutral-inverted-pressed)
 }
+.seed-chip__root--variant_outlineStrong-selected_true-disabled_false:active {
+    background: var(--seed-color-bg-neutral-inverted-pressed)
+}
 .seed-chip__root--variant_outlineWeak-selected_true-pressed_true {
     background: var(--seed-color-bg-neutral-weak-pressed)
+}
+.seed-chip__root--variant_outlineWeak-selected_true-disabled_false:active {
+    background: var(--seed-color-bg-neutral-weak-pressed)
 }

package/recipes/chip.mjs

@@ -79,30 +79,60 @@ const compoundVariants = [
     "pressed": true,
     "selected": false
   },
+  {
+    "variant": "solid",
+    "selected": false,
+    "disabled": false
+  },
   {
     "variant": "outlineStrong",
     "pressed": true,
     "selected": false
   },
+  {
+    "variant": "outlineStrong",
+    "selected": false,
+    "disabled": false
+  },
   {
     "variant": "outlineWeak",
     "pressed": true,
     "selected": false
   },
+  {
+    "variant": "outlineWeak",
+    "selected": false,
+    "disabled": false
+  },
   {
     "variant": "solid",
     "selected": true,
     "pressed": true
   },
+  {
+    "variant": "solid",
+    "selected": true,
+    "disabled": false
+  },
   {
     "variant": "outlineStrong",
     "selected": true,
     "pressed": true
   },
+  {
+    "variant": "outlineStrong",
+    "selected": true,
+    "disabled": false
+  },
   {
     "variant": "outlineWeak",
     "selected": true,
     "pressed": true
+  },
+  {
+    "variant": "outlineWeak",
+    "selected": true,
+    "disabled": false
   }
 ];