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

package/src/components/Forms/InputStepper/styles/style.scss

@@ -141,70 +141,4 @@
       border-color: color.$orange-dark;
     }
   }
-
-  // .input-stepper--inverse,
-  // .bg-black .input-stepper {
-  //   .input-stepper__field {
-  //     background-color: color.$black;
-  //     color: color.$white;
-  //     border-color: color.$gray-700;
-
-  //     &:disabled {
-  //       color: color.$gray-700;
-  //       -webkit-text-fill-color: color.$gray-700 !important;
-  //     }
-  //   }
-
-  //   .input-stepper__button {
-  //     border-color: color.$gray-700;
-
-  //     &--minus {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
-  //       }
-  //     }
-
-  //     &--minus:disabled {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23666666"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus:disabled {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23666666"/></svg>');
-  //       }
-  //     }
-
-  //     &:hover:not(:disabled) {
-  //       background-color: color.$white;
-  //       border-color: color.$white;
-  //     }
-
-  //     &:active:not(:disabled) {
-  //       background-color: color.$orange;
-  //       border-color: color.$orange;
-  //     }
-
-  //     &--minus:active:not(:disabled),
-  //     &--minus:hover:not(:disabled) {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus:active:not(:disabled),
-  //     &--plus:hover:not(:disabled) {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
-  //       }
-  //     }
-  //   }
-  // }
 }

package/src/components/Forms/Label/styles/config.scss

@@ -1,4 +1,7 @@
+@use "../../../../styles/tools/convert";
+
 $base: (
   display: inline,
   font-weight: bold,
+  font-size: convert.to-rem(16px),
 );

package/src/components/Forms/RangeSlider/styles/mixins.scss

@@ -135,5 +135,5 @@
 }
 
 @mixin disabled-connect() {
-  background: color.$gray-600;
+  background: var(--color-surface-moderate);
 }

package/src/components/Forms/TextInput/styles/config.scss

@@ -8,7 +8,7 @@ $base: (
   border-radius: convert.to-rem(5px),
 );
 
-$disabled: color.$gray-700;
+$disabled: var(--color-text-secondary);
 
 $background-search: (
   default: (

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

@@ -15,7 +15,7 @@ $focus: (
 $disabled: (
   background-color: var(--color-surface-subtle),
   border-color: var(--color-surface-moderate),
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
 );
 
 $disabled-checked: (
@@ -24,7 +24,7 @@ $disabled-checked: (
 
 $readonly: (
   background-color: var(--color-surface-subtle),
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
 );
 
 $invalid: (
@@ -32,7 +32,7 @@ $invalid: (
 );
 
 $placeholder: (
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
 );
 
 $radiocheck-sizes: (

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

@@ -7,7 +7,7 @@
     position: relative;
     width: convert.to-rem(220px);
     padding: 0;
-    margin: 0 0 space.get() 0;
+    margin: 0 0 space.get("large") 0;
     text-align: center;
 
     &__dial {

package/src/components/Grid/Grid.tsx

@@ -9,7 +9,7 @@ export type GridRowGapSize =
   | "large"
   | "xlarge"
   | Record<string, "medium" | "large" | "xlarge">;
-export type GridColumnGapSize = "none";
+export type GridColumnGapSize = "none" | "small" | "default" | "large";
 
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
   vAlign?: GridVAlign;

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

@@ -1,10 +1,12 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 $grid-base: 12 !default;
 
-$grid-row-gap-sizes: ('medium', 'large', 'xlarge');
+$grid-row-gap-sizes: ("medium", "large", "xlarge");
 
 $column-gap: (
-  default: space.get('small'),
+  small: space.get("xsmall"),
+  default: space.get("small"),
+  large: space.get("medium"),
   none: 0,
 );

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

@@ -1,11 +1,11 @@
 @use "sass:map";
-@use 'sass:math';
+@use "sass:math";
 
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tokens/space';
-@use './config';
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
+@use "./config";
 
 @mixin grid-base() {
   display: flex;
@@ -16,18 +16,23 @@
 
   /* Fixes VoiceOver no announcing unordered lists */
   > li::before {
-    content: ' ';
+    content: " ";
     position: absolute;
     width: 0;
     height: 0;
   }
 }
 
-@mixin grid-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-column-gap($size: "default", $column-gap: config.$column-gap) {
   $gap: map.get($column-gap, $size);
 
-  margin-left: -$gap;
-  margin-right: -$gap;
+  @if ($size == "default") {
+    margin-left: -$gap;
+    margin-right: -$gap;
+  } @else {
+    margin-left: -$gap !important;
+    margin-right: -$gap !important;
+  }
 }
 
 @mixin grid-with-equal-height-content(
@@ -53,7 +58,7 @@
 }
 
 @mixin grid-row-gap(
-  $size: 'medium',
+  $size: "medium",
   $grid-col-selector: '[class*="grid__col"]'
 ) {
   margin-top: #{space.get($size) * -1};
@@ -70,11 +75,16 @@
   max-width: 100%;
 }
 
-@mixin grid-col-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-col-column-gap($size: "default", $column-gap: config.$column-gap) {
   $gap: map.get($column-gap, $size);
 
-  padding-left: $gap;
-  padding-right: $gap;
+  @if ($size == "default") {
+    padding-left: $gap;
+    padding-right: $gap;
+  } @else {
+    padding-left: $gap !important;
+    padding-right: $gap !important;
+  }
 }
 
 @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {
@@ -100,25 +110,25 @@
 }
 
 @mixin column-classes() {
-  *[class*='grid__col'] {
+  *[class*="grid__col"] {
     @include grid-col-base();
   }
 
   @include breakpoint.each using ($breakpoint) {
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-shrink {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-shrink {
       @include column-shrink;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-fill {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-fill {
       @include column-fill;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-auto {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-auto {
       @include column-auto;
     }
 
     @for $i from 1 through config.$grid-base {
-      .grid__col-#{generate.variant-name($breakpoint, '-')}-#{$i} {
+      .grid__col-#{generate.variant-name($breakpoint, "-")}-#{$i} {
         @include column-size($i);
       }
     }

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

@@ -62,6 +62,17 @@ describe("Grid", () => {
     });
   });
 
+  ["small", "large", "none"].forEach((columnGapSize) => {
+    it(`applies grid--column-gap-${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
+      const { getByTestId } = render(
+        <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(
+        `grid--column-gap-${columnGapSize}`,
+      );
+    });
+  });
+
   it("merges additional className", () => {
     const { getByTestId } = render(
       <Grid data-testid="test-id" className="test-class" />,

package/src/components/Hero/Hero.tsx

@@ -8,7 +8,6 @@ import { Grid, GridCol } from "../Grid";
 import { Image } from "../Image";
 import { Sticker } from "../Sticker";
 
-export type HeroBackground = "white" | "black" | "gray";
 export type HeroTextSize = "medium" | "large";
 export type StickerColor = "black" | "orange";
 
@@ -48,8 +47,6 @@ export interface HeroStickerProps {
 }
 
 export interface HeroProps {
-  /** Background spanning whole viewport width */
-  colorScheme?: HeroBackground;
   /** Action button props */
   button?: HeroButtonProps;
   /** Main text */
@@ -80,7 +77,6 @@ const textSizes = {
 
 export const Hero: React.FC<HeroProps> = ({
   button,
-  colorScheme,
   description,
   hasGradientOverlay,
   image,
@@ -95,11 +91,7 @@ export const Hero: React.FC<HeroProps> = ({
       ("default" in image && image.default && Object.keys(image).length === 1)
     : false;
 
-  const className = cx("hero", {
-    "is-dark": colorScheme === "black",
-    "is-light": colorScheme === "white",
-    "is-gray": colorScheme === "gray",
-  });
+  const className = cx("hero");
   return (
     <div className={className}>
       <Container>
@@ -135,13 +127,7 @@ export const Hero: React.FC<HeroProps> = ({
                 )}
               </p>
             )}
-            {button && (
-              <Button
-                type="primary"
-                colorScheme={colorScheme === "black" ? "light" : "light"}
-                {...button}
-              />
-            )}
+            {button && <Button type="primary" {...button} />}
           </GridCol>
           {sticker && (
             <GridCol

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

@@ -5,12 +5,6 @@
 @layer components {
   .hero {
     @include mixins.base;
-    &.is-gray {
-      --color-background-primary: var(--color-surface-subtle);
-      .sticker--orange {
-        --color-text-default: #ffffff !important;
-      }
-    }
 
     &__content {
       @include mixins.content;
@@ -42,14 +36,6 @@
       &--gradient {
         @include mixins.gradient-overlay;
 
-        //stylelint-disable max-nesting-depth
-        // @include mixins.gradient-overlay-color();
-        .bg-black & {
-          // @include mixins.gradient-overlay-color("black");
-        }
-        .bg-gray & {
-          // @include mixins.gradient-overlay-color("gray");
-        }
         &-halfwidth {
           @include mixins.gradient-overlay-halfwidth;
         }