<commit_before>{{#if (eq docId "why")}}

  <blockquote>
    <p>
      Design isn't about how it looks, it's about how it works.
    </p>
    <cite>
      <NAME>
    </cite>
  </blockquote>

  <p>
    Do you ever feel like you're always reimplementing the same UI elements for every web app that you're building? You're not alone. Whether it's a button with a loading state, or an input that can show an error message, there are some components that could be considered more or less mandatory for every app.
  </p>

  <p>
    Enter <strong>Ember Sparks</strong>. Using the power of the Ember ecosystem, we can develop a set of components that handle the common functionality that we all need in our apps, while keeping them manageable and customizeable thanks to <a href="https://css-tricks.com/css-modules-part-1-need/" target="_blank">local classes</a> and <a href="https://github.com/salsify/ember-css-modules" target="_blank">ember-css-modules</a>.
  </p>

{{else if (eq docId 'install')}}

  <p>
    Installing Ember Sparks for your Ember app is a piece of cake:
  </p>

  {{code-snippet name="install.bash"}}

  <p>Restart your app and you're good to go!</p>

{{else if (eq docId 'usage')}}

  <p>
    Ember Sparks comes with some handy preinstalled components, such as <code>&#123;&#123;input-spark&#125;&#125;</code> and <code>&#123;&#123;toggle-spark&#125;&#125;</code>.
  </p>

  <p>
    You can use them just by dropping them into your template:
  </p>

  {{code-snippet name="example.hbs"}}

  <p>
    Check out the "Components" link in the top menu to read more about the available options for the built-in Sparks.
  </p>

{{else if (eq docId 'theming')}}

  <p>
    One flaw that other UI libraries have is that they're often cumbersome to style. Either their class names are too general and collide with your app's own classes, or they come with weird prefixes that are difficult to remember and make your CSS feel dirty.
  </p>

  <p>
    Thanks to local classes, Ember Sparks makes styling easy. Here's a quick example of the steps you need to style the <code>&#123;&#123;input-spark&#125;&#125;</code> in your app.
  </p>

  <ol>
    <li>Install the <a href="https://github.com/salsify/ember-css-modules" target="_blank">ember-css-modules</a> addon. This makes sure that your app's classes are local, and is the foundation that Ember Sparks is built on.</li>

    <li>Next, use the built-in "spark-style" generator, and specify the name of the Spark that you want to style:</li>
  </ol>

  {{code-snippet name="style-generate.bash"}}

  <p>
    You should now have an empty CSS-file at <code>app/components/input-spark/styles.css</code> where you'll be able to overwrite the Spark's default styles. You can find the names of the classes in the "Theming" section of the <a href="http://ember-sparks.com/input-spark" target="_blank">component's documentation</a>.
  </p>

  {{code-snippet name="style-default.css"}}

  <p>
    And that's all you need to overwrite the default theme!
  </p>
  
  <p>Next, you might not want <em>all</em> your inputs to look exactly the same, some might be bigger or smaller than others depending on where they are in the app. Ember Sparks components don't have a "size" parameter or anything similar to it. Instead, it leaves the custom styling up to the user through CSS and a single <code>style</code>-parameter.
  </p>

  <p>
  Here's an example of how we can define and apply a <code>big</code>-style to our Spark instance (note that we are using the plugin <a href="https://github.com/jonathantneal/postcss-nesting" target="_blank">postcss-nesting</a> with ember-css-modules to handle nesting, but you could also just write it as <code>.style:global(.big) .input</code>):
  </p><commit_msg>Inform about error message in theming<commit_after>{{#if (eq docId "why")}}

  <blockquote>
    <p>
      Design isn't about how it looks, it's about how it works.
    </p>
    <cite>
      <NAME>
    </cite>
  </blockquote>

  <p>
    Do you ever feel like you're always reimplementing the same UI elements for every web app that you're building? You're not alone. Whether it's a button with a loading state, or an input that can show an error message, there are some components that could be considered more or less mandatory for every app.
  </p>

  <p>
    Enter <strong>Ember Sparks</strong>. Using the power of the Ember ecosystem, we can develop a set of components that handle the common functionality that we all need in our apps, while keeping them manageable and customizeable thanks to <a href="https://css-tricks.com/css-modules-part-1-need/" target="_blank">local classes</a> and <a href="https://github.com/salsify/ember-css-modules" target="_blank">ember-css-modules</a>.
  </p>

{{else if (eq docId 'install')}}

  <p>
    Installing Ember Sparks for your Ember app is a piece of cake:
  </p>

  {{code-snippet name="install.bash"}}

  <p>Restart your app and you're good to go!</p>

{{else if (eq docId 'usage')}}

  <p>
    Ember Sparks comes with some handy preinstalled components, such as <code>&#123;&#123;input-spark&#125;&#125;</code> and <code>&#123;&#123;toggle-spark&#125;&#125;</code>.
  </p>

  <p>
    You can use them just by dropping them into your template:
  </p>

  {{code-snippet name="example.hbs"}}

  <p>
    Check out the "Components" link in the top menu to read more about the available options for the built-in Sparks.
  </p>

{{else if (eq docId 'theming')}}

  <p>
    One flaw that other UI libraries have is that they're often cumbersome to style. Either their class names are too general and collide with your app's own classes, or they come with weird prefixes that are difficult to remember and make your CSS feel dirty.
  </p>

  <p>
    Thanks to local classes, Ember Sparks makes styling easy. Here's a quick example of the steps you need to style the <code>&#123;&#123;input-spark&#125;&#125;</code> in your app.
  </p>

  <ol>
    <li>Install the <a href="https://github.com/salsify/ember-css-modules" target="_blank">ember-css-modules</a> addon. This makes sure that your app's classes are local, and is the foundation that Ember Sparks is built on.</li>

    <li>Next, use the built-in "spark-style" generator, and specify the name of the Spark that you want to style:</li>
  </ol>

  {{code-snippet name="style-generate.bash"}}

  <p>
    If you get an error message saying <code>Error: EEXIST: file already exists</code>, don't panic! Just restart your Ember server and everything should be fine.
  </p>

  <p>
    You should now have an empty CSS-file at <code>app/components/input-spark/styles.css</code> where you'll be able to overwrite the Spark's default styles. You can find the names of the classes in the "Theming" section of the <a href="http://ember-sparks.com/input-spark" target="_blank">component's documentation</a>.
  </p>

  {{code-snippet name="style-default.css"}}

  <p>
    And that's all you need to overwrite the default theme!
  </p>
  
  <p>Next, you might not want <em>all</em> your inputs to look exactly the same, some might be bigger or smaller than others depending on where they are in the app. Ember Sparks components don't have a "size" parameter or anything similar to it. Instead, it leaves the custom styling up to the user through CSS and a single <code>style</code>-parameter.
  </p>

  <p>
  Here's an example of how we can define and apply a <code>big</code>-style to our Spark instance (note that we are using the plugin <a href="https://github.com/jonathantneal/postcss-nesting" target="_blank">postcss-nesting</a> with ember-css-modules to handle nesting, but you could also just write it as <code>.style:global(.big) .input</code>):
  </p>
{'fraction_non_alphanumeric': 0.11711125569290826, 'fraction_numerical': 0.009629147690305791, 'mean_word_length': 3.7858032378580324, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 141, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3405404', 'n_tokens_mistral': 2467, 'n_tokens_neox': 2280, 'n_words': 1014}