@uniformdev/design-system 19.78.0 → 19.78.1

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/esm/index.js +27 -7
  2. package/dist/index.js +27 -7
  3. package/package.json +4 -4
package/dist/esm/index.js CHANGED
@@ -133,12 +133,22 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
133
133
  /* max text width */
134
134
  --prose: 65ch;
135
135
 
136
+ /* elevation */
137
+ --elevation-0: none;
138
+ --elevation-100: 0 0 2px 0 rgba(13, 24, 39, 0.08), 0 2px 4px 0 rgba(17, 24, 39, 0.08);
139
+ --elevation-200: 0 0 2px 0 rgba(17, 24, 39, 0.07), 0 2px 4px 0 rgba(13, 24, 39, 0.07), 0 4px 8px 0 rgba(17, 24, 39, 0.07);
140
+ --elevation-300: 0 8px 16px 0 rgba(17, 24, 39, 0.06), 0 2px 4px 0 rgba(13, 24, 39, 0.06), 0 4px 8px 0 rgba(17, 24, 39, 0.06);
141
+ --elevation-400: 0 8px 16px 0 rgba(17, 24, 39, 0.05), 0 16px 24px 0 rgba(13, 24, 39, 0.05), 0 4px 8px 0 rgba(17, 24, 39, 0.05);
142
+ --elevation-500: 0 8px 16px 0 rgba(17, 24, 39, 0.04), 0 16px 24px 0 rgba(13, 24, 39, 0.04), 0 24px 32px 0 rgba(17, 24, 39, 0.04);
143
+ --elevation-600: 0 32px 40px 0 rgba(17, 24, 39, 0.03), 0 16px 24px 0 rgba(13, 24, 39, 0.03), 0 24px 32px 0 rgba(17, 24, 39, 0.03);
144
+
145
+ /* deprecated in favour of --elevation-* variables */
136
146
  /* brand shadow styles */
137
- --shadow-sm: rgba(31, 43, 52, 0.05) 0px 0px 0px 1px;
138
- --shadow-base: rgba(31, 43, 52, 0.25) 0 2px 5px -1px,
139
- rgba(31, 43, 52, 0.3) 0px 1px 3px -1px;
140
- --shadow-md: 0px 4px 4px rgba(31, 43, 52, 0.25), 0 2px 4px -2px rgba(31, 43, 52, 0.1);
141
- --shadow-xl: 0px 0px 24px rgba(31, 43, 52, 0.3);
147
+ --shadow-sm: var(--elevation-100);
148
+ --shadow-base: var(--elevation-200);
149
+ --shadow-md: var(--elevation-300);
150
+ --shadow-xl: var(--elevation-600);
151
+ /* deprecated in favour of --elevation-* variables */
142
152
 
143
153
  /* rounder corners */
144
154
  --rounded-sm: 0.125rem; /* 2px */
@@ -16083,7 +16093,7 @@ var MediaCard = ({
16083
16093
  e.stopPropagation();
16084
16094
  }, []);
16085
16095
  const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
16086
- return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, children: [
16096
+ return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, "data-testId": "card-item", children: [
16087
16097
  /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: coverWrapper, children: cover }),
16088
16098
  /* @__PURE__ */ jsx88("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
16089
16099
  /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
@@ -16115,7 +16125,16 @@ var MediaCard = ({
16115
16125
  children: /* @__PURE__ */ jsx88(
16116
16126
  Menu,
16117
16127
  {
16118
- menuTrigger: /* @__PURE__ */ jsx88("button", { type: "button", "aria-label": "More options", css: menuButton, children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
16128
+ menuTrigger: /* @__PURE__ */ jsx88(
16129
+ "button",
16130
+ {
16131
+ type: "button",
16132
+ "aria-label": "More options",
16133
+ css: menuButton,
16134
+ "data-testId": "button-more",
16135
+ children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
16136
+ }
16137
+ ),
16119
16138
  menuLabel: `Menu of ${title2}`,
16120
16139
  children: menuItems
16121
16140
  }
@@ -16155,6 +16174,7 @@ var modalStyles = css73`
16155
16174
  max-height: calc(100% - var(--spacing-base) * 2);
16156
16175
  gap: var(--spacing-base);
16157
16176
  background: var(--gray-50);
16177
+ box-shadow: var(--elevation-500);
16158
16178
  border-radius: var(--rounded-base);
16159
16179
  border: 1px solid var(--gray-300);
16160
16180
  padding: var(--spacing-base);
package/dist/index.js CHANGED
@@ -1703,12 +1703,22 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
1703
1703
  /* max text width */
1704
1704
  --prose: 65ch;
1705
1705
 
1706
+ /* elevation */
1707
+ --elevation-0: none;
1708
+ --elevation-100: 0 0 2px 0 rgba(13, 24, 39, 0.08), 0 2px 4px 0 rgba(17, 24, 39, 0.08);
1709
+ --elevation-200: 0 0 2px 0 rgba(17, 24, 39, 0.07), 0 2px 4px 0 rgba(13, 24, 39, 0.07), 0 4px 8px 0 rgba(17, 24, 39, 0.07);
1710
+ --elevation-300: 0 8px 16px 0 rgba(17, 24, 39, 0.06), 0 2px 4px 0 rgba(13, 24, 39, 0.06), 0 4px 8px 0 rgba(17, 24, 39, 0.06);
1711
+ --elevation-400: 0 8px 16px 0 rgba(17, 24, 39, 0.05), 0 16px 24px 0 rgba(13, 24, 39, 0.05), 0 4px 8px 0 rgba(17, 24, 39, 0.05);
1712
+ --elevation-500: 0 8px 16px 0 rgba(17, 24, 39, 0.04), 0 16px 24px 0 rgba(13, 24, 39, 0.04), 0 24px 32px 0 rgba(17, 24, 39, 0.04);
1713
+ --elevation-600: 0 32px 40px 0 rgba(17, 24, 39, 0.03), 0 16px 24px 0 rgba(13, 24, 39, 0.03), 0 24px 32px 0 rgba(17, 24, 39, 0.03);
1714
+
1715
+ /* deprecated in favour of --elevation-* variables */
1706
1716
  /* brand shadow styles */
1707
- --shadow-sm: rgba(31, 43, 52, 0.05) 0px 0px 0px 1px;
1708
- --shadow-base: rgba(31, 43, 52, 0.25) 0 2px 5px -1px,
1709
- rgba(31, 43, 52, 0.3) 0px 1px 3px -1px;
1710
- --shadow-md: 0px 4px 4px rgba(31, 43, 52, 0.25), 0 2px 4px -2px rgba(31, 43, 52, 0.1);
1711
- --shadow-xl: 0px 0px 24px rgba(31, 43, 52, 0.3);
1717
+ --shadow-sm: var(--elevation-100);
1718
+ --shadow-base: var(--elevation-200);
1719
+ --shadow-md: var(--elevation-300);
1720
+ --shadow-xl: var(--elevation-600);
1721
+ /* deprecated in favour of --elevation-* variables */
1712
1722
 
1713
1723
  /* rounder corners */
1714
1724
  --rounded-sm: 0.125rem; /* 2px */
@@ -17875,7 +17885,7 @@ var MediaCard = ({
17875
17885
  e.stopPropagation();
17876
17886
  }, []);
17877
17887
  const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
17878
- return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Card, { css: cardBase, ...cardProps, onClick, children: [
17888
+ return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Card, { css: cardBase, ...cardProps, onClick, "data-testId": "card-item", children: [
17879
17889
  /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { tabIndex: -1, css: coverWrapper, children: cover }),
17880
17890
  /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { css: contentWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
17881
17891
  /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
@@ -17907,7 +17917,16 @@ var MediaCard = ({
17907
17917
  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
17908
17918
  Menu,
17909
17919
  {
17910
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { type: "button", "aria-label": "More options", css: menuButton, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
17920
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
17921
+ "button",
17922
+ {
17923
+ type: "button",
17924
+ "aria-label": "More options",
17925
+ css: menuButton,
17926
+ "data-testId": "button-more",
17927
+ children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
17928
+ }
17929
+ ),
17911
17930
  menuLabel: `Menu of ${title2}`,
17912
17931
  children: menuItems
17913
17932
  }
@@ -17949,6 +17968,7 @@ var modalStyles = import_react98.css`
17949
17968
  max-height: calc(100% - var(--spacing-base) * 2);
17950
17969
  gap: var(--spacing-base);
17951
17970
  background: var(--gray-50);
17971
+ box-shadow: var(--elevation-500);
17952
17972
  border-radius: var(--rounded-base);
17953
17973
  border: 1px solid var(--gray-300);
17954
17974
  padding: var(--spacing-base);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/design-system",
3
- "version": "19.78.0",
3
+ "version": "19.78.1",
4
4
  "description": "Uniform design system components",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "./dist/index.js",
@@ -23,8 +23,8 @@
23
23
  "@storybook/react": "6.5.16",
24
24
  "@types/react": "18.2.21",
25
25
  "@types/react-dom": "18.2.7",
26
- "@uniformdev/canvas": "^19.78.0",
27
- "@uniformdev/richtext": "^19.78.0",
26
+ "@uniformdev/canvas": "^19.78.1",
27
+ "@uniformdev/richtext": "^19.78.1",
28
28
  "autoprefixer": "10.4.16",
29
29
  "hygen": "6.2.11",
30
30
  "postcss": "8.4.31",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "f6d26aebf403e38740acd6dc3d99bf2460079639"
70
+ "gitHead": "757c51b80cc39640bcedef7fb5334f36a00c4761"
71
71
  }