Merge dev into main

.github/workflows/publish-docker.yml

@@ -0,0 +1,64 @@
+name: Publish Docker image
+
+on:
+  workflow_dispatch: {}
+  push:
+    branches:
+      - 'main'
+      - 'dev'
+    paths:
+      - 'code/src/**'
+      - 'code/package.json'
+      - 'code/Dockerfile'
+      - '.github/workflows/publish-docker.yml'
+
+jobs:
+  docker-scan:
+    name: ${{ github.event.repository.name }}-docker-scan
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: docker-practice/actions-setup-docker@321477a1e481dd60b05f9b489cf4b9be467aa15c
+      - name: Build
+        run: docker build -f Dockerfile -t user/app:latest .
+        working-directory: code
+      #- name: Scan for vulnerabilities
+      #  uses: crazy-max/ghaction-container-scan@dfa7e54dc32045120f06d0bc8d7724860f5db0ad
+      #  with:
+      #    image: user/app:latest
+      #    severity_threshold: HIGH
+  push-to-registry:
+    name: Push Docker image to Docker Hub
+    needs: docker-scan
+    runs-on: ubuntu-latest
+    # save forks from having issue trying to publish to Docker
+    #  without the correct credentials
+    if: github.repository_owner == 'finos'
+    outputs:
+      digest: ${{ steps.build_publish.outputs.digest }}
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Log in to Docker Hub
+        uses: docker/[email protected]
+        with:
+          username: finos
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/[email protected]
+        with:
+          images: finos/a11y-theme-builder
+          tags: |
+            type=ref,event=branch
+            type=sha
+      - name: Build and push Docker image
+        id: build_publish
+        uses: docker/[email protected]
+        with:
+          context: code
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/security.yml

@@ -52,3 +52,16 @@ jobs:
         with:
           name: Depcheck report
           path: ${{ github.workspace }}/${{ matrix.module-folder }}-reports
+  docker-scan:
+    name: ${{ github.event.repository.name }}-docker-scan
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: docker-practice/actions-setup-docker@321477a1e481dd60b05f9b489cf4b9be467aa15c
+      - name: Build
+        run: docker build -f Dockerfile -t user/app:latest .
+        working-directory: code
+      - name: Scan for vulnerabilities
+        uses: crazy-max/ghaction-container-scan@dfa7e54dc32045120f06d0bc8d7724860f5db0ad
+        with:
+          image: user/app:latest

CONTRIBUTE.md

@@ -55,7 +55,10 @@ This section includes ways to get started with your open source project. Include
 Participating in our project community spans a variety of activities:
 
 * Reporting bugs and enhancements requests
-* Contributing bug/feature solutions
+* Contributing bug/feature solutions and ideas for community content (see issues tagged with the 'community' tag for examples)
+* Joining Community Collaboration Space calls, held every other week at 11am ET (details on the [FINOS Calendar](https://www.finos.org/calendar))
+* Speaking at conferences and meetups to build awareness and community
+* Participating in Collaboration Summits
 * [Improving documentation](https://finos.github.io/a11y-theme-builder/)
 * [Identifying and tracking new use cases](https://finos.github.io/a11y-theme-builder/contribute)
 * Create an example of the project in real world by building something or showing what others have built.

code/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.18-bookworm-slim
+FROM node:18.19-bookworm-slim
 RUN node -v
 # Copy source
 RUN mkdir $HOME/code

code/src/ui/src/App.css

@@ -2,6 +2,7 @@
 .html,body {
     margin: 0;
     padding: 0;
+    overflow: hidden;
 }
 
 .top40 {
@@ -47,7 +48,7 @@ p a:hover {
   display: flex;
   border-radius: 16px;
   gap: 16px;
-  background: "white";
+  background: white;
   border: 1px solid rgba(0,0,0,.15);
   min-height: 24px;
 }
@@ -90,14 +91,14 @@ p a:hover {
     height: 24px;
     margin: 10px;
     float: left;
-    border: 1px solid gray;
+    border: 1px solid rgb(128, 128, 128); /*replaced deprecated gray with rgb equivalent*/
 }
 
 .input-1 {
     width: 100%;
     height: 30px;
     font-size: var(--baseFont);
-    margin: 8px 0px;
+    margin: 8px 0;
 }
 
 .darkmode .background, .darkmode.background {

code/src/ui/src/components/CreateColorTheme.tsx

@@ -154,7 +154,7 @@ export const CreateColorTheme: React.FC<Props> = ({atom, handleDefaultThemeIniti
                               </div>
                               <div className="formRow">
                                   <div className="subtitle1">Button Color</div>
-                                  <div className="small">Note: The "To Color" will be limited to those colors with the same "On Color" or text color to make sure the gradiemt meets WCAG 2.1 AA contrast guidelines.</div>
+                                  <div className="small">Note: Buttons limited to colors with a contrast against your primary and secondary backgrounds of 3.1: 1 to meet WCAG 2.1 AA Guidelines.</div>
                                   <div className="form-columns top16">
                                       <ColorSelect value={_colorTheme.button} label="Color:"></ColorSelect>
                                   </div>

code/src/ui/src/mui-a11y-tb/themes/TB.css

@@ -400,6 +400,7 @@
   --button-shadow: var(--elevation-1);
   --sm-button-height: 4;
   --sm-button-padding: 2;
+  --mobile-button-radius: calc(calc( calc(var(--button-radius) * var(--radius-1)) / calc(var(--button-height) * var(--spacing-1)) ) * var(--mobile-min-target));
   /* Chips */
   --chip-minwidth: 80px;
   --chip-height: 5;
@@ -2551,8 +2552,8 @@
   }
 
   [data-background="primary"] {
-    --background: var(--primary-alt-background);
-    --alt-background: var(--primary-background);
+    --background: var(--primary-background);
+    --alt-background: var(--primary-alt-background);
     --on-background: var(--primary-on-background);
     /* Button */
     --button: var(--primary-button);

code/src/ui/src/mui-a11y-tb/themes/Theme.css

@@ -1723,6 +1723,9 @@ button.MuiPaginationItem-root:hover {
   position: relative;
   box-shadow: var(--sliderhandle-shadow);
 }
+.MuiSwitch-root:hover .MuiSwitch-switchBase:hover {
+  box-shadow: none;
+}
 .MuiSwitch-root .MuiSwitch-switchBase .MuiSwitch-thumb::after {
   position: absolute;
   pointer-events: none;
@@ -1795,6 +1798,7 @@ button.MuiPaginationItem-root:hover {
   height: var(--min-target) !important;
   width: var(--min-target)  !important;
   background: transparent !important;
+  box-shadow: none !important;
 }
 .MuiSlider-root .MuiSlider-thumb::before {
   height: calc( var(--sliderhandleHeight) * var(--spacing-1) );
@@ -1823,6 +1827,8 @@ button.MuiPaginationItem-root:hover {
    box-shadow: none !important;
  }
 
+
+
 /* popovers */
 .MuiPopover-paper {
    border-radius: calc(var(--popoverRadius) * var(--radius-1)) !important;
@@ -1937,6 +1943,9 @@ button.MuiPaginationItem-root:hover {
   bottom: calc(0px - calc(var(--focusBorder) + 2px));
   opacity: 1;
 }
+.MuiSwitch-switchBase:hover {
+  background-color: transparent !important;
+}
 /* icons */
 .icon-body {
   display: flex;

code/src/ui/src/mui-a11y-tb/themes/Theme.jsx

@@ -942,7 +942,6 @@ try {
                         height: "calc(var(--sliderhandleHeight) * var(--spacing-1))",
                         width: "calc(var(--sliderhandleHeight) * var(--spacing-1) )",
                         borderRadius: "calc(var(--sliderhandleRadius) * var(--radius-1))",
-                       boxShadow: "var(--sliderhandle-shadow)",
                        backgroundColor: "var(--button)",
                        position: "absolute",
                        top: "50%",
@@ -1033,7 +1032,7 @@ try {
                             minHeight: "calc( calc( var(--chip-height) * var(--spacing-1) ) - calc( var(--border-1) * var(--button-border) * 2 ))",
                         },
                         "&:hover::after": {
-                            opacity: "var(--button-half)",
+                            opacity: ".5",
                             top:    "calc(((var(--min-target) - (var(--spacing-1) * var(--chip-height)))/2) - 3px)",
                             bottom: "calc(((var(--min-target) - (var(--spacing-1) * var(--chip-height)))/2) - 3px)",
                             left: "calc(-1px - calc(var(--border-1) * 2))",