@orangesk/orange-design-system 2.0.0-beta.14 → 2.0.0-beta.16

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

@@ -1,13 +1,13 @@
 @use "sass:map";
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use '../../../styles/typography/mixins' as typoMixins;
-@use './config';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/mixins" as typoMixins;
+@use "./config";
 
 @mixin list-base($border: config.$border) {
   @include typoMixins.list-unstyled;
 
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 
   > * {
     border-top: $border;
@@ -52,6 +52,13 @@
 @mixin enclosed-item($spacing: config.$enclosed-spacing) {
   padding-left: $spacing;
   padding-right: $spacing;
+
+  &:first-child {
+    border-top-width: 0;
+  }
+  &:last-child {
+    border-bottom-width: 0;
+  }
 }
 
 @mixin control($config: config.$control-states) {
@@ -60,18 +67,18 @@
   width: 100%;
   text-align: left;
 
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:hover {
-    @include generate.css-map($config, 'hover');
+    @include generate.css-map($config, "hover");
   }
 
   &:focus {
-    @include generate.css-map($config, 'hover');
+    @include generate.css-map($config, "hover");
   }
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;

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

@@ -10,7 +10,7 @@
 
   display: flex;
   max-width: none;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 }
 
 @mixin separator() {

package/src/components/Progress/styles/config.scss

@@ -1,12 +1,12 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
 
 $layout: (
-  margin-bottom: space.get(),
+  margin-bottom: space.get("large"),
 );
 
 $bar: (
-  height: space.get('small'),
+  height: space.get("small"),
   background-color: var(--color-fill-moderate),
 );
 

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

@@ -18,7 +18,7 @@
 
   @include breakpoint.get("md") {
     flex-direction: row !important;
-    margin: space.get("medium") 0;
+    margin: space.get("large") 0;
     justify-content: space-between;
   }
 }

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

@@ -12,7 +12,7 @@
   flex-wrap: nowrap;
   list-style-type: none;
   padding-left: 0;
-  margin: 0 0 space.get() 0;
+  margin: 0 0 space.get("large") 0;
   max-width: none;
   font-weight: bold;
 }

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

@@ -5,7 +5,7 @@
 
 @mixin base {
   width: 100%;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
   color: var(--color-text-default);
 }
 

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

@@ -8,7 +8,7 @@
   display: flex;
   overflow-x: auto;
   overflow-y: visible;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
   align-items: stretch;
 
   @include generate.css-map($spacing);

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

@@ -1,5 +1,4 @@
 @use "../../../styles/tokens/space";
-@use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
 @use "sass:map";
 
@@ -46,43 +45,40 @@ $colors: (
     color: var(--color-text-default),
   ),
   "orange": (
-    background-color: map.get(color.$colors-light, icon-accent),
-    color: color.$black,
+    background-color: var(--tag-orange),
+    color: var(--tag-text-dark),
   ),
   "black": (
-    background-color: map.get(color.$colors-dark, border-subtle),
-    color: color.$white,
+    background-color: var(--tag-black),
+    color: var(--tag-text-light),
   ),
   "yellow": (
-    // TODO add to config
-    background-color: #fff6b6,
-    color: color.$black,
+    background-color: var(--tag-yellow),
+    color: var(--tag-text-dark),
   ),
   "green": (
-    // TODO add to config
-    background-color: #b8ebd6,
-    color: color.$black,
+    background-color: var(--tag-green),
+    color: var(--tag-text-dark),
   ),
   "blue": (
-    // TODO add to config
-    background-color: #b5e8f7,
-    color: color.$black,
+    background-color: var(--tag-blue),
+    color: var(--tag-text-dark),
   ),
   "success": (
-    background-color: map.get(color.$colors-light, icon-positive),
-    color: color.$white,
+    background-color: var(--tag-success),
+    color: var(--tag-text-light),
   ),
   "danger": (
-    background-color: map.get(color.$colors-light, icon-negative),
-    color: color.$white,
+    background-color: var(--tag-danger),
+    color: var(--tag-text-light),
   ),
   "info": (
-    background-color: map.get(color.$colors-light, icon-information),
-    color: color.$white,
+    background-color: var(--tag-info),
+    color: var(--tag-text-light),
   ),
   "warning": (
-    background-color: map.get(color.$colors-light, icon-warning),
-    color: color.$black,
+    background-color: var(--tag-warning),
+    color: var(--tag-text-dark),
   ),
   "transparent": (
     background-color: transparent,

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

@@ -40,7 +40,7 @@
 
           &:focus-visible,
           &:hover {
-            background-color: color.$gray-600;
+            background-color: var(--color-fill-moderate);
           }
 
           &:active,

package/src/styles/base/globals-forms.scss

@@ -1,3 +1,5 @@
+@use "../tokens/color";
+
 button,
 input,
 optgroup,
@@ -13,3 +15,9 @@ fieldset {
   padding: 0;
   border: 0;
 }
+
+::placeholder {
+  color: color.$gray-700;
+  font-weight: normal;
+  opacity: 1;
+}

package/src/styles/base/globals.scss

@@ -1,6 +1,7 @@
 @use "../tokens/base";
 @use "../tokens/space";
 @use "../tokens/color";
+@use "../tokens/tag-colors";
 
 // Consider to add more conditions for light and dark themes
 :root,
@@ -15,6 +16,9 @@
   @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);
 }
 
@@ -28,6 +32,9 @@
   @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);
 }
 
@@ -162,7 +169,7 @@ table {
 }
 
 blockquote {
-  margin: 0 0 space.get("medium") 0;
+  margin: 0 0 space.get("large") 0;
 }
 
 th {

package/src/styles/export/color.js

@@ -15,7 +15,7 @@ export const exports = {
   "gray-400": "#ddd",
   "gray-500": "#dddddd",
   "gray-600": "#999",
-  "gray-700": "#666",
+  "gray-700": "#666666",
   "gray-800": "#595959",
   "gray-900": "#333",
   "success": "rgba(34, 135, 34, 0.0784313725)",

package/src/styles/tokens/color.scss

@@ -124,7 +124,7 @@ $gray-300: map.get($colors-light, surface-subtle);
 $gray-400: #ddd; // fallback
 $gray-500: map.get($colors-light, surface-moderate);
 $gray-600: #999; // fallback
-$gray-700: #666; // fallback
+$gray-700: map.get($colors-light, text-secondary); // fallback
 $gray-800: #595959; // fallback
 $gray-900: #333; // fallback
 $success: map.get($colors-light, fill-positive);

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

@@ -25,7 +25,7 @@ $body-text: (
 
 $heading-base: (
   margin-top: 0,
-  margin-bottom: space.get(),
+  margin-bottom: space.get("large"),
   font-weight: bold,
 );
 

package/src/styles/typography/mixins.scss

@@ -46,7 +46,7 @@
 @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);
 
@@ -78,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);
   }
@@ -112,7 +112,7 @@
 }
 
 @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
@@ -194,7 +194,7 @@
   }
   dd {
     margin-left: 0;
-    margin-bottom: convert.to-rem(20px);
+    margin-bottom: space.get("large");
 
     &:last-child {
       margin-bottom: 0;

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

@@ -36,7 +36,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/layout.scss

@@ -191,7 +191,7 @@
 
     .fullwidth-xs-only {
       @include breakpoint.get("xs", "only") {
-          width: 100% !important;
+        width: 100% !important;
       }
     }
 
@@ -207,7 +207,6 @@
 
   @include block-classes();
 
-
   @mixin position-classes {
     .relative {
       position: relative !important;

package/build/components/index.css

@@ -1,2 +0,0 @@
-:export{orange:#f15e00;orange-dark:#f15e00;black:#000;white:#fff;blue:#4bb4e6;green:#50be87;pink:#ffb4e6;violet:#a885d8;yellow:#ffd200;gray-300:#eee;gray-400:#ddd;gray-500:#ddd;gray-600:#999;gray-700:#666;gray-800:#595959;gray-900:#333;success:rgba(34,135,34,.078);danger:rgba(205,60,20,.078);info:rgba(65,112,216,.078);warning:rgba(255,204,0,.078)}
-/*# sourceMappingURL=index.css.map */

package/build/components/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["color.scss"],"names":[],"mappings":"AAAA,QACE,cAAe,CACf,mBAAoB,CACpB,UAAc,CACd,UAAc,CACd,YAAa,CACb,aAAc,CACd,YAAa,CACb,cAAe,CACf,cAAe,CACf,aAAiB,CACjB,aAAc,CACd,aAAiB,CACjB,aAAc,CACd,aAAc,CACd,gBAAiB,CACjB,aAAc,CACd,4BAAwC,CACxC,2BAAuC,CACvC,0BAAsC,CACtC,4BACF","file":"index.css","sourcesContent":[":export {\n  orange: #f15e00;\n  orange-dark: #f15e00;\n  black: #000000;\n  white: #ffffff;\n  blue: #4bb4e6;\n  green: #50be87;\n  pink: #ffb4e6;\n  violet: #a885d8;\n  yellow: #ffd200;\n  gray-300: #eeeeee;\n  gray-400: #ddd;\n  gray-500: #dddddd;\n  gray-600: #999;\n  gray-700: #666;\n  gray-800: #595959;\n  gray-900: #333;\n  success: rgba(34, 135, 34, 0.0784313725);\n  danger: rgba(205, 60, 20, 0.0784313725);\n  info: rgba(65, 112, 216, 0.0784313725);\n  warning: rgba(255, 204, 0, 0.0784313725);\n}"]}

package/build/lib/scripts.css

@@ -1,2 +0,0 @@
-:export{orange:#f15e00;orange-dark:#f15e00;black:#000;white:#fff;blue:#4bb4e6;green:#50be87;pink:#ffb4e6;violet:#a885d8;yellow:#ffd200;gray-300:#eee;gray-400:#ddd;gray-500:#ddd;gray-600:#999;gray-700:#666;gray-800:#595959;gray-900:#333;success:rgba(34,135,34,.078);danger:rgba(205,60,20,.078);info:rgba(65,112,216,.078);warning:rgba(255,204,0,.078)}
-/*# sourceMappingURL=scripts.css.map */

package/build/lib/scripts.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["color.scss"],"names":[],"mappings":"AAAA,QACE,cAAe,CACf,mBAAoB,CACpB,UAAc,CACd,UAAc,CACd,YAAa,CACb,aAAc,CACd,YAAa,CACb,cAAe,CACf,cAAe,CACf,aAAiB,CACjB,aAAc,CACd,aAAiB,CACjB,aAAc,CACd,aAAc,CACd,gBAAiB,CACjB,aAAc,CACd,4BAAwC,CACxC,2BAAuC,CACvC,0BAAsC,CACtC,4BACF","file":"scripts.css","sourcesContent":[":export {\n  orange: #f15e00;\n  orange-dark: #f15e00;\n  black: #000000;\n  white: #ffffff;\n  blue: #4bb4e6;\n  green: #50be87;\n  pink: #ffb4e6;\n  violet: #a885d8;\n  yellow: #ffd200;\n  gray-300: #eeeeee;\n  gray-400: #ddd;\n  gray-500: #dddddd;\n  gray-600: #999;\n  gray-700: #666;\n  gray-800: #595959;\n  gray-900: #333;\n  success: rgba(34, 135, 34, 0.0784313725);\n  danger: rgba(205, 60, 20, 0.0784313725);\n  info: rgba(65, 112, 216, 0.0784313725);\n  warning: rgba(255, 204, 0, 0.0784313725);\n}"]}