@nl-rvo/css-icon 1.6.1 → 1.7.0

package/dist/icon.css

@@ -0,0 +1 @@
+@import"@utrecht/icon-css/dist/index.css";.rvo-icon{background-color:var(--utrecht-icon-color, currentColor);-webkit-mask-image:var(--rvo-icon-current);mask-image:var(--rvo-icon-current);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%;min-inline-size:var(--utrecht-icon-size)}.rvo-icon--bg{background-image:var(--rvo-icon-current)}.rvo-icon--wit{--utrecht-icon-color: var(--rvo-color-wit)}.rvo-icon--hemelblauw{--utrecht-icon-color: var(--rvo-color-hemelblauw)}.rvo-icon--donkerblauw{--utrecht-icon-color: var(--rvo-color-donkerblauw)}.rvo-icon--lintblauw{--utrecht-icon-color: var(--rvo-color-lintblauw)}.rvo-icon--zwart{--utrecht-icon-color: var(--rvo-color-zwart)}.rvo-icon--grijs-700{--utrecht-icon-color: var(--rvo-color-grijs-700)}.rvo-icon--xs{--utrecht-icon-size: var(--rvo-icon-xs-width)}.rvo-icon--sm{--utrecht-icon-size: var(--rvo-icon-sm-width)}.rvo-icon--md{--utrecht-icon-size: var(--rvo-icon-md-width)}.rvo-icon--lg{--utrecht-icon-size: var(--rvo-icon-lg-width)}.rvo-icon--xl{--utrecht-icon-size: var(--rvo-icon-xl-width)}.rvo-icon--2xl{--utrecht-icon-size: var(--rvo-icon-2xl-width)}.rvo-icon--3xl{--utrecht-icon-size: var(--rvo-icon-3xl-width)}.rvo-icon--4xl{--utrecht-icon-size: var(--rvo-icon-4xl-width)}/*# sourceMappingURL=icon.css.map */

package/dist/icon.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/icon.scss"],"names":[],"mappings":"AAIQ,0CAKR,UACE,yDACA,2CACA,mCACA,oCACA,4BACA,8BACA,sBACA,uBACA,eACA,yCAGF,cACE,yCAIA,eACE,2CADF,sBACE,kDADF,uBACE,mDADF,qBACE,iDADF,iBACE,6CADF,qBACE,iDAKF,cACE,8CADF,cACE,8CADF,cACE,8CADF,cACE,8CADF,cACE,8CADF,eACE,+CADF,eACE,+CADF,eACE","file":"icon.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.1",
+  "version": "1.7.0",
   "author": "Community for NL Design System",
   "license": "CC0-1.0",
   "name": "@nl-rvo/css-icon",
@@ -9,30 +9,29 @@
     "css",
     "icon"
   ],
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/rvo.git",
+    "directory": "components/icon/style"
+  },
   "files": [
-    "src/index.scss",
-    "dist/",
-    "design-tokens.json",
-    "*.md"
+    "src/",
+    "dist/"
   ],
-  "main": "dist/index.css",
+  "exports": {
+    ".": "./dist/icon.css",
+    "./dist/*": "./dist/*"
+  },
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
-  "repository": {
-    "type": "git+ssh",
-    "url": "git@github.com:nl-design-system/rvo.git",
-    "directory": "components/icon"
-  },
-  "devDependencies": {
-    "@nl-rvo/build-utils-css": "0.1.0"
-  },
   "dependencies": {
-    "@utrecht/icon-css": "3.0.1"
+    "@utrecht/icon-css": "4.0.1"
   },
   "scripts": {
-    "build": "build-css-package",
-    "clean": "rimraf dist"
+    "build": "sass --pkg-importer=node --style=compressed ./src/:./dist/",
+    "watch": "sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
+    "clean": "rimraf ./dist/"
   }
 }

package/src/{index.scss → icon.scss}

@@ -2,7 +2,7 @@
  * @license CC0-1.0
  * Copyright (c) 2021 Community for NL Design System
  */
-@use "~@utrecht/icon-css/dist/index.css" as *;
+@import "@utrecht/icon-css/dist/index.css";
 
 $rvo-icon-kinds: (wit, hemelblauw, donkerblauw, lintblauw, zwart, grijs-700) !default;
 $rvo-icon-sizes: (xs, sm, md, lg, xl, 2xl, 3xl, 4xl) !default;

package/CHANGELOG.md

@@ -1,91 +0,0 @@
-# `@nl-rvo/css-icon`
-
-## 1.6.1
-
-### Patch Changes
-
-- e2529af: Reintroduced icon names as classes to work with generated css in assets
-
-## 1.6.0
-
-### Minor Changes
-
-- 83a85f5: Moved unneccersary functions from Icon and cleaned up the code for this component.
-
-### Patch Changes
-
-- 084a230: Ensure package is published with provenance
-
-## 1.5.1
-
-### Patch Changes
-
-- 93fdefc: Use CSS Logical properties, to support both `dir=ltr` and `dir=rtl`.
-
-## 1.5.0
-
-### Minor Changes
-
-- 8c0a7f8: Update related utrecht css packages.
-
-## 1.4.0
-
-### Minor Changes
-
-- fa36e07: Project structure updates
-
-  - Moved all Storybook stories to the /stories directory.
-  - Moved all documentation files to the /docs directory.
-  - Removed React components from library-component-react and moved them into this package.
-  - Update all .stories imports to the right react package "component-library-react"
-  - Fix all Redundant / PascalCase lint warnings for .stories files.
-
-## 1.3.1
-
-### Patch Changes
-
-- 11eb258: Update imports to support storybook v10
-
-## 1.3.0
-
-### Minor Changes
-
-- dae7f09: design token and css name changes from logoblauw to lintblauw
-
-## 1.2.3
-
-### Patch Changes
-
-- 9fffd1e: Create a new component called called Checkbox Filter. Updated icon to support logoblauw color and form-checkbox-group to have a onChange parameter.
-
-## 1.2.2
-
-### Patch Changes
-
-- 6284f7a: Create a new component called called Checkbox Filter. Updated icon to support logoblauw color and form-checkbox-group to have a onChange parameter.
-
-## 1.2.1
-
-### Patch Changes
-
-- 8dd0fe7: Added min-width to icon class to enforce its size
-
-## 1.2.0
-
-### Minor Changes
-
-- 0cdf4eb: Remove utrecht-components-css reference and include utrecht css per component when needed
-
-## 1.0.0
-
-### Major Changes
-
-- daa0537: Create npm package for each component.
-
-## Pre-releases
-
-\*@nl-rvo/component-library-css@1.0.0-alpha.290:
-Added `role="img"` and `aria-label` to component
-
-_@nl-rvo/component-library-css@1.0.0-alpha.3_:
-Added component

package/README.md

@@ -1,19 +0,0 @@
-# Icoon
-
-Een icoon is een grafisch symbool dat gebruikt wordt als visuele aanvulling bij een tekst, button of functionaliteit.
-
-## Wanneer gebruik je een Icon
-
-Gebruik een icoon als aanvulling bij bijvoorbeeld een label, een button of link om de herkenbaarheid en scanbaarheid te vergroten.
-
-## Anatomie van een Icon
-
-Het component bestaat uit:
-
-- Het symbool.
-
-## Richtlijnen
-
-- Gebruik alleen de Rijkshuisstijl iconen die beschikbaar zijn in ROOS.
-- Verschillende gebruikers kunnen een icoon op verschillende manier interpreteren en moet daarom altijd voorzien worden van tekst.
-- Iconen zijn altijd decoratief en worden verborgen voor schermlezers.

package/design-tokens.json

@@ -1,34 +0,0 @@
-{
-  "rvo": {
-    "icon": {
-      "sm": {
-        "height": {
-          "css": {
-            "syntax": "<length>",
-            "inherits": true
-          }
-        },
-        "width": {
-          "css": {
-            "syntax": "<length>",
-            "inherits": true
-          }
-        }
-      },
-      "md": {
-        "height": {
-          "css": {
-            "syntax": "<length>",
-            "inherits": true
-          }
-        },
-        "width": {
-          "css": {
-            "syntax": "<length>",
-            "inherits": true
-          }
-        }
-      }
-    }
-  }
-}

package/dist/index.css

@@ -1,99 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
-
-/**
- * @license CC0-1.0
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-icon {
-  block-size: var(--utrecht-icon-size);
-  color: var(--utrecht-icon-color);
-  display: inline-block;
-  font-size: var(--utrecht-icon-size);
-  inline-size: var(--utrecht-icon-size);
-  inset-block-start: var(--utrecht-icon-inset-block-start, 0);
-  position: relative;
-}
-
-.utrecht-icon svg {
-  height: 100%;
-  pointer-events: none;
-  width: 100%;
-}
-
-.rvo-icon {
-  background-color: var(--utrecht-icon-color, currentColor);
-  -webkit-mask-image: var(--rvo-icon-current);
-  mask-image: var(--rvo-icon-current);
-  -webkit-mask-position: center center;
-  mask-position: center center;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  min-inline-size: var(--utrecht-icon-size);
-}
-
-.rvo-icon--bg {
-  background-image: var(--rvo-icon-current);
-}
-
-.rvo-icon--wit {
-  --utrecht-icon-color: var(--rvo-color-wit);
-}
-
-.rvo-icon--hemelblauw {
-  --utrecht-icon-color: var(--rvo-color-hemelblauw);
-}
-
-.rvo-icon--donkerblauw {
-  --utrecht-icon-color: var(--rvo-color-donkerblauw);
-}
-
-.rvo-icon--lintblauw {
-  --utrecht-icon-color: var(--rvo-color-lintblauw);
-}
-
-.rvo-icon--zwart {
-  --utrecht-icon-color: var(--rvo-color-zwart);
-}
-
-.rvo-icon--grijs-700 {
-  --utrecht-icon-color: var(--rvo-color-grijs-700);
-}
-
-.rvo-icon--xs {
-  --utrecht-icon-size: var(--rvo-icon-xs-width);
-}
-
-.rvo-icon--sm {
-  --utrecht-icon-size: var(--rvo-icon-sm-width);
-}
-
-.rvo-icon--md {
-  --utrecht-icon-size: var(--rvo-icon-md-width);
-}
-
-.rvo-icon--lg {
-  --utrecht-icon-size: var(--rvo-icon-lg-width);
-}
-
-.rvo-icon--xl {
-  --utrecht-icon-size: var(--rvo-icon-xl-width);
-}
-
-.rvo-icon--2xl {
-  --utrecht-icon-size: var(--rvo-icon-2xl-width);
-}
-
-.rvo-icon--3xl {
-  --utrecht-icon-size: var(--rvo-icon-3xl-width);
-}
-
-.rvo-icon--4xl {
-  --utrecht-icon-size: var(--rvo-icon-4xl-width);
-}

package/dist/index.min.css

@@ -1 +0,0 @@
-.utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;font-size:var(--utrecht-icon-size);inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start,0);position:relative}.utrecht-icon svg{height:100%;pointer-events:none;width:100%}.rvo-icon{background-color:var(--utrecht-icon-color,currentColor);-webkit-mask-image:var(--rvo-icon-current);mask-image:var(--rvo-icon-current);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%;min-inline-size:var(--utrecht-icon-size)}.rvo-icon--bg{background-image:var(--rvo-icon-current)}.rvo-icon--wit{--utrecht-icon-color:var(--rvo-color-wit)}.rvo-icon--hemelblauw{--utrecht-icon-color:var(--rvo-color-hemelblauw)}.rvo-icon--donkerblauw{--utrecht-icon-color:var(--rvo-color-donkerblauw)}.rvo-icon--lintblauw{--utrecht-icon-color:var(--rvo-color-lintblauw)}.rvo-icon--zwart{--utrecht-icon-color:var(--rvo-color-zwart)}.rvo-icon--grijs-700{--utrecht-icon-color:var(--rvo-color-grijs-700)}.rvo-icon--xs{--utrecht-icon-size:var(--rvo-icon-xs-width)}.rvo-icon--sm{--utrecht-icon-size:var(--rvo-icon-sm-width)}.rvo-icon--md{--utrecht-icon-size:var(--rvo-icon-md-width)}.rvo-icon--lg{--utrecht-icon-size:var(--rvo-icon-lg-width)}.rvo-icon--xl{--utrecht-icon-size:var(--rvo-icon-xl-width)}.rvo-icon--2xl{--utrecht-icon-size:var(--rvo-icon-2xl-width)}.rvo-icon--3xl{--utrecht-icon-size:var(--rvo-icon-3xl-width)}.rvo-icon--4xl{--utrecht-icon-size:var(--rvo-icon-4xl-width)}

package/dist/index.mjs

@@ -1 +0,0 @@
-export default ".utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;font-size:var(--utrecht-icon-size);inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start,0);position:relative}.utrecht-icon svg{height:100%;pointer-events:none;width:100%}.rvo-icon{background-color:var(--utrecht-icon-color,currentColor);-webkit-mask-image:var(--rvo-icon-current);mask-image:var(--rvo-icon-current);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%;min-inline-size:var(--utrecht-icon-size)}.rvo-icon--bg{background-image:var(--rvo-icon-current)}.rvo-icon--wit{--utrecht-icon-color:var(--rvo-color-wit)}.rvo-icon--hemelblauw{--utrecht-icon-color:var(--rvo-color-hemelblauw)}.rvo-icon--donkerblauw{--utrecht-icon-color:var(--rvo-color-donkerblauw)}.rvo-icon--lintblauw{--utrecht-icon-color:var(--rvo-color-lintblauw)}.rvo-icon--zwart{--utrecht-icon-color:var(--rvo-color-zwart)}.rvo-icon--grijs-700{--utrecht-icon-color:var(--rvo-color-grijs-700)}.rvo-icon--xs{--utrecht-icon-size:var(--rvo-icon-xs-width)}.rvo-icon--sm{--utrecht-icon-size:var(--rvo-icon-sm-width)}.rvo-icon--md{--utrecht-icon-size:var(--rvo-icon-md-width)}.rvo-icon--lg{--utrecht-icon-size:var(--rvo-icon-lg-width)}.rvo-icon--xl{--utrecht-icon-size:var(--rvo-icon-xl-width)}.rvo-icon--2xl{--utrecht-icon-size:var(--rvo-icon-2xl-width)}.rvo-icon--3xl{--utrecht-icon-size:var(--rvo-icon-3xl-width)}.rvo-icon--4xl{--utrecht-icon-size:var(--rvo-icon-4xl-width)}";

package/dist/index.mjs.d.ts

@@ -1,2 +0,0 @@
-declare const css: string;
-export default css;