@supersoniks/concorde 5.0.3 → 5.0.5

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

@@ -5,6 +5,11 @@ import {
   fontSize,
   Size,
 } from "@supersoniks/concorde/core/components/ui/_css/size";
+import {
+  DefaultType,
+  typeColor,
+  typeColorInvert,
+} from "@supersoniks/concorde/core/components/ui/_css/type";
 
 const tagName = "sonic-progress";
 
@@ -12,21 +17,17 @@ const tagName = "sonic-progress";
 export class Progress extends LitElement {
   static styles = [
     fontSize,
+    typeColor,
+    typeColorInvert,
     css`
       :host {
-        --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-_rounded: var(--sc-rounded-lg);
+        --sc-_bg: var(--sc-base-50, rgba(0, 0, 0, 0.07));
         --sc-progress-height: 0.6em;
-        --sc-progress-fs: var(--sc-_fs, 1rem);
         --sc-progress-fw: 500;
-        --sc-progress-rounded: var(--sc-rounded-lg);
         display: block;
         line-height: 1.2;
         font-weight: var(--sc-progress-fw);
-        font-size: var(--sc-progress-fs);
       }
 
       progress {
@@ -38,37 +39,36 @@ export class Progress extends LitElement {
         overflow: hidden;
         border: none;
         height: var(--sc-progress-height);
-        border-radius: var(--sc-progress-rounded);
-        background-color: var(--sc-progress-bg);
-        color: var(--sc-progress-color);
+        border-radius: var(--sc-_rounded);
+        background-color: var(--sc-_bg);
       }
       progress::-moz-progress-bar {
-        background-color: var(--sc-progress-color);
-        border-radius: var(--sc-progress-rounded);
+        background-color: var(--sc-_color);
+        border-radius: var(--sc-_rounded);
       }
 
       progress:not([value])::-moz-progress-bar {
-        background-color: var(--sc-progress-bg);
+        background-color: var(--sc-_bg);
       }
 
       progress::-webkit-progress-bar {
-        background-color: var(--sc-progress-bg);
+        background-color: var(--sc-_bg);
       }
       progress::-webkit-progress-value {
-        background-color: var(--sc-progress-color);
-        border-radius: var(--sc-progress-rounded);
+        background-color: var(--sc-_color);
+        border-radius: var(--sc-_rounded);
       }
 
       /* Indeterminate */
       progress:indeterminate:after {
-        background-color: var(--sc-progress-color);
+        background-color: var(--sc-_color);
         content: "";
         position: absolute;
         top: 0;
         bottom: 0;
         left: -40%;
         width: 33.333333%;
-        border-radius: var(--sc-progress-rounded);
+        border-radius: var(--sc-_rounded);
         animation: progress-loading 3s infinite ease-in-out;
       }
 
@@ -78,33 +78,6 @@ export class Progress extends LitElement {
         }
       }
 
-      /* COLOR TYPES */
-      :host([type="warning"]) {
-        --sc-progress-color: var(--sc-warning, var(--sc-base-content, #000));
-      }
-      :host([type="danger"]) {
-        --sc-progress-color: var(--sc-danger, var(--sc-base-content, #000));
-      }
-      :host([type="info"]) {
-        --sc-progress-color: var(--sc-info, var(--sc-base-content, #000));
-      }
-      :host([type="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, #fff);
-      }
-
-      :host([invert]) {
-        --sc-progress-bg: rgba(190, 190, 190, 0.125);
-      }
-
-      :host([type="default"][invert]) {
-        --sc-progress-color: var(--sc-base, #fff);
-      }
-
       slot[name="remaining"] {
         font-weight: var(--sc-font-weight-base, 400);
         font-size: 0.85em;
@@ -115,7 +88,7 @@ export class Progress extends LitElement {
       }
 
       slot:not([name]) {
-        color: var(--sc-progress-color);
+        color: var(--sc-_color);
       }
 
       .slot-container {
@@ -129,17 +102,13 @@ export class Progress extends LitElement {
 
   @property({ type: Number }) value?: number;
   @property({ type: Number }) max = 100;
-  @property({ type: Boolean }) invert = false;
+
+  /** Barre et libellés adaptés à un fond coloré (ex. `sonic-card`). */
+  @property({ type: Boolean, reflect: true, attribute: "invert" })
+  invert = false;
 
   @property({ type: String, reflect: true })
-  type:
-    | "default"
-    | "primary"
-    | "warning"
-    | "danger"
-    | "success"
-    | "info"
-    | "invert" = "default";
+  type: DefaultType = "default";
 
   @property({ type: String, reflect: true }) size?: Size;
 

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

@@ -9,8 +9,8 @@ export class TableCaption extends LitElement {
       :host {
         display: table-caption;
         font-size: 0.75rem;
-        color: var(--sc-table-caption-color);
-        padding: var(--sc-table-td-py) var(--sc-table-td-px) calc(2 * var(--sc-table-td-py));
+        color: var(--sc-_caption-color);
+        padding: var(--sc-_td-py) var(--sc-_td-px) calc(2 * var(--sc-_td-py));
       }
     `,
   ];

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

@@ -11,11 +11,11 @@ export class TableTbody extends LitElement {
       }
 
       ::slotted(sonic-tr:nth-child(odd)) {
-        background: var(--sc-table-accent-bg);
+        background: var(--sc-_accent-bg);
       }
 
       ::slotted(sonic-tr:hover) {
-        background: var(--sc-table-hover-bg);
+        background: var(--sc-_hover-bg);
       }
 
       ::slotted(sonic-tr:not(:last-child)) {
@@ -26,7 +26,7 @@ export class TableTbody extends LitElement {
   ];
 
   render() {
-    return html`<tbody part="tbody">
+    return html`<tbody>
       <slot></slot>
     </tbody>`;
   }

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

@@ -1,9 +1,10 @@
-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 { 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";
 const tagName = "sonic-td";
-import {typeColor} from "@supersoniks/concorde/core/components/ui/_css/type";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
+import { Align } from "../_css/align";
 
 @customElement(tagName)
 export class TableTd extends LitElement {
@@ -16,21 +17,21 @@ export class TableTd extends LitElement {
       td {
         all: inherit;
         display: table-cell;
-        padding: var(--sc-table-td-py) var(--sc-table-td-px);
-        border-top: var(--sc-table-td-border-t, none);
-        border-bottom: var(--sc-table-td-border-b, none);
-        border-right: var(--sc-table-td-border-r, none);
-        border-left: var(--sc-table-td-border-l, none);
+        padding: var(--sc-_td-py) var(--sc-_td-px);
+        border-top: var(--sc-_td-border-t, none);
+        border-bottom: var(--sc-_td-border-b, none);
+        border-right: var(--sc-_td-border-r, none);
+        border-left: var(--sc-_td-border-l, none);
       }
     `,
   ];
-  @property({type: Number}) colSpan?: number;
-  @property({type: Number}) rowSpan?: number;
-  @property({type: String}) align?: string;
-  @property({type: String}) vAlign?: 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?: Align;
+  @property({ type: String }) vAlign?: string;
+  @property({ type: String }) minWidth?: string;
+  @property({ type: String }) maxWidth?: string;
+  @property({ type: String }) width?: string;
 
   render() {
     const styles = {
@@ -40,7 +41,11 @@ export class TableTd extends LitElement {
       maxWidth: this.maxWidth,
       width: this.width,
     };
-    return html`<td part="td" style=${styleMap(styles)} colspan=${ifDefined(this.colSpan)} rowspan=${ifDefined(this.rowSpan)}>
+    return html`<td
+      style=${styleMap(styles)}
+      colspan=${ifDefined(this.colSpan)}
+      rowspan=${ifDefined(this.rowSpan)}
+    >
       <slot></slot>
     </td>`;
   }

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

@@ -3,6 +3,7 @@ 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 { Align } from "../_css/align";
 
 const tagName = "sonic-th";
 
@@ -13,7 +14,7 @@ export class TableTh extends LitElement {
     css`
       :host {
         display: contents;
-        background: var(--sc-table-bg);
+        background: var(--sc-_bg);
         position: sticky;
         top: 0;
         z-index: 20;
@@ -23,11 +24,11 @@ export class TableTh extends LitElement {
         all: inherit;
         display: table-cell;
         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);
-        padding: var(--sc-table-th-py) var(--sc-table-th-px);
+          solid var(--sc-_border-color);
+        text-transform: var(--sc-_th-tt);
+        font-weight: var(--sc-_th-fw);
+        font-size: var(--sc-_th-fs);
+        padding: var(--sc-_th-py) var(--sc-_th-px);
       }
 
       :host([noBorder]) th {
@@ -38,7 +39,7 @@ export class TableTh extends LitElement {
 
   @property({ type: Number }) colSpan?: number;
   @property({ type: Number }) rowSpan?: number;
-  @property({ type: String }) align?: string;
+  @property({ type: String }) align?: Align;
   @property({ type: String }) minWidth?: string;
   @property({ type: String }) maxWidth?: string;
   @property({ type: String }) width?: string;
@@ -51,7 +52,6 @@ export class TableTh extends LitElement {
       width: this.width,
     };
     return html`<th
-      part="th"
       style=${styleMap(styles)}
       colspan=${ifDefined(this.colSpan)}
       rowspan=${ifDefined(this.rowSpan)}

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

@@ -16,17 +16,17 @@ export class TableTr extends Subscriber(LitElement) {
       }
 
       :host([odd]) {
-        background: var(--sc-table-accent-bg) !important;
+        background: var(--sc-_accent-bg) !important;
       }
       :host([even]) {
-        background: var(--sc-table-bg) !important;
+        background: var(--sc-_bg) !important;
       }
 
       :host([last]) {
-        --sc-table-td-border-b: none;
+        --sc-_td-border-b: none;
       }
       :host(:hover) {
-        background: var(--sc-table-hover-bg) !important;
+        background: var(--sc-_hover-bg) !important;
       }
     `,
   ];