Style and namespace your extension

use Bjanczak\FilamentFlexFields\Support\Theme\AppearanceNamespace;
use Bjanczak\FilamentFlexFields\Support\Theme\FlexFieldsTheme;

$appearance = new AppearanceNamespace('acme-rating');
// Or obtain it from your typed installation: $package->appearance().

app(FlexFieldsTheme::class)->mergePackageTheme($appearance, [
    'color' => 'var(--fff-field-focus-border)',
    'radius' => '0.75rem',
]);

$token = $appearance->token('color');
// --fff-ext-acme-rating--token-color
$font = $appearance->font('display');
// fff-ext-acme-rating--font-display
$animation = $appearance->keyframe('enter');
// fff-ext-acme-rating--motion-enter

.fff-acme-rating-value {
    color: var(--fff-ext-acme-rating--token-color, inherit);
    border-radius: var(
        --fff-ext-acme-rating--token-radius,
        var(--fff-global-radius, 0.75rem)
    );
}

@keyframes fff-ext-acme-rating--motion-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

$instance = $context->identity('acme-rating-field', 'rating');
$gradientId = $appearance->svgId($instance, 'gradient');

import { createAppearanceNamespace } from '@bjanczak/flex-fields/sdk/v1';

const appearance = createAppearanceNamespace('acme-rating');
const gradientId = appearance.svgId(instance, 'gradient');
const colorToken = appearance.token('color');