@drivy/cobalt 0.46.0 → 0.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",

package/styles/components/ContainedIcon/index.scss

@@ -11,6 +11,8 @@
   justify-content: center;
   align-items: center;
 
+  flex-shrink: 0;
+
   border-radius: border-radius(lg);
 
   .cobalt-Icon {

package/styles/components/Icon/iconColors.scss

@@ -123,7 +123,9 @@
 }
 
 .cobalt-Icon--colorBaseInteractive:hover,
-.cobalt-Icon--colorBaseInteractive:focus {
+.cobalt-Icon--colorBaseInteractive:focus,
+.c-text-baseInteractive:hover .cobalt-Icon--colorBaseInteractive,
+.c-text-baseInteractive:focus .cobalt-Icon--colorBaseInteractive {
   fill: var(--c-icon-baseInteractive--hover);
 }
 
@@ -132,7 +134,9 @@
 }
 
 .cobalt-Icon--colorSubduedInteractive:hover,
-.cobalt-Icon--colorSubduedInteractive:focus {
+.cobalt-Icon--colorSubduedInteractive:focus,
+.c-text-subduedInteractive:hover .cobalt-Icon--colorSubduedInteractive,
+.c-text-subduedInteractive:focus .cobalt-Icon--colorSubduedInteractive {
   fill: var(--c-icon-subduedInteractive--hover);
 }
 
@@ -141,7 +145,9 @@
 }
 
 .cobalt-Icon--colorAccentInteractive:hover,
-.cobalt-Icon--colorAccentInteractive:focus {
+.cobalt-Icon--colorAccentInteractive:focus,
+.c-text-accentInteractive:hover .cobalt-Icon--colorAccentInteractive,
+.c-text-accentInteractive:focus .cobalt-Icon--colorAccentInteractive {
   fill: var(--c-icon-accentInteractive--hover);
 }
 
@@ -150,6 +156,8 @@
 }
 
 .cobalt-Icon--colorAccentAltInteractive:hover,
-.cobalt-Icon--colorAccentAltInteractive:focus {
+.cobalt-Icon--colorAccentAltInteractive:focus,
+.c-text-accentAltInteractive:hover .cobalt-Icon--colorAccentAltInteractive,
+.c-text-accentAltInteractive:focus .cobalt-Icon--colorAccentAltInteractive {
   fill: var(--c-icon-accentAltInteractive--hover);
 }

package/styles/components/Layout/Surfaces/index.scss

@@ -28,28 +28,44 @@
   margin-right: auto;
 }
 
-.cobalt-layout-flexibleWithConstraint--large {
-  max-width: 1200px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-flexibleWithConstraint--large",
+  (
+    "max-width": 1200px
+  )
+);
 
-.cobalt-layout-flexibleWithConstraint--medium {
-  max-width: 840px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-flexibleWithConstraint--medium",
+  (
+    "max-width": 840px
+  )
+);
 
-.cobalt-layout-flexibleWithConstraint--small {
-  max-width: 540px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-flexibleWithConstraint--small",
+  (
+    "max-width": 540px
+  )
+);
 
-.cobalt-layout-fixed--280 {
-  width: 280px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-fixed--280",
+  (
+    "width": 280px
+  )
+);
 
-.cobalt-layout-fixed--420 {
-  width: 420px;
-}
-
-.cobalt-layout-fixed--600 {
-  width: 600px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-fixed--420",
+  (
+    "width": 420px
+  )
+);
 
-// 48px paddiing bottom
+@include class-with-responsive-variants(
+  "cobalt-layout-fixed--600",
+  (
+    "width": 600px
+  )
+);

package/styles/core/breakpoints.scss

@@ -47,3 +47,23 @@ $breakpoint-data: (
     @content;
   }
 }
+
+// Mixin to generate the same properties for all breakpoints
+@mixin class-with-responsive-variants($class-name, $properties) {
+  .#{$class-name} {
+    @each $property, $value in $properties {
+      #{$property}: $value;
+    }
+  }
+
+  // Loop through the breakpoints and generate prefixed classes for all breakpoints
+  @each $breakpoint, $breakpoint-value in $breakpoint-data {
+    @media (min-width: $breakpoint-value) {
+      .#{$breakpoint}\:#{$class-name} {
+        @each $property, $value in $properties {
+          #{$property}: $value;
+        }
+      }
+    }
+  }
+}