@canonical/launchpad-design-tokens 1.0.9 → 1.0.11

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 (9) hide show
  1. package/dist/css/color/dark.css +9 -0
  2. package/dist/css/color/light.css +9 -0
  3. package/dist/css/color/system.css +18 -0
  4. package/dist/css/dimension/extraWide.css +2 -0
  5. package/dist/css/dimension/medium.css +2 -0
  6. package/dist/css/dimension/narrow.css +2 -0
  7. package/dist/css/dimension/responsive.css +8 -0
  8. package/dist/css/dimension/wide.css +2 -0
  9. package/package.json +1 -1
package/dist/css/color/dark.css CHANGED
@@ -14,12 +14,16 @@
14
14
  --tmp-color-text-muted: rgba(255, 255, 255, 0.6);
15
15
  --tmp-color-text-inactive: rgba(255, 255, 255, 0.75);
16
16
  --tmp-color-text-reversed: #000000;
17
+ --tmp-color-text-white: #ffffff;
17
18
  --tmp-color-text-link-default: #6699cc;
18
19
  --tmp-color-text-link-visited: #a679d2;
19
20
  --tmp-color-background-default: #262626;
20
21
  --tmp-color-background-hover: #313131;
21
22
  --tmp-color-background-active: #373737;
22
23
  --tmp-color-background-alt: #202020;
24
+ --tmp-color-background-brand-default: rgba(233, 84, 32, 0.2);
25
+ --tmp-color-background-brand-hover: rgba(233, 84, 32, 0.3);
26
+ --tmp-color-background-brand-active: rgba(233, 84, 32, 0.36);
23
27
  --tmp-color-background-neutral-default: rgba(255, 255, 255, 0.15);
24
28
  --tmp-color-background-neutral-hover: rgba(255, 255, 255, 0.2);
25
29
  --tmp-color-background-neutral-active: rgba(255, 255, 255, 0.25);
@@ -51,6 +55,11 @@
51
55
  --tmp-color-fill-negative-default: #a11223;
52
56
  --tmp-color-fill-negative-hover: #8a0f1e;
53
57
  --tmp-color-fill-negative-active: #7c0e1b;
58
+ --tmp-color-status-default: #666666;
59
+ --tmp-color-status-positive: #0e8420;
60
+ --tmp-color-status-negative: #c7162b;
61
+ --tmp-color-status-information: #24598f;
62
+ --tmp-color-status-caution: #cc7900;
54
63
  --tmp-color-border-positive: var(--tmp-color-positive);
55
64
  --tmp-color-border-negative: var(--tmp-color-negative);
56
65
  --tmp-color-border-information: var(--tmp-color-information);
package/dist/css/color/light.css CHANGED
@@ -14,12 +14,16 @@
14
14
  --tmp-color-text-muted: rgba(0, 0, 0, 0.6);
15
15
  --tmp-color-text-inactive: rgba(0, 0, 0, 0.75);
16
16
  --tmp-color-text-reversed: #ffffff;
17
+ --tmp-color-text-white: #ffffff;
17
18
  --tmp-color-text-link-default: #0066cc;
18
19
  --tmp-color-text-link-visited: #7d42b8;
19
20
  --tmp-color-background-default: #ffffff;
20
21
  --tmp-color-background-hover: #f2f2f2;
21
22
  --tmp-color-background-active: #ebebeb;
22
23
  --tmp-color-background-alt: #f7f7f7;
24
+ --tmp-color-background-brand-default: rgba(233, 84, 32, 0.1);
25
+ --tmp-color-background-brand-hover: rgba(233, 84, 32, 0.15);
26
+ --tmp-color-background-brand-active: rgba(233, 84, 32, 0.1);
23
27
  --tmp-color-background-neutral-default: #f2f2f2;
24
28
  --tmp-color-background-neutral-hover: #e5e5e5;
25
29
  --tmp-color-background-neutral-active: #dedede;
@@ -49,6 +53,11 @@
49
53
  --tmp-color-fill-positive-active: #0a5f17;
50
54
  --tmp-color-fill-negative-hover: #b01326;
51
55
  --tmp-color-fill-negative-active: #a21223;
56
+ --tmp-color-status-default: #666666;
57
+ --tmp-color-status-positive: #0e8420;
58
+ --tmp-color-status-negative: #c7162b;
59
+ --tmp-color-status-information: #24598f;
60
+ --tmp-color-status-caution: #cc7900;
52
61
  --tmp-color-border-positive: var(--tmp-color-positive);
53
62
  --tmp-color-border-negative: var(--tmp-color-negative);
54
63
  --tmp-color-border-information: var(--tmp-color-information);
package/dist/css/color/system.css CHANGED
@@ -15,12 +15,16 @@
15
15
  --tmp-color-text-muted: rgba(0, 0, 0, 0.6);
16
16
  --tmp-color-text-inactive: rgba(0, 0, 0, 0.75);
17
17
  --tmp-color-text-reversed: #ffffff;
18
+ --tmp-color-text-white: #ffffff;
18
19
  --tmp-color-text-link-default: #0066cc;
19
20
  --tmp-color-text-link-visited: #7d42b8;
20
21
  --tmp-color-background-default: #ffffff;
21
22
  --tmp-color-background-hover: #f2f2f2;
22
23
  --tmp-color-background-active: #ebebeb;
23
24
  --tmp-color-background-alt: #f7f7f7;
25
+ --tmp-color-background-brand-default: rgba(233, 84, 32, 0.1);
26
+ --tmp-color-background-brand-hover: rgba(233, 84, 32, 0.15);
27
+ --tmp-color-background-brand-active: rgba(233, 84, 32, 0.1);
24
28
  --tmp-color-background-neutral-default: #f2f2f2;
25
29
  --tmp-color-background-neutral-hover: #e5e5e5;
26
30
  --tmp-color-background-neutral-active: #dedede;
@@ -50,6 +54,11 @@
50
54
  --tmp-color-fill-positive-active: #0a5f17;
51
55
  --tmp-color-fill-negative-hover: #b01326;
52
56
  --tmp-color-fill-negative-active: #a21223;
57
+ --tmp-color-status-default: #666666;
58
+ --tmp-color-status-positive: #0e8420;
59
+ --tmp-color-status-negative: #c7162b;
60
+ --tmp-color-status-information: #24598f;
61
+ --tmp-color-status-caution: #cc7900;
53
62
  --tmp-color-border-positive: var(--tmp-color-positive);
54
63
  --tmp-color-border-negative: var(--tmp-color-negative);
55
64
  --tmp-color-border-information: var(--tmp-color-information);
@@ -84,12 +93,16 @@
84
93
  --tmp-color-text-muted: rgba(255, 255, 255, 0.6);
85
94
  --tmp-color-text-inactive: rgba(255, 255, 255, 0.75);
86
95
  --tmp-color-text-reversed: #000000;
96
+ --tmp-color-text-white: #ffffff;
87
97
  --tmp-color-text-link-default: #6699cc;
88
98
  --tmp-color-text-link-visited: #a679d2;
89
99
  --tmp-color-background-default: #262626;
90
100
  --tmp-color-background-hover: #313131;
91
101
  --tmp-color-background-active: #373737;
92
102
  --tmp-color-background-alt: #202020;
103
+ --tmp-color-background-brand-default: rgba(233, 84, 32, 0.2);
104
+ --tmp-color-background-brand-hover: rgba(233, 84, 32, 0.3);
105
+ --tmp-color-background-brand-active: rgba(233, 84, 32, 0.36);
93
106
  --tmp-color-background-neutral-default: rgba(255, 255, 255, 0.15);
94
107
  --tmp-color-background-neutral-hover: rgba(255, 255, 255, 0.2);
95
108
  --tmp-color-background-neutral-active: rgba(255, 255, 255, 0.25);
@@ -121,6 +134,11 @@
121
134
  --tmp-color-fill-negative-default: #a11223;
122
135
  --tmp-color-fill-negative-hover: #8a0f1e;
123
136
  --tmp-color-fill-negative-active: #7c0e1b;
137
+ --tmp-color-status-default: #666666;
138
+ --tmp-color-status-positive: #0e8420;
139
+ --tmp-color-status-negative: #c7162b;
140
+ --tmp-color-status-information: #24598f;
141
+ --tmp-color-status-caution: #cc7900;
124
142
  --tmp-color-border-positive: var(--tmp-color-positive);
125
143
  --tmp-color-border-negative: var(--tmp-color-negative);
126
144
  --tmp-color-border-information: var(--tmp-color-information);
package/dist/css/dimension/extraWide.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --dimension-radius-medium: 0px;
11
11
  --dimension-radius-large: 0px;
12
12
  --dimension-radius-full: 9999px;
13
+ --tmp-dimension-spacing-inline-minimum: 0.125rem;
13
14
  --tmp-dimension-spacing-inline-xxxs: 0.25rem;
14
15
  --tmp-dimension-spacing-inline-xxs: 0.5rem;
15
16
  --tmp-dimension-spacing-inline-xs: 0.75rem;
@@ -19,6 +20,7 @@
19
20
  --tmp-dimension-spacing-inline-xl: 2.5rem;
20
21
  --tmp-dimension-spacing-inline-xxl: 3rem;
21
22
  --tmp-dimension-spacing-inline-xxxl: 3.5rem;
23
+ --tmp-dimension-spacing-block-minimum: 0.125rem;
22
24
  --tmp-dimension-spacing-block-xxxs: 0.25rem;
23
25
  --tmp-dimension-spacing-block-xxs: 0.5rem;
24
26
  --tmp-dimension-spacing-block-xs: 0.75rem;
package/dist/css/dimension/medium.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --dimension-radius-medium: 0px;
11
11
  --dimension-radius-large: 0px;
12
12
  --dimension-radius-full: 9999px;
13
+ --tmp-dimension-spacing-inline-minimum: 0rem;
13
14
  --tmp-dimension-spacing-inline-xxxs: 0.125rem;
14
15
  --tmp-dimension-spacing-inline-xxs: 0.25rem;
15
16
  --tmp-dimension-spacing-inline-xs: 0.5rem;
@@ -19,6 +20,7 @@
19
20
  --tmp-dimension-spacing-inline-xl: 2rem;
20
21
  --tmp-dimension-spacing-inline-xxl: 2.5rem;
21
22
  --tmp-dimension-spacing-inline-xxxl: 3rem;
23
+ --tmp-dimension-spacing-block-minimum: 0rem;
22
24
  --tmp-dimension-spacing-block-xxxs: 0.125rem;
23
25
  --tmp-dimension-spacing-block-xxs: 0.25rem;
24
26
  --tmp-dimension-spacing-block-xs: 0.5rem;
package/dist/css/dimension/narrow.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --dimension-radius-medium: 0px;
11
11
  --dimension-radius-large: 0px;
12
12
  --dimension-radius-full: 9999px;
13
+ --tmp-dimension-spacing-inline-minimum: 0rem;
13
14
  --tmp-dimension-spacing-inline-xxxs: 0.125rem;
14
15
  --tmp-dimension-spacing-inline-xxs: 0.25rem;
15
16
  --tmp-dimension-spacing-inline-xs: 0.375rem;
@@ -19,6 +20,7 @@
19
20
  --tmp-dimension-spacing-inline-xl: 1.25rem;
20
21
  --tmp-dimension-spacing-inline-xxl: 1.5rem;
21
22
  --tmp-dimension-spacing-inline-xxxl: 2rem;
23
+ --tmp-dimension-spacing-block-minimum: 0rem;
22
24
  --tmp-dimension-spacing-block-xxxs: 0.125rem;
23
25
  --tmp-dimension-spacing-block-xxs: 0.25rem;
24
26
  --tmp-dimension-spacing-block-xs: 0.375rem;
package/dist/css/dimension/responsive.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --dimension-radius-medium: 0px;
11
11
  --dimension-radius-large: 0px;
12
12
  --dimension-radius-full: 9999px;
13
+ --tmp-dimension-spacing-inline-minimum: 0rem;
13
14
  --tmp-dimension-spacing-inline-xxxs: 0.125rem;
14
15
  --tmp-dimension-spacing-inline-xxs: 0.25rem;
15
16
  --tmp-dimension-spacing-inline-xs: 0.375rem;
@@ -19,6 +20,7 @@
19
20
  --tmp-dimension-spacing-inline-xl: 1.25rem;
20
21
  --tmp-dimension-spacing-inline-xxl: 1.5rem;
21
22
  --tmp-dimension-spacing-inline-xxxl: 2rem;
23
+ --tmp-dimension-spacing-block-minimum: 0rem;
22
24
  --tmp-dimension-spacing-block-xxxs: 0.125rem;
23
25
  --tmp-dimension-spacing-block-xxs: 0.25rem;
24
26
  --tmp-dimension-spacing-block-xs: 0.375rem;
@@ -37,6 +39,7 @@
37
39
 
38
40
  @media (min-width: 621px) {
39
41
  :root {
42
+ --tmp-dimension-spacing-inline-minimum: 0rem;
40
43
  --tmp-dimension-spacing-inline-xxxs: 0.125rem;
41
44
  --tmp-dimension-spacing-inline-xxs: 0.25rem;
42
45
  --tmp-dimension-spacing-inline-xs: 0.5rem;
@@ -46,6 +49,7 @@
46
49
  --tmp-dimension-spacing-inline-xl: 2rem;
47
50
  --tmp-dimension-spacing-inline-xxl: 2.5rem;
48
51
  --tmp-dimension-spacing-inline-xxxl: 3rem;
52
+ --tmp-dimension-spacing-block-minimum: 0rem;
49
53
  --tmp-dimension-spacing-block-xxxs: 0.125rem;
50
54
  --tmp-dimension-spacing-block-xxs: 0.25rem;
51
55
  --tmp-dimension-spacing-block-xs: 0.5rem;
@@ -65,6 +69,7 @@
65
69
 
66
70
  @media (min-width: 1037px) {
67
71
  :root {
72
+ --tmp-dimension-spacing-inline-minimum: 0rem;
68
73
  --tmp-dimension-spacing-inline-xxxs: 0.125rem;
69
74
  --tmp-dimension-spacing-inline-xxs: 0.25rem;
70
75
  --tmp-dimension-spacing-inline-xs: 0.5rem;
@@ -74,6 +79,7 @@
74
79
  --tmp-dimension-spacing-inline-xl: 2rem;
75
80
  --tmp-dimension-spacing-inline-xxl: 2.5rem;
76
81
  --tmp-dimension-spacing-inline-xxxl: 3rem;
82
+ --tmp-dimension-spacing-block-minimum: 0rem;
77
83
  --tmp-dimension-spacing-block-xxxs: 0.125rem;
78
84
  --tmp-dimension-spacing-block-xxs: 0.25rem;
79
85
  --tmp-dimension-spacing-block-xs: 0.5rem;
@@ -93,6 +99,7 @@
93
99
 
94
100
  @media (min-width: 1681px) {
95
101
  :root {
102
+ --tmp-dimension-spacing-inline-minimum: 0.125rem;
96
103
  --tmp-dimension-spacing-inline-xxxs: 0.25rem;
97
104
  --tmp-dimension-spacing-inline-xxs: 0.5rem;
98
105
  --tmp-dimension-spacing-inline-xs: 0.75rem;
@@ -102,6 +109,7 @@
102
109
  --tmp-dimension-spacing-inline-xl: 2.5rem;
103
110
  --tmp-dimension-spacing-inline-xxl: 3rem;
104
111
  --tmp-dimension-spacing-inline-xxxl: 3.5rem;
112
+ --tmp-dimension-spacing-block-minimum: 0.125rem;
105
113
  --tmp-dimension-spacing-block-xxxs: 0.25rem;
106
114
  --tmp-dimension-spacing-block-xxs: 0.5rem;
107
115
  --tmp-dimension-spacing-block-xs: 0.75rem;
package/dist/css/dimension/wide.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --dimension-radius-medium: 0px;
11
11
  --dimension-radius-large: 0px;
12
12
  --dimension-radius-full: 9999px;
13
+ --tmp-dimension-spacing-inline-minimum: 0rem;
13
14
  --tmp-dimension-spacing-inline-xxxs: 0.125rem;
14
15
  --tmp-dimension-spacing-inline-xxs: 0.25rem;
15
16
  --tmp-dimension-spacing-inline-xs: 0.5rem;
@@ -19,6 +20,7 @@
19
20
  --tmp-dimension-spacing-inline-xl: 2rem;
20
21
  --tmp-dimension-spacing-inline-xxl: 2.5rem;
21
22
  --tmp-dimension-spacing-inline-xxxl: 3rem;
23
+ --tmp-dimension-spacing-block-minimum: 0rem;
22
24
  --tmp-dimension-spacing-block-xxxs: 0.125rem;
23
25
  --tmp-dimension-spacing-block-xxs: 0.25rem;
24
26
  --tmp-dimension-spacing-block-xs: 0.5rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/launchpad-design-tokens",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
4
4
  "description": "Design tokens for Canonical's Launchpad",
5
5
  "files": ["dist/css"],
6
6
  "type": "module",