Skip to content

Commit

Permalink
feat(ui/storybook-host): add dark mode with cuhacking logo
Browse files Browse the repository at this point in the history
  • Loading branch information
@MFarabi619
MFarabi619 committed Sep 15, 2024
1 parent 54a947d commit 6a38a85
Show file tree
Hide file tree
Showing 5 changed files with 459 additions and 1 deletion.
Binary file added libs/storybook-host/.storybook/cuhacking-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
222 changes: 222 additions & 0 deletions libs/storybook-host/.storybook/globals.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
@config '../../../apps/website/tailwind.config.ts';
@tailwind base;
@tailwind components;
@tailwind utilities;

/*Easily customize theme: https://zippystarter.com/tools/shadcn-ui-theme-generator*/
/*Explore the Shadcn/ui ecosystem: https://github.com/birobirobiro/awesome-shadcn-ui*/

/*'primary': '#00A3E0',*/
/*'primary-content': '#000a12',*/
/*'secondary': '#00629b',*/
/*'secondary-content': '#d0dfec',*/
/*'accent': '#FFD100',*/
/*'accent-content': '#161000',*/
/*'neutral': '#00843d',*/
/*'neutral-content': '#d3e6d7',*/
/*// "base-100": "#002855",*/
/*'base-100': '#000000',*/
/*'base-200': '#002149',*/
/*'base-300': '#001b3d',*/
/*'base-content': '#c8d1dc',*/
/*'info': '#009CA6',*/
/*'info-content': '#00090a',*/
/*'success': '#78be21',*/
/*'success-content': '#050d00',*/
/*'warning': '#ffa400',*/
/*'warning-content': '#160a00',*/
/*'error': '#BA0C2F',*/
/*'error-content': '#f8d4d3',*/

@layer base {
:root {
--background: 196 100% 95%;
/* hsl(196, 100%, 95%) */
--foreground: 196 5% 0%;
/* hsl(196, 5%, 0%) */
--card: 196 50% 90%;
/* hsl(196, 50%, 90%) */
--card-foreground: 196 5% 10%;
/* hsl(196, 5%, 10%) */
--popover: 196 100% 95%;
/* hsl(196, 100%, 95%) */
--popover-foreground: 196 100% 0%;
/* hsl(196, 100%, 0%) */

--primary: 196 100% 43.9%;
/* hsl(196, 100%, 43.9%) */
--primary-foreground: 0 0% 100%;
/* hsl(0, 0%, 100%) */
--auxiliary: 203, 100%, 37%;
/* hsl(203, 100%, 37%) */
--auxiliary-foreground: 213, 13%, 91%;
/* hsl(213, 13%, 91%) */
--tertiary: 52, 100%, 50%;
/* hsl(52, 100%, 50%) */
--tertiary-foreground: 60, 4%, 9%;
/* hsl(60, 4%, 9%) */
--neutral: 143, 100%, 26%;
/* hsl(143, 100%, 26%) */
--neutral-foreground: 141, 13%, 85%;
/* hsl(141, 13%, 85%) */
/*// "base-100": "#002855",*/
/*'base-100': '#000000',*/
/*'base-200': '#002149',*/
/*'base-300': '#001b3d',*/
/*'base-content': '#c8d1dc',*/
--info: 183, 100%, 33%;
/* hsl(183, 100%, 33%) */
--info-foreground: 180, 100%, 3%;
/* hsl(180, 100%, 3%) */
--success: 83, 100%, 25%;
/* hsl(83, 100%, 25%) */
--success-foreground: 120, 100%, 2%;
/* hsl(120, 100%, 2%) */
--warning: 38, 100%, 50%;
/* hsl(38, 100%, 50%) */
--warning-foreground: 30, 100%, 5%;
/* hsl(30, 100%, 5%) */

--secondary: 196 30% 70%;
/* hsl(196, 30%, 70%) */
--secondary-foreground: 0 0% 0%;
/* hsl(0, 0%, 0%) */
--muted: 158 30% 85%;
/* hsl(158, 30%, 85%) */
--muted-foreground: 196 5% 35%;
/* hsl(196, 5%, 35%) */
--accent: 158 30% 80%;
/* hsl(158, 30%, 80%) */
--accent-foreground: 196 5% 10%;
/* hsl(196, 5%, 10%) */
--destructive: 0 100% 30%;
/* hsl(0, 100%, 30%) */
--destructive-foreground: 196 5% 90%;
/* hsl(196, 5%, 90%) */
--border: 196 30% 50%;
/* hsl(196, 30%, 50%) */
--input: 196 30% 18%;
/* hsl(196, 30%, 18%) */
--ring: 196 100% 43.9%;
/* hsl(196, 100%, 43.9%) */
--radius: 0.75rem;
--chart-1: 12 76% 61%;
/* hsl(12, 76%, 61%) */
--chart-2: 173 58% 39%;
/* hsl(173, 58%, 39%) */
--chart-3: 197 37% 24%;
/* hsl(197, 37%, 24%) */
--chart-4: 43 74% 66%;
/* hsl(43, 74%, 66%) */
--chart-5: 27 87% 67%;
/* hsl(27, 87%, 67%) */
}

.dark {
--background: 218 100% 1%;
/* hsl(218, 100%, 1%) */
--foreground: 196 5% 90%;
/* hsl(196, 5%, 90%) */
--card: 196 50% 0%;
/* hsl(196, 50%, 0%) */
--card-foreground: 196 5% 90%;
/* hsl(196, 5%, 90%) */
--popover: 196 50% 5%;
/* hsl(196, 50%, 5%) */
--popover-foreground: 196 5% 90%;
/* hsl(196, 5%, 90%) */
--primary: 196 100% 43.9%;
/* hsl(196, 100%, 43.9%) */
--primary-foreground: 0 0% 100%;
/* hsl(0, 0%, 100%) */

--auxiliary: 203, 100%, 37%;
/* hsl(203, 100%, 37%) */
--auxiliary-foreground: 213, 13%, 91%;
/* hsl(213, 13%, 91%) */
--tertiary: 52, 100%, 50%;
/* hsl(52, 100%, 50%) */
--tertiary-foreground: 60, 4%, 9%;
/* hsl(60, 4%, 9%) */
--neutral: 143, 100%, 26%;
/* hsl(143, 100%, 26%) */
--neutral-foreground: 141, 13%, 85%;
/* hsl(141, 13%, 85%) */
/*// "base-100": "#002855",*/
/*'base-100': '#000000',*/
/*'base-200': '#002149',*/
/*'base-300': '#001b3d',*/
/*'base-content': '#c8d1dc',*/
--info: 183, 100%, 33%;
/* hsl(183, 100%, 33%) */
--info-foreground: 180, 100%, 3%;
/* hsl(180, 100%, 3%) */
--success: 83, 100%, 25%;
/* hsl(83, 100%, 25%) */
--success-foreground: 120, 100%, 2%;
/* hsl(120, 100%, 2%) */
--warning: 38, 100%, 50%;
/* hsl(38, 100%, 50%) */
--warning-foreground: 30, 100%, 5%;
/* hsl(30, 100%, 5%) */

--secondary: 196 30% 10%;
/* hsl(196, 30%, 10%) */
--secondary-foreground: 0 0% 100%;
/* hsl(0, 0%, 100%) */
--muted: 158 30% 15%;
/* hsl(158, 30%, 15%) */
--muted-foreground: 196 5% 60%;
/* hsl(196, 5%, 60%) */
--accent: 158 30% 15%;
/* hsl(158, 30%, 15%) */
--accent-foreground: 196 5% 90%;
/* hsl(196, 5%, 90%) */
--destructive: 0 100% 30%;
/* hsl(0, 100%, 30%) */
--destructive-foreground: 196 5% 90%;
/* hsl(196, 5%, 90%) */
--border: 196 30% 18%;
/* hsl(196, 30%, 18%) */
--input: 196 30% 18%;
/* hsl(196, 30%, 18%) */
--ring: 196 100% 43.9%;
/* hsl(196, 100%, 43.9%) */
--radius: 0.75rem;
--chart-1: 220 70% 50%;
/* hsl(220, 70%, 50%) */
--chart-2: 160 60% 45%;
/* hsl(160, 60%, 45%) */
--chart-3: 30 80% 55%;
/* hsl(30, 80%, 55%) */
--chart-4: 280 65% 60%;
/* hsl(280, 65%, 60%) */
--chart-5: 340 75% 55%;
/* hsl(340, 75%, 55%) */
}
}

@layer base {
* {
@apply border-border;
}

body {
@apply bg-background text-foreground;
}
}

.backdrop-blur-xs {
@apply backdrop-blur-[2px];
}

@keyframes bobbing {
0%,
100% {
transform: translateY(-2px);
}

50% {
transform: translateY(2px);
}
}
111 changes: 111 additions & 0 deletions libs/storybook-host/.storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
import React from 'react'
import type { Preview } from '@storybook/react'

import { ThemeProvider } from 'next-themes'
import { withThemeByClassName } from '@storybook/addon-themes' // Wide button with a pen and text. Toggles both Preview Components and Preview Background
import { type ThemeVars, themes } from '@storybook/theming'
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'

import { DocsContainer, type DocsContextProps } from '@storybook/blocks'

import { customViewports } from './custom-viewports'

import {
commonTheme,
darkUIStorybook,
lightUIStorybook,
} from './themes-storybook-ui'
import './globals.css'

const preview: Preview = {
parameters: {
layout: 'fullscreen',
Expand All @@ -27,6 +43,42 @@ const preview: Preview = {
...customViewports,
},
},
// globalTypes: {
// theme: {
// description: 'Global theme for components',
// defaultValue: 'light',
// toolbar: { // Requires @storybook/addon-toolbars, included in @storybook/addon-essentials. Imported separately in main.ts.
// // The label to show for this toolbar item
// title: 'Theme',
// icon: 'medium',
// // Array of plain string values or MenuItem shape (see below)
// items: ['light', 'dark'],
// // Change title based on selected value
// dynamicTitle: true,
// },
// },
// },
// https://storybook.js.org/addons/storybook-dark-mode
darkMode: {
classTarget: 'html',
stylePreview: true,
darkClass: 'dark',
lightClass: 'light',
// Set the initial theme
current: 'dark',
// Override the default dark theme
dark: {
...themes.dark,
...darkUIStorybook,
...commonTheme,
},
// Override the default light theme
light: {
...themes.normal,
...lightUIStorybook,
...commonTheme,
},
},
// https://storybook.js.org/docs/essentials/backgrounds
backgrounds: {
// disable: true,
Expand All @@ -50,7 +102,66 @@ const preview: Preview = {
// offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
},
},
// fix for theming docs page found here: https://github.com/hipstersmoothie/storybook-dark-mode/issues/282#issuecomment-2208816632
docs: {
defaultName: 'Documentation',
toc: true,
container: (props: {
children: React.ReactNode
context: DocsContextProps
theme?: ThemeVars
}) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const [isDark, setDark] = React.useState(true)
props.context.channel.on(DARK_MODE_EVENT_NAME, state =>
setDark(state))
const currentProps = { ...props }
// currentProps.theme = isDark ? themes.dark : themes.light
currentProps.theme = isDark
? (darkUIStorybook as ThemeVars)
: themes.light
// console.log('Current Props Theme:', currentProps.theme)
// console.log('Themes Dark:', themes.dark)
// console.log('Dark UI Storybook:', darkUIStorybook)
// console.log('Merged Theme:', { ...themes.dark, ...darkUIStorybook, ...commonTheme })
return <DocsContainer {...currentProps} />
},
},
// https://github.com/whitespace-se/storybook-addon-html
html: {
prettier: {
tabWidth: 4,
useTabs: false,
htmlWhitespaceSensitivity: 'strict',
},
highlighter: {
showLineNumbers: true, // default: false
wrapLines: true, // default: true
},
// disable: true, // default: false
},
},

decorators: [
(Story) => {
return (
<ThemeProvider
attribute="class"
defaultTheme="dark"
disableTransitionOnChange
>
<Story />
</ThemeProvider>
)
},
withThemeByClassName({
themes: {
light: 'light',
dark: 'dark',
},
defaultTheme: 'dark',
}),
],
}

export default preview
Expand Down
Loading

0 comments on commit 6a38a85

Please sign in to comment.