Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@scaleds/components

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@scaleds/components

Scale Components

0.0.16
npm

Version published: 5 years ago

Maintainers: 3

Created: 5 years ago

Source

Scale Components

Local development

# get dependencies
yarn

# build assets
yarn build

# start development mode
yarn start

Theming

Scale uses css-in-js and particular jss as it's styling solution.

Default theme

The default theme can be found under src/theme/defaultTheme.ts

Using the theme in a HTML file

<html>
    ...
    <!-- Include theme helper  -->
    <script src="/build/theme/theme.iife.js"></script>

    <!-- Include components  -->
    <script type="module" src="/build/scale-components.esm.js"></script>
    <script nomodule src="/build/scale-components.js"></script>
    <script>
      // Applying changes to theme
      scale.useTheme({
        shape: {
          borderRadius: 24
        },
        components: {
          Button: {
            button: {
              background: 'purple',
            }
          }
        }
      })
    </script>
    <body>
      <h3 id="title">Button</h3>
      <scale-button>Click!</scale-button>
    </body>
    <script>
      // Getting current theme values
      const { colors } = scale.getTheme()
      
      document.getElementById('title').style.color = colors.primary.default
    </script>
</html>

Using the theme in a React app

Modifying existing theme, preferrably in index.(jsx|tsx)

const { useTheme } = require('@scaleds/components/dist/theme')

useTheme({
  shape: {
    borderRadius: 24
  },
  components: {
    Button: {
      button: {
        background: 'purple',
      }
    }
  }
})

Using current theme values

import React from 'react';
import { Button } from '@scaleds/react-wrapper';

const { colors } = require('@scaleds/components/dist/theme').getTheme()

const App: React.FC = () => (
  <div className="app">
    <h3 style={{ color: colors.primary.default }}>
      Button
    </h3>
    <Button variant="primary">Click!</Button>
  </div>
);

Using the theme in a Angular app

Modifying existing theme, preferrably in main.ts

const { useTheme } = require('@scaleds/components/dist/theme')

useTheme({
  shape: {
    borderRadius: 24
  },
  components: {
    Button: {
      button: {
        background: 'purple',
      }
    }
  }
})

Using current theme values

app.component.ts

import { Component } from '@angular/core';
const { colors } = require('@scaleds/components/dist/theme').getTheme()

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'boilerplate-angular';
  colors = colors
}

app.component.html

<div>
    <h3 style="color: {{colors.primary.default}}">Button</h3>
    <scale-button>Click!</scale-button>
</div>

Using the theme in a Vue app

Modifying existing theme, preferrably in main.ts

const { useTheme } = require('@scaleds/components/dist/theme.esm.js')

useTheme({
  shape: {
    borderRadius: 24
  },
  components: {
    Button: {
      button: {
        background: 'purple',
      }
    }
  }
})

Using current theme values

App.vue

<template>
  <div>
    <h3 v-bind:style="`color: ${colors.primary.default}`">
      Button
    </h3>
    <scale-button>Click!</scale-button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
const { colors } = require('@scaleds/components/dist/theme.esm.js').getTheme()

export default Vue.extend({
  name: "app",
  data: () => ({
    colors
  })
});
</script>

FAQs

What is @scaleds/components?

Is @scaleds/components well maintained?

Package last updated on 08 Apr 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install