@emuanalytics/flow-rdf-ui 4.1.0-preview.15 → 4.1.0-preview.16

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.
Files changed (10) hide show
  1. package/dist/components/range/range.component.mjs +1 -1
  2. package/dist/components/switch/switch.styles.mjs +35 -15
  3. package/dist/custom-elements.json +745 -745
  4. package/dist/package.json.mjs +1 -1
  5. package/dist/vscode.html-custom-data.json +88 -88
  6. package/package.json +1 -1
  7. package/themes/dark.css +18 -0
  8. package/themes/dark.styles.js +20 -0
  9. package/themes/light.css +81 -55
  10. package/themes/light.styles.js +82 -54
package/dist/components/range/range.component.mjs CHANGED
@@ -114,7 +114,7 @@ class FlowUiRange extends FlowRdfFormControl {
114
114
  }
115
115
  handleValueChange() {
116
116
  this.formControlController.updateValidity();
117
- this.input.value = this.value.toString();
117
+ this.input.value = this.value?.toString();
118
118
  this.value = parseFloat(this.input.value);
119
119
  this.syncRange();
120
120
  }
package/dist/components/switch/switch.styles.mjs CHANGED
@@ -9,7 +9,27 @@ const styles = css`
9
9
  :host {
10
10
  display: inline-block;
11
11
  --switch-height: var(--flow-ui-toggle-size-medium);
12
- --switch-thumb-size: calc(var(--flow-ui-toggle-size-medium));
12
+
13
+ --switch-color: var(--flow-ui-switch-color, var(--flow-ui-color-neutral-400));
14
+ --switch-border-color: var(--flow-ui-switch-border-color, var(--flow-ui-color-neutral-500));
15
+
16
+ --switch-color-hover: var(--flow-ui-switch-color-hover, var(--flow-ui-color-neutral-400));
17
+ --switch-border-color-hover: var(--flow-ui-switch-border-color-hover, var(--flow-ui-color-neutral-500));
18
+
19
+ --switch-color-checked: var(--flow-ui-switch-color-checked, var(--flow-ui-color-primary-500));
20
+ --switch-border-color-checked: var(--flow-ui-switch-border-color-checked, var(--flow-ui-color-primary-500));
21
+
22
+ --thumb-color: var(--flow-ui-switch-thumb-color, var(--flow-ui-color-neutral-800));
23
+ --thumb-border-color: var(--flow-ui-switch-thumb-border-color, var(--flow-ui-color-neutral-800));
24
+
25
+ --thumb-color-hover: var(--flow-ui-switch-thumb-color-hover, var(--flow-ui-color-neutral-900));
26
+ --thumb-border-color-hover: var(--flow-ui-switch-thumb-border-color-hover, var(--flow-ui-color-neutral-950));
27
+
28
+ --thumb-color-checked: var(--flow-ui-switch-thumb-color-checked, var(--flow-ui-color-neutral-950));
29
+ --thumb-border-color-checked: var(--flow-ui-switch-thumb-border-color-checked, var(--flow-ui-color-neutral-950));
30
+
31
+ --thumb-size: calc(var(--flow-ui-toggle-size-medium));
32
+
13
33
  --switch-width: calc(var(--switch-height) * 1.8);
14
34
  }
15
35
 
@@ -44,8 +64,8 @@ const styles = css`
44
64
  justify-content: center;
45
65
  width: var(--switch-width);
46
66
  height: var(--switch-height);
47
- background-color: var(--flow-ui-color-neutral-300);
48
- border: solid var(--flow-ui-control-border-width) var(--flow-ui-color-neutral-400);
67
+ background-color: var(--switch-color);
68
+ border: solid var(--flow-ui-control-border-width) var(--switch-border-color);
49
69
  border-radius: var(--switch-height);
50
70
  transition:
51
71
  var(--flow-ui-transition-fast) border-color,
@@ -54,11 +74,11 @@ const styles = css`
54
74
  }
55
75
 
56
76
  .switch__control .switch__thumb {
57
- width: var(--switch-thumb-size);
58
- height: var(--switch-thumb-size);
59
- background-color: var(--flow-ui-color-neutral-800);
77
+ width: var(--thumb-size);
78
+ height: var(--thumb-size);
79
+ background-color: var(--thumb-color);
60
80
  border-radius: 50%;
61
- border: solid var(--flow-ui-control-border-width) var(--flow-ui-color-neutral-800);
81
+ border: solid var(--flow-ui-control-border-width) var(--thumb-border-color);
62
82
  translate: calc((var(--switch-width) - var(--switch-height)) / -2);
63
83
  transition:
64
84
  var(--flow-ui-transition-fast) translate ease,
@@ -77,13 +97,13 @@ const styles = css`
77
97
 
78
98
  /* Hover */
79
99
  .form-control:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
80
- background-color: var(--flow-ui-color-neutral-400);
81
- border-color: var(--flow-ui-control-border-color);
100
+ background-color: var(--switch-color-hover);
101
+ border-color: var(--switch-border-color-hover);
82
102
  }
83
103
 
84
104
  .form-control:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
85
- background-color: var(--flow-ui-color-neutral-900);
86
- border-color: var(--flow-ui-color-neutral-900);
105
+ background-color: var(--thumb-color-hover);
106
+ border-color: var(--thumb-border-color-hover);
87
107
  }
88
108
 
89
109
  /* Focus */
@@ -94,13 +114,13 @@ const styles = css`
94
114
 
95
115
  /* Checked */
96
116
  .switch--checked .switch__control {
97
- background-color: var(--flow-ui-color-primary-500);
98
- border-color: var(--flow-ui-color-primary-500);
117
+ background-color: var(--switch-color-checked);
118
+ border-color: var(--switch-border-color-checked);
99
119
  }
100
120
 
101
121
  .switch--checked .switch__control .switch__thumb {
102
- background-color: var(--flow-ui-color-neutral-950);
103
- border-color: var(--flow-ui-color-primary-800);
122
+ background-color: var(--thumb-color-checked);
123
+ border-color: var(--thumb-border-color-checked);
104
124
  translate: calc((var(--switch-width) - var(--switch-height)) / 2);
105
125
  }
106
126