More color override work. Change some "teal" to "tertiary".

microsoft · Feb 12, 2025 · 20f5f7c · 20f5f7c
1 parent 10a36fa
commit 20f5f7c
Show file tree

Hide file tree

Showing 16 changed files with 261 additions and 212 deletions.
diff --git a/docfiles/themes/README.md b/docfiles/themes/README.md
@@ -73,16 +73,16 @@ Colors:
 | pxt-link-hover                | Link Text Hover            |
 | pxt-focus-border              | Border for focused elements |
 | pxt-colors-purple-background1 | Purple color               |
-| pxt-colors-purple-foreground  | Fg for purple controls     |
+| pxt-colors-purple-foreground  | Fg for purple buttons      |
 | pxt-colors-purple-hover       |                            |
 | pxt-colors-orange-background1 | Orange color               |
-| pxt-colors-orange-foreground  | Fg for orange controls     |
+| pxt-colors-orange-foreground  | Fg for orange buttons      |
 | pxt-colors-orange-hover       |                            |
 | pxt-colors-brown-background1  | Brown color                |
-| pxt-colors-brown-foreground   | Fg for brown controls      |
+| pxt-colors-brown-foreground   | Fg for brown buttons       |
 | pxt-colors-brown-hover        |                            |
 | pxt-colors-blue-background1   | Blue color                 |
-| pxt-colors-blue-foreground    | Fg for blue controls       |
+| pxt-colors-blue-foreground    | Fg for blue buttons        |
 | pxt-colors-blue-hover         |                            |
 | pxt-colors-green-background1  | OK Buttons, etc...         |
 | pxt-colors-green-foreground1  | OK Buttons, etc...         |
@@ -92,6 +92,9 @@ Colors:
 | pxt-colors-red-foreground     |                            |
 | pxt-colors-red-hover          |                            |
 | pxt-colors-red-alpha50        | Git add coloring           |
+| pxt-colors-teal-background1   | Teal Color                 |
+| pxt-colors-teal-foreground    | Fg for teal buttons        |
+| pxt-colors-teal-hover         |                            |
 | pxt-colors-yellow-background1 | Warn Buttons Bkg           |
 | pxt-colors-yellow-foreground  |                            |
 | pxt-colors-yellow-hover       |                            |

diff --git a/docfiles/themes/arcade-legacy.json b/docfiles/themes/arcade-legacy.json
@@ -60,9 +60,9 @@
         "pxt-link": "#3977B4",
         "pxt-link-hover": "#204467",
         "pxt-focus-border": "#0078D4",
-        "pxt-colors-purple-background1": "#9932cc",
+        "pxt-colors-purple-background1": "#6B4F76",
         "pxt-colors-purple-foreground": "#FFFFFF",
-        "pxt-colors-purple-hover": "#7a28a3",
+        "pxt-colors-purple-hover": "#4f3b57",
         "pxt-colors-orange-background1": "#ff7f50",
         "pxt-colors-orange-foreground": "#FFFFFF",
         "pxt-colors-orange-hover": "#ff5a1d",
@@ -80,6 +80,9 @@
         "pxt-colors-red-foreground": "#FFFFFF",
         "pxt-colors-red-hover": "#8f0000",
         "pxt-colors-red-alpha50": "#a800007F",
+        "pxt-colors-teal-background1": "#028B9B",
+        "pxt-colors-teal-foreground": "#FFFFFF",
+        "pxt-colors-teal-hover": "#015e69",
         "pxt-colors-yellow-background1": "#c0a000",
         "pxt-colors-yellow-foreground": "#FFFFFF",
         "pxt-colors-yellow-hover": "rgb(153, 132, 0)",

diff --git a/docfiles/themes/arcade-light.json b/docfiles/themes/arcade-light.json
@@ -59,12 +59,12 @@
         "pxt-link": "#3977B4",
         "pxt-link-hover": "#204467",
         "pxt-focus-border": "#0078D4",
-        "pxt-colors-purple-background1": "#9932cc",
+        "pxt-colors-purple-background1": "#5D4FBA",
         "pxt-colors-purple-foreground": "#FFFFFF",
-        "pxt-colors-purple-hover": "#7a28a3",
-        "pxt-colors-orange-background1": "#ff7f50",
+        "pxt-colors-purple-hover": "#483c9a",
+        "pxt-colors-orange-background1": "#F76820",
         "pxt-colors-orange-foreground": "#FFFFFF",
-        "pxt-colors-orange-hover": "#ff5a1d",
+        "pxt-colors-orange-hover": "#dc4f08",
         "pxt-colors-brown-background1": "#663905",
         "pxt-colors-brown-foreground": "#FFFFFF",
         "pxt-colors-brown-hover": "#351e03",
@@ -79,9 +79,12 @@
         "pxt-colors-red-foreground": "#FFFFFF",
         "pxt-colors-red-hover": "#8f0000",
         "pxt-colors-red-alpha50": "#a800007F",
-        "pxt-colors-yellow-background1": "#c0a000",
-        "pxt-colors-yellow-foreground": "#FFFFFF",
-        "pxt-colors-yellow-hover": "rgb(153, 132, 0)",
-        "pxt-colors-yellow-alpha50": "#c0a0007F"
+        "pxt-colors-teal-background1": "#116e79",
+        "pxt-colors-teal-foreground": "#FFFFFF",
+        "pxt-colors-teal-hover": "#0b454c",
+        "pxt-colors-yellow-background1": "#f1c40f",
+        "pxt-colors-yellow-foreground": "#000000",
+        "pxt-colors-yellow-hover": "#c29d0b",
+        "pxt-colors-yellow-alpha50": "#f1c40f7F"
     }
 }
diff --git a/docfiles/themes/base-theme.css b/docfiles/themes/base-theme.css
@@ -75,6 +75,9 @@
     --pxt-colors-red-foreground: #FFFFFF;
     --pxt-colors-red-hover: #8f0000;
     --pxt-colors-red-alpha50: #a800007F;
+    --pxt-colors-teal-background1: #008272;
+    --pxt-colors-teal-foreground: #FFFFFF;
+    --pxt-colors-teal-hover: #004f45;
     --pxt-colors-yellow-background1: #c0a000;
     --pxt-colors-yellow-foreground: #FFFFFF;
     --pxt-colors-yellow-hover: rgb(153, 132, 0);

diff --git a/docfiles/themes/high-contrast.json b/docfiles/themes/high-contrast.json
@@ -79,8 +79,11 @@
         "pxt-colors-green-alpha50": "#00FF007F",
         "pxt-colors-red-background1": "#880000",
         "pxt-colors-red-foreground": "#FFFFFF",
-        "pxt-colors-red-hover": "#440000",
+        "pxt-colors-red-hover": "#880000",
         "pxt-colors-red-alpha50": "#8800007F",
+        "pxt-colors-teal-background1": "#5BE0FF",
+        "pxt-colors-teal-foreground": "#000000",
+        "pxt-colors-teal-hover": "#5BE0FF",
         "pxt-colors-yellow-background1": "#00FFFF",
         "pxt-colors-yellow-foreground": "#000000",
         "pxt-colors-yellow-hover": "#00FFFF",

diff --git a/docfiles/themes/microbit-light.json b/docfiles/themes/microbit-light.json
@@ -70,20 +70,23 @@
         "pxt-colors-brown-background1": "#663905",
         "pxt-colors-brown-foreground": "#FFFFFF",
         "pxt-colors-brown-hover": "#351e03",
-        "pxt-colors-blue-background1": "#3454d1",
+        "pxt-colors-blue-background1": "#3454D1",
         "pxt-colors-blue-foreground": "#FFFFFF",
         "pxt-colors-blue-hover": "#2742ab",
         "pxt-colors-green-background1": "#107c10",
         "pxt-colors-green-foreground": "#FFFFFF",
         "pxt-colors-green-hover": "#096a09",
         "pxt-colors-green-alpha50": "#107c107F",
-        "pxt-colors-red-background1": "#e41b21",
+        "pxt-colors-red-background1": "#E41B21",
         "pxt-colors-red-foreground": "#FFFFFF",
         "pxt-colors-red-hover": "#d60f15",
         "pxt-colors-red-alpha50": "#e41b217F",
-        "pxt-colors-yellow-background1": "#c0a000",
-        "pxt-colors-yellow-foreground": "#FFFFFF",
-        "pxt-colors-yellow-hover": "rgb(153, 132, 0)",
-        "pxt-colors-yellow-alpha50": "#c0a0007F"
+        "pxt-colors-teal-background1": "#2C7485",
+        "pxt-colors-teal-foreground": "#FFFFFF",
+        "pxt-colors-teal-hover": "#1f535f",
+        "pxt-colors-yellow-background1": "#FDE74C",
+        "pxt-colors-yellow-foreground": "#000000",
+        "pxt-colors-yellow-hover": "#fce01a",
+        "pxt-colors-yellow-alpha50": "#FDE74C7F"
     }
 }
diff --git a/react-common/components/Notification.tsx b/react-common/components/Notification.tsx
@@ -55,7 +55,7 @@ export class Notification extends React.Component<NotificationProps, Notificatio
             switch (kind) {
                 case 'err': cls = 'red inverted segment'; break;
                 case 'warn': cls = 'orange inverted segment'; break;
-                case 'info': cls = 'teal inverted segment'; break;
+                case 'info': cls = 'blue inverted segment'; break;
                 case 'compile': cls = 'ignored info message'; break;
             }
             return <div key={`${id}`} id={`${kind}msg`} className={`ui ${hc} ${cls}`}>{text}</div>
@@ -79,4 +79,4 @@ export function pushNotificationMessage(options: NotificationOptions): void {
     } else if (notificationMessages) {
         notificationMessages.push(options);
     }
-}
+}
diff --git a/react-common/components/profile/SignInModal.tsx b/react-common/components/profile/SignInModal.tsx
@@ -77,7 +77,7 @@ export const SignInModal = (props: SignInModalProps) => {
                             return (
                                 <Button
                                     key={index}
-                                    className='teal inverted provider'
+                                    className='tertiary inverted provider'
                                     onClick={() => onSignIn(provider, rememberMe)}
                                     title={title}
                                     ariaLabel={title}

diff --git a/react-common/styles/controls/Button.less b/react-common/styles/controls/Button.less
@@ -41,85 +41,11 @@
  *                  Color Variants                   *
  ****************************************************/
 
-.common-button.primary {
-    background: var(--pxt-primary-background);
-    color: var(--pxt-primary-foreground);
-    border: 1px solid var(--pxt-primary-background);
-}
-
-.common-button.secondary {
-    background: var(--pxt-secondary-background);
-    color: var(--pxt-secondary-foreground);
-    border: 1px solid var(--pxt-secondary-background);
-}
-
-.common-button.teal {
-    background: @teal;
-    color: @buttonTextColorDarkBackground;
-    border: 1px solid @teal;
-}
-
-.common-button.blue {
-    background: @blue;
-    color: @buttonTextColorDarkBackground;
-    border: 1px solid @blue;
-}
-
-.common-button.orange {
-    background: @orange;
-    color: @buttonTextColorDarkBackground;
-    border: 1px solid @orange;
-}
-
-.common-button.red {
-    background: @red;
-    color: @buttonTextColorDarkBackground;
-    border: 1px solid @red;
-}
-
-.common-button.green {
-    background: @green;
-    color: @buttonTextColorDarkBackground;
-    border: 1px solid @green;
-}
-
-.common-button.gray, .common-button.grey {
-    background: @buttonGrayColor;
-    color: @buttonTextColorLightBackground;
-    border: 1px solid @buttonGrayColor;
-}
-
-.common-button.primary.inverted {
-    background: var(--pxt-primary-foreground);
-    color: var(--pxt-primary-background);
-}
-
-.common-button.teal.inverted {
-    background: @buttonTextColorDarkBackground;
-    color: @teal;
-}
-
-.common-button.blue.inverted {
-    background: @buttonTextColorDarkBackground;
-    color: @blue;
-}
-
-.common-button.orange.inverted {
-    background: @buttonTextColorDarkBackground;
-    color: @orange;
-}
-
-.common-button.red.inverted {
-    background: @buttonTextColorDarkBackground;
-    color: @red;
-}
-
-.common-button.green.inverted {
-    background: @buttonTextColorDarkBackground;
-    color: @green;
+.common-button {
+    border-width: 1px;
+    border-style: solid;
 }
 
-
 /****************************************************
  *                Disabled Buttons                  *
  ****************************************************/

diff --git a/skillmap/src/components/ActivityActions.tsx b/skillmap/src/components/ActivityActions.tsx
@@ -106,7 +106,7 @@ export class ActivityActionsImpl extends React.Component<ActivityActionsProps> {
         // Apply "grid" class when there are four actions (for a completed activity)
         return <div className={`actions ${completedHeaderId ? "grid" : ""}`}>
             <Button
-                className="teal"
+                className="tertiary"
                 tabIndex={-1}
                 ariaPosInSet={1}
                 ariaSetSize={numberOfActions}
@@ -183,4 +183,4 @@ const mapDispatchToProps = {
     dispatchShowLoginModal
 }
 
-export const ActivityActions = connect(mapStateToProps, mapDispatchToProps)(ActivityActionsImpl);
+export const ActivityActions = connect(mapStateToProps, mapDispatchToProps)(ActivityActionsImpl);
diff --git a/skillmap/src/components/RewardActions.tsx b/skillmap/src/components/RewardActions.tsx
@@ -74,7 +74,7 @@ export class RewardActionsImpl extends React.Component<RewardActionsProps> {
                         tabIndex={-1}
                         ariaPosInSet={3}
                         ariaSetSize={3}
-                        className="teal"
+                        className="tertiary"
                         onClick={dispatchShowLoginModal}
                         label={lf("Sign in to Save")}
                         title={lf("Sign in to Save")}
@@ -104,4 +104,4 @@ const mapDispatchToProps = {
     dispatchShowLoginModal
 }
 
-export const RewardActions = connect(mapStateToProps, mapDispatchToProps)(RewardActionsImpl);
+export const RewardActions = connect(mapStateToProps, mapDispatchToProps)(RewardActionsImpl);