Cleanup
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -1 +1,284 @@
|
||||
/* Placeholder for custom Spotify-like theme tweaks applied to the Storybook chrome */
|
||||
@font-face {
|
||||
font-family: CircularSpTitle;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSpTitle-Black-4588c99025b967475c31695b0743dd1a.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSpTitle-Black-506746f387a26f25aa3d023b3e501d34.woff')
|
||||
format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: CircularSpTitle;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSpTitle-Bold-b2586b06a2e1522e9d879d84c2792a58.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSpTitle-Bold-1624fb2df28c20d7203d7fb86ce8b481.woff')
|
||||
format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: CircularSp;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff')
|
||||
format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: CircularSp;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSp-Book-a00e99ef9996a3a157fb6b746856d04f.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSp-Book-3f73da7d35bd81c706bce7bbb84964de.woff')
|
||||
format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: CircularSp;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff')
|
||||
format('woff');
|
||||
}
|
||||
|
||||
[data-theme-name='spotify'] {
|
||||
--bui-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl,
|
||||
CircularSp-Grek, CircularSp-Deva;
|
||||
--bui-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr,
|
||||
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
|
||||
--bui-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
|
||||
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
|
||||
|
||||
.bui-Button {
|
||||
border-radius: var(--bui-radius-3);
|
||||
padding-inline: var(--bui-space-3);
|
||||
}
|
||||
|
||||
.bui-ButtonIcon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bui-MenuPopup {
|
||||
box-sizing: border-box;
|
||||
max-width: 21.25rem;
|
||||
}
|
||||
|
||||
.bui-MenuSubmenuTrigger,
|
||||
.bui-MenuItem {
|
||||
height: auto;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.bui-Text {
|
||||
font-family: var(--bui-font-text);
|
||||
}
|
||||
|
||||
.bui-Heading {
|
||||
font-family: var(--bui-font-title);
|
||||
}
|
||||
|
||||
.bui-TableRow {
|
||||
border: none;
|
||||
border-radius: var(--bui-radius-4);
|
||||
}
|
||||
|
||||
.bui-TableRow:hover td:first-child {
|
||||
border-top-left-radius: var(--bui-radius-2);
|
||||
border-bottom-left-radius: var(--bui-radius-2);
|
||||
}
|
||||
|
||||
.bui-TableRow:hover td:last-child {
|
||||
border-top-right-radius: var(--bui-radius-2);
|
||||
border-bottom-right-radius: var(--bui-radius-2);
|
||||
}
|
||||
|
||||
.bui-TableBody:before,
|
||||
.bui-TableBody:after {
|
||||
line-height: var(--bui-space-1);
|
||||
content: '\200C';
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bui-TableHeader .bui-TableRow {
|
||||
border-bottom: 1px solid var(--bui-border);
|
||||
}
|
||||
|
||||
.bui-TableHead {
|
||||
font-size: var(--bui-font-size-2);
|
||||
color: var(--bui-fg-secondary);
|
||||
font-weight: var(--bui-font-weight-regular);
|
||||
}
|
||||
|
||||
.bui-HeaderToolbar {
|
||||
padding-top: var(--bui-space-2);
|
||||
padding-inline: var(--bui-space-2);
|
||||
}
|
||||
|
||||
.bui-HeaderToolbarWrapper {
|
||||
border-radius: var(--bui-radius-3);
|
||||
padding-inline: var(--bui-space-3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bui-HeaderToolbarControls {
|
||||
right: calc(var(--bui-space-3) - 1px);
|
||||
}
|
||||
|
||||
.bui-HeaderTabsWrapper {
|
||||
margin-top: var(--bui-space-2);
|
||||
margin-inline: var(--bui-space-2);
|
||||
border-radius: var(--bui-radius-3);
|
||||
padding-inline: var(--bui-space-1);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bui-Input {
|
||||
border-radius: var(--bui-radius-3);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme-mode='light'][data-theme-name='spotify'] {
|
||||
--bui-bg: var(--bui-gray-1);
|
||||
--bui-bg-surface-1: var(--bui-white);
|
||||
--bui-bg-surface-2: var(--bui-gray-2);
|
||||
--bui-bg-solid: #1ed760;
|
||||
--bui-bg-solid-hover: #3be477;
|
||||
--bui-bg-solid-pressed: #1abc54;
|
||||
--bui-bg-solid-disabled: var(--bui-gray-2);
|
||||
|
||||
--bui-fg-primary: var(--bui-black);
|
||||
--bui-fg-secondary: var(--bui-gray-7);
|
||||
--bui-fg-solid: var(--bui-black);
|
||||
|
||||
--bui-border: var(--bui-gray-3);
|
||||
--bui-border-hover: rgba(0, 0, 0, 0.3);
|
||||
--bui-border-pressed: rgba(0, 0, 0, 0.5);
|
||||
--bui-border-disabled: rgba(0, 0, 0, 0.1);
|
||||
--bui-border-danger: #f87a7a;
|
||||
--bui-border-warning: #e36d05;
|
||||
--bui-border-success: #53db83;
|
||||
|
||||
--bui-ring: rgba(0, 0, 0, 0.2);
|
||||
|
||||
.bui-HeaderToolbarWrapper {
|
||||
border: 1px solid var(--bui-border);
|
||||
}
|
||||
|
||||
.bui-HeaderTabsWrapper {
|
||||
border: 1px solid var(--bui-border);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme-mode='dark'][data-theme-name='spotify'] {
|
||||
--bui-bg: var(--bui-black);
|
||||
--bui-bg-surface-1: var(--bui-gray-1);
|
||||
--bui-bg-surface-2: var(--bui-gray-2);
|
||||
--bui-bg-solid: #1ed760;
|
||||
--bui-bg-solid-hover: #3be477;
|
||||
--bui-bg-solid-pressed: #1abc54;
|
||||
--bui-bg-solid-disabled: #0f6c30;
|
||||
--bui-bg-tint: #242424;
|
||||
--bui-bg-tint-hover: #202020;
|
||||
--bui-bg-tint-pressed: #292929;
|
||||
--bui-bg-tint-disabled: rgba(255, 255, 255, 0.8);
|
||||
--bui-bg-danger: #3b1219;
|
||||
--bui-bg-warning: #302008;
|
||||
--bui-bg-success: #132d21;
|
||||
|
||||
--bui-fg-primary: var(--bui-white);
|
||||
--bui-fg-secondary: var(--bui-gray-7);
|
||||
--bui-fg-link: var(--bui-white);
|
||||
--bui-fg-link-hover: var(--bui-white);
|
||||
--bui-fg-disabled: var(--bui-gray-5);
|
||||
--bui-fg-solid: var(--bui-black);
|
||||
--bui-fg-solid-disabled: #083618;
|
||||
--bui-fg-tint: var(--bui-white);
|
||||
--bui-fg-tint-disabled: var(--bui-gray-5);
|
||||
--bui-fg-danger: #e22b2b;
|
||||
--bui-fg-warning: #e36d05;
|
||||
--bui-fg-success: #1db954;
|
||||
|
||||
--bui-border: var(--bui-gray-3);
|
||||
--bui-border-hover: rgba(255, 255, 255, 0.4);
|
||||
--bui-border-pressed: rgba(255, 255, 255, 0.5);
|
||||
--bui-border-disabled: rgba(255, 255, 255, 0.2);
|
||||
--bui-border-danger: #f87a7a;
|
||||
--bui-border-warning: #e36d05;
|
||||
--bui-border-success: #53db83;
|
||||
|
||||
--bui-ring: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ const config = {
|
||||
name: 'Main Styles',
|
||||
},
|
||||
{
|
||||
source: '../../storybook/.storybook/themes/spotify.css',
|
||||
source: '../../.storybook/themes/spotify.css',
|
||||
destination: 'theme-spotify.css',
|
||||
name: 'Spotify Theme',
|
||||
},
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*storybook.log
|
||||
@@ -1,2 +0,0 @@
|
||||
registry=https://registry.npmjs.org/
|
||||
engine-strict=true
|
||||
@@ -1,75 +0,0 @@
|
||||
import {
|
||||
AlertApiForwarder,
|
||||
ErrorAlerter,
|
||||
ErrorApiForwarder,
|
||||
GithubAuth,
|
||||
GitlabAuth,
|
||||
GoogleAuth,
|
||||
OAuthRequestManager,
|
||||
OktaAuth,
|
||||
ConfigReader,
|
||||
LocalStorageFeatureFlags,
|
||||
} from '@backstage/core-app-api';
|
||||
|
||||
import {
|
||||
alertApiRef,
|
||||
errorApiRef,
|
||||
githubAuthApiRef,
|
||||
gitlabAuthApiRef,
|
||||
googleAuthApiRef,
|
||||
identityApiRef,
|
||||
oauthRequestApiRef,
|
||||
oktaAuthApiRef,
|
||||
configApiRef,
|
||||
featureFlagsApiRef,
|
||||
} from '@backstage/core-plugin-api';
|
||||
|
||||
import { translationApiRef } from '@backstage/core-plugin-api/alpha';
|
||||
import { MockTranslationApi } from '@backstage/test-utils/alpha';
|
||||
|
||||
const configApi = new ConfigReader({});
|
||||
const featureFlagsApi = new LocalStorageFeatureFlags();
|
||||
const alertApi = new AlertApiForwarder();
|
||||
const errorApi = new ErrorAlerter(alertApi, new ErrorApiForwarder());
|
||||
const identityApi = {
|
||||
getUserId: () => 'guest',
|
||||
getProfile: () => ({ email: 'guest@example.com' }),
|
||||
getIdToken: () => undefined,
|
||||
signOut: async () => {},
|
||||
};
|
||||
const oauthRequestApi = new OAuthRequestManager();
|
||||
const googleAuthApi = GoogleAuth.create({
|
||||
apiOrigin: 'http://localhost:7007',
|
||||
basePath: '/auth/',
|
||||
oauthRequestApi,
|
||||
});
|
||||
const githubAuthApi = GithubAuth.create({
|
||||
apiOrigin: 'http://localhost:7007',
|
||||
basePath: '/auth/',
|
||||
oauthRequestApi,
|
||||
});
|
||||
const gitlabAuthApi = GitlabAuth.create({
|
||||
apiOrigin: 'http://localhost:7007',
|
||||
basePath: '/auth/',
|
||||
oauthRequestApi,
|
||||
});
|
||||
const oktaAuthApi = OktaAuth.create({
|
||||
apiOrigin: 'http://localhost:7007',
|
||||
basePath: '/auth/',
|
||||
oauthRequestApi,
|
||||
});
|
||||
const translationApi = MockTranslationApi.create();
|
||||
|
||||
export const apis = [
|
||||
[configApiRef, configApi],
|
||||
[featureFlagsApiRef, featureFlagsApi],
|
||||
[alertApiRef, alertApi],
|
||||
[errorApiRef, errorApi],
|
||||
[identityApiRef, identityApi],
|
||||
[oauthRequestApiRef, oauthRequestApi],
|
||||
[googleAuthApiRef, googleAuthApi],
|
||||
[githubAuthApiRef, githubAuthApi],
|
||||
[gitlabAuthApiRef, gitlabAuthApi],
|
||||
[oktaAuthApiRef, oktaAuthApi],
|
||||
[translationApiRef, translationApi],
|
||||
];
|
||||
@@ -1,54 +0,0 @@
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
import { join, dirname, posix } from 'path';
|
||||
|
||||
/**
|
||||
* This set of stories are the ones that we publish to backstage.io.
|
||||
*/
|
||||
const backstageCoreStories = [
|
||||
'packages/ui',
|
||||
'packages/core-components',
|
||||
'packages/app',
|
||||
'plugins/org',
|
||||
'plugins/search',
|
||||
'plugins/search-react',
|
||||
'plugins/home',
|
||||
'plugins/catalog-react',
|
||||
];
|
||||
|
||||
const rootPath = '../../';
|
||||
const storiesSrcMdx = 'src/**/*.mdx';
|
||||
const storiesSrcGlob = 'src/**/*.stories.@(js|jsx|mjs|ts|tsx)';
|
||||
|
||||
const getStoriesPath = (element: string, pattern: string) =>
|
||||
posix.join(rootPath, element, pattern);
|
||||
|
||||
const stories = backstageCoreStories.flatMap(element => [
|
||||
getStoriesPath(element, storiesSrcMdx),
|
||||
getStoriesPath(element, storiesSrcGlob),
|
||||
]);
|
||||
|
||||
/**
|
||||
* This function is used to resolve the absolute path of a package.
|
||||
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
|
||||
*/
|
||||
function getAbsolutePath(value: string): any {
|
||||
return dirname(require.resolve(join(value, 'package.json')));
|
||||
}
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories,
|
||||
addons: [
|
||||
getAbsolutePath('@storybook/addon-links'),
|
||||
getAbsolutePath('@storybook/addon-essentials'),
|
||||
getAbsolutePath('@chromatic-com/storybook'),
|
||||
getAbsolutePath('@storybook/addon-interactions'),
|
||||
getAbsolutePath('@storybook/addon-themes'),
|
||||
getAbsolutePath('@storybook/addon-storysource'),
|
||||
],
|
||||
framework: {
|
||||
name: getAbsolutePath('@storybook/react-vite'),
|
||||
options: {},
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
@@ -1,163 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { TestApiProvider } from '@backstage/test-utils';
|
||||
import { Content, AlertDisplay } from '@backstage/core-components';
|
||||
import { apis } from './apis';
|
||||
import type { Decorator, Preview, ReactRenderer } from '@storybook/react';
|
||||
import { useGlobals } from '@storybook/preview-api';
|
||||
import { UnifiedThemeProvider, themes } from '@backstage/theme';
|
||||
|
||||
// Default Backstage theme
|
||||
import '../../packages/ui/src/css/styles.css';
|
||||
|
||||
// Custom mocked styles
|
||||
import './storybook.css';
|
||||
|
||||
// Custom themes
|
||||
import './themes/spotify.css';
|
||||
|
||||
const preview: Preview = {
|
||||
globalTypes: {
|
||||
themeMode: {
|
||||
name: 'Theme Mode',
|
||||
description: 'Global theme mode for components',
|
||||
defaultValue: 'light',
|
||||
toolbar: {
|
||||
icon: 'circlehollow',
|
||||
items: [
|
||||
{ value: 'light', icon: 'circlehollow', title: 'Light' },
|
||||
{ value: 'dark', icon: 'circle', title: 'Dark' },
|
||||
],
|
||||
showName: true,
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
themeName: {
|
||||
name: 'Theme Name',
|
||||
description: 'Global theme name for components',
|
||||
defaultValue: 'backstage',
|
||||
toolbar: {
|
||||
icon: 'paintbrush',
|
||||
items: [
|
||||
{ value: 'backstage', title: 'Backstage' },
|
||||
{ value: 'spotify', title: 'Spotify' },
|
||||
],
|
||||
showName: true,
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
initialGlobals: {
|
||||
themeMode: 'light',
|
||||
themeName: 'backstage',
|
||||
},
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
backgrounds: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
options: {
|
||||
storySort: {
|
||||
order: ['Backstage UI', 'Plugins', 'Layout', 'Navigation'],
|
||||
},
|
||||
},
|
||||
viewport: {
|
||||
viewports: {
|
||||
initial: {
|
||||
name: 'Initial',
|
||||
styles: {
|
||||
width: '320px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
xs: {
|
||||
name: 'Extra Small',
|
||||
styles: {
|
||||
width: '640px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
sm: {
|
||||
name: 'Small',
|
||||
styles: {
|
||||
width: '768px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
md: {
|
||||
name: 'Medium',
|
||||
styles: {
|
||||
width: '1024px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
lg: {
|
||||
name: 'Large',
|
||||
styles: {
|
||||
width: '1280px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
xl: {
|
||||
name: 'Extra Large',
|
||||
styles: {
|
||||
width: '1536px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
Story => {
|
||||
const [globals] = useGlobals();
|
||||
const selectedTheme =
|
||||
globals.themeMode === 'light' ? themes.light : themes.dark;
|
||||
|
||||
const selectedThemeMode = globals.themeMode || 'light';
|
||||
const selectedThemeName = globals.themeName || 'backstage';
|
||||
|
||||
useEffect(() => {
|
||||
// Remove any existing theme data attributes
|
||||
document.body.removeAttribute('data-theme-mode');
|
||||
document.body.removeAttribute('data-theme-name');
|
||||
|
||||
// Add the selected theme data attribute
|
||||
document.body.setAttribute('data-theme-mode', selectedThemeMode);
|
||||
document.body.setAttribute('data-theme-name', selectedThemeName);
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
document.body.removeAttribute('data-theme-mode');
|
||||
document.body.removeAttribute('data-theme-name');
|
||||
};
|
||||
}, [selectedTheme, selectedThemeName]);
|
||||
|
||||
document.body.style.backgroundColor = 'var(--bui-bg)';
|
||||
|
||||
const docsStoryElements = document.getElementsByClassName('docs-story');
|
||||
Array.from(docsStoryElements).forEach(element => {
|
||||
(element as HTMLElement).style.backgroundColor = 'var(--bui-bg)';
|
||||
});
|
||||
|
||||
return (
|
||||
<UnifiedThemeProvider theme={selectedTheme}>
|
||||
{/* @ts-ignore - TODO: Fix this */}
|
||||
<TestApiProvider apis={apis}>
|
||||
<AlertDisplay />
|
||||
<Content>
|
||||
<Story />
|
||||
</Content>
|
||||
</TestApiProvider>
|
||||
</UnifiedThemeProvider>
|
||||
);
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default preview;
|
||||
@@ -1,38 +0,0 @@
|
||||
:root {
|
||||
--sb-panel-radius: 0;
|
||||
--sb-panel-top: 0;
|
||||
--sb-panel-bottom: 0;
|
||||
--sb-panel-left: 0;
|
||||
--sb-panel-right: 0;
|
||||
--sb-sidebar-border: none;
|
||||
--sb-sidebar-border-right: 1px solid var(--bui-border);
|
||||
--sb-sidebar-bg: #000;
|
||||
--sb-options-border: none;
|
||||
--sb-options-border-left: 1px solid var(--bui-border);
|
||||
--sb-content-padding-inline: 250px;
|
||||
}
|
||||
|
||||
[data-theme-mode='dark'] {
|
||||
--sb-sidebar-bg: var(--bui-bg-surface-1);
|
||||
}
|
||||
|
||||
[data-theme-name='spotify'] {
|
||||
--sb-panel-radius: var(--bui-radius-3);
|
||||
--sb-panel-top: 8px;
|
||||
--sb-panel-bottom: 8px;
|
||||
--sb-panel-left: 8px;
|
||||
--sb-panel-right: 8px;
|
||||
--sb-sidebar-border: none;
|
||||
--sb-sidebar-border-right: none;
|
||||
--sb-sidebar-bg: var(--bui-bg-surface-1);
|
||||
--sb-options-border: none;
|
||||
--sb-options-border-left: none;
|
||||
--sb-content-padding-inline: 258px;
|
||||
}
|
||||
|
||||
[data-theme-name='spotify'][data-theme-mode='light'] {
|
||||
--sb-sidebar-border: 1px solid var(--bui-border);
|
||||
--sb-sidebar-border-right: 1px solid var(--bui-border);
|
||||
--sb-options-border: 1px solid var(--bui-border);
|
||||
--sb-options-border-left: 1px solid var(--bui-border);
|
||||
}
|
||||
@@ -1,284 +0,0 @@
|
||||
@font-face {
|
||||
font-family: CircularSpTitle;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSpTitle-Black-4588c99025b967475c31695b0743dd1a.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSpTitle-Black-506746f387a26f25aa3d023b3e501d34.woff')
|
||||
format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: CircularSpTitle;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSpTitle-Bold-b2586b06a2e1522e9d879d84c2792a58.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSpTitle-Bold-1624fb2df28c20d7203d7fb86ce8b481.woff')
|
||||
format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: CircularSp;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff')
|
||||
format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: CircularSp;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSp-Book-a00e99ef9996a3a157fb6b746856d04f.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSp-Book-3f73da7d35bd81c706bce7bbb84964de.woff')
|
||||
format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: CircularSp;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
|
||||
U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
|
||||
U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
|
||||
U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
|
||||
U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
|
||||
U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
|
||||
U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
|
||||
U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
|
||||
U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
|
||||
U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
|
||||
U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
|
||||
U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
|
||||
U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
|
||||
U+FFFF;
|
||||
src: url('https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2')
|
||||
format('woff2'),
|
||||
url('https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff')
|
||||
format('woff');
|
||||
}
|
||||
|
||||
[data-theme-name='spotify'] {
|
||||
--bui-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl,
|
||||
CircularSp-Grek, CircularSp-Deva;
|
||||
--bui-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr,
|
||||
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
|
||||
--bui-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
|
||||
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
|
||||
|
||||
.bui-Button {
|
||||
border-radius: var(--bui-radius-3);
|
||||
padding-inline: var(--bui-space-3);
|
||||
}
|
||||
|
||||
.bui-ButtonIcon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bui-MenuPopup {
|
||||
box-sizing: border-box;
|
||||
max-width: 21.25rem;
|
||||
}
|
||||
|
||||
.bui-MenuSubmenuTrigger,
|
||||
.bui-MenuItem {
|
||||
height: auto;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.bui-Text {
|
||||
font-family: var(--bui-font-text);
|
||||
}
|
||||
|
||||
.bui-Heading {
|
||||
font-family: var(--bui-font-title);
|
||||
}
|
||||
|
||||
.bui-TableRow {
|
||||
border: none;
|
||||
border-radius: var(--bui-radius-4);
|
||||
}
|
||||
|
||||
.bui-TableRow:hover td:first-child {
|
||||
border-top-left-radius: var(--bui-radius-2);
|
||||
border-bottom-left-radius: var(--bui-radius-2);
|
||||
}
|
||||
|
||||
.bui-TableRow:hover td:last-child {
|
||||
border-top-right-radius: var(--bui-radius-2);
|
||||
border-bottom-right-radius: var(--bui-radius-2);
|
||||
}
|
||||
|
||||
.bui-TableBody:before,
|
||||
.bui-TableBody:after {
|
||||
line-height: var(--bui-space-1);
|
||||
content: '\200C';
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bui-TableHeader .bui-TableRow {
|
||||
border-bottom: 1px solid var(--bui-border);
|
||||
}
|
||||
|
||||
.bui-TableHead {
|
||||
font-size: var(--bui-font-size-2);
|
||||
color: var(--bui-fg-secondary);
|
||||
font-weight: var(--bui-font-weight-regular);
|
||||
}
|
||||
|
||||
.bui-HeaderToolbar {
|
||||
padding-top: var(--bui-space-2);
|
||||
padding-inline: var(--bui-space-2);
|
||||
}
|
||||
|
||||
.bui-HeaderToolbarWrapper {
|
||||
border-radius: var(--bui-radius-3);
|
||||
padding-inline: var(--bui-space-3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bui-HeaderToolbarControls {
|
||||
right: calc(var(--bui-space-3) - 1px);
|
||||
}
|
||||
|
||||
.bui-HeaderTabsWrapper {
|
||||
margin-top: var(--bui-space-2);
|
||||
margin-inline: var(--bui-space-2);
|
||||
border-radius: var(--bui-radius-3);
|
||||
padding-inline: var(--bui-space-1);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bui-Input {
|
||||
border-radius: var(--bui-radius-3);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme-mode='light'][data-theme-name='spotify'] {
|
||||
--bui-bg: var(--bui-gray-1);
|
||||
--bui-bg-surface-1: var(--bui-white);
|
||||
--bui-bg-surface-2: var(--bui-gray-2);
|
||||
--bui-bg-solid: #1ed760;
|
||||
--bui-bg-solid-hover: #3be477;
|
||||
--bui-bg-solid-pressed: #1abc54;
|
||||
--bui-bg-solid-disabled: var(--bui-gray-2);
|
||||
|
||||
--bui-fg-primary: var(--bui-black);
|
||||
--bui-fg-secondary: var(--bui-gray-7);
|
||||
--bui-fg-solid: var(--bui-black);
|
||||
|
||||
--bui-border: var(--bui-gray-3);
|
||||
--bui-border-hover: rgba(0, 0, 0, 0.3);
|
||||
--bui-border-pressed: rgba(0, 0, 0, 0.5);
|
||||
--bui-border-disabled: rgba(0, 0, 0, 0.1);
|
||||
--bui-border-danger: #f87a7a;
|
||||
--bui-border-warning: #e36d05;
|
||||
--bui-border-success: #53db83;
|
||||
|
||||
--bui-ring: rgba(0, 0, 0, 0.2);
|
||||
|
||||
.bui-HeaderToolbarWrapper {
|
||||
border: 1px solid var(--bui-border);
|
||||
}
|
||||
|
||||
.bui-HeaderTabsWrapper {
|
||||
border: 1px solid var(--bui-border);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme-mode='dark'][data-theme-name='spotify'] {
|
||||
--bui-bg: var(--bui-black);
|
||||
--bui-bg-surface-1: var(--bui-gray-1);
|
||||
--bui-bg-surface-2: var(--bui-gray-2);
|
||||
--bui-bg-solid: #1ed760;
|
||||
--bui-bg-solid-hover: #3be477;
|
||||
--bui-bg-solid-pressed: #1abc54;
|
||||
--bui-bg-solid-disabled: #0f6c30;
|
||||
--bui-bg-tint: #242424;
|
||||
--bui-bg-tint-hover: #202020;
|
||||
--bui-bg-tint-pressed: #292929;
|
||||
--bui-bg-tint-disabled: rgba(255, 255, 255, 0.8);
|
||||
--bui-bg-danger: #3b1219;
|
||||
--bui-bg-warning: #302008;
|
||||
--bui-bg-success: #132d21;
|
||||
|
||||
--bui-fg-primary: var(--bui-white);
|
||||
--bui-fg-secondary: var(--bui-gray-7);
|
||||
--bui-fg-link: var(--bui-white);
|
||||
--bui-fg-link-hover: var(--bui-white);
|
||||
--bui-fg-disabled: var(--bui-gray-5);
|
||||
--bui-fg-solid: var(--bui-black);
|
||||
--bui-fg-solid-disabled: #083618;
|
||||
--bui-fg-tint: var(--bui-white);
|
||||
--bui-fg-tint-disabled: var(--bui-gray-5);
|
||||
--bui-fg-danger: #e22b2b;
|
||||
--bui-fg-warning: #e36d05;
|
||||
--bui-fg-success: #1db954;
|
||||
|
||||
--bui-border: var(--bui-gray-3);
|
||||
--bui-border-hover: rgba(255, 255, 255, 0.4);
|
||||
--bui-border-pressed: rgba(255, 255, 255, 0.5);
|
||||
--bui-border-disabled: rgba(255, 255, 255, 0.2);
|
||||
--bui-border-danger: #f87a7a;
|
||||
--bui-border-warning: #e36d05;
|
||||
--bui-border-success: #53db83;
|
||||
|
||||
--bui-ring: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
Reference in New Issue
Block a user