Initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.github/workflows/ci.yml

@@ -0,0 +1,12 @@
+name : CI
+on   : [push, pull_request]
+jobs :
+    linting:
+        name    : "Linting"
+        runs-on : ubuntu-latest
+        steps   :
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with: { node-version: '18' }
+            - run: yarn install --non-interactive --pure-lockfile
+            - run: yarn lint --max-warnings 0 --color

.gitignore

@@ -0,0 +1 @@
+/node_modules/

.npmignore

@@ -0,0 +1,4 @@
+/.*
+
+**/*.md
+**/*.lock

.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+    "extends": "@pulsanova/stylelint-config-scss",
+    "rules": {
+        "scss/dollar-variable-default": [true, {
+            "ignore": "local"
+        }]
+    }
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-2021 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,14 @@
+# @pulsanova/icons
+
+> An icon set, ready to be used in SCSS (entirely based on Phosphor icons)
+> _(See `./package.json` for the exact version of Phosphor on which this project is based)_
+
+## Installation
+
+```bash
+# - NPM
+npm install @pulsanova/icons
+
+# - Yarn
+yarn add @pulsanova/icons
+```

package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@pulsanova/icons",
+    "version": "1.0.0",
+    "description": "An icon set, ready to be used in SCSS (entirely based on Phosphor icons)",
+    "style": "style/index.scss",
+    "homepage": "https://github.com/Pulsanova/Icons",
+    "repository": "[email protected]:Pulsanova/Icons.git",
+    "license": "MIT",
+    "scripts": {
+        "lint": "stylelint './**/*.scss'"
+    },
+    "dependencies": {
+        "@phosphor-icons/web": "~2.1.1"
+    },
+    "devDependencies": {
+        "@pulsanova/stylelint-config-scss": "~2.0.1",
+        "stylelint": "~14.1.0"
+    }
+}

style/_fonts.scss

@@ -0,0 +1,68 @@
+@use './variables' as *;
+
+// - Thin
+@font-face {
+    font-family: Phosphor;
+    font-weight: 100;
+    font-style: normal;
+    font-display: block;
+    src:
+        url('#{$font-root-path}/thin/Phosphor-Thin.woff2') format('woff2'),
+        url('#{$font-root-path}/thin/Phosphor-Thin.woff') format('woff');
+}
+
+// - Light
+@font-face {
+    font-family: Phosphor;
+    font-weight: 300;
+    font-style: normal;
+    font-display: block;
+    src:
+        url('#{$font-root-path}/light/Phosphor-Light.woff2') format('woff2'),
+        url('#{$font-root-path}/light/Phosphor-Light.woff') format('woff');
+}
+
+// - Regular
+@font-face {
+    font-family: Phosphor;
+    font-weight: 400;
+    font-style: normal;
+    font-display: block;
+    src:
+        url('#{$font-root-path}/regular/Phosphor.woff2') format('woff2'),
+        url('#{$font-root-path}/regular/Phosphor.woff') format('woff');
+}
+
+// - Bold
+@font-face {
+    font-family: Phosphor;
+    font-weight: 800;
+    font-style: normal;
+    font-display: block;
+    src:
+        url('#{$font-root-path}/bold/Phosphor-Bold.woff2') format('woff2'),
+        url('#{$font-root-path}/bold/Phosphor-Bold.woff') format('woff');
+}
+
+// - Fill
+@font-face {
+    font-family: Phosphor;
+    font-weight: 900;
+    font-style: normal;
+    font-display: block;
+    src:
+        url('#{$font-root-path}/fill/Phosphor-Fill.woff2') format('woff2'),
+        url('#{$font-root-path}/fill/Phosphor-Fill.woff') format('woff');
+}
+
+// - Duotone
+@font-face {
+    // stylelint-disable-next-line font-family-name-quotes
+    font-family: 'Phosphor-Duotone';
+    font-weight: 400;
+    font-style: normal;
+    font-display: block;
+    src:
+        url('#{$font-root-path}/duotone/Phosphor-Duotone.woff2') format('woff2'),
+        url('#{$font-root-path}/duotone/Phosphor-Duotone.woff') format('woff');
+}

style/_global.scss

@@ -0,0 +1,2 @@
+@forward './variables';
+@forward './mixins';

style/_mixins.scss

@@ -0,0 +1,172 @@
+@use './variables' as *;
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
+
+//
+// - Placeholders
+//
+
+/// Provide the base code for using the icon font.
+%icon-font {
+    /* stylelint-disable font-family-no-missing-generic-family-keyword */
+    // stylelint-disable-next-line declaration-no-important -- To prevent issues with browser extensions that change fonts.
+    font-family: Phosphor !important;
+    font-style: normal;
+    line-height: 1;
+    font-variant: normal;
+    speak: never;
+    text-transform: none;
+    text-rendering: auto;
+    word-wrap: normal;
+    white-space: nowrap;
+
+    // - Enable Ligatures.
+    // stylelint-disable-next-line order/properties-order
+    letter-spacing: 0;
+    font-feature-settings: 'liga' 1;
+    font-variant-ligatures: discretionary-ligatures;
+
+    // - Improve font rendering.
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /* stylelint-enable font-family-no-missing-generic-family-keyword */
+}
+
+%icon-font-duotone {
+    /* stylelint-disable font-family-no-missing-generic-family-keyword */
+    // stylelint-disable-next-line declaration-no-important -- To prevent issues with browser extensions that change fonts.
+    font-family: Phosphor-Duotone !important;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 1;
+    font-variant: normal;
+    text-transform: none;
+    speak: never;
+
+    // - Improve font rendering.
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /* stylelint-enable font-family-no-missing-generic-family-keyword */
+}
+
+//
+// - Functions
+//
+
+/// Retrieves the code linked to the name of an icon.
+///
+/// @example scss
+///     icon-code('plus');
+///     // => '\e3d4'
+///
+/// @link https://phosphoricons.com/ For the list of supported codes.
+///
+/// @param  {String} $icon The name of an icon
+/// @return {String}       Icon code if found, the name as is if not.
+///
+@function code($icon) {
+    @if map.has-key($list, $icon) {
+        @return map.get($list, $icon);
+    }
+    @if map.has-key($brand-list, $icon) {
+        @return map.get($brand-list, $icon);
+    }
+    @return $icon;
+}
+
+//
+// - Mixins
+//
+
+/// Helper to add an icon as a `::before` or `::after` pseudo-element.
+///
+/// @param  {String}  $icon          The name of the icon (e.g. `plus`)
+/// @param  {String}  $variant       The variant to use ("fill", "bold", "regular" (default), "light", "thin" or "duotone")
+/// @param  {Boolean} $after [false] If `true` the icon will be added after, otherwise before.
+///                                  If the variant is not duotone, the `::before` or `::after` pseudo-elements
+///                                  will be used according to this parameter, otherwise the icon will be placed
+///                                  in the right place, but both pseudo-elements will be used.
+/// @content                         Any other properties to be added to the pseudo-element.
+/// @output                          The selected pseudo-element with the requested icon, ready to be displayed.
+@mixin icon($icon, $variant: 'regular', $after: false) {
+    $weight: 400;
+
+    @if (meta.type-of($variant) == bool) {
+        $after: $variant;
+        $variant: 'regular';
+    }
+
+    @if ($variant != 'duotone') {
+        $variant-map: ( fill: 900, bold: 800, regular: 400, light: 300, thin: 100 );
+        @if (map.has-key($variant-map, $variant)) {
+            $weight: map.get($variant-map, $variant);
+        } @else {
+            @warn 'Invalid icon variant: #{$variant}';
+        }
+    } @else if (map.has-key($duotone-list, $icon) == false) {
+        @error 'The #{$icon} icon does not exist in duotone icons.';
+    }
+
+    @if ($variant == 'duotone') {
+        position: relative;
+
+        // @if ($after) {
+        //     padding-right: 1.25em;
+        // } @else {
+        //     padding-left: 1.25em;
+        // }
+
+        &::before {
+            color: $duotone-secondary-color;
+            opacity: $duotone-secondary-opacity;
+        }
+
+        &::after {
+            margin-left: -1em;
+            color: $duotone-primary-color;
+        }
+    }
+
+    @each $pseudoElement in ('before', 'after') {
+        $should-add-pseudo-element: (
+            ($variant == 'duotone') or
+            ($pseudoElement == 'before' and $after == false) or
+            ($pseudoElement == 'after' and $after)
+        );
+
+        $icon-code: code($icon);
+        @if ($variant == 'duotone') {
+            $icon-code: list.nth(
+                map.get($duotone-list, $icon),
+                if($pseudoElement == 'before', 1, 2)
+            );
+        }
+
+        @if ($should-add-pseudo-element) {
+            &::#{$pseudoElement} {
+                @if ($variant == 'duotone') {
+                    @extend %icon-font-duotone;
+
+                    // position: absolute;
+                    // top: 50%;
+                    // width: 1.25em;
+                    // text-align: center;
+                    // transform: translateY(-50%);
+
+                    @if ($after) {
+                        right: 0;
+                    } @else {
+                        left: 0;
+                    }
+                } @else {
+                    @extend %icon-font;
+                }
+
+                content: $icon-code;
+                font-weight: $weight;
+                @content;
+            }
+        }
+    }
+}