@moda/tokens 5.5.4 → 5.7.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.7.0](https://github.com/ModaOperandi/tokens/compare/v5.6.0...v5.7.0) (2023-01-04)
+
+
+### Features
+
+* move from node-sass to sass ([#761](https://github.com/ModaOperandi/tokens/issues/761)) ([c2c5258](https://github.com/ModaOperandi/tokens/commit/c2c525821a2e26b23941f19db703e95a3dad35b9))
+
+# [5.6.0](https://github.com/ModaOperandi/tokens/compare/v5.5.4...v5.6.0) (2022-10-14)
+
+
+### Features
+
+* adds js function to retrieve hex for a specific color name ([5460cad](https://github.com/ModaOperandi/tokens/commit/5460cadd8d0627d437b71f886e518551d11acad4))
+
 ## [5.5.4](https://github.com/ModaOperandi/tokens/compare/v5.5.3...v5.5.4) (2022-09-05)
 
 

package/README.md

@@ -185,11 +185,20 @@ const remToUnitlessPx: (value: string) => number;
 
 ##### `color`
 
+Accepts the name of a color and returns back the corresponding rgb(a) value.
+
+```tsx
+type Color = "ink" | "cement" | "fog" | "elephant" | "noise" | "snow" | "strawberry" | "code-red" | "mint" | "money-good" | "fuchsia" | "klein-blue" | "brick" | "goldenrod" | "seafoam" | "coral" | ... 7 more ... | "canary"
+const color: (name: Color, alpha?: number) => string
+```
+
+##### `colorInHex`
+
 Accepts the name of a color and returns back the corresponding hex value.
 
 ```tsx
 type Color = "ink" | "cement" | "fog" | "elephant" | "noise" | "snow" | "strawberry" | "code-red" | "mint" | "money-good" | "fuchsia" | "klein-blue" | "brick" | "goldenrod" | "seafoam" | "coral" | ... 7 more ... | "canary"
-const color: (name: Color) => string
+const colorInHex: (name: Color, alpha?: number) => string
 ```
 
 ##### `spacing`

package/dist/helpers.d.ts

@@ -1,8 +1,8 @@
 import { colors } from './colors';
 import { typography } from './typography';
-export declare type Font = keyof typeof typography.fonts;
-export declare type TextTreatment = keyof typeof typography['text-treatments'];
-export declare type Color = keyof typeof colors.all;
+export type Font = keyof typeof typography.fonts;
+export type TextTreatment = keyof typeof typography['text-treatments'];
+export type Color = keyof typeof colors.all;
 export declare const text: (name: TextTreatment, font?: "code" | "serif" | "sans") => {
     'font-family': string;
     'line-height': string;
@@ -63,4 +63,5 @@ export declare const text: (name: TextTreatment, font?: "code" | "serif" | "sans
 };
 export declare const remToUnitlessPx: (value: string) => number;
 export declare const color: (name: Color, alpha?: number) => string;
+export declare const colorInHex: (name: Color, alpha?: number) => string;
 export declare const spacing: (topY: number | string, rightX?: number | string, bottom?: number | string, left?: number | string) => string | number | undefined;

package/dist/helpers.js

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.spacing = exports.color = exports.remToUnitlessPx = exports.text = void 0;
+exports.spacing = exports.colorInHex = exports.color = exports.remToUnitlessPx = exports.text = void 0;
 var colorString = require("color-string");
 var colors_1 = require("./colors");
 var space_1 = require("./space");
@@ -44,6 +44,8 @@ var color = function (name, alpha) {
         : color;
 };
 exports.color = color;
+var colorInHex = function (name, alpha) { return colorString.to.hex(colorString.get.rgb((0, exports.color)(name, alpha))); };
+exports.colorInHex = colorInHex;
 var spacing = function (topY, rightX, bottom, left) {
     return [topY, rightX, bottom, left].reduce(function (acc, value) {
         var _a;

package/dist/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,0CAA4C;AAC5C,mCAAkC;AAClC,iCAAgC;AAChC,2CAA0C;AAMnC,IAAM,IAAI,GAAG,UAAC,IAAmB,EAAE,IAAqB;IAArB,qBAAA,EAAA,OAAO,MAAc;IAC7D,IAAM,SAAS,GAAG,uBAAU,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,CAAC;IACtD,6BACK,SAAS,KACZ,aAAa,EAAE,uBAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,aAAa,EAAE,UAAG,SAAS,CAAC,aAAa,CAAC,CAAE,IAC5C;AACJ,CAAC,CAAC;AAPW,QAAA,IAAI,QAOf;AAEK,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,OAAA,UAAU,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,uBAAU,CAAC,gBAAgB,CAAC,EAAE,EAAE,CAAC;AAA9D,CAA8D,CAAC;AADpD,QAAA,eAAe,mBACqC;AAE1D,IAAM,KAAK,GAAG,UAAC,IAAW,EAAE,KAAc;;IAC/C,IAAM,KAAK,GAAG,eAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,OAAO,KAAK,IAAI,IAAI;QAClB,CAAC,CAAC,+DAA+D;YAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,iCAAK,CAAC,CAAA,MAAA,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,0CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAI,EAAE,CAAC,UAAE,KAAK,UAAE;QACjF,CAAC,CAAC,KAAK,CAAC;AACZ,CAAC,CAAC;AANW,QAAA,KAAK,SAMhB;AAEK,IAAM,OAAO,GAAG,UACrB,IAAqB,EACrB,MAAwB,EACxB,MAAwB,EACxB,IAAsB;IAEtB,OAAA,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,KAAK;;QAC7C,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO,GAAG,CAAC;QACpC,OAAO,CAAC,GAAG,EAAE,MAAA,aAAK,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAI,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtD,CAAC,EAAE,EAAE,CAAC;AAHN,CAGM,CAAC;AATI,QAAA,OAAO,WASX"}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,0CAA4C;AAC5C,mCAAkC;AAClC,iCAAgC;AAChC,2CAA0C;AAMnC,IAAM,IAAI,GAAG,UAAC,IAAmB,EAAE,IAAqB;IAArB,qBAAA,EAAA,OAAO,MAAc;IAC7D,IAAM,SAAS,GAAG,uBAAU,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,CAAC;IACtD,6BACK,SAAS,KACZ,aAAa,EAAE,uBAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,aAAa,EAAE,UAAG,SAAS,CAAC,aAAa,CAAC,CAAE,IAC5C;AACJ,CAAC,CAAC;AAPW,QAAA,IAAI,QAOf;AAEK,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,OAAA,UAAU,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,uBAAU,CAAC,gBAAgB,CAAC,EAAE,EAAE,CAAC;AAA9D,CAA8D,CAAC;AADpD,QAAA,eAAe,mBACqC;AAE1D,IAAM,KAAK,GAAG,UAAC,IAAW,EAAE,KAAc;;IAC/C,IAAM,KAAK,GAAG,eAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,OAAO,KAAK,IAAI,IAAI;QAClB,CAAC,CAAC,+DAA+D;YAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,iCAAK,CAAC,CAAA,MAAA,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,0CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAI,EAAE,CAAC,UAAE,KAAK,UAAE;QACjF,CAAC,CAAC,KAAK,CAAC;AACZ,CAAC,CAAC;AANW,QAAA,KAAK,SAMhB;AAEK,IAAM,UAAU,GAAG,UAAC,IAAW,EAAE,KAAc,IAAa,OAAA,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,IAAA,aAAK,EAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAA3D,CAA2D,CAAC;AAAlH,QAAA,UAAU,cAAwG;AAExH,IAAM,OAAO,GAAG,UACrB,IAAqB,EACrB,MAAwB,EACxB,MAAwB,EACxB,IAAsB;IAEtB,OAAA,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,KAAK;;QAC7C,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO,GAAG,CAAC;QACpC,OAAO,CAAC,GAAG,EAAE,MAAA,aAAK,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAI,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtD,CAAC,EAAE,EAAE,CAAC;AAHN,CAGM,CAAC;AATI,QAAA,OAAO,WASX"}

package/lib/assets/stylesheets/tokens/_utilities.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /// Returns the named value of a map. Throws an error if it does not exist.
 ///
 /// @param {map} $map
@@ -38,5 +40,5 @@
 }
 
 @function __strip-units__($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, ($value * 0 + 1));
 }

package/lib/assets/stylesheets/tokens/variables/_typography.scss

@@ -1,7 +1,8 @@
+@use 'sass:math';
 @import "../utilities";
 
 $root-font-size: 16px;
-$root-one-px: 1 / __strip-units__($root-font-size);
+$root-one-px: math.div(1, __strip-units__($root-font-size));
 
 $font-stack-moda-sans: "Moda Operandi Sans", Arial, sans-serif;
 $font-stack-moda-serif: "Moda Operandi Serif", "Times New Roman", Times, serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/tokens",
-  "version": "5.5.4",
+  "version": "5.7.0",
   "description": "Constant values for modaoperandi.com",
   "repository": "git@github.com:ModaOperandi/tokens.git",
   "author": "Moda Operandi",
@@ -30,9 +30,10 @@
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
     "@jedmao/semantic-release-npm-github-config": "^1.0.9",
+    "@moda/node-sass-export": "^0.1.1",
     "@types/color-string": "^1.5.0",
-    "@types/node": "^17.0.0",
-    "@types/node-sass": "^4.11.3",
+    "@types/node": "^18.7.15",
+    "@types/sass": "^1.43.1",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "cz-conventional-changelog": "3.3.0",
@@ -44,11 +45,10 @@
     "eslint-plugin-prettier": "^4.2.1",
     "gh-pages": "4.0.0",
     "husky": "^8.0.1",
-    "jest": "^28.0.2",
-    "node-sass": "^7.0.0",
-    "node-sass-export": "^0.0.7",
+    "jest": "^29.0.2",
     "pinst": "^3.0.0",
     "prettier": "^2.7.1",
+    "sass": "^1.57.1",
     "semantic-release": "^19.0.2",
     "typescript": "^4.0.2"
   },

package/src/helpers.ts

@@ -27,6 +27,8 @@ export const color = (name: Color, alpha?: number) => {
     : color;
 };
 
+export const colorInHex = (name: Color, alpha?: number): string => colorString.to.hex(colorString.get.rgb(color(name, alpha)));
+
 export const spacing = (
   topY: number | string,
   rightX?: number | string,