@terraware/web-components 2.0.11 → 2.0.12

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 (9) hide show
  1. package/components/DialogBox/DialogBox.d.ts +1 -0
  2. package/components/DialogBox/DialogBox.d.ts.map +1 -1
  3. package/components/DialogBox/DialogBox.js +6 -3
  4. package/components/DialogBox/styles.scss +21 -2
  5. package/components/svg/IconExport.d.ts.map +1 -1
  6. package/components/svg/IconExport.js +1 -3
  7. package/package.json +1 -1
  8. package/style-dictionary-dist2/TerrawareTheme2.js +34 -34
  9. package/style-dictionary-dist2/terraware.scss +33 -33
package/components/DialogBox/DialogBox.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface Props {
11
11
  onClose?: () => void;
12
12
  open: boolean;
13
13
  scrolled?: boolean;
14
+ skrim?: boolean;
14
15
  }
15
16
  export default function DialogBox(props: Props): JSX.Element | null;
16
17
  //# sourceMappingURL=DialogBox.d.ts.map
package/components/DialogBox/DialogBox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/components/DialogBox/DialogBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,eAAe,CAAC;AAKvB,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA8DlE"}
1
+ {"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/components/DialogBox/DialogBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,eAAe,CAAC;AAKvB,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+DlE"}
package/components/DialogBox/DialogBox.js CHANGED
@@ -29,19 +29,22 @@ function DialogBox(props) {
29
29
  middleButtons = props.middleButtons,
30
30
  onClose = props.onClose,
31
31
  open = props.open,
32
- scrolled = props.scrolled;
32
+ scrolled = props.scrolled,
33
+ skrim = props.skrim;
33
34
  var hasFooter = leftButton || rightButtons || middleButtons;
34
35
 
35
36
  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
36
37
  isMobile = _useDeviceInfo.isMobile;
37
38
 
38
39
  return open ? /*#__PURE__*/_react.default.createElement("div", {
39
- className: "dialog-box-container ".concat(open ? 'dialog-box--opened' : 'dialog-box--closed', " ").concat(isMobile ? 'mobile' : '')
40
+ className: "dialog-box-container".concat(skrim ? '--skrim' : '', " ").concat(open ? 'dialog-box--opened' : 'dialog-box--closed', " ").concat(isMobile ? 'mobile' : '')
40
41
  }, /*#__PURE__*/_react.default.createElement("div", {
41
42
  className: "dialog-box dialog-box--".concat(size)
42
43
  }, /*#__PURE__*/_react.default.createElement("div", {
43
44
  className: "dialog-box--header"
44
- }, /*#__PURE__*/_react.default.createElement("p", {
45
+ }, /*#__PURE__*/_react.default.createElement("div", {
46
+ className: "close-icon-spacer"
47
+ }), /*#__PURE__*/_react.default.createElement("p", {
45
48
  className: "title"
46
49
  }, title), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
47
50
  onClick: onClose,
package/components/DialogBox/styles.scss CHANGED
@@ -7,8 +7,6 @@
7
7
  }
8
8
 
9
9
  .dialog-box-container {
10
- background: rgba(249, 250, 250, 0.8);
11
- backdrop-filter: blur(3px);
12
10
  height: 100%;
13
11
  display: flex;
14
12
  align-items: center;
@@ -17,6 +15,18 @@
17
15
  z-index: 1300;
18
16
  inset: 0px;
19
17
 
18
+ &--skrim {
19
+ background-color: rgba($tw-clr-base-gray-025, $tw-opcty-base-060);
20
+ background-image: linear-gradient(180deg, rgba($tw-clr-base-green-050, $tw-opcty-base-000), rgba($tw-clr-base-green-050, 0.24));
21
+ height: 100%;
22
+ display: flex;
23
+ align-items: center;
24
+ justify-content: center;
25
+ position: fixed;
26
+ z-index: 1300;
27
+ inset: 0px;
28
+ }
29
+
20
30
  &.mobile {
21
31
  margin: 0 $tw-spc-base-small;
22
32
  .dialog-box {
@@ -92,6 +102,15 @@
92
102
  height: $tw-sz-base-medium;
93
103
  width: $tw-sz-base-medium;
94
104
  }
105
+
106
+ .MuiButtonBase-root {
107
+ padding: $tw-spc-base-xx-small;
108
+ }
109
+
110
+ .close-icon-spacer {
111
+ height: calc(#{$tw-sz-base-medium} + 2*#{$tw-spc-base-xx-small});
112
+ width: calc(#{$tw-sz-base-medium} + 2*#{$tw-spc-base-xx-small});
113
+ }
95
114
  }
96
115
 
97
116
  &--body {
package/components/svg/IconExport.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconExport.d.ts","sourceRoot":"","sources":["../../../src/components/svg/IconExport.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,aAAa,iCAAkC,SAAS,aAAa,CAAC,GAAG,SAAS,gBAQvF,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"IconExport.d.ts","sourceRoot":"","sources":["../../../src/components/svg/IconExport.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,aAAa,iCAAkC,SAAS,aAAa,CAAC,GAAG,SAAS,gBAKvF,CAAC;AAEF,eAAe,aAAa,CAAC"}
package/components/svg/IconExport.js CHANGED
@@ -21,14 +21,12 @@ var SvgIconExport = function SvgIconExport(_ref) {
21
21
  props = (0, _objectWithoutProperties2.default)(_ref, ["title", "titleId"]);
22
22
  return /*#__PURE__*/React.createElement("svg", Object.assign({
23
23
  viewBox: "0 0 24 24",
24
- fill: "none",
25
24
  xmlns: "http://www.w3.org/2000/svg",
26
25
  "aria-labelledby": titleId
27
26
  }, props), title ? /*#__PURE__*/React.createElement("title", {
28
27
  id: titleId
29
28
  }, title) : null, /*#__PURE__*/React.createElement("path", {
30
- d: "M6.25 2A2.261 2.261 0 0 0 4 4.25v15.5A2.261 2.261 0 0 0 6.25 22h11.5A2.261 2.261 0 0 0 20 19.75V9.25a.75.75 0 0 0-.22-.53l-.008-.008L13.28 2.22a.75.75 0 0 0-.53-.22h-6.5Zm0 1.5H12v4.25A2.261 2.261 0 0 0 14.25 10h4.25v9.75c0 .423-.327.75-.75.75H6.25a.739.739 0 0 1-.75-.75V4.25c0-.423.327-.75.75-.75Zm7.25 1.06 3.94 3.94h-3.19a.739.739 0 0 1-.75-.75V4.56Zm-1.512 6.43a.75.75 0 0 0-.738.76v3.19l-.72-.72a.75.75 0 1 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l2-2a.75.75 0 1 0-1.06-1.06l-.72.72v-3.19a.75.75 0 0 0-.762-.76Zm.023 6.51H8.75a.751.751 0 1 0 0 1.5h6.5a.751.751 0 1 0 0-1.5h-3.24Z",
31
- fill: "#3A4445"
29
+ d: "M6.25 2A2.261 2.261 0 0 0 4 4.25v15.5A2.261 2.261 0 0 0 6.25 22h11.5A2.261 2.261 0 0 0 20 19.75V9.25a.75.75 0 0 0-.22-.53l-.008-.008L13.28 2.22a.75.75 0 0 0-.53-.22h-6.5Zm0 1.5H12v4.25A2.261 2.261 0 0 0 14.25 10h4.25v9.75c0 .423-.327.75-.75.75H6.25a.739.739 0 0 1-.75-.75V4.25c0-.423.327-.75.75-.75Zm7.25 1.06 3.94 3.94h-3.19a.739.739 0 0 1-.75-.75V4.56Zm-1.512 6.43a.75.75 0 0 0-.738.76v3.19l-.72-.72a.75.75 0 1 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l2-2a.75.75 0 1 0-1.06-1.06l-.72.72v-3.19a.75.75 0 0 0-.762-.76Zm.023 6.51H8.75a.751.751 0 1 0 0 1.5h6.5a.751.751 0 1 0 0-1.5h-3.24Z"
32
30
  }));
33
31
  };
34
32
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@terraware/web-components",
3
- "version": "2.0.11",
3
+ "version": "2.0.12",
4
4
  "author": "Terraformation Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/style-dictionary-dist2/TerrawareTheme2.js CHANGED
@@ -82,46 +82,46 @@ var TerrawareTheme2 = {
82
82
  "TwClrBaseYellow700": "#685215",
83
83
  "TwClrBaseYellow800": "#52400F",
84
84
  "TwClrBaseBlack": "#000000",
85
- "TwClrBaseGray025": "#F9FAFA",
86
- "TwClrBaseGray050": "#F2F4F5",
87
- "TwClrBaseGray075": "#EDF0F1",
88
- "TwClrBaseGray100": "#E5EAEA",
89
- "TwClrBaseGray200": "#CAD2D3",
90
- "TwClrBaseGray300": "#A9B7B8",
91
- "TwClrBaseGray400": "#859799",
92
- "TwClrBaseGray500": "#708284",
93
- "TwClrBaseGray600": "#5C6B6C",
94
- "TwClrBaseGray700": "#4B5758",
95
- "TwClrBaseGray800": "#3A4445",
96
- "TwClrBaseGray900": "#2B3233",
85
+ "TwClrBaseGray025": "#F9F8F7",
86
+ "TwClrBaseGray050": "#F1F0EC",
87
+ "TwClrBaseGray075": "#EBEAE4",
88
+ "TwClrBaseGray100": "#E3E1D9",
89
+ "TwClrBaseGray200": "#CBC6B7",
90
+ "TwClrBaseGray300": "#B2AB93",
91
+ "TwClrBaseGray400": "#9A9172",
92
+ "TwClrBaseGray500": "#7F775B",
93
+ "TwClrBaseGray600": "#645E48",
94
+ "TwClrBaseGray700": "#4B4736",
95
+ "TwClrBaseGray800": "#333025",
96
+ "TwClrBaseGray900": "#1D1B15",
97
97
  "TwClrBaseTransparent": "#FFFFFF00",
98
98
  "TwClrBaseWhite": "#FFFFFF",
99
99
  "TwClrBg": "#FFFFFF",
100
- "TwClrBgActive": "#F2F4F5",
100
+ "TwClrBgActive": "#F1F0EC",
101
101
  "TwClrBgGhost": "#FFFFFF00",
102
102
  "TwClrBgGhostActive": "#A9B7B866",
103
103
  "TwClrBgGhostHover": "#A9B7B833",
104
- "TwClrBgHover": "#F9FAFA",
105
- "TwClrBgInverse": "#3A4445",
106
- "TwClrBgSecondary": "#F2F4F5",
107
- "TwClrBgSecondaryActive": "#E5EAEA",
108
- "TwClrBgSecondaryHover": "#EDF0F1",
109
- "TwClrBgTertiary": "#CAD2D3",
110
- "TwClrBgTertiaryActive": "#A9B7B8",
111
- "TwClrBgTertiaryHover": "#CAD2D3",
112
- "TwClrBrdr": "#3A4445",
104
+ "TwClrBgHover": "#F9F8F7",
105
+ "TwClrBgInverse": "#333025",
106
+ "TwClrBgSecondary": "#F1F0EC",
107
+ "TwClrBgSecondaryActive": "#E3E1D9",
108
+ "TwClrBgSecondaryHover": "#EBEAE4",
109
+ "TwClrBgTertiary": "#CBC6B7",
110
+ "TwClrBgTertiaryActive": "#B2AB93",
111
+ "TwClrBgTertiaryHover": "#CBC6B7",
112
+ "TwClrBrdr": "#333025",
113
113
  "TwClrBrdrActive": "#0067C8",
114
114
  "TwClrBrdrFocus": "#0067C8",
115
115
  "TwClrBrdrHover": "#0067C8",
116
- "TwClrBrdrSecondary": "#708284",
117
- "TwClrBrdrTertiary": "#A9B7B8",
118
- "TwClrIcn": "#3A4445",
116
+ "TwClrBrdrSecondary": "#7F775B",
117
+ "TwClrBrdrTertiary": "#B2AB93",
118
+ "TwClrIcn": "#333025",
119
119
  "TwClrIcnInverse": "#FFFFFF",
120
- "TwClrIcnSecondary": "#708284",
121
- "TwClrTxt": "#3A4445",
120
+ "TwClrIcnSecondary": "#7F775B",
121
+ "TwClrTxt": "#333025",
122
122
  "TwClrTxtInverse": "#FFFFFF",
123
- "TwClrTxtSecondary": "#5C6B6C",
124
- "TwClrTxtTertiary": "#A9B7B8",
123
+ "TwClrTxtSecondary": "#645E48",
124
+ "TwClrTxtTertiary": "#B2AB93",
125
125
  "TwClrBgBrand": "#0067C8",
126
126
  "TwClrBgBrandActive": "#0053A5",
127
127
  "TwClrBgBrandGhost": "#0067C800",
@@ -148,12 +148,12 @@ var TerrawareTheme2 = {
148
148
  "TwClrIcnOnDanger": "#FFFFFF",
149
149
  "TwClrTxtDanger": "#D40002",
150
150
  "TwClrTxtOnDanger": "#FFFFFF",
151
- "TwClrBgInfo": "#708284",
152
- "TwClrBgInfoTertiary": "#F2F4F5",
153
- "TwClrBrdrInfo": "#708284",
154
- "TwClrIcnInfo": "#708284",
151
+ "TwClrBgInfo": "#7F775B",
152
+ "TwClrBgInfoTertiary": "#F1F0EC",
153
+ "TwClrBrdrInfo": "#7F775B",
154
+ "TwClrIcnInfo": "#7F775B",
155
155
  "TwClrIcnOnInfo": "#FFFFFF",
156
- "TwClrTxtInfo": "#5C6B6C",
156
+ "TwClrTxtInfo": "#645E48",
157
157
  "TwClrTxtOnInfo": "#FFFFFF",
158
158
  "TwClrBgSelected": "#0067C8",
159
159
  "TwClrBgSelectedGhost": "#0067C800",
package/style-dictionary-dist2/terraware.scss CHANGED
@@ -71,46 +71,46 @@ $tw-clr-base-yellow-600: #7F641C;
71
71
  $tw-clr-base-yellow-700: #685215;
72
72
  $tw-clr-base-yellow-800: #52400F;
73
73
  $tw-clr-base-black: #000000;
74
- $tw-clr-base-gray-025: #F9FAFA;
75
- $tw-clr-base-gray-050: #F2F4F5;
76
- $tw-clr-base-gray-075: #EDF0F1;
77
- $tw-clr-base-gray-100: #E5EAEA;
78
- $tw-clr-base-gray-200: #CAD2D3;
79
- $tw-clr-base-gray-300: #A9B7B8;
80
- $tw-clr-base-gray-400: #859799;
81
- $tw-clr-base-gray-500: #708284;
82
- $tw-clr-base-gray-600: #5C6B6C;
83
- $tw-clr-base-gray-700: #4B5758;
84
- $tw-clr-base-gray-800: #3A4445;
85
- $tw-clr-base-gray-900: #2B3233;
74
+ $tw-clr-base-gray-025: #F9F8F7;
75
+ $tw-clr-base-gray-050: #F1F0EC;
76
+ $tw-clr-base-gray-075: #EBEAE4;
77
+ $tw-clr-base-gray-100: #E3E1D9;
78
+ $tw-clr-base-gray-200: #CBC6B7;
79
+ $tw-clr-base-gray-300: #B2AB93;
80
+ $tw-clr-base-gray-400: #9A9172;
81
+ $tw-clr-base-gray-500: #7F775B;
82
+ $tw-clr-base-gray-600: #645E48;
83
+ $tw-clr-base-gray-700: #4B4736;
84
+ $tw-clr-base-gray-800: #333025;
85
+ $tw-clr-base-gray-900: #1D1B15;
86
86
  $tw-clr-base-transparent: #FFFFFF00;
87
87
  $tw-clr-base-white: #FFFFFF;
88
88
  $tw-clr-bg: #FFFFFF;
89
- $tw-clr-bg-active: #F2F4F5;
89
+ $tw-clr-bg-active: #F1F0EC;
90
90
  $tw-clr-bg-ghost: #FFFFFF00;
91
91
  $tw-clr-bg-ghost-active: #A9B7B866;
92
92
  $tw-clr-bg-ghost-hover: #A9B7B833;
93
- $tw-clr-bg-hover: #F9FAFA;
94
- $tw-clr-bg-inverse: #3A4445;
95
- $tw-clr-bg-secondary: #F2F4F5;
96
- $tw-clr-bg-secondary-active: #E5EAEA;
97
- $tw-clr-bg-secondary-hover: #EDF0F1;
98
- $tw-clr-bg-tertiary: #CAD2D3;
99
- $tw-clr-bg-tertiary-active: #A9B7B8;
93
+ $tw-clr-bg-hover: #F9F8F7;
94
+ $tw-clr-bg-inverse: #333025;
95
+ $tw-clr-bg-secondary: #F1F0EC;
96
+ $tw-clr-bg-secondary-active: #E3E1D9;
97
+ $tw-clr-bg-secondary-hover: #EBEAE4;
98
+ $tw-clr-bg-tertiary: #CBC6B7;
99
+ $tw-clr-bg-tertiary-active: #B2AB93;
100
100
  $tw-clr-bg-tertiary-hover: [object Object];
101
- $tw-clr-brdr: #3A4445;
101
+ $tw-clr-brdr: #333025;
102
102
  $tw-clr-brdr-active: #0067C8;
103
103
  $tw-clr-brdr-focus: #0067C8;
104
104
  $tw-clr-brdr-hover: #0067C8;
105
- $tw-clr-brdr-secondary: #708284;
106
- $tw-clr-brdr-tertiary: #A9B7B8;
107
- $tw-clr-icn: #3A4445;
105
+ $tw-clr-brdr-secondary: #7F775B;
106
+ $tw-clr-brdr-tertiary: #B2AB93;
107
+ $tw-clr-icn: #333025;
108
108
  $tw-clr-icn-inverse: #FFFFFF;
109
- $tw-clr-icn-secondary: #708284;
110
- $tw-clr-txt: #3A4445;
109
+ $tw-clr-icn-secondary: #7F775B;
110
+ $tw-clr-txt: #333025;
111
111
  $tw-clr-txt-inverse: #FFFFFF;
112
- $tw-clr-txt-secondary: #5C6B6C;
113
- $tw-clr-txt-tertiary: #A9B7B8;
112
+ $tw-clr-txt-secondary: #645E48;
113
+ $tw-clr-txt-tertiary: #B2AB93;
114
114
  $tw-clr-bg-brand: #0067C8;
115
115
  $tw-clr-bg-brand-active: #0053A5;
116
116
  $tw-clr-bg-brand-ghost: #0067C800;
@@ -137,12 +137,12 @@ $tw-clr-icn-danger: #FE0003;
137
137
  $tw-clr-icn-on-danger: #FFFFFF;
138
138
  $tw-clr-txt-danger: #D40002;
139
139
  $tw-clr-txt-on-danger: #FFFFFF;
140
- $tw-clr-bg-info: #708284;
141
- $tw-clr-bg-info-tertiary: #F2F4F5;
142
- $tw-clr-brdr-info: #708284;
143
- $tw-clr-icn-info: #708284;
140
+ $tw-clr-bg-info: #7F775B;
141
+ $tw-clr-bg-info-tertiary: #F1F0EC;
142
+ $tw-clr-brdr-info: #7F775B;
143
+ $tw-clr-icn-info: #7F775B;
144
144
  $tw-clr-icn-on-info: #FFFFFF;
145
- $tw-clr-txt-info: #5C6B6C;
145
+ $tw-clr-txt-info: #645E48;
146
146
  $tw-clr-txt-on-info: #FFFFFF;
147
147
  $tw-clr-bg-selected: #0067C8;
148
148
  $tw-clr-bg-selected-ghost: #0067C800;