update
This commit is contained in:
18
package.json
18
package.json
@@ -15,10 +15,10 @@
|
|||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@design.estate/dees-catalog": "^1.5.6",
|
"@design.estate/dees-catalog": "^1.10.10",
|
||||||
"@design.estate/dees-domtools": "^2.3.2",
|
"@design.estate/dees-domtools": "^2.3.3",
|
||||||
"@design.estate/dees-element": "^2.0.42",
|
"@design.estate/dees-element": "^2.1.2",
|
||||||
"@design.estate/dees-wcctools": "^1.0.90",
|
"@design.estate/dees-wcctools": "^1.1.1",
|
||||||
"@losslessone_private/loint-pubapi": "^1.0.14",
|
"@losslessone_private/loint-pubapi": "^1.0.14",
|
||||||
"@social.io/interfaces": "^1.2.1",
|
"@social.io/interfaces": "^1.2.1",
|
||||||
"rrweb": "2.0.0-alpha.4",
|
"rrweb": "2.0.0-alpha.4",
|
||||||
@@ -26,14 +26,14 @@
|
|||||||
"rrweb-snapshot": "2.0.0-alpha.4"
|
"rrweb-snapshot": "2.0.0-alpha.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@git.zone/tsbuild": "^2.3.2",
|
"@git.zone/tsbuild": "^2.6.4",
|
||||||
"@git.zone/tsbundle": "^2.2.5",
|
"@git.zone/tsbundle": "^2.5.1",
|
||||||
"@git.zone/tsrun": "^1.3.3",
|
"@git.zone/tsrun": "^1.3.3",
|
||||||
"@git.zone/tstest": "^1.0.96",
|
"@git.zone/tstest": "^2.3.1",
|
||||||
"@git.zone/tswatch": "^2.1.0",
|
"@git.zone/tswatch": "^2.1.2",
|
||||||
"@push.rocks/projectinfo": "^5.0.2",
|
"@push.rocks/projectinfo": "^5.0.2",
|
||||||
"@push.rocks/smartenv": "^5.0.12",
|
"@push.rocks/smartenv": "^5.0.12",
|
||||||
"@push.rocks/tapbundle": "^5.6.3",
|
"@push.rocks/tapbundle": "^6.0.3",
|
||||||
"@types/node": "^22.14.1"
|
"@types/node": "^22.14.1"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
|
|||||||
3610
pnpm-lock.yaml
generated
3610
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
|||||||
import { expect, expectAsync, tap, webhelpers } from '@push.rocks/tapbundle';
|
import { expect, expectAsync, tap, webhelpers } from '@git.zone/tstest/tapbundle';
|
||||||
|
|
||||||
import * as socialioCatalog from '../ts_web/index.js';
|
import * as socialioCatalog from '../ts_web/index.js';
|
||||||
|
|
||||||
|
|||||||
147
ts_web/elements/00colors.ts
Normal file
147
ts_web/elements/00colors.ts
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
import { cssManager } from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
export const colors = {
|
||||||
|
// Background colors
|
||||||
|
background: {
|
||||||
|
light: 'hsl(0 0% 100%)',
|
||||||
|
dark: 'hsl(0 0% 3.9%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Foreground colors
|
||||||
|
foreground: {
|
||||||
|
light: 'hsl(222.2 84% 4.9%)',
|
||||||
|
dark: 'hsl(210 40% 98%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Card colors
|
||||||
|
card: {
|
||||||
|
light: 'hsl(0 0% 100%)',
|
||||||
|
dark: 'hsl(222.2 84% 4.9%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
cardForeground: {
|
||||||
|
light: 'hsl(222.2 84% 4.9%)',
|
||||||
|
dark: 'hsl(210 40% 98%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Popover colors
|
||||||
|
popover: {
|
||||||
|
light: 'hsl(0 0% 100%)',
|
||||||
|
dark: 'hsl(222.2 84% 4.9%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
popoverForeground: {
|
||||||
|
light: 'hsl(222.2 84% 4.9%)',
|
||||||
|
dark: 'hsl(210 40% 98%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Primary colors
|
||||||
|
primary: {
|
||||||
|
light: 'hsl(222.2 47.4% 11.2%)',
|
||||||
|
dark: 'hsl(210 40% 98%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
primaryForeground: {
|
||||||
|
light: 'hsl(210 40% 98%)',
|
||||||
|
dark: 'hsl(222.2 47.4% 11.2%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Secondary colors
|
||||||
|
secondary: {
|
||||||
|
light: 'hsl(210 40% 96.1%)',
|
||||||
|
dark: 'hsl(217.2 32.6% 17.5%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
secondaryForeground: {
|
||||||
|
light: 'hsl(222.2 47.4% 11.2%)',
|
||||||
|
dark: 'hsl(210 40% 98%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Muted colors
|
||||||
|
muted: {
|
||||||
|
light: 'hsl(210 40% 96.1%)',
|
||||||
|
dark: 'hsl(217.2 32.6% 17.5%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
mutedForeground: {
|
||||||
|
light: 'hsl(215.4 16.3% 46.9%)',
|
||||||
|
dark: 'hsl(215 20.2% 65.1%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Accent colors
|
||||||
|
accent: {
|
||||||
|
light: 'hsl(210 40% 96.1%)',
|
||||||
|
dark: 'hsl(217.2 32.6% 17.5%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
accentForeground: {
|
||||||
|
light: 'hsl(222.2 47.4% 11.2%)',
|
||||||
|
dark: 'hsl(210 40% 98%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Destructive colors
|
||||||
|
destructive: {
|
||||||
|
light: 'hsl(0 84.2% 60.2%)',
|
||||||
|
dark: 'hsl(0 62.8% 30.6%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
destructiveForeground: {
|
||||||
|
light: 'hsl(210 40% 98%)',
|
||||||
|
dark: 'hsl(210 40% 98%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
border: {
|
||||||
|
light: 'hsl(214.3 31.8% 91.4%)',
|
||||||
|
dark: 'hsl(217.2 32.6% 17.5%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Input color
|
||||||
|
input: {
|
||||||
|
light: 'hsl(214.3 31.8% 91.4%)',
|
||||||
|
dark: 'hsl(217.2 32.6% 17.5%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Ring color
|
||||||
|
ring: {
|
||||||
|
light: 'hsl(222.2 84% 4.9%)',
|
||||||
|
dark: 'hsl(212.7 26.8% 83.9%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Chart colors
|
||||||
|
chart1: {
|
||||||
|
light: 'hsl(12 76% 61%)',
|
||||||
|
dark: 'hsl(12 76% 61%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
chart2: {
|
||||||
|
light: 'hsl(173 58% 39%)',
|
||||||
|
dark: 'hsl(173 58% 39%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
chart3: {
|
||||||
|
light: 'hsl(197 37% 24%)',
|
||||||
|
dark: 'hsl(197 37% 24%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
chart4: {
|
||||||
|
light: 'hsl(43 74% 66%)',
|
||||||
|
dark: 'hsl(43 74% 66%)'
|
||||||
|
},
|
||||||
|
|
||||||
|
chart5: {
|
||||||
|
light: 'hsl(27 87% 67%)',
|
||||||
|
dark: 'hsl(27 87% 67%)'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function to get color based on theme
|
||||||
|
export const getColor = (colorName: keyof typeof colors, isDark: boolean = false) => {
|
||||||
|
const color = colors[colorName];
|
||||||
|
return isDark ? color.dark : color.light;
|
||||||
|
};
|
||||||
|
|
||||||
|
// CSS helper for theme-aware colors
|
||||||
|
export const bdTheme = (colorName: keyof typeof colors) => {
|
||||||
|
return cssManager.bdTheme(colors[colorName].light, colors[colorName].dark);
|
||||||
|
};
|
||||||
145
ts_web/elements/00fonts.ts
Normal file
145
ts_web/elements/00fonts.ts
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
import { css } from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
// Font families matching shadcn design
|
||||||
|
export const fontFamilies = {
|
||||||
|
sans: `'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`,
|
||||||
|
mono: `'Geist Mono', 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace`
|
||||||
|
};
|
||||||
|
|
||||||
|
// Font sizes following shadcn scale
|
||||||
|
export const fontSizes = {
|
||||||
|
xs: '0.75rem', // 12px
|
||||||
|
sm: '0.875rem', // 14px
|
||||||
|
base: '1rem', // 16px
|
||||||
|
lg: '1.125rem', // 18px
|
||||||
|
xl: '1.25rem', // 20px
|
||||||
|
'2xl': '1.5rem', // 24px
|
||||||
|
'3xl': '1.875rem', // 30px
|
||||||
|
'4xl': '2.25rem', // 36px
|
||||||
|
'5xl': '3rem', // 48px
|
||||||
|
'6xl': '3.75rem', // 60px
|
||||||
|
'7xl': '4.5rem', // 72px
|
||||||
|
'8xl': '6rem', // 96px
|
||||||
|
'9xl': '8rem' // 128px
|
||||||
|
};
|
||||||
|
|
||||||
|
// Line heights
|
||||||
|
export const lineHeights = {
|
||||||
|
none: '1',
|
||||||
|
tight: '1.25',
|
||||||
|
snug: '1.375',
|
||||||
|
normal: '1.5',
|
||||||
|
relaxed: '1.625',
|
||||||
|
loose: '2'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Font weights
|
||||||
|
export const fontWeights = {
|
||||||
|
thin: '100',
|
||||||
|
extralight: '200',
|
||||||
|
light: '300',
|
||||||
|
normal: '400',
|
||||||
|
medium: '500',
|
||||||
|
semibold: '600',
|
||||||
|
bold: '700',
|
||||||
|
extrabold: '800',
|
||||||
|
black: '900'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Letter spacing
|
||||||
|
export const letterSpacing = {
|
||||||
|
tighter: '-0.05em',
|
||||||
|
tight: '-0.025em',
|
||||||
|
normal: '0em',
|
||||||
|
wide: '0.025em',
|
||||||
|
wider: '0.05em',
|
||||||
|
widest: '0.1em'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Typography presets matching shadcn components
|
||||||
|
export const typography = {
|
||||||
|
h1: css`
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
`,
|
||||||
|
|
||||||
|
h2: css`
|
||||||
|
font-size: 1.875rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
`,
|
||||||
|
|
||||||
|
h3: css`
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.375;
|
||||||
|
font-weight: 600;
|
||||||
|
`,
|
||||||
|
|
||||||
|
h4: css`
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.375;
|
||||||
|
font-weight: 600;
|
||||||
|
`,
|
||||||
|
|
||||||
|
body: css`
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
`,
|
||||||
|
|
||||||
|
bodyLarge: css`
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.625;
|
||||||
|
font-weight: 400;
|
||||||
|
`,
|
||||||
|
|
||||||
|
bodySmall: css`
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
`,
|
||||||
|
|
||||||
|
caption: css`
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
`,
|
||||||
|
|
||||||
|
code: css`
|
||||||
|
font-family: 'Geist Mono', 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
`,
|
||||||
|
|
||||||
|
button: css`
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
`,
|
||||||
|
|
||||||
|
input: css`
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
`
|
||||||
|
};
|
||||||
|
|
||||||
|
// Font loading CSS
|
||||||
|
export const fontLoadingStyles = css`
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Geist Sans';
|
||||||
|
src: url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Geist Mono';
|
||||||
|
src: url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
`;
|
||||||
197
ts_web/elements/00tokens.ts
Normal file
197
ts_web/elements/00tokens.ts
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
import { css, cssManager } from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
// Spacing scale
|
||||||
|
export const spacing = {
|
||||||
|
0: '0px',
|
||||||
|
px: '1px',
|
||||||
|
0.5: '0.125rem', // 2px
|
||||||
|
1: '0.25rem', // 4px
|
||||||
|
1.5: '0.375rem', // 6px
|
||||||
|
2: '0.5rem', // 8px
|
||||||
|
2.5: '0.625rem', // 10px
|
||||||
|
3: '0.75rem', // 12px
|
||||||
|
3.5: '0.875rem', // 14px
|
||||||
|
4: '1rem', // 16px
|
||||||
|
5: '1.25rem', // 20px
|
||||||
|
6: '1.5rem', // 24px
|
||||||
|
7: '1.75rem', // 28px
|
||||||
|
8: '2rem', // 32px
|
||||||
|
9: '2.25rem', // 36px
|
||||||
|
10: '2.5rem', // 40px
|
||||||
|
11: '2.75rem', // 44px
|
||||||
|
12: '3rem', // 48px
|
||||||
|
14: '3.5rem', // 56px
|
||||||
|
16: '4rem', // 64px
|
||||||
|
20: '5rem', // 80px
|
||||||
|
24: '6rem', // 96px
|
||||||
|
28: '7rem', // 112px
|
||||||
|
32: '8rem', // 128px
|
||||||
|
36: '9rem', // 144px
|
||||||
|
40: '10rem', // 160px
|
||||||
|
44: '11rem', // 176px
|
||||||
|
48: '12rem', // 192px
|
||||||
|
52: '13rem', // 208px
|
||||||
|
56: '14rem', // 224px
|
||||||
|
60: '15rem', // 240px
|
||||||
|
64: '16rem', // 256px
|
||||||
|
72: '18rem', // 288px
|
||||||
|
80: '20rem', // 320px
|
||||||
|
96: '24rem' // 384px
|
||||||
|
};
|
||||||
|
|
||||||
|
// Border radius
|
||||||
|
export const radius = {
|
||||||
|
none: '0px',
|
||||||
|
sm: '0.125rem', // 2px
|
||||||
|
DEFAULT: '0.375rem', // 6px - shadcn default
|
||||||
|
md: '0.375rem', // 6px
|
||||||
|
lg: '0.5rem', // 8px
|
||||||
|
xl: '0.75rem', // 12px
|
||||||
|
'2xl': '1rem', // 16px
|
||||||
|
'3xl': '1.5rem', // 24px
|
||||||
|
full: '9999px'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Box shadows
|
||||||
|
export const shadows = {
|
||||||
|
none: 'none',
|
||||||
|
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||||
|
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||||
|
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
||||||
|
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||||||
|
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
||||||
|
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
||||||
|
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
|
||||||
|
// Theme-aware shadows
|
||||||
|
card: cssManager.bdTheme(
|
||||||
|
'0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||||
|
'0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)'
|
||||||
|
),
|
||||||
|
dropdown: cssManager.bdTheme(
|
||||||
|
'0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||||||
|
'0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2)'
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
// Transitions
|
||||||
|
export const transitions = {
|
||||||
|
all: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
colors: 'color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
opacity: 'opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
shadow: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
transform: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
// Durations
|
||||||
|
fast: '150ms',
|
||||||
|
normal: '200ms',
|
||||||
|
slow: '300ms',
|
||||||
|
// Timing functions
|
||||||
|
ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
||||||
|
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
|
||||||
|
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Z-index scale
|
||||||
|
export const zIndex = {
|
||||||
|
0: 0,
|
||||||
|
10: 10,
|
||||||
|
20: 20,
|
||||||
|
30: 30,
|
||||||
|
40: 40,
|
||||||
|
50: 50,
|
||||||
|
dropdown: 1000,
|
||||||
|
sticky: 1020,
|
||||||
|
fixed: 1030,
|
||||||
|
modalBackdrop: 1040,
|
||||||
|
modal: 1050,
|
||||||
|
popover: 1060,
|
||||||
|
tooltip: 1070
|
||||||
|
};
|
||||||
|
|
||||||
|
// Breakpoints
|
||||||
|
export const breakpoints = {
|
||||||
|
sm: '640px',
|
||||||
|
md: '768px',
|
||||||
|
lg: '1024px',
|
||||||
|
xl: '1280px',
|
||||||
|
'2xl': '1536px'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Container sizes
|
||||||
|
export const containers = {
|
||||||
|
sm: '640px',
|
||||||
|
md: '768px',
|
||||||
|
lg: '1024px',
|
||||||
|
xl: '1280px',
|
||||||
|
'2xl': '1536px',
|
||||||
|
full: '100%'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Common component sizes
|
||||||
|
export const sizes = {
|
||||||
|
// Button/Input heights
|
||||||
|
sm: '2rem', // 32px
|
||||||
|
DEFAULT: '2.5rem', // 40px
|
||||||
|
lg: '3rem', // 48px
|
||||||
|
|
||||||
|
// Icon sizes
|
||||||
|
icon: {
|
||||||
|
sm: '1rem', // 16px
|
||||||
|
DEFAULT: '1.25rem', // 20px
|
||||||
|
lg: '1.5rem' // 24px
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Animation keyframes
|
||||||
|
export const animations = {
|
||||||
|
fadeIn: css`
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
slideIn: css`
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { transform: translateY(-10px); opacity: 0; }
|
||||||
|
to { transform: translateY(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
slideUp: css`
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { transform: translateY(10px); opacity: 0; }
|
||||||
|
to { transform: translateY(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
scaleIn: css`
|
||||||
|
@keyframes scaleIn {
|
||||||
|
from { transform: scale(0.95); opacity: 0; }
|
||||||
|
to { transform: scale(1); opacity: 1; }
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
spin: css`
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
`
|
||||||
|
};
|
||||||
|
|
||||||
|
// Focus ring styles
|
||||||
|
export const focusRing = css`
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
outline-offset: 2px;
|
||||||
|
&:focus-visible {
|
||||||
|
outline-color: ${cssManager.bdTheme('hsl(222.2 84% 4.9%)', 'hsl(212.7 26.8% 83.9%)')};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Disabled styles
|
||||||
|
export const disabled = css`
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
`;
|
||||||
@@ -1,3 +1,9 @@
|
|||||||
|
// Design tokens
|
||||||
|
export * from './00colors.js';
|
||||||
|
export * from './00fonts.js';
|
||||||
|
export * from './00tokens.js';
|
||||||
|
|
||||||
|
// Components
|
||||||
export * from './sio-fab.js';
|
export * from './sio-fab.js';
|
||||||
export * from './sio-combox.js';
|
export * from './sio-combox.js';
|
||||||
export * from './sio-subwidget-onboardme.js';
|
export * from './sio-subwidget-onboardme.js';
|
||||||
|
|||||||
Reference in New Issue
Block a user