feat(ui-library): fixing caption component styles (#818)

Author: davidken91

packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.css.ts

@@ -1,7 +1,7 @@
 import { typeSafeNestedCss as css } from "../../../../utils/nested-typesafe-css-literals";
 import { renderThemedCssStrings } from "../../../../foundation/_tokens-generated/index.pseudo.generated";
 
-export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = renderThemedCssStrings((componentTokens) => {
+export const { tokenizedLight: captionLight, tokenizedDark: captionDark } = renderThemedCssStrings((componentTokens) => {
   const { CaptionComponent } = componentTokens.Forms;
 
   return css`

packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.ts

@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { FormSizesType, CaptionVariantType, SizesType } from '../../../../globals/types';
 import { BlrIconRenderFunction } from '../../../ui/icon/renderFunction';
 import { SizelessIconType } from '@boiler/icons';
-import { formDark, formLight } from '../../../../foundation/semantic-tokens/form.css';
+import { captionLight, captionDark } from './index.css';
 import { calculateIconName } from '../../../../utils/calculate-icon-name';
 import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
 import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
@@ -25,7 +25,7 @@ export class BlrFormCaption extends LitElement {
 
   protected render() {
     if (this.size) {
-      const dynamicStyles = this.theme === 'Light' ? [formLight] : [formDark];
+      const dynamicStyles = this.theme === 'Light' ? [captionLight] : [captionDark];
 
       const classes = classMap({
         'blr-form-caption': true,