@onemrvapublic/design-system-theme 17.0.27 → 17.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components/_buttons.scss +6 -1
  2. package/components/_chips.scss +52 -0
  3. package/esm2022/lib/theme.module.mjs +4 -4
  4. package/fesm2022/onemrvapublic-design-system-theme.mjs +4 -4
  5. package/package.json +1 -1
  6. package/utilities/_variables.scss +67 -75
package/components/_buttons.scss CHANGED
@@ -5,6 +5,11 @@
5
5
 
6
6
  @mixin theme($theme) {
7
7
  $spacer: map-get($theme, "spacer");
8
+ $accent400: µ.accent($theme, 400);
9
+ $accent500: µ.accent($theme, 500);
10
+ $accent-gradient: transparent
11
+ linear-gradient(90deg, $accent400 0%, $accent500 100%) 0% 0% no-repeat
12
+ padding-box;
8
13
 
9
14
  mat-button-toggle-group {
10
15
  border-radius: $onemrva-button-border-radius;
@@ -280,7 +285,7 @@
280
285
  &.mat-mdc-fab,
281
286
  &.mat-mdc-mini-fab {
282
287
  &.mat-accent {
283
- background: $onemrva-accent-gradient;
288
+ background: $accent-gradient;
284
289
  }
285
290
 
286
291
  &.mat-error {
package/components/_chips.scss CHANGED
@@ -98,6 +98,58 @@
98
98
  color: µ.grayscale($theme);
99
99
  }
100
100
  }
101
+ &.sticker {
102
+ height: 18px;
103
+ overflow: hidden;
104
+ text-overflow: ellipsis;
105
+ white-space: nowrap;
106
+ display: inline-flex;
107
+ align-items: center;
108
+ cursor: default;
109
+ background: #ffffff !important;
110
+ opacity: 1;
111
+ border-radius: 4px;
112
+ padding: 4px 16px;
113
+ font-size: 12px;
114
+ font-weight: 500;
115
+ &.mat-primary {
116
+ border: 2px solid $primary;
117
+ color: $primary;
118
+ }
119
+ &.mat-accent {
120
+ $color: µ.accent($theme, "500-contrast");
121
+ background: $onemrva-accent-gradient-vertical !important;
122
+ height: 22px;
123
+ border: none;
124
+ color: $color;
125
+ }
126
+ &.mat-warn {
127
+ $color: µ.warn($theme, 600);
128
+ border: 2px solid $color;
129
+ color: $color;
130
+ }
131
+ &.mat-success {
132
+ $color: µ.success($theme);
133
+ border: 2px solid $color;
134
+ color: $color;
135
+ }
136
+ &.mat-error {
137
+ $color: µ.error($theme);
138
+ border: 2px solid $color;
139
+ color: $color;
140
+ display: inline-flex;
141
+ }
142
+ &.mat-info {
143
+ $color: µ.info($theme);
144
+ border: 2px solid $color;
145
+ color: $color;
146
+ }
147
+ &.mat-grayscale {
148
+ $color: µ.grayscale($theme);
149
+ border: 2px solid $color;
150
+ color: $color;
151
+ }
152
+ }
101
153
 
102
154
  .mat-mdc-chip-action {
103
155
  padding: 0;
package/esm2022/lib/theme.module.mjs CHANGED
@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
2
2
  import { MAT_FORM_FIELD_DEFAULT_OPTIONS, } from '@angular/material/form-field';
3
3
  import * as i0 from "@angular/core";
4
4
  export class OnemrvaThemeModule {
5
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
6
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: OnemrvaThemeModule }); }
7
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: OnemrvaThemeModule, providers: [
5
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
6
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: OnemrvaThemeModule }); }
7
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OnemrvaThemeModule, providers: [
8
8
  {
9
9
  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
10
10
  useValue: {
@@ -14,7 +14,7 @@ export class OnemrvaThemeModule {
14
14
  },
15
15
  ] }); }
16
16
  }
17
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
17
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
18
18
  type: NgModule,
19
19
  args: [{
20
20
  providers: [
package/fesm2022/onemrvapublic-design-system-theme.mjs CHANGED
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
3
3
  import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
4
4
 
5
5
  class OnemrvaThemeModule {
6
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
7
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: OnemrvaThemeModule }); }
8
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: OnemrvaThemeModule, providers: [
6
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
7
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: OnemrvaThemeModule }); }
8
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OnemrvaThemeModule, providers: [
9
9
  {
10
10
  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
11
11
  useValue: {
@@ -15,7 +15,7 @@ class OnemrvaThemeModule {
15
15
  },
16
16
  ] }); }
17
17
  }
18
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
18
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
19
19
  type: NgModule,
20
20
  args: [{
21
21
  providers: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onemrvapublic/design-system-theme",
3
- "version": "17.0.27",
3
+ "version": "17.0.29",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
package/utilities/_variables.scss CHANGED
@@ -2,7 +2,8 @@
2
2
  @use "@angular/material" as mat;
3
3
  @use "palettes";
4
4
 
5
- $onemrva-accent-gradient: transparent linear-gradient(90deg, #de2174 0%, #EB142A 100%) 0% 0% no-repeat padding-box;
5
+ $onemrva-accent-gradient: transparent
6
+ linear-gradient(90deg, #de2174 0%, #eb142a 100%) 0% 0% no-repeat padding-box;
6
7
  $onemrva-accent-gradient-vertical: $onemrva-accent-gradient;
7
8
  $onemrva-button-outline-opacity: 0.3;
8
9
  $onemrva-button-border-radius: 500px;
@@ -10,117 +11,108 @@ $box-shadow: 0px 3px 3px #312f3a29;
10
11
  $gap: 8px;
11
12
 
12
13
  $spacer: 8px !default;
13
- $spacers: '-0' 0,
14
- '-2xs' $spacer * .25,
15
- '-xs' $spacer * .5,
16
- '-s' $spacer,
17
- '' $spacer,
18
- '-m' $spacer * 2,
19
- '-l' $spacer * 3,
20
- '-xl' $spacer * 4,
21
- '-2xl' $spacer * 5,
22
- '-3xl' $spacer * 7,
23
- '-auto' 'auto';
14
+ $spacers: "-0" 0, "-2xs" $spacer * 0.25, "-xs" $spacer * 0.5, "-s" $spacer,
15
+ "" $spacer, "-m" $spacer * 2, "-l" $spacer * 3, "-xl" $spacer * 4,
16
+ "-2xl" $spacer * 5, "-3xl" $spacer * 7, "-auto" "auto";
24
17
 
25
18
  $breakpoints: (
26
- xsmall: (
27
- max: 599.99,
28
- ),
29
- small: (
30
- min: 600,
31
- max: 959.99,
32
- ),
33
- medium: (
34
- min: 960,
35
- max: 1279.99,
36
- ),
37
- large: (
38
- min: 1280,
39
- max: 1535.99,
40
- ),
41
- xlarge: (
42
- min: 1536,
43
- max: 1919.99,
44
- ),
45
- xxlarge: (
46
- min: 1920,
47
- ),
19
+ xsmall: (
20
+ max: 599.99,
21
+ ),
22
+ small: (
23
+ min: 600,
24
+ max: 959.99,
25
+ ),
26
+ medium: (
27
+ min: 960,
28
+ max: 1279.99,
29
+ ),
30
+ large: (
31
+ min: 1280,
32
+ max: 1535.99,
33
+ ),
34
+ xlarge: (
35
+ min: 1536,
36
+ max: 1919.99,
37
+ ),
38
+ xxlarge: (
39
+ min: 1920,
40
+ ),
48
41
  );
49
42
 
50
-
51
43
  $onemrva-typography: mat.define-typography-config(
52
44
  // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-1
53
45
  $headline-1:
54
46
  mat.define-typography-level(150px, 180px, 700, $font-family: Poppins),
55
- // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-2
47
+ // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-2
56
48
  $headline-2:
57
49
  mat.define-typography-level(70px, 105px, 700, $font-family: Poppins),
58
- // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-3
50
+ // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-3
59
51
  $headline-3:
60
52
  mat.define-typography-level(29px, 51px, 600, $font-family: Poppins),
61
- // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-4
53
+ // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-4
62
54
  $headline-4:
63
55
  mat.define-typography-level(29px, 51px, 600, $font-family: Poppins),
64
- // Section heading corresponding to the <h1> tag. CSS: .mat-h1 or .mat-headline-5 Native element: <h1>
56
+ // Section heading corresponding to the <h1> tag. CSS: .mat-h1 or .mat-headline-5 Native element: <h1>
65
57
  $headline-5:
66
58
  mat.define-typography-level(29px, 51px, 600, $font-family: Poppins),
67
- // Section heading corresponding to the <h2> tag. CSS: .mat-h2 or .mat-headline-6 Native element: <h2>
59
+ // Section heading corresponding to the <h2> tag. CSS: .mat-h2 or .mat-headline-6 Native element: <h2>
68
60
  $headline-6:
69
61
  mat.define-typography-level(26px, 46px, 600, $font-family: Poppins),
70
- // Section heading corresponding to the <h3> tag. CSS: .mat-h3 or .mat-subtitle-1 Native element: <h3>
62
+ // Section heading corresponding to the <h3> tag. CSS: .mat-h3 or .mat-subtitle-1 Native element: <h3>
71
63
  $subtitle-1:
72
64
  mat.define-typography-level(23px, 40px, 600, $font-family: Poppins),
73
- // Body strong CSS: .mat-body-strong or .mat-subtitle-2
65
+ // Body strong CSS: .mat-body-strong or .mat-subtitle-2
74
66
  $subtitle-2:
75
67
  mat.define-typography-level(
76
- 16px,
77
- 26px,
78
- 600,
68
+ 16px,
69
+ 26px,
70
+ 600,
79
71
  $font-family: "Source Sans Pro"
80
72
  ),
81
- // Why would angular map body-1 and h4 on the same typography??? Work around: mat-h4 (see below) CSS: .mat-h4 or .mat-body-1 Native element: <h4>
73
+ // Why would angular map body-1 and h4 on the same typography??? Work around: mat-h4 (see below) CSS: .mat-h4 or .mat-body-1 Native element: <h4>
82
74
  $body-1:
83
75
  mat.define-typography-level(
84
- 16px,
85
- 26px,
86
- 400,
76
+ 16px,
77
+ 26px,
78
+ 400,
87
79
  $font-family: "Source Sans Pro"
88
80
  ),
89
- // Bolder body text. CSS: .mat-body or .mat-body-2
81
+ // Bolder body text. CSS: .mat-body or .mat-body-2
90
82
  $body-2:
91
83
  mat.define-typography-level(
92
- 16px,
93
- 26px,
94
- 400,
84
+ 16px,
85
+ 26px,
86
+ 400,
95
87
  $font-family: "Source Sans Pro"
96
88
  ),
97
- // Smaller body and hint text. CSS: .mat-small or .mat-caption
89
+ // Smaller body and hint text. CSS: .mat-small or .mat-caption
98
90
  $caption:
99
91
  mat.define-typography-level(
100
- 14px,
101
- 21px,
102
- 400,
92
+ 14px,
93
+ 21px,
94
+ 400,
103
95
  $font-family: "Source Sans Pro"
104
96
  ),
105
- // Buttons and anchors.
97
+ // Buttons and anchors.
106
98
  $button:
107
99
  mat.define-typography-level(
108
- 16px,
109
- 26px,
110
- 500,
100
+ 16px,
101
+ 26px,
102
+ 500,
111
103
  $font-family: "Source Sans Pro"
112
104
  )
113
105
  );
114
106
 
115
107
  $onemrva-typography: map.merge(
116
- $onemrva-typography,
117
- (
118
- label-button:
108
+ $onemrva-typography,
109
+ (
110
+ label-button:
119
111
  mat.define-typography-level(14px, 21px, 500, $font-family: Poppins),
120
- label-smallbutton:
112
+ label-smallbutton:
121
113
  mat.define-typography-level(14px, 21px, 400, $font-family: Poppins),
122
- mat-h4: mat.define-typography-level(20px, 35px, 700, $font-family: Poppins),
123
- )
114
+ mat-h4: mat.define-typography-level(20px, 35px, 700, $font-family: Poppins),
115
+ )
124
116
  );
125
117
 
126
118
  $onemrva-primary: mat.define-palette(palettes.$primary-palette);
@@ -144,12 +136,12 @@ $onemrva-theme-options: (
144
136
  $onemrva-theme: mat.define-light-theme($onemrva-theme-options);
145
137
 
146
138
  $onemrva-theme: map-merge(
147
- $onemrva-theme,
148
- (
149
- success: $onemrva-success,
150
- error: $onemrva-error,
151
- info: $onemrva-info,
152
- grayscale: $onemrva-grayscale,
153
- spacer: $spacer,
154
- )
139
+ $onemrva-theme,
140
+ (
141
+ success: $onemrva-success,
142
+ error: $onemrva-error,
143
+ info: $onemrva-info,
144
+ grayscale: $onemrva-grayscale,
145
+ spacer: $spacer,
146
+ )
155
147
  );