@opensesame/opensesameui NPM | npm.io

0.0.88-beta.2 • Published 3 years ago

Install

Weekly downloads

356

License

MIT

Repository

Last release

3 years ago

OpenSesame UI library

Installation

Checkout https://github.com/OpenSesame/OpenSesameUI/.

Open a terminal, and in the root of OpenSesame UI:

npm run build

Then, in the root of the project using OpenSesame UI:

npm link PATH-TO-OPENSESAME-UI

OpenSesame UI uses the Roboto font by default. If you want to use Roboto, add it to the head of your root HTML file

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

If you need the monospace font, Roboto Mono, add it next

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" />

Usage

Here's a theming example to get you started.

// file: app.component.ts

import { Component, OnInit } from '@angular/core';
import provideTheme from 'opensesameui/core/styles/provide-theme';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'sandbox';
  public ngOnInit(): void {
    provideTheme();
  }
}

This will create a default Material theme, and make it available to library components and your application.

If you want to override anything in the theme, pass some theme options, which are overrides to the default theme object. Note the createStyles method. It returns whatever is passed to it to prevent Typescript type widening. It's called createStyles because it's primarily used when creating custom component styles, but is useful wherever you have to assign a JSON object to a const or let.

// file: app.component.ts

import { Component, OnInit } from '@angular/core';
import provideTheme from 'opensesameui/core/styles/provide-theme';
import createStyles from 'opensesameui/core/styles/create-styles';
import teal from 'opensesameui/core/colors/teal';
import { ThemeOptions } from 'opensesameui/core/types';

const themeOptions: ThemeOptions = createStyles({
  palette: {
    background: {
      default: teal[500]
    }
  }
});

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'sandbox';
  public ngOnInit(): void {
    provideTheme(themeOptions);
  }
}

This sets the default background color to #009688 in the theme, but, the theme doesn't provide any styles. Styles are provided by each component. Global styles are provided by the cssBaseline() method. The baseline is it's own method call because OpenSesameUI might be used in an application that already has a baseline, or you might want to use a different baseline, such as Normalize.

Use cssBaseline() to provide a baseline stylesheet.

// file: app.component.ts

import { Component, OnInit } from '@angular/core';
import cssBaseline from 'opensesameui/core/styles/css-baseline';
import provideTheme from 'opensesameui/core/styles/provide-theme';
import createStyles from 'opensesameui/core/styles/create-styles';
import teal from 'opensesameui/core/colors/teal';
import { ThemeOptions } from 'opensesameui/core/types';

const themeOptions: ThemeOptions = createStyles({
  palette: {
    background: {
      default: teal[500]
    }
  }
});

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'sandbox';
  public ngOnInit(): void {
    provideTheme(themeOptions);
    cssBaseline();
  }
}

@angular/router csstype deepmerge jss jss-preset-default redux tslib

@infinitebrahmanuniverse/nolb-_opens @everything-registry/sub-chunk-690 @zalastax/nolb-_opens

0.0.86-alpha.314

3 years ago

0.0.86-alpha.313

3 years ago

0.0.86-alpha.312

3 years ago

0.0.86-alpha.310

3 years ago

0.0.86-alpha.311

3 years ago

0.0.86-alpha.309

3 years ago

0.0.86-alpha.308

3 years ago

0.0.86-alpha.307

3 years ago

0.0.86-alpha.306

3 years ago

0.0.86-alpha.305

3 years ago

0.0.86-alpha.303

3 years ago

0.0.86-alpha.304

3 years ago

0.0.86-alpha.302

3 years ago

3 years ago

3 years ago

0.0.86-alpha.300

3 years ago

0.0.86-alpha.301

3 years ago

0.0.86-alpha.299

3 years ago

3 years ago

0.0.86-alpha.298

3 years ago

0.0.86-alpha.296

3 years ago

0.0.86-alpha.295

3 years ago

0.0.86-alpha.294

3 years ago

0.0.86-alpha.293

3 years ago

0.0.86-alpha.290

3 years ago

3 years ago

0.0.86-alpha.289

3 years ago

0.0.86-alpha.288

3 years ago

0.0.86-alpha.287

3 years ago

0.0.86-alpha.286

3 years ago

0.0.86-alpha.285

3 years ago

0.0.86-alpha.284

3 years ago

0.0.86-alpha.283

3 years ago

0.0.86-alpha.281

3 years ago

0.0.86-alpha.282

3 years ago

3 years ago

0.0.86-alpha.280

3 years ago

3 years ago

0.0.86-alpha.276

3 years ago

0.0.86-alpha.277

3 years ago

0.0.86-alpha.275

3 years ago

0.0.86-alpha.278

3 years ago

0.0.86-alpha.279

3 years ago

3 years ago

0.0.86-alpha.274

3 years ago

3 years ago

0.0.86-alpha.273

3 years ago

0.0.86-alpha.270

4 years ago

0.0.86-alpha.271

4 years ago

0.0.86-alpha.269

4 years ago

0.0.86-alpha.267

4 years ago

0.0.86-alpha.268

4 years ago

4 years ago

0.0.86-alpha.266

4 years ago

4 years ago

0.0.86-alpha.264

4 years ago

0.0.86-alpha.265

4 years ago

4 years ago

0.0.86-alpha.263

4 years ago

0.0.86-alpha.254

4 years ago

0.0.86-alpha.255

4 years ago

0.0.86-alpha.252

4 years ago

0.0.86-alpha.253

4 years ago

0.0.86-alpha.258

4 years ago

0.0.86-alpha.259

4 years ago

0.0.86-alpha.256

4 years ago

0.0.86-alpha.257

4 years ago

0.0.86-alpha.261

4 years ago

0.0.86-alpha.262

4 years ago

0.0.86-alpha.260

4 years ago

0.0.86-alpha.251

4 years ago

0.0.86-alpha.250

4 years ago

0.0.86-alpha.249

4 years ago

0.0.86-alpha.247

4 years ago

0.0.86-alpha.246

4 years ago

0.0.86-alpha.245

4 years ago

0.0.86-alpha.244

4 years ago

0.0.86-alpha.243

4 years ago

0.0.86-alpha.242

4 years ago

0.0.86-alpha.241

4 years ago

0.0.86-alpha.239

4 years ago

0.0.86-alpha.240

4 years ago

0.0.86-alpha.237

4 years ago

0.0.86-alpha.238

4 years ago

0.0.86-alpha.236

4 years ago

0.0.86-alpha.233

4 years ago

0.0.86-alpha.235

4 years ago

0.0.86-alpha.229

4 years ago

0.0.86-alpha.232

4 years ago

0.0.86-alpha.231

4 years ago

4 years ago

0.0.86-alpha.228

4 years ago

4 years ago

4 years ago

0.0.86-alpha.225

4 years ago

0.0.86-alpha.226

4 years ago

0.0.86-alpha.223

4 years ago

0.0.86-alpha.224

4 years ago

0.0.86-alpha.227

4 years ago

4 years ago

0.0.86-alpha.221

4 years ago

0.0.86-alpha.220

4 years ago

0.0.86-alpha.219

4 years ago

0.0.86-alpha.218

4 years ago

0.0.86-alpha.217

4 years ago

0.0.86-alpha.216

4 years ago

0.0.86-alpha.211

4 years ago

0.0.86-alpha.214

4 years ago

0.0.86-alpha.215

4 years ago

0.0.86-alpha.210

4 years ago

0.0.86-alpha.209

4 years ago

0.0.86-alpha.206

4 years ago

4 years ago

0.0.86-alpha.205

4 years ago

0.0.86-alpha.204

4 years ago

0.0.86-alpha.203

4 years ago

0.0.86-alpha.202

4 years ago

0.0.86-alpha.201

4 years ago

0.0.86-alpha.200

4 years ago

0.0.86-alpha.199

4 years ago

4 years ago

0.0.86-alpha.198

4 years ago

4 years ago

0.0.86-alpha.197

4 years ago

0.0.86-alpha.184

4 years ago

0.0.86-alpha.185

4 years ago

0.0.86-alpha.182

4 years ago

0.0.86-alpha.183

4 years ago

0.0.86-alpha.188

4 years ago

0.0.86-alpha.189

4 years ago

0.0.86-alpha.186

4 years ago

0.0.86-alpha.187

4 years ago

0.0.86-alpha.181

4 years ago

0.0.86-alpha.195

4 years ago

0.0.86-alpha.196

4 years ago

0.0.86-alpha.193

4 years ago

0.0.86-alpha.194

4 years ago

0.0.86-alpha.191

4 years ago

0.0.86-alpha.192

4 years ago

0.0.86-alpha.190

4 years ago

0.0.86-alpha.179

4 years ago

0.0.86-alpha.174

4 years ago

0.0.86-alpha.177

4 years ago

0.0.86-alpha.178

4 years ago

0.0.86-alpha.175

4 years ago

0.0.86-alpha.176

4 years ago

0.0.86-alpha.173

4 years ago

0.0.86-alpha.171

4 years ago

0.0.86-alpha.170

4 years ago

0.0.86-alpha.169

4 years ago

0.0.86-alpha.167

4 years ago

0.0.86-alpha.166

4 years ago

0.0.86-alpha.165

4 years ago

0.0.86-alpha.164

4 years ago

0.0.86-alpha.163

4 years ago

0.0.86-alpha.161

4 years ago

4 years ago

0.0.86-alpha.157

4 years ago

0.0.86-alpha.156

4 years ago

0.0.86-alpha.154

4 years ago

4 years ago

0.0.86-alpha.152

4 years ago

0.0.86-alpha.153

4 years ago

0.0.86-alpha.151

4 years ago

4 years ago

0.0.86-alpha.149

4 years ago

0.0.86-alpha.148

4 years ago

4 years ago

0.0.86-alpha.138

4 years ago

0.0.86-alpha.139

4 years ago

0.0.86-alpha.140

4 years ago

0.0.86-alpha.141

4 years ago

0.0.86-alpha.144

4 years ago

0.0.86-alpha.142

4 years ago

0.0.86-alpha.143

4 years ago

0.0.86-alpha.147

4 years ago

4 years ago

0.0.86-alpha.137

4 years ago

0.0.86-alpha.136

4 years ago

0.0.86-alpha.134

4 years ago

4 years ago

0.0.86-alpha.135

4 years ago

0.0.86-alpha.128

4 years ago

0.0.86-alpha.129

4 years ago

0.0.86-alpha.130

4 years ago

0.0.86-alpha.133

4 years ago

0.0.86-alpha.131

4 years ago

0.0.86-alpha.132

4 years ago

0.0.86-alpha.127

4 years ago

4 years ago

0.0.86-alpha.126

4 years ago

0.0.86-alpha.125

4 years ago

0.0.86-alpha.123

4 years ago

0.0.86-alpha.124

4 years ago

4 years ago

0.0.86-alpha.122

4 years ago

0.0.86-alpha.121

4 years ago

0.0.86-alpha.120

4 years ago

0.0.86-alpha.119

4 years ago

0.0.86-alpha.118

4 years ago

0.0.86-alpha.115

4 years ago

0.0.86-alpha.116

4 years ago

0.0.86-alpha.117

4 years ago

0.0.86-alpha.113

4 years ago

0.0.86-alpha.114

4 years ago

0.0.86-alpha.112

4 years ago

0.0.86-alpha.111

4 years ago

0.0.86-alpha.110

4 years ago

4 years ago

0.0.86-alpha.109

4 years ago

0.0.86-alpha.108

4 years ago

0.0.86-alpha.106

4 years ago

0.0.86-alpha.107

4 years ago

4 years ago

0.0.86-alpha.105

4 years ago

0.0.86-alpha.104

4 years ago

0.0.86-alpha.103

4 years ago

0.0.86-alpha.102

4 years ago

0.0.86-alpha.101

4 years ago

0.0.86-alpha.100

4 years ago

0.0.86-alpha.98

4 years ago

0.0.86-alpha.99

4 years ago

0.0.86-alpha.97

4 years ago

0.0.86-alpha.95

4 years ago

0.0.86-alpha.96

4 years ago

0.0.86-alpha.93

4 years ago

0.0.86-alpha.89

4 years ago

0.0.86-alpha.90

4 years ago

0.0.86-alpha.91

4 years ago

0.0.86-alpha.92

4 years ago

0.0.86-alpha.85

4 years ago

0.0.86-alpha.86

4 years ago

0.0.86-alpha.84

4 years ago

0.0.86-alpha.83

4 years ago

0.0.86-alpha.82

4 years ago

0.0.86-alpha.81

4 years ago

0.0.86-alpha.80

4 years ago

0.0.86-alpha.79

4 years ago

0.0.86-alpha.78

4 years ago

0.0.86-alpha.74

4 years ago

0.0.86-alpha.76

4 years ago

0.0.86-alpha.77

4 years ago

0.0.86-alpha.73

4 years ago

0.0.86-alpha.72

4 years ago

0.0.86-alpha.71

4 years ago

0.0.86-alpha.67

4 years ago

0.0.86-alpha.70

4 years ago

0.0.86-alpha.64

4 years ago

0.0.86-alpha.63

4 years ago

0.0.86-alpha.61

4 years ago

0.0.86-alpha.55

4 years ago

0.0.86-alpha.56

4 years ago

0.0.86-alpha.57

4 years ago

0.0.86-alpha.58

4 years ago

0.0.86-alpha.59

4 years ago

0.0.86-alpha.54

4 years ago

0.0.86-alpha.51

4 years ago

0.0.86-alpha.52

4 years ago

0.0.86-alpha.53

4 years ago

0.0.86-alpha.49

4 years ago

0.0.86-alpha.50

4 years ago

0.0.86-alpha.47

4 years ago

0.0.86-alpha.46

4 years ago

0.0.86-alpha.45

4 years ago

0.0.86-alpha.43

4 years ago

0.0.86-alpha.41

4 years ago

0.0.86-alpha.42

4 years ago

0.0.86-alpha.40

4 years ago

0.0.86-alpha.38

4 years ago

0.0.86-alpha.39

4 years ago

0.0.86-alpha.37

4 years ago

0.0.86-alpha.35

4 years ago

0.0.86-alpha.36

4 years ago

0.0.86-alpha.34

4 years ago

0.0.86-alpha.29

4 years ago

0.0.86-alpha.30

4 years ago

0.0.86-alpha.31

4 years ago

0.0.86-alpha.32

4 years ago

0.0.86-alpha.33

4 years ago

0.0.86-alpha.26

4 years ago

0.0.86-alpha.27

4 years ago

0.0.86-alpha.28

4 years ago

0.0.86-alpha.16

4 years ago

0.0.86-alpha.17

4 years ago

0.0.86-alpha.18

4 years ago

0.0.86-alpha.19

4 years ago

0.0.86-alpha.21

4 years ago

0.0.86-alpha.22

4 years ago

0.0.86-alpha.24

4 years ago

0.0.86-alpha.25

4 years ago

0.0.86-alpha.14

4 years ago

0.0.86-alpha.15

4 years ago

0.0.86-alpha.13

4 years ago

0.0.86-alpha.12

4 years ago

0.0.86-alpha.11

4 years ago

0.0.86-alpha.10

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.84-alpha.16

4 years ago

0.0.84-alpha.15

4 years ago

4 years ago

4 years ago

0.0.84-alpha.11

4 years ago

0.0.84-alpha.10

4 years ago

0.0.84-alpha.14

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.65-alpha.12

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago