@c8y/style 1023.17.19 → 1023.22.2

package/styles/utilities/_contextual-colors.scss

@@ -0,0 +1,170 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/background-variant";
+@use "../mixins/text-emphasis";
+
+/**
+ * Contextual Color Utilities
+ *
+ * Note: Uses design tokens for all colors ($brand-*, $status-*, $gray-*, var(--c8y-*)).
+ *
+ * Intentionally hardcoded values:
+ * - 25px, 12.5px (checkered background): Specific dimensions for visual pattern effect
+ */
+
+//================================
+// Contextual colors
+//================================
+
+// Generic text colors
+.text-default {
+ @include text-emphasis.text-emphasis-variant($component-color-default);
+}
+.text-white {
+  @include text-emphasis.text-emphasis-variant($component-background-default);
+}
+.text-muted {
+  @include text-emphasis.text-emphasis-variant($text-muted);
+}
+
+// Brand text colors
+.text-primary {
+  @include text-emphasis.text-emphasis-variant(var(--c8y-root-component-brand-primary,$brand-primary));
+}
+// Removed unused: .text-primary-light, .text-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.
+
+// Success text colors
+.text-success {
+  @include text-emphasis.text-emphasis-variant($status-success);
+}
+// Removed unused: .text-success-light, .text-success-dark
+
+// Info text colors
+.text-info {
+  @include text-emphasis.text-emphasis-variant($status-info);
+}
+// Removed unused: .text-info-light, .text-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
+
+// 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
+
+// backwards compatibility
+
+.text-gray-darker {
+  @include text-emphasis.text-emphasis-variant($brand-primary-dark);
+}
+
+.text-gray-dark {
+  @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
+//================================
+.bg-primary {
+  @include background-variant.bg-variant($brand-primary);
+}
+
+.bg-primary-light {
+  @include background-variant.bg-variant($brand-primary-light);
+}
+
+// Removed unused: .bg-complementary
+
+// Removed unused: .bg-accent, .bg-accent-dark, .bg-accent-light
+// cat6-bg-utils.txt list: .bg-accent, .bg-accent-dark, .bg-accent-light.
+
+// Removed unused: .bg-success, .bg-success-dark, .bg-success-light
+// cat6-bg-utils.txt list: .bg-success, .bg-success-dark, .bg-success-light.
+
+.bg-info {
+  @include background-variant.bg-variant($status-info);
+}
+.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-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.
+
+// Removed unused: .bg-danger, .bg-danger-light, .bg-danger-dark
+// cat6 lists .bg-danger, .bg-danger-light, .bg-danger-dark.
+
+.bg-checkered {
+  background-image:
+    linear-gradient(45deg, var(--c8y-level-2) 25%, transparent 25%),
+    linear-gradient(135deg, var(--c8y-level-2) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--c8y-level-2) 75%),
+    linear-gradient(135deg, transparent 75%, var(--c8y-level-2) 75%);
+  background-size: 25px 25px;
+  background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0 12.5px;
+}
+
+// Levels
+
+// Removed unused: bg-level-4, bg-level-3
+
+.bg-level-2 {
+   @include background-variant.bg-variant(var(--c8y-level-2));
+}
+
+.bg-level-1 {
+   @include background-variant.bg-variant(var(--c8y-level-1));
+}
+
+.bg-level-0 {
+   @include background-variant.bg-variant(var(--c8y-level-0));
+}
+
+// Removed unused: .bg-transparent
+
+// Grays
+// Removed unused: .bg-gray-10...100
+
+.bg-inherit {
+  @include background-variant.bg-variant(inherit);
+}
+
+.bg-component {
+  background-color: $component-background-default;
+}

package/styles/utilities/_display.scss

@@ -0,0 +1,439 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/hide-text";
+@use "../mixins/responsive-visibility";
+
+/**
+ * Display Utility Classes
+ *
+ * Note: Uses $screen-* tokens for responsive breakpoints.
+ *
+ * Intentionally hardcoded values:
+ * - None - uses CSS display keywords only (flex, block, grid, etc.)
+ */
+
+.d-contents {
+  display: contents !important;
+  background: inherit;
+}
+.d-flex {
+  display: flex !important;
+}
+.d-col {
+  display: flex !important;
+  flex-direction: column !important;
+}
+.d-col-reverse {
+  display: flex !important;
+  flex-direction: column-reverse !important;
+}
+.d-block {
+  display: block !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-inline {
+  display: inline !important;
+}
+.d-inline-flex {
+  display: inline-flex !important;
+}
+.d-grid {
+  display: grid !important;
+}
+.d-inherit {
+  display: inherit !important;
+}
+// media queries
+/* #region */
+@media (max-width: $screen-xs-max) {
+  .d-contents-xs {
+    display: contents !important;
+    background: inherit;
+  }
+  .d-flex-xs {
+    display: flex !important;
+  }
+  .d-col-xs {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+  .d-col-reverse-xs {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+  }
+  .d-block-xs {
+    display: block !important;
+  }
+  .d-inline-block-xs {
+    display: inline-block !important;
+  }
+  .d-inline-xs {
+    display: inline !important;
+  }
+  .d-inline-flex-xs {
+    display: inline-flex !important;
+  }
+  .d-grid-xs {
+    display: grid !important;
+  }
+  .d-inherit-xs {
+    display: inherit !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .d-contents-sm {
+    display: contents !important;
+    background: inherit;
+  }
+  .d-flex-sm {
+    display: flex !important;
+  }
+  .d-col-sm {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+  .d-col-reverse-sm {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+  }
+  .d-block-sm {
+    display: block !important;
+  }
+  .d-inline-block-sm {
+    display: inline-block !important;
+  }
+  .d-inline-sm {
+    display: inline !important;
+  }
+  .d-inline-flex-sm {
+    display: inline-flex !important;
+  }
+  .d-grid-sm {
+    display: grid !important;
+  }
+  .d-inherit-sm {
+    display: inherit !important;
+  }
+}
+@media (min-width: $screen-md-min) {
+  .d-contents-md {
+    display: contents !important;
+    background: inherit;
+  }
+  .d-flex-md {
+    display: flex !important;
+  }
+  .d-col-md {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+  .d-col-reverse-md {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+  }
+  .d-block-md {
+    display: block !important;
+  }
+  .d-inline-block-md {
+    display: inline-block !important;
+  }
+  .d-inline-md {
+    display: inline !important;
+  }
+  .d-inline-flex-md {
+    display: inline-flex !important;
+  }
+  .d-grid-md {
+    display: grid !important;
+  }
+  .d-inherit-md {
+    display: inherit !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .d-contents-lg {
+    display: contents !important;
+    background: inherit;
+  }
+  .d-flex-lg {
+    display: flex !important;
+  }
+  .d-col-lg {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+  .d-col-reverse-lg {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+  }
+  .d-block-lg {
+    display: block !important;
+  }
+  .d-inline-block-lg {
+    display: inline-block !important;
+  }
+  .d-inline-lg {
+    display: inline !important;
+  }
+  .d-inline-flex-lg {
+    display: inline-flex !important;
+  }
+  .d-grid-lg {
+    display: grid !important;
+  }
+  .d-inherit-lg {
+    display: inherit !important;
+  }
+}
+/* #endregion */
+
+// Show/Hide
+.show:not(.dropdown) {
+  display: block !important;
+}
+
+.hide,
+.hidden,
+[ng\:cloak],
+[ng-cloak],
+[data-ng-cloak],
+[x-ng-cloak],
+.ng-cloak,
+.x-ng-cloak,
+.ng-hide {
+  display: none !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+// Removed unused Bootstrap 3 utility: .text-hide
+
+//
+// Responsive visibility
+// --------------------------------------------------
+// IE10 in Windows (Phone) 8
+//
+// Support for responsive views via media queries is kind of borked in IE10, for
+// Surface/desktop in split view and for Windows Phone 8. This particular fix
+// must be accompanied by a snippet of JavaScript to sniff the user agent and
+// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
+// our Getting Started page for more information on this bug.
+//
+// For more information, see the following:
+//
+// Issue: https://github.com/twbs/bootstrap/issues/10497
+// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
+// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+@-ms-viewport {
+  width: device-width;
+}
+
+// Bootstrap 3 responsive visibility utilities
+// NOTE: These ARE used throughout the codebase (81+ instances)
+.visible-xs,
+.visible-sm,
+.visible-md,
+.visible-lg {
+  @include responsive-visibility.responsive-invisibility();
+}
+
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-xs-flex,
+.visible-xs-grid,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-sm-flex,
+.visible-sm-grid,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-md-flex,
+.visible-md-grid,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block,
+.visible-lg-flex,
+.visible-lg-grid {
+  display: none !important;
+}
+
+.visible-xs {
+  @media (max-width: $screen-xs-max) {
+    @include responsive-visibility.responsive-visibility();
+  }
+}
+
+.visible-xs-block {
+  @media (max-width: $screen-xs-max) {
+    display: block !important;
+  }
+}
+
+.visible-xs-inline {
+  @media (max-width: $screen-xs-max) {
+    display: inline !important;
+  }
+}
+
+.visible-xs-inline-block {
+  @media (max-width: $screen-xs-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-xs-flex {
+  @media (max-width: $screen-xs-max) {
+    display: flex !important;
+  }
+}
+
+.visible-xs-grid {
+  @media (max-width: $screen-xs-max) {
+    display: grid !important;
+  }
+}
+
+.visible-sm {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    @include responsive-visibility.responsive-visibility();
+  }
+}
+
+.visible-sm-block {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: block !important;
+  }
+}
+
+.visible-sm-inline {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: inline !important;
+  }
+}
+
+.visible-sm-inline-block {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-sm-flex {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: flex !important;
+  }
+}
+
+.visible-sm-grid {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: grid !important;
+  }
+}
+
+.visible-md {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    @include responsive-visibility.responsive-visibility();
+  }
+}
+
+.visible-md-block {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: block !important;
+  }
+}
+
+.visible-md-inline {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: inline !important;
+  }
+}
+
+.visible-md-inline-block {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-md-flex {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: flex !important;
+  }
+}
+
+.visible-md-grid {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: grid !important;
+  }
+}
+
+.visible-lg {
+  @media (min-width: $screen-lg-min) {
+    @include responsive-visibility.responsive-visibility();
+  }
+}
+
+.visible-lg-block {
+  @media (min-width: $screen-lg-min) {
+    display: block !important;
+  }
+}
+
+.visible-lg-inline {
+  @media (min-width: $screen-lg-min) {
+    display: inline !important;
+  }
+}
+
+.visible-lg-inline-block {
+  @media (min-width: $screen-lg-min) {
+    display: inline-block !important;
+  }
+}
+
+.visible-lg-flex {
+  @media (min-width: $screen-lg-min) {
+    display: flex !important;
+  }
+}
+
+.visible-lg-grid {
+  @media (min-width: $screen-lg-min) {
+    display: grid !important;
+  }
+}
+
+.hidden-xs {
+  @media (max-width: $screen-xs-max) {
+    @include responsive-visibility.responsive-invisibility();
+  }
+}
+
+.hidden-sm {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    @include responsive-visibility.responsive-invisibility();
+  }
+}
+
+.hidden-md {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    @include responsive-visibility.responsive-invisibility();
+  }
+}
+
+.hidden-lg {
+  @media (min-width: $screen-lg-min) {
+    @include responsive-visibility.responsive-invisibility();
+  }
+}
+
+// Removed unused Bootstrap 3 print utilities - verified 0 usages
+// .visible-print, .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print

package/styles/utilities/_elevation.scss

@@ -0,0 +1,41 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/shadows-helper";
+
+/**
+ * Elevation (Shadow) Utilities
+ *
+ * Note: Uses shadows-helper mixin which references elevation design tokens.
+ *
+ * Intentionally hardcoded values:
+ * - None - uses mixin with elevation token parameters (sm, md, lg, hover)
+ */
+
+.elevation-sm {
+  @include shadows-helper.boxShadowHelper(sm);
+  &--border {
+    @include shadows-helper.boxShadowHelper(sm, border);
+  }
+}
+.elevation-md {
+  @include shadows-helper.boxShadowHelper(md);
+  &--top {
+    @include shadows-helper.boxShadowHelper(md, top);
+  }
+  &--right {
+    @include shadows-helper.boxShadowHelper(md, right);
+  }
+  &--left {
+    @include shadows-helper.boxShadowHelper(md, left);
+  }
+}
+.elevation-lg {
+  @include shadows-helper.boxShadowHelper(lg);
+}
+.elevation-hover {
+  @include shadows-helper.boxShadowHelper(hover);
+}
+
+.elevation-none {
+  box-shadow: none !important;
+}