@design-factory/design-factory 20.0.0-next.0 → 20.0.0-next.2

package/styles/scss/utilities/_common.utilities.scss

@@ -4,6 +4,7 @@
 @use 'sass:string';
 @use 'sass:list';
 @use 'sass:meta';
+@import 'rgb';
 
 // This function currently change all the colors #ffffff #bbbbbb and #cccccc (that you should put in the svg) by the one given in input
 // I put f for fill value.
@@ -146,14 +147,6 @@ $df-box-shadow: 0px 4px 8px 0px
   }
 }
 
-// Override functions from BS
-@function to-rgb($value) {
-  @if meta.type-of($value) != color {
-    @return str-replace($value, ')', '-rgb)');
-  }
-  @return color.red($value), color.green($value), color.blue($value);
-}
-
 @function rgba-css-var($identifier, $target) {
   @if $identifier == 'alt-body' and $target == 'bg' {
     @return rgba(var(--#{$prefix}alt-body), var(--#{$prefix}#{$target}-opacity));
@@ -161,8 +154,8 @@ $df-box-shadow: 0px 4px 8px 0px
   @if $identifier == 'body' and $target == 'bg' {
     @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
   }
-  @if $identifier == 'body' and $target == 'text' {
-    @return rgba(#{shades-rgb-css-var($identifier, 'bg-color', true)}, var(--#{$prefix}#{$target}-opacity));
+  @if $target == 'text' {
+    @return rgba(#{shades-rgb-css-var($identifier, 'text-color')}, var(--#{$prefix}#{$target}-opacity));
   } @else {
     @return rgba(#{shades-rgb-css-var($identifier, 'bg-color')}, var(--#{$prefix}#{$target}-opacity));
   }

package/styles/scss/utilities/_rgb.scss

@@ -0,0 +1,10 @@
+@use 'sass:meta';
+@use 'sass:color';
+
+// Override functions from BS
+@function to-rgb($value) {
+  @if meta.type-of($value) != color {
+    @return str-replace($value, ')', '-rgb)');
+  }
+  @return color.red($value), color.green($value), color.blue($value);
+}

package/tokens/style-dictionary/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Design Factory custom Style-Dictionary transforms
+ */
+declare const transforms: {
+    /**
+     * Transform used to quote wrap font-family tokens.
+     * This is required as the font-family tokens exported from the Figma Plugin do not have the proper $type.
+     */
+    readonly fontFamily: "@design-factory/font-family";
+    /**
+     * Transform used to map font-weight tokens into useable css values.
+     * This is required as the font-weight tokens exported from the Figma Plugin do not have the proper $type.
+     */
+    readonly fontWeight: "@design-factory/font-weight";
+    /**
+     * Transform used to create token names based on DF token naming convention.
+     */
+    readonly tokenName: "@design-factory/token-name";
+};
+/**
+ * Design Factory custom Style-Dictionary transform group
+ */
+declare const transformGroups: {
+    /**
+     * Transform group that applies standard scss transforms and custom Design Factory transforms.
+     */
+    readonly designFactory: "@design-factory";
+};
+/**
+ * Design Factory custom Style-Dictionary filters
+ */
+declare const filters: {
+    /**
+     * Filter removing invalid font-weight tokens. Should be used with {@link formats.scssVars}
+     */
+    readonly scssVars: "@design-factory/scss-vars-filter";
+    /**
+     * Filter removing invalid font-weight tokens and t0 tokens. Should be used with {@link formats.cssRoot}
+     */
+    readonly cssRoot: "@design-factory/root-filter";
+};
+/**
+ * Design Factory custom Style-Dictionary formats
+ */
+declare const formats: {
+    /**
+     * Format to print a sass file containing tokens as sass variables. Should be used with {@link filters.scssVars}
+     */
+    readonly scssVars: "@design-factory/scss-vars";
+    /**
+     * Format to print a css file printing tokens as css variables. Should be used with {@link filters.cssRoot}
+     */
+    readonly cssRoot: "@design-factory/css-root";
+};
+/**
+ * Registers Design Factory custom transforms, formats and filters with Style Dictionary.
+ */
+declare const registerDf: () => void;
+
+export { filters, formats, registerDf, transformGroups, transforms };