@c8y/style 1023.17.20 → 1023.22.2

package/styles/base/_scaffolding.scss

@@ -0,0 +1,162 @@
+@use "../../variables/index" as *;
+@use "../mixins/forms";
+@use "../mixins/image";
+@use "../mixins/tab-focus";
+@use "../mixins/vendor-prefixes";
+
+/**
+ * Scaffolding - Base HTML element styles
+ *
+ * Note: All spacing values use proper design tokens.
+ *
+ * Intentionally hardcoded values:
+ * - font-size: 10px (root font size for rem calculations)
+ * - margin: -1px (accessibility trick for .sr-only)
+ * - width/height: 1px (accessibility trick for .sr-only)
+ * - border-radius: 50% (circle shape, semantically correct)
+ * - 1px borders: Standard border widths
+ */
+
+// Reset the box-sizing
+// Heads up! This reset may cause conflicts with some third-party widgets.
+// For recommendations on resolving such conflicts, see
+// http://getbootstrap.com/getting-started/#third-box-sizing
+* {
+  @include forms.box-sizing(border-box);
+  outline-color: $component-color-focus;
+}
+
+*:before,
+*:after {
+  @include forms.box-sizing(border-box);
+}
+
+// Body reset
+html {
+  font-size: 10px;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  overflow-x: hidden;
+  background-color: $body-background-color;
+  color: $text-color;
+  font-size: $font-size-base;
+  font-family: $font-family-base;
+  line-height: $line-height-base;
+}
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+// Links
+a {
+  color: $link-color;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: $link-color-hover;
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus {
+    @include tab-focus.tab-focus();
+  }
+
+  &.no-decoration {
+    &:hover,
+    &:focus {
+      outline: none;
+      text-decoration: none;
+    }
+
+    &:focus {
+      @include tab-focus.c8y-focus();
+    }
+  }
+
+  &.text-muted {
+    &:hover,
+    &:focus {
+      color: $link-color;
+      text-decoration: none;
+    }
+  }
+}
+
+// Figures
+// We reset this here because previously Normalize had no `figure` margins. This ensures we don't break anyone's use of the element.
+figure {
+  margin: 0;
+}
+
+// Images
+img {
+  vertical-align: middle;
+}
+
+// Responsive images (ensure images don't scale beyond their parents)
+.img-responsive {
+  @include image.img-responsive();
+}
+
+.img-square {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: scale-down;
+}
+
+// Removed unused Bootstrap 3 image utility classes - verified 0 usages
+// .img-rounded, .img-thumbnail, .img-circle
+
+hr {
+  margin-top: $line-height-computed;
+  margin-bottom: $line-height-computed;
+  border: 0;
+  border-top: 1px solid $hr-border;
+}
+
+// Only display content to screen readers
+// See: http://a11yproject.com/posts/how-to-hide-content/
+.sr-only,
+.cdk-visually-hidden {
+  position: absolute !important;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links, see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+.sr-only-focusable {
+  &:active,
+  &:focus {
+    z-index: 10;
+    overflow: visible;
+    clip: auto;
+    margin: 0;
+    width: auto;
+    height: auto;
+  }
+}
+
+// iOS "clickable elements" fix for role="button"
+// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+// for traditionally non-focusable elements with role="button"
+// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+[role='button'] {
+  cursor: pointer;
+}

package/styles/{_type.less → base/_type.less}

@@ -154,12 +154,12 @@ ol {
   }
   &.success {
     > li:before {
-      color: @status-success;
+      color: var(--palette-status-success, var(--c8y-palette-status-success));
     }
   }
   &.brand-primary {
     > li:before {
-      color: @brand-primary;
+      color: var(--brand-primary, var(--c8y-brand-primary));
     }
   }
 }

package/styles/base/_type.scss

@@ -0,0 +1,350 @@
+@use "../../variables/index" as *;
+@use "../../variables/dlt-c8y-icons-vars";
+@use "../mixins/text-overflow";
+
+/**
+ * Typography Styles
+ *
+ * Note: Most spacing values use $size-* tokens from the 8px base unit system.
+ *
+ * Intentionally hardcoded values:
+ * - Percentages (65%, 75%, 80%, 90%, 120%, 0.2em): Proportional scaling
+ * - Border widths (1px, 4px, 5px): Border properties, not spacing
+ * - Unitless line-heights (1, 1.4): CSS best practice for line-height
+ * - Calc expressions with layout vars: Specific layout calculations
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: $headings-font-weight;
+  font-family: $headings-font-family;
+  line-height: $headings-line-height;
+  small,
+  .small {
+    color: $headings-small-color;
+    font-weight: normal;
+    line-height: 1;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6{
+  color: $headings-color;
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  // reset margins to 0;
+  // on bootstrap uses $line-height-computed on top and ($line-height-computed / 2) on bottom;
+  margin-top: 0;
+  margin-bottom: 0;
+  small,
+  .small {
+    font-size: 65%;
+  }
+}
+
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  // reset margins to 0;
+  // on bootstrap uses ($line-height-computed / 2) for top and bottom;
+  margin-top: 0;
+  margin-bottom: 0;
+  small,
+  .small {
+    font-size: 75%;
+  }
+}
+
+h1,
+.h1 {
+  font-size: $font-size-h1;
+}
+
+h2,
+.h2 {
+  font-size: $font-size-h2;
+}
+
+h3,
+.h3 {
+  font-size: $font-size-h3;
+}
+
+h4,
+.h4 {
+  font-size: $font-size-h4;
+}
+
+h5,
+.h5 {
+  font-size: $font-size-h5;
+}
+
+h6,
+.h6 {
+  font-size: $font-size-h6;
+}
+
+// Body text
+p {
+  margin: 0;
+}
+
+.lead {
+  margin-bottom: $size-16;
+  font-size: calc(($font-size-base * 1.142857143));
+  line-height: 1.4;
+}
+
+// Emphasis & misc
+// Ex: (12px small font / 14px base font) * 100% = about 85%
+small,
+.small {
+  font-size: $font-size-small;
+}
+
+mark,
+.mark {
+  padding: 0.2em;
+  background-color: $state-warning-bg;
+}
+
+// Lists
+// Unordered and Ordered lists
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: calc($line-height-computed / 2);
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
+
+// List options
+// checkmark bullets in lists
+.check-bullets {
+  margin: 0 0 $size-10;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+  > li {
+    margin-bottom: $size-5;
+    padding: 0 0 0 $size-20;
+    &:before {
+      display: inline-block;
+      margin-left: calc(-1 * $size-20);
+      width: $size-20;
+      content: dlt-c8y-icons-vars.$dlt-c8y-icon-check;
+      font: normal normal normal $font-size-base/1 $icon-font-family;
+      font-size: 120%;
+
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+  &.success {
+    > li:before {
+      color: var(--palette-status-success, var(--c8y-palette-status-success));
+    }
+  }
+  &.brand-primary {
+    > li:before {
+      color: var(--brand-primary, var(--c8y-brand-primary));
+    }
+  }
+}
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  margin-left: calc(-1 * $size-5);
+
+  @extend .list-unstyled;
+  > li {
+    display: inline-block;
+    padding-right: $size-5;
+    padding-left: $size-5;
+  }
+}
+
+// Description Lists
+dl {
+  margin-top: 0; // Remove browser default
+  margin-bottom: $line-height-computed;
+}
+
+dt,
+dd {
+  line-height: $line-height-base;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0; // Undo browser default
+}
+
+dl.dl-inline {
+  margin-bottom: 0;
+  dt {
+    margin-right: $size-5;
+  }
+  dt,
+  dd {
+    display: inline-block;
+    vertical-align: top;
+  }
+  dd:after {
+    content: '\A';
+    white-space: pre;
+  }
+}
+
+// Horizontal description lists
+// Defaults to being stacked without any of the below styles applied, until the grid breakpoint is reached (default of ~768px).
+.dl-horizontal {
+  dd {
+    &::before,
+    &::after {
+      display: table;
+      content: " ";
+    }
+    &::after {
+      clear: both;
+    }
+  }
+  @media (min-width: $grid-float-breakpoint) {
+    dt {
+      float: left;
+      clear: left;
+      width: calc(($dl-horizontal-offset - 20) * 1px);
+      text-align: right;
+
+      @include text-overflow.text-overflow();
+    }
+    dd {
+      margin-bottom: $size-base;
+      margin-left: calc($dl-horizontal-offset * 1px);
+    }
+  }
+}
+
+// Misc
+abbr[title],
+abbr[data-original-title] {
+  text-decoration-color: $abbr-border-color;
+  text-decoration-line:overline;
+  text-decoration-style: dotted;
+  border-bottom-color: $abbr-border-color;
+  cursor: help;
+}
+
+.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+blockquote {
+  margin: 0 0 $line-height-computed;
+  padding: calc($line-height-computed / 2) $line-height-computed;
+  border-left: 4px solid $blockquote-border-color;
+  font-size: $blockquote-font-size;
+  p,
+  ul,
+  ol {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  footer,
+  small,
+  .small {
+    display: block;
+    color: $blockquote-small-color;
+    font-size: 80%; // back to default font-size
+    line-height: $line-height-base;
+    &:before {
+      content: '\2014 \00A0'; // em dash, nbsp
+    }
+  }
+}
+
+// Opposite alignment of blockquote
+// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
+.blockquote-reverse,
+blockquote.pull-right {
+  padding-right: $size-16;
+  padding-left: 0;
+  border-right: 5px solid $blockquote-border-color;
+  border-left: 0;
+  text-align: right; // Account for citation
+  footer,
+  small,
+  .small {
+    &:before {
+      content: '';
+    }
+    &:after {
+      content: '\00A0 \2014'; // nbsp, em dash
+    }
+  }
+}
+
+address {
+  margin-bottom: $line-height-computed;
+  font-style: normal;
+  line-height: $line-height-base;
+}
+
+/* Languages
+  font-family set based on html lang attribute (https://www.w3schools.com/tags/ref_language_codes.asp) and on the keys from .pot files
+*/
+:lang(ja),
+:lang(ja_jp),
+:lang(ja-jp),
+:lang(ja_JP),
+:lang(ja-JP) {
+  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
+  --c8y-font-size-base: 13px;
+}
+
+:lang(zh-Hans),
+:lang(zh-tw),
+:lang(zh_CN),
+:lang(zh-cn) {
+  font-family: 'Microsoft YaHei New', 'Microsoft Yahei', '微软雅黑', '宋体', SimSun, STXihei,
+    '华文细黑', sans-serif;
+}

package/styles/components/_markdown-content.less

@@ -0,0 +1,75 @@
+@import "../../variables/index";
+
+/**
+ * Markdown Content - Styling for markdown rendered content
+ *
+ * Note: Uses rem units for vertical spacing to maintain consistent rhythm based on root font size.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (800px): Max content width for readability
+ * - Rem values (1rem, 2rem): Vertical rhythm using rem units (not px tokens)
+ * - Border widths (1px): Standard borders
+ * - Percentages (100%): Layout
+ * - Opacity values (0.65): Visual effects for dark theme
+ * - Font-weight values (500, 600): Typography weights
+ */
+
+.markdown-content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p,
+  ul,
+  ol {
+    margin-bottom: 1rem;
+    max-width: 800px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin-bottom: 2rem;
+    font-weight: 500;
+  }
+
+  h2 {
+    margin: 2rem 0;
+    padding: 2rem 0;
+    border-top: 1px solid @gray-50;
+    border-bottom: 1px dotted @gray-50;
+  }
+
+  &--to-h3 {
+    h1,
+    h2 {
+      margin: 0 0 1rem;
+      padding: 2rem 0;
+      border-top: 1px dotted @gray-50;
+      font-weight: 600;
+      font-size: var(--c8y-font-size-h3);
+
+      &:first-child {
+        border-top: 0;
+      }
+
+      &:not(:first-child) {
+        margin-top: 2rem;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .c8y-dark-theme & {
+    img {
+      opacity: 0.65;
+    }
+  }
+}

package/styles/components/_markdown-content.scss

@@ -0,0 +1,82 @@
+@use "../../variables/index" as *;
+
+/**
+ * Markdown Content - Styling for markdown rendered content
+ *
+ * Note: Uses rem units for vertical spacing to maintain consistent rhythm based on root font size.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (800px): Max content width for readability
+ * - Rem values (1rem, 2rem): Vertical rhythm using rem units (not px tokens)
+ * - Border widths (1px): Standard borders
+ * - Percentages (100%): Layout
+ * - Opacity values (0.65): Visual effects for dark theme
+ * - Font-weight values (500, 600): Typography weights
+ */
+
+// Shared mixin for heading group selectors
+@mixin heading-elements {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    @content;
+  }
+}
+
+.markdown-content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p,
+  ul,
+  ol {
+    margin-bottom: 1rem;
+    max-width: 800px;
+  }
+
+  @include heading-elements {
+    margin-bottom: 2rem;
+    font-weight: 500;
+  }
+
+  h2 {
+    margin: 2rem 0;
+    padding: 2rem 0;
+    border-top: 1px solid $gray-50;
+    border-bottom: 1px dotted $gray-50;
+  }
+
+  &--to-h3 {
+    h1,
+    h2 {
+      margin: 0 0 1rem;
+      padding: 2rem 0;
+      border-top: 1px dotted $gray-50;
+      font-weight: 600;
+      font-size: var(--c8y-font-size-h3);
+
+      &:first-child {
+        border-top: 0;
+      }
+
+      &:not(:first-child) {
+        margin-top: 2rem;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .c8y-dark-theme & {
+    img {
+      opacity: 0.65;
+    }
+  }
+}