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

package/recipes/page-banner.mjs

@@ -1,117 +0,0 @@
-import './page-banner.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const pageBannerSlotNames = [
-  [
-    "root",
-    "seed-page-banner__root"
-  ],
-  [
-    "content",
-    "seed-page-banner__content"
-  ],
-  [
-    "body",
-    "seed-page-banner__body"
-  ],
-  [
-    "title",
-    "seed-page-banner__title"
-  ],
-  [
-    "description",
-    "seed-page-banner__description"
-  ],
-  [
-    "button",
-    "seed-page-banner__button"
-  ],
-  [
-    "closeButton",
-    "seed-page-banner__closeButton"
-  ]
-];
-
-const defaultVariant = {
-  "tone": "neutral",
-  "variant": "weak"
-};
-
-const compoundVariants = [
-  {
-    "tone": "neutral",
-    "variant": "weak"
-  },
-  {
-    "tone": "neutral",
-    "variant": "solid"
-  },
-  {
-    "tone": "informative",
-    "variant": "weak"
-  },
-  {
-    "tone": "informative",
-    "variant": "solid"
-  },
-  {
-    "tone": "positive",
-    "variant": "weak"
-  },
-  {
-    "tone": "positive",
-    "variant": "solid"
-  },
-  {
-    "tone": "warning",
-    "variant": "weak"
-  },
-  {
-    "tone": "warning",
-    "variant": "solid"
-  },
-  {
-    "tone": "critical",
-    "variant": "weak"
-  },
-  {
-    "tone": "critical",
-    "variant": "solid"
-  },
-  {
-    "tone": "magic",
-    "variant": "weak"
-  }
-];
-
-export const pageBannerVariantMap = {
-  "variant": [
-    "weak",
-    "solid"
-  ],
-  "tone": [
-    "neutral",
-    "informative",
-    "positive",
-    "warning",
-    "critical",
-    "magic"
-  ]
-};
-
-export const pageBannerVariantKeys = Object.keys(pageBannerVariantMap);
-
-export function pageBanner(props) {
-  return Object.fromEntries(
-    pageBannerSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(pageBanner, { splitVariantProps: (props) => splitVariantProps(props, pageBannerVariantMap) });
-
-// @recipe(seed): page-banner

package/recipes/pull-to-refresh.css

@@ -1,15 +0,0 @@
-.seed-pull-to-refresh__root {
-    --ptr-size: 44px;
-    --ptr-transition-duration: var(--seed-duration-d6);
-    height: 100%;
-}
-.seed-pull-to-refresh__indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translateY(min(calc(var(--ptr-displacement, 0) - var(--ptr-size)), 0px));
-    transition: transform var(--seed-duration-d6);
-}
-.seed-pull-to-refresh__indicator.seed-pull-to-refresh__indicator--ptr-dragging_true {
-    transition: none;
-}

package/recipes/pull-to-refresh.d.ts

@@ -1,21 +0,0 @@
-declare interface PullToRefreshVariant {
-  
-}
-
-declare type PullToRefreshVariantMap = {
-  [key in keyof PullToRefreshVariant]: Array<PullToRefreshVariant[key]>;
-};
-
-export declare type PullToRefreshVariantProps = Partial<PullToRefreshVariant>;
-
-export declare type PullToRefreshSlotName = "root" | "indicator";
-
-export declare const pullToRefreshVariantMap: PullToRefreshVariantMap;
-
-export declare const pullToRefresh: ((
-  props?: PullToRefreshVariantProps,
-) => Record<PullToRefreshSlotName, string>) & {
-  splitVariantProps: <T extends PullToRefreshVariantProps>(
-    props: T,
-  ) => [PullToRefreshVariantProps, Omit<T, keyof PullToRefreshVariantProps>];
-}

package/recipes/pull-to-refresh.layered.css

@@ -1,19 +0,0 @@
-@layer seed-components {
-  .seed-pull-to-refresh__root {
-    --ptr-size: 44px;
-    --ptr-transition-duration: var(--seed-duration-d6);
-    height: 100%;
-  }
-
-  .seed-pull-to-refresh__indicator {
-    transform: translateY(min(calc(var(--ptr-displacement, 0)  - var(--ptr-size)), 0px));
-    transition: transform var(--seed-duration-d6);
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-
-  .seed-pull-to-refresh__indicator.seed-pull-to-refresh__indicator--ptr-dragging_true {
-    transition: none;
-  }
-}

package/recipes/pull-to-refresh.layered.mjs

@@ -1,36 +0,0 @@
-import './pull-to-refresh.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const pullToRefreshSlotNames = [
-  [
-    "root",
-    "seed-pull-to-refresh__root"
-  ],
-  [
-    "indicator",
-    "seed-pull-to-refresh__indicator"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const pullToRefreshVariantMap = {};
-
-export const pullToRefreshVariantKeys = Object.keys(pullToRefreshVariantMap);
-
-export function pullToRefresh(props) {
-  return Object.fromEntries(
-    pullToRefreshSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(pullToRefresh, { splitVariantProps: (props) => splitVariantProps(props, pullToRefreshVariantMap) });
-
-// @recipe(seed): pull-to-refresh

package/recipes/pull-to-refresh.mjs

@@ -1,36 +0,0 @@
-import './pull-to-refresh.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const pullToRefreshSlotNames = [
-  [
-    "root",
-    "seed-pull-to-refresh__root"
-  ],
-  [
-    "indicator",
-    "seed-pull-to-refresh__indicator"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const pullToRefreshVariantMap = {};
-
-export const pullToRefreshVariantKeys = Object.keys(pullToRefreshVariantMap);
-
-export function pullToRefresh(props) {
-  return Object.fromEntries(
-    pullToRefreshSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(pullToRefresh, { splitVariantProps: (props) => splitVariantProps(props, pullToRefreshVariantMap) });
-
-// @recipe(seed): pull-to-refresh

package/recipes/reaction-button.css

@@ -1,115 +0,0 @@
-.seed-reaction-button {
-    display: inline-flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    flex-shrink: 0;
-}.seed-reaction-button__text {
-    font-family: inherit;
-}
-.seed-reaction-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-    --seed-count-font-weight: var(--seed-font-weight-bold);
-    --seed-count-color: var(--seed-color-fg-neutral);
-}
-.seed-reaction-button__text {
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-    --seed-count-font-weight: var(--seed-font-weight-bold);
-    --seed-count-color: var(--seed-color-fg-neutral);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    font-weight: var(--seed-font-weight-medium);
-    color: var(--seed-color-fg-neutral);
-}
-.seed-reaction-button:active {
-    background: var(--seed-color-bg-transparent-pressed);
-}
-.seed-reaction-button[aria-pressed=true], .seed-reaction-button.seed-reaction-button--pressed_true {
-    background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
-    --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-count-color: var(--seed-color-fg-brand);
-}
-.seed-reaction-button__text[aria-pressed=true], .seed-reaction-button__text.seed-reaction-button__text--pressed_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-count-color: var(--seed-color-fg-brand);
-    color: var(--seed-color-fg-brand);
-}
-.seed-reaction-button[aria-pressed=true]:active, .seed-reaction-button.seed-reaction-button--pressed_true:active {
-    background: var(--seed-color-bg-transparent-pressed);
-}
-.seed-reaction-button.seed-reaction-button--disabled_true {
-    background: var(--seed-color-bg-disabled);
-    box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand-weak);
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-count-color: var(--seed-color-fg-disabled);
-}
-.seed-reaction-button__text.seed-reaction-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-count-color: var(--seed-color-fg-disabled);
-    color: var(--seed-color-fg-disabled);
-}
-.seed-reaction-button.seed-reaction-button--loading_true {
-    background: var(--seed-color-bg-neutral-weak-pressed);
-}
-.seed-reaction-button[aria-pressed=true][data-loading], .seed-reaction-button.seed-reaction-button--pressed_true[data-loading] {
-    background: var(--seed-color-bg-transparent-pressed);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
-    --track-color: var(--seed-color-palette-carrot-200);
-    --range-color: var(--seed-color-fg-brand);
-}
-.seed-reaction-button__text[aria-pressed=true][data-loading], .seed-reaction-button__text.seed-reaction-button__text--pressed_true[data-loading] {
-    --track-color: var(--seed-color-palette-carrot-200);
-    --range-color: var(--seed-color-fg-brand);
-}
-.seed-reaction-button--size_xsmall {
-    height: var(--seed-dimension-x8);
-    padding-left: var(--seed-dimension-x3);
-    padding-right: var(--seed-dimension-x3);
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5);
-    gap: var(--seed-dimension-x1);
-    border-radius: var(--seed-radius-full);
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-}
-.seed-reaction-button__text--size_xsmall {
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-    font-size: var(--seed-font-size-t3);
-    line-height: var(--seed-line-height-t3);
-}
-.seed-reaction-button--size_small {
-    height: var(--seed-dimension-x9);
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
-    gap: var(--seed-dimension-x1);
-    border-radius: var(--seed-radius-full);
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-}
-.seed-reaction-button__text--size_small {
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-    font-size: var(--seed-font-size-t3);
-    line-height: var(--seed-line-height-t3);
-}

package/recipes/reaction-button.d.ts

@@ -1,25 +0,0 @@
-declare interface ReactionButtonVariant {
-  /**
-  * @default "small"
-  */
-  size: "xsmall" | "small";
-  disabled?: boolean;
-  loading?: boolean;}
-
-declare type ReactionButtonVariantMap = {
-  [key in keyof ReactionButtonVariant]: Array<ReactionButtonVariant[key]>;
-};
-
-export declare type ReactionButtonVariantProps = Partial<ReactionButtonVariant>;
-
-export declare type ReactionButtonSlotName = "root" | "text";
-
-export declare const reactionButtonVariantMap: ReactionButtonVariantMap;
-
-export declare const reactionButton: ((
-  props?: ReactionButtonVariantProps,
-) => Record<ReactionButtonSlotName, string>) & {
-  splitVariantProps: <T extends ReactionButtonVariantProps>(
-    props: T,
-  ) => [ReactionButtonVariantProps, Omit<T, keyof ReactionButtonVariantProps>];
-}

package/recipes/reaction-button.layered.css

@@ -1,173 +0,0 @@
-@layer seed-components {
-  .seed-reaction-button {
-    border: none;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-    position: relative;
-  }
-
-  .seed-reaction-button__text {
-    font-family: inherit;
-  }
-
-  .seed-reaction-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-    --seed-count-font-weight: var(--seed-font-weight-bold);
-    --seed-count-color: var(--seed-color-fg-neutral);
-  }
-
-  .seed-reaction-button__text {
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-    --seed-count-font-weight: var(--seed-font-weight-bold);
-    --seed-count-color: var(--seed-color-fg-neutral);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-  }
-
-  .seed-reaction-button__text {
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-    --seed-count-font-weight: var(--seed-font-weight-bold);
-    --seed-count-color: var(--seed-color-fg-neutral);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    font-weight: var(--seed-font-weight-medium);
-    color: var(--seed-color-fg-neutral);
-  }
-
-  .seed-reaction-button:active {
-    background: var(--seed-color-bg-transparent-pressed);
-  }
-
-  .seed-reaction-button[aria-pressed="true"], .seed-reaction-button.seed-reaction-button--pressed_true {
-    background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
-    --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-count-color: var(--seed-color-fg-brand);
-  }
-
-  .seed-reaction-button__text[aria-pressed="true"], .seed-reaction-button__text.seed-reaction-button__text--pressed_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-count-color: var(--seed-color-fg-brand);
-  }
-
-  .seed-reaction-button__text[aria-pressed="true"], .seed-reaction-button__text.seed-reaction-button__text--pressed_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-count-color: var(--seed-color-fg-brand);
-    color: var(--seed-color-fg-brand);
-  }
-
-  .seed-reaction-button[aria-pressed="true"]:active, .seed-reaction-button.seed-reaction-button--pressed_true:active {
-    background: var(--seed-color-bg-transparent-pressed);
-  }
-
-  .seed-reaction-button.seed-reaction-button--disabled_true {
-    background: var(--seed-color-bg-disabled);
-    box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand-weak);
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-count-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-reaction-button__text.seed-reaction-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-count-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-reaction-button__text.seed-reaction-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-count-color: var(--seed-color-fg-disabled);
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-reaction-button.seed-reaction-button--loading_true {
-    background: var(--seed-color-bg-neutral-weak-pressed);
-  }
-
-  .seed-reaction-button[aria-pressed="true"][data-loading], .seed-reaction-button.seed-reaction-button--pressed_true.seed-reaction-button--loading_true {
-    background: var(--seed-color-bg-transparent-pressed);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
-    --track-color: var(--seed-color-palette-carrot-200);
-    --range-color: var(--seed-color-fg-brand);
-  }
-
-  .seed-reaction-button__text[aria-pressed="true"][data-loading], .seed-reaction-button__text.seed-reaction-button__text--pressed_true.seed-reaction-button__text--loading_true {
-    --track-color: var(--seed-color-palette-carrot-200);
-    --range-color: var(--seed-color-fg-brand);
-  }
-
-  .seed-reaction-button__text[aria-pressed="true"][data-loading], .seed-reaction-button__text.seed-reaction-button__text--pressed_true.seed-reaction-button__text--loading_true {
-    --track-color: var(--seed-color-palette-carrot-200);
-    --range-color: var(--seed-color-fg-brand);
-  }
-
-  .seed-reaction-button--size_xsmall {
-    height: var(--seed-dimension-x8);
-    padding-left: var(--seed-dimension-x3);
-    padding-right: var(--seed-dimension-x3);
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5);
-    gap: var(--seed-dimension-x1);
-    border-radius: var(--seed-radius-full);
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-  }
-
-  .seed-reaction-button__text--size_xsmall {
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-  }
-
-  .seed-reaction-button__text--size_xsmall {
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-    font-size: var(--seed-font-size-t3);
-    line-height: var(--seed-line-height-t3);
-  }
-
-  .seed-reaction-button--size_small {
-    height: var(--seed-dimension-x9);
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
-    gap: var(--seed-dimension-x1);
-    border-radius: var(--seed-radius-full);
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-  }
-
-  .seed-reaction-button__text--size_small {
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-  }
-
-  .seed-reaction-button__text--size_small {
-    --size: 14px;
-    --thickness: 2px;
-    --seed-count-font-size: var(--seed-font-size-t3);
-    --seed-count-line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 18px;
-    font-size: var(--seed-font-size-t3);
-    line-height: var(--seed-line-height-t3);
-  }
-}

package/recipes/reaction-button.layered.mjs

@@ -1,49 +0,0 @@
-import './reaction-button.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const reactionButtonSlotNames = [
-  [
-    "root",
-    "seed-reaction-button"
-  ],
-  [
-    "text",
-    "seed-reaction-button__text"
-  ]
-];
-
-const defaultVariant = {
-  "size": "small"
-};
-
-const compoundVariants = [];
-
-export const reactionButtonVariantMap = {
-  "size": [
-    "xsmall",
-    "small"
-  ],
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const reactionButtonVariantKeys = Object.keys(reactionButtonVariantMap);
-
-export function reactionButton(props) {
-  return Object.fromEntries(
-    reactionButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(reactionButton, { splitVariantProps: (props) => splitVariantProps(props, reactionButtonVariantMap) });
-
-// @recipe(seed): reaction-button

package/recipes/reaction-button.mjs

@@ -1,49 +0,0 @@
-import './reaction-button.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const reactionButtonSlotNames = [
-  [
-    "root",
-    "seed-reaction-button"
-  ],
-  [
-    "text",
-    "seed-reaction-button__text"
-  ]
-];
-
-const defaultVariant = {
-  "size": "small"
-};
-
-const compoundVariants = [];
-
-export const reactionButtonVariantMap = {
-  "size": [
-    "xsmall",
-    "small"
-  ],
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const reactionButtonVariantKeys = Object.keys(reactionButtonVariantMap);
-
-export function reactionButton(props) {
-  return Object.fromEntries(
-    reactionButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(reactionButton, { splitVariantProps: (props) => splitVariantProps(props, reactionButtonVariantMap) });
-
-// @recipe(seed): reaction-button

package/recipes/scroll-fog.css

@@ -1,11 +0,0 @@
-.seed-scroll-fog {
-    position: relative;
-    overflow: auto;
-    height: 100%;
-    width: 100%;
-    --scroll-fog-from-color: #00000000;
-    --scroll-fog-to-color: #000000ff;
-}.seed-scroll-fog__text {
-    --scroll-fog-from-color: #00000000;
-    --scroll-fog-to-color: #000000ff;
-}