@dnb/eufemia 9.48.0-beta.1 → 10.0.0-beta.2

package/es/style/themes/theme-sbanken/properties.scss

@@ -0,0 +1,126 @@
+/*
+ * CSS Properties
+ *
+ */
+
+@mixin getDefaultProperties() {
+  // Typography Family
+  --sb-font-family-default: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  --sb-font-family-headings: 'MaisonNeueHeadings', 'Roboto', 'Helvetica',
+    'Arial', sans-serif;
+
+  // Typography Weights
+  // TODO: Do we need 3 different "normals"? Which to use when?
+  --sb-font-weight-default: normal;
+  --sb-font-weight-basis: normal;
+  --sb-font-weight-regular: normal;
+  --sb-font-weight-medium: 500;
+  --sb-font-weight-bold: 700;
+
+  // Typography Sizes
+  --sb-font-size-x-small: 0.75rem;
+  --sb-font-size-small: 0.875rem;
+  --sb-font-size-basis: 1rem;
+  --sb-font-size-basis--em: 1em;
+  --sb-font-size-lead: 1.25rem;
+  --sb-font-size-large: 1.625rem;
+  --sb-font-size-x-large: 2.125rem;
+  --sb-font-size-xx-large: 3rem;
+
+  // Typography Line heights
+  --sb-line-height-x-small: 1.125rem;
+  --sb-line-height-small: 1.25rem;
+  --sb-line-height-basis: 1.5rem;
+  --sb-line-height-basis--em: 1.5em; // 1.5*16 = 24px
+  --sb-line-height-lead: 1.75rem;
+  --sb-line-height-large: 2rem;
+  --sb-line-height-x-large: 2.5rem;
+  --sb-line-height-xx-large: 3.5rem;
+
+  // UX colors
+  --sb-color-black: #000;
+  --sb-color-text: #18172a;
+  --sb-color-gray-dark-3: #3a3970;
+  --sb-color-gray-dark-3-neutral: #3e3e4a;
+  --sb-color-gray-dark-2: #62628e;
+  --sb-color-gray-dark-2-neutral: #656472;
+  --sb-color-gray-dark: #9292b0;
+  --sb-color-gray-dark-neutral: #9494a3;
+  --sb-color-gray: #bbbbce;
+  --sb-color-gray-neutral: #bdbdc6;
+  --sb-color-gray-light: #d9d9e4;
+  --sb-color-gray-light-2: #ebebf2;
+  --sb-color-gray-light-3: #f9f9fd;
+
+  // Primary colors
+  --sb-color-purple: #262342;
+  --sb-color-purple-alternative: #222163;
+  --sb-color-green: #92eecd;
+  --sb-color-white: #fff;
+
+  // Secondary colors
+  --sb-color-red: #d8134b;
+  --sb-color-magenta: #ff3c64;
+  --sb-color-orange: #fe5038;
+  --sb-color-yellow-dark: #f7bf16;
+  --sb-color-yellow: #ffef57;
+  --sb-color-green-dark-3: #00785b;
+  --sb-color-green-dark-2: #009669;
+  --sb-color-violet: #4e08bc;
+  --sb-color-violet-light: #7129e2;
+  --sb-color-blue-dark-2: #044ccc;
+  --sb-color-blue-dark: #005cff;
+  --sb-color-blue: #008eff;
+
+  // Tertiary colors
+  --sb-color-orange-light: #ff817b;
+  --sb-color-orange-light-2: #ffd7d5;
+  --sb-color-orange-light-3: #fff0ef;
+  --sb-color-magenta-light: #ffb6d2;
+  --sb-color-magenta-light-2: #ffdbe9;
+  --sb-color-magenta-light-3: #fff5f9;
+  --sb-color-yellow-light: #fff489;
+  --sb-color-yellow-light-2: #fff9c4;
+  --sb-color-yellow-light-3: #fffce5;
+  --sb-color-green-dark: #64d7b4;
+  --sb-color-green-light: #c8f6e5;
+  --sb-color-green-light-2: #e5fff4;
+  --sb-color-violet-light-2: #d2bbff;
+  --sb-color-violet-light-3: #ebe1ff;
+  --sb-color-violet-light-4: #f7f3ff;
+  --sb-color-blue-light: #61b9ff;
+  --sb-color-blue-light-2: #bfe3ff;
+  --sb-color-blue-light-3: #ebf6ff;
+
+  // Spacing
+  --sb-spacing-x-small: 0.5rem;
+  --sb-spacing-small: 1rem;
+  --sb-spacing-medium: 1.5rem;
+  --sb-spacing-large: 2rem;
+  --sb-spacing-x-large: 3rem;
+  --sb-spacing-xx-large: 3.5rem;
+
+  // Layout
+  --sb-layout-small: 40em; // 640
+  --sb-layout-medium: 60em; // 960
+  --sb-layout-large: 72em; // 1152
+  --sb-layout-x-large: 80em; // 1280 (not documented yet)
+  --sb-layout-xx-large: 90em; // 1440 (not documented yet)
+
+  // Shadow
+  --sb-shadow-small: 0 2px 4px rbga(38, 35, 66, 0.12);
+  --sb-shadow-medium: 0 5px 20px rbga(38, 35, 66, 0.1);
+  --sb-shadow-large: 0 5px 20px rbga(38, 35, 66, 0.2);
+  --sb-shadow-hover: 0 20px 40px rbga(38, 35, 66, 0.2);
+
+  // Easing
+  --sb-easing-default: cubic-bezier(0.42, 0, 0, 1);
+
+  @if mixin-exists('propertiesCustomisation') {
+    @include propertiesCustomisation();
+  }
+}
+
+:root {
+  @include getDefaultProperties();
+}

package/es/style/themes/theme-ui/dnb-theme-ui.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Main UI Theme
+ * DNB Eufemia UI Theme
  *
  */
 /*
@@ -93,6 +93,65 @@
   --easing-default: cubic-bezier(0.42, 0, 0, 1);
 }
 
+/*
+ * Typography
+ *
+ * The font-family properties are defined in the properties.scss file, like:
+ * --font-family-default:
+ *
+ */
+.dnb-typo-regular {
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-style: normal;
+}
+
+.dnb-typo-medium {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-medium);
+  font-style: normal;
+}
+
+.dnb-typo-bold {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-bold);
+  font-style: normal;
+}
+
+.dnb-typo-mono-regular {
+  font-family: var(--font-family-monospace);
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: DNB;
+  src: url("../../../assets/fonts/dnb/DNB-Regular.woff2") format("woff2"), url("../../../assets/fonts/dnb/DNB-Regular.woff") format("woff"), url("../../../assets/fonts/dnb/DNB-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: fallback;
+}
+@font-face {
+  font-family: DNB;
+  src: url("../../../assets/fonts/dnb/DNB-Medium.woff2") format("woff2"), url("../../../assets/fonts/dnb/DNB-Medium.woff") format("woff"), url("../../../assets/fonts/dnb/DNB-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: fallback;
+}
+@font-face {
+  font-family: DNB;
+  src: url("../../../assets/fonts/dnb/DNB-Bold.woff2") format("woff2"), url("../../../assets/fonts/dnb/DNB-Bold.woff") format("woff"), url("../../../assets/fonts/dnb/DNB-Bold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: fallback;
+}
+@font-face {
+  font-family: DNBMono;
+  src: url("../../../assets/fonts/dnb/DNBMono-Regular.woff2") format("woff2"), url("../../../assets/fonts/dnb/DNBMono-Regular.woff") format("woff"), url("../../../assets/fonts/dnb/DNBMono-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: fallback;
+}
 /*
  * Import all Elements
  *
@@ -2556,19 +2615,13 @@ html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-b
 .dnb-pagination__indicator__inner {
   animation: show-page 300ms ease-out forwards;
 }
-.dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):hover, .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):hover {
+.dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]), .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]) {
   background-color: var(--color-emerald-green);
   color: var(--color-mint-green);
 }
-.dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus {
+html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus {
   color: var(--color-emerald-green);
   background-color: var(--color-mint-green);
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus {
-  --border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
-  border-color: transparent;
 }
 
 .dnb-pagination__dots {
@@ -3455,10 +3508,9 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before {
   background-color: var(--color-white);
   overflow-y: auto;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-sea-green) transparent;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
 }
 .dnb-textarea__textarea ::selection {
   background-color: var(--color-mint-green);
@@ -3470,20 +3522,21 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 @supports not (scrollbar-color: auto) {
   .dnb-textarea__textarea::-webkit-scrollbar {
-    background-color: var(--color-black-8);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
   }
   .dnb-textarea__textarea::-webkit-scrollbar:vertical {
-    width: 0.5rem;
+    width: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-textarea__textarea::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
+    height: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-textarea__textarea::-webkit-scrollbar-thumb {
-    background-color: var(--color-sea-green);
-    border-radius: 0.5rem;
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
   }
   .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-emerald-green);
+    background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
 .dnb-textarea__placeholder {
@@ -4155,4 +4208,11 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 */
 /*
  * Utilities
- */
+ */
+:root {
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
+}