@reliability-design/web 1.1.1 → 1.3.0

package/dist/components/rel-card/rel-card.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-card")
 export class RelCard extends LitElement {
@@ -10,26 +11,17 @@ export class RelCard extends LitElement {
     }
 
     .card {
-      background-color: var(--rel-colors-white, #fff);
-      color: var(--rel-text-primary, #333);
-      border-radius: var(--rel-borders-radius-border-radius-300);
+      background-color: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      border: 1px solid var(--rel-color-border-default);
       padding: var(--rel-spacing-space-md);
-      box-shadow: var(--rel-shadows-shadow-200);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
-    .card:hover {
-      transform: translateY(-3px);
-      box-shadow: var(--rel-shadows-shadow-300);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .card {
-        transition: none;
-      }
-      .card:hover {
-        transform: none;
-      }
+    :host-context([data-theme="dark"]) .card,
+    :host-context(.dark) .card {
+      background-color: var(--rel-color-bg-primary);
+      border-color: var(--rel-color-border-default);
     }
   `;
 

package/dist/components/rel-cardmedia/rel-cardmedia.ts

@@ -1,10 +1,11 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-card-media")
 export class RelCardMedia extends LitElement {
-  @property({ type: String }) imageSrc = "";
-  @property({ type: String }) imageAlt = "Card image";
+  @property({ type: String, attribute: "image-src" }) imageSrc = "";
+  @property({ type: String, attribute: "image-alt" }) imageAlt = "Card image";
   @property({ type: String }) title = "";
   @property({ type: String }) subtitle = "";
 
@@ -15,26 +16,11 @@ export class RelCardMedia extends LitElement {
     }
 
     .card-media {
-      background-color: var(--rel-colors-white, #fff);
-      color: var(--rel-text-primary, #333);
-      border-radius: var(--rel-borders-radius-border-radius-300);
+      background-color: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      border: 1px solid var(--rel-color-border-default);
       overflow: hidden;
-      box-shadow: var(--rel-shadows-shadow-200);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .card-media:hover {
-      transform: translateY(-4px);
-      box-shadow: var(--rel-shadows-shadow-300);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .card-media {
-        transition: none;
-      }
-      .card-media:hover {
-        transform: none;
-      }
     }
 
     .card-image img {
@@ -52,13 +38,24 @@ export class RelCardMedia extends LitElement {
       margin: 0 0 4px 0;
       font-size: var(--rel-fontSizes-md);
       font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-text-heading, #2b2b2b);
+      color: var(--rel-color-text-heading);
     }
 
     .card-content p {
       margin: 0 0 8px 0;
       font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-text-primary, #333);
+      color: var(--rel-color-text-primary);
+    }
+
+    :host-context([data-theme="dark"]) .card-media,
+    :host-context(.dark) .card-media {
+      background-color: var(--rel-color-bg-primary);
+      border-color: var(--rel-color-border-default);
+    }
+
+    :host-context([data-theme="dark"]) .card-content h3,
+    :host-context(.dark) .card-content h3 {
+      color: var(--rel-color-text-heading);
     }
   `;