react-led-digit 0.0.12 → 0.0.13

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 (12) hide show
  1. package/README.md +1 -1
  2. package/lib/Blinker/Blinker.js +2 -2
  3. package/lib/Digit/Digit.stories.d.ts +1 -0
  4. package/lib/Digit/Digit.stories.js +17 -2
  5. package/lib/Digit/components/AmpmSegments.js +1 -1
  6. package/lib/Digit/components/ColonSegments.js +1 -1
  7. package/lib/Digit/components/DigitSegments.js +1 -1
  8. package/lib/Digit/components/DotSegments.js +1 -1
  9. package/lib/Digit/digit.css +142 -104
  10. package/lib/Digit/digit.css.generated.js +143 -105
  11. package/lib/Digit/useStyleInjector.js +1 -1
  12. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  <img src="images/react-led-digit.gif" width="576" alt="react led digit" />
2
2
 
3
- # Led Digit (Seven-Segment) React Component
3
+ # Led Digit (Seven-Segment) React Component → [![npm version](https://img.shields.io/npm/v/react-led-digit.svg)](https://www.npmjs.com/package/react-led-digit)
4
4
 
5
5
  → [Codesandbox playground](https://codesandbox.io/p/sandbox/friendly-dewdney-7jvh5w)
6
6
 
package/lib/Blinker/Blinker.js CHANGED
@@ -24,7 +24,7 @@ const defaultOptions = {
24
24
  singleton: true,
25
25
  };
26
26
  class Blinker {
27
- constructor(options = defaultOptions) {
27
+ constructor(options) {
28
28
  _Blinker_instances.add(this);
29
29
  _Blinker_options.set(this, defaultOptions); // initial options
30
30
  _Blinker_state.set(this, {
@@ -42,7 +42,7 @@ class Blinker {
42
42
  if (__classPrivateFieldGet(this, _Blinker_options, "f").autoRun)
43
43
  this.start();
44
44
  };
45
- if (options.singleton === false) {
45
+ if ((options === null || options === void 0 ? void 0 : options.singleton) === false) {
46
46
  init();
47
47
  return this;
48
48
  }
package/lib/Digit/Digit.stories.d.ts CHANGED
@@ -23,3 +23,4 @@ export type DisplayProps = React.HTMLAttributes<HTMLDivElement> & {
23
23
  export declare const Clock: Story;
24
24
  export declare const Digits: Story;
25
25
  export declare const Blinking: Story;
26
+ export declare const Firefox: Story;
package/lib/Digit/Digit.stories.js CHANGED
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  return t;
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.Blinking = exports.Digits = exports.Clock = void 0;
14
+ exports.Firefox = exports.Blinking = exports.Digits = exports.Clock = void 0;
15
15
  const jsx_runtime_1 = require("react/jsx-runtime");
16
16
  const react_1 = require("react");
17
17
  const __1 = require("../");
@@ -128,7 +128,7 @@ const Display = (_a) => {
128
128
  },
129
129
  segmentStyle: {
130
130
  color: 'green',
131
- cornerShift: 'calc(var(--thickness) / 8)',
131
+ cornerShift: 'calc(var(--thickness) / 4)',
132
132
  },
133
133
  };
134
134
  if (digit === ':') {
@@ -152,6 +152,15 @@ const SimpleClock = () => {
152
152
  }, []);
153
153
  return (0, jsx_runtime_1.jsx)(Display, { scale: 2, style: grid, value: time });
154
154
  };
155
+ const FirefoxSubpixelTest = () => {
156
+ const DigitFF = (props) => ((0, jsx_runtime_1.jsx)(__1.Digit, { value: props.v || 8, segmentStyle: {
157
+ color: 'green',
158
+ thickness: '1em',
159
+ length: '5em',
160
+ spacing: '0.1em',
161
+ } }));
162
+ return ((0, jsx_runtime_1.jsxs)("div", { style: Object.assign({}, grid), children: [(0, jsx_runtime_1.jsx)(DigitFF, { v: 2 }), (0, jsx_runtime_1.jsx)(DigitFF, {}), (0, jsx_runtime_1.jsx)(DigitFF, { v: ":" }), (0, jsx_runtime_1.jsx)(DigitFF, {}), (0, jsx_runtime_1.jsx)(DigitFF, {})] }));
163
+ };
155
164
  exports.Clock = {
156
165
  args: {
157
166
  value: '0',
@@ -170,3 +179,9 @@ exports.Blinking = {
170
179
  },
171
180
  render: BlinkingDigitTest,
172
181
  };
182
+ exports.Firefox = {
183
+ args: {
184
+ value: '0',
185
+ },
186
+ render: FirefoxSubpixelTest,
187
+ };
package/lib/Digit/components/AmpmSegments.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const utils_1 = require("./utils");
21
21
  const AmpmSegments = (_a) => {
22
22
  var { className, off, shape = 'default', AM, PM } = _a, rest = __rest(_a, ["className", "off", "shape", "AM", "PM"]);
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit ampm', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] })] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit ampm', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] })] })));
24
24
  };
25
25
  exports.AmpmSegments = AmpmSegments;
package/lib/Digit/components/ColonSegments.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const utils_1 = require("./utils");
21
21
  const ColonSegments = (_a) => {
22
22
  var { className, off, shape = 'default', D1, D2 } = _a, rest = __rest(_a, ["className", "off", "shape", "D1", "D2"]);
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit colon', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] })] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit colon', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] })] })));
24
24
  };
25
25
  exports.ColonSegments = ColonSegments;
package/lib/Digit/components/DigitSegments.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const utils_1 = require("./utils");
21
21
  const DigitSegments = (_a) => {
22
22
  var { className, off, shape = 'default', A, B, C, D, E, F, G } = _a, rest = __rest(_a, ["className", "off", "shape", "A", "B", "C", "D", "E", "F", "G"]);
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] })] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] })] })));
24
24
  };
25
25
  exports.DigitSegments = DigitSegments;
package/lib/Digit/components/DotSegments.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const utils_1 = require("./utils");
21
21
  const DotSegments = (_a) => {
22
22
  var { className, off, shape = 'default', DP } = _a, rest = __rest(_a, ["className", "off", "shape", "DP"]);
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit dot', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) })] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit dot', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) })] })));
24
24
  };
25
25
  exports.DotSegments = DotSegments;
package/lib/Digit/digit.css CHANGED
@@ -7,52 +7,64 @@
7
7
  */
8
8
 
9
9
  .digit {
10
+ --scale: 1;
11
+ --thickness: calc(var(--segment-thickness, 0.25em) * var(--scale)); /* 4px */
12
+ --length: calc(var(--segment-length, 1em) * var(--scale));
13
+ --spacing: calc(var(--segment-spacing, 0.0625em) * var(--scale)); /* 1px */
14
+ --ad: calc(
15
+ var(--segment-shift-ad, 0em) * var(--scale)
16
+ ); /* moves segments A, D in vertical direction */
17
+ --corner-shift: var(
18
+ --segment-corner-shift,
19
+ 0em
20
+ ); /* distortion of outer corners of a digit */
21
+
10
22
  --color: var(--segment-color, currentColor);
11
23
  --color-off: var(--segment-color-off, var(--color));
12
- --thickness: var(--segment-thickness, 0.25em); /* =4px */
13
- --length: var(--segment-length, 1em);
14
- --spacing: var(--segment-spacing, 0.0625em); /* =1px */
15
- --shift-ad: var(--segment-shift-ad, 0em); /* squeezes segments A and D */
16
24
  --opacity-on: var(--segment-opacity-on, 1);
17
25
  --opacity-off: var(--segment-opacity-off, 0.1);
18
26
  --transition-duration: var(--segment-transition-duration, 0.25s);
19
- /* distortion of diamond corners */
20
- --corner-shift: var(--segment-corner-shift, 0em);
21
27
 
22
28
  --svg-am: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><polyline class="st0" points="1.4,11.5 1.4,11.4 3.8,3.5 4.2,3.5 6.6,11.4 6.6,11.5 "/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/><line class="st0" x1="2.6" y1="9.5" x2="5.4" y2="9.5"/></svg>');
23
29
  --svg-pm: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><path class="st0" d="M1.5,11.5V3.4h2.1c1.6,0,2.5,1,2.5,2.2s-1,2.3-2.5,2.3H2.2"/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/></svg>');
24
30
 
25
31
  /* computed values */
26
- --thick: var(--thickness);
27
- --thick-half: calc(var(--thick) * 0.5);
28
- --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
29
- --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
32
+ --len: var(--length);
33
+ --thk: var(--thickness);
34
+ --thk-minus: calc(var(--thk) * -1);
35
+ --thk-half: calc(var(--thk) / 2);
36
+ --thk-half-minus: calc(var(--thk) / -2);
30
37
 
31
- --thick-minus: calc(var(--thick) * -1);
32
- --th-half: calc(var(--thick) / 2);
33
- --th-half-minus: calc(var(--th-half) * -1);
34
- --spacing-minus: calc(var(--spacing) * -1);
35
- --sp-half: calc(var(--spacing) / 2);
36
- --sp-half-minus: calc(var(--sp-half) * -1);
38
+ --spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
39
+ --spc-minus: calc(var(--spc) * -1);
40
+ --crn: var(--corner-shift);
37
41
 
38
- --radius-round: calc(var(--thick) * 0.33);
39
- --radius-pill: var(--thick-half, 10em);
42
+ --radius-round: calc(var(--thk) * 0.33);
43
+ --radius-pill: var(--thk, 10em);
40
44
 
41
45
  display: inline-block;
42
46
  position: relative;
47
+
48
+ --digit-width: calc(var(--len) + var(--thk) + var(--spc) * 2);
49
+ --digit-height: calc(var(--len) * 2 + var(--thk) + var(--spc) * 4);
50
+
43
51
  width: var(--digit-width);
44
52
  height: var(--digit-height);
45
-
46
- /* prevents flex-shrink effect */
47
- min-width: var(--digit-width);
53
+ min-width: var(--digit-width); /* to prevent flex-shrink effects */
48
54
  min-height: var(--digit-height);
49
55
 
56
+ &.ampm {
57
+ --digit-width: calc(var(--len) + var(--thk) + var(--spc));
58
+ }
59
+ &.dot,
60
+ &.colon {
61
+ --digit-width: calc(var(--thk) * 3);
62
+ }
50
63
  &.unknown {
51
- width: var(--thick);
52
- min-width: var(--thick);
64
+ --digit-width: var(--len);
53
65
  }
54
66
 
55
- .hidden-value {
67
+ .aria-label {
56
68
  display: none;
57
69
  }
58
70
 
@@ -95,11 +107,8 @@
95
107
  opacity: 0;
96
108
  }
97
109
 
98
- /* segments */
110
+ /* segments pos */
99
111
  .segment {
100
- --th-half-100: calc(100% - var(--th-half));
101
- --shft: var(--corner-shift);
102
-
103
112
  background-color: var(--color);
104
113
  display: block;
105
114
  position: absolute;
@@ -108,133 +117,140 @@
108
117
  background-color: var(--color-off);
109
118
  border-color: var(--color-off);
110
119
  }
111
- /* vertical segments */
120
+
121
+ /* vertical segments pos */
112
122
  &.vertical {
113
- width: var(--thick);
114
- height: var(--length);
123
+ --x100--thk-half: var(--thk-half);
124
+ --y100--thk-half: calc(var(--len) - var(--thk-half));
125
+ width: var(--thk);
126
+ height: var(--len);
115
127
  left: 0;
116
128
 
117
129
  &.B,
118
130
  &.C {
119
- left: auto;
120
- right: 0;
131
+ left: calc(var(--len) + var(--spc) * 2);
121
132
  }
122
133
  }
123
- &.E,
124
- &.C {
125
- bottom: calc(var(--th-half) + var(--sp-half));
126
- }
127
134
  &.F,
128
135
  &.B {
129
- top: calc(var(--th-half) + var(--sp-half));
136
+ top: calc(var(--thk-half) + var(--spc));
137
+ }
138
+ &.E,
139
+ &.C {
140
+ top: calc(var(--thk-half) + var(--len) + var(--spc) * 3);
130
141
  }
131
142
 
132
- /* horizontal segments */
143
+ /* horizontal segments pos */
133
144
  &.horizontal {
134
- width: var(--length);
135
- height: var(--thick);
136
- left: calc(var(--th-half) + var(--sp-half));
145
+ --x100--thk-half: calc(var(--len) - var(--thk-half));
146
+ --y100--thk-half: var(--thk-half);
147
+
148
+ width: var(--len);
149
+ height: var(--thk);
150
+ left: calc(var(--thk-half) + var(--spc));
137
151
 
138
152
  &.A,
139
153
  &.D {
140
- width: calc(var(--length) + var(--shft) * 2);
141
- left: calc(var(--th-half) + var(--sp-half) - var(--shft));
154
+ width: calc(var(--len) + var(--crn) * 2);
155
+ left: calc(var(--thk-half) + var(--spc) - var(--crn));
142
156
  }
143
157
  &.A {
144
- top: calc(var(--shift-ad) + var(--shft));
158
+ top: calc(var(--ad) + var(--crn));
145
159
  }
146
160
  &.D {
147
- bottom: calc(var(--shift-ad) + var(--shft));
161
+ top: calc(var(--len) * 2 + var(--spc) * 4 - var(--ad) - var(--crn));
148
162
  }
149
163
  &.G {
150
- bottom: calc(var(--length) + var(--spacing));
164
+ top: calc(var(--len) + var(--spc) * 2);
151
165
  }
152
166
  }
153
167
 
154
168
  /* spearheads */
155
169
  &.horizontal {
156
- clip-path: polygon(
157
- 0% 50%,
158
- var(--th-half) 0%,
159
- var(--th-half-100) 0%,
160
- 100% 50%,
161
- var(--th-half-100) 100%,
162
- var(--th-half) 100%
163
- );
164
170
  &.A {
165
171
  /* x y */
166
172
  clip-path: polygon(
167
- 0% calc(50% - var(--shft)),
168
- calc(var(--th-half) - var(--shft)) 0%,
169
- calc(var(--th-half-100) + var(--shft)) 0%,
170
- 100% calc(50% - var(--shft)),
171
- calc(var(--th-half-100) - var(--shft)) 100%,
172
- calc(var(--th-half) + var(--shft)) 100%
173
+ 0% calc(50% - var(--crn)),
174
+ calc(var(--thk-half) - var(--crn)) 0%,
175
+ calc(var(--x100--thk-half) + var(--crn) * 3) 0%,
176
+ 100% calc(50% - var(--crn)),
177
+ calc(var(--x100--thk-half) + var(--crn)) 100%,
178
+ calc(var(--thk-half) + var(--crn)) 100%
179
+ );
180
+ }
181
+ &.G {
182
+ clip-path: polygon(
183
+ 0% 50%,
184
+ var(--thk-half) 0%,
185
+ var(--x100--thk-half) 0%,
186
+ 100% 50%,
187
+ var(--x100--thk-half) 100%,
188
+ var(--thk-half) 100%
173
189
  );
174
190
  }
175
191
  &.D {
176
192
  /* x y */
177
193
  clip-path: polygon(
178
- 0% calc(50% + var(--shft)),
179
- calc(var(--th-half) + var(--shft)) 0%,
180
- calc(var(--th-half-100) - var(--shft)) 0%,
181
- 100% calc(50% + var(--shft)),
182
- calc(var(--th-half-100) + var(--shft)) 100%,
183
- calc(var(--th-half) - var(--shft)) 100%
194
+ 0% calc(50% + var(--crn)),
195
+ calc(var(--thk-half) + var(--crn)) 0%,
196
+ calc(var(--x100--thk-half) + var(--crn)) 0%,
197
+ 100% calc(50% + var(--crn)),
198
+ calc(var(--x100--thk-half) + var(--crn) * 3) 100%,
199
+ calc(var(--thk-half) - var(--crn)) 100%
184
200
  );
185
201
  }
186
202
  }
187
203
  &.vertical {
188
204
  clip-path: polygon(
189
205
  50% 0%,
190
- 0% var(--th-half),
191
- 0% var(--th-half-100),
206
+ 0% var(--thk-half),
207
+ 0% var(--y100--thk-half),
192
208
  50% 100%,
193
- 100% var(--th-half-100),
194
- 100% var(--th-half)
209
+ 100% var(--y100--thk-half),
210
+ 100% var(--thk-half)
195
211
  );
196
212
  &.B {
197
213
  /* x y */
198
214
  clip-path: polygon(
199
- calc(50% + var(--shft)) 0%,
200
- 0% calc(var(--th-half) + var(--shft)),
201
- 0% var(--th-half-100),
215
+ calc(50% + var(--crn)) 0%,
216
+ 0% calc(var(--thk-half) + var(--crn)),
217
+ 0% var(--y100--thk-half),
202
218
  50% 100%,
203
- 100% var(--th-half-100),
204
- 100% calc(var(--th-half) - var(--shft))
219
+ 100% var(--y100--thk-half),
220
+ 100% calc(var(--thk-half) - var(--crn))
205
221
  );
206
222
  }
207
223
  &.C {
208
224
  /* x y */
209
225
  clip-path: polygon(
210
226
  50% 0%,
211
- 0% var(--th-half),
212
- 0% calc(var(--th-half-100) - var(--shft)),
213
- calc(50% + var(--shft)) 100%,
214
- 100% calc(var(--th-half-100) + var(--shft)),
215
- 100% var(--th-half)
227
+ 0% var(--thk-half),
228
+ 0% calc(var(--y100--thk-half) - var(--crn)),
229
+ calc(50% + var(--crn)) 100%,
230
+ 100% calc(var(--y100--thk-half) + var(--crn)),
231
+ 100% var(--thk-half)
216
232
  );
217
233
  }
218
234
  &.E {
219
235
  /* x y */
220
236
  clip-path: polygon(
221
237
  50% 0%,
222
- 0% var(--th-half),
223
- 0% calc(var(--th-half-100) + var(--shft)),
224
- calc(50% - var(--shft)) 100%,
225
- 100% calc(var(--th-half-100) - var(--shft)),
226
- 100% var(--th-half)
238
+ 0% var(--thk-half),
239
+ 0% calc(var(--y100--thk-half) + var(--crn)),
240
+ calc(50% - var(--crn)) 100%,
241
+ 100% calc(var(--y100--thk-half) - var(--crn)),
242
+ 100% var(--thk-half)
227
243
  );
228
244
  }
229
245
  &.F {
230
246
  /* x y */
231
247
  clip-path: polygon(
232
- calc(50% - var(--shft)) 0%,
233
- 0% calc(var(--th-half) - var(--shft)),
234
- 0% var(--th-half-100),
248
+ calc(50% - var(--crn)) 0%,
249
+ 0% calc(var(--thk-half) - var(--crn)),
250
+ 0% var(--y100--thk-half),
235
251
  50% 100%,
236
- 100% var(--th-half-100),
237
- 100% calc(var(--th-half) + var(--shft))
252
+ 100% var(--y100--thk-half),
253
+ 100% calc(var(--thk-half) + var(--crn))
238
254
  );
239
255
  }
240
256
  }
@@ -264,12 +280,10 @@
264
280
  }
265
281
 
266
282
  &.ampm {
267
- --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
268
-
269
283
  .segment {
270
284
  background: var(--color);
271
285
  width: var(--digit-width);
272
- height: var(--length);
286
+ height: var(--len);
273
287
 
274
288
  mask-origin: fill-box;
275
289
  mask-position: center;
@@ -280,7 +294,7 @@
280
294
  }
281
295
 
282
296
  .AM {
283
- bottom: calc(var(--digit-height) / 2 + var(--thick) / 4);
297
+ top: calc(var(--digit-height) / 2 - var(--thk) / 4 - var(--len));
284
298
  mask-image: var(--svg-am);
285
299
  }
286
300
  &.shape-rect .AM,
@@ -290,7 +304,7 @@
290
304
  mask-image: var(--svg-am), linear-gradient(var(--color) 0 0);
291
305
  }
292
306
  .PM {
293
- top: calc(var(--digit-height) / 2 + var(--thick) / 4);
307
+ top: calc(var(--digit-height) / 2 + var(--thk) / 4);
294
308
  mask-image: var(--svg-pm);
295
309
  }
296
310
  &.shape-rect .PM,
@@ -309,24 +323,25 @@
309
323
 
310
324
  &.dot,
311
325
  &.colon {
312
- --digit-width: calc(var(--thick) * 3);
313
-
314
326
  & .segment {
315
- --dot-border-width: calc(var(--thick) * 0.6);
327
+ --dot-border-width: calc(var(--thk) * 0.6);
328
+ --dot-size: calc(var(--dot-border-width) * 2);
329
+ --dots-distance: calc(var(--thk) / 2);
316
330
 
317
- border: var(--dot-border-width) solid var(--color); /* dot made from border to have same size on zoom */
318
331
  position: absolute;
319
- width: 0;
320
- height: 0;
332
+ width: var(--dot-size);
333
+ height: var(--dot-size);
321
334
  left: calc(var(--digit-width) / 2 - var(--dot-border-width));
322
335
  }
323
336
  /* lower part of a colon */
324
337
  .segment.D1 {
325
- top: calc(var(--digit-height) / 3 - var(--thick) / 2);
338
+ top: calc(
339
+ var(--digit-height) / 2 - var(--dots-distance) - var(--dot-size)
340
+ );
326
341
  }
327
342
  /* upper part of a colon */
328
343
  .segment.D2 {
329
- bottom: calc(var(--digit-height) / 3 - var(--thick) / 2);
344
+ top: calc(var(--digit-height) / 2 + var(--dots-distance));
330
345
  }
331
346
  /* dot itself */
332
347
  .segment.DP {
@@ -337,3 +352,26 @@
337
352
  }
338
353
  }
339
354
  }
355
+
356
+ /* better subpixel rendering (Chrome) */
357
+ .digit {
358
+ transform: rotate3d(1, -1, 0, 0.025deg);
359
+ }
360
+
361
+ /* better subpixel rendering (Firefox) */
362
+ @-moz-document url-prefix() {
363
+ .digit {
364
+ --scale: 4;
365
+ --descale: calc(1 / var(--scale));
366
+ --descaled-width: calc(var(--digit-width) / var(--scale));
367
+ --descaled-height: calc(var(--digit-height) / var(--scale));
368
+
369
+ transform: scale(var(--descale)) rotate3d(1, -1, 0, 0.025deg);
370
+ transform-origin: 0% 0%;
371
+
372
+ width: var(--descaled-width);
373
+ height: var(--descaled-height);
374
+ min-width: var(--descaled-width);
375
+ min-height: var(--descaled-height);
376
+ }
377
+ }
package/lib/Digit/digit.css.generated.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  const css = {
4
4
  src: `src/Digit/digit.css`,
5
- hash: `2ftmruudz6u`,
5
+ hash: `y5tdgosc5m`,
6
6
  content: `
7
7
  /**
8
8
  * A
@@ -13,52 +13,64 @@ const css = {
13
13
  */
14
14
 
15
15
  .digit {
16
+ --scale: 1;
17
+ --thickness: calc(var(--segment-thickness, 0.25em) * var(--scale)); /* 4px */
18
+ --length: calc(var(--segment-length, 1em) * var(--scale));
19
+ --spacing: calc(var(--segment-spacing, 0.0625em) * var(--scale)); /* 1px */
20
+ --ad: calc(
21
+ var(--segment-shift-ad, 0em) * var(--scale)
22
+ ); /* moves segments A, D in vertical direction */
23
+ --corner-shift: var(
24
+ --segment-corner-shift,
25
+ 0em
26
+ ); /* distortion of outer corners of a digit */
27
+
16
28
  --color: var(--segment-color, currentColor);
17
29
  --color-off: var(--segment-color-off, var(--color));
18
- --thickness: var(--segment-thickness, 0.25em); /* =4px */
19
- --length: var(--segment-length, 1em);
20
- --spacing: var(--segment-spacing, 0.0625em); /* =1px */
21
- --shift-ad: var(--segment-shift-ad, 0em); /* squeezes segments A and D */
22
30
  --opacity-on: var(--segment-opacity-on, 1);
23
31
  --opacity-off: var(--segment-opacity-off, 0.1);
24
32
  --transition-duration: var(--segment-transition-duration, 0.25s);
25
- /* distortion of diamond corners */
26
- --corner-shift: var(--segment-corner-shift, 0em);
27
33
 
28
34
  --svg-am: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><polyline class="st0" points="1.4,11.5 1.4,11.4 3.8,3.5 4.2,3.5 6.6,11.4 6.6,11.5 "/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/><line class="st0" x1="2.6" y1="9.5" x2="5.4" y2="9.5"/></svg>');
29
35
  --svg-pm: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><path class="st0" d="M1.5,11.5V3.4h2.1c1.6,0,2.5,1,2.5,2.2s-1,2.3-2.5,2.3H2.2"/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/></svg>');
30
36
 
31
37
  /* computed values */
32
- --thick: var(--thickness);
33
- --thick-half: calc(var(--thick) * 0.5);
34
- --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
35
- --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
38
+ --len: var(--length);
39
+ --thk: var(--thickness);
40
+ --thk-minus: calc(var(--thk) * -1);
41
+ --thk-half: calc(var(--thk) / 2);
42
+ --thk-half-minus: calc(var(--thk) / -2);
36
43
 
37
- --thick-minus: calc(var(--thick) * -1);
38
- --th-half: calc(var(--thick) / 2);
39
- --th-half-minus: calc(var(--th-half) * -1);
40
- --spacing-minus: calc(var(--spacing) * -1);
41
- --sp-half: calc(var(--spacing) / 2);
42
- --sp-half-minus: calc(var(--sp-half) * -1);
44
+ --spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
45
+ --spc-minus: calc(var(--spc) * -1);
46
+ --crn: var(--corner-shift);
43
47
 
44
- --radius-round: calc(var(--thick) * 0.33);
45
- --radius-pill: var(--thick-half, 10em);
48
+ --radius-round: calc(var(--thk) * 0.33);
49
+ --radius-pill: var(--thk, 10em);
46
50
 
47
51
  display: inline-block;
48
52
  position: relative;
53
+
54
+ --digit-width: calc(var(--len) + var(--thk) + var(--spc) * 2);
55
+ --digit-height: calc(var(--len) * 2 + var(--thk) + var(--spc) * 4);
56
+
49
57
  width: var(--digit-width);
50
58
  height: var(--digit-height);
51
-
52
- /* prevents flex-shrink effect */
53
- min-width: var(--digit-width);
59
+ min-width: var(--digit-width); /* to prevent flex-shrink effects */
54
60
  min-height: var(--digit-height);
55
61
 
62
+ &.ampm {
63
+ --digit-width: calc(var(--len) + var(--thk) + var(--spc));
64
+ }
65
+ &.dot,
66
+ &.colon {
67
+ --digit-width: calc(var(--thk) * 3);
68
+ }
56
69
  &.unknown {
57
- width: var(--thick);
58
- min-width: var(--thick);
70
+ --digit-width: var(--len);
59
71
  }
60
72
 
61
- .hidden-value {
73
+ .aria-label {
62
74
  display: none;
63
75
  }
64
76
 
@@ -101,11 +113,8 @@ const css = {
101
113
  opacity: 0;
102
114
  }
103
115
 
104
- /* segments */
116
+ /* segments pos */
105
117
  .segment {
106
- --th-half-100: calc(100% - var(--th-half));
107
- --shft: var(--corner-shift);
108
-
109
118
  background-color: var(--color);
110
119
  display: block;
111
120
  position: absolute;
@@ -114,133 +123,140 @@ const css = {
114
123
  background-color: var(--color-off);
115
124
  border-color: var(--color-off);
116
125
  }
117
- /* vertical segments */
126
+
127
+ /* vertical segments pos */
118
128
  &.vertical {
119
- width: var(--thick);
120
- height: var(--length);
129
+ --x100--thk-half: var(--thk-half);
130
+ --y100--thk-half: calc(var(--len) - var(--thk-half));
131
+ width: var(--thk);
132
+ height: var(--len);
121
133
  left: 0;
122
134
 
123
135
  &.B,
124
136
  &.C {
125
- left: auto;
126
- right: 0;
137
+ left: calc(var(--len) + var(--spc) * 2);
127
138
  }
128
139
  }
129
- &.E,
130
- &.C {
131
- bottom: calc(var(--th-half) + var(--sp-half));
132
- }
133
140
  &.F,
134
141
  &.B {
135
- top: calc(var(--th-half) + var(--sp-half));
142
+ top: calc(var(--thk-half) + var(--spc));
143
+ }
144
+ &.E,
145
+ &.C {
146
+ top: calc(var(--thk-half) + var(--len) + var(--spc) * 3);
136
147
  }
137
148
 
138
- /* horizontal segments */
149
+ /* horizontal segments pos */
139
150
  &.horizontal {
140
- width: var(--length);
141
- height: var(--thick);
142
- left: calc(var(--th-half) + var(--sp-half));
151
+ --x100--thk-half: calc(var(--len) - var(--thk-half));
152
+ --y100--thk-half: var(--thk-half);
153
+
154
+ width: var(--len);
155
+ height: var(--thk);
156
+ left: calc(var(--thk-half) + var(--spc));
143
157
 
144
158
  &.A,
145
159
  &.D {
146
- width: calc(var(--length) + var(--shft) * 2);
147
- left: calc(var(--th-half) + var(--sp-half) - var(--shft));
160
+ width: calc(var(--len) + var(--crn) * 2);
161
+ left: calc(var(--thk-half) + var(--spc) - var(--crn));
148
162
  }
149
163
  &.A {
150
- top: calc(var(--shift-ad) + var(--shft));
164
+ top: calc(var(--ad) + var(--crn));
151
165
  }
152
166
  &.D {
153
- bottom: calc(var(--shift-ad) + var(--shft));
167
+ top: calc(var(--len) * 2 + var(--spc) * 4 - var(--ad) - var(--crn));
154
168
  }
155
169
  &.G {
156
- bottom: calc(var(--length) + var(--spacing));
170
+ top: calc(var(--len) + var(--spc) * 2);
157
171
  }
158
172
  }
159
173
 
160
174
  /* spearheads */
161
175
  &.horizontal {
162
- clip-path: polygon(
163
- 0% 50%,
164
- var(--th-half) 0%,
165
- var(--th-half-100) 0%,
166
- 100% 50%,
167
- var(--th-half-100) 100%,
168
- var(--th-half) 100%
169
- );
170
176
  &.A {
171
177
  /* x y */
172
178
  clip-path: polygon(
173
- 0% calc(50% - var(--shft)),
174
- calc(var(--th-half) - var(--shft)) 0%,
175
- calc(var(--th-half-100) + var(--shft)) 0%,
176
- 100% calc(50% - var(--shft)),
177
- calc(var(--th-half-100) - var(--shft)) 100%,
178
- calc(var(--th-half) + var(--shft)) 100%
179
+ 0% calc(50% - var(--crn)),
180
+ calc(var(--thk-half) - var(--crn)) 0%,
181
+ calc(var(--x100--thk-half) + var(--crn) * 3) 0%,
182
+ 100% calc(50% - var(--crn)),
183
+ calc(var(--x100--thk-half) + var(--crn)) 100%,
184
+ calc(var(--thk-half) + var(--crn)) 100%
185
+ );
186
+ }
187
+ &.G {
188
+ clip-path: polygon(
189
+ 0% 50%,
190
+ var(--thk-half) 0%,
191
+ var(--x100--thk-half) 0%,
192
+ 100% 50%,
193
+ var(--x100--thk-half) 100%,
194
+ var(--thk-half) 100%
179
195
  );
180
196
  }
181
197
  &.D {
182
198
  /* x y */
183
199
  clip-path: polygon(
184
- 0% calc(50% + var(--shft)),
185
- calc(var(--th-half) + var(--shft)) 0%,
186
- calc(var(--th-half-100) - var(--shft)) 0%,
187
- 100% calc(50% + var(--shft)),
188
- calc(var(--th-half-100) + var(--shft)) 100%,
189
- calc(var(--th-half) - var(--shft)) 100%
200
+ 0% calc(50% + var(--crn)),
201
+ calc(var(--thk-half) + var(--crn)) 0%,
202
+ calc(var(--x100--thk-half) + var(--crn)) 0%,
203
+ 100% calc(50% + var(--crn)),
204
+ calc(var(--x100--thk-half) + var(--crn) * 3) 100%,
205
+ calc(var(--thk-half) - var(--crn)) 100%
190
206
  );
191
207
  }
192
208
  }
193
209
  &.vertical {
194
210
  clip-path: polygon(
195
211
  50% 0%,
196
- 0% var(--th-half),
197
- 0% var(--th-half-100),
212
+ 0% var(--thk-half),
213
+ 0% var(--y100--thk-half),
198
214
  50% 100%,
199
- 100% var(--th-half-100),
200
- 100% var(--th-half)
215
+ 100% var(--y100--thk-half),
216
+ 100% var(--thk-half)
201
217
  );
202
218
  &.B {
203
219
  /* x y */
204
220
  clip-path: polygon(
205
- calc(50% + var(--shft)) 0%,
206
- 0% calc(var(--th-half) + var(--shft)),
207
- 0% var(--th-half-100),
221
+ calc(50% + var(--crn)) 0%,
222
+ 0% calc(var(--thk-half) + var(--crn)),
223
+ 0% var(--y100--thk-half),
208
224
  50% 100%,
209
- 100% var(--th-half-100),
210
- 100% calc(var(--th-half) - var(--shft))
225
+ 100% var(--y100--thk-half),
226
+ 100% calc(var(--thk-half) - var(--crn))
211
227
  );
212
228
  }
213
229
  &.C {
214
230
  /* x y */
215
231
  clip-path: polygon(
216
232
  50% 0%,
217
- 0% var(--th-half),
218
- 0% calc(var(--th-half-100) - var(--shft)),
219
- calc(50% + var(--shft)) 100%,
220
- 100% calc(var(--th-half-100) + var(--shft)),
221
- 100% var(--th-half)
233
+ 0% var(--thk-half),
234
+ 0% calc(var(--y100--thk-half) - var(--crn)),
235
+ calc(50% + var(--crn)) 100%,
236
+ 100% calc(var(--y100--thk-half) + var(--crn)),
237
+ 100% var(--thk-half)
222
238
  );
223
239
  }
224
240
  &.E {
225
241
  /* x y */
226
242
  clip-path: polygon(
227
243
  50% 0%,
228
- 0% var(--th-half),
229
- 0% calc(var(--th-half-100) + var(--shft)),
230
- calc(50% - var(--shft)) 100%,
231
- 100% calc(var(--th-half-100) - var(--shft)),
232
- 100% var(--th-half)
244
+ 0% var(--thk-half),
245
+ 0% calc(var(--y100--thk-half) + var(--crn)),
246
+ calc(50% - var(--crn)) 100%,
247
+ 100% calc(var(--y100--thk-half) - var(--crn)),
248
+ 100% var(--thk-half)
233
249
  );
234
250
  }
235
251
  &.F {
236
252
  /* x y */
237
253
  clip-path: polygon(
238
- calc(50% - var(--shft)) 0%,
239
- 0% calc(var(--th-half) - var(--shft)),
240
- 0% var(--th-half-100),
254
+ calc(50% - var(--crn)) 0%,
255
+ 0% calc(var(--thk-half) - var(--crn)),
256
+ 0% var(--y100--thk-half),
241
257
  50% 100%,
242
- 100% var(--th-half-100),
243
- 100% calc(var(--th-half) + var(--shft))
258
+ 100% var(--y100--thk-half),
259
+ 100% calc(var(--thk-half) + var(--crn))
244
260
  );
245
261
  }
246
262
  }
@@ -270,12 +286,10 @@ const css = {
270
286
  }
271
287
 
272
288
  &.ampm {
273
- --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
274
-
275
289
  .segment {
276
290
  background: var(--color);
277
291
  width: var(--digit-width);
278
- height: var(--length);
292
+ height: var(--len);
279
293
 
280
294
  mask-origin: fill-box;
281
295
  mask-position: center;
@@ -286,7 +300,7 @@ const css = {
286
300
  }
287
301
 
288
302
  .AM {
289
- bottom: calc(var(--digit-height) / 2 + var(--thick) / 4);
303
+ top: calc(var(--digit-height) / 2 - var(--thk) / 4 - var(--len));
290
304
  mask-image: var(--svg-am);
291
305
  }
292
306
  &.shape-rect .AM,
@@ -296,7 +310,7 @@ const css = {
296
310
  mask-image: var(--svg-am), linear-gradient(var(--color) 0 0);
297
311
  }
298
312
  .PM {
299
- top: calc(var(--digit-height) / 2 + var(--thick) / 4);
313
+ top: calc(var(--digit-height) / 2 + var(--thk) / 4);
300
314
  mask-image: var(--svg-pm);
301
315
  }
302
316
  &.shape-rect .PM,
@@ -315,24 +329,25 @@ const css = {
315
329
 
316
330
  &.dot,
317
331
  &.colon {
318
- --digit-width: calc(var(--thick) * 3);
319
-
320
332
  & .segment {
321
- --dot-border-width: calc(var(--thick) * 0.6);
333
+ --dot-border-width: calc(var(--thk) * 0.6);
334
+ --dot-size: calc(var(--dot-border-width) * 2);
335
+ --dots-distance: calc(var(--thk) / 2);
322
336
 
323
- border: var(--dot-border-width) solid var(--color); /* dot made from border to have same size on zoom */
324
337
  position: absolute;
325
- width: 0;
326
- height: 0;
338
+ width: var(--dot-size);
339
+ height: var(--dot-size);
327
340
  left: calc(var(--digit-width) / 2 - var(--dot-border-width));
328
341
  }
329
342
  /* lower part of a colon */
330
343
  .segment.D1 {
331
- top: calc(var(--digit-height) / 3 - var(--thick) / 2);
344
+ top: calc(
345
+ var(--digit-height) / 2 - var(--dots-distance) - var(--dot-size)
346
+ );
332
347
  }
333
348
  /* upper part of a colon */
334
349
  .segment.D2 {
335
- bottom: calc(var(--digit-height) / 3 - var(--thick) / 2);
350
+ top: calc(var(--digit-height) / 2 + var(--dots-distance));
336
351
  }
337
352
  /* dot itself */
338
353
  .segment.DP {
@@ -343,6 +358,29 @@ const css = {
343
358
  }
344
359
  }
345
360
  }
361
+
362
+ /* better subpixel rendering (Chrome) */
363
+ .digit {
364
+ transform: rotate3d(1, -1, 0, 0.025deg);
365
+ }
366
+
367
+ /* better subpixel rendering (Firefox) */
368
+ @-moz-document url-prefix() {
369
+ .digit {
370
+ --scale: 4;
371
+ --descale: calc(1 / var(--scale));
372
+ --descaled-width: calc(var(--digit-width) / var(--scale));
373
+ --descaled-height: calc(var(--digit-height) / var(--scale));
374
+
375
+ transform: scale(var(--descale)) rotate3d(1, -1, 0, 0.025deg);
376
+ transform-origin: 0% 0%;
377
+
378
+ width: var(--descaled-width);
379
+ height: var(--descaled-height);
380
+ min-width: var(--descaled-width);
381
+ min-height: var(--descaled-height);
382
+ }
383
+ }
346
384
  `,
347
385
  };
348
386
 
package/lib/Digit/useStyleInjector.js CHANGED
@@ -30,7 +30,7 @@ const useStyleInjector = (css, dependencies = [], options) => {
30
30
  [scopeAttribute]: o.scopeID ? true : undefined,
31
31
  };
32
32
  };
33
- // Inject style into head if it
33
+ // Inject style into head
34
34
  class StyleInjector {
35
35
  constructor() {
36
36
  _StyleInjector_styles.set(this, new Map());
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-led-digit",
3
- "version": "0.0.12",
3
+ "version": "0.0.13",
4
4
  "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
5
5
  "main": "./lib/index.js",
6
6
  "files": [