@rubin-epo/epo-widget-lib 0.5.1-alpha.0 → 0.6.0

package/dist/widgets/ColorTool/styles.cjs

@@ -1,22 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),n=require("@rubin-epo/epo-react-lib/Button"),r=require("@rubin-epo/epo-react-lib/HorizontalSlider"),l=require("@rubin-epo/epo-react-lib/styles"),d=require("./FilterImage/FilterImage.cjs"),i=e=>e&&e.__esModule?e:{default:e},t=i(o),a=i(n),s=i(r),c=t.default.section`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),o=require("@rubin-epo/epo-react-lib/styles"),a=e=>e&&e.__esModule?e:{default:e},t=a(i),n=t.default.section`
+  color: var(--neutral80, #404040);
   container: colorTool / inline-size;
-`,u=l.token("BREAK_LARGE_TABLET_MIN"),g=t.default.div`
-  --widget-areas: "title" "subtitle" "image" "caption" "controls" "reset";
-  --controls-row: "controls image";
+`,r=o.token("BREAK_LARGE_TABLET_MIN"),l=t.default.div`
+  --widget-areas: "image" "controls" "actions" "title";
   display: grid;
-  gap: var(--PADDING_SMALL, 20px);
+  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   grid-template-areas: var(--widget-areas);
+  grid-template-columns: 1fr;
 
-  @container colorTool (min-width: ${u}) {
-    --widget-areas: "title title" "subtitle subtitle" var(--controls-row)
-      "reset reset" "caption caption";
+  @container colorTool (min-width: ${r}) {
+    --widget-areas: "controls image" "actions actions" "title title";
+    grid-template-columns: 1fr var(--image-width, 1fr);
   }
-`;t.default.h2`
+`,d=t.default.dl`
   grid-area: title;
   margin: 0;
-`;const f=t.default.dl`
-  grid-area: subtitle;
-  margin: 0;
   font-size: 18px;
   font-weight: var(--FONT_WEIGHT_NORMAL, 400);
 
@@ -39,31 +37,14 @@
       white-space: pre;
     }
   }
-`,p=t.default.div`
+`,s=t.default.div`
   display: grid;
   grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
   grid-auto-rows: max-content;
   grid-area: controls;
   gap: 10px;
   align-items: center;
-`,m=t.default(s.default)`
-  padding: 0;
-  width: 100%;
-`,b=t.default.div`
-  position: relative;
-  aspect-ratio: 1 / 1;
-  grid-area: image;
-  background-color: rgba(0, 0, 0, 0.1);
-`,h=t.default.img`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: ${({$filtersActive:e})=>e?"block":"none"};
-  width: 100%;
-  height: 100%;
-`,x=t.default(d.default)`
+`,c=t.default.canvas`
   user-select: none;
   position: absolute;
   top: 0;
@@ -73,50 +54,13 @@
   width: 100%;
   height: 100%;
   mix-blend-mode: screen;
-
-  ${({active:e})=>e?o.css`
-          visibility: visible;
-          opacity: 1;
-        `:o.css`
-          visibility: hidden;
-          opacity: 0;
-        `}
-`,v=t.default.div`
-  grid-column: span 3;
-`,w=t.default.div`
+  opacity: var(--image-opacity, 0);
+  visibility: var(--image-visibility, hidden);
+`,g=t.default.div`
+  position: absolute;
+  top: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
+  left: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
+  width: calc(100% - var(--color-tool-padding, var(--PADDING_SMALL, 20px)) * 2);
+`,p=t.default.div`
   font-weight: var(--FONT_WEIGHT_BOLD, 600);
-`,_=t.default.footer`
-  grid-area: caption;
-`,y=t.default(a.default)`
-  grid-area: reset;
-  text-align: left;
-
-  span {
-    text-align: left;
-  }
-`,T=t.default(a.default)`
-  border-radius: 50%;
-  font-weight: var(--FONT_WEIGHT_MEDIUM, 500);
-  font-size: 22px;
-  text-transform: lowercase;
-  display: flex;
-  width: 38px;
-  height: 38px;
-  padding: 0;
-
-  ${({$active:e})=>e?o.css`
-          background-color: var(--turquoise85, #12726c);
-          &:not(:disabled):not([aria-disabled="true"]):hover {
-            outline: 1px solid var(--white, #fff);
-            outline-offset: -3px;
-          }
-        `:o.css`
-          background-color: #f7f7f7;
-          border-color: #6c6e6e;
-          color: #6c6e6e !important;
-          &:not(:disabled):not([aria-disabled="true"]):hover {
-            outline: 2px solid #6c6e6e;
-            outline-offset: -2px;
-          }
-        `}
-`;exports.BackgroundImage=h;exports.Caption=_;exports.ControlsContainer=p;exports.FilterToggleButton=T;exports.FilteredImage=x;exports.ImageContainer=b;exports.ResetButton=y;exports.SelectionContainer=v;exports.Slider=m;exports.Subtitle=f;exports.ToolsHeader=w;exports.WidgetContainer=c;exports.WidgetLayout=g;
+`;exports.ControlsContainer=s;exports.Image=c;exports.SelectionContainer=g;exports.Title=d;exports.ToolsHeader=p;exports.WidgetContainer=n;exports.WidgetLayout=l;