@sk-web-gui/core 1.1.1 → 1.1.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/dist/cjs/components/button.js +3 -0
- package/dist/cjs/components/button.js.map +1 -1
- package/dist/cjs/components/modal.js +5 -3
- package/dist/cjs/components/modal.js.map +1 -1
- package/dist/esm/components/button.js +3 -0
- package/dist/esm/components/button.js.map +1 -1
- package/dist/esm/components/modal.js +5 -3
- package/dist/esm/components/modal.js.map +1 -1
- package/dist/types/components/button.d.ts +3 -0
- package/dist/types/components/modal.d.ts +4 -0
- package/package.json +2 -2
|
@@ -179,6 +179,9 @@ var Button = exports.Button = function Button(colors) {
|
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
}, buttonPrimary(colors), buttonSecondary(), buttonTertiary(), buttonGhost(), buttonLink(colors), {
|
|
182
|
+
'&[data-background="false"]:not(:hover)': {
|
|
183
|
+
'@apply bg-transparent': {}
|
|
184
|
+
},
|
|
182
185
|
'.btn-has-icon': {
|
|
183
186
|
'&-left': {
|
|
184
187
|
'@apply h-full flex items-center justify-center -ml-2': {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":["buttonPrimary","colors","_dataInvertedTru2","_dataColorPrimar","_extends","reduce","styles","color","_active","_active2","_dataInvertedTru","_ref","_extends2","buttonSecondary","buttonTertiary","buttonGhost","buttonLink","_ref2","_extends3","Button","exports","transitionProperty","svg","minWidth","width","maxWidth"],"sources":["../../../src/components/button.ts"],"sourcesContent":["function buttonPrimary(colors: string[]) {\r\n return {\r\n '&-primary': {\r\n '@apply text-light-primary': {},\r\n /* hover */\r\n '@apply hover:bg-primary-surface-hover': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply bg-${color}-surface-primary text-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-${color}-surface-primary-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply bg-primary-surface': {},\r\n '@apply hover:bg-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-primary-surface-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n '@apply bg-inverted-primary-surface': {},\r\n '@apply hover:bg-inverted-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-inverted-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-inverted-primary-surface-hover`]: {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonSecondary() {\r\n return {\r\n '&-secondary': {\r\n '@apply border-secondary-outline': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-secondary-outline-hover': {},\r\n '@apply hover:bg-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply border-inverted-secondary-outline': {},\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-inverted-secondary-outline-hover': {},\r\n '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-inverted-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonTertiary() {\r\n return {\r\n '&-tertiary': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-tertiary-surface-hover': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-inverted-tertiary-surface-hover': {},\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonGhost() {\r\n return {\r\n '&-ghost': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-transparent': {},\r\n '@apply border-transparent': {},\r\n /* hover */\r\n '@apply hover:bg-transparent': {},\r\n '@apply hover:border-transparent': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors: string[]) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-text active:text-${color}-text`]: {},\r\n // dark colors\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nexport const Button = (colors: string[]) => ({\r\n '.sk-btn': {\r\n '@apply box-border': {},\r\n '@apply border-2 border-transparent': {},\r\n '@apply cursor-pointer': {},\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply rounded-button': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n '@apply focus-visible:ring': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-circular': {},\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-label-small': {},\r\n '@apply px-14 py-8 gap-6': {},\r\n '@apply max-h-[3.2rem] h-[3.2rem]': {},\r\n '@apply rounded-button-sm': {},\r\n svg: {\r\n '@apply h-[1.6rem] w-[1.6rem]': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply text-label-medium': {},\r\n '@apply px-18 py-8 gap-8': {},\r\n '@apply max-h-[4rem] h-[4rem]': {},\r\n '@apply rounded-button-md': {},\r\n svg: {\r\n '@apply h-[1.8rem] w-[1.8rem]': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-label-large': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply max-h-[4.8rem] h-[4.8rem]': {},\r\n '@apply rounded-button-lg': {},\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n // State\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},\r\n '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply disabled:text-inverted-dark-disabled text-inverted-dark-disabled disabled:bg-inverted-primary-surface-disabled bg-inverted-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n\r\n // variants\r\n ...buttonPrimary(colors),\r\n ...buttonSecondary(),\r\n ...buttonTertiary(),\r\n ...buttonGhost(),\r\n ...buttonLink(colors),\r\n\r\n '.btn-has-icon': {\r\n '&-left': {\r\n '@apply h-full flex items-center justify-center -ml-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n '&-right': {\r\n '@apply h-full flex items-center justify-center -mr-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n },\r\n '&-lg .btn-has-icon-left': {\r\n '@apply -ml-4': {},\r\n },\r\n '&-lg .btn-has-icon-right': {\r\n '@apply -mr-4': {},\r\n },\r\n '&[data-icon=true]': {\r\n '@apply p-0': {},\r\n\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n\r\n '&.sk-btn-sm': {\r\n minWidth: '3.2rem',\r\n width: '3.2rem',\r\n maxWidth: '3.2rem',\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-md': {\r\n minWidth: '4rem',\r\n width: '4rem',\r\n maxWidth: '4rem',\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-lg': {\r\n minWidth: '4.8rem',\r\n width: '4.8rem',\r\n maxWidth: '4.8rem',\r\n svg: {\r\n '@apply h-[2.4rem] w-[2.4rem]': {},\r\n },\r\n },\r\n '.btn-has-icon': {\r\n '&-left': {\r\n '@apply m-0': {},\r\n },\r\n '&-right': {\r\n '@apply m-0': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","names":["buttonPrimary","colors","_dataInvertedTru2","_dataColorPrimar","_extends","reduce","styles","color","_active","_active2","_dataInvertedTru","_ref","_extends2","buttonSecondary","buttonTertiary","buttonGhost","buttonLink","_ref2","_extends3","Button","exports","transitionProperty","svg","minWidth","width","maxWidth"],"sources":["../../../src/components/button.ts"],"sourcesContent":["function buttonPrimary(colors: string[]) {\r\n return {\r\n '&-primary': {\r\n '@apply text-light-primary': {},\r\n /* hover */\r\n '@apply hover:bg-primary-surface-hover': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply bg-${color}-surface-primary text-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-${color}-surface-primary-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply bg-primary-surface': {},\r\n '@apply hover:bg-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-primary-surface-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n '@apply bg-inverted-primary-surface': {},\r\n '@apply hover:bg-inverted-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-inverted-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-inverted-primary-surface-hover`]: {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonSecondary() {\r\n return {\r\n '&-secondary': {\r\n '@apply border-secondary-outline': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-secondary-outline-hover': {},\r\n '@apply hover:bg-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply border-inverted-secondary-outline': {},\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-inverted-secondary-outline-hover': {},\r\n '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-inverted-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonTertiary() {\r\n return {\r\n '&-tertiary': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-tertiary-surface-hover': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-inverted-tertiary-surface-hover': {},\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonGhost() {\r\n return {\r\n '&-ghost': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-transparent': {},\r\n '@apply border-transparent': {},\r\n /* hover */\r\n '@apply hover:bg-transparent': {},\r\n '@apply hover:border-transparent': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors: string[]) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-text active:text-${color}-text`]: {},\r\n // dark colors\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nexport const Button = (colors: string[]) => ({\r\n '.sk-btn': {\r\n '@apply box-border': {},\r\n '@apply border-2 border-transparent': {},\r\n '@apply cursor-pointer': {},\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply rounded-button': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n '@apply focus-visible:ring': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-circular': {},\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-label-small': {},\r\n '@apply px-14 py-8 gap-6': {},\r\n '@apply max-h-[3.2rem] h-[3.2rem]': {},\r\n '@apply rounded-button-sm': {},\r\n svg: {\r\n '@apply h-[1.6rem] w-[1.6rem]': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply text-label-medium': {},\r\n '@apply px-18 py-8 gap-8': {},\r\n '@apply max-h-[4rem] h-[4rem]': {},\r\n '@apply rounded-button-md': {},\r\n svg: {\r\n '@apply h-[1.8rem] w-[1.8rem]': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-label-large': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply max-h-[4.8rem] h-[4.8rem]': {},\r\n '@apply rounded-button-lg': {},\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n // State\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},\r\n '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply disabled:text-inverted-dark-disabled text-inverted-dark-disabled disabled:bg-inverted-primary-surface-disabled bg-inverted-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n\r\n // variants\r\n ...buttonPrimary(colors),\r\n ...buttonSecondary(),\r\n ...buttonTertiary(),\r\n ...buttonGhost(),\r\n ...buttonLink(colors),\r\n\r\n '&[data-background=\"false\"]:not(:hover)': {\r\n '@apply bg-transparent': {},\r\n },\r\n '.btn-has-icon': {\r\n '&-left': {\r\n '@apply h-full flex items-center justify-center -ml-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n '&-right': {\r\n '@apply h-full flex items-center justify-center -mr-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n },\r\n '&-lg .btn-has-icon-left': {\r\n '@apply -ml-4': {},\r\n },\r\n '&-lg .btn-has-icon-right': {\r\n '@apply -mr-4': {},\r\n },\r\n '&[data-icon=true]': {\r\n '@apply p-0': {},\r\n\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n\r\n '&.sk-btn-sm': {\r\n minWidth: '3.2rem',\r\n width: '3.2rem',\r\n maxWidth: '3.2rem',\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-md': {\r\n minWidth: '4rem',\r\n width: '4rem',\r\n maxWidth: '4rem',\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-lg': {\r\n minWidth: '4.8rem',\r\n width: '4.8rem',\r\n maxWidth: '4.8rem',\r\n svg: {\r\n '@apply h-[2.4rem] w-[2.4rem]': {},\r\n },\r\n },\r\n '.btn-has-icon': {\r\n '&-left': {\r\n '@apply m-0': {},\r\n },\r\n '&-right': {\r\n '@apply m-0': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
|
|
@@ -5,8 +5,6 @@ exports.Modal = void 0;
|
|
|
5
5
|
var Modal = exports.Modal = function Modal() {
|
|
6
6
|
return {
|
|
7
7
|
'.sk-modal': {
|
|
8
|
-
// '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},
|
|
9
|
-
|
|
10
8
|
'&-wrapper': {
|
|
11
9
|
'@apply fixed inset-0 z-20 overflow-y-auto': {},
|
|
12
10
|
'@apply bg-primitives-overlay-darken-6': {},
|
|
@@ -19,6 +17,7 @@ var Modal = exports.Modal = function Modal() {
|
|
|
19
17
|
'@apply fixed inset-0': {}
|
|
20
18
|
},
|
|
21
19
|
'&-dialog': {
|
|
20
|
+
'@apply text-dark-secondary': {},
|
|
22
21
|
'@apply inline-flex flex-col': {},
|
|
23
22
|
'@apply text-left': {},
|
|
24
23
|
'@apply align-middle': {},
|
|
@@ -38,7 +37,10 @@ var Modal = exports.Modal = function Modal() {
|
|
|
38
37
|
},
|
|
39
38
|
'&-content': {
|
|
40
39
|
'@apply flex flex-col': {},
|
|
41
|
-
'@apply py-8 pb-16 gap-12': {}
|
|
40
|
+
'@apply py-8 pb-16 gap-12': {},
|
|
41
|
+
'h1, h2, h3, h4, h5, h6': {
|
|
42
|
+
'@apply text-dark-primary': {}
|
|
43
|
+
}
|
|
42
44
|
},
|
|
43
45
|
'&-footer': {
|
|
44
46
|
'@apply flex flex-row justify-start': {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","names":["Modal","exports"],"sources":["../../../src/components/modal.ts"],"sourcesContent":["export const Modal = () => ({\r\n '.sk-modal': {\r\n
|
|
1
|
+
{"version":3,"file":"modal.js","names":["Modal","exports"],"sources":["../../../src/components/modal.ts"],"sourcesContent":["export const Modal = () => ({\r\n '.sk-modal': {\r\n '&-wrapper': {\r\n '@apply fixed inset-0 z-20 overflow-y-auto': {},\r\n '@apply bg-primitives-overlay-darken-6': {},\r\n '@apply dark:bg-primitives-overlay-darken-8': {},\r\n\r\n '&-inner': {\r\n '@apply min-h-screen px-4 text-center': {},\r\n },\r\n },\r\n\r\n '&-overlay': {\r\n '@apply fixed inset-0': {},\r\n },\r\n\r\n '&-dialog': {\r\n '@apply text-dark-secondary': {},\r\n '@apply inline-flex flex-col': {},\r\n '@apply text-left': {},\r\n '@apply align-middle': {},\r\n '@apply transition-all transform': {},\r\n '@apply rounded-cards': {},\r\n '@apply bg-background-content': {},\r\n '@apply dark:bg-background-100': {},\r\n '@apply px-24 pt-24 pb-40': {},\r\n '@apply gap-16': {},\r\n\r\n '&-header': {\r\n '@apply flex justify-between items-center w-full': {},\r\n '&-title': {\r\n '@apply grow': {},\r\n '@apply text-label-medium': {},\r\n },\r\n },\r\n },\r\n '&-content': {\r\n '@apply flex flex-col': {},\r\n '@apply py-8 pb-16 gap-12': {},\r\n 'h1, h2, h3, h4, h5, h6': {\r\n '@apply text-dark-primary': {},\r\n },\r\n },\r\n '&-footer': {\r\n '@apply flex flex-row justify-start': {},\r\n '@apply p-0 gap-12': {},\r\n },\r\n },\r\n});\r\n"],"mappings":";;;;AAAO,IAAMA,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,SAARA,KAAKA,CAAA;EAAA,OAAU;IAC1B,WAAW,EAAE;MACX,WAAW,EAAE;QACX,2CAA2C,EAAE,CAAC,CAAC;QAC/C,uCAAuC,EAAE,CAAC,CAAC;QAC3C,4CAA4C,EAAE,CAAC,CAAC;QAEhD,SAAS,EAAE;UACT,sCAAsC,EAAE,CAAC;QAC3C;MACF,CAAC;MAED,WAAW,EAAE;QACX,sBAAsB,EAAE,CAAC;MAC3B,CAAC;MAED,UAAU,EAAE;QACV,4BAA4B,EAAE,CAAC,CAAC;QAChC,6BAA6B,EAAE,CAAC,CAAC;QACjC,kBAAkB,EAAE,CAAC,CAAC;QACtB,qBAAqB,EAAE,CAAC,CAAC;QACzB,iCAAiC,EAAE,CAAC,CAAC;QACrC,sBAAsB,EAAE,CAAC,CAAC;QAC1B,8BAA8B,EAAE,CAAC,CAAC;QAClC,+BAA+B,EAAE,CAAC,CAAC;QACnC,0BAA0B,EAAE,CAAC,CAAC;QAC9B,eAAe,EAAE,CAAC,CAAC;QAEnB,UAAU,EAAE;UACV,iDAAiD,EAAE,CAAC,CAAC;UACrD,SAAS,EAAE;YACT,aAAa,EAAE,CAAC,CAAC;YACjB,0BAA0B,EAAE,CAAC;UAC/B;QACF;MACF,CAAC;MACD,WAAW,EAAE;QACX,sBAAsB,EAAE,CAAC,CAAC;QAC1B,0BAA0B,EAAE,CAAC,CAAC;QAC9B,wBAAwB,EAAE;UACxB,0BAA0B,EAAE,CAAC;QAC/B;MACF,CAAC;MACD,UAAU,EAAE;QACV,oCAAoC,EAAE,CAAC,CAAC;QACxC,mBAAmB,EAAE,CAAC;MACxB;IACF;EACF,CAAC;AAAA,CAAC"}
|
|
@@ -195,6 +195,9 @@ export var Button = colors => ({
|
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
197
|
}, buttonPrimary(colors), buttonSecondary(), buttonTertiary(), buttonGhost(), buttonLink(colors), {
|
|
198
|
+
'&[data-background="false"]:not(:hover)': {
|
|
199
|
+
'@apply bg-transparent': {}
|
|
200
|
+
},
|
|
198
201
|
'.btn-has-icon': {
|
|
199
202
|
'&-left': {
|
|
200
203
|
'@apply h-full flex items-center justify-center -ml-2': {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":["buttonPrimary","colors","_extends","reduce","styles","color","buttonSecondary","buttonTertiary","buttonGhost","buttonLink","Button","transitionProperty","svg","minWidth","width","maxWidth"],"sources":["../../../src/components/button.ts"],"sourcesContent":["function buttonPrimary(colors: string[]) {\r\n return {\r\n '&-primary': {\r\n '@apply text-light-primary': {},\r\n /* hover */\r\n '@apply hover:bg-primary-surface-hover': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply bg-${color}-surface-primary text-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-${color}-surface-primary-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply bg-primary-surface': {},\r\n '@apply hover:bg-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-primary-surface-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n '@apply bg-inverted-primary-surface': {},\r\n '@apply hover:bg-inverted-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-inverted-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-inverted-primary-surface-hover`]: {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonSecondary() {\r\n return {\r\n '&-secondary': {\r\n '@apply border-secondary-outline': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-secondary-outline-hover': {},\r\n '@apply hover:bg-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply border-inverted-secondary-outline': {},\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-inverted-secondary-outline-hover': {},\r\n '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-inverted-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonTertiary() {\r\n return {\r\n '&-tertiary': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-tertiary-surface-hover': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-inverted-tertiary-surface-hover': {},\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonGhost() {\r\n return {\r\n '&-ghost': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-transparent': {},\r\n '@apply border-transparent': {},\r\n /* hover */\r\n '@apply hover:bg-transparent': {},\r\n '@apply hover:border-transparent': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors: string[]) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-text active:text-${color}-text`]: {},\r\n // dark colors\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nexport const Button = (colors: string[]) => ({\r\n '.sk-btn': {\r\n '@apply box-border': {},\r\n '@apply border-2 border-transparent': {},\r\n '@apply cursor-pointer': {},\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply rounded-button': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n '@apply focus-visible:ring': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-circular': {},\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-label-small': {},\r\n '@apply px-14 py-8 gap-6': {},\r\n '@apply max-h-[3.2rem] h-[3.2rem]': {},\r\n '@apply rounded-button-sm': {},\r\n svg: {\r\n '@apply h-[1.6rem] w-[1.6rem]': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply text-label-medium': {},\r\n '@apply px-18 py-8 gap-8': {},\r\n '@apply max-h-[4rem] h-[4rem]': {},\r\n '@apply rounded-button-md': {},\r\n svg: {\r\n '@apply h-[1.8rem] w-[1.8rem]': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-label-large': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply max-h-[4.8rem] h-[4.8rem]': {},\r\n '@apply rounded-button-lg': {},\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n // State\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},\r\n '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply disabled:text-inverted-dark-disabled text-inverted-dark-disabled disabled:bg-inverted-primary-surface-disabled bg-inverted-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n\r\n // variants\r\n ...buttonPrimary(colors),\r\n ...buttonSecondary(),\r\n ...buttonTertiary(),\r\n ...buttonGhost(),\r\n ...buttonLink(colors),\r\n\r\n '.btn-has-icon': {\r\n '&-left': {\r\n '@apply h-full flex items-center justify-center -ml-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n '&-right': {\r\n '@apply h-full flex items-center justify-center -mr-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n },\r\n '&-lg .btn-has-icon-left': {\r\n '@apply -ml-4': {},\r\n },\r\n '&-lg .btn-has-icon-right': {\r\n '@apply -mr-4': {},\r\n },\r\n '&[data-icon=true]': {\r\n '@apply p-0': {},\r\n\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n\r\n '&.sk-btn-sm': {\r\n minWidth: '3.2rem',\r\n width: '3.2rem',\r\n maxWidth: '3.2rem',\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-md': {\r\n minWidth: '4rem',\r\n width: '4rem',\r\n maxWidth: '4rem',\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-lg': {\r\n minWidth: '4.8rem',\r\n width: '4.8rem',\r\n maxWidth: '4.8rem',\r\n svg: {\r\n '@apply h-[2.4rem] w-[2.4rem]': {},\r\n },\r\n },\r\n '.btn-has-icon': {\r\n '&-left': {\r\n '@apply m-0': {},\r\n },\r\n '&-right': {\r\n '@apply m-0': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","names":["buttonPrimary","colors","_extends","reduce","styles","color","buttonSecondary","buttonTertiary","buttonGhost","buttonLink","Button","transitionProperty","svg","minWidth","width","maxWidth"],"sources":["../../../src/components/button.ts"],"sourcesContent":["function buttonPrimary(colors: string[]) {\r\n return {\r\n '&-primary': {\r\n '@apply text-light-primary': {},\r\n /* hover */\r\n '@apply hover:bg-primary-surface-hover': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply bg-${color}-surface-primary text-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-${color}-surface-primary-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply bg-primary-surface': {},\r\n '@apply hover:bg-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-primary-surface-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n '@apply bg-inverted-primary-surface': {},\r\n '@apply hover:bg-inverted-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-inverted-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-inverted-primary-surface-hover`]: {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonSecondary() {\r\n return {\r\n '&-secondary': {\r\n '@apply border-secondary-outline': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-secondary-outline-hover': {},\r\n '@apply hover:bg-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply border-inverted-secondary-outline': {},\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-inverted-secondary-outline-hover': {},\r\n '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-inverted-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonTertiary() {\r\n return {\r\n '&-tertiary': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-tertiary-surface-hover': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-inverted-tertiary-surface-hover': {},\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonGhost() {\r\n return {\r\n '&-ghost': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-transparent': {},\r\n '@apply border-transparent': {},\r\n /* hover */\r\n '@apply hover:bg-transparent': {},\r\n '@apply hover:border-transparent': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors: string[]) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-text active:text-${color}-text`]: {},\r\n // dark colors\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nexport const Button = (colors: string[]) => ({\r\n '.sk-btn': {\r\n '@apply box-border': {},\r\n '@apply border-2 border-transparent': {},\r\n '@apply cursor-pointer': {},\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply rounded-button': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n '@apply focus-visible:ring': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-circular': {},\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-label-small': {},\r\n '@apply px-14 py-8 gap-6': {},\r\n '@apply max-h-[3.2rem] h-[3.2rem]': {},\r\n '@apply rounded-button-sm': {},\r\n svg: {\r\n '@apply h-[1.6rem] w-[1.6rem]': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply text-label-medium': {},\r\n '@apply px-18 py-8 gap-8': {},\r\n '@apply max-h-[4rem] h-[4rem]': {},\r\n '@apply rounded-button-md': {},\r\n svg: {\r\n '@apply h-[1.8rem] w-[1.8rem]': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-label-large': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply max-h-[4.8rem] h-[4.8rem]': {},\r\n '@apply rounded-button-lg': {},\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n // State\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},\r\n '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n '&[data-inverted=\"true\"]': {\r\n '@apply disabled:text-inverted-dark-disabled text-inverted-dark-disabled disabled:bg-inverted-primary-surface-disabled bg-inverted-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n\r\n // variants\r\n ...buttonPrimary(colors),\r\n ...buttonSecondary(),\r\n ...buttonTertiary(),\r\n ...buttonGhost(),\r\n ...buttonLink(colors),\r\n\r\n '&[data-background=\"false\"]:not(:hover)': {\r\n '@apply bg-transparent': {},\r\n },\r\n '.btn-has-icon': {\r\n '&-left': {\r\n '@apply h-full flex items-center justify-center -ml-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n '&-right': {\r\n '@apply h-full flex items-center justify-center -mr-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n },\r\n '&-lg .btn-has-icon-left': {\r\n '@apply -ml-4': {},\r\n },\r\n '&-lg .btn-has-icon-right': {\r\n '@apply -mr-4': {},\r\n },\r\n '&[data-icon=true]': {\r\n '@apply p-0': {},\r\n\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n\r\n '&.sk-btn-sm': {\r\n minWidth: '3.2rem',\r\n width: '3.2rem',\r\n maxWidth: '3.2rem',\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-md': {\r\n minWidth: '4rem',\r\n width: '4rem',\r\n maxWidth: '4rem',\r\n svg: {\r\n '@apply h-[2rem] w-[2rem]': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-lg': {\r\n minWidth: '4.8rem',\r\n width: '4.8rem',\r\n maxWidth: '4.8rem',\r\n svg: {\r\n '@apply h-[2.4rem] w-[2.4rem]': {},\r\n },\r\n },\r\n '.btn-has-icon': {\r\n '&-left': {\r\n '@apply m-0': {},\r\n },\r\n '&-right': {\r\n '@apply m-0': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
export var Modal = () => ({
|
|
2
2
|
'.sk-modal': {
|
|
3
|
-
// '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},
|
|
4
|
-
|
|
5
3
|
'&-wrapper': {
|
|
6
4
|
'@apply fixed inset-0 z-20 overflow-y-auto': {},
|
|
7
5
|
'@apply bg-primitives-overlay-darken-6': {},
|
|
@@ -14,6 +12,7 @@ export var Modal = () => ({
|
|
|
14
12
|
'@apply fixed inset-0': {}
|
|
15
13
|
},
|
|
16
14
|
'&-dialog': {
|
|
15
|
+
'@apply text-dark-secondary': {},
|
|
17
16
|
'@apply inline-flex flex-col': {},
|
|
18
17
|
'@apply text-left': {},
|
|
19
18
|
'@apply align-middle': {},
|
|
@@ -33,7 +32,10 @@ export var Modal = () => ({
|
|
|
33
32
|
},
|
|
34
33
|
'&-content': {
|
|
35
34
|
'@apply flex flex-col': {},
|
|
36
|
-
'@apply py-8 pb-16 gap-12': {}
|
|
35
|
+
'@apply py-8 pb-16 gap-12': {},
|
|
36
|
+
'h1, h2, h3, h4, h5, h6': {
|
|
37
|
+
'@apply text-dark-primary': {}
|
|
38
|
+
}
|
|
37
39
|
},
|
|
38
40
|
'&-footer': {
|
|
39
41
|
'@apply flex flex-row justify-start': {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","names":["Modal"],"sources":["../../../src/components/modal.ts"],"sourcesContent":["export const Modal = () => ({\r\n '.sk-modal': {\r\n
|
|
1
|
+
{"version":3,"file":"modal.js","names":["Modal"],"sources":["../../../src/components/modal.ts"],"sourcesContent":["export const Modal = () => ({\r\n '.sk-modal': {\r\n '&-wrapper': {\r\n '@apply fixed inset-0 z-20 overflow-y-auto': {},\r\n '@apply bg-primitives-overlay-darken-6': {},\r\n '@apply dark:bg-primitives-overlay-darken-8': {},\r\n\r\n '&-inner': {\r\n '@apply min-h-screen px-4 text-center': {},\r\n },\r\n },\r\n\r\n '&-overlay': {\r\n '@apply fixed inset-0': {},\r\n },\r\n\r\n '&-dialog': {\r\n '@apply text-dark-secondary': {},\r\n '@apply inline-flex flex-col': {},\r\n '@apply text-left': {},\r\n '@apply align-middle': {},\r\n '@apply transition-all transform': {},\r\n '@apply rounded-cards': {},\r\n '@apply bg-background-content': {},\r\n '@apply dark:bg-background-100': {},\r\n '@apply px-24 pt-24 pb-40': {},\r\n '@apply gap-16': {},\r\n\r\n '&-header': {\r\n '@apply flex justify-between items-center w-full': {},\r\n '&-title': {\r\n '@apply grow': {},\r\n '@apply text-label-medium': {},\r\n },\r\n },\r\n },\r\n '&-content': {\r\n '@apply flex flex-col': {},\r\n '@apply py-8 pb-16 gap-12': {},\r\n 'h1, h2, h3, h4, h5, h6': {\r\n '@apply text-dark-primary': {},\r\n },\r\n },\r\n '&-footer': {\r\n '@apply flex flex-row justify-start': {},\r\n '@apply p-0 gap-12': {},\r\n },\r\n },\r\n});\r\n"],"mappings":"AAAA,OAAO,IAAMA,KAAK,GAAGA,CAAA,MAAO;EAC1B,WAAW,EAAE;IACX,WAAW,EAAE;MACX,2CAA2C,EAAE,CAAC,CAAC;MAC/C,uCAAuC,EAAE,CAAC,CAAC;MAC3C,4CAA4C,EAAE,CAAC,CAAC;MAEhD,SAAS,EAAE;QACT,sCAAsC,EAAE,CAAC;MAC3C;IACF,CAAC;IAED,WAAW,EAAE;MACX,sBAAsB,EAAE,CAAC;IAC3B,CAAC;IAED,UAAU,EAAE;MACV,4BAA4B,EAAE,CAAC,CAAC;MAChC,6BAA6B,EAAE,CAAC,CAAC;MACjC,kBAAkB,EAAE,CAAC,CAAC;MACtB,qBAAqB,EAAE,CAAC,CAAC;MACzB,iCAAiC,EAAE,CAAC,CAAC;MACrC,sBAAsB,EAAE,CAAC,CAAC;MAC1B,8BAA8B,EAAE,CAAC,CAAC;MAClC,+BAA+B,EAAE,CAAC,CAAC;MACnC,0BAA0B,EAAE,CAAC,CAAC;MAC9B,eAAe,EAAE,CAAC,CAAC;MAEnB,UAAU,EAAE;QACV,iDAAiD,EAAE,CAAC,CAAC;QACrD,SAAS,EAAE;UACT,aAAa,EAAE,CAAC,CAAC;UACjB,0BAA0B,EAAE,CAAC;QAC/B;MACF;IACF,CAAC;IACD,WAAW,EAAE;MACX,sBAAsB,EAAE,CAAC,CAAC;MAC1B,0BAA0B,EAAE,CAAC,CAAC;MAC9B,wBAAwB,EAAE;QACxB,0BAA0B,EAAE,CAAC;MAC/B;IACF,CAAC;IACD,UAAU,EAAE;MACV,oCAAoC,EAAE,CAAC,CAAC;MACxC,mBAAmB,EAAE,CAAC;IACxB;EACF;AACF,CAAC,CAAC"}
|
|
@@ -12,6 +12,7 @@ export declare const Modal: () => {
|
|
|
12
12
|
'@apply fixed inset-0': {};
|
|
13
13
|
};
|
|
14
14
|
'&-dialog': {
|
|
15
|
+
'@apply text-dark-secondary': {};
|
|
15
16
|
'@apply inline-flex flex-col': {};
|
|
16
17
|
'@apply text-left': {};
|
|
17
18
|
'@apply align-middle': {};
|
|
@@ -32,6 +33,9 @@ export declare const Modal: () => {
|
|
|
32
33
|
'&-content': {
|
|
33
34
|
'@apply flex flex-col': {};
|
|
34
35
|
'@apply py-8 pb-16 gap-12': {};
|
|
36
|
+
'h1, h2, h3, h4, h5, h6': {
|
|
37
|
+
'@apply text-dark-primary': {};
|
|
38
|
+
};
|
|
35
39
|
};
|
|
36
40
|
'&-footer': {
|
|
37
41
|
'@apply flex flex-row justify-start': {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sk-web-gui/core",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"@sk-web-gui/theme": "1.0.2",
|
|
47
47
|
"mini-svg-data-uri": "^1.4.4"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "496b3698710621c60c1b237e79f5fd5f98fc1be7"
|
|
50
50
|
}
|