@rettangoli/ui 1.2.4 → 1.3.0

package/dist/themes/theme-catppuccin.css

@@ -76,6 +76,7 @@
   --destructive-foreground: #eff1f5;
 
   --background: #eff1f5;
+  --surface: #eceff4;
   --foreground: #4c4f69;
   --muted: #e6e9ef;
   --muted-foreground: #6c6f85;
@@ -94,6 +95,7 @@
 .dark {
   /* Catppuccin Mocha */
   --background: #1e1e2e;
+  --surface: #252536;
   --foreground: #cdd6f4;
   --primary: #89b4fa;
   --primary-foreground: #1e1e2e;

package/dist/themes/theme-rtgl-mono.css

@@ -75,6 +75,7 @@
   --destructive-foreground: #fcf3f3;
 
   --background: #fff;
+  --surface: #fafafa;
   --foreground: #0a0a0a;
   --muted: #f5f5f5;
   --muted-foreground: #737373;
@@ -92,6 +93,7 @@
 
 .dark {
   --background: #0a0a0a;
+  --surface: #141414;
   --foreground: #fafafa;
   --primary: #e5e5e5;
   --primary-foreground: #171717;

package/dist/themes/theme-rtgl-slate.css

@@ -75,6 +75,7 @@
   --destructive-foreground: oklch(0.145 0 0);
 
   --background: oklch(1 0 0);
+  --surface: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
@@ -92,6 +93,7 @@
 
 .dark {
   --background: rgb(29 29 29);
+  --surface: rgb(36 36 36);
   --foreground: rgb(242 242 242);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.305 0 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/select/select.view.yaml

@@ -30,7 +30,7 @@ refs:
       mouseleave:
         handler: handleAddOptionMouseLeave
 template:
-  - 'rtgl-view#selectButton style="display: inline-flex;" d=h av=c h=32 ph=md bw=xs bc=bo h-bc=${selectButtonHoverBorderColor} br=md bgc=bg cur=${selectButtonCursor} ${containerAttrString} data-testid="select-button" role="button" tabindex=${selectButtonTabIndex} aria-disabled=${isDisabled}':
+  - 'rtgl-view#selectButton style="display: inline-flex;" d=h av=c h=32 ph=md bw=xs bc=bo h-bc=${selectButtonHoverBorderColor} br=md bgc=su cur=${selectButtonCursor} ${containerAttrString} data-testid="select-button" role="button" tabindex=${selectButtonTabIndex} aria-disabled=${isDisabled}':
       - rtgl-view d=h av=c ah=s w=f:
           - rtgl-text w=1fg ta=s c=${selectedLabelColor} ellipsis: ${selectedLabel}
           - $if showClear:

package/src/primitives/popover.js

@@ -195,7 +195,7 @@ class RettangoliPopoverElement extends HTMLElement {
       this._contentWrapper = document.createElement("rtgl-view");
       this._contentWrapper.setAttribute(CONTENT_WRAPPER_ATTR, "");
       this._contentWrapper.setAttribute("part", "content");
-      this._contentWrapper.setAttribute("bgc", "bg");
+      this._contentWrapper.setAttribute("bgc", "su");
       this._contentWrapper.setAttribute("bw", "xs");
       this._contentWrapper.setAttribute("bc", "bo");
       this._contentWrapper.setAttribute("br", "md");
@@ -231,7 +231,7 @@ class RettangoliPopoverElement extends HTMLElement {
       }
     }
 
-    wrapper.setAttribute("bgc", this.getAttribute("content-bgc") || "bg");
+    wrapper.setAttribute("bgc", this.getAttribute("content-bgc") || "su");
     wrapper.setAttribute("ph", "sm");
     wrapper.setAttribute("pv", this.getAttribute("content-pv") || "sm");
 

package/src/styles/viewStyles.js

@@ -26,6 +26,9 @@ const styles = {
     bg: `
     background-color: var(--background);
     `,
+    su: `
+    background-color: var(--surface);
+    `,
     mu: `
     background-color: var(--muted);
     `,
@@ -98,6 +101,7 @@ const styles = {
     de: "--destructive",
     fg: "--foreground",
     bg: "--background",
+    su: "--surface",
     mu: "--muted",
     ac: "--accent",
     bo: "--border",

package/src/styles/viewStylesForTarget.js

@@ -16,6 +16,7 @@ const styles = {
     de: `background-color: var(--destructive);`,
     fg: `background-color: var(--foreground);`,
     bg: `background-color: var(--background);`,
+    su: `background-color: var(--surface);`,
     mu: `background-color: var(--muted);`,
     ac: `background-color: var(--accent);`,
     bo: `background-color: var(--border);`,
@@ -41,6 +42,7 @@ const styles = {
     de: "--destructive",
     fg: "--foreground",
     bg: "--background",
+    su: "--surface",
     mu: "--muted",
     ac: "--accent",
     bo: "--border",

package/src/themes/theme-catppuccin.css

@@ -76,6 +76,7 @@
   --destructive-foreground: #eff1f5;
 
   --background: #eff1f5;
+  --surface: #eceff4;
   --foreground: #4c4f69;
   --muted: #e6e9ef;
   --muted-foreground: #6c6f85;
@@ -94,6 +95,7 @@
 .dark {
   /* Catppuccin Mocha */
   --background: #1e1e2e;
+  --surface: #252536;
   --foreground: #cdd6f4;
   --primary: #89b4fa;
   --primary-foreground: #1e1e2e;

package/src/themes/theme-rtgl-mono.css

@@ -75,6 +75,7 @@
   --destructive-foreground: #fcf3f3;
 
   --background: #fff;
+  --surface: #fafafa;
   --foreground: #0a0a0a;
   --muted: #f5f5f5;
   --muted-foreground: #737373;
@@ -92,6 +93,7 @@
 
 .dark {
   --background: #0a0a0a;
+  --surface: #141414;
   --foreground: #fafafa;
   --primary: #e5e5e5;
   --primary-foreground: #171717;

package/src/themes/theme-rtgl-slate.css

@@ -75,6 +75,7 @@
   --destructive-foreground: oklch(0.145 0 0);
 
   --background: oklch(1 0 0);
+  --surface: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
@@ -92,6 +93,7 @@
 
 .dark {
   --background: rgb(29 29 29);
+  --surface: rgb(36 36 36);
   --foreground: rgb(242 242 242);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.305 0 0);