@crystallize/design-system 1.11.6 → 1.12.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @crystallize/design-system
2
2
 
3
+ ## 1.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - a47bba7: The rich text editor is now able to deal with more invalid initial states.
8
+
9
+ ### Patch Changes
10
+
11
+ - a47bba7: Updated to Storybook 7.0.7
12
+
13
+ ## 1.11.7
14
+
15
+ ### Patch Changes
16
+
17
+ - 8157f4d3: Add disabled prop to the action-menu. Add new Bin, Mushroom and Unpublish icons and update the Edit icon SVG. Update Tag component styles to match the button styes.
18
+
3
19
  ## 1.11.6
4
20
 
5
21
  ### Patch Changes
package/dist/index.css CHANGED
@@ -1253,6 +1253,9 @@ button {
1253
1253
  outline-color: inherit;
1254
1254
  outline-color: currentColor;
1255
1255
  }
1256
+ .c-action-menu:enabled {
1257
+ cursor: pointer;
1258
+ }
1256
1259
  .c-action-menu:not(:disabled):hover {
1257
1260
  gap: 3px;
1258
1261
  --tw-bg-opacity: 1;
@@ -2085,32 +2088,76 @@ button {
2085
2088
 
2086
2089
  /* src/tag/tag.css */
2087
2090
  .c-tag {
2088
- display: inline-flex;
2091
+ display: inline-grid;
2092
+ grid-auto-flow: column;
2089
2093
  align-items: center;
2094
+ gap: 0.5rem;
2095
+ white-space: nowrap;
2090
2096
  border-radius: 0.25rem;
2097
+ font-weight: 500;
2098
+ --tw-text-opacity: 1;
2099
+ color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
2091
2100
  border-width: 1px;
2092
2101
  border-style: solid;
2102
+ border-color: transparent;
2103
+ }
2104
+ .c-tag__prepend {
2105
+ margin-left: -0.5rem;
2106
+ display: flex;
2107
+ align-items: center;
2108
+ }
2109
+ .c-tag__remove-button {
2110
+ margin: 0px;
2111
+ margin-right: -0.5rem;
2112
+ cursor: pointer;
2113
+ border-style: none;
2114
+ background-color: transparent;
2115
+ padding: 0px;
2116
+ font-size: 0;
2117
+ }
2118
+ .c-tag-default {
2093
2119
  --tw-border-opacity: 1;
2094
2120
  border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity));
2095
2121
  --tw-bg-opacity: 1;
2096
2122
  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
2097
- padding: 0.25rem;
2098
- text-align: center;
2099
- font-size: 0.75rem;
2100
- line-height: 1rem;
2101
- font-weight: 500;
2102
- --tw-text-opacity: 1;
2103
- color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
2104
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2105
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
2123
+ }
2124
+ .c-tag-elevate {
2125
+ --tw-bg-opacity: 1;
2126
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
2127
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
2128
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
2106
2129
  box-shadow:
2107
2130
  var(--tw-ring-offset-shadow, 0 0 #0000),
2108
2131
  var(--tw-ring-shadow, 0 0 #0000),
2109
2132
  var(--tw-shadow);
2110
2133
  }
2111
- .c-tag-elevate {
2112
- --tw-bg-opacity: 1;
2113
- background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
2134
+ .c-tag-xs {
2135
+ height: 1.5rem;
2136
+ padding-left: 0.5rem;
2137
+ padding-right: 0.5rem;
2138
+ font-size: 0.75rem;
2139
+ line-height: 1rem;
2140
+ }
2141
+ .c-tag-sm {
2142
+ height: 2.25rem;
2143
+ padding-left: 1rem;
2144
+ padding-right: 1rem;
2145
+ font-size: 0.875rem;
2146
+ line-height: 1.25rem;
2147
+ }
2148
+ .c-tag-md {
2149
+ height: 2.75rem;
2150
+ padding-left: 1.5rem;
2151
+ padding-right: 1.5rem;
2152
+ font-size: 1rem;
2153
+ line-height: 1.5rem;
2154
+ }
2155
+ .c-tag-lg {
2156
+ height: 3.5rem;
2157
+ padding-left: 1.5rem;
2158
+ padding-right: 1.5rem;
2159
+ font-size: 1.125rem;
2160
+ line-height: 1.75rem;
2114
2161
  }
2115
2162
 
2116
2163
  /* src/rich-text-editor/rich-text-editor.css */