@ably/ui 15.3.1-dev.ba000bc → 15.3.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.
- package/core/Accordion.js +1 -1
- package/core/DropdownMenu.js +1 -1
- package/core/FeaturedLink.js +1 -1
- package/core/Flash.js +1 -1
- package/core/Footer.js +1 -1
- package/core/Header/HeaderLinks.js +1 -0
- package/core/Header.js +1 -0
- package/core/Icon/computed-icons.js +1 -1
- package/core/Icon/utils.js +1 -1
- package/core/Icon.js +1 -1
- package/core/Meganav.js +1 -1
- package/core/MeganavControl.js +1 -1
- package/core/MeganavControlMobileDropdown.js +1 -1
- package/core/MeganavControlMobilePanelClose.js +1 -1
- package/core/MeganavControlMobilePanelOpen.js +1 -1
- package/core/MeganavItemsMobile.js +1 -1
- package/core/MeganavSearch.js +1 -1
- package/core/MeganavSearchPanel.js +1 -1
- package/core/Notice.js +1 -1
- package/core/Pricing/PricingCards.js +1 -1
- package/core/Slider.js +1 -1
- package/core/Status.js +1 -1
- package/core/Table/data.js +1 -1
- package/core/Tooltip.js +1 -1
- package/core/icons/gui/icon-gui-check-circled-fill.svg +4 -0
- package/core/icons/gui/icon-gui-check-lotus-circled.svg +3 -0
- package/core/sprites.svg +1 -1
- package/core/styles/buttons.css +6 -6
- package/core/styles/forms/story-components.js +1 -1
- package/core/utils/heights.js +1 -0
- package/index.d.ts +80 -24
- package/package.json +3 -3
- package/tailwind.config.js +4 -0
- package/core/hooks/use-rails-ujs-hooks.js +0 -1
- package/core/styles/colors/computed-colors.json +0 -1
package/core/styles/buttons.css
CHANGED
|
@@ -28,27 +28,27 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.ui-button-priority-base {
|
|
31
|
-
@apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000
|
|
31
|
+
@apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.ui-theme-dark .ui-button-priority-base {
|
|
35
|
-
@apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000
|
|
35
|
+
@apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.ui-button-primary-base {
|
|
39
|
-
@apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100
|
|
39
|
+
@apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 active:text-neutral-300 ui-button-disabled-base;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.ui-theme-dark .ui-button-primary-base {
|
|
43
|
-
@apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200
|
|
43
|
+
@apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 active:text-neutral-1000 ui-button-disabled-base-dark;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.ui-button-secondary-base {
|
|
47
|
-
@apply text-neutral-1300
|
|
47
|
+
@apply text-neutral-1300 active:text-neutral-1000 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 disabled:border-gui-unavailable disabled:text-gui-unavailable;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.ui-theme-dark .ui-button-secondary-base {
|
|
51
|
-
@apply text-neutral-000
|
|
51
|
+
@apply text-neutral-000 active:text-neutral-300 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.ui-button-priority-lg {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"../../Icon";export const Checkbox=({index,disabled})=>React.createElement("div",{className:"ui-checkbox-p1 flex items-center"},React.createElement("input",{"data-ui-checkbox-native":"",type:"checkbox",id:`checkbox-example-${index}`,name:`checkbox-example-${index}`,value:"yes",className:"ui-checkbox-input",disabled:disabled}),React.createElement("div",{"data-ui-checkbox-styled":"",className:"ui-checkbox-styled"},React.createElement(Icon,{name:"icon-gui-
|
|
1
|
+
import React from"react";import Icon from"../../Icon";export const Checkbox=({index,disabled})=>React.createElement("div",{className:"ui-checkbox-p1 flex items-center"},React.createElement("input",{"data-ui-checkbox-native":"",type:"checkbox",id:`checkbox-example-${index}`,name:`checkbox-example-${index}`,value:"yes",className:"ui-checkbox-input",disabled:disabled}),React.createElement("div",{"data-ui-checkbox-styled":"",className:"ui-checkbox-styled"},React.createElement(Icon,{name:"icon-gui-check-micro",size:"1rem",additionalCSS:"ui-checkbox-styled-tick"})),React.createElement("label",{htmlFor:`checkbox-example-${index}`,className:"ui-checkbox-label-p1"},"Option ",index));export const RadioButton=({index,disabled})=>React.createElement("div",{className:"flex items-center gap-8"},React.createElement("input",{"data-ui-radio-native":"",type:"radio",id:`radio-example-${index}`,name:"radio-example",value:`option-${index}`,className:"ui-radio",disabled:disabled}),React.createElement("label",{className:"text-neutral-1300 dark:text-neutral-000",htmlFor:`radio-example-${index}`},"Option ",index));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const HEADER_HEIGHT=64;export const HEADER_BOTTOM_MARGIN=24;export const componentMaxHeight=(...heights)=>{const totalHeight=heights.reduce((sum,height)=>sum+height,0)+"px";return`calc(100vh - ${totalHeight})`};
|