Skip to content

Commit 51506b5

Browse files
castastrophecastastrophe
committed
fix: storybook local aliases; deprecated imports
1 parent 7d35905 commit 51506b5

File tree

29 files changed

+220
-377
lines changed

29 files changed

+220
-377
lines changed

‎.github/workflows/build.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ jobs:
120120
## --- BUILD --- ##
121121
- name: Build components & ui-icons
122122
shell: bash
123-
run: yarn builder tag:component,ui-icons
123+
run: yarn ci
124124

125125
## --- UPLOAD (only ubuntu-latest at the moment) --- ##
126126
- name: Upload compiled assets & NX performance profile

‎.github/workflows/compare-results.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ jobs:
197197
- name: Build
198198
if: ${{ steps.download.outcome != 'success' }}
199199
shell: bash
200-
run: yarn builder tag:component,ui-icons
200+
run: yarn ci
201201

202202
- name: Upload compiled assets
203203
if: ${{ steps.download.outcome != 'success' }}

‎.storybook/assets/base.css

Lines changed: 25 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -1,204 +1,35 @@
1+
/*!
2+
* Copyright 2023 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
114
body {
215
margin: 0;
3-
font-size: 10px;
4-
}
5-
6-
nav .spectrum-Site-logo {
7-
margin-inline-end: var(--spectrum-global-dimension-size-200);
8-
color: #fa0f00;
9-
block-size: 32px;
10-
}
11-
12-
.spectrum--large nav .spectrum-Site-logo {
13-
block-size: 40px;
14-
}
15-
16-
.docblock-argstable-head {
17-
display: none;
18-
}
19-
20-
/* .docblock-argstable-body {
21-
display: grid;
22-
grid-template-columns: minmax(25%, 200px) minmax(75%, 1fr);
23-
} */
24-
25-
.docblock-argstable-body tr td {
26-
letter-spacing: unset;
27-
font-size: 11px;
28-
color: rgb(34, 34, 34);
29-
background-color: rgb(255, 255, 255);
30-
}
31-
32-
.docblock-argstable-body td > span:has(select),
33-
.docblock-argstable-body td textarea {
34-
max-width: 280px !important;
35-
}
36-
37-
#storybook-explorer-tree {
38-
background-color: rgb(255, 255, 255) !important;
39-
}
16+
background-color: var(--spectrum-background-layer-2-color);
17+
color: var(--spectrum-neutral-content-color-default);
4018

41-
#storybook-explorer-tree > div {
42-
margin-inline: 0;
19+
font-family: var(--spectrum-sans-font-family-stack);
20+
font-style: var(--spectrum-default-font-style);
21+
font-size: 16px;
4322
}
4423

45-
button.sidebar-item {
46-
font-weight: 700 !important;
47-
}
24+
.spectrum {
25+
background-color: var(--spectrum-background-layer-1-color);
4826

49-
.sidebar-item {
50-
color: rgb(34, 34, 34) !important;
51-
font-weight: 400 !important;
52-
font-size: 14px !important;
53-
line-height: 1.4em !important;
54-
height: 32px !important;
55-
border-radius: 4px !important;
56-
padding-inline-start: 24px !important;
57-
padding-inline-end: 12px !important;
58-
padding-block: 4px !important;
59-
margin-block: 4px !important;
27+
/* @todo: add back the text color and update VRTs */
28+
/* color: var(--spectrum-neutral-content-color-default); */
29+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
6030
}
6131

62-
input,
63-
textarea,
64-
select {
65-
border-radius: 4px !important;
66-
}
67-
68-
#storybook-explorer-searchfield {
69-
padding: 3px 12px 5px 35px !important;
70-
}
71-
72-
input:focus,
73-
textarea:focus,
74-
select:focus,
75-
#storybook-explorer-searchfield:focus {
76-
border-color: rgb(2, 101, 220) !important;
77-
box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
78-
}
79-
80-
.sidebar-item svg {
32+
/* Hide the SVG elements that only include references */
33+
svg:has(symbol):not(:has(use)) {
8134
display: none;
82-
color: rgb(34, 34, 34) !important;
83-
}
84-
85-
[role="main"]
86-
> div
87-
> div:first-child
88-
.os-content
89-
> div
90-
> :is(div, div > div:has(a)) {
91-
gap: 4px;
92-
}
93-
94-
[role="main"] > div > div:first-child .os-content > div > div > div:has(a) {
95-
display: flex;
96-
}
97-
98-
/* [role="main"] > div > div:first-child .os-content > div > div > div:not(:has(a)) button */
99-
[role="main"]
100-
> div
101-
> div:first-child
102-
.os-content
103-
> div
104-
> div
105-
:is(button, a:not(:has(button))) {
106-
min-inline-size: 32px;
107-
border-radius: 4px;
108-
109-
padding-inline: 11px;
110-
padding-block: 4px;
111-
margin: 0;
112-
113-
/* background-color: transparent !important; */
114-
border-color: transparent !important;
115-
color: rgb(34, 34, 34) !important;
116-
font-weight: 300;
117-
118-
transition: background 130ms ease-out, border-color 130ms ease-out,
119-
color 130ms ease-out, box-shadow 130ms ease-out;
120-
121-
line-height: 1.3;
122-
}
123-
124-
[role="main"] > div > div:first-child .os-content > div > div > * {
125-
margin-top: 0 !important;
126-
}
127-
128-
[role="main"] > div > div:first-child .os-content > div > div > div > a {
129-
display: flex;
130-
align-items: flex-end;
131-
justify-content: flex-end;
132-
}
133-
134-
/* .os-content > div > div > div > a > button {
135-
height: 100%;
136-
} */
137-
138-
/* Indicates a button with a dropdown menu */
139-
[role="main"]
140-
> div
141-
> div:first-child
142-
.os-content
143-
> div
144-
> div
145-
> div:not(:has(a))
146-
button {
147-
position: relative;
148-
background-color: rgb(253, 253, 253) !important;
149-
border: 1px solid rgb(144, 144, 144) !important;
150-
}
151-
152-
/* Indicates a button with a dropdown menu */
153-
/* [role="main"] > div > div:first-child .os-content > div > div :is(button,a:not(:has(button)),span) */
154-
[role="main"]
155-
> div
156-
> div:first-child
157-
.os-content
158-
> div
159-
> div
160-
> div:not(:has(a))
161-
button::after {
162-
content: "◢";
163-
position: absolute;
164-
bottom: -3px;
165-
right: -1px;
166-
display: inline-block;
167-
transform: scale(0.5);
168-
color: rgb(177, 177, 177);
169-
}
170-
171-
[role="main"]
172-
> div
173-
> div:first-child
174-
.os-content
175-
> div
176-
> div
177-
> div:not(:has(a))
178-
button:hover {
179-
background-color: rgb(242, 242, 242) !important;
180-
}
181-
182-
[role="main"] > div > div:first-child .os-content > div > div > * {
183-
margin-inline: 0 !important;
184-
}
185-
186-
[role="main"]
187-
> div
188-
> div:first-child
189-
.os-content
190-
> div
191-
> div
192-
:is(button, a:not(:has(button)), span) {
193-
height: 32px;
194-
}
195-
196-
[role="main"]
197-
> div
198-
> div:first-child
199-
.os-content
200-
> div
201-
> div
202-
:is(button:hover, a:hover:not(:has(button))) {
203-
background-color: rgb(230, 230, 230) !important;
20435
}

‎.storybook/assets/index.css

Lines changed: 73 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,67 @@
1+
/*!
2+
* Copyright 2023 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
114
body {
2-
font-family: var(--spectrum-sans-font-family-stack);
3-
background-color: var(
4-
--spectrum-alias-background-color-default,
5-
var(--spectrum-global-color-gray-100)
6-
);
7-
color: var(
8-
--spectrum-alias-text-color-default,
9-
var(--spectrum-global-color-gray-900)
10-
);
11-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
15+
--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro",
16+
-apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu,
17+
"Trebuchet MS", "Lucida Grande", sans-serif;
18+
--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro",
19+
-apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu,
20+
"Trebuchet MS", "Lucida Grande", sans-serif;
21+
22+
--spectrum-font-family: var(--spectrum-sans-font-family-stack);
23+
--spectrum-font-style: var(--spectrum-default-font-style);
24+
--spectrum-font-size: var(--spectrum-font-size-100);
25+
26+
margin: 0;
27+
background-color: var(--spectrum-background-layer-2-color);
28+
color: var(--spectrum-neutral-content-color-default);
29+
30+
font-family: var(--spectrum-font-family);
31+
font-style: var(--spectrum-font-style);
32+
font-size: var(--spectrum-font-size);
33+
}
34+
35+
body:lang(ar) {
36+
font-family: var(--spectrum-font-family-ar);
37+
}
38+
39+
body:lang(he) {
40+
font-family: var(--spectrum-font-family-he);
41+
}
42+
43+
/* Hide the SVG elements that only include references */
44+
svg:has(symbol):not(:has(use)) {
45+
display: none;
1246
}
1347

1448
.sidebar-header > div:has(img, a) {
15-
margin-right: 8px;
49+
margin-inline-end: 8px;
1650
}
1751

1852
.sidebar-header > div img {
19-
height: auto;
20-
width: 100%;
53+
block-size: auto;
54+
inline-size: 100%;
55+
}
56+
57+
nav .spectrum-Site-logo {
58+
margin-inline-end: 16px;
59+
color: #fa0f00;
60+
block-size: 32px;
61+
}
62+
63+
.spectrum--large nav .spectrum-Site-logo {
64+
block-size: 40px;
2165
}
2266

2367
.docblock-argstable-body tr td {
@@ -29,10 +73,7 @@ body {
2973

3074
.docblock-argstable-body td > span:has(select),
3175
.docblock-argstable-body td textarea {
32-
max-width: var(
33-
--spectrum-alias-single-line-width,
34-
var(--spectrum-global-dimension-size-2400)
35-
) !important;
76+
max-inline-size: 192px !important;
3677
}
3778

3879
#storybook-explorer-searchfield {
@@ -43,8 +84,22 @@ button.sidebar-item {
4384
font-weight: 700;
4485
}
4586

87+
button[data-action="collapse-root"] {
88+
font-family: var(--spectrum-sans-font-family-stack);
89+
font-style: var(--spectrum-detail-sans-serif-font-style);
90+
font-weight: var(--spectrum-detail-sans-serif-font-weight);
91+
font-size: var(--spectrum-detail-size-m);
92+
margin-block-start: 0;
93+
margin-block-end: 0;
94+
95+
color: var(--spectrum-detail-color);
96+
97+
line-height: var(--spectrum-detail-line-height);
98+
letter-spacing: var(--spectrum-detail-letter-spacing);
99+
text-transform: uppercase;
100+
}
101+
46102
.sidebar-item {
47-
/* height: 32px !important; */
48103
padding-block: 4px;
49104
}
50105

0 commit comments

Comments
 (0)