Create themes for olivero/claro and olivero/gin

I've experimented a bit. by adding the following snippet at the end of const colorTheme in skipto.js most of the details for gin work:

    'gin': {
      hostnameSelector: 'drupal.org',
      fontSize: '16px',
      fontFamily: 'var(--gin-font)',
      positionLeft: '7%',
      menuTextColor: 'var(--gin-color-title)',
      menuTextDarkColor: 'var(--gin-color-title)',
      menuBackgroundColor: 'var(--gin-bg-app-rgb)',
      menuBackgroundDarkColor: 'var(--admin-toolbar-color-white)',
      menuitemFocusTextColor: 'var(--gin-color-button-text)',
      menuitemFocusTextDarkColor: 'var(--gin-color-button-text)',
      menuitemFocusBackgroundColor: 'var(--gin-color-primary)',
      menuitemFocusBackgroundDarkColor: 'var(--gin-color-primary)',
      focusBorderColor: 'var(--gin-color-focus)',
      focusBorderDarkColor: 'var(--gin-color-focus)',
      buttonTextColor: 'var(--gin-color-button-text)',
      buttonTextDarkColor: 'var(--gin-color-button-text)',
      buttonBackgroundColor: 'var(--gin-color-primary)',
      buttonBackgroundDarkColor: 'var(--gin-color-primary)',
    }

only problem menuBackgroundColor and menuBackgroundDarkColor seem to have no effect and the background is transparent. the rest aligns to the color styling in gin. but would probably nice to adjust the styling aka form of the button and expanded menu.

i've spent quite a while trying to figure out why the background is being displayed transparent even though the colors are opaque (i even tried simply going with #fff), always the same effect:

i'Ve ended with the preliminary snippet which is also using the right variables for the background compared to #3

    'gin': {
      hostnameSelector: 'drupal.org',
      fontSize: 'var(--gin-font-size)',
      fontFamily: 'var(--gin-font)',
      menuTextColor: 'var(--gin-color-title)',
      menuTextDarkColor: 'var(--gin-color-title)',
      menuBackgroundColor: 'var(--gin-bg-layer)',
      menuBackgroundDarkColor: 'var(--gin-bg-layer)',
      menuitemFocusTextColor: 'var(--gin-color-button-text)',
      menuitemFocusTextDarkColor: 'var(--gin-color-button-text)',
      menuitemFocusBackgroundColor: 'var(--gin-color-primary)',
      menuitemFocusBackgroundDarkColor: 'var(--gin-color-primary)',
      focusBorderColor: 'var(--gin-color-focus)',
      focusBorderDarkColor: 'var(--gin-color-focus)',
      buttonTextColor: 'var(--gin-color-button-text)',
      buttonTextDarkColor: 'var(--gin-color-button-text)',
      buttonBackgroundColor: 'var(--gin-color-primary)',
      buttonBackgroundDarkColor: 'var(--gin-color-primary)',
   }

with those everything is colored in the right way. there are more settings, but with those i failed to get them even properly to override

      zIndex: '2000000',
      z2Index: '20000002',
      zHighlight: '19999',
      hiddenHeadingColor: 'var(--gin-color-title)',
      hiddenHeadingDarkColor: 'var(--gin-color-title)',
      hiddenHeadingBackgroundColor: 'var(--gin-color-primary)',
      hiddenHeadingBackgroundDarkColor: 'var(--gin-color-primary)',
      dialogTextColor: 'red',
      dialogTextDarkColor: 'red',
      dialogBackgroundColor: 'blue',
      dialogBackgroundDarkColor: 'blue',
      dialogBackgroundTitleColor: 'green',
      dialogBackgroundTitleDarkColor: 'green',
      highlightBorderSize: 'x-large',

as you can see the values for the dialog dont take even effect when you apply them to the skipto theme.