@surflane/ui 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/app-shell.d.ts +44 -3
- package/dist/app-shell.js +81 -8
- package/dist/bottom-navigation.d.ts +66 -0
- package/dist/bottom-navigation.js +36 -0
- package/dist/chart.d.ts +16 -0
- package/dist/chart.js +103 -48
- package/dist/css/accordion.css +11 -0
- package/dist/css/alert-dialog.css +11 -0
- package/{src → dist/css}/all.css +1 -1
- package/dist/css/app-shell.css +12 -0
- package/dist/css/autocomplete.css +15 -0
- package/dist/css/avatar.css +10 -0
- package/dist/css/badge.css +10 -0
- package/dist/css/bottom-navigation.css +8 -0
- package/dist/css/breadcrumbs.css +12 -0
- package/dist/css/button.css +8 -0
- package/dist/css/card.css +11 -0
- package/dist/css/chart.css +13 -0
- package/dist/css/checkbox-group.css +9 -0
- package/dist/css/checkbox.css +9 -0
- package/dist/css/choice-label.css +9 -0
- package/dist/css/code.css +13 -0
- package/dist/css/collapsible.css +11 -0
- package/dist/css/combobox.css +14 -0
- package/dist/css/context-menu.css +15 -0
- package/dist/css/date-picker.css +12 -0
- package/dist/css/dialog.css +10 -0
- package/dist/css/drawer.css +11 -0
- package/dist/css/empty-state.css +9 -0
- package/dist/css/field.css +10 -0
- package/dist/css/fieldset.css +8 -0
- package/dist/css/file-upload.css +17 -0
- package/dist/css/filter-bar.css +8 -0
- package/dist/css/form.css +8 -0
- package/dist/css/icon.css +8 -0
- package/dist/css/inline-message.css +10 -0
- package/dist/css/input.css +9 -0
- package/dist/css/layout.css +9 -0
- package/dist/css/link.css +9 -0
- package/dist/css/list.css +9 -0
- package/dist/css/markdown.css +18 -0
- package/dist/css/menu.css +14 -0
- package/dist/css/menubar.css +9 -0
- package/dist/css/meter.css +9 -0
- package/dist/css/native-select.css +13 -0
- package/dist/css/navigation-menu.css +11 -0
- package/dist/css/number-field.css +11 -0
- package/dist/css/otp-field.css +10 -0
- package/dist/css/page-header.css +11 -0
- package/dist/css/pagination.css +11 -0
- package/dist/css/popover.css +9 -0
- package/dist/css/preview-card.css +11 -0
- package/dist/css/progress.css +9 -0
- package/dist/css/radio-group.css +9 -0
- package/dist/css/rules/accordion.css +21 -0
- package/dist/css/rules/alert-dialog.css +23 -0
- package/dist/css/rules/app-shell.css +227 -0
- package/dist/css/rules/autocomplete.css +3 -0
- package/dist/css/rules/avatar.css +17 -0
- package/dist/css/rules/badge.css +17 -0
- package/dist/css/rules/bar.css +38 -0
- package/dist/css/rules/base.css +46 -0
- package/dist/css/rules/bottom-navigation.css +142 -0
- package/dist/css/rules/breadcrumbs.css +9 -0
- package/dist/css/rules/button.css +131 -0
- package/dist/css/rules/card.css +10 -0
- package/dist/css/rules/chart.css +264 -0
- package/dist/css/rules/checkbox-group.css +3 -0
- package/dist/css/rules/checkbox.css +25 -0
- package/dist/css/rules/choice-label.css +52 -0
- package/dist/css/rules/choice.css +104 -0
- package/dist/css/rules/code.css +9 -0
- package/dist/css/rules/collapsible.css +12 -0
- package/dist/css/rules/combobox.css +177 -0
- package/dist/css/rules/context-menu.css +9 -0
- package/dist/css/rules/date-picker.css +301 -0
- package/dist/css/rules/dialog.css +160 -0
- package/dist/css/rules/disclosure.css +107 -0
- package/dist/css/rules/drawer.css +18 -0
- package/dist/css/rules/empty-state.css +9 -0
- package/dist/css/rules/field-control.css +70 -0
- package/dist/css/rules/field.css +56 -0
- package/dist/css/rules/fieldset.css +23 -0
- package/dist/css/rules/file-upload.css +156 -0
- package/dist/css/rules/filter-bar.css +56 -0
- package/dist/css/rules/form.css +15 -0
- package/dist/css/rules/gauge.css +61 -0
- package/dist/css/rules/icon.css +27 -0
- package/dist/css/rules/inline-message.css +10 -0
- package/dist/css/rules/input-group.css +69 -0
- package/dist/css/rules/input.css +33 -0
- package/dist/css/rules/item.css +14 -0
- package/dist/css/rules/layout.css +3 -0
- package/dist/css/rules/link.css +9 -0
- package/dist/css/rules/list.css +10 -0
- package/dist/css/rules/markdown.css +63 -0
- package/dist/css/rules/menu.css +97 -0
- package/dist/css/rules/menubar.css +18 -0
- package/dist/css/rules/meter.css +3 -0
- package/dist/css/rules/native-select.css +3 -0
- package/dist/css/rules/navigation-menu.css +159 -0
- package/dist/css/rules/number-field.css +55 -0
- package/dist/css/rules/otp-field.css +68 -0
- package/dist/css/rules/page-header.css +3 -0
- package/dist/css/rules/pagination.css +3 -0
- package/dist/css/rules/panel.css +221 -0
- package/dist/css/rules/popover.css +41 -0
- package/dist/css/rules/popup.css +27 -0
- package/dist/css/rules/preview-card.css +60 -0
- package/dist/css/rules/progress.css +14 -0
- package/dist/css/rules/radio-group.css +26 -0
- package/dist/css/rules/scroll-area.css +101 -0
- package/dist/css/rules/select.css +88 -0
- package/dist/css/rules/separator.css +3 -0
- package/dist/css/rules/sheet.css +3 -0
- package/dist/css/rules/sizing.css +140 -0
- package/dist/css/rules/skeleton.css +41 -0
- package/dist/css/rules/slider.css +123 -0
- package/dist/css/rules/sparkline.css +52 -0
- package/dist/css/rules/spinner.css +38 -0
- package/dist/css/rules/stat.css +59 -0
- package/dist/css/rules/switch.css +50 -0
- package/dist/css/rules/syntax-highlighter.css +82 -0
- package/dist/css/rules/table.css +28 -0
- package/dist/css/rules/tabs.css +126 -0
- package/dist/css/rules/textarea.css +21 -0
- package/dist/css/rules/toast.css +247 -0
- package/dist/css/rules/toggle-group.css +3 -0
- package/dist/css/rules/toggle.css +27 -0
- package/dist/css/rules/toolbar.css +62 -0
- package/dist/css/rules/tooltip.css +38 -0
- package/dist/css/rules/tree.css +98 -0
- package/dist/css/rules/typography.css +3 -0
- package/dist/css/scroll-area.css +8 -0
- package/dist/css/select.css +12 -0
- package/dist/css/separator.css +9 -0
- package/dist/css/sheet.css +11 -0
- package/dist/css/sizing.css +7 -0
- package/dist/css/skeleton.css +8 -0
- package/dist/css/slider.css +8 -0
- package/dist/css/sparkline.css +8 -0
- package/dist/css/spinner.css +8 -0
- package/dist/css/stat.css +9 -0
- package/dist/css/styles.css +100 -0
- package/dist/css/switch.css +9 -0
- package/dist/css/syntax-highlighter.css +9 -0
- package/dist/css/table.css +12 -0
- package/dist/css/tabs.css +8 -0
- package/dist/css/textarea.css +10 -0
- package/dist/css/toast.css +11 -0
- package/dist/css/toggle-group.css +9 -0
- package/dist/css/toggle.css +10 -0
- package/dist/css/toolbar.css +12 -0
- package/dist/css/tooltip.css +9 -0
- package/dist/css/tree.css +10 -0
- package/dist/css/typography.css +9 -0
- package/dist/format.d.ts +25 -0
- package/dist/format.js +42 -0
- package/dist/icon.d.ts +1 -0
- package/dist/icon.js +1 -0
- package/dist/index.d.ts +7 -3
- package/dist/index.js +6 -2
- package/dist/sparkline.d.ts +41 -0
- package/dist/sparkline.js +50 -0
- package/dist/stat.d.ts +59 -0
- package/dist/stat.js +26 -0
- package/dist/status.d.ts +1 -1
- package/dist/status.js +1 -0
- package/dist/toast.d.ts +57 -1
- package/dist/toast.js +73 -2
- package/dist/tooltip.d.ts +9 -3
- package/dist/tooltip.js +4 -4
- package/package.json +90 -7
- package/src/styles.css +0 -3948
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* Autocomplete, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
10
|
+
@import './rules/popup.css';
|
|
11
|
+
@import './rules/item.css';
|
|
12
|
+
@import './rules/icon.css';
|
|
13
|
+
@import './rules/input-group.css';
|
|
14
|
+
@import './rules/combobox.css';
|
|
15
|
+
@import './rules/autocomplete.css';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* Avatar, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import '@surflane/design-tokens/presentation/avatar.css';
|
|
10
|
+
@import './rules/avatar.css';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* Badge / Status, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import '@surflane/design-tokens/presentation/badge.css';
|
|
10
|
+
@import './rules/badge.css';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* Bottom navigation, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/bottom-navigation.css';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* Breadcrumbs, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import '@surflane/design-tokens/presentation/link.css';
|
|
10
|
+
@import './rules/link.css';
|
|
11
|
+
@import '@surflane/design-tokens/presentation/breadcrumbs.css';
|
|
12
|
+
@import './rules/breadcrumbs.css';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* Button, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/button.css';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Card / Surface, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import '@surflane/design-tokens/foundations/layout.css';
|
|
9
|
+
@import './rules/layout.css';
|
|
10
|
+
@import '@surflane/design-tokens/presentation/card.css';
|
|
11
|
+
@import './rules/card.css';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* Chart, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import './rules/button.css';
|
|
10
|
+
@import './rules/scroll-area.css';
|
|
11
|
+
@import '@surflane/design-tokens/presentation/table.css';
|
|
12
|
+
@import './rules/table.css';
|
|
13
|
+
@import './rules/chart.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Checkbox Group, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/choice.css';
|
|
9
|
+
@import './rules/checkbox-group.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Checkbox, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/choice.css';
|
|
9
|
+
@import './rules/checkbox.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* ChoiceLabel, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/choice.css';
|
|
9
|
+
@import './rules/choice-label.css';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* Code block, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import './rules/button.css';
|
|
10
|
+
@import './rules/scroll-area.css';
|
|
11
|
+
@import './rules/syntax-highlighter.css';
|
|
12
|
+
@import '@surflane/design-tokens/presentation/code.css';
|
|
13
|
+
@import './rules/code.css';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Collapsible, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import './rules/button.css';
|
|
10
|
+
@import './rules/disclosure.css';
|
|
11
|
+
@import './rules/collapsible.css';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* Combobox, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
10
|
+
@import './rules/popup.css';
|
|
11
|
+
@import './rules/item.css';
|
|
12
|
+
@import './rules/icon.css';
|
|
13
|
+
@import './rules/input-group.css';
|
|
14
|
+
@import './rules/combobox.css';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* Context Menu, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
10
|
+
@import './rules/popup.css';
|
|
11
|
+
@import './rules/item.css';
|
|
12
|
+
@import './rules/icon.css';
|
|
13
|
+
@import './rules/button.css';
|
|
14
|
+
@import './rules/menu.css';
|
|
15
|
+
@import './rules/context-menu.css';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* Date / time picker, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
10
|
+
@import './rules/icon.css';
|
|
11
|
+
@import './rules/field.css';
|
|
12
|
+
@import './rules/date-picker.css';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* Dialog, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import '@surflane/design-tokens/controls.css';
|
|
10
|
+
@import './rules/dialog.css';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Drawer, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import '@surflane/design-tokens/controls.css';
|
|
10
|
+
@import './rules/panel.css';
|
|
11
|
+
@import './rules/drawer.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Empty state, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import '@surflane/design-tokens/presentation/empty-state.css';
|
|
9
|
+
@import './rules/empty-state.css';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* Field, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
10
|
+
@import './rules/field.css';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* Fieldset, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/fieldset.css';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/* File upload, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
10
|
+
@import './rules/icon.css';
|
|
11
|
+
@import './rules/button.css';
|
|
12
|
+
@import './rules/field.css';
|
|
13
|
+
@import './rules/gauge.css';
|
|
14
|
+
@import './rules/progress.css';
|
|
15
|
+
@import '@surflane/design-tokens/presentation/badge.css';
|
|
16
|
+
@import './rules/badge.css';
|
|
17
|
+
@import './rules/file-upload.css';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* Search / filter bar, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/filter-bar.css';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* Form, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/form.css';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* Icon, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* Inline message, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import '@surflane/design-tokens/presentation/inline-message.css';
|
|
10
|
+
@import './rules/inline-message.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Input, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Container, Stack, Inline, Grid and Surface, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import '@surflane/design-tokens/foundations/layout.css';
|
|
9
|
+
@import './rules/layout.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Link, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import '@surflane/design-tokens/presentation/link.css';
|
|
9
|
+
@import './rules/link.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* List, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import '@surflane/design-tokens/presentation/list.css';
|
|
9
|
+
@import './rules/list.css';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* Markdown, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import './rules/button.css';
|
|
10
|
+
@import './rules/scroll-area.css';
|
|
11
|
+
@import '@surflane/design-tokens/presentation/table.css';
|
|
12
|
+
@import './rules/table.css';
|
|
13
|
+
@import './rules/syntax-highlighter.css';
|
|
14
|
+
@import '@surflane/design-tokens/presentation/code.css';
|
|
15
|
+
@import './rules/code.css';
|
|
16
|
+
@import '@surflane/design-tokens/foundations/typography.css';
|
|
17
|
+
@import './rules/typography.css';
|
|
18
|
+
@import './rules/markdown.css';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* Menu, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
10
|
+
@import './rules/popup.css';
|
|
11
|
+
@import './rules/item.css';
|
|
12
|
+
@import './rules/icon.css';
|
|
13
|
+
@import './rules/button.css';
|
|
14
|
+
@import './rules/menu.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Menubar, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/bar.css';
|
|
9
|
+
@import './rules/menubar.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Meter, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/gauge.css';
|
|
9
|
+
@import './rules/meter.css';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* NativeSelect adapter, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/popup.css';
|
|
10
|
+
@import './rules/item.css';
|
|
11
|
+
@import './rules/icon.css';
|
|
12
|
+
@import './rules/select.css';
|
|
13
|
+
@import './rules/native-select.css';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Navigation Menu, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/popup.css';
|
|
9
|
+
@import './rules/icon.css';
|
|
10
|
+
@import './rules/button.css';
|
|
11
|
+
@import './rules/navigation-menu.css';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Number Field, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/icon.css';
|
|
10
|
+
@import './rules/input-group.css';
|
|
11
|
+
@import './rules/number-field.css';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* OTP Field, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/field-control.css';
|
|
8
|
+
@import './rules/sizing.css';
|
|
9
|
+
@import './rules/input.css';
|
|
10
|
+
@import './rules/otp-field.css';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Page header, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import '@surflane/design-tokens/foundations/typography.css';
|
|
9
|
+
@import './rules/typography.css';
|
|
10
|
+
@import '@surflane/design-tokens/foundations/page-header.css';
|
|
11
|
+
@import './rules/page-header.css';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Pagination, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/icon.css';
|
|
9
|
+
@import './rules/button.css';
|
|
10
|
+
@import '@surflane/design-tokens/presentation/pagination.css';
|
|
11
|
+
@import './rules/pagination.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Popover, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/popup.css';
|
|
9
|
+
@import './rules/popover.css';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Preview Card, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/popup.css';
|
|
9
|
+
@import '@surflane/design-tokens/presentation/link.css';
|
|
10
|
+
@import './rules/link.css';
|
|
11
|
+
@import './rules/preview-card.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Progress, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/gauge.css';
|
|
9
|
+
@import './rules/progress.css';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Radio Group, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
@import '@surflane/design-tokens/tokens.css';
|
|
5
|
+
@import '@surflane/design-tokens/presentation/base.css';
|
|
6
|
+
@import './rules/base.css';
|
|
7
|
+
@import './rules/sizing.css';
|
|
8
|
+
@import './rules/choice.css';
|
|
9
|
+
@import './rules/radio-group.css';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* Accordion, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
|
|
5
|
+
@layer surflane.components {
|
|
6
|
+
.pui-accordion {
|
|
7
|
+
display: grid;
|
|
8
|
+
gap: var(--space-2);
|
|
9
|
+
min-width: 0;
|
|
10
|
+
}
|
|
11
|
+
.pui-accordion-header {
|
|
12
|
+
margin: 0;
|
|
13
|
+
font: inherit;
|
|
14
|
+
}
|
|
15
|
+
.pui-accordion-panel {
|
|
16
|
+
height: var(--accordion-panel-height);
|
|
17
|
+
}
|
|
18
|
+
.pui-accordion-panel[data-ending-style] {
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* Alert Dialog, with the styles of what it renders. */
|
|
2
|
+
@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
|
|
3
|
+
surflane.sizes;
|
|
4
|
+
|
|
5
|
+
@layer surflane.components {
|
|
6
|
+
.pui-confirm-content {
|
|
7
|
+
--dialog-width: var(--size-dialog-small);
|
|
8
|
+
}
|
|
9
|
+
.pui-confirm-content .pui-dialog-footer {
|
|
10
|
+
border-top: 0;
|
|
11
|
+
padding-top: var(--space-2);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
@layer surflane.sizes {
|
|
15
|
+
.pui-confirm-content .pui-dialog-header {
|
|
16
|
+
padding-inline-end: var(--space-6);
|
|
17
|
+
border-bottom: 0;
|
|
18
|
+
}
|
|
19
|
+
:where([data-ui-size], [data-ui-size] *).pui-confirm-content
|
|
20
|
+
.pui-dialog-header {
|
|
21
|
+
padding-inline-end: var(--ui-card-padding);
|
|
22
|
+
}
|
|
23
|
+
}
|