@heliux-org/ui-style 1.0.22

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Heliux LTD
+
+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.

package/README.md

@@ -0,0 +1,111 @@
+# Heliux Design System Foundations
+
+> This package includes all of the styling foundations for Heliux
+> Theme definition, colors, shadows, dimensions, icons, etc.
+
+
+## Installation
+
+```
+npm install @heliux-org/ui-style
+```
+
+## Usage
+
+**Styles**: Import the css file in order to have the css variables exposed on the root level
+
+```scss
+@import "~@heliux-org/ui-style/dist/index.min.css";
+```
+
+or if you want to import it in your JS files
+
+```javascript
+import "@heliux-org/ui-style/dist/index.min.css";
+```
+
+**Icons**: We expose each icon's SVG from the dist files so you can use them in your app.
+
+```javascript
+import IconName from "@heliux-org/ui-style/src/Icons/IconName.svg";
+```
+
+**Mixins and functions**: We export multiple SCSS mixins and function helpers that can be used in your application if you use SASS. All helpers can be imported as demonstrated below.
+
+```scss
+@import "~@heliux-org/ui-style/dist/mixins";
+@import "~@heliux-org/ui-style/dist/functions";
+```
+
+## Icons
+
+### Adding a new icon
+
+In order to add a new icon you will need to [fork the repo and open a PR](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork)
+
+When adding a new icon please make sure that there isn't a similar icon - if so, either replace the icon or make sure that we need another version of it
+
+### Metadata file
+
+We maintain a metadata file for each icon, it helps our icon library be more readable and searchable when searching for relevant icons
+
+How to add a new icon?
+Add the icon in SVG format under the src/Icons folder (size 20x20)
+then run `npm run generate-meta` and fill in the relevant information (you can add multiple icons and run the command once)
+
+### Icon colors
+
+We want to support the ability for the svg icon to adapt the css `color` attribute, therefore when adding an icon
+all of the colors in the SVG should be `currentColor`.
+
+In some rare occasions when you want to preserve a color within the icon please consider the following:
+
+- `currentColor` might change according to position and theming
+- this is an open source library so brand colors might change
+- please be aware that we will add a monochrome version of that icon as well
+
+## New icon request
+
+To create a non existing monday.com style icon open a PR with please see the [guidelines](ICON_REQUEST.md)
+
+## Stylelint rules
+
+It is recommended to extend our [Stylelint](https://stylelint.io/) config in order to ensure proper usage of this library.  
+To use the supplied config, add `@heliux-org/ui-style/stylelint-config` as a [Stylelint config extension](https://stylelint.io/user-guide/configure/#extends):
+
+```js
+// Your .stylelintrc
+{
+  ...
+  "extends": "@heliux-org/ui-style/stylelint-config",
+  ...
+}
+```
+
+## Functions
+
+The following SCSS functions are exported:
+
+- `camelize`: camelcase string
+- `capitalize`: capitalize string
+- `contain`: returns whether `$value` is contained in `$list` as a Boolean
+- `map-collect`: merges maps from different scopes into one
+- `extract-rgb`: returns a comma separated list of rgb values from a color
+
+## Mixins
+
+The following SCSS mixins are exported:
+
+- Common:
+  - `hidden-element`
+  - `grid-auto-fit($grid-gap, $grid-column-gap, $grid-row-gap. $grid-cell-min-width, $grid-cell-array-calc, $important)`
+  - `scroller($width, $height, $color)`
+- States:
+  - `disabled`
+  - `reset-button`
+  - `focus-style($focus-radius)`
+- Typography:
+  - `vibe-text($type, $weight)`
+  - `vibe-heading($type, $weight)`
+  - `line-clamp($lines)`
+  - `ellipsis`

package/dist/_functions.scss

@@ -0,0 +1,8 @@
+// FUNCTIONS: This partial loads global scope functions.
+
+// Functions imports
+@import "functions/camelize";
+@import "functions/capitalize";
+@import "functions/contain";
+@import "functions/map-collect";
+@import "functions/extract-rgb";

package/dist/_mixins.scss

@@ -0,0 +1,3 @@
+@import "mixins/common";
+@import "mixins/states";
+@import "mixins/typography";