rename sb to st

README.md

@@ -20,7 +20,7 @@ React Component Usage:
     }, `
         .root {
             background: white;
-            -sb-states: my-state;
+            -st-states: my-state;
         }
     `);
 

_docs/components/definitly-stylable.md

@@ -18,7 +18,7 @@ A separate "interface" stylesheet can help describe a way to style it:
 ```css
 /* external-toggle-button.css */
 .root {/* ToDo: way to override root selector */
-    -sb-states: toggled(".btn--toggled");
+    -st-states: toggled(".btn--toggled");
 }
 :--icon :global(.btn__icon);
 :--label :global(.btn__label);
@@ -31,11 +31,11 @@ Use like any other Stylable stylesheet to style:
 CSS api:
 ```css
 :import {
-    -sb-from: "./external-toggle-button.css";
-    -sb-default: ToggleBtn;
+    -st-from: "./external-toggle-button.css";
+    -st-default: ToggleBtn;
 }
 .my-btn{ 
-    -sb-extends: ToggleBtn;
+    -st-extends: ToggleBtn;
     background: red;
 }
 .my-btn:toggled {

_docs/deleted-files.md

@@ -147,35 +147,35 @@ Adds mixins allowing you to use component variants and create your own, use and
 Syntax and Terminology Reference
 
 Term	Definiton	Link to Code Example
--sb-from	gets the path to the module that's being imported	Code
--sb-default	defines a default export class, as well as namespaces it / names the default import
--sb-named	defines and namespaces other exports from the same module
+-st-from	gets the path to the module that's being imported	Code
+-st-default	defines a default export class, as well as namespaces it / names the default import
+-st-named	defines and namespaces other exports from the same module
 CLASSES		
--sb-root	one per component, declares the class that is describing the root level of the component. default is false of course
+-st-root	one per component, declares the class that is describing the root level of the component. default is false of course
 }"		
--sb-from	gets the path to the module that's being imported }" -sb-default	defines a default export class, as well as namespaces it / names the default import -sb-named	defines and namespaces other exports from the same module NS Classes -sb-root	one per component, declares the class that is describing the root level of the component. default is false of course	"set root:
+-st-from	gets the path to the module that's being imported }" -st-default	defines a default export class, as well as namespaces it / names the default import -st-named	defines and namespaces other exports from the same module NS Classes -st-root	one per component, declares the class that is describing the root level of the component. default is false of course	"set root:
 
-.rootClass { -sb-root: true; color: blue; }" -sb-type	type of the component - has to be declared elsewhere above, or imported from an external source	"declare root as an exportable type:
+.rootClass { -st-root: true; color: blue; }" -st-type	type of the component - has to be declared elsewhere above, or imported from an external source	"declare root as an exportable type:
 
-.galleryRoot { -sb-root: true; -sb-type: Gallery; color: blue; }
+.galleryRoot { -st-root: true; -st-type: Gallery; color: blue; }
 
 implement an imported or existing type on a class:
 
-.galleryButton { -sb-type: Button; color: white; }" -sb-states	list of states that are available on our component (hover, loading, empty)	"expose a state on the root node:
+.galleryButton { -st-type: Button; color: white; }" -st-states	list of states that are available on our component (hover, loading, empty)	"expose a state on the root node:
 
-.galleryRoot { -sb-root: true; -sb-states: loading, error; color: blue; }
+.galleryRoot { -st-root: true; -st-states: loading, error; color: blue; }
 
 implement the state:
 
-.myGallery:loading { -sb-type: gallery; color: black; }" -sb-mixins	list of mixins we want to apply to our class	".submitButton { -sb-type: Button; -sb-mixin: grid(5,3); background-color: white; }
+.myGallery:loading { -st-type: gallery; color: black; }" -st-mixins	list of mixins we want to apply to our class	".submitButton { -st-type: Button; -st-mixin: grid(5,3); background-color: white; }
 
-will apply a grid layout with the parameters 5 and 3 (probably cols and rows)" -sb-preset	marks a class as a "preset". a mixin without parameters. it's a boolean.	"in Button we declare
+will apply a grid layout with the parameters 5 and 3 (probably cols and rows)" -st-preset	marks a class as a "preset". a mixin without parameters. it's a boolean.	"in Button we declare
 
-.Button_large { -sb-preset: true; font-size: larger; }
+.Button_large { -st-preset: true; font-size: larger; }
 
 then in a button instance
 
-.myButton { -sb-type: Button; -sb-mixin: grid(5,3), Button_large; background-color: white; }"
+.myButton { -st-type: Button; -st-mixin: grid(5,3), Button_large; background-color: white; }"
 
 ## README
 

_docs/references/extend-stylesheet.md

@@ -1,17 +1,17 @@
 # Extend Stylable stylesheet
 
-Use the `-sb-extends` directive rule to extend a CSS class with another stylesheet, in order to be able to describe styling of [pseudo classes](./pseudo-classes.md) and [pseudo elements](./pseudo-elements.md) of the extended stylesheet.
+Use the `-st-extends` directive rule to extend a CSS class with another stylesheet, in order to be able to describe styling of [pseudo classes](./pseudo-classes.md) and [pseudo elements](./pseudo-elements.md) of the extended stylesheet.
 
-> *Note*: `-sb-extends` may only be applied to [class selector](./class-selectors.md) and [root selector](./root.md).
+> *Note*: `-st-extends` may only be applied to [class selector](./class-selectors.md) and [root selector](./root.md).
 
 CSS API:
 ```css
 :import{
-    -sb-from: "./toggle-button.css";
-    -sb-default: ToggleButton;
+    -st-from: "./toggle-button.css";
+    -st-default: ToggleButton;
 }
 .check-btn{
-  -sb-extends:ToggleButton;
+  -st-extends:ToggleButton;
   background:white;
 }
 .check-btn::label{ color:green; } /* style pseudo element label */

_docs/references/imports.md

@@ -2,11 +2,11 @@
 
 **Stylable** enables you to import other stylesheets and modules in a way that is similar to [JS Imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import). You can then use the stylesheet or module as it's been defined, or just one or more of its named values, in your own **Stylable** stylesheet.
 
-You use the **Stylable** syntax beginning with `-sb-` for the  `:import` config:
+You use the **Stylable** syntax beginning with `-st-` for the  `:import` config:
 
- * ```-sb-from:``` Identifies the path to the stylesheet or JavaScript module. Can be a relative path or a 3rd party path.
- * ```-sb-default:``` Imports the default export of the module named in ```-sb-from:```. Use with the name by which to identify the imported value in the scoped stylesheet.
- * ```-sb-named:``` List of the named exports to import into the local scoped stylesheet from the file named in ```-sb-from:```.
+ * ```-st-from:``` Identifies the path to the stylesheet or JavaScript module. Can be a relative path or a 3rd party path.
+ * ```-st-default:``` Imports the default export of the module named in ```-st-from:```. Use with the name by which to identify the imported value in the scoped stylesheet.
+ * ```-st-named:``` List of the named exports to import into the local scoped stylesheet from the file named in ```-st-from:```.
 
  > Note:
  > * `:import` is a Stylable directive and not a selector.
@@ -21,8 +21,8 @@ Import the ```toggle-button.css``` stylesheet from a local location. Assign the
 
 ```css
  :import{
-    -sb-from:"./toggle-button.css";
-    -sb-default: ToggleButton;
+    -st-from:"./toggle-button.css";
+    -st-default: ToggleButton;
  }
  ```
 
@@ -37,8 +37,8 @@ The values ```Gallery``` and ```Menu``` are imported from the local JavaScript m
 
  ```css
  :import{
-    -sb-from:"./my-components";
-    -sb-named: Gallery, Menu;
+    -st-from:"./my-components";
+    -st-named: Gallery, Menu;
  }
  ```
 
@@ -53,8 +53,8 @@ The values ```Menu``` and ```Gallery``` are imported from the local JavaScript m
 
  ```css
  :import{
-    -sb-from:"./my-components";
-    -sb-named: Menu, Gallery as ProductGallery;
+    -st-from:"./my-components";
+    -st-named: Menu, Gallery as ProductGallery;
  }
  ```
 

_docs/references/mixin-syntax.md

@@ -13,11 +13,11 @@ Use cases:
 CSS API:
 ```css
 :import{
-    -sb-from: "./my-mixins";
-    -sb-names: textTooltip;
+    -st-from: "./my-mixins";
+    -st-names: textTooltip;
 }
 .submit-button{
-    -sb-mixin: textTooltip(300, data-tooltip);
+    -st-mixin: textTooltip(300, data-tooltip);
 }
 ```
 
@@ -30,48 +30,48 @@ With and without params and with multiple mixins
 ```css
 .a{
     /* no parameters */
-    -sb-mixin: noParams;
+    -st-mixin: noParams;
 }
 .b{
     /* multiple parameters */
-    -sb-mixin: multiParams(param1, param2);
+    -st-mixin: multiParams(param1, param2);
 }
 .c{
     /* apply multiple mixins */
-    -sb-mixin: noParams, multiParams(param1, param2);
+    -st-mixin: noParams, multiParams(param1, param2);
 }
 ```
 
 Everything is a string:
 
 ```css
 .a {
-    -sb-mixin: mix(300, xxx); /* ["300", "xxx"] */
+    -st-mixin: mix(300, xxx); /* ["300", "xxx"] */
 }
 .b {
-    -sb-mixin: mix(300, "xxx"); /* ["300", "xxx"] */
+    -st-mixin: mix(300, "xxx"); /* ["300", "xxx"] */
 }
 .c { /* use quotations to include comma */
-    -sb-mixin: mix(300, "xx,x"); /* ["300", "xx,x"] */
+    -st-mixin: mix(300, "xx,x"); /* ["300", "xx,x"] */
 }
 .d { /* escape slashes */
-    -sb-mixin: mix(300, "\"xxx\""); /* ["300", "\"xxx\""] */
+    -st-mixin: mix(300, "\"xxx\""); /* ["300", "\"xxx\""] */
 }
 ```
 
 ## Target
 
 Mixins may add CSS declarations to the CSS ruleset that they are applied to:
 
-* rules are added at the position that the `-sb-mixin` is declared
+* rules are added at the position that the `-st-mixin` is declared
 * appended selectors are added directly after the rule-set that the mixin was applied to
 * multiple mixins are applied according to the order that they are specified in
 
 CSS API:
 ```css
 .a{
     color:red;
-    -sb-mixin: golden;
+    -st-mixin: golden;
     background:white;
 }
 .a:hover{

_docs/references/pseudo-classes.md

@@ -8,15 +8,15 @@ Native pseudo-classes like `:hover` and `:nth-child()` are valid and supported n
 
 ## Define custom states
 
-To define custom states, you tell Stylable the list of possible custom states that the CSS declaration may be given, using the Stylable directive rule `-sb-states`:
+To define custom states, you tell Stylable the list of possible custom states that the CSS declaration may be given, using the Stylable directive rule `-st-states`:
 
-> *Note*: `-sb-states` directive rule may only be defined for simple selectors like [tag selector](./tag-selectors.md), [class selector](./class-selectors.md) and [root selector](./root.md).
+> *Note*: `-st-states` directive rule may only be defined for simple selectors like [tag selector](./tag-selectors.md), [class selector](./class-selectors.md) and [root selector](./root.md).
 
 CSS API:
 ```css
 /* example1.css */
 .root{
-    -sb-states: toggled, loading;
+    -st-states: toggled, loading;
 }
 .root:toggled { color:red; }
 .root:loading { color:green; }
@@ -39,7 +39,7 @@ CSS API:
 ```css
 /* example-custom.css */
 .root{
-    -sb-states: toggled(".on"), loading("[data-spinner]");
+    -st-states: toggled(".on"), loading("[data-spinner]");
 }
 .root:toggled { color:red; }
 .root:loading { color:green; }
@@ -64,12 +64,12 @@ CSS API:
 ```css
 /* example2.css */
 :import {
-    -sb-from: "./example1.css"; /* stylesheet a previous example */
-    -sb-default: Comp1; /* import color1 and color2 variables */
+    -st-from: "./example1.css"; /* stylesheet a previous example */
+    -st-default: Comp1; /* import color1 and color2 variables */
 }
 .media-button{
-    -sb-extends: Comp1;
-    -sb-states: toggled, selected;
+    -st-extends: Comp1;
+    -st-states: toggled, selected;
 }
 .media-button:hover { border:10px solid black; }
 .media-button:toggled { color:gold;}

_docs/references/pseudo-elements.md

@@ -12,11 +12,11 @@ Stylesheet can [import](./imports.md) a `video-player` component (stylesheet), e
 CSS API
 ```css
 :import {
-    -sb-from: './video-player.css';
-    -sb-default: VideoPlayer;
+    -st-from: './video-player.css';
+    -st-default: VideoPlayer;
 }
 .main-video {
-    -sb-extends: VideoPlayer; /* define main-video as VideoPlayer */
+    -st-extends: VideoPlayer; /* define main-video as VideoPlayer */
 }
 .main-video::play-button { /* override main-video play button */
     background: green;
@@ -58,11 +58,11 @@ CSS API
 ```css
 /* super-video-player.css */
 :import {
-    -sb-from: './video-player.css';
-    -sb-default: VideoPlayer;
+    -st-from: './video-player.css';
+    -st-default: VideoPlayer;
 }
 .root{
-    -sb-extends: VideoPlayer;
+    -st-extends: VideoPlayer;
 }
 .root::play-button {
     color: gold;
@@ -72,11 +72,11 @@ CSS API
 ```css
 /* page.css */
 :import {
-    -sb-from: './super-video-player.css';
-    -sb-default: SuperVideoPlayer;
+    -st-from: './super-video-player.css';
+    -st-default: SuperVideoPlayer;
 }
 .main-player {
-    -sb-extends: SuperVideoPlayer;
+    -st-extends: SuperVideoPlayer;
 }
 .main-player::play-button {
     color: silver;
@@ -103,11 +103,11 @@ CSS API
 ```css
 /* super-video-player.css */
 :import {
-    -sb-from: './video-player.css';
-    -sb-default: VideoPlayer;
+    -st-from: './video-player.css';
+    -st-default: VideoPlayer;
 }
 .root{
-    -sb-extends: VideoPlayer;
+    -st-extends: VideoPlayer;
 }
 .play-button { /* override VideoPlayer play-button */
     color: gold;

_docs/references/tag-selectors.md

@@ -58,8 +58,8 @@ CSS API:
 
 ```css
 :import{
-    -sb-from: "./toggle-button.css";
-    -sb-default: ToggleButton;
+    -st-from: "./toggle-button.css";
+    -st-default: ToggleButton;
 }
 ToggleButton {background:green;}
 .side-bar:hover ToggleButton {background:red;}

_docs/references/variables.md

@@ -36,8 +36,8 @@ CSS API:
 ```css
 /* example2.css */
 :import {
-    -sb-from: "./example1.css"; /* stylesheet a previous example */
-    -sb-named: color1, color2; /* import color1 and color2 variables */
+    -st-from: "./example1.css"; /* stylesheet a previous example */
+    -st-named: color1, color2; /* import color1 and color2 variables */
 }
 .root {
     border: 10px solid value(color1);
@@ -71,8 +71,8 @@ CSS API:
 ```css
 /* example3.css */
 :import {
-    -sb-from: "./example1.css"; /* stylesheet a previous example */
-    -sb-named: color1, color2;
+    -st-from: "./example1.css"; /* stylesheet a previous example */
+    -st-named: color1, color2;
 }
 :vars{
     border1: 10px solid value(color1); /* use color1 in complex value */
@@ -101,8 +101,8 @@ CSS API:
 ```css
 /* example4.css */
 :import {
-    -sb-from: "./example1.css"; /* stylesheet a previous example */
-    -sb-named: color1, color2;
+    -st-from: "./example1.css"; /* stylesheet a previous example */
+    -st-named: color1, color2;
 }
 :override {
     color1: yellow; /* modify color1 to yellow */