@orangesk/orange-design-system 2.0.0-beta.19 → 2.0.0-beta.20

package/src/components/Stepbar/Stepbar.tsx

@@ -19,8 +19,6 @@ export interface StepbarProps extends React.HTMLAttributes<HTMLElement> {
   showTitlesFrom?: ShowTitlesFrom;
   /** Array of step objects */
   steps: StepbarStep[];
-  /** Visual variant of the stepbar */
-  colorScheme?: "dark" | "light";
 }
 
 const CLASS_ROOT = "stepbar";
@@ -29,7 +27,6 @@ const Stepbar: React.FC<StepbarProps> = ({
   showTitlesFrom,
   steps,
   label = "krok",
-  colorScheme,
   className,
   ...other
 }) => {
@@ -68,8 +65,6 @@ const Stepbar: React.FC<StepbarProps> = ({
       className={cx(
         CLASS_ROOT,
         {
-          "is-dark": colorScheme === "dark",
-          "is-light": colorScheme === "light",
           [`${CLASS_ROOT}--wide-${showTitlesFrom}`]: showTitlesFrom,
         },
         className,

package/src/components/Table/Table.tsx

@@ -32,8 +32,6 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   /** rows to print out in the table. */
   rows: TableRow[];
   className?: string;
-  /** Sets color scheme */
-  colorScheme?: "dark" | "light";
 }
 
 const CLASS_ROOT = "table";
@@ -48,7 +46,6 @@ const Table: React.FC<TableProps> = ({
   isResponsive,
   isStriped,
   isScrollable,
-  colorScheme,
   expandableRowsCaptions = {
     header: "Rozšíriteľný",
     emptyRow: "Nerozšíriteľný riadok",
@@ -64,8 +61,6 @@ const Table: React.FC<TableProps> = ({
       [`${CLASS_ROOT}--striped`]: isStriped,
       [`${CLASS_ROOT}--compact`]: isCompact,
       [`${CLASS_ROOT}--responsive`]: isResponsive,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
     },
     className,
   );

package/src/components/Table/tests/Table.unit.test.js

@@ -51,37 +51,6 @@ describe("rendering Table", () => {
       expect(getByTestId("test-id").tagName).toBe("TABLE");
       expect(getByTestId("test-id")).toHaveClass("table");
     });
-    it("applies dark colorScheme class", () => {
-      const { getByTestId } = render(
-        <Table
-          data-testid="test-id"
-          headers={[]}
-          rows={[]}
-          colorScheme="dark"
-        />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
-    });
-    it("applies light colorScheme class", () => {
-      const { getByTestId } = render(
-        <Table
-          data-testid="test-id"
-          headers={[]}
-          rows={[]}
-          colorScheme="light"
-        />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-    });
-    it("does not apply colorScheme class by default", () => {
-      const { getByTestId } = render(
-        <Table data-testid="test-id" headers={[]} rows={[]} />,
-      );
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
-    });
   });
   describe("testing headers", () => {
     it("renders headers", () => {

package/src/components/Tabs/Tabs.tsx

@@ -17,8 +17,6 @@ interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   activeTabIndex?: number;
   /** Additional classes for tabs header. */
   classesTabNav?: string;
-  /** Color theme for the tabs */
-  colorScheme?: "dark" | "light";
   /** All tabs have equal width inside a full-width container */
   hasEqualTabWidth?: boolean;
   /** Fullwidth container */
@@ -40,7 +38,6 @@ const Tabs: React.FC<TabsProps> = ({
   hasEqualTabWidth,
   variant = "standard",
   children,
-  colorScheme,
   ...other
 }) => {
   const CLASS_TABNAV = "tab-list";
@@ -50,8 +47,6 @@ const Tabs: React.FC<TabsProps> = ({
     { [`${CLASS_TABNAV}--equal`]: hasEqualTabWidth },
     { [`${CLASS_TABNAV}--fullwidth`]: isFullWidth },
     { [`${CLASS_TABNAV}--light`]: variant === "light" },
-    { "is-dark": colorScheme === "dark" },
-    { "is-light": colorScheme === "light" },
     classesTabNav,
     className,
   );

package/src/components/Tabs/tests/Tabs.unit.test.js

@@ -99,14 +99,6 @@ describe("rendering Tabs", () => {
         }
       }
     });
-    it("has class is-dark when colorScheme is set to dark", () => {
-      const { getByTestId } = render(<TabsExample colorScheme="dark" />);
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-    });
-    it("has class is-light when colorScheme is set to light", () => {
-      const { getByTestId } = render(<TabsExample colorScheme="light" />);
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-    });
   });
   describe("checking fireEvents", () => {
     it("click in disabled tab button doesnt cause change", () => {

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

@@ -23,7 +23,7 @@ $sizes: (
     font-weight: 400,
   ),
   large: (
-    padding: convert.to-rem(12.5px) convert.to-rem(15px),
+    padding: convert.to-rem(11px) convert.to-rem(15px),
     font-size: convert.to-rem(16px),
     line-height: convert.to-rem(18px),
     font-weight: 700,

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

@@ -33,20 +33,21 @@
         ):not([class*="--transparent"]) {
         background-color: var(--color-surface-moderate);
 
-        // Clickable tags should have same default background but keep normal interactive states
         &:where(button),
         &:where(a) {
           background-color: var(--color-surface-moderate);
 
-          &:focus-visible,
-          &:hover {
-            background-color: var(--color-fill-moderate);
-          }
+          &:not([disabled]):not([aria-disabled="true"]) {
+            &:focus-visible,
+            &:hover {
+              background-color: color.$gray-600;
+            }
 
-          &:active,
-          &.is-active {
-            color: var(--color-text-inverse);
-            background-color: var(--color-background-contrast);
+            &:active,
+            &.is-active {
+              color: var(--color-text-inverse);
+              background-color: var(--color-background-contrast);
+            }
           }
         }
       }

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

@@ -9,6 +9,7 @@
   overflow: hidden;
   width: 100%;
   border-radius: convert.to-rem(10px);
+  word-break: break-word;
 }
 
 @mixin tile-image-aspect {

package/src/components/Tooltip/Tooltip.tsx

@@ -42,7 +42,6 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLElement> {
   /** Additional CSS classes */
   className?: string;
   children?: React.ReactNode;
-  colorScheme?: "dark" | "light"; // Optional color scheme prop
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
@@ -53,18 +52,10 @@ const Tooltip: React.FC<TooltipProps> = ({
   className,
   renderTrigger,
   children,
-  colorScheme,
   ...other
 }) => {
   const currentId = useHydrationSafeId(id);
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
   const Tag = tag;
 
   const [dialogRef] = useStatic(TooltipStatic as any, {

package/src/components/Tooltip/tests/Tooltip.unit.test.js

@@ -294,33 +294,4 @@ describe("rendering Tooltip", () => {
       expect(getByTestId("test-id").hidden).toBe(true);
     });
   });
-  describe("colorScheme prop", () => {
-    it("should have is-dark class when colorScheme is 'dark'", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" colorScheme="dark" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
-    });
-    it("should have is-light class when colorScheme is 'light'", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" colorScheme="light" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-    });
-    it("should not have is-dark or is-light class by default", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
-    });
-  });
 });

package/src/styles/base/globals.scss

@@ -149,3 +149,12 @@ button[aria-expanded="true"] .expand-icon {
 [hidden] {
   display: none !important;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+}

package/src/styles/base/styleguide.scss

@@ -123,7 +123,9 @@ main > div {
   }
 
   > h4 {
-    @include generate.css-map(typographyConfig.$body-text, "large");
+    @include generate.responsive-css-map(
+      sassmap.get(typographyConfig.$body-text, "large")
+    );
   }
 }
 
@@ -131,5 +133,7 @@ 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.responsive-css-map(
+    sassmap.get(typographyConfig.$body-text, "large")
+  );
 }

package/src/styles/export/color.js

@@ -2,26 +2,108 @@
 // Do not edit this file directly - edit the SCSS source instead
 
 export const exports = {
-  "orange": "#f15e00",
-  "orange-dark": "#f15e00",
-  "black": "#000000",
-  "white": "#ffffff",
-  "blue": "#4bb4e6",
-  "green": "#50be87",
-  "pink": "#ffb4e6",
-  "violet": "#a885d8",
-  "yellow": "#ffd200",
-  "gray-300": "#eeeeee",
-  "gray-400": "#dddddd",
-  "gray-500": "#dddddd",
-  "gray-600": "#999",
-  "gray-700": "#666666",
-  "gray-800": "#666666",
-  "gray-900": "#333333",
-  "success": "rgba(34, 135, 34, 0.0784313725)",
-  "danger": "rgba(205, 60, 20, 0.0784313725)",
-  "info": "rgba(65, 112, 216, 0.0784313725)",
-  "warning": "rgba(255, 204, 0, 0.0784313725)"
+  "light-background-primary": "#ffffff",
+  "light-background-secondary": "#f4f4f4",
+  "light-background-contrast": "#141414",
+  "light-background-accent": "#fff6ed",
+  "light-background-accent1-blog": "#fff6cc",
+  "light-background-accent2-blog": "#eee7f7",
+  "light-surface-primary": "#ffffff",
+  "light-surface-secondary": "#ff7900",
+  "light-surface-tertiary": "#f15e00",
+  "light-surface-subtle": "#eeeeee",
+  "light-surface-moderate": "#dddddd",
+  "light-surface-contrast": "#141414",
+  "light-surface-accent": "#fff6ed",
+  "light-fill-primary": "#ffffff",
+  "light-fill-secondary": "#ff7900",
+  "light-fill-tertiary": "#f15e00",
+  "light-fill-subtle": "#eeeeee",
+  "light-fill-moderate": "#dddddd",
+  "light-fill-disabled": "#cccccc",
+  "light-fill-contrast": "#000000",
+  "light-fill-accent1": "#4bb4e6",
+  "light-fill-accent2": "#50be87",
+  "light-fill-accent3": "#ffb4e6",
+  "light-fill-accent4": "#a885d8",
+  "light-fill-accent5": "#ffd200",
+  "light-fill-information": "rgba(65, 112, 216, 0.0784313725)",
+  "light-fill-positive": "rgba(34, 135, 34, 0.0784313725)",
+  "light-fill-warning": "rgba(255, 204, 0, 0.0784313725)",
+  "light-fill-negative": "rgba(205, 60, 20, 0.0784313725)",
+  "light-border-subtle": "#dddddd",
+  "light-border-strong": "#cccccc",
+  "light-border-contrast": "#000000",
+  "light-border-accent": "#f15e00",
+  "light-border-information": "#4170d8",
+  "light-border-positive": "#228722",
+  "light-border-warning": "#ffcc00",
+  "light-border-negative": "#cd3c14",
+  "light-icon-default": "#000000",
+  "light-icon-inverse": "#ffffff",
+  "light-icon-brand": "#f15e00",
+  "light-icon-accent": "#ffc48f",
+  "light-icon-disabled": "#cccccc",
+  "light-icon-information": "#4170d8",
+  "light-icon-positive": "#228722",
+  "light-icon-warning": "#ffcc00",
+  "light-icon-negative": "#cd3c14",
+  "light-text-default": "#000000",
+  "light-text-secondary": "#666666",
+  "light-text-disabled": "#cccccc",
+  "light-text-inverse": "#ffffff",
+  "light-text-accent": "#f15e00",
+  "dark-background-primary": "#141414",
+  "dark-background-secondary": "#333333",
+  "dark-background-contrast": "#ffffff",
+  "dark-background-accent": "#2b1a10",
+  "dark-background-accent1-blog": "#62342d",
+  "dark-background-accent2-blog": "#2b1a10",
+  "dark-surface-primary": "#141414",
+  "dark-surface-secondary": "#ff7900",
+  "dark-surface-tertiary": "#f15e00",
+  "dark-surface-subtle": "#333333",
+  "dark-surface-moderate": "#595959",
+  "dark-surface-contrast": "#ffffff",
+  "dark-surface-accent": "#2b1a10",
+  "dark-fill-primary": "#000000",
+  "dark-fill-secondary": "#ff7900",
+  "dark-fill-tertiary": "#f15e00",
+  "dark-fill-subtle": "#333333",
+  "dark-fill-moderate": "#595959",
+  "dark-fill-disabled": "#666666",
+  "dark-fill-contrast": "#ffffff",
+  "dark-fill-accent1": "#4bb4e6",
+  "dark-fill-accent2": "#50be87",
+  "dark-fill-accent3": "#ffb4e6",
+  "dark-fill-accent4": "#a885d8",
+  "dark-fill-accent5": "#ffd200",
+  "dark-fill-information": "rgba(65, 112, 216, 0.2)",
+  "dark-fill-positive": "rgba(34, 135, 34, 0.2)",
+  "dark-fill-warning": "rgba(255, 204, 0, 0.2)",
+  "dark-fill-negative": "rgba(205, 60, 20, 0.2)",
+  "dark-border-subtle": "#333333",
+  "dark-border-strong": "#666666",
+  "dark-border-contrast": "#ffffff",
+  "dark-border-accent": "#ff7900",
+  "dark-border-information": "#6699ff",
+  "dark-border-positive": "#66cc66",
+  "dark-border-warning": "#ffcc00",
+  "dark-border-negative": "#ff4d4d",
+  "dark-icon-default": "#ffffff",
+  "dark-icon-inverse": "#000000",
+  "dark-icon-brand": "#ff7900",
+  "dark-icon-accent": "#da8436",
+  "dark-icon-disabled": "#666666",
+  "dark-icon-information": "#6699ff",
+  "dark-icon-positive": "#66cc66",
+  "dark-icon-warning": "#ffcc00",
+  "dark-icon-negative": "#ff4d4d",
+  "dark-text-default": "#ffffff",
+  "dark-text-secondary": "#cccccc",
+  "dark-text-disabled": "#666666",
+  "dark-text-inverse": "#000000",
+  "dark-text-accent": "#ff7900"
 };
 
 export default exports;

package/src/styles/export/color.scss

@@ -1,24 +1,14 @@
+@use "sass:map";
 @use "../tokens/color" as color;
 
 :export {
-  orange: color.$orange;
-  orange-dark: color.$orange-dark;
-  black: color.$black;
-  white: color.$white;
-  blue: color.$blue;
-  green: color.$green;
-  pink: color.$pink;
-  violet: color.$violet;
-  yellow: color.$yellow;
-  gray-300: color.$gray-300;
-  gray-400: color.$gray-400;
-  gray-500: color.$gray-500;
-  gray-600: color.$gray-600;
-  gray-700: color.$gray-700;
-  gray-800: color.$gray-800;
-  gray-900: color.$gray-900;
-  success: color.$success;
-  danger: color.$danger;
-  info: color.$info;
-  warning: color.$warning;
+  // Export semantic color tokens from light theme
+  @each $name, $value in color.$colors-light {
+    light-#{$name}: #{$value};
+  }
+
+  // Export semantic color tokens from dark theme
+  @each $name, $value in color.$colors-dark {
+    dark-#{$name}: #{$value};
+  }
 }