@dscout/particle 1.0.0-alpha.13 → 1.0.0-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dscout/particle",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.15",
   "description": "A pattern library for building dscout user interfaces",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -50,6 +50,7 @@
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.21.5",
+    "@figma/code-connect": "^0.1.1",
     "@storybook/addon-actions": "6.3.13",
     "@storybook/addon-controls": "6.3.13",
     "@storybook/addon-docs": "6.3.13",

package/styles/color_schemes/_ai_colors.scss

@@ -16,6 +16,7 @@ $color--ai-pink-800: #541633;
 
 $gradient--ai-a: linear-gradient(to right, #F66DB0, #B55BF5);
 $gradient--ai-light-a: linear-gradient(to right, #F7F1FF, #FFF8FC);
+$gradient--ai-reverse-a: linear-gradient(to right, #B55BF5, #F66DB0);
 
 $gradient--ai-b: linear-gradient(to right, #1E1D40, #322D68);
 $gradient--ai-light-b: linear-gradient(to right, #F2F2FF, #F7F6FF);

package/styles/color_schemes/_color_scheme_builder.scss

@@ -306,6 +306,7 @@
 
     "gradient--ai-light-a": get-gradient($colors, 'ai-light-a'),
     "gradient--ai-a": get-gradient($colors, 'ai-a'),
+    "gradient--ai-reverse-a": get-gradient($colors, 'ai-reverse-a'),
 
     "gradient--ai-light-b": get-gradient($colors, 'ai-light-b'),
     "gradient--ai-b": get-gradient($colors, 'ai-b'),

package/styles/components/selectors/_base.scss

@@ -62,7 +62,7 @@
     outline: none;
 
     & + .Selector__Field {
-      outline: var(--color--dscout) auto 5px;
+      outline: currentColor solid 2px;
     }
   }
 }

package/styles/components/selectors/themes/_bandit.scss

@@ -5,11 +5,7 @@
     (
       "Selector__Label____top-offset": -.05em,
 
-      "Radio--unchecked____bg-color": transparent,
-      "Radio--checked____bg-color": var(--color--dscout),
-
       "Radio--unchecked____border-color": var(--color--gray-3),
-      "Radio--checked____border-color": var(--color--dscout),
 
       "Radio--unchecked____border-width": 2px,
       "Radio--checked____border-width": 2px,
@@ -26,11 +22,7 @@
       "Radio--unchecked__Icon____color": transparent,
       "Radio--checked__Icon____color": var(--color--invert),
 
-      "Checkbox--unchecked____bg-color": transparent,
-      "Checkbox--checked____bg-color": var(--color--dscout),
-
       "Checkbox--unchecked____border-color": var(--color--gray-3),
-      "Checkbox--checked____border-color": var(--color--dscout),
 
       "Checkbox--unchecked____border-width": 2px,
       "Checkbox--checked____border-width": 2px,

package/styles/components/selectors/themes/_theme_builder.scss

@@ -4,10 +4,10 @@ $default-variables: (
   "Selector__Label____padding-left": 1em,
 
   "Radio--unchecked____bg-color": transparent,
-  "Radio--checked____bg-color": var(--color--dscout),
+  "Radio--checked____bg-color": currentColor,
 
   "Radio--unchecked____border-color": rgba(var(--color--main-rgb), .2),
-  "Radio--checked____border-color": var(--color--dscout),
+  "Radio--checked____border-color": currentColor,
 
   "Radio--unchecked____border-width": 1px,
   "Radio--checked____border-width": 1px,
@@ -23,10 +23,10 @@ $default-variables: (
   "Radio--checked__Icon____color": transparent,
 
   "Checkbox--unchecked____bg-color": transparent,
-  "Checkbox--checked____bg-color": var(--color--dscout),
+  "Checkbox--checked____bg-color": currentColor,
 
   "Checkbox--unchecked____border-color": rgba(var(--color--main-rgb), .2),
-  "Checkbox--checked____border-color": var(--color--dscout),
+  "Checkbox--checked____border-color": currentColor,
 
   "Checkbox--unchecked____border-width": 1px,
   "Checkbox--checked____border-width": 1px,

package/styles/components/toggle/_base.scss

@@ -1,5 +1,6 @@
 @import 'themes/default';
 @import 'themes/bandit';
+@import 'themes/express';
 
 .Toggle {
   display: inline-block;
@@ -21,6 +22,7 @@
   position: relative;
   text-indent: -5000px;
   width: var(--Toggle__Track____width);
+  cursor: pointer;
 
   // Track fill
   &::before {
@@ -61,7 +63,7 @@
   &:checked + .Toggle__Track {
     // Track fill
     &::before {
-      background-color: var(--Toggle--checked__Track____bg-color);
+      background-color: currentColor;
       width: var(--Toggle--checked__Track____fill-width);
     }
 
@@ -75,9 +77,21 @@
 
   &:disabled + .Toggle__Track {
     opacity: .3;
+    cursor: auto;
   }
 
   &:focus + .Toggle__Track {
-    outline: var(--color--dscout) auto 5px;
+    outline: currentColor auto 5px;
+  }
+}
+
+.Toggle.Toggle--ai {
+  .Toggle__Checkbox {
+    &:checked + .Toggle__Track {
+      // Track fill
+      &::before {
+        background: var(--gradient--ai-reverse-a);
+      }
+    }
   }
 }

package/styles/components/toggle/themes/_bandit.scss

@@ -19,7 +19,6 @@
       "Toggle__Track____radius": var(--radius--pill),
       "Toggle__Track____shadow": none,
       "Toggle--unchecked__Track____bg-color": var(--color--gray-3),
-      "Toggle--checked__Track____bg-color": var(--color--dscout),
       "Toggle--unchecked__Track____fill-width": var(--Toggle__Track____width),
       "Toggle--checked__Track____fill-width": var(--Toggle__Track____width),
       "Toggle__Track____transition-duration": var(--timing--click),

package/styles/components/toggle/themes/_express.scss

@@ -0,0 +1,27 @@
+@import 'theme_builder';
+
+.theme--express {
+  @include generate-toggle-theme-variables(
+    (
+      "Toggle__Switch____height": 1em,
+      "Toggle__Switch____width": 1em,
+      "Toggle__Switch____radius": var(--radius--pill),
+      "Toggle--unchecked__Switch____shadow": none,
+      "Toggle--checked__Switch____shadow": none,
+      "Toggle--unchecked__Switch____bg-color": var(--color--invert),
+      "Toggle--checked__Switch____bg-color": var(--color--invert),
+      "Toggle__Switch____transition-duration": var(--timing--click),
+      "Toggle__Switch____top": calc((var(--Toggle__Track____height) - var(--Toggle__Switch____height)) / 2),
+      "Toggle__Switch____left": var(--Toggle__Switch____top),
+
+      "Toggle__Track____height": 1.3em,
+      "Toggle__Track____width": 2em,
+      "Toggle__Track____radius": var(--radius--pill),
+      "Toggle__Track____shadow": none,
+      "Toggle--unchecked__Track____bg-color": var(--color--gray-3),
+      "Toggle--unchecked__Track____fill-width": var(--Toggle__Track____width),
+      "Toggle--checked__Track____fill-width": var(--Toggle__Track____width),
+      "Toggle__Track____transition-duration": var(--timing--click),
+    )
+  );
+}

package/styles/components/toggle/themes/_theme_builder.scss

@@ -9,7 +9,7 @@ $default-variables: (
   "Toggle--unchecked__Switch____shadow": (inset 0 0 0 1px rgba(var(--color--main-rgb), 0.2), 0 2px 4px rgba(var(--color--main-rgb), 0.15)),
   "Toggle--unchecked__Switch____bg-color": var(--color--invert),
 
-  "Toggle--checked__Switch____shadow": (inset 0 0 0 1px var(--color--dscout), 0 2px 4px rgba(var(--color--main-rgb), 0.2)),
+  "Toggle--checked__Switch____shadow": (inset 0 0 0 1px currentColor, 0 2px 4px rgba(var(--color--main-rgb), 0.2)),
   "Toggle--checked__Switch____bg-color": var(--color--invert),
 
   "Toggle__Track____height": 1.5em,

package/styles/utilities/_colors.scss

@@ -185,6 +185,7 @@ $colors: (
 $gradients: (
   'ai-light-a',
   'ai-a',
+  'ai-reverse-a',
 
   'ai-light-b',
   'ai-b',

package/styles/utilities/_typography.scss

@@ -1,3 +1,12 @@
+@mixin line-clamp {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-align: left;
+  word-wrap: anywhere;
+}
+
+
 /*=== Font size ===*/
 
 .font-size--xxs  { font-size: var(--font-size--xxs); }
@@ -62,31 +71,62 @@
 .text-transform--u     { text-transform: uppercase; }
 .text-transform--l     { text-transform: lowercase; }
 
+/*=== Text decoration ===*/
+
+.text-decoration--none { text-decoration: none; }
+.text-decoration--underline { text-decoration: underline; }
 
+/*=== Text layout ===*/
 /*=== Whitespace ===*/
 
 .white-space--pre-wrap { white-space: pre-wrap; }
 .white-space--nowrap   { white-space: nowrap; }
 .white-space--pre-line { white-space: pre-line; }
 
-
-/*=== Text decoration ===*/
-
-.text-decoration--none { text-decoration: none; }
-.text-decoration--underline { text-decoration: underline; }
-
-
 /*=== Line wrap ===*/
-
 .line-wrap {
   overflow-wrap: break-word;
   hyphens: auto;
 }
 
-/*=== Truncate ===*/
-
+/*=== Simple Truncate ===*/
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/*=== Line Clamp ===*/
+.line-clamp--1 {
+  @include line-clamp;
+  -webkit-line-clamp: 1;
+}
+
+.line-clamp--2 {
+  @include line-clamp;
+  -webkit-line-clamp: 2;
+}
+
+.line-clamp--3 {
+  @include line-clamp;
+  -webkit-line-clamp: 3;
+}
+
+.line-clamp--4 {
+  @include line-clamp;
+  -webkit-line-clamp: 4;
+}
+
+.line-clamp--5 {
+  @include line-clamp;
+  -webkit-line-clamp: 5;
+}
+
+.line-clamp--6 {
+  @include line-clamp;
+  -webkit-line-clamp: 6;
+}
+
+.line-clamp--none {
+  -webkit-line-clamp: none;
+}