@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/styles/base/globals.scss

@@ -1,129 +1,158 @@
 @use "../tokens/base";
 @use "../tokens/space";
+@use "../tokens/color";
+
+@layer base {
+  // Consider to add more conditions for light and dark themes
+  :root,
+  .is-light,
+  .bg-white,
+  #root.is-light,
+  #root-modals.is-light,
+  #root-tooltips.is-light,
+  #root-dropdowns.is-light {
+    @each $name, $value in color.$colors-light {
+      --color-#{$name}: #{$value};
+    }
+    color: var(--color-text-default);
+  }
 
-html {
-  font-size: base.$font-size;
-}
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  text-size-adjust: 100%;
-  -webkit-font-smoothing: initial;
-}
-
-body {
-  position: relative;
-  background-color: base.$background;
-  font-family: #{base.$font-family};
-  color: base.$text-color;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-*::after {
-  box-sizing: border-box;
-}
+  .is-dark,
+  .bg-black,
+  #root.is-dark,
+  #root-modals.is-dark,
+  #root-tooltips.is-dark,
+  #root-dropdowns.is-dark {
+    @each $name, $value in color.$colors-dark {
+      --color-#{$name}: #{$value};
+    }
+    color: var(--color-text-default);
+  }
 
-*::before {
-  box-sizing: border-box;
-}
+  html {
+    font-size: base.$font-size;
+  }
 
-::selection {
-  background-color: base.$selection-background;
-  color: base.$text-color;
-}
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    text-size-adjust: 100%;
+    -webkit-font-smoothing: initial;
+  }
 
-iframe {
-  border: 0;
-}
+  body {
+    position: relative;
+    background-color: base.$background;
+    font-family: #{base.$font-family};
+    color: base.$text-color;
+  }
 
-a[href],
-area[href],
-input,
-select,
-textarea,
-button,
-[type="button"],
-iframe,
-[tabindex]:not([tabindex="-1"]),
-[contentEditable="true"] {
-  @include base.focusring;
-}
+  * {
+    box-sizing: border-box;
+  }
 
-[tabindex="-1"]:focus {
-  outline: none;
-}
+  *::after {
+    box-sizing: border-box;
+  }
 
-[type="button"]:not(:disabled),
-[type="reset"]:not(:disabled),
-[type="submit"]:not(:disabled),
-button:not(:disabled) {
-  cursor: pointer;
-}
+  *::before {
+    box-sizing: border-box;
+  }
 
-a {
-  text-decoration: none;
-}
+  ::selection {
+    background-color: base.$selection-background;
+    color: base.$text-color;
+  }
 
-// stylelint-disable-next-line no-descending-specificity
-button,
-[role="button"] {
-  border: 0 solid transparent;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  overflow: visible;
-  background: transparent;
+  iframe {
+    border: 0;
+  }
 
-  /* inherit font & color from ancestor */
-  color: inherit;
-  font: inherit;
+  a[href],
+  area[href],
+  input,
+  select,
+  textarea,
+  button,
+  [type="button"],
+  iframe,
+  [tabindex]:not([tabindex="-1"]),
+  [contentEditable="true"] {
+    @include base.focusring;
+  }
 
-  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-  line-height: normal;
+  [tabindex="-1"]:focus {
+    outline: none;
+  }
 
-  /* Corrects font smoothing for webkit */
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
+  [type="button"]:not(:disabled),
+  [type="reset"]:not(:disabled),
+  [type="submit"]:not(:disabled),
+  button:not(:disabled) {
+    cursor: pointer;
+  }
 
-  /* Corrects inability to style clickable `input` types in iOS */
-  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
-  appearance: none;
+  a {
+    text-decoration: none;
+  }
 
-  /* Remove excess padding and border in Firefox 4+ */
   // stylelint-disable-next-line no-descending-specificity
-  &::-moz-focus-inner {
-    border: 0;
+  button,
+  [role="button"] {
+    border: 0 solid transparent;
+    margin: 0;
     padding: 0;
+    width: auto;
+    overflow: visible;
+    background: transparent;
+
+    /* inherit font & color from ancestor */
+    color: inherit;
+    font: inherit;
+
+    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+    line-height: normal;
+
+    /* Corrects font smoothing for webkit */
+    -webkit-font-smoothing: inherit;
+    -moz-osx-font-smoothing: inherit;
+
+    /* Corrects inability to style clickable `input` types in iOS */
+    -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+    appearance: none;
+
+    /* Remove excess padding and border in Firefox 4+ */
+    // stylelint-disable-next-line no-descending-specificity
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
   }
-}
 
-caption {
-  text-align: left;
-}
+  caption {
+    text-align: left;
+  }
 
-table {
-  border-collapse: collapse; // Prevent double borders
-}
+  table {
+    border-collapse: collapse; // Prevent double borders
+  }
 
-blockquote {
-  margin: 0 0 space.get("medium") 0;
-}
+  blockquote {
+    margin: 0 0 space.get("medium") 0;
+  }
 
-th {
-  // Matches default `<td > ` alignment by inheriting from the `<body > `, or the
-  // closest parent with a set `text-align`.
-  text-align: inherit;
-}
+  th {
+    // Matches default `<td > ` alignment by inheriting from the `<body > `, or the
+    // closest parent with a set `text-align`.
+    text-align: inherit;
+  }
 
-button[aria-expanded="true"] .expand-icon {
-  transform: rotate(180deg);
-}
+  button[aria-expanded="true"] .expand-icon {
+    transform: rotate(180deg);
+  }
 
-[hidden] {
-  display: none !important;
+  [hidden] {
+    display: none !important;
+  }
 }

package/src/styles/before-components.scss

@@ -1,4 +1,18 @@
-@use './../../node_modules/normalize.css/normalize';
-@use 'base/globals';
-@use 'base/globals-forms';
-@use './typography/style';
+@use "sass:meta";
+@use "base/globals";
+@use "base/globals-forms";
+@use "./typography/style";
+
+@layer base {
+  @include meta.load-css("./../../node_modules/normalize.css/normalize");
+  @include meta.load-css("./../../node_modules/swiper/swiper-bundle.css");
+  @include meta.load-css(
+    "./../../node_modules/swiper/modules/navigation.min.css"
+  );
+  @include meta.load-css(
+    "./../../node_modules/swiper/modules/pagination.min.css"
+  );
+  @include meta.load-css(
+    "./../../node_modules/swiper/modules/scrollbar.min.css"
+  );
+}

package/src/styles/export/base.scss

@@ -1,4 +1,4 @@
-@use '../tokens/base';
+@use "../tokens/base";
 
 :export {
   font-family: base.$font-family;

package/src/styles/export/color.scss

@@ -1,24 +1,24 @@
 @use "../tokens/color" as color;
 
-:export {
-  orange: color.$orange;
-  orange-dark: color.$orange-dark;
-  black: color.$black;
-  white: color.$white;
-  blue: color.$blue;
-  green: color.$green;
-  pink: color.$pink;
-  violet: color.$violet;
-  yellow: color.$yellow;
-  gray-300: color.$gray-300;
-  gray-400: color.$gray-400;
-  gray-500: color.$gray-500;
-  gray-600: color.$gray-600;
-  gray-700: color.$gray-700;
-  gray-800: color.$gray-800;
-  gray-900: color.$gray-900;
-  success: color.$success;
-  danger: color.$danger;
-  info: color.$info;
-  warning: color.$warning;
-}
+// :export {
+//   orange: color.$orange;
+//   orange-dark: color.$orange-dark;
+//   black: color.$black;
+//   white: color.$white;
+//   blue: color.$blue;
+//   green: color.$green;
+//   pink: color.$pink;
+//   violet: color.$violet;
+//   yellow: color.$yellow;
+//   gray-300: color.$gray-300;
+//   gray-400: color.$gray-400;
+//   gray-500: color.$gray-500;
+//   gray-600: color.$gray-600;
+//   gray-700: color.$gray-700;
+//   gray-800: color.$gray-800;
+//   gray-900: color.$gray-900;
+//   success: color.$success;
+//   danger: color.$danger;
+//   info: color.$info;
+//   warning: color.$warning;
+// }

package/src/styles/shame.scss

@@ -1,14 +1,16 @@
-/**
+@layer utilities {
+  /**
 * Resets for megamenu and footer
 * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.
 **/
-.osk-footer-menu,
-.mm-header ul {
-  max-width: none;
-  margin-top: 0;
-
-  li {
+  .osk-footer-menu,
+  .mm-header ul {
+    max-width: none;
     margin-top: 0;
-    margin-bottom: 0;
+
+    li {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
   }
 }

package/src/styles/tokens/base.scss

@@ -5,15 +5,15 @@ $font-family: "orangeSKNeue", "Helvetica Neue", helvetica, arial, sans-serif;
 $font-size: 16px;
 $line-height: 1.25;
 
-$background: color.$white;
-$text-color: color.$black;
+$background: var(--color-background-primary);
+$text-color: var(--color-text-default);
 
-$focusring-color: color.$info;
+$focusring-color: var(--color-border-contrast);
 $focusring-width: 2px;
 $focusring-offset: 2px;
 $focus-outline: $focusring-width solid $focusring-color;
 $focus-shadow:
-  0 0 0 2px #fff,
+  0 0 0 2px var(--color-background-primary),
   0 0 0 4px $focusring-color;
 
 $selection-background: sasscolor.adjust(color.$orange-dark, $alpha: -0.1);

package/src/styles/tokens/color.scss

@@ -4,14 +4,14 @@ $colors-light: (
   background-primary: #ffffff,
   background-secondary: #f4f4f4,
   background-contrast: #141414,
-  background-accent: #fff6e0,
+  background-accent: #fff6ed,
   surface-primary: #ffffff,
   surface-secondary: #ff7900,
   surface-tertiary: #f16e00,
   surface-subtle: #eeeeee,
   surface-moderate: #dddddd,
-  surface-contrast: #ffffff,
-  surface-accent: #fff6e0,
+  surface-contrast: #141414,
+  surface-accent: #fff6ed,
   fill-primary: #ffffff,
   fill-secondary: #ff7900,
   fill-tertiary: #f16e00,
@@ -56,15 +56,15 @@ $colors-dark: (
   background-primary: #141414,
   background-secondary: #333333,
   background-contrast: #ffffff,
-  background-accent: #291a10,
+  background-accent: #2b1a10,
   surface-primary: #141414,
   surface-secondary: #ff7900,
   surface-tertiary: #f16e00,
   surface-subtle: #333333,
   surface-moderate: #595959,
-  surface-contrast: #000000,
-  surface-accent: #291a10,
-  fill-primary: #141414,
+  surface-contrast: #ffffff,
+  surface-accent: #2b1a10,
+  fill-primary: #000000,
   fill-secondary: #ff7900,
   fill-tertiary: #f16e00,
   fill-subtle: #333333,
@@ -76,10 +76,10 @@ $colors-dark: (
   fill-accent3: #ffb4e6,
   fill-accent4: #a885d8,
   fill-accent5: #ffd200,
-  fill-information: #4170d814,
-  fill-positive: #22872214,
-  fill-warning: #ffcc0014,
-  fill-negative: #cd3c1414,
+  fill-information: #4170d833,
+  fill-positive: #22872233,
+  fill-warning: #ffcc0033,
+  fill-negative: #cd3c1433,
   border-subtle: #333333,
   border-strong: #666666,
   border-contrast: #ffffff,

package/src/styles/typography/mixins.scss

@@ -68,7 +68,7 @@
     margin-top: space.get();
     margin-bottom: space.get();
     border: 0;
-    border-top: 1px solid color.$gray-300;
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 

package/src/styles/typography/style.scss

@@ -2,54 +2,56 @@
 @use "config" as *;
 @use "mixins" as *;
 
-// Headings pre elementy h1, h2, h3 atď.
-@include headings-base($headings, "h$", $heading-base);
-@include headings($headings, "h$");
-
-// Headings pre triedy .h1, .h2, .h3 atď.
-@include headings-base($headings, ".h$", $heading-base);
-@include headings($headings, ".h$");
-
-@include headings-base($displays, ".display-$", $display-base);
-@include headings($displays, ".display-$");
-@include body-text($body-text);
-@include readability();
-
-ol,
-ul,
-dl {
-  @include list-base();
-}
+@layer base {
+  // Headings pre elementy h1, h2, h3 atď.
+  @include headings-base($headings, "h$", $heading-base);
+  @include headings($headings, "h$");
+
+  // Headings pre triedy .h1, .h2, .h3 atď.
+  @include headings-base($headings, ".h$", $heading-base);
+  @include headings($headings, ".h$");
+
+  @include headings-base($displays, ".display-$", $display-base);
+  @include headings($displays, ".display-$");
+  @include body-text($body-text);
+  @include readability();
+
+  ol,
+  ul,
+  dl {
+    @include list-base();
+  }
 
-ul {
-  @include ul-list-base();
-}
+  ul {
+    @include ul-list-base();
+  }
 
-ol,
-ul {
-  @each $name, $value in $list-spacing {
-    &#{generate.variant-name($name, ".list-")} {
-      @include list-spacing($name);
+  ol,
+  ul {
+    @each $name, $value in $list-spacing {
+      &#{generate.variant-name($name, ".list-")} {
+        @include list-spacing($name);
+      }
     }
   }
-}
 
-.list-unstyled {
-  @include list-unstyled();
-}
+  .list-unstyled {
+    @include list-unstyled();
+  }
 
-.list-circle {
-  @include list-circle();
-}
+  .list-circle {
+    @include list-circle();
+  }
 
-.list-square {
-  @include list-square();
-}
+  .list-square {
+    @include list-square();
+  }
 
-.list-no-offset {
-  @include list-no-offset();
-}
+  .list-no-offset {
+    @include list-no-offset();
+  }
 
-.list-inline {
-  @include list-inline();
+  .list-inline {
+    @include list-inline();
+  }
 }

package/src/styles/utilities/border.scss

@@ -1,29 +1,30 @@
-@use '../tokens/color';
+@use "../tokens/color";
 
-.border-radius--medium {
-  border-radius: 10px;
-}
+@layer utilities {
+  .border-radius--medium {
+    border-radius: 10px;
+  }
 
-.border {
+  .border {
     border: 2px solid color.$black;
 
     &.is-invalid {
-        border-color: color.$danger !important;
+      border-color: color.$danger !important;
     }
-}
+  }
 
-.border--gray {
+  .border--gray {
     border-color: color.$gray-500;
 
     &.border-hover,
     &.is-indicating {
-        &:hover {
-            border-color: color.$gray-700;
-        }
+      &:hover {
+        border-color: color.$gray-700;
+      }
     }
-}
+  }
 
-
-.border--orange {
+  .border--orange {
     border-color: color.$orange;
-}
+  }
+}