paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases Wiki Activity

Test moving css around

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-01-01 15:55:20 +01:00
parent 52dd2f9429
commit 4aca564671
10 changed files with 73 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microsite-canon/app/actions.ts
-21
View File
@@ -1,21 +0,0 @@
'use server';
import { cookies } from 'next/headers';
export async function setDefaultThemeCookie() {
const cookieStore = await cookies();
const theme = cookieStore.get('theme');
if (theme === undefined) {
cookieStore.set('theme', 'light');
}
}
export async function setDefaultVersionCookie() {
const cookieStore = await cookies();
const version = cookieStore.get('version');
if (version === undefined) {
cookieStore.set('version', 'v2');
}
}
microsite-canon/app/layout.tsx
+7 -7
View File
@@ -1,14 +1,14 @@
import type { Metadata } from 'next';
import { Sidebar } from '../components/Sidebar';
import './globals.css';
import '../../packages/canon/src/css/core.css';
import '../../packages/canon/src/css/components.css';
import styles from './page.module.css';
import { Global } from '@/components/Global';
import { Providers } from './providers';
import { cookies } from 'next/headers';
import { setDefaultThemeCookie, setDefaultVersionCookie } from './actions';
import './globals.css';
import '../../packages/canon/src/css/core.css';
import '../../packages/canon/src/css/components.css';
import '../../packages/canon/.storybook/themes/backstage.css';
export const metadata: Metadata = {
title: 'Canon',
@@ -34,10 +34,10 @@ export default async function RootLayout({
<html lang="en" data-theme={dataTheme}>
<body>
<Providers>
<Global>
<div className={styles.global}>
<Sidebar />
<div className={styles.container}>{children}</div>
</Global>
</div>
</Providers>
</body>
</html>
microsite-canon/app/page.module.css
+4
View File
@@ -1,3 +1,7 @@
.global {
width: 100%;
}
.container {
padding-left: 280px;
width: 100%;
microsite-canon/components/Global/index.tsx
-7
View File
@@ -1,7 +0,0 @@
'use client';
import styles from './styles.module.css';
export const Global = ({ children }: { children: React.ReactNode }) => {
return <div className={styles.global}>{children}</div>;
};
microsite-canon/components/Global/styles.module.css
-3
View File
@@ -1,3 +0,0 @@
.global {
width: 100%;
}
microsite-canon/public/backstage.css
+1
View File
@@ -0,0 +1 @@
:root{--canon-font-regular:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;& .cn-button{text-transform:uppercase;box-shadow:none;background-color:#1f5493;border-radius:4px;padding:6px 16px;font-size:.875rem;font-weight:400;line-height:1.75;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border .25s cubic-bezier(.4,0,.2,1);&:hover{box-shadow:none}&.cn-button-primary{color:#fff;background-color:#153a66;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;&:hover{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}}&.cn-button-secondary{color:#1f5493;background-color:#0000;border:1px solid #1f549380;&:hover{background-color:#1f54930a;border:1px solid #1f5493}}&.cn-button-tertiary{color:#1f5493;background-color:#0000;border:none}}}[data-theme=backstage-light]{--canon-accent:#2e77d0;--canon-background:#f8f8f8;--canon-surface-1:#fff;--canon-surface-2:#f4f4f4;--canon-text-primary:#000;--canon-text-primary-on-accent:#fff;--canon-text-secondary:#646464}[data-theme=backstage-dark]{--canon-accent:#fff;--canon-background:#000;--canon-surface-1:#121212;--canon-surface-2:#1a1a1a;--canon-border-base:#fff3;--canon-border-warning:#f50000;--canon-border-error:#f87503;--canon-border-selected:#25d262;--canon-error:#f50000;--canon-text-primary:#fff;--canon-text-primary-on-accent:#000;--canon-text-secondary:#b3b3b3}
microsite-canon/public/core.css
+1 -1
View File
File diff suppressed because one or more lines are too long
microsite-canon/scripts/watch-css.js
+12
View File
@@ -10,6 +10,11 @@ const source1 = path.join(__dirname, `${source}/core.css`);
const destination1 = path.join(__dirname, `${destination}/core.css`);
const source2 = path.join(__dirname, `${source}/components.css`);
const destination2 = path.join(__dirname, `${destination}/components.css`);
const source3 = path.join(
__dirname,
`../../packages/canon/.storybook/themes/backstage.css`,
);
const destination3 = path.join(__dirname, `${destination}/backstage.css`);
// Function to bundle and copy the CSS file
const bundleAndCopyFile = async (source, destination) => {
@@ -38,6 +43,13 @@ chokidar.watch(source2).on('change', () => {
bundleAndCopyFile(source2, destination2);
});
// Watch the backstage.css file for changes
chokidar.watch(source3).on('change', () => {
console.log('Detected change in backstage.css, bundling and copying...');
bundleAndCopyFile(source3, destination3);
});
// Initial bundle and copy
bundleAndCopyFile(source1, destination1);
bundleAndCopyFile(source2, destination2);
bundleAndCopyFile(source3, destination3);
packages/canon/.storybook/themes/backstage.css
+24 -13
View File
@@ -1,15 +1,4 @@
[data-theme='backstage-light'] {
/* Colors */
--canon-accent: #2e77d0;
--canon-background: #f8f8f8;
--canon-surface-1: #fff;
--canon-surface-2: #f4f4f4;
/* Text colors */
--canon-text-primary: #000;
--canon-text-primary-on-accent: #fff;
--canon-text-secondary: #646464;
:root {
--canon-font-regular: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
.cn-button {
@@ -62,13 +51,35 @@
}
}
[data-theme='backstage-dark'] {
[data-theme='backstage-light'] {
/* Colors */
--canon-accent: #2e77d0;
--canon-background: #f8f8f8;
--canon-surface-1: #fff;
--canon-surface-2: #f4f4f4;
/* Text colors */
--canon-text-primary: #000;
--canon-text-primary-on-accent: #fff;
--canon-text-secondary: #646464;
}
[data-theme='backstage-dark'] {
/* Colors */
--canon-accent: #fff;
--canon-background: #000;
--canon-surface-1: #121212;
--canon-surface-2: #1a1a1a;
/* Borders */
--canon-border-base: rgba(255, 255, 255, 0.2);
--canon-border-warning: #f50000;
--canon-border-error: #f87503;
--canon-border-selected: #25d262;
/* States - Add more states */
--canon-error: #f50000;
/* Text colors */
--canon-text-primary: #fff;
--canon-text-primary-on-accent: #000;
packages/canon/src/css/core.css
+24 -27
View File
@@ -20,33 +20,6 @@
/* Light theme tokens */
:root {
/* Colors */
--canon-accent: #000;
--canon-background: #f8f8f8;
--canon-surface-1: #fff;
--canon-surface-2: #f4f4f4;
--canon-surface-3: #f1f1f1;
/* Borders */
--canon-border-base: rgba(0, 0, 0, 0.1);
--canon-border-hover: rgba(0, 0, 0, 0.2);
--canon-border-warning: #e36d05;
--canon-border-error: #e22b2b;
--canon-border-selected: #1db954;
/* States - Add more states */
--canon-error: #f50000;
/* Text colors */
--canon-text-primary: #000;
--canon-text-primary-on-accent: #fff;
--canon-text-secondary: #646464;
/* Box shadows */
/* --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05); */
/* --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1); */
/* --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2); */
/* Font families */
--canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
@@ -97,6 +70,30 @@
--canon-container-padding: 1rem;
}
[data-theme='light'] {
/* Colors */
--canon-accent: #000;
--canon-background: #f8f8f8;
--canon-surface-1: #fff;
--canon-surface-2: #f4f4f4;
--canon-surface-3: #f1f1f1;
/* Borders */
--canon-border-base: rgba(0, 0, 0, 0.1);
--canon-border-hover: rgba(0, 0, 0, 0.2);
--canon-border-warning: #e36d05;
--canon-border-error: #e22b2b;
--canon-border-selected: #1db954;
/* States - Add more states */
--canon-error: #f50000;
/* Text colors */
--canon-text-primary: #000;
--canon-text-primary-on-accent: #fff;
--canon-text-secondary: #646464;
}
/* Dark theme tokens */
[data-theme='dark'] {
/* Colors */