react-restyle-components 0.2.24 → 0.2.26

package/lib/src/core-components/atoms/button/button.module.css

@@ -1,477 +0,0 @@
-:global .theme--dark {
-  --button_color: var(--N0);
-
-  --button_color_brand_secondary: var(--B300);
-  --button_bg_brand_secondary_hover: rgb(from var(--B400) r g b / 0.24);
-
-  --button_color_danger_secondary: var(--Red);
-  --button_bg_danger_secondary_hover: rgb(from var(--R500) r g b / 0.24);
-
-  --button_color_accent_secondary: var(--Accent);
-  --button_bg_accent_secondary_hover: rgb(from var(--A500) r g b / 0.24);
-
-  --button_color_neutral_primary: var(--N0);
-  --button_color_neutral_secondary: var(--Gl200);
-  --button_bg_neutral_primary: var(--Gl600);
-  --button_bg_neutral_primary_hover: var(--Gl700);
-  --button_bg_neutral_secondary_hover: rgb(from var(--Gl400) r g b / 0.24);
-
-  --button_color_disabled: var(--Gl500);
-  --button_bg_disabled_primary: var(--Gl800);
-
-  --button_color_toggle_secondary_unchecked: var(--Gl200);
-  --button_bg_toggle_primary_unchecked: var(--Gl800);
-  --button_bg_toggle_primary_unchecked_hover: var(--Gl700);
-  --button_bg_toggle_secondary_unchecked_hover: var(--Gl600);
-  --button_color_toggle_primary_brand: var(--B300);
-  --button_color_toggle_primary_accent: var(--A400);
-}
-:global .theme--light {
-  --button_color: var(--N0);
-
-  --button_color_brand_secondary: var(--B600);
-  --button_bg_brand_secondary_hover: var(--B50);
-
-  --button_color_danger_secondary: var(--R600);
-  --button_bg_danger_secondary_hover: var(--R50);
-
-  --button_color_accent_secondary: var(--A600);
-  --button_bg_accent_secondary_hover: var(--A50);
-
-  --button_color_neutral_primary: var(--N1000);
-  --button_color_neutral_secondary: var(--N600);
-  --button_bg_neutral_primary: var(--N50);
-  --button_bg_neutral_primary_hover: var(--N100);
-  --button_bg_neutral_secondary_hover: var(--N50);
-
-  --button_color_disabled: var(--N300);
-  --button_bg_disabled_primary: var(--N50);
-  --button_color_toggle_secondary_unchecked: var(--N600);
-  --button_bg_toggle_primary_unchecked: var(--N50);
-  --button_bg_toggle_primary_unchecked_hover: var(--N100);
-  --button_bg_toggle_secondary_unchecked_hover: var(--N50);
-  --button_color_toggle_primary_brand: var(--B500);
-  --button_color_toggle_primary_accent: var(--A600);
-  --button_group_divider_color_netural_primary: var(--N200);
-}
-
-:where(.reset_button) {
-  background: none;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  font: inherit;
-  color: inherit;
-  text-shadow: unset;
-  user-select: none;
-}
-
-.visuallyHidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
-
-:where(.button) {
-  border-radius: var(--button_radius, 4px);
-  flex: var(--button_flex, none);
-  display: inline-flex;
-  align-items: center;
-  justify-content: var(--button-justify-content);
-  line-height: 0;
-  background-color: var(--button_bg);
-  color: var(--button_color, inherit);
-  gap: var(--button_gap, 4px);
-  height: var(--button_height);
-  font-size: var(--button_font_size);
-  padding-left: var(--button_padding);
-  padding-right: var(--button_padding);
-  --button_icon_width: auto;
-  background-clip: padding-box;
-  font-weight: 400;
-  box-sizing: border-box;
-  outline: none;
-}
-
-.button:where(.focus-visible:not(:disabled):focus-visible, .focus:not(:disabled):focus) {
-  box-shadow: var(--button_focus-shadow, 0 0 0 2px var(--global-focus-color));
-}
-
-.button:where(:disabled) {
-  cursor: default;
-}
-
-/* Set size of svg icon in button */
-.button :where(svg) {
-  width: var(--button_icon_size, var(--button_icon_width));
-  height: var(--button_icon_size, var(--button_icon_height));
-}
-
-/* 02: Cross-color rules */
-/* These rules apply across all color/intents */
-
-/* All secondary buttons have no BG in default state: */
-.button-level-secondary {
-  --button_bg: transparent;
-}
-
-/* 03 Color specific rules */
-/* Colors for different colors/intents */
-
-/* 03A: 'Brand' colors */
-/* Text colors */
-.button-theme-brand:not(:disabled).button-level-secondary {
-  --button_color: var(--button_color_brand_secondary);
-}
-/* Bg colors */
-.button-theme-brand:not(:disabled).button-level-primary {
-  --button_bg: var(--B500);
-}
-.button-theme-brand:not(:disabled).button-level-primary:where(:hover, [data-dropdownmenu-state='open']) {
-  --button_bg: var(--B600);
-}
-
-.button-theme-brand:not(:disabled).button-level-secondary:where(:hover, [data-dropdownmenu-state='open']) {
-  --button_bg: var(--button_bg_brand_secondary_hover);
-}
-
-/* 03B: 'Danger' colors */
-/* Text colors */
-.button-theme-danger:not(:disabled).button-level-secondary {
-  --button_color: var(--button_color_danger_secondary);
-}
-/* bg colors */
-.button-theme-danger:not(:disabled).button-level-primary {
-  --button_bg: var(--R500);
-}
-.button-theme-danger:not(:disabled).button-level-primary:where(:hover, [data-dropdownmenu-state='open']) {
-  --button_bg: var(--R600);
-}
-
-.button-theme-danger:not(:disabled).button-level-secondary:where(:hover, [data-dropdownmenu-state='open']) {
-  --button_bg: var(--button_bg_danger_secondary_hover);
-}
-
-/* 03C: 'Accent' colors */
-/* Text colors */
-.button-theme-accent:not(:disabled).button-level-secondary {
-  --button_color: var(--button_color_accent_secondary);
-}
-/* bg colors */
-.button-theme-accent:not(:disabled).button-level-primary {
-  --button_bg: var(--A500);
-}
-.button-theme-accent:not(:disabled).button-level-primary:where(:hover, [data-dropdownmenu-state='open']) {
-  --button_bg: var(--A600);
-}
-.button-theme-accent:not(:disabled).button-level-secondary:where(:hover, [data-dropdownmenu-state='open']) {
-  --button_bg: var(--button_bg_accent_secondary_hover);
-}
-
-/* 03D: 'Neutral' colors */
-/* Text colors */
-.button-theme-neutral:not(:disabled).button-level-primary {
-  --button_color: var(--button_color_neutral_primary);
-}
-.button-theme-neutral:not(:disabled).button-level-secondary {
-  --button_color: var(--button_color_neutral_secondary);
-}
-/* bg colors */
-.button-theme-neutral:not(:disabled).button-level-primary {
-  --button_bg: var(--button_bg_neutral_primary);
-}
-.button-theme-neutral:not(:disabled).button-level-primary:where(:hover, [data-dropdownmenu-state='open']) {
-  --button_bg: var(--button_bg_neutral_primary_hover);
-}
-
-.button-theme-neutral:not(:disabled).button-level-secondary:where(:hover, [data-dropdownmenu-state='open']) {
-  --button_bg: var(--button_bg_neutral_secondary_hover);
-}
-
-.button:disabled {
-  /* text color */
-  --button_color: var(--button_color_disabled);
-}
-.button:disabled.button-level-primary {
-  /* bg color */
-  --button_bg: var(--button_bg_disabled_primary);
-}
-
-/* 05: UISize setup */
-.button-size-xl {
-  --button_font_size: 18px;
-  --button_height: 56px;
-  --button_loading_size: 56px;
-  --button_icon_height: 24px;
-  --button_padding: 20px;
-  --button_gap: 8px;
-}
-
-.button-size-l {
-  --button_font_size: 18px;
-  --button_height: 48px;
-  --button_loading_size: 24px;
-  --button_icon_height: 24px;
-  --button_padding: 16px;
-  --button_gap: 8px;
-}
-
-.button-size-m {
-  --button_font_size: 16px;
-  --button_height: 40px;
-  --button_loading_size: 20px;
-  --button_icon_height: 20px;
-  --button_padding: 12px;
-  --button_gap: 8px;
-}
-
-.button-size-s {
-  --button_font_size: 14px;
-  --button_height: 32px;
-  --button_loading_size: 16px;
-  --button_icon_height: 16px;
-  --button_padding: 8px;
-  --button_gap: 4px;
-}
-
-.button-size-xs {
-  --button_font_size: 12px;
-  --button_height: 24px;
-  --button_loading_size: 12px;
-  --button_icon_height: 12px;
-  --button_padding: 8px;
-  --button_gap: 4px;
-}
-
-.button-size-xxs {
-  --button_font_size: 12px;
-  --button_height: 20px;
-  --button_loading_size: 12px;
-  --button_icon_height: 12px;
-  --button_padding: 4px;
-  --button_gap: 2px;
-}
-
-/* 06: Size adjustments for Icon Only buttons. */
-/* The icons are a bit bigger than when it is text + icon: */
-.button-icon-only.button-size-xl {
-  --button_icon_height: 28px;
-  --button_padding: 13px;
-}
-
-.button-icon-only.button-size-l {
-  --button_icon_height: 28px;
-  --button_padding: 9px;
-}
-
-.button-icon-only.button-size-m {
-  --button_icon_height: 24px;
-  --button_padding: 7px;
-}
-
-.button-icon-only.button-size-s {
-  --button_icon_height: 20px;
-  --button_padding: 5px;
-}
-
-.button-icon-only.button-size-xs {
-  --button_icon_height: 18px;
-  --button_padding: 1.5px;
-}
-
-.button-icon-only.button-size-xxs {
-  --button_icon_height: 14px;
-  --button_padding: 1.5px;
-}
-
-.button-icon-only {
-  min-width: var(--button_height);
-  place-content: center;
-}
-
-/* Loading styles */
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-:where(.loading) {
-  color: transparent;
-  pointer-events: none;
-  position: relative;
-  & > * {
-    visibility: hidden;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: calc(50% - var(--button_loading_size) * 0.5);
-    left: calc(50% - var(--button_loading_size) * 0.5);
-    display: block;
-    width: var(--button_loading_size);
-    aspect-ratio: 1;
-    border: calc(var(--button_loading_size) / 8) solid var(--button_color);
-    border-top-color: transparent;
-    border-radius: 50%;
-    box-sizing: border-box;
-    animation: spin 1s linear infinite;
-  }
-}
-
-/* 07 LinkButton */
-/* LinkButton uses the same styles as Button but applies to an <a> element. */
-/* This rule handle some extra resets we need to do for links: */
-.linkButton {
-  text-decoration: none;
-  width: fit-content;
-}
-
-/* 08 ToggleButton */
-
-.label {
-  display: flex;
-  width: max-content;
-  &:not(:has(:disabled, .loading)) {
-    cursor: pointer;
-  }
-}
-
-/* inactive/unchecked styles: */
-
-.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-secondary {
-  --button_color: var(--button_color_toggle_secondary_unchecked);
-}
-
-.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary.button-theme-brand {
-  --button_color: var(--button_color_toggle_primary_brand);
-}
-.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary.button-theme-accent {
-  --button_color: var(--button_color_toggle_primary_accent);
-}
-.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary.button-theme-danger {
-  --button_color: var(--Red);
-}
-.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary.button-theme-neutral {
-  --button_color: var(--N500);
-}
-
-.checkbox:not(:checked):not(:disabled) + .toggleButton {
-  --button_bg: var(--button_bg_toggle_primary_unchecked);
-}
-.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-secondary {
-  --button_bg: transparent;
-}
-
-.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary:hover {
-  --button_bg: var(--button_bg_toggle_primary_unchecked_hover);
-}
-.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-secondary:hover {
-  --button_bg: var(--button_bg_toggle_secondary_unchecked_hover);
-}
-/* disabled checkbox styles: */
-.checkbox:disabled + .toggleButton {
-  cursor: default;
-  pointer-events: none;
-  /* text color */
-  --button_color: var(--button_color_disabled);
-}
-
-.checkbox:disabled + .toggleButton.button-level-primary {
-  /* bg color */
-  --button_bg: var(--button_bg_disabled_primary);
-}
-
-.checkbox:where(.focus-visible:not(:disabled):focus-visible, .focus:not(:disabled):focus) + .toggleButton {
-  box-shadow: var(--button_focus-shadow, 0 0 0 2px var(--global-focus-color));
-}
-
-.group {
-  display: flex;
-  border-radius: var(--button_radius, 4px);
-
-  &:where(.isverticalhug) {
-    height: max-content;
-  }
-  &:where(.ishorizontalhug) {
-    width: max-content;
-  }
-  &:where(.ishorizontalfill, .isverticalfill) {
-    --button_flex: 1 0 auto;
-  }
-  &:where(.ishorizontal.isverticalfill) {
-    & > * {
-      --button_height: auto;
-    }
-  }
-
-  &:where(.ishorizontal) {
-    & > .button:not(:last-child),
-    & > *:not(:last-child) .button {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    & > .button:not(:first-child),
-    & > *:not(:first-child) .button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      &::before {
-        width: 1px;
-        top: 0;
-        bottom: 0;
-        left: 0;
-      }
-    }
-  }
-  &:where(.isvertical) {
-    flex-direction: column;
-    & > .button:not(:last-child),
-    & > *:not(:last-child) .button {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    & > .button:not(:first-child),
-    & > *:not(:first-child) .button {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      &::before {
-        height: 1px;
-        right: 0;
-        top: 0;
-        left: 0;
-      }
-    }
-  }
-
-  & > .button:not(:first-child),
-  & > *:not(:first-child) .button {
-    position: relative;
-    &::before {
-      position: absolute;
-      display: block;
-      content: '';
-      background-color: color-mix(in srgb, var(--button_bg) 70%, white);
-      align-self: stretch;
-    }
-    &.button-theme-neutral.button-level-primary::before {
-      background-color: var(
-        --button_group_divider_color_netural_primary,
-        color-mix(in srgb, var(--button_bg) 70%, white)
-      );
-    }
-    &.button-level-secondary::before {
-      background-color: rgb(from var(--global-text-primary) r g b / 0.25);
-    }
-  }
-
-  &:has(*:focus-visible, [data-dropdownmenu-state='open']) {
-    box-shadow: var(--button_focus-shadow, 0 0 0 2px rgb(from var(--global-focus-color) r g b / 0.3));
-  }
-}

package/lib/src/core-components/atoms/button/linkButton.component.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-/**
- * Wraps a provided Link component in our button styles.
- * Assumes your chosen Router library uses a Link component that uses a `to` prop.
- */
-export declare const LinkButton: React.ForwardRefExoticComponent<Omit<import("./Button.types").ButtonProps, "loading"> & {
-    to: string;
-    Component: React.ForwardRefExoticComponent<import("react-router/dist/development/fog-of-war-DU_DzpDb").s & React.RefAttributes<HTMLAnchorElement>>;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;

package/lib/src/core-components/atoms/button/linkButton.component.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import s from './button.module.css';
-import { Tooltip } from '../tooltip/tooltip.component';
-/**
- * Wraps a provided Link component in our button styles.
- * Assumes your chosen Router library uses a Link component that uses a `to` prop.
- */
-export const LinkButton = forwardRef(({ to, tooltip, className, level = 'primary', variant = 'brand', scale = 'm', iconOnly = false, children, Component, focus = 'visible', ...args }, ref) => {
-    const linkClasses = clsx(s.button, s.linkButton, s[`button-level-${level}`], s[`button-theme-${variant}`], s[`button-size-${scale}`], iconOnly && s[`button-icon-only`], focus === 'focus' && [s.focus], focus === 'visible' && s[`focus-visible`], className);
-    const link = (React.createElement(Component, { ref: ref, className: linkClasses, ...args, to: to }, children));
-    if (tooltip) {
-        return (React.createElement(Tooltip, { content: tooltip, padding: "s" }, link));
-    }
-    else {
-        return link;
-    }
-});
-LinkButton.displayName = 'LinkButton';

package/lib/src/core-components/atoms/button/toggleButton.component.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-/**
- * A checkbox styled to look like our Button, for a toggleable state UI component.
- */
-export declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("./Button.types").ButtonProps, "variant"> & {
-    labelClassName?: string | undefined;
-    contentClassName?: string | undefined;
-    active?: boolean | undefined;
-    variant?: "brand" | "accent" | undefined;
-} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/lib/src/core-components/atoms/button/toggleButton.component.js

@@ -1,21 +0,0 @@
-import React, { forwardRef } from 'react';
-import clsx from 'clsx';
-import s from './button.module.css';
-import { Tooltip } from '../tooltip/tooltip.component';
-/**
- * A checkbox styled to look like our Button, for a toggleable state UI component.
- */
-export const ToggleButton = forwardRef(({ tooltip, onChange, labelClassName, contentClassName, active, disabled = false, children, level = 'primary', variant = 'brand', scale = 'm', iconOnly = false, focus = 'visible', loading = false, ...restProps }, ref) => {
-    const controlled = typeof active === 'undefined' ? {} : { checked: active };
-    const labelClassNames = clsx(disabled && s.isDisabled, s.label, contentClassName);
-    const childrenClassNames = clsx(s.button, s.toggleButton, s[`button-level-${level}`], s[`button-theme-${variant}`], s[`button-size-${scale}`], loading && s.loading, iconOnly && s[`button-icon-only`], labelClassName);
-    const checkboxClassNames = clsx(s.checkbox, s.visuallyHidden, focus === 'focus' && [s.focus], focus === 'visible' && s[`focus-visible`]);
-    const renderContent = (React.createElement("label", { className: labelClassNames },
-        React.createElement("input", { ref: ref, type: "checkbox", onChange: onChange, disabled: disabled || loading, ...controlled, ...restProps, className: checkboxClassNames }),
-        React.createElement("span", { className: childrenClassNames }, children)));
-    if (!tooltip) {
-        return renderContent;
-    }
-    return (React.createElement(Tooltip, { content: tooltip, padding: "s" }, renderContent));
-});
-ToggleButton.displayName = 'ToggleButton';

package/lib/src/core-components/atoms/tooltip/Tooltip.module.css

@@ -1,44 +0,0 @@
-:global .theme--dark {
-  --tooltip_bg: var(--Gl600);
-  --tooltip_color: var(--N50);
-}
-
-:global .theme--light {
-  --tooltip_bg: var(--N0);
-  --tooltip_color: var(--N600);
-}
-:where(.tooltip_content) {
-  font-size: 12px;
-  line-height: 1.4;
-  color: var(--tooltip_color);
-  background-color: var(--tooltip_bg);
-  opacity: 1;
-  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.24)) drop-shadow(0px 8px 24px rgba(0, 0, 0, 0.08));
-  max-width: min(500px, 90vw);
-  z-index: var(--tooltip-z-custom);
-  border-radius: 3px;
-}
-
-.tooltip_content.tooltip_padding_s {
-  padding: 4px;
-}
-.tooltip_content.tooltip_padding_m {
-  padding: 8px;
-}
-.tooltip_content.tooltip_padding_l {
-  padding: 12px;
-}
-.tooltip_content.tooltip_padding_xl {
-  padding: 16px;
-}
-.tooltip_content.tooltip_padding_custom {
-  padding: var(--tooltip_padding);
-}
-
-.tooltip_arrow {
-  fill: var(--tooltip_bg);
-}
-
-.tooltip_reset_button {
-  all: unset;
-}