@supersoniks/concorde 3.1.40 → 3.1.42

package/src/core/components/ui/loader/loader.md

@@ -8,19 +8,49 @@
   </template>
 </sonic-code>
 
+## CurrentColor 
+
+<sonic-code>
+  <template>
+    <sonic-loader mode="inline" currentColor style="color:purple;"></sonic-loader>
+  </template>
+</sonic-code>
+
+
+## Align
+
+<sonic-code>
+  <template>
+    <sonic-loader mode="inline" align="left"></sonic-loader>
+    <sonic-loader mode="inline" align="center"></sonic-loader>
+    <sonic-loader mode="inline" align="right"></sonic-loader>
+  </template>
+</sonic-code>
+
 ## Fixed mode
 
 <sonic-code >
   <template>
-    <div formDataProvider="toazdar">
-      <sonic-button  name="toggleLoader" value="on">
-        Toggle fixed loader
-        <sonic-loader swap="on"></sonic-loader>
-      </sonic-button>
+    <div dataProvider="toggleLoaderForm" formDataProvider="toggleLoaderForm">
+      <sonic-checkbox label="Show fixed loader" 
+          name="toggleLoader"
+          unique  value="true">
+      </sonic-checkbox>
+      <sonic-if  data-bind ::condition="$toggleLoader" >
+        <sonic-loader></sonic-loader>
+      </sonic-if>
     </div>
   </template>
 </sonic-code>
 
+
+## Loading button
+<sonic-code>
+  <template>
+    <sonic-button loading>A loading button</sonic-button>
+  </template>
+</sonic-code>
+
 ## Hide / show programmatically
 
 <sonic-code language="javascript">

package/src/core/components/ui/loader/loader.ts

@@ -1,11 +1,11 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
 
-import {inline} from "@supersoniks/concorde/core/components/ui/loader/styles/inline";
-import {fixed} from "@supersoniks/concorde/core/components/ui/loader/styles/fixed";
-import {Theme} from "@supersoniks/concorde/core/components/ui/theme/theme";
+import { inline } from "@supersoniks/concorde/core/components/ui/loader/styles/inline";
+import { fixed } from "@supersoniks/concorde/core/components/ui/loader/styles/fixed";
+import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
 export type LoaderMode = "inline" | "fixed" | "noDelay";
-type LoaderConf = {mode?: string; container?: HTMLElement; noDelay?: boolean};
+type LoaderConf = { mode?: string; container?: HTMLElement; noDelay?: boolean };
 const tagName = "sonic-loader";
 @customElement(tagName)
 export class Loader extends LitElement {
@@ -14,10 +14,14 @@ export class Loader extends LitElement {
     fixed,
     css`
       :host {
-        --sc-loader-bg: var(--sc-primary, currentColor);
+        --sc-_loader-bg: var(--sc-primary, currentColor);
         pointer-events: none;
       }
 
+      :host([currentColor]) {
+        --sc-_loader-bg: currentColor;
+      }
+
       .sonic-loader {
         opacity: 0;
         animation: showLoader 0.5s 0.5s forwards;
@@ -41,7 +45,8 @@ export class Loader extends LitElement {
   static loader: Loader;
   static callCounter = 0;
   static show(conf?: LoaderConf) {
-    if (!Loader.loader) Loader.loader = document.createElement("sonic-loader") as Loader;
+    if (!Loader.loader)
+      Loader.loader = document.createElement("sonic-loader") as Loader;
     const loader: Loader = Loader.loader;
     if (!conf) conf = {};
     if (conf.mode) loader.setAttribute("mode", conf.mode);
@@ -67,11 +72,15 @@ export class Loader extends LitElement {
    * * inline : Loader dans le contenu
    * * fixed : Loader global par dessus la page
    */
-  @property({type: String}) mode: LoaderMode = "fixed";
-  @property({type: Boolean}) noDelay: boolean = false;
+  @property({ type: String }) mode: LoaderMode = "fixed";
+  @property({ type: Boolean }) noDelay: boolean = false;
 
   render() {
-    return html`<div class="sonic-loader sonic-loader--${this.mode} ${this.noDelay ? "sonic-loader--nodelay" : ""} ">
+    return html`<div
+      class="sonic-loader sonic-loader--${this.mode} ${this.noDelay
+        ? "sonic-loader--nodelay"
+        : ""} "
+    >
       <div></div>
       <div></div>
       <div></div>

package/src/core/components/ui/loader/styles/fixed.ts

@@ -1,7 +1,6 @@
 import { css } from "lit";
 
 export const fixed = css`
-
   @keyframes sonic-loader--fixed {
     0% {
       transform: scale(0);
@@ -11,7 +10,7 @@ export const fixed = css`
       opacity: 1;
     }
     70% {
-      opacity:90%;
+      opacity: 90%;
     }
     100% {
       transform: scale(1);
@@ -21,12 +20,12 @@ export const fixed = css`
 
   .sonic-loader--fixed {
     position: fixed;
-    top:50%;
-    left:50%;
-    transform:transateY(-50%) translateX(-50%);
-    z-index:999;
+    top: 50%;
+    left: 50%;
+    transform: transateY(-50%) translateX(-50%);
+    z-index: 999;
   }
-  
+
   .sonic-loader--fixed > div:nth-child(2) {
     animation-delay: -0.5s;
   }
@@ -35,10 +34,10 @@ export const fixed = css`
   }
 
   .sonic-loader--fixed > div:nth-child(4) {
-    display:none !important;
+    display: none !important;
   }
   .sonic-loader--fixed > div {
-    background-color: var(--sc-loader-bg);
+    background-color: var(--sc-_loader-bg);
     width: 5rem;
     height: 5rem;
     border-radius: 100%;
@@ -54,5 +53,4 @@ export const fixed = css`
     height: 5rem;
     animation: sonic-loader--fixed 1s 0s linear infinite;
   }
-  
 `;

package/src/core/components/ui/loader/styles/inline.ts

@@ -1,4 +1,4 @@
-import {css} from "lit";
+import { css } from "lit";
 
 export const inline = css`
   :host([align="left"]) .sonic-loader--inline {
@@ -23,7 +23,7 @@ export const inline = css`
     width: 13px;
     height: 13px;
     border-radius: 50%;
-    background: var(--sc-loader-bg);
+    background: var(--sc-_loader-bg);
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
   }
   .sonic-loader--inline div:nth-child(1) {

package/src/core/components/ui/menu/menu.ts

@@ -9,6 +9,7 @@ import {
 } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import { Size } from "../_css/size";
+import { Shadow, shadowable } from "../_css/shadow";
 const tagName = "sonic-menu";
 
 @customElement(tagName)
@@ -31,25 +32,6 @@ export class MenuItems extends LitElement {
         display: none !important;
       }
 
-      /*OMBRE*/
-      :host([shadow]) .shadowable,
-      :host([shadow="md"]) .shadowable,
-      :host([shadow="true"]) .shadowable {
-        box-shadow: var(--sc-shadow);
-      }
-
-      :host([shadow="sm"]) .shadowable {
-        box-shadow: var(--sc-shadow-sm);
-      }
-
-      :host([shadow="lg"]) .shadowable {
-        box-shadow: var(--sc-shadow-lg);
-      }
-
-      :host([shadow="none"]) .shadowable {
-        box-shadow: none;
-      }
-
       /* SCROLLABLE*/
       :host([scrollable]) {
         scrollbar-width: none;
@@ -151,6 +133,7 @@ export class MenuItems extends LitElement {
         );
       }
     `,
+    shadowable,
   ];
 
   /**
@@ -173,14 +156,7 @@ export class MenuItems extends LitElement {
   /**
    * Ombre
    */
-  @property({ type: String, reflect: true }) shadow:
-    | ""
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "none"
-    | null = null;
+  @property({ type: String, reflect: true }) shadow: Shadow = null;
 
   @property({ type: String }) moreShape: "square" | "circle" = "circle";
   @property({ type: Boolean }) scrollable = false;

package/src/core/components/ui/modal/modal-subtitle.ts

@@ -1,5 +1,5 @@
-import {html, LitElement, css} from "lit";
-import {customElement} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
 const tagName = "sonic-modal-subtitle";
 
 @customElement(tagName)
@@ -10,9 +10,13 @@ export class ModalSubTitle extends LitElement {
         font-size: 1.1rem;
         display: block;
         line-height: 1.1rem;
-        line-height: var(--sc-headings-line-height);
-        font-family: var(--sc-headings-font-family);
-        font-weight: var(--sc-headings-font-weight);
+        line-height: var(--sc-headings-line-height, 1.1);
+        font-family: var(
+          --sc-headings-font-family,
+          var(--sc-font-family-base, sans-serif)
+        );
+        font-weight: var(--sc-headings-font-weight, 700);
+        font-style: var(--sc-headings-font-style, normal);
       }
     `,
   ];

package/src/core/components/ui/modal/modal-title.ts

@@ -1,5 +1,5 @@
-import {html, LitElement, css} from "lit";
-import {customElement} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
 const tagName = "sonic-modal-title";
 
 @customElement(tagName)
@@ -10,8 +10,13 @@ export class ModalTitle extends LitElement {
         font-weight: bold;
         font-size: 1.5rem;
         display: block;
-        line-height: var(--sc-headings-line-height);
-        font-family: var(--sc-headings-font-family);
+        line-height: var(--sc-headings-line-height, 1.1);
+        font-family: var(
+          --sc-headings-font-family,
+          var(--sc-font-family-base, sans-serif)
+        );
+        font-weight: var(--sc-headings-font-weight, 700);
+        font-style: var(--sc-headings-font-style, normal);
       }
     `,
   ];

package/src/core/components/ui/modal/modal.md

@@ -14,7 +14,7 @@
       <sonic-modal-content>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
       </sonic-modal-content>
-      <sonic-modal-actions formDataProvider="youpla">
+      <sonic-modal-actions formDataProvider="ModalMiniForm">
         <sonic-button FormCheckable hideModal="false" minWidth="8rem" value="true" name="click">
           Click don't close
         </sonic-button>
@@ -76,15 +76,15 @@
 
 <sonic-code>
   <template>
-    <sonic-button onclick="document.getElementById('force').show()"> Action obligatoire </sonic-button>
+    <sonic-button onclick="document.getElementById('force').show()"> Force action to close</sonic-button>
     <sonic-modal forceAction id="force">
-      <sonic-modal-title>Voulez-vous accepter les cookies ? </sonic-modal-title>
+      <sonic-modal-title>Do you want some cookies ? </sonic-modal-title>
       <sonic-modal-content>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
       </sonic-modal-content>
-      <sonic-modal-actions formDataProvider="youpla">
-        <sonic-button> Nope </sonic-button>
-        <sonic-button minWidth="8rem" type="success">Carrément</sonic-button>
+      <sonic-modal-actions >
+        <sonic-button minWidth="8rem"> Nope </sonic-button>
+        <sonic-button minWidth="8rem" type="success">Hell yes !</sonic-button>
       </sonic-modal-actions>
     </sonic-modal>
     </sonic-modal>

package/src/core/components/ui/modal/modal.ts

@@ -86,8 +86,8 @@ export class Modal extends Subscriber(LitElement) {
       }
 
       .modal {
-        background: var(--sc-base);
-        color: var(--sc-base-content);
+        background: var(--sc-base, #fff);
+        color: var(--sc-base-content, #000);
         width: 100%;
         box-shadow: var(--sc-shadow-lg);
         border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0;
@@ -97,7 +97,10 @@ export class Modal extends Subscriber(LitElement) {
       }
 
       .overlay {
-        background: var(--sc-modal-overlay-bg, var(--sc-base-200));
+        background: var(
+          --sc-modal-overlay-bg,
+          var(--sc-base-200, rgba(0, 0, 0, 0.12))
+        );
         left: 0;
         top: 0;
         right: 0;

package/src/core/components/ui/pop/pop.ts

@@ -4,6 +4,7 @@ import { customElement, query, state, property } from "lit/decorators.js";
 import HTML, {
   SearchableDomElement,
 } from "@supersoniks/concorde/core/utils/HTML";
+import { Shadow, shadowable } from "../_css/shadow";
 // Toast
 type PopPlacement =
   | "bottom"
@@ -30,7 +31,7 @@ export class Pop extends LitElement {
 
       slot[name="content"] {
         max-width: 80vw;
-        background-color: var(--sc-base);
+        background-color: var(--sc-base, #fff);
         position: fixed;
         z-index: 99999;
         display: block;
@@ -51,29 +52,11 @@ export class Pop extends LitElement {
         transition-timing-function: cubic-bezier(0.25, 0.25, 0.42, 1.225);
       }
 
-      /*OMBRE*/
-      :host([shadow]) slot[name="content"],
-      :host([shadow="md"]) slot[name="content"],
-      :host([shadow="true"]) slot[name="content"] {
-        box-shadow: var(--sc-shadow);
-      }
-
-      :host([shadow="sm"]) slot[name="content"] {
-        box-shadow: var(--sc-shadow-sm);
-      }
-
-      :host([shadow="none"]) slot[name="content"] {
-        box-shadow: none;
-      }
-
-      :host([shadow="lg"]) slot[name="content"] {
-        box-shadow: var(--sc-shadow-lg);
-      }
-
       :host([inline]) {
         vertical-align: baseline;
       }
     `,
+    shadowable,
   ];
 
   @state() open = false;
@@ -85,12 +68,7 @@ export class Pop extends LitElement {
   /**
    * Ombre
    */
-  @property({ type: String, reflect: true }) shadow:
-    | ""
-    | "none"
-    | "sm"
-    | "md"
-    | "lg" = "lg";
+  @property({ type: String, reflect: true }) shadow: Shadow = "lg";
 
   @property({ type: String }) placement: PopPlacement = "bottom";
   positioningRuns = false;
@@ -347,7 +325,7 @@ export class Pop extends LitElement {
         tabindex="-1"
         part="content"
         style="display: none;"
-        class="  
+        class="shadowable
         ${this.open ? "is-open" : ""}"
       ></slot>
     `;

package/src/core/components/ui/progress/progress.ts

@@ -14,10 +14,13 @@ export class Progress extends LitElement {
     fontSize,
     css`
       :host {
-        --sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
-        --sc-progress-color: var(--sc-base-content, #1f2937);
+        --sc-progress-bg: var(
+          --sc-input-bg,
+          var(--sc-base-100, rgba(0, 0, 0, 0.07))
+        );
+        --sc-progress-color: var(--sc-base-content, #000);
         --sc-progress-height: 0.6em;
-        --sc-progress-fs: var(--sc-fs, 1rem);
+        --sc-progress-fs: var(--sc-_fs, 1rem);
         --sc-progress-fw: 500;
         --sc-progress-rounded: var(--sc-rounded-lg);
         display: block;
@@ -76,21 +79,21 @@ export class Progress extends LitElement {
 
       /* COLOR TYPES */
       :host([type="warning"]) {
-        --sc-progress-color: var(--sc-warning);
+        --sc-progress-color: var(--sc-warning, var(--sc-base-content, #000));
       }
       :host([type="danger"]) {
-        --sc-progress-color: var(--sc-danger);
+        --sc-progress-color: var(--sc-danger, var(--sc-base-content, #000));
       }
       :host([type="info"]) {
-        --sc-progress-color: var(--sc-info);
+        --sc-progress-color: var(--sc-info, var(--sc-base-content, #000));
       }
       :host([type="success"]) {
-        --sc-progress-color: var(--sc-success);
+        --sc-progress-color: var(--sc-success, var(--sc-base-content, #000));
       }
 
       :host([type="invert"]) {
         --sc-progress-bg: rgba(190, 190, 190, 0.125);
-        --sc-progress-color: var(--sc-base);
+        --sc-progress-color: var(--sc-base, #fff);
       }
 
       :host([invert]) {
@@ -98,11 +101,11 @@ export class Progress extends LitElement {
       }
 
       :host([type="default"][invert]) {
-        --sc-progress-color: var(--sc-base);
+        --sc-progress-color: var(--sc-base, #fff);
       }
 
       slot[name="remaining"] {
-        font-weight: var(--sc-font-weight-base);
+        font-weight: var(--sc-font-weight-base, 400);
         font-size: 0.85em;
         margin-top: 0.5em;
       }

package/src/core/components/ui/table/table-tbody.ts

@@ -1,5 +1,5 @@
-import {html, LitElement, css} from "lit";
-import {customElement} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
 const tagName = "sonic-tbody";
 
 @customElement(tagName)
@@ -19,7 +19,8 @@ export class TableTbody extends LitElement {
       }
 
       ::slotted(sonic-tr:not(:last-child)) {
-        border-bottom: var(--sc-form-border-width) solid var(--sc-base-200) !important;
+        border-bottom: var(--sc-form-border-width) solid
+          var(--sc-base-200, rgba(0, 0, 0, 0.12)) !important;
       }
     `,
   ];

package/src/core/components/ui/table/table-th.ts

@@ -1,8 +1,8 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {ifDefined} from "lit/directives/if-defined.js";
-import {styleMap} from "lit/directives/style-map.js";
-import {typeColor} from "@supersoniks/concorde/core/components/ui/_css/type";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 
 const tagName = "sonic-th";
 
@@ -22,7 +22,8 @@ export class TableTh extends LitElement {
       th {
         all: inherit;
         display: table-cell;
-        border-bottom: calc(var(--sc-border-width) * 1.5) solid var(--sc-table-border-color);
+        border-bottom: calc(var(--sc-border-width, max(1px, 0.12rem)) * 1.5)
+          solid var(--sc-table-border-color);
         text-transform: var(--sc-table-th-tt);
         font-weight: var(--sc-table-th-fw);
         font-size: var(--sc-table-th-fs);
@@ -35,12 +36,12 @@ export class TableTh extends LitElement {
     `,
   ];
 
-  @property({type: Number}) colSpan?: number;
-  @property({type: Number}) rowSpan?: number;
-  @property({type: String}) align?: string;
-  @property({type: String}) minWidth?: string;
-  @property({type: String}) maxWidth?: string;
-  @property({type: String}) width?: string;
+  @property({ type: Number }) colSpan?: number;
+  @property({ type: Number }) rowSpan?: number;
+  @property({ type: String }) align?: string;
+  @property({ type: String }) minWidth?: string;
+  @property({ type: String }) maxWidth?: string;
+  @property({ type: String }) width?: string;
 
   render() {
     const styles = {
@@ -49,7 +50,12 @@ export class TableTh extends LitElement {
       maxWidth: this.maxWidth,
       width: this.width,
     };
-    return html`<th part="th" style=${styleMap(styles)} colspan=${ifDefined(this.colSpan)} rowspan=${ifDefined(this.rowSpan)}>
+    return html`<th
+      part="th"
+      style=${styleMap(styles)}
+      colspan=${ifDefined(this.colSpan)}
+      rowspan=${ifDefined(this.rowSpan)}
+    >
       <slot></slot>
     </th> `;
   }

package/src/core/components/ui/table/table.ts

@@ -20,14 +20,17 @@ export class Table extends LitElement {
     fontSize,
     css`
       :host {
-        --sc-table-fw: var(--sc-font-weight-base);
-        --sc-table-fst: var(--sc-font-style-base);
+        --sc-table-fw: var(--sc-font-weight-base, 400);
+        --sc-table-fst: var(--sc-font-style-base, normal);
         --sc-table-fs: 1rem;
         --sc-table-border-color: var(--sc-border-color);
-        --sc-table-caption-color: var(--sc-base-500);
-        --sc-table-bg: var(--sc-base);
-        --sc-table-accent-bg: var(--sc-base-50);
-        --sc-table-hover-bg: var(--sc-base-100);
+        --sc-table-caption-color: var(
+          --sc-base-500,
+          var(--sc-base-content, #000)
+        );
+        --sc-table-bg: var(--sc-base, #fff);
+        --sc-table-accent-bg: var(--sc-base-50, rgba(0, 0, 0, 0.04));
+        --sc-table-hover-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
         --sc-table-th-fs: 0.85em;
         --sc-table-th-fw: bold;
         --sc-table-th-tt: uppercase;
@@ -35,6 +38,7 @@ export class Table extends LitElement {
         --sc-table-th-py: calc(1.8 * var(--sc-table-td-py));
         --sc-table-td-px: 0.5em;
         --sc-table-td-py: 0.5em;
+        --sc-table-bw: var(--sc-border-width, max(1px, 0.12rem));
         display: block;
       }
 
@@ -54,9 +58,9 @@ export class Table extends LitElement {
       }
 
       :host([bordered]) .table-container {
-        border: var(--sc-border-width) solid var(--sc-table-border-color);
+        border: var(--sc-table-bw) solid var(--sc-table-border-color);
         border-radius: var(--sc-rounded);
-        --sc-table-td-border-b: var(--sc-border-width) solid
+        --sc-table-td-border-b: var(--sc-table-bw) solid
           var(--sc-table-border-color);
       }
     `,