@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.2

package/recipes/action-button.layered.mjs

@@ -4,18 +4,41 @@ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs"
 const actionButtonSlotNames = [
   [
     "root",
-    "seed-action-button"
+    "seed-action-button__root"
+  ],
+  [
+    "content",
+    "seed-action-button__content"
   ],
   [
     "text",
     "seed-action-button__text"
+  ],
+  [
+    "prefixIcon",
+    "seed-action-button__prefixIcon"
+  ],
+  [
+    "suffixIcon",
+    "seed-action-button__suffixIcon"
+  ],
+  [
+    "icon",
+    "seed-action-button__icon"
+  ],
+  [
+    "loadingIndicator",
+    "seed-action-button__loadingIndicator"
   ]
 ];
 
 const defaultVariant = {
   "variant": "brandSolid",
   "size": "medium",
-  "layout": "withText"
+  "layout": "withText",
+  "pressed": false,
+  "disabled": false,
+  "loading": false
 };
 
 const compoundVariants = [
@@ -50,6 +73,90 @@ const compoundVariants = [
   {
     "size": "large",
     "layout": "iconOnly"
+  },
+  {
+    "variant": "brandSolid",
+    "pressed": true
+  },
+  {
+    "variant": "neutralSolid",
+    "pressed": true
+  },
+  {
+    "variant": "neutralWeak",
+    "pressed": true
+  },
+  {
+    "variant": "criticalSolid",
+    "pressed": true
+  },
+  {
+    "variant": "brandOutline",
+    "pressed": true
+  },
+  {
+    "variant": "neutralOutline",
+    "pressed": true
+  },
+  {
+    "variant": "ghost",
+    "pressed": true
+  },
+  {
+    "variant": "brandSolid",
+    "disabled": true
+  },
+  {
+    "variant": "neutralSolid",
+    "disabled": true
+  },
+  {
+    "variant": "neutralWeak",
+    "disabled": true
+  },
+  {
+    "variant": "criticalSolid",
+    "disabled": true
+  },
+  {
+    "variant": "brandOutline",
+    "disabled": true
+  },
+  {
+    "variant": "neutralOutline",
+    "disabled": true
+  },
+  {
+    "variant": "ghost",
+    "disabled": true
+  },
+  {
+    "variant": "brandSolid",
+    "loading": true
+  },
+  {
+    "variant": "neutralSolid",
+    "loading": true
+  },
+  {
+    "variant": "neutralWeak",
+    "loading": true
+  },
+  {
+    "variant": "criticalSolid",
+    "loading": true
+  },
+  {
+    "variant": "brandOutline",
+    "loading": true
+  },
+  {
+    "variant": "neutralOutline",
+    "loading": true
+  },
+  {
+    "variant": "ghost",
+    "loading": true
   }
 ];
 
@@ -73,11 +180,17 @@ export const actionButtonVariantMap = {
     "withText",
     "iconOnly"
   ],
+  "pressed": [
+    true,
+    false
+  ],
   "disabled": [
-    true
+    true,
+    false
   ],
   "loading": [
-    true
+    true,
+    false
   ]
 };
 

package/recipes/action-button.mjs

@@ -4,18 +4,41 @@ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs"
 const actionButtonSlotNames = [
   [
     "root",
-    "seed-action-button"
+    "seed-action-button__root"
+  ],
+  [
+    "content",
+    "seed-action-button__content"
   ],
   [
     "text",
     "seed-action-button__text"
+  ],
+  [
+    "prefixIcon",
+    "seed-action-button__prefixIcon"
+  ],
+  [
+    "suffixIcon",
+    "seed-action-button__suffixIcon"
+  ],
+  [
+    "icon",
+    "seed-action-button__icon"
+  ],
+  [
+    "loadingIndicator",
+    "seed-action-button__loadingIndicator"
   ]
 ];
 
 const defaultVariant = {
   "variant": "brandSolid",
   "size": "medium",
-  "layout": "withText"
+  "layout": "withText",
+  "pressed": false,
+  "disabled": false,
+  "loading": false
 };
 
 const compoundVariants = [
@@ -50,6 +73,90 @@ const compoundVariants = [
   {
     "size": "large",
     "layout": "iconOnly"
+  },
+  {
+    "variant": "brandSolid",
+    "pressed": true
+  },
+  {
+    "variant": "neutralSolid",
+    "pressed": true
+  },
+  {
+    "variant": "neutralWeak",
+    "pressed": true
+  },
+  {
+    "variant": "criticalSolid",
+    "pressed": true
+  },
+  {
+    "variant": "brandOutline",
+    "pressed": true
+  },
+  {
+    "variant": "neutralOutline",
+    "pressed": true
+  },
+  {
+    "variant": "ghost",
+    "pressed": true
+  },
+  {
+    "variant": "brandSolid",
+    "disabled": true
+  },
+  {
+    "variant": "neutralSolid",
+    "disabled": true
+  },
+  {
+    "variant": "neutralWeak",
+    "disabled": true
+  },
+  {
+    "variant": "criticalSolid",
+    "disabled": true
+  },
+  {
+    "variant": "brandOutline",
+    "disabled": true
+  },
+  {
+    "variant": "neutralOutline",
+    "disabled": true
+  },
+  {
+    "variant": "ghost",
+    "disabled": true
+  },
+  {
+    "variant": "brandSolid",
+    "loading": true
+  },
+  {
+    "variant": "neutralSolid",
+    "loading": true
+  },
+  {
+    "variant": "neutralWeak",
+    "loading": true
+  },
+  {
+    "variant": "criticalSolid",
+    "loading": true
+  },
+  {
+    "variant": "brandOutline",
+    "loading": true
+  },
+  {
+    "variant": "neutralOutline",
+    "loading": true
+  },
+  {
+    "variant": "ghost",
+    "loading": true
   }
 ];
 
@@ -73,11 +180,17 @@ export const actionButtonVariantMap = {
     "withText",
     "iconOnly"
   ],
+  "pressed": [
+    true,
+    false
+  ],
   "disabled": [
-    true
+    true,
+    false
   ],
   "loading": [
-    true
+    true,
+    false
   ]
 };
 

package/recipes/bottom-sheet-handle.css

@@ -6,11 +6,7 @@
     width: 36px;
     height: 4px;
     background-color: var(--seed-color-palette-gray-400);
-    border-radius: 9999px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-}
-.seed-bottom-sheet-handle__root:active {
-    background-color: var(--seed-color-palette-gray-500);
+    border-radius: 9999px
 }
 .seed-bottom-sheet-handle__touchArea {
     position: absolute;
@@ -18,5 +14,5 @@
     left: 50%;
     transform: translate(-50%, -50%);
     width: 44px;
-    height: 44px;
+    height: 44px
 }

package/recipes/bottom-sheet-handle.layered.css

@@ -1,20 +1,15 @@
 @layer seed-components {
   .seed-bottom-sheet-handle__root {
     background-color: var(--seed-color-palette-gray-400);
+    border-radius: 9999px;
     width: 36px;
     height: 4px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    border-radius: 9999px;
     position: absolute;
     top: 6px;
     left: 50%;
     transform: translateX(-50%);
   }
 
-  .seed-bottom-sheet-handle__root:active {
-    background-color: var(--seed-color-palette-gray-500);
-  }
-
   .seed-bottom-sheet-handle__touchArea {
     width: 44px;
     height: 44px;

package/recipes/bottom-sheet.css

@@ -8,7 +8,7 @@
     bottom: 0;
     left: 0;
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0))
 }
 .seed-bottom-sheet__backdrop {
     position: fixed;
@@ -16,17 +16,9 @@
     right: 0;
     bottom: 0;
     left: 0;
-    background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
-}
-.seed-bottom-sheet__backdrop[data-snap-points='true'] {
     opacity: 0;
-}
-.seed-bottom-sheet__backdrop:not([data-state="open"]):not([data-open])[data-snap-points='true']:not([data-snap-points-overlay='true']) {
-    opacity: 0;
-}
-.seed-bottom-sheet__backdrop.seed-bottom-sheet__backdrop--state_open[data-snap-points-overlay='true'], .seed-bottom-sheet__backdrop.seed-bottom-sheet__backdrop--open_true[data-snap-points-overlay='true'] {
-    opacity: 1;
+    background: var(--seed-color-bg-overlay);
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0))
 }
 .seed-bottom-sheet__content {
     position: relative;
@@ -38,36 +30,21 @@
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);
     padding-bottom: env(safe-area-inset-bottom);
-    transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
-}
-.seed-bottom-sheet__content[data-snap-points='true'] {
-    transform: translate3d(0, var(--initial-transform, 100%), 0);
-}
-.seed-bottom-sheet__content[data-delayed-snap-points='true'] {
-    transform: translate3d(0, var(--snap-point-height, 0), 0);
-}
-.seed-bottom-sheet__content::after {
-    top: 100%;
-    height: 200vh;
-    position: absolute;
-    left: 0;
-    right: 0;
-    background: inherit;
-    z-index: -1;
+    transform: translate3d(0, 100%, 0)
 }
 .seed-bottom-sheet__header {
     display: flex;
     flex-direction: column;
     gap: var(--seed-dimension-x2);
     padding-top: var(--seed-dimension-x6);
-    padding-bottom: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x4)
 }
 .seed-bottom-sheet__title {
     color: var(--seed-color-fg-neutral);
     font-size: var(--seed-font-size-t8);
     line-height: var(--seed-line-height-t8);
     font-weight: var(--seed-font-weight-bold);
-    margin: 0;
+    margin: 0
 }
 .seed-bottom-sheet__description {
     color: var(--seed-color-fg-neutral-muted);
@@ -76,24 +53,13 @@
     font-weight: var(--seed-font-weight-regular);
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
-    margin: 0;
+    margin: 0
 }
 .seed-bottom-sheet__body {
     display: flex;
     flex-direction: column;
-    --seed-box-padding-x: var(--seed-dimension-spacing-x-global-gutter);
-    --seed-box-height: auto;
-    --seed-box-min-height: auto;
-    --seed-box-max-height: none;
-    --seed-box-justify-content: flex-start;
-    --seed-box-align-items: stretch;
-    padding-left: var(--seed-box-padding-x);
-    padding-right: var(--seed-box-padding-x);
-    height: var(--seed-box-height);
-    min-height: var(--seed-box-min-height);
-    max-height: var(--seed-box-max-height);
-    justify-content: var(--seed-box-justify-content);
-    align-items: var(--seed-box-align-items);
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
 .seed-bottom-sheet__footer {
     display: flex;
@@ -101,84 +67,26 @@
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
     padding-top: var(--seed-dimension-x3);
-    padding-bottom: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x4)
 }
 .seed-bottom-sheet__closeButton {
     position: absolute;
     display: flex;
     justify-content: center;
-    align-items: center;
-    border: none;
-    top: var(--seed-dimension-x6);
-    right: var(--seed-dimension-x4);
-    border-radius: var(--seed-radius-full);
-    background: var(--seed-color-bg-neutral-weak);
-    width: 28px;
-    height: 28px;
-    --seed-icon-size: 14px;
-    --seed-icon-color: var(--seed-color-fg-neutral);
-}
-.seed-bottom-sheet__closeButton:after {
-    position: absolute;
-    top: calc((28px - 44px) / 2);
-    right: calc((28px - 44px) / 2);
-    bottom: calc((28px - 44px) / 2);
-    left: calc((28px - 44px) / 2);
+    align-items: center
 }
 .seed-bottom-sheet__header--headerAlign_left {
-    justify-content: flex-start;
+    justify-content: flex-start
 }
 .seed-bottom-sheet__title--headerAlign_left {
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: var(--seed-dimension-spacing-x-global-gutter);
-}
-.seed-bottom-sheet__title--headerAlign_left.seed-bottom-sheet__title--show-close-button_true {
-    padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: 56px;
+    padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
 .seed-bottom-sheet__header--headerAlign_center {
     justify-content: center;
-    text-align: center;
+    text-align: center
 }
 .seed-bottom-sheet__title--headerAlign_center {
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: var(--seed-dimension-spacing-x-global-gutter);
-}
-.seed-bottom-sheet__title--headerAlign_center.seed-bottom-sheet__title--show-close-button_true {
-    padding-left: 56px;
-    padding-right: 56px;
-}
-.seed-bottom-sheet__backdrop--skipAnimation_false.seed-bottom-sheet__backdrop--state_open[data-snap-points='false']:not([data-animation-done='true']), .seed-bottom-sheet__backdrop--skipAnimation_false.seed-bottom-sheet__backdrop--open_true[data-snap-points='false']:not([data-animation-done='true']) {
-    animation-name: fade-in;
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter);
-}
-.seed-bottom-sheet__backdrop--skipAnimation_false:not(.seed-bottom-sheet__backdrop--state_open):not([data-open])[data-snap-points='false'] {
-    animation-name: fade-out;
-    animation-duration: var(--seed-duration-d4);
-    animation-timing-function: var(--seed-timing-function-exit);
-}
-.seed-bottom-sheet__backdrop--skipAnimation_false.seed-bottom-sheet__backdrop--state_open[data-snap-points='true'][data-should-overlay-animate='true']:not([data-animation-done='true']), .seed-bottom-sheet__backdrop--skipAnimation_false.seed-bottom-sheet__backdrop--open_true[data-snap-points='true'][data-should-overlay-animate='true']:not([data-animation-done='true']) {
-    animation-name: fade-in;
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter);
-}
-.seed-bottom-sheet__content--skipAnimation_false {
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter-expressive);
-}
-.seed-bottom-sheet__content--skipAnimation_false.seed-bottom-sheet__content--state_open[data-snap-points='false']:not([data-animation-done='true']), .seed-bottom-sheet__content--skipAnimation_false.seed-bottom-sheet__content--open_true[data-snap-points='false']:not([data-animation-done='true']) {
-    animation-name: drawer-slide-from-bottom;
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter-expressive);
-}
-.seed-bottom-sheet__content--skipAnimation_false:not(.seed-bottom-sheet__content--state_open):not([data-open])[data-snap-points='false'] {
-    animation-name: drawer-slide-to-bottom;
-    animation-duration: var(--seed-duration-d4);
-    animation-timing-function: var(--seed-timing-function-exit);
-}
-.seed-bottom-sheet__content--skipAnimation_false.seed-bottom-sheet__content--state_open[data-delayed-snap-points='true']:not([data-animation-done='true']), .seed-bottom-sheet__content--skipAnimation_false.seed-bottom-sheet__content--open_true[data-delayed-snap-points='true']:not([data-animation-done='true']) {
-    animation-name: drawer-slide-from-bottom;
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter-expressive);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }