@ably/ui 6.10.0 → 7.0.0

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.
@@ -1,5 +1,5 @@
1
1
  @layer base {
2
- @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
2
+ @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
3
3
  }
4
4
 
5
5
  @layer components {
package/core/styles.css CHANGED
@@ -96,8 +96,7 @@
96
96
  --fs-menu2: 1rem;
97
97
  --fs-menu3: 0.875rem;
98
98
  --fs-quote: 1.5rem;
99
- --fs-code1: 1rem;
100
- --fs-code2: 0.875rem;
99
+ --fs-code: 0.875rem;
101
100
 
102
101
  --lh-dense: 1;
103
102
  --lh-tight: 1.125;
@@ -149,6 +148,7 @@
149
148
  --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
150
149
  --spacing-chip: 0.75rem 1rem; /* 6px 8px */
151
150
  --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
151
+ --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
152
152
 
153
153
  /* In components, when looking at implementing viewport margin and spacing between elements,
154
154
  the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
@@ -400,12 +400,12 @@
400
400
  @apply text-menu3;
401
401
  }
402
402
 
403
- .ui-text-code1 {
404
- @apply font-mono font-normal text-code1;
403
+ .ui-text-code {
404
+ @apply font-mono font-semibold text-code;
405
405
  }
406
406
 
407
- .ui-text-code2 {
408
- @apply font-mono font-normal text-code2;
407
+ .ui-text-code-inline {
408
+ @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
409
409
  }
410
410
 
411
411
  .ui-unordered-list {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "6.10.0",
3
+ "version": "7.0.0",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,5 +1,5 @@
1
1
  @layer base {
2
- @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
2
+ @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
3
3
  }
4
4
 
5
5
  @layer components {
@@ -96,8 +96,7 @@
96
96
  --fs-menu2: 1rem;
97
97
  --fs-menu3: 0.875rem;
98
98
  --fs-quote: 1.5rem;
99
- --fs-code1: 1rem;
100
- --fs-code2: 0.875rem;
99
+ --fs-code: 0.875rem;
101
100
 
102
101
  --lh-dense: 1;
103
102
  --lh-tight: 1.125;
@@ -149,6 +148,7 @@
149
148
  --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
150
149
  --spacing-chip: 0.75rem 1rem; /* 6px 8px */
151
150
  --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
151
+ --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
152
152
 
153
153
  /* In components, when looking at implementing viewport margin and spacing between elements,
154
154
  the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
@@ -89,12 +89,12 @@
89
89
  @apply text-menu3;
90
90
  }
91
91
 
92
- .ui-text-code1 {
93
- @apply font-mono font-normal text-code1;
92
+ .ui-text-code {
93
+ @apply font-mono font-semibold text-code;
94
94
  }
95
95
 
96
- .ui-text-code2 {
97
- @apply font-mono font-normal text-code2;
96
+ .ui-text-code-inline {
97
+ @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
98
98
  }
99
99
 
100
100
  .ui-unordered-list {
@@ -52,8 +52,7 @@ module.exports = {
52
52
  menu2: ["var(--fs-menu2)", "var(--lh-tight)"],
53
53
  menu3: ["var(--fs-menu3)", "var(--lh-snug)"],
54
54
  quote: ["var(--fs-quote)", "var(--lh-relaxed)"],
55
- code1: ["var(--fs-code1)", "var(--lh-relaxed)"],
56
- code2: ["var(--fs-code2)", "var(--lh-relaxed)"],
55
+ code: ["var(--fs-code)", "var(--lh-dense)"],
57
56
  },
58
57
  colors: {
59
58
  transparent: "transparent",
@@ -107,6 +106,7 @@ module.exports = {
107
106
  media: "var(--spacing-media)",
108
107
  input: "var(--spacing-input)",
109
108
  overline: "var(--spacing-overline)",
109
+ "inline-code": "var(--spacing-inline-code)",
110
110
  ...theme("spacing"),
111
111
  }),
112
112
  spacing: {