@symbo.ls/scratch 2.11.212 → 2.11.213

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 (14) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/index.js +14 -12
  3. package/dist/cjs/set.js +4 -4
  4. package/dist/cjs/system/index.js +14 -12
  5. package/dist/cjs/system/spacing.js +14 -12
  6. package/dist/cjs/system/timing.js +14 -12
  7. package/dist/cjs/system/typography.js +14 -12
  8. package/dist/cjs/transforms/index.js +10 -8
  9. package/dist/cjs/utils/index.js +14 -12
  10. package/dist/cjs/utils/sequence.js +10 -8
  11. package/dist/cjs/utils/var.js +4 -4
  12. package/package.json +2 -2
  13. package/src/utils/sequence.js +12 -8
  14. package/src/utils/var.js +4 -4
package/README.md CHANGED
@@ -33,7 +33,7 @@ set({
33
33
  })
34
34
  ```
35
35
 
36
- Read more at [docs](https://www.docs.symbols.app/design-system)
36
+ Read more at [docs](https://www.symbols.app/developersdesign-system)
37
37
 
38
38
  ### TODO:
39
39
  - [ ] Accessibility (WCAG) automated tests
package/dist/cjs/index.js CHANGED
@@ -2018,19 +2018,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
2018
2018
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
2019
2019
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
2020
2020
  let mediaName = "";
2021
- if (absValue.includes("-")) {
2022
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
2023
- absValue = absValue.split("-")[0];
2021
+ if (absValue.includes("_")) {
2022
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
2023
+ absValue = absValue.split("_")[0];
2024
2024
  }
2025
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
2025
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
2026
2026
  if (absValue.includes("+")) {
2027
- const args = absValue.split("+");
2028
- const [first, second] = args;
2027
+ const [first, second] = absValue.split("+");
2029
2028
  const joint = `${varValue(first)} + ${varValue(second)}`;
2030
2029
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
2030
+ } else if (absValue.includes("*")) {
2031
+ const [first, second] = absValue.split("*");
2032
+ const joint = `${varValue(first)} * ${varValue(second)}`;
2033
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
2031
2034
  } else if (absValue.includes("-")) {
2032
- const args = absValue.split("-");
2033
- const [first, second] = args;
2035
+ const [first, second] = absValue.split("-");
2034
2036
  const joint = `${varValue(first)} - ${varValue(second)}`;
2035
2037
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
2036
2038
  }
@@ -2096,14 +2098,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
2096
2098
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
2097
2099
  if (!underMediaQuery)
2098
2100
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
2099
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
2100
- CSS_VARS2[item.variable + "-" + mediaName] = value;
2101
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
2102
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
2101
2103
  } else {
2102
2104
  if (options.useDefault === false) {
2103
2105
  CSS_VARS2[item.variable] = value;
2104
2106
  } else {
2105
- CSS_VARS2[item.variable + "-default"] = value;
2106
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
2107
+ CSS_VARS2[item.variable + "_default"] = value;
2108
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
2107
2109
  }
2108
2110
  }
2109
2111
  }
package/dist/cjs/set.js CHANGED
@@ -1797,14 +1797,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1797
1797
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1798
1798
  if (!underMediaQuery)
1799
1799
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1800
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1801
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1800
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1801
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1802
1802
  } else {
1803
1803
  if (options.useDefault === false) {
1804
1804
  CSS_VARS2[item.variable] = value;
1805
1805
  } else {
1806
- CSS_VARS2[item.variable + "-default"] = value;
1807
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1806
+ CSS_VARS2[item.variable + "_default"] = value;
1807
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1808
1808
  }
1809
1809
  }
1810
1810
  }
package/dist/cjs/system/index.js CHANGED
@@ -1810,19 +1810,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1810
1810
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1811
1811
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1812
1812
  let mediaName = "";
1813
- if (absValue.includes("-")) {
1814
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1815
- absValue = absValue.split("-")[0];
1813
+ if (absValue.includes("_")) {
1814
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1815
+ absValue = absValue.split("_")[0];
1816
1816
  }
1817
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1817
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1818
1818
  if (absValue.includes("+")) {
1819
- const args = absValue.split("+");
1820
- const [first, second] = args;
1819
+ const [first, second] = absValue.split("+");
1821
1820
  const joint = `${varValue(first)} + ${varValue(second)}`;
1822
1821
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1822
+ } else if (absValue.includes("*")) {
1823
+ const [first, second] = absValue.split("*");
1824
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1825
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1823
1826
  } else if (absValue.includes("-")) {
1824
- const args = absValue.split("-");
1825
- const [first, second] = args;
1827
+ const [first, second] = absValue.split("-");
1826
1828
  const joint = `${varValue(first)} - ${varValue(second)}`;
1827
1829
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1828
1830
  }
@@ -1880,14 +1882,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1880
1882
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1881
1883
  if (!underMediaQuery)
1882
1884
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1883
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1884
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1885
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1886
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1885
1887
  } else {
1886
1888
  if (options.useDefault === false) {
1887
1889
  CSS_VARS2[item.variable] = value;
1888
1890
  } else {
1889
- CSS_VARS2[item.variable + "-default"] = value;
1890
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1891
+ CSS_VARS2[item.variable + "_default"] = value;
1892
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1891
1893
  }
1892
1894
  }
1893
1895
  }
package/dist/cjs/system/spacing.js CHANGED
@@ -1661,19 +1661,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1661
1661
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1662
1662
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1663
1663
  let mediaName = "";
1664
- if (absValue.includes("-")) {
1665
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1666
- absValue = absValue.split("-")[0];
1664
+ if (absValue.includes("_")) {
1665
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1666
+ absValue = absValue.split("_")[0];
1667
1667
  }
1668
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1668
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1669
1669
  if (absValue.includes("+")) {
1670
- const args = absValue.split("+");
1671
- const [first, second] = args;
1670
+ const [first, second] = absValue.split("+");
1672
1671
  const joint = `${varValue(first)} + ${varValue(second)}`;
1673
1672
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1673
+ } else if (absValue.includes("*")) {
1674
+ const [first, second] = absValue.split("*");
1675
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1676
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1674
1677
  } else if (absValue.includes("-")) {
1675
- const args = absValue.split("-");
1676
- const [first, second] = args;
1678
+ const [first, second] = absValue.split("-");
1677
1679
  const joint = `${varValue(first)} - ${varValue(second)}`;
1678
1680
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1679
1681
  }
@@ -1723,14 +1725,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1723
1725
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1724
1726
  if (!underMediaQuery)
1725
1727
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1726
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1727
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1728
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1729
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1728
1730
  } else {
1729
1731
  if (options.useDefault === false) {
1730
1732
  CSS_VARS2[item.variable] = value;
1731
1733
  } else {
1732
- CSS_VARS2[item.variable + "-default"] = value;
1733
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1734
+ CSS_VARS2[item.variable + "_default"] = value;
1735
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1734
1736
  }
1735
1737
  }
1736
1738
  }
package/dist/cjs/system/timing.js CHANGED
@@ -1655,19 +1655,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1655
1655
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1656
1656
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1657
1657
  let mediaName = "";
1658
- if (absValue.includes("-")) {
1659
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1660
- absValue = absValue.split("-")[0];
1658
+ if (absValue.includes("_")) {
1659
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1660
+ absValue = absValue.split("_")[0];
1661
1661
  }
1662
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1662
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1663
1663
  if (absValue.includes("+")) {
1664
- const args = absValue.split("+");
1665
- const [first, second] = args;
1664
+ const [first, second] = absValue.split("+");
1666
1665
  const joint = `${varValue(first)} + ${varValue(second)}`;
1667
1666
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1667
+ } else if (absValue.includes("*")) {
1668
+ const [first, second] = absValue.split("*");
1669
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1670
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1668
1671
  } else if (absValue.includes("-")) {
1669
- const args = absValue.split("-");
1670
- const [first, second] = args;
1672
+ const [first, second] = absValue.split("-");
1671
1673
  const joint = `${varValue(first)} - ${varValue(second)}`;
1672
1674
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1673
1675
  }
@@ -1717,14 +1719,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1717
1719
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1718
1720
  if (!underMediaQuery)
1719
1721
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1720
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1721
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1722
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1723
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1722
1724
  } else {
1723
1725
  if (options.useDefault === false) {
1724
1726
  CSS_VARS2[item.variable] = value;
1725
1727
  } else {
1726
- CSS_VARS2[item.variable + "-default"] = value;
1727
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1728
+ CSS_VARS2[item.variable + "_default"] = value;
1729
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1728
1730
  }
1729
1731
  }
1730
1732
  }
package/dist/cjs/system/typography.js CHANGED
@@ -1654,19 +1654,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1654
1654
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1655
1655
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1656
1656
  let mediaName = "";
1657
- if (absValue.includes("-")) {
1658
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1659
- absValue = absValue.split("-")[0];
1657
+ if (absValue.includes("_")) {
1658
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1659
+ absValue = absValue.split("_")[0];
1660
1660
  }
1661
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1661
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1662
1662
  if (absValue.includes("+")) {
1663
- const args = absValue.split("+");
1664
- const [first, second] = args;
1663
+ const [first, second] = absValue.split("+");
1665
1664
  const joint = `${varValue(first)} + ${varValue(second)}`;
1666
1665
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1666
+ } else if (absValue.includes("*")) {
1667
+ const [first, second] = absValue.split("*");
1668
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1669
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1667
1670
  } else if (absValue.includes("-")) {
1668
- const args = absValue.split("-");
1669
- const [first, second] = args;
1671
+ const [first, second] = absValue.split("-");
1670
1672
  const joint = `${varValue(first)} - ${varValue(second)}`;
1671
1673
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1672
1674
  }
@@ -1724,14 +1726,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1724
1726
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1725
1727
  if (!underMediaQuery)
1726
1728
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1727
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1728
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1729
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1730
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1729
1731
  } else {
1730
1732
  if (options.useDefault === false) {
1731
1733
  CSS_VARS2[item.variable] = value;
1732
1734
  } else {
1733
- CSS_VARS2[item.variable + "-default"] = value;
1734
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1735
+ CSS_VARS2[item.variable + "_default"] = value;
1736
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1735
1737
  }
1736
1738
  }
1737
1739
  }
package/dist/cjs/transforms/index.js CHANGED
@@ -1729,19 +1729,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1729
1729
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1730
1730
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1731
1731
  let mediaName = "";
1732
- if (absValue.includes("-")) {
1733
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1734
- absValue = absValue.split("-")[0];
1732
+ if (absValue.includes("_")) {
1733
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1734
+ absValue = absValue.split("_")[0];
1735
1735
  }
1736
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1736
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1737
1737
  if (absValue.includes("+")) {
1738
- const args = absValue.split("+");
1739
- const [first, second] = args;
1738
+ const [first, second] = absValue.split("+");
1740
1739
  const joint = `${varValue(first)} + ${varValue(second)}`;
1741
1740
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1741
+ } else if (absValue.includes("*")) {
1742
+ const [first, second] = absValue.split("*");
1743
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1744
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1742
1745
  } else if (absValue.includes("-")) {
1743
- const args = absValue.split("-");
1744
- const [first, second] = args;
1746
+ const [first, second] = absValue.split("-");
1745
1747
  const joint = `${varValue(first)} - ${varValue(second)}`;
1746
1748
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1747
1749
  }
package/dist/cjs/utils/index.js CHANGED
@@ -1881,19 +1881,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1881
1881
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1882
1882
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1883
1883
  let mediaName = "";
1884
- if (absValue.includes("-")) {
1885
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1886
- absValue = absValue.split("-")[0];
1884
+ if (absValue.includes("_")) {
1885
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1886
+ absValue = absValue.split("_")[0];
1887
1887
  }
1888
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1888
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1889
1889
  if (absValue.includes("+")) {
1890
- const args = absValue.split("+");
1891
- const [first, second] = args;
1890
+ const [first, second] = absValue.split("+");
1892
1891
  const joint = `${varValue(first)} + ${varValue(second)}`;
1893
1892
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1893
+ } else if (absValue.includes("*")) {
1894
+ const [first, second] = absValue.split("*");
1895
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1896
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1894
1897
  } else if (absValue.includes("-")) {
1895
- const args = absValue.split("-");
1896
- const [first, second] = args;
1898
+ const [first, second] = absValue.split("-");
1897
1899
  const joint = `${varValue(first)} - ${varValue(second)}`;
1898
1900
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1899
1901
  }
@@ -1959,14 +1961,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1959
1961
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1960
1962
  if (!underMediaQuery)
1961
1963
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1962
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1963
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1964
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1965
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1964
1966
  } else {
1965
1967
  if (options.useDefault === false) {
1966
1968
  CSS_VARS2[item.variable] = value;
1967
1969
  } else {
1968
- CSS_VARS2[item.variable + "-default"] = value;
1969
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1970
+ CSS_VARS2[item.variable + "_default"] = value;
1971
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1970
1972
  }
1971
1973
  }
1972
1974
  }
package/dist/cjs/utils/sequence.js CHANGED
@@ -1614,19 +1614,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1614
1614
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1615
1615
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1616
1616
  let mediaName = "";
1617
- if (absValue.includes("-")) {
1618
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1619
- absValue = absValue.split("-")[0];
1617
+ if (absValue.includes("_")) {
1618
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1619
+ absValue = absValue.split("_")[0];
1620
1620
  }
1621
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1621
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1622
1622
  if (absValue.includes("+")) {
1623
- const args = absValue.split("+");
1624
- const [first, second] = args;
1623
+ const [first, second] = absValue.split("+");
1625
1624
  const joint = `${varValue(first)} + ${varValue(second)}`;
1626
1625
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1626
+ } else if (absValue.includes("*")) {
1627
+ const [first, second] = absValue.split("*");
1628
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1629
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1627
1630
  } else if (absValue.includes("-")) {
1628
- const args = absValue.split("-");
1629
- const [first, second] = args;
1631
+ const [first, second] = absValue.split("-");
1630
1632
  const joint = `${varValue(first)} - ${varValue(second)}`;
1631
1633
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1632
1634
  }
package/dist/cjs/utils/var.js CHANGED
@@ -1508,14 +1508,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1508
1508
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1509
1509
  if (!underMediaQuery)
1510
1510
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1511
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1512
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1511
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1512
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1513
1513
  } else {
1514
1514
  if (options.useDefault === false) {
1515
1515
  CSS_VARS2[item.variable] = value;
1516
1516
  } else {
1517
- CSS_VARS2[item.variable + "-default"] = value;
1518
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1517
+ CSS_VARS2[item.variable + "_default"] = value;
1518
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1519
1519
  }
1520
1520
  }
1521
1521
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@symbo.ls/scratch",
3
3
  "description": "Φ / CSS framework and methodology.",
4
4
  "author": "symbo.ls",
5
- "version": "2.11.212",
5
+ "version": "2.11.213",
6
6
  "files": [
7
7
  "src",
8
8
  "dist"
@@ -29,5 +29,5 @@
29
29
  "@symbo.ls/utils": "latest",
30
30
  "color-contrast-checker": "^1.5.0"
31
31
  },
32
- "gitHead": "12914eac8527ac1df36183098bbf3dfcfaa2e027"
32
+ "gitHead": "a8594401d43a070013dc2af50e4083ec9f361c04"
33
33
  }
package/src/utils/sequence.js CHANGED
@@ -158,20 +158,24 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
158
158
  let absValue = isNegative ? letterVal.slice(1) : letterVal
159
159
 
160
160
  let mediaName = ''
161
- if (absValue.includes('-')) {
162
- mediaName = '-' + absValue.split('-')[1].toLowerCase()
163
- absValue = absValue.split('-')[0]
161
+ if (absValue.includes('_')) {
162
+ mediaName = '_' + absValue.split('_')[1].toLowerCase()
163
+ absValue = absValue.split('_')[0]
164
164
  }
165
165
 
166
- const varValue = v => `var(${prefix}${v}${mediaName})`
166
+ const varValue = v => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v
167
167
  if (absValue.includes('+')) {
168
- const args = absValue.split('+')
169
- const [first, second] = args
168
+ const [first, second] = absValue.split('+')
170
169
  const joint = `${varValue(first)} + ${varValue(second)}`
171
170
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
171
+ } else if (absValue.includes('*')) {
172
+ const [first, second] = absValue.split('*')
173
+ const joint = `${varValue(first)} * ${varValue(second)}`
174
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
172
175
  } else if (absValue.includes('-')) {
173
- const args = absValue.split('-')
174
- const [first, second] = args
176
+ // TODO: check this
177
+ // check for the first char
178
+ const [first, second] = absValue.split('-')
175
179
  const joint = `${varValue(first)} - ${varValue(second)}`
176
180
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
177
181
  }
package/src/utils/var.js CHANGED
@@ -32,14 +32,14 @@ export const applySequenceVars = (props, mediaName, options = {}) => {
32
32
  }
33
33
  let underMediaQuery = CSS_VARS[`@media ${query}`]
34
34
  if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
35
- underMediaQuery[item.variable] = `var(${item.variable + '-' + mediaName})`
36
- CSS_VARS[item.variable + '-' + mediaName] = value
35
+ underMediaQuery[item.variable] = `var(${item.variable + '_' + mediaName})`
36
+ CSS_VARS[item.variable + '_' + mediaName] = value
37
37
  } else {
38
38
  if (options.useDefault === false) {
39
39
  CSS_VARS[item.variable] = value
40
40
  } else {
41
- CSS_VARS[item.variable + '-default'] = value
42
- CSS_VARS[item.variable] = `var(${item.variable + '-default'})`
41
+ CSS_VARS[item.variable + '_default'] = value
42
+ CSS_VARS[item.variable] = `var(${item.variable + '_default'})`
43
43
  }
44
44
  }
45
45
  }