diff --git a/components/lib/themes/nora/accordion/index.d.ts b/components/lib/themes/nora/accordion/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/accordion/index.js b/components/lib/themes/nora/accordion/index.js new file mode 100644 index 000000000..520b6cde1 --- /dev/null +++ b/components/lib/themes/nora/accordion/index.js @@ -0,0 +1,48 @@ +export default { + panel: { + borderWidth: '0 0 1px 0', + borderColor: '{content.border.color}' + }, + header: { + color: '{text.muted.color}', + hoverColor: '{text.color}', + activeColor: '{text.color}', + padding: '1.125rem', + fontWeight: '600', + borderRadius: '0', + borderWidth: '0', + borderColor: '{content.border.color}', + background: '{content.background}', + hoverBackground: '{content.background}', + activeBackground: '{content.background}', + activeHoverBackground: '{content.background}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + }, + toggleIcon: { + color: '{text.muted.color}', + hoverColor: '{text.color}', + activeColor: '{text.color}', + activeHoverColor: '{text.color}' + }, + first: { + topBorderRadius: '{content.border.radius}', + borderWidth: '0' + }, + last: { + bottomBorderRadius: '{content.border.radius}', + activeBottomBorderRadius: '0' + } + }, + content: { + borderWidth: '0', + borderColor: '{content.border.color}', + background: '{content.background}', + color: '{text.color}', + padding: '0 1.125rem 1.125rem 1.125rem' + } +}; diff --git a/components/lib/themes/nora/accordion/package.json b/components/lib/themes/nora/accordion/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/accordion/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/autocomplete/index.d.ts b/components/lib/themes/nora/autocomplete/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/autocomplete/index.js b/components/lib/themes/nora/autocomplete/index.js new file mode 100644 index 000000000..5fc70798f --- /dev/null +++ b/components/lib/themes/nora/autocomplete/index.js @@ -0,0 +1,96 @@ +export default { + inputMultiple: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + filledFocusBackground: '{form.field.filled.focus.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + placeholderColor: '{form.field.placeholder.color}', + shadow: '{form.field.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + overlay: { + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}' + }, + list: { + padding: '{list.padding}', + gap: '{list.gap}' + }, + option: { + focusBackground: '{list.option.focus.background}', + selectedBackground: '{list.option.selected.background}', + selectedFocusBackground: '{list.option.selected.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + selectedColor: '{list.option.selected.color}', + selectedFocusColor: '{list.option.selected.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' + }, + optionGroup: { + background: '{list.option.group.background}', + color: '{list.option.group.color}', + fontWeight: '{list.option.group.font.weight}', + padding: '{list.option.group.padding}' + }, + dropdown: { + width: '2.5rem', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.border.color}', + activeBorderColor: '{form.field.border.color}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + chip: { + borderRadius: '{border.radius.sm}' + }, + emptyMessage: { + padding: '{list.option.padding}' + }, + colorScheme: { + light: { + dropdown: { + background: '{surface.100}', + hoverBackground: '{surface.200}', + activeBackground: '{surface.300}', + color: '{surface.600}', + hoverColor: '{surface.700}', + activeColor: '{surface.800}' + } + }, + dark: { + dropdown: { + background: '{surface.800}', + hoverBackground: '{surface.700}', + activeBackground: '{surface.600}', + color: '{surface.300}', + hoverColor: '{surface.200}', + activeColor: '{surface.100}' + } + } + } +}; diff --git a/components/lib/themes/nora/autocomplete/package.json b/components/lib/themes/nora/autocomplete/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/autocomplete/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/avatar/index.d.ts b/components/lib/themes/nora/avatar/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/avatar/index.js b/components/lib/themes/nora/avatar/index.js new file mode 100644 index 000000000..7907a7bed --- /dev/null +++ b/components/lib/themes/nora/avatar/index.js @@ -0,0 +1,23 @@ +export default { + root: { + width: '2rem', + height: '2rem', + fontSize: '1rem', + background: '{content.border.color}', + borderRadius: '{content.border.radius}' + }, + group: { + borderColor: '{content.background}', + offset: '-1rem' + }, + lg: { + width: '3rem', + height: '3rem', + fontSize: '1.5rem' + }, + xl: { + width: '4rem', + height: '4rem', + fontSize: '2rem' + } +}; diff --git a/components/lib/themes/nora/avatar/package.json b/components/lib/themes/nora/avatar/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/avatar/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/badge/index.d.ts b/components/lib/themes/nora/badge/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/badge/index.js b/components/lib/themes/nora/badge/index.js new file mode 100644 index 000000000..cb09834bc --- /dev/null +++ b/components/lib/themes/nora/badge/index.js @@ -0,0 +1,85 @@ +export default { + root: { + borderRadius: '{border.radius.lg}', + padding: '0 0.5rem', + fontSize: '0.75rem', + fontWeight: '700', + minWidth: '1.5rem', + height: '1.5rem' + }, + dot: { + size: '0.5rem' + }, + lg: { + fontSize: '1.125rem', + minWidth: '2.25rem', + height: '2.25rem' + }, + xl: { + fontSize: '1.5rem', + minWidth: '3rem', + height: '3rem' + }, + colorScheme: { + light: { + primary: { + background: '{primary.color}', + color: '{primary.inverse.color}' + }, + secondary: { + background: '{surface.100}', + color: '{surface.600}' + }, + success: { + background: '{green.500}', + color: '{surface.0}' + }, + info: { + background: '{sky.500}', + color: '{surface.0}' + }, + warn: { + background: '{orange.500}', + color: '{surface.0}' + }, + danger: { + background: '{red.500}', + color: '{surface.0}' + }, + contrast: { + background: '{surface.950}', + color: '{surface.0}' + } + }, + dark: { + primary: { + background: 'color-mix(in srgb, {primary.500}, transparent 84%)', + color: '{primary.300}' + }, + secondary: { + background: '{surface.800}', + color: '{surface.300}' + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + color: '{green.300}' + }, + info: { + background: 'color-mix(in srgb, {sky.500}, transparent 84%)', + color: '{sky.300}' + }, + warn: { + background: 'color-mix(in srgb, {orange.500}, transparent 84%)', + color: '{orange.300}' + }, + danger: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + color: '{red.300}' + }, + contrast: { + background: '{surface.0}', + color: '{surface.950}' + } + } + } +}; diff --git a/components/lib/themes/nora/badge/package.json b/components/lib/themes/nora/badge/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/badge/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/blockui/index.d.ts b/components/lib/themes/nora/blockui/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/blockui/index.js b/components/lib/themes/nora/blockui/index.js new file mode 100644 index 000000000..1ed842dac --- /dev/null +++ b/components/lib/themes/nora/blockui/index.js @@ -0,0 +1,5 @@ +export default { + root: { + borderRadius: '{content.border.radius}' + } +}; diff --git a/components/lib/themes/nora/blockui/package.json b/components/lib/themes/nora/blockui/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/blockui/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/breadcrumb/index.d.ts b/components/lib/themes/nora/breadcrumb/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/breadcrumb/index.js b/components/lib/themes/nora/breadcrumb/index.js new file mode 100644 index 000000000..fb8cb628a --- /dev/null +++ b/components/lib/themes/nora/breadcrumb/index.js @@ -0,0 +1,23 @@ +export default { + root: { + padding: '1rem', + background: '{content.background}', + gap: '0.5rem' + }, + item: { + color: '{text.muted.color}', + hoverColor: '{text.color}', + iconColor: '{navigation.item.icon.color}', + borderRadius: '{content.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + separator: { + color: '{navigation.item.icon.color}' + } +}; diff --git a/components/lib/themes/nora/breadcrumb/package.json b/components/lib/themes/nora/breadcrumb/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/breadcrumb/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/button/index.d.ts b/components/lib/themes/nora/button/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/button/index.js b/components/lib/themes/nora/button/index.js new file mode 100644 index 000000000..c882910e3 --- /dev/null +++ b/components/lib/themes/nora/button/index.js @@ -0,0 +1,486 @@ +export default { + root: { + borderRadius: '{form.field.border.radius}', + roundedBorderRadius: '2rem', + gap: '0.5rem', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + iconOnlyWidth: '2.5rem', + sm: { + fontSize: '0.875rem', + paddingX: '0.625rem', + paddingY: '0.375rem' + }, + lg: { + fontSize: '1.125rem', + paddingX: '0.875rem', + paddingY: '0.625rem' + }, + label: { + fontWeight: '500' + }, + raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + offset: '{focus.ring.offset}' + } + }, + colorScheme: { + light: { + root: { + primary: { + background: '{primary.color}', + hoverBackground: '{primary.hover.color}', + activeBackground: '{primary.active.color}', + borderColor: '{primary.color}', + hoverBorderColor: '{primary.hover.color}', + activeBorderColor: '{primary.active.color}', + color: '{primary.inverseColor}', + hoverColor: '{primary.inverseColor}', + activeColor: '{primary.inverseColor}', + focusRing: { + color: '{primary.color}', + shadow: 'none' + } + }, + secondary: { + background: '{surface.100}', + hoverBackground: '{surface.200}', + activeBackground: '{surface.300}', + borderColor: '{surface.100}', + hoverBorderColor: '{surface.200}', + activeBorderColor: '{surface.300}', + color: '{surface.600}', + hoverColor: '{surface.700}', + activeColor: '{surface.800}', + focusRing: { + color: '{surface.600}', + shadow: 'none' + } + }, + info: { + background: '{sky.500}', + hoverBackground: '{sky.600}', + activeBackground: '{sky.700}', + borderColor: '{sky.500}', + hoverBorderColor: '{sky.600}', + activeBorderColor: '{sky.700}', + color: '#ffffff', + hoverColor: '#ffffff', + activeColor: '#ffffff', + focusRing: { + color: '{sky.500}', + shadow: 'none' + } + }, + success: { + background: '{green.500}', + hoverBackground: '{green.600}', + activeBackground: '{green.700}', + borderColor: '{green.500}', + hoverBorderColor: '{green.600}', + activeBorderColor: '{green.700}', + color: '#ffffff', + hoverColor: '#ffffff', + activeColor: '#ffffff', + focusRing: { + color: '{green.500}', + shadow: 'none' + } + }, + warn: { + background: '{orange.500}', + hoverBackground: '{orange.600}', + activeBackground: '{orange.700}', + borderColor: '{orange.500}', + hoverBorderColor: '{orange.600}', + activeBorderColor: '{orange.700}', + color: '#ffffff', + hoverColor: '#ffffff', + activeColor: '#ffffff', + focusRing: { + color: '{orange.500}', + shadow: 'none' + } + }, + help: { + background: '{purple.500}', + hoverBackground: '{purple.600}', + activeBackground: '{purple.700}', + borderColor: '{purple.500}', + hoverBorderColor: '{purple.600}', + activeBorderColor: '{purple.700}', + color: '#ffffff', + hoverColor: '#ffffff', + activeColor: '#ffffff', + focusRing: { + color: '{purple.500}', + shadow: 'none' + } + }, + danger: { + background: '{red.500}', + hoverBackground: '{red.600}', + activeBackground: '{red.700}', + borderColor: '{red.500}', + hoverBorderColor: '{red.600}', + activeBorderColor: '{red.700}', + color: '#ffffff', + hoverColor: '#ffffff', + activeColor: '#ffffff', + focusRing: { + color: '{red.500}', + shadow: 'none' + } + }, + contrast: { + background: '{surface.950}', + hoverBackground: '{surface.900}', + activeBackground: '{surface.800}', + borderColor: '{surface.950}', + hoverBorderColor: '{surface.900}', + activeBorderColor: '{surface.800}', + color: '{surface.0}', + hoverColor: '{surface.0}', + activeColor: '{surface.0}', + focusRing: { + color: '{surface.950}', + shadow: 'none' + } + } + }, + outlined: { + primary: { + hoverBackground: '{primary.50}', + activeBackground: '{primary.100}', + borderColor: '{primary.200}', + color: '{primary.color}' + }, + secondary: { + hoverBackground: '{surface.50}', + activeBackground: '{surface.100}', + borderColor: '{surface.200}', + color: '{surface.500}' + }, + success: { + hoverBackground: '{green.50}', + activeBackground: '{green.100}', + borderColor: '{green.200}', + color: '{green.500}' + }, + info: { + hoverBackground: '{sky.50}', + activeBackground: '{sky.100}', + borderColor: '{sky.200}', + color: '{sky.500}' + }, + warn: { + hoverBackground: '{orange.50}', + activeBackground: '{orange.100}', + borderColor: '{orange.200}', + color: '{orange.500}' + }, + help: { + hoverBackground: '{purple.50}', + activeBackground: '{purple.100}', + borderColor: '{purple.200}', + color: '{purple.500}' + }, + danger: { + hoverBackground: '{red.50}', + activeBackground: '{red.100}', + borderColor: '{red.200}', + color: '{red.500}' + }, + contrast: { + hoverBackground: '{surface.50}', + activeBackground: '{surface.100}', + borderColor: '{surface.700}', + color: '{surface.950}' + }, + plain: { + hoverBackground: '{surface.50}', + activeBackground: '{surface.100}', + borderColor: '{surface.200}', + color: '{surface.700}' + } + }, + text: { + primary: { + hoverBackground: '{primary.50}', + activeBackground: '{primary.100}', + color: '{primary.color}' + }, + secondary: { + hoverBackground: '{surface.50}', + activeBackground: '{surface.100}', + color: '{surface.500}' + }, + success: { + hoverBackground: '{green.50}', + activeBackground: '{green.100}', + color: '{green.500}' + }, + info: { + hoverBackground: '{sky.50}', + activeBackground: '{sky.100}', + color: '{sky.500}' + }, + warn: { + hoverBackground: '{orange.50}', + activeBackground: '{orange.100}', + color: '{orange.500}' + }, + help: { + hoverBackground: '{purple.50}', + activeBackground: '{purple.100}', + color: '{purple.600}' + }, + danger: { + hoverBackground: '{red.50}', + activeBackground: '{red.100}', + color: '{red.500}' + }, + plain: { + hoverBackground: '{surface.50}', + activeBackground: '{surface.100}', + color: '{surface.700}' + } + }, + link: { + color: '{primary.color}', + hoverColor: '{primary.color}', + activeColor: '{primary.color}' + } + }, + dark: { + root: { + primary: { + background: '{primary.color}', + hoverBackground: '{primary.hover.color}', + activeBackground: '{primary.active.color}', + borderColor: '{primary.color}', + hoverBorderColor: '{primary.hover.color}', + activeBorderColor: '{primary.active.color}', + color: '{primary.inverseColor}', + hoverColor: '{primary.inverseColor}', + activeColor: '{primary.inverseColor}', + focusRing: { + color: '{primary.color}', + shadow: 'none' + } + }, + secondary: { + background: '{surface.800}', + hoverBackground: '{surface.700}', + activeBackground: '{surface.600}', + borderColor: '{surface.800}', + hoverBorderColor: '{surface.700}', + activeBorderColor: '{surface.600}', + color: '{surface.300}', + hoverColor: '{surface.200}', + activeColor: '{surface.100}', + focusRing: { + color: '{surface.300}', + shadow: 'none' + } + }, + info: { + background: '{sky.400}', + hoverBackground: '{sky.300}', + activeBackground: '{sky.200}', + borderColor: '{sky.400}', + hoverBorderColor: '{sky.300}', + activeBorderColor: '{sky.200}', + color: '{sky.950}', + hoverColor: '{sky.950}', + activeColor: '{sky.950}', + focusRing: { + color: '{sky.400}', + shadow: 'none' + } + }, + success: { + background: '{green.400}', + hoverBackground: '{green.300}', + activeBackground: '{green.200}', + borderColor: '{green.400}', + hoverBorderColor: '{green.300}', + activeBorderColor: '{green.200}', + color: '{green.950}', + hoverColor: '{green.950}', + activeColor: '{green.950}', + activeColor: '{green.950}', + focusRing: { + color: '{green.400}', + shadow: 'none' + } + }, + warn: { + background: '{orange.400}', + hoverBackground: '{orange.300}', + activeBackground: '{orange.200}', + borderColor: '{orange.400}', + hoverBorderColor: '{orange.300}', + activeBorderColor: '{orange.200}', + color: '{orange.950}', + hoverColor: '{orange.950}', + activeColor: '{orange.950}', + focusRing: { + color: '{orange.400}', + shadow: 'none' + } + }, + help: { + background: '{purple.400}', + hoverBackground: '{purple.300}', + activeBackground: '{purple.200}', + borderColor: '{purple.400}', + hoverBorderColor: '{purple.300}', + activeBorderColor: '{purple.200}', + color: '{purple.950}', + hoverColor: '{purple.950}', + activeColor: '{purple.950}', + focusRing: { + color: '{purple.400}', + shadow: 'none' + } + }, + danger: { + background: '{red.400}', + hoverBackground: '{red.300}', + activeBackground: '{red.200}', + borderColor: '{red.400}', + hoverBorderColor: '{red.300}', + activeBorderColor: '{red.200}', + color: '{red.950}', + hoverColor: '{red.950}', + activeColor: '{red.950}', + focusRing: { + color: '{red.400}', + shadow: 'none' + } + }, + contrast: { + background: '{surface.0}', + hoverBackground: '{surface.100}', + activeBackground: '{surface.200}', + borderColor: '{surface.0}', + hoverBorderColor: '{surface.100}', + activeBorderColor: '{surface.200}', + color: '{surface.950}', + hoverColor: '{surface.950}', + activeColor: '{surface.950}', + focusRing: { + color: '{surface.0}', + shadow: 'none' + } + } + }, + outlined: { + primary: { + hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)', + borderColor: '{primary.900}', + color: '{primary.color}' + }, + secondary: { + hoverBackground: 'rgba(255,255,255,0.04)', + activeBackground: 'rgba(255,255,255,0.16)', + borderColor: '{surface.700}', + color: '{surface.400}' + }, + success: { + hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)', + borderColor: '{green.900}', + color: '{green.400}' + }, + info: { + hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)', + borderColor: '{sky.900}', + color: '{sky.400}' + }, + warn: { + hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)', + borderColor: '{orange.900}', + color: '{orange.400}' + }, + help: { + hoverBackground: 'color-mix(in srgb, {help.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {help.400}, transparent 84%)', + borderColor: '{purple.900}', + color: '{purple.400}' + }, + danger: { + hoverBackground: 'color-mix(in srgb, {danger.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {danger.400}, transparent 84%)', + borderColor: '{red.900}', + color: '{red.400}' + }, + contrast: { + hoverBackground: '{surface.800}', + activeBackground: '{surface.700}', + borderColor: '{surface.500}', + color: '{surface.0}' + }, + plain: { + hoverBackground: '{surface.800}', + activeBackground: '{surface.700}', + borderColor: '{surface.600}', + color: '{surface.0}' + } + }, + text: { + primary: { + hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)', + color: '{primary.color}' + }, + secondary: { + hoverBackground: '{surface.800}', + activeBackground: '{surface.700}', + color: '{surface.400}' + }, + success: { + hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)', + color: '{green.400}' + }, + info: { + hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)', + color: '{sky.400}' + }, + warn: { + hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)', + color: '{orange.400}' + }, + help: { + hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)', + color: '{purple.400}' + }, + danger: { + hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)', + activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)', + color: '{red.400}' + }, + plain: { + hoverBackground: '{surface.800}', + activeBackground: '{surface.700}', + color: '{surface.0}' + } + }, + link: { + color: '{primary.color}', + hoverColor: '{primary.color}', + activeColor: '{primary.color}' + } + } + } +}; diff --git a/components/lib/themes/nora/button/package.json b/components/lib/themes/nora/button/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/button/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/buttongroup/index.d.ts b/components/lib/themes/nora/buttongroup/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/buttongroup/index.js b/components/lib/themes/nora/buttongroup/index.js new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/components/lib/themes/nora/buttongroup/index.js @@ -0,0 +1 @@ +export default {}; diff --git a/components/lib/themes/nora/buttongroup/package.json b/components/lib/themes/nora/buttongroup/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/buttongroup/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/card/index.d.ts b/components/lib/themes/nora/card/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/card/index.js b/components/lib/themes/nora/card/index.js new file mode 100644 index 000000000..8cd21a927 --- /dev/null +++ b/components/lib/themes/nora/card/index.js @@ -0,0 +1,22 @@ +export default { + root: { + background: '{content.background}', + borderRadius: '{border.radius.xl}', + color: '{content.color}', + shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)' + }, + body: { + padding: '1.25rem', + gap: '0.5rem' + }, + caption: { + gap: '0.5rem' + }, + title: { + fontSize: '1.25rem', + fontWeight: '500' + }, + subtitle: { + color: '{text.muted.color}' + } +}; diff --git a/components/lib/themes/nora/card/package.json b/components/lib/themes/nora/card/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/card/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/carousel/index.d.ts b/components/lib/themes/nora/carousel/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/carousel/index.js b/components/lib/themes/nora/carousel/index.js new file mode 100644 index 000000000..e0d05b7af --- /dev/null +++ b/components/lib/themes/nora/carousel/index.js @@ -0,0 +1,36 @@ +export default { + root: { + indicatorList: { + padding: '1rem', + gap: '0.5rem' + }, + indicator: { + width: '2rem', + height: '0.5rem', + borderRadius: '{content.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + } + }, + colorScheme: { + light: { + indicator: { + background: '{surface.200}', + hoverBackground: '{surface.300}', + activeBackground: '{primary.color}' + } + }, + dark: { + indicator: { + background: '{surface.700}', + hoverBackground: '{surface.600}', + activeBackground: '{primary.color}' + } + } + } +}; diff --git a/components/lib/themes/nora/carousel/package.json b/components/lib/themes/nora/carousel/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/carousel/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/cascadeselect/index.d.ts b/components/lib/themes/nora/cascadeselect/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/cascadeselect/index.js b/components/lib/themes/nora/cascadeselect/index.js new file mode 100644 index 000000000..322f258b8 --- /dev/null +++ b/components/lib/themes/nora/cascadeselect/index.js @@ -0,0 +1,57 @@ +export default { + root: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + filledFocusBackground: '{form.field.filled.focus.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + placeholderColor: '{form.field.placeholder.color}', + shadow: '{form.field.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + dropdown: { + width: '2.5rem', + color: '{form.field.icon.color}' + }, + overlay: { + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}' + }, + list: { + padding: '{list.padding}', + gap: '{list.gap}' + }, + option: { + focusBackground: '{list.option.focus.background}', + selectedBackground: '{list.option.selected.background}', + selectedFocusBackground: '{list.option.selected.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + selectedColor: '{list.option.selected.color}', + selectedFocusColor: '{list.option.selected.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}', + icon: { + color: '{list.option.icon.color}', + focusColor: '{list.option.icon.focus.color}', + size: '0.875rem' + } + } +}; diff --git a/components/lib/themes/nora/cascadeselect/package.json b/components/lib/themes/nora/cascadeselect/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/cascadeselect/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/checkbox/index.d.ts b/components/lib/themes/nora/checkbox/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/checkbox/index.js b/components/lib/themes/nora/checkbox/index.js new file mode 100644 index 000000000..cb273d396 --- /dev/null +++ b/components/lib/themes/nora/checkbox/index.js @@ -0,0 +1,34 @@ +export default { + root: { + borderRadius: '{border.radius.sm}', + width: '1.25rem', + height: '1.25rem', + background: '{form.field.background}', + checkedBackground: '{primary.color}', + checkedHoverBackground: '{primary.hover.color}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.border.color}', + checkedBorderColor: '{primary.color}', + checkedHoverBorderColor: '{primary.hover.color}', + checkedFocusBorderColor: '{primary.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + shadow: '{form.field.shadow}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + icon: { + size: '0.875rem', + color: '{form.field.color}', + checkedColor: '{primary.inverse.color}', + checkedHoverColor: '{primary.inverse.color}', + disabledColor: '{form.field.disabled.color}' + } +}; diff --git a/components/lib/themes/nora/checkbox/package.json b/components/lib/themes/nora/checkbox/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/checkbox/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/chip/index.d.ts b/components/lib/themes/nora/chip/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/chip/index.js b/components/lib/themes/nora/chip/index.js new file mode 100644 index 000000000..e3a382a69 --- /dev/null +++ b/components/lib/themes/nora/chip/index.js @@ -0,0 +1,50 @@ +export default { + root: { + borderRadius: '16px', + paddingX: '0.75rem', + paddingY: '0.5rem', + gap: '0.5rem' + }, + image: { + width: '2rem', + height: '2rem' + }, + icon: { + size: '1rem' + }, + removeIcon: { + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + colorScheme: { + light: { + root: { + background: '{surface.100}', + color: '{surface.800}' + }, + icon: { + color: '{surface.800}' + }, + removeIcon: { + color: '{surface.800}' + } + }, + dark: { + root: { + background: '{surface.700}', + color: '{surface.0}' + }, + icon: { + color: '{surface.0}' + }, + removeIcon: { + color: '{surfaec.0}' + } + } + } +}; diff --git a/components/lib/themes/nora/chip/package.json b/components/lib/themes/nora/chip/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/chip/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/colorpicker/index.d.ts b/components/lib/themes/nora/colorpicker/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/colorpicker/index.js b/components/lib/themes/nora/colorpicker/index.js new file mode 100644 index 000000000..776b8e9d6 --- /dev/null +++ b/components/lib/themes/nora/colorpicker/index.js @@ -0,0 +1,38 @@ +export default { + preview: { + width: '1.5rem', + height: '1.5rem', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + panel: { + shadow: '{overlay.popover.shadow}', + borderRadius: '{overlay.popover.borderRadius}' + }, + colorScheme: { + light: { + panel: { + background: '{surface.800}', + borderColor: '{surface.900}' + }, + handle: { + color: '{surface.0}' + } + }, + dark: { + panel: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + handle: { + color: '{surface.0}' + } + } + } +}; diff --git a/components/lib/themes/nora/colorpicker/package.json b/components/lib/themes/nora/colorpicker/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/colorpicker/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/confirmdialog/index.d.ts b/components/lib/themes/nora/confirmdialog/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/confirmdialog/index.js b/components/lib/themes/nora/confirmdialog/index.js new file mode 100644 index 000000000..1450b9f6e --- /dev/null +++ b/components/lib/themes/nora/confirmdialog/index.js @@ -0,0 +1,9 @@ +export default { + icon: { + size: '2rem', + color: '{overlay.modal.color}' + }, + content: { + gap: '1rem' + } +}; diff --git a/components/lib/themes/nora/confirmdialog/package.json b/components/lib/themes/nora/confirmdialog/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/confirmdialog/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/confirmpopup/index.d.ts b/components/lib/themes/nora/confirmpopup/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/confirmpopup/index.js b/components/lib/themes/nora/confirmpopup/index.js new file mode 100644 index 000000000..bfd9c738d --- /dev/null +++ b/components/lib/themes/nora/confirmpopup/index.js @@ -0,0 +1,24 @@ +export default { + root: { + background: '{overlay.popover.background}', + borderColor: '{overlay.popover.border.color}', + color: '{overlay.popover.color}', + borderRadius: '{overlay.popover.border.radius}', + padding: '{overlay.popover.padding}', + shadow: '{overlay.popover.shadow}', + gutter: '10px' + }, + content: { + padding: '{overlay.popover.padding}', + gap: '1rem' + }, + icon: { + size: '1.5rem', + color: '{overlay.popover.color}' + }, + footer: { + gap: '0.5rem', + padding: '0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}' + }, + arrowOffset: '1.25rem' +}; diff --git a/components/lib/themes/nora/confirmpopup/package.json b/components/lib/themes/nora/confirmpopup/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/confirmpopup/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/contextmenu/index.d.ts b/components/lib/themes/nora/contextmenu/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/contextmenu/index.js b/components/lib/themes/nora/contextmenu/index.js new file mode 100644 index 000000000..d00b6d0db --- /dev/null +++ b/components/lib/themes/nora/contextmenu/index.js @@ -0,0 +1,37 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}', + borderRadius: '{content.border.radius}', + shadow: '{overlay.navigation.shadow}' + }, + list: { + padding: '{navigation.list.padding}', + gap: '{navigation.list.gap}' + }, + item: { + focusBackground: '{navigation.item.focus.background}', + activeBackground: '{navigation.item.active.background}', + color: '{navigation.item.color}', + focusColor: '{navigation.item.focus.color}', + activeColor: '{navigation.item.active.color}', + padding: '{navigation.item.padding}', + borderRadius: '{navigation.item.border.radius}', + gap: '{navigation.item.gap}', + icon: { + color: '{navigation.item.icon.color}', + focusColor: '{navigation.item.icon.focus.color}', + activeColor: '{navigation.item.icon.active.color}' + } + }, + submenuIcon: { + size: '{navigation.submenu.icon.size}', + color: '{navigation.submenu.icon.color}', + focusColor: '{navigation.submenu.icon.focus.color}', + activeColor: '{navigation.submenu.icon.active.color}' + }, + separator: { + borderColor: '{content.border.color}' + } +}; diff --git a/components/lib/themes/nora/contextmenu/package.json b/components/lib/themes/nora/contextmenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/contextmenu/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/datatable/index.d.ts b/components/lib/themes/nora/datatable/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/datatable/index.js b/components/lib/themes/nora/datatable/index.js new file mode 100644 index 000000000..bef805d31 --- /dev/null +++ b/components/lib/themes/nora/datatable/index.js @@ -0,0 +1,162 @@ +export default { + header: { + background: '{content.background}', + borderColor: '{datatable.border.color}', + color: '{content.color}', + borderWidth: '0 0 1px 0', + padding: '0.75rem 1rem', + fontWeight: '600' + }, + headerCell: { + background: '{content.background}', + hoverBackground: '{content.hover.background}', + selectedBackground: '{highlight.background}', + borderColor: '{datatable.border.color}', + color: '{content.color}', + hoverColor: '{content.hover.color}', + selectedColor: '{highlight.color}', + gap: '0.5rem', + padding: '0.75rem 1rem', + fontWeight: '600', + align: 'left', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '-1px', + shadow: '{focus.ring.shadow}' + } + }, + row: { + background: '{content.background}', + hoverBackground: '{content.hover.background}', + selectedBackground: '{highlight.background}', + color: '{content.color}', + hoverColor: '{content.hover.color}', + selectedColor: '{highlight.color}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '-1px', + shadow: '{focus.ring.shadow}' + } + }, + bodyCell: { + borderColor: '{datatable.border.color}', + padding: '0.75rem 1rem' + }, + footerCell: { + background: '{content.background}', + borderColor: '{datatable.border.color}', + color: '{content.color}', + padding: '0.75rem 1rem', + fontWeight: '600' + }, + footer: { + background: '{content.background}', + borderColor: '{datatable.border.color}', + color: '{content.color}' + }, + dropPointColor: '{primary.color}', + columnResizerWidth: '0.5rem', + resizeIndicator: { + width: '1px', + color: '{primary.color}' + }, + sortIcon: { + color: '{text.muted.color}', + hoverColor: '{text.hover.muted.color}' + }, + loadingIcon: { + size: '2rem' + }, + rowToggleButton: { + hoverBackground: '{content.hover.background}', + selectedHoverBackground: '{content.background}', + color: '{text.muted.color}', + hoverColor: '{text.color}', + selectedHoverColor: '{primary.color}', + size: '1.75rem', + borderRadius: '50%', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + filter: { + inlineGap: '0.5rem', + overlaySelect: { + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}' + }, + overlayPopover: { + background: '{overlay.popover.background}', + borderColor: '{overlay.popover.border.color}', + borderRadius: '{overlay.popover.border.radius}', + color: '{overlay.popover.color}', + shadow: '{overlay.popover.shadow}', + padding: '{overlay.popover.padding}', + gap: '0.5rem' + }, + rule: { + borderColor: '{content.border.color}' + }, + constraintList: { + padding: '{list.padding}', + gap: '{list.gap}' + }, + constraint: { + focusBackground: '{list.option.focus.background}', + selectedBackground: '{list.option.selected.background}', + selectedFocusBackground: '{list.option.selected.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + selectedColor: '{list.option.selected.color}', + selectedFocusColor: '{list.option.selected.focus.color}', + separator: { + borderColor: '{content.border.color}' + }, + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' + } + }, + paginatorTop: { + borderColor: '{content.border.color}', + borderWidth: '0 0 1px 0' + }, + paginatorBottom: { + borderColor: '{content.border.color}', + borderWidth: '0 0 1px 0' + }, + colorScheme: { + light: { + root: { + borderColor: '{content.border.color}' + }, + row: { + stripedBackground: '{surface.50}' + }, + bodyCell: { + selectedBorderColor: '{primary.100}' + } + }, + dark: { + root: { + borderColor: '{surface.800}' + }, + row: { + stripedBackground: '{surface.950}' + }, + bodyCell: { + selectedBorderColor: '{primary.900}' + } + } + } +}; diff --git a/components/lib/themes/nora/datatable/package.json b/components/lib/themes/nora/datatable/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/datatable/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/dataview/index.d.ts b/components/lib/themes/nora/dataview/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/dataview/index.js b/components/lib/themes/nora/dataview/index.js new file mode 100644 index 000000000..3dd897181 --- /dev/null +++ b/components/lib/themes/nora/dataview/index.js @@ -0,0 +1,40 @@ +export default { + root: { + borderColor: 'transparent', + borderWidth: '0', + borderRadius: '0', + padding: '0' + }, + header: { + background: '{content.background}', + color: '{content.color}', + borderColor: '{content.border.color}', + borderWidth: '0 0 1px 0', + padding: '0.75rem 1rem', + borderRadius: '0' + }, + content: { + background: '{content.background}', + color: '{content.color}', + borderColor: 'transparent', + borderWidth: '0', + padding: '0', + borderRadius: '0' + }, + footer: { + background: '{content.background}', + color: '{content.color}', + borderColor: '{content.border.color}', + borderWidth: '1px 0 0 0', + padding: '0.75rem 1rem', + borderRadius: '0' + }, + paginatorTop: { + borderColor: '{content.border.color}', + borderWidth: '0 0 1px 0' + }, + paginatorBottom: { + borderColor: '{content.border.color}', + borderWidth: '1px 0 0 0' + } +}; diff --git a/components/lib/themes/nora/dataview/package.json b/components/lib/themes/nora/dataview/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/dataview/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/datepicker/index.d.ts b/components/lib/themes/nora/datepicker/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/datepicker/index.js b/components/lib/themes/nora/datepicker/index.js new file mode 100644 index 000000000..376efbf12 --- /dev/null +++ b/components/lib/themes/nora/datepicker/index.js @@ -0,0 +1,133 @@ +export default { + panel: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}', + borderRadius: '{content.border.radius}', + shadow: '{overlay.popover.shadow}', + padding: '{overlay.popover.padding}' + }, + header: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}', + padding: '0 0 0.5rem 0', + fontWeight: '500', + gap: '0.5rem' + }, + title: { + gap: '0.5rem', + fontWeight: '500' + }, + dropdown: { + width: '2.5rem', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.border.color}', + activeBorderColor: '{form.field.border.color}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + inputIcon: { + color: '{form.field.icon.color}' + }, + viewMonth: { + hoverBackground: '{content.hover.background}', + color: '{content.color}', + hoverColor: '{content.hover.color}', + padding: '0.25rem' + }, + viewYear: { + hoverBackground: '{content.hover.background}', + color: '{content.color}', + hoverColor: '{content.hover.color}', + padding: '0.25rem' + }, + group: { + borderColor: '{content.border.color}', + gap: '{overlay.popover.padding}' + }, + dayView: { + margin: '0.5rem 0 0 0' + }, + weekDay: { + padding: '0.25rem', + fontWeight: '500', + color: '{content.color}' + }, + date: { + hoverBackground: '{content.hover.background}', + selectedBackground: '{highlight.background}', + color: '{content.color}', + hoverColor: '{content.hover.color}', + selectedColor: '{highlight.color}', + width: '2rem', + height: '2rem', + borderRadius: '50%', + padding: '0.25rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + monthView: { + margin: '0.5rem 0 0 0' + }, + month: { + borderRadius: '{content.border.radius}' + }, + yearView: { + margin: '0.5rem 0 0 0' + }, + year: { + borderRadius: '{content.border.radius}' + }, + buttonbar: { + padding: '0.5rem 0 0 0', + borderColor: '{content.border.color}' + }, + timePicker: { + padding: '0.5rem 0 0 0', + borderColor: '{content.border.color}', + gap: '0.5rem', + buttonGap: '0.25rem' + }, + colorScheme: { + light: { + dropdown: { + background: '{surface.100}', + hoverBackground: '{surface.200}', + activeBackground: '{surface.300}', + color: '{surface.600}', + hoverColor: '{surface.700}', + activeColor: '{surface.800}' + }, + today: { + background: '{surface.200}', + color: '{surface.900}' + } + }, + dark: { + dropdown: { + background: '{surface.800}', + hoverBackground: '{surface.700}', + activeBackground: '{surface.600}', + color: '{surface.300}', + hoverColor: '{surface.200}', + activeColor: '{surface.100}' + }, + today: { + background: '{surface.700}', + color: '{surface.0}' + } + } + } +}; diff --git a/components/lib/themes/nora/datepicker/package.json b/components/lib/themes/nora/datepicker/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/datepicker/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/dialog/index.d.ts b/components/lib/themes/nora/dialog/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/dialog/index.js b/components/lib/themes/nora/dialog/index.js new file mode 100644 index 000000000..235086e72 --- /dev/null +++ b/components/lib/themes/nora/dialog/index.js @@ -0,0 +1,24 @@ +export default { + root: { + background: '{overlay.modal.background}', + borderColor: '{overlay.modal.border.color}', + color: '{overlay.modal.color}', + borderRadius: '{overlay.modal.border.radius}', + shadow: '{overlay.modal.shadow}' + }, + header: { + padding: '{overlay.modal.padding}', + gap: '0.5rem' + }, + title: { + fontSize: '1.25rem', + fontWeight: '600' + }, + content: { + padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}' + }, + footer: { + padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}', + gap: '0.5rem' + } +}; diff --git a/components/lib/themes/nora/dialog/package.json b/components/lib/themes/nora/dialog/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/dialog/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/divider/index.d.ts b/components/lib/themes/nora/divider/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/divider/index.js b/components/lib/themes/nora/divider/index.js new file mode 100644 index 000000000..ed6549b97 --- /dev/null +++ b/components/lib/themes/nora/divider/index.js @@ -0,0 +1,23 @@ +export default { + root: { + borderColor: '{content.border.color}' + }, + content: { + background: '{content.background}', + color: '{text.color}' + }, + horizontal: { + margin: '1rem 0', + padding: '0 1rem', + content: { + padding: '0 0.5rem' + } + }, + vertical: { + margin: '0 1rem', + padding: '0.5rem 0', + content: { + padding: '0.5rem 0' + } + } +}; diff --git a/components/lib/themes/nora/divider/package.json b/components/lib/themes/nora/divider/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/divider/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/dock/index.d.ts b/components/lib/themes/nora/dock/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/dock/index.js b/components/lib/themes/nora/dock/index.js new file mode 100644 index 000000000..19548ace8 --- /dev/null +++ b/components/lib/themes/nora/dock/index.js @@ -0,0 +1,20 @@ +export default { + root: { + background: 'rgba(255, 255, 255, 0.1)', + borderColor: 'rgba(255, 255, 255, 0.2)', + padding: '0.5rem', + borderRadius: '{border.radius.xl}' + }, + item: { + borderRadius: '{content.border.radius}', + padding: '0.5rem', + size: '3rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + } +}; diff --git a/components/lib/themes/nora/dock/package.json b/components/lib/themes/nora/dock/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/dock/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/drawer/index.d.ts b/components/lib/themes/nora/drawer/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/drawer/index.js b/components/lib/themes/nora/drawer/index.js new file mode 100644 index 000000000..c1b874642 --- /dev/null +++ b/components/lib/themes/nora/drawer/index.js @@ -0,0 +1,19 @@ +export default { + root: { + background: '{overlay.modal.background}', + borderColor: '{overlay.modal.border.color}', + color: '{overlay.modal.color}', + borderRadius: '{overlay.modal.border.radius}', + shadow: '{overlay.modal.shadow}' + }, + header: { + padding: '{overlay.modal.padding}' + }, + title: { + fontSize: '1.5rem', + fontWeight: '600' + }, + content: { + padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}' + } +}; diff --git a/components/lib/themes/nora/drawer/package.json b/components/lib/themes/nora/drawer/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/drawer/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/editor/index.d.ts b/components/lib/themes/nora/editor/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/editor/index.js b/components/lib/themes/nora/editor/index.js new file mode 100644 index 000000000..6ecc53b13 --- /dev/null +++ b/components/lib/themes/nora/editor/index.js @@ -0,0 +1,33 @@ +export default { + toolbar: { + background: '{content.background}', + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}' + }, + toolbarItem: { + color: '{text.muted.color}', + hoverColor: '{text.color}', + activeColor: '{primary.color}' + }, + overlay: { + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}', + padding: '{list.padding}' + }, + overlayOption: { + focusBackground: '{list.option.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' + }, + content: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}', + borderRadius: '{content.border.radius}' + } +}; diff --git a/components/lib/themes/nora/editor/package.json b/components/lib/themes/nora/editor/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/editor/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/fieldset/index.d.ts b/components/lib/themes/nora/fieldset/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/fieldset/index.js b/components/lib/themes/nora/fieldset/index.js new file mode 100644 index 000000000..511fa7aa5 --- /dev/null +++ b/components/lib/themes/nora/fieldset/index.js @@ -0,0 +1,35 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}', + color: '{content.color}', + padding: '0 1.125rem 1.125rem 1.125rem' + }, + legend: { + background: '{content.background}', + hoverBackground: '{content.hover.background}', + color: '{content.color}', + hoverColor: '{content.hover.color}', + borderRadius: '{content.border.radius}', + borderWidth: '1px', + borderColor: 'transparent', + padding: '0.5rem 0.75rem', + gap: '0.5rem', + fontWeight: '600', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + toggleIcon: { + color: '{text.muted.color}', + hoverColor: '{text.hover.muted.color}' + }, + content: { + padding: '0' + } +}; diff --git a/components/lib/themes/nora/fieldset/package.json b/components/lib/themes/nora/fieldset/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/fieldset/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/fileupload/index.d.ts b/components/lib/themes/nora/fileupload/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/fileupload/index.js b/components/lib/themes/nora/fileupload/index.js new file mode 100644 index 000000000..fe85ff4c4 --- /dev/null +++ b/components/lib/themes/nora/fileupload/index.js @@ -0,0 +1,14 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}' + }, + content: { + highlightBackground: '{highlight.background}', + highlightBorderColor: '{highlight.color}' + }, + file: { + borderColor: '{content.border.color}' + } +}; diff --git a/components/lib/themes/nora/fileupload/package.json b/components/lib/themes/nora/fileupload/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/fileupload/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/floatlabel/index.d.ts b/components/lib/themes/nora/floatlabel/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/floatlabel/index.js b/components/lib/themes/nora/floatlabel/index.js new file mode 100644 index 000000000..e83127703 --- /dev/null +++ b/components/lib/themes/nora/floatlabel/index.js @@ -0,0 +1,7 @@ +export default { + root: { + color: '{form.field.float.label.color}', + focusColor: '{form.field.float.label.focus.color}', + invalidColor: '{form.field.float.label.invalid.color}' + } +}; diff --git a/components/lib/themes/nora/floatlabel/package.json b/components/lib/themes/nora/floatlabel/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/floatlabel/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/galleria/index.d.ts b/components/lib/themes/nora/galleria/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/galleria/index.js b/components/lib/themes/nora/galleria/index.js new file mode 100644 index 000000000..6d100eafd --- /dev/null +++ b/components/lib/themes/nora/galleria/index.js @@ -0,0 +1,127 @@ +export default { + root: { + borderWidth: '1px', + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}' + }, + navButton: { + background: 'rgba(255, 255, 255, 0.1)', + hoverBackground: 'rgba(255, 255, 255, 0.2)', + color: '{surface.100}', + hoverColor: '{surface.0}', + size: '3rem', + gutter: '0.5rem', + prev: { + borderRadius: '50%' + }, + next: { + borderRadius: '50%' + }, + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + navIcon: { + size: '1.5rem' + }, + thumbnailsContent: { + background: '{content.background}', + padding: '1rem 0.25rem' + }, + thumbnailNavButton: { + size: '2rem', + borderRadius: '{content.border.radius}', + gutter: '0.5rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + thumbnailNavButtonIcon: { + size: '1rem' + }, + caption: { + background: 'rgba(0, 0, 0, 0.5)', + color: '{surface.100}', + padding: '1rem' + }, + indicatorList: { + gap: '0.5rem', + padding: '1rem' + }, + indicatorButton: { + width: '1rem', + height: '1rem', + activeBackground: '{primary.color}', + borderRadius: '50%', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + insetIndicatorList: { + background: 'rgba(0, 0, 0, 0.5)' + }, + insetIndicatorButton: { + background: 'rgba(255, 255, 255, 0.4)', + hoverBackground: 'rgba(255, 255, 255, 0.6)', + activeBackground: 'rgba(255, 255, 255, 0.9)' + }, + mask: { + background: '{mask.background}', + color: '{mask.color}' + }, + closeButton: { + size: '3rem', + gutter: '0.5rem', + background: 'rgba(255, 255, 255, 0.1)', + hoverBackground: 'rgba(255, 255, 255, 0.2)', + color: '{surface.50}', + hoverColor: '{surface.0}', + borderRadius: '50%', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + closeButtonIcon: { + size: '1.5rem' + }, + colorScheme: { + light: { + thumbnailNavButton: { + hoverBackground: '{surface.100}', + color: '{surface.600}', + hoverColor: '{surface.700}' + }, + indicatorButton: { + background: '{surface.200}', + hoverBackground: '{surface.300}' + } + }, + dark: { + thumbnailNavButton: { + hoverBackground: '{surface.700}', + color: '{surface.400}', + hoverColor: '{surface.0}' + }, + indicatorButton: { + background: '{surface.700}', + hoverBackground: '{surface.600}' + } + } + } +}; diff --git a/components/lib/themes/nora/galleria/package.json b/components/lib/themes/nora/galleria/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/galleria/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/iconfield/index.d.ts b/components/lib/themes/nora/iconfield/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/iconfield/index.js b/components/lib/themes/nora/iconfield/index.js new file mode 100644 index 000000000..1e0102d5f --- /dev/null +++ b/components/lib/themes/nora/iconfield/index.js @@ -0,0 +1,5 @@ +export default { + icon: { + color: '{form.field.icon.color}' + } +}; diff --git a/components/lib/themes/nora/iconfield/package.json b/components/lib/themes/nora/iconfield/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/iconfield/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/image/index.d.ts b/components/lib/themes/nora/image/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/image/index.js b/components/lib/themes/nora/image/index.js new file mode 100644 index 000000000..9600f2332 --- /dev/null +++ b/components/lib/themes/nora/image/index.js @@ -0,0 +1,41 @@ +export default { + preview: { + icon: { + size: '1.5rem' + }, + mask: { + background: '{mask.background}', + color: '{mask.color}' + } + }, + toolbar: { + position: { + left: 'auto', + right: '1rem', + top: '1rem', + bottom: 'auto' + }, + blur: '8px', + background: 'rgba(255,255,255,0.1)', + borderColor: 'rgba(255,255,255,0.2)', + borderWidth: '1px', + borderRadius: '30px', + padding: '.5rem', + gap: '0.5rem' + }, + action: { + hoverBackground: 'rgba(255,255,255,0.1)', + color: '{surface.50}', + hoverColor: '{surface.0}', + size: '3rem', + iconSize: '1.5rem', + borderRadius: '50%', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + } +}; diff --git a/components/lib/themes/nora/image/package.json b/components/lib/themes/nora/image/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/image/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/index.d.ts b/components/lib/themes/nora/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/index.js b/components/lib/themes/nora/index.js new file mode 100644 index 000000000..dcbf59e23 --- /dev/null +++ b/components/lib/themes/nora/index.js @@ -0,0 +1,549 @@ +import accordion from 'primevue/themes/nora/accordion'; +import autocomplete from 'primevue/themes/nora/autocomplete'; +import avatar from 'primevue/themes/nora/avatar'; +import badge from 'primevue/themes/nora/badge'; +import blockui from 'primevue/themes/nora/blockui'; +import breadcrumb from 'primevue/themes/nora/breadcrumb'; +import button from 'primevue/themes/nora/button'; +import buttongroup from 'primevue/themes/nora/buttongroup'; +import card from 'primevue/themes/nora/card'; +import carousel from 'primevue/themes/nora/carousel'; +import cascadeselect from 'primevue/themes/nora/cascadeselect'; +import checkbox from 'primevue/themes/nora/checkbox'; +import chip from 'primevue/themes/nora/chip'; +import colorpicker from 'primevue/themes/nora/colorpicker'; +import confirmdialog from 'primevue/themes/nora/confirmdialog'; +import confirmpopup from 'primevue/themes/nora/confirmpopup'; +import contextmenu from 'primevue/themes/nora/contextmenu'; +import datatable from 'primevue/themes/nora/datatable'; +import dataview from 'primevue/themes/nora/dataview'; +import datepicker from 'primevue/themes/nora/datepicker'; +import dialog from 'primevue/themes/nora/dialog'; +import divider from 'primevue/themes/nora/divider'; +import dock from 'primevue/themes/nora/dock'; +import drawer from 'primevue/themes/nora/drawer'; +import editor from 'primevue/themes/nora/editor'; +import fieldset from 'primevue/themes/nora/fieldset'; +import fileupload from 'primevue/themes/nora/fileupload'; +import floatlabel from 'primevue/themes/nora/floatlabel'; +import galleria from 'primevue/themes/nora/galleria'; +import iconfield from 'primevue/themes/nora/iconfield'; +import image from 'primevue/themes/nora/image'; +import inlinemessage from 'primevue/themes/nora/inlinemessage'; +import inplace from 'primevue/themes/nora/inplace'; +import inputchips from 'primevue/themes/nora/inputchips'; +import inputgroup from 'primevue/themes/nora/inputgroup'; +import inputnumber from 'primevue/themes/nora/inputnumber'; +import inputotp from 'primevue/themes/nora/inputotp'; +import inputtext from 'primevue/themes/nora/inputtext'; +import knob from 'primevue/themes/nora/knob'; +import listbox from 'primevue/themes/nora/listbox'; +import megamenu from 'primevue/themes/nora/megamenu'; +import menu from 'primevue/themes/nora/menu'; +import menubar from 'primevue/themes/nora/menubar'; +import message from 'primevue/themes/nora/message'; +import metergroup from 'primevue/themes/nora/metergroup'; +import multiselect from 'primevue/themes/nora/multiselect'; +import orderlist from 'primevue/themes/nora/orderlist'; +import organizationchart from 'primevue/themes/nora/organizationchart'; +import paginator from 'primevue/themes/nora/paginator'; +import panel from 'primevue/themes/nora/panel'; +import panelmenu from 'primevue/themes/nora/panelmenu'; +import password from 'primevue/themes/nora/password'; +import picklist from 'primevue/themes/nora/picklist'; +import popover from 'primevue/themes/nora/popover'; +import progressbar from 'primevue/themes/nora/progressbar'; +import progressspinner from 'primevue/themes/nora/progressspinner'; +import radiobutton from 'primevue/themes/nora/radiobutton'; +import rating from 'primevue/themes/nora/rating'; +import ripple from 'primevue/themes/nora/ripple'; +import scrollpanel from 'primevue/themes/nora/scrollpanel'; +import scrolltop from 'primevue/themes/nora/scrolltop'; +import select from 'primevue/themes/nora/select'; +import selectbutton from 'primevue/themes/nora/selectbutton'; +import skeleton from 'primevue/themes/nora/skeleton'; +import slider from 'primevue/themes/nora/slider'; +import speeddial from 'primevue/themes/nora/speeddial'; +import splitbutton from 'primevue/themes/nora/splitbutton'; +import splitter from 'primevue/themes/nora/splitter'; +import stepper from 'primevue/themes/nora/stepper'; +import steps from 'primevue/themes/nora/steps'; +import tabmenu from 'primevue/themes/nora/tabmenu'; +import tabs from 'primevue/themes/nora/tabs'; +import tabview from 'primevue/themes/nora/tabview'; +import tag from 'primevue/themes/nora/tag'; +import terminal from 'primevue/themes/nora/terminal'; +import textarea from 'primevue/themes/nora/textarea'; +import tieredmenu from 'primevue/themes/nora/tieredmenu'; +import timeline from 'primevue/themes/nora/timeline'; +import toast from 'primevue/themes/nora/toast'; +import togglebutton from 'primevue/themes/nora/togglebutton'; +import toggleswitch from 'primevue/themes/nora/toggleswitch'; +import toolbar from 'primevue/themes/nora/toolbar'; +import tooltip from 'primevue/themes/nora/tooltip'; +import tree from 'primevue/themes/nora/tree'; +import treeselect from 'primevue/themes/nora/treeselect'; +import treetable from 'primevue/themes/nora/treetable'; + +export default { + primitive: { + borderRadius: { + none: '0', + xs: '2px', + sm: '4px', + md: '6px', + lg: '8px', + xl: '12px' + }, + emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' }, + green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' }, + lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' }, + red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' }, + orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' }, + amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' }, + yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' }, + teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' }, + cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' }, + sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' }, + blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' }, + indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' }, + violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' }, + purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' }, + fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' }, + pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' }, + rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' }, + slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' }, + gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' }, + zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' }, + neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' }, + stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' } + }, + semantic: { + transitionDuration: '0.2s', + focusRing: { + width: '1px', + style: 'solid', + color: '{primary.color}', + offset: '2px', + shadow: 'none' + }, + iconSize: '1rem', + anchorGutter: '2px', + primary: { + 50: '{emerald.50}', + 100: '{emerald.100}', + 200: '{emerald.200}', + 300: '{emerald.300}', + 400: '{emerald.400}', + 500: '{emerald.500}', + 600: '{emerald.600}', + 700: '{emerald.700}', + 800: '{emerald.800}', + 900: '{emerald.900}', + 950: '{emerald.950}' + }, + formField: { + paddingX: '0.75rem', + paddingY: '0.5rem', + borderRadius: '{border.radius.md}', + focusRing: { + width: '0', + style: 'none', + color: 'transparent', + offset: '0', + shadow: 'none' + } + }, + list: { + padding: '0.25rem 0.25rem', + gap: '2px', + header: { + padding: '0.5rem 0.75rem 0 0.75rem' + }, + option: { + padding: '0.5rem 0.75rem', + borderRadius: '{border.radius.sm}' + }, + optionGroup: { + padding: '0.5rem 0.75rem', + fontWeight: '600' + } + }, + content: { + borderRadius: '{border.radius.md}' + }, + navigation: { + list: { + padding: '0.25rem 0.25rem', + gap: '2px' + }, + item: { + padding: '0.5rem 0.75rem', + borderRadius: '{border.radius.sm}', + gap: '0.5rem' + }, + submenuLabel: { + padding: '0.5rem 0.75rem', + fontWeight: '600' + }, + submenuIcon: { + size: '0.875rem' + } + }, + overlay: { + select: { + borderRadius: '{border.radius.md}', + shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' + }, + popover: { + borderRadius: '{border.radius.md}', + padding: '0.75rem', + shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' + }, + modal: { + borderRadius: '{border.radius.xl}', + padding: '1.25rem', + shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' + }, + navigation: { + shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' + } + }, + colorScheme: { + light: { + surface: { + 0: '#ffffff', + 50: '{slate.50}', + 100: '{slate.100}', + 200: '{slate.200}', + 300: '{slate.300}', + 400: '{slate.400}', + 500: '{slate.500}', + 600: '{slate.600}', + 700: '{slate.700}', + 800: '{slate.800}', + 900: '{slate.900}', + 950: '{slate.950}' + }, + primary: { + color: '{primary.500}', + contrastColor: '#ffffff', + hoverColor: '{primary.600}', + activeColor: '{primary.700}' + }, + highlight: { + background: '{primary.50}', + focusBackground: '{primary.100}', + color: '{primary.700}', + focusColor: '{primary.800}' + }, + mask: { + background: 'rgba(0,0,0,0.4)', + color: '{surface.200}' + }, + formField: { + background: '{surface.0}', + disabledBackground: '{surface.200}', + filledBackground: '{surface.50}', + filledFocusBackground: '{surface.50}', + borderColor: '{surface.300}', + hoverBorderColor: '{surface.400}', + focusBorderColor: '{primary.color}', + invalidBorderColor: '{red.400}', + color: '{surface.700}', + disabledColor: '{surface.500}', + placeholderColor: '{surface.500}', + floatLabelColor: '{surface.500}', + floatLabelFocusColor: '{surface.500}', + floatLabelInvalidColor: '{red.400}', + iconColor: '{surface.400}', + shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + }, + text: { + color: '{surface.700}', + hoverColor: '{surface.800}', + mutedColor: '{surface.500}', + hoverMutedColor: '{surface.600}' + }, + content: { + background: '{surface.0}', + hoverBackground: '{surface.100}', + borderColor: '{surface.200}', + color: '{text.color}', + hoverColor: '{text.hover.color}' + }, + overlay: { + select: { + background: '{surface.0}', + borderColor: '{surface.200}', + color: '{text.color}' + }, + popover: { + background: '{surface.0}', + borderColor: '{surface.200}', + color: '{text.color}' + }, + modal: { + background: '{surface.0}', + borderColor: '{surface.200}', + color: '{text.color}' + } + }, + list: { + option: { + focusBackground: '{surface.100}', + selectedBackground: '{highlight.background}', + selectedFocusBackground: '{highlight.focus.background}', + color: '{text.color}', + focusColor: '{text.hover.color}', + selectedColor: '{highlight.color}', + selectedFocusColor: '{highlight.focus.color}', + icon: { + color: '{surface.400}', + focusColor: '{surface.500}' + } + }, + optionGroup: { + background: '{surface.0}', + color: '{text.muted.color}' + } + }, + navigation: { + item: { + focusBackground: '{surface.100}', + activeBackground: '{surface.100}', + color: '{text.color}', + focusColor: '{text.hover.color}', + activeColor: '{text.hover.color}', + icon: { + color: '{surface.400}', + focusColor: '{surface.500}', + activeColor: '{surface.500}' + } + }, + submenuLabel: { + background: '{surface.0}', + color: '{text.muted.color}' + }, + submenuIcon: { + color: '{surface.400}', + focusColor: '{surface.500}', + activeColor: '{surface.500}' + } + } + }, + dark: { + surface: { + 0: '#ffffff', + 50: '{zinc.50}', + 100: '{zinc.100}', + 200: '{zinc.200}', + 300: '{zinc.300}', + 400: '{zinc.400}', + 500: '{zinc.500}', + 600: '{zinc.600}', + 700: '{zinc.700}', + 800: '{zinc.800}', + 900: '{zinc.900}', + 950: '{zinc.950}' + }, + primary: { + color: '{primary.400}', + contrastColor: '{surface.900}', + hoverColor: '{primary.300}', + activeColor: '{primary.200}' + }, + highlight: { + background: 'color-mix(in srgb, {primary.400}, transparent 84%)', + focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)', + color: 'rgba(255,255,255,.87)', + focusColor: 'rgba(255,255,255,.87)' + }, + mask: { + background: 'rgba(0,0,0,0.4)', + color: '{surface.200}' + }, + formField: { + background: '{surface.950}', + disabledBackground: '{surface.700}', + filledBackground: '{surface.800}', + filledFocusBackground: '{surface.950}', + borderColor: '{surface.700}', + hoverBorderColor: '{surface.600}', + focusBorderColor: '{primary.color}', + invalidBorderColor: '{red.300}', + color: '{surface.0}', + disabledColor: '{surface.400}', + placeholderColor: '{surface.400}', + floatLabelColor: '{surface.400}', + floatLabelFocusColor: '{surface.400}', + floatLabelInvalidColor: '{red.300}', + iconColor: '{surface.400}', + shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + }, + text: { + color: '{surface.0}', + hoverColor: '{surface.0}', + mutedColor: '{surface.400}', + hoverMutedColor: '{surface.300}' + }, + content: { + background: '{surface.900}', + hoverBackground: '{surface.800}', + borderColor: '{surface.700}', + color: '{text.color}', + hoverColor: '{text.hover.color}' + }, + overlay: { + select: { + background: '{surface.900}', + borderColor: '{surface.700}', + color: '{text.color}' + }, + popover: { + background: '{surface.900}', + borderColor: '{surface.700}', + color: '{text.color}' + }, + modal: { + background: '{surface.900}', + borderColor: '{surface.700}', + color: '{text.color}' + } + }, + list: { + option: { + focusBackground: '{surface.800}', + selectedBackground: '{highlight.background}', + selectedFocusBackground: '{highlight.focus.background}', + color: '{text.color}', + focusColor: '{text.hover.color}', + selectedColor: '{highlight.color}', + selectedFocusColor: '{highlight.focus.color}', + icon: { + color: '{surface.500}', + focusColor: '{surface.400}' + } + }, + optionGroup: { + background: '{surface.900}', + color: '{text.muted.color}' + } + }, + navigation: { + item: { + focusBackground: '{surface.800}', + activeBackground: '{surface.800}', + color: '{text.color}', + focusColor: '{text.hover.color}', + activeColor: '{text.hover.color}', + icon: { + color: '{surface.500}', + focusColor: '{surface.400}', + activeColor: '{surface.400}' + } + }, + submenuLabel: { + background: '{surface.900}', + color: '{text.muted.color}' + }, + submenuIcon: { + color: '{surface.500}', + focusColor: '{surface.400}', + activeColor: '{surface.400}' + } + } + } + } + }, + components: { + accordion, + autocomplete, + avatar, + badge, + blockui, + breadcrumb, + button, + buttongroup, + datepicker, + card, + carousel, + cascadeselect, + checkbox, + chip, + colorpicker, + confirmdialog, + confirmpopup, + contextmenu, + dataview, + datatable, + dialog, + divider, + dock, + drawer, + editor, + fieldset, + fileupload, + floatlabel, + galleria, + iconfield, + image, + inlinemessage, + inplace, + inputchips, + inputgroup, + inputnumber, + inputotp, + toggleswitch, + inputtext, + knob, + listbox, + megamenu, + menu, + menubar, + message, + metergroup, + multiselect, + orderlist, + organizationchart, + popover, + paginator, + password, + panel, + panelmenu, + picklist, + progressbar, + progressspinner, + radiobutton, + rating, + scrollpanel, + scrolltop, + select, + selectbutton, + skeleton, + slider, + speeddial, + splitter, + splitbutton, + stepper, + steps, + tabmenu, + tabs, + tabview, + textarea, + tieredmenu, + tag, + terminal, + timeline, + togglebutton, + tree, + treeselect, + treetable, + toast, + toolbar + }, + directives: { + tooltip, + ripple + } +}; diff --git a/components/lib/themes/nora/inlinemessage/index.d.ts b/components/lib/themes/nora/inlinemessage/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/inlinemessage/index.js b/components/lib/themes/nora/inlinemessage/index.js new file mode 100644 index 000000000..f09bd87b5 --- /dev/null +++ b/components/lib/themes/nora/inlinemessage/index.js @@ -0,0 +1,91 @@ +export default { + root: { + padding: '{form.field.padding.y} {form.field.padding.x}', + borderRadius: '{content.border.radius}', + gap: '0.5rem' + }, + text: { + fontWeight: '500' + }, + icon: { + size: '1rem' + }, + colorScheme: { + light: { + info: { + background: 'color-mix(in srgb, {blue.50}, transparent 5%)', + borderColor: '{blue.200}', + color: '{blue.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' + }, + success: { + background: 'color-mix(in srgb, {green.50}, transparent 5%)', + borderColor: '{green.200}', + color: '{green.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' + }, + warn: { + background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', + borderColor: '{yellow.200}', + color: '{yellow.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' + }, + error: { + background: 'color-mix(in srgb, {red.50}, transparent 5%)', + borderColor: '{red.200}', + color: '{red.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' + }, + secondary: { + background: '{surface.100}', + borderColor: '{surface.200}', + color: '{surface.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' + }, + contrast: { + background: '{surface.900}', + borderColor: '{surface.950}', + color: '{surface.50}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' + } + }, + dark: { + info: { + background: 'color-mix(in srgb, {blue.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', + color: '{blue.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', + color: '{green.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' + }, + warn: { + background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', + color: '{yellow.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' + }, + error: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', + color: '{red.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' + }, + secondary: { + background: '{surface.800}', + borderColor: '{surface.700}', + color: '{surface.300}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' + }, + contrast: { + background: '{surface.0}', + borderColor: '{surface.100}', + color: '{surface.950}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' + } + } + } +}; diff --git a/components/lib/themes/nora/inlinemessage/package.json b/components/lib/themes/nora/inlinemessage/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/inlinemessage/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/inplace/index.d.ts b/components/lib/themes/nora/inplace/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/inplace/index.js b/components/lib/themes/nora/inplace/index.js new file mode 100644 index 000000000..53a41ef21 --- /dev/null +++ b/components/lib/themes/nora/inplace/index.js @@ -0,0 +1,24 @@ +export default { + padding: '{form.field.padding.y} {form.field.padding.x}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + }, + colorScheme: { + light: { + display: { + hoverBackground: '{surface.100}', + hoverColor: '{surface.800}' + } + }, + dark: { + display: { + hoverBackground: '{surface.800}', + hoverColor: '{surface.0}' + } + } + } +}; diff --git a/components/lib/themes/nora/inplace/package.json b/components/lib/themes/nora/inplace/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/inplace/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/inputchips/index.d.ts b/components/lib/themes/nora/inputchips/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/inputchips/index.js b/components/lib/themes/nora/inputchips/index.js new file mode 100644 index 000000000..607905eac --- /dev/null +++ b/components/lib/themes/nora/inputchips/index.js @@ -0,0 +1,29 @@ +export default { + root: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + filledFocusBackground: '{form.field.filled.focus.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + placeholderColor: '{form.field.placeholder.color}', + shadow: '{form.field.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + chip: { + borderRadius: '{border.radius.sm}' + } +}; diff --git a/components/lib/themes/nora/inputchips/package.json b/components/lib/themes/nora/inputchips/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/inputchips/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/inputgroup/index.d.ts b/components/lib/themes/nora/inputgroup/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/inputgroup/index.js b/components/lib/themes/nora/inputgroup/index.js new file mode 100644 index 000000000..4504dd153 --- /dev/null +++ b/components/lib/themes/nora/inputgroup/index.js @@ -0,0 +1,8 @@ +export default { + addon: { + background: '{form.field.background}', + borderColor: '{form.field.border.color}', + color: '{form.field.icon.color}', + borderRadius: '{form.field.border.radius}' + } +}; diff --git a/components/lib/themes/nora/inputgroup/package.json b/components/lib/themes/nora/inputgroup/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/inputgroup/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/inputnumber/index.d.ts b/components/lib/themes/nora/inputnumber/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/inputnumber/index.js b/components/lib/themes/nora/inputnumber/index.js new file mode 100644 index 000000000..a8ebf9834 --- /dev/null +++ b/components/lib/themes/nora/inputnumber/index.js @@ -0,0 +1,35 @@ +export default { + button: { + width: '2.5rem', + borderRadius: '{form.field.border.radius}', + verticalPadding: '{form.field.padding.y}' + }, + colorScheme: { + light: { + button: { + background: 'transparent', + hoverBackground: '{surface.100}', + activeBackground: '{surface.200}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.border.color}', + activeBorderColor: '{form.field.border.color}', + color: '{surface.400}', + hoverColor: '{surface.500}', + activeColor: '{surface.600}' + } + }, + dark: { + button: { + background: 'transparent', + hoverBackground: '{surface.800}', + activeBackground: '{surface.700}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.border.color}', + activeBorderColor: '{form.field.border.color}', + color: '{surface.400}', + hoverColor: '{surface.300}', + activeColor: '{surface.200}' + } + } + } +}; diff --git a/components/lib/themes/nora/inputnumber/package.json b/components/lib/themes/nora/inputnumber/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/inputnumber/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/inputotp/index.d.ts b/components/lib/themes/nora/inputotp/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/inputotp/index.js b/components/lib/themes/nora/inputotp/index.js new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/components/lib/themes/nora/inputotp/index.js @@ -0,0 +1 @@ +export default {}; diff --git a/components/lib/themes/nora/inputotp/package.json b/components/lib/themes/nora/inputotp/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/inputotp/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/inputtext/index.d.ts b/components/lib/themes/nora/inputtext/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/inputtext/index.js b/components/lib/themes/nora/inputtext/index.js new file mode 100644 index 000000000..b1ed3815c --- /dev/null +++ b/components/lib/themes/nora/inputtext/index.js @@ -0,0 +1,26 @@ +export default { + root: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + filledFocusBackground: '{form.field.filled.focus.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + placeholderColor: '{form.field.placeholder.color}', + shadow: '{form.field.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + } +}; diff --git a/components/lib/themes/nora/inputtext/package.json b/components/lib/themes/nora/inputtext/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/inputtext/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/knob/index.d.ts b/components/lib/themes/nora/knob/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/knob/index.js b/components/lib/themes/nora/knob/index.js new file mode 100644 index 000000000..6223509de --- /dev/null +++ b/components/lib/themes/nora/knob/index.js @@ -0,0 +1,11 @@ +export default { + value: { + background: '{primary.color}' + }, + range: { + background: '{content.border.color}' + }, + text: { + color: '{text.muted.color}' + } +}; diff --git a/components/lib/themes/nora/knob/package.json b/components/lib/themes/nora/knob/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/knob/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/listbox/index.d.ts b/components/lib/themes/nora/listbox/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/listbox/index.js b/components/lib/themes/nora/listbox/index.js new file mode 100644 index 000000000..f3241d947 --- /dev/null +++ b/components/lib/themes/nora/listbox/index.js @@ -0,0 +1,51 @@ +export default { + root: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + shadow: '{form.field.shadow}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + list: { + padding: '{list.padding}', + gap: '{list.gap}', + header: { + padding: '{list.header.padding}' + } + }, + option: { + focusBackground: '{list.option.focus.background}', + selectedBackground: '{list.option.selected.background}', + selectedFocusBackground: '{list.option.selected.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + selectedColor: '{list.option.selected.color}', + selectedFocusColor: '{list.option.selected.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' + }, + optionGroup: { + background: '{list.option.group.background}', + color: '{list.option.group.color}', + fontWeight: '{list.option.group.font.weight}', + padding: '{list.option.group.padding}' + }, + checkmark: { + color: '{list.option.color}' + }, + emptyMessage: { + padding: '{list.option.padding}' + } +}; diff --git a/components/lib/themes/nora/listbox/package.json b/components/lib/themes/nora/listbox/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/listbox/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/megamenu/index.d.ts b/components/lib/themes/nora/megamenu/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/megamenu/index.js b/components/lib/themes/nora/megamenu/index.js new file mode 100644 index 000000000..63593317f --- /dev/null +++ b/components/lib/themes/nora/megamenu/index.js @@ -0,0 +1,77 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}', + color: '{content.color}', + gap: '0.5rem', + verticalOrientation: { + padding: '{navigation.list.padding}', + gap: '0' + }, + horizontalOrientation: { + padding: '0.5rem 0.75rem' + } + }, + baseItem: { + borderRadius: '{content.border.radius}', + padding: '{navigation.item.padding}' + }, + item: { + focusBackground: '{navigation.item.focus.background}', + activeBackground: '{navigation.item.active.background}', + color: '{navigation.item.color}', + focusColor: '{navigation.item.focus.color}', + activeColor: '{navigation.item.active.color}', + padding: '{navigation.item.padding}', + borderRadius: '{navigation.item.border.radius}', + gap: '{navigation.item.gap}', + icon: { + color: '{navigation.item.icon.color}', + focusColor: '{navigation.item.icon.focus.color}', + activeColor: '{navigation.item.icon.active.color}' + } + }, + overlay: { + padding: '0', + background: '{content.background}', + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}', + color: '{content.color}', + shadow: '{overlay.navigation.shadow}', + gap: '0.5rem' + }, + submenu: { + padding: '{navigation.list.padding}', + gap: '{navigation.list.gap}' + }, + submenuLabel: { + padding: '{navigation.submenu.label.padding}', + fontWeight: '{navigation.submenu.label.font.weight}', + background: '{navigation.submenu.label.background.}', + color: '{navigation.submenu.label.color}' + }, + submenuIcon: { + size: '{navigation.submenu.icon.size}', + color: '{navigation.submenu.icon.color}', + focusColor: '{navigation.submenu.icon.focus.color}', + activeColor: '{navigation.submenu.icon.active.color}' + }, + separator: { + borderColor: '{content.border.color}' + }, + mobileButton: { + borderRadius: '50%', + size: '1.75rem', + color: '{text.muted.color}', + hoverColor: '{text.muted.hover.color}', + hoverBackground: '{content.hover.background}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + } +}; diff --git a/components/lib/themes/nora/megamenu/package.json b/components/lib/themes/nora/megamenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/megamenu/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/menu/index.d.ts b/components/lib/themes/nora/menu/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/menu/index.js b/components/lib/themes/nora/menu/index.js new file mode 100644 index 000000000..151cdea49 --- /dev/null +++ b/components/lib/themes/nora/menu/index.js @@ -0,0 +1,34 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}', + borderRadius: '{content.border.radius}', + shadow: '{overlay.navigation.shadow}' + }, + list: { + padding: '{navigation.list.padding}', + gap: '{navigation.list.gap}' + }, + item: { + focusBackground: '{navigation.item.focus.background}', + color: '{navigation.item.color}', + focusColor: '{navigation.item.focus.color}', + padding: '{navigation.item.padding}', + borderRadius: '{navigation.item.border.radius}', + gap: '{navigation.item.gap}', + icon: { + color: '{navigation.item.icon.color}', + focusColor: '{navigation.item.icon.focus.color}' + } + }, + submenuLabel: { + padding: '{navigation.submenu.label.padding}', + fontWeight: '{navigation.submenu.label.font.weight}', + background: '{navigation.submenu.label.background.}', + color: '{navigation.submenu.label.color}' + }, + separator: { + borderColor: '{content.border.color}' + } +}; diff --git a/components/lib/themes/nora/menu/package.json b/components/lib/themes/nora/menu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/menu/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/menubar/index.d.ts b/components/lib/themes/nora/menubar/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/menubar/index.js b/components/lib/themes/nora/menubar/index.js new file mode 100644 index 000000000..036067cf0 --- /dev/null +++ b/components/lib/themes/nora/menubar/index.js @@ -0,0 +1,61 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}', + color: '{content.color}', + gap: '0.5rem', + padding: '0.5rem 0.75rem' + }, + baseItem: { + borderRadius: '{content.border.radius}', + padding: '{navigation.item.padding}' + }, + item: { + focusBackground: '{navigation.item.focus.background}', + activeBackground: '{navigation.item.active.background}', + color: '{navigation.item.color}', + focusColor: '{navigation.item.focus.color}', + activeColor: '{navigation.item.active.color}', + padding: '{navigation.item.padding}', + borderRadius: '{navigation.item.border.radius}', + gap: '{navigation.item.gap}', + icon: { + color: '{navigation.item.icon.color}', + focusColor: '{navigation.item.icon.focus.color}', + activeColor: '{navigation.item.icon.active.color}' + } + }, + submenu: { + padding: '{navigation.list.padding}', + gap: '{navigation.list.gap}', + background: '{content.background}', + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}', + shadow: '{overlay.navigation.shadow}', + mobileIndent: '1rem' + }, + submenuIcon: { + size: '{navigation.submenu.icon.size}', + color: '{navigation.submenu.icon.color}', + focusColor: '{navigation.submenu.icon.focus.color}', + activeColor: '{navigation.submenu.icon.active.color}' + }, + separator: { + borderColor: '{content.border.color}' + }, + mobileButton: { + borderRadius: '50%', + size: '1.75rem', + color: '{text.muted.color}', + hoverColor: '{text.muted.hover.color}', + hoverBackground: '{content.hover.background}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + } +}; diff --git a/components/lib/themes/nora/menubar/package.json b/components/lib/themes/nora/menubar/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/menubar/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/message/index.d.ts b/components/lib/themes/nora/message/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/message/index.js b/components/lib/themes/nora/message/index.js new file mode 100644 index 000000000..1b02d95a8 --- /dev/null +++ b/components/lib/themes/nora/message/index.js @@ -0,0 +1,193 @@ +export default { + root: { + margin: '1rem 0', + borderRadius: '{content.border.radius}', + borderWidth: '1px' + }, + content: { + padding: '0.5rem 0.75rem', + gap: '0.5rem' + }, + text: { + fontSize: '1rem', + fontWeight: '500' + }, + icon: { + size: '1.125rem' + }, + closeButton: { + width: '1.75rem', + height: '1.75rem', + borderRadius: '50%', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + offset: '{focus.ring.offset}' + } + }, + closeIcon: { + size: '1rem' + }, + colorScheme: { + light: { + info: { + background: 'color-mix(in srgb, {blue.50}, transparent 5%)', + borderColor: '{blue.200}', + color: '{blue.600}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', + closeButton: { + hoverBackground: '{blue.100}', + focusRing: { + color: '{blue.600}', + shadow: 'none' + } + } + }, + success: { + background: 'color-mix(in srgb, {green.50}, transparent 5%)', + borderColor: '{green.200}', + color: '{green.600}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', + closeButton: { + hoverBackground: '{green.100}', + focusRing: { + color: '{green.600}', + shadow: 'none' + } + } + }, + warn: { + background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', + borderColor: '{yellow.200}', + color: '{yellow.600}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', + closeButton: { + hoverBackground: '{yellow.100}', + focusRing: { + color: '{yellow.600}', + shadow: 'none' + } + } + }, + error: { + background: 'color-mix(in srgb, {red.50}, transparent 5%)', + borderColor: '{red.200}', + color: '{red.600}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', + closeButton: { + hoverBackground: '{red.100}', + focusRing: { + color: '{red.600}', + shadow: 'none' + } + } + }, + secondary: { + background: '{surface.100}', + borderColor: '{surface.200}', + color: '{surface.600}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', + closeButton: { + hoverBackground: '{surface.200}', + focusRing: { + color: '{surface.600}', + shadow: 'none' + } + } + }, + contrast: { + background: '{surface.900}', + borderColor: '{surface.950}', + color: '{surface.50}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', + closeButton: { + hoverBackground: '{surface.800}', + focusRing: { + color: '{surface.50}', + shadow: 'none' + } + } + } + }, + dark: { + info: { + background: 'color-mix(in srgb, {blue.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', + color: '{blue.500}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)', + focusRing: { + color: '{blue.500}', + shadow: 'none' + } + } + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', + color: '{green.500}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)', + focusRing: { + color: '{green.500}', + shadow: 'none' + } + } + }, + warn: { + background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', + color: '{yellow.500}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)', + focusRing: { + color: '{yellow.500}', + shadow: 'none' + } + } + }, + error: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', + color: '{red.500}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)', + focusRing: { + color: '{red.500}', + shadow: 'none' + } + } + }, + secondary: { + background: '{surface.800}', + borderColor: '{surface.700}', + color: '{surface.300}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', + closeButton: { + hoverBackground: '{surface.700}', + focusRing: { + color: '{surface.300}', + shadow: 'none' + } + } + }, + contrast: { + background: '{surface.0}', + borderColor: '{surface.100}', + color: '{surface.950}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', + closeButton: { + hoverBackground: '{surface.100}', + focusRing: { + color: '{surface.950}', + shadow: 'none' + } + } + } + } + } +}; diff --git a/components/lib/themes/nora/message/package.json b/components/lib/themes/nora/message/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/message/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/metergroup/index.d.ts b/components/lib/themes/nora/metergroup/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/metergroup/index.js b/components/lib/themes/nora/metergroup/index.js new file mode 100644 index 000000000..776f87075 --- /dev/null +++ b/components/lib/themes/nora/metergroup/index.js @@ -0,0 +1,23 @@ +export default { + root: { + borderRadius: '{content.border.radius}', + gap: '1rem' + }, + meters: { + background: '{content.border.color}', + size: '0.5rem' + }, + label: { + gap: '0.5rem' + }, + labelMarker: { + size: '0.5rem' + }, + labelIcon: { + size: '1rem' + }, + labelList: { + verticalGap: '0.5rem', + horizontalGap: '1rem' + } +}; diff --git a/components/lib/themes/nora/metergroup/package.json b/components/lib/themes/nora/metergroup/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/metergroup/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/multiselect/index.d.ts b/components/lib/themes/nora/multiselect/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/multiselect/index.js b/components/lib/themes/nora/multiselect/index.js new file mode 100644 index 000000000..1a9f8fa5e --- /dev/null +++ b/components/lib/themes/nora/multiselect/index.js @@ -0,0 +1,68 @@ +export default { + root: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + filledFocusBackground: '{form.field.filled.focus.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + placeholderColor: '{form.field.placeholder.color}', + shadow: '{form.field.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + dropdown: { + width: '2.5rem', + color: '{form.field.icon.color}' + }, + overlay: { + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}' + }, + list: { + padding: '{list.padding}', + gap: '{list.gap}', + header: { + padding: '{list.header.padding}' + } + }, + option: { + focusBackground: '{list.option.focus.background}', + selectedBackground: '{list.option.selected.background}', + selectedFocusBackground: '{list.option.selected.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + selectedColor: '{list.option.selected.color}', + selectedFocusColor: '{list.option.selected.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}', + gap: '0.5rem' + }, + optionGroup: { + background: '{list.option.group.background}', + color: '{list.option.group.color}', + fontWeight: '{list.option.group.font.weight}', + padding: '{list.option.group.padding}' + }, + chip: { + borderRadius: '{border.radius.sm}' + }, + emptyMessage: { + padding: '{list.option.padding}' + } +}; diff --git a/components/lib/themes/nora/multiselect/package.json b/components/lib/themes/nora/multiselect/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/multiselect/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/orderlist/index.d.ts b/components/lib/themes/nora/orderlist/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/orderlist/index.js b/components/lib/themes/nora/orderlist/index.js new file mode 100644 index 000000000..bf6621055 --- /dev/null +++ b/components/lib/themes/nora/orderlist/index.js @@ -0,0 +1,8 @@ +export default { + root: { + gap: '1.125rem' + }, + controls: { + gap: '0.5rem' + } +}; diff --git a/components/lib/themes/nora/orderlist/package.json b/components/lib/themes/nora/orderlist/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/orderlist/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/organizationchart/index.d.ts b/components/lib/themes/nora/organizationchart/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/organizationchart/index.js b/components/lib/themes/nora/organizationchart/index.js new file mode 100644 index 000000000..72cfb5f9f --- /dev/null +++ b/components/lib/themes/nora/organizationchart/index.js @@ -0,0 +1,38 @@ +export default { + root: { + gutter: '0.75rem' + }, + node: { + background: '{content.background}', + hoverBackground: '{content.hover.background}', + selectedBackground: '{highlight.background}', + borderColor: '{content.border.color}', + color: '{content.color}', + selectedColor: '{highlight.color}', + hoverColor: '{content.hover.color}', + padding: '0.75rem 1rem', + toggleablePadding: '0.75rem 1rem 1.25rem 1rem', + borderRadius: '{content.border.radius}' + }, + nodeToggleButton: { + background: '{content.background}', + hoverBackground: '{content.hover.background}', + borderColor: '{content.border.color}', + color: '{text.muted.color}', + hoverColor: '{text.color}', + size: '1.5rem', + borderRadius: '50%', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + connector: { + color: '{content.border.color}', + borderRadius: '{content.border.radius}', + height: '24px' + } +}; diff --git a/components/lib/themes/nora/organizationchart/package.json b/components/lib/themes/nora/organizationchart/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/organizationchart/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/package.json b/components/lib/themes/nora/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/paginator/index.d.ts b/components/lib/themes/nora/paginator/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/paginator/index.js b/components/lib/themes/nora/paginator/index.js new file mode 100644 index 000000000..b7315cdb9 --- /dev/null +++ b/components/lib/themes/nora/paginator/index.js @@ -0,0 +1,14 @@ +export default { + root: { + background: '{content.background}', + color: '{content.color}' + }, + navButton: { + hoverBackground: '{content.hover.background}', + color: '{text.muted.color}', + hoverColor: '{text.hover.muted.color}' + }, + currentPageReport: { + color: '{text.muted.color}' + } +}; diff --git a/components/lib/themes/nora/paginator/package.json b/components/lib/themes/nora/paginator/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/paginator/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/panel/index.d.ts b/components/lib/themes/nora/panel/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/panel/index.js b/components/lib/themes/nora/panel/index.js new file mode 100644 index 000000000..f596bf6fc --- /dev/null +++ b/components/lib/themes/nora/panel/index.js @@ -0,0 +1,27 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}', + borderRadius: '{content.border.radius}' + }, + header: { + background: 'transparent', + color: '{text.color}', + padding: '1.125rem', + borderWidth: '0', + borderRadius: '0' + }, + toggleableHeader: { + padding: '0.375rem 1.125rem' + }, + title: { + fontWeight: '600' + }, + content: { + padding: '0 1.125rem 1.125rem 1.125rem' + }, + footer: { + padding: '0 1.125rem 1.125rem 1.125rem' + } +}; diff --git a/components/lib/themes/nora/panel/package.json b/components/lib/themes/nora/panel/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/panel/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/panelmenu/index.d.ts b/components/lib/themes/nora/panelmenu/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/panelmenu/index.js b/components/lib/themes/nora/panelmenu/index.js new file mode 100644 index 000000000..ab2b79aed --- /dev/null +++ b/components/lib/themes/nora/panelmenu/index.js @@ -0,0 +1,40 @@ +export default { + root: { + gap: '0.5rem' + }, + panel: { + background: '{content.background}', + borderColor: '{content.border.color}', + borderWidth: '1px', + color: '{content.color}', + padding: '0.25rem 0.25rem', + borderRadius: '{content.border.radius}', + first: { + borderWidth: '1px', + topBorderRadius: '{content.border.radius}' + }, + last: { + borderWidth: '1px', + bottomBorderRadius: '{content.border.radius}' + } + }, + item: { + focusBackground: '{navigation.item.focus.background}', + color: '{navigation.item.color}', + focusColor: '{navigation.item.focus.color}', + gap: '0.5rem', + padding: '{navigation.item.padding}', + borderRadius: '{content.border.radius}', + icon: { + color: '{navigation.item.icon.color}', + focusColor: '{navigation.item.icon.focus.color}' + } + }, + submenu: { + indent: '1rem' + }, + submenuIcon: { + color: '{navigation.submenu.icon.color}', + focusColor: '{navigation.submenu.icon.focus.color}' + } +}; diff --git a/components/lib/themes/nora/panelmenu/package.json b/components/lib/themes/nora/panelmenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/panelmenu/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/password/index.d.ts b/components/lib/themes/nora/password/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/password/index.js b/components/lib/themes/nora/password/index.js new file mode 100644 index 000000000..a175a5ace --- /dev/null +++ b/components/lib/themes/nora/password/index.js @@ -0,0 +1,35 @@ +export default { + meter: { + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}', + height: '.75rem' + }, + icon: { + color: '{form.field.icon.color}' + }, + overlay: { + background: '{overlay.popover.background}', + borderColor: '{overlay.popover.border.color}', + borderRadius: '{overlay.popover.border.radius}', + color: '{overlay.popover.color}', + padding: '{overlay.popover.padding}', + shadow: '{overlay.popover.shadow}', + gap: '0.5rem' + }, + colorScheme: { + light: { + strength: { + weakBackground: '{red.500}', + mediumBackground: '{amber.500}', + strongBackground: '{green.500}' + } + }, + dark: { + strength: { + weakBackground: '{red.400}', + mediumBackground: '{amber.400}', + strongBackground: '{green.400}' + } + } + } +}; diff --git a/components/lib/themes/nora/password/package.json b/components/lib/themes/nora/password/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/password/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/picklist/index.d.ts b/components/lib/themes/nora/picklist/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/picklist/index.js b/components/lib/themes/nora/picklist/index.js new file mode 100644 index 000000000..bf6621055 --- /dev/null +++ b/components/lib/themes/nora/picklist/index.js @@ -0,0 +1,8 @@ +export default { + root: { + gap: '1.125rem' + }, + controls: { + gap: '0.5rem' + } +}; diff --git a/components/lib/themes/nora/picklist/package.json b/components/lib/themes/nora/picklist/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/picklist/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/popover/index.d.ts b/components/lib/themes/nora/popover/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/popover/index.js b/components/lib/themes/nora/popover/index.js new file mode 100644 index 000000000..b99e80562 --- /dev/null +++ b/components/lib/themes/nora/popover/index.js @@ -0,0 +1,14 @@ +export default { + root: { + background: '{overlay.popover.background}', + borderColor: '{overlay.popover.border.color}', + color: '{overlay.popover.color}', + borderRadius: '{overlay.popover.border.radius}', + shadow: '{overlay.popover.shadow}', + gutter: '10px' + }, + content: { + padding: '{overlay.popover.padding}' + }, + arrowOffset: '1.25rem' +}; diff --git a/components/lib/themes/nora/popover/package.json b/components/lib/themes/nora/popover/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/popover/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/progressbar/index.d.ts b/components/lib/themes/nora/progressbar/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/progressbar/index.js b/components/lib/themes/nora/progressbar/index.js new file mode 100644 index 000000000..2b73141b2 --- /dev/null +++ b/components/lib/themes/nora/progressbar/index.js @@ -0,0 +1,15 @@ +export default { + root: { + background: '{content.border.color}', + borderRadius: '{content.border.radius}', + height: '1.25rem' + }, + value: { + background: '{primary.color}' + }, + label: { + color: '{primary.inverse.color}', + fontSize: '0.75rem', + fontWeight: '600' + } +}; diff --git a/components/lib/themes/nora/progressbar/package.json b/components/lib/themes/nora/progressbar/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/progressbar/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/progressspinner/index.d.ts b/components/lib/themes/nora/progressspinner/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/progressspinner/index.js b/components/lib/themes/nora/progressspinner/index.js new file mode 100644 index 000000000..30c1c4175 --- /dev/null +++ b/components/lib/themes/nora/progressspinner/index.js @@ -0,0 +1,20 @@ +export default { + colorScheme: { + light: { + root: { + 'color.1': '{red.500}', + 'color.2': '{blue.500}', + 'color.3': '{green.500}', + 'color.4': '{yellow.500}' + } + }, + dark: { + root: { + 'color.1': '{red.400}', + 'color.2': '{blue.400}', + 'color.3': '{green.400}', + 'color.4': '{yellow.400}' + } + } + } +}; diff --git a/components/lib/themes/nora/progressspinner/package.json b/components/lib/themes/nora/progressspinner/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/progressspinner/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/radiobutton/index.d.ts b/components/lib/themes/nora/radiobutton/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/radiobutton/index.js b/components/lib/themes/nora/radiobutton/index.js new file mode 100644 index 000000000..ac57be7de --- /dev/null +++ b/components/lib/themes/nora/radiobutton/index.js @@ -0,0 +1,32 @@ +export default { + root: { + width: '1.25rem', + height: '1.25rem', + background: '{form.field.background}', + checkedBackground: '{primary.color}', + checkedHoverBackground: '{primary.hover.color}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.border.color}', + checkedBorderColor: '{primary.color}', + checkedHoverBorderColor: '{primary.hover.color}', + checkedFocusBorderColor: '{primary.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + shadow: '{form.field.shadow}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + icon: { + size: '0.75rem', + checkedColor: '{primary.inverse.color}', + checkedHoverColor: '{primary.inverse.color}', + disabledColor: '{form.field.disabled.color}' + } +}; diff --git a/components/lib/themes/nora/radiobutton/package.json b/components/lib/themes/nora/radiobutton/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/radiobutton/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/rating/index.d.ts b/components/lib/themes/nora/rating/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/rating/index.js b/components/lib/themes/nora/rating/index.js new file mode 100644 index 000000000..d1dce4a4e --- /dev/null +++ b/components/lib/themes/nora/rating/index.js @@ -0,0 +1,9 @@ +export default { + gap: '0.25rem', + icon: { + size: '1rem', + color: '{text.muted.color}', + hoverColor: '{primary.color}', + activeColor: '{primary.color}' + } +}; diff --git a/components/lib/themes/nora/rating/package.json b/components/lib/themes/nora/rating/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/rating/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/ripple/index.d.ts b/components/lib/themes/nora/ripple/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/ripple/index.js b/components/lib/themes/nora/ripple/index.js new file mode 100644 index 000000000..f760c8d3d --- /dev/null +++ b/components/lib/themes/nora/ripple/index.js @@ -0,0 +1,10 @@ +export default { + colorScheme: { + light: { + background: 'rgba(0,0,0,0.5)' + }, + dark: { + background: 'rgba(255,255,255,0.5)' + } + } +}; diff --git a/components/lib/themes/nora/ripple/package.json b/components/lib/themes/nora/ripple/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/ripple/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/scrollpanel/index.d.ts b/components/lib/themes/nora/scrollpanel/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/scrollpanel/index.js b/components/lib/themes/nora/scrollpanel/index.js new file mode 100644 index 000000000..5e76d0cb0 --- /dev/null +++ b/components/lib/themes/nora/scrollpanel/index.js @@ -0,0 +1,25 @@ +export default { + bar: { + size: '9px', + borderRadius: '{border.radius.sm}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + colorScheme: { + light: { + bar: { + background: '{surface.100}' + } + }, + dark: { + bar: { + background: '{surface.800}' + } + } + } +}; diff --git a/components/lib/themes/nora/scrollpanel/package.json b/components/lib/themes/nora/scrollpanel/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/scrollpanel/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/scrolltop/index.d.ts b/components/lib/themes/nora/scrolltop/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/scrolltop/index.js b/components/lib/themes/nora/scrolltop/index.js new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/components/lib/themes/nora/scrolltop/index.js @@ -0,0 +1 @@ +export default {}; diff --git a/components/lib/themes/nora/scrolltop/package.json b/components/lib/themes/nora/scrolltop/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/scrolltop/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/select/index.d.ts b/components/lib/themes/nora/select/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/select/index.js b/components/lib/themes/nora/select/index.js new file mode 100644 index 000000000..38bceb376 --- /dev/null +++ b/components/lib/themes/nora/select/index.js @@ -0,0 +1,70 @@ +export default { + root: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + filledFocusBackground: '{form.field.filled.focus.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + placeholderColor: '{form.field.placeholder.color}', + shadow: '{form.field.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + dropdown: { + width: '2.5rem', + color: '{form.field.icon.color}' + }, + overlay: { + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}' + }, + list: { + padding: '{list.padding}', + gap: '{list.gap}', + header: { + padding: '{list.header.padding}' + } + }, + option: { + focusBackground: '{list.option.focus.background}', + selectedBackground: '{list.option.selected.background}', + selectedFocusBackground: '{list.option.selected.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + selectedColor: '{list.option.selected.color}', + selectedFocusColor: '{list.option.selected.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' + }, + optionGroup: { + background: '{list.option.group.background}', + color: '{list.option.group.color}', + fontWeight: '{list.option.group.font.weight}', + padding: '{list.option.group.padding}' + }, + clearIcon: { + color: '{form.field.icon.color}' + }, + checkmark: { + color: '{list.option.color}' + }, + emptyMessage: { + padding: '{list.option.padding}' + } +}; diff --git a/components/lib/themes/nora/select/package.json b/components/lib/themes/nora/select/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/select/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/selectbutton/index.d.ts b/components/lib/themes/nora/selectbutton/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/selectbutton/index.js b/components/lib/themes/nora/selectbutton/index.js new file mode 100644 index 000000000..d22a34184 --- /dev/null +++ b/components/lib/themes/nora/selectbutton/index.js @@ -0,0 +1,14 @@ +export default { + colorScheme: { + light: { + root: { + invalidBorderColor: '{form.field.invalid.border.color}' + } + }, + dark: { + root: { + invalidBorderColor: '{form.field.invalid.border.color}' + } + } + } +}; diff --git a/components/lib/themes/nora/selectbutton/package.json b/components/lib/themes/nora/selectbutton/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/selectbutton/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/skeleton/index.d.ts b/components/lib/themes/nora/skeleton/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/skeleton/index.js b/components/lib/themes/nora/skeleton/index.js new file mode 100644 index 000000000..07fc58365 --- /dev/null +++ b/components/lib/themes/nora/skeleton/index.js @@ -0,0 +1,19 @@ +export default { + root: { + borderRadius: '{content.border.radius}' + }, + colorScheme: { + light: { + root: { + background: '{surface.200}', + animationBackground: 'rgba(255,255,255,0.4)' + } + }, + dark: { + root: { + background: 'rgba(255, 255, 255, 0.06)', + animationBackground: 'rgba(255, 255, 255, 0.04)' + } + } + } +}; diff --git a/components/lib/themes/nora/skeleton/package.json b/components/lib/themes/nora/skeleton/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/skeleton/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/slider/index.d.ts b/components/lib/themes/nora/slider/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/slider/index.js b/components/lib/themes/nora/slider/index.js new file mode 100644 index 000000000..a674e9e84 --- /dev/null +++ b/components/lib/themes/nora/slider/index.js @@ -0,0 +1,44 @@ +export default { + track: { + background: '{content.border.color}', + borderRadius: '{content.border.radius}', + size: '3px' + }, + range: { + background: '{primary.color}' + }, + handle: { + width: '20px', + height: '20px', + borderRadius: '50%', + background: '{content.border.color}', + hoverBackground: '{content.border.color}', + content: { + borderRadius: '50%', + background: '{content.background}', + hoverBackground: '{content.background}', + width: '16px', + height: '16px', + shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)' + }, + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + colorScheme: { + light: { + handle: { + contentBackground: '{surface.0}' + } + }, + dark: { + handle: { + contentBackground: '{surface.950}' + } + } + } +}; diff --git a/components/lib/themes/nora/slider/package.json b/components/lib/themes/nora/slider/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/slider/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/speeddial/index.d.ts b/components/lib/themes/nora/speeddial/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/speeddial/index.js b/components/lib/themes/nora/speeddial/index.js new file mode 100644 index 000000000..6c90e496d --- /dev/null +++ b/components/lib/themes/nora/speeddial/index.js @@ -0,0 +1,5 @@ +export default { + root: { + gap: '0.5rem' + } +}; diff --git a/components/lib/themes/nora/speeddial/package.json b/components/lib/themes/nora/speeddial/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/speeddial/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/splitbutton/index.d.ts b/components/lib/themes/nora/splitbutton/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/splitbutton/index.js b/components/lib/themes/nora/splitbutton/index.js new file mode 100644 index 000000000..bb8405946 --- /dev/null +++ b/components/lib/themes/nora/splitbutton/index.js @@ -0,0 +1,7 @@ +export default { + root: { + borderRadius: '{form.field.border.radius}', + roundedBorderRadius: '2rem', + raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)' + } +}; diff --git a/components/lib/themes/nora/splitbutton/package.json b/components/lib/themes/nora/splitbutton/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/splitbutton/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/splitter/index.d.ts b/components/lib/themes/nora/splitter/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/splitter/index.js b/components/lib/themes/nora/splitter/index.js new file mode 100644 index 000000000..1033ce3b7 --- /dev/null +++ b/components/lib/themes/nora/splitter/index.js @@ -0,0 +1,22 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}' + }, + gutter: { + background: '{content.border.color}' + }, + handle: { + size: '24px', + background: 'transparent', + borderRadius: '{content.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + } +}; diff --git a/components/lib/themes/nora/splitter/package.json b/components/lib/themes/nora/splitter/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/splitter/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/stepper/index.d.ts b/components/lib/themes/nora/stepper/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/stepper/index.js b/components/lib/themes/nora/stepper/index.js new file mode 100644 index 000000000..e2e9d5be1 --- /dev/null +++ b/components/lib/themes/nora/stepper/index.js @@ -0,0 +1,63 @@ +export default { + separator: { + background: '{content.border.color}', + activeBackground: '{primary.color}', + orientation: { + vertical: { + margin: '0 0 0 1.625rem' + } + }, + size: '2px' + }, + item: { + padding: '0.5rem', + gap: '1rem' + }, + itemHeader: { + padding: '0', + borderRadius: '{content.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + }, + gap: '0.5rem' + }, + itemTitle: { + color: '{text.muted.color}', + activeColor: '{primary.color}', + fontWeight: '500' + }, + itemNumber: { + background: '{content.background}', + activeBackground: '{content.background}', + borderColor: '{content.border.color}', + color: '{text.muted.color}', + activeColor: '{primary.color}', + size: '2rem', + fontSize: '1.143rem', + fontWeight: '500', + borderRadius: '50%', + shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)' + }, + verticalPanelContainer: { + paddingLeft: '1rem' + }, + panelContent: { + background: '{content.background}', + color: '{content.color}', + orientation: { + horizontal: { + padding: '0.875rem 0.5rem 1.125rem 0.5rem' + }, + vertical: { + padding: '0 0 0 1rem', + last: { + padding: '0 0 0 3rem' + } + } + } + } +}; diff --git a/components/lib/themes/nora/stepper/package.json b/components/lib/themes/nora/stepper/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/stepper/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/steps/index.d.ts b/components/lib/themes/nora/steps/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/steps/index.js b/components/lib/themes/nora/steps/index.js new file mode 100644 index 000000000..e9d55a374 --- /dev/null +++ b/components/lib/themes/nora/steps/index.js @@ -0,0 +1,33 @@ +export default { + separator: { + background: '{content.border.color}' + }, + itemLink: { + borderRadius: '{content.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + }, + gap: '0.5rem' + }, + itemLabel: { + color: '{text.muted.color}', + activeColor: '{primary.color}', + fontWeight: '500' + }, + itemNumber: { + background: '{content.background}', + activeBackground: '{content.background}', + borderColor: '{content.border.color}', + color: '{text.muted.color}', + activeColor: '{primary.color}', + size: '2rem', + fontSize: '1.143rem', + fontWeight: '500', + borderRadius: '50%', + shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)' + } +}; diff --git a/components/lib/themes/nora/steps/package.json b/components/lib/themes/nora/steps/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/steps/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/tabmenu/index.d.ts b/components/lib/themes/nora/tabmenu/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/tabmenu/index.js b/components/lib/themes/nora/tabmenu/index.js new file mode 100644 index 000000000..9f0892a23 --- /dev/null +++ b/components/lib/themes/nora/tabmenu/index.js @@ -0,0 +1,40 @@ +export default { + tablist: { + borderWidth: '0 0 1px 0', + background: '{content.background}', + borderColor: '{content.border.color}' + }, + item: { + background: 'transparent', + hoverBackground: 'transparent', + activeBackground: 'transparent', + borderWidth: '0 0 1px 0', + borderColor: '{content.border.color}', + hoverBorderColor: '{content.border.color}', + activeBorderColor: '{primary.color}', + color: '{text.muted.color}', + hoverColor: '{text.color}', + activeColor: '{primary.color}', + padding: '1rem 1.125rem', + fontWeight: '600', + margin: '0 0 -1px 0', + gap: '0.5rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + itemIcon: { + color: '{text.muted.color}', + hoverColor: '{text.color}', + activeColor: '{primary.color}' + }, + activeBar: { + height: '1px', + bottom: '-1px', + background: '{primary.color}' + } +}; diff --git a/components/lib/themes/nora/tabmenu/package.json b/components/lib/themes/nora/tabmenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/tabmenu/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/tabs/index.d.ts b/components/lib/themes/nora/tabs/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/tabs/index.js b/components/lib/themes/nora/tabs/index.js new file mode 100644 index 000000000..27a9f707e --- /dev/null +++ b/components/lib/themes/nora/tabs/index.js @@ -0,0 +1,65 @@ +export default { + tablist: { + borderWidth: '0 0 1px 0', + background: '{content.background}', + borderColor: '{content.border.color}' + }, + tab: { + background: 'transparent', + hoverBackground: 'transparent', + activeBackground: 'transparent', + borderWidth: '0 0 1px 0', + borderColor: '{content.border.color}', + hoverBorderColor: '{content.border.color}', + activeBorderColor: '{primary.color}', + color: '{text.muted.color}', + hoverColor: '{text.color}', + activeColor: '{primary.color}', + padding: '1rem 1.125rem', + fontWeight: '600', + margin: '0 0 -1px 0', + gap: '0.5rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + tabpanel: { + background: '{content.background}', + color: '{content.color}', + padding: '0.875rem 1.125rem 1.125rem 1.125rem' + }, + navButton: { + background: '{content.background}', + color: '{text.muted.color}', + hoverColor: '{text.color}', + width: '2.5rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '-1px', + shadow: '{focus.ring.shadow}' + } + }, + activeBar: { + height: '1px', + bottom: '-1px', + background: '{primary.color}' + }, + colorScheme: { + light: { + navButton: { + boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' + } + }, + dark: { + navButton: { + boxShadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)' + } + } + } +}; diff --git a/components/lib/themes/nora/tabs/package.json b/components/lib/themes/nora/tabs/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/tabs/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/tabview/index.d.ts b/components/lib/themes/nora/tabview/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/tabview/index.js b/components/lib/themes/nora/tabview/index.js new file mode 100644 index 000000000..00024c7bb --- /dev/null +++ b/components/lib/themes/nora/tabview/index.js @@ -0,0 +1,34 @@ +export default { + tabList: { + background: '{content.background}', + borderColor: '{content.border.color}' + }, + tab: { + borderColor: '{content.border.color}', + activeBorderColor: '{primary.color}', + color: '{text.muted.color}', + hoverColor: '{text.color}', + activeColor: '{primary.color}' + }, + tabPanel: { + background: '{content.background}', + color: '{content.color}' + }, + navButton: { + background: '{content.background}', + color: '{text.muted.color}', + hoverColor: '{text.color}' + }, + colorScheme: { + light: { + navButton: { + boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' + } + }, + dark: { + navButton: { + boxShadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)' + } + } + } +}; diff --git a/components/lib/themes/nora/tabview/package.json b/components/lib/themes/nora/tabview/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/tabview/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/tag/index.d.ts b/components/lib/themes/nora/tag/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/tag/index.js b/components/lib/themes/nora/tag/index.js new file mode 100644 index 000000000..b6c535c19 --- /dev/null +++ b/components/lib/themes/nora/tag/index.js @@ -0,0 +1,75 @@ +export default { + root: { + fontSize: '0.875rem', + fontWeight: '700', + padding: '0.25rem 0.5rem', + gap: '0.25rem', + borderRadius: '{content.border.radius}', + roundedBorderRadius: '{border.radius.xl}' + }, + icon: { + size: '0.75rem' + }, + colorScheme: { + light: { + primary: { + background: '{primary.100}', + color: '{primary.700}' + }, + secondary: { + background: '{surface.100}', + color: '{surface.600}' + }, + success: { + background: '{green.100}', + color: '{green.700}' + }, + info: { + background: '{sky.100}', + color: '{sky.700}' + }, + warn: { + background: '{orange.100}', + color: '{orange.700}' + }, + danger: { + background: '{red.100}', + color: '{red.700}' + }, + contrast: { + background: '{surface.950}', + color: '{surface.0}' + } + }, + dark: { + primary: { + background: 'color-mix(in srgb, {primary.500}, transparent 84%)', + color: '{primary.300}' + }, + secondary: { + background: '{surface.800}', + color: '{surface.300}' + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + color: '{green.300}' + }, + info: { + background: 'color-mix(in srgb, {sky.500}, transparent 84%)', + color: '{sky.300}' + }, + warn: { + background: 'color-mix(in srgb, {orange.500}, transparent 84%)', + color: '{orange.300}' + }, + danger: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + color: '{red.300}' + }, + contrast: { + background: '{surface.0}', + color: '{surface.950}' + } + } + } +}; diff --git a/components/lib/themes/nora/tag/package.json b/components/lib/themes/nora/tag/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/tag/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/terminal/index.d.ts b/components/lib/themes/nora/terminal/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/terminal/index.js b/components/lib/themes/nora/terminal/index.js new file mode 100644 index 000000000..b657e5c4d --- /dev/null +++ b/components/lib/themes/nora/terminal/index.js @@ -0,0 +1,16 @@ +export default { + root: { + background: '{form.field.background}', + borderColor: '{form.field.border.color}', + color: '{form.field.color}', + height: '18rem', + padding: '{form.field.padding.y} {form.field.padding.x}', + borderRadius: '{form.field.border.radius}' + }, + prompt: { + gap: '0.25rem' + }, + commandResponse: { + margin: '2px 0' + } +}; diff --git a/components/lib/themes/nora/terminal/package.json b/components/lib/themes/nora/terminal/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/terminal/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/textarea/index.d.ts b/components/lib/themes/nora/textarea/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/textarea/index.js b/components/lib/themes/nora/textarea/index.js new file mode 100644 index 000000000..b1ed3815c --- /dev/null +++ b/components/lib/themes/nora/textarea/index.js @@ -0,0 +1,26 @@ +export default { + root: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + filledFocusBackground: '{form.field.filled.focus.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + placeholderColor: '{form.field.placeholder.color}', + shadow: '{form.field.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + } +}; diff --git a/components/lib/themes/nora/textarea/package.json b/components/lib/themes/nora/textarea/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/textarea/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/tieredmenu/index.d.ts b/components/lib/themes/nora/tieredmenu/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/tieredmenu/index.js b/components/lib/themes/nora/tieredmenu/index.js new file mode 100644 index 000000000..f70d1ef3e --- /dev/null +++ b/components/lib/themes/nora/tieredmenu/index.js @@ -0,0 +1,43 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + color: '{content.color}', + borderRadius: '{content.border.radius}', + shadow: '{overlay.navigation.shadow}' + }, + list: { + padding: '{navigation.list.padding}', + gap: '{navigation.list.gap}' + }, + item: { + focusBackground: '{navigation.item.focus.background}', + activeBackground: '{navigation.item.active.background}', + color: '{navigation.item.color}', + focusColor: '{navigation.item.focus.color}', + activeColor: '{navigation.item.active.color}', + padding: '{navigation.item.padding}', + borderRadius: '{navigation.item.border.radius}', + gap: '{navigation.item.gap}', + icon: { + color: '{navigation.item.icon.color}', + focusColor: '{navigation.item.icon.focus.color}', + activeColor: '{navigation.item.icon.active.color}' + } + }, + submenuLabel: { + padding: '{navigation.submenu.label.padding}', + fontWeight: '{navigation.submenu.label.font.weight}', + background: '{navigation.submenu.label.background.}', + color: '{navigation.submenu.label.color}' + }, + submenuIcon: { + size: '{navigation.submenu.icon.size}', + color: '{navigation.submenu.icon.color}', + focusColor: '{navigation.submenu.icon.focus.color}', + activeColor: '{navigation.submenu.icon.active.color}' + }, + separator: { + borderColor: '{content.border.color}' + } +}; diff --git a/components/lib/themes/nora/tieredmenu/package.json b/components/lib/themes/nora/tieredmenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/tieredmenu/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/timeline/index.d.ts b/components/lib/themes/nora/timeline/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/timeline/index.js b/components/lib/themes/nora/timeline/index.js new file mode 100644 index 000000000..9058486e5 --- /dev/null +++ b/components/lib/themes/nora/timeline/index.js @@ -0,0 +1,32 @@ +export default { + event: { + minHeight: '5rem' + }, + horizontal: { + eventContent: { + padding: '1rem 0' + } + }, + vertical: { + eventContent: { + padding: '0 1rem' + } + }, + eventMarker: { + size: '1.125rem', + borderRadius: '50%', + borderWidth: '2px', + background: '{content.background}', + borderColor: '{content.border.color}', + content: { + borderRadius: '50%', + size: '0.375rem', + background: '{primary.color}', + insetShadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)' + } + }, + eventConnector: { + color: '{content.border.color}', + size: '2px' + } +}; diff --git a/components/lib/themes/nora/timeline/package.json b/components/lib/themes/nora/timeline/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/timeline/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/toast/index.d.ts b/components/lib/themes/nora/toast/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/toast/index.js b/components/lib/themes/nora/toast/index.js new file mode 100644 index 000000000..58ad3513a --- /dev/null +++ b/components/lib/themes/nora/toast/index.js @@ -0,0 +1,214 @@ +export default { + root: { + width: '25rem', + borderRadius: '{content.border.radius}', + borderWidth: '0 0 0 6px' + }, + icon: { + size: '1.125rem' + }, + content: { + padding: '{overlay.popover.padding}', + gap: '0.5rem' + }, + text: { + gap: '0.5rem' + }, + summary: { + fontWeight: '500', + fontSize: '1rem' + }, + detail: { + fontWeight: '500', + fontSize: '0.875rem' + }, + closeButton: { + width: '1.75rem', + height: '1.75rem', + borderRadius: '50%', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + offset: '{focus.ring.offset}' + } + }, + closeIcon: { + size: '1rem' + }, + colorScheme: { + light: { + blur: '1.5px', + info: { + background: 'color-mix(in srgb, {blue.50}, transparent 5%)', + borderColor: '{blue.200}', + color: '{blue.600}', + detailColor: '{surface.700}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', + closeButton: { + hoverBackground: '{blue.100}', + focusRing: { + color: '{blue.600}', + shadow: 'none' + } + } + }, + success: { + background: 'color-mix(in srgb, {green.50}, transparent 5%)', + borderColor: '{green.200}', + color: '{green.600}', + detailColor: '{surface.700}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', + closeButton: { + hoverBackground: '{green.100}', + focusRing: { + color: '{green.600}', + shadow: 'none' + } + } + }, + warn: { + background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', + borderColor: '{yellow.200}', + color: '{yellow.600}', + detailColor: '{surface.700}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', + closeButton: { + hoverBackground: '{yellow.100}', + focusRing: { + color: '{yellow.600}', + shadow: 'none' + } + } + }, + error: { + background: 'color-mix(in srgb, {red.50}, transparent 5%)', + borderColor: '{red.200}', + color: '{red.600}', + detailColor: '{surface.700}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', + closeButton: { + hoverBackground: '{red.100}', + focusRing: { + color: '{red.600}', + shadow: 'none' + } + } + }, + secondary: { + background: '{surface.100}', + borderColor: '{surface.200}', + color: '{surface.600}', + detailColor: '{surface.700}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', + closeButton: { + hoverBackground: '{surface.200}', + focusRing: { + color: '{surface.600}', + shadow: 'none' + } + } + }, + contrast: { + background: '{surface.900}', + borderColor: '{surface.950}', + color: '{surface.50}', + detailColor: '{surface.0}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', + closeButton: { + hoverBackground: '{surface.800}', + focusRing: { + color: '{surface.50}', + shadow: 'none' + } + } + } + }, + dark: { + blur: '10px', + info: { + background: 'color-mix(in srgb, {blue.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', + color: '{blue.500}', + detailColor: '{surface.0}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)', + focusRing: { + color: '{blue.500}', + shadow: 'none' + } + } + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', + color: '{green.500}', + detailColor: '{surface.0}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)', + focusRing: { + color: '{green.500}', + shadow: 'none' + } + } + }, + warn: { + background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', + color: '{yellow.500}', + detailColor: '{surface.0}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)', + focusRing: { + color: '{yellow.500}', + shadow: 'none' + } + } + }, + error: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', + color: '{red.500}', + detailColor: '{surface.0}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)', + focusRing: { + color: '{red.500}', + shadow: 'none' + } + } + }, + secondary: { + background: '{surface.800}', + borderColor: '{surface.700}', + color: '{surface.300}', + detailColor: '{surface.0}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', + closeButton: { + hoverBackground: '{surface.700}', + focusRing: { + color: '{surface.300}', + shadow: 'none' + } + } + }, + contrast: { + background: '{surface.0}', + borderColor: '{surface.100}', + color: '{surface.950}', + detailColor: '{surface.950}', + shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', + closeButton: { + hoverBackground: '{surface.100}', + focusRing: { + color: '{surface.950}', + shadow: 'none' + } + } + } + } + } +}; diff --git a/components/lib/themes/nora/toast/package.json b/components/lib/themes/nora/toast/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/toast/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/togglebutton/index.d.ts b/components/lib/themes/nora/togglebutton/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/togglebutton/index.js b/components/lib/themes/nora/togglebutton/index.js new file mode 100644 index 000000000..ab35fce07 --- /dev/null +++ b/components/lib/themes/nora/togglebutton/index.js @@ -0,0 +1,69 @@ +export default { + root: { + padding: '0.5rem 1rem', + borderRadius: '{content.border.radius}', + gap: '0.5rem', + fontWeight: '500', + disabledBackground: '{form.field.disabled.background}', + disabledBorderColor: '{form.field.disabled.background}', + disabledColor: '{form.field.disabled.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + icon: { + disabledColor: '{form.field.disabled.color}' + }, + content: { + left: '0.25rem', + top: '0.25rem', + checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)' + }, + colorScheme: { + light: { + root: { + background: '{surface.100}', + checkedBackground: '{surface.100}', + hoverBackground: '{surface.100}', + borderColor: '{surface.100}', + color: '{surface.500}', + hoverColor: '{surface.700}', + checkedColor: '{surface.900}', + checkedBorderColor: '{surface.100}' + }, + content: { + checkedBackground: '{surface.0}' + }, + icon: { + color: '{surface.500}', + hoverColor: '{surface.700}', + checkedColor: '{surface.900}' + } + }, + dark: { + root: { + background: '{surface.950}', + checkedBackground: '{surface.950}', + hoverBackground: '{surface.950}', + borderColor: '{surface.950}', + color: '{surface.400}', + hoverColor: '{surface.300}', + checkedColor: '{surface.0}', + checkedBorderColor: '{surface.950}' + }, + content: { + checkedBackground: '{surface.800}' + }, + icon: { + color: '{surface.400}', + hoverColor: '{surface.300}', + checkedColor: '{surface.0}' + } + } + } +}; diff --git a/components/lib/themes/nora/togglebutton/package.json b/components/lib/themes/nora/togglebutton/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/togglebutton/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/toggleswitch/index.d.ts b/components/lib/themes/nora/toggleswitch/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/toggleswitch/index.js b/components/lib/themes/nora/toggleswitch/index.js new file mode 100644 index 000000000..74983d74a --- /dev/null +++ b/components/lib/themes/nora/toggleswitch/index.js @@ -0,0 +1,54 @@ +export default { + handle: { + borderRadius: '50%', + size: '1rem' + }, + root: { + width: '2.5rem', + height: '1.5rem', + borderRadius: '30px', + gap: '0.25rem', + shadow: '{form.field.shadow}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + colorScheme: { + light: { + root: { + background: '{surface.300}', + invalidBackground: '{red.400}', + hoverBackground: '{surface.400}', + checkedBackground: '{primary.color}', + checkedHoverBackground: '{primary.hover.color}' + }, + handle: { + background: '{surface.0}', + hoverBackground: '{surface.0}', + checkedBackground: '{surface.0}', + checkedHoverBackground: '{surface.0}', + invalidBackground: '{surface.0}' + } + }, + dark: { + root: { + background: '{surface.700}', + invalidBackground: '{red.300}', + hoverBackground: '{surface.600}', + checkedBackground: '{primary.color}', + checkedHoverBackground: '{primary.hover.color}' + }, + handle: { + background: '{surface.400}', + hoverBackground: '{surface.300}', + checkedBackground: '{surface.900}', + checkedHoverBackground: '{surface.900}', + invalidBackground: '{surface.900}' + } + } + } +}; diff --git a/components/lib/themes/nora/toggleswitch/package.json b/components/lib/themes/nora/toggleswitch/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/toggleswitch/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/toolbar/index.d.ts b/components/lib/themes/nora/toolbar/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/toolbar/index.js b/components/lib/themes/nora/toolbar/index.js new file mode 100644 index 000000000..44250dc43 --- /dev/null +++ b/components/lib/themes/nora/toolbar/index.js @@ -0,0 +1,10 @@ +export default { + root: { + background: '{content.background}', + borderColor: '{content.border.color}', + borderRadius: '{content.border.radius}', + color: '{content.color}', + gap: '0.5rem', + padding: '0.75rem' + } +}; diff --git a/components/lib/themes/nora/toolbar/package.json b/components/lib/themes/nora/toolbar/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/toolbar/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/tooltip/index.d.ts b/components/lib/themes/nora/tooltip/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/tooltip/index.js b/components/lib/themes/nora/tooltip/index.js new file mode 100644 index 000000000..7e5b8f050 --- /dev/null +++ b/components/lib/themes/nora/tooltip/index.js @@ -0,0 +1,23 @@ +export default { + root: { + maxWidth: '12.5rem', + gutter: '0.25rem', + shadow: '{overlay.popover.shadow}', + padding: '0.5rem 0.75rem', + borderRadius: '{overlay.popover.border.radius}' + }, + colorScheme: { + light: { + root: { + background: '{surface.700}', + color: '{surface.0}' + } + }, + dark: { + root: { + background: '{surface.700}', + color: '{surface.0}' + } + } + } +}; diff --git a/components/lib/themes/nora/tooltip/package.json b/components/lib/themes/nora/tooltip/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/tooltip/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/tree/index.d.ts b/components/lib/themes/nora/tree/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/tree/index.js b/components/lib/themes/nora/tree/index.js new file mode 100644 index 000000000..f654ae084 --- /dev/null +++ b/components/lib/themes/nora/tree/index.js @@ -0,0 +1,50 @@ +export default { + root: { + background: '{content.background}', + color: '{content.color}', + padding: '1rem', + gap: '2px', + indent: '1rem' + }, + node: { + padding: '0.25rem 0.5rem', + borderRadius: '{content.border.radius}', + hoverBackground: '{content.hover.background}', + selectedBackground: '{highlight.background}', + color: '{text.color}', + hoverColor: '{text.hover.color}', + selectedColor: '{highlight.color}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '-1px', + shadow: '{focus.ring.shadow}' + }, + gap: '0.25rem' + }, + nodeIcon: { + color: '{text.muted.color}', + hoverColor: '{text.hover.muted.color}', + selectedColor: '{highlight.color}' + }, + nodeToggleButton: { + borderRadius: '50%', + size: '1.75rem', + hoverBackground: '{content.hover.background}', + selectedHoverBackground: '{content.background}', + color: '{text.muted.color}', + hoverColor: '{text.hover.muted.color}', + selectedHoverColor: '{primary.color}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + loadingIcon: { + size: '2rem' + } +}; diff --git a/components/lib/themes/nora/tree/package.json b/components/lib/themes/nora/tree/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/tree/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/treeselect/index.d.ts b/components/lib/themes/nora/treeselect/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/treeselect/index.js b/components/lib/themes/nora/treeselect/index.js new file mode 100644 index 000000000..5af96f6ea --- /dev/null +++ b/components/lib/themes/nora/treeselect/index.js @@ -0,0 +1,46 @@ +export default { + root: { + background: '{form.field.background}', + disabledBackground: '{form.field.disabled.background}', + filledBackground: '{form.field.filled.background}', + filledFocusBackground: '{form.field.filled.focus.background}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', + invalidBorderColor: '{form.field.invalid.border.color}', + color: '{form.field.color}', + disabledColor: '{form.field.disabled.color}', + placeholderColor: '{form.field.placeholder.color}', + shadow: '{form.field.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + dropdown: { + width: '2.5rem', + color: '{form.field.icon.color}' + }, + overlay: { + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}' + }, + tree: { + padding: '{list.padding}' + }, + emptyMessage: { + padding: '{list.option.padding}' + }, + chip: { + borderRadius: '{border.radius.sm}' + } +}; diff --git a/components/lib/themes/nora/treeselect/package.json b/components/lib/themes/nora/treeselect/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/treeselect/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/nora/treetable/index.d.ts b/components/lib/themes/nora/treetable/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/components/lib/themes/nora/treetable/index.js b/components/lib/themes/nora/treetable/index.js new file mode 100644 index 000000000..77ab5ea54 --- /dev/null +++ b/components/lib/themes/nora/treetable/index.js @@ -0,0 +1,116 @@ +export default { + header: { + background: '{content.background}', + borderColor: '{treetable.border.color}', + color: '{content.color}', + borderWidth: '0 0 1px 0', + padding: '0.75rem 1rem', + fontWeight: '600' + }, + headerCell: { + background: '{content.background}', + hoverBackground: '{content.hover.background}', + selectedBackground: '{highlight.background}', + borderColor: '{treetable.border.color}', + color: '{content.color}', + hoverColor: '{content.hover.color}', + selectedColor: '{highlight.color}', + gap: '0.5rem', + padding: '0.75rem 1rem', + fontWeight: '600', + align: 'left', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '-1px', + shadow: '{focus.ring.shadow}' + } + }, + row: { + background: '{content.background}', + hoverBackground: '{content.hover.background}', + selectedBackground: '{highlight.background}', + color: '{content.color}', + hoverColor: '{content.hover.color}', + selectedColor: '{highlight.color}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '-1px', + shadow: '{focus.ring.shadow}' + } + }, + bodyCell: { + borderColor: '{treetable.border.color}', + padding: '0.75rem 1rem', + gap: '0.5rem' + }, + footerCell: { + background: '{content.background}', + borderColor: '{treetable.border.color}', + color: '{content.color}', + padding: '0.75rem 1rem', + fontWeight: '600' + }, + footer: { + background: '{content.background}', + borderColor: '{treetable.border.color}', + color: '{content.color}' + }, + columnResizerWidth: '0.5rem', + resizeIndicator: { + width: '1px', + color: '{primary.color}' + }, + sortIcon: { + color: '{text.muted.color}', + hoverColor: '{text.hover.muted.color}' + }, + loadingIcon: { + size: '2rem' + }, + nodeToggleButton: { + hoverBackground: '{content.hover.background}', + selectedHoverBackground: '{content.background}', + color: '{text.muted.color}', + hoverColor: '{text.color}', + selectedHoverColor: '{primary.color}', + size: '1.75rem', + borderRadius: '50%', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + }, + paginatorTop: { + borderColor: '{content.border.color}', + borderWidth: '0 0 1px 0' + }, + paginatorBottom: { + borderColor: '{content.border.color}', + borderWidth: '0 0 1px 0' + }, + colorScheme: { + light: { + root: { + borderColor: '{content.border.color}' + }, + bodyCell: { + selectedBorderColor: '{primary.100}' + } + }, + dark: { + root: { + borderColor: '{surface.800}' + }, + bodyCell: { + selectedBorderColor: '{primary.900}' + } + } + } +}; diff --git a/components/lib/themes/nora/treetable/package.json b/components/lib/themes/nora/treetable/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/nora/treetable/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 9baec5ce2..3d939f945 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -3981,6 +3981,14 @@ "methods": [] } } + }, + "tokens": { + "description": "Define design tokens used by the component.", + "values": { + "filters": { + "props": [] + } + } } }, "autocomplete": { @@ -62720,7 +62728,6 @@ } } }, - "styled/PrimeVueStyled": {}, "tab": { "description": "Tab is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabs/)", "components": { @@ -65922,14 +65929,540 @@ "themes/aura/galleria": {}, "themes/aura/iconfield": {}, "themes/aura/image": {}, - "themes/aura": {}, + "aura": { + "description": "[Live Demo](https://www.primevue.org/)", + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "ColorSchemeDesignToken": { + "relatedProp": "", + "props": [ + { + "name": "colorScheme", + "optional": true, + "readonly": false, + "type": "Object", + "default": "" + } + ], + "methods": [], + "extendedBy": "InputTextDesignTokens" + }, + "PaletteDesignToken": { + "relatedProp": "", + "props": [ + { + "name": "50", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "100", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "200", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "300", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "400", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "500", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "600", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "700", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "800", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "900", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "950", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + } + ], + "methods": [] + }, + "PrimitiveDesignTokens": { + "relatedProp": "", + "props": [ + { + "name": "borderRadius", + "optional": true, + "readonly": false, + "type": "Object", + "default": "" + }, + { + "name": "emerald", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "green", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "lime", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "red", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "orange", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "amber", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "yellow", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "teal", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "cyan", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "sky", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "blue", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "indigo", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "violet", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "purple", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "fuchsia", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "pink", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "rose", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "slate", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "gray", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "zinc", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "neutral", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "stone", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "methods": [] + }, + "SemanticDesignTokens": { + "relatedProp": "", + "props": [ + { + "name": "transitionDuration", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "focusRing", + "optional": true, + "readonly": false, + "type": "Object", + "default": "" + }, + { + "name": "iconSize", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "anchorGutter", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "primary", + "optional": true, + "readonly": false, + "type": "PaletteDesignToken", + "default": "" + }, + { + "name": "formField", + "optional": false, + "readonly": false, + "type": "Object", + "default": "" + }, + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "methods": [] + } + } + } + }, "themes/aura/inlinemessage": {}, "themes/aura/inplace": {}, "themes/aura/inputchips": {}, "themes/aura/inputgroup": {}, "themes/aura/inputnumber": {}, "themes/aura/inputotp": {}, - "themes/aura/inputtext": {}, + "inputtexttheme": { + "description": "InputText renders a text field to enter data.\n\n[Live Demo](https://www.primevue.org/inputtext/)", + "tokens": { + "description": "Define design tokens used by the component.", + "values": { + "Root": { + "description": "Tokens of the root section", + "props": [ + { + "name": "background", + "token": "inputtext.background", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Background of an input field" + }, + { + "name": "disabledBackground", + "token": "inputtext.disabled.background", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Background of an input field when disabled" + }, + { + "name": "filledBackground", + "token": "inputtext.filled.background", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Background of an input field when filled mode" + }, + { + "name": "filledFocusBackground", + "token": "inputtext.filled.focus.background", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Background of an input field on the focus state of filled mode" + }, + { + "name": "borderColor", + "token": "inputtext.border.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Border color of an input field" + }, + { + "name": "hoverBorderColor", + "token": "inputtext.hover.border.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Border color of an input field on the hover state" + }, + { + "name": "focusBorderColor", + "token": "inputtext.focus.border.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Border color of an input field on the focus state" + }, + { + "name": "invalidBorderColor", + "token": "inputtext.invalid.border.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Border color of an input field when invalid" + }, + { + "name": "color", + "token": "inputtext.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Color of an input field" + }, + { + "name": "disabledColor", + "token": "inputtext.disabled.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Color of an input field when disabled" + }, + { + "name": "placeholderColor", + "token": "inputtext.placeholder.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Placeholder color of an input field" + }, + { + "name": "shadow", + "token": "inputtext.shadow", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Shadow of an input field" + }, + { + "name": "paddingX", + "token": "inputtext.padding.x", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Padding right and left of an input field" + }, + { + "name": "paddingY", + "token": "inputtext.padding.y", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Padding top and bottom of an input field" + }, + { + "name": "borderRadius", + "token": "inputtext.border.radius", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Border radius of an input field" + }, + { + "name": "focusRing.width", + "token": "inputtext.focus.ring.width", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Outline width of an input field on the focus state" + }, + { + "name": "focusRing.style", + "token": "inputtext.focus.ring.style", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Outline style of an input field on the focus state" + }, + { + "name": "focusRing.color", + "token": "inputtext.focus.ring.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Outline color of an input field on the focus state" + }, + { + "name": "focusRing.offset", + "token": "inputtext.focus.ring.offset", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Outline offset of an input field on the focus state" + }, + { + "name": "focusRing.shadow", + "token": "inputtext.focus.ring.shadow", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Shadow of an input field on the focus state" + } + ] + } + } + } + }, "themes/aura/knob": {}, "themes/aura/listbox": {}, "themes/aura/megamenu": {}, @@ -73226,7 +73759,6 @@ } } }, - "unstyled/PrimeVueUnstyled": {}, "useconfirm/UseConfirm": { "functions": { "description": "Defines the custom functions used by the module.", diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index eb7fc5f23..dd2555394 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -46,12 +46,13 @@ import EventBus from '@/layouts/AppEventBus'; import { $t, updatePreset, updateSurfacePalette } from 'primevue/themes'; import Aura from 'primevue/themes/aura'; import Lara from 'primevue/themes/lara'; +import Nora from 'primevue/themes/nora'; export default { data() { return { selectedPreset: 'Lara', - presets: ['Aura', 'Lara'], + presets: ['Aura', 'Lara', 'Nora'], selectedPrimaryColor: 'noir', selectedSurfaceColor: null, primaryColors: [ @@ -206,7 +207,7 @@ export default { this.$primevue.config.ripple = value; }, onPresetChange(value) { - const preset = value === 'Lara' ? Lara : Aura; + const preset = value === 'Nora' ? Nora : value === 'Lara' ? Lara : Aura; const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette; $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true }); diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index aa70c2040..32116ad4b 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -210,7 +210,7 @@ const THEME_ALIAS = { 'primevue/themes/service': path.resolve(__dirname, './components/lib/themes/service/index.js'), 'primevue/themes/helpers': path.resolve(__dirname, './components/lib/themes/helpers/index.js'), 'primevue/themes/actions': path.resolve(__dirname, './components/lib/themes/actions/index.js'), - ...createThemeAlias(['aura', 'lara']), + ...createThemeAlias(['aura', 'lara', 'nora']), 'primevue/themes': path.resolve(__dirname, './components/lib/themes/index.js') }; diff --git a/rollup.config.js b/rollup.config.js index 7f39ea775..fe11490a6 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -221,7 +221,7 @@ const CORE_THEME_DEPENDENCIES = { 'primevue/themes/helpers': 'primevue.themes.helpers', 'primevue/themes/service': 'primevue.themes.service', 'primevue/themes/utils': 'primevue.themes.utils', - ...createThemeDependencies(['aura', 'lara']), + ...createThemeDependencies(['aura', 'lara', 'nora']), 'primevue/themes': 'primevue.themes' };