@orangesk/orange-design-system 2.0.0-beta.29 → 2.0.0-beta.30

package/src/components/Tag/styles/style.scss

@@ -51,6 +51,11 @@
           }
         }
       }
+
+      // TODO: This is a temporary solution to make transparent tags work on gray backgrounds, we need to find a better way to handle this in the future.
+      &--transparent {
+        background-color: var(--color-surface-primary);
+      }
     }
 
     // Transparent class is a special variant of color, it's not possible to make transparent variant for each color at the moment.

package/src/components/Tile/styles/mixins.scss

@@ -77,4 +77,5 @@
 @mixin tile-action-icon {
   order: 2;
   margin-left: space.get("small");
+  flex-shrink: 0;
 }

package/src/styles/base/globals.scss

@@ -158,3 +158,7 @@ h5,
 h6 {
   font-weight: 300;
 }
+
+figure {
+  margin: 0;
+}

package/src/styles/typography/config.scss

@@ -6,7 +6,7 @@ $body-text: (
   small: (
     default: (
       font-size: convert.to-rem(14px),
-      line-height: convert.to-rem(14px),
+      line-height: convert.to-rem(20px),
       font-weight: 400,
       letter-spacing: convert.to-rem(0px),
     ),
@@ -237,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/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,6 +16,18 @@
 @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 {
   @include list-base();