@supersoniks/concorde 3.1.41 → 3.1.42

package/src/core/components/ui/form/radio/radio.ts

@@ -1,6 +1,6 @@
-import {css} from "lit";
-import {customElement} from "lit/decorators.js";
-import {Checkbox} from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
+import { css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Checkbox } from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
 
 const tagName = "sonic-radio";
 /**
@@ -21,12 +21,14 @@ export class Radio extends Checkbox {
       :host sonic-icon {
         border-radius: 50%;
         overflow: hidden;
-        background-color: var(--sc-primary-content);
+        background-color: var(--sc-primary-content, var(--sc-base, #fff));
         line-height: 0;
         display: block;
         font-size: 1em;
         height: 0.6em;
+        height: round(0.6em, 1px);
         width: 0.6em;
+        width: round(0.6em, 1px);
       }
     `,
   ];

package/src/core/components/ui/form/select/select.ts

@@ -85,8 +85,8 @@ export class Select extends FormElement(Subscriber(LitElement)) {
 
       option {
         padding: 0.1rem var(--sc-input-px);
-        color: var(--sc-base-content);
-        background: var(--sc-base);
+        color: var(--sc-base-content, #000);
+        background: var(--sc-base, #fff);
       }
 
       select[multiple] option {

package/src/core/components/ui/form/textarea/textarea.ts

@@ -51,13 +51,13 @@ export class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
   @property({ type: String }) wrap?: "hard" | "soft";
   @property({ type: Boolean }) readonly = false;
   @property({ type: String }) placeholder?: string;
-  @property({ type: String }) resize?:
+  @property({ type: String }) resize:
     | "none"
     | "both"
     | "horizontal"
     | "vertical"
     | "block"
-    | "inline";
+    | "inline" = "vertical";
 
   @queryAssignedNodes({ slot: "label", flatten: true })
   slotLabelNodes!: Array<Node>;

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

@@ -8,6 +8,14 @@
   </template>
 </sonic-code>
 
+## CurrentColor 
+
+<sonic-code>
+  <template>
+    <sonic-loader mode="inline" currentColor style="color:purple;"></sonic-loader>
+  </template>
+</sonic-code>
+
 
 ## Align
 

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/modal/modal-subtitle.ts

@@ -11,7 +11,10 @@ export class ModalSubTitle extends LitElement {
         display: block;
         line-height: 1.1rem;
         line-height: var(--sc-headings-line-height, 1.1);
-        font-family: var(--sc-headings-font-family);
+        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

@@ -11,7 +11,10 @@ export class ModalTitle extends LitElement {
         font-size: 1.5rem;
         display: block;
         line-height: var(--sc-headings-line-height, 1.1);
-        font-family: var(--sc-headings-font-family);
+        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.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

@@ -31,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;

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);
       }
     `,

package/src/core/components/ui/theme/theme-collection/core-variables.ts

@@ -2,42 +2,44 @@ import { css } from "lit";
 
 export const coreVariables = css`
   :host {
-    /* polices*/
+    /* POLICES */
+    /*
     --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui,
       BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-      sans-serif;
-    --sc-font-weight-base: 400;
-    --sc-font-style-base: normal;
+      sans-serif; 
+    --sc-font-weight-base: 400; 
+    --sc-font-style-base: normal; 
 
-    --sc-headings-font-family: var(--sc-font-family-base), sans-serif; /*ok*/
-    --sc-headings-font-style: var(--sc-font-style-base);
-    --sc-headings-line-height: 1.1;
-    --sc-headings-font-weight: 700;
-    --sc-headings-text-transform: none;
-
-    /* Button*/
-    --sc-btn-font-weight: var(--sc-font-weight-base); /*ok*/
-    --sc-btn-font-family: var(--sc-font-family-base); /*ok*/
+    --sc-headings-font-family: var(--sc-font-family-base, sans-serif); 
+    --sc-headings-font-style: var(--sc-font-style-base, normal); 
+    --sc-headings-line-height: 1.1; 
+    --sc-headings-font-weight: 700; 
+    */
 
     /* ROUNDED*/
-    --sc-rounded-sm: calc(var(--sc-rounded) * 0.5);
+    --sc-rounded-sm: calc(var(--sc-rounded, 0px) * 0.5);
     --sc-rounded: 0.375rem;
-    --sc-rounded-md: calc(var(--sc-rounded) * 1.8);
-    --sc-rounded-lg: calc(var(--sc-rounded) * 3);
-    --sc-rounded-xl: calc(var(--sc-rounded) * 7);
-    --sc-rounded-size-intensity: calc((1em - 1rem) * 0.4);
+    --sc-rounded-md: calc(var(--sc-rounded, 0px) * 1.8);
+    --sc-rounded-lg: calc(var(--sc-rounded, 0px) * 3);
+    --sc-rounded-xl: calc(var(--sc-rounded, 0px) * 7);
+
+    /* BOUTONS */
+    /*
+    --sc-btn-font-family: var(--sc-font-family-base, sans-serif); *
+    --sc-btn-font-weight: 500;
+    */
+
+    /* Placeholder */
+    /*--sc-placeholder-bg: rgba(17, 24, 39, 0.05);  */
 
     /* 4 for rounded full*/
     --sc-btn-rounded-intensity: 1.4;
-    --sc-btn-font-weight: 500;
+    --sc-rounded-size-intensity: calc((1em - 1rem) * 0.4);
     --sc-btn-rounded: calc(
-      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
+      (var(--sc-rounded, 0px) + var(--sc-rounded-size-intensity)) *
         var(--sc-btn-rounded-intensity)
     );
 
-    /* Placeholder */
-    /*--sc-placeholder-bg: rgba(17, 24, 39, 0.05);  */ /*ok*/
-
     /* OMBRES */
     --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1),
       0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -51,19 +53,21 @@ export const coreVariables = css`
 
     /* Forms */
     --sc-border-width: max(1px, 0.12rem);
-    --sc-border-color: var(--sc-base-100);
-    --sc-form-height: 2.5em;
+    --sc-border-color: var(--sc-base-100, var(--sc-base-content, #000));
+    /*--sc-form-height: 2.5em; */ /*ok*/
     --sc-form-border-width: var(--sc-border-width);
-    --sc-input-bg: var(--sc-base-100);
-    --sc-input-border-color: var(--sc-input-bg);
+    /*--sc-input-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));*/
+    /*--sc-input-border-color: var(--sc-input-bg);*/
     --sc-input-rounded-intensity: 1.4;
     --sc-input-rounded: calc(
-      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
+      (var(--sc-rounded, 0px) + var(--sc-rounded-size-intensity)) *
         var(--sc-input-rounded-intensity)
     );
-    /*--sc-label-font-weight: 500; /*ok*/
+    /*formulaires*/
+    --sc-input-color: var(--sc-base-content, #000);
 
-    /* Contrast -- ex : Text on images */
+    /* CONTRAST */
+    /* -- ex : Text on images */
     --sc-contrast-content: #fff;
     --sc-contrast: #000000;
   }

package/src/core/components/ui/theme/theme-collection/light.ts

@@ -1,7 +1,7 @@
-import {css} from "lit";
+import { css } from "lit";
 
 export const light = css`
-  :host {
+  :host([theme="light"]) {
     /*Boutons*/
     --sc-primary: var(--sc-base-800);
     --sc-info: #2563eb;
@@ -9,11 +9,11 @@ export const light = css`
     --sc-warning: #f97316;
     --sc-success: #14b8a6;
 
-    --sc-primary-content: var(--sc-base);
-    --sc-info-content: var(--sc-base);
-    --sc-danger-content: var(--sc-base);
-    --sc-warning-content: var(--sc-base);
-    --sc-success-content: var(--sc-base);
+    --sc-primary-content: var(--sc-base, #fff);
+    --sc-info-content: var(--sc-base, #fff);
+    --sc-danger-content: var(--sc-base, #fff);
+    --sc-warning-content: var(--sc-base, #fff);
+    --sc-success-content: var(--sc-base, #fff);
 
     /*Bases*/
     --sc-base: #fff;
@@ -28,9 +28,5 @@ export const light = css`
     --sc-base-800: #1e293b;
     --sc-base-900: #0f172a;
     --sc-base-content: var(--sc-base-700);
-
-    /*formulaires*/
-    --sc-input-bg: var(--sc-base-100);
-    --sc-input-color: var(--sc-base-content);
   }
 `;

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

@@ -15,17 +15,17 @@ export class Theme extends LitElement {
     coreVariables,
     css`
       :host([color]) {
-        color: var(--sc-base-content);
+        color: var(--sc-base-content, #000);
       }
 
       :host([font]) {
-        font-family: var(--sc-font-family-base), sans-serif;
-        font-weight: var(--sc-font-weight-base);
-        font-style: var(--sc-font-style-base);
+        font-family: var(--sc-font-family-base, sans-serif);
+        font-weight: var(--sc-font-weight-base, 400);
+        font-style: var(--sc-font-style-base, normal);
       }
       ::slotted(.sonic-pop-content) {
         max-width: 80vw;
-        background-color: var(--sc-base);
+        background-color: var(--sc-base, #fff);
         position: fixed;
         z-index: 99999;
         display: block;
@@ -63,7 +63,7 @@ export class Theme extends LitElement {
   }
 
   @property({ type: String, reflect: true })
-  theme = "light";
+  theme?: "light" | "dark";
 
   @property({ type: Boolean, reflect: true }) background = false;
   @property({ type: Boolean, reflect: true }) color = false;