@rubin-epo/epo-widget-lib 0.6.1 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/widgets/ColorTool/styles.cjs +10 -10
  2. package/dist/widgets/ColorTool/styles.js +16 -17
  3. package/package.json +1 -1
package/dist/widgets/ColorTool/styles.cjs CHANGED
@@ -1,18 +1,18 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=require("@rubin-epo/epo-react-lib/styles"),a=e=>e&&e.__esModule?e:{default:e},t=a(o),n=t.default.section`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=e=>e&&e.__esModule?e:{default:e},t=i(o),a=t.default.section`
2
2
  color: var(--neutral80, #404040);
3
3
  container: colorTool / inline-size;
4
- `,r=i.token("BREAK_LARGE_TABLET_MIN"),l=t.default.div`
5
- --widget-areas: "image" "controls" "actions" "title";
4
+ `,n="900px",r=t.default.div`
5
+ --widget-areas: "image" "title" "controls" "actions";
6
6
  display: grid;
7
7
  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
8
8
  grid-template-areas: var(--widget-areas);
9
9
  grid-template-columns: 1fr;
10
10
 
11
- @container colorTool (min-width: ${r}) {
11
+ @container colorTool (min-width: ${n}) {
12
12
  --widget-areas: "controls image" "actions actions" "title title";
13
13
  grid-template-columns: 1fr var(--image-width, 1fr);
14
14
  }
15
- `,d=t.default.dl`
15
+ `,l=t.default.dl`
16
16
  grid-area: title;
17
17
  margin: 0;
18
18
  font-size: 18px;
@@ -37,14 +37,14 @@
37
37
  white-space: pre;
38
38
  }
39
39
  }
40
- `,s=t.default.div`
40
+ `,d=t.default.div`
41
41
  display: grid;
42
42
  grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
43
43
  grid-auto-rows: max-content;
44
44
  grid-area: controls;
45
45
  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
46
46
  align-items: center;
47
- `,c=t.default.canvas`
47
+ `,s=t.default.canvas`
48
48
  user-select: none;
49
49
  position: absolute;
50
50
  top: 0;
@@ -56,11 +56,11 @@
56
56
  mix-blend-mode: screen;
57
57
  opacity: var(--image-opacity, 0);
58
58
  visibility: var(--image-visibility, hidden);
59
- `,g=t.default.div`
59
+ `,c=t.default.div`
60
60
  position: absolute;
61
61
  top: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
62
62
  left: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
63
63
  width: calc(100% - var(--color-tool-padding, var(--PADDING_SMALL, 20px)) * 2);
64
- `,p=t.default.div`
64
+ `,g=t.default.div`
65
65
  font-weight: var(--FONT_WEIGHT_BOLD, 600);
66
- `;exports.ControlsContainer=s;exports.Image=c;exports.SelectionContainer=g;exports.Title=d;exports.ToolsHeader=p;exports.WidgetContainer=n;exports.WidgetLayout=l;
66
+ `;exports.ControlsContainer=d;exports.Image=s;exports.SelectionContainer=c;exports.Title=l;exports.ToolsHeader=g;exports.WidgetContainer=a;exports.WidgetLayout=r;
package/dist/widgets/ColorTool/styles.js CHANGED
@@ -1,20 +1,19 @@
1
1
  import t from "styled-components";
2
- import { token as i } from "@rubin-epo/epo-react-lib/styles";
3
- const r = t.section`
2
+ const a = t.section`
4
3
  color: var(--neutral80, #404040);
5
4
  container: colorTool / inline-size;
6
- `, o = i("BREAK_LARGE_TABLET_MIN"), n = t.div`
7
- --widget-areas: "image" "controls" "actions" "title";
5
+ `, i = "900px", e = t.div`
6
+ --widget-areas: "image" "title" "controls" "actions";
8
7
  display: grid;
9
8
  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
10
9
  grid-template-areas: var(--widget-areas);
11
10
  grid-template-columns: 1fr;
12
11
 
13
- @container colorTool (min-width: ${o}) {
12
+ @container colorTool (min-width: ${i}) {
14
13
  --widget-areas: "controls image" "actions actions" "title title";
15
14
  grid-template-columns: 1fr var(--image-width, 1fr);
16
15
  }
17
- `, l = t.dl`
16
+ `, r = t.dl`
18
17
  grid-area: title;
19
18
  margin: 0;
20
19
  font-size: 18px;
@@ -39,14 +38,14 @@ const r = t.section`
39
38
  white-space: pre;
40
39
  }
41
40
  }
42
- `, d = t.div`
41
+ `, n = t.div`
43
42
  display: grid;
44
43
  grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
45
44
  grid-auto-rows: max-content;
46
45
  grid-area: controls;
47
46
  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
48
47
  align-items: center;
49
- `, s = t.canvas`
48
+ `, l = t.canvas`
50
49
  user-select: none;
51
50
  position: absolute;
52
51
  top: 0;
@@ -58,20 +57,20 @@ const r = t.section`
58
57
  mix-blend-mode: screen;
59
58
  opacity: var(--image-opacity, 0);
60
59
  visibility: var(--image-visibility, hidden);
61
- `, c = t.div`
60
+ `, d = t.div`
62
61
  position: absolute;
63
62
  top: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
64
63
  left: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
65
64
  width: calc(100% - var(--color-tool-padding, var(--PADDING_SMALL, 20px)) * 2);
66
- `, p = t.div`
65
+ `, s = t.div`
67
66
  font-weight: var(--FONT_WEIGHT_BOLD, 600);
68
67
  `;
69
68
  export {
70
- d as ControlsContainer,
71
- s as Image,
72
- c as SelectionContainer,
73
- l as Title,
74
- p as ToolsHeader,
75
- r as WidgetContainer,
76
- n as WidgetLayout
69
+ n as ControlsContainer,
70
+ l as Image,
71
+ d as SelectionContainer,
72
+ r as Title,
73
+ s as ToolsHeader,
74
+ a as WidgetContainer,
75
+ e as WidgetLayout
77
76
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rubin-epo/epo-widget-lib",
3
- "version": "0.6.1",
3
+ "version": "0.6.2",
4
4
  "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
5
5
  "author": "Rubin EPO",
6
6
  "license": "MIT",