feat(ffe-chips): initial commit

packages/ffe-chips/README.md

@@ -0,0 +1,5 @@
+# @sb1/ffe-context-message
+
+This package is deprecated, and will be removed from the designsystem repo.
+
+Use the new packages for messages, please refer to [ffe-messages](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages) and/or [ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react).

packages/ffe-chips/less/chip.less

@@ -0,0 +1,112 @@
+@import 'theme';
+
+.ffe-chip {
+    --border-radius: 24px;
+    --border-color: var(--ffe-v-chip-border-color);
+    --text-color: var(--ffe-v-chip-text-color);
+    --text-offset: 12px;
+    --offset-y: var(--ffe-spacing-2xs);
+    --space-between: var(--ffe-spacing-2xs);
+    --background-color: var(--ffe-v-chip-background-color);
+
+    all: unset;
+    display: grid;
+    place-items: center;
+    grid-template-columns: var(--text-offset) 1fr var(--text-offset);
+    grid-template-rows: var(--offset-y) auto var(--offset-y);
+    border: 1px solid var(--border-color);
+    background: var(--background-color);
+    color: var(--text-color);
+    border-radius: var(--border-radius);
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
+
+    .ffe-icons,
+    &__label {
+        color: inherit;
+    }
+
+    .ffe-icons {
+        display: block;
+    }
+
+    &__label {
+        margin: 0;
+        grid-area: 2 e('/') 2 e('/') span 1 e('/') span 1;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            --background-color: var(--ffe-v-chip-background-color-hover);
+        }
+    }
+
+    &:focus-visible {
+        outline: 1px solid currentcolor;
+        outline-offset: 2px;
+    }
+
+    &--selected,
+    &:active {
+        --background-color: var(--ffe-v-chip-background-color-active);
+        --text-color: var(--ffe-v-chip-text-color-active);
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &--selected {
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                --background-color: var(
+                    --ffe-v-chip-background-color-active-hover
+                );
+            }
+        }
+    }
+}
+
+.ffe-chip--sm {
+    --text-offset: 12px;
+    --space-between: var(--ffe-spacing-2xs);
+}
+
+.ffe-chip--md {
+    --text-offset: var(--ffe-spacing-sm);
+    --offset-y: var(--ffe-spacing-xs);
+    --space-between: var(--ffe-spacing-xs);
+}
+
+.ffe-chip--lg {
+    --text-offset: var(--ffe-spacing-md);
+    --offset-y: 12px;
+    --space-between: var(--ffe-spacing-xs);
+}
+
+.ffe-chip--icon-right {
+    grid-template-columns: var(--text-offset) 1fr var(--space-between) auto var(
+            --ffe-spacing-xs
+        );
+
+    .ffe-icons {
+        grid-area: 2 e('/') 4 e('/') span 1 e('/') span 1;
+    }
+
+    .ffe-chip__label {
+        grid-area: 2 e('/') 2 e('/') span 1 e('/') span 1;
+    }
+}
+
+.ffe-chip--icon-left {
+    grid-template-columns: var(--ffe-spacing-xs) auto var(--space-between) 1fr var(
+            --text-offset
+        );
+
+    .ffe-icons {
+        grid-area: 2 e('/') 2 e('/') span 1 e('/') span 1;
+    }
+
+    .ffe-chip__label {
+        grid-area: 2 e('/') 4 e('/') span 1 e('/') span 1;
+    }
+}

packages/ffe-chips/less/theme.less

@@ -0,0 +1,32 @@
+:root,
+:host {
+    --ffe-v-chip-background-color: var(--ffe-farge-frost-30);
+    --ffe-v-chip-background-color-hover: var(--ffe-farge-frost-70);
+    --ffe-v-chip-background-color-active: var(--ffe-farge-vann-70);
+    --ffe-v-chip-background-color-active-hover: var(--ffe-farge-vann);
+    --ffe-v-chip-border-color: var(--ffe-farge-frost-70);
+    --ffe-v-chip-text-color: var(--ffe-farge-svart);
+    --ffe-v-chip-text-color-active: var(--ffe-farge-hvit);
+
+    @media (prefers-color-scheme: dark) {
+        .regard-color-scheme-preference {
+            --ffe-v-chip-background-color: var(--ffe-farge-moerkgraa);
+            --ffe-v-chip-background-color-hover: var(--ffe-farge-koksgraa);
+            --ffe-v-chip-background-color-active: var(--ffe-farge-vann);
+            --ffe-v-chip-background-color-active-hover: var(--ffe-farge-fjell);
+            --ffe-v-chip-border-color: var(--ffe-farge-koksgraa);
+            --ffe-v-chip-text-color: var(--ffe-farge-hvit);
+            --ffe-v-chip-text-color-active: var(--ffe-farge-hvit);
+        }
+    }
+
+    .ffe-chip--on-colored-bg {
+        --ffe-v-chip-background-color: var(--ffe-farge-hvit);
+        --ffe-v-chip-background-color-hover: var(--ffe-farge-frost-30);
+        --ffe-v-chip-background-color-active: var(--ffe-farge-frost-30);
+        --ffe-v-chip-background-color-active-hover: var(--ffe-farge-frost);
+        --ffe-v-chip-border-color: var(--ffe-farge-frost-30);
+        --ffe-v-chip-text-color: var(--ffe-farge-fjell);
+        --ffe-v-chip-text-color-active: var(--ffe-farge-fjell);
+    }
+}

packages/ffe-chips/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@sb1/ffe-chips",
+    "version": "1.0.0",
+    "description": "Chips are compact elements that represent an input, attribute, or action.",
+    "keywords": [
+        "ffe"
+    ],
+    "license": "MIT",
+    "author": "SpareBank 1",
+    "files": [
+        "less"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@github.com:SpareBank1/designsystem.git"
+    },
+    "scripts": {
+        "lint": "ffe-buildtool stylelint less/*.less",
+        "test": "npm run lint"
+    },
+    "dependencies": {
+        "@sb1/ffe-core": "^29.1.3"
+    },
+    "devDependencies": {
+        "@sb1/ffe-buildtool": "^0.9.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}