@artsy/palette 45.5.0 → 45.6.0

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 (13) hide show
  1. package/dist/elements/Dropdown/Dropdown.d.ts +3 -1
  2. package/dist/elements/Dropdown/Dropdown.js +8 -4
  3. package/dist/elements/Dropdown/Dropdown.js.map +1 -1
  4. package/dist/elements/Dropdown/Dropdown.story.d.ts +14 -1
  5. package/dist/elements/Dropdown/Dropdown.story.js +73 -1
  6. package/dist/elements/Dropdown/Dropdown.story.js.map +1 -1
  7. package/dist/elements/Skeleton/Skeleton.js +15 -4
  8. package/dist/elements/Skeleton/Skeleton.js.map +1 -1
  9. package/dist/themes/Themes.story.d.ts +1 -0
  10. package/dist/themes/Themes.story.js +181 -1
  11. package/dist/themes/Themes.story.js.map +1 -1
  12. package/dist/tokens.json +1 -1
  13. package/package.json +3 -3
package/dist/themes/Themes.story.d.ts CHANGED
@@ -11,4 +11,5 @@ export declare const Typography: () => React.JSX.Element;
11
11
  export declare const Buttons: () => React.JSX.Element;
12
12
  export declare const Components: () => React.JSX.Element;
13
13
  export declare const Inputs: () => React.JSX.Element;
14
+ export declare const Effects: () => React.JSX.Element;
14
15
  export declare const ContrastRatios: () => React.JSX.Element;
package/dist/themes/Themes.story.js CHANGED
@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.default = exports.Typography = exports.Theme = exports.Spacing = exports.Inputs = exports.Grid = exports.ContrastRatios = exports.Components = exports.Colors = exports.Buttons = void 0;
7
+ exports.default = exports.Typography = exports.Theme = exports.Spacing = exports.Inputs = exports.Grid = exports.Effects = exports.ContrastRatios = exports.Components = exports.Colors = exports.Buttons = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _elements = require("../elements");
10
10
  var _Theme = require("../Theme");
@@ -914,6 +914,186 @@ var contrastRatio = function contrastRatio(hexColor1, hexColor2) {
914
914
  return parseFloat(ratio.toFixed(2)); // Round to two decimal places for readability
915
915
  };
916
916
 
917
+ var Effects = exports.Effects = function Effects() {
918
+ var _useTheme6 = (0, _Theme.useTheme)(),
919
+ theme = _useTheme6.theme;
920
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_elements.Text, {
921
+ variant: "xxl",
922
+ mb: 4
923
+ }, "Effects"), /*#__PURE__*/_react.default.createElement(_elements.Text, {
924
+ variant: "sm",
925
+ mb: 12
926
+ }, "Visual effects tokens including shadows, gradients, and overlays used throughout the design system."), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
927
+ color: "mono30",
928
+ my: 12
929
+ }), /*#__PURE__*/_react.default.createElement(_elements.GridColumns, {
930
+ gridRowGap: 12
931
+ }, /*#__PURE__*/_react.default.createElement(_elements.Column, {
932
+ span: 6
933
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
934
+ width: "fit-content",
935
+ px: 6,
936
+ py: 4,
937
+ borderRadius: 2,
938
+ style: {
939
+ boxShadow: theme.effects.dropShadow
940
+ }
941
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
942
+ variant: "sm",
943
+ color: "mono60"
944
+ }, "theme.effects.dropShadow"))), /*#__PURE__*/_react.default.createElement(_elements.Column, {
945
+ span: 6
946
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
947
+ as: "span",
948
+ variant: "sm",
949
+ color: "mono60"
950
+ }, "box-shadow:", " "), /*#__PURE__*/_react.default.createElement(_elements.Text, {
951
+ as: "span",
952
+ variant: "sm"
953
+ }, theme.effects.dropShadow)), /*#__PURE__*/_react.default.createElement(_elements.Column, {
954
+ span: 6
955
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
956
+ width: "fit-content",
957
+ px: 6,
958
+ py: 4,
959
+ borderRadius: 2,
960
+ style: {
961
+ boxShadow: theme.effects.innerShadow
962
+ }
963
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
964
+ variant: "sm",
965
+ color: "mono60"
966
+ }, "theme.effects.innerShadow"))), /*#__PURE__*/_react.default.createElement(_elements.Column, {
967
+ span: 6
968
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
969
+ as: "span",
970
+ variant: "sm",
971
+ color: "mono60"
972
+ }, "box-shadow:", " "), /*#__PURE__*/_react.default.createElement(_elements.Text, {
973
+ as: "span",
974
+ variant: "sm"
975
+ }, theme.effects.innerShadow)), /*#__PURE__*/_react.default.createElement(_elements.Column, {
976
+ span: 6
977
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
978
+ width: "fit-content",
979
+ px: 6,
980
+ py: 4,
981
+ borderRadius: 2,
982
+ style: {
983
+ boxShadow: theme.effects.flatShadow
984
+ }
985
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
986
+ variant: "sm",
987
+ color: "mono60"
988
+ }, "theme.effects.flatShadow"))), /*#__PURE__*/_react.default.createElement(_elements.Column, {
989
+ span: 6
990
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
991
+ as: "span",
992
+ variant: "sm",
993
+ color: "mono60"
994
+ }, "box-shadow:", " "), /*#__PURE__*/_react.default.createElement(_elements.Text, {
995
+ as: "span",
996
+ variant: "sm"
997
+ }, theme.effects.flatShadow)), /*#__PURE__*/_react.default.createElement(_elements.Column, {
998
+ span: 6
999
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
1000
+ width: "fit-content",
1001
+ px: 6,
1002
+ py: 4,
1003
+ borderRadius: 2,
1004
+ bg: "mono30"
1005
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
1006
+ variant: "sm",
1007
+ color: "mono0",
1008
+ style: {
1009
+ textShadow: theme.effects.textShadow
1010
+ }
1011
+ }, "theme.effects.textShadow"))), /*#__PURE__*/_react.default.createElement(_elements.Column, {
1012
+ span: 6
1013
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
1014
+ as: "span",
1015
+ variant: "sm",
1016
+ color: "mono60"
1017
+ }, "text-shadow:", " "), /*#__PURE__*/_react.default.createElement(_elements.Text, {
1018
+ as: "span",
1019
+ variant: "sm"
1020
+ }, theme.effects.textShadow)), /*#__PURE__*/_react.default.createElement(_elements.Column, {
1021
+ span: 6
1022
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
1023
+ width: "fit-content",
1024
+ px: 6,
1025
+ py: 4,
1026
+ borderRadius: 2,
1027
+ border: "1px solid",
1028
+ borderColor: "mono5",
1029
+ background: theme.effects.overlayGradient
1030
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
1031
+ variant: "sm",
1032
+ color: "mono0",
1033
+ style: {
1034
+ textShadow: theme.effects.textShadow
1035
+ }
1036
+ }, "theme.effects.overlayGradient"))), /*#__PURE__*/_react.default.createElement(_elements.Column, {
1037
+ span: 6
1038
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
1039
+ as: "span",
1040
+ variant: "sm",
1041
+ color: "mono60"
1042
+ }, "background:", " "), /*#__PURE__*/_react.default.createElement(_elements.Text, {
1043
+ as: "span",
1044
+ variant: "sm"
1045
+ }, theme.effects.overlayGradient)), /*#__PURE__*/_react.default.createElement(_elements.Column, {
1046
+ span: 6
1047
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
1048
+ bg: "mono30",
1049
+ position: "relative",
1050
+ p: 4,
1051
+ borderRadius: 2
1052
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
1053
+ position: "absolute",
1054
+ top: 0,
1055
+ left: 0,
1056
+ right: 0,
1057
+ bottom: 0,
1058
+ style: {
1059
+ background: theme.effects.fadeRight
1060
+ }
1061
+ }), "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsum quasi nesciunt perferendis iste nemo impedit molestias vero obcaecati commodi autem illum eius, modi dolorem eum. Similique ut consectetur rerum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsum quasi nesciunt perferendis iste nemo impedit molestias vero obcaecati commodi autem illum eius, modi dolorem eum. Similique ut consectetur rerum!")), /*#__PURE__*/_react.default.createElement(_elements.Column, {
1062
+ span: 6
1063
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
1064
+ as: "span",
1065
+ variant: "sm",
1066
+ color: "mono60"
1067
+ }, "background:", " "), /*#__PURE__*/_react.default.createElement(_elements.Text, {
1068
+ as: "span",
1069
+ variant: "sm"
1070
+ }, theme.effects.fadeRight)), /*#__PURE__*/_react.default.createElement(_elements.Column, {
1071
+ span: 6
1072
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
1073
+ bg: "mono30",
1074
+ position: "relative",
1075
+ p: 4
1076
+ }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
1077
+ position: "absolute",
1078
+ top: 2,
1079
+ left: 2,
1080
+ right: 2,
1081
+ bottom: 2,
1082
+ borderRadius: 2,
1083
+ style: {
1084
+ backgroundColor: theme.effects.backdrop
1085
+ }
1086
+ }), "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsum quasi nesciunt perferendis iste nemo impedit molestias vero obcaecati commodi autem illum eius, modi dolorem eum. Similique ut consectetur rerum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsum quasi nesciunt perferendis iste nemo impedit molestias vero obcaecati commodi autem illum eius, modi dolorem eum. Similique ut consectetur rerum!")), /*#__PURE__*/_react.default.createElement(_elements.Column, {
1087
+ span: 6
1088
+ }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
1089
+ as: "span",
1090
+ variant: "sm",
1091
+ color: "mono60"
1092
+ }, "background:", " "), /*#__PURE__*/_react.default.createElement(_elements.Text, {
1093
+ as: "span",
1094
+ variant: "sm"
1095
+ }, theme.effects.backdrop))));
1096
+ };
917
1097
  var ContrastRatios = exports.ContrastRatios = function ContrastRatios() {
918
1098
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_elements.Text, {
919
1099
  variant: "xxl"