diff --git a/CHANGELOG.md b/CHANGELOG.md
index 960b80ca82..cf773c4e6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v10.3.39](https://github.com/Workday/canvas-kit/releases/tag/v10.3.39) (2024-05-15)
+
+### Documentation
+
+- docs: Fix typo ([#2738](https://github.com/Workday/canvas-kit/pull/2738)) ([@aarongarciah](https://github.com/aarongarciah))
+
+### Infrastructure
+
+- chore: SNYK Security upgrade jscodeshift from 0.13.1 to 0.14.0 ([#2739](https://github.com/Workday/canvas-kit/pull/2739)) ([@mannycarrera4](https://github.com/mannycarrera4))
+
+
 ## [v10.3.38](https://github.com/Workday/canvas-kit/releases/tag/v10.3.38) (2024-05-09)
 
 ### Documentation
diff --git a/lerna.json b/lerna.json
index ba12adf658..1323058864 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "10.3.38",
+  "version": "10.3.39",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {
diff --git a/modules/codemod/lib/v11/spec/replaceStylesIconProp.spec.ts b/modules/codemod/lib/v11/spec/replaceStylesIconProp.spec.ts
index 3b9b6bfada..b796ab508c 100644
--- a/modules/codemod/lib/v11/spec/replaceStylesIconProp.spec.ts
+++ b/modules/codemod/lib/v11/spec/replaceStylesIconProp.spec.ts
@@ -29,7 +29,7 @@ describe('replaceStylesIconProp', () => {
                 <AccentIcon styles={{padding: '1rem'}} />
             </>
         `;
-    expectTransform(input, expected); //?
+    expectTransform(input, expected);
   });
 
   it('should rename styles to cs for Svg, SystemIcon, AccentIcon exported from the icon package', () => {
@@ -75,7 +75,7 @@ describe('replaceStylesIconProp', () => {
             <AccentIcon cs={{padding: '1rem'}} />
         </>
     `;
-    expectTransform(input, expected); //?
+    expectTransform(input, expected);
   });
 
   it('should handle value as variable', () => {
diff --git a/modules/codemod/package.json b/modules/codemod/package.json
index 0475b9b481..ee2da106df 100644
--- a/modules/codemod/package.json
+++ b/modules/codemod/package.json
@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/Workday/canvas-kit#readme",
   "dependencies": {
     "chalk": "4.1.2",
-    "jscodeshift": "^0.13.1",
+    "jscodeshift": "^0.14.0",
     "yargs": "^16.2.0"
   },
   "devDependencies": {
diff --git a/modules/css/package.json b/modules/css/package.json
index 87ae590445..ffedf9d567 100644
--- a/modules/css/package.json
+++ b/modules/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "10.3.24",
+  "version": "10.3.39",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
index 25c6007fa6..b6c90648a0 100644
--- a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
@@ -560,6 +560,7 @@ variant prop.
 </div>
 
 **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
+[#2746](https://github.com/Workday/canvas-kit/pull/274)
 
 `FormField` in [Preview](#preview) is a compound component and we intend to promote it in a future
 version to replace the `FormField` in [Main](#main). Because of this, we've refactored how errors
@@ -574,6 +575,26 @@ are applied to `FormField` in [Preview](#preview) in order to match the API from
 - `FormField` does **not** support the `useFieldSet` prop that the `FormField` in [Main](#main)
   does. In order to achieve the same behavior, set the `as` prop on the `FormField` element to
   `fieldset` and the `as` prop of `FormField.Label` to `legend`.
+- The required asterisk is now a pseudo element. While the asterisk was never read out loud by
+  screen readers, Testing Library required it in the `*ByLabelText` query. `*ByRole` uses the w3c
+  [accessible name calculation specification](https://www.w3.org/TR/accname-1.2/), but
+  `*ByLabelText` uses
+  [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). Additional
+  information: https://github.com/testing-library/dom-testing-library/issues/929
+
+  v10:
+
+  ```ts
+  screen.getByLabelText('Email*'); // Email is a required field and asterisk is included in name
+  screen.getByRole('textbox', {name: 'Email'}); // correctly ignores the `*`
+  ```
+
+  v11:
+
+  ```ts
+  screen.getByLabelText('Email');
+  screen.getByRole('textbox', {name: 'Email'});
+  ```
 
 ```tsx
 // v10 FormField in Preview
diff --git a/modules/docs/package.json b/modules/docs/package.json
index e2b53a2f3b..952b363387 100644
--- a/modules/docs/package.json
+++ b/modules/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^10.3.38",
-    "@workday/canvas-kit-preview-react": "^10.3.38",
-    "@workday/canvas-kit-react": "^10.3.38",
-    "@workday/canvas-kit-styling": "^10.3.38",
+    "@workday/canvas-kit-labs-react": "^10.3.39",
+    "@workday/canvas-kit-preview-react": "^10.3.39",
+    "@workday/canvas-kit-react": "^10.3.39",
+    "@workday/canvas-kit-styling": "^10.3.39",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "markdown-to-jsx": "^6.10.3",
diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json
index 56b7f8d64b..b6d6aa1f8a 100644
--- a/modules/labs-css/package.json
+++ b/modules/labs-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-css",
-  "version": "10.3.24",
+  "version": "10.3.39",
   "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
index e0a7ad7ebd..ec5856bb9d 100644
--- a/modules/labs-react/package.json
+++ b/modules/labs-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,7 +46,7 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.38",
+    "@workday/canvas-kit-react": "^10.3.39",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json
index b8dc2479ef..270adb6331 100644
--- a/modules/popup-stack/package.json
+++ b/modules/popup-stack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/preview-css/package.json b/modules/preview-css/package.json
index 140a05f424..e0fa9596d9 100644
--- a/modules/preview-css/package.json
+++ b/modules/preview-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "10.3.24",
+  "version": "10.3.39",
   "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/preview-react/form-field/index.ts b/modules/preview-react/form-field/index.ts
index 47fb19e0c2..bf873ef0ea 100644
--- a/modules/preview-react/form-field/index.ts
+++ b/modules/preview-react/form-field/index.ts
@@ -1,2 +1,6 @@
 export * from './lib/FormField';
 export * from './lib/hooks/';
+export {formFieldStencil} from './lib/formFieldStencil';
+export {formFieldContainerStencil} from './lib/FormFieldContainer';
+export {formFieldHintStencil} from './lib/FormFieldHint';
+export {formFieldLabelStencil} from './lib/FormFieldLabel';
diff --git a/modules/preview-react/form-field/lib/FormField.tsx b/modules/preview-react/form-field/lib/FormField.tsx
index c53bfb18d7..8d3415c40c 100644
--- a/modules/preview-react/form-field/lib/FormField.tsx
+++ b/modules/preview-react/form-field/lib/FormField.tsx
@@ -1,37 +1,24 @@
 import React from 'react';
 
 import {createContainer, GrowthBehavior} from '@workday/canvas-kit-react/common';
-import {Flex, FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 
-import {useFormFieldModel, useFormFieldOrientation} from './hooks';
+import {useFormFieldModel} from './hooks';
 import {FormFieldInput} from './FormFieldInput';
 import {FormFieldLabel} from './FormFieldLabel';
 import {FormFieldHint} from './FormFieldHint';
 import {FormFieldContainer} from './FormFieldContainer';
+import {formFieldStencil} from './formFieldStencil';
 
 export interface FormFieldProps extends FlexProps, GrowthBehavior {
+  /**
+   * The direction the child elements should stack
+   * @default vertical
+   */
+  orientation?: 'vertical' | 'horizontal';
   children: React.ReactNode;
 }
 
-const formFieldStencil = createStencil({
-  base: {
-    border: 'none',
-    padding: system.space.zero,
-    margin: `${system.space.zero} ${system.space.zero} ${system.space.x6}`,
-  },
-  modifiers: {
-    grow: {
-      true: {
-        width: '100%',
-        '[data-width="ck-formfield-width"]': {
-          width: '100%',
-        },
-      },
-    },
-  },
-});
 /**
  * Use `FormField` to wrap input components to make them accessible. You can customize the field
  * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
@@ -42,6 +29,8 @@ const formFieldStencil = createStencil({
  *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
  *  </FormField>
  * ```
+ *
+ * @stencil formFieldStencil
  */
 export const FormField = createContainer('div')({
   displayName: 'FormField',
@@ -70,6 +59,8 @@ export const FormField = createContainer('div')({
      *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
      *  </FormField>
      * ```
+     *
+     * @stencil formFieldLabelStencil
      */
     Label: FormFieldLabel,
     /**
@@ -83,6 +74,8 @@ export const FormField = createContainer('div')({
      *    <FormField.Hint>This is your hint text</FormField.Hint>
      *  </FormField>
      * ```
+     *
+     * @stencil formFieldHintStencil
      */
     Hint: FormFieldHint,
     /**
@@ -97,19 +90,25 @@ export const FormField = createContainer('div')({
      *    </FormField.Container>
      *  </FormField>
      * ```
+     *
+     * @stencil formFieldContainerStencil
      */
     Container: FormFieldContainer,
   },
-})<FormFieldProps>(({children, ...elemProps}, Element, model) => {
-  const layoutProps = useFormFieldOrientation(model.state.orientation);
-
+})<FormFieldProps>(({children, grow, orientation, ...elemProps}, Element, model) => {
   return (
-    <Flex
-      as={Element}
-      {...layoutProps}
-      {...mergeStyles(elemProps, formFieldStencil({grow: elemProps.grow}))}
+    <Element
+      {...mergeStyles(
+        elemProps,
+        formFieldStencil({
+          grow,
+          orientation,
+          error: model.state.error,
+          required: model.state.isRequired,
+        })
+      )}
     >
       {children}
-    </Flex>
+    </Element>
   );
 });
diff --git a/modules/preview-react/form-field/lib/FormFieldContainer.tsx b/modules/preview-react/form-field/lib/FormFieldContainer.tsx
index bd9d961983..ad49192ae0 100644
--- a/modules/preview-react/form-field/lib/FormFieldContainer.tsx
+++ b/modules/preview-react/form-field/lib/FormFieldContainer.tsx
@@ -5,7 +5,7 @@ import {handleCsProp, CSProps, createStencil} from '@workday/canvas-kit-styling'
 
 import {useFormFieldModel} from './hooks';
 
-const formFieldContainerStencil = createStencil({
+export const formFieldContainerStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/modules/preview-react/form-field/lib/FormFieldHint.tsx b/modules/preview-react/form-field/lib/FormFieldHint.tsx
index 0df6c5c363..e753891365 100644
--- a/modules/preview-react/form-field/lib/FormFieldHint.tsx
+++ b/modules/preview-react/form-field/lib/FormFieldHint.tsx
@@ -1,45 +1,41 @@
 import React from 'react';
+
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {system, brand} from '@workday/canvas-tokens-web';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {useFormFieldHint, useFormFieldModel} from './hooks';
-import {Subtext} from '@workday/canvas-kit-react/text';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {formFieldStencil} from './formFieldStencil';
 
-const formFieldHintStencil = createStencil({
+export const formFieldHintStencil = createStencil({
+  extends: textStencil,
   base: {
     margin: `${system.space.x2} ${system.space.zero} ${system.space.zero}`,
-  },
-  modifiers: {
-    error: {
-      error: {
-        color: brand.error.base,
-      },
-      alert: {},
+
+    [parentModifier(formFieldStencil.modifiers.error.error)]: {
+      color: brand.error.base,
     },
   },
+  defaultModifiers: {
+    typeLevel: 'subtext.medium',
+  },
 });
 
 export const FormFieldHint = createSubcomponent('p')({
   displayName: 'FormField.Hint',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldHint,
-})<Omit<ExtractProps<typeof Subtext, never>, 'size'>>(
-  ({children, ...elemProps}, Element, model) => {
-    if (!children) {
-      // If there is no hint text just skip rendering
-      return null;
-    }
-
-    return (
-      <Subtext
-        as={Element}
-        size="medium"
-        {...mergeStyles(elemProps, formFieldHintStencil({error: model.state.error}))}
-      >
-        {children}
-      </Subtext>
-    );
+})<ExtractProps<typeof Text, never>>(({children, typeLevel, variant, ...elemProps}, Element) => {
+  if (!children) {
+    // If there is no hint text just skip rendering
+    return null;
   }
-);
+
+  return (
+    <Element {...mergeStyles(elemProps, formFieldHintStencil({typeLevel, variant}))}>
+      {children}
+    </Element>
+  );
+});
diff --git a/modules/preview-react/form-field/lib/FormFieldLabel.tsx b/modules/preview-react/form-field/lib/FormFieldLabel.tsx
index 7009296e00..42c01551da 100644
--- a/modules/preview-react/form-field/lib/FormFieldLabel.tsx
+++ b/modules/preview-react/form-field/lib/FormFieldLabel.tsx
@@ -1,39 +1,27 @@
 import React from 'react';
 
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
-import {useFormFieldLabel, useFormFieldModel} from './hooks';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStencil, parentModifier, px2rem} from '@workday/canvas-kit-styling';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {brand, system} from '@workday/canvas-tokens-web';
 
-export interface FormFieldLabelProps {
+import {useFormFieldLabel, useFormFieldModel} from './hooks';
+import {formFieldStencil} from './formFieldStencil';
+
+export interface FormFieldLabelProps
+  extends FlexProps,
+    Omit<ExtractProps<typeof Text, never>, 'display'> {
   /**
    * The text of the label.
    */
   children: React.ReactNode;
-  /**
-   * Will style the text as disabled
-   */
-  disabled?: boolean;
-  /**
-   * Changes the color of the text
-   */
-  variant?: 'error' | 'hint' | 'inverse';
 }
 
-const formFieldLabelAsteriskStencil = createStencil({
-  base: {
-    fontSize: system.fontSize.body.large,
-    fontWeight: system.fontWeight.normal,
-    color: brand.error.base,
-    textDecoration: 'unset',
-    marginInlineStart: system.space.x1,
-  },
-});
-
-const formFieldLabelStencil = createStencil({
+export const formFieldLabelStencil = createStencil({
+  extends: textStencil,
+  // @ts-ignore Still weird about CSS variables
   base: {
-    ...system.type.subtext.large,
     fontWeight: system.fontWeight.medium,
     color: system.color.text.default,
     paddingInlineStart: system.space.zero,
@@ -41,63 +29,41 @@ const formFieldLabelStencil = createStencil({
     display: 'flex',
     alignItems: 'center',
     minWidth: px2rem(180),
-  },
-  modifiers: {
-    orientation: {
-      horizontal: {
-        float: 'left',
-        maxHeight: system.space.x10,
-      },
-      vertical: {
-        width: '100%',
+
+    // asterisk
+    [parentModifier(formFieldStencil.modifiers.required.true)]: {
+      '&::after': {
+        content: '"*"',
+        fontSize: system.fontSize.body.large,
+        fontWeight: system.fontWeight.normal,
+        color: brand.error.base,
+        textDecoration: 'unset',
+        marginInlineStart: system.space.x1,
       },
     },
-    variant: {
-      error: {
-        color: system.color.text.critical.default,
-      },
-      hint: {
-        color: system.color.text.hint,
-      },
-      inverse: {
-        color: system.color.text.inverse,
-      },
+
+    // orientation modifier from parent FormField
+    [parentModifier(formFieldStencil.modifiers.orientation.horizontal)]: {
+      float: 'left',
+      maxHeight: system.space.x10,
     },
-    disabled: {
-      true: {
-        cursor: 'default',
-        color: system.color.text.disabled,
-      },
+    [parentModifier(formFieldStencil.modifiers.orientation.vertical)]: {
+      width: '100%',
     },
   },
-  compound: [
-    {
-      modifiers: {variant: 'inverse', disabled: true},
-      styles: {
-        opacity: system.opacity.disabled,
-        color: system.color.text.inverse,
-      },
-    },
-  ],
+  defaultModifiers: {
+    typeLevel: 'subtext.large',
+  },
 });
 
 export const FormFieldLabel = createSubcomponent('label')({
   displayName: 'FormField.Label',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldLabel,
-})<FormFieldLabelProps>(({children, disabled, variant, ...elemProps}, Element, model) => {
+})<FormFieldLabelProps>(({children, typeLevel, variant, ...elemProps}, Element) => {
   return (
-    <Element
-      {...mergeStyles(elemProps, [
-        formFieldLabelStencil({orientation: model.state.orientation, disabled, variant}),
-      ])}
-    >
+    <Element {...mergeStyles(elemProps, formFieldLabelStencil({typeLevel, variant}))}>
       {children}
-      {model.state.isRequired && (
-        <span aria-hidden="true" {...formFieldLabelAsteriskStencil()}>
-          *
-        </span>
-      )}
     </Element>
   );
 });
diff --git a/modules/preview-react/form-field/lib/formFieldStencil.ts b/modules/preview-react/form-field/lib/formFieldStencil.ts
new file mode 100644
index 0000000000..bdd9c2ce44
--- /dev/null
+++ b/modules/preview-react/form-field/lib/formFieldStencil.ts
@@ -0,0 +1,42 @@
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export const formFieldStencil = createStencil({
+  base: {
+    display: 'flex',
+    border: 'none',
+    padding: system.space.zero,
+    margin: `${system.space.zero} ${system.space.zero} ${system.space.x6}`,
+  },
+  modifiers: {
+    grow: {
+      true: {
+        width: '100%',
+        '[data-width="ck-formfield-width"]': {
+          width: '100%',
+        },
+      },
+    },
+    orientation: {
+      horizontal: {
+        flexDirection: 'row',
+        gap: system.space.x8,
+      },
+      vertical: {
+        flexDirection: 'column',
+        gap: system.space.x1,
+        alignItems: 'flex-start',
+      },
+    },
+    required: {
+      true: {},
+    },
+    error: {
+      error: {},
+      alert: {},
+    },
+  },
+  defaultModifiers: {
+    orientation: 'vertical',
+  },
+});
diff --git a/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx b/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx
index 160583fbf7..814fdd4dbc 100644
--- a/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx
+++ b/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx
@@ -8,11 +8,6 @@ export const useFormFieldModel = createModelHook({
      * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
      */
     error: undefined as undefined | 'error' | 'alert',
-    /**
-     * The direction the child elements should stack
-     * @default vertical
-     */
-    orientation: 'vertical' as 'vertical' | 'horizontal',
     /**
      * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
      * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
diff --git a/modules/preview-react/form-field/lib/hooks/useFormFieldOrientation.tsx b/modules/preview-react/form-field/lib/hooks/useFormFieldOrientation.tsx
index c1bf53e60b..69105d3217 100644
--- a/modules/preview-react/form-field/lib/hooks/useFormFieldOrientation.tsx
+++ b/modules/preview-react/form-field/lib/hooks/useFormFieldOrientation.tsx
@@ -3,6 +3,8 @@ import {space} from '@workday/canvas-kit-react/tokens';
 
 /**
  * Adds the necessary layout props to a `FormField` component.
+ *
+ * @deprecated
  */
 export const useFormFieldOrientation = (orientation: 'horizontal' | 'vertical') => {
   let layoutProps: {
diff --git a/modules/preview-react/form-field/stories/examples/AllFields.tsx b/modules/preview-react/form-field/stories/examples/AllFields.tsx
index fb8376c5f2..6251291a48 100644
--- a/modules/preview-react/form-field/stories/examples/AllFields.tsx
+++ b/modules/preview-react/form-field/stories/examples/AllFields.tsx
@@ -7,17 +7,19 @@ import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Select} from '@workday/canvas-kit-react/select';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 import {Switch} from '@workday/canvas-kit-react/switch';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+  gap: calc.subtract(system.space.x6, system.space.x1),
+  padding: calc.subtract(system.space.x10, system.space.x1),
+  borderRadius: system.space.x1,
+});
 
 export const AllFields = () => {
   return (
-    <Flex
-      cs={{
-        flexDirection: 'column',
-        gap: '20px',
-        padding: '36px',
-        borderRadius: '4px',
-      }}
-    >
+    <Flex cs={parentContainerStyles}>
       <FormField grow>
         <FormField.Label>First Name</FormField.Label>
         <FormField.Input as={TextInput} />
diff --git a/modules/preview-react/form-field/stories/examples/Custom.tsx b/modules/preview-react/form-field/stories/examples/Custom.tsx
index 92dbcd9218..be540db3a8 100644
--- a/modules/preview-react/form-field/stories/examples/Custom.tsx
+++ b/modules/preview-react/form-field/stories/examples/Custom.tsx
@@ -4,7 +4,7 @@ import {
   useFormFieldInput,
   useFormFieldLabel,
   useFormFieldModel,
-  useFormFieldOrientation,
+  formFieldStencil,
 } from '@workday/canvas-kit-preview-react/form-field';
 import {useModelContext} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
@@ -44,10 +44,8 @@ export const Custom = () => {
 
   const model = useFormFieldModel({isRequired: true});
 
-  const layoutProps = useFormFieldOrientation('vertical');
-
   return (
-    <Flex {...layoutProps}>
+    <Flex cs={formFieldStencil({orientation: 'horizontal'})}>
       <Label model={model}>My Custom Field</Label>
       <Input model={model} value={value} onChange={handleChange} />
       <Hint model={model}>You can be anything</Hint>
diff --git a/modules/preview-react/form-field/stories/examples/RefForwarding.tsx b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
index f86bd9fe38..e8be6a685f 100644
--- a/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
+++ b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
@@ -4,6 +4,14 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x1,
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+});
 
 export const RefForwarding = () => {
   const [value, setValue] = React.useState('');
@@ -18,7 +26,7 @@ export const RefForwarding = () => {
   };
 
   return (
-    <Flex gap="xxxs" alignItems="flex-start" flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <FormField>
         <FormField.Label>Email</FormField.Label>
         <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />
diff --git a/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
index 1e15ab38a4..5a4ecc0ef4 100644
--- a/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
+++ b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
@@ -3,6 +3,12 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formFieldHintStyles = createStyles({
+  paddingTop: system.space.x2,
+});
 
 export const ThemedError = () => {
   const [value, setValue] = React.useState('');
@@ -29,7 +35,9 @@ export const ThemedError = () => {
       <FormField error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
         <FormField.Label>Email</FormField.Label>
         <FormField.Input as={TextInput} onChange={handleChange} value={value} />
-        <FormField.Hint paddingTop={space.xxs}>{!value && 'Please enter an email.'}</FormField.Hint>
+        <FormField.Hint cs={formFieldHintStyles}>
+          {!value && 'Please enter an email.'}
+        </FormField.Hint>
       </FormField>
     </CanvasProvider>
   );
diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
index 8f2b0f9828..13110821a3 100644
--- a/modules/preview-react/package.json
+++ b/modules/preview-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.38",
-    "@workday/canvas-kit-styling": "^10.3.38",
+    "@workday/canvas-kit-react": "^10.3.39",
+    "@workday/canvas-kit-styling": "^10.3.39",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "@workday/design-assets-types": "^0.2.8"
diff --git a/modules/preview-react/radio/stories/examples/Basic.tsx b/modules/preview-react/radio/stories/examples/Basic.tsx
index e09b4be6f8..7082faa43a 100644
--- a/modules/preview-react/radio/stories/examples/Basic.tsx
+++ b/modules/preview-react/radio/stories/examples/Basic.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const formfieldInputStyles = createStyles({
+  width: px2rem(200),
+});
 
 export const Basic = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -18,10 +23,10 @@ export const Basic = () => {
       <FormField as="fieldset">
         <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <FormField.Input
+          cs={formfieldInputStyles}
           as={RadioGroup}
           name="pizza-crust"
           onChange={handleChange}
-          width="200px"
           value={value}
         >
           <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
diff --git a/modules/preview-react/radio/stories/examples/Custom.tsx b/modules/preview-react/radio/stories/examples/Custom.tsx
index 74df7932ca..7910f9e901 100644
--- a/modules/preview-react/radio/stories/examples/Custom.tsx
+++ b/modules/preview-react/radio/stories/examples/Custom.tsx
@@ -2,6 +2,17 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: px2rem(200),
+  }),
+  radioGroupLabelTextStyles: createStyles({
+    color: base.berrySmoothie400,
+  }),
+};
 
 export const Custom = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -21,20 +32,26 @@ export const Custom = () => {
           as={RadioGroup}
           name="pizza-crust-custom"
           onChange={handleChange}
-          width="200px"
+          cs={styleOverrides.formfieldInputStyles}
           value={value}
         >
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="deep-dish" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Deep dish</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Deep dish
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="gluten-free" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Gluten free</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Gluten free
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="cauliflower" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Cauliflower</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Cauliflower
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
         </FormField.Input>
       </FormField>
diff --git a/modules/preview-react/radio/stories/examples/Inverse.tsx b/modules/preview-react/radio/stories/examples/Inverse.tsx
index 2405e731a3..2587803a99 100644
--- a/modules/preview-react/radio/stories/examples/Inverse.tsx
+++ b/modules/preview-react/radio/stories/examples/Inverse.tsx
@@ -2,14 +2,20 @@ import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-import {styled, StyledType} from '@workday/canvas-kit-react/common';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const StyledFormField = styled(FormField)<StyledType>({
-  legend: {
-    color: colors.frenchVanilla100,
-  },
-});
+const styleOverrides = {
+  containerStyles: createStyles({
+    backgroundColor: system.color.bg.primary.default,
+    padding: system.space.x4,
+  }),
+  formFieldStyles: createStyles({
+    legend: {
+      color: system.color.text.inverse,
+    },
+  }),
+};
 
 export const Inverse = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -22,8 +28,8 @@ export const Inverse = () => {
   };
 
   return (
-    <Box backgroundColor="blueberry400" padding="s">
-      <StyledFormField as="fieldset">
+    <Box cs={styleOverrides.containerStyles}>
+      <FormField cs={styleOverrides.formFieldStyles} as="fieldset">
         <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <FormField.Input as={RadioGroup} name="crust-inverse" onChange={handleChange} value={value}>
           <RadioGroup.RadioButton variant="inverse" value="deep-dish">
@@ -39,7 +45,7 @@ export const Inverse = () => {
             Cauliflower
           </RadioGroup.RadioButton>
         </FormField.Input>
-      </StyledFormField>
+      </FormField>
     </Box>
   );
 };
diff --git a/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx b/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
index 7a1774afb0..4baedca4a9 100644
--- a/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
@@ -3,10 +3,16 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+});
 
 export const Emphasis = () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator emphasis="high">
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>
diff --git a/modules/preview-react/status-indicator/stories/examples/Icon.tsx b/modules/preview-react/status-indicator/stories/examples/Icon.tsx
index 8c79898e11..84f599f862 100644
--- a/modules/preview-react/status-indicator/stories/examples/Icon.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Icon.tsx
@@ -3,10 +3,16 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+});
 
 export const Icon = () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator>
         <StatusIndicator.Icon aria-label="unpublished" icon={uploadCloudIcon} />
         <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
diff --git a/modules/preview-react/status-indicator/stories/examples/Overflow.tsx b/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
index d54e3b9cfa..9704e43beb 100644
--- a/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
@@ -3,11 +3,17 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const statusIndicatorStyles = createStyles({
+  maxWidth: calc.add(system.space.x20, system.space.x4),
+});
 
 export const Overflow = () => {
   return (
     <OverflowTooltip>
-      <StatusIndicator tabIndex={0} style={{maxWidth: '6rem'}}>
+      <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>
           Your workbook is currently in process of saving
diff --git a/modules/preview-react/status-indicator/stories/examples/Variants.tsx b/modules/preview-react/status-indicator/stories/examples/Variants.tsx
index 962a6b5c0c..1c52e9eeaa 100644
--- a/modules/preview-react/status-indicator/stories/examples/Variants.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Variants.tsx
@@ -3,11 +3,23 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    gap: system.space.x4,
+    flexDirection: 'column',
+  }),
+  innerContainerStyles: createStyles({
+    gap: system.space.x4,
+  }),
+};
 
 export const Variants = () => {
   return (
-    <Flex gap="s" flexDirection="column">
-      <Flex gap="s">
+    <Flex cs={styleOverrides.parentContainerStyles}>
+      <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator>
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
           <StatusIndicator.Icon icon={uploadCloudIcon} />
@@ -33,7 +45,7 @@ export const Variants = () => {
           <StatusIndicator.Icon icon={uploadCloudIcon} />
         </StatusIndicator>
       </Flex>
-      <Flex gap="s">
+      <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator emphasis="high">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
           <StatusIndicator.Icon icon={uploadCloudIcon} />
diff --git a/modules/preview-react/text-area/lib/TextArea.tsx b/modules/preview-react/text-area/lib/TextArea.tsx
index 2512f8c08e..dc35a5a696 100644
--- a/modules/preview-react/text-area/lib/TextArea.tsx
+++ b/modules/preview-react/text-area/lib/TextArea.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {FormField, formFieldStencil} from '@workday/canvas-kit-preview-react/form-field';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {TextAreaField} from './TextAreaField';
 import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
@@ -17,7 +17,8 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
 }
 
 /**
- * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
+ * @stencil formFieldStencil
+ * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
  */
 export const TextArea = createContainer('div')({
   displayName: 'TextArea',
@@ -27,12 +28,20 @@ export const TextArea = createContainer('div')({
     Label: FormField.Label,
     Hint: FormField.Hint,
   },
-})<TextAreaProps>(({children, orientation = 'vertical', ...elemProps}, Element) => {
-  const layoutProps = useFormFieldOrientation(orientation);
-
+})<TextAreaProps>(({children, grow, orientation, ...elemProps}, Element, model) => {
   return (
-    <Flex as={Element} {...layoutProps} {...elemProps}>
+    <Element
+      {...mergeStyles(
+        elemProps,
+        formFieldStencil({
+          grow,
+          orientation,
+          error: model.state.error,
+          required: model.state.isRequired,
+        })
+      )}
+    >
       {children}
-    </Flex>
+    </Element>
   );
 });
diff --git a/modules/preview-react/text-input/lib/TextInput.tsx b/modules/preview-react/text-input/lib/TextInput.tsx
index ac3229e4f7..106f4ef5d3 100644
--- a/modules/preview-react/text-input/lib/TextInput.tsx
+++ b/modules/preview-react/text-input/lib/TextInput.tsx
@@ -4,9 +4,9 @@ import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
 import {
   FormField,
   useFormFieldModel,
-  useFormFieldOrientation,
+  formFieldStencil,
 } from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {TextInputField} from './TextInputField';
 
@@ -20,6 +20,7 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
   children: React.ReactNode;
 }
 /**
+ * @stencil formFieldStencil
  * @deprecated ⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
  */
 export const TextInput = createContainer('div')({
@@ -31,13 +32,21 @@ export const TextInput = createContainer('div')({
     Hint: FormField.Hint,
   },
 })<ExtractProps<typeof FormField, never>>(
-  ({children, orientation = 'vertical', ...elemProps}, Element) => {
-    const layoutProps = useFormFieldOrientation(orientation);
-
+  ({children, orientation, grow, ...elemProps}, Element, model) => {
     return (
-      <Flex as={Element} {...layoutProps} {...elemProps}>
+      <Element
+        {...mergeStyles(
+          elemProps,
+          formFieldStencil({
+            grow,
+            orientation,
+            error: model.state.error,
+            required: model.state.isRequired,
+          })
+        )}
+      >
         {children}
-      </Flex>
+      </Element>
     );
   }
 );
diff --git a/modules/preview-react/text-input/spec/TextInput.spec.tsx b/modules/preview-react/text-input/spec/TextInput.spec.tsx
index 588a2f5d55..0f0881bd3a 100644
--- a/modules/preview-react/text-input/spec/TextInput.spec.tsx
+++ b/modules/preview-react/text-input/spec/TextInput.spec.tsx
@@ -79,18 +79,6 @@ describe('Text Input', () => {
     });
   });
 
-  describe('when rendered as required', () => {
-    it('should add an asterisk to the label to indicate that it is required', () => {
-      const {getByText} = render(
-        <TextInput orientation="vertical" isRequired={true}>
-          <TextInput.Label>Test</TextInput.Label>
-        </TextInput>
-      );
-
-      expect(getByText('*')).toHaveAttribute('aria-hidden', 'true');
-    });
-  });
-
   describe('when rendered a hint id', () => {
     it('the input and hint text should have matching ids for accessibility', () => {
       const hintId = 'hintId';
diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json
index 4ee0be89ec..0cb29c90b8 100644
--- a/modules/react-fonts/package.json
+++ b/modules/react-fonts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react-fonts",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/react/button/stories/button/examples/Delete.tsx b/modules/react/button/stories/button/examples/Delete.tsx
index 1d11e34ed8..0d71a82204 100644
--- a/modules/react/button/stories/button/examples/Delete.tsx
+++ b/modules/react/button/stories/button/examples/Delete.tsx
@@ -3,9 +3,16 @@ import React from 'react';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {trashIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Delete = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <DeleteButton>Delete</DeleteButton>
     <DeleteButton icon={trashIcon} iconPosition="start">
       Delete
diff --git a/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx b/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
index 7ee9aef6f0..77717e73b8 100644
--- a/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
+++ b/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export const ExternalLinkInverse = () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <ExternalHyperlink href="https://workday.com" variant="inverse">
       Hyperlink
     </ExternalHyperlink>
diff --git a/modules/react/button/stories/button/examples/HyperlinkInverse.tsx b/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
index af0790264a..2e23875b11 100644
--- a/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
+++ b/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export const LinkInverse = () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <Hyperlink href="#hyperlink" variant="inverse">
       Hyperlink
     </Hyperlink>
diff --git a/modules/react/button/stories/button/examples/Primary.tsx b/modules/react/button/stories/button/examples/Primary.tsx
index ede4ef219f..f7597c68d0 100644
--- a/modules/react/button/stories/button/examples/Primary.tsx
+++ b/modules/react/button/stories/button/examples/Primary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Primary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton>Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start">
       Primary
diff --git a/modules/react/button/stories/button/examples/PrimaryInverse.tsx b/modules/react/button/stories/button/examples/PrimaryInverse.tsx
index c0589600b7..e8c25a4f76 100644
--- a/modules/react/button/stories/button/examples/PrimaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/PrimaryInverse.tsx
@@ -7,9 +7,17 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export const PrimaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton variant="inverse">Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Primary
diff --git a/modules/react/button/stories/button/examples/Secondary.tsx b/modules/react/button/stories/button/examples/Secondary.tsx
index cdeafc8c8c..466454826a 100644
--- a/modules/react/button/stories/button/examples/Secondary.tsx
+++ b/modules/react/button/stories/button/examples/Secondary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Secondary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton>Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} iconPosition="start">
       Secondary
diff --git a/modules/react/button/stories/button/examples/SecondaryInverse.tsx b/modules/react/button/stories/button/examples/SecondaryInverse.tsx
index 4fa8bbc4fd..882471fa74 100644
--- a/modules/react/button/stories/button/examples/SecondaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/SecondaryInverse.tsx
@@ -7,9 +7,17 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+});
 
 export const SecondaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton variant="inverse">Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} variant="inverse">
       Secondary
diff --git a/modules/react/button/stories/button/examples/Tertiary.tsx b/modules/react/button/stories/button/examples/Tertiary.tsx
index 40504b4dfd..f2f8c3e7c2 100644
--- a/modules/react/button/stories/button/examples/Tertiary.tsx
+++ b/modules/react/button/stories/button/examples/Tertiary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Tertiary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <TertiaryButton>Tertiary</TertiaryButton>
     <TertiaryButton icon={plusIcon} iconPosition="start">
       Tertiary
diff --git a/modules/react/button/stories/button/examples/TertiaryInverse.tsx b/modules/react/button/stories/button/examples/TertiaryInverse.tsx
index d82dfc0e80..1cbbce4610 100644
--- a/modules/react/button/stories/button/examples/TertiaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/TertiaryInverse.tsx
@@ -5,12 +5,19 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   plusIcon,
   relatedActionsVerticalIcon,
-  arrowRightIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+});
 
 export const TertiaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
     <TertiaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Tertiary
diff --git a/modules/react/checkbox/stories/examples/Indeterminate.tsx b/modules/react/checkbox/stories/examples/Indeterminate.tsx
index 27e776b163..042d0c90fe 100644
--- a/modules/react/checkbox/stories/examples/Indeterminate.tsx
+++ b/modules/react/checkbox/stories/examples/Indeterminate.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = createStyles({
+  marginInlineLeft: system.space.x8,
+  marginTop: system.space.x2,
+});
 
 export const Indeterminate = () => {
   const [pizzaChecked, setPizzaChecked] = React.useState(false);
@@ -58,7 +65,7 @@ export const Indeterminate = () => {
         label="Supreme Pizza Toppings"
         onChange={handlePizzaChange}
       />
-      <Box marginLeft="l" marginTop="xxs">
+      <Box cs={styleOverrides}>
         {toppings.map((topping, index) => (
           <Checkbox
             checked={topping.checked}
diff --git a/modules/react/checkbox/stories/examples/Inverse.tsx b/modules/react/checkbox/stories/examples/Inverse.tsx
index 339994f8d3..33c29d4261 100644
--- a/modules/react/checkbox/stories/examples/Inverse.tsx
+++ b/modules/react/checkbox/stories/examples/Inverse.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = createStyles({
+  gap: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export const Inverse = () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,7 +18,7 @@ export const Inverse = () => {
   };
 
   return (
-    <Flex gap="s" backgroundColor="blueberry400" padding="s">
+    <Flex cs={styleOverrides}>
       <Checkbox
         variant="inverse"
         checked={checked}
diff --git a/modules/react/combobox/stories/examples/Autocomplete.tsx b/modules/react/combobox/stories/examples/Autocomplete.tsx
index 91fdd4a91f..165a9ef0b9 100644
--- a/modules/react/combobox/stories/examples/Autocomplete.tsx
+++ b/modules/react/combobox/stories/examples/Autocomplete.tsx
@@ -17,6 +17,8 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
 const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
@@ -44,6 +46,20 @@ const AutoCompleteInput = createSubcomponent(TextInput)({
   return <Combobox.Input as={Element} {...elemProps} />;
 });
 
+const styleOverrides = {
+  inputGroupInner: createStyles({
+    width: px2rem(20),
+    transition: 'opacity 100ms ease',
+  }),
+  loadingDots: createStyles({
+    display: 'flex',
+    transform: 'scale(0.3)',
+  }),
+  comboboxMenuList: createStyles({
+    maxHeight: px2rem(200),
+  }),
+};
+
 export const Autocomplete = () => {
   const {model, loader} = useComboboxLoader(
     {
@@ -95,12 +111,12 @@ export const Autocomplete = () => {
         <InputGroup>
           <InputGroup.Input as={FormField.Input.as(AutoCompleteInput)} />
           <InputGroup.InnerEnd
+            cs={styleOverrides.inputGroupInner}
             pointerEvents="none"
-            style={{opacity: loader.isLoading ? 1 : 0, transition: 'opacity 100ms ease'}}
-            width={20}
+            style={{opacity: loader.isLoading ? system.opacity.full : system.opacity.zero}}
             data-loading={loader.isLoading}
           >
-            <LoadingDots style={{display: 'flex', transform: 'scale(0.3)'}} />
+            <LoadingDots cs={styleOverrides.loadingDots} />
           </InputGroup.InnerEnd>
           <InputGroup.InnerEnd>
             <InputGroup.ClearButton data-testid="clear" />
@@ -112,7 +128,7 @@ export const Autocomplete = () => {
               <StyledMenuItem as="span">No Results Found</StyledMenuItem>
             )}
             {model.state.items.length > 0 && (
-              <Combobox.Menu.List maxHeight={200}>
+              <Combobox.Menu.List cs={styleOverrides.comboboxMenuList}>
                 {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
               </Combobox.Menu.List>
             )}
diff --git a/modules/react/icon/stories/examples/AccentIconList.tsx b/modules/react/icon/stories/examples/AccentIconList.tsx
index 20cf7c5fe2..06dfa1b238 100644
--- a/modules/react/icon/stories/examples/AccentIconList.tsx
+++ b/modules/react/icon/stories/examples/AccentIconList.tsx
@@ -3,11 +3,31 @@ import * as CanvasAccenttIcons from '@workday/canvas-accent-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAccenttIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccenttIcons');
 
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  iconGroupContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  individualIconContainer: createStyles({
+    alignItems: 'center',
+    width: `max(${px2rem(320)},20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const AccentIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -16,9 +36,9 @@ export const AccentIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.iconGroupContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -29,14 +49,7 @@ export const AccentIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.individualIconContainer} key={index}>
                 <Box>
                   <AccentIcon icon={CanvasAccenttIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/AppletIconList.tsx b/modules/react/icon/stories/examples/AppletIconList.tsx
index f8cac5d872..16b3f3624a 100644
--- a/modules/react/icon/stories/examples/AppletIconList.tsx
+++ b/modules/react/icon/stories/examples/AppletIconList.tsx
@@ -3,11 +3,31 @@ import * as CanvasAppletIcons from '@workday/canvas-applet-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {AppletIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAppletIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAppletIcons');
 
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  iconGroupContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  individualIconContainer: createStyles({
+    alignItems: 'center',
+    width: `max(${px2rem(320)},20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const AppletIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -16,9 +36,9 @@ export const AppletIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.iconGroupContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -29,14 +49,7 @@ export const AppletIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.individualIconContainer} key={index}>
                 <Box>
                   <AppletIcon icon={CanvasAppletIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/IconList.tsx b/modules/react/icon/stories/examples/IconList.tsx
index 041383a6cd..f7cc6265a2 100644
--- a/modules/react/icon/stories/examples/IconList.tsx
+++ b/modules/react/icon/stories/examples/IconList.tsx
@@ -3,10 +3,31 @@ import * as CanvasIcons from '@workday/canvas-system-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasSystemIcons');
+
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  firstChildContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  secondChildContainer: createStyles({
+    alignItems: 'center',
+    width: `max(320px,20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const SystemIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -15,9 +36,9 @@ export const SystemIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.firstChildContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -28,14 +49,7 @@ export const SystemIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.secondChildContainer} key={index}>
                 <Box>
                   <SystemIcon icon={CanvasIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/Overview.tsx b/modules/react/icon/stories/examples/Overview.tsx
index 08efeb65ed..3a4c389fce 100644
--- a/modules/react/icon/stories/examples/Overview.tsx
+++ b/modules/react/icon/stories/examples/Overview.tsx
@@ -8,6 +8,8 @@ import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 
 import {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic} from '../../index';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const graphicExample: CanvasGraphic = {
   name: 'badgeAchievement',
@@ -18,11 +20,22 @@ const graphicExample: CanvasGraphic = {
   tags: [],
 };
 
+const styleOverrides = {
+  container: createStyles({
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: system.space.x4,
+  }),
+  systemIconStyles: createStyles({
+    background: base.berrySmoothie100,
+  }),
+};
+
 export const Overview = () => (
-  <Flex flexDirection="row" alignItems="center" gap="s">
+  <Flex cs={styleOverrides.container}>
     <AccentIcon icon={shieldIcon} />
     <AppletIcon icon={benefitsIcon} />
-    <SystemIcon icon={activityStreamIcon} background="berrySmoothie100" />
+    <SystemIcon icon={activityStreamIcon} cs={styleOverrides.systemIconStyles} />
     <SystemIconCircle icon={activityStreamIcon} />
     <Graphic src={graphicExample} />
   </Flex>
diff --git a/modules/react/loading-dots/stories/examples/Accessible.tsx b/modules/react/loading-dots/stories/examples/Accessible.tsx
index 5583647cd6..375138aa21 100644
--- a/modules/react/loading-dots/stories/examples/Accessible.tsx
+++ b/modules/react/loading-dots/stories/examples/Accessible.tsx
@@ -3,13 +3,18 @@ import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {base, system} from '@workday/canvas-tokens-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
 
-const loadingStyles = createStyles({
-  backgroundColor: base.licorice300,
-  padding: system.space.x3,
-});
+const styleOverrides = {
+  parentContainer: createStyles({
+    gap: system.space.x4,
+  }),
+  loadingStyles: createStyles({
+    backgroundColor: system.color.bg.muted.default,
+    padding: system.space.x3,
+  }),
+};
 
 export const Accessible = () => {
   const [loadingState, setLoadingState] = React.useState('idle');
@@ -31,11 +36,11 @@ export const Accessible = () => {
   };
 
   return (
-    <Flex gap={cssVar(system.space.x4)}>
+    <Flex cs={styleOverrides.parentContainer}>
       <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
       <AriaLiveRegion aria-label="Loading">
         {loadingState === 'loading' && (
-          <LoadingDots className={loadingStyles} role="img" aria-label="Please wait..." />
+          <LoadingDots cs={styleOverrides.loadingStyles} role="img" aria-label="Please wait..." />
         )}
         {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
       </AriaLiveRegion>
diff --git a/modules/react/package.json b/modules/react/package.json
index 0160794f08..70406585d1 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.3.38",
-    "@workday/canvas-kit-styling": "^10.3.38",
+    "@workday/canvas-kit-popup-stack": "^10.3.39",
+    "@workday/canvas-kit-styling": "^10.3.39",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "@workday/design-assets-types": "^0.2.8",
diff --git a/modules/react/select/stories/examples/Alert.tsx b/modules/react/select/stories/examples/Alert.tsx
index f1b5595254..b1ecd30947 100644
--- a/modules/react/select/stories/examples/Alert.tsx
+++ b/modules/react/select/stories/examples/Alert.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -19,7 +24,7 @@ export const Alert = () => {
     setValue(event.target.value);
   };
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField error="alert">
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/Basic.tsx b/modules/react/select/stories/examples/Basic.tsx
index caca9a31b4..099b70e939 100644
--- a/modules/react/select/stories/examples/Basic.tsx
+++ b/modules/react/select/stories/examples/Basic.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Basic = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/Complex.tsx b/modules/react/select/stories/examples/Complex.tsx
index 5fcdfda574..84789ebe5f 100644
--- a/modules/react/select/stories/examples/Complex.tsx
+++ b/modules/react/select/stories/examples/Complex.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   {serverId: 'email', label: 'E-mail'},
@@ -25,7 +30,7 @@ export const Complex = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/Disabled.tsx b/modules/react/select/stories/examples/Disabled.tsx
index 0c9d760c38..9fe70b1cd9 100644
--- a/modules/react/select/stories/examples/Disabled.tsx
+++ b/modules/react/select/stories/examples/Disabled.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Disabled = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/DisabledOption.tsx b/modules/react/select/stories/examples/DisabledOption.tsx
index 3d00786355..2c4582a720 100644
--- a/modules/react/select/stories/examples/DisabledOption.tsx
+++ b/modules/react/select/stories/examples/DisabledOption.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const DisabledOptions = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/Error.tsx b/modules/react/select/stories/examples/Error.tsx
index e87c4c6606..5a5678395d 100644
--- a/modules/react/select/stories/examples/Error.tsx
+++ b/modules/react/select/stories/examples/Error.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -19,7 +24,7 @@ export const Error = () => {
     setValue(event.target.value);
   };
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
         <FormField error="error">
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/FetchingDynamicItems.tsx b/modules/react/select/stories/examples/FetchingDynamicItems.tsx
index ea10fa3815..aa4ecf4940 100644
--- a/modules/react/select/stories/examples/FetchingDynamicItems.tsx
+++ b/modules/react/select/stories/examples/FetchingDynamicItems.tsx
@@ -4,6 +4,12 @@ import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {useMount} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+  maxWidth: px2rem(300),
+});
 
 const movieListItems = [
   {
@@ -68,7 +74,7 @@ export const FetchingDynamicItems = () => {
   });
 
   return (
-    <Flex flexDirection="column" maxWidth={300}>
+    <Flex cs={parentContainerStyles}>
       <Select model={model}>
         <FormField label="Choose a Film">
           <Select.Input
diff --git a/modules/react/select/stories/examples/InitialSelectedItem.tsx b/modules/react/select/stories/examples/InitialSelectedItem.tsx
index 3a887d287c..b9584e213d 100644
--- a/modules/react/select/stories/examples/InitialSelectedItem.tsx
+++ b/modules/react/select/stories/examples/InitialSelectedItem.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   {
@@ -37,7 +42,7 @@ export const InitialSelectedItem = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select
         items={options}
         initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
diff --git a/modules/react/select/stories/examples/MenuHeight.tsx b/modules/react/select/stories/examples/MenuHeight.tsx
index 901dc714ac..7d634fd95a 100644
--- a/modules/react/select/stories/examples/MenuHeight.tsx
+++ b/modules/react/select/stories/examples/MenuHeight.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const selectCardStyles = createStyles({
+  maxHeight: px2rem(200),
+});
 
 const cities = [
   'Atlanta (United States)',
@@ -43,7 +48,7 @@ export const MenuHeight = () => {
         <Select items={cities}>
           <FormField.Input as={Select.Input} />
           <Select.Popper>
-            <Select.Card maxHeight={200}>
+            <Select.Card cs={selectCardStyles}>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
diff --git a/modules/react/select/stories/examples/Placeholder.tsx b/modules/react/select/stories/examples/Placeholder.tsx
index f1387f751f..0624370cf8 100644
--- a/modules/react/select/stories/examples/Placeholder.tsx
+++ b/modules/react/select/stories/examples/Placeholder.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Placeholder = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField label="Contact">
           <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
diff --git a/modules/react/select/stories/examples/Required.tsx b/modules/react/select/stories/examples/Required.tsx
index 74ea21d250..ddc12909ed 100644
--- a/modules/react/select/stories/examples/Required.tsx
+++ b/modules/react/select/stories/examples/Required.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Required = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <FormField isRequired>
         <Select items={options}>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/WithIcons.tsx b/modules/react/select/stories/examples/WithIcons.tsx
index a9d66a8f04..e69aa0b0f5 100644
--- a/modules/react/select/stories/examples/WithIcons.tsx
+++ b/modules/react/select/stories/examples/WithIcons.tsx
@@ -8,6 +8,16 @@ import {
   uploadCloudIcon,
   userIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: px2rem(300),
+  }),
+  selectCardStyles: createStyles({
+    maxHeight: px2rem(200),
+  }),
+};
 
 const customOptions = [
   {text: 'Activity Stream', id: 'activity-stream', icon: activityStreamIcon},
@@ -28,11 +38,11 @@ export const WithIcons = () => {
           <FormField.Label>Contact</FormField.Label>
           <FormField.Input
             as={Select.Input}
-            width="300px"
+            cs={styleOverrides.formfieldInputStyles}
             inputStartIcon={selectedItem.value.icon}
           />
           <Select.Popper>
-            <Select.Card maxHeight="200px">
+            <Select.Card cs={styleOverrides.selectCardStyles}>
               {model.state.items.length > 0 && (
                 <Select.List>
                   {item => (
diff --git a/modules/react/table/stories/examples/Basic.tsx b/modules/react/table/stories/examples/Basic.tsx
index 55d9a22976..c2344a6a4a 100644
--- a/modules/react/table/stories/examples/Basic.tsx
+++ b/modules/react/table/stories/examples/Basic.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const tableHeaderStyles = createStyles({
+  backgroundColor: system.color.bg.alt.softer,
+});
 
 export const Basic = () => {
   return (
@@ -8,10 +14,10 @@ export const Basic = () => {
       <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
       <Table.Head>
         <Table.Row>
-          <Table.Header scope="col" backgroundColor="soap100">
+          <Table.Header scope="col" cs={tableHeaderStyles}>
             Drink
           </Table.Header>
-          <Table.Header scope="col" backgroundColor="soap100">
+          <Table.Header scope="col" cs={tableHeaderStyles}>
             Size
           </Table.Header>
         </Table.Row>
diff --git a/modules/react/table/stories/examples/BasicWithHeading.tsx b/modules/react/table/stories/examples/BasicWithHeading.tsx
index 2367a20cb4..c396bbcf5a 100644
--- a/modules/react/table/stories/examples/BasicWithHeading.tsx
+++ b/modules/react/table/stories/examples/BasicWithHeading.tsx
@@ -3,22 +3,33 @@ import React from 'react';
 import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    marginBottom: system.space.x4,
+  }),
+  tableHeaderStyles: createStyles({
+    backgroundColor: system.color.bg.alt.softer,
+  }),
+};
 
 export const BasicWithHeading = () => {
   const headingID = useUniqueId();
 
   return (
     <>
-      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
         Pizza Toppings
       </Heading>
       <Table aria-labelledby={headingID}>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Toppings
             </Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Amount
             </Table.Header>
           </Table.Row>
diff --git a/modules/react/table/stories/examples/FixedColumn.tsx b/modules/react/table/stories/examples/FixedColumn.tsx
index 7b7e3afd17..ab8706e0bc 100644
--- a/modules/react/table/stories/examples/FixedColumn.tsx
+++ b/modules/react/table/stories/examples/FixedColumn.tsx
@@ -2,8 +2,24 @@ import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    marginBottom: system.space.x4,
+  }),
+  tableStyles: createStyles({
+    width: px2rem(690),
+  }),
+  tableHeaderStyles: createStyles({
+    position: 'sticky',
+    left: system.space.zero,
+    backgroundColor: system.color.bg.alt.softer,
+    borderRight: `2px solid ${system.color.border.divider}`,
+  }),
+};
 
 export const FixedColumn = () => {
   const headingID = useUniqueId();
@@ -77,19 +93,13 @@ export const FixedColumn = () => {
   ];
   return (
     <>
-      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
         Performance Car Specs
       </Heading>
-      <Table width={690} aria-labelledby={headingID} tabIndex={0}>
+      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>
         <Table.Head>
           <Table.Row>
-            <Table.Header
-              scope="col"
-              position="sticky"
-              left="0"
-              backgroundColor="soap100"
-              borderRight={`2px solid ${colors.soap400}`}
-            >
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Make
             </Table.Header>
             <Table.Header scope="col">Model</Table.Header>
@@ -106,13 +116,7 @@ export const FixedColumn = () => {
           {exampleData.map(item => (
             <>
               <Table.Row>
-                <Table.Header
-                  scope="row"
-                  position="sticky"
-                  left="0"
-                  backgroundColor="soap100"
-                  borderRight={`2px solid ${colors.soap400}`}
-                >
+                <Table.Header scope="row" cs={styleOverrides.tableHeaderStyles}>
                   {item.make}
                 </Table.Header>
                 <Table.Cell>{item.model}</Table.Cell>
diff --git a/modules/react/table/stories/examples/RightToLeft.tsx b/modules/react/table/stories/examples/RightToLeft.tsx
index 7034b87170..19cca47775 100644
--- a/modules/react/table/stories/examples/RightToLeft.tsx
+++ b/modules/react/table/stories/examples/RightToLeft.tsx
@@ -2,6 +2,12 @@ import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const tableHeaderStyles = createStyles({
+  backgroundColor: system.color.bg.alt.softer,
+});
 
 export const RightToLeft = () => {
   return (
@@ -10,10 +16,10 @@ export const RightToLeft = () => {
         <Table.Caption>משקאות קפה וגדלים</Table.Caption>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={tableHeaderStyles}>
               מַשׁקֶה
             </Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={tableHeaderStyles}>
               גודל
             </Table.Header>
           </Table.Row>
diff --git a/modules/styling-transform/index.ts b/modules/styling-transform/index.ts
index bf01f81081..016d1eb6c0 100644
--- a/modules/styling-transform/index.ts
+++ b/modules/styling-transform/index.ts
@@ -5,6 +5,8 @@ export {parseObjectToStaticValue} from './lib/utils/parseObjectToStaticValue';
 export {createObjectTransform} from './lib/createObjectTransform';
 export {createPropertyTransform} from './lib/createPropertyTransform';
 export {styleTransformer};
+export {withDefaultContext} from './lib/styleTransform';
+export {getClassName} from './lib/utils/handleCreateStencil';
 
 // be compatible with ttypescript which expects a default export
 export default styleTransformer;
diff --git a/modules/styling-transform/lib/styleTransform.ts b/modules/styling-transform/lib/styleTransform.ts
index 610b08499c..f9a164cfb0 100644
--- a/modules/styling-transform/lib/styleTransform.ts
+++ b/modules/styling-transform/lib/styleTransform.ts
@@ -12,6 +12,7 @@ import {handleCssVar} from './utils/handleCssVar';
 import {Config, NodeTransformer, ObjectTransform, TransformerContext} from './utils/types';
 import {handleKeyframes} from './utils/handleKeyframes';
 import {handleInjectGlobal} from './utils/handleInjectGlobal';
+import {handleParentModifier} from './utils/handleParentModifier';
 
 export type NestedStyleObject = {[key: string]: string | NestedStyleObject};
 
@@ -20,7 +21,8 @@ export interface StyleTransformerOptions extends TransformerContext {
   transformers?: NodeTransformer[];
 }
 
-let vars: TransformerContext['variables'] = {};
+let vars: TransformerContext['names'] = {};
+let extractedNames: TransformerContext['extractedNames'] = {};
 let styles: TransformerContext['styles'] = {};
 let cache: TransformerContext['cache'] = {};
 let loadedFallbacks = false;
@@ -32,6 +34,7 @@ let config: Config = {};
  */
 export function _reset() {
   vars = {};
+  extractedNames = {};
   styles = {};
   cache = {};
   loadedFallbacks = false;
@@ -63,7 +66,7 @@ export default function styleTransformer(
     configLoaded = true;
   }
 
-  const {variables, ...transformContext} = withDefaultContext(program.getTypeChecker(), {
+  const {names, ...transformContext} = withDefaultContext(program.getTypeChecker(), {
     ...config,
     ...options,
   });
@@ -83,8 +86,10 @@ export default function styleTransformer(
     const fallbackVars = getVariablesFromFiles(files);
     console.log(`Found ${Object.keys(fallbackVars).length} variables.`);
 
-    // eslint-disable-next-line no-param-reassign
-    vars = {...variables, ...fallbackVars};
+    // eslint-disable-next-line guard-for-in
+    for (const key in fallbackVars) {
+      names[key] = fallbackVars[key];
+    }
     loadedFallbacks = true;
   }
 
@@ -108,7 +113,7 @@ export default function styleTransformer(
       }
 
       const newNode = transformContext.transform(node, {
-        variables: vars,
+        names,
         ...transformContext,
       });
 
@@ -126,7 +131,8 @@ export function withDefaultContext(
   return {
     prefix: 'css',
     getPrefix: path => input.prefix || 'css',
-    variables: {},
+    names: vars,
+    extractedNames,
     styles,
     cache,
     checker,
@@ -135,7 +141,7 @@ export function withDefaultContext(
     objectTransforms: [] as ObjectTransform[],
     transform: handleTransformers(transformers || defaultTransformers),
     ...input,
-    propertyTransforms: [handleCalc, handlePx2Rem, handleCssVar].concat(
+    propertyTransforms: [handleCalc, handlePx2Rem, handleCssVar, handleParentModifier].concat(
       input.propertyTransforms || []
     ),
   } as TransformerContext;
diff --git a/modules/styling-transform/lib/utils/createStyleObjectNode.ts b/modules/styling-transform/lib/utils/createStyleObjectNode.ts
index 5bb1ee0262..88d7e0c0d7 100644
--- a/modules/styling-transform/lib/utils/createStyleObjectNode.ts
+++ b/modules/styling-transform/lib/utils/createStyleObjectNode.ts
@@ -63,7 +63,7 @@ export function serializeStyles(
   template: string,
   context: TransformerContext
 ) {
-  const {getFileName, styles, cache} = context;
+  const {getFileName, styles, cache, names, extractedNames} = context;
   const fileName = getFileName(node.getSourceFile().fileName);
   const hash = getHash(node, context);
   const serialized = {...serializedStylesEmotion([input]), name: hash} as ReturnType<
@@ -74,8 +74,20 @@ export function serializeStyles(
     const styleOutput = compileCSS(
       template.replace('%s', serialized.styles).replace('%n', serialized.name)
     );
+
+    let extractedStyleOutput = styleOutput;
+
+    for (const key in names) {
+      if (extractedNames[names[key]]) {
+        // @ts-ignore replaceAll was added in es2021, but our lib versions don't go past es2019. replaceAll is available in node 15+
+        extractedStyleOutput = extractedStyleOutput.replaceAll(
+          names[key],
+          extractedNames[names[key]]
+        );
+      }
+    }
     styles[fileName] = styles[fileName] || [];
-    styles[fileName].push(styleOutput);
+    styles[fileName].push(extractedStyleOutput);
     cache[hash] = styleOutput;
   }
 
diff --git a/modules/styling-transform/lib/utils/getFallbackVariable.ts b/modules/styling-transform/lib/utils/getFallbackVariable.ts
index 75fd7fcfe0..984e7b99f7 100644
--- a/modules/styling-transform/lib/utils/getFallbackVariable.ts
+++ b/modules/styling-transform/lib/utils/getFallbackVariable.ts
@@ -1,15 +1,15 @@
 /**
  * Looks for a variable value that doesn't include a fallback and automatically adds one if found in
- * the current cache of variables. This allows fallbacks to be automatically included in
- * environments without the variables defined. This is most useful for Storybook or other sandboxes
- * that may not have CSS Variables defined. The fallbacks will allow the UI to look correct without
- * additional setup. Fallbacks come from the `fallbackFiles` transform configuration.
+ * the current cache of names. This allows fallbacks to be automatically included in environments
+ * without the names defined. This is most useful for Storybook or other sandboxes that may not have
+ * CSS Variables defined. The fallbacks will allow the UI to look correct without additional setup.
+ * Fallbacks come from the `fallbackFiles` transform configuration.
  */
 export function getFallbackVariable(
   variableName: string,
-  variables: Record<string, string>
+  names: Record<string, string>
 ): string | undefined {
-  const variable = variableName.includes('var(') ? variableName : variables[variableName];
+  const variable = variableName.includes('var(') ? variableName : names[variableName];
   if (variable && variable.includes('var(')) {
     return variable.replace(
       /(var\(([A-Za-z0-9\-_]+)\))/,
@@ -18,9 +18,9 @@ export function getFallbackVariable(
         /** the full match of the first group "var(--var-name)" */ varMatch,
         /** the variable name  - match of the second group "--var-name" */ cssVarName
       ) => {
-        const value = variables[cssVarName];
+        const value = names[cssVarName];
         if (value && value.startsWith('var')) {
-          return getFallbackVariable(value, variables);
+          return getFallbackVariable(value, names);
         }
         return value || varMatch;
       }
diff --git a/modules/styling-transform/lib/utils/getVarName.ts b/modules/styling-transform/lib/utils/getVarName.ts
index 9ed3a9c2b8..3d0a57c69b 100644
--- a/modules/styling-transform/lib/utils/getVarName.ts
+++ b/modules/styling-transform/lib/utils/getVarName.ts
@@ -17,7 +17,7 @@ import ts from 'typescript';
 export function getVarName(node: ts.Node, parts: string[] = []): string {
   // base case. Join all the parts
   if (!node.parent || node.kind === ts.SyntaxKind.VariableStatement) {
-    return parts.join('-');
+    return parts.join('.');
   }
 
   // Any node with a `name` property that is an identifier can add to the var name
diff --git a/modules/styling-transform/lib/utils/handleCreateStencil.ts b/modules/styling-transform/lib/utils/handleCreateStencil.ts
index 61fbf87c16..4849eb6b52 100644
--- a/modules/styling-transform/lib/utils/handleCreateStencil.ts
+++ b/modules/styling-transform/lib/utils/handleCreateStencil.ts
@@ -3,18 +3,18 @@ import ts from 'typescript';
 import {slugify} from '@workday/canvas-kit-styling';
 
 import {getVarName} from './getVarName';
-import {makeEmotionSafe} from './makeEmotionSafe';
 import {parseObjectToStaticValue} from './parseObjectToStaticValue';
 import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
 import {getValueFromAliasedSymbol, parseNodeToStaticValue} from './parseNodeToStaticValue';
 import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
 import {isImportedFromStyling} from './isImportedFromStyling';
+import {getHash} from './getHash';
 
 /**
  * Handle all arguments of the CallExpression `createStencil()`
  */
 export const handleCreateStencil: NodeTransformer = (node, context) => {
-  const {checker, prefix, variables} = context;
+  const {checker, names, extractedNames} = context;
   /**
    * This will match whenever a `createStencil()` call expression is encountered. It will loop
    * over all the config to extract variables and styles.
@@ -33,7 +33,8 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
     const stencilVariables: Record<string, string> = {};
 
     // Stencil name is the variable name
-    const stencilName = slugify(getVarName(node.expression)).replace('-stencil', '');
+    const stencilName = getVarName(node.expression);
+    const stencilHash = getHash(node, context);
 
     if (ts.isObjectLiteralExpression(config)) {
       const extendedFrom = config.properties.reduce((result, property) => {
@@ -46,7 +47,7 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
           ts.isIdentifier(property.initializer)
         ) {
           const className = getClassName(property.initializer.text, context);
-          const extendsStencilName = className.split('-').slice(1).join('-');
+          const extendsStencilName = property.initializer.text;
 
           if (
             !Object.values(context.styles).some(fileStyles => {
@@ -58,11 +59,10 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
           }
 
           // attach all variables from extends stencil
-          Object.keys(context.variables).forEach(key => {
-            if (key.startsWith(`${extendsStencilName}-`)) {
+          Object.keys(names).forEach(key => {
+            if (key.startsWith(`${extendsStencilName}.`)) {
               // We want to copy a new entry into variables that is the extended stencil with the same variable name as the base variable name
-              context.variables[key.replace(extendsStencilName, stencilName)] =
-                context.variables[key];
+              names[key.replace(extendsStencilName, stencilName)] = names[key];
             }
           });
 
@@ -81,30 +81,34 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
         );
       }) as ts.PropertyAssignment | undefined;
 
-      function extractVariables(node: ts.Node): any {
+      function extractNames(node: ts.Node): any {
         if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name)) {
           if (ts.isObjectLiteralExpression(node.initializer)) {
-            return node.initializer.properties.map(extractVariables);
+            return node.initializer.properties.map(extractNames);
           }
 
-          const varName = `${stencilName}-${makeEmotionSafe(node.name.text)}`;
-          const varValue = `--${prefix}-${varName}`;
-          variables[`${varName}`] = varValue;
+          const varName = getVarName(node.name);
+          const varValue = `--${getClassName(varName, context)}`;
+          names[varName] = `--${node.name.text}-${slugify(stencilName).replace(
+            '-stencil',
+            ''
+          )}-${stencilHash}`;
 
-          variables[makeEmotionSafe(node.name.text)] = varValue;
+          names[node.name.text] = names[varName];
+          extractedNames[names[varName]] = varValue;
 
           // Evaluate the variable defaults
           const value = parseNodeToStaticValue(node.initializer, context).toString();
           if (value) {
             // Only add the stencil variable if there's a value. An empty string means no default.
-            stencilVariables[varValue] = value;
+            stencilVariables[names[varName]] = value;
           }
         }
       }
 
       if (varsConfig && ts.isObjectLiteralExpression(varsConfig.initializer)) {
         varsConfig.initializer.properties.forEach(variable => {
-          extractVariables(variable);
+          extractNames(variable);
         });
       }
 
@@ -156,9 +160,13 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
                       ts.factory.updateObjectLiteralExpression(
                         modifierProperty.initializer,
                         modifierProperty.initializer.properties.map(modifier => {
-                          const styleObj = parseStyleBlock(modifier, context, stencilName);
+                          const styleObj = parseStyleBlock(
+                            modifier,
+                            context,
+                            getClassName(stencilName, context)
+                          );
 
-                          if (styleObj && modifier.name && Object.keys(styleObj).length) {
+                          if (styleObj && modifier.name) {
                             const initializer = createStyleReplacementNode(
                               modifier,
                               styleObj,
@@ -331,7 +339,9 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
 
       return ts.factory.updateCallExpression(node, node.expression, undefined, [
         ts.factory.updateObjectLiteralExpression(config, configProperties),
-        ts.factory.createStringLiteral(`${prefix}-${stencilName}`),
+        ts.factory.createStringLiteral(
+          `${slugify(stencilName).replace('-stencil', '')}-${stencilHash}`
+        ),
       ]);
     }
   }
@@ -353,7 +363,7 @@ function parseStyleBlock(
     if (ts.isObjectLiteralExpression(property.initializer)) {
       styleObj = parseObjectToStaticValue(property.initializer, {
         ...context,
-        variableScope: `${stencilName}-`,
+        nameScope: `${stencilName}.`,
       });
     }
 
@@ -362,7 +372,7 @@ function parseStyleBlock(
       if (returnNode) {
         styleObj = parseObjectToStaticValue(returnNode, {
           ...context,
-          variableScope: `${stencilName}-`,
+          nameScope: `${stencilName}.`,
         });
       }
     }
@@ -373,7 +383,7 @@ function parseStyleBlock(
     if (returnNode) {
       styleObj = parseObjectToStaticValue(returnNode, {
         ...context,
-        variableScope: `${stencilName}-`,
+        nameScope: `${stencilName}.`,
       });
     }
   }
@@ -413,15 +423,22 @@ function createStyleReplacementNode(
   className: string,
   context: TransformerContext
 ) {
+  const {names, extractedNames} = context;
   const serialized = serializeStyles(node, styleObj, `.${className}{%s}`, context);
 
+  const varName = getVarName(node);
+  const value = `css-${serialized.name}`;
+  names[varName] = value;
+  extractedNames[value] = getClassName(varName, context);
+
   return createStyleObjectNode(serialized.styles, serialized.name);
 }
 
-function getClassName(name: string, {prefix}: TransformerContext): string {
+export function getClassName(name: string, {prefix}: TransformerContext): string {
   return (
     `${prefix}-` +
     slugify(name)
+      .replace('-vars', '')
       .replace('-stencil', '')
       .replace('-base', '')
       .replace('-modifiers', '-')
diff --git a/modules/styling-transform/lib/utils/handleCreateVars.ts b/modules/styling-transform/lib/utils/handleCreateVars.ts
index 2782b7ed22..311239efd4 100644
--- a/modules/styling-transform/lib/utils/handleCreateVars.ts
+++ b/modules/styling-transform/lib/utils/handleCreateVars.ts
@@ -3,12 +3,10 @@ import ts from 'typescript';
 import {slugify} from '@workday/canvas-kit-styling';
 
 import {getVarName} from './getVarName';
-import {makeEmotionSafe} from './makeEmotionSafe';
 import {NodeTransformer, TransformerContext} from './types';
+import {getHash} from './getHash';
 
 export const handleCreateVars: NodeTransformer = (node, context) => {
-  const {prefix} = context;
-
   /**
    * This will create a variable
    */
@@ -17,7 +15,7 @@ export const handleCreateVars: NodeTransformer = (node, context) => {
     ts.isIdentifier(node.expression) &&
     node.expression.text === 'createVars'
   ) {
-    const {id, vars} = addVars(node, context);
+    const {id, vars} = addNames(node, context);
 
     return ts.factory.updateCallExpression(
       node,
@@ -28,7 +26,7 @@ export const handleCreateVars: NodeTransformer = (node, context) => {
           [
             ts.factory.createPropertyAssignment(
               ts.factory.createIdentifier('id'),
-              ts.factory.createStringLiteral(`${prefix}-${id}`)
+              ts.factory.createStringLiteral(id)
             ),
             ts.factory.createPropertyAssignment(
               ts.factory.createIdentifier('args'),
@@ -54,8 +52,8 @@ export const handleCreateVars: NodeTransformer = (node, context) => {
    * }
    * ```
    *
-   * This happens when variables are imported from other files. We don't need to transform this, but
-   * we'll need to add variables for property parsing.
+   * This happens when names are imported from other files. We don't need to transform this, but
+   * we'll need to add names for property parsing.
    */
   if (ts.isObjectLiteralExpression(node)) {
     node.properties.forEach(property => {
@@ -65,7 +63,7 @@ export const handleCreateVars: NodeTransformer = (node, context) => {
         ts.isIdentifier(property.initializer.expression) &&
         property.initializer.expression.text === 'createVars'
       ) {
-        addVars(property.initializer, context);
+        addNames(property.initializer, context);
       }
     });
   }
@@ -73,17 +71,20 @@ export const handleCreateVars: NodeTransformer = (node, context) => {
   return;
 };
 
-function addVars(node: ts.CallExpression, context: TransformerContext) {
-  const {prefix, variables} = context;
+function addNames(node: ts.CallExpression, context: TransformerContext) {
+  const {prefix, names, extractedNames} = context;
+  const hash = getHash(node, context);
 
-  const id = slugify(getVarName(node)).replace('-vars', '');
+  const varNamePrefix = getVarName(node);
   const vars = node.arguments
     .map(arg => ts.isStringLiteral(arg) && arg.text)
     .filter(Boolean) as string[];
 
   vars.forEach(v => {
-    variables[`${id}-${makeEmotionSafe(v)}`] = `--${prefix}-${id}-${makeEmotionSafe(v)}`;
+    const varName = `${varNamePrefix}.${v}`;
+    names[varName] = `--${v}-${hash}`;
+    extractedNames[names[varName]] = `--${prefix}-${slugify(varName).replace('-vars', '')}`;
   });
 
-  return {id, vars};
+  return {id: hash, vars};
 }
diff --git a/modules/styling-transform/lib/utils/handleCssVar.ts b/modules/styling-transform/lib/utils/handleCssVar.ts
index b8abb35abe..18e2c16d76 100644
--- a/modules/styling-transform/lib/utils/handleCssVar.ts
+++ b/modules/styling-transform/lib/utils/handleCssVar.ts
@@ -12,7 +12,7 @@ export const handleCssVar = createPropertyTransform((node, context) => {
   ) {
     const args = node.arguments.map(arg => parseNodeToStaticValue(arg, context));
 
-    return cssVar(args[0] as string, (args[1] as string) || context.variables[args[0]]);
+    return cssVar(args[0] as string, (args[1] as string) || context.names[args[0]]);
   }
 
   return;
diff --git a/modules/styling-transform/lib/utils/handleKeyframes.ts b/modules/styling-transform/lib/utils/handleKeyframes.ts
index 210133b24d..fbe9962031 100644
--- a/modules/styling-transform/lib/utils/handleKeyframes.ts
+++ b/modules/styling-transform/lib/utils/handleKeyframes.ts
@@ -54,7 +54,7 @@ function createStyleReplacementNode(
   const serialized = serializeStyles(node, styleObj, `@keyframes animation-%n{%s}`, context);
   const animationName = `animation-${serialized.name}`;
 
-  context.variables[identifierName] = animationName;
+  context.names[identifierName] = animationName;
 
   return createStyleObjectNode(serialized.styles, serialized.name);
 }
diff --git a/modules/styling-transform/lib/utils/handleParentModifier.ts b/modules/styling-transform/lib/utils/handleParentModifier.ts
new file mode 100644
index 0000000000..4de8cea075
--- /dev/null
+++ b/modules/styling-transform/lib/utils/handleParentModifier.ts
@@ -0,0 +1,29 @@
+import ts from 'typescript';
+
+import {parentModifier} from '@workday/canvas-kit-styling';
+import {createPropertyTransform} from '../createPropertyTransform';
+import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+
+export const handleParentModifier = createPropertyTransform((node, context) => {
+  const {names, extractedNames} = context;
+
+  if (
+    ts.isComputedPropertyName(node) &&
+    ts.isCallExpression(node.expression) &&
+    ts.isIdentifier(node.expression.expression) &&
+    node.expression.expression.text === 'parentModifier'
+  ) {
+    const args = node.expression.arguments.map(arg => parseNodeToStaticValue(arg, context));
+    const hash = args[0].toString().replace('css-', 'm');
+
+    // add a mapping from `css-{hash}` to `{hash}` for extraction string replacement
+    names[args[0]] = hash;
+
+    // map the `{hash}` to the extracted CSS class name
+    extractedNames[hash] = extractedNames[args[0]];
+
+    return parentModifier(args[0].toString());
+  }
+
+  return;
+});
diff --git a/modules/styling-transform/lib/utils/makeEmotionSafe.ts b/modules/styling-transform/lib/utils/makeEmotionSafe.ts
deleted file mode 100644
index 0d18ccbcdb..0000000000
--- a/modules/styling-transform/lib/utils/makeEmotionSafe.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Util function to fix an issue with Emotion by
- * appending `EmotionIssue#3066` to end of css variable
- * See issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)
- */
-export function makeEmotionSafe(key: string): string {
-  if (key.endsWith('label')) {
-    return `${key}-emotion-safe`;
-  }
-  return key;
-}
diff --git a/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts b/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
index dcb949701d..e4bc76aaf3 100644
--- a/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
+++ b/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
@@ -2,7 +2,6 @@ import ts from 'typescript';
 
 import {slugify} from '@workday/canvas-kit-styling';
 
-import {makeEmotionSafe} from './makeEmotionSafe';
 import {getErrorMessage} from './getErrorMessage';
 import {TransformerContext} from './types';
 
@@ -45,7 +44,8 @@ export function parseNodeToStaticValue(
 
   // a.b
   if (ts.isPropertyAccessExpression(node)) {
-    const varName = getCSSVariableKey(getPropertyAccessExpressionText(node));
+    getPropertyAccessExpressionText(node);
+    const varName = getPropertyAccessExpressionText(node);
 
     const value =
       getValueFromProcessedNodes(varName, context) ||
@@ -70,7 +70,7 @@ export function parseNodeToStaticValue(
 
   // [a.b]
   if (ts.isComputedPropertyName(node) && ts.isPropertyAccessExpression(node.expression)) {
-    const varName = getCSSVariableKey(getPropertyAccessExpressionText(node.expression));
+    const varName = getPropertyAccessExpressionText(node.expression);
 
     const value =
       getValueFromProcessedNodes(varName, context) ||
@@ -81,6 +81,11 @@ export function parseNodeToStaticValue(
     }
   }
 
+  // [`${a.b} &`]
+  if (ts.isComputedPropertyName(node) && ts.isTemplateExpression(node.expression)) {
+    return getStyleValueFromTemplateExpression(node.expression, context);
+  }
+
   /**
    * ```ts
    * `border 1px ${myVars.colors.border}`
@@ -154,7 +159,7 @@ function parseTypeToStaticValue(type: ts.Type): string | number | void {
 
 function getCSSVariableKey(text: string): string {
   const [id, name] = getVariableNameParts(text);
-  return `${slugify(id)}-${makeEmotionSafe(name)}`;
+  return `${slugify(id)}-${name}`;
 }
 
 /**
@@ -165,10 +170,6 @@ function getCSSVariableKey(text: string): string {
 function getPropertyAccessExpressionText(node: ts.PropertyAccessExpression): string {
   if (ts.isIdentifier(node.name)) {
     if (ts.isIdentifier(node.expression)) {
-      if (node.name.text === 'vars') {
-        // skip vars in name for stencil generated variables
-        return `${node.expression.text}`;
-      }
       return `${node.expression.text}.${node.name.text}`;
     }
     if (ts.isPropertyAccessExpression(node.expression)) {
@@ -184,7 +185,7 @@ function getVariableNameParts(input: string): [string, string] {
   // grab the last item in the array. This will also mutate the array, removing the last item
   const variable = parts.pop()!;
 
-  return [parts.join('.').replace(/(vars|stencil|styles)/i, ''), variable];
+  return [parts.join('.'), variable];
 }
 
 /**
@@ -271,15 +272,14 @@ export function getValueFromAliasedSymbol(
 }
 
 function getValueFromProcessedNodes(varName: string, context: TransformerContext): string | void {
-  const safeVarName = makeEmotionSafe(varName);
-  const {variables} = context;
+  const {names} = context;
 
-  if (variables[safeVarName]) {
-    return variables[safeVarName];
+  if (names[varName]) {
+    return names[varName];
   }
 
-  if (context.variableScope && variables[`${context.variableScope}${safeVarName}`]) {
-    return variables[`${context.variableScope}${safeVarName}`];
+  if (context.nameScope && names[`${context.nameScope}${varName}`]) {
+    return names[`${context.nameScope}${varName}`];
   }
 }
 
diff --git a/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts b/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
index 7e307a1b0b..99cf64dba2 100644
--- a/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
+++ b/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
@@ -30,7 +30,7 @@ function wrapStyleObj(styleObj: NestedStyleObject, context: TransformerContext):
         styleObj[key] = wrapStyleObj(value, context);
       }
       if (typeof value === 'string') {
-        styleObj[key] = maybeWrapCSSVariables(value, context.variables);
+        styleObj[key] = maybeWrapCSSVariables(value, context.names);
       }
     }
   }
@@ -110,7 +110,6 @@ function parsePropertyToStaticValue(node: ts.Node, context: TransformerContext):
     // Spread assignments are a bit complicated to use the AST to figure out, so we'll ask the
     // TypeScript type checker.
     const type = context.checker.getTypeAtLocation(node.expression);
-    context.checker.typeToString(type);
     return parseStyleObjFromType(type, context);
   }
 
@@ -157,7 +156,7 @@ export function parseStyleObjFromType(type: ts.Type, context: TransformerContext
  */
 export function maybeWrapCSSVariables(
   input: string | number,
-  variables: Record<string, string>
+  names: Record<string, string>
 ): string | number {
   if (typeof input === 'number') {
     return input;
@@ -173,9 +172,9 @@ export function maybeWrapCSSVariables(
       }
 
       // find a possible fallback
-      const fallbackVariable = getFallbackVariable(variable, variables);
+      const fallbackVariable = getFallbackVariable(variable, names);
       const fallback = fallbackVariable
-        ? `, ${maybeWrapCSSVariables(fallbackVariable, variables)}`
+        ? `, ${maybeWrapCSSVariables(fallbackVariable, names)}`
         : '';
 
       // if this a var wrapper without a fallback
diff --git a/modules/styling-transform/lib/utils/types.ts b/modules/styling-transform/lib/utils/types.ts
index ec728c8e9a..3f01f35a6f 100644
--- a/modules/styling-transform/lib/utils/types.ts
+++ b/modules/styling-transform/lib/utils/types.ts
@@ -4,7 +4,40 @@ export type TransformerContext = {
   checker: ts.TypeChecker;
   prefix: string;
   getPrefix: (path: string) => string;
-  variables: Record<string, string>;
+  /**
+   * Name and value pairs for things that cannot be statically resolved via the type system. The
+   * name is resolved via `getPropertyAccessExpressionText` and the value can be anything. It should
+   * be whatever you want the runtime value to be, which is usually a hash. For example:
+   *
+   * ```ts
+   * const myVars = createVars('color');
+   *
+   * color: myVars.color
+   * ```
+   *
+   * The type of `myVars.color` is `string`, but both in runtime and transpile time, the
+   * `myVars.color` is resolved to a hard value. The `names` cache is a lookup to that value. The
+   * `names` cache does not track the AST of `color`, so `const {color} = myVars` will not work. The
+   * key comes from `getPropertyAccessExpressionText` which replaces `.` with `-`.
+   */
+  names: Record<string, string>;
+  /**
+   * Extracted names is a mapping from `names` to a value that will be output to CSS. If you add an
+   * entry to `names`, add an entry to `extractedNames` where the `key` of `extractedNames` is the
+   * `value` of `names`.
+   *
+   * For example:
+   * ```ts
+   * // names
+   * { "myVars.foo": "--css-12345" },
+   * // extractedNames
+   * { "--css-12345": "--css-my-vars-foo" }
+   * ```
+   *
+   * The value in `names` will be used for transformation of TypeScript files into JavaScript files.
+   * The `extractedNames` will be used for the output CSS files.
+   */
+  extractedNames: Record<string, string>;
   /**
    * Variable scoping allows for a variable lookup to match a predefined scope. For example, in
    * stencils, the `base` config can take a function with the locally defined variable names.
@@ -20,12 +53,11 @@ export type TransformerContext = {
    * })
    * ```
    *
-   * In this case, a variable lookup would fail because there's no global variable named `color`.
-   * There's a global variable named `my-color` which is the fully-qualified variable name. The
-   * stencil parser will add `my-` as a variable scoping when processing style attributes for
-   * variable lookup purposes.
+   * In this case, a name lookup would fail because there's no global name named `color`. There's a
+   * global name named `my-color` which is the fully-qualified name. The stencil parser will add
+   * `my-` as a name scoping when processing style attributes for name lookup purposes.
    */
-  variableScope?: string;
+  nameScope?: string;
   /**
    * All styles will be collected here. These styles will then be flushed out to CSS files according
    * to the `getFileName` function.
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
index 0f33d4f59b..a03048ab71 100644
--- a/modules/styling-transform/package.json
+++ b/modules/styling-transform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling-transform",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
-    "@workday/canvas-kit-styling": "^10.3.38",
+    "@workday/canvas-kit-styling": "^10.3.39",
     "@workday/canvas-tokens-web": "^1.3.1",
     "stylis": "4.0.13",
     "typescript": "4.2"
diff --git a/modules/styling-transform/spec/utils/getVarName.spec.ts b/modules/styling-transform/spec/utils/getVarName.spec.ts
index fd68e61a9a..b67510a1e2 100644
--- a/modules/styling-transform/spec/utils/getVarName.spec.ts
+++ b/modules/styling-transform/spec/utils/getVarName.spec.ts
@@ -32,7 +32,7 @@ describe('getVarName', () => {
 
     const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)![0];
 
-    expect(getVarName(node)).toEqual('foo-bar-baz');
+    expect(getVarName(node)).toEqual('foo.bar.baz');
   });
 
   it('should get the correct CSS variable name of a nested PropertyAssignment with functions', () => {
@@ -49,7 +49,7 @@ describe('getVarName', () => {
 
     const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)![0];
 
-    expect(getVarName(node)).toEqual('foo-bar-baz');
+    expect(getVarName(node)).toEqual('foo.bar.baz');
   });
 
   it('should get the correct CSS variable name of a nested PropertyAssignment with functions', () => {
@@ -66,6 +66,6 @@ describe('getVarName', () => {
 
     const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)![0];
 
-    expect(getVarName(node.name)).toEqual('foo-bar-baz');
+    expect(getVarName(node.name)).toEqual('foo.bar.baz');
   });
 });
diff --git a/modules/styling-transform/spec/utils/handleCalc.spec.ts b/modules/styling-transform/spec/utils/handleCalc.spec.ts
index 79f1a9ba5c..542d4a48e9 100644
--- a/modules/styling-transform/spec/utils/handleCalc.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCalc.spec.ts
@@ -49,7 +49,7 @@ describe('handleCalc', () => {
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
@@ -95,7 +95,7 @@ describe('handleCalc', () => {
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
@@ -141,7 +141,7 @@ describe('handleCalc', () => {
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
@@ -187,7 +187,7 @@ describe('handleCalc', () => {
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
@@ -233,7 +233,7 @@ describe('handleCalc', () => {
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
diff --git a/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts b/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
index 98b5fca86b..89dc7774da 100644
--- a/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
@@ -35,7 +35,7 @@ describe('handleCreateStencil', () => {
 
       const result = transform(program, 'test.ts');
 
-      expect(result).toContain('}, "cnvs-button")');
+      expect(result).toMatch(/}, "button-[a-z0-9]+"\)/);
     });
 
     it('should add a variable to the cache when the arguments are strings', () => {
@@ -48,20 +48,29 @@ describe('handleCreateStencil', () => {
           }
         })
       `);
+      const names = {};
+      const extractedNames = {};
 
-      const sourceFile = program.getSourceFile('test.ts')!;
-      const variables: Record<string, string> = {};
-
-      const node = findNodes(sourceFile, 'createStencil', ts.isCallExpression)![0];
-
-      handleCreateStencil(
-        node,
+      const result = transform(
+        program,
+        'test.ts',
         withDefaultContext(program.getTypeChecker(), {
-          variables,
+          names,
+          extractedNames,
         })
       );
 
-      expect(variables).toHaveProperty('button-color', '--css-button-color');
+      expect(names).toHaveProperty(
+        ['buttonStencil.vars.color'],
+        expect.stringMatching(/--color-button-[a-z0-9]+/)
+      );
+      expect(extractedNames).toHaveProperty(
+        names['buttonStencil.vars.color'],
+        '--css-button-color'
+      );
+
+      // ID of the variable and the stencil should be the same
+      expect(result).toContain(`${names['buttonStencil.vars.color'].replace('--color-', '')}`);
     });
 
     it('should add box-sizing to all stencils', () => {
@@ -106,69 +115,124 @@ describe('handleCreateStencil', () => {
         })
       `);
 
-      const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
 
       expect(result).toContain(
-        'styles: "--css-button-color:red;box-sizing:border-box;padding:12px;"'
+        `styles: "${names['buttonStencil.vars.color']}:red;box-sizing:border-box;padding:12px;"`
+      );
+
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          padding: 12px;
+        }`)
       );
     });
 
     it('should handle dynamic key with stencil variables', () => {
       const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
-      const buttonStencil = createStencil({
-        vars: {
-          color: ''
-        },
-        base: {
-          [color]: 'red'
-        }
-      })
-    `);
+        import {createStencil} from '@workday/canvas-kit-styling';
+        const buttonStencil = createStencil({
+          vars: {
+            color: ''
+          },
+          base: {
+            [color]: 'red'
+          }
+        })
+      `);
 
-      const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
 
-      expect(result).toContain('styles: "box-sizing:border-box;--css-button-color:red;"');
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;${names['buttonStencil.vars.color']}:red;"`
+      );
+
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button { box-sizing: border-box; --css-button-color: red; }')
+      );
     });
+
     it('should not parse variables in the base styles if the value is an empty string', () => {
       const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+        import {createStencil} from '@workday/canvas-kit-styling';
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: ''
-        },
-        base: {
-          [color]: 'red'
-        }
-        base: {padding: 12}
-      })
-    `);
+        const buttonStencil = createStencil({
+          vars: {
+            color: ''
+          },
+          base: {
+            [color]: 'red'
+          }
+          base: {padding: 12}
+        })
+      `);
 
-      const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker())); //?
+      const names = {};
+      const styles = {};
 
-      expect(result).toContain('styles: "box-sizing:border-box;--css-button-color:red;"');
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;${names['buttonStencil.vars.color']}:red;"`
+      );
+
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button { box-sizing: border-box; --css-button-color: red; }')
+      );
     });
 
     it('should handle dynamic key with stencil variables for nested key', () => {
       const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
-      const systemIconStencil = createStencil({
-        vars: {
-          size: '2rem',
-        },
-        base: {}
-      });
-      const buttonStencil = createStencil({
-        base: {
-          [systemIconStencil.vars.size]: '1rem',
-        }
-      })
-    `);
+        import {createStencil} from '@workday/canvas-kit-styling';
+        const systemIconStencil = createStencil({
+          vars: {
+            size: '2rem',
+          },
+          base: {}
+        });
+        const buttonStencil = createStencil({
+          base: {
+            [systemIconStencil.vars.size]: '1rem',
+          }
+        })
+      `);
+
+      const names = {};
+      const styles = {};
 
-      const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker())); //?
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;${names['systemIconStencil.vars.size']}:1rem;"`
+      );
 
-      expect(result).toContain('styles: "box-sizing:border-box;--css-system-icon-size:1rem;"');
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button { box-sizing: border-box; --css-system-icon-size: 1rem; }')
+      );
     });
 
     it('should handle parsing variables in base styles via an ArrowFunction and ParenthesizedExpression', () => {
@@ -186,11 +250,27 @@ describe('handleCreateStencil', () => {
         })
       `);
 
-      const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `${names['buttonStencil.vars.color']}:red;box-sizing:border-box;color:var(${names['buttonStencil.vars.color']});padding:12px;`
+      );
 
-      expect(result).toContain('--css-button-color:red;');
-      expect(result).toContain('color:var(--css-button-color);');
-      expect(result).toContain('padding:12px;');
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          color: var(--css-button-color);
+          padding: 12px;
+        }`)
+      );
     });
 
     it('should handle parsing variables in base styles via an ArrowFunction and ReturnStatement', () => {
@@ -210,11 +290,27 @@ describe('handleCreateStencil', () => {
         })
       `);
 
-      const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
 
-      expect(result).toContain('--css-button-color:red;');
-      expect(result).toContain('color:var(--css-button-color);');
-      expect(result).toContain('padding:12px;');
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `${names['buttonStencil.vars.color']}:red;box-sizing:border-box;color:var(${names['buttonStencil.vars.color']});padding:12px;`
+      );
+
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          color: var(--css-button-color);
+          padding: 12px;
+        }`)
+      );
     });
 
     it('should handle parsing variables in base styles via a MethodDeclaration', () => {
@@ -234,16 +330,32 @@ describe('handleCreateStencil', () => {
         })
       `);
 
-      const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `${names['buttonStencil.vars.color']}:red;box-sizing:border-box;color:var(${names['buttonStencil.vars.color']});padding:12px;`
+      );
 
-      expect(result).toContain('--css-button-color:red;');
-      expect(result).toContain('color:var(--css-button-color);');
-      expect(result).toContain('padding:12px;');
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          color: var(--css-button-color);
+          padding: 12px;
+        }`)
+      );
     });
 
     it('should handle parsing modifiers with ObjectLiteralExpressions', () => {
       const program = createProgramFromSource(`
-        import {createStencil} from '@workday/canvas-kit-styling';
+        import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
 
         const buttonStencil = createStencil({
           vars: {
@@ -257,12 +369,48 @@ describe('handleCreateStencil', () => {
             }
           }
         })
+
+        const childStencil = createStencil({
+          base: {
+            [parentModifier(buttonStencil.modifiers.size.large)]: {
+              color: 'blue',
+            }
+          }
+        })
       `);
 
-      const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const styles = {};
+      const names = {};
+      const extractedNames = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names, extractedNames})
+      );
 
       expect(result).toMatch(/large: { name: "[0-9a-z]+", styles: "padding:20px;" }/);
       expect(result).toMatch(/small: { name: "[0-9a-z]+", styles: "padding:10px;" }/);
+
+      // runtime selector
+      expect(result).toContain(
+        `.${names['buttonStencil.modifiers.size.large'].replace(
+          'css-',
+          'm'
+        )} :where(&){color:blue;}`
+      );
+
+      // extracted selector
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS(`
+          .css-child {
+            box-sizing: border-box;
+          }
+          .css-button--size-large :where(.css-child) {
+            color: blue;
+          }
+      `)
+      );
     });
 
     it('should handle parsing modifiers with ObjectLiteralExpressions', () => {
@@ -433,7 +581,7 @@ describe('handleCreateStencil', () => {
       // base
       expect(styles['test.css']).toContainEqual(
         compileCSS(
-          '.css-button{--css-button-label-emotion-safe:red;box-sizing:border-box;color:var(--css-button-label-emotion-safe);}'
+          '.css-button{--css-button-label:red;box-sizing:border-box;color:var(--css-button-label);}'
         )
       );
 
@@ -449,6 +597,7 @@ describe('handleCreateStencil', () => {
 
   describe('when importing variables from another stencil', () => {
     let program: ts.Program;
+    const names = {};
     const styles = {};
     let result = '';
 
@@ -485,12 +634,14 @@ describe('handleCreateStencil', () => {
       result = transform(
         program,
         'test.ts',
-        withDefaultContext(program.getTypeChecker(), {styles})
+        withDefaultContext(program.getTypeChecker(), {styles, names})
       );
     });
 
     it('should apply the correct variable name to the styles', () => {
-      expect(result).toContain('styles: "box-sizing:border-box;--css-base-color:blue;');
+      expect(result).toMatch(
+        `styles: "box-sizing:border-box;${names['baseStencil.vars.color']}:blue;`
+      );
     });
 
     it('should inject the correct variable name to the CSS output', () => {
@@ -500,8 +651,55 @@ describe('handleCreateStencil', () => {
     });
   });
 
+  describe('when referencing modifiers from another stencil', () => {
+    it('should resolve the CSS class name', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const containerStencil = createStencil({
+          base: {},
+          modifiers: {
+            size: {
+              large: {},
+              small: {}
+            }
+          }
+        });
+
+        const childStencil = createStencil({
+          base: {
+            [\`.\${containerStencil.modifiers.size.large\} &\`]: {
+              padding: 10
+            }
+          }
+        })
+      `);
+
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;.${names['containerStencil.modifiers.size.large']} &{padding:10px;}`
+      );
+
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS(`
+          .css-child {box-sizing: border-box; }
+          .css-container--size-large .css-child { padding: 10px; }
+        `)
+      );
+    });
+  });
+
   describe('when importing from a stencil that was extended from another stencil', () => {
     let program: ts.Program;
+    const names = {};
     const styles = {};
     let result = '';
 
@@ -560,12 +758,14 @@ describe('handleCreateStencil', () => {
       result = transform(
         program,
         'test.ts',
-        withDefaultContext(program.getTypeChecker(), {styles})
+        withDefaultContext(program.getTypeChecker(), {styles, names})
       );
     });
 
     it('should apply the correct variable name to the styles', () => {
-      expect(result).toContain('styles: "box-sizing:border-box;--css-base-color:purple;');
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;${names['baseStencil.vars.color']}:purple;`
+      );
     });
 
     it('should inject the correct variable name to the CSS output', () => {
@@ -578,18 +778,19 @@ describe('handleCreateStencil', () => {
       result = transform(
         program,
         'extended.ts',
-        withDefaultContext(program.getTypeChecker(), {styles})
+        withDefaultContext(program.getTypeChecker(), {styles, names})
       );
 
       expect(result).toContain(
-        'styles: "--css-extended-extendedColor:blue;box-sizing:border-box;--css-base-color:purple;'
+        `styles: "${names['extendedStencil.vars.extendedColor']}:blue;box-sizing:border-box;${names['baseStencil.vars.color']}:purple;`
       );
     });
 
     it('should inject the correct variable name to the CSS output', () => {
+      getFile(styles, 'extended.css');
       expect(getFile(styles, 'extended.css')).toContainEqual(
         compileCSS(
-          '.css-extended { --css-extended-extendedColor: blue; box-sizing:border-box; --css-base-color: purple; }'
+          '.css-extended { --css-extended-extended-color: blue; box-sizing:border-box; --css-base-color: purple; }'
         )
       );
     });
@@ -597,6 +798,7 @@ describe('handleCreateStencil', () => {
 
   it('should handle CSS variables imported from a stencil that was extended from another stencil', () => {
     _reset();
+    const names = {};
     const styles = {};
     const program = createProgramFromSource([
       {
@@ -652,10 +854,12 @@ describe('handleCreateStencil', () => {
     const result = transform(
       program,
       'test.ts',
-      withDefaultContext(program.getTypeChecker(), {styles})
+      withDefaultContext(program.getTypeChecker(), {styles, names})
     );
 
-    expect(result).toContain('styles: "box-sizing:border-box;--css-base-color:purple;"');
+    expect(result).toContain(
+      `styles: "box-sizing:border-box;${names['baseStencil.vars.color']}:purple;"`
+    );
 
     expect(getFile(styles, 'test.css')).toContainEqual(
       compileCSS('.css-final {box-sizing:border-box;--css-base-color: purple;}')
@@ -664,6 +868,7 @@ describe('handleCreateStencil', () => {
 
   it('should use the correct prefix in extended stencils when the base stencil is from another prefix', () => {
     _reset();
+    const names = {};
     const styles = {};
     const program = createProgramFromSource([
       {
@@ -714,17 +919,18 @@ describe('handleCreateStencil', () => {
       'test.ts',
       withDefaultContext(program.getTypeChecker(), {
         styles,
+        names,
         getPrefix: p => (p.includes('base') ? 'base' : 'css'),
       })
     );
 
     expect(result).toContain(
-      'styles: "--css-extended-extendedColor:blue;box-sizing:border-box;--base-base-color:blue;"'
+      `styles: "${names['extendedStencil.vars.extendedColor']}:blue;box-sizing:border-box;${names['baseStencil.vars.color']}:blue;"`
     );
 
     expect(getFile(styles, 'test.css')).toContainEqual(
       compileCSS(
-        '.css-extended {--css-extended-extendedColor:blue;box-sizing:border-box;--base-base-color:blue;}'
+        '.css-extended {--css-extended-extended-color:blue;box-sizing:border-box;--base-base-color:blue;}'
       )
     );
   });
diff --git a/modules/styling-transform/spec/utils/handleCreateStyles.spec.ts b/modules/styling-transform/spec/utils/handleCreateStyles.spec.ts
index 96f948f197..17c43eed44 100644
--- a/modules/styling-transform/spec/utils/handleCreateStyles.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCreateStyles.spec.ts
@@ -261,9 +261,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('background-color:var(--cnvs-my-color);');
+    expect(result).toContain(`background-color:var(${names['myVars.color']});`);
   });
 
   it('should handle cssVar call expressions referencing nested variables', () => {
@@ -279,9 +285,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('background-color:var(--cnvs-my-colors-background);');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`background-color:var(${names['myVars.colors.background']});`);
   });
 
   it('should handle css vars even without the cssVar call expressions referencing static variables', () => {
@@ -313,9 +325,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('background-color:var(--cnvs-my-colors-background);');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`background-color:var(${names['myVars.colors.background']});`);
   });
 
   it('should handle ComputedPropertyName that are static', () => {
@@ -347,9 +365,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('--cnvs-my-color:red;');
+    expect(result).toContain(`${names['myVars.color']}:red;`);
   });
 
   it('should slugify ComputedPropertyName with capital letters that is a variable created with createVars', () => {
@@ -363,9 +387,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('--cnvs-my-hoverColor:red;');
+    expect(result).toContain(`${names['myVars.hoverColor']}:red;`);
   });
 
   it('should slugify cssVars with capital letters that is a variable created with createVars', () => {
@@ -379,9 +409,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('background-color:var(--cnvs-my-hoverColor);');
+    expect(result).toContain(`background-color:var(${names['myVars.hoverColor']});`);
   });
 
   it('should handle ComputedPropertyName that is a variable created with createVars inside an object', () => {
@@ -397,9 +433,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('--cnvs-my-hover-color:red;');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`${names['myVars.hover.color']}:red;`);
   });
 
   it('should handle fallback call expressions referencing static variables', () => {
@@ -413,9 +455,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('background-color:var(--cnvs-my-color, red);');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`background-color:var(${names['myVars.color']}, red);`);
   });
 
   it('should handle fallback call expressions referencing other variables', () => {
@@ -429,9 +477,17 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('background-color:var(--cnvs-my-color, var(--cnvs-my-background));');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(
+      `background-color:var(${names['myVars.color']}, var(${names['myVars.background']}));`
+    );
   });
 
   it('should handle fallback variables if provided', () => {
@@ -443,7 +499,7 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts', {variables: {'--var-1': 'red'}});
+    const result = transform(program, 'test.ts', {names: {'--var-1': 'red'}});
 
     expect(result).toContain('background-color:var(--var-1, red);');
   });
@@ -508,10 +564,16 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
     expect(result).toContain('css-12345');
-    expect(result).toContain('border:1px solid var(--cnvs-my-borderColor);');
+    expect(result).toContain(`border:1px solid var(${names['myVars.borderColor']});`);
   });
 
   it('should handle template stings with multiple spans', () => {
@@ -525,30 +587,20 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
     expect(result).toContain('css-12345');
     expect(result).toContain(
-      'box-shadow:var(--cnvs-my-boxShadowInner) 0px 0px 0px 2px, var(--cnvs-my-boxShadowOuter) 0px 0px 0px 4px'
+      `box-shadow:var(${names['myVars.boxShadowInner']}) 0px 0px 0px 2px, var(${names['myVars.boxShadowOuter']}) 0px 0px 0px 4px`
     );
   });
 
-  it('should make variables safe for Emotion', () => {
-    const program = createProgramFromSource(`
-      import {createStyles, createVars} from '@workday/canvas-kit-styling';
-
-      const myVars = createVars('label')
-
-      const styles = createStyles({
-        color: myVars.label
-      })
-    `);
-
-    const result = transform(program, 'test.ts');
-
-    expect(result).toContain('color:var(--cnvs-my-label-emotion-safe)');
-  });
-
   it('should handle multiple arguments with an identifier of a type of an object literal', () => {
     const program = createProgramFromSource(`
       import {createStyles} from '@workday/canvas-kit-styling';
@@ -630,9 +682,15 @@ describe('createStyles', () => {
       },
     ]);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('styles: "color:var(--cnvs-source-foo)');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`styles: "color:var(${names['sourceVars.foo']})`);
   });
 
   it('should process variable keys from another file if processing is out of order', () => {
@@ -658,9 +716,15 @@ describe('createStyles', () => {
       },
     ]);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('styles: "--cnvs-source-foo:red;');
+    expect(result).toContain(`styles: "${names['sourceVars.foo']}:red;`);
   });
 
   it('should process nested variable properties from another file if processing is out of order', () => {
@@ -686,9 +750,15 @@ describe('createStyles', () => {
       },
     ]);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('styles: "color:var(--cnvs-source-default-foo)');
+    expect(result).toContain(`styles: "color:var(${names['sourceVars.default.foo']})`);
   });
 
   it('should process nested variable keys from another file if processing is out of order', () => {
@@ -714,8 +784,14 @@ describe('createStyles', () => {
       },
     ]);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('styles: "--cnvs-source-default-foo:red;');
+    expect(result).toContain(`styles: "${names['sourceVars.default.foo']}:red;`);
   });
 });
diff --git a/modules/styling-transform/spec/utils/handleCreateVars.spec.ts b/modules/styling-transform/spec/utils/handleCreateVars.spec.ts
index a9906ba4ac..d2823b9aa7 100644
--- a/modules/styling-transform/spec/utils/handleCreateVars.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCreateVars.spec.ts
@@ -4,49 +4,119 @@ import {findNodes} from '../findNodes';
 import {createProgramFromSource} from '../createProgramFromSource';
 
 import {handleCreateVars} from '../../lib/utils/handleCreateVars';
-import {withDefaultContext} from '../../lib/styleTransform';
+import {transform, withDefaultContext} from '../../lib/styleTransform';
 
 describe('handleCreateVars', () => {
   it('should add a variable to the cache when the arguments are strings', () => {
     const program = createProgramFromSource(`
-      const myVars = createVars('color', 'background')
+      const myVars = createVars('color', 'backgroundColor')
     `);
 
     const sourceFile = program.getSourceFile('test.ts')!;
-    const variables: Record<string, string> = {};
+    const names = {};
+    const extractedNames = {};
 
     const node = findNodes(sourceFile, 'createVars', ts.isCallExpression)![0];
 
     handleCreateVars(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables,
+        names,
+        extractedNames,
       })
     );
 
-    expect(variables).toHaveProperty('my-color', '--css-my-color');
-    expect(variables).toHaveProperty('my-background', '--css-my-background');
+    expect(names).toHaveProperty(['myVars.color'], expect.stringMatching(/--color-[a-z0-9]+/));
+    expect(names).toHaveProperty(
+      ['myVars.backgroundColor'],
+      expect.stringMatching(/--backgroundColor-[a-z0-9]+/)
+    );
+
+    expect(extractedNames).toHaveProperty(names['myVars.color'], '--css-my-color');
+    expect(extractedNames).toHaveProperty(
+      names['myVars.backgroundColor'],
+      '--css-my-background-color'
+    );
+  });
+
+  it('should transform variables to use an id and args for static typing of dependencies', () => {
+    const program = createProgramFromSource(`
+      const myVars = createVars('color', 'background')
+    `);
+
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {
+        names,
+      })
+    );
+
+    expect(result).toContain(
+      `const myVars = createVars({ id: "${names['myVars.color'].replace(
+        '--color-',
+        ''
+      )}", args: ["color", "background"] })`
+    );
   });
 
   it('should add nested variables to the cache when the arguments are strings', () => {
     const program = createProgramFromSource(`
       const myVars = {
-        foo: createVars('color')
+        foo: createVars('color', 'backgroundColor')
       }
     `);
 
     const sourceFile = program.getSourceFile('test.ts')!;
-    const variables: Record<string, string> = {};
+    const names = {};
+    const extractedNames = {};
 
     const node = findNodes(sourceFile, 'createVars', ts.isCallExpression)![0];
 
     handleCreateVars(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables,
+        names,
+        extractedNames,
+      })
+    );
+    expect(names).toHaveProperty(['myVars.foo.color'], expect.stringMatching(/--color-[a-z0-9]+/));
+    expect(names).toHaveProperty(
+      ['myVars.foo.backgroundColor'],
+      expect.stringMatching(/--backgroundColor-[a-z0-9]+/)
+    );
+
+    expect(extractedNames).toHaveProperty(names['myVars.foo.color'], '--css-my-foo-color');
+    expect(extractedNames).toHaveProperty(
+      names['myVars.foo.backgroundColor'],
+      '--css-my-foo-background-color'
+    );
+  });
+
+  it('should transform nested variables to use an id and args for static typing of dependencies', () => {
+    const program = createProgramFromSource(`
+      const myVars = {
+        foo: createVars('color')
+      }
+    `);
+
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {
+        names,
       })
     );
 
-    expect(variables).toHaveProperty('my-foo-color', '--css-my-foo-color');
+    expect(result).toContain(
+      `foo: createVars({ id: "${names['myVars.foo.color'].replace(
+        '--color-',
+        ''
+      )}", args: ["color"] })`
+    );
   });
 });
diff --git a/modules/styling-transform/spec/utils/handleCssVar.spec.ts b/modules/styling-transform/spec/utils/handleCssVar.spec.ts
index 43c4b618d6..52e5835211 100644
--- a/modules/styling-transform/spec/utils/handleCssVar.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCssVar.spec.ts
@@ -73,7 +73,7 @@ describe('handleCssVar', () => {
     const result = handleCssVar(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'--some-var': 'red'},
+        names: {'--some-var': 'red'},
       })
     );
 
diff --git a/modules/styling-transform/spec/utils/handleKeyframes.spec.ts b/modules/styling-transform/spec/utils/handleKeyframes.spec.ts
index 00af2ce955..b6e0e7c24c 100644
--- a/modules/styling-transform/spec/utils/handleKeyframes.spec.ts
+++ b/modules/styling-transform/spec/utils/handleKeyframes.spec.ts
@@ -37,21 +37,18 @@ describe('handleKeyframes', () => {
       const buttonAnimation = keyframes\`\`
     `);
 
-    const variables = {};
+    const names = {};
     const sourceFile = program.getSourceFile('test.ts')!;
     const node = findNodes(sourceFile, '', ts.isTaggedTemplateExpression)![0];
 
     handleKeyframes(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables,
+        names,
       })
     );
 
-    expect(variables).toHaveProperty(
-      'buttonAnimation',
-      expect.stringMatching(/animation-[a-z0-9]+/)
-    );
+    expect(names).toHaveProperty('buttonAnimation', expect.stringMatching(/animation-[a-z0-9]+/));
   });
 
   it('should transform CallExpression', () => {
@@ -90,20 +87,17 @@ describe('handleKeyframes', () => {
     `);
 
     const styles = {};
-    const variables = {};
+    const names = {};
     const sourceFile = program.getSourceFile('test.ts')!;
     const node = findNodes(sourceFile, 'keyframes', ts.isCallExpression)![0];
 
-    handleKeyframes(node, withDefaultContext(program.getTypeChecker(), {styles, variables}));
+    handleKeyframes(node, withDefaultContext(program.getTypeChecker(), {styles, names}));
 
     expect(styles['test.css']).toContainEqual(
       expect.stringMatching(
         /@keyframes animation-[a-z0-9]+\s+{\s+from\s+{\s+transform: scale\(0.85\);\s+}\s+to\s+{\s+transform: scale\(1.0\);\s+}\s+}/
       )
     );
-    expect(variables).toHaveProperty(
-      'buttonAnimation',
-      expect.stringMatching(/animation-[a-z0-9]+/)
-    );
+    expect(names).toHaveProperty('buttonAnimation', expect.stringMatching(/animation-[a-z0-9]+/));
   });
 });
diff --git a/modules/styling-transform/spec/utils/handleParentModifier.spec.ts b/modules/styling-transform/spec/utils/handleParentModifier.spec.ts
new file mode 100644
index 0000000000..a6cdc837ed
--- /dev/null
+++ b/modules/styling-transform/spec/utils/handleParentModifier.spec.ts
@@ -0,0 +1,82 @@
+import ts from 'typescript';
+
+import {createProgramFromSource} from '../createProgramFromSource';
+
+import {transform, withDefaultContext, _reset} from '../../lib/styleTransform';
+import {compileCSS} from '../../lib/utils/createStyleObjectNode';
+
+describe('handleParentModifier', () => {
+  let program: ts.Program;
+  let result: string;
+
+  const styles = {};
+  const names = {};
+  const extractedNames = {};
+
+  beforeAll(() => {
+    _reset();
+    program = createProgramFromSource(`
+      import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
+
+      const buttonStencil = createStencil({
+        vars: {
+          color: 'red'
+        },
+        base: {},
+        modifiers: {
+          size: {
+            large: {padding: 20},
+            small: {padding: 10}
+          }
+        }
+      })
+
+      const childStencil = createStencil({
+        base: {
+          [parentModifier(buttonStencil.modifiers.size.large)]: {
+            color: 'blue',
+          }
+        }
+      })
+    `);
+
+    result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {styles, names, extractedNames})
+    );
+  });
+
+  it('should add a mapping from the CSS class name to the hash to the names cache', () => {
+    expect(names).toHaveProperty(
+      names['buttonStencil.modifiers.size.large'],
+      names['buttonStencil.modifiers.size.large'].replace('css-', 'm')
+    );
+  });
+
+  it('should add a mapping from the hash to the extracted CSS class name to the extractedNames cache', () => {
+    expect(extractedNames).toHaveProperty(
+      names['buttonStencil.modifiers.size.large'].replace('css-', 'm'),
+      'css-button--size-large'
+    );
+  });
+
+  it('should transform the runtime to include a selector with only the hash', () => {
+    expect(result).toContain(
+      `.${names['buttonStencil.modifiers.size.large'].replace('css-', 'm')} :where(&){color:blue;}`
+    );
+  });
+
+  it('should extract CSS to include the fully qualified modifier name', () => {
+    expect(styles['test.css']).toContainEqual(
+      compileCSS(`
+          .css-child {
+            box-sizing: border-box;
+          }
+          .css-button--size-large :where(.css-child) {
+            color: blue;
+          }
+      `)
+    );
+  });
+});
diff --git a/modules/styling-transform/spec/utils/parseNodeToStaticValue.spec.ts b/modules/styling-transform/spec/utils/parseNodeToStaticValue.spec.ts
index af408d49bd..d78998fc61 100644
--- a/modules/styling-transform/spec/utils/parseNodeToStaticValue.spec.ts
+++ b/modules/styling-transform/spec/utils/parseNodeToStaticValue.spec.ts
@@ -95,8 +95,8 @@ describe('parseNodeToStaticValue', () => {
       parseNodeToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {
-            'foo-bar': '--css-foo-bar',
+          names: {
+            'foo.bar': '--css-foo-bar',
           },
         })
       )
@@ -147,8 +147,30 @@ describe('parseNodeToStaticValue', () => {
       parseNodeToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {
-            'foo-bar': '--css-foo-bar',
+          names: {
+            'foo.bar': '--css-foo-bar',
+          },
+        })
+      )
+    ).toEqual('--css-foo-bar');
+  });
+
+  it('should return the string value of a ComputedPropertyName around a TemplateStringLiteral of a variable', () => {
+    const program = createProgramFromSource(`
+      const temp = {
+        [\`\${foo.bar\}\`]: 'baz'
+      }
+    `);
+
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isComputedPropertyName)![0];
+
+    expect(
+      parseNodeToStaticValue(
+        node,
+        withDefaultContext(program.getTypeChecker(), {
+          names: {
+            'foo.bar': '--css-foo-bar',
           },
         })
       )
@@ -184,7 +206,7 @@ describe('parseNodeToStaticValue', () => {
       parseNodeToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {myAnimation: 'animation-abc123'},
+          names: {myAnimation: 'animation-abc123'},
         })
       )
     ).toEqual('animation-abc123 1s ease');
diff --git a/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts b/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
index 418d24660c..50157febcf 100644
--- a/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
+++ b/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
@@ -196,7 +196,7 @@ describe('parseObjectToStaticValue', () => {
       parseObjectToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {
+          names: {
             '--fallback': '12px',
           },
         })
@@ -220,7 +220,7 @@ describe('parseObjectToStaticValue', () => {
       parseObjectToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {
+          names: {
             '--fallback': '12px',
           },
         })
diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts
index 9f9cc4046a..376deba31a 100644
--- a/modules/styling/lib/cs.ts
+++ b/modules/styling/lib/cs.ts
@@ -93,9 +93,9 @@ export type CS = string | Record<string, string>;
  *
  * // optimizer rewrites the code
  * const myVars = createVars<'color', 'myVars'>('color')
- * // type is now `{color: "--myVars-color"}`
+ * // type is now `{color: "--color-myVars"}`
  *
- * myVars.color // type is `--myVars-color`
+ * myVars.color // type is `--color-myVars`
  * ```
  *
  * This is so optimized variables can be used directly by the static parser downstream. The variable
@@ -104,7 +104,7 @@ export type CS = string | Record<string, string>;
 export type CsVarsMap<T extends string, ID extends string | never> = [ID] extends [never]
   ? Record<T, string>
   : // map type. If the ID is known from the style optimizer, use static keys using string template literals instead of `string`
-    {[K in T]: `--${ID}-${MakeEmotionSafe<K>}`};
+    {[K in T]: `--${K}-${ID}`};
 
 export type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, ID> & {
   (input: Partial<Record<T, string>>): Record<T, string>;
@@ -117,7 +117,7 @@ export type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, I
  * const myVars = createVars('color')
  *
  * const myStyles = createStyles({
- *   color: cssVar(myVars.color) // color: 'var(--{hash}-color)'
+ *   color: cssVar(myVars.color) // color: 'var(--color-{hash})'
  * })
  * ```
  *
@@ -125,7 +125,7 @@ export type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, I
  * expect a CSS variable isn't defined.
  * ```ts
  * const myStyles = createStyles({
- *   color: cssVar(myVars.color, 'red') // color: 'var(--{hash}-color, red)'
+ *   color: cssVar(myVars.color, 'red') // color: 'var(--color-{hash}, red)'
  * })
  * ```
  *
@@ -139,18 +139,6 @@ export function cssVar(input: string, fallback?: string) {
     : `var(${input})`;
 }
 
-/**
- * Util function to fix an issue with Emotion by
- * appending `EmotionIssue#3066` to end of css variable
- * See issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)
- */
-const makeEmotionSafe = (key: string): string => {
-  if (key.endsWith('label')) {
-    return `${key}-emotion-safe`;
-  }
-  return key;
-};
-
 /**
  * Create temporary CSS variables to use in components. The CSS variable names will
  * be unique at runtime to avoid collisions. The return value is a function and a
@@ -162,14 +150,14 @@ const makeEmotionSafe = (key: string): string => {
  * const myVars = createVars('color', 'background')
  *
  * // 'color' is a typed property. The type is `string`
- * console.log(myVars.color) // `'var(--{hash}-color)'`
+ * console.log(myVars.color) // `'var(--color-{hash})'`
  *
  * // 'color' is a typed property. The type is `string?`
  * // The returned object can be assigned to the `style` property of an element
- * console.log(myVars({ color: 'red' })) //  `{'--{hash}-color': 'red'}`
+ * console.log(myVars({ color: 'red' })) //  `{'--color-{hash}': 'red'}`
  *
  * const div = document.createElement('div')
- * div.style = myVars({ color: 'red' }) // <div style="--{hash}-color: red;" />
+ * div.style = myVars({ color: 'red' }) // <div style="--color-{hash}: red;" />
  * ```
  */
 
@@ -206,16 +194,14 @@ export function createVars<T extends string | DefaultedVarsShape, ID extends str
 
   args.forEach(key => {
     // @ts-ignore
-    result[key] = `--${id}-${makeEmotionSafe(key)}`;
+    result[key] = `--${key}-${id}`;
   }, {});
 
   return result;
 }
 
-type MakeEmotionSafe<T extends string> = T extends `${infer S}label` ? `${S}label-emotion-safe` : T;
-
 // Type to create CSS Variable names based on JS names and ID
-type CSSVarName<ID extends string, Name> = `--${ID}-${MakeEmotionSafe<ToString<Name>>}`;
+type CSSVarName<ID extends string, Name> = `--${ToString<Name>}-${ID}`;
 
 /**
  * For custom themes that do not overwrite every default. This is the type given to stencil
@@ -244,9 +230,9 @@ type ToString<T> = string & T;
  * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}> = Record<'foo', Record<'bar', string>>
  *
  * // ID known
- * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: '--my-id-red' }
+ * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: '--red-my-id' }
  * // ID known, nested
- * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: { bar: '--my-id-red' }}
+ * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: { bar: '--red-my-id' }}
  * ```
  */
 export type DefaultedVarsMapToCSSVarNames<
@@ -259,7 +245,7 @@ export type DefaultedVarsMapToCSSVarNames<
   : // map type. If the ID is known from the style optimizer, use static keys using string template literals instead of `string`
     {
       [K in keyof V]: V[K] extends Record<string, string>
-        ? DefaultedVarsMapToCSSVarNames<V[K], `${ID}-${ToString<K>}`> // TypeScript doesn't know K is a string here and will throw an error, so we have to coerce it
+        ? {[K2 in keyof V[K]]: CSSVarName<`${ToString<K2>}-${ID}`, K>} //DefaultedVarsMapToCSSVarNames<V[K], `${ToString<K>}-${ID}`> // TypeScript doesn't know K is a string here and will throw an error, so we have to coerce it
         : CSSVarName<ID, K>;
     };
 
@@ -278,9 +264,9 @@ type ExtractValue<T, K> = K extends keyof T
  *
  * ```ts
  * // ID known
- * DefaultedVarsMap<{foo: 'red'}, 'my-id'> = { '--my-id-foo': 'red' }
+ * DefaultedVarsMap<{foo: 'red'}, 'my-id'> = { '--foo-my-id': 'red' }
  * // ID known, nested
- * DefaultedVarsMap<{foo: { bar: 'red' }}, 'my-id'> = { foo: { '--my-id-bar': 'red' }}
+ * DefaultedVarsMap<{foo: { bar: 'red' }}, 'my-id'> = { foo: { '--bar-my-id': 'red' }}
  * ```
  */
 export type DefaultedVarsMap<V extends DefaultedVarsShape, ID extends string> = {
@@ -359,7 +345,7 @@ export function createDefaultedVars<T extends DefaultedVarsShape, ID extends str
   // eslint-disable-next-line guard-for-in
   for (const key in input) {
     if (typeof input[key] === 'string') {
-      const cssVarName = `--${localId}-${makeEmotionSafe(key)}`;
+      const cssVarName = `--${key}-${localId}`;
       (result as any)[key] = cssVarName;
       (result as any).$$defaults[cssVarName] = input[key];
     }
@@ -367,7 +353,7 @@ export function createDefaultedVars<T extends DefaultedVarsShape, ID extends str
       (result as any)[key] = {};
       for (const subKey in input[key]) {
         if (typeof input[key][subKey] === 'string') {
-          const cssVarName = `--${localId}-${key}-${makeEmotionSafe(subKey)}`;
+          const cssVarName = `--${key}-${subKey}-${localId}`;
           (result as any)[key][subKey] = cssVarName;
           (result as any).$$defaults[cssVarName] = input[key][subKey];
         }
@@ -515,7 +501,7 @@ export type CsToPropsReturn = {className?: string; style?: CSSObjectWithVars};
  * - `string` - it represents a CSS class name
  * - `undefined` - there is no value. This is provided for convenience for developers to not have to
  *   filter out undefined
- * - `{--{hash}-{varName}: {value}}` - a `Map` of CSS variable to values
+ * - `{--{varName}-{hash}: {value}}` - a `Map` of CSS variable to values
  * - `{style: ..., className: ...}` an object already returned by another `csToProps` function call
  *   (for nesting)
  * - An array containing any of the above. This will recurse over each entry to produce a single,
@@ -899,8 +885,8 @@ export interface StencilConfig<
    *
    * ```css
    * .css-button {
-   *   --css-button-color: red;
-   *   color: var(--css-button-color);
+   *   --color-button: red;
+   *   color: var(--color-button);
    * }
    * ```
    */
@@ -1063,6 +1049,26 @@ function combineClassNames(input: (string | undefined)[]): string {
     .join(' ');
 }
 
+/**
+ * This function is used in conjunction with Stencils to get a selector to match the current element
+ * and a parent modifier. The selector will match a parent element with a modifier applied and the current
+ * element. It should be used on the `base` config of a Stencil.
+ *
+ * ```ts
+ * const childStencil = createStencil({
+ *   base: {
+ *     // base styles
+ *     [parentModifier(parentStencil.modifiers.size.large)]: {
+ *       // maybe adjust padding of this element
+ *     }
+ *   }
+ * })
+ * ```
+ */
+export function parentModifier(value: string) {
+  return `.${value.replace('css-', 'm')} :where(&)`;
+}
+
 /**
  * Creates a reuseable Stencil for styling elements. It takes vars, base styles, modifiers, and
  * compound modifiers.
@@ -1101,6 +1107,7 @@ export function createStencil<
             result[modifierKey] = createStyles(
               typeof modifier === 'function' ? modifier(_vars) : modifier
             );
+
             return result;
           }, {});
 
@@ -1141,14 +1148,29 @@ export function createStencil<
       )
     : () => '';
 
-  const stencil: Stencil<M, V, E, ID> = ((input: {}) => {
-    const inputModifiers = {...composes?.defaultModifiers, ...defaultModifiers, ...input};
+  const stencil: Stencil<M, V, E, ID> = ((input: Record<string, string>) => {
+    const inputModifiers = {...composes?.defaultModifiers, ...defaultModifiers};
+    // Only override defaults if a value is defined
+    for (const key in input) {
+      if (input[key]) {
+        // @ts-ignore
+        inputModifiers[key] = input[key];
+      }
+    }
     const composesReturn = composes?.(inputModifiers as any);
+    const modifierClasses = _modifiers(inputModifiers);
     return {
       className: combineClassNames([
         composesReturn?.className,
         _base,
-        _modifiers(inputModifiers),
+        modifierClasses,
+        // For compat mode, we need to add inert class names of modifiers where the `css-` prefix is
+        // removed. For example, `css-base css-mod-1` will become `css-base css-mod-1 mod-1`. The
+        // modifier class without the prefix will be ignored by the Emotion CSS `cx` function and
+        // will remain for the `parentModifier` function to still select on. We decided to add these
+        // inert class names instead of adding `data-m-*` attributes because the output DOM looks
+        // much cleaner and it saves bytes on the bundled output.
+        modifierClasses.replace(/css-/g, 'm'),
         compound ? _compound(inputModifiers) : '',
       ]),
       style: {...composesReturn?.style, ..._vars(input || {})},
diff --git a/modules/styling/package.json b/modules/styling/package.json
index 6f55f8a7a8..81921c3fe5 100644
--- a/modules/styling/package.json
+++ b/modules/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling",
-  "version": "10.3.38",
+  "version": "10.3.39",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,7 +53,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.0.2",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.38",
+    "@workday/canvas-kit-react": "^10.3.39",
     "@workday/canvas-tokens-web": "^1.3.1",
     "typescript": "4.2"
   }
diff --git a/modules/styling/spec/cs.spec.tsx b/modules/styling/spec/cs.spec.tsx
index 6d17594f19..c4b139863d 100644
--- a/modules/styling/spec/cs.spec.tsx
+++ b/modules/styling/spec/cs.spec.tsx
@@ -138,7 +138,7 @@ describe('cs', () => {
     it('should create an object with a key of the "color"', () => {
       const myVars = createVars('color');
 
-      expect(myVars).toHaveProperty('color', expect.stringMatching(/--.+-color/));
+      expect(myVars).toHaveProperty('color', expect.stringMatching(/--color-.+/));
     });
 
     it('should return a type object with keys matching each input', () => {
@@ -165,16 +165,9 @@ describe('cs', () => {
       expect(myVars({color: '--my-var'})).toHaveProperty(myVars.color, 'var(--my-var)');
     });
 
-    it('should make types Emotion safe when ID is known', () => {
-      const myVars = createVars({id: 'foo', args: ['label']});
-
-      type Input = (typeof myVars)['label'];
-      expectTypeOf<Input>().toMatchTypeOf<'--foo-label-emotion-safe'>();
-    });
-
     it('should type optimized style functions correctly so they can be consumed by other repositories', () => {
       const vars = createVars({id: 'foo', args: ['one']});
-      expectTypeOf(vars.one).toMatchTypeOf<'--foo-one'>();
+      expectTypeOf(vars.one).toMatchTypeOf<'--one-foo'>();
     });
 
     it('should handle an object configuration', () => {
@@ -205,9 +198,9 @@ describe('cs', () => {
         'foo'
       );
 
-      expect(myVars.color).toEqual('--foo-color');
+      expect(myVars.color).toEqual('--color-foo');
 
-      expectTypeOf(myVars.color).toEqualTypeOf<'--foo-color'>();
+      expectTypeOf(myVars.color).toEqualTypeOf<'--color-foo'>();
     });
 
     it('should pass the optional ID to each default', () => {
@@ -218,10 +211,10 @@ describe('cs', () => {
         'foo'
       );
 
-      expect(myVars.$$defaults).toHaveProperty('--foo-color', 'red');
+      expect(myVars.$$defaults).toHaveProperty('--color-foo', 'red');
 
       expectTypeOf(myVars.$$defaults).toEqualTypeOf<{
-        '--foo-color': 'red';
+        '--color-foo': 'red';
       }>();
     });
 
@@ -238,12 +231,12 @@ describe('cs', () => {
       expect(myVars).toHaveProperty('default');
       expect(myVars.default).toHaveProperty(
         'color',
-        expect.stringMatching(/--[a-z0-9]+-default-color/)
+        expect.stringMatching(/--default-color-[a-z0-9]+/)
       );
       expect(myVars).toHaveProperty('hover');
       expect(myVars.hover).toHaveProperty(
         'color',
-        expect.stringMatching(/--[a-z0-9]+-hover-color/)
+        expect.stringMatching(/--hover-color-[a-z0-9]+/)
       );
 
       expectTypeOf(myVars).toHaveProperty('default');
@@ -284,16 +277,16 @@ describe('cs', () => {
         },
         'foo'
       );
-
+      // BigO2023
       expect(myVars).toHaveProperty('default');
-      expect(myVars.default).toHaveProperty('color', expect.stringMatching('--foo-default-color'));
+      expect(myVars.default).toHaveProperty('color', expect.stringMatching('--default-color-foo'));
       expect(myVars).toHaveProperty('hover');
-      expect(myVars.hover).toHaveProperty('color', expect.stringMatching('--foo-hover-color'));
+      expect(myVars.hover).toHaveProperty('color', expect.stringMatching('--hover-color-foo'));
 
       expectTypeOf(myVars).toHaveProperty('default');
-      expectTypeOf(myVars.default).toEqualTypeOf<{color: '--foo-default-color'}>();
+      expectTypeOf(myVars.default).toEqualTypeOf<{color: '--default-color-foo'}>();
       expectTypeOf(myVars).toHaveProperty('hover');
-      expectTypeOf(myVars.hover).toEqualTypeOf<{color: '--foo-hover-color'}>();
+      expectTypeOf(myVars.hover).toEqualTypeOf<{color: '--hover-color-foo'}>();
     });
 
     it('should use the optional ID with nested variables in $$defaults', () => {
@@ -311,15 +304,15 @@ describe('cs', () => {
       );
 
       expect(myVars).toHaveProperty('$$defaults');
-      expect(myVars.$$defaults).toHaveProperty('--foo-default-color', 'blue');
-      expect(myVars.$$defaults).toHaveProperty('--foo-default-background', 'white');
-      expect(myVars.$$defaults).toHaveProperty('--foo-hover-color', 'red');
+      expect(myVars.$$defaults).toHaveProperty('--default-color-foo', 'blue');
+      expect(myVars.$$defaults).toHaveProperty('--default-background-foo', 'white');
+      expect(myVars.$$defaults).toHaveProperty('--hover-color-foo', 'red');
 
       expectTypeOf(myVars).toHaveProperty('$$defaults');
       expectTypeOf(myVars.$$defaults).toEqualTypeOf<{
-        '--foo-default-color': 'blue';
-        '--foo-default-background': 'white';
-        '--foo-hover-color': 'red';
+        '--default-color-foo': 'blue';
+        '--default-background-foo': 'white';
+        '--hover-color-foo': 'red';
       }>();
     });
   });
@@ -536,7 +529,9 @@ describe('cs', () => {
 
       expect(screen.getByTestId('test1')).toHaveStyle({padding: '10px'});
       expect(screen.getByTestId('test2')).toHaveStyle({padding: '20px'});
-      expect(myStencil({size: 'large'}).className.split(' ')).toHaveLength(2);
+
+      expect(myStencil({size: 'large'}).className).toContain(myStencil.base);
+      expect(myStencil({size: 'large'}).className).toContain(myStencil.modifiers.size.large);
 
       // type signature of stencil call expression
       type Arg = Parameters<typeof myStencil>[0];
@@ -584,11 +579,30 @@ describe('cs', () => {
         },
       });
 
-      expect(myStencil({position: 'start', size: 'large'}).className).toEqual(
+      expect(myStencil({position: 'start', size: 'large'}).className).toContain(
         `${myStencil.base} ${myStencil.modifiers.size.large} ${myStencil.modifiers.position.start}`
       );
     });
 
+    it('should add the hash of the modifier to the className to handle parentModifier selectors in compat mode', () => {
+      const myStencil = createStencil({
+        base: {},
+        modifiers: {
+          size: {
+            large: {},
+          },
+        },
+      });
+
+      const {className} = myStencil({size: 'large'});
+
+      expect(className).toEqual(
+        `${myStencil.base} ${
+          myStencil.modifiers.size.large
+        } ${myStencil.modifiers.size.large.replace('css-', 'm')}`
+      );
+    });
+
     it('should default modifiers if no modifier override is passed', () => {
       const myStencil = createStencil({
         base: {
@@ -660,7 +674,13 @@ describe('cs', () => {
       });
 
       // 4 class names - base, size, position, size-position
-      expect(myStencil({size: 'large', position: 'start'}).className.split(' ')).toHaveLength(4);
+      expect(myStencil({size: 'large', position: 'start'}).className.split(' ')).toHaveLength(6); // 4 + 2 modifier hashes
+      const {className} = myStencil({size: 'large', position: 'start'});
+
+      expect(className).toContain(myStencil.base);
+      expect(className).toContain(myStencil.modifiers.size.large);
+      expect(className).toContain(myStencil.modifiers.position.start);
+      // we don't have access to the compound modifier class name
     });
 
     it('should return access to variables for use in other components', () => {
@@ -675,7 +695,7 @@ describe('cs', () => {
       expectTypeOf(myStencil.vars).toHaveProperty('color');
       expectTypeOf(myStencil.vars.color).toEqualTypeOf<string>();
 
-      expect(myStencil).toHaveProperty('vars.color', expect.stringMatching(/--[a-z0-9]+-color/));
+      expect(myStencil).toHaveProperty('vars.color', expect.stringMatching(/--color-[a-z0-9]+/));
     });
 
     it('should coerce a variable input to a type of string', () => {
@@ -709,9 +729,9 @@ describe('cs', () => {
 
       expectTypeOf(myStencil).toHaveProperty('vars');
       expectTypeOf(myStencil.vars).toHaveProperty('color');
-      expectTypeOf(myStencil.vars.color).toEqualTypeOf<'--foo-color'>();
+      expectTypeOf(myStencil.vars.color).toEqualTypeOf<'--color-foo'>();
 
-      expect(myStencil).toHaveProperty('vars.color', expect.stringMatching(/--foo-color/));
+      expect(myStencil).toHaveProperty('vars.color', expect.stringMatching(/--color-foo/));
     });
 
     it('should return a function that takes in an object with the values and wrap passed css variables', () => {
@@ -803,9 +823,6 @@ describe('cs', () => {
               width: '0',
             },
           },
-          foo: {
-            true: {},
-          },
         },
       });
 
@@ -825,7 +842,7 @@ describe('cs', () => {
       expect(result2.style).toHaveProperty(myStencil.vars.width, 'zero');
 
       // match base and width modifier
-      expect(result2.className).toEqual(`${myStencil.base} ${myStencil.modifiers.width.zero}`);
+      expect(result2.className).toContain(`${myStencil.base} ${myStencil.modifiers.width.zero}`);
     });
 
     it('should convert "true" modifiers into boolean', () => {
@@ -966,7 +983,13 @@ describe('cs', () => {
 
         const {className} = extendedStencil({size: 'large'});
 
-        expect(className.split(' ')).toHaveProperty('length', 5);
+        expect(className.split(' ')).toHaveProperty('length', 6); // 1 base + 1 extended + 1 size modifier + 2 compound modifiers + 1 modifier hash
+
+        expect(className).toContain(baseStencil.base);
+        extendedStencil.base.split(' ').forEach(c => {
+          expect(className).toContain(c);
+        });
+        expect(className).toContain(baseStencil.modifiers.size.large);
 
         // calling the stencil
         type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
@@ -1031,13 +1054,13 @@ describe('cs', () => {
         expectTypeOf(extendedStencil.vars.color).toEqualTypeOf<string>();
         expect(extendedStencil).toHaveProperty(
           'vars.color',
-          expect.stringMatching(/--[0-9a-z]+-color/i)
+          expect.stringMatching(/--color-[0-9a-z]+/i)
         );
 
         expectTypeOf(extendedStencil.vars.background).toEqualTypeOf<string>();
         expect(extendedStencil).toHaveProperty(
           'vars.background',
-          expect.stringMatching(/--[0-9a-z]+-background/i)
+          expect.stringMatching(/--background-[0-9a-z]+/i)
         );
       });
 
@@ -1067,18 +1090,18 @@ describe('cs', () => {
           'extended'
         );
 
-        expectTypeOf(extendedStencil.vars.color).toEqualTypeOf<'--base-color'>();
-        expectTypeOf(extendedStencil.vars.background).toEqualTypeOf<'--extended-background'>();
-        expectTypeOf(extendedStencil.vars.$$defaults).toHaveProperty('--base-color');
-        expectTypeOf(extendedStencil.vars.$$defaults).toHaveProperty('--extended-background');
-        expectTypeOf(extendedStencil.vars.$$defaults['--base-color']).toMatchTypeOf<string>();
+        expectTypeOf(extendedStencil.vars.color).toEqualTypeOf<'--color-base'>();
+        expectTypeOf(extendedStencil.vars.background).toEqualTypeOf<'--background-extended'>();
+        expectTypeOf(extendedStencil.vars.$$defaults).toHaveProperty('--color-base');
+        expectTypeOf(extendedStencil.vars.$$defaults).toHaveProperty('--background-extended');
+        expectTypeOf(extendedStencil.vars.$$defaults['--color-base']).toMatchTypeOf<string>();
         expectTypeOf(
-          extendedStencil.vars.$$defaults['--extended-background']
+          extendedStencil.vars.$$defaults['--background-extended']
         ).toMatchTypeOf<string>();
 
-        expect(extendedStencil).toHaveProperty('vars.color', '--base-color');
+        expect(extendedStencil).toHaveProperty('vars.color', '--color-base');
 
-        expect(extendedStencil).toHaveProperty('vars.background', '--extended-background');
+        expect(extendedStencil).toHaveProperty('vars.background', '--background-extended');
       });
 
       it('should extend, adding class names in the correct order', () => {
@@ -1122,6 +1145,9 @@ describe('cs', () => {
                 large: {},
                 small: {},
               },
+              foo: {
+                bar: {},
+              },
             },
             compound: [
               {
@@ -1149,7 +1175,7 @@ describe('cs', () => {
         expect(className).toContain(baseStencil.modifiers.position.only);
 
         // baseStencil.base, baseStencil large, baseStencil only position, baseStencil compound, extendedStencil.base, extendedStencil large, extendedStencil compound
-        expect(className.split(' ')).toHaveLength(7);
+        expect(className.split(' ')).toHaveLength(10); // 7 + 3 modifier hashes
       });
     });
   });
diff --git a/modules/styling/stories/Basics.stories.mdx b/modules/styling/stories/Basics.stories.mdx
index 09bbcbf1eb..a95426169e 100644
--- a/modules/styling/stories/Basics.stories.mdx
+++ b/modules/styling/stories/Basics.stories.mdx
@@ -40,8 +40,8 @@ versatility.
 In this example, the HTML will look like:
 
 ```html
-<div class="css-4iptxs" style="--c6kna-background: gray;"></div>
-<div class="css-4iptxs" style="--c6kna-background: blue;"></div>
+<div class="css-4iptxs" style="--background-c6kna: gray;"></div>
+<div class="css-4iptxs" style="--background-c6kna: blue;"></div>
 ```
 
 And the CSS will look like:
@@ -50,7 +50,7 @@ And the CSS will look like:
 .css-4iptxs {
   width: 100px;
   height: 100px;
-  background-color: var(--c6kna-background);
+  background-color: var(--background-c6kna);
 }
 ```
 
@@ -95,11 +95,11 @@ const myStencil = createStencil({
     nonDefaultedColor: '', // will allow for uninitialization
   },
   base: ({defaultColor}) => {
-    color: defaultColor // `defaultColor` is '--abc123-defaultColor', not 'red'
+    color: defaultColor // `defaultColor` is '--defaultColor-abc123', not 'red'
   }
 })
 
-const elemProps = myStencil({color: 'blue'}) // {style: {'--abc123-defaultColor': 'blue'}}
+const elemProps = myStencil({color: 'blue'}) // {style: {'--defaultColor-abc123': 'blue'}}
 
 <div {...elemProps} />
 ```
@@ -109,11 +109,11 @@ This will produce the following HTML:
 ```html
 <style>
   .css-abc123 {
-    --abc123-defaultColor: red;
-    color: var(--abc123-defaultColor);
+    --defaultColor-abc123: red;
+    color: var(--defaultColor-abc123);
   }
 </style>
-<div class="css-123abc" style="--abc123-defaultColor: blue;"></div>
+<div class="css-123abc" style="--defaultColor-abc123: blue;"></div>
 ```
 
 The element will have a `color` property of `'blue'` because the element style is the highest
@@ -122,12 +122,12 @@ like the following:
 
 ```
 element.style {
-  --abc123-defaultColor: blue;
+  --defaultColor-abc123: blue;
 }
 
 .css-abc123 {
-  --abc123-defaultColor: red;
-  color: var(--abc123-defaultColor); // blue
+  --defaultColor-abc123: red;
+  color: var(--defaultColor-abc123); // blue
 }
 ```
 
@@ -304,9 +304,9 @@ const buttonStencil = createStencil({
   ],
 });
 
-<div {...myStencil()} />
-<div {...myStencil({size: 'small'})} />
-<div {...myStencil({size: 'small', iconPosition: 'end'})} />
+<div {...buttonStencil()} />
+<div {...buttonStencil({size: 'small'})} />
+<div {...buttonStencil({size: 'small', iconPosition: 'end'})} />
 ```
 
 The HTML will look something like this:
@@ -351,7 +351,7 @@ the modifier option or a string. The value will be sent as a variable regardless
 will only match if it is a valid modifer key.
 
 ```tsx
-const myStencil = createStencil({
+const buttonStencil = createStencil({
   vars: {
     width: '10px',
   },
@@ -371,11 +371,11 @@ const myStencil = createStencil({
 
 // `'zero'` is part of autocomplete
 myStencil({width: 'zero'});
-// returns {className: 'css-base css--width-zero', styles: { '--width': 'zero'}}
+// returns {className: 'css-button css-button--width-zero', styles: { '--button-width': 'zero'}}
 
 // width also accepts a string
 myStencil({width: '10px'});
-// returns {className: 'css-base', styles: { '--width': '10px'}}
+// returns {className: 'css-button', styles: { '--button-width': '10px'}}
 ```
 
 ### `keyframes`
diff --git a/modules/styling/stories/FromEmotion.stories.mdx b/modules/styling/stories/FromEmotion.stories.mdx
index 1e07a5004f..653d08564a 100644
--- a/modules/styling/stories/FromEmotion.stories.mdx
+++ b/modules/styling/stories/FromEmotion.stories.mdx
@@ -59,14 +59,14 @@ We can create modifers using `createStyles` and organize them in an object:
 const modifierStyles = {
   variant: {
     primary: createStyles({
-      background: `var(--button-background-color, blue)`,
+      background: `var(--background-color-button, blue)`,
       color: 'white',
     }),
     secondary: createStyles({
-      background: `var(--button-background-color, gray)`,
+      background: `var(--background-color-button, gray)`,
     }),
     danger: createStyles({
-      background: `var(--button-background-color, red)`,
+      background: `var(--background-color-button, red)`,
     }),
   },
   size: {
@@ -112,7 +112,7 @@ If you want to change the background color, you'll have to pass it using `style`
 ```jsx
 <button
   className={`${baseStyles} ${modifierStyles.size.large}`}
-  style={{'--background-button-color': 'orange'}}
+  style={{'--color-background-button': 'orange'}}
 >
   Orange Large
 </button>
@@ -121,7 +121,7 @@ If you want to change the background color, you'll have to pass it using `style`
 The output HTML will look like:
 
 ```html
-<button class="css-puxv12 css-puxv16" style="--background-button-color: orange;">
+<button class="css-puxv12 css-puxv16" style="--color-background-button: orange;">
   Orange Large
 </button>
 ```
@@ -166,13 +166,13 @@ myModifiers() // ''
 ```tsx
 const myVars = createVars('background', 'color')
 
-myVars.color // something like `--{hash}-color`
+myVars.color // something like `--color-{hash}`
 
 // the function knows what keys are allowed
-myVars({color: 'red'}) // {'--{hash}-color': 'red'}
+myVars({color: 'red'}) // {'--color-{hash}': 'red'}
 
 // in a component
-<div style={myVars({color: 'red'})} /> // <div style="--{hash}-color: red;">
+<div style={myVars({color: 'red'})} /> // <div style="--color-{hash}: red;">
 ```
 
 <ExampleCodeBlock code={StylingButton} />
diff --git a/utils/style-transform/spec/handleFocusRing.spec.ts b/utils/style-transform/spec/handleFocusRing.spec.ts
index 0ba46e303e..c8842d37b4 100644
--- a/utils/style-transform/spec/handleFocusRing.spec.ts
+++ b/utils/style-transform/spec/handleFocusRing.spec.ts
@@ -38,7 +38,7 @@ describe('handleFocusRing', () => {
     const result = handleFocusRing(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-boxShadowInner': '--foo-bar'},
+        names: {'myVars.boxShadowInner': '--foo-bar'},
       })
     );
 
@@ -70,7 +70,7 @@ describe('handleFocusRing', () => {
       program,
       'test.ts',
       withDefaultContext(program.getTypeChecker(), {
-        variables: {
+        names: {
           '--foo-bar': 'red',
         },
         objectTransforms: [handleFocusRing],