@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

package/src/styles/tokens/color-vars.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "./color";
+@use "./tag-colors";
+
+// Light theme CSS variables
+:root,
+:host,
+:host(.is-light),
+.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};
+  }
+  @each $name, $value in tag-colors.$tag-colors-light {
+    --#{$name}: #{$value};
+  }
+  color: var(--color-text-default);
+}
+
+// Dark theme CSS variables
+:host(.is-dark),
+.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};
+  }
+  @each $name, $value in tag-colors.$tag-colors-dark {
+    --#{$name}: #{$value};
+  }
+  color: var(--color-text-default);
+}

package/src/styles/tokens/color.scss

@@ -9,14 +9,14 @@ $colors-light: (
   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,
@@ -33,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,
@@ -48,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: (
@@ -63,14 +63,14 @@ $colors-dark: (
   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,
@@ -112,21 +112,21 @@ $colors-dark: (
 $orange: map.get($colors-light, icon-brand);
 $orange-dark: map.get($colors-light, surface-tertiary);
 $black: map.get($colors-light, icon-default);
-$white: map.get($colors-light, icon-inverse);
+$white: map.get($colors-light, text-inverse);
 $blue: map.get($colors-light, fill-accent1);
 $green: map.get($colors-light, fill-accent2);
 $pink: map.get($colors-light, fill-accent3);
 $violet: map.get($colors-light, fill-accent4);
 $yellow: map.get($colors-light, fill-accent5);
 $yellow-lighter: #fff6b6; // not in new palette, fallback
-$red: #ff4d4d; // not in new palette, fallback
+$red: map.get($colors-dark, icon-negative);
 $gray-300: map.get($colors-light, surface-subtle);
-$gray-400: #ddd; // fallback
+$gray-400: map.get($colors-light, fill-moderate);
 $gray-500: map.get($colors-light, surface-moderate);
 $gray-600: #999; // fallback
-$gray-700: #666; // fallback
-$gray-800: #595959; // fallback
-$gray-900: #333; // fallback
+$gray-700: map.get($colors-light, text-secondary); // fallback
+$gray-800: map.get($colors-light, text-secondary);
+$gray-900: map.get($colors-dark, border-subtle);
 $success: map.get($colors-light, fill-positive);
 $danger: map.get($colors-light, fill-negative);
 $info: map.get($colors-light, fill-information);

package/src/styles/tokens/tag-colors.scss

@@ -0,0 +1,20 @@
+// Tag-specific color palette for variants that exist outside the main semantic system.
+// Tags intentionally keep the same colors in both light and dark themes, so we expose
+// a shared palette that is applied regardless of theme context.
+
+$tag-shared-tag-colors: (
+  tag-orange: #ffc48f,
+  tag-black: #333333,
+  tag-yellow: #fff6b6,
+  tag-green: #b8ebd6,
+  tag-blue: #b5e8f7,
+  tag-success: #228722,
+  tag-danger: #cd3c14,
+  tag-info: #4170d8,
+  tag-warning: #ffcc00,
+  tag-text-dark: #000000,
+  tag-text-light: #ffffff,
+);
+
+$tag-colors-light: $tag-shared-tag-colors;
+$tag-colors-dark: $tag-shared-tag-colors;

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(14px),
+      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"), // font-weight: bold,
 );
 
 $display-base: (
   margin-top: 0,
-  margin-bottom: space.get("large"),
-  font-weight: bold,
+  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),
     ),
   ),
@@ -80,27 +120,27 @@ $headings: (
     default: (
       font-size: convert.to-rem(24px),
       line-height: convert.to-rem(28px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     md: (
       font-size: convert.to-rem(28px),
       line-height: convert.to-rem(32px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
   ),
   4: (
     default: (
-      font-size: convert.to-rem(16px),
-      line-height: convert.to-rem(20px),
-      font-weight: 700,
+      font-size: convert.to-rem(18px),
+      line-height: convert.to-rem(22px),
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(24px),
       line-height: convert.to-rem(28px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.4px),
     ),
   ),
@@ -108,18 +148,24 @@ $headings: (
     default: (
       font-size: convert.to-rem(16px),
       line-height: convert.to-rem(20px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(18px),
       line-height: convert.to-rem(22px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.2px),
     ),
   ),
   6: (
     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,
@@ -133,13 +179,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),
     ),
     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 +193,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 +207,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),
     ),
   ),

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,8 +78,8 @@
   }
 
   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);
   }
@@ -117,9 +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(map.get(config.$body-text, "default"));
 }
 
 @mixin list-spacing($space, $config: config.$list-spacing) {
@@ -169,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;
   }
 }
 
@@ -186,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

@@ -16,11 +16,14 @@
 @include readability();
 
 ol,
-ul,
-dl {
+ul {
   @include list-base();
 }
 
+dl {
+  @include description-list();
+}
+
 ul {
   @include ul-list-base();
 }
@@ -56,4 +59,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);
       }
     }
   }