diff --git a/.eslintrc b/.eslintrc
index 604af8ae..e00116ff 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,45 +1,45 @@
{
- "extends": ["google"],
- "rules": {
- "require-jsdoc": 0,
- "object-curly-spacing": 0,
- "no-unused-vars": [
- "error",
- {
- "vars": "local"
- }
- ],
- "no-console": 1,
- "max-len": [
- 1,
- 120,
- 2,
- {
- "ignoreUrls": true,
- "ignoreStrings": true,
- "ignorePattern": "data:image/|\\s*require\\s*\\(|^\\s*loader\\.lazy|-\\*-"
- }
- ]
- },
- "parserOptions": {
- "ecmaVersion": 9,
- "sourceType": "module",
- "ecmaFeatures": {
- "jsx": true,
- "modules": true
+ "extends": ["google"],
+ "rules": {
+ "require-jsdoc": 0,
+ "object-curly-spacing": 0,
+ "no-unused-vars": [
+ "error",
+ {
+ "vars": "local"
+ }
+ ],
+ "no-console": 1,
+ "max-len": [
+ 1,
+ 120,
+ 2,
+ {
+ "ignoreUrls": true,
+ "ignoreStrings": true,
+ "ignorePattern": "data:image/|\\s*require\\s*\\(|^\\s*loader\\.lazy|-\\*-"
+ }
+ ]
+ },
+ "parserOptions": {
+ "ecmaVersion": 9,
+ "sourceType": "module",
+ "ecmaFeatures": {
+ "jsx": true,
+ "modules": true
+ }
+ },
+ "env": {
+ "browser": true,
+ "node": true
+ },
+ "globals": {
+ "customEvent": true,
+ "customElements": true,
+ "HTMLImports": true,
+ "Polymer": true,
+ "ShadyDOM": true,
+ "ShadyCSS": true,
+ "JSCompiler_renameProperty": true
}
- },
- "env": {
- "browser": true,
- "node": true
- },
- "globals": {
- "customEvent": true,
- "customElements": true,
- "HTMLImports": true,
- "Polymer": true,
- "ShadyDOM": true,
- "ShadyCSS": true,
- "JSCompiler_renameProperty": true
- }
}
diff --git a/.gitignore b/.gitignore
index 98d6c774..870673ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -107,3 +107,6 @@ Thumbs.db
!.eslintrc.js
!.eslintrc
!.storybook
+!.husky
+!.prettierrc
+!.prettierignore
diff --git a/.husky/.gitignore b/.husky/.gitignore
new file mode 100644
index 00000000..31354ec1
--- /dev/null
+++ b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 00000000..9129110b
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pretty-quick
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..b863c896
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,7 @@
+storybook-static
+node_modules
+static
+*.md
+*.css
+package.json
+package-lock.json
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..e74ed9ff
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "trailingComma": "es5",
+ "tabWidth": 4,
+ "semi": false,
+ "singleQuote": true
+}
diff --git a/.storybook/main.js b/.storybook/main.js
index 0e7986d6..29e33ae5 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('path')
module.exports = {
// stories: ['../stories/**/*.stories.js'], // load stories via preview.js per: https://github.com/storybookjs/storybook/issues/9793
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index d3d78ef9..6b98f8b5 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -1,159 +1,172 @@
\ No newline at end of file
+ .sidebar-container .sidebar-item {
+ font-size: 16px;
+ line-height: 20px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ border-bottom: 1px solid rgba(140, 142, 145, 0.15);
+ align-items: baseline;
+ font-weight: lighter;
+ }
+
+ /* drop down caret & active caret */
+ .sidebar-container .sidebar-item .css-bt79wf,
+ .sidebar-container .sidebar-item .css-1j9r8vi {
+ color: rgb(77, 172, 255);
+ border-top-width: 5px;
+ border-bottom-width: 5px;
+ border-left-width: 5px;
+ margin-right: 10px;
+ }
+
+ /* folder icon && grid icon */
+ .sidebar-container .sidebar-item .css-1res6at,
+ .sidebar-container .sidebar-item .css-12curbu {
+ display: none;
+ }
+
+ .sidebar-header .css-l8z9zc {
+ transform: scale(1.1);
+ }
+
+ .css-1d2iskc > .css-sqdry3 {
+ border: 1px solid rgba(255, 255, 255, 0.125);
+ }
+
+ /* component list */
+
+ /* only the outermost children */
+ nav.sidebar-container .css-0 section > a > div {
+ padding-left: 12px;
+ }
+
+ nav.sidebar-container .css-0 section > a > div > span:first-child {
+ border-left-color: rgb(77, 172, 255);
+ border-top-width: 5px;
+ border-bottom-width: 5px;
+ border-left-width: 5px;
+ margin-right: 10px;
+ }
+
+ /* group icons */
+ nav.sidebar-container .css-0 section > a > div > svg {
+ display: none;
+ }
+
+ /* only the innermost children */
+ nav.sidebar-container .css-0 section .css-0 > a > div {
+ padding-left: 18px;
+ }
+
+ nav.sidebar-container .css-0 section .css-0 > a > div > svg {
+ margin-right: 10px;
+ }
+
+ nav.sidebar-container .css-0 section .css-0 > a > div > span:last-child {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ nav.sidebar-container .css-0 section > div[type='section'] {
+ font-weight: bold;
+ margin: 0;
+ padding: 0px 20px 5px;
+ border-bottom: 1px solid rgba(140, 142, 145, 0.15);
+ }
+
+ /* addons panel */
+ #storybook-panel-root .css-0 a,
+ #storybook-panel-root .css-0 a span {
+ color: rgb(77, 172, 255);
+ }
+
+ .storybook-readme-story {
+ padding: 10px;
+ }
+
+ .storybook-readme-story p code,
+ .storybook-readme-story li code {
+ background: #182635;
+ border-radius: 2px;
+ }
+
+ .storybook-readme-story code[class*='language-'],
+ .storybook-readme-story pre[class*='language-'] {
+ background: #060708;
+ -webkit-font-smoothing: auto;
+ }
+
+ .storybook-readme-story .token.punctuation {
+ color: #a1acba;
+ }
+
+ .storybook-readme-story code.language-sh,
+ .storybook-readme-story code.language-xml,
+ .storybook-readme-story code.language-html,
+ .storybook-readme-story code.language-js {
+ color: #ccd5e0;
+ }
+
+ .storybook-readme-story .markdown-body table thead tr {
+ background-color: #141f2c;
+ }
+
+ .sidebar-container input[type='search'] {
+ color: white;
+ }
+ .sidebar-container input[type='search']:focus {
+ color: black;
+ }
+
+ /* scrollbars */
+ body {
+ scrollbar-color: var(--scrollBarThumbBackgroundColor, rgb(43, 101, 155))
+ var(--scrollBarTrackBackgroundColor, rgb(27, 45, 62));
+ }
+
+ ::-webkit-scrollbar {
+ width: 16px;
+ height: 16px;
+ background-color: transparent;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background-color: var(
+ --scrollBarThumbBackgroundColor,
+ rgb(43, 101, 155)
+ );
+ border-radius: 8px;
+ border: 3px solid transparent;
+ background-clip: padding-box;
+ }
+
+ /* visually "centers" because the dark edge of the shadow gives the illusion this is offset */
+ ::-webkit-scrollbar-thumb:vertical {
+ border-left-width: 4px;
+ }
+
+ ::-webkit-scrollbar-thumb:horizontal {
+ border-top-width: 4px;
+ }
+
+ ::-webkit-scrollbar-thumb:active,
+ ::-webkit-scrollbar-thumb:hover {
+ background-color: var(
+ --scrollBarThumbBackgroundHoverColor,
+ rgb(58, 129, 191)
+ );
+ }
+
+ ::-webkit-scrollbar-track,
+ ::-webkit-scrollbar-corner {
+ background-color: var(--scrollBarTrackBackgroundColor, rgb(27, 45, 62));
+ }
+
+ ::-webkit-scrollbar-track:vertical {
+ box-shadow: inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
+ }
+
+ ::-webkit-scrollbar-track:horizontal {
+ box-shadow: inset 1px 3px 3px 0px rgba(0, 0, 0, 0.5);
+ }
+
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 0a776b9a..f79c6b57 100755
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,5 +1,5 @@
-import themes from './theme';
-import { addons } from '@storybook/addons';
+import themes from './theme'
+import { addons } from '@storybook/addons'
addons.setConfig({
panelPosition: 'right',
selectedPanel: 'REACT_STORYBOOK/readme/panel',
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index a3023991..c001ba4e 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,12 +1,12 @@
-
-
\ No newline at end of file
+
+
diff --git a/.storybook/preview.js b/.storybook/preview.js
index b31e92d1..b8d6d0cc 100755
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,61 +1,68 @@
/* global window */
-import astroThemes from './theme';
+import astroThemes from './theme'
import {
- configure,
- addParameters,
- addDecorator,
-} from '@storybook/web-components';
-import { withA11y } from '@storybook/addon-a11y';
-import { addReadme } from 'storybook-readme/html';
+ configure,
+ addParameters,
+ addDecorator,
+} from '@storybook/web-components'
+import { withA11y } from '@storybook/addon-a11y'
+import { addReadme } from 'storybook-readme/html'
-addDecorator(withA11y);
-addDecorator(addReadme);
+addDecorator(withA11y)
+addDecorator(addReadme)
addParameters({
- themes: [
- { name: 'Light Theme', class: 'light-theme', color: '#eceff4'},
- { name: 'Dark Theme', class: 'dark-theme', color: '#192635', default: true },
- ],
- readme: {
- codeTheme: 'duotone-sea',
- theme: {
- // bodyBackgroundColor: '#969896',
- bodyColor: astroThemes.dark.textColor,
- linkColor: 'rgb(77, 172, 255)',
- hrColor: '#3c4c5d',
- // checkedRadioLabelColor: '#4078c0',
- // kbdColor: '#555',
- // kbdBackgroundColor: '#fcfcfc',
- // kbdBorderColor: '#ccc',
- // kbdBottomBorderColor: '#bbb',
- // kbdBoxShadowColor: '#bbb',
- preBackgroundColor: '#141f2c',
- // fontFamily:
- // '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
- // imgBackgroundColor: '#fff',
-
- tableTrBackgroundColor: '#182635',
- tableOddTrBackgroundColor: '#141f2c',
- tableTrBorderTopColor: '#3c4c5d',
- tableTdBorderColor: '#3c4c5d',
-
- codeBackgroundColor: '#060708',
- codeFontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
- preFontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
-
- // blockquoteBorderLeftColor: '#ddd',
- // h1h2BorderBottomColor: '#ddd',
- // h6Color: '#777',
- }
- }
-});
+ themes: [
+ { name: 'Light Theme', class: 'light-theme', color: '#eceff4' },
+ {
+ name: 'Dark Theme',
+ class: 'dark-theme',
+ color: '#192635',
+ default: true,
+ },
+ ],
+ readme: {
+ codeTheme: 'duotone-sea',
+ theme: {
+ // bodyBackgroundColor: '#969896',
+ bodyColor: astroThemes.dark.textColor,
+ linkColor: 'rgb(77, 172, 255)',
+ hrColor: '#3c4c5d',
+ // checkedRadioLabelColor: '#4078c0',
+ // kbdColor: '#555',
+ // kbdBackgroundColor: '#fcfcfc',
+ // kbdBorderColor: '#ccc',
+ // kbdBottomBorderColor: '#bbb',
+ // kbdBoxShadowColor: '#bbb',
+ preBackgroundColor: '#141f2c',
+ // fontFamily:
+ // '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+ // imgBackgroundColor: '#fff',
-const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
-configure(req, module);
+ tableTrBackgroundColor: '#182635',
+ tableOddTrBackgroundColor: '#141f2c',
+ tableTrBorderTopColor: '#3c4c5d',
+ tableTdBorderColor: '#3c4c5d',
+
+ codeBackgroundColor: '#060708',
+ codeFontFamily:
+ 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+ preFontFamily:
+ 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+
+ // blockquoteBorderLeftColor: '#ddd',
+ // h1h2BorderBottomColor: '#ddd',
+ // h6Color: '#777',
+ },
+ },
+})
+
+const req = require.context('../stories', true, /\.stories\.(js|mdx)$/)
+configure(req, module)
if (module.hot) {
- module.hot.accept(req.id, () => {
- const currentLocationHref = window.location.href;
- window.history.pushState(null, null, currentLocationHref);
- window.location.reload();
- });
+ module.hot.accept(req.id, () => {
+ const currentLocationHref = window.location.href
+ window.history.pushState(null, null, currentLocationHref)
+ window.location.reload()
+ })
}
diff --git a/.storybook/theme.js b/.storybook/theme.js
index a27039ba..382ae34f 100644
--- a/.storybook/theme.js
+++ b/.storybook/theme.js
@@ -1,75 +1,76 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming'
let light = create({
- base: 'normal',
-
- colorPrimary: 'rgb(0, 90, 143)',
- colorSecondary: 'rgb(77, 172, 255)',
-
- // UI
- appBg: 'rgb(226, 230, 238)',
- appContentBg: 'white',
- appBorderColor: '#DDD',
- appBorderRadius: 3,
-
- // Typography
- fontBase: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;y',
- fontCode: '"Roboto Mono", monospace',
-
- // Text colors
- textColor: 'rgb(16, 25, 35)',
- textInverseColor: 'rgba(255,255,255,0.9)',
-
- // Toolbar default and active colors
- barTextColor: 'silver',
- barSelectedColor: 'rgb(77, 172, 255)',
- barBg: 'white',
-
- // Form colors
- inputBg: 'white',
- inputBorder: '#DDD',
- inputTextColor: 'black',
- inputBorderRadius: 3,
-
- brandTitle: 'AstroUXDS',
- brandUrl: 'https://astrouxds.com',
- brandImage: '/img/astro-logo-small-light.svg',
-});
+ base: 'normal',
+
+ colorPrimary: 'rgb(0, 90, 143)',
+ colorSecondary: 'rgb(77, 172, 255)',
+
+ // UI
+ appBg: 'rgb(226, 230, 238)',
+ appContentBg: 'white',
+ appBorderColor: '#DDD',
+ appBorderRadius: 3,
+
+ // Typography
+ fontBase:
+ '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;y',
+ fontCode: '"Roboto Mono", monospace',
+
+ // Text colors
+ textColor: 'rgb(16, 25, 35)',
+ textInverseColor: 'rgba(255,255,255,0.9)',
+
+ // Toolbar default and active colors
+ barTextColor: 'silver',
+ barSelectedColor: 'rgb(77, 172, 255)',
+ barBg: 'white',
+
+ // Form colors
+ inputBg: 'white',
+ inputBorder: '#DDD',
+ inputTextColor: 'black',
+ inputBorderRadius: 3,
+
+ brandTitle: 'AstroUXDS',
+ brandUrl: 'https://astrouxds.com',
+ brandImage: '/img/astro-logo-small-light.svg',
+})
let dark = create({
- base: 'dark',
-
- colorPrimary: 'rgb(77, 172, 255)',
- colorSecondary: 'rgb(60, 82, 105)',
-
- // // UI
- appBg: 'rgb(20, 31, 44)',
- appContentBg: 'rgb(32, 50, 70)',
- appBorderColor: 'rgba(255,255,255, .125)',
- appBorderRadius: 0,
-
- // // Typography
- fontBase: '"Roboto", sans-serif',
- fontCode: '"Roboto Mono", monospace',
-
- // // Text colors
- textColor: 'white',
- textInverseColor: 'rgba(0,0,0,0.9)',
-
- // // Toolbar default and active colors
- barTextColor: 'white',
- barSelectedColor: 'rgb(77, 172, 255)',
- barBg: 'rgb(32, 50, 70)',
-
- // Form colors
- inputBg: 'white',
- inputBorder: '#DDD',
- inputTextColor: 'black',
- inputBorderRadius: 3,
-
- brandTitle: 'AstroUXDS',
- brandUrl: 'https://astrouxds.com',
- brandImage: '/img/astro-logo-small-dark.svg',
-});
-
-export default {light, dark}
\ No newline at end of file
+ base: 'dark',
+
+ colorPrimary: 'rgb(77, 172, 255)',
+ colorSecondary: 'rgb(60, 82, 105)',
+
+ // // UI
+ appBg: 'rgb(20, 31, 44)',
+ appContentBg: 'rgb(32, 50, 70)',
+ appBorderColor: 'rgba(255,255,255, .125)',
+ appBorderRadius: 0,
+
+ // // Typography
+ fontBase: '"Roboto", sans-serif',
+ fontCode: '"Roboto Mono", monospace',
+
+ // // Text colors
+ textColor: 'white',
+ textInverseColor: 'rgba(0,0,0,0.9)',
+
+ // // Toolbar default and active colors
+ barTextColor: 'white',
+ barSelectedColor: 'rgb(77, 172, 255)',
+ barBg: 'rgb(32, 50, 70)',
+
+ // Form colors
+ inputBg: 'white',
+ inputBorder: '#DDD',
+ inputTextColor: 'black',
+ inputBorderRadius: 3,
+
+ brandTitle: 'AstroUXDS',
+ brandUrl: 'https://astrouxds.com',
+ brandImage: '/img/astro-logo-small-dark.svg',
+})
+
+export default { light, dark }
diff --git a/README.md b/README.md
index b2e6bf0b..6bb320ab 100755
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# NOTE: The Astro team is hard at work on a much improved set of components in a new repo
+# NOTE: The Astro Component using Lit Element are in maintenace mode
-Check out the work here https://github.com/RocketCommunicationsInc/astro/blob/main/packages/web-components/readme.md and have your voice heard before release. The updated components are quite mature and we would encourage new projects to seriously consider using the updated Stencil components moving forward.
+Please see new improved Stencil based components available at https://github.com/RocketCommunicationsInc/astro/blob/main/packages/web-components/readme.md and have your voice heard before release. The updated components are quite mature and we would encourage new projects to seriously consider using the updated Stencil components moving forward.
- If you find any bugs or issues, please file them here https://github.com/RocketCommunicationsInc/astro/issues
- If you have any questions or requests please ask them here https://github.com/RocketCommunicationsInc/astro/discussions
@@ -10,15 +10,9 @@ Check out the work here https://github.com/RocketCommunicationsInc/astro/blob/ma
The Astro Web Component and CSS Library provides a starting point to begin developing Astro-compliant applications.
-
> NOTE: The Astro Component Library is still new and tends to release breaking changes, but follows semver so you can control when you incorporate them. We typically follow a 6 month release schedule which includes two major release per year with breaking changes, and intermediate patch releases with bug fixes.
-#### New to Astro 4
-- All components have been updated to [LitElement](https://lit-element.polymer-project.org) from Polymer
-- Updated documentation
-- [Storybook Component Sandbox](https://astro-components.netlify.com)
-- Merged Astro Style Library in to Astro Components
## Download and Install for all Astro Web Components and Styles
@@ -122,16 +116,18 @@ The Astro Component Library is designed for use on modern browsers that support
| `Toggle` | [@astrouxds/rux-toggle](https://www.npmjs.com/package/@astrouxds/rux-toggle) | [Docs](./src/components/rux-toggle/README.md) | [Guidelines](https://astrouxds.com/ui-components/toggle) |
| `Tree` | [@astrouxds/rux-tree](https://www.npmjs.com/package/@astrouxds/rux-tree) | [Docs](./src/components/rux-tree/README.md) | [Guidelines](https://astrouxds.com/ui-components/tree) |
-
## Contributing
-Follow the style defined in `/.eslintrc`, installing such tools as your IDE supports for revealing discrepencies before committing.
+
+Follow the style defined in `/.eslintrc`, installing such tools as your IDE supports for revealing discrepencies before committing.
### Astro Web Components
-The folders in `/src/components/*` contain the Web Components, which are tested using matching Stories in `/stories/*`. The Story files create instances of the components with various properties exposed via Storybook Knobs. All component variations should be demonstrated using Knobs before publishing or updating to ensure that the properties work as intended. There are heavily commented templates for Stories (`/stores/__rux-.stories.template.js`) and Components (`/src/components/__rux-template/`) to enable maintainers to quickly scaffold new Components. These component folders are what are ultimately published on NPM under the [AstroUXDS org](https://www.npmjs.com/org/astrouxds).
+
+The folders in `/src/components/*` contain the Web Components, which are tested using matching Stories in `/stories/*`. The Story files create instances of the components with various properties exposed via Storybook Knobs. All component variations should be demonstrated using Knobs before publishing or updating to ensure that the properties work as intended. There are heavily commented templates for Stories (`/stores/__rux-.stories.template.js`) and Components (`/src/components/__rux-template/`) to enable maintainers to quickly scaffold new Components. These component folders are what are ultimately published on NPM under the [AstroUXDS org](https://www.npmjs.com/org/astrouxds).
[Further information on Contributing to Astro Web Components](https://astro-components.netlify.app/?path=/story/astro-uxds-welcome--contributing)
### Astro CSS
+
The Astro CSS library is used to style native HTML Elements and to set theme styles that are inherited throughout the application, even when developers do not use the Web Components themselves. The CSS is divided into partials in `/src/css/*`, which is concatenated into the `/static/css/` files using [PostCSS](https://postcss.org/) when the project builds using [Gulp](https://gulpjs.com/). See `/gulpfile.js` for more details.
**Note:** Changes to the Astro CSS should never be made directly to the `/static/css/*` files, as those are for distribution only.
diff --git a/bin/astro-generate-icon-css/index.js b/bin/astro-generate-icon-css/index.js
index fa30c822..15c54d3d 100644
--- a/bin/astro-generate-icon-css/index.js
+++ b/bin/astro-generate-icon-css/index.js
@@ -1,49 +1,60 @@
#!/usr/bin/env node
/* eslint-disable */
-const Core = require('../core');
-const fs = require("fs");
+const Core = require('../core')
+const fs = require('fs')
-class AstroGenerateIconCss extends Core{
-
- constructor(){
- super();
- this.icons = [];
+class AstroGenerateIconCss extends Core {
+ constructor() {
+ super()
+ this.icons = []
}
- run(){
- const file = `${this.iconsPath}astro.svg`;
- fs.readFile(file, "utf-8", (err, data) => {
- if (err) throw err;
- const generatedCss = this.generateCssFile(data);
-
- const cssFileName = 'astro-icons.scss';
- fs.writeFile(`${this.cssPath}/${cssFileName}`, generatedCss, (err) => {
- if (err) throw err;
- this.notify('success', "The css icons file successfully generated!");
- });
- });
+ run() {
+ const file = `${this.iconsPath}astro.svg`
+ fs.readFile(file, 'utf-8', (err, data) => {
+ if (err) throw err
+ const generatedCss = this.generateCssFile(data)
+
+ const cssFileName = 'astro-icons.scss'
+ fs.writeFile(
+ `${this.cssPath}/${cssFileName}`,
+ generatedCss,
+ (err) => {
+ if (err) throw err
+ this.notify(
+ 'success',
+ 'The css icons file successfully generated!'
+ )
+ }
+ )
+ })
}
- generateCssFile(svgStr){
- const arr = svgStr.split("\n");
- const newArr = [
- `/**** DO NOT EDIT: AUTO GENERATED CSS ****/`
- ];
-
+ generateCssFile(svgStr) {
+ const arr = svgStr.split('\n')
+ const newArr = [`/**** DO NOT EDIT: AUTO GENERATED CSS ****/`]
+
arr.forEach((line) => {
- const hasId = line.indexOf("g id=");
- const matches = line.match(/\"(.*?)\"/g);
-
- if (hasId > -1 && matches && matches.length > 0 && matches[0].indexOf('-icon') === -1) {
- const id = matches[0].replace(/\"/g, "");
+ const hasId = line.indexOf('g id=')
+ const matches = line.match(/\"(.*?)\"/g)
+
+ if (
+ hasId > -1 &&
+ matches &&
+ matches.length > 0 &&
+ matches[0].indexOf('-icon') === -1
+ ) {
+ const id = matches[0].replace(/\"/g, '')
this.icons.push({
- "id": id
- });
- newArr.push(`.rux-icon--${id}{-webkit-mask: url("../icons/astro.svg#${id}") no-repeat;mask: url("../icons/astro.svg#${id}") no-repeat;}`);
- }
- });
- return newArr.join('\n');
+ id: id,
+ })
+ newArr.push(
+ `.rux-icon--${id}{-webkit-mask: url("../icons/astro.svg#${id}") no-repeat;mask: url("../icons/astro.svg#${id}") no-repeat;}`
+ )
+ }
+ })
+ return newArr.join('\n')
}
}
-module.exports = new AstroGenerateIconCss();
\ No newline at end of file
+module.exports = new AstroGenerateIconCss()
diff --git a/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/manifest.json b/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/manifest.json
index 00cefea9..d8fc11c2 100644
--- a/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/manifest.json
+++ b/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/manifest.json
@@ -1,24 +1,22 @@
{
- "author" : "Rocket Communications",
- "commands" : [
- {
- "script" : "script.js",
- "name" : "astro-icon-export",
- "handlers" : {
- "run" : "onRun"
- },
- "identifier" : "com.bohemiancoding.sketch.runscriptidentifier"
- }
- ],
- "menu" : {
- "title" : "astro-icon-export",
- "items" : [
- "com.bohemiancoding.sketch.runscriptidentifier"
- ]
- },
- "identifier" : "com.example.sketch.39b943b7-516d-4d1a-b2b5-cb3bb21ee4c9",
- "version" : "1.0",
- "description" : "",
- "authorEmail" : "",
- "name" : "astro-icon-export"
-}
\ No newline at end of file
+ "author": "Rocket Communications",
+ "commands": [
+ {
+ "script": "script.js",
+ "name": "astro-icon-export",
+ "handlers": {
+ "run": "onRun"
+ },
+ "identifier": "com.bohemiancoding.sketch.runscriptidentifier"
+ }
+ ],
+ "menu": {
+ "title": "astro-icon-export",
+ "items": ["com.bohemiancoding.sketch.runscriptidentifier"]
+ },
+ "identifier": "com.example.sketch.39b943b7-516d-4d1a-b2b5-cb3bb21ee4c9",
+ "version": "1.0",
+ "description": "",
+ "authorEmail": "",
+ "name": "astro-icon-export"
+}
diff --git a/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/script.js b/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/script.js
index 13d3f750..ad9df8b5 100644
--- a/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/script.js
+++ b/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/script.js
@@ -1,18 +1,18 @@
/* eslint-disable */
-var onRun = function(context) {
- var sketch = require('sketch/dom');
- var document = sketch.getSelectedDocument();
+var onRun = function (context) {
+ var sketch = require('sketch/dom')
+ var document = sketch.getSelectedDocument()
- if (document) {
- var options = {
- scales: '1',
- formats: 'svg',
- trimmed: true,
- output: '~/Documents/astro-exports',
- };
+ if (document) {
+ var options = {
+ scales: '1',
+ formats: 'svg',
+ trimmed: true,
+ output: '~/Documents/astro-exports',
+ }
- sketch.export(document.pages, options);
- } else {
- console.error('There was no open document');
- }
-};
+ sketch.export(document.pages, options)
+ } else {
+ console.error('There was no open document')
+ }
+}
diff --git a/bin/astro-icon-export/index.js b/bin/astro-icon-export/index.js
index 56b95e3e..566a3170 100644
--- a/bin/astro-icon-export/index.js
+++ b/bin/astro-icon-export/index.js
@@ -1,261 +1,279 @@
#!/usr/bin/env node
/* eslint-disable */
-const Core = require('../core');
-const SVGO = require("svgo");
-const fs = require("fs");
-const os = require("os");
-const prompt = require("prompt-sync")();
+const Core = require('../core')
+const SVGO = require('svgo')
+const fs = require('fs')
+const os = require('os')
+const prompt = require('prompt-sync')()
class AstroIconExport extends Core {
- constructor(){
- super();
- this.defaultSvg = '/Documents/astro-exports/Solid.svg';
- this.svgo_inst = new SVGO({
- plugins: [
- {
- cleanupAttrs: true,
- },
- {
- removeDoctype: true,
- },
- {
- removeXMLProcInst: true,
- },
- {
- removeComments: true,
- },
- {
- removeMetadata: true,
- },
- {
- removeTitle: true,
- },
- {
- removeDesc: true,
- },
- {
- removeUselessDefs: true,
- },
- {
- removeEditorsNSData: true,
- },
- {
- removeEmptyAttrs: true,
- },
- {
- removeHiddenElems: true,
- },
- {
- removeEmptyText: true,
- },
- {
- removeEmptyContainers: true,
- },
- {
- removeViewBox: false,
- },
- {
- cleanupEnableBackground: false,
- },
- {
- convertStyleToAttrs: true,
- },
- {
- convertColors: true,
- },
- {
- convertPathData: true,
- },
- {
- convertTransform: true,
- },
- {
- removeUnknownsAndDefaults: true,
- },
- {
- removeNonInheritableGroupAttrs: true,
- },
- {
- removeUselessStrokeAndFill: true,
- },
- {
- removeUnusedNS: true,
- },
- {
- cleanupIDs: false,
- },
- {
- cleanupNumericValues: true,
- },
- {
- moveElemsAttrsToGroup: true,
- },
- {
- moveGroupAttrsToElems: true,
- },
- {
- collapseGroups: true,
- },
- {
- removeRasterImages: false,
- },
- {
- mergePaths: true,
- },
- {
- convertShapeToPath: true,
- },
- {
- sortAttrs: true,
- },
- {
- removeDimensions: true,
- },
- {
- removeAttrs: { attrs: "(stroke|fill|transform)" },
- },
- {
- removeAttributesBySelector: {
- selector: "path",
- attributes: ["id"],
- },
- },
- {
- removeOffCanvasPaths: true,
- },
- ],
- js2svg: {
- pretty: true,
- },
- });
- }
+ constructor() {
+ super()
+ this.defaultSvg = '/Documents/astro-exports/Solid.svg'
+ this.svgo_inst = new SVGO({
+ plugins: [
+ {
+ cleanupAttrs: true,
+ },
+ {
+ removeDoctype: true,
+ },
+ {
+ removeXMLProcInst: true,
+ },
+ {
+ removeComments: true,
+ },
+ {
+ removeMetadata: true,
+ },
+ {
+ removeTitle: true,
+ },
+ {
+ removeDesc: true,
+ },
+ {
+ removeUselessDefs: true,
+ },
+ {
+ removeEditorsNSData: true,
+ },
+ {
+ removeEmptyAttrs: true,
+ },
+ {
+ removeHiddenElems: true,
+ },
+ {
+ removeEmptyText: true,
+ },
+ {
+ removeEmptyContainers: true,
+ },
+ {
+ removeViewBox: false,
+ },
+ {
+ cleanupEnableBackground: false,
+ },
+ {
+ convertStyleToAttrs: true,
+ },
+ {
+ convertColors: true,
+ },
+ {
+ convertPathData: true,
+ },
+ {
+ convertTransform: true,
+ },
+ {
+ removeUnknownsAndDefaults: true,
+ },
+ {
+ removeNonInheritableGroupAttrs: true,
+ },
+ {
+ removeUselessStrokeAndFill: true,
+ },
+ {
+ removeUnusedNS: true,
+ },
+ {
+ cleanupIDs: false,
+ },
+ {
+ cleanupNumericValues: true,
+ },
+ {
+ moveElemsAttrsToGroup: true,
+ },
+ {
+ moveGroupAttrsToElems: true,
+ },
+ {
+ collapseGroups: true,
+ },
+ {
+ removeRasterImages: false,
+ },
+ {
+ mergePaths: true,
+ },
+ {
+ convertShapeToPath: true,
+ },
+ {
+ sortAttrs: true,
+ },
+ {
+ removeDimensions: true,
+ },
+ {
+ removeAttrs: { attrs: '(stroke|fill|transform)' },
+ },
+ {
+ removeAttributesBySelector: {
+ selector: 'path',
+ attributes: ['id'],
+ },
+ },
+ {
+ removeOffCanvasPaths: true,
+ },
+ ],
+ js2svg: {
+ pretty: true,
+ },
+ })
+ }
- run(){
- // general guidance for a user
- console.log('Pressing [ENTER] during prompts will use default values');
-
- const filePath = this.getInputFilePath();
- fs.readFile(filePath, "utf-8", (err, data) => {
- if (err) throw err;
- this.generateIconsJson(data);
+ run() {
+ // general guidance for a user
+ console.log('Pressing [ENTER] during prompts will use default values')
- this.svgo_inst.optimize(data).then((res) => {
- res.data = this.cleanUpIds(res.data);
+ const filePath = this.getInputFilePath()
+ fs.readFile(filePath, 'utf-8', (err, data) => {
+ if (err) throw err
+ this.generateIconsJson(data)
- fs.writeFile(`${this.iconsPath}astro.svg`, res.data, (err) => {
- if (err) throw err;
- this.notify('warning', 'Modify svg viewBox to the size of exported icons');
- this.notify('success', "The svg file successfully generated!");
- });
- });
- });
- };
+ this.svgo_inst.optimize(data).then((res) => {
+ res.data = this.cleanUpIds(res.data)
- generateIconsJson(data){
- const arr = data.split('\n');
- const iconsJson = {};
+ fs.writeFile(`${this.iconsPath}astro.svg`, res.data, (err) => {
+ if (err) throw err
+ this.notify(
+ 'warning',
+ 'Modify svg viewBox to the size of exported icons'
+ )
+ this.notify(
+ 'success',
+ 'The svg file successfully generated!'
+ )
+ })
+ })
+ })
+ }
- arr.forEach(line => {
- const hasId = line.indexOf(" attr.toLowerCase())
- const [category, style, name] = iconIdAttrs;
+ generateIconsJson(data) {
+ const arr = data.split('\n')
+ const iconsJson = {}
- if(!iconsJson.hasOwnProperty(style)){
- iconsJson[style] = {};
- }
+ arr.forEach((line) => {
+ const hasId = line.indexOf('
+ attr.toLowerCase()
+ )
+ const [category, style, name] = iconIdAttrs
- iconsJson[style][category].push({name});
+ if (!iconsJson.hasOwnProperty(style)) {
+ iconsJson[style] = {}
+ }
+
+ if (!iconsJson[style].hasOwnProperty(category)) {
+ iconsJson[style][category] = []
+ }
+
+ iconsJson[style][category].push({ name })
+ }
+ }
}
- }
- }
- });
+ })
- Object.keys(iconsJson).forEach(style => {
- iconsJson[style] = this.sortObject(iconsJson[style]);
- // console.log('style', iconsJson[style]);
- Object.keys(iconsJson[style]).forEach(category => {
- iconsJson[style][category] = iconsJson[style][category].sort((a, b) => {
- if (a.name < b.name) {
- return -1;
- }
- if (a.name > b.name) {
- return 1;
- }
- return 0;
- });
- })
-
- })
+ Object.keys(iconsJson).forEach((style) => {
+ iconsJson[style] = this.sortObject(iconsJson[style])
+ // console.log('style', iconsJson[style]);
+ Object.keys(iconsJson[style]).forEach((category) => {
+ iconsJson[style][category] = iconsJson[style][category].sort(
+ (a, b) => {
+ if (a.name < b.name) {
+ return -1
+ }
+ if (a.name > b.name) {
+ return 1
+ }
+ return 0
+ }
+ )
+ })
+ })
+
+ fs.writeFile(
+ `${this.staticPath}json/rux-icons.json`,
+ JSON.stringify(iconsJson),
+ (err) => {
+ if (err) throw err
+ this.notify(
+ 'success',
+ 'The json icons list file successfully generated!'
+ )
+ }
+ )
+ }
- fs.writeFile(`${this.staticPath}json/rux-icons.json`, JSON.stringify(iconsJson), (err) => {
- if (err) throw err;
- this.notify('success', "The json icons list file successfully generated!");
- });
- }
-
- getInputFilePath(){
- const homedir = os.homedir();
- let filePath = prompt('Please enter path to file: ', this.defaultSvg);
- return os.homedir() + filePath;
- }
+ getInputFilePath() {
+ const homedir = os.homedir()
+ let filePath = prompt('Please enter path to file: ', this.defaultSvg)
+ return os.homedir() + filePath
+ }
- cleanUpIds(svgStr){
- const arr = svgStr.split("\n");
- let newArr = [];
+ cleanUpIds(svgStr) {
+ const arr = svgStr.split('\n')
+ let newArr = []
-
- arr.forEach((line) => {
- const hasId = line.indexOf(" -1 && matches && matches.length > 0) {
+ const originalId = matches[0].replace(/\"/g, '')
+ const newId = originalId
+ .substring(originalId.lastIndexOf('/') + 1)
+ .toLowerCase()
+ line = line.replace(originalId, newId)
+ }
+
+ if (isPath > -1) {
+ if (line.trim().length < 60) {
+ line = ''
+ }
+ }
- newArr.push(line);
- });
- newArr = this.insertStyling(newArr);
- return newArr.join('\n');
- };
+ newArr.push(line)
+ })
+ newArr = this.insertStyling(newArr)
+ return newArr.join('\n')
+ }
- insertStyling(arr){
- const style = '';
- arr.splice(1, 0, style);
- // Removes outer wrapper group that breaks svg
- // TODO: create cleaner way of removing unnecessary wrapping groups
- arr.splice(2, 1);
- arr.splice(arr.length -3, 1);
- return arr;
- }
+ insertStyling(arr) {
+ const style =
+ ''
+ arr.splice(1, 0, style)
+ // Removes outer wrapper group that breaks svg
+ // TODO: create cleaner way of removing unnecessary wrapping groups
+ arr.splice(2, 1)
+ arr.splice(arr.length - 3, 1)
+ return arr
+ }
- sortObject(obj) {
- return Object.keys(obj).sort().reduce(function (result, key) {
- result[key] = obj[key];
- return result;
- }, {});
- }
-};
+ sortObject(obj) {
+ return Object.keys(obj)
+ .sort()
+ .reduce(function (result, key) {
+ result[key] = obj[key]
+ return result
+ }, {})
+ }
+}
-module.exports = new AstroIconExport();
\ No newline at end of file
+module.exports = new AstroIconExport()
diff --git a/bin/core/index.js b/bin/core/index.js
index cd4ed686..c4d012cc 100644
--- a/bin/core/index.js
+++ b/bin/core/index.js
@@ -1,35 +1,35 @@
#!/usr/bin/env node
/* eslint-disable */
-class Core{
- constructor(){
- this.rootPath = `${__dirname}/../../`;
- this.srcPath = `${this.rootPath}src/`;
- this.cssPath = `${this.srcPath}scss/`;
- this.staticPath = `${this.rootPath}static/`;
- this.iconsPath = `${this.staticPath}icons/`;
+class Core {
+ constructor() {
+ this.rootPath = `${__dirname}/../../`
+ this.srcPath = `${this.rootPath}src/`
+ this.cssPath = `${this.srcPath}scss/`
+ this.staticPath = `${this.rootPath}static/`
+ this.iconsPath = `${this.staticPath}icons/`
}
- notify(type, msg){
- let colorCode = null;
- switch(type){
+ notify(type, msg) {
+ let colorCode = null
+ switch (type) {
case 'success':
- colorCode = "\x1b[32m";
- break;
+ colorCode = '\x1b[32m'
+ break
case 'warning':
- colorCode = "\x1b[33m";
- break;
+ colorCode = '\x1b[33m'
+ break
case 'danger':
- colorCode = "\x1b[31m";
- break;
+ colorCode = '\x1b[31m'
+ break
case 'info':
- colorCode = "\x1b[36m";
- break;
+ colorCode = '\x1b[36m'
+ break
}
- colorCode = colorCode ? colorCode : "\x1b[37m";
- console.log(colorCode, msg);
+ colorCode = colorCode ? colorCode : '\x1b[37m'
+ console.log(colorCode, msg)
}
}
-module.exports = Core;
\ No newline at end of file
+module.exports = Core
diff --git a/bin/index.js b/bin/index.js
index bf17b87b..0c85002f 100644
--- a/bin/index.js
+++ b/bin/index.js
@@ -1,20 +1,22 @@
#!/usr/bin/env node
/* eslint-disable */
-const astroIconExport = require('./astro-icon-export');
-const astroGenerateIconCss = require('./astro-generate-icon-css');
+const astroIconExport = require('./astro-icon-export')
+const astroGenerateIconCss = require('./astro-generate-icon-css')
-const yargs = require("yargs");
+const yargs = require('yargs')
-const options = yargs
- .usage("Usage: --a ")
- .option("a", { alias: "action", describe: "Cli action", type: "string", demandOption: false })
- .argv;
+const options = yargs.usage('Usage: --a ').option('a', {
+ alias: 'action',
+ describe: 'Cli action',
+ type: 'string',
+ demandOption: false,
+}).argv
-switch(options.action){
+switch (options.action) {
case 'astro-icon-export':
- astroIconExport.run();
- break;
+ astroIconExport.run()
+ break
case 'astro-generate-icon-css':
- astroGenerateIconCss.run();
- break;
-}
\ No newline at end of file
+ astroGenerateIconCss.run()
+ break
+}
diff --git a/gulpfile.js b/gulpfile.js
index 569fa79f..3aa6fade 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,98 +1,79 @@
-const gulp = require('gulp');
-const cssimport = require('gulp-cssimport');
-const rename = require('gulp-rename');
-const sourcemaps = require('gulp-sourcemaps');
-const csso = require('gulp-csso');
-const postcss = require('gulp-postcss');
-const postcssColor = require('postcss-color-mod-function');
-const properties = require('postcss-custom-properties');
-const sass = require('gulp-sass');
-
-
-sass.compiler = require('node-sass');
-const packageDist = './src/modules/rux-core/dist';
+const gulp = require('gulp')
+const cssimport = require('gulp-cssimport')
+const rename = require('gulp-rename')
+const sourcemaps = require('gulp-sourcemaps')
+const csso = require('gulp-csso')
+const postcss = require('gulp-postcss')
+const postcssColor = require('postcss-color-mod-function')
+const properties = require('postcss-custom-properties')
+const sass = require('gulp-sass')
+
+sass.compiler = require('node-sass')
+const packageDist = './src/modules/rux-core/dist'
gulp.task('rux-core-static', () => {
- const folders = ['fonts', 'icons'];
- return gulp.src(folders.map((folder) => `./static/${folder}/*`), {base: './static/'})
- .pipe(gulp.dest(packageDist + '/static'));
-});
+ const folders = ['fonts', 'icons']
+ return gulp
+ .src(
+ folders.map((folder) => `./static/${folder}/*`),
+ { base: './static/' }
+ )
+ .pipe(gulp.dest(packageDist + '/static'))
+})
gulp.task('rux-icon-svg', () => {
- const folders = ['fonts', 'icons'];
- return gulp.src('./static/icons/astro.svg', {base: './static/'})
- .pipe(gulp.dest('./src/components/rux-icon'));
-});
+ const folders = ['fonts', 'icons']
+ return gulp
+ .src('./static/icons/astro.svg', { base: './static/' })
+ .pipe(gulp.dest('./src/components/rux-icon'))
+})
gulp.task('rux-core-scss', () => {
- return gulp.src('./src/scss/**/*.scss', {base: './src/scss'})
- .pipe(gulp.dest(packageDist + '/scss'));
-});
+ return gulp
+ .src('./src/scss/**/*.scss', { base: './src/scss' })
+ .pipe(gulp.dest(packageDist + '/scss'))
+})
gulp.task('rux-core-dist', () => {
- return gulp.src('./src/scss/*.scss')
- .pipe(sass().on('error', sass.logError))
- .pipe(sourcemaps.init())
- .pipe(cssimport())
- .pipe(postcss([properties()]))
- .pipe(gulp.dest(packageDist + '/css'))
- .pipe(rename({ suffix: '.min' }))
- .pipe(csso())
- .pipe(gulp.dest(packageDist + '/css'));
-});
+ return gulp
+ .src('./src/scss/*.scss')
+ .pipe(sass().on('error', sass.logError))
+ .pipe(sourcemaps.init())
+ .pipe(cssimport())
+ .pipe(postcss([properties()]))
+ .pipe(gulp.dest(packageDist + '/css'))
+ .pipe(rename({ suffix: '.min' }))
+ .pipe(csso())
+ .pipe(gulp.dest(packageDist + '/css'))
+})
gulp.task('sass', () => {
- return gulp.src('./src/scss/*.scss')
- .pipe(sass().on('error', sass.logError))
- .pipe(sourcemaps.init())
- .pipe(cssimport())
- .pipe(postcss([properties()]))
- .pipe(gulp.dest('./static/css'))
- .pipe(rename({ suffix: '.min' }))
- .pipe(csso())
- .pipe(gulp.dest('./static/css'));
-});
-
-
-/*
- * * The color method handles the generation of the tint/shade
- * * color palettes using the CSS4 color-mod function (no longer)
- * * part of the spec. It takes a base color and increases the
- * * tint or shade by 20% increments
- */
-
-gulp.task('color', () => {
- return gulp
- .src('./src/scss/common/__variables.scss')
- .pipe(sass().on('error', sass.logError))
- .pipe(postcss([postcssColor()]))
- .pipe(rename('_variables.scss'))
- .pipe(gulp.dest('./src/scss/common'));
-});
-
+ return gulp
+ .src('./src/scss/*.scss')
+ .pipe(sass().on('error', sass.logError))
+ .pipe(sourcemaps.init())
+ .pipe(cssimport())
+ .pipe(postcss([properties()]))
+ .pipe(gulp.dest('./static/css'))
+ .pipe(rename({ suffix: '.min' }))
+ .pipe(csso())
+ .pipe(gulp.dest('./static/css'))
+})
/*
* * Handles watching for file changes and triggering a browser reload
*/
function watch() {
- // watch for color changes and generate palette
- gulp.watch('./src/css/common/__variables.scss', gulp.series('color'));
-
- // compile and minify css
- gulp.watch(
- './src/scss/**/*.scss',
- {
- ignored: ['./src/scss/common/__variables.scss'],
- },
- gulp.series('sass')
- );
+ // compile and minify css
+ gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
}
// only used during pre lerna publish
-gulp.task('build-rux-core', gulp.series('rux-core-static', 'rux-core-scss', 'rux-core-dist'));
+gulp.task(
+ 'build-rux-core',
+ gulp.series('rux-core-static', 'rux-core-scss', 'rux-core-dist')
+)
-gulp.task('default', gulp.series('sass', watch));
-gulp.task('css:colors', gulp.series('color', 'sass'));
+gulp.task('default', gulp.series('sass', watch))
-exports.watch = watch;
-exports.build = gulp.series('color', 'sass');
+exports.build = gulp.series('sass')
diff --git a/index.html b/index.html
index c96d5075..b364e035 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,19 @@
-
+
+
+
+
+
-
-
-
-
+ Astro App
+
- Astro App
-
+
+
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+