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

Merge pull request #29543 from backstage/canon-gray-scale

Browse Source 
Canon - Add gray scale
This commit is contained in:
Charles de Dreuille
2025-04-10 09:28:09 +02:00
committed by GitHub
parent 48ebe1c801 f25a5bee44
commit 6b15e7c018
4 changed files with 110 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/tricky-loops-repair.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Added a new gray scale for Canon for both light and dark theme.
packages/canon/css/core.css
+33 -15
View File
@@ -9127,9 +9127,19 @@
--canon-radius-5: calc(1rem);
--canon-radius-6: calc(1.25rem);
--canon-radius-full: 9999px;
--canon-bg: #f8f8f8;
--canon-bg-surface-1: #fff;
--canon-bg-surface-2: #ececec;
--canon-black: #000;
--canon-white: #fff;
--canon-gray-1: #f8f8f8;
--canon-gray-2: #ececec;
--canon-gray-3: #d9d9d9;
--canon-gray-4: #c1c1c1;
--canon-gray-5: #9e9e9e;
--canon-gray-6: #8c8c8c;
--canon-gray-7: #757575;
--canon-gray-8: #595959;
--canon-bg: var(--canon-gray-1);
--canon-bg-surface-1: var(--canon-white);
--canon-bg-surface-2: var(--canon-gray-2);
--canon-bg-solid: #1f5493;
--canon-bg-solid-hover: #163a66;
--canon-bg-solid-pressed: #0f2b4e;
@@ -9141,15 +9151,15 @@
--canon-bg-danger: #feebe7;
--canon-bg-warning: #fff2b2;
--canon-bg-success: #e6f6eb;
--canon-fg-primary: #000;
--canon-fg-secondary: #757575;
--canon-fg-primary: var(--canon-black);
--canon-fg-secondary: var(--canon-gray-7);
--canon-fg-link: #1f5493;
--canon-fg-link-hover: #1f2d5c;
--canon-fg-disabled: #9e9e9e;
--canon-fg-solid: #fff;
--canon-fg-solid: var(--canon-white);
--canon-fg-solid-disabled: #9c9c9c;
--canon-fg-tint: #1f5493;
--canon-fg-tint-disabled: #9e9e9e;
--canon-fg-tint-disabled: var(--canon-gray-5);
--canon-fg-danger: #e22b2b;
--canon-fg-warning: #e36d05;
--canon-fg-success: #1db954;
@@ -9166,9 +9176,17 @@
}
[data-theme="dark"] {
--canon-bg: #000;
--canon-bg-surface-1: #191919;
--canon-bg-surface-2: #242424;
--canon-gray-1: #191919;
--canon-gray-2: #242424;
--canon-gray-3: #373737;
--canon-gray-4: #464646;
--canon-gray-5: #575757;
--canon-gray-6: #7b7b7b;
--canon-gray-7: #9e9e9e;
--canon-gray-8: #b4b4b4;
--canon-bg: var(--canon-black);
--canon-bg-surface-1: var(--canon-gray-1);
--canon-bg-surface-2: var(--canon-gray-2);
--canon-bg-solid: #9cc9ff;
--canon-bg-solid-hover: #83b9fd;
--canon-bg-solid-pressed: #83b9fd;
@@ -9180,15 +9198,15 @@
--canon-bg-danger: #3b1219;
--canon-bg-warning: #302008;
--canon-bg-success: #132d21;
--canon-fg-primary: #fff;
--canon-fg-secondary: #9e9e9e;
--canon-fg-primary: var(--canon-white);
--canon-fg-secondary: var(--canon-gray-7);
--canon-fg-link: #9cc9ff;
--canon-fg-link-hover: #7eb5f7;
--canon-fg-disabled: #9e9e9e;
--canon-fg-disabled: var(--canon-gray-7);
--canon-fg-solid: #101821;
--canon-fg-solid-disabled: #575757;
--canon-fg-solid-disabled: var(--canon-gray-5);
--canon-fg-tint: #9cc9ff;
--canon-fg-tint-disabled: #575757;
--canon-fg-tint-disabled: var(--canon-gray-5);
--canon-fg-danger: #e22b2b;
--canon-fg-warning: #e36d05;
--canon-fg-success: #1db954;
packages/canon/css/styles.css
+33 -15
View File
@@ -9127,9 +9127,19 @@
--canon-radius-5: calc(1rem);
--canon-radius-6: calc(1.25rem);
--canon-radius-full: 9999px;
--canon-bg: #f8f8f8;
--canon-bg-surface-1: #fff;
--canon-bg-surface-2: #ececec;
--canon-black: #000;
--canon-white: #fff;
--canon-gray-1: #f8f8f8;
--canon-gray-2: #ececec;
--canon-gray-3: #d9d9d9;
--canon-gray-4: #c1c1c1;
--canon-gray-5: #9e9e9e;
--canon-gray-6: #8c8c8c;
--canon-gray-7: #757575;
--canon-gray-8: #595959;
--canon-bg: var(--canon-gray-1);
--canon-bg-surface-1: var(--canon-white);
--canon-bg-surface-2: var(--canon-gray-2);
--canon-bg-solid: #1f5493;
--canon-bg-solid-hover: #163a66;
--canon-bg-solid-pressed: #0f2b4e;
@@ -9141,15 +9151,15 @@
--canon-bg-danger: #feebe7;
--canon-bg-warning: #fff2b2;
--canon-bg-success: #e6f6eb;
--canon-fg-primary: #000;
--canon-fg-secondary: #757575;
--canon-fg-primary: var(--canon-black);
--canon-fg-secondary: var(--canon-gray-7);
--canon-fg-link: #1f5493;
--canon-fg-link-hover: #1f2d5c;
--canon-fg-disabled: #9e9e9e;
--canon-fg-solid: #fff;
--canon-fg-solid: var(--canon-white);
--canon-fg-solid-disabled: #9c9c9c;
--canon-fg-tint: #1f5493;
--canon-fg-tint-disabled: #9e9e9e;
--canon-fg-tint-disabled: var(--canon-gray-5);
--canon-fg-danger: #e22b2b;
--canon-fg-warning: #e36d05;
--canon-fg-success: #1db954;
@@ -9166,9 +9176,17 @@
}
[data-theme="dark"] {
--canon-bg: #000;
--canon-bg-surface-1: #191919;
--canon-bg-surface-2: #242424;
--canon-gray-1: #191919;
--canon-gray-2: #242424;
--canon-gray-3: #373737;
--canon-gray-4: #464646;
--canon-gray-5: #575757;
--canon-gray-6: #7b7b7b;
--canon-gray-7: #9e9e9e;
--canon-gray-8: #b4b4b4;
--canon-bg: var(--canon-black);
--canon-bg-surface-1: var(--canon-gray-1);
--canon-bg-surface-2: var(--canon-gray-2);
--canon-bg-solid: #9cc9ff;
--canon-bg-solid-hover: #83b9fd;
--canon-bg-solid-pressed: #83b9fd;
@@ -9180,15 +9198,15 @@
--canon-bg-danger: #3b1219;
--canon-bg-warning: #302008;
--canon-bg-success: #132d21;
--canon-fg-primary: #fff;
--canon-fg-secondary: #9e9e9e;
--canon-fg-primary: var(--canon-white);
--canon-fg-secondary: var(--canon-gray-7);
--canon-fg-link: #9cc9ff;
--canon-fg-link-hover: #7eb5f7;
--canon-fg-disabled: #9e9e9e;
--canon-fg-disabled: var(--canon-gray-7);
--canon-fg-solid: #101821;
--canon-fg-solid-disabled: #575757;
--canon-fg-solid-disabled: var(--canon-gray-5);
--canon-fg-tint: #9cc9ff;
--canon-fg-tint-disabled: #575757;
--canon-fg-tint-disabled: var(--canon-gray-5);
--canon-fg-danger: #e22b2b;
--canon-fg-warning: #e36d05;
--canon-fg-success: #1db954;
packages/canon/src/css/core.css
+39 -15
View File
@@ -75,10 +75,24 @@
--canon-radius-6: calc(1.25rem);
--canon-radius-full: 9999px;
/* Base Colors */
--canon-black: #000000;
--canon-white: #ffffff;
/* Gray scale */
--canon-gray-1: #f8f8f8;
--canon-gray-2: #ececec;
--canon-gray-3: #d9d9d9;
--canon-gray-4: #c1c1c1;
--canon-gray-5: #9e9e9e;
--canon-gray-6: #8c8c8c;
--canon-gray-7: #757575;
--canon-gray-8: #595959;
/* Background Colors */
--canon-bg: #f8f8f8;
--canon-bg-surface-1: #fff;
--canon-bg-surface-2: #ececec;
--canon-bg: var(--canon-gray-1);
--canon-bg-surface-1: var(--canon-white);
--canon-bg-surface-2: var(--canon-gray-2);
--canon-bg-solid: #1f5493;
--canon-bg-solid-hover: #163a66;
--canon-bg-solid-pressed: #0f2b4e;
@@ -92,15 +106,15 @@
--canon-bg-success: #e6f6eb;
/* Foreground Colors */
--canon-fg-primary: #000000;
--canon-fg-secondary: #757575;
--canon-fg-primary: var(--canon-black);
--canon-fg-secondary: var(--canon-gray-7);
--canon-fg-link: #1f5493;
--canon-fg-link-hover: #1f2d5c;
--canon-fg-disabled: #9e9e9e;
--canon-fg-solid: #ffffff;
--canon-fg-solid: var(--canon-white);
--canon-fg-solid-disabled: #9c9c9c;
--canon-fg-tint: #1f5493;
--canon-fg-tint-disabled: #9e9e9e;
--canon-fg-tint-disabled: var(--canon-gray-5);
--canon-fg-danger: #e22b2b;
--canon-fg-warning: #e36d05;
--canon-fg-success: #1db954;
@@ -122,10 +136,20 @@
/* Dark theme tokens */
[data-theme='dark'] {
/* Gray scale */
--canon-gray-1: #191919;
--canon-gray-2: #242424;
--canon-gray-3: #373737;
--canon-gray-4: #464646;
--canon-gray-5: #575757;
--canon-gray-6: #7b7b7b;
--canon-gray-7: #9e9e9e;
--canon-gray-8: #b4b4b4;
/* Background Colors */
--canon-bg: #000000;
--canon-bg-surface-1: #191919;
--canon-bg-surface-2: #242424;
--canon-bg: var(--canon-black);
--canon-bg-surface-1: var(--canon-gray-1);
--canon-bg-surface-2: var(--canon-gray-2);
--canon-bg-solid: #9cc9ff;
--canon-bg-solid-hover: #83b9fd;
--canon-bg-solid-pressed: #83b9fd;
@@ -139,15 +163,15 @@
--canon-bg-success: #132d21;
/* Foreground Colors */
--canon-fg-primary: #ffffff;
--canon-fg-secondary: #9e9e9e;
--canon-fg-primary: var(--canon-white);
--canon-fg-secondary: var(--canon-gray-7);
--canon-fg-link: #9cc9ff;
--canon-fg-link-hover: #7eb5f7;
--canon-fg-disabled: #9e9e9e;
--canon-fg-disabled: var(--canon-gray-7);
--canon-fg-solid: #101821;
--canon-fg-solid-disabled: #575757;
--canon-fg-solid-disabled: var(--canon-gray-5);
--canon-fg-tint: #9cc9ff;
--canon-fg-tint-disabled: #575757;
--canon-fg-tint-disabled: var(--canon-gray-5);
--canon-fg-danger: #e22b2b;
--canon-fg-warning: #e36d05;
--canon-fg-success: #1db954;