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

package/recipes/slider.layered.css

@@ -1,209 +0,0 @@
-@layer seed-components {
-  .seed-slider__root {
-    align-items: stretch;
-    gap: var(--seed-dimension-x0_5);
-    flex-direction: column;
-    width: 100%;
-    display: flex;
-  }
-
-  .seed-slider__control {
-    align-items: center;
-    height: 26px;
-    display: flex;
-    position: relative;
-  }
-
-  .seed-slider__track {
-    background-color: var(--seed-color-palette-gray-400);
-    height: var(--seed-dimension-x1);
-    border-radius: var(--seed-radius-full);
-    flex-grow: 1;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .seed-slider__range {
-    background-color: var(--seed-color-fg-neutral);
-    height: 100%;
-    transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
-    position: absolute;
-  }
-
-  .seed-slider__range.seed-slider__range--dir_ltr {
-    left: var(--range-start);
-    right: var(--range-end);
-  }
-
-  .seed-slider__range.seed-slider__range--dir_rtl {
-    right: var(--range-start);
-    left: var(--range-end);
-  }
-
-  .seed-slider__range.seed-slider__range--disabled_true {
-    background-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-slider__range.seed-slider__range--dragging_true {
-    transition: none;
-  }
-
-  .seed-slider__thumb {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-    transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing), opacity var(--seed-duration-d2) var(--seed-timing-function-easing);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .seed-slider__thumb.seed-slider__thumb--ssr_true {
-    opacity: 0;
-  }
-
-  .seed-slider__thumb.seed-slider__thumb--dir_ltr {
-    left: calc(var(--thumb-position) * 1% + var(--thumb-offset));
-  }
-
-  .seed-slider__thumb.seed-slider__thumb--dir_rtl {
-    right: calc(var(--thumb-position) * 1% + var(--thumb-offset));
-  }
-
-  .seed-slider__thumb:after {
-    background-color: var(--seed-color-bg-neutral-inverted);
-    border-radius: var(--seed-radius-full);
-    transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing);
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .seed-slider__thumb.seed-slider__thumb--disabled_true:after {
-    background-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-slider__thumb.seed-slider__thumb--dragging_true {
-    transition: none;
-  }
-
-  .seed-slider__thumb.seed-slider__thumb--thumb-dragging_true:after {
-    transform: scale(1.2);
-  }
-
-  .seed-slider__markers {
-    height: var(--seed-line-height-t3);
-    position: relative;
-  }
-
-  .seed-slider__valueIndicatorRoot {
-    transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
-    background: var(--seed-color-bg-neutral-inverted);
-    padding-left: var(--seed-dimension-x2);
-    padding-right: var(--seed-dimension-x2);
-    padding-top: var(--seed-dimension-x1);
-    padding-bottom: var(--seed-dimension-x1);
-    border-radius: var(--seed-radius-r1_5);
-    color: var(--seed-color-fg-neutral-inverted);
-    font-size: var(--seed-font-size-t3);
-    line-height: var(--seed-line-height-t3);
-    font-weight: var(--seed-font-weight-medium);
-    text-align: center;
-    width: max-content;
-    min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
-    flex-direction: column;
-    align-items: center;
-    display: flex;
-    position: absolute;
-    top: 50%;
-  }
-
-  .seed-slider__valueIndicatorRoot.seed-slider__valueIndicatorRoot--dir_ltr {
-    left: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
-    transform: translate(-50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3)));
-  }
-
-  .seed-slider__valueIndicatorRoot.seed-slider__valueIndicatorRoot--dir_rtl {
-    right: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
-    transform: translate(50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3)));
-  }
-
-  .seed-slider__valueIndicatorRoot.seed-slider__valueIndicatorRoot--value-indicator-shown_true.seed-slider__valueIndicatorRoot--dir_ltr {
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter);
-    animation-duration: var(--seed-duration-d4);
-    --seed-enter-translate-x: -50%;
-    --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: .9;
-  }
-
-  .seed-slider__valueIndicatorRoot.seed-slider__valueIndicatorRoot--value-indicator-shown_true.seed-slider__valueIndicatorRoot--dir_rtl {
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter);
-    animation-duration: var(--seed-duration-d4);
-    --seed-enter-translate-x: 50%;
-    --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: .9;
-  }
-
-  .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown])[data-dir="ltr"] {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-easing);
-    animation-duration: var(--seed-duration-d4);
-    --seed-exit-translate-x: -50%;
-    --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation-fill-mode: forwards;
-  }
-
-  .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown])[data-dir="rtl"] {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-easing);
-    animation-duration: var(--seed-duration-d4);
-    --seed-exit-translate-x: 50%;
-    --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation-fill-mode: forwards;
-  }
-
-  .seed-slider__valueIndicatorRoot.seed-slider__valueIndicatorRoot--dragging_true {
-    transition: none;
-  }
-
-  .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
-    animation-duration: 0s;
-  }
-
-  .seed-slider__valueIndicatorArrow {
-    width: var(--seed-dimension-x2);
-    height: var(--seed-dimension-x2);
-    transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
-    position: absolute;
-    top: 100%;
-  }
-
-  .seed-slider__valueIndicatorArrow.seed-slider__valueIndicatorArrow--dir_ltr {
-    left: calc(50% + (var(--thumb-offset)  - var(--indicator-label-offset)));
-    transform: translateX(-50%);
-  }
-
-  .seed-slider__valueIndicatorArrow.seed-slider__valueIndicatorArrow--dir_rtl {
-    right: calc(50% + (var(--thumb-offset)  - var(--indicator-label-offset)));
-    transform: translateX(50%);
-  }
-
-  .seed-slider__valueIndicatorArrow.seed-slider__valueIndicatorArrow--dragging_true {
-    transition: none;
-  }
-
-  .seed-slider__valueIndicatorArrowTip {
-    width: var(--seed-dimension-x2);
-    height: var(--seed-dimension-x1_5);
-    display: block;
-  }
-}

package/recipes/slider.layered.mjs

@@ -1,68 +0,0 @@
-import './slider.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const sliderSlotNames = [
-  [
-    "root",
-    "seed-slider__root"
-  ],
-  [
-    "track",
-    "seed-slider__track"
-  ],
-  [
-    "control",
-    "seed-slider__control"
-  ],
-  [
-    "range",
-    "seed-slider__range"
-  ],
-  [
-    "thumb",
-    "seed-slider__thumb"
-  ],
-  [
-    "tick",
-    "seed-slider__tick"
-  ],
-  [
-    "markers",
-    "seed-slider__markers"
-  ],
-  [
-    "valueIndicatorRoot",
-    "seed-slider__valueIndicatorRoot"
-  ],
-  [
-    "valueIndicatorArrow",
-    "seed-slider__valueIndicatorArrow"
-  ],
-  [
-    "valueIndicatorArrowTip",
-    "seed-slider__valueIndicatorArrowTip"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const sliderVariantMap = {};
-
-export const sliderVariantKeys = Object.keys(sliderVariantMap);
-
-export function slider(props) {
-  return Object.fromEntries(
-    sliderSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(slider, { splitVariantProps: (props) => splitVariantProps(props, sliderVariantMap) });
-
-// @recipe(seed): slider

package/recipes/slider.mjs

@@ -1,68 +0,0 @@
-import './slider.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const sliderSlotNames = [
-  [
-    "root",
-    "seed-slider__root"
-  ],
-  [
-    "track",
-    "seed-slider__track"
-  ],
-  [
-    "control",
-    "seed-slider__control"
-  ],
-  [
-    "range",
-    "seed-slider__range"
-  ],
-  [
-    "thumb",
-    "seed-slider__thumb"
-  ],
-  [
-    "tick",
-    "seed-slider__tick"
-  ],
-  [
-    "markers",
-    "seed-slider__markers"
-  ],
-  [
-    "valueIndicatorRoot",
-    "seed-slider__valueIndicatorRoot"
-  ],
-  [
-    "valueIndicatorArrow",
-    "seed-slider__valueIndicatorArrow"
-  ],
-  [
-    "valueIndicatorArrowTip",
-    "seed-slider__valueIndicatorArrowTip"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const sliderVariantMap = {};
-
-export const sliderVariantKeys = Object.keys(sliderVariantMap);
-
-export function slider(props) {
-  return Object.fromEntries(
-    sliderSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(slider, { splitVariantProps: (props) => splitVariantProps(props, sliderVariantMap) });
-
-// @recipe(seed): slider

package/recipes/snackbar-region.css

@@ -1,20 +0,0 @@
-.seed-snackbar-region {
-    z-index: 2147483647;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    left: calc(env(safe-area-inset-left));
-    right: calc(env(safe-area-inset-right));
-    bottom: calc(env(safe-area-inset-bottom) + var(--snackbar-region-offset, 0px));
-    padding-left: var(--seed-dimension-x2);
-    padding-right: var(--seed-dimension-x2);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
-    transition-property: bottom;
-    transition-duration: var(--seed-duration-d4);
-    transition-timing-function: var(--seed-timing-function-easing)
-}.seed-snackbar-region__text {
-    transition-property: bottom;
-    transition-duration: var(--seed-duration-d4);
-    transition-timing-function: var(--seed-timing-function-easing)
-}

package/recipes/snackbar-region.d.ts

@@ -1,22 +0,0 @@
-declare interface SnackbarRegionVariant {
-  
-  disabled?: boolean;
-  loading?: boolean;}
-
-declare type SnackbarRegionVariantMap = {
-  [key in keyof SnackbarRegionVariant]: Array<SnackbarRegionVariant[key]>;
-};
-
-export declare type SnackbarRegionVariantProps = Partial<SnackbarRegionVariant>;
-
-export declare type SnackbarRegionSlotName = "root" | "text";
-
-export declare const snackbarRegionVariantMap: SnackbarRegionVariantMap;
-
-export declare const snackbarRegion: ((
-  props?: SnackbarRegionVariantProps,
-) => Record<SnackbarRegionSlotName, string>) & {
-  splitVariantProps: <T extends SnackbarRegionVariantProps>(
-    props: T,
-  ) => [SnackbarRegionVariantProps, Omit<T, keyof SnackbarRegionVariantProps>];
-}

package/recipes/snackbar-region.layered.css

@@ -1,29 +0,0 @@
-@layer seed-components {
-  .seed-snackbar-region {
-    z-index: 2147483647;
-    left: calc(env(safe-area-inset-left));
-    right: calc(env(safe-area-inset-right));
-    bottom: calc(env(safe-area-inset-bottom)  + var(--snackbar-region-offset, 0px));
-    padding-left: var(--seed-dimension-x2);
-    padding-right: var(--seed-dimension-x2);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
-    transition-property: bottom;
-    transition-duration: var(--seed-duration-d4);
-    transition-timing-function: var(--seed-timing-function-easing);
-    flex-direction: column;
-    align-items: center;
-    display: flex;
-  }
-  .seed-snackbar-region__text {
-    transition-property: bottom;
-    transition-duration: var(--seed-duration-d4);
-    transition-timing-function: var(--seed-timing-function-easing);
-  }
-
-  .seed-snackbar-region__text {
-    transition-property: bottom;
-    transition-duration: var(--seed-duration-d4);
-    transition-timing-function: var(--seed-timing-function-easing);
-  }
-}

package/recipes/snackbar-region.layered.mjs

@@ -1,43 +0,0 @@
-import './snackbar-region.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const snackbarRegionSlotNames = [
-  [
-    "root",
-    "seed-snackbar-region"
-  ],
-  [
-    "text",
-    "seed-snackbar-region__text"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const snackbarRegionVariantMap = {
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const snackbarRegionVariantKeys = Object.keys(snackbarRegionVariantMap);
-
-export function snackbarRegion(props) {
-  return Object.fromEntries(
-    snackbarRegionSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(snackbarRegion, { splitVariantProps: (props) => splitVariantProps(props, snackbarRegionVariantMap) });
-
-// @recipe(seed): snackbar-region

package/recipes/snackbar-region.mjs

@@ -1,43 +0,0 @@
-import './snackbar-region.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const snackbarRegionSlotNames = [
-  [
-    "root",
-    "seed-snackbar-region"
-  ],
-  [
-    "text",
-    "seed-snackbar-region__text"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const snackbarRegionVariantMap = {
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const snackbarRegionVariantKeys = Object.keys(snackbarRegionVariantMap);
-
-export function snackbarRegion(props) {
-  return Object.fromEntries(
-    snackbarRegionSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(snackbarRegion, { splitVariantProps: (props) => splitVariantProps(props, snackbarRegionVariantMap) });
-
-// @recipe(seed): snackbar-region

package/recipes/snackbar.css

@@ -1,83 +0,0 @@
-.seed-snackbar__root {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    max-width: 560px;
-    background: var(--seed-color-bg-neutral-inverted);
-    border-radius: var(--seed-radius-r2);
-    padding-left: var(--seed-dimension-x2_5);
-    padding-right: var(--seed-dimension-x2_5);
-    padding-top: var(--seed-dimension-x2_5);
-    padding-bottom: var(--seed-dimension-x2_5);
-    min-height: 44px;
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter);
-    animation-duration: var(--seed-duration-d3);
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 0.8;
-}
-.seed-snackbar__root:not([data-open]) {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-exit);
-    animation-duration: var(--seed-duration-d2);
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 0.8;
-}
-.seed-snackbar__content {
-    display: flex;
-    flex-grow: 1;
-    justify-content: space-between;
-    align-items: center;
-    padding-left: var(--seed-dimension-x1_5);
-    padding-right: var(--seed-dimension-x1_5);
-    gap: var(--seed-dimension-x2_5);
-}
-.seed-snackbar__message {
-    margin: 0;
-    color: var(--seed-color-fg-neutral-inverted);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    font-weight: var(--seed-font-weight-regular);
-}
-.seed-snackbar__prefixIcon {
-    flex-shrink: 0;
-    width: 24px;
-    height: 24px;
-    padding-right: var(--seed-dimension-x0_5);
-}
-.seed-snackbar__actionButton {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background-color: unset;
-    flex-shrink: 0;
-    color: var(--seed-color-fg-brand);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    font-weight: var(--seed-font-weight-bold);
-}
-.seed-snackbar__actionButton:after {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: calc(-1 * var(--seed-dimension-x2));
-    right: calc(-1 * var(--seed-dimension-x2));
-    min-height: 44px;
-    background: transparent;
-}
-.seed-snackbar__prefixIcon--variant_default {
-    display: none;
-}
-.seed-snackbar__prefixIcon--variant_positive {
-    color: var(--seed-color-fg-positive);
-}
-.seed-snackbar__prefixIcon--variant_critical {
-    color: var(--seed-color-fg-critical);
-}

package/recipes/snackbar.d.ts

@@ -1,24 +0,0 @@
-declare interface SnackbarVariant {
-  /**
-  * @default "default"
-  */
-  variant: "default" | "positive" | "critical";
-}
-
-declare type SnackbarVariantMap = {
-  [key in keyof SnackbarVariant]: Array<SnackbarVariant[key]>;
-};
-
-export declare type SnackbarVariantProps = Partial<SnackbarVariant>;
-
-export declare type SnackbarSlotName = "root" | "message" | "prefixIcon" | "actionButton" | "content";
-
-export declare const snackbarVariantMap: SnackbarVariantMap;
-
-export declare const snackbar: ((
-  props?: SnackbarVariantProps,
-) => Record<SnackbarSlotName, string>) & {
-  splitVariantProps: <T extends SnackbarVariantProps>(
-    props: T,
-  ) => [SnackbarVariantProps, Omit<T, keyof SnackbarVariantProps>];
-}