@c8y/style 1024.15.13 → 1024.15.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1024.15.13",
+  "version": "1024.15.16",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/utilities/_borders.scss

@@ -7,6 +7,9 @@
  *
  * Intentionally hardcoded values:
  * - 1px border widths: Standard border width, not spacing
+ * - 0 border radius: Reset, not a size on the token scale
+ * - 50% and 9999px border radius: Shape ratios for circles and pills, which have to
+ *   hold at any element size, so they cannot come from the fixed $size-* scale
  */
 
 .border-all {
@@ -129,9 +132,38 @@
 }
 
 
-// Removed unused border-radius utilities - verified 0 usages:
-// .b-r-8, .b-r-24, .b-r-32, .b-r-40
+// border radius
+//
+// `.b-r-4` was never defined, in the SCSS layer or the LESS one before it, yet two ai-chat templates
+// carried the class from a scale that only existed on paper. Defining it here would have given those
+// two surfaces a radius they never had, so the dead class was removed from them in the same change.
+// `.b-r-2` stays undefined: nothing uses it and nothing documents it.
 
+.b-r-0 {
+  border-radius: 0 !important;
+}
+.b-r-4 {
+  border-radius: $size-4 !important;
+}
+.b-r-8 {
+  border-radius: $size-8 !important;
+}
 .b-r-16 {
   border-radius: $size-16 !important;
 }
+.b-r-24 {
+  border-radius: $size-24 !important;
+}
+.b-r-32 {
+  border-radius: $size-32 !important;
+}
+.b-r-40 {
+  border-radius: $size-40 !important;
+}
+
+.b-r-circle {
+  border-radius: 50% !important;
+}
+.b-r-pill {
+  border-radius: 9999px !important;
+}

package/styles/utilities/_contextual-colors.scss

@@ -31,46 +31,74 @@
 .text-primary {
   @include text-emphasis.text-emphasis-variant(var(--c8y-root-component-brand-primary,$brand-primary));
 }
-// Removed unused: .text-primary-light, .text-primary-dark
+.text-primary-light {
+  @include text-emphasis.text-emphasis-variant($brand-primary-light);
+}
+.text-primary-dark {
+  @include text-emphasis.text-emphasis-variant($brand-primary-dark);
+}
 
 // Accent text colors
 .text-accent {
   @include text-emphasis.text-emphasis-variant($brand-accent);
 }
-// Removed unused: .text-accent-light, .text-accent-dark
-// Note: .text-accent was NOT in cat5-text-utils.txt (step 225), only light/dark were.
-// Checking cat5-text-utils.txt again...
-// It lists: .text-accent-dark, .text-accent-light. NOT .text-accent.
+.text-accent-light {
+  @include text-emphasis.text-emphasis-variant($brand-accent-light);
+}
+.text-accent-dark {
+  @include text-emphasis.text-emphasis-variant($brand-accent-dark);
+}
 
 // Success text colors
 .text-success {
   @include text-emphasis.text-emphasis-variant($status-success);
 }
-// Removed unused: .text-success-light, .text-success-dark
+.text-success-light {
+  @include text-emphasis.text-emphasis-variant($status-success-light);
+}
+.text-success-dark {
+  @include text-emphasis.text-emphasis-variant($status-success-dark);
+}
 
 // Info text colors
 .text-info {
   @include text-emphasis.text-emphasis-variant($status-info);
 }
-// Removed unused: .text-info-light, .text-info-dark
+.text-info-light {
+  @include text-emphasis.text-emphasis-variant($status-info-light);
+}
+.text-info-dark {
+  @include text-emphasis.text-emphasis-variant($status-info-dark);
+}
 
 // Warning text colors
 .text-warning {
   @include text-emphasis.text-emphasis-variant($status-warning);
 }
-// Removed unused: .text-warning-light, .text-warning-high, .text-warning-dark
+.text-warning-light {
+  @include text-emphasis.text-emphasis-variant($status-warning-light);
+}
+// Dropped on purpose, not restored: .text-warning-high
+.text-warning-dark {
+  @include text-emphasis.text-emphasis-variant($status-warning-dark);
+}
 
 // Danger text colors
 .text-danger {
   @include text-emphasis.text-emphasis-variant($status-danger);
 }
-// Removed unused: .text-danger-light, .text-danger-dark
-
-// Gray text colors
-// Removed unused gray text colors - verified 0 usages:
-// .text-gray-10...100
+.text-danger-light {
+  @include text-emphasis.text-emphasis-variant($status-danger-light);
+}
+.text-danger-dark {
+  @include text-emphasis.text-emphasis-variant($status-danger-dark);
+}
 
 // backwards compatibility
+//
+// Dropped on purpose and deliberately not restored: .text-gray-medium, .text-gray-medium-dark,
+// .text-gray-light, .text-gray-white. A few legacy templates still carry these class names; that is
+// harmless, since the class simply does not match anything.
 
 .text-gray-darker {
   @include text-emphasis.text-emphasis-variant($brand-primary-dark);
@@ -80,20 +108,14 @@
   @include text-emphasis.text-emphasis-variant($gray-30);
 }
 
-// Removed unused: .text-gray-medium-dark, .text-gray-medium
-
 .text-gray {
   @include text-emphasis.text-emphasis-variant($gray-50);
 }
 
-// Removed unused: .text-gray-light
-
 .text-gray-lighter {
   @include text-emphasis.text-emphasis-variant($gray-90);
 }
 
-// Removed unused: .text-gray-white
-
 //================================
 // Contextual backgrounds
 //================================
@@ -105,13 +127,29 @@
   @include background-variant.bg-variant($brand-primary-light);
 }
 
-// Removed unused: .bg-complementary
+.bg-complementary {
+  @include background-variant.bg-variant($brand-complementary);
+}
 
-// Removed unused: .bg-accent, .bg-accent-dark, .bg-accent-light
-// cat6-bg-utils.txt list: .bg-accent, .bg-accent-dark, .bg-accent-light.
+.bg-accent {
+  @include background-variant.bg-variant($brand-accent);
+}
+.bg-accent-light {
+  @include background-variant.bg-variant($brand-accent-light);
+}
+.bg-accent-dark {
+  @include background-variant.bg-variant($brand-accent-dark);
+}
 
-// Removed unused: .bg-success, .bg-success-dark, .bg-success-light
-// cat6-bg-utils.txt list: .bg-success, .bg-success-dark, .bg-success-light.
+.bg-success {
+  @include background-variant.bg-variant($status-success);
+}
+.bg-success-light {
+  @include background-variant.bg-variant($status-success-light);
+}
+.bg-success-dark {
+  @include background-variant.bg-variant($status-success-dark);
+}
 
 .bg-info {
   @include background-variant.bg-variant($status-info);
@@ -119,16 +157,30 @@
 .bg-info-light {
   @include background-variant.bg-variant($status-info-light);
 }
-// Removed unused: .bg-info-dark (cat6 lists .bg-info-dark, but not .bg-info or .bg-info-light)
+.bg-info-dark {
+  @include background-variant.bg-variant($status-info-dark);
+}
 
 .bg-warning {
   @include background-variant.bg-variant($status-warning);
 }
-// Removed unused: .bg-warning-light, .bg-warning-lightest, .bg-warning-dark (cat6 lists these)
-// cat6 does NOT list .bg-warning.
+.bg-warning-light {
+  @include background-variant.bg-variant($status-warning-light);
+}
+.bg-warning-dark {
+  @include background-variant.bg-variant($status-warning-dark);
+}
+// Dropped on purpose, not restored: .bg-warning-lightest, .bg-transparent
 
-// Removed unused: .bg-danger, .bg-danger-light, .bg-danger-dark
-// cat6 lists .bg-danger, .bg-danger-light, .bg-danger-dark.
+.bg-danger {
+  @include background-variant.bg-variant($status-danger);
+}
+.bg-danger-light {
+  @include background-variant.bg-variant($status-danger-light);
+}
+.bg-danger-dark {
+  @include background-variant.bg-variant($status-danger-dark);
+}
 
 .bg-checkered {
   background-image:
@@ -142,7 +194,13 @@
 
 // Levels
 
-// Removed unused: bg-level-4, bg-level-3
+.bg-level-4 {
+   @include background-variant.bg-variant(var(--c8y-level-4));
+}
+
+.bg-level-3 {
+   @include background-variant.bg-variant(var(--c8y-level-3));
+}
 
 .bg-level-2 {
    @include background-variant.bg-variant(var(--c8y-level-2));
@@ -156,10 +214,16 @@
    @include background-variant.bg-variant(var(--c8y-level-0));
 }
 
-// Removed unused: .bg-transparent
-
 // Grays
-// Removed unused: .bg-gray-10...100
+// Numbered gray text/background utilities, driven by the gray palette tokens.
+@each $step in (10, 20, 30, 40, 50, 60, 70, 80, 90, 100) {
+  .text-gray-#{$step} {
+    @include text-emphasis.text-emphasis-variant(var(--c8y-palette-gray-#{$step}));
+  }
+  .bg-gray-#{$step} {
+    @include background-variant.bg-variant(var(--c8y-palette-gray-#{$step}));
+  }
+}
 
 .bg-inherit {
   @include background-variant.bg-variant(inherit);

package/styles/utilities/_position.scss

@@ -7,7 +7,7 @@
  *
  * Intentionally hardcoded values:
  * - 0 values: Zero position offsets, not spacing
- * - Position keywords: relative, absolute, static, sticky
+ * - Position keywords: relative, absolute, static, sticky, fixed
  */
 
 .p-relative {
@@ -22,6 +22,9 @@
 .p-sticky {
   position: sticky !important;
 }
+.p-fixed {
+  position: fixed !important;
+}
 
 .top-0 {
   top: 0 !important;
@@ -29,9 +32,12 @@
 .left-0 {
   left: 0 !important;
 }
-
-// Removed unused positioning utilities - verified 0 usages:
-// .right-0, .bottom-0
+.right-0 {
+  right: 0 !important;
+}
+.bottom-0 {
+  bottom: 0 !important;
+}
 
 // media queries
 @media (max-width: $screen-xs-max) {
@@ -47,6 +53,9 @@
   .p-sticky-xs {
     position: sticky !important;
   }
+  .p-fixed-xs {
+    position: fixed !important;
+  }
   .top-0-xs {
     top: 0 !important;
   }
@@ -74,6 +83,9 @@
   .p-sticky-sm {
     position: sticky !important;
   }
+  .p-fixed-sm {
+    position: fixed !important;
+  }
   .top-0-sm {
     top: 0 !important;
   }
@@ -101,6 +113,9 @@
   .p-sticky-md {
     position: sticky !important;
   }
+  .p-fixed-md {
+    position: fixed !important;
+  }
   .top-0-md {
     top: 0 !important;
   }
@@ -128,6 +143,9 @@
   .p-sticky-lg {
     position: sticky !important;
   }
+  .p-fixed-lg {
+    position: fixed !important;
+  }
   .top-0-lg {
     top: 0 !important;
   }

package/styles/utilities/_sizing.scss

@@ -73,6 +73,8 @@
   height: 100% !important;
 }
 
+// Superseded by .fit-h-md, which follows the .class-{breakpoint} convention used by
+// every other responsive utility. Kept so existing markup keeps working.
 .fit-h--md{
   @media (min-width: $screen-md-min){
     height: 100% !important;
@@ -83,6 +85,31 @@
   height: 20px !important;
 }
 
+//media queries
+@media (max-width: $screen-xs-max) {
+  .fit-h-xs {
+    height: 100% !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .fit-h-sm {
+    height: 100% !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .fit-h-md {
+    height: 100% !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .fit-h-lg {
+    height: 100% !important;
+  }
+}
+
 // Sticky header
 .sticky-header-top-0 {
   position: sticky !important;