New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@dialpad/dialtone

Package Overview
Dependencies
Maintainers
6
Versions
505
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dialpad/dialtone - npm Package Compare versions

Comparing version 4.20.0-themes.4 to 4.20.0-themes.5

lib/build/less/variables/fonts/.DS_Store

2

package.json
{
"name": "@dialpad/dialtone",
"description": "The design system for Dialpad and UberConference",
"version": "4.20.0-themes.4",
"version": "4.20.0-themes.5",
"author": "Joshua Hynes",

@@ -6,0 +6,0 @@ "files": [

@@ -5,104 +5,29 @@ # Dialpad Design

**This is under construction.**
## Install Dialtone via NPM
## Building Dialtone locally
To add Dialtone into your project, you can install it via NPM:
Here's how to build Dialtone locally:
### Install Ruby via Homebrew:
In order to run Jekyll, you will need a full Ruby development environment. If you already have a Ruby environment installed, move on to the next step.
If you don't have Ruby installed, it's recommended you use Homebrew to install Ruby. First you must [install Homebrew](https://brew.sh/). Enter the following command from a Terminal window:
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
npm install --save-dev @dialpad/dialtone
```
This will take a few minutes to install. Once Homebrew has installed, run the following commands to install Ruby:
Once installed, add the following line in your Less file:
```
brew install ruby
brew install brew-gem
brew gem install bundler
@import "your/path/to/dialtone.less";
```
### Install Node & NPM
To run Dialtone locally, you must have Node and NPM (Node Packet Manager) installed. [Click here to download Node](https://nodejs.org/en/). The recommended Node version is fine. NPM is included with Node. If you already have Node installed, you may move onto the next step.
Once Node finishes installing, ensure it is installed properly by typing the following command in your Terminal window:
If you only need access to Dialtone's variables and customizations to build a file and don't need the whole library exported, use this line instead in your Less file:
```
node -v
@import (reference) "your/path/to/dialtone.less";
```
You should see the following response:
```
v12.13.1
```
### Clone the repo
## Building Dialtone locally
First download the repo to your machine:
To build Dialtone locally, visit our [installation instructions](https://dialpad.design/getting-started/installing/).
```
// SSH
git clone git@github.com:dialpad/dialtone.git
## Contributing
// HTTPS
git clone https://github.com/dialpad/dialtone.git
```
If you're interested in contributing to Dialtone, please read our [contributing docs](https://github.com/dialpad/dialtone/blob/master/.github/CONTRIBUTING.md) **before submitting a pull request**.
Then `cd` into the Dialtone directory:
```
cd ./path/to/dialtone
```
### Install Gulp
Dialtone uses [Gulp](https://gulpjs.com/) to automate our development workflow.
```
npm install --global gulp-cli
```
### Install Bundler & Jekyll
The Dialtone documentation website is built using Jekyll, a static HTML generator. To install Jekyll and its dependencies, do the following steps:
- Switch to the `docs` folder in the Dialtone directory. `cd docs`
- Install Bundler and Jekyll locally: `gem install bundler jekyll`
- Install the Bundle: `bundle install`
### Building Dialtone
Once everything is installed, navigate back out of the `docs` folder (`cd ../`). You can now run any of the following commands:
| Command | Run this command if you want to… |
| --- | --- |
| `$ gulp` | …compile the site **only** (CSS, SVG, HTML). |
| `$ gulp watch` | …compile and **run** the website locally. It should be available at [`http://localhost:4000`](http://localhost:4000) |
| `$ gulp version` | …update the version number on the doc site. |
Dialtone uses [Browsersync](https://www.browsersync.io/) to serve the compiled Jekyll website locally. This means you can have multiple browser windows open that sync actions together. This allows you to test media queries quickly from different window sizes.
### Adding SVG Icons
To add an SVG icon into Dialtone, you must add the SVG file into the `/lib/build/svg` folder.
Next, to ensure that the documentation stays in sync, update the `/docs/_data/icons.yml` file with the following information:
- **icon:** This is a readable name of the icon. _This is used only on the documentation website._
- **file:** This is the SVG file need. This needs to match **exactly**.
- **vue:** This should be the filename, but with **Icon** added to the beginning and with the name in [PascalCase](https://techterms.com/definition/pascalcase).
- **description:** This should provide information about what the SVG communicates and when it is typically used. This should _always_ be wrapped in "quotes".
This information can be added to the bottom of the file. Jekyll sorts this information alphabetically during the build, so there's no need to place it in the correct alphabetical place. Here's an example of the above information in the file:
```
- icon: Arrow, Backwards
file: arrow-backwards
vue: IconArrowBackwards
desc: "Arrow used to communicate direction. This can be rotated via CSS to point in other directions."
```
## Questions?
If you have a question, please feel free to [open an issue](https://github.com/dialpad/dialtone/issues/new).

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc