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

Add css build

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-01-15 09:14:29 +00:00
parent b211e7f264
commit 2141af6bf9
5 changed files with 59 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/catalog-info.yaml
+1 -1
View File
@@ -5,5 +5,5 @@ metadata:
title: '@backstage/canon'
spec:
lifecycle: experimental
type: backstage-web-library
type: backstage-node-library
owner: design-system-maintainers
packages/canon/package.json
+4 -2
View File
@@ -2,7 +2,7 @@
"name": "@backstage/canon",
"version": "0.0.0",
"backstage": {
"role": "web-library"
"role": "node-library"
},
"publishConfig": {
"access": "public",
@@ -27,8 +27,10 @@
"dist"
],
"scripts": {
"build": "backstage-cli package build",
"build": "yarn build:app && yarn build:css",
"build-storybook": "storybook build",
"build:app": "backstage-cli package build",
"build:css": "node scripts/build-css.mjs",
"clean": "backstage-cli package clean",
"lint": "backstage-cli package lint",
"prepack": "backstage-cli package prepack",
packages/canon/scripts/build-css.mjs
+54
View File
@@ -0,0 +1,54 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { transform, bundle } from 'lightningcss';
import fs from 'fs';
import path from 'path';
// Check if core.css and components.css exist
const cssFiles = ['src/css/core.css', 'src/css/components.css'];
const distDir = 'dist/css';
cssFiles.forEach(file => {
if (!fs.existsSync(file)) {
console.error(`${file} does not exist`);
process.exit(1);
}
});
// Ensure the dist/css directory exists
if (!fs.existsSync(distDir)) {
fs.mkdirSync(distDir, { recursive: true });
}
cssFiles.forEach(file => {
let { code: bundleCode } = bundle({
filename: file,
});
let { code, map } = transform({
filename: `${distDir}/${path.basename(file)}`,
code: bundleCode,
minify: true,
sourceMap: true,
});
fs.writeFileSync(`${distDir}/${path.basename(file)}`, code);
fs.writeFileSync(`${distDir}/${path.basename(file)}.map`, map);
// Clear the content of the original CSS file
fs.writeFileSync(file, '');
});
packages/canon/src/css/components.css
-28
View File
@@ -1,28 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Components */
@import '../components/Button/styles.css';
@import '../components/Stack/styles.css';
@import '../components/Inline/styles.css';
@import '../components/Grid/styles.css';
@import '../components/Container/styles.css';
@import '../components/Icon/styles.css';
@import '../components/Checkbox/styles.css';
@import '../components/Table/styles.css';
@import '../components/Text/styles.css';
@import '../components/Heading/styles.css';
@import '../components/Input/styles.css';
packages/canon/src/css/core.css
-127
View File
@@ -1,127 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Normalize */
@import './base.css';
@import './utilities.css';
/* Light theme tokens */
:root {
/* Font families */
--canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--canon-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
'Liberation Mono', 'Courier New', monospace;
/* Font weights */
--canon-font-weight-regular: 400;
--canon-font-weight-bold: 600;
/* Font sizes */
--canon-font-size-label: 0.625rem; /* 10px */
--canon-font-size-caption: 0.75rem; /* 12px */
--canon-font-size-body: 0.875rem; /* 14px */
--canon-font-size-subtitle: 1rem; /* 16px */
--canon-font-size-title5: 1.25rem; /* 20px */
--canon-font-size-title4: 1.5rem; /* 24px */
--canon-font-size-title3: 2rem; /* 32px */
--canon-font-size-title2: 3rem; /* 48px */
--canon-font-size-title1: 4rem; /* 64px */
--canon-font-size-display: 5.75rem; /* 92px */
/* Spacing */
/* This is the spacing multiplier */
--canon-space: 0.25rem; /* 4px */
/* These are the spacing scale */
--canon-space-0_5: calc(var(--canon-space) * 0.5); /* 2px */
--canon-space-1: var(--canon-space); /* 4px */
--canon-space-1_5: calc(var(--canon-space) * 1.5); /* 6px */
--canon-space-2: calc(var(--canon-space) * 2); /* 8px */
--canon-space-3: calc(var(--canon-space) * 3); /* 12px */
--canon-space-4: calc(var(--canon-space) * 4); /* 16px */
--canon-space-5: calc(var(--canon-space) * 5); /* 20px */
--canon-space-6: calc(var(--canon-space) * 6); /* 24px */
--canon-space-7: calc(var(--canon-space) * 7); /* 28px */
--canon-space-8: calc(var(--canon-space) * 8); /* 32px */
--canon-space-9: calc(var(--canon-space) * 9); /* 36px */
--canon-space-10: calc(var(--canon-space) * 10); /* 40px */
--canon-space-11: calc(var(--canon-space) * 11); /* 44px */
--canon-space-12: calc(var(--canon-space) * 12); /* 48px */
--canon-space-13: calc(var(--canon-space) * 13); /* 52px */
--canon-space-14: calc(var(--canon-space) * 14); /* 56px */
/* Border radius */
--canon-border-radius-2xs: 0.125rem; /* 2px */
--canon-border-radius-xs: 0.25rem; /* 4px */
--canon-border-radius-sm: 0.5rem; /* 8px */
--canon-border-radius-md: 0.75rem; /* 12px */
--canon-border-radius-lg: 1rem; /* 16px */
--canon-border-radius-xl: 1.25rem; /* 20px */
--canon-border-radius-2xl: 1.5rem; /* 24px */
/* Container */
--canon-container-max-width: 1200px;
--canon-container-padding: 1rem;
/* 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: rgba(0, 0, 0, 0.4);
/* 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 */
--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-hover: rgba(255, 255, 255, 0.3);
--canon-border-warning: #f50000;
--canon-border-error: #f87503;
--canon-border-selected: rgba(255, 255, 255, 0.4);
/* States - Add more states */
--canon-error: #f50000;
/* Text colors */
--canon-text-primary: #fff;
--canon-text-primary-on-accent: #000;
--canon-text-secondary: #b3b3b3;
}