Skip to content

Commit

Permalink
Reorder theme colors to make it easier to reason over groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@thsparks
thsparks committed Feb 12, 2025
1 parent 385b291 commit 5b1fff4
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 106 deletions.
33 changes: 14 additions & 19 deletions docfiles/themes/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ Colors:
|-------------------------------|----------------------------|
| pxt-target-background1 | Blockly Workspace Bkg |
| pxt-target-background1-light | |
| pxt-target-background2 | Sim Sidebar Bkg |
| pxt-target-background2-light | |
| pxt-target-background3 | Toolbox & Bottom Bar Bkg |
| pxt-target-foreground1 | Blockly Workspace Fg |
| pxt-target-foreground1-hover | |
| pxt-target-stencil1 | Outlines for Blockly Workspace |
| pxt-target-background2 | Sim Sidebar Bkg |
| pxt-target-background2-light | |
| pxt-target-foreground2 | Sim Sidebar Fg |
| pxt-target-foreground2-hover | |
| pxt-target-stencil2 | Outlines for Sim Sidebar |
| pxt-target-background3 | Toolbox & Bottom Bar Bkg |
| pxt-target-foreground3 | Toolbox & Bottom Bar Fg |
| pxt-target-foreground3-hover | |
| pxt-target-stencil1 | Outlines for Blockly Workspace |
| pxt-target-stencil2 | Outlines for Sim Sidebar |
| pxt-target-stencil3 | Outlines for Toolbox & Bottom Bar |
| pxt-header-background | Header Bar Bkg |
| pxt-header-background-alpha30 | Header Bar Bkg 30% Opacity |
Expand All @@ -48,27 +48,22 @@ Colors:
| pxt-tertiary-alpha50 | 50% Opacity |
| pxt-tertiary-foreground | Tour bubbles, additional btns fg |
| pxt-neutral-background1 | Modal Header & Body Bkg, Code Card Bkg |
| pxt-neutral-background2 | Modal Footer Bkg |
| pxt-neutral-background3 | Expanded code card bkg |
| pxt-neutral-alpha05 | 5% opacity fade |
| pxt-neutral-alpha20 | 20% opacity fade |
| pxt-neutral-alpha50 | 50% opacity fade |
| pxt-neutral-foreground1 | Modal Header & Body Fg |
| pxt-neutral-foreground2 | Modal Footer Fg |
| pxt-neutral-foreground3 | Expanded code card Fg |
| pxt-neutral-hover1 | |
| pxt-neutral-hover2 | |
| pxt-neutral-hover3 | |
| pxt-neutral-stencil1 | Modal Horizontal Lines |
| pxt-neutral-background2 | Modal Footer Bkg |
| pxt-neutral-foreground2 | Modal Footer Fg |
| pxt-neutral-hover2 | |
| pxt-neutral-stencil2 | Code Card Border |
| pxt-neutral-background3 | Expanded code card bkg |
| pxt-neutral-foreground3 | Expanded code card Fg |
| pxt-neutral-hover3 | |
| pxt-neutral-stencil3 | Expanded code card border |
| pxt-neutral-alpha05 | 5% opacity fade |
| pxt-neutral-alpha20 | 20% opacity fade |
| pxt-neutral-alpha50 | 50% opacity fade |
| pxt-neutral-button-background | Unthemed Buttons Bkg |
| pxt-neutral-button-foreground | Unthemed Buttons Fg |
| pxt-variant-foreground1 | Debugger Text |
| pxt-variant-foreground2 | Debugger Text |
| pxt-variant-foreground3 | Debugger Text |
| pxt-variant-foreground4 | Debugger Text |
| pxt-variant-foreground5 | Debugger Text |
| pxt-link | Link Text |
| pxt-link-hover | Link Text Hover |
| pxt-focus-border | Border for focused elements |
Expand Down
41 changes: 27 additions & 14 deletions docfiles/themes/arcade-legacy.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,60 +6,73 @@
"pxt-target-background1": "#FEF3E0",
"pxt-target-background1-light": "#ffffff",
"pxt-target-background1-dark": "#dedede",
"pxt-target-background2": "#B1E1DA",
"pxt-target-background2-light": "#b8e4dd",
"pxt-target-background3": "#FEF3E0",
"pxt-target-foreground1": "#000000",
"pxt-target-foreground1-hover": "#333333",
"pxt-target-stencil1": "#e4d9c7",

"pxt-target-background2": "#B1E1DA",
"pxt-target-background2-light": "#b8e4dd",
"pxt-target-foreground2": "#000000",
"pxt-target-foreground2-hover": "#333333",
"pxt-target-stencil2": "#b0b0b0",

"pxt-target-background3": "#FEF3E0",
"pxt-target-foreground3": "#000000",
"pxt-target-foreground3-hover": "#333333",
"pxt-target-stencil1": "#e4d9c7",
"pxt-target-stencil2": "#b0b0b0",
"pxt-target-stencil3": "#e4d9c7",

"pxt-header-background": "#F76820",
"pxt-header-background-alpha30": "#F768201E",
"pxt-header-foreground": "#FFFFFF",

"pxt-primary-background": "#F76820",
"pxt-primary-background-hover": "#fe5500",
"pxt-primary-alpha0": "#F7682000",
"pxt-primary-alpha90": "#F768205A",
"pxt-primary-dark": "#AB3D06",
"pxt-primary-light": "#FBAB82",
"pxt-primary-foreground": "#FFFFFF",

"pxt-secondary-background": "#028B9B",
"pxt-secondary-background-hover": "#015e69",
"pxt-secondary-alpha0": "#028B9B00",
"pxt-secondary-alpha50": "#028B9B7F",
"pxt-secondary-dark": "#005D6A",
"pxt-secondary-light": "#58afba",
"pxt-secondary-foreground": "#FFFFFF",

"pxt-tertiary-background": "#028B9B",
"pxt-tertiary-background-hover": "#015e69",
"pxt-tertiary-alpha20": "#028B9B33",
"pxt-tertiary-alpha50": "#028B9B7F",
"pxt-tertiary-foreground": "#FFFFFF",

"pxt-neutral-background1": "#FFFFFF",
"pxt-neutral-background2": "#F9FAFB",
"pxt-neutral-background3": "#4e5758",
"pxt-neutral-alpha05": "rgba(0, 0, 0, 0.05)",
"pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
"pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)",
"pxt-neutral-foreground1": " rgba(0,0,0,.85) ",
"pxt-neutral-foreground2": "rgba(0,0,0,.87)",
"pxt-neutral-foreground3": "#FFFFFF",
"pxt-neutral-hover1": "#cccccc",
"pxt-neutral-hover2": "#e0e0e0",
"pxt-neutral-hover3": "#363c3d",
"pxt-neutral-stencil1": "rgba(34, 36, 38, .15)",

"pxt-neutral-background2": "#F9FAFB",
"pxt-neutral-foreground2": "rgba(0,0,0,.87)",
"pxt-neutral-hover2": "#e0e0e0",
"pxt-neutral-stencil2": "#e9eef2",

"pxt-neutral-background3": "#4e5758",
"pxt-neutral-foreground3": "#FFFFFF",
"pxt-neutral-hover3": "#363c3d",
"pxt-neutral-stencil3": "#FFFFFF",

"pxt-neutral-alpha05": "rgba(0, 0, 0, 0.05)",
"pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
"pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)",

"pxt-neutral-button-background": "#e0e1e2",
"pxt-neutral-button-foreground": "#323130",

"pxt-link": "#3977B4",
"pxt-link-hover": "#204467",
"pxt-focus-border": "#0078D4",

"pxt-colors-purple-background": "#6B4F76",
"pxt-colors-purple-foreground": "#FFFFFF",
"pxt-colors-purple-hover": "#4f3b57",
Expand Down
41 changes: 27 additions & 14 deletions docfiles/themes/arcade-light.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,73 @@
"colors": {
"pxt-target-background1": "#F8FAFC",
"pxt-target-background1-light": "#ffffff",
"pxt-target-background2": "#F8FAFC",
"pxt-target-background2-light": "#ffffff",
"pxt-target-background3": "#F8FAFC",
"pxt-target-foreground1": "#000000",
"pxt-target-foreground1-hover": "#333333",
"pxt-target-stencil1": "#e1e1e1",

"pxt-target-background2": "#F8FAFC",
"pxt-target-background2-light": "#ffffff",
"pxt-target-foreground2": "#000000",
"pxt-target-foreground2-hover": "#333333",
"pxt-target-stencil2": "#e1e1e1",

"pxt-target-background3": "#F8FAFC",
"pxt-target-foreground3": "#000000",
"pxt-target-foreground3-hover": "#333333",
"pxt-target-stencil1": "#e1e1e1",
"pxt-target-stencil2": "#e1e1e1",
"pxt-target-stencil3": "#e1e1e1",

"pxt-header-background": "#116E79",
"pxt-header-background-alpha30": "#116E791E",
"pxt-header-foreground": "#FFFFFF",

"pxt-primary-background": "#5D4FBA",
"pxt-primary-background-hover": "#4d3eb1",
"pxt-primary-alpha0": "#5D4FBA00",
"pxt-primary-alpha90": "#5D4FBA5A",
"pxt-primary-dark": "#372E75",
"pxt-primary-light": "#a098d7",
"pxt-primary-foreground": "#FFFFFF",

"pxt-secondary-background": "#5D4FBA",
"pxt-secondary-background-hover": "#483c9a",
"pxt-secondary-alpha0": "#5D4FBA00",
"pxt-secondary-alpha50": "#5D4FBA7F",
"pxt-secondary-dark": "#372E75",
"pxt-secondary-light": "#7569c4",
"pxt-secondary-foreground": "#F8FAFC",

"pxt-tertiary-background": "#116E79",
"pxt-tertiary-background-hover": "#0b454c",
"pxt-tertiary-alpha20": "#116E7933",
"pxt-tertiary-alpha50": "#116E797F",
"pxt-tertiary-foreground": "#FFFFFF",

"pxt-neutral-background1": "#FFFFFF",
"pxt-neutral-background2": "#F9FAFB",
"pxt-neutral-background3": "#4e5758",
"pxt-neutral-alpha05": "rgba(0, 0, 0, 0.05)",
"pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
"pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)",
"pxt-neutral-foreground1": "rgba(0,0,0,.85)",
"pxt-neutral-foreground2": "rgba(0,0,0,.87)",
"pxt-neutral-foreground3": "#FFFFFF",
"pxt-neutral-hover1": "#cccccc",
"pxt-neutral-hover2": "#e0e0e0",
"pxt-neutral-hover3": "#363c3d",
"pxt-neutral-stencil1": "rgba(34, 74, 114, 0.15)",

"pxt-neutral-background2": "#F9FAFB",
"pxt-neutral-foreground2": "rgba(0,0,0,.87)",
"pxt-neutral-hover2": "#e0e0e0",
"pxt-neutral-stencil2": "#e9eef2",

"pxt-neutral-background3": "#4e5758",
"pxt-neutral-foreground3": "#FFFFFF",
"pxt-neutral-hover3": "#363c3d",
"pxt-neutral-stencil3": "#FFFFFF",

"pxt-neutral-alpha05": "rgba(0, 0, 0, 0.05)",
"pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
"pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)",

"pxt-neutral-button-background": "#e0e1e2",
"pxt-neutral-button-foreground": "#323130",

"pxt-link": "#3977B4",
"pxt-link-hover": "#204467",
"pxt-focus-border": "#0078D4",

"pxt-colors-purple-background": "#5D4FBA",
"pxt-colors-purple-foreground": "#FFFFFF",
"pxt-colors-purple-hover": "#483c9a",
Expand Down
58 changes: 27 additions & 31 deletions docfiles/themes/base-theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,72 @@
--pxt-target-background1: #f0f0f0;
--pxt-target-background1-light: #ffffff;
--pxt-target-background1-dark: #dedede;
--pxt-target-background2: #f0f0f0;
--pxt-target-background2-light: #ffffff;
--pxt-target-background3: #f0f0f0;
--pxt-target-foreground1: #333333;
--pxt-target-foreground1-hover: #555555;
--pxt-target-stencil1: #e1e1e1;

--pxt-target-background2: #f0f0f0;
--pxt-target-background2-light: #ffffff;
--pxt-target-foreground2: #333333;
--pxt-target-foreground2-hover: #555555;
--pxt-target-stencil2: #e1e1e1;

--pxt-target-background3: #f0f0f0;
--pxt-target-foreground3: #333333;
--pxt-target-foreground3-hover: #555555;
--pxt-target-stencil1: #e1e1e1;
--pxt-target-stencil2: #e1e1e1;
--pxt-target-stencil3: #e1e1e1;

--pxt-header-background: #888888;
--pxt-header-background-alpha30: #8888884D;
--pxt-header-foreground: #ffffff;

--pxt-primary-background: #aaaaaa;
--pxt-primary-background-hover: #bbbbbb;
--pxt-primary-alpha0: #aaaaaa00;
--pxt-primary-alpha90: #aaaaaa5A;
--pxt-primary-dark: #888888;
--pxt-primary-light: #cccccc;
--pxt-primary-foreground: #ffffff;

--pxt-secondary-background: #aaaaaa;
--pxt-secondary-background-hover: #bbbbbb;
--pxt-secondary-alpha0: #aaaaaa00;
--pxt-secondary-dark: #767676;
--pxt-secondary-light: #9a9a9a;
--pxt-secondary-foreground: #f0f0f0;

--pxt-tertiary-background: #909090;
--pxt-tertiary-background-hover: "#777777";
--pxt-tertiary-alpha20: #90909033;
--pxt-tertiary-alpha50: #9090907F;
--pxt-tertiary-foreground: #ffffff;

--pxt-neutral-background1: #ffffff;
--pxt-neutral-background2: #f9f9f9;
--pxt-neutral-background3: #4e5758;
--pxt-neutral-alpha05: rgba(0, 0, 0, 0.05);
--pxt-neutral-alpha20: rgba(0, 0, 0, 0.2);
--pxt-neutral-alpha50: rgba(0, 0, 0, 0.5);
--pxt-neutral-foreground1: rgba(0, 0, 0, 0.85);
--pxt-neutral-foreground2: rgba(0, 0, 0, 0.87);
--pxt-neutral-foreground3: #000000;
--pxt-neutral-hover1: #cccccc;
--pxt-neutral-hover2: #e0e0e0;
--pxt-neutral-hover3: #363c3d;
--pxt-neutral-stencil1: rgba(136, 136, 136, 0.15);

--pxt-neutral-background2: #f9f9f9;
--pxt-neutral-foreground2: rgba(0, 0, 0, 0.87);
--pxt-neutral-hover2: #e0e0e0;
--pxt-neutral-stencil2: #e9eef2;

--pxt-neutral-background3: #4e5758;
--pxt-neutral-foreground3: #000000;
--pxt-neutral-hover3: #363c3d;
--pxt-neutral-stencil3: #FFFFFF;

--pxt-neutral-alpha05: rgba(0, 0, 0, 0.05);
--pxt-neutral-alpha20: rgba(0, 0, 0, 0.2);
--pxt-neutral-alpha50: rgba(0, 0, 0, 0.5);

--pxt-neutral-button-background: #e0e1e2;
--pxt-neutral-button-foreground: #333333;

--pxt-link: #3977B4;
--pxt-link-hover: #204467;
--pxt-focus-border: #0078D4;

--pxt-colors-purple-background: #9932cc;
--pxt-colors-purple-foreground: #FFFFFF;
--pxt-colors-purple-hover: #7a28a3;
Expand Down Expand Up @@ -82,21 +95,4 @@
--pxt-colors-yellow-foreground: #FFFFFF;
--pxt-colors-yellow-hover: rgb(153, 132, 0);
--pxt-colors-yellow-alpha50: #c0a0007F;

/*
--pxt-neutral-background3: ;
--pxt-neutral-foreground3: ;
--pxt-color-palette-green-background1: ;
--pxt-color-palette-green-background2: ;
--pxt-color-palette-green-foreground1: ;
--pxt-color-palette-green-foreground2: ;
--pxt-color-palette-green-hover: ;
--pxt-color-palette-green-border: ;
--pxt-color-palette-red-background1: ;
--pxt-color-palette-red-background2: ;
--pxt-color-palette-red-foreground1: ;
--pxt-color-palette-red-foreground2: ;
--pxt-color-palette-red-hover: ;
--pxt-color-palette-red-border: ;
*/
}
Loading

0 comments on commit 5b1fff4

Please sign in to comment.