@sb1/ffe-symbols 1.1.1 → 1.1.3

package/README.md

@@ -19,31 +19,31 @@ Approach 1 is probably what you want for performance reasons.
 
 ### Using Less
 
-Copy the font files from `node_modules/@sb1/ffe-symbol/icons/` to a folder that will be shipped with your app. You can use npm-scripts, (if you use Webpack) [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin), or whatever you see fit to get the files to where they need to be.
+Copy the font files from `node_modules/@sb1/ffe-symbols/icons/` to a folder that will be shipped with your app. You can use npm-scripts, (if you use Webpack) [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin), or whatever you see fit to get the files to where they need to be.
 
 Import `node_modules/@sb1/ffe-symbols/ffe-symbol.less` in your app:
 
 ```less
-@import 'npm://@sb1/ffe-symbol/ffe-symbol.less'; // with less-plugin
-@import '~@sb1/ffe-symbol/ffe-symbol.less'; // with webpack and less-loader
-@import '../path/to/node_modules/@sb1/ffe-symbol/ffe-symbol.less'; // by path
+@import 'npm://@sb1/ffe-symbols/ffe-symbol.less'; // with less-plugin
+@import '~@sb1/ffe-symbols/ffe-symbol.less'; // with webpack and less-loader
+@import '../path/to/node_modules/@sb1/ffe-symbols/ffe-symbol.less'; // by path
 ```
 
 You need to provide a constant named `@icons-url` after the `@import` with a URL path to the fonts folder so the browser knows where to download the font files.
 
 ```less
-@import '~@sb1/ffe-symbol/ffe-symbol.less';
+@import '~@sb1/ffe-symbols/ffe-symbol.less';
 @icons-url: '/privat/forsikring/icons';
 ```
 
 ### CSS with inline fonts
 
 ```css
-@import url('~@sb1/ffe-symbol/ffe-symbol.css');
+@import url('~@sb1/ffe-symbols/ffe-symbol.css');
 ```
 
 ```less
-@import (inline) '~@sb1/ffe-symbol/ffe-symbol.css';
+@import (inline) '~@sb1/ffe-symbols/ffe-symbol.css';
 ```
 
 ## React component

package/ffe-symbol.css

@@ -1,11 +1,5 @@
 :root {
   --ffe-v-symbol-font: 'Material Symbols Rounded';
-  --ffe-v-symbol-default-color: var(--ffe-farge-vann);
-}
-@media (prefers-color-scheme: dark) {
-  :root .native {
-    --ffe-v-symbol-default-color: var(--ffe-farge-vann-70);
-  }
 }
 .ffe-symbol {
   font-family: var(--ffe-v-symbol-font);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-symbols",
-    "version": "1.1.1",
+    "version": "1.1.3",
     "description": "Styling for tilpasning av material symbols til Sb1",
     "main": "index.js",
     "scripts": {
@@ -19,6 +19,8 @@
     "author": "SpareBank1",
     "files": [
         "icons",
+        "symbol.less",
+        "theme.less",
         "ffe-symbol.less",
         "ffe-symbol-font-inline.less",
         "ffe-symbol.css"
@@ -31,5 +33,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b9fee6160c5c4b2a731a1bc3fe480a8bdfe6e838"
+    "gitHead": "436c8dc02fe8d6015efa8db9cefc1e4f16a24b21"
 }

package/symbol.less

@@ -0,0 +1,37 @@
+@import './theme.less';
+
+.ffe-symbol {
+    font-family: var(--ffe-v-symbol-font);
+    font-style: normal;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    &--xs {
+        font-size: 1rem;
+    }
+
+    &--sm {
+        font-size: 1.25rem;
+    }
+
+    &--md {
+        font-size: 1.5rem;
+    }
+
+    &--lg {
+        font-size: 2rem;
+    }
+
+    &--xl {
+        font-size: 2.5rem;
+    }
+
+    &--2xl {
+        font-size: 3rem;
+    }
+}

package/theme.less

@@ -0,0 +1,3 @@
+:root {
+    --ffe-v-symbol-font: 'Material Symbols Rounded';
+}