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

package/src/styles/utilities/color.scss

@@ -1,121 +1,141 @@
-@use '../tokens/color';
+@use "../tokens/color";
 
-.color-black {
-  color: color.$black !important;
-}
-.color-orange {
-  color: color.$orange-dark !important;
-}
-.color-gray {
-  color: color.$gray-800 !important;
-}
-.color-white {
-  color: color.$white !important;
-}
-.color-blue {
-  color: #085ebd !important;
-}
+// TODO premyslieť, či je potrebné tieto farby nahradiť tokenmi, alebo hardcodovat aby neboli nepredvidatelne
 
-.color-danger {
-  color: color.$danger !important;
-}
-
-.bg-white {
-  background-color: color.$white !important;
-  color: color.$black !important;
+@layer utilities {
+  .color-black {
+    // TODO: replace with new token when available
+    color: color.$black !important;
+  }
+  .color-orange {
+    // TODO: replace with new token when available
+    color: color.$orange-dark !important;
+  }
+  .color-gray {
+    // TODO: replace with new token when available
+    color: color.$gray-800 !important;
+  }
+  .color-white {
+    // TODO: replace with new token when available
+    color: color.$white !important;
+  }
+  .color-blue {
+    color: var(--color-icon-information) !important;
+  }
 
-  .color-blue,
-  &.color-blue {
-    color: #085ebd !important; // enforce blue color
+  .color-danger {
+    // TODO: replace with new token when available
+    color: color.$danger !important;
   }
-}
 
-.bg-black {
-  background-color: color.$black !important;
-  color: color.$white !important;
+  .bg-white {
+    // TODO: replace with new token when available
+    background-color: color.$white !important;
+    color: var(--color-text-default);
 
-  .color-orange,
-  &.color-orange {
-    color: color.$orange !important; // enforce brighter text color
+    .color-blue,
+    &.color-blue {
+      color: var(--color-icon-information) !important; // enforce blue color
+    }
   }
 
-  .color-gray,
-  &.color-gray {
-    color: color.$gray-500 !important; // enforce brighter gray
+  .bg-black {
+    // TODO: replace with new token when available
+    // background-color: color.$black !important;
+    background-color: #141414 !important;
+    color: var(--color-text-default);
+
+    .color-orange,
+    &.color-orange {
+      color: color.$orange !important; // enforce brighter text color
+    }
+
+    .color-gray,
+    &.color-gray {
+      color: color.$gray-500 !important; // enforce brighter gray
+    }
+
+    .color-blue,
+    &.color-blue {
+      color: color.$blue !important; // enforce blue color
+    }
+
+    .color-danger,
+    &.color-danger {
+      color: color.$danger !important; // enforce danger color
+    }
   }
 
-  .color-blue,
-  &.color-blue {
-    color: color.$blue !important; // enforce blue color
+  .bg-orange {
+    background-color: var(--color-surface-secondary) !important;
+    // TODO: replace with new token when available
+    color: color.$black !important;
   }
 
-  .color-danger,
-  &.color-danger {
-    color: color.$danger !important; // enforce danger color
+  .bg-orange-dark {
+    background-color: var(--color-surface-tertiary) !important;
+    color: var(--color-text-inverse) !important;
   }
-}
 
-.bg-orange {
-  background-color: color.$orange !important;
-  color: color.$black !important;
-}
-
-.bg-orange-dark {
-  background-color: color.$orange-dark !important;
-  color: color.$white !important;
-}
-
-.bg-gray {
-  background-color: color.$gray-300 !important;
-}
+  .bg-gray {
+    background-color: var(--color-surface-subtle) !important;
+  }
 
-.bg-blue {
-  background-color: color.$blue !important;
-  color: color.$black !important;
-}
+  .bg-blue {
+    background-color: var(--color-fill-accent1) !important;
+    // TODO: replace with new token when available
+    color: color.$black !important;
+  }
 
-.bg-green {
-  background-color: color.$green !important;
-  color: color.$black !important;
-}
+  .bg-green {
+    background-color: var(--color-fill-accent2) !important;
+    // TODO: replace with new token when available
+    color: color.$black !important;
+  }
 
-.bg-pink {
-  background-color: color.$pink !important;
-  color: color.$black !important;
-}
+  .bg-pink {
+    background-color: var(--color-fill-accent3) !important;
+    // TODO: replace with new token when available
+    color: color.$black !important;
+  }
 
-.bg-violet {
-  background-color: color.$violet !important;
-  color: color.$black !important;
-}
+  .bg-violet {
+    background-color: var(--color-fill-accent4) !important;
+    // TODO: replace with new token when available
+    color: color.$black !important;
+  }
 
-.bg-yellow {
-  background-color: color.$yellow !important;
-  color: color.$black !important;
-}
+  .bg-yellow {
+    background-color: var(--color-fill-accent5) !important;
+    // TODO: replace with new token when available
+    color: color.$black !important;
+  }
 
-.bg-yellow-lighter {
-  background-color: color.$yellow-lighter !important;
-  color: color.$black !important;
-}
+  .bg-yellow-lighter {
+    // TODO: replace with new token when available
+    background-color: color.$yellow-lighter !important;
+    color: color.$black !important;
+  }
 
-.bg-red {
-  background-color: color.$red !important;
-  color: color.$black !important;
-}
+  .bg-red {
+    // TODO: replace with new token when available
+    background-color: color.$red !important;
+    color: color.$black !important;
+  }
 
-.bg-orange,
-.bg-orange-dark {
-  &::selection {
-    background-color: color.$black;
-    color: color.$white;
+  .bg-orange,
+  .bg-orange-dark {
+    &::selection {
+      background-color: var(--color-background-contrast);
+      color: var(--color-text-inverse);
+    }
   }
-}
 
-.color-gray::selection {
-  color: color.$black;
-}
+  .color-gray::selection {
+    color: var(--color-text-default);
+  }
 
-.bg-none {
-  background: none !important;
+  .bg-none {
+    background: none !important;
+  }
 }

package/src/styles/utilities/horizontal-scroll.scss

@@ -1,46 +1,50 @@
-@use '../tokens/color';
-@use '../tokens/space';
-@use '../tokens/breakpoint';
-@use '../tools/generate';
+@use "../tokens/color";
+@use "../tokens/space";
+@use "../tokens/breakpoint";
+@use "../tools/generate";
+@use "../tools/convert";
 
-[class*="horizontal-scroll"] {
-  scrollbar-color: color.$gray-400 color.$gray-800;
-  scrollbar-width: space.get('small');
-  scroll-snap-type: x mandatory;
+@layer utilities {
+  [class*="horizontal-scroll"],
+  .table-scrollable {
+    scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);
+    scrollbar-width: thin;
+    scroll-snap-type: x mandatory;
 
-  > * {
-    scroll-snap-align: start;
-  }
+    > * {
+      scroll-snap-align: start;
+    }
 
-  &::-webkit-scrollbar {
-    height: space.get('small');
-    appearance: none;
-    background-color: color.$gray-400;
-    border-radius: 99px;
-  }
+    &::-webkit-scrollbar {
+      height: convert.to-rem(6px);
+      appearance: none;
+      background-color: var(--color-surface-moderate);
+      border-radius: 99px;
+    }
 
-  &::-webkit-scrollbar-thumb {
-    opacity: 1;
-    border-radius: 99px;
-    background-color: color.$gray-800;
+    &::-webkit-scrollbar-thumb {
+      opacity: 1;
+      background-color: var(--color-fill-contrast);
+      border-radius: 99px;
+    }
   }
-}
 
-.horizontal-scroll {
-  @each $breakpoint, $w in breakpoint.$map {
-    @include breakpoint.get($breakpoint) {
-      &#{generate.variant-name($breakpoint)} {
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: auto;
-        margin-bottom: space.get('medium');
-      }
+  .horizontal-scroll {
+    @each $breakpoint, $w in breakpoint.$map {
+      @include breakpoint.get($breakpoint) {
+        &#{generate.variant-name($breakpoint)} {
+          flex-wrap: nowrap;
+          overflow-x: auto;
+          -webkit-overflow-scrolling: auto;
+          margin-bottom: space.get("medium");
+        }
 
-      &#{generate.variant-name($breakpoint)}-disable {
-        flex-wrap: wrap;
-        overflow-x: initial;
-        -webkit-overflow-scrolling: initial;
-        margin-bottom: 0;
+        &#{generate.variant-name($breakpoint)}-disable {
+          flex-wrap: wrap;
+          overflow-x: initial;
+          -webkit-overflow-scrolling: initial;
+          margin-bottom: 0;
+        }
       }
     }
   }

package/src/styles/utilities/layout.scss

@@ -1,192 +1,194 @@
-@use '../tokens/space';
-@use '../tokens/breakpoint';
-@use '../tools/generate';
-@use '../tools/layout';
-
-@mixin spacing-utilities() {
-  $directions: (
-    'top': 't',
-    'right': 'r',
-    'bottom': 'b',
-    'left': 'l',
-  );
-
-  .mb {
-    margin-bottom: space.get();
-  }
-
-  @include breakpoint.each using ($breakpoint) {
-    @each $spaceName, $spaceSize in space.$map {
-      .mb#{generate.variant-name($breakpoint, '-')}#{generate.variant-name($spaceName, '-')} {
-        margin-bottom: $spaceSize !important;
+@use "../tokens/space";
+@use "../tokens/breakpoint";
+@use "../tools/generate";
+@use "../tools/layout";
+
+@layer utilities {
+  @mixin spacing-utilities() {
+    $directions: (
+      "top": "t",
+      "right": "r",
+      "bottom": "b",
+      "left": "l",
+    );
+
+    .mb {
+      margin-bottom: space.get();
+    }
+
+    @include breakpoint.each using ($breakpoint) {
+      @each $spaceName, $spaceSize in space.$map {
+        .mb#{generate.variant-name($breakpoint, "-")}#{generate.variant-name($spaceName, "-")} {
+          margin-bottom: $spaceSize !important;
+        }
+      }
+      .mb#{generate.variant-name($breakpoint, "-")}-none {
+        margin-bottom: 0 !important;
       }
     }
-    .mb#{generate.variant-name($breakpoint, '-')}-none {
-      margin-bottom: 0 !important;
-    }
-  }
 
-  @each $directionName, $directionSelector in $directions {
-    @if $directionName != bottom {
-      .m#{generate.variant-name($directionSelector, '')}-none {
-        margin-#{$directionName}: 0 !important;
+    @each $directionName, $directionSelector in $directions {
+      @if $directionName != bottom {
+        .m#{generate.variant-name($directionSelector, "")}-none {
+          margin-#{$directionName}: 0 !important;
+        }
+      }
+
+      .p#{generate.variant-name($directionSelector, "")}-none {
+        padding-#{$directionName}: 0 !important;
       }
     }
 
-    .p#{generate.variant-name($directionSelector, '')}-none {
-      padding-#{$directionName}: 0 !important;
+    .no-mrg {
+      margin: 0 !important;
     }
-  }
 
-  .no-mrg {
-    margin: 0 !important;
+    .no-pad {
+      padding: 0 !important;
+    }
   }
 
-  .no-pad {
-    padding: 0 !important;
+  @include spacing-utilities;
+
+  .clearfix {
+    @include layout.clearfix;
+  }
+  .clear {
+    clear: both;
   }
-}
 
-@include spacing-utilities;
+  // Flexbox alignment classes
+  @mixin alignment-classes() {
+    @include breakpoint.each using ($breakpoint) {
+      // Children justify
+      .justify-content-start#{generate.variant-name($breakpoint)} {
+        justify-content: flex-start;
+      }
+      .justify-content-end#{generate.variant-name($breakpoint)} {
+        justify-content: flex-end;
+      }
+      .justify-content-center#{generate.variant-name($breakpoint)} {
+        justify-content: center;
+      }
+      .justify-content-space-around#{generate.variant-name($breakpoint)} {
+        justify-content: space-around;
+      }
+      .justify-content-space-between#{generate.variant-name($breakpoint)} {
+        justify-content: space-between;
+      }
 
-.clearfix {
-  @include layout.clearfix;
-}
-.clear {
-  clear: both;
-}
+      // Children align
+      .align-items-start#{generate.variant-name($breakpoint)} {
+        align-items: flex-start;
+      }
+      .align-items-end#{generate.variant-name($breakpoint)} {
+        align-items: flex-end;
+      }
+      .align-items-center#{generate.variant-name($breakpoint)} {
+        align-items: center;
+      }
+      .align-items-stretch#{generate.variant-name($breakpoint)} {
+        align-items: stretch;
+      }
 
-// Flexbox alignment classes
-@mixin alignment-classes() {
-  @include breakpoint.each using ($breakpoint) {
-    // Children justify
-    .justify-content-start#{generate.variant-name($breakpoint)} {
-      justify-content: flex-start;
-    }
-    .justify-content-end#{generate.variant-name($breakpoint)} {
-      justify-content: flex-end;
-    }
-    .justify-content-center#{generate.variant-name($breakpoint)} {
-      justify-content: center;
-    }
-    .justify-content-space-around#{generate.variant-name($breakpoint)} {
-      justify-content: space-around;
-    }
-    .justify-content-space-between#{generate.variant-name($breakpoint)} {
-      justify-content: space-between;
-    }
+      // Self horizontal alignment
+      .align-self-left#{generate.variant-name($breakpoint)} {
+        margin-left: 0;
+        margin-right: auto;
+      }
+      .align-self-right#{generate.variant-name($breakpoint)} {
+        margin-left: auto;
+        margin-right: 0;
+      }
+      .align-self-center#{generate.variant-name($breakpoint)} {
+        margin-left: auto;
+        margin-right: auto;
+      }
 
-    // Children align
-    .align-items-start#{generate.variant-name($breakpoint)} {
-      align-items: flex-start;
-    }
-    .align-items-end#{generate.variant-name($breakpoint)} {
-      align-items: flex-end;
-    }
-    .align-items-center#{generate.variant-name($breakpoint)} {
-      align-items: center;
+      // Self vertical alignment
+      .align-self-top#{generate.variant-name($breakpoint)} {
+        align-self: flex-start;
+      }
+      .align-self-bottom#{generate.variant-name($breakpoint)} {
+        align-self: flex-end;
+      }
+      .align-self-middle#{generate.variant-name($breakpoint)} {
+        align-self: center;
+      }
+      .align-self-stretch#{generate.variant-name($breakpoint)} {
+        align-self: stretch;
+      }
+
+      .align-self-last#{generate.variant-name($breakpoint)} {
+        order: 999;
+      }
     }
-    .align-items-stretch#{generate.variant-name($breakpoint)} {
-      align-items: stretch;
+  }
+
+  @include alignment-classes;
+
+  @mixin aspect-ratio-classes() {
+    .aspect-ratio-21-9 {
+      max-width: 100%;
+      border: 0;
+      aspect-ratio: 21 / 9;
     }
 
-    // Self horizontal alignment
-    .align-self-left#{generate.variant-name($breakpoint)} {
-      margin-left: 0;
-      margin-right: auto;
+    .aspect-ratio-16-9 {
+      max-width: 100%;
+      border: 0;
+      aspect-ratio: 16 / 9;
     }
-    .align-self-right#{generate.variant-name($breakpoint)} {
-      margin-left: auto;
-      margin-right: 0;
+
+    .aspect-ratio-4-3 {
+      max-width: 100%;
+      border: 0;
+      aspect-ratio: 4 / 3;
     }
-    .align-self-center#{generate.variant-name($breakpoint)} {
-      margin-left: auto;
-      margin-right: auto;
+
+    .aspect-ratio-1-1 {
+      max-width: 100%;
+      border: 0;
+      aspect-ratio: 1 / 1;
     }
+  }
 
-    // Self vertical alignment
-    .align-self-top#{generate.variant-name($breakpoint)} {
-      align-self: flex-start;
+  @include aspect-ratio-classes;
+
+  @mixin display-classes {
+    .d-block {
+      display: block;
     }
-    .align-self-bottom#{generate.variant-name($breakpoint)} {
-      align-self: flex-end;
+    .d-inline-block {
+      display: inline-block;
     }
-    .align-self-middle#{generate.variant-name($breakpoint)} {
-      align-self: center;
+    .d-inline {
+      display: inline;
     }
-    .align-self-stretch#{generate.variant-name($breakpoint)} {
-      align-self: stretch;
+    .d-flex {
+      display: flex;
     }
-
-    .align-self-last#{generate.variant-name($breakpoint)} {
-      order: 999;
+    .d-inline-flex {
+      display: inline-flex;
     }
   }
-}
 
-@include alignment-classes;
-
-@mixin aspect-ratio-classes() {
-  .aspect-ratio-21-9 {
-    max-width: 100%;
-    border: 0;
-    aspect-ratio: 21 / 9;
-  }
-
-  .aspect-ratio-16-9 {
-    max-width: 100%;
-    border: 0;
-    aspect-ratio: 16 / 9;
-  }
-
-  .aspect-ratio-4-3 {
-    max-width: 100%;
-    border: 0;
-    aspect-ratio: 4 / 3;
-  }
+  @include display-classes;
 
-  .aspect-ratio-1-1 {
-    max-width: 100%;
-    border: 0;
-    aspect-ratio: 1 / 1;
-  }
-}
-
-@include aspect-ratio-classes;
-
-@mixin display-classes {
-  .d-block {
-    display: block;
-  }
-  .d-inline-block {
-    display: inline-block;
-  }
-  .d-inline {
-    display: inline;
-  }
-  .d-flex {
-    display: flex;
-  }
-  .d-inline-flex {
-    display: inline-flex;
-  }
-}
-
-@include display-classes;
+  @mixin block-classes {
+    .fullwidth {
+      width: 100% !important;
+    }
 
-@mixin block-classes {
-  .fullwidth {
-    width: 100% !important;
-  }
+    .fullheight {
+      height: 100% !important;
+    }
 
-  .fullheight {
-    height: 100% !important;
+    .center-block {
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
   }
 
-  .center-block {
-    margin-left: auto !important;
-    margin-right: auto !important;
-  }
+  @include block-classes();
 }
-
-@include block-classes();