@gallop.software/studio 1.5.9 → 2.0.0

package/src/components/styles/common.ts

@@ -0,0 +1,236 @@
+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

@@ -0,0 +1,78 @@
+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;
+  }
+`