@siemens/element-theme 47.0.0

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@siemens/element-theme",
+  "version": "47.0.0",
+  "description": "Element CSS theme.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:siemens/element.git"
+  },
+  "author": {
+    "name": "Siemens AG",
+    "email": "info@siemens.com"
+  },
+  "homepage": "https://github.com/siemens/element",
+  "bugs": "https://github.com/siemens/element/issues/new",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "siemens",
+    "theme",
+    "css",
+    "less",
+    "responsive",
+    "front-end",
+    "framework"
+  ]
+}

package/src/styles/_accessibility.scss

@@ -0,0 +1,9 @@
+:root {
+  --element-animations-enabled: 1;
+}
+
+@media (prefers-reduced-motion) {
+  :root {
+    --element-animations-enabled: 0;
+  }
+}

package/src/styles/_all-variables.scss

@@ -0,0 +1,7 @@
+// The following provide general theme variables
+
+@forward './variables';
+@forward './bootstrap/functions';
+@forward './bootstrap/variables';
+@forward './bootstrap/mixins';
+@forward './variables/utilities';

package/src/styles/_bootstrap.scss

@@ -0,0 +1,26 @@
+@use './bootstrap/root';
+@use './bootstrap/reboot';
+@use './bootstrap/type';
+@use './bootstrap/images';
+@use './bootstrap/containers';
+@use './bootstrap/grid';
+@use './bootstrap/tables';
+@use './bootstrap/forms';
+@use './bootstrap/buttons';
+@use './bootstrap/transitions';
+@use './bootstrap/dropdowns';
+@use './bootstrap/button-group';
+@use './bootstrap/nav';
+@use './bootstrap/card';
+@use './bootstrap/breadcrumb';
+@use './bootstrap/pagination';
+@use './bootstrap/badges';
+@use './bootstrap/alert';
+@use './bootstrap/progress';
+@use './bootstrap/list-group';
+@use './bootstrap/modals';
+@use './bootstrap/tooltip';
+@use './bootstrap/popovers';
+@use './bootstrap/utilities';
+
+@use './bootstrap/helpers';

package/src/styles/_themes.scss

@@ -0,0 +1,35 @@
+@use 'sass:list';
+
+$_theme-default: 'element';
+$_themes: () !default;
+
+@mixin configure($defaultTheme: null, $themes: ()) {
+  @if $defaultTheme {
+    $_theme-default: $defaultTheme !global;
+  }
+
+  @if $themes {
+    $_themes: $themes !global;
+  }
+}
+
+@mixin make-theme($vars, $name, $dark: false, $force-generate: false) {
+  $theme-name: '';
+  $mode: '';
+
+  @if list.index($_themes, $name) or $name == $_theme-default or $force-generate {
+    @if $name != $_theme-default {
+      $theme-name: '.theme-#{$name}';
+    }
+
+    @if $dark {
+      $mode: '.app--dark';
+    }
+
+    :root#{$theme-name}#{$mode} {
+      @each $token, $val in $vars {
+        --element-#{$token}: #{$val};
+      }
+    }
+  }
+}

package/src/styles/_variables.scss

@@ -0,0 +1,10 @@
+// the minimal set of variables w/o all the heavy bootstrap stuff
+@forward './variables/animations';
+@forward './variables/semantic-tokens';
+@forward './variables/typography';
+@forward './variables/elevation';
+@forward './variables/focus';
+@forward './variables/spacers';
+@forward './variables/zindex';
+@forward './variables/layout';
+@forward './variables/si-vars';

package/src/styles/bootstrap/_alert.scss

@@ -0,0 +1,60 @@
+@use '../variables/semantic-tokens';
+@use '../variables/typography';
+@use 'variables';
+
+.alert {
+  position: relative;
+  overflow: hidden;
+  padding-block: variables.$alert-padding-y;
+  padding-inline: variables.$alert-padding-x;
+  margin-block-end: variables.$alert-margin-bottom;
+
+  &::before {
+    content: '';
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    position: absolute;
+    inline-size: 4px;
+    block-size: 100%;
+    background: var(--color-bar);
+  }
+}
+
+.alert,
+.alert-link {
+  font-size: typography.$si-font-size-title-1;
+  line-height: typography.$si-line-height-title-1;
+}
+
+.alert-link {
+  font-weight: typography.$si-font-weight-title-1;
+  color: inherit;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
+.alert-success {
+  --color-bar: #{semantic-tokens.$element-status-success};
+  color: semantic-tokens.$element-text-success;
+  background: semantic-tokens.$element-base-success;
+}
+
+.alert-warning {
+  --color-bar: #{semantic-tokens.$element-status-warning};
+  color: semantic-tokens.$element-text-warning;
+  background: semantic-tokens.$element-base-warning;
+}
+
+.alert-danger {
+  --color-bar: #{semantic-tokens.$element-status-danger};
+  color: semantic-tokens.$element-text-danger;
+  background: semantic-tokens.$element-base-danger;
+}
+
+.alert-info {
+  --color-bar: #{semantic-tokens.$element-status-information};
+  color: semantic-tokens.$element-text-information;
+  background: semantic-tokens.$element-base-information;
+}

package/src/styles/bootstrap/_badges.scss

@@ -0,0 +1,115 @@
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use './variables';
+
+@use 'sass:map';
+
+// stylelint-disable declaration-no-important
+
+.badge {
+  display: inline-block;
+  color: semantic-tokens.$element-text-primary;
+  padding-block: variables.$badge-padding-y;
+  padding-inline: variables.$badge-padding-x;
+  margin-block: 0;
+  margin-inline: map.get(spacers.$spacers, 4);
+  block-size: map.get(spacers.$spacers, 8);
+  line-height: map.get(spacers.$spacers, 8);
+  flex-shrink: 0;
+  font-size: typography.$si-font-size-title-2;
+  font-weight: typography.$si-font-weight-title-2;
+  max-inline-size: 196px;
+  min-inline-size: map.get(spacers.$spacers, 8);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: variables.$badge-border-radius;
+
+  &:empty {
+    display: none;
+  }
+
+  &.bg-default {
+    background-color: semantic-tokens.$element-base-0 !important;
+    color: semantic-tokens.$element-text-primary;
+  }
+
+  &.bg-primary {
+    background-color: semantic-tokens.$element-ui-0 !important;
+    color: semantic-tokens.$element-text-inverse;
+  }
+
+  &.bg-secondary {
+    background-color: semantic-tokens.$element-ui-4 !important;
+    color: semantic-tokens.$element-text-primary;
+  }
+
+  &.bg-info {
+    background-color: semantic-tokens.$element-base-information !important;
+    color: semantic-tokens.$element-text-information;
+  }
+
+  &.bg-success {
+    background-color: semantic-tokens.$element-base-success !important;
+    color: semantic-tokens.$element-text-success;
+  }
+
+  &.bg-caution {
+    background-color: semantic-tokens.$element-base-caution !important;
+    color: semantic-tokens.$element-text-caution;
+  }
+
+  &.bg-warning {
+    background-color: semantic-tokens.$element-base-warning !important;
+    color: semantic-tokens.$element-text-warning;
+  }
+
+  &.bg-danger {
+    background-color: semantic-tokens.$element-base-danger !important;
+    color: semantic-tokens.$element-text-danger;
+  }
+
+  &.bg-inverse {
+    background-color: semantic-tokens.$element-ui-1 !important;
+    color: semantic-tokens.$element-text-inverse;
+  }
+}
+
+.badge-dot {
+  position: relative;
+
+  &::after {
+    content: '';
+    inline-size: 10px;
+    block-size: 10px;
+    border-radius: 5px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    background-color: semantic-tokens.$element-status-danger;
+  }
+}
+
+.badge-text {
+  block-size: 14px;
+  min-inline-size: 14px;
+  border-radius: 7px;
+  position: relative;
+  background-color: semantic-tokens.$element-action-danger;
+  color: semantic-tokens.$element-action-danger-text;
+  font-size: typography.$si-font-size-caption-1;
+  line-height: 13px;
+  padding-block: 0;
+  padding-inline: map.get(spacers.$spacers, 2);
+  font-family: variables.$font-family-sans-serif;
+  font-weight: typography.$si-font-weight-bold;
+}
+
+.icon + .badge-text {
+  inset-block-start: -5px;
+  inset-inline-start: -12px;
+  margin-inline-end: -12px;
+}

package/src/styles/bootstrap/_breadcrumb.scss

@@ -0,0 +1,32 @@
+@use './functions';
+@use './variables';
+
+// FIXME: drop this completely as Element styling has a different separator
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding-block: variables.$breadcrumb-padding-y;
+  padding-inline: variables.$breadcrumb-padding-x;
+  margin-block-end: variables.$breadcrumb-margin-bottom;
+  font-size: variables.$breadcrumb-font-size;
+  list-style: none;
+  background-color: variables.$breadcrumb-bg;
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    &::before {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 24px;
+      color: variables.$breadcrumb-divider-color;
+      content: functions.escape-svg(variables.$breadcrumb-divider);
+    }
+  }
+
+  &.active {
+    color: variables.$breadcrumb-active-color;
+  }
+}

package/src/styles/bootstrap/_button-group.scss

@@ -0,0 +1,101 @@
+@use '../variables/focus';
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use './variables';
+
+@use 'sass:map';
+
+.btn-group {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  .btn {
+    border-radius: 0;
+  }
+
+  > .btn:first-of-type,
+  > label:first-of-type .btn {
+    border-start-start-radius: semantic-tokens.$element-button-radius;
+    border-end-start-radius: semantic-tokens.$element-button-radius;
+  }
+
+  > .btn:last-of-type,
+  > label:last-of-type .btn {
+    border-start-end-radius: semantic-tokens.$element-button-radius;
+    border-end-end-radius: semantic-tokens.$element-button-radius;
+  }
+
+  > .btn,
+  label > .btn {
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  > .btn-check:focus + .btn,
+  > .btn:is(:hover, :active, .active) {
+    z-index: 1;
+  }
+
+  > .btn:not(:first-of-type),
+  label + label {
+    margin-inline-start: -1px;
+  }
+}
+
+.btn-group .btn-check {
+  + .btn {
+    background: transparent;
+    color: semantic-tokens.$element-text-primary;
+    padding-block: map.get(spacers.$spacers, 5) - 1px;
+    border: 1px solid semantic-tokens.$element-ui-4;
+    transition: none;
+
+    &.icon-only {
+      min-inline-size: unset;
+      padding-inline: map.get(spacers.$spacers, 5) - 1px;
+
+      .icon {
+        margin-inline: 0;
+      }
+    }
+
+    &.btn-sm {
+      padding-block: map.get(spacers.$spacers, 4) - 1px;
+      font-size: typography.$si-font-size-body-2;
+      line-height: typography.$si-line-height-body-2;
+    }
+  }
+
+  &:checked + .btn,
+  + .btn:hover {
+    color: semantic-tokens.$element-action-secondary-text-hover;
+  }
+
+  &:checked + .btn {
+    background: semantic-tokens.$element-action-secondary-hover;
+    border-color: semantic-tokens.$element-action-secondary-border-hover;
+    z-index: 2;
+
+    &:hover {
+      color: semantic-tokens.$element-text-primary;
+    }
+  }
+
+  &:focus-visible + .btn {
+    @include focus.make-outline-focus();
+    z-index: 3;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    inline-size: auto;
+  }
+}

package/src/styles/bootstrap/_buttons.scss

@@ -0,0 +1,244 @@
+@use '../variables';
+@use '../variables/focus';
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use './mixins/transition';
+@use './variables' as bootstrap-variables;
+
+@use 'sass:map';
+
+$btn-circle-font-size-default: 32px !default;
+$btn-circle-font-size-sm: 24px !default;
+$btn-circle-size-default: 40px !default;
+$btn-circle-size-sm: 32px !default;
+$btn-circle-size-xs: 24px !default;
+
+// there are some non .btn buttons used in element
+button {
+  color: semantic-tokens.$element-text-primary;
+}
+
+@mixin button-circle-size($btn-size, $font-size) {
+  inline-size: $btn-size;
+  block-size: $btn-size;
+  font-size: $font-size;
+}
+
+:is(.btn, .btn-close) {
+  line-height: bootstrap-variables.$btn-line-height;
+  font-weight: typography.$si-font-weight-title-2;
+  padding-block: calc(bootstrap-variables.$btn-padding-y - var(--btn-border-width, 0px));
+  padding-inline: calc(bootstrap-variables.$btn-padding-x - var(--btn-border-width, 0px));
+  font-size: bootstrap-variables.$btn-font-size;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  vertical-align: middle;
+  background-color: var(--btn-bg, transparent);
+  color: var(--btn-color, inherit);
+  border: var(--btn-border-width, 0) solid var(--btn-border-color, transparent);
+  border-radius: bootstrap-variables.$btn-border-radius;
+  @include transition.transition(bootstrap-variables.$btn-transition);
+
+  &:is(:disabled, .disabled),
+  fieldset:disabled & {
+    pointer-events: none;
+    opacity: semantic-tokens.$element-action-disabled-opacity;
+  }
+
+  // If the case of a link looking like a button <a class="btn btn-primary" href="#" target="_blank">Go Back</a>,
+  // the hover effect from the <a> element needs to be reset.
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:not(:is(:disabled, .disabled)):is(:active, .active, :hover, .hover) {
+    color: var(--btn-color-hover, inherit);
+    background: var(--btn-bg-hover, inherit);
+    border-color: var(--btn-border-color-hover);
+  }
+
+  .icon {
+    margin-block: -#{map.get(spacers.$spacers, 2)};
+    margin-inline: -#{map.get(spacers.$spacers, 2)} #{map.get(spacers.$spacers, 2)};
+  }
+}
+
+.btn:not(:is(.btn-circle, .btn-link, .btn-close)) {
+  min-inline-size: variables.$btn-width-normal;
+}
+
+.btn-primary {
+  --btn-bg: #{semantic-tokens.$element-action-primary};
+  --btn-bg-hover: #{semantic-tokens.$element-action-primary-hover};
+  --btn-color: #{semantic-tokens.$element-action-primary-text};
+  --btn-color-hover: #{semantic-tokens.$element-action-primary-text};
+}
+
+.btn-danger {
+  --btn-bg: #{semantic-tokens.$element-action-danger};
+  --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
+  --btn-color: #{semantic-tokens.$element-action-danger-text};
+  --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
+}
+
+.btn-warning {
+  --btn-bg: #{semantic-tokens.$element-action-warning};
+  --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
+  --btn-color: #{semantic-tokens.$element-action-warning-text};
+  --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
+}
+
+.btn-secondary,
+.btn-secondary-warning,
+.btn-secondary-danger {
+  --btn-bg: #{semantic-tokens.$element-action-secondary};
+  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
+  --btn-color: #{semantic-tokens.$element-action-secondary-text};
+  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
+  --btn-border-width: 1px;
+  --btn-border-color: #{semantic-tokens.$element-action-secondary-border};
+  --btn-border-color-hover: #{semantic-tokens.$element-action-secondary-border-hover};
+}
+
+.btn-tertiary,
+.btn-tertiary-warning,
+.btn-tertiary-danger {
+  --btn-bg: transparent;
+  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
+  --btn-color: #{semantic-tokens.$element-action-secondary-text};
+  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
+}
+
+.btn-secondary-warning,
+.btn-tertiary-warning {
+  --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
+  --btn-color: #{semantic-tokens.$element-action-secondary-warning};
+  --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
+  --btn-border-color: #{semantic-tokens.$element-action-secondary-warning};
+  --btn-border-color-hover: #{semantic-tokens.$element-action-warning-hover};
+}
+
+.btn-secondary-danger,
+.btn-tertiary-danger {
+  --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
+  --btn-color: #{semantic-tokens.$element-action-secondary-danger};
+  --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
+  --btn-border-color: #{semantic-tokens.$element-action-secondary-danger};
+  --btn-border-color-hover: #{semantic-tokens.$element-action-danger-hover};
+}
+
+.btn-link {
+  --btn-color: #{bootstrap-variables.$btn-link-color};
+  --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
+  font-weight: typography.$si-font-weight-body-2;
+  justify-content: flex-start;
+  text-decoration: bootstrap-variables.$link-decoration;
+  padding: 0;
+
+  &:hover {
+    text-decoration: bootstrap-variables.$link-hover-decoration;
+  }
+
+  &:is(:disabled, .disabled) {
+    --btn-color: #{bootstrap-variables.$btn-link-disabled-color};
+    opacity: 1;
+  }
+}
+
+// Circle Buttons
+// --------------
+:is(.btn-circle, .btn-close) {
+  padding: 0 !important; // stylelint-disable-line declaration-no-important
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.btn-circle {
+  &,
+  &.btn-lg {
+    @include button-circle-size($btn-circle-size-default, $btn-circle-font-size-default);
+  }
+
+  &.btn-sm {
+    @include button-circle-size($btn-circle-size-sm, $btn-circle-font-size-sm);
+  }
+
+  &.btn-xs {
+    @include button-circle-size($btn-circle-size-xs, $btn-circle-font-size-sm);
+  }
+
+  .icon {
+    margin-block: 0;
+    margin-inline: 0;
+  }
+}
+
+.btn-circle.btn-ghost,
+.btn-close {
+  --btn-bg: transparent;
+  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
+  --btn-color: #{semantic-tokens.$element-ui-2};
+  --btn-color-hover: #{semantic-tokens.$element-ui-1};
+}
+
+.btn-lg {
+  font-size: bootstrap-variables.$btn-font-size-lg;
+  line-height: 1.5;
+}
+
+.btn-sm {
+  font-size: bootstrap-variables.$btn-font-size-sm;
+  line-height: 1;
+}
+
+// this is for compatibility so that old markup looks ok-ish
+.btn-close {
+  @include button-circle-size($btn-circle-size-sm, $btn-circle-font-size-sm);
+
+  font-weight: typography.$si-font-weight-normal;
+
+  &::before {
+    content: '\002715';
+    font-size: 1rem;
+    margin-block-start: 2px;
+  }
+
+  > * {
+    display: none !important; // stylelint-disable-line declaration-no-important
+  }
+}
+
+// This button should look like an input field. See .form-control.
+.btn-input {
+  --btn-bg: #{bootstrap-variables.$input-bg};
+  --btn-bg-hover: #{bootstrap-variables.$input-bg};
+  --btn-color: #{bootstrap-variables.$input-color};
+  --btn-color-hover: #{bootstrap-variables.$input-color};
+  --btn-border-width: 1px;
+  --btn-border-color: #{semantic-tokens.$element-ui-2};
+  --btn-border-color-hover: #{semantic-tokens.$element-ui-1};
+
+  @include typography.si-font(
+    typography.$si-font-size-body-2,
+    typography.$si-line-height-body-2,
+    typography.$si-font-weight-body-2
+  );
+  padding-block: bootstrap-variables.$input-padding-y;
+  padding-inline: 7px;
+
+  border-radius: bootstrap-variables.$input-border-radius;
+  justify-content: flex-start;
+
+  &:is(:disabled, .disabled) {
+    --btn-border-color: #{semantic-tokens.$element-ui-3};
+    --btn-color: #{semantic-tokens.$element-text-disabled};
+    opacity: unset;
+  }
+
+  &:focus {
+    --btn-border-color: #{semantic-tokens.$element-ui-1};
+  }
+}