add(widgets) compass icon color vars

Signed-off-by: Chris Gervang <chris@gervang.com>
visgl · Mar 19, 2024 · 6f2d415 · 6f2d415
1 parent c4a395f
commit 6f2d415
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/docs/api-reference/widgets/overview.md b/docs/api-reference/widgets/overview.md
@@ -109,8 +109,10 @@ We've provided a set of CSS variables to make styling UI Widgets more convenient
 | `--button-inner-stroke` | [Border](https://developer.mozilla.org/en-US/docs/Web/CSS/border) | `unset` |
 | `--button-shadow` | [Box Shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) | `0px 0px 8px 0px rgba(0, 0, 0, 0.25)` |
 | `--button-backdrop-filter` | [Backdrop Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) | `unset` |
-| `--button-icon-idle` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(97, 97, 102, 1)`
-| `--button-icon-hover` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(24, 24, 26, 1)`
+| `--button-icon-idle` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(97, 97, 102, 1)` |
+| `--button-icon-hover` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(24, 24, 26, 1)` |
+| `--icon-compass-north-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#F05C44` |
+| `--icon-compass-south-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#C2C2CC` |
 
 ### Icon
 | Name | Type | Default |

diff --git a/modules/widgets/src/compass-widget.tsx b/modules/widgets/src/compass-widget.tsx
@@ -95,8 +95,14 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
         >
           <svg fill="none" width="100%" height="100%" viewBox="0 0 26 26">
             <g transform={`rotate(${rz},13,13)`}>
-              <path d="M10 13.0001L12.9999 5L15.9997 13.0001H10Z" fill="#F05C44" />
-              <path d="M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z" fill="#C2C2CC" />
+              <path
+                d="M10 13.0001L12.9999 5L15.9997 13.0001H10Z"
+                fill="var(--icon-compass-north-color, #F05C44)"
+              />
+              <path
+                d="M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z"
+                fill="var(--icon-compass-south-color, #C2C2CC)"
+              />
             </g>
           </svg>
         </button>

diff --git a/modules/widgets/src/themes.ts b/modules/widgets/src/themes.ts
@@ -5,7 +5,9 @@ export const LightTheme = {
   '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
   '--button-backdrop-filter': 'unset',
   '--button-icon-idle': 'rgba(97, 97, 102, 1)',
-  '--button-icon-hover': 'rgba(24, 24, 26, 1)'
+  '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const DarkTheme = {
@@ -15,7 +17,9 @@ export const DarkTheme = {
   '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
   '--button-backdrop-filter': 'unset',
   '--button-icon-idle': 'rgba(158, 157, 168, 1)',
-  '--button-icon-hover': 'rgba(215, 214, 229, 1)'
+  '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const LightGlassTheme = {
@@ -26,7 +30,9 @@ export const LightGlassTheme = {
     '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
   '--button-backdrop-filter': 'blur(4px)',
   '--button-icon-idle': 'rgba(97, 97, 102, 1)',
-  '--button-icon-hover': 'rgba(24, 24, 26, 1)'
+  '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const DarkGlassTheme = {
@@ -37,5 +43,7 @@ export const DarkGlassTheme = {
     '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
   '--button-backdrop-filter': 'blur(4px)',
   '--button-icon-idle': 'rgba(158, 157, 168, 1)',
-  '--button-icon-hover': 'rgba(215, 214, 229, 1)'
+  '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };