Building my 1st plugin. Theme.json?

It’s my first time building a plugin and I’m a bit confused about the theme.json that I recently heard about.

So the plugin I’m working on is a color palette to override the gutenburg color settings. So I had it set up like this

Plugin folder
-plugin.php <— a bit like functions.php in theme?
-theme.json
-style.css

My plugin.php

<?php

/**
 * Plugin Name: My Plugin
 * Description: This is a plugin to practice
 * Version: 1.0.0
 * Author: Kiki
 *
 */

if( ! defined( 'ABSPATH' ) ) { exit; }

function add_my_plugin_stylesheet() {
    wp_register_style('mypluginstylesheet', '/wp-content/plugins/my-plugin/style.scss');
    wp_enqueue_style('mypluginstylesheet');
}

function wpdc_gutenberg_color_settings() {
  add_theme_support( 'disable-custom-colors' );
  add_theme_support( 'editor-gradient-presets', [] );
  add_theme_support( 'disable-custom-gradients' );
  add_theme_support(
    'editor-color-palette',
    array(
        array(
            'name' => __( 'White', 'themeLangDomain' ),
            'slug' => 'white',
            'color' => '#fff',
        ),
        array(
            'name' => __( 'Primary', 'themeLangDomain' ),
            'slug' => 'primary',
            'color' => '#5bb57a',
        ),
        array(
            'name' => __( 'Secondary', 'themeLangDomain' ),
            'slug' => 'secondary',
            'color' => '#f39708',
        ),
        array(
            'name' => __( 'Tertiary', 'themeLangDomain' ),
            'slug' => 'tertiary',
            'color' => '#ed7aad',
        )    
    )
  );
}
add_action( 'after_setup_theme', 'wpdc_gutenberg_color_settings', 100 );

My theme.json

{
    "version": 1,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Primary",
                    "slug": "primary",
                    "color": "#5bb57a"
                },
                {
                    "name": "Secondary",
                    "slug": "secondary",
                    "color": "#f39708"
                },
                {
                    "name": "Tertiary",
                    "slug": "tertiary",
                    "color": "#ed7aad"
                },
                {
                    "name": "White",
                    "slug": "white",
                    "color": "#ffffff"
                }
            ]
        }
    }
}

style.scss

.has-white-color{color: #ffffff;}
.has-primary-color{color: #5bb57a;}
.has-secondary-color{color: #f39708;}
.has-tertiary-color{color: #ed7aad;}

.has-white-background-color{background-color: #ffffff;}
.has-primary-background-color{background-color: #5bb57a;}
.has-secondary-background-color{background-color: #f39708;}
.has-tertiary-background-color{background-color: #ed7aad;}

What do I need to do to connect it all together or did I do this code correct in my plugin? This code is supposed to have backward compatibility with add_theme_support in case the wordpress version is older like 5.7 or earlier. Is it possible to connect theme.json to add_theme_support('editor-color-palette', array)? That way, when I update the theme.json, it gets updated in plugin.php and style.scss.