@canonical/code-standards 0.1.0 → 0.1.2

package/data/css.ttl

@@ -15,33 +15,36 @@ cs:CSSSelectorNamespace a cs:CodeStandard ;
     cs:name "css/selectors/namespace" ;
     cs:hasCategory cs:CSSCategory ;
     cs:description "All component selectors must be prefixed with the `.ds` namespace (e.g., `.ds.button`)." ;
-    cs:dos """
-(Do) Prefix all component selectors with `.ds`.
-```css
+    cs:do [
+        cs:description "Prefix all component selectors with `.ds`." ;
+        cs:language "css" ;
+        cs:code """
 /* Component root with namespace */
 .ds.button {
   /* Base styles */
 }
-```
-""" ;
-    cs:donts """
-(Don't) Omit the `.ds` namespace from component selectors.
-```css
+    """
+    ] ;
+    cs:dont [
+        cs:description "Omit the `.ds` namespace from component selectors." ;
+        cs:language "css" ;
+        cs:code """
 /* Bad: Missing .ds namespace */
 .button {
   /* styles */
 }
-```
-""" .
+    """
+    ] .
 
 # CSS Component Encapsulation Standard
 cs:CSSComponentEncapsulation a cs:CodeStandard ;
     cs:name "css/component/encapsulation" ;
     cs:hasCategory cs:CSSCategory ;
     cs:description "Component styles must be encapsulated using the component's root class as a boundary. All internal element styles must be scoped to the component's namespace." ;
-    cs:dos """
-(Do) Scope internal element styles using the component's namespace.
-```css
+    cs:do [
+        cs:description "Scope internal element styles using the component's namespace." ;
+        cs:language "css" ;
+        cs:code """
 .ds.button {
   /* Component root styles */
   
@@ -50,42 +53,45 @@ cs:CSSComponentEncapsulation a cs:CodeStandard ;
     margin-right: var(--button-icon-spacing);
   }
 }
-```
-""" ;
-    cs:donts """
-(Don't) Don't style internal elements without the component namespace.
-```css
+    """
+    ] ;
+    cs:dont [
+        cs:description "Don't style internal elements without the component namespace." ;
+        cs:language "css" ;
+        cs:code """
 /* Bad: Internal element not scoped to component */
 .icon {
   margin-right: var(--button-icon-spacing);
 }
-```
-""" .
+    """
+    ] .
 
 # CSS State Handling Standard
 cs:CSSStateHandling a cs:CodeStandard ;
     cs:name "css/component/states" ;
     cs:hasCategory cs:CSSCategory ;
     cs:description "Component states must be handled using attribute selectors for native states and class modifiers for custom states." ;
-    cs:dos """
-(Do) Use attribute selectors for native element states.
-```css
+    cs:do [
+        cs:description "Use attribute selectors for native element states." ;
+        cs:language "css" ;
+        cs:code """
 .ds.button {
   &[disabled] {
     opacity: var(--button-disabled-opacity);
   }
 }
-```
-""" ;
-    cs:donts """
-(Don't) Use class modifiers for native states.
-```css
+    """
+    ] ;
+    cs:dont [
+        cs:description "Use class modifiers for native states." ;
+        cs:language "css" ;
+        cs:code """
 /* Bad: Using class for native state */
 .ds.button.disabled {
   opacity: var(--button-disabled-opacity);
 }
-```
-""" .
+    """
+    ] .
 
 # CSS Specificity Management Standard
 cs:CSSSpecificityManagement a cs:CodeStandard ;
@@ -95,111 +101,123 @@ cs:CSSSpecificityManagement a cs:CodeStandard ;
 - Component root must use namespace + component name (.ds.button)
 - Single modifier class for variants (.ds.button.primary)
 - Single attribute for states (.ds.button[disabled])""" ;
-    cs:dos """
-(Do) Use a single modifier class for component variants.
-```css
+    cs:do [
+        cs:description "Use a single modifier class for component variants." ;
+        cs:language "css" ;
+        cs:code """
 .ds.button.primary {
   /* Variant: root + modifier (3 classes) */
   background: var(--button-primary-background);
 }
-```
-""" ;
-    cs:donts """
-(Don't) Combine multiple modifiers or mix states with variants.
-```css
+    """
+    ] ;
+    cs:dont [
+        cs:description "Combine multiple modifiers or mix states with variants." ;
+        cs:language "css" ;
+        cs:code """
 /* Bad: Mixing variant with state */
 .ds.button.primary[disabled].large {
   /* Too specific: root + 2 modifiers + state */
 }
-```
-""" .
+    """
+    ] .
 
 # CSS Selector Semantics Standard
 cs:CSSSelectorSemantics a cs:CodeStandard ;
     cs:name "css/selectors/semantics" ;
     cs:hasCategory cs:CSSCategory ;
     cs:description "CSS class names must describe the purpose or state of an element, not its appearance." ;
-    cs:dos """
-(Do) Use semantic modifier classes to represent component variations.
-```css
+    cs:do [
+        cs:description "Use semantic modifier classes to represent component variations." ;
+        cs:language "css" ;
+        cs:code """
 /* Semantic modifier for a primary button */
 .ds.button.primary {
   --modifier-color: var(--color-primary);
 }
-```
-""" ;
-    cs:donts """
-(Don't) Use non-semantic or presentational class names.
-```css
+    """
+    ] ;
+    cs:dont [
+        cs:description "Use non-semantic or presentational class names." ;
+        cs:language "css" ;
+        cs:code """
 /* Bad: 'big' describes appearance, not purpose */
 .ds.button.big {
   padding: 1rem;
 }
-```
-""" .
+    """
+    ] .
 
 # Theme Activation Standard
 cs:ThemeActivation a cs:CodeStandard ;
     cs:name "css/themes/activation" ;
     cs:hasCategory cs:CSSCategory ;
     cs:description """Theme tokens must be activated through CSS classes on container elements. See styling/themes/definition for theme token structure.""" ;
-    cs:dos """
-(Do) Define semantic tokens within theme classes.
-```css
+    cs:do [
+        cs:description "Define semantic tokens within theme classes." ;
+        cs:language "css" ;
+        cs:code """
 .canonical {
   --spacing-vertical-medium: var(--spacing-unit-2x);
   --color-background: var(--color-neutral-100);
 }
-```
-""" ;
-    cs:donts """
-(Don't) Hardcode theme names in component styles.
-```css
+    """
+    ] ;
+    cs:dont [
+        cs:description "Hardcode theme names in component styles." ;
+        cs:language "css" ;
+        cs:code """
 /* Bad: Component locked to specific theme */
 .ds.button {
   padding: var(--canonical-spacing-vertical-medium);
 }
-```
-""" .
+    """
+    ] .
 
 # CSS Property Values Standard
 cs:CSSPropertyValues a cs:CodeStandard ;
     cs:name "css/properties/values" ;
     cs:hasCategory cs:CSSCategory ;
     cs:description """CSS properties must use design tokens for design decisions (see styling/tokens/creation) and raw values for properties that are independent from design decisions, or "unthemable".""" ;
-    cs:dos """
-(Do) Use design tokens for design decisions.
-```css
+    cs:do [
+        cs:description "Use design tokens for design decisions." ;
+        cs:language "css" ;
+        cs:code """
 .ds.button {
   /* Design decision uses token */
   background: var(--button-background);
 }
-```
-(Do) Use raw values for unthemable properties (independent of design decisions).
-```css
+    """
+    ] ;
+    cs:do [
+        cs:description "Use raw values for unthemable properties (independent of design decisions)." ;
+        cs:language "css" ;
+        cs:code """
 .ds.skip-link {
     visibility: hidden;
 }
-```
-""" ;
-    cs:donts """
-(Don't) Use raw values for design decisions.
-```css
+    """
+    ] ;
+    cs:dont [
+        cs:description "Use raw values for design decisions." ;
+        cs:language "css" ;
+        cs:code """
 .ds.button {
   /* Bad: Design decision using raw value */
   background: #0066CC;
 }
-```
-""" .
+    """
+    ] .
 
 # Child Element Naming Standard
 cs:CSSChildElementNaming a cs:CodeStandard ;
     cs:name "css/selectors/child-elements" ;
     cs:hasCategory cs:CSSCategory ;
     cs:description """Child elements within components must use simple, role-based class names (e.g., `.header`, `.content`, `.icon`) scoped by the parent selector, NOT verbose prefixed names that repeat the component name.""" ;
-    cs:dos """
-(Do) Use simple role-based class names scoped by the parent.
-```css
+    cs:do [
+        cs:description "Use simple role-based class names scoped by the parent." ;
+        cs:language "css" ;
+        cs:code """
 .ds.accordion-item {
   & > .header {
     /* Header styles */
@@ -227,11 +245,12 @@ cs:CSSChildElementNaming a cs:CodeStandard ;
     /* Separator styles */
   }
 }
-```
-""" ;
-    cs:donts """
-(Don't) Use verbose prefixed class names that repeat the component name.
-```css
+    """
+    ] ;
+    cs:dont [
+        cs:description "Use verbose prefixed class names that repeat the component name." ;
+        cs:language "css" ;
+        cs:code """
 /* Bad: Redundant component prefix in child class names */
 .ds.accordion-item .accordion-item-header {
   /* 'accordion-item-' prefix is redundant */
@@ -244,22 +263,22 @@ cs:CSSChildElementNaming a cs:CodeStandard ;
 .ds.timeline-event .timeline-event-marker {
   /* Verbose and BEM-like */
 }
-```
-""" .
+    """
+    ] .
 
 # Component Naming Convention for CSS
 cs:CSSComponentNamingConvention a cs:CodeStandard ;
     cs:name "css/selectors/naming-convention" ;
     cs:hasCategory cs:CSSCategory ;
     cs:description "Component CSS class names must be the kebab-case version of the component's PascalCase name." ;
-    cs:dos """
-(Do) Convert PascalCase component names to kebab-case for CSS classes:
+    cs:do [
+        cs:description """Convert PascalCase component names to kebab-case for CSS classes:
 - `MyComponent` -> `.ds.my-component`
 - `UserProfile` -> `.ds.user-profile`
-- `Button` -> `.ds.button`
-""" ;
-    cs:donts """
-(Don't) Use PascalCase or other formats in CSS class names:
+- `Button` -> `.ds.button`"""
+    ] ;
+    cs:dont [
+        cs:description """Use PascalCase or other formats in CSS class names:
 - `.ds.MyComponent` (Bad: Not kebab-case)
-- `.ds.user_profile` (Bad: Not kebab-case)
-""" .
+- `.ds.user_profile` (Bad: Not kebab-case)"""
+    ] .