style: button card (#172)

# Motivation

New style for "button card".

# Note

PR also bump version of gix-cmp to release after merge.

# Changes

- new style `button.card`
- few variable refactored to become global, notably card border size
- grid height set to `1fr` to be consistent

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfinity/gix-components",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "scripts": {
     "dev": "npm run i18n && vite dev",
     "build": "npm run i18n && vite build",

src/lib/components/Card.svelte

@@ -88,14 +88,13 @@
 
     transition: color var(--animation-time-normal);
 
-    padding: calc(var(--padding-2x) - var(--border-size));
+    padding: calc(var(--padding-2x) - var(--card-border-size));
     margin: var(--padding-2x) 0;
     border-radius: var(--border-radius);
 
     box-sizing: border-box;
 
-    --border-size: 2px;
-    border: var(--border-size) solid transparent;
+    border: var(--card-border-size) solid transparent;
 
     &.selected {
       border: 2px solid var(--primary);
@@ -115,7 +114,7 @@
       background: var(--primary-gradient);
       color: rgba(var(--primary-contrast-rgb), var(--light-opacity));
 
-      margin: var(--border-size) 0;
+      margin: var(--card-border-size) 0;
       border: 0;
 
       // TODO: find a better solution (a mixin?)

src/lib/icons.ts

@@ -1,4 +1,5 @@
 export { default as IconAccountBalance } from "./icons/IconAccountBalance.svelte";
+export { default as IconAdd } from "./icons/IconAdd.svelte";
 export { default as IconArrowRight } from "./icons/IconArrowRight.svelte";
 export { default as IconBack } from "./icons/IconBack.svelte";
 export { default as IconCheckCircle } from "./icons/IconCheckCircle.svelte";

src/lib/icons/IconAdd.svelte

@@ -0,0 +1,15 @@
+<!-- source: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aadd%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048 -->
+<script lang="ts">
+  import { DEFAULT_ICON_SIZE } from "$lib/constants/constants";
+
+  export let size = `${DEFAULT_ICON_SIZE}px`;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height={size}
+  width={size}
+  viewBox="0 0 48 48"
+  fill="currentColor"
+  ><path d="M22.5 38V25.5H10v-3h12.5V10h3v12.5H38v3H25.5V38Z" /></svg
+>

src/lib/styles/global/button.scss

@@ -78,12 +78,14 @@ button {
     }
   }
 
+  --primary-background: linear-gradient(
+    80.26deg,
+    var(--primary) 4.98%,
+    var(--secondary) 90.33%
+  );
+
   &.primary {
-    background: linear-gradient(
-      80.26deg,
-      var(--primary) 4.98%,
-      var(--secondary) 90.33%
-    );
+    background: var(--primary-background);
     color: var(--primary-contrast);
 
     &:not([disabled]):hover,
@@ -132,4 +134,44 @@ button {
       filter: contrast(1.25);
     }
   }
+
+  &.card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--padding);
+
+    height: 100%;
+    margin: 0;
+    box-sizing: border-box;
+
+    border-radius: var(--border-radius);
+    border: var(--card-border-size) dashed var(--tertiary);
+
+    transition: all var(--animation-time-normal);
+
+    &:hover,
+    &:focus {
+      color: var(--button-card-focus-color);
+      background: var(--button-card-focus-background);
+      border: var(--card-border-size) dashed var(--secondary);
+    }
+
+    &:active {
+      filter: contrast(1.25);
+    }
+
+    :global(svg) {
+      height: var(--padding-4x);
+      width: var(--padding-4x);
+
+      padding: var(--padding);
+      box-sizing: border-box;
+
+      border-radius: 50%;
+
+      background: var(--primary-background);
+      color: var(--primary-contrast);
+    }
+  }
 }

src/lib/styles/global/grid.scss

@@ -4,7 +4,7 @@
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--padding-2x);
-  grid-auto-rows: minmax(0, max-content);
+  grid-auto-rows: 1fr;
 
   @include media.min-width(medium) {
     grid-template-columns: 1fr 1fr;

src/lib/styles/global/variables.scss

@@ -47,6 +47,8 @@
 
   --button-min-height: 45px;
 
+  --card-border-size: 2px;
+
   // Modal
 
   --alert-width: calc(100% - var(--padding-8x));

src/lib/styles/themes/dark.scss

@@ -46,6 +46,12 @@
 
   // Buttons custom colors
   --button-secondary-color: var(--secondary);
+  --button-card-focus-color: var(--secondary);
+  --button-card-focus-background: linear-gradient(
+    80.26deg,
+    rgba(100, 38, 201, 0.1) 7.33%,
+    rgba(162, 95, 195, 0.1) 92.67%
+  );
 
   --light-opacity: 0.6;
   --very-light-opacity: 0.4;

src/lib/styles/themes/light.scss

@@ -19,6 +19,12 @@
 
     // Buttons custom colors
     --button-secondary-color: var(--primary);
+    --button-card-focus-color: var(--primary);
+    --button-card-focus-background: linear-gradient(
+      80.26deg,
+      rgba(130, 102, 214, 0.1) 23.69%,
+      rgba(217, 172, 214, 0.1) 143.36%
+    );
 
     // Text color
     --value-color: #000;

src/routes/(page)/utility-classes/buttons/+page.md

@@ -1,5 +1,6 @@
 <script lang="ts">
     import IconMenu from "$lib/icons/IconMenu.svelte";
+    import IconAdd from "$lib/icons/IconAdd.svelte";
 </script>
 
 # Buttons
@@ -27,6 +28,7 @@ In Figma file the `success` and `danger` are named `positive` and `negative` but
 | Styles                                          | Disabled                                                 |
 | ----------------------------------------------- | -------------------------------------------------------- |
 | <button class="icon-only"><IconMenu /></button> | <button class="icon-only" disabled><IconMenu /></button> |
+| <button class="card"><IconAdd />Card</button>   |                                                          |
 
 ### `.full-width`