@supersoniks/concorde 1.1.28 → 1.1.31

package/core/components/ui/form/radio/radio.js

@@ -17,9 +17,9 @@ const tagName = "sonic-radio";
 let Radio = class Radio extends Checkbox {
     constructor() {
         super();
+        this.radio = true;
     }
     connectedCallback() {
-        this.radio = true;
         // this.iconName = "circle-small";
         // this.iconPrefix = "solid";
         super.connectedCallback();
@@ -32,7 +32,6 @@ Radio.styles = [
       :host input {
         border-radius: 50%;
       }
-
       :host sonic-icon {
         border-radius: 50%;
         overflow: hidden;

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

@@ -5,9 +5,9 @@ export declare class Select extends Select_base {
     static styles: import("lit").CSSResult[];
     valueKey: string;
     wordingKey: string;
-    multiple: null;
-    size: "" | "xs" | "sm" | "lg";
-    selectSize: string | null;
+    multiple: boolean;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    selectSize?: number;
     private _options;
     set options(value: Array<any>);
     get options(): Array<any>;
@@ -15,16 +15,16 @@ export declare class Select extends Select_base {
     get value(): string;
     set value(value: string);
     connectedCallback(): void;
-    label: string;
-    description: string;
+    label?: string;
+    description?: string;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     slotSuffixNodes: Array<Node>;
     slotPrefixNodes: Array<Node>;
-    hasDescription: true | false;
-    hasLabel: true | false;
-    hasSuffix: true | false;
-    hasPrefix: true | false;
+    hasDescription: boolean;
+    hasLabel: boolean;
+    hasSuffix: boolean;
+    hasPrefix: boolean;
     updated(): void;
     onSlotChange(): void;
     validateFormElement(): void;

package/core/components/ui/form/select/select.js

@@ -27,17 +27,9 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         super(...arguments);
         this.valueKey = "value";
         this.wordingKey = "wording";
-        this.multiple = null;
-        this.size = "";
-        this.selectSize = null;
+        this.multiple = false;
         this._options = [];
         this._value = "";
-        /*
-         * TODO
-         * Mutualiser avec le composant select
-         */
-        this.label = "";
-        this.description = "";
         this.hasDescription = false;
         this.hasLabel = false;
         this.hasSuffix = false;
@@ -117,10 +109,12 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         <div class="form-select-wrapper">
           <select
             @change=${this.handleChange}
-            disabled=${ifDefined(this.multiple)}
+            @blur=${this.handleBlur}
+            disabled=${ifDefined(this.disabled)}
+            ?required=${this.required}
+            ?multiple=${this.multiple}
             size=${ifDefined(this.selectSize)}
-            autofocus=${ifDefined(this.autofocus)}
-            required=${ifDefined(this.required)}
+            ?autofocus=${this.autofocus}
             .value="${this.value}"
             class="form-element"
           >
@@ -182,10 +176,10 @@ __decorate([
     property({ type: Boolean })
 ], Select.prototype, "multiple", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], Select.prototype, "size", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Select.prototype, "selectSize", void 0);
 __decorate([
     property({ type: Array })

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

@@ -3,16 +3,17 @@ declare const Textarea_base: {
     new (...args: any[]): {
         validateFormElement(): void;
         type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
-        tabindex: string | null;
-        autocomplete: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | null;
+        tabindex?: number | undefined;
+        autocomplete?: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: any): void;
+        handleBlur(e?: any): void;
         getValueForFormPublisher(): any;
-        error: true | null;
+        error: boolean;
         autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         _value: any;
         value: any;
@@ -45,23 +46,23 @@ declare const Textarea_base: {
 export declare class Textarea extends Textarea_base {
     static styles: import("lit").CSSResult[];
     size: "" | "xs" | "sm" | "lg";
-    rows: string;
-    cols: string;
-    maxlength: string;
-    minlength: string;
-    wrap: "hard" | "soft" | null;
-    readonly: boolean | null;
-    placeholder: string;
-    label: string;
-    description: string;
+    rows?: number;
+    cols?: number;
+    maxlength?: number;
+    minlength?: number;
+    wrap?: "hard" | "soft";
+    readonly: boolean;
+    placeholder?: string;
+    label?: string;
+    description?: string;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     slotSuffixNodes: Array<Node>;
     slotPrefixNodes: Array<Node>;
-    hasDescription: true | false;
-    hasLabel: true | false;
-    hasSuffix: true | false;
-    hasPrefix: true | false;
+    hasDescription: boolean;
+    hasLabel: boolean;
+    hasSuffix: boolean;
+    hasPrefix: boolean;
     slotClasses: {};
     updated(): void;
     onSlotChange(): void;

package/core/components/ui/form/textarea/textarea.js

@@ -20,19 +20,7 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
         // type: "" | "primary" | "warning" | "danger" | "success" | "info" = "";
         // @property({ type: String }) variant: "" | "ghost" | "outline" = "";
         this.size = "";
-        this.rows = "";
-        this.cols = "";
-        this.maxlength = "";
-        this.minlength = "";
-        this.wrap = null;
-        this.readonly = null;
-        this.placeholder = "";
-        /*
-         * TODO
-         * Mutualiser avec le composant select
-         */
-        this.label = "";
-        this.description = "";
+        this.readonly = false;
         this.hasDescription = false;
         this.hasLabel = false;
         this.hasSuffix = false;
@@ -67,21 +55,22 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
       <div class="form-control">
         <textarea
           @input=${this.handleChange}
-          ?disabled=${this.disabled}
+          @blur=${this.handleBlur}
+          disabled=${ifDefined(this.disabled)}
           ?required=${this.required}
-          autocomplete=${ifDefined(this.autocomplete)}
-          autofocus=${ifDefined(this.autofocus)}
+          ?autofocus=${this.autofocus}
           rows=${ifDefined(this.rows)}
           cols=${ifDefined(this.cols)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
           ?readonly=${this.readonly}
           spellcheck=${ifDefined(this.spellcheck)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          tabindex=${ifDefined(this.tabindex)}
           wrap=${ifDefined(this.wrap)}
-          class="form-element textarea custom-scroll"
           placeholder="${this.placeholder}"
-        >
-${this.value}</textarea
+          class="form-element textarea custom-scroll"
+        >${this.value}</textarea
         >
       </div>
 
@@ -104,16 +93,16 @@ __decorate([
     property({ type: String })
 ], Textarea.prototype, "size", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Textarea.prototype, "rows", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Textarea.prototype, "cols", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Textarea.prototype, "maxlength", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Textarea.prototype, "minlength", void 0);
 __decorate([
     property({ type: String })

package/core/components/ui/icon/icon.js

@@ -119,6 +119,10 @@ Icon.styles = css `
     :host([size="2xl"]) svg {
       --sc-icon-size: 2em;
     }
+
+    :host([size="3xl"]) svg {
+      --sc-icon-size: 2.8em;
+    
   `;
 __decorate([
     property({ type: String })

package/core/components/ui/image/image.d.ts

@@ -8,7 +8,6 @@ export declare class Image extends LitElement {
     ratio: string;
     objectPosition: string;
     imageRendering: string;
-    shadow: "" | "none" | "sm" | "md";
     cover: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/image/image.js

@@ -18,7 +18,6 @@ let Image = class Image extends LitElement {
         this.ratio = "auto";
         this.objectPosition = "center center";
         this.imageRendering = "auto";
-        this.shadow = "none";
         this.cover = false;
     }
     render() {
@@ -83,25 +82,6 @@ Image.styles = [
         --sc-img-radius: 0 !important;
       }
 
-      /*OMBRE*/
-      :host([shadow]) > div,
-      :host([shadow="md"]) > div,
-      :host([shadow="true"]) > div {
-        box-shadow: var(--sc-shadow);
-      }
-
-      :host([shadow="sm"]) > div {
-        box-shadow: var(--sc-shadow-sm);
-      }
-
-      :host([shadow="none"]) > div {
-        box-shadow: none;
-      }
-
-      :host([shadow="lg"]) > div {
-        box-shadow: var(--sc-shadow-lg);
-      }
-
       :host([cover]),
       :host([cover]) > div,
       :host([cover]) img {
@@ -136,9 +116,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Image.prototype, "imageRendering", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Image.prototype, "shadow", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Image.prototype, "cover", void 0);

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

@@ -7,6 +7,7 @@ export declare class Pop extends LitElement {
     popBtn: HTMLElement;
     popContent: HTMLElement;
     toggle: "true" | "false";
+    inline: boolean;
     /**
      * Ombre
      */

package/core/components/ui/pop/pop.js

@@ -14,6 +14,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
         super(...arguments);
         this.open = false;
         this.toggle = "true";
+        this.inline = false;
         /**
          * Ombre
          */
@@ -196,6 +197,10 @@ Pop.styles = [
       :host([shadow="lg"]) slot[name="content"] {
         box-shadow: var(--sc-shadow-lg);
       }
+
+      :host([inline]) {
+        vertical-align: baseline;
+      }
     `,
 ];
 __decorate([
@@ -210,6 +215,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Pop.prototype, "toggle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Pop.prototype, "inline", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Pop.prototype, "shadow", void 0);

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

@@ -3,6 +3,7 @@ export declare class Progress extends LitElement {
     static styles: import("lit").CSSResult[];
     value?: number;
     max: number;
+    invert: boolean;
     type: "default" | "primary" | "warning" | "danger" | "success" | "info";
     size: "xs" | "sm" | "md" | "lg" | "xl";
     render(): import("lit-html").TemplateResult<1>;

package/core/components/ui/progress/progress.js

@@ -7,11 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-progress";
 let Progress = class Progress extends LitElement {
     constructor() {
         super(...arguments);
         this.max = 100;
+        this.invert = false;
         this.type = "default";
         this.size = "md";
     }
@@ -26,12 +28,13 @@ let Progress = class Progress extends LitElement {
     }
 };
 Progress.styles = [
+    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-height: .6rem;
-        --sc-progress-fs: 1rem;
+        --sc-progress-height: .6em;
+        --sc-progress-fs: var(--sc-fs, 1rem);
         --sc-progress-fw: 500;
         --sc-progress-rounded: var(--sc-rounded-lg);
         display: block;
@@ -103,25 +106,11 @@ Progress.styles = [
         --sc-progress-color: var(--sc-success);
       }
 
-      /* SIZES */
-      :host([size="xs"]) {
-        --sc-progress-height:.25rem;
-        --sc-progress-fs: 0.68rem;
+      :host([invert]) {
+        --sc-progress-bg: var(--sc-base-700);
       }
-
-      :host([size="sm"]) {
-        --sc-progress-height:.4rem;
-        --sc-progress-fs: 0.85rem;
-      }
-
-      :host([size="lg"]) {
-        --sc-progress-height:1rem;
-        --sc-progress-fs: 1.25rem;
-      }
-
-      :host([size="xl"]) {
-        --sc-progress-height:1.5rem;
-        --sc-progress-fs: 1.5rem;
+      :host([type="default"][invert]) {
+        --sc-progress-color: var(--sc-base);
       }
 
       slot[name="remaining"] {
@@ -135,6 +124,7 @@ Progress.styles = [
         display:flex;
         justify-content: space-between;
         gap:.5em;
+        margin-top:.15em;
       }
     `
 ];
@@ -144,6 +134,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Progress.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean })
+], Progress.prototype, "invert", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Progress.prototype, "type", void 0);

package/core/components/ui/table/table-td.d.ts

@@ -4,6 +4,7 @@ export declare class TableTd extends LitElement {
     colSpan?: number;
     rowSpan?: number;
     align?: string;
+    vAlign?: string;
     minWidth?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/table/table-td.js

@@ -9,11 +9,12 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 const tagName = "sonic-td";
-import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 let TableTd = class TableTd extends LitElement {
     render() {
         const styles = {
             textAlign: this.align,
+            verticalAlign: this.vAlign,
             minWidth: this.minWidth,
         };
         return html `<td
@@ -27,7 +28,7 @@ let TableTd = class TableTd extends LitElement {
     }
 };
 TableTd.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: contents;
@@ -48,6 +49,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TableTd.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "vAlign", void 0);
 __decorate([
     property({ type: String })
 ], TableTd.prototype, "minWidth", void 0);

package/core/components/ui/table/table-th.js

@@ -8,7 +8,7 @@ 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 { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 const tagName = "sonic-th";
 let TableTh = class TableTh extends LitElement {
     render() {
@@ -27,7 +27,7 @@ let TableTh = class TableTh extends LitElement {
     }
 };
 TableTh.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: contents;

package/core/components/ui/table/table-tr.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 const tagName = "sonic-tr";
 let TableTr = class TableTr extends LitElement {
     render() {
@@ -14,11 +14,12 @@ let TableTr = class TableTr extends LitElement {
     }
 };
 TableTr.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: table-row;
       }
+
     `
 ];
 TableTr = __decorate([

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

@@ -8,7 +8,7 @@ import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
 export declare class Table extends LitElement {
     static styles: import("lit").CSSResult[];
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     striped: boolean;
     sticky: boolean;
     bordered: boolean;

package/core/components/ui/table/table.js

@@ -15,11 +15,11 @@ import "@supersoniks/concorde/core/components/ui/table/table-thead";
 import "@supersoniks/concorde/core/components/ui/table/table-tbody";
 import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-table";
 let Table = class Table extends LitElement {
     constructor() {
         super(...arguments);
-        this.size = "md";
         this.striped = false;
         this.sticky = false;
         this.bordered = false;
@@ -41,6 +41,7 @@ let Table = class Table extends LitElement {
 };
 Table.styles = [
     customScroll,
+    fontSize,
     css `
       :host {
         --sc-table-fw: var(--sc-font-weight-base);
@@ -56,38 +57,20 @@ Table.styles = [
         --sc-table-th-py: calc(1.8 * var(--sc-table-td-py) );
         --sc-table-td-px: .5em;
         --sc-table-td-py: .5em;
-
         display:block;
       }
 
-      .table-container {
+      :host([maxHeight]) .table-container {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
       }
       
       .table {
         width: 100%;
-        font-size: var(--sc-table-fs);
         display: table;
         box-sizing:border-box;
       }
 
-      /*SIZES*/
-      :host([size="2xs"]) {
-        --sc-table-fs: 0.6rem;
-      }
-      :host([size="xs"]) {
-        --sc-table-fs: 0.75rem;
-      }
-      :host([size="sm"]) {
-        --sc-table-fs: 0.85rem;
-      }
-      :host([size="lg"]) {
-        --sc-table-fs: 1.2rem;
-      }
-      :host([size="xl"]) {
-        --sc-table-fs: 1.5rem;
-      }
       :host([bordered]) .table-container {
         border:var(--sc-border-width) solid var(--sc-table-border-color) !important;
       }

package/core/components/ui/taxonomy/taxonomy.js

@@ -10,6 +10,7 @@ import { repeat } from "lit/directives/repeat.js";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 import "@supersoniks/concorde/core/components/ui/badge/badge";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 const tagName = "sonic-taxonomy";
 /**
  * Le composant taxonomy crée un badge (*sonic-badge*) contenant une liste de termes préfixés par une icone (*sonic-icon*) optionelle séparées par une chaine html séparatrice (*separator*)
@@ -61,7 +62,7 @@ let Taxonomy = class Taxonomy extends LitElement {
         this.style.removeProperty("display");
         return html `
       <sonic-badge type=${this.type} variant=${this.variant} size=${this.size}>
-        <sonic-icon slot="prefix" name=${this.icon.name} prefix=${this.icon.prefix}></sonic-icon>
+        <sonic-icon slot="prefix" library=${ifDefined(this.icon.library)} prefix=${ifDefined(this.icon.prefix)} name=${ifDefined(this.icon.name)} ></sonic-icon>
         <span class="taxonomy-list">
           ${repeat(taxo, (item) => item[this.key + "_id"], (item) => {
             return html `<span> ${item[this.key + "_name"]}</span

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -20,35 +20,46 @@ export const coreVariables = css `
 
     /* ROUNDED*/
     --sc-rounded-sm: calc(var(--sc-rounded) * 0.5);
-    --sc-rounded: 0.35rem;
+    --sc-rounded: 0.375rem;
     --sc-rounded-md: calc(var(--sc-rounded) * 1.8);
     --sc-rounded-lg: calc(var(--sc-rounded) * 3.5);
     --sc-rounded-xl: calc(var(--sc-rounded) * 7);
+    --sc-rounded-size-intensity: calc((1em - 1rem) * .4);
 
-    --sc-btn-rounded: calc(var(--sc-rounded) * 1.2);
+    /* 4 for rounded full*/
+    --sc-btn-rounded-intensity : 1.4;
+    --sc-btn-font-weight: 500;
+    --sc-btn-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-btn-rounded-intensity) );
 
     /* Placeholder */
     --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
 
-    /* Images*/
+    /* OMBRES */
     --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
-    /* formulaires*/
-    --sc-border-width: max(1px, 0.085rem);
+    /* Forms */
+    --sc-border-width: max(1px, 0.12rem);
+    --sc-form-height : 2.5em;
     --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-rounded: calc(var(--sc-rounded) * 1.2);
+    --sc-input-rounded-intensity : 1.4;
+    --sc-input-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-input-rounded-intensity) );
+    --sc-label-font-weight: 500;
 
-    /*Couleurs -- textes sur images*/
+    /* Contrast -- ex : Text on images */
     --sc-contrast-content: #fff;
-    --sc-contrast: #0f172a;
+    --sc-contrast: #11151f;
 
     /*Scrollbar*/
     --sc-scrollbar-bg : var(--sc-base-400);
+
+    /*Body*/
+    --sc-body-bg: var(--sc-base);
+
   }
 `;