@cdx-ui/components 0.0.1-alpha.32 → 0.0.1-alpha.34

package/src/components/Button/buttonSharedVariants.ts

@@ -1,281 +0,0 @@
-/**
- * Neutral compound-variant **slices** shared by Button and IconButton (no consumer `variant` keys).
- *
- * Each consumer maps these into its own CVA, e.g. filled surface → Button `strong` or IconButton `solid`;
- * ghost surface / outline+ghost foreground → attach the appropriate `variant` / tuple for that component.
- *
- * Button-only outline **surface** (borders) stays in `Button/styles.ts`.
- */
-import { Platform } from 'react-native';
-import { SEMANTIC_COLORS } from '../../styles/primitives';
-
-export type SharedButtonSemanticColor = 'action' | 'danger' | 'warning' | 'success' | 'info';
-
-/** Root surface: filled semantic background (maps to Button `strong`, IconButton `solid`). */
-export const sharedFilledSurfaceCompounds: {
-  color: SharedButtonSemanticColor;
-  mode?: 'dark';
-  className: string | string[];
-}[] = [
-  {
-    color: 'action',
-    className: [
-      SEMANTIC_COLORS.action.bg,
-      Platform.select({
-        default: 'data-[active=true]:bg-slate-700',
-        web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
-      }),
-    ],
-  },
-  {
-    color: 'danger',
-    className: [
-      SEMANTIC_COLORS.danger.bg,
-      Platform.select({
-        default: 'data-[active=true]:bg-red-800',
-        web: 'data-[hover=true]:bg-red-700 data-[active=true]:data-[hover=true]:bg-red-800',
-      }),
-    ],
-  },
-  {
-    color: 'warning',
-    className: [
-      SEMANTIC_COLORS.warning.bg,
-      Platform.select({
-        default: 'data-[active=true]:bg-amber-700',
-        web: 'data-[hover=true]:bg-amber-600 data-[active=true]:data-[hover=true]:bg-amber-700',
-      }),
-    ],
-  },
-  {
-    color: 'success',
-    className: [
-      SEMANTIC_COLORS.success.bg,
-      Platform.select({
-        default: 'data-[active=true]:bg-green-800',
-        web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
-      }),
-    ],
-  },
-  {
-    color: 'info',
-    className: [
-      SEMANTIC_COLORS.info.bg,
-      Platform.select({
-        default: 'data-[active=true]:bg-sky-700',
-        web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
-      }),
-    ],
-  },
-  {
-    color: 'action',
-    mode: 'dark',
-    className: [
-      'bg-slate-200',
-      Platform.select({
-        default: 'data-[active=true]:bg-slate-400',
-        web: 'data-[hover=true]:bg-slate-300 data-[active=true]:data-[hover=true]:bg-slate-400',
-      }),
-    ],
-  },
-];
-
-/** Root surface: ghost hover/active fills (maps to `variant: 'ghost'` on Button and IconButton). */
-export const sharedGhostSurfaceCompounds: {
-  color: SharedButtonSemanticColor;
-  mode?: 'dark';
-  className: string | string[];
-}[] = [
-  {
-    color: 'danger',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-red-100',
-        web: 'data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:bg-red-100',
-      }),
-    ],
-  },
-  {
-    color: 'warning',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-amber-100',
-        web: 'data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:bg-amber-100',
-      }),
-    ],
-  },
-  {
-    color: 'success',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-green-100',
-        web: 'data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:bg-green-100',
-      }),
-    ],
-  },
-  {
-    color: 'info',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-sky-100',
-        web: 'data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:bg-sky-100',
-      }),
-    ],
-  },
-  {
-    color: 'action',
-    mode: 'dark',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-slate-700',
-        web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
-      }),
-    ],
-  },
-  {
-    color: 'danger',
-    mode: 'dark',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-red-950',
-        web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950',
-      }),
-    ],
-  },
-  {
-    color: 'warning',
-    mode: 'dark',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-amber-950',
-        web: 'data-[hover=true]:bg-amber-950/50 data-[active=true]:data-[hover=true]:bg-amber-950',
-      }),
-    ],
-  },
-  {
-    color: 'success',
-    mode: 'dark',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-green-950',
-        web: 'data-[hover=true]:bg-green-950/50 data-[active=true]:data-[hover=true]:bg-green-950',
-      }),
-    ],
-  },
-  {
-    color: 'info',
-    mode: 'dark',
-    className: [
-      Platform.select({
-        default: 'data-[active=true]:bg-sky-950',
-        web: 'data-[hover=true]:bg-sky-950/50 data-[active=true]:data-[hover=true]:bg-sky-950',
-      }),
-    ],
-  },
-];
-
-/** Foreground on filled controls (maps to Button `strong`, IconButton `solid`). */
-export const sharedFilledForegroundTextCompounds: {
-  color: SharedButtonSemanticColor;
-  mode?: 'dark';
-  className: string | string[];
-}[] = [
-  { color: 'action', className: 'text-white' },
-  { color: 'danger', className: 'text-white' },
-  { color: 'warning', className: 'text-white' },
-  { color: 'success', className: 'text-white' },
-  { color: 'info', className: 'text-white' },
-  { color: 'action', mode: 'dark', className: 'text-slate-900' },
-];
-
-/**
- * Foreground for transparent controls: same class names for Button `outline` and `ghost`, and for IconButton `ghost`.
- * Consumers attach their own `variant` key(s).
- */
-export const sharedOutlineGhostForegroundTextCompounds: {
-  color: SharedButtonSemanticColor;
-  mode?: 'dark';
-  className: string | string[];
-}[] = [
-  {
-    color: 'action',
-    className: [
-      'text-slate-900',
-      Platform.select({
-        default: 'data-[active=true]:text-slate-700',
-        web: 'data-[hover=true]:text-slate-800 data-[active=true]:data-[hover=true]:text-slate-700',
-      }),
-    ],
-  },
-  {
-    color: 'danger',
-    className: [
-      'text-red-600',
-      Platform.select({
-        default: 'data-[active=true]:text-red-800',
-        web: 'data-[hover=true]:text-red-700 data-[active=true]:data-[hover=true]:text-red-800',
-      }),
-    ],
-  },
-  {
-    color: 'warning',
-    className: [
-      'text-amber-600',
-      Platform.select({
-        default: 'data-[active=true]:text-amber-800',
-        web: 'data-[hover=true]:text-amber-700 data-[active=true]:data-[hover=true]:text-amber-800',
-      }),
-    ],
-  },
-  {
-    color: 'success',
-    className: [
-      'text-green-600',
-      Platform.select({
-        default: 'data-[active=true]:text-green-800',
-        web: 'data-[hover=true]:text-green-700 data-[active=true]:data-[hover=true]:text-green-800',
-      }),
-    ],
-  },
-  {
-    color: 'info',
-    className: [
-      'text-sky-600',
-      Platform.select({
-        default: 'data-[active=true]:text-sky-800',
-        web: 'data-[hover=true]:text-sky-700 data-[active=true]:data-[hover=true]:text-sky-800',
-      }),
-    ],
-  },
-  {
-    color: 'action',
-    mode: 'dark',
-    className: [
-      'text-white',
-      Platform.select({
-        default: 'data-[active=true]:text-white',
-        web: 'data-[hover=true]:text-white data-[active=true]:data-[hover=true]:text-white',
-      }),
-    ],
-  },
-  {
-    color: 'danger',
-    mode: 'dark',
-    className: 'text-red-400',
-  },
-  {
-    color: 'warning',
-    mode: 'dark',
-    className: 'text-amber-400',
-  },
-  {
-    color: 'success',
-    mode: 'dark',
-    className: 'text-green-400',
-  },
-  {
-    color: 'info',
-    mode: 'dark',
-    className: 'text-sky-400',
-  },
-];