@seed-design/lynx-css 0.1.1-alpha.0

package/recipes/skeleton.layered.css

@@ -0,0 +1,63 @@
+@layer seed-components {
+  .seed-skeleton {
+    --seed-box-width: auto;
+    --seed-box-height: auto;
+    width: var(--seed-box-width);
+    height: var(--seed-box-height);
+    display: inline-block;
+    overflow: hidden;
+  }
+  .seed-skeleton__text {
+    --seed-box-width: auto;
+    --seed-box-height: auto;
+  }
+
+  .seed-skeleton__text {
+    --seed-box-width: auto;
+    --seed-box-height: auto;
+  }
+
+  .seed-skeleton:after {
+    width: 100%;
+    height: 100%;
+    animation-name: slide-x;
+    animation-duration: 1.5s;
+    animation-fill-mode: forwards;
+    animation-timing-function: var(--seed-timing-function-easing);
+    background-repeat: no-repeat;
+    animation-iteration-count: infinite;
+    display: block;
+  }
+
+  .seed-skeleton--radius_0 {
+    border-radius: 0;
+  }
+
+  .seed-skeleton--radius_8 {
+    border-radius: 8px;
+  }
+
+  .seed-skeleton--radius_16 {
+    border-radius: 16px;
+  }
+
+  .seed-skeleton--radius_full {
+    border-radius: var(--seed-radius-full);
+  }
+
+  .seed-skeleton--tone_neutral {
+    background: var(--seed-color-palette-gray-200);
+  }
+
+  .seed-skeleton--tone_neutral:after {
+    background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-neutral));
+  }
+
+  .seed-skeleton--tone_magic {
+    background: var(--seed-color-bg-magic-weak);
+  }
+
+  .seed-skeleton--tone_magic:after {
+    background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
+  }
+}

package/recipes/skeleton.layered.mjs

@@ -0,0 +1,56 @@
+import './skeleton.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const skeletonSlotNames = [
+  [
+    "root",
+    "seed-skeleton"
+  ],
+  [
+    "text",
+    "seed-skeleton__text"
+  ]
+];
+
+const defaultVariant = {
+  "radius": 8,
+  "tone": "neutral"
+};
+
+const compoundVariants = [];
+
+export const skeletonVariantMap = {
+  "radius": [
+    "0",
+    "8",
+    "16",
+    "full"
+  ],
+  "tone": [
+    "neutral",
+    "magic"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const skeletonVariantKeys = Object.keys(skeletonVariantMap);
+
+export function skeleton(props) {
+  return Object.fromEntries(
+    skeletonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(skeleton, { splitVariantProps: (props) => splitVariantProps(props, skeletonVariantMap) });
+
+// @recipe(seed): skeleton

package/recipes/skeleton.mjs

@@ -0,0 +1,56 @@
+import './skeleton.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const skeletonSlotNames = [
+  [
+    "root",
+    "seed-skeleton"
+  ],
+  [
+    "text",
+    "seed-skeleton__text"
+  ]
+];
+
+const defaultVariant = {
+  "radius": 8,
+  "tone": "neutral"
+};
+
+const compoundVariants = [];
+
+export const skeletonVariantMap = {
+  "radius": [
+    "0",
+    "8",
+    "16",
+    "full"
+  ],
+  "tone": [
+    "neutral",
+    "magic"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const skeletonVariantKeys = Object.keys(skeletonVariantMap);
+
+export function skeleton(props) {
+  return Object.fromEntries(
+    skeletonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(skeleton, { splitVariantProps: (props) => splitVariantProps(props, skeletonVariantMap) });
+
+// @recipe(seed): skeleton

package/recipes/slider-marker.css

@@ -0,0 +1,55 @@
+.seed-slider-marker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: max-content;
+}.seed-slider-marker__text {
+    color: var(--seed-color-fg-neutral-muted);
+    font-weight: var(--seed-font-weight-regular);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+}
+.seed-slider-marker[data-dir='ltr'] {
+    left: calc(var(--marker-position) * 1% + var(--marker-offset));
+}
+.seed-slider-marker[data-dir='rtl'] {
+    right: calc(var(--marker-position) * 1% + var(--marker-offset));
+}
+.seed-slider-marker__text.seed-slider-marker__text--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-slider-marker__text--align_start[data-dir='ltr'] {
+    text-align: left;
+}
+.seed-slider-marker__text--align_start[data-dir='rtl'] {
+    text-align: right;
+}
+.seed-slider-marker__text--align_center {
+    text-align: center;
+}
+.seed-slider-marker--align_center[data-dir='ltr'] {
+    transform: translateX(-50%);
+}
+.seed-slider-marker__text--align_center[data-dir='ltr'] {
+    transform: translateX(-50%);
+}
+.seed-slider-marker--align_center[data-dir='rtl'] {
+    transform: translateX(50%);
+}
+.seed-slider-marker__text--align_center[data-dir='rtl'] {
+    transform: translateX(50%);
+}
+.seed-slider-marker--align_end[data-dir='ltr'] {
+    transform: translateX(-100%);
+}
+.seed-slider-marker__text--align_end[data-dir='ltr'] {
+    transform: translateX(-100%);
+    text-align: right;
+}
+.seed-slider-marker--align_end[data-dir='rtl'] {
+    transform: translateX(100%);
+}
+.seed-slider-marker__text--align_end[data-dir='rtl'] {
+    transform: translateX(100%);
+    text-align: left;
+}

package/recipes/slider-marker.d.ts

@@ -0,0 +1,25 @@
+declare interface SliderMarkerVariant {
+  /**
+  * @default "center"
+  */
+  align: "start" | "center" | "end";
+  disabled?: boolean;
+  loading?: boolean;}
+
+declare type SliderMarkerVariantMap = {
+  [key in keyof SliderMarkerVariant]: Array<SliderMarkerVariant[key]>;
+};
+
+export declare type SliderMarkerVariantProps = Partial<SliderMarkerVariant>;
+
+export declare type SliderMarkerSlotName = "root" | "text";
+
+export declare const sliderMarkerVariantMap: SliderMarkerVariantMap;
+
+export declare const sliderMarker: ((
+  props?: SliderMarkerVariantProps,
+) => Record<SliderMarkerSlotName, string>) & {
+  splitVariantProps: <T extends SliderMarkerVariantProps>(
+    props: T,
+  ) => [SliderMarkerVariantProps, Omit<T, keyof SliderMarkerVariantProps>];
+}

package/recipes/slider-marker.layered.css

@@ -0,0 +1,73 @@
+@layer seed-components {
+  .seed-slider-marker {
+    width: max-content;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+
+  .seed-slider-marker__text {
+    color: var(--seed-color-fg-neutral-muted);
+    font-weight: var(--seed-font-weight-regular);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+  }
+
+  .seed-slider-marker.seed-slider-marker--dir_ltr {
+    left: calc(var(--marker-position) * 1% + var(--marker-offset));
+  }
+
+  .seed-slider-marker.seed-slider-marker--dir_rtl {
+    right: calc(var(--marker-position) * 1% + var(--marker-offset));
+  }
+
+  .seed-slider-marker__text.seed-slider-marker__text--disabled_true {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-slider-marker__text--align_start.seed-slider-marker__text--dir_ltr {
+    text-align: left;
+  }
+
+  .seed-slider-marker__text--align_start.seed-slider-marker__text--dir_rtl {
+    text-align: right;
+  }
+
+  .seed-slider-marker__text--align_center {
+    text-align: center;
+  }
+
+  .seed-slider-marker--align_center.seed-slider-marker--dir_ltr, .seed-slider-marker__text--align_center.seed-slider-marker__text--dir_ltr {
+    transform: translateX(-50%);
+  }
+
+  .seed-slider-marker--align_center.seed-slider-marker--dir_rtl, .seed-slider-marker__text--align_center.seed-slider-marker__text--dir_rtl {
+    transform: translateX(50%);
+  }
+
+  .seed-slider-marker--align_end.seed-slider-marker--dir_ltr {
+    transform: translateX(-100%);
+  }
+
+  .seed-slider-marker__text--align_end.seed-slider-marker__text--dir_ltr {
+    transform: translateX(-100%);
+  }
+
+  .seed-slider-marker__text--align_end.seed-slider-marker__text--dir_ltr {
+    text-align: right;
+    transform: translateX(-100%);
+  }
+
+  .seed-slider-marker--align_end.seed-slider-marker--dir_rtl {
+    transform: translateX(100%);
+  }
+
+  .seed-slider-marker__text--align_end.seed-slider-marker__text--dir_rtl {
+    transform: translateX(100%);
+  }
+
+  .seed-slider-marker__text--align_end.seed-slider-marker__text--dir_rtl {
+    text-align: left;
+    transform: translateX(100%);
+  }
+}

package/recipes/slider-marker.layered.mjs

@@ -0,0 +1,50 @@
+import './slider-marker.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const sliderMarkerSlotNames = [
+  [
+    "root",
+    "seed-slider-marker"
+  ],
+  [
+    "text",
+    "seed-slider-marker__text"
+  ]
+];
+
+const defaultVariant = {
+  "align": "center"
+};
+
+const compoundVariants = [];
+
+export const sliderMarkerVariantMap = {
+  "align": [
+    "start",
+    "center",
+    "end"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const sliderMarkerVariantKeys = Object.keys(sliderMarkerVariantMap);
+
+export function sliderMarker(props) {
+  return Object.fromEntries(
+    sliderMarkerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(sliderMarker, { splitVariantProps: (props) => splitVariantProps(props, sliderMarkerVariantMap) });
+
+// @recipe(seed): slider-marker

package/recipes/slider-marker.mjs

@@ -0,0 +1,50 @@
+import './slider-marker.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const sliderMarkerSlotNames = [
+  [
+    "root",
+    "seed-slider-marker"
+  ],
+  [
+    "text",
+    "seed-slider-marker__text"
+  ]
+];
+
+const defaultVariant = {
+  "align": "center"
+};
+
+const compoundVariants = [];
+
+export const sliderMarkerVariantMap = {
+  "align": [
+    "start",
+    "center",
+    "end"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const sliderMarkerVariantKeys = Object.keys(sliderMarkerVariantMap);
+
+export function sliderMarker(props) {
+  return Object.fromEntries(
+    sliderMarkerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(sliderMarker, { splitVariantProps: (props) => splitVariantProps(props, sliderMarkerVariantMap) });
+
+// @recipe(seed): slider-marker

package/recipes/slider-tick.css

@@ -0,0 +1,21 @@
+.seed-slider-tick {
+    position: absolute;
+    top: 50%;
+    height: 100%;
+    background-color: var(--seed-color-fg-neutral-inverted);
+    transform: translate(-50%, -50%);
+}.seed-slider-tick__text {
+    transform: translate(-50%, -50%);
+}
+.seed-slider-tick[data-dir='ltr'] {
+    left: calc(var(--tick-position) * 1% + var(--tick-offset));
+}
+.seed-slider-tick[data-dir='rtl'] {
+    right: calc(var(--tick-position) * 1% + var(--tick-offset));
+}
+.seed-slider-tick--weight_thin {
+    width: 1px;
+}
+.seed-slider-tick--weight_thick {
+    width: var(--seed-dimension-x1);
+}

package/recipes/slider-tick.d.ts

@@ -0,0 +1,25 @@
+declare interface SliderTickVariant {
+  /**
+  * @default "thin"
+  */
+  weight: "thin" | "thick";
+  disabled?: boolean;
+  loading?: boolean;}
+
+declare type SliderTickVariantMap = {
+  [key in keyof SliderTickVariant]: Array<SliderTickVariant[key]>;
+};
+
+export declare type SliderTickVariantProps = Partial<SliderTickVariant>;
+
+export declare type SliderTickSlotName = "root" | "text";
+
+export declare const sliderTickVariantMap: SliderTickVariantMap;
+
+export declare const sliderTick: ((
+  props?: SliderTickVariantProps,
+) => Record<SliderTickSlotName, string>) & {
+  splitVariantProps: <T extends SliderTickVariantProps>(
+    props: T,
+  ) => [SliderTickVariantProps, Omit<T, keyof SliderTickVariantProps>];
+}

package/recipes/slider-tick.layered.css

@@ -0,0 +1,32 @@
+@layer seed-components {
+  .seed-slider-tick {
+    background-color: var(--seed-color-fg-neutral-inverted);
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .seed-slider-tick__text {
+    transform: translate(-50%, -50%);
+  }
+
+  .seed-slider-tick__text {
+    transform: translate(-50%, -50%);
+  }
+
+  .seed-slider-tick.seed-slider-tick--dir_ltr {
+    left: calc(var(--tick-position) * 1% + var(--tick-offset));
+  }
+
+  .seed-slider-tick.seed-slider-tick--dir_rtl {
+    right: calc(var(--tick-position) * 1% + var(--tick-offset));
+  }
+
+  .seed-slider-tick--weight_thin {
+    width: 1px;
+  }
+
+  .seed-slider-tick--weight_thick {
+    width: var(--seed-dimension-x1);
+  }
+}

package/recipes/slider-tick.layered.mjs

@@ -0,0 +1,49 @@
+import './slider-tick.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const sliderTickSlotNames = [
+  [
+    "root",
+    "seed-slider-tick"
+  ],
+  [
+    "text",
+    "seed-slider-tick__text"
+  ]
+];
+
+const defaultVariant = {
+  "weight": "thin"
+};
+
+const compoundVariants = [];
+
+export const sliderTickVariantMap = {
+  "weight": [
+    "thin",
+    "thick"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const sliderTickVariantKeys = Object.keys(sliderTickVariantMap);
+
+export function sliderTick(props) {
+  return Object.fromEntries(
+    sliderTickSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(sliderTick, { splitVariantProps: (props) => splitVariantProps(props, sliderTickVariantMap) });
+
+// @recipe(seed): slider-tick

package/recipes/slider-tick.mjs

@@ -0,0 +1,49 @@
+import './slider-tick.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const sliderTickSlotNames = [
+  [
+    "root",
+    "seed-slider-tick"
+  ],
+  [
+    "text",
+    "seed-slider-tick__text"
+  ]
+];
+
+const defaultVariant = {
+  "weight": "thin"
+};
+
+const compoundVariants = [];
+
+export const sliderTickVariantMap = {
+  "weight": [
+    "thin",
+    "thick"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const sliderTickVariantKeys = Object.keys(sliderTickVariantMap);
+
+export function sliderTick(props) {
+  return Object.fromEntries(
+    sliderTickSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(sliderTick, { splitVariantProps: (props) => splitVariantProps(props, sliderTickVariantMap) });
+
+// @recipe(seed): slider-tick