@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/index.ts

@@ -1,6 +1,6 @@
-import "../styles/before-components.scss";
 import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
+import { AnchorNavigation } from "./AnchorNavigation";
 import { Tag, TagButton } from "./Tag";
 import { Bar, BarBreak, BarItem } from "./Bar";
 import {
@@ -20,6 +20,7 @@ import {
 } from "./Button";
 import { Buttons } from "./Buttons";
 import { Carousel } from "./Carousel";
+import { CarouselHero, CarouselHeroItem } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
 import { Container } from "./Container";
@@ -33,7 +34,6 @@ import {
 } from "./Dropdown";
 import { Expander } from "./Expander/Expander";
 import { FeatureAccordion, FeatureAccordionItem } from "./FeatureAccordion";
-import { Footer } from "./Footer";
 import { Card, CardSection, CardProductHeader } from "./Card";
 import { Icon, Pictogram } from "./Icon";
 import { Gauge } from "./Gauge";
@@ -41,7 +41,6 @@ import { Grid, GridCol } from "./Grid";
 import { Image } from "./Image";
 import { Link } from "./Link";
 import { Loader } from "./Loader";
-import { MegamenuDropdown } from "./Megamenu";
 import {
   Modal,
   ModalBody,
@@ -87,7 +86,6 @@ import { Tab, TabPanel, Tabs } from "./Tabs";
 import { Table } from "./Table";
 import { Tile } from "./Tile";
 import { Tooltip, InfoTooltip } from "./Tooltip";
-import "../styles/after-components.scss";
 import { Cover } from "./Cover";
 import { Testimonial } from "./Testimonial";
 import { Hero } from "./Hero";
@@ -97,6 +95,7 @@ export {
   Accordion,
   AccordionItem,
   Alert,
+  AnchorNavigation,
   Autocomplete,
   Bar,
   BarBreak,
@@ -116,6 +115,8 @@ export {
   CardProductHeader,
   CardSection,
   Carousel,
+  CarouselHero,
+  CarouselHeroItem,
   CarouselPromotions,
   CartTable,
   Checkbox,
@@ -133,7 +134,6 @@ export {
   Field,
   Fieldset,
   File,
-  Footer,
   Gauge,
   Grid,
   GridCol,
@@ -152,7 +152,6 @@ export {
   List,
   ListItem,
   Loader,
-  MegamenuDropdown,
   Message,
   Modal,
   ModalBody,

package/src/styles/base/globals.scss

@@ -28,8 +28,27 @@
   color: var(--color-text-default);
 }
 
+:root {
+  --extra-scroll-margin: 0;
+  --header-height: 80px;
+}
+
+@media screen and (min-width: 992px) {
+  :root {
+    --header-height: 120px;
+  }
+}
+
+:target {
+  scroll-margin-top: calc(
+    var(--header-height) + var(--extra-scroll-margin) - 1px
+  );
+}
+
 html {
   font-size: base.$font-size;
+  scroll-padding-top: unset;
+  overflow-x: hidden;
 }
 
 html,

package/src/styles/base/styleguide.scss

@@ -1,11 +1,11 @@
-@use '../tokens/color';
-@use '../tokens/space';
-@use '../tools/convert';
-@use '../tools/text';
-@use '../tools/generate';
-@use '../tools/layout';
-@use '../typography/config' as typographyConfig;
-@use 'sass:map' as sassmap;
+@use "../tokens/color";
+@use "../tokens/space";
+@use "../tools/convert";
+@use "../tools/text";
+@use "../tools/generate";
+@use "../tools/layout";
+@use "../typography/config" as typographyConfig;
+@use "sass:map" as sassmap;
 
 main {
   min-height: 100vh;
@@ -13,9 +13,9 @@ main {
 }
 
 .l-debug {
-  padding: space.get('small');
-  background-color: color.$gray-300;
-  border: 1px solid color.$gray-400;
+  padding: space.get("small");
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-strong);
 
   @include layout.reset-last-child-margin-bottom;
 }
@@ -29,7 +29,7 @@ main {
 }
 
 .code-wrapper {
-  border: 1px solid color.$gray-400;
+  border: 1px solid var(--color-border-strong);
 
   pre {
     margin-bottom: 0 !important;
@@ -57,17 +57,17 @@ main {
     width: convert.to-rem(220px);
     min-height: convert.to-rem(40px);
     margin-bottom: space.get();
-    margin-right: space.get('xsmall');
+    margin-right: space.get("xsmall");
     overflow-wrap: anywhere;
 
     .icon {
       cursor: pointer;
       flex-shrink: 0;
-      margin-right: space.get('small');
+      margin-right: space.get("small");
     }
 
     .icon:hover {
-      color: color.$orange;
+      color: var(--color-text-accent);
     }
   }
 }
@@ -122,7 +122,7 @@ main > div {
   }
 
   > h4 {
-    @include generate.css-map(typographyConfig.$body-text, 'large');
+    @include generate.css-map(typographyConfig.$body-text, "large");
   }
 }
 
@@ -130,5 +130,5 @@ main > div {
 main > div > h1 + p,
 main > div > h1 + p + p,
 main > div > h1 + p + p + p {
-  @include generate.css-map(typographyConfig.$body-text, 'large');
+  @include generate.css-map(typographyConfig.$body-text, "large");
 }

package/src/styles/export/base.js

@@ -2,13 +2,13 @@
 // Do not edit this file directly - edit the SCSS source instead
 
 export const exports = {
-  "font-family": "orangeSKNeue, Helvetica Neue, helvetica, arial, sans-serif",
+  "font-family": "OrangeSK Neue, Helvetica Neue, helvetica, arial, sans-serif",
   "font-size": "16px",
   "line-height": "1.25",
   "background": "var(--color-background-primary)",
   "text-color": "var(--color-text-default)",
   "focus-outline": "2px solid var(--color-border-contrast)",
-  "selection-background": "rgba(241, 110, 0, 0.9)"
+  "selection-background": "rgba(241, 94, 0, 0.9)"
 };
 
 export default exports;

package/src/styles/export/color.js

@@ -2,8 +2,8 @@
 // Do not edit this file directly - edit the SCSS source instead
 
 export const exports = {
-  "orange": "#f16e00",
-  "orange-dark": "#f16e00",
+  "orange": "#f15e00",
+  "orange-dark": "#f15e00",
   "black": "#000000",
   "white": "#ffffff",
   "blue": "#4bb4e6",

package/src/styles/shame.scss

@@ -4,7 +4,8 @@
 * 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 {
+  .mm-header ul,
+  .megamenu-header ul {
     max-width: none;
     margin-top: 0;
 

package/src/styles/tokens/base.scss

@@ -1,7 +1,7 @@
 @use "sass:color" as sasscolor;
 @use "./color";
 
-$font-family: "orangeSKNeue", "Helvetica Neue", helvetica, arial, sans-serif;
+$font-family: "'OrangeSK Neue'", "Helvetica Neue", helvetica, arial, sans-serif;
 $font-size: 16px;
 $line-height: 1.25;
 

package/src/styles/tokens/color.scss

@@ -5,16 +5,18 @@ $colors-light: (
   background-secondary: #f4f4f4,
   background-contrast: #141414,
   background-accent: #fff6ed,
+  background-accent1-blog: #fff6cc,
+  background-accent2-blog: #eee7f7,
   surface-primary: #ffffff,
   surface-secondary: #ff7900,
-  surface-tertiary: #f16e00,
+  surface-tertiary: #f15e00,
   surface-subtle: #eeeeee,
   surface-moderate: #dddddd,
   surface-contrast: #141414,
   surface-accent: #fff6ed,
   fill-primary: #ffffff,
   fill-secondary: #ff7900,
-  fill-tertiary: #f16e00,
+  fill-tertiary: #f15e00,
   fill-subtle: #eeeeee,
   fill-moderate: #dddddd,
   fill-disabled: #cccccc,
@@ -31,14 +33,14 @@ $colors-light: (
   border-subtle: #dddddd,
   border-strong: #cccccc,
   border-contrast: #000000,
-  border-accent: #f16e00,
+  border-accent: #f15e00,
   border-information: #4170d8,
   border-positive: #228722,
   border-warning: #ffcc00,
   border-negative: #cd3c14,
   icon-default: #000000,
   icon-inverse: #ffffff,
-  icon-brand: #f16e00,
+  icon-brand: #f15e00,
   icon-accent: #ffc48f,
   icon-disabled: #cccccc,
   icon-information: #4170d8,
@@ -46,10 +48,10 @@ $colors-light: (
   icon-warning: #ffcc00,
   icon-negative: #cd3c14,
   text-default: #000000,
-  text-secondary: #000000,
+  text-secondary: #666666,
   text-disabled: #cccccc,
   text-inverse: #ffffff,
-  text-accent: #f16e00,
+  text-accent: #f15e00,
 );
 
 $colors-dark: (
@@ -57,16 +59,18 @@ $colors-dark: (
   background-secondary: #333333,
   background-contrast: #ffffff,
   background-accent: #2b1a10,
+  background-accent1-blog: #62342d,
+  background-accent2-blog: #2b1a10,
   surface-primary: #141414,
   surface-secondary: #ff7900,
-  surface-tertiary: #f16e00,
+  surface-tertiary: #f15e00,
   surface-subtle: #333333,
   surface-moderate: #595959,
   surface-contrast: #ffffff,
   surface-accent: #2b1a10,
   fill-primary: #000000,
   fill-secondary: #ff7900,
-  fill-tertiary: #f16e00,
+  fill-tertiary: #f15e00,
   fill-subtle: #333333,
   fill-moderate: #595959,
   fill-disabled: #666666,

package/src/styles/typography/mixins.scss

@@ -120,6 +120,8 @@
   margin: 0 0 space.get() 0;
   padding-left: space.get("large");
   @include text-readable;
+  // Apply the same font styles as paragraphs
+  @include generate.responsive-css-map(config.$body-text);
 }
 
 @mixin list-spacing($space, $config: config.$list-spacing) {
@@ -181,9 +183,8 @@
 
 @mixin list-marker-orange() {
   > li {
-
     &::marker {
       color: var(--color-icon-accent);
     }
   }
-}
+}

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

@@ -1,35 +1,94 @@
 @use "../tokens/color";
-
-// TODO premyslieť, či je potrebné tieto farby nahradiť tokenmi, alebo hardcodovat aby neboli nepredvidatelne
+@use "sass:map";
 
 @layer utilities {
+  // Background utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "background-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Surface utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "surface-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Fill utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "fill-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Border utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "border-") == 1 {
+      .#{$name} {
+        border-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Text color utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "text-") == 1 {
+      .#{$name} {
+        color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Icon color utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "icon-") == 1 {
+      .#{$name} {
+        color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Legacy classes - DEPRECATED (add deprecation warnings)
   .color-black {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-default instead of .color-black";
     color: color.$black !important;
   }
+
   .color-orange {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-accent instead of .color-orange";
     color: var(--color-text-accent) !important;
   }
+
   .color-gray {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-secondary instead of .color-gray";
     color: color.$gray-800 !important;
   }
+
   .color-white {
-    // TODO: replace with new token when available
+    @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 {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .icon-negative instead of .color-danger";
     color: var(--color-icon-negative) !important;
   }
 
   .bg-white {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .background-primary instead of .bg-white";
     background-color: color.$white !important;
     color: var(--color-text-default);
 
@@ -40,10 +99,9 @@
   }
 
   .bg-black {
-    // TODO: replace with new token when available
-    // background-color: color.$black !important;
+    @warn "Deprecated: Use .background-contrast instead of .bg-black";
     background-color: #141414 !important;
-    color: var(--color-text-default);
+    color: var(--color-text-inverse);
 
     .color-gray,
     &.color-gray {
@@ -57,64 +115,92 @@
   }
 
   .bg-orange {
+    @warn "Deprecated: Use .surface-secondary instead of .bg-orange";
     background-color: var(--color-surface-secondary) !important;
-    // TODO: replace with new token when available
     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;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-green {
+    @warn "Deprecated: Use .fill-accent2 instead of .bg-green";
     background-color: var(--color-fill-accent2) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-pink {
+    @warn "Deprecated: Use .fill-accent3 instead of .bg-pink";
     background-color: var(--color-fill-accent3) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-violet {
+    @warn "Deprecated: Use .fill-accent4 instead of .bg-violet";
     background-color: var(--color-fill-accent4) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-yellow {
+    @warn "Deprecated: Use .fill-accent5 instead of .bg-yellow";
     background-color: var(--color-fill-accent5) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-yellow-lighter {
-    // TODO: replace with new token when available
+    @warn "Deprecated: This class will be removed in future versions";
     background-color: color.$yellow-lighter !important;
     color: color.$black !important;
   }
 
   .bg-red {
-    // TODO: replace with new token when available
+    @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 {
+  .bg-orange-dark,
+  .surface-secondary,
+  .surface-tertiary {
     &::selection {
       background-color: var(--color-background-contrast);
       color: var(--color-text-inverse);
@@ -125,7 +211,14 @@
     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/index.scss

@@ -3,4 +3,5 @@
 @forward 'border';
 @forward 'layout';
 @forward 'visibility';
+@forward 'ordering';
 @forward 'horizontal-scroll';

package/src/styles/utilities/layout.scss

@@ -151,6 +151,12 @@
       border: 0;
       aspect-ratio: 1 / 1;
     }
+
+    .aspect-ratio-3-2 {
+      max-width: 100%;
+      border: 0;
+      aspect-ratio: 3 / 2;
+    }
   }
 
   @include aspect-ratio-classes;
@@ -171,6 +177,9 @@
     .d-inline-flex {
       display: inline-flex;
     }
+    .flex-column {
+      flex-direction: column;
+    }
   }
 
   @include display-classes;

package/src/styles/utilities/ordering.scss

@@ -0,0 +1,44 @@
+@use "sass:map" as sassmap;
+@use "../tokens/breakpoint";
+@use "../tools/map";
+@use "../tools/generate";
+
+@mixin order-classes($max: 12) {
+  // xs (default) classes
+  @for $order from 1 through $max {
+    // .order-{n}
+    .order-#{$order} {
+      order: #{$order} !important;
+    }
+    // .order-{n}-xs-only
+    .order-#{$order}-xs-only {
+      @include breakpoint.get(xs, only) {
+        order: #{$order} !important;
+      }
+    }
+  }
+
+  // Responsive classes for each breakpoint (except xs)
+  @each $breakpoint, $size in breakpoint.$map {
+    @if $breakpoint != "xs" {
+      @for $order from 1 through $max {
+        // .order-{n}-{breakpoint}
+        .order-#{$order}#{generate.variant-name($breakpoint, "-")} {
+          @include breakpoint.get($breakpoint) {
+            order: #{$order} !important;
+          }
+        }
+        // .order-{n}-{breakpoint}-only
+        .order-#{$order}#{generate.variant-name($breakpoint, "-")}-only {
+          @include breakpoint.get($breakpoint, only) {
+            order: #{$order} !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer utilities {
+  @include order-classes(2);
+}