@tedi-design-system/core 2.0.0

package/README.md

@@ -0,0 +1,14 @@
+# TEDI Core
+
+[![semantic-release](https://img.shields.io/badge/semantic--release-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
+
+`@tedi-design-system/core` contains shared variables and core styles shared between TEDI React and Angular components
+
+Usage instructions and detailed documentation can be found in the [TEDI Design System wiki](https://github.com/TEDI-Design-System/general).
+
+---
+
+## Contributing
+
+Check the [wiki](https://github.com/TEDI-Design-System/general) for component guidelines and coding standards.  
+Report issues or contribute via [GitHub Issues](https://github.com/TEDI-Design-System/core/issues).

package/_base.scss

@@ -0,0 +1,93 @@
+@use 'mixins';
+@use 'bootstrap-utility/breakpoints';
+
+html,
+body {
+  height: 100%;
+  background-color: var(--neutral-300);
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: var(--header-bottom-height, 0);
+}
+
+body {
+  box-sizing: border-box;
+  color: var(--general-text-primary);
+
+  @include mixins.responsive-styles(font-family, family-primary, $exclude: tablet);
+  @include mixins.responsive-styles(line-height, body-regular-line-height, $exclude: tablet);
+  @include mixins.responsive-styles(font-size, body-regular-size, $exclude: tablet);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/**
+ * To overwrite behavior of focus outline
+ * Set '--global-outline-color' and '--global-outline-offset' inside component scope
+ */
+*:where(:focus) {
+  @include mixins.focus-element;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+dl,
+dd,
+ul {
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+}
+
+ol,
+ul {
+  margin: 0.25rem 0;
+  list-style-position: inside;
+}
+
+ol.public-DraftStyleDefault-ul,
+ul.public-DraftStyleDefault-ul {
+  list-style-position: outside;
+}
+
+button {
+  line-height: 1.5;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: var(--link-primary-default);
+  text-decoration: underline;
+
+  &.link-white {
+    color: var(--link-white-default);
+  }
+
+  &.no-underline {
+    text-decoration: none;
+  }
+}
+
+.scroll-disabled {
+  @include breakpoints.media-breakpoint-down(lg) {
+    height: 100%;
+    overflow-y: hidden;
+  }
+}

package/_fonts.scss

@@ -0,0 +1,253 @@
+// check src/public/fonts/README.md for explanation on font paths
+
+/* cyrillic-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 300;
+  src: url('/fonts/roboto-v30-cyrillic-ext-300-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 300;
+  src: url('/fonts/roboto-v30-cyrillic-300-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 300;
+  src: url('/fonts/roboto-v30-latin-ext-300-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 300;
+  src: url('/fonts/roboto-v30-latin-300-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/roboto-v30-cyrillic-ext-400-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/roboto-v30-cyrillic-400-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/roboto-v30-latin-ext-400-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/roboto-v30-latin-400-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/roboto-v30-cyrillic-ext-700-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/roboto-v30-cyrillic-700-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/roboto-v30-latin-ext-700-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/roboto-v30-latin-700-italic.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/roboto-v30-cyrillic-ext-300.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/roboto-v30-cyrillic-300.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/roboto-v30-latin-ext-300.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/roboto-v30-latin-300.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/roboto-v30-cyrillic-ext-400.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/roboto-v30-cyrillic-400.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/roboto-v30-latin-ext-400.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/roboto-v30-latin-400.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/roboto-v30-cyrillic-ext-700.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/roboto-v30-cyrillic-700.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/roboto-v30-latin-ext-700.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/roboto-v30-latin-700.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/_helpers.scss

@@ -0,0 +1,43 @@
+// https://github.com/h5bp/main.css/blob/main/src/_helpers.css
+
+.hidden,
+[hidden] {
+  display: none !important;
+}
+
+.block {
+  display: block !important;
+}
+
+.inline-block {
+  display: inline-block !important;
+}
+
+.flex {
+  display: flex !important;
+}
+
+.screen-reader-only,
+.visually-hidden,
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+
+  &.focusable:active,
+  &.focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: inherit;
+  }
+}

package/_icons.scss

@@ -0,0 +1,51 @@
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url('/fonts/material-symbols-rounded.woff2') format('woff2');
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Material Symbols Sharp';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url('/fonts/material-symbols-sharp.woff2') format('woff2');
+  font-display: block;
+}
+
+.material-symbols {
+  display: inline-block;
+  font-style: normal;
+  font-weight: normal;
+  font-feature-settings: 'liga';
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizelegibility;
+
+  &--outlined {
+    font-family: 'Material Symbols Outlined', sans-serif;
+  }
+
+  &--rounded {
+    font-family: 'Material Symbols Rounded', sans-serif;
+  }
+
+  &--sharp {
+    font-family: 'Material Symbols Sharp', sans-serif;
+  }
+}

package/_mixins.scss

@@ -0,0 +1,108 @@
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:meta';
+
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+);
+
+@function construct-variables($variable-names, $suffix) {
+  $result: '';
+
+  @each $name in $variable-names {
+    $result: #{$result} var(--#{$name}-#{$suffix});
+  }
+
+  @return $result;
+}
+
+@mixin responsive-styles($property, $names, $exclude: null) {
+  $variable-names: ();
+
+  @if meta.type-of($names) == 'string' {
+    $variable-names: (string.slice($names, 1, -1));
+  } @else {
+    $variable-names: $names;
+  }
+
+  & {
+    #{$property}: #{construct-variables($variable-names, mobile)};
+  }
+
+  @if $exclude != 'tablet' {
+    @media (min-width: map.get($breakpoints, sm)) {
+      #{$property}: #{construct-variables($variable-names, tablet)};
+    }
+  }
+
+  @if $exclude != 'desktop' {
+    @media (min-width: map.get($breakpoints, lg)) {
+      #{$property}: #{construct-variables($variable-names, desktop)};
+    }
+  }
+}
+
+@mixin print-grayscale {
+  @media print {
+    filter: grayscale(1);
+  }
+}
+
+@mixin visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  border: 0 !important;
+}
+
+@mixin table-cell-selector($selector: 'all') {
+  @if $selector == 'thead' or $selector == 'all' {
+    & > thead > tr > th {
+      @content;
+    }
+  }
+
+  @if $selector == 'tbody' or $selector == 'all' {
+    & > tbody > tr > td {
+      @content;
+    }
+  }
+
+  @if $selector == 'tfoot' or $selector == 'all' {
+    & > tfoot > tr > th {
+      @content;
+    }
+  }
+}
+
+@mixin focus-element {
+  border-radius: 0.25rem;
+  outline: 2px solid var(--global-outline-color, var(--color-primary-main));
+  outline-offset: var(--global-outline-offset, 1px);
+
+  html:not([data-whatintent='keyboard']) & {
+    outline: none;
+  }
+}
+
+@mixin button-reset {
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: var(--color-transparent);
+  border: none;
+
+  &:disabled {
+    cursor: default;
+  }
+}

package/_print.scss

@@ -0,0 +1,35 @@
+$breaks: ('auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region');
+
+@media print {
+  html {
+    font-size: 14px;
+  }
+
+  body {
+    background-color: var(--neutral-100);
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact; // needed for Edge. Isn't added automatically by autoprefixer
+  }
+
+  a {
+    filter: grayscale(1);
+  }
+
+  .no-print:not(.show-print) {
+    display: none !important;
+  }
+
+  @each $break in $breaks {
+    .break-before-#{$break} {
+      break-before: #{$break};
+    }
+
+    .break-after-#{$break} {
+      break-after: #{$break};
+    }
+
+    .break-inside-#{$break} {
+      break-inside: #{$break};
+    }
+  }
+}