@orangesk/orange-design-system 2.0.0-beta.9 → 2.0.0

package/src/styles/tools/map.scss

@@ -9,7 +9,7 @@
 /// @param {Mixed} $key - Key to use as a starting point.
 ///
 /// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
-@function next($map, $key, $return: 'value') {
+@function next($map, $key, $return: "value") {
   // Store the keys of the map as a list
   $values: map.keys($map);
 
@@ -26,7 +26,7 @@
   }
   // Otherwise, return the value
   @else {
-    @if $return == 'value' {
+    @if $return == "value" {
       @return map.get($map, list.nth($values, $i));
     } @else {
       @return list.nth($values, $i);

package/src/styles/tools/text.scss

@@ -12,7 +12,7 @@
 /// @param {String} $search - Substring to replace
 /// @param {String} $replace ('') - New value
 /// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
+@function str-replace($string, $search, $replace: "") {
   $index: string.index($string, $search);
 
   @if $index {

package/src/styles/typography/config.scss

@@ -4,35 +4,75 @@
 
 $body-text: (
   small: (
-    font-size: convert.to-rem(16px),
-    line-height: convert.to-rem(24px),
-    font-weight: 400,
-    letter-spacing: convert.to-rem(-0.1px),
+    default: (
+      font-size: convert.to-rem(14px),
+      line-height: convert.to-rem(20px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(0px),
+    ),
+    md: (
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(24px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.1px),
+    ),
+    lg: (
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(24px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.1px),
+    ),
   ),
   default: (
-    font-size: convert.to-rem(18px),
-    line-height: convert.to-rem(26px),
-    font-weight: 400,
-    letter-spacing: convert.to-rem(-0.2px),
+    default: (
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(24px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.1px),
+    ),
+    md: (
+      font-size: convert.to-rem(18px),
+      line-height: convert.to-rem(26px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
+    lg: (
+      font-size: convert.to-rem(18px),
+      line-height: convert.to-rem(26px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
   ),
   large: (
-    font-size: convert.to-rem(20px),
-    line-height: convert.to-rem(30px),
-    font-weight: 400,
-    letter-spacing: convert.to-rem(-0.2px),
+    default: (
+      font-size: convert.to-rem(18px),
+      line-height: convert.to-rem(26px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
+    md: (
+      font-size: convert.to-rem(20px),
+      line-height: convert.to-rem(30px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
+    lg: (
+      font-size: convert.to-rem(20px),
+      line-height: convert.to-rem(30px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
   ),
 );
 
 $heading-base: (
   margin-top: 0,
-  margin-bottom: space.get(),
-  font-weight: bold,
+  margin-bottom: space.get("large"),
 );
 
 $display-base: (
   margin-top: 0,
   margin-bottom: space.get("large"),
-  font-weight: bold,
 );
 
 $headings: (
@@ -40,19 +80,19 @@ $headings: (
     default: (
       font-size: convert.to-rem(34px),
       line-height: convert.to-rem(40px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.4px),
     ),
     md: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     xl: (
       font-size: convert.to-rem(50px),
       line-height: convert.to-rem(56px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
   ),
@@ -60,19 +100,19 @@ $headings: (
     default: (
       font-size: convert.to-rem(28px),
       line-height: convert.to-rem(32px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.2px),
     ),
     md: (
       font-size: convert.to-rem(34px),
       line-height: convert.to-rem(40px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.4px),
     ),
     xl: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
   ),
@@ -120,9 +160,15 @@ $headings: (
   ),
   6: (
     default: (
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(20px),
+      font-weight: 700,
+      letter-spacing: convert.to-rem(-0.1px),
+    ),
+    md: (
       font-size: convert.to-rem(18px),
-      line-height: convert.to-rem(26px),
-      font-weight: 400,
+      line-height: convert.to-rem(22px),
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.2px),
     ),
   ),
@@ -133,13 +179,19 @@ $displays: (
     default: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
+    md: (
+      font-size: convert.to-rem(80px),
+      line-height: convert.to-rem(92px),
+      font-weight: 300,
+      letter-spacing: convert.to-rem(-1.4px),
+    ),
     xl: (
       font-size: convert.to-rem(140px),
       line-height: convert.to-rem(158px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-2.6px),
     ),
   ),
@@ -147,13 +199,13 @@ $displays: (
     default: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     md: (
       font-size: convert.to-rem(80px),
       line-height: convert.to-rem(92px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-1.4px),
     ),
   ),
@@ -161,21 +213,21 @@ $displays: (
     default: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
 
     md: (
       font-size: convert.to-rem(50px),
       line-height: convert.to-rem(56px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
 
     xl: (
       font-size: convert.to-rem(60px),
       line-height: convert.to-rem(68px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-1px),
     ),
   ),
@@ -185,3 +237,23 @@ $list-spacing: (
   "default": space.get("small"),
   "condensed": space.get("xsmall"),
 );
+
+$caption: (
+  small: (
+    font-size: convert.to-rem(14px),
+    line-height: convert.to-rem(16px),
+    font-weight: 400,
+  ),
+  default: (
+    font-size: convert.to-rem(16px),
+    line-height: convert.to-rem(18px),
+    font-weight: 400,
+    letter-spacing: convert.to-rem(-0.1px),
+  ),
+  large: (
+    font-size: convert.to-rem(18px),
+    line-height: convert.to-rem(20px),
+    font-weight: 400,
+    letter-spacing: convert.to-rem(-0.2px),
+  ),
+);

package/src/styles/typography/mixins.scss

@@ -46,20 +46,15 @@
 @mixin body-text($config) {
   p {
     margin-top: 0;
-    margin-bottom: space.get();
+    margin-bottom: space.get("large");
     // Default štýly pre všetky p elementy
-    @include generate.responsive-css-map($config);
+    @include generate.responsive-css-map(map.get($config, "default"));
 
     a {
       text-decoration: underline !important;
     }
   }
 
-  // Default štýly pre všetky a elementy
-  a {
-    @include generate.responsive-css-map($config);
-  }
-
   // Generovanie variantov pre p elementy s triedami
   @each $variant, $breakpoints in $config {
     @if $variant != default {
@@ -83,10 +78,10 @@
   }
 
   hr {
-    margin-top: space.get();
-    margin-bottom: space.get();
+    margin-top: space.get("large");
+    margin-bottom: space.get("large");
     border: 0;
-    border-top: 1px solid var(--color-border-subtle);
+    border-top: 1px solid var(--color-border-strong);
   }
 }
 
@@ -117,11 +112,11 @@
 }
 
 @mixin list-base() {
-  margin: 0 0 space.get() 0;
+  margin: 0 0 space.get("large") 0;
   padding-left: space.get("large");
   @include text-readable;
   // Apply the same font styles as paragraphs
-  @include generate.responsive-css-map(config.$body-text);
+  @include generate.responsive-css-map(map.get(config.$body-text, "default"));
 }
 
 @mixin list-spacing($space, $config: config.$list-spacing) {
@@ -171,13 +166,12 @@
 
 @mixin list-inline() {
   @include list-unstyled();
+  gap: space.get("small");
+  display: flex;
+  flex-wrap: wrap;
 
   > li {
-    display: inline-block;
-
-    &:not(:last-child) {
-      margin-right: space.get("small");
-    }
+    display: inline-flex;
   }
 }
 
@@ -188,3 +182,21 @@
     }
   }
 }
+
+@mixin description-list() {
+  @include text-readable;
+  @include generate.responsive-css-map(map.get(config.$body-text, "default"));
+  padding-left: 0;
+
+  dt {
+    font-weight: 700;
+  }
+  dd {
+    margin-left: 0;
+    margin-bottom: space.get("large");
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/src/styles/typography/style.scss

@@ -1,6 +1,7 @@
 @use "../tools/generate";
 @use "config" as *;
 @use "mixins" as *;
+@use "sass:map" as sass-map;
 
 // Headings pre elementy h1, h2, h3 atď.
 @include headings-base($headings, "h$", $heading-base);
@@ -15,12 +16,27 @@
 @include body-text($body-text);
 @include readability();
 
+.caption {
+  @include generate.css-map(sass-map.get($caption, "default"));
+}
+
+.caption--small {
+  @include generate.css-map(sass-map.get($caption, "small"));
+}
+
+.caption--large {
+  @include generate.css-map(sass-map.get($caption, "large"));
+}
+
 ol,
-ul,
-dl {
+ul {
   @include list-base();
 }
 
+dl {
+  @include description-list();
+}
+
 ul {
   @include ul-list-base();
 }
@@ -56,4 +72,4 @@ ul {
 
 .list--marker-orange {
   @include list-marker-orange();
-}
+}

package/src/styles/utilities/border.scss

@@ -19,7 +19,7 @@
     &.border-hover,
     &.is-indicating {
       &:hover {
-        border-color: color.$gray-700;
+        border-color: var(--color-text-secondary);
       }
     }
   }

package/src/styles/utilities/color.scss

@@ -56,149 +56,6 @@
     }
   }
 
-  // Legacy classes - DEPRECATED (add deprecation warnings)
-  .color-black {
-    @warn "Deprecated: Use .text-default instead of .color-black";
-    color: color.$black !important;
-  }
-
-  .color-orange {
-    @warn "Deprecated: Use .text-accent instead of .color-orange";
-    color: var(--color-text-accent) !important;
-  }
-
-  .color-gray {
-    @warn "Deprecated: Use .text-secondary instead of .color-gray";
-    color: color.$gray-800 !important;
-  }
-
-  .color-white {
-    @warn "Deprecated: Use .text-inverse instead of .color-white";
-    color: color.$white !important;
-  }
-
-  .color-blue {
-    @warn "Deprecated: Use .icon-information instead of .color-blue";
-    color: var(--color-icon-information) !important;
-  }
-
-  .color-danger {
-    @warn "Deprecated: Use .icon-negative instead of .color-danger";
-    color: var(--color-icon-negative) !important;
-  }
-
-  .bg-white {
-    @warn "Deprecated: Use .background-primary instead of .bg-white";
-    background-color: color.$white !important;
-    color: var(--color-text-default);
-
-    .color-blue,
-    &.color-blue {
-      color: var(--color-icon-information) !important; // enforce blue color
-    }
-  }
-
-  .bg-black {
-    @warn "Deprecated: Use .background-contrast instead of .bg-black";
-    background-color: #141414 !important;
-    color: var(--color-text-inverse);
-
-    .color-gray,
-    &.color-gray {
-      color: color.$gray-500 !important; // enforce brighter gray
-    }
-
-    .color-blue,
-    &.color-blue {
-      color: color.$blue !important; // enforce blue color
-    }
-  }
-
-  .bg-orange {
-    @warn "Deprecated: Use .surface-secondary instead of .bg-orange";
-    background-color: var(--color-surface-secondary) !important;
-    color: color.$black !important;
-  }
-
-  .bg-orange-dark {
-    @warn "Deprecated: Use .surface-tertiary instead of .bg-orange-dark";
-    background-color: var(--color-surface-tertiary) !important;
-    color: var(--color-text-inverse) !important;
-  }
-
-  .bg-gray {
-    @warn "Deprecated: Use .surface-subtle instead of .bg-gray";
-    background-color: var(--color-surface-subtle) !important;
-  }
-
-  .bg-gray-lighter {
-    @warn "Deprecated: Use .background-secondary instead of .bg-gray-lighter";
-    background-color: var(--color-background-secondary) !important;
-  }
-
-  .bg-blue {
-    @warn "Deprecated: Use .fill-accent1 instead of .bg-blue";
-    background-color: var(--color-fill-accent1) !important;
-    color: color.$black !important;
-  }
-
-  .bg-green {
-    @warn "Deprecated: Use .fill-accent2 instead of .bg-green";
-    background-color: var(--color-fill-accent2) !important;
-    color: color.$black !important;
-  }
-
-  .bg-pink {
-    @warn "Deprecated: Use .fill-accent3 instead of .bg-pink";
-    background-color: var(--color-fill-accent3) !important;
-    color: color.$black !important;
-  }
-
-  .bg-violet {
-    @warn "Deprecated: Use .fill-accent4 instead of .bg-violet";
-    background-color: var(--color-fill-accent4) !important;
-    color: color.$black !important;
-  }
-
-  .bg-yellow {
-    @warn "Deprecated: Use .fill-accent5 instead of .bg-yellow";
-    background-color: var(--color-fill-accent5) !important;
-    color: color.$black !important;
-  }
-
-  .bg-yellow-lighter {
-    @warn "Deprecated: This class will be removed in future versions";
-    background-color: color.$yellow-lighter !important;
-    color: color.$black !important;
-  }
-
-  .bg-red {
-    @warn "Deprecated: Use .fill-negative instead of .bg-red";
-    background-color: color.$red !important;
-    color: color.$black !important;
-  }
-
-  .bg-accent {
-    @warn "Deprecated: Use .background-accent instead of .bg-accent";
-    background-color: var(--color-background-accent) !important;
-    color: var(--color-text-default) !important;
-  }
-
-  .bg-accent1-blog {
-    @warn "Deprecated: Use .background-accent1-blog instead of .bg-accent1-blog";
-    background-color: var(--color-background-accent1-blog) !important;
-    color: var(--color-text-default) !important;
-  }
-
-  .bg-accent2-blog {
-    @warn "Deprecated: Use .background-accent2-blog instead of .bg-accent2-blog";
-    background-color: var(--color-background-accent2-blog) !important;
-    color: var(--color-text-default) !important;
-  }
-
-  // Legacy selection styles
-  .bg-orange,
-  .bg-orange-dark,
   .surface-secondary,
   .surface-tertiary {
     &::selection {
@@ -207,16 +64,6 @@
     }
   }
 
-  .color-gray::selection {
-    color: var(--color-text-default);
-  }
-
-  // Legacy classes - continued
-  .bg-none {
-    @warn "Deprecated: Use .background-none instead of .bg-none";
-    background: none !important;
-  }
-
   // Utility for removing background
   .background-none {
     background: none !important;

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

@@ -7,25 +7,47 @@
 @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;
     }
 
-    &::-webkit-scrollbar {
-      height: convert.to-rem(6px);
-      appearance: none;
-      background-color: var(--color-surface-moderate);
-      border-radius: 99px;
+    @supports selector(::-webkit-scrollbar) {
+      &::-webkit-scrollbar {
+        height: convert.to-rem(8px);
+        appearance: none;
+        background-color: transparent;
+        border-radius: 99px;
+      }
+
+      &::-webkit-scrollbar-track {
+        border: convert.to-rem(1px) solid transparent;
+        background-color: var(--color-surface-moderate);
+        background-clip: content-box;
+        border-radius: 99px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        opacity: 1;
+        background-color: var(--color-fill-contrast);
+        border-radius: 99px;
+        border: convert.to-rem(1px) solid transparent;
+        background-clip: content-box;
+      }
+
+      &:hover::-webkit-scrollbar-thumb,
+      &:active::-webkit-scrollbar-thumb,
+      &::-webkit-scrollbar-thumb:hover,
+      &::-webkit-scrollbar-thumb:active {
+        border-width: 0;
+        background-color: var(--color-fill-secondary) !important;
+      }
     }
 
-    &::-webkit-scrollbar-thumb {
-      opacity: 1;
-      background-color: var(--color-fill-contrast);
-      border-radius: 99px;
+    @supports not selector(::-webkit-scrollbar) {
+      scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);
+      scrollbar-width: thin;
     }
   }
 
@@ -36,7 +58,7 @@
           flex-wrap: nowrap;
           overflow-x: auto;
           -webkit-overflow-scrolling: auto;
-          margin-bottom: space.get("medium");
+          margin-bottom: space.get("large");
         }
 
         &#{generate.variant-name($breakpoint)}-disable {

package/src/styles/utilities/index.scss

@@ -1,6 +1,7 @@
-@forward 'color';
-@forward 'text';
-@forward 'border';
-@forward 'layout';
-@forward 'visibility';
-@forward 'horizontal-scroll';
+@forward "color";
+@forward "text";
+@forward "border";
+@forward "layout";
+@forward "visibility";
+@forward "ordering";
+@forward "horizontal-scroll";

package/src/styles/utilities/layout.scss

@@ -189,6 +189,12 @@
       width: 100% !important;
     }
 
+    .fullwidth-xs-only {
+      @include breakpoint.get("xs", "only") {
+        width: 100% !important;
+      }
+    }
+
     .fullheight {
       height: 100% !important;
     }
@@ -200,4 +206,16 @@
   }
 
   @include block-classes();
+
+  @mixin position-classes {
+    .relative {
+      position: relative !important;
+    }
+
+    .absolute {
+      position: absolute !important;
+    }
+  }
+
+  @include position-classes();
 }