@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.36 → 0.2.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rakeyshgidwani/roger-ui-bank-theme-stan-design",
-  "version": "0.2.36",
+  "version": "0.2.38",
   "description": "Roger UI stan-design theme - Complete design system with components, styles, and utilities",
   "keywords": [
     "design-system",

package/src/styles/components/base/badge.css

@@ -89,6 +89,8 @@
 }
 
 /* Base Badge Component - Using Original Poker Project Styling */
+@layer components {
+
 .badge {
   /* Layout */
   display: inline-flex;
@@ -426,3 +428,5 @@
     grid-template-columns: 1fr 1fr !important;
   }
 }
+
+} /* End @layer components */

package/src/styles/components/base/button.css

@@ -179,6 +179,8 @@
 }
 
 /* Base Button Component */
+@layer components {
+
 .button {
   /* Layout */
   display: inline-flex;
@@ -772,3 +774,5 @@
     transition: none;
   }
 }
+
+} /* End @layer components */

package/src/styles/components/base/card.css

@@ -133,6 +133,8 @@
 }
 
 /* Base Card Component */
+@layer components {
+
 .card {
   /* Base Styles */
   background-color: var(--card-background);
@@ -599,3 +601,5 @@
   box-shadow: var(--card-shadow-base);
   transform: none;
 }
+
+} /* End @layer components */

package/src/styles/components/base/checkbox.css

@@ -37,6 +37,8 @@
 }
 
 /* Checkbox Base Styles */
+@layer components {
+
 .checkbox {
   position: relative;
   display: inline-flex;
@@ -440,3 +442,5 @@
   background-color: var(--cs-colors-semantic-info);
   color: var(--cs-colors-text-on-primary);
 }
+
+} /* End @layer components */

package/src/styles/components/base/input.css

@@ -164,6 +164,8 @@
 }
 
 /* Input Base Styles */
+@layer components {
+
 .input {
   position: relative;
   display: block;
@@ -885,3 +887,5 @@
     border-width: var(--input-border-width-normal);
   }
 }
+
+} /* End @layer components */

package/src/styles/components/base/label.css

@@ -56,6 +56,8 @@
 }
 
 /* Base Label Styles */
+@layer components {
+
 .label {
   display: inline-block;
   font-family: var(--cs-fonts-primary-family), var(--cs-fonts-primary-fallbacks);
@@ -294,3 +296,5 @@
     background: var(--cs-print-background-color);
   }
 }
+
+} /* End @layer components */

package/src/styles/layers/index.css

@@ -12,40 +12,18 @@
 
 @layer reset, base, themes, components, utilities, overrides;
 
-/* Reset layer - CSS reset and normalization */
-@layer reset {
-  @import '../base/reset.css';
-}
-
-/* Base layer - foundational styles */
-@layer base {
-  @import '../base/typography.css';
-  @import '../base/variables.css';
-}
-
-/* Themes layer - theme-specific variables and styles */
-@layer themes {
-  @import '../themes/index.css';
-}
-
-/* Components layer - all UI component styles */
-@layer components {
-  @import '../components/base/index.css';
-  @import '../components/navigation/index.css';
-  @import '../components/data-display/index.css';
-  @import '../components/feedback/index.css';
-  @import '../components/overlay/index.css';
-}
-
-/* Utilities layer - utility classes and system styles */
-@layer utilities {
-  @import '../utilities/index.css';
-}
-
-/* Overrides layer - highest priority application-specific overrides */
-@layer overrides {
-  @import './overrides.css';
-}
+/* Modern CSS layers syntax - imports with layer assignment */
+@import '../base/reset.css' layer(reset);
+@import '../base/typography.css' layer(base);
+@import '../base/variables.css' layer(base);
+@import '../themes/index.css' layer(themes);
+@import '../components/base/index.css' layer(components);
+@import '../components/navigation/index.css' layer(components);
+@import '../components/data-display/index.css' layer(components);
+@import '../components/feedback/index.css' layer(components);
+@import '../components/overlay/index.css' layer(components);
+@import '../utilities/index.css' layer(utilities);
+@import './overrides.css' layer(overrides);
 
 /* Development validation tools (only in development) */
 /* @import './validation.css'; */