@descope/web-components-ui 1.0.365 → 1.0.367

package/src/theme/components/index.js

@@ -41,6 +41,9 @@ import * as icon from './icon';
 import * as codeSnippet from './codeSnippet';
 import * as radioGroup from './radioGroup/radioGroup';
 import * as radioButton from './radioGroup/radioButton';
+import * as list from './list/list';
+import * as listItem from './list/listItem';
+import * as appsList from './appsList';
 
 const components = {
   button,
@@ -87,6 +90,9 @@ const components = {
   codeSnippet,
   radioGroup,
   radioButton,
+  list,
+  listItem,
+  appsList,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/list/list.js

@@ -0,0 +1,56 @@
+import globals from '../../globals';
+import { getThemeRefs, createHelperVars, useVar } from '../../../helpers/themeHelpers';
+import { ListClass, componentName } from '../../../components/descope-list/ListClass';
+
+const globalRefs = getThemeRefs(globals);
+
+const compVars = ListClass.cssVarList;
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  { shadowColor: '#00000020' },
+  componentName
+);
+
+const { shadowColor } = helperRefs;
+
+const list = {
+  ...helperTheme,
+
+  [compVars.hostWidth]: '100%',
+  [compVars.backgroundColor]: globalRefs.colors.surface.main,
+  [compVars.fontFamily]: globalRefs.fonts.font1.family,
+  [compVars.borderColor]: globalRefs.colors.surface.light,
+  [compVars.borderStyle]: 'solid',
+  [compVars.borderWidth]: globalRefs.border.xs,
+  [compVars.borderRadius]: globalRefs.radius.sm,
+  [compVars.gap]: globalRefs.spacing.md,
+  [compVars.verticalPadding]: globalRefs.spacing.lg,
+  [compVars.horizontalPadding]: globalRefs.spacing.lg,
+  [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
+  [compVars.maxHeight]: '100%',
+  [compVars.hostDirection]: globalRefs.direction,
+  [compVars.minItemsWidth]: '150px',
+
+  _empty: {
+    [compVars.minHeight]: '150px',
+    [compVars.emptyStateTextColor]: globalRefs.colors.surface.dark,
+    [compVars.emptyStateTextFontFamily]: globalRefs.fonts.font1.family,
+  },
+
+  variant: {
+    tiles: {
+      [compVars.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar(
+        compVars.minItemsWidth
+      )}, 100%), 1fr))`,
+      [compVars.maxItemsWidth]: '200px',
+      [compVars.itemsHorizontalAlign]: 'center',
+    },
+  },
+};
+
+export default list;
+
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/src/theme/components/list/listItem.js

@@ -0,0 +1,41 @@
+import globals from '../../globals';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import { ListItemClass } from '../../../components/descope-list/ListItemClass';
+
+const globalRefs = getThemeRefs(globals);
+
+export const vars = ListItemClass.cssVarList;
+
+const list = {
+  [vars.backgroundColor]: globalRefs.colors.surface.main,
+  [vars.padding]: globalRefs.spacing.lg,
+  [vars.gap]: globalRefs.spacing.md,
+  [vars.borderStyle]: 'solid',
+  [vars.borderWidth]: globalRefs.border.xs,
+  [vars.borderColor]: globalRefs.colors.surface.main,
+  [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.cursor]: 'pointer',
+  [vars.alignItems]: 'center',
+  [vars.flexDirection]: 'row',
+  [vars.transition]: 'border-color 0.2s, background-color 0.2s',
+
+  variant: {
+    tile: {
+      [vars.alignItems]: 'flex-start',
+      [vars.flexDirection]: 'column',
+      [vars.borderColor]: globalRefs.colors.surface.light,
+    },
+  },
+
+  _hover: {
+    [vars.backgroundColor]: globalRefs.colors.surface.highlight,
+  },
+
+  _active: {
+    [vars.backgroundColor]: globalRefs.colors.surface.main,
+    [vars.borderColor]: globalRefs.colors.primary.light,
+    [vars.outline]: `1px solid ${globalRefs.colors.primary.light}`,
+  },
+};
+
+export default list;