@supersoniks/concorde 3.1.86 → 3.1.87

package/docs/src/docs/_getting-started/theming.md

@@ -1,91 +0,0 @@
-# Adding styles
-
-## Normal Behavior
-
-No style crosses the shadow root of a component, except for inheritable properties (which have the "inherit" property possible) and CSS variables.
-Properties integrated via a "[slot](https://developer.mozilla.org/en/docs/Web/HTML/Element/slot)" remain stylizable in a conventional way.
-
-- **During creation / from the inside:**
-  - We edit the [static "styles" property of the lit component](https://lit.dev/docs/components/styles/), which can also reference shared and dynamic styles.
-    These styles are scoped and do not impact the outside.
-  - We use CSS variables as the value of properties intended to be customized from the outside.
-    For each variable, we define a default value to have a simple but consistent base style.
-  - We only rewrite inheritable properties with hard values if they are truly specific to the component.
-  - The `<style>` tag as a direct child can be used as a last resort, especially if there is a need for particularly dynamic customization. Performance is reduced.
-- **During use / from the outside:**
-  We define values for **inheritable CSS properties** (e.g., font-\_, color...) using tools like Tailwind.
-  We modify the value of **CSS variables** used by the component.
-
-## Choosing Style Presets via Reactive Properties:
-
-The declaration of reactive properties is useful for selecting a particular configuration that mostly affects a set of properties.
-
-For example, a `size` property (xs, sm, md, xl) will affect margins, font, line heights to align them with the corresponding CSS vars, which can be customized using the methods mentioned earlier if necessary.
-
-It is recommended to use the `{reflect: true}` property for reactive properties that have an associated style on the `:host()`. For example: `:host([type='primary']){...}`
-
-☢️ **Caution:** Passing class names via reactive properties / HTML attributes of the component should be avoided as it can quickly lead to difficult-to-manage situations.
-
-#### CSS "display" Property
-
-By default, the display property is `inline`.
-Therefore, be careful to define it according to the needs, as one might mistakenly expect it to be `block` as with a regular `<div>`.
-
-☢️ **Caution:** Defining the `display` property as `contents` may seem attractive at first, but:
-
-- It almost always leads to the creation of wrappers to style the content (instead of using `:host`).
-- It is no longer possible to directly add classes to the component or style it from the outside.
-  Ultimately, the amount of code to write increases significantly.
-
-## TAILWIND Functional Classes
-
-[tailwind](https://tailwindcss.com/) has been integrated into Concorde and is available in scoped components (with Shadow DOM).
-To use it, you need to import the following:
-
-<sonic-code language="javascript">
-  <template>
-import { tailwind } from "@supersoniks/concorde/la-billetterie/ui/theme/theme";
-  </template>
-</sonic-code>
-
-Then include the `tailwind` style in the static `styles` property of the component:
-
-<sonic-code language="javascript">
-  <template>
-static styles = [tailwind];
-  </template>
-</sonic-code>
-
-Finally, use it in the HTML within the render function:
-
-<sonic-code language="html">
-  <template>
-<p class="m-2">A paragraph with margin</p>
-  </template>
-</sonic-code>
-
-The colors from Concorde's theme are referenced in Tailwind's theme.
-
-## Operation without Shadow DOM
-
-### Usefulness
-
-This operation is particularly useful when it comes to **adding behavior to a simple existing element**.
-It may also become necessary to establish **compatibility with a traditional JS library**.
-
-For example, with a text input:
-
-- Trigger automatic data or filter update when typing text.
-- Automatic formatting.
-- Constraints that cannot be handled by native methods.
-
-### Consequences
-
-If there is no shadow DOM (see the **noShadowDom** property of **Subscriber**):
-
-- Styling using the static "styles" property of the lit component will not be applied.
-- The element and its content can be styled in a traditional manner.
-
-For example, the components `queue`, `list`, and `fetch` do not have a shadow DOM.
-
-ℹ️ **Note:** Specifically in this case, it may be useful to set the `display` property to `contents`.