@abgov/design-tokens 1.0.4 → 1.0.5-dev.2

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 (11) hide show
  1. package/.github/workflows/publish.yml +13 -5
  2. package/.github/workflows/pull-request.yml +11 -5
  3. package/css/tokens.css +109 -87
  4. package/data/badge.json +98 -0
  5. package/data/button.json +1 -0
  6. package/data/global-ddi.json +512 -0
  7. package/index.spec.js +12 -0
  8. package/lib/design-tokens.js +45 -37
  9. package/package.json +1 -1
  10. package/scss/tokens.scss +109 -87
  11. package/data/tokens.json +0 -514
package/.github/workflows/publish.yml CHANGED
@@ -3,6 +3,7 @@ on:
3
3
  push:
4
4
  branches:
5
5
  - main
6
+ - dev
6
7
 
7
8
  # Allows you to run this workflow manually from the Actions tab
8
9
  workflow_dispatch:
@@ -14,7 +15,7 @@ jobs:
14
15
  permissions:
15
16
  contents: write
16
17
  packages: write
17
-
18
+
18
19
  steps:
19
20
  - name: Get Latest
20
21
  uses: actions/checkout@v2
@@ -28,11 +29,11 @@ jobs:
28
29
  uses: actions/setup-node@v3
29
30
  with:
30
31
  node-version: 16
31
- registry-url: 'https://registry.npmjs.org'
32
- scope: '@abgov'
32
+ registry-url: "https://registry.npmjs.org"
33
+ scope: "@abgov"
33
34
  env:
34
35
  NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
35
-
36
+
36
37
  - name: Install Dependencies
37
38
  run: npm ci
38
39
 
@@ -40,10 +41,17 @@ jobs:
40
41
  run: npm run build
41
42
 
42
43
  - name: Test
43
- run: npm run test
44
+ run: npm run test
44
45
 
45
46
  - name: Semantic Release
46
47
  uses: cycjimmy/semantic-release-action@v3.1.2
48
+ with:
49
+ semantic_version: 16
50
+ branches: |
51
+ [
52
+ "main",
53
+ { name: "dev", prerelease: true }
54
+ ]
47
55
  env:
48
56
  GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
49
57
  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
package/.github/workflows/pull-request.yml CHANGED
@@ -4,6 +4,7 @@ on:
4
4
  pull_request:
5
5
  branches:
6
6
  - main
7
+ - dev
7
8
 
8
9
  jobs:
9
10
  build:
@@ -27,11 +28,16 @@ jobs:
27
28
  run: npm run build
28
29
  - name: Add auto-generated file
29
30
  run: |
30
- git config user.email "bot@gov.ab.ca"
31
- git config user.name "Build Bot"
32
- git add .
33
- PREVIOUS_MESSAGE="$(git log --format=%B -n 1)"
34
- git commit --amend -m "$PREVIOUS_MESSAGE"
31
+ echo "Autobuild is currently disabled"
32
+ # npm run build
33
+ # git config user.email "build-bot@gov.ab.ca"
34
+ # git config user.name "Build Bot"
35
+ # PREVIOUS_MESSAGE="$(git log --format=%B -n 1)"
36
+ # CURRENT_BRANCH="$(git branch --show-current)"
37
+ # echo $(git branch)
38
+ # git add .
39
+ # git commit --amend -m "$PREVIOUS_MESSAGE"
40
+ # git push origin $CURRENT_BRANCH -f
35
41
  - name: Semantic Release
36
42
  uses: cycjimmy/semantic-release-action@v3.1.2
37
43
  with:
package/css/tokens.css CHANGED
@@ -1,93 +1,115 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 01 Nov 2022 19:57:07 GMT
3
+ * Generated on Tue, 08 Nov 2022 19:45:27 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --colour-brand-default: #0081A2;
8
- --colour-brand-dark: #005072;
9
- --colour-brand-light: #C8EEFA;
10
- --colour-interactive-default: #0070C4;
11
- --colour-interactive-hover: #004F84;
12
- --colour-interactive-error: #EC040B;
13
- --colour-interactive-focus: #FEBA35;
14
- --colour-text-default: #333333;
15
- --colour-text-secondary: #666666;
16
- --colour-text-light: #FFFFFF;
17
- --colour-status-info-default: #005DAA;
18
- --colour-status-info-light: #B2D4ED;
19
- --colour-status-info-dark: #00347A;
20
- --colour-status-warning-default: #FEBA35;
21
- --colour-status-warning-light: #FCEFD0;
22
- --colour-status-warning-dark: #C68A00;
23
- --colour-status-emergency-default: #EC040B;
24
- --colour-status-emergency-light: #FFCECF;
25
- --colour-status-emergency-dark: #B00000;
26
- --colour-status-success-default: #00853F;
27
- --colour-status-success-light: #C6E0D0;
28
- --colour-status-success-dark: #005715;
29
- --colour-greyscale-100: #F1F1F1;
30
- --colour-greyscale-200: #DCDCDC;
31
- --colour-greyscale-400: #ADADAD;
32
- --colour-greyscale-500: #949494;
33
- --colour-greyscale-600: #666666;
34
- --colour-greyscale-black: #333333;
35
- --colour-greyscale-white: #FFFFFF;
36
- --font-weight-regular: 400;
37
- --font-weight-medium: 500;
38
- --font-weight-bold: 700;
39
- --font-size-1: 0.75rem;
40
- --font-size-2: 0.875rem;
41
- --font-size-3: 1rem;
42
- --font-size-4: 1.125rem;
43
- --font-size-5: 1.25rem;
44
- --font-size-6: 1.375rem;
45
- --font-size-7: 1.5rem;
46
- --font-size-8: 2rem;
47
- --font-size-9: 2.25rem;
48
- --font-size-10: 3rem;
49
- --spacing-none: 0rem;
50
- --spacing-3xs: 0.125rem;
51
- --spacing-2xs: 0.25rem;
52
- --spacing-xs: 0.5rem;
53
- --spacing-s: 0.75rem;
54
- --spacing-m: 1rem;
55
- --spacing-l: 1.5rem;
56
- --spacing-xl: 2rem;
57
- --spacing-2xl: 3rem;
58
- --spacing-3xl: 4rem;
59
- --spacing-4xl: 8rem;
60
- --border-radius-0: 0;
61
- --border-radius-4: 4;
62
- --border-radius-pill: 999px;
63
- --border-radius-circle: 50%;
64
- --opacity-3: 30%;
65
- --opacity-5: 50%;
66
- --opacity-8: 80%;
67
- --line-height-1: 1.25rem;
68
- --line-height-2: 1.5rem;
69
- --line-height-3: 1.75rem;
70
- --line-height-4: 2rem;
71
- --line-height-5: 2.5rem;
72
- --line-height-6: 2.75rem;
73
- --line-height-7: 3.5rem;
74
- --font-families-default: Acumin-pro-semi-condensed;
75
- --font-families-numbers: roboto-mono;
76
- --typography-heading-xl: [object Object];
77
- --typography-heading-l: [object Object];
78
- --typography-heading-m: [object Object];
79
- --typography-heading-s: [object Object];
80
- --typography-heading-xs: [object Object];
81
- --typography-body-l: [object Object];
82
- --typography-body-m: [object Object];
83
- --typography-body-s: [object Object];
84
- --typography-body-xs: [object Object];
85
- --typography-button-default: [object Object];
86
- --border-width-s: 1;
87
- --border-width-m: 2;
88
- --border-width-l: 3;
89
- --letter-spacing-buttons: 1%;
90
- --icon-size-s: 1rem;
91
- --icon-size-m: 1.25rem;
92
- --icon-size-l: 1.5rem;
7
+ --goa-information-background-colour: #f1f1f1;
8
+ --goa-information-text-colour: #005daa;
9
+ --goa-information-icon-colour: #005daa;
10
+ --goa-font-family: Acumin-pro-semi-condensed;
11
+ --goa-font-size: 0.875rem;
12
+ --goa-font-weight: 400;
13
+ --goa-important-background-colour: #feba35;
14
+ --goa-important-text-colour: #333333;
15
+ --goa-important-icon-colour: #333333;
16
+ --goa-padding-left: 0.5rem;
17
+ --goa-padding-right: 0.5rem;
18
+ --goa-padding-top: 0.25rem;
19
+ --goa-padding-bottom: 0.25rem;
20
+ --goa-icon-size: 1rem;
21
+ --goa-emergency-background-colour: #ec040b;
22
+ --goa-emergency-text-colour: #ffffff;
23
+ --goa-emergency-icon-colour: #ffffff;
24
+ --goa-success-background-colour: #00853f;
25
+ --goa-success-text-colour: #ffffff;
26
+ --goa-success-icon-colour: #ffffff;
27
+ --goa-space-between: 0.25rem;
28
+ --goa-border-radius: 0.25rem;
29
+ --goa-color-brand-default: #0081a2;
30
+ --goa-color-brand-dark: #005072;
31
+ --goa-color-brand-light: #c8eefa;
32
+ --goa-color-interactive-default: #0070c4;
33
+ --goa-color-interactive-hover: #004f84;
34
+ --goa-color-interactive-error: #ec040b;
35
+ --goa-color-interactive-focus: #feba35;
36
+ --goa-color-text-default: #333333;
37
+ --goa-color-text-secondary: #666666;
38
+ --goa-color-text-light: #ffffff;
39
+ --goa-color-status-info-default: #005daa;
40
+ --goa-color-status-info-light: #b2d4ed;
41
+ --goa-color-status-info-dark: #00347a;
42
+ --goa-color-status-warning-default: #feba35;
43
+ --goa-color-status-warning-light: #fcefd0;
44
+ --goa-color-status-warning-dark: #c68a00;
45
+ --goa-color-status-emergency-default: #ec040b;
46
+ --goa-color-status-emergency-light: #ffcecf;
47
+ --goa-color-status-emergency-dark: #b00000;
48
+ --goa-color-status-success-default: #00853f;
49
+ --goa-color-status-success-light: #c6e0d0;
50
+ --goa-color-status-success-dark: #005715;
51
+ --goa-color-greyscale-100: #f1f1f1;
52
+ --goa-color-greyscale-200: #dcdcdc;
53
+ --goa-color-greyscale-400: #adadad;
54
+ --goa-color-greyscale-500: #949494;
55
+ --goa-color-greyscale-600: #666666;
56
+ --goa-color-greyscale-black: #333333;
57
+ --goa-color-greyscale-white: #ffffff;
58
+ --goa-font-weight-regular: 400;
59
+ --goa-font-weight-medium: 500;
60
+ --goa-font-weight-bold: 700;
61
+ --goa-font-size-1: 0.75rem;
62
+ --goa-font-size-2: 0.875rem;
63
+ --goa-font-size-3: 1rem;
64
+ --goa-font-size-4: 1.125rem;
65
+ --goa-font-size-5: 1.25rem;
66
+ --goa-font-size-6: 1.375rem;
67
+ --goa-font-size-7: 1.5rem;
68
+ --goa-font-size-8: 2rem;
69
+ --goa-font-size-9: 2.25rem;
70
+ --goa-font-size-10: 3rem;
71
+ --goa-spacing-none: 0rem;
72
+ --goa-spacing-3xs: 0.125rem;
73
+ --goa-spacing-2xs: 0.25rem;
74
+ --goa-spacing-xs: 0.5rem;
75
+ --goa-spacing-s: 0.75rem;
76
+ --goa-spacing-m: 1rem;
77
+ --goa-spacing-l: 1.5rem;
78
+ --goa-spacing-xl: 2rem;
79
+ --goa-spacing-2xl: 3rem;
80
+ --goa-spacing-3xl: 4rem;
81
+ --goa-spacing-4xl: 8rem;
82
+ --goa-border-radius-0: 0rem;
83
+ --goa-border-radius-4: 0.25rem;
84
+ --goa-border-radius-pill: 999px;
85
+ --goa-border-radius-circle: 50%;
86
+ --goa-opacity-3: 30%;
87
+ --goa-opacity-5: 50%;
88
+ --goa-opacity-8: 80%;
89
+ --goa-line-height-1: 1.25rem;
90
+ --goa-line-height-2: 1.5rem;
91
+ --goa-line-height-3: 1.75rem;
92
+ --goa-line-height-4: 2rem;
93
+ --goa-line-height-5: 2.5rem;
94
+ --goa-line-height-6: 2.75rem;
95
+ --goa-line-height-7: 3.5rem;
96
+ --goa-font-families-default: Acumin-pro-semi-condensed;
97
+ --goa-font-families-numbers: roboto-mono;
98
+ --goa-typography-heading-xl: 700 3rem/3.5rem Acumin-pro-semi-condensed;
99
+ --goa-typography-heading-l: 400 2.25rem/2.75rem Acumin-pro-semi-condensed;
100
+ --goa-typography-heading-m: 400 1.5rem/2rem Acumin-pro-semi-condensed;
101
+ --goa-typography-heading-s: 700 1.125rem/1.75rem Acumin-pro-semi-condensed;
102
+ --goa-typography-heading-xs: 700 1rem/1.5rem Acumin-pro-semi-condensed;
103
+ --goa-typography-body-l: 400 1.5rem/2rem Acumin-pro-semi-condensed;
104
+ --goa-typography-body-m: 400 1.125rem/1.75rem Acumin-pro-semi-condensed;
105
+ --goa-typography-body-s: 400 1rem/1.5rem Acumin-pro-semi-condensed;
106
+ --goa-typography-body-xs: 400 0.875rem/1.25rem Acumin-pro-semi-condensed;
107
+ --goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
108
+ --goa-border-width-s: 1px;
109
+ --goa-border-width-m: 2px;
110
+ --goa-border-width-l: 3px;
111
+ --goa-letter-spacing-buttons: 1%;
112
+ --goa-icon-size-s: 1rem;
113
+ --goa-icon-size-m: 1.25rem;
114
+ --goa-icon-size-l: 1.5rem;
93
115
  }
package/data/badge.json ADDED
@@ -0,0 +1,98 @@
1
+ {
2
+ "information": {
3
+ "background-colour": {
4
+ "value": "{color.greyscale.100}",
5
+ "type": "color"
6
+ },
7
+ "text-colour": {
8
+ "value": "{color.status.info.default}",
9
+ "type": "color"
10
+ },
11
+ "icon-colour": {
12
+ "value": "{color.status.info.default}",
13
+ "type": "color"
14
+ }
15
+ },
16
+ "font-family": {
17
+ "value": "{fontFamilies.default}",
18
+ "type": "fontFamilies"
19
+ },
20
+ "font-size": {
21
+ "value": "{fontSize.2}",
22
+ "type": "fontSizes"
23
+ },
24
+ "font-weight": {
25
+ "value": "{fontWeight.regular}",
26
+ "type": "fontWeights"
27
+ },
28
+ "important": {
29
+ "background-colour": {
30
+ "value": "{color.status.warning.default}",
31
+ "type": "color"
32
+ },
33
+ "text-colour": {
34
+ "value": "{color.text.default}",
35
+ "type": "color"
36
+ },
37
+ "icon-colour": {
38
+ "value": "{color.greyscale.black}",
39
+ "type": "color"
40
+ }
41
+ },
42
+ "padding-left": {
43
+ "value": "{spacing.xs}",
44
+ "type": "spacing"
45
+ },
46
+ "padding-right": {
47
+ "value": "{spacing.xs}",
48
+ "type": "spacing"
49
+ },
50
+ "padding-top": {
51
+ "value": "{spacing.2xs}",
52
+ "type": "spacing"
53
+ },
54
+ "padding-bottom": {
55
+ "value": "{spacing.2xs}",
56
+ "type": "spacing"
57
+ },
58
+ "icon-size": {
59
+ "value": "{iconSize.s}",
60
+ "type": "sizing"
61
+ },
62
+ "emergency": {
63
+ "background-colour": {
64
+ "value": "{color.status.emergency.default}",
65
+ "type": "color"
66
+ },
67
+ "text-colour": {
68
+ "value": "{color.text.light}",
69
+ "type": "color"
70
+ },
71
+ "icon-colour": {
72
+ "value": "{color.greyscale.white}",
73
+ "type": "color"
74
+ }
75
+ },
76
+ "success": {
77
+ "background-colour": {
78
+ "value": "{color.status.success.default}",
79
+ "type": "color"
80
+ },
81
+ "text-colour": {
82
+ "value": "{color.text.light}",
83
+ "type": "color"
84
+ },
85
+ "icon-colour": {
86
+ "value": "{color.greyscale.white}",
87
+ "type": "color"
88
+ }
89
+ },
90
+ "space-between": {
91
+ "value": "{spacing.2xs}",
92
+ "type": "spacing"
93
+ },
94
+ "border-radius": {
95
+ "value": "{borderRadius.4}",
96
+ "type": "borderRadius"
97
+ }
98
+ }
package/data/button.json ADDED
@@ -0,0 +1 @@
1
+ {}