@sproutsocial/seeds-react-theme 4.5.1 → 4.7.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 (18) hide show
  1. package/commonjs/dark/theme.js +12 -4
  2. package/commonjs/elevation.js +50 -0
  3. package/commonjs/light/theme.js +14 -4
  4. package/dist/theme-all.css +7 -7
  5. package/dist/theme-dark.css +4 -4
  6. package/dist/theme.css +3 -3
  7. package/dist/themes/dark/theme.scss +8 -8
  8. package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss +4 -4
  9. package/dist/themes/extendedThemes/sproutTheme/light/theme.scss +3 -3
  10. package/dist/themes/light/theme.scss +6 -6
  11. package/dist/types/dark/theme.d.ts.map +1 -1
  12. package/dist/types/elevation.d.ts +38 -0
  13. package/dist/types/elevation.d.ts.map +1 -0
  14. package/dist/types/light/theme.d.ts.map +1 -1
  15. package/lib/dark/theme.js +12 -4
  16. package/lib/elevation.js +43 -0
  17. package/lib/light/theme.js +14 -4
  18. package/package.json +2 -2
package/commonjs/dark/theme.js CHANGED
@@ -7,6 +7,7 @@ exports.shadows = exports.default = exports.colors = void 0;
7
7
  var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
8
8
  var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
9
9
  var _theme = _interopRequireDefault(require("../light/theme"));
10
+ var _elevation = require("../elevation");
10
11
  var _datavizPalette = require("./dataviz-palette");
11
12
  var _decorativePalettes = require("./decorative-palettes");
12
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -19,10 +20,15 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
19
20
  //import {theme as lightTheme} from '@src';
20
21
  //import {TypeThemeMode} from '@src/types/theme';
21
22
  var MODE = "dark";
23
+
24
+ // Identical to the light theme: the shadow geometry and the
25
+ // var(--color-elevation-base) colour reference both come from the DTCG shadow
26
+ // composites in seeds-depth. Dark mode differs only in colors.elevation.base
27
+ // below.
22
28
  var shadows = exports.shadows = {
23
- low: "".concat(_seedsDepth.default.ELEVATION_LEVEL_100, " ").concat(_seedsColor.default.COLOR_NEUTRAL_1100, "FF"),
24
- medium: "".concat(_seedsDepth.default.ELEVATION_LEVEL_300, " ").concat(_seedsColor.default.COLOR_NEUTRAL_1100, "FF"),
25
- high: "".concat(_seedsDepth.default.ELEVATION_LEVEL_400, " ").concat(_seedsColor.default.COLOR_NEUTRAL_1100, "FF")
29
+ low: _seedsDepth.default.ELEVATION_SHADOW_LOW,
30
+ medium: _seedsDepth.default.ELEVATION_SHADOW_MEDIUM,
31
+ high: _seedsDepth.default.ELEVATION_SHADOW_HIGH
26
32
  };
27
33
 
28
34
  // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
@@ -357,7 +363,9 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
357
363
  }
358
364
  },
359
365
  elevation: {
360
- base: _seedsColor.default.COLOR_NEUTRAL_1100
366
+ // Fully opaque, unlike light mode's 24% — a translucent shadow does not
367
+ // read against a dark surface. See ./../elevation.
368
+ base: (0, _elevation.withAlpha)(_seedsColor.default.COLOR_NEUTRAL_1100, _elevation.DARK_ELEVATION_ALPHA)
361
369
  },
362
370
  illustration: {
363
371
  fill: _seedsColor.default.COLOR_BLUE_400,
package/commonjs/elevation.js ADDED
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.LIGHT_ELEVATION_ALPHA = exports.DARK_ELEVATION_ALPHA = void 0;
7
+ exports.withAlpha = withAlpha;
8
+ /**
9
+ * Elevation (shadow) colour composition.
10
+ *
11
+ * Seeds draws every elevation shadow with a single themed colour,
12
+ * `--color-elevation-base`, which the shadow composites in
13
+ * `@sproutsocial/seeds-depth` reference via `var()`. The two built-in modes
14
+ * deliberately compose that colour differently:
15
+ *
16
+ * - **Light** — neutral 900 at {@link LIGHT_ELEVATION_ALPHA} (24%). A
17
+ * translucent shadow lets the surface beneath tint it, which reads as depth
18
+ * on a light background.
19
+ * - **Dark** — neutral 1100 at {@link DARK_ELEVATION_ALPHA} (100%). A
20
+ * translucent shadow is effectively invisible against a dark surface, so
21
+ * dark mode uses a fully opaque near-black instead. The opacity difference
22
+ * between the modes is intentional, not an oversight.
23
+ *
24
+ * Before DS-4624 these alphas existed only as the hex suffixes `3D` and `FF`
25
+ * concatenated onto a colour token in each theme file — undocumented, and
26
+ * impossible to tell apart from a typo. They are real numbers here instead.
27
+ */
28
+
29
+ /** Light-mode elevation shadows use a 24% translucent neutral. */
30
+ var LIGHT_ELEVATION_ALPHA = exports.LIGHT_ELEVATION_ALPHA = 0.24;
31
+
32
+ /** Dark-mode elevation shadows use a fully opaque near-black. */
33
+ var DARK_ELEVATION_ALPHA = exports.DARK_ELEVATION_ALPHA = 1;
34
+
35
+ /**
36
+ * Append an alpha channel to a 6-digit hex colour, producing the 8-digit hex
37
+ * form (`#RRGGBBAA`).
38
+ *
39
+ * Kept as an 8-digit hex rather than `color-mix()` so the emitted value stays
40
+ * a plain colour literal, and so the bytes match what Seeds shipped before
41
+ * DS-4624 exactly: `withAlpha(COLOR_NEUTRAL_900, 0.24)` is `#2733333D`, since
42
+ * `Math.round(0.24 * 255)` is `61` is `0x3d`.
43
+ *
44
+ * @param color - A 6-digit hex colour, e.g. `#273333`.
45
+ * @param alpha - Alpha as a fraction between 0 and 1.
46
+ */
47
+ function withAlpha(color, alpha) {
48
+ var channel = Math.round(alpha * 255).toString(16).toUpperCase().padStart(2, "0");
49
+ return "".concat(color).concat(channel);
50
+ }
package/commonjs/light/theme.js CHANGED
@@ -11,6 +11,7 @@ var _seedsSpace = _interopRequireDefault(require("@sproutsocial/seeds-space"));
11
11
  var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
12
12
  var _seedsMotion = _interopRequireDefault(require("@sproutsocial/seeds-motion"));
13
13
  var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"));
14
+ var _elevation = require("../elevation");
14
15
  var _literalColors = _interopRequireDefault(require("./literal-colors"));
15
16
  var _datavizPalette = require("./dataviz-palette");
16
17
  var _decorativePalettes = require("./decorative-palettes");
@@ -370,7 +371,11 @@ var colors = exports.colors = _objectSpread(_objectSpread({
370
371
  }
371
372
  },
372
373
  elevation: {
373
- base: "".concat(_seedsColor.default.COLOR_NEUTRAL_900, "3D")
374
+ // The single colour every elevation shadow is drawn with. The shadow
375
+ // composites in seeds-depth reference this as var(--color-elevation-base),
376
+ // so changing it here re-colours all three elevations. See ./../elevation
377
+ // for why light mode is translucent and dark mode is not.
378
+ base: (0, _elevation.withAlpha)(_seedsColor.default.COLOR_NEUTRAL_900, _elevation.LIGHT_ELEVATION_ALPHA)
374
379
  },
375
380
  illustration: {
376
381
  fill: _seedsColor.default.COLOR_BLUE_400,
@@ -505,10 +510,15 @@ var borderWidths = exports.borderWidths = {
505
510
  600: _seedsBorder.default.BORDER_WIDTH_600,
506
511
  700: _seedsBorder.default.BORDER_WIDTH_700
507
512
  };
513
+
514
+ // Sourced from the DTCG shadow composites in seeds-depth, which already carry
515
+ // the offset, blur and a var(--color-elevation-base) colour reference. Both
516
+ // modes use the identical strings; the light/dark difference lives entirely in
517
+ // colors.elevation.base above.
508
518
  var shadows = exports.shadows = {
509
- low: "".concat(_seedsDepth.default.ELEVATION_LEVEL_100, " ").concat(_seedsColor.default.COLOR_NEUTRAL_900, "3D"),
510
- medium: "".concat(_seedsDepth.default.ELEVATION_LEVEL_300, " ").concat(_seedsColor.default.COLOR_NEUTRAL_900, "3D"),
511
- high: "".concat(_seedsDepth.default.ELEVATION_LEVEL_400, " ").concat(_seedsColor.default.COLOR_NEUTRAL_900, "3D")
519
+ low: _seedsDepth.default.ELEVATION_SHADOW_LOW,
520
+ medium: _seedsDepth.default.ELEVATION_SHADOW_MEDIUM,
521
+ high: _seedsDepth.default.ELEVATION_SHADOW_HIGH
512
522
  };
513
523
  var easing = exports.easing = {
514
524
  ease_in: _seedsMotion.default.MOTION_EASE_IN,
package/dist/theme-all.css CHANGED
@@ -562,9 +562,9 @@
562
562
  --border-width-500: 1px;
563
563
  --border-width-600: 2px;
564
564
  --border-width-700: 3px;
565
- --shadow-low: 0px 2px 4px #2733333D;
566
- --shadow-medium: 0px 8px 16px #2733333D;
567
- --shadow-high: 0px 16px 32px #2733333D;
565
+ --shadow-low: 0px 2px 4px var(--color-elevation-base);
566
+ --shadow-medium: 0px 8px 16px var(--color-elevation-base);
567
+ --shadow-high: 0px 16px 32px var(--color-elevation-base);
568
568
  --ease-ease_in: cubic-bezier(.4, 0, .7, .2);
569
569
  --ease-ease_out: cubic-bezier(0, 0, .2, 1);
570
570
  --ease-ease_inout: cubic-bezier(.4, 0, .2, 1);
@@ -741,7 +741,7 @@
741
741
  --color-overlay-bg-inverse: color-mix(in srgb, #040404, transparent 30%);
742
742
  --color-overlay-text-base: #FFFFFF;
743
743
  --color-overlay-icon-base: #FFFFFF;
744
- --color-elevation-base: #040404;
744
+ --color-elevation-base: #040404FF;
745
745
  --color-illustration-fill: #679eff;
746
746
  --color-illustration-stroke: #f3f4f4;
747
747
  --color-network-twitter: #000000;
@@ -1137,9 +1137,9 @@
1137
1137
  --border-width-500: 1px;
1138
1138
  --border-width-600: 2px;
1139
1139
  --border-width-700: 3px;
1140
- --shadow-low: 0px 2px 4px #040404FF;
1141
- --shadow-medium: 0px 8px 16px #040404FF;
1142
- --shadow-high: 0px 16px 32px #040404FF;
1140
+ --shadow-low: 0px 2px 4px var(--color-elevation-base);
1141
+ --shadow-medium: 0px 8px 16px var(--color-elevation-base);
1142
+ --shadow-high: 0px 16px 32px var(--color-elevation-base);
1143
1143
  --ease-ease_in: cubic-bezier(.4, 0, .7, .2);
1144
1144
  --ease-ease_out: cubic-bezier(0, 0, .2, 1);
1145
1145
  --ease-ease_inout: cubic-bezier(.4, 0, .2, 1);
package/dist/theme-dark.css CHANGED
@@ -166,7 +166,7 @@
166
166
  --color-overlay-bg-inverse: color-mix(in srgb, #040404, transparent 30%);
167
167
  --color-overlay-text-base: #FFFFFF;
168
168
  --color-overlay-icon-base: #FFFFFF;
169
- --color-elevation-base: #040404;
169
+ --color-elevation-base: #040404FF;
170
170
  --color-illustration-fill: #679eff;
171
171
  --color-illustration-stroke: #f3f4f4;
172
172
  --color-network-twitter: #000000;
@@ -562,9 +562,9 @@
562
562
  --border-width-500: 1px;
563
563
  --border-width-600: 2px;
564
564
  --border-width-700: 3px;
565
- --shadow-low: 0px 2px 4px #040404FF;
566
- --shadow-medium: 0px 8px 16px #040404FF;
567
- --shadow-high: 0px 16px 32px #040404FF;
565
+ --shadow-low: 0px 2px 4px var(--color-elevation-base);
566
+ --shadow-medium: 0px 8px 16px var(--color-elevation-base);
567
+ --shadow-high: 0px 16px 32px var(--color-elevation-base);
568
568
  --ease-ease_in: cubic-bezier(.4, 0, .7, .2);
569
569
  --ease-ease_out: cubic-bezier(0, 0, .2, 1);
570
570
  --ease-ease_inout: cubic-bezier(.4, 0, .2, 1);
package/dist/theme.css CHANGED
@@ -562,9 +562,9 @@
562
562
  --border-width-500: 1px;
563
563
  --border-width-600: 2px;
564
564
  --border-width-700: 3px;
565
- --shadow-low: 0px 2px 4px #2733333D;
566
- --shadow-medium: 0px 8px 16px #2733333D;
567
- --shadow-high: 0px 16px 32px #2733333D;
565
+ --shadow-low: 0px 2px 4px var(--color-elevation-base);
566
+ --shadow-medium: 0px 8px 16px var(--color-elevation-base);
567
+ --shadow-high: 0px 16px 32px var(--color-elevation-base);
568
568
  --ease-ease_in: cubic-bezier(.4, 0, .7, .2);
569
569
  --ease-ease_out: cubic-bezier(0, 0, .2, 1);
570
570
  --ease-ease_inout: cubic-bezier(.4, 0, .2, 1);
package/dist/themes/dark/theme.scss CHANGED
@@ -313,7 +313,7 @@ $theme: (
313
313
  )
314
314
  ),
315
315
  "elevation": (
316
- "base": #040404
316
+ "base": #040404FF
317
317
  ),
318
318
  "illustration": (
319
319
  "fill": #679eff,
@@ -885,7 +885,7 @@ $theme: (
885
885
  )
886
886
  ),
887
887
  "elevation": (
888
- "base": #040404
888
+ "base": #040404FF
889
889
  ),
890
890
  "illustration": (
891
891
  "fill": #679eff,
@@ -1342,9 +1342,9 @@ $theme: (
1342
1342
  "700": 3px
1343
1343
  ),
1344
1344
  "shadows": (
1345
- "low": 0px 2px 4px #040404FF,
1346
- "medium": 0px 8px 16px #040404FF,
1347
- "high": 0px 16px 32px #040404FF
1345
+ "low": 0px 2px 4px var(--color-elevation-base),
1346
+ "medium": 0px 8px 16px var(--color-elevation-base),
1347
+ "high": 0px 16px 32px var(--color-elevation-base)
1348
1348
  ),
1349
1349
  "easing": (
1350
1350
  "ease_in": cubic-bezier(.4, 0, .7, .2),
@@ -1359,8 +1359,8 @@ $theme: (
1359
1359
  "mode": dark
1360
1360
  ),
1361
1361
  "shadows": (
1362
- "low": 0px 2px 4px #040404FF,
1363
- "medium": 0px 8px 16px #040404FF,
1364
- "high": 0px 16px 32px #040404FF
1362
+ "low": 0px 2px 4px var(--color-elevation-base),
1363
+ "medium": 0px 8px 16px var(--color-elevation-base),
1364
+ "high": 0px 16px 32px var(--color-elevation-base)
1365
1365
  )
1366
1366
  );
package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss CHANGED
@@ -367,7 +367,7 @@ $theme: (
367
367
  )
368
368
  ),
369
369
  "elevation": (
370
- "base": #040404
370
+ "base": #040404FF
371
371
  ),
372
372
  "illustration": (
373
373
  "fill": #679eff,
@@ -1060,9 +1060,9 @@ $theme: (
1060
1060
  "700": 3px
1061
1061
  ),
1062
1062
  "shadows": (
1063
- "low": 0px 2px 4px #040404FF,
1064
- "medium": 0px 8px 16px #040404FF,
1065
- "high": 0px 16px 32px #040404FF
1063
+ "low": 0px 2px 4px var(--color-elevation-base),
1064
+ "medium": 0px 8px 16px var(--color-elevation-base),
1065
+ "high": 0px 16px 32px var(--color-elevation-base)
1066
1066
  ),
1067
1067
  "easing": (
1068
1068
  "ease_in": cubic-bezier(.4, 0, .7, .2),
package/dist/themes/extendedThemes/sproutTheme/light/theme.scss CHANGED
@@ -1060,9 +1060,9 @@ $theme: (
1060
1060
  "700": 3px
1061
1061
  ),
1062
1062
  "shadows": (
1063
- "low": 0px 2px 4px #2733333D,
1064
- "medium": 0px 8px 16px #2733333D,
1065
- "high": 0px 16px 32px #2733333D
1063
+ "low": 0px 2px 4px var(--color-elevation-base),
1064
+ "medium": 0px 8px 16px var(--color-elevation-base),
1065
+ "high": 0px 16px 32px var(--color-elevation-base)
1066
1066
  ),
1067
1067
  "easing": (
1068
1068
  "ease_in": cubic-bezier(.4, 0, .7, .2),
package/dist/themes/light/theme.scss CHANGED
@@ -1353,9 +1353,9 @@ $theme: (
1353
1353
  "700": 3px
1354
1354
  ),
1355
1355
  "shadows": (
1356
- "low": 0px 2px 4px #2733333D,
1357
- "medium": 0px 8px 16px #2733333D,
1358
- "high": 0px 16px 32px #2733333D
1356
+ "low": 0px 2px 4px var(--color-elevation-base),
1357
+ "medium": 0px 8px 16px var(--color-elevation-base),
1358
+ "high": 0px 16px 32px var(--color-elevation-base)
1359
1359
  ),
1360
1360
  "easing": (
1361
1361
  "ease_in": cubic-bezier(.4, 0, .7, .2),
@@ -1426,9 +1426,9 @@ $theme: (
1426
1426
  "pill": 999999px
1427
1427
  ),
1428
1428
  "shadows": (
1429
- "low": 0px 2px 4px #2733333D,
1430
- "medium": 0px 8px 16px #2733333D,
1431
- "high": 0px 16px 32px #2733333D
1429
+ "low": 0px 2px 4px var(--color-elevation-base),
1430
+ "medium": 0px 8px 16px var(--color-elevation-base),
1431
+ "high": 0px 16px 32px var(--color-elevation-base)
1432
1432
  ),
1433
1433
  "space": (
1434
1434
  "0": 0px,
package/dist/types/dark/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/dark/theme.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2MrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAjVT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA2MrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GtD,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/dark/theme.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2MrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAnVT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA2MrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GtD,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/dist/types/elevation.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Elevation (shadow) colour composition.
3
+ *
4
+ * Seeds draws every elevation shadow with a single themed colour,
5
+ * `--color-elevation-base`, which the shadow composites in
6
+ * `@sproutsocial/seeds-depth` reference via `var()`. The two built-in modes
7
+ * deliberately compose that colour differently:
8
+ *
9
+ * - **Light** — neutral 900 at {@link LIGHT_ELEVATION_ALPHA} (24%). A
10
+ * translucent shadow lets the surface beneath tint it, which reads as depth
11
+ * on a light background.
12
+ * - **Dark** — neutral 1100 at {@link DARK_ELEVATION_ALPHA} (100%). A
13
+ * translucent shadow is effectively invisible against a dark surface, so
14
+ * dark mode uses a fully opaque near-black instead. The opacity difference
15
+ * between the modes is intentional, not an oversight.
16
+ *
17
+ * Before DS-4624 these alphas existed only as the hex suffixes `3D` and `FF`
18
+ * concatenated onto a colour token in each theme file — undocumented, and
19
+ * impossible to tell apart from a typo. They are real numbers here instead.
20
+ */
21
+ /** Light-mode elevation shadows use a 24% translucent neutral. */
22
+ export declare const LIGHT_ELEVATION_ALPHA = 0.24;
23
+ /** Dark-mode elevation shadows use a fully opaque near-black. */
24
+ export declare const DARK_ELEVATION_ALPHA = 1;
25
+ /**
26
+ * Append an alpha channel to a 6-digit hex colour, producing the 8-digit hex
27
+ * form (`#RRGGBBAA`).
28
+ *
29
+ * Kept as an 8-digit hex rather than `color-mix()` so the emitted value stays
30
+ * a plain colour literal, and so the bytes match what Seeds shipped before
31
+ * DS-4624 exactly: `withAlpha(COLOR_NEUTRAL_900, 0.24)` is `#2733333D`, since
32
+ * `Math.round(0.24 * 255)` is `61` is `0x3d`.
33
+ *
34
+ * @param color - A 6-digit hex colour, e.g. `#273333`.
35
+ * @param alpha - Alpha as a fraction between 0 and 1.
36
+ */
37
+ export declare function withAlpha(color: string, alpha: number): string;
38
+ //# sourceMappingURL=elevation.d.ts.map
package/dist/types/elevation.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/elevation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,kEAAkE;AAClE,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAE1C,iEAAiE;AACjE,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAO9D"}
package/dist/types/light/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/light/theme.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,WAAW;;;;;CAGvB,CAAC;AAMF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAcb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkNrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ItD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAatB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,eAAO,MAAM,UAAU,QAA+B,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA7eL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAkNrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RtD,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/light/theme.ts"],"names":[],"mappings":"AAmCA,eAAO,MAAM,WAAW;;;;;CAGvB,CAAC;AAMF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAcb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkNrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJtD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAatB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,eAAO,MAAM,UAAU,QAA+B,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAMF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBArfL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAkNrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqStD,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/lib/dark/theme.js CHANGED
@@ -11,13 +11,19 @@ import DEPTH from "@sproutsocial/seeds-depth";
11
11
  //import {theme as lightTheme} from '@src';
12
12
  //import {TypeThemeMode} from '@src/types/theme';
13
13
  import lightTheme from "../light/theme";
14
+ import { DARK_ELEVATION_ALPHA, withAlpha } from "../elevation";
14
15
  import { datavizPalette } from "./dataviz-palette";
15
16
  import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
16
17
  var MODE = "dark";
18
+
19
+ // Identical to the light theme: the shadow geometry and the
20
+ // var(--color-elevation-base) colour reference both come from the DTCG shadow
21
+ // composites in seeds-depth. Dark mode differs only in colors.elevation.base
22
+ // below.
17
23
  export var shadows = {
18
- low: "".concat(DEPTH.ELEVATION_LEVEL_100, " ").concat(COLORS.COLOR_NEUTRAL_1100, "FF"),
19
- medium: "".concat(DEPTH.ELEVATION_LEVEL_300, " ").concat(COLORS.COLOR_NEUTRAL_1100, "FF"),
20
- high: "".concat(DEPTH.ELEVATION_LEVEL_400, " ").concat(COLORS.COLOR_NEUTRAL_1100, "FF")
24
+ low: DEPTH.ELEVATION_SHADOW_LOW,
25
+ medium: DEPTH.ELEVATION_SHADOW_MEDIUM,
26
+ high: DEPTH.ELEVATION_SHADOW_HIGH
21
27
  };
22
28
 
23
29
  // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
@@ -352,7 +358,9 @@ export var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
352
358
  }
353
359
  },
354
360
  elevation: {
355
- base: COLORS.COLOR_NEUTRAL_1100
361
+ // Fully opaque, unlike light mode's 24% — a translucent shadow does not
362
+ // read against a dark surface. See ./../elevation.
363
+ base: withAlpha(COLORS.COLOR_NEUTRAL_1100, DARK_ELEVATION_ALPHA)
356
364
  },
357
365
  illustration: {
358
366
  fill: COLORS.COLOR_BLUE_400,
package/lib/elevation.js ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Elevation (shadow) colour composition.
3
+ *
4
+ * Seeds draws every elevation shadow with a single themed colour,
5
+ * `--color-elevation-base`, which the shadow composites in
6
+ * `@sproutsocial/seeds-depth` reference via `var()`. The two built-in modes
7
+ * deliberately compose that colour differently:
8
+ *
9
+ * - **Light** — neutral 900 at {@link LIGHT_ELEVATION_ALPHA} (24%). A
10
+ * translucent shadow lets the surface beneath tint it, which reads as depth
11
+ * on a light background.
12
+ * - **Dark** — neutral 1100 at {@link DARK_ELEVATION_ALPHA} (100%). A
13
+ * translucent shadow is effectively invisible against a dark surface, so
14
+ * dark mode uses a fully opaque near-black instead. The opacity difference
15
+ * between the modes is intentional, not an oversight.
16
+ *
17
+ * Before DS-4624 these alphas existed only as the hex suffixes `3D` and `FF`
18
+ * concatenated onto a colour token in each theme file — undocumented, and
19
+ * impossible to tell apart from a typo. They are real numbers here instead.
20
+ */
21
+
22
+ /** Light-mode elevation shadows use a 24% translucent neutral. */
23
+ export var LIGHT_ELEVATION_ALPHA = 0.24;
24
+
25
+ /** Dark-mode elevation shadows use a fully opaque near-black. */
26
+ export var DARK_ELEVATION_ALPHA = 1;
27
+
28
+ /**
29
+ * Append an alpha channel to a 6-digit hex colour, producing the 8-digit hex
30
+ * form (`#RRGGBBAA`).
31
+ *
32
+ * Kept as an 8-digit hex rather than `color-mix()` so the emitted value stays
33
+ * a plain colour literal, and so the bytes match what Seeds shipped before
34
+ * DS-4624 exactly: `withAlpha(COLOR_NEUTRAL_900, 0.24)` is `#2733333D`, since
35
+ * `Math.round(0.24 * 255)` is `61` is `0x3d`.
36
+ *
37
+ * @param color - A 6-digit hex colour, e.g. `#273333`.
38
+ * @param alpha - Alpha as a fraction between 0 and 1.
39
+ */
40
+ export function withAlpha(color, alpha) {
41
+ var channel = Math.round(alpha * 255).toString(16).toUpperCase().padStart(2, "0");
42
+ return "".concat(color).concat(channel);
43
+ }
package/lib/light/theme.js CHANGED
@@ -15,6 +15,7 @@ import BORDER from "@sproutsocial/seeds-border";
15
15
  // json-to-scss is not working with the alias right now
16
16
  //import {TypeThemeMode} from '@src/types/theme';
17
17
 
18
+ import { LIGHT_ELEVATION_ALPHA, withAlpha } from "../elevation";
18
19
  import literalColors from "./literal-colors";
19
20
  import { datavizPalette } from "./dataviz-palette";
20
21
  import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
@@ -365,7 +366,11 @@ export var colors = _objectSpread(_objectSpread({
365
366
  }
366
367
  },
367
368
  elevation: {
368
- base: "".concat(COLORS.COLOR_NEUTRAL_900, "3D")
369
+ // The single colour every elevation shadow is drawn with. The shadow
370
+ // composites in seeds-depth reference this as var(--color-elevation-base),
371
+ // so changing it here re-colours all three elevations. See ./../elevation
372
+ // for why light mode is translucent and dark mode is not.
373
+ base: withAlpha(COLORS.COLOR_NEUTRAL_900, LIGHT_ELEVATION_ALPHA)
369
374
  },
370
375
  illustration: {
371
376
  fill: COLORS.COLOR_BLUE_400,
@@ -500,10 +505,15 @@ export var borderWidths = {
500
505
  600: BORDER.BORDER_WIDTH_600,
501
506
  700: BORDER.BORDER_WIDTH_700
502
507
  };
508
+
509
+ // Sourced from the DTCG shadow composites in seeds-depth, which already carry
510
+ // the offset, blur and a var(--color-elevation-base) colour reference. Both
511
+ // modes use the identical strings; the light/dark difference lives entirely in
512
+ // colors.elevation.base above.
503
513
  export var shadows = {
504
- low: "".concat(DEPTH.ELEVATION_LEVEL_100, " ").concat(COLORS.COLOR_NEUTRAL_900, "3D"),
505
- medium: "".concat(DEPTH.ELEVATION_LEVEL_300, " ").concat(COLORS.COLOR_NEUTRAL_900, "3D"),
506
- high: "".concat(DEPTH.ELEVATION_LEVEL_400, " ").concat(COLORS.COLOR_NEUTRAL_900, "3D")
514
+ low: DEPTH.ELEVATION_SHADOW_LOW,
515
+ medium: DEPTH.ELEVATION_SHADOW_MEDIUM,
516
+ high: DEPTH.ELEVATION_SHADOW_HIGH
507
517
  };
508
518
  export var easing = {
509
519
  ease_in: MOTION.MOTION_EASE_IN,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-theme",
3
- "version": "4.5.1",
3
+ "version": "4.7.0",
4
4
  "description": "Seeds Theme",
5
5
  "main": "commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -44,7 +44,7 @@
44
44
  "dependencies": {
45
45
  "@sproutsocial/seeds-border": "^1.7.1",
46
46
  "@sproutsocial/seeds-color": "^2.3.0",
47
- "@sproutsocial/seeds-depth": "^3.4.1",
47
+ "@sproutsocial/seeds-depth": "^3.6.0",
48
48
  "@sproutsocial/seeds-motion": "^1.8.2",
49
49
  "@sproutsocial/seeds-networkcolor": "^2.22.0",
50
50
  "@sproutsocial/seeds-space": "^0.8.1",