@energinet/watt 0.0.1

package/core/styles/_table.scss

@@ -0,0 +1,89 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./typography/typography.import" as typography;
+
+.watt-table-row--highlighted {
+  background-color: var(--watt-color-secondary-light);
+}
+
+mat-table,
+.mat-table {
+  .mat-header-row {
+    min-height: 34px;
+  }
+
+  .mat-header-cell {
+    background-color: var(--watt-color-primary-light);
+    @include typography.watt-label;
+  }
+
+  mat-row.clickable {
+    cursor: pointer;
+  }
+
+  .multi-line-cell {
+    padding: 0.5rem 0;
+  }
+}
+
+mat-paginator:not(.watt-paginator) {
+  &.mat-paginator,
+  .mat-paginator-page-size .mat-select-trigger {
+    @include typography.watt-text-s;
+  }
+
+  & .mat-paginator-container {
+    padding: var(--watt-space-s) 0;
+  }
+
+  & .mat-paginator-page-size-label {
+    margin: 0 var(--watt-space-m);
+  }
+
+  & .mat-icon-button {
+    color: var(--watt-color-primary);
+    line-height: 1;
+
+    // Decrease spacing between arrow buttons
+    width: 36px;
+    height: 36px;
+  }
+
+  & .mat-icon-button.mat-button-disabled.mat-button-disabled {
+    color: var(--watt-color-neutral-grey-500);
+  }
+
+  & .mat-paginator-range-label {
+    margin: 0 var(--watt-space-l);
+  }
+
+  mat-form-field {
+    &.mat-paginator-page-size-select {
+      width: 80px; // Magic width
+      margin: 0;
+      padding: 0 var(--watt-space-s);
+      border: 1px solid var(--watt-color-neutral-grey-400);
+      border-radius: 3px;
+    }
+
+    & .mat-form-field-underline {
+      display: none;
+    }
+
+    & .mat-form-field-flex {
+      height: 42px; // Standard field height minus 1px border
+      align-items: center;
+    }
+  }
+}

package/core/styles/_tokens.scss

@@ -0,0 +1,134 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/**
+ * Do not edit directly
+ * Generated on Thu, 23 Mar 2023 09:53:46 GMT
+ */
+
+:root {
+  --bg-button-high-emphasis: #00847c;
+  --bg-button-medium-emphasis: #ffffff;
+  --bg-badge-success: #dfebda;
+  --bg-card: #ffffff;
+  --bg-tab: #ffffff;
+  --bg-table: #ffffff;
+  --bg-table-column-header: #dfebda;
+  --bg-default: #ffffff;
+  --bg-cta: #00847c;
+  --bg-success: #dfebda;
+  --fg-button-high-emphasis: #ffffff;
+  --fg-button-medium-emphasis: #00847c;
+  --fg-badge-success: #005d5c;
+  --fg-tab-enabled: #0000009e;
+  --fg-tab-active: #00847c;
+  --fg-table: #000000de;
+  --fg-table-column-header: #000000de;
+  --fg-default: #000000de;
+  --fg-muted: #0000009e;
+  --fg-primary: #00847c;
+  --border-radius-0: 0px;
+  --border-radius-50: 2px;
+  --border-radius-100: 4px;
+  --border-radius-200: 8px;
+  --border-radius-button: 4px;
+  --border-radius-badge: 4px;
+  --border-radius-card: 4px;
+  --spacing-0: 0px;
+  --spacing-50: 4px;
+  --spacing-100: 8px;
+  --spacing-200: 16px;
+  --spacing-300: 24px;
+  --spacing-400: 32px;
+  --spacing-500: 40px;
+  --spacing-button-padding: 16px;
+  --spacing-table-padding: 8px;
+  --spacing-badge-padding: 4px;
+  --box-shadow-300-x: 0;
+  --box-shadow-300-y: 1;
+  --box-shadow-300-blur: 6;
+  --box-shadow-300-spread: 0;
+  --box-shadow-300-color: #0b3c5d26;
+  --box-shadow-300-type: dropShadow;
+  --box-shadow-card-x: 0;
+  --box-shadow-card-y: 1;
+  --box-shadow-card-blur: 6;
+  --box-shadow-card-spread: 0;
+  --box-shadow-card-color: #0b3c5d26;
+  --box-shadow-card-type: dropShadow;
+  --size-300: 24rem;
+  --size-500: 56rem;
+  --size-table-cell: 56rem;
+  --size-tab: 56rem;
+  --size-button: 44rem;
+  --size-badge: 24rem;
+  --border-button-medium-emphasis-color: #00847c;
+  --border-button-medium-emphasis-width: 1px;
+  --border-button-medium-emphasis-style: solid;
+  --border-table-cell-color: #e0e0e0;
+  --border-table-cell-width: 1px;
+  --border-table-cell-style: solid;
+  --border-tab-active-color: #00847c;
+  --border-tab-active-width: 3px;
+  --border-tab-active-style: solid;
+  --typography-h1-font-family: Open Sans;
+  --typography-h1-font-weight: 600;
+  --typography-h1-font-size: 28px;
+  --typography-h3-font-family: Open Sans;
+  --typography-h3-font-weight: 600;
+  --typography-h3-font-size: 20px;
+  --typography-button-font-family: Open Sans;
+  --typography-button-font-weight: 600;
+  --typography-button-font-size: 16px;
+  --typography-label-font-family: Open Sans;
+  --typography-label-font-weight: 600;
+  --typography-label-font-size: 14px;
+  --typography-label-text-case: uppercase;
+  --typography-body-font-family: Open Sans;
+  --typography-body-font-weight: 400;
+  --typography-body-font-size: 14px;
+  --typography-body-text-case: As typed;
+  --sizing-interactive-element: 44px;
+  --color-primary-100: #ebf5f5;
+  --color-primary-300: #b2d0d2;
+  --color-primary-500: #00847c;
+  --color-primary-700: #005d5c;
+  --color-primary-900: #02525e;
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-secondary-500: #f8ad3c;
+  --color-secondary-700: #ee9331;
+  --color-green-200: #dfebda;
+  --color-green-500: #7fb069;
+  --color-blue-500: #0b3c5d;
+  --color-neutral-300: #e0e0e0;
+  --font-family-sans-serif: Open Sans;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-size-100: 12px;
+  --font-size-200: 14px;
+  --font-size-300: 16px;
+  --font-size-400: 20px;
+  --font-size-500: 24px;
+  --font-size-600: 28px;
+  --border-width-none: 0px;
+  --border-width-xs: 1px;
+  --border-width-md: 3px;
+  --opacity-100: 87%;
+  --opacity-200: 62%;
+  --text-case-uppercase: uppercase;
+  --text-case-none: As typed;
+  --token-set-order-0: core;
+  --token-set-order-1: semantic;
+  --token-set-order-2: component;
+}

package/core/styles/_tooltip.scss

@@ -0,0 +1,64 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./typography/typography.import" as typography;
+@use "./spacing/spacing.import" as space;
+
+$arrow-size: 6px; // magic number by designer
+
+.mat-tooltip-panel .mat-tooltip {
+  @include typography.watt-text-s;
+  overflow: visible;
+  margin: var(--watt-space-m);
+  background-color: var(--watt-color-primary-dark);
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 0;
+    border: $arrow-size solid transparent;
+  }
+
+  &.mat-tooltip-handset {
+    @include space.inset-squish-s;
+  }
+}
+
+.mat-tooltip-panel-below .mat-tooltip::before {
+  bottom: 100%;
+  left: calc(50% - $arrow-size);
+  border-top-width: 0;
+  border-bottom-color: var(--watt-color-primary-dark);
+}
+
+.mat-tooltip-panel-above .mat-tooltip::before {
+  top: 100%;
+  left: calc(50% - $arrow-size);
+  border-bottom-width: 0;
+  border-top-color: var(--watt-color-primary-dark);
+}
+
+.mat-tooltip-panel-left .mat-tooltip::before {
+  left: 100%;
+  top: calc(50% - $arrow-size);
+  border-right-width: 0;
+  border-left-color: var(--watt-color-primary-dark);
+}
+
+.mat-tooltip-panel-right .mat-tooltip::before {
+  right: 100%;
+  top: calc(50% - $arrow-size);
+  border-left-width: 0;
+  border-right-color: var(--watt-color-primary-dark);
+}

package/core/styles/_variables.scss

@@ -0,0 +1,106 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+:root {
+  // Primary
+  --watt-color-primary: #00898a;
+  --watt-color-primary-contrast: var(--watt-color-neutral-white);
+  --watt-color-primary-light: #b2d0d2;
+  --watt-color-primary-light-contrast: var(--watt-color-neutral-black);
+  --watt-color-primary-dark: #005d5c;
+  --watt-color-primary-dark-contrast: var(--watt-color-neutral-white);
+  --watt-color-primary-darker: #02525e;
+  --watt-color-primary-darker-contrast: var(--watt-color-neutral-white);
+  --watt-color-primary-ultralight: #ebf5f5;
+  --watt-color-primary-ultralight-contrast: var(--watt-color-neutral-black);
+  --mitid-color: #0061e9;
+  --mitid-color-hover: #176ee9;
+  // Secondary
+  --watt-color-secondary: #f8ad3c;
+  --watt-color-secondary-dark: #ee9331;
+  --watt-color-secondary-light: #f9dba7;
+  --watt-color-secondary-ultralight: #fff4de;
+  --watt-color-secondary-ultralight-contrast: var(--watt-color-neutral-black);
+  // Data Visualization
+  --watt-color-data-1: #9fcd91;
+  --watt-color-data-2: #a0c1c2;
+  --watt-color-data-3: #00a58d;
+  // Neutrals
+  --watt-color-neutral-black: #000;
+  --watt-color-neutral-black-contrast: var(--watt-color-neutral-white);
+  --watt-color-neutral-white: #fff;
+  --watt-color-neutral-white-contrast: var(--watt-color-neutral-black);
+  --watt-color-neutral-grey-50: #fafafa;
+  --watt-color-neutral-grey-50-contrast: var(--watt-color-neutral-black);
+  --watt-color-neutral-grey-100: #f5f5f5;
+  --watt-color-neutral-grey-100-contrast: var(--watt-color-neutral-black);
+  --watt-color-neutral-grey-200: #eeeeee;
+  --watt-color-neutral-grey-200-contrast: var(--watt-color-neutral-black);
+  --watt-color-neutral-grey-300: #e0e0e0;
+  --watt-color-neutral-grey-300-contrast: var(--watt-color-neutral-black);
+  --watt-color-neutral-grey-400: #bdbdbd;
+  --watt-color-neutral-grey400--contrast: var(--watt-color-neutral-black);
+  --watt-color-neutral-grey-500: #9e9e9e;
+  --watt-color-neutral-grey-500-contrast: var(--watt-color-neutral-black);
+  --watt-color-neutral-grey-600: #757575;
+  --watt-color-neutral-grey-600-contrast: var(--watt-color-neutral-white);
+  --watt-color-neutral-grey-700: #616161;
+  --watt-color-neutral-grey-700-contrast: var(--watt-color-neutral-white);
+  --watt-color-neutral-grey-800: #424242;
+  --watt-color-neutral-grey-800-contrast: var(--watt-color-neutral-white);
+  --watt-color-neutral-grey-900: #212121;
+  --watt-color-neutral-grey-900-contrast: var(--watt-color-neutral-white);
+  // States
+  --watt-color-state-danger: #d12923;
+  --watt-color-state-danger-contrast: var(--watt-color-neutral-white);
+  --watt-color-state-danger-light: #f4c9c8;
+  --watt-color-state-danger-light-contrast: var(--watt-color-neutral-black);
+  --watt-color-state-warning: var(--watt-color-secondary-dark);
+  --watt-color-state-warning-contrast: var(--watt-color-neutral-black);
+  --watt-color-state-warning-light: #fef5d5;
+  --watt-color-state-warning-light-contrast: var(--watt-color-neutral-black);
+  --watt-color-state-success: #7fb069;
+  --watt-color-state-success-contrast: var(--watt-color-neutral-black);
+  --watt-color-state-success-light: #dfebda;
+  --watt-color-state-success-light-contrast: var(--watt-color-neutral-black);
+  --watt-color-state-info: #00a6bc;
+  --watt-color-state-info-contrast: var(--watt-color-neutral-black);
+  --watt-color-state-info-light: #d6f1f4;
+  --watt-color-state-info-light-contrast: var(--watt-color-neutral-black);
+  // Typography
+  --watt-typography-headline-color: var(--watt-on-light-high-emphasis);
+  --watt-typography-text-color: var(--watt-on-light-high-emphasis);
+  --watt-typography-button-color: var(--watt-color-primary);
+  --watt-typography-label-color: var(--watt-on-light-high-emphasis);
+  --watt-typography-link-color: var(--watt-color-primary-dark);
+  // Text Color Emphasis
+  --watt-on-light-high-emphasis: rgba(0, 0, 0, 0.87);
+  --watt-on-light-medium-emphasis: rgba(0, 0, 0, 0.62);
+  --watt-on-light-low-emphasis: rgba(0, 0, 0, 0.38);
+  --watt-on-dark-high-emphasis: rgba(255, 255, 255, 1);
+  --watt-on-dark-medium-emphasis: rgba(255, 255, 255, 0.62);
+  --watt-on-dark-low-emphasis: rgba(255, 255, 255, 0.38);
+  // Surface overlays
+  --watt-on-light-surface-overlay: rgba(33, 33, 33, 0.08);
+
+  // ripple
+  // based on primary color
+  --watt-ripple-color: rgba(0, 137, 138, 0.1);
+
+  // shadows
+  --watt-bottom-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
+
+  // Components
+  --watt-sidenav-background-color: #09505d;
+  --watt-nav-list-hover-background-color: #07404a;
+}

package/core/styles/_vater.scss

@@ -0,0 +1,69 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@layer vater {
+  .vater-fill-horizontal {
+    display: block;
+    width: 100%;
+  }
+
+  .vater-fill-vertical {
+    display: block;
+    height: 100%;
+  }
+
+  .vater-fill-both {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .vater-center {
+    margin: auto;
+  }
+
+  .vater-inset-0 {
+    position: absolute;
+    inset: 0;
+  }
+
+  .vater-inset-xs {
+    position: absolute;
+    inset: var(--watt-space-xs);
+  }
+
+  .vater-inset-s {
+    position: absolute;
+    inset: var(--watt-space-s);
+  }
+
+  .vater-inset-m {
+    position: absolute;
+    inset: var(--watt-space-m);
+  }
+
+  .vater-inset-ml {
+    position: absolute;
+    inset: var(--watt-space-ml);
+  }
+
+  .vater-inset-l {
+    position: absolute;
+    inset: var(--watt-space-l);
+  }
+
+  .vater-inset-xl {
+    position: absolute;
+    inset: var(--watt-space-xl);
+  }
+}

package/core/styles/spacing/+storybook/storybook-spacing-overview.component.scss

@@ -0,0 +1,25 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+:host {
+  display: block;
+}
+
+.visual-example {
+  background-color: var(--watt-color-primary);
+  height: 1.5rem;
+}
+
+.visual-reference {
+  width: 50%;
+}

package/core/styles/spacing/_baseline.scss

@@ -0,0 +1,23 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./variables" as spaceVariables;
+
+:root {
+  --watt-space-xs: #{spaceVariables.$watt-space-baseline};
+  --watt-space-s: #{spaceVariables.$watt-space-baseline * 2};
+  --watt-space-m: #{spaceVariables.$watt-space-baseline * 4};
+  --watt-space-ml: #{spaceVariables.$watt-space-baseline * 6};
+  --watt-space-l: #{spaceVariables.$watt-space-baseline * 8};
+  --watt-space-xl: #{spaceVariables.$watt-space-baseline * 16};
+}

package/core/styles/spacing/_inline.scss

@@ -0,0 +1,38 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./spacing.import" as space;
+
+.watt-space-inline-xxs {
+  @include space.inline-xxs;
+}
+
+.watt-space-inline-xs {
+  @include space.inline-xs;
+}
+
+.watt-space-inline-s {
+  @include space.inline-s;
+}
+
+.watt-space-inline-m {
+  @include space.inline-m;
+}
+
+.watt-space-inline-l {
+  @include space.inline-l;
+}
+
+.watt-space-inline-xl {
+  @include space.inline-xl;
+}

package/core/styles/spacing/_inset.scss

@@ -0,0 +1,61 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./spacing.import" as space;
+
+// Inset
+.watt-space-inset-xs {
+  @include space.inset-xs;
+}
+
+.watt-space-inset-s {
+  @include space.inset-s;
+}
+
+.watt-space-inset-m {
+  @include space.inset-m;
+}
+
+.watt-space-inset-l {
+  @include space.inset-l;
+}
+
+.watt-space-inset-xl {
+  @include space.inset-xl;
+}
+
+// Inset Squish
+.watt-space-inset-squish-xs {
+  @include space.inset-squish-xs;
+}
+
+.watt-space-inset-squish-s {
+  @include space.inset-squish-s;
+}
+
+.watt-space-inset-squish-m {
+  @include space.inset-squish-m;
+}
+
+.watt-space-inset-squish-l {
+  @include space.inset-squish-l;
+}
+
+// Inset Stretch
+.watt-space-inset-stretch-s {
+  @include space.inset-stretch-s;
+}
+
+.watt-space-inset-stretch-m {
+  @include space.inset-stretch-m;
+}