@stainless-api/ui-primitives 0.1.0-beta.0 → 0.1.0-beta.10

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 (20) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/package.json +1 -1
  3. package/src/components/Accordion.tsx +41 -0
  4. package/src/components/Button.tsx +1 -0
  5. package/src/components/DropdownButton.tsx +24 -13
  6. package/src/components/accordion.css +145 -0
  7. package/src/components/button.css +165 -135
  8. package/src/components/callout.css +57 -59
  9. package/src/components/dropdown-button.css +33 -31
  10. package/src/index.ts +1 -1
  11. package/src/styles/layout.css +1 -1
  12. package/src/styles/scales.css +1 -1
  13. package/src/styles/starlight-compat.css +142 -107
  14. package/src/styles/swatches.css +2 -2
  15. package/src/styles/theme.css +2 -2
  16. package/src/styles/typography.css +117 -144
  17. package/src/styles.css +1 -1
  18. package/tsconfig.json +2 -6
  19. package/src/components/DetailsGroup.tsx +0 -17
  20. package/src/components/details.css +0 -126
package/src/components/details.css DELETED
@@ -1,126 +0,0 @@
1
- /* revert starlight details styles */
2
- @layer starlight.content {
3
- /* artificially increase specificity to outcompete selectors in the same layer whose styles we want to revert */
4
- .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
5
- details,
6
- summary,
7
- summary::before,
8
- summary::marker {
9
- all: revert-layer;
10
- }
11
- }
12
- }
13
-
14
- @layer stl-ui {
15
- @layer typography {
16
- .stl-ui-prose {
17
- details {
18
- --stl-ui-details-padding: 12px;
19
- --stl-ui-details-content-padding-bottom: 4px;
20
- --stl-ui-details-marker-size: 1em;
21
- --stl-ui-details-marker-margin: calc((1lh - var(--stl-ui-details-marker-size)) / 2);
22
- --stl-ui-details-row-gap: 8px;
23
- --stl-ui-details-summary-column-gap: 8px;
24
- --stl-ui-details-border-radius: var(--stl-ui-layout-border-radius);
25
- /* left inset to make content line up with summary content (after chevron) */
26
- --stl-ui--internal--details-padding-start: calc(
27
- var(--stl-ui-details-padding)
28
- + var(--stl-ui-details-marker-size)
29
- + var(--stl-ui-details-marker-margin) * 2
30
- + var(--stl-ui-details-summary-column-gap)
31
- );
32
-
33
- background-color: var(--stl-ui-card-background);
34
- border: 1px solid var(--stl-ui-border);
35
- border-radius: var(--stl-ui-details-border-radius);
36
- font-size: var(--stl-ui-typography-text-body);
37
-
38
- padding: var(--stl-ui-details-padding);
39
- /* indent content to line up with left edge of summary content */
40
- padding-inline-start: var(--stl-ui--internal--details-padding-start);
41
-
42
- summary {
43
- display: block;
44
- list-style: none;
45
-
46
- /* summary extends to the edges of the element in order to increase click target */
47
- padding: var(--stl-ui-details-padding);
48
- padding-inline-start: var(--stl-ui--internal--details-padding-start);
49
- margin: calc(-1 * var(--stl-ui-details-padding));
50
- margin-inline-start: calc(-1 * var(--stl-ui--internal--details-padding-start));
51
-
52
- cursor: pointer;
53
- font-weight: 500;
54
-
55
- border-radius: var(--stl-ui-details-border-radius);
56
-
57
- &::before {
58
- content: '';
59
- width: var(--stl-ui-details-marker-size);
60
- height: var(--stl-ui-details-marker-size);
61
- margin: var(--stl-ui-details-marker-margin);
62
- background-color: currentColor;
63
- display: block;
64
- position: absolute;
65
- --stl-ui-details--internal--marker-width: calc(var(--stl-ui-details-marker-size) + var(--stl-ui-details-marker-margin) * 2);
66
- --stl-ui-details--internal--summary-marker-transform: translateX(calc(-1 * var(--stl-ui-details--internal--marker-width) - var(--stl-ui-details-summary-column-gap)));
67
- transform: var(--stl-ui-details--internal--summary-marker-transform);
68
-
69
- --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
70
- mask-image: var(--lucide-chevron-right);
71
- mask-size: contain;
72
- mask-repeat: no-repeat;
73
-
74
- transition: transform 0.1s ease-out;
75
- }
76
-
77
- & > :first-child {
78
- margin-top: 0;
79
- }
80
- }
81
-
82
- &[open] {
83
- padding-bottom: calc(var(--stl-ui-details-padding) + var(--stl-ui-details-content-padding-bottom));
84
-
85
- summary {
86
- /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
87
- --stl-ui--internal--summary-padding-bottom: min(var(--stl-ui-details-padding), var(--stl-ui-details-row-gap));
88
- padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
89
- margin-bottom: calc(var(--stl-ui-details-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
90
- border-bottom-left-radius: 0;
91
- border-bottom-right-radius: 0;
92
-
93
- &::before {
94
- transform: var(--stl-ui-details--internal--summary-marker-transform) rotate(90deg);
95
- }
96
- }
97
- }
98
-
99
- summary + * {
100
- margin-top: 0;
101
- }
102
- }
103
- }
104
-
105
- .stl-ui-details-group {
106
- & > details:has(+ details) {
107
- border-bottom-left-radius: 0;
108
- border-bottom-right-radius: 0;
109
- summary {
110
- border-bottom-left-radius: 0;
111
- border-bottom-right-radius: 0;
112
- }
113
- }
114
- & > details + details {
115
- margin-top: 0;
116
- border-top: 0;
117
- border-top-left-radius: 0;
118
- border-top-right-radius: 0;
119
- summary {
120
- border-top-left-radius: 0;
121
- border-top-right-radius: 0;
122
- }
123
- }
124
- }
125
- }
126
- }