diff --git a/src/components/checkbox-group/checkbox-group.properties.scss b/src/components/checkbox-group/checkbox-group.properties.scss
index 8829b7d..7cbe183 100644
--- a/src/components/checkbox-group/checkbox-group.properties.scss
+++ b/src/components/checkbox-group/checkbox-group.properties.scss
@@ -1,48 +1,48 @@
 @import url("../theme/theme.properties.scss");
 
-@property --lui-checkbox-size {
+@property --lui-checkbox__size {
   syntax: "*";
   inherits: true;
   initial-value: 20px;
 };
 
-@property --lui-checkbox-font-size {
+@property --lui-checkbox__font-size {
   syntax: "*";
   inherits: true;
   initial-value: 0.875rem;
 };
 
-@property --lui-checkbox-background {
+@property --lui-checkbox__background {
   syntax: "*";
   inherits: true;
   initial-value: transparent;
 };
 
-@property --lui-checkbox-active-background {
+@property --lui-checkbox__background--active {
   syntax: "*";
   inherits: true;
   initial-value: #3e63dd;
 };
 
-@property --lui-checkbox-indicator-color {
+@property --lui-checkbox__indicator-color {
   syntax: "<color>";
   inherits: true;
   initial-value: white;
 };
 
-@property --lui-checkbox-indicator-size {
+@property --lui-checkbox__indicator-size {
   syntax: "*";
   inherits: true;
   initial-value: 20px;
 };
 
-@property --lui-checkbox-border-radius {
+@property --lui-checkbox__border-radius {
   syntax: "*";
   inherits: true;
   initial-value: 4px;
 };
 
-@property --lui-cg-overflow-trigger-color {
+@property --lui-cg__overflow-trigger-color {
   syntax: "<color>";
   inherits: true;
   initial-value: #3e63dd;
diff --git a/src/components/checkbox-group/checkbox-group.scss b/src/components/checkbox-group/checkbox-group.scss
index ee70cf4..35542a7 100644
--- a/src/components/checkbox-group/checkbox-group.scss
+++ b/src/components/checkbox-group/checkbox-group.scss
@@ -11,26 +11,27 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    font-size: var(--lui-checkbox-font-size);
+    font-size: var(--lui-checkbox__font-size);
     cursor: pointer;
   }
 
   .lui-cg-item-checkbox {
-    background: var(--lui-checkbox-background);
-    width: var(--lui-checkbox-size);
-    height: var(--lui-checkbox-size);
-    border-radius: var(--lui-checkbox-border-radius);
+    background: var(--lui-checkbox__background);
+    width: var(--lui-checkbox__size);
+    height: var(--lui-checkbox__size);
+    border-radius: var(--lui-checkbox__border-radius);
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #bdcee3;
     position: relative;
     cursor: pointer;
+    padding: 0;
   }
 
   .lui-cg-item-checkbox:where([data-state=checked]) {
-    background: var(--lui-checkbox-active-background);
-    border: 1px solid var(--lui-checkbox-active-background);
+    background: var(--lui-checkbox__background--active);
+    border: 1px solid var(--lui-checkbox__background--active);
   }
 
   .lui-cg-item-checkbox:where(:not([data-state=checked])):hover {
@@ -39,12 +40,12 @@
 
   .lui-cg-item-checkbox-indicator {
     position: absolute;
-    width: var(--lui-checkbox-indicator-size);
-    height: var(--lui-checkbox-indicator-size);
+    width: var(--lui-checkbox__indicator-size);
+    height: var(--lui-checkbox__indicator-size);
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
-    color: var(--lui-checkbox-indicator-color);
+    color: var(--lui-checkbox__indicator-color);
   }
 
   .lui-cg-overflow-container {
@@ -69,10 +70,10 @@
 
   .lui-cg-overflow-trigger {
     background: transparent;
-    color: var(--lui-cg-overflow-trigger-color);
+    color: var(--lui-cg__overflow-trigger-color);
     border: 0;
     padding: 0;
-    font-size: var(--lui-checkbox-font-size);;
+    font-size: var(--lui-checkbox__font-size);;
     font-weight: 600;
     cursor: pointer;
   }
diff --git a/src/components/checkbox-group/checkbox-group.stories.tsx b/src/components/checkbox-group/checkbox-group.stories.tsx
index 1d947e3..b2673d8 100644
--- a/src/components/checkbox-group/checkbox-group.stories.tsx
+++ b/src/components/checkbox-group/checkbox-group.stories.tsx
@@ -103,8 +103,8 @@ export const Themes: Story = {
         <div style={{display: 'flex', gap: '2rem'}}>
           <Theme style={{
             width: '200px',
-            '--lui-checkbox-active-background': 'rebeccapurple',
-            '--lui-cg-overflow-trigger-color': 'rebeccapurple',
+            '--lui-checkbox__background--active': 'rebeccapurple',
+            '--lui-cg__overflow-trigger-color': 'rebeccapurple',
           } as CSSProperties}>
             <CheckboxGroup.Root {...args} value={value} onChange={setValue}>
               <CheckboxGroup.Item value="red">Red</CheckboxGroup.Item>
@@ -121,8 +121,8 @@ export const Themes: Story = {
           </Theme>
           <Theme style={{
             width: '200px',
-            '--lui-checkbox-active-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
-            '--lui-cg-overflow-trigger-color': 'rebeccapurple',
+            '--lui-checkbox__background--active': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
+            '--lui-cg__overflow-trigger-color': 'rebeccapurple',
           } as CSSProperties}>
             <CheckboxGroup.Root {...args} value={value} onChange={setValue}>
               <CheckboxGroup.Item value="red">Red</CheckboxGroup.Item>
diff --git a/src/components/pagination/pagination.properties.scss b/src/components/pagination/pagination.properties.scss
index 55090d4..1fc848c 100644
--- a/src/components/pagination/pagination.properties.scss
+++ b/src/components/pagination/pagination.properties.scss
@@ -16,13 +16,13 @@
   initial-value: transparent;
 };
 
-@property --lui-pagination__item--active-background {
+@property --lui-pagination__item-background--active {
   syntax: "*";
   inherits: true;
   initial-value: #3e63dd;
 };
 
-@property --lui-pagination__item--hover-background {
+@property --lui-pagination__item-background--hover {
   syntax: "*";
   inherits: true;
   initial-value: #f7f9fc;
@@ -34,7 +34,7 @@
   initial-value: black;
 };
 
-@property --lui-pagination__item--active-color {
+@property --lui-pagination__item-color--active {
   syntax: "<color>";
   inherits: true;
   initial-value: #fff;
diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
index 9a427dc..2b46792 100644
--- a/src/components/pagination/pagination.scss
+++ b/src/components/pagination/pagination.scss
@@ -24,7 +24,7 @@
 
     .lui-pagination__summary {
       font-size: 0.875rem;
-      color: var(--lui-text--subtl-color);
+      color: var(--lui-base__subtl-color);
     }
 
     .lui-pagination__navigation__button {
@@ -51,17 +51,17 @@
     }
 
     .lui-pagination__navigation__button:not(:disabled):hover {
-      background: var(--lui-pagination__item--hover-background);
+      background: var(--lui-pagination__item-background--hover);
     }
 
     .lui-pagination__navigation__item:not(:disabled):hover {
-      background: var(--lui-pagination__item--hover-background);
+      background: var(--lui-pagination__item-background--hover);
     }
 
     .lui-pagination__navigation__item--selected,
     .lui-pagination__navigation__item--selected:hover {
-      background: var(--lui-pagination__item--active-background);
-      color: var(--lui-pagination__item--active-color);
+      background: var(--lui-pagination__item-background--active);
+      color: var(--lui-pagination__item-color--active);
       cursor: not-allowed;
     }
   }
@@ -92,15 +92,15 @@
       background: var(--lui-pagination__item-background);
       font-size: 0.875rem;
       &:hover {
-        background: var(--lui-pagination__item--hover-background);
+        background: var(--lui-pagination__item-background--hover);
       }
     }
 
     .lui-pagination__select-menu-item--selected {
-      background: var(--lui-pagination__item--active-background);
-      color: var(--lui-pagination__item--active-color);
+      background: var(--lui-pagination__item-background--active);
+      color: var(--lui-pagination__item-color--active);
       &:hover {
-        background-color: var(--lui-pagination__item--active-background);
+        background-color: var(--lui-pagination__item-background--active);
       }
     }
   }
diff --git a/src/components/pagination/pagination.stories.tsx b/src/components/pagination/pagination.stories.tsx
index e8d82f2..f3bd2d2 100644
--- a/src/components/pagination/pagination.stories.tsx
+++ b/src/components/pagination/pagination.stories.tsx
@@ -250,7 +250,7 @@ export const Themes: Story = {
       <div style={{display: 'flex', gap: '2rem', flexDirection: 'column'}}>
         <Theme
           style={{
-            '--lui-pagination__item--active-background': 'rebeccapurple',
+            '--lui-pagination__item-background--active': 'rebeccapurple',
           } as CSSProperties}
         >
           <Pagination.Root
@@ -272,8 +272,8 @@ export const Themes: Story = {
 
         <Theme
           style={{
-            '--lui-base-font-family': 'Comic Sans MS, Textile, Cursive',
-            '--lui-pagination__item--active-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
+            '--lui-base__font-family': 'Comic Sans MS, Textile, Cursive',
+            '--lui-pagination__item-background--active': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
           } as CSSProperties}
         >
           <Pagination.Root
diff --git a/src/components/product-card/product-card.properties.scss b/src/components/product-card/product-card.properties.scss
index 42433ca..3e7ac21 100644
--- a/src/components/product-card/product-card.properties.scss
+++ b/src/components/product-card/product-card.properties.scss
@@ -1,90 +1,90 @@
 @import url("../theme/theme.properties.scss");
 
-@property --lui-pc-color {
+@property --lui-pc__color {
   syntax: "<color>";
   inherits: true;
   initial-value: inherit;
 };
 
-@property --lui-pc-bg {
+@property --lui-pc__background {
   syntax: "*";
   inherits: true;
   initial-value: inherit;
 };
 
-@property --lui-pc-container-padding {
+@property --lui-pc__container-padding {
   syntax: "*";
   inherits: true;
   initial-value: 0.5rem;
 };
 
-@property --lui-pc-border-radius {
+@property --lui-pc__border-radius {
   syntax: "*";
   inherits: true;
   initial-value: 6px;
 };
 
-@property --lui-pc-title-font-size {
+@property --lui-pc__title-font-size {
   syntax: "*";
   inherits: true;
   initial-value: 0.875rem;
 };
 
-@property --lui-pc-btn-bg {
+@property --lui-pc__btn-background {
   syntax: "*";
   inherits: true;
   initial-value: gold;
 };
 
-@property --lui-pc-btn-border-color {
+@property --lui-pc__btn-border-color {
   syntax: "<color>";
   inherits: true;
   initial-value: gold;
 };
 
-@property --lui-pc-btn-color {
+@property --lui-pc__btn-color {
   syntax: "<color>";
   inherits: true;
   initial-value: black;
 };
 
-@property --lui-pc-badge-color {
+@property --lui-pc__badge-color {
   syntax: "<color>";
   inherits: true;
   initial-value: #00462a;
 };
 
-@property --lui-pc-badge-bg {
+@property --lui-pc__badge-background {
   syntax: "*";
   inherits: true;
   initial-value: #e6f3ed;
 };
 
-@property --lui-pc-box-shadow {
+@property --lui-pc__box-shadow {
   syntax: "*";
   inherits: true;
   initial-value: none;
 };
 
-@property --lui-pc-favorite-btn-size {
+@property --lui-pc__favorite-btn-size {
   syntax: "*";
   inherits: true;
   initial-value: 1.5rem;
 };
 
-@property --lui-pc-favorite-btn-position-offset {
+@property --lui-pc__favorite-btn-position-offset {
   syntax: "*";
   inherits: true;
   initial-value: 0.75rem;
 };
 
-@property --lui-pc-favorite-btn-color {
+@property --lui-pc__favorite-btn-color {
   syntax: "<color>";
   inherits: true;
   initial-value: white;
 };
 
-@property --lui-pc-favorite-btn-color--active {
+@property --lui-pc__favorite-btn-color--active {
   syntax: "<color>";
   inherits: true;
   initial-value: crimson;
diff --git a/src/components/product-card/product-card.scss b/src/components/product-card/product-card.scss
index 1e2649e..152fd8d 100644
--- a/src/components/product-card/product-card.scss
+++ b/src/components/product-card/product-card.scss
@@ -1,16 +1,16 @@
 @import url("./product-card.properties.scss");
 
 .lui-styled {
-  --lui-pc-box-shadow: var(--lui-base-shadow-1);
+  --lui-pc__box-shadow: var(--lui-base__shadow-1);
 
   .lui-product-card {
     display: flex;
     flex-direction: column;
-    background: var(--lui-pc-bg);
-    color: var(--lui-pc-color);
+    background: var(--lui-pc__background);
+    color: var(--lui-pc__color);
     gap: 0.5rem;
-    box-shadow: var(--lui-pc-box-shadow);
-    border-radius: var(--lui-pc-border-radius);
+    box-shadow: var(--lui-pc__box-shadow);
+    border-radius: var(--lui-pc__border-radius);
   }
 
   .lui-product-card-header {
@@ -20,7 +20,7 @@
   .lui-product-card-image {
     width: 100%;
     display: block;
-    border-radius: var(--lui-pc-border-radius) var(--lui-pc-border-radius) 0 0;
+    border-radius: var(--lui-pc__border-radius) var(--lui-pc__border-radius) 0 0;
   }
 
   .lui-product-card-btn--favorite {
@@ -31,26 +31,26 @@
     line-height: 1;
     border-radius: 100%;
     stroke: black;
-    inset-block-start: var(--lui-pc-favorite-btn-position-offset);
-    inline-size: var(--lui-pc-favorite-btn-size);
+    inset-block-start: var(--lui-pc__favorite-btn-position-offset);
+    inline-size: var(--lui-pc__favorite-btn-size);
     cursor: pointer;
-    left: calc(100% - var(--lui-pc-favorite-btn-size) - var(--lui-pc-favorite-btn-position-offset));
-    right: calc(100% - var(--lui-pc-favorite-btn-size) - var(--lui-pc-favorite-btn-position-offset));
+    left: calc(100% - var(--lui-pc__favorite-btn-size) - var(--lui-pc__favorite-btn-position-offset));
+    right: calc(100% - var(--lui-pc__favorite-btn-size) - var(--lui-pc__favorite-btn-position-offset));
 
     svg {
-      color: var(--lui-pc-favorite-btn-color);
-      width: var(--lui-pc-favorite-btn-size);
-      height: var(--lui-pc-favorite-btn-size);
+      color: var(--lui-pc__favorite-btn-color);
+      width: var(--lui-pc__favorite-btn-size);
+      height: var(--lui-pc__favorite-btn-size);
     }
 
     &[data-state=on] svg {
-      stroke: var(--lui-pc-favorite-btn-color--active);
-      color: var(--lui-pc-favorite-btn-color--active);
+      stroke: var(--lui-pc__favorite-btn-color--active);
+      color: var(--lui-pc__favorite-btn-color--active);
     }
   }
 
   .lui-product-card-main {
-    padding: 0 var(--lui-pc-container-padding);
+    padding: 0 var(--lui-pc__container-padding);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -59,7 +59,7 @@
   }
 
   .lui-product-card-title {
-    font-size: var(--lui-pc-title-font-size);
+    font-size: var(--lui-pc__title-font-size);
     font-weight: bold;
   }
 
@@ -88,10 +88,10 @@
     font-size: 0.9rem;
     font-weight: 600;
     gap: 0.2rem;
-    border-radius: var(--lui-pc-border-radius);
-    border: 1px solid var(--lui-pc-btn-border-color);
-    background: var(--lui-pc-btn-bg);
-    color: var(--lui-pc-btn-color);
+    border-radius: var(--lui-pc__border-radius);
+    border: 1px solid var(--lui-pc__btn-border-color);
+    background: var(--lui-pc__btn-background);
+    color: var(--lui-pc__btn-color);
     cursor: pointer;
   }
 
@@ -101,7 +101,7 @@
   }
 
   .lui-product-card-footer {
-    padding: var(--lui-pc-container-padding);
+    padding: var(--lui-pc__container-padding);
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -116,8 +116,8 @@
     white-space: nowrap;
     border-radius: 3px;
     line-height: 1;
-    background-color: var(--lui-pc-badge-bg);
-    color: var(--lui-pc-badge-color);
+    background-color: var(--lui-pc__badge-background);
+    color: var(--lui-pc__badge-color);
   }
 
   .lui-product-card-price, .lui-product-card-price-range {
diff --git a/src/components/product-card/product-card.stories.tsx b/src/components/product-card/product-card.stories.tsx
index 439ae2e..af24ff4 100644
--- a/src/components/product-card/product-card.stories.tsx
+++ b/src/components/product-card/product-card.stories.tsx
@@ -369,13 +369,13 @@ export const Themes: Story = {
         <Theme
           style={{
             width: '300px',
-              '--lui-pc-color': 'white',
-              '--lui-pc-bg': 'black',
-              '--lui-pc-btn-bg': 'rebeccapurple',
-              '--lui-pc-btn-border-color': 'rebeccapurple',
-              '--lui-pc-btn-color': 'white',
-              '--lui-pc-badge-bg': '#CBC6E9',
-              '--lui-pc-badge-color': 'rebeccapurple',
+              '--lui-pc__color': 'white',
+              '--lui-pc__background': 'black',
+              '--lui-pc__btn-background': 'rebeccapurple',
+              '--lui-pc__btn-border-color': 'rebeccapurple',
+              '--lui-pc__btn-color': 'white',
+              '--lui-pc__badge-background': '#CBC6E9',
+              '--lui-pc__badge-color': 'rebeccapurple',
               '--lui-swatch-btn-border-color-hover': '#666',
               '--lui-swatch-btn-border-color-active': '#999',
           } as CSSProperties}
@@ -407,14 +407,14 @@ export const Themes: Story = {
         <Theme
           style={{
             width: '300px',
-            '--lui-base-font-family': 'Comic Sans MS, Textile, Cursive',
-            '--lui-pc-box-shadow': 'none',
-            '--lui-pc-border-radius': 0,
-            '--lui-pc-container-padding': 0,
-            '--lui-pc-btn-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-            '--lui-pc-btn-border-color': 'white',
-            '--lui-pc-badge-bg': '#fff3e2',
-            '--lui-pc-badge-color': '#cc4e00',
+            '--lui-base__font-family': 'Comic Sans MS, Textile, Cursive',
+            '--lui-pc__box-shadow': 'none',
+            '--lui-pc__border-radius': 0,
+            '--lui-pc__container-padding': 0,
+            '--lui-pc__btn-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+            '--lui-pc__btn-border-color': 'white',
+            '--lui-pc__badge-background': '#fff3e2',
+            '--lui-pc__badge-color': '#cc4e00',
           } as CSSProperties}
         >
           <ProductCard.Root {...args}>
diff --git a/src/components/range/range.properties.scss b/src/components/range/range.properties.scss
index 7f71e67..8984401 100644
--- a/src/components/range/range.properties.scss
+++ b/src/components/range/range.properties.scss
@@ -1,84 +1,84 @@
 @import url("../theme/theme.properties.scss");
 
-@property --lui-range-slider-range-bg {
+@property --lui-range__slider-range-background {
   syntax: "*";
   inherits: true;
   initial-value: gold;
 };
 
-@property --lui-range-slider-control-bg {
+@property --lui-range__slider-control-background {
   syntax: "*";
   inherits: true;
   initial-value: gold;
 };
 
-@property --lui-range-border-radius {
+@property --lui-range__border-radius {
   syntax: "*";
   inherits: true;
   initial-value: 6px;
 };
 
-@property --lui-range-sections-spacing {
+@property --lui-range__sections-spacing {
   syntax: "*";
   inherits: true;
   initial-value: 1rem;
 };
 
-@property --lui-range-slider-size {
+@property --lui-range__slider-size {
   syntax: "*";
   inherits: true;
   initial-value: 0.5rem;
 };
 
-@property --lui-range-slider-track-color {
+@property --lui-range__slider-track-color {
   syntax: "*";
   inherits: true;
   initial-value: #e1e8f5;
 };
 
-@property --lui-range-slider-control-size {
+@property --lui-range__slider-control-size {
   syntax: "*";
   inherits: true;
   initial-value: 1.25rem;
 };
 
-@property --lui-range-slider-control-border-radius {
+@property --lui-range__slider-control-border-radius {
   syntax: "*";
   inherits: true;
   initial-value: 50%;
 };
 
-@property --lui-range-slider-control-border-color {
+@property --lui-range__slider-control-border-color {
   syntax: "*";
   inherits: true;
   initial-value: #f7f9fc;
 };
 
-@property --lui-range-slider-control-box-shadow {
+@property --lui-range__slider-control-box-shadow {
   syntax: "*";
   inherits: true;
   initial-value: 0 0 1px 0 #0028400a, 0 2px 2px 0 #00284008, 0 4px 2px 0 #00284005, 0 7px 3px 0 #00284003, 0 11px 3px 0 #00284000;
 };
 
-@property --lui-range-input-border-color {
+@property --lui-range__input-border-color {
   syntax: "*";
   inherits: true;
   initial-value: #bdcee3;
 };
 
-@property --lui-range-btn-bg {
+@property --lui-range__btn-background {
   syntax: "*";
   inherits: true;
   initial-value: gold;
 };
 
-@property --lui-range-btn-border-color {
+@property --lui-range__btn-border-color {
   syntax: "<color>";
   inherits: true;
   initial-value: gold;
 };
 
-@property --lui-range-btn-color {
+@property --lui-range__btn-color {
   syntax: "<color>";
   inherits: true;
   initial-value: black;
diff --git a/src/components/range/range.scss b/src/components/range/range.scss
index 520c342..12719ab 100644
--- a/src/components/range/range.scss
+++ b/src/components/range/range.scss
@@ -5,12 +5,12 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: var(--lui-range-sections-spacing);
+    gap: var(--lui-range__sections-spacing);
   }
 
   .lui-range-slider-root {
     width: 100%;
-    height: var(--lui-range-slider-size);
+    height: var(--lui-range__slider-size);
     display: flex;
     align-items: center;
     position: relative;
@@ -19,25 +19,25 @@
   .lui-range-slider-track {
     width: 100%;
     height: 100%;
-    background-color: var(--lui-range-slider-track-color);
-    border-radius: var(--lui-range-border-radius);
+    background-color: var(--lui-range__slider-track-color);
+    border-radius: var(--lui-range__border-radius);
   }
 
   .lui-range-slider-range {
     position: absolute;
     display: block;
-    background: var(--lui-range-slider-range-bg);
+    background: var(--lui-range__slider-range-background);
     height: 100%;
   }
 
   .lui-range-slider-control {
-    width: var(--lui-range-slider-control-size);
-    height: var(--lui-range-slider-control-size);
-    background: var(--lui-range-slider-control-bg);
-    border: 1px solid var(--lui-range-slider-control-border-color);;
-    border-radius: var(--lui-range-slider-control-border-radius);
+    width: var(--lui-range__slider-control-size);
+    height: var(--lui-range__slider-control-size);
+    background: var(--lui-range__slider-control-background);
+    border: 1px solid var(--lui-range__slider-control-border-color);;
+    border-radius: var(--lui-range__slider-control-border-radius);
     display: block;
-    box-shadow: var(--lui-range-slider-control-box-shadow);
+    box-shadow: var(--lui-range__slider-control-box-shadow);
   }
 
   .lui-range-inputs {
@@ -51,8 +51,8 @@
   .lui-range-input {
     text-align: center;
     padding: 0.5rem;
-    border: 1px solid var(--lui-range-input-border-color);
-    border-radius: var(--lui-range-border-radius);
+    border: 1px solid var(--lui-range__input-border-color);
+    border-radius: var(--lui-range__border-radius);
     width: 100%;
   }
 
@@ -69,10 +69,10 @@
     font-size: 0.9rem;
     font-weight: 600;
     gap: 0.2rem;
-    border-radius: var(--lui-range-border-radius);
-    border: 1px solid var(--lui-range-btn-border-color);
-    background: var(--lui-range-btn-bg);
-    color: var(--lui-range-btn-color);
+    border-radius: var(--lui-range__border-radius);
+    border: 1px solid var(--lui-range__btn-border-color);
+    background: var(--lui-range__btn-background);
+    color: var(--lui-range__btn-color);
     cursor: pointer;
     width: 100%;
   }
diff --git a/src/components/range/range.stories.tsx b/src/components/range/range.stories.tsx
index 7ecd5a6..4ef04b3 100644
--- a/src/components/range/range.stories.tsx
+++ b/src/components/range/range.stories.tsx
@@ -132,11 +132,11 @@ export const Themes: Story = {
       <div style={{display: 'flex', gap: '2rem'}}>
       <Theme style={{
         width: '300px',
-        '--lui-range-slider-range-bg': 'rebeccapurple',
-        '--lui-range-slider-control-bg': 'rebeccapurple',
-        '--lui-range-btn-bg': 'rebeccapurple',
-        '--lui-range-btn-color': 'white',
-        '--lui-range-btn-border-color': 'rebeccapurple',
+        '--lui-range__slider-range-background': 'rebeccapurple',
+        '--lui-range__slider-control-background': 'rebeccapurple',
+        '--lui-range__btn-background': 'rebeccapurple',
+        '--lui-range__btn-color': 'white',
+        '--lui-range__btn-border-color': 'rebeccapurple',
       } as CSSProperties}>
         <Range.Root {...args} onChange={(newValue) => updateArgs({value: newValue})}>
           <Range.Slider />
@@ -150,11 +150,11 @@ export const Themes: Story = {
       </Theme>
       <Theme style={{
         width: '300px',
-        '--lui-base-font-family': 'Comic Sans MS, Textile, Cursive',
-        '--lui-range-slider-range-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-        '--lui-range-slider-control-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-        '--lui-range-btn-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-        '--lui-range-btn-border-color': 'white',
+        '--lui-base__font-family': 'Comic Sans MS, Textile, Cursive',
+        '--lui-range__slider-range-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+        '--lui-range__slider-control-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+        '--lui-range__btn-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+        '--lui-range__btn-border-color': 'white',
       } as CSSProperties}>
         <Range.Root {...args} onChange={(newValue) => updateArgs({value: newValue})}>
           <Range.Slider />
diff --git a/src/components/tag/tag.properties.scss b/src/components/tag/tag.properties.scss
index bb4470e..0e4caa0 100644
--- a/src/components/tag/tag.properties.scss
+++ b/src/components/tag/tag.properties.scss
@@ -1,24 +1,24 @@
 @import url("../theme/theme.properties.scss");
 
-@property --lui-tag-bg {
+@property --lui-tag__bg {
   syntax: "*";
   inherits: true;
   initial-value: gold;
 };
 
-@property --lui-tag-color {
+@property --lui-tag__color {
   syntax: "<color>";
   inherits: true;
   initial-value: black;
 };
 
-@property --lui-tag-icon-size {
+@property --lui-tag__icon-size {
   syntax: "*";
   inherits: true;
   initial-value: 12px;
 };
 
-@property --lui-tag-border-radius {
+@property --lui-tag__border-radius {
   syntax: "*";
   inherits: true;
   initial-value: 4px;
diff --git a/src/components/tag/tag.scss b/src/components/tag/tag.scss
index d5f5840..27a8a83 100644
--- a/src/components/tag/tag.scss
+++ b/src/components/tag/tag.scss
@@ -4,11 +4,12 @@
   .lui-tag {
     display: flex;
     overflow: hidden;
-    border-radius: var(--lui-tag-border-radius);
+    border-radius: var(--lui-tag__border-radius);
     font-size: 0.875rem;
-    color: var(--lui-tag-color);
-    background: var(--lui-tag-bg);
+    color: var(--lui-tag__color);
+    background: var(--lui-tag__bg);
     border: 0.05rem solid rgba(0,0,0,0.1);
+    line-height: 1;
   }
 
   .lui-tag__content {
@@ -36,7 +37,7 @@
   }
 
   .lui-tag__dismiss-btn-icon {
-    width: var(--lui-tag-icon-size);
-    color: var(--lui-tag-color);
+    width: var(--lui-tag__icon-size);
+    color: var(--lui-tag__color);
   }
 }
diff --git a/src/components/tag/tag.stories.tsx b/src/components/tag/tag.stories.tsx
index 9e9228f..9ea4290 100644
--- a/src/components/tag/tag.stories.tsx
+++ b/src/components/tag/tag.stories.tsx
@@ -82,8 +82,8 @@ export const Themes: Story = {
     return (
       <div style={{display: 'flex', gap: '2rem'}}>
         <Theme style={{
-          '--lui-tag-bg': 'rebeccapurple',
-          '--lui-tag-color': 'white',
+          '--lui-tag__bg': 'rebeccapurple',
+          '--lui-tag__color': 'white',
         } as CSSProperties}>
           <Tag
             {...args}
@@ -93,9 +93,9 @@ export const Themes: Story = {
           </Tag>
         </Theme>
         <Theme style={{
-          '--lui-base-font-family': 'Comic Sans MS, Textile, Cursive',
-          '--lui-tag-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-          '--lui-tag-color': 'black',
+          '--lui-base__font-family': 'Comic Sans MS, Textile, Cursive',
+          '--lui-tag__bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+          '--lui-tag__color': 'black',
         } as CSSProperties}>
           <Tag
             {...args}
diff --git a/src/components/theme/theme.properties.scss b/src/components/theme/theme.properties.scss
index 531fe95..a73b471 100644
--- a/src/components/theme/theme.properties.scss
+++ b/src/components/theme/theme.properties.scss
@@ -1,28 +1,28 @@
-@property --lui-base-font-family {
+@property --lui-base__font-family {
   syntax: "*";
   inherits: true;
   initial-value: Inter, Arial, Helvetica, sans-serif;
 };
 
-@property --lui-base-box-sizing {
+@property --lui-base__box-sizing {
   syntax: "*";
   inherits: true;
   initial-value: border-box;
 }
 
-@property --lui-base-shadow-1 {
+@property --lui-base__shadow-1 {
   syntax: "*";
   inherits: true;
   initial-value: 0 4px 9px 0 #00284014, 0 17px 17px 0 #00284012, 0 38px 23px 0 #0028400a, 0 68px 27px 0 #00284003, 0 107px 30px 0 #00284000;
 };
 
-@property --lui-base-border-radius {
+@property --lui-base__border-radius {
   syntax: '<length>';
   inherits: true;
   initial-value: 4px;
 }
 
-@property --lui-text--subtl-color {
+@property --lui-base__subtl-color {
   syntax: '<color>';
   inherits: true;
   initial-value: #5e739c;
diff --git a/src/components/theme/theme.scss b/src/components/theme/theme.scss
index b4b61fd..5d4e3ad 100644
--- a/src/components/theme/theme.scss
+++ b/src/components/theme/theme.scss
@@ -1,14 +1,14 @@
 @import url("./theme.properties.scss");
 
 .lui-styled {
-    font-family: var(--lui-base-font-family);
+    font-family: var(--lui-base__font-family);
     -webkit-font-smoothing: antialiased;
 
     input, textarea, button {
-      font-family: var(--lui-base-font-family);
+      font-family: var(--lui-base__font-family);
     }
 
     *,:after,:before {
-        box-sizing: var(--lui-base-box-sizing);
+        box-sizing: var(--lui-base__box-sizing);
     }
 }
diff --git a/src/components/theme/theme.stories.tsx b/src/components/theme/theme.stories.tsx
index c1fd796..95ace9c 100644
--- a/src/components/theme/theme.stories.tsx
+++ b/src/components/theme/theme.stories.tsx
@@ -76,30 +76,31 @@ const product = {
 const themes = {
   'default': {},
   'purple 🦄': {
-    '--lui-checkbox-active-background': 'rebeccapurple',
-    '--lui-cg-overflow-trigger-color': 'rebeccapurple',
-    '--lui-pc-btn-bg': 'rebeccapurple',
-    '--lui-pc-btn-border-color': 'rebeccapurple',
-    '--lui-pc-btn-color': 'white',
-    '--lui-range-slider-range-bg': 'rebeccapurple',
-    '--lui-range-slider-control-bg': 'rebeccapurple',
-    '--lui-range-btn-bg': 'rebeccapurple',
-    '--lui-range-btn-color': 'white',
-    '--lui-range-btn-border-color': 'rebeccapurple',
-    '--lui-tag-bg': 'rebeccapurple',
-    '--lui-tag-color': 'white',
-    '--lui-pagination__item--active-background': 'rebeccapurple',
+    '--lui-checkbox__background--active': 'rebeccapurple',
+    '--lui-cg__overflow-trigger-color': 'rebeccapurple',
+    '--lui-pc__btn-background': 'rebeccapurple',
+    '--lui-pc__btn-border-color': 'rebeccapurple',
+    '--lui-pc__btn-color': 'white',
+    '--lui-range__slider-range-background': 'rebeccapurple',
+    '--lui-range__slider-control-background': 'rebeccapurple',
+    '--lui-range__btn-background': 'rebeccapurple',
+    '--lui-range__btn-color': 'white',
+    '--lui-range__btn-border-color': 'rebeccapurple',
+    '--lui-tag__bg': 'rebeccapurple',
+    '--lui-tag__color': 'white',
+    '--lui-pagination__item-background--active': 'rebeccapurple',
   },
   'rainbow 🌈': {
-    '--lui-base-font-family': 'Comic Sans MS, Textile, Cursive',
-    '--lui-checkbox-active-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
-    '--lui-pc-btn-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-    '--lui-range-slider-range-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-    '--lui-range-slider-control-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-    '--lui-range-btn-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-    '--lui-range-btn-border-color': 'white',
-    '--lui-tag-bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
-    '--lui-pagination__item--active-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
+    '--lui-base__font-family': 'Comic Sans MS, Textile, Cursive',
+    '--lui-checkbox__background--active': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    '--lui-pc__btn-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    '--lui-range__slider-range-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    '--lui-range__slider-control-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    '--lui-range__btn-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    '--lui-range__btn-border-color': 'white',
+    '--lui-tag__bg': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    '--lui-pagination__item-background--active': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    '--lui-pagination__item-color--active': 'black',
   }
 };
 
@@ -131,13 +132,14 @@ export const Basic: Story = {
     return (
       <div>
         <Theme style={{margin: '0 0 1rem 0', display: 'flex', flexDirection: 'column', gap: '1rem'}}>
-          <div style={{fontSize: '0.875rem', padding: '1rem', border: '1px solid #eee', borderRadius: '6px', background: '#f7f9fc'}}>
-            <div style={{margin: '0 1rem', fontWeight: 600}}>
-              Accessibility and internationalization supported out of the box
+          <div style={{fontSize: '1.1rem', padding: '1rem'}}>
+            <div style={{margin: '0 1rem 0.5rem'}}>
+              <span style={{background: 'gold', padding: '0.25rem', borderRadius: '6px', fontWeight: 600}}>Accessibility</span> {' '}
+              and <span style={{background: 'gold', padding: '0.25rem', borderRadius: '6px', fontWeight: 600}}>internationalization (i18n)</span> supported out of the box
             </div>
             <div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', width: '100%', padding: '0 1rem 1rem', fontSize: '0.875rem'}}>
               <div>
-                <div style={{ margin: '0.5rem 0'}}><b>dir=</b> {args.dir}</div>
+                <div style={{ margin: '0.5rem 0'}}><b>dir</b></div>
                 <SwatchBar.Root>
                   <SwatchBar.SwatchGroup value={args.dir} onValueChange={(newDir) => updateArgs({dir: newDir})}>
                     {dirs.map(d => <SwatchBar.SwatchText key={d} value={d}>{d}</SwatchBar.SwatchText>)}
@@ -146,7 +148,7 @@ export const Basic: Story = {
               </div>
 
               <div>
-                <div style={{margin: '0.5rem 0'}}><b>currency=</b> {args.currency}</div>
+                <div style={{margin: '0.5rem 0'}}><b>currency</b> {args.currency}</div>
                 <SwatchBar.Root>
                   <SwatchBar.SwatchGroup value={args.currency} onValueChange={(newCurrency) => updateArgs({currency: newCurrency})}>
                     {currencies.map(cur => <SwatchBar.SwatchText key={cur} value={cur}>{cur}</SwatchBar.SwatchText>)}
@@ -155,7 +157,7 @@ export const Basic: Story = {
               </div>
 
               <div>
-                <div style={{margin: '0.5rem 0'}}><b>locale=</b> {args.locale}</div>
+                <div style={{margin: '0.5rem 0'}}><b>locale</b></div>
                 <SwatchBar.Root>
                   <SwatchBar.SwatchGroup value={args.locale} onValueChange={(newLocale) => updateArgs({locale: newLocale})}>
                     {locales.map(locale => <SwatchBar.SwatchText key={locale} value={locale}>{locale}</SwatchBar.SwatchText>)}
@@ -163,31 +165,32 @@ export const Basic: Story = {
                 </SwatchBar.Root>
               </div>
             </div>
-            <div style={{margin: '0 1rem', fontWeight: 600}}>
-              With an optional theme that can be customized with CSS variables
-            </div>
-            <div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', width: '100%', padding: '0 1rem 1rem', fontSize: '0.875rem'}}>
-              <div>
-                <div style={{margin: '0.5rem 0'}}><b>Styles=</b> {args.disableStyles ? 'off' : 'on'}</div>
-                <SwatchBar.Root>
+            <div style={{margin: '0 1rem 1rem'}}>
+              <span style={{background: 'gold', padding: '0.25rem', borderRadius: '6px', fontWeight: 600, display: 'inline-block'}}>
+                Optional theme
+                <SwatchBar.Root style={{display: 'inline-block', marginLeft: '0.5rem', '--lui-swatch-btn-bg-color': 'white', borderRadius: '6px'}  as CSSProperties}>
                   <SwatchBar.SwatchGroup value={args.disableStyles ? 'true' : 'false'} onValueChange={(newDisableStyles) => updateArgs({disableStyles: newDisableStyles === 'true'})}>
-                    <SwatchBar.SwatchText value={'false'} style={{display: args.disableStyles ? 'block' : 'none'}}>Turn on</SwatchBar.SwatchText>
-                    <SwatchBar.SwatchText value={'true'} style={{display: args.disableStyles ? 'none' : 'block'}}>Turn off</SwatchBar.SwatchText>
+                    <SwatchBar.SwatchText value={'false'}>On</SwatchBar.SwatchText>
+                    <SwatchBar.SwatchText value={'true'}>Off</SwatchBar.SwatchText>
                   </SwatchBar.SwatchGroup>
                 </SwatchBar.Root>
-              </div>
+              </span>
+              {' '}
+              that can be customized with CSS variables
+              {' '}
+              <SwatchBar.Root style={{display: 'inline-block', marginLeft: '0.5rem'}}>
+                <SwatchBar.SwatchGroup value={showcaseTheme} onValueChange={setShowcaseTheme}>
+                  {Object.keys(themes).map(theme => <SwatchBar.SwatchText key={theme} value={theme}>{theme}</SwatchBar.SwatchText>)}
+                </SwatchBar.SwatchGroup>
+              </SwatchBar.Root>
+            </div>
 
-              <div>
-                <div style={{margin: '0.5rem 0'}}><b>theme=</b> {showcaseTheme}</div>
-                <SwatchBar.Root>
-                  <SwatchBar.SwatchGroup value={showcaseTheme} onValueChange={setShowcaseTheme}>
-                    {Object.keys(themes).map(theme => <SwatchBar.SwatchText key={theme} value={theme}>{theme}</SwatchBar.SwatchText>)}
-                  </SwatchBar.SwatchGroup>
-                </SwatchBar.Root>
-              </div>
+            <div style={{margin: '0 1rem', lineHeight: '1.5'}}>
+              <span style={{background: 'gold', padding: '0.25rem', borderRadius: '6px', fontWeight: 600}}>Composable architecture</span>, mixin with your own components or just use the hooks and BYOC (bring your own components).
             </div>
-            <div style={{margin: '0 1rem', fontWeight: 600}}>
-              Composable, mixin with your own components and styles or just use the hooks and BYOC (bring your own components)
+            <div style={{margin: '0 1rem', lineHeight: '1.5', fontSize: '0.9rem'}}>
+              Try it out on our <a href="https://github.com/bloomreach/web-code-samples" target="_blank" rel="noreferrer">web code samples</a>{' '}
+              (Eg., <a href="https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/facets" target="_blank" rel="noreferrer">Facets</a>, <a href="https://stackblitz.com/github/bloomreach/web-code-samples/tree/main/examples/pixel" target="_blank" rel="noreferrer">Storefront with pixel instrumentation</a>)
             </div>
           </div>
         </Theme>
@@ -359,8 +362,8 @@ export const Basic: Story = {
                     maxWidth: '300px',
                     display: 'flex',
                     padding: '0.5rem',
-                    '--lui-pc-badge-bg': '#CBC6E9',
-                    '--lui-pc-badge-color': 'rebeccapurple'
+                    '--lui-pc__badge-background': '#CBC6E9',
+                    '--lui-pc__badge-color': 'rebeccapurple'
                     } as CSSProperties}>
                     <ProductCard.Root style={{width: '100%'}}>
                       <ProductCard.Header>