@amboss/design-system 1.0.6 → 1.0.10

package/CHANGELOG.md

@@ -1,3 +1,90 @@
+# v1.0.10 (Tue Feb 15 2022)
+
+### Release Notes
+
+#### Add CacheProvider and createCache as exports ([#421](https://github.com/amboss-mededu/amboss-design-system/pull/421))
+
+Enable emotional DS components to work in the shadow-dom.
+https://github.com/emotion-js/emotion/issues/1366
+https://emotion.sh/docs/cache-provider
+https://stackblitz.com/edit/emotion-shadow-dom-example?file=ShadowDomContainer.js
+https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
+
+---
+
+#### 🐛 Bug Fix
+
+- Add CacheProvider and createCache as exports [#421](https://github.com/amboss-mededu/amboss-design-system/pull/421) ([@AlexJeffcott](https://github.com/AlexJeffcott))
+
+#### Authors: 1
+
+- Alex ([@AlexJeffcott](https://github.com/AlexJeffcott))
+
+---
+
+# v1.0.9 (Fri Feb 11 2022)
+
+### Release Notes
+
+#### [LEAR-1458] add highlighted state and alignItems to Toggle ([#415](https://github.com/amboss-mededu/amboss-design-system/pull/415))
+
+- Adds highlight state for Toggle
+- Adds alignItems to Toggle
+- Fixes cursor for Disabled Toggle (default instead of pointer)
+
+---
+
+#### 🐛 Bug Fix
+
+- [LEAR-1458] add highlighted state and alignItems to Toggle [#415](https://github.com/amboss-mededu/amboss-design-system/pull/415) ([@smooth-opperator](https://github.com/smooth-opperator))
+
+#### Authors: 1
+
+- Julie Oppermann ([@smooth-opperator](https://github.com/smooth-opperator))
+
+---
+
+# v1.0.8 (Wed Jan 05 2022)
+
+### Release Notes
+
+#### add font-weight 900 (black) text ([#410](https://github.com/amboss-mededu/amboss-design-system/pull/410))
+
+adds font-weight: 900 ("black") version for Text component
+
+---
+
+#### 🐛 Bug Fix
+
+- add font-weight 900 (black) text [#410](https://github.com/amboss-mededu/amboss-design-system/pull/410) ([@smooth-opperator](https://github.com/smooth-opperator))
+
+#### Authors: 1
+
+- Julie Oppermann ([@smooth-opperator](https://github.com/smooth-opperator))
+
+---
+
+# v1.0.7 (Thu Dec 23 2021)
+
+### Release Notes
+
+#### [LEAR-2295] adjust progress bar colors ([#409](https://github.com/amboss-mededu/amboss-design-system/pull/409))
+
+(Re)Updates the colors for the SegmentedProgressBar for accessibility
+Lightens the green further, uses lighter version of red for SegmentedProgressBar
+
+---
+
+#### 🐛 Bug Fix
+
+- [LEAR-2295] adjust progress bar colors [#409](https://github.com/amboss-mededu/amboss-design-system/pull/409) ([@smooth-opperator](https://github.com/smooth-opperator))
+
+#### Authors: 1
+
+- Julie Oppermann ([@smooth-opperator](https://github.com/smooth-opperator))
+
+---
+
 # v1.0.6 (Thu Dec 23 2021)
 
 ### Release Notes

package/README.md

@@ -255,3 +255,33 @@ export const Box = styled.div<BoxProps>(
 );
 ```
 
+## Shadow-DOM
+In order to use emotion-enabled DS components in the shadow-dom, you need to take some steps to 'link' the styles in the light-dom (these are added by emotion using CSSStyleSheet.insertRule() which is why <style data-emotion> appears empty in the DOM).
+
+emotion-js/emotion#1366
+https://emotion.sh/docs/cache-provider
+https://stackblitz.com/edit/emotion-shadow-dom-example?file=ShadowDomContainer.js
+https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
+
+```js
+import { ThemeProvider, light, Card, H1, CacheProvider, createCache } from '@amboss/design-system';
+class SuchShadow extends HTMLElement {
+  connectedCallback() {
+    const root = document.createElement('div');
+    this.attachShadow({ mode: 'open' });
+    this.emotionCache = createCache({ container: this.shadowRoot });
+    render(
+      <ThemeProvider theme={light}>
+        <CacheProvider value={this.emotionCache}>
+          <Card>
+            <H1>I love you shadow unicorn!!!</H1>
+          </Card>
+        </CacheProvider>
+      </ThemeProvider>,
+      root
+    );
+  }
+}
+
+customElements.define('shadow-element', SuchShadow);
+```

package/build/build-tokens/visualConfig.d.ts

@@ -232,6 +232,7 @@ declare type AmbossTheme = {
             "toggle": {
                 "default": string;
                 "checked": string;
+                "highlighted": string;
             };
             "togglePoint": {
                 "default": string;
@@ -371,6 +372,7 @@ declare type AmbossTheme = {
             "toggle": {
                 "default": string;
                 "checked": string;
+                "highlighted": string;
                 "hover": string;
             };
             "badge": {