diff --git a/packages/core/src/date-picker/date-picker.css b/packages/core/src/date-picker/date-picker.css
index 719f7cfd..65fa7ca6 100644
--- a/packages/core/src/date-picker/date-picker.css
+++ b/packages/core/src/date-picker/date-picker.css
@@ -6,12 +6,12 @@
--f-date-cell-font-weight: var(--f-font-weight-medium);
--f-date-cell-weekend: var(--f-color-text);
--f-date-cell-weekend-background: var(--f-color-surface-strong);
- --f-date-cell-unavailable: var(--f-color-text-weakest);
- --f-date-cell-disabled: var(--f-color-text-weakest);
+ --f-date-cell-unavailable: var(--f-color-text-weaker);
+ --f-date-cell-disabled: var(--f-color-text-weaker);
--f-date-cell-disabled-background: var(--f-color-surface-strong);
--f-date-cell-pending: var(--f-color-accent);
--f-date-cell-pending-background: rgba(from var(--f-color-accent) r g b / 10%);
- --f-date-cell-edge-selected: var(--f-color-accent-100);
+ --f-date-cell-edge-selected: var(--f-color-text-on-color);
--f-date-cell-edge-selected-background: var(--f-color-accent);
--f-date-cell-selected: var(--f-color-accent);
--f-date-cell-selected-background: rgba(from var(--f-color-accent) r g b / 10%);
@@ -58,7 +58,7 @@
cursor: not-allowed;
}
-.f-date-cell:not(.is-disabled,.is-unavailable).is-today {
+.f-date-cell:not(.is-disabled, .is-unavailable).is-today {
color: var(--f-date-cell-today);
font-weight: var(--f-font-weight-bold);
}
@@ -103,8 +103,8 @@
color: var(--f-date-cell-selected);
}
-.f-date-cell.is-selected.is-start,
-.f-date-cell.is-selected.is-end {
+.f-date-cell.is-selected.is-start:not(.is-unavailable),
+.f-date-cell.is-selected.is-end:not(.is-unavailable) {
color: var(--f-date-cell-edge-selected) !important;
}
@@ -123,7 +123,7 @@
animation-duration: 0.05s;
animation-timing-function: ease-in;
}
-
+
.f-date-cell:not(.is-unavailable).is-start::after,
.f-date-cell:not(.is-unavailable).is-end::after {
border-radius: var(--f-radius);
@@ -141,7 +141,7 @@
animation-duration: 0.05s;
animation-timing-function: ease-in;
}
-
+
.f-date-cell.is-start::before {
border-top-left-radius: var(--f-radius);
border-bottom-left-radius: var(--f-radius);
@@ -150,7 +150,7 @@
.f-date-cell.is-end::before {
border-top-right-radius: var(--f-radius);
border-bottom-right-radius: var(--f-radius);
-}
+}
@keyframes f-date-cell-selected-fadein {
0% {
@@ -186,7 +186,7 @@
/* month */
:root {
- --f-month-day-width: calc(100%/7);
+ --f-month-day-width: calc(100% / 7);
}
.f-month {
@@ -206,7 +206,7 @@
/* months */
:root {
- --f-months-month-width: calc(100%/12*3);
+ --f-months-month-width: calc(100% / 12 * 3);
}
.f-months {
@@ -227,7 +227,7 @@
/* years */
:root {
- --f-years-year-width: calc(100%/12*3);
+ --f-years-year-width: calc(100% / 12 * 3);
}
.f-years {
@@ -325,7 +325,7 @@
--f-time-picker-ampm-padding: 0 var(--f-space-5);
}
-.f-time-picker {
+.f-time-picker {
position: relative;
}
@@ -340,7 +340,7 @@
outline-offset: 1px;
}
-.f-time-picker-time {
+.f-time-picker-time {
padding: var(--f-time-picker-padding);
color: var(--f-time-picker-color);
}
diff --git a/packages/core/src/dialog/dialog.css b/packages/core/src/dialog/dialog.css
index 95c76184..67f30192 100644
--- a/packages/core/src/dialog/dialog.css
+++ b/packages/core/src/dialog/dialog.css
@@ -8,7 +8,7 @@
gap: var(--f-dialog-spacing);
}
-.f-dialog.has-children {
+.f-dialog.has-children {
padding: 0;
}
diff --git a/packages/core/src/dialog/dialog.tsx b/packages/core/src/dialog/dialog.tsx
index 49d51aaf..28ef5c71 100644
--- a/packages/core/src/dialog/dialog.tsx
+++ b/packages/core/src/dialog/dialog.tsx
@@ -1,6 +1,6 @@
import { classNames } from '../helpers'
import React, { useContext } from 'react'
-import { FoldContext, Heading, Modal, ModalClose, Text, useId } from '../'
+import { AppContext, Heading, Modal, ModalClose, Text, useId } from '../'
import { CommonProps } from '../types'
export type DialogOptions = {
@@ -14,7 +14,7 @@ export type DialogOptions = {
}
export const useDialog = () => {
- const { setDialog, closeDialog } = useContext(FoldContext)
+ const { setDialog, closeDialog } = useContext(AppContext)
return { setDialog, closeDialog }
}
diff --git a/packages/core/src/divider/divider.css b/packages/core/src/divider/divider.css
index d12d4481..d6340671 100644
--- a/packages/core/src/divider/divider.css
+++ b/packages/core/src/divider/divider.css
@@ -40,7 +40,7 @@
width: 1px;
height: 100%;
border: none;
- border-left: 1px var(--f-divider-type) var(--f-divider-color);
+ border-left: 1px var(--f-divider-type) var(--f-divider-color);
}
/* content */
diff --git a/packages/core/src/drag/drag-element-area.tsx b/packages/core/src/drag/drag-element-area.tsx
index a396e72b..2ace83d8 100644
--- a/packages/core/src/drag/drag-element-area.tsx
+++ b/packages/core/src/drag/drag-element-area.tsx
@@ -186,11 +186,12 @@ export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) =>
// ? `0 ${origin.height}px`
// : `${origin.width}px 0`
// : null
- node.style.transform = isAnimated && isTargetArea && index >= target.index
- ? direction == 'vertical'
- ? `translateY(${origin.height}px)`
- : `translateX(${origin.width}px)`
- : null
+ node.style.transform =
+ isAnimated && isTargetArea && index >= target.index
+ ? direction == 'vertical'
+ ? `translateY(${origin.height}px)`
+ : `translateX(${origin.width}px)`
+ : null
if (isAnimated && isTargetArea) {
bufferRef.current.style.display = 'block'
diff --git a/packages/core/src/drag/drag-manager.tsx b/packages/core/src/drag/drag-manager.tsx
index b36d8c00..73859168 100644
--- a/packages/core/src/drag/drag-manager.tsx
+++ b/packages/core/src/drag/drag-manager.tsx
@@ -17,12 +17,12 @@ import {
} from '..'
import { globalCursor, windowObject } from '../helpers'
-export const FOLD_DRAG_CACHE = 'FOLD_DRAG_CACHE'
-export const FOLD_DRAG_STATE = 'FOLD_DRAG_STATE'
-export const FOLD_DRAG_LOCK = 'FOLD_DRAG_LOCK'
-export const FOLD_RESTRICT_DUAL_MOVEMENT = 'FOLD_RESTRICT_DUAL_MOVEMENT'
+export const F_DRAG_CACHE = 'F_DRAG_CACHE'
+export const F_DRAG_STATE = 'F_DRAG_STATE'
+export const F_DRAG_LOCK = 'F_DRAG_LOCK'
+export const F_RESTRICT_DUAL_MOVEMENT = 'F_RESTRICT_DUAL_MOVEMENT'
-windowObject[FOLD_DRAG_CACHE] = {
+windowObject[F_DRAG_CACHE] = {
locked: false,
mouseDown: false,
init: {},
@@ -36,7 +36,7 @@ windowObject[FOLD_DRAG_CACHE] = {
targetCache: {},
}
-windowObject[FOLD_DRAG_STATE] = {
+windowObject[F_DRAG_STATE] = {
target: {},
origin: { targetVariant: {} },
}
@@ -79,7 +79,7 @@ export const DragManager = (props: DragManagerProps) => {
}
const handleMouseMove = (e) => {
- if (!window[FOLD_DRAG_LOCK] && isDragging && !cache.locked) {
+ if (!window[F_DRAG_LOCK] && isDragging && !cache.locked) {
const mouseY = e.clientY
const mouseX = e.clientX
const { offsetLeft, offsetTop } = cache.originMouse
@@ -95,7 +95,7 @@ export const DragManager = (props: DragManagerProps) => {
if (mouseX > cache.mouse.x + moveThreshold) moveDirection = 'right'
// if there is dual movement - restrict the direction
- if (window[FOLD_RESTRICT_DUAL_MOVEMENT]) {
+ if (window[F_RESTRICT_DUAL_MOVEMENT]) {
if (moveDirection != 'left' && moveDirection != 'right') {
if (mouseY < cache.mouse.y - moveThreshold) moveDirection = 'up'
if (mouseY > cache.mouse.y + moveThreshold) moveDirection = 'down'
diff --git a/packages/core/src/drag/drag.css b/packages/core/src/drag/drag.css
index 42fef215..4263310f 100644
--- a/packages/core/src/drag/drag.css
+++ b/packages/core/src/drag/drag.css
@@ -1,6 +1,6 @@
:root {
--f-drag-speed: 0s;
- --f-drag-transition: cubic-bezier(.17,.67,.54,1.06);
+ --f-drag-transition: cubic-bezier(0.17, 0.67, 0.54, 1.06);
--f-drag-indent: 0px;
--f-drag-is-dragged-opacity: 1;
--f-drag-is-dragged-pointer-events: none;
@@ -25,20 +25,20 @@
}
.f-drag-area.is-dragging {
- pointer-events: all !important;
- user-select: all !important;
+ pointer-events: all !important;
+ user-select: all !important;
}
.f-drag-area.is-dragging .f-drag-element > *.drag-pe-all,
.f-drag-area.is-dragging .f-drag-area__element > *.drag-pe-all {
- pointer-events: all !important;
- user-select: all !important;
+ pointer-events: all !important;
+ user-select: all !important;
}
/* target groups */
.f-drag-area.is-dragging.no-origin-variant .f-drag-area.is-dragging:not(.no-origin-variant) {
- pointer-events: all;
+ pointer-events: all;
user-select: all;
}
@@ -57,14 +57,14 @@
.f-drag-element,
.f-drag-area__element {
position: relative;
- user-select: none;
+ user-select: none;
flex-shrink: 0;
transition: none;
z-index: 2;
}
-[data-dragginganimation = "yes"] .f-drag-area .f-drag-element,
-[data-dragginganimation = "yes"] .f-drag-area .f-drag-area__element {
+[data-dragginganimation='yes'] .f-drag-area .f-drag-element,
+[data-dragginganimation='yes'] .f-drag-area .f-drag-area__element {
transition: transform var(--f-drag-speed) var(--f-drag-transition);
}
@@ -119,8 +119,12 @@
}
@keyframes f-drag-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
.f-drag-area__placeholder-lined::after,
@@ -144,22 +148,22 @@
}
.f-drag-area__element__line.is-vertical.is-last {
- bottom: 0;
- left: 0;
+ bottom: 0;
+ left: 0;
width: 100%;
height: var(--f-drag-lined-size);
}
.f-drag-area__element__line.is-horizontal.is-first {
- left: 0;
+ left: 0;
top: 0;
height: 100%;
width: var(--f-drag-lined-size);
}
.f-drag-area__element__line.is-horizontal.is-last {
- right: 0;
- top: 0;
+ right: 0;
+ top: 0;
height: 100%;
width: var(--f-drag-lined-size);
}
@@ -190,8 +194,12 @@
}
@keyframes f-drag-focus {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
/*
@@ -200,8 +208,8 @@
is different - see right above
*/
-.f-drag-element[data-focus="yes"]:before {
- content:" ";
+.f-drag-element[data-focus='yes']:before {
+ content: ' ';
position: absolute;
pointer-events: none;
z-index: 100;
@@ -213,7 +221,7 @@
outline: 2px solid var(--f-color-accent);
outline-offset: -2px;
border-radius: var(--f-radius);
- animation: f-drag-focus 1s ease-out;
+ animation: f-drag-focus 1s ease-out;
}
/* buffer, ghost & placeholder */
diff --git a/packages/core/src/drag/drag.hook.ts b/packages/core/src/drag/drag.hook.ts
index 553e3604..2c9a8281 100644
--- a/packages/core/src/drag/drag.hook.ts
+++ b/packages/core/src/drag/drag.hook.ts
@@ -2,10 +2,10 @@ import { useEffect, useRef } from 'react'
import {
dispatchDragEvent,
documentObject,
- FOLD_DRAG_CACHE,
- FOLD_DRAG_LOCK,
- FOLD_DRAG_STATE,
- FOLD_RESTRICT_DUAL_MOVEMENT,
+ F_DRAG_CACHE,
+ F_DRAG_LOCK,
+ F_DRAG_STATE,
+ F_RESTRICT_DUAL_MOVEMENT,
getBoundingClientRect,
getPreviousNextElements,
globalCursor,
@@ -16,20 +16,20 @@ import {
} from '../'
import { getButton, waitForRender, windowObject } from '../helpers'
-export const FOLD_CUSTOM_GHOST_ELEMENT = 'FOLD_CUSTOM_GHOST_ELEMENT'
-export const FOLD_GHOST_ELEMENT_ROTATION = 'FOLD_GHOST_ELEMENT_ROTATION'
+export const F_CUSTOM_GHOST_ELEMENT = 'F_CUSTOM_GHOST_ELEMENT'
+export const F_GHOST_ELEMENT_ROTATION = 'F_GHOST_ELEMENT_ROTATION'
export const useDrag = (args: any = { indentDelay: 100 }) => {
const ghostRef = useRef(null)
const { indentDelay } = args
- const restrictDualMovement = (val = true) => window[FOLD_RESTRICT_DUAL_MOVEMENT] = val
+ const restrictDualMovement = (val = true) => (window[F_RESTRICT_DUAL_MOVEMENT] = val)
- const forceLockDragMovement = (val = true) => window[FOLD_DRAG_LOCK] = val
+ const forceLockDragMovement = (val = true) => (window[F_DRAG_LOCK] = val)
- const getStaticState = (): any => windowObject[FOLD_DRAG_STATE]
+ const getStaticState = (): any => windowObject[F_DRAG_STATE]
- const getCache = (): any => windowObject[FOLD_DRAG_CACHE]
+ const getCache = (): any => windowObject[F_DRAG_CACHE]
const getGhostElement = () => ghostRef.current
@@ -38,22 +38,22 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
}
const setCustomGhostElement = (html: string = null) => {
- windowObject[FOLD_CUSTOM_GHOST_ELEMENT] = true
+ windowObject[F_CUSTOM_GHOST_ELEMENT] = true
setGhostElement(html)
}
const setCustomGhostElementRotation = (rotation: string = '0deg') => {
- windowObject[FOLD_GHOST_ELEMENT_ROTATION] = rotation
+ windowObject[F_GHOST_ELEMENT_ROTATION] = rotation
}
const clearGhostElement = () => {
- windowObject[FOLD_GHOST_ELEMENT_ROTATION] = null
- windowObject[FOLD_CUSTOM_GHOST_ELEMENT] = undefined
+ windowObject[F_GHOST_ELEMENT_ROTATION] = null
+ windowObject[F_CUSTOM_GHOST_ELEMENT] = undefined
setGhostElement('')
}
const hasCustomGhostElement = () => {
- return !!windowObject[FOLD_CUSTOM_GHOST_ELEMENT]
+ return !!windowObject[F_CUSTOM_GHOST_ELEMENT]
}
const startDrag = (data = null) => {
@@ -126,7 +126,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
// instead of using the event
// TODO: maybe name it differently
const onMouseDownExplicit = ({ isLeftButton, clientX, clientY, currentTarget }) => {
- if (window[FOLD_DRAG_LOCK]) return
+ if (window[F_DRAG_LOCK]) return
const cache = getCache()
const mouseLeft = clientX
@@ -267,7 +267,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
}
const onMouseDown = (e: any, startDelay = 150) => {
- if (window[FOLD_DRAG_LOCK]) return
+ if (window[F_DRAG_LOCK]) return
const cache = getCache()
const { isLeftButton } = getButton(e)
diff --git a/packages/core/src/drag/drag.state.ts b/packages/core/src/drag/drag.state.ts
index 1643c2d6..9352176e 100644
--- a/packages/core/src/drag/drag.state.ts
+++ b/packages/core/src/drag/drag.state.ts
@@ -1,10 +1,10 @@
import { useState } from 'react'
-import { dispatchPubsub, DragOrigin, DragTarget, FOLD_DRAG_STATE, usePubsub } from '../'
+import { dispatchPubsub, DragOrigin, DragTarget, F_DRAG_STATE, usePubsub } from '../'
import { windowObject } from '../helpers'
export const setDragState = (data) => {
const { namespace, ...rest } = data
- windowObject[FOLD_DRAG_STATE] = { ...windowObject[FOLD_DRAG_STATE], ...rest }
+ windowObject[F_DRAG_STATE] = { ...windowObject[F_DRAG_STATE], ...rest }
dispatchPubsub('state-' + namespace, data)
}
@@ -19,14 +19,14 @@ export const setOrigin = (origin: Partial
) => {
export const getDragState = (namespace: string): any => {
const [_, render] = useState(new Date())
usePubsub('state-' + namespace, (data: any) => render(new Date()))
- return windowObject[FOLD_DRAG_STATE]
+ return windowObject[F_DRAG_STATE]
}
/*
export const setDragState = (data) => {
const { namespace, ...rest } = data
- windowObject[FOLD_DRAG_STATE] = { ...windowObject[FOLD_DRAG_STATE], ...rest }
+ windowObject[F_DRAG_STATE] = { ...windowObject[F_DRAG_STATE], ...rest }
windowObject.dispatchEvent(new CustomEvent(namespace, { detail: data }))
}
@@ -42,7 +42,7 @@ export const getDragState = (namespace: string): any => {
const [_, render] = useState(new Date())
const handler = (data) => render(new Date())
useWindowEvent(namespace, handler)
- return { ...windowObject[FOLD_DRAG_STATE], _ }
+ return { ...windowObject[F_DRAG_STATE], _ }
}
*/
diff --git a/packages/core/src/drag/drag.util.ts b/packages/core/src/drag/drag.util.ts
index 676ec6b6..455d8cf8 100644
--- a/packages/core/src/drag/drag.util.ts
+++ b/packages/core/src/drag/drag.util.ts
@@ -1,6 +1,6 @@
import { windowObject } from '../helpers'
-import { FOLD_DRAG_STATE } from './drag-manager'
-import { FOLD_GHOST_ELEMENT_ROTATION } from './drag.hook'
+import { F_DRAG_STATE } from './drag-manager'
+import { F_GHOST_ELEMENT_ROTATION } from './drag.hook'
export const getPreviousNextElements = (targetIndex, targetElement, moveDirection) => {
const parent = targetElement.parentNode
@@ -9,7 +9,7 @@ export const getPreviousNextElements = (targetIndex, targetElement, moveDirectio
let next = parent.children[targetIndex]
if (!!next) {
- if (moveDirection == 'down' && windowObject[FOLD_DRAG_STATE].origin.index == +next.dataset.index) {
+ if (moveDirection == 'down' && windowObject[F_DRAG_STATE].origin.index == +next.dataset.index) {
next = parent.children[targetIndex + 1]
}
@@ -24,8 +24,8 @@ export const getPreviousNextElements = (targetIndex, targetElement, moveDirectio
// if it's the same object and the mouse is travelling up, then skip over it
if (
moveDirection == 'up' &&
- windowObject[FOLD_DRAG_STATE].origin.index == +previous.dataset.index &&
- windowObject[FOLD_DRAG_STATE].origin.areaId == previous.dataset.areaid
+ windowObject[F_DRAG_STATE].origin.index == +previous.dataset.index &&
+ windowObject[F_DRAG_STATE].origin.areaId == previous.dataset.areaid
) {
previous = parent.children[targetIndex - 2]
}
@@ -37,7 +37,7 @@ export const getPreviousNextElements = (targetIndex, targetElement, moveDirectio
}
export const positionDOMElementExplicit = (x, y, el, callback) => {
- const rotation = windowObject[FOLD_GHOST_ELEMENT_ROTATION] || '0deg'
+ const rotation = windowObject[F_GHOST_ELEMENT_ROTATION] || '0deg'
el.style.transform = `translate(${x}px, ${y}px) rotate(${rotation})`
callback()
}
@@ -46,9 +46,9 @@ let rafId = null
export const positionDOMElement = (x, y, el, callback) => {
if (rafId) return
-
+
rafId = requestAnimationFrame(() => {
- const rotation = windowObject[FOLD_GHOST_ELEMENT_ROTATION] || '0deg'
+ const rotation = windowObject[F_GHOST_ELEMENT_ROTATION] || '0deg'
el.style.transform = `translate(${x}px, ${y}px) rotate(${rotation})`
callback()
rafId = null
diff --git a/packages/core/src/drawer/drawer.css b/packages/core/src/drawer/drawer.css
index 0e80c3c2..1d69b5b4 100644
--- a/packages/core/src/drawer/drawer.css
+++ b/packages/core/src/drawer/drawer.css
@@ -16,8 +16,12 @@
}
@keyframes f-modal-slidein-top {
- from { transform: translateY(-100%); }
- to { transform: translateY(0%); }
+ from {
+ transform: translateY(-100%);
+ }
+ to {
+ transform: translateY(0%);
+ }
}
/* bottom */
@@ -27,8 +31,12 @@
}
@keyframes f-modal-slidein-bottom {
- from { transform: translateY(100%); }
- to { transform: translateY(0%); }
+ from {
+ transform: translateY(100%);
+ }
+ to {
+ transform: translateY(0%);
+ }
}
/* left */
@@ -38,8 +46,12 @@
}
@keyframes f-modal-slidein-left {
- from { transform: translateX(-100%); }
- to { transform: translateY(0%); }
+ from {
+ transform: translateX(-100%);
+ }
+ to {
+ transform: translateY(0%);
+ }
}
/* right */
@@ -49,7 +61,10 @@
}
@keyframes f-modal-slidein-right {
- from { transform: translateX(100%); }
- to { transform: translateX(0%); }
+ from {
+ transform: translateX(100%);
+ }
+ to {
+ transform: translateX(0%);
+ }
}
-
diff --git a/packages/core/src/editable/editable.css b/packages/core/src/editable/editable.css
index 15a0ad19..4a7355c2 100644
--- a/packages/core/src/editable/editable.css
+++ b/packages/core/src/editable/editable.css
@@ -17,4 +17,3 @@
.f-editable > *:focus {
outline: none;
}
-
diff --git a/packages/core/src/form/form.css b/packages/core/src/form/form.css
index dc5ba165..0c0d119f 100644
--- a/packages/core/src/form/form.css
+++ b/packages/core/src/form/form.css
@@ -88,7 +88,7 @@
.f-form-helper-text.is-success,
.f-form-helper-text.is-success span {
- color: var(--f-form-control-color-success);
+ color: var(--f-form-control-color-success);
}
/* error states with borders & text colors */
@@ -114,5 +114,5 @@
}
.f-form-control.is-success * {
- border-color: var(--f-form-control-color-success) !important;
+ border-color: var(--f-form-control-color-success) !important;
}
diff --git a/packages/core/src/grid/grid.css b/packages/core/src/grid/grid.css
index e2b347ed..7a03b056 100644
--- a/packages/core/src/grid/grid.css
+++ b/packages/core/src/grid/grid.css
@@ -2,4 +2,5 @@
display: grid;
}
-.f-grid-item {}
+.f-grid-item {
+}
diff --git a/packages/core/src/heading/heading.css b/packages/core/src/heading/heading.css
index 62a592e3..644ec0ca 100644
--- a/packages/core/src/heading/heading.css
+++ b/packages/core/src/heading/heading.css
@@ -3,7 +3,13 @@
--f-heading-background-color: transparent;
}
-h1, h2, h3, h4, h5, h6, .f-heading {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.f-heading {
color: var(--f-heading-color);
background-color: var(--f-heading-background-color);
font-family: var(--f-font-heading);
@@ -25,40 +31,40 @@ h1, h2, h3, h4, h5, h6, .f-heading {
font-weight: var(--f-font-weight-medium);
}
-h1,
+h1,
h1.f-heading {
font-size: var(--f-font-size-3xl);
letter-spacing: -0.05rem;
/* padding-bottom: var(--f-space-4); */
}
-h2,
+h2,
h2.f-heading {
font-size: var(--f-font-size-2xl);
/* letter-spacing: -0.05rem; */
/* padding-bottom: var(--f-space-3); */
}
-h3,
+h3,
h3.f-heading {
font-size: var(--f-font-size-xl);
/* letter-spacing: -0.025rem; */
/* padding-bottom: var(--f-space-2); */
}
-h4,
+h4,
h4.f-heading {
font-size: var(--f-font-size-lg);
/* padding-bottom: var(--f-space-1); */
}
-h5,
+h5,
h5.f-heading {
font-size: var(--f-font-size-md);
/* padding-bottom: var(--f-space-1); */
}
-h6,
+h6,
h6.f-heading {
font-size: var(--f-font-size-sm);
/* padding-bottom: var(--f-space-1); */
diff --git a/packages/core/src/helpers/util.ts b/packages/core/src/helpers/util.ts
index fe1ac28e..332257a4 100644
--- a/packages/core/src/helpers/util.ts
+++ b/packages/core/src/helpers/util.ts
@@ -98,9 +98,9 @@ export const shortenNames = (names: string[]) => names.map((name) => name.split(
export let windowObject: Window | any =
typeof window === 'undefined'
? {
- FOLD_ICONS: {},
- FOLD_DRAG_CACHE: {},
- FOLD_DRAG_STATE: {},
+ F_ICONS: {},
+ F_DRAG_CACHE: {},
+ F_DRAG_STATE: {},
AudioContext: null,
webkitAudioContext: null,
devicePixelRatio: null,
diff --git a/packages/core/src/hooks/theme.hook.ts b/packages/core/src/hooks/theme.hook.ts
index 5414495c..997d9003 100644
--- a/packages/core/src/hooks/theme.hook.ts
+++ b/packages/core/src/hooks/theme.hook.ts
@@ -4,7 +4,7 @@ import { useObserver } from './observer.hook'
import { useStorage } from './storage.hook'
export const __F_THEME_STORAGE = '__F_THEME_STORAGE'
-export type FoldSystemMode = 'light' | 'dark'
+export type AppSystemMode = 'light' | 'dark'
export function useTheme() {
const getRootElement = () => {
diff --git a/packages/core/src/hooks/timeout.hook.ts b/packages/core/src/hooks/timeout.hook.ts
index f0db76d5..2edd3e72 100644
--- a/packages/core/src/hooks/timeout.hook.ts
+++ b/packages/core/src/hooks/timeout.hook.ts
@@ -8,7 +8,7 @@ export const useTimeout = (callback, delay) => {
}, [callback])
useEffect(() => {
- if (delay === null) return null
+ if (delay === null) return
const id = setTimeout(() => {
if (savedCallback.current) savedCallback.current()
}, delay)
diff --git a/packages/core/src/icon/icon.css b/packages/core/src/icon/icon.css
index 95f78ad7..e2d7fb07 100644
--- a/packages/core/src/icon/icon.css
+++ b/packages/core/src/icon/icon.css
@@ -1,14 +1,14 @@
:root {
- --f-icon-sizing-xs: var(--f-icon-size-xs);
- --f-icon-sizing-sm: var(--f-icon-size-sm);
- --f-icon-sizing-md: var(--f-icon-size-md);
- --f-icon-sizing-lg: var(--f-icon-size-lg);
- --f-icon-sizing-xl: var(--f-icon-size-xl);
- --f-icon-stroke-width-xs: 2.2;
- --f-icon-stroke-width-sm: 2;
- --f-icon-stroke-width-md: 1.8;
- --f-icon-stroke-width-lg: 1.6;
- --f-icon-stroke-width-xl: 1.4;
+ --f-icon-sizing-xs: var(--f-icon-size-xs);
+ --f-icon-sizing-sm: var(--f-icon-size-sm);
+ --f-icon-sizing-md: var(--f-icon-size-md);
+ --f-icon-sizing-lg: var(--f-icon-size-lg);
+ --f-icon-sizing-xl: var(--f-icon-size-xl);
+ --f-icon-stroke-width-xs: 2.4;
+ --f-icon-stroke-width-sm: 2.2;
+ --f-icon-stroke-width-md: 1.9;
+ --f-icon-stroke-width-lg: 1.7;
+ --f-icon-stroke-width-xl: 1.5;
}
.f-icon {
@@ -21,32 +21,57 @@
fill: currentColor;
}
-.f-icon.xs {
- width: var(--f-icon-sizing-xs);
- height: var(--f-icon-sizing-xs);
+.f-icon.xs {
+ width: var(--f-icon-sizing-xs);
+ height: var(--f-icon-sizing-xs);
stroke-width: var(--f-icon-stroke-width-xs);
}
-.f-icon.sm {
- width: var(--f-icon-sizing-sm);
- height: var(--f-icon-sizing-sm);
+.f-icon.xs circle,
+.f-icon.xs path {
+ stroke-width: var(--f-icon-stroke-width-xs) !important;
+}
+
+.f-icon.sm {
+ width: var(--f-icon-sizing-sm);
+ height: var(--f-icon-sizing-sm);
stroke-width: var(--f-icon-stroke-width-sm);
}
-.f-icon.md {
- width: var(--f-icon-sizing-md);
- height: var(--f-icon-sizing-md);
+.f-icon.sm circle,
+.f-icon.sm path {
+ stroke-width: var(--f-icon-stroke-width-sm) !important;
+}
+
+.f-icon.md {
+ width: var(--f-icon-sizing-md);
+ height: var(--f-icon-sizing-md);
stroke-width: var(--f-icon-stroke-width-md);
}
-.f-icon.lg {
- width: var(--f-icon-sizing-lg);
- height: var(--f-icon-sizing-lg);
+.f-icon.md circle,
+.f-icon.md path {
+ stroke-width: var(--f-icon-stroke-width-md) !important;
+}
+
+.f-icon.lg {
+ width: var(--f-icon-sizing-lg);
+ height: var(--f-icon-sizing-lg);
stroke-width: var(--f-icon-stroke-width-lg);
}
-.f-icon.xl {
- width: var(--f-icon-sizing-xl);
- height: var(--f-icon-sizing-xl);
+.f-icon.lg circle,
+.f-icon.lg path {
+ stroke-width: var(--f-icon-stroke-width-lg) !important;
+}
+
+.f-icon.xl {
+ width: var(--f-icon-sizing-xl);
+ height: var(--f-icon-sizing-xl);
stroke-width: var(--f-icon-stroke-width-xl);
}
+
+.f-icon.xl circle,
+.f-icon.xl path {
+ stroke-width: var(--f-icon-stroke-width-xl) !important;
+}
diff --git a/packages/core/src/icon/icon.stories.tsx b/packages/core/src/icon/icon.stories.tsx
index e6a59b5b..21f336c2 100644
--- a/packages/core/src/icon/icon.stories.tsx
+++ b/packages/core/src/icon/icon.stories.tsx
@@ -1,5 +1,5 @@
import * as Token from '@fold-ui/design/tokens'
-import { FICircle, FISun, Icon, IconLib, Stack, Text, View, defaultIcons, setFoldIcons } from '@fold-ui/core'
+import { FICircle, FISun, Icon, IconLib, Stack, Text, View, defaultIcons, setAppIcons } from '@fold-ui/core'
import React, { useLayoutEffect, useState } from 'react'
export default {
@@ -56,14 +56,14 @@ export const Sizes = () => {
/**
* The IconLib component allows you to include a pre-defined collection of icons, eliminating the need to import the SVG icon on each occasion.
- * In addition, a set of icons have already been added by default when using FoldContext. These include:
+ * In addition, a set of icons have already been added by default when using AppContext. These include:
*
*/
export const IconLibrary = () => {
const [render, setRender] = useState(false)
useLayoutEffect(() => {
- setFoldIcons({ sun: FISun })
+ setAppIcons({ sun: FISun })
setRender(true)
}, [])
diff --git a/packages/core/src/icon/icon.tsx b/packages/core/src/icon/icon.tsx
index a2677e69..7db78dc7 100644
--- a/packages/core/src/icon/icon.tsx
+++ b/packages/core/src/icon/icon.tsx
@@ -25,23 +25,24 @@ export const Icon = forwardRef((props: IconProps, ref) => {
color={color}
className={className}
ref={ref}
+ strokeWidth=""
/>
)
})
-export type FoldIcon = {
+export type AppIcon = {
[key: string]: any
}
-const FOLD_ICONS = 'FOLD_ICONS'
+const F_ICONS = 'F_ICONS'
-export const getFoldIcons = () => windowObject[FOLD_ICONS] || {}
+export const getAppIcons = () => windowObject[F_ICONS] || {}
-export const setFoldIcons = (foldIcons: FoldIcon) => {
- if (!windowObject[FOLD_ICONS]) windowObject[FOLD_ICONS] = {}
- windowObject[FOLD_ICONS] = {
- ...windowObject[FOLD_ICONS],
- ...foldIcons,
+export const setAppIcons = (appIcons: AppIcon) => {
+ if (!windowObject[F_ICONS]) windowObject[F_ICONS] = {}
+ windowObject[F_ICONS] = {
+ ...windowObject[F_ICONS],
+ ...appIcons,
}
}
@@ -54,7 +55,7 @@ export const IconLib = forwardRef((props: any, ref) => {
return (
)
diff --git a/packages/core/src/input/input.css b/packages/core/src/input/input.css
index bb337ffc..946b847c 100644
--- a/packages/core/src/input/input.css
+++ b/packages/core/src/input/input.css
@@ -15,7 +15,7 @@
--f-tag-input-min-width: 50px;
--f-tag-input-spacing: var(--f-space-1);
--f-input-prefix-padding: 0 0 0 var(--f-input-base-padding);
- --f-input-suffix-padding: 0 var(--f-input-base-padding) 0 0;
+ --f-input-suffix-padding: 0 var(--f-input-base-padding) 0 0;
}
/* control */
@@ -53,8 +53,8 @@
.f-input-control.is-disabled > * {
cursor: not-allowed !important;
- user-select: none;
- caret-color: transparent;
+ user-select: none;
+ caret-color: transparent;
}
.f-input-control.is-disabled input::placeholder {
@@ -132,51 +132,51 @@ input.f-input:focus {
/* sizes */
-input.f-input:not([type="color"]).xs {
+input.f-input:not([type='color']).xs {
font-size: var(--f-font-size-xs);
height: var(--f-size-8);
}
-input.f-input:not([type="color"]).sm {
+input.f-input:not([type='color']).sm {
font-size: var(--f-font-size-sm);
height: var(--f-size-9);
}
-input.f-input:not([type="color"]).md {
+input.f-input:not([type='color']).md {
font-size: var(--f-font-size-md);
- height: var(--f-size-10);
+ height: var(--f-size-10);
}
-input.f-input:not([type="color"]).lg {
+input.f-input:not([type='color']).lg {
font-size: var(--f-font-size-lg);
- height: var(--f-size-12);
+ height: var(--f-size-12);
}
-input.f-input:not([type="color"]).xl {
+input.f-input:not([type='color']).xl {
font-size: var(--f-font-size-xl);
- height: var(--f-size-14);
+ height: var(--f-size-14);
}
/* special input control settings */
/* 🔴 TODO: simplify! */
-.f-input-control input.f-input:not([type="color"]).xs {
+.f-input-control input.f-input:not([type='color']).xs {
height: calc(var(--f-size-8) - var(--f-input-border-width));
}
-.f-input-control input.f-input:not([type="color"]).sm {
+.f-input-control input.f-input:not([type='color']).sm {
height: calc(var(--f-size-9) - var(--f-input-border-width));
}
-.f-input-control input.f-input:not([type="color"]).md {
+.f-input-control input.f-input:not([type='color']).md {
height: calc(var(--f-size-10) - var(--f-input-border-width));
}
-.f-input-control input.f-input:not([type="color"]).lg {
+.f-input-control input.f-input:not([type='color']).lg {
height: calc(var(--f-size-12) - var(--f-input-border-width));
}
-.f-input-control input.f-input:not([type="color"]).xl {
+.f-input-control input.f-input:not([type='color']).xl {
height: calc(var(--f-size-14) - var(--f-input-border-width));
}
@@ -184,66 +184,76 @@ input.f-input:not([type="color"]).xl {
input.f-input:not(.show-indicator)::-webkit-calendar-picker-indicator {
display: none;
- -webkit-appearance: none;
+ -webkit-appearance: none;
}
-input.f-input[type=number]:not(.show-indicator)::-webkit-inner-spin-button {
- -webkit-appearance: none;
+input.f-input[type='number']:not(.show-indicator)::-webkit-inner-spin-button {
+ -webkit-appearance: none;
}
-input.f-input[type=search]:not(.show-indicator)::-ms-clear { display: none; width : 0; height: 0; }
-input.f-input[type=search]:not(.show-indicator)::-ms-reveal { display: none; width : 0; height: 0; }
-input.f-input[type="search"]:not(.show-indicator)::-webkit-search-decoration,
-input.f-input[type="search"]:not(.show-indicator)::-webkit-search-cancel-button,
-input.f-input[type="search"]:not(.show-indicator)::-webkit-search-results-button,
-input.f-input[type="search"]:not(.show-indicator)::-webkit-search-results-decoration { display: none; }
+input.f-input[type='search']:not(.show-indicator)::-ms-clear {
+ display: none;
+ width: 0;
+ height: 0;
+}
+input.f-input[type='search']:not(.show-indicator)::-ms-reveal {
+ display: none;
+ width: 0;
+ height: 0;
+}
+input.f-input[type='search']:not(.show-indicator)::-webkit-search-decoration,
+input.f-input[type='search']:not(.show-indicator)::-webkit-search-cancel-button,
+input.f-input[type='search']:not(.show-indicator)::-webkit-search-results-button,
+input.f-input[type='search']:not(.show-indicator)::-webkit-search-results-decoration {
+ display: none;
+}
/* **************************** */
/* color */
-input.f-input[type=color] {
+input.f-input[type='color'] {
border-radius: var(--f-input-border-radius);
cursor: pointer;
padding: 0;
border-color: var(--f-input-border-color);
}
-input.f-input[type=color]::-webkit-color-swatch {
+input.f-input[type='color']::-webkit-color-swatch {
border-radius: var(--f-input-border-radius);
cursor: pointer;
padding: 0;
border-color: var(--f-input-border-color);
}
-input.f-input[type=color]::-webkit-color-swatch-wrapper {
+input.f-input[type='color']::-webkit-color-swatch-wrapper {
border-radius: var(--f-input-border-radius);
cursor: pointer;
padding: 0;
border-color: var(--f-input-border-color);
}
-input.f-input[type=color].xs {
+input.f-input[type='color'].xs {
width: var(--f-size-4);
height: var(--f-size-4);
}
-input.f-input[type=color].sm {
+input.f-input[type='color'].sm {
width: var(--f-size-5);
height: var(--f-size-5);
}
-input.f-input[type=color].md {
+input.f-input[type='color'].md {
width: var(--f-size-6);
height: var(--f-size-6);
}
-input.f-input[type=color].lg {
+input.f-input[type='color'].lg {
width: var(--f-size-8);
height: var(--f-size-8);
}
-input.f-input[type=color].xl {
+input.f-input[type='color'].xl {
width: var(--f-size-10);
height: var(--f-size-10);
}
@@ -263,11 +273,11 @@ input.f-input[type=color].xl {
}
.f-input-prefix {
- padding: var(--f-input-prefix-padding);
+ padding: var(--f-input-prefix-padding);
}
.f-input-suffix {
- padding: var(--f-input-suffix-padding);
+ padding: var(--f-input-suffix-padding);
}
.f-input-suffix {
@@ -363,25 +373,35 @@ input.f-input[type=color].xl {
.f-tag-input.md {
font-size: var(--f-font-size-md);
- min-height: var(--f-size-10);
+ min-height: var(--f-size-10);
}
.f-tag-input.lg {
font-size: var(--f-font-size-lg);
- min-height: var(--f-size-12);
+ min-height: var(--f-size-12);
}
.f-tag-input.xl {
font-size: var(--f-font-size-xl);
- min-height: var(--f-size-14);
+ min-height: var(--f-size-14);
}
-.f-tag-input input[type=search]:not(.show-indicator)::-ms-clear { display: none; width : 0; height: 0; }
-.f-tag-input input[type=search]:not(.show-indicator)::-ms-reveal { display: none; width : 0; height: 0; }
-.f-tag-input input[type="search"]:not(.show-indicator)::-webkit-search-decoration,
-.f-tag-input input[type="search"]:not(.show-indicator)::-webkit-search-cancel-button,
-.f-tag-input input[type="search"]:not(.show-indicator)::-webkit-search-results-button,
-.f-tag-input input[type="search"]:not(.show-indicator)::-webkit-search-results-decoration { display: none; }
+.f-tag-input input[type='search']:not(.show-indicator)::-ms-clear {
+ display: none;
+ width: 0;
+ height: 0;
+}
+.f-tag-input input[type='search']:not(.show-indicator)::-ms-reveal {
+ display: none;
+ width: 0;
+ height: 0;
+}
+.f-tag-input input[type='search']:not(.show-indicator)::-webkit-search-decoration,
+.f-tag-input input[type='search']:not(.show-indicator)::-webkit-search-cancel-button,
+.f-tag-input input[type='search']:not(.show-indicator)::-webkit-search-results-button,
+.f-tag-input input[type='search']:not(.show-indicator)::-webkit-search-results-decoration {
+ display: none;
+}
/* **************************** */
@@ -415,7 +435,7 @@ input.f-input[type=color].xl {
.f-input-number-control.xl {
height: calc(var(--f-size-13) - var(--f-input-border-width));
}
-
+
.f-input-prefix .f-input-number-control,
.f-input-suffix .f-input-number-control {
border: none;
@@ -423,13 +443,13 @@ input.f-input[type=color].xl {
}
.f-input-prefix .f-input-number-control {
- border-right: var(--f-input-border-width) solid var(--f-input-border-color);
- margin-left: calc(var(--f-input-base-padding) * -1);
+ border-right: var(--f-input-border-width) solid var(--f-input-border-color);
+ margin-left: calc(var(--f-input-base-padding) * -1);
}
.f-input-suffix .f-input-number-control {
border-left: var(--f-input-border-width) solid var(--f-input-border-color);
- margin-right: calc(var(--f-input-base-padding) * -1);
+ margin-right: calc(var(--f-input-base-padding) * -1);
}
/* they always need to be the first or last element */
@@ -460,8 +480,18 @@ input.f-input[type=color].xl {
color: var(--f-input-color-disabled);
}
-.f-input-number-control.xs button { width: var(--f-size-6); }
-.f-input-number-control.sm button { width: var(--f-size-7); }
-.f-input-number-control.md button { width: var(--f-size-8); }
-.f-input-number-control.lg button { width: var(--f-size-9); }
-.f-input-number-control.xl button { width: var(--f-size-10); }
+.f-input-number-control.xs button {
+ width: var(--f-size-6);
+}
+.f-input-number-control.sm button {
+ width: var(--f-size-7);
+}
+.f-input-number-control.md button {
+ width: var(--f-size-8);
+}
+.f-input-number-control.lg button {
+ width: var(--f-size-9);
+}
+.f-input-number-control.xl button {
+ width: var(--f-size-10);
+}
diff --git a/packages/core/src/kbd/kbd.css b/packages/core/src/kbd/kbd.css
index 011a5783..18409439 100644
--- a/packages/core/src/kbd/kbd.css
+++ b/packages/core/src/kbd/kbd.css
@@ -14,7 +14,7 @@
background-color: var(--f-kbd-background-color);
color: var(--f-kbd-color);
font-family: var(--f-font-mono);
- font-size: var(--f-font-size-kbd);
+ font-size: var(--f-font-size-kbd);
font-weight: var(--f-font-weight-semibold);
width: fit-content;
position: relative;
diff --git a/packages/core/src/layout/layout.css b/packages/core/src/layout/layout.css
index 02107a0c..07a8c78b 100644
--- a/packages/core/src/layout/layout.css
+++ b/packages/core/src/layout/layout.css
@@ -50,7 +50,7 @@
.f-footer {
border-top: 1px solid var(--f-footer-border-color);
- background-color: var(--f-footer-background-color);
+ background-color: var(--f-footer-background-color);
justify-content: left;
width: 100%;
}
diff --git a/packages/core/src/list/list.css b/packages/core/src/list/list.css
index 8037c3da..18481eb8 100644
--- a/packages/core/src/list/list.css
+++ b/packages/core/src/list/list.css
@@ -8,7 +8,7 @@
}
.f-list {
- color: var( --f-list-color);
+ color: var(--f-list-color);
font-family: var(--f-font-body);
padding: 0;
margin: 0;
@@ -57,5 +57,3 @@
.f-li > .f-icon:first-child {
margin-right: var(--f-li-icon-margin);
}
-
-
diff --git a/packages/core/src/menu/menu.css b/packages/core/src/menu/menu.css
index 2edacd61..7ba834b7 100644
--- a/packages/core/src/menu/menu.css
+++ b/packages/core/src/menu/menu.css
@@ -3,8 +3,8 @@
--f-menu-padding: var(--f-space-1);
--f-menu-background-color: var(--f-color-surface);
--f-menu-border-color: var(--f-color-border);
- --f-menu-border-radius: var(--f-radius);
- --f-menubar-item-padding: var(--f-space-2);
+ --f-menu-border-radius: var(--f-radius-lg);
+ --f-menubar-item-padding: var(--f-space-2);
--f-menu-item-font-weight: var(--f-font-weight-normal);
--f-menu-offset: 10px;
--f-menu-item-ix-spacing: 0.75rem;
@@ -13,7 +13,7 @@
.f-menu {
font-family: var(--f-font-body);
- width: 100%;
+ width: 100%;
height: fit-content;
background-color: var(--f-menu-background-color);
border-radius: var(--f-menu-border-radius);
@@ -42,13 +42,17 @@
flex-shrink: 0;
top: 0px;
right: var(--f-menu-offset);
- transform: translateX(100%);
- animation: f-menu-fadein var(--f-transition-duration-fast);
+ transform: translateX(100%);
+ animation: f-menu-fadein var(--f-transition-duration-fast);
}
@keyframes f-menu-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
.f-menu-item.is-open > .f-menu {
@@ -79,7 +83,7 @@
list-style-type: none;
padding: 0;
margin: 0;
- width: 100%;
+ width: 100%;
height: fit-content;
display: block;
position: relative;
@@ -111,7 +115,7 @@
}
.f-menu-item__label {
- font-size: var(--f-font-size-md);
+ font-size: var(--f-font-size-md);
font-weight: var(--f-menu-item-font-weight);
color: inherit;
text-align: left;
@@ -139,12 +143,12 @@
/* states */
.f-menu-item__container:not(.is-disabled).is-active {
- color: var(--f-menu-item-color-active);
- background-color: var(--f-menu-item-background-color-active);
+ color: var(--f-menu-item-color-active);
+ background-color: var(--f-menu-item-background-color-active);
}
.f-menu-item__container:not(.is-disabled).is-active > * {
- color: var(--f-menu-item-color-active);
+ color: var(--f-menu-item-color-active);
}
.f-menu-item.is-open > .f-menu-item__container:not(.is-disabled),
@@ -172,7 +176,7 @@
/* ************************************************************** */
/* ************************************************************** */
-/* divider */
+/* divider */
:root {
--f-menu-divider-spacing: var(--f-space-2);
@@ -195,8 +199,6 @@
display: none;
}
-
-
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
@@ -215,8 +217,6 @@
display: block;
}
-
-
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
@@ -268,7 +268,7 @@
.f-menu.is-menubar > .f-menu-item {
width: fit-content;
-}
+}
.f-menu.is-menubar > .f-menu-divider {
margin: 0;
@@ -278,7 +278,7 @@
width: 1px;
border: none;
position: static;
-}
+}
.f-menu.is-menubar > .f-menu-divider > hr {
display: block;
@@ -315,7 +315,7 @@
right: 100%;
transform: translateX(100%) translateY(0%);
}
-
+
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
@@ -333,7 +333,7 @@
top: 100%;
right: 0px;
left: 100%;
- transform: translateX(-100%)
+ transform: translateX(-100%);
}
.f-menu.is-menubar > .f-menu-item > .f-menu.is-offscreen-y {
diff --git a/packages/core/src/modal/modal.css b/packages/core/src/modal/modal.css
index 23387394..e0f79326 100644
--- a/packages/core/src/modal/modal.css
+++ b/packages/core/src/modal/modal.css
@@ -36,8 +36,12 @@
}
@keyframes f-modal-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
/* position */
@@ -122,8 +126,8 @@
.f-modal__header {
background: var(--f-modal-header-background);
padding: var(--f-modal-header-padding);
- justify-content: flex-start;
- border-bottom: var(--f-modal-border-width)solid var(--f-modal-border-color);
+ justify-content: flex-start;
+ border-bottom: var(--f-modal-border-width) solid var(--f-modal-border-color);
border-top-left-radius: var(--f-modal-border-radius);
border-top-right-radius: var(--f-modal-border-radius);
}
@@ -137,29 +141,29 @@
z-index: 10;
}
-.f-modal__close.xs {
+.f-modal__close.xs {
width: var(--f-size-9);
height: var(--f-size-9);
}
-.f-modal__close.sm {
+.f-modal__close.sm {
width: var(--f-size-10);
height: var(--f-size-10);
}
-.f-modal__close.md {
- width: var(--f-size-11);
- height: var(--f-size-11);
+.f-modal__close.md {
+ width: var(--f-size-11);
+ height: var(--f-size-11);
}
-.f-modal__close.lg {
- height: var(--f-size-13);
- width: var(--f-size-13);
+.f-modal__close.lg {
+ height: var(--f-size-13);
+ width: var(--f-size-13);
}
-.f-modal__close.xl {
- height: var(--f-size-15);
- width: var(--f-size-15);
+.f-modal__close.xl {
+ height: var(--f-size-15);
+ width: var(--f-size-15);
}
.f-modal__header .f-modal__close {
diff --git a/packages/core/src/modal/modal.tsx b/packages/core/src/modal/modal.tsx
index b39a6c0b..b6232b9a 100644
--- a/packages/core/src/modal/modal.tsx
+++ b/packages/core/src/modal/modal.tsx
@@ -9,7 +9,7 @@ export const ModalClose = (props: ModalCloseProps) => {
return (
.f-navigation-item__container:not(.is-disabled), */
@@ -125,7 +125,7 @@
/* ************************************************************** */
/* ************************************************************** */
-/* divider */
+/* divider */
.f-navigation-divider {
display: block;
@@ -222,7 +222,7 @@
align-items: center;
align-content: center;
justify-content: center;
-}
+}
.f-navigation.is-navbar > * + * {
margin-left: 0.1rem;
@@ -236,7 +236,7 @@
width: 1px;
border: none;
position: static;
-}
+}
.f-navigation.is-navbar > .f-navigation-divider > hr {
display: block;
@@ -295,4 +295,5 @@
background-color: transparent;
}
-.f-navigation-item__container.has-sub-navigation.is-open {}
+.f-navigation-item__container.has-sub-navigation.is-open {
+}
diff --git a/packages/core/src/notification/notification.css b/packages/core/src/notification/notification.css
index 5fbec041..ee2ee585 100644
--- a/packages/core/src/notification/notification.css
+++ b/packages/core/src/notification/notification.css
@@ -1,6 +1,6 @@
:root {
--f-notification-border-radius: 0;
- --f-notification-accent-size: var(--f-size-2);
+ --f-notification-accent-size: 1px;
--f-notification-color: var(--f-color-text-weaker);
--f-notification-background-color: var(--f-color-surface-strong);
--f-notification-spacing: var(--f-space-4);
@@ -10,9 +10,8 @@
.f-notification {
color: var(--f-notification-color);
background-color: var(--f-notification-background-color);
- border-radius: var(--f-notification-border-radius);
+ border-radius: var(--f-notification-border-radius);
padding: var(--f-notification-padding);
- border: 0;
gap: var(--f-notification-spacing);
}
@@ -55,42 +54,35 @@
.f-notification.is-accent {
color: var(--f-color-accent);
- border-color: var(--f-color-accent);
- background-color: var(--f-color-accent-weak);
+ background-color: rgba(from var(--f-color-accent) r g b / 10%);
}
.f-notification.is-success {
color: var(--f-color-success);
- border-color: var(--f-color-success);
- background-color: var(--f-color-success-weak);
+ background-color: rgba(from var(--f-color-success) r g b / 10%);
}
.f-notification.is-neutral {
color: var(--f-color-neutral);
- border-color: var(--f-color-neutral);
- background-color: var(--f-color-neutral-weak);
+ background-color: rgba(from var(--f-color-neutral) r g b / 10%);
}
.f-notification.is-caution {
color: var(--f-color-caution);
- border-color: var(--f-color-caution);
- background-color: var(--f-color-caution-weak);
+ background-color: rgba(from var(--f-color-caution) r g b / 10%);
}
.f-notification.is-warning {
color: var(--f-color-warning);
- border-color: var(--f-color-warning);
- background-color: var(--f-color-warning-weak);
+ background-color: rgba(from var(--f-color-warning) r g b / 10%);
}
.f-notification.is-danger {
color: var(--f-color-danger);
- border-color: var(--f-color-danger);
- background-color: var(--f-color-danger-weak);
+ background-color: rgba(from var(--f-color-danger) r g b / 10%);
}
.f-notification.is-highlight {
color: var(--f-color-highlight);
- border-color: var(--f-color-highlight);
- background-color: var(--f-color-highlight-weak);
+ background-color: rgba(from var(--f-color-highlight) r g b / 10%);
}
diff --git a/packages/core/src/option/option.css b/packages/core/src/option/option.css
index 8de398cb..ee2f42f0 100644
--- a/packages/core/src/option/option.css
+++ b/packages/core/src/option/option.css
@@ -42,7 +42,7 @@
flex-shrink: 0;
white-space: nowrap;
position: relative;
- transition: color .2s;
+ transition: color 0.2s;
}
.f-option:focus {
@@ -50,7 +50,7 @@
}
.f-option:not(:disabled):active .f-option__suffix__label {
- opacity: var(--f-option-active-opacity);
+ opacity: var(--f-option-active-opacity);
}
.f-option:disabled {
@@ -69,7 +69,7 @@
.f-option:not(:disabled):not(.is-animated).is-selected {
background-color: var(--f-options-active-background-color);
transition-property: var(--f-transition-property-colors);
- transition-duration: var(--f-transition-duration-faster);
+ transition-duration: var(--f-transition-duration-faster);
transition-timing-function: var(--f-transition-easing-ease-out);
}
@@ -83,7 +83,7 @@
height: 100%;
z-index: 0;
transition-property: var(--f-transition-property-dimensions), var(--f-transition-property-position);
- transition-duration: var(--f-transition-duration-faster);
+ transition-duration: var(--f-transition-duration-faster);
transition-timing-function: var(--f-transition-easing-ease-out);
}
@@ -121,35 +121,35 @@
}
.f-options.md {
- height: var(--f-size-10);
+ height: var(--f-size-10);
}
.f-options.lg {
- height: var(--f-size-12);
+ height: var(--f-size-12);
}
.f-options.xl {
- height: var(--f-size-14);
+ height: var(--f-size-14);
}
/* sizes - option */
-.f-option.xs {
+.f-option.xs {
padding: 0 var(--f-space-2);
}
-.f-option.sm {
+.f-option.sm {
padding: 0 var(--f-space-3);
}
-.f-option.md {
+.f-option.md {
padding: 0 var(--f-space-4);
}
-.f-option.lg {
+.f-option.lg {
padding: 0 var(--f-space-5);
}
-.f-option.xl {
+.f-option.xl {
padding: 0 var(--f-space-6);
}
diff --git a/packages/core/src/pagination/pagination.css b/packages/core/src/pagination/pagination.css
index f3ed579f..3503ed38 100644
--- a/packages/core/src/pagination/pagination.css
+++ b/packages/core/src/pagination/pagination.css
@@ -82,4 +82,3 @@
background-color: transparent;
cursor: default;
}
-
diff --git a/packages/core/src/pill/pill.css b/packages/core/src/pill/pill.css
index 53c9f832..c2407040 100644
--- a/packages/core/src/pill/pill.css
+++ b/packages/core/src/pill/pill.css
@@ -16,7 +16,7 @@
.f-pill {
width: fit-content;
border-radius: var(--f-pill-border-radius);
- border: var(--f-pill-border-width) solid;
+ border: var(--f-pill-border-width) solid;
border-color: var(--f-pill-border-color);
background-color: var(--f-pill-background-color);
color: var(--f-pill-color);
@@ -25,7 +25,7 @@
}
.f-pill.is-subtle {
- border: none;
+ border: none;
color: var(--f-pill-color-subtle);
background-color: var(--f-pill-background-color-subtle);
}
@@ -36,7 +36,7 @@
}
.f-pill.is-solid {
- border: none;
+ border: none;
background-color: var(--f-pill-background-color-solid);
color: var(--f-pill-color-color);
}
@@ -47,8 +47,8 @@
}
.f-pill__label {
- flex-shrink: 0;
- position: relative;
+ flex-shrink: 0;
+ position: relative;
pointer-events: none;
white-space: nowrap;
color: currentColor;
@@ -94,15 +94,15 @@
.f-pill.md {
padding: 0 var(--f-space-1);
- height: var(--f-size-9);
+ height: var(--f-size-9);
}
.f-pill.lg {
padding: 0 var(--f-space-2);
- height: var(--f-size-10);
+ height: var(--f-size-10);
}
.f-pill.xl {
padding: 0 var(--f-space-2);
- height: var(--f-size-12);
+ height: var(--f-size-12);
}
diff --git a/packages/core/src/popover/popover.css b/packages/core/src/popover/popover.css
index b261a6b3..e8ff1b7a 100644
--- a/packages/core/src/popover/popover.css
+++ b/packages/core/src/popover/popover.css
@@ -32,8 +32,12 @@
}
@keyframes f-popover-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
.f-popover > * {
diff --git a/packages/core/src/portal/portal.tsx b/packages/core/src/portal/portal.tsx
index 48984d76..de9615da 100644
--- a/packages/core/src/portal/portal.tsx
+++ b/packages/core/src/portal/portal.tsx
@@ -10,7 +10,7 @@ export type PortalProps = {
export const Portal = (props: PortalProps) => {
const el = useMemo(() => {
if (props.portalRef) return props.portalRef
- const portalId: string = 'fold-portal'
+ const portalId: string = 'f-portal'
const el: HTMLElement = documentObject.getElementById(portalId)
if (el) return el
const newEl = documentObject.createElement('div')
diff --git a/packages/core/src/progress/progress.css b/packages/core/src/progress/progress.css
index 4a16c8af..0216c34c 100644
--- a/packages/core/src/progress/progress.css
+++ b/packages/core/src/progress/progress.css
@@ -1,6 +1,6 @@
:root {
- --f-progress-background: var(--f-color-surface-stronger);
- --f-progress-active: var(--f-color-surface-strongest);
+ --f-progress-background: var(--f-color-surface-strong);
+ --f-progress-active: var(--f-color-surface-stronger);
--f-progress-radius: var(--f-radius);
--f-progress-subtle-padding: var(--f-space-1);
--f-progress-subtle-opacity: 0.2;
@@ -68,7 +68,7 @@
}
.f-progress.is-animated > div:after {
- content: "";
+ content: '';
position: absolute;
top: 0;
left: 0;
@@ -167,7 +167,7 @@
}
.f-progress.is-animated > div:after {
- content: "";
+ content: '';
position: absolute;
top: 0;
left: 0;
diff --git a/packages/core/src/radio/radio.css b/packages/core/src/radio/radio.css
index d9cfeda4..8d5fe079 100644
--- a/packages/core/src/radio/radio.css
+++ b/packages/core/src/radio/radio.css
@@ -1,5 +1,5 @@
:root {
- --f-radio-border-radius: var(--f-radius-full);
+ --f-radio-border-radius: var(--f-radius-full);
--f-radio-border-color: var(--f-color-border);
--f-radio-border-color-hover: var(--f-color-border-strong);
--f-radio-background-color: var(--f-color-surface);
@@ -11,13 +11,13 @@
--f-radio-disabled-color: var(--f-color-border);
}
-input.f-radio[type="radio"] {
+input.f-radio[type='radio'] {
-webkit-appearance: none;
cursor: pointer;
appearance: none;
height: var(--f-size-5);
width: var(--f-size-5);
- border-radius: var(--f-radio-border-radius);
+ border-radius: var(--f-radio-border-radius);
border: 1px solid;
border-color: var(--f-radio-border-color);
background-color: var(--f-radio-background-color);
@@ -29,34 +29,34 @@ input.f-radio[type="radio"] {
margin: 0;
}
-input.f-radio[type="radio"]:after {
- content: " ";
+input.f-radio[type='radio']:after {
+ content: ' ';
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
- border-radius: calc(var(--f-radio-border-radius)/2); /* keep it propportional */
+ border-radius: calc(var(--f-radio-border-radius) / 2); /* keep it propportional */
background-color: var(--f-color-surface);
}
-input.f-radio[type="radio"]:hover {
+input.f-radio[type='radio']:hover {
border-color: var(--f-radio-border-color-hover);
}
-input.f-radio[type="radio"]:focus {
+input.f-radio[type='radio']:focus {
outline: var(--f-focus);
outline-offset: var(--f-outline-offset);
}
-input.f-radio[type="radio"]:checked {
+input.f-radio[type='radio']:checked {
border-color: var(--f-radio-active-border-color);
background-color: var(--f-radio-active-background-color);
color: var(--f-radio-active-color);
}
-input.f-radio[type="radio"]:disabled {
+input.f-radio[type='radio']:disabled {
border-color: var(--f-radio-disabled-border-color);
background-color: var(--f-radio-disabled-background-color);
color: var(--f-radio-disabled-color);
@@ -65,27 +65,27 @@ input.f-radio[type="radio"]:disabled {
/* sizes */
-input.f-radio[type="radio"].xs {
- height: var(--f-size-3);
- width: var(--f-size-3);
+input.f-radio[type='radio'].xs {
+ height: var(--f-size-3);
+ width: var(--f-size-3);
}
-input.f-radio[type="radio"].sm {
+input.f-radio[type='radio'].sm {
height: var(--f-size-4);
width: var(--f-size-4);
}
-input.f-radio[type="radio"].md {
+input.f-radio[type='radio'].md {
height: var(--f-size-5);
width: var(--f-size-5);
}
-input.f-radio[type="radio"].lg {
+input.f-radio[type='radio'].lg {
height: var(--f-size-6);
width: var(--f-size-6);
}
-input.f-radio[type="radio"].xl {
+input.f-radio[type='radio'].xl {
height: var(--f-size-7);
width: var(--f-size-7);
}
diff --git a/packages/core/src/range/range.css b/packages/core/src/range/range.css
index 99b67857..484c3f26 100644
--- a/packages/core/src/range/range.css
+++ b/packages/core/src/range/range.css
@@ -1,15 +1,15 @@
:root {
- --f-range-border-radius: var(--f-radius-full);
- --f-range-background: var(--f-color-surface-stronger);
- --f-range-thumb-shadow: var(--f-shadow-base);
- --f-range-thumb-border-radius: var(--f-radius-full);
- --f-range-thumb-background-color: var(--f-color-accent);
- --f-range-thumb-border-color: var(--f-color-accent);
- --f-range-thumb-hover-background-color: var(--f-color-accent);
- --f-range-thumb-hover-border-color: var(--f-color-accent);
- --f-range-thumb-size: var(--f-size-5);
- --f-range-thumb-border-size: 0.2;
- --f-range-track-size: var(--f-size-2);
+ --f-range-border-radius: var(--f-radius-full);
+ --f-range-background: var(--f-color-surface-stronger);
+ --f-range-thumb-shadow: var(--f-shadow-base);
+ --f-range-thumb-border-radius: var(--f-radius-full);
+ --f-range-thumb-background-color: var(--f-color-accent);
+ --f-range-thumb-border-color: var(--f-color-accent);
+ --f-range-thumb-hover-background-color: var(--f-color-accent);
+ --f-range-thumb-hover-border-color: var(--f-color-accent);
+ --f-range-thumb-size: var(--f-size-5);
+ --f-range-thumb-border-size: 0.2;
+ --f-range-track-size: var(--f-size-2);
}
.f-range {
@@ -20,7 +20,7 @@
margin: 0px;
}
-.f-range input[type="range"] {
+.f-range input[type='range'] {
padding: 0px;
margin: 0px;
position: absolute;
@@ -33,7 +33,7 @@
/* general */
-.f-range input[type="range"]::-webkit-slider-thumb {
+.f-range input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
height: var(--f-range-thumb-size);
width: var(--f-range-thumb-size);
@@ -42,10 +42,10 @@
border-radius: var(--f-range-thumb-border-radius);
background-color: var(--f-range-thumb-background-color);
box-shadow: var(--f-range-thumb-shadow);
- transition: width .1s, height .1s;
+ transition: width 0.1s, height 0.1s;
}
-.f-range input[type="range"]::-moz-range-thumb {
+.f-range input[type='range']::-moz-range-thumb {
-webkit-appearance: none;
height: var(--f-range-thumb-size);
width: var(--f-range-thumb-size);
@@ -54,19 +54,19 @@
border-radius: var(--f-range-thumb-border-radius);
background-color: var(--f-range-thumb-background-color);
box-shadow: var(--f-range-thumb-shadow);
- transition: width .1s, height .1s;
+ transition: width 0.1s, height 0.1s;
}
/* track */
-.f-range input[type="range"]::-webkit-slider-runnable-track {
+.f-range input[type='range']::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
-.f-range input[type="range"]::-moz-range-runnable-track {
+.f-range input[type='range']::-moz-range-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
@@ -75,28 +75,28 @@
/* disabled */
-.f-range input[type="range"]:disabled,
-.f-range input[type="range"]:disabled::-webkit-slider-thumb {
+.f-range input[type='range']:disabled,
+.f-range input[type='range']:disabled::-webkit-slider-thumb {
cursor: not-allowed !important;
}
-.f-range input[type="range"]:disabled::-moz-range-thumb {
+.f-range input[type='range']:disabled::-moz-range-thumb {
cursor: not-allowed !important;
}
/* focus */
-.f-range input[type="range"]:focus {
+.f-range input[type='range']:focus {
outline: none;
}
-.f-range input[type="range"]:focus::-webkit-slider-thumb {
+.f-range input[type='range']:focus::-webkit-slider-thumb {
cursor: pointer;
outline: var(--f-focus);
outline-offset: var(--f-outline-offset);
}
-.f-range input[type="range"]:focus::-moz-range-thumb {
+.f-range input[type='range']:focus::-moz-range-thumb {
cursor: pointer;
outline: var(--f-focus);
outline-offset: var(--f-outline-offset);
@@ -104,13 +104,13 @@
/* hover */
-.f-range input[type="range"]:hover::-webkit-slider-thumb {
+.f-range input[type='range']:hover::-webkit-slider-thumb {
cursor: pointer;
background-color: var(--f-range-thumb-hover-background-color);
border-color: var(--f-range-thumb-hover-border-color);
}
-.f-range input[type="range"]:hover::-moz-range-thumb {
+.f-range input[type='range']:hover::-moz-range-thumb {
cursor: pointer;
background-color: var(--f-range-thumb-hover-background-color);
border-color: var(--f-range-thumb-hover-border-color);
diff --git a/packages/core/src/rate/rate.css b/packages/core/src/rate/rate.css
index a8a9bb1c..b1f28fd4 100644
--- a/packages/core/src/rate/rate.css
+++ b/packages/core/src/rate/rate.css
@@ -19,14 +19,14 @@
.f-rate-icon {
cursor: pointer;
- transition: transform .2s;
+ transition: transform 0.2s;
color: var(--f-rate-color);
display: inline-block;
padding: 0;
margin: 0;
border: 0;
background: transparent;
- transition: color, transform .2s;
+ transition: color, transform 0.2s;
position: relative;
}
@@ -39,7 +39,7 @@
z-index: 2;
overflow: hidden;
width: fit-content;
- height:fit-content;
+ height: fit-content;
color: var(--f-rate-color-active);
}
@@ -48,6 +48,6 @@
z-index: 1;
overflow: hidden;
width: fit-content;
- height:fit-content;
+ height: fit-content;
color: var(--f-rate-color);
}
diff --git a/packages/core/src/resizable/resizable.css b/packages/core/src/resizable/resizable.css
index 9fe98f44..034ae732 100644
--- a/packages/core/src/resizable/resizable.css
+++ b/packages/core/src/resizable/resizable.css
@@ -17,14 +17,14 @@
}
.f-resizable.is-dragging *:not(.f-resizable-rail) {
- user-select: none;
+ user-select: none;
pointer-events: none;
}
.f-resizable-rail {
background-color: var(--f-resizable-color);
position: absolute;
- transition: opacity, background-color .2s;
+ transition: opacity, background-color 0.2s;
z-index: var(--f-index-resizable);
}
diff --git a/packages/core/src/select/select.css b/packages/core/src/select/select.css
index ec24ef3a..64211d64 100644
--- a/packages/core/src/select/select.css
+++ b/packages/core/src/select/select.css
@@ -5,10 +5,10 @@
--f-select-color-disabled: var(--f-color-text-weakest);
--f-select-color-selected: var(--f-color-accent);
--f-select-background-selected: var(--f-color-surface-strong);
- --f-select-option-focus: var(--f-color-surface-stronger);
+ --f-select-option-focus: var(--f-color-surface-stronger);
--f-select-option-hover: var(--f-color-surface-strong);
--f-select-option-active: var(--f-color-surface-stronger);
- --f-select-options-height: 200px;
+ --f-select-options-height: 200px;
--f-select-option-padding: var(--f-space-2);
--f-select-options-padding: 4px;
--f-select-popover-border-color: var(--f-color-border);
@@ -78,8 +78,12 @@ input.f-select:disabled {
}
@keyframes f-popover-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
/* list */
@@ -124,7 +128,7 @@ li.f-select-list-option-container {
outline: none;
}
-/* list option */
+/* list option */
.f-select-list-option {
text-align: left;
@@ -137,7 +141,7 @@ li.f-select-list-option-container {
font-weight: var(--f-font-weight-normal);
padding: var(--f-select-option-padding);
margin: 0;
- cursor: pointer;
+ cursor: pointer;
flex-grow: 1;
transition: background-color 0.2s;
border-radius: var(--f-radius);
@@ -166,7 +170,7 @@ li.f-select-list-option-container {
}
.f-select-list-option:not(.is-disabled):hover {
- background-color: var(--f-select-option-hover);
+ background-color: var(--f-select-option-hover);
}
.f-select-list-option:not(.is-disabled):active {
diff --git a/packages/core/src/skeleton/skeleton.css b/packages/core/src/skeleton/skeleton.css
index 46120cc4..772ea759 100644
--- a/packages/core/src/skeleton/skeleton.css
+++ b/packages/core/src/skeleton/skeleton.css
@@ -21,22 +21,24 @@
border-radius: var(--f-skeleton-border-radius);
}
-.f-skeleton .f-avatar img {
+.f-skeleton .f-avatar img {
display: none;
}
-.f-skeleton-circle { border-radius: 50%; }
+.f-skeleton-circle {
+ border-radius: 50%;
+}
@keyframes f-skeleton-color {
0% {
- background-color: var(--f-skeleton-color-dark);
+ background-color: var(--f-skeleton-color-dark);
}
50% {
- background-color: var(--f-skeleton-color-light);
+ background-color: var(--f-skeleton-color-light);
}
100% {
- background-color: var(--f-skeleton-color-dark);
+ background-color: var(--f-skeleton-color-dark);
}
}
diff --git a/packages/core/src/slider/slider.css b/packages/core/src/slider/slider.css
index 734baadb..43915217 100644
--- a/packages/core/src/slider/slider.css
+++ b/packages/core/src/slider/slider.css
@@ -154,7 +154,7 @@
margin-left: auto;
margin-right: auto;
justify-content: space-between;
- height: var(--f-size-4);
+ height: var(--f-size-4);
}
.f-slider__footer-marker {
diff --git a/packages/core/src/sparkline/sparkline.css b/packages/core/src/sparkline/sparkline.css
index ef00a523..76472577 100644
--- a/packages/core/src/sparkline/sparkline.css
+++ b/packages/core/src/sparkline/sparkline.css
@@ -3,7 +3,7 @@
--f-sparkline-inactive: var(--f-color-surface);
}
-.f-sparkline {
+.f-sparkline {
}
.f-sparkline.is-line {
@@ -18,5 +18,5 @@
.f-sparkline.is-square {
stroke: var(--f-sparkline-inactive);
- fill: var(--f-sparkline-active);
+ fill: var(--f-sparkline-active);
}
diff --git a/packages/core/src/spinner/spinner.css b/packages/core/src/spinner/spinner.css
index daad4961..c1e4b78b 100644
--- a/packages/core/src/spinner/spinner.css
+++ b/packages/core/src/spinner/spinner.css
@@ -28,7 +28,7 @@
.f-spinner {
animation: rotate 2s linear infinite;
position: relative;
- color: var(--f-spinner-color);
+ color: var(--f-spinner-color);
}
.f-spinner.xs {
diff --git a/packages/core/src/splitter/splitter.css b/packages/core/src/splitter/splitter.css
index 33fe14f1..52a13b06 100644
--- a/packages/core/src/splitter/splitter.css
+++ b/packages/core/src/splitter/splitter.css
@@ -5,7 +5,7 @@
align-items: stretch;
align-content: stretch;
display: flex;
-}
+}
.f-splitter__resizable {
width: 100%;
diff --git a/packages/core/src/stack/stack.css b/packages/core/src/stack/stack.css
index af207b9c..6a0093cb 100644
--- a/packages/core/src/stack/stack.css
+++ b/packages/core/src/stack/stack.css
@@ -1,4 +1,5 @@
-.f-stack {}
+.f-stack {
+}
.f-stack:not(.is-nostretch) {
justify-content: stretch;
@@ -14,5 +15,5 @@ defined in code:
.f-stack > * + * {
margin-top: var(--f-stack-spacing-top) !important;
- margin-left: var(--f-stack-spacing-left) !important;
+ margin-left: var(--f-stack-spacing-left) !important;
}
diff --git a/packages/core/src/stat/stat.tsx b/packages/core/src/stat/stat.tsx
index fca8a598..c3182d04 100644
--- a/packages/core/src/stat/stat.tsx
+++ b/packages/core/src/stat/stat.tsx
@@ -44,7 +44,13 @@ export const Stat = (props: StatProps) => {
{icon && }
{descriptionTool}
- {description && {description}}
+ {description && (
+
+ {description}
+
+ )}
)}
{footer}
diff --git a/packages/core/src/steps/steps.css b/packages/core/src/steps/steps.css
index abe90d9b..a0f13d4f 100644
--- a/packages/core/src/steps/steps.css
+++ b/packages/core/src/steps/steps.css
@@ -58,7 +58,7 @@
}
.f-step__content > * {
- word-break: keep-all;
+ word-break: keep-all;
}
.f-step__seperator {
@@ -66,7 +66,7 @@
background: var(--f-step-seperator-color);
height: var(--f-step-seperator-size) !important;
flex-shrink: 0;
- flex: 1;
+ flex: 1;
}
.f-step.is-completed .f-step__seperator {
diff --git a/packages/core/src/styles/align.css b/packages/core/src/styles/align.css
index b2e03724..7a41fcd9 100644
--- a/packages/core/src/styles/align.css
+++ b/packages/core/src/styles/align.css
@@ -10,7 +10,7 @@
.f-align-h-middle-right,
.f-align-h-middle-stretch,
.f-align-h-middle-between,
-.f-align-h-bottom-left,
+.f-align-h-bottom-left,
.f-align-h-bottom-center,
.f-align-h-bottom-right,
.f-align-h-bottom-stretch,
@@ -21,82 +21,82 @@
/* top */
-.f-align-h-top-left {
- justify-content: flex-start !important;
+.f-align-h-top-left {
+ justify-content: flex-start !important;
align-items: flex-start !important;
}
-.f-align-h-top-center {
- justify-content: center !important;
+.f-align-h-top-center {
+ justify-content: center !important;
align-items: flex-start !important;
}
-.f-align-h-top-right {
- justify-content: flex-end !important;
+.f-align-h-top-right {
+ justify-content: flex-end !important;
align-items: flex-start !important;
}
-.f-align-h-top-stretch {
- justify-content: stretch !important;
+.f-align-h-top-stretch {
+ justify-content: stretch !important;
align-items: flex-start !important;
}
-.f-align-h-top-between {
- justify-content: space-between !important;
+.f-align-h-top-between {
+ justify-content: space-between !important;
align-items: flex-start !important;
}
/* middle */
-.f-align-h-middle-left {
- justify-content: flex-start !important;
+.f-align-h-middle-left {
+ justify-content: flex-start !important;
align-items: center !important;
}
-.f-align-h-middle-center {
- justify-content: center !important;
+.f-align-h-middle-center {
+ justify-content: center !important;
align-items: center !important;
}
-.f-align-h-middle-right {
- justify-content: flex-end !important;
+.f-align-h-middle-right {
+ justify-content: flex-end !important;
align-items: center !important;
}
-.f-align-h-middle-stretch {
- justify-content: stretch !important;
+.f-align-h-middle-stretch {
+ justify-content: stretch !important;
align-items: center !important;
}
-.f-align-h-middle-between {
- justify-content: space-between !important;
+.f-align-h-middle-between {
+ justify-content: space-between !important;
align-items: center !important;
}
/* bottom */
-.f-align-h-bottom-left {
- justify-content: flex-start !important;
+.f-align-h-bottom-left {
+ justify-content: flex-start !important;
align-items: flex-end !important;
}
-.f-align-h-bottom-center {
- justify-content: center !important;
+.f-align-h-bottom-center {
+ justify-content: center !important;
align-items: flex-end !important;
}
-.f-align-h-bottom-right {
- justify-content: flex-end !important;
+.f-align-h-bottom-right {
+ justify-content: flex-end !important;
align-items: flex-end !important;
}
-.f-align-h-bottom-stretch {
- justify-content: stretch !important;
+.f-align-h-bottom-stretch {
+ justify-content: stretch !important;
align-items: flex-end !important;
}
-.f-align-h-bottom-between {
- justify-content: space-between !important;
+.f-align-h-bottom-between {
+ justify-content: space-between !important;
align-items: flex-end !important;
}
@@ -112,7 +112,7 @@
.f-align-v-middle-right,
.f-align-v-center-stretch,
.f-align-v-center-between,
-.f-align-v-bottom-left,
+.f-align-v-bottom-left,
.f-align-v-bottom-center,
.f-align-v-bottom-right,
.f-align-v-right-stretch,
@@ -123,80 +123,80 @@
/* top */
-.f-align-v-top-left {
- justify-content: flex-start !important;
+.f-align-v-top-left {
+ justify-content: flex-start !important;
align-items: flex-start !important;
}
-.f-align-v-top-center {
- justify-content: flex-start !important;
+.f-align-v-top-center {
+ justify-content: flex-start !important;
align-items: center !important;
}
-.f-align-v-top-right {
- justify-content: flex-start !important;
+.f-align-v-top-right {
+ justify-content: flex-start !important;
align-items: flex-end !important;
}
-.f-align-v-left-stretch {
+.f-align-v-left-stretch {
align-items: stretch !important;
}
-.f-align-v-left-between {
+.f-align-v-left-between {
justify-content: space-between !important;
}
/* middle */
-.f-align-v-middle-left {
+.f-align-v-middle-left {
justify-content: center !important;
- align-items: flex-start !important;
+ align-items: flex-start !important;
}
-.f-align-v-middle-center {
- justify-content: center !important;
+.f-align-v-middle-center {
+ justify-content: center !important;
align-items: center !important;
}
-.f-align-v-middle-right {
+.f-align-v-middle-right {
justify-content: center !important;
- align-items: flex-end !important;
+ align-items: flex-end !important;
}
-.f-align-v-center-stretch {
- justify-content: stretch !important;
+.f-align-v-center-stretch {
+ justify-content: stretch !important;
align-items: center !important;
}
-.f-align-v-center-between {
- justify-content: space-between !important;
+.f-align-v-center-between {
+ justify-content: space-between !important;
align-items: center !important;
}
/* bottom */
-.f-align-v-bottom-left {
+.f-align-v-bottom-left {
justify-content: flex-end !important;
- align-items: flex-start !important;
+ align-items: flex-start !important;
}
-.f-align-v-bottom-center {
+.f-align-v-bottom-center {
justify-content: flex-end !important;
- align-items: center !important;
+ align-items: center !important;
}
-.f-align-v-bottom-right {
- justify-content: flex-end !important;
+.f-align-v-bottom-right {
+ justify-content: flex-end !important;
align-items: flex-end !important;
}
-.f-align-v-right-stretch {
- justify-content: stretch !important;
+.f-align-v-right-stretch {
+ justify-content: stretch !important;
align-items: flex-end !important;
}
-.f-align-v-right-between {
- justify-content: space-between !important;
+.f-align-v-right-between {
+ justify-content: space-between !important;
align-items: flex-end !important;
}
@@ -211,6 +211,6 @@
.f-align-v-right-stretch > *,
.f-align-h-top-stretch > *,
.f-align-h-middle-stretch > *,
-.f-align-h-bottom-stretch > * {
- flex-grow: 1;
+.f-align-h-bottom-stretch > * {
+ flex-grow: 1;
}
diff --git a/packages/core/src/styles/popout.css b/packages/core/src/styles/popout.css
index 05b91361..a278b94c 100644
--- a/packages/core/src/styles/popout.css
+++ b/packages/core/src/styles/popout.css
@@ -7,12 +7,16 @@
.f-popout-content {
display: none;
- animation: f-popout-content-fadein var(--f-transition-duration-fast);
+ animation: f-popout-content-fadein var(--f-transition-duration-fast);
}
@keyframes f-popout-content-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
.f-popout-trigger:hover .f-popout-content {
@@ -77,9 +81,9 @@
left: 100%;
top: 50%;
transform: translateY(-50%);
-}
+}
-/* positioning - arrows */
+/* positioning - arrows */
:root {
--f-arrow-size: var(--f-size-3);
diff --git a/packages/core/src/styles/reset.css b/packages/core/src/styles/reset.css
index 3c5c8310..5168ed85 100644
--- a/packages/core/src/styles/reset.css
+++ b/packages/core/src/styles/reset.css
@@ -1,10 +1,12 @@
-html, body {
+html,
+body {
background-color: transparent;
box-sizing: border-box;
font-size: 13px;
font-weight: var(--f-font-weight-normal);
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"
-}
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
+ 'Apple Color Emoji', 'Segoe UI Emoji';
+}
*,
*:before,
diff --git a/packages/core/src/styles/styles.css b/packages/core/src/styles/styles.css
index abe31a8b..e9cd5c20 100644
--- a/packages/core/src/styles/styles.css
+++ b/packages/core/src/styles/styles.css
@@ -95,5 +95,3 @@ we don't want to use !important
@import '../data-grid/data-grid.css';
@import '../date-picker/date-picker.css';
@import '../csv-importer/csv-importer.css';
-
-
diff --git a/packages/core/src/styles/utility.css b/packages/core/src/styles/utility.css
index 929861e0..1f330663 100644
--- a/packages/core/src/styles/utility.css
+++ b/packages/core/src/styles/utility.css
@@ -1,8 +1,8 @@
:root {
--f-buttonize-opacity: 0.8;
--f-buttonize-opacity-active: 0.6;
- --f-buttonize-outline-size: 0.2rem;
- --f-buttonize-outline-size-active: 0.25rem;
+ --f-buttonize-outline-size: 2px;
+ --f-buttonize-outline-size-active: 2px;
--f-buttonize-outline-color: var(--f-color-accent);
}
@@ -23,7 +23,7 @@
}
.f-buttonize-outline {
- transition: opacity 0.25s;
+ transition: outline 0.25s;
}
.f-buttonize-outline:hover {
@@ -33,7 +33,6 @@
.f-buttonize-outline:active {
outline: var(--f-buttonize-outline-size-active) solid var(--f-buttonize-outline-color);
- /* filter: brightness(90%) contrast(110%); */
}
/* text */
@@ -52,7 +51,7 @@
width: 0%;
height: var(--f-underline-size);
transition: height, width var(--f-transition-duration-ultra-fast) var(--f-transition-easing-ease-in);
- content: "";
+ content: '';
position: absolute;
top: var(--f-underline-position);
left: 0px;
@@ -64,7 +63,7 @@
width: 100%;
}
-/* text */
+/* text */
.f-ellipsis {
overflow: hidden;
@@ -84,10 +83,10 @@
.f-scrollbar {
--f-scrollbar-size: 0.3rem;
- --f-scrollbar-foreground: var(--f-color-surface-stronger);
+ --f-scrollbar-foreground: var(--f-color-surface-strongest);
--f-scrollbar-background: transparent;
- scrollbar-width: thin;
+ scrollbar-width: thin;
scrollbar-color: var(--f-scrollbar-foreground) var(--f-scrollbar-background);
}
@@ -129,7 +128,7 @@
overflow: auto;
}
-/* flex */
+/* flex */
.f-flexer {
flex: 1;
@@ -148,7 +147,7 @@
flex-direction: row;
align-items: center;
align-content: center;
- justify-content: center;
+ justify-content: center;
}
/* basic fade in */
@@ -158,8 +157,12 @@
}
@keyframes f-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
/* other */
diff --git a/packages/core/src/table/table.css b/packages/core/src/table/table.css
index 8a3df5f2..9426cc31 100644
--- a/packages/core/src/table/table.css
+++ b/packages/core/src/table/table.css
@@ -1,5 +1,5 @@
:root {
- --f-table-border-radius: var(--f-radius);
+ --f-table-border-radius: var(--f-radius);
--f-table-border-color: var(--f-color-border);
--f-table-caption-color: var(--f-color-text-weaker);
--f-table-caption-size: var(--f-font-size-sm);
@@ -69,11 +69,10 @@ table.f-table.is-striped tr:nth-child(even) td {
}
table.f-table.is-lined tr td {
- border-top: 1px solid;
+ border-top: 1px solid;
border-color: var(--f-table-border-color);
}
-
/* caption */
table.f-table .f-table-caption {
@@ -98,13 +97,13 @@ table.f-table.has-caption-bottom {
table.f-table.has-sticky-column tr td:first-child {
position: sticky;
- left: 0;
+ left: 0;
z-index: 1;
}
table.f-table.has-sticky-header tr th:first-child {
position: sticky;
- left: 0;
+ left: 0;
z-index: 2;
}
@@ -113,5 +112,5 @@ table.f-table.has-sticky-column th,
table.f-table.has-sticky-header th:first-child,
table.f-table.has-sticky-column th:first-child {
position: sticky;
- top: 0;
+ top: 0;
}
diff --git a/packages/core/src/tabs/tabs.css b/packages/core/src/tabs/tabs.css
index 8bbfe9d1..772d69c1 100644
--- a/packages/core/src/tabs/tabs.css
+++ b/packages/core/src/tabs/tabs.css
@@ -28,7 +28,7 @@
/**************************************/
-.f-tab-list {
+.f-tab-list {
position: relative;
color: var(--f-tabs-color-icon);
background: var(--f-tabs-tab-list-background);
@@ -80,20 +80,20 @@
top: 0;
padding-bottom: var(--f-tabs-tab-scroll-button-padding);
background: linear-gradient(to bottom, var(--f-tabs-tab-scroll-button-background) 50%, transparent 100%);
- width: 100%;
+ width: 100%;
}
.f-tab-list.is-vertical .f-tab-list__icon.is-end {
bottom: 0;
padding-top: var(--f-tabs-tab-scroll-button-padding);
background: linear-gradient(to top, var(--f-tabs-tab-scroll-button-background) 50%, transparent 100%);
- width: 100%;
+ width: 100%;
}
.f-tab-list.is-vertical .f-tab-list__icon.is-start .f-button,
.f-tab-list.is-vertical .f-tab-list__icon.is-end .f-button {
max-width: 5rem;
- width: 60%;
+ width: 60%;
min-width: 3rem;
}
@@ -103,7 +103,7 @@
position: absolute;
z-index: 1;
transition-property: var(--f-transition-property-dimensions), var(--f-transition-property-position);
- transition-duration: var(--f-transition-duration-faster);
+ transition-duration: var(--f-transition-duration-faster);
transition-timing-function: var(--f-transition-easing-ease-out);
pointer-events: none;
}
@@ -150,13 +150,13 @@
align-items: stretch;
align-content: stretch;
overflow: auto;
- -ms-overflow-style: none; /* Internet Explorer 10+ */
- scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* Internet Explorer 10+ */
+ scrollbar-width: none; /* Firefox */
scroll-behavior: smooth;
}
-.f-tab-list__inner::-webkit-scrollbar {
- display: none; /* Safari and Chrome */
+.f-tab-list__inner::-webkit-scrollbar {
+ display: none; /* Safari and Chrome */
}
.f-tab-list.is-top .f-tab-list__inner,
@@ -210,12 +210,12 @@
.f-tab:not(:disabled):hover {
outline: none;
background: var(--f-tabs-tab-background-hover);
-}
+}
.f-tab:not(:disabled):active {
outline: none;
background: var(--f-tabs-tab-background-active);
-}
+}
.f-tab-list.is-left .f-tab {
width: 100%;
@@ -251,7 +251,6 @@
flex-shrink: 0;
height: fit-content;
width: fit-content;
-
}
/* active marker */
@@ -300,11 +299,14 @@
}
@keyframes f-tab-current-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
-
/**************************************/
.f-tab-panels {
@@ -313,7 +315,7 @@
border: none;
flex: 1;
color: var(--f-tabs-tab-color);
- align-self: stretch;
+ align-self: stretch;
}
/* single panel */
@@ -322,11 +324,15 @@
position: relative;
width: 100%;
height: 100%;
- padding: var(--f-tabs-panel-padding);
+ padding: var(--f-tabs-panel-padding);
animation: f-tabs-panel-fadein var(--f-transition-duration-fast);
}
@keyframes f-tabs-panel-fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
diff --git a/packages/core/src/text/text.css b/packages/core/src/text/text.css
index 1b3877f7..484163e7 100644
--- a/packages/core/src/text/text.css
+++ b/packages/core/src/text/text.css
@@ -46,13 +46,13 @@ blockquote,
color: var(--f-text-color);
}
-label,
+label,
.f-text.is-label {
color: var(--f-label-color);
user-select: none;
}
-a,
+a,
.f-text.is-link {
color: var(--f-link-color);
padding: 0;
@@ -76,12 +76,12 @@ a:hover,
font-weight: var(--f-font-weight-medium);
}
-p,
+p,
p.f-text {
padding: 0px;
}
-blockquote,
+blockquote,
blockquote.f-text {
border-left: var(--f-blockquote-width) solid var(--f-color-accent);
padding: var(--f-space-inset-x-2);
@@ -90,29 +90,29 @@ blockquote.f-text {
color: var(--f-blockquote-color);
}
-small,
+small,
small.f-text {
font-size: var(--f-font-size-sm) !important; /* always */
}
-strong,
+strong,
strong.f-text {
font-weight: var(--f-font-weight-bold);
}
-mark,
+mark,
mark.f-text {
background-color: var(--f-color-surface-highlight);
}
-code,
-pre,
-code.f-text,
+code,
+pre,
+code.f-text,
pre.f-text {
font-family: var(--f-font-mono);
}
-legend,
+legend,
legend.f-text {
font-weight: var(--f-font-weight-semibold);
user-select: none;
diff --git a/packages/core/src/textarea/textarea.css b/packages/core/src/textarea/textarea.css
index d821662e..b699d8ba 100644
--- a/packages/core/src/textarea/textarea.css
+++ b/packages/core/src/textarea/textarea.css
@@ -70,7 +70,7 @@
}
.f-textarea::placeholder {
- color: var(--f-textarea-color-placeholder);
+ color: var(--f-textarea-color-placeholder);
}
.f-textarea:focus {
@@ -99,4 +99,3 @@
transition: none;
outline: none !important;
}
-
diff --git a/packages/core/src/timeline/timeline.css b/packages/core/src/timeline/timeline.css
index b3aa0069..121ad498 100644
--- a/packages/core/src/timeline/timeline.css
+++ b/packages/core/src/timeline/timeline.css
@@ -11,7 +11,8 @@
--f-timeline-item-marker-top: 1px;
}
-.f-timeline {}
+.f-timeline {
+}
.f-timeline > .f-timeline-item + .f-timeline-item {
margin-top: var(--f-timeline-item-margin);
@@ -46,23 +47,23 @@
}
.f-timeline-item__marker::after {
- content: "";
+ content: '';
flex-shrink: 0;
background-color: var(--f-timeline-item-marker-line-color);
width: var(--f-timeline-item-marker-line-size);
height: 100%;
left: 50%;
- margin-top: var(--f-timeline-item-marker-line-spacing);
+ margin-top: var(--f-timeline-item-marker-line-spacing);
position: absolute;
display: block;
transform: translateX(-50%);
z-index: 0;
color: inherit;
- }
+}
- .f-timeline > div:not(.f-hidden):last-child > .f-timeline-item__marker::after {
+.f-timeline > div:not(.f-hidden):last-child > .f-timeline-item__marker::after {
content: none;
- }
+}
.f-timeline-item__content {
flex: 1;
diff --git a/packages/core/src/toast/toast.css b/packages/core/src/toast/toast.css
index a03e963f..bb4b53ee 100644
--- a/packages/core/src/toast/toast.css
+++ b/packages/core/src/toast/toast.css
@@ -1,53 +1,87 @@
:root {
--f-toast-border-radius: var(--f-radius);
- --f-toast-color: var(--f-color-text-on-color);
- --f-toast-background-color: var(--f-color-surface-inverse);
+ --f-toast-color: var(--f-color-text);
+ --f-toast-border: 1px solid var(--f-color-border);
+ --f-toast-background-color: var(--f-color-surface);
--f-toast-max-width: 100%;
--f-toast-padding: var(--f-space-3);
+ --f-toast-width: min(22rem, calc(100vw - 2rem));
+ --f-toast-stack-gap: 0.35rem;
+ --f-toast-stack-overlap: 3.5rem;
}
.f-toast-container {
- position: fixed;
- width: fit-content;
+ position: fixed;
+ width: var(--f-toast-width);
z-index: var(--f-index-toast);
+ justify-content: flex-start;
+ gap: 0;
}
.f-toast-progress {
height: var(--f-size-1);
border-radius: var(--f-toast-border-radius);
margin-top: var(--f-size-3);
- width: 0%;
+ width: 100%;
background: currentColor;
- transition-property: width;
- transition-timing-function: linear;
+ transform: scaleX(0);
+ transform-origin: left center;
+ animation-name: f-toast-progress;
+ animation-timing-function: linear;
+ animation-fill-mode: forwards;
}
.f-toast {
- width: fit-content;
- max-width: var(--f-toast-max-width);
- margin-top: 0.5rem;
+ width: 100%;
+ max-width: min(var(--f-toast-max-width), var(--f-toast-width));
+ margin-top: 0;
border-radius: var(--f-toast-border-radius);
+ border: var(--f-toast-border);
box-shadow: var(--f-shadow-lg);
padding: var(--f-toast-padding);
z-index: var(--f-index-toast);
- animation: f-toast-fadein var(--f-transition-duration-slow);
+ animation: f-toast-fadein var(--f-transition-duration-ultra-slow);
+ transition-timing-function: var(--f-transition-easing-easi-in);
+ transition-property: transform, opacity, box-shadow;
+ transition-duration: var(--f-transition-duration-normal);
background-color: var(--f-toast-background-color);
color: var(--f-toast-color);
user-select: none;
gap: var(--f-size-3);
+ position: relative;
+ opacity: var(--f-toast-stack-opacity, 1);
+ transform: scale(var(--f-toast-stack-scale, 1));
+ z-index: var(--f-toast-stack-z-index, var(--f-index-toast));
+ will-change: transform, opacity, margin-top;
}
@keyframes f-toast-fadein {
- from {
- opacity: 0;
- transform: scale(0.95);
+ from {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: scale(var(--f-toast-stack-scale, 1));
+ }
+}
+
+@keyframes f-toast-progress {
+ from {
+ transform: scaleX(0);
}
- to {
- opacity: 1;
- transform: scale(1);
+ to {
+ transform: scaleX(1);
}
}
+.f-toast-container:hover .f-toast,
+.f-toast-container:focus-within .f-toast {
+ opacity: 1;
+ transform: scale(1);
+ transition-property: transform, opacity, margin-top, margin-bottom, box-shadow;
+}
+
.f-toast > * {
z-index: 1;
}
@@ -56,6 +90,11 @@
color: inherit;
}
+.f-toast__suffix {
+ flex-shrink: 0;
+ width: fit-content;
+}
+
.f-toast__prefix {
flex-shrink: 0;
width: fit-content;
@@ -76,44 +115,79 @@
}
.f-toast__close:hover {
- background-color: rgba(0,0,0,0.1);
+ background-color: var(--f-color-surface-strong);
}
/* ********************************************* */
-.f-toast.is-accent {
- color: var(--f-color-accent-text);
- background-color: var(--f-color-accent);
+.f-toast.is-accent {
+ color: var(--f-color-accent);
+ background-color: var(--f-color-accent-weak);
+ border: 1px solid rgba(from var(--f-color-accent) r g b / 25%);
+}
+
+.f-toast.is-accent .f-toast__close:hover {
+ background-color: rgba(from var(--f-color-accent) r g b / 15%);
+}
+
+.f-toast.is-success {
+ color: var(--f-color-success);
+ background-color: var(--f-color-success-weak);
+ border: 1px solid rgba(from var(--f-color-success) r g b / 25%);
+}
+
+.f-toast.is-success .f-toast__close:hover {
+ background-color: rgba(from var(--f-color-success) r g b / 15%);
+}
+
+.f-toast.is-neutral {
+ color: var(--f-color-neutral);
+ background-color: var(--f-color-neutral-weak);
+ border: 1px solid rgba(from var(--f-color-neutral) r g b / 25%);
+}
+
+.f-toast.is-neutral .f-toast__close:hover {
+ background-color: rgba(from var(--f-color-neutral) r g b / 15%);
}
-.f-toast.is-success {
- color: var(--f-color-success-text);
- background-color: var(--f-color-success);
+.f-toast.is-caution {
+ color: var(--f-color-caution);
+ background-color: var(--f-color-caution-weak);
+ border: 1px solid rgba(from var(--f-color-caution) r g b / 25%);
}
-.f-toast.is-neutral {
- color: var(--f-color-neutral-text);
- background-color: var(--f-color-neutral);
+.f-toast.is-caution .f-toast__close:hover {
+ background-color: rgba(from var(--f-color-caution) r g b / 15%);
}
-.f-toast.is-caution {
- color: var(--f-color-caution-text);
- background-color: var(--f-color-caution);
+.f-toast.is-warning {
+ color: var(--f-color-warning);
+ background-color: var(--f-color-warning-weak);
+ border: 1px solid rgba(from var(--f-color-warning) r g b / 25%);
}
-.f-toast.is-warning {
- color: var(--f-color-warning-text);
- background-color: var(--f-color-warning);
+.f-toast.is-warning .f-toast__close:hover {
+ background-color: rgba(from var(--f-color-warning) r g b / 15%);
}
-.f-toast.is-danger {
- color: var(--f-color-danger-text);
- background-color: var(--f-color-danger);
+.f-toast.is-danger {
+ color: var(--f-color-danger);
+ background-color: var(--f-color-danger-weak);
+ border: 1px solid rgba(from var(--f-color-danger) r g b / 25%);
}
-.f-toast.is-highlight {
- color: var(--f-color-highlight-text);
- background-color: var(--f-color-highlight);
+.f-toast.is-danger .f-toast__close:hover {
+ background-color: rgba(from var(--f-color-danger) r g b / 15%);
+}
+
+.f-toast.is-highlight {
+ color: var(--f-color-highlight);
+ background-color: var(--f-color-highlight-weak);
+ border: 1px solid rgba(from var(--f-color-highlight) r g b / 25%);
+}
+
+.f-toast.is-highlight .f-toast__close:hover {
+ background-color: rgba(from var(--f-color-highlight) r g b / 15%);
}
/* ********************************************* */
@@ -124,48 +198,102 @@
right: 50%;
bottom: 1rem;
transform: translateX(50%);
+ flex-direction: column-reverse;
}
.f-toast-container.is-bottom-right {
right: 1rem;
bottom: 1rem;
align-items: flex-end;
+ flex-direction: column-reverse;
}
.f-toast-container.is-bottom-left {
left: 1rem;
bottom: 1rem;
align-items: flex-start;
+ flex-direction: column-reverse;
}
.f-toast-container.is-top-center {
right: 50%;
top: 1rem;
transform: translateX(50%);
+ flex-direction: column;
}
.f-toast-container.is-top-right {
right: 1rem;
top: 1rem;
align-items: flex-end;
+ flex-direction: column;
}
.f-toast-container.is-top-left {
left: 1rem;
top: 1rem;
align-items: flex-start;
+ flex-direction: column;
+}
+
+.f-toast-container.is-top-center .f-toast + .f-toast,
+.f-toast-container.is-top-right .f-toast + .f-toast,
+.f-toast-container.is-top-left .f-toast + .f-toast {
+ margin-top: calc(var(--f-toast-stack-overlap) * -1);
+}
+
+.f-toast-container.is-bottom-center .f-toast + .f-toast,
+.f-toast-container.is-bottom-right .f-toast + .f-toast,
+.f-toast-container.is-bottom-left .f-toast + .f-toast {
+ margin-bottom: calc(var(--f-toast-stack-overlap) * -1);
+}
+
+.f-toast-container.is-top-center:hover .f-toast + .f-toast,
+.f-toast-container.is-top-right:hover .f-toast + .f-toast,
+.f-toast-container.is-top-left:hover .f-toast + .f-toast,
+.f-toast-container.is-top-center:focus-within .f-toast + .f-toast,
+.f-toast-container.is-top-right:focus-within .f-toast + .f-toast,
+.f-toast-container.is-top-left:focus-within .f-toast + .f-toast {
+ margin-top: var(--f-toast-stack-gap);
+}
+
+.f-toast-container.is-bottom-center:hover .f-toast + .f-toast,
+.f-toast-container.is-bottom-right:hover .f-toast + .f-toast,
+.f-toast-container.is-bottom-left:hover .f-toast + .f-toast,
+.f-toast-container.is-bottom-center:focus-within .f-toast + .f-toast,
+.f-toast-container.is-bottom-right:focus-within .f-toast + .f-toast,
+.f-toast-container.is-bottom-left:focus-within .f-toast + .f-toast {
+ margin-bottom: var(--f-toast-stack-gap);
+}
+
+.f-toast-container.is-bottom-center .f-toast,
+.f-toast-container.is-bottom-right .f-toast,
+.f-toast-container.is-bottom-left .f-toast {
+ transform-origin: center bottom;
+}
+
+.f-toast-container.is-top-center .f-toast,
+.f-toast-container.is-top-right .f-toast,
+.f-toast-container.is-top-left .f-toast {
+ transform-origin: center top;
}
/* messages position */
-.f-toast.is-bottom-center {}
+.f-toast.is-bottom-center {
+}
-.f-toast.is-bottom-right {}
+.f-toast.is-bottom-right {
+}
-.f-toast.is-bottom-left {}
+.f-toast.is-bottom-left {
+}
-.f-toast.is-top-center {}
+.f-toast.is-top-center {
+}
-.f-toast.is-top-right {}
+.f-toast.is-top-right {
+}
-.f-toast.is-top-left {}
+.f-toast.is-top-left {
+}
diff --git a/packages/core/src/toast/toast.stories.tsx b/packages/core/src/toast/toast.stories.tsx
index a4682536..17f891b4 100644
--- a/packages/core/src/toast/toast.stories.tsx
+++ b/packages/core/src/toast/toast.stories.tsx
@@ -105,11 +105,11 @@ export const Anchors = () => {
const handleClick = () => {
const anchors: ToastAnchor[] = [
'bottom-right',
- 'bottom-center',
- 'bottom-left',
- 'top-left',
- 'top-right',
- 'top-center',
+ // 'bottom-center',
+ // 'bottom-left',
+ // 'top-left',
+ // 'top-right',
+ // 'top-center',
]
showToast({
diff --git a/packages/core/src/toast/toast.tsx b/packages/core/src/toast/toast.tsx
index a76a2c94..f46adc40 100644
--- a/packages/core/src/toast/toast.tsx
+++ b/packages/core/src/toast/toast.tsx
@@ -1,27 +1,42 @@
-import React, { useEffect, useState } from 'react'
-import { View, dispatchPubsub, usePubsub, useTimeout } from '../'
+import React, { CSSProperties, useEffect, useRef, useState } from 'react'
+import { View, dispatchPubsub, usePubsub } from '../'
import { classNames, generateUEID, getActionClass } from '../helpers'
import { IconLib } from '../icon'
import { Text } from '../text/text'
import { CommonProps, CoreViewProps, Variant } from '../types'
+const DEFAULT_TOAST_ANCHOR: ToastAnchor = 'bottom-right'
+
+const createEmptyMessages = (): Record => ({
+ 'top-left': [],
+ 'top-right': [],
+ 'top-center': [],
+ 'bottom-left': [],
+ 'bottom-right': [],
+ 'bottom-center': [],
+})
+
+const getToastStackStyle = (index: number, total: number) => {
+ const visibleStackIndex = Math.min(index, 2)
+
+ return {
+ '--f-toast-stack-opacity': `${Math.max(0.72, 1 - visibleStackIndex * 0.12)}`,
+ '--f-toast-stack-scale': `${1 - visibleStackIndex * 0.035}`,
+ '--f-toast-stack-z-index': `${total - index}`,
+ } as CSSProperties
+}
+
const ToastProgress = (props: any) => {
- // Wait for the toast to appear
- // and React a bit quick on the draw
const timer = 100
- const delay = props.delay - timer
- const [mounted, setMounted] = useState(false)
-
- useEffect(() => {
- setTimeout(() => setMounted(true), timer)
- }, [])
+ const delay = Math.max(props.delay - timer, 0)
return (
)
@@ -41,6 +56,7 @@ export type ToastAnchor = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'to
export type ToastMessage = {
message?: string
prefix?: any
+ suffix?: any
variant?: Variant
showDismiss?: boolean
showProgress?: boolean
@@ -52,6 +68,7 @@ export type ToastMessage = {
}
export type ToastProps = {
+ paused?: boolean
onDismiss?: any
} & ToastMessage
@@ -59,13 +76,15 @@ export const Toast = (props: ToastProps) => {
const {
message,
prefix,
+ suffix,
variant = 'default',
showDismiss = true,
showProgress = false,
- anchor = 'right',
+ anchor = DEFAULT_TOAST_ANCHOR,
delay = 3000,
toastComponent,
ueid,
+ paused,
onDismiss,
containerProps,
} = props
@@ -77,7 +96,20 @@ export const Toast = (props: ToastProps) => {
[getActionClass(variant), getActionClass(anchor)]
)
- useTimeout(onDismiss, delay)
+ const remainingRef = useRef(delay)
+ const startRef = useRef(Date.now())
+
+ useEffect(() => {
+ if (paused) return
+ startRef.current = Date.now()
+ const id = setTimeout(() => {
+ if (onDismiss) onDismiss()
+ }, remainingRef.current)
+ return () => {
+ remainingRef.current -= Date.now() - startRef.current
+ clearTimeout(id)
+ }
+ }, [paused])
return (
{
{prefix && {prefix}
}
{message}
- {showProgress && }
+ {showProgress && (
+
+ )}
+ {suffix && {suffix({ onDismiss })}
}
+
{showDismiss && (