@gallop.software/studio 2.0.1 → 2.0.3

package/src/components/styles/common.ts

@@ -1,236 +0,0 @@
-import { css, keyframes } from '@emotion/react'
-import { colors, fontSize } from '../tokens'
-
-// Common keyframes
-export const spin = keyframes`
-  to { transform: rotate(360deg); }
-`
-
-// Loading states
-export const loadingStyles = {
-  container: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 256px;
-  `,
-  spinner: css`
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    border: 3px solid ${colors.border};
-    border-top-color: ${colors.primary};
-    animation: ${spin} 0.8s linear infinite;
-  `,
-}
-
-// Empty states
-export const emptyStyles = {
-  container: css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 256px;
-    color: ${colors.textSecondary};
-  `,
-  icon: css`
-    width: 48px;
-    height: 48px;
-    margin-bottom: 16px;
-    opacity: 0.5;
-  `,
-  text: css`
-    font-size: ${fontSize.base};
-    margin: 0 0 4px 0;
-    
-    &:last-child {
-      color: ${colors.textMuted};
-      font-size: ${fontSize.sm};
-    }
-  `,
-}
-
-// Buttons
-export const buttonStyles = {
-  base: css`
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    border-radius: 6px;
-    font-size: ${fontSize.sm};
-    font-weight: 500;
-    border: 1px solid ${colors.border};
-    background: ${colors.surface};
-    color: ${colors.text};
-    cursor: pointer;
-    transition: all 0.15s ease;
-    white-space: nowrap;
-    
-    &:hover:not(:disabled) {
-      background: ${colors.surfaceHover};
-      border-color: #d0d5dd;
-    }
-    
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  `,
-  primary: css`
-    background: ${colors.primary};
-    border-color: ${colors.primary};
-    color: white;
-    
-    &:hover:not(:disabled) {
-      background: ${colors.primaryHover};
-      border-color: ${colors.primaryHover};
-    }
-  `,
-  danger: css`
-    color: ${colors.danger};
-    
-    &:hover:not(:disabled) {
-      background: ${colors.dangerLight};
-      border-color: ${colors.dangerLight};
-    }
-  `,
-  icon: css`
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-  `,
-}
-
-// Checkboxes
-export const checkboxStyles = {
-  checkbox: css`
-    width: 16px;
-    height: 16px;
-    accent-color: ${colors.primary};
-    cursor: pointer;
-  `,
-}
-
-// Copy button with tooltip
-export const copyButtonStyles = {
-  button: css`
-    height: 28px;
-    width: 28px;
-    color: ${colors.textMuted};
-    background: transparent;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.15s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    
-    &:hover {
-      color: ${colors.text};
-    }
-  `,
-  icon: css`
-    width: 18px;
-    height: 18px;
-  `,
-  tooltip: css`
-    position: absolute;
-    top: 50%;
-    right: 100%;
-    transform: translateY(-50%);
-    background: #1a1f36;
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    margin-right: 6px;
-    pointer-events: none;
-    z-index: 100;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      right: -4px;
-      top: 50%;
-      transform: translateY(-50%);
-      border-left: 4px solid #1a1f36;
-      border-top: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-    }
-  `,
-}
-
-// CDN badge
-export const cdnBadgeStyles = {
-  badge: css`
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: ${fontSize.xs};
-    font-weight: 500;
-    background: ${colors.successLight};
-    color: ${colors.success};
-  `,
-  icon: css`
-    width: 12px;
-    height: 12px;
-  `,
-  empty: css`
-    color: ${colors.textMuted};
-    font-size: ${fontSize.sm};
-  `,
-}
-
-// Folder icons
-export const folderIconStyles = {
-  folder: css`
-    width: 48px;
-    height: 48px;
-    color: ${colors.folder};
-  `,
-  imagesFolder: css`
-    width: 48px;
-    height: 48px;
-    color: ${colors.imagesFolder};
-  `,
-  lock: css`
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    color: ${colors.imagesFolder};
-  `,
-}
-
-// Select all row
-export const selectAllStyles = {
-  row: css`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 0;
-    margin-bottom: 8px;
-    border-bottom: 1px solid ${colors.border};
-  `,
-  label: css`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: ${fontSize.sm};
-    color: ${colors.textSecondary};
-    cursor: pointer;
-    
-    &:hover {
-      color: ${colors.text};
-    }
-  `,
-}

package/src/components/tokens.ts

@@ -1,78 +0,0 @@
-import { css } from '@emotion/react'
-
-/**
- * Stripe-inspired design tokens for Studio
- * These are self-contained and agnostic of any parent template styling
- */
-
-// Base font stack - system fonts that work everywhere
-export const fontStack = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif`
-
-// Color palette
-export const colors = {
-  // Primary brand
-  primary: '#635bff',
-  primaryHover: '#5851e5',
-  primaryLight: '#f0f0ff',
-  
-  // Backgrounds
-  background: '#f6f9fc',
-  surface: '#ffffff',
-  surfaceHover: '#f6f9fc',
-  
-  // Borders
-  border: '#d8dee4',
-  borderLight: '#e3e8ee',
-  borderHover: '#c1c9d2',
-  
-  // Text
-  text: '#1a1f36',
-  textSecondary: '#697386',
-  textMuted: '#8792a2',
-  
-  // Status
-  success: '#0d7d4d',
-  successLight: '#e6f7ef',
-  danger: '#df1b41',
-  dangerHover: '#c41535',
-  dangerLight: '#fff5f7',
-  
-  // Shadows
-  shadow: 'rgba(50, 50, 93, 0.1)',
-  shadowDark: 'rgba(50, 50, 93, 0.2)',
-  
-  // Special folders
-  folder: '#64748b',
-  imagesFolder: '#8b5cf6',
-  imagesFolderLight: '#f3f0ff',
-}
-
-// Font sizes - slightly larger for better readability
-export const fontSize = {
-  xs: '13px',
-  sm: '14px',
-  base: '16px',
-  md: '17px',
-  lg: '19px',
-  xl: '22px',
-}
-
-// Base reset styles for Studio container - isolates from parent template
-export const baseReset = css`
-  font-family: ${fontStack};
-  font-size: ${fontSize.base};
-  line-height: 1.5;
-  color: ${colors.text};
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  box-sizing: border-box;
-  
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-  
-  button, input, select, textarea {
-    font-family: inherit;
-    font-size: inherit;
-  }
-`