Trabajando en Svelte con Emotion

estilos para que no tenga que ir a buscarlos

font-family: 'Courier New', Courier, monospace;
    margin: 0 50px 25px;
    padding: 10px 15px 25px;
    text-align: center;
    transform: scale(1);
    transition: .3s transform;

de nada 😎

Modifique un poco los estilos:

Aquí esta el código:

:global(body) {
    --bg: #eeeeee;
    --color: #334257;
    --color2: #548ca8;
    --color3: #334257;
    background: var(--bg);
    color: var(--color);
    margin: 0;
  }

/*----------- styles.js-------------------*/
export const title = css`
  border-bottom: 3px solid var(--color3);
  padding-bottom: 10px;
  text-align: center;
`;

export const form = css`
  background: white;
  color: var(--color2);
  font-family: "Courier New", Courier, monospace;
  margin: 0 50px 25px;
  padding: 10px 25px 25px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 5px 15px gray;
  transform: scale(1);
  transition: transform 0.4s;

  &:hover {
    transform: scale(1.2);
  }
`;

export const button = css`
  background: var(--color3);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--bg);
  padding: 5px 10px;
  margin: 0 5px;
  transition: border 0.15s;

  &:hover {
    border: 1px solid var(--color2);
    cursor: pointer;
  }

  &[disabled] {
    background: var(--bg);
    border: 1px solid var(--color3);
    color: var(--color3);
  }
`;

La solución al reto de una forma bastante SENCILLA! 🥸 👇

Link: https://codesandbox.io/s/first-app-svelte-2rjuo?file=/App.svelte:0-314

App.svelte

<script>
  import Form from "./Form.svelte";
  import { title } from "./styles.js";
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
  :global(body) {
    background: var(--bg);
    color: var(--color);
  }
</style>

<main>
	<h1 class="{title}">Películas</h1>
  <Form />
</main>

Form.svelte

<script>
  import { form } from "./styles.js";
  import { button } from "./styles.js";
  import { setStyle } from "./themes.js";

  setStyle();

  const movies = [
    {
      name: "Avengers",
      available: 5,
      quantity: 0
    },
    {
      name: "Terminator",
      available: 3,
      quantity: 0
    }
  ];
</script>

{#each movies as movie}
<form class="{form}" on:mouseenter={setStyle(movie.name)}>
	<h3>{movie.name}</h3>
	<button class="{button}" type="button" on:click={() => movie.quantity--} disabled={movie.quantity <= 0}>-</button>
	{movie.quantity}
	<button class="{button}" type="button" on:click={() => movie.quantity++} disabled={movie.quantity >= movie.available}>+</button>
</form>
{/each}

<style>
</style>

themes.js

export const themes = {
  avengers: {
    bg: "#ffe9c5",
    color: "#e54b00",
    color2: "#512613"
  },
  terminator: {
    bg: "#030303",
    color: "#32d2dd",
    color2: "#d0d0d0"
  }
};

export function setStyle(themeName = "terminator") {
  const theme = themes[themeName.toLowerCase()];

  for (const property in theme) {
    const propertyName = "--" + property;
    document.body.style.setProperty(propertyName, theme.[property]);
  }
}

styles.js

import { css } from "@emotion/css";

export const title = css`
  border-bottom: 1px solid var(--color2);
  padding: 10px;
`;

export const form = css`
  background: var(--bg);
  color: var(--color2);
  border: 1px solid var(--color);
  margin: 0px 50px 25px;
  padding: 10px 25px 25px;
  transform: scale(1);
  transition: 0.3s transform;

  &:hover {
    transform: scale(1.2);
  }
`;

export const button = css`
  background: var(--color);
  border: 1px solid transparent;
  padding: 5px 10px;
  cursor: pointer;
  transform: 0.15s border-color;

  &:hover {
    border-color: var(--color2);
  }

  &[disabled] {
    opacity: 0.5;
  }
`;

& ampesand

styles.js para que no andes buscando los estilos.

import { css } from '@emotion/css';

export const title = css `
  border-bottom: 1px solid var(--color2);
  padding-bottom: 10px;
`;

export const form = css `
    background: var(--bg);
    color: var(--color2);
    font-family: 'Courier New', Courier, monospace;
    margin: 0 50px 25px;
    padding: 10px 15px 25px;
    border: 1px solid var(--color);
    text-align: center;
    transform: scale(1);
    transition: .3s transform;

    &:hover{
      transform: scale(1.2);
    }
`;

export const button = css`
  background: var(--color);
  border: 1px solid transparent;
  padding: 5px 10px;
  margin: 0 5px;
  transition: border 0.15s;

  &:hover{
    border: 1px solid var(--color2);
    cursor: pointer;
  }

  &[disabled] {
    opacity: 0.5;
  }
`;

Esta forma parece ser la mas cómoda o fácil, opinión personal

Se ve más simple Emotion (en el buen sentido) que Styled Components, a veces no entiendo por qué son tan populares React, y Styled Components cuando se ven mucho más amigables Vue.js y Svelte, sea con CSS normal, Sass o Emotion. Estás tecnologías son nuevas para mi pero es la impresion que me da… Como que el Workflow es mejor en Vue y Svelte.

&: Ampersand

Aqui les dejo los colores

//App.js
<style>
:global(body){
  --bg:#ffe9c5;
  --color:#e54b00;
  --color2:#512613;
}
</style>

No esta tan dinamico que digamos, pero cumple el objetivo jejeje

Form.svelte

{#each movies as movie}
<form class="{form}" 
on:mouseenter={(e)=>window.document.body.classList.add(movie.name.toLowerCase())}
on:mouseleave={(e)=>window.document.body.classList.remove(movie.name.toLowerCase())}>

	<h3>
		{movie.name}
	</h3>
	<button class="{button}" type="button" on:click={() => movie.quantity -= 1}
  disabled = {movie.quantity <= 0}>-</button>
	{movie.quantity}
	<button class="{button}" type="button" on:click={() => movie.quantity += 1}
  disabled = {movie.quantity >= movie.available }>+</button>
</form>
{/each}

App.svelte

<style>
  :global(body) {
    --bg: #ffe9c5;
    --color: #e54b00;
    --color2: #512613;
    background: var(--bg);
    color: var(--color);
  }
  :global(body.avengers) {
    --bg: #ccddcc;
    --color: #010;
    --color2: rgba(50, 100, 50, 0.5);
  }
  :global(body.tron) {
    --bg: #4665;
    --color: #8452;
    --color2: rgba(50, 100, 50, 0.5);
  }
  :global(body.sucia) {
    --bg: #6345;
    --color: #1563;
    --color2: rgba(50, 54, 50, 0.5);
  }
</style>```

una solución del reto 🤗:
sandbox

Ampersand es el nombre del simbolito

Enlace rapido para ir a conocer mas de Emotion
https://emotion.sh/docs/introduction

De todos los frameworks y librerias que hemos vista hasta el momento Svelte es el que más me está gustando.

me base un “poco” en el aporte de Julian David Toro Medina y pude hacerlo. los dejo a ver si les funciona.
aquí dejo el link al codesandbox https://codesandbox.io/s/class1-svelte-4o9p4c?file=/buttons.svelte:0-447

Form.svelte

<script>
  import { form } from "./styles.js";
  import Buttons from "./buttons.svelte";

  //importo setStyle desde theme.js y lo ejecuto
  import { setStyle } from "./theme.js";

  setStyle();

  const movies = [
    {
      name: "avengers",
      available: 5,
      quantity: 0
    },
    {
      name: "Terminator",
      available: 3,
      quantity: 0
    },
    {
      name: "Avatar",
      available: 4,
      quantity: 0
    }
  ];

  // en el script estoy llamando a la funcion setStyle con una arrow function con el evento de mouseenter (así es en svelte)
</script>
  {#each movies as movie}
<form class="{form}" on:mouseenter={()=>setStyle(movie.name)}>
	<h3>{movie.name}</h3>
	<Buttons initialValue ={0} maxValue={movie.available}/>
</form>
{/each}

theme.js

// creamos los temas para cada pelicula y el tema por defecto basic
const themes = {
  basic: {
    bg: "#ffe9c5",
    color: "#e54b00",
    color2: "#512613"
  },
  avengers: {
    bg: "#ceceff",
    color: "#335",
    color2: "rgba(5,5,100,0.5)"
  },
  terminator: {
    bg: "#ccffcc",
    color: "#010",
    color2: "rgba(50,100,50,0.5)"
  },
  avatar: {
    bg: "#48baff",
    color: "#506062",
    color2: "rgba(50,100,50,0.5)"
  }
};

/*creamos y exportamos la funcion que modifica el tema. setStyle tiene un nombre de
Tema que vendria siendo el nombre de la pelicula (se decidio arriba). Lo pasamos a
minusculas para facilitar trabaajar con el.
el "--" + propety es porque saca error cuando escribo el nombre de un elemnto del objeto y este no empieza con una letra*/

export function setStyle(themeName = "basic"){
 const theme = themes[themeName.toLowerCase()];

   for (const property in theme){
     const propertyName = "--" +property;
     document.body.style.setProperty(propertyName, theme.[property])
    }
  }

me parecio mas facil de entender emotion que styled components no se si es porque sea svelte pero la sintaxis se ve mucho mas limpia e intuitiva

Ami me gusta como se maneja los estilos de esta manera, si siguen la ruta de React a profundidad o algo asi jajaja las primeras clases enseñan como declarar variables globales y reutilizarlas en la hoja de estilos, aquí solo es organizar y ya. EASY

Me quedó así

emotion me encantó!!

6:39 crear nuestros estilos con emotion.

Mi solución al reto:
https://codesandbox.io/s/peliculas-consvelte-jx00wq?file=/themes.js

App.svelte

<script>
  import Form from "./form.svelte";
  import { title } from "./styles.js";
  let className = "avengers";
  const formHover = name => {
    className = name.toLowerCase();
  };
</script>

<main class="{className}">
	 <h2 class="{title}">Películas</h2>
   <Form hoverEvent = {formHover}/>
</main>

<style>
  :global(body) {
    margin: 0;
  }

  :global(main) {
    margin: 0;
    padding: 0;
    position: absolute;
    background-color: var(--bg);
    color: var(--color);
    font-family: sans-serif;
    inline-size: 100vw;
    block-size: 100vh;
  }

  .avengers {
    --bg: #ffe9c5;
    --color: #e54b00;
    --color2: #512613;
  }

  .terminator {
    --bg: #e54b00;
    --color: #512613;
    --color2: #ffe9c5;
  }
</style>

Form.svelte

<script>
  import { form, button } from "./styles.js";

  const movies = [
    { name: "Avengers", available: 3, quantity: 0 },
    { name: "Terminator", available: 5, quantity: 0 }
  ];

  export let hoverEvent;
</script>

{
  #each movies as movie
}

<form on:mouseover={()=>hoverEvent(movie.name)} class="{form}">
	<h3>{movie.name}</h3>
	<button class="{button}"
    on:click={()=>movie.quantity += 1}
    disabled={movie.quantity>=movie.available}
    type="button">+</button>
	 {movie.quantity}
	<button class="{button}"
    on:click={()=>movie.quantity -= 1}
    disabled={movie.quantity<=0}
    type="button">-</button>
</form>
{
  /each
}

El símbolo “&” se llama ampersand

Svelte es muy parecido a Vue, muy comodo para trabajar.

Mis apuntes en Notion💚