@oicl/openbridge-webcomponents 0.0.8 → 0.0.10

package/src/components/rich-button/rich-button.css

@@ -4,6 +4,9 @@
 
 .wrapper {
     position: relative;
+}
+
+.wrapper:not(.info) {
     background-color: var(--container-background-color);
     box-shadow: var(--shadow-flat);
     overflow: hidden;
@@ -22,12 +25,16 @@
 button {
     width: 100%;
     appearance: none;
-    @mixin style style=flat;
-    border-width: 0 !important;
     display: flex;
     flex-direction: column;
     text-align: left;
     padding: 0;
+    border-width: 0 !important;
+    background-color: transparent;
+}
+
+.wrapper:not(.info) button {
+    @mixin style style=flat;   
 }
 
 .top.border button, .center.border button {
@@ -116,3 +123,9 @@ button {
     border-bottom: 1px solid var(--border-outline-color);
     margin-bottom: -1px;
 }
+
+.info .graphic {
+    border-radius: 6px;
+    box-shadow: var(--shadow-flat);
+    overflow: hidden;
+}

package/src/components/rich-button/rich-button.stories.ts

@@ -5,6 +5,7 @@ import {html} from 'lit';
 import '../../icons/icon-01-placeholder';
 import '../../icons/icon-02-chevron-right';
 import '../../icons/icon-01-print';
+import '../../icons/icon-03-support';
 import {spread} from '@open-wc/lit-helpers';
 
 const meta: Meta<typeof ObcRichButton> = {
@@ -194,3 +195,38 @@ export const WithGraphicBorder: Story = {
       <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
     </obc-rich-button> `,
 };
+
+export const WithGraphicInfo: Story = {
+  args: {
+    size: 'multi-line',
+    hasLeadingIcon: false,
+    hasTrailingIcon: false,
+    hasGraphic: true,
+    graphicBorder: false,
+    info: true,
+  },
+  render: (args) =>
+    html`<obc-rich-button
+      position=${args.position}
+      size=${args.size}
+      ?has-graphic=${args.hasGraphic}
+      ?has-leading-icon=${args.hasLeadingIcon}
+      ?has-trailing-icon=${args.hasTrailingIcon}
+      ?graphic-border=${args.graphicBorder}
+      ?info=${args.info}
+    >
+      <div
+        slot="graphic"
+        style="width: 100%; height: 120px; color: var(--element-active-inverted-color); background: var(--instrument-enhanced-secondary-color); padding-top: 40px; padding-bottom: 32px"
+      >
+        <obi-03-support></obi-03-support>
+      </div>
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="description">
+        A long description, with a text spanning over multiple lines. Lorem
+        ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+};

package/src/components/rich-button/rich-button.ts

@@ -27,6 +27,7 @@ export class ObcRichButton extends LitElement {
     ObcRichButtonPosition.Regular;
   @property({type: String}) size: ObcRichButtonSizeType =
     ObcRichButtonSize.SingleLine;
+  @property({type: Boolean}) info = false;
   @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =
     false;
   @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =
@@ -44,6 +45,7 @@ export class ObcRichButton extends LitElement {
           [this.position]: true,
           [this.size]: true,
           'graphic-border': this.graphicBorder,
+          info: this.info,
           border: this.border,
         })}
       >

package/src/components/slider/slider.css

@@ -22,6 +22,7 @@
   position: relative;
 }
 
+
 .slider {
   position: absolute;
   -webkit-appearance: none;
@@ -70,6 +71,25 @@
   background: var(--selected-enabled-background-color);
 }
 
+.no-input .interactive-track {
+  width: calc(var(--ratio) * 100% + (1 - 2 * var(--ratio)) * 4px);
+}
+
+
+/* used in non-interactive mode */
+.passive-thumb {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 16px;
+  left: calc(var(--ratio) * 100% - 8px + (1 - 2 * var(--ratio)) * 4px);
+  border-radius: 100%;
+  border-width: 4px;
+  border-style: solid;
+  border-color: var(--container-background-color);
+  background: var(--selected-enabled-background-color);
+}
+
 .wrapper:hover .interactive-track {
   background: var(--selected-hover-background-color);
 }

package/src/components/slider/slider.stories.ts

@@ -17,7 +17,9 @@ const meta: Meta<typeof ObcSlider> = {
     step: {
       control: {type: 'number', min: 1, max: 100, step: 1},
     },
-
+    hugContainer: {
+      control: {type: 'boolean'},
+    },
     iconLeft: {
       options: iconIds,
       control: {type: 'select'},
@@ -34,6 +36,9 @@ const meta: Meta<typeof ObcSlider> = {
       min="0"
       max="100"
       ?hug-container=${args.hugContainer}
+      ?has-left-icon=${args.iconLeft ? true : false}
+      ?has-right-icon=${args.iconRight ? true : false}
+      variant=${args.variant}
     >
       ${args.iconLeft
         ? iconIdToIconHtml(args.iconLeft as unknown as string, {
@@ -62,6 +67,13 @@ export const Primary: Story = {
   },
 };
 
+export const NoIcons: Story = {
+  args: {
+    value: 20,
+    hugContainer: false,
+  },
+};
+
 export const HugContainer: Story = {
   args: {
     value: 20,
@@ -70,3 +82,10 @@ export const HugContainer: Story = {
     hugContainer: true,
   },
 };
+
+export const NoValue: Story = {
+  args: {
+    value: 20,
+    variant: 'no-input',
+  },
+};

package/src/components/slider/slider.ts

@@ -4,6 +4,14 @@ import {styleMap} from 'lit/directives/style-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import componentStyle from './slider.css?inline';
 import '../icon-button/icon-button';
+import {classMap} from 'lit/directives/class-map.js';
+
+export enum ObcSliderVariant {
+  NoValue = 'no-value',
+  NoInput = 'no-input',
+}
+
+export type ObcSliderVariantType = 'no-value' | 'no-input';
 
 /**
  * @element obc-slider
@@ -27,6 +35,9 @@ export class ObcSlider extends LitElement {
   @property({type: Number}) max = 100;
   @property({type: Number}) step: number | undefined;
   @property({type: Number, attribute: 'step-click'}) stepClick = 10;
+  @property({type: String}) variant: ObcSliderVariantType = 'no-value';
+  @property({type: Boolean, attribute: 'has-left-icon'}) hasLeftIcon = false;
+  @property({type: Boolean, attribute: 'has-right-icon'}) hasRightIcon = false;
 
   onInput(value: number) {
     this.value = value;
@@ -44,31 +55,44 @@ export class ObcSlider extends LitElement {
   override render() {
     const ratio = (this.value - this.min) / (this.max - this.min);
     return html`
-      <obc-icon-button @click=${this.onReduceClick} variant="flat">
-        <slot name="icon-left"></slot>
-      </obc-icon-button>
-      <div class="wrapper">
+      ${this.hasLeftIcon
+        ? html` <obc-icon-button @click=${this.onReduceClick} variant="flat">
+            <slot name="icon-left"></slot>
+          </obc-icon-button>`
+        : null}
+      <div class=${classMap({wrapper: true, [this.variant]: true})}>
         <div class="track"></div>
         <div
           class="interactive-track"
           style=${styleMap({'--ratio': ratio})}
         ></div>
-        <input
-          type="range"
-          min=${this.min}
-          max=${this.max}
-          step=${ifDefined(this.step)}
-          .value=${this.value.toString()}
-          class="slider"
-          @input=${(event: Event) => {
-            this.value = Number((event.target as HTMLInputElement).value);
-            this.dispatchEvent(new CustomEvent('value', {detail: this.value}));
-          }}
-        />
+        ${this.variant === ObcSliderVariant.NoInput
+          ? html`<div
+              class="passive-thumb"
+              style=${styleMap({'--ratio': ratio})}
+            ></div>`
+          : html`
+              <input
+                type="range"
+                min=${this.min}
+                max=${this.max}
+                step=${ifDefined(this.step)}
+                .value=${this.value.toString()}
+                class="slider"
+                @input=${(event: Event) => {
+                  this.value = Number((event.target as HTMLInputElement).value);
+                  this.dispatchEvent(
+                    new CustomEvent('value', {detail: this.value})
+                  );
+                }}
+              />
+            `}
       </div>
-      <obc-icon-button @click=${this.onIncreaseClick} variant="flat">
-        <slot name="icon-right"></slot>
-      </obc-icon-button>
+      ${this.hasRightIcon
+        ? html`<obc-icon-button @click=${this.onIncreaseClick} variant="flat">
+            <slot name="icon-right"></slot>
+          </obc-icon-button>`
+        : null}
     `;
   }
 

package/src/components/top-bar/top-bar.css

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 .wrapper {
   height: 48px;
   width: 100%;

package/src/components/top-bar/top-bar.ts

@@ -202,14 +202,16 @@ export class ObcTopBar extends LitElement {
                 <obi-01-apps></obi-01-apps>
               </obc-icon-button>`
             : null}
-          <obc-icon-button
-            class="left-more-button"
-            variant="flat"
-            @click=${this.leftMoreButtonClicked}
-            ?activated=${this.leftMoreButtonActivated}
-          >
-            <obi-01-more-vertical></obi-01-more-vertical>
-          </obc-icon-button>
+          ${!this.inactive
+            ? html`<obc-icon-button
+                class="left-more-button"
+                variant="flat"
+                @click=${this.leftMoreButtonClicked}
+                ?activated=${this.leftMoreButtonActivated}
+              >
+                <obi-01-more-vertical></obi-01-more-vertical>
+              </obc-icon-button>`
+            : null}
         </div>
       </nav>
     `;

package/src/palettes/variables.css

@@ -17,8 +17,9 @@
     --border-edge-color: rgba(0, 0, 0, .050);
     --border-solid-color: rgb(51, 51, 51);
     --border-icon-outline-color: rgba(0, 0, 0, .500);
+    --border-silhouette-color: rgb(255, 255, 255);
     --instrument-enhanced-primary-color: rgb(26, 45, 255);
-    --instrument-enhanced-secondary-color: rgb(46, 79, 138);
+    --instrument-enhanced-secondary-color: rgb(37, 76, 147);
     --instrument-enhanced-tertiary-color: rgba(46, 79, 138, .300);
     --instrument-regular-primary-color: rgb(13, 13, 13);
     --instrument-regular-secondary-color: rgb(89, 89, 89);
@@ -122,13 +123,13 @@
     --on-flat-active-color: rgb(13, 13, 13);
     --on-flat-neutral-color: rgba(0, 0, 0, .650);
     --on-flat-disabled-color: rgba(0, 0, 0, .300);
-    --selected-enabled-background-color: rgb(46, 79, 138);
+    --selected-enabled-background-color: rgb(37, 76, 147);
     --selected-enabled-border-color: rgba(0, 0, 0, .00);
-    --selected-hover-background-color: rgb(33, 57, 99);
+    --selected-hover-background-color: rgb(27, 55, 106);
     --selected-hover-border-color: rgba(0, 0, 0, .00);
-    --selected-pressed-background-color: rgb(20, 35, 61);
+    --selected-pressed-background-color: rgb(16, 34, 65);
     --selected-pressed-border-color: rgba(0, 0, 0, .00);
-    --selected-focused-background-color: rgb(46, 79, 138);
+    --selected-focused-background-color: rgb(37, 76, 147);
     --selected-focused-border-color: rgba(0, 110, 225, .300);
     --selected-disabled-background-color: rgba(0, 0, 0, .200);
     --selected-disabled-border-color: rgba(0, 0, 0, .00);
@@ -174,6 +175,19 @@
     --on-device-active-color: rgb(255, 255, 255);
     --on-device-neutral-color: rgba(0, 0, 0, .450);
     --on-device-disabled-color: rgb(179, 179, 179);
+    --notification-enabled-background-color: rgb(26, 45, 255);
+    --notification-enabled-border-color: rgba(0, 0, 0, .300);
+    --notification-hover-background-color: rgb(0, 19, 229);
+    --notification-hover-border-color: rgba(0, 0, 0, .300);
+    --notification-pressed-background-color: rgb(0, 15, 178);
+    --notification-pressed-border-color: rgba(0, 0, 0, .500);
+    --notification-focused-background-color: rgb(26, 45, 255);
+    --notification-focused-border-color: rgba(37, 76, 147, .500);
+    --notification-disabled-background-color: rgb(26, 45, 255);
+    --notification-disabled-border-color: rgba(0, 0, 0, .00);
+    --on-notification-active-color: rgb(255, 255, 255);
+    --on-notification-neutral-color: rgba(255, 255, 255, .600);
+    --on-notification-disabled-color: rgba(255, 255, 255, .300);
     --running-enabled-background-color: rgb(0, 138, 23);
     --running-enabled-border-color: rgba(0, 0, 0, .100);
     --running-hover-background-color: rgb(27, 111, 27);
@@ -318,7 +332,7 @@
     --icon-02-chevron-down: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="    M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="rgba(0, 0, 0, .650)"/></svg>');
 
   }
-  
+
   :root[data-obc-theme=day] {
     --element-active-color: rgb(26, 26, 26);
     --element-neutral-color: rgba(0, 0, 0, .590);
@@ -364,24 +378,20 @@
     --alert-warning-color: rgb(246, 148, 0);
     --alert-alarm-color: rgb(223, 27, 27);
     --alert-critical-alarm-color: rgb(229, 0, 229);
-    --alert-limit-primary-color: rgba(0, 0, 0, .100);
-    --alert-limit-secondary-color: rgba(0, 0, 0, .100);
+    --alert-limit-primary-color: rgba(0, 0, 0, .080);
+    --alert-limit-secondary-color: rgba(0, 0, 0, .080);
     --automation-device-primary-color: rgb(255, 255, 255);
     --automation-device-secondary-color: rgb(112, 112, 112);
     --automation-device-tertiary-color: rgb(0, 0, 0);
     --automation-device-primary-inverted-color: rgb(15, 15, 15);
     --automation-device-secondary-inverted-color: rgb(102, 102, 102);
     --automation-device-tertiary-inverted-color: rgb(128, 128, 128);
-    --automation-button-primary-color: rgb(255, 255, 255);
-    --automation-button-tertiary-color: rgba(0, 0, 0, .200);
-    --automation-button-primary-inverted-color: rgb(224, 224, 224);
-    --automation-button-tertiary-inverted-color: rgba(0, 0, 0, .100);
     --automation-pipe-primary-color: rgb(255, 255, 255);
-    --automation-pipe-secondary-color: rgba(0, 0, 0, .200);
-    --automation-pipe-tertiary-color: rgba(0, 0, 0, .590);
+    --automation-pipe-secondary-color: rgb(143, 143, 143);
+    --automation-pipe-tertiary-color: rgb(51, 51, 51);
     --automation-pipe-primary-inverted-color: rgb(224, 224, 224);
-    --automation-pipe-secondary-inverted-color: rgba(0, 0, 0, .100);
-    --automation-pipe-tertiary-inverted-color: rgba(0, 0, 0, .420);
+    --automation-pipe-secondary-inverted-color: rgb(179, 179, 179);
+    --automation-pipe-tertiary-inverted-color: rgb(143, 143, 143);
     --automation-pipe-overlay-color: rgba(0, 0, 0, .200);
     --automation-pipe-disabled-color: rgba(0, 0, 0, .100);
     --automation-acid-alkalis: rgb(231, 193, 244);
@@ -423,7 +433,7 @@
     --raised-disabled-border-color: rgba(0, 0, 0, .100);
     --on-raised-active-color: rgb(255, 255, 255);
     --on-raised-neutral-color: rgba(255, 255, 255, .700);
-    --on-raised-disabled-color: rgba(0, 0, 0, .200);
+    --on-raised-disabled-color: rgba(0, 0, 0, .300);
     --indent-enabled-background-color: rgba(0, 0, 0, .050);
     --indent-enabled-border-color: rgba(0, 0, 0, .050);
     --indent-hover-background-color: rgba(0, 0, 0, .100);
@@ -444,7 +454,7 @@
     --flat-pressed-background-color: rgba(0, 0, 0, .120);
     --flat-pressed-border-color: rgba(0, 0, 0, .00);
     --flat-focused-background-color: rgba(0, 0, 0, .00);
-    --flat-focused-border-color: rgba(0, 110, 225, .300);
+    --flat-focused-border-color: rgb(153, 206, 255);
     --flat-disabled-background-color: rgba(0, 0, 0, .00);
     --flat-disabled-border-color: rgba(0, 0, 0, .00);
     --flat-activated-background-color: rgba(0, 0, 0, .050);
@@ -593,17 +603,20 @@
     --font-ui-overline-size: 12px;
     --font-ui-overline-weight: semibold;
     --font-ui-overline-line-height: 24px;
+    --font-ui-overline-new-size: 16px;
+    --font-ui-overline-new-weight: semibold;
+    --font-ui-overline-new-line-height: 24px;
     --font-ui-button-size: 16px;
-    --font-ui-button-weight: semibold;
+    --font-ui-button-weight: Medium;
     --font-ui-button-line-height: 24px;
     --font-ui-body-active-size: 16px;
-    --font-ui-body-active-weight: bold;
+    --font-ui-body-active-weight: semibold;
     --font-ui-body-active-line-height: 24px;
     --font-ui-body-size: 16px;
     --font-ui-body-weight: regular;
     --font-ui-body-line-height: 24px;
     --font-ui-label-active-size: 12px;
-    --font-ui-label-active-weight: bold;
+    --font-ui-label-active-weight: semibold;
     --font-ui-label-active-line-height: 16px;
     --font-ui-label-size: 12px;
     --font-ui-label-weight: regular;
@@ -617,6 +630,15 @@
     --font-instrument-label-l-size: 64px;
     --font-instrument-label-l-weight: regular;
     --font-instrument-label-l-line-height: 80px;
+    --font-instrument-value-regular-size: 16px;
+    --font-instrument-value-regular-weight: Medium;
+    --font-instrument-value-regular-line-height: 24px;
+    --font-instrument-value-enhanced-size: 36px;
+    --font-instrument-value-enhanced-weight: Medium;
+    --font-instrument-value-enhanced-line-height: 48px;
+    --font-instrument-value-double-size: 72px;
+    --font-instrument-value-double-weight: Medium;
+    --font-instrument-value-double-line-height: 96px;
     --font-instrument-value-s-size: 16px;
     --font-instrument-value-s-weight: semibold;
     --font-instrument-value-s-line-height: 24px;
@@ -658,12 +680,11 @@
     --shadow-floating: 0px 4px 16px 0px rgba(0, 0, 0, .300);
     --shadow-overlay: 0px 8px 32px 0px rgba(0, 0, 0, .400);
     --shadow-focused: 0px 0px 0px 4px rgb(0, 59, 148);
-
     --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgba(0, 0, 0, 0.55)"/></svg>');
     --icon-02-chevron-down: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="rgba(0, 0, 0, 0.55)"/></svg>');
 
   }
-  
+
   :root[data-obc-theme=dusk] {
     --element-active-color: rgb(242, 242, 242);
     --element-neutral-color: rgba(255, 255, 255, .550);
@@ -684,7 +705,7 @@
     --border-silhouette-color: rgb(0, 0, 0);
     --border-icon-outline-color: rgba(0, 0, 0, .500);
     --border-solid-color: rgb(51, 51, 51);
-    --instrument-enhanced-primary-color: rgb(129, 223, 254);
+    --instrument-enhanced-primary-color: rgb(94, 213, 253);
     --instrument-enhanced-secondary-color: rgb(86, 150, 199);
     --instrument-enhanced-tertiary-color: rgba(92, 139, 193, .200);
     --instrument-regular-primary-color: rgb(230, 230, 230);
@@ -841,6 +862,19 @@
     --on-device-active-color: rgb(255, 255, 255);
     --on-device-neutral-color: rgb(123, 123, 123);
     --on-device-disabled-color: rgb(84, 84, 84);
+    --notification-enabled-background-color: rgb(94, 213, 253);
+    --notification-enabled-border-color: rgba(0, 0, 0, .500);
+    --notification-hover-background-color: rgb(154, 229, 254);
+    --notification-hover-border-color: rgba(0, 0, 0, .100);
+    --notification-pressed-background-color: rgb(17, 163, 212);
+    --notification-pressed-border-color: rgba(0, 0, 0, .200);
+    --notification-focused-background-color: rgb(94, 213, 253);
+    --notification-focused-border-color: rgb(247, 247, 247);
+    --notification-disabled-background-color: rgb(94, 213, 253);
+    --notification-disabled-border-color: rgba(0, 0, 0, .00);
+    --on-notification-active-color: rgb(0, 0, 0);
+    --on-notification-neutral-color: rgba(0, 0, 0, .600);
+    --on-notification-disabled-color: rgba(0, 0, 0, .200);
     --running-enabled-background-color: rgb(19, 138, 0);
     --running-enabled-border-color: rgba(0, 0, 0, .100);
     --running-hover-background-color: rgb(23, 168, 0);
@@ -906,19 +940,6 @@
     --on-critical-alarm-active-color: rgb(255, 255, 255);
     --on-critical-alarm-neutral-color: rgba(255, 255, 255, .700);
     --on-critical-alarm-disabled-color: rgba(255, 255, 255, .300);
-    --notification-enabled-background-color: rgb(129, 212, 254);
-    --notification-enabled-border-color: rgba(0, 0, 0, .500);
-    --notification-hover-background-color: rgb(90, 191, 242);
-    --notification-hover-border-color: rgba(0, 0, 0, .100);
-    --notification-pressed-background-color: rgb(60, 167, 221);
-    --notification-pressed-border-color: rgba(0, 0, 0, .200);
-    --notification-focused-background-color: rgb(129, 212, 254);
-    --notification-focused-border-color: rgb(247, 247, 247);
-    --notification-disabled-background-color: rgb(129, 212, 254);
-    --notification-disabled-border-color: rgba(0, 0, 0, .00);
-    --on-notification-active-color: rgb(0, 0, 0);
-    --on-notification-neutral-color: rgba(0, 0, 0, .600);
-    --on-notification-disabled-color: rgba(0, 0, 0, .200);
     --font-ui-title-size: 24px;
     --font-ui-title-weight: bold;
     --font-ui-title-line-height: 32px;
@@ -996,7 +1017,7 @@
     --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgba(255, 255, 255, .550)"/></svg>');
     --icon-02-chevron-down: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="rgba(255, 255, 255, .550)"/></svg>');
   }
-  
+
 
   :root[data-obc-theme=night] {
     --element-active-color: rgb(71, 71, 0);
@@ -1254,7 +1275,7 @@
     --on-critical-alarm-neutral-color: rgba(0, 0, 0, .700);
     --on-critical-alarm-disabled-color: rgba(0, 0, 0, .300);
     --font-ui-title-size: 24px;
-    --font-ui-title-weight: Bold;
+    --font-ui-title-weight: bold;
     --font-ui-title-line-height: 32px;
     --font-ui-subtitle-size: 24px;
     --font-ui-subtitle-weight: regular;
@@ -1266,13 +1287,13 @@
     --font-ui-button-weight: semibold;
     --font-ui-button-line-height: 24px;
     --font-ui-body-active-size: 16px;
-    --font-ui-body-active-weight: Bold;
+    --font-ui-body-active-weight: bold;
     --font-ui-body-active-line-height: 24px;
     --font-ui-body-size: 16px;
     --font-ui-body-weight: regular;
     --font-ui-body-line-height: 24px;
     --font-ui-label-active-size: 12px;
-    --font-ui-label-active-weight: Bold;
+    --font-ui-label-active-weight: bold;
     --font-ui-label-active-line-height: 16px;
     --font-ui-label-size: 12px;
     --font-ui-label-weight: regular;
@@ -1329,5 +1350,5 @@
 
     --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgb(51, 51, 0)"/></svg>');
     --icon-02-chevron-down: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="rgb(51, 51, 0)"/></svg>');
-   
-}
+
+  }

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules