@granto-umbrella/umbrella-components 3.0.33 → 3.0.36

package/src/components/atoms/Button/Button.styles.ts

@@ -1,280 +1,279 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-const buttonSizes = {
-  sm: css`
-    padding: ${semanticSizes.global.padding.md};
-    font-size: ${typographyTokens.fontSizes.labelS};
-    
-  `,
-  md: css`
-    padding: ${semanticSizes.global.padding.md}${' '}${semanticSizes.global.padding.xl};
-    font-size: ${typographyTokens.fontSizes.bodyS};
-    
-  `,
-  lg: css`
-    padding: ${semanticSizes.global.padding.md}${' '}${semanticSizes.global.padding.xl};
-    font-size: ${typographyTokens.fontSizes.bodyL};
-   
-  `,
-};
-
-const buttonVariants = {
-  primary: css`
-    background: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.base.background};
-    border: none;
-    &:hover {
-      background: ${semanticColors.branding.surface.hover};
-    }
-    &:active {
-      background: ${semanticColors.branding.surface.pressed};
-    }
-    &:disabled {
-      background: ${semanticColors.branding.surface.disabled};
-    }
-  `,
-  outline: css`
-    border: 1px solid ${semanticColors.branding.border.enabled};
-    color: ${semanticColors.branding.text.accent.enabled};
-    background: transparent;
-    &:hover {
-      border: 1px solid ${semanticColors.branding.border.hover};
-      color: ${semanticColors.branding.text.accent.hover};
-    }
-    &:active {
-      border: 1px solid ${semanticColors.branding.border.pressed};
-      color: ${semanticColors.branding.text.accent.pressed};
-    }
-    &:disabled {
-      color: ${semanticColors.branding.text.accent.disabled};
-      border: 1px solid ${semanticColors.branding.border.disabled};
-    }
-  `,
-  outline_ghost: css`
-    border: 1px solid ${semanticColors.global.text.subtitle.enabled};
-    color: ${semanticColors.global.text.subtitle.enabled};
-    background: transparent;
-    &:hover {
-      border: 1px solid ${semanticColors.global.text.subtitle.enabled};
-      color: ${semanticColors.global.text.subtitle.enabled};
-    }
-    &:active {
-      border: 1px solid ${semanticColors.global.text.subtitle.enabled};
-      color: ${semanticColors.global.text.subtitle.enabled};
-    }
-    &:disabled {
-      color: ${semanticColors.global.text.onSurface.enabled};
-      border: 1px solid ${semanticColors.global.text.onSurface.enabled};
-      background: ${semanticColors.global.surface.disabled};
-    }
-  `,
-  outline_ghost_disabled: css`
-    border: 1px solid ${semanticColors.global.border.medium};
-    color: ${semanticColors.global.text.subtitle.enabled};
-    background: transparent;
-    &:hover {
-      border: 1px solid ${semanticColors.global.text.subtitle.enabled};
-      color: ${semanticColors.global.text.subtitle.enabled};
-    }
-    &:active {
-      border: 1px solid ${semanticColors.global.text.subtitle.enabled};
-      color: ${semanticColors.global.text.subtitle.enabled};
-    }
-    &:disabled {
-      color: ${semanticColors.global.text.onSurface.enabled};
-      border: 1px solid ${semanticColors.global.text.onSurface.enabled};
-      background: ${semanticColors.global.surface.disabled};
-    }
-  `,
-  outline_danger: css`
-    border: 1px solid ${semanticColors.danger.surface.enabled};
-    color: ${semanticColors.danger.text.enabled};
-    background: transparent;
-    &:hover {
-      border: 1px solid ${semanticColors.danger.surface.hover};
-      color: ${semanticColors.danger.text.hover};
-    }
-    &:active {
-      border: 1px solid ${semanticColors.danger.surface.pressed};
-      color: ${semanticColors.danger.text.pressed};
-    }
-    &:disabled {
-      border: 1px solid ${semanticColors.danger.surface.disabled};
-      color: ${semanticColors.danger.text.disabled};
-    }
-  `,
-  ghost: css`
-    background: transparent;
-    color: ${semanticColors.branding.text.accent.enabled};
-    border: none;
-    &:hover {
-      color: ${semanticColors.branding.text.accent.hover};
-    }
-    &:active {
-      color: ${semanticColors.branding.text.accent.pressed};
-    }
-    &:disabled {
-      color: ${semanticColors.branding.text.accent.disabled};
-    }
-  `,
-
-  ghost_alert: css`
-    background: transparent;
-    color: ${semanticColors.danger.text.enabled};
-    border: none;
-    &:hover {
-      color: ${semanticColors.danger.text.hover};
-    }
-    &:active {
-      color: ${semanticColors.danger.text.pressed};
-    }
-    &:disabled {
-      color: ${semanticColors.danger.text.disabled};
-    }
-  `,
-  danger: css`
-    background: ${semanticColors.danger.surface.enabled};
-    color: ${semanticColors.danger.text.onSurface};
-    border: none;
-    &:hover {
-      background: ${semanticColors.danger.surface.hover};
-    }
-    &:active {
-      background: ${semanticColors.danger.surface.pressed};
-    }
-    &:disabled {
-      background: ${semanticColors.danger.surface.disabled};
-    }
-  `,
-  alert: css`
-    background: transparent;
-    color: ${semanticColors.neutral[700]};
-    border: 1px solid ${semanticColors.neutral[700]};
-    &:hover {
-      background: ${semanticColors.neutral[200]};
-      color: ${semanticColors.neutral[600]};
-    }
-    &:active {
-      background: ${semanticColors.neutral[300]};
-    }
-    &:disabled {
-      color: ${semanticColors.neutral[400]};
-    }
-  `,
-
-  'danger-no-fill': css`
-    background: transparent;
-    color: ${semanticColors.danger.text.enabled};
-    border: none;
-    &:hover {
-      color: ${semanticColors.danger.text.hover};
-    }
-    &:active {
-      color: ${semanticColors.danger.text.pressed};
-    }
-    &:disabled {
-      color: ${semanticColors.danger.text.disabled};
-    }
-  `,
-  'accent-outline': css`
-    background: transparent;
-    color: ${semanticColors.branding.text.accent.enabled};
-    border: 1px solid ${semanticColors.branding.border.enabled};
-    &:hover {
-      color: ${semanticColors.branding.text.accent.hover};
-      border: 1px solid ${semanticColors.branding.border.hover};
-    }
-    &:active {
-      color: ${semanticColors.branding.text.accent.pressed};
-      border: 1px solid ${semanticColors.branding.border.pressed};
-    }
-    &:disabled {
-      color: ${semanticColors.branding.text.accent.disabled};
-      border: 1px solid ${semanticColors.branding.border.disabled};
-    }
-  `,
-  'accent-fill': css`
-    background: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-    border: none;
-    &:hover {
-      background: ${semanticColors.branding.surface.hover};
-    }
-    &:active {
-      background: ${semanticColors.branding.surface.pressed};
-    }
-    &:disabled {
-      background: ${semanticColors.branding.surface.disabled};
-    }
-  `,
-  'secondary-outline': css`
-    background: transparent;
-    color: ${semanticColors.global.text.subtitle.enabled};
-    border: 1px solid ${semanticColors.global.border.strong};
-    &:hover {
-      background: ${semanticColors.neutral[200]};
-    }
-    &:active {
-      background: ${semanticColors.neutral[300]};
-    }
-    &:disabled {
-      color: ${semanticColors.global.text.onSurface.enabled};
-      border: 1px solid ${semanticColors.global.text.onSurface.enabled};
-      background: ${semanticColors.global.surface.disabled};
-    }
-  `,
-  'danger-fill': css`
-    background: ${semanticColors.danger.surface.enabled};
-    color: ${semanticColors.danger.text.onSurface};
-    border: none;
-    &:hover {
-      background: ${semanticColors.danger.surface.hover};
-    }
-    &:active {
-      background: ${semanticColors.danger.surface.pressed};
-    }
-    &:disabled {
-      background: ${semanticColors.danger.surface.disabled};
-    }
-  `,
-};
-
-export const StyledButton = styled.button<{
-  $size: keyof typeof buttonSizes;
-  $variant: keyof typeof buttonVariants;
-  $width?: string;
-  $height?: string;
-  $radius?: string;
-  $fontSize?: string;
-  $disabled?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  border-radius: ${({ $radius }) =>
-    semanticRadius.global.radius[
-      ($radius as keyof typeof semanticRadius.global.radius) || 'md'
-    ]};
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  gap: ${semanticSizes.global.gap.sm};
-
-  ${({ $size }) => buttonSizes[$size]}
-  ${({ $variant }) => buttonVariants[$variant]}
-
-  width: ${({ $width }) => $width || 'auto'};
-  height: ${({ $height }) => $height || 'auto'};
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-`;
+import styled, { css } from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+} from '../../../styles/tokens';
+
+const buttonSizes = {
+  sm: css`
+    padding: ${semanticSizes.global.padding.md};
+    font-size: ${typographyTokens.fontSizes.labelS};
+  `,
+  md: css`
+    padding: ${semanticSizes.global.padding.md}${' '}${semanticSizes.global
+        .padding.xl};
+    font-size: ${typographyTokens.fontSizes.bodyS};
+  `,
+  lg: css`
+    padding: ${semanticSizes.global.padding.md}${' '}${semanticSizes.global
+        .padding.xl};
+    font-size: ${typographyTokens.fontSizes.bodyL};
+  `,
+};
+
+const buttonVariants = {
+  primary: css`
+    background: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.base.background};
+    border: none;
+    &:hover {
+      background: ${semanticColors.branding.surface.hover};
+    }
+    &:active {
+      background: ${semanticColors.branding.surface.pressed};
+    }
+    &:disabled {
+      background: ${semanticColors.branding.surface.disabled};
+    }
+  `,
+  outline: css`
+    border: 1px solid ${semanticColors.branding.border.enabled};
+    color: ${semanticColors.branding.text.accent.enabled};
+    background: transparent;
+    &:hover {
+      border: 1px solid ${semanticColors.branding.border.hover};
+      color: ${semanticColors.branding.text.accent.hover};
+    }
+    &:active {
+      border: 1px solid ${semanticColors.branding.border.pressed};
+      color: ${semanticColors.branding.text.accent.pressed};
+    }
+    &:disabled {
+      color: ${semanticColors.branding.text.accent.disabled};
+      border: 1px solid ${semanticColors.branding.border.disabled};
+    }
+  `,
+  outline_ghost: css`
+    border: 1px solid ${semanticColors.global.text.subtitle.enabled};
+    color: ${semanticColors.global.text.subtitle.enabled};
+    background: transparent;
+    &:hover {
+      border: 1px solid ${semanticColors.global.text.subtitle.enabled};
+      color: ${semanticColors.global.text.subtitle.enabled};
+    }
+    &:active {
+      border: 1px solid ${semanticColors.global.text.subtitle.enabled};
+      color: ${semanticColors.global.text.subtitle.enabled};
+    }
+    &:disabled {
+      color: ${semanticColors.global.text.onSurface.enabled};
+      border: 1px solid ${semanticColors.global.text.onSurface.enabled};
+      background: ${semanticColors.global.surface.disabled};
+    }
+  `,
+  outline_ghost_disabled: css`
+    border: 1px solid ${semanticColors.global.border.medium};
+    color: ${semanticColors.global.text.subtitle.enabled};
+    background: transparent;
+    &:hover {
+      border: 1px solid ${semanticColors.global.text.subtitle.enabled};
+      color: ${semanticColors.global.text.subtitle.enabled};
+    }
+    &:active {
+      border: 1px solid ${semanticColors.global.text.subtitle.enabled};
+      color: ${semanticColors.global.text.subtitle.enabled};
+    }
+    &:disabled {
+      color: ${semanticColors.global.text.onSurface.enabled};
+      border: 1px solid ${semanticColors.global.text.onSurface.enabled};
+      background: ${semanticColors.global.surface.disabled};
+    }
+  `,
+  outline_danger: css`
+    border: 1px solid ${semanticColors.danger.surface.enabled};
+    color: ${semanticColors.danger.text.enabled};
+    background: transparent;
+    &:hover {
+      border: 1px solid ${semanticColors.danger.surface.hover};
+      color: ${semanticColors.danger.text.hover};
+    }
+    &:active {
+      border: 1px solid ${semanticColors.danger.surface.pressed};
+      color: ${semanticColors.danger.text.pressed};
+    }
+    &:disabled {
+      border: 1px solid ${semanticColors.danger.surface.disabled};
+      color: ${semanticColors.danger.text.disabled};
+    }
+  `,
+  ghost: css`
+    background: transparent;
+    color: ${semanticColors.branding.text.accent.enabled};
+    border: none;
+    &:hover {
+      color: ${semanticColors.branding.text.accent.hover};
+    }
+    &:active {
+      color: ${semanticColors.branding.text.accent.pressed};
+    }
+    &:disabled {
+      color: ${semanticColors.branding.text.accent.disabled};
+    }
+  `,
+
+  ghost_alert: css`
+    background: transparent;
+    color: ${semanticColors.danger.text.enabled};
+    border: none;
+    &:hover {
+      color: ${semanticColors.danger.text.hover};
+    }
+    &:active {
+      color: ${semanticColors.danger.text.pressed};
+    }
+    &:disabled {
+      color: ${semanticColors.danger.text.disabled};
+    }
+  `,
+  danger: css`
+    background: ${semanticColors.danger.surface.enabled};
+    color: ${semanticColors.danger.text.onSurface};
+    border: none;
+    &:hover {
+      background: ${semanticColors.danger.surface.hover};
+    }
+    &:active {
+      background: ${semanticColors.danger.surface.pressed};
+    }
+    &:disabled {
+      background: ${semanticColors.danger.surface.disabled};
+    }
+  `,
+  alert: css`
+    background: transparent;
+    color: ${semanticColors.neutral[700]};
+    border: 1px solid ${semanticColors.neutral[700]};
+    &:hover {
+      background: ${semanticColors.neutral[200]};
+      color: ${semanticColors.neutral[600]};
+    }
+    &:active {
+      background: ${semanticColors.neutral[300]};
+    }
+    &:disabled {
+      color: ${semanticColors.neutral[400]};
+    }
+  `,
+
+  'danger-no-fill': css`
+    background: transparent;
+    color: ${semanticColors.danger.text.enabled};
+    border: none;
+    &:hover {
+      color: ${semanticColors.danger.text.hover};
+    }
+    &:active {
+      color: ${semanticColors.danger.text.pressed};
+    }
+    &:disabled {
+      color: ${semanticColors.danger.text.disabled};
+    }
+  `,
+  'accent-outline': css`
+    background: transparent;
+    color: ${semanticColors.branding.text.accent.enabled};
+    border: 1px solid ${semanticColors.branding.border.enabled};
+    &:hover {
+      color: ${semanticColors.branding.text.accent.hover};
+      border: 1px solid ${semanticColors.branding.border.hover};
+    }
+    &:active {
+      color: ${semanticColors.branding.text.accent.pressed};
+      border: 1px solid ${semanticColors.branding.border.pressed};
+    }
+    &:disabled {
+      color: ${semanticColors.branding.text.accent.disabled};
+      border: 1px solid ${semanticColors.branding.border.disabled};
+    }
+  `,
+  'accent-fill': css`
+    background: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    border: none;
+    &:hover {
+      background: ${semanticColors.branding.surface.hover};
+    }
+    &:active {
+      background: ${semanticColors.branding.surface.pressed};
+    }
+    &:disabled {
+      background: ${semanticColors.branding.surface.disabled};
+    }
+  `,
+  'secondary-outline': css`
+    background: transparent;
+    color: ${semanticColors.global.text.subtitle.enabled};
+    border: 1px solid ${semanticColors.global.border.strong};
+    &:hover {
+      background: ${semanticColors.neutral[200]};
+    }
+    &:active {
+      background: ${semanticColors.neutral[300]};
+    }
+    &:disabled {
+      color: ${semanticColors.global.text.onSurface.enabled};
+      border: 1px solid ${semanticColors.global.text.onSurface.enabled};
+      background: ${semanticColors.global.surface.disabled};
+    }
+  `,
+  'danger-fill': css`
+    background: ${semanticColors.danger.surface.enabled};
+    color: ${semanticColors.danger.text.onSurface};
+    border: none;
+    &:hover {
+      background: ${semanticColors.danger.surface.hover};
+    }
+    &:active {
+      background: ${semanticColors.danger.surface.pressed};
+    }
+    &:disabled {
+      background: ${semanticColors.danger.surface.disabled};
+    }
+  `,
+};
+
+export const StyledButton = styled.button<{
+  $size: keyof typeof buttonSizes;
+  $variant: keyof typeof buttonVariants;
+  $width?: string;
+  $height?: string;
+  $radius?: string;
+  $fontSize?: string;
+  $disabled?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: ${({ $radius }) =>
+    semanticRadius.global.radius[
+      ($radius as keyof typeof semanticRadius.global.radius) || 'md'
+    ]};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  gap: ${semanticSizes.global.gap.sm};
+
+  ${({ $size }) => buttonSizes[$size]}
+  ${({ $variant }) => buttonVariants[$variant]}
+
+  width: ${({ $width }) => $width || 'auto'};
+  height: ${({ $height }) => $height || 'auto'};
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;