@sproutsocial/racine 31.7.20 → 31.7.22

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,44 @@
1
1
  # Change Log
2
2
 
3
+ ## 31.7.22
4
+
5
+ ### Patch Changes
6
+
7
+ - d9e8499: Republish to reconcile CodeArtifact with npmjs. A release workflow bug published these
8
+ versions off feature commits before the `Version Packages` merge, so CodeArtifact and
9
+ npmjs ended up holding different code under the same version number:
10
+
11
+ - `racine@31.7.21` on CodeArtifact depends on `seeds-react-card@^1.1.53`,
12
+ `seeds-react-modal@^2.5.36`, and `seeds-react-panel@^1.1.4`, so it pulls in none of the
13
+ card, modal, or panel work that shipped in that release. npmjs has `^1.1.54`, `^2.5.37`,
14
+ and `^1.2.0`.
15
+ - `seeds-react-peek-in@0.5.0` on CodeArtifact has the same stale modal and panel ranges.
16
+ - `seeds-react-data-viz@0.27.0` on CodeArtifact is missing the `WordCloud` normal
17
+ font-weight fix.
18
+
19
+ No source changes. These bumps exist so the next release ships a correct build to
20
+ CodeArtifact under a version number that was never published from the wrong commit.
21
+
22
+ - Updated dependencies [bb491e7]
23
+ - Updated dependencies [d9e8499]
24
+ - @sproutsocial/seeds-react-content-block@0.6.0
25
+ - @sproutsocial/seeds-react-content-header@0.3.0
26
+ - @sproutsocial/seeds-react-peek-in@0.5.1
27
+ - @sproutsocial/seeds-react-accordion@0.4.64
28
+
29
+ ## 31.7.21
30
+
31
+ ### Patch Changes
32
+
33
+ - Updated dependencies [d629d0c]
34
+ - Updated dependencies [29aad4a]
35
+ - Updated dependencies [a69cfb1]
36
+ - Updated dependencies [5e01410]
37
+ - @sproutsocial/seeds-react-card@1.1.54
38
+ - @sproutsocial/seeds-react-modal@2.5.37
39
+ - @sproutsocial/seeds-react-panel@1.2.0
40
+ - @sproutsocial/seeds-react-peek-in@0.5.0
41
+
3
42
  ## 31.7.20
4
43
 
5
44
  ### Patch Changes
@@ -828,6 +828,160 @@
828
828
 
829
829
  /* end @layer components */
830
830
 
831
+ /* --- seeds-react-card --- */
832
+ /**
833
+ * Seeds Card component classes
834
+ * Use these instead of writing out individual Tailwind utility classes.
835
+ *
836
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
837
+ * CSS variable definitions and dark mode support.
838
+ *
839
+ * Usage:
840
+ * <div class="seeds-card seeds-card-interactive" style="--seeds-card-hover-shadow: var(--shadow-low)">…</div>
841
+ *
842
+ * The per-elevation hover shadow is driven by the --seeds-card-hover-shadow
843
+ * custom property set inline by the component from its `elevation` prop.
844
+ *
845
+ * Rules live in `@layer components` so that consumer Tailwind utilities
846
+ * (e.g. mx-200, p-300, ml-300) win in the cascade and can override these
847
+ * component styles, rather than tying/beating them on specificity.
848
+ */
849
+
850
+ @layer components {
851
+ .seeds-card {
852
+ position: relative;
853
+ display: flex;
854
+ flex-direction: column;
855
+ box-sizing: border-box;
856
+ margin: 0;
857
+ background: var(--color-container-bg-base);
858
+ /* borderWidths[500] resolves to 1px; no --border-width var is emitted. */
859
+ border: 1px solid var(--color-container-border-base);
860
+ padding: var(--space-400);
861
+ border-radius: var(--radius-outer);
862
+ transition: box-shadow var(--duration-medium),
863
+ border var(--duration-medium);
864
+ }
865
+
866
+ /* Compositional cards (using CardHeader/Content/Footer) drop their own padding. */
867
+ .seeds-card-compositional {
868
+ padding: 0;
869
+ }
870
+
871
+ .seeds-card-interactive {
872
+ cursor: pointer;
873
+ }
874
+
875
+ .seeds-card-interactive:hover {
876
+ box-shadow: var(--seeds-card-hover-shadow);
877
+ }
878
+
879
+ /* focusRing mixin: button/checkbox cards focus directly; link cards show the
880
+ ring via :focus-within when their inner link is focused. The :focus-within
881
+ ring is scoped to link-role cards only (matching StyledCard's $isRoleLink
882
+ gating), so button/checkbox cards do not show the ring on descendant focus. */
883
+ .seeds-card:focus,
884
+ .seeds-card-link-role:focus-within {
885
+ box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
886
+ 0 0px 0px 4px
887
+ color-mix(
888
+ in srgb,
889
+ var(--color-button-primary-bg-base),
890
+ transparent 70%
891
+ );
892
+ outline: none;
893
+ }
894
+
895
+ .seeds-card::-moz-focus-inner {
896
+ border: 0;
897
+ }
898
+
899
+ /* The inner link resets its own focus styling; the card shows the ring. */
900
+ .seeds-card-link-role:focus-within .seeds-card-link:focus {
901
+ border: none;
902
+ box-shadow: none;
903
+ outline: none;
904
+ }
905
+
906
+ /* disabled mixin */
907
+ .seeds-card-disabled {
908
+ opacity: 0.4;
909
+ pointer-events: none;
910
+ }
911
+
912
+ .seeds-card-selected {
913
+ border: 1px solid var(--color-container-border-selected);
914
+ }
915
+
916
+ /* Sub-components ------------------------------------------------------ */
917
+
918
+ .seeds-card-content {
919
+ display: flex;
920
+ flex-direction: column;
921
+ padding: var(--space-400);
922
+ box-sizing: border-box;
923
+ }
924
+
925
+ .seeds-card-header {
926
+ display: flex;
927
+ flex-direction: row;
928
+ padding: var(--space-400);
929
+ box-sizing: border-box;
930
+ border-bottom: 1px solid var(--color-container-border-base);
931
+ border-top-left-radius: var(--radius-inner);
932
+ border-top-right-radius: var(--radius-inner);
933
+ }
934
+
935
+ .seeds-card-footer {
936
+ display: flex;
937
+ flex-direction: row;
938
+ padding: var(--space-400);
939
+ box-sizing: border-box;
940
+ border-top: 1px solid var(--color-container-border-base);
941
+ border-bottom-left-radius: var(--radius-inner);
942
+ border-bottom-right-radius: var(--radius-inner);
943
+ }
944
+
945
+ /* Link typography: font-family + bold + headline color + type scale 400. */
946
+ .seeds-card-link {
947
+ font-family: var(--font-family);
948
+ font-weight: var(--font-weight-bold);
949
+ color: var(--color-text-headline);
950
+ font-size: var(--font-size-400);
951
+ line-height: var(--line-height-400);
952
+ }
953
+
954
+ /* Selected-icon overlay (positioned top-right, fades in when selected). */
955
+ .seeds-card-selected-icon-wrapper {
956
+ display: flex;
957
+ align-items: center;
958
+ justify-content: center;
959
+ position: absolute;
960
+ top: -8px;
961
+ right: -8px;
962
+ }
963
+
964
+ .seeds-card-selected-icon {
965
+ border-radius: 50%;
966
+ background: var(--color-container-bg-base);
967
+ opacity: 0;
968
+ transition: opacity var(--duration-medium);
969
+ }
970
+
971
+ .seeds-card-selected-icon-visible {
972
+ opacity: 1;
973
+ }
974
+
975
+ /* Affordance icon slides right on card hover (mirrors StyledCardAffordance). */
976
+ .seeds-card-affordance {
977
+ transition: var(--duration-medium);
978
+ }
979
+
980
+ .seeds-card:hover .seeds-card-affordance {
981
+ transform: translateX(var(--space-200));
982
+ }
983
+ }
984
+
831
985
  /* --- seeds-react-character-counter --- */
832
986
  /**
833
987
  * Seeds CharacterCounter component classes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "31.7.20",
3
+ "version": "31.7.22",
4
4
  "license": "MIT",
5
5
  "engines": {
6
6
  "node": ">=18"
@@ -73,22 +73,22 @@
73
73
  },
74
74
  "dependencies": {
75
75
  "@size-limit/file": "^11.1.6",
76
- "@sproutsocial/seeds-react-accordion": "^0.4.63",
76
+ "@sproutsocial/seeds-react-accordion": "^0.4.64",
77
77
  "@sproutsocial/seeds-react-avatar": "^1.1.28",
78
78
  "@sproutsocial/seeds-react-badge": "^2.0.45",
79
79
  "@sproutsocial/seeds-react-banner": "^1.1.35",
80
80
  "@sproutsocial/seeds-react-box": "^1.1.31",
81
81
  "@sproutsocial/seeds-react-breadcrumb": "^1.1.17",
82
82
  "@sproutsocial/seeds-react-button": "^2.3.8",
83
- "@sproutsocial/seeds-react-card": "^1.1.53",
83
+ "@sproutsocial/seeds-react-card": "^1.1.54",
84
84
  "@sproutsocial/seeds-react-character-counter": "^1.0.10",
85
85
  "@sproutsocial/seeds-react-chart-legend": "^1.0.52",
86
86
  "@sproutsocial/seeds-react-chat-bubble": "^0.2.7",
87
87
  "@sproutsocial/seeds-react-checkbox": "^1.3.53",
88
88
  "@sproutsocial/seeds-react-collapsible": "^2.0.1",
89
89
  "@sproutsocial/seeds-react-container": "^0.3.25",
90
- "@sproutsocial/seeds-react-content-block": "^0.5.28",
91
- "@sproutsocial/seeds-react-content-header": "^0.2.31",
90
+ "@sproutsocial/seeds-react-content-block": "^0.6.0",
91
+ "@sproutsocial/seeds-react-content-header": "^0.3.0",
92
92
  "@sproutsocial/seeds-react-data-table": "^2.6.37",
93
93
  "@sproutsocial/seeds-react-datepicker": "^1.0.50",
94
94
  "@sproutsocial/seeds-react-drawer": "^2.2.21",
@@ -110,12 +110,12 @@
110
110
  "@sproutsocial/seeds-react-loader-button": "^1.0.59",
111
111
  "@sproutsocial/seeds-react-message": "^1.0.63",
112
112
  "@sproutsocial/seeds-react-mixins": "^4.3.15",
113
- "@sproutsocial/seeds-react-modal": "^2.5.36",
113
+ "@sproutsocial/seeds-react-modal": "^2.5.37",
114
114
  "@sproutsocial/seeds-react-narrative-kit": "^0.6.6",
115
115
  "@sproutsocial/seeds-react-numeral": "^1.0.59",
116
116
  "@sproutsocial/seeds-react-pagination": "^0.1.32",
117
- "@sproutsocial/seeds-react-panel": "^1.1.4",
118
- "@sproutsocial/seeds-react-peek-in": "^0.4.4",
117
+ "@sproutsocial/seeds-react-panel": "^1.2.0",
118
+ "@sproutsocial/seeds-react-peek-in": "^0.5.1",
119
119
  "@sproutsocial/seeds-react-partner-logo": "^1.7.23",
120
120
  "@sproutsocial/seeds-react-popout": "^2.5.22",
121
121
  "@sproutsocial/seeds-react-portal": "^1.2.0",